Add centralized Messaging Hub with UI, API, and WhatsApp webhook

Full messaging hub that instances call via API to send WhatsApp messages:
- Meta Graph API v25.0 integration (text, template, image, document)
- API endpoint POST /api/messaging/send (auth via X-Messaging-Key header)
- Per-instance API keys with rate limiting
- WhatsApp webhook for delivery status updates
- Admin UI: dashboard stats, compose, message log, API key management
- Sidebar nav integration
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

app/Http/Controllers/MessagingApiController.php

+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\MessageLog;
+use App\Services\MessagingHubService;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+
+class MessagingApiController extends Controller
+{
+    public function send(Request $request, MessagingHubService $hub): JsonResponse
+    {
+        // Authenticate via API key header
+        $key = $request->header('X-Messaging-Key');
+        if (!$key) {
+            return response()->json(['success' => false, 'error' => 'Missing API key'], 401);
+        }
+
+        $apiKey = $hub->validateApiKey($key);
+        if (!$apiKey) {
+            return response()->json(['success' => false, 'error' => 'Invalid or rate-limited API key'], 403);
+        }
+
+        $validated = $request->validate([
+            'phone' => 'required|string|max:20',
+            'recipient_name' => 'nullable|string|max:255',
+            'message_type' => 'required|in:text,template,image,document',
+            'content' => 'required_if:message_type,text|nullable|string',
+            'template_name' => 'required_if:message_type,template|nullable|string',
+            'template_language' => 'nullable|string|max:10',
+            'components' => 'nullable|array',
+            'media_url' => 'required_if:message_type,image,document|nullable|url',
+            'filename' => 'nullable|string|max:255',
+        ]);
+
+        $instance = $apiKey->instance;
+        $log = $hub->sendFromInstance($instance, $validated);
+
+        return response()->json([
+            'success' => $log->status !== 'failed',
+            'message_id' => $log->external_id,
+            'log_id' => $log->id,
+            'status' => $log->status,
+            'error' => $log->error_message,
+        ], $log->status === 'failed' ? 422 : 200);
+    }
+
+    public function status(Request $request, string $externalId): JsonResponse
+    {
+        // Authenticate via API key header
+        $key = $request->header('X-Messaging-Key');
+        if (!$key) {
+            return response()->json(['success' => false, 'error' => 'Missing API key'], 401);
+        }
+
+        $apiKey = (new MessagingHubService(app(\App\Services\WhatsAppService::class)))->validateApiKey($key);
+        if (!$apiKey) {
+            return response()->json(['success' => false, 'error' => 'Invalid API key'], 403);
+        }
+
+        $log = MessageLog::where('external_id', $externalId)
+            ->where('instance_id', $apiKey->instance_id)
+            ->first();
+
+        if (!$log) {
+            return response()->json(['success' => false, 'error' => 'Message not found'], 404);
+        }
+
+        return response()->json([
+            'success' => true,
+            'status' => $log->status,
+            'sent_at' => $log->sent_at?->toISOString(),
+            'delivered_at' => $log->delivered_at?->toISOString(),
+            'read_at' => $log->read_at?->toISOString(),
+        ]);
+    }
+}

app/Http/Controllers/WhatsAppWebhookController.php

+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\MessageLog;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+use Illuminate\Http\Response;
+use Illuminate\Support\Facades\Log;
+
+class WhatsAppWebhookController extends Controller
+{
+    public function verify(Request $request): Response
+    {
+        $mode = $request->query('hub_mode');
+        $token = $request->query('hub_verify_token');
+        $challenge = $request->query('hub_challenge');
+
+        $expectedToken = config('manager.whatsapp_webhook_verify_token');
+
+        if ($mode === 'subscribe' && $token === $expectedToken) {
+            return response($challenge, 200)->header('Content-Type', 'text/plain');
+        }
+
+        return response('Forbidden', 403);
+    }
+
+    public function handle(Request $request): JsonResponse
+    {
+        $body = $request->all();
+
+        Log::info('WhatsApp Webhook received', ['body' => $body]);
+
+        // Process status updates
+        $entries = $body['entry'] ?? [];
+        foreach ($entries as $entry) {
+            $changes = $entry['changes'] ?? [];
+            foreach ($changes as $change) {
+                $statuses = $change['value']['statuses'] ?? [];
+                foreach ($statuses as $status) {
+                    $this->processStatusUpdate($status);
+                }
+            }
+        }
+
+        return response()->json(['status' => 'ok']);
+    }
+
+    private function processStatusUpdate(array $status): void
+    {
+        $messageId = $status['id'] ?? null;
+        $statusValue = $status['status'] ?? null;
+        $timestamp = $status['timestamp'] ?? null;
+
+        if (!$messageId || !$statusValue) {
+            return;
+        }
+
+        $log = MessageLog::where('external_id', $messageId)->first();
+        if (!$log) {
+            return;
+        }
+
+        $time = $timestamp ? \Carbon\Carbon::createFromTimestamp($timestamp) : now();
+
+        match ($statusValue) {
+            'sent' => $log->update(['status' => 'sent', 'sent_at' => $log->sent_at ?? $time]),
+            'delivered' => $log->update(['status' => 'delivered', 'delivered_at' => $time]),
+            'read' => $log->update(['status' => 'read', 'read_at' => $time]),
+            'failed' => $log->update([
+                'status' => 'failed',
+                'error_message' => $status['errors'][0]['title'] ?? 'Delivery failed',
+            ]),
+            default => null,
+        };
+    }
+}

app/Livewire/MessagingCompose.php

+<?php
+
+namespace App\Livewire;
+
+use App\Models\Instance;
+use App\Services\MessagingHubService;
+use Livewire\Component;
+
+class MessagingCompose extends Component
+{
+    public string $instance_id = '';
+    public string $phone = '';
+    public string $recipient_name = '';
+    public string $message_type = 'text';
+    public string $content = '';
+    public string $template_name = '';
+    public string $template_language = 'en_US';
+    public string $media_url = '';
+    public string $filename = '';
+
+    public ?array $result = null;
+
+    public function send(MessagingHubService $hub): void
+    {
+        $this->validate([
+            'instance_id' => 'required|exists:instances,id',
+            'phone' => 'required|string|max:20',
+            'message_type' => 'required|in:text,template,image,document',
+            'content' => 'required_if:message_type,text',
+            'template_name' => 'required_if:message_type,template',
+            'media_url' => 'required_if:message_type,image,document',
+        ]);
+
+        $instance = Instance::findOrFail($this->instance_id);
+
+        $data = [
+            'phone' => $this->phone,
+            'recipient_name' => $this->recipient_name ?: null,
+            'message_type' => $this->message_type,
+            'content' => $this->content ?: null,
+            'template_name' => $this->template_name ?: null,
+            'template_language' => $this->template_language ?: 'en_US',
+            'media_url' => $this->media_url ?: null,
+            'filename' => $this->filename ?: null,
+        ];
+
+        $log = $hub->sendFromInstance($instance, $data);
+
+        $this->result = [
+            'success' => $log->status !== 'failed',
+            'status' => $log->status,
+            'message_id' => $log->external_id,
+            'error' => $log->error_message,
+        ];
+    }
+
+    public function render()
+    {
+        return view('livewire.messaging-compose', [
+            'instances' => Instance::where('status', 'active')->orderBy('academy_name_ar')->get(),
+        ])->layout('layouts.app', ['title' => 'Compose Message']);
+    }
+}

app/Livewire/MessagingDashboard.php

+<?php
+
+namespace App\Livewire;
+
+use App\Models\MessageLog;
+use Livewire\Component;
+
+class MessagingDashboard extends Component
+{
+    public function render()
+    {
+        $today = MessageLog::whereDate('created_at', today())->count();
+        $thisWeek = MessageLog::whereBetween('created_at', [now()->startOfWeek(), now()->endOfWeek()])->count();
+        $thisMonth = MessageLog::whereMonth('created_at', now()->month)->whereYear('created_at', now()->year)->count();
+
+        $totalSent = MessageLog::whereIn('status', ['sent', 'delivered', 'read'])->count();
+        $totalDelivered = MessageLog::whereIn('status', ['delivered', 'read'])->count();
+        $deliveryRate = $totalSent > 0 ? round(($totalDelivered / $totalSent) * 100, 1) : 0;
+
+        $byInstance = MessageLog::selectRaw('instance_id, count(*) as total')
+            ->selectRaw("count(case when status in ('sent','delivered','read') then 1 end) as sent_count")
+            ->selectRaw("count(case when status in ('delivered','read') then 1 end) as delivered_count")
+            ->selectRaw("count(case when status = 'failed' then 1 end) as failed_count")
+            ->groupBy('instance_id')
+            ->with('instance:id,academy_name_ar,app_name')
+            ->orderByDesc('total')
+            ->limit(10)
+            ->get();
+
+        return view('livewire.messaging-dashboard', [
+            'today' => $today,
+            'thisWeek' => $thisWeek,
+            'thisMonth' => $thisMonth,
+            'deliveryRate' => $deliveryRate,
+            'byInstance' => $byInstance,
+        ])->layout('layouts.app', ['title' => 'Messaging Hub']);
+    }
+}

app/Livewire/MessagingKeys.php

+<?php
+
+namespace App\Livewire;
+
+use App\Models\Instance;
+use App\Models\MessagingApiKey;
+use Illuminate\Support\Str;
+use Livewire\Component;
+
+class MessagingKeys extends Component
+{
+    public ?int $editingRateLimit = null;
+    public int $newRateLimit = 100;
+
+    public function generateKey(int $instanceId): void
+    {
+        $instance = Instance::findOrFail($instanceId);
+
+        // Delete existing key for this instance
+        MessagingApiKey::where('instance_id', $instance->id)->delete();
+
+        MessagingApiKey::create([
+            'instance_id' => $instance->id,
+            'api_key' => Str::random(64),
+            'is_active' => true,
+            'rate_limit_per_hour' => 100,
+        ]);
+
+        session()->flash('success', "API key generated for {$instance->academy_name_ar}");
+    }
+
+    public function revokeKey(int $keyId): void
+    {
+        $key = MessagingApiKey::findOrFail($keyId);
+        $key->update(['is_active' => false]);
+        session()->flash('success', 'API key revoked');
+    }
+
+    public function activateKey(int $keyId): void
+    {
+        $key = MessagingApiKey::findOrFail($keyId);
+        $key->update(['is_active' => true]);
+        session()->flash('success', 'API key activated');
+    }
+
+    public function startEditRateLimit(int $keyId, int $currentLimit): void
+    {
+        $this->editingRateLimit = $keyId;
+        $this->newRateLimit = $currentLimit;
+    }
+
+    public function saveRateLimit(): void
+    {
+        if ($this->editingRateLimit) {
+            MessagingApiKey::where('id', $this->editingRateLimit)
+                ->update(['rate_limit_per_hour' => max(1, $this->newRateLimit)]);
+            $this->editingRateLimit = null;
+            session()->flash('success', 'Rate limit updated');
+        }
+    }
+
+    public function cancelEditRateLimit(): void
+    {
+        $this->editingRateLimit = null;
+    }
+
+    public function render()
+    {
+        $keys = MessagingApiKey::with('instance:id,academy_name_ar,app_name,status')
+            ->orderBy('created_at', 'desc')
+            ->get();
+
+        $instancesWithoutKeys = Instance::whereDoesntHave('messagingApiKey')
+            ->where('status', 'active')
+            ->orderBy('academy_name_ar')
+            ->get(['id', 'academy_name_ar', 'app_name']);
+
+        return view('livewire.messaging-keys', [
+            'keys' => $keys,
+            'instancesWithoutKeys' => $instancesWithoutKeys,
+        ])->layout('layouts.app', ['title' => 'API Keys']);
+    }
+}

app/Livewire/MessagingLog.php

+<?php
+
+namespace App\Livewire;
+
+use App\Models\Instance;
+use App\Models\MessageLog;
+use Livewire\Attributes\Url;
+use Livewire\Component;
+use Livewire\WithPagination;
+
+class MessagingLog extends Component
+{
+    use WithPagination;
+
+    #[Url]
+    public string $search = '';
+
+    #[Url]
+    public string $status = '';
+
+    #[Url]
+    public string $instance_id = '';
+
+    #[Url]
+    public string $type = '';
+
+    #[Url]
+    public string $dateFrom = '';
+
+    #[Url]
+    public string $dateTo = '';
+
+    public function updatedSearch(): void
+    {
+        $this->resetPage();
+    }
+
+    public function updatedStatus(): void
+    {
+        $this->resetPage();
+    }
+
+    public function updatedInstanceId(): void
+    {
+        $this->resetPage();
+    }
+
+    public function updatedType(): void
+    {
+        $this->resetPage();
+    }
+
+    public function render()
+    {
+        $query = MessageLog::with('instance:id,academy_name_ar,app_name');
+
+        if ($this->search) {
+            $query->where('recipient_phone', 'like', "%{$this->search}%");
+        }
+
+        if ($this->status) {
+            $query->where('status', $this->status);
+        }
+
+        if ($this->instance_id) {
+            $query->where('instance_id', $this->instance_id);
+        }
+
+        if ($this->type) {
+            $query->where('message_type', $this->type);
+        }
+
+        if ($this->dateFrom) {
+            $query->whereDate('created_at', '>=', $this->dateFrom);
+        }
+
+        if ($this->dateTo) {
+            $query->whereDate('created_at', '<=', $this->dateTo);
+        }
+
+        return view('livewire.messaging-log', [
+            'logs' => $query->orderByDesc('created_at')->paginate(25),
+            'instances' => Instance::orderBy('academy_name_ar')->get(['id', 'academy_name_ar', 'app_name']),
+        ])->layout('layouts.app', ['title' => 'Message Log']);
+    }
+}

app/Models/Instance.php

@@ -5,6 +5,7 @@
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Database\Eloquent\Relations\BelongsTo;
 use Illuminate\Database\Eloquent\Relations\HasMany;
+use Illuminate\Database\Eloquent\Relations\HasOne;
 use Illuminate\Support\Str;
 
 class Instance extends Model
@@ -70,6 +71,16 @@ public function auditLogs(): HasMany
         return $this->hasMany(AuditLog::class);
     }
 
+    public function messageLogs(): HasMany
+    {
+        return $this->hasMany(MessageLog::class);
+    }
+
+    public function messagingApiKey(): HasOne
+    {
+        return $this->hasOne(MessagingApiKey::class);
+    }
+
     public function getRouteKeyName(): string
     {
         return 'uuid';

app/Models/MessageLog.php

+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+
+class MessageLog extends Model
+{
+    protected $fillable = [
+        'instance_id',
+        'channel',
+        'recipient_phone',
+        'recipient_name',
+        'message_type',
+        'content',
+        'template_name',
+        'template_language',
+        'media_url',
+        'payload',
+        'response',
+        'external_id',
+        'status',
+        'error_message',
+        'cost_units',
+        'sent_at',
+        'delivered_at',
+        'read_at',
+    ];
+
+    protected $casts = [
+        'payload' => 'array',
+        'response' => 'array',
+        'cost_units' => 'integer',
+        'sent_at' => 'datetime',
+        'delivered_at' => 'datetime',
+        'read_at' => 'datetime',
+    ];
+
+    public function instance(): BelongsTo
+    {
+        return $this->belongsTo(Instance::class);
+    }
+}

app/Models/MessagingApiKey.php

+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+
+class MessagingApiKey extends Model
+{
+    protected $fillable = [
+        'instance_id',
+        'api_key',
+        'is_active',
+        'rate_limit_per_hour',
+        'messages_sent_today',
+        'last_used_at',
+    ];
+
+    protected $casts = [
+        'is_active' => 'boolean',
+        'rate_limit_per_hour' => 'integer',
+        'messages_sent_today' => 'integer',
+        'last_used_at' => 'datetime',
+    ];
+
+    protected $hidden = [
+        'api_key',
+    ];
+
+    public function instance(): BelongsTo
+    {
+        return $this->belongsTo(Instance::class);
+    }
+
+    public function isWithinRateLimit(): bool
+    {
+        return $this->messages_sent_today < $this->rate_limit_per_hour;
+    }
+}

app/Models/MessagingChannel.php

+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Model;
+
+class MessagingChannel extends Model
+{
+    protected $fillable = [
+        'name',
+        'provider',
+        'credentials',
+        'is_active',
+    ];
+
+    protected $casts = [
+        'credentials' => 'encrypted:array',
+        'is_active' => 'boolean',
+    ];
+}

app/Services/MessagingHubService.php

+<?php
+
+namespace App\Services;
+
+use App\Models\Instance;
+use App\Models\MessageLog;
+use App\Models\MessagingApiKey;
+use Illuminate\Support\Facades\Log;
+
+class MessagingHubService
+{
+    public function __construct(
+        private WhatsAppService $whatsApp,
+    ) {}
+
+    public function sendFromInstance(Instance $instance, array $data): MessageLog
+    {
+        $log = MessageLog::create([
+            'instance_id' => $instance->id,
+            'channel' => 'whatsapp',
+            'recipient_phone' => $data['phone'],
+            'recipient_name' => $data['recipient_name'] ?? null,
+            'message_type' => $data['message_type'],
+            'content' => $data['content'] ?? null,
+            'template_name' => $data['template_name'] ?? null,
+            'template_language' => $data['template_language'] ?? null,
+            'media_url' => $data['media_url'] ?? null,
+            'payload' => $data,
+            'status' => 'queued',
+        ]);
+
+        if (!$this->whatsApp->isConfigured()) {
+            $log->update([
+                'status' => 'failed',
+                'error_message' => 'WhatsApp is not configured',
+            ]);
+            return $log;
+        }
+
+        $result = match ($data['message_type']) {
+            'text' => $this->whatsApp->sendText($data['phone'], $data['content']),
+            'template' => $this->whatsApp->sendTemplate(
+                $data['phone'],
+                $data['template_name'],
+                $data['template_language'] ?? 'en_US',
+                $data['components'] ?? [],
+            ),
+            'image' => $this->whatsApp->sendImage(
+                $data['phone'],
+                $data['media_url'],
+                $data['content'] ?? null,
+            ),
+            'document' => $this->whatsApp->sendDocument(
+                $data['phone'],
+                $data['media_url'],
+                $data['filename'] ?? null,
+            ),
+            default => ['success' => false, 'error' => 'Invalid message type'],
+        };
+
+        if ($result['success']) {
+            $log->update([
+                'status' => 'sent',
+                'external_id' => $result['message_id'] ?? null,
+                'response' => $result['response'] ?? [],
+                'sent_at' => now(),
+            ]);
+        } else {
+            $log->update([
+                'status' => 'failed',
+                'error_message' => $result['error'] ?? 'Unknown error',
+                'response' => $result['response'] ?? [],
+            ]);
+        }
+
+        return $log->fresh();
+    }
+
+    public function validateApiKey(string $key): ?MessagingApiKey
+    {
+        $apiKey = MessagingApiKey::where('api_key', $key)
+            ->where('is_active', true)
+            ->first();
+
+        if (!$apiKey) {
+            return null;
+        }
+
+        // Reset daily counter if it's a new day
+        if ($apiKey->last_used_at && !$apiKey->last_used_at->isToday()) {
+            $apiKey->update(['messages_sent_today' => 0]);
+        }
+
+        if (!$apiKey->isWithinRateLimit()) {
+            return null;
+        }
+
+        // Increment usage
+        $apiKey->increment('messages_sent_today');
+        $apiKey->update(['last_used_at' => now()]);
+
+        return $apiKey;
+    }
+}

app/Services/WhatsAppService.php

+<?php
+
+namespace App\Services;
+
+use Illuminate\Support\Facades\Http;
+use Illuminate\Support\Facades\Log;
+
+class WhatsAppService
+{
+    private string $apiVersion;
+    private string $phoneNumberId;
+    private string $accessToken;
+
+    public function __construct()
+    {
+        $this->apiVersion = config('manager.whatsapp_api_version', 'v25.0');
+        $this->phoneNumberId = config('manager.whatsapp_phone_number_id', '');
+        $this->accessToken = config('manager.whatsapp_access_token', '');
+    }
+
+    public function isConfigured(): bool
+    {
+        return !empty($this->phoneNumberId) && !empty($this->accessToken);
+    }
+
+    public function sendText(string $to, string $body): array
+    {
+        return $this->sendRequest([
+            'messaging_product' => 'whatsapp',
+            'to' => $this->formatPhone($to),
+            'type' => 'text',
+            'text' => ['body' => $body],
+        ]);
+    }
+
+    public function sendTemplate(string $to, string $templateName, string $lang = 'en_US', array $components = []): array
+    {
+        $template = [
+            'name' => $templateName,
+            'language' => ['code' => $lang],
+        ];
+
+        if (!empty($components)) {
+            $template['components'] = $components;
+        }
+
+        return $this->sendRequest([
+            'messaging_product' => 'whatsapp',
+            'to' => $this->formatPhone($to),
+            'type' => 'template',
+            'template' => $template,
+        ]);
+    }
+
+    public function sendImage(string $to, string $imageUrl, ?string $caption = null): array
+    {
+        $image = ['link' => $imageUrl];
+        if ($caption) {
+            $image['caption'] = $caption;
+        }
+
+        return $this->sendRequest([
+            'messaging_product' => 'whatsapp',
+            'to' => $this->formatPhone($to),
+            'type' => 'image',
+            'image' => $image,
+        ]);
+    }
+
+    public function sendDocument(string $to, string $documentUrl, ?string $filename = null): array
+    {
+        $document = ['link' => $documentUrl];
+        if ($filename) {
+            $document['filename'] = $filename;
+        }
+
+        return $this->sendRequest([
+            'messaging_product' => 'whatsapp',
+            'to' => $this->formatPhone($to),
+            'type' => 'document',
+            'document' => $document,
+        ]);
+    }
+
+    private function sendRequest(array $payload): array
+    {
+        $url = "https://graph.facebook.com/{$this->apiVersion}/{$this->phoneNumberId}/messages";
+
+        try {
+            $response = Http::withToken($this->accessToken)
+                ->timeout(30)
+                ->post($url, $payload);
+
+            $data = $response->json();
+
+            if ($response->successful() && isset($data['messages'][0]['id'])) {
+                return [
+                    'success' => true,
+                    'message_id' => $data['messages'][0]['id'],
+                    'response' => $data,
+                ];
+            }
+
+            return [
+                'success' => false,
+                'error' => $data['error']['message'] ?? 'Unknown error',
+                'response' => $data,
+            ];
+        } catch (\Exception $e) {
+            Log::error('WhatsApp API Error', [
+                'error' => $e->getMessage(),
+                'payload' => $payload,
+            ]);
+
+            return [
+                'success' => false,
+                'error' => $e->getMessage(),
+                'response' => [],
+            ];
+        }
+    }
+
+    private function formatPhone(string $phone): string
+    {
+        // Strip +, spaces, dashes
+        $phone = preg_replace('/[\s\-\+]/', '', $phone);
+
+        // Egyptian numbers: 01x -> 201x
+        if (str_starts_with($phone, '0')) {
+            $phone = '2' . $phone;
+        }
+
+        // If starts with 1 (e.g. 1012345678) add 20
+        if (str_starts_with($phone, '1') && strlen($phone) === 10) {
+            $phone = '20' . $phone;
+        }
+
+        return $phone;
+    }
+}

bootstrap/app.php

@@ -12,7 +12,10 @@
         health: '/up',
     )
     ->withMiddleware(function (Middleware $middleware): void {
-        //
+        $middleware->validateCsrfTokens(except: [
+            'api/*',
+            'webhook/*',
+        ]);
     })
     ->withExceptions(function (Exceptions $exceptions): void {
         $exceptions->shouldRenderJsonWhen(

config/manager.php

@@ -22,4 +22,10 @@
     'billing_day' => env('BILLING_DAY', 1),
     'auto_suspend_enabled' => env('AUTO_SUSPEND_ENABLED', true),
     'warning_email_days' => [3, 7],
+
+    // WhatsApp (Meta Graph API)
+    'whatsapp_api_version' => env('WHATSAPP_API_VERSION', 'v25.0'),
+    'whatsapp_phone_number_id' => env('WHATSAPP_PHONE_NUMBER_ID', ''),
+    'whatsapp_access_token' => env('WHATSAPP_ACCESS_TOKEN', ''),
+    'whatsapp_webhook_verify_token' => env('WHATSAPP_WEBHOOK_VERIFY_TOKEN', 'elcaptain_whatsapp_verify_2024'),
 ];

database/migrations/2024_01_01_000080_create_messaging_tables.php

+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('messaging_channels', function (Blueprint $table) {
+            $table->id();
+            $table->string('name', 30);
+            $table->string('provider', 30);
+            $table->jsonb('credentials')->default('{}');
+            $table->boolean('is_active')->default(true);
+            $table->timestamps();
+        });
+
+        Schema::create('message_logs', function (Blueprint $table) {
+            $table->id();
+            $table->foreignId('instance_id')->constrained('instances')->cascadeOnDelete();
+            $table->string('channel', 30);
+            $table->string('recipient_phone', 20);
+            $table->string('recipient_name')->nullable();
+            $table->string('message_type', 30);
+            $table->text('content')->nullable();
+            $table->string('template_name')->nullable();
+            $table->string('template_language', 10)->nullable();
+            $table->text('media_url')->nullable();
+            $table->jsonb('payload')->default('{}');
+            $table->jsonb('response')->default('{}');
+            $table->string('external_id')->nullable();
+            $table->string('status', 30)->default('queued');
+            $table->text('error_message')->nullable();
+            $table->integer('cost_units')->default(0);
+            $table->timestamp('sent_at')->nullable();
+            $table->timestamp('delivered_at')->nullable();
+            $table->timestamp('read_at')->nullable();
+            $table->timestamps();
+
+            $table->index(['instance_id', 'created_at']);
+            $table->index('external_id');
+            $table->index('status');
+        });
+
+        Schema::create('messaging_api_keys', function (Blueprint $table) {
+            $table->id();
+            $table->foreignId('instance_id')->unique()->constrained('instances')->cascadeOnDelete();
+            $table->string('api_key', 64)->unique();
+            $table->boolean('is_active')->default(true);
+            $table->integer('rate_limit_per_hour')->default(100);
+            $table->integer('messages_sent_today')->default(0);
+            $table->timestamp('last_used_at')->nullable();
+            $table->timestamps();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('messaging_api_keys');
+        Schema::dropIfExists('message_logs');
+        Schema::dropIfExists('messaging_channels');
+    }
+};

resources/views/layouts/app.blade.php

@@ -49,6 +49,11 @@ class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium {{ req
                     <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                     Billing
                 </a>
+                <a href="{{ route('messaging.index') }}" wire:navigate
+                   class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium {{ request()->routeIs('messaging.*') ? 'bg-gray-800 text-white' : 'text-gray-400 hover:text-white hover:bg-gray-800' }}">
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
+                    Messaging
+                </a>
                 <a href="{{ route('plans.index') }}" wire:navigate
                    class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium {{ request()->routeIs('plans.*') ? 'bg-gray-800 text-white' : 'text-gray-400 hover:text-white hover:bg-gray-800' }}">
                     <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>

resources/views/livewire/messaging-compose.blade.php

+<div>
+    {{-- Header --}}
+    <div class="flex items-center gap-3 mb-6">
+        <a href="{{ route('messaging.index') }}" wire:navigate class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition">
+            <svg class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
+        </a>
+        <h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Compose Message</h2>
+    </div>
+
+    {{-- Result --}}
+    @if($result)
+    <div class="mb-6 p-4 rounded-lg {{ $result['success'] ? 'bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800' : 'bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800' }}">
+        @if($result['success'])
+            <p class="text-green-700 dark:text-green-300 font-medium">Message sent successfully!</p>
+            <p class="text-sm text-green-600 dark:text-green-400 mt-1">Status: {{ $result['status'] }} | ID: {{ $result['message_id'] ?? 'N/A' }}</p>
+        @else
+            <p class="text-red-700 dark:text-red-300 font-medium">Failed to send message</p>
+            <p class="text-sm text-red-600 dark:text-red-400 mt-1">{{ $result['error'] }}</p>
+        @endif
+    </div>
+    @endif
+
+    <div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 max-w-2xl">
+        <form wire:submit="send" class="space-y-5">
+            {{-- Instance --}}
+            <div>
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Instance</label>
+                <select wire:model="instance_id" class="w-full rounded-lg border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 text-sm focus:border-blue-500 focus:ring-blue-500">
+                    <option value="">Select instance...</option>
+                    @foreach($instances as $inst)
+                        <option value="{{ $inst->id }}">{{ $inst->academy_name_ar }} ({{ $inst->app_name }})</option>
+                    @endforeach
+                </select>
+                @error('instance_id') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
+            </div>
+
+            {{-- Phone --}}
+            <div>
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Phone Number</label>
+                <input type="text" wire:model="phone" placeholder="01012345678" dir="ltr"
+                       class="w-full rounded-lg border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 text-sm focus:border-blue-500 focus:ring-blue-500">
+                @error('phone') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
+            </div>
+
+            {{-- Recipient Name --}}
+            <div>
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Recipient Name (optional)</label>
+                <input type="text" wire:model="recipient_name"
+                       class="w-full rounded-lg border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 text-sm focus:border-blue-500 focus:ring-blue-500">
+            </div>
+
+            {{-- Message Type Tabs --}}
+            <div x-data="{ tab: @entangle('message_type') }">
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Message Type</label>
+                <div class="flex gap-1 p-1 bg-gray-100 dark:bg-gray-800 rounded-lg mb-4">
+                    <button type="button" @click="tab = 'text'; $wire.set('message_type', 'text')"
+                            :class="tab === 'text' ? 'bg-white dark:bg-gray-700 shadow-sm text-gray-900 dark:text-white' : 'text-gray-500 dark:text-gray-400'"
+                            class="flex-1 px-3 py-2 text-sm font-medium rounded-md transition">Text</button>
+                    <button type="button" @click="tab = 'template'; $wire.set('message_type', 'template')"
+                            :class="tab === 'template' ? 'bg-white dark:bg-gray-700 shadow-sm text-gray-900 dark:text-white' : 'text-gray-500 dark:text-gray-400'"
+                            class="flex-1 px-3 py-2 text-sm font-medium rounded-md transition">Template</button>
+                    <button type="button" @click="tab = 'image'; $wire.set('message_type', 'image')"
+                            :class="tab === 'image' ? 'bg-white dark:bg-gray-700 shadow-sm text-gray-900 dark:text-white' : 'text-gray-500 dark:text-gray-400'"
+                            class="flex-1 px-3 py-2 text-sm font-medium rounded-md transition">Image</button>
+                    <button type="button" @click="tab = 'document'; $wire.set('message_type', 'document')"
+                            :class="tab === 'document' ? 'bg-white dark:bg-gray-700 shadow-sm text-gray-900 dark:text-white' : 'text-gray-500 dark:text-gray-400'"
+                            class="flex-1 px-3 py-2 text-sm font-medium rounded-md transition">Document</button>
+                </div>
+
+                {{-- Text --}}
+                <div x-show="tab === 'text'" x-cloak>
+                    <textarea wire:model="content" rows="4" placeholder="Message body..."
+                              class="w-full rounded-lg border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 text-sm focus:border-blue-500 focus:ring-blue-500"></textarea>
+                    @error('content') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
+                </div>
+
+                {{-- Template --}}
+                <div x-show="tab === 'template'" x-cloak class="space-y-3">
+                    <input type="text" wire:model="template_name" placeholder="Template name (e.g. hello_world)"
+                           class="w-full rounded-lg border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 text-sm focus:border-blue-500 focus:ring-blue-500">
+                    @error('template_name') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
+                    <select wire:model="template_language" class="w-full rounded-lg border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 text-sm focus:border-blue-500 focus:ring-blue-500">
+                        <option value="en_US">English (US)</option>
+                        <option value="ar">Arabic</option>
+                    </select>
+                </div>
+
+                {{-- Image --}}
+                <div x-show="tab === 'image'" x-cloak class="space-y-3">
+                    <input type="url" wire:model="media_url" placeholder="Image URL (https://...)"
+                           class="w-full rounded-lg border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 text-sm focus:border-blue-500 focus:ring-blue-500">
+                    @error('media_url') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
+                    <input type="text" wire:model="content" placeholder="Caption (optional)"
+                           class="w-full rounded-lg border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 text-sm focus:border-blue-500 focus:ring-blue-500">
+                </div>
+
+                {{-- Document --}}
+                <div x-show="tab === 'document'" x-cloak class="space-y-3">
+                    <input type="url" wire:model="media_url" placeholder="Document URL (https://...)"
+                           class="w-full rounded-lg border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 text-sm focus:border-blue-500 focus:ring-blue-500">
+                    @error('media_url') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
+                    <input type="text" wire:model="filename" placeholder="Filename (e.g. invoice.pdf)"
+                           class="w-full rounded-lg border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 text-sm focus:border-blue-500 focus:ring-blue-500">
+                </div>
+            </div>
+
+            {{-- Submit --}}
+            <div class="pt-2">
+                <button type="submit"
+                        wire:loading.attr="disabled"
+                        wire:target="send"
+                        class="w-full sm:w-auto px-6 py-2.5 bg-green-600 text-white rounded-lg hover:bg-green-700 text-sm font-medium disabled:opacity-50 transition">
+                    <span wire:loading.remove wire:target="send">Send Message</span>
+                    <span wire:loading wire:target="send">Sending...</span>
+                </button>
+            </div>
+        </form>
+    </div>
+</div>

resources/views/livewire/messaging-dashboard.blade.php

+<div>
+    {{-- Header --}}
+    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-6">
+        <div>
+            <h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Messaging Hub</h2>
+            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Centralized WhatsApp messaging for all instances</p>
+        </div>
+        <a href="{{ route('messaging.compose') }}" wire:navigate
+           class="inline-flex items-center gap-2 px-4 py-2.5 bg-green-600 text-white rounded-lg hover:bg-green-700 text-sm font-medium transition">
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
+            Compose Message
+        </a>
+    </div>
+
+    {{-- Stats Cards --}}
+    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+        <div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-5">
+            <p class="text-sm text-gray-500 dark:text-gray-400">Today</p>
+            <p class="text-2xl font-bold text-gray-900 dark:text-gray-100 mt-1">{{ number_format($today) }}</p>
+        </div>
+        <div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-5">
+            <p class="text-sm text-gray-500 dark:text-gray-400">This Week</p>
+            <p class="text-2xl font-bold text-gray-900 dark:text-gray-100 mt-1">{{ number_format($thisWeek) }}</p>
+        </div>
+        <div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-5">
+            <p class="text-sm text-gray-500 dark:text-gray-400">This Month</p>
+            <p class="text-2xl font-bold text-gray-900 dark:text-gray-100 mt-1">{{ number_format($thisMonth) }}</p>
+        </div>
+        <div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-5">
+            <p class="text-sm text-gray-500 dark:text-gray-400">Delivery Rate</p>
+            <p class="text-2xl font-bold {{ $deliveryRate >= 90 ? 'text-green-600' : ($deliveryRate >= 70 ? 'text-yellow-600' : 'text-red-600') }} mt-1">{{ $deliveryRate }}%</p>
+        </div>
+    </div>
+
+    {{-- Quick Links --}}
+    <div class="flex gap-3 mb-6">
+        <a href="{{ route('messaging.log') }}" wire:navigate class="text-sm text-blue-600 dark:text-blue-400 hover:underline">View All Logs</a>
+        <a href="{{ route('messaging.keys') }}" wire:navigate class="text-sm text-blue-600 dark:text-blue-400 hover:underline">Manage API Keys</a>
+    </div>
+
+    {{-- Messages by Instance --}}
+    <div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden">
+        <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-800">
+            <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Messages by Instance</h3>
+        </div>
+        <table class="w-full text-sm">
+            <thead class="bg-gray-50 dark:bg-gray-800/50 border-b border-gray-200 dark:border-gray-800">
+                <tr>
+                    <th class="text-left px-4 py-3 font-medium text-gray-500 dark:text-gray-400">Instance</th>
+                    <th class="text-right px-4 py-3 font-medium text-gray-500 dark:text-gray-400">Total</th>
+                    <th class="text-right px-4 py-3 font-medium text-gray-500 dark:text-gray-400">Sent</th>
+                    <th class="text-right px-4 py-3 font-medium text-gray-500 dark:text-gray-400">Delivered</th>
+                    <th class="text-right px-4 py-3 font-medium text-gray-500 dark:text-gray-400">Failed</th>
+                </tr>
+            </thead>
+            <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
+                @forelse($byInstance as $row)
+                <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50">
+                    <td class="px-4 py-3 text-gray-900 dark:text-gray-100 font-medium">
+                        {{ $row->instance?->academy_name_ar ?? $row->instance?->app_name ?? 'Unknown' }}
+                    </td>
+                    <td class="px-4 py-3 text-right text-gray-600 dark:text-gray-400">{{ number_format($row->total) }}</td>
+                    <td class="px-4 py-3 text-right text-blue-600 dark:text-blue-400">{{ number_format($row->sent_count) }}</td>
+                    <td class="px-4 py-3 text-right text-green-600 dark:text-green-400">{{ number_format($row->delivered_count) }}</td>
+                    <td class="px-4 py-3 text-right text-red-600 dark:text-red-400">{{ number_format($row->failed_count) }}</td>
+                </tr>
+                @empty
+                <tr>
+                    <td colspan="5" class="px-4 py-12 text-center text-gray-400 dark:text-gray-500">
+                        No messages sent yet.
+                    </td>
+                </tr>
+                @endforelse
+            </tbody>
+        </table>
+    </div>
+</div>

resources/views/livewire/messaging-keys.blade.php

+<div>
+    {{-- Header --}}
+    <div class="flex items-center gap-3 mb-6">
+        <a href="{{ route('messaging.index') }}" wire:navigate class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition">
+            <svg class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
+        </a>
+        <h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100">API Keys</h2>
+    </div>
+
+    {{-- Flash Message --}}
+    @if(session('success'))
+    <div class="mb-4 p-4 rounded-lg bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 text-green-700 dark:text-green-300 text-sm">
+        {{ session('success') }}
+    </div>
+    @endif
+
+    {{-- Generate Key for Instance --}}
+    @if($instancesWithoutKeys->isNotEmpty())
+    <div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-4 mb-6">
+        <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-3">Generate API Key</h3>
+        <div class="flex flex-wrap gap-2">
+            @foreach($instancesWithoutKeys as $inst)
+            <button wire:click="generateKey({{ $inst->id }})"
+                    wire:loading.attr="disabled"
+                    class="inline-flex items-center gap-2 px-3 py-1.5 bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 rounded-lg text-xs font-medium hover:bg-blue-100 dark:hover:bg-blue-900/40 transition">
+                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
+                {{ $inst->academy_name_ar ?? $inst->app_name }}
+            </button>
+            @endforeach
+        </div>
+    </div>
+    @endif
+
+    {{-- Keys Table --}}
+    <div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden">
+        <table class="w-full text-sm">
+            <thead class="bg-gray-50 dark:bg-gray-800/50 border-b border-gray-200 dark:border-gray-800">
+                <tr>
+                    <th class="text-left px-4 py-3 font-medium text-gray-500 dark:text-gray-400">Instance</th>
+                    <th class="text-left px-4 py-3 font-medium text-gray-500 dark:text-gray-400">API Key</th>
+                    <th class="text-left px-4 py-3 font-medium text-gray-500 dark:text-gray-400">Status</th>
+                    <th class="text-right px-4 py-3 font-medium text-gray-500 dark:text-gray-400">Rate Limit</th>
+                    <th class="text-right px-4 py-3 font-medium text-gray-500 dark:text-gray-400">Used Today</th>
+                    <th class="text-left px-4 py-3 font-medium text-gray-500 dark:text-gray-400">Last Used</th>
+                    <th class="text-right px-4 py-3 font-medium text-gray-500 dark:text-gray-400">Actions</th>
+                </tr>
+            </thead>
+            <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
+                @forelse($keys as $key)
+                <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50">
+                    <td class="px-4 py-3 text-gray-900 dark:text-gray-100 font-medium">
+                        {{ $key->instance?->academy_name_ar ?? $key->instance?->app_name ?? 'Unknown' }}
+                    </td>
+                    <td class="px-4 py-3" x-data="{ show: false, copied: false }">
+                        <div class="flex items-center gap-2">
+                            <code class="text-xs font-mono text-gray-500 dark:text-gray-400" x-text="show ? '{{ $key->api_key }}' : '{{ Str::mask($key->api_key, '*', 8) }}'"></code>
+                            <button @click="show = !show" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" title="Toggle visibility">
+                                <svg x-show="!show" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
+                                <svg x-show="show" x-cloak class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.542-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.542 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"/></svg>
+                            </button>
+                            <button @click="navigator.clipboard.writeText('{{ $key->api_key }}'); copied = true; setTimeout(() => copied = false, 2000)"
+                                    class="text-gray-400 hover:text-blue-600 dark:hover:text-blue-400" title="Copy">
+                                <svg x-show="!copied" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
+                                <svg x-show="copied" x-cloak class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
+                            </button>
+                        </div>
+                    </td>
+                    <td class="px-4 py-3">
+                        <span class="inline-block px-2 py-0.5 text-xs font-medium rounded-full {{ $key->is_active ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300' : 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300' }}">
+                            {{ $key->is_active ? 'Active' : 'Revoked' }}
+                        </span>
+                    </td>
+                    <td class="px-4 py-3 text-right">
+                        @if($editingRateLimit === $key->id)
+                        <div class="flex items-center gap-1 justify-end">
+                            <input type="number" wire:model="newRateLimit" class="w-20 rounded border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 text-xs">
+                            <button wire:click="saveRateLimit" class="text-green-600 hover:text-green-800 dark:text-green-400">
+                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
+                            </button>
+                            <button wire:click="cancelEditRateLimit" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
+                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
+                            </button>
+                        </div>
+                        @else
+                        <button wire:click="startEditRateLimit({{ $key->id }}, {{ $key->rate_limit_per_hour }})"
+                                class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 text-sm">
+                            {{ $key->rate_limit_per_hour }}/hr
+                        </button>
+                        @endif
+                    </td>
+                    <td class="px-4 py-3 text-right text-gray-600 dark:text-gray-400">
+                        {{ $key->messages_sent_today }}
+                    </td>
+                    <td class="px-4 py-3 text-gray-500 dark:text-gray-400 text-xs">
+                        {{ $key->last_used_at?->diffForHumans() ?? 'Never' }}
+                    </td>
+                    <td class="px-4 py-3 text-right">
+                        <div class="flex items-center gap-2 justify-end">
+                            @if($key->is_active)
+                            <button wire:click="revokeKey({{ $key->id }})"
+                                    wire:confirm="Are you sure you want to revoke this key?"
+                                    class="text-xs text-red-600 dark:text-red-400 hover:underline">Revoke</button>
+                            @else
+                            <button wire:click="activateKey({{ $key->id }})"
+                                    class="text-xs text-green-600 dark:text-green-400 hover:underline">Activate</button>
+                            @endif
+                            <button wire:click="generateKey({{ $key->instance_id }})"
+                                    wire:confirm="This will replace the existing key. Continue?"
+                                    class="text-xs text-blue-600 dark:text-blue-400 hover:underline">Regenerate</button>
+                        </div>
+                    </td>
+                </tr>
+                @empty
+                <tr>
+                    <td colspan="7" class="px-4 py-12 text-center text-gray-400 dark:text-gray-500">
+                        No API keys generated yet.
+                    </td>
+                </tr>
+                @endforelse
+            </tbody>
+        </table>
+    </div>
+</div>

resources/views/livewire/messaging-log.blade.php

+<div>
+    {{-- Header --}}
+    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-6">
+        <div class="flex items-center gap-3">
+            <a href="{{ route('messaging.index') }}" wire:navigate class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition">
+                <svg class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
+            </a>
+            <h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Message Log</h2>
+        </div>
+    </div>
+
+    {{-- Filters --}}
+    <div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-4 mb-4">
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-3">
+            <input type="text" wire:model.live.debounce.300ms="search" placeholder="Search phone..."
+                   class="rounded-lg border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 text-sm focus:border-blue-500 focus:ring-blue-500">
+            <select wire:model.live="instance_id" class="rounded-lg border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 text-sm focus:border-blue-500 focus:ring-blue-500">
+                <option value="">All Instances</option>
+                @foreach($instances as $inst)
+                    <option value="{{ $inst->id }}">{{ $inst->academy_name_ar ?? $inst->app_name }}</option>
+                @endforeach
+            </select>
+            <select wire:model.live="status" class="rounded-lg border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 text-sm focus:border-blue-500 focus:ring-blue-500">
+                <option value="">All Statuses</option>
+                <option value="queued">Queued</option>
+                <option value="sent">Sent</option>
+                <option value="delivered">Delivered</option>
+                <option value="read">Read</option>
+                <option value="failed">Failed</option>
+            </select>
+            <select wire:model.live="type" class="rounded-lg border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 text-sm focus:border-blue-500 focus:ring-blue-500">
+                <option value="">All Types</option>
+                <option value="text">Text</option>
+                <option value="template">Template</option>
+                <option value="image">Image</option>
+                <option value="document">Document</option>
+            </select>
+            <input type="date" wire:model.live="dateFrom" placeholder="From..."
+                   class="rounded-lg border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 text-sm focus:border-blue-500 focus:ring-blue-500">
+        </div>
+    </div>
+
+    {{-- Table --}}
+    <div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden">
+        <div class="overflow-x-auto">
+            <table class="w-full text-sm">
+                <thead class="bg-gray-50 dark:bg-gray-800/50 border-b border-gray-200 dark:border-gray-800">
+                    <tr>
+                        <th class="text-left px-4 py-3 font-medium text-gray-500 dark:text-gray-400">Time</th>
+                        <th class="text-left px-4 py-3 font-medium text-gray-500 dark:text-gray-400">Instance</th>
+                        <th class="text-left px-4 py-3 font-medium text-gray-500 dark:text-gray-400">Phone</th>
+                        <th class="text-left px-4 py-3 font-medium text-gray-500 dark:text-gray-400">Type</th>
+                        <th class="text-left px-4 py-3 font-medium text-gray-500 dark:text-gray-400">Content</th>
+                        <th class="text-left px-4 py-3 font-medium text-gray-500 dark:text-gray-400">Status</th>
+                        <th class="text-left px-4 py-3 font-medium text-gray-500 dark:text-gray-400">External ID</th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-gray-100 dark:divide-gray-800" wire:loading.class="opacity-50">
+                    @forelse($logs as $log)
+                    <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50">
+                        <td class="px-4 py-3 text-gray-600 dark:text-gray-400 whitespace-nowrap">
+                            {{ $log->created_at->format('M d, H:i') }}
+                        </td>
+                        <td class="px-4 py-3 text-gray-900 dark:text-gray-100 font-medium">
+                            {{ $log->instance?->academy_name_ar ?? $log->instance?->app_name ?? '-' }}
+                        </td>
+                        <td class="px-4 py-3 text-gray-600 dark:text-gray-400 font-mono text-xs" dir="ltr">
+                            {{ $log->recipient_phone }}
+                        </td>
+                        <td class="px-4 py-3">
+                            <span class="inline-block px-2 py-0.5 text-xs font-medium rounded-full bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400">
+                                {{ $log->message_type }}
+                            </span>
+                        </td>
+                        <td class="px-4 py-3 text-gray-600 dark:text-gray-400 max-w-xs truncate">
+                            {{ $log->content ?? $log->template_name ?? '-' }}
+                        </td>
+                        <td class="px-4 py-3">
+                            @php
+                                $statusColors = [
+                                    'queued' => 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300',
+                                    'sent' => 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300',
+                                    'delivered' => 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300',
+                                    'read' => 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300',
+                                    'failed' => 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300',
+                                ];
+                            @endphp
+                            <span class="inline-block px-2 py-0.5 text-xs font-medium rounded-full {{ $statusColors[$log->status] ?? 'bg-gray-100 text-gray-600' }}">
+                                {{ $log->status }}
+                            </span>
+                        </td>
+                        <td class="px-4 py-3 text-gray-400 dark:text-gray-500 font-mono text-xs">
+                            {{ $log->external_id ? Str::limit($log->external_id, 15) : '-' }}
+                        </td>
+                    </tr>
+                    @empty
+                    <tr>
+                        <td colspan="7" class="px-4 py-12 text-center text-gray-400 dark:text-gray-500">
+                            No messages found.
+                        </td>
+                    </tr>
+                    @endforelse
+                </tbody>
+            </table>
+        </div>
+    </div>
+
+    <div class="mt-4">
+        {{ $logs->links() }}
+    </div>
+</div>

routes/web.php

 <?php
 
+use App\Http\Controllers\MessagingApiController;
+use App\Http\Controllers\WhatsAppWebhookController;
 use App\Livewire\AuditLogList;
 use App\Livewire\BillingOverview;
 use App\Livewire\ClientList;
@@ -9,6 +11,10 @@
 use App\Livewire\InstanceList;
 use App\Livewire\InstanceShow;
 use App\Livewire\Login;
+use App\Livewire\MessagingCompose;
+use App\Livewire\MessagingDashboard;
+use App\Livewire\MessagingKeys;
+use App\Livewire\MessagingLog;
 use App\Livewire\PlanList;
 use App\Livewire\RecordPayment;
 use Illuminate\Support\Facades\Route;
@@ -36,6 +42,12 @@
     Route::get('/plans', PlanList::class)->name('plans.index');
 
     Route::get('/audit', AuditLogList::class)->name('audit.index');
+
+    // Messaging Hub UI
+    Route::get('/messaging', MessagingDashboard::class)->name('messaging.index');
+    Route::get('/messaging/compose', MessagingCompose::class)->name('messaging.compose');
+    Route::get('/messaging/log', MessagingLog::class)->name('messaging.log');
+    Route::get('/messaging/keys', MessagingKeys::class)->name('messaging.keys');
 });
 
 // Client portal — public, authenticated by instance UUID token
@@ -44,3 +56,13 @@
 // Webhook endpoint for instance self-reports (no auth, uses token)
 Route::post('/api/webhook/fee-report', [\App\Http\Controllers\FeeWebhookController::class, 'store'])
     ->name('api.fee-report');
+
+// Messaging Hub API (stateless, auth via X-Messaging-Key header)
+Route::prefix('api/messaging')->group(function () {
+    Route::post('/send', [MessagingApiController::class, 'send'])->name('api.messaging.send');
+    Route::get('/status/{externalId}', [MessagingApiController::class, 'status'])->name('api.messaging.status');
+});
+
+// WhatsApp Webhook (public, no auth — Meta verification)
+Route::get('/webhook/whatsapp', [WhatsAppWebhookController::class, 'verify'])->name('webhook.whatsapp.verify');
+Route::post('/webhook/whatsapp', [WhatsAppWebhookController::class, 'handle'])->name('webhook.whatsapp.handle');