dncmaduro/candy-cal-fe

Purpose and runtime

Candy Cal FE is an internal MyCandy operations/administration SPA for sales, marketing/storage, livestream, marketplace income, and admin workflows. It runs as a React 18 + TypeScript application built by Vite; production is static dist/ content served through Nginx/static hosting. Entry bootstrap: src/main.tsx, root application shell: src/App.tsx.

Routing and access boundaries

TanStack Router file routes define functional areas and page composition; its generated tree is src/routeTree.gen.ts. Root-level route behavior is centralized in src/routes/__root.tsx; major route partitions include sales (src/routes/sales/index.tsx), marketing storage (src/routes/marketing-storage/index.tsx), livestream (src/routes/livestream/index.tsx), and administration (src/routes/admin/index.tsx). Route-specific layouts separate operational contexts: src/components/layouts/AppLayout.tsx, src/components/layouts/SalesLayout.tsx, src/components/layouts/AdminLayout.tsx.

API, auth, and state layer

Domain hooks are the boundary between UI and backend APIs, with Axios transport configured in src/hooks/axios.ts and endpoint selection/failover likely managed by src/hooks/useEndpoints.ts. Authentication/session enforcement is represented by src/hooks/useAuthGuard.ts and src/utils/authSession.ts. Cross-page client state is held in Zustand stores such as src/store/userStore.ts, src/store/uiStore.ts, and src/store/calResultStore.ts. Backend URLs come from VITE_BACKEND_URL; API contract implementations are primarily distributed across src/hooks/.

Sales CRM and analytics

The sales area manages leads, funnels, orders, catalog/price items, activities, tasks, channels, and customer ranking. Route pages orchestrate views and entity navigation, notably src/routes/sales/funnel/index.tsx, src/routes/sales/orders/$orderId.tsx, and src/routes/sales/dashboard/index.tsx. Business UI and mutation flows live in src/components/sales/, while data access is separated into hooks including src/hooks/useSalesFunnel.ts, src/hooks/useSalesOrders.ts, and src/hooks/useSalesDashboard.ts.

Marketing, inventory, and income operations

Marketing-storage combines inventory/product maintenance, calculators, delivery requests, logs, accounting storage, and income reporting. Representative boundaries are routes src/routes/marketing-storage/storage/index.tsx, src/routes/marketing-storage/incomes/index.tsx, and src/routes/marketing-storage/accounting-storage/index.tsx; domain UIs reside in src/components/storage/, src/components/incomes/, and src/components/accounting-storage/. Income imports have an explicit asynchronous client-side pipeline: src/services/incomeImportTask.ts, src/workers/incomeImport.worker.ts, and src/store/incomeImportTaskStore.ts.

Marketplace and livestream domains

Shopee and TikTok Shop have dedicated route spaces for income and SKU workflows: src/routes/shopee/index.tsx, src/routes/shopee/kpi/index.tsx, and src/routes/tiktokshop/index.tsx. Shopee dashboards are assembled from specialized analytics components and hooks, including src/components/incomes/shopee-dashboard/ShopeePerformanceDashboardPage.tsx, src/hooks/useShopeeDashboardOverview.ts, and src/hooks/useShopeePerformanceMetrics.ts. Livestream manages channels, personnel, calendars, goals, reports, performance, and salary through src/routes/livestream/calendar/index.tsx, src/components/livestream/LivestreamCalendarRegion.tsx, and src/hooks/useLivestreamCore.ts.

Realtime, AI, media, and deployment integrations

Socket-based updates are isolated behind src/hooks/useSocket.ts and src/hooks/useMetaSocket.ts, configured by VITE_WEB_SOCKET_URL; delivered-request channels also have a domain adapter at src/components/delivered-requests/deliveredRequestChannel.ts. AI interaction is surfaced through src/components/ai/AiChatSidebar.tsx and src/hooks/useAi.ts. Cloudinary configuration supports image uploads, likely consumed by media hooks/components such as src/hooks/useMedia.ts and src/components/common/CCrop.tsx. Deployment targets include Docker/Nginx (Dockerfile.staging, nginx.vite.conf) and static-host configuration (netlify.toml, vercel.json).