# avinashjgtp10/salonox_mobile architecture

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

- Interactive diagram: https://gitdiagram.com/avinashjgtp10/salonox_mobile
- Repository: https://github.com/avinashjgtp10/salonox_mobile

## Overview

SalonOX is an Expo salon-operations app for salon owners and staff. Users enter through role-specific navigation to manage appointments, clients, services and stock, staff and attendance, and sales; dashboards and reports provide operational and financial views. The tree shows a Redux middleware/service/API layering, plus local persistence for sessions and notification settings. Edges are limited to documented routing and calls visible in sampled source; unsampled feature-to-service wiring is not inferred.

Main entry points: [`src/app/_layout.tsx`](https://github.com/avinashjgtp10/salonox_mobile/blob/main/src/app/_layout.tsx) (Role navigation), [`src/features/clients/screens/ClientDetailsScreen.tsx`](https://github.com/avinashjgtp10/salonox_mobile/blob/main/src/features/clients/screens/ClientDetailsScreen.tsx) (Client details screen), [`src/middleware/client/client.thunk.ts`](https://github.com/avinashjgtp10/salonox_mobile/blob/main/src/middleware/client/client.thunk.ts) (Client middleware), [`src/middleware/clientMembership/clientMembership.thunk.ts`](https://github.com/avinashjgtp10/salonox_mobile/blob/main/src/middleware/clientMembership/clientMembership.thunk.ts) (Membership middleware)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App navigation"]
  node_router["Role navigation<br/>[_layout.tsx]"]
  node_owner["Owner screens<br/>[_layout.tsx]"]
  node_staffnav["Staff screens<br/>[_layout.tsx]"]
end

subgraph group_operations["Salon operations"]
  node_appointments["Appointments"]
  node_clients["Client profiles"]
  node_staff["Team and attendance"]
  node_attendance["Attendance"]
  node_clientdetail["Client details screen"]
end

subgraph group_commerce["Sales and catalog"]
  node_catalog["Services and catalog<br/>[index.tsx]"]
  node_stock["Stock and consumables<br/>[index.tsx]"]
  node_sale["Quick sale"]
  node_checkout["Checkout<br/>[CheckoutSheet.tsx]"]
end

subgraph group_insight["Insights and alerts"]
  node_dashboard["Dashboard<br/>[dashboard.tsx]"]
  node_reports["Reports"]
  node_notifications["Notifications<br/>[notifications.tsx]"]
end

subgraph group_platform["State and integrations"]
  node_clientmw["Client middleware<br/>[client.thunk.ts]"]
  node_membershipmw["Membership middleware"]
  node_state["Redux state<br/>[index.ts]"]
  node_services["Service clients"]
  node_api["API endpoints<br/>[index.ts]"]
  node_session[("Session storage<br/>[tokenStorage.ts]")]
  node_notifstorage[("Notification preferences")]
end

node_user(("Owner or staff"))

node_user -->|"opens app"| node_router
node_router -->|"routes owners"| node_owner
node_router -->|"routes staff"| node_staffnav
node_clientdetail -->|"dispatches client requests"| node_clientmw
node_clientdetail -->|"dispatches membership requests"| node_membershipmw
node_clientmw -->|"updates client state"| node_state
node_membershipmw -->|"updates membership state"| node_state

click node_router "https://github.com/avinashjgtp10/salonox_mobile/blob/main/src/app/_layout.tsx"
click node_owner "https://github.com/avinashjgtp10/salonox_mobile/blob/main/src/app/(tabs)/_layout.tsx"
click node_staffnav "https://github.com/avinashjgtp10/salonox_mobile/blob/main/src/app/(staff)/_layout.tsx"
click node_appointments "https://github.com/avinashjgtp10/salonox_mobile/tree/main/src/features/appointments/screens"
click node_clients "https://github.com/avinashjgtp10/salonox_mobile/tree/main/src/features/clients/screens"
click node_staff "https://github.com/avinashjgtp10/salonox_mobile/tree/main/src/features/staff/screens"
click node_attendance "https://github.com/avinashjgtp10/salonox_mobile/tree/main/src/features/attendance/screens"
click node_catalog "https://github.com/avinashjgtp10/salonox_mobile/blob/main/src/app/catalog/index.tsx"
click node_stock "https://github.com/avinashjgtp10/salonox_mobile/blob/main/src/app/stock/index.tsx"
click node_sale "https://github.com/avinashjgtp10/salonox_mobile/blob/main/src/features/quickSale/screens/QuickSaleScreen.tsx"
click node_checkout "https://github.com/avinashjgtp10/salonox_mobile/blob/main/src/features/quickSale/components/CheckoutSheet.tsx"
click node_dashboard "https://github.com/avinashjgtp10/salonox_mobile/blob/main/src/app/(tabs)/dashboard.tsx"
click node_reports "https://github.com/avinashjgtp10/salonox_mobile/blob/main/src/features/reports/screens/reports-home-screen.tsx"
click node_notifications "https://github.com/avinashjgtp10/salonox_mobile/blob/main/src/app/notifications.tsx"
click node_clientdetail "https://github.com/avinashjgtp10/salonox_mobile/blob/main/src/features/clients/screens/ClientDetailsScreen.tsx"
click node_clientmw "https://github.com/avinashjgtp10/salonox_mobile/blob/main/src/middleware/client/client.thunk.ts"
click node_membershipmw "https://github.com/avinashjgtp10/salonox_mobile/blob/main/src/middleware/clientMembership/clientMembership.thunk.ts"
click node_state "https://github.com/avinashjgtp10/salonox_mobile/blob/main/src/store/index.ts"
click node_services "https://github.com/avinashjgtp10/salonox_mobile/tree/main/src/services"
click node_api "https://github.com/avinashjgtp10/salonox_mobile/blob/main/src/services/api/endpoints/index.ts"
click node_session "https://github.com/avinashjgtp10/salonox_mobile/blob/main/src/services/tokenStorage.ts"
click node_notifstorage "https://github.com/avinashjgtp10/salonox_mobile/blob/main/src/services/notificationPreferencesStorage.ts"

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_router,node_owner,node_staffnav toneBlue
class node_appointments,node_clients,node_staff,node_attendance,node_clientdetail toneAmber
class node_catalog,node_stock,node_sale,node_checkout toneMint
class node_dashboard,node_reports,node_notifications toneRose
class node_clientmw,node_membershipmw,node_state,node_services,node_api,node_session,node_notifstorage,node_user toneIndigo
```

## Components

### App navigation

- [Role navigation](https://github.com/avinashjgtp10/salonox_mobile/blob/main/src/app/_layout.tsx): `src/app/_layout.tsx`
- [Owner screens](https://github.com/avinashjgtp10/salonox_mobile/blob/main/src/app/(tabs)/_layout.tsx): `src/app/(tabs)/_layout.tsx`
- [Staff screens](https://github.com/avinashjgtp10/salonox_mobile/blob/main/src/app/(staff)/_layout.tsx): `src/app/(staff)/_layout.tsx`

### Salon operations

- [Appointments](https://github.com/avinashjgtp10/salonox_mobile/tree/main/src/features/appointments/screens): `src/features/appointments/screens`
- [Client profiles](https://github.com/avinashjgtp10/salonox_mobile/tree/main/src/features/clients/screens): `src/features/clients/screens`
- [Team and attendance](https://github.com/avinashjgtp10/salonox_mobile/tree/main/src/features/staff/screens): `src/features/staff/screens`
- [Attendance](https://github.com/avinashjgtp10/salonox_mobile/tree/main/src/features/attendance/screens): `src/features/attendance/screens`
- [Client details screen](https://github.com/avinashjgtp10/salonox_mobile/blob/main/src/features/clients/screens/ClientDetailsScreen.tsx): `src/features/clients/screens/ClientDetailsScreen.tsx`

### Sales and catalog

- [Services and catalog](https://github.com/avinashjgtp10/salonox_mobile/blob/main/src/app/catalog/index.tsx): `src/app/catalog/index.tsx`
- [Stock and consumables](https://github.com/avinashjgtp10/salonox_mobile/blob/main/src/app/stock/index.tsx): `src/app/stock/index.tsx`
- [Quick sale](https://github.com/avinashjgtp10/salonox_mobile/blob/main/src/features/quickSale/screens/QuickSaleScreen.tsx): `src/features/quickSale/screens/QuickSaleScreen.tsx`
- [Checkout](https://github.com/avinashjgtp10/salonox_mobile/blob/main/src/features/quickSale/components/CheckoutSheet.tsx): `src/features/quickSale/components/CheckoutSheet.tsx`

### Insights and alerts

- [Dashboard](https://github.com/avinashjgtp10/salonox_mobile/blob/main/src/app/(tabs)/dashboard.tsx): `src/app/(tabs)/dashboard.tsx`
- [Reports](https://github.com/avinashjgtp10/salonox_mobile/blob/main/src/features/reports/screens/reports-home-screen.tsx): `src/features/reports/screens/reports-home-screen.tsx`
- [Notifications](https://github.com/avinashjgtp10/salonox_mobile/blob/main/src/app/notifications.tsx): `src/app/notifications.tsx`

### State and integrations

- [Client middleware](https://github.com/avinashjgtp10/salonox_mobile/blob/main/src/middleware/client/client.thunk.ts): `src/middleware/client/client.thunk.ts`
- [Membership middleware](https://github.com/avinashjgtp10/salonox_mobile/blob/main/src/middleware/clientMembership/clientMembership.thunk.ts): `src/middleware/clientMembership/clientMembership.thunk.ts`
- [Redux state](https://github.com/avinashjgtp10/salonox_mobile/blob/main/src/store/index.ts): `src/store/index.ts`
- [Service clients](https://github.com/avinashjgtp10/salonox_mobile/tree/main/src/services): `src/services`
- [API endpoints](https://github.com/avinashjgtp10/salonox_mobile/blob/main/src/services/api/endpoints/index.ts): `src/services/api/endpoints/index.ts`
- [Session storage](https://github.com/avinashjgtp10/salonox_mobile/blob/main/src/services/tokenStorage.ts): `src/services/tokenStorage.ts`
- [Notification preferences](https://github.com/avinashjgtp10/salonox_mobile/blob/main/src/services/notificationPreferencesStorage.ts): `src/services/notificationPreferencesStorage.ts`

### Other components

- **Owner or staff**

## Connections

- Owner or staff → Role navigation: opens app
- Role navigation → Owner screens: routes owners
- Role navigation → Staff screens: routes staff
- Client details screen → Client middleware: dispatches client requests
- Client details screen → Membership middleware: dispatches membership requests
- Client middleware → Redux state: updates client state
- Membership middleware → Redux state: updates membership state