# jomar2025/reporteu architecture

> Architecture diagram of the GitHub repository jomar2025/reporteu, 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/jomar2025/reporteu
- Repository: https://github.com/jomar2025/reporteu

## Overview

Reporta Barranquilla is a citizen-reporting application with separate citizen and responsible-entity experiences. Citizens register or sign in, submit a categorized report with location, description, evidence and identified/anonymous mode, then track its status. Entities sign in to review assigned reports and update status; citizens can view report details and timelines. App.jsx owns page selection, authentication, report operations and Supabase access. The README is only a Vite template; capability details come from the sampled UI and source index, so unsampled behavior is not inferred.

Main entry points: [`src/App.jsx`](https://github.com/jomar2025/reporteu/blob/main/src/App.jsx) (App coordinator), [`src/components/DashboardHeader.jsx`](https://github.com/jomar2025/reporteu/blob/main/src/components/DashboardHeader.jsx) (Dashboard header), [`src/components/StatusBadge.jsx`](https://github.com/jomar2025/reporteu/blob/main/src/components/StatusBadge.jsx) (Status badge), [`src/pages/ReportDetail.jsx`](https://github.com/jomar2025/reporteu/blob/main/src/pages/ReportDetail.jsx) (Report detail)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_citizen["Citizen experience"]
  node_home["Public home<br/>[Home.jsx]"]
  node_register["Registration<br/>[Register.jsx]"]
  node_login["Citizen login<br/>[Login.jsx]"]
  node_new_report["Report intake<br/>[NewReport.jsx]"]
  node_citizen_dashboard["Citizen dashboard<br/>[Dashboard.jsx]"]
  node_my_reports["My reports<br/>[MyReports.jsx]"]
  node_report_detail["Report detail<br/>[ReportDetail.jsx]"]
end

subgraph group_entity["Entity workflow"]
  node_entity_login["Entity login<br/>[EntityLogin.jsx]"]
  node_entity_dashboard["Entity dashboard"]
  node_entity_reports["Assigned reports<br/>[EntityReports.jsx]"]
  node_entity_detail["Entity report detail"]
end

subgraph group_shared["Shared interface"]
  node_dashboard_header["Dashboard header"]
  node_report_row["Report row<br/>[ReportRow.jsx]"]
  node_status_badge["Status badge<br/>[StatusBadge.jsx]"]
  node_status_timeline["Status timeline<br/>[StatusTimeline.jsx]"]
end

subgraph group_backend["Application services"]
  node_app["App coordinator<br/>[App.jsx]"]
  node_supabase_client["Supabase client<br/>[supabaseClient.js]"]
end

node_citizen_user(("Citizen"))
node_entity_user(("Entity staff"))
node_supabase[("Supabase service")]

node_citizen_user -->|"visits"| node_home
node_entity_user -->|"signs in"| node_entity_login
node_app -->|"renders"| node_home
node_app -->|"renders"| node_register
node_app -->|"renders"| node_login
node_app -->|"renders"| node_new_report
node_app -->|"renders"| node_citizen_dashboard
node_app -->|"renders"| node_my_reports
node_app -->|"renders"| node_report_detail
node_app -->|"renders"| node_entity_login
node_app -->|"renders"| node_entity_dashboard
node_app -->|"renders"| node_entity_reports
node_app -->|"renders"| node_entity_detail
node_app -->|"queries"| node_supabase_client
node_supabase_client -->|"connects"| node_supabase
node_citizen_dashboard -->|"renders"| node_dashboard_header
node_citizen_dashboard -->|"renders"| node_report_row
node_my_reports -->|"renders"| node_dashboard_header
node_my_reports -->|"renders"| node_report_row
node_report_row -->|"renders"| node_status_badge
node_entity_dashboard -->|"renders"| node_status_badge
node_entity_detail -->|"renders"| node_dashboard_header
node_entity_detail -->|"renders"| node_status_badge
node_entity_detail -->|"renders"| node_status_timeline
node_entity_reports -->|"renders"| node_dashboard_header
node_entity_reports -->|"renders"| node_status_badge
node_report_detail -->|"renders"| node_dashboard_header
node_report_detail -->|"renders"| node_status_badge
node_report_detail -->|"renders"| node_status_timeline

click node_app "https://github.com/jomar2025/reporteu/blob/main/src/App.jsx"
click node_home "https://github.com/jomar2025/reporteu/blob/main/src/pages/Home.jsx"
click node_register "https://github.com/jomar2025/reporteu/blob/main/src/pages/Register.jsx"
click node_login "https://github.com/jomar2025/reporteu/blob/main/src/pages/Login.jsx"
click node_new_report "https://github.com/jomar2025/reporteu/blob/main/src/pages/NewReport.jsx"
click node_citizen_dashboard "https://github.com/jomar2025/reporteu/blob/main/src/pages/Dashboard.jsx"
click node_my_reports "https://github.com/jomar2025/reporteu/blob/main/src/pages/MyReports.jsx"
click node_report_detail "https://github.com/jomar2025/reporteu/blob/main/src/pages/ReportDetail.jsx"
click node_entity_login "https://github.com/jomar2025/reporteu/blob/main/src/entity/EntityLogin.jsx"
click node_entity_dashboard "https://github.com/jomar2025/reporteu/blob/main/src/entity/EntityDashboard.jsx"
click node_entity_reports "https://github.com/jomar2025/reporteu/blob/main/src/entity/EntityReports.jsx"
click node_entity_detail "https://github.com/jomar2025/reporteu/blob/main/src/entity/EntityReportDetail.jsx"
click node_dashboard_header "https://github.com/jomar2025/reporteu/blob/main/src/components/DashboardHeader.jsx"
click node_report_row "https://github.com/jomar2025/reporteu/blob/main/src/components/ReportRow.jsx"
click node_status_badge "https://github.com/jomar2025/reporteu/blob/main/src/components/StatusBadge.jsx"
click node_status_timeline "https://github.com/jomar2025/reporteu/blob/main/src/components/StatusTimeline.jsx"
click node_supabase_client "https://github.com/jomar2025/reporteu/blob/main/src/lib/supabaseClient.js"

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_home,node_register,node_login,node_new_report,node_citizen_dashboard,node_my_reports,node_report_detail toneBlue
class node_entity_login,node_entity_dashboard,node_entity_reports,node_entity_detail,node_supabase toneAmber
class node_dashboard_header,node_report_row,node_status_badge,node_status_timeline toneMint
class node_app,node_supabase_client toneRose
class node_citizen_user,node_entity_user toneIndigo
```

## Components

### Citizen experience

- [Public home](https://github.com/jomar2025/reporteu/blob/main/src/pages/Home.jsx): `src/pages/Home.jsx`
- [Registration](https://github.com/jomar2025/reporteu/blob/main/src/pages/Register.jsx): `src/pages/Register.jsx`
- [Citizen login](https://github.com/jomar2025/reporteu/blob/main/src/pages/Login.jsx): `src/pages/Login.jsx`
- [Report intake](https://github.com/jomar2025/reporteu/blob/main/src/pages/NewReport.jsx): `src/pages/NewReport.jsx`
- [Citizen dashboard](https://github.com/jomar2025/reporteu/blob/main/src/pages/Dashboard.jsx): `src/pages/Dashboard.jsx`
- [My reports](https://github.com/jomar2025/reporteu/blob/main/src/pages/MyReports.jsx): `src/pages/MyReports.jsx`
- [Report detail](https://github.com/jomar2025/reporteu/blob/main/src/pages/ReportDetail.jsx): `src/pages/ReportDetail.jsx`

### Entity workflow

- [Entity login](https://github.com/jomar2025/reporteu/blob/main/src/entity/EntityLogin.jsx): `src/entity/EntityLogin.jsx`
- [Entity dashboard](https://github.com/jomar2025/reporteu/blob/main/src/entity/EntityDashboard.jsx): `src/entity/EntityDashboard.jsx`
- [Assigned reports](https://github.com/jomar2025/reporteu/blob/main/src/entity/EntityReports.jsx): `src/entity/EntityReports.jsx`
- [Entity report detail](https://github.com/jomar2025/reporteu/blob/main/src/entity/EntityReportDetail.jsx): `src/entity/EntityReportDetail.jsx`

### Shared interface

- [Dashboard header](https://github.com/jomar2025/reporteu/blob/main/src/components/DashboardHeader.jsx): `src/components/DashboardHeader.jsx`
- [Report row](https://github.com/jomar2025/reporteu/blob/main/src/components/ReportRow.jsx): `src/components/ReportRow.jsx`
- [Status badge](https://github.com/jomar2025/reporteu/blob/main/src/components/StatusBadge.jsx): `src/components/StatusBadge.jsx`
- [Status timeline](https://github.com/jomar2025/reporteu/blob/main/src/components/StatusTimeline.jsx): `src/components/StatusTimeline.jsx`

### Application services

- [App coordinator](https://github.com/jomar2025/reporteu/blob/main/src/App.jsx): `src/App.jsx`
- [Supabase client](https://github.com/jomar2025/reporteu/blob/main/src/lib/supabaseClient.js): `src/lib/supabaseClient.js`

### Other components

- **Citizen**
- **Entity staff**
- **Supabase service**

## Connections

- Citizen → Public home: visits (evidence: `src/pages/Home.jsx`)
- Entity staff → Entity login: signs in
- App coordinator → Public home: renders (evidence: `src/App.jsx`)
- App coordinator → Registration: renders (evidence: `src/App.jsx`)
- App coordinator → Citizen login: renders (evidence: `src/App.jsx`)
- App coordinator → Report intake: renders (evidence: `src/App.jsx`)
- App coordinator → Citizen dashboard: renders (evidence: `src/App.jsx`)
- App coordinator → My reports: renders (evidence: `src/App.jsx`)
- App coordinator → Report detail: renders (evidence: `src/App.jsx`)
- App coordinator → Entity login: renders (evidence: `src/App.jsx`)
- App coordinator → Entity dashboard: renders (evidence: `src/App.jsx`)
- App coordinator → Assigned reports: renders (evidence: `src/App.jsx`)
- App coordinator → Entity report detail: renders (evidence: `src/App.jsx`)
- App coordinator → Supabase client: queries (evidence: `src/App.jsx`)
- Supabase client → Supabase service: connects (evidence: `src/lib/supabaseClient.js`)
- Citizen dashboard → Dashboard header: renders (evidence: `src/pages/Dashboard.jsx`)
- Citizen dashboard → Report row: renders (evidence: `src/pages/Dashboard.jsx`)
- My reports → Dashboard header: renders (evidence: `src/pages/MyReports.jsx`)
- My reports → Report row: renders (evidence: `src/pages/MyReports.jsx`)
- Report row → Status badge: renders (evidence: `src/components/ReportRow.jsx`)
- Entity dashboard → Status badge: renders (evidence: `src/entity/EntityDashboard.jsx`)
- Entity report detail → Dashboard header: renders (evidence: `src/entity/EntityReportDetail.jsx`)
- Entity report detail → Status badge: renders (evidence: `src/entity/EntityReportDetail.jsx`)
- Entity report detail → Status timeline: renders (evidence: `src/entity/EntityReportDetail.jsx`)
- Assigned reports → Dashboard header: renders (evidence: `src/entity/EntityReports.jsx`)
- Assigned reports → Status badge: renders (evidence: `src/entity/EntityReports.jsx`)
- Report detail → Dashboard header: renders (evidence: `src/pages/ReportDetail.jsx`)
- Report detail → Status badge: renders (evidence: `src/pages/ReportDetail.jsx`)
- Report detail → Status timeline: renders (evidence: `src/pages/ReportDetail.jsx`)