# mark-ange/finals architecture

> Architecture diagram of the GitHub repository mark-ange/finals, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-30). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/mark-ange/finals
- Repository: https://github.com/mark-ange/finals

## Overview

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: [`src/router/index.js`](https://github.com/mark-ange/finals/blob/main/src/router/index.js) (Route map), [`src/views/Dashboard.vue`](https://github.com/mark-ange/finals/blob/main/src/views/Dashboard.vue) (Executive dashboard), [`src/main.js`](https://github.com/mark-ange/finals/blob/main/src/main.js) (Vue bootstrap), [`src/App.vue`](https://github.com/mark-ange/finals/blob/main/src/App.vue) (App view host)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App navigation"]
  node_bootstrap["Vue bootstrap<br/>[main.js]"]
  node_appview["App view host<br/>[App.vue]"]
  node_router["Route map<br/>[index.js]"]
  node_login["Admin login<br/>[AdminLogin.vue]"]
  node_sidebar["Admin navigation<br/>[AdminSidebar.vue]"]
  node_header["Dashboard header<br/>[AdminHeader.vue]"]
end

subgraph group_operations["Operations management"]
  node_tickets["Incident management<br/>[Tickets.vue]"]
  node_fleet["Fleet management<br/>[Fleet.vue]"]
  node_barangays["Barangay management<br/>[Barangays.vue]"]
end

subgraph group_oversight["Operational oversight"]
  node_dashboard["Executive dashboard<br/>[Dashboard.vue]"]
  node_statcard["Summary cards<br/>[StatCard.vue]"]
  node_heatmap["Incident heatmap<br/>[HeatmapPanel.vue]"]
  node_queue["Live queue panel<br/>[LiveQueue.vue]"]
  node_reports["Reports<br/>[Reports.vue]"]
end

subgraph group_admin["Admin preferences"]
  node_settings["Settings<br/>[Settings.vue]"]
end

node_administrator(("Administrator"))

node_administrator -->|"opens app"| node_bootstrap
node_bootstrap -->|"mounts"| node_appview
node_bootstrap -->|"installs"| node_router
node_appview -->|"renders routes"| node_router
node_router -->|"routes to"| node_login
node_router -->|"routes to"| node_dashboard
node_router -->|"routes to"| node_tickets
node_router -->|"routes to"| node_fleet
node_router -->|"routes to"| node_barangays
node_router -->|"routes to"| node_reports
node_router -->|"routes to"| node_settings
node_dashboard -->|"renders"| node_sidebar
node_dashboard -->|"renders"| node_header
node_dashboard -->|"renders"| node_statcard
node_dashboard -->|"renders"| node_heatmap
node_dashboard -->|"renders"| node_queue

click node_bootstrap "https://github.com/mark-ange/finals/blob/main/src/main.js"
click node_appview "https://github.com/mark-ange/finals/blob/main/src/App.vue"
click node_router "https://github.com/mark-ange/finals/blob/main/src/router/index.js"
click node_login "https://github.com/mark-ange/finals/blob/main/src/views/AdminLogin.vue"
click node_sidebar "https://github.com/mark-ange/finals/blob/main/src/components/AdminSidebar.vue"
click node_header "https://github.com/mark-ange/finals/blob/main/src/components/AdminHeader.vue"
click node_dashboard "https://github.com/mark-ange/finals/blob/main/src/views/Dashboard.vue"
click node_statcard "https://github.com/mark-ange/finals/blob/main/src/components/StatCard.vue"
click node_heatmap "https://github.com/mark-ange/finals/blob/main/src/components/HeatmapPanel.vue"
click node_queue "https://github.com/mark-ange/finals/blob/main/src/components/LiveQueue.vue"
click node_tickets "https://github.com/mark-ange/finals/blob/main/src/views/Tickets.vue"
click node_fleet "https://github.com/mark-ange/finals/blob/main/src/views/Fleet.vue"
click node_barangays "https://github.com/mark-ange/finals/blob/main/src/views/Barangays.vue"
click node_reports "https://github.com/mark-ange/finals/blob/main/src/views/Reports.vue"
click node_settings "https://github.com/mark-ange/finals/blob/main/src/views/Settings.vue"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_bootstrap,node_appview,node_router,node_login,node_sidebar,node_header toneBlue
class node_tickets,node_fleet,node_barangays toneAmber
class node_dashboard,node_statcard,node_heatmap,node_queue,node_reports toneMint
class node_settings toneRose
class node_administrator toneIndigo
```

## Components

### App navigation

- [Vue bootstrap](https://github.com/mark-ange/finals/blob/main/src/main.js): `src/main.js`
- [App view host](https://github.com/mark-ange/finals/blob/main/src/App.vue): `src/App.vue`
- [Route map](https://github.com/mark-ange/finals/blob/main/src/router/index.js): `src/router/index.js`
- [Admin login](https://github.com/mark-ange/finals/blob/main/src/views/AdminLogin.vue): `src/views/AdminLogin.vue`
- [Admin navigation](https://github.com/mark-ange/finals/blob/main/src/components/AdminSidebar.vue): `src/components/AdminSidebar.vue`
- [Dashboard header](https://github.com/mark-ange/finals/blob/main/src/components/AdminHeader.vue): `src/components/AdminHeader.vue`

### Operations management

- [Incident management](https://github.com/mark-ange/finals/blob/main/src/views/Tickets.vue): `src/views/Tickets.vue`
- [Fleet management](https://github.com/mark-ange/finals/blob/main/src/views/Fleet.vue): `src/views/Fleet.vue`
- [Barangay management](https://github.com/mark-ange/finals/blob/main/src/views/Barangays.vue): `src/views/Barangays.vue`

### Operational oversight

- [Executive dashboard](https://github.com/mark-ange/finals/blob/main/src/views/Dashboard.vue): `src/views/Dashboard.vue`
- [Summary cards](https://github.com/mark-ange/finals/blob/main/src/components/StatCard.vue): `src/components/StatCard.vue`
- [Incident heatmap](https://github.com/mark-ange/finals/blob/main/src/components/HeatmapPanel.vue): `src/components/HeatmapPanel.vue`
- [Live queue panel](https://github.com/mark-ange/finals/blob/main/src/components/LiveQueue.vue): `src/components/LiveQueue.vue`
- [Reports](https://github.com/mark-ange/finals/blob/main/src/views/Reports.vue): `src/views/Reports.vue`

### Admin preferences

- [Settings](https://github.com/mark-ange/finals/blob/main/src/views/Settings.vue): `src/views/Settings.vue`

### Other components

- **Administrator**

## Connections

- Administrator → Vue bootstrap: opens app
- Vue bootstrap → App view host: mounts (evidence: `src/main.js`)
- Vue bootstrap → Route map: installs (evidence: `src/main.js`)
- App view host → Route map: renders routes (evidence: `src/App.vue`)
- Route map → Admin login: routes to (evidence: `src/router/index.js`)
- Route map → Executive dashboard: routes to (evidence: `src/router/index.js`)
- Route map → Incident management: routes to (evidence: `src/router/index.js`)
- Route map → Fleet management: routes to (evidence: `src/router/index.js`)
- Route map → Barangay management: routes to (evidence: `src/router/index.js`)
- Route map → Reports: routes to (evidence: `src/router/index.js`)
- Route map → Settings: routes to (evidence: `src/router/index.js`)
- Executive dashboard → Admin navigation: renders (evidence: `src/views/Dashboard.vue`)
- Executive dashboard → Dashboard header: renders (evidence: `src/views/Dashboard.vue`)
- Executive dashboard → Summary cards: renders (evidence: `src/views/Dashboard.vue`)
- Executive dashboard → Incident heatmap: renders (evidence: `src/views/Dashboard.vue`)
- Executive dashboard → Live queue panel: renders (evidence: `src/views/Dashboard.vue`)