# Chat History — Ali Bin Aadi Group (ABA-WEB-P1-2026)

**Date:** July 6, 2026
**Client:** Ali Bin Aadi Group
**Prepared by:** TechWealth (شركة ثروة التقني) — Islam Ibrahim Yousef
**Stack:** Laravel 12 API · React SPA · Metronic Dashboard (v8.2.9)
**Scope:** 3 Websites + 3 Dashboards (Bilingual AR/EN)
**Default Language:** Arabic (العربية) — RTL First

---

## Decisions Made During Chat

| Decision | Choice |
|---|---|
| Dashboard architecture | Per-site dashboards (separate dashboard for each website) |
| Build order | API → Dashboard → Website |
| Website framework | Vite React JS (NOT Next.js) — client-side SPA |
| Parent directory name | AliBinAadi (under C:\wamp64\www\AliBinAadi) |
| Project structure | `api/`, `dashboard/`, `website/` under parent |
| Dashboard template | Copy from C:\wamp64\www\Qasedi\admin-dashboard (Metronic v8.2.9) |
| API version | Laravel 12 (PHP 8.2 detected; plan said Laravel 11) |

---

## Repository Structure

```
C:\wamp64\www\
├── Qasedi/
│   └── admin-dashboard/          ← Reference template for dashboard
└── AliBinAadi/
    ├── api/                      ← Laravel 12 REST API (setup complete)
    ├── dashboard/                ← React + Metronic (empty, ready for copy)
    ├── website/                  ← Vite React SPA (empty, ready for setup)
    ├── IMPLEMENTATION-PLAN.md    ← Full implementation plan
    └── CHAT-HISTORY.md           ← This file
```

---

## Phase 1 — API Setup Status

### ✅ Completed

| Step | Details |
|---|---|
| Laravel project created | `composer create-project laravel/laravel api` (v12.12.2) |
| Sanctum installed | `composer require laravel/sanctum` (v4.3.2) |
| Spatie Media Library | `composer require spatie/laravel-medialibrary` (v11.23.1) |
| Spatie Sitemap | `composer require spatie/laravel-sitemap` (v8.0.0) |
| Database created | MySQL 8 — `aba_api` database |
| .env configured | MySQL connection, Arabic locale (`APP_LOCALE=ar`) |
| Migrations ran | Default tables + personal_access_tokens + media |
| Sanctum configured | `HasApiTokens` trait added to User model |
| AppServiceProvider | `Schema::defaultStringLength(125)` fix for MySQL key length |
| VS Code opened | C:\wamp64\www\AliBinAadi opened in separate window |

### 🔲 Pending — Database Migrations (15 tables)

| # | Table | Status |
|---|---|---|
| 1 | `sites` | Pending |
| 2 | `admins` | Pending |
| 3 | `pages` | Pending |
| 4 | `sections` | Pending |
| 5 | `companies` | Pending |
| 6 | `sectors` | Pending |
| 7 | `services` | Pending |
| 8 | `projects` | Pending |
| 9 | `partners` | Pending |
| 10 | `clients` | Pending |
| 11 | `news` | Pending |
| 12 | `media_items` | Pending |
| 13 | `contact_info` | Pending |
| 14 | `contact_submissions` | Pending |
| 15 | `seo_meta` | Pending |

### 🔲 Pending — Next Steps

1. Create all 15 migrations
2. Create all models with relationships + scopes
3. Create `SetSiteKey` middleware
4. Create API Resources/Transformers
5. Create controllers (public + admin)
6. Register API routes
7. Create seeder (sites, admin, demo content)

---

## Phase 2 — Dashboard (Pending)

Copy from `C:\wamp64\www\Qasedi\admin-dashboard\`:
- Strip unrelated modules (poems, poets, karaoke, etc.)
- Rebrand for ABA
- Adapt auth to Sanctum endpoints
- Create 12 ABA modules (Pages, Sections, Companies, Sectors, Services, Projects, Partners, Clients, News, Contact, SEO)
- Integrate TipTap editor + dnd-kit for section reorder

---

## Phase 3 — Website (Pending)

Vite React SPA with:
- Arabic-first RTL
- Tailwind CSS + rtl plugin
- Section-based page rendering from API data
- 8 pages: Home, About, Sectors, Companies, CompanyProfile, MediaCenter, Contact, Legal

---

## API Architecture

```
# Public (no auth) — /api/v1/{site_key}/
GET  /home
GET  /pages
GET  /pages/{slug}
GET  /companies
GET  /companies/{slug}
GET  /sectors
GET  /services
GET  /projects
GET  /partners
GET  /clients
GET  /media/news
GET  /media/gallery
GET  /contact-info
POST /contact
GET  /seo/{slug}

# Admin (auth: sanctum) — /api/v1/admin/{site_key}/
POST   /auth/login
POST   /auth/logout
GET    /auth/me
CRUD   /pages
CRUD   /sections
POST   /sections/reorder
CRUD   /companies
CRUD   /sectors
CRUD   /services
CRUD   /projects
CRUD   /partners
CRUD   /clients
CRUD   /news
CRUD   /media-items
GET    /contact-info
PUT    /contact-info
GET    /contact-submissions
POST   /contact-submissions/{id}/mark-read
GET    /seo
PUT    /seo/{pageId}
```

---

## Qasedi Dashboard Patterns (Reference)

From `C:\wamp64\www\Qasedi\admin-dashboard\`:

- **Framework:** React 18 + TypeScript + Vite 5 + Metronic v8.2.9
- **Auth:** JWT stored in localStorage under `kt-auth-react-v` key
- **Auth endpoints:** `POST /admin/auth/login`, `GET /admin/auth/user`, `POST /admin/auth/logout`
- **API base:** `http://localhost:8000/api` (from `VITE_API_BASE_URL`)
- **Sidebar:** Declarative React components in `_metronic/layout/components/sidebar/sidebar-menu/SidebarMenuMain.tsx`
- **CRUD pattern:** `ModulePage.tsx` → `ModuleList.tsx` + `ModuleFormModal.tsx` + `core/_models.ts` + Service
- **Form handling:** Formik + Yup
- **Modals:** react-bootstrap Modal
- **Notifications:** sweetalert2
- **Data fetching:** Direct state management (not TanStack Query for list pages)
- **Route guard:** `PermissionGuard.tsx` (simplify to 2 roles for ABA: admin + editor)