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"
|
||||
)
|
||||
@@ -28,75 +30,94 @@ func (a *App) ListClients(w http.ResponseWriter, r *http.Request) {
|
||||
return
|
||||
}
|
||||
|
||||
w.Header().Set("Content-Type", "text/html; charset=utf-8")
|
||||
w.Write([]byte(`<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Clients</title>
|
||||
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
|
||||
<style>
|
||||
.edit-form { display:none; margin-top:0.5rem; padding:0.5rem; border:1px solid #ccc; }
|
||||
.edit-row { display:none; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Clients</h1>
|
||||
<button class="btn" onclick="document.getElementById('clientForm').style.display='block'">Add Client</button>
|
||||
<div id="clientForm" style="display:none; margin-top:1rem;">
|
||||
<form hx-post="/clients" hx-target="#clientList" hx-swap="innerHTML">
|
||||
<input type="text" name="name" placeholder="Name" required>
|
||||
<input type="tel" name="phone" placeholder="Phone">
|
||||
<input type="email" name="email" placeholder="Email">
|
||||
<input type="text" name="address" placeholder="Address">
|
||||
<textarea name="notes" placeholder="Notes"></textarea>
|
||||
<button type="submit">Add Client</button>
|
||||
buf := templates.BufRender()
|
||||
actions := `<button type="button" onclick="document.getElementById('clientForm').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 Client</button>`
|
||||
fmt.Fprint(buf, templates.PageHeader("Clients", "Manage your business clients", actions))
|
||||
|
||||
// Add form
|
||||
fmt.Fprintf(buf, `
|
||||
<div id="clientForm" 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 Client</h3>
|
||||
<form hx-post="/clients" hx-target="#clientList" hx-swap="innerHTML" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<input type="text" name="name" placeholder="Name" required class="input-industrial">
|
||||
<input type="tel" name="phone" placeholder="Phone" class="input-industrial">
|
||||
<input type="email" name="email" placeholder="Email" class="input-industrial">
|
||||
<input type="text" name="address" placeholder="Address" class="input-industrial">
|
||||
<textarea name="notes" placeholder="Notes" class="input-industrial sm:col-span-2 lg:col-span-2" rows="2"></textarea>
|
||||
<div class="flex items-end">
|
||||
<button type="submit" class="btn-primary">Save Client</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Phone</th><th>WhatsApp</th><th>Actions</th></tr>
|
||||
</thead>
|
||||
<tbody id="clientList">
|
||||
`))
|
||||
for _, c := range clients {
|
||||
var whatsappCell string
|
||||
connected := false
|
||||
if c.WhatsAppNumber != "" && a.WAConnector != nil {
|
||||
connected, _ = a.WAConnector.IsConnected(r.Context(), c.ClientID)
|
||||
</div>`)
|
||||
|
||||
if len(clients) == 0 {
|
||||
fmt.Fprint(buf, templates.EmptyState(`<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5"/>`, "No clients found. Add your first client to get started."))
|
||||
} 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{"Name", "Phone", "WhatsApp", "Created", "Actions"}))
|
||||
for _, c := range clients {
|
||||
var whatsappCell string
|
||||
if c.WhatsAppNumber == "" {
|
||||
whatsappCell = fmt.Sprintf(`<a href="/leads/connect?client_id=%d" class="btn-ghost btn-sm">Connect</a>`, c.ClientID)
|
||||
} else {
|
||||
connected := false
|
||||
if a.WAConnector != nil {
|
||||
connected, _ = a.WAConnector.IsConnected(r.Context(), c.ClientID)
|
||||
}
|
||||
if connected {
|
||||
whatsappCell = fmt.Sprintf(`<span class="flex items-center gap-1.5"><span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span><span class="font-mono text-xs text-zinc-300">%s</span></span>`, htmlEscape(c.WhatsAppNumber))
|
||||
} else if c.WhatsAppConnected == 1 {
|
||||
whatsappCell = fmt.Sprintf(`<span class="flex items-center gap-1.5"><span class="w-1.5 h-1.5 rounded-full bg-rose-400"></span><span class="font-mono text-xs text-zinc-300">%s</span><a href="/leads/connect?client_id=%d" class="text-[10px] text-amber-400 hover:underline">reconnect</a></span>`, htmlEscape(c.WhatsAppNumber), c.ClientID)
|
||||
} else {
|
||||
whatsappCell = fmt.Sprintf(`<a href="/leads/connect?client_id=%d" class="btn-ghost btn-sm">Connect</a>`, c.ClientID)
|
||||
}
|
||||
}
|
||||
created := time.Unix(c.CreatedAt, 0).Format("02/01/2006")
|
||||
fmt.Fprintf(buf, `<tr>
|
||||
<td class="font-medium text-zinc-200">%s</td>
|
||||
<td class="font-mono text-xs">%s</td>
|
||||
<td>%s</td>
|
||||
<td class="text-xs text-zinc-500">%s</td>
|
||||
<td>
|
||||
<div class="flex items-center gap-2">
|
||||
<a href="/clients/%d" class="btn-ghost btn-sm">View</a>
|
||||
<button type="button" onclick="document.getElementById('editForm%d').classList.toggle('hidden')" class="btn-ghost btn-sm">Edit</button>
|
||||
<form hx-delete="/clients/%d" hx-target="closest tr" hx-swap="outerHTML" style="display:inline">
|
||||
<button type="submit" class="btn-danger btn-sm" onclick="return confirm('Delete this client?')">Delete</button>
|
||||
</form>
|
||||
</div>
|
||||
</td>
|
||||
</tr>`, htmlEscape(c.Name), htmlEscape(c.Phone), whatsappCell, created, c.ClientID, c.ClientID, c.ClientID)
|
||||
}
|
||||
if connected {
|
||||
whatsappCell = c.WhatsAppNumber + ` <span style="color:#28a745">●</span>`
|
||||
} else if c.WhatsAppConnected == 1 && c.WhatsAppNumber != "" {
|
||||
whatsappCell = c.WhatsAppNumber + ` <span style="color:#dc3545">○</span> <a href="/leads/connect?client_id=` + strconv.FormatInt(c.ClientID, 10) + `">Reconnect</a>`
|
||||
} else {
|
||||
whatsappCell = `<a href="/leads/connect?client_id=` + strconv.FormatInt(c.ClientID, 10) + `">Connect</a>`
|
||||
fmt.Fprint(buf, templates.TableEnd())
|
||||
fmt.Fprintf(buf, `</div></div>`)
|
||||
|
||||
// Edit forms (rendered below table, toggled via JS)
|
||||
for _, c := range clients {
|
||||
fmt.Fprintf(buf, `
|
||||
<div id="editForm%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-4">Edit %s</h3>
|
||||
<form hx-put="/clients/%d" hx-target="#clientList" hx-swap="innerHTML" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<input type="text" name="name" value="%s" class="input-industrial">
|
||||
<input type="tel" name="phone" value="%s" class="input-industrial">
|
||||
<input type="email" name="email" value="%s" class="input-industrial">
|
||||
<input type="text" name="address" value="%s" class="input-industrial">
|
||||
<textarea name="notes" class="input-industrial sm:col-span-2 lg:col-span-2" rows="2">%s</textarea>
|
||||
<div class="flex items-end gap-2">
|
||||
<button type="submit" class="btn-primary">Save</button>
|
||||
<button type="button" onclick="document.getElementById('editForm%d').classList.add('hidden')" class="btn-ghost">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>`, c.ClientID, htmlEscape(c.Name), c.ClientID, htmlEscape(c.Name), htmlEscape(c.Phone), htmlEscape(c.Email), htmlEscape(c.Address), htmlEscape(c.Notes), c.ClientID)
|
||||
}
|
||||
w.Write([]byte(`<tr>
|
||||
<td>` + c.Name + `</td>
|
||||
<td>` + c.Phone + `</td>
|
||||
<td>` + whatsappCell + `</td>
|
||||
<td>
|
||||
<a href="/clients/` + strconv.FormatInt(c.ClientID, 10) + `">View</a>
|
||||
<button type="button" onclick="document.getElementById('editForm` + strconv.FormatInt(c.ClientID, 10) + `').style.display='block'">Edit</button>
|
||||
<form method="DELETE" style="display:inline" hx-delete="/clients/` + strconv.FormatInt(c.ClientID, 10) + `" hx-target="closest tr">
|
||||
<button type="submit">Delete</button>
|
||||
</form>
|
||||
<tr id="editForm` + strconv.FormatInt(c.ClientID, 10) + `" class="edit-row"><td colspan="4">
|
||||
<form hx-put="/clients/` + strconv.FormatInt(c.ClientID, 10) + `" hx-target="#clientList" hx-swap="innerHTML">
|
||||
<input type="text" name="name" value="` + c.Name + `">
|
||||
<input type="tel" name="phone" value="` + c.Phone + `">
|
||||
<input type="email" name="email" value="` + c.Email + `">
|
||||
<input type="text" name="address" value="` + c.Address + `">
|
||||
<textarea name="notes">` + c.Notes + `</textarea>
|
||||
<button type="submit">Save</button>
|
||||
</form>
|
||||
</td></tr>
|
||||
</td>
|
||||
</tr>`))
|
||||
}
|
||||
w.Write([]byte(`</tbody></table>
|
||||
<p><a href="/">Back to Home</a></p>
|
||||
</body></html>`))
|
||||
|
||||
w.Header().Set("Content-Type", "text/html; charset=utf-8")
|
||||
templates.WritePage(w, buf, "Clients", "clients")
|
||||
}
|
||||
|
||||
func (a *App) CreateClient(w http.ResponseWriter, r *http.Request) {
|
||||
@@ -121,7 +142,6 @@ func (a *App) CreateClient(w http.ResponseWriter, r *http.Request) {
|
||||
return
|
||||
}
|
||||
|
||||
w.Header().Set("Content-Type", "text/html; charset=utf-8")
|
||||
w.Header().Set("HX-Refresh", "true")
|
||||
}
|
||||
|
||||
@@ -138,43 +158,76 @@ func (a *App) ViewClient(w http.ResponseWriter, r *http.Request) {
|
||||
return
|
||||
}
|
||||
|
||||
w.Header().Set("Content-Type", "text/html; charset=utf-8")
|
||||
buf := templates.BufRender()
|
||||
fmt.Fprint(buf, templates.PageHeader(htmlEscape(client.Name), "Client details and WhatsApp connection"))
|
||||
|
||||
var whatsappSection string
|
||||
waSection := ""
|
||||
if client.WhatsAppNumber != "" {
|
||||
connected := false
|
||||
if a.WAConnector != nil {
|
||||
connected, _ = a.WAConnector.IsConnected(r.Context(), client.ClientID)
|
||||
}
|
||||
status := "Not connected"
|
||||
style := "color:#999"
|
||||
statusPill := `<span class="pill pill-rose">Disconnected</span>`
|
||||
if connected {
|
||||
status = "Connected"
|
||||
style = "color:#28a745"
|
||||
statusPill = `<span class="pill pill-emerald">Connected</span>`
|
||||
} else if client.WhatsAppConnected == 1 {
|
||||
status = "Disconnected (was connected)"
|
||||
style = "color:#dc3545"
|
||||
statusPill = `<span class="pill pill-amber">Stale</span>`
|
||||
}
|
||||
whatsappSection = `
|
||||
<p>WhatsApp: <strong>` + client.WhatsAppNumber + `</strong> <span style="` + style + `">(` + status + `)</span></p>
|
||||
<p><a href="/leads/connect?client_id=` + strconv.FormatInt(client.ClientID, 10) + `">Reconnect WhatsApp</a></p>`
|
||||
waSection = fmt.Sprintf(`
|
||||
<div class="card-industrial p-5 mb-6">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="text-sm font-semibold text-zinc-200">WhatsApp</h3>
|
||||
%s
|
||||
</div>
|
||||
<div class="font-mono text-sm text-zinc-300">%s</div>
|
||||
<div class="mt-4">
|
||||
<a href="/leads/connect?client_id=%d" class="btn-ghost btn-sm">%s</a>
|
||||
</div>
|
||||
</div>`, statusPill, htmlEscape(client.WhatsAppNumber), client.ClientID, map[bool]string{true: "Reconnect", false: "Reconnect"}[true])
|
||||
} else {
|
||||
whatsappSection = `
|
||||
<p>WhatsApp: Not configured <a href="/leads/connect?client_id=` + strconv.FormatInt(client.ClientID, 10) + `">Connect</a></p>`
|
||||
waSection = fmt.Sprintf(`
|
||||
<div class="card-industrial p-5 mb-6">
|
||||
<h3 class="text-sm font-semibold text-zinc-200 mb-2">WhatsApp</h3>
|
||||
<p class="text-sm text-zinc-500 mb-4">No WhatsApp number configured for this client.</p>
|
||||
<a href="/leads/connect?client_id=%d" class="btn-primary btn-sm">Connect WhatsApp</a>
|
||||
</div>`, client.ClientID)
|
||||
}
|
||||
|
||||
w.Write([]byte(`<!DOCTYPE html>
|
||||
<html>
|
||||
<head></head>
|
||||
<body>
|
||||
<h1>` + client.Name + `</h1>
|
||||
<p>Client ID: ` + strconv.FormatInt(client.ClientID, 10) + `</p>
|
||||
<p>Phone: ` + client.Phone + `</p>
|
||||
<p>Email: ` + client.Email + `</p>
|
||||
<p>Address: ` + client.Address + `</p>
|
||||
<p>Notes: ` + client.Notes + `</p>` + whatsappSection + `
|
||||
<a href="/clients">Back</a>
|
||||
</body></html>`))
|
||||
fmt.Fprintf(buf, `
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 animate-slide-up">
|
||||
<div class="lg:col-span-2">
|
||||
<div class="card-industrial p-5">
|
||||
<h3 class="text-sm font-semibold text-zinc-200 mb-4">Details</h3>
|
||||
<div class="space-y-3">
|
||||
<div class="flex justify-between py-2 border-b border-white/[0.04]">
|
||||
<span class="text-xs text-zinc-500 font-mono uppercase">Phone</span>
|
||||
<span class="text-sm text-zinc-300 font-mono">%s</span>
|
||||
</div>
|
||||
<div class="flex justify-between py-2 border-b border-white/[0.04]">
|
||||
<span class="text-xs text-zinc-500 font-mono uppercase">Email</span>
|
||||
<span class="text-sm text-zinc-300">%s</span>
|
||||
</div>
|
||||
<div class="flex justify-between py-2 border-b border-white/[0.04]">
|
||||
<span class="text-xs text-zinc-500 font-mono uppercase">Address</span>
|
||||
<span class="text-sm text-zinc-300">%s</span>
|
||||
</div>
|
||||
<div class="flex justify-between py-2">
|
||||
<span class="text-xs text-zinc-500 font-mono uppercase">Notes</span>
|
||||
<span class="text-sm text-zinc-300">%s</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
%s
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<a href="/clients" class="btn-ghost btn-sm">Back to Clients</a>
|
||||
</div>`, htmlEscape(client.Phone), htmlEscape(client.Email), htmlEscape(client.Address), htmlEscape(client.Notes), waSection)
|
||||
|
||||
w.Header().Set("Content-Type", "text/html; charset=utf-8")
|
||||
templates.WritePage(w, buf, client.Name, "clients")
|
||||
}
|
||||
|
||||
func (a *App) UpdateClient(w http.ResponseWriter, r *http.Request) {
|
||||
@@ -217,7 +270,7 @@ func (a *App) DeleteClient(w http.ResponseWriter, r *http.Request) {
|
||||
}
|
||||
|
||||
w.Header().Set("Content-Type", "text/html; charset=utf-8")
|
||||
w.Write([]byte("OK"))
|
||||
w.Write([]byte(""))
|
||||
}
|
||||
|
||||
// --- package-level shims kept for existing tests ---
|
||||
|
||||
Reference in New Issue
Block a user