Major UI Overhaul:
✨ Modern card design with gradients
✨ Hover effects: lift up + shadow
✨ Inline layout: grip icon + title + badge
✨ No wasted vertical space
✨ Larger price display (text-4xl)
✨ Gradient price section with border
✨ 2-column stats grid with cards
✨ Animated pulse dot for active status
✨ Full-width visibility button + icon actions
✨ Indonesian text throughout
Layout Changes:
- Grip icon inline with title (left side)
- Badge inline with title text
- Trial badge inline with duration
- Stats in grid layout
- Action buttons with hover fills
Design Elements:
- rounded-2xl cards
- Gradient backgrounds
- Border color changes on hover
- Smooth transitions (300ms)
- Better spacing and typography
- Consistent card heights
ISSUE: Tailwind v4 doesn't handle dark: variants the same way as v3
The dark: prefix wasn't working properly in light mode
SOLUTION: Replace all dark: variants with theme-aware colors
Admin Pages:
- AdminPlans: badges use bg-primary/20, bg-green-500/20, etc.
- AdminUsers: role/status badges use opacity-based colors
- AdminDashboard: stat cards use /20 opacity backgrounds
Member Pages:
- Overview: chart tooltips use text-foreground
Benefits:
✅ Works correctly in both light and dark mode
✅ Colors automatically adapt via CSS variables
✅ No more hardcoded dark: classes
✅ Consistent opacity-based approach
Technical:
- Tailwind v4 uses @theme and CSS variables
- dark: variants need proper configuration
- Using /20 opacity on colors works universally
AdminDashboard:
- Replace all gray colors with theme variables
- Indonesian text: 'Selamat datang', 'Kelola Plans', etc.
- Loading: 'Memuat...'
AdminPlans:
- bg-card, text-foreground, border-border
- text-muted-foreground for secondary text
- bg-muted for sections
- text-primary for links/icons
- text-destructive for delete
- Indonesian: 'Kelola Plans', 'Tambah Plan', 'Tidak ada plan'
AdminUsers:
- Same theme color replacements
- Indonesian: 'Kelola Users', 'Tidak ada user'
- bg-primary for avatars
- Consistent hover states
All pages now:
✅ Respect light/dark mode
✅ Use @theme colors from index.css
✅ Indonesian text (keeping English tech terms)
✅ Consistent with member layout styling
- Add role field to User interface in AuthContext
- Create AdminLayout with responsive sidebar navigation
- Create AdminDashboard with stats cards
- Add admin routes to App.tsx
- Admin panel accessible at /admin
- Shows stats: total users, active subscriptions, pending payments
- Access control: only users with role=admin can access
- Remove OtpGateGuard from transactions controller (OTP verified at login)
- Fix categories controller to use authenticated user instead of TEMP_USER_ID
- Add comprehensive implementation plan document
- Update .env.example with WEB_APP_URL
- Prepare for admin dashboard development
