59 lines
2.9 KiB
Markdown
59 lines
2.9 KiB
Markdown
# 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
|