# Ali Bin Aadi Group — Implementation Plan

**Project:** ABA-WEB-P1-2026 | **Version:** 1.0 | **July 2026**

---

## Repository Structure

```
C:\wamp64\www\
├── aba-api/               # Laravel 11 REST API (shared backend)
├── aba-dashboard/         # React + Metronic dashboard (per-site, starting with main)
└── aba-main-website/      # Vite React SPA (public-facing main group website)
```

---

## Phase 1 — Laravel API (`aba-api/`)

### Setup

```bash
composer create-project laravel/laravel aba-api
cd aba-api
composer require laravel/sanctum
composer require spatie/laravel-medialibrary
composer require spatie/laravel-sitemap
```

### Database Migrations (14 tables)

| # | Table | Key Columns |
|---|---|---|
| 1 | `sites` | id, key (main/4b/itelecom), name_ar, name_en, domain, settings_json |
| 2 | `admins` | id, name, email, password, role (admin/editor), site_access_json (Sanctum auth) |
| 3 | `pages` | id, site_id (FK), slug, title_ar, title_en, is_published |
| 4 | `sections` | id, page_id (FK), section_type, title_ar, title_en, body_ar, body_en, order, is_visible |
| 5 | `companies` | id, site_id (FK), slug, name_ar, name_en, activity_ar, activity_en, logo, website |
| 6 | `sectors` | id, site_id (FK), name_ar, name_en, description_ar, description_en, icon, order |
| 7 | `services` | id, site_id (FK), company_id (FK nullable), name_ar, name_en, desc_ar, desc_en, icon, order |
| 8 | `projects` | id, site_id (FK), company_id (FK nullable), title_ar, title_en, desc_ar, desc_en, image |
| 9 | `partners` | id, site_id (FK), company_id (FK nullable), name, logo, url, order |
| 10 | `clients` | id, site_id (FK), company_id (FK nullable), name, logo, order |
| 11 | `news` | id, site_id (FK), title_ar, title_en, body_ar, body_en, image, published_at, is_published |
| 12 | `media_items` | id, site_id (FK), type, title_ar, title_en, file_path |
| 13 | `contact_info` | id, site_id (FK), company_id (FK nullable), phone, email, address_ar, address_en, social_json |
| 14 | `contact_submissions` | id, site_id (FK), name, email, phone, message, is_read, submitted_at |
| 15 | `seo_meta` | id, page_id (FK), title_ar, title_en, description_ar, description_en, keywords, og_image, slug |

### Middleware: `SetSiteKey`

- Reads `X-Site-Key` header or `site_key` query param
- Validates against `sites` table
- Sets `$request->site_key` and `app()->setLocale()` based on `?lang=`

### Controllers

**Public (no auth):**

| Controller | Endpoints |
|---|---|
| `HomeController` | `index()` — all home sections |
| `PageController` | `index()`, `show($slug)` |
| `CompanyController` | `index()`, `show($slug)` |
| `SectorController` | `index()` |
| `ServiceController` | `index()` |
| `ProjectController` | `index()` |
| `PartnerController` | `index()` |
| `ClientController` | `index()` |
| `NewsController` | `index()` |
| `MediaController` | `gallery()` |
| `ContactController` | `info()`, `submit()` |
| `SeoController` | `show($slug)` |

**Admin (auth: sanctum):**

| Controller | Endpoints |
|---|---|
| `AuthController` | `login()`, `logout()`, `me()` |
| `Admin\PageController` | CRUD |
| `Admin\SectionController` | CRUD + `reorder()` + `toggleVisibility()` |
| `Admin\CompanyController` | CRUD + logo upload |
| `Admin\SectorController` | CRUD + icon + reorder |
| `Admin\ServiceController` | CRUD + icon + reorder |
| `Admin\ProjectController` | CRUD + image |
| `Admin\PartnerController` | CRUD + logo + reorder |
| `Admin\ClientController` | CRUD + logo + reorder |
| `Admin\NewsController` | CRUD + image |
| `Admin\MediaController` | CRUD + file upload |
| `Admin\ContactInfoController` | update |
| `Admin\ContactSubmissionController` | list, show, mark-read, delete |
| `Admin\SeoController` | update per page |

### API Routes

```
# Public — /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 — /api/v1/admin/{site_key}/ (auth:sanctum)
POST   /auth/login
POST   /auth/logout
GET    /auth/me
GET    /dashboard/stats
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}
```

### API Resources

Each resource checks `request('lang')` and returns `_ar` or `_en` fields. Arabic is default.

---

## Phase 2 — Dashboard (`aba-dashboard/`)

### Source

Copy from `C:\wamp64\www\Qasedi\admin-dashboard\` — strip unrelated modules, rebrand for ABA.

### Stripped Modules (remove)

- `poem-management/`, `poet-management/`, `album-management/`, `category-management/`
- `provider-management/`, `karaoke-management/`, `karaoke-backgrounds-management/`
- `audio-separation-management/`, `duel-management/`, `live-battle-management/`
- `live-show-management/`, `live-event-provider-management/`
- `live-event-provider-live-show-dashboard/`, `chat/`, `user-management/`
- `admin-management/`, `role-management/`, `auth-settings-management/`
- `reports/`, `notification-management/`, `billing-management/`
- `revenue-management/`, `audit-logs/`

### Kept

- `auth/` (adapt to Sanctum endpoints)
- `profile/`, `wizards/`, `accounts/`, `widgets/`, `errors/`
- Metronic core `_metronic/`

### Adaptations

| Concern | Change |
|---|---|
| Auth endpoints | `POST /api/v1/admin/auth/login`, `GET /.../me`, `POST /.../logout` |
| API base URL | `http://localhost:8000/api` |
| Auth storage key | `kt-auth-react-v` (keep same pattern) |
| Languages | Arabic first (Metronic already supports AR/EN) |
| Login page | Change title to "مجموعة علي بن عادي", subtitle to "Ali Bin Aadi Group" |
| Sidebar | Replace all items with ABA modules (Arabic labels) |
| Routing | Remove permission complexity — 2 roles: admin + editor |

### ABA Dashboard Modules (12)

| # | Module | Route | Arabic Label | Features |
|---|---|---|---|---|
| 1 | Dashboard | `/dashboard` | لوحة التحكم | Stats, recent submissions, quick links |
| 2 | Pages | `/apps/aba/pages` | إدارة الصفحات | CRUD + publish toggle |
| 3 | Sections | `/apps/aba/pages/:id/sections` | أقسام الصفحة | dnd-kit reorder, TipTap editor, visibility toggle |
| 4 | Companies | `/apps/aba/companies` | إدارة الشركات التابعة | CRUD + logo upload |
| 5 | Sectors | `/apps/aba/sectors` | إدارة القطاعات | CRUD + icon + reorder |
| 6 | Services | `/apps/aba/services` | إدارة الخدمات | CRUD + icon + reorder |
| 7 | Projects | `/apps/aba/projects` | إدارة المشاريع | CRUD + image |
| 8 | Partners | `/apps/aba/partners` | إدارة الشركاء | Logos + reorder + toggle |
| 9 | Clients | `/apps/aba/clients` | إدارة العملاء | Logos + reorder |
| 10 | News | `/apps/aba/news` | الأخبار | Rich text + image + publish |
| 11 | Contact | `/apps/aba/contact` | جهات الاتصال | Info edit + submissions inbox |
| 12 | SEO | `/apps/aba/seo` | إعدادات SEO | Per-page meta |

### New Dependencies

```json
{
  "@tiptap/react": "^2.x",
  "@tiptap/starter-kit": "^2.x",
  "@tiptap/extension-rtl": "^2.x",
  "@tiptap/extension-underline": "^2.x",
  "@tiptap/extension-text-align": "^2.x",
  "@dnd-kit/core": "^6.x",
  "@dnd-kit/sortable": "^8.x",
  "@dnd-kit/utilities": "^3.x"
}
```

### Sidebar Menu Structure (Arabic first)

```
لوحة التحكم                  /dashboard
───
إدارة المحتوى                
├── إدارة الصفحات            /apps/aba/pages
├── أقسام الصفحات            /apps/aba/pages/:id/sections
├── إدارة الخدمات            /apps/aba/services
├── إدارة المشاريع           /apps/aba/projects
───
الشركات                      
├── إدارة الشركات التابعة    /apps/aba/companies
├── إدارة القطاعات           /apps/aba/sectors
───
الشركاء والعملاء             
├── إدارة الشركاء            /apps/aba/partners
├── إدارة العملاء            /apps/aba/clients
───
المركز الإعلامي              
├── الأخبار                  /apps/aba/news
├── معرض الصور               /apps/aba/media
───
جهات الاتصال                 
├── بيانات التواصل           /apps/aba/contact-info
├── رسائل التواصل            /apps/aba/submissions
───
إعدادات SEO                  /apps/aba/seo
```

---

## Phase 3 — Main Website (`aba-main-website/`)

### Stack

- Vite 5 + React 18
- React Router v6
- Tailwind CSS + `tailwindcss-rtl`
- Axios
- `react-helmet-async`
- IBM Plex Arabic + Inter (Google Fonts)

### Structure

```
aba-main-website/
├── index.html
├── vite.config.js
├── tailwind.config.js
├── postcss.config.js
├── package.json
├── public/
│   └── favicon.ico
└── src/
    ├── main.jsx
    ├── App.jsx
    ├── index.css
    ├── contexts/
    │   └── LanguageContext.jsx
    ├── hooks/
    │   └── useApi.js
    ├── services/
    │   └── api.js
    ├── components/
    │   ├── layout/
    │   │   ├── Header.jsx
    │   │   ├── Footer.jsx
    │   │   └── Layout.jsx
    │   ├── sections/
    │   │   ├── HeroSection.jsx
    │   │   ├── TextBlockSection.jsx
    │   │   ├── CardsGridSection.jsx
    │   │   ├── ImageTextSection.jsx
    │   │   ├── StatsSection.jsx
    │   │   ├── GallerySection.jsx
    │   │   ├── CTASection.jsx
    │   │   └── SectionRenderer.jsx
    │   └── ui/
    │       ├── Button.jsx
    │       ├── Card.jsx
    │       └── LanguageSwitcher.jsx
    └── pages/
        ├── Home.jsx
        ├── About.jsx
        ├── Sectors.jsx
        ├── Companies.jsx
        ├── CompanyProfile.jsx
        ├── MediaCenter.jsx
        ├── Contact.jsx
        └── Legal.jsx
```

### Section Renderer Pattern

```jsx
const sectionMap = {
  hero: HeroSection,
  text_block: TextBlockSection,
  cards_grid: CardsGridSection,
  image_text: ImageTextSection,
  stats: StatsSection,
  gallery: GallerySection,
  cta: CTASection,
}

function SectionRenderer({section}) {
  const Component = sectionMap[section.section_type]
  return Component ? <Component data={section} /> : null
}
```

### RTL / Language

- `<html dir="rtl" lang="ar">` by default
- `LanguageContext` reads `?lang=en` from URL, stores in localStorage
- API calls append `?lang=en` when needed
- Tailwind `rtl:` variant for RTL-specific styles
- IBM Plex Arabic for Arabic, Inter for English

### Page Data Sources

| Page | API Endpoint |
|---|---|
| Home | `GET /home` |
| About | `GET /pages/about` |
| Sectors | `GET /sectors` |
| Companies | `GET /companies` |
| Company/:slug | `GET /companies/{slug}` |
| Media Center | `GET /media/news` + `GET /media/gallery` |
| Contact | `GET /contact-info` |
| Legal | `GET /pages/{slug}` |

---

## Build Order (within each phase)

### Phase 1 — API
1. `composer create-project` + install packages
2. Write migrations (15 tables)
3. Create models with relationships + scopes
4. Create `SetSiteKey` middleware
5. Create API Resources/Transformers
6. Create controllers (public + admin)
7. Register routes
8. Create seeder (sites, admin, demo content)
9. Test with curl/Postman

### Phase 2 — Dashboard
1. Copy Qasedi → aba-dashboard
2. Strip unrelated modules
3. Rebrand (title, favicon, colors)
4. Adapt auth to Sanctum endpoints
5. Create ABA modules one-by-one (Pages → Sections → Companies → Sectors → Services → Projects → Partners → Clients → News → Contact → SEO)
6. Integrate TipTap editor
7. Integrate dnd-kit for section reorder
8. Update sidebar menu
9. Update routing (PrivateRoutes.tsx)
10. Test login + CRUD flows

### Phase 3 — Website
1. `npm create vite` with React template
2. Install dependencies
3. Create RTL layout (Header, Footer, LanguageSwitcher)
4. Create section components
5. Create SectionRenderer
6. Create pages (Home → About → Sectors → Companies → CompanyProfile → MediaCenter → Contact → Legal)
7. Wire up API layer
8. Add SEO (react-helmet-async)
9. Responsive testing