diff --git a/.env.example b/.env.example
index 28c7af3..485c980 100644
--- a/.env.example
+++ b/.env.example
@@ -3,6 +3,7 @@ APP_ENV=local
 APP_KEY=
 APP_DEBUG=true
 APP_URL=http://localhost:8000
+APP_TIMEZONE=Europe/Paris
 
 APP_LOCALE=fr
 APP_FALLBACK_LOCALE=fr
@@ -87,4 +88,10 @@ LAVERIE_BOOKING_PENALTY_AMOUNT=3.00
 LAVERIE_MACHINE_OFFLINE_THRESHOLD_MINUTES=10
 
 # Paiements
-LAVERIE_PAYMENT_PROVIDER=simulated
+LAVERIE_PAYMENT_PROVIDER=stripe
+LAVERIE_TOP_UP_MIN=5
+LAVERIE_TOP_UP_MAX=150
+
+STRIPE_KEY=pk_test_51TpANRJRUgjTIwfBR9PoU4Lu201yD5R0JzvOv8Nmyva7ISX3GJPJ3IX4lSqnkg13siYwi3B9Qq0tIpEj6VCzeVFB00PSt9o0OA
+STRIPE_SECRET=sk_test_51TpANRJRUgjTIwfB2jUa5nr7IpolnWNwwi0MQHbCG6JERu7npCmBrJPm6wbyTfo0lkZUh7PYyuHQ8qeecEfcfSXa0007BAKC7T
+STRIPE_WEBHOOK_SECRET=
diff --git a/app/Http/Controllers/Api/V1/HealthController.php b/app/Http/Controllers/Api/V1/HealthController.php
index 0ba1b4e..2dc8065 100644
--- a/app/Http/Controllers/Api/V1/HealthController.php
+++ b/app/Http/Controllers/Api/V1/HealthController.php
@@ -17,6 +17,7 @@ class HealthController extends Controller
         return $this->success([
             'status' => 'ok',
             'service' => 'laverie-api',
+            'timezone' => config('app.timezone'),
             'timestamp' => now()->toIso8601String(),
         ]);
     }
diff --git a/app/Http/Controllers/Api/V1/WalletController.php b/app/Http/Controllers/Api/V1/WalletController.php
index a139c83..ccfd7c9 100644
--- a/app/Http/Controllers/Api/V1/WalletController.php
+++ b/app/Http/Controllers/Api/V1/WalletController.php
@@ -22,7 +22,6 @@ class WalletController extends Controller
 
     public function __construct(
         private readonly WalletService $walletService,
-        private readonly PaymentService $paymentService,
     ) {}
 
     public function index(Request $request): JsonResponse
@@ -63,9 +62,9 @@ class WalletController extends Controller
         ]);
     }
 
-    public function initiateTopUp(InitiateTopUpRequest $request): JsonResponse
+    public function initiateTopUp(InitiateTopUpRequest $request, PaymentService $paymentService): JsonResponse
     {
-        $payment = $this->paymentService->initiateTopUp(
+        $payment = $paymentService->initiateTopUp(
             $request->user(),
             (float) $request->input('amount'),
             $request->string('idempotency_key')->toString(),
@@ -77,9 +76,9 @@ class WalletController extends Controller
         ], 'Rechargement initié.');
     }
 
-    public function confirmTopUp(ConfirmTopUpRequest $request): JsonResponse
+    public function confirmTopUp(ConfirmTopUpRequest $request, PaymentService $paymentService): JsonResponse
     {
-        $payment = $this->paymentService->confirmTopUp(
+        $payment = $paymentService->confirmTopUp(
             $request->string('payment_uuid')->toString(),
         );
 
@@ -93,9 +92,20 @@ class WalletController extends Controller
         ], 'Rechargement confirmé.');
     }
 
-    public function webhook(Request $request, string $provider): JsonResponse
+    public function webhook(Request $request, string $provider, PaymentService $paymentService): JsonResponse
     {
-        $this->paymentService->handleWebhook($provider, $request->all());
+        if ($provider === 'stripe') {
+            try {
+                $paymentService->handleStripeWebhook(
+                    $request->getContent(),
+                    $request->header('Stripe-Signature', ''),
+                );
+            } catch (\InvalidArgumentException $e) {
+                return $this->error($e->getMessage(), 400);
+            }
+        } else {
+            $paymentService->handleWebhook($provider, $request->all());
+        }
 
         return $this->success(message: 'Webhook traité.');
     }
diff --git a/app/Http/Controllers/Supervisor/BookingPageController.php b/app/Http/Controllers/Supervisor/BookingPageController.php
index 39e940d..45a7107 100644
--- a/app/Http/Controllers/Supervisor/BookingPageController.php
+++ b/app/Http/Controllers/Supervisor/BookingPageController.php
@@ -19,6 +19,8 @@ class BookingPageController extends Controller
             ->with(['user:id,first_name,last_name,email', 'machine:id,uuid,name,establishment_id', 'machine.establishment:id,name']);
 
         $this->scopeMachineRelationQuery($query);
+        $this->applyEstablishmentFilter($request, $query, 'machine');
+        $this->applyUserSearchFilter($request, $query);
 
         if ($request->filled('status')) {
             $query->where('status', $request->string('status'));
@@ -29,8 +31,14 @@ class BookingPageController extends Controller
         }
 
         $bookings = $query
-            ->orderByDesc('slot_start')
-            ->paginate(20)
+            ->tap(fn ($builder) => $this->applySort($request, $builder, [
+                'slot_start' => 'bookings.slot_start',
+                'user' => fn ($builder, string $direction) => $this->sortByRelatedUser($builder, 'bookings', 'user_id', $direction),
+                'machine' => fn ($builder, string $direction) => $this->sortByRelatedMachine($builder, 'bookings', $direction),
+                'status' => 'bookings.status',
+                'booking_fee' => 'bookings.booking_fee',
+            ], 'slot_start', 'desc'))
+            ->paginate($this->supervisorListPerPage($request))
             ->withQueryString()
             ->through(fn (Booking $booking) => [
                 'uuid' => $booking->uuid,
@@ -54,9 +62,15 @@ class BookingPageController extends Controller
 
         return Inertia::render('Supervisor/Bookings/Index', [
             'bookings' => $bookings,
+            'establishments' => $this->establishmentOptions(),
             'filters' => [
+                'establishment_id' => $request->filled('establishment_id') ? (int) $request->input('establishment_id') : null,
+                'user' => $request->string('user')->toString() ?: null,
                 'status' => $request->string('status')->toString() ?: null,
                 'date' => $request->string('date')->toString() ?: null,
+                'sort' => $request->string('sort')->toString() ?: 'slot_start',
+                'direction' => $request->string('direction')->toString() === 'asc' ? 'asc' : 'desc',
+                'per_page' => $this->supervisorListPerPage($request),
             ],
             'statusOptions' => $this->statusOptions(),
         ]);
diff --git a/app/Http/Controllers/Supervisor/Concerns/ScopesSupervisorResources.php b/app/Http/Controllers/Supervisor/Concerns/ScopesSupervisorResources.php
index 11ba01f..91d7c27 100644
--- a/app/Http/Controllers/Supervisor/Concerns/ScopesSupervisorResources.php
+++ b/app/Http/Controllers/Supervisor/Concerns/ScopesSupervisorResources.php
@@ -2,8 +2,10 @@
 
 namespace App\Http\Controllers\Supervisor\Concerns;
 
+use App\Models\Establishment;
 use App\Models\Supervisor;
 use Illuminate\Database\Eloquent\Builder;
+use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Auth;
 
 trait ScopesSupervisorResources
@@ -16,6 +18,21 @@ trait ScopesSupervisorResources
         return $supervisor;
     }
 
+    protected function supervisorListPerPage(Request $request): int
+    {
+        $perPage = $request->integer('per_page', 10);
+
+        return in_array($perPage, $this->supervisorPerPageOptions(), true) ? $perPage : 10;
+    }
+
+    /**
+     * @return array<int, int>
+     */
+    protected function supervisorPerPageOptions(): array
+    {
+        return [10, 25, 50];
+    }
+
     protected function scopeEstablishmentQuery(Builder $query, string $establishmentColumn = 'establishment_id'): Builder
     {
         $supervisor = $this->supervisor();
@@ -47,4 +64,124 @@ trait ScopesSupervisorResources
             }
         });
     }
+
+    protected function applyEstablishmentFilter(Request $request, Builder $query, string $mode = 'direct'): void
+    {
+        if (! $request->filled('establishment_id')) {
+            return;
+        }
+
+        $establishmentId = (int) $request->input('establishment_id');
+        $this->assertEstablishmentAccessible($establishmentId);
+
+        if ($mode === 'machine') {
+            $query->whereHas('machine', fn (Builder $query) => $query->where('establishment_id', $establishmentId));
+        } else {
+            $query->where('establishment_id', $establishmentId);
+        }
+    }
+
+    protected function applyUserSearchFilter(Request $request, Builder $query): void
+    {
+        if (! $request->filled('user')) {
+            return;
+        }
+
+        $search = $request->string('user');
+
+        $query->whereHas('user', function (Builder $query) use ($search) {
+            $query->where(function (Builder $query) use ($search) {
+                $query->where('first_name', 'like', "%{$search}%")
+                    ->orWhere('last_name', 'like', "%{$search}%")
+                    ->orWhere('email', 'like', "%{$search}%");
+            });
+        });
+    }
+
+    protected function assertEstablishmentAccessible(int $establishmentId): void
+    {
+        $supervisor = $this->supervisor();
+
+        $exists = Establishment::query()
+            ->where('id', $establishmentId)
+            ->where('organization_id', $supervisor->organization_id)
+            ->when($supervisor->establishment_id, fn ($query) => $query->where('id', $supervisor->establishment_id))
+            ->exists();
+
+        abort_unless($exists, 403);
+    }
+
+    /**
+     * @return array<int, array{id: int, name: string}>
+     */
+    protected function establishmentOptions(): array
+    {
+        $supervisor = $this->supervisor();
+
+        return Establishment::query()
+            ->where('organization_id', $supervisor->organization_id)
+            ->when($supervisor->establishment_id, fn ($query) => $query->where('id', $supervisor->establishment_id))
+            ->orderBy('name')
+            ->get(['id', 'name'])
+            ->map(fn (Establishment $establishment) => [
+                'id' => $establishment->id,
+                'name' => $establishment->name,
+            ])
+            ->all();
+    }
+
+    /**
+     * @param  array<string, string|callable(Builder, string): void>  $sortableColumns
+     */
+    protected function applySort(
+        Request $request,
+        Builder $query,
+        array $sortableColumns,
+        string $defaultColumn,
+        string $defaultDirection = 'asc',
+    ): void {
+        $sort = $request->string('sort')->toString();
+        $direction = strtolower($request->string('direction')->toString()) === 'desc' ? 'desc' : 'asc';
+
+        if ($sort === '' || ! array_key_exists($sort, $sortableColumns)) {
+            $sort = $defaultColumn;
+            $direction = $defaultDirection;
+        }
+
+        $handler = $sortableColumns[$sort];
+
+        if (is_callable($handler)) {
+            $handler($query, $direction);
+
+            return;
+        }
+
+        $query->orderBy($handler, $direction);
+    }
+
+    protected function sortByRelatedUser(Builder $query, string $parentTable, string $foreignKey, string $direction): void
+    {
+        $query->leftJoin('users', "{$parentTable}.{$foreignKey}", '=', 'users.id')
+            ->orderBy('users.last_name', $direction)
+            ->orderBy('users.first_name', $direction)
+            ->select("{$parentTable}.*");
+    }
+
+    protected function sortByRelatedMachine(Builder $query, string $parentTable, string $direction): void
+    {
+        $query->leftJoin('machines', "{$parentTable}.machine_id", '=', 'machines.id')
+            ->orderBy('machines.name', $direction)
+            ->select("{$parentTable}.*");
+    }
+
+    protected function sortByRelatedEstablishment(
+        Builder $query,
+        string $parentTable,
+        string $foreignKeyColumn,
+        string $direction,
+    ): void {
+        $query->leftJoin('establishments', "{$parentTable}.{$foreignKeyColumn}", '=', 'establishments.id')
+            ->orderBy('establishments.name', $direction)
+            ->select("{$parentTable}.*");
+    }
 }
diff --git a/app/Http/Controllers/Supervisor/DashboardController.php b/app/Http/Controllers/Supervisor/DashboardController.php
index 641512f..b469320 100644
--- a/app/Http/Controllers/Supervisor/DashboardController.php
+++ b/app/Http/Controllers/Supervisor/DashboardController.php
@@ -4,7 +4,9 @@ namespace App\Http\Controllers\Supervisor;
 
 use App\Http\Controllers\Controller;
 use App\Http\Controllers\Supervisor\Concerns\ScopesSupervisorResources;
+use App\Models\Supervisor;
 use App\Services\DashboardService;
+use Illuminate\Http\Request;
 use Inertia\Inertia;
 use Inertia\Response;
 
@@ -12,14 +14,40 @@ class DashboardController extends Controller
 {
     use ScopesSupervisorResources;
 
-    public function index(DashboardService $dashboardService): Response
+    public function index(Request $request, DashboardService $dashboardService): Response
     {
         $supervisor = $this->supervisor();
+        $establishmentFilter = $this->resolveDashboardEstablishmentFilter($request, $supervisor);
+        $establishments = $this->establishmentOptions();
 
         return Inertia::render('Supervisor/Dashboard', [
-            'kpis' => $dashboardService->getKpis($supervisor),
-            'alerts' => $dashboardService->getAlerts($supervisor),
-            'machinesOverview' => $dashboardService->getMachinesOverview($supervisor),
+            'kpis' => $dashboardService->getKpis($supervisor, $establishmentFilter),
+            'alerts' => $dashboardService->getAlerts($supervisor, $establishmentFilter),
+            'machinesOverview' => $dashboardService->getMachinesOverview($supervisor, $establishmentFilter),
+            'machineStatusBreakdown' => $dashboardService->getMachineStatusBreakdown($supervisor, $establishmentFilter),
+            'recentWashes' => $dashboardService->getRecentWashes($supervisor, $establishmentFilter),
+            'context' => $dashboardService->getContext($supervisor, $establishmentFilter),
+            'establishments' => $establishments,
+            'showEstablishmentFilter' => $supervisor->establishment_id === null && count($establishments) > 1,
+            'filters' => [
+                'establishment_id' => $establishmentFilter,
+            ],
         ]);
     }
+
+    private function resolveDashboardEstablishmentFilter(Request $request, Supervisor $supervisor): ?int
+    {
+        if ($supervisor->establishment_id !== null) {
+            return $supervisor->establishment_id;
+        }
+
+        if (! $request->filled('establishment_id')) {
+            return null;
+        }
+
+        $establishmentId = (int) $request->input('establishment_id');
+        $this->assertEstablishmentAccessible($establishmentId);
+
+        return $establishmentId;
+    }
 }
diff --git a/app/Http/Controllers/Supervisor/MachinePageController.php b/app/Http/Controllers/Supervisor/MachinePageController.php
index 396b102..178514c 100644
--- a/app/Http/Controllers/Supervisor/MachinePageController.php
+++ b/app/Http/Controllers/Supervisor/MachinePageController.php
@@ -4,9 +4,17 @@ namespace App\Http\Controllers\Supervisor;
 
 use App\Http\Controllers\Controller;
 use App\Http\Controllers\Supervisor\Concerns\ScopesSupervisorResources;
+use App\Models\Establishment;
 use App\Models\Machine;
+use App\Models\MachineCommand;
 use App\Models\MachineEvent;
+use App\Models\MachineIntegration;
+use App\Models\MachineStatusHistory;
+use App\Models\PricingRule;
+use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\Request;
+use Illuminate\Support\Str;
+use Illuminate\Validation\Rule;
 use Inertia\Inertia;
 use Inertia\Response;
 
@@ -20,6 +28,7 @@ class MachinePageController extends Controller
             ->with('establishment:id,name,uuid');
 
         $this->scopeEstablishmentQuery($query);
+        $this->applyEstablishmentFilter($request, $query);
 
         if ($request->filled('status')) {
             $query->where('status', $request->string('status'));
@@ -38,23 +47,100 @@ class MachinePageController extends Controller
         }
 
         $machines = $query
-            ->orderBy('name')
-            ->paginate(20)
+            ->tap(fn ($builder) => $this->applySort($request, $builder, [
+                'name' => 'machines.name',
+                'establishment' => fn ($builder, string $direction) => $builder
+                    ->leftJoin('establishments', 'machines.establishment_id', '=', 'establishments.id')
+                    ->orderBy('establishments.name', $direction)
+                    ->select('machines.*'),
+                'type' => 'machines.type',
+                'status' => 'machines.status',
+                'last_heartbeat_at' => 'machines.last_heartbeat_at',
+            ], 'name', 'asc'))
+            ->paginate($this->supervisorListPerPage($request))
             ->withQueryString()
             ->through(fn (Machine $machine) => $this->formatMachineListItem($machine));
 
         return Inertia::render('Supervisor/Machines/Index', [
             'machines' => $machines,
+            'establishments' => $this->establishmentOptions(),
+            'canManageMachines' => $this->canManageMachines(),
             'filters' => [
+                'establishment_id' => $request->filled('establishment_id') ? (int) $request->input('establishment_id') : null,
                 'status' => $request->string('status')->toString() ?: null,
                 'type' => $request->string('type')->toString() ?: null,
                 'search' => $request->string('search')->toString() ?: null,
+                'sort' => $request->string('sort')->toString() ?: 'name',
+                'direction' => $request->string('direction')->toString() === 'desc' ? 'desc' : 'asc',
+                'per_page' => $this->supervisorListPerPage($request),
             ],
             'statusOptions' => $this->statusOptions(),
             'typeOptions' => $this->typeOptions(),
         ]);
     }
 
+    public function store(Request $request): RedirectResponse
+    {
+        abort_unless($this->canManageMachines(), 403);
+
+        $validated = $this->validateMachine($request);
+        $this->assertEstablishmentAccessible((int) $validated['establishment_id']);
+
+        $validated['qr_code'] = $this->resolveQrCode($validated['qr_code'] ?? null);
+        $validated['status'] = $validated['status'] ?? 'available';
+
+        $machine = Machine::query()->create($validated);
+        $this->createSimulatedIntegration($machine);
+
+        return redirect()->route('supervisor.machines.index')
+            ->with('success', 'Machine créée.');
+    }
+
+    public function update(Request $request, string $uuid): RedirectResponse
+    {
+        abort_unless($this->canManageMachines(), 403);
+
+        $machine = $this->findAccessibleMachine($uuid);
+        $validated = $this->validateMachine($request, $machine);
+        $this->assertEstablishmentAccessible((int) $validated['establishment_id']);
+
+        if (array_key_exists('qr_code', $validated) && blank($validated['qr_code'])) {
+            unset($validated['qr_code']);
+        }
+
+        $machine->update($validated);
+
+        return redirect()->route('supervisor.machines.index')
+            ->with('success', 'Machine mise à jour.');
+    }
+
+    public function destroy(string $uuid): RedirectResponse
+    {
+        abort_unless($this->canManageMachines(), 403);
+
+        $machine = $this->findAccessibleMachine($uuid);
+
+        if (in_array($machine->status, ['running', 'reserved'], true)) {
+            return redirect()->route('supervisor.machines.index')
+                ->withErrors(['delete' => 'Impossible de supprimer une machine en cours d\'utilisation.']);
+        }
+
+        if ($machine->bookings()->exists() || $machine->washes()->exists()) {
+            return redirect()->route('supervisor.machines.index')
+                ->withErrors(['delete' => 'Impossible de supprimer une machine avec un historique de réservations ou de lavages.']);
+        }
+
+        PricingRule::query()->where('machine_id', $machine->id)->update(['machine_id' => null]);
+        MachineCommand::query()->where('machine_id', $machine->id)->delete();
+        MachineEvent::query()->where('machine_id', $machine->id)->delete();
+        MachineStatusHistory::query()->where('machine_id', $machine->id)->delete();
+        $machine->machineIntegration()?->delete();
+        $machine->delete();
+
+        return redirect()->route('supervisor.machines.index')
+            ->with('success', 'Machine supprimée.');
+    }
+
     public function show(string $uuid): Response
     {
         $query = Machine::query()->where('uuid', $uuid);
@@ -115,9 +201,11 @@ class MachinePageController extends Controller
     {
         return [
             'uuid' => $machine->uuid,
+            'establishment_id' => $machine->establishment_id,
             'name' => $machine->name,
             'type' => $machine->type,
             'type_label' => $this->typeLabel($machine->type),
+            'qr_code' => $machine->qr_code,
             'status' => $machine->status,
             'status_label' => $this->statusLabel($machine->status),
             'establishment_name' => $machine->establishment?->name,
@@ -125,6 +213,68 @@ class MachinePageController extends Controller
         ];
     }
 
+    /**
+     * @return array<string, mixed>
+     */
+    private function validateMachine(Request $request, ?Machine $machine = null): array
+    {
+        return $request->validate([
+            'establishment_id' => ['required', 'integer', 'exists:establishments,id'],
+            'name' => ['required', 'string', 'max:100'],
+            'type' => ['required', 'in:washer_small,washer_large,dryer_small,dryer_large'],
+            'qr_code' => [
+                'nullable',
+                'string',
+                'max:255',
+                Rule::unique('machines', 'qr_code')->ignore($machine?->id),
+            ],
+            'status' => ['required', 'in:available,reserved,running,maintenance,offline,error'],
+        ]);
+    }
+
+    private function findAccessibleMachine(string $uuid): Machine
+    {
+        $query = Machine::query()->where('uuid', $uuid);
+        $this->scopeEstablishmentQuery($query);
+
+        return $query->firstOrFail();
+    }
+
+    private function resolveQrCode(?string $qrCode): string
+    {
+        if (filled($qrCode)) {
+            return $qrCode;
+        }
+
+        do {
+            $candidate = 'LAVERIE-'.strtoupper(Str::random(8));
+        } while (Machine::query()->where('qr_code', $candidate)->exists());
+
+        return $candidate;
+    }
+
+    private function createSimulatedIntegration(Machine $machine): void
+    {
+        $machine->load('establishment');
+
+        MachineIntegration::query()->create([
+            'machine_id' => $machine->id,
+            'provider' => config('laverie.simulation.provider_name', 'simulated'),
+            'external_machine_id' => 'SIM-'.$machine->uuid,
+            'external_site_id' => 'SITE-'.$machine->establishment?->uuid,
+            'mode' => 'simulated',
+            'config' => [
+                'cycle_duration_seconds' => config('laverie.simulation.cycle_duration_seconds', 30),
+            ],
+            'is_active' => true,
+        ]);
+    }
+
+    private function canManageMachines(): bool
+    {
+        return $this->supervisor()->role !== 'viewer';
+    }
+
     /**
      * @return array<string, string>
      */
diff --git a/app/Http/Controllers/Supervisor/OrganizationPageController.php b/app/Http/Controllers/Supervisor/OrganizationPageController.php
new file mode 100644
index 0000000..952ec10
--- /dev/null
+++ b/app/Http/Controllers/Supervisor/OrganizationPageController.php
@@ -0,0 +1,276 @@
+<?php
+
+namespace App\Http\Controllers\Supervisor;
+
+use App\Http\Controllers\Controller;
+use App\Http\Controllers\Supervisor\Concerns\ScopesSupervisorResources;
+use App\Models\Establishment;
+use App\Services\GeocodingService;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\RedirectResponse;
+use Illuminate\Http\Request;
+use Illuminate\Validation\ValidationException;
+use Inertia\Inertia;
+use Inertia\Response;
+
+class OrganizationPageController extends Controller
+{
+    use ScopesSupervisorResources;
+
+    public function __construct(private GeocodingService $geocoding) {}
+
+    public function index(Request $request): Response
+    {
+        $supervisor = $this->supervisor();
+
+        $baseQuery = Establishment::query()
+            ->where('organization_id', $supervisor->organization_id);
+
+        if ($supervisor->establishment_id !== null) {
+            $baseQuery->where('id', $supervisor->establishment_id);
+        }
+
+        $totalCount = (clone $baseQuery)->count();
+        $viewMode = $totalCount === 1 ? 'single' : 'list';
+
+        $canManageEstablishments = $this->canManageEstablishments();
+        $canCreateEstablishments = $this->canCreateEstablishments();
+
+        if ($viewMode === 'single') {
+            $establishment = (clone $baseQuery)->withCount('machines')->first();
+
+            return Inertia::render('Supervisor/Organizations/Index', [
+                'establishments' => [$this->formatEstablishment($establishment)],
+                'viewMode' => 'single',
+                'canManageEstablishments' => $canManageEstablishments,
+                'canCreateEstablishments' => $canCreateEstablishments,
+                'filters' => [],
+            ]);
+        }
+
+        $query = (clone $baseQuery)->withCount('machines');
+
+        if ($request->filled('search')) {
+            $search = $request->string('search');
+            $query->where(function ($builder) use ($search) {
+                $builder->where('name', 'like', "%{$search}%")
+                    ->orWhere('address', 'like', "%{$search}%")
+                    ->orWhere('city', 'like', "%{$search}%")
+                    ->orWhere('zip_code', 'like', "%{$search}%");
+            });
+        }
+
+        if ($request->has('is_active') && $request->string('is_active')->toString() !== '') {
+            $query->where('is_active', $request->boolean('is_active'));
+        }
+
+        $establishments = $query
+            ->tap(fn ($builder) => $this->applySort($request, $builder, [
+                'name' => 'name',
+                'city' => 'city',
+                'machines_count' => 'machines_count',
+                'is_active' => 'is_active',
+            ], 'name', 'asc'))
+            ->paginate($this->supervisorListPerPage($request))
+            ->withQueryString()
+            ->through(fn (Establishment $establishment) => $this->formatEstablishment($establishment));
+
+        return Inertia::render('Supervisor/Organizations/Index', [
+            'establishments' => $establishments,
+            'viewMode' => 'list',
+            'canManageEstablishments' => $canManageEstablishments,
+            'canCreateEstablishments' => $canCreateEstablishments,
+            'filters' => [
+                'search' => $request->string('search')->toString() ?: null,
+                'is_active' => $request->has('is_active') && $request->string('is_active')->toString() !== ''
+                    ? ($request->boolean('is_active') ? '1' : '0')
+                    : null,
+                'sort' => $request->string('sort')->toString() ?: 'name',
+                'direction' => $request->string('direction')->toString() === 'desc' ? 'desc' : 'asc',
+                'per_page' => $this->supervisorListPerPage($request),
+            ],
+        ]);
+    }
+
+    public function searchAddresses(Request $request): JsonResponse
+    {
+        abort_unless($this->canManageEstablishments(), 403);
+
+        $validated = $request->validate([
+            'q' => ['required', 'string', 'min:3', 'max:200'],
+        ]);
+
+        return response()->json(
+            $this->geocoding->search($validated['q']),
+        );
+    }
+
+    public function storeEstablishment(Request $request): RedirectResponse
+    {
+        abort_unless($this->canManageEstablishments(), 403);
+        abort_if($this->supervisor()->establishment_id !== null, 403);
+
+        $validated = $this->prepareEstablishmentData(
+            $request->validate($this->establishmentRules()),
+        );
+        $validated['organization_id'] = $this->supervisor()->organization_id;
+
+        Establishment::query()->create($validated);
+
+        return redirect()->route('supervisor.organizations.index')
+            ->with('success', 'Enseigne créée.');
+    }
+
+    public function updateEstablishment(Request $request, int $id): RedirectResponse
+    {
+        abort_unless($this->canManageEstablishments(), 403);
+
+        $establishment = $this->findAccessibleEstablishment($id);
+        $validated = $this->prepareEstablishmentData(
+            $request->validate($this->establishmentRules()),
+        );
+
+        if (! empty($validated['is_active']) && ! $establishment->is_active) {
+            $this->validateEstablishmentReadyForActivation($validated, $establishment);
+        }
+
+        $establishment->update($validated);
+
+        return redirect()->route('supervisor.organizations.index')
+            ->with('success', 'Enseigne mise à jour.');
+    }
+
+    public function toggleEstablishmentActive(int $id): RedirectResponse
+    {
+        abort_unless($this->canManageEstablishments(), 403);
+
+        $establishment = $this->findAccessibleEstablishment($id);
+        $isActive = ! $establishment->is_active;
+
+        if ($isActive) {
+            $this->validateEstablishmentReadyForActivation([
+                'name' => $establishment->name,
+                'address' => $establishment->address,
+                'timezone' => $establishment->timezone,
+            ], $establishment);
+        }
+
+        $establishment->update(['is_active' => $isActive]);
+
+        return redirect()->route('supervisor.organizations.index')
+            ->with('success', $isActive ? 'Enseigne réactivée.' : 'Enseigne désactivée.');
+    }
+
+    /**
+     * @return array<string, mixed>
+     */
+    private function formatEstablishment(Establishment $establishment): array
+    {
+        return [
+            'id' => $establishment->id,
+            'uuid' => $establishment->uuid,
+            'name' => $establishment->name,
+            'address' => $establishment->address,
+            'city' => $establishment->city,
+            'zip_code' => $establishment->zip_code,
+            'latitude' => $establishment->latitude !== null ? (float) $establishment->latitude : null,
+            'longitude' => $establishment->longitude !== null ? (float) $establishment->longitude : null,
+            'timezone' => $establishment->timezone,
+            'is_active' => $establishment->is_active,
+            'machines_count' => $establishment->machines_count,
+        ];
+    }
+
+    /**
+     * @return array<string, mixed>
+     */
+    private function establishmentRules(): array
+    {
+        return [
+            'name' => ['required', 'string', 'max:200'],
+            'address' => ['required', 'string'],
+            'city' => ['nullable', 'string', 'max:100'],
+            'zip_code' => ['nullable', 'string', 'max:10'],
+            'timezone' => ['required', 'string', 'max:50'],
+            'is_active' => ['boolean'],
+        ];
+    }
+
+    /**
+     * @param  array<string, mixed>  $validated
+     * @return array<string, mixed>
+     */
+    private function prepareEstablishmentData(array $validated): array
+    {
+        $coordinates = $this->geocoding->geocode(
+            $validated['address'],
+            $validated['city'] ?? null,
+            $validated['zip_code'] ?? null,
+        );
+
+        $validated['latitude'] = $coordinates['latitude'] ?? null;
+        $validated['longitude'] = $coordinates['longitude'] ?? null;
+
+        return $validated;
+    }
+
+    private function findAccessibleEstablishment(int $id): Establishment
+    {
+        $supervisor = $this->supervisor();
+
+        return Establishment::query()
+            ->where('id', $id)
+            ->where('organization_id', $supervisor->organization_id)
+            ->when($supervisor->establishment_id, fn ($query) => $query->where('id', $supervisor->establishment_id))
+            ->firstOrFail();
+    }
+
+    private function canCreateEstablishments(): bool
+    {
+        $supervisor = $this->supervisor();
+
+        if ($supervisor->role === 'viewer') {
+            return false;
+        }
+
+        return in_array($supervisor->role, ['owner', 'platform_admin'], true)
+            && $supervisor->establishment_id === null;
+    }
+
+    private function canManageEstablishments(): bool
+    {
+        return $this->supervisor()->role !== 'viewer';
+    }
+
+    /**
+     * @param  array<string, mixed>  $data
+     */
+    private function validateEstablishmentReadyForActivation(array $data, Establishment $establishment): void
+    {
+        $validator = validator(
+            $data,
+            [
+                'name' => ['required', 'string', 'max:200'],
+                'address' => ['required', 'string'],
+                'timezone' => ['required', 'string', 'max:50'],
+            ],
+            [
+                'name.required' => 'Le nom est requis pour réactiver l\'enseigne.',
+                'address.required' => 'L\'adresse est requise pour réactiver l\'enseigne.',
+                'timezone.required' => 'Le fuseau horaire est requis pour réactiver l\'enseigne.',
+            ],
+        );
+
+        if ($validator->fails()) {
+            throw ValidationException::withMessages($validator->errors()->toArray());
+        }
+
+        $establishment->loadMissing('organization');
+
+        if (! $establishment->organization?->is_active) {
+            throw ValidationException::withMessages([
+                'is_active' => 'L\'organisation doit être active pour réactiver cette enseigne.',
+            ]);
+        }
+    }
+}
diff --git a/app/Http/Controllers/Supervisor/PricingPageController.php b/app/Http/Controllers/Supervisor/PricingPageController.php
index 91eac3d..4001163 100644
--- a/app/Http/Controllers/Supervisor/PricingPageController.php
+++ b/app/Http/Controllers/Supervisor/PricingPageController.php
@@ -21,18 +21,60 @@ class PricingPageController extends Controller
             ->with(['establishment:id,name', 'machine:id,uuid,name']);
 
         $this->scopeEstablishmentQuery($query);
+        $this->applyEstablishmentFilter($request, $query);
+
+        if ($request->filled('machine_type')) {
+            $query->where('machine_type', $request->string('machine_type'));
+        }
+
+        if ($request->filled('day_type')) {
+            $query->where('day_type', $request->string('day_type'));
+        }
+
+        if ($request->has('is_active') && $request->string('is_active')->toString() !== '') {
+            $query->where('is_active', $request->boolean('is_active'));
+        }
+
+        if ($request->filled('search')) {
+            $search = $request->string('search');
+            $query->where('label', 'like', "%{$search}%");
+        }
 
         $rules = $query
-            ->orderBy('priority')
-            ->orderBy('slot_start')
-            ->get()
-            ->map(fn (PricingRule $rule) => $this->formatRule($rule));
+            ->tap(fn ($builder) => $this->applySort($request, $builder, [
+                'establishment' => fn ($builder, string $direction) => $this->sortByRelatedEstablishment(
+                    $builder,
+                    'pricing_rules',
+                    'establishment_id',
+                    $direction,
+                ),
+                'slot_start' => 'slot_start',
+                'machine_type' => 'machine_type',
+                'price' => 'price',
+                'priority' => 'priority',
+                'is_active' => 'is_active',
+            ], 'priority', 'asc'))
+            ->paginate($this->supervisorListPerPage($request))
+            ->withQueryString()
+            ->through(fn (PricingRule $rule) => $this->formatRule($rule));
 
         return Inertia::render('Supervisor/Pricing/Index', [
             'rules' => $rules,
             'establishments' => $this->establishmentOptions(),
             'machineTypes' => $this->machineTypeOptions(),
             'dayTypes' => $this->dayTypeOptions(),
+            'filters' => [
+                'establishment_id' => $request->filled('establishment_id') ? (int) $request->input('establishment_id') : null,
+                'machine_type' => $request->string('machine_type')->toString() ?: null,
+                'day_type' => $request->string('day_type')->toString() ?: null,
+                'is_active' => $request->has('is_active') && $request->string('is_active')->toString() !== ''
+                    ? ($request->boolean('is_active') ? '1' : '0')
+                    : null,
+                'search' => $request->string('search')->toString() ?: null,
+                'sort' => $request->string('sort')->toString() ?: 'priority',
+                'direction' => $request->string('direction')->toString() === 'desc' ? 'desc' : 'asc',
+                'per_page' => $this->supervisorListPerPage($request),
+            ],
         ]);
     }
 
@@ -134,22 +176,6 @@ class PricingPageController extends Controller
         ];
     }
 
-    /**
-     * @return array<int, array{id: int, name: string}>
-     */
-    private function establishmentOptions(): array
-    {
-        $supervisor = $this->supervisor();
-
-        return Establishment::query()
-            ->where('organization_id', $supervisor->organization_id)
-            ->when($supervisor->establishment_id, fn ($q) => $q->where('id', $supervisor->establishment_id))
-            ->orderBy('name')
-            ->get(['id', 'name'])
-            ->map(fn (Establishment $e) => ['id' => $e->id, 'name' => $e->name])
-            ->all();
-    }
-
     /**
      * @return array<string, string>
      */
diff --git a/app/Http/Controllers/Supervisor/PromotionPageController.php b/app/Http/Controllers/Supervisor/PromotionPageController.php
index 13f2762..61ff65c 100644
--- a/app/Http/Controllers/Supervisor/PromotionPageController.php
+++ b/app/Http/Controllers/Supervisor/PromotionPageController.php
@@ -15,21 +15,59 @@ class PromotionPageController extends Controller
 {
     use ScopesSupervisorResources;
 
-    public function index(): Response
+    public function index(Request $request): Response
     {
         $query = Promotion::query()->with('establishment:id,name');
         $this->scopeEstablishmentQuery($query);
+        $this->applyEstablishmentFilter($request, $query);
+
+        if ($request->filled('machine_type')) {
+            $query->where('machine_type', $request->string('machine_type'));
+        }
+
+        if ($request->has('is_active') && $request->string('is_active')->toString() !== '') {
+            $query->where('is_active', $request->boolean('is_active'));
+        }
+
+        if ($request->filled('search')) {
+            $search = $request->string('search');
+            $query->where('description', 'like', "%{$search}%");
+        }
 
         $promotions = $query
-            ->orderByDesc('starts_at')
-            ->get()
-            ->map(fn (Promotion $promotion) => $this->formatPromotion($promotion));
+            ->tap(fn ($builder) => $this->applySort($request, $builder, [
+                'establishment' => fn ($builder, string $direction) => $this->sortByRelatedEstablishment(
+                    $builder,
+                    'promotions',
+                    'establishment_id',
+                    $direction,
+                ),
+                'discount_value' => 'discount_value',
+                'starts_at' => 'starts_at',
+                'ends_at' => 'ends_at',
+                'machine_type' => 'machine_type',
+                'is_active' => 'is_active',
+            ], 'starts_at', 'desc'))
+            ->paginate($this->supervisorListPerPage($request))
+            ->withQueryString()
+            ->through(fn (Promotion $promotion) => $this->formatPromotion($promotion));
 
         return Inertia::render('Supervisor/Promotions/Index', [
             'promotions' => $promotions,
             'establishments' => $this->establishmentOptions(),
             'machineTypes' => $this->machineTypeOptions(),
             'discountTypes' => $this->discountTypeOptions(),
+            'filters' => [
+                'establishment_id' => $request->filled('establishment_id') ? (int) $request->input('establishment_id') : null,
+                'machine_type' => $request->string('machine_type')->toString() ?: null,
+                'is_active' => $request->has('is_active') && $request->string('is_active')->toString() !== ''
+                    ? ($request->boolean('is_active') ? '1' : '0')
+                    : null,
+                'search' => $request->string('search')->toString() ?: null,
+                'sort' => $request->string('sort')->toString() ?: 'starts_at',
+                'direction' => $request->string('direction')->toString() === 'desc' ? 'desc' : 'asc',
+                'per_page' => $this->supervisorListPerPage($request),
+            ],
         ]);
     }
 
@@ -124,22 +162,6 @@ class PromotionPageController extends Controller
         ];
     }
 
-    /**
-     * @return array<int, array{id: int, name: string}>
-     */
-    private function establishmentOptions(): array
-    {
-        $supervisor = $this->supervisor();
-
-        return Establishment::query()
-            ->where('organization_id', $supervisor->organization_id)
-            ->when($supervisor->establishment_id, fn ($q) => $q->where('id', $supervisor->establishment_id))
-            ->orderBy('name')
-            ->get(['id', 'name'])
-            ->map(fn (Establishment $e) => ['id' => $e->id, 'name' => $e->name])
-            ->all();
-    }
-
     /**
      * @return array<string, string>
      */
diff --git a/app/Http/Controllers/Supervisor/WashPageController.php b/app/Http/Controllers/Supervisor/WashPageController.php
index d89746e..6c66644 100644
--- a/app/Http/Controllers/Supervisor/WashPageController.php
+++ b/app/Http/Controllers/Supervisor/WashPageController.php
@@ -19,6 +19,8 @@ class WashPageController extends Controller
             ->with(['user:id,first_name,last_name,email', 'machine:id,uuid,name,establishment_id', 'machine.establishment:id,name']);
 
         $this->scopeMachineRelationQuery($query);
+        $this->applyEstablishmentFilter($request, $query, 'machine');
+        $this->applyUserSearchFilter($request, $query);
 
         if ($request->filled('status')) {
             $query->where('status', $request->string('status'));
@@ -29,8 +31,15 @@ class WashPageController extends Controller
         }
 
         $washes = $query
-            ->orderByDesc('started_at')
-            ->paginate(20)
+            ->tap(fn ($builder) => $this->applySort($request, $builder, [
+                'started_at' => 'washes.started_at',
+                'user' => fn ($builder, string $direction) => $this->sortByRelatedUser($builder, 'washes', 'user_id', $direction),
+                'machine' => fn ($builder, string $direction) => $this->sortByRelatedMachine($builder, 'washes', $direction),
+                'status' => 'washes.status',
+                'duration_minutes' => 'washes.duration_minutes',
+                'cost' => 'washes.cost',
+            ], 'started_at', 'desc'))
+            ->paginate($this->supervisorListPerPage($request))
             ->withQueryString()
             ->through(fn (Wash $wash) => [
                 'uuid' => $wash->uuid,
@@ -56,9 +65,15 @@ class WashPageController extends Controller
 
         return Inertia::render('Supervisor/Washes/Index', [
             'washes' => $washes,
+            'establishments' => $this->establishmentOptions(),
             'filters' => [
+                'establishment_id' => $request->filled('establishment_id') ? (int) $request->input('establishment_id') : null,
+                'user' => $request->string('user')->toString() ?: null,
                 'status' => $request->string('status')->toString() ?: null,
                 'date' => $request->string('date')->toString() ?: null,
+                'sort' => $request->string('sort')->toString() ?: 'started_at',
+                'direction' => $request->string('direction')->toString() === 'asc' ? 'asc' : 'desc',
+                'per_page' => $this->supervisorListPerPage($request),
             ],
             'statusOptions' => $this->statusOptions(),
         ]);
diff --git a/app/Http/Requests/Api/V1/Wallet/InitiateTopUpRequest.php b/app/Http/Requests/Api/V1/Wallet/InitiateTopUpRequest.php
index 1c12189..f2ac731 100644
--- a/app/Http/Requests/Api/V1/Wallet/InitiateTopUpRequest.php
+++ b/app/Http/Requests/Api/V1/Wallet/InitiateTopUpRequest.php
@@ -14,7 +14,7 @@ class InitiateTopUpRequest extends FormRequest
     public function rules(): array
     {
         return [
-            'amount' => ['required', 'numeric', 'min:1', 'max:500'],
+            'amount' => ['required', 'numeric', 'min:5', 'max:150'],
             'idempotency_key' => ['required', 'string', 'max:100'],
             'return_url' => ['nullable', 'url', 'max:255'],
         ];
diff --git a/app/Http/Resources/PaymentTransactionResource.php b/app/Http/Resources/PaymentTransactionResource.php
index 76db771..d23b1b4 100644
--- a/app/Http/Resources/PaymentTransactionResource.php
+++ b/app/Http/Resources/PaymentTransactionResource.php
@@ -9,7 +9,7 @@ class PaymentTransactionResource extends JsonResource
 {
     public function toArray(Request $request): array
     {
-        return [
+        $data = [
             'uuid' => $this->uuid,
             'provider' => $this->provider,
             'provider_payment_id' => $this->provider_payment_id,
@@ -19,5 +19,19 @@ class PaymentTransactionResource extends JsonResource
             'return_url' => $this->return_url,
             'created_at' => $this->created_at?->toIso8601String(),
         ];
+
+        if ($this->provider === 'stripe' && is_array($this->raw_payload)) {
+            $clientSecret = $this->raw_payload['client_secret'] ?? null;
+
+            if (is_string($clientSecret) && $clientSecret !== '') {
+                $data['stripe'] = [
+                    'payment_intent_id' => $this->provider_payment_id,
+                    'client_secret' => $clientSecret,
+                    'publishable_key' => config('services.stripe.key'),
+                ];
+            }
+        }
+
+        return $data;
     }
 }
diff --git a/app/Http/Resources/WalletTransactionResource.php b/app/Http/Resources/WalletTransactionResource.php
index 1197995..d8920c7 100644
--- a/app/Http/Resources/WalletTransactionResource.php
+++ b/app/Http/Resources/WalletTransactionResource.php
@@ -17,7 +17,7 @@ class WalletTransactionResource extends JsonResource
             'balance_after' => (float) $this->balance_after,
             'source_type' => $this->source_type,
             'source_id' => $this->source_id,
-            'metadata' => $this->metadata,
+            'metadata' => $this->metadata ?? [],
             'created_at' => $this->created_at?->toIso8601String(),
         ];
     }
diff --git a/app/Providers/IntegrationServiceProvider.php b/app/Providers/IntegrationServiceProvider.php
index 58c9b88..c544cc1 100644
--- a/app/Providers/IntegrationServiceProvider.php
+++ b/app/Providers/IntegrationServiceProvider.php
@@ -9,6 +9,7 @@ use App\Services\BookingService;
 use App\Services\MachineIntegrationService;
 use App\Services\PaymentService;
 use App\Services\PricingService;
+use App\Services\StripePaymentService;
 use App\Services\WalletService;
 use App\Services\WashService;
 use Illuminate\Support\ServiceProvider;
@@ -27,6 +28,7 @@ class IntegrationServiceProvider extends ServiceProvider
         $this->app->singleton(AuditService::class);
         $this->app->singleton(BookingService::class);
         $this->app->singleton(WashService::class);
+        $this->app->singleton(StripePaymentService::class);
         $this->app->singleton(PaymentService::class);
     }
 
diff --git a/app/Services/DashboardService.php b/app/Services/DashboardService.php
index 42841bf..0fb40b3 100644
--- a/app/Services/DashboardService.php
+++ b/app/Services/DashboardService.php
@@ -3,6 +3,7 @@
 namespace App\Services;
 
 use App\Models\Booking;
+use App\Models\Establishment;
 use App\Models\Machine;
 use App\Models\MachineEvent;
 use App\Models\Supervisor;
@@ -15,14 +16,14 @@ class DashboardService
     /**
      * @return array<string, mixed>
      */
-    public function getKpis(Supervisor $supervisor): array
+    public function getKpis(Supervisor $supervisor, ?int $establishmentFilter = null): array
     {
         $offlineThresholdMinutes = (int) config('laverie.machine.offline_threshold_minutes', 10);
         $today = Carbon::today();
 
-        $washQuery = $this->washQuery($supervisor)->whereDate('started_at', $today);
-        $bookingQuery = $this->bookingQuery($supervisor)->whereDate('slot_start', $today);
-        $machineQuery = $this->machineQuery($supervisor);
+        $washQuery = $this->washQuery($supervisor, $establishmentFilter)->whereDate('started_at', $today);
+        $bookingQuery = $this->bookingQuery($supervisor, $establishmentFilter)->whereDate('slot_start', $today);
+        $machineQuery = $this->machineQuery($supervisor, $establishmentFilter);
 
         $offlineThreshold = now()->subMinutes($offlineThresholdMinutes);
 
@@ -36,6 +37,8 @@ class DashboardService
             })
             ->count();
 
+        $machinesTotal = (clone $machineQuery)->count();
+
         return [
             'revenue_today' => (float) (clone $washQuery)
                 ->where('status', 'completed')
@@ -43,16 +46,85 @@ class DashboardService
             'washes_today' => (clone $washQuery)->count(),
             'bookings_today' => (clone $bookingQuery)->count(),
             'offline_machines' => $offlineCount,
-            'machines_total' => (clone $machineQuery)->count(),
+            'machines_total' => $machinesTotal,
+            'running_machines' => (clone $machineQuery)->where('status', 'running')->count(),
+            'available_machines' => (clone $machineQuery)->where('status', 'available')->count(),
+            'active_bookings' => $this->bookingQuery($supervisor, $establishmentFilter)
+                ->whereIn('status', ['confirmed', 'active'])
+                ->where('slot_end', '>=', now())
+                ->count(),
+        ];
+    }
+
+    /**
+     * @return array<string, int>
+     */
+    public function getMachineStatusBreakdown(Supervisor $supervisor, ?int $establishmentFilter = null): array
+    {
+        $statuses = ['available', 'reserved', 'running', 'maintenance', 'offline', 'error'];
+        $counts = $this->machineQuery($supervisor, $establishmentFilter)
+            ->selectRaw('status, COUNT(*) as count')
+            ->groupBy('status')
+            ->pluck('count', 'status');
+
+        $breakdown = [];
+        foreach ($statuses as $status) {
+            $breakdown[$status] = (int) ($counts[$status] ?? 0);
+        }
+
+        return $breakdown;
+    }
+
+    /**
+     * @return Collection<int, array<string, mixed>>
+     */
+    public function getRecentWashes(Supervisor $supervisor, ?int $establishmentFilter = null, int $limit = 5): Collection
+    {
+        return $this->washQuery($supervisor, $establishmentFilter)
+            ->with(['machine:id,name,uuid', 'machine.establishment:id,name'])
+            ->orderByDesc('started_at')
+            ->limit($limit)
+            ->get()
+            ->map(fn (Wash $wash) => [
+                'uuid' => $wash->uuid,
+                'machine_name' => $wash->machine?->name ?? '—',
+                'establishment_name' => $wash->machine?->establishment?->name,
+                'status' => $wash->status,
+                'status_label' => $this->washStatusLabel($wash->status),
+                'cost' => (float) $wash->cost,
+                'started_at' => $wash->started_at?->toIso8601String(),
+            ]);
+    }
+
+    /**
+     * @return array<string, string|null>
+     */
+    public function getContext(Supervisor $supervisor, ?int $establishmentFilter = null): array
+    {
+        $supervisor->loadMissing(['organization:id,name', 'establishment:id,name']);
+
+        $establishmentName = $supervisor->establishment?->name;
+
+        if ($establishmentName === null && $establishmentFilter !== null) {
+            $establishmentName = Establishment::query()
+                ->where('id', $establishmentFilter)
+                ->where('organization_id', $supervisor->organization_id)
+                ->value('name');
+        }
+
+        return [
+            'organization_name' => $supervisor->organization?->name,
+            'establishment_name' => $establishmentName,
+            'is_all_establishments' => $supervisor->establishment_id === null && $establishmentFilter === null,
         ];
     }
 
     /**
      * @return Collection<int, array<string, mixed>>
      */
-    public function getAlerts(Supervisor $supervisor, int $limit = 10): Collection
+    public function getAlerts(Supervisor $supervisor, ?int $establishmentFilter = null, int $limit = 10): Collection
     {
-        $machineIds = $this->machineQuery($supervisor)->pluck('id');
+        $machineIds = $this->machineQuery($supervisor, $establishmentFilter)->pluck('id');
 
         if ($machineIds->isEmpty()) {
             return collect();
@@ -104,9 +176,9 @@ class DashboardService
     /**
      * @return Collection<int, array<string, mixed>>
      */
-    public function getMachinesOverview(Supervisor $supervisor): Collection
+    public function getMachinesOverview(Supervisor $supervisor, ?int $establishmentFilter = null): Collection
     {
-        return $this->machineQuery($supervisor)
+        return $this->machineQuery($supervisor, $establishmentFilter)
             ->with('establishment:id,name')
             ->orderBy('name')
             ->limit(12)
@@ -123,41 +195,47 @@ class DashboardService
             ]);
     }
 
-    private function machineQuery(Supervisor $supervisor)
+    private function machineQuery(Supervisor $supervisor, ?int $establishmentFilter = null)
     {
-        $query = Machine::query()->whereHas('establishment', function ($query) use ($supervisor) {
+        $establishmentId = $supervisor->establishment_id ?? $establishmentFilter;
+
+        $query = Machine::query()->whereHas('establishment', function ($query) use ($supervisor, $establishmentId) {
             $query->where('organization_id', $supervisor->organization_id);
 
-            if ($supervisor->establishment_id !== null) {
-                $query->where('id', $supervisor->establishment_id);
+            if ($establishmentId !== null) {
+                $query->where('id', $establishmentId);
             }
         });
 
-        if ($supervisor->establishment_id !== null) {
-            $query->where('establishment_id', $supervisor->establishment_id);
+        if ($establishmentId !== null) {
+            $query->where('establishment_id', $establishmentId);
         }
 
         return $query;
     }
 
-    private function washQuery(Supervisor $supervisor)
+    private function washQuery(Supervisor $supervisor, ?int $establishmentFilter = null)
     {
-        return Wash::query()->whereHas('machine.establishment', function ($query) use ($supervisor) {
+        $establishmentId = $supervisor->establishment_id ?? $establishmentFilter;
+
+        return Wash::query()->whereHas('machine.establishment', function ($query) use ($supervisor, $establishmentId) {
             $query->where('organization_id', $supervisor->organization_id);
 
-            if ($supervisor->establishment_id !== null) {
-                $query->where('id', $supervisor->establishment_id);
+            if ($establishmentId !== null) {
+                $query->where('id', $establishmentId);
             }
         });
     }
 
-    private function bookingQuery(Supervisor $supervisor)
+    private function bookingQuery(Supervisor $supervisor, ?int $establishmentFilter = null)
     {
-        return Booking::query()->whereHas('machine.establishment', function ($query) use ($supervisor) {
+        $establishmentId = $supervisor->establishment_id ?? $establishmentFilter;
+
+        return Booking::query()->whereHas('machine.establishment', function ($query) use ($supervisor, $establishmentId) {
             $query->where('organization_id', $supervisor->organization_id);
 
-            if ($supervisor->establishment_id !== null) {
-                $query->where('id', $supervisor->establishment_id);
+            if ($establishmentId !== null) {
+                $query->where('id', $establishmentId);
             }
         });
     }
@@ -195,4 +273,16 @@ class DashboardService
             default => $type,
         };
     }
+
+    private function washStatusLabel(string $status): string
+    {
+        return match ($status) {
+            'pending_start' => 'En attente',
+            'running' => 'En cours',
+            'completed' => 'Terminé',
+            'cancelled' => 'Annulé',
+            'failed' => 'Échoué',
+            default => $status,
+        };
+    }
 }
diff --git a/app/Services/GeocodingService.php b/app/Services/GeocodingService.php
new file mode 100644
index 0000000..63debd6
--- /dev/null
+++ b/app/Services/GeocodingService.php
@@ -0,0 +1,112 @@
+<?php
+
+namespace App\Services;
+
+use Illuminate\Http\Client\ConnectionException;
+use Illuminate\Http\Client\PendingRequest;
+use Illuminate\Http\Client\RequestException;
+use Illuminate\Support\Facades\Http;
+use Illuminate\Support\Facades\Log;
+
+class GeocodingService
+{
+    /**
+     * @return array<int, array<string, mixed>>
+     */
+    public function search(string $query): array
+    {
+        $query = trim($query);
+
+        if (strlen($query) < 3) {
+            return [];
+        }
+
+        try {
+            $response = $this->client()->get(config('services.nominatim.url').'/search', [
+                'q' => $query,
+                'format' => 'json',
+                'addressdetails' => 1,
+                'limit' => 5,
+                'countrycodes' => 'fr',
+            ]);
+        } catch (ConnectionException|RequestException $exception) {
+            Log::warning('Geocoding search failed.', [
+                'query' => $query,
+                'message' => $exception->getMessage(),
+            ]);
+
+            return [];
+        }
+
+        if (! $response->successful()) {
+            return [];
+        }
+
+        return collect($response->json())
+            ->map(fn (array $item) => $this->formatResult($item))
+            ->filter(fn (array $item) => $item['address'] !== '')
+            ->values()
+            ->all();
+    }
+
+    /**
+     * @return array{latitude: float, longitude: float}|null
+     */
+    public function geocode(string $address, ?string $city = null, ?string $zipCode = null): ?array
+    {
+        $query = collect([$address, $zipCode, $city, 'France'])
+            ->filter(fn (?string $part) => $part !== null && trim($part) !== '')
+            ->implode(', ');
+
+        $results = $this->search($query);
+
+        if ($results === [] || $results[0]['latitude'] === null || $results[0]['longitude'] === null) {
+            return null;
+        }
+
+        return [
+            'latitude' => $results[0]['latitude'],
+            'longitude' => $results[0]['longitude'],
+        ];
+    }
+
+    private function client(): PendingRequest
+    {
+        return Http::withHeaders([
+            'User-Agent' => config('services.nominatim.user_agent'),
+            'Accept-Language' => 'fr',
+        ])
+            ->withOptions([
+                'verify' => (bool) config('services.nominatim.verify_ssl', true),
+            ])
+            ->timeout(8)
+            ->connectTimeout(4);
+    }
+
+    /**
+     * @param  array<string, mixed>  $item
+     * @return array<string, mixed>
+     */
+    private function formatResult(array $item): array
+    {
+        $addressParts = $item['address'] ?? [];
+        $street = trim(($addressParts['house_number'] ?? '').' '.($addressParts['road'] ?? ''));
+
+        if ($street === '') {
+            $street = trim((string) ($item['name'] ?? ''));
+        }
+
+        return [
+            'label' => (string) ($item['display_name'] ?? $street),
+            'address' => $street,
+            'city' => $addressParts['city']
+                ?? $addressParts['town']
+                ?? $addressParts['village']
+                ?? $addressParts['municipality']
+                ?? '',
+            'zip_code' => (string) ($addressParts['postcode'] ?? ''),
+            'latitude' => isset($item['lat']) ? (float) $item['lat'] : null,
+            'longitude' => isset($item['lon']) ? (float) $item['lon'] : null,
+        ];
+    }
+}
diff --git a/app/Services/PaymentService.php b/app/Services/PaymentService.php
index 56eec67..07cde2f 100644
--- a/app/Services/PaymentService.php
+++ b/app/Services/PaymentService.php
@@ -6,12 +6,14 @@ use App\Models\PaymentTransaction;
 use App\Models\User;
 use Illuminate\Support\Facades\DB;
 use Illuminate\Support\Str;
+use Stripe\Exception\ApiErrorException;
 
 class PaymentService
 {
     public function __construct(
         private readonly WalletService $walletService,
         private readonly AuditService $auditService,
+        private readonly StripePaymentService $stripePaymentService,
     ) {}
 
     public function initiateTopUp(
@@ -20,8 +22,13 @@ class PaymentService
         string $idempotencyKey,
         ?string $returnUrl = null,
     ): PaymentTransaction {
-        if ($amount <= 0) {
-            throw new \InvalidArgumentException('Le montant doit être strictement positif.');
+        $minAmount = (float) config('laverie.payment.top_up_min', 5);
+        $maxAmount = (float) config('laverie.payment.top_up_max', 150);
+
+        if ($amount < $minAmount || $amount > $maxAmount) {
+            throw new \InvalidArgumentException(
+                "Le montant doit être compris entre {$minAmount} et {$maxAmount} EUR.",
+            );
         }
 
         $existing = PaymentTransaction::query()
@@ -32,21 +39,49 @@ class PaymentService
             return $existing;
         }
 
-        $payment = PaymentTransaction::query()->create([
-            'uuid' => (string) Str::uuid(),
-            'user_id' => $user->id,
-            'provider' => config('laverie.payment.default_provider', 'simulated'),
-            'provider_payment_id' => 'sim-'.Str::random(16),
-            'amount' => $amount,
-            'currency' => 'EUR',
-            'status' => 'initiated',
-            'idempotency_key' => $idempotencyKey,
-            'return_url' => $returnUrl,
-        ]);
+        $provider = config('laverie.payment.default_provider', 'simulated');
 
-        $this->auditService->log($user, 'payment.initiated', $payment, null, $payment->toArray());
+        if ($provider === 'stripe' && ! $this->stripePaymentService->isEnabled()) {
+            throw new \RuntimeException('Stripe n\'est pas configuré.');
+        }
 
-        return $payment;
+        return DB::transaction(function () use ($user, $amount, $idempotencyKey, $returnUrl, $provider) {
+            $payment = PaymentTransaction::query()->create([
+                'uuid' => (string) Str::uuid(),
+                'user_id' => $user->id,
+                'provider' => $provider,
+                'provider_payment_id' => null,
+                'amount' => $amount,
+                'currency' => 'EUR',
+                'status' => 'initiated',
+                'idempotency_key' => $idempotencyKey,
+                'return_url' => $returnUrl,
+            ]);
+
+            if ($provider === 'stripe') {
+                try {
+                    $intent = $this->stripePaymentService->createPaymentIntent($user, $payment, $amount);
+                } catch (ApiErrorException $e) {
+                    throw new \RuntimeException('Impossible de créer le paiement Stripe.', 0, $e);
+                }
+
+                $payment->update([
+                    'provider_payment_id' => $intent->id,
+                    'status' => 'pending',
+                    'raw_payload' => [
+                        'client_secret' => $intent->client_secret,
+                    ],
+                ]);
+            } else {
+                $payment->update([
+                    'provider_payment_id' => 'sim-'.Str::random(16),
+                ]);
+            }
+
+            $this->auditService->log($user, 'payment.initiated', $payment, null, $payment->fresh()->toArray());
+
+            return $payment->fresh();
+        });
     }
 
     public function confirmTopUp(string $paymentUuid): PaymentTransaction
@@ -65,26 +100,29 @@ class PaymentService
                 throw new \RuntimeException("Paiement non confirmable (statut : {$payment->status}).");
             }
 
-            $payment->update(['status' => 'succeeded']);
+            if ($payment->provider === 'stripe') {
+                if (blank($payment->provider_payment_id)) {
+                    throw new \RuntimeException('Paiement Stripe introuvable.');
+                }
 
-            $this->walletService->credit(
-                $payment->user,
-                (float) $payment->amount,
-                PaymentTransaction::class,
-                $payment->id,
-                "payment-credit:{$payment->uuid}",
-                ['provider' => $payment->provider],
-            );
+                try {
+                    $intent = $this->stripePaymentService->retrievePaymentIntent($payment->provider_payment_id);
+                } catch (ApiErrorException $e) {
+                    throw new \RuntimeException('Impossible de vérifier le paiement Stripe.', 0, $e);
+                }
 
-            $this->auditService->log(
-                $payment->user,
-                'payment.confirmed',
-                $payment,
-                null,
-                $payment->fresh()->toArray(),
-            );
+                if (! $this->stripePaymentService->isPaymentSucceeded($intent)) {
+                    throw new \RuntimeException('Le paiement Stripe n\'est pas encore confirmé.');
+                }
 
-            return $payment->fresh();
+                $payment->update([
+                    'raw_payload' => array_merge($payment->raw_payload ?? [], [
+                        'stripe' => $this->stripePaymentService->summarizePaymentIntent($intent),
+                    ]),
+                ]);
+            }
+
+            return $this->markPaymentSucceeded($payment->fresh());
         });
     }
 
@@ -98,6 +136,10 @@ class PaymentService
             throw new \InvalidArgumentException('Webhook paiement invalide.');
         }
 
+        if ($status === 'ignored') {
+            return;
+        }
+
         DB::transaction(function () use ($provider, $payload, $providerPaymentId, $idempotencyKey, $status) {
             $query = PaymentTransaction::query()->lockForUpdate();
 
@@ -119,14 +161,90 @@ class PaymentService
             }
 
             $payment->update([
-                'raw_payload' => $payload,
+                'raw_payload' => array_merge($payment->raw_payload ?? [], [
+                    'webhook' => $payload,
+                ]),
             ]);
 
             if ($status === 'succeeded') {
-                $this->confirmTopUp($payment->uuid);
+                $this->markPaymentSucceeded($payment);
             } elseif (in_array($status, ['failed', 'cancelled', 'refunded'], true)) {
                 $payment->update(['status' => $status]);
             }
         });
     }
+
+    public function handleStripeWebhook(string $payload, string $signature): void
+    {
+        $parsed = $this->stripePaymentService->parseWebhook($payload, $signature);
+
+        if ($parsed['status'] === 'ignored') {
+            return;
+        }
+
+        $this->handleWebhook('stripe', [
+            'provider_payment_id' => $parsed['provider_payment_id'],
+            'status' => $parsed['status'],
+            'payload' => $parsed['payload'],
+        ]);
+    }
+
+    private function markPaymentSucceeded(PaymentTransaction $payment): PaymentTransaction
+    {
+        if ($payment->status === 'succeeded') {
+            return $payment;
+        }
+
+        $payment->update(['status' => 'succeeded']);
+
+        $this->walletService->credit(
+            $payment->user,
+            (float) $payment->amount,
+            PaymentTransaction::class,
+            $payment->id,
+            "payment-credit:{$payment->uuid}",
+            $this->buildWalletCreditMetadata($payment),
+        );
+
+        $this->auditService->log(
+            $payment->user,
+            'payment.confirmed',
+            $payment,
+            null,
+            $payment->fresh()->toArray(),
+        );
+
+        return $payment->fresh();
+    }
+
+    /**
+     * @return array<string, mixed>
+     */
+    private function buildWalletCreditMetadata(PaymentTransaction $payment): array
+    {
+        $metadata = [
+            'operation' => 'top_up',
+            'provider' => $payment->provider,
+            'label' => match ($payment->provider) {
+                'stripe' => 'Rechargement par carte',
+                'simulated' => 'Rechargement (simulation)',
+                default => 'Rechargement portefeuille',
+            },
+            'payment_uuid' => $payment->uuid,
+            'provider_payment_id' => $payment->provider_payment_id,
+            'currency' => $payment->currency,
+            'amount' => (float) $payment->amount,
+        ];
+
+        $raw = $payment->raw_payload ?? [];
+
+        if ($payment->provider === 'stripe') {
+            $metadata['stripe'] = $raw['stripe'] ?? [
+                'payment_intent_id' => $payment->provider_payment_id,
+                'status' => 'succeeded',
+            ];
+        }
+
+        return $metadata;
+    }
 }
diff --git a/app/Services/StripePaymentService.php b/app/Services/StripePaymentService.php
new file mode 100644
index 0000000..6bb7762
--- /dev/null
+++ b/app/Services/StripePaymentService.php
@@ -0,0 +1,151 @@
+<?php
+
+namespace App\Services;
+
+use App\Models\PaymentTransaction;
+use App\Models\User;
+use Stripe\Exception\SignatureVerificationException;
+use Stripe\PaymentIntent;
+use Stripe\Stripe;
+use Stripe\Webhook;
+use UnexpectedValueException;
+
+class StripePaymentService
+{
+    private bool $configured = false;
+
+    private function ensureConfigured(): void
+    {
+        if ($this->configured) {
+            return;
+        }
+
+        if (! class_exists(Stripe::class)) {
+            throw new \RuntimeException(
+                'SDK Stripe manquant. Exécutez : composer require stripe/stripe-php',
+            );
+        }
+
+        Stripe::setApiKey(config('services.stripe.secret'));
+        $this->configured = true;
+    }
+
+    public function isEnabled(): bool
+    {
+        return class_exists(Stripe::class)
+            && filled(config('services.stripe.secret'))
+            && filled(config('services.stripe.key'));
+    }
+
+    public function publishableKey(): string
+    {
+        return (string) config('services.stripe.key');
+    }
+
+    public function createPaymentIntent(
+        User $user,
+        PaymentTransaction $payment,
+        float $amount,
+    ): PaymentIntent {
+        $this->ensureConfigured();
+
+        return PaymentIntent::create([
+            'amount' => (int) round($amount * 100),
+            'currency' => strtolower($payment->currency),
+            'metadata' => [
+                'payment_uuid' => $payment->uuid,
+                'user_id' => (string) $user->id,
+                'idempotency_key' => $payment->idempotency_key,
+            ],
+        ]);
+    }
+
+    public function retrievePaymentIntent(string $paymentIntentId): PaymentIntent
+    {
+        $this->ensureConfigured();
+
+        return PaymentIntent::retrieve($paymentIntentId, [
+            'expand' => ['payment_method'],
+        ]);
+    }
+
+    /**
+     * @return array<string, mixed>
+     */
+    public function summarizePaymentIntent(PaymentIntent $intent): array
+    {
+        $summary = [
+            'payment_intent_id' => $intent->id,
+            'status' => $intent->status,
+            'amount' => $intent->amount / 100,
+            'currency' => strtoupper($intent->currency),
+        ];
+
+        $paymentMethod = $intent->payment_method;
+        if (is_object($paymentMethod)) {
+            $summary['payment_method_type'] = $paymentMethod->type ?? null;
+
+            if (isset($paymentMethod->card)) {
+                $summary['card_brand'] = $paymentMethod->card->brand ?? null;
+                $summary['card_last4'] = $paymentMethod->card->last4 ?? null;
+                $summary['card_exp_month'] = $paymentMethod->card->exp_month ?? null;
+                $summary['card_exp_year'] = $paymentMethod->card->exp_year ?? null;
+            }
+        }
+
+        return $summary;
+    }
+
+    public function isPaymentSucceeded(PaymentIntent $paymentIntent): bool
+    {
+        return $paymentIntent->status === 'succeeded';
+    }
+
+    /**
+     * @return array{provider_payment_id: string, status: string, payload: array<string, mixed>}
+     */
+    public function parseWebhook(string $payload, string $signature): array
+    {
+        $this->ensureConfigured();
+
+        $secret = config('services.stripe.webhook_secret');
+
+        if (blank($secret)) {
+            throw new \RuntimeException('Webhook Stripe non configuré.');
+        }
+
+        try {
+            $event = Webhook::constructEvent($payload, $signature, $secret);
+        } catch (UnexpectedValueException|SignatureVerificationException $e) {
+            throw new \InvalidArgumentException('Signature webhook Stripe invalide.', 0, $e);
+        }
+
+        $type = $event->type;
+        $object = $event->data->object;
+
+        if (! in_array($type, [
+            'payment_intent.succeeded',
+            'payment_intent.payment_failed',
+            'payment_intent.canceled',
+        ], true)) {
+            return [
+                'provider_payment_id' => $object->id ?? '',
+                'status' => 'ignored',
+                'payload' => $event->toArray(),
+            ];
+        }
+
+        $status = match ($type) {
+            'payment_intent.succeeded' => 'succeeded',
+            'payment_intent.payment_failed' => 'failed',
+            'payment_intent.canceled' => 'cancelled',
+            default => 'ignored',
+        };
+
+        return [
+            'provider_payment_id' => $object->id,
+            'status' => $status,
+            'payload' => $event->toArray(),
+        ];
+    }
+}
diff --git a/composer.json b/composer.json
index 6ee8da5..dc79180 100644
--- a/composer.json
+++ b/composer.json
@@ -11,6 +11,7 @@
         "laravel/framework": "^13.8",
         "laravel/sanctum": "^4.0",
         "laravel/tinker": "^3.0",
+        "stripe/stripe-php": "^20.3",
         "tightenco/ziggy": "^2.0"
     },
     "require-dev": {
diff --git a/composer.lock b/composer.lock
index 2b9ef3e..3ef68b4 100644
--- a/composer.lock
+++ b/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "467a021a92214a0f1ddff604c3db2f6d",
+    "content-hash": "215a891aaf322e503ac2afec441182a6",
     "packages": [
         {
             "name": "brick/math",
@@ -3440,6 +3440,68 @@
             },
             "time": "2026-06-18T03:57:49+00:00"
         },
+        {
+            "name": "stripe/stripe-php",
+            "version": "v20.3.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/stripe/stripe-php.git",
+                "reference": "266f0b05890172184cca66a0688abaf1a96b08d8"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/stripe/stripe-php/zipball/266f0b05890172184cca66a0688abaf1a96b08d8",
+                "reference": "266f0b05890172184cca66a0688abaf1a96b08d8",
+                "shasum": ""
+            },
+            "require": {
+                "ext-curl": "*",
+                "ext-json": "*",
+                "ext-mbstring": "*",
+                "php": ">=7.2.0"
+            },
+            "require-dev": {
+                "friendsofphp/php-cs-fixer": "3.94.0",
+                "phpstan/phpstan": "^1.2",
+                "phpunit/phpunit": "^8.0 || ^9.0"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "2.0-dev"
+                }
+            },
+            "autoload": {
+                "files": [
+                    "lib/version_check.php"
+                ],
+                "psr-4": {
+                    "Stripe\\": "lib/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Stripe and contributors",
+                    "homepage": "https://github.com/stripe/stripe-php/contributors"
+                }
+            ],
+            "description": "Stripe PHP Library",
+            "homepage": "https://stripe.com/",
+            "keywords": [
+                "api",
+                "payment processing",
+                "stripe"
+            ],
+            "support": {
+                "issues": "https://github.com/stripe/stripe-php/issues",
+                "source": "https://github.com/stripe/stripe-php/tree/v20.3.0"
+            },
+            "time": "2026-06-24T22:45:28+00:00"
+        },
         {
             "name": "symfony/clock",
             "version": "v7.4.8",
diff --git a/config/app.php b/config/app.php
index 423eed5..b5037d4 100644
--- a/config/app.php
+++ b/config/app.php
@@ -65,7 +65,7 @@ return [
     |
     */
 
-    'timezone' => 'UTC',
+    'timezone' => env('APP_TIMEZONE', 'Europe/Paris'),
 
     /*
     |--------------------------------------------------------------------------
diff --git a/config/laverie.php b/config/laverie.php
index 07af78f..539a665 100644
--- a/config/laverie.php
+++ b/config/laverie.php
@@ -20,6 +20,8 @@ return [
 
     'payment' => [
         'default_provider' => env('LAVERIE_PAYMENT_PROVIDER', 'simulated'),
+        'top_up_min' => (float) env('LAVERIE_TOP_UP_MIN', 5),
+        'top_up_max' => (float) env('LAVERIE_TOP_UP_MAX', 150),
     ],
 
     'machine_api_key' => env('LAVERIE_MACHINE_API_KEY'),
diff --git a/config/services.php b/config/services.php
index 6a90eb8..3f55479 100644
--- a/config/services.php
+++ b/config/services.php
@@ -2,18 +2,6 @@
 
 return [
 
-    /*
-    |--------------------------------------------------------------------------
-    | Third Party Services
-    |--------------------------------------------------------------------------
-    |
-    | This file is for storing the credentials for third party services such
-    | as Mailgun, Postmark, AWS and more. This file provides the de facto
-    | location for this type of information, allowing packages to have
-    | a conventional file to locate the various service credentials.
-    |
-    */
-
     'postmark' => [
         'key' => env('POSTMARK_API_KEY'),
     ],
@@ -35,4 +23,16 @@ return [
         ],
     ],
 
+    'stripe' => [
+        'key' => env('STRIPE_KEY'),
+        'secret' => env('STRIPE_SECRET'),
+        'webhook_secret' => env('STRIPE_WEBHOOK_SECRET'),
+    ],
+
+    'nominatim' => [
+        'url' => env('NOMINATIM_URL', 'https://nominatim.openstreetmap.org'),
+        'user_agent' => env('NOMINATIM_USER_AGENT', 'LaverieBackOffice/1.0 (contact@laverie.local)'),
+        'verify_ssl' => env('NOMINATIM_VERIFY_SSL', env('APP_ENV', 'production') !== 'local'),
+    ],
+
 ];
diff --git a/resources/js/Components/ConfirmDeleteModal.vue b/resources/js/Components/ConfirmDeleteModal.vue
new file mode 100644
index 0000000..2ac3eaa
--- /dev/null
+++ b/resources/js/Components/ConfirmDeleteModal.vue
@@ -0,0 +1,67 @@
+<script setup>
+import DangerButton from '@/Components/DangerButton.vue';
+import Modal from '@/Components/Modal.vue';
+import PrimaryButton from '@/Components/PrimaryButton.vue';
+import SecondaryButton from '@/Components/SecondaryButton.vue';
+
+defineProps({
+    show: {
+        type: Boolean,
+        default: false,
+    },
+    title: {
+        type: String,
+        default: 'Confirmer la suppression',
+    },
+    message: {
+        type: String,
+        required: true,
+    },
+    confirmLabel: {
+        type: String,
+        default: 'Supprimer',
+    },
+    warning: {
+        type: String,
+        default: 'Cette action est irréversible.',
+    },
+    processing: {
+        type: Boolean,
+        default: false,
+    },
+    danger: {
+        type: Boolean,
+        default: true,
+    },
+});
+
+const emit = defineEmits(['close', 'confirm']);
+</script>
+
+<template>
+    <Modal :show="show" max-width="md" @close="emit('close')">
+        <div class="p-6">
+            <h2 class="text-lg font-semibold text-slate-900">
+                {{ title }}
+            </h2>
+            <p class="mt-2 text-sm text-slate-600">
+                {{ message }}
+            </p>
+            <p v-if="warning" class="mt-2 rounded-lg bg-amber-50 px-3 py-2 text-sm text-amber-800">
+                {{ warning }}
+            </p>
+
+            <div class="mt-6 flex justify-end gap-3">
+                <SecondaryButton type="button" :disabled="processing" @click="emit('close')">
+                    Annuler
+                </SecondaryButton>
+                <DangerButton v-if="danger" type="button" :disabled="processing" @click="emit('confirm')">
+                    {{ confirmLabel }}
+                </DangerButton>
+                <PrimaryButton v-else type="button" :disabled="processing" @click="emit('confirm')">
+                    {{ confirmLabel }}
+                </PrimaryButton>
+            </div>
+        </div>
+    </Modal>
+</template>
\ No newline at end of file
diff --git a/resources/js/Components/Dropdown.vue b/resources/js/Components/Dropdown.vue
index ede3626..06ee2ea 100644
--- a/resources/js/Components/Dropdown.vue
+++ b/resources/js/Components/Dropdown.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { computed, onUnmounted, ref, watch } from 'vue';
 
 const props = defineProps({
     align: {
@@ -16,47 +16,65 @@ const props = defineProps({
     },
 });
 
+const open = ref(false);
+const dropdownRef = ref(null);
+
 const closeOnEscape = (e) => {
     if (open.value && e.key === 'Escape') {
         open.value = false;
     }
 };
 
-onMounted(() => document.addEventListener('keydown', closeOnEscape));
-onUnmounted(() => document.removeEventListener('keydown', closeOnEscape));
+const closeOnClickOutside = (e) => {
+    if (open.value && dropdownRef.value && !dropdownRef.value.contains(e.target)) {
+        open.value = false;
+    }
+};
+
+watch(open, (isOpen) => {
+    if (isOpen) {
+        document.addEventListener('keydown', closeOnEscape);
+        document.addEventListener('click', closeOnClickOutside);
+    } else {
+        document.removeEventListener('keydown', closeOnEscape);
+        document.removeEventListener('click', closeOnClickOutside);
+    }
+});
+
+onUnmounted(() => {
+    document.removeEventListener('keydown', closeOnEscape);
+    document.removeEventListener('click', closeOnClickOutside);
+});
 
 const widthClass = computed(() => {
-    return {
+    const widths = {
         48: 'w-48',
-    }[props.width.toString()];
+        56: 'w-56',
+        64: 'w-64',
+        72: 'w-72',
+    };
+
+    return widths[props.width.toString()] ?? 'w-48';
 });
 
 const alignmentClasses = computed(() => {
     if (props.align === 'left') {
         return 'ltr:origin-top-left rtl:origin-top-right start-0';
-    } else if (props.align === 'right') {
-        return 'ltr:origin-top-right rtl:origin-top-left end-0';
-    } else {
-        return 'origin-top';
     }
-});
+    if (props.align === 'right') {
+        return 'ltr:origin-top-right rtl:origin-top-left end-0';
+    }
 
-const open = ref(false);
+    return 'origin-top';
+});
 </script>
 
 <template>
-    <div class="relative">
-        <div @click="open = !open">
+    <div ref="dropdownRef" class="relative">
+        <div @click.stop="open = !open">
             <slot name="trigger" />
         </div>
 
-        <!-- Full Screen Dropdown Overlay -->
-        <div
-            v-show="open"
-            class="fixed inset-0 z-40"
-            @click="open = false"
-        ></div>
-
         <Transition
             enter-active-class="transition ease-out duration-200"
             enter-from-class="opacity-0 scale-95"
@@ -69,8 +87,6 @@ const open = ref(false);
                 v-show="open"
                 class="absolute z-50 mt-2 rounded-md shadow-lg"
                 :class="[widthClass, alignmentClasses]"
-                style="display: none"
-                @click="open = false"
             >
                 <div
                     class="rounded-md ring-1 ring-black ring-opacity-5"
diff --git a/resources/js/Components/LaverieLogo.vue b/resources/js/Components/LaverieLogo.vue
new file mode 100644
index 0000000..a585276
--- /dev/null
+++ b/resources/js/Components/LaverieLogo.vue
@@ -0,0 +1,7 @@
+<template>
+    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true">
+        <path
+            d="M18 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2ZM8 4h8v2H8V4Zm-2 4h12v12H6V8Zm6 4a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z"
+        />
+    </svg>
+</template>
diff --git a/resources/js/Components/Modal.vue b/resources/js/Components/Modal.vue
index 4f847c4..7887bbf 100644
--- a/resources/js/Components/Modal.vue
+++ b/resources/js/Components/Modal.vue
@@ -70,6 +70,7 @@ const maxWidthClass = computed(() => {
         lg: 'sm:max-w-lg',
         xl: 'sm:max-w-xl',
         '2xl': 'sm:max-w-2xl',
+        '3xl': 'sm:max-w-3xl',
     }[props.maxWidth];
 });
 </script>
diff --git a/resources/js/Components/PrimaryButton.vue b/resources/js/Components/PrimaryButton.vue
index 3bf8eb9..a4ca033 100644
--- a/resources/js/Components/PrimaryButton.vue
+++ b/resources/js/Components/PrimaryButton.vue
@@ -1,6 +1,6 @@
 <template>
     <button
-        class="inline-flex items-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-xs font-semibold uppercase tracking-widest text-white transition duration-150 ease-in-out hover:bg-gray-700 focus:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 active:bg-gray-900"
+        class="inline-flex items-center rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500/30 focus:ring-offset-2 active:bg-indigo-800 disabled:opacity-50"
     >
         <slot />
     </button>
diff --git a/resources/js/Components/SecondaryButton.vue b/resources/js/Components/SecondaryButton.vue
index eb4e75c..538515c 100644
--- a/resources/js/Components/SecondaryButton.vue
+++ b/resources/js/Components/SecondaryButton.vue
@@ -10,7 +10,7 @@ defineProps({
 <template>
     <button
         :type="type"
-        class="inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-xs font-semibold uppercase tracking-widest text-gray-700 shadow-sm transition duration-150 ease-in-out hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:opacity-25"
+        class="inline-flex items-center rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm font-semibold text-slate-700 shadow-sm transition hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-indigo-500/20 focus:ring-offset-2 disabled:opacity-50"
     >
         <slot />
     </button>
diff --git a/resources/js/Components/Supervisor/AddressAutocomplete.vue b/resources/js/Components/Supervisor/AddressAutocomplete.vue
new file mode 100644
index 0000000..d032627
--- /dev/null
+++ b/resources/js/Components/Supervisor/AddressAutocomplete.vue
@@ -0,0 +1,162 @@
+<script setup>
+import { filterInputClass } from '@/Components/Supervisor/ui.js';
+import { onMounted, onUnmounted, ref, watch } from 'vue';
+
+const props = defineProps({
+    address: {
+        type: String,
+        default: '',
+    },
+    city: {
+        type: String,
+        default: '',
+    },
+    zipCode: {
+        type: String,
+        default: '',
+    },
+    required: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+const emit = defineEmits(['update:address', 'update:city', 'update:zipCode']);
+
+const root = ref(null);
+const query = ref(props.address ?? '');
+const suggestions = ref([]);
+const isOpen = ref(false);
+const isLoading = ref(false);
+const activeIndex = ref(-1);
+
+let debounceTimer = null;
+
+watch(
+    () => props.address,
+    (value) => {
+        if (value !== query.value) {
+            query.value = value ?? '';
+        }
+    },
+);
+
+const closeSuggestions = () => {
+    isOpen.value = false;
+    activeIndex.value = -1;
+};
+
+const searchAddresses = async () => {
+    if (query.value.trim().length < 3) {
+        suggestions.value = [];
+        closeSuggestions();
+        return;
+    }
+
+    isLoading.value = true;
+
+    try {
+        const response = await window.axios.get(route('supervisor.organizations.addresses.search'), {
+            params: { q: query.value.trim() },
+        });
+
+        suggestions.value = response.data ?? [];
+        isOpen.value = suggestions.value.length > 0;
+        activeIndex.value = -1;
+    } catch {
+        suggestions.value = [];
+        closeSuggestions();
+    } finally {
+        isLoading.value = false;
+    }
+};
+
+const onInput = () => {
+    emit('update:address', query.value);
+    clearTimeout(debounceTimer);
+    debounceTimer = setTimeout(searchAddresses, 300);
+};
+
+const selectSuggestion = (suggestion) => {
+    query.value = suggestion.address;
+    emit('update:address', suggestion.address);
+    emit('update:city', suggestion.city ?? '');
+    emit('update:zipCode', suggestion.zip_code ?? '');
+    closeSuggestions();
+};
+
+const onKeydown = (event) => {
+    if (!isOpen.value || suggestions.value.length === 0) {
+        return;
+    }
+
+    if (event.key === 'ArrowDown') {
+        event.preventDefault();
+        activeIndex.value = (activeIndex.value + 1) % suggestions.value.length;
+    } else if (event.key === 'ArrowUp') {
+        event.preventDefault();
+        activeIndex.value = activeIndex.value <= 0
+            ? suggestions.value.length - 1
+            : activeIndex.value - 1;
+    } else if (event.key === 'Enter' && activeIndex.value >= 0) {
+        event.preventDefault();
+        selectSuggestion(suggestions.value[activeIndex.value]);
+    } else if (event.key === 'Escape') {
+        closeSuggestions();
+    }
+};
+
+const onClickOutside = (event) => {
+    if (root.value && !root.value.contains(event.target)) {
+        closeSuggestions();
+    }
+};
+
+onMounted(() => document.addEventListener('click', onClickOutside));
+onUnmounted(() => {
+    document.removeEventListener('click', onClickOutside);
+    clearTimeout(debounceTimer);
+});
+</script>
+
+<template>
+    <div ref="root" class="relative">
+        <input
+            v-model="query"
+            type="text"
+            autocomplete="off"
+            placeholder="Rechercher une adresse…"
+            :required="required"
+            :class="filterInputClass"
+            @input="onInput"
+            @focus="searchAddresses"
+            @keydown="onKeydown"
+        />
+
+        <p v-if="isLoading" class="mt-1 text-xs text-slate-400">
+            Recherche en cours…
+        </p>
+
+        <ul
+            v-if="isOpen && suggestions.length > 0"
+            class="absolute z-20 mt-1 max-h-56 w-full overflow-y-auto rounded-xl border border-slate-200 bg-white py-1 shadow-lg"
+        >
+            <li
+                v-for="(suggestion, index) in suggestions"
+                :key="`${suggestion.label}-${index}`"
+            >
+                <button
+                    type="button"
+                    class="block w-full px-3 py-2 text-left text-sm transition hover:bg-indigo-50"
+                    :class="index === activeIndex ? 'bg-indigo-50 text-indigo-700' : 'text-slate-700'"
+                    @mousedown.prevent="selectSuggestion(suggestion)"
+                >
+                    <span class="block font-medium">{{ suggestion.address }}</span>
+                    <span class="block text-xs text-slate-400">
+                        {{ [suggestion.zip_code, suggestion.city].filter(Boolean).join(' ') }}
+                    </span>
+                </button>
+            </li>
+        </ul>
+    </div>
+</template>
diff --git a/resources/js/Components/Supervisor/AlertBanner.vue b/resources/js/Components/Supervisor/AlertBanner.vue
new file mode 100644
index 0000000..44fd833
--- /dev/null
+++ b/resources/js/Components/Supervisor/AlertBanner.vue
@@ -0,0 +1,23 @@
+<script setup>
+defineProps({
+    type: {
+        type: String,
+        default: 'error',
+    },
+});
+
+const styles = {
+    error: 'border-red-200 bg-red-50 text-red-800',
+    success: 'border-emerald-200 bg-emerald-50 text-emerald-800',
+    info: 'border-sky-200 bg-sky-50 text-sky-800',
+};
+</script>
+
+<template>
+    <div
+        class="mb-4 flex items-start gap-2 rounded-xl border px-4 py-3 text-sm"
+        :class="styles[type] ?? styles.error"
+    >
+        <slot />
+    </div>
+</template>
diff --git a/resources/js/Components/Supervisor/DataTable.vue b/resources/js/Components/Supervisor/DataTable.vue
new file mode 100644
index 0000000..d149495
--- /dev/null
+++ b/resources/js/Components/Supervisor/DataTable.vue
@@ -0,0 +1,21 @@
+<script setup>
+import { cardClass } from '@/Components/Supervisor/ui.js';
+</script>
+
+<template>
+    <div :class="cardClass">
+        <div class="overflow-x-auto">
+            <table class="min-w-full divide-y divide-slate-100">
+                <thead class="bg-slate-50/80">
+                    <slot name="head" />
+                </thead>
+                <tbody
+                    class="divide-y divide-slate-100 bg-white [&_tr_td]:border-l-2 [&_tr_td]:border-l-transparent [&_tr_td]:transition-colors [&_tr_td]:duration-150 [&_tr:hover_td]:bg-indigo-50/70 [&_tr:hover_td:first-child]:border-l-indigo-500"
+                >
+                    <slot />
+                </tbody>
+            </table>
+        </div>
+        <slot name="footer" />
+    </div>
+</template>
diff --git a/resources/js/Components/Supervisor/FormField.vue b/resources/js/Components/Supervisor/FormField.vue
new file mode 100644
index 0000000..7d2cd03
--- /dev/null
+++ b/resources/js/Components/Supervisor/FormField.vue
@@ -0,0 +1,28 @@
+<script setup>
+import { labelClass } from '@/Components/Supervisor/ui.js';
+
+defineProps({
+    label: {
+        type: String,
+        required: true,
+    },
+    hint: {
+        type: String,
+        default: '',
+    },
+    fieldClass: {
+        type: String,
+        default: '',
+    },
+});
+</script>
+
+<template>
+    <div :class="fieldClass">
+        <label class="block">
+            <span :class="labelClass">{{ label }}</span>
+            <slot />
+        </label>
+        <p v-if="hint" class="mt-1 text-xs text-slate-400">{{ hint }}</p>
+    </div>
+</template>
diff --git a/resources/js/Components/Supervisor/FormModal.vue b/resources/js/Components/Supervisor/FormModal.vue
new file mode 100644
index 0000000..423dc74
--- /dev/null
+++ b/resources/js/Components/Supervisor/FormModal.vue
@@ -0,0 +1,55 @@
+<script setup>
+import Modal from '@/Components/Modal.vue';
+import PrimaryButton from '@/Components/PrimaryButton.vue';
+import SecondaryButton from '@/Components/SecondaryButton.vue';
+
+defineProps({
+    show: {
+        type: Boolean,
+        default: false,
+    },
+    title: {
+        type: String,
+        required: true,
+    },
+    submitLabel: {
+        type: String,
+        default: 'Enregistrer',
+    },
+    processing: {
+        type: Boolean,
+        default: false,
+    },
+    maxWidth: {
+        type: String,
+        default: '2xl',
+    },
+});
+
+const emit = defineEmits(['close', 'submit']);
+</script>
+
+<template>
+    <Modal :show="show" :max-width="maxWidth" @close="emit('close')">
+        <form class="flex max-h-[calc(100vh-6rem)] flex-col" @submit.prevent="emit('submit')">
+            <div class="border-b border-slate-200 px-6 py-4">
+                <h2 class="text-lg font-semibold text-slate-900">
+                    {{ title }}
+                </h2>
+            </div>
+
+            <div class="overflow-y-auto px-6 py-5">
+                <slot />
+            </div>
+
+            <div class="flex justify-end gap-3 border-t border-slate-200 bg-slate-50 px-6 py-4">
+                <SecondaryButton type="button" :disabled="processing" @click="emit('close')">
+                    Annuler
+                </SecondaryButton>
+                <PrimaryButton type="submit" :disabled="processing">
+                    {{ submitLabel }}
+                </PrimaryButton>
+            </div>
+        </form>
+    </Modal>
+</template>
diff --git a/resources/js/Components/Supervisor/OutlineSelect.vue b/resources/js/Components/Supervisor/OutlineSelect.vue
new file mode 100644
index 0000000..6fc1ef6
--- /dev/null
+++ b/resources/js/Components/Supervisor/OutlineSelect.vue
@@ -0,0 +1,266 @@
+<script setup>
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+
+const props = defineProps({
+    modelValue: {
+        type: [String, Number],
+        default: '',
+    },
+    options: {
+        type: Array,
+        required: true,
+    },
+    label: {
+        type: String,
+        default: '',
+    },
+    id: {
+        type: String,
+        default: '',
+    },
+    placeholder: {
+        type: String,
+        default: 'Sélectionner…',
+    },
+    variant: {
+        type: String,
+        default: 'dark',
+        validator: (value) => ['dark', 'light'].includes(value),
+    },
+    bordered: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+const root = ref(null);
+const isOpen = ref(false);
+const activeIndex = ref(-1);
+
+const normalizedValue = computed(() => {
+    const value = props.modelValue;
+
+    return value === null || value === undefined ? '' : String(value);
+});
+
+const selectedLabel = computed(() => {
+    const selected = props.options.find((option) => String(option.value) === normalizedValue.value);
+
+    return selected?.label ?? props.placeholder;
+});
+
+const isDark = computed(() => props.variant === 'dark');
+
+const wrapperClass = computed(() => (
+    props.bordered
+        ? (isDark.value ? 'rounded-xl border border-white/25 p-4' : 'rounded-xl border border-slate-200 p-4')
+        : ''
+));
+
+const labelClass = computed(() => (
+    isDark.value
+        ? 'flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-indigo-200'
+        : 'flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-slate-500'
+));
+
+const triggerClass = computed(() => (
+    isDark.value
+        ? 'border-white/20 bg-transparent text-white hover:border-white/30 focus:border-white/40 focus:ring-white/15'
+        : 'border-slate-200 bg-white text-slate-800 hover:border-slate-300 focus:border-indigo-400 focus:ring-indigo-500/20'
+));
+
+const menuClass = computed(() => (
+    isDark.value
+        ? 'border-white/20 bg-slate-900/95 text-white shadow-xl shadow-black/30 backdrop-blur-md'
+        : 'border-slate-200 bg-white text-slate-800 shadow-lg shadow-slate-200/60'
+));
+
+const chevronClass = computed(() => (
+    isDark.value ? 'text-indigo-200' : 'text-slate-400'
+));
+
+const optionClass = (option, index) => {
+    const isSelected = String(option.value) === normalizedValue.value;
+    const isActive = index === activeIndex.value;
+
+    if (isDark.value) {
+        if (isSelected) {
+            return 'bg-indigo-500/25 text-white';
+        }
+
+        if (isActive) {
+            return 'bg-white/10 text-white';
+        }
+
+        return 'text-indigo-100 hover:bg-white/10 hover:text-white';
+    }
+
+    if (isSelected) {
+        return 'bg-indigo-50 text-indigo-700';
+    }
+
+    if (isActive) {
+        return 'bg-slate-50 text-slate-900';
+    }
+
+    return 'text-slate-700 hover:bg-slate-50';
+};
+
+const toggle = () => {
+    isOpen.value = !isOpen.value;
+
+    if (isOpen.value) {
+        const selectedIndex = props.options.findIndex((option) => String(option.value) === normalizedValue.value);
+        activeIndex.value = selectedIndex >= 0 ? selectedIndex : 0;
+    }
+};
+
+const close = () => {
+    isOpen.value = false;
+    activeIndex.value = -1;
+};
+
+const selectOption = (option) => {
+    emit('update:modelValue', option.value);
+    emit('change', option.value);
+    close();
+};
+
+const onClickOutside = (event) => {
+    if (isOpen.value && root.value && !root.value.contains(event.target)) {
+        close();
+    }
+};
+
+const onKeydown = (event) => {
+    if (!isOpen.value) {
+        if (['ArrowDown', 'ArrowUp', 'Enter', ' '].includes(event.key)) {
+            event.preventDefault();
+            isOpen.value = true;
+            activeIndex.value = Math.max(
+                0,
+                props.options.findIndex((option) => String(option.value) === normalizedValue.value),
+            );
+        }
+
+        return;
+    }
+
+    if (event.key === 'Escape') {
+        event.preventDefault();
+        close();
+        return;
+    }
+
+    if (event.key === 'ArrowDown') {
+        event.preventDefault();
+        activeIndex.value = Math.min(activeIndex.value + 1, props.options.length - 1);
+        return;
+    }
+
+    if (event.key === 'ArrowUp') {
+        event.preventDefault();
+        activeIndex.value = Math.max(activeIndex.value - 1, 0);
+        return;
+    }
+
+    if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+
+        if (props.options[activeIndex.value]) {
+            selectOption(props.options[activeIndex.value]);
+        }
+    }
+};
+
+onMounted(() => {
+    document.addEventListener('click', onClickOutside);
+});
+
+onUnmounted(() => {
+    document.removeEventListener('click', onClickOutside);
+});
+</script>
+
+<template>
+    <div ref="root" :class="wrapperClass">
+        <label
+            v-if="label"
+            :for="id"
+            :class="labelClass"
+        >
+            <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
+            </svg>
+            {{ label }}
+        </label>
+
+        <div class="relative" :class="label ? 'mt-2' : ''">
+            <button
+                :id="id"
+                type="button"
+                class="flex w-full items-center justify-between gap-3 rounded-lg border py-2.5 pl-3 pr-3 text-left text-sm font-medium transition focus:outline-none focus:ring-2"
+                :class="triggerClass"
+                :aria-expanded="isOpen"
+                aria-haspopup="listbox"
+                @click.stop="toggle"
+                @keydown="onKeydown"
+            >
+                <span class="truncate">{{ selectedLabel }}</span>
+                <svg
+                    class="h-4 w-4 shrink-0 transition-transform duration-200"
+                    :class="[chevronClass, isOpen ? 'rotate-180' : '']"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    stroke-width="2"
+                >
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
+                </svg>
+            </button>
+
+            <Transition
+                enter-active-class="transition ease-out duration-150"
+                enter-from-class="opacity-0 -translate-y-1 scale-[0.98]"
+                enter-to-class="opacity-100 translate-y-0 scale-100"
+                leave-active-class="transition ease-in duration-100"
+                leave-from-class="opacity-100 translate-y-0 scale-100"
+                leave-to-class="opacity-0 -translate-y-1 scale-[0.98]"
+            >
+                <ul
+                    v-show="isOpen"
+                    class="absolute z-[100] mt-2 max-h-60 w-full overflow-auto rounded-xl border p-1.5"
+                    :class="menuClass"
+                    role="listbox"
+                    :aria-labelledby="id"
+                >
+                    <li
+                        v-for="(option, index) in options"
+                        :key="`${option.value}-${index}`"
+                        role="option"
+                        :aria-selected="String(option.value) === normalizedValue"
+                        class="flex cursor-pointer items-center justify-between gap-2 rounded-lg px-3 py-2.5 text-sm transition"
+                        :class="optionClass(option, index)"
+                        @click.stop="selectOption(option)"
+                        @mouseenter="activeIndex = index"
+                    >
+                        <span class="truncate">{{ option.label }}</span>
+                        <svg
+                            v-if="String(option.value) === normalizedValue"
+                            class="h-4 w-4 shrink-0"
+                            :class="isDark ? 'text-indigo-300' : 'text-indigo-500'"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke="currentColor"
+                            stroke-width="2.5"
+                        >
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
+                        </svg>
+                    </li>
+                </ul>
+            </Transition>
+        </div>
+    </div>
+</template>
diff --git a/resources/js/Components/Supervisor/PageToolbar.vue b/resources/js/Components/Supervisor/PageToolbar.vue
new file mode 100644
index 0000000..82c833b
--- /dev/null
+++ b/resources/js/Components/Supervisor/PageToolbar.vue
@@ -0,0 +1,18 @@
+<script setup>
+defineProps({
+    description: {
+        type: String,
+        default: '',
+    },
+});
+</script>
+
+<template>
+    <div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <p v-if="description" class="text-sm text-slate-500">{{ description }}</p>
+        <div v-else class="flex-1" />
+        <div class="flex shrink-0 items-center gap-3">
+            <slot />
+        </div>
+    </div>
+</template>
diff --git a/resources/js/Components/Supervisor/Pagination.vue b/resources/js/Components/Supervisor/Pagination.vue
new file mode 100644
index 0000000..ed36786
--- /dev/null
+++ b/resources/js/Components/Supervisor/Pagination.vue
@@ -0,0 +1,96 @@
+<script setup>
+import { filterSelectClass } from '@/Components/Supervisor/ui.js';
+import { listPerPageOptions } from '@/Components/Supervisor/useListFilters.js';
+import { Link } from '@inertiajs/vue3';
+
+defineProps({
+    paginator: {
+        type: Object,
+        required: true,
+    },
+    perPage: {
+        type: [Number, String],
+        default: 10,
+    },
+});
+
+const emit = defineEmits(['update:perPage']);
+
+const formatLabel = (label) => {
+    const text = String(label)
+        .replace(/&laquo;/g, '‹')
+        .replace(/&raquo;/g, '›')
+        .trim();
+
+    if (/previous/i.test(text)) {
+        return 'Précédent';
+    }
+
+    if (/next/i.test(text)) {
+        return 'Suivant';
+    }
+
+    return text;
+};
+
+const onPerPageChange = (event) => {
+    emit('update:perPage', Number(event.target.value));
+};
+</script>
+
+<template>
+    <div
+        v-if="paginator.total > 0"
+        class="flex flex-wrap items-center justify-between gap-x-6 gap-y-3 border-t border-slate-100 px-6 py-4"
+    >
+        <p class="shrink-0 text-sm text-slate-500">
+            {{ paginator.from ?? 0 }}–{{ paginator.to ?? 0 }}
+            <span class="text-slate-400">sur</span>
+            {{ paginator.total }}
+            <span class="text-slate-400">résultat(s)</span>
+        </p>
+
+        <div class="flex flex-wrap items-center gap-4">
+            <label class="flex shrink-0 items-center gap-2 text-sm text-slate-600">
+                <span class="whitespace-nowrap">Lignes par page</span>
+                <select
+                    :value="perPage"
+                    :class="filterSelectClass"
+                    @change="onPerPageChange"
+                >
+                    <option v-for="option in listPerPageOptions" :key="option" :value="option">
+                        {{ option }}
+                    </option>
+                </select>
+            </label>
+
+            <nav
+                v-if="paginator.last_page > 1"
+                class="flex flex-wrap items-center gap-1"
+            >
+                <template v-for="link in paginator.links" :key="link.label">
+                    <Link
+                        v-if="link.url"
+                        :href="link.url"
+                        class="rounded-lg px-3 py-1.5 text-sm font-medium transition"
+                        :class="
+                            link.active
+                                ? 'bg-indigo-600 text-white shadow-sm'
+                                : 'text-slate-600 hover:bg-slate-100'
+                        "
+                        preserve-state
+                    >
+                        {{ formatLabel(link.label) }}
+                    </Link>
+                    <span
+                        v-else
+                        class="cursor-not-allowed rounded-lg px-3 py-1.5 text-sm font-medium text-slate-300"
+                        :class="link.active ? 'bg-indigo-600 text-white shadow-sm' : ''"
+                    >
+                        {{ formatLabel(link.label) }}
+                    </span>
+                </template>
+            </nav>
+        </div>
+    </div>
+</template>
diff --git a/resources/js/Components/Supervisor/StatusBadge.vue b/resources/js/Components/Supervisor/StatusBadge.vue
new file mode 100644
index 0000000..2ba08e0
--- /dev/null
+++ b/resources/js/Components/Supervisor/StatusBadge.vue
@@ -0,0 +1,21 @@
+<script setup>
+defineProps({
+    label: {
+        type: String,
+        required: true,
+    },
+    colorClass: {
+        type: String,
+        default: 'bg-slate-100 text-slate-700 ring-slate-500/20',
+    },
+});
+</script>
+
+<template>
+    <span
+        class="inline-flex rounded-full px-2.5 py-0.5 text-xs font-medium ring-1 ring-inset"
+        :class="colorClass"
+    >
+        {{ label }}
+    </span>
+</template>
diff --git a/resources/js/Components/Supervisor/TableHeaderCell.vue b/resources/js/Components/Supervisor/TableHeaderCell.vue
new file mode 100644
index 0000000..17c97ba
--- /dev/null
+++ b/resources/js/Components/Supervisor/TableHeaderCell.vue
@@ -0,0 +1,96 @@
+<script setup>
+import { filterInputClass, filterLabelClass, thFilterClass } from '@/Components/Supervisor/ui.js';
+
+const props = defineProps({
+    label: {
+        type: String,
+        required: true,
+    },
+    align: {
+        type: String,
+        default: 'left',
+    },
+    sortable: {
+        type: Boolean,
+        default: false,
+    },
+    sortKey: {
+        type: String,
+        default: '',
+    },
+    activeSort: {
+        type: String,
+        default: '',
+    },
+    sortDirection: {
+        type: String,
+        default: 'asc',
+    },
+});
+
+const emit = defineEmits(['sort']);
+
+const isActive = () => props.sortable && props.activeSort === props.sortKey;
+
+const handleSort = () => {
+    if (props.sortable && props.sortKey) {
+        emit('sort', props.sortKey);
+    }
+};
+</script>
+
+<template>
+    <th
+        :class="[
+            thFilterClass,
+            align === 'right' ? 'text-right' : 'text-left',
+        ]"
+    >
+        <button
+            v-if="sortable"
+            type="button"
+            class="mb-1.5 flex items-center gap-1 text-xs font-semibold uppercase tracking-wide transition"
+            :class="[
+                align === 'right' ? 'ml-auto' : '',
+                isActive() ? 'text-indigo-600' : 'text-slate-600 hover:text-indigo-600',
+            ]"
+            @click="handleSort"
+        >
+            <span>{{ label }}</span>
+            <svg
+                v-if="isActive() && sortDirection === 'asc'"
+                class="h-3.5 w-3.5 flex-shrink-0"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width="2.5"
+            >
+                <path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7" />
+            </svg>
+            <svg
+                v-else-if="isActive() && sortDirection === 'desc'"
+                class="h-3.5 w-3.5 flex-shrink-0"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width="2.5"
+            >
+                <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
+            </svg>
+            <svg
+                v-else
+                class="h-3.5 w-3.5 flex-shrink-0 text-slate-300"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width="2"
+            >
+                <path stroke-linecap="round" stroke-linejoin="round" d="M8 9l4-4 4 4M8 15l4 4 4-4" />
+            </svg>
+        </button>
+        <span v-else :class="filterLabelClass">{{ label }}</span>
+        <slot>
+            <span class="block h-[34px]" aria-hidden="true" />
+        </slot>
+    </th>
+</template>
diff --git a/resources/js/Components/Supervisor/ui.js b/resources/js/Components/Supervisor/ui.js
new file mode 100644
index 0000000..0b3cf6d
--- /dev/null
+++ b/resources/js/Components/Supervisor/ui.js
@@ -0,0 +1,67 @@
+export const labelClass = 'block text-xs font-semibold uppercase tracking-wide text-slate-500';
+
+export const inputClass =
+    'mt-1.5 block w-full rounded-xl border-slate-200 bg-white px-3 py-2.5 text-sm text-slate-800 shadow-sm transition placeholder:text-slate-400 focus:border-indigo-400 focus:outline-none focus:ring-2 focus:ring-indigo-500/20';
+
+export const selectClass = inputClass;
+
+export const cardClass = 'overflow-hidden rounded-2xl border border-slate-200/80 bg-white shadow-sm';
+
+export const filterBarClass =
+    'mb-6 flex flex-wrap gap-4 rounded-2xl border border-slate-200/80 bg-white p-5 shadow-sm';
+
+export const thFilterClass = 'px-6 py-3 align-bottom';
+
+export const filterLabelClass =
+    'mb-1.5 block text-xs font-semibold uppercase tracking-wide text-slate-600';
+
+export const filterInputClass =
+    'block w-full min-w-[7rem] rounded-lg border-slate-200 bg-white px-2.5 py-1.5 text-sm text-slate-800 shadow-sm transition placeholder:text-slate-400 focus:border-indigo-400 focus:outline-none focus:ring-2 focus:ring-indigo-500/20';
+
+export const filterSelectClass = filterInputClass;
+
+export const formPanelClass =
+    'mb-6 rounded-2xl border border-indigo-200/60 bg-white p-6 shadow-sm ring-1 ring-indigo-50';
+
+export const thClass =
+    'px-6 py-4 text-left text-xs font-semibold uppercase tracking-wide text-slate-600';
+
+export const tdClass = 'px-6 py-4 text-sm text-slate-600';
+
+export const rowClass = '';
+
+export const linkClass = 'font-medium text-indigo-600 transition hover:text-indigo-800';
+
+export const machineStatusColors = {
+    available: 'bg-emerald-100 text-emerald-800 ring-emerald-600/20',
+    reserved: 'bg-amber-100 text-amber-800 ring-amber-600/20',
+    running: 'bg-sky-100 text-sky-800 ring-sky-600/20',
+    maintenance: 'bg-orange-100 text-orange-800 ring-orange-600/20',
+    offline: 'bg-slate-100 text-slate-600 ring-slate-500/20',
+    error: 'bg-red-100 text-red-800 ring-red-600/20',
+};
+
+export const bookingStatusColors = {
+    pending: 'bg-slate-100 text-slate-600 ring-slate-500/20',
+    confirmed: 'bg-sky-100 text-sky-800 ring-sky-600/20',
+    expired: 'bg-orange-100 text-orange-800 ring-orange-600/20',
+    active: 'bg-emerald-100 text-emerald-800 ring-emerald-600/20',
+    completed: 'bg-indigo-100 text-indigo-800 ring-indigo-600/20',
+    cancelled: 'bg-amber-100 text-amber-800 ring-amber-600/20',
+    no_show: 'bg-red-100 text-red-800 ring-red-600/20',
+};
+
+export const washStatusColors = {
+    pending_start: 'bg-slate-100 text-slate-600 ring-slate-500/20',
+    running: 'bg-sky-100 text-sky-800 ring-sky-600/20',
+    completed: 'bg-emerald-100 text-emerald-800 ring-emerald-600/20',
+    failed: 'bg-red-100 text-red-800 ring-red-600/20',
+    cancelled: 'bg-amber-100 text-amber-800 ring-amber-600/20',
+};
+
+export const activeStatusColors = {
+    active: 'bg-emerald-100 text-emerald-800 ring-emerald-600/20',
+    inactive: 'bg-slate-100 text-slate-600 ring-slate-500/20',
+};
+
+export const getStatusColor = (status, map) => map[status] ?? 'bg-slate-100 text-slate-700 ring-slate-500/20';
diff --git a/resources/js/Components/Supervisor/useListFilters.js b/resources/js/Components/Supervisor/useListFilters.js
new file mode 100644
index 0000000..a0e2ae7
--- /dev/null
+++ b/resources/js/Components/Supervisor/useListFilters.js
@@ -0,0 +1,75 @@
+import { router } from '@inertiajs/vue3';

+import { reactive, watch } from 'vue';

+

+export const listPerPageOptions = [10, 25, 50];

+

+export function useListFilters(routeName, initialFilters, { debounceKeys = [] } = {}) {

+    const localFilters = reactive({ ...initialFilters });

+

+    const buildParams = ({ resetPage = false } = {}) => {

+        const params = { ...localFilters };

+

+        if (resetPage) {

+            delete params.page;

+        }

+

+        Object.keys(params).forEach((key) => {

+            if (params[key] === '' || params[key] === null || params[key] === undefined) {

+                delete params[key];

+            }

+        });

+

+        return params;

+    };

+

+    const fetchList = ({ resetPage = false } = {}) => {

+        router.get(route(routeName), buildParams({ resetPage }), {

+            preserveState: true,

+            replace: true,

+        });

+    };

+

+    let debounceTimer = null;

+

+    if (debounceKeys.length > 0) {

+        debounceKeys.forEach((key) => {

+            watch(

+                () => localFilters[key],

+                () => {

+                    clearTimeout(debounceTimer);

+                    debounceTimer = setTimeout(() => fetchList({ resetPage: true }), 300);

+                },

+            );

+        });

+    }

+

+    const immediateKeys = Object.keys(initialFilters).filter(

+        (key) => !debounceKeys.includes(key) && key !== 'per_page',

+    );

+

+    if (immediateKeys.length > 0) {

+        watch(

+            () => immediateKeys.map((key) => localFilters[key]),

+            () => fetchList({ resetPage: true }),

+        );

+    }

+

+    if ('per_page' in initialFilters) {

+        watch(

+            () => localFilters.per_page,

+            () => fetchList({ resetPage: true }),

+        );

+    }

+

+    const toggleSort = (key, descFirstKeys = []) => {

+        if (localFilters.sort === key) {

+            localFilters.direction = localFilters.direction === 'asc' ? 'desc' : 'asc';

+            return;

+        }

+

+        localFilters.sort = key;

+        localFilters.direction = descFirstKeys.includes(key) ? 'desc' : 'asc';

+    };

+

+    return { localFilters, toggleSort };

+}

diff --git a/resources/js/Layouts/SupervisorLayout.vue b/resources/js/Layouts/SupervisorLayout.vue
index e421bbd..8e6e4b6 100644
--- a/resources/js/Layouts/SupervisorLayout.vue
+++ b/resources/js/Layouts/SupervisorLayout.vue
@@ -1,7 +1,8 @@
 <script setup>
-import ApplicationLogo from '@/Components/ApplicationLogo.vue';
+import LaverieLogo from '@/Components/LaverieLogo.vue';
+import Dropdown from '@/Components/Dropdown.vue';
 import { Link, usePage } from '@inertiajs/vue3';
-import { computed } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 
 defineProps({
     title: {
@@ -10,120 +11,308 @@ defineProps({
     },
 });
 
+const STORAGE_KEY = 'supervisor-sidebar-collapsed';
+
 const page = usePage();
 const supervisor = computed(() => page.props.auth.supervisor);
+const sidebarCollapsed = ref(false);
 
-const navItems = [
-    { label: 'Tableau de bord', route: 'supervisor.dashboard', icon: 'dashboard' },
-    { label: 'Machines', route: 'supervisor.machines.index', icon: 'machines' },
-    { label: 'Réservations', route: 'supervisor.bookings.index', icon: 'bookings' },
-    { label: 'Lavages', route: 'supervisor.washes.index', icon: 'washes' },
-    { label: 'Tarifs', route: 'supervisor.pricing.index', icon: 'pricing' },
-    { label: 'Promotions', route: 'supervisor.promotions.index', icon: 'promotions' },
+onMounted(() => {
+    sidebarCollapsed.value = localStorage.getItem(STORAGE_KEY) === '1';
+});
+
+watch(sidebarCollapsed, (value) => {
+    localStorage.setItem(STORAGE_KEY, value ? '1' : '0');
+});
+
+const toggleSidebar = () => {
+    sidebarCollapsed.value = !sidebarCollapsed.value;
+};
+const navGroups = [
+    {
+        label: 'Vue d\'ensemble',
+        items: [
+            { label: 'Tableau de bord', route: 'supervisor.dashboard', icon: 'dashboard' },
+        ],
+    },
+    {
+        label: 'Exploitation',
+        items: [
+            { label: 'Enseignes', route: 'supervisor.organizations.index', icon: 'organizations' },
+            { label: 'Machines', route: 'supervisor.machines.index', icon: 'machines' },
+            { label: 'Réservations', route: 'supervisor.bookings.index', icon: 'bookings' },
+            { label: 'Lavages', route: 'supervisor.washes.index', icon: 'washes' },
+        ],
+    },
+    {
+        label: 'Commercial',
+        items: [
+            { label: 'Tarifs', route: 'supervisor.pricing.index', icon: 'pricing' },
+            { label: 'Promotions', route: 'supervisor.promotions.index', icon: 'promotions' },
+        ],
+    },
 ];
 
+const roleLabels = {
+    platform_admin: 'Administrateur',
+    owner: 'Propriétaire',
+    manager: 'Gestionnaire',
+    viewer: 'Lecture seule',
+};
+
+const initials = computed(() => {
+    const name = supervisor.value?.name?.trim() ?? '';
+    if (!name) return '?';
+    const parts = name.split(/\s+/);
+    if (parts.length >= 2) {
+        return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+    }
+    return name.slice(0, 2).toUpperCase();
+});
+
 const isActive = (routeName) => {
     if (routeName === 'supervisor.machines.index') {
         return route().current('supervisor.machines.*');
     }
+    if (routeName === 'supervisor.organizations.index') {
+        return route().current('supervisor.organizations.*');
+    }
     return route().current(routeName);
 };
+
+const iconPaths = {
+    dashboard: 'M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6',
+    organizations: 'M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4',
+    machines: 'M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15',
+    bookings: 'M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z',
+    washes: 'M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z',
+    pricing: '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',
+    promotions: 'M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z',
+};
 </script>
 
 <template>
-    <div class="min-h-screen bg-gray-100">
+    <div class="min-h-screen bg-slate-50">
         <div class="flex min-h-screen">
             <!-- Sidebar -->
-            <aside class="hidden w-64 flex-shrink-0 bg-indigo-900 lg:flex lg:flex-col">
-                <div class="flex h-16 items-center px-6">
-                    <Link :href="route('supervisor.dashboard')" class="flex items-center gap-2">
-                        <ApplicationLogo class="h-8 w-auto fill-current text-white" />
-                        <span class="text-lg font-semibold text-white">Laverie</span>
-                    </Link>
-                </div>
-
-                <nav class="mt-4 flex-1 space-y-1 px-3">
-                    <Link
-                        v-for="item in navItems"
-                        :key="item.route"
-                        :href="route(item.route)"
-                        class="flex items-center rounded-md px-3 py-2 text-sm font-medium transition"
-                        :class="
-                            isActive(item.route)
-                                ? 'bg-indigo-800 text-white'
-                                : 'text-indigo-100 hover:bg-indigo-800 hover:text-white'
-                        "
+            <aside
+                class="hidden flex-shrink-0 transition-[width] duration-300 ease-in-out lg:flex lg:flex-col"
+                :class="sidebarCollapsed ? 'w-[4.75rem]' : 'w-72'"
+            >
+                <div class="flex h-full flex-col bg-gradient-to-b from-slate-900 via-slate-900 to-indigo-950 shadow-xl">
+                    <!-- Logo + toggle -->
+                    <div
+                        class="flex items-center border-b border-white/5"
+                        :class="sidebarCollapsed ? 'flex-col justify-center gap-2 py-3 px-2' : 'h-16 justify-between px-4'"
                     >
-                        {{ item.label }}
-                    </Link>
-                </nav>
+                        <button
+                            v-if="sidebarCollapsed"
+                            type="button"
+                            class="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg text-slate-400 transition hover:bg-white/10 hover:text-white"
+                            title="Agrandir le menu"
+                            @click="toggleSidebar"
+                        >
+                            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M13 5l7 7-7 7M5 5l7 7-7 7" />
+                            </svg>
+                        </button>
 
-                <div class="border-t border-indigo-800 p-4">
-                    <p class="truncate text-sm font-medium text-white">
-                        {{ supervisor?.name }}
-                    </p>
-                    <p class="truncate text-xs text-indigo-300">
-                        {{ supervisor?.email }}
-                    </p>
+                        <Link
+                            :href="route('supervisor.dashboard')"
+                            class="flex items-center rounded-xl transition hover:opacity-90"
+                            :class="sidebarCollapsed ? 'justify-center' : 'gap-3'"
+                            :title="sidebarCollapsed ? 'Laverie' : undefined"
+                        >
+                            <div class="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg bg-white/10 ring-1 ring-white/20">
+                                <LaverieLogo class="h-5 w-5 text-white" />
+                            </div>
+                            <div v-show="!sidebarCollapsed" class="min-w-0">
+                                <span class="text-base font-semibold tracking-tight text-white">Laverie</span>
+                                <p class="text-[10px] font-medium uppercase tracking-widest text-indigo-300/80">
+                                    Back-office
+                                </p>
+                            </div>
+                        </Link>
+
+                        <button
+                            v-if="!sidebarCollapsed"
+                            type="button"
+                            class="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg text-slate-400 transition hover:bg-white/10 hover:text-white"
+                            title="Réduire le menu"
+                            @click="toggleSidebar"
+                        >
+                            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
+                            </svg>
+                        </button>
+                    </div>
+
+                    <!-- Navigation -->
+                    <nav
+                        class="mt-2 flex-1 space-y-4 overflow-y-auto pb-4"
+                        :class="sidebarCollapsed ? 'px-2' : 'px-3'"
+                    >
+                        <div v-for="(group, groupIndex) in navGroups" :key="group.label">
+                            <p
+                                v-show="!sidebarCollapsed"
+                                class="mb-2 px-3 text-[11px] font-semibold uppercase tracking-wider text-slate-500"
+                            >
+                                {{ group.label }}
+                            </p>
+                            <div
+                                v-if="sidebarCollapsed && groupIndex > 0"
+                                class="mx-auto mb-2 h-px w-8 bg-white/10"
+                                aria-hidden="true"
+                            />
+                            <div class="space-y-0.5">
+                                <Link
+                                    v-for="item in group.items"
+                                    :key="item.route"
+                                    :href="route(item.route)"
+                                    class="group relative flex items-center rounded-xl text-sm font-medium transition-all duration-150"
+                                    :class="[
+                                        sidebarCollapsed ? 'justify-center px-0 py-2.5' : 'gap-3 px-3 py-2.5',
+                                        isActive(item.route)
+                                            ? 'bg-white/10 text-white shadow-sm ring-1 ring-white/10'
+                                            : 'text-slate-400 hover:bg-white/5 hover:text-white',
+                                    ]"
+                                    :title="sidebarCollapsed ? item.label : undefined"
+                                >
+                                    <span
+                                        class="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg transition-colors"
+                                        :class="
+                                            isActive(item.route)
+                                                ? 'bg-indigo-500/30 text-indigo-200'
+                                                : 'bg-white/5 text-slate-500 group-hover:bg-white/10 group-hover:text-slate-300'
+                                        "
+                                    >
+                                        <svg
+                                            class="h-4 w-4"
+                                            fill="none"
+                                            viewBox="0 0 24 24"
+                                            stroke="currentColor"
+                                            stroke-width="1.75"
+                                        >
+                                            <path
+                                                stroke-linecap="round"
+                                                stroke-linejoin="round"
+                                                :d="iconPaths[item.icon]"
+                                            />
+                                        </svg>
+                                    </span>
+                                    <span v-show="!sidebarCollapsed">{{ item.label }}</span>
+                                    <span
+                                        v-if="isActive(item.route) && !sidebarCollapsed"
+                                        class="ml-auto h-1.5 w-1.5 rounded-full bg-indigo-400"
+                                    />
+
+                                    <!-- Tooltip mode réduit -->
+                                    <span
+                                        v-if="sidebarCollapsed"
+                                        class="pointer-events-none absolute left-full z-50 ml-3 hidden whitespace-nowrap rounded-lg bg-slate-800 px-2.5 py-1.5 text-xs font-medium text-white shadow-lg ring-1 ring-white/10 group-hover:block"
+                                    >
+                                        {{ item.label }}
+                                    </span>
+                                </Link>
+                            </div>
+                        </div>
+                    </nav>
                 </div>
             </aside>
 
             <!-- Main content -->
-            <div class="flex flex-1 flex-col">
+            <div class="flex min-w-0 flex-1 flex-col">
                 <!-- Header -->
-                <header class="border-b border-gray-200 bg-white shadow-sm">
+                <header class="sticky top-0 z-10 border-b border-slate-200/80 bg-white/80 backdrop-blur-md">
                     <div class="flex h-16 items-center justify-between px-4 sm:px-6 lg:px-8">
-                        <div class="flex items-center gap-4">
+                        <div class="flex min-w-0 items-center gap-4">
                             <Link
                                 :href="route('supervisor.dashboard')"
-                                class="text-lg font-semibold text-gray-800 lg:hidden"
+                                class="text-lg font-semibold text-slate-800 lg:hidden"
                             >
                                 Laverie
                             </Link>
-                            <h1 v-if="title" class="text-lg font-semibold text-gray-800">
-                                {{ title }}
-                            </h1>
+                            <div v-if="title" class="min-w-0">
+                                <h1 class="truncate text-lg font-semibold text-slate-900">
+                                    {{ title }}
+                                </h1>
+                            </div>
                             <slot name="header" />
                         </div>
 
-                        <div class="flex items-center gap-4">
-                            <span class="hidden text-sm text-gray-600 sm:inline">
-                                {{ supervisor?.name }}
-                            </span>
-                            <Link
-                                :href="route('logout')"
-                                method="post"
-                                as="button"
-                                class="rounded-md bg-gray-100 px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-200"
-                            >
-                                Déconnexion
-                            </Link>
+                        <div class="flex items-center gap-3">
+                            <slot name="actions" />
+                            <Dropdown align="right" width="64" content-classes="overflow-hidden rounded-xl bg-white py-0 shadow-xl ring-1 ring-slate-200">
+                                <template #trigger>
+                                    <button
+                                        type="button"
+                                        class="flex h-9 w-9 items-center justify-center rounded-full bg-gradient-to-br from-indigo-500 to-violet-600 text-xs font-bold text-white shadow-sm ring-2 ring-white transition hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-indigo-500/30"
+                                        :title="supervisor?.name"
+                                    >
+                                        {{ initials }}
+                                    </button>
+                                </template>
+
+                                <template #content>
+                                    <div class="border-b border-slate-100 px-5 py-4">
+                                        <p class="truncate text-base font-semibold text-slate-900">
+                                            {{ supervisor?.name }}
+                                        </p>
+                                        <p class="mt-0.5 truncate text-sm text-slate-500">
+                                            {{ supervisor?.email }}
+                                        </p>
+                                        <p class="mt-2 inline-flex rounded-full bg-indigo-50 px-2.5 py-1 text-xs font-medium text-indigo-700">
+                                            {{ roleLabels[supervisor?.role] ?? supervisor?.role }}
+                                        </p>
+                                    </div>
+                                    <Link
+                                        :href="route('logout')"
+                                        method="post"
+                                        as="button"
+                                        class="flex w-full items-center gap-2.5 px-5 py-3 text-sm font-medium text-red-600 transition hover:bg-red-50"
+                                    >
+                                        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75">
+                                            <path
+                                                stroke-linecap="round"
+                                                stroke-linejoin="round"
+                                                d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
+                                            />
+                                        </svg>
+                                        Déconnexion
+                                    </Link>
+                                </template>
+                            </Dropdown>
                         </div>
                     </div>
 
                     <!-- Mobile nav -->
-                    <nav class="flex gap-1 overflow-x-auto border-t border-gray-100 px-4 py-2 lg:hidden">
-                        <Link
-                            v-for="item in navItems"
-                            :key="item.route"
-                            :href="route(item.route)"
-                            class="whitespace-nowrap rounded-md px-3 py-1.5 text-xs font-medium"
-                            :class="
-                                isActive(item.route)
-                                    ? 'bg-indigo-100 text-indigo-800'
-                                    : 'text-gray-600 hover:bg-gray-100'
-                            "
-                        >
-                            {{ item.label }}
-                        </Link>
+                    <nav class="flex gap-1 overflow-x-auto border-t border-slate-100 px-3 py-2 lg:hidden">
+                        <template v-for="group in navGroups" :key="group.label">
+                            <Link
+                                v-for="item in group.items"
+                                :key="item.route"
+                                :href="route(item.route)"
+                                class="whitespace-nowrap rounded-lg px-3 py-1.5 text-xs font-medium transition"
+                                :class="
+                                    isActive(item.route)
+                                        ? 'bg-indigo-50 text-indigo-700 ring-1 ring-indigo-200'
+                                        : 'text-slate-600 hover:bg-slate-100'
+                                "
+                            >
+                                {{ item.label }}
+                            </Link>
+                        </template>
                     </nav>
                 </header>
 
                 <!-- Flash message -->
                 <div
                     v-if="page.props.flash?.success"
-                    class="mx-4 mt-4 rounded-md bg-green-50 px-4 py-3 text-sm text-green-800 sm:mx-6 lg:mx-8"
+                    class="mx-4 mt-4 flex items-center gap-2 rounded-xl border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-800 sm:mx-6 lg:mx-8"
                 >
+                    <svg class="h-4 w-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
+                    </svg>
                     {{ page.props.flash.success }}
                 </div>
 
diff --git a/resources/js/Pages/Supervisor/Auth/Login.vue b/resources/js/Pages/Supervisor/Auth/Login.vue
index fbdcd74..a7626d7 100644
--- a/resources/js/Pages/Supervisor/Auth/Login.vue
+++ b/resources/js/Pages/Supervisor/Auth/Login.vue
@@ -1,9 +1,9 @@
 <script setup>
 import Checkbox from '@/Components/Checkbox.vue';
 import InputError from '@/Components/InputError.vue';
-import InputLabel from '@/Components/InputLabel.vue';
 import PrimaryButton from '@/Components/PrimaryButton.vue';
-import TextInput from '@/Components/TextInput.vue';
+import LaverieLogo from '@/Components/LaverieLogo.vue';
+import { inputClass, labelClass } from '@/Components/Supervisor/ui.js';
 import { Head, useForm } from '@inertiajs/vue3';
 
 defineProps({
@@ -29,65 +29,60 @@ const submit = () => {
 <template>
     <Head title="Connexion superviseur" />
 
-    <div class="flex min-h-screen flex-col items-center justify-center bg-gray-100 px-4">
+    <div class="flex min-h-screen flex-col items-center justify-center bg-gradient-to-br from-slate-900 via-slate-900 to-indigo-950 px-4 py-12">
         <div class="mb-8 text-center">
-            <h1 class="text-2xl font-bold text-gray-900">Laverie — Back-office</h1>
-            <p class="mt-1 text-sm text-gray-600">Connexion exploitant</p>
+            <div class="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-white/10 ring-1 ring-white/20">
+                <LaverieLogo class="h-8 w-8 text-white" />
+            </div>
+            <h1 class="text-2xl font-bold tracking-tight text-white">Laverie</h1>
+            <p class="mt-1 text-sm text-indigo-200/80">Back-office — Connexion exploitant</p>
         </div>
 
-        <div class="w-full max-w-md overflow-hidden rounded-lg bg-white px-6 py-8 shadow-md">
-            <div v-if="status" class="mb-4 text-sm font-medium text-green-600">
+        <div class="w-full max-w-md overflow-hidden rounded-2xl border border-white/10 bg-white p-8 shadow-2xl">
+            <div v-if="status" class="mb-4 rounded-xl bg-emerald-50 px-4 py-3 text-sm font-medium text-emerald-700">
                 {{ status }}
             </div>
 
-            <form @submit.prevent="submit">
+            <form @submit.prevent="submit" class="space-y-5">
                 <div>
-                    <InputLabel for="email" value="Adresse e-mail" />
-
-                    <TextInput
+                    <label for="email" :class="labelClass">Adresse e-mail</label>
+                    <input
                         id="email"
-                        type="email"
-                        class="mt-1 block w-full"
                         v-model="form.email"
+                        type="email"
                         required
                         autofocus
                         autocomplete="username"
+                        :class="inputClass"
                     />
-
                     <InputError class="mt-2" :message="form.errors.email" />
                 </div>
 
-                <div class="mt-4">
-                    <InputLabel for="password" value="Mot de passe" />
-
-                    <TextInput
+                <div>
+                    <label for="password" :class="labelClass">Mot de passe</label>
+                    <input
                         id="password"
-                        type="password"
-                        class="mt-1 block w-full"
                         v-model="form.password"
+                        type="password"
                         required
                         autocomplete="current-password"
+                        :class="inputClass"
                     />
-
                     <InputError class="mt-2" :message="form.errors.password" />
                 </div>
 
-                <div class="mt-4">
-                    <label class="flex items-center">
-                        <Checkbox name="remember" v-model:checked="form.remember" />
-                        <span class="ms-2 text-sm text-gray-600">Se souvenir de moi</span>
-                    </label>
-                </div>
+                <label class="flex items-center gap-2">
+                    <Checkbox name="remember" v-model:checked="form.remember" />
+                    <span class="text-sm text-slate-600">Se souvenir de moi</span>
+                </label>
 
-                <div class="mt-6">
-                    <PrimaryButton
-                        class="w-full justify-center"
-                        :class="{ 'opacity-25': form.processing }"
-                        :disabled="form.processing"
-                    >
-                        Se connecter
-                    </PrimaryButton>
-                </div>
+                <PrimaryButton
+                    class="w-full justify-center"
+                    :class="{ 'opacity-50': form.processing }"
+                    :disabled="form.processing"
+                >
+                    Se connecter
+                </PrimaryButton>
             </form>
         </div>
     </div>
diff --git a/resources/js/Pages/Supervisor/Bookings/Index.vue b/resources/js/Pages/Supervisor/Bookings/Index.vue
index eb78f46..883fd56 100644
--- a/resources/js/Pages/Supervisor/Bookings/Index.vue
+++ b/resources/js/Pages/Supervisor/Bookings/Index.vue
@@ -1,13 +1,31 @@
 <script setup>
+import DataTable from '@/Components/Supervisor/DataTable.vue';
+import Pagination from '@/Components/Supervisor/Pagination.vue';
+import StatusBadge from '@/Components/Supervisor/StatusBadge.vue';
+import TableHeaderCell from '@/Components/Supervisor/TableHeaderCell.vue';
+import { useListFilters } from '@/Components/Supervisor/useListFilters.js';
+import {
+    bookingStatusColors,
+    filterInputClass,
+    filterSelectClass,
+    getStatusColor,
+    linkClass,
+    rowClass,
+    tdClass,
+} from '@/Components/Supervisor/ui.js';
 import SupervisorLayout from '@/Layouts/SupervisorLayout.vue';
-import { Head, Link, router } from '@inertiajs/vue3';
-import { reactive, watch } from 'vue';
+import { Head, Link } from '@inertiajs/vue3';
+import { computed } from 'vue';
 
 const props = defineProps({
     bookings: {
         type: Object,
         required: true,
     },
+    establishments: {
+        type: Array,
+        default: () => [],
+    },
     filters: {
         type: Object,
         default: () => ({}),
@@ -18,17 +36,19 @@ const props = defineProps({
     },
 });
 
-const localFilters = reactive({
+const { localFilters, toggleSort } = useListFilters('supervisor.bookings.index', {
+    establishment_id: props.filters.establishment_id ?? '',
+    user: props.filters.user ?? '',
     status: props.filters.status ?? '',
     date: props.filters.date ?? '',
-});
+    sort: props.filters.sort ?? 'slot_start',
+    direction: props.filters.direction ?? 'desc',
+    per_page: props.filters.per_page ?? 10,
+}, { debounceKeys: ['user'] });
 
-watch(localFilters, () => {
-    router.get(route('supervisor.bookings.index'), localFilters, {
-        preserveState: true,
-        replace: true,
-    });
-});
+const showEstablishmentFilter = computed(() => props.establishments.length > 1);
+
+const handleSort = (key) => toggleSort(key, ['slot_start', 'booking_fee']);
 
 const formatDate = (iso) => {
     if (!iso) return '—';
@@ -40,124 +60,130 @@ const formatDate = (iso) => {
 
 const formatCurrency = (value) =>
     new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(value ?? 0);
-
-const statusColor = (status) => {
-    const colors = {
-        pending: 'bg-gray-100 text-gray-800',
-        confirmed: 'bg-blue-100 text-blue-800',
-        expired: 'bg-orange-100 text-orange-800',
-        active: 'bg-green-100 text-green-800',
-        completed: 'bg-indigo-100 text-indigo-800',
-        cancelled: 'bg-yellow-100 text-yellow-800',
-        no_show: 'bg-red-100 text-red-800',
-    };
-    return colors[status] ?? 'bg-gray-100 text-gray-800';
-};
 </script>
 
 <template>
     <Head title="Réservations" />
 
     <SupervisorLayout title="Réservations">
-        <div class="mb-6 flex flex-wrap gap-4 rounded-lg bg-white p-4 shadow">
-            <div>
-                <label class="block text-xs font-medium text-gray-500">Statut</label>
-                <select
-                    v-model="localFilters.status"
-                    class="mt-1 block rounded-md border-gray-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
-                >
-                    <option value="">Tous</option>
-                    <option v-for="(label, value) in statusOptions" :key="value" :value="value">
-                        {{ label }}
-                    </option>
-                </select>
-            </div>
-            <div>
-                <label class="block text-xs font-medium text-gray-500">Date</label>
-                <input
-                    v-model="localFilters.date"
-                    type="date"
-                    class="mt-1 block rounded-md border-gray-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
-                />
-            </div>
-        </div>
-
-        <div class="overflow-hidden rounded-lg bg-white shadow">
-            <table class="min-w-full divide-y divide-gray-200">
-                <thead class="bg-gray-50">
-                    <tr>
-                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Créneau</th>
-                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Utilisateur</th>
-                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Machine</th>
-                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Statut</th>
-                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Frais</th>
-                    </tr>
-                </thead>
-                <tbody class="divide-y divide-gray-100">
-                    <tr v-if="bookings.data.length === 0">
-                        <td colspan="5" class="px-4 py-8 text-center text-sm text-gray-500">
-                            Aucune réservation trouvée.
-                        </td>
-                    </tr>
-                    <tr v-for="booking in bookings.data" :key="booking.uuid" class="hover:bg-gray-50">
-                        <td class="whitespace-nowrap px-4 py-3 text-sm">
-                            <div>{{ formatDate(booking.slot_start) }}</div>
-                            <div class="text-xs text-gray-500">→ {{ formatDate(booking.slot_end) }}</div>
-                        </td>
-                        <td class="px-4 py-3 text-sm">
-                            <div class="font-medium text-gray-800">{{ booking.user?.name ?? '—' }}</div>
-                            <div class="text-xs text-gray-500">{{ booking.user?.email }}</div>
-                        </td>
-                        <td class="px-4 py-3 text-sm">
-                            <Link
-                                v-if="booking.machine"
-                                :href="route('supervisor.machines.show', booking.machine.uuid)"
-                                class="text-indigo-600 hover:text-indigo-800"
-                            >
-                                {{ booking.machine.name }}
-                            </Link>
-                            <span v-else>—</span>
-                            <div v-if="booking.machine?.establishment_name" class="text-xs text-gray-500">
-                                {{ booking.machine.establishment_name }}
-                            </div>
-                        </td>
-                        <td class="px-4 py-3">
-                            <span
-                                class="rounded-full px-2.5 py-0.5 text-xs font-medium"
-                                :class="statusColor(booking.status)"
-                            >
-                                {{ booking.status_label }}
-                            </span>
-                        </td>
-                        <td class="whitespace-nowrap px-4 py-3 text-sm text-gray-600">
-                            {{ formatCurrency(booking.booking_fee) }}
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-
-            <div v-if="bookings.links.length > 3" class="flex items-center justify-between border-t px-4 py-3">
-                <p class="text-sm text-gray-600">
-                    {{ bookings.from ?? 0 }}–{{ bookings.to ?? 0 }} sur {{ bookings.total }}
-                </p>
-                <div class="flex gap-1">
-                    <Link
-                        v-for="link in bookings.links"
-                        :key="link.label"
-                        :href="link.url"
-                        v-html="link.label"
-                        class="rounded px-3 py-1 text-sm"
-                        :class="
-                            link.active
-                                ? 'bg-indigo-600 text-white'
-                                : link.url
-                                  ? 'text-gray-600 hover:bg-gray-100'
-                                  : 'cursor-not-allowed text-gray-300'
-                        "
-                        preserve-state
+        <DataTable>
+            <template #head>
+                <tr>
+                    <TableHeaderCell
+                        label="Créneau"
+                        sortable
+                        sort-key="slot_start"
+                        :active-sort="localFilters.sort"
+                        :sort-direction="localFilters.direction"
+                        @sort="handleSort"
+                    >
+                        <input v-model="localFilters.date" type="date" :class="filterInputClass" />
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                        label="Utilisateur"
+                        sortable
+                        sort-key="user"
+                        :active-sort="localFilters.sort"
+                        :sort-direction="localFilters.direction"
+                        @sort="handleSort"
+                    >
+                        <input
+                            v-model="localFilters.user"
+                            type="text"
+                            placeholder="Nom ou e-mail…"
+                            :class="filterInputClass"
+                        />
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                        label="Machine"
+                        sortable
+                        sort-key="machine"
+                        :active-sort="localFilters.sort"
+                        :sort-direction="localFilters.direction"
+                        @sort="handleSort"
+                    >
+                        <select
+                            v-if="showEstablishmentFilter"
+                            v-model="localFilters.establishment_id"
+                            :class="filterSelectClass"
+                        >
+                            <option value="">Toutes</option>
+                            <option v-for="est in establishments" :key="est.id" :value="est.id">
+                                {{ est.name }}
+                            </option>
+                        </select>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                        label="Statut"
+                        sortable
+                        sort-key="status"
+                        :active-sort="localFilters.sort"
+                        :sort-direction="localFilters.direction"
+                        @sort="handleSort"
+                    >
+                        <select v-model="localFilters.status" :class="filterSelectClass">
+                            <option value="">Tous</option>
+                            <option v-for="(label, value) in statusOptions" :key="value" :value="value">
+                                {{ label }}
+                            </option>
+                        </select>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                        label="Frais"
+                        sortable
+                        sort-key="booking_fee"
+                        :active-sort="localFilters.sort"
+                        :sort-direction="localFilters.direction"
+                        @sort="handleSort"
                     />
-                </div>
-            </div>
-        </div>
+                </tr>
+            </template>
+
+            <tr v-if="bookings.data.length === 0">
+                <td colspan="5" class="px-6 py-12 text-center text-sm text-slate-400">
+                    Aucune réservation trouvée.
+                </td>
+            </tr>
+            <tr v-for="booking in bookings.data" :key="booking.uuid" :class="rowClass">
+                <td :class="tdClass">
+                    <div class="font-medium text-slate-800">{{ formatDate(booking.slot_start) }}</div>
+                    <div class="mt-0.5 text-xs text-slate-400">→ {{ formatDate(booking.slot_end) }}</div>
+                </td>
+                <td :class="tdClass">
+                    <div class="font-medium text-slate-800">{{ booking.user?.name ?? '—' }}</div>
+                    <div class="text-xs text-slate-400">{{ booking.user?.email }}</div>
+                </td>
+                <td :class="tdClass">
+                    <Link
+                        v-if="booking.machine"
+                        :href="route('supervisor.machines.show', booking.machine.uuid)"
+                        :class="linkClass"
+                    >
+                        {{ booking.machine.name }}
+                    </Link>
+                    <span v-else>—</span>
+                    <div v-if="booking.machine?.establishment_name" class="mt-0.5 text-xs text-slate-400">
+                        {{ booking.machine.establishment_name }}
+                    </div>
+                </td>
+                <td :class="tdClass">
+                    <StatusBadge
+                        :label="booking.status_label"
+                        :color-class="getStatusColor(booking.status, bookingStatusColors)"
+                    />
+                </td>
+                <td :class="[tdClass, 'font-semibold text-slate-800']">
+                    {{ formatCurrency(booking.booking_fee) }}
+                </td>
+            </tr>
+
+            <template #footer>
+                <Pagination
+                    :paginator="bookings"
+                    :per-page="localFilters.per_page"
+                    @update:per-page="(value) => { localFilters.per_page = value; }"
+                />
+            </template>
+        </DataTable>
     </SupervisorLayout>
 </template>
diff --git a/resources/js/Pages/Supervisor/Dashboard.vue b/resources/js/Pages/Supervisor/Dashboard.vue
index ddff024..01f29d8 100644
--- a/resources/js/Pages/Supervisor/Dashboard.vue
+++ b/resources/js/Pages/Supervisor/Dashboard.vue
@@ -1,8 +1,10 @@
 <script setup>
 import SupervisorLayout from '@/Layouts/SupervisorLayout.vue';
-import { Head, Link } from '@inertiajs/vue3';
+import OutlineSelect from '@/Components/Supervisor/OutlineSelect.vue';
+import {Head, Link, router, usePage} from '@inertiajs/vue3';
+import {computed, ref, watch} from 'vue';
 
-defineProps({
+const props = defineProps({
     kpis: {
         type: Object,
         required: true,
@@ -15,10 +17,94 @@ defineProps({
         type: Array,
         default: () => [],
     },
+    machineStatusBreakdown: {
+        type: Object,
+        default: () => ({}),
+    },
+    recentWashes: {
+        type: Array,
+        default: () => [],
+    },
+    context: {
+        type: Object,
+        default: () => ({}),
+    },
+    establishments: {
+        type: Array,
+        default: () => [],
+    },
+    showEstablishmentFilter: {
+        type: Boolean,
+        default: false,
+    },
+    filters: {
+        type: Object,
+        default: () => ({}),
+    },
 });
 
+const page = usePage();
+const supervisor = computed(() => page.props.auth.supervisor);
+
+const greeting = computed(() => {
+    const hour = new Date().getHours();
+    if (hour < 12) return 'Bonjour';
+    if (hour < 18) return 'Bon après-midi';
+    return 'Bonsoir';
+});
+
+const todayLabel = computed(() => {
+    const formatted = new Intl.DateTimeFormat('fr-FR', {
+        weekday: 'long',
+        day: 'numeric',
+        month: 'long',
+    }).format(new Date());
+
+    return formatted.charAt(0).toUpperCase() + formatted.slice(1);
+});
+
+const firstName = computed(() => supervisor.value?.name?.split(' ')[0] ?? '');
+
+const scopeTitle = computed(() => {
+    if (props.context.is_all_establishments) {
+        return 'Toutes les enseignes';
+    }
+
+    return props.context.establishment_name ?? 'Enseigne sélectionnée';
+});
+
+const establishmentOptions = computed(() => [
+    { value: '', label: 'Toutes les enseignes' },
+    ...props.establishments.map((establishment) => ({
+        value: establishment.id,
+        label: establishment.name,
+    })),
+]);
+
+const selectedEstablishmentId = ref(props.filters.establishment_id ?? '');
+
+watch(
+    () => props.filters.establishment_id,
+    (value) => {
+        selectedEstablishmentId.value = value ?? '';
+    },
+);
+
+const onEstablishmentChange = () => {
+    router.get(
+        route('supervisor.dashboard'),
+        {
+            establishment_id: selectedEstablishmentId.value || undefined,
+        },
+        {
+            preserveScroll: true,
+            replace: true,
+        },
+    );
+};
+
 const formatCurrency = (value) =>
-    new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(value ?? 0);
+    new Intl.NumberFormat('fr-FR', {style: 'currency', currency: 'EUR'}).format(value ?? 0);
 
 const formatDate = (iso) => {
     if (!iso) return '—';
@@ -30,110 +116,438 @@ const formatDate = (iso) => {
 
 const statusColor = (status) => {
     const colors = {
-        available: 'bg-green-100 text-green-800',
-        reserved: 'bg-yellow-100 text-yellow-800',
-        running: 'bg-blue-100 text-blue-800',
-        maintenance: 'bg-orange-100 text-orange-800',
-        offline: 'bg-gray-100 text-gray-800',
-        error: 'bg-red-100 text-red-800',
+        available: 'bg-emerald-100 text-emerald-800 ring-emerald-600/20',
+        reserved: 'bg-amber-100 text-amber-800 ring-amber-600/20',
+        running: 'bg-sky-100 text-sky-800 ring-sky-600/20',
+        maintenance: 'bg-orange-100 text-orange-800 ring-orange-600/20',
+        offline: 'bg-slate-100 text-slate-600 ring-slate-500/20',
+        error: 'bg-red-100 text-red-800 ring-red-600/20',
+        pending_start: 'bg-slate-100 text-slate-600 ring-slate-500/20',
+        completed: 'bg-emerald-100 text-emerald-800 ring-emerald-600/20',
+        failed: 'bg-red-100 text-red-800 ring-red-600/20',
+        cancelled: 'bg-slate-100 text-slate-500 ring-slate-500/20',
     };
-    return colors[status] ?? 'bg-gray-100 text-gray-800';
+    return colors[status] ?? 'bg-slate-100 text-slate-800';
+};
+
+const statusDotColor = (status) => {
+    const colors = {
+        available: 'bg-emerald-500',
+        reserved: 'bg-amber-500',
+        running: 'bg-sky-500',
+        maintenance: 'bg-orange-500',
+        offline: 'bg-slate-400',
+        error: 'bg-red-500',
+    };
+    return colors[status] ?? 'bg-slate-400';
 };
 
 const severityColor = (severity) => {
-    return severity === 'high' ? 'border-red-400 bg-red-50' : 'border-yellow-400 bg-yellow-50';
+    return severity === 'high'
+        ? 'border-red-400 bg-red-50 ring-red-100'
+        : 'border-amber-400 bg-amber-50 ring-amber-100';
+};
+
+const machineAnomalyCount = computed(() => {
+    const breakdown = props.machineStatusBreakdown;
+    return (breakdown.offline ?? 0) + (breakdown.maintenance ?? 0) + (breakdown.error ?? 0);
+});
+
+const kpiCards = computed(() => {
+    const hasMachineAnomaly = machineAnomalyCount.value > 0;
+
+    return [
+        {
+            label: "Chiffre d'affaires",
+            sublabel: "Aujourd'hui",
+            value: formatCurrency(props.kpis.revenue_today),
+            icon: 'revenue',
+            bg: 'bg-emerald-50',
+            text: 'text-emerald-600',
+            ring: 'ring-emerald-100',
+        },
+        {
+            label: 'Lavages',
+            sublabel: "Aujourd'hui",
+            value: props.kpis.washes_today,
+            icon: 'washes',
+            bg: 'bg-sky-50',
+            text: 'text-sky-600',
+            ring: 'ring-sky-100',
+        },
+        {
+            label: 'Réservations',
+            sublabel: "Aujourd'hui",
+            value: props.kpis.bookings_today,
+            icon: 'bookings',
+            bg: 'bg-violet-50',
+            text: 'text-violet-600',
+            ring: 'ring-violet-100',
+        },
+        {
+            label: 'Machines actives',
+            sublabel: `${props.kpis.running_machines ?? 0} en cours · ${props.kpis.available_machines ?? 0} dispo.`,
+            value: `${props.kpis.machines_total - machineAnomalyCount.value}`,
+            suffix: `/ ${props.kpis.machines_total}`,
+            icon: 'machines',
+            bg: hasMachineAnomaly ? 'bg-red-50' : 'bg-indigo-50',
+            text: hasMachineAnomaly ? 'text-red-600' : 'text-indigo-600',
+            ring: hasMachineAnomaly ? 'ring-red-100' : 'ring-indigo-100',
+            alert: hasMachineAnomaly ? `${machineAnomalyCount.value} indisponible${machineAnomalyCount.value > 1 ? 's' : ''}` : null,
+        },
+    ];
+});
+
+const statusBreakdownItems = computed(() => {
+    const labels = {
+        available: 'Disponibles',
+        reserved: 'Réservées',
+        running: 'En cours',
+        maintenance: 'Maintenance',
+        offline: 'Hors ligne',
+        error: 'Erreur',
+    };
+    const total = props.kpis.machines_total || 1;
+
+    return Object.entries(props.machineStatusBreakdown)
+        .filter(([, count]) => count > 0)
+        .map(([status, count]) => ({
+            status,
+            label: labels[status] ?? status,
+            count,
+            percent: Math.round((count / total) * 100),
+        }))
+        .sort((a, b) => b.count - a.count);
+});
+
+const quickActions = [
+    {
+        label: 'Voir les machines',
+        route: 'supervisor.machines.index',
+        icon: 'machines',
+        color: 'hover:border-indigo-300 hover:bg-indigo-50'
+    },
+    {
+        label: 'Réservations du jour',
+        route: 'supervisor.bookings.index',
+        icon: 'bookings',
+        color: 'hover:border-violet-300 hover:bg-violet-50'
+    },
+    {
+        label: 'Historique lavages',
+        route: 'supervisor.washes.index',
+        icon: 'washes',
+        color: 'hover:border-sky-300 hover:bg-sky-50'
+    },
+    {
+        label: 'Gérer les tarifs',
+        route: 'supervisor.pricing.index',
+        icon: 'pricing',
+        color: 'hover:border-emerald-300 hover:bg-emerald-50'
+    },
+];
+
+const kpiIconPaths = {
+    revenue: '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',
+    washes: 'M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z',
+    bookings: 'M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z',
+    machines: 'M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15',
+    pricing: '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',
 };
 </script>
 
 <template>
-    <Head title="Tableau de bord" />
+    <Head title="Tableau de bord"/>
 
-    <SupervisorLayout title="Tableau de bord">
-        <!-- KPI cards -->
-        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
-            <div class="rounded-lg bg-white p-5 shadow">
-                <p class="text-sm font-medium text-gray-500">Chiffre d'affaires aujourd'hui</p>
-                <p class="mt-2 text-2xl font-bold text-gray-900">
-                    {{ formatCurrency(kpis.revenue_today) }}
-                </p>
+    <SupervisorLayout>
+        <template #header>
+            <span class="hidden text-sm text-slate-400 sm:inline">/</span>
+            <span class="hidden text-sm text-slate-500 sm:inline">Tableau de bord</span>
+        </template>
+
+        <!-- Welcome banner -->
+        <div
+            class="relative overflow-visible rounded-2xl border border-indigo-500/20 bg-gradient-to-br from-slate-900 via-indigo-950 to-indigo-900 shadow-xl shadow-indigo-950/20">
+            <!-- Décorations (clipées sans couper le sélecteur) -->
+            <div class="pointer-events-none absolute inset-0 overflow-hidden rounded-2xl">
+                <div
+                    class="absolute inset-0 opacity-[0.35]"
+                    style="background-image: radial-gradient(circle at 1px 1px, rgb(255 255 255 / 0.08) 1px, transparent 0); background-size: 24px 24px;"
+                />
+                <div class="absolute -right-16 -top-16 h-56 w-56 rounded-full bg-indigo-500/25 blur-3xl"/>
+                <div class="absolute -bottom-20 -left-10 h-48 w-48 rounded-full bg-violet-600/20 blur-3xl"/>
             </div>
-            <div class="rounded-lg bg-white p-5 shadow">
-                <p class="text-sm font-medium text-gray-500">Lavages aujourd'hui</p>
-                <p class="mt-2 text-2xl font-bold text-gray-900">{{ kpis.washes_today }}</p>
-            </div>
-            <div class="rounded-lg bg-white p-5 shadow">
-                <p class="text-sm font-medium text-gray-500">Réservations aujourd'hui</p>
-                <p class="mt-2 text-2xl font-bold text-gray-900">{{ kpis.bookings_today }}</p>
-            </div>
-            <div class="rounded-lg bg-white p-5 shadow">
-                <p class="text-sm font-medium text-gray-500">Machines hors ligne</p>
-                <p class="mt-2 text-2xl font-bold" :class="kpis.offline_machines > 0 ? 'text-red-600' : 'text-gray-900'">
-                    {{ kpis.offline_machines }}
-                    <span class="text-sm font-normal text-gray-500">/ {{ kpis.machines_total }}</span>
-                </p>
+
+            <div class="relative flex flex-col gap-6 p-6 sm:p-8 lg:flex-row lg:items-center lg:justify-between">
+                <div class="flex min-w-0 items-start gap-4 sm:gap-5">
+                    <div class="min-w-0">
+                        <p class="inline-flex items-center rounded-full bg-white/10 px-3 py-1 text-xs font-medium text-indigo-200 ring-1 ring-white/10">
+                            {{ todayLabel }}
+                        </p>
+
+                        <h2 class="mt-3 text-2xl font-bold tracking-tight text-white sm:text-3xl">
+                            {{ greeting }}<span v-if="firstName">, {{ firstName }}</span>
+                        </h2>
+
+                        <div class="mt-4 flex flex-wrap items-center gap-2">
+                            <span
+                                class="inline-flex items-center gap-2 rounded-xl bg-white/10 px-3 py-1.5 text-sm font-medium text-white ring-1 ring-white/10">
+                                <svg class="h-4 w-4 shrink-0 text-indigo-300" fill="none" viewBox="0 0 24 24"
+                                     stroke="currentColor" stroke-width="1.75">
+                                    <path stroke-linecap="round" stroke-linejoin="round"
+                                          d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"/>
+                                    <path stroke-linecap="round" stroke-linejoin="round"
+                                          d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"/>
+                                </svg>
+                                <span class="truncate">{{ scopeTitle }}</span>
+                            </span>
+
+                            <span
+                                v-if="kpis.active_bookings > 0"
+                                class="inline-flex items-center gap-1.5 rounded-xl bg-amber-400/15 px-3 py-1.5 text-sm font-medium text-amber-100 ring-1 ring-amber-300/20"
+                            >
+                                <span class="h-1.5 w-1.5 animate-pulse rounded-full bg-amber-300"/>
+                                {{ kpis.active_bookings }} réservation{{ kpis.active_bookings > 1 ? 's' : '' }} en cours
+                            </span>
+                        </div>
+                    </div>
+                </div>
+
+                <div v-if="showEstablishmentFilter" class="relative z-20 w-full shrink-0 lg:w-72">
+                    <OutlineSelect
+                        id="dashboard-establishment"
+                        v-model="selectedEstablishmentId"
+                        :options="establishmentOptions"
+                        variant="dark"
+                        @change="onEstablishmentChange"
+                    />
+                </div>
             </div>
         </div>
 
-        <div class="mt-8 grid grid-cols-1 gap-6 lg:grid-cols-2">
-            <!-- Alerts -->
-            <div class="rounded-lg bg-white p-5 shadow">
-                <h2 class="mb-4 text-lg font-semibold text-gray-800">Alertes</h2>
-                <div v-if="alerts.length === 0" class="text-sm text-gray-500">
-                    Aucune alerte pour le moment.
+        <!-- KPI cards -->
+        <div class="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
+            <div
+                v-for="card in kpiCards"
+                :key="card.label"
+                class="rounded-2xl border border-slate-200/80 bg-white p-4 shadow-sm transition hover:shadow-md sm:p-5"
+            >
+                <div class="flex items-center gap-4">
+                    <!-- Icône à gauche -->
+                    <div
+                        class="flex h-14 w-14 flex-shrink-0 items-center justify-center rounded-2xl ring-4"
+                        :class="[card.bg, card.ring]"
+                    >
+                        <svg
+                            class="h-7 w-7"
+                            :class="card.text"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke="currentColor"
+                            stroke-width="1.75"
+                        >
+                            <path
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                :d="kpiIconPaths[card.icon]"
+                            />
+                        </svg>
+                    </div>
+
+                    <!-- Chiffres à droite -->
+                    <div class="min-w-0 flex-1 text-right">
+                        <p class="text-sm font-medium text-slate-500">{{ card.label }}</p>
+                        <p class="mt-0.5 flex items-baseline justify-end gap-1">
+                            <span class="text-2xl font-bold tracking-tight text-slate-900">{{ card.value }}</span>
+                            <span v-if="card.suffix" class="text-base font-normal text-slate-400">{{
+                                    card.suffix
+                                }}</span>
+                        </p>
+                        <p class="mt-0.5 text-xs text-slate-400">{{ card.sublabel }}</p>
+                        <p
+                            v-if="card.alert"
+                            class="mt-1.5 inline-flex items-center gap-1 rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-700"
+                        >
+                            <span class="h-1.5 w-1.5 rounded-full bg-red-500"/>
+                            {{ card.alert }}
+                        </p>
+                    </div>
                 </div>
-                <ul v-else class="space-y-3">
+            </div>
+        </div>
+
+        <!-- Quick actions -->
+        <div class="mt-6">
+            <h3 class="mb-3 text-sm font-semibold uppercase tracking-wider text-slate-400">Accès rapides</h3>
+            <div class="grid grid-cols-2 gap-3 sm:grid-cols-4">
+                <Link
+                    v-for="action in quickActions"
+                    :key="action.route"
+                    :href="route(action.route)"
+                    class="flex items-center gap-3 rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm font-medium text-slate-700 shadow-sm transition"
+                    :class="action.color"
+                >
+                    <svg class="h-4 w-4 flex-shrink-0 text-slate-400" fill="none" viewBox="0 0 24 24"
+                         stroke="currentColor" stroke-width="1.75">
+                        <path stroke-linecap="round" stroke-linejoin="round" :d="kpiIconPaths[action.icon]"/>
+                    </svg>
+                    {{ action.label }}
+                </Link>
+            </div>
+        </div>
+
+        <div class="mt-8 grid grid-cols-1 gap-6 lg:grid-cols-3">
+            <!-- Machine status breakdown -->
+            <div class="rounded-2xl border border-slate-200/80 bg-white p-5 shadow-sm lg:col-span-1">
+                <h2 class="text-base font-semibold text-slate-900">État du parc</h2>
+                <p class="mt-0.5 text-sm text-slate-500">{{ kpis.machines_total }}
+                    machine{{ kpis.machines_total > 1 ? 's' : '' }} au total</p>
+
+                <div v-if="statusBreakdownItems.length === 0" class="mt-6 text-sm text-slate-400">
+                    Aucune machine dans votre périmètre.
+                </div>
+                <div v-else class="mt-5 space-y-3">
+                    <div v-for="item in statusBreakdownItems" :key="item.status">
+                        <div class="mb-1 flex items-center justify-between text-sm">
+                            <span class="flex items-center gap-2 text-slate-600">
+                                <span class="h-2 w-2 rounded-full" :class="statusDotColor(item.status)"/>
+                                {{ item.label }}
+                            </span>
+                            <span class="font-medium text-slate-900">{{ item.count }}</span>
+                        </div>
+                        <div class="h-2 overflow-hidden rounded-full bg-slate-100">
+                            <div
+                                class="h-full rounded-full transition-all duration-500"
+                                :class="statusDotColor(item.status)"
+                                :style="{ width: `${item.percent}%` }"
+                            />
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Alerts -->
+            <div class="rounded-2xl border border-slate-200/80 bg-white p-5 shadow-sm lg:col-span-1">
+                <div class="flex items-center justify-between">
+                    <h2 class="text-base font-semibold text-slate-900">Alertes</h2>
+                    <span
+                        v-if="alerts.length > 0"
+                        class="rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-700"
+                    >
+                        {{ alerts.length }}
+                    </span>
+                </div>
+
+                <div v-if="alerts.length === 0" class="mt-8 flex flex-col items-center py-4 text-center">
+                    <div class="flex h-12 w-12 items-center justify-center rounded-full bg-emerald-50">
+                        <svg class="h-6 w-6 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"
+                             stroke-width="2">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
+                        </svg>
+                    </div>
+                    <p class="mt-3 text-sm font-medium text-slate-600">Tout va bien</p>
+                    <p class="mt-1 text-xs text-slate-400">Aucune alerte pour le moment.</p>
+                </div>
+                <ul v-else class="mt-4 max-h-72 space-y-2 overflow-y-auto">
                     <li
                         v-for="(alert, index) in alerts"
                         :key="index"
-                        class="rounded-md border-l-4 px-3 py-2 text-sm"
+                        class="rounded-xl border-l-4 px-3 py-2.5 text-sm ring-1 ring-inset"
                         :class="severityColor(alert.severity)"
                     >
-                        <p class="font-medium text-gray-800">{{ alert.message }}</p>
-                        <p class="mt-1 text-xs text-gray-500">{{ formatDate(alert.occurred_at) }}</p>
+                        <p class="font-medium text-slate-800">{{ alert.message }}</p>
+                        <p class="mt-1 text-xs text-slate-500">{{ formatDate(alert.occurred_at) }}</p>
                     </li>
                 </ul>
             </div>
 
-            <!-- Machines overview -->
-            <div class="rounded-lg bg-white p-5 shadow">
-                <div class="mb-4 flex items-center justify-between">
-                    <h2 class="text-lg font-semibold text-gray-800">Parc machines</h2>
+            <!-- Recent washes -->
+            <div class="rounded-2xl border border-slate-200/80 bg-white p-5 shadow-sm lg:col-span-1">
+                <div class="flex items-center justify-between">
+                    <h2 class="text-base font-semibold text-slate-900">Derniers lavages</h2>
                     <Link
-                        :href="route('supervisor.machines.index')"
-                        class="text-sm text-indigo-600 hover:text-indigo-800"
+                        :href="route('supervisor.washes.index')"
+                        class="text-xs font-medium text-indigo-600 hover:text-indigo-800"
                     >
-                        Voir tout →
+                        Tout voir →
                     </Link>
                 </div>
-                <div v-if="machinesOverview.length === 0" class="text-sm text-gray-500">
-                    Aucune machine dans votre périmètre.
+
+                <div v-if="recentWashes.length === 0" class="mt-6 text-sm text-slate-400">
+                    Aucun lavage récent.
                 </div>
-                <ul v-else class="divide-y divide-gray-100">
+                <ul v-else class="mt-4 divide-y divide-slate-100">
                     <li
-                        v-for="machine in machinesOverview"
-                        :key="machine.uuid"
-                        class="flex items-center justify-between py-3"
+                        v-for="wash in recentWashes"
+                        :key="wash.uuid"
+                        class="flex items-center justify-between py-3 first:pt-0"
                     >
-                        <div>
-                            <Link
-                                :href="route('supervisor.machines.show', machine.uuid)"
-                                class="font-medium text-gray-800 hover:text-indigo-600"
-                            >
-                                {{ machine.name }}
-                            </Link>
-                            <p class="text-xs text-gray-500">
-                                {{ machine.establishment_name }} · {{ machine.type_label }}
+                        <div class="min-w-0">
+                            <p class="truncate text-sm font-medium text-slate-800">{{ wash.machine_name }}</p>
+                            <p class="truncate text-xs text-slate-400">
+                                {{ wash.establishment_name }} · {{ formatDate(wash.started_at) }}
                             </p>
                         </div>
-                        <span
-                            class="rounded-full px-2.5 py-0.5 text-xs font-medium"
-                            :class="statusColor(machine.status)"
-                        >
-                            {{ machine.status_label }}
-                        </span>
+                        <div class="ml-3 flex-shrink-0 text-right">
+                            <p class="text-sm font-semibold text-slate-900">{{ formatCurrency(wash.cost) }}</p>
+                            <span
+                                class="mt-0.5 inline-block rounded-full px-2 py-0.5 text-[10px] font-medium ring-1 ring-inset"
+                                :class="statusColor(wash.status)"
+                            >
+                                {{ wash.status_label }}
+                            </span>
+                        </div>
                     </li>
                 </ul>
             </div>
         </div>
+
+        <!-- Machines overview -->
+        <div class="mt-6 rounded-2xl border border-slate-200/80 bg-white p-5 shadow-sm">
+            <div class="mb-4 flex items-center justify-between">
+                <div>
+                    <h2 class="text-base font-semibold text-slate-900">Parc machines</h2>
+                    <p class="mt-0.5 text-sm text-slate-500">Aperçu en temps réel de vos équipements</p>
+                </div>
+                <Link
+                    :href="route('supervisor.machines.index')"
+                    class="rounded-lg bg-indigo-50 px-3 py-1.5 text-sm font-medium text-indigo-700 transition hover:bg-indigo-100"
+                >
+                    Gérer le parc →
+                </Link>
+            </div>
+
+            <div v-if="machinesOverview.length === 0" class="py-8 text-center text-sm text-slate-400">
+                Aucune machine dans votre périmètre.
+            </div>
+            <div v-else class="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3">
+                <Link
+                    v-for="machine in machinesOverview"
+                    :key="machine.uuid"
+                    :href="route('supervisor.machines.show', machine.uuid)"
+                    class="group flex items-center gap-3 rounded-xl border border-slate-200 p-4 transition hover:border-indigo-200 hover:bg-indigo-50/30 hover:shadow-sm"
+                >
+                    <div
+                        class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-slate-100 transition group-hover:bg-white"
+                    >
+                        <span class="h-2.5 w-2.5 rounded-full" :class="statusDotColor(machine.status)"/>
+                    </div>
+                    <div class="min-w-0 flex-1">
+                        <p class="truncate text-sm font-medium text-slate-800 group-hover:text-indigo-700">
+                            {{ machine.name }}
+                        </p>
+                        <p class="truncate text-xs text-slate-400">
+                            {{ machine.establishment_name }} · {{ machine.type_label }}
+                        </p>
+                    </div>
+                    <span
+                        class="flex-shrink-0 rounded-full px-2.5 py-0.5 text-xs font-medium ring-1 ring-inset"
+                        :class="statusColor(machine.status)"
+                    >
+                        {{ machine.status_label }}
+                    </span>
+                </Link>
+            </div>
+        </div>
     </SupervisorLayout>
 </template>
diff --git a/resources/js/Pages/Supervisor/Machines/Index.vue b/resources/js/Pages/Supervisor/Machines/Index.vue
index 530d8a9..1a57efd 100644
--- a/resources/js/Pages/Supervisor/Machines/Index.vue
+++ b/resources/js/Pages/Supervisor/Machines/Index.vue
@@ -1,13 +1,42 @@
 <script setup>
+import AlertBanner from '@/Components/Supervisor/AlertBanner.vue';
+import DataTable from '@/Components/Supervisor/DataTable.vue';
+import FormField from '@/Components/Supervisor/FormField.vue';
+import FormModal from '@/Components/Supervisor/FormModal.vue';
+import Pagination from '@/Components/Supervisor/Pagination.vue';
+import StatusBadge from '@/Components/Supervisor/StatusBadge.vue';
+import TableHeaderCell from '@/Components/Supervisor/TableHeaderCell.vue';
+import { useListFilters } from '@/Components/Supervisor/useListFilters.js';
+import {
+    filterInputClass,
+    filterSelectClass,
+    getStatusColor,
+    inputClass,
+    linkClass,
+    machineStatusColors,
+    rowClass,
+    selectClass,
+    tdClass,
+} from '@/Components/Supervisor/ui.js';
+import ConfirmDeleteModal from '@/Components/ConfirmDeleteModal.vue';
+import PrimaryButton from '@/Components/PrimaryButton.vue';
 import SupervisorLayout from '@/Layouts/SupervisorLayout.vue';
-import { Head, Link, router } from '@inertiajs/vue3';
-import { reactive, watch } from 'vue';
+import { Head, Link, useForm, usePage } from '@inertiajs/vue3';
+import { ref, computed } from 'vue';
 
 const props = defineProps({
     machines: {
         type: Object,
         required: true,
     },
+    establishments: {
+        type: Array,
+        default: () => [],
+    },
+    canManageMachines: {
+        type: Boolean,
+        default: false,
+    },
     filters: {
         type: Object,
         default: () => ({}),
@@ -22,34 +51,93 @@ const props = defineProps({
     },
 });
 
-const localFilters = reactive({
+const page = usePage();
+const editingUuid = ref(null);
+const showForm = ref(false);
+const deleteTarget = ref(null);
+const deleteForm = useForm({});
+
+const { localFilters, toggleSort } = useListFilters('supervisor.machines.index', {
+    establishment_id: props.filters.establishment_id ?? '',
     search: props.filters.search ?? '',
     status: props.filters.status ?? '',
     type: props.filters.type ?? '',
+    sort: props.filters.sort ?? 'name',
+    direction: props.filters.direction ?? 'asc',
+    per_page: props.filters.per_page ?? 10,
+}, { debounceKeys: ['search'] });
+
+const showEstablishmentFilter = computed(() => props.establishments.length > 1);
+
+const handleSort = (key) => toggleSort(key, ['last_heartbeat_at']);
+
+const emptyForm = () => ({
+    establishment_id: props.establishments[0]?.id ?? '',
+    name: '',
+    type: '',
+    qr_code: '',
+    status: 'available',
 });
 
-let debounceTimer = null;
+const form = useForm(emptyForm());
 
-watch(localFilters, () => {
-    clearTimeout(debounceTimer);
-    debounceTimer = setTimeout(() => {
-        router.get(route('supervisor.machines.index'), localFilters, {
-            preserveState: true,
-            replace: true,
-        });
-    }, 300);
-});
+const startCreate = () => {
+    editingUuid.value = null;
+    form.defaults(emptyForm());
+    form.reset();
+    showForm.value = true;
+};
 
-const statusColor = (status) => {
-    const colors = {
-        available: 'bg-green-100 text-green-800',
-        reserved: 'bg-yellow-100 text-yellow-800',
-        running: 'bg-blue-100 text-blue-800',
-        maintenance: 'bg-orange-100 text-orange-800',
-        offline: 'bg-gray-100 text-gray-800',
-        error: 'bg-red-100 text-red-800',
+const startEdit = (machine) => {
+    editingUuid.value = machine.uuid;
+    form.defaults({
+        establishment_id: machine.establishment_id,
+        name: machine.name,
+        type: machine.type,
+        qr_code: machine.qr_code,
+        status: machine.status,
+    });
+    form.reset();
+    showForm.value = true;
+};
+
+const cancelForm = () => {
+    showForm.value = false;
+    editingUuid.value = null;
+    form.reset();
+};
+
+const submit = () => {
+    const payload = {
+        ...form.data(),
+        qr_code: form.qr_code || null,
     };
-    return colors[status] ?? 'bg-gray-100 text-gray-800';
+
+    if (editingUuid.value) {
+        form.transform(() => payload).put(route('supervisor.machines.update', editingUuid.value), {
+            onSuccess: cancelForm,
+        });
+    } else {
+        form.transform(() => payload).post(route('supervisor.machines.store'), {
+            onSuccess: cancelForm,
+        });
+    }
+};
+
+const openDeleteModal = (machine) => {
+    deleteTarget.value = machine;
+};
+
+const closeDeleteModal = () => {
+    deleteTarget.value = null;
+};
+
+const confirmDelete = () => {
+    if (!deleteTarget.value) return;
+
+    deleteForm.delete(route('supervisor.machines.destroy', deleteTarget.value.uuid), {
+        onSuccess: closeDeleteModal,
+    });
 };
 
 const formatDate = (iso) => {
@@ -65,124 +153,185 @@ const formatDate = (iso) => {
     <Head title="Machines" />
 
     <SupervisorLayout title="Machines">
-        <!-- Filters -->
-        <div class="mb-6 flex flex-wrap gap-4 rounded-lg bg-white p-4 shadow">
-            <div class="min-w-[200px] flex-1">
-                <label class="block text-xs font-medium text-gray-500">Recherche</label>
-                <input
-                    v-model="localFilters.search"
-                    type="text"
-                    placeholder="Nom ou QR code…"
-                    class="mt-1 block w-full rounded-md border-gray-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
-                />
-            </div>
-            <div>
-                <label class="block text-xs font-medium text-gray-500">Statut</label>
-                <select
-                    v-model="localFilters.status"
-                    class="mt-1 block w-full rounded-md border-gray-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
-                >
-                    <option value="">Tous</option>
-                    <option v-for="(label, value) in statusOptions" :key="value" :value="value">
-                        {{ label }}
-                    </option>
-                </select>
-            </div>
-            <div>
-                <label class="block text-xs font-medium text-gray-500">Type</label>
-                <select
-                    v-model="localFilters.type"
-                    class="mt-1 block w-full rounded-md border-gray-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
-                >
-                    <option value="">Tous</option>
-                    <option v-for="(label, value) in typeOptions" :key="value" :value="value">
-                        {{ label }}
-                    </option>
-                </select>
-            </div>
-        </div>
+        <template #actions>
+            <PrimaryButton
+                v-if="canManageMachines && establishments.length > 0"
+                @click="startCreate"
+            >
+                Nouvelle machine
+            </PrimaryButton>
+        </template>
 
-        <!-- Table -->
-        <div class="overflow-hidden rounded-lg bg-white shadow">
-            <table class="min-w-full divide-y divide-gray-200">
-                <thead class="bg-gray-50">
-                    <tr>
-                        <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
-                            Machine
-                        </th>
-                        <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
-                            Établissement
-                        </th>
-                        <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
-                            Type
-                        </th>
-                        <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
-                            Statut
-                        </th>
-                        <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
-                            Dernier signal
-                        </th>
-                    </tr>
-                </thead>
-                <tbody class="divide-y divide-gray-100 bg-white">
-                    <tr v-if="machines.data.length === 0">
-                        <td colspan="5" class="px-4 py-8 text-center text-sm text-gray-500">
-                            Aucune machine trouvée.
-                        </td>
-                    </tr>
-                    <tr v-for="machine in machines.data" :key="machine.uuid" class="hover:bg-gray-50">
-                        <td class="whitespace-nowrap px-4 py-3">
-                            <Link
-                                :href="route('supervisor.machines.show', machine.uuid)"
-                                class="font-medium text-indigo-600 hover:text-indigo-800"
-                            >
-                                {{ machine.name }}
-                            </Link>
-                        </td>
-                        <td class="whitespace-nowrap px-4 py-3 text-sm text-gray-600">
-                            {{ machine.establishment_name ?? '—' }}
-                        </td>
-                        <td class="whitespace-nowrap px-4 py-3 text-sm text-gray-600">
-                            {{ machine.type_label }}
-                        </td>
-                        <td class="whitespace-nowrap px-4 py-3">
-                            <span
-                                class="rounded-full px-2.5 py-0.5 text-xs font-medium"
-                                :class="statusColor(machine.status)"
-                            >
-                                {{ machine.status_label }}
-                            </span>
-                        </td>
-                        <td class="whitespace-nowrap px-4 py-3 text-sm text-gray-500">
-                            {{ formatDate(machine.last_heartbeat_at) }}
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
+        <AlertBanner v-if="page.props.errors?.delete">
+            {{ page.props.errors.delete }}
+        </AlertBanner>
 
-            <!-- Pagination -->
-            <div v-if="machines.links.length > 3" class="flex items-center justify-between border-t px-4 py-3">
-                <p class="text-sm text-gray-600">
-                    {{ machines.from ?? 0 }}–{{ machines.to ?? 0 }} sur {{ machines.total }}
-                </p>
-                <div class="flex gap-1">
-                    <Link
-                        v-for="link in machines.links"
-                        :key="link.label"
-                        :href="link.url"
-                        v-html="link.label"
-                        class="rounded px-3 py-1 text-sm"
-                        :class="
-                            link.active
-                                ? 'bg-indigo-600 text-white'
-                                : link.url
-                                  ? 'text-gray-600 hover:bg-gray-100'
-                                  : 'cursor-not-allowed text-gray-300'
-                        "
-                        preserve-state
+        <FormModal
+            :show="showForm"
+            :title="editingUuid ? 'Modifier la machine' : 'Nouvelle machine'"
+            :submit-label="editingUuid ? 'Enregistrer' : 'Créer'"
+            :processing="form.processing"
+            @close="cancelForm"
+            @submit="submit"
+        >
+            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                <FormField label="Enseigne">
+                    <select v-model="form.establishment_id" required :class="selectClass">
+                        <option v-for="est in establishments" :key="est.id" :value="est.id">
+                            {{ est.name }}
+                        </option>
+                    </select>
+                </FormField>
+                <FormField label="Nom">
+                    <input v-model="form.name" type="text" required :class="inputClass" />
+                </FormField>
+                <FormField label="Type">
+                    <select v-model="form.type" required :class="selectClass">
+                        <option value="" disabled>Sélectionner…</option>
+                        <option v-for="(label, value) in typeOptions" :key="value" :value="value">
+                            {{ label }}
+                        </option>
+                    </select>
+                </FormField>
+                <FormField label="QR code" :hint="editingUuid ? '' : 'Généré automatiquement si vide'">
+                    <input v-model="form.qr_code" type="text" :class="inputClass" />
+                </FormField>
+                <FormField label="Statut">
+                    <select v-model="form.status" required :class="selectClass">
+                        <option v-for="(label, value) in statusOptions" :key="value" :value="value">
+                            {{ label }}
+                        </option>
+                    </select>
+                </FormField>
+            </div>
+        </FormModal>
+
+        <DataTable>
+            <template #head>
+                <tr>
+                    <TableHeaderCell
+                        label="Machine"
+                        sortable
+                        sort-key="name"
+                        :active-sort="localFilters.sort"
+                        :sort-direction="localFilters.direction"
+                        @sort="handleSort"
+                    >
+                        <input
+                            v-model="localFilters.search"
+                            type="text"
+                            placeholder="Nom ou QR…"
+                            :class="filterInputClass"
+                        />
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                        label="Enseigne"
+                        sortable
+                        sort-key="establishment"
+                        :active-sort="localFilters.sort"
+                        :sort-direction="localFilters.direction"
+                        @sort="handleSort"
+                    >
+                        <select
+                            v-if="showEstablishmentFilter"
+                            v-model="localFilters.establishment_id"
+                            :class="filterSelectClass"
+                        >
+                            <option value="">Toutes</option>
+                            <option v-for="est in establishments" :key="est.id" :value="est.id">
+                                {{ est.name }}
+                            </option>
+                        </select>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                        label="Type"
+                        sortable
+                        sort-key="type"
+                        :active-sort="localFilters.sort"
+                        :sort-direction="localFilters.direction"
+                        @sort="handleSort"
+                    >
+                        <select v-model="localFilters.type" :class="filterSelectClass">
+                            <option value="">Tous</option>
+                            <option v-for="(label, value) in typeOptions" :key="value" :value="value">
+                                {{ label }}
+                            </option>
+                        </select>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                        label="Statut"
+                        sortable
+                        sort-key="status"
+                        :active-sort="localFilters.sort"
+                        :sort-direction="localFilters.direction"
+                        @sort="handleSort"
+                    >
+                        <select v-model="localFilters.status" :class="filterSelectClass">
+                            <option value="">Tous</option>
+                            <option v-for="(label, value) in statusOptions" :key="value" :value="value">
+                                {{ label }}
+                            </option>
+                        </select>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                        label="Dernier signal"
+                        sortable
+                        sort-key="last_heartbeat_at"
+                        :active-sort="localFilters.sort"
+                        :sort-direction="localFilters.direction"
+                        @sort="handleSort"
                     />
-                </div>
-            </div>
-        </div>
+                    <TableHeaderCell v-if="canManageMachines" label="Actions" align="right" />
+                </tr>
+            </template>
+
+            <tr v-if="machines.data.length === 0">
+                <td :colspan="canManageMachines ? 6 : 5" class="px-6 py-12 text-center text-sm text-slate-400">
+                    Aucune machine trouvée.
+                </td>
+            </tr>
+            <tr v-for="machine in machines.data" :key="machine.uuid" :class="rowClass">
+                <td :class="tdClass">
+                    <Link :href="route('supervisor.machines.show', machine.uuid)" :class="linkClass">
+                        {{ machine.name }}
+                    </Link>
+                    <p class="mt-0.5 font-mono text-xs text-slate-400">{{ machine.qr_code }}</p>
+                </td>
+                <td :class="tdClass">{{ machine.establishment_name ?? '—' }}</td>
+                <td :class="tdClass">{{ machine.type_label }}</td>
+                <td :class="tdClass">
+                    <StatusBadge
+                        :label="machine.status_label"
+                        :color-class="getStatusColor(machine.status, machineStatusColors)"
+                    />
+                </td>
+                <td :class="tdClass">{{ formatDate(machine.last_heartbeat_at) }}</td>
+                <td v-if="canManageMachines" :class="[tdClass, 'text-right']">
+                    <button class="font-medium text-indigo-600 transition hover:text-indigo-800" @click="startEdit(machine)">
+                        Modifier
+                    </button>
+                    <button class="ms-3 font-medium text-red-600 transition hover:text-red-800" @click="openDeleteModal(machine)">
+                        Supprimer
+                    </button>
+                </td>
+            </tr>
+
+            <template #footer>
+                <Pagination
+                    :paginator="machines"
+                    :per-page="localFilters.per_page"
+                    @update:per-page="(value) => { localFilters.per_page = value; }"
+                />
+            </template>
+        </DataTable>
+
+        <ConfirmDeleteModal
+            :show="deleteTarget !== null"
+            title="Supprimer la machine"
+            :message="deleteTarget ? `Voulez-vous supprimer « ${deleteTarget.name} » ?` : ''"
+            :processing="deleteForm.processing"
+            @close="closeDeleteModal"
+            @confirm="confirmDelete"
+        />
     </SupervisorLayout>
 </template>
diff --git a/resources/js/Pages/Supervisor/Machines/Show.vue b/resources/js/Pages/Supervisor/Machines/Show.vue
index 441ae3f..9a4c12f 100644
--- a/resources/js/Pages/Supervisor/Machines/Show.vue
+++ b/resources/js/Pages/Supervisor/Machines/Show.vue
@@ -1,4 +1,6 @@
 <script setup>
+import StatusBadge from '@/Components/Supervisor/StatusBadge.vue';
+import { cardClass, getStatusColor, machineStatusColors } from '@/Components/Supervisor/ui.js';
 import SupervisorLayout from '@/Layouts/SupervisorLayout.vue';
 import { Head, Link } from '@inertiajs/vue3';
 
@@ -20,18 +22,6 @@ const formatDate = (iso) => {
         timeStyle: 'short',
     }).format(new Date(iso));
 };
-
-const statusColor = (status) => {
-    const colors = {
-        available: 'bg-green-100 text-green-800',
-        reserved: 'bg-yellow-100 text-yellow-800',
-        running: 'bg-blue-100 text-blue-800',
-        maintenance: 'bg-orange-100 text-orange-800',
-        offline: 'bg-gray-100 text-gray-800',
-        error: 'bg-red-100 text-red-800',
-    };
-    return colors[status] ?? 'bg-gray-100 text-gray-800';
-};
 </script>
 
 <template>
@@ -41,99 +31,97 @@ const statusColor = (status) => {
         <template #header>
             <Link
                 :href="route('supervisor.machines.index')"
-                class="text-sm text-indigo-600 hover:text-indigo-800"
+                class="text-sm font-medium text-indigo-600 transition hover:text-indigo-800"
             >
                 ← Retour aux machines
             </Link>
         </template>
 
-        <div class="mb-4">
-            <h1 class="text-2xl font-bold text-gray-900">{{ machine.name }}</h1>
-            <p class="text-sm text-gray-500">{{ machine.establishment?.name }}</p>
+        <div class="mb-6">
+            <div class="flex flex-wrap items-start gap-4">
+                <div class="flex-1">
+                    <h1 class="text-2xl font-bold tracking-tight text-slate-900">{{ machine.name }}</h1>
+                    <p class="mt-1 text-sm text-slate-500">{{ machine.establishment?.name }}</p>
+                </div>
+                <StatusBadge
+                    :label="machine.status_label"
+                    :color-class="getStatusColor(machine.status, machineStatusColors)"
+                />
+            </div>
         </div>
 
         <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
-            <!-- Details -->
-            <div class="rounded-lg bg-white p-6 shadow">
-                <h2 class="mb-4 text-lg font-semibold text-gray-800">Informations</h2>
-                <dl class="space-y-3 text-sm">
-                    <div class="flex justify-between">
-                        <dt class="text-gray-500">Type</dt>
-                        <dd class="font-medium text-gray-800">{{ machine.type_label }}</dd>
+            <div :class="[cardClass, 'p-6']">
+                <h2 class="mb-5 text-base font-semibold text-slate-900">Informations</h2>
+                <dl class="space-y-4 text-sm">
+                    <div class="flex items-center justify-between gap-4 border-b border-slate-100 pb-3">
+                        <dt class="text-slate-500">Type</dt>
+                        <dd class="font-medium text-slate-800">{{ machine.type_label }}</dd>
                     </div>
-                    <div class="flex justify-between">
-                        <dt class="text-gray-500">Statut</dt>
-                        <dd>
-                            <span
-                                class="rounded-full px-2.5 py-0.5 text-xs font-medium"
-                                :class="statusColor(machine.status)"
-                            >
-                                {{ machine.status_label }}
-                            </span>
-                        </dd>
+                    <div class="flex items-center justify-between gap-4 border-b border-slate-100 pb-3">
+                        <dt class="text-slate-500">QR code</dt>
+                        <dd class="font-mono text-slate-800">{{ machine.qr_code }}</dd>
                     </div>
-                    <div class="flex justify-between">
-                        <dt class="text-gray-500">QR code</dt>
-                        <dd class="font-mono text-gray-800">{{ machine.qr_code }}</dd>
+                    <div class="flex items-center justify-between gap-4 border-b border-slate-100 pb-3">
+                        <dt class="text-slate-500">Dernier signal</dt>
+                        <dd class="text-slate-800">{{ formatDate(machine.last_heartbeat_at) }}</dd>
                     </div>
-                    <div class="flex justify-between">
-                        <dt class="text-gray-500">Dernier signal</dt>
-                        <dd class="text-gray-800">{{ formatDate(machine.last_heartbeat_at) }}</dd>
+                    <div v-if="machine.cycle_started_at" class="flex items-center justify-between gap-4 border-b border-slate-100 pb-3">
+                        <dt class="text-slate-500">Cycle démarré</dt>
+                        <dd class="text-slate-800">{{ formatDate(machine.cycle_started_at) }}</dd>
                     </div>
-                    <div v-if="machine.cycle_started_at" class="flex justify-between">
-                        <dt class="text-gray-500">Cycle démarré</dt>
-                        <dd class="text-gray-800">{{ formatDate(machine.cycle_started_at) }}</dd>
+                    <div v-if="machine.cycle_ends_at" class="flex items-center justify-between gap-4 border-b border-slate-100 pb-3">
+                        <dt class="text-slate-500">Fin de cycle prévue</dt>
+                        <dd class="text-slate-800">{{ formatDate(machine.cycle_ends_at) }}</dd>
                     </div>
-                    <div v-if="machine.cycle_ends_at" class="flex justify-between">
-                        <dt class="text-gray-500">Fin de cycle prévue</dt>
-                        <dd class="text-gray-800">{{ formatDate(machine.cycle_ends_at) }}</dd>
-                    </div>
-                    <div v-if="machine.current_user" class="flex justify-between">
-                        <dt class="text-gray-500">Utilisateur actuel</dt>
-                        <dd class="text-gray-800">
+                    <div v-if="machine.current_user" class="flex items-center justify-between gap-4">
+                        <dt class="text-slate-500">Utilisateur actuel</dt>
+                        <dd class="text-right text-slate-800">
                             {{ machine.current_user.name }}
-                            <span class="text-gray-500">({{ machine.current_user.email }})</span>
+                            <span class="block text-xs text-slate-400">{{ machine.current_user.email }}</span>
                         </dd>
                     </div>
                 </dl>
 
-                <div v-if="machine.establishment" class="mt-6 border-t pt-4">
-                    <h3 class="mb-2 text-sm font-semibold text-gray-700">Établissement</h3>
-                    <p class="text-sm text-gray-600">{{ machine.establishment.address }}</p>
-                    <p v-if="machine.establishment.city" class="text-sm text-gray-600">
+                <div v-if="machine.establishment" class="mt-6 rounded-xl bg-slate-50 p-4">
+                    <h3 class="mb-2 text-xs font-semibold uppercase tracking-wide text-slate-500">Établissement</h3>
+                    <p class="text-sm text-slate-700">{{ machine.establishment.address }}</p>
+                    <p v-if="machine.establishment.city" class="text-sm text-slate-700">
                         {{ machine.establishment.city }}
                     </p>
                 </div>
 
-                <div v-if="machine.integration" class="mt-6 border-t pt-4">
-                    <h3 class="mb-2 text-sm font-semibold text-gray-700">Intégration</h3>
+                <div v-if="machine.integration" class="mt-4 rounded-xl bg-indigo-50/50 p-4 ring-1 ring-indigo-100">
+                    <h3 class="mb-3 text-xs font-semibold uppercase tracking-wide text-indigo-600">Intégration</h3>
                     <dl class="space-y-2 text-sm">
                         <div class="flex justify-between">
-                            <dt class="text-gray-500">Fournisseur</dt>
-                            <dd>{{ machine.integration.provider }}</dd>
+                            <dt class="text-slate-500">Fournisseur</dt>
+                            <dd class="font-medium text-slate-800">{{ machine.integration.provider }}</dd>
                         </div>
                         <div class="flex justify-between">
-                            <dt class="text-gray-500">Mode</dt>
-                            <dd>{{ machine.integration.mode }}</dd>
+                            <dt class="text-slate-500">Mode</dt>
+                            <dd class="font-medium text-slate-800">{{ machine.integration.mode }}</dd>
                         </div>
                         <div class="flex justify-between">
-                            <dt class="text-gray-500">Active</dt>
-                            <dd>{{ machine.integration.is_active ? 'Oui' : 'Non' }}</dd>
+                            <dt class="text-slate-500">Active</dt>
+                            <dd class="font-medium text-slate-800">{{ machine.integration.is_active ? 'Oui' : 'Non' }}</dd>
                         </div>
                     </dl>
                 </div>
             </div>
 
-            <!-- Events -->
-            <div class="rounded-lg bg-white p-6 shadow">
-                <h2 class="mb-4 text-lg font-semibold text-gray-800">Événements récents</h2>
-                <div v-if="recentEvents.length === 0" class="text-sm text-gray-500">
+            <div :class="[cardClass, 'p-6']">
+                <h2 class="mb-5 text-base font-semibold text-slate-900">Événements récents</h2>
+                <div v-if="recentEvents.length === 0" class="py-8 text-center text-sm text-slate-400">
                     Aucun événement enregistré.
                 </div>
-                <ul v-else class="divide-y divide-gray-100">
-                    <li v-for="(event, index) in recentEvents" :key="index" class="py-3">
-                        <p class="text-sm font-medium text-gray-800">{{ event.event_type_label }}</p>
-                        <p class="text-xs text-gray-500">{{ formatDate(event.occurred_at) }}</p>
+                <ul v-else class="divide-y divide-slate-100">
+                    <li v-for="(event, index) in recentEvents" :key="index" class="flex items-start gap-3 py-3 first:pt-0">
+                        <span class="mt-1.5 h-2 w-2 flex-shrink-0 rounded-full bg-indigo-400" />
+                        <div>
+                            <p class="text-sm font-medium text-slate-800">{{ event.event_type_label }}</p>
+                            <p class="mt-0.5 text-xs text-slate-400">{{ formatDate(event.occurred_at) }}</p>
+                        </div>
                     </li>
                 </ul>
             </div>
diff --git a/resources/js/Pages/Supervisor/Organizations/Index.vue b/resources/js/Pages/Supervisor/Organizations/Index.vue
new file mode 100644
index 0000000..59c9e19
--- /dev/null
+++ b/resources/js/Pages/Supervisor/Organizations/Index.vue
@@ -0,0 +1,490 @@
+<script setup>
+import AddressAutocomplete from '@/Components/Supervisor/AddressAutocomplete.vue';
+import AlertBanner from '@/Components/Supervisor/AlertBanner.vue';
+import DataTable from '@/Components/Supervisor/DataTable.vue';
+import FormField from '@/Components/Supervisor/FormField.vue';
+import FormModal from '@/Components/Supervisor/FormModal.vue';
+import Pagination from '@/Components/Supervisor/Pagination.vue';
+import StatusBadge from '@/Components/Supervisor/StatusBadge.vue';
+import TableHeaderCell from '@/Components/Supervisor/TableHeaderCell.vue';
+import { useListFilters } from '@/Components/Supervisor/useListFilters.js';
+import {
+    activeStatusColors,
+    cardClass,
+    filterInputClass,
+    filterSelectClass,
+    getStatusColor,
+    inputClass,
+    rowClass,
+    tdClass,
+} from '@/Components/Supervisor/ui.js';
+import ConfirmDeleteModal from '@/Components/ConfirmDeleteModal.vue';
+import PrimaryButton from '@/Components/PrimaryButton.vue';
+import SupervisorLayout from '@/Layouts/SupervisorLayout.vue';
+import { Head, useForm } from '@inertiajs/vue3';
+import { computed, onMounted, ref } from 'vue';
+
+const props = defineProps({
+    establishments: {
+        type: [Array, Object],
+        default: () => [],
+    },
+    viewMode: {
+        type: String,
+        default: 'list',
+    },
+    canManageEstablishments: {
+        type: Boolean,
+        default: false,
+    },
+    canCreateEstablishments: {
+        type: Boolean,
+        default: false,
+    },
+    filters: {
+        type: Object,
+        default: () => ({}),
+    },
+});
+
+const { localFilters, toggleSort } = useListFilters('supervisor.organizations.index', {
+    search: props.filters.search ?? '',
+    is_active: props.filters.is_active ?? '',
+    sort: props.filters.sort ?? 'name',
+    direction: props.filters.direction ?? 'asc',
+    per_page: props.filters.per_page ?? 10,
+}, { debounceKeys: ['search'] });
+
+const handleSort = (key) => toggleSort(key);
+
+const isSingleView = computed(() => props.viewMode === 'single');
+const singleEstablishment = computed(() => {
+    if (!isSingleView.value || !Array.isArray(props.establishments)) {
+        return null;
+    }
+
+    return props.establishments[0] ?? null;
+});
+
+const establishmentRows = computed(() => {
+    if (isSingleView.value) {
+        return Array.isArray(props.establishments) ? props.establishments : [];
+    }
+
+    return props.establishments?.data ?? [];
+});
+
+const establishmentListCount = computed(() => {
+    if (isSingleView.value) {
+        return establishmentRows.value.length;
+    }
+
+    return props.establishments?.total ?? establishmentRows.value.length;
+});
+
+const editingEstablishmentId = ref(null);
+const showEstablishmentForm = ref(false);
+const toggleTarget = ref(null);
+const toggleForm = useForm({});
+
+const establishmentFormTitle = computed(() => {
+    if (editingEstablishmentId.value || isSingleView.value) {
+        return 'Modifier l\'enseigne';
+    }
+
+    return 'Nouvelle enseigne';
+});
+
+const establishmentSubmitLabel = computed(() => {
+    if (editingEstablishmentId.value || isSingleView.value) {
+        return 'Enregistrer';
+    }
+
+    return 'Créer';
+});
+
+const establishmentToForm = (establishment) => ({
+    name: establishment?.name ?? '',
+    address: establishment?.address ?? '',
+    city: establishment?.city ?? '',
+    zip_code: establishment?.zip_code ?? '',
+    timezone: establishment?.timezone ?? 'Europe/Paris',
+    is_active: establishment?.is_active ?? true,
+});
+
+const emptyEstablishmentForm = () => ({
+    name: '',
+    address: '',
+    city: '',
+    zip_code: '',
+    timezone: 'Europe/Paris',
+    is_active: true,
+});
+
+const establishmentForm = useForm(
+    isSingleView.value && singleEstablishment.value
+        ? establishmentToForm(singleEstablishment.value)
+        : emptyEstablishmentForm(),
+);
+
+const startCreateEstablishment = () => {
+    editingEstablishmentId.value = null;
+    establishmentForm.defaults(emptyEstablishmentForm());
+    establishmentForm.reset();
+    showEstablishmentForm.value = true;
+};
+
+const startEditEstablishment = (establishment) => {
+    editingEstablishmentId.value = establishment.id;
+    establishmentForm.defaults(establishmentToForm(establishment));
+    establishmentForm.reset();
+    showEstablishmentForm.value = true;
+};
+
+onMounted(() => {
+    if (!isSingleView.value && establishmentListCount.value === 0 && props.canCreateEstablishments) {
+        startCreateEstablishment();
+    }
+});
+
+const cancelEstablishmentForm = () => {
+    showEstablishmentForm.value = false;
+    editingEstablishmentId.value = null;
+
+    if (isSingleView.value && singleEstablishment.value) {
+        establishmentForm.defaults(establishmentToForm(singleEstablishment.value));
+    }
+
+    establishmentForm.reset();
+};
+
+const submitEstablishment = () => {
+    const targetId = isSingleView.value ? singleEstablishment.value?.id : editingEstablishmentId.value;
+    const wasActive = isSingleView.value
+        ? singleEstablishment.value?.is_active
+        : establishmentRows.value.find((e) => e.id === editingEstablishmentId.value)?.is_active;
+
+    if (targetId && wasActive && !establishmentForm.is_active) {
+        toggleTarget.value = { action: 'deactivate', source: 'form' };
+        return;
+    }
+
+    if (targetId && !wasActive && establishmentForm.is_active) {
+        toggleTarget.value = { action: 'reactivate', source: 'form' };
+        return;
+    }
+
+    performSubmit();
+};
+
+const isReactivateAction = computed(() => toggleTarget.value?.action === 'reactivate');
+
+const toggleModalTitle = computed(() =>
+    isReactivateAction.value ? 'Réactiver l\'enseigne' : 'Désactiver l\'enseigne',
+);
+
+const toggleModalMessage = computed(() => {
+    if (!toggleTarget.value) return '';
+
+    if (toggleTarget.value.action === 'reactivate') {
+        if (toggleTarget.value.source === 'toggle') {
+            return `Voulez-vous réactiver « ${toggleTarget.value.establishment.name} » ? Elle redeviendra visible par les utilisateurs.`;
+        }
+
+        return 'Voulez-vous réactiver cette enseigne ? Elle redeviendra visible par les utilisateurs.';
+    }
+
+    if (toggleTarget.value.source === 'toggle') {
+        return `Voulez-vous désactiver « ${toggleTarget.value.establishment.name} » ? Elle ne sera plus visible par les utilisateurs.`;
+    }
+
+    return 'Voulez-vous désactiver cette enseigne ? Elle ne sera plus visible par les utilisateurs.';
+});
+
+const toggleModalWarning = computed(() =>
+    isReactivateAction.value
+        ? 'Vérifiez que le nom, l\'adresse et le fuseau horaire sont corrects avant de réactiver.'
+        : 'Vous pourrez la réactiver à tout moment.',
+);
+
+const toggleModalConfirmLabel = computed(() =>
+    isReactivateAction.value ? 'Réactiver' : 'Désactiver',
+);
+
+const toggleFormErrors = computed(() => Object.values(toggleForm.errors));
+
+const performSubmit = () => {
+    const targetId = isSingleView.value ? singleEstablishment.value?.id : editingEstablishmentId.value;
+
+    if (targetId) {
+        establishmentForm.put(
+            route('supervisor.organizations.establishments.update', targetId),
+            {
+                onSuccess: () => {
+                    closeToggleModal();
+                    cancelEstablishmentForm();
+                },
+            },
+        );
+    } else {
+        establishmentForm.post(route('supervisor.organizations.establishments.store'), {
+            onSuccess: () => {
+                closeToggleModal();
+                cancelEstablishmentForm();
+            },
+        });
+    }
+};
+
+const requestToggle = (establishment) => {
+    toggleTarget.value = {
+        action: establishment.is_active ? 'deactivate' : 'reactivate',
+        source: 'toggle',
+        establishment,
+    };
+};
+
+const closeToggleModal = () => {
+    toggleTarget.value = null;
+};
+
+const confirmToggle = () => {
+    if (!toggleTarget.value) return;
+
+    if (toggleTarget.value.source === 'toggle') {
+        toggleForm.patch(
+            route('supervisor.organizations.establishments.toggle-active', toggleTarget.value.establishment.id),
+            {
+                preserveScroll: true,
+                onSuccess: closeToggleModal,
+            },
+        );
+    } else {
+        performSubmit();
+    }
+};
+
+const formatAddress = (establishment) => {
+    const parts = [establishment.address, establishment.zip_code, establishment.city].filter(Boolean);
+    return parts.join(', ');
+};
+</script>
+
+<template>
+    <Head title="Enseignes" />
+
+    <SupervisorLayout title="Enseignes">
+        <template #actions>
+            <PrimaryButton
+                v-if="!isSingleView && canCreateEstablishments"
+                @click="startCreateEstablishment"
+            >
+                Nouvelle enseigne
+            </PrimaryButton>
+        </template>
+
+        <AlertBanner v-if="toggleFormErrors.length > 0">
+            <ul class="space-y-1">
+                <li v-for="(error, index) in toggleFormErrors" :key="index">{{ error }}</li>
+            </ul>
+        </AlertBanner>
+
+        <section v-if="isSingleView && singleEstablishment">
+            <div class="mb-6 flex items-center justify-between">
+                <p class="text-sm text-slate-500">Informations de votre laverie</p>
+                <StatusBadge
+                    :label="singleEstablishment.is_active ? 'Active' : 'Inactive'"
+                    :color-class="getStatusColor(singleEstablishment.is_active ? 'active' : 'inactive', activeStatusColors)"
+                />
+            </div>
+
+            <div :class="[cardClass, 'p-6']">
+                <dl class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                    <div>
+                        <dt class="text-xs font-medium uppercase tracking-wide text-slate-400">Nom</dt>
+                        <dd class="mt-1 text-sm font-medium text-slate-900">{{ singleEstablishment.name }}</dd>
+                    </div>
+                    <div>
+                        <dt class="text-xs font-medium uppercase tracking-wide text-slate-400">Adresse</dt>
+                        <dd class="mt-1 text-sm text-slate-700">{{ formatAddress(singleEstablishment) }}</dd>
+                    </div>
+                    <div>
+                        <dt class="text-xs font-medium uppercase tracking-wide text-slate-400">Fuseau horaire</dt>
+                        <dd class="mt-1 text-sm text-slate-700">{{ singleEstablishment.timezone }}</dd>
+                    </div>
+                    <div v-if="singleEstablishment.latitude != null && singleEstablishment.longitude != null">
+                        <dt class="text-xs font-medium uppercase tracking-wide text-slate-400">Coordonnées GPS</dt>
+                        <dd class="mt-1 text-sm text-slate-700">
+                            {{ singleEstablishment.latitude }}, {{ singleEstablishment.longitude }}
+                        </dd>
+                        <p class="mt-0.5 text-xs text-slate-400">Calculées automatiquement à partir de l'adresse.</p>
+                    </div>
+                </dl>
+
+                <div v-if="canManageEstablishments" class="mt-6">
+                    <PrimaryButton @click="startEditEstablishment(singleEstablishment)">
+                        Modifier
+                    </PrimaryButton>
+                </div>
+            </div>
+
+            <p v-if="!canManageEstablishments" class="mt-4 rounded-xl bg-slate-50 px-4 py-3 text-sm text-slate-500">
+                Consultation seule — contactez votre administrateur pour modifier ces informations.
+            </p>
+        </section>
+
+        <section v-else>
+            <p class="mb-4 text-sm text-slate-500">
+                {{ establishmentListCount }} enseigne(s)
+            </p>
+
+            <DataTable>
+                <template #head>
+                    <tr>
+                        <TableHeaderCell
+                            label="Nom"
+                            sortable
+                            sort-key="name"
+                            :active-sort="localFilters.sort"
+                            :sort-direction="localFilters.direction"
+                            @sort="handleSort"
+                        >
+                            <input
+                                v-model="localFilters.search"
+                                type="text"
+                                placeholder="Nom, adresse…"
+                                :class="filterInputClass"
+                            />
+                        </TableHeaderCell>
+                        <TableHeaderCell
+                            label="Adresse"
+                            sortable
+                            sort-key="city"
+                            :active-sort="localFilters.sort"
+                            :sort-direction="localFilters.direction"
+                            @sort="handleSort"
+                        />
+                        <TableHeaderCell
+                            label="Machines"
+                            sortable
+                            sort-key="machines_count"
+                            :active-sort="localFilters.sort"
+                            :sort-direction="localFilters.direction"
+                            @sort="handleSort"
+                        />
+                        <TableHeaderCell
+                            label="Statut"
+                            sortable
+                            sort-key="is_active"
+                            :active-sort="localFilters.sort"
+                            :sort-direction="localFilters.direction"
+                            @sort="handleSort"
+                        >
+                            <select v-model="localFilters.is_active" :class="filterSelectClass">
+                                <option value="">Tous</option>
+                                <option value="1">Active</option>
+                                <option value="0">Inactive</option>
+                            </select>
+                        </TableHeaderCell>
+                        <TableHeaderCell v-if="canManageEstablishments" label="Actions" align="right" />
+                    </tr>
+                </template>
+
+                <tr v-if="establishmentRows.length === 0">
+                    <td :colspan="canManageEstablishments ? 5 : 4" class="px-6 py-12 text-center text-sm text-slate-400">
+                        Aucune enseigne trouvée.
+                    </td>
+                </tr>
+                <tr v-for="establishment in establishmentRows" :key="establishment.id" :class="rowClass">
+                    <td :class="[tdClass, 'font-medium text-slate-800']">{{ establishment.name }}</td>
+                    <td :class="tdClass">{{ formatAddress(establishment) }}</td>
+                    <td :class="tdClass">{{ establishment.machines_count }}</td>
+                    <td :class="tdClass">
+                        <StatusBadge
+                            :label="establishment.is_active ? 'Active' : 'Inactive'"
+                            :color-class="getStatusColor(establishment.is_active ? 'active' : 'inactive', activeStatusColors)"
+                        />
+                    </td>
+                    <td v-if="canManageEstablishments" :class="[tdClass, 'text-right']">
+                        <button class="font-medium text-indigo-600 transition hover:text-indigo-800" @click="startEditEstablishment(establishment)">
+                            Modifier
+                        </button>
+                        <button
+                            class="ms-3 font-medium transition"
+                            :class="establishment.is_active ? 'text-orange-600 hover:text-orange-800' : 'text-emerald-600 hover:text-emerald-800'"
+                            :disabled="toggleForm.processing || establishmentForm.processing"
+                            @click="requestToggle(establishment)"
+                        >
+                            {{ establishment.is_active ? 'Désactiver' : 'Réactiver' }}
+                        </button>
+                    </td>
+                </tr>
+
+                <template #footer>
+                    <Pagination
+                        :paginator="establishments"
+                        :per-page="localFilters.per_page"
+                        @update:per-page="(value) => { localFilters.per_page = value; }"
+                    />
+                </template>
+            </DataTable>
+        </section>
+
+        <FormModal
+            :show="showEstablishmentForm"
+            :title="establishmentFormTitle"
+            :submit-label="establishmentSubmitLabel"
+            :processing="establishmentForm.processing"
+            max-width="3xl"
+            @close="cancelEstablishmentForm"
+            @submit="submitEstablishment"
+        >
+            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+                <FormField label="Nom">
+                    <input v-model="establishmentForm.name" type="text" required :class="inputClass" />
+                </FormField>
+                <FormField label="Adresse" field-class="sm:col-span-2">
+                    <AddressAutocomplete
+                        v-model:address="establishmentForm.address"
+                        v-model:city="establishmentForm.city"
+                        v-model:zip-code="establishmentForm.zip_code"
+                        required
+                    />
+                    <p class="mt-1 text-xs text-slate-400">
+                        Les coordonnées GPS seront calculées automatiquement à l'enregistrement.
+                    </p>
+                </FormField>
+                <FormField label="Code postal">
+                    <input v-model="establishmentForm.zip_code" type="text" :class="inputClass" />
+                </FormField>
+                <FormField label="Ville">
+                    <input v-model="establishmentForm.city" type="text" :class="inputClass" />
+                </FormField>
+                <FormField label="Fuseau horaire">
+                    <input v-model="establishmentForm.timezone" type="text" required :class="inputClass" />
+                </FormField>
+                <div class="sm:col-span-2 lg:col-span-3">
+                    <label class="flex items-center gap-2 text-sm text-slate-700">
+                        <input v-model="establishmentForm.is_active" type="checkbox" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500/20" />
+                        Enseigne active
+                    </label>
+                    <p class="mt-1 text-xs text-slate-400">
+                        Décochez pour désactiver cette enseigne sans la supprimer.
+                    </p>
+                </div>
+            </div>
+        </FormModal>
+
+        <ConfirmDeleteModal
+            :show="toggleTarget !== null"
+            :title="toggleModalTitle"
+            :message="toggleModalMessage"
+            :confirm-label="toggleModalConfirmLabel"
+            :warning="toggleModalWarning"
+            :danger="!isReactivateAction"
+            :processing="toggleForm.processing || establishmentForm.processing"
+            @close="closeToggleModal"
+            @confirm="confirmToggle"
+        />
+    </SupervisorLayout>
+</template>
diff --git a/resources/js/Pages/Supervisor/Pricing/Index.vue b/resources/js/Pages/Supervisor/Pricing/Index.vue
index 1a1ddf6..642c461 100644
--- a/resources/js/Pages/Supervisor/Pricing/Index.vue
+++ b/resources/js/Pages/Supervisor/Pricing/Index.vue
@@ -1,14 +1,31 @@
 <script setup>
+import DataTable from '@/Components/Supervisor/DataTable.vue';
+import FormField from '@/Components/Supervisor/FormField.vue';
+import FormModal from '@/Components/Supervisor/FormModal.vue';
+import Pagination from '@/Components/Supervisor/Pagination.vue';
+import StatusBadge from '@/Components/Supervisor/StatusBadge.vue';
+import TableHeaderCell from '@/Components/Supervisor/TableHeaderCell.vue';
+import { useListFilters } from '@/Components/Supervisor/useListFilters.js';
+import {
+    activeStatusColors,
+    filterInputClass,
+    filterSelectClass,
+    getStatusColor,
+    inputClass,
+    rowClass,
+    selectClass,
+    tdClass,
+} from '@/Components/Supervisor/ui.js';
+import ConfirmDeleteModal from '@/Components/ConfirmDeleteModal.vue';
 import PrimaryButton from '@/Components/PrimaryButton.vue';
-import SecondaryButton from '@/Components/SecondaryButton.vue';
 import SupervisorLayout from '@/Layouts/SupervisorLayout.vue';
 import { Head, useForm } from '@inertiajs/vue3';
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 
 const props = defineProps({
     rules: {
-        type: Array,
-        default: () => [],
+        type: Object,
+        required: true,
     },
     establishments: {
         type: Array,
@@ -22,10 +39,30 @@ const props = defineProps({
         type: Object,
         default: () => ({}),
     },
+    filters: {
+        type: Object,
+        default: () => ({}),
+    },
 });
 
+const { localFilters, toggleSort } = useListFilters('supervisor.pricing.index', {
+    establishment_id: props.filters.establishment_id ?? '',
+    machine_type: props.filters.machine_type ?? '',
+    day_type: props.filters.day_type ?? '',
+    is_active: props.filters.is_active ?? '',
+    search: props.filters.search ?? '',
+    sort: props.filters.sort ?? 'priority',
+    direction: props.filters.direction ?? 'asc',
+    per_page: props.filters.per_page ?? 10,
+}, { debounceKeys: ['search'] });
+
+const showEstablishmentFilter = computed(() => props.establishments.length > 1);
+const handleSort = (key) => toggleSort(key);
+
 const editingId = ref(null);
 const showForm = ref(false);
+const deleteTarget = ref(null);
+const deleteForm = useForm({});
 
 const emptyForm = () => ({
     establishment_id: props.establishments[0]?.id ?? '',
@@ -93,10 +130,20 @@ const submit = () => {
     }
 };
 
-const destroy = (id) => {
-    if (confirm('Supprimer cette règle tarifaire ?')) {
-        useForm({}).delete(route('supervisor.pricing.destroy', id));
-    }
+const openDeleteModal = (rule) => {
+    deleteTarget.value = rule;
+};
+
+const closeDeleteModal = () => {
+    deleteTarget.value = null;
+};
+
+const confirmDelete = () => {
+    if (!deleteTarget.value) return;
+
+    deleteForm.delete(route('supervisor.pricing.destroy', deleteTarget.value.id), {
+        onSuccess: closeDeleteModal,
+    });
 };
 
 const formatCurrency = (value) =>
@@ -107,136 +154,202 @@ const formatCurrency = (value) =>
     <Head title="Tarifs" />
 
     <SupervisorLayout title="Tarifs">
-        <div class="mb-4 flex justify-end">
-            <PrimaryButton v-if="!showForm" @click="startCreate">
+        <template #actions>
+            <PrimaryButton @click="startCreate">
                 Nouvelle règle
             </PrimaryButton>
-        </div>
+        </template>
 
-        <!-- Inline form -->
-        <div v-if="showForm" class="mb-6 rounded-lg border border-indigo-200 bg-white p-6 shadow">
-            <h2 class="mb-4 text-lg font-semibold text-gray-800">
-                {{ editingId ? 'Modifier la règle' : 'Nouvelle règle tarifaire' }}
-            </h2>
-            <form @submit.prevent="submit" class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
-                <div>
-                    <label class="block text-xs font-medium text-gray-500">Établissement</label>
-                    <select
-                        v-model="form.establishment_id"
-                        required
-                        class="mt-1 block w-full rounded-md border-gray-300 text-sm shadow-sm"
-                    >
+        <FormModal
+            :show="showForm"
+            :title="editingId ? 'Modifier la règle' : 'Nouvelle règle tarifaire'"
+            :submit-label="editingId ? 'Enregistrer' : 'Créer'"
+            :processing="form.processing"
+            max-width="3xl"
+            @close="cancelForm"
+            @submit="submit"
+        >
+            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+                <FormField label="Établissement">
+                    <select v-model="form.establishment_id" required :class="selectClass">
                         <option v-for="est in establishments" :key="est.id" :value="est.id">
                             {{ est.name }}
                         </option>
                     </select>
-                </div>
-                <div>
-                    <label class="block text-xs font-medium text-gray-500">Type de machine</label>
-                    <select v-model="form.machine_type" class="mt-1 block w-full rounded-md border-gray-300 text-sm shadow-sm">
+                </FormField>
+                <FormField label="Type de machine">
+                    <select v-model="form.machine_type" :class="selectClass">
                         <option value="">Tous types</option>
                         <option v-for="(label, value) in machineTypes" :key="value" :value="value">
                             {{ label }}
                         </option>
                     </select>
-                </div>
-                <div>
-                    <label class="block text-xs font-medium text-gray-500">Jour</label>
-                    <select v-model="form.day_type" required class="mt-1 block w-full rounded-md border-gray-300 text-sm shadow-sm">
+                </FormField>
+                <FormField label="Jour">
+                    <select v-model="form.day_type" required :class="selectClass">
                         <option v-for="(label, value) in dayTypes" :key="value" :value="value">
                             {{ label }}
                         </option>
                     </select>
-                </div>
-                <div>
-                    <label class="block text-xs font-medium text-gray-500">Début créneau</label>
-                    <input v-model="form.slot_start" type="time" required class="mt-1 block w-full rounded-md border-gray-300 text-sm shadow-sm" />
-                </div>
-                <div>
-                    <label class="block text-xs font-medium text-gray-500">Fin créneau</label>
-                    <input v-model="form.slot_end" type="time" required class="mt-1 block w-full rounded-md border-gray-300 text-sm shadow-sm" />
-                </div>
-                <div>
-                    <label class="block text-xs font-medium text-gray-500">Prix (€)</label>
-                    <input v-model="form.price" type="number" step="0.01" min="0" required class="mt-1 block w-full rounded-md border-gray-300 text-sm shadow-sm" />
-                </div>
-                <div>
-                    <label class="block text-xs font-medium text-gray-500">Libellé</label>
-                    <input v-model="form.label" type="text" class="mt-1 block w-full rounded-md border-gray-300 text-sm shadow-sm" />
-                </div>
-                <div>
-                    <label class="block text-xs font-medium text-gray-500">Priorité</label>
-                    <input v-model="form.priority" type="number" min="0" class="mt-1 block w-full rounded-md border-gray-300 text-sm shadow-sm" />
-                </div>
-                <div class="flex items-end gap-4">
-                    <label class="flex items-center gap-2 text-sm">
-                        <input v-model="form.requires_app" type="checkbox" class="rounded border-gray-300 text-indigo-600" />
+                </FormField>
+                <FormField label="Début créneau">
+                    <input v-model="form.slot_start" type="time" required :class="inputClass" />
+                </FormField>
+                <FormField label="Fin créneau">
+                    <input v-model="form.slot_end" type="time" required :class="inputClass" />
+                </FormField>
+                <FormField label="Prix (€)">
+                    <input v-model="form.price" type="number" step="0.01" min="0" required :class="inputClass" />
+                </FormField>
+                <FormField label="Libellé">
+                    <input v-model="form.label" type="text" :class="inputClass" />
+                </FormField>
+                <FormField label="Priorité">
+                    <input v-model="form.priority" type="number" min="0" :class="inputClass" />
+                </FormField>
+                <div class="flex items-end gap-4 sm:col-span-2 lg:col-span-3">
+                    <label class="flex items-center gap-2 text-sm text-slate-700">
+                        <input v-model="form.requires_app" type="checkbox" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500/20" />
                         App requise
                     </label>
-                    <label class="flex items-center gap-2 text-sm">
-                        <input v-model="form.is_active" type="checkbox" class="rounded border-gray-300 text-indigo-600" />
+                    <label class="flex items-center gap-2 text-sm text-slate-700">
+                        <input v-model="form.is_active" type="checkbox" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500/20" />
                         Active
                     </label>
                 </div>
-                <div class="flex gap-2 sm:col-span-2 lg:col-span-3">
-                    <PrimaryButton type="submit" :disabled="form.processing">
-                        {{ editingId ? 'Enregistrer' : 'Créer' }}
-                    </PrimaryButton>
-                    <SecondaryButton type="button" @click="cancelForm">Annuler</SecondaryButton>
-                </div>
-            </form>
-        </div>
+            </div>
+        </FormModal>
 
-        <!-- Rules list -->
-        <div class="overflow-hidden rounded-lg bg-white shadow">
-            <table class="min-w-full divide-y divide-gray-200">
-                <thead class="bg-gray-50">
-                    <tr>
-                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Établissement</th>
-                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Créneau</th>
-                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Type</th>
-                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Prix</th>
-                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Statut</th>
-                        <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500">Actions</th>
-                    </tr>
-                </thead>
-                <tbody class="divide-y divide-gray-100">
-                    <tr v-if="rules.length === 0">
-                        <td colspan="6" class="px-4 py-8 text-center text-sm text-gray-500">
-                            Aucune règle tarifaire configurée.
-                        </td>
-                    </tr>
-                    <tr v-for="rule in rules" :key="rule.id" class="hover:bg-gray-50">
-                        <td class="px-4 py-3 text-sm text-gray-800">{{ rule.establishment_name }}</td>
-                        <td class="px-4 py-3 text-sm text-gray-600">
-                            {{ rule.slot_start }} – {{ rule.slot_end }}
-                            <span class="text-xs text-gray-400">({{ rule.day_type_label }})</span>
-                        </td>
-                        <td class="px-4 py-3 text-sm text-gray-600">
-                            {{ rule.machine_type_label ?? 'Tous' }}
-                        </td>
-                        <td class="px-4 py-3 text-sm font-medium text-gray-800">
-                            {{ formatCurrency(rule.price) }}
-                        </td>
-                        <td class="px-4 py-3">
-                            <span
-                                class="rounded-full px-2.5 py-0.5 text-xs font-medium"
-                                :class="rule.is_active ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-600'"
-                            >
-                                {{ rule.is_active ? 'Active' : 'Inactive' }}
-                            </span>
-                        </td>
-                        <td class="px-4 py-3 text-right text-sm">
-                            <button @click="startEdit(rule)" class="text-indigo-600 hover:text-indigo-800">
-                                Modifier
-                            </button>
-                            <button @click="destroy(rule.id)" class="ms-3 text-red-600 hover:text-red-800">
-                                Supprimer
-                            </button>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
+        <DataTable>
+            <template #head>
+                <tr>
+                    <TableHeaderCell
+                        label="Établissement"
+                        sortable
+                        sort-key="establishment"
+                        :active-sort="localFilters.sort"
+                        :sort-direction="localFilters.direction"
+                        @sort="handleSort"
+                    >
+                        <select
+                            v-if="showEstablishmentFilter"
+                            v-model="localFilters.establishment_id"
+                            :class="filterSelectClass"
+                        >
+                            <option value="">Toutes</option>
+                            <option v-for="est in establishments" :key="est.id" :value="est.id">
+                                {{ est.name }}
+                            </option>
+                        </select>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                        label="Créneau"
+                        sortable
+                        sort-key="slot_start"
+                        :active-sort="localFilters.sort"
+                        :sort-direction="localFilters.direction"
+                        @sort="handleSort"
+                    >
+                        <select v-model="localFilters.day_type" :class="filterSelectClass">
+                            <option value="">Tous</option>
+                            <option v-for="(label, value) in dayTypes" :key="value" :value="value">
+                                {{ label }}
+                            </option>
+                        </select>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                        label="Type"
+                        sortable
+                        sort-key="machine_type"
+                        :active-sort="localFilters.sort"
+                        :sort-direction="localFilters.direction"
+                        @sort="handleSort"
+                    >
+                        <select v-model="localFilters.machine_type" :class="filterSelectClass">
+                            <option value="">Tous</option>
+                            <option v-for="(label, value) in machineTypes" :key="value" :value="value">
+                                {{ label }}
+                            </option>
+                        </select>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                        label="Prix"
+                        sortable
+                        sort-key="price"
+                        :active-sort="localFilters.sort"
+                        :sort-direction="localFilters.direction"
+                        @sort="handleSort"
+                    >
+                        <input
+                            v-model="localFilters.search"
+                            type="text"
+                            placeholder="Libellé…"
+                            :class="filterInputClass"
+                        />
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                        label="Statut"
+                        sortable
+                        sort-key="is_active"
+                        :active-sort="localFilters.sort"
+                        :sort-direction="localFilters.direction"
+                        @sort="handleSort"
+                    >
+                        <select v-model="localFilters.is_active" :class="filterSelectClass">
+                            <option value="">Tous</option>
+                            <option value="1">Active</option>
+                            <option value="0">Inactive</option>
+                        </select>
+                    </TableHeaderCell>
+                    <TableHeaderCell label="Actions" align="right" />
+                </tr>
+            </template>
+
+            <tr v-if="rules.data.length === 0">
+                <td colspan="6" class="px-6 py-12 text-center text-sm text-slate-400">
+                    Aucune règle tarifaire trouvée.
+                </td>
+            </tr>
+            <tr v-for="rule in rules.data" :key="rule.id" :class="rowClass">
+                <td :class="[tdClass, 'font-medium text-slate-800']">{{ rule.establishment_name }}</td>
+                <td :class="tdClass">
+                    {{ rule.slot_start }} – {{ rule.slot_end }}
+                    <span class="text-xs text-slate-400">({{ rule.day_type_label }})</span>
+                </td>
+                <td :class="tdClass">{{ rule.machine_type_label ?? 'Tous' }}</td>
+                <td :class="[tdClass, 'font-semibold text-slate-800']">{{ formatCurrency(rule.price) }}</td>
+                <td :class="tdClass">
+                    <StatusBadge
+                        :label="rule.is_active ? 'Active' : 'Inactive'"
+                        :color-class="getStatusColor(rule.is_active ? 'active' : 'inactive', activeStatusColors)"
+                    />
+                </td>
+                <td :class="[tdClass, 'text-right']">
+                    <button class="font-medium text-indigo-600 transition hover:text-indigo-800" @click="startEdit(rule)">
+                        Modifier
+                    </button>
+                    <button class="ms-3 font-medium text-red-600 transition hover:text-red-800" @click="openDeleteModal(rule)">
+                        Supprimer
+                    </button>
+                </td>
+            </tr>
+
+            <template #footer>
+                <Pagination
+                    :paginator="rules"
+                    :per-page="localFilters.per_page"
+                    @update:per-page="(value) => { localFilters.per_page = value; }"
+                />
+            </template>
+        </DataTable>
+
+        <ConfirmDeleteModal
+            :show="deleteTarget !== null"
+            title="Supprimer la règle tarifaire"
+            :message="deleteTarget ? `Voulez-vous supprimer la règle « ${deleteTarget.label || deleteTarget.establishment_name} » ?` : ''"
+            :processing="deleteForm.processing"
+            @close="closeDeleteModal"
+            @confirm="confirmDelete"
+        />
     </SupervisorLayout>
 </template>
diff --git a/resources/js/Pages/Supervisor/Promotions/Index.vue b/resources/js/Pages/Supervisor/Promotions/Index.vue
index 7b73115..2c019a2 100644
--- a/resources/js/Pages/Supervisor/Promotions/Index.vue
+++ b/resources/js/Pages/Supervisor/Promotions/Index.vue
@@ -1,14 +1,29 @@
 <script setup>
+import DataTable from '@/Components/Supervisor/DataTable.vue';
+import FormField from '@/Components/Supervisor/FormField.vue';
+import FormModal from '@/Components/Supervisor/FormModal.vue';
+import Pagination from '@/Components/Supervisor/Pagination.vue';
+import StatusBadge from '@/Components/Supervisor/StatusBadge.vue';
+import TableHeaderCell from '@/Components/Supervisor/TableHeaderCell.vue';
+import { useListFilters } from '@/Components/Supervisor/useListFilters.js';
+import {
+    filterInputClass,
+    filterSelectClass,
+    inputClass,
+    rowClass,
+    selectClass,
+    tdClass,
+} from '@/Components/Supervisor/ui.js';
+import ConfirmDeleteModal from '@/Components/ConfirmDeleteModal.vue';
 import PrimaryButton from '@/Components/PrimaryButton.vue';
-import SecondaryButton from '@/Components/SecondaryButton.vue';
 import SupervisorLayout from '@/Layouts/SupervisorLayout.vue';
 import { Head, useForm } from '@inertiajs/vue3';
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 
 const props = defineProps({
     promotions: {
-        type: Array,
-        default: () => [],
+        type: Object,
+        required: true,
     },
     establishments: {
         type: Array,
@@ -22,10 +37,29 @@ const props = defineProps({
         type: Object,
         default: () => ({}),
     },
+    filters: {
+        type: Object,
+        default: () => ({}),
+    },
 });
 
+const { localFilters, toggleSort } = useListFilters('supervisor.promotions.index', {
+    establishment_id: props.filters.establishment_id ?? '',
+    machine_type: props.filters.machine_type ?? '',
+    is_active: props.filters.is_active ?? '',
+    search: props.filters.search ?? '',
+    sort: props.filters.sort ?? 'starts_at',
+    direction: props.filters.direction ?? 'desc',
+    per_page: props.filters.per_page ?? 10,
+}, { debounceKeys: ['search'] });
+
+const showEstablishmentFilter = computed(() => props.establishments.length > 1);
+const handleSort = (key) => toggleSort(key, ['starts_at', 'ends_at', 'discount_value']);
+
 const editingId = ref(null);
 const showForm = ref(false);
+const deleteTarget = ref(null);
+const deleteForm = useForm({});
 
 const emptyForm = () => ({
     establishment_id: props.establishments[0]?.id ?? '',
@@ -81,10 +115,20 @@ const submit = () => {
     }
 };
 
-const destroy = (id) => {
-    if (confirm('Supprimer cette promotion ?')) {
-        useForm({}).delete(route('supervisor.promotions.destroy', id));
-    }
+const openDeleteModal = (promotion) => {
+    deleteTarget.value = promotion;
+};
+
+const closeDeleteModal = () => {
+    deleteTarget.value = null;
+};
+
+const confirmDelete = () => {
+    if (!deleteTarget.value) return;
+
+    deleteForm.delete(route('supervisor.promotions.destroy', deleteTarget.value.id), {
+        onSuccess: closeDeleteModal,
+    });
 };
 
 const formatDate = (iso) => {
@@ -110,137 +154,210 @@ const isCurrentlyActive = (promotion) => {
         new Date(promotion.ends_at) >= now
     );
 };
+
+const promotionStatusColor = (promotion) => {
+    if (isCurrentlyActive(promotion)) {
+        return 'bg-emerald-100 text-emerald-800 ring-emerald-600/20';
+    }
+    if (promotion.is_active) {
+        return 'bg-amber-100 text-amber-800 ring-amber-600/20';
+    }
+    return 'bg-slate-100 text-slate-600 ring-slate-500/20';
+};
+
+const promotionStatusLabel = (promotion) => {
+    if (isCurrentlyActive(promotion)) return 'En cours';
+    if (promotion.is_active) return 'Programmée';
+    return 'Inactive';
+};
 </script>
 
 <template>
     <Head title="Promotions" />
 
     <SupervisorLayout title="Promotions">
-        <div class="mb-4 flex justify-end">
-            <PrimaryButton v-if="!showForm" @click="startCreate">
+        <template #actions>
+            <PrimaryButton @click="startCreate">
                 Nouvelle promotion
             </PrimaryButton>
-        </div>
+        </template>
 
-        <div v-if="showForm" class="mb-6 rounded-lg border border-indigo-200 bg-white p-6 shadow">
-            <h2 class="mb-4 text-lg font-semibold text-gray-800">
-                {{ editingId ? 'Modifier la promotion' : 'Nouvelle promotion' }}
-            </h2>
-            <form @submit.prevent="submit" class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
-                <div>
-                    <label class="block text-xs font-medium text-gray-500">Établissement</label>
-                    <select v-model="form.establishment_id" required class="mt-1 block w-full rounded-md border-gray-300 text-sm shadow-sm">
+        <FormModal
+            :show="showForm"
+            :title="editingId ? 'Modifier la promotion' : 'Nouvelle promotion'"
+            :submit-label="editingId ? 'Enregistrer' : 'Créer'"
+            :processing="form.processing"
+            max-width="3xl"
+            @close="cancelForm"
+            @submit="submit"
+        >
+            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+                <FormField label="Établissement">
+                    <select v-model="form.establishment_id" required :class="selectClass">
                         <option v-for="est in establishments" :key="est.id" :value="est.id">
                             {{ est.name }}
                         </option>
                     </select>
-                </div>
-                <div>
-                    <label class="block text-xs font-medium text-gray-500">Type de machine</label>
-                    <select v-model="form.machine_type" required class="mt-1 block w-full rounded-md border-gray-300 text-sm shadow-sm">
+                </FormField>
+                <FormField label="Type de machine">
+                    <select v-model="form.machine_type" required :class="selectClass">
                         <option v-for="(label, value) in machineTypes" :key="value" :value="value">
                             {{ label }}
                         </option>
                     </select>
-                </div>
-                <div>
-                    <label class="block text-xs font-medium text-gray-500">Type de remise</label>
-                    <select v-model="form.discount_type" required class="mt-1 block w-full rounded-md border-gray-300 text-sm shadow-sm">
+                </FormField>
+                <FormField label="Type de remise">
+                    <select v-model="form.discount_type" required :class="selectClass">
                         <option v-for="(label, value) in discountTypes" :key="value" :value="value">
                             {{ label }}
                         </option>
                     </select>
-                </div>
-                <div>
-                    <label class="block text-xs font-medium text-gray-500">Valeur</label>
-                    <input v-model="form.discount_value" type="number" step="0.01" min="0" required class="mt-1 block w-full rounded-md border-gray-300 text-sm shadow-sm" />
-                </div>
-                <div>
-                    <label class="block text-xs font-medium text-gray-500">Début</label>
-                    <input v-model="form.starts_at" type="datetime-local" required class="mt-1 block w-full rounded-md border-gray-300 text-sm shadow-sm" />
-                </div>
-                <div>
-                    <label class="block text-xs font-medium text-gray-500">Fin</label>
-                    <input v-model="form.ends_at" type="datetime-local" required class="mt-1 block w-full rounded-md border-gray-300 text-sm shadow-sm" />
-                </div>
-                <div class="sm:col-span-2 lg:col-span-3">
-                    <label class="block text-xs font-medium text-gray-500">Description</label>
-                    <textarea v-model="form.description" rows="2" class="mt-1 block w-full rounded-md border-gray-300 text-sm shadow-sm" />
-                </div>
-                <div class="flex items-center">
-                    <label class="flex items-center gap-2 text-sm">
-                        <input v-model="form.is_active" type="checkbox" class="rounded border-gray-300 text-indigo-600" />
+                </FormField>
+                <FormField label="Valeur">
+                    <input v-model="form.discount_value" type="number" step="0.01" min="0" required :class="inputClass" />
+                </FormField>
+                <FormField label="Début">
+                    <input v-model="form.starts_at" type="datetime-local" required :class="inputClass" />
+                </FormField>
+                <FormField label="Fin">
+                    <input v-model="form.ends_at" type="datetime-local" required :class="inputClass" />
+                </FormField>
+                <FormField label="Description" field-class="sm:col-span-2 lg:col-span-3">
+                    <textarea v-model="form.description" rows="2" :class="inputClass" />
+                </FormField>
+                <div class="flex items-center sm:col-span-2 lg:col-span-3">
+                    <label class="flex items-center gap-2 text-sm text-slate-700">
+                        <input v-model="form.is_active" type="checkbox" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500/20" />
                         Active
                     </label>
                 </div>
-                <div class="flex gap-2 sm:col-span-2 lg:col-span-3">
-                    <PrimaryButton type="submit" :disabled="form.processing">
-                        {{ editingId ? 'Enregistrer' : 'Créer' }}
-                    </PrimaryButton>
-                    <SecondaryButton type="button" @click="cancelForm">Annuler</SecondaryButton>
-                </div>
-            </form>
-        </div>
+            </div>
+        </FormModal>
 
-        <div class="overflow-hidden rounded-lg bg-white shadow">
-            <table class="min-w-full divide-y divide-gray-200">
-                <thead class="bg-gray-50">
-                    <tr>
-                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Établissement</th>
-                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Remise</th>
-                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Période</th>
-                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Machines</th>
-                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Statut</th>
-                        <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500">Actions</th>
-                    </tr>
-                </thead>
-                <tbody class="divide-y divide-gray-100">
-                    <tr v-if="promotions.length === 0">
-                        <td colspan="6" class="px-4 py-8 text-center text-sm text-gray-500">
-                            Aucune promotion configurée.
-                        </td>
-                    </tr>
-                    <tr v-for="promotion in promotions" :key="promotion.id" class="hover:bg-gray-50">
-                        <td class="px-4 py-3 text-sm text-gray-800">{{ promotion.establishment_name }}</td>
-                        <td class="px-4 py-3 text-sm font-medium text-green-700">
-                            {{ formatDiscount(promotion) }}
-                        </td>
-                        <td class="px-4 py-3 text-sm text-gray-600">
-                            <div>{{ formatDate(promotion.starts_at) }}</div>
-                            <div class="text-xs text-gray-400">→ {{ formatDate(promotion.ends_at) }}</div>
-                        </td>
-                        <td class="px-4 py-3 text-sm text-gray-600">{{ promotion.machine_type_label }}</td>
-                        <td class="px-4 py-3">
-                            <span
-                                class="rounded-full px-2.5 py-0.5 text-xs font-medium"
-                                :class="
-                                    isCurrentlyActive(promotion)
-                                        ? 'bg-green-100 text-green-800'
-                                        : promotion.is_active
-                                          ? 'bg-yellow-100 text-yellow-800'
-                                          : 'bg-gray-100 text-gray-600'
-                                "
+        <DataTable>
+            <template #head>
+                <tr>
+                    <TableHeaderCell
+                        label="Établissement"
+                        sortable
+                        sort-key="establishment"
+                        :active-sort="localFilters.sort"
+                        :sort-direction="localFilters.direction"
+                        @sort="handleSort"
+                    >
+                        <div class="flex flex-col gap-1.5">
+                            <select
+                                v-if="showEstablishmentFilter"
+                                v-model="localFilters.establishment_id"
+                                :class="filterSelectClass"
                             >
-                                {{
-                                    isCurrentlyActive(promotion)
-                                        ? 'En cours'
-                                        : promotion.is_active
-                                          ? 'Programmée'
-                                          : 'Inactive'
-                                }}
-                            </span>
-                        </td>
-                        <td class="px-4 py-3 text-right text-sm">
-                            <button @click="startEdit(promotion)" class="text-indigo-600 hover:text-indigo-800">
-                                Modifier
-                            </button>
-                            <button @click="destroy(promotion.id)" class="ms-3 text-red-600 hover:text-red-800">
-                                Supprimer
-                            </button>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
+                                <option value="">Toutes</option>
+                                <option v-for="est in establishments" :key="est.id" :value="est.id">
+                                    {{ est.name }}
+                                </option>
+                            </select>
+                            <input
+                                v-model="localFilters.search"
+                                type="text"
+                                placeholder="Description…"
+                                :class="filterInputClass"
+                            />
+                        </div>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                        label="Remise"
+                        sortable
+                        sort-key="discount_value"
+                        :active-sort="localFilters.sort"
+                        :sort-direction="localFilters.direction"
+                        @sort="handleSort"
+                    />
+                    <TableHeaderCell
+                        label="Période"
+                        sortable
+                        sort-key="starts_at"
+                        :active-sort="localFilters.sort"
+                        :sort-direction="localFilters.direction"
+                        @sort="handleSort"
+                    />
+                    <TableHeaderCell
+                        label="Machines"
+                        sortable
+                        sort-key="machine_type"
+                        :active-sort="localFilters.sort"
+                        :sort-direction="localFilters.direction"
+                        @sort="handleSort"
+                    >
+                        <select v-model="localFilters.machine_type" :class="filterSelectClass">
+                            <option value="">Toutes</option>
+                            <option v-for="(label, value) in machineTypes" :key="value" :value="value">
+                                {{ label }}
+                            </option>
+                        </select>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                        label="Statut"
+                        sortable
+                        sort-key="is_active"
+                        :active-sort="localFilters.sort"
+                        :sort-direction="localFilters.direction"
+                        @sort="handleSort"
+                    >
+                        <select v-model="localFilters.is_active" :class="filterSelectClass">
+                            <option value="">Tous</option>
+                            <option value="1">Active</option>
+                            <option value="0">Inactive</option>
+                        </select>
+                    </TableHeaderCell>
+                    <TableHeaderCell label="Actions" align="right" />
+                </tr>
+            </template>
+
+            <tr v-if="promotions.data.length === 0">
+                <td colspan="6" class="px-6 py-12 text-center text-sm text-slate-400">
+                    Aucune promotion trouvée.
+                </td>
+            </tr>
+            <tr v-for="promotion in promotions.data" :key="promotion.id" :class="rowClass">
+                <td :class="[tdClass, 'font-medium text-slate-800']">{{ promotion.establishment_name }}</td>
+                <td :class="[tdClass, 'font-semibold text-emerald-700']">{{ formatDiscount(promotion) }}</td>
+                <td :class="tdClass">
+                    <div>{{ formatDate(promotion.starts_at) }}</div>
+                    <div class="text-xs text-slate-400">→ {{ formatDate(promotion.ends_at) }}</div>
+                </td>
+                <td :class="tdClass">{{ promotion.machine_type_label }}</td>
+                <td :class="tdClass">
+                    <StatusBadge
+                        :label="promotionStatusLabel(promotion)"
+                        :color-class="promotionStatusColor(promotion)"
+                    />
+                </td>
+                <td :class="[tdClass, 'text-right']">
+                    <button class="font-medium text-indigo-600 transition hover:text-indigo-800" @click="startEdit(promotion)">
+                        Modifier
+                    </button>
+                    <button class="ms-3 font-medium text-red-600 transition hover:text-red-800" @click="openDeleteModal(promotion)">
+                        Supprimer
+                    </button>
+                </td>
+            </tr>
+
+            <template #footer>
+                <Pagination
+                    :paginator="promotions"
+                    :per-page="localFilters.per_page"
+                    @update:per-page="(value) => { localFilters.per_page = value; }"
+                />
+            </template>
+        </DataTable>
+
+        <ConfirmDeleteModal
+            :show="deleteTarget !== null"
+            title="Supprimer la promotion"
+            :message="deleteTarget ? `Voulez-vous supprimer la promotion « ${deleteTarget.description || deleteTarget.establishment_name} » ?` : ''"
+            :processing="deleteForm.processing"
+            @close="closeDeleteModal"
+            @confirm="confirmDelete"
+        />
     </SupervisorLayout>
 </template>
diff --git a/resources/js/Pages/Supervisor/Washes/Index.vue b/resources/js/Pages/Supervisor/Washes/Index.vue
index 9bbe2e9..3e06863 100644
--- a/resources/js/Pages/Supervisor/Washes/Index.vue
+++ b/resources/js/Pages/Supervisor/Washes/Index.vue
@@ -1,13 +1,31 @@
 <script setup>
+import DataTable from '@/Components/Supervisor/DataTable.vue';
+import Pagination from '@/Components/Supervisor/Pagination.vue';
+import StatusBadge from '@/Components/Supervisor/StatusBadge.vue';
+import TableHeaderCell from '@/Components/Supervisor/TableHeaderCell.vue';
+import { useListFilters } from '@/Components/Supervisor/useListFilters.js';
+import {
+    filterInputClass,
+    filterSelectClass,
+    getStatusColor,
+    linkClass,
+    rowClass,
+    tdClass,
+    washStatusColors,
+} from '@/Components/Supervisor/ui.js';
 import SupervisorLayout from '@/Layouts/SupervisorLayout.vue';
-import { Head, Link, router } from '@inertiajs/vue3';
-import { reactive, watch } from 'vue';
+import { Head, Link } from '@inertiajs/vue3';
+import { computed } from 'vue';
 
 const props = defineProps({
     washes: {
         type: Object,
         required: true,
     },
+    establishments: {
+        type: Array,
+        default: () => [],
+    },
     filters: {
         type: Object,
         default: () => ({}),
@@ -18,17 +36,19 @@ const props = defineProps({
     },
 });
 
-const localFilters = reactive({
+const { localFilters, toggleSort } = useListFilters('supervisor.washes.index', {
+    establishment_id: props.filters.establishment_id ?? '',
+    user: props.filters.user ?? '',
     status: props.filters.status ?? '',
     date: props.filters.date ?? '',
-});
+    sort: props.filters.sort ?? 'started_at',
+    direction: props.filters.direction ?? 'desc',
+    per_page: props.filters.per_page ?? 10,
+}, { debounceKeys: ['user'] });
 
-watch(localFilters, () => {
-    router.get(route('supervisor.washes.index'), localFilters, {
-        preserveState: true,
-        replace: true,
-    });
-});
+const showEstablishmentFilter = computed(() => props.establishments.length > 1);
+
+const handleSort = (key) => toggleSort(key, ['started_at', 'duration_minutes', 'cost']);
 
 const formatDate = (iso) => {
     if (!iso) return '—';
@@ -40,122 +60,137 @@ const formatDate = (iso) => {
 
 const formatCurrency = (value) =>
     new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(value ?? 0);
-
-const statusColor = (status) => {
-    const colors = {
-        pending_start: 'bg-gray-100 text-gray-800',
-        running: 'bg-blue-100 text-blue-800',
-        completed: 'bg-green-100 text-green-800',
-        failed: 'bg-red-100 text-red-800',
-        cancelled: 'bg-yellow-100 text-yellow-800',
-    };
-    return colors[status] ?? 'bg-gray-100 text-gray-800';
-};
 </script>
 
 <template>
     <Head title="Lavages" />
 
     <SupervisorLayout title="Lavages">
-        <div class="mb-6 flex flex-wrap gap-4 rounded-lg bg-white p-4 shadow">
-            <div>
-                <label class="block text-xs font-medium text-gray-500">Statut</label>
-                <select
-                    v-model="localFilters.status"
-                    class="mt-1 block rounded-md border-gray-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
-                >
-                    <option value="">Tous</option>
-                    <option v-for="(label, value) in statusOptions" :key="value" :value="value">
-                        {{ label }}
-                    </option>
-                </select>
-            </div>
-            <div>
-                <label class="block text-xs font-medium text-gray-500">Date</label>
-                <input
-                    v-model="localFilters.date"
-                    type="date"
-                    class="mt-1 block rounded-md border-gray-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
-                />
-            </div>
-        </div>
-
-        <div class="overflow-hidden rounded-lg bg-white shadow">
-            <table class="min-w-full divide-y divide-gray-200">
-                <thead class="bg-gray-50">
-                    <tr>
-                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Début</th>
-                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Utilisateur</th>
-                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Machine</th>
-                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Statut</th>
-                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Durée</th>
-                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Coût</th>
-                    </tr>
-                </thead>
-                <tbody class="divide-y divide-gray-100">
-                    <tr v-if="washes.data.length === 0">
-                        <td colspan="6" class="px-4 py-8 text-center text-sm text-gray-500">
-                            Aucun lavage trouvé.
-                        </td>
-                    </tr>
-                    <tr v-for="wash in washes.data" :key="wash.uuid" class="hover:bg-gray-50">
-                        <td class="whitespace-nowrap px-4 py-3 text-sm text-gray-800">
-                            {{ formatDate(wash.started_at) }}
-                        </td>
-                        <td class="px-4 py-3 text-sm">
-                            <div class="font-medium text-gray-800">{{ wash.user?.name ?? '—' }}</div>
-                            <div class="text-xs text-gray-500">{{ wash.user?.email }}</div>
-                        </td>
-                        <td class="px-4 py-3 text-sm">
-                            <Link
-                                v-if="wash.machine"
-                                :href="route('supervisor.machines.show', wash.machine.uuid)"
-                                class="text-indigo-600 hover:text-indigo-800"
-                            >
-                                {{ wash.machine.name }}
-                            </Link>
-                            <span v-else>—</span>
-                        </td>
-                        <td class="px-4 py-3">
-                            <span
-                                class="rounded-full px-2.5 py-0.5 text-xs font-medium"
-                                :class="statusColor(wash.status)"
-                            >
-                                {{ wash.status_label }}
-                            </span>
-                        </td>
-                        <td class="whitespace-nowrap px-4 py-3 text-sm text-gray-600">
-                            {{ wash.duration_minutes ? `${wash.duration_minutes} min` : '—' }}
-                        </td>
-                        <td class="whitespace-nowrap px-4 py-3 text-sm font-medium text-gray-800">
-                            {{ formatCurrency(wash.cost) }}
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-
-            <div v-if="washes.links.length > 3" class="flex items-center justify-between border-t px-4 py-3">
-                <p class="text-sm text-gray-600">
-                    {{ washes.from ?? 0 }}–{{ washes.to ?? 0 }} sur {{ washes.total }}
-                </p>
-                <div class="flex gap-1">
-                    <Link
-                        v-for="link in washes.links"
-                        :key="link.label"
-                        :href="link.url"
-                        v-html="link.label"
-                        class="rounded px-3 py-1 text-sm"
-                        :class="
-                            link.active
-                                ? 'bg-indigo-600 text-white'
-                                : link.url
-                                  ? 'text-gray-600 hover:bg-gray-100'
-                                  : 'cursor-not-allowed text-gray-300'
-                        "
-                        preserve-state
+        <DataTable>
+            <template #head>
+                <tr>
+                    <TableHeaderCell
+                        label="Début"
+                        sortable
+                        sort-key="started_at"
+                        :active-sort="localFilters.sort"
+                        :sort-direction="localFilters.direction"
+                        @sort="handleSort"
+                    >
+                        <input v-model="localFilters.date" type="date" :class="filterInputClass" />
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                        label="Utilisateur"
+                        sortable
+                        sort-key="user"
+                        :active-sort="localFilters.sort"
+                        :sort-direction="localFilters.direction"
+                        @sort="handleSort"
+                    >
+                        <input
+                            v-model="localFilters.user"
+                            type="text"
+                            placeholder="Nom ou e-mail…"
+                            :class="filterInputClass"
+                        />
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                        label="Machine"
+                        sortable
+                        sort-key="machine"
+                        :active-sort="localFilters.sort"
+                        :sort-direction="localFilters.direction"
+                        @sort="handleSort"
+                    >
+                        <select
+                            v-if="showEstablishmentFilter"
+                            v-model="localFilters.establishment_id"
+                            :class="filterSelectClass"
+                        >
+                            <option value="">Toutes</option>
+                            <option v-for="est in establishments" :key="est.id" :value="est.id">
+                                {{ est.name }}
+                            </option>
+                        </select>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                        label="Statut"
+                        sortable
+                        sort-key="status"
+                        :active-sort="localFilters.sort"
+                        :sort-direction="localFilters.direction"
+                        @sort="handleSort"
+                    >
+                        <select v-model="localFilters.status" :class="filterSelectClass">
+                            <option value="">Tous</option>
+                            <option v-for="(label, value) in statusOptions" :key="value" :value="value">
+                                {{ label }}
+                            </option>
+                        </select>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                        label="Durée"
+                        sortable
+                        sort-key="duration_minutes"
+                        :active-sort="localFilters.sort"
+                        :sort-direction="localFilters.direction"
+                        @sort="handleSort"
                     />
-                </div>
-            </div>
-        </div>
+                    <TableHeaderCell
+                        label="Coût"
+                        sortable
+                        sort-key="cost"
+                        :active-sort="localFilters.sort"
+                        :sort-direction="localFilters.direction"
+                        @sort="handleSort"
+                    />
+                </tr>
+            </template>
+
+            <tr v-if="washes.data.length === 0">
+                <td colspan="6" class="px-6 py-12 text-center text-sm text-slate-400">
+                    Aucun lavage trouvé.
+                </td>
+            </tr>
+            <tr v-for="wash in washes.data" :key="wash.uuid" :class="rowClass">
+                <td :class="[tdClass, 'font-medium text-slate-800']">
+                    {{ formatDate(wash.started_at) }}
+                </td>
+                <td :class="tdClass">
+                    <div class="font-medium text-slate-800">{{ wash.user?.name ?? '—' }}</div>
+                    <div class="text-xs text-slate-400">{{ wash.user?.email }}</div>
+                </td>
+                <td :class="tdClass">
+                    <Link
+                        v-if="wash.machine"
+                        :href="route('supervisor.machines.show', wash.machine.uuid)"
+                        :class="linkClass"
+                    >
+                        {{ wash.machine.name }}
+                    </Link>
+                    <span v-else>—</span>
+                </td>
+                <td :class="tdClass">
+                    <StatusBadge
+                        :label="wash.status_label"
+                        :color-class="getStatusColor(wash.status, washStatusColors)"
+                    />
+                </td>
+                <td :class="tdClass">
+                    {{ wash.duration_minutes ? `${wash.duration_minutes} min` : '—' }}
+                </td>
+                <td :class="[tdClass, 'font-semibold text-slate-800']">
+                    {{ formatCurrency(wash.cost) }}
+                </td>
+            </tr>
+
+            <template #footer>
+                <Pagination
+                    :paginator="washes"
+                    :per-page="localFilters.per_page"
+                    @update:per-page="(value) => { localFilters.per_page = value; }"
+                />
+            </template>
+        </DataTable>
     </SupervisorLayout>
 </template>
diff --git a/routes/web.php b/routes/web.php
index 1df342f..060456e 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -4,6 +4,7 @@ use App\Http\Controllers\Supervisor\AuthController;
 use App\Http\Controllers\Supervisor\BookingPageController;
 use App\Http\Controllers\Supervisor\DashboardController;
 use App\Http\Controllers\Supervisor\MachinePageController;
+use App\Http\Controllers\Supervisor\OrganizationPageController;
 use App\Http\Controllers\Supervisor\PricingPageController;
 use App\Http\Controllers\Supervisor\PromotionPageController;
 use App\Http\Controllers\Supervisor\WashPageController;
@@ -22,7 +23,10 @@ Route::middleware('auth:supervisor')->group(function () {
     Route::get('dashboard', [DashboardController::class, 'index'])->name('supervisor.dashboard');
 
     Route::get('machines', [MachinePageController::class, 'index'])->name('supervisor.machines.index');
+    Route::post('machines', [MachinePageController::class, 'store'])->name('supervisor.machines.store');
     Route::get('machines/{uuid}', [MachinePageController::class, 'show'])->name('supervisor.machines.show');
+    Route::put('machines/{uuid}', [MachinePageController::class, 'update'])->name('supervisor.machines.update');
+    Route::delete('machines/{uuid}', [MachinePageController::class, 'destroy'])->name('supervisor.machines.destroy');
 
     Route::get('bookings', [BookingPageController::class, 'index'])->name('supervisor.bookings.index');
 
@@ -37,4 +41,10 @@ Route::middleware('auth:supervisor')->group(function () {
     Route::post('promotions', [PromotionPageController::class, 'store'])->name('supervisor.promotions.store');
     Route::put('promotions/{id}', [PromotionPageController::class, 'update'])->name('supervisor.promotions.update');
     Route::delete('promotions/{id}', [PromotionPageController::class, 'destroy'])->name('supervisor.promotions.destroy');
+
+    Route::get('enseignes', [OrganizationPageController::class, 'index'])->name('supervisor.organizations.index');
+    Route::get('enseignes/adresses/recherche', [OrganizationPageController::class, 'searchAddresses'])->name('supervisor.organizations.addresses.search');
+    Route::post('enseignes/laveries', [OrganizationPageController::class, 'storeEstablishment'])->name('supervisor.organizations.establishments.store');
+    Route::put('enseignes/laveries/{id}', [OrganizationPageController::class, 'updateEstablishment'])->name('supervisor.organizations.establishments.update');
+    Route::patch('enseignes/laveries/{id}/toggle-active', [OrganizationPageController::class, 'toggleEstablishmentActive'])->name('supervisor.organizations.establishments.toggle-active');
 });
diff --git a/tailwind.config.js b/tailwind.config.js
index d7c4a93..eb4b3c3 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -8,6 +8,7 @@ export default {
         './storage/framework/views/*.php',
         './resources/views/**/*.blade.php',
         './resources/js/**/*.vue',
+        './resources/js/**/*.js',
     ],
 
     theme: {