# Tower Paints Frontend

React 18 + Vite dashboard for the Tower Paints admin and partner portals.

## Stack

- React 18 + React Router v6 (data router)
- Redux Toolkit + RTK Query
- Axios (via a shared `apiClient` and `axiosBaseQuery`)
- Tailwind CSS + custom design tokens
- Recharts for charts
- react-hook-form + zod for forms
- react-hot-toast for notifications

## Getting started

1. **Install dependencies**

   ```bash
   cd tower-paints-frontend
   npm install
   ```

2. **Environment variables**

   Copy the example env file and adjust the API base URL:

   ```bash
   cp .env.example .env
   ```

   Then edit `.env`:

   ```text
   VITE_API_BASE_URL=http://localhost:8000
   ```

3. **Run the dev server**

   ```bash
   npm run dev
   ```

   Vite will start on `http://localhost:5173` by default.

## Theming

- The app supports **dark** (default) and **light** themes.
- The initial theme is resolved before React mounts via an inline script in `index.html`, preventing a flash of the wrong theme.
- Runtime theme state is stored in Redux (`uiSlice`) and persisted in `localStorage`.
- The `ThemeToggle` pill in the top navigation toggles the theme and updates the `<html>` class so Tailwind’s `dark` utilities apply correctly.

## Data layer

- All HTTP traffic goes through `src/services/apiClient.js`, which:
  - injects an `Authorization: Bearer` token from `tokenService`
  - handles `401` responses by clearing auth state
- RTK Query API slices live in `src/store/api/`:
  - `adminApi`, `analyticsApi`, `salesApi`, `partnerApi`
  - each uses `axiosBaseQuery` and tag-based caching for invalidation
- Domain helpers (e.g. `authService`, `salesService`, `adminService`) wrap common REST calls when RTK Query is not needed directly.

## State and filters

- Redux store (`src/store/index.js`) combines:
  - `auth`, `ui`, `filters` slices
  - RTK Query API reducers and middleware
- `filtersSlice` tracks:
  - `dateRange`, `status`, `search`, `category`, `warehouse`, `page`, `perPage`, `sortBy`, `sortDirection`
- `useFilters` hook exposes convenient setters so feature pages (sales, inventory, analytics) can scope queries by warehouse and other filters.

## Layout and responsiveness

- The main shell (`AppLayout`) uses a 12-column responsive grid:
  - sidebar collapses on mobile, becomes a drawer
  - top nav shows breadcrumbs, theme toggle, notifications, and low-stock alerts
- All dashboard views (admin and partner) are built with Tailwind’s responsive utilities and have been designed to degrade gracefully down to small screens.

## Testing the UI

- **Responsiveness**: shrink the viewport to confirm sidebars collapse, tables scroll horizontally, and KPI cards reflow into a single column on small screens.
- **Theme toggle**:
  - toggle the pill in the header and confirm the background, typography, and charts adapt between light/dark.
  - reload the page to confirm the chosen theme persists (no flash of incorrect theme).

