# 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`) - 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