# alicerestituta/metamon architecture

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

- Interactive diagram: https://gitdiagram.com/alicerestituta/metamon
- Repository: https://github.com/alicerestituta/metamon

## Overview

Metamon is a Nuxt/Vue interface for landfill methane and environmental-safety monitoring. The main operator workflow is to review dashboard telemetry and sector conditions, inspect sensor readings or methane trends, then open emergency procedures or manage truck rerouting. Separate views cover the sensor log, SOP checklist, and officer profile. The sampled components use local reactive state and hard-coded example data; no telemetry service, persistence layer, or external operational integration is evidenced. Some component wiring is omitted in the excerpts, so only visible composition and documented UI roles are mapped.

Main entry points: [`app/app.vue`](https://github.com/alicerestituta/metamon/blob/main/app/app.vue) (View shell), [`app/components/MethaneChart.vue`](https://github.com/alicerestituta/metamon/blob/main/app/components/MethaneChart.vue) (Methane trends), [`app/components/SensorLogPage.vue`](https://github.com/alicerestituta/metamon/blob/main/app/components/SensorLogPage.vue) (Sensor readings), [`app/components/SopProtocolPage.vue`](https://github.com/alicerestituta/metamon/blob/main/app/components/SopProtocolPage.vue) (Emergency checklist)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["Application shell"]
  node_app["View shell<br/>[app.vue]"]
  node_header["App header<br/>[AppHeader.vue]"]
  node_sidebar["Navigation drawer<br/>[SidebarMenu.vue]"]
end

subgraph group_monitoring["Monitoring dashboard"]
  node_quick["Status summary<br/>[QuickInfo.vue]"]
  node_telemetry["Telemetry cards"]
  node_map["Spatial heatmap<br/>[SpatialMap.vue]"]
  node_sectors["Sector status<br/>[SectorStatus.vue]"]
  node_chart["Methane trends<br/>[MethaneChart.vue]"]
  node_sensorpage["Sensor readings<br/>[SensorLogPage.vue]"]
  node_sensorlog["Sensor log modal<br/>[SensorLogModal.vue]"]
end

subgraph group_response["Operational response"]
  node_sop["Emergency checklist"]
  node_safety["Safety procedures"]
  node_reroute["Truck rerouting<br/>[ReroutePage.vue]"]
end

subgraph group_operator["Operator tools"]
  node_profile["Officer profile<br/>[ProfilePage.vue]"]
end

node_operator(("TPA operator"))

node_operator -->|"uses"| node_app
node_app -->|"renders"| node_header
node_app -->|"renders"| node_quick
node_app -->|"renders"| node_telemetry
node_app -->|"renders"| node_map
node_app -->|"renders"| node_sectors
node_app -->|"renders"| node_chart
node_app -->|"renders"| node_sensorpage
node_app -->|"renders"| node_sop
node_app -->|"renders"| node_reroute
node_app -->|"renders"| node_profile
node_app -->|"opens"| node_sidebar
node_chart -->|"opens logs"| node_sensorpage
node_chart -->|"opens protocol"| node_sop

click node_app "https://github.com/alicerestituta/metamon/blob/main/app/app.vue"
click node_header "https://github.com/alicerestituta/metamon/blob/main/app/components/AppHeader.vue"
click node_sidebar "https://github.com/alicerestituta/metamon/blob/main/app/components/SidebarMenu.vue"
click node_quick "https://github.com/alicerestituta/metamon/blob/main/app/components/QuickInfo.vue"
click node_telemetry "https://github.com/alicerestituta/metamon/blob/main/app/components/TelemetrySection.vue"
click node_map "https://github.com/alicerestituta/metamon/blob/main/app/components/SpatialMap.vue"
click node_sectors "https://github.com/alicerestituta/metamon/blob/main/app/components/SectorStatus.vue"
click node_chart "https://github.com/alicerestituta/metamon/blob/main/app/components/MethaneChart.vue"
click node_sensorpage "https://github.com/alicerestituta/metamon/blob/main/app/components/SensorLogPage.vue"
click node_sensorlog "https://github.com/alicerestituta/metamon/blob/main/app/components/SensorLogModal.vue"
click node_sop "https://github.com/alicerestituta/metamon/blob/main/app/components/SopProtocolPage.vue"
click node_safety "https://github.com/alicerestituta/metamon/blob/main/app/components/SafetyProtocolModal.vue"
click node_reroute "https://github.com/alicerestituta/metamon/blob/main/app/components/ReroutePage.vue"
click node_profile "https://github.com/alicerestituta/metamon/blob/main/app/components/ProfilePage.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_app,node_header,node_sidebar toneBlue
class node_quick,node_telemetry,node_map,node_sectors,node_chart,node_sensorpage,node_sensorlog toneAmber
class node_sop,node_safety,node_reroute toneMint
class node_profile toneRose
class node_operator toneIndigo
```

## Components

### Application shell

- [View shell](https://github.com/alicerestituta/metamon/blob/main/app/app.vue): `app/app.vue`
- [App header](https://github.com/alicerestituta/metamon/blob/main/app/components/AppHeader.vue): `app/components/AppHeader.vue`
- [Navigation drawer](https://github.com/alicerestituta/metamon/blob/main/app/components/SidebarMenu.vue): `app/components/SidebarMenu.vue`

### Monitoring dashboard

- [Status summary](https://github.com/alicerestituta/metamon/blob/main/app/components/QuickInfo.vue): `app/components/QuickInfo.vue`
- [Telemetry cards](https://github.com/alicerestituta/metamon/blob/main/app/components/TelemetrySection.vue): `app/components/TelemetrySection.vue`
- [Spatial heatmap](https://github.com/alicerestituta/metamon/blob/main/app/components/SpatialMap.vue): `app/components/SpatialMap.vue`
- [Sector status](https://github.com/alicerestituta/metamon/blob/main/app/components/SectorStatus.vue): `app/components/SectorStatus.vue`
- [Methane trends](https://github.com/alicerestituta/metamon/blob/main/app/components/MethaneChart.vue): `app/components/MethaneChart.vue`
- [Sensor readings](https://github.com/alicerestituta/metamon/blob/main/app/components/SensorLogPage.vue): `app/components/SensorLogPage.vue`
- [Sensor log modal](https://github.com/alicerestituta/metamon/blob/main/app/components/SensorLogModal.vue): `app/components/SensorLogModal.vue`

### Operational response

- [Emergency checklist](https://github.com/alicerestituta/metamon/blob/main/app/components/SopProtocolPage.vue): `app/components/SopProtocolPage.vue`
- [Safety procedures](https://github.com/alicerestituta/metamon/blob/main/app/components/SafetyProtocolModal.vue): `app/components/SafetyProtocolModal.vue`
- [Truck rerouting](https://github.com/alicerestituta/metamon/blob/main/app/components/ReroutePage.vue): `app/components/ReroutePage.vue`

### Operator tools

- [Officer profile](https://github.com/alicerestituta/metamon/blob/main/app/components/ProfilePage.vue): `app/components/ProfilePage.vue`

### Other components

- **TPA operator**

## Connections

- TPA operator → View shell: uses
- View shell → App header: renders
- View shell → Status summary: renders
- View shell → Telemetry cards: renders
- View shell → Spatial heatmap: renders
- View shell → Sector status: renders
- View shell → Methane trends: renders
- View shell → Sensor readings: renders
- View shell → Emergency checklist: renders
- View shell → Truck rerouting: renders
- View shell → Officer profile: renders
- View shell → Navigation drawer: opens
- Methane trends → Sensor readings: opens logs
- Methane trends → Emergency checklist: opens protocol