From 9cbc1bcbdb847b25502a09372bc8ef4a40cd363f Mon Sep 17 00:00:00 2001
From: nyavokevin <nyavoevin@gmail.com>
Date: Thu, 2 Apr 2026 12:07:11 +0300
Subject: [PATCH] feat(ui): add price lists and group-based quote flows

Add price list management across the API, store, services, routes,
navigation, and sales views.

Support quotes for either a client or a client group, including PDF
download and nullable client validation for group-based recipients.

Extend client groups to manage assigned clients directly from the form
and detail views, and refresh supplier, intervention, stock, and order
screens with updated interactions and layouts.
---
 .../Controllers/Api/ClientGroupController.php |   60 +-
 .../Controllers/Api/PriceListController.php   |  154 ++
 .../Api/PurchaseOrderController.php           |   64 +-
 .../Http/Controllers/Api/QuoteController.php  |   31 +
 .../Http/Requests/StoreClientGroupRequest.php |    6 +
 .../Http/Requests/StorePriceListRequest.php   |   43 +
 .../app/Http/Requests/StoreQuoteRequest.php   |   26 +-
 .../Requests/UpdateClientGroupRequest.php     |   11 +-
 .../Http/Requests/UpdatePriceListRequest.php  |   54 +
 .../Resources/Client/ClientGroupResource.php  |    4 +
 .../app/Http/Resources/PriceListResource.php  |   25 +
 thanasoft-back/app/Models/Client.php          |    5 +
 .../app/Providers/AppServiceProvider.php      |    4 +
 .../app/Repositories/PriceListRepository.php  |   15 +
 .../PriceListRepositoryInterface.php          |    9 +
 .../app/Repositories/ProductRepository.php    |   17 +-
 .../app/Repositories/QuoteRepository.php      |    4 +-
 ...4_02_082000_make_quote_client_nullable.php |   28 +
 .../resources/views/pdf/quote_pdf.blade.php   |   14 +-
 thanasoft-back/routes/api.php                 |    3 +
 .../AssignPractitionerModal.vue               |  268 +++
 .../InterventionDetailPresentation.vue        | 1056 +++++++++
 .../InterventionDetailSidebar.vue             |  230 ++
 .../refont_interview/InterventionDetails.vue  |  803 +++++++
 .../InterventionTabNavigation.vue             |   77 +
 .../ClientGroupDetailPresentation.vue         |   32 +
 .../ClientGroupFormPresentation.vue           |   33 +-
 .../Commande/CommandeDetailPresentation.vue   |   38 +-
 .../Commande/NewCommandePresentation.vue      |    2 +-
 .../InterventionDetailPresentation.vue        | 1764 ++++++++++++--
 .../InterventionDetailSidebar.vue             |  502 +++-
 .../Invoice/InvoiceDetailPresentation.vue     |    7 +-
 .../Quote/QuoteCreationPresentation.vue       |  121 +-
 .../Quote/QuoteDetailPresentation.vue         |   63 +-
 .../Stock/ProductDetailsPresentation.vue      |  605 +++--
 .../Stock/ReceptionDetailPresentation.vue     |    7 +-
 .../components/atoms/Product/FieldDisplay.vue |   20 +-
 .../components/atoms/Product/FieldInput.vue   |   35 +-
 .../components/atoms/Product/ProductBadge.vue |   45 +-
 .../atoms/Product/ProductStatCard.vue         |   16 +-
 .../molecules/ClientGroup/ClientGroupForm.vue |   74 +-
 .../molecules/Commande/NewCommandeForm.vue    | 1992 +++++++---------
 .../Interventions/interventionDetails.vue     |   50 +-
 .../molecules/Product/ProductInfoSection.vue  |   85 +-
 .../Product/ProductMovementsSection.vue       |   81 +-
 .../molecules/Product/ProductSidebar.vue      |   38 +-
 .../molecules/Product/ProductStockSection.vue |   67 +-
 .../Product/ProductSupplierSection.vue        |   48 +-
 .../molecules/Stock/NewReceptionForm.vue      |    2 +-
 .../molecules/Tables/Stock/ProductTable.vue   |   44 +-
 .../intervention/AssignPractitionerModal.vue  |  665 ++++--
 .../molecules/intervention/DataRow.vue        |   26 +
 .../molecules/intervention/InfoSection.vue    |   25 +
 .../InterventionTabNavigation.vue             |  187 +-
 .../molecules/intervention/StatusPill.vue     |   21 +
 .../src/examples/Sidenav/SidenavList.vue      |    6 +
 thanasoft-front/src/router/index.js           |    5 +
 thanasoft-front/src/services/clientGroup.ts   |    5 +
 thanasoft-front/src/services/priceList.ts     |   78 +
 thanasoft-front/src/services/product.ts       |    1 +
 thanasoft-front/src/services/quote.ts         |   17 +-
 .../src/stores/fournisseurStore.ts            |    1 +
 thanasoft-front/src/stores/quoteStore.ts      |   12 +
 .../src/views/pages/Ventes/PriceLists.vue     |   12 +
 thanasoft-front/tsconfig.tsbuildinfo          | 2030 +++++++++++++++++
 65 files changed, 9902 insertions(+), 1971 deletions(-)
 create mode 100644 thanasoft-back/app/Http/Controllers/Api/PriceListController.php
 create mode 100644 thanasoft-back/app/Http/Requests/StorePriceListRequest.php
 create mode 100644 thanasoft-back/app/Http/Requests/UpdatePriceListRequest.php
 create mode 100644 thanasoft-back/app/Http/Resources/PriceListResource.php
 create mode 100644 thanasoft-back/app/Repositories/PriceListRepository.php
 create mode 100644 thanasoft-back/app/Repositories/PriceListRepositoryInterface.php
 create mode 100644 thanasoft-back/database/migrations/2026_04_02_082000_make_quote_client_nullable.php
 create mode 100644 thanasoft-front/refont_interview/AssignPractitionerModal.vue
 create mode 100644 thanasoft-front/refont_interview/InterventionDetailPresentation.vue
 create mode 100644 thanasoft-front/refont_interview/InterventionDetailSidebar.vue
 create mode 100644 thanasoft-front/refont_interview/InterventionDetails.vue
 create mode 100644 thanasoft-front/refont_interview/InterventionTabNavigation.vue
 create mode 100644 thanasoft-front/src/components/molecules/intervention/DataRow.vue
 create mode 100644 thanasoft-front/src/components/molecules/intervention/InfoSection.vue
 create mode 100644 thanasoft-front/src/components/molecules/intervention/StatusPill.vue
 create mode 100644 thanasoft-front/src/services/priceList.ts
 create mode 100644 thanasoft-front/src/views/pages/Ventes/PriceLists.vue
 create mode 100644 thanasoft-front/tsconfig.tsbuildinfo

diff --git a/thanasoft-back/app/Http/Controllers/Api/ClientGroupController.php b/thanasoft-back/app/Http/Controllers/Api/ClientGroupController.php
index 14dde48..4eec3fe 100644
--- a/thanasoft-back/app/Http/Controllers/Api/ClientGroupController.php
+++ b/thanasoft-back/app/Http/Controllers/Api/ClientGroupController.php
@@ -13,7 +13,9 @@ use App\Models\Client;
 use App\Repositories\ClientGroupRepositoryInterface;
 use Illuminate\Http\JsonResponse;
 use Illuminate\Http\Resources\Json\AnonymousResourceCollection;
+use Illuminate\Support\Arr;
 use Illuminate\Support\Facades\Log;
+use Illuminate\Support\Facades\DB;
 
 class ClientGroupController extends Controller
 {
@@ -49,7 +51,22 @@ class ClientGroupController extends Controller
     public function store(StoreClientGroupRequest $request): ClientGroupResource|JsonResponse
     {
         try {
-            $clientGroup = $this->clientGroupRepository->create($request->validated());
+            $validated = $request->validated();
+
+            $clientGroup = DB::transaction(function () use ($validated) {
+                $clientIds = Arr::get($validated, 'client_ids', []);
+
+                $clientGroup = $this->clientGroupRepository->create(Arr::except($validated, ['client_ids']));
+
+                if (!empty($clientIds)) {
+                    Client::query()
+                        ->whereIn('id', $clientIds)
+                        ->update(['group_id' => $clientGroup->id]);
+                }
+
+                return $clientGroup->load(['clients'])->loadCount('clients');
+            });
+
             return new ClientGroupResource($clientGroup);
         } catch (\Exception $e) {
             Log::error('Error creating client group: ' . $e->getMessage(), [
@@ -79,6 +96,8 @@ class ClientGroupController extends Controller
                 ], 404);
             }
 
+            $clientGroup->load(['clients'])->loadCount('clients');
+
             return new ClientGroupResource($clientGroup);
         } catch (\Exception $e) {
             Log::error('Error fetching client group: ' . $e->getMessage(), [
@@ -100,7 +119,32 @@ class ClientGroupController extends Controller
     public function update(UpdateClientGroupRequest $request, string $id): ClientGroupResource|JsonResponse
     {
         try {
-            $updated = $this->clientGroupRepository->update($id, $request->validated());
+            $validated = $request->validated();
+
+            $updated = DB::transaction(function () use ($id, $validated) {
+                $updated = $this->clientGroupRepository->update($id, Arr::except($validated, ['client_ids']));
+
+                if (!$updated) {
+                    return false;
+                }
+
+                if (array_key_exists('client_ids', $validated)) {
+                    $clientIds = $validated['client_ids'] ?? [];
+
+                    Client::query()
+                        ->where('group_id', (int) $id)
+                        ->whereNotIn('id', $clientIds)
+                        ->update(['group_id' => null]);
+
+                    if (!empty($clientIds)) {
+                        Client::query()
+                            ->whereIn('id', $clientIds)
+                            ->update(['group_id' => (int) $id]);
+                    }
+                }
+
+                return true;
+            });
 
             if (!$updated) {
                 return response()->json([
@@ -109,6 +153,8 @@ class ClientGroupController extends Controller
             }
 
             $clientGroup = $this->clientGroupRepository->find($id);
+            $clientGroup?->load(['clients'])->loadCount('clients');
+
             return new ClientGroupResource($clientGroup);
         } catch (\Exception $e) {
             Log::error('Error updating client group: ' . $e->getMessage(), [
@@ -172,9 +218,13 @@ class ClientGroupController extends Controller
 
             $clientIds = $request->validated('client_ids');
 
-            $updatedCount = Client::query()
-                ->whereIn('id', $clientIds)
-                ->update(['group_id' => $clientGroup->id]);
+            $updatedCount = DB::transaction(function () use ($clientIds, $clientGroup) {
+                return Client::query()
+                    ->whereIn('id', $clientIds)
+                    ->update(['group_id' => $clientGroup->id]);
+            });
+
+            $clientGroup->load(['clients'])->loadCount('clients');
 
             return response()->json([
                 'message' => 'Clients assignés au groupe avec succès.',
diff --git a/thanasoft-back/app/Http/Controllers/Api/PriceListController.php b/thanasoft-back/app/Http/Controllers/Api/PriceListController.php
new file mode 100644
index 0000000..73c6f41
--- /dev/null
+++ b/thanasoft-back/app/Http/Controllers/Api/PriceListController.php
@@ -0,0 +1,154 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Http\Controllers\Api;
+
+use App\Http\Controllers\Controller;
+use App\Http\Requests\StorePriceListRequest;
+use App\Http\Requests\UpdatePriceListRequest;
+use App\Http\Resources\PriceListResource;
+use App\Repositories\PriceListRepositoryInterface;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Resources\Json\AnonymousResourceCollection;
+use Illuminate\Support\Facades\Log;
+
+class PriceListController extends Controller
+{
+    public function __construct(
+        private readonly PriceListRepositoryInterface $priceListRepository
+    ) {
+    }
+
+    /**
+     * Display a listing of price lists.
+     */
+    public function index(): AnonymousResourceCollection|JsonResponse
+    {
+        try {
+            $priceLists = $this->priceListRepository->all()->sortBy('name')->values();
+
+            return PriceListResource::collection($priceLists);
+        } catch (\Exception $e) {
+            Log::error('Error fetching price lists: ' . $e->getMessage(), [
+                'exception' => $e,
+            ]);
+
+            return response()->json([
+                'message' => 'Une erreur est survenue lors de la récupération des listes de prix.',
+                'error' => config('app.debug') ? $e->getMessage() : null,
+            ], 500);
+        }
+    }
+
+    /**
+     * Store a newly created price list.
+     */
+    public function store(StorePriceListRequest $request): PriceListResource|JsonResponse
+    {
+        try {
+            $priceList = $this->priceListRepository->create($request->validated());
+
+            return new PriceListResource($priceList);
+        } catch (\Exception $e) {
+            Log::error('Error creating price list: ' . $e->getMessage(), [
+                'exception' => $e,
+                'data' => $request->validated(),
+            ]);
+
+            return response()->json([
+                'message' => 'Une erreur est survenue lors de la création de la liste de prix.',
+                'error' => config('app.debug') ? $e->getMessage() : null,
+            ], 500);
+        }
+    }
+
+    /**
+     * Display the specified price list.
+     */
+    public function show(string $id): PriceListResource|JsonResponse
+    {
+        try {
+            $priceList = $this->priceListRepository->find($id);
+
+            if (! $priceList) {
+                return response()->json([
+                    'message' => 'Liste de prix non trouvée.',
+                ], 404);
+            }
+
+            return new PriceListResource($priceList);
+        } catch (\Exception $e) {
+            Log::error('Error fetching price list: ' . $e->getMessage(), [
+                'exception' => $e,
+                'price_list_id' => $id,
+            ]);
+
+            return response()->json([
+                'message' => 'Une erreur est survenue lors de la récupération de la liste de prix.',
+                'error' => config('app.debug') ? $e->getMessage() : null,
+            ], 500);
+        }
+    }
+
+    /**
+     * Update the specified price list.
+     */
+    public function update(UpdatePriceListRequest $request, string $id): PriceListResource|JsonResponse
+    {
+        try {
+            $updated = $this->priceListRepository->update($id, $request->validated());
+
+            if (! $updated) {
+                return response()->json([
+                    'message' => 'Liste de prix non trouvée ou échec de la mise à jour.',
+                ], 404);
+            }
+
+            $priceList = $this->priceListRepository->find($id);
+
+            return new PriceListResource($priceList);
+        } catch (\Exception $e) {
+            Log::error('Error updating price list: ' . $e->getMessage(), [
+                'exception' => $e,
+                'price_list_id' => $id,
+                'data' => $request->validated(),
+            ]);
+
+            return response()->json([
+                'message' => 'Une erreur est survenue lors de la mise à jour de la liste de prix.',
+                'error' => config('app.debug') ? $e->getMessage() : null,
+            ], 500);
+        }
+    }
+
+    /**
+     * Remove the specified price list.
+     */
+    public function destroy(string $id): JsonResponse
+    {
+        try {
+            $deleted = $this->priceListRepository->delete($id);
+
+            if (! $deleted) {
+                return response()->json([
+                    'message' => 'Liste de prix non trouvée ou échec de la suppression.',
+                ], 404);
+            }
+
+            return response()->json([
+                'message' => 'Liste de prix supprimée avec succès.',
+            ]);
+        } catch (\Exception $e) {
+            Log::error('Error deleting price list: ' . $e->getMessage(), [
+                'exception' => $e,
+                'price_list_id' => $id,
+            ]);
+
+            return response()->json([
+                'message' => 'Une erreur est survenue lors de la suppression de la liste de prix.',
+                'error' => config('app.debug') ? $e->getMessage() : null,
+            ], 500);
+        }
+    }
+}
diff --git a/thanasoft-back/app/Http/Controllers/Api/PurchaseOrderController.php b/thanasoft-back/app/Http/Controllers/Api/PurchaseOrderController.php
index dd7eb69..37ffa6d 100644
--- a/thanasoft-back/app/Http/Controllers/Api/PurchaseOrderController.php
+++ b/thanasoft-back/app/Http/Controllers/Api/PurchaseOrderController.php
@@ -21,7 +21,8 @@ class PurchaseOrderController extends Controller
     public function __construct(
         protected PurchaseOrderRepositoryInterface $purchaseOrderRepository,
         protected GoodsReceiptRepositoryInterface $goodsReceiptRepository
-    ) {
+        )
+    {
     }
 
     /**
@@ -32,7 +33,8 @@ class PurchaseOrderController extends Controller
         try {
             $purchaseOrders = $this->purchaseOrderRepository->all();
             return PurchaseOrderResource::collection($purchaseOrders);
-        } catch (\Exception $e) {
+        }
+        catch (\Exception $e) {
             Log::error('Error fetching purchase orders: ' . $e->getMessage(), [
                 'exception' => $e,
                 'trace' => $e->getTraceAsString(),
@@ -52,8 +54,15 @@ class PurchaseOrderController extends Controller
     {
         try {
             $purchaseOrder = $this->purchaseOrderRepository->create($request->validated());
+
+            // If PO is created directly as validated/delivered, ensure a draft goods receipt exists.
+            if ($purchaseOrder && in_array($purchaseOrder->status, ['confirmee', 'livree'], true)) {
+                $this->createGoodsReceiptFromValidatedPurchaseOrder($purchaseOrder);
+            }
+
             return new PurchaseOrderResource($purchaseOrder);
-        } catch (\Exception $e) {
+        }
+        catch (\Exception $e) {
             Log::error('Error creating purchase order: ' . $e->getMessage(), [
                 'exception' => $e,
                 'trace' => $e->getTraceAsString(),
@@ -82,7 +91,8 @@ class PurchaseOrderController extends Controller
             }
 
             return new PurchaseOrderResource($purchaseOrder);
-        } catch (\Exception $e) {
+        }
+        catch (\Exception $e) {
             Log::error('Error fetching purchase order: ' . $e->getMessage(), [
                 'exception' => $e,
                 'trace' => $e->getTraceAsString(),
@@ -102,9 +112,6 @@ class PurchaseOrderController extends Controller
     public function update(UpdatePurchaseOrderRequest $request, string $id): PurchaseOrderResource|JsonResponse
     {
         try {
-            $existingPurchaseOrder = $this->purchaseOrderRepository->find($id);
-            $previousStatus = $existingPurchaseOrder?->status;
-
             $updated = $this->purchaseOrderRepository->update($id, $request->validated());
 
             if (!$updated) {
@@ -115,17 +122,15 @@ class PurchaseOrderController extends Controller
 
             $purchaseOrder = $this->purchaseOrderRepository->find($id);
 
-            // On validation/delivery (status => confirmee|livree), create a draft goods receipt automatically.
-            if (
-                $purchaseOrder
-                && in_array($purchaseOrder->status, ['confirmee', 'livree'], true)
-                && !in_array($previousStatus, ['confirmee', 'livree'], true)
-            ) {
+            // Ensure draft goods receipt exists when PO is validated/delivered.
+            // Idempotent: guarded by purchase_order_id existence check in helper.
+            if ($purchaseOrder && in_array($purchaseOrder->status, ['confirmee', 'livree'], true)) {
                 $this->createGoodsReceiptFromValidatedPurchaseOrder($purchaseOrder);
             }
 
             return new PurchaseOrderResource($purchaseOrder);
-        } catch (\Exception $e) {
+        }
+        catch (\Exception $e) {
             Log::error('Error updating purchase order: ' . $e->getMessage(), [
                 'exception' => $e,
                 'trace' => $e->getTraceAsString(),
@@ -158,28 +163,28 @@ class PurchaseOrderController extends Controller
             throw new \RuntimeException('Aucun entrepôt disponible pour créer la réception de marchandise.');
         }
 
-        $receiptNumber = 'GR-' . now()->format('Ym') . '-' . str_pad((string) $purchaseOrder->id, 4, '0', STR_PAD_LEFT);
+        $receiptNumber = 'GR-' . now()->format('Ym') . '-' . str_pad((string)$purchaseOrder->id, 4, '0', STR_PAD_LEFT);
 
         $lines = collect($purchaseOrder->lines ?? [])
             ->filter(fn($line) => !empty($line->product_id))
             ->map(function ($line) {
-                return [
-                    'product_id' => (int) $line->product_id,
-                    'packaging_id' => null,
-                    'packages_qty_received' => null,
-                    'units_qty_received' => (float) $line->quantity,
-                    'qty_received_base' => (float) $line->quantity,
-                    'unit_price' => (float) $line->unit_price,
-                    'unit_price_per_package' => null,
-                    'tva_rate_id' => null,
-                ];
-            })
+            return [
+            'product_id' => (int)$line->product_id,
+            'packaging_id' => null,
+            'packages_qty_received' => null,
+            'units_qty_received' => (float)$line->quantity,
+            'qty_received_base' => (float)$line->quantity,
+            'unit_price' => (float)$line->unit_price,
+            'unit_price_per_package' => null,
+            'tva_rate_id' => null,
+            ];
+        })
             ->values()
             ->all();
 
         $this->goodsReceiptRepository->create([
             'purchase_order_id' => $purchaseOrder->id,
-            'warehouse_id' => (int) $warehouseId,
+            'warehouse_id' => (int)$warehouseId,
             'receipt_number' => $receiptNumber,
             'receipt_date' => now()->toDateString(),
             'status' => 'draft',
@@ -204,7 +209,8 @@ class PurchaseOrderController extends Controller
             return response()->json([
                 'message' => 'Commande fournisseur supprimée avec succès.',
             ], 200);
-        } catch (\Exception $e) {
+        }
+        catch (\Exception $e) {
             Log::error('Error deleting purchase order: ' . $e->getMessage(), [
                 'exception' => $e,
                 'trace' => $e->getTraceAsString(),
@@ -217,4 +223,4 @@ class PurchaseOrderController extends Controller
             ], 500);
         }
     }
-}
+}
\ No newline at end of file
diff --git a/thanasoft-back/app/Http/Controllers/Api/QuoteController.php b/thanasoft-back/app/Http/Controllers/Api/QuoteController.php
index 04c5fe2..c293ae1 100644
--- a/thanasoft-back/app/Http/Controllers/Api/QuoteController.php
+++ b/thanasoft-back/app/Http/Controllers/Api/QuoteController.php
@@ -17,6 +17,7 @@ use Illuminate\Http\Request;
 use Barryvdh\DomPDF\Facade\Pdf;
 use Illuminate\Support\Facades\Mail;
 use App\Mail\DocumentMail;
+use Symfony\Component\HttpFoundation\Response;
 
 class QuoteController extends Controller
 {
@@ -199,4 +200,34 @@ class QuoteController extends Controller
             ], 500);
         }
     }
+
+    /**
+     * Download the quote as a PDF.
+     */
+    public function downloadPdf(string $id): Response|JsonResponse
+    {
+        try {
+            $quote = Quote::with(['client', 'group', 'lines'])->find($id);
+
+            if (! $quote) {
+                return response()->json([
+                    'message' => 'Devis non trouvé.',
+                ], 404);
+            }
+
+            $pdf = Pdf::loadView('pdf.quote_pdf', ['quote' => $quote]);
+
+            return $pdf->download('Devis_' . $quote->reference . '.pdf');
+        } catch (\Exception $e) {
+            Log::error('Error downloading quote PDF: ' . $e->getMessage(), [
+                'exception' => $e,
+                'quote_id' => $id,
+            ]);
+
+            return response()->json([
+                'message' => 'Une erreur est survenue lors de la generation du PDF.',
+                'error' => config('app.debug') ? $e->getMessage() : null,
+            ], 500);
+        }
+    }
 }
diff --git a/thanasoft-back/app/Http/Requests/StoreClientGroupRequest.php b/thanasoft-back/app/Http/Requests/StoreClientGroupRequest.php
index 01bc264..18156ec 100644
--- a/thanasoft-back/app/Http/Requests/StoreClientGroupRequest.php
+++ b/thanasoft-back/app/Http/Requests/StoreClientGroupRequest.php
@@ -24,6 +24,8 @@ class StoreClientGroupRequest extends FormRequest
          return [
             'name' => 'required|string|max:191|unique:client_groups,name',
             'description' => 'nullable|string',
+            'client_ids' => 'sometimes|array',
+            'client_ids.*' => 'integer|distinct|exists:clients,id',
         ];
     }
 
@@ -35,6 +37,10 @@ class StoreClientGroupRequest extends FormRequest
             'name.max' => 'Le nom du groupe ne peut pas dépasser 191 caractères.',
             'name.unique' => 'Un groupe avec ce nom existe déjà.',
             'description.string' => 'La description doit être une chaîne de caractères.',
+            'client_ids.array' => 'La liste des clients doit être un tableau.',
+            'client_ids.*.integer' => 'Chaque ID client doit être un entier.',
+            'client_ids.*.distinct' => 'Un client ne peut pas être sélectionné plusieurs fois.',
+            'client_ids.*.exists' => 'Un ou plusieurs clients sélectionnés sont introuvables.',
         ];
     }
 }
diff --git a/thanasoft-back/app/Http/Requests/StorePriceListRequest.php b/thanasoft-back/app/Http/Requests/StorePriceListRequest.php
new file mode 100644
index 0000000..bf65d36
--- /dev/null
+++ b/thanasoft-back/app/Http/Requests/StorePriceListRequest.php
@@ -0,0 +1,43 @@
+<?php
+
+namespace App\Http\Requests;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class StorePriceListRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     */
+    public function authorize(): bool
+    {
+        return true;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array<string, \Illuminate\Contracts\Validation\ValidationRule|array<mixed>|string>
+     */
+    public function rules(): array
+    {
+        return [
+            'name' => 'required|string|max:191|unique:price_lists,name',
+            'valid_from' => 'nullable|date',
+            'valid_to' => 'nullable|date|after_or_equal:valid_from',
+            'is_default' => 'nullable|boolean',
+        ];
+    }
+
+    public function messages(): array
+    {
+        return [
+            'name.required' => 'Le nom de la liste de prix est obligatoire.',
+            'name.unique' => 'Une liste de prix avec ce nom existe déjà.',
+            'valid_from.date' => 'La date de début doit être une date valide.',
+            'valid_to.date' => 'La date de fin doit être une date valide.',
+            'valid_to.after_or_equal' => 'La date de fin doit être postérieure ou égale à la date de début.',
+            'is_default.boolean' => 'Le statut par défaut doit être vrai ou faux.',
+        ];
+    }
+}
diff --git a/thanasoft-back/app/Http/Requests/StoreQuoteRequest.php b/thanasoft-back/app/Http/Requests/StoreQuoteRequest.php
index 26e6c32..83cb3d2 100644
--- a/thanasoft-back/app/Http/Requests/StoreQuoteRequest.php
+++ b/thanasoft-back/app/Http/Requests/StoreQuoteRequest.php
@@ -22,7 +22,7 @@ class StoreQuoteRequest extends FormRequest
     public function rules(): array
     {
         return [
-            'client_id' => 'required|exists:clients,id',
+            'client_id' => 'nullable|exists:clients,id',
             'group_id' => 'nullable|exists:client_groups,id',
             'status' => 'required|in:brouillon,envoye,accepte,refuse,expire,annule',
             'quote_date' => 'required|date',
@@ -46,10 +46,32 @@ class StoreQuoteRequest extends FormRequest
         ];
     }
 
+    public function withValidator($validator): void
+    {
+        $validator->after(function ($validator) {
+            $hasClient = filled($this->input('client_id'));
+            $hasGroup = filled($this->input('group_id'));
+
+            if (! $hasClient && ! $hasGroup) {
+                $message = 'Un client ou un groupe de clients est obligatoire.';
+
+                $validator->errors()->add('client_id', $message);
+                $validator->errors()->add('group_id', $message);
+            }
+
+            if ($hasClient && $hasGroup) {
+                $message = 'Sélectionnez soit un client, soit un groupe de clients.';
+
+                $validator->errors()->add('client_id', $message);
+                $validator->errors()->add('group_id', $message);
+            }
+        });
+    }
+
     public function messages(): array
     {
         return [
-            'client_id.required' => 'Le client est obligatoire.',
+            'client_id.nullable' => 'Le client sélectionné est invalide.',
             'client_id.exists' => 'Le client sélectionné est invalide.',
             'group_id.exists' => 'Le groupe sélectionné est invalide.',
             'status.required' => 'Le statut est obligatoire.',
diff --git a/thanasoft-back/app/Http/Requests/UpdateClientGroupRequest.php b/thanasoft-back/app/Http/Requests/UpdateClientGroupRequest.php
index 18c31b0..0f16264 100644
--- a/thanasoft-back/app/Http/Requests/UpdateClientGroupRequest.php
+++ b/thanasoft-back/app/Http/Requests/UpdateClientGroupRequest.php
@@ -22,7 +22,10 @@ class UpdateClientGroupRequest extends FormRequest
      */
     public function rules(): array
     {
-        $clientGroupId = $this->route('client_group') ? $this->route('client_group')->id : $this->route('id');
+        $routeClientGroup = $this->route('client_group');
+        $clientGroupId = is_object($routeClientGroup)
+            ? $routeClientGroup->id
+            : ($routeClientGroup ?? $this->route('id'));
 
         return [
             'name' => [
@@ -32,6 +35,8 @@ class UpdateClientGroupRequest extends FormRequest
                 Rule::unique('client_groups', 'name')->ignore($clientGroupId)
             ],
             'description' => 'nullable|string',
+            'client_ids' => 'sometimes|array',
+            'client_ids.*' => 'integer|distinct|exists:clients,id',
         ];
     }
 
@@ -43,6 +48,10 @@ class UpdateClientGroupRequest extends FormRequest
             'name.max' => 'Le nom du groupe ne peut pas dépasser 191 caractères.',
             'name.unique' => 'Un groupe avec ce nom existe déjà.',
             'description.string' => 'La description doit être une chaîne de caractères.',
+            'client_ids.array' => 'La liste des clients doit être un tableau.',
+            'client_ids.*.integer' => 'Chaque ID client doit être un entier.',
+            'client_ids.*.distinct' => 'Un client ne peut pas être sélectionné plusieurs fois.',
+            'client_ids.*.exists' => 'Un ou plusieurs clients sélectionnés sont introuvables.',
         ];
     }
 }
diff --git a/thanasoft-back/app/Http/Requests/UpdatePriceListRequest.php b/thanasoft-back/app/Http/Requests/UpdatePriceListRequest.php
new file mode 100644
index 0000000..fd86bcb
--- /dev/null
+++ b/thanasoft-back/app/Http/Requests/UpdatePriceListRequest.php
@@ -0,0 +1,54 @@
+<?php
+
+namespace App\Http\Requests;
+
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Validation\Rule;
+
+class UpdatePriceListRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     */
+    public function authorize(): bool
+    {
+        return true;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array<string, \Illuminate\Contracts\Validation\ValidationRule|array<mixed>|string>
+     */
+    public function rules(): array
+    {
+        $routePriceList = $this->route('price_list');
+        $priceListId = is_object($routePriceList)
+            ? $routePriceList->id
+            : ($routePriceList ?? $this->route('id'));
+
+        return [
+            'name' => [
+                'required',
+                'string',
+                'max:191',
+                Rule::unique('price_lists', 'name')->ignore($priceListId),
+            ],
+            'valid_from' => 'nullable|date',
+            'valid_to' => 'nullable|date|after_or_equal:valid_from',
+            'is_default' => 'nullable|boolean',
+        ];
+    }
+
+    public function messages(): array
+    {
+        return [
+            'name.required' => 'Le nom de la liste de prix est obligatoire.',
+            'name.unique' => 'Une liste de prix avec ce nom existe déjà.',
+            'valid_from.date' => 'La date de début doit être une date valide.',
+            'valid_to.date' => 'La date de fin doit être une date valide.',
+            'valid_to.after_or_equal' => 'La date de fin doit être postérieure ou égale à la date de début.',
+            'is_default.boolean' => 'Le statut par défaut doit être vrai ou faux.',
+        ];
+    }
+}
diff --git a/thanasoft-back/app/Http/Resources/Client/ClientGroupResource.php b/thanasoft-back/app/Http/Resources/Client/ClientGroupResource.php
index c4e85cb..7b85a69 100644
--- a/thanasoft-back/app/Http/Resources/Client/ClientGroupResource.php
+++ b/thanasoft-back/app/Http/Resources/Client/ClientGroupResource.php
@@ -2,6 +2,7 @@
 
 namespace App\Http\Resources\Client;
 
+use App\Http\Resources\Client\ClientResource;
 use Illuminate\Http\Request;
 use Illuminate\Http\Resources\Json\JsonResource;
 
@@ -18,6 +19,9 @@ class ClientGroupResource extends JsonResource
             'id' => $this->id,
             'name' => $this->name,
             'description' => $this->description ?? null,
+            'clients_count' => $this->whenCounted('clients'),
+            'client_ids' => $this->whenLoaded('clients', fn () => $this->clients->pluck('id')->values()),
+            'clients' => ClientResource::collection($this->whenLoaded('clients')),
             'created_at' => $this->created_at?->format('Y-m-d H:i:s'),
             'updated_at' => $this->updated_at?->format('Y-m-d H:i:s'),
         ];
diff --git a/thanasoft-back/app/Http/Resources/PriceListResource.php b/thanasoft-back/app/Http/Resources/PriceListResource.php
new file mode 100644
index 0000000..aae8112
--- /dev/null
+++ b/thanasoft-back/app/Http/Resources/PriceListResource.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+
+class PriceListResource extends JsonResource
+{
+    /**
+     * Transform the resource into an array.
+     *
+     * @return array<string, mixed>
+     */
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => $this->id,
+            'name' => $this->name,
+            'valid_from' => $this->valid_from?->format('Y-m-d'),
+            'valid_to' => $this->valid_to?->format('Y-m-d'),
+            'is_default' => (bool) $this->is_default,
+        ];
+    }
+}
diff --git a/thanasoft-back/app/Models/Client.php b/thanasoft-back/app/Models/Client.php
index c3d4a0c..16e8b2e 100644
--- a/thanasoft-back/app/Models/Client.php
+++ b/thanasoft-back/app/Models/Client.php
@@ -61,6 +61,11 @@ class Client extends Model
         return $this->belongsTo(ClientCategory::class, 'client_category_id');
     }
 
+    public function group(): BelongsTo
+    {
+        return $this->belongsTo(ClientGroup::class, 'group_id');
+    }
+
     /**
      * Get the human-readable label for the client type.
      */
diff --git a/thanasoft-back/app/Providers/AppServiceProvider.php b/thanasoft-back/app/Providers/AppServiceProvider.php
index cf3bfee..1ac5a1c 100644
--- a/thanasoft-back/app/Providers/AppServiceProvider.php
+++ b/thanasoft-back/app/Providers/AppServiceProvider.php
@@ -24,6 +24,10 @@ class AppServiceProvider extends ServiceProvider
             return new \App\Repositories\ClientGroupRepository($app->make(\App\Models\ClientGroup::class));
         });
 
+        $this->app->bind(\App\Repositories\PriceListRepositoryInterface::class, function ($app) {
+            return new \App\Repositories\PriceListRepository($app->make(\App\Models\PriceList::class));
+        });
+
         $this->app->bind(\App\Repositories\ClientContactRepositoryInterface::class, function ($app) {
             return new \App\Repositories\ClientContactRepository($app->make(\App\Models\ClientContact::class));
         });
diff --git a/thanasoft-back/app/Repositories/PriceListRepository.php b/thanasoft-back/app/Repositories/PriceListRepository.php
new file mode 100644
index 0000000..e827e3d
--- /dev/null
+++ b/thanasoft-back/app/Repositories/PriceListRepository.php
@@ -0,0 +1,15 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Repositories;
+
+use App\Models\PriceList;
+
+class PriceListRepository extends BaseRepository implements PriceListRepositoryInterface
+{
+    public function __construct(PriceList $model)
+    {
+        parent::__construct($model);
+    }
+}
diff --git a/thanasoft-back/app/Repositories/PriceListRepositoryInterface.php b/thanasoft-back/app/Repositories/PriceListRepositoryInterface.php
new file mode 100644
index 0000000..3f221cb
--- /dev/null
+++ b/thanasoft-back/app/Repositories/PriceListRepositoryInterface.php
@@ -0,0 +1,9 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Repositories;
+
+interface PriceListRepositoryInterface extends BaseRepositoryInterface
+{
+}
diff --git a/thanasoft-back/app/Repositories/ProductRepository.php b/thanasoft-back/app/Repositories/ProductRepository.php
index 53fc3b5..8c6bd5b 100644
--- a/thanasoft-back/app/Repositories/ProductRepository.php
+++ b/thanasoft-back/app/Repositories/ProductRepository.php
@@ -25,8 +25,8 @@ class ProductRepository extends BaseRepository implements ProductRepositoryInter
         if (!empty($filters['search'])) {
             $query->where(function ($q) use ($filters) {
                 $q->where('nom', 'like', '%' . $filters['search'] . '%')
-                  ->orWhere('reference', 'like', '%' . $filters['search'] . '%')
-                  ->orWhere('fabricant', 'like', '%' . $filters['search'] . '%');
+                    ->orWhere('reference', 'like', '%' . $filters['search'] . '%')
+                    ->orWhere('fabricant', 'like', '%' . $filters['search'] . '%');
             });
         }
 
@@ -44,7 +44,7 @@ class ProductRepository extends BaseRepository implements ProductRepositoryInter
 
         if (isset($filters['expiring_soon'])) {
             $query->where('date_expiration', '<=', now()->addDays(30)->toDateString())
-                  ->where('date_expiration', '>=', now()->toDateString());
+                ->where('date_expiration', '>=', now()->toDateString());
         }
 
         if (isset($filters['is_intervention'])) {
@@ -82,11 +82,12 @@ class ProductRepository extends BaseRepository implements ProductRepositoryInter
 
         if ($exactMatch) {
             $query->where('nom', $name);
-        } else {
+        }
+        else {
             $query->where('nom', 'like', '%' . $name . '%');
         }
 
-        return $query->paginate($perPage);
+        return $query->get();
     }
 
     /**
@@ -147,8 +148,8 @@ class ProductRepository extends BaseRepository implements ProductRepositoryInter
     {
         return $this->model->newQuery()
             ->whereHas('category', function ($query) {
-                $query->where('intervention', true);
-            })
+            $query->where('intervention', true);
+        })
             ->first();
     }
-}
+}
\ No newline at end of file
diff --git a/thanasoft-back/app/Repositories/QuoteRepository.php b/thanasoft-back/app/Repositories/QuoteRepository.php
index ea50c01..c1544cc 100644
--- a/thanasoft-back/app/Repositories/QuoteRepository.php
+++ b/thanasoft-back/app/Repositories/QuoteRepository.php
@@ -24,7 +24,7 @@ class QuoteRepository extends BaseRepository implements QuoteRepositoryInterface
 
     public function all(array $columns = ['*']): \Illuminate\Support\Collection
     {
-        return $this->model->with(['client', 'lines.product'])->get($columns);
+        return $this->model->with(['client', 'group', 'lines.product'])->get($columns);
     }
 
     public function create(array $data): Quote
@@ -123,7 +123,7 @@ class QuoteRepository extends BaseRepository implements QuoteRepositoryInterface
 
     public function find(int|string $id, array $columns = ['*']): ?Quote
     {
-        return $this->model->with(['client', 'lines.product', 'history.user'])->find($id, $columns);
+        return $this->model->with(['client', 'group', 'lines.product', 'history.user'])->find($id, $columns);
     }
 
     private function recordHistory(int $quoteId, ?string $oldStatus, string $newStatus, ?string $comment = null): void
diff --git a/thanasoft-back/database/migrations/2026_04_02_082000_make_quote_client_nullable.php b/thanasoft-back/database/migrations/2026_04_02_082000_make_quote_client_nullable.php
new file mode 100644
index 0000000..184a7f6
--- /dev/null
+++ b/thanasoft-back/database/migrations/2026_04_02_082000_make_quote_client_nullable.php
@@ -0,0 +1,28 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('quotes', function (Blueprint $table) {
+            $table->unsignedBigInteger('client_id')->nullable()->change();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('quotes', function (Blueprint $table) {
+            $table->unsignedBigInteger('client_id')->nullable(false)->change();
+        });
+    }
+};
diff --git a/thanasoft-back/resources/views/pdf/quote_pdf.blade.php b/thanasoft-back/resources/views/pdf/quote_pdf.blade.php
index 6118313..98376fd 100644
--- a/thanasoft-back/resources/views/pdf/quote_pdf.blade.php
+++ b/thanasoft-back/resources/views/pdf/quote_pdf.blade.php
@@ -26,17 +26,19 @@
             <p>Solutions de gestion funéraire</p>
         </div>
         <div class="client-info">
-            <h3>CLIENT</h3>
-            <p><strong>{{ $quote->client->name }}</strong></p>
-            <p>{{ $quote->client->billing_address_line1 }}</p>
-            <p>{{ $quote->client->billing_postal_code }} {{ $quote->client->billing_city }}</p>
+            <h3>{{ $quote->client ? 'CLIENT' : 'GROUPE CLIENT' }}</h3>
+            <p><strong>{{ $quote->client?->name ?? $quote->group?->name ?? 'Destinataire inconnu' }}</strong></p>
+            @if($quote->client)
+                <p>{{ $quote->client->billing_address_line1 }}</p>
+                <p>{{ $quote->client->billing_postal_code }} {{ $quote->client->billing_city }}</p>
+            @endif
         </div>
         <div class="clear"></div>
     </div>
 
     <div class="title">Devis : {{ $quote->reference }}</div>
     <p>Date : {{ $quote->quote_date->format('d/m/Y') }}<br>
-       Valable jusqu'au : {{ $quote->valid_until->format('d/m/Y') }}</p>
+       Valable jusqu'au : {{ $quote->valid_until?->format('d/m/Y') ?? 'Non definie' }}</p>
 
     <table class="details-table">
         <thead>
@@ -51,7 +53,7 @@
             @foreach($quote->lines as $line)
             <tr>
                 <td>{{ $line->description }}</td>
-                <td style="text-align: right;">{{ $line->quantity }}</td>
+                <td style="text-align: right;">{{ $line->quantity ?? $line->units_qty ?? $line->qty_base ?? 0 }}</td>
                 <td style="text-align: right;">{{ number_format($line->unit_price, 2, ',', ' ') }} {{ $quote->currency }}</td>
                 <td style="text-align: right;">{{ number_format($line->total_ht, 2, ',', ' ') }} {{ $quote->currency }}</td>
             </tr>
diff --git a/thanasoft-back/routes/api.php b/thanasoft-back/routes/api.php
index f9af2fa..9ef1773 100644
--- a/thanasoft-back/routes/api.php
+++ b/thanasoft-back/routes/api.php
@@ -21,6 +21,7 @@ use App\Http\Controllers\Api\FileAttachmentController;
 use App\Http\Controllers\Api\QuoteController;
 use App\Http\Controllers\Api\ClientActivityTimelineController;
 use App\Http\Controllers\Api\PurchaseOrderController;
+use App\Http\Controllers\Api\PriceListController;
 use App\Http\Controllers\Api\TvaRateController;
 use App\Http\Controllers\Api\GoodsReceiptController;
 
@@ -57,6 +58,7 @@ Route::middleware('auth:sanctum')->group(function () {
     Route::apiResource('clients', ClientController::class);
     Route::post('client-groups/{id}/assign-clients', [ClientGroupController::class, 'assignClients']);
     Route::apiResource('client-groups', ClientGroupController::class);
+    Route::apiResource('price-lists', PriceListController::class);
 
     Route::apiResource('client-locations', ClientLocationController::class);
     Route::apiResource('client-locations', ClientLocationController::class);
@@ -77,6 +79,7 @@ Route::middleware('auth:sanctum')->group(function () {
 
     // Quote management
     Route::post('/quotes/{id}/send-email', [QuoteController::class, 'sendByEmail']);
+    Route::get('/quotes/{id}/download-pdf', [QuoteController::class, 'downloadPdf']);
     Route::apiResource('quotes', QuoteController::class);
 
     // Invoice management
diff --git a/thanasoft-front/refont_interview/AssignPractitionerModal.vue b/thanasoft-front/refont_interview/AssignPractitionerModal.vue
new file mode 100644
index 0000000..489a7ad
--- /dev/null
+++ b/thanasoft-front/refont_interview/AssignPractitionerModal.vue
@@ -0,0 +1,268 @@
+<template>
+  <!-- Backdrop -->
+  <Teleport to="body">
+    <Transition name="modal-fade">
+      <div v-if="isOpen" class="modal-backdrop" @mousedown.self="$emit('close')">
+        <div class="modal-box" role="dialog" aria-modal="true" aria-labelledby="modal-title">
+
+          <!-- Header -->
+          <div class="modal-header">
+            <div class="modal-title-wrap">
+              <div class="modal-icon">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
+                  <circle cx="8.5" cy="7" r="4"/>
+                  <line x1="20" y1="8" x2="20" y2="14"/>
+                  <line x1="23" y1="11" x2="17" y2="11"/>
+                </svg>
+              </div>
+              <div>
+                <h2 id="modal-title" class="modal-title">Assigner un praticien</h2>
+                <p class="modal-sub">Sélectionnez un praticien et son rôle</p>
+              </div>
+            </div>
+            <button class="close-btn" @click="$emit('close')">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+            </button>
+          </div>
+
+          <!-- Body -->
+          <div class="modal-body">
+            <!-- Practitioner ID -->
+            <div class="form-group">
+              <label class="form-label">Identifiant du praticien</label>
+              <input
+                v-model="form.practitionerId"
+                type="number"
+                class="form-input"
+                placeholder="ex: 42"
+                min="1"
+              />
+              <p class="form-hint">Entrez l'ID du praticien à assigner à cette intervention.</p>
+            </div>
+
+            <!-- Role -->
+            <div class="form-group">
+              <label class="form-label">Rôle</label>
+              <div class="role-grid">
+                <button
+                  class="role-option"
+                  :class="{ selected: form.role === 'principal' }"
+                  @click="form.role = 'principal'"
+                  type="button"
+                >
+                  <div class="role-radio">
+                    <div v-if="form.role === 'principal'" class="role-radio-dot"></div>
+                  </div>
+                  <div class="role-info">
+                    <div class="role-name">Principal</div>
+                    <div class="role-desc">Responsable de l'intervention</div>
+                  </div>
+                  <span class="role-chip chip-principal">Principal</span>
+                </button>
+
+                <button
+                  class="role-option"
+                  :class="{ selected: form.role === 'assistant' }"
+                  @click="form.role = 'assistant'"
+                  type="button"
+                >
+                  <div class="role-radio">
+                    <div v-if="form.role === 'assistant'" class="role-radio-dot"></div>
+                  </div>
+                  <div class="role-info">
+                    <div class="role-name">Assistant</div>
+                    <div class="role-desc">Rôle de soutien et assistance</div>
+                  </div>
+                  <span class="role-chip chip-assistant">Assistant</span>
+                </button>
+              </div>
+            </div>
+
+            <!-- Validation error -->
+            <Transition name="slide-error">
+              <div v-if="error" class="error-banner">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
+                {{ error }}
+              </div>
+            </Transition>
+          </div>
+
+          <!-- Footer -->
+          <div class="modal-footer">
+            <button class="btn-ghost" @click="$emit('close')">Annuler</button>
+            <button class="btn-primary" @click="handleSubmit">
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
+              Confirmer l'assignation
+            </button>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup>
+import { ref, watch, defineProps, defineEmits } from 'vue';
+
+const props = defineProps({
+  isOpen: { type: Boolean, default: false },
+});
+const emit = defineEmits(['close', 'assign']);
+
+const form = ref({ practitionerId: '', role: 'principal' });
+const error = ref('');
+
+// Reset form when modal opens
+watch(() => props.isOpen, open => {
+  if (open) { form.value = { practitionerId: '', role: 'principal' }; error.value = ''; }
+});
+
+const handleSubmit = () => {
+  error.value = '';
+  if (!form.value.practitionerId) {
+    error.value = 'Veuillez entrer un identifiant de praticien.';
+    return;
+  }
+  if (parseInt(form.value.practitionerId) <= 0) {
+    error.value = 'L\'identifiant doit être un nombre positif.';
+    return;
+  }
+  emit('assign', {
+    practitionerId: parseInt(form.value.practitionerId),
+    role: form.value.role,
+  });
+};
+</script>
+
+<style scoped>
+/* ── Tokens ── */
+.modal-backdrop {
+  --brand:    #4f46e5;
+  --brand-lt: #eef2ff;
+  --brand-dk: #3730a3;
+  --surface:  #ffffff;
+  --surface-2:#f8fafc;
+  --border:   #e2e8f0;
+  --text-1:   #0f172a;
+  --text-2:   #64748b;
+  --text-3:   #94a3b8;
+  --r-sm:     8px;
+  --r-md:     12px;
+  position: fixed; inset: 0;
+  background: rgba(15,23,42,.45);
+  backdrop-filter: blur(4px);
+  display: flex; align-items: center; justify-content: center;
+  z-index: 1000; padding: 20px;
+  font-family: 'Inter', system-ui, sans-serif;
+}
+
+/* ── Modal box ── */
+.modal-box {
+  background: var(--surface);
+  border-radius: 16px;
+  width: 100%; max-width: 460px;
+  box-shadow: 0 24px 64px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.05);
+  overflow: hidden;
+}
+
+/* Header */
+.modal-header {
+  display: flex; align-items: flex-start; justify-content: space-between;
+  padding: 22px 24px 18px; border-bottom: 1px solid var(--border);
+}
+.modal-title-wrap { display: flex; align-items: center; gap: 12px; }
+.modal-icon {
+  width: 38px; height: 38px; border-radius: 10px;
+  background: var(--brand-lt); color: var(--brand);
+  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
+}
+.modal-title { font-size: 16px; font-weight: 700; color: var(--text-1); margin: 0; }
+.modal-sub   { font-size: 12.5px; color: var(--text-3); margin: 2px 0 0; }
+
+.close-btn {
+  width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border);
+  background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center;
+  color: var(--text-3); transition: all .15s; flex-shrink: 0;
+}
+.close-btn:hover { background: var(--surface-2); color: var(--text-1); }
+
+/* Body */
+.modal-body { padding: 20px 24px; display: flex; flex-direction: column; gap: 18px; }
+
+.form-group { display: flex; flex-direction: column; gap: 6px; }
+.form-label { font-size: 12px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .5px; }
+.form-hint  { font-size: 11.5px; color: var(--text-3); margin: 2px 0 0; }
+
+.form-input {
+  padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--r-sm);
+  font-size: 13.5px; color: var(--text-1); background: var(--surface); outline: none;
+  transition: border-color .15s, box-shadow .15s; font-family: inherit; width: 100%;
+}
+.form-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79,70,229,.1); }
+
+/* Role grid */
+.role-grid { display: flex; flex-direction: column; gap: 8px; }
+.role-option {
+  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
+  border: 1.5px solid var(--border); border-radius: var(--r-sm);
+  background: transparent; cursor: pointer; text-align: left; width: 100%;
+  transition: all .15s;
+}
+.role-option:hover { border-color: #a5b4fc; background: var(--brand-lt); }
+.role-option.selected { border-color: var(--brand); background: var(--brand-lt); }
+
+.role-radio {
+  width: 17px; height: 17px; border-radius: 50%; border: 2px solid var(--border);
+  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
+  transition: border-color .15s;
+}
+.role-option.selected .role-radio { border-color: var(--brand); }
+.role-radio-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
+
+.role-info { flex: 1; }
+.role-name { font-size: 13.5px; font-weight: 600; color: var(--text-1); }
+.role-desc { font-size: 11.5px; color: var(--text-3); margin-top: 1px; }
+
+.role-chip { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 10.5px; font-weight: 600; }
+.chip-principal { background: #eef2ff; color: #4f46e5; }
+.chip-assistant  { background: #f0fdf4; color: #16a34a; }
+
+/* Error */
+.error-banner {
+  display: flex; align-items: center; gap: 8px;
+  padding: 10px 13px; background: #fef2f2; border: 1px solid #fecaca;
+  border-radius: var(--r-sm); font-size: 13px; color: #dc2626; font-weight: 500;
+}
+
+/* Footer */
+.modal-footer {
+  display: flex; gap: 10px; justify-content: flex-end;
+  padding: 16px 24px; background: var(--surface-2); border-top: 1px solid var(--border);
+}
+
+.btn-primary {
+  display: inline-flex; align-items: center; gap: 7px;
+  padding: 9px 18px; border-radius: var(--r-sm); border: none; cursor: pointer;
+  font-size: 13px; font-weight: 600; color: white; background: var(--brand);
+  transition: all .15s;
+}
+.btn-primary:hover { background: var(--brand-dk); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(79,70,229,.3); }
+
+.btn-ghost {
+  display: inline-flex; align-items: center; gap: 7px;
+  padding: 9px 16px; border-radius: var(--r-sm); border: 1px solid var(--border);
+  cursor: pointer; font-size: 13px; font-weight: 500; color: var(--text-2); background: transparent;
+  transition: all .15s;
+}
+.btn-ghost:hover { background: var(--border); color: var(--text-1); }
+
+/* ── Transitions ── */
+.modal-fade-enter-active, .modal-fade-leave-active { transition: opacity .2s ease; }
+.modal-fade-enter-active .modal-box, .modal-fade-leave-active .modal-box { transition: transform .2s ease, opacity .2s ease; }
+.modal-fade-enter-from, .modal-fade-leave-to { opacity: 0; }
+.modal-fade-enter-from .modal-box, .modal-fade-leave-to .modal-box { transform: scale(.96) translateY(8px); opacity: 0; }
+
+.slide-error-enter-active, .slide-error-leave-active { transition: all .2s ease; }
+.slide-error-enter-from, .slide-error-leave-to { opacity: 0; transform: translateY(-6px); }
+</style>
diff --git a/thanasoft-front/refont_interview/InterventionDetailPresentation.vue b/thanasoft-front/refont_interview/InterventionDetailPresentation.vue
new file mode 100644
index 0000000..69d1ce7
--- /dev/null
+++ b/thanasoft-front/refont_interview/InterventionDetailPresentation.vue
@@ -0,0 +1,1056 @@
+<template>
+  <div class="intervention-page">
+    <!-- Top Navigation Bar -->
+    <div class="page-topbar">
+      <router-link to="/interventions" class="back-btn">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+          <path d="M19 12H5M12 5l-7 7 7 7"/>
+        </svg>
+        Interventions
+      </router-link>
+
+      <div class="topbar-center" v-if="mappedIntervention">
+        <span class="topbar-id">#{{ mappedIntervention.id }}</span>
+        <StatusPill :status="mappedIntervention.status" />
+      </div>
+
+      <div class="topbar-actions">
+        <button class="action-btn secondary" @click="$emit('cancel')">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M18 6L6 18M6 6l12 12"/></svg>
+          Annuler
+        </button>
+      </div>
+    </div>
+
+    <!-- Loading -->
+    <div v-if="loading" class="fullpage-loading">
+      <div class="loading-orb"></div>
+      <p>Chargement de l'intervention…</p>
+    </div>
+
+    <!-- Error -->
+    <div v-else-if="error" class="fullpage-error">
+      <div class="error-icon">
+        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
+      </div>
+      <h3>Erreur de chargement</h3>
+      <p>{{ error }}</p>
+      <button class="action-btn primary" @click="$emit('cancel')">Retour</button>
+    </div>
+
+    <!-- Main Layout -->
+    <div v-else-if="mappedIntervention" class="page-layout">
+
+      <!-- LEFT SIDEBAR -->
+      <aside class="sidebar">
+        <!-- Hero Card -->
+        <div class="hero-card">
+          <div class="hero-avatar">
+            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+              <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/>
+              <path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
+            </svg>
+          </div>
+          <div class="hero-info">
+            <h2 class="hero-name">{{ mappedIntervention.defuntName }}</h2>
+            <p class="hero-type">{{ mappedIntervention.title }}</p>
+          </div>
+          <StatusPill :status="mappedIntervention.status" large />
+        </div>
+
+        <!-- Quick Stats -->
+        <div class="quick-stats">
+          <div class="stat-item">
+            <div class="stat-icon date-icon">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
+            </div>
+            <div>
+              <div class="stat-label">Date</div>
+              <div class="stat-value">{{ mappedIntervention.date }}</div>
+            </div>
+          </div>
+          <div class="stat-item">
+            <div class="stat-icon loc-icon">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
+            </div>
+            <div>
+              <div class="stat-label">Lieu</div>
+              <div class="stat-value">{{ mappedIntervention.lieux }}</div>
+            </div>
+          </div>
+          <div class="stat-item">
+            <div class="stat-icon dur-icon">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+            </div>
+            <div>
+              <div class="stat-label">Durée</div>
+              <div class="stat-value">{{ mappedIntervention.duree }}</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Tab Navigation -->
+        <nav class="sidebar-nav">
+          <button
+            v-for="tab in tabs"
+            :key="tab.id"
+            class="nav-item"
+            :class="{ active: activeTab === tab.id }"
+            @click="$emit('change-tab', tab.id)"
+          >
+            <span class="nav-icon" v-html="tab.icon"></span>
+            <span class="nav-label">{{ tab.label }}</span>
+            <span v-if="tab.badge" class="nav-badge">{{ tab.badge }}</span>
+          </button>
+        </nav>
+
+        <!-- Assign Button -->
+        <button class="assign-btn" @click="$emit('assign-practitioner')">
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="8.5" cy="7" r="4"/><line x1="20" y1="8" x2="20" y2="14"/><line x1="23" y1="11" x2="17" y2="11"/></svg>
+          Assigner un praticien
+        </button>
+      </aside>
+
+      <!-- MAIN CONTENT -->
+      <main class="main-content">
+
+        <!-- ── OVERVIEW TAB ── -->
+        <div v-if="activeTab === 'overview'" class="tab-content">
+          <div class="section-header">
+            <h3>Vue d'ensemble</h3>
+          </div>
+          <div class="info-grid">
+            <InfoSection title="Informations générales" icon-color="#6366f1">
+              <template #icon>
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M6 20v-2a6 6 0 0 1 12 0v2"/></svg>
+              </template>
+              <DataRow label="Nom du défunt" :value="mappedIntervention.defuntName" />
+              <DataRow label="Date prévue" :value="mappedIntervention.date" />
+              <DataRow label="Lieu" :value="mappedIntervention.lieux" />
+              <DataRow label="Durée" :value="mappedIntervention.duree" />
+            </InfoSection>
+
+            <InfoSection title="Contact & Communication" icon-color="#10b981">
+              <template #icon>
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 13a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 9.91a16 16 0 0 0 6.16 6.16l.91-.91a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 17z"/></svg>
+              </template>
+              <DataRow label="Contact familial" :value="mappedIntervention.contactFamilial" />
+              <DataRow label="Coordonnées" :value="mappedIntervention.coordonneesContact" />
+              <DataRow label="Type d'intervention" :value="mappedIntervention.title" />
+            </InfoSection>
+
+            <InfoSection title="Informations supplémentaires" icon-color="#f59e0b" class="full-width">
+              <template #icon>
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
+              </template>
+              <div class="row-2col">
+                <DataRow label="Personnes attendues" :value="String(mappedIntervention.nombrePersonnes || '-')" />
+                <DataRow label="Prestations supp." :value="mappedIntervention.prestationsSupplementaires" />
+              </div>
+            </InfoSection>
+
+            <InfoSection title="Description" icon-color="#8b5cf6" class="full-width">
+              <template #icon>
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
+              </template>
+              <p class="description-text">{{ mappedIntervention.description || 'Aucune description disponible.' }}</p>
+            </InfoSection>
+          </div>
+        </div>
+
+        <!-- ── DETAILS TAB ── -->
+        <div v-if="activeTab === 'details'" class="tab-content">
+          <div class="section-header">
+            <h3>Détails</h3>
+          </div>
+          <InterventionDetails
+            :intervention="mappedIntervention"
+            :loading="loading"
+            :error="error"
+            @update="$emit('update-intervention', $event)"
+            @cancel="$emit('cancel')"
+          />
+        </div>
+
+        <!-- ── TEAM TAB ── -->
+        <div v-if="activeTab === 'team'" class="tab-content">
+          <div class="section-header">
+            <h3>Équipe assignée</h3>
+            <button class="action-btn primary sm" @click="$emit('assign-practitioner')">
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+              Ajouter
+            </button>
+          </div>
+
+          <div v-if="mappedIntervention.practitioners?.length" class="team-grid">
+            <div
+              v-for="(p, i) in mappedIntervention.practitioners"
+              :key="i"
+              class="practitioner-card"
+            >
+              <div class="pract-avatar">{{ getInitials(p.name) }}</div>
+              <div class="pract-info">
+                <div class="pract-name">{{ p.name }}</div>
+                <div class="pract-role">
+                  <span class="role-badge" :class="p.role === 'principal' ? 'role-principal' : 'role-assistant'">
+                    {{ p.role === 'principal' ? 'Principal' : 'Assistant' }}
+                  </span>
+                </div>
+              </div>
+              <button class="unassign-btn" @click="$emit('unassign-practitioner', { practitionerId: p.id, practitionerName: p.name })">
+                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+              </button>
+            </div>
+          </div>
+
+          <div v-else class="empty-state">
+            <div class="empty-icon">
+              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="23" y1="11" x2="17" y2="11"/><line x1="20" y1="8" x2="20" y2="14"/></svg>
+            </div>
+            <p>Aucun praticien assigné</p>
+            <button class="action-btn primary sm" @click="$emit('assign-practitioner')">Assigner maintenant</button>
+          </div>
+        </div>
+
+        <!-- ── DOCUMENTS TAB ── -->
+        <div v-if="activeTab === 'documents'" class="tab-content">
+          <div class="section-header">
+            <h3>Documents</h3>
+          </div>
+          <DocumentManagement
+            :documents="documentAttachments"
+            :loading="documentStore.isLoading"
+            :error="documentStore.getError"
+            @files-selected="handleFilesSelected"
+            @upload-files="handleUploadFiles"
+            @delete-document="handleDeleteDocument"
+            @delete-documents="handleDeleteDocuments"
+            @update-document-label="handleUpdateDocumentLabel"
+            @retry="loadDocumentAttachments"
+          />
+        </div>
+
+        <!-- ── QUOTE TAB ── -->
+        <div v-if="activeTab === 'quote'" class="tab-content">
+          <div class="section-header">
+            <h3>Devis</h3>
+            <router-link
+              v-if="mappedIntervention.quote?.id"
+              :to="`/ventes/devis/${mappedIntervention.quote.id}`"
+              class="action-btn primary sm"
+            >Ouvrir le devis</router-link>
+          </div>
+
+          <div v-if="mappedIntervention.quote">
+            <div class="info-grid">
+              <InfoSection title="Informations du devis" icon-color="#3b82f6">
+                <template #icon><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg></template>
+                <DataRow label="Référence" :value="mappedIntervention.quote.reference" />
+                <DataRow label="Date" :value="mappedIntervention.quote.quote_date" />
+                <DataRow label="Validité" :value="mappedIntervention.quote.valid_until" />
+                <div class="data-row">
+                  <span class="data-label">Statut</span>
+                  <span class="quote-status-badge" :class="`qs-${getQuoteStatusColor(mappedIntervention.quote.status)}`">
+                    {{ getQuoteStatusLabel(mappedIntervention.quote.status) }}
+                  </span>
+                </div>
+              </InfoSection>
+
+              <InfoSection title="Montants" icon-color="#10b981">
+                <template #icon><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg></template>
+                <DataRow label="Total HT" :value="formatCurrency(mappedIntervention.quote.total_ht)" />
+                <DataRow label="Total TVA" :value="formatCurrency(mappedIntervention.quote.total_tva)" />
+                <DataRow label="Total TTC" :value="formatCurrency(mappedIntervention.quote.total_ttc)" bold />
+              </InfoSection>
+            </div>
+
+            <div class="quote-lines-section" v-if="mappedIntervention.quote.lines?.length">
+              <div class="quote-table-header">Lignes du devis</div>
+              <div class="quote-table-wrapper">
+                <table class="quote-table">
+                  <thead>
+                    <tr>
+                      <th>Description</th>
+                      <th class="text-center">Qté</th>
+                      <th class="text-right">Prix unitaire</th>
+                      <th class="text-right">Total HT</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr v-for="line in mappedIntervention.quote.lines" :key="line.id">
+                      <td>{{ line.description || '-' }}</td>
+                      <td class="text-center">{{ line.units_qty || 0 }}</td>
+                      <td class="text-right">{{ formatCurrency(line.unit_price) }}</td>
+                      <td class="text-right fw-semibold">{{ formatCurrency(line.total_ht) }}</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+
+          <div v-else class="empty-state">
+            <div class="empty-icon">
+              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
+            </div>
+            <p>Aucun devis associé à cette intervention</p>
+          </div>
+        </div>
+
+        <!-- ── HISTORY TAB ── -->
+        <div v-if="activeTab === 'history'" class="tab-content">
+          <div class="section-header"><h3>Historique</h3></div>
+          <div class="empty-state">
+            <div class="empty-icon">
+              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 .49-4.5"/></svg>
+            </div>
+            <p>Historique des modifications</p>
+            <span class="coming-soon">Fonctionnalité à venir</span>
+          </div>
+        </div>
+
+      </main>
+    </div>
+
+    <!-- Assign Modal -->
+    <AssignPractitionerModal
+      :is-open="isModalOpen"
+      @close="$emit('close-modal')"
+      @assign="$emit('assign-practitioner-confirmed', $event)"
+    />
+  </div>
+</template>
+
+<script setup>
+import { defineProps, defineEmits, ref, computed, watch, onMounted } from 'vue';
+import { RouterLink } from 'vue-router';
+import InterventionDetails from '@/components/molecules/Interventions/interventionDetails.vue';
+import DocumentManagement from '@/components/molecules/Interventions/DocumentManagement.vue';
+import AssignPractitionerModal from '@/components/molecules/intervention/AssignPractitionerModal.vue';
+import { useDocumentAttachmentStore } from '@/stores/documentAttachmentStore';
+
+// ── Sub-components (inline for self-containment) ──
+const StatusPill = {
+  props: { status: Object, large: Boolean },
+  template: `
+    <span class="status-pill" :class="['sp-' + (status?.color || 'secondary'), large ? 'sp-lg' : '']">
+      {{ status?.label || 'En attente' }}
+    </span>
+  `
+};
+
+const InfoSection = {
+  props: { title: String, iconColor: String },
+  template: `
+    <div class="info-section">
+      <div class="info-section-header" :style="{ '--accent': iconColor }">
+        <span class="info-section-icon"><slot name="icon" /></span>
+        <span class="info-section-title">{{ title }}</span>
+      </div>
+      <div class="info-section-body"><slot /></div>
+    </div>
+  `
+};
+
+const DataRow = {
+  props: { label: String, value: String, bold: Boolean },
+  template: `
+    <div class="data-row">
+      <span class="data-label">{{ label }}</span>
+      <span class="data-value" :class="{ 'fw-semibold': bold }">{{ value || '-' }}</span>
+    </div>
+  `
+};
+
+const props = defineProps({
+  intervention: { type: Object, required: true },
+  loading: { type: Boolean, default: false },
+  error: { type: String, default: null },
+  activeTab: { type: String, default: 'overview' },
+  practitioners: { type: Array, default: () => [] },
+  isModalOpen: { type: Boolean, default: false },
+});
+
+const emit = defineEmits([
+  'update-intervention', 'cancel', 'assign-practitioner',
+  'assign-practitioner-confirmed', 'change-tab', 'close-modal',
+  'unassign-practitioner',
+]);
+
+const documentStore = useDocumentAttachmentStore();
+const documentAttachments = computed(() =>
+  documentStore.getInterventionAttachments(props.intervention?.id || 0)
+);
+
+// ── Mapped intervention ──
+const mappedIntervention = computed(() => {
+  if (!props.intervention) return null;
+  const i = props.intervention;
+  return {
+    ...i,
+    defuntName: i.deceased
+      ? `${i.deceased.last_name || ''} ${i.deceased.first_name || ''}`.trim()
+      : `Personne ${i.deceased_id || 'inconnue'}`,
+    date: i.scheduled_at ? new Date(i.scheduled_at).toLocaleString('fr-FR') : 'Non définie',
+    lieux: i.location?.name || 'Lieu non défini',
+    duree: i.duration_min ? `${i.duration_min} min` : 'Non définie',
+    title: i.type ? getTypeLabel(i.type) : 'Type non défini',
+    contactFamilial: i.order_giver || 'Non renseigné',
+    description: i.notes || '',
+    nombrePersonnes: i.attachments_count || 0,
+    coordonneesContact: i.client ? (i.client.email || i.client.phone || 'Non disponible') : 'Non disponible',
+    prestationsSupplementaires: 'À définir',
+    practitioners: (i.practitioners || []).map(p => ({
+      id: p.id,
+      name: p.employee
+        ? `${p.employee.first_name || ''} ${p.employee.last_name || ''}`.trim()
+        : `${p.first_name || ''} ${p.last_name || ''}`.trim(),
+      role: p.pivot?.role || 'assistant',
+    })),
+    status: i.status
+      ? { label: getStatusLabel(i.status), color: getStatusColor(i.status) }
+      : { label: 'En attente', color: 'warning' },
+    quote: i.quote || null,
+  };
+});
+
+const tabs = computed(() => [
+  { id: 'overview',   label: 'Vue d\'ensemble', icon: eyeIcon },
+  { id: 'details',    label: 'Détails',          icon: listIcon },
+  { id: 'team',       label: 'Équipe',           icon: teamIcon, badge: mappedIntervention.value?.practitioners?.length || null },
+  { id: 'documents',  label: 'Documents',        icon: docIcon  },
+  { id: 'quote',      label: 'Devis',            icon: quoteIcon },
+  { id: 'history',    label: 'Historique',       icon: histIcon },
+]);
+
+// SVG icons as strings for tab nav
+const eyeIcon   = `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>`;
+const listIcon  = `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>`;
+const teamIcon  = `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>`;
+const docIcon   = `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>`;
+const quoteIcon = `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>`;
+const histIcon  = `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 .49-4.5"/></svg>`;
+
+// ── Helpers ──
+const getStatusLabel = s => ({ demande:'Demande', planifie:'Planifié', en_cours:'En cours', termine:'Terminé', annule:'Annulé' }[s] || s);
+const getStatusColor = s => ({ demande:'warning', planifie:'info', en_cours:'primary', termine:'success', annule:'danger' }[s] || 'secondary');
+const getTypeLabel   = t => ({ thanatopraxie:'Thanatopraxie', toilette_mortuaire:'Toilette mortuaire', exhumation:'Exhumation', retrait_pacemaker:'Retrait pacemaker', retrait_bijoux:'Retrait bijoux', autre:'Autre' }[t] || t);
+const getQuoteStatusLabel = s => ({ brouillon:'Brouillon', envoye:'Envoyé', accepte:'Accepté', refuse:'Refusé', expire:'Expiré' }[s] || s || 'Inconnu');
+const getQuoteStatusColor = s => ({ brouillon:'secondary', envoye:'info', accepte:'success', refuse:'danger', expire:'warning' }[s] || 'secondary');
+const formatCurrency  = v => new Intl.NumberFormat('fr-FR', { style:'currency', currency:'EUR', minimumFractionDigits:2 }).format(Number(v || 0));
+const getInitials     = name => name ? name.split(' ').map(w => w[0]).join('').toUpperCase().substring(0, 2) : '?';
+
+// ── Document handlers ──
+const handleFilesSelected   = files => console.log('Files selected:', files.length);
+const loadDocumentAttachments = async () => {
+  if (!props.intervention?.id) return;
+  try { await documentStore.fetchInterventionFiles(props.intervention.id); }
+  catch (e) { documentStore.clearError(); }
+};
+const handleUploadFiles = async files => {
+  if (!props.intervention?.id || !files.length) return;
+  try { await documentStore.uploadAndAttachFiles(files, 'App\\Models\\Intervention', props.intervention.id); }
+  catch (e) { documentStore.clearError(); }
+};
+const handleDeleteDocument = async id => {
+  try { await documentStore.detachFile(id); } catch (e) { documentStore.clearError(); }
+};
+const handleDeleteDocuments = async ids => {
+  try { await documentStore.detachMultipleFiles({ attachment_ids: ids }); } catch (e) { documentStore.clearError(); }
+};
+const handleUpdateDocumentLabel = async ({ id, label }) => {
+  try { await documentStore.updateAttachmentMetadata(id, { label }); } catch (e) { documentStore.clearError(); }
+};
+
+watch(() => props.activeTab, tab => {
+  if (tab === 'documents' && props.intervention?.id) loadDocumentAttachments();
+});
+watch(() => props.intervention?.id, id => {
+  if (id && props.activeTab === 'documents') loadDocumentAttachments();
+});
+onMounted(() => {
+  if (props.activeTab === 'documents' && props.intervention?.id) loadDocumentAttachments();
+});
+</script>
+
+<style scoped>
+/* ─── Design System ─────────────────────────────────────────────── */
+:root {
+  --brand: #4f46e5;
+  --brand-light: #eef2ff;
+  --brand-dark: #3730a3;
+  --surface: #ffffff;
+  --surface-2: #f8fafc;
+  --surface-3: #f1f5f9;
+  --border: #e2e8f0;
+  --border-light: #f1f5f9;
+  --text-primary: #0f172a;
+  --text-secondary: #64748b;
+  --text-muted: #94a3b8;
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
+  --shadow-md: 0 4px 16px rgba(0,0,0,.08);
+  --shadow-lg: 0 8px 32px rgba(0,0,0,.1);
+}
+
+/* ─── Page Shell ────────────────────────────────────────────────── */
+.intervention-page {
+  min-height: 100vh;
+  background: var(--surface-2);
+  font-family: 'Inter', system-ui, -apple-system, sans-serif;
+  color: var(--text-primary);
+  display: flex;
+  flex-direction: column;
+}
+
+/* ─── Top Bar ───────────────────────────────────────────────────── */
+.page-topbar {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 14px 28px;
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  box-shadow: var(--shadow-sm);
+}
+
+.back-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  text-decoration: none;
+  padding: 6px 12px;
+  border-radius: var(--radius-sm);
+  transition: background .15s, color .15s;
+}
+.back-btn:hover { background: var(--surface-3); color: var(--text-primary); }
+
+.topbar-center {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin: 0 auto;
+}
+.topbar-id {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  letter-spacing: .3px;
+}
+.topbar-actions { display: flex; gap: 8px; }
+
+/* ─── Layout ────────────────────────────────────────────────────── */
+.page-layout {
+  display: grid;
+  grid-template-columns: 280px 1fr;
+  gap: 0;
+  flex: 1;
+  min-height: 0;
+}
+
+/* ─── Sidebar ───────────────────────────────────────────────────── */
+.sidebar {
+  background: var(--surface);
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  position: sticky;
+  top: 57px;
+  height: calc(100vh - 57px);
+  overflow-y: auto;
+}
+
+.hero-card {
+  padding: 24px 20px 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  text-align: center;
+  border-bottom: 1px solid var(--border-light);
+}
+
+.hero-avatar {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  margin-bottom: 4px;
+  box-shadow: 0 4px 16px rgba(79,70,229,.3);
+}
+
+.hero-name {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0;
+  line-height: 1.3;
+}
+.hero-type {
+  font-size: 12px;
+  color: var(--text-secondary);
+  margin: 0;
+  font-weight: 500;
+}
+
+/* Quick Stats */
+.quick-stats {
+  padding: 16px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  border-bottom: 1px solid var(--border-light);
+}
+.stat-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+}
+.stat-icon {
+  width: 30px;
+  height: 30px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.date-icon { background: #eef2ff; color: #4f46e5; }
+.loc-icon  { background: #ecfdf5; color: #059669; }
+.dur-icon  { background: #fff7ed; color: #d97706; }
+
+.stat-label { font-size: 11px; color: var(--text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: .4px; }
+.stat-value { font-size: 13px; color: var(--text-primary); font-weight: 500; margin-top: 1px; }
+
+/* Sidebar Nav */
+.sidebar-nav {
+  padding: 12px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  flex: 1;
+}
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 9px 12px;
+  border-radius: var(--radius-sm);
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  width: 100%;
+  text-align: left;
+  font-size: 13.5px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  transition: all .15s;
+}
+.nav-item:hover { background: var(--surface-3); color: var(--text-primary); }
+.nav-item.active { background: var(--brand-light); color: var(--brand); font-weight: 600; }
+.nav-item.active .nav-icon { color: var(--brand); }
+.nav-icon { flex-shrink: 0; display: flex; color: var(--text-muted); transition: color .15s; }
+.nav-label { flex: 1; }
+.nav-badge {
+  min-width: 20px;
+  height: 20px;
+  padding: 0 6px;
+  background: var(--brand);
+  color: white;
+  border-radius: 10px;
+  font-size: 11px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.nav-item.active .nav-badge { background: var(--brand-dark); }
+
+/* Assign Button */
+.assign-btn {
+  margin: 0 12px 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  padding: 10px;
+  border: 1.5px dashed var(--border);
+  border-radius: var(--radius-sm);
+  background: transparent;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  transition: all .15s;
+}
+.assign-btn:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-light); }
+
+/* ─── Main Content ──────────────────────────────────────────────── */
+.main-content {
+  padding: 28px;
+  overflow-y: auto;
+}
+
+.tab-content {
+  animation: fadeIn .2s ease;
+}
+@keyframes fadeIn { from { opacity:0; transform: translateY(4px); } to { opacity:1; transform:translateY(0); } }
+
+.section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+.section-header h3 {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+/* ─── Info Grid ─────────────────────────────────────────────────── */
+.info-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+.info-grid .full-width { grid-column: 1 / -1; }
+
+/* Info Section Card */
+.info-section {
+  background: var(--surface);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border);
+  overflow: hidden;
+  box-shadow: var(--shadow-sm);
+}
+.info-section-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 14px 18px;
+  border-bottom: 1px solid var(--border-light);
+  background: var(--surface-2);
+}
+.info-section-icon {
+  width: 28px;
+  height: 28px;
+  border-radius: 7px;
+  background: var(--accent, #6366f1);
+  opacity: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  background: color-mix(in srgb, var(--accent, #6366f1) 15%, transparent);
+  color: var(--accent, #6366f1);
+}
+.info-section-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+  text-transform: uppercase;
+  letter-spacing: .5px;
+}
+.info-section-body {
+  padding: 6px 18px 14px;
+}
+
+/* Data Row */
+.data-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 9px 0;
+  border-bottom: 1px solid var(--border-light);
+  gap: 12px;
+}
+.data-row:last-child { border-bottom: none; }
+.data-label {
+  font-size: 12.5px;
+  color: var(--text-muted);
+  font-weight: 500;
+  flex-shrink: 0;
+}
+.data-value {
+  font-size: 13px;
+  color: var(--text-primary);
+  text-align: right;
+  font-weight: 400;
+}
+.fw-semibold { font-weight: 600; }
+
+.row-2col {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0 24px;
+}
+
+.description-text {
+  font-size: 13.5px;
+  color: var(--text-secondary);
+  line-height: 1.7;
+  margin: 4px 0 0;
+}
+
+/* ─── Status Pills ──────────────────────────────────────────────── */
+.status-pill {
+  display: inline-flex;
+  align-items: center;
+  padding: 3px 10px;
+  border-radius: 20px;
+  font-size: 11.5px;
+  font-weight: 600;
+  letter-spacing: .2px;
+}
+.status-pill.sp-lg { padding: 5px 14px; font-size: 12.5px; }
+.sp-success  { background: #dcfce7; color: #16a34a; }
+.sp-warning  { background: #fef9c3; color: #ca8a04; }
+.sp-danger   { background: #fee2e2; color: #dc2626; }
+.sp-info     { background: #dbeafe; color: #2563eb; }
+.sp-primary  { background: #eef2ff; color: #4f46e5; }
+.sp-secondary { background: #f1f5f9; color: #64748b; }
+
+/* ─── Buttons ───────────────────────────────────────────────────── */
+.action-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  border-radius: var(--radius-sm);
+  border: none;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 500;
+  text-decoration: none;
+  transition: all .15s;
+}
+.action-btn.primary {
+  background: var(--brand);
+  color: white;
+}
+.action-btn.primary:hover { background: var(--brand-dark); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(79,70,229,.3); }
+.action-btn.secondary {
+  background: var(--surface-3);
+  color: var(--text-secondary);
+}
+.action-btn.secondary:hover { background: var(--border); color: var(--text-primary); }
+.action-btn.sm { padding: 6px 12px; font-size: 12px; }
+
+/* ─── Team Grid ─────────────────────────────────────────────────── */
+.team-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 12px;
+}
+.practitioner-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 16px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  box-shadow: var(--shadow-sm);
+  transition: box-shadow .15s;
+}
+.practitioner-card:hover { box-shadow: var(--shadow-md); }
+.pract-avatar {
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #6366f1, #8b5cf6);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: 700;
+  flex-shrink: 0;
+}
+.pract-info { flex: 1; }
+.pract-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
+.pract-role { margin-top: 3px; }
+.role-badge {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 10px;
+  font-size: 11px;
+  font-weight: 600;
+}
+.role-principal { background: #eef2ff; color: #4f46e5; }
+.role-assistant  { background: #f0fdf4; color: #16a34a; }
+.unassign-btn {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  border: 1px solid var(--border);
+  background: var(--surface);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-muted);
+  transition: all .15s;
+}
+.unassign-btn:hover { background: #fee2e2; border-color: #fca5a5; color: #dc2626; }
+
+/* ─── Quote ─────────────────────────────────────────────────────── */
+.quote-status-badge {
+  display: inline-block;
+  padding: 2px 10px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 600;
+}
+.qs-success   { background: #dcfce7; color: #16a34a; }
+.qs-info      { background: #dbeafe; color: #2563eb; }
+.qs-warning   { background: #fef9c3; color: #ca8a04; }
+.qs-danger    { background: #fee2e2; color: #dc2626; }
+.qs-secondary { background: #f1f5f9; color: #64748b; }
+
+.quote-lines-section { margin-top: 20px; }
+.quote-table-header {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 10px;
+  text-transform: uppercase;
+  letter-spacing: .5px;
+}
+.quote-table-wrapper {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  box-shadow: var(--shadow-sm);
+}
+.quote-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+.quote-table thead { background: var(--surface-2); }
+.quote-table th {
+  padding: 11px 16px;
+  font-size: 11.5px;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: .4px;
+  border-bottom: 1px solid var(--border);
+  text-align: left;
+}
+.quote-table td {
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border-light);
+  color: var(--text-primary);
+}
+.quote-table tbody tr:last-child td { border-bottom: none; }
+.quote-table tbody tr:hover td { background: var(--surface-2); }
+.text-center { text-align: center; }
+.text-right  { text-align: right; }
+
+/* ─── Empty / Loading States ────────────────────────────────────── */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 64px 24px;
+  text-align: center;
+  gap: 12px;
+}
+.empty-icon {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  background: var(--surface-3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-muted);
+  margin-bottom: 4px;
+}
+.empty-state p { font-size: 14px; color: var(--text-secondary); margin: 0; font-weight: 500; }
+.coming-soon {
+  font-size: 11.5px;
+  color: var(--text-muted);
+  background: var(--surface-3);
+  padding: 3px 10px;
+  border-radius: 20px;
+}
+
+.fullpage-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  gap: 16px;
+  padding: 80px;
+}
+.loading-orb {
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  border: 3px solid var(--border);
+  border-top-color: var(--brand);
+  animation: spin .8s linear infinite;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+.fullpage-loading p { font-size: 14px; color: var(--text-secondary); }
+
+.fullpage-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  gap: 12px;
+  padding: 80px;
+  text-align: center;
+}
+.error-icon {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  background: #fee2e2;
+  color: #dc2626;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.fullpage-error h3 { font-size: 18px; font-weight: 700; color: var(--text-primary); margin: 0; }
+.fullpage-error p  { font-size: 14px; color: var(--text-secondary); margin: 0; }
+
+/* ─── Responsive ────────────────────────────────────────────────── */
+@media (max-width: 900px) {
+  .page-layout { grid-template-columns: 1fr; }
+  .sidebar {
+    position: static;
+    height: auto;
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+  }
+  .sidebar-nav { flex-direction: row; flex-wrap: wrap; padding: 8px; }
+  .nav-item { flex: 0 1 auto; }
+  .info-grid { grid-template-columns: 1fr; }
+  .info-grid .full-width { grid-column: 1; }
+  .main-content { padding: 16px; }
+}
+</style>
diff --git a/thanasoft-front/refont_interview/InterventionDetailSidebar.vue b/thanasoft-front/refont_interview/InterventionDetailSidebar.vue
new file mode 100644
index 0000000..71c3a75
--- /dev/null
+++ b/thanasoft-front/refont_interview/InterventionDetailSidebar.vue
@@ -0,0 +1,230 @@
+<template>
+  <div class="sidebar-wrap">
+    <!-- Hero Card -->
+    <div class="hero-card">
+      <div class="hero-avatar">
+        <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+          <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
+          <circle cx="9" cy="7" r="4"/>
+          <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
+          <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
+        </svg>
+      </div>
+      <h2 class="hero-name">{{ intervention.defuntName || 'Personne inconnue' }}</h2>
+      <p class="hero-type">{{ intervention.title || 'Type non défini' }}</p>
+      <div class="status-badge" :class="'sb-' + (intervention.status?.color || 'secondary')">
+        {{ intervention.status?.label || 'En attente' }}
+      </div>
+    </div>
+
+    <div class="divider"></div>
+
+    <!-- Quick Stats -->
+    <div class="quick-stats">
+      <div class="qs-row">
+        <div class="qs-icon" style="background:#eef2ff;color:#4f46e5">
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
+        </div>
+        <div class="qs-text">
+          <div class="qs-label">Date</div>
+          <div class="qs-value">{{ intervention.date || '—' }}</div>
+        </div>
+      </div>
+      <div class="qs-row">
+        <div class="qs-icon" style="background:#ecfdf5;color:#059669">
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
+        </div>
+        <div class="qs-text">
+          <div class="qs-label">Lieu</div>
+          <div class="qs-value">{{ intervention.lieux || '—' }}</div>
+        </div>
+      </div>
+      <div class="qs-row">
+        <div class="qs-icon" style="background:#fff7ed;color:#d97706">
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+        </div>
+        <div class="qs-text">
+          <div class="qs-label">Durée</div>
+          <div class="qs-value">{{ intervention.duree || '—' }}</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="divider"></div>
+
+    <!-- Team preview -->
+    <div v-if="intervention.members?.length" class="team-preview">
+      <div class="tp-label">Équipe</div>
+      <div class="tp-avatars">
+        <div
+          v-for="(m, i) in intervention.members.slice(0, 5)"
+          :key="i"
+          class="tp-avatar"
+          :title="m.name"
+          :style="{ zIndex: 10 - i }"
+        >
+          {{ getInitials(m.name) }}
+        </div>
+        <div v-if="intervention.members.length > 5" class="tp-avatar tp-more">
+          +{{ intervention.members.length - 5 }}
+        </div>
+      </div>
+    </div>
+
+    <div class="divider"></div>
+
+    <!-- Tab Navigation -->
+    <nav class="tab-nav">
+      <button
+        v-for="tab in tabs"
+        :key="tab.id"
+        class="tab-item"
+        :class="{ active: activeTab === tab.id }"
+        @click="$emit('change-tab', tab.id)"
+      >
+        <span class="tab-icon" v-html="tab.icon"></span>
+        <span class="tab-label">{{ tab.label }}</span>
+        <span v-if="tab.id === 'team' && teamCount > 0" class="tab-badge">{{ teamCount }}</span>
+        <span v-if="tab.id === 'documents' && documentsCount > 0" class="tab-badge">{{ documentsCount }}</span>
+      </button>
+    </nav>
+
+    <!-- Assign Button -->
+    <div class="assign-wrap">
+      <button class="assign-btn" @click="$emit('assign-practitioner')">
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+          <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
+          <circle cx="8.5" cy="7" r="4"/>
+          <line x1="20" y1="8" x2="20" y2="14"/>
+          <line x1="23" y1="11" x2="17" y2="11"/>
+        </svg>
+        Assigner un praticien
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+
+defineProps({
+  intervention: { type: Object, required: true },
+  activeTab:    { type: String, default: 'overview' },
+  practitioners:{ type: Array,  default: () => [] },
+  teamCount:    { type: Number, default: 0 },
+  documentsCount:{ type: Number, default: 0 },
+});
+defineEmits(['change-tab', 'assign-practitioner']);
+
+const getInitials = n => n ? n.split(' ').map(w => w[0]).join('').toUpperCase().substring(0,2) : '?';
+
+const tabs = [
+  { id:'overview',  label:"Vue d'ensemble", icon:`<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>` },
+  { id:'details',   label:'Détails',         icon:`<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>` },
+  { id:'team',      label:'Équipe',           icon:`<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>` },
+  { id:'documents', label:'Documents',        icon:`<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>` },
+  { id:'quote',     label:'Devis',            icon:`<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>` },
+  { id:'history',   label:'Historique',       icon:`<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 .49-4.5"/></svg>` },
+];
+</script>
+
+<style scoped>
+.sidebar-wrap {
+  --brand:    #4f46e5;
+  --brand-lt: #eef2ff;
+  --brand-dk: #3730a3;
+  --surface:  #ffffff;
+  --surface-2:#f8fafc;
+  --border:   #e2e8f0;
+  --border-lt:#f1f5f9;
+  --text-1:   #0f172a;
+  --text-2:   #64748b;
+  --text-3:   #94a3b8;
+  --r-sm:     8px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  overflow: hidden;
+  box-shadow: 0 1px 3px rgba(0,0,0,.06);
+  font-family: 'Inter', system-ui, sans-serif;
+}
+
+/* Hero */
+.hero-card {
+  padding: 24px 20px 18px;
+  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
+}
+.hero-avatar {
+  width: 58px; height: 58px; border-radius: 50%;
+  background: linear-gradient(135deg, #4f46e5, #7c3aed);
+  display: flex; align-items: center; justify-content: center;
+  color: white; margin-bottom: 2px;
+  box-shadow: 0 4px 14px rgba(79,70,229,.28);
+}
+.hero-name { font-size: 15px; font-weight: 700; color: var(--text-1); margin: 0; line-height: 1.3; }
+.hero-type { font-size: 12px; color: var(--text-2); margin: 0; font-weight: 500; }
+
+/* Status badge */
+.status-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 600; }
+.sb-success  { background:#dcfce7; color:#16a34a; }
+.sb-warning  { background:#fef9c3; color:#ca8a04; }
+.sb-danger   { background:#fee2e2; color:#dc2626; }
+.sb-info     { background:#dbeafe; color:#2563eb; }
+.sb-primary  { background:#eef2ff; color:#4f46e5; }
+.sb-secondary{ background:#f1f5f9; color:#64748b; }
+
+.divider { height: 1px; background: var(--border-lt); }
+
+/* Quick stats */
+.quick-stats { padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; }
+.qs-row   { display: flex; align-items: flex-start; gap: 10px; }
+.qs-icon  { width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+.qs-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-3); font-weight: 600; }
+.qs-value { font-size: 12.5px; color: var(--text-1); font-weight: 500; margin-top: 1px; }
+
+/* Team preview */
+.team-preview { padding: 12px 18px; display: flex; align-items: center; gap: 12px; }
+.tp-label { font-size: 11.5px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .4px; }
+.tp-avatars { display: flex; }
+.tp-avatar {
+  width: 30px; height: 30px; border-radius: 50%;
+  background: linear-gradient(135deg, #6366f1, #8b5cf6);
+  border: 2px solid var(--surface);
+  color: white; font-size: 10px; font-weight: 700;
+  display: flex; align-items: center; justify-content: center;
+  margin-left: -6px; cursor: default;
+  transition: transform .15s;
+}
+.tp-avatar:first-child { margin-left: 0; }
+.tp-avatar:hover { transform: translateY(-3px); }
+.tp-more { background: var(--surface-2); color: var(--text-2); font-size: 9px; }
+
+/* Tab nav */
+.tab-nav { padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
+.tab-item {
+  display: flex; align-items: center; gap: 9px; padding: 8px 11px;
+  border-radius: var(--r-sm); border: none; background: transparent; cursor: pointer;
+  width: 100%; text-align: left; font-size: 13px; font-weight: 500; color: var(--text-2);
+  transition: all .12s;
+}
+.tab-item:hover { background: var(--surface-2); color: var(--text-1); }
+.tab-item.active { background: var(--brand-lt); color: var(--brand); font-weight: 600; }
+.tab-icon { flex-shrink: 0; display: flex; color: var(--text-3); }
+.tab-item.active .tab-icon { color: var(--brand); }
+.tab-label { flex: 1; }
+.tab-badge {
+  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
+  background: var(--brand); color: white; font-size: 10px; font-weight: 700;
+  display: flex; align-items: center; justify-content: center;
+}
+
+/* Assign */
+.assign-wrap { padding: 0 10px 12px; }
+.assign-btn {
+  width: 100%; display: flex; align-items: center; justify-content: center; gap: 7px;
+  padding: 9px; border: 1.5px dashed var(--border); border-radius: var(--r-sm);
+  background: transparent; cursor: pointer; font-size: 12.5px; font-weight: 500; color: var(--text-2);
+  transition: all .15s;
+}
+.assign-btn:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-lt); }
+</style>
diff --git a/thanasoft-front/refont_interview/InterventionDetails.vue b/thanasoft-front/refont_interview/InterventionDetails.vue
new file mode 100644
index 0000000..87da79a
--- /dev/null
+++ b/thanasoft-front/refont_interview/InterventionDetails.vue
@@ -0,0 +1,803 @@
+<template>
+  <div class="intervention-page">
+
+    <!-- ── Top Navigation Bar ── -->
+    <div class="page-topbar">
+      <router-link to="/interventions" class="back-btn">
+        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M19 12H5M12 5l-7 7 7 7"/></svg>
+        Interventions
+      </router-link>
+
+      <div v-if="intervention" class="topbar-center">
+        <span class="topbar-id">#{{ intervention.id }}</span>
+        <span class="topbar-divider">·</span>
+        <span class="topbar-name">{{ getDeceasedName(intervention) }}</span>
+      </div>
+
+      <div class="topbar-right">
+        <div v-if="interventionStore.isLoading" class="topbar-loading">
+          <div class="mini-spinner"></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- ── Loading ── -->
+    <div v-if="interventionStore.isLoading && !intervention" class="fullpage-center">
+      <div class="loading-orb"></div>
+      <p class="loading-text">Chargement de l'intervention…</p>
+    </div>
+
+    <!-- ── Error ── -->
+    <div v-else-if="interventionStore.getError && !intervention" class="fullpage-center">
+      <div class="state-icon error-icon">
+        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
+      </div>
+      <h3 class="state-title">Erreur de chargement</h3>
+      <p class="state-desc">{{ interventionStore.getError }}</p>
+      <router-link to="/interventions" class="btn-primary">Retour à la liste</router-link>
+    </div>
+
+    <!-- ── Main Layout ── -->
+    <div v-else-if="intervention" class="page-layout">
+
+      <!-- LEFT SIDEBAR -->
+      <aside class="sidebar">
+        <!-- Hero -->
+        <div class="hero-card">
+          <div class="hero-avatar">
+            <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+              <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
+              <circle cx="9" cy="7" r="4"/>
+              <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
+              <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
+            </svg>
+          </div>
+          <h2 class="hero-name">{{ getDeceasedName(intervention) }}</h2>
+          <p class="hero-type">{{ getTypeLabel(intervention.type) }}</p>
+          <StatusBadge :status="intervention.status" />
+        </div>
+
+        <!-- Quick Stats -->
+        <div class="quick-stats">
+          <QuickStat color="#4f46e5" :label="'Date'" :value="formatDate(intervention.scheduled_at)">
+            <template #icon><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg></template>
+          </QuickStat>
+          <QuickStat color="#059669" :label="'Lieu'" :value="intervention.location?.name || 'Non défini'">
+            <template #icon><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg></template>
+          </QuickStat>
+          <QuickStat color="#d97706" :label="'Durée'" :value="intervention.duration_min ? intervention.duration_min + ' min' : 'Non définie'">
+            <template #icon><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></template>
+          </QuickStat>
+        </div>
+
+        <!-- Tab Nav -->
+        <nav class="tab-nav">
+          <button
+            v-for="tab in tabs"
+            :key="tab.id"
+            class="tab-item"
+            :class="{ active: activeTab === tab.id }"
+            @click="activeTab = tab.id"
+          >
+            <span class="tab-icon" v-html="tab.icon"></span>
+            <span class="tab-label">{{ tab.label }}</span>
+            <span v-if="tab.badge" class="tab-badge">{{ tab.badge }}</span>
+          </button>
+        </nav>
+
+        <!-- Assign Button -->
+        <button class="assign-cta" @click="openAssignModal">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="8.5" cy="7" r="4"/><line x1="20" y1="8" x2="20" y2="14"/><line x1="23" y1="11" x2="17" y2="11"/></svg>
+          Assigner un praticien
+        </button>
+      </aside>
+
+      <!-- MAIN CONTENT -->
+      <main class="main-content">
+
+        <!-- OVERVIEW -->
+        <section v-if="activeTab === 'overview'" class="tab-section">
+          <SectionHeader title="Vue d'ensemble" />
+          <div class="info-grid">
+            <InfoCard title="Informations générales" accent="#4f46e5">
+              <template #icon><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M6 20v-2a6 6 0 0 1 12 0v2"/></svg></template>
+              <DataRow label="Nom du défunt"   :value="getDeceasedName(intervention)" />
+              <DataRow label="Date prévue"     :value="formatDate(intervention.scheduled_at)" />
+              <DataRow label="Lieu"            :value="intervention.location?.name || 'Non défini'" />
+              <DataRow label="Durée"           :value="intervention.duration_min ? intervention.duration_min + ' min' : 'Non définie'" />
+            </InfoCard>
+
+            <InfoCard title="Contact & Communication" accent="#10b981">
+              <template #icon><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 13a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 9.91a16 16 0 0 0 6.16 6.16l.91-.91a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 17z"/></svg></template>
+              <DataRow label="Contact familial"  :value="intervention.order_giver || 'Non renseigné'" />
+              <DataRow label="Email / Tél."      :value="intervention.client ? (intervention.client.email || intervention.client.phone || '-') : '-'" />
+              <DataRow label="Type intervention" :value="getTypeLabel(intervention.type)" />
+            </InfoCard>
+
+            <InfoCard title="Notes & Description" accent="#8b5cf6" class="full-col">
+              <template #icon><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg></template>
+              <p class="notes-text">{{ intervention.notes || 'Aucune description disponible.' }}</p>
+            </InfoCard>
+          </div>
+        </section>
+
+        <!-- DETAILS -->
+        <section v-if="activeTab === 'details'" class="tab-section">
+          <SectionHeader title="Détails de l'intervention" />
+          <div class="card-wrap">
+            <!-- Editable form fields -->
+            <div class="edit-form">
+              <div class="form-row">
+                <div class="form-group">
+                  <label>Type d'intervention</label>
+                  <select v-model="editForm.type" class="form-select">
+                    <option value="thanatopraxie">Thanatopraxie</option>
+                    <option value="toilette_mortuaire">Toilette mortuaire</option>
+                    <option value="exhumation">Exhumation</option>
+                    <option value="retrait_pacemaker">Retrait pacemaker</option>
+                    <option value="retrait_bijoux">Retrait bijoux</option>
+                    <option value="autre">Autre</option>
+                  </select>
+                </div>
+                <div class="form-group">
+                  <label>Statut</label>
+                  <select v-model="editForm.status" class="form-select">
+                    <option value="demande">Demande</option>
+                    <option value="planifie">Planifié</option>
+                    <option value="en_cours">En cours</option>
+                    <option value="termine">Terminé</option>
+                    <option value="annule">Annulé</option>
+                  </select>
+                </div>
+              </div>
+              <div class="form-row">
+                <div class="form-group">
+                  <label>Date prévue</label>
+                  <input type="datetime-local" v-model="editForm.scheduled_at" class="form-input" />
+                </div>
+                <div class="form-group">
+                  <label>Durée (minutes)</label>
+                  <input type="number" v-model="editForm.duration_min" class="form-input" min="0" />
+                </div>
+              </div>
+              <div class="form-group">
+                <label>Contact familial (donneur d'ordre)</label>
+                <input type="text" v-model="editForm.order_giver" class="form-input" />
+              </div>
+              <div class="form-group">
+                <label>Notes</label>
+                <textarea v-model="editForm.notes" class="form-textarea" rows="4" placeholder="Ajouter des notes…"></textarea>
+              </div>
+              <div class="form-actions">
+                <button class="btn-ghost" @click="resetForm">Annuler</button>
+                <button class="btn-primary" :disabled="interventionStore.isLoading" @click="submitUpdate">
+                  <span v-if="interventionStore.isLoading" class="mini-spinner white"></span>
+                  Enregistrer les modifications
+                </button>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <!-- TEAM -->
+        <section v-if="activeTab === 'team'" class="tab-section">
+          <SectionHeader title="Équipe assignée">
+            <button class="btn-primary sm" @click="openAssignModal">
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+              Ajouter
+            </button>
+          </SectionHeader>
+
+          <div v-if="intervention.practitioners?.length" class="practitioner-grid">
+            <div v-for="(p, i) in intervention.practitioners" :key="i" class="practitioner-card">
+              <div class="pract-avatar">{{ getInitials(getPractName(p)) }}</div>
+              <div class="pract-info">
+                <div class="pract-name">{{ getPractName(p) }}</div>
+                <span class="role-chip" :class="p.pivot?.role === 'principal' ? 'chip-principal' : 'chip-assistant'">
+                  {{ p.pivot?.role === 'principal' ? 'Principal' : 'Assistant' }}
+                </span>
+              </div>
+              <button class="unassign-btn" title="Désassigner" @click="handleUnassign(p)">
+                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+              </button>
+            </div>
+          </div>
+
+          <EmptyState v-else icon="team" message="Aucun praticien assigné">
+            <button class="btn-primary sm" @click="openAssignModal">Assigner maintenant</button>
+          </EmptyState>
+        </section>
+
+        <!-- DOCUMENTS -->
+        <section v-if="activeTab === 'documents'" class="tab-section">
+          <SectionHeader title="Documents" />
+          <DocumentManagement
+            :documents="documentAttachments"
+            :loading="documentStore.isLoading"
+            :error="documentStore.getError"
+            @files-selected="() => {}"
+            @upload-files="handleUploadFiles"
+            @delete-document="handleDeleteDocument"
+            @delete-documents="handleDeleteDocuments"
+            @update-document-label="handleUpdateDocumentLabel"
+            @retry="loadDocuments"
+          />
+        </section>
+
+        <!-- QUOTE -->
+        <section v-if="activeTab === 'quote'" class="tab-section">
+          <SectionHeader title="Devis associé">
+            <router-link v-if="intervention.quote?.id" :to="`/ventes/devis/${intervention.quote.id}`" class="btn-primary sm">
+              Ouvrir le devis
+            </router-link>
+          </SectionHeader>
+
+          <div v-if="intervention.quote">
+            <div class="info-grid">
+              <InfoCard title="Informations" accent="#3b82f6">
+                <template #icon><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg></template>
+                <DataRow label="Référence" :value="intervention.quote.reference" />
+                <DataRow label="Date"      :value="intervention.quote.quote_date" />
+                <DataRow label="Validité"  :value="intervention.quote.valid_until" />
+                <div class="data-row">
+                  <span class="data-label">Statut</span>
+                  <span class="status-chip" :class="'sc-' + getQuoteColor(intervention.quote.status)">{{ getQuoteLabel(intervention.quote.status) }}</span>
+                </div>
+              </InfoCard>
+              <InfoCard title="Montants" accent="#10b981">
+                <template #icon><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg></template>
+                <DataRow label="Total HT"  :value="fmtCurrency(intervention.quote.total_ht)" />
+                <DataRow label="Total TVA" :value="fmtCurrency(intervention.quote.total_tva)" />
+                <DataRow label="Total TTC" :value="fmtCurrency(intervention.quote.total_ttc)" :bold="true" />
+              </InfoCard>
+            </div>
+
+            <div v-if="intervention.quote.lines?.length" class="quote-lines">
+              <div class="lines-title">Lignes du devis</div>
+              <div class="table-wrap">
+                <table class="data-table">
+                  <thead><tr><th>Description</th><th class="tc">Qté</th><th class="tr">PU HT</th><th class="tr">Total HT</th></tr></thead>
+                  <tbody>
+                    <tr v-for="l in intervention.quote.lines" :key="l.id">
+                      <td>{{ l.description || '-' }}</td>
+                      <td class="tc">{{ l.units_qty || 0 }}</td>
+                      <td class="tr">{{ fmtCurrency(l.unit_price) }}</td>
+                      <td class="tr fw6">{{ fmtCurrency(l.total_ht) }}</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+
+          <EmptyState v-else icon="quote" message="Aucun devis associé à cette intervention" />
+        </section>
+
+        <!-- HISTORY -->
+        <section v-if="activeTab === 'history'" class="tab-section">
+          <SectionHeader title="Historique" />
+          <EmptyState icon="history" message="Historique des modifications">
+            <span class="coming-soon-chip">Fonctionnalité à venir</span>
+          </EmptyState>
+        </section>
+
+      </main>
+    </div>
+
+    <!-- Assign Modal -->
+    <AssignPractitionerModal
+      :is-open="isModalOpen"
+      @close="closeAssignModal"
+      @assign="handleAssignPractitioner"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, watch, defineComponent, h } from 'vue';
+import { useRoute, RouterLink } from 'vue-router';
+import { useInterventionStore } from '@/stores/interventionStore';
+import { useNotificationStore } from '@/stores/notification';
+import { useDocumentAttachmentStore } from '@/stores/documentAttachmentStore';
+import DocumentManagement from '@/components/molecules/Interventions/DocumentManagement.vue';
+import AssignPractitionerModal from '@/components/molecules/intervention/AssignPractitionerModal.vue';
+
+// ── Inline sub-components ──────────────────────────────────────────────────
+const StatusBadge = {
+  props: { status: String },
+  setup(props) {
+    const map = { demande: ['warning','Demande'], planifie: ['info','Planifié'], en_cours: ['primary','En cours'], termine: ['success','Terminé'], annule: ['danger','Annulé'] };
+    const [color, label] = map[props.status] || ['secondary', props.status || 'En attente'];
+    return () => h('span', { class: `status-badge sb-${color}` }, label);
+  }
+};
+
+const QuickStat = {
+  props: { label: String, value: String, color: String },
+  template: `
+    <div class="qs-item">
+      <div class="qs-icon" :style="{ background: color + '18', color }"><slot name="icon"/></div>
+      <div><div class="qs-label">{{ label }}</div><div class="qs-value">{{ value || '-' }}</div></div>
+    </div>
+  `
+};
+
+const InfoCard = {
+  props: { title: String, accent: String },
+  template: `
+    <div class="info-card">
+      <div class="info-card-header" :style="{ '--a': accent }">
+        <span class="ic-icon"><slot name="icon"/></span>
+        <span class="ic-title">{{ title }}</span>
+      </div>
+      <div class="info-card-body"><slot/></div>
+    </div>
+  `
+};
+
+const DataRow = {
+  props: { label: String, value: String, bold: Boolean },
+  template: `
+    <div class="data-row">
+      <span class="data-label">{{ label }}</span>
+      <span class="data-value" :class="bold ? 'fw6' : ''">{{ value || '-' }}</span>
+    </div>
+  `
+};
+
+const SectionHeader = {
+  props: { title: String },
+  template: `<div class="section-header"><h3 class="section-title">{{ title }}</h3><slot/></div>`
+};
+
+const EmptyState = {
+  props: { icon: String, message: String },
+  setup(props, { slots }) {
+    const icons = {
+      team:    `<svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="23" y1="11" x2="17" y2="11"/><line x1="20" y1="8" x2="20" y2="14"/></svg>`,
+      quote:   `<svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>`,
+      history: `<svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 .49-4.5"/></svg>`,
+    };
+    return () => h('div', { class: 'empty-state' }, [
+      h('div', { class: 'empty-icon', innerHTML: icons[props.icon] || icons.team }),
+      h('p', { class: 'empty-msg' }, props.message),
+      slots.default?.(),
+    ]);
+  }
+};
+
+// ── Setup ──────────────────────────────────────────────────────────────────
+const route             = useRoute();
+const interventionStore = useInterventionStore();
+const notifStore        = useNotificationStore();
+const documentStore     = useDocumentAttachmentStore();
+
+const intervention  = ref(null);
+const activeTab     = ref('overview');
+const isModalOpen   = ref(false);
+const editForm      = ref({});
+
+const documentAttachments = computed(() =>
+  documentStore.getInterventionAttachments(intervention.value?.id || 0)
+);
+
+const tabs = computed(() => [
+  { id: 'overview',  label: "Vue d'ensemble", icon: `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>` },
+  { id: 'details',   label: 'Détails',         icon: `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>` },
+  { id: 'team',      label: 'Équipe',           icon: `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>`, badge: intervention.value?.practitioners?.length || null },
+  { id: 'documents', label: 'Documents',        icon: `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>` },
+  { id: 'quote',     label: 'Devis',            icon: `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>` },
+  { id: 'history',   label: 'Historique',       icon: `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 .49-4.5"/></svg>` },
+]);
+
+// ── Helpers ────────────────────────────────────────────────────────────────
+const getDeceasedName = i => i?.deceased
+  ? `${i.deceased.last_name || ''} ${i.deceased.first_name || ''}`.trim()
+  : `Personne ${i?.deceased_id || 'inconnue'}`;
+
+const formatDate = v => v ? new Date(v).toLocaleString('fr-FR') : 'Non définie';
+const getTypeLabel = t => ({ thanatopraxie:'Thanatopraxie', toilette_mortuaire:'Toilette mortuaire', exhumation:'Exhumation', retrait_pacemaker:'Retrait pacemaker', retrait_bijoux:'Retrait bijoux', autre:'Autre' }[t] || t || 'Type non défini');
+const getQuoteLabel = s => ({ brouillon:'Brouillon', envoye:'Envoyé', accepte:'Accepté', refuse:'Refusé', expire:'Expiré' }[s] || s || 'Inconnu');
+const getQuoteColor = s => ({ brouillon:'secondary', envoye:'info', accepte:'success', refuse:'danger', expire:'warning' }[s] || 'secondary');
+const fmtCurrency   = v => new Intl.NumberFormat('fr-FR', { style:'currency', currency:'EUR' }).format(Number(v || 0));
+const getPractName  = p => p.employee ? `${p.employee.first_name || ''} ${p.employee.last_name || ''}`.trim() : `${p.first_name || ''} ${p.last_name || ''}`.trim();
+const getInitials   = n => n ? n.split(' ').map(w => w[0]).join('').toUpperCase().substring(0,2) : '?';
+
+// ── Edit form ──────────────────────────────────────────────────────────────
+const resetForm = () => {
+  if (!intervention.value) return;
+  editForm.value = {
+    type: intervention.value.type || '',
+    status: intervention.value.status || '',
+    scheduled_at: intervention.value.scheduled_at ? intervention.value.scheduled_at.substring(0,16) : '',
+    duration_min: intervention.value.duration_min || '',
+    order_giver: intervention.value.order_giver || '',
+    notes: intervention.value.notes || '',
+  };
+};
+
+const submitUpdate = async () => {
+  try {
+    const result = await interventionStore.updateIntervention({ id: intervention.value.id, ...editForm.value });
+    intervention.value = result;
+    notifStore.updated('Intervention');
+  } catch (e) {
+    notifStore.error('Erreur', 'Impossible de mettre à jour');
+  }
+};
+
+// ── Data fetch ─────────────────────────────────────────────────────────────
+const fetchIntervention = async () => {
+  try {
+    const id = parseInt(route.params.id);
+    if (id) {
+      intervention.value = await interventionStore.fetchInterventionById(id);
+      resetForm();
+    }
+  } catch (e) {
+    notifStore.error('Erreur', 'Impossible de charger l\'intervention');
+  }
+};
+
+// ── Modal & assignment ─────────────────────────────────────────────────────
+const openAssignModal  = () => { isModalOpen.value = true; };
+const closeAssignModal = () => { isModalOpen.value = false; };
+
+const handleAssignPractitioner = async (data) => {
+  try {
+    const payload = data.role === 'principal'
+      ? { principal_practitioner_id: data.practitionerId }
+      : { assistant_practitioner_ids: [data.practitionerId] };
+    await interventionStore.assignPractitioner(intervention.value.id, payload);
+    await fetchIntervention();
+    notifStore.created('Praticien assigné');
+    closeAssignModal();
+  } catch (e) {
+    notifStore.error('Erreur', 'Impossible d\'assigner');
+  }
+};
+
+const handleUnassign = async (p) => {
+  try {
+    await interventionStore.unassignPractitioner(intervention.value.id, p.id);
+    await fetchIntervention();
+    notifStore.updated('Praticien désassigné');
+  } catch (e) {
+    notifStore.error('Erreur', 'Impossible de désassigner');
+  }
+};
+
+// ── Documents ──────────────────────────────────────────────────────────────
+const loadDocuments = async () => {
+  if (!intervention.value?.id) return;
+  try { await documentStore.fetchInterventionFiles(intervention.value.id); }
+  catch (e) { documentStore.clearError(); }
+};
+const handleUploadFiles = async files => {
+  if (!intervention.value?.id || !files.length) return;
+  try { await documentStore.uploadAndAttachFiles(files, 'App\\Models\\Intervention', intervention.value.id); }
+  catch { documentStore.clearError(); }
+};
+const handleDeleteDocument  = async id  => { try { await documentStore.detachFile(id); } catch { documentStore.clearError(); } };
+const handleDeleteDocuments = async ids => { try { await documentStore.detachMultipleFiles({ attachment_ids: ids }); } catch { documentStore.clearError(); } };
+const handleUpdateDocumentLabel = async ({ id, label }) => { try { await documentStore.updateAttachmentMetadata(id, { label }); } catch { documentStore.clearError(); } };
+
+// ── Watchers & lifecycle ───────────────────────────────────────────────────
+watch(() => interventionStore.currentIntervention, v => { if (v) intervention.value = v; }, { deep: true });
+watch(activeTab, tab => { if (tab === 'documents' && intervention.value?.id) loadDocuments(); });
+onMounted(fetchIntervention);
+</script>
+
+<style scoped>
+/* ── Design tokens ─────────────────────────────────────────────────────── */
+*, *::before, *::after { box-sizing: border-box; }
+
+.intervention-page {
+  --brand:       #4f46e5;
+  --brand-lt:    #eef2ff;
+  --brand-dk:    #3730a3;
+  --surface:     #ffffff;
+  --surface-2:   #f8fafc;
+  --surface-3:   #f1f5f9;
+  --border:      #e2e8f0;
+  --border-lt:   #f1f5f9;
+  --text-1:      #0f172a;
+  --text-2:      #64748b;
+  --text-3:      #94a3b8;
+  --r-sm:        8px;
+  --r-md:        12px;
+  --shadow-sm:   0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
+  --shadow-md:   0 4px 16px rgba(0,0,0,.08);
+  min-height: 100vh;
+  
+  color: var(--text-1);
+  display: flex;
+  flex-direction: column;
+}
+
+/* ── Top bar ───────────────────────────────────────────────────────────── */
+.page-topbar {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 0 24px;
+  height: 56px;
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  box-shadow: var(--shadow-sm);
+}
+.back-btn {
+  display: inline-flex; align-items: center; gap: 6px;
+  font-size: 13px; font-weight: 500; color: var(--text-2);
+  text-decoration: none; padding: 5px 10px; border-radius: var(--r-sm);
+  transition: background .15s, color .15s;
+}
+.back-btn:hover { background: var(--surface-3); color: var(--text-1); }
+.topbar-center { display: flex; align-items: center; gap: 8px; margin: 0 auto; }
+.topbar-id   { font-size: 13px; font-weight: 600; color: var(--text-2); }
+.topbar-divider { color: var(--text-3); }
+.topbar-name { font-size: 14px; font-weight: 600; color: var(--text-1); }
+.topbar-right { margin-left: auto; }
+.topbar-loading { display: flex; align-items: center; }
+
+/* ── Layout ────────────────────────────────────────────────────────────── */
+.page-layout {
+  display: grid;
+  grid-template-columns: 272px 1fr;
+  flex: 1;
+}
+
+/* ── Sidebar ───────────────────────────────────────────────────────────── */
+.sidebar {
+  background: var(--surface);
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  position: sticky;
+  top: 56px;
+  height: calc(100vh - 56px);
+  overflow-y: auto;
+}
+
+/* Hero */
+.hero-card {
+  padding: 24px 20px 18px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  text-align: center;
+  border-bottom: 1px solid var(--border-lt);
+}
+.hero-avatar {
+  width: 60px; height: 60px; border-radius: 50%;
+  background: linear-gradient(135deg, #4f46e5, #7c3aed);
+  display: flex; align-items: center; justify-content: center;
+  color: white; margin-bottom: 4px;
+  box-shadow: 0 4px 14px rgba(79,70,229,.3);
+}
+.hero-name  { font-size: 15px; font-weight: 700; color: var(--text-1); margin: 0; line-height: 1.3; }
+.hero-type  { font-size: 12px; color: var(--text-2); margin: 0; font-weight: 500; }
+
+/* Quick stats */
+.quick-stats {
+  padding: 14px 18px;
+  display: flex; flex-direction: column; gap: 10px;
+  border-bottom: 1px solid var(--border-lt);
+}
+.qs-item { display: flex; align-items: flex-start; gap: 10px; }
+.qs-icon  { width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+.qs-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-3); font-weight: 600; }
+.qs-value { font-size: 12.5px; color: var(--text-1); font-weight: 500; margin-top: 1px; }
+
+/* Tab nav */
+.tab-nav { padding: 10px 10px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
+.tab-item {
+  display: flex; align-items: center; gap: 9px; padding: 8px 11px;
+  border-radius: var(--r-sm); border: none; background: transparent; cursor: pointer;
+  width: 100%; text-align: left; font-size: 13.5px; font-weight: 500; color: var(--text-2);
+  transition: all .12s;
+}
+.tab-item:hover { background: var(--surface-3); color: var(--text-1); }
+.tab-item.active { background: var(--brand-lt); color: var(--brand); font-weight: 600; }
+.tab-icon { flex-shrink: 0; display: flex; color: var(--text-3); }
+.tab-item.active .tab-icon { color: var(--brand); }
+.tab-label { flex: 1; }
+.tab-badge {
+  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px;
+  background: var(--brand); color: white; font-size: 10.5px; font-weight: 700;
+  display: flex; align-items: center; justify-content: center;
+}
+.tab-item.active .tab-badge { background: var(--brand-dk); }
+
+/* Assign CTA */
+.assign-cta {
+  margin: 0 10px 14px; display: flex; align-items: center; justify-content: center; gap: 7px;
+  padding: 9px; border: 1.5px dashed var(--border); border-radius: var(--r-sm);
+  background: transparent; cursor: pointer; font-size: 12.5px; font-weight: 500; color: var(--text-2);
+  transition: all .15s;
+}
+.assign-cta:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-lt); }
+
+/* ── Main content ──────────────────────────────────────────────────────── */
+.main-content { padding: 24px 28px; overflow-y: auto; }
+.tab-section  { animation: fadeUp .2s ease; }
+@keyframes fadeUp { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
+
+.section-header {
+  display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px;
+}
+.section-title { font-size: 17px; font-weight: 700; color: var(--text-1); margin: 0; }
+
+/* ── Info grid ─────────────────────────────────────────────────────────── */
+.info-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 14px;
+}
+.full-col { grid-column: 1 / -1; }
+
+/* Info card */
+.info-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--r-md);
+  overflow: hidden;
+  box-shadow: var(--shadow-sm);
+}
+.info-card-header {
+  display: flex; align-items: center; gap: 9px;
+  padding: 12px 16px; border-bottom: 1px solid var(--border-lt);
+  background: var(--surface-2);
+}
+.ic-icon {
+  width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center;
+  background: color-mix(in srgb, var(--a, #4f46e5) 14%, transparent);
+  color: var(--a, #4f46e5);
+}
+.ic-title {
+  font-size: 11.5px; font-weight: 700; color: var(--text-1);
+  text-transform: uppercase; letter-spacing: .6px;
+}
+.info-card-body { padding: 4px 16px 12px; }
+
+/* Data row */
+.data-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border-lt); gap: 12px; }
+.data-row:last-child { border-bottom: none; }
+.data-label { font-size: 12px; color: var(--text-3); font-weight: 500; flex-shrink: 0; }
+.data-value { font-size: 13px; color: var(--text-1); text-align: right; }
+.fw6 { font-weight: 600; }
+
+.notes-text { font-size: 13.5px; color: var(--text-2); line-height: 1.7; margin: 8px 0 0; }
+
+/* ── Edit form ─────────────────────────────────────────────────────────── */
+.card-wrap {
+  background: var(--surface); border: 1px solid var(--border);
+  border-radius: var(--r-md); padding: 24px; box-shadow: var(--shadow-sm);
+}
+.edit-form { display: flex; flex-direction: column; gap: 18px; }
+.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
+.form-group { display: flex; flex-direction: column; gap: 6px; }
+.form-group label { font-size: 12px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: .4px; }
+.form-input, .form-select, .form-textarea {
+  padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--r-sm);
+  font-size: 13.5px; color: var(--text-1); background: var(--surface); outline: none;
+  transition: border-color .15s, box-shadow .15s; font-family: inherit;
+}
+.form-input:focus, .form-select:focus, .form-textarea:focus {
+  border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79,70,229,.1);
+}
+.form-textarea { resize: vertical; }
+.form-actions { display: flex; gap: 10px; justify-content: flex-end; padding-top: 4px; }
+
+/* ── Team ──────────────────────────────────────────────────────────────── */
+.practitioner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
+.practitioner-card {
+  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
+  padding: 14px 16px; display: flex; align-items: center; gap: 12px;
+  box-shadow: var(--shadow-sm); transition: box-shadow .15s;
+}
+.practitioner-card:hover { box-shadow: var(--shadow-md); }
+.pract-avatar {
+  width: 42px; height: 42px; border-radius: 50%;
+  background: linear-gradient(135deg, #6366f1, #8b5cf6);
+  color: white; display: flex; align-items: center; justify-content: center;
+  font-size: 13px; font-weight: 700; flex-shrink: 0;
+}
+.pract-info { flex: 1; }
+.pract-name { font-size: 13.5px; font-weight: 600; color: var(--text-1); }
+.role-chip { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 10.5px; font-weight: 600; margin-top: 3px; }
+.chip-principal { background: #eef2ff; color: #4f46e5; }
+.chip-assistant  { background: #f0fdf4; color: #16a34a; }
+.unassign-btn {
+  width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border);
+  background: var(--surface); cursor: pointer; display: flex; align-items: center; justify-content: center;
+  color: var(--text-3); transition: all .15s; flex-shrink: 0;
+}
+.unassign-btn:hover { background: #fee2e2; border-color: #fca5a5; color: #dc2626; }
+
+/* ── Status badge ──────────────────────────────────────────────────────── */
+.status-badge {
+  display: inline-flex; align-items: center; padding: 3px 10px;
+  border-radius: 20px; font-size: 11.5px; font-weight: 600; letter-spacing: .2px;
+}
+.sb-success  { background:#dcfce7; color:#16a34a; }
+.sb-warning  { background:#fef9c3; color:#ca8a04; }
+.sb-danger   { background:#fee2e2; color:#dc2626; }
+.sb-info     { background:#dbeafe; color:#2563eb; }
+.sb-primary  { background:#eef2ff; color:#4f46e5; }
+.sb-secondary{ background:#f1f5f9; color:#64748b; }
+
+/* Status chip (quote) */
+.status-chip { display:inline-block; padding:2px 9px; border-radius:10px; font-size:11.5px; font-weight:600; }
+.sc-success  { background:#dcfce7; color:#16a34a; }
+.sc-info     { background:#dbeafe; color:#2563eb; }
+.sc-warning  { background:#fef9c3; color:#ca8a04; }
+.sc-danger   { background:#fee2e2; color:#dc2626; }
+.sc-secondary{ background:#f1f5f9; color:#64748b; }
+
+/* ── Buttons ───────────────────────────────────────────────────────────── */
+.btn-primary {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 9px 18px; border-radius: var(--r-sm); border: none; cursor: pointer;
+  font-size: 13px; font-weight: 600; color: white; background: var(--brand);
+  text-decoration: none; transition: all .15s;
+}
+.btn-primary:hover { background: var(--brand-dk); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(79,70,229,.3); }
+.btn-primary.sm   { padding: 6px 13px; font-size: 12px; }
+.btn-primary:disabled { opacity: .6; cursor: not-allowed; transform: none; }
+.btn-ghost {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 9px 18px; border-radius: var(--r-sm); border: 1px solid var(--border);
+  cursor: pointer; font-size: 13px; font-weight: 500; color: var(--text-2); background: transparent;
+  transition: all .15s;
+}
+.btn-ghost:hover { background: var(--surface-3); color: var(--text-1); }
+
+/* ── Quote ─────────────────────────────────────────────────────────────── */
+.quote-lines   { margin-top: 18px; }
+.lines-title   { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-2); margin-bottom: 10px; }
+.table-wrap    { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm); }
+.data-table    { width: 100%; border-collapse: collapse; font-size: 13px; }
+.data-table thead { background: var(--surface-2); }
+.data-table th { padding: 10px 16px; font-size: 11px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .5px; border-bottom: 1px solid var(--border); text-align: left; }
+.data-table td { padding: 11px 16px; border-bottom: 1px solid var(--border-lt); color: var(--text-1); }
+.data-table tbody tr:last-child td { border-bottom: none; }
+.data-table tbody tr:hover td { background: var(--surface-2); }
+.tc { text-align: center; }
+.tr { text-align: right; }
+
+/* ── Empty state ───────────────────────────────────────────────────────── */
+.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 24px; text-align: center; gap: 10px; }
+.empty-icon  { width: 60px; height: 60px; border-radius: 50%; background: var(--surface-3); display: flex; align-items: center; justify-content: center; color: var(--text-3); margin-bottom: 4px; }
+.empty-msg   { font-size: 14px; color: var(--text-2); margin: 0; font-weight: 500; }
+.coming-soon-chip { font-size: 11px; color: var(--text-3); background: var(--surface-3); padding: 3px 10px; border-radius: 20px; }
+
+/* ── Loading / error ───────────────────────────────────────────────────── */
+.fullpage-center { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; gap: 14px; padding: 80px; text-align: center; }
+.loading-orb { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--brand); animation: spin .75s linear infinite; }
+@keyframes spin { to { transform: rotate(360deg); } }
+.loading-text { font-size: 14px; color: var(--text-2); margin: 0; }
+.state-icon { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
+.error-icon { background: #fee2e2; color: #dc2626; }
+.state-title { font-size: 18px; font-weight: 700; margin: 0; }
+.state-desc  { font-size: 14px; color: var(--text-2); margin: 0; }
+
+.mini-spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(79,70,229,.3); border-top-color: var(--brand); animation: spin .6s linear infinite; display: inline-block; }
+.mini-spinner.white { border-color: rgba(255,255,255,.3); border-top-color: white; }
+
+/* ── Responsive ────────────────────────────────────────────────────────── */
+@media (max-width: 860px) {
+  .page-layout { grid-template-columns: 1fr; }
+  .sidebar { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--border); }
+  .tab-nav { flex-direction: row; flex-wrap: wrap; }
+  .tab-item { flex: none; }
+  .info-grid { grid-template-columns: 1fr; }
+  .full-col  { grid-column: 1; }
+  .form-row  { grid-template-columns: 1fr; }
+  .main-content { padding: 16px; }
+}
+</style>
diff --git a/thanasoft-front/refont_interview/InterventionTabNavigation.vue b/thanasoft-front/refont_interview/InterventionTabNavigation.vue
new file mode 100644
index 0000000..27bc108
--- /dev/null
+++ b/thanasoft-front/refont_interview/InterventionTabNavigation.vue
@@ -0,0 +1,77 @@
+<template>
+  <nav class="tab-nav">
+    <button
+      v-for="tab in tabs"
+      :key="tab.id"
+      class="tab-item"
+      :class="{ active: activeTab === tab.id }"
+      @click="$emit('change-tab', tab.id)"
+    >
+      <span class="tab-icon" v-html="tab.icon"></span>
+      <span class="tab-label">{{ tab.label }}</span>
+      <span v-if="tab.id === 'team' && teamCount > 0" class="tab-badge">{{ teamCount }}</span>
+      <span v-if="tab.id === 'documents' && documentsCount > 0" class="tab-badge">{{ documentsCount }}</span>
+    </button>
+  </nav>
+</template>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+
+defineProps({
+  activeTab:     { type: String, required: true },
+  teamCount:     { type: Number, default: 0 },
+  documentsCount:{ type: Number, default: 0 },
+});
+defineEmits(['change-tab']);
+
+const tabs = [
+  { id:'overview',  label:"Vue d'ensemble", icon:`<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>` },
+  { id:'details',   label:'Détails',         icon:`<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>` },
+  { id:'team',      label:'Équipe',           icon:`<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>` },
+  { id:'documents', label:'Documents',        icon:`<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>` },
+  { id:'quote',     label:'Devis',            icon:`<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>` },
+  { id:'history',   label:'Historique',       icon:`<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 .49-4.5"/></svg>` },
+];
+</script>
+
+<style scoped>
+.tab-nav {
+  --brand:    #4f46e5;
+  --brand-lt: #eef2ff;
+  --brand-dk: #3730a3;
+  --surface-2:#f8fafc;
+  --border-lt:#f1f5f9;
+  --text-1:   #0f172a;
+  --text-2:   #64748b;
+  --text-3:   #94a3b8;
+  --r-sm:     8px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  font-family: 'Inter', system-ui, sans-serif;
+}
+
+.tab-item {
+  display: flex; align-items: center; gap: 9px;
+  padding: 8px 11px; border-radius: var(--r-sm);
+  border: none; background: transparent; cursor: pointer;
+  width: 100%; text-align: left;
+  font-size: 13.5px; font-weight: 500; color: var(--text-2);
+  transition: background .12s, color .12s;
+}
+.tab-item:hover { background: var(--surface-2); color: var(--text-1); }
+.tab-item.active { background: var(--brand-lt); color: var(--brand); font-weight: 600; }
+
+.tab-icon { flex-shrink: 0; display: flex; color: var(--text-3); }
+.tab-item.active .tab-icon { color: var(--brand); }
+.tab-label { flex: 1; }
+
+.tab-badge {
+  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px;
+  background: var(--brand); color: white;
+  font-size: 10.5px; font-weight: 700;
+  display: flex; align-items: center; justify-content: center;
+}
+.tab-item.active .tab-badge { background: var(--brand-dk); }
+</style>
diff --git a/thanasoft-front/src/components/Organism/ClientGroup/ClientGroupDetailPresentation.vue b/thanasoft-front/src/components/Organism/ClientGroup/ClientGroupDetailPresentation.vue
index eb2b7bc..a592ed3 100644
--- a/thanasoft-front/src/components/Organism/ClientGroup/ClientGroupDetailPresentation.vue
+++ b/thanasoft-front/src/components/Organism/ClientGroup/ClientGroupDetailPresentation.vue
@@ -57,6 +57,38 @@
                 </h6>
                 <p class="text-sm">{{ formatDate(clientGroup.updated_at) }}</p>
               </div>
+              <div class="col-md-12 mb-3">
+                <h6 class="text-sm text-uppercase text-muted">Clients du groupe</h6>
+                <p class="text-sm mb-2">
+                  {{ clientGroup.clients_count || clientGroup.clients?.length || 0 }}
+                  client(s)
+                </p>
+
+                <div
+                  v-if="clientGroup.clients && clientGroup.clients.length"
+                  class="d-flex flex-column gap-2"
+                >
+                  <div
+                    v-for="client in clientGroup.clients"
+                    :key="client.id"
+                    class="d-flex align-items-center justify-content-between p-3 border rounded bg-light"
+                  >
+                    <div class="d-flex flex-column">
+                      <span class="font-weight-bold text-sm">{{ client.name }}</span>
+                      <span class="text-xs text-muted">
+                        {{ client.email || "Pas d'email" }}
+                      </span>
+                      <span v-if="client.phone" class="text-xs text-muted">
+                        {{ client.phone }}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+
+                <p v-else class="text-sm text-muted mb-0">
+                  Aucun client assigné à ce groupe.
+                </p>
+              </div>
             </div>
           </div>
         </div>
diff --git a/thanasoft-front/src/components/Organism/ClientGroup/ClientGroupFormPresentation.vue b/thanasoft-front/src/components/Organism/ClientGroup/ClientGroupFormPresentation.vue
index 5c5d6b1..2c1d0e2 100644
--- a/thanasoft-front/src/components/Organism/ClientGroup/ClientGroupFormPresentation.vue
+++ b/thanasoft-front/src/components/Organism/ClientGroup/ClientGroupFormPresentation.vue
@@ -32,25 +32,38 @@ const router = useRouter();
 const clientGroupStore = useClientGroupStore();
 const notificationStore = useNotificationStore();
 
-const formData = ref({ name: "", description: "" });
+const formData = ref({
+  name: "",
+  description: "",
+  clients: [],
+});
 const loading = ref(false);
 const isEdit = ref(!!props.groupId);
 
 onMounted(async () => {
-  if (props.groupId) {
-    try {
-      const group = await clientGroupStore.fetchClientGroup(props.groupId);
+  try {
+    const group = props.groupId
+      ? await clientGroupStore.fetchClientGroup(props.groupId)
+      : null;
+
+    if (group) {
       formData.value = {
         name: group.name,
         description: group.description || "",
+        clients: group.clients || [],
       };
-    } catch (error) {
-      notificationStore.error(
-        "Erreur",
-        "Impossible de charger le groupe",
-        3000
-      );
+    }
+  } catch (error) {
+    notificationStore.error(
+      "Erreur",
+      "Impossible de charger le groupe",
+      3000
+    );
+
+    try {
       router.push("/clients/groups");
+    } catch (navigationError) {
+      console.error(navigationError);
     }
   }
 });
diff --git a/thanasoft-front/src/components/Organism/Commande/CommandeDetailPresentation.vue b/thanasoft-front/src/components/Organism/Commande/CommandeDetailPresentation.vue
index b20bae3..3a71d10 100644
--- a/thanasoft-front/src/components/Organism/Commande/CommandeDetailPresentation.vue
+++ b/thanasoft-front/src/components/Organism/Commande/CommandeDetailPresentation.vue
@@ -46,6 +46,26 @@
           {{ secondaryActionLabel }}
         </soft-button>
 
+        <soft-button
+          color="warning"
+          variant="outline"
+          class="btn-toolbar btn-sm"
+          @click="goToModifyCommande"
+        >
+          <i class="fas fa-pen me-2"></i>
+          Modifier
+        </soft-button>
+
+        <soft-button
+          color="primary"
+          variant="outline"
+          class="btn-toolbar btn-sm"
+          @click="goToAddWarehouse"
+        >
+          <i class="fas fa-warehouse me-2"></i>
+          Ajouter un entrepôt
+        </soft-button>
+
         <soft-button
           color="dark"
           variant="outline"
@@ -209,6 +229,7 @@
 
 <script setup>
 import { ref, defineProps, onMounted, computed } from "vue";
+import { useRouter } from "vue-router";
 import SoftButton from "@/components/SoftButton.vue";
 import { PurchaseOrderService } from "@/services/purchaseOrder";
 import { useNotificationStore } from "@/stores/notification";
@@ -221,6 +242,7 @@ const props = defineProps({
 });
 
 const notificationStore = useNotificationStore();
+const router = useRouter();
 const commande = ref(null);
 const loading = ref(true);
 const error = ref(null);
@@ -415,7 +437,12 @@ const changeStatus = async (newStatus) => {
     );
   } catch (err) {
     console.error("Error updating status:", err);
-    notificationStore.error("Erreur", "Échec de la mise à jour du statut.");
+    const backendMessage =
+      err?.response?.data?.error ||
+      err?.response?.data?.message ||
+      "Échec de la mise à jour du statut.";
+
+    notificationStore.error("Erreur", backendMessage);
   } finally {
     if (requestId === statusUpdateRequestId.value) {
       isUpdatingStatus.value = false;
@@ -444,6 +471,15 @@ const downloadPdf = () => {
   window.print();
 };
 
+const goToModifyCommande = () => {
+  if (!commande.value?.id) return;
+  router.push(`/fournisseurs/commandes/new?edit=${commande.value.id}`);
+};
+
+const goToAddWarehouse = () => {
+  router.push("/stock/warehouses/new");
+};
+
 onMounted(() => {
   fetchCommande();
 });
diff --git a/thanasoft-front/src/components/Organism/Commande/NewCommandePresentation.vue b/thanasoft-front/src/components/Organism/Commande/NewCommandePresentation.vue
index 52bebcc..cd538d8 100644
--- a/thanasoft-front/src/components/Organism/Commande/NewCommandePresentation.vue
+++ b/thanasoft-front/src/components/Organism/Commande/NewCommandePresentation.vue
@@ -5,7 +5,7 @@
         <div class="card">
           <div class="card-header pb-0 p-3">
             <div class="d-flex justify-content-between align-items-center">
-              <h6 class="mb-0">Créer une nouvelle commande</h6>
+              <h6 class="mb-0"></h6>
               <soft-button
                 color="secondary"
                 variant="outline"
diff --git a/thanasoft-front/src/components/Organism/Interventions/InterventionDetailPresentation.vue b/thanasoft-front/src/components/Organism/Interventions/InterventionDetailPresentation.vue
index 348c979..e8156bf 100644
--- a/thanasoft-front/src/components/Organism/Interventions/InterventionDetailPresentation.vue
+++ b/thanasoft-front/src/components/Organism/Interventions/InterventionDetailPresentation.vue
@@ -1,202 +1,1658 @@
 <template>
-  <intervention-detail-template>
-    <template #button-return>
-      <div class="col-12">
-        <router-link
-          to="/interventions"
-          class="btn btn-outline-secondary btn-sm mb-3"
+  <div class="intervention-page">
+    <!-- Top Navigation Bar -->
+    <div class="page-topbar">
+      <router-link to="/interventions" class="back-btn">
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2.5"
         >
-          <i class="fas fa-arrow-left me-2"></i>Retour aux interventions
-        </router-link>
+          <path d="M19 12H5M12 5l-7 7 7 7" />
+        </svg>
+        Interventions
+      </router-link>
+
+      <div v-if="mappedIntervention" class="topbar-center">
+        <span class="topbar-id">#{{ mappedIntervention.id }}</span>
+        <StatusPill :status="mappedIntervention.status" />
       </div>
-    </template>
-    <template #loading-state>
-      <div v-if="loading" class="text-center p-5">
-        <div class="spinner-border text-primary" role="status">
-          <span class="visually-hidden">Chargement...</span>
+
+      <div class="topbar-actions">
+        <button class="action-btn secondary" @click="$emit('cancel')">
+          <svg
+            width="14"
+            height="14"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2.5"
+          >
+            <path d="M18 6L6 18M6 6l12 12" />
+          </svg>
+          Annuler
+        </button>
+      </div>
+    </div>
+
+    <!-- Loading -->
+    <div v-if="loading" class="fullpage-loading">
+      <div class="loading-orb"></div>
+      <p>Chargement de l'intervention…</p>
+    </div>
+
+    <!-- Error -->
+    <div v-else-if="error" class="fullpage-error">
+      <div class="error-icon">
+        <svg
+          width="32"
+          height="32"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.5"
+        >
+          <circle cx="12" cy="12" r="10" />
+          <line x1="15" y1="9" x2="9" y2="15" />
+          <line x1="9" y1="9" x2="15" y2="15" />
+        </svg>
+      </div>
+      <h3>Erreur de chargement</h3>
+      <p>{{ error }}</p>
+      <button class="action-btn primary" @click="$emit('cancel')">
+        Retour
+      </button>
+    </div>
+
+    <!-- Main Layout -->
+    <div v-else-if="mappedIntervention" class="page-layout">
+      <!-- LEFT SIDEBAR -->
+      <aside class="sidebar">
+        <!-- Hero Card -->
+        <div class="hero-card">
+          <div class="hero-avatar">
+            <svg
+              width="28"
+              height="28"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.5"
+            >
+              <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+              <circle cx="9" cy="7" r="4" />
+              <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
+              <path d="M16 3.13a4 4 0 0 1 0 7.75" />
+            </svg>
+          </div>
+          <div class="hero-info">
+            <h2 class="hero-name">{{ mappedIntervention.defuntName }}</h2>
+            <p class="hero-type">{{ mappedIntervention.title }}</p>
+          </div>
+          <StatusPill :status="mappedIntervention.status" large />
         </div>
-      </div>
-    </template>
-    <template #intervention-detail-sidebar>
-      <div class="card">
-        <InterventionDetailSidebar
-          :intervention="mappedIntervention"
-          :active-tab="activeTab"
-          :practitioners="practitioners"
-          @change-tab="activeTab = $event"
-          @assign-practitioner="handleAssignPractitioner"
-        />
-      </div>
-    </template>
-    <template #intervention-detail-content>
-      <div class="card">
-        <InterventionDetailContent
-          :active-tab="activeTab"
-          :intervention="mappedIntervention"
-          :loading="loading"
-          :error="error"
-          @change-tab="activeTab = $event"
-          @update-intervention="handleUpdateIntervention"
-          @cancel="handleCancel"
-          @assign-practitioner="handleAssignPractitioner"
-        />
-      </div>
-    </template>
-  </intervention-detail-template>
+
+        <!-- Quick Stats -->
+        <div class="quick-stats">
+          <div class="stat-item">
+            <div class="stat-icon date-icon">
+              <svg
+                width="14"
+                height="14"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+              >
+                <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
+                <line x1="16" y1="2" x2="16" y2="6" />
+                <line x1="8" y1="2" x2="8" y2="6" />
+                <line x1="3" y1="10" x2="21" y2="10" />
+              </svg>
+            </div>
+            <div>
+              <div class="stat-label">Date</div>
+              <div class="stat-value">{{ mappedIntervention.date }}</div>
+            </div>
+          </div>
+          <div class="stat-item">
+            <div class="stat-icon loc-icon">
+              <svg
+                width="14"
+                height="14"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+              >
+                <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
+                <circle cx="12" cy="10" r="3" />
+              </svg>
+            </div>
+            <div>
+              <div class="stat-label">Lieu</div>
+              <div class="stat-value">{{ mappedIntervention.lieux }}</div>
+            </div>
+          </div>
+          <div class="stat-item">
+            <div class="stat-icon dur-icon">
+              <svg
+                width="14"
+                height="14"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+              >
+                <circle cx="12" cy="12" r="10" />
+                <polyline points="12 6 12 12 16 14" />
+              </svg>
+            </div>
+            <div>
+              <div class="stat-label">Durée</div>
+              <div class="stat-value">{{ mappedIntervention.duree }}</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Tab Navigation -->
+        <nav class="sidebar-nav">
+          <button
+            v-for="tab in tabs"
+            :key="tab.id"
+            class="nav-item"
+            :class="{ active: localActiveTab === tab.id }"
+            @click="changeTab(tab.id)"
+          >
+            <span class="nav-icon" v-html="tab.icon"></span>
+            <span class="nav-label">{{ tab.label }}</span>
+            <span v-if="tab.badge" class="nav-badge">{{ tab.badge }}</span>
+          </button>
+        </nav>
+
+        <!-- Assign Button -->
+        <button class="assign-btn" @click="$emit('assign-practitioner')">
+          <svg
+            width="15"
+            height="15"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2.5"
+          >
+            <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+            <circle cx="8.5" cy="7" r="4" />
+            <line x1="20" y1="8" x2="20" y2="14" />
+            <line x1="23" y1="11" x2="17" y2="11" />
+          </svg>
+          Assigner un praticien
+        </button>
+      </aside>
+
+      <!-- MAIN CONTENT -->
+      <main class="main-content">
+        <!-- ── OVERVIEW TAB ── -->
+        <div v-if="localActiveTab === 'overview'" class="tab-content">
+          <div class="section-header">
+            <h3>Vue d'ensemble</h3>
+          </div>
+          <div class="info-grid">
+            <InfoSection title="Informations générales" icon-color="#6366f1">
+              <template #icon>
+                <svg
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                >
+                  <circle cx="12" cy="8" r="4" />
+                  <path d="M6 20v-2a6 6 0 0 1 12 0v2" />
+                </svg>
+              </template>
+              <DataRow
+                label="Nom du défunt"
+                :value="mappedIntervention.defuntName"
+              />
+              <DataRow label="Date prévue" :value="mappedIntervention.date" />
+              <DataRow label="Lieu" :value="mappedIntervention.lieux" />
+              <DataRow label="Durée" :value="mappedIntervention.duree" />
+            </InfoSection>
+
+            <InfoSection title="Contact & Communication" icon-color="#10b981">
+              <template #icon>
+                <svg
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                >
+                  <path
+                    d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 13a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 9.91a16 16 0 0 0 6.16 6.16l.91-.91a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 17z"
+                  />
+                </svg>
+              </template>
+              <DataRow
+                label="Contact familial"
+                :value="mappedIntervention.contactFamilial"
+              />
+              <DataRow
+                label="Coordonnées"
+                :value="mappedIntervention.coordonneesContact"
+              />
+              <DataRow
+                label="Type d'intervention"
+                :value="mappedIntervention.title"
+              />
+            </InfoSection>
+
+            <InfoSection
+              title="Informations supplémentaires"
+              icon-color="#f59e0b"
+              class="full-width"
+            >
+              <template #icon>
+                <svg
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                >
+                  <circle cx="12" cy="12" r="10" />
+                  <line x1="12" y1="8" x2="12" y2="12" />
+                  <line x1="12" y1="16" x2="12.01" y2="16" />
+                </svg>
+              </template>
+              <div class="row-2col">
+                <DataRow
+                  label="Personnes attendues"
+                  :value="String(mappedIntervention.nombrePersonnes || '-')"
+                />
+                <DataRow
+                  label="Prestations supp."
+                  :value="mappedIntervention.prestationsSupplementaires"
+                />
+              </div>
+            </InfoSection>
+
+            <InfoSection
+              title="Description"
+              icon-color="#8b5cf6"
+              class="full-width"
+            >
+              <template #icon>
+                <svg
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                >
+                  <path
+                    d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"
+                  />
+                  <polyline points="14 2 14 8 20 8" />
+                  <line x1="16" y1="13" x2="8" y2="13" />
+                  <line x1="16" y1="17" x2="8" y2="17" />
+                  <polyline points="10 9 9 9 8 9" />
+                </svg>
+              </template>
+              <p class="description-text">
+                {{
+                  mappedIntervention.description ||
+                  "Aucune description disponible."
+                }}
+              </p>
+            </InfoSection>
+          </div>
+        </div>
+
+        <!-- ── DETAILS TAB ── -->
+        <div v-if="localActiveTab === 'details'" class="tab-content">
+          <div class="section-header">
+            <h3>Détails</h3>
+          </div>
+          <InterventionDetails
+            class="details-redesign"
+            :intervention="mappedIntervention"
+            :loading="loading"
+            :error="error"
+            @update="$emit('update-intervention', $event)"
+            @cancel="$emit('cancel')"
+          />
+        </div>
+
+        <!-- ── TEAM TAB ── -->
+        <div v-if="localActiveTab === 'team'" class="tab-content">
+          <div class="section-header">
+            <h3>Équipe assignée</h3>
+            <button
+              class="action-btn primary sm"
+              @click="$emit('assign-practitioner')"
+            >
+              <svg
+                width="13"
+                height="13"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2.5"
+              >
+                <line x1="12" y1="5" x2="12" y2="19" />
+                <line x1="5" y1="12" x2="19" y2="12" />
+              </svg>
+              Ajouter
+            </button>
+          </div>
+
+          <div
+            v-if="mappedIntervention.practitioners?.length"
+            class="team-grid"
+          >
+            <div
+              v-for="(p, i) in mappedIntervention.practitioners"
+              :key="i"
+              class="practitioner-card"
+            >
+              <div class="pract-avatar">{{ getInitials(p.name) }}</div>
+              <div class="pract-info">
+                <div class="pract-name">{{ p.name }}</div>
+                <div class="pract-role">
+                  <span
+                    class="role-badge"
+                    :class="
+                      p.role === 'principal'
+                        ? 'role-principal'
+                        : 'role-assistant'
+                    "
+                  >
+                    {{ p.role === "principal" ? "Principal" : "Assistant" }}
+                  </span>
+                </div>
+              </div>
+              <button
+                class="unassign-btn"
+                @click="
+                  $emit('unassign-practitioner', {
+                    practitionerId: p.id,
+                    practitionerName: p.name,
+                  })
+                "
+              >
+                <svg
+                  width="13"
+                  height="13"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2.5"
+                >
+                  <line x1="18" y1="6" x2="6" y2="18" />
+                  <line x1="6" y1="6" x2="18" y2="18" />
+                </svg>
+              </button>
+            </div>
+          </div>
+
+          <div v-else class="empty-state">
+            <div class="empty-icon">
+              <svg
+                width="32"
+                height="32"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.5"
+              >
+                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+                <circle cx="9" cy="7" r="4" />
+                <line x1="23" y1="11" x2="17" y2="11" />
+                <line x1="20" y1="8" x2="20" y2="14" />
+              </svg>
+            </div>
+            <p>Aucun praticien assigné</p>
+            <button
+              class="action-btn primary sm"
+              @click="$emit('assign-practitioner')"
+            >
+              Assigner maintenant
+            </button>
+          </div>
+        </div>
+
+        <!-- ── DOCUMENTS TAB ── -->
+        <div v-if="localActiveTab === 'documents'" class="tab-content">
+          <div class="section-header">
+            <h3>Documents</h3>
+          </div>
+          <DocumentManagement
+            :documents="documentAttachments"
+            :loading="documentStore.isLoading"
+            :error="documentStore.getError"
+            @files-selected="handleFilesSelected"
+            @upload-files="handleUploadFiles"
+            @delete-document="handleDeleteDocument"
+            @delete-documents="handleDeleteDocuments"
+            @update-document-label="handleUpdateDocumentLabel"
+            @retry="loadDocumentAttachments"
+          />
+        </div>
+
+        <!-- ── QUOTE TAB ── -->
+        <div v-if="localActiveTab === 'quote'" class="tab-content">
+          <div class="section-header">
+            <h3>Devis</h3>
+            <router-link
+              v-if="mappedIntervention.quote?.id"
+              :to="`/ventes/devis/${mappedIntervention.quote.id}`"
+              class="action-btn primary sm"
+              >Ouvrir le devis</router-link
+            >
+          </div>
+
+          <div v-if="mappedIntervention.quote">
+            <div class="info-grid">
+              <InfoSection title="Informations du devis" icon-color="#3b82f6">
+                <template #icon
+                  ><svg
+                    width="16"
+                    height="16"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                  >
+                    <path
+                      d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"
+                    />
+                    <polyline points="14 2 14 8 20 8" /></svg
+                ></template>
+                <DataRow
+                  label="Référence"
+                  :value="mappedIntervention.quote.reference"
+                />
+                <DataRow
+                  label="Date"
+                  :value="mappedIntervention.quote.quote_date"
+                />
+                <DataRow
+                  label="Validité"
+                  :value="mappedIntervention.quote.valid_until"
+                />
+                <div class="data-row">
+                  <span class="data-label">Statut</span>
+                  <span
+                    class="quote-status-badge"
+                    :class="`qs-${getQuoteStatusColor(
+                      mappedIntervention.quote.status
+                    )}`"
+                  >
+                    {{ getQuoteStatusLabel(mappedIntervention.quote.status) }}
+                  </span>
+                </div>
+              </InfoSection>
+
+              <InfoSection title="Montants" icon-color="#10b981">
+                <template #icon
+                  ><svg
+                    width="16"
+                    height="16"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                  >
+                    <line x1="12" y1="1" x2="12" y2="23" />
+                    <path
+                      d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"
+                    /></svg
+                ></template>
+                <DataRow
+                  label="Total HT"
+                  :value="formatCurrency(mappedIntervention.quote.total_ht)"
+                />
+                <DataRow
+                  label="Total TVA"
+                  :value="formatCurrency(mappedIntervention.quote.total_tva)"
+                />
+                <DataRow
+                  label="Total TTC"
+                  :value="formatCurrency(mappedIntervention.quote.total_ttc)"
+                  bold
+                />
+              </InfoSection>
+            </div>
+
+            <div
+              v-if="mappedIntervention.quote.lines?.length"
+              class="quote-lines-section"
+            >
+              <div class="quote-table-header">Lignes du devis</div>
+              <div class="quote-table-wrapper">
+                <table class="quote-table">
+                  <thead>
+                    <tr>
+                      <th>Description</th>
+                      <th class="text-center">Qté</th>
+                      <th class="text-right">Prix unitaire</th>
+                      <th class="text-right">Total HT</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr
+                      v-for="line in mappedIntervention.quote.lines"
+                      :key="line.id"
+                    >
+                      <td>{{ line.description || "-" }}</td>
+                      <td class="text-center">{{ line.units_qty || 0 }}</td>
+                      <td class="text-right">
+                        {{ formatCurrency(line.unit_price) }}
+                      </td>
+                      <td class="text-right fw-semibold">
+                        {{ formatCurrency(line.total_ht) }}
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+
+          <div v-else class="empty-state">
+            <div class="empty-icon">
+              <svg
+                width="32"
+                height="32"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.5"
+              >
+                <path
+                  d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"
+                />
+                <polyline points="14 2 14 8 20 8" />
+              </svg>
+            </div>
+            <p>Aucun devis associé à cette intervention</p>
+          </div>
+        </div>
+
+        <!-- ── HISTORY TAB ── -->
+        <div v-if="localActiveTab === 'history'" class="tab-content">
+          <div class="section-header"><h3>Historique</h3></div>
+          <div class="empty-state">
+            <div class="empty-icon">
+              <svg
+                width="32"
+                height="32"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.5"
+              >
+                <polyline points="1 4 1 10 7 10" />
+                <path d="M3.51 15a9 9 0 1 0 .49-4.5" />
+              </svg>
+            </div>
+            <p>Historique des modifications</p>
+            <span class="coming-soon">Fonctionnalité à venir</span>
+          </div>
+        </div>
+      </main>
+    </div>
+
+    <!-- Assign Modal -->
+    <AssignPractitionerModal
+      :is-open="isModalOpen"
+      @close="$emit('close-modal')"
+      @assign="$emit('assign-practitioner-confirmed', $event)"
+    />
+  </div>
 </template>
 
 <script setup>
-import { defineProps, defineEmits, ref, computed } from "vue";
-import InterventionDetailTemplate from "@/components/templates/Interventions/InterventionDetailTemplate.vue";
-import InterventionDetailSidebar from "./intervention/InterventionDetailSidebar.vue";
-import InterventionDetailContent from "./intervention/InterventionDetailContent.vue";
+import { defineProps, defineEmits, ref, computed, watch, onMounted } from "vue";
 import { RouterLink } from "vue-router";
+import InterventionDetails from "@/components/molecules/Interventions/interventionDetails.vue";
+import DocumentManagement from "@/components/molecules/Interventions/DocumentManagement.vue";
+import AssignPractitionerModal from "@/components/molecules/intervention/AssignPractitionerModal.vue";
+import StatusPill from "@/components/molecules/intervention/StatusPill.vue";
+import InfoSection from "@/components/molecules/intervention/InfoSection.vue";
+import DataRow from "@/components/molecules/intervention/DataRow.vue";
+import { useDocumentAttachmentStore } from "@/stores/documentAttachmentStore";
 
 const props = defineProps({
-  intervention: {
-    type: Object,
-    required: true,
-  },
-  loading: {
-    type: Boolean,
-    default: false,
-  },
-  error: {
-    type: String,
-    default: null,
-  },
-  activeTab: {
-    type: String,
-    default: "overview",
-  },
-  practitioners: {
-    type: Array,
-    default: () => [],
-  },
+  intervention: { type: Object, required: true },
+  loading: { type: Boolean, default: false },
+  error: { type: String, default: null },
+  activeTab: { type: String, default: "overview" },
+  practitioners: { type: Array, default: () => [] },
+  isModalOpen: { type: Boolean, default: false },
 });
 
 const emit = defineEmits([
   "update-intervention",
   "cancel",
   "assign-practitioner",
+  "assign-practitioner-confirmed",
+  "change-tab",
+  "close-modal",
+  "unassign-practitioner",
 ]);
 
 const localActiveTab = ref(props.activeTab);
 
-// Map API data to expected format
+const changeTab = (tab) => {
+  localActiveTab.value = tab;
+  emit("change-tab", tab);
+};
+
+const documentStore = useDocumentAttachmentStore();
+const documentAttachments = computed(() =>
+  documentStore.getInterventionAttachments(props.intervention?.id || 0)
+);
+
+// ── Mapped intervention ──
 const mappedIntervention = computed(() => {
   if (!props.intervention) return null;
-
+  const i = props.intervention;
   return {
-    ...props.intervention,
-    // Map API fields to component expected fields
-    defuntName: props.intervention.deceased
-      ? `${props.intervention.deceased.last_name || ""} ${
-          props.intervention.deceased.first_name || ""
-        }`.trim()
-      : `Personne ${props.intervention.deceased_id || "inconnue"}`,
-    date: props.intervention.scheduled_at
-      ? new Date(props.intervention.scheduled_at).toLocaleString("fr-FR")
+    ...i,
+    defuntName: i.deceased
+      ? `${i.deceased.last_name || ""} ${i.deceased.first_name || ""}`.trim()
+      : `Personne ${i.deceased_id || "inconnue"}`,
+    date: i.scheduled_at
+      ? new Date(i.scheduled_at).toLocaleString("fr-FR")
       : "Non définie",
-    lieux: props.intervention.location
-      ? props.intervention.location.name || "Lieu non défini"
-      : "Lieu non défini",
-    duree: props.intervention.duration_min
-      ? `${props.intervention.duration_min} minutes`
-      : "Non définie",
-    title: props.intervention.type
-      ? getInterventionTypeLabel(props.intervention.type)
-      : "Type non défini",
-    contactFamilial: props.intervention.order_giver || "Non renseigné",
-    description: props.intervention.notes || "Aucune description disponible",
-    nombrePersonnes: props.intervention.attachments_count || 0,
-    coordonneesContact: props.intervention.client
-      ? props.intervention.client.email ||
-        props.intervention.client.phone ||
-        "Non disponible"
+    lieux: i.location?.name || "Lieu non défini",
+    duree: i.duration_min ? `${i.duration_min} min` : "Non définie",
+    title: i.type ? getTypeLabel(i.type) : "Type non défini",
+    contactFamilial: i.order_giver || "Non renseigné",
+    description: i.notes || "",
+    nombrePersonnes: i.attachments_count || 0,
+    coordonneesContact: i.client
+      ? i.client.email || i.client.phone || "Non disponible"
       : "Non disponible",
     prestationsSupplementaires: "À définir",
-    members:
-      props.intervention.practitioners &&
-      props.intervention.practitioners.length > 0
-        ? props.intervention.practitioners.map((p) => ({
-            name: p.employee
-              ? `${p.employee.first_name || ""} ${
-                  p.employee.last_name || ""
-                }`.trim()
-              : `${p.first_name || ""} ${p.last_name || ""}`.trim(),
-            image: "/images/avatar-default.png",
-            role: p.pivot?.role || "assistant",
-          }))
-        : [],
-
-    // Map status from API string to expected object format
-    status: props.intervention.status
-      ? {
-          label: getStatusLabel(props.intervention.status),
-          color: getStatusColor(props.intervention.status),
-          variant: "fill",
-          size: "md",
-        }
-      : { label: "En attente", color: "warning", variant: "fill", size: "md" },
-
-    // Map action (add if missing)
-    action: {
-      color: "primary",
-      label: "Modifier",
-    },
+    practitioners: (i.practitioners || []).map((p) => ({
+      id: p.id,
+      name: p.employee
+        ? `${p.employee.first_name || ""} ${p.employee.last_name || ""}`.trim()
+        : `${p.first_name || ""} ${p.last_name || ""}`.trim(),
+      role: p.pivot?.role || "assistant",
+    })),
+    status: i.status
+      ? { label: getStatusLabel(i.status), color: getStatusColor(i.status) }
+      : { label: "En attente", color: "warning" },
+    quote: i.quote || null,
   };
 });
 
-// Helper functions
-const getStatusLabel = (status) => {
-  const statusLabels = {
+const tabs = computed(() => [
+  { id: "overview", label: "Vue d'ensemble", icon: eyeIcon },
+  { id: "details", label: "Détails", icon: listIcon },
+  {
+    id: "team",
+    label: "Équipe",
+    icon: teamIcon,
+    badge: mappedIntervention.value?.practitioners?.length || null,
+  },
+  { id: "documents", label: "Documents", icon: docIcon },
+  { id: "quote", label: "Devis", icon: quoteIcon },
+  { id: "history", label: "Historique", icon: histIcon },
+]);
+
+// SVG icons as strings for tab nav
+const eyeIcon = `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>`;
+const listIcon = `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>`;
+const teamIcon = `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>`;
+const docIcon = `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>`;
+const quoteIcon = `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>`;
+const histIcon = `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 .49-4.5"/></svg>`;
+
+// ── Helpers ──
+const getStatusLabel = (s) =>
+  ({
     demande: "Demande",
     planifie: "Planifié",
     en_cours: "En cours",
     termine: "Terminé",
     annule: "Annulé",
-  };
-  return statusLabels[status] || status;
-};
-
-const getStatusColor = (status) => {
-  const statusColors = {
+  }[s] || s);
+const getStatusColor = (s) =>
+  ({
     demande: "warning",
     planifie: "info",
     en_cours: "primary",
     termine: "success",
     annule: "danger",
-  };
-  return statusColors[status] || "secondary";
-};
-
-const getInterventionTypeLabel = (type) => {
-  const typeLabels = {
+  }[s] || "secondary");
+const getTypeLabel = (t) =>
+  ({
     thanatopraxie: "Thanatopraxie",
     toilette_mortuaire: "Toilette mortuaire",
     exhumation: "Exhumation",
     retrait_pacemaker: "Retrait pacemaker",
     retrait_bijoux: "Retrait bijoux",
     autre: "Autre",
-  };
-  return typeLabels[type] || type;
+  }[t] || t);
+const getQuoteStatusLabel = (s) =>
+  ({
+    brouillon: "Brouillon",
+    envoye: "Envoyé",
+    accepte: "Accepté",
+    refuse: "Refusé",
+    expire: "Expiré",
+  }[s] ||
+  s ||
+  "Inconnu");
+const getQuoteStatusColor = (s) =>
+  ({
+    brouillon: "secondary",
+    envoye: "info",
+    accepte: "success",
+    refuse: "danger",
+    expire: "warning",
+  }[s] || "secondary");
+const formatCurrency = (v) =>
+  new Intl.NumberFormat("fr-FR", {
+    style: "currency",
+    currency: "EUR",
+    minimumFractionDigits: 2,
+  }).format(Number(v || 0));
+const getInitials = (name) =>
+  name
+    ? name
+        .split(" ")
+        .map((w) => w[0])
+        .join("")
+        .toUpperCase()
+        .substring(0, 2)
+    : "?";
+
+// ── Document handlers ──
+const handleFilesSelected = (files) =>
+  console.log("Files selected:", files.length);
+const loadDocumentAttachments = async () => {
+  if (!props.intervention?.id) return;
+  try {
+    await documentStore.fetchInterventionFiles(props.intervention.id);
+  } catch (e) {
+    documentStore.clearError();
+  }
+};
+const handleUploadFiles = async (files) => {
+  if (!props.intervention?.id || !files.length) return;
+  try {
+    await documentStore.uploadAndAttachFiles(
+      files,
+      "App\\Models\\Intervention",
+      props.intervention.id
+    );
+  } catch (e) {
+    documentStore.clearError();
+  }
+};
+const handleDeleteDocument = async (id) => {
+  try {
+    await documentStore.detachFile(id);
+  } catch (e) {
+    documentStore.clearError();
+  }
+};
+const handleDeleteDocuments = async (ids) => {
+  try {
+    await documentStore.detachMultipleFiles({ attachment_ids: ids });
+  } catch (e) {
+    documentStore.clearError();
+  }
+};
+const handleUpdateDocumentLabel = async ({ id, label }) => {
+  try {
+    await documentStore.updateAttachmentMetadata(id, { label });
+  } catch (e) {
+    documentStore.clearError();
+  }
 };
 
-const handleUpdateIntervention = (updateData) => {
-  emit("update-intervention", updateData);
-};
-
-const handleCancel = () => {
-  emit("cancel");
-};
-
-const handleAssignPractitioner = (practitionerData) => {
-  emit("assign-practitioner", practitionerData);
-};
-
-// Watch for prop changes to sync local state
-const updateLocalActiveTab = () => {
-  localActiveTab.value = props.activeTab;
-};
+watch(
+  () => props.activeTab,
+  (tab) => {
+    localActiveTab.value = tab;
+    if (tab === "documents" && props.intervention?.id)
+      loadDocumentAttachments();
+  }
+);
+watch(
+  () => props.intervention?.id,
+  (id) => {
+    if (id && props.activeTab === "documents") loadDocumentAttachments();
+  }
+);
+onMounted(() => {
+  if (props.activeTab === "documents" && props.intervention?.id)
+    loadDocumentAttachments();
+});
 </script>
+
+<style scoped>
+/* ─── Design System ─────────────────────────────────────────────── */
+:root {
+  --brand: #4f46e5;
+  --brand-light: #eef2ff;
+  --brand-dark: #3730a3;
+  --surface: #ffffff;
+  --surface-2: #f8fafc;
+  --surface-3: #f1f5f9;
+  --border: #e2e8f0;
+  --border-light: #f1f5f9;
+  --text-primary: #0f172a;
+  --text-secondary: #64748b;
+  --text-muted: #94a3b8;
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
+  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
+  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1);
+}
+
+/* ─── Page Shell ────────────────────────────────────────────────── */
+.intervention-page {
+  min-height: 100vh;
+  background:
+    radial-gradient(
+      circle at 8% 8%,
+      rgba(99, 102, 241, 0.12) 0%,
+      rgba(99, 102, 241, 0) 34%
+    ),
+    radial-gradient(
+      circle at 92% 4%,
+      rgba(16, 185, 129, 0.09) 0%,
+      rgba(16, 185, 129, 0) 30%
+    ),
+    linear-gradient(180deg, #f8fbff 0%, #f2f6fd 100%);
+  font-family: inherit;
+  color: var(--text-primary);
+  display: flex;
+  flex-direction: column;
+}
+
+/* ─── Top Bar ───────────────────────────────────────────────────── */
+.page-topbar {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 14px 28px;
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  box-shadow: var(--shadow-sm);
+}
+
+.back-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  text-decoration: none;
+  padding: 6px 12px;
+  border-radius: var(--radius-sm);
+  transition: background 0.15s, color 0.15s;
+}
+.back-btn:hover {
+  background: var(--surface-3);
+  color: var(--text-primary);
+}
+
+.topbar-center {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin: 0 auto;
+}
+.topbar-id {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  letter-spacing: 0.3px;
+}
+.topbar-actions {
+  display: flex;
+  gap: 8px;
+}
+
+/* ─── Layout ────────────────────────────────────────────────────── */
+.page-layout {
+  display: grid;
+  grid-template-columns: 280px 1fr;
+  gap: 0;
+  flex: 1;
+  min-height: 0;
+}
+
+/* ─── Sidebar ───────────────────────────────────────────────────── */
+.sidebar {
+  background: var(--surface);
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  position: sticky;
+  top: 57px;
+  height: calc(100vh - 57px);
+  overflow-y: auto;
+}
+
+.hero-card {
+  padding: 24px 20px 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  text-align: center;
+  border-bottom: 1px solid var(--border-light);
+}
+
+.hero-avatar {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  margin-bottom: 4px;
+  box-shadow: 0 4px 16px rgba(79, 70, 229, 0.3);
+}
+
+.hero-name {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0;
+  line-height: 1.3;
+}
+.hero-type {
+  font-size: 12px;
+  color: var(--text-secondary);
+  margin: 0;
+  font-weight: 500;
+}
+
+/* Quick Stats */
+.quick-stats {
+  padding: 16px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  border-bottom: 1px solid var(--border-light);
+}
+.stat-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+}
+.stat-icon {
+  width: 30px;
+  height: 30px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.date-icon {
+  background: #eef2ff;
+  color: #4f46e5;
+}
+.loc-icon {
+  background: #ecfdf5;
+  color: #059669;
+}
+.dur-icon {
+  background: #fff7ed;
+  color: #d97706;
+}
+
+.stat-label {
+  font-size: 11px;
+  color: var(--text-muted);
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+}
+.stat-value {
+  font-size: 13px;
+  color: var(--text-primary);
+  font-weight: 500;
+  margin-top: 1px;
+}
+
+/* Sidebar Nav */
+.sidebar-nav {
+  padding: 12px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 9px 12px;
+  border-radius: var(--radius-sm);
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  width: 100%;
+  text-align: left;
+  font-size: 13.5px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  transition: all 0.15s;
+}
+.nav-item:hover {
+  background: var(--surface-3);
+  color: var(--text-primary);
+}
+.nav-item.active {
+  background: var(--brand-light);
+  color: var(--brand);
+  font-weight: 600;
+}
+.nav-item.active .nav-icon {
+  color: var(--brand);
+}
+.nav-icon {
+  flex-shrink: 0;
+  display: flex;
+  color: var(--text-muted);
+  transition: color 0.15s;
+}
+.nav-label {
+  flex: 1;
+}
+.nav-badge {
+  min-width: 20px;
+  height: 20px;
+  padding: 0 6px;
+  background: var(--brand);
+  color: white;
+  border-radius: 10px;
+  font-size: 11px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.nav-item.active .nav-badge {
+  background: var(--brand-dark);
+}
+
+/* Assign Button */
+.assign-btn {
+  margin: 0 12px 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  padding: 10px;
+  border: 1.5px dashed var(--border);
+  border-radius: var(--radius-sm);
+  background: transparent;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  transition: all 0.15s;
+}
+.assign-btn:hover {
+  border-color: var(--brand);
+  color: var(--brand);
+  background: var(--brand-light);
+}
+
+/* ─── Main Content ──────────────────────────────────────────────── */
+.main-content {
+  padding: 22px;
+  overflow-y: auto;
+}
+
+.tab-content {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
+  padding: 18px;
+  animation: fadeIn 0.2s ease;
+}
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 18px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--border-light);
+}
+.section-header h3 {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+/* ─── Info Grid ─────────────────────────────────────────────────── */
+.info-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+.info-grid .full-width {
+  grid-column: 1 / -1;
+}
+
+/* Info Section Card */
+:deep(.info-section) {
+  background: var(--surface);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border);
+  overflow: hidden;
+  box-shadow: var(--shadow-sm);
+}
+:deep(.info-section-header) {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 14px 18px;
+  border-bottom: 1px solid var(--border-light);
+  background: var(--surface-2);
+}
+:deep(.info-section-icon) {
+  width: 28px;
+  height: 28px;
+  border-radius: 7px;
+  background: var(--accent, #6366f1);
+  opacity: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  background: color-mix(in srgb, var(--accent, #6366f1) 15%, transparent);
+  color: var(--accent, #6366f1);
+}
+:deep(.info-section-title) {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+:deep(.info-section-body) {
+  padding: 6px 18px 14px;
+}
+
+/* Data Row */
+:deep(.data-row) {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 9px 0;
+  border-bottom: 1px solid var(--border-light);
+  gap: 12px;
+}
+:deep(.data-row:last-child) {
+  border-bottom: none;
+}
+:deep(.data-label) {
+  font-size: 12.5px;
+  color: var(--text-muted);
+  font-weight: 500;
+  flex-shrink: 0;
+}
+:deep(.data-value) {
+  font-size: 13px;
+  color: var(--text-primary);
+  text-align: right;
+  font-weight: 400;
+}
+:deep(.fw-semibold) {
+  font-weight: 600;
+}
+
+.row-2col {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0 24px;
+}
+
+.description-text {
+  font-size: 13.5px;
+  color: var(--text-secondary);
+  line-height: 1.7;
+  margin: 4px 0 0;
+}
+
+/* ─── Status Pills ──────────────────────────────────────────────── */
+:deep(.status-pill) {
+  display: inline-flex;
+  align-items: center;
+  padding: 3px 10px;
+  border-radius: 20px;
+  font-size: 11.5px;
+  font-weight: 600;
+  letter-spacing: 0.2px;
+}
+:deep(.status-pill.sp-lg) {
+  padding: 5px 14px;
+  font-size: 12.5px;
+}
+:deep(.sp-success) {
+  background: #dcfce7;
+  color: #16a34a;
+}
+:deep(.sp-warning) {
+  background: #fef9c3;
+  color: #ca8a04;
+}
+:deep(.sp-danger) {
+  background: #fee2e2;
+  color: #dc2626;
+}
+:deep(.sp-info) {
+  background: #dbeafe;
+  color: #2563eb;
+}
+:deep(.sp-primary) {
+  background: #eef2ff;
+  color: #4f46e5;
+}
+:deep(.sp-secondary) {
+  background: #f1f5f9;
+  color: #64748b;
+}
+
+/* ─── Details tab visual redesign wrapper ────────────────────────── */
+:deep(.details-redesign) {
+  margin-top: 0 !important;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border);
+  background: var(--surface);
+  box-shadow: var(--shadow-sm);
+  overflow: hidden;
+}
+
+:deep(.details-redesign .card) {
+  margin-top: 0 !important;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  background: transparent;
+}
+
+:deep(.details-redesign .card-body) {
+  padding: 1.1rem 1.15rem;
+}
+
+:deep(.details-redesign h5),
+:deep(.details-redesign h6) {
+  color: var(--text-primary);
+}
+
+:deep(.details-redesign .btn.bg-gradient-secondary),
+:deep(.details-redesign .btn.bg-gradient-success),
+:deep(.details-redesign .btn.bg-gradient-danger) {
+  border-radius: var(--radius-sm);
+}
+
+/* ─── Buttons ───────────────────────────────────────────────────── */
+.action-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  border-radius: var(--radius-sm);
+  border: none;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 500;
+  text-decoration: none;
+  transition: all 0.15s;
+}
+.action-btn.primary {
+  background: var(--brand);
+  color: white;
+}
+.action-btn.primary:hover {
+  background: var(--brand-dark);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
+}
+.action-btn.secondary {
+  background: var(--surface-3);
+  color: var(--text-secondary);
+}
+.action-btn.secondary:hover {
+  background: var(--border);
+  color: var(--text-primary);
+}
+.action-btn.sm {
+  padding: 6px 12px;
+  font-size: 12px;
+}
+
+/* ─── Team Grid ─────────────────────────────────────────────────── */
+.team-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 12px;
+}
+.practitioner-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 16px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  box-shadow: var(--shadow-sm);
+  transition: box-shadow 0.15s;
+}
+.practitioner-card:hover {
+  box-shadow: var(--shadow-md);
+}
+.pract-avatar {
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #6366f1, #8b5cf6);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: 700;
+  flex-shrink: 0;
+}
+.pract-info {
+  flex: 1;
+}
+.pract-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+.pract-role {
+  margin-top: 3px;
+}
+.role-badge {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 10px;
+  font-size: 11px;
+  font-weight: 600;
+}
+.role-principal {
+  background: #eef2ff;
+  color: #4f46e5;
+}
+.role-assistant {
+  background: #f0fdf4;
+  color: #16a34a;
+}
+.unassign-btn {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  border: 1px solid var(--border);
+  background: var(--surface);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-muted);
+  transition: all 0.15s;
+}
+.unassign-btn:hover {
+  background: #fee2e2;
+  border-color: #fca5a5;
+  color: #dc2626;
+}
+
+/* ─── Quote ─────────────────────────────────────────────────────── */
+.quote-status-badge {
+  display: inline-block;
+  padding: 2px 10px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 600;
+}
+.qs-success {
+  background: #dcfce7;
+  color: #16a34a;
+}
+.qs-info {
+  background: #dbeafe;
+  color: #2563eb;
+}
+.qs-warning {
+  background: #fef9c3;
+  color: #ca8a04;
+}
+.qs-danger {
+  background: #fee2e2;
+  color: #dc2626;
+}
+.qs-secondary {
+  background: #f1f5f9;
+  color: #64748b;
+}
+
+.quote-lines-section {
+  margin-top: 20px;
+}
+.quote-table-header {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.quote-table-wrapper {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  box-shadow: var(--shadow-sm);
+}
+.quote-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+.quote-table thead {
+  background: var(--surface-2);
+}
+.quote-table th {
+  padding: 11px 16px;
+  font-size: 11.5px;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+  border-bottom: 1px solid var(--border);
+  text-align: left;
+}
+.quote-table td {
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border-light);
+  color: var(--text-primary);
+}
+.quote-table tbody tr:last-child td {
+  border-bottom: none;
+}
+.quote-table tbody tr:hover td {
+  background: var(--surface-2);
+}
+.text-center {
+  text-align: center;
+}
+.text-right {
+  text-align: right;
+}
+
+/* ─── Empty / Loading States ────────────────────────────────────── */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 64px 24px;
+  text-align: center;
+  gap: 12px;
+}
+.empty-icon {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  background: var(--surface-3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-muted);
+  margin-bottom: 4px;
+}
+.empty-state p {
+  font-size: 14px;
+  color: var(--text-secondary);
+  margin: 0;
+  font-weight: 500;
+}
+.coming-soon {
+  font-size: 11.5px;
+  color: var(--text-muted);
+  background: var(--surface-3);
+  padding: 3px 10px;
+  border-radius: 20px;
+}
+
+.fullpage-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  gap: 16px;
+  padding: 80px;
+}
+.loading-orb {
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  border: 3px solid var(--border);
+  border-top-color: var(--brand);
+  animation: spin 0.8s linear infinite;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.fullpage-loading p {
+  font-size: 14px;
+  color: var(--text-secondary);
+}
+
+.fullpage-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  gap: 12px;
+  padding: 80px;
+  text-align: center;
+}
+.error-icon {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  background: #fee2e2;
+  color: #dc2626;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.fullpage-error h3 {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0;
+}
+.fullpage-error p {
+  font-size: 14px;
+  color: var(--text-secondary);
+  margin: 0;
+}
+
+/* ─── Responsive ────────────────────────────────────────────────── */
+@media (max-width: 900px) {
+  .page-layout {
+    grid-template-columns: 1fr;
+  }
+  .sidebar {
+    position: static;
+    height: auto;
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+  }
+  .sidebar-nav {
+    flex-direction: row;
+    flex-wrap: wrap;
+    padding: 8px;
+  }
+  .nav-item {
+    flex: 0 1 auto;
+  }
+  .info-grid {
+    grid-template-columns: 1fr;
+  }
+  .info-grid .full-width {
+    grid-column: 1;
+  }
+  .main-content {
+    padding: 16px;
+  }
+
+  .tab-content {
+    padding: 14px;
+  }
+}
+</style>
diff --git a/thanasoft-front/src/components/Organism/Interventions/intervention/InterventionDetailSidebar.vue b/thanasoft-front/src/components/Organism/Interventions/intervention/InterventionDetailSidebar.vue
index daad456..1539346 100644
--- a/thanasoft-front/src/components/Organism/Interventions/intervention/InterventionDetailSidebar.vue
+++ b/thanasoft-front/src/components/Organism/Interventions/intervention/InterventionDetailSidebar.vue
@@ -1,71 +1,477 @@
 <template>
-  <div class="card position-sticky top-1">
-    <!-- Intervention Profile Card -->
-    <InterventionProfileCard :intervention="intervention" />
-
-    <hr class="horizontal dark my-3 mx-3" />
-
-    <!-- Tab Navigation -->
-    <div class="card-body pt-0">
-      <InterventionTabNavigation
-        :active-tab="activeTab"
-        :team-count="practitioners.length"
-        :documents-count="0"
-        @change-tab="changeTab"
-      />
+  <div class="sidebar-wrap">
+    <!-- Hero Card -->
+    <div class="hero-card">
+      <div class="hero-avatar">
+        <svg
+          width="26"
+          height="26"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.5"
+        >
+          <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+          <circle cx="9" cy="7" r="4" />
+          <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
+          <path d="M16 3.13a4 4 0 0 1 0 7.75" />
+        </svg>
+      </div>
+      <h2 class="hero-name">
+        {{ intervention.defuntName || "Personne inconnue" }}
+      </h2>
+      <p class="hero-type">{{ intervention.title || "Type non défini" }}</p>
+      <div
+        class="status-badge"
+        :class="'sb-' + (intervention.status?.color || 'secondary')"
+      >
+        {{ intervention.status?.label || "En attente" }}
+      </div>
     </div>
 
-    <!-- Assign Practitioner Button -->
-    <div class="mx-3 mb-3">
+    <div class="divider"></div>
+
+    <!-- Quick Stats -->
+    <div class="quick-stats">
+      <div class="qs-row">
+        <div class="qs-icon" style="background: #eef2ff; color: #4f46e5">
+          <svg
+            width="13"
+            height="13"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+          >
+            <rect x="3" y="4" width="18" height="18" rx="2" />
+            <line x1="16" y1="2" x2="16" y2="6" />
+            <line x1="8" y1="2" x2="8" y2="6" />
+            <line x1="3" y1="10" x2="21" y2="10" />
+          </svg>
+        </div>
+        <div class="qs-text">
+          <div class="qs-label">Date</div>
+          <div class="qs-value">{{ intervention.date || "—" }}</div>
+        </div>
+      </div>
+      <div class="qs-row">
+        <div class="qs-icon" style="background: #ecfdf5; color: #059669">
+          <svg
+            width="13"
+            height="13"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+          >
+            <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
+            <circle cx="12" cy="10" r="3" />
+          </svg>
+        </div>
+        <div class="qs-text">
+          <div class="qs-label">Lieu</div>
+          <div class="qs-value">{{ intervention.lieux || "—" }}</div>
+        </div>
+      </div>
+      <div class="qs-row">
+        <div class="qs-icon" style="background: #fff7ed; color: #d97706">
+          <svg
+            width="13"
+            height="13"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+          >
+            <circle cx="12" cy="12" r="10" />
+            <polyline points="12 6 12 12 16 14" />
+          </svg>
+        </div>
+        <div class="qs-text">
+          <div class="qs-label">Durée</div>
+          <div class="qs-value">{{ intervention.duree || "—" }}</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="divider"></div>
+
+    <!-- Team preview -->
+    <div v-if="intervention.members?.length" class="team-preview">
+      <div class="tp-label">Équipe</div>
+      <div class="tp-avatars">
+        <div
+          v-for="(m, i) in intervention.members.slice(0, 5)"
+          :key="i"
+          class="tp-avatar"
+          :title="m.name"
+          :style="{ zIndex: 10 - i }"
+        >
+          {{ getInitials(m.name) }}
+        </div>
+        <div v-if="intervention.members.length > 5" class="tp-avatar tp-more">
+          +{{ intervention.members.length - 5 }}
+        </div>
+      </div>
+    </div>
+
+    <div class="divider"></div>
+
+    <!-- Tab Navigation -->
+    <nav class="tab-nav">
       <button
-        type="button"
-        class="btn btn-sm btn-outline-primary w-100"
-        @click="assignPractitioner"
+        v-for="tab in tabs"
+        :key="tab.id"
+        class="tab-item"
+        :class="{ active: activeTab === tab.id }"
+        @click="$emit('change-tab', tab.id)"
       >
-        <i class="fas fa-user-plus me-2"></i>Assigner un praticien
+        <span class="tab-icon" v-html="tab.icon"></span>
+        <span class="tab-label">{{ tab.label }}</span>
+        <span v-if="tab.id === 'team' && teamCount > 0" class="tab-badge">{{
+          teamCount
+        }}</span>
+        <span
+          v-if="tab.id === 'documents' && documentsCount > 0"
+          class="tab-badge"
+          >{{ documentsCount }}</span
+        >
+      </button>
+    </nav>
+
+    <!-- Assign Button -->
+    <div class="assign-wrap">
+      <button class="assign-btn" @click="$emit('assign-practitioner')">
+        <svg
+          width="13"
+          height="13"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2.5"
+        >
+          <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+          <circle cx="8.5" cy="7" r="4" />
+          <line x1="20" y1="8" x2="20" y2="14" />
+          <line x1="23" y1="11" x2="17" y2="11" />
+        </svg>
+        Assigner un praticien
       </button>
     </div>
   </div>
 </template>
 
 <script setup>
-import InterventionProfileCard from "@/components/molecules/intervention/InterventionProfileCard.vue";
-import InterventionTabNavigation from "@/components/molecules/intervention/InterventionTabNavigation.vue";
 import { defineProps, defineEmits } from "vue";
 
-const props = defineProps({
-  intervention: {
-    type: Object,
-    required: true,
-  },
-  activeTab: {
-    type: String,
-    default: "overview",
-  },
-  practitioners: {
-    type: Array,
-    default: () => [],
-  },
+defineProps({
+  intervention: { type: Object, required: true },
+  activeTab: { type: String, default: "overview" },
+  practitioners: { type: Array, default: () => [] },
+  teamCount: { type: Number, default: 0 },
+  documentsCount: { type: Number, default: 0 },
 });
+defineEmits(["change-tab", "assign-practitioner"]);
 
-const emit = defineEmits(["change-tab", "assign-practitioner"]);
+const getInitials = (n) =>
+  n
+    ? n
+        .split(" ")
+        .map((w) => w[0])
+        .join("")
+        .toUpperCase()
+        .substring(0, 2)
+    : "?";
 
-const changeTab = (tab) => {
-  emit("change-tab", tab);
-};
-
-const assignPractitioner = () => {
-  emit("assign-practitioner");
-};
+const tabs = [
+  {
+    id: "overview",
+    label: "Vue d'ensemble",
+    icon: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>`,
+  },
+  {
+    id: "details",
+    label: "Détails",
+    icon: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>`,
+  },
+  {
+    id: "team",
+    label: "Équipe",
+    icon: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>`,
+  },
+  {
+    id: "documents",
+    label: "Documents",
+    icon: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>`,
+  },
+  {
+    id: "quote",
+    label: "Devis",
+    icon: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>`,
+  },
+  {
+    id: "history",
+    label: "Historique",
+    icon: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 .49-4.5"/></svg>`,
+  },
+];
 </script>
 
 <style scoped>
-.position-sticky {
-  top: 1rem;
+.sidebar-wrap {
+  --brand: #4f46e5;
+  --brand-lt: #eef2ff;
+  --brand-dk: #3730a3;
+  --surface: #ffffff;
+  --surface-2: #f8fafc;
+  --border: #e2e8f0;
+  --border-lt: #f1f5f9;
+  --text-1: #0f172a;
+  --text-2: #64748b;
+  --text-3: #94a3b8;
+  --r-sm: 8px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  overflow: hidden;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+  font-family: inherit;
 }
 
-.card {
-  border: 0;
-  box-shadow: 0 0 2rem 0 rgba(136, 152, 170, 0.15);
+/* Hero */
+.hero-card {
+  padding: 24px 20px 18px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  text-align: center;
+}
+.hero-avatar {
+  width: 58px;
+  height: 58px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #4f46e5, #7c3aed);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  margin-bottom: 2px;
+  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.28);
+}
+.hero-name {
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--text-1);
+  margin: 0;
+  line-height: 1.3;
+}
+.hero-type {
+  font-size: 12px;
+  color: var(--text-2);
+  margin: 0;
+  font-weight: 500;
+}
+
+/* Status badge */
+.status-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 3px 10px;
+  border-radius: 20px;
+  font-size: 11.5px;
+  font-weight: 600;
+}
+.sb-success {
+  background: #dcfce7;
+  color: #16a34a;
+}
+.sb-warning {
+  background: #fef9c3;
+  color: #ca8a04;
+}
+.sb-danger {
+  background: #fee2e2;
+  color: #dc2626;
+}
+.sb-info {
+  background: #dbeafe;
+  color: #2563eb;
+}
+.sb-primary {
+  background: #eef2ff;
+  color: #4f46e5;
+}
+.sb-secondary {
+  background: #f1f5f9;
+  color: #64748b;
+}
+
+.divider {
+  height: 1px;
+  background: var(--border-lt);
+}
+
+/* Quick stats */
+.quick-stats {
+  padding: 14px 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.qs-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+}
+.qs-icon {
+  width: 28px;
+  height: 28px;
+  border-radius: 7px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.qs-label {
+  font-size: 10.5px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-3);
+  font-weight: 600;
+}
+.qs-value {
+  font-size: 12.5px;
+  color: var(--text-1);
+  font-weight: 500;
+  margin-top: 1px;
+}
+
+/* Team preview */
+.team-preview {
+  padding: 12px 18px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.tp-label {
+  font-size: 11.5px;
+  font-weight: 600;
+  color: var(--text-3);
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+}
+.tp-avatars {
+  display: flex;
+}
+.tp-avatar {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #6366f1, #8b5cf6);
+  border: 2px solid var(--surface);
+  color: white;
+  font-size: 10px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: -6px;
+  cursor: default;
+  transition: transform 0.15s;
+}
+.tp-avatar:first-child {
+  margin-left: 0;
+}
+.tp-avatar:hover {
+  transform: translateY(-3px);
+}
+.tp-more {
+  background: var(--surface-2);
+  color: var(--text-2);
+  font-size: 9px;
+}
+
+/* Tab nav */
+.tab-nav {
+  padding: 8px 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.tab-item {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  padding: 8px 11px;
+  border-radius: var(--r-sm);
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  width: 100%;
+  text-align: left;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-2);
+  transition: all 0.12s;
+}
+.tab-item:hover {
+  background: var(--surface-2);
+  color: var(--text-1);
+}
+.tab-item.active {
+  background: var(--brand-lt);
+  color: var(--brand);
+  font-weight: 600;
+}
+.tab-icon {
+  flex-shrink: 0;
+  display: flex;
+  color: var(--text-3);
+}
+.tab-item.active .tab-icon {
+  color: var(--brand);
+}
+.tab-label {
+  flex: 1;
+}
+.tab-badge {
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: 9px;
+  background: var(--brand);
+  color: white;
+  font-size: 10px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Assign */
+.assign-wrap {
+  padding: 0 10px 12px;
+}
+.assign-btn {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  padding: 9px;
+  border: 1.5px dashed var(--border);
+  border-radius: var(--r-sm);
+  background: transparent;
+  cursor: pointer;
+  font-size: 12.5px;
+  font-weight: 500;
+  color: var(--text-2);
+  transition: all 0.15s;
+}
+.assign-btn:hover {
+  border-color: var(--brand);
+  color: var(--brand);
+  background: var(--brand-lt);
 }
 </style>
diff --git a/thanasoft-front/src/components/Organism/Invoice/InvoiceDetailPresentation.vue b/thanasoft-front/src/components/Organism/Invoice/InvoiceDetailPresentation.vue
index 0c78fdb..d692b54 100644
--- a/thanasoft-front/src/components/Organism/Invoice/InvoiceDetailPresentation.vue
+++ b/thanasoft-front/src/components/Organism/Invoice/InvoiceDetailPresentation.vue
@@ -183,6 +183,7 @@ const loading = ref(true);
 const updating = ref(false);
 const error = ref(null);
 const selectedStatus = ref("brouillon");
+let invoiceStatusRequestId = 0;
 
 const load = async () => {
   loading.value = true;
@@ -280,10 +281,12 @@ const onStatusSelect = (event) => {
 /* ── Status Update ── */
 const changeStatus = (id, newStatus) => {
   if (!id || updating.value) return;
+  const requestId = ++invoiceStatusRequestId;
   updating.value = true;
   invoiceStore
     .updateInvoice({ id, status: newStatus })
     .then((updated) => {
+      if (requestId !== invoiceStatusRequestId) return;
       if (`${props.invoiceId}` !== `${id}`) return;
       invoice.value = updated;
       selectedStatus.value = updated?.status || newStatus;
@@ -302,7 +305,9 @@ const changeStatus = (id, newStatus) => {
       );
     })
     .finally(() => {
-      updating.value = false;
+      if (requestId === invoiceStatusRequestId) {
+        updating.value = false;
+      }
     });
 };
 </script>
diff --git a/thanasoft-front/src/components/Organism/Quote/QuoteCreationPresentation.vue b/thanasoft-front/src/components/Organism/Quote/QuoteCreationPresentation.vue
index 5c8c40e..d2fcb9d 100644
--- a/thanasoft-front/src/components/Organism/Quote/QuoteCreationPresentation.vue
+++ b/thanasoft-front/src/components/Organism/Quote/QuoteCreationPresentation.vue
@@ -21,20 +21,59 @@
       </soft-button>
     </template>
 
-    <!-- ── Client Selection ── -->
+    <!-- ── Recipient Selection ── -->
     <template #client-selection>
       <div class="field-group">
         <label class="field-label"
-          >Client <span class="text-danger">*</span></label
+          >Destinataire <span class="text-danger">*</span></label
         >
-        <select v-model="form.client_id" class="form-select field-select">
-          <option value="" disabled>— Sélectionner un client —</option>
+        <div class="recipient-toggle">
+          <button
+            type="button"
+            class="recipient-toggle__btn"
+            :class="{ 'recipient-toggle__btn--active': form.recipient_type === 'client' }"
+            @click="setRecipientType('client')"
+          >
+            Client
+          </button>
+          <button
+            type="button"
+            class="recipient-toggle__btn"
+            :class="{ 'recipient-toggle__btn--active': form.recipient_type === 'group' }"
+            @click="setRecipientType('group')"
+          >
+            Groupe client
+          </button>
+        </div>
+
+        <select
+          v-if="form.recipient_type === 'client'"
+          v-model="form.client_id"
+          class="form-select field-select"
+        >
+          <option :value="null" disabled>— Sélectionner un client —</option>
           <option v-for="client in clients" :key="client.id" :value="client.id">
             {{ client.name }}
           </option>
         </select>
-        <p v-if="!form.client_id && attempted" class="field-error">
-          <i class="fas fa-exclamation-circle me-1"></i>Client requis
+
+        <select
+          v-else
+          v-model="form.group_id"
+          class="form-select field-select"
+        >
+          <option :value="null" disabled>— Sélectionner un groupe —</option>
+          <option
+            v-for="group in clientGroups"
+            :key="group.id"
+            :value="group.id"
+          >
+            {{ group.name }}
+          </option>
+        </select>
+
+        <p v-if="recipientError" class="field-error">
+          <i class="fas fa-exclamation-circle me-1"></i>{{ recipientError }}
         </p>
       </div>
     </template>
@@ -133,12 +172,15 @@ import SoftButton from "@/components/SoftButton.vue";
 import SoftInput from "@/components/SoftInput.vue";
 import { useQuoteStore } from "@/stores/quoteStore";
 import { useClientStore } from "@/stores/clientStore";
+import { useClientGroupStore } from "@/stores/clientGroupStore";
 import { storeToRefs } from "pinia";
 
 const router = useRouter();
 const quoteStore = useQuoteStore();
 const clientStore = useClientStore();
+const clientGroupStore = useClientGroupStore();
 const { clients } = storeToRefs(clientStore);
+const { clientGroups } = storeToRefs(clientGroupStore);
 
 const loading = ref(false);
 const attempted = ref(false);
@@ -174,7 +216,9 @@ const defaultLine = () => ({
 });
 
 const form = ref({
-  client_id: "",
+  recipient_type: "client",
+  client_id: null,
+  group_id: null,
   quote_date: new Date().toISOString().split("T")[0],
   valid_until: "",
   status: "brouillon",
@@ -182,6 +226,20 @@ const form = ref({
   lines: [defaultLine()],
 });
 
+const recipientError = computed(() => {
+  if (!attempted.value) return "";
+
+  if (form.value.recipient_type === "client" && !form.value.client_id) {
+    return "Client requis";
+  }
+
+  if (form.value.recipient_type === "group" && !form.value.group_id) {
+    return "Groupe client requis";
+  }
+
+  return "";
+});
+
 const totals = computed(() => {
   let ht = 0;
   let tva = 0;
@@ -197,6 +255,16 @@ const totals = computed(() => {
 const addLine = () => form.value.lines.push(defaultLine());
 const removeLine = (index) => form.value.lines.splice(index, 1);
 
+const setRecipientType = (type) => {
+  form.value.recipient_type = type;
+
+  if (type === "client") {
+    form.value.group_id = null;
+  } else {
+    form.value.client_id = null;
+  }
+};
+
 const formatCurrency = (value) =>
   new Intl.NumberFormat("fr-FR", { style: "currency", currency: "EUR" }).format(
     value
@@ -204,12 +272,15 @@ const formatCurrency = (value) =>
 
 const saveQuote = async () => {
   attempted.value = true;
-  if (!form.value.client_id) return;
+  if (recipientError.value) return;
 
   loading.value = true;
   try {
     await quoteStore.createQuote({
-      client_id: form.value.client_id,
+      client_id:
+        form.value.recipient_type === "client" ? form.value.client_id : null,
+      group_id:
+        form.value.recipient_type === "group" ? form.value.group_id : null,
       status: form.value.status,
       quote_date: form.value.quote_date,
       valid_until: form.value.valid_until,
@@ -238,10 +309,40 @@ const saveQuote = async () => {
 
 const cancel = () => router.back();
 
-onMounted(() => clientStore.fetchClients());
+onMounted(() => {
+  clientStore.fetchClients();
+  clientGroupStore.fetchClientGroups({ per_page: 100 });
+});
 </script>
 
 <style scoped>
+.recipient-toggle {
+  display: inline-flex;
+  gap: 0.35rem;
+  padding: 0.25rem;
+  margin-bottom: 0.75rem;
+  border: 1px solid #e9ecef;
+  border-radius: 10px;
+  background: #f8f9fc;
+}
+
+.recipient-toggle__btn {
+  border: 0;
+  background: transparent;
+  color: #6b7280;
+  font-size: 0.82rem;
+  font-weight: 700;
+  padding: 0.5rem 0.9rem;
+  border-radius: 8px;
+  transition: all 0.2s ease;
+}
+
+.recipient-toggle__btn--active {
+  background: #fff;
+  color: #344767;
+  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
+}
+
 /* ── Field Groups ── */
 .field-label {
   display: block;
diff --git a/thanasoft-front/src/components/Organism/Quote/QuoteDetailPresentation.vue b/thanasoft-front/src/components/Organism/Quote/QuoteDetailPresentation.vue
index e3a0bf6..b3f35fc 100644
--- a/thanasoft-front/src/components/Organism/Quote/QuoteDetailPresentation.vue
+++ b/thanasoft-front/src/components/Organism/Quote/QuoteDetailPresentation.vue
@@ -42,7 +42,13 @@
             <i :class="statusIcon(quote.status) + ' me-1'"></i>
             {{ getStatusLabel(quote.status) }}
           </soft-badge>
-          <soft-button color="secondary" variant="gradient" class="mb-0">
+          <soft-button
+            color="secondary"
+            variant="gradient"
+            class="mb-0"
+            :disabled="false"
+            @click="exportPdf"
+          >
             Export PDF
           </soft-button>
         </div>
@@ -56,7 +62,7 @@
         </div>
         <div>
           <h6 class="text-lg mb-0 mt-1">
-            {{ quote.client?.name || "Client inconnu" }}
+            {{ recipientName }}
           </h6>
           <p class="text-sm mb-3">
             {{ quote.lines?.length || 0 }} ligne(s) dans ce devis.
@@ -109,18 +115,18 @@
         >
           <div class="d-flex flex-column">
             <h6 class="mb-3 text-sm">
-              {{ quote.client?.name || "Client inconnu" }}
+              {{ recipientName }}
             </h6>
             <span class="mb-2 text-xs">
               Email Address:
               <span class="text-dark ms-2 font-weight-bold">{{
-                quote.client?.email || "—"
+                quote.client?.email || groupDetailsFallback
               }}</span>
             </span>
             <span class="mb-2 text-xs">
               Phone:
               <span class="text-dark ms-2 font-weight-bold">{{
-                quote.client?.phone || "—"
+                quote.client?.phone || groupDetailsFallback
               }}</span>
             </span>
             <span class="text-xs">
@@ -159,7 +165,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted, defineProps } from "vue";
+import { computed, ref, onMounted, defineProps } from "vue";
 import { useQuoteStore } from "@/stores/quoteStore";
 import { useNotificationStore } from "@/stores/notification";
 import QuoteDetailTemplate from "@/components/templates/Quote/QuoteDetailTemplate.vue";
@@ -168,6 +174,8 @@ import QuoteLinesTable from "@/components/molecules/Quote/QuoteLinesTable.vue";
 import SoftButton from "@/components/SoftButton.vue";
 import SoftBadge from "@/components/SoftBadge.vue";
 
+const activePdfExports = new Set();
+
 const props = defineProps({
   quoteId: { type: [String, Number], required: true },
 });
@@ -181,6 +189,16 @@ const updating = ref(false);
 const error = ref(null);
 const selectedStatus = ref("brouillon");
 
+const recipientName = computed(() => {
+  if (quote.value?.client?.name) return quote.value.client.name;
+  if (quote.value?.group?.name) return quote.value.group.name;
+  return "Client inconnu";
+});
+
+const groupDetailsFallback = computed(() => {
+  return quote.value?.group?.name ? `Groupe: ${quote.value.group.name}` : "—";
+});
+
 const load = async () => {
   loading.value = true;
   error.value = null;
@@ -266,6 +284,39 @@ const onStatusSelect = (event) => {
   changeStatus(quote.value.id, newStatus);
 };
 
+const exportPdf = async () => {
+  if (!quote.value?.id) return;
+
+  const exportKey = String(quote.value.id);
+  if (activePdfExports.has(exportKey)) return;
+
+  activePdfExports.add(exportKey);
+
+  try {
+    const blob = await quoteStore.downloadQuotePdf(quote.value.id);
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+
+    link.href = url;
+    link.download = `devis-${quote.value.reference || quote.value.id}.pdf`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+
+    notificationStore.success("Export PDF", "Le devis a ete telecharge.", 3000);
+  } catch (e) {
+    console.error(e);
+    notificationStore.error(
+      "Erreur",
+      "Impossible d'exporter le devis en PDF",
+      3000
+    );
+  } finally {
+    activePdfExports.delete(exportKey);
+  }
+};
+
 /* ── Status Update ── */
 const changeStatus = (id, newStatus) => {
   if (!id || updating.value) return;
diff --git a/thanasoft-front/src/components/Organism/Stock/ProductDetailsPresentation.vue b/thanasoft-front/src/components/Organism/Stock/ProductDetailsPresentation.vue
index a0afbab..0f66251 100644
--- a/thanasoft-front/src/components/Organism/Stock/ProductDetailsPresentation.vue
+++ b/thanasoft-front/src/components/Organism/Stock/ProductDetailsPresentation.vue
@@ -1,6 +1,5 @@
 <template>
   <div class="pdp">
-
     <!-- ── Loading ── -->
     <div v-if="loading" class="pdp__state">
       <div class="pdp__spinner"></div>
@@ -9,17 +8,41 @@
 
     <!-- ── Error ── -->
     <div v-else-if="error" class="pdp__state">
-      <svg class="pdp__state-icon pdp__state-icon--danger" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="9"/><path d="M12 8v4M12 16h.01"/></svg>
+      <svg
+        class="pdp__state-icon pdp__state-icon--danger"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.5"
+      >
+        <circle cx="12" cy="12" r="9" />
+        <path d="M12 8v4M12 16h.01" />
+      </svg>
       <h5>Erreur de chargement</h5>
       <p>{{ error }}</p>
-      <SoftButton color="primary" variant="outline" size="sm" @click="loadProduct">
+      <SoftButton
+        color="primary"
+        variant="outline"
+        size="sm"
+        @click="loadProduct"
+      >
         Réessayer
       </SoftButton>
     </div>
 
     <!-- ── Empty ── -->
     <div v-else-if="!productData" class="pdp__state">
-      <svg class="pdp__state-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1"><path d="M20 7H4a2 2 0 00-2 2v9a2 2 0 002 2h16a2 2 0 002-2V9a2 2 0 00-2-2zM16 3H8l-2 4h12l-2-4z"/></svg>
+      <svg
+        class="pdp__state-icon"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1"
+      >
+        <path
+          d="M20 7H4a2 2 0 00-2 2v9a2 2 0 002 2h16a2 2 0 002-2V9a2 2 0 00-2-2zM16 3H8l-2 4h12l-2-4z"
+        />
+      </svg>
       <h5>Produit introuvable</h5>
       <p>Ce produit n'existe pas ou a été supprimé.</p>
       <SoftButton color="primary" variant="outline" size="sm" @click="goBack">
@@ -29,12 +52,25 @@
 
     <!-- ── Main Content ── -->
     <template v-else>
-
       <!-- Top bar -->
       <div class="pdp__topbar">
         <div class="pdp__topbar-left">
-          <SoftButton color="secondary" variant="outline" size="sm" @click="goBack">
-            <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M10 3L5 8l5 5"/></svg>
+          <SoftButton
+            color="secondary"
+            variant="outline"
+            size="sm"
+            @click="goBack"
+          >
+            <svg
+              width="14"
+              height="14"
+              viewBox="0 0 16 16"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.5"
+            >
+              <path d="M10 3L5 8l5 5" />
+            </svg>
             Retour
           </SoftButton>
           <div class="pdp__breadcrumb">
@@ -47,22 +83,84 @@
         </div>
         <div class="pdp__topbar-actions">
           <template v-if="!isEditMode">
-            <SoftButton color="primary" variant="outline" size="sm" @click="toggleEditMode">
-              <svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M11.5 2.5l2 2L5 13H3v-2L11.5 2.5z"/></svg>
+            <SoftButton
+              color="primary"
+              variant="outline"
+              size="sm"
+              @click="toggleEditMode"
+            >
+              <svg
+                width="13"
+                height="13"
+                viewBox="0 0 16 16"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.5"
+              >
+                <path d="M11.5 2.5l2 2L5 13H3v-2L11.5 2.5z" />
+              </svg>
               Modifier
             </SoftButton>
-            <SoftButton color="danger" variant="gradient" size="sm" :disabled="loading" @click="deleteProduct">
-              <svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 4h10M6 4V2h4v2M5 4v9a1 1 0 001 1h4a1 1 0 001-1V4"/></svg>
+            <SoftButton
+              color="danger"
+              variant="gradient"
+              size="sm"
+              :disabled="loading"
+              @click="deleteProduct"
+            >
+              <svg
+                width="13"
+                height="13"
+                viewBox="0 0 16 16"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.5"
+              >
+                <path d="M3 4h10M6 4V2h4v2M5 4v9a1 1 0 001 1h4a1 1 0 001-1V4" />
+              </svg>
               Supprimer
             </SoftButton>
           </template>
           <template v-else>
-            <SoftButton color="secondary" variant="outline" size="sm" :disabled="saving" @click="cancelEdit">
+            <SoftButton
+              color="secondary"
+              variant="outline"
+              size="sm"
+              :disabled="saving"
+              @click="cancelEdit"
+            >
               Annuler
             </SoftButton>
-            <SoftButton color="primary" variant="gradient" size="sm" :disabled="saving" @click="saveProduct">
-              <svg v-if="saving" class="pdp-btn__spin" width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1v3M8 12v3M1 8h3M12 8h3"/></svg>
-              <svg v-else width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 8l3 3 7-7"/></svg>
+            <SoftButton
+              color="primary"
+              variant="gradient"
+              size="sm"
+              :disabled="saving"
+              @click="saveProduct"
+            >
+              <svg
+                v-if="saving"
+                class="pdp-btn__spin"
+                width="13"
+                height="13"
+                viewBox="0 0 16 16"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+              >
+                <path d="M8 1v3M8 12v3M1 8h3M12 8h3" />
+              </svg>
+              <svg
+                v-else
+                width="13"
+                height="13"
+                viewBox="0 0 16 16"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.5"
+              >
+                <path d="M3 8l3 3 7-7" />
+              </svg>
               {{ saving ? "Sauvegarde…" : "Sauvegarder" }}
             </SoftButton>
           </template>
@@ -71,7 +169,17 @@
 
       <!-- Validation errors -->
       <div v-if="hasValidationErrors" class="pdp__errors" role="alert">
-        <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="6"/><path d="M8 5v3M8 10.5v.5"/></svg>
+        <svg
+          width="14"
+          height="14"
+          viewBox="0 0 16 16"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.5"
+        >
+          <circle cx="8" cy="8" r="6" />
+          <path d="M8 5v3M8 10.5v.5" />
+        </svg>
         <div>
           <strong>Erreurs de validation</strong>
           <ul>
@@ -84,7 +192,6 @@
 
       <!-- Body -->
       <div class="pdp__body">
-
         <!-- Sidebar -->
         <product-sidebar
           v-model="activeTab"
@@ -99,11 +206,19 @@
 
         <!-- Panel -->
         <div class="pdp__panel">
-
           <!-- Edit mode banner -->
           <transition name="pdp-fade">
             <div v-if="isEditMode" class="pdp__edit-banner">
-              <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M11.5 2.5l2 2L5 13H3v-2L11.5 2.5z"/></svg>
+              <svg
+                width="14"
+                height="14"
+                viewBox="0 0 16 16"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.5"
+              >
+                <path d="M11.5 2.5l2 2L5 13H3v-2L11.5 2.5z" />
+              </svg>
               Mode édition — modifiez les champs puis cliquez sur Sauvegarder
             </div>
           </transition>
@@ -121,13 +236,25 @@
                 </div>
                 <div class="pdp-hero__info">
                   <h1 class="pdp-hero__name">{{ productData.nom }}</h1>
-                  <p v-if="productData.reference" class="pdp-hero__ref">{{ productData.reference }}</p>
+                  <p v-if="productData.reference" class="pdp-hero__ref">
+                    {{ productData.reference }}
+                  </p>
                   <div class="pdp-hero__badges">
-                    <product-badge :variant="productData.is_low_stock ? 'warning' : 'success'">
-                      {{ productData.is_low_stock ? "Stock faible" : "Stock OK" }}
+                    <product-badge
+                      :variant="
+                        productData.is_low_stock ? 'warning' : 'success'
+                      "
+                    >
+                      {{
+                        productData.is_low_stock ? "Stock faible" : "Stock OK"
+                      }}
                     </product-badge>
-                    <product-badge v-if="isExpired" variant="danger">Expiré</product-badge>
-                    <product-badge v-else-if="isExpiringSoon" variant="info">Expire bientôt</product-badge>
+                    <product-badge v-if="isExpired" variant="danger"
+                      >Expiré</product-badge
+                    >
+                    <product-badge v-else-if="isExpiringSoon" variant="info"
+                      >Expire bientôt</product-badge
+                    >
                   </div>
                 </div>
               </div>
@@ -175,7 +302,19 @@
                   target="_blank"
                   class="pdp-doc"
                 >
-                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6z"/><path d="M14 2v6h6M12 18v-6M9 15l3 3 3-3"/></svg>
+                  <svg
+                    width="16"
+                    height="16"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                  >
+                    <path
+                      d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6z"
+                    />
+                    <path d="M14 2v6h6M12 18v-6M9 15l3 3 3-3" />
+                  </svg>
                   <span class="pdp-doc__name">Fiche technique</span>
                   <span class="pdp-doc__action">Télécharger</span>
                 </a>
@@ -215,7 +354,6 @@
               </div>
             </div>
           </div>
-
         </div>
       </div>
     </template>
@@ -225,109 +363,173 @@
 <script setup>
 import { ref, onMounted, computed, defineEmits, defineProps } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import ProductService           from "@/services/product";
-import { useProductStore }      from "@/stores/productStore";
+import ProductService from "@/services/product";
+import { useProductStore } from "@/stores/productStore";
 import { useProductCategoryStore } from "@/stores/productCategoryStore";
 
 /* atoms */
-import ProductImage    from "@/components/atoms/Product/ProductImage.vue";
-import ProductBadge    from "@/components/atoms/Product/ProductBadge.vue";
-import SoftButton      from "@/components/SoftButton.vue";
+import ProductImage from "@/components/atoms/Product/ProductImage.vue";
+import ProductBadge from "@/components/atoms/Product/ProductBadge.vue";
+import SoftButton from "@/components/SoftButton.vue";
 /* molecules */
-import ProductSidebar         from "@/components/molecules/Product/ProductSidebar.vue";
-import ProductInfoSection     from "@/components/molecules/Product/ProductInfoSection.vue";
-import ProductStockSection    from "@/components/molecules/Product/ProductStockSection.vue";
+import ProductSidebar from "@/components/molecules/Product/ProductSidebar.vue";
+import ProductInfoSection from "@/components/molecules/Product/ProductInfoSection.vue";
+import ProductStockSection from "@/components/molecules/Product/ProductStockSection.vue";
 import ProductSupplierSection from "@/components/molecules/Product/ProductSupplierSection.vue";
 import ProductMovementsSection from "@/components/molecules/Product/ProductMovementsSection.vue";
 
-const route        = useRoute();
-const router       = useRouter();
+const route = useRoute();
+const router = useRouter();
 const productStore = useProductStore();
 const productCategoryStore = useProductCategoryStore();
 const emit = defineEmits(["view-supplier"]);
 
 /* ── state ──────────────────────────────────────────────── */
-const loading          = ref(true);
-const saving           = ref(false);
-const error            = ref(null);
+const loading = ref(true);
+const saving = ref(false);
+const error = ref(null);
 const validationErrors = ref({});
-const productData      = ref(null);
-const isEditMode       = ref(false);
-const originalData     = ref(null);
-const categories       = ref([]);
-const activeTab        = ref("details");
-const stockMovements   = ref([]);
+const productData = ref(null);
+const isEditMode = ref(false);
+const originalData = ref(null);
+const categories = ref([]);
+const activeTab = ref("details");
+const stockMovements = ref([]);
 
 const formData = ref({
-  nom: "", reference: "", categorie_id: "", fabricant: "",
-  numero_lot: "", date_expiration: "", unite: "", description: "",
-  stock_actuel: "", stock_minimum: "", prix_unitaire: "",
-  conditionnement_nom: "", conditionnement_quantite: "",
+  nom: "",
+  reference: "",
+  categorie_id: "",
+  fabricant: "",
+  numero_lot: "",
+  date_expiration: "",
+  unite: "",
+  description: "",
+  stock_actuel: "",
+  stock_minimum: "",
+  prix_unitaire: "",
+  conditionnement_nom: "",
+  conditionnement_quantite: "",
 });
 
 /* ── tabs config ─────────────────────────────────────────── */
 // Using inline SVG render functions to keep it self-contained
 // Replace with your icon library's components as needed
 import { defineComponent, h } from "vue";
-const IconInfo = defineComponent({ render: () => h("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "1.5" }, [h("circle", { cx: "8", cy: "8", r: "6" }), h("path", { d: "M8 7v5M8 5.5v.5" })]) });
-const IconBox  = defineComponent({ render: () => h("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "1.5" }, [h("path", { d: "M2 5l6-3 6 3v6l-6 3-6-3V5z" }), h("path", { d: "M8 2v12M2 5l6 3 6-3" })]) });
-const IconMove = defineComponent({ render: () => h("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "1.5" }, [h("path", { d: "M3 8h10M9 4l4 4-4 4" })]) });
+const IconInfo = defineComponent({
+  render: () =>
+    h(
+      "svg",
+      {
+        viewBox: "0 0 16 16",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "1.5",
+      },
+      [
+        h("circle", { cx: "8", cy: "8", r: "6" }),
+        h("path", { d: "M8 7v5M8 5.5v.5" }),
+      ]
+    ),
+});
+const IconBox = defineComponent({
+  render: () =>
+    h(
+      "svg",
+      {
+        viewBox: "0 0 16 16",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "1.5",
+      },
+      [
+        h("path", { d: "M2 5l6-3 6 3v6l-6 3-6-3V5z" }),
+        h("path", { d: "M8 2v12M2 5l6 3 6-3" }),
+      ]
+    ),
+});
+const IconMove = defineComponent({
+  render: () =>
+    h(
+      "svg",
+      {
+        viewBox: "0 0 16 16",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "1.5",
+      },
+      [h("path", { d: "M3 8h10M9 4l4 4-4 4" })]
+    ),
+});
 
 const tabs = [
-  { id: "details",   label: "Détails",          icon: IconInfo },
-  { id: "stock",     label: "Stock",             icon: IconBox  },
-  { id: "movements", label: "Mouvements",        icon: IconMove },
+  { id: "details", label: "Détails", icon: IconInfo },
+  { id: "stock", label: "Stock", icon: IconBox },
+  { id: "movements", label: "Mouvements", icon: IconMove },
 ];
 
 /* ── computed ────────────────────────────────────────────── */
 const productId = computed(() => parseInt(route.params.id));
 
-const hasValidationErrors = computed(() => Object.keys(validationErrors.value).length > 0);
+const hasValidationErrors = computed(
+  () => Object.keys(validationErrors.value).length > 0
+);
 
 const isExpired = computed(() => ProductService.isExpired(productData.value));
-const isExpiringSoon = computed(() => ProductService.isExpiringSoon(productData.value, 30));
-const hasDocuments = computed(() => !!productData.value?.media?.fiche_technique_url);
+const isExpiringSoon = computed(() =>
+  ProductService.isExpiringSoon(productData.value, 30)
+);
+const hasDocuments = computed(
+  () => !!productData.value?.media?.fiche_technique_url
+);
 
 const displayCategoryName = computed(() => {
   if (productData.value?.category?.name) return productData.value.category.name;
   const id = productData.value?.categorie_id;
   if (!id) return "Non catégorisé";
-  return categories.value.find(c => c.id === Number(id))?.name || "Non catégorisé";
+  return (
+    categories.value.find((c) => c.id === Number(id))?.name || "Non catégorisé"
+  );
 });
 
 /* ── methods ─────────────────────────────────────────────── */
 const initializeFormData = (data) => {
   formData.value = {
-    nom:                      data.nom || "",
-    reference:                data.reference || "",
-    categorie_id:             (data.categorie_id || data.category?.id)?.toString() || "",
-    fabricant:                data.fabricant || "",
-    numero_lot:               data.numero_lot || "",
-    date_expiration:          data.date_expiration || "",
-    unite:                    data.unite || "",
-    description:              data.description || "",
-    stock_actuel:             data.stock_actuel?.toString() || "",
-    stock_minimum:            data.stock_minimum?.toString() || "",
-    prix_unitaire:            data.prix_unitaire?.toString() || "",
-    conditionnement_nom:      data.conditionnement?.nom || "",
+    nom: data.nom || "",
+    reference: data.reference || "",
+    categorie_id: (data.categorie_id || data.category?.id)?.toString() || "",
+    fabricant: data.fabricant || "",
+    numero_lot: data.numero_lot || "",
+    date_expiration: data.date_expiration || "",
+    unite: data.unite || "",
+    description: data.description || "",
+    stock_actuel: data.stock_actuel?.toString() || "",
+    stock_minimum: data.stock_minimum?.toString() || "",
+    prix_unitaire: data.prix_unitaire?.toString() || "",
+    conditionnement_nom: data.conditionnement?.nom || "",
     conditionnement_quantite: data.conditionnement?.quantite?.toString() || "",
   };
   validationErrors.value = {};
 };
 
 const loadProduct = async () => {
-  if (!productId.value) { error.value = "ID de produit invalide"; loading.value = false; return; }
+  if (!productId.value) {
+    error.value = "ID de produit invalide";
+    loading.value = false;
+    return;
+  }
   loading.value = true;
-  error.value   = null;
+  error.value = null;
   validationErrors.value = {};
   try {
     const res = await productStore.fetchProduct(productId.value);
-    productData.value    = res;
+    productData.value = res;
     stockMovements.value = res.stock_moves || res.stockMovements || [];
     initializeFormData(res);
-    originalData.value   = { ...res };
+    originalData.value = { ...res };
   } catch (err) {
-    error.value = err.response?.data?.message || "Erreur lors du chargement du produit";
+    error.value =
+      err.response?.data?.message || "Erreur lors du chargement du produit";
   } finally {
     loading.value = false;
   }
@@ -337,32 +539,44 @@ const loadCategories = async () => {
   try {
     const res = await productCategoryStore.fetchAllCategories();
     categories.value = res?.data || [];
-  } catch { categories.value = []; }
+  } catch {
+    categories.value = [];
+  }
 };
 
-const goBack        = () => router.push("/stock/produits");
-const toggleEditMode = () => { isEditMode.value = true; initializeFormData(productData.value); };
-const cancelEdit    = () => { if (originalData.value) initializeFormData(originalData.value); isEditMode.value = false; };
+const goBack = () => router.push("/stock/produits");
+const toggleEditMode = () => {
+  isEditMode.value = true;
+  initializeFormData(productData.value);
+};
+const cancelEdit = () => {
+  if (originalData.value) initializeFormData(originalData.value);
+  isEditMode.value = false;
+};
 
 const saveProduct = async () => {
   saving.value = true;
   validationErrors.value = {};
   try {
     await productStore.updateProduct(productId.value, {
-      nom:                      formData.value.nom,
-      reference:                formData.value.reference,
-      categorie_id:             parseInt(formData.value.categorie_id) || productData.value?.categorie_id || null,
-      fabricant:                formData.value.fabricant,
-      numero_lot:               formData.value.numero_lot,
-      date_expiration:          formData.value.date_expiration || null,
-      unite:                    formData.value.unite,
-      description:              formData.value.description,
-      stock_actuel:             parseInt(formData.value.stock_actuel) || 0,
-      stock_minimum:            parseInt(formData.value.stock_minimum) || 0,
-      prix_unitaire:            parseFloat(formData.value.prix_unitaire) || 0,
-      conditionnement_nom:      formData.value.conditionnement_nom || null,
-      conditionnement_quantite: parseInt(formData.value.conditionnement_quantite) || null,
-      conditionnement_unite:    formData.value.unite || null,
+      nom: formData.value.nom,
+      reference: formData.value.reference,
+      categorie_id:
+        parseInt(formData.value.categorie_id) ||
+        productData.value?.categorie_id ||
+        null,
+      fabricant: formData.value.fabricant,
+      numero_lot: formData.value.numero_lot,
+      date_expiration: formData.value.date_expiration || null,
+      unite: formData.value.unite,
+      description: formData.value.description,
+      stock_actuel: parseInt(formData.value.stock_actuel) || 0,
+      stock_minimum: parseInt(formData.value.stock_minimum) || 0,
+      prix_unitaire: parseFloat(formData.value.prix_unitaire) || 0,
+      conditionnement_nom: formData.value.conditionnement_nom || null,
+      conditionnement_quantite:
+        parseInt(formData.value.conditionnement_quantite) || null,
+      conditionnement_unite: formData.value.unite || null,
     });
     await loadProduct();
     isEditMode.value = false;
@@ -370,7 +584,8 @@ const saveProduct = async () => {
     if (err.response?.status === 422 && err.response?.data?.errors) {
       validationErrors.value = err.response.data.errors;
     } else {
-      error.value = err.response?.data?.message || "Erreur lors de la sauvegarde";
+      error.value =
+        err.response?.data?.message || "Erreur lors de la sauvegarde";
     }
   } finally {
     saving.value = false;
@@ -389,16 +604,26 @@ const deleteProduct = async () => {
 
 const handleViewSupplier = (supplier) => emit("view-supplier", supplier);
 
-const getFieldLabel = (field) => ({
-  nom: "Nom", reference: "Référence", categorie_id: "Catégorie",
-  fabricant: "Fabricant", numero_lot: "N° de lot",
-  date_expiration: "Date d'expiration", unite: "Unité",
-  stock_actuel: "Stock actuel", stock_minimum: "Stock minimum",
-  prix_unitaire: "Prix unitaire", conditionnement_nom: "Conditionnement",
-  conditionnement_quantite: "Qté conditionnement",
-})[field] || field;
+const getFieldLabel = (field) =>
+  ({
+    nom: "Nom",
+    reference: "Référence",
+    categorie_id: "Catégorie",
+    fabricant: "Fabricant",
+    numero_lot: "N° de lot",
+    date_expiration: "Date d'expiration",
+    unite: "Unité",
+    stock_actuel: "Stock actuel",
+    stock_minimum: "Stock minimum",
+    prix_unitaire: "Prix unitaire",
+    conditionnement_nom: "Conditionnement",
+    conditionnement_quantite: "Qté conditionnement",
+  }[field] || field);
 
-onMounted(() => { loadCategories(); loadProduct(); });
+onMounted(() => {
+  loadCategories();
+  loadProduct();
+});
 </script>
 
 <style scoped>
@@ -427,18 +652,37 @@ onMounted(() => { loadCategories(); loadProduct(); });
   text-align: center;
   color: #6b7280;
 }
-.pdp__state h5 { font-size: 16px; font-weight: 600; color: #111827; margin: 0; }
-.pdp__state p  { font-size: 14px; margin: 0; }
-.pdp__state-icon { width: 36px; height: 36px; color: #d1d5db; }
-.pdp__state-icon--danger { color: #fca5a5; }
+.pdp__state h5 {
+  font-size: 16px;
+  font-weight: 600;
+  color: #111827;
+  margin: 0;
+}
+.pdp__state p {
+  font-size: 14px;
+  margin: 0;
+}
+.pdp__state-icon {
+  width: 36px;
+  height: 36px;
+  color: #d1d5db;
+}
+.pdp__state-icon--danger {
+  color: #fca5a5;
+}
 .pdp__spinner {
-  width: 24px; height: 24px;
+  width: 24px;
+  height: 24px;
   border: 2px solid #e5e7eb;
   border-top-color: #111827;
   border-radius: 50%;
   animation: pdp-spin 0.75s linear infinite;
 }
-@keyframes pdp-spin { to { transform: rotate(360deg); } }
+@keyframes pdp-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
 
 /* ── top bar ─────────────────────────────────────────────── */
 .pdp__topbar {
@@ -448,8 +692,16 @@ onMounted(() => { loadCategories(); loadProduct(); });
   gap: 1rem;
   flex-wrap: wrap;
 }
-.pdp__topbar-left  { display: flex; align-items: center; gap: 0.75rem; }
-.pdp__topbar-actions { display: flex; align-items: center; gap: 0.5rem; }
+.pdp__topbar-left {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+.pdp__topbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
 
 .pdp__breadcrumb {
   display: flex;
@@ -458,8 +710,13 @@ onMounted(() => { loadCategories(); loadProduct(); });
   font-size: 13px;
   color: #9ca3af;
 }
-.pdp__breadcrumb-sep     { color: #d1d5db; }
-.pdp__breadcrumb-current { color: #374151; font-weight: 500; }
+.pdp__breadcrumb-sep {
+  color: #d1d5db;
+}
+.pdp__breadcrumb-current {
+  color: #374151;
+  font-weight: 500;
+}
 
 /* ── errors ──────────────────────────────────────────────── */
 .pdp__errors {
@@ -474,10 +731,22 @@ onMounted(() => { loadCategories(); loadProduct(); });
   font-size: 13px;
   color: #991b1b;
 }
-.pdp__errors svg { flex-shrink: 0; margin-top: 1px; }
-.pdp__errors strong { display: block; font-weight: 600; margin-bottom: 4px; }
-.pdp__errors ul { margin: 0; padding-left: 1.25rem; }
-.pdp__errors li { margin-bottom: 2px; }
+.pdp__errors svg {
+  flex-shrink: 0;
+  margin-top: 1px;
+}
+.pdp__errors strong {
+  display: block;
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+.pdp__errors ul {
+  margin: 0;
+  padding-left: 1.25rem;
+}
+.pdp__errors li {
+  margin-bottom: 2px;
+}
 
 /* ── edit banner ─────────────────────────────────────────── */
 .pdp__edit-banner {
@@ -529,8 +798,12 @@ onMounted(() => { loadCategories(); loadProduct(); });
   padding: 2px 7px;
   border-radius: 20px;
 }
-.pdp-card__body { padding: 1.25rem; }
-.pdp-card__body--flush { padding: 0; }
+.pdp-card__body {
+  padding: 1.25rem;
+}
+.pdp-card__body--flush {
+  padding: 0;
+}
 
 /* ── hero ────────────────────────────────────────────────── */
 .pdp-hero {
@@ -559,9 +832,13 @@ onMounted(() => { loadCategories(); loadProduct(); });
   font-size: 12px;
   color: #8392ab;
   margin: 0 0 0.625rem;
-  font-family: 'SF Mono', 'Fira Code', monospace;
+  font-family: "SF Mono", "Fira Code", monospace;
+}
+.pdp-hero__badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
 }
-.pdp-hero__badges { display: flex; flex-wrap: wrap; gap: 5px; }
 
 /* ── doc item ────────────────────────────────────────────── */
 .pdp-doc {
@@ -576,9 +853,18 @@ onMounted(() => { loadCategories(); loadProduct(); });
   transition: background 0.12s, border-color 0.12s;
   color: #374151;
 }
-.pdp-doc:hover { background: #f3f4f6; border-color: #d1d5db; }
-.pdp-doc svg   { color: #dc2626; flex-shrink: 0; }
-.pdp-doc__name { font-size: 14px; font-weight: 500; }
+.pdp-doc:hover {
+  background: #f3f4f6;
+  border-color: #d1d5db;
+}
+.pdp-doc svg {
+  color: #dc2626;
+  flex-shrink: 0;
+}
+.pdp-doc__name {
+  font-size: 14px;
+  font-weight: 500;
+}
 .pdp-doc__action {
   font-size: 12px;
   color: #6b7280;
@@ -600,10 +886,19 @@ onMounted(() => { loadCategories(); loadProduct(); });
   transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.1s;
   white-space: nowrap;
 }
-.pdp-btn:active:not(:disabled) { transform: scale(0.97); }
-.pdp-btn:disabled { opacity: 0.45; cursor: not-allowed; }
+.pdp-btn:active:not(:disabled) {
+  transform: scale(0.97);
+}
+.pdp-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
 
-.pdp-btn--dark    { background: #111827; color: #fff; border-color: #111827; }
+.pdp-btn--dark {
+  background: #111827;
+  color: #fff;
+  border-color: #111827;
+}
 .pdp-btn--dark {
   background: linear-gradient(310deg, #5e72e4 0%, #825ee4 100%);
   color: #fff;
@@ -623,26 +918,58 @@ onMounted(() => { loadCategories(); loadProduct(); });
   border-color: #5e72e4;
 }
 
-.pdp-btn--ghost   { background: transparent; color: #6b7280; border-color: transparent; }
-.pdp-btn--ghost:hover:not(:disabled) { background: #f3f4f6; color: #344767; }
+.pdp-btn--ghost {
+  background: transparent;
+  color: #6b7280;
+  border-color: transparent;
+}
+.pdp-btn--ghost:hover:not(:disabled) {
+  background: #f3f4f6;
+  color: #344767;
+}
 
-.pdp-btn--danger  { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
-.pdp-btn--danger:hover:not(:disabled) { background: #fee2e2; border-color: #fca5a5; }
+.pdp-btn--danger {
+  background: #fef2f2;
+  color: #991b1b;
+  border-color: #fecaca;
+}
+.pdp-btn--danger:hover:not(:disabled) {
+  background: #fee2e2;
+  border-color: #fca5a5;
+}
 
-.pdp-btn--sm { padding: 5px 10px; font-size: 12px; }
+.pdp-btn--sm {
+  padding: 5px 10px;
+  font-size: 12px;
+}
 
-.pdp-btn__spin { animation: pdp-spin 0.75s linear infinite; }
+.pdp-btn__spin {
+  animation: pdp-spin 0.75s linear infinite;
+}
 
 /* ── panel ───────────────────────────────────────────────── */
-.pdp__panel { min-width: 0; }
+.pdp__panel {
+  min-width: 0;
+}
 
 /* ── transitions ─────────────────────────────────────────── */
-.pdp-fade-enter-active, .pdp-fade-leave-active { transition: opacity 0.2s, transform 0.2s; }
-.pdp-fade-enter-from, .pdp-fade-leave-to { opacity: 0; transform: translateY(-4px); }
+.pdp-fade-enter-active,
+.pdp-fade-leave-active {
+  transition: opacity 0.2s, transform 0.2s;
+}
+.pdp-fade-enter-from,
+.pdp-fade-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
 
 /* ── responsive ──────────────────────────────────────────── */
 @media (max-width: 768px) {
-  .pdp__body { grid-template-columns: 1fr; }
-  .pdp { padding: 1rem; }
+  .pdp__body {
+    grid-template-columns: 1fr;
+  }
+  .pdp {
+    padding: 1rem;
+  }
 }
 </style>
diff --git a/thanasoft-front/src/components/Organism/Stock/ReceptionDetailPresentation.vue b/thanasoft-front/src/components/Organism/Stock/ReceptionDetailPresentation.vue
index 54ff602..b0d5c09 100644
--- a/thanasoft-front/src/components/Organism/Stock/ReceptionDetailPresentation.vue
+++ b/thanasoft-front/src/components/Organism/Stock/ReceptionDetailPresentation.vue
@@ -203,6 +203,7 @@ const { currentGoodsReceipt: goodsReceipt, loading, error } = storeToRefs(
 );
 
 const isUpdatingStatus = ref(false);
+let receiptStatusRequestId = 0;
 
 const availableStatuses = ["draft", "posted"];
 
@@ -262,6 +263,8 @@ const getStatusClass = (status) => {
 const changeStatus = async (newStatus) => {
   if (!goodsReceipt.value || goodsReceipt.value.status === newStatus) return;
 
+  const requestId = ++receiptStatusRequestId;
+
   try {
     isUpdatingStatus.value = true;
     await goodsReceiptStore.updateGoodsReceipt({
@@ -272,7 +275,9 @@ const changeStatus = async (newStatus) => {
   } catch (e) {
     console.error("Failed to update receipt status", e);
   } finally {
-    isUpdatingStatus.value = false;
+    if (requestId === receiptStatusRequestId) {
+      isUpdatingStatus.value = false;
+    }
   }
 };
 
diff --git a/thanasoft-front/src/components/atoms/Product/FieldDisplay.vue b/thanasoft-front/src/components/atoms/Product/FieldDisplay.vue
index 17a6e64..9d1abc8 100644
--- a/thanasoft-front/src/components/atoms/Product/FieldDisplay.vue
+++ b/thanasoft-front/src/components/atoms/Product/FieldDisplay.vue
@@ -11,9 +11,9 @@
 import { defineProps } from "vue";
 
 defineProps({
-  label:      { type: String, required: true },
-  value:      { type: [String, Number], default: "" },
-  fallback:   { type: String, default: "—" },
+  label: { type: String, required: true },
+  value: { type: [String, Number], default: "" },
+  fallback: { type: String, default: "—" },
   valueClass: { type: String, default: "" },
 });
 </script>
@@ -27,7 +27,9 @@ defineProps({
   padding: 10px 0;
   border-bottom: 1px solid #f3f4f6;
 }
-.field-row:last-child { border-bottom: none; }
+.field-row:last-child {
+  border-bottom: none;
+}
 
 .field-row__label {
   font-size: 12px;
@@ -43,6 +45,12 @@ defineProps({
   color: #111827;
   line-height: 1.5;
 }
-.field-row__value.expired      { color: #dc2626; font-weight: 500; }
-.field-row__value.expiring-soon { color: #d97706; font-weight: 500; }
+.field-row__value.expired {
+  color: #dc2626;
+  font-weight: 500;
+}
+.field-row__value.expiring-soon {
+  color: #d97706;
+  font-weight: 500;
+}
 </style>
diff --git a/thanasoft-front/src/components/atoms/Product/FieldInput.vue b/thanasoft-front/src/components/atoms/Product/FieldInput.vue
index 259eb59..2aaa8f7 100644
--- a/thanasoft-front/src/components/atoms/Product/FieldInput.vue
+++ b/thanasoft-front/src/components/atoms/Product/FieldInput.vue
@@ -41,20 +41,24 @@ import { defineProps, defineEmits } from "vue";
 
 defineProps({
   modelValue: { type: [String, Number], default: "" },
-  label:      { type: String, required: true },
-  type:       { type: String, default: "text" },
-  placeholder:{ type: String, default: "" },
-  required:   { type: Boolean, default: false },
-  error:      { type: String, default: "" },
-  rows:       { type: Number, default: 3 },
-  min:        { type: [String, Number], default: undefined },
-  step:       { type: [String, Number], default: undefined },
+  label: { type: String, required: true },
+  type: { type: String, default: "text" },
+  placeholder: { type: String, default: "" },
+  required: { type: Boolean, default: false },
+  error: { type: String, default: "" },
+  rows: { type: Number, default: 3 },
+  min: { type: [String, Number], default: undefined },
+  step: { type: [String, Number], default: undefined },
 });
 defineEmits(["update:modelValue"]);
 </script>
 
 <style scoped>
-.field-input-group { display: flex; flex-direction: column; gap: 5px; }
+.field-input-group {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
 
 .field-input-group__label {
   font-size: 11px;
@@ -63,7 +67,10 @@ defineEmits(["update:modelValue"]);
   text-transform: uppercase;
   color: #6b7280;
 }
-.field-input-group__req { color: #dc2626; margin-left: 2px; }
+.field-input-group__req {
+  color: #dc2626;
+  margin-left: 2px;
+}
 
 .field-input-group__ctrl {
   font-size: 14px;
@@ -82,8 +89,12 @@ defineEmits(["update:modelValue"]);
   border-color: #5e72e4;
   box-shadow: 0 0 0 3px rgba(94, 114, 228, 0.18);
 }
-.field-input-group__ctrl.is-invalid { border-color: #dc2626; }
-.field-input-group__ctrl.is-invalid:focus { box-shadow: 0 0 0 3px rgba(220,38,38,0.08); }
+.field-input-group__ctrl.is-invalid {
+  border-color: #dc2626;
+}
+.field-input-group__ctrl.is-invalid:focus {
+  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.08);
+}
 
 .field-input-group__error {
   font-size: 12px;
diff --git a/thanasoft-front/src/components/atoms/Product/ProductBadge.vue b/thanasoft-front/src/components/atoms/Product/ProductBadge.vue
index 00c1588..4788f75 100644
--- a/thanasoft-front/src/components/atoms/Product/ProductBadge.vue
+++ b/thanasoft-front/src/components/atoms/Product/ProductBadge.vue
@@ -39,18 +39,43 @@ defineProps({
   flex-shrink: 0;
 }
 
-.product-badge--success  { background: rgba(45, 206, 137, 0.16); color: #2dce89; }
-.product-badge--success .product-badge__dot { background: #2dce89; }
+.product-badge--success {
+  background: rgba(45, 206, 137, 0.16);
+  color: #2dce89;
+}
+.product-badge--success .product-badge__dot {
+  background: #2dce89;
+}
 
-.product-badge--warning  { background: rgba(251, 99, 64, 0.16); color: #fb6340; }
-.product-badge--warning .product-badge__dot { background: #fb6340; }
+.product-badge--warning {
+  background: rgba(251, 99, 64, 0.16);
+  color: #fb6340;
+}
+.product-badge--warning .product-badge__dot {
+  background: #fb6340;
+}
 
-.product-badge--danger   { background: rgba(245, 54, 92, 0.16); color: #f5365c; }
-.product-badge--danger .product-badge__dot  { background: #f5365c; }
+.product-badge--danger {
+  background: rgba(245, 54, 92, 0.16);
+  color: #f5365c;
+}
+.product-badge--danger .product-badge__dot {
+  background: #f5365c;
+}
 
-.product-badge--info     { background: rgba(17, 205, 239, 0.16); color: #11cdef; }
-.product-badge--info .product-badge__dot    { background: #11cdef; }
+.product-badge--info {
+  background: rgba(17, 205, 239, 0.16);
+  color: #11cdef;
+}
+.product-badge--info .product-badge__dot {
+  background: #11cdef;
+}
 
-.product-badge--neutral  { background: rgba(131, 146, 171, 0.16); color: #8392ab; }
-.product-badge--neutral .product-badge__dot { background: #8392ab; }
+.product-badge--neutral {
+  background: rgba(131, 146, 171, 0.16);
+  color: #8392ab;
+}
+.product-badge--neutral .product-badge__dot {
+  background: #8392ab;
+}
 </style>
diff --git a/thanasoft-front/src/components/atoms/Product/ProductStatCard.vue b/thanasoft-front/src/components/atoms/Product/ProductStatCard.vue
index a989c1b..0fd977d 100644
--- a/thanasoft-front/src/components/atoms/Product/ProductStatCard.vue
+++ b/thanasoft-front/src/components/atoms/Product/ProductStatCard.vue
@@ -13,10 +13,10 @@
 import { defineProps } from "vue";
 
 defineProps({
-  label:      { type: String, required: true },
-  value:      { type: [String, Number], required: true },
-  unit:       { type: String, default: "" },
-  sub:        { type: String, default: "" },
+  label: { type: String, required: true },
+  value: { type: [String, Number], required: true },
+  unit: { type: String, default: "" },
+  sub: { type: String, default: "" },
   valueClass: { type: String, default: "" },
 });
 </script>
@@ -49,8 +49,12 @@ defineProps({
   color: #111827;
   line-height: 1.1;
 }
-.stat-card__number.low  { color: #dc2626; }
-.stat-card__number.ok   { color: #059669; }
+.stat-card__number.low {
+  color: #dc2626;
+}
+.stat-card__number.ok {
+  color: #059669;
+}
 .stat-card__unit {
   font-size: 13px;
   font-weight: 500;
diff --git a/thanasoft-front/src/components/molecules/ClientGroup/ClientGroupForm.vue b/thanasoft-front/src/components/molecules/ClientGroup/ClientGroupForm.vue
index de49692..6c23908 100644
--- a/thanasoft-front/src/components/molecules/ClientGroup/ClientGroupForm.vue
+++ b/thanasoft-front/src/components/molecules/ClientGroup/ClientGroupForm.vue
@@ -30,6 +30,41 @@
           </div>
         </div>
 
+        <div class="row mt-3">
+          <div class="col-md-12">
+            <label class="form-label">Clients du groupe</label>
+            <ClientSearchInput
+              :exclude-ids="selectedClientIds"
+              @select="handleClientSelect"
+            />
+
+            <div v-if="selectedClients.length" class="mt-3">
+              <span class="text-sm fw-bold">Clients sélectionnés :</span>
+              <div class="mt-2 d-flex flex-column gap-2">
+                <div
+                  v-for="client in selectedClients"
+                  :key="client.id"
+                  class="d-flex align-items-center justify-content-between p-2 border rounded bg-light"
+                >
+                  <div class="d-flex flex-column">
+                    <span class="font-weight-bold text-sm">{{ client.name }}</span>
+                    <span class="text-xs text-muted">
+                      {{ client.email || "Pas d'email" }}
+                    </span>
+                  </div>
+                  <button
+                    type="button"
+                    class="btn btn-link text-danger mb-0 p-0"
+                    @click="removeClient(client.id)"
+                  >
+                    <i class="fas fa-times"></i>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
         <div class="row mt-4">
           <div class="col-md-12 d-flex justify-content-end">
             <soft-button
@@ -63,13 +98,18 @@
 </template>
 
 <script setup>
-import { ref, watch, defineProps, defineEmits } from "vue";
+import { computed, ref, watch, defineProps, defineEmits } from "vue";
 import SoftButton from "@/components/SoftButton.vue";
+import ClientSearchInput from "@/components/molecules/client/ClientSearchInput.vue";
 
 const props = defineProps({
   initialData: {
     type: Object,
-    default: () => ({ name: "", description: "" }),
+    default: () => ({
+      name: "",
+      description: "",
+      clients: [],
+    }),
   },
   isEdit: {
     type: Boolean,
@@ -86,8 +126,15 @@ const emit = defineEmits(["submit", "cancel"]);
 const formData = ref({
   name: props.initialData.name || "",
   description: props.initialData.description || "",
+  clients: props.initialData.clients || [],
 });
 
+const selectedClients = computed(() => formData.value.clients || []);
+
+const selectedClientIds = computed(() =>
+  selectedClients.value.map((client) => Number(client.id))
+);
+
 watch(
   () => props.initialData,
   (newData) => {
@@ -95,13 +142,34 @@ watch(
       formData.value = {
         name: newData.name || "",
         description: newData.description || "",
+        clients: newData.clients || [],
       };
     }
   },
   { deep: true }
 );
 
+const handleClientSelect = (client) => {
+  const alreadySelected = selectedClientIds.value.includes(Number(client.id));
+
+  if (alreadySelected) {
+    return;
+  }
+
+  formData.value.clients = [...selectedClients.value, client];
+};
+
+const removeClient = (clientId) => {
+  formData.value.clients = selectedClients.value.filter(
+    (client) => Number(client.id) !== Number(clientId)
+  );
+};
+
 const handleSubmit = () => {
-  emit("submit", { ...formData.value });
+  emit("submit", {
+    name: formData.value.name,
+    description: formData.value.description,
+    client_ids: selectedClientIds.value,
+  });
 };
 </script>
diff --git a/thanasoft-front/src/components/molecules/Commande/NewCommandeForm.vue b/thanasoft-front/src/components/molecules/Commande/NewCommandeForm.vue
index a14b9fc..603b2c6 100644
--- a/thanasoft-front/src/components/molecules/Commande/NewCommandeForm.vue
+++ b/thanasoft-front/src/components/molecules/Commande/NewCommandeForm.vue
@@ -1,170 +1,142 @@
 <template>
-  <form class="commande-form" @submit.prevent="submitForm">
-    <div class="form-stepper">
-      <div class="stepper-line"></div>
-      <div
-        class="step"
-        :class="{ active: currentStep >= 1, done: currentStep > 1 }"
-      >
-        <div class="step-dot"><i class="fas fa-file-alt"></i></div>
-        <span class="step-label">Informations</span>
+  <form class="order-form" @submit.prevent="submitForm">
+    <div class="form-header">
+      <div class="form-header-inner">
+        <p class="form-eyebrow">Achats</p>
+        <h1 class="form-title">Nouvelle commande fournisseur</h1>
       </div>
-      <div
-        class="step"
-        :class="{ active: currentStep >= 2, done: currentStep > 2 }"
-      >
-        <div class="step-dot"><i class="fas fa-boxes"></i></div>
-        <span class="step-label">Articles</span>
-      </div>
-      <div class="step" :class="{ active: currentStep >= 3 }">
-        <div class="step-dot"><i class="fas fa-check"></i></div>
-        <span class="step-label">Validation</span>
+      <div class="form-header-actions">
+        <SoftButton
+          type="button"
+          color="secondary"
+          variant="outline"
+          @click="cancelForm"
+        >
+          Annuler
+        </SoftButton>
+        <SoftButton
+          type="submit"
+          color="dark"
+          variant="gradient"
+          :disabled="isSubmitting || purchaseOrderStore.loading"
+        >
+          <span
+            v-if="isSubmitting || purchaseOrderStore.loading"
+            class="btn-spinner"
+          ></span>
+          <span v-else>Créer la commande</span>
+        </SoftButton>
       </div>
     </div>
 
-    <div class="form-card" :class="{ collapsed: currentStep > 1 }">
-      <div class="card-header" @click="currentStep = 1">
-        <div class="card-header-left">
-          <div class="card-icon"><i class="fas fa-truck-loading"></i></div>
-          <div>
-            <h3 class="card-title">Informations générales</h3>
-            <p class="card-subtitle">Fournisseur, date, statut et notes</p>
-          </div>
-        </div>
-        <div class="card-header-right">
-          <SoftBadge
-            v-if="currentStep > 1"
-            color="success"
-            variant="gradient"
-            size="sm"
-            class="badge-complete-soft"
-          >
-            <i class="fas fa-check-circle"></i> Complété
-          </SoftBadge>
-          <i
-            class="fas fa-chevron-down card-toggle"
-            :class="{ rotated: currentStep === 1 }"
-          ></i>
-        </div>
-      </div>
+    <div class="form-body">
+      <!-- LEFT COLUMN -->
+      <div class="form-col form-col--main">
+        <!-- SECTION: Fournisseur & date -->
+        <section class="form-section">
+          <h2 class="section-title">Informations générales</h2>
 
-      <transition name="slide-down">
-        <div v-show="currentStep === 1" class="card-body">
-          <div class="field-grid two-col">
+          <div class="field-row two-col">
+            <!-- Supplier search -->
             <div
-              class="field-group supplier-search-container"
-              :class="{ 'has-error': errors.fournisseur_id }"
+              class="field"
+              :class="{ 'field--error': errors.fournisseur_id }"
             >
-              <label class="field-label">
-                <i class="fas fa-industry label-icon"></i>
-                Fournisseur
-                <span class="required-dot"></span>
-              </label>
-
-              <div class="search-wrapper">
-                <i class="fas fa-search search-icon"></i>
-                <SoftInput
+              <label class="field-label"
+                >Fournisseur <span class="req">*</span></label
+              >
+              <div class="input-wrap supplier-search-container">
+                <input
                   v-model="supplierSearchQuery"
                   type="text"
-                  class="field-input-soft"
-                  placeholder="Rechercher un fournisseur…"
+                  class="field-input"
+                  placeholder="Rechercher…"
+                  autocomplete="off"
                   @input="handleSupplierSearch"
                   @focus="showSupplierResults = true"
                 />
-                <button
+                <SoftButton
                   v-if="supplierSearchQuery && formData.fournisseur_id"
-                  type="button"
-                  class="clear-btn"
+                  type="SoftButton"
+                  class="input-clear"
+                  tabindex="-1"
                   @click="clearSupplier"
                 >
-                  <i class="fas fa-times"></i>
-                </button>
-              </div>
+                  ×
+                </SoftButton>
 
-              <div
-                v-if="
-                  showSupplierResults &&
-                  (supplierSearchResults.length > 0 || isSearchingSuppliers)
-                "
-                class="results-dropdown"
-              >
-                <div v-if="isSearchingSuppliers" class="dropdown-loading">
-                  <div class="loading-dots">
-                    <span></span><span></span><span></span>
+                <div
+                  v-if="
+                    showSupplierResults &&
+                    supplierSearchQuery?.trim()?.length >= 2
+                  "
+                  class="dropdown"
+                >
+                  <div v-if="isSearchingSuppliers" class="dropdown-state">
+                    <span class="loading-bar"></span>
+                    Recherche…
                   </div>
-                  <span>Recherche…</span>
+                  <template v-else-if="supplierSearchResults.length">
+                    <SoftButton
+                      v-for="s in supplierSearchResults"
+                      :key="s.id"
+                      type="button"
+                      class="dropdown-item"
+                      @mousedown.prevent="selectSupplier(s)"
+                    >
+                      <span class="dropdown-item-name">{{ s.name }}</span>
+                      <span class="dropdown-item-meta">{{
+                        s.billing_city || s.billing_address?.city || ""
+                      }}</span>
+                    </SoftButton>
+                  </template>
+                  <div v-else class="dropdown-state">Aucun résultat</div>
                 </div>
-                <template v-else>
-                  <button
-                    v-for="supplier in supplierSearchResults"
-                    :key="supplier.id"
-                    type="button"
-                    class="result-item"
-                    @click="selectSupplier(supplier)"
-                  >
-                    <div class="result-icon">
-                      <i class="fas fa-industry"></i>
-                    </div>
-                    <div class="result-info">
-                      <span class="result-name">{{ supplier.name }}</span>
-                      <span class="result-meta">
-                        {{ supplier.email || "Pas d'email" }} ·
-                        {{ supplier.billing_address?.city || "Ville inconnue" }}
-                      </span>
-                    </div>
-                  </button>
-                </template>
               </div>
-
-              <span v-if="errors.fournisseur_id" class="field-error">
-                <i class="fas fa-exclamation-circle"></i>
-                {{ errors.fournisseur_id }}
-              </span>
+              <span v-if="errors.fournisseur_id" class="field-err">{{
+                errors.fournisseur_id
+              }}</span>
             </div>
 
-            <div class="field-group">
-              <label class="field-label">
-                <i class="fas fa-calendar-day label-icon"></i>
-                Date de commande
-                <span class="required-dot"></span>
-              </label>
-              <SoftInput
+            <!-- Date -->
+            <div class="field" :class="{ 'field--error': errors.order_date }">
+              <label class="field-label"
+                >Date de commande <span class="req">*</span></label
+              >
+              <input
                 v-model="formData.order_date"
                 type="date"
-                class="field-input-soft"
-                :is-required="true"
+                class="field-input"
               />
+              <span v-if="errors.order_date" class="field-err">{{
+                errors.order_date
+              }}</span>
             </div>
           </div>
 
-          <div class="field-grid two-col">
-            <div class="field-group">
-              <label class="field-label">
-                <i class="fas fa-map-marker-alt label-icon"></i>
-                Adresse de livraison
-              </label>
-              <SoftInput
+          <div class="field-row two-col">
+            <!-- Delivery address -->
+            <div class="field">
+              <label class="field-label">Adresse de livraison</label>
+              <input
                 v-model="formData.delivery_address"
                 type="text"
-                class="field-input-soft"
-                placeholder="Adresse de livraison"
+                class="field-input"
+                placeholder="Adresse complète"
               />
             </div>
 
-            <div class="field-group">
-              <label class="field-label">
-                <i class="fas fa-tag label-icon"></i>
-                Statut
-              </label>
-              <div class="status-toggle">
+            <!-- Status -->
+            <div class="field">
+              <label class="field-label">Statut</label>
+              <div class="status-pills">
                 <SoftButton
                   type="button"
                   color="secondary"
-                  size="sm"
                   :variant="
                     formData.status === 'brouillon' ? 'gradient' : 'outline'
                   "
-                  :active="formData.status === 'brouillon'"
+                  class="pill"
                   @click="formData.status = 'brouillon'"
                 >
                   Brouillon
@@ -172,11 +144,10 @@
                 <SoftButton
                   type="button"
                   color="success"
-                  size="sm"
                   :variant="
                     formData.status === 'confirmee' ? 'gradient' : 'outline'
                   "
-                  :active="formData.status === 'confirmee'"
+                  class="pill"
                   @click="formData.status = 'confirmee'"
                 >
                   Confirmée
@@ -185,382 +156,237 @@
             </div>
           </div>
 
-          <div class="field-group">
-            <label class="field-label">
-              <i class="fas fa-sticky-note label-icon"></i>
-              Notes
-            </label>
+          <!-- Notes -->
+          <div class="field">
+            <label class="field-label">Notes</label>
             <textarea
               v-model="formData.notes"
               class="field-textarea"
               rows="3"
-              placeholder="Notes importantes…"
+              placeholder="Instructions, remarques…"
             ></textarea>
           </div>
+        </section>
 
-          <div class="card-actions">
-            <SoftButton
-              type="button"
-              color="primary"
-              variant="gradient"
-              class="soft-action-btn"
-              @click="goToStep2"
-            >
-              Continuer vers les articles <i class="fas fa-arrow-right"></i>
-            </SoftButton>
-          </div>
-        </div>
-      </transition>
-    </div>
-
-    <div class="form-card" :class="{ collapsed: currentStep < 2 }">
-      <div class="card-header" @click="currentStep >= 2 && (currentStep = 2)">
-        <div class="card-header-left">
-          <div class="card-icon card-icon--blue">
-            <i class="fas fa-box-open"></i>
-          </div>
-          <div>
-            <h3 class="card-title">Lignes de commande</h3>
-            <p class="card-subtitle">
-              {{ validLinesCount }} article{{ validLinesCount > 1 ? "s" : "" }}
-            </p>
-          </div>
-        </div>
-        <div class="card-header-right">
-          <SoftBadge
-            v-if="currentStep > 2"
-            color="success"
-            variant="gradient"
-            size="sm"
-            class="badge-complete-soft"
-          >
-            <i class="fas fa-check-circle"></i> Complété
-          </SoftBadge>
-          <i
-            v-if="currentStep >= 2"
-            class="fas fa-chevron-down card-toggle"
-            :class="{ rotated: currentStep === 2 }"
-          ></i>
-        </div>
-      </div>
-
-      <transition name="slide-down">
-        <div v-show="currentStep === 2" class="card-body">
-          <div class="lines-header">
-            <span class="col-product">Produit</span>
-            <span class="col-desc">Description</span>
-            <span class="col-qty">Qté</span>
-            <span class="col-price">Prix HT</span>
-            <span class="col-total">Total HT</span>
-            <span class="col-actions"></span>
-          </div>
-
-          <transition-group name="line-list" tag="div" class="lines-list">
-            <div
-              v-for="(line, index) in formData.lines"
-              :key="line._key"
-              class="line-row"
-            >
-              <div
-                class="cell cell-product product-search-container position-relative"
-              >
-                <div class="search-wrapper">
-                  <i class="fas fa-search search-icon-sm"></i>
-                  <SoftInput
-                    v-model="line.searchQuery"
-                    type="text"
-                    class="field-input-soft field-input-soft--sm"
-                    placeholder="Rechercher un produit…"
-                    @input="handleProductSearch(index)"
-                    @focus="
-                      activeLineIndex = index;
-                      showProductResults = true;
-                    "
-                  />
-                </div>
-
-                <div
-                  v-show="showProductResults && activeLineIndex === index"
-                  class="results-dropdown results-dropdown--sm"
-                >
-                  <div v-if="isSearchingProducts" class="dropdown-loading">
-                    <div class="loading-dots">
-                      <span></span><span></span><span></span>
-                    </div>
-                  </div>
-                  <div
-                    v-else-if="productSearchResults.length === 0"
-                    class="dropdown-empty"
-                  >
-                    Aucun produit trouvé
-                  </div>
-                  <template v-else>
-                    <button
-                      v-for="product in productSearchResults"
-                      :key="product.id"
-                      type="button"
-                      class="result-item result-item--sm"
-                      @mousedown.prevent="selectProduct(index, product)"
-                    >
-                      <div class="result-icon result-icon--sm">
-                        <i class="fas fa-cube"></i>
-                      </div>
-                      <div class="result-info">
-                        <span class="result-name">{{ product.nom }}</span>
-                        <span class="result-meta"
-                          >Réf: {{ product.reference }} · Stock:
-                          {{ product.stock_actuel }} {{ product.unite }}</span
-                        >
-                      </div>
-                    </button>
-                  </template>
-                </div>
-              </div>
-
-              <div class="cell cell-desc">
-                <SoftInput
-                  v-model="line.description"
-                  type="text"
-                  class="field-input-soft field-input-soft--sm"
-                  placeholder="Description"
-                />
-              </div>
-
-              <div class="cell cell-number">
-                <SoftInput
-                  v-model="line.quantity"
-                  type="number"
-                  class="field-input-soft field-input-soft--sm field-input--number"
-                  min="1"
-                  step="1"
-                />
-              </div>
-
-              <div class="cell cell-number">
-                <div class="price-input-wrapper">
-                  <span class="currency-symbol">€</span>
-                  <SoftInput
-                    v-model="line.unit_price"
-                    type="number"
-                    class="field-input-soft field-input-soft--sm field-input--price"
-                    min="0"
-                    step="0.01"
-                    placeholder="0.00"
-                  />
-                </div>
-              </div>
-
-              <div class="cell cell-total">
-                <span class="line-total">{{
-                  formatCurrency(lineTotal(line))
-                }}</span>
-              </div>
-
-              <div class="cell cell-actions">
-                <SoftButton
-                  type="button"
-                  color="danger"
-                  variant="outline"
-                  size="sm"
-                  class="line-delete-btn"
-                  :disabled="formData.lines.length === 1"
-                  @click="removeLine(index)"
-                >
-                  <i class="fas fa-trash"></i>
-                </SoftButton>
-              </div>
-            </div>
-          </transition-group>
-
-          <div class="lines-footer">
+        <!-- SECTION: Lines -->
+        <section class="form-section form-section--lines">
+          <div class="section-header">
+            <h2 class="section-title">Lignes de commande</h2>
             <SoftButton
               type="button"
               color="primary"
               variant="outline"
               size="sm"
-              class="btn-add-line-soft"
+              class="btn-add"
               @click="addLine"
             >
-              <i class="fas fa-plus-circle"></i>
-              Ajouter une ligne
+              + Ajouter une ligne
             </SoftButton>
+          </div>
 
-            <div class="lines-summary">
-              <div class="summary-item">
-                <span class="summary-label">Total lignes</span>
-                <span class="summary-value">{{ validLinesCount }}</span>
-              </div>
-              <div class="summary-item">
-                <span class="summary-label">Total unités</span>
-                <span class="summary-value">{{ totalUnits }}</span>
-              </div>
-              <div class="summary-item summary-item--total">
-                <span class="summary-label">Montant HT</span>
-                <span class="summary-value">{{ formatCurrency(totalHt) }}</span>
-              </div>
+          <div class="lines-table">
+            <div class="lines-thead">
+              <span>Produit</span>
+              <span>Description</span>
+              <span class="text-right">Qté</span>
+              <span class="text-right">Prix HT</span>
+              <span class="text-right">Total HT</span>
+              <span></span>
             </div>
-          </div>
 
-          <div class="card-actions card-actions--spread">
-            <SoftButton
-              type="button"
-              color="secondary"
-              variant="outline"
-              class="soft-action-btn"
-              @click="currentStep = 1"
-            >
-              <i class="fas fa-arrow-left"></i> Retour
-            </SoftButton>
-            <SoftButton
-              type="button"
-              color="primary"
-              variant="gradient"
-              class="soft-action-btn"
-              @click="goToStep3"
-            >
-              Vérifier et enregistrer <i class="fas fa-arrow-right"></i>
-            </SoftButton>
-          </div>
-        </div>
-      </transition>
-    </div>
+            <transition-group name="line" tag="div" class="lines-body">
+              <div
+                v-for="(line, index) in formData.lines"
+                :key="line._key"
+                class="line-row"
+              >
+                <!-- Product search -->
+                <div class="cell cell-product product-search-container">
+                  <input
+                    v-model="line.searchQuery"
+                    type="text"
+                    class="field-input field-input--sm"
+                    placeholder="Rechercher…"
+                    autocomplete="off"
+                    @input="handleProductSearch(index, $event.target.value)"
+                    @focus="
+                      activeLineIndex = index;
+                      showProductResults = true;
+                    "
+                  />
+                  <div
+                    v-show="showProductResults && activeLineIndex === index"
+                    class="dropdown dropdown--sm"
+                  >
+                    <div v-if="isSearchingProducts" class="dropdown-state">
+                      <span class="loading-bar"></span>
+                    </div>
+                    <div
+                      v-else-if="productSearchResults.length === 0"
+                      class="dropdown-state"
+                    >
+                      Aucun produit trouvé
+                    </div>
+                    <template v-else>
+                      <SoftButton
+                        v-for="p in productSearchResults"
+                        :key="p.id"
+                        type="button"
+                        class="dropdown-item"
+                        @mousedown.prevent="selectProduct(index, p)"
+                      >
+                        <span class="dropdown-item-name">{{ p.nom }}</span>
+                        <span class="dropdown-item-meta"
+                          >Réf: {{ p.reference }} · Stock: {{ p.stock_actuel }}
+                          {{ p.unite }}</span
+                        >
+                      </SoftButton>
+                    </template>
+                  </div>
+                </div>
 
-    <div class="form-card" :class="{ collapsed: currentStep < 3 }">
-      <div class="card-header">
-        <div class="card-header-left">
-          <div class="card-icon card-icon--green">
-            <i class="fas fa-clipboard-check"></i>
+                <!-- Description -->
+                <div class="cell">
+                  <input
+                    v-model="line.description"
+                    type="text"
+                    class="field-input field-input--sm"
+                    placeholder="Description"
+                  />
+                </div>
+
+                <!-- Qty -->
+                <div class="cell cell--num">
+                  <input
+                    v-model="line.quantity"
+                    type="number"
+                    class="field-input field-input--sm field-input--num"
+                    min="1"
+                    step="1"
+                  />
+                </div>
+
+                <!-- Price -->
+                <div class="cell cell--num">
+                  <div class="price-wrap">
+                    <span class="currency">€</span>
+                    <input
+                      v-model="line.unit_price"
+                      type="number"
+                      class="field-input field-input--sm field-input--price"
+                      min="0"
+                      step="0.01"
+                      placeholder="0.00"
+                    />
+                  </div>
+                </div>
+
+                <!-- Total -->
+                <div class="cell cell--num">
+                  <span class="line-total">{{
+                    formatCurrency(lineTotal(line))
+                  }}</span>
+                </div>
+
+                <!-- Delete -->
+                <div class="cell cell--action">
+                  <SoftButton
+                    type="button"
+                    color="danger"
+                    variant="outline"
+                    class="line-del"
+                    :disabled="formData.lines.length === 1"
+                    @click="removeLine(index)"
+                  >
+                    ×
+                  </SoftButton>
+                </div>
+              </div>
+            </transition-group>
           </div>
-          <div>
-            <h3 class="card-title">Récapitulatif</h3>
-            <p class="card-subtitle">Vérifiez avant de créer la commande</p>
-          </div>
-        </div>
+        </section>
       </div>
 
-      <transition name="slide-down">
-        <div v-show="currentStep === 3" class="card-body">
-          <div class="recap-grid">
-            <div class="recap-item">
-              <span class="recap-label"
-                ><i class="fas fa-industry"></i> Fournisseur</span
+      <!-- RIGHT COLUMN: summary -->
+      <aside class="form-col form-col--aside">
+        <div class="summary-card">
+          <h3 class="summary-title">Récapitulatif</h3>
+
+          <div class="summary-row">
+            <span class="summary-label">Fournisseur</span>
+            <span class="summary-value">{{
+              formData.supplier_name || "—"
+            }}</span>
+          </div>
+          <div class="summary-row">
+            <span class="summary-label">Date</span>
+            <span class="summary-value">{{ formData.order_date || "—" }}</span>
+          </div>
+          <div class="summary-row">
+            <span class="summary-label">Statut</span>
+            <span class="summary-value">
+              <span
+                class="status-badge"
+                :class="
+                  formData.status === 'confirmee'
+                    ? 'status-badge--green'
+                    : 'status-badge--gray'
+                "
               >
-              <span class="recap-value">{{
-                formData.supplier_name || "—"
-              }}</span>
-            </div>
-            <div class="recap-item">
-              <span class="recap-label"
-                ><i class="fas fa-calendar-day"></i> Date</span
-              >
-              <span class="recap-value">{{ formData.order_date || "—" }}</span>
-            </div>
-            <div class="recap-item">
-              <span class="recap-label"><i class="fas fa-tag"></i> Statut</span>
-              <span class="recap-value">
-                <SoftBadge
-                  :color="
-                    formData.status === 'brouillon' ? 'secondary' : 'success'
-                  "
-                  variant="gradient"
-                  size="sm"
-                >
-                  {{
-                    formData.status === "brouillon" ? "Brouillon" : "Confirmée"
-                  }}
-                </SoftBadge>
+                {{
+                  formData.status === "confirmee" ? "Confirmée" : "Brouillon"
+                }}
               </span>
-            </div>
-            <div class="recap-item">
-              <span class="recap-label"
-                ><i class="fas fa-boxes"></i> Articles</span
-              >
-              <span class="recap-value">{{ validLinesCount }} ligne(s)</span>
-            </div>
-            <div class="recap-item">
-              <span class="recap-label"
-                ><i class="fas fa-receipt"></i> Total HT</span
-              >
-              <span class="recap-value recap-total">{{
-                formatCurrency(totalHt)
-              }}</span>
-            </div>
-            <div class="recap-item">
-              <span class="recap-label"
-                ><i class="fas fa-coins"></i> Total TTC</span
-              >
-              <span class="recap-value recap-total">{{
-                formatCurrency(totalTtc)
-              }}</span>
-            </div>
+            </span>
+          </div>
+          <div class="summary-row">
+            <span class="summary-label">Lignes</span>
+            <span class="summary-value">{{ validLinesCount }}</span>
+          </div>
+          <div class="summary-row">
+            <span class="summary-label">Unités</span>
+            <span class="summary-value">{{ totalUnits }}</span>
           </div>
 
-          <div class="card-actions card-actions--spread">
-            <SoftButton
-              type="button"
-              color="secondary"
-              variant="outline"
-              class="soft-action-btn"
-              @click="currentStep = 2"
+          <div class="summary-divider"></div>
+
+          <div class="summary-row summary-row--total">
+            <span class="summary-label">Total HT</span>
+            <span class="summary-value summary-value--mono">{{
+              formatCurrency(totalHt)
+            }}</span>
+          </div>
+          <div class="summary-row summary-row--total summary-row--ttc">
+            <span class="summary-label"
+              >Total TTC <small>(TVA 20%)</small></span
+            >
+            <span
+              class="summary-value summary-value--mono summary-value--accent"
+              >{{ formatCurrency(totalTtc) }}</span
             >
-              <i class="fas fa-arrow-left"></i> Modifier
-            </SoftButton>
-            <div class="action-group">
-              <SoftButton
-                type="button"
-                color="danger"
-                variant="outline"
-                class="soft-action-btn"
-                @click="cancelForm"
-              >
-                <i class="fas fa-times"></i> Annuler
-              </SoftButton>
-              <SoftButton
-                type="submit"
-                color="primary"
-                variant="gradient"
-                class="soft-action-btn"
-                :disabled="isSubmitting || purchaseOrderStore.loading"
-              >
-                <span
-                  v-if="isSubmitting || purchaseOrderStore.loading"
-                  class="btn-spinner"
-                ></span>
-                <i v-else class="fas fa-check"></i>
-                {{
-                  isSubmitting || purchaseOrderStore.loading
-                    ? "Enregistrement…"
-                    : "Créer la commande"
-                }}
-              </SoftButton>
-            </div>
           </div>
         </div>
-      </transition>
+      </aside>
     </div>
   </form>
 </template>
 
 <script setup>
 import { computed, defineEmits, onMounted, onUnmounted, ref } from "vue";
-import { storeToRefs } from "pinia";
 import ProductService from "@/services/product";
-import SoftBadge from "@/components/SoftBadge.vue";
-import SoftButton from "@/components/SoftButton.vue";
-import SoftInput from "@/components/SoftInput.vue";
 import { useFournisseurStore } from "@/stores/fournisseurStore";
 import { useNotificationStore } from "@/stores/notification";
 import { usePurchaseOrderStore } from "@/stores/purchaseOrderStore";
+import { useProductStore } from "@/stores/productStore";
+import SoftButton from "@/components/SoftButton.vue";
 
 const emit = defineEmits(["submit", "cancel", "created"]);
 
 const fournisseurStore = useFournisseurStore();
 const purchaseOrderStore = usePurchaseOrderStore();
 const notificationStore = useNotificationStore();
+const productStore = useProductStore();
 
-const { searchResults } = storeToRefs(fournisseurStore);
-
-const currentStep = ref(1);
 const isSubmitting = ref(false);
 
 const supplierSearchQuery = ref("");
@@ -602,41 +428,46 @@ const formData = ref({
 const validLinesCount = computed(
   () =>
     formData.value.lines.filter(
-      (line) => line.product_id || line.description.trim().length
+      (l) => l.product_id || l.description.trim().length
     ).length
 );
 
 const totalUnits = computed(() =>
-  formData.value.lines.reduce(
-    (sum, line) => sum + (Number(line.quantity) || 0),
-    0
-  )
+  formData.value.lines.reduce((s, l) => s + (Number(l.quantity) || 0), 0)
 );
 
 const totalHt = computed(() =>
   formData.value.lines.reduce(
-    (sum, line) =>
-      sum + (Number(line.quantity) || 0) * (Number(line.unit_price) || 0),
+    (s, l) => s + (Number(l.quantity) || 0) * (Number(l.unit_price) || 0),
     0
   )
 );
 
-const totalTtc = computed(() => totalHt.value * 1.2);
+const totalTva = computed(() => totalHt.value * 0.2);
+const totalTtc = computed(() => totalHt.value + totalTva.value);
+const lineTotal = (l) =>
+  (Number(l.quantity) || 0) * (Number(l.unit_price) || 0);
 
-const lineTotal = (line) =>
-  (Number(line.quantity) || 0) * (Number(line.unit_price) || 0);
+const formatCurrency = (v) =>
+  new Intl.NumberFormat("fr-FR", { style: "currency", currency: "EUR" }).format(
+    Number(v || 0)
+  );
 
-const formatCurrency = (value) =>
-  new Intl.NumberFormat("fr-FR", {
-    style: "currency",
-    currency: "EUR",
-  }).format(Number(value || 0));
+const normalizeProductResults = (payload) => {
+  if (Array.isArray(payload)) return payload;
+  if (Array.isArray(payload?.data)) return payload.data;
+  if (Array.isArray(payload?.data?.data)) return payload.data.data;
+  if (Array.isArray(payload?.results)) return payload.results;
+  return [];
+};
 
+// Supplier search
 const handleSupplierSearch = () => {
   const query = supplierSearchQuery.value?.trim();
   if (!query || query.length < 2) {
     supplierSearchResults.value = [];
     isSearchingSuppliers.value = false;
+    showSupplierResults.value = false;
     return;
   }
 
@@ -645,32 +476,30 @@ const handleSupplierSearch = () => {
     isSearchingSuppliers.value = true;
     showSupplierResults.value = true;
     try {
-      await fournisseurStore.searchFournisseurs(query);
-      supplierSearchResults.value = Array.isArray(searchResults.value)
-        ? searchResults.value
-        : [];
-    } catch (error) {
+      const results = await fournisseurStore.searchFournisseurs(query);
+      let suppliers = [];
+      if (Array.isArray(results)) suppliers = results;
+      else if (Array.isArray(results?.data?.data))
+        suppliers = results.data.data;
+      else if (Array.isArray(results?.data)) suppliers = results.data;
+      supplierSearchResults.value = suppliers.filter((i) => i?.id);
+    } catch {
       supplierSearchResults.value = [];
-      notificationStore.error(
-        "Erreur",
-        "Impossible de rechercher les fournisseurs"
-      );
     } finally {
       isSearchingSuppliers.value = false;
     }
   }, 300);
 };
 
-const selectSupplier = (supplier) => {
-  if (!supplier?.id) return;
-  formData.value.fournisseur_id = supplier.id;
-  formData.value.supplier_name = supplier.name;
-  formData.value.supplier_address = supplier.billing_address
-    ? `${supplier.billing_address.line1 || ""} ${
-        supplier.billing_address.postal_code || ""
-      } ${supplier.billing_address.city || ""}`.trim()
-    : "";
-  supplierSearchQuery.value = supplier.name;
+const selectSupplier = (s) => {
+  if (!s?.id) return;
+  formData.value.fournisseur_id = s.id;
+  formData.value.supplier_name = s.name;
+  const l1 = s.billing_address_line1 || s.billing_address?.line1 || "";
+  const zip = s.billing_postal_code || s.billing_address?.postal_code || "";
+  const city = s.billing_city || s.billing_address?.city || "";
+  formData.value.supplier_address = `${l1} ${zip} ${city}`.trim();
+  supplierSearchQuery.value = s.name;
   showSupplierResults.value = false;
 };
 
@@ -682,120 +511,84 @@ const clearSupplier = () => {
   formData.value.supplier_address = "";
 };
 
-const handleProductSearch = (index) => {
+// Product search
+const handleProductSearch = (index, queryValue = null) => {
   activeLineIndex.value = index;
-  const query = (formData.value.lines[index]?.searchQuery || "").trim();
+  const query = String(
+    queryValue ?? formData.value.lines[index]?.searchQuery ?? ""
+  ).trim();
+
+  if (formData.value.lines[index]) {
+    formData.value.lines[index].searchQuery = queryValue ?? query;
+  }
 
   if (query.length < 2) {
     productSearchResults.value = [];
     isSearchingProducts.value = false;
     return;
   }
-
   if (productTimeout) clearTimeout(productTimeout);
   productTimeout = setTimeout(async () => {
     isSearchingProducts.value = true;
     showProductResults.value = true;
     try {
-      const response = await ProductService.searchProducts(query);
-      let products = [];
-      if (response?.data) {
-        products = Array.isArray(response.data)
-          ? response.data
-          : response.data.data || [];
-      }
-      productSearchResults.value = products.filter((item) => item?.id);
-    } catch (error) {
+      const searchResponse = await productStore.searchProducts(query);
+      const products = normalizeProductResults(searchResponse);
+
+      productSearchResults.value = products.filter((i) => i?.id);
+    } catch {
       productSearchResults.value = [];
-      notificationStore.error(
-        "Erreur",
-        "Impossible de rechercher les produits"
-      );
     } finally {
       isSearchingProducts.value = false;
     }
   }, 250);
 };
 
-const selectProduct = (index, product) => {
+const selectProduct = (index, p) => {
   const line = formData.value.lines[index];
-  if (!line || !product?.id) return;
-  line.product_id = product.id;
-  line.searchQuery = product.nom;
-  line.description = product.nom;
-  line.unit_price = Number(product.prix_unitaire || 0);
+  if (!line || !p?.id) return;
+  line.product_id = p.id;
+  line.searchQuery = p.nom;
+  line.description = p.nom;
+  line.unit_price = Number(p.prix_unitaire || 0);
   showProductResults.value = false;
   activeLineIndex.value = null;
 };
 
-const addLine = () => {
-  formData.value.lines.push(makeLine());
+const addLine = () => formData.value.lines.push(makeLine());
+const removeLine = (i) => {
+  if (formData.value.lines.length > 1) formData.value.lines.splice(i, 1);
 };
 
-const removeLine = (index) => {
-  if (formData.value.lines.length <= 1) return;
-  formData.value.lines.splice(index, 1);
-};
-
-const goToStep2 = () => {
-  errors.value = {};
-  if (!formData.value.fournisseur_id) {
-    errors.value.fournisseur_id = "Le fournisseur est requis.";
-  }
-  if (!formData.value.order_date) {
-    errors.value.order_date = "La date est requise.";
-  }
-  if (!Object.keys(errors.value).length) currentStep.value = 2;
-};
-
-const goToStep3 = () => {
-  if (!validLinesCount.value) {
-    notificationStore.warning(
-      "Validation",
-      "Ajoutez au moins une ligne valide"
-    );
-    return;
-  }
-  currentStep.value = 3;
-};
-
-const cancelForm = () => {
-  emit("cancel");
-};
+const cancelForm = () => emit("cancel");
 
 const submitForm = async () => {
   errors.value = {};
-  if (!formData.value.fournisseur_id) {
+  if (!formData.value.fournisseur_id)
     errors.value.fournisseur_id = "Le fournisseur est requis.";
-  }
-  if (!formData.value.order_date) {
+  if (!formData.value.order_date)
     errors.value.order_date = "La date est requise.";
-  }
 
   const lines = formData.value.lines
-    .map((line) => ({
-      product_id: line.product_id,
-      description: line.description,
-      quantity: Number(line.quantity) || 0,
-      unit_price: Number(line.unit_price) || 0,
+    .map((l) => ({
+      product_id: l.product_id,
+      description: l.description,
+      quantity: Number(l.quantity) || 0,
+      unit_price: Number(l.unit_price) || 0,
       tva_rate: 20,
       discount_pct: 0,
+      total_ht: (Number(l.quantity) || 0) * (Number(l.unit_price) || 0),
     }))
-    .filter((line) => line.product_id || line.description.trim().length);
+    .filter((l) => l.product_id || l.description.trim().length);
 
   if (!lines.length) {
     notificationStore.warning(
       "Validation",
       "Ajoutez au moins une ligne valide"
     );
-    currentStep.value = 2;
-    return;
-  }
-
-  if (Object.keys(errors.value).length) {
-    currentStep.value = 1;
     return;
   }
+  if (Object.keys(errors.value).length) return;
 
   isSubmitting.value = true;
   try {
@@ -804,11 +597,13 @@ const submitForm = async () => {
       po_number: formData.value.po_number,
       status: formData.value.status,
       order_date: formData.value.order_date,
+      total_ht: Number(totalHt.value.toFixed(2)),
+      total_tva: Number(totalTva.value.toFixed(2)),
+      total_ttc: Number(totalTtc.value.toFixed(2)),
       delivery_address: formData.value.delivery_address || null,
       notes: formData.value.notes || null,
       lines,
     };
-
     const created = await purchaseOrderStore.createPurchaseOrder(payload);
     notificationStore.created("Commande fournisseur");
     emit("submit", created);
@@ -824,708 +619,667 @@ const submitForm = async () => {
   }
 };
 
-const handleClickOutside = (event) => {
-  const supplierContainer = document.querySelector(
-    ".supplier-search-container"
-  );
-  if (supplierContainer && !supplierContainer.contains(event.target)) {
+const handleClickOutside = (e) => {
+  if (!document.querySelector(".supplier-search-container")?.contains(e.target))
     showSupplierResults.value = false;
-  }
-
-  let inProductContainer = false;
-  document
-    .querySelectorAll(".product-search-container")
-    .forEach((container) => {
-      if (container.contains(event.target)) inProductContainer = true;
-    });
-  if (!inProductContainer) showProductResults.value = false;
+  const inProduct = [
+    ...document.querySelectorAll(".product-search-container"),
+  ].some((c) => c.contains(e.target));
+  if (!inProduct) showProductResults.value = false;
 };
 
-onMounted(() => {
-  document.addEventListener("click", handleClickOutside);
-});
-
-onUnmounted(() => {
-  document.removeEventListener("click", handleClickOutside);
-});
+onMounted(() => document.addEventListener("click", handleClickOutside));
+onUnmounted(() => document.removeEventListener("click", handleClickOutside));
 </script>
 
 <style scoped>
-* {
+/* ── Reset & tokens ─────────────────────────────────────────── */
+*,
+*::before,
+*::after {
   box-sizing: border-box;
 }
 
-.commande-form {
-  font-family: "DM Sans", sans-serif;
+.order-form {
+  --c-bg: #f8f9fe;
+  --c-surface: #ffffff;
+  --c-border: #e9ecef;
+  --c-border-focus: #5e72e4;
+  --c-text: #344767;
+  --c-muted: #8392ab;
+  --c-subtle: #adb5bd;
+  --c-accent: #5e72e4;
+  --c-accent-hover: #4b61da;
+  --c-green: #2dce89;
+  --c-green-bg: #e9fbf3;
+  --c-red: #f5365c;
+  --c-red-bg: #fff2f5;
+  --c-primary: #5e72e4;
+  --radius: 6px;
+  --radius-lg: 10px;
+  --shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.05);
+  background: transparent;
+  color: var(--c-text);
+  min-height: 100vh;
+  padding: 0;
+}
+
+/* ── Header ─────────────────────────────────────────────────── */
+.form-header {
   display: flex;
-  flex-direction: column;
+  align-items: flex-end;
+  justify-content: space-between;
+  padding: 2rem 2.5rem 1.5rem;
+  background: var(--c-surface);
+  border-bottom: 1px solid var(--c-border);
   gap: 1rem;
-  max-width: 1100px;
-  margin: 0 auto;
-  padding: 0.25rem;
-
-  --clr-primary: #5e72e4;
-  --clr-primary-light: #eef1ff;
-  --clr-primary-dark: #4b61da;
-  --clr-success: #2dce89;
-  --clr-success-light: #e9fbf3;
-  --clr-danger: #f5365c;
-  --clr-danger-light: #fff2f5;
-  --clr-border: #e9ecef;
-  --clr-bg: #f8f9fe;
-  --clr-surface: #ffffff;
-  --clr-text: #344767;
-  --clr-text-muted: #8392ab;
-  --clr-text-subtle: #adb5bd;
-  --radius-sm: 6px;
-  --radius-md: 10px;
-  --radius-lg: 14px;
-  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
-  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
-  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
-  --transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.form-stepper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 1.5rem 2rem 0.5rem;
-  position: relative;
-}
-
-.stepper-line {
-  position: absolute;
-  top: calc(1.5rem + 18px);
-  left: calc(50% - 120px);
-  width: 240px;
-  height: 2px;
-  background: var(--clr-border);
-  z-index: 0;
-}
-
-.step {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 6px;
-  flex: 1;
-  position: relative;
-  z-index: 1;
-}
-
-.step-dot {
-  width: 38px;
-  height: 38px;
-  border-radius: 50%;
-  background: var(--clr-surface);
-  border: 2px solid var(--clr-border);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--clr-text-subtle);
-  font-size: 0.8rem;
-  transition: all var(--transition);
-}
-
-.step.active .step-dot {
-  background: var(--clr-primary);
-  border-color: var(--clr-primary);
-  color: #fff;
-  box-shadow: 0 0 0 4px var(--clr-primary-light);
-}
-
-.step.done .step-dot {
-  background: var(--clr-success);
-  border-color: var(--clr-success);
-  color: #fff;
-}
-
-.step-label {
+.form-eyebrow {
+  margin: 0 0 4px;
   font-size: 0.7rem;
   font-weight: 600;
-  letter-spacing: 0.04em;
+  letter-spacing: 0.1em;
   text-transform: uppercase;
-  color: var(--clr-text-subtle);
+  color: var(--c-muted);
 }
 
-.form-card {
-  background: var(--clr-surface);
-  border: 1.5px solid var(--clr-border);
+.form-title {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--c-text);
+  line-height: 1.2;
+}
+
+.form-header-actions {
+  display: flex;
+  gap: 0.75rem;
+  flex-shrink: 0;
+}
+
+/* ── Buttons ─────────────────────────────────────────────────── */
+.btn-ghost {
+  padding: 0.55rem 1.1rem;
+  background: transparent;
+  border: 1px solid var(--c-border);
+  border-radius: var(--radius);
+  font-size: 0.85rem;
+  font-weight: 500;
+  color: var(--c-muted);
+  cursor: pointer;
+  transition: border-color 0.15s, color 0.15s;
+}
+.btn-ghost:hover {
+  border-color: var(--c-text);
+  color: var(--c-text);
+}
+
+.btn-primary {
+  padding: 0.55rem 1.4rem;
+  background: var(--c-accent);
+  border: 1px solid var(--c-accent);
+  border-radius: var(--radius);
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: #fff;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  transition: background 0.15s;
+}
+.btn-primary:hover:not(:disabled) {
+  background: var(--c-accent-hover);
+}
+.btn-primary:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.btn-add {
+  padding: 0.4rem 0.9rem;
+  background: transparent;
+  border: 1px dashed var(--c-border);
+  border-radius: var(--radius);
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: var(--c-muted);
+  cursor: pointer;
+  transition: border-color 0.15s, color 0.15s;
+  white-space: nowrap;
+}
+.btn-add:hover {
+  border-color: var(--c-text);
+  color: var(--c-text);
+}
+
+/* ── Layout ─────────────────────────────────────────────────── */
+.form-body {
+  display: grid;
+  grid-template-columns: 1fr 300px;
+  gap: 1.5rem;
+  padding: 1.5rem 2.5rem 3rem;
+  max-width: 1200px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+@media (max-width: 900px) {
+  .form-body {
+    grid-template-columns: 1fr;
+  }
+  .form-col--aside {
+    order: -1;
+  }
+}
+
+.form-col {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+/* ── Sections ────────────────────────────────────────────────── */
+.form-section {
+  background: var(--c-surface);
+  border: 1px solid var(--c-border);
   border-radius: var(--radius-lg);
-  overflow: hidden;
-  transition: box-shadow var(--transition), border-color var(--transition);
+  padding: 1.5rem;
 }
 
-.form-card:not(.collapsed) {
-  box-shadow: var(--shadow-md);
-  border-color: #d8ddff;
+.section-title {
+  margin: 0 0 1.25rem;
+  font-size: 0.8rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--c-muted);
 }
 
-.card-header {
+.section-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 1.25rem 1.5rem;
-  cursor: pointer;
+  margin-bottom: 1rem;
 }
-
-.card-header-left {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-.card-header-right {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.card-icon {
-  width: 44px;
-  height: 44px;
-  border-radius: var(--radius-md);
-  background: var(--clr-primary-light);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--clr-primary);
-}
-
-.card-icon--blue {
-  background: #e7f0ff;
-  color: #2b5fd8;
-}
-
-.card-icon--green {
-  background: var(--clr-success-light);
-  color: var(--clr-success);
-}
-
-.card-title {
+.section-header .section-title {
   margin: 0;
-  font-size: 0.95rem;
-  font-weight: 700;
-  color: var(--clr-text);
 }
 
-.card-subtitle {
-  margin: 2px 0 0;
-  font-size: 0.78rem;
-  color: var(--clr-text-muted);
-}
-
-.badge-complete-soft {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.card-toggle {
-  color: var(--clr-text-muted);
-  transition: transform var(--transition);
-}
-
-.card-toggle.rotated {
-  transform: rotate(180deg);
-}
-
-.card-body {
-  padding: 1.25rem 1.5rem 1.5rem;
-  border-top: 1.5px solid var(--clr-border);
-  background: #fafbff;
-}
-
-.field-grid {
+/* ── Fields ─────────────────────────────────────────────────── */
+.field-row {
   display: grid;
   gap: 1rem;
   margin-bottom: 1rem;
 }
-
+.field-row:last-child {
+  margin-bottom: 0;
+}
 .two-col {
   grid-template-columns: 1fr 1fr;
 }
 
-@media (max-width: 720px) {
+@media (max-width: 640px) {
   .two-col {
     grid-template-columns: 1fr;
   }
 }
 
-.field-group {
+.field {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 5px;
 }
 
 .field-label {
   font-size: 0.78rem;
   font-weight: 600;
-  color: #4a5568;
-  display: flex;
-  align-items: center;
-  gap: 5px;
+  color: var(--c-text);
+  letter-spacing: 0.01em;
+}
+.req {
+  color: var(--c-red);
+  margin-left: 2px;
 }
 
-.label-icon {
-  color: var(--clr-primary);
-  opacity: 0.8;
-  font-size: 0.74rem;
-}
-
-.required-dot {
-  width: 5px;
-  height: 5px;
-  border-radius: 50%;
-  background: var(--clr-danger);
-}
-
-.field-input-soft :deep(.form-control) {
+.field-input {
+  width: 100%;
   height: 40px;
-  border-radius: var(--radius-md);
-  border: 1.5px solid var(--clr-border);
-  color: var(--clr-text);
+  padding: 0 12px;
+  background: #fff;
+  border: 1px solid var(--c-border);
+  border-radius: var(--radius);
+  font-size: 0.875rem;
+  color: var(--c-text);
+  font-family: inherit;
+  transition: border-color 0.15s, box-shadow 0.15s;
+  outline: none;
 }
-
-.field-input-soft--sm :deep(.form-control) {
+.field-input:focus {
+  border-color: var(--c-border-focus);
+  box-shadow: 0 0 0 3px rgba(94, 114, 228, 0.12);
+  background: #fff;
+}
+.field-input--sm {
   height: 36px;
-  font-size: 0.8rem;
+  font-size: 0.82rem;
+}
+.field-input--num {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+.field-input--price {
+  padding-left: 22px;
 }
 
 .field-textarea {
-  border: 1.5px solid var(--clr-border);
-  border-radius: var(--radius-md);
-  background: var(--clr-surface);
-  color: var(--clr-text);
+  width: 100%;
   padding: 10px 12px;
+  background: #fff;
+  border: 1px solid var(--c-border);
+  border-radius: var(--radius);
+  font-size: 0.875rem;
+  color: var(--c-text);
+  font-family: inherit;
   resize: vertical;
+  transition: border-color 0.15s;
+  outline: none;
+}
+.field-textarea:focus {
+  border-color: var(--c-border-focus);
+  box-shadow: 0 0 0 3px rgba(94, 114, 228, 0.12);
+  background: #fff;
 }
 
-.field-error {
-  font-size: 0.75rem;
-  color: var(--clr-danger);
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
+.field--error .field-input,
+.field--error .field-textarea {
+  border-color: var(--c-red);
+}
+.field-err {
+  font-size: 0.72rem;
+  color: var(--c-red);
 }
 
-.status-toggle {
-  display: flex;
-  gap: 6px;
-  padding: 4px;
-  background: var(--clr-bg);
-  border: 1.5px solid var(--clr-border);
-  border-radius: var(--radius-md);
-}
-
-.status-toggle :deep(.btn) {
-  flex: 1;
-}
-
-.search-wrapper {
+/* ── Input wrap (for clear btn + dropdown) ───────────────────── */
+.input-wrap {
   position: relative;
 }
-
-.search-icon {
-  position: absolute;
-  left: 11px;
-  top: 50%;
-  transform: translateY(-50%);
-  color: var(--clr-text-subtle);
-  font-size: 0.75rem;
-  z-index: 2;
-}
-
-.search-icon-sm {
-  position: absolute;
-  left: 10px;
-  top: 50%;
-  transform: translateY(-50%);
-  color: var(--clr-text-subtle);
-  font-size: 0.65rem;
-  z-index: 2;
-}
-
-.search-wrapper .field-input-soft :deep(.form-control) {
-  padding-left: 32px;
-}
-
-.search-wrapper .field-input-soft--sm :deep(.form-control) {
-  padding-left: 28px;
-}
-
-.clear-btn {
+.input-clear {
   position: absolute;
   right: 10px;
   top: 50%;
   transform: translateY(-50%);
   background: none;
   border: none;
-  color: var(--clr-text-muted);
+  font-size: 1rem;
+  color: var(--c-subtle);
+  cursor: pointer;
+  line-height: 1;
+  padding: 0;
+}
+.input-clear:hover {
+  color: var(--c-text);
 }
 
-.results-dropdown {
+/* ── Status pills ────────────────────────────────────────────── */
+.status-pills {
+  display: flex;
+  gap: 6px;
+  height: 40px;
+  align-items: center;
+}
+.pill {
+  padding: 0.4rem 1rem;
+  border-radius: 100px;
+  border: 1px solid var(--c-border);
+  background: var(--c-bg);
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: var(--c-muted);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+.pill--active {
+  background: var(--c-text);
+  border-color: var(--c-text);
+  color: #fff;
+}
+.pill--success-active {
+  background: var(--c-green) !important;
+  border-color: var(--c-green) !important;
+  color: #fff !important;
+}
+
+/* ── Dropdown ────────────────────────────────────────────────── */
+.dropdown {
   position: absolute;
   top: calc(100% + 4px);
   left: 0;
   right: 0;
-  background: var(--clr-surface);
-  border: 1.5px solid var(--clr-border);
-  border-radius: var(--radius-md);
-  box-shadow: var(--shadow-lg);
-  max-height: 260px;
+  background: var(--c-surface);
+  border: 1px solid var(--c-border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow);
+  max-height: 240px;
   overflow-y: auto;
-  z-index: 1000;
+  z-index: 999;
+}
+.dropdown--sm {
+  max-height: 200px;
 }
 
-.results-dropdown--sm {
-  max-height: 220px;
-}
-
-.result-item {
+.dropdown-item {
   width: 100%;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  border: none;
-  border-bottom: 1px solid #f1f3f5;
-  background: none;
-  text-align: left;
-  padding: 10px 12px;
-}
-
-.result-item:hover {
-  background: var(--clr-primary-light);
-}
-
-.result-icon {
-  width: 30px;
-  height: 30px;
-  border-radius: var(--radius-sm);
-  background: var(--clr-primary-light);
-  color: var(--clr-primary);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.result-icon--sm {
-  width: 26px;
-  height: 26px;
-  font-size: 0.7rem;
-}
-
-.result-info {
   display: flex;
   flex-direction: column;
   gap: 2px;
+  background: none;
+  border: none;
+  border-bottom: 1px solid var(--c-border);
+  padding: 10px 14px;
+  text-align: left;
+  cursor: pointer;
+  transition: background 0.1s;
+}
+.dropdown-item:last-child {
+  border-bottom: none;
+}
+.dropdown-item:hover {
+  background: #eef1ff;
 }
 
-.result-name {
-  font-weight: 600;
+.dropdown-item-name {
   font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--c-text);
 }
-
-.result-meta {
+.dropdown-item-meta {
   font-size: 0.72rem;
-  color: var(--clr-text-muted);
+  color: var(--c-muted);
 }
 
-.dropdown-loading,
-.dropdown-empty {
+.dropdown-state {
   padding: 1rem;
-  color: var(--clr-text-muted);
+  font-size: 0.8rem;
+  color: var(--c-muted);
   text-align: center;
-}
-
-.loading-dots {
-  display: inline-flex;
-  gap: 4px;
-}
-
-.loading-dots span {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: var(--clr-primary);
-  animation: bounce 1s infinite;
-}
-
-.loading-dots span:nth-child(2) {
-  animation-delay: 0.15s;
-}
-
-.loading-dots span:nth-child(3) {
-  animation-delay: 0.3s;
-}
-
-@keyframes bounce {
-  0%,
-  80%,
-  100% {
-    transform: scale(0.6);
-    opacity: 0.4;
-  }
-  40% {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
-.lines-header,
-.line-row {
-  display: grid;
-  grid-template-columns: 2.2fr 2fr 1fr 1fr 1fr 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   gap: 8px;
 }
 
-.lines-header {
-  padding: 0 12px 8px;
-  font-size: 0.68rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  color: var(--clr-text-muted);
+.loading-bar {
+  display: inline-block;
+  width: 60px;
+  height: 3px;
+  background: var(--c-border);
+  border-radius: 2px;
+  overflow: hidden;
+  position: relative;
+}
+.loading-bar::after {
+  content: "";
+  position: absolute;
+  left: -40%;
+  width: 40%;
+  height: 100%;
+  background: var(--c-text);
+  border-radius: 2px;
+  animation: slide 0.9s ease-in-out infinite;
+}
+@keyframes slide {
+  to {
+    left: 100%;
+  }
 }
 
-.lines-list {
+/* ── Lines table ─────────────────────────────────────────────── */
+.lines-table {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+}
+
+.lines-thead {
+  display: grid;
+  grid-template-columns: 1.8fr 1.6fr 0.7fr 0.9fr 0.9fr 36px;
+  gap: 8px;
+  padding: 0 10px 8px;
+  font-size: 0.66rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--c-subtle);
+  border-bottom: 1px solid var(--c-border);
+  margin-bottom: 6px;
+}
+
+.lines-body {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
 }
 
 .line-row {
-  background: var(--clr-surface);
-  border: 1.5px solid var(--clr-border);
-  border-radius: var(--radius-md);
-  padding: 10px 12px;
+  display: grid;
+  grid-template-columns: 1.8fr 1.6fr 0.7fr 0.9fr 0.9fr 36px;
+  gap: 8px;
   align-items: center;
+  padding: 6px 10px;
+  border-radius: var(--radius);
+  transition: background 0.1s;
+}
+.line-row:hover {
+  background: #f8f9fe;
+}
+
+.cell {
+  position: relative;
+}
+.cell--num {
+  display: flex;
+  justify-content: flex-end;
+}
+.cell--action {
+  display: flex;
+  justify-content: center;
+}
+.text-right {
+  text-align: right;
+}
+
+.price-wrap {
+  position: relative;
+}
+.currency {
+  position: absolute;
+  left: 9px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 0.75rem;
+  color: var(--c-subtle);
+  pointer-events: none;
+  z-index: 1;
 }
 
 .line-total {
-  font-family: "DM Mono", monospace;
+  font-size: 0.82rem;
   font-weight: 700;
-  color: var(--clr-primary);
+  font-variant-numeric: tabular-nums;
+  color: var(--c-text);
+  white-space: nowrap;
 }
 
-.field-input--number :deep(.form-control),
-.field-input--price :deep(.form-control) {
-  text-align: right;
-  font-family: "DM Mono", monospace;
-}
-
-.price-input-wrapper {
-  position: relative;
-}
-
-.currency-symbol {
-  position: absolute;
-  left: 10px;
-  top: 50%;
-  transform: translateY(-50%);
-  color: var(--clr-text-muted);
-  font-size: 0.78rem;
-  z-index: 2;
-}
-
-.field-input--price :deep(.form-control) {
-  padding-left: 24px;
-}
-
-.line-delete-btn {
-  width: 32px;
-  min-width: 32px;
-  height: 32px;
-  padding: 0;
-  display: inline-flex;
+.line-del {
+  width: 28px;
+  height: 28px;
+  border-radius: var(--radius);
+  border: 1px solid transparent;
+  background: none;
+  font-size: 1rem;
+  color: var(--c-subtle);
+  cursor: pointer;
+  display: flex;
   align-items: center;
   justify-content: center;
+  transition: all 0.15s;
+  line-height: 1;
+}
+.line-del:hover:not(:disabled) {
+  background: var(--c-red-bg);
+  border-color: var(--c-red);
+  color: var(--c-red);
+}
+.line-del:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
 }
 
-.lines-footer {
+/* ── Aside summary ───────────────────────────────────────────── */
+.summary-card {
+  background: var(--c-surface);
+  border: 1px solid var(--c-border);
+  border-radius: var(--radius-lg);
+  padding: 1.5rem;
+  position: sticky;
+  top: 1.5rem;
+}
+
+.summary-title {
+  margin: 0 0 1.25rem;
+  font-size: 0.8rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--c-muted);
+}
+
+.summary-row {
   display: flex;
-  align-items: center;
   justify-content: space-between;
-  flex-wrap: wrap;
-  gap: 0.75rem;
-  margin-top: 0.75rem;
-  padding-top: 1rem;
-  border-top: 1.5px dashed var(--clr-border);
+  align-items: baseline;
+  gap: 0.5rem;
+  padding: 7px 0;
+  border-bottom: 1px solid var(--c-border);
 }
-
-.lines-summary {
-  display: flex;
-  align-items: center;
-  gap: 1.25rem;
+.summary-row:last-child {
+  border-bottom: none;
 }
-
-.summary-item {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
+.summary-row--total {
+  padding: 9px 0;
+}
+.summary-row--ttc .summary-label,
+.summary-row--ttc .summary-value {
 }
 
 .summary-label {
-  font-size: 0.65rem;
-  text-transform: uppercase;
-  color: var(--clr-text-muted);
+  font-size: 0.78rem;
+  color: var(--c-muted);
+  white-space: nowrap;
+}
+.summary-label small {
+  font-size: 0.68rem;
 }
 
 .summary-value {
-  font-size: 0.9rem;
-  font-family: "DM Mono", monospace;
-  font-weight: 700;
-}
-
-.summary-item--total .summary-value {
-  color: var(--clr-primary);
-}
-
-.recap-grid {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 1rem;
-  margin-bottom: 1.5rem;
-}
-
-@media (max-width: 900px) {
-  .recap-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .lines-header,
-  .line-row {
-    grid-template-columns: 1.6fr 1.4fr 0.9fr 0.9fr 0.9fr 36px;
-  }
-}
-
-@media (max-width: 640px) {
-  .recap-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .lines-header {
-    display: none;
-  }
-
-  .line-row {
-    grid-template-columns: 1fr 1fr;
-    gap: 8px;
-  }
-
-  .cell-product,
-  .cell-desc,
-  .cell-total {
-    grid-column: 1 / -1;
-  }
-
-  .cell-actions {
-    justify-self: end;
-  }
-}
-
-.recap-item {
-  border: 1.5px solid var(--clr-border);
-  border-radius: var(--radius-md);
-  background: var(--clr-surface);
-  padding: 0.9rem 1rem;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.recap-label {
-  font-size: 0.7rem;
-  text-transform: uppercase;
-  color: var(--clr-text-muted);
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-}
-
-.recap-value {
-  font-size: 0.9rem;
+  font-size: 0.85rem;
   font-weight: 600;
-  color: var(--clr-text);
+  color: var(--c-text);
+  text-align: right;
+}
+.summary-value--mono {
+  font-variant-numeric: tabular-nums;
+}
+.summary-value--accent {
+  color: var(--c-green);
+  font-size: 1.05rem;
 }
 
-.recap-total {
-  color: var(--clr-primary);
-  font-family: "DM Mono", monospace;
+.summary-divider {
+  height: 1px;
+  background: var(--c-border);
+  margin: 0.5rem 0;
 }
 
-.card-actions {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 1.25rem;
-  padding-top: 1.25rem;
-  border-top: 1.5px solid var(--clr-border);
-}
-
-.card-actions--spread {
-  justify-content: space-between;
-}
-
-.action-group {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.soft-action-btn,
-.btn-add-line-soft {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
+/* ── Status badge ────────────────────────────────────────────── */
+.status-badge {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 100px;
+  font-size: 0.72rem;
+  font-weight: 600;
+}
+.status-badge--gray {
+  background: var(--c-bg);
+  color: var(--c-muted);
+  border: 1px solid var(--c-border);
+}
+.status-badge--green {
+  background: var(--c-green-bg);
+  color: var(--c-green);
 }
 
+/* ── Spinner ─────────────────────────────────────────────────── */
 .btn-spinner {
-  width: 16px;
-  height: 16px;
-  border: 2px solid rgba(255, 255, 255, 0.35);
+  width: 15px;
+  height: 15px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
   border-top-color: #fff;
   border-radius: 50%;
   animation: spin 0.6s linear infinite;
+  display: inline-block;
 }
-
 @keyframes spin {
   to {
     transform: rotate(360deg);
   }
 }
 
-.slide-down-enter-active,
-.slide-down-leave-active {
-  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
-  overflow: hidden;
+/* ── Animations ──────────────────────────────────────────────── */
+.line-enter-active {
+  transition: opacity 0.18s ease, transform 0.18s ease;
 }
-
-.slide-down-enter-from,
-.slide-down-leave-to {
+.line-leave-active {
+  transition: opacity 0.14s ease, transform 0.14s ease;
+}
+.line-enter-from {
   opacity: 0;
-  max-height: 0;
+  transform: translateY(-6px);
 }
-
-.slide-down-enter-to,
-.slide-down-leave-from {
-  max-height: 900px;
-}
-
-.line-list-enter-active {
-  transition: all 0.2s ease;
-}
-
-.line-list-leave-active {
-  transition: all 0.15s ease;
-}
-
-.line-list-enter-from {
+.line-leave-to {
   opacity: 0;
-  transform: translateY(-8px);
+  transform: translateX(12px);
 }
 
-.line-list-leave-to {
-  opacity: 0;
-  transform: translateX(20px);
+@media (max-width: 600px) {
+  .form-header {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 1.25rem 1.25rem 1rem;
+  }
+  .form-body {
+    padding: 1rem 1.25rem 2rem;
+  }
+  .lines-thead {
+    display: none;
+  }
+  .line-row {
+    grid-template-columns: 1fr 1fr;
+    gap: 6px;
+    padding: 8px;
+    border: 1px solid var(--c-border);
+    border-radius: var(--radius);
+    background: var(--c-surface);
+    margin-bottom: 4px;
+  }
+  .cell-product {
+    grid-column: 1 / -1;
+  }
+  .cell--action {
+    grid-column: 2;
+    justify-self: end;
+  }
 }
 </style>
diff --git a/thanasoft-front/src/components/molecules/Interventions/interventionDetails.vue b/thanasoft-front/src/components/molecules/Interventions/interventionDetails.vue
index 072f469..085353e 100644
--- a/thanasoft-front/src/components/molecules/Interventions/interventionDetails.vue
+++ b/thanasoft-front/src/components/molecules/Interventions/interventionDetails.vue
@@ -31,20 +31,24 @@
         <!-- En-tête avec titre et badge de statut -->
         <div class="d-flex align-items-center justify-content-between mb-4">
           <h5 class="mb-0">Détails de l'Intervention</h5>
+          <SoftBadge :color="statusObject.color" :variant="statusObject.variant" size="sm">
+            {{ statusObject.label }}
+          </SoftBadge>
         </div>
 
         <!-- Informations Client -->
         <div class="mb-4">
           <div class="d-flex align-items-center justify-content-between mb-3">
             <h6 class="mb-0">Informations Client</h6>
-            <button
-              type="button"
-              class="btn btn-sm bg-gradient-secondary"
+            <SoftButton
+              color="secondary"
+              variant="gradient"
+              size="sm"
               :disabled="loading"
               @click="toggleEditMode"
             >
               {{ editMode ? "Sauvegarder" : "Modifier" }}
-            </button>
+            </SoftButton>
           </div>
 
           <div class="row">
@@ -116,22 +120,25 @@
         <!-- Actions -->
         <div class="d-flex justify-content-between">
           <div v-if="editMode">
-            <button
-              type="button"
-              class="btn btn-sm bg-gradient-danger me-2"
+            <SoftButton
+              color="danger"
+              variant="gradient"
+              size="sm"
+              class="me-2"
               :disabled="loading"
               @click="resetChanges"
             >
               Annuler
-            </button>
-            <button
-              type="button"
-              class="btn btn-sm bg-gradient-success"
+            </SoftButton>
+            <SoftButton
+              color="success"
+              variant="gradient"
+              size="sm"
               :disabled="loading || !hasChanges"
               @click="saveChanges"
             >
               <i class="fas fa-save me-2"></i>Sauvegarder
-            </button>
+            </SoftButton>
           </div>
         </div>
       </template>
@@ -193,20 +200,22 @@
           </div>
         </div>
         <div class="modal-footer">
-          <button
-            type="button"
-            class="btn btn-sm bg-gradient-secondary"
+          <SoftButton
+            color="secondary"
+            variant="gradient"
+            size="sm"
             @click="showTeamModal = false"
           >
             Annuler
-          </button>
-          <button
-            type="button"
-            class="btn btn-sm bg-gradient-primary"
+          </SoftButton>
+          <SoftButton
+            color="primary"
+            variant="gradient"
+            size="sm"
             @click="saveTeamSelection"
           >
             Valider la sélection
-          </button>
+          </SoftButton>
         </div>
       </div>
     </div>
@@ -217,6 +226,7 @@
 import { ref, computed, watch, defineProps, defineEmits } from "vue";
 import SoftInput from "@/components/SoftInput.vue";
 import SoftBadge from "@/components/SoftBadge.vue";
+import SoftButton from "@/components/SoftButton.vue";
 import LocationManager from "@/components/Organism/Location/LocationManager.vue";
 
 const props = defineProps({
diff --git a/thanasoft-front/src/components/molecules/Product/ProductInfoSection.vue b/thanasoft-front/src/components/molecules/Product/ProductInfoSection.vue
index dec501b..fbc4d40 100644
--- a/thanasoft-front/src/components/molecules/Product/ProductInfoSection.vue
+++ b/thanasoft-front/src/components/molecules/Product/ProductInfoSection.vue
@@ -2,19 +2,33 @@
   <div class="info-section">
     <!-- Read mode -->
     <template v-if="!editMode">
-      <field-display label="Nom du produit"   :value="product.nom" />
-      <field-display label="Référence"         :value="product.reference" fallback="Sans référence" />
-      <field-display label="Catégorie"         :value="categoryName" />
-      <field-display label="Fabricant"         :value="product.fabricant" fallback="Non renseigné" />
-      <field-display label="Numéro de lot"     :value="product.numero_lot" fallback="Non renseigné" />
-      <field-display label="Unité"             :value="product.unite" />
+      <field-display label="Nom du produit" :value="product.nom" />
+      <field-display
+        label="Référence"
+        :value="product.reference"
+        fallback="Sans référence"
+      />
+      <field-display label="Catégorie" :value="categoryName" />
+      <field-display
+        label="Fabricant"
+        :value="product.fabricant"
+        fallback="Non renseigné"
+      />
+      <field-display
+        label="Numéro de lot"
+        :value="product.numero_lot"
+        fallback="Non renseigné"
+      />
+      <field-display label="Unité" :value="product.unite" />
       <field-display
         label="Date d'expiration"
         :value="formattedExpiration"
         :value-class="expirationClass"
       />
       <field-display label="Description">
-        <span style="white-space: pre-line">{{ product.description || "Aucune description" }}</span>
+        <span style="white-space: pre-line">{{
+          product.description || "Aucune description"
+        }}</span>
       </field-display>
     </template>
 
@@ -35,7 +49,9 @@
           required
           :error="errors.reference?.[0]"
           placeholder="Référence produit"
-          @update:model-value="$emit('update:form', { ...form, reference: $event })"
+          @update:model-value="
+            $emit('update:form', { ...form, reference: $event })
+          "
         />
         <field-input
           label="Catégorie"
@@ -43,10 +59,16 @@
           :model-value="form.categorie_id"
           required
           :error="errors.categorie_id?.[0]"
-          @update:model-value="$emit('update:form', { ...form, categorie_id: $event })"
+          @update:model-value="
+            $emit('update:form', { ...form, categorie_id: $event })
+          "
         >
           <option value="">Sélectionner une catégorie</option>
-          <option v-for="cat in categories" :key="cat.id" :value="cat.id.toString()">
+          <option
+            v-for="cat in categories"
+            :key="cat.id"
+            :value="cat.id.toString()"
+          >
             {{ cat.name }}
           </option>
         </field-input>
@@ -55,21 +77,27 @@
           :model-value="form.fabricant"
           :error="errors.fabricant?.[0]"
           placeholder="Fabricant"
-          @update:model-value="$emit('update:form', { ...form, fabricant: $event })"
+          @update:model-value="
+            $emit('update:form', { ...form, fabricant: $event })
+          "
         />
         <field-input
           label="Numéro de lot"
           :model-value="form.numero_lot"
           :error="errors.numero_lot?.[0]"
           placeholder="Numéro de lot"
-          @update:model-value="$emit('update:form', { ...form, numero_lot: $event })"
+          @update:model-value="
+            $emit('update:form', { ...form, numero_lot: $event })
+          "
         />
         <field-input
           label="Date d'expiration"
           type="date"
           :model-value="form.date_expiration"
           :error="errors.date_expiration?.[0]"
-          @update:model-value="$emit('update:form', { ...form, date_expiration: $event })"
+          @update:model-value="
+            $emit('update:form', { ...form, date_expiration: $event })
+          "
         />
         <field-input
           label="Unité"
@@ -85,7 +113,9 @@
           :model-value="form.description"
           placeholder="Description du produit..."
           style="grid-column: 1 / -1"
-          @update:model-value="$emit('update:form', { ...form, description: $event })"
+          @update:model-value="
+            $emit('update:form', { ...form, description: $event })
+          "
         />
       </div>
     </template>
@@ -95,22 +125,24 @@
 <script setup>
 import { computed, defineProps, defineEmits } from "vue";
 import FieldDisplay from "@/components/atoms/Product/FieldDisplay.vue";
-import FieldInput   from "@/components/atoms/Product/FieldInput.vue";
+import FieldInput from "@/components/atoms/Product/FieldInput.vue";
 
 const props = defineProps({
-  product:     { type: Object, required: true },
-  form:        { type: Object, required: true },
-  categories:  { type: Array,  default: () => [] },
-  errors:      { type: Object, default: () => ({}) },
-  editMode:    { type: Boolean, default: false },
-  categoryName:{ type: String, default: "" },
+  product: { type: Object, required: true },
+  form: { type: Object, required: true },
+  categories: { type: Array, default: () => [] },
+  errors: { type: Object, default: () => ({}) },
+  editMode: { type: Boolean, default: false },
+  categoryName: { type: String, default: "" },
 });
 defineEmits(["update:form"]);
 
 const formattedExpiration = computed(() => {
   if (!props.product?.date_expiration) return "Non renseignée";
   return new Date(props.product.date_expiration).toLocaleDateString("fr-FR", {
-    day: "numeric", month: "long", year: "numeric",
+    day: "numeric",
+    month: "long",
+    year: "numeric",
   });
 });
 
@@ -126,13 +158,18 @@ const expirationClass = computed(() => {
 </script>
 
 <style scoped>
-.info-section { display: flex; flex-direction: column; }
+.info-section {
+  display: flex;
+  flex-direction: column;
+}
 .info-section__grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 1rem;
 }
 @media (max-width: 640px) {
-  .info-section__grid { grid-template-columns: 1fr; }
+  .info-section__grid {
+    grid-template-columns: 1fr;
+  }
 }
 </style>
diff --git a/thanasoft-front/src/components/molecules/Product/ProductMovementsSection.vue b/thanasoft-front/src/components/molecules/Product/ProductMovementsSection.vue
index 00577b8..1950a86 100644
--- a/thanasoft-front/src/components/molecules/Product/ProductMovementsSection.vue
+++ b/thanasoft-front/src/components/molecules/Product/ProductMovementsSection.vue
@@ -1,7 +1,16 @@
 <template>
   <div>
     <div v-if="!movements.length" class="movements-empty">
-      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1"><path d="M7 16l-4-4 4-4M17 8l4 4-4 4M14 4l-4 16"/></svg>
+      <svg
+        width="28"
+        height="28"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1"
+      >
+        <path d="M7 16l-4-4 4-4M17 8l4 4-4 4M14 4l-4 16" />
+      </svg>
       <p>Aucun mouvement de stock enregistré</p>
     </div>
     <div v-else class="movements-table-wrap">
@@ -16,7 +25,9 @@
         </thead>
         <tbody>
           <tr v-for="m in movements" :key="m.id">
-            <td class="movements-table__date">{{ formatDate(m.date || m.created_at) }}</td>
+            <td class="movements-table__date">
+              {{ formatDate(m.date || m.created_at) }}
+            </td>
             <td>
               <span class="movements-table__type" :class="typeClass(m.type)">
                 {{ m.type || "—" }}
@@ -25,7 +36,9 @@
             <td class="movements-table__qty" :class="qtyClass(m)">
               {{ formatQty(m) }}
             </td>
-            <td class="movements-table__ref">{{ m.reference || m.reason || "—" }}</td>
+            <td class="movements-table__ref">
+              {{ m.reference || m.reason || "—" }}
+            </td>
           </tr>
         </tbody>
       </table>
@@ -43,7 +56,9 @@ defineProps({
 const formatDate = (d) => {
   if (!d) return "—";
   return new Date(d).toLocaleDateString("fr-FR", {
-    day: "2-digit", month: "short", year: "numeric",
+    day: "2-digit",
+    month: "short",
+    year: "numeric",
   });
 };
 
@@ -57,7 +72,8 @@ const formatQty = (m) => {
 const typeClass = (type) => {
   if (!type) return "";
   const t = type.toLowerCase();
-  if (t.includes("entree") || t.includes("entrée") || t.includes("achat")) return "type-in";
+  if (t.includes("entree") || t.includes("entrée") || t.includes("achat"))
+    return "type-in";
   if (t.includes("sortie") || t.includes("utilisation")) return "type-out";
   return "type-neutral";
 };
@@ -78,9 +94,14 @@ const qtyClass = (m) => {
   color: #9ca3af;
   text-align: center;
 }
-.movements-empty p { font-size: 14px; margin: 0; }
+.movements-empty p {
+  font-size: 14px;
+  margin: 0;
+}
 
-.movements-table-wrap { overflow-x: auto; }
+.movements-table-wrap {
+  overflow-x: auto;
+}
 
 .movements-table {
   width: 100%;
@@ -106,11 +127,21 @@ const qtyClass = (m) => {
   border-bottom: 1px solid #f9fafb;
   vertical-align: middle;
 }
-.movements-table tr:last-child td { border-bottom: none; }
-.movements-table tr:hover td { background: #f9fafb; }
+.movements-table tr:last-child td {
+  border-bottom: none;
+}
+.movements-table tr:hover td {
+  background: #f9fafb;
+}
 
-.movements-table__date { color: #6b7280; font-variant-numeric: tabular-nums; }
-.movements-table__ref  { color: #9ca3af; font-size: 12px; }
+.movements-table__date {
+  color: #6b7280;
+  font-variant-numeric: tabular-nums;
+}
+.movements-table__ref {
+  color: #9ca3af;
+  font-size: 12px;
+}
 
 .movements-table__type {
   display: inline-block;
@@ -121,11 +152,27 @@ const qtyClass = (m) => {
   text-transform: uppercase;
   letter-spacing: 0.04em;
 }
-.type-in      { background: #ecfdf5; color: #065f46; }
-.type-out     { background: #fef2f2; color: #991b1b; }
-.type-neutral { background: #f3f4f6; color: #374151; }
+.type-in {
+  background: #ecfdf5;
+  color: #065f46;
+}
+.type-out {
+  background: #fef2f2;
+  color: #991b1b;
+}
+.type-neutral {
+  background: #f3f4f6;
+  color: #374151;
+}
 
-.movements-table__qty { font-weight: 600; font-variant-numeric: tabular-nums; }
-.qty-positive { color: #059669; }
-.qty-negative { color: #dc2626; }
+.movements-table__qty {
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+.qty-positive {
+  color: #059669;
+}
+.qty-negative {
+  color: #dc2626;
+}
 </style>
diff --git a/thanasoft-front/src/components/molecules/Product/ProductSidebar.vue b/thanasoft-front/src/components/molecules/Product/ProductSidebar.vue
index ce895a4..7f97d7e 100644
--- a/thanasoft-front/src/components/molecules/Product/ProductSidebar.vue
+++ b/thanasoft-front/src/components/molecules/Product/ProductSidebar.vue
@@ -1,10 +1,7 @@
 <template>
   <aside class="product-sidebar">
     <div class="product-sidebar__img-wrap">
-      <product-image
-        :image-url="imageUrl"
-        :alt-text="`Image de ${name}`"
-      />
+      <product-image :image-url="imageUrl" :alt-text="`Image de ${name}`" />
     </div>
 
     <div class="product-sidebar__meta">
@@ -15,7 +12,9 @@
           {{ isLowStock ? "Stock faible" : "Stock OK" }}
         </product-badge>
         <product-badge v-if="isExpired" variant="danger">Expiré</product-badge>
-        <product-badge v-else-if="isExpiringSoon" variant="info">Expire bientôt</product-badge>
+        <product-badge v-else-if="isExpiringSoon" variant="info"
+          >Expire bientôt</product-badge
+        >
       </div>
     </div>
 
@@ -40,14 +39,14 @@ import ProductImage from "@/components/atoms/Product/ProductImage.vue";
 import ProductBadge from "@/components/atoms/Product/ProductBadge.vue";
 
 defineProps({
-  modelValue:    { type: String, default: "details" },
-  name:          { type: String, default: "" },
-  reference:     { type: String, default: "" },
-  imageUrl:      { type: String, default: "" },
-  isLowStock:    { type: Boolean, default: false },
-  isExpired:     { type: Boolean, default: false },
-  isExpiringSoon:{ type: Boolean, default: false },
-  tabs:          { type: Array, default: () => [] },
+  modelValue: { type: String, default: "details" },
+  name: { type: String, default: "" },
+  reference: { type: String, default: "" },
+  imageUrl: { type: String, default: "" },
+  isLowStock: { type: Boolean, default: false },
+  isExpired: { type: Boolean, default: false },
+  isExpiringSoon: { type: Boolean, default: false },
+  tabs: { type: Array, default: () => [] },
 });
 defineEmits(["update:modelValue"]);
 </script>
@@ -94,7 +93,7 @@ defineEmits(["update:modelValue"]);
   font-size: 12px;
   color: #9ca3af;
   margin: 0;
-  font-family: 'SF Mono', 'Fira Code', monospace;
+  font-family: "SF Mono", "Fira Code", monospace;
 }
 .product-sidebar__badges {
   display: flex;
@@ -126,10 +125,17 @@ defineEmits(["update:modelValue"]);
   text-align: left;
   transition: background 0.12s, color 0.12s;
 }
-.product-sidebar__nav-item:hover { background: #f9fafb; color: #111827; }
+.product-sidebar__nav-item:hover {
+  background: #f9fafb;
+  color: #111827;
+}
 .product-sidebar__nav-item.is-active {
   background: #111827;
   color: #fff;
 }
-.nav-icon { width: 15px; height: 15px; flex-shrink: 0; }
+.nav-icon {
+  width: 15px;
+  height: 15px;
+  flex-shrink: 0;
+}
 </style>
diff --git a/thanasoft-front/src/components/molecules/Product/ProductStockSection.vue b/thanasoft-front/src/components/molecules/Product/ProductStockSection.vue
index c5616a0..7f62912 100644
--- a/thanasoft-front/src/components/molecules/Product/ProductStockSection.vue
+++ b/thanasoft-front/src/components/molecules/Product/ProductStockSection.vue
@@ -30,7 +30,9 @@
           min="0"
           step="1"
           placeholder="0"
-          @update:model-value="$emit('update:form', { ...form, stock_actuel: $event })"
+          @update:model-value="
+            $emit('update:form', { ...form, stock_actuel: $event })
+          "
         />
         <field-input
           label="Stock minimum"
@@ -41,7 +43,9 @@
           min="0"
           step="1"
           placeholder="0"
-          @update:model-value="$emit('update:form', { ...form, stock_minimum: $event })"
+          @update:model-value="
+            $emit('update:form', { ...form, stock_minimum: $event })
+          "
         />
         <field-input
           label="Prix unitaire (€)"
@@ -52,14 +56,18 @@
           min="0"
           step="0.01"
           placeholder="0.00"
-          @update:model-value="$emit('update:form', { ...form, prix_unitaire: $event })"
+          @update:model-value="
+            $emit('update:form', { ...form, prix_unitaire: $event })
+          "
         />
         <field-input
           label="Conditionnement"
           :model-value="form.conditionnement_nom"
           :error="errors.conditionnement_nom?.[0]"
           placeholder="ex: Carton 12 unités"
-          @update:model-value="$emit('update:form', { ...form, conditionnement_nom: $event })"
+          @update:model-value="
+            $emit('update:form', { ...form, conditionnement_nom: $event })
+          "
         />
         <field-input
           label="Qté par conditionnement"
@@ -69,7 +77,9 @@
           min="0"
           step="1"
           placeholder="0"
-          @update:model-value="$emit('update:form', { ...form, conditionnement_quantite: $event })"
+          @update:model-value="
+            $emit('update:form', { ...form, conditionnement_quantite: $event })
+          "
         />
       </div>
     </template>
@@ -80,7 +90,8 @@
         <span class="cond-value">
           {{ product.conditionnement?.nom }}
           <span v-if="product.conditionnement?.quantite">
-            · {{ product.conditionnement.quantite }} {{ product.conditionnement.unite }}
+            · {{ product.conditionnement.quantite }}
+            {{ product.conditionnement.unite }}
           </span>
         </span>
       </div>
@@ -111,27 +122,32 @@
 <script setup>
 import { computed, defineProps, defineEmits } from "vue";
 import ProductStatCard from "@/components/atoms/Product/ProductStatCard.vue";
-import FieldInput      from "@/components/atoms/Product/FieldInput.vue";
+import FieldInput from "@/components/atoms/Product/FieldInput.vue";
 import SoftBadge from "@/components/SoftBadge.vue";
 
 const props = defineProps({
-  product:       { type: Object, required: true },
-  form:          { type: Object, required: true },
-  errors:        { type: Object, default: () => ({}) },
-  editMode:      { type: Boolean, default: false },
-  isExpired:     { type: Boolean, default: false },
-  isExpiringSoon:{ type: Boolean, default: false },
+  product: { type: Object, required: true },
+  form: { type: Object, required: true },
+  errors: { type: Object, default: () => ({}) },
+  editMode: { type: Boolean, default: false },
+  isExpired: { type: Boolean, default: false },
+  isExpiringSoon: { type: Boolean, default: false },
 });
 defineEmits(["update:form"]);
 
 const formattedPrice = computed(() => {
   const p = props.product.prix_unitaire;
   if (!p && p !== 0) return "—";
-  return new Intl.NumberFormat("fr-FR", { style: "currency", currency: "EUR" }).format(p);
+  return new Intl.NumberFormat("fr-FR", {
+    style: "currency",
+    currency: "EUR",
+  }).format(p);
 });
 
-const hasConditioning = computed(() =>
-  props.product.conditionnement?.nom || props.product.conditionnement?.quantite
+const hasConditioning = computed(
+  () =>
+    props.product.conditionnement?.nom ||
+    props.product.conditionnement?.quantite
 );
 </script>
 
@@ -146,7 +162,11 @@ const hasConditioning = computed(() =>
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 1rem;
 }
-.stock-indicators { display: flex; flex-wrap: wrap; gap: 6px; }
+.stock-indicators {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
 .cond-row {
   display: flex;
   align-items: center;
@@ -164,9 +184,16 @@ const hasConditioning = computed(() =>
   color: #9ca3af;
   min-width: 120px;
 }
-.cond-value { font-size: 14px; color: #111827; }
+.cond-value {
+  font-size: 14px;
+  color: #111827;
+}
 @media (max-width: 640px) {
-  .stock-stats { grid-template-columns: 1fr 1fr; }
-  .stock-grid  { grid-template-columns: 1fr; }
+  .stock-stats {
+    grid-template-columns: 1fr 1fr;
+  }
+  .stock-grid {
+    grid-template-columns: 1fr;
+  }
 }
 </style>
diff --git a/thanasoft-front/src/components/molecules/Product/ProductSupplierSection.vue b/thanasoft-front/src/components/molecules/Product/ProductSupplierSection.vue
index 37f224d..a838dcb 100644
--- a/thanasoft-front/src/components/molecules/Product/ProductSupplierSection.vue
+++ b/thanasoft-front/src/components/molecules/Product/ProductSupplierSection.vue
@@ -6,18 +6,39 @@
       </div>
       <div class="supplier-card__body">
         <p class="supplier-card__name">{{ supplier.name || supplier.nom }}</p>
-        <p v-if="supplier.email" class="supplier-card__email">{{ supplier.email }}</p>
-        <p v-if="supplier.phone" class="supplier-card__phone">{{ supplier.phone }}</p>
+        <p v-if="supplier.email" class="supplier-card__email">
+          {{ supplier.email }}
+        </p>
+        <p v-if="supplier.phone" class="supplier-card__phone">
+          {{ supplier.phone }}
+        </p>
       </div>
       <button class="supplier-card__cta" @click="$emit('view', supplier)">
-        <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
-          <path d="M3 13L13 3M13 3H7M13 3v6"/>
+        <svg
+          width="14"
+          height="14"
+          viewBox="0 0 16 16"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.5"
+        >
+          <path d="M3 13L13 3M13 3H7M13 3v6" />
         </svg>
         Voir le fournisseur
       </button>
     </div>
     <div v-else class="supplier-empty">
-      <svg width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1"><rect x="2" y="4" width="12" height="9" rx="1.5"/><path d="M5 4V3a1 1 0 011-1h4a1 1 0 011 1v1"/></svg>
+      <svg
+        width="20"
+        height="20"
+        viewBox="0 0 16 16"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1"
+      >
+        <rect x="2" y="4" width="12" height="9" rx="1.5" />
+        <path d="M5 4V3a1 1 0 011-1h4a1 1 0 011 1v1" />
+      </svg>
       Aucun fournisseur associé
     </div>
   </div>
@@ -33,7 +54,12 @@ defineEmits(["view"]);
 
 const initials = computed(() => {
   const name = props.supplier?.name || props.supplier?.nom || "";
-  return name.split(" ").map(w => w[0] || "").join("").slice(0, 2).toUpperCase();
+  return name
+    .split(" ")
+    .map((w) => w[0] || "")
+    .join("")
+    .slice(0, 2)
+    .toUpperCase();
 });
 </script>
 
@@ -60,7 +86,10 @@ const initials = computed(() => {
   font-weight: 700;
   flex-shrink: 0;
 }
-.supplier-card__body { flex: 1; min-width: 0; }
+.supplier-card__body {
+  flex: 1;
+  min-width: 0;
+}
 .supplier-card__name {
   font-size: 15px;
   font-weight: 600;
@@ -90,7 +119,10 @@ const initials = computed(() => {
   transition: background 0.12s, border-color 0.12s;
   flex-shrink: 0;
 }
-.supplier-card__cta:hover { background: #f3f4f6; border-color: #9ca3af; }
+.supplier-card__cta:hover {
+  background: #f3f4f6;
+  border-color: #9ca3af;
+}
 
 .supplier-empty {
   display: flex;
diff --git a/thanasoft-front/src/components/molecules/Stock/NewReceptionForm.vue b/thanasoft-front/src/components/molecules/Stock/NewReceptionForm.vue
index ae143f4..ad89c56 100644
--- a/thanasoft-front/src/components/molecules/Stock/NewReceptionForm.vue
+++ b/thanasoft-front/src/components/molecules/Stock/NewReceptionForm.vue
@@ -210,7 +210,7 @@
                 <SoftButton
                   type="button"
                   color="warning"
-                size="sm"
+                  size="sm"
                   :variant="
                     formData.status === 'draft' ? 'gradient' : 'outline'
                   "
diff --git a/thanasoft-front/src/components/molecules/Tables/Stock/ProductTable.vue b/thanasoft-front/src/components/molecules/Tables/Stock/ProductTable.vue
index 1c71fb3..07ddfc2 100644
--- a/thanasoft-front/src/components/molecules/Tables/Stock/ProductTable.vue
+++ b/thanasoft-front/src/components/molecules/Tables/Stock/ProductTable.vue
@@ -3,7 +3,7 @@
     <!-- Loading State -->
     <div v-if="loading" class="loading-container">
       <div class="loading-spinner">
-        <div class="spinner-border text-primary" role="status">
+        <div class="spinner-border text-success loading-spinner-circle" role="status">
           <span class="visually-hidden">Chargement...</span>
         </div>
       </div>
@@ -108,13 +108,7 @@
             <!-- Product Column -->
             <td class="font-weight-bold">
               <div class="d-flex align-items-center">
-                <soft-avatar
-                  :img="product.media?.photo_url || getRandomAvatar()"
-                  size="xs"
-                  class="me-2"
-                  alt="product image"
-                  circular
-                />
+                <soft-checkbox />
                 <span>{{ product.nom }}</span>
               </div>
             </td>
@@ -208,15 +202,16 @@
                   <i class="fas fa-clock me-1"></i>
                   Expire bientôt
                 </soft-button>
-
                 <!-- Normal Status -->
-                <span
+                 <soft-button
                   v-if="!product.is_low_stock && !isExpiringSoon(product)"
-                  class="badge badge-success"
+                  color="success"
+                  variant="outline"
+                  class="btn-sm"
                 >
-                  <i class="fas fa-check me-1"></i>
-                  Normal
-                </span>
+                 <i class="fas fa-check me-1"></i>
+                  Stock Normal
+                </soft-button>
               </div>
             </td>
 
@@ -466,22 +461,30 @@ onMounted(() => {
 
 .loading-container {
   position: relative;
+  min-height: 260px;
 }
 
 .loading-spinner {
   position: absolute;
-  top: 20px;
-  right: 20px;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
   z-index: 10;
 }
 
+.loading-spinner-circle {
+  width: 2.25rem;
+  height: 2.25rem;
+  border-width: 0.28em;
+}
+
 .loading-content {
-  opacity: 0.7;
+  opacity: 0.55;
   pointer-events: none;
 }
 
 .skeleton-row {
-  animation: pulse 1.5s ease-in-out infinite;
+  animation: none;
 }
 
 .skeleton-checkbox {
@@ -585,11 +588,6 @@ onMounted(() => {
 
 /* Responsive adjustments */
 @media (max-width: 768px) {
-  .loading-spinner {
-    top: 10px;
-    right: 10px;
-  }
-
   .skeleton-text.long {
     width: 80px;
   }
diff --git a/thanasoft-front/src/components/molecules/intervention/AssignPractitionerModal.vue b/thanasoft-front/src/components/molecules/intervention/AssignPractitionerModal.vue
index ced5bba..d0c9b84 100644
--- a/thanasoft-front/src/components/molecules/intervention/AssignPractitionerModal.vue
+++ b/thanasoft-front/src/components/molecules/intervention/AssignPractitionerModal.vue
@@ -1,241 +1,502 @@
 <template>
-  <div
-    class="modal fade"
-    :class="{ show: isOpen }"
-    :style="{ display: isOpen ? 'block' : 'none' }"
-    tabindex="-1"
-    role="dialog"
-    @click.self="close"
-  >
-    <div class="modal-dialog modal-dialog-centered" role="document">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h5 class="modal-title">Assigner un thanatopracteur</h5>
-          <button
-            type="button"
-            class="btn-close"
-            aria-label="Fermer"
-            @click="close"
-          ></button>
-        </div>
-        <div class="modal-body">
-          <!-- Search Input -->
-          <div class="mb-3">
-            <label class="form-label">Rechercher par nom</label>
-            <div class="input-group">
-              <span class="input-group-text">
-                <i class="fas fa-search"></i>
-              </span>
-              <input
-                v-model="searchQuery"
-                type="text"
-                class="form-control"
-                placeholder="Tapez le nom du thanatopracteur..."
-                @input="handleSearch"
-              />
-            </div>
-          </div>
-
-          <!-- Loading State -->
-          <div v-if="loading" class="text-center py-3">
-            <div
-              class="spinner-border spinner-border-sm text-primary"
-              role="status"
-            >
-              <span class="visually-hidden">Chargement...</span>
-            </div>
-            <span class="ms-2">Recherche en cours...</span>
-          </div>
-
-          <!-- Results List -->
-          <div v-else-if="searchResults.length > 0" class="list-group">
-            <button
-              v-for="practitioner in searchResults"
-              :key="practitioner.id"
-              type="button"
-              class="list-group-item list-group-item-action d-flex align-items-center"
-              :class="{ active: selectedPractitioner?.id === practitioner.id }"
-              @click="selectPractitioner(practitioner)"
-            >
-              <div class="avatar avatar-sm me-3">
-                <img
-                  :src="practitioner.avatar || '/images/avatar-default.png'"
-                  alt="Avatar"
-                  class="rounded-circle"
-                  style="width: 40px; height: 40px; object-fit: cover"
-                />
+  <!-- Backdrop -->
+  <Teleport to="body">
+    <Transition name="modal-fade">
+      <div
+        v-if="isOpen"
+        class="modal-backdrop"
+        @mousedown.self="$emit('close')"
+      >
+        <div
+          class="modal-box"
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="modal-title"
+        >
+          <!-- Header -->
+          <div class="modal-header">
+            <div class="modal-title-wrap">
+              <div class="modal-icon">
+                <svg
+                  width="18"
+                  height="18"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                >
+                  <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+                  <circle cx="8.5" cy="7" r="4" />
+                  <line x1="20" y1="8" x2="20" y2="14" />
+                  <line x1="23" y1="11" x2="17" y2="11" />
+                </svg>
               </div>
-              <div class="flex-grow-1">
-                <h6 class="mb-0">
-                  {{
-                    practitioner.employee.full_name ||
-                    `${practitioner.employee.first_name} ${practitioner.employee.last_name}`
-                  }}
-                </h6>
-                <small class="text-muted">{{
-                  practitioner.employee.email || "Email non disponible"
-                }}</small>
+              <div>
+                <h2 id="modal-title" class="modal-title">
+                  Assigner un praticien
+                </h2>
+                <p class="modal-sub">Sélectionnez un praticien et son rôle</p>
               </div>
-              <i
-                v-if="selectedPractitioner?.id === practitioner.id"
-                class="fas fa-check text-success"
-              ></i>
+            </div>
+            <button class="close-btn" @click="$emit('close')">
+              <svg
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2.5"
+              >
+                <line x1="18" y1="6" x2="6" y2="18" />
+                <line x1="6" y1="6" x2="18" y2="18" />
+              </svg>
             </button>
           </div>
 
-          <!-- No Results -->
-          <div
-            v-else-if="searchQuery.length >= 2 && !loading"
-            class="text-center text-muted py-3"
-          >
-            <i class="fas fa-user-slash fa-2x mb-2"></i>
-            <p class="mb-0">Aucun thanatopracteur trouvé</p>
+          <!-- Body -->
+          <div class="modal-body">
+            <!-- Practitioner ID -->
+            <div class="form-group">
+              <label class="form-label">Identifiant du praticien</label>
+              <input
+                v-model="form.practitionerId"
+                type="number"
+                class="form-input"
+                placeholder="ex: 42"
+                min="1"
+              />
+              <p class="form-hint">
+                Entrez l'ID du praticien à assigner à cette intervention.
+              </p>
+            </div>
+
+            <!-- Role -->
+            <div class="form-group">
+              <label class="form-label">Rôle</label>
+              <div class="role-grid">
+                <button
+                  class="role-option"
+                  :class="{ selected: form.role === 'principal' }"
+                  type="button"
+                  @click="form.role = 'principal'"
+                >
+                  <div class="role-radio">
+                    <div
+                      v-if="form.role === 'principal'"
+                      class="role-radio-dot"
+                    ></div>
+                  </div>
+                  <div class="role-info">
+                    <div class="role-name">Principal</div>
+                    <div class="role-desc">Responsable de l'intervention</div>
+                  </div>
+                  <span class="role-chip chip-principal">Principal</span>
+                </button>
+
+                <button
+                  class="role-option"
+                  :class="{ selected: form.role === 'assistant' }"
+                  type="button"
+                  @click="form.role = 'assistant'"
+                >
+                  <div class="role-radio">
+                    <div
+                      v-if="form.role === 'assistant'"
+                      class="role-radio-dot"
+                    ></div>
+                  </div>
+                  <div class="role-info">
+                    <div class="role-name">Assistant</div>
+                    <div class="role-desc">Rôle de soutien et assistance</div>
+                  </div>
+                  <span class="role-chip chip-assistant">Assistant</span>
+                </button>
+              </div>
+            </div>
+
+            <!-- Validation error -->
+            <Transition name="slide-error">
+              <div v-if="error" class="error-banner">
+                <svg
+                  width="14"
+                  height="14"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                >
+                  <circle cx="12" cy="12" r="10" />
+                  <line x1="12" y1="8" x2="12" y2="12" />
+                  <line x1="12" y1="16" x2="12.01" y2="16" />
+                </svg>
+                {{ error }}
+              </div>
+            </Transition>
           </div>
 
-          <!-- Initial State -->
-          <div v-else class="text-center text-muted py-3">
-            <i class="fas fa-search fa-2x mb-2"></i>
-            <p class="mb-0">Tapez au moins 2 caractères pour rechercher</p>
+          <!-- Footer -->
+          <div class="modal-footer">
+            <button class="btn-ghost" @click="$emit('close')">Annuler</button>
+            <button class="btn-primary" @click="handleSubmit">
+              <svg
+                width="13"
+                height="13"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2.5"
+              >
+                <polyline points="20 6 9 17 4 12" />
+              </svg>
+              Confirmer l'assignation
+            </button>
           </div>
-
-          <!-- Role Selection -->
-          <div v-if="selectedPractitioner" class="mt-3">
-            <label class="form-label">Rôle dans l'intervention</label>
-            <select v-model="selectedRole" class="form-select">
-              <option value="principal">Principal</option>
-              <option value="assistant">Assistant</option>
-            </select>
-          </div>
-        </div>
-        <div class="modal-footer">
-          <button type="button" class="btn btn-secondary" @click="close">
-            Annuler
-          </button>
-          <button
-            type="button"
-            class="btn btn-primary"
-            :disabled="!selectedPractitioner"
-            @click="confirmAssignment"
-          >
-            <i class="fas fa-user-plus me-2"></i>Assigner
-          </button>
         </div>
       </div>
-    </div>
-  </div>
-  <!-- Backdrop -->
-  <div v-if="isOpen" class="modal-backdrop fade show"></div>
+    </Transition>
+  </Teleport>
 </template>
 
 <script setup>
-import { ref, watch } from "vue";
-import { useThanatopractitionerStore } from "@/stores/thanatopractitionerStore";
-import { defineProps, defineEmits } from "vue";
+import { ref, watch, defineProps, defineEmits } from "vue";
 
 const props = defineProps({
-  isOpen: {
-    type: Boolean,
-    default: false,
-  },
+  isOpen: { type: Boolean, default: false },
 });
-
 const emit = defineEmits(["close", "assign"]);
 
-const thanatopractitionerStore = useThanatopractitionerStore();
+const form = ref({ practitionerId: "", role: "principal" });
+const error = ref("");
 
-const searchQuery = ref("");
-const searchResults = ref([]);
-const selectedPractitioner = ref(null);
-const selectedRole = ref("principal");
-const loading = ref(false);
-
-let searchTimeout = null;
-
-const handleSearch = () => {
-  if (searchTimeout) {
-    clearTimeout(searchTimeout);
-  }
-
-  if (searchQuery.value.length < 2) {
-    searchResults.value = [];
-    return;
-  }
-
-  searchTimeout = setTimeout(async () => {
-    loading.value = true;
-    try {
-      const response = await thanatopractitionerStore.searchThanatopractitioners(
-        searchQuery.value
-      );
-      // The service returns the data directly, not wrapped in response.data
-      searchResults.value = Array.isArray(response) ? response : [];
-    } catch (error) {
-      console.error("Error searching practitioners:", error);
-      searchResults.value = [];
-    } finally {
-      loading.value = false;
-    }
-  }, 300);
-};
-
-const selectPractitioner = (practitioner) => {
-  selectedPractitioner.value = practitioner;
-};
-
-const confirmAssignment = () => {
-  if (selectedPractitioner.value) {
-    emit("assign", {
-      practitionerId: selectedPractitioner.value.id,
-      role: selectedRole.value,
-    });
-    resetForm();
-  }
-};
-
-const close = () => {
-  resetForm();
-  emit("close");
-};
-
-const resetForm = () => {
-  searchQuery.value = "";
-  searchResults.value = [];
-  selectedPractitioner.value = null;
-  selectedRole.value = "principal";
-};
-
-// Reset form when modal closes
+// Reset form when modal opens
 watch(
   () => props.isOpen,
-  (newValue) => {
-    if (!newValue) {
-      resetForm();
+  (open) => {
+    if (open) {
+      form.value = { practitionerId: "", role: "principal" };
+      error.value = "";
     }
   }
 );
+
+const handleSubmit = () => {
+  error.value = "";
+  if (!form.value.practitionerId) {
+    error.value = "Veuillez entrer un identifiant de praticien.";
+    return;
+  }
+  if (parseInt(form.value.practitionerId) <= 0) {
+    error.value = "L'identifiant doit être un nombre positif.";
+    return;
+  }
+  emit("assign", {
+    practitionerId: parseInt(form.value.practitionerId),
+    role: form.value.role,
+  });
+};
 </script>
 
 <style scoped>
-.modal.show {
-  background-color: rgba(0, 0, 0, 0.5);
+/* ── Tokens ── */
+.modal-backdrop {
+  --brand: #4f46e5;
+  --brand-lt: #eef2ff;
+  --brand-dk: #3730a3;
+  --surface: #ffffff;
+  --surface-2: #f8fafc;
+  --border: #e2e8f0;
+  --text-1: #0f172a;
+  --text-2: #64748b;
+  --text-3: #94a3b8;
+  --r-sm: 8px;
+  --r-md: 12px;
+  position: fixed;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.45);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 20px;
 }
 
-.list-group-item {
+/* ── Modal box ── */
+.modal-box {
+  background: var(--surface);
+  border-radius: 16px;
+  width: 100%;
+  max-width: 460px;
+  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+}
+
+/* Header */
+.modal-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: 22px 24px 18px;
+  border-bottom: 1px solid var(--border);
+}
+.modal-title-wrap {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.modal-icon {
+  width: 38px;
+  height: 38px;
+  border-radius: 10px;
+  background: var(--brand-lt);
+  color: var(--brand);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.modal-title {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--text-1);
+  margin: 0;
+}
+.modal-sub {
+  font-size: 12.5px;
+  color: var(--text-3);
+  margin: 2px 0 0;
+}
+
+.close-btn {
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  border: 1px solid var(--border);
+  background: transparent;
   cursor: pointer;
-  transition: background-color 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-3);
+  transition: all 0.15s;
+  flex-shrink: 0;
+}
+.close-btn:hover {
+  background: var(--surface-2);
+  color: var(--text-1);
 }
 
-.list-group-item:hover {
-  background-color: #f8f9fa;
+/* Body */
+.modal-body {
+  padding: 20px 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
 }
 
-.list-group-item.active {
-  background-color: #e3f2fd;
-  border-color: #2196f3;
-  color: inherit;
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.form-label {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--text-2);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.form-hint {
+  font-size: 11.5px;
+  color: var(--text-3);
+  margin: 2px 0 0;
 }
 
-.list-group-item.active:hover {
-  background-color: #bbdefb;
+.form-input {
+  padding: 9px 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-sm);
+  font-size: 13.5px;
+  color: var(--text-1);
+  background: var(--surface);
+  outline: none;
+  transition: border-color 0.15s, box-shadow 0.15s;
+  font-family: inherit;
+  width: 100%;
+}
+.form-input:focus {
+  border-color: var(--brand);
+  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
+}
+
+/* Role grid */
+.role-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.role-option {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 14px;
+  border: 1.5px solid var(--border);
+  border-radius: var(--r-sm);
+  background: transparent;
+  cursor: pointer;
+  text-align: left;
+  width: 100%;
+  transition: all 0.15s;
+}
+.role-option:hover {
+  border-color: #a5b4fc;
+  background: var(--brand-lt);
+}
+.role-option.selected {
+  border-color: var(--brand);
+  background: var(--brand-lt);
+}
+
+.role-radio {
+  width: 17px;
+  height: 17px;
+  border-radius: 50%;
+  border: 2px solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: border-color 0.15s;
+}
+.role-option.selected .role-radio {
+  border-color: var(--brand);
+}
+.role-radio-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--brand);
+}
+
+.role-info {
+  flex: 1;
+}
+.role-name {
+  font-size: 13.5px;
+  font-weight: 600;
+  color: var(--text-1);
+}
+.role-desc {
+  font-size: 11.5px;
+  color: var(--text-3);
+  margin-top: 1px;
+}
+
+.role-chip {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 10px;
+  font-size: 10.5px;
+  font-weight: 600;
+}
+.chip-principal {
+  background: #eef2ff;
+  color: #4f46e5;
+}
+.chip-assistant {
+  background: #f0fdf4;
+  color: #16a34a;
+}
+
+/* Error */
+.error-banner {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 13px;
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  border-radius: var(--r-sm);
+  font-size: 13px;
+  color: #dc2626;
+  font-weight: 500;
+}
+
+/* Footer */
+.modal-footer {
+  display: flex;
+  gap: 10px;
+  justify-content: flex-end;
+  padding: 16px 24px;
+  background: var(--surface-2);
+  border-top: 1px solid var(--border);
+}
+
+.btn-primary {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 9px 18px;
+  border-radius: var(--r-sm);
+  border: none;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 600;
+  color: white;
+  background: var(--brand);
+  transition: all 0.15s;
+}
+.btn-primary:hover {
+  background: var(--brand-dk);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
+}
+
+.btn-ghost {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 9px 16px;
+  border-radius: var(--r-sm);
+  border: 1px solid var(--border);
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-2);
+  background: transparent;
+  transition: all 0.15s;
+}
+.btn-ghost:hover {
+  background: var(--border);
+  color: var(--text-1);
+}
+
+/* ── Transitions ── */
+.modal-fade-enter-active,
+.modal-fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+.modal-fade-enter-active .modal-box,
+.modal-fade-leave-active .modal-box {
+  transition: transform 0.2s ease, opacity 0.2s ease;
+}
+.modal-fade-enter-from,
+.modal-fade-leave-to {
+  opacity: 0;
+}
+.modal-fade-enter-from .modal-box,
+.modal-fade-leave-to .modal-box {
+  transform: scale(0.96) translateY(8px);
+  opacity: 0;
+}
+
+.slide-error-enter-active,
+.slide-error-leave-active {
+  transition: all 0.2s ease;
+}
+.slide-error-enter-from,
+.slide-error-leave-to {
+  opacity: 0;
+  transform: translateY(-6px);
 }
 </style>
diff --git a/thanasoft-front/src/components/molecules/intervention/DataRow.vue b/thanasoft-front/src/components/molecules/intervention/DataRow.vue
new file mode 100644
index 0000000..b706ff8
--- /dev/null
+++ b/thanasoft-front/src/components/molecules/intervention/DataRow.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="data-row">
+    <span class="data-label">{{ label }}</span>
+    <span class="data-value" :class="{ 'fw-semibold': bold }">{{ value || "-" }}</span>
+  </div>
+</template>
+
+<script setup>
+
+import { defineProps } from 'vue';
+
+defineProps({
+  label: {
+    type: String,
+    default: "",
+  },
+  value: {
+    type: [String, Number],
+    default: "",
+  },
+  bold: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
diff --git a/thanasoft-front/src/components/molecules/intervention/InfoSection.vue b/thanasoft-front/src/components/molecules/intervention/InfoSection.vue
new file mode 100644
index 0000000..7bacfa4
--- /dev/null
+++ b/thanasoft-front/src/components/molecules/intervention/InfoSection.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="info-section">
+    <div class="info-section-header" :style="{ '--accent': iconColor }">
+      <span class="info-section-icon"><slot name="icon" /></span>
+      <span class="info-section-title">{{ title }}</span>
+    </div>
+    <div class="info-section-body"><slot /></div>
+  </div>
+</template>
+
+<script setup>
+
+import { defineProps } from 'vue';
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: "",
+  },
+  iconColor: {
+    type: String,
+    default: "#6366f1",
+  },
+});
+</script>
diff --git a/thanasoft-front/src/components/molecules/intervention/InterventionTabNavigation.vue b/thanasoft-front/src/components/molecules/intervention/InterventionTabNavigation.vue
index de60059..76221fe 100644
--- a/thanasoft-front/src/components/molecules/intervention/InterventionTabNavigation.vue
+++ b/thanasoft-front/src/components/molecules/intervention/InterventionTabNavigation.vue
@@ -1,66 +1,139 @@
 <template>
-  <ul class="nav nav-pills flex-column">
-    <TabNavigationItem
-      icon="fas fa-eye"
-      label="Vue d'ensemble"
-      :is-active="activeTab === 'overview'"
-      spacing=""
-      @click="$emit('change-tab', 'overview')"
-    />
-    <TabNavigationItem
-      icon="fas fa-list"
-      label="Détails"
-      :is-active="activeTab === 'details'"
-      @click="$emit('change-tab', 'details')"
-    />
-    <TabNavigationItem
-      icon="fas fa-users"
-      label="Équipe"
-      :is-active="activeTab === 'team'"
-      :badge="teamCount > 0 ? teamCount : null"
-      @click="$emit('change-tab', 'team')"
-    />
-    <TabNavigationItem
-      icon="fas fa-file-alt"
-      label="Documents"
-      :is-active="activeTab === 'documents'"
-      :badge="documentsCount > 0 ? documentsCount : null"
-      @click="$emit('change-tab', 'documents')"
-    />
-    <TabNavigationItem
-      icon="fas fa-file-invoice"
-      label="Devis"
-      :is-active="activeTab === 'quote'"
-      @click="$emit('change-tab', 'quote')"
-    />
-    <TabNavigationItem
-      icon="fas fa-history"
-      label="Historique"
-      :is-active="activeTab === 'history'"
-      @click="$emit('change-tab', 'history')"
-    />
-  </ul>
+  <nav class="tab-nav">
+    <button
+      v-for="tab in tabs"
+      :key="tab.id"
+      class="tab-item"
+      :class="{ active: activeTab === tab.id }"
+      @click="$emit('change-tab', tab.id)"
+    >
+      <span class="tab-icon" v-html="tab.icon"></span>
+      <span class="tab-label">{{ tab.label }}</span>
+      <span v-if="tab.id === 'team' && teamCount > 0" class="tab-badge">{{
+        teamCount
+      }}</span>
+      <span
+        v-if="tab.id === 'documents' && documentsCount > 0"
+        class="tab-badge"
+        >{{ documentsCount }}</span
+      >
+    </button>
+  </nav>
 </template>
 
 <script setup>
-import TabNavigationItem from "@/components/atoms/client/TabNavigationItem.vue";
-
-import { defineProps, defineEmits, computed } from "vue";
+import { defineProps, defineEmits } from "vue";
 
 defineProps({
-  activeTab: {
-    type: String,
-    required: true,
-  },
-  teamCount: {
-    type: Number,
-    default: 0,
-  },
-  documentsCount: {
-    type: Number,
-    default: 0,
-  },
+  activeTab: { type: String, required: true },
+  teamCount: { type: Number, default: 0 },
+  documentsCount: { type: Number, default: 0 },
 });
-
 defineEmits(["change-tab"]);
+
+const tabs = [
+  {
+    id: "overview",
+    label: "Vue d'ensemble",
+    icon: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>`,
+  },
+  {
+    id: "details",
+    label: "Détails",
+    icon: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>`,
+  },
+  {
+    id: "team",
+    label: "Équipe",
+    icon: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>`,
+  },
+  {
+    id: "documents",
+    label: "Documents",
+    icon: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>`,
+  },
+  {
+    id: "quote",
+    label: "Devis",
+    icon: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>`,
+  },
+  {
+    id: "history",
+    label: "Historique",
+    icon: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 .49-4.5"/></svg>`,
+  },
+];
 </script>
+
+<style scoped>
+.tab-nav {
+  --brand: #4f46e5;
+  --brand-lt: #eef2ff;
+  --brand-dk: #3730a3;
+  --surface-2: #f8fafc;
+  --border-lt: #f1f5f9;
+  --text-1: #0f172a;
+  --text-2: #64748b;
+  --text-3: #94a3b8;
+  --r-sm: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  font-family: inherit;
+}
+
+.tab-item {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  padding: 8px 11px;
+  border-radius: var(--r-sm);
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  width: 100%;
+  text-align: left;
+  font-size: 13.5px;
+  font-weight: 500;
+  color: var(--text-2);
+  transition: background 0.12s, color 0.12s;
+}
+.tab-item:hover {
+  background: var(--surface-2);
+  color: var(--text-1);
+}
+.tab-item.active {
+  background: var(--brand-lt);
+  color: var(--brand);
+  font-weight: 600;
+}
+
+.tab-icon {
+  flex-shrink: 0;
+  display: flex;
+  color: var(--text-3);
+}
+.tab-item.active .tab-icon {
+  color: var(--brand);
+}
+.tab-label {
+  flex: 1;
+}
+
+.tab-badge {
+  min-width: 19px;
+  height: 19px;
+  padding: 0 5px;
+  border-radius: 10px;
+  background: var(--brand);
+  color: white;
+  font-size: 10.5px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.tab-item.active .tab-badge {
+  background: var(--brand-dk);
+}
+</style>
diff --git a/thanasoft-front/src/components/molecules/intervention/StatusPill.vue b/thanasoft-front/src/components/molecules/intervention/StatusPill.vue
new file mode 100644
index 0000000..a047baf
--- /dev/null
+++ b/thanasoft-front/src/components/molecules/intervention/StatusPill.vue
@@ -0,0 +1,21 @@
+<template>
+  <span class="status-pill" :class="['sp-' + (status?.color || 'secondary'), large ? 'sp-lg' : '']">
+    {{ status?.label || "En attente" }}
+  </span>
+</template>
+
+<script setup>
+
+import { defineProps } from 'vue';
+
+defineProps({
+  status: {
+    type: Object,
+    default: () => ({ label: "En attente", color: "secondary" }),
+  },
+  large: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
diff --git a/thanasoft-front/src/examples/Sidenav/SidenavList.vue b/thanasoft-front/src/examples/Sidenav/SidenavList.vue
index 811b701..69763aa 100644
--- a/thanasoft-front/src/examples/Sidenav/SidenavList.vue
+++ b/thanasoft-front/src/examples/Sidenav/SidenavList.vue
@@ -293,6 +293,12 @@ export default {
               miniIcon: "F",
               text: "Factures",
             },
+            {
+              id: "price-lists",
+              route: { name: "Liste Price Lists" },
+              miniIcon: "P",
+              text: "Listes prix",
+            },
             {
               id: "ventes-stats",
               route: { name: "Statistiques ventes" },
diff --git a/thanasoft-front/src/router/index.js b/thanasoft-front/src/router/index.js
index 5847a63..e46e536 100644
--- a/thanasoft-front/src/router/index.js
+++ b/thanasoft-front/src/router/index.js
@@ -555,6 +555,11 @@ const routes = [
     name: "Invoice Details",
     component: () => import("@/views/pages/Ventes/InvoiceDetail.vue"),
   },
+  {
+    path: "/ventes/listes-prix",
+    name: "Liste Price Lists",
+    component: () => import("@/views/pages/Ventes/PriceLists.vue"),
+  },
   // Avoirs
   {
     path: "/avoirs",
diff --git a/thanasoft-front/src/services/clientGroup.ts b/thanasoft-front/src/services/clientGroup.ts
index 4810f4e..597184e 100644
--- a/thanasoft-front/src/services/clientGroup.ts
+++ b/thanasoft-front/src/services/clientGroup.ts
@@ -1,9 +1,13 @@
 import { request } from "./http";
+import type { Client } from "./client";
 
 export interface ClientGroup {
   id: number;
   name: string;
   description: string | null;
+  clients_count?: number;
+  client_ids?: number[];
+  clients?: Client[];
   created_at: string;
   updated_at: string;
 }
@@ -25,6 +29,7 @@ export interface ClientGroupResponse {
 export interface CreateClientGroupPayload {
   name: string;
   description?: string | null;
+  client_ids?: number[];
 }
 
 export interface UpdateClientGroupPayload
diff --git a/thanasoft-front/src/services/priceList.ts b/thanasoft-front/src/services/priceList.ts
new file mode 100644
index 0000000..34d870d
--- /dev/null
+++ b/thanasoft-front/src/services/priceList.ts
@@ -0,0 +1,78 @@
+import { request } from "./http";
+
+export interface PriceList {
+  id: number;
+  name: string;
+  valid_from: string | null;
+  valid_to: string | null;
+  is_default: boolean;
+}
+
+export interface PriceListListResponse {
+  data: PriceList[];
+}
+
+export interface PriceListResponse {
+  data: PriceList;
+}
+
+export interface CreatePriceListPayload {
+  name: string;
+  valid_from?: string | null;
+  valid_to?: string | null;
+  is_default?: boolean;
+}
+
+export interface UpdatePriceListPayload
+  extends Partial<CreatePriceListPayload> {
+  id: number;
+}
+
+export const PriceListService = {
+  async getAllPriceLists(): Promise<PriceListListResponse> {
+    return await request<PriceListListResponse>({
+      url: "/api/price-lists",
+      method: "get",
+    });
+  },
+
+  async getPriceList(id: number): Promise<PriceListResponse> {
+    return await request<PriceListResponse>({
+      url: `/api/price-lists/${id}`,
+      method: "get",
+    });
+  },
+
+  async createPriceList(
+    payload: CreatePriceListPayload
+  ): Promise<PriceListResponse> {
+    return await request<PriceListResponse>({
+      url: "/api/price-lists",
+      method: "post",
+      data: payload,
+    });
+  },
+
+  async updatePriceList(
+    payload: UpdatePriceListPayload
+  ): Promise<PriceListResponse> {
+    const { id, ...updateData } = payload;
+
+    return await request<PriceListResponse>({
+      url: `/api/price-lists/${id}`,
+      method: "put",
+      data: updateData,
+    });
+  },
+
+  async deletePriceList(
+    id: number
+  ): Promise<{ success?: boolean; message: string }> {
+    return await request<{ success?: boolean; message: string }>({
+      url: `/api/price-lists/${id}`,
+      method: "delete",
+    });
+  },
+};
+
+export default PriceListService;
diff --git a/thanasoft-front/src/services/product.ts b/thanasoft-front/src/services/product.ts
index 75c18ad..107fbde 100644
--- a/thanasoft-front/src/services/product.ts
+++ b/thanasoft-front/src/services/product.ts
@@ -115,6 +115,7 @@ class ProductService {
       url: `/api/products/${id}`,
       method: "get",
     });
+    console.log(response);
     return response;
   }
 
diff --git a/thanasoft-front/src/services/quote.ts b/thanasoft-front/src/services/quote.ts
index a2856b6..1d22718 100644
--- a/thanasoft-front/src/services/quote.ts
+++ b/thanasoft-front/src/services/quote.ts
@@ -1,9 +1,9 @@
-import { request } from "./http";
+import { http, request } from "./http";
 import { Client } from "./client";
 
 export interface Quote {
   id: number;
-  client_id: number;
+  client_id: number | null;
   group_id: number | null;
   reference: string;
   status: "brouillon" | "envoye" | "accepte" | "refuse" | "expire" | "annule";
@@ -50,7 +50,7 @@ export interface QuoteLine {
 }
 
 export interface CreateQuotePayload {
-  client_id: number;
+  client_id: number | null;
   group_id?: number | null;
   status: "brouillon" | "envoye" | "accepte" | "refuse" | "expire" | "annule";
   quote_date: string;
@@ -111,6 +111,17 @@ export const QuoteService = {
     return response;
   },
 
+  async downloadQuotePdf(id: number): Promise<Blob> {
+    const response = await http.get(`/api/quotes/${id}/download-pdf`, {
+      responseType: "blob",
+      headers: {
+        Accept: "application/pdf",
+      },
+    });
+
+    return response.data;
+  },
+
   /**
    * Update an existing quote
    */
diff --git a/thanasoft-front/src/stores/fournisseurStore.ts b/thanasoft-front/src/stores/fournisseurStore.ts
index 68cb53e..a3fab3d 100644
--- a/thanasoft-front/src/stores/fournisseurStore.ts
+++ b/thanasoft-front/src/stores/fournisseurStore.ts
@@ -283,6 +283,7 @@ export const useFournisseurStore = defineStore("fournisseur", () => {
     currentFournisseur,
     loading,
     error,
+    searchResults,
 
     // Getters
     allFournisseurs,
diff --git a/thanasoft-front/src/stores/quoteStore.ts b/thanasoft-front/src/stores/quoteStore.ts
index 4fd5869..697ac8f 100644
--- a/thanasoft-front/src/stores/quoteStore.ts
+++ b/thanasoft-front/src/stores/quoteStore.ts
@@ -133,6 +133,17 @@ export const useQuoteStore = defineStore("quote", () => {
     }
   };
 
+  const downloadQuotePdf = async (id: number) => {
+    try {
+      return await QuoteService.downloadQuotePdf(id);
+    } catch (err: any) {
+      const errorMessage =
+        err.response?.data?.message || err.message || "Failed to download quote PDF";
+      setError(errorMessage);
+      throw err;
+    }
+  };
+
   /**
    * Update an existing quote
    */
@@ -217,6 +228,7 @@ export const useQuoteStore = defineStore("quote", () => {
     fetchQuotes,
     fetchQuote,
     createQuote,
+    downloadQuotePdf,
     updateQuote,
     deleteQuote,
   };
diff --git a/thanasoft-front/src/views/pages/Ventes/PriceLists.vue b/thanasoft-front/src/views/pages/Ventes/PriceLists.vue
new file mode 100644
index 0000000..a6f0e18
--- /dev/null
+++ b/thanasoft-front/src/views/pages/Ventes/PriceLists.vue
@@ -0,0 +1,12 @@
+<template>
+  <div class="container-fluid py-4">
+    <div class="card">
+      <div class="card-body py-5 text-center">
+        <h4 class="mb-3">Listes de prix</h4>
+        <p class="text-muted mb-0">
+          Cette page est prête pour la gestion des listes de prix.
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/thanasoft-front/tsconfig.tsbuildinfo b/thanasoft-front/tsconfig.tsbuildinfo
new file mode 100644
index 0000000..b0db437
--- /dev/null
+++ b/thanasoft-front/tsconfig.tsbuildinfo
@@ -0,0 +1,2030 @@
+{
+  "program": {
+    "fileInfos": {
+      "./node_modules/typescript/lib/lib.es5.d.ts": {
+        "version": "9622e8bd7cc72a7dab819a8011ecbf81d443638082e5cb99ecf2e75ff56ffc9d",
+        "signature": "9622e8bd7cc72a7dab819a8011ecbf81d443638082e5cb99ecf2e75ff56ffc9d",
+        "affectsGlobalScope": true
+      },
+      "./node_modules/typescript/lib/lib.es2015.d.ts": {
+        "version": "dc47c4fa66b9b9890cf076304de2a9c5201e94b740cffdf09f87296d877d71f6",
+        "signature": "dc47c4fa66b9b9890cf076304de2a9c5201e94b740cffdf09f87296d877d71f6",
+        "affectsGlobalScope": false
+      },
+      "./node_modules/typescript/lib/lib.es2016.d.ts": {
+        "version": "7a387c58583dfca701b6c85e0adaf43fb17d590fb16d5b2dc0a2fbd89f35c467",
+        "signature": "7a387c58583dfca701b6c85e0adaf43fb17d590fb16d5b2dc0a2fbd89f35c467",
+        "affectsGlobalScope": false
+      },
+      "./node_modules/typescript/lib/lib.es2017.d.ts": {
+        "version": "8a12173c586e95f4433e0c6dc446bc88346be73ffe9ca6eec7aa63c8f3dca7f9",
+        "signature": "8a12173c586e95f4433e0c6dc446bc88346be73ffe9ca6eec7aa63c8f3dca7f9",
+        "affectsGlobalScope": false
+      },
+      "./node_modules/typescript/lib/lib.es2018.d.ts": {
+        "version": "5f4e733ced4e129482ae2186aae29fde948ab7182844c3a5a51dd346182c7b06",
+        "signature": "5f4e733ced4e129482ae2186aae29fde948ab7182844c3a5a51dd346182c7b06",
+        "affectsGlobalScope": false
+      },
+      "./node_modules/typescript/lib/lib.es2019.d.ts": {
+        "version": "e6b724280c694a9f588847f754198fb96c43d805f065c3a5b28bbc9594541c84",
+        "signature": "e6b724280c694a9f588847f754198fb96c43d805f065c3a5b28bbc9594541c84",
+        "affectsGlobalScope": false
+      },
+      "./node_modules/typescript/lib/lib.es2020.d.ts": {
+        "version": "e21c071ca3e1b4a815d5f04a7475adcaeea5d64367e840dd0154096d705c3940",
+        "signature": "e21c071ca3e1b4a815d5f04a7475adcaeea5d64367e840dd0154096d705c3940",
+        "affectsGlobalScope": false
+      },
+      "./node_modules/typescript/lib/lib.esnext.d.ts": {
+        "version": "fc7a21dd3ee27fd0a9ff1c46534efcd9c3cec51a445b479bb326d871c0aa8302",
+        "signature": "fc7a21dd3ee27fd0a9ff1c46534efcd9c3cec51a445b479bb326d871c0aa8302",
+        "affectsGlobalScope": false
+      },
+      "./node_modules/typescript/lib/lib.dom.d.ts": {
+        "version": "abadddbf660adeec27e9a56584907d52fa1d6e1e1dc49f639a921baa951b7a84",
+        "signature": "abadddbf660adeec27e9a56584907d52fa1d6e1e1dc49f639a921baa951b7a84",
+        "affectsGlobalScope": true
+      },
+      "./node_modules/typescript/lib/lib.dom.iterable.d.ts": {
+        "version": "d42f4141bd9ce82b4e2902f26acb00c183e321be19a38bbc0e76a922c1724c94",
+        "signature": "d42f4141bd9ce82b4e2902f26acb00c183e321be19a38bbc0e76a922c1724c94",
+        "affectsGlobalScope": true
+      },
+      "./node_modules/typescript/lib/lib.scripthost.d.ts": {
+        "version": "097a57355ded99c68e6df1b738990448e0bf170e606707df5a7c0481ff2427cd",
+        "signature": "097a57355ded99c68e6df1b738990448e0bf170e606707df5a7c0481ff2427cd",
+        "affectsGlobalScope": true
+      },
+      "./node_modules/typescript/lib/lib.es2015.core.d.ts": {
+        "version": "46ee15e9fefa913333b61eaf6b18885900b139867d89832a515059b62cf16a17",
+        "signature": "46ee15e9fefa913333b61eaf6b18885900b139867d89832a515059b62cf16a17",
+        "affectsGlobalScope": true
+      },
+      "./node_modules/typescript/lib/lib.es2015.collection.d.ts": {
+        "version": "43fb1d932e4966a39a41b464a12a81899d9ae5f2c829063f5571b6b87e6d2f9c",
+        "signature": "43fb1d932e4966a39a41b464a12a81899d9ae5f2c829063f5571b6b87e6d2f9c",
+        "affectsGlobalScope": true
+      },
+      "./node_modules/typescript/lib/lib.es2015.generator.d.ts": {
+        "version": "cdccba9a388c2ee3fd6ad4018c640a471a6c060e96f1232062223063b0a5ac6a",
+        "signature": "cdccba9a388c2ee3fd6ad4018c640a471a6c060e96f1232062223063b0a5ac6a",
+        "affectsGlobalScope": true
+      },
+      "./node_modules/typescript/lib/lib.es2015.iterable.d.ts": {
+        "version": "8b2a5df1ce95f78f6b74f1a555ccdb6baab0486b42d8345e0871dd82811f9b9a",
+        "signature": "8b2a5df1ce95f78f6b74f1a555ccdb6baab0486b42d8345e0871dd82811f9b9a",
+        "affectsGlobalScope": true
+      },
+      "./node_modules/typescript/lib/lib.es2015.promise.d.ts": {
+        "version": "2bb4b3927299434052b37851a47bf5c39764f2ba88a888a107b32262e9292b7c",
+        "signature": "2bb4b3927299434052b37851a47bf5c39764f2ba88a888a107b32262e9292b7c",
+        "affectsGlobalScope": true
+      },
+      "./node_modules/typescript/lib/lib.es2015.proxy.d.ts": {
+        "version": "7207e317a2cb07a177e7d963ab7b8c0e85dde7f9ddb50351f830239bf597569e",
+        "signature": "7207e317a2cb07a177e7d963ab7b8c0e85dde7f9ddb50351f830239bf597569e",
+        "affectsGlobalScope": true
+      },
+      "./node_modules/typescript/lib/lib.es2015.reflect.d.ts": {
+        "version": "cb609802a8698aa28b9c56331d4b53f590ca3c1c3a255350304ae3d06017779d",
+        "signature": "cb609802a8698aa28b9c56331d4b53f590ca3c1c3a255350304ae3d06017779d",
+        "affectsGlobalScope": true
+      },
+      "./node_modules/typescript/lib/lib.es2015.symbol.d.ts": {
+        "version": "3013574108c36fd3aaca79764002b3717da09725a36a6fc02eac386593110f93",
+        "signature": "3013574108c36fd3aaca79764002b3717da09725a36a6fc02eac386593110f93",
+        "affectsGlobalScope": true
+      },
+      "./node_modules/typescript/lib/lib.es2015.symbol.wellknown.d.ts": {
+        "version": "9d122b7e8c1a5c72506eea50c0973cba55b92b5532d5cafa8a6ce2c547d57551",
+        "signature": "9d122b7e8c1a5c72506eea50c0973cba55b92b5532d5cafa8a6ce2c547d57551",
+        "affectsGlobalScope": true
+      },
+      "./node_modules/typescript/lib/lib.es2016.array.include.d.ts": {
+        "version": "3be5a1453daa63e031d266bf342f3943603873d890ab8b9ada95e22389389006",
+        "signature": "3be5a1453daa63e031d266bf342f3943603873d890ab8b9ada95e22389389006",
+        "affectsGlobalScope": true
+      },
+      "./node_modules/typescript/lib/lib.es2017.object.d.ts": {
+        "version": "17bb1fc99591b00515502d264fa55dc8370c45c5298f4a5c2083557dccba5a2a",
+        "signature": "17bb1fc99591b00515502d264fa55dc8370c45c5298f4a5c2083557dccba5a2a",
+        "affectsGlobalScope": true
+      },
+      "./node_modules/typescript/lib/lib.es2017.sharedmemory.d.ts": {
+        "version": "7ce9f0bde3307ca1f944119f6365f2d776d281a393b576a18a2f2893a2d75c98",
+        "signature": "7ce9f0bde3307ca1f944119f6365f2d776d281a393b576a18a2f2893a2d75c98",
+        "affectsGlobalScope": true
+      },
+      "./node_modules/typescript/lib/lib.es2017.string.d.ts": {
+        "version": "6a6b173e739a6a99629a8594bfb294cc7329bfb7b227f12e1f7c11bc163b8577",
+        "signature": "6a6b173e739a6a99629a8594bfb294cc7329bfb7b227f12e1f7c11bc163b8577",
+        "affectsGlobalScope": true
+      },
+      "./node_modules/typescript/lib/lib.es2017.intl.d.ts": {
+        "version": "12a310447c5d23c7d0d5ca2af606e3bd08afda69100166730ab92c62999ebb9d",
+        "signature": "12a310447c5d23c7d0d5ca2af606e3bd08afda69100166730ab92c62999ebb9d",
+        "affectsGlobalScope": true
+      },
+      "./node_modules/typescript/lib/lib.es2017.typedarrays.d.ts": {
+        "version": "b0124885ef82641903d232172577f2ceb5d3e60aed4da1153bab4221e1f6dd4e",
+        "signature": "b0124885ef82641903d232172577f2ceb5d3e60aed4da1153bab4221e1f6dd4e",
+        "affectsGlobalScope": true
+      },
+      "./node_modules/typescript/lib/lib.es2018.asyncgenerator.d.ts": {
+        "version": "0eb85d6c590b0d577919a79e0084fa1744c1beba6fd0d4e951432fa1ede5510a",
+        "signature": "0eb85d6c590b0d577919a79e0084fa1744c1beba6fd0d4e951432fa1ede5510a",
+        "affectsGlobalScope": true
+      },
+      "./node_modules/typescript/lib/lib.es2018.asynciterable.d.ts": {
+        "version": "a40c4d82bf13fcded295ac29f354eb7d40249613c15e07b53f2fc75e45e16359",
+        "signature": "a40c4d82bf13fcded295ac29f354eb7d40249613c15e07b53f2fc75e45e16359",
+        "affectsGlobalScope": true
+      },
+      "./node_modules/typescript/lib/lib.es2018.intl.d.ts": {
+        "version": "df9c8a72ca8b0ed62f5470b41208a0587f0f73f0a7db28e5a1272cf92537518e",
+        "signature": "df9c8a72ca8b0ed62f5470b41208a0587f0f73f0a7db28e5a1272cf92537518e",
+        "affectsGlobalScope": true
+      },
+      "./node_modules/typescript/lib/lib.es2018.promise.d.ts": {
+        "version": "bb2d3fb05a1d2ffbca947cc7cbc95d23e1d053d6595391bd325deb265a18d36c",
+        "signature": "bb2d3fb05a1d2ffbca947cc7cbc95d23e1d053d6595391bd325deb265a18d36c",
+        "affectsGlobalScope": true
+      },
+      "./node_modules/typescript/lib/lib.es2018.regexp.d.ts": {
+        "version": "c80df75850fea5caa2afe43b9949338ce4e2de086f91713e9af1a06f973872b8",
+        "signature": "c80df75850fea5caa2afe43b9949338ce4e2de086f91713e9af1a06f973872b8",
+        "affectsGlobalScope": true
+      },
+      "./node_modules/typescript/lib/lib.es2019.array.d.ts": {
+        "version": "9d57b2b5d15838ed094aa9ff1299eecef40b190722eb619bac4616657a05f951",
+        "signature": "9d57b2b5d15838ed094aa9ff1299eecef40b190722eb619bac4616657a05f951",
+        "affectsGlobalScope": true
+      },
+      "./node_modules/typescript/lib/lib.es2019.object.d.ts": {
+        "version": "6c51b5dd26a2c31dbf37f00cfc32b2aa6a92e19c995aefb5b97a3a64f1ac99de",
+        "signature": "6c51b5dd26a2c31dbf37f00cfc32b2aa6a92e19c995aefb5b97a3a64f1ac99de",
+        "affectsGlobalScope": true
+      },
+      "./node_modules/typescript/lib/lib.es2019.string.d.ts": {
+        "version": "93544ca2f26a48716c1b6c5091842cad63129daac422dfa4bc52460465f22bb1",
+        "signature": "93544ca2f26a48716c1b6c5091842cad63129daac422dfa4bc52460465f22bb1",
+        "affectsGlobalScope": true
+      },
+      "./node_modules/typescript/lib/lib.es2019.symbol.d.ts": {
+        "version": "2ad234885a4240522efccd77de6c7d99eecf9b4de0914adb9a35c0c22433f993",
+        "signature": "2ad234885a4240522efccd77de6c7d99eecf9b4de0914adb9a35c0c22433f993",
+        "affectsGlobalScope": true
+      },
+      "./node_modules/typescript/lib/lib.es2020.bigint.d.ts": {
+        "version": "7b5a10e3c897fabece5a51aa85b4111727d7adb53c2734b5d37230ff96802a09",
+        "signature": "7b5a10e3c897fabece5a51aa85b4111727d7adb53c2734b5d37230ff96802a09",
+        "affectsGlobalScope": true
+      },
+      "./node_modules/typescript/lib/lib.es2020.promise.d.ts": {
+        "version": "7435b75fdf3509622e79622dbe5091cf4b09688410ee2034e4fc17d0c99d0862",
+        "signature": "7435b75fdf3509622e79622dbe5091cf4b09688410ee2034e4fc17d0c99d0862",
+        "affectsGlobalScope": true
+      },
+      "./node_modules/typescript/lib/lib.es2020.sharedmemory.d.ts": {
+        "version": "e7e8e1d368290e9295ef18ca23f405cf40d5456fa9f20db6373a61ca45f75f40",
+        "signature": "e7e8e1d368290e9295ef18ca23f405cf40d5456fa9f20db6373a61ca45f75f40",
+        "affectsGlobalScope": true
+      },
+      "./node_modules/typescript/lib/lib.es2020.string.d.ts": {
+        "version": "faf0221ae0465363c842ce6aa8a0cbda5d9296940a8e26c86e04cc4081eea21e",
+        "signature": "faf0221ae0465363c842ce6aa8a0cbda5d9296940a8e26c86e04cc4081eea21e",
+        "affectsGlobalScope": true
+      },
+      "./node_modules/typescript/lib/lib.es2020.symbol.wellknown.d.ts": {
+        "version": "936d7d2e8851af9ccfa5333b15e877a824417d352b1d7fd06388639dc69ef80a",
+        "signature": "936d7d2e8851af9ccfa5333b15e877a824417d352b1d7fd06388639dc69ef80a",
+        "affectsGlobalScope": true
+      },
+      "./node_modules/typescript/lib/lib.es2020.intl.d.ts": {
+        "version": "31e8df2398e328077079c17ea4f1664bad0a34adf8b0608837e504e310e329a1",
+        "signature": "31e8df2398e328077079c17ea4f1664bad0a34adf8b0608837e504e310e329a1",
+        "affectsGlobalScope": true
+      },
+      "./node_modules/typescript/lib/lib.esnext.intl.d.ts": {
+        "version": "89bf2b7a601b73ea4311eda9c41f86a58994fec1bee3b87c4a14d68d9adcdcbd",
+        "signature": "89bf2b7a601b73ea4311eda9c41f86a58994fec1bee3b87c4a14d68d9adcdcbd",
+        "affectsGlobalScope": true
+      },
+      "./node_modules/typescript/lib/lib.esnext.string.d.ts": {
+        "version": "fb4416144c1bf0323ccbc9afb0ab289c07312214e8820ad17d709498c865a3fe",
+        "signature": "fb4416144c1bf0323ccbc9afb0ab289c07312214e8820ad17d709498c865a3fe",
+        "affectsGlobalScope": true
+      },
+      "./node_modules/typescript/lib/lib.esnext.promise.d.ts": {
+        "version": "cd6efb9467a8b6338ece2e2855e37765700f2cd061ca54b01b33878cf5c7677e",
+        "signature": "cd6efb9467a8b6338ece2e2855e37765700f2cd061ca54b01b33878cf5c7677e",
+        "affectsGlobalScope": true
+      },
+      "./node_modules/typescript/lib/lib.esnext.weakref.d.ts": {
+        "version": "1e61418f41d404e744b6536af9f8c6f6674dd4d54c12335cd0c4f7eded69cf3f",
+        "signature": "1e61418f41d404e744b6536af9f8c6f6674dd4d54c12335cd0c4f7eded69cf3f",
+        "affectsGlobalScope": true
+      },
+      "./node_modules/tslib/tslib.d.ts": {
+        "version": "a6a5253138c5432c68a1510c70fe78a644fe2e632111ba778e1978010d6edfec",
+        "signature": "a6a5253138c5432c68a1510c70fe78a644fe2e632111ba778e1978010d6edfec",
+        "affectsGlobalScope": false
+      },
+      "./node_modules/@vue/compiler-core/node_modules/@vue/shared/dist/shared.d.ts": {
+        "version": "a7b4ed8d470c811aa218676141a473f0934c1bef0367f9e24277f657eb6c1f7b",
+        "signature": "a7b4ed8d470c811aa218676141a473f0934c1bef0367f9e24277f657eb6c1f7b",
+        "affectsGlobalScope": false
+      },
+      "./node_modules/@babel/types/lib/index.d.ts": {
+        "version": "a28ac3e717907284b3910b8e9b3f9844a4e0b0a861bea7b923e5adf90f620330",
+        "signature": "a28ac3e717907284b3910b8e9b3f9844a4e0b0a861bea7b923e5adf90f620330",
+        "affectsGlobalScope": false
+      },
+      "./node_modules/@babel/parser/typings/babel-parser.d.ts": {
+        "version": "82e5a50e17833a10eb091923b7e429dc846d42f1c6161eb6beeb964288d98a15",
+        "signature": "82e5a50e17833a10eb091923b7e429dc846d42f1c6161eb6beeb964288d98a15",
+        "affectsGlobalScope": false
+      },
+      "./node_modules/source-map/source-map.d.ts": {
+        "version": "2887592574fcdfd087647c539dcb0fbe5af2521270dad4a37f9d17c16190d579",
+        "signature": "2887592574fcdfd087647c539dcb0fbe5af2521270dad4a37f9d17c16190d579",
+        "affectsGlobalScope": false
+      },
+      "./node_modules/@vue/compiler-core/dist/compiler-core.d.ts": {
+        "version": "ddcd20a851d86422b7a10afc97688329fdccb9c9ae893efbc1cfaeaaa773ff85",
+        "signature": "ddcd20a851d86422b7a10afc97688329fdccb9c9ae893efbc1cfaeaaa773ff85",
+        "affectsGlobalScope": false
+      },
+      "./node_modules/@vue/compiler-dom/dist/compiler-dom.d.ts": {
+        "version": "2faf30b4ec7f4a4b3448fd31a4581b98228f87932db8f381df82cab15deb7582",
+        "signature": "2faf30b4ec7f4a4b3448fd31a4581b98228f87932db8f381df82cab15deb7582",
+        "affectsGlobalScope": false
+      },
+      "./node_modules/@vue/runtime-core/node_modules/@vue/shared/dist/shared.d.ts": {
+        "version": "a7b4ed8d470c811aa218676141a473f0934c1bef0367f9e24277f657eb6c1f7b",
+        "signature": "a7b4ed8d470c811aa218676141a473f0934c1bef0367f9e24277f657eb6c1f7b",
+        "affectsGlobalScope": false
+      },
+      "./node_modules/@vue/reactivity/dist/reactivity.d.ts": {
+        "version": "37c27e9d5951f5af15d1e3b945fbfd9323a21ebe83a63102ba227d186244aca2",
+        "signature": "37c27e9d5951f5af15d1e3b945fbfd9323a21ebe83a63102ba227d186244aca2",
+        "affectsGlobalScope": false
+      },
+      "./node_modules/@vue/runtime-core/dist/runtime-core.d.ts": {
+        "version": "6338d135058c42fa2baa2556722d62cfa8053210345f389f3d51b323cf3531d4",
+        "signature": "6338d135058c42fa2baa2556722d62cfa8053210345f389f3d51b323cf3531d4",
+        "affectsGlobalScope": true
+      },
+      "./node_modules/csstype/index.d.ts": {
+        "version": "c609b66caa6f5b80a9166ce7505730b398ae7c0eddc0c1feed28a17814cf8609",
+        "signature": "c609b66caa6f5b80a9166ce7505730b398ae7c0eddc0c1feed28a17814cf8609",
+        "affectsGlobalScope": false
+      },
+      "./node_modules/@vue/runtime-dom/dist/runtime-dom.d.ts": {
+        "version": "a97a5ebb4bb382d6c638877df0dd84726caf6d57efd5dc1651581c5bc63dcdab",
+        "signature": "a97a5ebb4bb382d6c638877df0dd84726caf6d57efd5dc1651581c5bc63dcdab",
+        "affectsGlobalScope": true
+      },
+      "./node_modules/vue/dist/vue.d.ts": {
+        "version": "f79e452d452ab10eac3f96b3b3930cf78ec6c9037c4cd9a062dae61744f634fc",
+        "signature": "f79e452d452ab10eac3f96b3b3930cf78ec6c9037c4cd9a062dae61744f634fc",
+        "affectsGlobalScope": false
+      },
+      "./node_modules/vuex/types/vue.d.ts": {
+        "version": "937646ec622c4d2173c5e952c54279c86822512017ee7450cbd2b73880aa23d3",
+        "signature": "937646ec622c4d2173c5e952c54279c86822512017ee7450cbd2b73880aa23d3",
+        "affectsGlobalScope": false
+      },
+      "./node_modules/vuex/types/helpers.d.ts": {
+        "version": "326f97f48d4e3ded9a4d4a19e60f6e065934b118ba7a9d4ab0b9ac264f19e623",
+        "signature": "326f97f48d4e3ded9a4d4a19e60f6e065934b118ba7a9d4ab0b9ac264f19e623",
+        "affectsGlobalScope": false
+      },
+      "./node_modules/vuex/types/logger.d.ts": {
+        "version": "0e2d714161d7ffe109f059002ce9daa14ae70f2f58a103bb60598d591d2f2675",
+        "signature": "0e2d714161d7ffe109f059002ce9daa14ae70f2f58a103bb60598d591d2f2675",
+        "affectsGlobalScope": false
+      },
+      "./node_modules/vuex/types/index.d.ts": {
+        "version": "a3e08128b5e74ad398818230f379c86636982e730ea0a0a0859628b36eec31b5",
+        "signature": "a3e08128b5e74ad398818230f379c86636982e730ea0a0a0859628b36eec31b5",
+        "affectsGlobalScope": false
+      },
+      "./src/store/index.js": {
+        "version": "fc2adf2743e698651fecf7591782b82645d949a215d514724a4dfb7848b6801f",
+        "signature": "47fc8f9978c05d8dee12e2557334cd376c97ba135550dd0035da17f060daa80f",
+        "affectsGlobalScope": false
+      },
+      "./node_modules/vue-router/dist/vue-router.d.ts": {
+        "version": "8b7ad38e5eeceb237c60554fafb30e6c3c46d29cc2abea288584d7be29b6c844",
+        "signature": "8b7ad38e5eeceb237c60554fafb30e6c3c46d29cc2abea288584d7be29b6c844",
+        "affectsGlobalScope": false
+      },
+      "./node_modules/vue-demi/lib/index.d.ts": {
+        "version": "52f5c39e78a90c1d8ed7db18f39d890b2e8464a3f44d4233617893f6648e317d",
+        "signature": "52f5c39e78a90c1d8ed7db18f39d890b2e8464a3f44d4233617893f6648e317d",
+        "affectsGlobalScope": false
+      },
+      "./node_modules/pinia/dist/pinia.d.ts": {
+        "version": "621eff1c0542f82085920f524c8277268f3cb10315ee5dc6db22aeb0b7a73873",
+        "signature": "621eff1c0542f82085920f524c8277268f3cb10315ee5dc6db22aeb0b7a73873",
+        "affectsGlobalScope": false
+      },
+      "./node_modules/axios/index.d.ts": {
+        "version": "7584239b853f690c6629ae8bb683ded6ff33104e7835778bbca5ee1b1d9a0a91",
+        "signature": "7584239b853f690c6629ae8bb683ded6ff33104e7835778bbca5ee1b1d9a0a91",
+        "affectsGlobalScope": false
+      },
+      "./src/services/http.ts": {
+        "version": "82020a7d1956a527aaea9f471a8df2e2d2112ab4c0e1a7dc714af72f66211894",
+        "signature": "6eecbff88a2552c7a26356a9f1795ce185bbb1e83d6323ffac799aecd22fb783",
+        "affectsGlobalScope": false
+      },
+      "./src/services/auth.ts": {
+        "version": "16ebba3a31a188cd83e24cbf6f51059b11e9bae45b70d74cb846ef98b180bc83",
+        "signature": "28ae1b4b650b0b5a33be34a437b12709e6720f5b793cfe4989c6de4d9712f1be",
+        "affectsGlobalScope": false
+      },
+      "./src/stores/auth.ts": {
+        "version": "54a7256147ecea348010e7838bd11cfad8bbe0e1088ff33157270cf49b83d2df",
+        "signature": "e372e4cc9e9ec057aec7bf27009c69b9a61f7496adb6982537fcefe8878c29cf",
+        "affectsGlobalScope": false
+      },
+      "./src/plugins/pinia.ts": {
+        "version": "c11e6b0c0db3759deaa124ba80bc07c0a82f79160e7c2560dca39c49753d073b",
+        "signature": "e061ad3c58d1e4565f0b0715ce733d93c5b6b4d48fec68a7618a773fcf746b0e",
+        "affectsGlobalScope": false
+      },
+      "./src/router/index.js": {
+        "version": "612624a0ca4d878e2bc7e084491fe680356783984985f153151c257874b90514",
+        "signature": "f980343aaf9e0c35cb78e74dfbe07d405cd20358e009e160b1b3cecee925dc19",
+        "affectsGlobalScope": false
+      },
+      "./node_modules/sweetalert2/sweetalert2.d.ts": {
+        "version": "9d8d4ad340d39d79356896d36b6d9f26d3e43eae18b5726c54e3c0947a0dffe1",
+        "signature": "9d8d4ad340d39d79356896d36b6d9f26d3e43eae18b5726c54e3c0947a0dffe1",
+        "affectsGlobalScope": true
+      },
+      "./node_modules/vue-sweetalert2/dist/index.d.ts": {
+        "version": "6854f883ef4ab1bb4c2bc73bcccd0157fb3b97663bd155bc54a0efdd409180cf",
+        "signature": "6854f883ef4ab1bb4c2bc73bcccd0157fb3b97663bd155bc54a0efdd409180cf",
+        "affectsGlobalScope": false
+      },
+      "./src/assets/js/nav-pills.js": {
+        "version": "96c18b6c2898e8403fa8c266016016724d6105011248f1666c898304aa2e314d",
+        "signature": "11d650245617d8b28677c350f503193cc8e342083c9b5f195c82c078d47f307b",
+        "affectsGlobalScope": false
+      },
+      "./src/soft-ui-dashboard.js": {
+        "version": "19ebc113ae5d77857513c9faba6abaa13adc0d5d5b9180502780ff817ba2db95",
+        "signature": "f15d4fbd88c30d58b411aa609259fa2cc3e79817a5e80529d65bc3051c30bc66",
+        "affectsGlobalScope": false
+      },
+      "./src/main.ts": {
+        "version": "046f7cbcb741d3247810e23695e3978476c1079c759a388a5131a9fc85226aff",
+        "signature": "015a9d52ff2f4c8b768a89ab022a21afca3722566cefda49355f189e816f47a6",
+        "affectsGlobalScope": false
+      },
+      "./src/shims-vue.d.ts": {
+        "version": "e3b9cdf002a0fe66d014385777304c678b94e6f154da5f2d6b7a22d206f72c9f",
+        "signature": "e3b9cdf002a0fe66d014385777304c678b94e6f154da5f2d6b7a22d206f72c9f",
+        "affectsGlobalScope": false
+      },
+      "./src/stores/notification.ts": {
+        "version": "1332c677d8f702e2dcf3a569ecb80b9878032262456006c1d8b0e5926817aa20",
+        "signature": "5366358a891413a0d2390d63963c51a56163be7a9517866d17029279e74eadae",
+        "affectsGlobalScope": false
+      },
+      "./src/composables/useNotification.ts": {
+        "version": "3b3f6d74d6792d9f1c9524657dcb7f4a794dd860ec7defaf4c434afa6ad11aff",
+        "signature": "24d68329da82fef1909076bbfe53f0bb14c7126f729d54bcdc3d570b26dc1832",
+        "affectsGlobalScope": false
+      },
+      "./src/services/avoir.ts": {
+        "version": "585e3fac9e50b785c0bf1d451e8e19174798ba4eb5990a034abbf4e3810da057",
+        "signature": "5565f49298082628bd8bcee25dcaf62524949a6a6c639df79e65aa2663395fb7",
+        "affectsGlobalScope": false
+      },
+      "./src/services/categories_client.ts": {
+        "version": "1a86403e0812dcf479698d9d5864ef920be8e381cde10533bf9105c732b0d865",
+        "signature": "17d81d505cc723620a9349d1d62e0335844695a480cf24a364a801aadcaed829",
+        "affectsGlobalScope": false
+      },
+      "./src/services/client-timeline.ts": {
+        "version": "c73f003d5f00e69a741f823efa7c678f4d3b7892672d4f33b7b23a9219b182f6",
+        "signature": "7ff88d484ce8050d3a8b02ffa54a5d64d0a1321dbc645f4154a047c14ef93ce4",
+        "affectsGlobalScope": false
+      },
+      "./src/services/client.ts": {
+        "version": "2c4dd54c36b4e6a75fb41657ab583a035ae253b21b16d0f2c12a3e7ac880ea5c",
+        "signature": "3c718866623387fa261099e7b53a5b61f9d59c67a9e051ec4cf4134045070e04",
+        "affectsGlobalScope": false
+      },
+      "./src/services/clientGroup.ts": {
+        "version": "e6c62c52d39febd43cd5d137ed9f862b9adc85a2358b48e09d0e99a4dc33d8de",
+        "signature": "88340a57ee1a072f3cf02f7fb8396554aea2ae55dbe52dbd488aa80945710626",
+        "affectsGlobalScope": false
+      },
+      "./src/services/client_location.ts": {
+        "version": "70900e3456442dff77aae874a3f297384bf7f9a2556c5d8c67fafe52e51078ed",
+        "signature": "fd02e044e952a10797b42b63afb35597a04918c35223f08fc661487176457317",
+        "affectsGlobalScope": false
+      },
+      "./src/services/contact.ts": {
+        "version": "032a414058331e64e7c37bc4ea9668972920cd08bc82fdeab3e67182eeeb703a",
+        "signature": "a828807b940e0d4c17f282b9be7ead88224138c2b89b3291e77d33f4c4c1d330",
+        "affectsGlobalScope": false
+      },
+      "./src/services/deceased.ts": {
+        "version": "9ce047c21d43e37341649599b20ca91f0db5fc0897f1a7f7753b7300fabe01b2",
+        "signature": "e37f0cdd38cd139eb4a87867fd394b13e42e60a91115debb7492f0c709de43cf",
+        "affectsGlobalScope": false
+      },
+      "./src/services/documentAttachment.ts": {
+        "version": "52d009b4d46aab1c5f7d8963e356aa7259bf325a54ccb13df0f500535dec55b0",
+        "signature": "253d8159e4500f78cab7287fb16e9b5f964ca19be02a4500a409713352be4193",
+        "affectsGlobalScope": false
+      },
+      "./src/services/employee.ts": {
+        "version": "4f17ff95c56e77592e539121d1ae7da2acecb5f2bb19e2cdae453190e08f163a",
+        "signature": "fec2accc984083793b74bbd8a19ff8450a3408ebb2233ae639757320a8555174",
+        "affectsGlobalScope": false
+      },
+      "./src/services/file.ts": {
+        "version": "e4687b8d15b3cb2290e46a5cab7640a129fb54bfb7a2f59e19ba05e6ae7fdb52",
+        "signature": "ab2b451ad492a8a056ad6f06a238de05a2a9f83be80d731a5695c17f2b9f63f8",
+        "affectsGlobalScope": false
+      },
+      "./src/services/fournisseur.ts": {
+        "version": "f764abfc29d71f7d8d283472c6ae616c7c6102a436ce9d9cd5a7e9ba57e6b47b",
+        "signature": "fefcdc166b796f9d863f087bbd8a2b945c20eba0ab5606f1816082a45478de57",
+        "affectsGlobalScope": false
+      },
+      "./src/services/goodsReceipt.ts": {
+        "version": "e590698e7fa1c2c28be8db20171909377269264ec8c327d4088332ec4642faa5",
+        "signature": "b91dd4770c4308ec3527feb48e20c2a238514619b117691b432359af7544267f",
+        "affectsGlobalScope": false
+      },
+      "./src/services/index.ts": {
+        "version": "231d0634fa0b1859a70d6ff587182b73f667a8b213c495eb92be1a143946a4bb",
+        "signature": "231d0634fa0b1859a70d6ff587182b73f667a8b213c495eb92be1a143946a4bb",
+        "affectsGlobalScope": false
+      },
+      "./src/services/intervention.ts": {
+        "version": "d6a66bb14f6ac299cf4aa65c570a814b196c8d631b1863fc2056e6cfbd04febe",
+        "signature": "6579765cbc878cc52c1b1949bb65837f115c3c3bcede1b1954a2fad451d98719",
+        "affectsGlobalScope": false
+      },
+      "./src/services/invoice.ts": {
+        "version": "80e3771c11bc5a9285a945e823ae6cf3e91d10d6e84026bcebc4c0461d66a4f1",
+        "signature": "803ff09fa250ab40dd95a25dba1f86f3f09a1f4314e0b0c675bd6c046fa859b7",
+        "affectsGlobalScope": false
+      },
+      "./src/services/priceList.ts": {
+        "version": "0a100a25c50897e82f848bc06756fb8eda4f743827f0e95ce380acffa868fcd5",
+        "signature": "067c416ff889ac79e22d610a93f2772ddd402d652adf7358d50ea92379c9909a",
+        "affectsGlobalScope": false
+      },
+      "./src/services/product.ts": {
+        "version": "f600b24d966f159e301281f0eda3e69115647fb9bb98e26d36ca18ac8514887c",
+        "signature": "2f11b0eb7ffb0adefacac824fb310abfb855af337a8721973cf9f7081d37eb67",
+        "affectsGlobalScope": false
+      },
+      "./src/services/productCategorie.ts": {
+        "version": "3952d83d342ae2471805f6f6a04d4a7dac91000292e1cb343493ac3db601d3db",
+        "signature": "5f579c64539cc3d182ffcddcbefd803ace28719492a7fd0fac05016fef7e2a75",
+        "affectsGlobalScope": false
+      },
+      "./src/services/productCategory.ts": {
+        "version": "e7de05a0a0b7bd4cb2e498a817650b977ea3dbcd7e2c0b63882e2a2794d1ddf1",
+        "signature": "0900cf5ce5c2bf46aac89880bccf320dc0c510b326aa41f35e99d3a78ce63984",
+        "affectsGlobalScope": false
+      },
+      "./src/services/productPackaging.ts": {
+        "version": "6a8eb63f889d7d5110fbd1060c41e41b116f6c3f705c9558c46aa8c503aabb00",
+        "signature": "405b2b00c3a859cfd4fa44bc6b009a879c7327dedcdbb8a7aa8680bf748f37b9",
+        "affectsGlobalScope": false
+      },
+      "./src/services/purchaseOrder.ts": {
+        "version": "71137c40648cef82fe895f17021c1d7dd1143a1e8323f3ab4b91e716a4940788",
+        "signature": "88257b8084150c470422f00ea276de09fc27d9275285ffef7d4fea90ce6c6130",
+        "affectsGlobalScope": false
+      },
+      "./src/services/quote.ts": {
+        "version": "ecfb36f466599111bf8a08e968941cbfd8951981f0e5e00588768dab0eda873d",
+        "signature": "bf43e10bf2524ed9f3cb91937bf42c09af89d6333a09bd139e398192cece29ff",
+        "affectsGlobalScope": false
+      },
+      "./src/services/receipt.ts": {
+        "version": "a64ba75809829e81a672090772fc5275ce5e4c2594d32ef694a2df0d612e4b01",
+        "signature": "9a2847ed26eb490c1fb82c5ab2cdd79a9079ef8e198e3e13cb0f330026aa3503",
+        "affectsGlobalScope": false
+      },
+      "./src/services/stock.ts": {
+        "version": "e7d587ab0093d54e17b0317dda971df96de8d75590502d5d3536b586c77ee92c",
+        "signature": "8bcb7369518ebb1539aaea37af0874fde954188164a4cae4a0db6f3a88c48a85",
+        "affectsGlobalScope": false
+      },
+      "./src/services/supplierInvoice.ts": {
+        "version": "15f2d6443ef721db3aba9c0210dccc2d129e011398b0643d40d03e87454ef496",
+        "signature": "37f21c4cd84b0e72166c863cfb03a4feee36078967b79f5fb019637df829811a",
+        "affectsGlobalScope": false
+      },
+      "./src/services/thanatopractitioner.ts": {
+        "version": "f2772199cb03af4ba865f2332f995383d64bfd3655b5d8250dbe019837d48d2d",
+        "signature": "f949d3f887b1d32570c694bdc078dda8e8f1bcf7df0abec39ab41f9d522ab606",
+        "affectsGlobalScope": false
+      },
+      "./src/services/tvaRate.ts": {
+        "version": "571b69bf307166a8c5885fc9c00687c8158a57cef894c4b98bd0d382a5dfe0a2",
+        "signature": "e21d680d6f67c6ea626a7c5b4cf2261ac7c4aad308edb8b97b67b158a3f721b9",
+        "affectsGlobalScope": false
+      },
+      "./src/services/warehouse.ts": {
+        "version": "937e7069ca212188f8754cf7ae1c6d136ca78a758b1a106e12d25892ef2325bb",
+        "signature": "e3d801bce51f50e67b236f77f0f227d6b157a4b551655bfb92f70239547c85b6",
+        "affectsGlobalScope": false
+      },
+      "./src/stores/avoirStore.ts": {
+        "version": "1c38b0dfbd140c8a59d59314b79f0e454beeccccc38ebbd74b70c45c18c5c8e8",
+        "signature": "bf9da3d902146c824a0df23e19dcbb531825f6fc47aebd4a2101344d7ba07dc7",
+        "affectsGlobalScope": false
+      },
+      "./src/stores/clientCategorie.store.ts": {
+        "version": "0f0c730df720810aa34176f52fdb453c9b5c69412ed0de31869d9ba3ed372e19",
+        "signature": "452766b43f83b56e38db0f5681a933aa5480518aa49fd024d1a5474bb9023bc2",
+        "affectsGlobalScope": false
+      },
+      "./src/stores/clientGroupStore.ts": {
+        "version": "24c07bf799a408e9f16ee1195147d7e929b6b88c7d7529ee109a5697fa9d4c6e",
+        "signature": "ad23fdf7aa40c82ea16bafb47580e7bf3ecc5989ab42bc4ea7c5c0b5b98cc156",
+        "affectsGlobalScope": false
+      },
+      "./src/stores/clientLocation.ts": {
+        "version": "b993f47c274cb85b12dc7ccd05f2f00fdf2c956ce5f9e88ec1c5a8f26b5aaff8",
+        "signature": "d36256d1759d38afc184a25aaa94a0fd9534da5e3183cac5a84716291505c814",
+        "affectsGlobalScope": false
+      },
+      "./src/stores/clientStore.ts": {
+        "version": "11f4cb85e1664ce4085e9cfa255c1875a9db601c2ac8eca563d41056d506b81d",
+        "signature": "47bd76bc77de55ba1b6b771af7fb127ff74b600965502a510840ea222cb7ec86",
+        "affectsGlobalScope": false
+      },
+      "./src/stores/clientTimelineStore.ts": {
+        "version": "31b9c13ab265240bfb343023af91eab84445eda1bf78260a4fafa0a4667a810f",
+        "signature": "7a5fb819385ec810de9b72e787fad2f74397d2b0db6b0ea41cd5db4a5b3d8875",
+        "affectsGlobalScope": false
+      },
+      "./src/stores/contactStore.ts": {
+        "version": "f0c87f2a3e3cd43a964572732112f1b58b8e08b7c54001bc64158b526b631e59",
+        "signature": "04de8972a9ddd2f2cfffe781eb5634c09dad4c5f87ec247875480fd0e68a23d1",
+        "affectsGlobalScope": false
+      },
+      "./src/stores/deceasedStore.ts": {
+        "version": "db1df9e66b23870f4d1a2b9f3c1e02462518ad54ce7b12b4bd9e33150a3d3aef",
+        "signature": "5af952d275106f1cca785fe1daa4285569e21ffbbb1b850bc2f55bcb54ef7289",
+        "affectsGlobalScope": false
+      },
+      "./src/stores/documentAttachmentStore.ts": {
+        "version": "1da75ad1fae49346f1328ba7711fde755072525b0d983f733442e4bec7c63668",
+        "signature": "a6636f87a1f9cf0d2963b58284dd88e8baa90e1f871729f37da946eb40c32c74",
+        "affectsGlobalScope": false
+      },
+      "./src/stores/employeeStore.ts": {
+        "version": "dc347efda269601d49e43b247f69739c88174a328b1fa6a0c2f23fcaa0b84085",
+        "signature": "ec41938d36dc9cb76375b8614f99c5734c0ebe0560bd597c4eaa2a509b50504c",
+        "affectsGlobalScope": false
+      },
+      "./src/stores/factureFournisseurStore.ts": {
+        "version": "64f2dcc39daf4eede2f15146214bbae9302fffae561e10f6d9c276f55f185013",
+        "signature": "0713b8620ffa0d0a4ac08b3c9b71e13295b151a2293973ca8484250322a023b3",
+        "affectsGlobalScope": false
+      },
+      "./src/stores/fileStore.ts": {
+        "version": "d6fbe05c081b250104d361c095223abbe6f3b2d0a3b0f28b64c793cc938bf251",
+        "signature": "106a2207639222e446344c6dbfab5b1624610c0a107ab7f1719d552e58c5fac6",
+        "affectsGlobalScope": false
+      },
+      "./src/stores/fournisseurStore.ts": {
+        "version": "f33e2019b0b81a8e722b4b93bded8b7c2435c08c5dc8eac00109f1f64eebfc90",
+        "signature": "87a2745501cc058b3fa59cdc5ae697f83724f6aefa942ba8b7b758cda1a29ad5",
+        "affectsGlobalScope": false
+      },
+      "./src/stores/goodsReceiptStore.ts": {
+        "version": "1d42d452914f32908c8453592d9c5b166ab21661a6cea56c34c20de9b3efa321",
+        "signature": "5177d6641fb43e8ef06f8947e8ea58fab74ab37dffd67bca20fccdbeb3c79235",
+        "affectsGlobalScope": false
+      },
+      "./src/stores/interventionStore.ts": {
+        "version": "06622a7d9a2b6380d309e4197751a8e958a2684132144499a9577ea66fb01036",
+        "signature": "a5cc8563beb113399b431a202675c6e88cad25d754dfe14a76fcf6c41be450db",
+        "affectsGlobalScope": false
+      },
+      "./src/stores/invoiceStore.ts": {
+        "version": "e96532fbe118d5b784d083890259379da5d2c4e956be7eb1d0fcf450dc4e54bd",
+        "signature": "1f51d66178b55624d5f7e4d27e3f0f64f0a9d7a0c1f2984fc558e0839230bfaf",
+        "affectsGlobalScope": false
+      },
+      "./src/stores/productCategoryStore.ts": {
+        "version": "782f7967ceccd36d033197f29f0559467d57d3a951d99c57eaf6c9c6709a24b7",
+        "signature": "481eab6cdfec499cd530fdd78646f50b3414b7285af727443664227d86ee5c4b",
+        "affectsGlobalScope": false
+      },
+      "./src/stores/productStore.ts": {
+        "version": "bb0d4109d302baec760b8bf6e19bf87c185e3eb784145027918f2472d972fd4a",
+        "signature": "95e7597829f87d27dc9000a71299ed20186be857e07d1aee6126a971b8696fde",
+        "affectsGlobalScope": false
+      },
+      "./src/stores/purchaseOrderStore.ts": {
+        "version": "bd5920dacf7d478d3b4a835c5f1cce953dbeb8cee749e73d11d12293d856137e",
+        "signature": "af23a584aebf4282e4999228b696ead340ad69e3319b2827ef5233eeebb4e4bb",
+        "affectsGlobalScope": false
+      },
+      "./src/stores/quoteStore.ts": {
+        "version": "614551a91b3394c9b2f117a5746986d0ff1c61bfd894a2292343579ab5dcec36",
+        "signature": "753ca7b4b2be546e90077050bb4d964e36144c88100176daac2bf0607c3dd461",
+        "affectsGlobalScope": false
+      },
+      "./src/stores/receiptStore.ts": {
+        "version": "211820d331001cab3cc633211e33c85bc46ac7fb77c208d8dd090cb1207f7344",
+        "signature": "096dbf0be846bb31f31c91c9fe5f3839ee8db6b5f8b0105864c3b8ae1abcd632",
+        "affectsGlobalScope": false
+      },
+      "./src/stores/stockStore.ts": {
+        "version": "faac678958c90b32245573e749a05476471b7650188ceae016325d9fe70f22cf",
+        "signature": "b23faa4316c1f21769101d2e7c066e2b8e211df8484e33b7c146773ed9db4307",
+        "affectsGlobalScope": false
+      },
+      "./src/stores/supplierInvoiceStore.ts": {
+        "version": "83be3c55396de6a530c146629771df1d9bad4021eca62710d6f7b4f0a2edb29c",
+        "signature": "b8e0d3e9dab90e7115f7dfea39f7cad3ba861d7d5a5ee75f281086b831241b8c",
+        "affectsGlobalScope": false
+      },
+      "./src/stores/thanatopractitionerStore.ts": {
+        "version": "0978a215b32e16cdd13dd89a9cc5c4cfa853cfb4b2dace370981cd68be76f8bc",
+        "signature": "e166686f15adbdbc03e40ba1da69613e706f1d672d790fc7ac0a081490f859c3",
+        "affectsGlobalScope": false
+      },
+      "./src/stores/warehouseStore.ts": {
+        "version": "eb8a88b09c39a9ec6edb001cbca3399f4f15267e8f2cea71b3e9f928db8b1656",
+        "signature": "df6be19856c6c2efb03600d31d00ae8650ccca92ba971a40f020c86801ca6b1d",
+        "affectsGlobalScope": false
+      },
+      "./src/types/intervention.ts": {
+        "version": "0f20629114004ef6cf1ba67ee6b199a3f8b0f6ab40586b192b1690b1d75003a1",
+        "signature": "7dbd26011214897ae833ddb46308ad97524fb2633058da37248aca464dee22f1",
+        "affectsGlobalScope": false
+      },
+      "./node_modules/@types/webpack-env/index.d.ts": {
+        "version": "ebf3ec92378d6eae07f236180ac6caba814464947ee2c90b347202e9f35c6379",
+        "signature": "ebf3ec92378d6eae07f236180ac6caba814464947ee2c90b347202e9f35c6379",
+        "affectsGlobalScope": true
+      }
+    },
+    "options": {
+      "target": 99,
+      "module": 99,
+      "strict": true,
+      "jsx": 1,
+      "importHelpers": true,
+      "moduleResolution": 2,
+      "allowJs": true,
+      "skipLibCheck": true,
+      "esModuleInterop": true,
+      "allowSyntheticDefaultImports": true,
+      "sourceMap": true,
+      "baseUrl": "./",
+      "types": [
+        "webpack-env"
+      ],
+      "paths": {
+        "@/*": [
+          "src/*"
+        ]
+      },
+      "lib": [
+        "lib.esnext.d.ts",
+        "lib.dom.d.ts",
+        "lib.dom.iterable.d.ts",
+        "lib.scripthost.d.ts"
+      ],
+      "pathsBasePath": "/home/kevin/Documents/Sottye/thanasoft/New-Thanasoft/thanasoft-front",
+      "noEmit": true,
+      "pretty": false,
+      "incremental": true,
+      "configFilePath": "./tsconfig.json"
+    },
+    "referencedMap": {
+      "./node_modules/@babel/parser/typings/babel-parser.d.ts": [
+        "./node_modules/@babel/types/lib/index.d.ts"
+      ],
+      "./node_modules/@vue/compiler-core/dist/compiler-core.d.ts": [
+        "./node_modules/@babel/parser/typings/babel-parser.d.ts",
+        "./node_modules/@vue/compiler-core/node_modules/@vue/shared/dist/shared.d.ts",
+        "./node_modules/source-map/source-map.d.ts"
+      ],
+      "./node_modules/@vue/compiler-dom/dist/compiler-dom.d.ts": [
+        "./node_modules/@vue/compiler-core/dist/compiler-core.d.ts"
+      ],
+      "./node_modules/@vue/runtime-core/dist/runtime-core.d.ts": [
+        "./node_modules/@vue/compiler-core/node_modules/@vue/shared/dist/shared.d.ts",
+        "./node_modules/@vue/reactivity/dist/reactivity.d.ts",
+        "./node_modules/@vue/runtime-dom/dist/runtime-dom.d.ts"
+      ],
+      "./node_modules/@vue/runtime-dom/dist/runtime-dom.d.ts": [
+        "./node_modules/@vue/reactivity/dist/reactivity.d.ts",
+        "./node_modules/@vue/runtime-core/dist/runtime-core.d.ts",
+        "./node_modules/csstype/index.d.ts"
+      ],
+      "./node_modules/pinia/dist/pinia.d.ts": [
+        "./node_modules/@vue/runtime-core/dist/runtime-core.d.ts",
+        "./node_modules/vue-demi/lib/index.d.ts",
+        "./node_modules/vue-router/dist/vue-router.d.ts",
+        "./node_modules/vuex/types/vue.d.ts"
+      ],
+      "./node_modules/sweetalert2/sweetalert2.d.ts": [
+        "./node_modules/sweetalert2/sweetalert2.d.ts"
+      ],
+      "./node_modules/vue-demi/lib/index.d.ts": [
+        "./node_modules/vue/dist/vue.d.ts"
+      ],
+      "./node_modules/vue-router/dist/vue-router.d.ts": [
+        "./node_modules/@vue/runtime-core/dist/runtime-core.d.ts",
+        "./node_modules/pinia/dist/pinia.d.ts",
+        "./node_modules/vue/dist/vue.d.ts",
+        "./node_modules/vuex/types/vue.d.ts"
+      ],
+      "./node_modules/vue-sweetalert2/dist/index.d.ts": [
+        "./node_modules/sweetalert2/sweetalert2.d.ts"
+      ],
+      "./node_modules/vue/dist/vue.d.ts": [
+        "./node_modules/@vue/compiler-dom/dist/compiler-dom.d.ts",
+        "./node_modules/@vue/runtime-dom/dist/runtime-dom.d.ts"
+      ],
+      "./node_modules/vuex/types/helpers.d.ts": [
+        "./node_modules/vue/dist/vue.d.ts",
+        "./node_modules/vuex/types/index.d.ts"
+      ],
+      "./node_modules/vuex/types/index.d.ts": [
+        "./node_modules/vue/dist/vue.d.ts",
+        "./node_modules/vuex/types/helpers.d.ts",
+        "./node_modules/vuex/types/logger.d.ts",
+        "./node_modules/vuex/types/vue.d.ts"
+      ],
+      "./node_modules/vuex/types/logger.d.ts": [
+        "./node_modules/vuex/types/index.d.ts"
+      ],
+      "./node_modules/vuex/types/vue.d.ts": [
+        "./node_modules/@vue/runtime-core/dist/runtime-core.d.ts",
+        "./node_modules/pinia/dist/pinia.d.ts",
+        "./node_modules/vue-router/dist/vue-router.d.ts",
+        "./node_modules/vue/dist/vue.d.ts",
+        "./node_modules/vuex/types/index.d.ts"
+      ],
+      "./src/assets/js/nav-pills.js": [
+        "./node_modules/tslib/tslib.d.ts"
+      ],
+      "./src/composables/useNotification.ts": [
+        "./node_modules/tslib/tslib.d.ts",
+        "./src/stores/notification.ts"
+      ],
+      "./src/main.ts": [
+        "./node_modules/tslib/tslib.d.ts",
+        "./node_modules/vue-sweetalert2/dist/index.d.ts",
+        "./node_modules/vue/dist/vue.d.ts",
+        "./src/plugins/pinia.ts",
+        "./src/router/index.js",
+        "./src/shims-vue.d.ts",
+        "./src/soft-ui-dashboard.js",
+        "./src/store/index.js"
+      ],
+      "./src/plugins/pinia.ts": [
+        "./node_modules/pinia/dist/pinia.d.ts",
+        "./node_modules/tslib/tslib.d.ts"
+      ],
+      "./src/router/index.js": [
+        "./node_modules/tslib/tslib.d.ts",
+        "./node_modules/vue-router/dist/vue-router.d.ts",
+        "./src/plugins/pinia.ts",
+        "./src/shims-vue.d.ts",
+        "./src/stores/auth.ts"
+      ],
+      "./src/services/auth.ts": [
+        "./node_modules/tslib/tslib.d.ts",
+        "./src/services/http.ts"
+      ],
+      "./src/services/avoir.ts": [
+        "./node_modules/tslib/tslib.d.ts",
+        "./src/services/http.ts"
+      ],
+      "./src/services/categories_client.ts": [
+        "./node_modules/tslib/tslib.d.ts",
+        "./src/services/http.ts"
+      ],
+      "./src/services/client-timeline.ts": [
+        "./node_modules/tslib/tslib.d.ts",
+        "./src/services/http.ts"
+      ],
+      "./src/services/client.ts": [
+        "./node_modules/tslib/tslib.d.ts",
+        "./src/services/http.ts"
+      ],
+      "./src/services/clientGroup.ts": [
+        "./node_modules/tslib/tslib.d.ts",
+        "./src/services/client.ts",
+        "./src/services/http.ts"
+      ],
+      "./src/services/client_location.ts": [
+        "./node_modules/tslib/tslib.d.ts",
+        "./src/services/http.ts"
+      ],
+      "./src/services/contact.ts": [
+        "./node_modules/tslib/tslib.d.ts",
+        "./src/services/http.ts"
+      ],
+      "./src/services/deceased.ts": [
+        "./node_modules/tslib/tslib.d.ts",
+        "./src/services/http.ts"
+      ],
+      "./src/services/documentAttachment.ts": [
+        "./node_modules/tslib/tslib.d.ts",
+        "./src/services/http.ts"
+      ],
+      "./src/services/employee.ts": [
+        "./node_modules/tslib/tslib.d.ts",
+        "./src/services/http.ts"
+      ],
+      "./src/services/file.ts": [
+        "./node_modules/tslib/tslib.d.ts",
+        "./src/services/http.ts"
+      ],
+      "./src/services/fournisseur.ts": [
+        "./node_modules/tslib/tslib.d.ts",
+        "./src/services/http.ts"
+      ],
+      "./src/services/goodsReceipt.ts": [
+        "./node_modules/tslib/tslib.d.ts",
+        "./src/services/http.ts"
+      ],
+      "./src/services/http.ts": [
+        "./node_modules/axios/index.d.ts",
+        "./node_modules/tslib/tslib.d.ts"
+      ],
+      "./src/services/index.ts": [
+        "./node_modules/tslib/tslib.d.ts",
+        "./src/services/auth.ts",
+        "./src/services/http.ts"
+      ],
+      "./src/services/intervention.ts": [
+        "./node_modules/tslib/tslib.d.ts",
+        "./src/services/http.ts"
+      ],
+      "./src/services/invoice.ts": [
+        "./node_modules/tslib/tslib.d.ts",
+        "./src/services/client.ts",
+        "./src/services/http.ts"
+      ],
+      "./src/services/priceList.ts": [
+        "./node_modules/tslib/tslib.d.ts",
+        "./src/services/http.ts"
+      ],
+      "./src/services/product.ts": [
+        "./node_modules/tslib/tslib.d.ts",
+        "./src/services/http.ts"
+      ],
+      "./src/services/productCategorie.ts": [
+        "./node_modules/tslib/tslib.d.ts",
+        "./src/services/http.ts"
+      ],
+      "./src/services/productCategory.ts": [
+        "./node_modules/tslib/tslib.d.ts",
+        "./src/services/http.ts"
+      ],
+      "./src/services/productPackaging.ts": [
+        "./node_modules/tslib/tslib.d.ts",
+        "./src/services/http.ts"
+      ],
+      "./src/services/purchaseOrder.ts": [
+        "./node_modules/tslib/tslib.d.ts",
+        "./src/services/http.ts"
+      ],
+      "./src/services/quote.ts": [
+        "./node_modules/tslib/tslib.d.ts",
+        "./src/services/client.ts",
+        "./src/services/http.ts"
+      ],
+      "./src/services/receipt.ts": [
+        "./node_modules/tslib/tslib.d.ts",
+        "./src/services/goodsReceipt.ts",
+        "./src/services/http.ts"
+      ],
+      "./src/services/stock.ts": [
+        "./node_modules/tslib/tslib.d.ts",
+        "./src/services/http.ts"
+      ],
+      "./src/services/supplierInvoice.ts": [
+        "./node_modules/tslib/tslib.d.ts",
+        "./src/services/http.ts"
+      ],
+      "./src/services/thanatopractitioner.ts": [
+        "./node_modules/tslib/tslib.d.ts",
+        "./src/services/http.ts"
+      ],
+      "./src/services/tvaRate.ts": [
+        "./node_modules/tslib/tslib.d.ts",
+        "./src/services/http.ts"
+      ],
+      "./src/services/warehouse.ts": [
+        "./node_modules/tslib/tslib.d.ts",
+        "./src/services/http.ts"
+      ],
+      "./src/shims-vue.d.ts": [
+        "./node_modules/vue/dist/vue.d.ts"
+      ],
+      "./src/soft-ui-dashboard.js": [
+        "./node_modules/tslib/tslib.d.ts",
+        "./src/assets/js/nav-pills.js"
+      ],
+      "./src/store/index.js": [
+        "./node_modules/tslib/tslib.d.ts",
+        "./node_modules/vuex/types/index.d.ts"
+      ],
+      "./src/stores/auth.ts": [
+        "./node_modules/pinia/dist/pinia.d.ts",
+        "./node_modules/tslib/tslib.d.ts",
+        "./src/services/auth.ts"
+      ],
+      "./src/stores/avoirStore.ts": [
+        "./node_modules/pinia/dist/pinia.d.ts",
+        "./node_modules/tslib/tslib.d.ts",
+        "./node_modules/vue/dist/vue.d.ts",
+        "./src/services/avoir.ts"
+      ],
+      "./src/stores/clientCategorie.store.ts": [
+        "./node_modules/pinia/dist/pinia.d.ts",
+        "./node_modules/tslib/tslib.d.ts",
+        "./node_modules/vue/dist/vue.d.ts",
+        "./src/services/categories_client.ts"
+      ],
+      "./src/stores/clientGroupStore.ts": [
+        "./node_modules/pinia/dist/pinia.d.ts",
+        "./node_modules/tslib/tslib.d.ts",
+        "./node_modules/vue/dist/vue.d.ts",
+        "./src/services/clientGroup.ts"
+      ],
+      "./src/stores/clientLocation.ts": [
+        "./node_modules/pinia/dist/pinia.d.ts",
+        "./node_modules/tslib/tslib.d.ts",
+        "./node_modules/vue/dist/vue.d.ts",
+        "./src/services/client_location.ts"
+      ],
+      "./src/stores/clientStore.ts": [
+        "./node_modules/pinia/dist/pinia.d.ts",
+        "./node_modules/tslib/tslib.d.ts",
+        "./node_modules/vue/dist/vue.d.ts",
+        "./src/services/client.ts",
+        "./src/services/contact.ts"
+      ],
+      "./src/stores/clientTimelineStore.ts": [
+        "./node_modules/pinia/dist/pinia.d.ts",
+        "./node_modules/tslib/tslib.d.ts",
+        "./node_modules/vue/dist/vue.d.ts",
+        "./src/services/client-timeline.ts"
+      ],
+      "./src/stores/contactStore.ts": [
+        "./node_modules/pinia/dist/pinia.d.ts",
+        "./node_modules/tslib/tslib.d.ts",
+        "./node_modules/vue/dist/vue.d.ts",
+        "./src/services/contact.ts"
+      ],
+      "./src/stores/deceasedStore.ts": [
+        "./node_modules/pinia/dist/pinia.d.ts",
+        "./node_modules/tslib/tslib.d.ts",
+        "./node_modules/vue/dist/vue.d.ts",
+        "./src/services/deceased.ts"
+      ],
+      "./src/stores/documentAttachmentStore.ts": [
+        "./node_modules/pinia/dist/pinia.d.ts",
+        "./node_modules/tslib/tslib.d.ts",
+        "./node_modules/vue/dist/vue.d.ts",
+        "./src/services/documentAttachment.ts"
+      ],
+      "./src/stores/employeeStore.ts": [
+        "./node_modules/pinia/dist/pinia.d.ts",
+        "./node_modules/tslib/tslib.d.ts",
+        "./node_modules/vue/dist/vue.d.ts",
+        "./src/services/employee.ts"
+      ],
+      "./src/stores/factureFournisseurStore.ts": [
+        "./node_modules/pinia/dist/pinia.d.ts",
+        "./node_modules/tslib/tslib.d.ts",
+        "./node_modules/vue/dist/vue.d.ts"
+      ],
+      "./src/stores/fileStore.ts": [
+        "./node_modules/pinia/dist/pinia.d.ts",
+        "./node_modules/tslib/tslib.d.ts",
+        "./node_modules/vue/dist/vue.d.ts",
+        "./src/services/file.ts"
+      ],
+      "./src/stores/fournisseurStore.ts": [
+        "./node_modules/pinia/dist/pinia.d.ts",
+        "./node_modules/tslib/tslib.d.ts",
+        "./node_modules/vue/dist/vue.d.ts",
+        "./src/services/fournisseur.ts"
+      ],
+      "./src/stores/goodsReceiptStore.ts": [
+        "./node_modules/pinia/dist/pinia.d.ts",
+        "./node_modules/tslib/tslib.d.ts",
+        "./node_modules/vue/dist/vue.d.ts",
+        "./src/services/goodsReceipt.ts"
+      ],
+      "./src/stores/interventionStore.ts": [
+        "./node_modules/pinia/dist/pinia.d.ts",
+        "./node_modules/tslib/tslib.d.ts",
+        "./node_modules/vue/dist/vue.d.ts",
+        "./src/services/intervention.ts"
+      ],
+      "./src/stores/invoiceStore.ts": [
+        "./node_modules/pinia/dist/pinia.d.ts",
+        "./node_modules/tslib/tslib.d.ts",
+        "./node_modules/vue/dist/vue.d.ts",
+        "./src/services/invoice.ts"
+      ],
+      "./src/stores/notification.ts": [
+        "./node_modules/pinia/dist/pinia.d.ts",
+        "./node_modules/tslib/tslib.d.ts"
+      ],
+      "./src/stores/productCategoryStore.ts": [
+        "./node_modules/pinia/dist/pinia.d.ts",
+        "./node_modules/tslib/tslib.d.ts",
+        "./src/services/productCategory.ts"
+      ],
+      "./src/stores/productStore.ts": [
+        "./node_modules/pinia/dist/pinia.d.ts",
+        "./node_modules/tslib/tslib.d.ts",
+        "./src/services/product.ts"
+      ],
+      "./src/stores/purchaseOrderStore.ts": [
+        "./node_modules/pinia/dist/pinia.d.ts",
+        "./node_modules/tslib/tslib.d.ts",
+        "./node_modules/vue/dist/vue.d.ts",
+        "./src/services/purchaseOrder.ts"
+      ],
+      "./src/stores/quoteStore.ts": [
+        "./node_modules/pinia/dist/pinia.d.ts",
+        "./node_modules/tslib/tslib.d.ts",
+        "./node_modules/vue/dist/vue.d.ts",
+        "./src/services/quote.ts"
+      ],
+      "./src/stores/receiptStore.ts": [
+        "./node_modules/pinia/dist/pinia.d.ts",
+        "./node_modules/tslib/tslib.d.ts",
+        "./node_modules/vue/dist/vue.d.ts",
+        "./src/services/goodsReceipt.ts",
+        "./src/services/receipt.ts"
+      ],
+      "./src/stores/stockStore.ts": [
+        "./node_modules/pinia/dist/pinia.d.ts",
+        "./node_modules/tslib/tslib.d.ts",
+        "./src/services/stock.ts"
+      ],
+      "./src/stores/supplierInvoiceStore.ts": [
+        "./node_modules/pinia/dist/pinia.d.ts",
+        "./node_modules/tslib/tslib.d.ts",
+        "./node_modules/vue/dist/vue.d.ts",
+        "./src/services/supplierInvoice.ts"
+      ],
+      "./src/stores/thanatopractitionerStore.ts": [
+        "./node_modules/pinia/dist/pinia.d.ts",
+        "./node_modules/tslib/tslib.d.ts",
+        "./node_modules/vue/dist/vue.d.ts",
+        "./src/services/thanatopractitioner.ts",
+        "./src/stores/notification.ts"
+      ],
+      "./src/stores/warehouseStore.ts": [
+        "./node_modules/pinia/dist/pinia.d.ts",
+        "./node_modules/tslib/tslib.d.ts",
+        "./src/services/warehouse.ts"
+      ],
+      "./src/types/intervention.ts": [
+        "./node_modules/tslib/tslib.d.ts"
+      ]
+    },
+    "exportedModulesMap": {
+      "./node_modules/@babel/parser/typings/babel-parser.d.ts": [
+        "./node_modules/@babel/types/lib/index.d.ts"
+      ],
+      "./node_modules/@vue/compiler-core/dist/compiler-core.d.ts": [
+        "./node_modules/@babel/parser/typings/babel-parser.d.ts",
+        "./node_modules/@vue/compiler-core/node_modules/@vue/shared/dist/shared.d.ts",
+        "./node_modules/source-map/source-map.d.ts"
+      ],
+      "./node_modules/@vue/compiler-dom/dist/compiler-dom.d.ts": [
+        "./node_modules/@vue/compiler-core/dist/compiler-core.d.ts"
+      ],
+      "./node_modules/@vue/runtime-core/dist/runtime-core.d.ts": [
+        "./node_modules/@vue/compiler-core/node_modules/@vue/shared/dist/shared.d.ts",
+        "./node_modules/@vue/reactivity/dist/reactivity.d.ts",
+        "./node_modules/@vue/runtime-dom/dist/runtime-dom.d.ts"
+      ],
+      "./node_modules/@vue/runtime-dom/dist/runtime-dom.d.ts": [
+        "./node_modules/@vue/reactivity/dist/reactivity.d.ts",
+        "./node_modules/@vue/runtime-core/dist/runtime-core.d.ts",
+        "./node_modules/csstype/index.d.ts"
+      ],
+      "./node_modules/pinia/dist/pinia.d.ts": [
+        "./node_modules/@vue/runtime-core/dist/runtime-core.d.ts",
+        "./node_modules/vue-demi/lib/index.d.ts",
+        "./node_modules/vue-router/dist/vue-router.d.ts",
+        "./node_modules/vuex/types/vue.d.ts"
+      ],
+      "./node_modules/sweetalert2/sweetalert2.d.ts": [
+        "./node_modules/sweetalert2/sweetalert2.d.ts"
+      ],
+      "./node_modules/vue-demi/lib/index.d.ts": [
+        "./node_modules/vue/dist/vue.d.ts"
+      ],
+      "./node_modules/vue-router/dist/vue-router.d.ts": [
+        "./node_modules/@vue/runtime-core/dist/runtime-core.d.ts",
+        "./node_modules/pinia/dist/pinia.d.ts",
+        "./node_modules/vue/dist/vue.d.ts",
+        "./node_modules/vuex/types/vue.d.ts"
+      ],
+      "./node_modules/vue-sweetalert2/dist/index.d.ts": [
+        "./node_modules/sweetalert2/sweetalert2.d.ts"
+      ],
+      "./node_modules/vue/dist/vue.d.ts": [
+        "./node_modules/@vue/compiler-dom/dist/compiler-dom.d.ts",
+        "./node_modules/@vue/runtime-dom/dist/runtime-dom.d.ts"
+      ],
+      "./node_modules/vuex/types/helpers.d.ts": [
+        "./node_modules/vue/dist/vue.d.ts",
+        "./node_modules/vuex/types/index.d.ts"
+      ],
+      "./node_modules/vuex/types/index.d.ts": [
+        "./node_modules/vue/dist/vue.d.ts",
+        "./node_modules/vuex/types/helpers.d.ts",
+        "./node_modules/vuex/types/logger.d.ts",
+        "./node_modules/vuex/types/vue.d.ts"
+      ],
+      "./node_modules/vuex/types/logger.d.ts": [
+        "./node_modules/vuex/types/index.d.ts"
+      ],
+      "./node_modules/vuex/types/vue.d.ts": [
+        "./node_modules/@vue/runtime-core/dist/runtime-core.d.ts",
+        "./node_modules/pinia/dist/pinia.d.ts",
+        "./node_modules/vue-router/dist/vue-router.d.ts",
+        "./node_modules/vue/dist/vue.d.ts",
+        "./node_modules/vuex/types/index.d.ts"
+      ],
+      "./src/plugins/pinia.ts": [
+        "./node_modules/pinia/dist/pinia.d.ts"
+      ],
+      "./src/router/index.js": [
+        "./node_modules/vue-router/dist/vue-router.d.ts"
+      ],
+      "./src/services/clientGroup.ts": [
+        "./src/services/client.ts"
+      ],
+      "./src/services/http.ts": [
+        "./node_modules/axios/index.d.ts"
+      ],
+      "./src/services/index.ts": [
+        "./src/services/auth.ts",
+        "./src/services/http.ts"
+      ],
+      "./src/services/invoice.ts": [
+        "./src/services/client.ts"
+      ],
+      "./src/services/quote.ts": [
+        "./src/services/client.ts"
+      ],
+      "./src/services/receipt.ts": [
+        "./src/services/goodsReceipt.ts"
+      ],
+      "./src/shims-vue.d.ts": [
+        "./node_modules/vue/dist/vue.d.ts"
+      ],
+      "./src/store/index.js": [
+        "./node_modules/vuex/types/index.d.ts"
+      ],
+      "./src/stores/auth.ts": [
+        "./node_modules/pinia/dist/pinia.d.ts",
+        "./src/services/auth.ts"
+      ],
+      "./src/stores/avoirStore.ts": [
+        "./node_modules/pinia/dist/pinia.d.ts",
+        "./node_modules/vue/dist/vue.d.ts",
+        "./src/services/avoir.ts"
+      ],
+      "./src/stores/clientCategorie.store.ts": [
+        "./node_modules/pinia/dist/pinia.d.ts",
+        "./node_modules/vue/dist/vue.d.ts",
+        "./src/services/categories_client.ts"
+      ],
+      "./src/stores/clientGroupStore.ts": [
+        "./node_modules/pinia/dist/pinia.d.ts",
+        "./node_modules/vue/dist/vue.d.ts",
+        "./src/services/clientGroup.ts"
+      ],
+      "./src/stores/clientLocation.ts": [
+        "./node_modules/pinia/dist/pinia.d.ts",
+        "./node_modules/vue/dist/vue.d.ts",
+        "./src/services/client_location.ts"
+      ],
+      "./src/stores/clientStore.ts": [
+        "./node_modules/pinia/dist/pinia.d.ts",
+        "./node_modules/vue/dist/vue.d.ts",
+        "./src/services/client.ts"
+      ],
+      "./src/stores/clientTimelineStore.ts": [
+        "./node_modules/pinia/dist/pinia.d.ts",
+        "./node_modules/vue/dist/vue.d.ts",
+        "./src/services/client-timeline.ts"
+      ],
+      "./src/stores/contactStore.ts": [
+        "./node_modules/pinia/dist/pinia.d.ts",
+        "./node_modules/vue/dist/vue.d.ts",
+        "./src/services/contact.ts"
+      ],
+      "./src/stores/deceasedStore.ts": [
+        "./node_modules/pinia/dist/pinia.d.ts",
+        "./node_modules/vue/dist/vue.d.ts",
+        "./src/services/deceased.ts"
+      ],
+      "./src/stores/documentAttachmentStore.ts": [
+        "./node_modules/pinia/dist/pinia.d.ts",
+        "./node_modules/vue/dist/vue.d.ts",
+        "./src/services/documentAttachment.ts"
+      ],
+      "./src/stores/employeeStore.ts": [
+        "./node_modules/pinia/dist/pinia.d.ts",
+        "./node_modules/vue/dist/vue.d.ts",
+        "./src/services/employee.ts"
+      ],
+      "./src/stores/factureFournisseurStore.ts": [
+        "./node_modules/pinia/dist/pinia.d.ts",
+        "./node_modules/vue/dist/vue.d.ts"
+      ],
+      "./src/stores/fileStore.ts": [
+        "./node_modules/pinia/dist/pinia.d.ts",
+        "./node_modules/vue/dist/vue.d.ts",
+        "./src/services/file.ts"
+      ],
+      "./src/stores/fournisseurStore.ts": [
+        "./node_modules/pinia/dist/pinia.d.ts",
+        "./node_modules/vue/dist/vue.d.ts",
+        "./src/services/fournisseur.ts"
+      ],
+      "./src/stores/goodsReceiptStore.ts": [
+        "./node_modules/pinia/dist/pinia.d.ts",
+        "./node_modules/vue/dist/vue.d.ts",
+        "./src/services/goodsReceipt.ts"
+      ],
+      "./src/stores/interventionStore.ts": [
+        "./node_modules/pinia/dist/pinia.d.ts",
+        "./node_modules/vue/dist/vue.d.ts",
+        "./src/services/intervention.ts"
+      ],
+      "./src/stores/invoiceStore.ts": [
+        "./node_modules/pinia/dist/pinia.d.ts",
+        "./node_modules/vue/dist/vue.d.ts",
+        "./src/services/invoice.ts"
+      ],
+      "./src/stores/notification.ts": [
+        "./node_modules/pinia/dist/pinia.d.ts"
+      ],
+      "./src/stores/productCategoryStore.ts": [
+        "./node_modules/pinia/dist/pinia.d.ts",
+        "./src/services/productCategory.ts"
+      ],
+      "./src/stores/productStore.ts": [
+        "./node_modules/pinia/dist/pinia.d.ts",
+        "./src/services/product.ts"
+      ],
+      "./src/stores/purchaseOrderStore.ts": [
+        "./node_modules/pinia/dist/pinia.d.ts",
+        "./node_modules/vue/dist/vue.d.ts",
+        "./src/services/purchaseOrder.ts"
+      ],
+      "./src/stores/quoteStore.ts": [
+        "./node_modules/pinia/dist/pinia.d.ts",
+        "./node_modules/vue/dist/vue.d.ts",
+        "./src/services/quote.ts"
+      ],
+      "./src/stores/receiptStore.ts": [
+        "./node_modules/pinia/dist/pinia.d.ts",
+        "./node_modules/vue/dist/vue.d.ts",
+        "./src/services/goodsReceipt.ts"
+      ],
+      "./src/stores/stockStore.ts": [
+        "./node_modules/pinia/dist/pinia.d.ts",
+        "./src/services/stock.ts"
+      ],
+      "./src/stores/supplierInvoiceStore.ts": [
+        "./node_modules/pinia/dist/pinia.d.ts",
+        "./node_modules/vue/dist/vue.d.ts",
+        "./src/services/supplierInvoice.ts"
+      ],
+      "./src/stores/thanatopractitionerStore.ts": [
+        "./node_modules/pinia/dist/pinia.d.ts",
+        "./node_modules/vue/dist/vue.d.ts",
+        "./src/services/thanatopractitioner.ts"
+      ],
+      "./src/stores/warehouseStore.ts": [
+        "./node_modules/pinia/dist/pinia.d.ts",
+        "./src/services/warehouse.ts"
+      ]
+    },
+    "semanticDiagnosticsPerFile": [
+      "./node_modules/@babel/parser/typings/babel-parser.d.ts",
+      "./node_modules/@babel/types/lib/index.d.ts",
+      "./node_modules/@types/webpack-env/index.d.ts",
+      "./node_modules/@vue/compiler-core/dist/compiler-core.d.ts",
+      "./node_modules/@vue/compiler-core/node_modules/@vue/shared/dist/shared.d.ts",
+      "./node_modules/@vue/compiler-dom/dist/compiler-dom.d.ts",
+      "./node_modules/@vue/reactivity/dist/reactivity.d.ts",
+      "./node_modules/@vue/runtime-core/dist/runtime-core.d.ts",
+      "./node_modules/@vue/runtime-core/node_modules/@vue/shared/dist/shared.d.ts",
+      "./node_modules/@vue/runtime-dom/dist/runtime-dom.d.ts",
+      "./node_modules/axios/index.d.ts",
+      "./node_modules/csstype/index.d.ts",
+      "./node_modules/pinia/dist/pinia.d.ts",
+      "./node_modules/source-map/source-map.d.ts",
+      "./node_modules/sweetalert2/sweetalert2.d.ts",
+      "./node_modules/tslib/tslib.d.ts",
+      "./node_modules/typescript/lib/lib.dom.d.ts",
+      "./node_modules/typescript/lib/lib.dom.iterable.d.ts",
+      "./node_modules/typescript/lib/lib.es2015.collection.d.ts",
+      "./node_modules/typescript/lib/lib.es2015.core.d.ts",
+      "./node_modules/typescript/lib/lib.es2015.d.ts",
+      "./node_modules/typescript/lib/lib.es2015.generator.d.ts",
+      "./node_modules/typescript/lib/lib.es2015.iterable.d.ts",
+      "./node_modules/typescript/lib/lib.es2015.promise.d.ts",
+      "./node_modules/typescript/lib/lib.es2015.proxy.d.ts",
+      "./node_modules/typescript/lib/lib.es2015.reflect.d.ts",
+      "./node_modules/typescript/lib/lib.es2015.symbol.d.ts",
+      "./node_modules/typescript/lib/lib.es2015.symbol.wellknown.d.ts",
+      "./node_modules/typescript/lib/lib.es2016.array.include.d.ts",
+      "./node_modules/typescript/lib/lib.es2016.d.ts",
+      "./node_modules/typescript/lib/lib.es2017.d.ts",
+      "./node_modules/typescript/lib/lib.es2017.intl.d.ts",
+      "./node_modules/typescript/lib/lib.es2017.object.d.ts",
+      "./node_modules/typescript/lib/lib.es2017.sharedmemory.d.ts",
+      "./node_modules/typescript/lib/lib.es2017.string.d.ts",
+      "./node_modules/typescript/lib/lib.es2017.typedarrays.d.ts",
+      "./node_modules/typescript/lib/lib.es2018.asyncgenerator.d.ts",
+      "./node_modules/typescript/lib/lib.es2018.asynciterable.d.ts",
+      "./node_modules/typescript/lib/lib.es2018.d.ts",
+      "./node_modules/typescript/lib/lib.es2018.intl.d.ts",
+      "./node_modules/typescript/lib/lib.es2018.promise.d.ts",
+      "./node_modules/typescript/lib/lib.es2018.regexp.d.ts",
+      "./node_modules/typescript/lib/lib.es2019.array.d.ts",
+      "./node_modules/typescript/lib/lib.es2019.d.ts",
+      "./node_modules/typescript/lib/lib.es2019.object.d.ts",
+      "./node_modules/typescript/lib/lib.es2019.string.d.ts",
+      "./node_modules/typescript/lib/lib.es2019.symbol.d.ts",
+      "./node_modules/typescript/lib/lib.es2020.bigint.d.ts",
+      "./node_modules/typescript/lib/lib.es2020.d.ts",
+      "./node_modules/typescript/lib/lib.es2020.intl.d.ts",
+      "./node_modules/typescript/lib/lib.es2020.promise.d.ts",
+      "./node_modules/typescript/lib/lib.es2020.sharedmemory.d.ts",
+      "./node_modules/typescript/lib/lib.es2020.string.d.ts",
+      "./node_modules/typescript/lib/lib.es2020.symbol.wellknown.d.ts",
+      "./node_modules/typescript/lib/lib.es5.d.ts",
+      "./node_modules/typescript/lib/lib.esnext.d.ts",
+      "./node_modules/typescript/lib/lib.esnext.intl.d.ts",
+      "./node_modules/typescript/lib/lib.esnext.promise.d.ts",
+      "./node_modules/typescript/lib/lib.esnext.string.d.ts",
+      "./node_modules/typescript/lib/lib.esnext.weakref.d.ts",
+      "./node_modules/typescript/lib/lib.scripthost.d.ts",
+      "./node_modules/vue-demi/lib/index.d.ts",
+      "./node_modules/vue-router/dist/vue-router.d.ts",
+      "./node_modules/vue-sweetalert2/dist/index.d.ts",
+      "./node_modules/vue/dist/vue.d.ts",
+      "./node_modules/vuex/types/helpers.d.ts",
+      "./node_modules/vuex/types/index.d.ts",
+      "./node_modules/vuex/types/logger.d.ts",
+      "./node_modules/vuex/types/vue.d.ts",
+      "./src/assets/js/nav-pills.js",
+      "./src/composables/useNotification.ts",
+      "./src/main.ts",
+      "./src/plugins/pinia.ts",
+      "./src/router/index.js",
+      "./src/services/auth.ts",
+      "./src/services/avoir.ts",
+      "./src/services/categories_client.ts",
+      "./src/services/client-timeline.ts",
+      "./src/services/client.ts",
+      "./src/services/clientGroup.ts",
+      "./src/services/client_location.ts",
+      "./src/services/contact.ts",
+      "./src/services/deceased.ts",
+      "./src/services/documentAttachment.ts",
+      "./src/services/employee.ts",
+      "./src/services/file.ts",
+      "./src/services/fournisseur.ts",
+      "./src/services/goodsReceipt.ts",
+      "./src/services/http.ts",
+      "./src/services/index.ts",
+      "./src/services/intervention.ts",
+      "./src/services/invoice.ts",
+      "./src/services/priceList.ts",
+      "./src/services/product.ts",
+      "./src/services/productCategorie.ts",
+      "./src/services/productCategory.ts",
+      "./src/services/productPackaging.ts",
+      "./src/services/purchaseOrder.ts",
+      "./src/services/quote.ts",
+      "./src/services/receipt.ts",
+      "./src/services/stock.ts",
+      "./src/services/supplierInvoice.ts",
+      "./src/services/thanatopractitioner.ts",
+      "./src/services/tvaRate.ts",
+      "./src/services/warehouse.ts",
+      "./src/shims-vue.d.ts",
+      "./src/soft-ui-dashboard.js",
+      "./src/store/index.js",
+      "./src/stores/auth.ts",
+      "./src/stores/avoirStore.ts",
+      "./src/stores/clientCategorie.store.ts",
+      "./src/stores/clientGroupStore.ts",
+      "./src/stores/clientLocation.ts",
+      "./src/stores/clientStore.ts",
+      "./src/stores/clientTimelineStore.ts",
+      "./src/stores/contactStore.ts",
+      "./src/stores/deceasedStore.ts",
+      "./src/stores/documentAttachmentStore.ts",
+      "./src/stores/employeeStore.ts",
+      "./src/stores/factureFournisseurStore.ts",
+      [
+        "./src/stores/fileStore.ts",
+        [
+          {
+            "file": "./src/stores/fileStore.ts",
+            "start": 98,
+            "length": 4,
+            "messageText": "Duplicate identifier 'type'.",
+            "category": 1,
+            "code": 2300
+          },
+          {
+            "file": "./src/stores/fileStore.ts",
+            "start": 119,
+            "length": 4,
+            "messageText": "Duplicate identifier 'type'.",
+            "category": 1,
+            "code": 2300
+          },
+          {
+            "file": "./src/stores/fileStore.ts",
+            "start": 98,
+            "length": 4,
+            "messageText": "Duplicate identifier 'type'.",
+            "category": 1,
+            "code": 2300
+          },
+          {
+            "file": "./src/stores/fileStore.ts",
+            "start": 142,
+            "length": 4,
+            "messageText": "Duplicate identifier 'type'.",
+            "category": 1,
+            "code": 2300
+          },
+          {
+            "file": "./src/stores/fileStore.ts",
+            "start": 98,
+            "length": 4,
+            "messageText": "Duplicate identifier 'type'.",
+            "category": 1,
+            "code": 2300
+          },
+          {
+            "file": "./src/stores/fileStore.ts",
+            "start": 168,
+            "length": 4,
+            "messageText": "Duplicate identifier 'type'.",
+            "category": 1,
+            "code": 2300
+          },
+          {
+            "file": "./src/stores/fileStore.ts",
+            "start": 98,
+            "length": 4,
+            "messageText": "Duplicate identifier 'type'.",
+            "category": 1,
+            "code": 2300
+          },
+          {
+            "file": "./src/stores/fileStore.ts",
+            "start": 194,
+            "length": 4,
+            "messageText": "Duplicate identifier 'type'.",
+            "category": 1,
+            "code": 2300
+          },
+          {
+            "file": "./src/stores/fileStore.ts",
+            "start": 98,
+            "length": 4,
+            "messageText": "Duplicate identifier 'type'.",
+            "category": 1,
+            "code": 2300
+          },
+          {
+            "file": "./src/stores/fileStore.ts",
+            "start": 219,
+            "length": 4,
+            "messageText": "Duplicate identifier 'type'.",
+            "category": 1,
+            "code": 2300
+          },
+          {
+            "file": "./src/stores/fileStore.ts",
+            "start": 98,
+            "length": 4,
+            "messageText": "Duplicate identifier 'type'.",
+            "category": 1,
+            "code": 2300
+          },
+          {
+            "file": "./src/stores/fileStore.ts",
+            "start": 250,
+            "length": 4,
+            "messageText": "Duplicate identifier 'type'.",
+            "category": 1,
+            "code": 2300
+          },
+          {
+            "file": "./src/stores/fileStore.ts",
+            "start": 98,
+            "length": 4,
+            "messageText": "Module '\"../services/file\"' has no exported member 'type'. Did you mean to use 'import type from \"../services/file\"' instead?",
+            "category": 1,
+            "code": 2614
+          },
+          {
+            "file": "./src/stores/fileStore.ts",
+            "start": 119,
+            "length": 4,
+            "messageText": "Module '\"../services/file\"' has no exported member 'type'. Did you mean to use 'import type from \"../services/file\"' instead?",
+            "category": 1,
+            "code": 2614
+          },
+          {
+            "file": "./src/stores/fileStore.ts",
+            "start": 142,
+            "length": 4,
+            "messageText": "Module '\"../services/file\"' has no exported member 'type'. Did you mean to use 'import type from \"../services/file\"' instead?",
+            "category": 1,
+            "code": 2614
+          },
+          {
+            "file": "./src/stores/fileStore.ts",
+            "start": 168,
+            "length": 4,
+            "messageText": "Module '\"../services/file\"' has no exported member 'type'. Did you mean to use 'import type from \"../services/file\"' instead?",
+            "category": 1,
+            "code": 2614
+          },
+          {
+            "file": "./src/stores/fileStore.ts",
+            "start": 194,
+            "length": 4,
+            "messageText": "Module '\"../services/file\"' has no exported member 'type'. Did you mean to use 'import type from \"../services/file\"' instead?",
+            "category": 1,
+            "code": 2614
+          },
+          {
+            "file": "./src/stores/fileStore.ts",
+            "start": 219,
+            "length": 4,
+            "messageText": "Module '\"../services/file\"' has no exported member 'type'. Did you mean to use 'import type from \"../services/file\"' instead?",
+            "category": 1,
+            "code": 2614
+          },
+          {
+            "file": "./src/stores/fileStore.ts",
+            "start": 250,
+            "length": 4,
+            "messageText": "Module '\"../services/file\"' has no exported member 'type'. Did you mean to use 'import type from \"../services/file\"' instead?",
+            "category": 1,
+            "code": 2614
+          }
+        ]
+      ],
+      "./src/stores/fournisseurStore.ts",
+      "./src/stores/goodsReceiptStore.ts",
+      "./src/stores/interventionStore.ts",
+      "./src/stores/invoiceStore.ts",
+      "./src/stores/notification.ts",
+      "./src/stores/productCategoryStore.ts",
+      "./src/stores/productStore.ts",
+      "./src/stores/purchaseOrderStore.ts",
+      "./src/stores/quoteStore.ts",
+      "./src/stores/receiptStore.ts",
+      "./src/stores/stockStore.ts",
+      "./src/stores/supplierInvoiceStore.ts",
+      "./src/stores/thanatopractitionerStore.ts",
+      "./src/stores/warehouseStore.ts",
+      "./src/types/intervention.ts"
+    ],
+    "affectedFilesPendingEmit": [
+      [
+        "./node_modules/@babel/parser/typings/babel-parser.d.ts",
+        1
+      ],
+      [
+        "./node_modules/@babel/types/lib/index.d.ts",
+        1
+      ],
+      [
+        "./node_modules/@types/webpack-env/index.d.ts",
+        1
+      ],
+      [
+        "./node_modules/@vue/compiler-core/dist/compiler-core.d.ts",
+        1
+      ],
+      [
+        "./node_modules/@vue/compiler-core/node_modules/@vue/shared/dist/shared.d.ts",
+        1
+      ],
+      [
+        "./node_modules/@vue/compiler-dom/dist/compiler-dom.d.ts",
+        1
+      ],
+      [
+        "./node_modules/@vue/reactivity/dist/reactivity.d.ts",
+        1
+      ],
+      [
+        "./node_modules/@vue/runtime-core/dist/runtime-core.d.ts",
+        1
+      ],
+      [
+        "./node_modules/@vue/runtime-core/node_modules/@vue/shared/dist/shared.d.ts",
+        1
+      ],
+      [
+        "./node_modules/@vue/runtime-dom/dist/runtime-dom.d.ts",
+        1
+      ],
+      [
+        "./node_modules/axios/index.d.ts",
+        1
+      ],
+      [
+        "./node_modules/csstype/index.d.ts",
+        1
+      ],
+      [
+        "./node_modules/pinia/dist/pinia.d.ts",
+        1
+      ],
+      [
+        "./node_modules/source-map/source-map.d.ts",
+        1
+      ],
+      [
+        "./node_modules/sweetalert2/sweetalert2.d.ts",
+        1
+      ],
+      [
+        "./node_modules/tslib/tslib.d.ts",
+        1
+      ],
+      [
+        "./node_modules/typescript/lib/lib.es2015.d.ts",
+        1
+      ],
+      [
+        "./node_modules/typescript/lib/lib.es2016.d.ts",
+        1
+      ],
+      [
+        "./node_modules/typescript/lib/lib.es2017.d.ts",
+        1
+      ],
+      [
+        "./node_modules/typescript/lib/lib.es2018.d.ts",
+        1
+      ],
+      [
+        "./node_modules/typescript/lib/lib.es2019.d.ts",
+        1
+      ],
+      [
+        "./node_modules/typescript/lib/lib.es2020.d.ts",
+        1
+      ],
+      [
+        "./node_modules/typescript/lib/lib.esnext.d.ts",
+        1
+      ],
+      [
+        "./node_modules/vue-demi/lib/index.d.ts",
+        1
+      ],
+      [
+        "./node_modules/vue-router/dist/vue-router.d.ts",
+        1
+      ],
+      [
+        "./node_modules/vue-sweetalert2/dist/index.d.ts",
+        1
+      ],
+      [
+        "./node_modules/vue/dist/vue.d.ts",
+        1
+      ],
+      [
+        "./node_modules/vuex/types/helpers.d.ts",
+        1
+      ],
+      [
+        "./node_modules/vuex/types/index.d.ts",
+        1
+      ],
+      [
+        "./node_modules/vuex/types/logger.d.ts",
+        1
+      ],
+      [
+        "./node_modules/vuex/types/vue.d.ts",
+        1
+      ],
+      [
+        "./src/assets/js/nav-pills.js",
+        1
+      ],
+      [
+        "./src/composables/useNotification.ts",
+        1
+      ],
+      [
+        "./src/main.ts",
+        1
+      ],
+      [
+        "./src/plugins/pinia.ts",
+        1
+      ],
+      [
+        "./src/router/index.js",
+        1
+      ],
+      [
+        "./src/services/auth.ts",
+        1
+      ],
+      [
+        "./src/services/avoir.ts",
+        1
+      ],
+      [
+        "./src/services/categories_client.ts",
+        1
+      ],
+      [
+        "./src/services/client-timeline.ts",
+        1
+      ],
+      [
+        "./src/services/client.ts",
+        1
+      ],
+      [
+        "./src/services/clientGroup.ts",
+        1
+      ],
+      [
+        "./src/services/client_location.ts",
+        1
+      ],
+      [
+        "./src/services/contact.ts",
+        1
+      ],
+      [
+        "./src/services/deceased.ts",
+        1
+      ],
+      [
+        "./src/services/documentAttachment.ts",
+        1
+      ],
+      [
+        "./src/services/employee.ts",
+        1
+      ],
+      [
+        "./src/services/file.ts",
+        1
+      ],
+      [
+        "./src/services/fournisseur.ts",
+        1
+      ],
+      [
+        "./src/services/goodsReceipt.ts",
+        1
+      ],
+      [
+        "./src/services/http.ts",
+        1
+      ],
+      [
+        "./src/services/index.ts",
+        1
+      ],
+      [
+        "./src/services/intervention.ts",
+        1
+      ],
+      [
+        "./src/services/invoice.ts",
+        1
+      ],
+      [
+        "./src/services/priceList.ts",
+        1
+      ],
+      [
+        "./src/services/product.ts",
+        1
+      ],
+      [
+        "./src/services/productCategorie.ts",
+        1
+      ],
+      [
+        "./src/services/productCategory.ts",
+        1
+      ],
+      [
+        "./src/services/productPackaging.ts",
+        1
+      ],
+      [
+        "./src/services/purchaseOrder.ts",
+        1
+      ],
+      [
+        "./src/services/quote.ts",
+        1
+      ],
+      [
+        "./src/services/receipt.ts",
+        1
+      ],
+      [
+        "./src/services/stock.ts",
+        1
+      ],
+      [
+        "./src/services/supplierInvoice.ts",
+        1
+      ],
+      [
+        "./src/services/thanatopractitioner.ts",
+        1
+      ],
+      [
+        "./src/services/tvaRate.ts",
+        1
+      ],
+      [
+        "./src/services/warehouse.ts",
+        1
+      ],
+      [
+        "./src/shims-vue.d.ts",
+        1
+      ],
+      [
+        "./src/soft-ui-dashboard.js",
+        1
+      ],
+      [
+        "./src/store/index.js",
+        1
+      ],
+      [
+        "./src/stores/auth.ts",
+        1
+      ],
+      [
+        "./src/stores/avoirStore.ts",
+        1
+      ],
+      [
+        "./src/stores/clientCategorie.store.ts",
+        1
+      ],
+      [
+        "./src/stores/clientGroupStore.ts",
+        1
+      ],
+      [
+        "./src/stores/clientLocation.ts",
+        1
+      ],
+      [
+        "./src/stores/clientStore.ts",
+        1
+      ],
+      [
+        "./src/stores/clientTimelineStore.ts",
+        1
+      ],
+      [
+        "./src/stores/contactStore.ts",
+        1
+      ],
+      [
+        "./src/stores/deceasedStore.ts",
+        1
+      ],
+      [
+        "./src/stores/documentAttachmentStore.ts",
+        1
+      ],
+      [
+        "./src/stores/employeeStore.ts",
+        1
+      ],
+      [
+        "./src/stores/factureFournisseurStore.ts",
+        1
+      ],
+      [
+        "./src/stores/fileStore.ts",
+        1
+      ],
+      [
+        "./src/stores/fournisseurStore.ts",
+        1
+      ],
+      [
+        "./src/stores/goodsReceiptStore.ts",
+        1
+      ],
+      [
+        "./src/stores/interventionStore.ts",
+        1
+      ],
+      [
+        "./src/stores/invoiceStore.ts",
+        1
+      ],
+      [
+        "./src/stores/notification.ts",
+        1
+      ],
+      [
+        "./src/stores/productCategoryStore.ts",
+        1
+      ],
+      [
+        "./src/stores/productStore.ts",
+        1
+      ],
+      [
+        "./src/stores/purchaseOrderStore.ts",
+        1
+      ],
+      [
+        "./src/stores/quoteStore.ts",
+        1
+      ],
+      [
+        "./src/stores/receiptStore.ts",
+        1
+      ],
+      [
+        "./src/stores/stockStore.ts",
+        1
+      ],
+      [
+        "./src/stores/supplierInvoiceStore.ts",
+        1
+      ],
+      [
+        "./src/stores/thanatopractitionerStore.ts",
+        1
+      ],
+      [
+        "./src/stores/warehouseStore.ts",
+        1
+      ],
+      [
+        "./src/types/intervention.ts",
+        1
+      ]
+    ]
+  },
+  "version": "4.1.6"
+}
\ No newline at end of file