# CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

## Commands

```bash
npm start          # Start development server
npm run build      # Production build (runs update-build.js first, then react-scripts build)
npm test           # Run tests
```

No separate lint command — ESLint is handled by `react-scripts` (using `react-app` preset).

## Architecture Overview

**Kabseh Dashboard** is a multi-role React SPA for a food delivery/restaurant management platform. Roles: `admin`, `manager`, `seller`, `moderator`, `deliveryman`, `waiter`.

### Tech Stack

- **React 17** + **React Router v6** (lazy-loaded routes)
- **Redux Toolkit** + **redux-persist** (selective persistence of `auth`, `globalSettings`, `theme`, `orders`, `todo` slices)
- **Ant Design v4** for UI components; `ConfigProvider` wraps the app for RTL/LTR and locale
- **Axios** with custom interceptors (`src/services/request.js`) — adds Bearer token and `lang` param on every GET; handles 401/403 by clearing auth state
- **i18next** with backend loading from `/api/v1/translations`; supports RTL languages

### Directory Structure

```
src/
  app.js              # BrowserRouter, ProtectedRoute, role-based layouts
  providers.js        # Ant Design ConfigProvider (theme direction, locale, document title)
  redux/
    store.js          # configureStore with persist config
    slices/           # 140+ domain slices (auth, orders, shop, reports, etc.)
  routes/
    index.js          # AllRoutes array — merged admin/seller/waiter route objects
  services/
    request.js        # Axios instance (16s timeout, auth interceptor)
    requestWithoutTimeout.js
    admin/            # Admin-specific API service modules
    seller/           # Seller-specific API service modules
  views/              # Page-level components organized by domain
  components/         # 70+ shared/reusable components
  helpers/            # Custom hooks, formatters, utility functions
  configs/
    app-global.js     # API endpoints and credentials from .env
    menu-config.js    # Sidebar menu structure for each role
```

### Key Patterns

**Services** follow a consistent shape — every domain service (e.g. `services/order.js`) exports `getAll`, `getById`, `create`, `update`, `delete` methods using the shared Axios instance.

**Redux slices** use `createAsyncThunk` for data fetching. Slices manage `loading`, `error`, and `data` states. Components dispatch thunks directly.

**Routes** are defined as arrays of `{ path, component }` objects per role, merged into `AllRoutes` in `src/routes/index.js`, then rendered with `AllRoutes.map(...)` inside a single `<Routes>` block.

**Translations** are loaded at runtime from the backend — do not hardcode user-facing strings; use `t('key')` from `react-i18next`.

**Environment** — API base URL, Firebase config, Google Maps key, and reCAPTCHA key all come from `.env` via `src/configs/app-global.js`. Never commit `.env`.

### Role-Based Layout

`src/app.js` renders either `AppLayout` or `WelcomeLayout` based on auth state. `AppLayout` (`src/layout/app-layout.js`) fetches shop/currency on mount based on user role, renders Sidebar + TabMenu, and uses `<Outlet>` for nested routes.