From e924c4f81980207479d5f1313b83de8087b74b2e Mon Sep 17 00:00:00 2001
From: Nyavokevin <42602932+nyavokevin@users.noreply.github.com>
Date: Tue, 28 Oct 2025 15:25:04 +0300
Subject: [PATCH] add page fournisseur

---
 .../CRM/FournisseurDetailPresentation.vue     | 192 +++++
 .../Organism/CRM/FournisseurPresentation.vue  |  63 ++
 .../fournisseur/FournisseurDetailContent.vue  | 139 ++++
 .../fournisseur/FournisseurDetailSidebar.vue  |  79 ++
 .../molecules/Tables/CRM/ClientTable.vue      |   2 +-
 .../molecules/Tables/CRM/FournisseurTable.vue | 489 ++++++++++++
 .../fournisseur/FournisseurActivityTab.vue    |  12 +
 .../fournisseur/FournisseurAddressTab.vue     |  20 +
 .../fournisseur/FournisseurContactsTab.vue    |  28 +
 .../fournisseur/FournisseurInfoTab.vue        |  21 +
 .../fournisseur/FournisseurLocationsTab.vue   |  28 +
 .../fournisseur/FournisseurNotesTab.vue       |  20 +
 .../fournisseur/FournisseurOverview.vue       | 151 ++++
 .../fournisseur/FournisseurProfileCard.vue    |  84 ++
 .../fournisseur/FournisseurTabNavigation.vue  |  71 ++
 .../molecules/location/LocationTable.vue      | 745 +++++-------------
 .../CRM/FournisseurDetailTemplate.vue         |  16 +
 .../templates/CRM/FournisseurTemplate.vue     |  23 +
 .../src/examples/Sidenav/SidenavList.vue      | 285 ++++++-
 thanasoft-front/src/router/index.js           | 140 ++++
 thanasoft-front/src/views/pages/Agenda.vue    |  11 +
 .../src/views/pages/Clients/Statistiques.vue  |  11 +
 thanasoft-front/src/views/pages/Courriel.vue  |  11 +
 .../src/views/pages/Employes/Absences.vue     |  11 +
 .../src/views/pages/Employes/Employes.vue     |  11 +
 .../src/views/pages/Employes/NDF.vue          |  11 +
 .../src/views/pages/Employes/Vehicules.vue    |  11 +
 .../views/pages/Fournisseurs/Commandes.vue    |  11 +
 .../src/views/pages/Fournisseurs/Contacts.vue |  11 +
 .../src/views/pages/Fournisseurs/Factures.vue |  11 +
 .../pages/Fournisseurs/FournisseurDetails.vue | 147 ++++
 .../views/pages/Fournisseurs/Fournisseurs.vue | 104 +++
 .../views/pages/Fournisseurs/Statistiques.vue |  11 +
 .../src/views/pages/Parametrage/Droits.vue    |  11 +
 .../src/views/pages/Parametrage/Emails.vue    |  11 +
 .../src/views/pages/Parametrage/Modeles.vue   |  11 +
 .../views/pages/SousTraitants/Commandes.vue   |  11 +
 .../views/pages/SousTraitants/Contacts.vue    |  11 +
 .../views/pages/SousTraitants/Factures.vue    |  11 +
 .../pages/SousTraitants/SousTraitants.vue     |  11 +
 .../pages/SousTraitants/Statistiques.vue      |  11 +
 .../src/views/pages/Stock/Reception.vue       |  11 +
 .../src/views/pages/Stock/Stock.vue           |  11 +
 .../src/views/pages/Ventes/Devis.vue          |  11 +
 .../src/views/pages/Ventes/Factures.vue       |  11 +
 .../src/views/pages/Ventes/Statistiques.vue   |  11 +
 46 files changed, 2521 insertions(+), 602 deletions(-)
 create mode 100644 thanasoft-front/src/components/Organism/CRM/FournisseurDetailPresentation.vue
 create mode 100644 thanasoft-front/src/components/Organism/CRM/FournisseurPresentation.vue
 create mode 100644 thanasoft-front/src/components/Organism/CRM/fournisseur/FournisseurDetailContent.vue
 create mode 100644 thanasoft-front/src/components/Organism/CRM/fournisseur/FournisseurDetailSidebar.vue
 create mode 100644 thanasoft-front/src/components/molecules/Tables/CRM/FournisseurTable.vue
 create mode 100644 thanasoft-front/src/components/molecules/fournisseur/FournisseurActivityTab.vue
 create mode 100644 thanasoft-front/src/components/molecules/fournisseur/FournisseurAddressTab.vue
 create mode 100644 thanasoft-front/src/components/molecules/fournisseur/FournisseurContactsTab.vue
 create mode 100644 thanasoft-front/src/components/molecules/fournisseur/FournisseurInfoTab.vue
 create mode 100644 thanasoft-front/src/components/molecules/fournisseur/FournisseurLocationsTab.vue
 create mode 100644 thanasoft-front/src/components/molecules/fournisseur/FournisseurNotesTab.vue
 create mode 100644 thanasoft-front/src/components/molecules/fournisseur/FournisseurOverview.vue
 create mode 100644 thanasoft-front/src/components/molecules/fournisseur/FournisseurProfileCard.vue
 create mode 100644 thanasoft-front/src/components/molecules/fournisseur/FournisseurTabNavigation.vue
 create mode 100644 thanasoft-front/src/components/templates/CRM/FournisseurDetailTemplate.vue
 create mode 100644 thanasoft-front/src/components/templates/CRM/FournisseurTemplate.vue
 create mode 100644 thanasoft-front/src/views/pages/Agenda.vue
 create mode 100644 thanasoft-front/src/views/pages/Clients/Statistiques.vue
 create mode 100644 thanasoft-front/src/views/pages/Courriel.vue
 create mode 100644 thanasoft-front/src/views/pages/Employes/Absences.vue
 create mode 100644 thanasoft-front/src/views/pages/Employes/Employes.vue
 create mode 100644 thanasoft-front/src/views/pages/Employes/NDF.vue
 create mode 100644 thanasoft-front/src/views/pages/Employes/Vehicules.vue
 create mode 100644 thanasoft-front/src/views/pages/Fournisseurs/Commandes.vue
 create mode 100644 thanasoft-front/src/views/pages/Fournisseurs/Contacts.vue
 create mode 100644 thanasoft-front/src/views/pages/Fournisseurs/Factures.vue
 create mode 100644 thanasoft-front/src/views/pages/Fournisseurs/FournisseurDetails.vue
 create mode 100644 thanasoft-front/src/views/pages/Fournisseurs/Fournisseurs.vue
 create mode 100644 thanasoft-front/src/views/pages/Fournisseurs/Statistiques.vue
 create mode 100644 thanasoft-front/src/views/pages/Parametrage/Droits.vue
 create mode 100644 thanasoft-front/src/views/pages/Parametrage/Emails.vue
 create mode 100644 thanasoft-front/src/views/pages/Parametrage/Modeles.vue
 create mode 100644 thanasoft-front/src/views/pages/SousTraitants/Commandes.vue
 create mode 100644 thanasoft-front/src/views/pages/SousTraitants/Contacts.vue
 create mode 100644 thanasoft-front/src/views/pages/SousTraitants/Factures.vue
 create mode 100644 thanasoft-front/src/views/pages/SousTraitants/SousTraitants.vue
 create mode 100644 thanasoft-front/src/views/pages/SousTraitants/Statistiques.vue
 create mode 100644 thanasoft-front/src/views/pages/Stock/Reception.vue
 create mode 100644 thanasoft-front/src/views/pages/Stock/Stock.vue
 create mode 100644 thanasoft-front/src/views/pages/Ventes/Devis.vue
 create mode 100644 thanasoft-front/src/views/pages/Ventes/Factures.vue
 create mode 100644 thanasoft-front/src/views/pages/Ventes/Statistiques.vue

diff --git a/thanasoft-front/src/components/Organism/CRM/FournisseurDetailPresentation.vue b/thanasoft-front/src/components/Organism/CRM/FournisseurDetailPresentation.vue
new file mode 100644
index 0000000..19957e6
--- /dev/null
+++ b/thanasoft-front/src/components/Organism/CRM/FournisseurDetailPresentation.vue
@@ -0,0 +1,192 @@
+<template>
+  <fournisseur-detail-template>
+    <template #button-return>
+      <div class="col-12">
+        <router-link
+          to="/fournisseurs"
+          class="btn btn-outline-secondary btn-sm mb-3"
+        >
+          <i class="fas fa-arrow-left me-2"></i>Retour aux fournisseurs
+        </router-link>
+      </div>
+    </template>
+    <template #loading-state>
+      <div v-if="isLoading" class="text-center p-5">
+        <div class="spinner-border text-primary" role="status">
+          <span class="visually-hidden">Chargement...</span>
+        </div>
+      </div>
+    </template>
+    <template #fournisseur-detail-sidebar>
+      <FournisseurDetailSidebar
+        :avatar-url="fournisseurAvatar"
+        :initials="getInitials(fournisseur.name)"
+        :fournisseur-name="fournisseur.name"
+        :fournisseur-type="fournisseur.type_label || 'Fournisseur'"
+        :contacts-count="contacts.length"
+        :locations-count="locations.length"
+        :is-active="fournisseur.is_active"
+        :active-tab="activeTab"
+        @edit-avatar="triggerFileInput"
+        @change-tab="activeTab = $event"
+      />
+    </template>
+    <template #file-input>
+      <input
+        :ref="fileInput"
+        type="file"
+        class="d-none"
+        accept="image/*"
+        @change="handleAvatarUpload"
+      />
+    </template>
+    <template #fournisseur-detail-content>
+      <FournisseurDetailContent
+        :active-tab="activeTab"
+        :fournisseur="fournisseur"
+        :contacts="contacts"
+        :locations="locations"
+        :formatted-address="formatAddress(fournisseur)"
+        :fournisseur-id="fournisseur.id"
+        :contact-is-loading="contactLoading"
+        :location-is-loading="locationLoading"
+        @change-tab="activeTab = $event"
+        @updating-fournisseur="handleUpdateFournisseur"
+        @create-contact="handleAddContact"
+        @updating-contact="handleModifiedContact"
+        @create-location="handleAddLocation"
+        @modify-location="handleModifyLocation"
+        @remove-location="handleRemoveLocation"
+      />
+    </template>
+  </fournisseur-detail-template>
+</template>
+<script setup>
+import { defineProps, defineEmits, ref } from "vue";
+import FournisseurDetailTemplate from "@/components/templates/CRM/FournisseurDetailTemplate.vue";
+import FournisseurDetailSidebar from "./fournisseur/FournisseurDetailSidebar.vue";
+import FournisseurDetailContent from "./fournisseur/FournisseurDetailContent.vue";
+import { RouterLink } from "vue-router";
+
+const props = defineProps({
+  fournisseur: {
+    type: Object,
+    required: true,
+  },
+  contacts: {
+    type: Array,
+    required: false,
+    default: () => [],
+  },
+  locations: {
+    type: Array,
+    required: false,
+    default: () => [],
+  },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+  fournisseurAvatar: {
+    type: String,
+    default: "",
+  },
+  activeTab: {
+    type: String,
+    default: "overview",
+  },
+  fileInput: {
+    type: Object,
+    required: true,
+  },
+  contactLoading: {
+    type: Boolean,
+    default: false,
+  },
+  locationLoading: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const localAvatar = ref(props.fournisseurAvatar);
+
+const emit = defineEmits([
+  "updateTheFournisseur",
+  "handleFileInput",
+  "add-new-contact",
+  "updating-contact",
+  "add-new-location",
+  "modify-location",
+  "remove-location",
+]);
+
+const handleAvatarUpload = (event) => {
+  const file = event.target.files[0];
+  if (file) {
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      localAvatar.value = e.target.result;
+      // TODO: Upload to server
+      console.log("Upload avatar to server");
+    };
+    reader.readAsDataURL(file);
+  }
+};
+
+const handleUpdateFournisseur = (updateData) => {
+  emit("updateTheFournisseur", updateData);
+};
+
+const inputFile = () => {
+  emit("handleFileInput");
+};
+
+const handleAddContact = (data) => {
+  emit("add-new-contact", data);
+};
+
+const handleModifiedContact = (modifiedContact) => {
+  emit("updating-contact", modifiedContact);
+};
+
+const handleAddLocation = (data) => {
+  emit("add-new-location", data);
+};
+
+const handleModifyLocation = (location) => {
+  emit("modify-location", location);
+};
+
+const handleRemoveLocation = (locationId) => {
+  emit("remove-location", locationId);
+};
+
+const getInitials = (name) => {
+  if (!name) return "?";
+  return name
+    .split(" ")
+    .map((word) => word[0])
+    .join("")
+    .toUpperCase()
+    .substring(0, 2);
+};
+
+const formatAddress = (fournisseur) => {
+  const parts = [
+    fournisseur.billing_address.line1,
+    fournisseur.billing_address.line2,
+    fournisseur.billing_address.postal_code,
+    fournisseur.billing_address.city,
+    fournisseur.billing_address.country_code,
+  ].filter(Boolean);
+
+  return parts.length > 0 ? parts.join(", ") : "Aucune adresse renseignée";
+};
+
+const triggerFileInput = () => {
+  if (props.fileInput) {
+    props.fileInput.click();
+  }
+};
+</script>
diff --git a/thanasoft-front/src/components/Organism/CRM/FournisseurPresentation.vue b/thanasoft-front/src/components/Organism/CRM/FournisseurPresentation.vue
new file mode 100644
index 0000000..e5135fc
--- /dev/null
+++ b/thanasoft-front/src/components/Organism/CRM/FournisseurPresentation.vue
@@ -0,0 +1,63 @@
+<template>
+  <fournisseur-template>
+    <template #fournisseur-new-action>
+      <add-button text="Ajouter" @click="goToFournisseur" />
+    </template>
+    <template #select-filter>
+      <filter-table />
+    </template>
+    <template #fournisseur-other-action>
+      <table-action />
+    </template>
+    <template #fournisseur-table>
+      <fournisseur-table
+        :data="fournisseurData"
+        :loading="loadingData"
+        @view="goToDetails"
+        @delete="deleteFournisseur"
+      />
+    </template>
+  </fournisseur-template>
+</template>
+<script setup>
+import FournisseurTemplate from "@/components/templates/CRM/FournisseurTemplate.vue";
+import FournisseurTable from "@/components/molecules/Tables/CRM/FournisseurTable.vue";
+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 { useRouter } from "vue-router";
+
+const router = useRouter();
+
+const emit = defineEmits(["pushDetails", "deleteFournisseur"]);
+
+defineProps({
+  fournisseurData: {
+    type: Array,
+    default: [],
+  },
+  loadingData: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const goToFournisseur = () => {
+  // Navigate to create fournisseur page when implemented
+  console.log("Navigate to create fournisseur");
+};
+
+const goToDetails = (fournisseurId) => {
+  router.push({
+    name: "Fournisseur details",
+    params: {
+      id: fournisseurId,
+    },
+  });
+};
+
+const deleteFournisseur = (fournisseur) => {
+  emit("deleteFournisseur", fournisseur);
+};
+</script>
diff --git a/thanasoft-front/src/components/Organism/CRM/fournisseur/FournisseurDetailContent.vue b/thanasoft-front/src/components/Organism/CRM/fournisseur/FournisseurDetailContent.vue
new file mode 100644
index 0000000..965b23b
--- /dev/null
+++ b/thanasoft-front/src/components/Organism/CRM/fournisseur/FournisseurDetailContent.vue
@@ -0,0 +1,139 @@
+<template>
+  <div>
+    <!-- Overview Tab -->
+    <div v-show="activeTab === 'overview'">
+      <FournisseurOverview
+        :fournisseur="fournisseur"
+        :contacts="contacts"
+        :formatted-address="formattedAddress"
+        :fournisseur-id="fournisseurId"
+        @view-all-contacts="$emit('change-tab', 'contacts')"
+      />
+    </div>
+
+    <!-- Information Tab -->
+    <div v-show="activeTab === 'info'">
+      <FournisseurInfoTab
+        :fournisseur="fournisseur"
+        @fournisseur-updated="updateFournisseur"
+      />
+    </div>
+
+    <div v-show="activeTab === 'activity'">
+      <FournisseurActivityTab />
+    </div>
+
+    <!-- Contacts Tab -->
+    <div v-show="activeTab === 'contacts'">
+      <FournisseurContactsTab
+        :contacts="contacts"
+        :fournisseur-id="fournisseur.id"
+        :is-loading="contactIsLoading"
+        @contact-created="handleCreateContact"
+        @contact-modified="handleModifiedContact"
+      />
+    </div>
+
+    <!-- Address Tab -->
+    <div v-show="activeTab === 'address'">
+      <FournisseurAddressTab :fournisseur="fournisseur" />
+    </div>
+
+    <!-- Locations Tab -->
+    <div v-show="activeTab === 'locations'">
+      <FournisseurLocationsTab
+        :locations="locations"
+        :fournisseur-id="fournisseur.id"
+        :is-loading="locationIsLoading"
+        @location-created="handleCreateLocation"
+        @location-modified="handleModifyLocation"
+        @location-removed="handleRemoveLocation"
+      />
+    </div>
+
+    <!-- Notes Tab -->
+    <div v-show="activeTab === 'notes'">
+      <FournisseurNotesTab :notes="fournisseur.notes" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import FournisseurOverview from "@/components/molecules/fournisseur/FournisseurOverview.vue";
+import FournisseurInfoTab from "@/components/molecules/fournisseur/FournisseurInfoTab.vue";
+import FournisseurContactsTab from "@/components/molecules/fournisseur/FournisseurContactsTab.vue";
+import FournisseurAddressTab from "@/components/molecules/fournisseur/FournisseurAddressTab.vue";
+import FournisseurLocationsTab from "@/components/molecules/fournisseur/FournisseurLocationsTab.vue";
+import FournisseurNotesTab from "@/components/molecules/fournisseur/FournisseurNotesTab.vue";
+import FournisseurActivityTab from "@/components/molecules/fournisseur/FournisseurActivityTab.vue";
+import { defineProps, defineEmits } from "vue";
+
+defineProps({
+  activeTab: {
+    type: String,
+    required: true,
+  },
+  fournisseur: {
+    type: Object,
+    required: true,
+  },
+  contacts: {
+    type: Array,
+    default: () => [],
+  },
+  locations: {
+    type: Array,
+    default: () => [],
+  },
+  formattedAddress: {
+    type: String,
+    default: "Aucune adresse renseignée",
+  },
+  fournisseurId: {
+    type: [Number, String],
+    required: true,
+  },
+  contactIsLoading: {
+    type: Boolean,
+    default: false,
+  },
+  locationIsLoading: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits([
+  "change-tab",
+  "create-contact",
+  "updatingFournisseur",
+  "create-location",
+  "modify-location",
+  "remove-location",
+  "updating-contact",
+]);
+
+const updateFournisseur = (updatedFournisseur) => {
+  emit("updatingFournisseur", updatedFournisseur);
+};
+
+const handleCreateContact = (newContact) => {
+  emit("create-contact", newContact);
+};
+
+const handleModifiedContact = (modifiedContact) => {
+  emit("updating-contact", modifiedContact);
+};
+
+const handleCreateLocation = (newLocation) => {
+  emit("create-location", newLocation);
+};
+
+const handleModifyLocation = (location) => {
+  emit("modify-location", location);
+};
+
+const handleRemoveLocation = (locationId) => {
+  emit("remove-location", locationId);
+};
+</script>
diff --git a/thanasoft-front/src/components/Organism/CRM/fournisseur/FournisseurDetailSidebar.vue b/thanasoft-front/src/components/Organism/CRM/fournisseur/FournisseurDetailSidebar.vue
new file mode 100644
index 0000000..708c445
--- /dev/null
+++ b/thanasoft-front/src/components/Organism/CRM/fournisseur/FournisseurDetailSidebar.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="card position-sticky top-1">
+    <!-- Fournisseur Profile Card -->
+    <FournisseurProfileCard
+      :avatar-url="avatarUrl"
+      :initials="initials"
+      :fournisseur-name="fournisseurName"
+      :fournisseur-type="fournisseurType"
+      :contacts-count="contactsCount"
+      :is-active="isActive"
+      @edit-avatar="$emit('edit-avatar')"
+    />
+
+    <hr class="horizontal dark my-3 mx-3" />
+
+    <!-- Tab Navigation -->
+    <div class="card-body pt-0">
+      <FournisseurTabNavigation
+        :active-tab="activeTab"
+        :contacts-count="contactsCount"
+        :locations-count="locationsCount"
+        @change-tab="$emit('change-tab', $event)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import FournisseurProfileCard from "@/components/molecules/fournisseur/FournisseurProfileCard.vue";
+import FournisseurTabNavigation from "@/components/molecules/fournisseur/FournisseurTabNavigation.vue";
+import { defineProps, defineEmits } from "vue";
+defineProps({
+  avatarUrl: {
+    type: String,
+    default: null,
+  },
+  initials: {
+    type: String,
+    required: true,
+  },
+  fournisseurName: {
+    type: String,
+    required: true,
+  },
+  fournisseurType: {
+    type: String,
+    default: "Fournisseur",
+  },
+  contactsCount: {
+    type: Number,
+    default: 0,
+  },
+  locationsCount: {
+    type: Number,
+    default: 0,
+  },
+  isActive: {
+    type: Boolean,
+    default: true,
+  },
+  activeTab: {
+    type: String,
+    required: true,
+  },
+});
+
+defineEmits(["edit-avatar", "change-tab"]);
+</script>
+
+<style scoped>
+.position-sticky {
+  top: 1rem;
+}
+
+.card {
+  border: 0;
+  box-shadow: 0 0 2rem 0 rgba(136, 152, 170, 0.15);
+}
+</style>
diff --git a/thanasoft-front/src/components/molecules/Tables/CRM/ClientTable.vue b/thanasoft-front/src/components/molecules/Tables/CRM/ClientTable.vue
index 4f70fd0..53fd2c8 100644
--- a/thanasoft-front/src/components/molecules/Tables/CRM/ClientTable.vue
+++ b/thanasoft-front/src/components/molecules/Tables/CRM/ClientTable.vue
@@ -4,7 +4,7 @@
     <div v-if="loading" class="loading-container">
       <div class="loading-spinner">
         <div class="spinner-border text-primary" role="status">
-          <span class="visually-hidden">Loading...</span>
+          <span class="visually-hidden">Chargement...</span>
         </div>
       </div>
       <div class="loading-content">
diff --git a/thanasoft-front/src/components/molecules/Tables/CRM/FournisseurTable.vue b/thanasoft-front/src/components/molecules/Tables/CRM/FournisseurTable.vue
new file mode 100644
index 0000000..75834bd
--- /dev/null
+++ b/thanasoft-front/src/components/molecules/Tables/CRM/FournisseurTable.vue
@@ -0,0 +1,489 @@
+<template>
+  <div class="table-container">
+    <!-- Loading State -->
+    <div v-if="loading" class="loading-container">
+      <div class="loading-spinner">
+        <div class="spinner-border text-primary" role="status">
+          <span class="visually-hidden">Chargement...</span>
+        </div>
+      </div>
+      <div class="loading-content">
+        <!-- Skeleton Rows -->
+        <div class="table-responsive">
+          <table class="table table-flush">
+            <thead class="thead-light">
+              <tr>
+                <th>Commercial</th>
+                <th>Fournisseur</th>
+                <th>Address</th>
+                <th>Categories</th>
+                <th>Contact</th>
+                <th>Status</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="i in skeletonRows" :key="i" class="skeleton-row">
+                <!-- Commercial Column Skeleton -->
+                <td>
+                  <div class="d-flex align-items-center">
+                    <div class="skeleton-checkbox"></div>
+                    <div class="skeleton-text short ms-2"></div>
+                  </div>
+                </td>
+
+                <!-- Fournisseur Name Column Skeleton -->
+                <td>
+                  <div class="d-flex align-items-center">
+                    <div class="skeleton-avatar"></div>
+                    <div class="skeleton-text medium ms-2"></div>
+                  </div>
+                </td>
+
+                <!-- Address Column Skeleton -->
+                <td>
+                  <div class="skeleton-text long"></div>
+                </td>
+
+                <!-- Categories Column Skeleton -->
+                <td>
+                  <div class="d-flex align-items-center">
+                    <div class="skeleton-icon"></div>
+                    <div class="skeleton-text medium ms-2"></div>
+                  </div>
+                </td>
+
+                <!-- Contact Column Skeleton -->
+                <td>
+                  <div class="contact-info">
+                    <div class="skeleton-text long mb-1"></div>
+                    <div class="skeleton-text medium"></div>
+                  </div>
+                </td>
+
+                <!-- Status Column Skeleton -->
+                <td>
+                  <div class="d-flex align-items-center">
+                    <div class="skeleton-icon"></div>
+                    <div class="skeleton-text short ms-2"></div>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    <!-- Data State -->
+    <div v-else class="table-responsive">
+      <table id="fournisseur-list" class="table table-flush">
+        <thead class="thead-light">
+          <tr>
+            <th>Commercial</th>
+            <th>Fournisseur</th>
+            <th>Address</th>
+            <th>Categories</th>
+            <th>Contact</th>
+            <th>Status</th>
+            <th>Action</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="fournisseur in data" :key="fournisseur.id">
+            <!-- Commercial Column -->
+            <td>
+              <div class="d-flex align-items-center">
+                <soft-checkbox />
+                <p class="text-xs font-weight-bold ms-2 mb-0">
+                  {{ fournisseur.commercial }}
+                </p>
+              </div>
+            </td>
+
+            <!-- Fournisseur Name Column -->
+            <td class="font-weight-bold">
+              <div class="d-flex align-items-center">
+                <soft-avatar
+                  :img="getRandomAvatar()"
+                  size="xs"
+                  class="me-2"
+                  alt="user image"
+                  circular
+                />
+                <span>{{ fournisseur.name }}</span>
+              </div>
+            </td>
+
+            <!-- Address Column (Shortened) -->
+            <td class="text-xs font-weight-bold">
+              <span class="my-2 text-xs">{{
+                getShortAddress(fournisseur.billing_address)
+              }}</span>
+            </td>
+
+            <!-- Categories Column -->
+            <td class="text-xs font-weight-bold">
+              <div class="d-flex align-items-center">
+                <soft-button
+                  :color="getCategoryColor(fournisseur.type_label)"
+                  variant="outline"
+                  class="btn-icon-only btn-rounded mb-0 me-2 btn-sm d-flex align-items-center justify-content-center"
+                >
+                  <i
+                    :class="getCategoryIcon(fournisseur.type_label)"
+                    aria-hidden="true"
+                  ></i>
+                </soft-button>
+                <span>{{ fournisseur.type_label }}</span>
+              </div>
+            </td>
+
+            <!-- Contact Column -->
+            <td class="text-xs font-weight-bold">
+              <div class="contact-info">
+                <div class="text-xs text-secondary">
+                  {{ fournisseur.email }}
+                </div>
+                <div class="text-xs">{{ fournisseur.phone }}</div>
+              </div>
+            </td>
+
+            <!-- Status Column -->
+            <td class="text-xs font-weight-bold">
+              <div class="d-flex align-items-center">
+                <soft-button
+                  :color="fournisseur.is_active ? 'success' : 'danger'"
+                  variant="outline"
+                  class="btn-icon-only btn-rounded mb-0 me-2 btn-sm d-flex align-items-center justify-content-center"
+                >
+                  <i
+                    :class="
+                      fournisseur.is_active ? 'fas fa-check' : 'fas fa-times'
+                    "
+                    aria-hidden="true"
+                  ></i>
+                </soft-button>
+                <span>{{ fournisseur.is_active ? "Active" : "Inactive" }}</span>
+              </div>
+            </td>
+
+            <td>
+              <div class="d-flex align-items-center gap-2">
+                <!-- View Button -->
+
+                <soft-button
+                  color="info"
+                  variant="outline"
+                  title="View Fournisseur"
+                  :data-fournisseur-id="fournisseur.id"
+                  class="btn-icon-only btn-rounded mb-0 btn-sm d-flex align-items-center justify-content-center"
+                >
+                  <i class="fas fa-eye" aria-hidden="true"></i>
+                </soft-button>
+
+                <!-- Delete Button -->
+                <soft-button
+                  color="danger"
+                  variant="outline"
+                  title="Delete Fournisseur"
+                  :data-fournisseur-id="fournisseur.id"
+                  class="btn-icon-only btn-rounded mb-0 btn-sm d-flex align-items-center justify-content-center"
+                >
+                  <i class="fas fa-trash" aria-hidden="true"></i>
+                </soft-button>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Empty State -->
+    <div v-if="!loading && data.length === 0" class="empty-state">
+      <div class="empty-icon">
+        <i class="fas fa-truck fa-3x text-muted"></i>
+      </div>
+      <h5 class="empty-title">Aucun fournisseur trouvé</h5>
+      <p class="empty-text text-muted">
+        Aucun fournisseur à afficher pour le moment.
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch, onUnmounted } from "vue";
+import { DataTable } from "simple-datatables";
+import SoftCheckbox from "@/components/SoftCheckbox.vue";
+import SoftButton from "@/components/SoftButton.vue";
+import SoftAvatar from "@/components/SoftAvatar.vue";
+import { defineProps, defineEmits } from "vue";
+
+const emit = defineEmits(["view", "delete"]);
+
+// Sample avatar images
+import img1 from "@/assets/img/team-2.jpg";
+import img2 from "@/assets/img/team-1.jpg";
+import img3 from "@/assets/img/team-3.jpg";
+import img4 from "@/assets/img/team-4.jpg";
+import img5 from "@/assets/img/team-5.jpg";
+import img6 from "@/assets/img/ivana-squares.jpg";
+
+const avatarImages = [img1, img2, img3, img4, img5, img6];
+
+// Reactive data
+const dataTableInstance = ref(null);
+
+const props = defineProps({
+  data: {
+    type: Array,
+    default: [],
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  skeletonRows: {
+    type: Number,
+    default: 5,
+  },
+});
+
+// Methods
+const getRandomAvatar = () => {
+  const randomIndex = Math.floor(Math.random() * avatarImages.length);
+  return avatarImages[randomIndex];
+};
+
+const getShortAddress = (address) => {
+  if (!address) return "N/A";
+  // Return just city and postal code for brevity
+  return `${address.postal_code} ${address.city}`;
+};
+
+const getCategoryColor = (type) => {
+  const colors = {
+    Entreprise: "info",
+    Particulier: "success",
+    Association: "warning",
+  };
+  return colors[type] || "secondary";
+};
+
+const getCategoryIcon = (type) => {
+  const icons = {
+    Entreprise: "fas fa-building",
+    Particulier: "fas fa-user",
+    Association: "fas fa-users",
+  };
+  return icons[type] || "fas fa-circle";
+};
+
+const initializeDataTable = () => {
+  // Destroy existing instance if it exists
+  if (dataTableInstance.value) {
+    dataTableInstance.value.destroy();
+    dataTableInstance.value = null;
+  }
+
+  const dataTableEl = document.getElementById("fournisseur-list");
+  if (dataTableEl) {
+    dataTableInstance.value = new DataTable(dataTableEl, {
+      searchable: true,
+      fixedHeight: true,
+      perPage: 10,
+      perPageSelect: [5, 10, 15, 20],
+    });
+
+    dataTableEl.addEventListener("click", handleTableClick);
+  }
+};
+
+const handleTableClick = (event) => {
+  const button = event.target.closest("button");
+  if (!button) return;
+  const fournisseurId = button.getAttribute("data-fournisseur-id");
+  if (
+    button.title === "Delete Fournisseur" ||
+    button.querySelector(".fa-trash")
+  ) {
+    emit("delete", fournisseurId);
+  } else if (
+    button.title === "View Fournisseur" ||
+    button.querySelector(".fa-eye")
+  ) {
+    emit("view", fournisseurId);
+  }
+};
+
+// Watch for data changes to reinitialize datatable
+watch(
+  () => props.data,
+  () => {
+    if (!props.loading) {
+      // Small delay to ensure DOM is updated
+      setTimeout(() => {
+        initializeDataTable();
+      }, 100);
+    }
+  },
+  { deep: true }
+);
+
+onUnmounted(() => {
+  const dataTableEl = document.getElementById("fournisseur-list");
+  if (dataTableEl) {
+    dataTableEl.removeEventListener("click", handleTableClick);
+  }
+  if (dataTableInstance.value) {
+    dataTableInstance.value.destroy();
+  }
+});
+
+// Initialize data
+onMounted(() => {
+  if (!props.loading && props.data.length > 0) {
+    initializeDataTable();
+  }
+});
+</script>
+
+<style scoped>
+.table-container {
+  position: relative;
+  min-height: 200px;
+}
+
+.loading-container {
+  position: relative;
+}
+
+.loading-spinner {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  z-index: 10;
+}
+
+.loading-content {
+  opacity: 0.7;
+  pointer-events: none;
+}
+
+.skeleton-row {
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+.skeleton-checkbox {
+  width: 18px;
+  height: 18px;
+  border-radius: 3px;
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: shimmer 2s infinite;
+}
+
+.skeleton-avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: shimmer 2s infinite;
+}
+
+.skeleton-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: shimmer 2s infinite;
+}
+
+.skeleton-text {
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: shimmer 2s infinite;
+  border-radius: 4px;
+  height: 12px;
+}
+
+.skeleton-text.short {
+  width: 40px;
+}
+
+.skeleton-text.medium {
+  width: 80px;
+}
+
+.skeleton-text.long {
+  width: 120px;
+}
+
+.empty-state {
+  text-align: center;
+  padding: 3rem 1rem;
+}
+
+.empty-icon {
+  margin-bottom: 1rem;
+  opacity: 0.5;
+}
+
+.empty-title {
+  margin-bottom: 0.5rem;
+  color: #6c757d;
+}
+
+.empty-text {
+  max-width: 300px;
+  margin: 0 auto;
+}
+
+.contact-info {
+  line-height: 1.2;
+}
+
+.text-xs {
+  font-size: 0.75rem;
+}
+
+/* Animations */
+@keyframes pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.7;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .loading-spinner {
+    top: 10px;
+    right: 10px;
+  }
+
+  .skeleton-text.long {
+    width: 80px;
+  }
+
+  .skeleton-text.medium {
+    width: 60px;
+  }
+}
+</style>
diff --git a/thanasoft-front/src/components/molecules/fournisseur/FournisseurActivityTab.vue b/thanasoft-front/src/components/molecules/fournisseur/FournisseurActivityTab.vue
new file mode 100644
index 0000000..8577113
--- /dev/null
+++ b/thanasoft-front/src/components/molecules/fournisseur/FournisseurActivityTab.vue
@@ -0,0 +1,12 @@
+<template>
+  <div class="card">
+    <div class="card-header pb-0">
+      <h6 class="mb-0">Activités récentes</h6>
+    </div>
+    <div class="card-body">
+      <p class="text-sm">Historique des activités du fournisseur</p>
+    </div>
+  </div>
+</template>
+
+<script setup></script>
diff --git a/thanasoft-front/src/components/molecules/fournisseur/FournisseurAddressTab.vue b/thanasoft-front/src/components/molecules/fournisseur/FournisseurAddressTab.vue
new file mode 100644
index 0000000..45ea2de
--- /dev/null
+++ b/thanasoft-front/src/components/molecules/fournisseur/FournisseurAddressTab.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="card">
+    <div class="card-header pb-0">
+      <h6 class="mb-0">Adresse du fournisseur</h6>
+    </div>
+    <div class="card-body">
+      <p class="text-sm">Adresse de facturation</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps } from "vue";
+defineProps({
+  fournisseur: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
diff --git a/thanasoft-front/src/components/molecules/fournisseur/FournisseurContactsTab.vue b/thanasoft-front/src/components/molecules/fournisseur/FournisseurContactsTab.vue
new file mode 100644
index 0000000..b9efcdd
--- /dev/null
+++ b/thanasoft-front/src/components/molecules/fournisseur/FournisseurContactsTab.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="card">
+    <div class="card-header pb-0">
+      <h6 class="mb-0">Contacts du fournisseur</h6>
+    </div>
+    <div class="card-body">
+      <p class="text-sm">Liste des contacts</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps } from "vue";
+defineProps({
+  contacts: {
+    type: Array,
+    default: () => [],
+  },
+  fournisseurId: {
+    type: [Number, String],
+    required: true,
+  },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
diff --git a/thanasoft-front/src/components/molecules/fournisseur/FournisseurInfoTab.vue b/thanasoft-front/src/components/molecules/fournisseur/FournisseurInfoTab.vue
new file mode 100644
index 0000000..bfb0312
--- /dev/null
+++ b/thanasoft-front/src/components/molecules/fournisseur/FournisseurInfoTab.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="card">
+    <div class="card-header pb-0">
+      <h6 class="mb-0">Informations du fournisseur</h6>
+    </div>
+    <div class="card-body">
+      <p class="text-sm">Informations détaillées du fournisseur</p>
+      <p class="text-xs text-secondary">{{ fournisseur.name }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps } from "vue";
+defineProps({
+  fournisseur: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
diff --git a/thanasoft-front/src/components/molecules/fournisseur/FournisseurLocationsTab.vue b/thanasoft-front/src/components/molecules/fournisseur/FournisseurLocationsTab.vue
new file mode 100644
index 0000000..930fd13
--- /dev/null
+++ b/thanasoft-front/src/components/molecules/fournisseur/FournisseurLocationsTab.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="card">
+    <div class="card-header pb-0">
+      <h6 class="mb-0">Localisations du fournisseur</h6>
+    </div>
+    <div class="card-body">
+      <p class="text-sm">Liste des localisations</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps } from "vue";
+defineProps({
+  locations: {
+    type: Array,
+    default: () => [],
+  },
+  fournisseurId: {
+    type: [Number, String],
+    required: true,
+  },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
diff --git a/thanasoft-front/src/components/molecules/fournisseur/FournisseurNotesTab.vue b/thanasoft-front/src/components/molecules/fournisseur/FournisseurNotesTab.vue
new file mode 100644
index 0000000..d8fe2fb
--- /dev/null
+++ b/thanasoft-front/src/components/molecules/fournisseur/FournisseurNotesTab.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="card">
+    <div class="card-header pb-0">
+      <h6 class="mb-0">Notes</h6>
+    </div>
+    <div class="card-body">
+      <p class="text-sm">{{ notes || "Aucune note" }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps } from "vue";
+defineProps({
+  notes: {
+    type: String,
+    default: "",
+  },
+});
+</script>
diff --git a/thanasoft-front/src/components/molecules/fournisseur/FournisseurOverview.vue b/thanasoft-front/src/components/molecules/fournisseur/FournisseurOverview.vue
new file mode 100644
index 0000000..af1e7a8
--- /dev/null
+++ b/thanasoft-front/src/components/molecules/fournisseur/FournisseurOverview.vue
@@ -0,0 +1,151 @@
+<template>
+  <div class="card">
+    <div class="card-header pb-0">
+      <div class="d-flex align-items-center">
+        <h6 class="mb-0">Aperçu du fournisseur</h6>
+      </div>
+    </div>
+    <div class="card-body">
+      <div class="row">
+        <!-- Contact Info Card -->
+        <div class="col-md-6 mb-3">
+          <InfoCard title="Contact" icon="fas fa-phone text-primary">
+            <ul class="list-group list-group-flush">
+              <li class="list-group-item border-0 ps-0 pt-0 text-sm">
+                <strong class="text-dark">Email:</strong>
+                <a :href="`mailto:${fournisseur.email}`" class="ms-2">
+                  {{ fournisseur.email || "-" }}
+                </a>
+              </li>
+              <li class="list-group-item border-0 ps-0 text-sm">
+                <strong class="text-dark">Téléphone:</strong>
+                <span class="ms-2">{{ fournisseur.phone || "-" }}</span>
+              </li>
+            </ul>
+          </InfoCard>
+        </div>
+
+        <!-- Business Info Card -->
+        <div class="col-md-6 mb-3">
+          <InfoCard title="Entreprise" icon="fas fa-building text-warning">
+            <ul class="list-group list-group-flush">
+              <li class="list-group-item border-0 ps-0 pt-0 text-sm">
+                <strong class="text-dark">SIRET:</strong>
+                <span class="ms-2">{{ fournisseur.siret || "-" }}</span>
+              </li>
+              <li class="list-group-item border-0 ps-0 text-sm">
+                <strong class="text-dark">TVA:</strong>
+                <span class="ms-2">{{ fournisseur.tva_number || "-" }}</span>
+              </li>
+            </ul>
+          </InfoCard>
+        </div>
+
+        <!-- Address Card (Full Width) -->
+        <div class="col-12 mb-3">
+          <InfoCard title="Adresse" icon="fas fa-map-marked-alt text-success">
+            <p class="text-sm mb-0">
+              {{ formattedAddress }}
+            </p>
+          </InfoCard>
+        </div>
+
+        <!-- Recent Contacts -->
+        <div class="col-12">
+          <InfoCard
+            title="Contacts récents"
+            icon="fas fa-address-book text-info"
+          >
+            <template v-if="contacts.length > 0">
+              <div class="d-flex align-items-center mb-3 justify-content-end">
+                <button
+                  class="btn btn-sm btn-outline-primary"
+                  @click="$emit('view-all-contacts')"
+                >
+                  Voir tous
+                </button>
+              </div>
+              <div
+                v-for="contact in contacts.slice(0, 3)"
+                :key="contact.id"
+                class="d-flex align-items-center mb-2"
+              >
+                <div class="avatar avatar-sm me-3">
+                  <div
+                    class="avatar-placeholder bg-gradient-secondary text-white d-flex align-items-center justify-content-center rounded-circle"
+                  >
+                    {{
+                      getInitials(contact.first_name + " " + contact.last_name)
+                    }}
+                  </div>
+                </div>
+                <div class="flex-grow-1">
+                  <h6 class="mb-0 text-sm">
+                    {{ contact.first_name }} {{ contact.last_name }}
+                  </h6>
+                  <p class="text-xs text-secondary mb-0">
+                    {{ contact.position || "Contact" }}
+                  </p>
+                </div>
+                <div>
+                  <StatusBadge
+                    v-if="contact.is_primary"
+                    status="success"
+                    label="Principal"
+                  />
+                </div>
+              </div>
+            </template>
+            <p v-else class="text-sm text-secondary mb-0">
+              Aucun contact enregistré
+            </p>
+          </InfoCard>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import InfoCard from "@/components/atoms/client/InfoCard.vue";
+import StatusBadge from "@/components/atoms/client/StatusBadge.vue";
+import { defineProps, defineEmits } from "vue";
+defineProps({
+  fournisseur: {
+    type: Object,
+    required: true,
+  },
+  contacts: {
+    type: Array,
+    default: () => [],
+  },
+  formattedAddress: {
+    type: String,
+    default: "Aucune adresse renseignée",
+  },
+  fournisseurId: {
+    type: [Number, String],
+    required: true,
+  },
+});
+
+defineEmits(["view-all-contacts"]);
+
+const getInitials = (name) => {
+  if (!name) return "?";
+  return name
+    .split(" ")
+    .map((word) => word[0])
+    .join("")
+    .toUpperCase()
+    .substring(0, 2);
+};
+</script>
+
+<style scoped>
+.avatar-sm .avatar-placeholder {
+  width: 36px;
+  height: 36px;
+  font-size: 0.875rem;
+}
+</style>
diff --git a/thanasoft-front/src/components/molecules/fournisseur/FournisseurProfileCard.vue b/thanasoft-front/src/components/molecules/fournisseur/FournisseurProfileCard.vue
new file mode 100644
index 0000000..c0e8889
--- /dev/null
+++ b/thanasoft-front/src/components/molecules/fournisseur/FournisseurProfileCard.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="card-body text-center">
+    <!-- Fournisseur Avatar -->
+    <ClientAvatar
+      :avatar-url="avatarUrl"
+      :initials="initials"
+      :alt="fournisseurName"
+      :editable="true"
+      @edit="$emit('edit-avatar')"
+    />
+
+    <!-- Fournisseur Name -->
+    <h5 class="font-weight-bolder mb-0">
+      {{ fournisseurName }}
+    </h5>
+    <p class="text-sm text-secondary mb-3">
+      {{ fournisseurType }}
+    </p>
+
+    <!-- Quick Stats -->
+    <div class="row text-center mt-3">
+      <div class="col-6 border-end">
+        <h6 class="text-sm font-weight-bolder mb-0">
+          {{ contactsCount }}
+        </h6>
+        <p class="text-xs text-secondary mb-0">Contacts</p>
+      </div>
+      <div class="col-6">
+        <h6 class="text-sm font-weight-bolder mb-0">
+          <i
+            class="fas"
+            :class="
+              isActive
+                ? 'fa-check-circle text-success'
+                : 'fa-times-circle text-danger'
+            "
+          ></i>
+        </h6>
+        <p class="text-xs text-secondary mb-0">Statut</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import ClientAvatar from "@/components/atoms/client/ClientAvatar.vue";
+import { defineProps, defineEmits } from "vue";
+defineProps({
+  avatarUrl: {
+    type: String,
+    default: null,
+  },
+  initials: {
+    type: String,
+    required: true,
+  },
+  fournisseurName: {
+    type: String,
+    required: true,
+  },
+  fournisseurType: {
+    type: String,
+    default: "Fournisseur",
+  },
+  contactsCount: {
+    type: Number,
+    default: 0,
+  },
+  isActive: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+defineEmits(["edit-avatar"]);
+</script>
+
+<style scoped>
+.avatar-sm .avatar-placeholder {
+  width: 36px;
+  height: 36px;
+  font-size: 0.875rem;
+}
+</style>
diff --git a/thanasoft-front/src/components/molecules/fournisseur/FournisseurTabNavigation.vue b/thanasoft-front/src/components/molecules/fournisseur/FournisseurTabNavigation.vue
new file mode 100644
index 0000000..0e8e3a3
--- /dev/null
+++ b/thanasoft-front/src/components/molecules/fournisseur/FournisseurTabNavigation.vue
@@ -0,0 +1,71 @@
+<template>
+  <ul class="nav nav-pills flex-column">
+    <TabNavigationItem
+      icon="fas fa-eye"
+      label="Aperçu"
+      :is-active="activeTab === 'overview'"
+      spacing=""
+      @click="$emit('change-tab', 'overview')"
+    />
+    <TabNavigationItem
+      icon="fas fa-info-circle"
+      label="Informations"
+      :is-active="activeTab === 'info'"
+      @click="$emit('change-tab', 'info')"
+    />
+    <TabNavigationItem
+      icon="fas fa-info-circle"
+      label="Activités recentes"
+      :is-active="activeTab === 'activity'"
+      @click="$emit('change-tab', 'activity')"
+    />
+    <TabNavigationItem
+      icon="fas fa-users"
+      label="Contacts"
+      :is-active="activeTab === 'contacts'"
+      :badge="contactsCount > 0 ? contactsCount : null"
+      @click="$emit('change-tab', 'contacts')"
+    />
+    <TabNavigationItem
+      icon="fas fa-map-marker-alt"
+      label="Adresse"
+      :is-active="activeTab === 'address'"
+      @click="$emit('change-tab', 'address')"
+    />
+    <TabNavigationItem
+      icon="fas fa-map-marked-alt"
+      label="Localisations"
+      :is-active="activeTab === 'locations'"
+      :badge="locationsCount > 0 ? locationsCount : null"
+      @click="$emit('change-tab', 'locations')"
+    />
+    <TabNavigationItem
+      icon="fas fa-sticky-note"
+      label="Notes"
+      :is-active="activeTab === 'notes'"
+      @click="$emit('change-tab', 'notes')"
+    />
+  </ul>
+</template>
+
+<script setup>
+import TabNavigationItem from "@/components/atoms/client/TabNavigationItem.vue";
+
+import { defineProps, defineEmits } from "vue";
+defineProps({
+  activeTab: {
+    type: String,
+    required: true,
+  },
+  contactsCount: {
+    type: Number,
+    default: 0,
+  },
+  locationsCount: {
+    type: Number,
+    default: 0,
+  },
+});
+
+defineEmits(["change-tab"]);
+</script>
diff --git a/thanasoft-front/src/components/molecules/location/LocationTable.vue b/thanasoft-front/src/components/molecules/location/LocationTable.vue
index 6828288..0c25bc7 100644
--- a/thanasoft-front/src/components/molecules/location/LocationTable.vue
+++ b/thanasoft-front/src/components/molecules/location/LocationTable.vue
@@ -13,32 +13,38 @@
           <table class="table table-flush">
             <thead class="thead-light">
               <tr>
-                <th v-for="column in visibleColumns" :key="column.key">
-                  {{ column.label }}
-                </th>
-                <th v-if="showActions">Action</th>
+                <th>Nom</th>
+                <th>Ville</th>
+                <th>Adresse</th>
+                <th>Latitude GPS</th>
+                <th>Longitude GPS</th>
+                <th>Par défaut</th>
+                <th>Action</th>
               </tr>
             </thead>
             <tbody>
               <tr v-for="i in skeletonRows" :key="i" class="skeleton-row">
-                <!-- Dynamic Skeleton Columns -->
-                <td v-for="column in visibleColumns" :key="column.key">
+                <td>
+                  <div class="skeleton-text medium"></div>
+                </td>
+                <td>
+                  <div class="skeleton-text medium"></div>
+                </td>
+                <td>
+                  <div class="skeleton-text long"></div>
+                </td>
+                <td>
+                  <div class="skeleton-text short"></div>
+                </td>
+                <td>
+                  <div class="skeleton-text short"></div>
+                </td>
+                <td>
                   <div class="d-flex align-items-center">
-                    <div
-                      v-if="column.key === 'name'"
-                      class="skeleton-avatar"
-                    ></div>
-                    <div
-                      v-if="column.key === 'is_default'"
-                      class="skeleton-icon small"
-                    ></div>
-                    <div
-                      :class="['skeleton-text', getSkeletonWidth(column.key)]"
-                    ></div>
+                    <div class="skeleton-icon small"></div>
                   </div>
                 </td>
-                <!-- Actions Skeleton -->
-                <td v-if="showActions">
+                <td>
                   <div class="d-flex align-items-center gap-2">
                     <div class="skeleton-icon small"></div>
                     <div class="skeleton-icon small"></div>
@@ -52,217 +58,102 @@
     </div>
 
     <!-- Data State -->
-    <div v-else-if="data.length > 0" class="data-container">
-      <!-- Table Controls -->
-      <div class="table-controls mb-3">
-        <div class="row align-items-center">
-          <div class="col-md-6">
-            <div class="d-flex align-items-center gap-3">
-              <!-- Column Visibility Toggle -->
-              <div class="dropdown">
-                <button
-                  class="btn btn-outline-secondary btn-sm dropdown-toggle"
-                  type="button"
-                  data-bs-toggle="dropdown"
-                  aria-expanded="false"
+    <div v-else class="table-responsive">
+      <table id="location-list" class="table table-flush">
+        <thead class="thead-light">
+          <tr>
+            <th>Nom</th>
+            <th>Ville</th>
+            <th>Adresse</th>
+            <th>Latitude GPS</th>
+            <th>Longitude GPS</th>
+            <th>Par défaut</th>
+            <th>Action</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="location in tableData" :key="location.id">
+            <!-- Name Column -->
+            <td class="text-xs font-weight-bold">
+              <span class="font-weight-bold">{{ location.name || "N/A" }}</span>
+            </td>
+
+            <!-- City Column -->
+            <td class="text-xs font-weight-bold">
+              <span>{{ location.address?.city || "N/A" }}</span>
+            </td>
+
+            <!-- Address Column -->
+            <td class="text-xs font-weight-bold">
+              <span>{{ location.address?.line1 || "N/A" }}</span>
+            </td>
+
+            <!-- GPS Latitude Column -->
+            <td class="text-xs font-weight-bold">
+              <span>{{
+                location.gps_lat ? location.gps_lat + "°" : "N/A"
+              }}</span>
+            </td>
+
+            <!-- GPS Longitude Column -->
+            <td class="text-xs font-weight-bold">
+              <span>{{
+                location.gps_lng ? location.gps_lng + "°" : "N/A"
+              }}</span>
+            </td>
+
+            <!-- Default Column -->
+            <td class="text-xs font-weight-bold">
+              <div class="d-flex align-items-center">
+                <soft-button
+                  :color="location.is_default ? 'success' : 'secondary'"
+                  variant="outline"
+                  class="btn-icon-only btn-rounded mb-0 me-2 btn-sm d-flex align-items-center justify-content-center"
                 >
-                  <i class="fas fa-columns me-2"></i>
-                  Colonnes
-                </button>
-                <ul class="dropdown-menu">
-                  <li v-for="column in allColumns" :key="column.key">
-                    <div class="dropdown-item">
-                      <div class="form-check">
-                        <input
-                          class="form-check-input"
-                          type="checkbox"
-                          :id="`col-${column.key}`"
-                          v-model="column.visible"
-                        />
-                        <label
-                          class="form-check-label"
-                          :for="`col-${column.key}`"
-                        >
-                          {{ column.label }}
-                        </label>
-                      </div>
-                    </div>
-                  </li>
-                </ul>
+                  <i
+                    :class="
+                      location.is_default ? 'fas fa-check' : 'fas fa-times'
+                    "
+                    aria-hidden="true"
+                  ></i>
+                </soft-button>
+                <span>{{ location.is_default ? "Oui" : "Non" }}</span>
               </div>
+            </td>
 
-              <!-- Search -->
-              <div class="search-box">
-                <div class="input-group input-group-sm">
-                  <span class="input-group-text">
-                    <i class="fas fa-search"></i>
-                  </span>
-                  <input
-                    type="text"
-                    class="form-control"
-                    placeholder="Rechercher..."
-                    v-model="searchQuery"
-                    @input="handleSearch"
-                  />
-                </div>
+            <!-- Actions Column -->
+            <td>
+              <div class="d-flex align-items-center gap-2">
+                <!-- View Button -->
+                <soft-button
+                  color="info"
+                  variant="outline"
+                  title="View Location"
+                  :data-location-id="location.id"
+                  class="btn-icon-only btn-rounded mb-0 btn-sm d-flex align-items-center justify-content-center"
+                >
+                  <i class="fas fa-eye" aria-hidden="true"></i>
+                </soft-button>
+
+                <!-- Delete Button -->
+                <soft-button
+                  color="danger"
+                  variant="outline"
+                  title="Delete Location"
+                  :data-location-id="location.id"
+                  class="btn-icon-only btn-rounded mb-0 btn-sm d-flex align-items-center justify-content-center"
+                >
+                  <i class="fas fa-trash" aria-hidden="true"></i>
+                </soft-button>
               </div>
-            </div>
-          </div>
-          <div class="col-md-6 text-end">
-            <div class="d-flex align-items-center justify-content-end gap-2">
-              <!-- Items per page -->
-              <div class="items-per-page">
-                <select
-                  class="form-select form-select-sm"
-                  v-model="perPage"
-                  @change="handlePerPageChange"
-                  style="width: auto"
-                >
-                  <option value="5">5 par page</option>
-                  <option value="10">10 par page</option>
-                  <option value="15">15 par page</option>
-                  <option value="20">20 par page</option>
-                  <option value="50">50 par page</option>
-                </select>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Table -->
-      <div class="table-responsive">
-        <table class="table table-flush table-hover">
-          <thead class="thead-light">
-            <tr>
-              <th v-for="column in visibleColumns" :key="column.key">
-                <div
-                  class="column-header"
-                  @click="() => sortBy(column.key)"
-                  :class="{ sortable: column.sortable }"
-                >
-                  {{ column.label }}
-                  <span v-if="sortColumn === column.key" class="sort-icon">
-                    <i
-                      :class="
-                        sortDirection === 'asc'
-                          ? 'fas fa-sort-up'
-                          : 'fas fa-sort-down'
-                      "
-                    ></i>
-                  </span>
-                </div>
-              </th>
-              <th v-if="showActions">Action</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="location in paginatedData" :key="location.id">
-              <!-- Dynamic Columns -->
-              <td v-for="column in visibleColumns" :key="column.key">
-                <!-- <component
-                  :is="getColumnComponent(column.key)"
-                  :location="location"
-                  :column="column"
-                /> -->
-                {{ location[column.key] }}
-              </td>
-
-              <!-- Actions Column -->
-              <td v-if="showActions">
-                <div class="d-flex align-items-center gap-2">
-                  <!-- View Button -->
-                  <soft-button
-                    color="info"
-                    variant="outline"
-                    title="View Location"
-                    :data-location-id="location.id"
-                    class="btn-icon-only btn-rounded mb-0 btn-sm d-flex align-items-center justify-content-center"
-                    @click="emit('view', location.id)"
-                  >
-                    <i class="fas fa-eye" aria-hidden="true"></i>
-                  </soft-button>
-
-                  <!-- Delete Button -->
-                  <soft-button
-                    color="danger"
-                    variant="outline"
-                    title="Delete Location"
-                    :data-location-id="location.id"
-                    class="btn-icon-only btn-rounded mb-0 btn-sm d-flex align-items-center justify-content-center"
-                    @click="emit('delete', location.id)"
-                  >
-                    <i class="fas fa-trash" aria-hidden="true"></i>
-                  </soft-button>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-
-      <!-- Pagination -->
-      <div class="table-pagination mt-4">
-        <div class="row align-items-center">
-          <div class="col-md-6">
-            <div class="pagination-info text-muted">
-              Affichage de {{ pagination.from }} à {{ pagination.to }} sur
-              {{ pagination.total }} éléments
-            </div>
-          </div>
-          <div class="col-md-6">
-            <nav aria-label="Table pagination">
-              <ul class="pagination justify-content-end mb-0">
-                <!-- Previous Page -->
-                <li
-                  class="page-item"
-                  :class="{ disabled: pagination.currentPage === 1 }"
-                >
-                  <button
-                    class="page-link"
-                    @click="changePage(pagination.currentPage - 1)"
-                    :disabled="pagination.currentPage === 1"
-                  >
-                    <i class="fas fa-chevron-left"></i>
-                  </button>
-                </li>
-
-                <!-- Page Numbers -->
-                <li
-                  v-for="page in pagination.pages"
-                  :key="page"
-                  class="page-item"
-                  :class="{ active: page === pagination.currentPage }"
-                >
-                  <button class="page-link" @click="changePage(page)">
-                    {{ page }}
-                  </button>
-                </li>
-
-                <!-- Next Page -->
-                <li
-                  class="page-item"
-                  :class="{
-                    disabled: pagination.currentPage === pagination.lastPage,
-                  }"
-                >
-                  <button
-                    class="page-link"
-                    @click="changePage(pagination.currentPage + 1)"
-                    :disabled="pagination.currentPage === pagination.lastPage"
-                  >
-                    <i class="fas fa-chevron-right"></i>
-                  </button>
-                </li>
-              </ul>
-            </nav>
-          </div>
-        </div>
-      </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
     </div>
 
     <!-- Empty State -->
-    <div v-else class="empty-state">
+    <div v-if="!loading && tableData.length === 0" class="empty-state">
       <div class="empty-icon">
         <i class="fas fa-map-marker-alt fa-3x text-muted"></i>
       </div>
@@ -275,30 +166,18 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, watch } from "vue";
+import { ref, computed, onMounted, watch, onUnmounted } from "vue";
+import { DataTable } from "simple-datatables";
 import SoftButton from "@/components/SoftButton.vue";
-import SoftAvatar from "@/components/SoftAvatar.vue";
 import { defineProps, defineEmits } from "vue";
 
-// Sample avatar images
-import img1 from "@/assets/img/team-2.jpg";
-import img2 from "@/assets/img/team-1.jpg";
-import img3 from "@/assets/img/team-3.jpg";
-import img4 from "@/assets/img/team-4.jpg";
-import img5 from "@/assets/img/team-5.jpg";
-import img6 from "@/assets/img/ivana-squares.jpg";
+const emit = defineEmits(["view", "delete"]);
 
-const avatarImages = [img1, img2, img3, img4, img5, img6];
-
-const emit = defineEmits(["view", "delete", "page-change"]);
-
-// Accept both `data` and `location-data` from parents
 const props = defineProps({
   data: {
     type: Array,
     default: () => [],
   },
-  // support alternative prop name used elsewhere: `location-data` / `locationData`
   locationData: {
     type: Array,
     default: () => [],
@@ -311,289 +190,82 @@ const props = defineProps({
     type: Number,
     default: 5,
   },
-  showActions: {
-    type: Boolean,
-    default: true,
-  },
-  currentPage: {
-    type: Number,
-    default: 1,
-  },
-  perPage: {
-    type: Number,
-    default: 10,
-  },
 });
 
 // Use the provided data prop or fallback to locationData
 const tableData = computed(() => {
-  // Prefer explicit `data` when provided; otherwise use `locationData`
-  return (props.data && props.data.length) ||
-    !props.data ||
-    props.data.length === 0
-    ? props.data.length
-      ? props.data
-      : props.locationData
-    : props.locationData;
+  return props.data && props.data.length > 0 ? props.data : props.locationData;
 });
 
 // Reactive data
-const searchQuery = ref("");
-const sortColumn = ref("name");
-const sortDirection = ref("asc");
-const perPage = ref(props.perPage);
-const currentPage = ref(props.currentPage);
-
-// Column configuration
-const allColumns = ref([
-  { key: "name", label: "Nom", visible: true, sortable: true },
-  { key: "city", label: "Ville", visible: true, sortable: true },
-  { key: "address_line1", label: "Adresse", visible: true, sortable: true },
-  { key: "gps_lat", label: "Latitude GPS", visible: true, sortable: true },
-  { key: "gps_lng", label: "Longitude GPS", visible: true, sortable: true },
-  { key: "is_default", label: "Par défaut", visible: true, sortable: true },
-]);
-
-// Computed
-const visibleColumns = computed(() =>
-  allColumns.value.filter((col) => col.visible)
-);
-
-const getNestedValue = (obj, path) => {
-  return path.split(".").reduce((acc, part) => acc && acc[part], obj);
-};
-
-const filteredAndSortedData = computed(() => {
-  let filtered = [...tableData.value];
-
-  // Apply search filter
-  if (searchQuery.value) {
-    const query = searchQuery.value.toLowerCase();
-    filtered = filtered.filter(
-      (location) =>
-        location.name?.toLowerCase().includes(query) ||
-        location.address?.city?.toLowerCase().includes(query) ||
-        location.address?.line1?.toLowerCase().includes(query) ||
-        location.address?.postal_code?.toLowerCase().includes(query)
-    );
-  }
-
-  // Apply sorting
-  if (sortColumn.value) {
-    filtered.sort((a, b) => {
-      let aValue = getNestedValue(a, sortColumn.value);
-      let bValue = getNestedValue(b, sortColumn.value);
-
-      if (aValue == null) aValue = "";
-      if (bValue == null) bValue = "";
-
-      if (aValue < bValue) return sortDirection.value === "asc" ? -1 : 1;
-      if (aValue > bValue) return sortDirection.value === "asc" ? 1 : -1;
-      return 0;
-    });
-  }
-
-  return filtered;
-});
-
-const paginatedData = computed(() => {
-  const start = (currentPage.value - 1) * perPage.value;
-  const end = start + perPage.value;
-  return filteredAndSortedData.value.slice(start, end);
-});
-
-const pagination = computed(() => {
-  const total = filteredAndSortedData.value.length;
-  const lastPage = Math.ceil(total / perPage.value);
-  const from = total === 0 ? 0 : (currentPage.value - 1) * perPage.value + 1;
-  const to = Math.min(currentPage.value * perPage.value, total);
-
-  // Generate page numbers
-  const pages = [];
-  const maxVisiblePages = 5;
-  let startPage = Math.max(
-    1,
-    currentPage.value - Math.floor(maxVisiblePages / 2)
-  );
-  let endPage = Math.min(lastPage, startPage + maxVisiblePages - 1);
-
-  if (endPage - startPage + 1 < maxVisiblePages) {
-    startPage = Math.max(1, endPage - maxVisiblePages + 1);
-  }
-
-  for (let i = startPage; i <= endPage; i++) {
-    pages.push(i);
-  }
-
-  return {
-    currentPage: currentPage.value,
-    lastPage,
-    total,
-    from,
-    to,
-    pages,
-  };
-});
+const dataTableInstance = ref(null);
 
 // Methods
-const getRandomAvatar = () => {
-  const randomIndex = Math.floor(Math.random() * avatarImages.length);
-  return avatarImages[randomIndex];
-};
+const initializeDataTable = () => {
+  // Destroy existing instance if it exists
+  if (dataTableInstance.value) {
+    dataTableInstance.value.destroy();
+    dataTableInstance.value = null;
+  }
 
-const getSkeletonWidth = (columnKey) => {
-  const widths = {
-    name: "medium",
-    client_name: "medium",
-    gps_lat: "short",
-    gps_lng: "short",
-    code_portail: "medium",
-    code_alarm: "medium",
-    code_funeraire: "medium",
-    is_default: "short",
-  };
-  return widths[columnKey] || "medium";
-};
+  const dataTableEl = document.getElementById("location-list");
+  if (dataTableEl) {
+    dataTableInstance.value = new DataTable(dataTableEl, {
+      searchable: true,
+      fixedHeight: true,
+      perPage: 10,
+      perPageSelect: [5, 10, 15, 20],
+    });
 
-const getColumnComponent = (columnKey) => {
-  return {
-    name: NameColumn,
-    city: CityColumn,
-    address_line1: AddressColumn,
-    gps_lat: GpsLatColumn,
-    gps_lng: GpsLngColumn,
-    is_default: DefaultColumn,
-  }[columnKey];
-};
-
-const sortBy = (columnKey) => {
-  const column = allColumns.value.find((col) => col.key === columnKey);
-  if (!column?.sortable) return;
-
-  if (sortColumn.value === columnKey) {
-    sortDirection.value = sortDirection.value === "asc" ? "desc" : "asc";
-  } else {
-    sortColumn.value = columnKey;
-    sortDirection.value = "asc";
+    dataTableEl.addEventListener("click", handleTableClick);
   }
 };
 
-const handleSearch = () => {
-  currentPage.value = 1;
-};
+const handleTableClick = (event) => {
+  const button = event.target.closest("button");
+  if (!button) return;
 
-const handlePerPageChange = () => {
-  currentPage.value = 1;
-};
-
-const changePage = (page) => {
-  if (page >= 1 && page <= pagination.value.lastPage) {
-    currentPage.value = page;
-    emit("page-change", page);
+  const locationId = button.getAttribute("data-location-id");
+  if (button.title === "Delete Location" || button.querySelector(".fa-trash")) {
+    emit("delete", locationId);
+  } else if (
+    button.title === "View Location" ||
+    button.querySelector(".fa-eye")
+  ) {
+    emit("view", locationId);
   }
 };
 
-// Column Components
-const NameColumn = {
-  props: ["location"],
-  template: `
-    <div class="d-flex align-items-center">
-      <soft-avatar
-        :img="getRandomAvatar()"
-        size="xs"
-        class="me-2"
-        alt="location image"
-        circular
-      />
-      <span class="font-weight-bold">{{ location.name || 'N/A' }}</span>
-    </div>
-  `,
-  components: { SoftAvatar },
-  methods: { getRandomAvatar },
-};
-
-const CityColumn = {
-  props: ["location"],
-  template: `
-    <span class="text-xs font-weight-bold">
-      {{ location.address?.city || 'N/A' }}
-    </span>
-  `,
-};
-
-const AddressColumn = {
-  props: ["location"],
-  template: `
-    <span class="text-xs font-weight-bold">
-      {{ location.address?.line1 || 'N/A' }}
-    </span>
-  `,
-};
-
-const GpsLatColumn = {
-  props: ["location"],
-  template: `
-    <span class="text-xs font-weight-bold">
-      {{ location.gps_lat ? location.gps_lat + '°' : 'N/A' }}
-    </span>
-  `,
-};
-
-const GpsLngColumn = {
-  props: ["location"],
-  template: `
-    <span class="text-xs font-weight-bold">
-      {{ location.gps_lng ? location.gps_lng + '°' : 'N/A' }}
-    </span>
-  `,
-};
-
-const DefaultColumn = {
-  props: ["location"],
-  template: `
-    <div class="d-flex align-items-center">
-      <soft-button
-        :color="location.is_default ? 'success' : 'secondary'"
-        variant="outline"
-        class="btn-icon-only btn-rounded mb-0 me-2 btn-sm d-flex align-items-center justify-content-center"
-      >
-        <i :class="location.is_default ? 'fas fa-check' : 'fas fa-times'" aria-hidden="true"></i>
-      </soft-button>
-      <span class="text-xs font-weight-bold">{{ location.is_default ? "Oui" : "Non" }}</span>
-    </div>
-  `,
-  components: { SoftButton },
-};
-
-// Watch for data changes (both prop names)
+// Watch for data changes to reinitialize datatable
 watch(
-  () => props.data,
+  () => tableData.value,
   () => {
-    currentPage.value = 1;
-  }
+    if (!props.loading && tableData.value.length > 0) {
+      // Small delay to ensure DOM is updated
+      setTimeout(() => {
+        initializeDataTable();
+      }, 100);
+    }
+  },
+  { deep: true }
 );
 
-watch(
-  () => props.locationData,
-  () => {
-    currentPage.value = 1;
+onUnmounted(() => {
+  const dataTableEl = document.getElementById("location-list");
+  if (dataTableEl) {
+    dataTableEl.removeEventListener("click", handleTableClick);
   }
-);
+  if (dataTableInstance.value) {
+    dataTableInstance.value.destroy();
+  }
+});
 
-// Watch for prop changes
-watch(
-  () => props.currentPage,
-  (newPage) => {
-    currentPage.value = newPage;
+// Initialize data
+onMounted(() => {
+  if (!props.loading && tableData.value.length > 0) {
+    initializeDataTable();
   }
-);
-
-watch(
-  () => props.perPage,
-  (newPerPage) => {
-    perPage.value = newPerPage;
-  }
-);
+});
 </script>
 
 <style scoped>
@@ -622,15 +294,6 @@ watch(
   animation: pulse 1.5s ease-in-out infinite;
 }
 
-.skeleton-avatar {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
-  background-size: 200% 100%;
-  animation: shimmer 2s infinite;
-}
-
 .skeleton-icon {
   width: 32px;
   height: 32px;
@@ -685,62 +348,10 @@ watch(
   margin: 0 auto;
 }
 
-.contact-info {
-  line-height: 1.2;
-}
-
 .text-xs {
   font-size: 0.75rem;
 }
 
-/* Table Controls */
-.table-controls {
-  background: #f8f9fa;
-  padding: 1rem;
-  border-radius: 0.5rem;
-}
-
-.search-box {
-  min-width: 250px;
-}
-
-.column-header {
-  cursor: pointer;
-  user-select: none;
-}
-
-.column-header.sortable:hover {
-  background-color: #f8f9fa;
-}
-
-.sort-icon {
-  margin-left: 0.25rem;
-  color: #6c757d;
-}
-
-/* Pagination */
-.table-pagination {
-  background: #f8f9fa;
-  padding: 1rem;
-  border-radius: 0.5rem;
-}
-
-.pagination .page-item.active .page-link {
-  background-color: #007bff;
-  border-color: #007bff;
-}
-
-.pagination .page-link {
-  color: #007bff;
-  border: 1px solid #dee2e6;
-}
-
-.pagination .page-link:hover {
-  color: #0056b3;
-  background-color: #e9ecef;
-  border-color: #dee2e6;
-}
-
 /* Animations */
 @keyframes pulse {
   0% {
@@ -763,23 +374,19 @@ watch(
   }
 }
 
-/* Responsive */
+/* Responsive adjustments */
 @media (max-width: 768px) {
-  .table-controls .row > div {
-    margin-bottom: 1rem;
+  .loading-spinner {
+    top: 10px;
+    right: 10px;
   }
 
-  .search-box {
-    min-width: 200px;
+  .skeleton-text.long {
+    width: 80px;
   }
 
-  .table-pagination .row > div {
-    text-align: center !important;
-    margin-bottom: 1rem;
-  }
-
-  .pagination {
-    justify-content: center !important;
+  .skeleton-text.medium {
+    width: 60px;
   }
 }
 </style>
diff --git a/thanasoft-front/src/components/templates/CRM/FournisseurDetailTemplate.vue b/thanasoft-front/src/components/templates/CRM/FournisseurDetailTemplate.vue
new file mode 100644
index 0000000..c64f940
--- /dev/null
+++ b/thanasoft-front/src/components/templates/CRM/FournisseurDetailTemplate.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="container-fluid py-4">
+    <div class="row mb-4">
+      <slot name="button-return" />
+    </div>
+    <div class="row">
+      <div class="col-lg-3">
+        <slot name="fournisseur-detail-sidebar" />
+        <slot name="file-input" />
+      </div>
+      <div class="col-lg-9 mt-lg-0 mt-4">
+        <slot name="fournisseur-detail-content" />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/thanasoft-front/src/components/templates/CRM/FournisseurTemplate.vue b/thanasoft-front/src/components/templates/CRM/FournisseurTemplate.vue
new file mode 100644
index 0000000..b486ecf
--- /dev/null
+++ b/thanasoft-front/src/components/templates/CRM/FournisseurTemplate.vue
@@ -0,0 +1,23 @@
+<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>
+        <slot name="fournisseur-other-action"></slot>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-12">
+        <div class="card mt-4">
+          <slot name="fournisseur-table"></slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script></script>
diff --git a/thanasoft-front/src/examples/Sidenav/SidenavList.vue b/thanasoft-front/src/examples/Sidenav/SidenavList.vue
index f1d7b79..a2325ed 100644
--- a/thanasoft-front/src/examples/Sidenav/SidenavList.vue
+++ b/thanasoft-front/src/examples/Sidenav/SidenavList.vue
@@ -4,6 +4,7 @@
     class="w-auto h-auto collapse navbar-collapse max-height-vh-100 h-100"
   >
     <ul class="navbar-nav">
+      <!-- Dashboard -->
       <li class="nav-item">
         <sidenav-collapse
           collapse-ref="dashboardsExamples"
@@ -15,7 +16,6 @@
           </template>
           <template #list>
             <ul class="nav ms-4 ps-3">
-              <!-- nav links -->
               <sidenav-item
                 :to="{ name: 'Default' }"
                 mini-icon="D"
@@ -26,49 +26,272 @@
           </template>
         </sidenav-collapse>
       </li>
+
+      <!-- Agenda -->
+      <li class="nav-item">
+        <sidenav-item :to="{ name: 'Agenda' }" mini-icon="A" text="Agenda">
+          <template #icon>
+            <Office />
+          </template>
+        </sidenav-item>
+      </li>
+
+      <!-- Courriel -->
+      <li class="nav-item">
+        <sidenav-item :to="{ name: 'Courriel' }" mini-icon="C" text="Courriel">
+          <template #icon>
+            <Office />
+          </template>
+        </sidenav-item>
+      </li>
+
+      <!-- Contacts -->
+      <li class="nav-item">
+        <sidenav-item
+          :to="{ name: 'Gestion contacts' }"
+          mini-icon="C"
+          text="Contacts"
+        >
+          <template #icon>
+            <Office />
+          </template>
+        </sidenav-item>
+      </li>
+
       <li class="mt-3 nav-item">
         <h6
           class="text-xs ps-4 text-uppercase font-weight-bolder opacity-6"
           :class="isRTL ? 'me-4' : 'ms-2'"
         >
-          CRM
+          GESTION
         </h6>
       </li>
+
+      <!-- Clients -->
       <li class="nav-item">
         <sidenav-collapse
-          collapse-ref="pagesExamples"
-          nav-text="Pages"
-          :class="getRoute() === 'pages' ? 'active' : ''"
+          collapse-ref="clientsMenu"
+          nav-text="Clients"
+          :class="getRoute() === 'clients' ? 'active' : ''"
         >
           <template #icon>
             <Office />
           </template>
           <template #list>
             <ul class="nav ms-4 ps-3">
-              <!-- nav links -->
-              <sidenav-collapse-item
-                refer="profileExample"
-                mini-icon="P"
-                text="Client"
-              >
-                <template #nav-child-item>
-                  <sidenav-item
-                    :to="{ name: 'Gestion contacts' }"
-                    mini-icon="P"
-                    text="Gestion Contact"
-                  />
-                  <sidenav-item
-                    :to="{ name: 'Gestion clients' }"
-                    mini-icon="T"
-                    text="Gestion Clients"
-                  />
-                  <sidenav-item
-                    :to="{ name: 'Localisation clients' }"
-                    mini-icon="A"
-                    text="Gestion des lieux"
-                  />
-                </template>
-              </sidenav-collapse-item>
+              <sidenav-item
+                :to="{ name: 'Gestion clients' }"
+                mini-icon="C"
+                text="Clients"
+              />
+              <sidenav-item
+                :to="{ name: 'Localisation clients' }"
+                mini-icon="L"
+                text="Lieux"
+              />
+              <sidenav-item
+                :to="{ name: 'Statistiques clients' }"
+                mini-icon="S"
+                text="Statistiques"
+              />
+            </ul>
+          </template>
+        </sidenav-collapse>
+      </li>
+
+      <!-- Fournisseurs -->
+      <li class="nav-item">
+        <sidenav-collapse
+          collapse-ref="fournisseursMenu"
+          nav-text="Fournisseurs"
+          :class="getRoute() === 'fournisseurs' ? 'active' : ''"
+        >
+          <template #icon>
+            <Office />
+          </template>
+          <template #list>
+            <ul class="nav ms-4 ps-3">
+              <sidenav-item
+                :to="{ name: 'Gestion fournisseurs' }"
+                mini-icon="F"
+                text="Fournisseurs"
+              />
+              <sidenav-item
+                :to="{ name: 'Commandes fournisseurs' }"
+                mini-icon="C"
+                text="Commandes"
+              />
+              <sidenav-item
+                :to="{ name: 'Factures fournisseurs' }"
+                mini-icon="F"
+                text="Factures"
+              />
+              <sidenav-item
+                :to="{ name: 'Statistiques fournisseurs' }"
+                mini-icon="S"
+                text="Statistiques"
+              />
+            </ul>
+          </template>
+        </sidenav-collapse>
+      </li>
+
+      <!-- Sous-Traitants -->
+      <li class="nav-item">
+        <sidenav-collapse
+          collapse-ref="sousTraitantsMenu"
+          nav-text="Sous-Traitants"
+          :class="getRoute() === 'sous-traitants' ? 'active' : ''"
+        >
+          <template #icon>
+            <Office />
+          </template>
+          <template #list>
+            <ul class="nav ms-4 ps-3">
+              <sidenav-item
+                :to="{ name: 'Gestion sous-traitants' }"
+                mini-icon="S"
+                text="Sous-Traitants"
+              />
+              <sidenav-item
+                :to="{ name: 'Commandes sous-traitants' }"
+                mini-icon="C"
+                text="Commandes"
+              />
+              <sidenav-item
+                :to="{ name: 'Factures sous-traitants' }"
+                mini-icon="F"
+                text="Factures"
+              />
+              <sidenav-item
+                :to="{ name: 'Statistiques sous-traitants' }"
+                mini-icon="S"
+                text="Statistiques"
+              />
+            </ul>
+          </template>
+        </sidenav-collapse>
+      </li>
+
+      <!-- Ventes -->
+      <li class="nav-item">
+        <sidenav-collapse
+          collapse-ref="ventesMenu"
+          nav-text="Ventes"
+          :class="getRoute() === 'ventes' ? 'active' : ''"
+        >
+          <template #icon>
+            <Shop />
+          </template>
+          <template #list>
+            <ul class="nav ms-4 ps-3">
+              <sidenav-item
+                :to="{ name: 'Devis' }"
+                mini-icon="D"
+                text="Devis"
+              />
+              <sidenav-item
+                :to="{ name: 'Factures ventes' }"
+                mini-icon="F"
+                text="Factures"
+              />
+              <sidenav-item
+                :to="{ name: 'Statistiques ventes' }"
+                mini-icon="S"
+                text="Statistiques"
+              />
+            </ul>
+          </template>
+        </sidenav-collapse>
+      </li>
+
+      <!-- Stock -->
+      <li class="nav-item">
+        <sidenav-collapse
+          collapse-ref="stockMenu"
+          nav-text="Stock"
+          :class="getRoute() === 'stock' ? 'active' : ''"
+        >
+          <template #icon>
+            <Office />
+          </template>
+          <template #list>
+            <ul class="nav ms-4 ps-3">
+              <sidenav-item
+                :to="{ name: 'Reception stock' }"
+                mini-icon="R"
+                text="Réception"
+              />
+              <sidenav-item
+                :to="{ name: 'Gestion stock' }"
+                mini-icon="S"
+                text="Stock"
+              />
+            </ul>
+          </template>
+        </sidenav-collapse>
+      </li>
+
+      <!-- Employés -->
+      <li class="nav-item">
+        <sidenav-collapse
+          collapse-ref="employesMenu"
+          nav-text="Employés"
+          :class="getRoute() === 'employes' ? 'active' : ''"
+        >
+          <template #icon>
+            <Office />
+          </template>
+          <template #list>
+            <ul class="nav ms-4 ps-3">
+              <sidenav-item
+                :to="{ name: 'Gestion employes' }"
+                mini-icon="E"
+                text="Employés"
+              />
+              <sidenav-item :to="{ name: 'NDF' }" mini-icon="N" text="NDF" />
+              <sidenav-item
+                :to="{ name: 'Vehicules' }"
+                mini-icon="V"
+                text="Véhicules"
+              />
+              <sidenav-item
+                :to="{ name: 'Absences' }"
+                mini-icon="A"
+                text="Absences"
+              />
+            </ul>
+          </template>
+        </sidenav-collapse>
+      </li>
+
+      <!-- Paramétrage -->
+      <li class="nav-item">
+        <sidenav-collapse
+          collapse-ref="parametrageMenu"
+          nav-text="Paramétrage"
+          :class="getRoute() === 'parametrage' ? 'active' : ''"
+        >
+          <template #icon>
+            <Office />
+          </template>
+          <template #list>
+            <ul class="nav ms-4 ps-3">
+              <sidenav-item
+                :to="{ name: 'Gestion droits' }"
+                mini-icon="D"
+                text="Gestion des droits"
+              />
+              <sidenav-item
+                :to="{ name: 'Gestion emails' }"
+                mini-icon="E"
+                text="Gestion des emails"
+              />
+              <sidenav-item
+                :to="{ name: 'Gestion modeles' }"
+                mini-icon="M"
+                text="Gestion des modèles"
+              />
             </ul>
           </template>
         </sidenav-collapse>
@@ -79,8 +302,7 @@
 <script>
 import SidenavItem from "./SidenavItem.vue";
 import SidenavCollapse from "./SidenavCollapse.vue";
-import SidenavCard from "./SidenavCard.vue";
-import SidenavCollapseItem from "./SidenavCollapseItem.vue";
+
 import Shop from "../../components/Icon/Shop.vue";
 import Office from "../../components/Icon/Office.vue";
 
@@ -90,7 +312,6 @@ export default {
   components: {
     SidenavItem,
     SidenavCollapse,
-    SidenavCollapseItem,
     Shop,
     Office,
   },
diff --git a/thanasoft-front/src/router/index.js b/thanasoft-front/src/router/index.js
index b8e75ac..e3b040e 100644
--- a/thanasoft-front/src/router/index.js
+++ b/thanasoft-front/src/router/index.js
@@ -395,6 +395,146 @@ const routes = [
     name: "Add Contact",
     component: () => import("@/views/pages/CRM/AddContact.vue"),
   },
+  // Agenda
+  {
+    path: "/agenda",
+    name: "Agenda",
+    component: () => import("@/views/pages/Agenda.vue"),
+  },
+  // Courriel
+  {
+    path: "/courriel",
+    name: "Courriel",
+    component: () => import("@/views/pages/Courriel.vue"),
+  },
+  // Clients - Statistiques
+  {
+    path: "/clients/statistiques",
+    name: "Statistiques clients",
+    component: () => import("@/views/pages/Clients/Statistiques.vue"),
+  },
+  // Fournisseurs
+  {
+    path: "/fournisseurs",
+    name: "Gestion fournisseurs",
+    component: () => import("@/views/pages/Fournisseurs/Fournisseurs.vue"),
+  },
+  {
+    path: "/fournisseurs/:id",
+    name: "Fournisseur details",
+    component: () =>
+      import("@/views/pages/Fournisseurs/FournisseurDetails.vue"),
+  },
+  {
+    path: "/fournisseurs/contacts",
+    name: "Contacts fournisseurs",
+    component: () => import("@/views/pages/Fournisseurs/Contacts.vue"),
+  },
+  {
+    path: "/fournisseurs/commandes",
+    name: "Commandes fournisseurs",
+    component: () => import("@/views/pages/Fournisseurs/Commandes.vue"),
+  },
+  {
+    path: "/fournisseurs/factures",
+    name: "Factures fournisseurs",
+    component: () => import("@/views/pages/Fournisseurs/Factures.vue"),
+  },
+  {
+    path: "/fournisseurs/statistiques",
+    name: "Statistiques fournisseurs",
+    component: () => import("@/views/pages/Fournisseurs/Statistiques.vue"),
+  },
+  // Sous-Traitants
+  {
+    path: "/sous-traitants",
+    name: "Gestion sous-traitants",
+    component: () => import("@/views/pages/SousTraitants/SousTraitants.vue"),
+  },
+  {
+    path: "/sous-traitants/contacts",
+    name: "Contacts sous-traitants",
+    component: () => import("@/views/pages/SousTraitants/Contacts.vue"),
+  },
+  {
+    path: "/sous-traitants/commandes",
+    name: "Commandes sous-traitants",
+    component: () => import("@/views/pages/SousTraitants/Commandes.vue"),
+  },
+  {
+    path: "/sous-traitants/factures",
+    name: "Factures sous-traitants",
+    component: () => import("@/views/pages/SousTraitants/Factures.vue"),
+  },
+  {
+    path: "/sous-traitants/statistiques",
+    name: "Statistiques sous-traitants",
+    component: () => import("@/views/pages/SousTraitants/Statistiques.vue"),
+  },
+  // Ventes
+  {
+    path: "/ventes/devis",
+    name: "Devis",
+    component: () => import("@/views/pages/Ventes/Devis.vue"),
+  },
+  {
+    path: "/ventes/factures",
+    name: "Factures ventes",
+    component: () => import("@/views/pages/Ventes/Factures.vue"),
+  },
+  {
+    path: "/ventes/statistiques",
+    name: "Statistiques ventes",
+    component: () => import("@/views/pages/Ventes/Statistiques.vue"),
+  },
+  // Stock
+  {
+    path: "/stock/reception",
+    name: "Reception stock",
+    component: () => import("@/views/pages/Stock/Reception.vue"),
+  },
+  {
+    path: "/stock",
+    name: "Gestion stock",
+    component: () => import("@/views/pages/Stock/Stock.vue"),
+  },
+  // Employés
+  {
+    path: "/employes",
+    name: "Gestion employes",
+    component: () => import("@/views/pages/Employes/Employes.vue"),
+  },
+  {
+    path: "/employes/ndf",
+    name: "NDF",
+    component: () => import("@/views/pages/Employes/NDF.vue"),
+  },
+  {
+    path: "/employes/vehicules",
+    name: "Vehicules",
+    component: () => import("@/views/pages/Employes/Vehicules.vue"),
+  },
+  {
+    path: "/employes/absences",
+    name: "Absences",
+    component: () => import("@/views/pages/Employes/Absences.vue"),
+  },
+  // Paramétrage
+  {
+    path: "/parametrage/droits",
+    name: "Gestion droits",
+    component: () => import("@/views/pages/Parametrage/Droits.vue"),
+  },
+  {
+    path: "/parametrage/emails",
+    name: "Gestion emails",
+    component: () => import("@/views/pages/Parametrage/Emails.vue"),
+  },
+  {
+    path: "/parametrage/modeles",
+    name: "Gestion modeles",
+    component: () => import("@/views/pages/Parametrage/Modeles.vue"),
+  },
 ];
 
 const router = createRouter({
diff --git a/thanasoft-front/src/views/pages/Agenda.vue b/thanasoft-front/src/views/pages/Agenda.vue
new file mode 100644
index 0000000..aa24163
--- /dev/null
+++ b/thanasoft-front/src/views/pages/Agenda.vue
@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <h1>Agenda</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Agenda",
+};
+</script>
diff --git a/thanasoft-front/src/views/pages/Clients/Statistiques.vue b/thanasoft-front/src/views/pages/Clients/Statistiques.vue
new file mode 100644
index 0000000..6d62b77
--- /dev/null
+++ b/thanasoft-front/src/views/pages/Clients/Statistiques.vue
@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <h1>Statistiques clients</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "StatistiquesClients",
+};
+</script>
diff --git a/thanasoft-front/src/views/pages/Courriel.vue b/thanasoft-front/src/views/pages/Courriel.vue
new file mode 100644
index 0000000..f656fdb
--- /dev/null
+++ b/thanasoft-front/src/views/pages/Courriel.vue
@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <h1>Courriel</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Courriel",
+};
+</script>
diff --git a/thanasoft-front/src/views/pages/Employes/Absences.vue b/thanasoft-front/src/views/pages/Employes/Absences.vue
new file mode 100644
index 0000000..b197d2c
--- /dev/null
+++ b/thanasoft-front/src/views/pages/Employes/Absences.vue
@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <h1>Absences</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Absences",
+};
+</script>
diff --git a/thanasoft-front/src/views/pages/Employes/Employes.vue b/thanasoft-front/src/views/pages/Employes/Employes.vue
new file mode 100644
index 0000000..e4cedaf
--- /dev/null
+++ b/thanasoft-front/src/views/pages/Employes/Employes.vue
@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <h1>Gestion employes</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "GestionEmployes",
+};
+</script>
diff --git a/thanasoft-front/src/views/pages/Employes/NDF.vue b/thanasoft-front/src/views/pages/Employes/NDF.vue
new file mode 100644
index 0000000..12f51bf
--- /dev/null
+++ b/thanasoft-front/src/views/pages/Employes/NDF.vue
@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <h1>NDF</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "NDF",
+};
+</script>
diff --git a/thanasoft-front/src/views/pages/Employes/Vehicules.vue b/thanasoft-front/src/views/pages/Employes/Vehicules.vue
new file mode 100644
index 0000000..85095db
--- /dev/null
+++ b/thanasoft-front/src/views/pages/Employes/Vehicules.vue
@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <h1>Vehicules</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Vehicules",
+};
+</script>
diff --git a/thanasoft-front/src/views/pages/Fournisseurs/Commandes.vue b/thanasoft-front/src/views/pages/Fournisseurs/Commandes.vue
new file mode 100644
index 0000000..e90e132
--- /dev/null
+++ b/thanasoft-front/src/views/pages/Fournisseurs/Commandes.vue
@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <h1>Commandes fournisseurs</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CommandesFournisseurs",
+};
+</script>
diff --git a/thanasoft-front/src/views/pages/Fournisseurs/Contacts.vue b/thanasoft-front/src/views/pages/Fournisseurs/Contacts.vue
new file mode 100644
index 0000000..f11eadf
--- /dev/null
+++ b/thanasoft-front/src/views/pages/Fournisseurs/Contacts.vue
@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <h1>Contacts fournisseurs</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ContactsFournisseurs",
+};
+</script>
diff --git a/thanasoft-front/src/views/pages/Fournisseurs/Factures.vue b/thanasoft-front/src/views/pages/Fournisseurs/Factures.vue
new file mode 100644
index 0000000..7aae346
--- /dev/null
+++ b/thanasoft-front/src/views/pages/Fournisseurs/Factures.vue
@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <h1>Factures fournisseurs</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "FacturesFournisseurs",
+};
+</script>
diff --git a/thanasoft-front/src/views/pages/Fournisseurs/FournisseurDetails.vue b/thanasoft-front/src/views/pages/Fournisseurs/FournisseurDetails.vue
new file mode 100644
index 0000000..7b52cbd
--- /dev/null
+++ b/thanasoft-front/src/views/pages/Fournisseurs/FournisseurDetails.vue
@@ -0,0 +1,147 @@
+<template>
+  <fournisseur-detail-presentation
+    v-if="currentFournisseur"
+    :fournisseur="currentFournisseur"
+    :contacts="contacts_fournisseur"
+    :locations="locations_fournisseur"
+    :is-loading="isLoading"
+    :fournisseur-avatar="fournisseurAvatar"
+    :active-tab="activeTab"
+    :file-input="fileInput"
+    :contact-loading="contactLoading"
+    :location-loading="locationLoading"
+    @update-the-fournisseur="updateFournisseur"
+    @add-new-contact="createNewContact"
+    @updating-contact="updateContact"
+    @add-new-location="createNewLocation"
+    @modify-location="modifyLocation"
+    @remove-location="removeLocation"
+  />
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { useRoute } from "vue-router";
+import FournisseurDetailPresentation from "@/components/Organism/CRM/FournisseurDetailPresentation.vue";
+
+const route = useRoute();
+
+// Ensure fournisseur_id is a number
+const fournisseur_id = Number(route.params.id);
+const contacts_fournisseur = ref([]);
+const locations_fournisseur = ref([]);
+const activeTab = ref("overview");
+const fournisseurAvatar = ref(null);
+const fileInput = ref(null);
+const isLoading = ref(false);
+const contactLoading = ref(false);
+const locationLoading = ref(false);
+
+// Dummy fournisseur data
+const currentFournisseur = ref({
+  id: fournisseur_id,
+  name: "Fournisseur Alpha",
+  commercial: "Jean Dupont",
+  billing_address: {
+    line1: "123 Rue de la Paix",
+    line2: "Bâtiment A",
+    postal_code: "75001",
+    city: "Paris",
+    country_code: "FR",
+  },
+  type_label: "Entreprise",
+  email: "contact@alpha.fr",
+  phone: "+33 1 23 45 67 89",
+  is_active: true,
+  siret: "12345678901234",
+  tva_number: "FR12345678901",
+  payment_terms: "30 jours",
+  notes: "Fournisseur principal pour les matériaux de construction",
+});
+
+onMounted(async () => {
+  // Dummy contacts data
+  contacts_fournisseur.value = [
+    {
+      id: 1,
+      first_name: "Pierre",
+      last_name: "Martin",
+      email: "pierre.martin@alpha.fr",
+      phone: "+33 1 23 45 67 90",
+      position: "Responsable commercial",
+      is_primary: true,
+    },
+    {
+      id: 2,
+      first_name: "Sophie",
+      last_name: "Dubois",
+      email: "sophie.dubois@alpha.fr",
+      phone: "+33 1 23 45 67 91",
+      position: "Assistante",
+      is_primary: false,
+    },
+  ];
+
+  // Dummy locations data
+  locations_fournisseur.value = [
+    {
+      id: 1,
+      name: "Siège social",
+      address: {
+        line1: "123 Rue de la Paix",
+        line2: "Bâtiment A",
+        postal_code: "75001",
+        city: "Paris",
+        country_code: "FR",
+      },
+      gps_lat: "48.8566",
+      gps_lng: "2.3522",
+      is_default: true,
+    },
+    {
+      id: 2,
+      name: "Entrepôt",
+      address: {
+        line1: "456 Avenue des Champs",
+        line2: null,
+        postal_code: "93100",
+        city: "Montreuil",
+        country_code: "FR",
+      },
+      gps_lat: "48.8634",
+      gps_lng: "2.4411",
+      is_default: false,
+    },
+  ];
+});
+
+const updateFournisseur = async (data) => {
+  console.log("Update fournisseur:", data);
+  // TODO: Implement update logic with store
+};
+
+const createNewContact = async (data) => {
+  console.log("Create new contact:", data);
+  // TODO: Implement create contact logic
+};
+
+const updateContact = async (modifiedContact) => {
+  console.log("Update contact:", modifiedContact);
+  // TODO: Implement update contact logic
+};
+
+const createNewLocation = async (data) => {
+  console.log("Create new location:", data);
+  // TODO: Implement create location logic
+};
+
+const modifyLocation = async (location) => {
+  console.log("Modify location:", location);
+  // TODO: Implement modify location logic
+};
+
+const removeLocation = async (locationId) => {
+  console.log("Remove location:", locationId);
+  // TODO: Implement remove location logic
+};
+</script>
diff --git a/thanasoft-front/src/views/pages/Fournisseurs/Fournisseurs.vue b/thanasoft-front/src/views/pages/Fournisseurs/Fournisseurs.vue
new file mode 100644
index 0000000..460bc0a
--- /dev/null
+++ b/thanasoft-front/src/views/pages/Fournisseurs/Fournisseurs.vue
@@ -0,0 +1,104 @@
+<template>
+  <fournisseur-presentation
+    :fournisseur-data="fournisseurs"
+    :loading-data="loading"
+    @push-details="goDetails"
+  />
+</template>
+<script setup>
+import FournisseurPresentation from "@/components/Organism/CRM/FournisseurPresentation.vue";
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+const loading = ref(false);
+
+// Dummy data for fournisseurs
+const fournisseurs = ref([
+  {
+    id: 1,
+    name: "Fournisseur Alpha",
+    commercial: "Jean Dupont",
+    billing_address: {
+      line1: "123 Rue de la Paix",
+      postal_code: "75001",
+      city: "Paris",
+      country_code: "FR",
+    },
+    type_label: "Entreprise",
+    email: "contact@alpha.fr",
+    phone: "+33 1 23 45 67 89",
+    is_active: true,
+  },
+  {
+    id: 2,
+    name: "Fournisseur Beta",
+    commercial: "Marie Martin",
+    billing_address: {
+      line1: "456 Avenue des Champs",
+      postal_code: "69001",
+      city: "Lyon",
+      country_code: "FR",
+    },
+    type_label: "Entreprise",
+    email: "info@beta.fr",
+    phone: "+33 4 78 90 12 34",
+    is_active: true,
+  },
+  {
+    id: 3,
+    name: "Fournisseur Gamma",
+    commercial: "Pierre Dubois",
+    billing_address: {
+      line1: "789 Boulevard Victor Hugo",
+      postal_code: "13001",
+      city: "Marseille",
+      country_code: "FR",
+    },
+    type_label: "Association",
+    email: "contact@gamma.org",
+    phone: "+33 4 91 23 45 67",
+    is_active: false,
+  },
+  {
+    id: 4,
+    name: "Fournisseur Delta",
+    commercial: "Sophie Laurent",
+    billing_address: {
+      line1: "321 Rue de la République",
+      postal_code: "33000",
+      city: "Bordeaux",
+      country_code: "FR",
+    },
+    type_label: "Entreprise",
+    email: "hello@delta.fr",
+    phone: "+33 5 56 78 90 12",
+    is_active: true,
+  },
+  {
+    id: 5,
+    name: "Fournisseur Epsilon",
+    commercial: "Luc Bernard",
+    billing_address: {
+      line1: "654 Avenue de la Liberté",
+      postal_code: "59000",
+      city: "Lille",
+      country_code: "FR",
+    },
+    type_label: "Particulier",
+    email: "contact@epsilon.fr",
+    phone: "+33 3 20 12 34 56",
+    is_active: true,
+  },
+]);
+
+const goDetails = (id) => {
+  console.log("Navigate to fournisseur details:", id);
+  // router.push({
+  //   name: "Fournisseur details",
+  //   params: {
+  //     id: id,
+  //   },
+  // });
+};
+</script>
diff --git a/thanasoft-front/src/views/pages/Fournisseurs/Statistiques.vue b/thanasoft-front/src/views/pages/Fournisseurs/Statistiques.vue
new file mode 100644
index 0000000..3d404da
--- /dev/null
+++ b/thanasoft-front/src/views/pages/Fournisseurs/Statistiques.vue
@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <h1>Statistiques fournisseurs</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "StatistiquesFournisseurs",
+};
+</script>
diff --git a/thanasoft-front/src/views/pages/Parametrage/Droits.vue b/thanasoft-front/src/views/pages/Parametrage/Droits.vue
new file mode 100644
index 0000000..a01f791
--- /dev/null
+++ b/thanasoft-front/src/views/pages/Parametrage/Droits.vue
@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <h1>Gestion des droits</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "GestionDroits",
+};
+</script>
diff --git a/thanasoft-front/src/views/pages/Parametrage/Emails.vue b/thanasoft-front/src/views/pages/Parametrage/Emails.vue
new file mode 100644
index 0000000..466ccf7
--- /dev/null
+++ b/thanasoft-front/src/views/pages/Parametrage/Emails.vue
@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <h1>Gestion des emails</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "GestionEmails",
+};
+</script>
diff --git a/thanasoft-front/src/views/pages/Parametrage/Modeles.vue b/thanasoft-front/src/views/pages/Parametrage/Modeles.vue
new file mode 100644
index 0000000..752bf2e
--- /dev/null
+++ b/thanasoft-front/src/views/pages/Parametrage/Modeles.vue
@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <h1>Gestion des modeles</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "GestionModeles",
+};
+</script>
diff --git a/thanasoft-front/src/views/pages/SousTraitants/Commandes.vue b/thanasoft-front/src/views/pages/SousTraitants/Commandes.vue
new file mode 100644
index 0000000..0028c1a
--- /dev/null
+++ b/thanasoft-front/src/views/pages/SousTraitants/Commandes.vue
@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <h1>Commandes sous-traitants</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CommandesSousTraitants",
+};
+</script>
diff --git a/thanasoft-front/src/views/pages/SousTraitants/Contacts.vue b/thanasoft-front/src/views/pages/SousTraitants/Contacts.vue
new file mode 100644
index 0000000..b1d5355
--- /dev/null
+++ b/thanasoft-front/src/views/pages/SousTraitants/Contacts.vue
@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <h1>Contacts sous-traitants</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ContactsSousTraitants",
+};
+</script>
diff --git a/thanasoft-front/src/views/pages/SousTraitants/Factures.vue b/thanasoft-front/src/views/pages/SousTraitants/Factures.vue
new file mode 100644
index 0000000..df82088
--- /dev/null
+++ b/thanasoft-front/src/views/pages/SousTraitants/Factures.vue
@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <h1>Factures sous-traitants</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "FacturesSousTraitants",
+};
+</script>
diff --git a/thanasoft-front/src/views/pages/SousTraitants/SousTraitants.vue b/thanasoft-front/src/views/pages/SousTraitants/SousTraitants.vue
new file mode 100644
index 0000000..a6d8e08
--- /dev/null
+++ b/thanasoft-front/src/views/pages/SousTraitants/SousTraitants.vue
@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <h1>Sous-Traitants</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "SousTraitants",
+};
+</script>
diff --git a/thanasoft-front/src/views/pages/SousTraitants/Statistiques.vue b/thanasoft-front/src/views/pages/SousTraitants/Statistiques.vue
new file mode 100644
index 0000000..47080c2
--- /dev/null
+++ b/thanasoft-front/src/views/pages/SousTraitants/Statistiques.vue
@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <h1>Statistiques sous-traitants</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "StatistiquesSousTraitants",
+};
+</script>
diff --git a/thanasoft-front/src/views/pages/Stock/Reception.vue b/thanasoft-front/src/views/pages/Stock/Reception.vue
new file mode 100644
index 0000000..7c3a429
--- /dev/null
+++ b/thanasoft-front/src/views/pages/Stock/Reception.vue
@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <h1>Reception stock</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ReceptionStock",
+};
+</script>
diff --git a/thanasoft-front/src/views/pages/Stock/Stock.vue b/thanasoft-front/src/views/pages/Stock/Stock.vue
new file mode 100644
index 0000000..0db9142
--- /dev/null
+++ b/thanasoft-front/src/views/pages/Stock/Stock.vue
@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <h1>Gestion stock</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "GestionStock",
+};
+</script>
diff --git a/thanasoft-front/src/views/pages/Ventes/Devis.vue b/thanasoft-front/src/views/pages/Ventes/Devis.vue
new file mode 100644
index 0000000..38df022
--- /dev/null
+++ b/thanasoft-front/src/views/pages/Ventes/Devis.vue
@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <h1>Devis</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Devis",
+};
+</script>
diff --git a/thanasoft-front/src/views/pages/Ventes/Factures.vue b/thanasoft-front/src/views/pages/Ventes/Factures.vue
new file mode 100644
index 0000000..1e27517
--- /dev/null
+++ b/thanasoft-front/src/views/pages/Ventes/Factures.vue
@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <h1>Factures ventes</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "FacturesVentes",
+};
+</script>
diff --git a/thanasoft-front/src/views/pages/Ventes/Statistiques.vue b/thanasoft-front/src/views/pages/Ventes/Statistiques.vue
new file mode 100644
index 0000000..4becf78
--- /dev/null
+++ b/thanasoft-front/src/views/pages/Ventes/Statistiques.vue
@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <h1>Statistiques ventes</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "StatistiquesVentes",
+};
+</script>