# 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