# Vozex POS UI Fixes Migration Checklist

Source project: `C:\Vozex Projects\vozex-hardware-pos`

Target projects:

- [x] `C:\Vozex Projects\vozex-bookshop-pos`
- [x] `C:\Vozex Projects\vozex-clothing-pos`
- [x] `C:\Vozex Projects\vozex-restaurant-pos`
- [x] `C:\Vozex Projects\vozex-spare-part-pos`

Use this checklist to apply the same fixes completed in the hardware POS project to the other Vozex POS projects. Do not blindly copy full files unless the target project has the same structure; port the relevant changes and keep each project's domain-specific text/routes intact.

## Source Files Changed In Hardware POS

- `apps/desktop/src/renderer/src/components/ui/input.tsx`
- `apps/desktop/src/renderer/src/components/ui/button.tsx`
- `apps/desktop/src/renderer/src/components/ui/virtual-table.tsx`
- `apps/desktop/src/renderer/src/styles/globals.css`
- `apps/desktop/src/renderer/src/features/dashboard/components/widget-section.tsx`
- `apps/desktop/src/renderer/src/features/settings/components/settings-section-pages.tsx`
- `apps/desktop/src/renderer/src/features/settings/components/settings-page.tsx`
- `apps/desktop/src/renderer/src/features/settings/components/settings-ops-pages.tsx`
- `apps/desktop/src/renderer/src/features/ai/components/ai-assistant-drawer.tsx`
- `apps/desktop/src/renderer/src/features/ai/lib/ai-assistant-settings.ts`
- `apps/desktop/src/renderer/src/app/router/app-router.tsx`
- `apps/desktop/src/renderer/src/lib/i18n.ts`
- `packages/shared/src/constants/navigation.ts`

## Global UI Fixes

- [ ] Strengthen all common field borders so inputs/selects/date fields/textareas are visible in light mode.
- [ ] Apply the same field-border treatment to shared CSS selectors in `globals.css`.
- [ ] Fix dark mode contrast across the entire system using a global dark-mode safety layer.
- [ ] Make disabled buttons readable instead of faded/white-on-white.
- [ ] Convert all destructive remove/delete row buttons from text labels to icon-only buttons with accessible `aria-label`/`title`.
- [ ] Confirm icon-only remove buttons use existing icon library, usually `Trash2` from `lucide-react`.
- [ ] Keep destructive hover/focus styling visible in light and dark themes.

## Table And Overflow Fixes

- [ ] Update `virtual-table.tsx` cell content wrappers to use `overflow-hidden` so long values cannot overlap adjacent columns.
- [ ] Fix audit/activity log tables where duplicate headers appear.
- [ ] Truncate long entity/action/details/branch values with `truncate`, `overflow-hidden`, and `title` where needed.
- [ ] Verify long JSON/details text stays inside its column.

## Dashboard Fixes

- [ ] Format customer repeat rate as a proper percent. Example: `0.666666` should display as `66.7%`.
- [ ] Add overflow protection to customer statistic tiles:
  - [ ] tile container has `min-w-0` and `overflow-hidden`
  - [ ] long values use `truncate`
  - [ ] value font size is responsive enough for compact cards
- [ ] Check dashboard customer statistics in light and dark mode.

## AI Assistant Settings

- [ ] Add `apps/desktop/src/renderer/src/features/ai/lib/ai-assistant-settings.ts`.
- [ ] Include local-storage backed settings:
  - [ ] `assistantEnabled`
  - [ ] `quickLaunchEnabled`
  - [ ] `showStarterHints`
  - [ ] `showQueryPlan`
  - [ ] `maxPreviewRows`
  - [ ] `defaultBranchScope`
- [ ] Dispatch and listen for `ai-assistant-settings-change` after saving settings.
- [ ] Update `ai-assistant-drawer.tsx` to read settings.
- [ ] Hide floating quick launch when `quickLaunchEnabled` is false.
- [ ] Disable AI question input/send when `assistantEnabled` is false.
- [ ] Show a clear disabled message that points users to `Settings > AI Assistant`.
- [ ] Hide starter hints when `showStarterHints` is false.
- [ ] Hide query plan details when `showQueryPlan` is false.
- [ ] Limit preview rows using `maxPreviewRows`.
- [ ] Respect `defaultBranchScope` when calling `posApi.askAi`.
- [ ] Add `SettingsAiPage` in `settings-ops-pages.tsx`.
- [ ] Add route `/settings/ai` in `app-router.tsx`.
- [ ] Add Settings navigation item in `packages/shared/src/constants/navigation.ts`.
- [ ] Add `nav.settings.ai` to English and Sinhala i18n blocks in `lib/i18n.ts`.
- [ ] Add AI Assistant entry in Settings overview launch cards.
- [ ] Add AI Assistant quick action button in Settings overview.
- [ ] Add AI Assistant link in General Settings operational routes.

## Per-Project Tracking

### Bookshop POS

- [x] Apply global field border and dark-mode fixes.
- [x] Convert remove/delete buttons to icon-only.
- [x] Apply disabled button visibility fix.
- [x] Apply virtual table and audit/details overflow fixes.
- [x] Apply dashboard repeat-rate/stat tile overflow fix.
- [x] Add AI Assistant settings helper, page, route, nav, i18n, and drawer behavior.
- [x] Run `npm run lint`.
- [ ] Smoke test Settings, Dashboard, dark mode, forms, and remove buttons.

### Clothing POS

- [x] Apply global field border and dark-mode fixes.
- [x] Convert remove/delete buttons to icon-only.
- [x] Apply disabled button visibility fix.
- [x] Apply virtual table and audit/details overflow fixes.
- [x] Apply dashboard repeat-rate/stat tile overflow fix.
- [x] Add AI Assistant settings helper, page, route, nav, i18n, and drawer behavior.
- [x] Run `npm run lint`.
- [ ] Smoke test Settings, Dashboard, dark mode, forms, and remove buttons.

### Restaurant POS

- [x] Apply global field border and dark-mode fixes.
- [x] Convert remove/delete buttons to icon-only.
- [x] Apply disabled button visibility fix.
- [x] Apply virtual table and audit/details overflow fixes.
- [x] Apply dashboard repeat-rate/stat tile overflow fix.
- [x] Add AI Assistant settings helper, page, route, nav, i18n, and drawer behavior.
- [x] Run `npm run lint`.
- [ ] Smoke test Settings, Dashboard, dark mode, forms, and remove buttons.

### Spare Part POS

- [x] Apply global field border and dark-mode fixes.
- [x] Convert remove/delete buttons to icon-only.
- [x] Apply disabled button visibility fix.
- [x] Apply virtual table and audit/details overflow fixes.
- [x] Apply dashboard repeat-rate/stat tile overflow fix.
- [x] Add AI Assistant settings helper, page, route, nav, i18n, and drawer behavior.
- [x] Run `npm run lint`.
- [ ] Smoke test Settings, Dashboard, dark mode, forms, and remove buttons.

## Verification Screens

- [ ] Header entry forms: field borders are clearly visible.
- [ ] Row tables: remove button is icon-only and does not wrap text.
- [ ] Dashboard dark mode: text/cards/buttons remain readable.
- [ ] Audit/activity log: details and branch columns do not overlap.
- [ ] Customer statistics: repeat rate displays like `66.7%`, not `0.666666666%`.
- [ ] Customers page: disabled/new buttons are visible when disabled.
- [ ] Settings overview: AI Assistant option is visible.
- [ ] Settings > AI Assistant: settings save/reset and drawer reacts immediately.

## Suggested Migration Order

1. Port shared UI primitives: `input.tsx`, `button.tsx`, `virtual-table.tsx`, `globals.css`.
2. Port dashboard widget fix.
3. Port Settings and AI Assistant files/routes/navigation/i18n.
4. Search target project for remove/delete buttons and convert remaining text buttons to icon-only.
5. Run `npm run lint`.
6. Start the app and smoke test the verification screens above.