# jsantiago318/improved-centro-user architecture

> Architecture diagram of the GitHub repository jsantiago318/improved-centro-user, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-05-12). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/jsantiago318/improved-centro-user
- Repository: https://github.com/jsantiago318/improved-centro-user

## Overview

1. **Project shape**
   - This is a client-side React application built with Vite and TypeScript.
   - The codebase is organized as a single-page app with route-like “screens” plus reusable UI components, rather than a backend or microservice system.

2. **Application entry and bootstrapping**
   - `src/main.tsx` is the runtime entry point that mounts the app.
   - `src/App.tsx` is the top-level composition layer, likely responsible for selecting the active screen and wiring global providers such as styling, notifications, or app state.

3. **Screen-level boundaries**
   - `src/screens/AuthScreen.tsx`, `HomeScreen.tsx`, and `MenuScreen.tsx` represent the main user-facing pages.
   - These screens are the primary architectural boundary between navigation-level concerns and lower-level reusable widgets.

4. **Feature-oriented UI modules**
   - `src/components/` contains the app-specific feature components that build each screen: `Dashboard.tsx`, `Header.tsx`, `MenuInstructors.tsx`, `NewEvents.tsx`, and the various table components (`HTable`, `ITable`, `PTable`, `DTable`).
   - These are the business/UI assembly layer: they combine shared primitives into domain-specific views.

5. **Dashboard subsystem**
   - `src/components/Panels/` contains a more specialized dashboard area with `Dashboard.jsx`, `DashboardPanelInstructor.jsx`, `DashboardPanelSeminars.jsx`, and `DrawerEntity.jsx`.
   - This suggests a modular dashboard interface with separate panels for instructors and seminars, plus a drawer-based detail/edit interaction.

6. **Table and list presentation layer**
   - The multiple table components and `premades/` menu components indicate the app likely manages collections of entities such as instructors, seminars, and events.
   - `DropdownInstructores.tsx` and `SeminarTableMenu.tsx` look like contextual action menus attached to table rows or list items.

7. **Shared design system**
   - `src/components/ui/` is the shared component library, largely aligned with shadcn/ui primitives such as dialog, table, tabs, select, toast, calendar, dropdown-menu, and form controls.
   - These components form the reusable low-level presentation boundary beneath app-specific components.

8. **Cross-cutting feedback and notifications**
   - `src/components/notifications.tsx`, plus `ui/toaster.tsx`, `ui/sonner.tsx`, and toast helpers, indicate a centralized notification mechanism.
   - This is a cross-cutting UI concern used by multiple screens/features rather than a standalone feature area.

9. **External service integrations**
   - `src/supabaseClient.ts` is the likely data/auth backend integration point for persistence and user/session management.
   - `src/mailchimpClient.ts` is a separate integration for email/list management or marketing automation.
   - These client modules isolate external service access from the UI layer.

10. **Styling and asset system**
   - `src/styles/globals.css`, `tailwind.config.js`, `postcss.config.js`, and the `uiSpritesheets` assets indicate a Tailwind-driven styling pipeline with custom visual assets.
   - `public/` holds static files served directly by Vite, while `src/assets/` and `src/components/assets/` hold imported application assets.

11. **Utility and composition support**
   - `src/lib/utils.ts` appears to provide shared helper logic used across components, likely class merging or UI convenience helpers.
   - `components.json` suggests shadcn/ui configuration, which affects how shared components are generated and organized.

12. **Architecture summary for a diagram**
   - The clearest diagram is: **Vite/React entry → App shell → screen layer → feature components/panels → shared UI primitives**, with side integrations to **Supabase** and **Mailchimp**, and a parallel **styling/assets** pipeline supporting all UI layers.
   - Data and interaction flow mostly from screens down into feature components, then into shared UI and external client modules for persistence, auth, or messaging.

Main entry points: [`src/App.tsx`](https://github.com/jsantiago318/improved-centro-user/blob/main/src/App.tsx) (App), [`src/components/ui`](https://github.com/jsantiago318/improved-centro-user/tree/main/src/components/ui) (UI Kit), [`src/screens/HomeScreen.tsx`](https://github.com/jsantiago318/improved-centro-user/blob/main/src/screens/HomeScreen.tsx) (Home), [`src/components/Dashboard.tsx`](https://github.com/jsantiago318/improved-centro-user/blob/main/src/components/Dashboard.tsx) (Dashboard)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["Entry"]
  node_main(("main<br/>entrypoint<br/>[main.tsx]"))
  node_app["App<br/>shell<br/>[App.tsx]"]
end

subgraph group_screens["Screens"]
  node_auth_screen["Auth<br/>screen<br/>[AuthScreen.tsx]"]
  node_home_screen["Home<br/>screen<br/>[HomeScreen.tsx]"]
  node_menu_screen["Menu<br/>screen<br/>[MenuScreen.tsx]"]
end

subgraph group_features["Feature UI"]
  node_dashboard_comp["Dashboard<br/>feature<br/>[Dashboard.tsx]"]
  node_header["Header<br/>layout<br/>[Header.tsx]"]
  node_events["New Events<br/>feature<br/>[NewEvents.tsx]"]
  node_menu_instructors["Instructors<br/>feature"]
  node_tables[("Tables<br/>list views")]
  node_dropdowns["Row Menus<br/>action menu"]
end

subgraph group_dashboard["Dashboard"]
  node_panels["Panels<br/>dashboard module"]
  node_drawer["Drawer<br/>detail editor<br/>[DrawerEntity.jsx]"]
end

subgraph group_shared["Shared UI"]
  node_notifications(("Notifications<br/>feedback<br/>[notifications.tsx]"))
  node_ui["UI Kit<br/>primitives"]
  node_utils{{"Utils<br/>helpers<br/>[utils.ts]"}}
end

subgraph group_integrations["Integrations"]
  node_supabase[("Supabase<br/>backend client<br/>[supabaseClient.ts]")]
  node_mailchimp[("Mailchimp<br/>marketing client<br/>[mailchimpClient.ts]")]
end

subgraph group_styling["Styling"]
  node_styles["Globals<br/>style entry<br/>[globals.css]"]
end

node_main -->|"mounts"| node_app
node_app -->|"routes"| node_auth_screen
node_app -->|"routes"| node_home_screen
node_app -->|"routes"| node_menu_screen
node_app -->|"composes"| node_dashboard_comp
node_home_screen -->|"uses"| node_header
node_home_screen -->|"uses"| node_events
node_menu_screen -->|"uses"| node_menu_instructors
node_dashboard_comp -->|"assembles"| node_tables
node_dashboard_comp -->|"drills into"| node_panels
node_panels -->|"opens"| node_drawer
node_tables -->|"actions"| node_dropdowns
node_tables -->|"feedback"| node_notifications
node_menu_instructors -->|"uses"| node_dropdowns
node_notifications -->|"built on"| node_ui
node_header -->|"built on"| node_ui
node_events -->|"built on"| node_ui
node_tables -->|"built on"| node_ui
node_app -.->|"data"| node_supabase
node_app -.->|"integration"| node_mailchimp
node_ui -->|"helpers"| node_utils
node_app -->|"styles"| node_styles

click node_main "https://github.com/jsantiago318/improved-centro-user/blob/main/src/main.tsx"
click node_app "https://github.com/jsantiago318/improved-centro-user/blob/main/src/App.tsx"
click node_auth_screen "https://github.com/jsantiago318/improved-centro-user/blob/main/src/screens/AuthScreen.tsx"
click node_home_screen "https://github.com/jsantiago318/improved-centro-user/blob/main/src/screens/HomeScreen.tsx"
click node_menu_screen "https://github.com/jsantiago318/improved-centro-user/blob/main/src/screens/MenuScreen.tsx"
click node_dashboard_comp "https://github.com/jsantiago318/improved-centro-user/blob/main/src/components/Dashboard.tsx"
click node_header "https://github.com/jsantiago318/improved-centro-user/blob/main/src/components/Header.tsx"
click node_events "https://github.com/jsantiago318/improved-centro-user/blob/main/src/components/NewEvents.tsx"
click node_menu_instructors "https://github.com/jsantiago318/improved-centro-user/blob/main/src/components/MenuInstructors.tsx"
click node_panels "https://github.com/jsantiago318/improved-centro-user/tree/main/src/components/Panels"
click node_drawer "https://github.com/jsantiago318/improved-centro-user/blob/main/src/components/Panels/DrawerEntity.jsx"
click node_dropdowns "https://github.com/jsantiago318/improved-centro-user/tree/main/src/components/premades"
click node_notifications "https://github.com/jsantiago318/improved-centro-user/blob/main/src/components/notifications.tsx"
click node_ui "https://github.com/jsantiago318/improved-centro-user/tree/main/src/components/ui"
click node_utils "https://github.com/jsantiago318/improved-centro-user/blob/main/src/lib/utils.ts"
click node_supabase "https://github.com/jsantiago318/improved-centro-user/blob/main/src/supabaseClient.ts"
click node_mailchimp "https://github.com/jsantiago318/improved-centro-user/blob/main/src/mailchimpClient.ts"
click node_styles "https://github.com/jsantiago318/improved-centro-user/blob/main/src/styles/globals.css"

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_main,node_app,node_styles toneBlue
class node_auth_screen,node_home_screen,node_menu_screen toneAmber
class node_dashboard_comp,node_header,node_events,node_menu_instructors,node_tables,node_dropdowns toneMint
class node_panels,node_drawer toneRose
class node_notifications,node_ui,node_utils toneIndigo
class node_supabase,node_mailchimp toneTeal
```

## Components

### Entry

Vite/React bootstrap and top-level app composition

- [main](https://github.com/jsantiago318/improved-centro-user/blob/main/src/main.tsx): entrypoint · Bootstraps the client app · `src/main.tsx`
- [App](https://github.com/jsantiago318/improved-centro-user/blob/main/src/App.tsx): shell · Top-level composition and provider wiring · `src/App.tsx`

### Screens

Route-like user-facing page boundaries

- [Auth](https://github.com/jsantiago318/improved-centro-user/blob/main/src/screens/AuthScreen.tsx): screen · Authentication and access flow · `src/screens/AuthScreen.tsx`
- [Home](https://github.com/jsantiago318/improved-centro-user/blob/main/src/screens/HomeScreen.tsx): screen · Primary landing and overview screen · `src/screens/HomeScreen.tsx`
- [Menu](https://github.com/jsantiago318/improved-centro-user/blob/main/src/screens/MenuScreen.tsx): screen · Navigation and menu-centric screen · `src/screens/MenuScreen.tsx`

### Feature UI

App-specific components that assemble each screen

- [Dashboard](https://github.com/jsantiago318/improved-centro-user/blob/main/src/components/Dashboard.tsx): feature · Main dashboard assembly component · `src/components/Dashboard.tsx`
- [Header](https://github.com/jsantiago318/improved-centro-user/blob/main/src/components/Header.tsx): layout · Top-level page chrome and navigation · `src/components/Header.tsx`
- [New Events](https://github.com/jsantiago318/improved-centro-user/blob/main/src/components/NewEvents.tsx): feature · Event creation or event listing module · `src/components/NewEvents.tsx`
- [Instructors](https://github.com/jsantiago318/improved-centro-user/blob/main/src/components/MenuInstructors.tsx): feature · Instructor-oriented menu and selection UI · `src/components/MenuInstructors.tsx`
- **Tables**: list views · Entity table family for app data collections
- [Row Menus](https://github.com/jsantiago318/improved-centro-user/tree/main/src/components/premades): action menu · Contextual row actions for instructors and seminars · `src/components/premades`

### Dashboard

Specialized dashboard panels and drawer interactions

- [Panels](https://github.com/jsantiago318/improved-centro-user/tree/main/src/components/Panels): dashboard module · Detailed dashboard panels and drawer flow · `src/components/Panels`
- [Drawer](https://github.com/jsantiago318/improved-centro-user/blob/main/src/components/Panels/DrawerEntity.jsx): detail editor · Entity detail or edit drawer interaction · `src/components/Panels/DrawerEntity.jsx`

### Shared UI

Reusable primitive component library and helpers

- [Notifications](https://github.com/jsantiago318/improved-centro-user/blob/main/src/components/notifications.tsx): feedback · Centralized toast and notification plumbing · `src/components/notifications.tsx`
- [UI Kit](https://github.com/jsantiago318/improved-centro-user/tree/main/src/components/ui): primitives · Reusable shadcn-style component primitives · `src/components/ui`
- [Utils](https://github.com/jsantiago318/improved-centro-user/blob/main/src/lib/utils.ts): helpers · Shared helper functions for components · `src/lib/utils.ts`

### Integrations

External client adapters for data/auth and messaging

- [Supabase](https://github.com/jsantiago318/improved-centro-user/blob/main/src/supabaseClient.ts): backend client · Auth and persistence integration · `src/supabaseClient.ts`
- [Mailchimp](https://github.com/jsantiago318/improved-centro-user/blob/main/src/mailchimpClient.ts): marketing client · Email or list-management integration · `src/mailchimpClient.ts`

### Styling

Global styles, build-time config, and static assets

- [Globals](https://github.com/jsantiago318/improved-centro-user/blob/main/src/styles/globals.css): style entry · Global stylesheet and design tokens · `src/styles/globals.css`

## Connections

- main → App: mounts · Client entry mounts the application shell
- App → Auth: routes · App selects authentication flow
- App → Home: routes · App selects primary home flow
- App → Menu: routes · App selects menu flow
- App → Dashboard: composes · App shell assembles the dashboard experience
- Home → Header: uses · Home screen shares common page chrome
- Home → New Events: uses · Home screen surfaces event interactions
- Menu → Instructors: uses · Menu screen focuses on instructor selection
- Dashboard → Tables: assembles · Dashboard pulls together entity tables
- Dashboard → Panels: drills into · Dashboard opens specialized panels
- Panels → Drawer: opens · Panel actions lead into drawer-based entity editing
- Tables → Row Menus: actions · Table rows expose contextual action menus
- Tables → Notifications: feedback · List actions surface toast feedback
- Instructors → Row Menus: uses · Instructor menu reuses row-level dropdown actions
- Notifications → UI Kit: built on · Notification system is implemented with shared primitives
- Header → UI Kit: built on · Page chrome is composed from reusable UI primitives
- New Events → UI Kit: built on · Event UI uses shared components
- Tables → UI Kit: built on · Tables and controls rely on the shared UI kit
- App → Supabase: data · App features depend on backend data and auth
- App → Mailchimp: integration · App can trigger marketing or messaging workflows
- UI Kit → Utils: helpers · UI primitives share common utility helpers
- App → Globals: styles · Global styling supports the entire application