jsantiago318/improved-centro-user

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.