PR Ready for Review: Comprehensive UI/UX Overhaul (Admin Dashboard & Picker App)

[Shalom-Karr]

Hey! I just created a pull request that implements an end-to-end modernization of the Order Picker application's user interface. This drastically improves the usability, responsiveness, and aesthetic polish for both the Admins and the Volunteers on the floor.

I'd love for you to review it. Do you have any comments, requested changes, or feedback before we merge this into production?

Here is a summary of what is included in the PR:

🎨 Global UI & UX Upgrades

• Dark Mode: Introduced a global AMOLED dark mode toggle.
• Animations: All cards, tables, and modals now feature smooth fadeIn animations to reduce layout snapping.
• Custom Modals: Completely stripped out native browser alert() and confirm() dialogs. Implemented custom HTML/CSS modals (customAlert and customConfirm) with context-aware themes (info, warning, danger).
• Form Validation: Introduced a red CSS invalid-shake animation for empty required fields.
• Custom Scrollbars & Focus Rings: Ensured standard scrolling and tab navigation look native to the app theme.

🧑‍🤝‍🧑 Admin Dashboard (/kadmin)

• Responsive Navigation: Implemented a horizontal top-bar tab navigation for desktop screens, and a properly right-aligned hamburger menu with glassmorphism blur for mobile screens.
• Table Search & Filtering:
  • Added a high-performance 250ms debounced search bar to every table.
  • The search bar dynamically highlights matching text substrings in yellow <mark> tags across all table cells in real-time.
  • Input automatically sprouts an × icon to quickly wipe the search query.
• Table Enhancements:
  • Enabled zebra striping for improved readability.
  • Table headers now stick to the top of the screen with a floating drop shadow.
  • Converted Unblock and Separate links to trash-can icons protected by confirmation modals.
• Volunteer Management & Autocomplete:
  • Restructured the UI to include an inline Quick Add form above the manage table.
  • Implemented a smart Autocomplete Dropdown for volunteer names that searches the historical master CSV database. Selecting an old volunteer instantly autofills their phone, email, and age into the registration form!
  • Added visual status badges (like a 📦 icon if they are picking their own order).
  • Integrated real-time phone number formatting as the user types (XXX) XXX-XXXX.
• Analytics Improvements: Converted raw minute metrics to human-readable strings (e.g., 1h 24m) and added visual inline CSS progress bars for Items Picked.
• Floating Action Button: Added a 'Back to Top' FAB that appears on mobile when scrolling down long lists of orders.

📱 Picker Application (Front-end)

• Pre-Pick Validation: When a volunteer attempts to start an order, the system now checks the server to ensure their ID actually exists, preventing ghost analytics.
• Check-out Blocking: Implemented logic to actively block volunteers from pulling orders if they have been Checked Out by an admin, instructing them to get checked back in.
• Registration Button: Added a highly visible "New Volunteer? Register Here" button directly to the start-index page so volunteers can instantly register themselves without leaving the app.
• Registration Feedback: Volunteer registration now replaces the modal with a persistent success state declaring their newly assigned Picker ID so they don't lose it.
• Smart UI Cleanups: Empty warning boxes have been removed via server regex to prevent blank yellow squares from rendering on the UI. Time columns now render natively as relative strings ('10 mins ago').

[Shalom-Karr]

Just a note you need to add the file volunteer-db.csv to the root of the orders folder for example "C:\Users\CENSORED\CENSORED\order-picker\orders\volunteer-db.csv"

[Shalom-Karr]

4 Column Headers
Name Phone Email Age