feat(go-crm): industrial terminal-core UI redesign
Complete visual overhaul of the go-crm web interface: - New shared layout system (internal/templates/ui.go) with dark zinc industrial theme, JetBrains Mono typography, grid/noise textures - Redesigned all pages: Dashboard, Login/Signup, Clients, Customers, Services, Scheduling, Payments, Questions, Answers, Leads, Review Queue, Report, Keyword Mapping - Tailwind CSS via CDN with custom color palette (amber/emerald/rose/sky) - HTMX-powered interactions with CSS swap animations - Status pills, KPI cards, data tables, empty states, inline forms - Mobile-responsive sidebar with collapsible navigation - All existing tests updated and passing - Zero new build dependencies — works with existing go run/air workflow
This commit is contained in:
@@ -1,11 +1,13 @@
|
||||
package handlers
|
||||
|
||||
import (
|
||||
"fmt"
|
||||
"net/http"
|
||||
"strconv"
|
||||
"time"
|
||||
|
||||
"go-crm/internal/db"
|
||||
"go-crm/internal/templates"
|
||||
|
||||
"github.com/go-chi/chi/v5"
|
||||
)
|
||||
@@ -45,32 +47,105 @@ func (a *App) ListPayments(w http.ResponseWriter, r *http.Request) {
|
||||
clientNames := make(map[int64]string)
|
||||
customerNames := make(map[int64]string)
|
||||
for _, c := range clients {
|
||||
clientOptions += `<option value="` + strconv.FormatInt(c.ClientID, 10) + `">` + c.Name + `</option>`
|
||||
clientOptions += fmt.Sprintf(`<option value="%d">%s</option>`, c.ClientID, htmlEscape(c.Name))
|
||||
clientNames[c.ClientID] = c.Name
|
||||
}
|
||||
for _, cu := range customers {
|
||||
customerOptions += `<option value="` + strconv.FormatInt(cu.CustomerID, 10) + `">` + cu.Name + `</option>`
|
||||
customerOptions += fmt.Sprintf(`<option value="%d">%s</option>`, cu.CustomerID, htmlEscape(cu.Name))
|
||||
customerNames[cu.CustomerID] = cu.Name
|
||||
}
|
||||
|
||||
w.Header().Set("Content-Type", "text/html; charset=utf-8")
|
||||
w.Write([]byte(`<!DOCTYPE html><html><head><script src="https://unpkg.com/htmx.org@1.9.10"></script><style>.edit-row{display:none}</style></head><body><h1>Payments</h1><button class="btn" onclick="document.getElementById('paymentForm').style.display='block'">Add Payment</button><div id="paymentForm" style="display:none; margin-top:1rem;"><form hx-post="/payments" hx-target="#paymentList"><select name="client_id" required><option value="">Select Client</option>` + clientOptions + `</select><select name="customer_id" required><option value="">Select Customer</option>` + customerOptions + `</select><input type="checkbox" name="has_paid"><label>Paid</label><input type="number" name="amount" placeholder="Amount" step="0.01"><input type="date" name="payment_date"><select name="payment_method"><option value="">Select Payment Method</option><option value="PIX">PIX</option><option value="Dinheiro">Dinheiro</option><option value="Débito">Débito</option><option value="Crédito à Vista">Crédito à Vista</option><option value="Parcelado">Parcelado</option><option value="Boleto">Boleto</option><option value="Transferência Bancária">Transferência Bancária</option></select><button type="submit">Add</button></form></div><table><thead><tr><th>Client</th><th>Customer</th><th>Amount</th><th>Paid</th><th>Date</th><th>Method</th><th>Actions</th></tr></thead><tbody id="paymentList">`))
|
||||
for _, p := range payments {
|
||||
paid := "No"
|
||||
if p.HasPaid {
|
||||
paid = "Yes"
|
||||
buf := templates.BufRender()
|
||||
actions := `<button type="button" onclick="document.getElementById('paymentForm').classList.toggle('hidden')" class="btn-primary"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg> Add Payment</button>`
|
||||
fmt.Fprint(buf, templates.PageHeader("Payments", "Track revenue and transactions", actions))
|
||||
|
||||
fmt.Fprintf(buf, `
|
||||
<div id="paymentForm" class="hidden mb-6 animate-slide-up">
|
||||
<div class="card-industrial p-5">
|
||||
<h3 class="text-sm font-semibold text-zinc-200 mb-4">New Payment</h3>
|
||||
<form hx-post="/payments" hx-target="#paymentList" hx-swap="innerHTML" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<select name="client_id" required class="input-industrial"><option value="">Select Client</option>%s</select>
|
||||
<select name="customer_id" required class="input-industrial"><option value="">Select Customer</option>%s</select>
|
||||
<input type="number" name="amount" placeholder="Amount" step="0.01" class="input-industrial">
|
||||
<input type="date" name="payment_date" class="input-industrial">
|
||||
<select name="payment_method" class="input-industrial"><option value="">Method</option><option value="PIX">PIX</option><option value="Dinheiro">Dinheiro</option><option value="Débito">Débito</option><option value="Crédito à Vista">Crédito à Vista</option><option value="Parcelado">Parcelado</option><option value="Boleto">Boleto</option><option value="Transferência Bancária">Transferência Bancária</option></select>
|
||||
<label class="flex items-center gap-2 text-sm text-zinc-400 cursor-pointer select-none">
|
||||
<input type="checkbox" name="has_paid" class="w-4 h-4 rounded border-zinc-600 bg-zinc-800 text-amber-400 focus:ring-amber-400/20">
|
||||
<span>Paid</span>
|
||||
</label>
|
||||
<div class="flex items-end"><button type="submit" class="btn-primary">Save</button></div>
|
||||
</form>
|
||||
</div>
|
||||
</div>`, clientOptions, customerOptions)
|
||||
|
||||
if len(payments) == 0 {
|
||||
fmt.Fprint(buf, templates.EmptyState(`<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2-1.343-2-3-2zm0 0v1m0 0v1m0-1h1m-1 0H9m12 0a2 2 0 012 2v4.5a2.5 2.5 0 01-2.5 2.5h-15a2.5 2.5 0 01-2.5-2.5V10a2 2 0 012-2h15z"/>`, "No payments recorded yet."))
|
||||
} else {
|
||||
fmt.Fprintf(buf, `<div class="card-industrial overflow-hidden animate-slide-up stagger-1"><div class="overflow-x-auto">`)
|
||||
fmt.Fprint(buf, templates.TableStart([]string{"Client", "Customer", "Amount", "Paid", "Date", "Method", "Actions"}))
|
||||
for _, p := range payments {
|
||||
paidPill := `<span class="pill pill-rose">unpaid</span>`
|
||||
if p.HasPaid {
|
||||
paidPill = `<span class="pill pill-emerald">paid</span>`
|
||||
}
|
||||
clientName := clientNames[p.ClientID]
|
||||
if clientName == "" {
|
||||
clientName = strconv.FormatInt(p.ClientID, 10)
|
||||
}
|
||||
customerName := customerNames[p.CustomerID]
|
||||
if customerName == "" {
|
||||
customerName = strconv.FormatInt(p.CustomerID, 10)
|
||||
}
|
||||
fmt.Fprintf(buf, `<tr>
|
||||
<td class="text-zinc-300 text-sm">%s</td>
|
||||
<td class="text-zinc-300 text-sm">%s</td>
|
||||
<td class="font-mono text-sm text-emerald-400">R$ %.2f</td>
|
||||
<td>%s</td>
|
||||
<td class="font-mono text-xs text-zinc-400">%s</td>
|
||||
<td class="text-xs text-zinc-400">%s</td>
|
||||
<td>
|
||||
<div class="flex items-center gap-2">
|
||||
<a href="/payments/%d" class="btn-ghost btn-sm">View</a>
|
||||
<button type="button" onclick="document.getElementById('editPay%d').classList.toggle('hidden')" class="btn-ghost btn-sm">Edit</button>
|
||||
<form hx-delete="/payments/%d" hx-target="closest tr" hx-swap="outerHTML" style="display:inline">
|
||||
<button type="submit" class="btn-danger btn-sm" onclick="return confirm('Delete?')">Delete</button>
|
||||
</form>
|
||||
</div>
|
||||
</td>
|
||||
</tr>`, htmlEscape(clientName), htmlEscape(customerName), p.Amount, paidPill, htmlEscape(p.PaymentDate), htmlEscape(p.PaymentMethod), p.PaymentID, p.PaymentID, p.PaymentID)
|
||||
}
|
||||
clientName := clientNames[p.ClientID]
|
||||
if clientName == "" {
|
||||
clientName = strconv.FormatInt(p.ClientID, 10)
|
||||
fmt.Fprint(buf, templates.TableEnd())
|
||||
fmt.Fprintf(buf, `</div></div>`)
|
||||
|
||||
for _, p := range payments {
|
||||
clientName := clientNames[p.ClientID]
|
||||
customerName := customerNames[p.CustomerID]
|
||||
fmt.Fprintf(buf, `
|
||||
<div id="editPay%d" class="hidden mt-4 animate-slide-up">
|
||||
<div class="card-industrial p-5 border-amber-400/10">
|
||||
<h3 class="text-sm font-semibold text-zinc-200 mb-3">Edit Payment #%d</h3>
|
||||
<form hx-put="/payments/%d" hx-target="#paymentList" hx-swap="innerHTML" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
|
||||
<select name="client_id" class="input-industrial text-xs"><option value="%d">%s</option>%s</select>
|
||||
<select name="customer_id" class="input-industrial text-xs"><option value="%d">%s</option>%s</select>
|
||||
<input type="number" name="amount" value="%.2f" step="0.01" class="input-industrial text-xs">
|
||||
<input type="date" name="payment_date" value="%s" class="input-industrial text-xs">
|
||||
<select name="payment_method" class="input-industrial text-xs"><option value="%s">%s</option><option value="PIX">PIX</option><option value="Dinheiro">Dinheiro</option><option value="Débito">Débito</option><option value="Crédito à Vista">Crédito à Vista</option><option value="Parcelado">Parcelado</option><option value="Boleto">Boleto</option><option value="Transferência Bancária">Transferência Bancária</option></select>
|
||||
<label class="flex items-center gap-2 text-xs text-zinc-400 cursor-pointer select-none">
|
||||
<input type="checkbox" name="has_paid" class="w-4 h-4 rounded border-zinc-600 bg-zinc-800 text-amber-400">
|
||||
<span>Paid</span>
|
||||
</label>
|
||||
<div class="flex items-end gap-2">
|
||||
<button type="submit" class="btn-primary btn-sm">Save</button>
|
||||
<button type="button" onclick="document.getElementById('editPay%d').classList.add('hidden')" class="btn-ghost btn-sm">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>`, p.PaymentID, p.PaymentID, p.PaymentID, p.ClientID, htmlEscape(clientName), clientOptions, p.CustomerID, htmlEscape(customerName), customerOptions, p.Amount, htmlEscape(p.PaymentDate), p.PaymentMethod, p.PaymentMethod, p.PaymentID)
|
||||
}
|
||||
customerName := customerNames[p.CustomerID]
|
||||
if customerName == "" {
|
||||
customerName = strconv.FormatInt(p.CustomerID, 10)
|
||||
}
|
||||
w.Write([]byte(`<tr><td>` + clientName + `</td><td>` + customerName + `</td><td>` + strconv.FormatFloat(p.Amount, 'f', 2, 64) + `</td><td>` + paid + `</td><td>` + p.PaymentDate + `</td><td>` + p.PaymentMethod + `</td><td><a href="/payments/` + strconv.FormatInt(p.PaymentID, 10) + `">View</a><button type="button" onclick="document.getElementById('editPay` + strconv.FormatInt(p.PaymentID, 10) + `').style.display='table-row'">Edit</button><form method="DELETE" style="display:inline" hx-delete="/payments/` + strconv.FormatInt(p.PaymentID, 10) + `" hx-target="closest tr"><button type="submit">Delete</button></form></td></tr><tr id="editPay` + strconv.FormatInt(p.PaymentID, 10) + `" style="display:none"><td colspan="7"><form hx-put="/payments/` + strconv.FormatInt(p.PaymentID, 10) + `" hx-target="#paymentList" hx-swap="innerHTML"><select name="client_id"><option value="` + strconv.FormatInt(p.ClientID, 10) + `">` + clientName + `</option>` + clientOptions + `</select><select name="customer_id"><option value="` + strconv.FormatInt(p.CustomerID, 10) + `">` + customerName + `</option>` + customerOptions + `</select><input type="checkbox" name="has_paid"><input type="number" name="amount" value="` + strconv.FormatFloat(p.Amount, 'f', 2, 64) + `"><input type="date" name="payment_date" value="` + p.PaymentDate + `"><select name="payment_method"><option value="` + p.PaymentMethod + `">` + p.PaymentMethod + `</option><option value="PIX">PIX</option><option value="Dinheiro">Dinheiro</option><option value="Débito">Débito</option><option value="Crédito à Vista">Crédito à Vista</option><option value="Parcelado">Parcelado</option><option value="Boleto">Boleto</option><option value="Transferência Bancária">Transferência Bancária</option></select><button type="submit">Save</button></form></td></tr>`))
|
||||
}
|
||||
w.Write([]byte(`</tbody></table></body></html>`))
|
||||
|
||||
w.Header().Set("Content-Type", "text/html; charset=utf-8")
|
||||
templates.WritePage(w, buf, "Payments", "payments")
|
||||
}
|
||||
|
||||
func (a *App) CreatePayment(w http.ResponseWriter, r *http.Request) {
|
||||
@@ -111,7 +186,7 @@ func (a *App) ViewPayment(w http.ResponseWriter, r *http.Request) {
|
||||
return
|
||||
}
|
||||
|
||||
id, _ := strconv.ParseInt(r.URL.Query().Get("id"), 10, 64)
|
||||
id, _ := strconv.ParseInt(chi.URLParam(r, "id"), 10, 64)
|
||||
var p db.Payment
|
||||
var hasPaid int
|
||||
err := a.DB.QueryRow("SELECT payment_id, client_id, customer_id, schedule_id, has_paid, amount, payment_date, payment_method, created_at FROM payments WHERE payment_id = ?", id).Scan(&p.PaymentID, &p.ClientID, &p.CustomerID, &p.ScheduleID, &hasPaid, &p.Amount, &p.PaymentDate, &p.PaymentMethod, &p.CreatedAt)
|
||||
@@ -121,8 +196,38 @@ func (a *App) ViewPayment(w http.ResponseWriter, r *http.Request) {
|
||||
}
|
||||
p.HasPaid = hasPaid == 1
|
||||
|
||||
buf := templates.BufRender()
|
||||
fmt.Fprint(buf, templates.PageHeader("Payment", "Transaction details"))
|
||||
paidPill := `<span class="pill pill-rose">unpaid</span>`
|
||||
if p.HasPaid {
|
||||
paidPill = `<span class="pill pill-emerald">paid</span>`
|
||||
}
|
||||
fmt.Fprintf(buf, `
|
||||
<div class="max-w-lg animate-slide-up">
|
||||
<div class="card-industrial p-6">
|
||||
<div class="flex items-center gap-2 mb-6">%s</div>
|
||||
<div class="space-y-3">
|
||||
<div class="flex justify-between py-3 border-b border-white/[0.04]">
|
||||
<span class="text-xs font-mono uppercase text-zinc-500">Amount</span>
|
||||
<span class="text-lg font-mono font-semibold text-emerald-400">R$ %.2f</span>
|
||||
</div>
|
||||
<div class="flex justify-between py-3 border-b border-white/[0.04]">
|
||||
<span class="text-xs font-mono uppercase text-zinc-500">Method</span>
|
||||
<span class="text-sm text-zinc-300">%s</span>
|
||||
</div>
|
||||
<div class="flex justify-between py-3">
|
||||
<span class="text-xs font-mono uppercase text-zinc-500">Date</span>
|
||||
<span class="text-sm font-mono text-zinc-300">%s</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6">
|
||||
<a href="/payments" class="btn-ghost btn-sm">Back</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>`, paidPill, p.Amount, htmlEscape(p.PaymentMethod), htmlEscape(p.PaymentDate))
|
||||
|
||||
w.Header().Set("Content-Type", "text/html; charset=utf-8")
|
||||
w.Write([]byte(`<!DOCTYPE html><body><h1>Payment</h1><p>Amount: ` + strconv.FormatFloat(p.Amount, 'f', 2, 64) + `</p><p>Paid: ` + strconv.FormatBool(p.HasPaid) + `</p><p>Method: ` + p.PaymentMethod + `</p><a href="/payments">Back</a></body></html>`))
|
||||
templates.WritePage(w, buf, "Payment", "payments")
|
||||
}
|
||||
|
||||
func (a *App) UpdatePayment(w http.ResponseWriter, r *http.Request) {
|
||||
@@ -151,11 +256,11 @@ func (a *App) DeletePayment(w http.ResponseWriter, r *http.Request) {
|
||||
return
|
||||
}
|
||||
|
||||
id, _ := strconv.ParseInt(r.URL.Query().Get("id"), 10, 64)
|
||||
id, _ := strconv.ParseInt(chi.URLParam(r, "id"), 10, 64)
|
||||
a.DB.Exec("DELETE FROM payments WHERE payment_id = ?", id)
|
||||
}
|
||||
|
||||
// --- package-level shims kept for existing tests ---
|
||||
// --- package-level shims ---
|
||||
|
||||
func ListPayments(w http.ResponseWriter, r *http.Request) {
|
||||
(&App{DB: DB, WAConnector: WAConnector}).ListPayments(w, r)
|
||||
|
||||
Reference in New Issue
Block a user