# CLAUDE.md

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

## Commands

```bash
npm run dev       # Start dev server with HMR (Vite)
npm run build     # Production build to dist/
npm run preview   # Preview production build locally
npm run lint      # ESLint check
```

Tests exist in `src/**/__tests__/` and `src/test/` but are mostly placeholders — no test runner is configured.

## Project Overview

Russian-language site for a ballistic window film company (Осколкам.Нет). Two completely separate apps live in the same repo:

1. **Public landing page** — marketing site at `/`
2. **Admin panel** — CRM at `/admin/*` (Supabase auth required)

There's also a public **order tracking portal** at `/track/:token`.

## Architecture

### Routing

`App.jsx` uses React Router with lazy-loaded routes. All admin routes are nested under `ProtectedRoute` → `AdminLayout`. The public site has no routing — it's one scrollable page.

### Public Landing Page

`src/components/` — sections composed in `App.jsx` in this order:
`Navbar → Hero → PhysicsOfSafety → UseCases → TrustBar → Comparison → Estimator → LeadForm → Footer`

- All styling is **inline `style={{}}`** — no CSS modules, no Tailwind. Utility classes (`.glass-panel`, `.btn-primary`, `.btn-outline`, `.container`, `.text-accent-blue/yellow/orange`) are defined in `src/index.css`.
- Animations use `framer-motion` (`motion.*` with `whileInView`, `whileHover`, `whileTap`).
- Icons from `lucide-react`.
- CSS custom properties in `:root` in `index.css` are the design tokens — always use `var(--...)` for colors and spacing.
- `Estimator.jsx` reads prices from Supabase (`usePricing` hook) rather than hardcoding them. Fallback is 200µm=2000₽/m², 300µm=3000₽/m².
- `LeadForm.jsx` POSTs to Telegram Bot API using `VITE_TG_BOT_TOKEN` / `VITE_TG_CHAT_ID` from `.env`.

### Admin Panel

`src/admin/` — scoped under `.admin-panel` CSS class (light theme tokens, see `index.css`). All admin styling is also inline `style={{}}` using `var(--bg-*)`, `var(--border-*)`, `var(--text-*)` tokens.

**Layout:** `AdminLayout.jsx` wraps everything in `ToastProvider`, renders the `Sidebar`, header (with push-bell, search, new-order button), and `<Outlet>`. On mobile, sidebar is a drawer toggled by hamburger.

**Pages and their hooks:**
| Route | Component | Hook |
|---|---|---|
| `/admin/kanban` | `KanbanBoard` | `useOrders` |
| `/admin/analytics` | `AnalyticsPage` | `useAnalyticsPage` |
| `/admin/calendar` | `CalendarPage` | `useCalendar` |
| `/admin/clients` | `ClientsPage` | `useClients` |
| `/admin/archive` | `ArchivePage` | `useArchive` |
| `/admin/settings` | `SettingsPage` | `useSettings` |
| `/admin/users` | `UserManagementPage` | `useAdminUsers` |

**`useOrders`** is the core hook — fetches all orders, subscribes to realtime changes via `supabase.channel`, exposes `updateStatus`, `createOrder`, `updateOrder`, `refetch`. Every mutation also writes to `order_events` table for the status timeline.

**`OrderModal`** handles both create and edit. Key patterns:
- `toPayload()` converts form state to DB payload — empty strings become `null` for numeric fields (`area`, `final_cost`).
- `scheduled_at` is stored as raw `YYYY-MM-DDTHH:mm` in form state and converted to ISO only in `toPayload()`. Never pass it through `new Date()` in `onChange` — this breaks datetime-local inputs.
- Drag-and-drop in `KanbanBoard` uses `@dnd-kit/core`.

**Overdue orders:** `isOverdue = scheduled_at < now && status !== 'закрыт'` — highlighted in both `OrderCard` (red border) and `CalendarPage` chips.

### Shared Hooks

- `usePricing` — reads `price_200`/`price_300` from `settings` table. Used by `Estimator` and `OrderModal`.
- `useIsMobile` — `window.innerWidth < 768` with resize listener.
- `usePushNotifications` — wraps Web Push API, stores subscription in `push_subscriptions` table via `push-notify` Edge Function.
- `useToast` — from `ToastContext`, call `addToast(message, type)` where type is `'success' | 'error' | 'info'`.

### Supabase

`src/lib/supabase.js` — single client instance, reads `VITE_SUPABASE_URL` and `VITE_SUPABASE_ANON_KEY`.

**Database tables:** `orders`, `order_events`, `order_comments`, `order_photos` (Storage bucket), `push_subscriptions`, `settings`, `clients` (view).

**Edge Functions** (`supabase/functions/`):
- `push-notify` — sends Web Push to all subscribers. Called on status change.
- `send-reminders` — scheduled every 15 min; pushes reminders for orders with `scheduled_at` in the next 50–70 min. Uses `reminder_sent_at` guard to prevent duplicates.
- `invite-admin-user`, `list-admin-users`, `delete-admin-user` — user management via Supabase Admin API (service role).

All hooks use an `isMounted` / `active` guard pattern to prevent state updates after unmount.

### PWA

`vite-plugin-pwa` with `injectManifest` strategy (not `generateSW`) — required because `src/sw.js` has a custom push event handler alongside Workbox precaching. The built service worker is output as `dist/sw.js`.

### Deployment

Docker multi-stage build: `node:20-alpine` builds the Vite app (VITE_ vars injected as `ARG`), `caddy:2-alpine` serves `dist/`. The `Caddyfile` uses `{$DOMAIN:localhost}` — setting `DOMAIN` to a real hostname enables automatic HTTPS via Let's Encrypt.

```bash
# On server
cd /opt/glass && git pull && docker compose up -d --build
```

Production server: `2.26.96.212`, repo at `/opt/glass`. Gitea: `gitea.houseassassin.keenetic.pro/houseassassin/glass`.