How mark-ange/finals works
CityCare Admin is a Vue-based civic-operations interface for administrators. The main workflow is opening the admin app, navigating to an operational view, and reviewing or managing incidents, fleet, and barangay information; the dashboard also presents summary indicators, a heatmap-style panel, and a live-queue display. Reports and account/system settings are separate capabilities. The sampled implementation shows view-local UI state and hard-coded dashboard/queue content, not a backend or persistent store, so no data-service layer is inferred.
Main entry points: index.js Route map · Dashboard.vue Executive dashboard · main.js Vue bootstrap · App.vue App view host
Components 16
App navigation
- Vue bootstrap
src/main.js - App view host
src/App.vue - Route map
src/router/index.js - Admin login
src/views/AdminLogin.vue - Admin navigation
src/components/AdminSidebar.vue - Dashboard header
src/components/AdminHeader.vue
Operations management
- Incident management
src/views/Tickets.vue - Fleet management
src/views/Fleet.vue - Barangay management
src/views/Barangays.vue
Operational oversight
- Executive dashboard
src/views/Dashboard.vue - Summary cards
src/components/StatCard.vue - Incident heatmap
src/components/HeatmapPanel.vue - Live queue panel
src/components/LiveQueue.vue - Reports
src/views/Reports.vue
Admin preferences
- Settings
src/views/Settings.vue
Other components
- Administrator
Connections 16
- Administrator → Vue bootstrap: opens app
- Vue bootstrap → App view host: mounts
src/main.js - Vue bootstrap → Route map: installs
src/main.js - App view host → Route map: renders routes
src/App.vue - Route map → Admin login: routes to
src/router/index.js - Route map → Executive dashboard: routes to
src/router/index.js - Route map → Incident management: routes to
src/router/index.js - Route map → Fleet management: routes to
src/router/index.js - Route map → Barangay management: routes to
src/router/index.js - Route map → Reports: routes to
src/router/index.js - Route map → Settings: routes to
src/router/index.js - Executive dashboard → Admin navigation: renders
src/views/Dashboard.vue - Executive dashboard → Dashboard header: renders
src/views/Dashboard.vue - Executive dashboard → Summary cards: renders
src/views/Dashboard.vue - Executive dashboard → Incident heatmap: renders
src/views/Dashboard.vue - Executive dashboard → Live queue panel: renders
src/views/Dashboard.vue