Ventes et modules transverses: devis, factures, messages, stats et webmailing

thanasoft-back/app/Http/Controllers/Api/GoodsReceiptController.php

@@ -8,6 +8,7 @@ use App\Http\Controllers\Controller;
 use App\Http\Requests\StoreGoodsReceiptRequest;
 use App\Http\Requests\UpdateGoodsReceiptRequest;
 use App\Http\Resources\GoodsReceiptResource;
+use App\Models\PurchaseOrder;
 use App\Repositories\GoodsReceiptRepositoryInterface;
 use Illuminate\Http\JsonResponse;
 use Illuminate\Support\Facades\Log;
@@ -45,7 +46,32 @@ class GoodsReceiptController extends Controller
     public function store(StoreGoodsReceiptRequest $request): JsonResponse
     {
         try {
-            $goodsReceipt = $this->goodsReceiptRepository->create($request->validated());
+            $payload = $request->validated();
+
+            if (empty($payload['lines']) && !empty($payload['purchase_order_id'])) {
+                $purchaseOrder = PurchaseOrder::query()
+                    ->with('lines')
+                    ->find($payload['purchase_order_id']);
+
+                if ($purchaseOrder) {
+                    $payload['lines'] = $purchaseOrder->lines
+                        ->filter(fn($line) => !empty($line->product_id))
+                        ->map(fn($line) => [
+                            '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();
+                }
+            }
+
+            $goodsReceipt = $this->goodsReceiptRepository->create($payload);
             return response()->json([
                 'data' => new GoodsReceiptResource($goodsReceipt),
                 'message' => 'Réception de marchandise créée avec succès.',

thanasoft-back/app/Http/Controllers/Api/PurchaseOrderController.php

@@ -8,6 +8,9 @@ use App\Http\Controllers\Controller;
 use App\Http\Requests\StorePurchaseOrderRequest;
 use App\Http\Requests\UpdatePurchaseOrderRequest;
 use App\Http\Resources\Fournisseur\PurchaseOrderResource;
+use App\Models\GoodsReceipt;
+use App\Models\Warehouse;
+use App\Repositories\GoodsReceiptRepositoryInterface;
 use App\Repositories\PurchaseOrderRepositoryInterface;
 use Illuminate\Http\JsonResponse;
 use Illuminate\Http\Resources\Json\AnonymousResourceCollection;
@@ -16,7 +19,8 @@ use Illuminate\Support\Facades\Log;
 class PurchaseOrderController extends Controller
 {
     public function __construct(
-        protected PurchaseOrderRepositoryInterface $purchaseOrderRepository
+        protected PurchaseOrderRepositoryInterface $purchaseOrderRepository,
+        protected GoodsReceiptRepositoryInterface $goodsReceiptRepository
     ) {
     }
 
@@ -98,6 +102,9 @@ 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) {
@@ -107,6 +114,16 @@ 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)
+            ) {
+                $this->createGoodsReceiptFromValidatedPurchaseOrder($purchaseOrder);
+            }
+
             return new PurchaseOrderResource($purchaseOrder);
         } catch (\Exception $e) {
             Log::error('Error updating purchase order: ' . $e->getMessage(), [
@@ -123,6 +140,53 @@ class PurchaseOrderController extends Controller
         }
     }
 
+    /**
+     * Create a draft goods receipt when a purchase order is validated.
+     */
+    protected function createGoodsReceiptFromValidatedPurchaseOrder($purchaseOrder): void
+    {
+        $alreadyExists = GoodsReceipt::query()
+            ->where('purchase_order_id', $purchaseOrder->id)
+            ->exists();
+
+        if ($alreadyExists) {
+            return;
+        }
+
+        $warehouseId = Warehouse::query()->value('id');
+        if (!$warehouseId) {
+            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);
+
+        $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,
+                ];
+            })
+            ->values()
+            ->all();
+
+        $this->goodsReceiptRepository->create([
+            'purchase_order_id' => $purchaseOrder->id,
+            'warehouse_id' => (int) $warehouseId,
+            'receipt_number' => $receiptNumber,
+            'receipt_date' => now()->toDateString(),
+            'status' => 'draft',
+            'lines' => $lines,
+        ]);
+    }
+
     /**
      * Remove the specified purchase order.
      */

thanasoft-back/app/Http/Resources/GoodsReceiptResource.php

@@ -2,6 +2,7 @@
 
 namespace App\Http\Resources;
 
+use App\Http\Resources\Fournisseur\PurchaseOrderResource;
 use Illuminate\Http\Request;
 use Illuminate\Http\Resources\Json\JsonResource;
 

thanasoft-front/src/components/Organism/Agenda/WizardSteps/StepDeceased.vue

@@ -3,80 +3,113 @@
     <h6 class="mb-3 text-dark font-weight-bold">Informations du Défunt</h6>
 
     <div class="row mb-4">
-        <div class="col-12 d-flex justify-content-center">
-            <div class="btn-group" role="group">
-                <input 
-                    type="radio" 
-                    class="btn-check" 
-                    name="deceasedMode" 
-                    id="modeNew" 
-                    autocomplete="off"
-                    :checked="!formData.is_existing"
-                    @change="formData.is_existing = false; formData.id = null"
-                >
-                <label class="btn btn-outline-primary" for="modeNew">Nouveau Défunt</label>
+      <div class="col-12 d-flex justify-content-center">
+        <div class="btn-group" role="group">
+          <input
+            id="modeNew"
+            type="radio"
+            class="btn-check"
+            name="deceasedMode"
+            autocomplete="off"
+            :checked="!formData.is_existing"
+            @change="
+              formData.is_existing = false;
+              formData.id = null;
+            "
+          />
+          <label class="btn btn-outline-primary" for="modeNew"
+            >Nouveau Défunt</label
+          >
 
-                <input 
-                    type="radio" 
-                    class="btn-check" 
-                    name="deceasedMode" 
-                    id="modeSearch" 
-                    autocomplete="off"
-                    :checked="formData.is_existing"
-                    @change="formData.is_existing = true"
-                >
-                <label class="btn btn-outline-primary" for="modeSearch">Rechercher</label>
-            </div>
+          <input
+            id="modeSearch"
+            type="radio"
+            class="btn-check"
+            name="deceasedMode"
+            autocomplete="off"
+            :checked="formData.is_existing"
+            @change="formData.is_existing = true"
+          />
+          <label class="btn btn-outline-primary" for="modeSearch"
+            >Rechercher</label
+          >
         </div>
+      </div>
     </div>
 
     <!-- SEARCH MODE -->
     <div v-if="formData.is_existing" class="row">
-        <div class="col-12 mb-3 position-relative">
-            <label class="form-label">Rechercher un défunt (Nom, Pré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"
-                    :class="{ 'is-invalid': hasError('deceased_id') }"
-                    placeholder="Tapez pour rechercher..."
-                    @input="handleSearchInput"
-                />
-                <button v-if="formData.id" class="btn btn-outline-secondary" type="button" @click="clearSelection">
-                    <i class="fas fa-times"></i>
-                </button>
-            </div>
-             <div v-if="getFieldError('deceased_id')" class="invalid-feedback d-block">
-                {{ getFieldError("deceased_id") }}
-            </div>
-            
-            <!-- Dropdown Results -->
-            <div v-if="showResults && searchResults.length" class="list-group position-absolute w-100 shadow" style="z-index: 1000; max-height: 200px; overflow-y: auto;">
-                <button 
-                    v-for="deceased in searchResults" 
-                    :key="deceased.id" 
-                    type="button" 
-                    class="list-group-item list-group-item-action"
-                    @click="selectDeceased(deceased)"
-                >
-                    <div class="d-flex w-100 justify-content-between">
-                        <h6 class="mb-1">{{ deceased.first_name }} {{ deceased.last_name }}</h6>
-                        <small>{{ deceased.birth_date }} - {{ deceased.death_date }}</small>
-                    </div>
-                </button>
-            </div>
-             <div v-if="showResults && searchResults.length === 0 && searchQuery.length >= 2 && !isSearching" class="list-group position-absolute w-100 shadow" style="z-index: 1000;">
-                <div class="list-group-item text-muted">Aucun résultat trouvé.</div>
-            </div>
+      <div class="col-12 mb-3 position-relative">
+        <label class="form-label">Rechercher un défunt (Nom, Pré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"
+            :class="{ 'is-invalid': hasError('deceased_id') }"
+            placeholder="Tapez pour rechercher..."
+            @input="handleSearchInput"
+          />
+          <button
+            v-if="formData.id"
+            class="btn btn-outline-secondary"
+            type="button"
+            @click="clearSelection"
+          >
+            <i class="fas fa-times"></i>
+          </button>
         </div>
-        
-        <div v-if="formData.id" class="col-12">
-            <div class="alert alert-info">
-                <strong>Défunt sélectionné:</strong> {{ formData.first_name }} {{ formData.last_name }}
-            </div>
+        <div
+          v-if="getFieldError('deceased_id')"
+          class="invalid-feedback d-block"
+        >
+          {{ getFieldError("deceased_id") }}
         </div>
+
+        <!-- Dropdown Results -->
+        <div
+          v-if="showResults && searchResults.length"
+          class="list-group position-absolute w-100 shadow"
+          style="z-index: 1000; max-height: 200px; overflow-y: auto"
+        >
+          <button
+            v-for="deceased in searchResults"
+            :key="deceased.id"
+            type="button"
+            class="list-group-item list-group-item-action"
+            @click="selectDeceased(deceased)"
+          >
+            <div class="d-flex w-100 justify-content-between">
+              <h6 class="mb-1">
+                {{ deceased.first_name }} {{ deceased.last_name }}
+              </h6>
+              <small
+                >{{ deceased.birth_date }} - {{ deceased.death_date }}</small
+              >
+            </div>
+          </button>
+        </div>
+        <div
+          v-if="
+            showResults &&
+            searchResults.length === 0 &&
+            searchQuery.length >= 2 &&
+            !isSearching
+          "
+          class="list-group position-absolute w-100 shadow"
+          style="z-index: 1000"
+        >
+          <div class="list-group-item text-muted">Aucun résultat trouvé.</div>
+        </div>
+      </div>
+
+      <div v-if="formData.id" class="col-12">
+        <div class="alert alert-info">
+          <strong>Défunt sélectionné:</strong> {{ formData.first_name }}
+          {{ formData.last_name }}
+        </div>
+      </div>
     </div>
 
     <!-- CREATE MODE -->
@@ -230,7 +263,7 @@ const showResults = ref(false);
 let searchTimeout;
 const handleSearchInput = () => {
   if (searchTimeout) clearTimeout(searchTimeout);
-  
+
   if (searchQuery.value.length < 2) {
     searchResults.value = [];
     showResults.value = false;
@@ -260,9 +293,9 @@ const selectDeceased = (deceased) => {
 };
 
 const clearSelection = () => {
-    props.formData.id = null;
-    searchQuery.value = "";
-    searchResults.value = [];
+  props.formData.id = null;
+  searchQuery.value = "";
+  searchResults.value = [];
 };
 
 // Error helpers using props

thanasoft-front/src/components/Organism/Agenda/WizardSteps/StepLocation.vue

@@ -3,82 +3,113 @@
     <h6 class="mb-3 text-dark font-weight-bold">Lieu de l'intervention</h6>
 
     <div class="row mb-4">
-        <div class="col-12 d-flex justify-content-center">
-            <div class="btn-group" role="group">
-                <input 
-                    type="radio" 
-                    class="btn-check" 
-                    name="locationMode" 
-                    id="locModeNew" 
-                    autocomplete="off"
-                    :checked="!formData.is_existing"
-                    @change="formData.is_existing = false; formData.id = null"
-                >
-                <label class="btn btn-outline-primary" for="locModeNew">Nouveau Lieu</label>
+      <div class="col-12 d-flex justify-content-center">
+        <div class="btn-group" role="group">
+          <input
+            id="locModeNew"
+            type="radio"
+            class="btn-check"
+            name="locationMode"
+            autocomplete="off"
+            :checked="!formData.is_existing"
+            @change="
+              formData.is_existing = false;
+              formData.id = null;
+            "
+          />
+          <label class="btn btn-outline-primary" for="locModeNew"
+            >Nouveau Lieu</label
+          >
 
-                <input 
-                    type="radio" 
-                    class="btn-check" 
-                    name="locationMode" 
-                    id="locModeSearch" 
-                    autocomplete="off"
-                    :checked="formData.is_existing"
-                    @change="formData.is_existing = true"
-                >
-                <label class="btn btn-outline-primary" for="locModeSearch">Rechercher</label>
-            </div>
+          <input
+            id="locModeSearch"
+            type="radio"
+            class="btn-check"
+            name="locationMode"
+            autocomplete="off"
+            :checked="formData.is_existing"
+            @change="formData.is_existing = true"
+          />
+          <label class="btn btn-outline-primary" for="locModeSearch"
+            >Rechercher</label
+          >
         </div>
+      </div>
     </div>
 
     <!-- SEARCH MODE -->
     <div v-if="formData.is_existing" class="row">
-         <div class="col-12 mb-3 position-relative">
-            <label class="form-label">Rechercher un lieu (Nom, Ville...)</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"
-                    :class="{ 'is-invalid': hasError('location_id') }"
-                    placeholder="Hôpital, Funérarium, Ville..."
-                    @input="handleSearchInput"
-                />
-                 <button v-if="formData.id" class="btn btn-outline-secondary" type="button" @click="clearSelection">
-                    <i class="fas fa-times"></i>
-                </button>
-            </div>
-            <div v-if="getFieldError('location_id')" class="invalid-feedback d-block">
-                {{ getFieldError("location_id") }}
-            </div>
-
-            <!-- Dropdown Results -->
-             <div v-if="showResults && searchResults.length" class="list-group position-absolute w-100 shadow" style="z-index: 1000; max-height: 200px; overflow-y: auto;">
-                <button 
-                    v-for="loc in searchResults" 
-                    :key="loc.id" 
-                    type="button" 
-                    class="list-group-item list-group-item-action"
-                    @click="selectLocation(loc)"
-                >
-                    <div class="d-flex w-100 justify-content-between">
-                        <h6 class="mb-1">{{ loc.name || 'Lieu sans nom' }}</h6>
-                        <small>{{ loc.city }}</small>
-                    </div>
-                    <small class="text-muted">{{ loc.address_line1 }}</small>
-                </button>
-            </div>
-             <div v-if="showResults && searchResults.length === 0 && searchQuery.length >= 2 && !isSearching" class="list-group position-absolute w-100 shadow" style="z-index: 1000;">
-                <div class="list-group-item text-muted">Aucun résultat trouvé.</div>
-            </div>
+      <div class="col-12 mb-3 position-relative">
+        <label class="form-label">Rechercher un lieu (Nom, Ville...)</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"
+            :class="{ 'is-invalid': hasError('location_id') }"
+            placeholder="Hôpital, Funérarium, Ville..."
+            @input="handleSearchInput"
+          />
+          <button
+            v-if="formData.id"
+            class="btn btn-outline-secondary"
+            type="button"
+            @click="clearSelection"
+          >
+            <i class="fas fa-times"></i>
+          </button>
+        </div>
+        <div
+          v-if="getFieldError('location_id')"
+          class="invalid-feedback d-block"
+        >
+          {{ getFieldError("location_id") }}
         </div>
 
-         <div v-if="formData.id" class="col-12">
-            <div class="alert alert-info">
-                <strong>Lieu sélectionné:</strong> {{ formData.name }} <br/>
-                <small>{{ formData.address }}, {{ formData.postal_code }} {{ formData.city }}</small>
+        <!-- Dropdown Results -->
+        <div
+          v-if="showResults && searchResults.length"
+          class="list-group position-absolute w-100 shadow"
+          style="z-index: 1000; max-height: 200px; overflow-y: auto"
+        >
+          <button
+            v-for="loc in searchResults"
+            :key="loc.id"
+            type="button"
+            class="list-group-item list-group-item-action"
+            @click="selectLocation(loc)"
+          >
+            <div class="d-flex w-100 justify-content-between">
+              <h6 class="mb-1">{{ loc.name || "Lieu sans nom" }}</h6>
+              <small>{{ loc.city }}</small>
             </div>
+            <small class="text-muted">{{ loc.address_line1 }}</small>
+          </button>
         </div>
+        <div
+          v-if="
+            showResults &&
+            searchResults.length === 0 &&
+            searchQuery.length >= 2 &&
+            !isSearching
+          "
+          class="list-group position-absolute w-100 shadow"
+          style="z-index: 1000"
+        >
+          <div class="list-group-item text-muted">Aucun résultat trouvé.</div>
+        </div>
+      </div>
+
+      <div v-if="formData.id" class="col-12">
+        <div class="alert alert-info">
+          <strong>Lieu sélectionné:</strong> {{ formData.name }} <br />
+          <small
+            >{{ formData.address }}, {{ formData.postal_code }}
+            {{ formData.city }}</small
+          >
+        </div>
+      </div>
     </div>
 
     <!-- CREATE MODE -->
@@ -233,54 +264,53 @@ const showResults = ref(false);
 // Debounce search
 let searchTimeout;
 const handleSearchInput = () => {
-    if (searchTimeout) clearTimeout(searchTimeout);
+  if (searchTimeout) clearTimeout(searchTimeout);
 
-    if (searchQuery.value.length < 2) {
-        searchResults.value = [];
-        showResults.value = false;
-        return;
+  if (searchQuery.value.length < 2) {
+    searchResults.value = [];
+    showResults.value = false;
+    return;
+  }
+
+  isSearching.value = true;
+  searchTimeout = setTimeout(async () => {
+    try {
+      // Use getAllClientLocations with search param
+      const response = await ClientLocationService.getAllClientLocations({
+        search: searchQuery.value,
+        per_page: 10,
+      });
+      searchResults.value = response.data;
+      showResults.value = true;
+    } catch (e) {
+      console.error("Location search failed", e);
+    } finally {
+      isSearching.value = false;
     }
-
-    isSearching.value = true;
-    searchTimeout = setTimeout(async () => {
-        try {
-            // Use getAllClientLocations with search param
-            const response = await ClientLocationService.getAllClientLocations({ 
-                search: searchQuery.value,
-                per_page: 10 
-            });
-            searchResults.value = response.data;
-            showResults.value = true;
-        } catch (e) {
-            console.error("Location search failed", e);
-        } finally {
-            isSearching.value = false;
-        }
-    }, 300);
+  }, 300);
 };
 
 const selectLocation = (location) => {
-    props.formData.id = location.id;
-    props.formData.name = location.name;
-    props.formData.address = location.address_line1; // Map address_line1 to address
-    props.formData.city = location.city;
-    props.formData.postal_code = location.postal_code;
-    props.formData.country_code = location.country_code;
-    
-    // Construct display string
-    let display = location.name || "";
-    if (location.city) display += ` (${location.city})`;
-    searchQuery.value = display;
-    showResults.value = false;
+  props.formData.id = location.id;
+  props.formData.name = location.name;
+  props.formData.address = location.address_line1; // Map address_line1 to address
+  props.formData.city = location.city;
+  props.formData.postal_code = location.postal_code;
+  props.formData.country_code = location.country_code;
+
+  // Construct display string
+  let display = location.name || "";
+  if (location.city) display += ` (${location.city})`;
+  searchQuery.value = display;
+  showResults.value = false;
 };
 
 const clearSelection = () => {
-    props.formData.id = null;
-    searchQuery.value = "";
-    searchResults.value = [];
+  props.formData.id = null;
+  searchQuery.value = "";
+  searchResults.value = [];
 };
 
-
 const getFieldError = (field) => {
   const error = props.errors.find((err) => err.field === field);
   return error ? error.message : "";

thanasoft-front/src/components/Organism/Agenda/WizardSteps/StepProductSelection.vue

@@ -6,21 +6,26 @@
       <div class="col-md-12 mb-3 position-relative">
         <label class="form-label">Type de soins</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"
-                :class="{ 'is-invalid': hasError('product_id') }"
-                placeholder="Rechercher un soin..."
-                @input="handleSearchInput"
-                @focus="showResults = true"
-            />
-            <button v-if="formData.product_id" class="btn btn-outline-secondary" type="button" @click="clearSelection">
-                <i class="fas fa-times"></i>
-            </button>
+          <span class="input-group-text"><i class="fas fa-search"></i></span>
+          <input
+            v-model="searchQuery"
+            type="text"
+            class="form-control"
+            :class="{ 'is-invalid': hasError('product_id') }"
+            placeholder="Rechercher un soin..."
+            @input="handleSearchInput"
+            @focus="showResults = true"
+          />
+          <button
+            v-if="formData.product_id"
+            class="btn btn-outline-secondary"
+            type="button"
+            @click="clearSelection"
+          >
+            <i class="fas fa-times"></i>
+          </button>
         </div>
-        
+
         <div
           v-if="getFieldError('product_id')"
           class="invalid-feedback d-block"
@@ -29,32 +34,46 @@
         </div>
 
         <!-- Dropdown Results -->
-        <div v-if="showResults" class="list-group position-absolute w-100 shadow" style="z-index: 1000; max-height: 250px; overflow-y: auto;">
-             <div v-if="loading" class="list-group-item text-center">
-                <div class="spinner-border spinner-border-sm text-primary" role="status"></div>
+        <div
+          v-if="showResults"
+          class="list-group position-absolute w-100 shadow"
+          style="z-index: 1000; max-height: 250px; overflow-y: auto"
+        >
+          <div v-if="loading" class="list-group-item text-center">
+            <div
+              class="spinner-border spinner-border-sm text-primary"
+              role="status"
+            ></div>
+          </div>
+          <button
+            v-for="product in searchResults"
+            v-else
+            :key="product.id"
+            type="button"
+            class="list-group-item list-group-item-action"
+            @click="selectProduct(product)"
+          >
+            <div class="d-flex w-100 justify-content-between">
+              <h6 class="mb-1">{{ product.nom }}</h6>
+              <small>{{ product.reference }}</small>
             </div>
-            <button 
-                v-else
-                v-for="product in searchResults" 
-                :key="product.id" 
-                type="button" 
-                class="list-group-item list-group-item-action"
-                @click="selectProduct(product)"
-            >
-                <div class="d-flex w-100 justify-content-between">
-                    <h6 class="mb-1">{{ product.nom }}</h6>
-                    <small>{{ product.reference }}</small>
-                </div>
-                <small class="text-muted">{{ product.description }}</small>
-            </button>
-             <div v-if="!loading && searchResults.length === 0" class="list-group-item text-muted">Aucun résultat trouvé.</div>
+            <small class="text-muted">{{ product.description }}</small>
+          </button>
+          <div
+            v-if="!loading && searchResults.length === 0"
+            class="list-group-item text-muted"
+          >
+            Aucun résultat trouvé.
+          </div>
         </div>
 
         <!-- Selected Product Display -->
-        <div v-if="formData.product_id && selectedProductDisplay" class="alert alert-info mt-3">
-             <strong>Soin sélectionné:</strong> {{ selectedProductDisplay }}
+        <div
+          v-if="formData.product_id && selectedProductDisplay"
+          class="alert alert-info mt-3"
+        >
+          <strong>Soin sélectionné:</strong> {{ selectedProductDisplay }}
         </div>
-
       </div>
     </div>
 
@@ -113,11 +132,11 @@ defineEmits(["next", "prev"]);
 
 const productService = new ProductService();
 const instanceService = new ProductService(); // Fix instantiation if needed or use static
-// Actually services are usually exported as objects or classes. 
+// Actually services are usually exported as objects or classes.
 // Looking at product.ts content: 'class ProductService' and 'export default ProductService' at end but usually instantiated?
 // The file has 'class ProductService' but also looks like it might be designed to be used as new ProductService().
 // Wait, looking at `product.ts` again:
-// `export default ProductService;` and it's a class. 
+// `export default ProductService;` and it's a class.
 // So `new ProductService()` is correct.
 
 // Search state
@@ -129,16 +148,17 @@ const selectedProductDisplay = ref("");
 const loading = ref(false);
 
 const filterProducts = () => {
-    if (!searchQuery.value) {
-        searchResults.value = allProducts.value;
-        return;
-    }
-    const query = searchQuery.value.toLowerCase();
-    searchResults.value = allProducts.value.filter(p => 
-        p.nom.toLowerCase().includes(query) || 
-        (p.reference && p.reference.toLowerCase().includes(query)) ||
-        (p.description && p.description.toLowerCase().includes(query))
-    );
+  if (!searchQuery.value) {
+    searchResults.value = allProducts.value;
+    return;
+  }
+  const query = searchQuery.value.toLowerCase();
+  searchResults.value = allProducts.value.filter(
+    (p) =>
+      p.nom.toLowerCase().includes(query) ||
+      (p.reference && p.reference.toLowerCase().includes(query)) ||
+      (p.description && p.description.toLowerCase().includes(query))
+  );
 };
 
 onMounted(async () => {
@@ -147,17 +167,17 @@ onMounted(async () => {
     const service = new ProductService();
     // Fetch all intervention products (using existing logic or new method if needed)
     // Assuming getProductsByCategory or getAllProducts with filter works.
-    // The previous code used productStore.fetchProducts({ is_intervention: true }). 
-    // ProductService has getAllProducts but doesn't seem to explicitly have is_intervention param in interface, 
-    // but the store might have passed it. 
+    // The previous code used productStore.fetchProducts({ is_intervention: true }).
+    // ProductService has getAllProducts but doesn't seem to explicitly have is_intervention param in interface,
+    // but the store might have passed it.
     // Let's check ProductService.getAllProducts code in product.ts.
     // It takes params object. We can pass 'is_intervention': true/1 if backend supports it.
     // Based on previous code, it seems supported.
     const response = await service.getAllProducts({
-        per_page: 100, // Fetch enough
-        is_intervention: true // Assuming backend handles this param as before
+      per_page: 100, // Fetch enough
+      is_intervention: true, // Assuming backend handles this param as before
     });
-    
+
     // Check response structure. product.ts says ProductListResponse { data: Product[] ... }
     allProducts.value = response.data;
     searchResults.value = allProducts.value;
@@ -169,22 +189,22 @@ onMounted(async () => {
 });
 
 const handleSearchInput = () => {
-    showResults.value = true;
-    filterProducts();
+  showResults.value = true;
+  filterProducts();
 };
 
 const selectProduct = (product) => {
-    props.formData.product_id = product.id;
-    selectedProductDisplay.value = product.nom;
-    searchQuery.value = product.nom;
-    showResults.value = false;
+  props.formData.product_id = product.id;
+  selectedProductDisplay.value = product.nom;
+  searchQuery.value = product.nom;
+  showResults.value = false;
 };
 
 const clearSelection = () => {
-    props.formData.product_id = null;
-    selectedProductDisplay.value = "";
-    searchQuery.value = "";
-    searchResults.value = [];
+  props.formData.product_id = null;
+  selectedProductDisplay.value = "";
+  searchQuery.value = "";
+  searchResults.value = [];
 };
 
 const getFieldError = (field) => {

thanasoft-front/src/components/Organism/Avoir/AvoirDetailPresentation.vue

@@ -14,7 +14,7 @@
         <i class="fas fa-file-invoice-dollar"></i>
         Informations générales
       </div>
-      
+
       <!-- Row 1: Avoir Number, Date, Status -->
       <div class="row g-3 mb-3">
         <div class="col-md-4">
@@ -38,11 +38,15 @@
       <div class="row g-3 mb-3">
         <div class="col-md-6">
           <label class="form-label">Client</label>
-          <div class="info-value">{{ avoir.client?.name || 'Client inconnu' }}</div>
+          <div class="info-value">
+            {{ avoir.client?.name || "Client inconnu" }}
+          </div>
         </div>
         <div class="col-md-6">
           <label class="form-label">Facture d'origine</label>
-          <div class="info-value">{{ avoir.invoice?.invoice_number || 'Non spécifiée' }}</div>
+          <div class="info-value">
+            {{ avoir.invoice?.invoice_number || "Non spécifiée" }}
+          </div>
         </div>
       </div>
 
@@ -51,11 +55,15 @@
         <div class="row g-3">
           <div class="col-md-6">
             <label class="form-label">Motif</label>
-            <div class="info-value">{{ getReasonLabel(avoir.reason_type) }}</div>
+            <div class="info-value">
+              {{ getReasonLabel(avoir.reason_type) }}
+            </div>
           </div>
           <div class="col-md-6">
             <label class="form-label">Mode de remboursement</label>
-            <div class="info-value">{{ getRefundMethodLabel(avoir.refund_method) }}</div>
+            <div class="info-value">
+              {{ getRefundMethodLabel(avoir.refund_method) }}
+            </div>
           </div>
         </div>
       </div>
@@ -71,27 +79,25 @@
       </div>
 
       <div class="lines-container">
-        <div
-          v-for="line in avoir.lines"
-          :key="line.id"
-          class="line-item"
-        >
+        <div v-for="line in avoir.lines" :key="line.id" class="line-item">
           <div class="row g-2 align-items-center">
             <div class="col-md-6">
               <label class="form-label text-xs">Désignation</label>
               <div class="line-designation">{{ line.description }}</div>
             </div>
-            
+
             <div class="col-md-2">
               <label class="form-label text-xs">Quantité</label>
               <div class="line-quantity">{{ line.quantity }}</div>
             </div>
-            
+
             <div class="col-md-2">
               <label class="form-label text-xs">Prix HT</label>
-              <div class="line-price">{{ formatCurrency(line.unit_price) }}</div>
+              <div class="line-price">
+                {{ formatCurrency(line.unit_price) }}
+              </div>
             </div>
-            
+
             <div class="col-md-2 d-flex flex-column align-items-end">
               <label class="form-label text-xs">Total HT</label>
               <span class="line-total">
@@ -116,7 +122,9 @@
         </div>
         <div class="total-row total-final">
           <span class="total-label">Total TTC</span>
-          <span class="total-amount">{{ formatCurrency(avoir.total_ttc) }}</span>
+          <span class="total-amount">{{
+            formatCurrency(avoir.total_ttc)
+          }}</span>
         </div>
       </div>
     </div>
@@ -127,7 +135,7 @@
         <i class="fas fa-info-circle"></i>
         Informations supplémentaires
       </div>
-      
+
       <div class="row g-3">
         <div class="col-md-6">
           <label class="form-label">Date de création</label>
@@ -135,13 +143,17 @@
         </div>
         <div class="col-md-6">
           <label class="form-label">Contact client</label>
-          <div class="info-value">{{ avoir.client?.email || avoir.client?.phone || 'Non spécifié' }}</div>
+          <div class="info-value">
+            {{ avoir.client?.email || avoir.client?.phone || "Non spécifié" }}
+          </div>
         </div>
       </div>
 
       <div v-if="avoir.reason_description" class="mt-3">
         <label class="form-label">Détail du motif</label>
-        <div class="info-value notes-content">{{ avoir.reason_description }}</div>
+        <div class="info-value notes-content">
+          {{ avoir.reason_description }}
+        </div>
       </div>
     </div>
 
@@ -151,24 +163,27 @@
         <soft-button
           color="secondary"
           variant="gradient"
-          @click="dropdownOpen = !dropdownOpen"
           class="btn-status"
+          @click="dropdownOpen = !dropdownOpen"
         >
           <i class="fas fa-exchange-alt me-2"></i>
           Changer le statut
           <i class="fas fa-chevron-down ms-2"></i>
         </soft-button>
-        <ul 
-          v-if="dropdownOpen" 
+        <ul
+          v-if="dropdownOpen"
           class="dropdown-menu show position-absolute"
-          style="top: 100%; left: 0; z-index: 1000;"
+          style="top: 100%; left: 0; z-index: 1000"
         >
           <li v-for="status in availableStatuses" :key="status">
             <a
               class="dropdown-item"
               :class="{ active: status === avoir.status }"
               href="javascript:;"
-              @click="changeStatus(status); dropdownOpen = false;"
+              @click="
+                changeStatus(status);
+                dropdownOpen = false;
+              "
             >
               <i :class="getStatusIcon(status) + ' me-2'"></i>
               {{ getStatusLabel(status) }}
@@ -279,9 +294,12 @@ const changeStatus = async (newStatus) => {
   try {
     await avoirStore.updateAvoir({
       id: avoir.value.id,
-      status: newStatus
+      status: newStatus,
     });
-    notificationStore.success("Succès", `Statut mis à jour : ${getStatusLabel(newStatus)}`);
+    notificationStore.success(
+      "Succès",
+      `Statut mis à jour : ${getStatusLabel(newStatus)}`
+    );
   } catch (err) {
     notificationStore.error("Erreur", "Échec de la mise à jour du statut.");
   }
@@ -518,21 +536,21 @@ onMounted(async () => {
   .form-section {
     padding: 1rem;
   }
-  
+
   .section-header {
     flex-direction: column;
     align-items: flex-start;
     gap: 0.75rem;
   }
-  
+
   .totals-content {
     max-width: 100%;
   }
-  
+
   .action-buttons {
     flex-direction: column-reverse;
   }
-  
+
   .btn-status,
   .btn-pdf {
     width: 100%;

thanasoft-front/src/components/Organism/Avoir/AvoirListPresentation.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="container-fluid py-4">
-    <avoir-list-controls 
-      @create="openCreateModal" 
+    <avoir-list-controls
+      @create="openCreateModal"
       @filter="handleFilter"
       @export="handleExport"
     />
@@ -76,13 +76,16 @@ const handleExport = () => {
   const url = URL.createObjectURL(blob);
 
   link.setAttribute("href", url);
-  link.setAttribute("download", `avoirs-export-${new Date().toISOString().split('T')[0]}.csv`);
+  link.setAttribute(
+    "download",
+    `avoirs-export-${new Date().toISOString().split("T")[0]}.csv`
+  );
   link.style.visibility = "hidden";
 
   document.body.appendChild(link);
   link.click();
   document.body.removeChild(link);
-  
+
   notificationStore.success("Export", "Fichier CSV exporté avec succès");
 };
 
@@ -102,7 +105,10 @@ const handleDelete = async (id) => {
       await avoirStore.deleteAvoir(id);
       notificationStore.success("Succès", "Avoir supprimé avec succès");
     } catch (err) {
-      notificationStore.error("Erreur", "Erreur lors de la suppression de l'avoir");
+      notificationStore.error(
+        "Erreur",
+        "Erreur lors de la suppression de l'avoir"
+      );
     }
   }
 };

thanasoft-front/src/components/Organism/Avoir/NewAvoirPresentation.vue

@@ -6,7 +6,12 @@
           <div class="card-header pb-0 p-3">
             <div class="d-flex justify-content-between align-items-center">
               <h6 class="mb-0">Créer un nouvel avoir</h6>
-              <soft-button color="secondary" variant="outline" size="sm" @click="goBack">
+              <soft-button
+                color="secondary"
+                variant="outline"
+                size="sm"
+                @click="goBack"
+              >
                 <i class="fas fa-arrow-left me-2"></i>Retour
               </soft-button>
             </div>
@@ -45,16 +50,19 @@ const handleSubmit = async (formData) => {
       avoir_date: formData.date,
       reason_type: formData.reason,
       reason_description: formData.reasonDetail,
-      lines: formData.lines.map(line => ({
+      lines: formData.lines.map((line) => ({
         description: line.designation,
         quantity: line.quantity,
         unit_price: line.priceHt,
         tva_rate: 0,
       })),
     };
-    
+
     await avoirStore.createAvoir(payload);
-    notificationStore.success("Succès", `Avoir créé avec succès: ${formData.number}`);
+    notificationStore.success(
+      "Succès",
+      `Avoir créé avec succès: ${formData.number}`
+    );
     router.push("/avoirs");
   } catch (err) {
     console.error("Error creating avoir:", err);

thanasoft-front/src/components/Organism/CRM/ClientPresentation.vue

@@ -36,7 +36,7 @@ import { storeToRefs } from "pinia";
 
 const router = useRouter();
 const clientStore = useClientStore();
-// Use storeToRefs to keep reactivity for pagination if it was passed as a prop, 
+// Use storeToRefs to keep reactivity for pagination if it was passed as a prop,
 // but since we are using the store directly for actions, we can also extract it here if needed.
 // However, the common pattern is that the parent view passes the data.
 // Let's check where clientData comes from. It comes from props.
@@ -54,9 +54,9 @@ const props = defineProps({
   },
   // We need to accept pagination as a prop if it is passed from the view
   pagination: {
-      type: Object,
-      default: () => ({})
-  }
+    type: Object,
+    default: () => ({}),
+  },
 });
 
 const goToClient = () => {
@@ -74,14 +74,18 @@ const deleteClient = (client) => {
 };
 
 const onPageChange = (page) => {
-    clientStore.fetchClients({ page: page, per_page: props.pagination.per_page });
+  clientStore.fetchClients({ page: page, per_page: props.pagination.per_page });
 };
 
 const onPerPageChange = (perPage) => {
-    clientStore.fetchClients({ page: 1, per_page: perPage });
+  clientStore.fetchClients({ page: 1, per_page: perPage });
 };
 
 const onSearch = (query) => {
-    clientStore.fetchClients({ page: 1, per_page: props.pagination.per_page, search: query });
+  clientStore.fetchClients({
+    page: 1,
+    per_page: props.pagination.per_page,
+    search: query,
+  });
 };
 </script>

thanasoft-front/src/components/Organism/CRM/FournisseurDetailPresentation.vue

@@ -1,5 +1,61 @@
 <template>
   <fournisseur-detail-template>
+    <template #header-right>
+      <span class="badge bg-white text-primary px-3 py-2">
+        {{ fournisseur.type_label || "Fournisseur" }}
+      </span>
+      <span
+        class="badge px-3 py-2"
+        :class="
+          fournisseur.is_active
+            ? 'bg-white text-success'
+            : 'bg-white text-danger'
+        "
+      >
+        {{ fournisseur.is_active ? "Actif" : "Inactif" }}
+      </span>
+    </template>
+
+    <template #summary-cards>
+      <div class="col-12 col-md-6 col-xl-3">
+        <div class="card stat-card border-0">
+          <div class="card-body py-3">
+            <p class="text-sm text-secondary mb-1">Contacts</p>
+            <h5 class="mb-0">{{ filteredContactsCount }}</h5>
+          </div>
+        </div>
+      </div>
+      <div class="col-12 col-md-6 col-xl-3">
+        <div class="card stat-card border-0">
+          <div class="card-body py-3">
+            <p class="text-sm text-secondary mb-1">Localisations</p>
+            <h5 class="mb-0">{{ locations.length }}</h5>
+          </div>
+        </div>
+      </div>
+      <div class="col-12 col-md-6 col-xl-3">
+        <div class="card stat-card border-0">
+          <div class="card-body py-3">
+            <p class="text-sm text-secondary mb-1">Email</p>
+            <h6
+              class="mb-0 text-truncate"
+              :title="fournisseur.email || 'Non renseigné'"
+            >
+              {{ fournisseur.email || "Non renseigné" }}
+            </h6>
+          </div>
+        </div>
+      </div>
+      <div class="col-12 col-md-6 col-xl-3">
+        <div class="card stat-card border-0">
+          <div class="card-body py-3">
+            <p class="text-sm text-secondary mb-1">Téléphone</p>
+            <h6 class="mb-0">{{ fournisseur.phone || "Non renseigné" }}</h6>
+          </div>
+        </div>
+      </div>
+    </template>
+
     <template #button-return>
       <div class="col-12">
         <router-link
@@ -204,3 +260,9 @@ const triggerFileInput = () => {
   }
 };
 </script>
+
+<style scoped>
+.stat-card {
+  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
+}
+</style>

thanasoft-front/src/components/Organism/CRM/FournisseurPresentation.vue

@@ -1,5 +1,34 @@
 <template>
   <fournisseur-template>
+    
+
+    <template #summary-cards>
+      <div class="col-12 col-md-6 col-xl-3">
+        <div class="card stat-card border-0">
+          <div class="card-body py-3">
+            <p class="text-sm text-secondary mb-1">Fournisseurs</p>
+            <h5 class="mb-0">{{ totalFournisseurs }}</h5>
+          </div>
+        </div>
+      </div>
+      <div class="col-12 col-md-6 col-xl-3">
+        <div class="card stat-card border-0">
+          <div class="card-body py-3">
+            <p class="text-sm text-secondary mb-1">Actifs</p>
+            <h5 class="mb-0 text-success">{{ activeFournisseurs }}</h5>
+          </div>
+        </div>
+      </div>
+      <div class="col-12 col-md-6 col-xl-3">
+        <div class="card stat-card border-0">
+          <div class="card-body py-3">
+            <p class="text-sm text-secondary mb-1">Inactifs</p>
+            <h5 class="mb-0 text-danger">{{ inactiveFournisseurs }}</h5>
+          </div>
+        </div>
+      </div>
+    </template>
+
     <template #fournisseur-new-action>
       <add-button text="Ajouter" @click="goToFournisseur" />
     </template>
@@ -25,14 +54,14 @@ import FournisseurTable from "@/components/molecules/Tables/CRM/FournisseurTable
 import addButton from "@/components/molecules/new-button/addButton.vue";
 import FilterTable from "@/components/molecules/Tables/FilterTable.vue";
 import TableAction from "@/components/molecules/Tables/TableAction.vue";
-import { defineProps, defineEmits } from "vue";
+import { computed, defineProps, defineEmits } from "vue";
 import { useRouter } from "vue-router";
 
 const router = useRouter();
 
 const emit = defineEmits(["pushDetails", "deleteFournisseur"]);
 
-defineProps({
+const props = defineProps({
   fournisseurData: {
     type: Array,
     default: [],
@@ -43,6 +72,17 @@ defineProps({
   },
 });
 
+const totalFournisseurs = computed(() => props.fournisseurData?.length || 0);
+const activeFournisseurs = computed(
+  () => props.fournisseurData?.filter((f) => f?.is_active).length || 0
+);
+const inactiveFournisseurs = computed(
+  () => totalFournisseurs.value - activeFournisseurs.value
+);
+const fournisseursWithEmail = computed(
+  () => props.fournisseurData?.filter((f) => !!f?.email).length || 0
+);
+
 const goToFournisseur = () => {
   router.push({
     name: "Creation fournisseur",
@@ -62,3 +102,9 @@ const deleteFournisseur = (fournisseur) => {
   emit("deleteFournisseur", fournisseur);
 };
 </script>
+
+<style scoped>
+.stat-card {
+  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
+}
+</style>

thanasoft-front/src/components/Organism/CRM/client/AddChildClientModal.vue

@@ -11,53 +11,76 @@
     <div class="modal-dialog modal-dialog-centered" role="document">
       <div class="modal-content">
         <div class="modal-header">
-          <h5 class="modal-title" id="addChildModalLabel">Ajouter un sous-client</h5>
+          <h5 id="addChildModalLabel" class="modal-title">
+            Ajouter un sous-client
+          </h5>
           <button
             type="button"
             class="btn-close text-dark"
-            @click="closeModal"
             aria-label="Close"
+            @click="closeModal"
           >
             <span aria-hidden="true">&times;</span>
           </button>
         </div>
         <div class="modal-body">
-             <div class="mb-3">
-                <label class="form-label">Rechercher un client</label>
-                <div v-if="selectedClient" class="d-flex align-items-center justify-content-between p-2 border rounded mb-3 bg-light">
-                    <div class="d-flex align-items-center">
-                         <soft-avatar 
-                            size="sm" 
-                            border-radius="md" 
-                            class="me-3" 
-                            alt="selected client" 
-                        />
-                        <div class="d-flex flex-column">
-                            <span class="font-weight-bold">{{ selectedClient.name }}</span>
-                            <span class="text-xs text-muted">{{ selectedClient.email }}</span>
-                        </div>
-                    </div>
-                    <button class="btn btn-link text-danger mb-0" @click="selectedClient = null">
-                        <i class="fas fa-times"></i>
-                    </button>
-                </div>
-                
-                <ClientSearchInput 
-                    v-else
-                    :exclude-ids="excludeIds"
-                    @select="handleSelect"
+          <div class="mb-3">
+            <label class="form-label">Rechercher un client</label>
+            <div
+              v-if="selectedClient"
+              class="d-flex align-items-center justify-content-between p-2 border rounded mb-3 bg-light"
+            >
+              <div class="d-flex align-items-center">
+                <soft-avatar
+                  size="sm"
+                  border-radius="md"
+                  class="me-3"
+                  alt="selected client"
                 />
-             </div>
+                <div class="d-flex flex-column">
+                  <span class="font-weight-bold">{{
+                    selectedClient.name
+                  }}</span>
+                  <span class="text-xs text-muted">{{
+                    selectedClient.email
+                  }}</span>
+                </div>
+              </div>
+              <button
+                class="btn btn-link text-danger mb-0"
+                @click="selectedClient = null"
+              >
+                <i class="fas fa-times"></i>
+              </button>
+            </div>
+
+            <ClientSearchInput
+              v-else
+              :exclude-ids="excludeIds"
+              @select="handleSelect"
+            />
+          </div>
         </div>
         <div class="modal-footer">
-          <button type="button" class="btn btn-secondary btn-sm" @click="closeModal">Annuler</button>
-          <button 
-            type="button" 
-            class="btn btn-success btn-sm" 
+          <button
+            type="button"
+            class="btn btn-secondary btn-sm"
+            @click="closeModal"
+          >
+            Annuler
+          </button>
+          <button
+            type="button"
+            class="btn btn-success btn-sm"
             :disabled="!selectedClient || loading"
             @click="confirmAdd"
           >
-            <span v-if="loading" class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
+            <span
+              v-if="loading"
+              class="spinner-border spinner-border-sm me-1"
+              role="status"
+              aria-hidden="true"
+            ></span>
             Ajouter
           </button>
         </div>
@@ -80,7 +103,7 @@ const props = defineProps({
   excludeIds: {
     type: Array,
     default: () => [],
-  }
+  },
 });
 
 const emit = defineEmits(["close", "add"]);
@@ -93,18 +116,18 @@ const handleSelect = (client) => {
 };
 
 const closeModal = () => {
-    selectedClient.value = null;
-    emit("close");
+  selectedClient.value = null;
+  emit("close");
 };
 
 const confirmAdd = async () => {
-    if (!selectedClient.value) return;
-    loading.value = true;
-    emit("add", selectedClient.value);
-    // Loading state is handled by parent usually, but here we emit and wait? 
-    // Ideally parent handles the async and closes modal. 
-    // For now simple emit.
-    loading.value = false;
-    closeModal();
+  if (!selectedClient.value) return;
+  loading.value = true;
+  emit("add", selectedClient.value);
+  // Loading state is handled by parent usually, but here we emit and wait?
+  // Ideally parent handles the async and closes modal.
+  // For now simple emit.
+  loading.value = false;
+  closeModal();
 };
 </script>

thanasoft-front/src/components/Organism/ClientGroup/ClientGroupDetailPresentation.vue

@@ -23,7 +23,11 @@
                 >
                   Retour
                 </soft-button>
-                <soft-button color="info" variant="gradient" @click="handleEdit">
+                <soft-button
+                  color="info"
+                  variant="gradient"
+                  @click="handleEdit"
+                >
                   Modifier
                 </soft-button>
               </div>
@@ -42,7 +46,9 @@
                 </p>
               </div>
               <div class="col-md-6 mb-3">
-                <h6 class="text-sm text-uppercase text-muted">Date de création</h6>
+                <h6 class="text-sm text-uppercase text-muted">
+                  Date de création
+                </h6>
                 <p class="text-sm">{{ formatDate(clientGroup.created_at) }}</p>
               </div>
               <div class="col-md-6 mb-3">

thanasoft-front/src/components/Organism/Commande/CommandeDetailPresentation.vue

@@ -7,178 +7,208 @@
   <div v-else-if="error" class="text-center py-5 text-danger">
     {{ error }}
   </div>
-  <div v-else-if="commande" class="commande-detail">
-    <!-- Header Section -->
-    <div class="form-section">
-      <div class="section-title">
-        <i class="fas fa-file-invoice"></i>
-        Informations générales
-      </div>
-      
-      <!-- Row 1: Commande Number, Date, Status -->
-      <div class="row g-3 mb-3">
-        <div class="col-md-4">
-          <label class="form-label">Numéro commande</label>
-          <div class="info-value">{{ commande.number }}</div>
-        </div>
-        <div class="col-md-4">
-          <label class="form-label">Date commande</label>
-          <div class="info-value">{{ formatDate(commande.date) }}</div>
-        </div>
-        <div class="col-md-4">
-          <label class="form-label">Statut</label>
-          <div class="status-badge" :class="getStatusClass(commande.status)">
-            <i :class="getStatusIcon(commande.status)"></i>
-            {{ getStatusLabel(commande.status) }}
-          </div>
-        </div>
-      </div>
-
-      <!-- Row 2: Fournisseur, Contact -->
-      <div class="row g-3 mb-3">
-        <div class="col-md-6">
-          <label class="form-label">Fournisseur</label>
-          <div class="info-value">{{ commande.supplierName }}</div>
-        </div>
-        <div class="col-md-6">
-          <label class="form-label">Contact</label>
-          <div class="info-value">{{ commande.supplierContact }}</div>
-        </div>
-      </div>
-
-      <!-- Row 3: Adresse livraison -->
-      <div class="mb-0">
-        <label class="form-label">Adresse livraison</label>
-        <div class="info-value">{{ commande.deliveryAddress || 'Non spécifiée' }}</div>
-      </div>
-    </div>
-
-    <!-- Articles Section -->
-    <div class="form-section">
-      <div class="section-header">
-        <div class="section-title">
-          <i class="fas fa-boxes"></i>
-          Articles commandés
-        </div>
-      </div>
-
-      <div class="lines-container">
-        <div
-          v-for="line in commande.lines"
-          :key="line.id"
-          class="line-item"
+  <div v-else-if="commande">
+    <div class="odoo-toolbar">
+      <div class="statusbar-wrapper">
+        <button
+          v-for="status in availableStatuses"
+          :key="status"
+          type="button"
+          class="status-step"
+          :class="{ active: status === commande.status }"
+          :disabled="true"
         >
-          <div class="row g-2 align-items-center">
-            <div class="col-md-5">
-              <label class="form-label text-xs">Désignation</label>
-              <div class="line-designation">{{ line.designation }}</div>
-            </div>
-            
-            <div class="col-md-2">
-              <label class="form-label text-xs">Quantité</label>
-              <div class="line-quantity">{{ line.quantity }}</div>
-            </div>
-            
-            <div class="col-md-2">
-              <label class="form-label text-xs">Prix HT</label>
-              <div class="line-price">{{ formatCurrency(line.price_ht) }}</div>
-            </div>
-            
-            <div class="col-md-3 d-flex flex-column align-items-end">
-              <label class="form-label text-xs">Total HT</label>
-              <span class="line-total">
-                {{ formatCurrency(line.total_ht) }}
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Totals Section -->
-    <div class="totals-section">
-      <div class="totals-content">
-        <div class="total-row">
-          <span class="total-label">Total HT</span>
-          <span class="total-value">{{ formatCurrency(commande.total_ht) }}</span>
-        </div>
-        <div class="total-row">
-          <span class="total-label">TVA (20%)</span>
-          <span class="total-value">{{ formatCurrency(commande.total_tva) }}</span>
-        </div>
-        <div class="total-row total-final">
-          <span class="total-label">Total TTC</span>
-          <span class="total-amount">{{ formatCurrency(commande.total_ttc) }}</span>
-        </div>
-      </div>
-    </div>
-
-    <!-- Additional Info Section -->
-    <div class="form-section">
-      <div class="section-title">
-        <i class="fas fa-info-circle"></i>
-        Informations supplémentaires
-      </div>
-      
-      <div class="row g-3">
-        <div class="col-md-6">
-          <label class="form-label">Adresse fournisseur</label>
-          <div class="info-value">{{ commande.supplierAddress }}</div>
-        </div>
-        <div class="col-md-6">
-          <label class="form-label">Date de création</label>
-          <div class="info-value">{{ formatDate(commande.date) }}</div>
-        </div>
+          <i :class="getStatusIcon(status)"></i>
+          <span>{{ getStatusLabel(status) }}</span>
+        </button>
       </div>
 
-      <div v-if="commande.notes" class="mt-3">
-        <label class="form-label">Notes</label>
-        <div class="info-value notes-content">{{ commande.notes }}</div>
-      </div>
-    </div>
-
-    <!-- Action Buttons -->
-    <div class="action-buttons">
-      <div class="position-relative d-inline-block">
+      <div class="toolbar-right">
         <soft-button
-          color="secondary"
-          variant="gradient"
-          @click="dropdownOpen = !dropdownOpen"
-          class="btn-status"
+          color="success"
+          variant="outline"
+          class="btn-toolbar btn-sm"
+          :disabled="!primaryNextStatus || isUpdatingStatus"
+          @click="handlePrimaryAction"
         >
-          <i class="fas fa-exchange-alt me-2"></i>
-          Changer le statut
-          <i class="fas fa-chevron-down ms-2"></i>
+          <i class="fas fa-check me-2"></i>
+          {{ primaryActionLabel }}
         </soft-button>
-        <ul 
-          v-if="dropdownOpen" 
-          class="dropdown-menu show position-absolute"
-          style="top: 100%; left: 0; z-index: 1000;"
+
+        <soft-button
+          :color="secondaryActionColor"
+          variant="outline"
+          class="btn-toolbar btn-sm"
+          :disabled="!secondaryActionTargetStatus || isUpdatingStatus"
+          @click="handleSecondaryAction"
         >
-          <li v-for="status in availableStatuses" :key="status">
-            <a
-              class="dropdown-item"
-              :class="{ active: status === commande.status }"
-              href="javascript:;"
-              @click="changeStatus(status); dropdownOpen = false;"
-            >
-              <i :class="getStatusIcon(status) + ' me-2'"></i>
-              {{ getStatusLabel(status) }}
-            </a>
-          </li>
-        </ul>
+          <i :class="`${secondaryActionIcon} me-2`"></i>
+          {{ secondaryActionLabel }}
+        </soft-button>
+
+        <soft-button
+          color="dark"
+          variant="outline"
+          class="btn-toolbar btn-sm"
+          @click="sendByEmail"
+        >
+          <i class="fas fa-paper-plane me-2"></i>
+          Envoyer par mail
+        </soft-button>
+
+        <soft-button
+          color="info"
+          variant="outline"
+          class="btn-toolbar btn-sm"
+          @click="downloadPdf"
+        >
+          <i class="fas fa-file-pdf me-2"></i>
+          Télécharger PDF
+        </soft-button>
+      </div>
+    </div>
+
+    <div class="commande-detail">
+      <!-- Header Section -->
+      <div class="form-section">
+        <div class="section-title">
+          <i class="fas fa-file-invoice"></i>
+          Informations générales
+        </div>
+
+        <!-- Row 1: Commande Number, Date, Status -->
+        <div class="row g-3 mb-3">
+          <div class="col-md-4">
+            <label class="form-label">Numéro commande</label>
+            <div class="info-value">{{ commande.number }}</div>
+          </div>
+          <div class="col-md-4">
+            <label class="form-label">Date commande</label>
+            <div class="info-value">{{ formatDate(commande.date) }}</div>
+          </div>
+          <div class="col-md-4">
+            <label class="form-label">Statut</label>
+            <div class="status-badge" :class="getStatusClass(commande.status)">
+              <i :class="getStatusIcon(commande.status)"></i>
+              {{ getStatusLabel(commande.status) }}
+            </div>
+          </div>
+        </div>
+
+        <!-- Row 2: Fournisseur, Contact -->
+        <div class="row g-3 mb-3">
+          <div class="col-md-6">
+            <label class="form-label">Fournisseur</label>
+            <div class="info-value">{{ commande.supplierName }}</div>
+          </div>
+          <div class="col-md-6">
+            <label class="form-label">Contact</label>
+            <div class="info-value">{{ commande.supplierContact }}</div>
+          </div>
+        </div>
+
+        <!-- Row 3: Adresse livraison -->
+        <div class="mb-0">
+          <label class="form-label">Adresse livraison</label>
+          <div class="info-value">
+            {{ commande.deliveryAddress || "Non spécifiée" }}
+          </div>
+        </div>
       </div>
 
-      <soft-button color="info" variant="outline" class="btn-pdf">
-        <i class="fas fa-file-pdf me-2"></i> Télécharger PDF
-      </soft-button>
+      <!-- Articles Section -->
+      <div class="form-section">
+        <div class="section-header">
+          <div class="section-title">
+            <i class="fas fa-boxes"></i>
+            Articles commandés
+          </div>
+        </div>
+
+        <div class="lines-container">
+          <div v-for="line in commande.lines" :key="line.id" class="line-item">
+            <div class="row g-2 align-items-center">
+              <div class="col-md-5">
+                <label class="form-label text-xs">Désignation</label>
+                <div class="line-designation">{{ line.designation }}</div>
+              </div>
+
+              <div class="col-md-2">
+                <label class="form-label text-xs">Quantité</label>
+                <div class="line-quantity">{{ line.quantity }}</div>
+              </div>
+
+              <div class="col-md-2">
+                <label class="form-label text-xs">Prix HT</label>
+                <div class="line-price">
+                  {{ formatCurrency(line.price_ht) }}
+                </div>
+              </div>
+
+              <div class="col-md-3 d-flex flex-column align-items-end">
+                <label class="form-label text-xs">Total HT</label>
+                <span class="line-total">
+                  {{ formatCurrency(line.total_ht) }}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Totals Section -->
+      <div class="totals-section">
+        <div class="totals-content">
+          <div class="total-row">
+            <span class="total-label">Total HT</span>
+            <span class="total-value">{{
+              formatCurrency(commande.total_ht)
+            }}</span>
+          </div>
+          <div class="total-row">
+            <span class="total-label">TVA (20%)</span>
+            <span class="total-value">{{
+              formatCurrency(commande.total_tva)
+            }}</span>
+          </div>
+          <div class="total-row total-final">
+            <span class="total-label">Total TTC</span>
+            <span class="total-amount">{{
+              formatCurrency(commande.total_ttc)
+            }}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Additional Info Section -->
+      <div class="form-section">
+        <div class="section-title">
+          <i class="fas fa-info-circle"></i>
+          Informations supplémentaires
+        </div>
+
+        <div class="row g-3">
+          <div class="col-md-6">
+            <label class="form-label">Adresse fournisseur</label>
+            <div class="info-value">{{ commande.supplierAddress }}</div>
+          </div>
+          <div class="col-md-6">
+            <label class="form-label">Date de création</label>
+            <div class="info-value">{{ formatDate(commande.date) }}</div>
+          </div>
+        </div>
+
+        <div v-if="commande.notes" class="mt-3">
+          <label class="form-label">Notes</label>
+          <div class="info-value notes-content">{{ commande.notes }}</div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, defineProps, onMounted } from "vue";
-import { useRouter } from "vue-router";
+import { ref, defineProps, onMounted, computed } from "vue";
 import SoftButton from "@/components/SoftButton.vue";
 import { PurchaseOrderService } from "@/services/purchaseOrder";
 import { useNotificationStore } from "@/stores/notification";
@@ -190,14 +220,71 @@ const props = defineProps({
   },
 });
 
-const router = useRouter();
 const notificationStore = useNotificationStore();
 const commande = ref(null);
 const loading = ref(true);
 const error = ref(null);
-const dropdownOpen = ref(false);
+const isUpdatingStatus = ref(false);
+const statusUpdateRequestId = ref(0);
 
-const availableStatuses = ["brouillon", "confirmee", "livree", "facturee", "annulee"];
+const availableStatuses = [
+  "brouillon",
+  "confirmee",
+  "livree",
+  "facturee",
+  "annulee",
+];
+
+const primaryNextStatus = computed(() => {
+  if (!commande.value?.status) return null;
+  const nextMap = {
+    brouillon: "confirmee",
+    confirmee: "livree",
+    livree: "facturee",
+  };
+  return nextMap[commande.value.status] || null;
+});
+
+const primaryActionLabel = computed(() => {
+  const labels = {
+    confirmee: "Valider / Confirmer",
+    livree: "Marquer comme livrée",
+    facturee: "Marquer comme facturée",
+  };
+  return labels[primaryNextStatus.value] || "Aucune action";
+});
+
+const secondaryActionTargetStatus = computed(() => {
+  if (!commande.value?.status) return null;
+
+  if (["brouillon", "confirmee", "livree"].includes(commande.value.status)) {
+    return "annulee";
+  }
+
+  if (commande.value.status === "annulee") {
+    return "brouillon";
+  }
+
+  return null;
+});
+
+const secondaryActionLabel = computed(() => {
+  if (secondaryActionTargetStatus.value === "annulee") return "Annuler";
+  if (secondaryActionTargetStatus.value === "brouillon") return "Remettre en brouillon";
+  return "Aucune action";
+});
+
+const secondaryActionIcon = computed(() => {
+  if (secondaryActionTargetStatus.value === "annulee") return "fas fa-times";
+  if (secondaryActionTargetStatus.value === "brouillon") return "fas fa-undo";
+  return "fas fa-ban";
+});
+
+const secondaryActionColor = computed(() => {
+  if (secondaryActionTargetStatus.value === "annulee") return "danger";
+  if (secondaryActionTargetStatus.value === "brouillon") return "warning";
+  return "secondary";
+});
 
 const formatDate = (dateString) => {
   if (!dateString) return "-";
@@ -252,9 +339,11 @@ const fetchCommande = async () => {
   loading.value = true;
   error.value = null;
   try {
-    const response = await PurchaseOrderService.getPurchaseOrder(props.commandeId);
+    const response = await PurchaseOrderService.getPurchaseOrder(
+      props.commandeId
+    );
     const data = response.data;
-    
+
     // Map backend data to frontend structure
     commande.value = {
       id: data.id,
@@ -266,22 +355,25 @@ const fetchCommande = async () => {
       total_ttc: data.total_ttc,
       notes: data.notes,
       deliveryAddress: data.delivery_address,
-      
+
       // Supplier mapping
       supplierName: data.fournisseur?.name || "Inconnu",
-      supplierAddress: data.fournisseur ? 
-        `${data.fournisseur.billing_address_line1 || ''} ${data.fournisseur.billing_city || ''}` : 
-        "Non spécifiée",
-      supplierContact: data.fournisseur?.email || data.fournisseur?.phone || "Indisponible",
-      
+      supplierAddress: data.fournisseur
+        ? `${data.fournisseur.billing_address_line1 || ""} ${
+            data.fournisseur.billing_city || ""
+          }`
+        : "Non spécifiée",
+      supplierContact:
+        data.fournisseur?.email || data.fournisseur?.phone || "Indisponible",
+
       // Lines mapping: translation between backend (description, unit_price) and frontend (designation, price_ht)
-      lines: (data.lines || []).map(line => ({
+      lines: (data.lines || []).map((line) => ({
         id: line.id,
         designation: line.description,
         quantity: line.quantity,
         price_ht: line.unit_price,
-        total_ht: line.total_ht
-      }))
+        total_ht: line.total_ht,
+      })),
     };
   } catch (err) {
     console.error("Error fetching commande:", err);
@@ -293,20 +385,64 @@ const fetchCommande = async () => {
 };
 
 const changeStatus = async (newStatus) => {
+  if (!commande.value || commande.value.status === newStatus) return;
+
+  const requestId = ++statusUpdateRequestId.value;
+
   try {
+    isUpdatingStatus.value = true;
     const payload = {
       id: props.commandeId,
-      status: newStatus
+      status: newStatus,
     };
-    await PurchaseOrderService.updatePurchaseOrder(payload);
-    commande.value.status = newStatus;
-    notificationStore.success("Succès", `Statut mis à jour : ${getStatusLabel(newStatus)}`);
+
+    const response = await PurchaseOrderService.updatePurchaseOrder(payload);
+
+    // Ignore stale async responses to avoid race-condition overwrites
+    if (requestId !== statusUpdateRequestId.value || !commande.value) {
+      return;
+    }
+
+    const persistedStatus = response?.data?.status || newStatus;
+
+    // Do not mutate status directly in frontend; always reload from backend source.
+    await fetchCommande();
+
+    notificationStore.success(
+      "Succès",
+      `Statut mis à jour : ${getStatusLabel(persistedStatus)}`
+    );
   } catch (err) {
     console.error("Error updating status:", err);
     notificationStore.error("Erreur", "Échec de la mise à jour du statut.");
+  } finally {
+    if (requestId === statusUpdateRequestId.value) {
+      isUpdatingStatus.value = false;
+    }
   }
 };
 
+const handlePrimaryAction = async () => {
+  if (!primaryNextStatus.value) return;
+  await changeStatus(primaryNextStatus.value);
+};
+
+const handleSecondaryAction = async () => {
+  if (!secondaryActionTargetStatus.value) return;
+  await changeStatus(secondaryActionTargetStatus.value);
+};
+
+const sendByEmail = () => {
+  notificationStore.success(
+    "Email",
+    "Simulation d'envoi de commande par email effectuée."
+  );
+};
+
+const downloadPdf = () => {
+  window.print();
+};
+
 onMounted(() => {
   fetchCommande();
 });
@@ -318,6 +454,82 @@ onMounted(() => {
   margin: 0 auto;
 }
 
+.odoo-toolbar {
+  background: #fff;
+  border: 1px solid #e9ecef;
+  border-radius: 12px;
+  padding: 1rem;
+  margin-bottom: 1.25rem;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.toolbar-right {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.btn-toolbar {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.35rem 0.7rem !important;
+  font-size: 0.78rem !important;
+}
+
+.statusbar-wrapper {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+  flex: 1;
+}
+
+.status-step {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.45rem;
+  padding: 0.38rem 0.65rem;
+  border: 1px solid #dee2e6;
+  background: #f8f9fa;
+  color: #495057;
+  border-radius: 8px;
+  font-size: 0.74rem;
+  font-weight: 600;
+  transition: all 0.2s ease;
+  position: relative;
+}
+
+.status-step:not(:last-child)::after {
+  content: "›";
+  position: absolute;
+  right: -0.6rem;
+  color: #adb5bd;
+  font-size: 0.8rem;
+}
+
+.status-step:hover:not(:disabled) {
+  border-color: #5e72e4;
+  color: #344767;
+}
+
+.status-step.active {
+  background: #344767;
+  border-color: #344767;
+  color: #fff;
+}
+
+.status-step:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
 /* Form Sections */
 .form-section {
   background: #fff;
@@ -517,47 +729,38 @@ onMounted(() => {
   color: #212529;
 }
 
-/* Action Buttons */
-.action-buttons {
-  display: flex;
-  justify-content: flex-end;
-  gap: 0.75rem;
-  padding-top: 0.5rem;
-}
-
-.btn-status,
-.btn-pdf {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.625rem 1.25rem;
-  font-size: 0.9rem;
-}
-
 /* Responsive */
 @media (max-width: 768px) {
   .form-section {
     padding: 1rem;
   }
-  
+
   .section-header {
     flex-direction: column;
     align-items: flex-start;
     gap: 0.75rem;
   }
-  
+
   .totals-content {
     max-width: 100%;
   }
-  
-  .action-buttons {
-    flex-direction: column-reverse;
-  }
-  
-  .btn-status,
-  .btn-pdf {
+
+  .toolbar-left .btn-toolbar {
     width: 100%;
     justify-content: center;
   }
+
+  .statusbar-wrapper {
+    width: 100%;
+  }
+
+  .odoo-toolbar {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .toolbar-right {
+    justify-content: flex-start;
+  }
 }
 </style>

thanasoft-front/src/components/Organism/Commande/CommandeListPresentation.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="container-fluid py-4">
-    <commande-list-controls 
-      @create="openCreateModal" 
+    <commande-list-controls
+      @create="openCreateModal"
       @filter="handleFilter"
       @export="handleExport"
     />
@@ -75,7 +75,10 @@ const handleExport = () => {
   const url = URL.createObjectURL(blob);
 
   link.setAttribute("href", url);
-  link.setAttribute("download", `commandes-export-${new Date().toISOString().split('T')[0]}.csv`);
+  link.setAttribute(
+    "download",
+    `commandes-export-${new Date().toISOString().split("T")[0]}.csv`
+  );
   link.style.visibility = "hidden";
 
   document.body.appendChild(link);

thanasoft-front/src/components/Organism/FactureFournisseur/FactureFournisseurDetailPresentation.vue

@@ -38,7 +38,12 @@
 
     <template #actions>
       <div class="d-flex justify-content-end gap-2">
-        <soft-button color="secondary" variant="outline" size="sm" @click="handleBack">
+        <soft-button
+          color="secondary"
+          variant="outline"
+          size="sm"
+          @click="handleBack"
+        >
           Retour
         </soft-button>
         <soft-button color="info" size="sm">

thanasoft-front/src/components/Organism/FactureFournisseur/FactureFournisseurListPresentation.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="container-fluid py-4">
-    <facture-fournisseur-list-controls 
-      @create="handleCreate" 
+    <facture-fournisseur-list-controls
+      @create="handleCreate"
       @filter="handleFilter"
     />
     <div class="row">
@@ -33,7 +33,7 @@ const currentFilter = ref(null);
 
 const filteredFactures = computed(() => {
   if (!currentFilter.value) return factures.value;
-  return factures.value.filter(f => f.status === currentFilter.value);
+  return factures.value.filter((f) => f.status === currentFilter.value);
 });
 
 const handleCreate = () => {

thanasoft-front/src/components/Organism/FactureFournisseur/NewFactureFournisseurPresentation.vue

@@ -5,12 +5,14 @@
         <div class="card">
           <div class="card-header pb-0">
             <h5 class="mb-0">Nouvelle Facture Fournisseur</h5>
-            <p class="text-sm mb-0">Saisissez les informations de la facture reçue.</p>
+            <p class="text-sm mb-0">
+              Saisissez les informations de la facture reçue.
+            </p>
           </div>
           <div class="card-body">
-            <new-facture-fournisseur-form 
-              @submit="handleSubmit" 
-              @cancel="handleCancel" 
+            <new-facture-fournisseur-form
+              @submit="handleSubmit"
+              @cancel="handleCancel"
             />
           </div>
         </div>

thanasoft-front/src/components/Organism/InternalMessages/InternalMessagePresentation.vue

@@ -9,9 +9,7 @@
           <small class="text-muted">Communiquez avec votre équipe</small>
         </div>
         <div>
-          <span class="badge bg-info">
-            {{ unreadCount }} non lu(s)
-          </span>
+          <span class="badge bg-info"> {{ unreadCount }} non lu(s) </span>
         </div>
       </div>
     </template>
@@ -22,19 +20,21 @@
           <button
             class="nav-link"
             :class="{ active: activeTab === 'inbox' }"
-            @click="activeTab = 'inbox'"
             type="button"
+            @click="activeTab = 'inbox'"
           >
             <i class="fas fa-inbox"></i> Réception
-            <span class="badge bg-danger ms-2" v-if="unreadCount > 0">{{ unreadCount }}</span>
+            <span v-if="unreadCount > 0" class="badge bg-danger ms-2">{{
+              unreadCount
+            }}</span>
           </button>
         </li>
         <li class="nav-item" role="presentation">
           <button
             class="nav-link"
             :class="{ active: activeTab === 'compose' }"
-            @click="activeTab = 'compose'"
             type="button"
+            @click="activeTab = 'compose'"
           >
             <i class="fas fa-pen"></i> Nouveau message
           </button>
@@ -43,8 +43,8 @@
           <button
             class="nav-link"
             :class="{ active: activeTab === 'sent' }"
-            @click="activeTab = 'sent'"
             type="button"
+            @click="activeTab = 'sent'"
           >
             <i class="fas fa-paper-plane"></i> Envoyés
           </button>
@@ -72,17 +72,10 @@
             @form-data-change="updateNewMessage"
           />
           <div class="mt-4 d-flex justify-content-end gap-2">
-            <soft-button
-              color="secondary"
-              variant="outline"
-              @click="resetForm"
-            >
+            <soft-button color="secondary" variant="outline" @click="resetForm">
               <i class="fas fa-redo"></i> Réinitialiser
             </soft-button>
-            <soft-button
-              color="success"
-              @click="sendMessage"
-            >
+            <soft-button color="success" @click="sendMessage">
               <i class="fas fa-check"></i> Envoyer
             </soft-button>
           </div>
@@ -260,7 +253,9 @@ const sendMessage = () => {
     return;
   }
 
-  const recipient = users.value.find((u) => u.id === parseInt(newMessage.value.recipientId));
+  const recipient = users.value.find(
+    (u) => u.id === parseInt(newMessage.value.recipientId)
+  );
 
   const sentMessage = {
     id: sent.value.length + 101,

thanasoft-front/src/components/Organism/Interventions/InterventionPresentation.vue

@@ -6,37 +6,54 @@
       </soft-button>
     </template>
     <template #header-pagination>
-      <div class="d-flex justify-content-center" v-if="pagination && pagination.last_page > 1">
-           <soft-pagination color="success" size="sm">
-             <soft-pagination-item 
-               prev 
-               :disabled="pagination.current_page <= 1"
-               @click="changePage(pagination.current_page - 1)" 
-             />
-             
-             <soft-pagination-item 
-               v-for="page in visiblePages" 
-               :key="page"
-               :label="page.toString()" 
-               :active="pagination.current_page === page"
-               @click="changePage(page)" 
-             />
-             
-             <soft-pagination-item 
-               next 
-               :disabled="pagination.current_page >= pagination.last_page"
-               @click="changePage(pagination.current_page + 1)" 
-             />
-           </soft-pagination>
+      <div
+        v-if="pagination && pagination.last_page > 1"
+        class="d-flex justify-content-center"
+      >
+        <soft-pagination color="success" size="sm">
+          <soft-pagination-item
+            prev
+            :disabled="pagination.current_page <= 1"
+            @click="changePage(pagination.current_page - 1)"
+          />
+
+          <soft-pagination-item
+            v-for="page in visiblePages"
+            :key="page"
+            :label="page.toString()"
+            :active="pagination.current_page === page"
+            @click="changePage(page)"
+          />
+
+          <soft-pagination-item
+            next
+            :disabled="pagination.current_page >= pagination.last_page"
+            @click="changePage(pagination.current_page + 1)"
+          />
+        </soft-pagination>
       </div>
     </template>
     <template #select-filter>
-      <soft-button color="dark" variant="outline" class="dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+      <soft-button
+        color="dark"
+        variant="outline"
+        class="dropdown-toggle"
+        data-bs-toggle="dropdown"
+        aria-expanded="false"
+      >
         <i class="fas fa-filter me-2"></i> Filtrer
       </soft-button>
       <ul class="dropdown-menu dropdown-menu-lg-start px-2 py-3">
-        <li><a class="dropdown-item border-radius-md" href="javascript:;">Par date</a></li>
-        <li><a class="dropdown-item border-radius-md" href="javascript:;">Par statut</a></li>
+        <li>
+          <a class="dropdown-item border-radius-md" href="javascript:;"
+            >Par date</a
+          >
+        </li>
+        <li>
+          <a class="dropdown-item border-radius-md" href="javascript:;"
+            >Par statut</a
+          >
+        </li>
       </ul>
     </template>
     <template #intervention-other-action>
@@ -104,7 +121,7 @@ const props = defineProps({
   pagination: {
     type: Object,
     default: null,
-  }
+  },
 });
 
 // Emits
@@ -115,8 +132,9 @@ const go = () => {
 };
 
 const changePage = (page) => {
-  if (typeof page !== 'number') return;
-  if (page < 1 || (props.pagination && page > props.pagination.last_page)) return;
+  if (typeof page !== "number") return;
+  if (page < 1 || (props.pagination && page > props.pagination.last_page))
+    return;
   if (page === props.pagination.current_page) return;
   emit("page-change", page);
 };
@@ -126,7 +144,11 @@ const visiblePages = computed(() => {
   const { current_page, last_page } = props.pagination;
   const delta = 2;
   const range = [];
-  for (let i = Math.max(2, current_page - delta); i <= Math.min(last_page - 1, current_page + delta); i++) {
+  for (
+    let i = Math.max(2, current_page - delta);
+    i <= Math.min(last_page - 1, current_page + delta);
+    i++
+  ) {
     range.push(i);
   }
 
@@ -142,50 +164,56 @@ const visiblePages = computed(() => {
   if (last_page > 0) finalRange.push(1);
   // Simplified logic for now: just range around current if total pages is large, else all
   if (last_page <= 7) {
-     return Array.from({length: last_page}, (_, i) => i + 1);
+    return Array.from({ length: last_page }, (_, i) => i + 1);
   }
-  
+
   // Complex logic if needed, but for now let's do simple sliding window
   // [1] ... [current-1] [current] [current+1] ... [last]
-  
+
   let pages = [1];
-  
+
   let start = Math.max(2, current_page - 1);
   let end = Math.min(last_page - 1, current_page + 1);
-  
+
   if (current_page <= 3) {
-      end = 4; // Show 1, 2, 3, 4 ... Last
+    end = 4; // Show 1, 2, 3, 4 ... Last
   }
   if (current_page >= last_page - 2) {
-      start = last_page - 3; 
+    start = last_page - 3;
   }
-  
+
   if (start > 2) {
-      // no dots, just gap logic handled by UI usually, but here we return numbers
-      // SoftPaginationItem expects label, maybe I handle dots logic elsewhere?
-      // Let's stick to simple window: 
+    // no dots, just gap logic handled by UI usually, but here we return numbers
+    // SoftPaginationItem expects label, maybe I handle dots logic elsewhere?
+    // Let's stick to simple window:
   }
-  
+
   // Re-implement simplified:
   const p = [];
   const total = last_page;
   if (total <= 7) {
-      for(let i=1; i<=total; i++) p.push(i);
+    for (let i = 1; i <= total; i++) p.push(i);
   } else {
-      p.push(1);
-      if (current_page > 3) p.push('...');
-      
-      let midStart = Math.max(2, current_page - 1);
-      let midEnd = Math.min(total - 1, current_page + 1);
-      
-      // pinned logic adjustment
-      if (current_page < 4) { midStart = 2; midEnd = 4; }
-      if (current_page > total - 3) { midStart = total - 3; midEnd = total - 1; }
-      
-      for(let i=midStart; i<=midEnd; i++) p.push(i);
-      
-      if (current_page < total - 2) p.push('...');
-      p.push(total);
+    p.push(1);
+    if (current_page > 3) p.push("...");
+
+    let midStart = Math.max(2, current_page - 1);
+    let midEnd = Math.min(total - 1, current_page + 1);
+
+    // pinned logic adjustment
+    if (current_page < 4) {
+      midStart = 2;
+      midEnd = 4;
+    }
+    if (current_page > total - 3) {
+      midStart = total - 3;
+      midEnd = total - 1;
+    }
+
+    for (let i = midStart; i <= midEnd; i++) p.push(i);
+
+    if (current_page < total - 2) p.push("...");
+    p.push(total);
   }
   return p;
 });

thanasoft-front/src/components/Organism/Invoice/InvoiceDetailPresentation.vue

@@ -23,7 +23,11 @@
       <div>
         <h6 class="mb-3 text-sm">Historique</h6>
         <div v-if="invoice.history && invoice.history.length > 0">
-          <div v-for="(entry, index) in invoice.history" :key="index" class="mb-2">
+          <div
+            v-for="(entry, index) in invoice.history"
+            :key="index"
+            class="mb-2"
+          >
             <span class="text-xs text-secondary">
               {{ formatDate(entry.changed_at) }}
             </span>
@@ -38,13 +42,15 @@
       <div>
         <h6 class="mb-3 text-sm">Informations Client</h6>
         <p class="text-sm mb-1">
-          <strong>{{ invoice.client ? invoice.client.name : 'Client inconnu' }}</strong>
+          <strong>{{
+            invoice.client ? invoice.client.name : "Client inconnu"
+          }}</strong>
         </p>
         <p class="text-xs text-secondary mb-1">
-          {{ invoice.client ? invoice.client.email : '' }}
+          {{ invoice.client ? invoice.client.email : "" }}
         </p>
         <p class="text-xs text-secondary mb-0">
-          {{ invoice.client ? invoice.client.phone : '' }}
+          {{ invoice.client ? invoice.client.phone : "" }}
         </p>
       </div>
     </template>
@@ -68,17 +74,20 @@
             {{ getStatusLabel(invoice.status) }}
             <i class="fas fa-chevron-down ms-2"></i>
           </soft-button>
-          <ul 
-            v-if="dropdownOpen" 
+          <ul
+            v-if="dropdownOpen"
             class="dropdown-menu show position-absolute"
-            style="top: 100%; left: 0; z-index: 1000;"
+            style="top: 100%; left: 0; z-index: 1000"
           >
             <li v-for="status in availableStatuses" :key="status">
               <a
                 class="dropdown-item"
                 :class="{ active: status === invoice.status }"
                 href="javascript:;"
-                @click="changeStatus(status); dropdownOpen = false;"
+                @click="
+                  changeStatus(status);
+                  dropdownOpen = false;
+                "
               >
                 {{ getStatusLabel(status) }}
               </a>
@@ -178,9 +187,9 @@ const changeStatus = async (newStatus) => {
 
     if (invoice.value?.id === currentInvoiceId) {
       invoice.value = updated;
-      
+
       notificationStore.success(
-        'Statut mis à jour',
+        "Statut mis à jour",
         `La facture est maintenant "${getStatusLabel(newStatus)}"`,
         3000
       );
@@ -188,8 +197,8 @@ const changeStatus = async (newStatus) => {
   } catch (e) {
     console.error("Failed to update status", e);
     notificationStore.error(
-      'Erreur',
-      'Impossible de mettre à jour le statut',
+      "Erreur",
+      "Impossible de mettre à jour le statut",
       3000
     );
   } finally {

thanasoft-front/src/components/Organism/Planning/PlanningNewRequestModal.vue

@@ -0,0 +1,96 @@
+<template>
+  <div>
+    <div
+      class="modal fade"
+      :class="{ show: show, 'd-block': show }"
+      tabindex="-1"
+      role="dialog"
+      aria-labelledby="planningNewRequestModalLabel"
+      :aria-hidden="!show"
+    >
+      <div class="modal-dialog modal-dialog-centered" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 id="planningNewRequestModalLabel" class="modal-title">Nouvelle demande</h5>
+            <button type="button" class="btn-close" aria-label="Close" @click="$emit('close')"></button>
+          </div>
+
+          <div class="modal-body">
+            <p v-if="!creationType" class="text-sm text-muted mb-3">Choisissez le type à créer :</p>
+            <p v-else class="text-sm text-muted mb-3">{{ creationTypeTitle }}</p>
+
+            <planning-creation-type-selector
+              v-if="!creationType"
+              @select-type="$emit('select-type', $event)"
+            />
+
+            <planning-leave-request-form
+              v-else-if="creationType === 'leave'"
+              :form="leaveForm"
+              :collaborators="collaborators"
+              @update:form="$emit('update:leave-form', $event)"
+              @submit="$emit('submit-leave')"
+              @back="$emit('reset-type')"
+            />
+
+            <planning-event-form
+              v-else-if="creationType === 'event'"
+              :form="eventForm"
+              @update:form="$emit('update:event-form', $event)"
+              @submit="$emit('submit-event')"
+              @back="$emit('reset-type')"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="show" class="modal-backdrop fade show" @click="$emit('close')"></div>
+  </div>
+</template>
+
+<script setup>
+import PlanningCreationTypeSelector from "@/components/molecules/Planning/PlanningCreationTypeSelector.vue";
+import PlanningLeaveRequestForm from "@/components/molecules/Planning/PlanningLeaveRequestForm.vue";
+import PlanningEventForm from "@/components/molecules/Planning/PlanningEventForm.vue";
+
+import { defineProps, defineEmits } from "vue";
+
+defineProps({
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  creationType: {
+    type: String,
+    default: "",
+  },
+  creationTypeTitle: {
+    type: String,
+    default: "Nouvelle demande",
+  },
+  collaborators: {
+    type: Array,
+    default: () => [],
+  },
+  leaveForm: {
+    type: Object,
+    required: true,
+  },
+  eventForm: {
+    type: Object,
+    required: true,
+  },
+});
+
+defineEmits([
+  "close",
+  "select-type",
+  "reset-type",
+  "submit-leave",
+  "submit-event",
+  "update:leave-form",
+  "update:event-form",
+]);
+</script>
+

thanasoft-front/src/components/Organism/Planning/PlanningPresentation.vue

@@ -1,31 +1,41 @@
 <template>
   <planning-template>
     <template #header>
-      <div class="d-flex flex-column gap-3">
-        <div>
-          <h1 class="display-4 font-bold bg-gradient-indigo-text mb-1">Planning</h1>
-          <p class="text-sm text-secondary">{{ interventionCount }} intervention(s) (mes tâches)</p>
-        </div>
-        <!-- Date Navigator Mobile Position could go here if needed, but keeping simple for now -->
+      <div class="d-flex align-items-center gap-2">
+        <p class="text-sm text-secondary mb-0">
+          {{ interventionCount }} intervention(s) (mes tâches)
+        </p>
       </div>
-      <div class="d-flex flex-column flex-md-row gap-3 w-100 w-md-auto align-items-center">
+      <div
+        class="d-flex flex-column flex-md-row gap-2 w-100 w-md-auto align-items-center justify-content-md-end"
+      >
         <!-- Date Navigator -->
-        <planning-date-navigator 
+        <planning-date-navigator
           :current-date="currentDate"
           @prev-week="$emit('prev-week')"
           @next-week="$emit('next-week')"
         />
-        
-        <div class="d-flex gap-2">
-          <planning-action-button variant="secondary" size="sm" @click="$emit('refresh')">
-            <template #icon><i class="fas fa-sync-alt"></i></template>
+
+        <div class="d-flex gap-2 flex-wrap justify-content-end">
+          <soft-button
+            color="secondary"
+            variant="outline"
+            size="sm"
+            @click="$emit('refresh')"
+          >
+            <i class="fas fa-sync-alt me-1"></i>
             <span class="d-none d-lg-inline">Actualiser</span>
-          </planning-action-button>
-          <planning-action-button variant="primary" size="sm" @click="$emit('new-request')">
-            <template #icon><i class="fas fa-plus"></i></template>
+          </soft-button>
+          <soft-button
+            color="info"
+            variant="gradient"
+            size="sm"
+            @click="$emit('new-request')"
+          >
+            <i class="fas fa-plus me-1"></i>
             <span class="d-none d-lg-inline">Nouvelle demande</span>
             <span class="d-lg-none">Nouveau</span>
-          </planning-action-button>
+          </soft-button>
         </div>
       </div>
     </template>
@@ -48,22 +58,22 @@
 
     <template #calendar-grid>
       <!-- Grille View -->
-      <planning-week-grid 
+      <planning-week-grid
         v-if="localActiveView === 'grille'"
-        :start-date="currentDate" 
+        :start-date="currentDate"
         :interventions="interventions"
         @cell-click="handleCellClick"
       />
-      
+
       <!-- List View -->
-      <planning-list 
+      <planning-list
         v-if="localActiveView === 'liste'"
         :interventions="interventions"
         @edit="handleEdit"
       />
-      
+
       <!-- Kanban View -->
-      <planning-kanban 
+      <planning-kanban
         v-if="localActiveView === 'kanban'"
         :interventions="interventions"
         @edit="handleEdit"
@@ -76,7 +86,6 @@
 <script setup>
 import { ref, watch, defineProps, defineEmits } from "vue";
 import PlanningTemplate from "@/components/templates/Planning/PlanningTemplate.vue";
-import PlanningActionButton from "@/components/atoms/Planning/PlanningActionButton.vue";
 import PlanningViewToggles from "@/components/molecules/Planning/PlanningViewToggles.vue";
 import PlanningLegend from "@/components/molecules/Planning/PlanningLegend.vue";
 import PlanningCollaboratorsSidebar from "@/components/molecules/Planning/PlanningCollaboratorsSidebar.vue";
@@ -84,50 +93,57 @@ import PlanningWeekGrid from "@/components/molecules/Planning/PlanningWeekGrid.v
 import PlanningList from "@/components/molecules/Planning/PlanningList.vue";
 import PlanningKanban from "@/components/molecules/Planning/PlanningKanban.vue";
 import PlanningDateNavigator from "@/components/molecules/Planning/PlanningDateNavigator.vue";
+import SoftButton from "@/components/SoftButton.vue";
 
 const props = defineProps({
   interventionCount: {
     type: Number,
-    default: 0
+    default: 0,
   },
   collaborators: {
     type: Array,
-    default: () => []
+    default: () => [],
   },
   interventions: {
     type: Array,
-    default: () => []
+    default: () => [],
   },
   currentDate: {
     type: Date,
-    default: () => new Date()
+    default: () => new Date(),
   },
   activeView: {
     type: String,
-    default: "grille"
-  }
+    default: "grille",
+  },
 });
 
 const emit = defineEmits([
-  "refresh", 
-  "new-request", 
-  "cell-click", 
-  "update:activeView", 
-  "prev-week", 
+  "refresh",
+  "new-request",
+  "cell-click",
+  "update:activeView",
+  "prev-week",
   "next-week",
   "edit-intervention",
-  "update-status"
+  "update-status",
 ]);
 
 const localActiveView = ref(props.activeView);
 
-watch(() => props.activeView, (newVal) => {
-  localActiveView.value = newVal;
-});
+watch(
+  () => props.activeView,
+  (newVal) => {
+    localActiveView.value = newVal;
+  }
+);
 
-watch(() => localActiveView.value, (newVal) => {
-  emit("update:activeView", newVal);
-});
+watch(
+  () => localActiveView.value,
+  (newVal) => {
+    emit("update:activeView", newVal);
+  }
+);
 
 const handleCellClick = (info) => {
   emit("cell-click", info);
@@ -143,28 +159,6 @@ const handleUpdateStatus = (payload) => {
 </script>
 
 <style scoped>
-.font-bold {
-  font-weight: 700;
-}
-
-.bg-gradient-indigo-text {
-  background: linear-gradient(to right, #2563eb, #4f46e5, #9333ea);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  color: transparent;
-}
-
-.display-4 {
-  font-size: 2.5rem;
-}
-
-@media (max-width: 767.98px) {
-  .display-4 {
-    font-size: 1.875rem;
-  }
-}
-
 .text-secondary {
   color: #64748b !important;
 }

thanasoft-front/src/components/Organism/Quote/QuoteDetailPresentation.vue

@@ -51,17 +51,20 @@
             {{ getStatusLabel(quote.status) }}
             <i class="fas fa-chevron-down ms-2"></i>
           </soft-button>
-          <ul 
-            v-if="dropdownOpen" 
+          <ul
+            v-if="dropdownOpen"
             class="dropdown-menu show position-absolute"
-            style="top: 100%; left: 0; z-index: 1000;"
+            style="top: 100%; left: 0; z-index: 1000"
           >
             <li v-for="status in availableStatuses" :key="status">
               <a
                 class="dropdown-item"
                 :class="{ active: status === quote.status }"
                 href="javascript:;"
-                @click="changeStatus(status); dropdownOpen = false;"
+                @click="
+                  changeStatus(status);
+                  dropdownOpen = false;
+                "
               >
                 {{ getStatusLabel(status) }}
               </a>
@@ -161,10 +164,10 @@ const changeStatus = async (newStatus) => {
     // Only update if we're still viewing the same quote
     if (quote.value?.id === currentQuoteId) {
       quote.value = updated;
-      
+
       // Show success notification
       notificationStore.success(
-        'Statut mis à jour',
+        "Statut mis à jour",
         `Le devis est maintenant "${getStatusLabel(newStatus)}"`,
         3000
       );
@@ -172,12 +175,12 @@ const changeStatus = async (newStatus) => {
   } catch (e) {
     console.error("Failed to update status", e);
     notificationStore.error(
-      'Erreur',
-      'Impossible de mettre à jour le statut',
+      "Erreur",
+      "Impossible de mettre à jour le statut",
       3000
     );
   } finally {
     loading.value = false;
   }
 };
-</script>
+</script>

thanasoft-front/src/components/Organism/Statistics/StatisticsPresentation.vue

@@ -113,9 +113,7 @@ const practitioners = ref([
 const applyFilter = (filterData) => {
   filterStartDate.value = filterData.startDate;
   filterEndDate.value = filterData.endDate;
-  alert(
-    `Filtre appliqué: ${filterData.startDate} à ${filterData.endDate}`
-  );
+  alert(`Filtre appliqué: ${filterData.startDate} à ${filterData.endDate}`);
 };
 
 const exportPDF = () => {

thanasoft-front/src/components/Organism/Stock/GoodsReceiptListPresentation.vue

@@ -3,7 +3,9 @@
     <div class="d-sm-flex justify-content-between mb-4">
       <div>
         <h5 class="mb-0">Réceptions de Marchandises</h5>
-        <p class="text-sm mb-0">Gestion des réceptions de marchandises en provenance des fournisseurs.</p>
+        <p class="text-sm mb-0">
+          Gestion des réceptions de marchandises en provenance des fournisseurs.
+        </p>
       </div>
       <div class="mt-sm-0 mt-3">
         <soft-button color="info" variant="gradient" @click="handleCreate">
@@ -17,16 +19,20 @@
       <div class="col-md-3">
         <div class="form-group">
           <input
+            v-model="searchQuery"
             type="text"
             class="form-control"
             placeholder="Rechercher..."
-            v-model="searchQuery"
             @input="handleSearch"
           />
         </div>
       </div>
       <div class="col-md-3">
-        <select class="form-control" v-model="statusFilter" @change="handleFilter">
+        <select
+          v-model="statusFilter"
+          class="form-control"
+          @change="handleFilter"
+        >
           <option value="">Tous les statuts</option>
           <option value="draft">Brouillon</option>
           <option value="posted">Validée</option>
@@ -37,7 +43,7 @@
     <div class="row">
       <div class="col-12">
         <goods-receipt-table
-          :data="goodsReceipts"
+          :data="receipts"
           :loading="loading"
           @view="handleView"
           @edit="handleEdit"
@@ -54,11 +60,11 @@ import { storeToRefs } from "pinia";
 import { useRouter } from "vue-router";
 import GoodsReceiptTable from "@/components/molecules/Tables/Stock/GoodsReceiptTable.vue";
 import SoftButton from "@/components/SoftButton.vue";
-import { useGoodsReceiptStore } from "@/stores/goodsReceiptStore";
+import { useReceiptStore } from "@/stores/receiptStore";
 
 const router = useRouter();
-const goodsReceiptStore = useGoodsReceiptStore();
-const { goodsReceipts, loading } = storeToRefs(goodsReceiptStore);
+const receiptStore = useReceiptStore();
+const { receipts, loading } = storeToRefs(receiptStore);
 
 const searchQuery = ref("");
 const statusFilter = ref("");
@@ -78,9 +84,13 @@ const handleEdit = (id) => {
 };
 
 const handleDelete = async (id) => {
-  if (confirm("Êtes-vous sûr de vouloir supprimer cette réception de marchandise ?")) {
+  if (
+    confirm(
+      "Êtes-vous sûr de vouloir supprimer cette réception de marchandise ?"
+    )
+  ) {
     try {
-      await goodsReceiptStore.deleteGoodsReceipt(id);
+      await receiptStore.deleteReceipt(id);
     } catch (error) {
       console.error("Failed to delete goods receipt", error);
     }
@@ -103,7 +113,7 @@ const loadGoodsReceipts = () => {
     search: searchQuery.value || undefined,
     status: statusFilter.value || undefined,
   };
-  goodsReceiptStore.fetchGoodsReceipts(params);
+  receiptStore.fetchReceipts(params);
 };
 
 onMounted(() => {

thanasoft-front/src/components/Organism/Stock/NewReceptionPresentation.vue

@@ -17,10 +17,10 @@
             </div>
           </div>
           <div class="card-body p-3">
-            <new-reception-form 
-              :loading="loading" 
+            <new-reception-form
+              :loading="loading"
               :purchase-orders="purchaseOrders"
-              @submit="handleSubmit" 
+              @submit="handleSubmit"
               @cancel="goBack"
             />
           </div>

thanasoft-front/src/components/Organism/Stock/ReceptionDetailPresentation.vue

@@ -1,169 +1,267 @@
 <template>
-  <div class="container-fluid py-4" v-if="goodsReceipt">
-    <div class="d-sm-flex justify-content-between mb-4">
-      <div>
-        <h5 class="mb-0">Réception de Marchandise: {{ goodsReceipt.receipt_number }}</h5>
-        <p class="text-sm mb-0">
-          Créée le {{ formatDate(goodsReceipt.created_at) }} - 
-          <soft-badge :color="getStatusColor(goodsReceipt.status)" variant="gradient">
-            {{ getStatusLabel(goodsReceipt.status) }}
-          </soft-badge>
-        </p>
-      </div>
-      <div class="mt-sm-0 mt-3">
-        <soft-button color="secondary" variant="gradient" class="me-2" @click="handleBack">
-          <i class="fas fa-arrow-left me-2"></i> Retour
-        </soft-button>
-        <soft-button color="info" variant="gradient" class="me-2" @click="handleEdit">
-          <i class="fas fa-edit me-2"></i> Modifier
-        </soft-button>
-        <soft-button color="danger" variant="gradient" @click="handleDelete">
-          <i class="fas fa-trash me-2"></i> Supprimer
-        </soft-button>
-      </div>
-    </div>
-
-    <div class="row">
-      <div class="col-md-4">
-        <div class="card">
-          <div class="card-header pb-0">
-            <h6>Informations Générales</h6>
-          </div>
-          <div class="card-body">
-            <div class="mb-3">
-              <label class="text-xs font-weight-bold">Numéro de Réception</label>
-              <p class="text-sm">{{ goodsReceipt.receipt_number }}</p>
-            </div>
-            <div class="mb-3">
-              <label class="text-xs font-weight-bold">Date de Réception</label>
-              <p class="text-sm">{{ formatDate(goodsReceipt.receipt_date) }}</p>
-            </div>
-            <div class="mb-3">
-              <label class="text-xs font-weight-bold">Commande Fournisseur</label>
-              <p class="text-sm">
-                {{ goodsReceipt.purchase_order?.po_number || goodsReceipt.purchase_order_id }}
-              </p>
-            </div>
-            <div class="mb-3">
-              <label class="text-xs font-weight-bold">Entrepôt de Destination</label>
-              <p class="text-sm">{{ goodsReceipt.warehouse?.name || '-' }}</p>
-            </div>
-            <div class="mb-3">
-              <label class="text-xs font-weight-bold">Notes</label>
-              <p class="text-sm">{{ goodsReceipt.notes || 'Aucune note' }}</p>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="col-md-8">
-        <div class="card">
-          <div class="card-header pb-0">
-            <h6>Lignes de Réception</h6>
-          </div>
-          <div class="card-body">
-            <div class="table-responsive">
-              <table class="table table-flush">
-                <thead class="thead-light">
-                  <tr>
-                    <th>Produit</th>
-                    <th>Conditionnement</th>
-                    <th>Colis</th>
-                    <th>Unités</th>
-                    <th>Prix Unitaire</th>
-                    <th>TVA</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr v-for="line in goodsReceipt.lines" :key="line.id">
-                    <td>
-                      <div class="d-flex align-items-center">
-                        <div>
-                          <p class="text-xs font-weight-bold mb-0">
-                            {{ line.product?.nom || 'Produit ' + line.product_id }}
-                          </p>
-                          <p class="text-xs text-secondary mb-0">
-                            {{ line.product?.reference || '' }}
-                          </p>
-                        </div>
-                      </div>
-                    </td>
-                    <td class="text-xs">
-                      {{ line.packaging?.name || 'Unité' }}
-                    </td>
-                    <td class="text-xs">
-                      {{ line.packages_qty_received || '-' }}
-                    </td>
-                    <td class="text-xs">
-                      {{ line.units_qty_received || '-' }}
-                    </td>
-                    <td class="text-xs">
-                      {{ line.unit_price ? formatCurrency(line.unit_price) : '-' }}
-                    </td>
-                    <td class="text-xs">
-                      {{ line.tva_rate ? line.tva_rate.name + ' (' + line.tva_rate.rate + '%)' : '-' }}
-                    </td>
-                  </tr>
-                  <tr v-if="!goodsReceipt.lines || goodsReceipt.lines.length === 0">
-                    <td colspan="6" class="text-center text-muted py-4">
-                      Aucune ligne dans cette réception.
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-      </div>
+  <div v-if="loading" class="text-center py-5">
+    <div class="spinner-border text-primary" role="status">
+      <span class="visually-hidden">Loading...</span>
     </div>
   </div>
-  <div v-else class="container-fluid py-4">
-    <div class="d-flex justify-content-center">
-      <div class="spinner-border" role="status">
-        <span class="visually-hidden">Chargement...</span>
+
+  <div v-else-if="error" class="text-center py-5 text-danger">
+    {{ error }}
+  </div>
+
+  <div v-else-if="goodsReceipt" class="container-fluid py-4">
+    <div class="odoo-toolbar">
+      <div class="statusbar-wrapper">
+        <button
+          v-for="status in availableStatuses"
+          :key="status"
+          type="button"
+          class="status-step"
+          :class="{ active: status === goodsReceipt.status }"
+          :disabled="true"
+        >
+          <i :class="getStatusIcon(status)"></i>
+          <span>{{ getStatusLabel(status) }}</span>
+        </button>
+      </div>
+
+      <div class="toolbar-right">
+        <soft-button
+          color="success"
+          variant="outline"
+          class="btn-toolbar btn-sm"
+          :disabled="!canValidate || isUpdatingStatus"
+          @click="handleValidate"
+        >
+          <i class="fas fa-check me-2"></i>
+          Valider réception
+        </soft-button>
+
+        <soft-button
+          color="warning"
+          variant="outline"
+          class="btn-toolbar btn-sm"
+          :disabled="!canSetDraft || isUpdatingStatus"
+          @click="handleSetDraft"
+        >
+          <i class="fas fa-undo me-2"></i>
+          Remettre en brouillon
+        </soft-button>
+
+        <soft-button
+          color="secondary"
+          variant="outline"
+          class="btn-toolbar btn-sm"
+          @click="handleBack"
+        >
+          <i class="fas fa-arrow-left me-2"></i>
+          Retour
+        </soft-button>
+
+        <soft-button
+          color="info"
+          variant="outline"
+          class="btn-toolbar btn-sm"
+          @click="handleEdit"
+        >
+          <i class="fas fa-edit me-2"></i>
+          Modifier
+        </soft-button>
+
+        <soft-button
+          color="danger"
+          variant="outline"
+          class="btn-toolbar btn-sm"
+          :disabled="isUpdatingStatus"
+          @click="handleDelete"
+        >
+          <i class="fas fa-trash me-2"></i>
+          Supprimer
+        </soft-button>
+      </div>
+    </div>
+
+    <div class="commande-detail mt-3">
+      <div class="form-section">
+        <div class="section-title">
+          <i class="fas fa-truck-loading"></i>
+          Informations générales
+        </div>
+
+        <div class="row g-3 mb-3">
+          <div class="col-md-4">
+            <label class="form-label">Numéro réception</label>
+            <div class="info-value">{{ goodsReceipt.receipt_number }}</div>
+          </div>
+          <div class="col-md-4">
+            <label class="form-label">Date réception</label>
+            <div class="info-value">{{ formatDate(goodsReceipt.receipt_date) }}</div>
+          </div>
+          <div class="col-md-4">
+            <label class="form-label">Statut</label>
+            <div class="status-badge" :class="getStatusClass(goodsReceipt.status)">
+              <i :class="getStatusIcon(goodsReceipt.status)"></i>
+              {{ getStatusLabel(goodsReceipt.status) }}
+            </div>
+          </div>
+        </div>
+
+        <div class="row g-3">
+          <div class="col-md-6">
+            <label class="form-label">Commande fournisseur</label>
+            <div class="info-value">
+              {{ goodsReceipt.purchase_order?.po_number || goodsReceipt.purchase_order_id }}
+            </div>
+          </div>
+          <div class="col-md-6">
+            <label class="form-label">Entrepôt</label>
+            <div class="info-value">{{ goodsReceipt.warehouse?.name || "-" }}</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="form-section">
+        <div class="section-title">
+          <i class="fas fa-boxes"></i>
+          Lignes de réception
+        </div>
+
+        <div class="table-responsive">
+          <table class="table table-flush">
+            <thead class="thead-light">
+              <tr>
+                <th>Produit</th>
+                <th>Conditionnement</th>
+                <th>Colis</th>
+                <th>Unités</th>
+                <th>Prix Unitaire</th>
+                <th>TVA</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="line in receiptLines" :key="line.id">
+                <td>
+                  <div class="d-flex flex-column">
+                    <span class="text-sm fw-bold">{{ line.product?.nom || `Produit #${line.product_id}` }}</span>
+                    <span class="text-xs text-secondary">{{ line.product?.reference || "-" }}</span>
+                  </div>
+                </td>
+                <td class="text-sm">{{ line.packaging?.name || "Unité" }}</td>
+                <td class="text-sm">{{ line.packages_qty_received || "-" }}</td>
+                <td class="text-sm">{{ line.units_qty_received || "-" }}</td>
+                <td class="text-sm">{{ line.unit_price ? formatCurrency(line.unit_price) : "-" }}</td>
+                <td class="text-sm">
+                  {{ line.tva_rate ? `${line.tva_rate.name} (${line.tva_rate.rate}%)` : "-" }}
+                </td>
+              </tr>
+              <tr v-if="receiptLines.length === 0">
+                <td colspan="6" class="text-center text-muted py-4">
+                  Aucune ligne dans cette réception.
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { onMounted, computed } from "vue";
+import { computed, onMounted, ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { storeToRefs } from "pinia";
-import SoftBadge from "@/components/SoftBadge.vue";
+import SoftButton from "@/components/SoftButton.vue";
 import { useGoodsReceiptStore } from "@/stores/goodsReceiptStore";
 
 const route = useRoute();
 const router = useRouter();
 const goodsReceiptStore = useGoodsReceiptStore();
-const { currentGoodsReceipt: goodsReceipt, loading } = storeToRefs(goodsReceiptStore);
+
+const { currentGoodsReceipt: goodsReceipt, loading, error } = storeToRefs(goodsReceiptStore);
+
+const isUpdatingStatus = ref(false);
+
+const availableStatuses = ["draft", "posted"];
+
+const canValidate = computed(() => goodsReceipt.value?.status === "draft");
+const canSetDraft = computed(() => goodsReceipt.value?.status === "posted");
+const receiptLines = computed(() => {
+  const lines = goodsReceipt.value?.lines;
+  if (Array.isArray(lines)) {
+    return lines;
+  }
+  if (lines && Array.isArray(lines.data)) {
+    return lines.data;
+  }
+  return [];
+});
 
 const formatDate = (dateString) => {
-  if (!dateString) return '-';
-  const date = new Date(dateString);
-  return date.toLocaleDateString('fr-FR');
+  if (!dateString) return "-";
+  return new Date(dateString).toLocaleDateString("fr-FR", {
+    day: "numeric",
+    month: "long",
+    year: "numeric",
+  });
 };
 
 const formatCurrency = (value) => {
-  return new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(value);
-};
-
-const getStatusColor = (status) => {
-  switch (status) {
-    case 'draft': return 'secondary';
-    case 'posted': return 'success';
-    default: return 'info';
-  }
+  return new Intl.NumberFormat("fr-FR", {
+    style: "currency",
+    currency: "EUR",
+  }).format(value || 0);
 };
 
 const getStatusLabel = (status) => {
-  switch (status) {
-    case 'draft': return 'Brouillon';
-    case 'posted': return 'Validée';
-    default: return status;
+  const labels = {
+    draft: "Brouillon",
+    posted: "Validée",
+  };
+  return labels[status] || status;
+};
+
+const getStatusIcon = (status) => {
+  const icons = {
+    draft: "fas fa-file-alt",
+    posted: "fas fa-check-circle",
+  };
+  return icons[status] || "fas fa-question-circle";
+};
+
+const getStatusClass = (status) => {
+  const classes = {
+    draft: "status-draft",
+    posted: "status-confirmed",
+  };
+  return classes[status] || "";
+};
+
+const changeStatus = async (newStatus) => {
+  if (!goodsReceipt.value || goodsReceipt.value.status === newStatus) return;
+
+  try {
+    isUpdatingStatus.value = true;
+    await goodsReceiptStore.updateGoodsReceipt({
+      id: goodsReceipt.value.id,
+      status: newStatus,
+    });
+    await goodsReceiptStore.fetchGoodsReceipt(parseInt(route.params.id));
+  } catch (e) {
+    console.error("Failed to update receipt status", e);
+  } finally {
+    isUpdatingStatus.value = false;
   }
 };
 
+const handleValidate = async () => {
+  await changeStatus("posted");
+};
+
+const handleSetDraft = async () => {
+  await changeStatus("draft");
+};
+
 const handleBack = () => {
   router.push("/stock/receptions");
 };
@@ -173,13 +271,14 @@ const handleEdit = () => {
 };
 
 const handleDelete = async () => {
-  if (confirm("Êtes-vous sûr de vouloir supprimer cette réception de marchandise ?")) {
-    try {
-      await goodsReceiptStore.deleteGoodsReceipt(parseInt(route.params.id));
-      router.push("/stock/receptions");
-    } catch (error) {
-      console.error("Failed to delete goods receipt", error);
-    }
+  if (!confirm("Êtes-vous sûr de vouloir supprimer cette réception de marchandise ?")) {
+    return;
+  }
+  try {
+    await goodsReceiptStore.deleteGoodsReceipt(parseInt(route.params.id));
+    router.push("/stock/receptions");
+  } catch (e) {
+    console.error("Failed to delete goods receipt", e);
   }
 };
 
@@ -187,3 +286,99 @@ onMounted(async () => {
   await goodsReceiptStore.fetchGoodsReceipt(parseInt(route.params.id));
 });
 </script>
+
+<style scoped>
+.odoo-toolbar {
+  background: #fff;
+  border: 1px solid #e9ecef;
+  border-radius: 12px;
+  padding: 1rem;
+  margin-bottom: 1.25rem;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.statusbar-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.status-step {
+  border: 1px solid #dfe3e8;
+  background: #f8f9fa;
+  color: #67748e;
+  border-radius: 10px;
+  padding: 0.45rem 0.75rem;
+  font-size: 0.8rem;
+  font-weight: 600;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+}
+
+.status-step.active {
+  background: #2dce89;
+  border-color: #2dce89;
+  color: #fff;
+}
+
+.toolbar-right {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.commande-detail {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.form-section {
+  background: #fff;
+  border: 1px solid #e9ecef;
+  border-radius: 12px;
+  padding: 1.25rem;
+  margin-bottom: 1rem;
+}
+
+.section-title {
+  font-weight: 700;
+  color: #344767;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.info-value {
+  font-weight: 600;
+  color: #344767;
+}
+
+.status-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  border-radius: 999px;
+  padding: 0.25rem 0.65rem;
+  font-size: 0.75rem;
+  font-weight: 700;
+}
+
+.status-draft {
+  background: #e9ecef;
+  color: #495057;
+}
+
+.status-confirmed {
+  background: #d1f7e3;
+  color: #0a7a43;
+}
+</style>

thanasoft-front/src/components/Organism/Stock/WarehouseDetailPresentation.vue

@@ -1,38 +1,423 @@
 <template>
-  <div v-if="loading" class="text-center py-5">
-    <div class="spinner-border text-primary" role="status">
-      <span class="visually-hidden">Loading...</span>
-    </div>
-  </div>
-  <div v-else-if="error" class="text-center py-5 text-danger">
-    {{ error }}
-  </div>
-  <div v-else-if="warehouse" class="container-fluid py-4">
+  <div class="py-4 container-fluid">
     <div class="row">
-      <div class="col-lg-8 mx-auto">
-        <div class="card mb-4">
-          <div class="card-header pb-0 p-3">
-            <div class="row">
-              <div class="col-md-8 d-flex align-items-center">
-                <h6 class="mb-0">Détails de l'entrepôt: {{ warehouse.name }}</h6>
+      <div class="col-lg-6">
+        <h4>
+          {{ isEditMode ? "Modifier l'entrepôt" : "Détails de l'entrepôt" }}
+        </h4>
+        <p>
+          {{
+            isEditMode
+              ? "Modifiez les informations de l'entrepôt ci-dessous."
+              : "Informations détaillées, produits stockés et mouvements."
+          }}
+        </p>
+      </div>
+      <div
+        class="text-right col-lg-6 d-flex flex-column justify-content-center"
+      >
+        <div class="w-100 mt-lg-0">
+          <div v-if="!isEditMode" class="d-flex align-items-center gap-2 w-100">
+            <div class="flex-grow-1 d-flex justify-content-center">
+              <button
+                type="button"
+                class="btn btn-outline-secondary btn-sm"
+                @click="handleBack"
+              >
+                <i class="fas fa-arrow-left me-2"></i>
+                Retour à la liste
+              </button>
+            </div>
+
+            <div class="d-flex gap-2 ms-auto">
+              <button
+                type="button"
+                class="mt-2 mb-0 btn bg-gradient-info"
+                @click="toggleEditMode"
+              >
+                <i class="fas fa-edit me-2"></i>
+                Modifier
+              </button>
+              <button
+                type="button"
+                class="mt-2 mb-0 btn bg-gradient-danger"
+                :disabled="deleting"
+                @click="handleDelete"
+              >
+                <i class="fas fa-trash me-2"></i>
+                Supprimer
+              </button>
+            </div>
+          </div>
+
+          <div v-else class="d-flex gap-2 justify-content-end">
+            <button
+              type="button"
+              class="mt-2 mb-0 btn bg-gradient-secondary"
+              @click="cancelEdit"
+            >
+              Annuler
+            </button>
+            <button
+              type="button"
+              class="mt-2 mb-0 btn bg-gradient-success"
+              :disabled="saving"
+              @click="saveWarehouse"
+            >
+              <i v-if="saving" class="fas fa-spinner fa-spin me-2"></i>
+              <i v-else class="fas fa-save me-2"></i>
+              Sauvegarder
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="loading" class="loading-container">
+      <div class="loading-spinner">
+        <i class="fas fa-spinner fa-spin fa-2x"></i>
+        <p>Chargement des informations de l'entrepôt...</p>
+      </div>
+    </div>
+
+    <div v-else-if="error" class="error-container">
+      <div class="error-message">
+        <i class="fas fa-exclamation-triangle fa-2x text-danger mb-3"></i>
+        <h5>Erreur de chargement</h5>
+        <p>{{ error }}</p>
+        <button
+          type="button"
+          class="btn btn-outline-primary btn-sm"
+          @click="loadWarehouseData"
+        >
+          Réessayer
+        </button>
+      </div>
+    </div>
+
+    <div v-else-if="warehouse" class="warehouse-details-content mt-3">
+      <div class="row g-4">
+        <div class="col-xl-3 col-lg-4">
+          <div class="card warehouse-side-nav-card">
+            <div class="card-body pb-2">
+              <div class="warehouse-sidebar-profile">
+                <div class="warehouse-sidebar-icon">
+                  <i class="fas fa-warehouse"></i>
+                </div>
+                <h6 class="warehouse-sidebar-title text-center mb-1">
+                  {{ warehouse.name }}
+                </h6>
+                <p class="warehouse-sidebar-reference text-center mb-0">
+                  {{ warehouse.city || "Ville non renseignée" }}
+                </p>
+                <div class="warehouse-sidebar-badges mt-3">
+                  <span class="badge bg-primary">{{
+                    warehouse.country_code || "--"
+                  }}</span>
+                  <span class="badge bg-info text-dark"
+                    >{{ warehouseProducts.length }} produits</span
+                  >
+                </div>
               </div>
-              <div class="col-md-4 text-end">
-                <soft-button color="info" variant="outline" size="sm" @click="handleEdit">
-                  <i class="fas fa-user-edit me-2"></i> Modifier
-                </soft-button>
+            </div>
+
+            <hr class="horizontal dark my-2 mx-3" />
+
+            <div class="card-body pt-2">
+              <ul class="nav nav-pills flex-column warehouse-nav">
+                <li class="nav-item">
+                  <a
+                    class="nav-link"
+                    :class="{ active: activeTab === 'details' }"
+                    href="javascript:;"
+                    @click="activeTab = 'details'"
+                  >
+                    <i class="fas fa-info-circle me-2"></i>
+                    <span class="text-sm">Informations</span>
+                  </a>
+                </li>
+                <li class="nav-item pt-2">
+                  <a
+                    class="nav-link"
+                    :class="{ active: activeTab === 'products' }"
+                    href="javascript:;"
+                    @click="activeTab = 'products'"
+                  >
+                    <i class="fas fa-boxes me-2"></i>
+                    <span class="text-sm">Produits</span>
+                  </a>
+                </li>
+                <li class="nav-item pt-2">
+                  <a
+                    class="nav-link"
+                    :class="{ active: activeTab === 'movements' }"
+                    href="javascript:;"
+                    @click="activeTab = 'movements'"
+                  >
+                    <i class="fas fa-exchange-alt me-2"></i>
+                    <span class="text-sm">Mouvements</span>
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+
+        <div class="col-xl-9 col-lg-8">
+          <div v-show="activeTab === 'details'">
+            <div class="card">
+              <div class="card-header bg-gradient-primary text-white">
+                <h5 class="mb-0">Informations de l'entrepôt</h5>
+              </div>
+              <div class="card-body">
+                <div class="row">
+                  <div class="col-md-6">
+                    <label>Nom de l'entrepôt *</label>
+                    <input
+                      v-if="isEditMode"
+                      v-model="formData.name"
+                      class="form-control"
+                      type="text"
+                      placeholder="Nom de l'entrepôt"
+                    />
+                    <p v-else class="form-control-static">
+                      {{ warehouse.name }}
+                    </p>
+                  </div>
+                  <div class="col-md-6">
+                    <label>Pays</label>
+                    <input
+                      v-if="isEditMode"
+                      v-model="formData.country_code"
+                      class="form-control"
+                      type="text"
+                      maxlength="2"
+                      placeholder="FR"
+                    />
+                    <p v-else class="form-control-static">
+                      {{ warehouse.country_code || "-" }}
+                    </p>
+                  </div>
+                </div>
+
+                <div class="row mt-3">
+                  <div class="col-md-6">
+                    <label>Adresse 1</label>
+                    <input
+                      v-if="isEditMode"
+                      v-model="formData.address_line1"
+                      class="form-control"
+                      type="text"
+                      placeholder="Adresse ligne 1"
+                    />
+                    <p v-else class="form-control-static">
+                      {{ warehouse.address_line1 || "-" }}
+                    </p>
+                  </div>
+                  <div class="col-md-6">
+                    <label>Adresse 2</label>
+                    <input
+                      v-if="isEditMode"
+                      v-model="formData.address_line2"
+                      class="form-control"
+                      type="text"
+                      placeholder="Adresse ligne 2"
+                    />
+                    <p v-else class="form-control-static">
+                      {{ warehouse.address_line2 || "-" }}
+                    </p>
+                  </div>
+                </div>
+
+                <div class="row mt-3">
+                  <div class="col-md-6">
+                    <label>Code postal</label>
+                    <input
+                      v-if="isEditMode"
+                      v-model="formData.postal_code"
+                      class="form-control"
+                      type="text"
+                      placeholder="Code postal"
+                    />
+                    <p v-else class="form-control-static">
+                      {{ warehouse.postal_code || "-" }}
+                    </p>
+                  </div>
+                  <div class="col-md-6">
+                    <label>Ville</label>
+                    <input
+                      v-if="isEditMode"
+                      v-model="formData.city"
+                      class="form-control"
+                      type="text"
+                      placeholder="Ville"
+                    />
+                    <p v-else class="form-control-static">
+                      {{ warehouse.city || "-" }}
+                    </p>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
-          <div class="card-body p-3">
-            <warehouse-detail-info :warehouse="warehouse" />
-            <hr class="horizontal dark my-4" />
-            <div class="d-flex justify-content-between">
-              <soft-button color="secondary" variant="gradient" @click="handleBack">
-                <i class="fas fa-arrow-left me-2"></i> Retour à la liste
-              </soft-button>
-              <soft-button color="danger" variant="outline" @click="handleDelete">
-                <i class="fas fa-trash me-2"></i> Supprimer
-              </soft-button>
+
+          <div v-show="activeTab === 'products'">
+            <div class="card">
+              <div class="card-body">
+                <h5 class="font-weight-bolder mb-4">
+                  Produits dans l'entrepôt
+                </h5>
+
+                <div v-if="warehouseProducts.length === 0" class="text-muted">
+                  Aucun produit trouvé dans cet entrepôt.
+                </div>
+
+                <div v-else class="table-responsive">
+                  <table class="table align-items-center mb-0">
+                    <thead>
+                      <tr>
+                        <th
+                          class="text-uppercase text-secondary text-xxs font-weight-bolder"
+                        >
+                          Produit
+                        </th>
+                        <th
+                          class="text-uppercase text-secondary text-xxs font-weight-bolder"
+                        >
+                          Quantité
+                        </th>
+                        <th
+                          class="text-uppercase text-secondary text-xxs font-weight-bolder"
+                        >
+                          Stock de sécurité
+                        </th>
+                        <th
+                          class="text-uppercase text-secondary text-xxs font-weight-bolder text-end"
+                        >
+                          Actions
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr v-for="item in warehouseProducts" :key="item.id">
+                        <td>
+                          <div class="d-flex flex-column">
+                            <span class="text-sm fw-bold">{{
+                              item.product?.nom || `Produit #${item.product_id}`
+                            }}</span>
+                            <span class="text-xs text-secondary"
+                              >Réf: {{ item.product?.reference || "-" }}</span
+                            >
+                          </div>
+                        </td>
+                        <td class="text-sm">{{ item.qty_on_hand_base }}</td>
+                        <td class="text-sm">{{ item.safety_stock_base }}</td>
+                        <td class="text-end">
+                          <button
+                            type="button"
+                            class="btn btn-link text-info btn-sm mb-0"
+                            @click="goToProduct(item.product_id)"
+                          >
+                            Voir produit
+                          </button>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div v-show="activeTab === 'movements'">
+            <div class="card">
+              <div class="card-body">
+                <div
+                  class="d-flex justify-content-between align-items-center mb-4"
+                >
+                  <h5 class="font-weight-bolder mb-0">
+                    Mouvements de stock de l'entrepôt
+                  </h5>
+                  <button
+                    type="button"
+                    class="btn btn-sm bg-gradient-primary mb-0"
+                    @click="goToStockPage"
+                  >
+                    <i class="fas fa-external-link-alt me-1"></i>
+                    Menu stock
+                  </button>
+                </div>
+
+                <div v-if="warehouseMovements.length === 0" class="text-muted">
+                  Aucun mouvement pour cet entrepôt.
+                </div>
+
+                <div v-else class="table-responsive">
+                  <table class="table align-items-center mb-0">
+                    <thead>
+                      <tr>
+                        <th
+                          class="text-uppercase text-secondary text-xxs font-weight-bolder"
+                        >
+                          Date
+                        </th>
+                        <th
+                          class="text-uppercase text-secondary text-xxs font-weight-bolder"
+                        >
+                          Type
+                        </th>
+                        <th
+                          class="text-uppercase text-secondary text-xxs font-weight-bolder"
+                        >
+                          Produit
+                        </th>
+                        <th
+                          class="text-uppercase text-secondary text-xxs font-weight-bolder"
+                        >
+                          Entrée / Sortie
+                        </th>
+                        <th
+                          class="text-uppercase text-secondary text-xxs font-weight-bolder"
+                        >
+                          Quantité
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr
+                        v-for="movement in warehouseMovements"
+                        :key="movement.id"
+                      >
+                        <td class="text-sm">
+                          {{
+                            formatDate(movement.moved_at || movement.created_at)
+                          }}
+                        </td>
+                        <td class="text-sm">{{ movement.move_type || "-" }}</td>
+                        <td class="text-sm">
+                          {{
+                            movement.product?.nom ||
+                            `Produit #${movement.product_id}`
+                          }}
+                        </td>
+                        <td class="text-sm">
+                          <span
+                            class="badge"
+                            :class="
+                              isIncoming(movement)
+                                ? 'bg-success'
+                                : 'bg-warning text-dark'
+                            "
+                          >
+                            {{ isIncoming(movement) ? "Entrée" : "Sortie" }}
+                          </span>
+                        </td>
+                        <td class="text-sm">{{ movement.qty_base }}</td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
             </div>
           </div>
         </div>
@@ -42,11 +427,10 @@
 </template>
 
 <script setup>
-import { ref, onMounted, defineProps } from "vue";
+import { computed, defineProps, onMounted, ref } from "vue";
 import { useRouter } from "vue-router";
+import { useStockStore } from "@/stores/stockStore";
 import { useWarehouseStore } from "@/stores/warehouseStore";
-import SoftButton from "@/components/SoftButton.vue";
-import WarehouseDetailInfo from "@/components/molecules/Stock/WarehouseDetailInfo.vue";
 
 const props = defineProps({
   warehouseId: {
@@ -57,39 +441,242 @@ const props = defineProps({
 
 const router = useRouter();
 const warehouseStore = useWarehouseStore();
+const stockStore = useStockStore();
+
 const warehouse = ref(null);
 const loading = ref(true);
+const saving = ref(false);
+const deleting = ref(false);
 const error = ref(null);
+const activeTab = ref("details");
+const isEditMode = ref(false);
 
-onMounted(async () => {
+const formData = ref({
+  name: "",
+  address_line1: "",
+  address_line2: "",
+  postal_code: "",
+  city: "",
+  country_code: "FR",
+});
+
+const numericWarehouseId = computed(() => Number(props.warehouseId));
+
+const warehouseProducts = computed(() => {
+  return stockStore.stockItems.filter(
+    (item) => Number(item.warehouse_id) === numericWarehouseId.value
+  );
+});
+
+const warehouseMovements = computed(() => {
+  return stockStore.stockMoves.filter(
+    (move) =>
+      Number(move.from_warehouse_id) === numericWarehouseId.value ||
+      Number(move.to_warehouse_id) === numericWarehouseId.value
+  );
+});
+
+const initializeFormData = (value) => {
+  formData.value = {
+    name: value?.name || "",
+    address_line1: value?.address_line1 || "",
+    address_line2: value?.address_line2 || "",
+    postal_code: value?.postal_code || "",
+    city: value?.city || "",
+    country_code: value?.country_code || "FR",
+  };
+};
+
+const loadWarehouseData = async () => {
   loading.value = true;
+  error.value = null;
   try {
-    const fetchedWarehouse = await warehouseStore.fetchWarehouse(props.warehouseId);
+    const [fetchedWarehouse] = await Promise.all([
+      warehouseStore.fetchWarehouse(numericWarehouseId.value),
+      stockStore.fetchStockItems(),
+      stockStore.fetchStockMoves(),
+    ]);
+
     warehouse.value = fetchedWarehouse;
+    initializeFormData(fetchedWarehouse);
   } catch (e) {
-    error.value = "Impossible de charger l'entrepôt.";
+    error.value = "Impossible de charger les informations de l'entrepôt.";
     console.error(e);
   } finally {
     loading.value = false;
   }
-});
+};
 
-const handleEdit = () => {
-  router.push(`/stock/warehouses/${props.warehouseId}/edit`);
+const toggleEditMode = () => {
+  isEditMode.value = true;
+  initializeFormData(warehouse.value);
+};
+
+const cancelEdit = () => {
+  isEditMode.value = false;
+  initializeFormData(warehouse.value);
+};
+
+const saveWarehouse = async () => {
+  saving.value = true;
+  try {
+    const updated = await warehouseStore.updateWarehouse(
+      numericWarehouseId.value,
+      {
+        ...formData.value,
+        country_code: (formData.value.country_code || "FR").toUpperCase(),
+      }
+    );
+    initializeFormData(updated);
+    isEditMode.value = false;
+    await loadWarehouseData();
+  } catch (e) {
+    console.error("Failed to update warehouse", e);
+    error.value =
+      e?.response?.data?.message ||
+      "Erreur lors de la mise à jour de l'entrepôt.";
+  } finally {
+    saving.value = false;
+  }
 };
 
 const handleBack = () => {
   router.push("/stock/warehouses");
 };
 
+const goToProduct = (productId) => {
+  router.push(`/stock/produits/details/${productId}`);
+};
+
+const goToStockPage = () => {
+  router.push("/stock");
+};
+
+const formatDate = (value) => {
+  if (!value) return "-";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return date.toLocaleDateString("fr-FR", {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+};
+
+const isIncoming = (movement) => {
+  return Number(movement.to_warehouse_id) === numericWarehouseId.value;
+};
+
 const handleDelete = async () => {
-  if (confirm("Êtes-vous sûr de vouloir supprimer cet entrepôt ?")) {
-    try {
-      await warehouseStore.deleteWarehouse(props.warehouseId);
-      router.push("/stock/warehouses");
-    } catch (e) {
-      console.error("Failed to delete warehouse", e);
-    }
+  if (!confirm("Êtes-vous sûr de vouloir supprimer cet entrepôt ?")) {
+    return;
+  }
+
+  deleting.value = true;
+  try {
+    await warehouseStore.deleteWarehouse(numericWarehouseId.value);
+    router.push("/stock/warehouses");
+  } catch (e) {
+    console.error("Failed to delete warehouse", e);
+    error.value =
+      e?.response?.data?.message || "Erreur lors de la suppression.";
+  } finally {
+    deleting.value = false;
   }
 };
+
+onMounted(() => {
+  loadWarehouseData();
+});
 </script>
+
+<style scoped>
+.loading-container,
+.error-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 300px;
+  background-color: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  margin: 2rem 0;
+}
+
+.loading-spinner,
+.error-message {
+  text-align: center;
+  padding: 2rem;
+}
+
+.bg-gradient-primary {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.form-control-static {
+  padding: 0.375rem 0;
+  margin-bottom: 0;
+  border: none;
+  background-color: transparent;
+  color: #495057;
+}
+
+.warehouse-side-nav-card {
+  position: sticky;
+  top: 1rem;
+  border: 0;
+  box-shadow: 0 0 2rem 0 rgba(136, 152, 170, 0.15);
+}
+
+.warehouse-sidebar-profile {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.warehouse-sidebar-icon {
+  width: 96px;
+  height: 96px;
+  border-radius: 12px;
+  border: 1px solid #e5e7eb;
+  margin-bottom: 0.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #667eea;
+  font-size: 2rem;
+  background: #f8f9ff;
+}
+
+.warehouse-sidebar-title {
+  font-size: 1rem;
+  font-weight: 700;
+  color: #1f2937;
+}
+
+.warehouse-sidebar-reference {
+  color: #6b7280;
+  font-size: 0.85rem;
+}
+
+.warehouse-sidebar-badges {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+.warehouse-nav .nav-link {
+  color: #6b7280;
+  border-radius: 0.5rem;
+}
+
+.warehouse-nav .nav-link.active {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: #fff;
+  box-shadow: 0 0.25rem 0.75rem rgba(102, 126, 234, 0.35);
+}
+</style>

thanasoft-front/src/components/Organism/Stock/WarehouseFormPresentation.vue

@@ -4,7 +4,7 @@
       <div class="col-lg-8 mx-auto">
         <div class="card mb-4">
           <div class="card-header pb-0 p-3">
-            <h6 class="mb-0">{{ isEdit ? 'Modifier' : 'Nouvel' }} Entrepôt</h6>
+            <h6 class="mb-0">{{ isEdit ? "Modifier" : "Nouvel" }} Entrepôt</h6>
           </div>
           <div class="card-body p-3">
             <warehouse-form
@@ -83,7 +83,10 @@ const handleSubmit = async () => {
     }
     router.push("/stock/warehouses");
   } catch (e) {
-    error.value = e.response?.data?.message || e.message || "Une erreur est survenue lors de l'enregistrement.";
+    error.value =
+      e.response?.data?.message ||
+      e.message ||
+      "Une erreur est survenue lors de l'enregistrement.";
     console.error(e);
   } finally {
     submitting.value = false;

thanasoft-front/src/components/Organism/Webmailing/WebmailingPresentation.vue

@@ -3,10 +3,10 @@
     <template #webmailing-header>
       <div class="d-flex justify-content-between align-items-center mb-4">
         <div>
-          <h3 class="mb-0">
-            <i class="fas fa-envelope"></i> Webmailing
-          </h3>
-          <small class="text-muted">Gérez vos campagnes d'email marketing</small>
+          <h3 class="mb-0"><i class="fas fa-envelope"></i> Webmailing</h3>
+          <small class="text-muted"
+            >Gérez vos campagnes d'email marketing</small
+          >
         </div>
       </div>
     </template>
@@ -17,8 +17,8 @@
           <button
             class="nav-link"
             :class="{ active: activeTab === 'compose' }"
-            @click="activeTab = 'compose'"
             type="button"
+            @click="activeTab = 'compose'"
           >
             <i class="fas fa-pen"></i> Composer
           </button>
@@ -27,8 +27,8 @@
           <button
             class="nav-link"
             :class="{ active: activeTab === 'history' }"
-            @click="activeTab = 'history'"
             type="button"
+            @click="activeTab = 'history'"
           >
             <i class="fas fa-history"></i> Historique
           </button>
@@ -45,17 +45,10 @@
             @form-data-change="updateFormData"
           />
           <div class="mt-4 d-flex justify-content-end gap-2">
-            <soft-button
-              color="secondary"
-              variant="outline"
-              @click="resetForm"
-            >
+            <soft-button color="secondary" variant="outline" @click="resetForm">
               <i class="fas fa-redo"></i> Réinitialiser
             </soft-button>
-            <soft-button
-              color="success"
-              @click="sendEmail"
-            >
+            <soft-button color="success" @click="sendEmail">
               <i class="fas fa-paper-plane"></i> Envoyer
             </soft-button>
           </div>

thanasoft-front/src/components/atoms/InternalMessages/MessageTypeSelect.vue

@@ -8,21 +8,13 @@
       @change="handleChange"
     >
       <option value="">-- Sélectionner un type --</option>
-      <option value="text">
-        <i class="fas fa-comment"></i> Texte
-      </option>
+      <option value="text"><i class="fas fa-comment"></i> Texte</option>
       <option value="phone">
         <i class="fas fa-phone"></i> Appel téléphonique
       </option>
-      <option value="email">
-        <i class="fas fa-envelope"></i> Email
-      </option>
-      <option value="meeting">
-        <i class="fas fa-calendar"></i> Réunion
-      </option>
-      <option value="note">
-        <i class="fas fa-sticky-note"></i> Note
-      </option>
+      <option value="email"><i class="fas fa-envelope"></i> Email</option>
+      <option value="meeting"><i class="fas fa-calendar"></i> Réunion</option>
+      <option value="note"><i class="fas fa-sticky-note"></i> Note</option>
     </select>
   </div>
 </template>

thanasoft-front/src/components/atoms/Planning/PlanningActionButton.vue

@@ -3,7 +3,7 @@
     class="btn d-inline-flex align-items-center justify-content-center gap-2 border-0 shadow-sm transition-all"
     :class="[
       variant === 'primary' ? 'btn-primary-gradient' : 'btn-outline-indigo',
-      size === 'sm' ? 'btn-sm py-1 px-3' : 'py-2 px-4'
+      size === 'sm' ? 'btn-sm py-1 px-3' : 'py-2 px-4',
     ]"
     @click="$emit('click')"
   >
@@ -20,16 +20,16 @@ import { defineProps, defineEmits } from "vue";
 defineProps({
   variant: {
     type: String,
-    default: "secondary" // primary or secondary
+    default: "secondary", // primary or secondary
   },
   size: {
     type: String,
-    default: "md"
+    default: "md",
   },
   hideTextOnMobile: {
     type: Boolean,
-    default: false
-  }
+    default: false,
+  },
 });
 
 defineEmits(["click"]);

thanasoft-front/src/components/atoms/Statistics/DateRangeFilter.vue

@@ -22,7 +22,11 @@
         />
       </div>
       <div class="col-md-3">
-        <select v-model="localPeriod" class="form-select" @change="handlePeriodChange">
+        <select
+          v-model="localPeriod"
+          class="form-select"
+          @change="handlePeriodChange"
+        >
           <option value="">-- Période personnalisée --</option>
           <option value="today">Aujourd'hui</option>
           <option value="week">Cette semaine</option>

thanasoft-front/src/components/atoms/Statistics/StatCard.vue

@@ -54,9 +54,7 @@ const trendClass = computed(() => {
 });
 
 const trendIcon = computed(() => {
-  return props.trendPositive
-    ? "fas fa-arrow-up"
-    : "fas fa-arrow-down";
+  return props.trendPositive ? "fas fa-arrow-up" : "fas fa-arrow-down";
 });
 </script>
 

thanasoft-front/src/components/atoms/Webmailing/WebmailingAttachment.vue

@@ -10,7 +10,9 @@
       multiple
       @change="handleFileChange"
     />
-    <small class="text-muted">Formats acceptés: PDF, DOC, DOCX, XLS, XLSX, JPG, PNG</small>
+    <small class="text-muted"
+      >Formats acceptés: PDF, DOC, DOCX, XLS, XLSX, JPG, PNG</small
+    >
   </div>
 </template>
 

thanasoft-front/src/components/molecules/Agenda/AgendaCalendar.vue

@@ -13,7 +13,11 @@
       </div>
     </div>
     <div class="p-3 card-body">
-      <div ref="calendarEl" :id="calendarId" data-toggle="widget-calendar"></div>
+      <div
+        :id="calendarId"
+        ref="calendarEl"
+        data-toggle="widget-calendar"
+      ></div>
     </div>
   </div>
 </template>

thanasoft-front/src/components/molecules/Avoir/AvoirHeader.vue

@@ -4,9 +4,7 @@
       <h3 class="mb-1">
         <strong>{{ avoirNumber }}</strong>
       </h3>
-      <p class="text-muted mb-0">
-        Créé le {{ formatDate(date) }}
-      </p>
+      <p class="text-muted mb-0">Créé le {{ formatDate(date) }}</p>
     </div>
   </div>
 </template>

thanasoft-front/src/components/molecules/Avoir/NewAvoirForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <form @submit.prevent="submitForm" class="space-y-6">
+  <form class="space-y-6" @submit.prevent="submitForm">
     <!-- Row 1: N° Avoir, Date d'émission, Statut -->
     <div class="row g-3 mb-4">
       <div class="col-md-3">
@@ -13,10 +13,7 @@
       </div>
       <div class="col-md-3">
         <label class="form-label">Date d'émission</label>
-        <soft-input
-          v-model="formData.date"
-          type="date"
-        />
+        <soft-input v-model="formData.date" type="date" />
       </div>
       <div class="col-md-3">
         <label class="form-label">Statut</label>
@@ -39,23 +36,32 @@
             v-model="invoiceSearchQuery"
             type="text"
             placeholder="Rechercher une facture..."
+            class="search-input"
             @input="handleInvoiceSearch"
             @focus="showInvoiceResults = true"
-            class="search-input"
           />
         </div>
-        
+
         <!-- Search Results Dropdown -->
-        <div 
-          v-if="showInvoiceResults && (invoiceSearchResults.length > 0 || isSearchingInvoices)" 
+        <div
+          v-if="
+            showInvoiceResults &&
+            (invoiceSearchResults.length > 0 || isSearchingInvoices)
+          "
           class="search-dropdown"
         >
           <div v-if="isSearchingInvoices" class="dropdown-loading">
-            <div class="spinner-border spinner-border-sm text-primary" role="status">
+            <div
+              class="spinner-border spinner-border-sm text-primary"
+              role="status"
+            >
               <span class="visually-hidden">Chargement...</span>
             </div>
           </div>
-          <div v-else-if="invoiceSearchResults.length === 0" class="dropdown-empty">
+          <div
+            v-else-if="invoiceSearchResults.length === 0"
+            class="dropdown-empty"
+          >
             Aucune facture trouvée
           </div>
           <template v-else>
@@ -94,14 +100,18 @@
           <option value="erreur_facturation">Erreur de facturation</option>
           <option value="retour_marchandise">Retour de marchandise</option>
           <option value="geste_commercial">Geste commercial</option>
-          <option value="annulation_prestation">Annulation de prestation</option>
+          <option value="annulation_prestation">
+            Annulation de prestation
+          </option>
           <option value="autre">Autre</option>
         </select>
       </div>
       <div class="col-md-6">
         <label class="form-label">Mode de remboursement</label>
         <select v-model="formData.refundMethod" class="form-select">
-          <option value="deduction_facture">Déduction sur prochaine facture</option>
+          <option value="deduction_facture">
+            Déduction sur prochaine facture
+          </option>
           <option value="virement">Virement bancaire</option>
           <option value="cheque">Chèque</option>
           <option value="especes">Espèces</option>
@@ -125,12 +135,7 @@
     <div class="mb-4">
       <div class="d-flex justify-content-between align-items-center mb-3">
         <label class="form-label mb-0">Lignes de l'avoir</label>
-        <soft-button
-          type="button"
-          color="primary"
-          size="sm"
-          @click="addLine"
-        >
+        <soft-button type="button" color="primary" size="sm" @click="addLine">
           <i class="fas fa-plus me-1"></i> Ajouter une ligne
         </soft-button>
       </div>
@@ -171,8 +176,8 @@
             <button
               type="button"
               class="btn btn-sm btn-danger"
-              @click="removeLine(index)"
               :disabled="formData.lines.length === 1"
+              @click="removeLine(index)"
             >
               <i class="fas fa-trash"></i>
             </button>
@@ -196,7 +201,9 @@
                 <span>{{ formatCurrency(calculateTotalTva()) }}</span>
               </p>
               <h5 class="mb-0 text-info">
-                <strong>Total TTC : {{ formatCurrency(calculateTotalTtc()) }}</strong>
+                <strong
+                  >Total TTC : {{ formatCurrency(calculateTotalTtc()) }}</strong
+                >
               </h5>
             </div>
           </div>
@@ -225,12 +232,7 @@
       >
         Annuler
       </soft-button>
-      <soft-button
-        type="submit"
-        color="success"
-      >
-        Créer l'avoir
-      </soft-button>
+      <soft-button type="submit" color="success"> Créer l'avoir </soft-button>
     </div>
   </form>
 </template>
@@ -312,11 +314,12 @@ const handleInvoiceSearch = () => {
     showInvoiceResults.value = true;
     try {
       // Simulate API search
-      await new Promise(resolve => setTimeout(resolve, 300));
+      await new Promise((resolve) => setTimeout(resolve, 300));
       const query = invoiceSearchQuery.value.toLowerCase();
-      invoiceSearchResults.value = sampleInvoices.filter(invoice => 
-        invoice.invoice_number.toLowerCase().includes(query) ||
-        invoice.clientName.toLowerCase().includes(query)
+      invoiceSearchResults.value = sampleInvoices.filter(
+        (invoice) =>
+          invoice.invoice_number.toLowerCase().includes(query) ||
+          invoice.clientName.toLowerCase().includes(query)
       );
     } catch (error) {
       console.error("Error searching invoices:", error);
@@ -329,11 +332,11 @@ const handleInvoiceSearch = () => {
 const selectInvoice = (invoice) => {
   if (!invoice || !invoice.id) return;
   if (searchTimeout) clearTimeout(searchTimeout);
-  
+
   formData.value.invoiceId = invoice.id;
   formData.value.clientId = invoice.clientId;
   formData.value.clientName = invoice.clientName;
-  
+
   // Optionally pre-fill a line based on invoice
   formData.value.lines = [
     {
@@ -342,25 +345,25 @@ const selectInvoice = (invoice) => {
       priceHt: invoice.amount,
     },
   ];
-  
+
   invoiceSearchQuery.value = invoice.invoice_number;
   showInvoiceResults.value = false;
 };
 
 // Close dropdowns on click outside
 const handleClickOutside = (event) => {
-  const invoiceContainer = document.querySelector('.invoice-search-container');
+  const invoiceContainer = document.querySelector(".invoice-search-container");
   if (invoiceContainer && !invoiceContainer.contains(event.target)) {
     showInvoiceResults.value = false;
   }
 };
 
 onMounted(() => {
-  document.addEventListener('click', handleClickOutside);
+  document.addEventListener("click", handleClickOutside);
 });
 
 onUnmounted(() => {
-  document.removeEventListener('click', handleClickOutside);
+  document.removeEventListener("click", handleClickOutside);
 });
 
 const formData = ref({
@@ -420,7 +423,10 @@ const formatCurrency = (value) => {
 
 const submitForm = () => {
   if (!formData.value.invoiceId) {
-    notificationStore.error("Erreur", "Veuillez sélectionner une facture d'origine");
+    notificationStore.error(
+      "Erreur",
+      "Veuillez sélectionner une facture d'origine"
+    );
     return;
   }
   if (formData.value.lines.length === 0) {

thanasoft-front/src/components/molecules/ClientGroup/ClientGroupForm.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="card">
     <div class="card-body">
-      <h5 class="mb-4">{{ isEdit ? "Modifier le groupe" : "Nouveau groupe" }}</h5>
+      <h5 class="mb-4">
+        {{ isEdit ? "Modifier le groupe" : "Nouveau groupe" }}
+      </h5>
       <form @submit.prevent="handleSubmit">
         <div class="row">
           <div class="col-md-12">
@@ -39,8 +41,19 @@
             >
               Annuler
             </soft-button>
-            <soft-button type="submit" color="success" variant="gradient" :disabled="loading">
-              {{ loading ? "Enregistrement..." : isEdit ? "Mettre à jour" : "Créer" }}
+            <soft-button
+              type="submit"
+              color="success"
+              variant="gradient"
+              :disabled="loading"
+            >
+              {{
+                loading
+                  ? "Enregistrement..."
+                  : isEdit
+                  ? "Mettre à jour"
+                  : "Créer"
+              }}
             </soft-button>
           </div>
         </div>

thanasoft-front/src/components/molecules/Commande/CommandeLinesTable.vue

@@ -15,7 +15,9 @@
           <tr v-for="line in lines" :key="line.id">
             <td class="text-sm">{{ line.designation }}</td>
             <td class="text-center text-sm">{{ line.quantity }}</td>
-            <td class="text-end text-sm">{{ formatCurrency(line.price_ht) }}</td>
+            <td class="text-end text-sm">
+              {{ formatCurrency(line.price_ht) }}
+            </td>
             <td class="text-end text-sm font-weight-bold">
               {{ formatCurrency(line.total_ht) }}
             </td>

thanasoft-front/src/components/molecules/Commande/NewCommandeForm.vue

@@ -1,36 +1,44 @@
 <template>
-  <form @submit.prevent="submitForm" class="purchase-form">
+  <form class="purchase-form" @submit.prevent="submitForm">
     <!-- Header Section -->
     <div class="form-section">
       <div class="section-title">
         <i class="fas fa-file-invoice"></i>
         Informations générales
       </div>
-      
+
       <!-- Row 1: Fournisseur, Date -->
       <div class="row g-3 mb-3">
         <div class="col-md-6 position-relative supplier-search-container">
-          <label class="form-label">Fournisseur <span class="text-danger">*</span></label>
+          <label class="form-label"
+            >Fournisseur <span class="text-danger">*</span></label
+          >
           <div class="search-input-wrapper">
             <i class="fas fa-search search-icon"></i>
             <soft-input
               v-model="supplierSearchQuery"
               type="text"
               placeholder="Rechercher un fournisseur..."
-              @input="handleSupplierSearch"
-              @focus="showSupplierResults = true"
               required
               class="search-input"
+              @input="handleSupplierSearch"
+              @focus="showSupplierResults = true"
             />
           </div>
-          
+
           <!-- Search Results Dropdown -->
-          <div 
-            v-if="showSupplierResults && (supplierSearchResults.length > 0 || isSearchingSuppliers)" 
+          <div
+            v-if="
+              showSupplierResults &&
+              (supplierSearchResults.length > 0 || isSearchingSuppliers)
+            "
             class="search-dropdown"
           >
             <div v-if="isSearchingSuppliers" class="dropdown-loading">
-              <div class="spinner-border spinner-border-sm text-primary" role="status">
+              <div
+                class="spinner-border spinner-border-sm text-primary"
+                role="status"
+              >
                 <span class="visually-hidden">Chargement...</span>
               </div>
             </div>
@@ -44,20 +52,19 @@
               >
                 <span class="item-name">{{ supplier.name }}</span>
                 <span class="item-details">
-                  {{ supplier.email || 'Pas d\'email' }} • {{ supplier.billing_address?.city || 'Ville non spécifiée' }}
+                  {{ supplier.email || "Pas d'email" }} •
+                  {{ supplier.billing_address?.city || "Ville non spécifiée" }}
                 </span>
               </button>
             </template>
           </div>
         </div>
-        
+
         <div class="col-md-6">
-          <label class="form-label">Date commande <span class="text-danger">*</span></label>
-          <soft-input
-            v-model="formData.date"
-            type="date"
-            required
-          />
+          <label class="form-label"
+            >Date commande <span class="text-danger">*</span></label
+          >
+          <soft-input v-model="formData.date" type="date" required />
         </div>
       </div>
 
@@ -113,8 +120,8 @@
           type="button"
           color="primary"
           size="sm"
-          @click="addLine"
           class="add-btn"
+          @click="addLine"
         >
           <i class="fas fa-plus"></i> Ajouter ligne
         </soft-button>
@@ -128,31 +135,42 @@
         >
           <div class="row g-2 align-items-end">
             <div class="col-md-4 position-relative product-search-container">
-              <label class="form-label text-xs">Article <span class="text-danger">*</span></label>
+              <label class="form-label text-xs"
+                >Article <span class="text-danger">*</span></label
+              >
               <div class="search-input-wrapper">
                 <i class="fas fa-search search-icon"></i>
                 <soft-input
                   v-model="line.searchQuery"
                   type="text"
                   placeholder="Rechercher un article..."
-                  @input="handleProductSearch(index)"
-                  @focus="activeLineIndex = index; showProductResults = true"
                   required
                   class="search-input"
+                  @input="handleProductSearch(index)"
+                  @focus="
+                    activeLineIndex = index;
+                    showProductResults = true;
+                  "
                 />
               </div>
 
               <!-- Product Search Results Dropdown -->
-              <div 
-                v-show="showProductResults && activeLineIndex === index" 
+              <div
+                v-show="showProductResults && activeLineIndex === index"
                 class="search-dropdown product-dropdown"
               >
                 <div v-if="isSearchingProducts" class="dropdown-loading">
-                  <div class="spinner-border spinner-border-sm text-primary" role="status">
+                  <div
+                    class="spinner-border spinner-border-sm text-primary"
+                    role="status"
+                  >
                     <span class="visually-hidden">Chargement...</span>
                   </div>
                 </div>
-                <div v-else-if="productSearchResults.length === 0" class="dropdown-empty">
+                <div
+                  v-else-if="productSearchResults.length === 0"
+                  class="dropdown-empty"
+                >
                   Aucun produit trouvé
                 </div>
                 <template v-else>
@@ -165,15 +183,19 @@
                   >
                     <span class="item-name">{{ product.nom }}</span>
                     <span class="item-details">
-                      Réf: {{ product.reference }} • Stock: {{ product.stock_actuel }} {{ product.unite }} • {{ formatCurrency(product.prix_unitaire) }}
+                      Réf: {{ product.reference }} • Stock:
+                      {{ product.stock_actuel }} {{ product.unite }} •
+                      {{ formatCurrency(product.prix_unitaire) }}
                     </span>
                   </button>
                 </template>
               </div>
             </div>
-            
+
             <div class="col-md-3">
-              <label class="form-label text-xs">Désignation <span class="text-danger">*</span></label>
+              <label class="form-label text-xs"
+                >Désignation <span class="text-danger">*</span></label
+              >
               <soft-input
                 v-model="line.designation"
                 type="text"
@@ -181,9 +203,11 @@
                 required
               />
             </div>
-            
+
             <div class="col-md-2">
-              <label class="form-label text-xs">Qté <span class="text-danger">*</span></label>
+              <label class="form-label text-xs"
+                >Qté <span class="text-danger">*</span></label
+              >
               <soft-input
                 v-model.number="line.quantity"
                 type="number"
@@ -192,9 +216,11 @@
                 required
               />
             </div>
-            
+
             <div class="col-md-2">
-              <label class="form-label text-xs">Prix HT <span class="text-danger">*</span></label>
+              <label class="form-label text-xs"
+                >Prix HT <span class="text-danger">*</span></label
+              >
               <soft-input
                 v-model.number="line.priceHt"
                 type="number"
@@ -203,14 +229,14 @@
                 required
               />
             </div>
-            
+
             <div class="col-md-1 d-flex flex-column align-items-end gap-2">
               <button
                 type="button"
                 class="btn-delete"
-                @click="removeLine(index)"
                 :disabled="formData.lines.length === 1"
                 title="Supprimer la ligne"
+                @click="removeLine(index)"
               >
                 <i class="fas fa-trash-alt"></i>
               </button>
@@ -228,15 +254,21 @@
       <div class="totals-content">
         <div class="total-row">
           <span class="total-label">Total HT</span>
-          <span class="total-value">{{ formatCurrency(calculateTotalHt()) }}</span>
+          <span class="total-value">{{
+            formatCurrency(calculateTotalHt())
+          }}</span>
         </div>
         <div class="total-row">
           <span class="total-label">TVA (20%)</span>
-          <span class="total-value">{{ formatCurrency(calculateTotalTva()) }}</span>
+          <span class="total-value">{{
+            formatCurrency(calculateTotalTva())
+          }}</span>
         </div>
         <div class="total-row total-final">
           <span class="total-label">Total TTC</span>
-          <span class="total-amount">{{ formatCurrency(calculateTotalTtc()) }}</span>
+          <span class="total-amount">{{
+            formatCurrency(calculateTotalTtc())
+          }}</span>
         </div>
       </div>
     </div>
@@ -247,16 +279,12 @@
         type="button"
         color="secondary"
         variant="outline"
-        @click="cancelForm"
         class="btn-cancel"
+        @click="cancelForm"
       >
         <i class="fas fa-times"></i> Annuler
       </soft-button>
-      <soft-button
-        type="submit"
-        color="success"
-        class="btn-submit"
-      >
+      <soft-button type="submit" color="success" class="btn-submit">
         <i class="fas fa-check"></i> Créer la commande
       </soft-button>
     </div>
@@ -301,7 +329,9 @@ const handleSupplierSearch = () => {
     isSearchingSuppliers.value = true;
     showSupplierResults.value = true;
     try {
-      const results = await FournisseurService.searchFournisseurs(supplierSearchQuery.value);
+      const results = await FournisseurService.searchFournisseurs(
+        supplierSearchQuery.value
+      );
       // Handle both direct array or paginated object with data property
       let actualResults = [];
       if (Array.isArray(results)) {
@@ -309,7 +339,7 @@ const handleSupplierSearch = () => {
       } else if (results && Array.isArray(results.data)) {
         actualResults = results.data;
       }
-      supplierSearchResults.value = actualResults.filter(s => s && s.id);
+      supplierSearchResults.value = actualResults.filter((s) => s && s.id);
     } catch (error) {
       console.error("Error searching suppliers:", error);
     } finally {
@@ -321,13 +351,15 @@ const handleSupplierSearch = () => {
 const selectSupplier = (supplier) => {
   if (!supplier || !supplier.id) return;
   if (searchTimeout) clearTimeout(searchTimeout);
-  
+
   formData.value.supplierId = supplier.id;
   formData.value.supplierName = supplier.name;
-  formData.value.supplierAddress = supplier.billing_address ? 
-    `${supplier.billing_address.line1 || ''} ${supplier.billing_address.postal_code || ''} ${supplier.billing_address.city || ''}` : 
-    "À déterminer";
-  
+  formData.value.supplierAddress = supplier.billing_address
+    ? `${supplier.billing_address.line1 || ""} ${
+        supplier.billing_address.postal_code || ""
+      } ${supplier.billing_address.city || ""}`
+    : "À déterminer";
+
   supplierSearchQuery.value = supplier.name;
   showSupplierResults.value = false;
 };
@@ -344,7 +376,6 @@ const handleProductSearch = (index) => {
   const query = formData.value.lines[index].searchQuery;
   console.log(query.length);
   if (query.length < 2) {
-    
     productSearchResults.value = [];
     if (productSearchTimeout) clearTimeout(productSearchTimeout);
     isSearchingProducts.value = false;
@@ -362,10 +393,11 @@ const handleProductSearch = (index) => {
     try {
       const response = await productService.searchProducts(query);
       // Double check if this is still the active line and query, and line still exists
-      if (activeLineIndex.value === index && 
-          formData.value.lines[index] && 
-          formData.value.lines[index].searchQuery === query) {
-        
+      if (
+        activeLineIndex.value === index &&
+        formData.value.lines[index] &&
+        formData.value.lines[index].searchQuery === query
+      ) {
         // Handle paginated response: the array is in response.data.data
         // Handle non-paginated: the array is in response.data
         let results = [];
@@ -376,8 +408,8 @@ const handleProductSearch = (index) => {
             results = response.data.data;
           }
         }
-        
-        productSearchResults.value = results.filter(p => p && p.id);
+
+        productSearchResults.value = results.filter((p) => p && p.id);
       }
     } catch (error) {
       console.error("Error searching products:", error);
@@ -396,42 +428,46 @@ const selectProduct = (index, product) => {
 
   const line = formData.value.lines[index];
   if (!line) return;
-  
+
   line.productId = product.id;
   line.searchQuery = product.nom;
   line.designation = product.nom;
   line.priceHt = product.prix_unitaire;
-  
+
   showProductResults.value = false;
   activeLineIndex.value = null;
 };
 
 // Close dropdowns on click outside
 const handleClickOutside = (event) => {
-  const supplierContainer = document.querySelector('.supplier-search-container');
+  const supplierContainer = document.querySelector(
+    ".supplier-search-container"
+  );
   if (supplierContainer && !supplierContainer.contains(event.target)) {
     showSupplierResults.value = false;
   }
 
-  const productContainers = document.querySelectorAll('.product-search-container');
+  const productContainers = document.querySelectorAll(
+    ".product-search-container"
+  );
   let clickedInsideAnyProduct = false;
-  productContainers.forEach(container => {
+  productContainers.forEach((container) => {
     if (container.contains(event.target)) {
       clickedInsideAnyProduct = true;
     }
   });
-  
+
   if (!clickedInsideAnyProduct) {
     showProductResults.value = false;
   }
 };
 
 onMounted(() => {
-  document.addEventListener('click', handleClickOutside);
+  document.addEventListener("click", handleClickOutside);
 });
 
 onUnmounted(() => {
-  document.removeEventListener('click', handleClickOutside);
+  document.removeEventListener("click", handleClickOutside);
 });
 
 const formData = ref({
@@ -493,7 +529,10 @@ const removeLine = (index) => {
 
 const submitForm = async () => {
   if (!formData.value.supplierId) {
-    notificationStore.error("Champ requis", "Veuillez sélectionner un fournisseur.");
+    notificationStore.error(
+      "Champ requis",
+      "Veuillez sélectionner un fournisseur."
+    );
     return;
   }
 
@@ -508,26 +547,27 @@ const submitForm = async () => {
       total_ht: calculateTotalHt(),
       total_tva: calculateTotalTva(),
       total_ttc: calculateTotalTtc(),
-      lines: formData.value.lines.map(line => ({
+      lines: formData.value.lines.map((line) => ({
         product_id: line.productId || null,
         description: line.designation,
         quantity: line.quantity,
         unit_price: line.priceHt,
         tva_rate: 20, // Default 20%
-        total_ht: line.quantity * line.priceHt
-      }))
+        total_ht: line.quantity * line.priceHt,
+      })),
     };
 
     console.log("Submitting purchase order:", payload);
     const response = await PurchaseOrderService.createPurchaseOrder(payload);
     console.log("Purchase order created:", response);
-    
+
     emit("submit", response.data);
     notificationStore.success("Succès", "Commande créée avec succès !");
-    
   } catch (error) {
     console.error("Error creating purchase order:", error);
-    const message = error.response?.data?.message || "Une erreur est survenue lors de la création de la commande.";
+    const message =
+      error.response?.data?.message ||
+      "Une erreur est survenue lors de la création de la commande.";
     notificationStore.error("Erreur", message);
   }
 };
@@ -862,21 +902,21 @@ const cancelForm = () => {
   .form-section {
     padding: 1rem;
   }
-  
+
   .section-header {
     flex-direction: column;
     align-items: flex-start;
     gap: 0.75rem;
   }
-  
+
   .totals-content {
     max-width: 100%;
   }
-  
+
   .action-buttons {
     flex-direction: column-reverse;
   }
-  
+
   .btn-cancel,
   .btn-submit {
     width: 100%;

thanasoft-front/src/components/molecules/FactureFournisseur/FactureFournisseurLinesTable.vue

@@ -3,16 +3,24 @@
     <table class="table align-items-center mb-0">
       <thead>
         <tr>
-          <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">
+          <th
+            class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2"
+          >
             Description
           </th>
-          <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
+          <th
+            class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7"
+          >
             Qté
           </th>
-          <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
+          <th
+            class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7"
+          >
             Prix Unit. HT
           </th>
-          <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
+          <th
+            class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7"
+          >
             Total HT
           </th>
         </tr>
@@ -27,13 +35,19 @@
             </div>
           </td>
           <td class="align-middle text-center text-sm">
-            <span class="text-secondary text-xs font-weight-bold">{{ line.quantity }}</span>
+            <span class="text-secondary text-xs font-weight-bold">{{
+              line.quantity
+            }}</span>
           </td>
           <td class="align-middle text-center text-sm">
-            <span class="text-secondary text-xs font-weight-bold">{{ formatCurrency(line.priceHt) }}</span>
+            <span class="text-secondary text-xs font-weight-bold">{{
+              formatCurrency(line.priceHt)
+            }}</span>
           </td>
           <td class="align-middle text-center text-sm">
-            <span class="text-secondary text-xs font-weight-bold">{{ formatCurrency(line.totalHt) }}</span>
+            <span class="text-secondary text-xs font-weight-bold">{{
+              formatCurrency(line.totalHt)
+            }}</span>
           </td>
         </tr>
       </tbody>

thanasoft-front/src/components/molecules/FactureFournisseur/FactureFournisseurListControls.vue

@@ -1,7 +1,12 @@
 <template>
   <div class="d-sm-flex justify-content-between">
     <div>
-      <soft-button color="success" variant="gradient" size="sm" @click="$emit('create')">
+      <soft-button
+        color="success"
+        variant="gradient"
+        size="sm"
+        @click="$emit('create')"
+      >
         <i class="fas fa-plus me-1"></i> Ajouter une facture
       </soft-button>
     </div>

thanasoft-front/src/components/molecules/FactureFournisseur/FactureFournisseurSummary.vue

@@ -9,7 +9,9 @@
                 <span class="text-sm">Total HT:</span>
               </td>
               <td class="text-end">
-                <span class="text-sm text-dark font-weight-bold">{{ formatCurrency(ht) }}</span>
+                <span class="text-sm text-dark font-weight-bold">{{
+                  formatCurrency(ht)
+                }}</span>
               </td>
             </tr>
             <tr>
@@ -17,15 +19,21 @@
                 <span class="text-sm">TVA (20%):</span>
               </td>
               <td class="text-end">
-                <span class="text-sm text-dark font-weight-bold">{{ formatCurrency(tva) }}</span>
+                <span class="text-sm text-dark font-weight-bold">{{
+                  formatCurrency(tva)
+                }}</span>
               </td>
             </tr>
             <tr>
               <td>
-                <span class="text-sm font-weight-bold text-info">Total TTC:</span>
+                <span class="text-sm font-weight-bold text-info"
+                  >Total TTC:</span
+                >
               </td>
               <td class="text-end">
-                <span class="text-sm font-weight-bold text-info">{{ formatCurrency(ttc) }}</span>
+                <span class="text-sm font-weight-bold text-info">{{
+                  formatCurrency(ttc)
+                }}</span>
               </td>
             </tr>
           </tbody>

thanasoft-front/src/components/molecules/FactureFournisseur/NewFactureFournisseurForm.vue

@@ -13,20 +13,25 @@
       </div>
       <div class="col-md-4">
         <label class="form-label">Fournisseur *</label>
-        <select v-model="formData.supplierId" class="form-select" @change="updateSupplierInfo" required>
+        <select
+          v-model="formData.supplierId"
+          class="form-select"
+          required
+          @change="updateSupplierInfo"
+        >
           <option value="">-- Sélectionner un fournisseur --</option>
-          <option v-for="supplier in suppliers" :key="supplier.id" :value="supplier.id">
+          <option
+            v-for="supplier in suppliers"
+            :key="supplier.id"
+            :value="supplier.id"
+          >
             {{ supplier.name }}
           </option>
         </select>
       </div>
       <div class="col-md-4">
         <label class="form-label">Date facture *</label>
-        <soft-input
-          v-model="formData.date"
-          type="date"
-          required
-        />
+        <soft-input v-model="formData.date" type="date" required />
       </div>
     </div>
 
@@ -55,13 +60,27 @@
     <!-- Articles Section -->
     <div class="mb-4">
       <div class="flex items-center justify-between mb-4">
-        <label class="peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-lg font-bold">Lignes de facture</label>
-        <button 
-          class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground shadow hover:bg-primary/90 h-8 rounded-md px-3 text-xs" 
+        <label
+          class="peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-lg font-bold"
+          >Lignes de facture</label
+        >
+        <button
+          class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground shadow hover:bg-primary/90 h-8 rounded-md px-3 text-xs"
           type="button"
           @click="addLine"
         >
-          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus w-4 h-4 mr-2">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="lucide lucide-plus w-4 h-4 mr-2"
+          >
             <path d="M5 12h14"></path>
             <path d="M12 5v14"></path>
           </svg>
@@ -114,8 +133,8 @@
             <button
               type="button"
               class="btn btn-sm btn-link text-danger mb-0"
-              @click="removeLine(index)"
               :disabled="formData.lines.length === 1"
+              @click="removeLine(index)"
             >
               <i class="fas fa-trash"></i>
             </button>
@@ -131,16 +150,22 @@
           <div class="card-body p-3">
             <div class="d-flex justify-content-between mb-2">
               <span class="text-sm">Total HT:</span>
-              <span class="text-sm font-weight-bold">{{ formatCurrency(calculateTotalHt()) }}</span>
+              <span class="text-sm font-weight-bold">{{
+                formatCurrency(calculateTotalHt())
+              }}</span>
             </div>
             <div class="d-flex justify-content-between mb-2">
               <span class="text-sm">TVA (20%):</span>
-              <span class="text-sm font-weight-bold">{{ formatCurrency(calculateTotalTva()) }}</span>
+              <span class="text-sm font-weight-bold">{{
+                formatCurrency(calculateTotalTva())
+              }}</span>
             </div>
-            <hr class="horizontal dark my-2">
+            <hr class="horizontal dark my-2" />
             <div class="d-flex justify-content-between">
               <span class="text-base font-weight-bold">Total TTC:</span>
-              <span class="text-base font-weight-bold text-info">{{ formatCurrency(calculateTotalTtc()) }}</span>
+              <span class="text-base font-weight-bold text-info">{{
+                formatCurrency(calculateTotalTtc())
+              }}</span>
             </div>
           </div>
         </div>
@@ -157,10 +182,7 @@
       >
         Annuler
       </soft-button>
-      <soft-button
-        type="submit"
-        color="success"
-      >
+      <soft-button type="submit" color="success">
         Enregistrer la facture
       </soft-button>
     </div>
@@ -201,7 +223,7 @@ const formData = ref({
 });
 
 const updateSupplierInfo = () => {
-  const supplier = suppliers.find(s => s.id === formData.value.supplierId);
+  const supplier = suppliers.find((s) => s.id === formData.value.supplierId);
   if (supplier) {
     formData.value.supplierName = supplier.name;
   }
@@ -247,19 +269,19 @@ const submitForm = () => {
     alert("Veuillez sélectionner un fournisseur");
     return;
   }
-  
+
   const payload = {
     ...formData.value,
     totalHt: calculateTotalHt(),
     totalTva: calculateTotalTva(),
     totalTtc: calculateTotalTtc(),
     // Map lines to include totalHt for store consistency
-    lines: formData.value.lines.map(line => ({
+    lines: formData.value.lines.map((line) => ({
       ...line,
-      totalHt: line.quantity * line.priceHt
-    }))
+      totalHt: line.quantity * line.priceHt,
+    })),
   };
-  
+
   emit("submit", payload);
 };
 </script>
@@ -277,21 +299,54 @@ const submitForm = () => {
 }
 
 /* Tailwind-like utilities used in the provided snippet */
-.flex { display: flex; }
-.items-center { align-items: center; }
-.justify-between { justify-content: space-between; }
-.mb-4 { margin-bottom: 1.5rem; }
-.text-lg { font-size: 1.125rem; }
-.font-bold { font-weight: 700; }
-.gap-2 { gap: 0.5rem; }
-.whitespace-nowrap { white-space: nowrap; }
-.transition-colors { transition-property: background-color, border-color, color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
-.shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); }
-.rounded-md { border-radius: 0.375rem; }
-.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
-.h-8 { height: 2rem; }
-.text-xs { font-size: 0.75rem; }
-.font-medium { font-weight: 500; }
+.flex {
+  display: flex;
+}
+.items-center {
+  align-items: center;
+}
+.justify-between {
+  justify-content: space-between;
+}
+.mb-4 {
+  margin-bottom: 1.5rem;
+}
+.text-lg {
+  font-size: 1.125rem;
+}
+.font-bold {
+  font-weight: 700;
+}
+.gap-2 {
+  gap: 0.5rem;
+}
+.whitespace-nowrap {
+  white-space: nowrap;
+}
+.transition-colors {
+  transition-property: background-color, border-color, color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+.shadow {
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+}
+.rounded-md {
+  border-radius: 0.375rem;
+}
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+.h-8 {
+  height: 2rem;
+}
+.text-xs {
+  font-size: 0.75rem;
+}
+.font-medium {
+  font-weight: 500;
+}
 
 .space-y-3 > div + div {
   margin-top: 1rem;

thanasoft-front/src/components/molecules/InternalMessages/InternalMessageForm.vue

@@ -24,15 +24,9 @@
           class="form-select"
           @change="emitFormData"
         >
-          <option value="low">
-            <i class="fas fa-arrow-down"></i> Basse
-          </option>
-          <option value="normal">
-            <i class="fas fa-minus"></i> Normale
-          </option>
-          <option value="high">
-            <i class="fas fa-arrow-up"></i> Haute
-          </option>
+          <option value="low"><i class="fas fa-arrow-down"></i> Basse</option>
+          <option value="normal"><i class="fas fa-minus"></i> Normale</option>
+          <option value="high"><i class="fas fa-arrow-up"></i> Haute</option>
         </select>
       </div>
     </div>
@@ -69,10 +63,7 @@
     </div>
 
     <div class="form-section mb-4">
-      <message-content
-        v-model="formData.content"
-        @blur="emitFormData"
-      />
+      <message-content v-model="formData.content" @blur="emitFormData" />
     </div>
 
     <div class="form-section">

thanasoft-front/src/components/molecules/InternalMessages/InternalMessageList.vue

@@ -4,7 +4,11 @@
       <i class="fas fa-info-circle"></i> Aucun message
     </div>
     <div v-else>
-      <div v-for="message in messages" :key="message.id" class="message-item mb-3">
+      <div
+        v-for="message in messages"
+        :key="message.id"
+        class="message-item mb-3"
+      >
         <div class="message-header">
           <div class="d-flex justify-content-between align-items-start">
             <div>
@@ -14,19 +18,15 @@
                   {{ getTypeLabel(message.type) }}
                 </span>
               </h6>
-              <small class="text-muted">{{ formatDate(message.createdDate) }}</small>
+              <small class="text-muted">{{
+                formatDate(message.createdDate)
+              }}</small>
             </div>
             <div class="d-flex gap-2">
-              <span
-                v-if="message.priority === 'high'"
-                class="badge bg-danger"
-              >
+              <span v-if="message.priority === 'high'" class="badge bg-danger">
                 <i class="fas fa-exclamation-circle"></i> Haute priorité
               </span>
-              <span
-                v-if="message.isUrgent"
-                class="badge bg-warning"
-              >
+              <span v-if="message.isUrgent" class="badge bg-warning">
                 <i class="fas fa-fire"></i> Urgent
               </span>
               <span :class="getStatusClass(message.read)">
@@ -57,13 +57,22 @@
           </div>
         </div>
         <div class="message-actions mt-2">
-          <button class="btn btn-sm btn-outline-primary" @click="markAsRead(message.id)">
+          <button
+            class="btn btn-sm btn-outline-primary"
+            @click="markAsRead(message.id)"
+          >
             <i class="fas fa-envelope-open"></i> Marquer comme lu
           </button>
-          <button class="btn btn-sm btn-outline-info ms-2" @click="replyMessage(message.id)">
+          <button
+            class="btn btn-sm btn-outline-info ms-2"
+            @click="replyMessage(message.id)"
+          >
             <i class="fas fa-reply"></i> Répondre
           </button>
-          <button class="btn btn-sm btn-outline-danger ms-2" @click="deleteMessage(message.id)">
+          <button
+            class="btn btn-sm btn-outline-danger ms-2"
+            @click="deleteMessage(message.id)"
+          >
             <i class="fas fa-trash"></i> Supprimer
           </button>
         </div>

thanasoft-front/src/components/molecules/Invoice/InvoiceLinesTable.vue

@@ -3,22 +3,34 @@
     <table class="table align-items-center mb-0">
       <thead>
         <tr>
-          <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
+          <th
+            class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7"
+          >
             Produit
           </th>
-          <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">
+          <th
+            class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2"
+          >
             Description
           </th>
-          <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
+          <th
+            class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7"
+          >
             Quantité
           </th>
-          <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
+          <th
+            class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7"
+          >
             Prix Unit.
           </th>
-          <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
+          <th
+            class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7"
+          >
             Remise
           </th>
-          <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
+          <th
+            class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7"
+          >
             Total HT
           </th>
         </tr>
@@ -26,22 +38,34 @@
       <tbody>
         <tr v-for="(line, index) in lines" :key="index">
           <td>
-            <span class="text-xs font-weight-bold">{{ line.product_name || 'Produit' }}</span>
+            <span class="text-xs font-weight-bold">{{
+              line.product_name || "Produit"
+            }}</span>
           </td>
           <td>
-            <span class="text-xs text-secondary">{{ line.description || '-' }}</span>
+            <span class="text-xs text-secondary">{{
+              line.description || "-"
+            }}</span>
           </td>
           <td class="text-center">
-            <span class="text-xs font-weight-bold">{{ line.units_qty || line.qty_base || 1 }}</span>
+            <span class="text-xs font-weight-bold">{{
+              line.units_qty || line.qty_base || 1
+            }}</span>
           </td>
           <td class="text-center">
-            <span class="text-xs font-weight-bold">{{ formatCurrency(line.unit_price) }}</span>
+            <span class="text-xs font-weight-bold">{{
+              formatCurrency(line.unit_price)
+            }}</span>
           </td>
           <td class="text-center">
-            <span class="text-xs font-weight-bold">{{ line.discount_pct || 0 }}%</span>
+            <span class="text-xs font-weight-bold"
+              >{{ line.discount_pct || 0 }}%</span
+            >
           </td>
           <td class="text-center">
-            <span class="text-xs font-weight-bold">{{ formatCurrency(line.total_ht) }}</span>
+            <span class="text-xs font-weight-bold">{{
+              formatCurrency(line.total_ht)
+            }}</span>
           </td>
         </tr>
         <tr v-if="!lines || lines.length === 0">

thanasoft-front/src/components/molecules/Invoice/InvoiceSummary.vue

@@ -12,7 +12,9 @@
     <hr class="horizontal dark my-2" />
     <div class="d-flex justify-content-between">
       <span class="text-sm font-weight-bold">Total TTC:</span>
-      <span class="text-sm font-weight-bold text-success">{{ formatCurrency(ttc) }}</span>
+      <span class="text-sm font-weight-bold text-success">{{
+        formatCurrency(ttc)
+      }}</span>
     </div>
   </div>
 </template>

thanasoft-front/src/components/molecules/Planning/PlanningCollaboratorsSidebar.vue

@@ -1,17 +1,24 @@
 <template>
-  <div class="card border-0 shadow-lg rounded-xl h-100 sidebar-card" :class="{ 'collapsed': isCollapsed }">
+  <div
+    class="card border-0 shadow-lg rounded-xl h-100 sidebar-card"
+    :class="{ collapsed: isCollapsed }"
+  >
     <div class="card-header bg-white border-0 pb-0">
       <div class="d-flex align-items-center justify-content-between mb-3">
         <div class="d-flex align-items-center gap-2">
           <i class="fas fa-users text-indigo-600"></i>
-          <h3 class="text-xs font-semibold mb-0">👥 Collaborateurs ({{ count }})</h3>
+          <h3 class="text-xs font-semibold mb-0">
+            👥 Collaborateurs ({{ count }})
+          </h3>
         </div>
       </div>
     </div>
     <div class="card-body pt-0">
       <div v-if="count === 0" class="text-center text-secondary py-4 text-xs">
         <p class="mb-2">Aucun collaborateur</p>
-        <p class="text-muted opacity-60">💡 Allouez une couleur depuis la page Salariés</p>
+        <p class="text-muted opacity-60">
+          💡 Allouez une couleur depuis la page Salariés
+        </p>
       </div>
       <slot v-else></slot>
     </div>
@@ -26,12 +33,12 @@ import { defineProps } from "vue";
 defineProps({
   count: {
     type: Number,
-    default: 0
+    default: 0,
   },
   isCollapsed: {
     type: Boolean,
-    default: false
-  }
+    default: false,
+  },
 });
 </script>
 

thanasoft-front/src/components/molecules/Planning/PlanningCreationTypeSelector.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="d-grid gap-2">
+    <soft-button color="info" variant="gradient" @click="$emit('select-type', 'intervention')">
+      <i class="fas fa-briefcase-medical me-2"></i>
+      Créer une intervention
+    </soft-button>
+
+    <soft-button color="warning" variant="gradient" @click="$emit('select-type', 'leave')">
+      <i class="fas fa-umbrella-beach me-2"></i>
+      Demande de congé employé
+    </soft-button>
+
+    <soft-button color="success" variant="gradient" @click="$emit('select-type', 'event')">
+      <i class="fas fa-calendar-plus me-2"></i>
+      Créer un événement
+    </soft-button>
+  </div>
+</template>
+
+<script setup>
+import { defineEmits } from "vue";
+import SoftButton from "@/components/SoftButton.vue";
+
+defineEmits(["select-type"]);
+</script>
+

thanasoft-front/src/components/molecules/Planning/PlanningDateNavigator.vue

@@ -1,31 +1,42 @@
 <template>
-  <div class="d-flex align-items-center bg-white shadow-sm rounded-lg p-1 border">
-    <button 
-      class="btn btn-sm btn-icon mb-0 shadow-none border-0 hover:bg-gray-100 rounded-md" 
+  <div
+    class="d-flex align-items-center bg-white shadow-sm rounded-lg p-1 border"
+  >
+    <soft-button
+      color="secondary"
+      variant="outline"
+      size="sm"
+      class="btn-icon-soft"
       @click="$emit('prev-week')"
     >
       <i class="fas fa-chevron-left text-secondary text-xs"></i>
-    </button>
-    <div class="px-3 py-1 text-sm font-semibold text-dark whitespace-nowrap min-w-140 text-center">
+    </soft-button>
+    <div
+      class="px-3 py-1 text-sm font-semibold text-dark whitespace-nowrap min-w-140 text-center"
+    >
       {{ dateRangeDisplay }}
     </div>
-    <button 
-      class="btn btn-sm btn-icon mb-0 shadow-none border-0 hover:bg-gray-100 rounded-md" 
+    <soft-button
+      color="secondary"
+      variant="outline"
+      size="sm"
+      class="btn-icon-soft"
       @click="$emit('next-week')"
     >
       <i class="fas fa-chevron-right text-secondary text-xs"></i>
-    </button>
+    </soft-button>
   </div>
 </template>
 
 <script setup>
 import { computed, defineProps, defineEmits } from "vue";
+import SoftButton from "@/components/SoftButton.vue";
 
 const props = defineProps({
   currentDate: {
     type: Date,
-    default: () => new Date()
-  }
+    default: () => new Date(),
+  },
 });
 
 defineEmits(["prev-week", "next-week"]);
@@ -33,22 +44,26 @@ defineEmits(["prev-week", "next-week"]);
 const dateRangeDisplay = computed(() => {
   const current = new Date(props.currentDate);
   const dayOfWeek = current.getDay(); // 0 is Sunday
-  
+
   // Calculate Monday of current week
   const diff = current.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1);
   const monday = new Date(current);
   monday.setDate(diff);
-  
+
   // Calculate Sunday of current week
   const sunday = new Date(monday);
   sunday.setDate(monday.getDate() + 6);
-  
-  const options = { day: 'numeric', month: 'short' };
-  const startStr = monday.toLocaleDateString('fr-FR', options);
-  
+
+  const options = { day: "numeric", month: "short" };
+  const startStr = monday.toLocaleDateString("fr-FR", options);
+
   // If same month, don't repeat month in start date (optional refinement, sticking to simple for now)
-  const endStr = sunday.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short', year: 'numeric' });
-  
+  const endStr = sunday.toLocaleDateString("fr-FR", {
+    day: "numeric",
+    month: "short",
+    year: "numeric",
+  });
+
   return `${startStr} - ${endStr}`;
 });
 </script>
@@ -58,10 +73,6 @@ const dateRangeDisplay = computed(() => {
   border-radius: 0.5rem;
 }
 
-.rounded-md {
-  border-radius: 0.375rem;
-}
-
 .text-xs {
   font-size: 0.75rem;
 }
@@ -78,16 +89,14 @@ const dateRangeDisplay = computed(() => {
   min-width: 140px;
 }
 
-.hover\:bg-gray-100:hover {
-  background-color: #f3f4f6;
-}
-
-.btn-icon {
-  width: 28px;
-  height: 28px;
-  padding: 0;
+.btn-icon-soft {
+  width: 30px;
+  height: 30px;
+  min-width: 30px;
+  padding: 0 !important;
   display: flex;
   align-items: center;
   justify-content: center;
+  border-radius: 0.375rem;
 }
 </style>

thanasoft-front/src/components/molecules/Planning/PlanningEventForm.vue

@@ -0,0 +1,65 @@
+<template>
+  <form class="d-grid gap-2" @submit.prevent="$emit('submit')">
+    <div>
+      <label class="form-label">Titre</label>
+      <soft-input
+        :model-value="form.title"
+        placeholder="Réunion équipe"
+        @update:model-value="updateField('title', $event)"
+      />
+    </div>
+
+    <div>
+      <label class="form-label">Date et heure</label>
+      <soft-input
+        :model-value="form.date"
+        type="datetime-local"
+        @update:model-value="updateField('date', $event)"
+      />
+    </div>
+
+    <div>
+      <label class="form-label">Lieu</label>
+      <soft-input
+        :model-value="form.location"
+        placeholder="Salle principale"
+        @update:model-value="updateField('location', $event)"
+      />
+    </div>
+
+    <div>
+      <label class="form-label">Description</label>
+      <input
+        :value="form.description"
+        class="form-control"
+        type="text"
+        placeholder="Détails de l'événement"
+        @input="updateField('description', $event.target.value)"
+      />
+    </div>
+
+    <div class="d-flex gap-2 justify-content-end pt-2">
+      <soft-button color="secondary" variant="outline" @click="$emit('back')">Retour</soft-button>
+      <soft-button color="success" variant="gradient" type="submit">Enregistrer</soft-button>
+    </div>
+  </form>
+</template>
+
+<script setup>
+import SoftButton from "@/components/SoftButton.vue";
+import SoftInput from "@/components/SoftInput.vue";
+import { defineEmits, defineProps } from "vue";
+defineProps({
+  form: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits(["update:form", "submit", "back"]);
+
+const updateField = (field, value) => {
+  emit("update:form", { field, value });
+};
+</script>
+

thanasoft-front/src/components/molecules/Planning/PlanningKanban.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="planning-kanban-container mt-3">
-    <div class="py-2 min-vh-100 d-inline-flex" style="overflow-x: auto">
+    <div class="planning-kanban-scroll py-2">
       <div id="planningKanban"></div>
     </div>
   </div>
@@ -92,7 +92,7 @@ const initKanban = () => {
   kanbanInstance = new jKanban({
     element: "#planningKanban",
     gutter: "10px",
-    widthBoard: "300px",
+    widthBoard: "360px",
     responsivePercentage: false,
     dragItems: true,
     boards: boards,
@@ -153,12 +153,18 @@ watch(() => props.interventions, () => {
 /* Global styles for jKanban overrides */
 .kanban-container {
   display: flex;
-  width: 100%;
+  width: max-content;
+  min-width: 100%;
+  height: 100%;
+  overflow-x: visible !important;
+  overflow-y: hidden !important;
 }
 
 .kanban-board {
   background: transparent !important;
   padding: 0 !important;
+  width: 360px !important;
+  height: 100%;
 }
 
 .kanban-board-header {
@@ -183,9 +189,27 @@ watch(() => props.interventions, () => {
 }
 
 .kanban-drag {
-  min-height: 500px;
+  min-height: 100%;
   background-color: #f1f5f9; /* slate-100 */
   border-radius: 0.75rem;
   padding: 10px;
 }
+
+.planning-kanban-container {
+  width: 100%;
+  min-height: calc(100vh - 220px);
+}
+
+.planning-kanban-scroll {
+  width: 100%;
+  height: calc(100vh - 220px);
+  overflow-x: auto;
+  overflow-y: hidden !important;
+}
+
+#planningKanban {
+  width: 100%;
+  min-width: max-content;
+  height: 100%;
+}
 </style>

thanasoft-front/src/components/molecules/Planning/PlanningLeaveRequestForm.vue

@@ -0,0 +1,61 @@
+<template>
+  <form class="d-grid gap-2" @submit.prevent="$emit('submit')">
+    <div>
+      <label class="form-label">Employé</label>
+      <select :value="form.employee" class="form-select" @change="updateField('employee', $event.target.value)">
+        <option value="" disabled>Choisir un employé</option>
+        <option v-for="collab in collaborators" :key="collab.id" :value="collab.name">
+          {{ collab.name }}
+        </option>
+      </select>
+    </div>
+
+    <div class="row g-2">
+      <div class="col-6">
+        <label class="form-label">Du</label>
+        <soft-input :model-value="form.startDate" type="date" @update:model-value="updateField('startDate', $event)" />
+      </div>
+      <div class="col-6">
+        <label class="form-label">Au</label>
+        <soft-input :model-value="form.endDate" type="date" @update:model-value="updateField('endDate', $event)" />
+      </div>
+    </div>
+
+    <div>
+      <label class="form-label">Motif</label>
+      <soft-input
+        :model-value="form.reason"
+        placeholder="Congé annuel"
+        @update:model-value="updateField('reason', $event)"
+      />
+    </div>
+
+    <div class="d-flex gap-2 justify-content-end pt-2">
+      <soft-button color="secondary" variant="outline" @click="$emit('back')">Retour</soft-button>
+      <soft-button color="warning" variant="gradient" type="submit">Enregistrer</soft-button>
+    </div>
+  </form>
+</template>
+
+<script setup>
+import SoftButton from "@/components/SoftButton.vue";
+import SoftInput from "@/components/SoftInput.vue";
+import { defineEmits, defineProps } from "vue";
+defineProps({
+  form: {
+    type: Object,
+    required: true,
+  },
+  collaborators: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(["update:form", "submit", "back"]);
+
+const updateField = (field, value) => {
+  emit("update:form", { field, value });
+};
+</script>
+

thanasoft-front/src/components/molecules/Planning/PlanningLegend.vue

@@ -7,9 +7,16 @@
     </div>
     <div class="card-body pt-2">
       <div class="d-flex flex-wrap gap-3">
-        <div v-for="item in legend" :key="item.label" class="d-flex align-items-center gap-2">
+        <div
+          v-for="item in legend"
+          :key="item.label"
+          class="d-flex align-items-center gap-2"
+        >
           <span class="text-sm">{{ item.emoji }}</span>
-          <div class="legend-bar rounded-pill" :style="{ backgroundColor: item.color }"></div>
+          <div
+            class="legend-bar rounded-pill"
+            :style="{ backgroundColor: item.color }"
+          ></div>
           <span class="text-xs text-secondary">{{ item.label }}</span>
         </div>
       </div>
@@ -23,7 +30,7 @@ const legend = [
   { emoji: "🏥", label: "Maladie", color: "#ef4444" },
   { emoji: "📚", label: "Formation", color: "#8b5cf6" },
   { emoji: "💼", label: "Sans solde", color: "#6b7280" },
-  { emoji: "🚑", label: "Accident travail", color: "#dc2626" }
+  { emoji: "🚑", label: "Accident travail", color: "#dc2626" },
 ];
 </script>
 

thanasoft-front/src/components/molecules/Planning/PlanningList.vue

@@ -5,56 +5,111 @@
         <table class="table align-items-center mb-0">
           <thead class="bg-gray-50">
             <tr>
-              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-4">Date & Heure</th>
-              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Type</th>
-              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Défunt / Client</th>
-              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Collaborateur</th>
-              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Statut</th>
-              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Actions</th>
+              <th
+                class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-4"
+              >
+                Date & Heure
+              </th>
+              <th
+                class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2"
+              >
+                Type
+              </th>
+              <th
+                class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2"
+              >
+                Défunt / Client
+              </th>
+              <th
+                class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2"
+              >
+                Collaborateur
+              </th>
+              <th
+                class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2"
+              >
+                Statut
+              </th>
+              <th
+                class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2"
+              >
+                Actions
+              </th>
             </tr>
           </thead>
           <tbody>
             <tr v-if="interventions.length === 0">
               <td colspan="6" class="text-center py-5">
-                <span class="text-muted text-sm">Aucune intervention pour cette période</span>
+                <span class="text-muted text-sm"
+                  >Aucune intervention pour cette période</span
+                >
               </td>
             </tr>
-            <tr v-for="intervention in interventions" :key="intervention.id" class="hover-row transition-all">
+            <tr
+              v-for="intervention in interventions"
+              :key="intervention.id"
+              class="hover-row transition-all"
+            >
               <td class="ps-4">
                 <div class="d-flex flex-column">
-                  <h6 class="mb-0 text-sm font-weight-bold">{{ formatDate(intervention.date) }}</h6>
-                  <span class="text-xs text-secondary">{{ formatTime(intervention.date) }}</span>
+                  <h6 class="mb-0 text-sm font-weight-bold">
+                    {{ formatDate(intervention.date) }}
+                  </h6>
+                  <span class="text-xs text-secondary">{{
+                    formatTime(intervention.date)
+                  }}</span>
                 </div>
               </td>
               <td>
                 <div class="d-flex align-items-center">
-                  <span class="badge badge-sm bg-gradient-light text-dark mb-0 d-flex align-items-center gap-1 border">
-                    <span class="width-8-px height-8-px rounded-circle me-1" :style="{ backgroundColor: getTypeColor(intervention.type) }"></span>
+                  <span
+                    class="badge badge-sm bg-gradient-light text-dark mb-0 d-flex align-items-center gap-1 border"
+                  >
+                    <span
+                      class="width-8-px height-8-px rounded-circle me-1"
+                      :style="{
+                        backgroundColor: getTypeColor(intervention.type),
+                      }"
+                    ></span>
                     {{ intervention.type }}
                   </span>
                 </div>
               </td>
               <td>
                 <div class="d-flex flex-column">
-                  <h6 class="mb-0 text-sm">{{ intervention.deceased || 'Non spécifié' }}</h6>
-                  <span class="text-xs text-secondary">Client: {{ intervention.client || '-' }}</span>
+                  <h6 class="mb-0 text-sm">
+                    {{ intervention.deceased || "Non spécifié" }}
+                  </h6>
+                  <span class="text-xs text-secondary"
+                    >Client: {{ intervention.client || "-" }}</span
+                  >
                 </div>
               </td>
               <td>
                 <div class="d-flex align-items-center">
-                  <div class="avatar avatar-xs me-2 bg-gradient-primary rounded-circle text-white d-flex align-items-center justify-content-center text-xxs">
+                  <div
+                    class="avatar avatar-xs me-2 bg-gradient-primary rounded-circle text-white d-flex align-items-center justify-content-center text-xxs"
+                  >
                     {{ getInitials(intervention.collaborator) }}
                   </div>
-                  <span class="text-sm font-weight-bold text-secondary">{{ intervention.collaborator }}</span>
+                  <span class="text-sm font-weight-bold text-secondary">{{
+                    intervention.collaborator
+                  }}</span>
                 </div>
               </td>
               <td>
-                <span class="badge badge-sm" :class="getStatusBadgeClass(intervention.status)">
+                <span
+                  class="badge badge-sm"
+                  :class="getStatusBadgeClass(intervention.status)"
+                >
                   {{ intervention.status }}
                 </span>
               </td>
               <td>
-                <button class="btn btn-link text-secondary mb-0 px-2" @click="$emit('edit', intervention)">
+                <button
+                  class="btn btn-link text-secondary mb-0 px-2"
+                  @click="$emit('edit', intervention)"
+                >
                   <i class="fas fa-edit text-xs"></i>
                 </button>
               </td>
@@ -72,45 +127,57 @@ import { defineProps, defineEmits } from "vue";
 defineProps({
   interventions: {
     type: Array,
-    default: () => []
-  }
+    default: () => [],
+  },
 });
 
 defineEmits(["edit"]);
 
 const formatDate = (dateString) => {
   if (!dateString) return "-";
-  return new Date(dateString).toLocaleDateString('fr-FR', { weekday: 'long', day: 'numeric', month: 'short' });
+  return new Date(dateString).toLocaleDateString("fr-FR", {
+    weekday: "long",
+    day: "numeric",
+    month: "short",
+  });
 };
 
 const formatTime = (dateString) => {
   if (!dateString) return "-";
-  return new Date(dateString).toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });
+  return new Date(dateString).toLocaleTimeString("fr-FR", {
+    hour: "2-digit",
+    minute: "2-digit",
+  });
 };
 
 const getInitials = (name) => {
   if (!name) return "?";
-  return name.split(' ').map(n => n[0]).join('').substring(0, 2).toUpperCase();
+  return name
+    .split(" ")
+    .map((n) => n[0])
+    .join("")
+    .substring(0, 2)
+    .toUpperCase();
 };
 
 const getTypeColor = (type) => {
   const colors = {
-    'Soin': '#3b82f6',
-    'Transport': '#10b981',
-    'Mise en bière': '#f59e0b',
-    'Cérémonie': '#8b5cf6'
+    Soin: "#3b82f6",
+    Transport: "#10b981",
+    "Mise en bière": "#f59e0b",
+    Cérémonie: "#8b5cf6",
   };
-  return colors[type] || '#6b7280';
+  return colors[type] || "#6b7280";
 };
 
 const getStatusBadgeClass = (status) => {
   const map = {
-    'Confirmé': 'bg-gradient-info',
-    'Terminé': 'bg-gradient-success',
-    'En attente': 'bg-gradient-warning',
-    'Annulé': 'bg-gradient-danger'
+    Confirmé: "bg-gradient-info",
+    Terminé: "bg-gradient-success",
+    "En attente": "bg-gradient-warning",
+    Annulé: "bg-gradient-danger",
   };
-  return map[status] || 'bg-gradient-secondary';
+  return map[status] || "bg-gradient-secondary";
 };
 </script>
 

thanasoft-front/src/components/molecules/Planning/PlanningViewToggles.vue

@@ -1,28 +1,29 @@
 <template>
   <div class="d-flex gap-2">
-    <button
+    <soft-button
       v-for="view in views"
       :key="view.id"
-      class="btn d-inline-flex align-items-center justify-content-center gap-2 border-0 shadow-sm transition-all"
-      :class="[
-        activeView === view.id ? 'btn-active' : 'btn-inactive'
-      ]"
+      class="d-inline-flex align-items-center justify-content-center gap-2 transition-all"
+      :color="activeView === view.id ? 'info' : 'secondary'"
+      :variant="activeView === view.id ? 'gradient' : 'outline'"
+      size="sm"
       @click="$emit('update:activeView', view.id)"
     >
       <i :class="view.icon"></i>
       <span class="d-none d-sm-inline">{{ view.label }}</span>
-    </button>
+    </soft-button>
   </div>
 </template>
 
 <script setup>
 import { defineProps, defineEmits } from "vue";
+import SoftButton from "@/components/SoftButton.vue";
 
 defineProps({
   activeView: {
     type: String,
-    default: "grille"
-  }
+    default: "grille",
+  },
 });
 
 defineEmits(["update:activeView"]);
@@ -30,35 +31,16 @@ defineEmits(["update:activeView"]);
 const views = [
   { id: "liste", label: "Liste", icon: "fas fa-list", color: "gray" },
   { id: "kanban", label: "Kanban", icon: "fas fa-columns", color: "gray" },
-  { id: "grille", label: "Grille", icon: "fas fa-calendar-alt", color: "indigo" }
+  {
+    id: "grille",
+    label: "Grille",
+    icon: "fas fa-calendar-alt",
+    color: "indigo",
+  },
 ];
 </script>
 
 <style scoped>
-.btn {
-  border-radius: 0.5rem;
-  font-weight: 500;
-  padding: 0.5rem 1rem;
-  font-size: 0.875rem;
-  white-space: nowrap;
-}
-
-.btn-active {
-  background-color: #4f46e5;
-  color: white;
-}
-
-.btn-inactive {
-  background-color: white;
-  color: #64748b;
-  border: 1px solid #e2e8f0 !important;
-}
-
-.btn-inactive:hover {
-  background-color: #f8fafc;
-  color: #1e293b;
-}
-
 .transition-all {
   transition: all 0.2s ease-in-out;
 }

thanasoft-front/src/components/molecules/Planning/PlanningWeekGrid.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="calendar-grid-container card h-100 border-0 shadow-sm rounded-xl">
     <div class="card-body p-3 h-100">
-      <div ref="calendarEl" id="fullCalendarGrid" class="h-100"></div>
+      <div id="fullCalendarGrid" ref="calendarEl" class="h-100"></div>
     </div>
   </div>
 </template>
@@ -16,12 +16,12 @@ import frLocale from "@fullcalendar/core/locales/fr";
 const props = defineProps({
   startDate: {
     type: Date,
-    default: () => new Date()
+    default: () => new Date(),
   },
   interventions: {
     type: Array,
-    default: () => []
-  }
+    default: () => [],
+  },
 });
 
 const emit = defineEmits(["cell-click", "edit"]);
@@ -49,7 +49,7 @@ const initializeCalendar = () => {
     contentHeight: "auto",
     expandRows: true,
     stickyHeaderDates: true,
-    dayHeaderFormat: { weekday: 'long', day: 'numeric', month: 'short' }, // "Lundi 12 janv."
+    dayHeaderFormat: { weekday: "long", day: "numeric", month: "short" }, // "Lundi 12 janv."
     events: mapEvents(props.interventions),
     eventClick: (info) => {
       const originalEvent = info.event.extendedProps.originalData;
@@ -61,39 +61,39 @@ const initializeCalendar = () => {
     },
     // Styling customization via class names injection if needed
     eventClassNames: (arg) => {
-      return ['shadow-sm', 'border-0']; 
-    }
+      return ["shadow-sm", "border-0"];
+    },
   });
 
   calendar.render();
 };
 
 const mapEvents = (interventions) => {
-  return interventions.map(i => {
+  return interventions.map((i) => {
     // Map props.interventions structure to FullCalendar event object
     // Assuming intervention has: id, date (ISO string), title (or type), status, color
     const typeColors = {
-      'Soin': '#3b82f6',
-      'Transport': '#10b981',
-      'Mise en bière': '#f59e0b',
-      'Cérémonie': '#8b5cf6'
+      Soin: "#3b82f6",
+      Transport: "#10b981",
+      "Mise en bière": "#f59e0b",
+      Cérémonie: "#8b5cf6",
     };
-    
+
     // Default duration 1 hour if not specified
     const start = new Date(i.date);
-    const end = new Date(start.getTime() + 60 * 60 * 1000); 
+    const end = new Date(start.getTime() + 60 * 60 * 1000);
 
     return {
       id: i.id,
       title: i.deceased ? `${i.type} - ${i.deceased}` : i.type,
       start: i.date,
       end: i.end || end, // Use provided end or default
-      backgroundColor: typeColors[i.type] || '#6b7280',
-      borderColor: typeColors[i.type] || '#6b7280',
-      textColor: '#ffffff',
+      backgroundColor: typeColors[i.type] || "#6b7280",
+      borderColor: typeColors[i.type] || "#6b7280",
+      textColor: "#ffffff",
       extendedProps: {
-        originalData: i
-      }
+        originalData: i,
+      },
     };
   });
 };
@@ -102,19 +102,25 @@ onMounted(() => {
   initializeCalendar();
 });
 
-watch(() => props.startDate, (newDate) => {
-  if (calendar) {
-    calendar.gotoDate(newDate);
+watch(
+  () => props.startDate,
+  (newDate) => {
+    if (calendar) {
+      calendar.gotoDate(newDate);
+    }
   }
-});
-
-watch(() => props.interventions, (newInterventions) => {
-  if (calendar) {
-    calendar.removeAllEvents();
-    calendar.addEventSource(mapEvents(newInterventions));
-  }
-}, { deep: true });
+);
 
+watch(
+  () => props.interventions,
+  (newInterventions) => {
+    if (calendar) {
+      calendar.removeAllEvents();
+      calendar.addEventSource(mapEvents(newInterventions));
+    }
+  },
+  { deep: true }
+);
 </script>
 
 <style scoped>
@@ -147,7 +153,8 @@ watch(() => props.interventions, (newInterventions) => {
   border: none;
 }
 
-:deep(.fc td), :deep(.fc th) {
+:deep(.fc td),
+:deep(.fc th) {
   border-color: #e9ecef;
 }
 

thanasoft-front/src/components/molecules/Quote/QuoteLinesTable.vue

@@ -92,8 +92,8 @@ const props = defineProps({
 });
 
 const formatCurrency = (value) => {
-  const numberValue = typeof value === 'string' ? parseFloat(value) : value;
-  if (isNaN(numberValue)) return '0,00 €';
+  const numberValue = typeof value === "string" ? parseFloat(value) : value;
+  if (isNaN(numberValue)) return "0,00 €";
 
   return new Intl.NumberFormat("fr-FR", {
     style: "currency",

thanasoft-front/src/components/molecules/Quote/QuoteSummary.vue

@@ -32,9 +32,9 @@ const props = defineProps({
 });
 
 const formatCurrency = (value) => {
-  const numberValue = typeof value === 'string' ? parseFloat(value) : value;
-  if (isNaN(numberValue)) return '0,00 €';
-  
+  const numberValue = typeof value === "string" ? parseFloat(value) : value;
+  if (isNaN(numberValue)) return "0,00 €";
+
   return new Intl.NumberFormat("fr-FR", {
     style: "currency",
     currency: "EUR",

thanasoft-front/src/components/molecules/Statistics/ThanatometerPerformance.vue

@@ -33,7 +33,12 @@
             </td>
             <td>
               <div class="satisfaction-stars">
-                <span v-for="i in 5" :key="i" class="star" :class="getStarClass(i, practitioner.satisfaction)">
+                <span
+                  v-for="i in 5"
+                  :key="i"
+                  class="star"
+                  :class="getStarClass(i, practitioner.satisfaction)"
+                >
                   <i class="fas fa-star"></i>
                 </span>
               </div>

thanasoft-front/src/components/molecules/Stock/NewReceptionForm.vue

@@ -1,53 +1,64 @@
 <template>
-  <form @submit.prevent="submitForm" class="reception-form">
+  <form class="reception-form" @submit.prevent="submitForm">
     <!-- Header Section -->
     <div class="form-section">
       <div class="section-title">
         <i class="fas fa-file-invoice"></i>
         Informations générales
       </div>
-      
+
       <!-- Row 1: Commande Fournisseur, Entrepôt -->
       <div class="row g-3 mb-3">
         <div class="col-md-6">
-          <label class="form-label">Commande Fournisseur <span class="text-danger">*</span></label>
-          <select 
-            v-model="formData.purchase_order_id" 
+          <label class="form-label"
+            >Commande Fournisseur <span class="text-danger">*</span></label
+          >
+          <select
+            v-model="formData.purchase_order_id"
             class="form-select custom-select"
             :class="{ 'is-invalid': errors.purchase_order_id }"
           >
             <option value="">Sélectionner une commande</option>
             <option v-for="po in purchaseOrders" :key="po.id" :value="po.id">
-              {{ po.po_number }} - {{ po.fournisseur?.nom || 'Fournisseur ' + po.fournisseur_id }}
+              {{ po.po_number }} -
+              {{ po.fournisseur?.nom || "Fournisseur " + po.fournisseur_id }}
             </option>
           </select>
           <div v-if="errors.purchase_order_id" class="invalid-feedback">
             {{ errors.purchase_order_id }}
           </div>
         </div>
-        
+
         <div class="col-md-6 position-relative warehouse-search-container">
-          <label class="form-label">Entrepôt de Destination <span class="text-danger">*</span></label>
+          <label class="form-label"
+            >Entrepôt de Destination <span class="text-danger">*</span></label
+          >
           <div class="search-input-wrapper">
             <i class="fas fa-search search-icon"></i>
             <soft-input
               v-model="warehouseSearchQuery"
               type="text"
               placeholder="Rechercher un entrepôt..."
-              @input="handleWarehouseSearch"
-              @focus="showWarehouseResults = true"
               required
               class="search-input"
+              @input="handleWarehouseSearch"
+              @focus="showWarehouseResults = true"
             />
           </div>
-          
+
           <!-- Search Results Dropdown -->
-          <div 
-            v-if="showWarehouseResults && (warehouseSearchResults.length > 0 || isSearchingWarehouses)" 
+          <div
+            v-if="
+              showWarehouseResults &&
+              (warehouseSearchResults.length > 0 || isSearchingWarehouses)
+            "
             class="search-dropdown"
           >
             <div v-if="isSearchingWarehouses" class="dropdown-loading">
-              <div class="spinner-border spinner-border-sm text-primary" role="status">
+              <div
+                class="spinner-border spinner-border-sm text-primary"
+                role="status"
+              >
                 <span class="visually-hidden">Chargement...</span>
               </div>
             </div>
@@ -61,7 +72,8 @@
               >
                 <span class="item-name">{{ warehouse.name }}</span>
                 <span class="item-details">
-                  {{ warehouse.city || 'Ville non spécifiée' }} • {{ warehouse.country_code || '' }}
+                  {{ warehouse.city || "Ville non spécifiée" }} •
+                  {{ warehouse.country_code || "" }}
                 </span>
               </button>
             </template>
@@ -83,12 +95,10 @@
           />
         </div>
         <div class="col-md-4">
-          <label class="form-label">Date de Réception <span class="text-danger">*</span></label>
-          <soft-input
-            v-model="formData.receipt_date"
-            type="date"
-            required
-          />
+          <label class="form-label"
+            >Date de Réception <span class="text-danger">*</span></label
+          >
+          <soft-input v-model="formData.receipt_date" type="date" required />
         </div>
         <div class="col-md-4">
           <label class="form-label">Statut</label>
@@ -125,8 +135,8 @@
           type="button"
           color="primary"
           size="sm"
-          @click="addLine"
           class="add-btn"
+          @click="addLine"
         >
           <i class="fas fa-plus"></i> Ajouter ligne
         </soft-button>
@@ -140,31 +150,42 @@
         >
           <div class="row g-2 align-items-end">
             <div class="col-md-3 position-relative product-search-container">
-              <label class="form-label text-xs">Produit <span class="text-danger">*</span></label>
+              <label class="form-label text-xs"
+                >Produit <span class="text-danger">*</span></label
+              >
               <div class="search-input-wrapper">
                 <i class="fas fa-search search-icon"></i>
                 <soft-input
                   v-model="line.searchQuery"
                   type="text"
                   placeholder="Rechercher un produit..."
-                  @input="handleProductSearch(index)"
-                  @focus="activeLineIndex = index; showProductResults = true"
                   required
                   class="search-input"
+                  @input="handleProductSearch(index)"
+                  @focus="
+                    activeLineIndex = index;
+                    showProductResults = true;
+                  "
                 />
               </div>
 
               <!-- Product Search Results Dropdown -->
-              <div 
-                v-show="showProductResults && activeLineIndex === index" 
+              <div
+                v-show="showProductResults && activeLineIndex === index"
                 class="search-dropdown product-dropdown"
               >
                 <div v-if="isSearchingProducts" class="dropdown-loading">
-                  <div class="spinner-border spinner-border-sm text-primary" role="status">
+                  <div
+                    class="spinner-border spinner-border-sm text-primary"
+                    role="status"
+                  >
                     <span class="visually-hidden">Chargement...</span>
                   </div>
                 </div>
-                <div v-else-if="productSearchResults.length === 0" class="dropdown-empty">
+                <div
+                  v-else-if="productSearchResults.length === 0"
+                  class="dropdown-empty"
+                >
                   Aucun produit trouvé
                 </div>
                 <template v-else>
@@ -177,26 +198,31 @@
                   >
                     <span class="item-name">{{ product.nom }}</span>
                     <span class="item-details">
-                      Réf: {{ product.reference }} • Stock: {{ product.stock_actuel }} {{ product.unite }}
+                      Réf: {{ product.reference }} • Stock:
+                      {{ product.stock_actuel }} {{ product.unite }}
                     </span>
                   </button>
                 </template>
               </div>
             </div>
-            
+
             <div class="col-md-2">
               <label class="form-label text-xs">Conditionnement</label>
-              <select 
-                class="form-select form-select-sm" 
+              <select
                 v-model="line.packaging_id"
+                class="form-select form-select-sm"
               >
                 <option :value="null">Unité</option>
-                <option v-for="pkg in getPackagings(line.product_id)" :key="pkg.id" :value="pkg.id">
+                <option
+                  v-for="pkg in getPackagings(line.product_id)"
+                  :key="pkg.id"
+                  :value="pkg.id"
+                >
                   {{ pkg.name }} ({{ pkg.qty_base }} unités)
                 </option>
               </select>
             </div>
-            
+
             <div class="col-md-2">
               <label class="form-label text-xs">Colis Reçus</label>
               <soft-input
@@ -207,7 +233,7 @@
                 step="0.001"
               />
             </div>
-            
+
             <div class="col-md-2">
               <label class="form-label text-xs">Unités Reçues</label>
               <soft-input
@@ -218,7 +244,7 @@
                 step="0.001"
               />
             </div>
-            
+
             <div class="col-md-2">
               <label class="form-label text-xs">Prix Unitaire</label>
               <soft-input
@@ -229,14 +255,14 @@
                 step="0.01"
               />
             </div>
-            
+
             <div class="col-md-1 d-flex flex-column align-items-end gap-2">
               <button
                 type="button"
                 class="btn-delete"
-                @click="removeLine(index)"
                 :disabled="formData.lines.length === 1"
                 title="Supprimer la ligne"
+                @click="removeLine(index)"
               >
                 <i class="fas fa-trash-alt"></i>
               </button>
@@ -252,8 +278,8 @@
         type="button"
         color="secondary"
         variant="outline"
-        @click="cancelForm"
         class="btn-cancel"
+        @click="cancelForm"
       >
         <i class="fas fa-times"></i> Annuler
       </soft-button>
@@ -270,11 +296,19 @@
 </template>
 
 <script setup>
-import { ref, defineEmits, defineProps, onMounted, onUnmounted } from "vue";
+import {
+  ref,
+  watch,
+  defineEmits,
+  defineProps,
+  onMounted,
+  onUnmounted,
+} from "vue";
 import SoftInput from "@/components/SoftInput.vue";
 import SoftButton from "@/components/SoftButton.vue";
 import WarehouseService from "@/services/warehouse";
 import ProductService from "@/services/product";
+import { PurchaseOrderService } from "@/services/purchaseOrder";
 import { useNotificationStore } from "@/stores/notification";
 
 const props = defineProps({
@@ -315,8 +349,10 @@ const handleWarehouseSearch = () => {
     isSearchingWarehouses.value = true;
     showWarehouseResults.value = true;
     try {
-      const results = await WarehouseService.searchWarehouses(warehouseSearchQuery.value);
-      warehouseSearchResults.value = results.filter(w => w && w.id);
+      const results = await WarehouseService.searchWarehouses(
+        warehouseSearchQuery.value
+      );
+      warehouseSearchResults.value = results.filter((w) => w && w.id);
     } catch (error) {
       console.error("Error searching warehouses:", error);
     } finally {
@@ -328,7 +364,7 @@ const handleWarehouseSearch = () => {
 const selectWarehouse = (warehouse) => {
   if (!warehouse || !warehouse.id) return;
   if (searchTimeout) clearTimeout(searchTimeout);
-  
+
   formData.value.warehouse_id = warehouse.id;
   warehouseSearchQuery.value = warehouse.name;
   showWarehouseResults.value = false;
@@ -361,10 +397,11 @@ const handleProductSearch = (index) => {
     showProductResults.value = true;
     try {
       const response = await ProductService.searchProducts(query);
-      if (activeLineIndex.value === index && 
-          formData.value.lines[index] && 
-          formData.value.lines[index].searchQuery === query) {
-        
+      if (
+        activeLineIndex.value === index &&
+        formData.value.lines[index] &&
+        formData.value.lines[index].searchQuery === query
+      ) {
         let results = [];
         if (response && response.data) {
           if (Array.isArray(response.data)) {
@@ -373,8 +410,8 @@ const handleProductSearch = (index) => {
             results = response.data.data;
           }
         }
-        
-        productSearchResults.value = results.filter(p => p && p.id);
+
+        productSearchResults.value = results.filter((p) => p && p.id);
       }
     } catch (error) {
       console.error("Error searching products:", error);
@@ -392,13 +429,13 @@ const selectProduct = (index, product) => {
 
   const line = formData.value.lines[index];
   if (!line) return;
-  
+
   line.product_id = product.id;
   line.searchQuery = product.nom;
-  
+
   // Load packagings for this product
   loadProductPackagings(product.id);
-  
+
   showProductResults.value = false;
   activeLineIndex.value = null;
 };
@@ -408,11 +445,15 @@ const loadProductPackagings = async (productId) => {
     const response = await ProductService.getProduct(productId);
     if (response && response.data) {
       // Store packagings for this product
-      productPackagings.value[productId] = response.data.conditionnement ? [{
-        id: 1,
-        name: response.data.conditionnement_nom || 'Conditionnement',
-        qty_base: response.data.conditionnement_quantite || 1
-      }] : [];
+      productPackagings.value[productId] = response.data.conditionnement
+        ? [
+            {
+              id: 1,
+              name: response.data.conditionnement_nom || "Conditionnement",
+              qty_base: response.data.conditionnement_quantite || 1,
+            },
+          ]
+        : [];
     }
   } catch (error) {
     console.error("Error loading product packagings:", error);
@@ -425,30 +466,34 @@ const getPackagings = (productId) => {
 
 // Close dropdowns on click outside
 const handleClickOutside = (event) => {
-  const warehouseContainer = document.querySelector('.warehouse-search-container');
+  const warehouseContainer = document.querySelector(
+    ".warehouse-search-container"
+  );
   if (warehouseContainer && !warehouseContainer.contains(event.target)) {
     showWarehouseResults.value = false;
   }
 
-  const productContainers = document.querySelectorAll('.product-search-container');
+  const productContainers = document.querySelectorAll(
+    ".product-search-container"
+  );
   let clickedInsideAnyProduct = false;
-  productContainers.forEach(container => {
+  productContainers.forEach((container) => {
     if (container.contains(event.target)) {
       clickedInsideAnyProduct = true;
     }
   });
-  
+
   if (!clickedInsideAnyProduct) {
     showProductResults.value = false;
   }
 };
 
 onMounted(() => {
-  document.addEventListener('click', handleClickOutside);
+  document.addEventListener("click", handleClickOutside);
 });
 
 onUnmounted(() => {
-  document.removeEventListener('click', handleClickOutside);
+  document.removeEventListener("click", handleClickOutside);
 });
 
 const formData = ref({
@@ -472,6 +517,60 @@ const formData = ref({
 
 const errors = ref({});
 
+const hydrateLinesFromPurchaseOrder = async (purchaseOrderId) => {
+  if (!purchaseOrderId) {
+    return;
+  }
+
+  try {
+    const response = await PurchaseOrderService.getPurchaseOrder(
+      parseInt(purchaseOrderId)
+    );
+    const order = response?.data;
+    const orderLines = Array.isArray(order?.lines)
+      ? order.lines
+      : Array.isArray(order?.lines?.data)
+      ? order.lines.data
+      : [];
+
+    if (orderLines.length === 0) {
+      return;
+    }
+
+    formData.value.lines = orderLines.map((line) => ({
+      product_id: line.product_id || "",
+      searchQuery: line.product?.nom || line.description || "",
+      packaging_id: null,
+      packages_qty_received: null,
+      units_qty_received: Number(line.quantity || 0) || null,
+      unit_price: Number(line.unit_price || 0) || null,
+    }));
+  } catch (error) {
+    console.error("Error hydrating receipt lines from purchase order:", error);
+  }
+};
+
+watch(
+  () => formData.value.purchase_order_id,
+  async (newPurchaseOrderId) => {
+    if (!newPurchaseOrderId) {
+      formData.value.lines = [
+        {
+          product_id: "",
+          searchQuery: "",
+          packaging_id: null,
+          packages_qty_received: null,
+          units_qty_received: null,
+          unit_price: null,
+        },
+      ];
+      return;
+    }
+
+    await hydrateLinesFromPurchaseOrder(newPurchaseOrderId);
+  }
+);
+
 const addLine = () => {
   formData.value.lines.push({
     product_id: "",
@@ -515,13 +614,15 @@ const submitForm = () => {
     receipt_date: formData.value.receipt_date,
     status: formData.value.status,
     notes: formData.value.notes || undefined,
-    lines: formData.value.lines.map(line => ({
-      product_id: parseInt(line.product_id),
-      packaging_id: line.packaging_id ? parseInt(line.packaging_id) : null,
-      packages_qty_received: line.packages_qty_received,
-      units_qty_received: line.units_qty_received,
-      unit_price: line.unit_price,
-    })).filter(line => line.product_id),
+    lines: formData.value.lines
+      .map((line) => ({
+        product_id: parseInt(line.product_id),
+        packaging_id: line.packaging_id ? parseInt(line.packaging_id) : null,
+        packages_qty_received: line.packages_qty_received,
+        units_qty_received: line.units_qty_received,
+        unit_price: line.unit_price,
+      }))
+      .filter((line) => line.product_id),
   };
 
   emit("submit", payload);

thanasoft-front/src/components/molecules/Stock/WarehouseDetailInfo.vue

@@ -1,22 +1,28 @@
 <template>
   <ul class="list-group">
     <li class="list-group-item border-0 ps-0 pt-0 text-sm">
-      <strong class="text-dark">Nom de l'entrepôt:</strong> &nbsp; {{ warehouse.name }}
+      <strong class="text-dark">Nom de l'entrepôt:</strong> &nbsp;
+      {{ warehouse.name }}
     </li>
     <li class="list-group-item border-0 ps-0 text-sm">
-      <strong class="text-dark">Adresse 1:</strong> &nbsp; {{ warehouse.address_line1 || '-' }}
+      <strong class="text-dark">Adresse 1:</strong> &nbsp;
+      {{ warehouse.address_line1 || "-" }}
     </li>
     <li class="list-group-item border-0 ps-0 text-sm">
-      <strong class="text-dark">Adresse 2:</strong> &nbsp; {{ warehouse.address_line2 || '-' }}
+      <strong class="text-dark">Adresse 2:</strong> &nbsp;
+      {{ warehouse.address_line2 || "-" }}
     </li>
     <li class="list-group-item border-0 ps-0 text-sm">
-      <strong class="text-dark">Code Postal:</strong> &nbsp; {{ warehouse.postal_code || '-' }}
+      <strong class="text-dark">Code Postal:</strong> &nbsp;
+      {{ warehouse.postal_code || "-" }}
     </li>
     <li class="list-group-item border-0 ps-0 text-sm">
-      <strong class="text-dark">Ville:</strong> &nbsp; {{ warehouse.city || '-' }}
+      <strong class="text-dark">Ville:</strong> &nbsp;
+      {{ warehouse.city || "-" }}
     </li>
     <li class="list-group-item border-0 ps-0 text-sm">
-      <strong class="text-dark">Pays:</strong> &nbsp; {{ warehouse.country_code }}
+      <strong class="text-dark">Pays:</strong> &nbsp;
+      {{ warehouse.country_code }}
     </li>
   </ul>
 </template>

thanasoft-front/src/components/molecules/Stock/WarehouseForm.vue

@@ -58,7 +58,11 @@
       </div>
     </div>
 
-    <div v-if="error" class="alert alert-danger text-white text-sm mt-3" role="alert">
+    <div
+      v-if="error"
+      class="alert alert-danger text-white text-sm mt-3"
+      role="alert"
+    >
       {{ error }}
     </div>
 
@@ -67,8 +71,8 @@
         color="secondary"
         variant="gradient"
         class="me-2"
-        @click="$emit('cancel')"
         type="button"
+        @click="$emit('cancel')"
       >
         Annuler
       </soft-button>

thanasoft-front/src/components/molecules/Tables/CRM/ClientTable.vue

@@ -15,19 +15,23 @@
           <option :value="20">20</option>
           <option :value="50">50</option>
         </select>
-        <span class="text-secondary text-xs font-weight-bold">éléments par page</span>
+        <span class="text-secondary text-xs font-weight-bold"
+          >éléments par page</span
+        >
       </div>
-      
+
       <div class="d-flex align-items-center">
-         <div class="input-group">
-            <span class="input-group-text text-body"><i class="fas fa-search" aria-hidden="true"></i></span>
-            <input 
-              type="text" 
-              class="form-control form-control-sm" 
-              placeholder="Rechercher..."
-              @input="onSearch"
-            >
-          </div>
+        <div class="input-group">
+          <span class="input-group-text text-body"
+            ><i class="fas fa-search" aria-hidden="true"></i
+          ></span>
+          <input
+            type="text"
+            class="form-control form-control-sm"
+            placeholder="Rechercher..."
+            @input="onSearch"
+          />
+        </div>
       </div>
     </div>
 
@@ -227,39 +231,66 @@
       </table>
     </div>
 
-     <!-- Pagination Footer -->
-    <div v-if="!loading && data.length > 0" class="d-flex justify-content-between align-items-center mt-3 px-3">
+    <!-- Pagination Footer -->
+    <div
+      v-if="!loading && data.length > 0"
+      class="d-flex justify-content-between align-items-center mt-3 px-3"
+    >
       <div class="text-xs text-secondary font-weight-bold">
-        Affichage de {{ pagination.from }} à {{ pagination.to }} sur {{ pagination.total }} clients
+        Affichage de {{ pagination.from }} à {{ pagination.to }} sur
+        {{ pagination.total }} clients
       </div>
 
       <nav aria-label="Page navigation">
         <ul class="pagination pagination-sm pagination-success mb-0">
-          <li class="page-item" :class="{ disabled: pagination.current_page === 1 }">
-            <a class="page-link" href="#" aria-label="Previous" @click.prevent="changePage(pagination.current_page - 1)">
-              <span aria-hidden="true"><i class="fa fa-angle-left" aria-hidden="true"></i></span>
+          <li
+            class="page-item"
+            :class="{ disabled: pagination.current_page === 1 }"
+          >
+            <a
+              class="page-link"
+              href="#"
+              aria-label="Previous"
+              @click.prevent="changePage(pagination.current_page - 1)"
+            >
+              <span aria-hidden="true"
+                ><i class="fa fa-angle-left" aria-hidden="true"></i
+              ></span>
             </a>
           </li>
-          
-          <li 
-            v-for="page in displayedPages" 
-            :key="page" 
-            class="page-item" 
+
+          <li
+            v-for="page in displayedPages"
+            :key="page"
+            class="page-item"
             :class="{ active: pagination.current_page === page }"
           >
-            <a class="page-link" href="#" @click.prevent="changePage(page)">{{ page }}</a>
+            <a class="page-link" href="#" @click.prevent="changePage(page)">{{
+              page
+            }}</a>
           </li>
 
-          <li class="page-item" :class="{ disabled: pagination.current_page === pagination.last_page }">
-            <a class="page-link" href="#" aria-label="Next" @click.prevent="changePage(pagination.current_page + 1)">
-              <span aria-hidden="true"><i class="fa fa-angle-right" aria-hidden="true"></i></span>
+          <li
+            class="page-item"
+            :class="{
+              disabled: pagination.current_page === pagination.last_page,
+            }"
+          >
+            <a
+              class="page-link"
+              href="#"
+              aria-label="Next"
+              @click.prevent="changePage(pagination.current_page + 1)"
+            >
+              <span aria-hidden="true"
+                ><i class="fa fa-angle-right" aria-hidden="true"></i
+              ></span>
             </a>
           </li>
         </ul>
       </nav>
     </div>
 
-
     <!-- Empty State -->
     <div v-if="!loading && data.length === 0" class="empty-state">
       <div class="empty-icon">
@@ -282,7 +313,13 @@ import SoftAvatar from "@/components/SoftAvatar.vue";
 import { defineProps, defineEmits } from "vue";
 import debounce from "lodash/debounce";
 
-const emit = defineEmits(["view", "delete", "page-change", "per-page-change", "search-change"]);
+const emit = defineEmits([
+  "view",
+  "delete",
+  "page-change",
+  "per-page-change",
+  "search-change",
+]);
 
 // Sample avatar images
 import img1 from "@/assets/img/team-2.jpg";
@@ -326,24 +363,31 @@ const displayedPages = computed(() => {
   const current = props.pagination.current_page;
   const delta = 2;
   const range = [];
-  
-  for (let i = Math.max(2, current - delta); i <= Math.min(total - 1, current + delta); i++) {
+
+  for (
+    let i = Math.max(2, current - delta);
+    i <= Math.min(total - 1, current + delta);
+    i++
+  ) {
     range.push(i);
   }
-  
+
   if (current - delta > 2) {
     range.unshift("...");
   }
   if (current + delta < total - 1) {
     range.push("...");
   }
-  
+
   range.unshift(1);
   if (total > 1) {
     range.push(total);
   }
-  
-  return range.filter((val, index, self) => val !== "..." || (val === "..." && self[index - 1] !== "..."));
+
+  return range.filter(
+    (val, index, self) =>
+      val !== "..." || (val === "..." && self[index - 1] !== "...")
+  );
 });
 
 // Methods
@@ -359,7 +403,7 @@ const onPerPageChange = (event) => {
 };
 
 const onSearch = debounce((event) => {
-    emit("search-change", event.target.value);
+  emit("search-change", event.target.value);
 }, 300);
 
 const getRandomAvatar = () => {

thanasoft-front/src/components/molecules/Tables/ClientGroup/ClientGroupTable.vue

@@ -31,7 +31,9 @@
 
             <!-- Created At -->
             <td class="text-sm font-weight-bold">
-              <span class="my-2 text-xs">{{ formatDate(group.created_at) }}</span>
+              <span class="my-2 text-xs">{{
+                formatDate(group.created_at)
+              }}</span>
             </td>
 
             <!-- Actions -->
@@ -71,7 +73,14 @@
 </template>
 
 <script setup>
-import { ref, onMounted, watch, onUnmounted, defineProps, defineEmits } from "vue";
+import {
+  ref,
+  onMounted,
+  watch,
+  onUnmounted,
+  defineProps,
+  defineEmits,
+} from "vue";
 import { DataTable } from "simple-datatables";
 import SoftCheckbox from "@/components/SoftCheckbox.vue";
 

thanasoft-front/src/components/molecules/Tables/Fournisseurs/CommandeTable.vue

@@ -42,7 +42,9 @@
                   alt="supplier image"
                   circular
                 />
-                <span>{{ commande.fournisseur?.name || commande.supplier }}</span>
+                <span>{{
+                  commande.fournisseur?.name || commande.supplier
+                }}</span>
               </div>
             </td>
 
@@ -72,7 +74,9 @@
 
             <!-- Items Count -->
             <td class="text-xs font-weight-bold">
-              <span class="badge bg-secondary">{{ commande.lines?.length || commande.items_count || 0 }}</span>
+              <span class="badge bg-secondary">{{
+                commande.lines?.length || commande.items_count || 0
+              }}</span>
             </td>
 
             <!-- Actions -->

thanasoft-front/src/components/molecules/Tables/Fournisseurs/FactureFournisseurTable.vue

@@ -36,7 +36,9 @@
 
             <!-- Total TTC -->
             <td class="text-xs font-weight-bold">
-              <span class="my-2 text-xs">{{ formatCurrency(facture.totalTtc) }}</span>
+              <span class="my-2 text-xs">{{
+                formatCurrency(facture.totalTtc)
+              }}</span>
             </td>
 
             <!-- Status -->
@@ -47,7 +49,10 @@
                   variant="outline"
                   class="btn-icon-only btn-rounded mb-0 me-2 btn-sm d-flex align-items-center justify-content-center"
                 >
-                  <i :class="getStatusIcon(facture.status)" aria-hidden="true"></i>
+                  <i
+                    :class="getStatusIcon(facture.status)"
+                    aria-hidden="true"
+                  ></i>
                 </soft-button>
                 <span>{{ getStatusLabel(facture.status) }}</span>
               </div>

thanasoft-front/src/components/molecules/Tables/Stock/GoodsReceiptTable.vue

@@ -21,24 +21,33 @@
 
             <!-- Receipt Date -->
             <td class="text-xs font-weight-bold">
-              <span class="my-2 text-xs">{{ formatDate(receipt.receipt_date) }}</span>
+              <span class="my-2 text-xs">{{
+                formatDate(receipt.receipt_date)
+              }}</span>
             </td>
 
             <!-- Purchase Order -->
             <td class="text-xs font-weight-bold">
               <span class="my-2 text-xs">
-                {{ receipt.purchase_order?.po_number || receipt.purchase_order_id }}
+                {{
+                  receipt.purchase_order?.po_number || receipt.purchase_order_id
+                }}
               </span>
             </td>
 
             <!-- Warehouse -->
             <td class="text-xs font-weight-bold">
-              <span class="my-2 text-xs">{{ receipt.warehouse?.name || '-' }}</span>
+              <span class="my-2 text-xs">{{
+                receipt.warehouse?.name || "-"
+              }}</span>
             </td>
 
             <!-- Status -->
             <td class="text-xs font-weight-bold">
-              <soft-badge :color="getStatusColor(receipt.status)" variant="gradient">
+              <soft-badge
+                :color="getStatusColor(receipt.status)"
+                variant="gradient"
+              >
                 {{ getStatusLabel(receipt.status) }}
               </soft-badge>
             </td>
@@ -107,28 +116,28 @@ const props = defineProps({
 const dataTableInstance = ref(null);
 
 const formatDate = (dateString) => {
-  if (!dateString) return '-';
+  if (!dateString) return "-";
   const date = new Date(dateString);
-  return date.toLocaleDateString('fr-FR');
+  return date.toLocaleDateString("fr-FR");
 };
 
 const getStatusColor = (status) => {
   switch (status) {
-    case 'draft':
-      return 'secondary';
-    case 'posted':
-      return 'success';
+    case "draft":
+      return "secondary";
+    case "posted":
+      return "success";
     default:
-      return 'info';
+      return "info";
   }
 };
 
 const getStatusLabel = (status) => {
   switch (status) {
-    case 'draft':
-      return 'Brouillon';
-    case 'posted':
-      return 'Validée';
+    case "draft":
+      return "Brouillon";
+    case "posted":
+      return "Validée";
     default:
       return status;
   }

thanasoft-front/src/components/molecules/Tables/Stock/WarehouseTable.vue

@@ -25,19 +25,25 @@
 
             <!-- City -->
             <td class="text-xs font-weight-bold">
-              <span class="my-2 text-xs">{{ warehouse.city || '-' }}</span>
+              <span class="my-2 text-xs">{{ warehouse.city || "-" }}</span>
             </td>
 
             <!-- Postal Code -->
             <td class="text-xs font-weight-bold">
-              <span class="my-2 text-xs">{{ warehouse.postal_code || '-' }}</span>
+              <span class="my-2 text-xs">{{
+                warehouse.postal_code || "-"
+              }}</span>
             </td>
 
             <!-- Address -->
             <td class="text-xs font-weight-bold">
               <span class="my-2 text-xs">
                 {{ warehouse.address_line1 }}
-                <span v-if="warehouse.address_line2" class="d-block text-secondary">{{ warehouse.address_line2 }}</span>
+                <span
+                  v-if="warehouse.address_line2"
+                  class="d-block text-secondary"
+                  >{{ warehouse.address_line2 }}</span
+                >
               </span>
             </td>
 

thanasoft-front/src/components/molecules/Tables/Ventes/InvoiceTable.vue

@@ -35,7 +35,7 @@
             <!-- Due Date -->
             <td class="font-weight-bold">
               <span class="my-2 text-xs" :class="getDueDateClass(invoice)">{{
-                formatDate(invoice.due_date) || '-'
+                formatDate(invoice.due_date) || "-"
               }}</span>
             </td>
 

thanasoft-front/src/components/molecules/Webmailing/WebmailingForm.vue

@@ -21,23 +21,24 @@
 
     <div class="form-section mb-4">
       <h5 class="mb-3">Contenu du message</h5>
-      <webmailing-body-input
-        v-model="formData.body"
-        @blur="validateBody"
-      />
+      <webmailing-body-input v-model="formData.body" @blur="validateBody" />
     </div>
 
     <div class="form-section mb-4">
       <h5 class="mb-3">Pièces jointes</h5>
-      <webmailing-attachment
-        @files-selected="handleFilesSelected"
-      />
+      <webmailing-attachment @files-selected="handleFilesSelected" />
       <div v-if="formData.attachments.length > 0" class="mt-3">
         <h6>Fichiers sélectionnés:</h6>
         <ul class="list-unstyled">
-          <li v-for="file in formData.attachments" :key="file.name" class="mb-2">
+          <li
+            v-for="file in formData.attachments"
+            :key="file.name"
+            class="mb-2"
+          >
             <span class="badge bg-info">{{ file.name }}</span>
-            <small class="ms-2 text-muted">({{ formatFileSize(file.size) }})</small>
+            <small class="ms-2 text-muted"
+              >({{ formatFileSize(file.size) }})</small
+            >
           </li>
         </ul>
       </div>
@@ -129,7 +130,7 @@ const formatFileSize = (bytes) => {
   const k = 1024;
   const sizes = ["Bytes", "KB", "MB", "GB"];
   const i = Math.floor(Math.log(bytes) / Math.log(k));
-  return Math.round(bytes / Math.pow(k, i) * 100) / 100 + " " + sizes[i];
+  return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + " " + sizes[i];
 };
 </script>
 

thanasoft-front/src/components/molecules/Webmailing/WebmailingList.vue

@@ -34,7 +34,10 @@
               <button class="btn btn-sm btn-info" @click="viewEmail(email.id)">
                 <i class="fas fa-eye"></i>
               </button>
-              <button class="btn btn-sm btn-danger ms-2" @click="deleteEmail(email.id)">
+              <button
+                class="btn btn-sm btn-danger ms-2"
+                @click="deleteEmail(email.id)"
+              >
                 <i class="fas fa-trash"></i>
               </button>
             </td>

thanasoft-front/src/components/molecules/client/ClientActivityTab.vue

@@ -158,21 +158,31 @@ watch(
   }
 );
 
-
 const filteredActivities = computed(() => {
   if (activeFilter.value === "all") {
     return activities.value;
   }
   // Filter locally based on event_type mapping to filter categories
   return activities.value.filter((a) => {
-      const type = a.event_type;
-      switch (activeFilter.value) {
-          case 'call': return type === 'call';
-          case 'email': return ['email_sent', 'email_received'].includes(type);
-          case 'invoice': return ['invoice_created', 'invoice_sent', 'invoice_paid'].includes(type);
-          case 'file': return ['file_uploaded', 'attachment_sent', 'attachment_received'].includes(type);
-          default: return false;
-      }
+    const type = a.event_type;
+    switch (activeFilter.value) {
+      case "call":
+        return type === "call";
+      case "email":
+        return ["email_sent", "email_received"].includes(type);
+      case "invoice":
+        return ["invoice_created", "invoice_sent", "invoice_paid"].includes(
+          type
+        );
+      case "file":
+        return [
+          "file_uploaded",
+          "attachment_sent",
+          "attachment_received",
+        ].includes(type);
+      default:
+        return false;
+    }
   });
 });
 </script>

thanasoft-front/src/components/molecules/client/ClientChildrenTab.vue

@@ -6,82 +6,95 @@
           <h6 class="mb-0">Gestion des sous-comptes</h6>
         </div>
         <div class="col-md-4 text-end">
-            <!-- Toggle Is Parent -->
-            <div class="form-check form-switch d-inline-block ms-auto">
-                <input
-                class="form-check-input"
-                type="checkbox"
-                id="isParentToggle"
-                :checked="client.is_parent"
-                @change="toggleParentStatus"
-                />
-                <label class="form-check-label" for="isParentToggle">Compte Parent</label>
-            </div>
-            <!-- Add Child Button -->
-            <soft-button
-                v-if="client.is_parent"
-                size="sm"
-                variant="gradient"
-                color="success"
-                class="ms-3"
-                @click="showAddModal = true"
+          <!-- Toggle Is Parent -->
+          <div class="form-check form-switch d-inline-block ms-auto">
+            <input
+              id="isParentToggle"
+              class="form-check-input"
+              type="checkbox"
+              :checked="client.is_parent"
+              @change="toggleParentStatus"
+            />
+            <label class="form-check-label" for="isParentToggle"
+              >Compte Parent</label
             >
-                <i class="fas fa-plus me-2"></i>Ajouter un sous-client
-            </soft-button>
+          </div>
+          <!-- Add Child Button -->
+          <soft-button
+            v-if="client.is_parent"
+            size="sm"
+            variant="gradient"
+            color="success"
+            class="ms-3"
+            @click="showAddModal = true"
+          >
+            <i class="fas fa-plus me-2"></i>Ajouter un sous-client
+          </soft-button>
         </div>
       </div>
     </div>
     <div class="card-body p-3">
-        <div v-if="!client.is_parent" class="text-center py-4">
-            <p class="text-muted">
-                Ce client n'est pas défini comme compte parent. Activez l'option ci-dessus pour gérer des sous-comptes.
-            </p>
+      <div v-if="!client.is_parent" class="text-center py-4">
+        <p class="text-muted">
+          Ce client n'est pas défini comme compte parent. Activez l'option
+          ci-dessus pour gérer des sous-comptes.
+        </p>
+      </div>
+
+      <div v-else>
+        <div v-if="loading" class="text-center py-4">
+          <div class="spinner-border text-primary" role="status">
+            <span class="visually-hidden">Chargement...</span>
+          </div>
         </div>
 
-        <div v-else>
-            <div v-if="loading" class="text-center py-4">
-                 <div class="spinner-border text-primary" role="status">
-                    <span class="visually-hidden">Chargement...</span>
-                </div>
-            </div>
-            
-            <div v-else-if="children.length === 0" class="text-center py-4">
-                 <p class="text-muted">Aucun sous-compte associé.</p>
-            </div>
-
-            <ul v-else class="list-group">
-                <li v-for="child in children" :key="child.id" class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg">
-                  <div class="d-flex align-items-center">
-                    <soft-avatar 
-                        :img="getAvatar(child.name)" 
-                        size="sm" 
-                        border-radius="md" 
-                        class="me-3" 
-                        alt="child client" 
-                    />
-                    <div class="d-flex flex-column">
-                      <h6 class="mb-1 text-dark text-sm">{{ child.name }}</h6>
-                      <span class="text-xs">{{ child.email }}</span>
-                    </div>
-                  </div>
-                  <div class="d-flex align-items-center text-sm">
-                    <button class="btn btn-link text-dark text-sm mb-0 px-0 ms-4" @click="goToClient(child.id)">
-                        <i class="fas fa-eye text-lg me-1"></i> Voir
-                    </button>
-                    <button class="btn btn-link text-danger text-gradient px-3 mb-0" @click="confirmRemoveChild(child)">
-                        <i class="far fa-trash-alt me-2"></i> Détacher
-                    </button>
-                  </div>
-                </li>
-            </ul>
+        <div v-else-if="children.length === 0" class="text-center py-4">
+          <p class="text-muted">Aucun sous-compte associé.</p>
         </div>
+
+        <ul v-else class="list-group">
+          <li
+            v-for="child in children"
+            :key="child.id"
+            class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg"
+          >
+            <div class="d-flex align-items-center">
+              <soft-avatar
+                :img="getAvatar(child.name)"
+                size="sm"
+                border-radius="md"
+                class="me-3"
+                alt="child client"
+              />
+              <div class="d-flex flex-column">
+                <h6 class="mb-1 text-dark text-sm">{{ child.name }}</h6>
+                <span class="text-xs">{{ child.email }}</span>
+              </div>
+            </div>
+            <div class="d-flex align-items-center text-sm">
+              <button
+                class="btn btn-link text-dark text-sm mb-0 px-0 ms-4"
+                @click="goToClient(child.id)"
+              >
+                <i class="fas fa-eye text-lg me-1"></i> Voir
+              </button>
+              <button
+                class="btn btn-link text-danger text-gradient px-3 mb-0"
+                @click="confirmRemoveChild(child)"
+              >
+                <i class="far fa-trash-alt me-2"></i> Détacher
+              </button>
+            </div>
+          </li>
+        </ul>
+      </div>
     </div>
-    
+
     <AddChildClientModal
-        :show="showAddModal"
-        :exclude-ids="[client.id, client.parent_id, ...children.map(c => c.id)]"
-        @close="showAddModal = false"
-        @add="handleAddChild"
+      :show="showAddModal"
+      :exclude-ids="[client.id, client.parent_id, ...children.map((c) => c.id)]"
+      @close="showAddModal = false"
+      @add="handleAddChild"
     />
   </div>
 </template>
@@ -92,8 +105,8 @@ import SoftButton from "@/components/SoftButton.vue";
 import SoftAvatar from "@/components/SoftAvatar.vue";
 import AddChildClientModal from "@/components/Organism/CRM/client/AddChildClientModal.vue";
 import { useClientStore } from "@/stores/clientStore";
-import { useRouter } from 'vue-router';
-import Swal from 'sweetalert2';
+import { useRouter } from "vue-router";
+import Swal from "sweetalert2";
 
 const props = defineProps({
   client: {
@@ -102,7 +115,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['update-client']);
+const emit = defineEmits(["update-client"]);
 const clientStore = useClientStore();
 const router = useRouter();
 const children = ref([]);
@@ -110,89 +123,93 @@ const loading = ref(false);
 const showAddModal = ref(false);
 
 const fetchChildren = async () => {
-    if (!props.client.is_parent) return;
-    loading.value = true;
-    try {
-        const res = await clientStore.fetchChildClients(props.client.id);
-        children.value = res.data || res; // handle potential array vs response structure
-    } catch (e) {
-        console.error("Failed to fetch children", e);
-    } finally {
-        loading.value = false;
-    }
+  if (!props.client.is_parent) return;
+  loading.value = true;
+  try {
+    const res = await clientStore.fetchChildClients(props.client.id);
+    children.value = res.data || res; // handle potential array vs response structure
+  } catch (e) {
+    console.error("Failed to fetch children", e);
+  } finally {
+    loading.value = false;
+  }
 };
 
 onMounted(() => {
-    fetchChildren();
+  fetchChildren();
 });
 
-watch(() => props.client.is_parent, (newVal) => {
+watch(
+  () => props.client.is_parent,
+  (newVal) => {
     if (newVal) fetchChildren();
-});
-
+  }
+);
 
 /* eslint-disable require-atomic-updates */
 const toggleParentStatus = async (e) => {
-    const isChecked = e.target.checked;
-    
-    // Optimistic update
-    // emit('update-client', { ...props.client, is_parent: isChecked });
-    
-    try {
-        // We'll update the client via store, passing just the id and field to update
-        await clientStore.updateClient({ 
-            id: props.client.id, 
-            name: props.client.name,
-            is_parent: isChecked 
-        });
-        // The parent component should react to store changes if it watches it, or we emit updated
-    } catch (err) {
-        // Revert on error
-        e.target.checked = !isChecked;
-        Swal.fire('Erreur', 'Impossible de mettre à jour le statut parent.', 'error');
-    }
+  const isChecked = e.target.checked;
+
+  // Optimistic update
+  // emit('update-client', { ...props.client, is_parent: isChecked });
+
+  try {
+    // We'll update the client via store, passing just the id and field to update
+    await clientStore.updateClient({
+      id: props.client.id,
+      name: props.client.name,
+      is_parent: isChecked,
+    });
+    // The parent component should react to store changes if it watches it, or we emit updated
+  } catch (err) {
+    // Revert on error
+    e.target.checked = !isChecked;
+    Swal.fire(
+      "Erreur",
+      "Impossible de mettre à jour le statut parent.",
+      "error"
+    );
+  }
 };
 
 const handleAddChild = async (selectedClient) => {
-    try {
-        await clientStore.addChildClient(props.client.id, selectedClient.id);
-        Swal.fire('Succès', 'Le client a été ajouté comme sous-compte.', 'success');
-        fetchChildren();
-    } catch (e) {
-         Swal.fire('Erreur', "Impossible d'ajouter le sous-compte.", 'error');
-    }
+  try {
+    await clientStore.addChildClient(props.client.id, selectedClient.id);
+    Swal.fire("Succès", "Le client a été ajouté comme sous-compte.", "success");
+    fetchChildren();
+  } catch (e) {
+    Swal.fire("Erreur", "Impossible d'ajouter le sous-compte.", "error");
+  }
 };
 
-
 const confirmRemoveChild = async (child) => {
-    const result = await Swal.fire({
-        title: 'Confirmer le détachement',
-        text: `Voulez-vous vraiment détacher ${child.name} ?`,
-        icon: 'warning',
-        showCancelButton: true,
-        confirmButtonText: 'Oui, détacher',
-        cancelButtonText: 'Annuler'
-    });
+  const result = await Swal.fire({
+    title: "Confirmer le détachement",
+    text: `Voulez-vous vraiment détacher ${child.name} ?`,
+    icon: "warning",
+    showCancelButton: true,
+    confirmButtonText: "Oui, détacher",
+    cancelButtonText: "Annuler",
+  });
 
-    if (result.isConfirmed) {
-        try {
-            await clientStore.removeChildClient(props.client.id, child.id);
-            Swal.fire('Détaché!', 'Le client a été détaché.', 'success');
-            children.value = children.value.filter(c => c.id !== child.id);
-        } catch (e) {
-             Swal.fire('Erreur', "Impossible de détacher le client.", 'error');
-        }
+  if (result.isConfirmed) {
+    try {
+      await clientStore.removeChildClient(props.client.id, child.id);
+      Swal.fire("Détaché!", "Le client a été détaché.", "success");
+      children.value = children.value.filter((c) => c.id !== child.id);
+    } catch (e) {
+      Swal.fire("Erreur", "Impossible de détacher le client.", "error");
     }
+  }
 };
 
 const goToClient = (id) => {
-    router.push(`/crm/clients/${id}`); // Adjust route as needed
+  router.push(`/crm/clients/${id}`); // Adjust route as needed
 };
 
 // Helper for initials/avatar
 const getAvatar = (name) => {
-     // placeholder logic, replace with actual avatar logic or component usage
-     return null; 
+  // placeholder logic, replace with actual avatar logic or component usage
+  return null;
 };
-
 </script>

thanasoft-front/src/components/molecules/client/ClientSearchInput.vue

@@ -9,28 +9,32 @@
         placeholder="Rechercher un client (nom, email...)"
         @input="handleInput"
       />
-      <button 
-        v-if="searchQuery" 
-        class="btn btn-outline-secondary mb-0" 
-        type="button" 
+      <button
+        v-if="searchQuery"
+        class="btn btn-outline-secondary mb-0"
+        type="button"
         @click="clearSearch"
       >
         <i class="fas fa-times"></i>
       </button>
     </div>
-    
+
     <!-- Loading State -->
-    <div v-if="loading" class="text-center py-2 position-absolute w-100 bg-white border rounded shadow-sm" style="z-index: 1000; top: 100%;">
-        <div class="spinner-border spinner-border-sm text-primary" role="status">
-            <span class="visually-hidden">Chargement...</span>
-        </div>
+    <div
+      v-if="loading"
+      class="text-center py-2 position-absolute w-100 bg-white border rounded shadow-sm"
+      style="z-index: 1000; top: 100%"
+    >
+      <div class="spinner-border spinner-border-sm text-primary" role="status">
+        <span class="visually-hidden">Chargement...</span>
+      </div>
     </div>
 
     <!-- Results Dropdown -->
     <div
       v-else-if="results.length > 0 && showResults"
       class="list-group position-absolute w-100 mt-1 shadow-lg"
-      style="z-index: 1000; max-height: 300px; overflow-y: auto;"
+      style="z-index: 1000; max-height: 300px; overflow-y: auto"
     >
       <button
         v-for="client in results"
@@ -39,27 +43,29 @@
         class="list-group-item list-group-item-action d-flex align-items-center p-2"
         @click="handleSelect(client)"
       >
-        <soft-avatar 
-            :img="getAvatar(client)" 
-            size="sm" 
-            border-radius="md" 
-            class="me-3" 
-            :alt="client.name" 
+        <soft-avatar
+          :img="getAvatar(client)"
+          size="sm"
+          border-radius="md"
+          class="me-3"
+          :alt="client.name"
         />
         <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 class="text-xs text-muted">{{
+            client.email || "Pas d'email"
+          }}</span>
         </div>
       </button>
     </div>
-    
+
     <!-- No Results -->
-    <div 
-        v-else-if="searchQuery && !loading && showResults" 
-        class="position-absolute w-100 mt-1 p-3 bg-white border rounded shadow-sm text-center text-sm text-muted"
-        style="z-index: 1000;"
+    <div
+      v-else-if="searchQuery && !loading && showResults"
+      class="position-absolute w-100 mt-1 p-3 bg-white border rounded shadow-sm text-center text-sm text-muted"
+      style="z-index: 1000"
     >
-        Aucun client trouvé.
+      Aucun client trouvé.
     </div>
   </div>
 </template>
@@ -70,10 +76,10 @@ import SoftAvatar from "@/components/SoftAvatar.vue";
 import { useClientStore } from "@/stores/clientStore";
 
 const props = defineProps({
-    excludeIds: {
-        type: Array,
-        default: () => []
-    }
+  excludeIds: {
+    type: Array,
+    default: () => [],
+  },
 });
 
 const emit = defineEmits(["select"]);
@@ -86,46 +92,46 @@ const showResults = ref(false);
 let debounceTimeout = null;
 
 const handleInput = () => {
-    showResults.value = true;
-    if (debounceTimeout) clearTimeout(debounceTimeout);
-    
-    if (!searchQuery.value.trim()) {
-        results.value = [];
-        showResults.value = false;
-        return;
-    }
+  showResults.value = true;
+  if (debounceTimeout) clearTimeout(debounceTimeout);
 
-    loading.value = true;
-    debounceTimeout = setTimeout(async () => {
-        try {
-            const res = await clientStore.searchClients(searchQuery.value);
-            // Filter out excluded IDs (e.g. self, parent)
-            results.value = res.filter(c => !props.excludeIds.includes(c.id));
-        } catch (e) {
-            console.error(e);
-            results.value = [];
-        } finally {
-            loading.value = false;
-        }
-    }, 300);
+  if (!searchQuery.value.trim()) {
+    results.value = [];
+    showResults.value = false;
+    return;
+  }
+
+  loading.value = true;
+  debounceTimeout = setTimeout(async () => {
+    try {
+      const res = await clientStore.searchClients(searchQuery.value);
+      // Filter out excluded IDs (e.g. self, parent)
+      results.value = res.filter((c) => !props.excludeIds.includes(c.id));
+    } catch (e) {
+      console.error(e);
+      results.value = [];
+    } finally {
+      loading.value = false;
+    }
+  }, 300);
 };
 
 const handleSelect = (client) => {
-    emit("select", client);
-    searchQuery.value = "";
-    results.value = [];
-    showResults.value = false;
+  emit("select", client);
+  searchQuery.value = "";
+  results.value = [];
+  showResults.value = false;
 };
 
 const clearSearch = () => {
-    searchQuery.value = "";
-    results.value = [];
-    showResults.value = false;
+  searchQuery.value = "";
+  results.value = [];
+  showResults.value = false;
 };
 
 // Helper for avatar (placeholder logic)
 const getAvatar = (client) => {
-    // If client has an avatar property use it, else return null/placeholder logic handled by SoftAvatar or similar
-    return null;
+  // If client has an avatar property use it, else return null/placeholder logic handled by SoftAvatar or similar
+  return null;
 };
 </script>

thanasoft-front/src/components/molecules/form/NewClientForm.vue

@@ -22,10 +22,7 @@
               {{ category.name }}
             </option>
           </select>
-          <div
-            v-if="fieldErrors.client_category_id"
-            class="invalid-feedback"
-          >
+          <div v-if="fieldErrors.client_category_id" class="invalid-feedback">
             {{ errorMessage("client_category_id") }}
           </div>
         </div>

thanasoft-front/src/components/molecules/form/NewEmployeeForm.vue

@@ -215,7 +215,7 @@ watch(
   (newErrors) => {
     fieldErrors.value = { ...newErrors };
   },
-  { deep: true },
+  { deep: true }
 );
 
 // Watch for success from parent
@@ -225,7 +225,7 @@ watch(
     if (newSuccess) {
       resetForm();
     }
-  },
+  }
 );
 
 const submitForm = async () => {

thanasoft-front/src/components/molecules/form/NewFournisseurForm.vue

@@ -294,7 +294,7 @@ watch(
   (newErrors) => {
     fieldErrors.value = { ...newErrors };
   },
-  { deep: true },
+  { deep: true }
 );
 
 // Watch for success from parent
@@ -304,7 +304,7 @@ watch(
     if (newSuccess) {
       resetForm();
     }
-  },
+  }
 );
 
 const submitForm = async () => {

thanasoft-front/src/components/molecules/location/LocationModal.vue

@@ -240,8 +240,6 @@
               </div>
             </div>
 
-
-
             <div class="form-check mb-3">
               <input
                 id="isDefaultCheckbox"

thanasoft-front/src/components/templates/CRM/FournisseurDetailTemplate.vue

@@ -1,16 +1,51 @@
 <template>
-  <div class="container-fluid py-4">
-    <div class="row mb-4">
+  <div class="container-fluid py-4 fournisseur-detail-shell">
+    <div class="card border-0 mb-4 hero-shell">
+      <div class="card-body p-4">
+        <div
+          class="d-flex flex-column flex-lg-row justify-content-between align-items-lg-center gap-3"
+        >
+          <div>
+            <h4 class="text-white mb-1">
+              <slot name="page-title">Détail fournisseur</slot>
+            </h4>
+            <p class="text-white-50 mb-0">
+              <slot name="page-subtitle"
+                >Consultez et gérez toutes les informations du
+                fournisseur.</slot
+              >
+            </p>
+          </div>
+          <div class="d-flex align-items-center flex-wrap gap-2">
+            <slot name="header-right" />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="row g-3 mb-3">
+      <slot name="summary-cards" />
+    </div>
+
+    <div class="row mb-3">
       <slot name="button-return" />
     </div>
-    <div class="row">
-      <div class="col-lg-3">
+
+    <div class="row g-4">
+      <div class="col-xl-3 col-lg-4">
         <slot name="fournisseur-detail-sidebar" />
         <slot name="file-input" />
       </div>
-      <div class="col-lg-9 mt-lg-0 mt-4">
+      <div class="col-xl-9 col-lg-8 mt-lg-0 mt-2">
         <slot name="fournisseur-detail-content" />
       </div>
     </div>
   </div>
 </template>
+
+<style scoped>
+.hero-shell {
+  background: linear-gradient(135deg, #344767 0%, #5e72e4 100%);
+  box-shadow: 0 10px 30px rgba(52, 71, 103, 0.2);
+}
+</style>

thanasoft-front/src/components/templates/CRM/FournisseurTemplate.vue

@@ -1,19 +1,49 @@
 <template>
-  <div class="container-fluid py-4">
-    <div class="d-sm-flex justify-content-between">
-      <div>
-        <slot name="fournisseur-new-action"></slot>
-      </div>
-      <div class="d-flex">
-        <div class="dropdown d-inline">
-          <slot name="select-filter"></slot>
+  <div class="container-fluid py-4 fournisseur-shell">
+    <div class="card border-0 mb-4 hero-shell">
+      <div class="card-body p-4">
+        <div
+          class="d-flex flex-column flex-lg-row justify-content-between align-items-lg-center gap-3"
+        >
+          <div>
+            <h4 class="text-white mb-1">
+              <slot name="page-title">Gestion des fournisseurs</slot>
+            </h4>
+            <p class="text-white-50 mb-0">
+              <slot name="page-subtitle"
+                >Pilotez vos fournisseurs et centralisez leurs
+                informations.</slot
+              >
+            </p>
+          </div>
+          <div class="d-flex gap-2 flex-wrap">
+            <slot name="header-right" />
+          </div>
         </div>
-        <slot name="fournisseur-other-action"></slot>
       </div>
     </div>
-    <div class="row">
-      <div class="col-12">
-        <div class="card mt-4">
+
+    <div class="row g-3 mb-3">
+      <slot name="summary-cards" />
+    </div>
+
+    <div class="card border-0 content-shell">
+      <div class="card-body p-3 p-md-4">
+        <div
+          class="d-sm-flex justify-content-between align-items-center gap-2 action-row"
+        >
+          <div>
+            <slot name="fournisseur-new-action"></slot>
+          </div>
+          <div class="d-flex align-items-center flex-wrap gap-2">
+            <div class="dropdown d-inline">
+              <slot name="select-filter"></slot>
+            </div>
+            <slot name="fournisseur-other-action"></slot>
+          </div>
+        </div>
+
+        <div class="mt-3 table-shell">
           <slot name="fournisseur-table"></slot>
         </div>
       </div>
@@ -21,3 +51,19 @@
   </div>
 </template>
 <script></script>
+
+<style scoped>
+.hero-shell {
+  background: linear-gradient(135deg, #344767 0%, #5e72e4 100%);
+  box-shadow: 0 10px 30px rgba(52, 71, 103, 0.2);
+}
+
+.content-shell {
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
+}
+
+.table-shell {
+  border-top: 1px solid rgba(148, 163, 184, 0.2);
+  padding-top: 1rem;
+}
+</style>

thanasoft-front/src/components/templates/FactureFournisseur/FactureFournisseurDetailTemplate.vue

@@ -5,7 +5,7 @@
         <div class="card-header p-3 pb-0">
           <slot name="header"></slot>
         </div>
-        <hr class="horizontal dark my-3">
+        <hr class="horizontal dark my-3" />
         <div class="card-body p-3 pt-0">
           <div class="row">
             <div class="col-12">
@@ -20,7 +20,7 @@
               <slot name="summary"></slot>
             </div>
           </div>
-          <hr class="horizontal dark mt-4 mb-3">
+          <hr class="horizontal dark mt-4 mb-3" />
           <div class="row">
             <div class="col-12">
               <slot name="actions"></slot>

thanasoft-front/src/components/templates/Planning/PlanningTemplate.vue

@@ -1,8 +1,10 @@
 <template>
   <div class="planning-container p-2 p-md-4">
-    <div class="container-max mx-auto">
+    <div class="container-max mx-auto h-100">
       <!-- Header Section -->
-      <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-4 gap-3">
+      <div
+        class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-4 gap-3"
+      >
         <slot name="header"></slot>
       </div>
 
@@ -11,7 +13,7 @@
         <slot name="view-toggles"></slot>
       </div>
 
-      <div class="content-wrapper">
+      <div class="content-wrapper h-100">
         <div class="row g-4">
           <!-- Sidebar & Legend Column (Left on desktop) -->
           <!-- <div class="col-12 col-xl-3 order-2 order-xl-1">
@@ -44,11 +46,14 @@
 }
 
 .container-max {
+  width: 100%;
   max-width: 1400px;
+  min-height: calc(100vh - 2rem);
 }
 
 .content-wrapper {
   position: relative;
+  min-height: calc(100vh - 12rem);
 }
 
 .gap-3 {

thanasoft-front/src/router/index.js

@@ -477,17 +477,20 @@ const routes = [
   {
     path: "/fournisseurs/factures",
     name: "Factures fournisseurs",
-    component: () => import("@/views/pages/Fournisseurs/FactureFournisseurList.vue"),
+    component: () =>
+      import("@/views/pages/Fournisseurs/FactureFournisseurList.vue"),
   },
   {
     path: "/fournisseurs/factures/new",
     name: "Nouvelle Facture Fournisseur",
-    component: () => import("@/views/pages/Fournisseurs/NewFactureFournisseur.vue"),
+    component: () =>
+      import("@/views/pages/Fournisseurs/NewFactureFournisseur.vue"),
   },
   {
     path: "/fournisseurs/factures/:id",
     name: "Facture Fournisseur Details",
-    component: () => import("@/views/pages/Fournisseurs/FactureFournisseurDetail.vue"),
+    component: () =>
+      import("@/views/pages/Fournisseurs/FactureFournisseurDetail.vue"),
   },
   {
     path: "/fournisseurs/statistiques",

thanasoft-front/src/services/avoir.ts

@@ -131,7 +131,9 @@ export const AvoirService = {
     return response;
   },
 
-  async deleteAvoir(id: number): Promise<{ success: boolean; message: string }> {
+  async deleteAvoir(
+    id: number
+  ): Promise<{ success: boolean; message: string }> {
     const response = await request<{ success: boolean; message: string }>({
       url: `/api/avoirs/${id}`,
       method: "delete",

thanasoft-front/src/services/client.ts

@@ -269,7 +269,7 @@ export const ClientService = {
     return response;
   },
 
-    /**
+  /**
    * Get child clients for a parent
    */
   async getChildClients(parentId: number): Promise<ClientListResponse> {

thanasoft-front/src/services/clientGroup.ts

@@ -27,7 +27,8 @@ export interface CreateClientGroupPayload {
   description?: string | null;
 }
 
-export interface UpdateClientGroupPayload extends Partial<CreateClientGroupPayload> {
+export interface UpdateClientGroupPayload
+  extends Partial<CreateClientGroupPayload> {
   id: number;
 }
 
@@ -64,7 +65,9 @@ export const ClientGroupService = {
   /**
    * Create a new client group
    */
-  async createClientGroup(payload: CreateClientGroupPayload): Promise<ClientGroupResponse> {
+  async createClientGroup(
+    payload: CreateClientGroupPayload
+  ): Promise<ClientGroupResponse> {
     const response = await request<ClientGroupResponse>({
       url: "/api/client-groups",
       method: "post",
@@ -77,7 +80,9 @@ export const ClientGroupService = {
   /**
    * Update an existing client group
    */
-  async updateClientGroup(payload: UpdateClientGroupPayload): Promise<ClientGroupResponse> {
+  async updateClientGroup(
+    payload: UpdateClientGroupPayload
+  ): Promise<ClientGroupResponse> {
     const { id, ...updateData } = payload;
 
     const response = await request<ClientGroupResponse>({

thanasoft-front/src/services/goodsReceipt.ts

@@ -36,7 +36,7 @@ export interface GoodsReceipt {
   warehouse_id: number;
   receipt_number: string;
   receipt_date: string;
-  status: 'draft' | 'posted';
+  status: "draft" | "posted";
   notes: string | null;
   created_at: string;
   updated_at: string;
@@ -86,7 +86,8 @@ export interface CreateGoodsReceiptPayload {
   lines?: CreateGoodsReceiptLinePayload[];
 }
 
-export interface UpdateGoodsReceiptPayload extends Partial<CreateGoodsReceiptPayload> {
+export interface UpdateGoodsReceiptPayload
+  extends Partial<CreateGoodsReceiptPayload> {
   id: number;
 }
 
@@ -114,7 +115,9 @@ export const GoodsReceiptService = {
     return response;
   },
 
-  async createGoodsReceipt(payload: CreateGoodsReceiptPayload): Promise<GoodsReceiptResponse> {
+  async createGoodsReceipt(
+    payload: CreateGoodsReceiptPayload
+  ): Promise<GoodsReceiptResponse> {
     const response = await request<GoodsReceiptResponse>({
       url: "/api/goods-receipts",
       method: "post",
@@ -123,7 +126,9 @@ export const GoodsReceiptService = {
     return response;
   },
 
-  async updateGoodsReceipt(payload: UpdateGoodsReceiptPayload): Promise<GoodsReceiptResponse> {
+  async updateGoodsReceipt(
+    payload: UpdateGoodsReceiptPayload
+  ): Promise<GoodsReceiptResponse> {
     const { id, ...updateData } = payload;
     const response = await request<GoodsReceiptResponse>({
       url: `/api/goods-receipts/${id}`,
@@ -133,7 +138,9 @@ export const GoodsReceiptService = {
     return response;
   },
 
-  async deleteGoodsReceipt(id: number): Promise<{ success: boolean; message: string }> {
+  async deleteGoodsReceipt(
+    id: number
+  ): Promise<{ success: boolean; message: string }> {
     const response = await request<{ success: boolean; message: string }>({
       url: `/api/goods-receipts/${id}`,
       method: "delete",

thanasoft-front/src/services/productPackaging.ts

@@ -32,7 +32,10 @@ class ProductPackagingService {
     });
   }
 
-  async updatePackaging(id: number, data: any): Promise<{ data: ProductPackaging }> {
+  async updatePackaging(
+    id: number,
+    data: any
+  ): Promise<{ data: ProductPackaging }> {
     return await request<{ data: ProductPackaging }>({
       url: `/api/product-packagings/${id}`,
       method: "put",

thanasoft-front/src/services/purchaseOrder.ts

@@ -19,7 +19,7 @@ export interface PurchaseOrder {
   id: number;
   fournisseur_id: number;
   po_number: string;
-  status: 'brouillon' | 'confirmee' | 'livree' | 'facturee' | 'annulee';
+  status: "brouillon" | "confirmee" | "livree" | "facturee" | "annulee";
   order_date: string;
   expected_date: string | null;
   currency: string;
@@ -69,7 +69,8 @@ export interface CreatePurchaseOrderPayload {
   lines?: CreatePurchaseOrderLinePayload[];
 }
 
-export interface UpdatePurchaseOrderPayload extends Partial<CreatePurchaseOrderPayload> {
+export interface UpdatePurchaseOrderPayload
+  extends Partial<CreatePurchaseOrderPayload> {
   id: number;
 }
 
@@ -97,7 +98,9 @@ export const PurchaseOrderService = {
     return response;
   },
 
-  async createPurchaseOrder(payload: CreatePurchaseOrderPayload): Promise<PurchaseOrderResponse> {
+  async createPurchaseOrder(
+    payload: CreatePurchaseOrderPayload
+  ): Promise<PurchaseOrderResponse> {
     const response = await request<PurchaseOrderResponse>({
       url: "/api/purchase-orders",
       method: "post",
@@ -106,7 +109,9 @@ export const PurchaseOrderService = {
     return response;
   },
 
-  async updatePurchaseOrder(payload: UpdatePurchaseOrderPayload): Promise<PurchaseOrderResponse> {
+  async updatePurchaseOrder(
+    payload: UpdatePurchaseOrderPayload
+  ): Promise<PurchaseOrderResponse> {
     const { id, ...updateData } = payload;
     const response = await request<PurchaseOrderResponse>({
       url: `/api/purchase-orders/${id}`,
@@ -116,7 +121,9 @@ export const PurchaseOrderService = {
     return response;
   },
 
-  async deletePurchaseOrder(id: number): Promise<{ success: boolean; message: string }> {
+  async deletePurchaseOrder(
+    id: number
+  ): Promise<{ success: boolean; message: string }> {
     const response = await request<{ success: boolean; message: string }>({
       url: `/api/purchase-orders/${id}`,
       method: "delete",
@@ -124,7 +131,9 @@ export const PurchaseOrderService = {
     return response;
   },
 
-  async getByFournisseur(fournisseurId: number): Promise<PurchaseOrderListResponse> {
+  async getByFournisseur(
+    fournisseurId: number
+  ): Promise<PurchaseOrderListResponse> {
     const response = await request<PurchaseOrderListResponse>({
       url: `/api/fournisseurs/${fournisseurId}/purchase-orders`,
       method: "get",

thanasoft-front/src/services/receipt.ts

@@ -0,0 +1,38 @@
+import { request } from "./http";
+import type { GoodsReceipt } from "./goodsReceipt";
+
+export interface ReceiptListResponse {
+  data: GoodsReceipt[] | { data: GoodsReceipt[] };
+  meta?: {
+    current_page: number;
+    last_page: number;
+    per_page: number;
+    total: number;
+  };
+}
+
+export const ReceiptService = {
+  async getReceipts(params?: {
+    page?: number;
+    per_page?: number;
+    search?: string;
+    status?: string;
+  }): Promise<ReceiptListResponse> {
+    return request<ReceiptListResponse>({
+      url: "/api/goods-receipts",
+      method: "get",
+      params,
+    });
+  },
+
+  async deleteReceipt(
+    id: number
+  ): Promise<{ success?: boolean; message: string }> {
+    return request<{ success?: boolean; message: string }>({
+      url: `/api/goods-receipts/${id}`,
+      method: "delete",
+    });
+  },
+};
+
+export default ReceiptService;

thanasoft-front/src/services/supplierInvoice.ts

@@ -22,7 +22,7 @@ export interface SupplierInvoice {
   invoice_number: string;
   invoice_date: string;
   due_date: string | null;
-  status: 'brouillon' | 'en_attente' | 'payee' | 'annulee';
+  status: "brouillon" | "en_attente" | "payee" | "annulee";
   currency: string;
   total_ht: number;
   total_tva: number;
@@ -70,7 +70,8 @@ export interface CreateSupplierInvoicePayload {
   lines?: CreateSupplierInvoiceLinePayload[];
 }
 
-export interface UpdateSupplierInvoicePayload extends Partial<CreateSupplierInvoicePayload> {
+export interface UpdateSupplierInvoicePayload
+  extends Partial<CreateSupplierInvoicePayload> {
   id: number;
 }
 
@@ -98,7 +99,9 @@ export const SupplierInvoiceService = {
     return response;
   },
 
-  async createSupplierInvoice(payload: CreateSupplierInvoicePayload): Promise<SupplierInvoiceResponse> {
+  async createSupplierInvoice(
+    payload: CreateSupplierInvoicePayload
+  ): Promise<SupplierInvoiceResponse> {
     const response = await request<SupplierInvoiceResponse>({
       url: "/api/supplier-invoices",
       method: "post",
@@ -107,7 +110,9 @@ export const SupplierInvoiceService = {
     return response;
   },
 
-  async updateSupplierInvoice(payload: UpdateSupplierInvoicePayload): Promise<SupplierInvoiceResponse> {
+  async updateSupplierInvoice(
+    payload: UpdateSupplierInvoicePayload
+  ): Promise<SupplierInvoiceResponse> {
     const { id, ...updateData } = payload;
     const response = await request<SupplierInvoiceResponse>({
       url: `/api/supplier-invoices/${id}`,
@@ -117,7 +122,9 @@ export const SupplierInvoiceService = {
     return response;
   },
 
-  async deleteSupplierInvoice(id: number): Promise<{ success: boolean; message: string }> {
+  async deleteSupplierInvoice(
+    id: number
+  ): Promise<{ success: boolean; message: string }> {
     const response = await request<{ success: boolean; message: string }>({
       url: `/api/supplier-invoices/${id}`,
       method: "delete",
@@ -125,7 +132,9 @@ export const SupplierInvoiceService = {
     return response;
   },
 
-  async getByFournisseur(fournisseurId: number): Promise<SupplierInvoiceListResponse> {
+  async getByFournisseur(
+    fournisseurId: number
+  ): Promise<SupplierInvoiceListResponse> {
     const response = await request<SupplierInvoiceListResponse>({
       url: `/api/fournisseurs/${fournisseurId}/supplier-invoices`,
       method: "get",

thanasoft-front/src/services/tvaRate.ts

@@ -61,7 +61,9 @@ export const TvaRateService = {
     return response;
   },
 
-  async deleteTvaRate(id: number): Promise<{ success: boolean; message: string }> {
+  async deleteTvaRate(
+    id: number
+  ): Promise<{ success: boolean; message: string }> {
     const response = await request<{ success: boolean; message: string }>({
       url: `/api/tva-rates/${id}`,
       method: "delete",

thanasoft-front/src/services/warehouse.ts

@@ -44,7 +44,10 @@ class WarehouseService {
     });
   }
 
-  async updateWarehouse(id: number, data: WarehouseFormData): Promise<{ data: Warehouse }> {
+  async updateWarehouse(
+    id: number,
+    data: WarehouseFormData
+  ): Promise<{ data: Warehouse }> {
     return await request<{ data: Warehouse }>({
       url: `/api/warehouses/${id}`,
       method: "put",