# leocondra/metro_canteiro_de_obras architecture

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

- Interactive diagram: https://gitdiagram.com/leocondra/metro_canteiro_de_obras
- Repository: https://github.com/leocondra/metro_canteiro_de_obras

## Overview

Metro Canteiro de Obras is a React app for tracking construction progress against a BIM model. A user signs in, uploads or selects an IFC model, views it and captures a processed snapshot, then submits that snapshot with a site photo for analysis. The app displays the resulting progress, class-level comparison and alerts, and keeps model files in Supabase Storage for history. The README documents a Supabase Edge Function using Google Vision; its implementation is not in the supplied tree, so analysis internals are not expanded here.

Main entry points: [`metro_canteiro_de_obras/src/TelaInicial.jsx`](https://github.com/leocondra/metro_canteiro_de_obras/blob/main/metro_canteiro_de_obras/src/TelaInicial.jsx) (Work dashboard), [`metro_canteiro_de_obras/src/Supabase.js`](https://github.com/leocondra/metro_canteiro_de_obras/blob/main/metro_canteiro_de_obras/src/Supabase.js) (Supabase client), [`metro_canteiro_de_obras/src/components/IFCPanel.jsx`](https://github.com/leocondra/metro_canteiro_de_obras/blob/main/metro_canteiro_de_obras/src/components/IFCPanel.jsx) (IFC viewer), [`metro_canteiro_de_obras/src/main.jsx`](https://github.com/leocondra/metro_canteiro_de_obras/blob/main/metro_canteiro_de_obras/src/main.jsx) (App routing)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_access["Access"]
  node_routes["App routing<br/>[main.jsx]"]
  node_login["Login<br/>[Login.jsx]"]
  node_workspace["Work dashboard<br/>[TelaInicial.jsx]"]
  node_topbar["Status bar<br/>[TopBar.jsx]"]
end

subgraph group_models["BIM models"]
  node_history["Model history<br/>[HistorySidebar.jsx]"]
  node_ifc["IFC viewer<br/>[IFCPanel.jsx]"]
  node_sobel["Snapshot edges<br/>[sobelUtils.js]"]
end

subgraph group_compare["Progress comparison"]
  node_comparemodal["Compare dialog<br/>[CompareModal.jsx]"]
  node_report["Comparison report"]
  node_progress["Progress panel"]
  node_images["Compared images<br/>[ImagesModal.jsx]"]
  node_fileutils["File conversion<br/>[fileUtils.js]"]
end

subgraph group_services["Backend services"]
  node_supabaseclient["Supabase client<br/>[Supabase.js]"]
  node_storage[("Supabase Storage")]
  node_authdb[("Admin records")]
  node_analyzer["Analysis function"]
  node_vision["Google Vision"]
end

node_user(("User"))

node_user -->|"opens app"| node_routes
node_routes -->|"routes login"| node_login
node_routes -->|"routes dashboard"| node_workspace
node_user -->|"submits credentials"| node_login
node_login -->|"queries admin"| node_supabaseclient
node_supabaseclient -->|"reads credentials"| node_authdb
node_user -->|"uploads model"| node_workspace
node_workspace -->|"uploads model"| node_supabaseclient
node_supabaseclient -->|"stores model"| node_storage
node_workspace -->|"lists and removes files"| node_supabaseclient
node_supabaseclient -->|"lists and removes files"| node_storage
node_workspace -->|"passes history"| node_history
node_user -->|"selects model"| node_history
node_workspace -->|"renders viewer"| node_ifc
node_ifc -->|"fetches model"| node_storage
node_ifc -->|"processes snapshot"| node_sobel
node_ifc -->|"returns snapshot"| node_workspace
node_user -->|"selects site photo"| node_comparemodal
node_workspace -->|"supplies snapshot"| node_comparemodal
node_comparemodal -->|"passes photo"| node_workspace
node_workspace -->|"converts snapshot"| node_fileutils
node_workspace -->|"submits image pair"| node_analyzer
node_analyzer -.->|"analyzes images"| node_vision
node_analyzer -->|"returns progress and findings"| node_workspace
node_workspace -->|"supplies report"| node_report
node_workspace -->|"supplies progress history"| node_progress
node_workspace -->|"supplies compared images"| node_images
node_workspace -->|"supplies status"| node_topbar

click node_routes "https://github.com/leocondra/metro_canteiro_de_obras/blob/main/metro_canteiro_de_obras/src/main.jsx"
click node_login "https://github.com/leocondra/metro_canteiro_de_obras/blob/main/metro_canteiro_de_obras/src/Login.jsx"
click node_workspace "https://github.com/leocondra/metro_canteiro_de_obras/blob/main/metro_canteiro_de_obras/src/TelaInicial.jsx"
click node_topbar "https://github.com/leocondra/metro_canteiro_de_obras/blob/main/metro_canteiro_de_obras/src/components/TopBar.jsx"
click node_history "https://github.com/leocondra/metro_canteiro_de_obras/blob/main/metro_canteiro_de_obras/src/components/HistorySidebar.jsx"
click node_ifc "https://github.com/leocondra/metro_canteiro_de_obras/blob/main/metro_canteiro_de_obras/src/components/IFCPanel.jsx"
click node_sobel "https://github.com/leocondra/metro_canteiro_de_obras/blob/main/metro_canteiro_de_obras/src/utils/sobelUtils.js"
click node_comparemodal "https://github.com/leocondra/metro_canteiro_de_obras/blob/main/metro_canteiro_de_obras/src/components/CompareModal.jsx"
click node_report "https://github.com/leocondra/metro_canteiro_de_obras/blob/main/metro_canteiro_de_obras/src/components/RelatorioComparacao.jsx"
click node_progress "https://github.com/leocondra/metro_canteiro_de_obras/blob/main/metro_canteiro_de_obras/src/components/PainelProgresso.jsx"
click node_images "https://github.com/leocondra/metro_canteiro_de_obras/blob/main/metro_canteiro_de_obras/src/components/ImagesModal.jsx"
click node_fileutils "https://github.com/leocondra/metro_canteiro_de_obras/blob/main/metro_canteiro_de_obras/src/utils/fileUtils.js"
click node_supabaseclient "https://github.com/leocondra/metro_canteiro_de_obras/blob/main/metro_canteiro_de_obras/src/Supabase.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_routes,node_login,node_workspace,node_topbar,node_user toneBlue
class node_history,node_ifc,node_sobel toneAmber
class node_comparemodal,node_report,node_progress,node_images,node_fileutils toneMint
class node_supabaseclient,node_storage,node_authdb,node_analyzer,node_vision toneRose
```

## Components

### Access

- [App routing](https://github.com/leocondra/metro_canteiro_de_obras/blob/main/metro_canteiro_de_obras/src/main.jsx): `metro_canteiro_de_obras/src/main.jsx`
- [Login](https://github.com/leocondra/metro_canteiro_de_obras/blob/main/metro_canteiro_de_obras/src/Login.jsx): `metro_canteiro_de_obras/src/Login.jsx`
- [Work dashboard](https://github.com/leocondra/metro_canteiro_de_obras/blob/main/metro_canteiro_de_obras/src/TelaInicial.jsx): `metro_canteiro_de_obras/src/TelaInicial.jsx`
- [Status bar](https://github.com/leocondra/metro_canteiro_de_obras/blob/main/metro_canteiro_de_obras/src/components/TopBar.jsx): `metro_canteiro_de_obras/src/components/TopBar.jsx`

### BIM models

- [Model history](https://github.com/leocondra/metro_canteiro_de_obras/blob/main/metro_canteiro_de_obras/src/components/HistorySidebar.jsx): `metro_canteiro_de_obras/src/components/HistorySidebar.jsx`
- [IFC viewer](https://github.com/leocondra/metro_canteiro_de_obras/blob/main/metro_canteiro_de_obras/src/components/IFCPanel.jsx): `metro_canteiro_de_obras/src/components/IFCPanel.jsx`
- [Snapshot edges](https://github.com/leocondra/metro_canteiro_de_obras/blob/main/metro_canteiro_de_obras/src/utils/sobelUtils.js): `metro_canteiro_de_obras/src/utils/sobelUtils.js`

### Progress comparison

- [Compare dialog](https://github.com/leocondra/metro_canteiro_de_obras/blob/main/metro_canteiro_de_obras/src/components/CompareModal.jsx): `metro_canteiro_de_obras/src/components/CompareModal.jsx`
- [Comparison report](https://github.com/leocondra/metro_canteiro_de_obras/blob/main/metro_canteiro_de_obras/src/components/RelatorioComparacao.jsx): `metro_canteiro_de_obras/src/components/RelatorioComparacao.jsx`
- [Progress panel](https://github.com/leocondra/metro_canteiro_de_obras/blob/main/metro_canteiro_de_obras/src/components/PainelProgresso.jsx): `metro_canteiro_de_obras/src/components/PainelProgresso.jsx`
- [Compared images](https://github.com/leocondra/metro_canteiro_de_obras/blob/main/metro_canteiro_de_obras/src/components/ImagesModal.jsx): `metro_canteiro_de_obras/src/components/ImagesModal.jsx`
- [File conversion](https://github.com/leocondra/metro_canteiro_de_obras/blob/main/metro_canteiro_de_obras/src/utils/fileUtils.js): `metro_canteiro_de_obras/src/utils/fileUtils.js`

### Backend services

- [Supabase client](https://github.com/leocondra/metro_canteiro_de_obras/blob/main/metro_canteiro_de_obras/src/Supabase.js): `metro_canteiro_de_obras/src/Supabase.js`
- **Supabase Storage**
- **Admin records**
- **Analysis function**
- **Google Vision**

### Other components

- **User**

## Connections

- User → App routing: opens app
- App routing → Login: routes login
- App routing → Work dashboard: routes dashboard
- User → Login: submits credentials
- Login → Supabase client: queries admin
- Supabase client → Admin records: reads credentials
- User → Work dashboard: uploads model
- Work dashboard → Supabase client: uploads model
- Supabase client → Supabase Storage: stores model
- Work dashboard → Supabase client: lists and removes files
- Supabase client → Supabase Storage: lists and removes files
- Work dashboard → Model history: passes history
- User → Model history: selects model
- Work dashboard → IFC viewer: renders viewer
- IFC viewer → Supabase Storage: fetches model
- IFC viewer → Snapshot edges: processes snapshot
- IFC viewer → Work dashboard: returns snapshot
- User → Compare dialog: selects site photo
- Work dashboard → Compare dialog: supplies snapshot
- Compare dialog → Work dashboard: passes photo
- Work dashboard → File conversion: converts snapshot
- Work dashboard → Analysis function: submits image pair
- Analysis function → Google Vision: analyzes images
- Analysis function → Work dashboard: returns progress and findings
- Work dashboard → Comparison report: supplies report
- Work dashboard → Progress panel: supplies progress history
- Work dashboard → Compared images: supplies compared images
- Work dashboard → Status bar: supplies status