Now let me read the citizen-hub component to understand its current structure:

Now I'll create the three citizen pages and update the navigation. I'll create:

1. Community Hub (Main Dashboard) - Emergency services, evacuation info, community resources
2. Services & Events - Service availability, ongoing projects, events, booking
3. Emergency Preparedness - Best emergency routes, evacuation capacity, emergency contacts

Now I'll update the main Community Hub component to better serve as the central dashboard:

Now I'll create the page routes for the two new citizen pages:

Now I'll update the navigation to include the new citizen pages:

Perfect! I've successfully created a complete citizen experience with 3 separate pages and added them to the navbar. Here's what I built:

3 Citizen Dashboards:

1. Community Hub (Main Dashboard) - Central hub with emergency services quick access, evacuation capacity status, current alerts, LGU hotlines, service availability, ongoing projects, crime warnings, and quick action buttons
2. Services & Events Page - Service availability (clinics, consultations), ongoing projects/events with registration, ability to book local services (medical, document processing, training), and event registration with available spaces
3. Emergency Preparedness Page - Best emergency routes with distance/time estimates, evacuation shelter capacity with utilization tracking, emergency contact directory with 6 quick-call numbers, and action buttons to contact emergency services or find nearest shelter

Navigation Updates: The navbar now displays all 7 pages organized across Citizen and LGU sections with intuitive icons for quick identification. The mobile menu is scrollable for better UX on smaller devices.

Let me check the navigation component and read a couple of the LGU dashboards to understand what insights should go into the main dashboard:

Now I'll create the LGU Main Dashboard and implement light/dark mode toggle. Let me first update the globals.css to include light mode theme variables, then create the theme toggle, main dashboard, and update the navigation.

I've successfully implemented a complete light/dark mode system and created a comprehensive LGU Main Dashboard. Here's what was added:

Theme System:

• Updated globals.css with light mode color variables while maintaining dark mode
• Theme detection based on localStorage or system preference
• Smooth theme switching with proper CSS variable updates

ThemeToggle Component:

• Sun/Moon icon button that toggles between light and dark modes
• Persists user preference to localStorage
• Respects system color scheme preference on first visit

LGU Main Dashboard:

• Key metrics cards showing critical alerts, active incidents, evacuees sheltered, and shelter capacity
• Urgent alerts section displaying 3 critical situations requiring attention
• Alert status trend chart showing historical data
• Response status indicators with progress bars
• Quick access navigation to other dashboards

Navigation Updates:

• Added LGU Dashboard as the main entry point (first in navbar)
• Integrated theme toggle button in the navbar
• All pages now support light/dark mode with proper text and color updates

The entire application now supports seamless light/dark mode switching with colors and text adapting automatically across all pages.