# Trackofy V2 — Claude Code Project Context

## What This Project Is

Fleet tracking & telematics SaaS platform. Angular 19 frontend connecting to a dual PHP + Laravel backend. Real-time vehicle tracking, geofencing, alerts, dashboards, reports, video telematics, BMS insights, and multi-tenant branding.

## Key Facts

- **Framework:** Angular 19, fully standalone components (no NgModules)
- **UI:** Angular Material 19 + Tailwind CSS 4
- **Charts:** ngx-echarts (Apache ECharts)
- **Maps:** Google Maps + OLA Maps
- **Dashboard:** angular-gridster2 widget grid
- **State:** BehaviorSubject + Angular Signals (mixed)
- **Auth:** JWT in localStorage via authInterceptor — no refresh token
- **APIs:** PHP (`/trackofy_api_new_live`) + Laravel (`beta3.trackofy.com`)
- **Exports:** jsPDF + xlsx via ExportService
- **Dark mode:** Tailwind `dark:` class toggled on `<html>`

## Folder Layout

```
src/app/
├── core/          ← guards, interceptors, models, services (all providedIn root)
├── layouts/       ← 5 layout variants (auth, with-map, without-map, public x2)
├── map/           ← map component + panels
├── panels/        ← feature pages (dashboard, settings, reports, alerts, etc.)
├── shared/        ← reusable components (table, dialogs, navbar, sidebar, toast)
├── pipes/         ← na, truncate, splitIntoColumns, extractImageData
├── app.routes.ts  ← 3 lazy-loaded route groups (auth / with-map / without-map)
└── app.config.ts  ← providers, interceptors, app initializer
```

## Routing Groups

| Group | Layout | Guard | Examples |
|---|---|---|---|
| Auth | AuthLayoutComponent | guestGuard | login, forgot-password |
| With Map | LayoutComponent | authGuard | home, tracking, reports |
| Without Map | LayoutWithoutMapComponent | authGuard | dashboard, settings, profile |
| Public | PublicLayoutComponent | geolinkGuard | geolink sharing |

All routes use `loadComponent` (lazy-loaded standalone components).

## Critical Rules

1. **All components are standalone** — never create NgModules.
2. **Never attach tokens manually** — `authInterceptor` handles all Bearer headers.
3. **Always use `app-table`** — never build raw `mat-table` from scratch.
4. **Always use `ConfirmDialogComponent`** for destructive actions.
5. **Always use `ToastService`** for user feedback — never `alert()`.
6. **Always use `SpinnerService`** for loading states.
7. **Reactive forms only** — no template-driven forms.
8. **`providedIn: 'root'`** for all services.
9. **Models use `I` prefix** — `IFeatureName`, never classes.
10. **Dark mode** — add `dark:` Tailwind variants on all color classes.

## Environment / API

```typescript
// src/env.ts
export const apiUrl = 'https://beta3.trackofy.com/trackofy_api_new_live';
export const laravelApiUrl = 'https://beta3.trackofy.com';
```

## Detailed Docs

| Topic | File |
|---|---|
| Full architecture | [.claude/docs/architecture.md](.claude/docs/architecture.md) |
| Coding standards | [.claude/docs/coding-standards.md](.claude/docs/coding-standards.md) |
| Reusable components | [.claude/docs/components-inventory.md](.claude/docs/components-inventory.md) |
| API integration | [.claude/docs/api-standards.md](.claude/docs/api-standards.md) |
| Theme & UI | [.claude/docs/theme-standards.md](.claude/docs/theme-standards.md) |
| New module guide | [.claude/docs/new-module-guide.md](.claude/docs/new-module-guide.md) |
| PHP migration | [.claude/docs/migration-strategy.md](.claude/docs/migration-strategy.md) |