zeroclock/docs/plans/2026-02-17-clients-view-navrail-reorg-design.md

Clients View & NavRail Reorganization Design

Goal: Add a Clients management view and reorder the NavRail into a logical workflow.

---

NavRail Reorder

Current: Dashboard, Timer, Projects, Entries, Reports, Invoices, Settings

New order (workflow flow):

1. Dashboard (LayoutDashboard) — Overview
2. Timer (Clock) — Primary action
3. Clients (Users) — NEW — Set up clients first
4. Projects (FolderKanban) — Projects belong to clients
5. Entries (List) — Time entries belong to projects
6. Invoices (FileText) — Bill clients for entries
7. Reports (BarChart3) — Analytics across everything
8. Settings (Settings) — Utility, always last

Files: src/components/NavRail.vue, src/router/index.ts

---

Clients View

Layout

• Header: "Clients" title + "+ Add" button (top right)
• Card grid: 1-3 columns responsive (same as Projects.vue)
• Each card: name (bold), company subtitle (if set), email (tertiary)
• Hover reveals edit/delete icons (same pattern as Projects)
• Empty state: Users icon + "No clients yet" + "Create Client" CTA

Create/Edit Dialog

Two sections in the form:

Contact Info:

• Name (text, required)
• Email (text, optional)
• Phone (text, optional)
• Address (textarea, optional)

Billing Details (collapsible section — collapsed on create, open if data exists on edit):

• Company (text) — Business name for invoice header
• Tax ID (text) — VAT/Tax number shown on invoices
• Payment Terms (text) — e.g. "Net 30", "Due on receipt"
• Notes (textarea) — Internal notes

Delete Confirmation

Same pattern as Projects — "Delete Client" with warning text.

---

Backend Changes

Database Migration

Add columns to clients table via ALTER TABLE ADD COLUMN statements in init_db:

• company TEXT
• phone TEXT
• tax_id TEXT
• payment_terms TEXT
• notes TEXT

Rust Changes

• Expand Client struct with new fields (all Option<String>)
• Update get_clients SELECT to include new columns
• Update create_client INSERT to include new columns
• Update update_client UPDATE to include new columns
• Update export_data client query to include new columns

Store Changes

• Expand Client interface in src/stores/clients.ts with new optional fields