alla-vote/agent-ctx/admin-dashboard-main.md

Task: Create Admin Dashboard Component for Thai Voting System

Summary

Created the complete admin dashboard component at /home/z/my-project/src/components/admin-dashboard.tsx with 5 tabs and updated page.tsx to conditionally render it based on the auth store's currentView.

Files Created/Modified

1. Created: /home/z/my-project/src/components/admin-dashboard.tsx - Main admin dashboard component (~900 lines)
2. Modified: /home/z/my-project/src/app/page.tsx - Added conditional rendering based on auth state

Component Structure

Types & Schemas

• Defined TypeScript interfaces for Branch, Employee, Candidate, BranchStats, Stats, AppSettings
• Created Zod validation schemas: branchSchema, employeeSchema, employeeEditSchema, candidateSchema, settingsSchema

Sub-Components (all within the same file)

1. StatsTab - Fetches GET /api/admin/stats, displays:

   • 5 summary cards (employees, voters, candidates, total votes, participation rate)
   • Overall participation progress bar
   • Per-branch statistics table with progress bars

2. BranchesTab - Fetches GET /api/admin/branches, features:

   • Branches table with name, code, employee count
   • Add branch dialog with form validation (react-hook-form + zod)
   • Delete branch confirmation (AlertDialog)

3. EmployeesTab - Fetches GET /api/admin/employees, features:

   • Employees table with ID, name, branch, isAdmin badge, isActive badge
   • Search/filter input for employee lookup
   • Add employee dialog with full form (ID, name, branch select, PIN, admin toggle)
   • Edit employee dialog with pre-filled data
   • Deactivate employee confirmation (AlertDialog)
   • Badge components for status indicators (emerald for active, red for inactive, amber for admin)

4. CandidatesTab - Fetches GET /api/admin/candidates, features:

   • Candidates table with name, employee code, branch, position, approval status
   • Add candidate dialog with employee dropdown (auto-filters to non-candidates)
   • Auto-fills branch when employee is selected
   • Delete candidate confirmation with warning about vote deletion

5. SettingsTab - Fetches GET /api/admin/settings, features:

   • Form with: system name, max votes per person, voting start/end datetime, voting enabled switch, results visible switch
   • Proper datetime-local inputs for date fields
   • Save button with PUT /api/admin/settings

Design Choices

• Color scheme: Emerald/teal primary, amber accents, red for destructive (NO indigo/blue)
• Thai language: All UI text in Thai
• Responsive: Mobile-first with responsive grids, scrollable tables
• Loading states: Skeleton components for each tab
• Error handling: Toast notifications via sonner for all API operations
• Form validation: react-hook-form with zod resolvers

Lint & Compilation

• ESLint passes with no errors
• Page compiles successfully (200 status)
• Pre-existing bun:sqlite module error is unrelated to these changes