ag15082004/e-commerce

Purpose and runtime

A Vite React/TypeScript analytics dashboard with multiple business-analysis views and an embedded “Genie” conversational analytics capability. The repository also contains a TypeScript server layer intended to route LLM-driven requests, generate/validate SQL, query Databricks, and return insights or charts.

Client bootstrap is src/main.tsx; the root UI is src/App.tsx. The server entry point is server.ts.

Application shell and navigation

The shared application frame separates navigation and page presentation from analytics content:

• src/components/layout/Layout.tsx

• src/components/layout/Navbar.tsx

• src/components/layout/Sidebar.tsx

• src/components/layout/PageHeader.tsx

App.tsx is expected to compose this layout and select the analytical page. Shared empty/loading/error states establish UI boundaries for asynchronous analytics and failures:

• src/components/common/LoadingState.tsx

• src/components/common/ErrorBoundary.tsx

• src/components/common/EmptyState.tsx

Analytics page layer

Business domains are represented as distinct React page modules, providing the dashboard’s primary presentation boundary:

• src/pages/ExecutiveDashboard.tsx

• src/pages/SalesAnalytics.tsx

• src/pages/CustomerAnalytics.tsx

• src/pages/DeliveryAnalytics.tsx

• src/pages/MarketingAnalytics.tsx

• src/pages/ProductPerformance.tsx

• src/pages/SupportClickstream.tsx

• src/pages/PredictiveAnalytics.tsx

These pages consume common analytics-oriented state and utilities rather than directly owning infrastructure access.

Client analytics and data adapters

React hooks encapsulate client-side analytics retrieval/processing and predictive-analysis behavior:

• src/hooks/useAnalytics.tsx

• src/hooks/usePredictiveAnalytics.tsx

The client service boundary is src/services/api.ts. Domain calculation and external-system adaptation are isolated in:

• src/utils/analyticsEngine.ts

• src/utils/databricksAdapter.ts

• src/utils/mlAdapter.ts

This division allows pages to render structured analytics while adapters hide Databricks and ML integration details. src/utils/export.ts supports exporting produced analytics.

Conversational analytics entry point

src/components/common/GenieChat.tsx is the UI boundary for natural-language analytics requests. It should send requests through the client API layer rather than access models or Databricks directly:

• src/components/common/GenieChat.tsx

• src/services/api.ts

• src/server/controllers/genieController.ts

The controller is the server-side request boundary and delegates orchestration rather than embedding provider logic.

Genie agent pipeline

The backend service graph implements an LLM-to-data workflow:

• src/server/services/agentRouter.ts classifies/routes requests.

• src/server/services/conversationManager.ts preserves multi-turn context.

• src/server/services/promptBuilder.ts constructs model prompts.

• src/server/services/llmService.ts invokes the LLM.

• src/server/services/sqlGenerator.ts derives query text.

• src/server/services/sqlValidator.ts constrains generated SQL before execution.

• src/server/services/databricksConnector.ts executes approved queries against Databricks.

• src/server/services/insightGenerator.ts and src/server/services/chartGenerator.ts convert returned data into narrative/chart-ready output.

The critical trust boundary is between LLM-generated SQL and databricksConnector.ts; validation must precede execution.

Infrastructure and UI foundation

The client runs in the browser via Vite (vite.config.ts) and is styled with Tailwind/PostCSS:

• tailwind.config.js

• postcss.config.js

• src/index.css

Reusable UI primitives under src/components/ui/ provide consistent controls and tables. The material external dependencies implied by the architecture are an LLM provider, Databricks, and an ML/predictive analytics backend or adapter.