# saintemiri/front-end-3-angels-water architecture

> Architecture diagram of the GitHub repository saintemiri/front-end-3-angels-water, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-30). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/saintemiri/front-end-3-angels-water
- Repository: https://github.com/saintemiri/front-end-3-angels-water

## Overview

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: [`src/App.jsx`](https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/App.jsx) (Route dispatcher), [`src/pages/OrderNow.jsx`](https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/pages/OrderNow.jsx) (Order page), [`src/components/MetricsDashboard.jsx`](https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/components/MetricsDashboard.jsx) (Dashboard views), [`src/pages/TrackOrder.jsx`](https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/pages/TrackOrder.jsx) (Order tracking)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_routing["App routing"]
  node_app["Route dispatcher<br/>[App.jsx]"]
end

subgraph group_customer["Customer experience"]
  node_home["Home page<br/>[Home.jsx]"]
  node_about["About page<br/>[About.jsx]"]
  node_services["Services page<br/>[Services.jsx]"]
  node_contact["Contact page<br/>[Contact.jsx]"]
  node_legal["Policy pages<br/>[TermsOfService.jsx]"]
  node_signup["Sign up<br/>[Signup.jsx]"]
  node_login["Customer login<br/>[Login.jsx]"]
  node_contactsupport["Contact support<br/>[ContactSupport.jsx]"]
  node_tracking["Order tracking<br/>[TrackOrder.jsx]"]
end

subgraph group_ordering["Order workflow"]
  node_order["Order page<br/>[OrderNow.jsx]"]
  node_product["Product selection"]
  node_quantity["Quantity selection"]
  node_address["Delivery address<br/>[AddressStep.jsx]"]
  node_schedule["Delivery schedule<br/>[ScheduleStep.jsx]"]
  node_payment["Payment details<br/>[PaymentStep.jsx]"]
  node_summary["Order summary<br/>[OrderSummary.jsx]"]
  node_confirmation["Order confirmation"]
  node_tracker["Delivery progress"]
end

subgraph group_staff["Staff portal"]
  node_stafflogin["Staff login<br/>[StaffLogin.jsx]"]
  node_staffportal["Staff portal<br/>[StaffPortal.jsx]"]
  node_dashboard["Dashboard views"]
  node_homefeed["Home feed<br/>[HomeFeed.jsx]"]
  node_orders["Order management<br/>[OrdersSection.jsx]"]
  node_supplies["Supply management"]
  node_settings["Settings"]
  node_adminhome["Admin home<br/>[AdminHome.jsx]"]
end

subgraph group_shared["Shared UI"]
  node_navbar["Navigation bar<br/>[Navbar.jsx]"]
  node_footer["Footer<br/>[Footer.jsx]"]
  node_authicons["Authentication icons<br/>[AuthIcons.jsx]"]
  node_featurecard["Feature card<br/>[FeatureCard.jsx]"]
  node_hero["Hero section<br/>[Hero.jsx]"]
end

node_visitor(("Customer"))
node_staffuser(("Staff user"))

node_visitor -->|"opens"| node_app
node_staffuser -->|"opens"| node_app
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_about
node_app -->|"routes to"| node_services
node_app -->|"routes to"| node_contact
node_app -->|"routes to"| node_legal
node_app -->|"routes to"| node_signup
node_app -->|"routes to"| node_login
node_app -->|"routes to"| node_contactsupport
node_app -->|"routes to"| node_order
node_app -->|"routes to"| node_tracking
node_app -->|"routes to"| node_stafflogin
node_app -->|"routes to"| node_staffportal
node_app -->|"renders"| node_navbar
node_app -->|"renders"| node_footer
node_order -->|"renders"| node_product
node_order -->|"renders"| node_quantity
node_order -->|"renders"| node_address
node_order -->|"renders"| node_schedule
node_order -->|"renders"| node_payment
node_order -->|"renders"| node_summary
node_order -->|"renders"| node_confirmation
node_tracking -->|"renders"| node_tracker
node_tracking -->|"renders"| node_summary
node_staffportal -->|"renders"| node_dashboard
node_dashboard -->|"dispatches"| node_homefeed
node_dashboard -->|"dispatches"| node_orders
node_dashboard -->|"dispatches"| node_supplies
node_dashboard -->|"dispatches"| node_settings
node_login -->|"uses"| node_authicons
node_stafflogin -->|"uses"| node_authicons

click node_app "https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/App.jsx"
click node_home "https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/pages/Home.jsx"
click node_about "https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/pages/About.jsx"
click node_services "https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/pages/Services.jsx"
click node_contact "https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/pages/Contact.jsx"
click node_legal "https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/pages/TermsOfService.jsx"
click node_signup "https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/pages/Signup.jsx"
click node_login "https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/pages/Login.jsx"
click node_contactsupport "https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/pages/ContactSupport.jsx"
click node_order "https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/pages/OrderNow.jsx"
click node_product "https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/components/order/ContainerOption.jsx"
click node_quantity "https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/components/order/QuantityStepper.jsx"
click node_address "https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/components/order/AddressStep.jsx"
click node_schedule "https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/components/order/ScheduleStep.jsx"
click node_payment "https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/components/order/PaymentStep.jsx"
click node_summary "https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/components/order/OrderSummary.jsx"
click node_confirmation "https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/components/order/OrderConfirmation.jsx"
click node_tracking "https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/pages/TrackOrder.jsx"
click node_tracker "https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/components/order/DeliveryTracker.jsx"
click node_stafflogin "https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/pages/StaffLogin.jsx"
click node_staffportal "https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/pages/StaffPortal.jsx"
click node_dashboard "https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/components/MetricsDashboard.jsx"
click node_homefeed "https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/components/HomeFeed.jsx"
click node_orders "https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/components/order/OrdersSection.jsx"
click node_supplies "https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/components/SuppliesSection.jsx"
click node_settings "https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/components/SettingsSection.jsx"
click node_adminhome "https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/pages/AdminHome.jsx"
click node_navbar "https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/components/Navbar.jsx"
click node_footer "https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/components/Footer.jsx"
click node_authicons "https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/components/AuthIcons.jsx"
click node_featurecard "https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/components/FeatureCard.jsx"
click node_hero "https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/components/Hero.jsx"

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_app,node_staffuser toneBlue
class node_home,node_about,node_services,node_contact,node_legal,node_signup,node_login,node_contactsupport,node_tracking toneAmber
class node_order,node_product,node_quantity,node_address,node_schedule,node_payment,node_summary,node_confirmation,node_tracker toneMint
class node_stafflogin,node_staffportal,node_dashboard,node_homefeed,node_orders,node_supplies,node_settings,node_adminhome toneRose
class node_navbar,node_footer,node_authicons,node_featurecard,node_hero,node_visitor toneIndigo
```

## Components

### App routing

- [Route dispatcher](https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/App.jsx): `src/App.jsx`

### Customer experience

- [Home page](https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/pages/Home.jsx): `src/pages/Home.jsx`
- [About page](https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/pages/About.jsx): `src/pages/About.jsx`
- [Services page](https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/pages/Services.jsx): `src/pages/Services.jsx`
- [Contact page](https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/pages/Contact.jsx): `src/pages/Contact.jsx`
- [Policy pages](https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/pages/TermsOfService.jsx): `src/pages/TermsOfService.jsx`
- [Sign up](https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/pages/Signup.jsx): `src/pages/Signup.jsx`
- [Customer login](https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/pages/Login.jsx): `src/pages/Login.jsx`
- [Contact support](https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/pages/ContactSupport.jsx): `src/pages/ContactSupport.jsx`
- [Order tracking](https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/pages/TrackOrder.jsx): `src/pages/TrackOrder.jsx`

### Order workflow

- [Order page](https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/pages/OrderNow.jsx): `src/pages/OrderNow.jsx`
- [Product selection](https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/components/order/ContainerOption.jsx): `src/components/order/ContainerOption.jsx`
- [Quantity selection](https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/components/order/QuantityStepper.jsx): `src/components/order/QuantityStepper.jsx`
- [Delivery address](https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/components/order/AddressStep.jsx): `src/components/order/AddressStep.jsx`
- [Delivery schedule](https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/components/order/ScheduleStep.jsx): `src/components/order/ScheduleStep.jsx`
- [Payment details](https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/components/order/PaymentStep.jsx): `src/components/order/PaymentStep.jsx`
- [Order summary](https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/components/order/OrderSummary.jsx): `src/components/order/OrderSummary.jsx`
- [Order confirmation](https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/components/order/OrderConfirmation.jsx): `src/components/order/OrderConfirmation.jsx`
- [Delivery progress](https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/components/order/DeliveryTracker.jsx): `src/components/order/DeliveryTracker.jsx`

### Staff portal

- [Staff login](https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/pages/StaffLogin.jsx): `src/pages/StaffLogin.jsx`
- [Staff portal](https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/pages/StaffPortal.jsx): `src/pages/StaffPortal.jsx`
- [Dashboard views](https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/components/MetricsDashboard.jsx): `src/components/MetricsDashboard.jsx`
- [Home feed](https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/components/HomeFeed.jsx): `src/components/HomeFeed.jsx`
- [Order management](https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/components/order/OrdersSection.jsx): `src/components/order/OrdersSection.jsx`
- [Supply management](https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/components/SuppliesSection.jsx): `src/components/SuppliesSection.jsx`
- [Settings](https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/components/SettingsSection.jsx): `src/components/SettingsSection.jsx`
- [Admin home](https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/pages/AdminHome.jsx): `src/pages/AdminHome.jsx`

### Shared UI

- [Navigation bar](https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/components/Navbar.jsx): `src/components/Navbar.jsx`
- [Footer](https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/components/Footer.jsx): `src/components/Footer.jsx`
- [Authentication icons](https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/components/AuthIcons.jsx): `src/components/AuthIcons.jsx`
- [Feature card](https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/components/FeatureCard.jsx): `src/components/FeatureCard.jsx`
- [Hero section](https://github.com/saintemiri/front-end-3-angels-water/blob/master/src/components/Hero.jsx): `src/components/Hero.jsx`

### Other components

- **Customer**
- **Staff user**

## Connections

- Customer → Route dispatcher: opens (evidence: `src/App.jsx`)
- Staff user → Route dispatcher: opens (evidence: `src/App.jsx`)
- Route dispatcher → Home page: routes to (evidence: `src/App.jsx`)
- Route dispatcher → About page: routes to (evidence: `src/App.jsx`)
- Route dispatcher → Services page: routes to (evidence: `src/App.jsx`)
- Route dispatcher → Contact page: routes to (evidence: `src/App.jsx`)
- Route dispatcher → Policy pages: routes to (evidence: `src/App.jsx`)
- Route dispatcher → Sign up: routes to (evidence: `src/App.jsx`)
- Route dispatcher → Customer login: routes to (evidence: `src/App.jsx`)
- Route dispatcher → Contact support: routes to (evidence: `src/App.jsx`)
- Route dispatcher → Order page: routes to (evidence: `src/App.jsx`)
- Route dispatcher → Order tracking: routes to (evidence: `src/App.jsx`)
- Route dispatcher → Staff login: routes to (evidence: `src/App.jsx`)
- Route dispatcher → Staff portal: routes to (evidence: `src/App.jsx`)
- Route dispatcher → Navigation bar: renders (evidence: `src/App.jsx`)
- Route dispatcher → Footer: renders (evidence: `src/App.jsx`)
- Order page → Product selection: renders (evidence: `src/pages/OrderNow.jsx`)
- Order page → Quantity selection: renders (evidence: `src/pages/OrderNow.jsx`)
- Order page → Delivery address: renders (evidence: `src/pages/OrderNow.jsx`)
- Order page → Delivery schedule: renders (evidence: `src/pages/OrderNow.jsx`)
- Order page → Payment details: renders (evidence: `src/pages/OrderNow.jsx`)
- Order page → Order summary: renders (evidence: `src/pages/OrderNow.jsx`)
- Order page → Order confirmation: renders (evidence: `src/pages/OrderNow.jsx`)
- Order tracking → Delivery progress: renders (evidence: `src/pages/TrackOrder.jsx`)
- Order tracking → Order summary: renders (evidence: `src/pages/TrackOrder.jsx`)
- Staff portal → Dashboard views: renders (evidence: `src/pages/StaffPortal.jsx`)
- Dashboard views → Home feed: dispatches (evidence: `src/components/MetricsDashboard.jsx`)
- Dashboard views → Order management: dispatches (evidence: `src/components/MetricsDashboard.jsx`)
- Dashboard views → Supply management: dispatches (evidence: `src/components/MetricsDashboard.jsx`)
- Dashboard views → Settings: dispatches (evidence: `src/components/MetricsDashboard.jsx`)
- Customer login → Authentication icons: uses (evidence: `src/pages/Login.jsx`)
- Staff login → Authentication icons: uses (evidence: `src/pages/StaffLogin.jsx`)