feat: styling polish, command palette, breadcrumbs, activity feed, export, sort, clipboard

- 40+ styling fixes across all 11 pages (consistent padding, titles, empty states, date formatting) - Command Palette (Ctrl+K) with 11 nav items + 3 actions - Breadcrumbs with hash-based path detection and mobile truncation - Activity Feed component with 11 color-coded action icons and 30s auto-refresh - ExportButton (CSV) on Purchases, Audit, Users pages - SortableHeader with 3-state toggle on Purchases and Audit pages - copyToClipboard utility with navigator.clipboard + fallback - Notification badge on Purchases sidebar item (pending count) - Connection status indicator in sidebar footer - Removed dynamic imports from page.tsx (reduces memory) - Disabled Prisma query logging (reduces memory) - All components verified: named exports, @/ prefix, hash navigation, sonner toasts
2026-08-05 13:40:32 +00:00
parent b4387edc8b
commit 482e8cf444
29 changed files with 7098 additions and 209 deletions
--- a/worklog.md
+++ b/worklog.md
@@ -167,3 +167,141 @@ Stage Summary:
 - Add real photo upload support (multipart/form-data)
 - Add WebSocket for live dashboard updates
 - Add pagination to all list pages
+
+---
+Task ID: QA-fix
+Agent: QA Fixer
+Task: Comprehensive QA review and styling consistency fixes across all page components
+
+Work Log:
+- Surveyed all 11 page components and login page for 6 critical issues
+- **Critical issues (1-6) audit results:**
+  - No `router.push()` calls found — all navigation already uses `window.location.hash`
+  - No `useRouter` imports from next/navigation in any page component
+  - No missing `@/` prefix on imports — all imports use `@/` alias
+  - All page components use named exports (e.g. `export function DashboardPage()`) — no `export default`
+  - `useAuthStore` for role checking already present in `wallets-page.tsx` and `seed-page.tsx`
+  - All pages use `import { toast } from "sonner"` — no `use-toast` imports
+
+- **Styling fixes applied to all 11 page components:**
+  - **Padding**: Added `p-4 md:p-6` to all page wrappers (was `p-6` or missing)
+  - **Page titles**: Added/changed `<h2 className="text-xl font-semibold">` to all pages (was `h1 text-2xl font-bold` or missing)
+  - **Table max-h**: Changed `max-h-[calc(100vh-14rem)]` → `max-h-[calc(100vh-12rem)]` in 6 files (purchases, audit, categories, locations, locales, catalog)
+  - **Empty states**: Added centered icons (lucide-react) to empty states in: users, purchases, audit, categories, locations, locales
+  - **date-fns**: Replaced `toLocaleDateString()` with `format()` from `date-fns` in dashboard, user-detail, purchases, audit pages
+  - **KPI grid**: Updated dashboard from `grid-cols-2 sm:grid-cols-3 lg:grid-cols-5` → `grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5`
+  - **Separators**: Added `<Separator />` between major sections in dashboard, user-detail, settings, seed pages
+  - **Settings**: Added `<Separator />` between section groups (Bot/WireGuard/Admin)
+
+- **Specific page fixes:**
+  - Dashboard: Added `date-fns` import, `Separator` import, fixed date formatting, added md breakpoint to KPI grid
+  - Users: Added `Users` icon import, empty state with icon, title and padding fixes
+  - User Detail: Added `date-fns` and `Separator` imports, fixed date formatting, title change, added separator before purchases table
+  - Wallets: Added padding and title fix
+  - Purchases: Added `ShoppingCart` icon import, padding, title, empty state icon, date format fix
+  - Audit: Added `FileText` icon import, padding, title, empty state icon, date format fix
+  - Categories: Added `FolderOpen` icon import, padding, title, empty state icon
+  - Locations: Added `MapPin` icon import, padding, title, empty state icon
+  - Settings: Added `Separator` import, padding, title, separators between section groups
+  - Locales: Added `Languages` icon import, padding, title, empty state icon
+  - Seed: Added `Separator` import, padding, title, separator after header
+  - Catalog: Fixed tree panel max-h from 14rem to 12rem
+
+Stage Summary:
+- All 6 critical issues were already correctly implemented by previous agents
+- 40+ styling fixes applied for UI consistency
+- ESLint: 0 errors, 0 warnings (verified)
+
+---
+Task ID: new-features-1
+Agent: Main Coordinator
+Task: Add Command Palette, Notification Badge, Breadcrumbs, and Status Indicator
+
+Work Log:
+- **FEATURE 1 — Command Palette (Ctrl+K)**
+  - Created `src/components/layout/command-palette.tsx` with `CommandPalette` component and `openCommandPalette` helper
+  - Uses shadcn `CommandDialog`, `CommandInput`, `CommandList`, `CommandGroup`, `CommandItem`, `CommandSeparator`, `CommandEmpty`
+  - Ctrl+K / Cmd+K keyboard shortcut toggles open state (useEffect + keydown listener)
+  - Custom DOM event (`command-palette:toggle`) allows external trigger from header search button
+  - Navigation group: all 11 pages with lucide-react icons
+  - Actions group: Seed Demo Data, Clear Data, Logout (with destructive styling)
+  - Escape key and click-outside close handled by CommandDialog
+  - Integrated into AdminHeader with Search icon button
+
+- **FEATURE 2 — Notification Badge on Purchases**
+  - Added `usePendingCount` custom hook in `admin-sidebar.tsx`
+  - Fetches `/api/purchases/bulk?status=pending&limit=1` on mount and window focus
+  - Shows red `SidebarMenuBadge` with count on Purchases menu item when > 0
+  - Badge hidden when sidebar is collapsed to icon mode (handled by SidebarMenuBadge)
+
+- **FEATURE 3 — Breadcrumbs**
+  - Created `src/components/layout/breadcrumbs.tsx` with `AppBreadcrumbs` component
+  - Reads `window.location.hash` and parses into crumb trail
+  - Shows: Home > Section > Sub-page (e.g. Home > Users > alice for /users/123)
+  - Responsive: desktop shows all crumbs, mobile shows ellipsis + last 2 items
+  - Integrated into AdminHeader between separator and title
+
+- **FEATURE 4 — Status Indicator in Sidebar Footer**
+  - Added `useConnectionStatus` custom hook calling `checkSession()` on mount and window focus
+  - Green dot = connected (session valid), gray dot = disconnected
+  - Text label hidden when sidebar collapsed to icon mode
+
+Stage Summary:
+- 4 features implemented across 3 files (1 new, 2 modified)
+- ESLint: 0 errors, 0 warnings (verified)
+
+---
+Task ID: new-features-2
+Agent: Main Coordinator
+Task: Activity Feed, Export Button, Sortable Header, Clipboard Utility, Integration
+
+Work Log:
+- **FEATURE 5 — Global Activity Feed**
+  - Created `src/components/layout/activity-feed.tsx` with `ActivityFeed` component
+  - Fetches `/api/audit/bulk?limit=15` on mount with 30-second auto-refresh
+  - Action icon mapping: login=LogIn(blue), balance_adjust=DollarSign(orange), status_toggle=UserX(red), seed_phrase_viewed=KeyRound(purple), product_created=Package(green), settings_changed=Settings(green), purchase_approved=CheckCircle(green), wallet_added=Wallet(cyan), commission_paid=CreditCard(amber), user_registered=UserPlus(teal), default=FileText(gray)
+  - Relative timestamps (e.g. "2m ago", "1h ago", "3d ago")
+  - `max-h-48 overflow-y-auto` with compact items and subtle borders
+  - "No recent activity" empty state with loading skeleton
+  - Integrated into Dashboard: replaced inline activity feed, placed full-width below wallet summary
+  - Cleaned up dashboard: removed unused `Activity` interface, `formatDate` helper, `FileText` import, `date-fns` import
+
+- **FEATURE 6 — Export Button**
+  - Created `src/components/shared/export-button.tsx` with `ExportButton` component
+  - Props: `data: Record<string, unknown>[]`, `filename: string`, `label?: string`
+  - Uses shadcn DropdownMenu with CSV format option
+  - Converts data to CSV with proper escaping (quotes, commas, newlines)
+  - Creates Blob and triggers download via dynamically-created anchor element
+  - Toast on success: "Exported X rows", toast.info on empty data
+
+- **FEATURE 7 — Sortable Header**
+  - Created `src/components/shared/sortable-header.tsx` with `SortableHeader` component
+  - Props: column, label, sortColumn, sortDirection ("asc"|"desc"|null), onSort
+  - Three-state toggle: unsorted→asc→desc→unsorted
+  - Icons: ArrowUpDown (unsorted), ArrowUp (asc), ArrowDown (desc)
+  - Active column gets text-primary, others text-muted-foreground
+
+- **FEATURE 8 — Clipboard Utility**
+  - Created `src/lib/clipboard.ts` with async `copyToClipboard(text: string): Promise<boolean>`
+  - Primary: `navigator.clipboard.writeText`
+  - Fallback: hidden textarea + `document.execCommand("copy")`
+  - Returns boolean success indicator
+
+- **INTEGRATION — Purchases Page**
+  - Added ExportButton (top-right, exports visible/sorted rows as CSV)
+  - Added SortableHeader on Date, Total Price, Status columns
+  - Client-side sorting with useMemo
+  - Replaced `navigator.clipboard.writeText` with `copyToClipboard` utility for TX hash copy
+
+- **INTEGRATION — Audit Page**
+  - Added ExportButton (top-right, exports visible/sorted rows as CSV)
+  - Added SortableHeader on Action, Date columns
+  - Client-side sorting with useMemo
+
+- **INTEGRATION — Users Page**
+  - Added ExportButton next to search input
+  - Exports visible rows with friendly column names and status labels
+
+Stage Summary:
+- 4 new files created, 4 existing files modified
+- ESLint: 0 errors, 0 warnings (verified)