How saintemiri/front-end-3-angels-water works
3 Angels Water Station is a UI-only React frontend with mock data and no backend. The main customer journey is navigating the public site, configuring a delivery order through product, address, schedule, and payment steps, then viewing confirmation or tracking a mock order. A separate staff portal exposes dashboard, order, supply, and settings views. The graph reflects documented routes and sampled imports; unsampled page internals and any backend integrations are not inferred.
Main entry points: App.jsx Route dispatcher · OrderNow.jsx Order page · MetricsDashboard.jsx Dashboard views · TrackOrder.jsx Order tracking
Components 34
App routing
- Route dispatcher
src/App.jsx
Customer experience
- Home page
src/pages/Home.jsx - About page
src/pages/About.jsx - Services page
src/pages/Services.jsx - Contact page
src/pages/Contact.jsx - Policy pages
src/pages/TermsOfService.jsx - Sign up
src/pages/Signup.jsx - Customer login
src/pages/Login.jsx - Contact support
src/pages/ContactSupport.jsx - Order tracking
src/pages/TrackOrder.jsx
Order workflow
- Order page
src/pages/OrderNow.jsx - Product selection
src/components/order/ContainerOption.jsx - Quantity selection
src/components/order/QuantityStepper.jsx - Delivery address
src/components/order/AddressStep.jsx - Delivery schedule
src/components/order/ScheduleStep.jsx - Payment details
src/components/order/PaymentStep.jsx - Order summary
src/components/order/OrderSummary.jsx - Order confirmation
src/components/order/OrderConfirmation.jsx - Delivery progress
src/components/order/DeliveryTracker.jsx
Staff portal
- Staff login
src/pages/StaffLogin.jsx - Staff portal
src/pages/StaffPortal.jsx - Dashboard views
src/components/MetricsDashboard.jsx - Home feed
src/components/HomeFeed.jsx - Order management
src/components/order/OrdersSection.jsx - Supply management
src/components/SuppliesSection.jsx - Settings
src/components/SettingsSection.jsx - Admin home
src/pages/AdminHome.jsx
Shared UI
- Navigation bar
src/components/Navbar.jsx - Footer
src/components/Footer.jsx - Authentication icons
src/components/AuthIcons.jsx - Feature card
src/components/FeatureCard.jsx - Hero section
src/components/Hero.jsx
Other components
- Customer
- Staff user
Connections 32
- Customer → Route dispatcher: opens
src/App.jsx - Staff user → Route dispatcher: opens
src/App.jsx - Route dispatcher → Home page: routes to
src/App.jsx - Route dispatcher → About page: routes to
src/App.jsx - Route dispatcher → Services page: routes to
src/App.jsx - Route dispatcher → Contact page: routes to
src/App.jsx - Route dispatcher → Policy pages: routes to
src/App.jsx - Route dispatcher → Sign up: routes to
src/App.jsx - Route dispatcher → Customer login: routes to
src/App.jsx - Route dispatcher → Contact support: routes to
src/App.jsx - Route dispatcher → Order page: routes to
src/App.jsx - Route dispatcher → Order tracking: routes to
src/App.jsx - Route dispatcher → Staff login: routes to
src/App.jsx - Route dispatcher → Staff portal: routes to
src/App.jsx - Route dispatcher → Navigation bar: renders
src/App.jsx - Route dispatcher → Footer: renders
src/App.jsx - Order page → Product selection: renders
src/pages/OrderNow.jsx - Order page → Quantity selection: renders
src/pages/OrderNow.jsx - Order page → Delivery address: renders
src/pages/OrderNow.jsx - Order page → Delivery schedule: renders
src/pages/OrderNow.jsx - Order page → Payment details: renders
src/pages/OrderNow.jsx - Order page → Order summary: renders
src/pages/OrderNow.jsx - Order page → Order confirmation: renders
src/pages/OrderNow.jsx - Order tracking → Delivery progress: renders
src/pages/TrackOrder.jsx - Order tracking → Order summary: renders
src/pages/TrackOrder.jsx - Staff portal → Dashboard views: renders
src/pages/StaffPortal.jsx - Dashboard views → Home feed: dispatches
src/components/MetricsDashboard.jsx - Dashboard views → Order management: dispatches
src/components/MetricsDashboard.jsx - Dashboard views → Supply management: dispatches
src/components/MetricsDashboard.jsx - Dashboard views → Settings: dispatches
src/components/MetricsDashboard.jsx - Customer login → Authentication icons: uses
src/pages/Login.jsx - Staff login → Authentication icons: uses
src/pages/StaffLogin.jsx