# sergiovela10/googleai-phoenix-ledger architecture

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

- Interactive diagram: https://gitdiagram.com/sergiovela10/googleai-phoenix-ledger
- Repository: https://github.com/sergiovela10/googleai-phoenix-ledger

## Overview

Phoenix Ledger is a client-side property brokerage ledger for managing Monterrey listings and mandates. Users browse, search, filter, sort, and review records in grid, table, pipeline, map, or analytics views; they can inspect a dossier, edit or add a property, track negotiation notes and status, and export portfolio data. The sampled code shows App coordinating state and child views, with seed records held in memory and preferences stored in localStorage; no backend persistence is evidenced. Map and analytics capabilities are documented by UI labels, but their implementation wiring was not sampled.

Main entry points: [`src/App.tsx`](https://github.com/sergiovela10/googleai-phoenix-ledger/blob/main/src/App.tsx) (App coordinator), [`src/utils/formatters.ts`](https://github.com/sergiovela10/googleai-phoenix-ledger/blob/main/src/utils/formatters.ts) (Currency and expiry), [`src/utils/translations.ts`](https://github.com/sergiovela10/googleai-phoenix-ledger/blob/main/src/utils/translations.ts) (Translations and themes), [`src/components/PropertyDetailModal.tsx`](https://github.com/sergiovela10/googleai-phoenix-ledger/blob/main/src/components/PropertyDetailModal.tsx) (Property dossier)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["Ledger experience"]
  node_entry["React entry<br/>[main.tsx]"]
  node_app["App coordinator<br/>[App.tsx]"]
  node_header["Header controls<br/>[Header.tsx]"]
  node_controls["Search and filters<br/>[ControlsBar.tsx]"]
  node_stats["Portfolio stats<br/>[StatsBar.tsx]"]
  node_grid["Property cards<br/>[PropertyCard.tsx]"]
  node_table["Ledger table"]
  node_pipeline["Deal pipeline"]
  node_map["District map"]
  node_analytics["Financial analytics"]
end

subgraph group_property_ops["Property operations"]
  node_detail["Property dossier"]
  node_editor["Property editor"]
  node_teaser["Executive teaser"]
  node_csv["CSV download<br/>[App.tsx]"]
end

subgraph group_presentation["Presentation services"]
  node_draft["Draft banner<br/>[DraftBanner.tsx]"]
  node_formatters["Currency and expiry<br/>[formatters.ts]"]
  node_translations["Translations and themes<br/>[translations.ts]"]
end

subgraph group_domain["Domain and seed data"]
  node_property_types["Property model<br/>[types.ts]"]
  node_seed["Initial properties<br/>[mockProperties.ts]"]
  node_browser_store[("Browser preferences")]
end

node_user(("Broker"))

node_user -->|"opens app"| node_entry
node_entry -->|"renders"| node_app
node_app -->|"initializes records"| node_seed
node_app -->|"reads and writes preferences"| node_browser_store
node_app -->|"renders and handles actions"| node_header
node_app -->|"renders and handles filters"| node_controls
node_app -->|"supplies portfolio data"| node_stats
node_app -->|"renders selected view"| node_grid
node_app -->|"renders selected view"| node_table
node_app -->|"renders selected view"| node_pipeline
node_app -->|"renders selected view"| node_map
node_app -->|"renders selected view"| node_analytics
node_app -->|"opens selected record"| node_detail
node_app -->|"opens add or edit"| node_editor
node_app -->|"opens selected teaser"| node_teaser
node_app -->|"renders banner"| node_draft
node_app -->|"builds export"| node_csv
node_header -->|"dispatches view and action changes"| node_app
node_controls -->|"dispatches filter and sort changes"| node_app
node_grid -->|"formats values"| node_formatters
node_pipeline -->|"formats values and expiry"| node_formatters
node_detail -->|"formats dossier values"| node_formatters
node_editor -->|"submits property"| node_app
node_detail -->|"dispatches edit and delete"| node_app
node_app -->|"uses property model"| node_property_types
node_seed -->|"provides typed records"| node_property_types
node_header -->|"reads labels and themes"| node_translations
node_controls -->|"reads labels"| node_translations
node_pipeline -->|"reads labels and statuses"| node_translations
node_detail -->|"reads labels and statuses"| node_translations
node_editor -->|"reads labels"| node_translations
node_stats -->|"formats metrics"| node_formatters
node_teaser -->|"formats values"| node_formatters

click node_entry "https://github.com/sergiovela10/googleai-phoenix-ledger/blob/main/src/main.tsx"
click node_app "https://github.com/sergiovela10/googleai-phoenix-ledger/blob/main/src/App.tsx"
click node_header "https://github.com/sergiovela10/googleai-phoenix-ledger/blob/main/src/components/Header.tsx"
click node_controls "https://github.com/sergiovela10/googleai-phoenix-ledger/blob/main/src/components/ControlsBar.tsx"
click node_stats "https://github.com/sergiovela10/googleai-phoenix-ledger/blob/main/src/components/StatsBar.tsx"
click node_grid "https://github.com/sergiovela10/googleai-phoenix-ledger/blob/main/src/components/PropertyCard.tsx"
click node_table "https://github.com/sergiovela10/googleai-phoenix-ledger/blob/main/src/components/PropertyTableView.tsx"
click node_pipeline "https://github.com/sergiovela10/googleai-phoenix-ledger/blob/main/src/components/PropertyPipelineView.tsx"
click node_map "https://github.com/sergiovela10/googleai-phoenix-ledger/blob/main/src/components/PropertyMapView.tsx"
click node_analytics "https://github.com/sergiovela10/googleai-phoenix-ledger/blob/main/src/components/PropertyAnalyticsView.tsx"
click node_detail "https://github.com/sergiovela10/googleai-phoenix-ledger/blob/main/src/components/PropertyDetailModal.tsx"
click node_editor "https://github.com/sergiovela10/googleai-phoenix-ledger/blob/main/src/components/AddEditPropertyModal.tsx"
click node_teaser "https://github.com/sergiovela10/googleai-phoenix-ledger/blob/main/src/components/ExecutiveTeaserModal.tsx"
click node_draft "https://github.com/sergiovela10/googleai-phoenix-ledger/blob/main/src/components/DraftBanner.tsx"
click node_formatters "https://github.com/sergiovela10/googleai-phoenix-ledger/blob/main/src/utils/formatters.ts"
click node_translations "https://github.com/sergiovela10/googleai-phoenix-ledger/blob/main/src/utils/translations.ts"
click node_property_types "https://github.com/sergiovela10/googleai-phoenix-ledger/blob/main/src/types.ts"
click node_seed "https://github.com/sergiovela10/googleai-phoenix-ledger/blob/main/src/data/mockProperties.ts"
click node_csv "https://github.com/sergiovela10/googleai-phoenix-ledger/blob/main/src/App.tsx"

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_entry,node_app,node_header,node_controls,node_stats,node_grid,node_table,node_pipeline,node_map,node_analytics toneBlue
class node_detail,node_editor,node_teaser,node_csv toneAmber
class node_draft,node_formatters,node_translations toneMint
class node_property_types,node_seed,node_browser_store toneRose
class node_user toneIndigo
```

## Components

### Ledger experience

- [React entry](https://github.com/sergiovela10/googleai-phoenix-ledger/blob/main/src/main.tsx): `src/main.tsx`
- [App coordinator](https://github.com/sergiovela10/googleai-phoenix-ledger/blob/main/src/App.tsx): `src/App.tsx`
- [Header controls](https://github.com/sergiovela10/googleai-phoenix-ledger/blob/main/src/components/Header.tsx): `src/components/Header.tsx`
- [Search and filters](https://github.com/sergiovela10/googleai-phoenix-ledger/blob/main/src/components/ControlsBar.tsx): `src/components/ControlsBar.tsx`
- [Portfolio stats](https://github.com/sergiovela10/googleai-phoenix-ledger/blob/main/src/components/StatsBar.tsx): `src/components/StatsBar.tsx`
- [Property cards](https://github.com/sergiovela10/googleai-phoenix-ledger/blob/main/src/components/PropertyCard.tsx): `src/components/PropertyCard.tsx`
- [Ledger table](https://github.com/sergiovela10/googleai-phoenix-ledger/blob/main/src/components/PropertyTableView.tsx): `src/components/PropertyTableView.tsx`
- [Deal pipeline](https://github.com/sergiovela10/googleai-phoenix-ledger/blob/main/src/components/PropertyPipelineView.tsx): `src/components/PropertyPipelineView.tsx`
- [District map](https://github.com/sergiovela10/googleai-phoenix-ledger/blob/main/src/components/PropertyMapView.tsx): `src/components/PropertyMapView.tsx`
- [Financial analytics](https://github.com/sergiovela10/googleai-phoenix-ledger/blob/main/src/components/PropertyAnalyticsView.tsx): `src/components/PropertyAnalyticsView.tsx`

### Property operations

- [Property dossier](https://github.com/sergiovela10/googleai-phoenix-ledger/blob/main/src/components/PropertyDetailModal.tsx): `src/components/PropertyDetailModal.tsx`
- [Property editor](https://github.com/sergiovela10/googleai-phoenix-ledger/blob/main/src/components/AddEditPropertyModal.tsx): `src/components/AddEditPropertyModal.tsx`
- [Executive teaser](https://github.com/sergiovela10/googleai-phoenix-ledger/blob/main/src/components/ExecutiveTeaserModal.tsx): `src/components/ExecutiveTeaserModal.tsx`
- [CSV download](https://github.com/sergiovela10/googleai-phoenix-ledger/blob/main/src/App.tsx): `src/App.tsx`

### Presentation services

- [Draft banner](https://github.com/sergiovela10/googleai-phoenix-ledger/blob/main/src/components/DraftBanner.tsx): `src/components/DraftBanner.tsx`
- [Currency and expiry](https://github.com/sergiovela10/googleai-phoenix-ledger/blob/main/src/utils/formatters.ts): `src/utils/formatters.ts`
- [Translations and themes](https://github.com/sergiovela10/googleai-phoenix-ledger/blob/main/src/utils/translations.ts): `src/utils/translations.ts`

### Domain and seed data

- [Property model](https://github.com/sergiovela10/googleai-phoenix-ledger/blob/main/src/types.ts): `src/types.ts`
- [Initial properties](https://github.com/sergiovela10/googleai-phoenix-ledger/blob/main/src/data/mockProperties.ts): `src/data/mockProperties.ts`
- **Browser preferences**

### Other components

- **Broker**

## Connections

- Broker → React entry: opens app
- React entry → App coordinator: renders
- App coordinator → Initial properties: initializes records
- App coordinator → Browser preferences: reads and writes preferences
- App coordinator → Header controls: renders and handles actions
- App coordinator → Search and filters: renders and handles filters
- App coordinator → Portfolio stats: supplies portfolio data
- App coordinator → Property cards: renders selected view
- App coordinator → Ledger table: renders selected view
- App coordinator → Deal pipeline: renders selected view
- App coordinator → District map: renders selected view
- App coordinator → Financial analytics: renders selected view
- App coordinator → Property dossier: opens selected record
- App coordinator → Property editor: opens add or edit
- App coordinator → Executive teaser: opens selected teaser
- App coordinator → Draft banner: renders banner
- App coordinator → CSV download: builds export
- Header controls → App coordinator: dispatches view and action changes
- Search and filters → App coordinator: dispatches filter and sort changes
- Property cards → Currency and expiry: formats values
- Deal pipeline → Currency and expiry: formats values and expiry
- Property dossier → Currency and expiry: formats dossier values
- Property editor → App coordinator: submits property
- Property dossier → App coordinator: dispatches edit and delete
- App coordinator → Property model: uses property model
- Initial properties → Property model: provides typed records
- Header controls → Translations and themes: reads labels and themes
- Search and filters → Translations and themes: reads labels
- Deal pipeline → Translations and themes: reads labels and statuses
- Property dossier → Translations and themes: reads labels and statuses
- Property editor → Translations and themes: reads labels
- Portfolio stats → Currency and expiry: formats metrics
- Executive teaser → Currency and expiry: formats values