- Set up class-based dark mode in Tailwind config
- Add pre-hydration dark mode application to avoid theme flash on initial load
- Implement accessible dark mode toggle in settings page
- Update all UI surfaces (headers, bottom nav, maps) with dark mode color schemes
- Add comprehensive global CSS overrides for arbitrary Tailwind classes
- Add brand accent strips to header and bottom nav for consistent visual framing
- Refine map waypoint styling: reduce dot size, update label positioning and styling
- Add standardized item display helpers for consistent labeling across components
- Rework PocketBase data fetching into scoped assigned/pool/problem item queries
- Add proximity-based clustering and AreaGroup component for geographic list grouping
- Sync map page tab state with main collections list using localStorage
- Update all existing components to use new data and display patterns
- Add custom map marker, tooltip, and cluster styling
- rename `supplier` field to `suppliers` in OrderItem interface and PocketBase expand queries
- complete visual rebrand to warm cream (#f2f1ed) and dark brown (#26251e) color palette with custom CSS variables
- add accessibility improvements: skip-to-main content link, focus-visible styles, reduced motion support, and proper ARIA labels
- update all component styling to match new theme, including offline indicator, install prompt, login page, modals, map, bottom nav and global CSS
- standardize status colors: use green for success, red for errors, retain orange (#f54e00) as primary accent CTAs
Add captured Playwright/MCP test artifacts and environment configuration: new .claude/settings.json (grants Playwright plugin, network and WebFetch permissions), multiple .playwright-mcp console logs and page YAMLs, api-response.json, and screenshot-settings.png. Also apply a minor change to app/page.tsx. These files store debugging/test output and test-run configuration to help reproduce and investigate UI/test issues.
Import global Leaflet CSS in the app layout, create a MapErrorBoundary in the map page to catch map load failures and show a retry UI, and wrap the dynamic CollectionMap with that boundary. Adjust CollectionMap by removing the local Leaflet CSS import, cleaning up unused imports/types, and changing the container to absolute/full-bleed styling so the map fills its parent. These changes improve robustness against map loading errors and ensure Leaflet styles are applied app-wide.
Introduce a new SupplierGroup component and group collections by supplier. Add supplier color palette, per-supplier expand/collapse state, compact/detailed view modes, and controls to toggle/expand/collapse groups. Pass supplierColor and compact props to CollectionItemCard to adjust visuals, use useMemo for grouping, and auto-expand suppliers on initial load. Minor UI tweaks: adjust skeleton count/spacing, update stats/controls bar, improve toast styling, and remove some console logs.
Add full PWA support (icons, manifest, service worker, pwa lib and bridge) and introduce install/offline UI. Generate app icons via a new scripts/generate-icons.js and include multiple icon sizes in public/icons; update manifest and layout head meta/preconnect. Revamp global styles (globals.css) with new utilities, animations, spacing for bottom nav, card shadows, skeletons and accessibility tweaks. Polish major screens (login, collections, map, settings) with improved headers, loading states, touch/press feedback, and layout adjustments; add new components (InstallPrompt, OfflineIndicator, PWABridge) and update various components to match new visual/UX patterns. Update Dockerfile to generate icons and use Next.js static export output (/out) for nginx, and bump package setup to support icon generation.
Render a driver's location trail on the map and add controls to toggle it. Changes include: component imports (Polyline, Route), new trail state and interval ref, fetchTrail logic (uses isAuthenticated/getCurrentUser/getDriverTrail) with periodic refresh (every minute), FitTrail component to fit map to the trail, Polyline and start marker rendering, and a Trail toggle button in the UI. Also cleaned up MapBounds (explicit return null), small popup/legend adjustments, and grouped supplier processing remains unchanged. Added getDriverTrail helper in lib/pocketbase.ts to fetch today's driver_locations for a given driver id.
Convert the app from using legacy Collection models to OrderItem-based data. Updated pages (app/page and app/map/page) and all related components (CollectionMap, CollectionItemCard, CollectModal, ProblemModal, LocationTracker) to use OrderItem and new field names (supplier, order, item_status, qty_collected/collected_date, problem_flag/notes, etc.). PocketBase client now queries/updates the order_items collection and maps status/field changes accordingly. Simplified location tracking logic and cleaned up map/navigation UI and Suspense fallbacks. Added import_suppliers.py script for migrating suppliers from NocoDB and included .DS_Store artifacts.
Static export (output: 'export') doesn't support server-side features
like API routes or server-side rendering. For Coolify deployment,
we need Next.js to run as a server.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
- Added package.json with dependencies for Next.js, React, and Tailwind CSS.
- Created postcss.config.js for Tailwind CSS and autoprefixer integration.
- Added SVG icon for the application in public/icons/icon.svg.
- Created manifest.json for PWA support with app details and icon.
- Configured Tailwind CSS in tailwind.config.js with custom colors and animations.
- Set up TypeScript configuration in tsconfig.json for strict type checking and module resolution.
