# Phase 1.5 — Visual Redesign: Manual Test Checklist Reskinned the company-app frontend to match `temp/mockups/Cross Financial Manage Mockup.png` (navy sidebar, blue accent, card-based content) and added three new screens (Dashboard, Chart of Accounts tree view, Reports Centre shell, GL account drill-down). No backend or schema changes in this phase — everything below should work against data you already have. Tick each box as you go. If something fails, note what you saw under it — that's what I'll fix. ## 0. Start everything ``` # Terminal 1 — company API cd D:\Webstorm\cross-financial-management npm run dev # http://localhost:5000 # Terminal 2 — company frontend cd D:\Webstorm\cross-financial-management\client npm run dev # http://localhost:5173 # Terminal 3 — Manager API cd D:\Webstorm\cross-financial-management\manager npm run dev # http://localhost:5100 # Terminal 4 — Manager frontend cd D:\Webstorm\cross-financial-management\manager\client npm run dev # http://localhost:5174 ``` Manager login: `joosth2002@icloud.com` / `ChangeMe123!` (change this password once you're through testing — see `manager/SETUP.md`). - [ ] All four `npm run dev` terminals started with no errors ## 1. Sign-in / handoff flow (regression — not new, but the entry point to everything below) - [ ] Open `http://localhost:5174`, sign in with the Manager credentials above - [ ] Company picker shows "Demo Company" - [ ] Clicking it redirects to `http://localhost:5173` and you land **already signed in** — no login form appears in the company app - [ ] Refreshing the company app keeps you signed in (session persists) - [ ] Signing out (avatar menu, top-right, in the company app) redirects you back to the Manager rather than a dead `/login` page ## 2. Sidebar & top bar (new look) - [ ] Left sidebar renders navy with the "Cross Financial / MANAGER" logo mark at the top - [ ] Nav items are grouped under **General Ledger**, **Reports**, **Administration** with a standalone **Dashboard** link above them - [ ] Each nav item has an icon; the currently active page is highlighted (lighter navy pill, blue icon, white text) - [ ] Clicking every visible nav item navigates correctly and updates the highlight - [ ] Top bar (white, right-aligned) shows the Branch switcher and your avatar with initials - [ ] Avatar menu shows your name + email and a working **Sign out** - [ ] Nav items you don't have permission for are hidden (test with a restricted user if you have one, or trust that `hasPermission` filtering is unchanged from before) ## 3. Dashboard (new — this is now the `/` landing page) - [ ] Landing on `http://localhost:5173/` after sign-in shows the new Dashboard, not the journal entry list - [ ] Four KPI tiles render: **Posted Entries**, **Draft Entries**, **Total Posted Movement**, **Total Entries** — numbers should match what you'd expect from your seeded/test data - [ ] "Posted Movement by Account Type" bar list appears once you have at least one posted entry, with one bar per account type that has activity (ASSET/LIABILITY/etc.), and the relative bar widths look proportionate to the amounts shown - [ ] With **zero** posted entries (fresh DB), the panel shows "No posted entries yet." instead of breaking - [ ] "Quick Actions" only shows actions you have permission for, and each one navigates to the right page (New Manual Entry / Chart of Accounts / Journals / Users & Roles) - [ ] "Recent Activity" lists your most recent journal entries (any status) with date, entry number, description, amount, and a status pill; clicking a row opens that entry's detail page - [ ] Switching the Branch switcher between "Main" and a specific branch updates the dashboard figures to that branch's data ## 4. Chart of Accounts (rebuilt as a grouped/collapsible tree) - [ ] Accounts are grouped under collapsible headers: ASSET, LIABILITY, EQUITY, INCOME, EXPENSE - [ ] Clicking a group header collapses/expands its accounts, and the chevron icon flips accordingly - [ ] Each group header shows an account count chip (e.g. "12 accounts") - [ ] Each account row shows: account code (monospace), account name, normal balance (DEBIT/CREDIT), a control-account pill when applicable, and an Active/Closed status pill - [ ] The search box filters accounts by code or name across all groups as you type - [ ] "New Account" still opens the existing account-creation dialog and newly created accounts appear in the correct group after saving - [ ] Groups with zero matching accounts (e.g. after a narrow search) don't render or show cleanly rather than looking broken ## 5. General Ledger — "All Entries" tab (regression) - [ ] `Journal Entries` in the sidebar opens a page titled **General Ledger** with two tabs: "All Entries" and "By Account" - [ ] "All Entries" behaves exactly as before: same grid, same columns, sortable by date, clicking a row opens the entry detail page - [ ] "New Manual Entry" button still only shows if you have `gl.journal.post` ## 6. General Ledger — "By Account" tab (new — account-centric drill-down) - [ ] Selecting an account from the dropdown loads its posted transaction history - [ ] A running balance column updates correctly line by line (increases/decreases match the account's normal balance direction — e.g. a debit-normal account's balance goes up on debits, down on credits) - [ ] Restricting the From/To date fields narrows the rows and the running balance still looks correct for the restricted range - [ ] An account with no posted activity shows "No posted transactions for this account in the selected range." instead of an empty broken table - [ ] Before selecting an account, you see a prompt to pick one rather than an empty table - [ ] Switching the Branch switcher changes which entries are considered ## 7. Journal Entry form (visual alignment + new static footer) - [ ] Form still works exactly as before: adding/removing lines, debit/credit mutual exclusion per line, the live "Balanced ✓ / Not balanced" indicator, and Post Entry / Cancel - [ ] Two new footer cards appear below the line table: **Attachments** ("+ Add Attachment") and **Notes** ("+ Add Note") — these are intentionally disabled/inert placeholders for now, just confirm they render without errors and don't block submission - [ ] Posting a valid balanced entry still redirects to its detail page as before ## 8. Reports Centre (new shell — no live reports yet) - [ ] `Reports Centre` in the sidebar opens a page with four categories: Financial, Receivables, Payables, Management - [ ] Each category shows report cards (e.g. Trial Balance, Profit & Loss, Aged Receivables) with a name, short description, and a "Coming soon" chip - [ ] Cards are visually disabled (dimmed, non-interactive) — this is expected; no report is wired up to real data yet ## 9. Other admin screens — style regression only (Segments, Journals, Fiscal Years, Users) These pages weren't rebuilt, but they now render on the new theme (cards instead of flat panels, rounded corners, updated table header style). Confirm nothing looks broken: - [ ] Segments & Branches — page renders, "New Segment"/"Add Value" dialogs still work - [ ] Journals — grid renders, "New Journal" dialog still works - [ ] Fiscal Years — year buttons + period grid still work, "Create Year" still works - [ ] Users & Roles — both tabs (Users / Role Permissions) still work, toggling a user's Active switch still works ## 10. General polish - [ ] Page titles, card borders, and table headers look consistent across every screen you visited (uppercase gray table headers, light card borders, no harsh drop-shadows) - [ ] No console errors in the browser dev tools on any page you visited - [ ] Resizing the browser window narrower doesn't visibly break the layout (some horizontal scroll on wide tables/grids is fine — full mobile responsiveness isn't a goal yet) --- Once everything above is ticked (or you've told me what's broken), the plan's next phase is Accounts Receivable — customers, invoices, credit notes, receipts — built directly in this visual language.