From 18f9d83e5a41e1f5a1d0ac5551d586c4aa21fc97 Mon Sep 17 00:00:00 2001
From: Nyavokevin <42602932+nyavokevin@users.noreply.github.com>
Date: Mon, 3 Nov 2025 14:57:45 +0300
Subject: [PATCH] remodifier productDetails

---
 .../Stock/ProductDetailsPresentation.vue      | 1059 +++++++++++++++++
 .../src/views/pages/Stock/ProductDetails.vue  |  285 +----
 .../views/pages/Stock/ProductDetailsView.vue  |    0
 3 files changed, 1062 insertions(+), 282 deletions(-)
 create mode 100644 thanasoft-front/src/components/Organism/Stock/ProductDetailsPresentation.vue
 create mode 100644 thanasoft-front/src/views/pages/Stock/ProductDetailsView.vue

diff --git a/thanasoft-front/src/components/Organism/Stock/ProductDetailsPresentation.vue b/thanasoft-front/src/components/Organism/Stock/ProductDetailsPresentation.vue
new file mode 100644
index 0000000..616f41d
--- /dev/null
+++ b/thanasoft-front/src/components/Organism/Stock/ProductDetailsPresentation.vue
@@ -0,0 +1,1059 @@
+<template>
+  <div class="py-4 container-fluid">
+    <!-- Header Section -->
+    <div class="row">
+      <div class="col-lg-6">
+        <h4>{{ isEditMode ? "Modifier le produit" : "Détails du produit" }}</h4>
+        <p>
+          {{
+            isEditMode
+              ? "Modifiez les informations du produit ci-dessous."
+              : "Informations détaillées du produit."
+          }}
+        </p>
+      </div>
+      <div
+        class="text-right col-lg-6 d-flex flex-column justify-content-center"
+      >
+        <div class="ms-lg-auto me-lg-0 me-auto mt-lg-0">
+          <div v-if="!isEditMode" class="d-flex gap-2">
+            <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"
+              @click="deleteProduct"
+              :disabled="loading"
+            >
+              <i class="fas fa-trash me-2"></i>
+              Supprimer
+            </button>
+          </div>
+          <div v-else class="d-flex gap-2">
+            <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"
+              @click="saveProduct"
+              :disabled="saving"
+            >
+              <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>
+
+    <!-- Validation Errors Alert -->
+    <div
+      v-if="Object.keys(validationErrors).length > 0"
+      class="mt-4 alert alert-danger"
+      role="alert"
+    >
+      <h6>
+        <i class="fas fa-exclamation-triangle me-2"></i>Erreurs de validation
+      </h6>
+      <ul class="mb-0">
+        <li v-for="(errors, field) in validationErrors" :key="field">
+          <strong>{{ getFieldLabel(field) }}:</strong>
+          <span v-for="error in errors" :key="error">{{ error }}</span>
+        </li>
+      </ul>
+    </div>
+
+    <!-- Loading State -->
+    <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 du produit...</p>
+      </div>
+    </div>
+
+    <!-- Error State -->
+    <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="loadProduct"
+        >
+          Réessayer
+        </button>
+      </div>
+    </div>
+
+    <!-- Product details/Edit form -->
+    <div v-else-if="productData" class="product-details-content">
+      <!-- Product Header Card -->
+      <div class="mt-4 card">
+        <div class="card-header bg-gradient-primary text-white">
+          <div class="row align-items-center">
+            <div class="col-md-3">
+              <div class="product-image-container">
+                <product-image
+                  :image-url="productData.media?.photo_url"
+                  :alt-text="`Image de ${productData.nom}`"
+                />
+              </div>
+            </div>
+            <div class="col-md-9">
+              <div class="product-title-area">
+                <h2 class="mb-2">{{ productData.nom }}</h2>
+                <p v-if="productData.reference" class="mb-3">
+                  {{ productData.reference }}
+                </p>
+                <div class="product-status-indicators">
+                  <div
+                    v-if="productData.is_low_stock"
+                    class="status-indicator low-stock me-2 mb-2"
+                  >
+                    <i class="fas fa-exclamation-triangle"></i>
+                    <span>Stock faible</span>
+                  </div>
+                  <div
+                    v-if="isExpired"
+                    class="status-indicator expired me-2 mb-2"
+                  >
+                    <i class="fas fa-times-circle"></i>
+                    <span>Expiré</span>
+                  </div>
+                  <div
+                    v-else-if="isExpiringSoon"
+                    class="status-indicator expiring me-2 mb-2"
+                  >
+                    <i class="fas fa-clock"></i>
+                    <span>Expire bientôt</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- General Information Card -->
+      <div class="mt-4 card">
+        <div class="card-body">
+          <h5 class="font-weight-bolder mb-4">Informations générales</h5>
+
+          <div class="row">
+            <div class="col-md-6">
+              <label>Nom du produit *</label>
+              <input
+                v-if="isEditMode"
+                v-model="formData.nom"
+                class="form-control"
+                :class="{ 'is-invalid': validationErrors.nom }"
+                type="text"
+                placeholder="Nom du produit"
+              />
+              <p v-else class="form-control-static">{{ productData.nom }}</p>
+              <div v-if="validationErrors.nom" class="invalid-feedback">
+                {{ validationErrors.nom[0] }}
+              </div>
+            </div>
+            <div class="col-md-6">
+              <label>Référence *</label>
+              <input
+                v-if="isEditMode"
+                v-model="formData.reference"
+                class="form-control"
+                :class="{ 'is-invalid': validationErrors.reference }"
+                type="text"
+                placeholder="Référence du produit"
+              />
+              <p v-else class="form-control-static">
+                {{ productData.reference }}
+              </p>
+              <div v-if="validationErrors.reference" class="invalid-feedback">
+                {{ validationErrors.reference[0] }}
+              </div>
+            </div>
+          </div>
+
+          <div class="row mt-3">
+            <div class="col-md-6">
+              <label>Catégorie *</label>
+              <select
+                v-if="isEditMode"
+                v-model="formData.categorie"
+                class="form-control"
+                :class="{ 'is-invalid': validationErrors.categorie }"
+              >
+                <option value="">Sélectionner une catégorie</option>
+                <option value="Furniture">Mobilier</option>
+                <option value="Electronics">Électronique</option>
+                <option value="Clothing">Vêtements</option>
+                <option value="Books">Livres</option>
+                <option value="Food">Nourriture</option>
+                <option value="Others">Autres</option>
+              </select>
+              <p v-else class="form-control-static">
+                {{ productData.categorie || "Non catégorisé" }}
+              </p>
+              <div v-if="validationErrors.categorie" class="invalid-feedback">
+                {{ validationErrors.categorie[0] }}
+              </div>
+            </div>
+            <div class="col-md-6">
+              <label>Fabricant</label>
+              <input
+                v-if="isEditMode"
+                v-model="formData.fabricant"
+                class="form-control"
+                :class="{ 'is-invalid': validationErrors.fabricant }"
+                type="text"
+                placeholder="Fabricant"
+              />
+              <p v-else class="form-control-static">
+                {{ productData.fabricant || "Non renseigné" }}
+              </p>
+              <div v-if="validationErrors.fabricant" class="invalid-feedback">
+                {{ validationErrors.fabricant[0] }}
+              </div>
+            </div>
+          </div>
+
+          <div class="row mt-3">
+            <div class="col-md-6">
+              <label>Numéro de lot</label>
+              <input
+                v-if="isEditMode"
+                v-model="formData.numero_lot"
+                class="form-control"
+                :class="{ 'is-invalid': validationErrors.numero_lot }"
+                type="text"
+                placeholder="Numéro de lot"
+              />
+              <p v-else class="form-control-static">
+                {{ productData.numero_lot || "Non renseigné" }}
+              </p>
+              <div v-if="validationErrors.numero_lot" class="invalid-feedback">
+                {{ validationErrors.numero_lot[0] }}
+              </div>
+            </div>
+            <div class="col-md-6">
+              <label>Date d'expiration</label>
+              <input
+                v-if="isEditMode"
+                v-model="formData.date_expiration"
+                class="form-control"
+                :class="{ 'is-invalid': validationErrors.date_expiration }"
+                type="date"
+                :min="new Date().toISOString().split('T')[0]"
+              />
+              <p
+                v-else
+                class="form-control-static"
+                :class="expirationStatusClass"
+              >
+                {{ formattedExpiration }}
+              </p>
+              <div
+                v-if="validationErrors.date_expiration"
+                class="invalid-feedback"
+              >
+                {{ validationErrors.date_expiration[0] }}
+              </div>
+            </div>
+          </div>
+
+          <div class="row mt-3">
+            <div class="col-md-6">
+              <label>Unité *</label>
+              <input
+                v-if="isEditMode"
+                v-model="formData.unite"
+                class="form-control"
+                :class="{ 'is-invalid': validationErrors.unite }"
+                type="text"
+                placeholder="Unité de mesure"
+              />
+              <p v-else class="form-control-static">{{ productData.unite }}</p>
+              <div v-if="validationErrors.unite" class="invalid-feedback">
+                {{ validationErrors.unite[0] }}
+              </div>
+            </div>
+            <div class="col-md-6">
+              <label>Description</label>
+              <textarea
+                v-if="isEditMode"
+                v-model="formData.description"
+                class="form-control"
+                rows="3"
+                placeholder="Description du produit"
+              ></textarea>
+              <p v-else class="form-control-static">
+                {{ productData.description || "Aucune description" }}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Stock and Pricing Card -->
+      <div class="mt-4 card">
+        <div class="card-body">
+          <h5 class="font-weight-bolder mb-4">Stock et tarification</h5>
+
+          <div class="row">
+            <div class="col-md-4">
+              <label>Stock actuel *</label>
+              <input
+                v-if="isEditMode"
+                v-model="formData.stock_actuel"
+                class="form-control"
+                :class="{ 'is-invalid': validationErrors.stock_actuel }"
+                type="number"
+                min="0"
+                step="1"
+                placeholder="0"
+              />
+              <div v-else class="stock-display">
+                <span class="stock-quantity">{{
+                  productData.stock_actuel || 0
+                }}</span>
+                <span class="stock-unit">{{ productData.unite }}</span>
+                <span v-if="productData.stock_minimum" class="stock-min">
+                  (Min: {{ productData.stock_minimum }} {{ productData.unite }})
+                </span>
+              </div>
+              <div
+                v-if="validationErrors.stock_actuel"
+                class="invalid-feedback"
+              >
+                {{ validationErrors.stock_actuel[0] }}
+              </div>
+            </div>
+            <div class="col-md-4">
+              <label>Stock minimum *</label>
+              <input
+                v-if="isEditMode"
+                v-model="formData.stock_minimum"
+                class="form-control"
+                :class="{ 'is-invalid': validationErrors.stock_minimum }"
+                type="number"
+                min="0"
+                step="1"
+                placeholder="0"
+              />
+              <p v-else class="form-control-static">
+                {{ productData.stock_minimum || 0 }}
+              </p>
+              <div
+                v-if="validationErrors.stock_minimum"
+                class="invalid-feedback"
+              >
+                {{ validationErrors.stock_minimum[0] }}
+              </div>
+            </div>
+            <div class="col-md-4">
+              <label>Prix unitaire *</label>
+              <input
+                v-if="isEditMode"
+                v-model="formData.prix_unitaire"
+                class="form-control"
+                :class="{ 'is-invalid': validationErrors.prix_unitaire }"
+                type="number"
+                min="0"
+                step="0.01"
+                placeholder="0.00"
+              />
+              <price-display
+                v-else
+                :price="productData.prix_unitaire"
+                :currency="'€'"
+                :unit="productData.unite"
+              />
+              <div
+                v-if="validationErrors.prix_unitaire"
+                class="invalid-feedback"
+              >
+                {{ validationErrors.prix_unitaire[0] }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Conditioning Card -->
+      <div class="mt-4 card">
+        <div class="card-body">
+          <h5 class="font-weight-bolder mb-4">Conditionnement</h5>
+
+          <div class="row">
+            <div class="col-md-6">
+              <label>Nom du conditionnement</label>
+              <input
+                v-if="isEditMode"
+                v-model="formData.conditionnement_nom"
+                class="form-control"
+                :class="{ 'is-invalid': validationErrors.conditionnement_nom }"
+                type="text"
+                placeholder="Nom du conditionnement"
+              />
+              <p v-else class="form-control-static">
+                {{ productData.conditionnement?.nom || "Non spécifié" }}
+              </p>
+              <div
+                v-if="validationErrors.conditionnement_nom"
+                class="invalid-feedback"
+              >
+                {{ validationErrors.conditionnement_nom[0] }}
+              </div>
+            </div>
+            <div class="col-md-6">
+              <label>Quantité par conditionnement</label>
+              <input
+                v-if="isEditMode"
+                v-model="formData.conditionnement_quantite"
+                class="form-control"
+                :class="{
+                  'is-invalid': validationErrors.conditionnement_quantite,
+                }"
+                type="number"
+                min="0"
+                step="1"
+                placeholder="0"
+              />
+              <p v-else class="form-control-static">
+                {{ productData.conditionnement?.quantite || "0" }}
+                {{ productData.conditionnement?.unite || "" }}
+              </p>
+              <div
+                v-if="validationErrors.conditionnement_quantite"
+                class="invalid-feedback"
+              >
+                {{ validationErrors.conditionnement_quantite[0] }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Supplier Card -->
+      <div class="mt-4 card">
+        <div class="card-body">
+          <h5 class="font-weight-bolder mb-4">Fournisseur</h5>
+          <div v-if="productData.fournisseur" class="supplier-info">
+            <div class="supplier-details">
+              <div class="supplier-main">
+                <span class="supplier-name">{{
+                  productData.fournisseur.name || productData.fournisseur.nom
+                }}</span>
+                <span
+                  v-if="productData.fournisseur.email"
+                  class="supplier-email"
+                >
+                  {{ productData.fournisseur.email }}
+                </span>
+              </div>
+              <button
+                @click="handleViewSupplier(productData.fournisseur)"
+                class="supplier-action-btn"
+                title="Voir le fournisseur"
+              >
+                <i class="fas fa-external-link-alt"></i>
+              </button>
+            </div>
+          </div>
+          <div v-else class="no-supplier">
+            <span class="no-supplier-text">Aucun fournisseur associé</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Documents Card -->
+      <div v-if="hasDocuments" class="mt-4 card">
+        <div class="card-body">
+          <h5 class="font-weight-bolder mb-4">Documents</h5>
+          <div class="documents-list">
+            <div
+              v-if="productData.media?.fiche_technique_url"
+              class="document-item"
+            >
+              <i class="fas fa-file-pdf document-icon"></i>
+              <div class="document-details">
+                <span class="document-name">Fiche technique</span>
+                <a
+                  :href="productData.media.fiche_technique_url"
+                  target="_blank"
+                  class="document-link"
+                >
+                  <i class="fas fa-download"></i>
+                  Télécharger
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Empty State -->
+    <div v-else class="empty-container">
+      <div class="empty-message">
+        <i class="fas fa-box fa-3x text-muted mb-3"></i>
+        <h5>Produit non trouvé</h5>
+        <p>Le produit demandé n'existe pas ou a été supprimé.</p>
+        <button
+          type="button"
+          class="btn btn-outline-primary btn-sm"
+          @click="goBack"
+        >
+          Retour à la liste
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, computed, defineProps, defineEmits } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import ProductService from "@/services/product";
+import { useProductStore } from "@/stores/productStore";
+import ProductImage from "@/components/atoms/Product/ProductImage.vue";
+import PriceDisplay from "@/components/atoms/Product/PriceDisplay.vue";
+
+const route = useRoute();
+const router = useRouter();
+const productStore = useProductStore();
+
+const emit = defineEmits(["viewSupplier"]);
+
+const loading = ref(true);
+const saving = ref(false);
+const error = ref(null);
+const validationErrors = ref({});
+const productData = ref(null);
+const isEditMode = ref(false);
+const originalData = ref(null);
+const formData = ref({
+  nom: "",
+  reference: "",
+  categorie: "",
+  fabricant: "",
+  numero_lot: "",
+  date_expiration: "",
+  unite: "",
+  description: "",
+  stock_actuel: "",
+  stock_minimum: "",
+  prix_unitaire: "",
+  conditionnement_nom: "",
+  conditionnement_quantite: "",
+});
+
+const productId = computed(() => {
+  return parseInt(route.params.id);
+});
+
+const loadProduct = async () => {
+  if (!productId.value) {
+    error.value = "ID de produit invalide";
+    loading.value = false;
+    return;
+  }
+
+  loading.value = true;
+  error.value = null;
+  validationErrors.value = {};
+
+  try {
+    const response = await productStore.fetchProduct(productId.value);
+    productData.value = response;
+
+    // Initialize form data with current product data
+    initializeFormData(response);
+    originalData.value = { ...response };
+  } catch (err) {
+    console.error("Error loading product:", err);
+    error.value =
+      err.response?.data?.message || "Erreur lors du chargement du produit";
+  } finally {
+    loading.value = false;
+  }
+};
+
+const initializeFormData = (data) => {
+  formData.value = {
+    nom: data.nom || "",
+    reference: data.reference || "",
+    categorie: data.categorie || "",
+    fabricant: data.fabricant || "",
+    numero_lot: data.numero_lot || "",
+    date_expiration: data.date_expiration || "",
+    unite: data.unite || "",
+    description: data.description || "",
+    stock_actuel: data.stock_actuel?.toString() || "",
+    stock_minimum: data.stock_minimum?.toString() || "",
+    prix_unitaire: data.prix_unitaire?.toString() || "",
+    conditionnement_nom: data.conditionnement?.nom || "",
+    conditionnement_quantite: data.conditionnement?.quantite?.toString() || "",
+  };
+  validationErrors.value = {};
+};
+
+const goBack = () => {
+  router.push("/stock/produits");
+};
+
+const toggleEditMode = () => {
+  isEditMode.value = !isEditMode.value;
+  if (isEditMode.value) {
+    initializeFormData(productData.value);
+  }
+};
+
+const cancelEdit = () => {
+  if (originalData.value) {
+    initializeFormData(originalData.value);
+  }
+  isEditMode.value = false;
+};
+
+const saveProduct = async () => {
+  saving.value = true;
+  validationErrors.value = {};
+
+  try {
+    // Prepare data for API
+    const productDataToSave = {
+      nom: formData.value.nom,
+      reference: formData.value.reference,
+      categorie: formData.value.categorie,
+      fabricant: formData.value.fabricant,
+      numero_lot: formData.value.numero_lot,
+      date_expiration: formData.value.date_expiration || null,
+      unite: formData.value.unite,
+      description: formData.value.description,
+      stock_actuel: parseInt(formData.value.stock_actuel) || 0,
+      stock_minimum: parseInt(formData.value.stock_minimum) || 0,
+      prix_unitaire: parseFloat(formData.value.prix_unitaire) || 0,
+      conditionnement_nom: formData.value.conditionnement_nom || null,
+      conditionnement_quantite:
+        parseInt(formData.value.conditionnement_quantite) || null,
+      conditionnement_unite: formData.value.unite || null,
+    };
+
+    await productStore.updateProduct(productId.value, productDataToSave);
+
+    // Refresh product data
+    await loadProduct();
+    isEditMode.value = false;
+
+    // Show success message (you might want to add a toast notification here)
+    console.log("Product updated successfully");
+  } catch (err) {
+    console.error("Error saving product:", err);
+
+    // Handle validation errors from Laravel
+    if (err.response?.status === 422 && err.response?.data?.errors) {
+      validationErrors.value = err.response.data.errors;
+    } else {
+      error.value =
+        err.response?.data?.message ||
+        "Erreur lors de la sauvegarde du produit";
+    }
+  } finally {
+    saving.value = false;
+  }
+};
+
+const deleteProduct = async () => {
+  if (!confirm("Êtes-vous sûr de vouloir supprimer ce produit ?")) {
+    return;
+  }
+
+  try {
+    await ProductService.deleteProduct(productId.value);
+    // Show success message
+    router.push("/stock/produits");
+  } catch (err) {
+    console.error("Error deleting product:", err);
+    // Show error message
+  }
+};
+
+const handleViewSupplier = (supplier) => {
+  emit("viewSupplier", supplier);
+};
+
+const getFieldLabel = (field) => {
+  const labels = {
+    nom: "Nom du produit",
+    reference: "Référence",
+    categorie: "Catégorie",
+    fabricant: "Fabricant",
+    numero_lot: "Numéro de lot",
+    date_expiration: "Date d'expiration",
+    unite: "Unité",
+    stock_actuel: "Stock actuel",
+    stock_minimum: "Stock minimum",
+    prix_unitaire: "Prix unitaire",
+    conditionnement_nom: "Nom du conditionnement",
+    conditionnement_quantite: "Quantité du conditionnement",
+  };
+  return labels[field] || field;
+};
+
+// Computed properties
+const isExpired = computed(() => {
+  return ProductService.isExpired(productData.value);
+});
+
+const isExpiringSoon = computed(() => {
+  return ProductService.isExpiringSoon(productData.value, 30);
+});
+
+const hasDocuments = computed(() => {
+  return productData.value?.media?.fiche_technique_url;
+});
+
+const hasConditioning = computed(() => {
+  return (
+    productData.value?.conditionnement?.nom ||
+    (productData.value?.conditionnement?.quantite &&
+      productData.value?.conditionnement?.unite)
+  );
+});
+
+const formattedExpiration = computed(() => {
+  if (!productData.value?.date_expiration) return "Non renseignée";
+  return new Date(productData.value.date_expiration).toLocaleDateString(
+    "fr-FR"
+  );
+});
+
+const expirationStatusClass = computed(() => {
+  if (!productData.value?.date_expiration) return "";
+
+  const today = new Date();
+  const expiration = new Date(productData.value.date_expiration);
+  const daysDiff = Math.ceil((expiration - today) / (1000 * 60 * 60 * 24));
+
+  if (daysDiff < 0) return "expired";
+  if (daysDiff <= 30) return "expiring-soon";
+  return "";
+});
+
+onMounted(() => {
+  loadProduct();
+});
+</script>
+
+<style scoped>
+.loading-container,
+.error-container,
+.empty-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 400px;
+  background-color: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  margin: 2rem 0;
+}
+
+.loading-spinner,
+.error-message,
+.empty-message {
+  text-align: center;
+  padding: 2rem;
+}
+
+.loading-spinner i {
+  color: #3b82f6;
+  margin-bottom: 1rem;
+}
+
+.error-message i {
+  margin-bottom: 1rem;
+}
+
+.empty-message i {
+  color: #6b7280;
+  margin-bottom: 1rem;
+}
+
+.error-message h5,
+.empty-message h5 {
+  color: #1f2937;
+  margin-bottom: 0.5rem;
+}
+
+.error-message p,
+.empty-message p {
+  color: #6b7280;
+  margin-bottom: 1rem;
+}
+
+.alert-danger {
+  background-color: #f8d7da;
+  border-color: #f5c6cb;
+  color: #721c24;
+}
+
+.alert-danger ul {
+  list-style-type: none;
+  padding-left: 0;
+}
+
+.alert-danger li {
+  margin-bottom: 0.5rem;
+}
+
+.form-control.is-invalid {
+  border-color: #dc3545;
+}
+
+.invalid-feedback {
+  display: block;
+  width: 100%;
+  margin-top: 0.25rem;
+  font-size: 0.875rem;
+  color: #dc3545;
+}
+
+.form-control-static {
+  padding: 0.375rem 0;
+  margin-bottom: 0;
+  border: none;
+  background-color: transparent;
+  color: #495057;
+}
+
+.card {
+  border: none;
+  box-shadow: 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1);
+}
+
+.bg-gradient-primary {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.product-image-container {
+  width: 120px;
+  height: 120px;
+  border-radius: 12px;
+  overflow: hidden;
+  border: 3px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+}
+
+.product-status-indicators {
+  display: flex;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.status-indicator {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  border-radius: 25px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.status-indicator.low-stock {
+  background: rgba(254, 243, 199, 0.9);
+  color: #92400e;
+}
+
+.status-indicator.expired {
+  background: rgba(254, 226, 226, 0.9);
+  color: #991b1b;
+}
+
+.status-indicator.expiring {
+  background: rgba(219, 234, 254, 0.9);
+  color: #1e40af;
+}
+
+.stock-display {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+}
+
+.stock-quantity {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #059669;
+}
+
+.stock-unit {
+  font-size: 0.875rem;
+  color: #6b7280;
+  font-weight: 500;
+}
+
+.stock-min {
+  font-size: 0.875rem;
+  color: #dc2626;
+  font-weight: 500;
+}
+
+.supplier-info {
+  background: #f9fafb;
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  padding: 1.5rem;
+}
+
+.supplier-details {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.supplier-main {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.supplier-name {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: #1f2937;
+}
+
+.supplier-email {
+  font-size: 0.875rem;
+  color: #6b7280;
+}
+
+.supplier-action-btn {
+  padding: 0.75rem;
+  background: #667eea;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-size: 0.875rem;
+}
+
+.supplier-action-btn:hover {
+  background: #5a67d8;
+  transform: translateY(-1px);
+}
+
+.no-supplier {
+  text-align: center;
+  padding: 2rem;
+}
+
+.no-supplier-text {
+  color: #6b7280;
+  font-style: italic;
+}
+
+.documents-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.document-item {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem;
+  background: #f9fafb;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  transition: all 0.2s ease;
+}
+
+.document-item:hover {
+  background: #f3f4f6;
+  border-color: #d1d5db;
+}
+
+.document-icon {
+  font-size: 1.5rem;
+  color: #dc2626;
+}
+
+.document-details {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex: 1;
+}
+
+.document-name {
+  font-weight: 500;
+  color: #1f2937;
+}
+
+.document-link {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: #3b82f6;
+  text-decoration: none;
+  font-size: 0.875rem;
+  font-weight: 500;
+  padding: 0.5rem 1rem;
+  background: #eff6ff;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+}
+
+.document-link:hover {
+  background: #dbeafe;
+  color: #2563eb;
+  text-decoration: none;
+}
+
+.info-value.expired {
+  background: #fef2f2;
+  color: #dc2626;
+  border-color: #fecaca;
+}
+
+.info-value.expiring-soon {
+  background: #fffbeb;
+  color: #d97706;
+  border-color: #fed7aa;
+}
+
+@media (max-width: 768px) {
+  .container-fluid {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  .col-md-4,
+  .col-md-6 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+}
+</style>
diff --git a/thanasoft-front/src/views/pages/Stock/ProductDetails.vue b/thanasoft-front/src/views/pages/Stock/ProductDetails.vue
index 799019b..e846eec 100644
--- a/thanasoft-front/src/views/pages/Stock/ProductDetails.vue
+++ b/thanasoft-front/src/views/pages/Stock/ProductDetails.vue
@@ -1,167 +1,12 @@
 <template>
-  <div class="product-details-page">
-    <!-- Breadcrumbs -->
-    <div class="page-header">
-      <nav aria-label="breadcrumb" class="breadcrumbs-nav">
-        <ol class="breadcrumb">
-          <li class="breadcrumb-item">
-            <router-link to="/stock">Stock</router-link>
-          </li>
-          <li class="breadcrumb-item">
-            <router-link to="/stock/produits">Produits</router-link>
-          </li>
-          <li class="breadcrumb-item active" aria-current="page">
-            {{ productData?.nom || "Chargement..." }}
-          </li>
-        </ol>
-      </nav>
-
-      <!-- Actions header -->
-      <div class="page-actions">
-        <soft-button type="outline" color="secondary" size="sm" @click="goBack">
-          <i class="fas fa-arrow-left me-2"></i>
-          Retour
-        </soft-button>
-
-        <soft-button
-          type="outline"
-          color="primary"
-          size="sm"
-          @click="editProduct"
-        >
-          <i class="fas fa-edit me-2"></i>
-          Modifier
-        </soft-button>
-
-        <soft-button
-          type="outline"
-          color="danger"
-          size="sm"
-          @click="deleteProduct"
-          :disabled="loading"
-        >
-          <i class="fas fa-trash me-2"></i>
-          Supprimer
-        </soft-button>
-      </div>
-    </div>
-
-    <!-- Loading state -->
-    <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 du produit...</p>
-      </div>
-    </div>
-
-    <!-- Error state -->
-    <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>
-        <soft-button
-          type="outline"
-          color="primary"
-          size="sm"
-          @click="loadProduct"
-        >
-          Réessayer
-        </soft-button>
-      </div>
-    </div>
-
-    <!-- Product details -->
-    <div v-else-if="productData" class="product-details-content">
-      <product-details-section
-        :product-data="productData"
-        @view-supplier="handleViewSupplier"
-      />
-    </div>
-
-    <!-- Empty state -->
-    <div v-else class="empty-container">
-      <div class="empty-message">
-        <i class="fas fa-box fa-3x text-muted mb-3"></i>
-        <h5>Produit non trouvé</h5>
-        <p>Le produit demandé n'existe pas ou a été supprimé.</p>
-        <soft-button type="outline" color="primary" size="sm" @click="goBack">
-          Retour à la liste
-        </soft-button>
-      </div>
-    </div>
-  </div>
+  <product-details-presentation @view-supplier="handleViewSupplier" />
 </template>
 
 <script setup>
-import { ref, onMounted, computed } from "vue";
-import { useRoute, useRouter } from "vue-router";
-import ProductDetailsSection from "@/components/Organism/Product/ProductDetailsSection.vue";
-import SoftButton from "@/components/SoftButton.vue";
-import ProductService from "@/services/product";
-import { useProductStore } from "@/stores/productStore";
+import ProductDetailsPresentation from "@/components/Organism/Stock/ProductDetailsPresentation.vue";
+import { useRouter } from "vue-router";
 
-const route = useRoute();
 const router = useRouter();
-const productStore = useProductStore();
-
-const loading = ref(true);
-const error = ref(null);
-const productData = ref(null);
-
-const productId = computed(() => {
-  return parseInt(route.params.id);
-});
-
-const loadProduct = async () => {
-  if (!productId.value) {
-    error.value = "ID de produit invalide";
-    loading.value = false;
-    return;
-  }
-
-  loading.value = true;
-  error.value = null;
-
-  try {
-    const response = await productStore.fetchProduct(productId.value);
-    productData.value = response;
-  } catch (err) {
-    console.error("Error loading product:", err);
-    error.value =
-      err.response?.data?.message || "Erreur lors du chargement du produit";
-  } finally {
-    loading.value = false;
-  }
-};
-
-const goBack = () => {
-  router.push("/stock/produits");
-};
-
-const editProduct = () => {
-  router.push({
-    name: "Modification produit",
-    params: {
-      id: productId.value,
-    },
-  });
-};
-
-const deleteProduct = async () => {
-  if (!confirm("Êtes-vous sûr de vouloir supprimer ce produit ?")) {
-    return;
-  }
-
-  try {
-    await ProductService.deleteProduct(productId.value);
-    // Show success message
-    router.push("/stock/produits");
-  } catch (err) {
-    console.error("Error deleting product:", err);
-    // Show error message
-  }
-};
 
 const handleViewSupplier = (supplier) => {
   if (supplier && supplier.id) {
@@ -173,128 +18,4 @@ const handleViewSupplier = (supplier) => {
     });
   }
 };
-
-onMounted(() => {
-  loadProduct();
-});
 </script>
-
-<style scoped>
-.product-details-page {
-  padding: 1.5rem;
-  background-color: #f8fafc;
-  min-height: calc(100vh - 60px);
-}
-
-.page-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  margin-bottom: 2rem;
-  padding: 1.5rem;
-  background-color: #ffffff;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
-}
-
-@media (max-width: 768px) {
-  .page-header {
-    flex-direction: column;
-    gap: 1rem;
-    align-items: stretch;
-  }
-}
-
-.breadcrumbs-nav {
-  margin-bottom: 0;
-}
-
-.breadcrumb {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.breadcrumb-item {
-  color: #6b7280;
-  font-size: 0.875rem;
-}
-
-.breadcrumb-item:not(:last-child)::after {
-  content: "/";
-  margin-left: 0.5rem;
-  color: #d1d5db;
-}
-
-.breadcrumb-item a {
-  color: #3b82f6;
-  text-decoration: none;
-}
-
-.breadcrumb-item a:hover {
-  text-decoration: underline;
-}
-
-.breadcrumb-item.active {
-  color: #1f2937;
-  font-weight: 500;
-}
-
-.page-actions {
-  display: flex;
-  gap: 0.75rem;
-  flex-wrap: wrap;
-}
-
-.product-details-content {
-  background-color: transparent;
-}
-
-.loading-container,
-.error-container,
-.empty-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 400px;
-  background-color: #ffffff;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
-}
-
-.loading-spinner,
-.error-message,
-.empty-message {
-  text-align: center;
-  padding: 2rem;
-}
-
-.loading-spinner i {
-  color: #3b82f6;
-  margin-bottom: 1rem;
-}
-
-.error-message i {
-  margin-bottom: 1rem;
-}
-
-.empty-message i {
-  color: #6b7280;
-  margin-bottom: 1rem;
-}
-
-.error-message h5,
-.empty-message h5 {
-  color: #1f2937;
-  margin-bottom: 0.5rem;
-}
-
-.error-message p,
-.empty-message p {
-  color: #6b7280;
-  margin-bottom: 1rem;
-}
-</style>
diff --git a/thanasoft-front/src/views/pages/Stock/ProductDetailsView.vue b/thanasoft-front/src/views/pages/Stock/ProductDetailsView.vue
new file mode 100644
index 0000000..e69de29