# Apex Admins — Admin Panel Architecture

**Version:** 1.0  
**Date:** 2026-06-27  
**URL Prefix:** `/admin`

---

## 1. Overview

Custom enterprise admin panel built with Blade + Alpine.js + Tailwind. No Filament/Nova — full control over UX, SEO sidebar integration, and media picker.

---

## 2. Layout Structure

```
┌─────────────────────────────────────────────────────────────┐
│ Top Bar: Logo | Global Search | Notifications | User Menu │
├──────────┬──────────────────────────────────┬─────────────┤
│          │ Breadcrumbs                      │ SEO Audit   │
│ Sidebar  │ ──────────────────────────────── │ Panel       │
│ Nav      │ Main Content Area                │ (collapsible│
│          │                                  │  right dock)│
│          │                                  │             │
└──────────┴──────────────────────────────────┴─────────────┘
```

### 2.1 Sidebar Groups

1. **Overview** — Dashboard, Analytics
2. **Content** — Pages, Blog, Services, Hire Talent, Industries, Locations, Case Studies, Testimonials, Academy, Careers
3. **Leads** — Forms, Submissions, Leads Pipeline
4. **Media** — Media Library
5. **SEO** — SEO Settings, Sitemaps, Redirects
6. **Site** — Menus, Global Settings
7. **System** — Users, Roles, Activity Log

---

## 3. Authentication

- Guard: `admin` (same `users` table, middleware checks role)
- Routes: `/admin/login`, `/admin/logout`, `/admin/forgot-password`
- Session timeout: 120 minutes
- Rate limit: 5 login attempts per minute

---

## 4. RBAC Matrix

| Permission | Super Admin | Admin | Editor | SEO Manager | Sales |
|------------|:-----------:|:-----:|:------:|:-----------:|:-----:|
| users.* | ✓ | | | | |
| roles.* | ✓ | | | | |
| settings.* | ✓ | ✓ | | | |
| media.* | ✓ | ✓ | ✓ | ✓ | |
| pages.* | ✓ | ✓ | ✓ | ✓ | |
| blog.* | ✓ | ✓ | ✓ | ✓ | |
| services.* | ✓ | ✓ | ✓ | ✓ | |
| hire.* | ✓ | ✓ | ✓ | ✓ | |
| industries.* | ✓ | ✓ | ✓ | ✓ | |
| locations.* | ✓ | ✓ | ✓ | ✓ | |
| case-studies.* | ✓ | ✓ | ✓ | ✓ | |
| testimonials.* | ✓ | ✓ | ✓ | | |
| academy.* | ✓ | ✓ | ✓ | | |
| careers.* | ✓ | ✓ | ✓ | | |
| forms.* | ✓ | ✓ | | | ✓ |
| leads.* | ✓ | ✓ | | | ✓ |
| seo.* | ✓ | ✓ | | ✓ | |
| menus.* | ✓ | ✓ | | | |
| redirects.* | ✓ | ✓ | | ✓ | |
| analytics.view | ✓ | ✓ | | | ✓ |

Middleware: `permission:services.update` resolves via `PermissionService`.

---

## 5. Module Screens Detail

### Dashboard
- Cards: Leads today, Form submissions (7d), Published pages, Avg SEO score
- Chart: Submissions over 30 days (Alpine + simple SVG)
- Table: Recent leads, Recent submissions
- Quick links: Add page, Upload media, View sitemap

### Global Settings (Tabbed)
| Tab | Fields |
|-----|--------|
| Branding | Primary/secondary/accent colors, gradients, logo media, favicon |
| Typography | Font family, base size, heading scale |
| Contact | Phone, email, address, business hours |
| Social | Facebook, LinkedIn, Instagram, YouTube URLs |
| Footer | Column 1–4 HTML, copyright text |
| CTAs | Default primary/secondary CTA text + URLs |
| Analytics | GA4 ID, GTM ID, Meta Pixel, custom head/body scripts |
| Schema | Org name, logo, sameAs URLs, LocalBusiness NAP |
| Email | From name, from email, notification templates |

### Media Library
- View modes: Grid, List
- Left panel: Folder tree (drag to move)
- Main: Thumbnails with checkbox multi-select
- Upload zone: Drag-drop, multi-file
- Detail drawer: Alt, title, caption, description, focus keyword, URL copy, usage list
- Bulk actions: Move, Delete, Optimize

### Page Editor
- Title, slug (auto from title), template select, status, publish date
- Section builder: Add block → pick type → configure JSON props → drag reorder
- Preview button (new tab)
- SEO panel (right dock)

### SEO Audit Panel (Universal)
Docked on all content edit screens:
- Score circle 0–100 with color (red <50, yellow 50–79, green 80+)
- Accordion by category with pass/warn/fail icons
- "Recalculate" button
- Link to full SEO settings tab

---

## 6. UI Components (Admin)

- `x-admin.layout` — master layout
- `x-admin.sidebar`, `x-admin.topbar`
- `x-admin.card`, `x-admin.table`, `x-admin.pagination`
- `x-admin.form.input`, `.select`, `.textarea`, `.toggle`, `.color-picker`
- `x-admin.media-picker` — modal with library embed
- `x-admin.seo-panel` — audit sidebar
- `x-admin.section-builder` — block list + config forms
- `x-admin.flash` — success/error messages

---

## 7. Admin Routes Convention

```
/admin                          → Dashboard
/admin/{module}                 → index
/admin/{module}/create          → create
/admin/{module}/{id}/edit       → edit
/admin/{module}/{id}            → show (where applicable)
DELETE /admin/{module}/{id}     → destroy
```

API routes for admin AJAX:
```
/admin/api/media/upload
/admin/api/media/search
/admin/api/seo/audit/{type}/{id}
/admin/api/sections/preview
```

---

## 8. Activity Log

Log on: create, update, delete, publish, login, settings change.
Display in System → Activity Log with filters by user, module, date.

---

## 9. Global Search (Scout)

Top bar search queries: pages, posts, services, hire roles, media filenames.
Results grouped by type, keyboard navigable.

---

## 10. Responsive Admin

- Desktop: full sidebar + SEO panel
- Tablet: collapsible sidebar
- Mobile: hamburger menu, SEO panel as bottom sheet