` tag with no fallback content. --- ## P2 — Visual Quality (affects UX but not strictly broken) ### [P2-1] Tabs overflow horizontally on mobile - **Pages:** `/orders`, `/collection-map`, `/customers` sub-nav - **Issue:** Tab strips use a single horizontal flex row that gets clipped at 375px: - **Orders mobile:** `New 2 | Processing 1 | Colle...` (Collection Pool is cut off mid-word) - **Collection-map mobile:** `Today | Tomorrow +3 days Next week` then `All Assigned Unassigned` then `All Ready Unready` — wraps onto 3 separate lines, no clear grouping or scroll affordance - **Quotes mobile:** Templates tab orphans onto its own row, breaking the row's visual grouping - **Recommendation:** Either (a) allow horizontal scroll with `overflow-x: auto` + a right-edge gradient to signal "more →", (b) wrap into 2 rows cleanly with a separator, or (c) collapse tabs behind a "More" dropdown when there are >4 items. The current behavior is "tabs get cut off with no scrollbar visible" which feels broken on a touch device. ### [P2-2] "All" button appears twice with identical styling — looks like duplicate controls - **Page:** `/collection-map` (desktop) - **Issue:** Two filter groups both have an `All` option: - Group 1 (Assigned filter): `All | Assigned | Unassigned` - Group 2 (Ready filter): `All | Ready | Unready` - Both highlight `All` in blue. The user can't tell at a glance if these are the same control, two different filters, or related/dependent. - **Recommendation:** Visually separate the two groups (e.g., vertical spacing + a small label like "Status" / "Readiness" above each), or use different visual treatment for the second `All` (e.g., outlined instead of solid) so they read as distinct filters. ### [P2-3] "Select rows to confirm." text placed awkwardly next to "Confirm this PO" button - **Page:** `/collection-confirm` (both viewports) - **Issue:** Right next to the primary green "Confirm this PO" button there's a grey text "Select rows to confirm." — but the page shows a single PO with a single item, so there's nothing to "select". The text is dead context that confuses the action. - **Recommendation:** Either remove the helper text in single-PO mode, or move it to a tooltip/description that explains the bulk-select flow when the user is on a multi-PO view. ### [P2-4] "Collection Confirm" title wraps to 2 lines on mobile, eating vertical space - **Page:** `/collection-confirm` (mobile 375) - **Issue:** The page title is "Collection Confirm" with the user badge (`david.els1`) and Refresh button on the same row. The title gets squeezed and wraps to 2 lines. Could be just "Confirm" or move the user/Refresh to a second row. - **Recommendation:** Shorten to "Confirm" on mobile, or move the right-side controls to a second row on small screens. ### [P2-5] "Invoicing" status shown twice — once as label, once as badge - **Page:** `/invoicing` (mobile 375) - **Issue:** The order item card shows "Status: Ready" as plain text **AND** a "Ready" badge right below it. Redundant — user sees the same word twice in two different visual treatments. - **Recommendation:** Drop the plain "Status:" label, keep just the badge. Or invert — drop the badge, keep the label with semantic color. ### [P2-6] "Rep" column shows only "—" for every quote - **Page:** `/quotes` (desktop table) - **Issue:** Every row in the `Rep` column is an em dash. Either (a) the field is genuinely empty for all 5 visible quotes (data issue), or (b) the column shouldn't be shown at all if it's always empty, or (c) the dash should be replaced with a more meaningful "Unassigned" / "—" with a hover explanation. - **Recommendation:** Show "Unassigned" as text, or hide the column when no rows have values, or add a small icon to indicate the field exists but is null. ### [P2-7] Companies table is 80% empty placeholders - **Page:** `/companies` (desktop) - **Issue:** Of 10 visible rows, only 2 have any data beyond the name (Mpondo Mining has address + vendor #). 8 of 10 rows show `—` for Email, Tel, and Vendor #. This is likely seed/test data, but the design is honest about it — the placeholders look like missing data, not intentional. - **Recommendation:** For demo/seed data, consider hiding empty columns or using a "Add contact info" CTA inline. Real production data will likely be more complete, but the current pattern makes the table feel broken. ### [P2-8] Pricelist catalogue shows only one supplier with all-zero prices - **Page:** `/pricelist` (desktop Catalogue tab) - **Issue:** All 10 visible rows are `Tel-Screw Products (Pty) Ltd.` with `R 0,00` for both Cost and Selling. SKU, Description, Category, Brand, Markup, Source all show `—`. This is either (a) the only supplier with data in the test DB, or (b) the AI extraction is failing for this supplier. The "1521 line items from AI-extracted price lists" headline contrasts sharply with the empty rows. - **Recommendation:** Add a small "showing 1 of N suppliers" filter chip, or fix the data ingestion so the columns actually populate. Right now the page is contradictory. --- ## P3 — Polish (low priority, design-system quality) ### [P3-1] Excessive woff2 preloads — every page logs 11 warnings - **Console warnings** (every page): ``` The resource ...woff2?... was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally. ``` - **Issue:** Next.js 16 with `next/font` is preloading ~12 font weights per route, but the actual pages only use 2-3. Wasted bandwidth + log noise. - **Recommendation:** Audit which font weights are actually used. Drop the unused ones from the preload list. This is a build-config / `next/font` config tweak, not a per-page fix. ### [P3-2] Sidebar groups "Repairs" under "OTHER" instead of "OPERATIONS" - **Page:** `/repairs` (sidebar nav) - **Issue:** Repairs is logically an operations task (it's about fixing returned items), but it's grouped under OTHER alongside settings/preferences. Same for `Delivery Notes`. Re-pair them with their semantic neighbours. - **Recommendation:** Move Repairs + Delivery Notes under OPERATIONS, leave Pricing-data tools (Pricelist) in OTHER (or create a new TOOLS group). ### [P3-3] "Supplier Map" link appears twice in sidebar - **Page:** `/suppliers` (desktop sidebar) - **Issue:** The "Supplier Map" entry appears at the very bottom of the supplier list, after the "Add Supplier" cards. It's also a top-level item visible in OTHER or the right nav. Visually it's a "leak" — looks like a footer item accidentally rendered mid-list. - **Recommendation:** Either move it to a dedicated "Tools" submenu under SUPPLIERS, or promote it to its own sidebar item. ### [P3-4] "0" appears as a standalone line in Companies mobile cards - **Page:** `/companies` (mobile 375) - **Issue:** Every company card shows a lone "0" between the name and the dates. No label, no context. The desktop table doesn't have a corresponding column visible. - **Recommendation:** Either remove the count, label it (e.g., "0 contacts", "0 POs"), or hide it when zero. ### [P3-5] "Status: Ready" + "Ready" badge duplication + "Adal Engineering" + "GIELIE" subtext pattern - **Page:** `/invoicing` (desktop + mobile) - **Issue:** Each order card shows two supplier/people labels stacked: e.g. "Adal Engineering" (icon) + "GIELIE" (icon) on the same line. "GIELIE" looks like a customer handle/shortcode, not a person. The visual treatment is identical (icon + text), so the user can't tell if these are two different entities, primary/secondary, or a duplicate. - **Recommendation:** Use a separator (·) or different icon/colour for the secondary label. Or move one to a sub-line. --- ## Cross-cutting observations ### What's working well - **Sidebar/nav structure** is consistent and accessible. Active state, hover, dark-mode toggle are all clean. - **Card pattern** is used consistently (orders, quotes, customers, sprint items). Visual rhythm is good. - **KPI tiles** on dashboard are well-composed — colour-coded accents, sparklines, deltas with up/down arrows. - **Empty states** (e.g. `/repairs`) are properly handled with icon + message + CTA. - **Theme picker** on Settings shows 6 themes with mini-window previews — nice touch. - **Quote line item modal** and **collection confirm** have well-organized action buttons (Adjust / Add Note / Attach / Confirm / Return to pool). - **Sidebar scroll isolation** works — the (app) layout correctly constrains the page to viewport height with internal scroll. - **Mobile responsive** works for most list pages (Customers, Suppliers, Quotes) — cards stack cleanly with proper padding. ### Patterns worth replicating - The `group/card` + `rounded-2xl` + `shadow-sm shadow-foreground/5 ring-1 ring-foreground/10` card treatment is consistent and looks polished. - KPI tile colour-coding (cyan/pink/orange/green) is used as an accent stripe at the top of each card — nice visual hint. - Filter pills with colour dots (`● New 2 | ● Processing 1`) double-encode the status (colour + label) for accessibility. ### Patterns to fix everywhere - The `space-y-3` on mobile card lists adds up to a lot of vertical space. For a 32-item list (sprint), 32 × 200px = 6400px tall. Consider: - Smaller cards on mobile (`py-3` instead of `py-5`) - Or a "load more" / pagination pattern - Or virtualization for very long lists ### What I did NOT test - **Tablet viewport (768px)** — user said desktop + mobile only - **Dark mode** — captured in light mode - **Form modals** (e.g. Add Customer, New Order) — only top-level routes - **Subroutes** (e.g. `/orders/[id]`, `/quotes/[id]`, `/companies/[id]`) — only top-level routes - **Interactive states** (hover, focus, error states on inputs) - **Accessibility (a11y) audit** — no screen reader / keyboard-only testing - **Performance** — only console warnings, no Lighthouse / Web Vitals ### Test methodology notes - I planted a PocketBase auth token in `localStorage` for the `test@wfdash.local` user via the admin API (impersonation). The token was overwritten during the session by a fresh `david.els1@outlook.com` auth — both are valid users, so this didn't affect the visual review. - The first sweep captured stale Next.js client-side routes (some routes appeared to render the previous page's content). I re-ran with `waitForFunction` to wait for the actual H1 of the target page before screenshotting. The final 32 screenshots are all unique and accurate. - Full-page screenshots (`fullPage: true`) were used so the report can also comment on below-the-fold content. --- ## Recommended fix order (if you tackle these) 1. **Fix the Delivery Notes 404** — P1-1, blocks a whole feature 2. **Add a name fallback for the empty supplier** — P1-2, 2 lines of code 3. **Fix mobile tab overflow** — P2-1, affects 3+ routes 4. **Dedupe "All" filter on collection-map** — P2-2, simple label/visual change 5. **Tighten the data-quality ones** (Reps column, Company contacts, Pricelist rows) — P2-6/7/8 6. **Polish pass** (P3s) — low-risk, can ship anytime