From 094c7a098062d36ea9fbc4149f114bd1e74f91ca Mon Sep 17 00:00:00 2001
From: kevin <nyavoevin@gmail.com>
Date: Wed, 4 Feb 2026 13:54:06 +0300
Subject: [PATCH] Nouvel style planning

---
 .../Planning/PlanningPresentation.vue         | 175 ++++++
 .../atoms/Planning/PlanningActionButton.vue   |  70 +++
 .../Planning/PlanningCollaboratorsSidebar.vue |  70 +++
 .../Planning/PlanningDateNavigator.vue        |  93 ++++
 .../molecules/Planning/PlanningKanban.vue     | 191 +++++++
 .../molecules/Planning/PlanningLegend.vue     |  61 +++
 .../molecules/Planning/PlanningList.vue       | 141 +++++
 .../Planning/PlanningViewToggles.vue          |  65 +++
 .../molecules/Planning/PlanningWeekGrid.vue   | 158 ++++++
 .../Tables/Stock/ProductCategoryTable         | 516 ------------------
 .../templates/Planning/PlanningTemplate.vue   |  73 +++
 .../src/examples/Sidenav/SidenavList.vue      |   8 +
 thanasoft-front/src/router/index.js           |   6 +
 thanasoft-front/src/views/pages/Planning.vue  | 150 +++++
 14 files changed, 1261 insertions(+), 516 deletions(-)
 create mode 100644 thanasoft-front/src/components/Organism/Planning/PlanningPresentation.vue
 create mode 100644 thanasoft-front/src/components/atoms/Planning/PlanningActionButton.vue
 create mode 100644 thanasoft-front/src/components/molecules/Planning/PlanningCollaboratorsSidebar.vue
 create mode 100644 thanasoft-front/src/components/molecules/Planning/PlanningDateNavigator.vue
 create mode 100644 thanasoft-front/src/components/molecules/Planning/PlanningKanban.vue
 create mode 100644 thanasoft-front/src/components/molecules/Planning/PlanningLegend.vue
 create mode 100644 thanasoft-front/src/components/molecules/Planning/PlanningList.vue
 create mode 100644 thanasoft-front/src/components/molecules/Planning/PlanningViewToggles.vue
 create mode 100644 thanasoft-front/src/components/molecules/Planning/PlanningWeekGrid.vue
 delete mode 100644 thanasoft-front/src/components/molecules/Tables/Stock/ProductCategoryTable
 create mode 100644 thanasoft-front/src/components/templates/Planning/PlanningTemplate.vue
 create mode 100644 thanasoft-front/src/views/pages/Planning.vue

diff --git a/thanasoft-front/src/components/Organism/Planning/PlanningPresentation.vue b/thanasoft-front/src/components/Organism/Planning/PlanningPresentation.vue
new file mode 100644
index 0000000..eaaa9a1
--- /dev/null
+++ b/thanasoft-front/src/components/Organism/Planning/PlanningPresentation.vue
@@ -0,0 +1,175 @@
+<template>
+  <planning-template>
+    <template #header>
+      <div class="d-flex flex-column gap-3">
+        <div>
+          <h1 class="display-4 font-bold bg-gradient-indigo-text mb-1">Planning</h1>
+          <p class="text-sm text-secondary">{{ interventionCount }} intervention(s) (mes tâches)</p>
+        </div>
+        <!-- Date Navigator Mobile Position could go here if needed, but keeping simple for now -->
+      </div>
+      <div class="d-flex flex-column flex-md-row gap-3 w-100 w-md-auto align-items-center">
+        <!-- Date Navigator -->
+        <planning-date-navigator 
+          :current-date="currentDate"
+          @prev-week="$emit('prev-week')"
+          @next-week="$emit('next-week')"
+        />
+        
+        <div class="d-flex gap-2">
+          <planning-action-button variant="secondary" size="sm" @click="$emit('refresh')">
+            <template #icon><i class="fas fa-sync-alt"></i></template>
+            <span class="d-none d-lg-inline">Actualiser</span>
+          </planning-action-button>
+          <planning-action-button variant="primary" size="sm" @click="$emit('new-request')">
+            <template #icon><i class="fas fa-plus"></i></template>
+            <span class="d-none d-lg-inline">Nouvelle demande</span>
+            <span class="d-lg-none">Nouveau</span>
+          </planning-action-button>
+        </div>
+      </div>
+    </template>
+
+    <template #view-toggles>
+      <planning-view-toggles v-model:activeView="localActiveView" />
+    </template>
+
+    <template #legend>
+      <!-- <planning-legend /> -->
+    </template>
+
+    <template #sidebar>
+      <!-- <planning-collaborators-sidebar :count="collaborators.length">
+        <div v-for="collab in collaborators" :key="collab.id" class="collaborator-item">
+          {{ collab.name }}
+        </div>
+      </planning-collaborators-sidebar> -->
+    </template>
+
+    <template #calendar-grid>
+      <!-- Grille View -->
+      <planning-week-grid 
+        v-if="localActiveView === 'grille'"
+        :start-date="currentDate" 
+        :interventions="interventions"
+        @cell-click="handleCellClick"
+      />
+      
+      <!-- List View -->
+      <planning-list 
+        v-if="localActiveView === 'liste'"
+        :interventions="interventions"
+        @edit="handleEdit"
+      />
+      
+      <!-- Kanban View -->
+      <planning-kanban 
+        v-if="localActiveView === 'kanban'"
+        :interventions="interventions"
+        @edit="handleEdit"
+        @update-status="handleUpdateStatus"
+      />
+    </template>
+  </planning-template>
+</template>
+
+<script setup>
+import { ref, watch, defineProps, defineEmits } from "vue";
+import PlanningTemplate from "@/components/templates/Planning/PlanningTemplate.vue";
+import PlanningActionButton from "@/components/atoms/Planning/PlanningActionButton.vue";
+import PlanningViewToggles from "@/components/molecules/Planning/PlanningViewToggles.vue";
+import PlanningLegend from "@/components/molecules/Planning/PlanningLegend.vue";
+import PlanningCollaboratorsSidebar from "@/components/molecules/Planning/PlanningCollaboratorsSidebar.vue";
+import PlanningWeekGrid from "@/components/molecules/Planning/PlanningWeekGrid.vue";
+import PlanningList from "@/components/molecules/Planning/PlanningList.vue";
+import PlanningKanban from "@/components/molecules/Planning/PlanningKanban.vue";
+import PlanningDateNavigator from "@/components/molecules/Planning/PlanningDateNavigator.vue";
+
+const props = defineProps({
+  interventionCount: {
+    type: Number,
+    default: 0
+  },
+  collaborators: {
+    type: Array,
+    default: () => []
+  },
+  interventions: {
+    type: Array,
+    default: () => []
+  },
+  currentDate: {
+    type: Date,
+    default: () => new Date()
+  },
+  activeView: {
+    type: String,
+    default: "grille"
+  }
+});
+
+const emit = defineEmits([
+  "refresh", 
+  "new-request", 
+  "cell-click", 
+  "update:activeView", 
+  "prev-week", 
+  "next-week",
+  "edit-intervention",
+  "update-status"
+]);
+
+const localActiveView = ref(props.activeView);
+
+watch(() => props.activeView, (newVal) => {
+  localActiveView.value = newVal;
+});
+
+watch(() => localActiveView.value, (newVal) => {
+  emit("update:activeView", newVal);
+});
+
+const handleCellClick = (info) => {
+  emit("cell-click", info);
+};
+
+const handleEdit = (intervention) => {
+  emit("edit-intervention", intervention);
+};
+
+const handleUpdateStatus = (payload) => {
+  emit("update-status", payload);
+};
+</script>
+
+<style scoped>
+.font-bold {
+  font-weight: 700;
+}
+
+.bg-gradient-indigo-text {
+  background: linear-gradient(to right, #2563eb, #4f46e5, #9333ea);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  color: transparent;
+}
+
+.display-4 {
+  font-size: 2.5rem;
+}
+
+@media (max-width: 767.98px) {
+  .display-4 {
+    font-size: 1.875rem;
+  }
+}
+
+.text-secondary {
+  color: #64748b !important;
+}
+
+.text-sm {
+  font-size: 0.875rem;
+}
+</style>
diff --git a/thanasoft-front/src/components/atoms/Planning/PlanningActionButton.vue b/thanasoft-front/src/components/atoms/Planning/PlanningActionButton.vue
new file mode 100644
index 0000000..4988d57
--- /dev/null
+++ b/thanasoft-front/src/components/atoms/Planning/PlanningActionButton.vue
@@ -0,0 +1,70 @@
+<template>
+  <button
+    class="btn d-inline-flex align-items-center justify-content-center gap-2 border-0 shadow-sm transition-all"
+    :class="[
+      variant === 'primary' ? 'btn-primary-gradient' : 'btn-outline-indigo',
+      size === 'sm' ? 'btn-sm py-1 px-3' : 'py-2 px-4'
+    ]"
+    @click="$emit('click')"
+  >
+    <slot name="icon"></slot>
+    <span :class="{ 'd-none d-md-inline': hideTextOnMobile }">
+      <slot></slot>
+    </span>
+  </button>
+</template>
+
+<script setup>
+import { defineProps, defineEmits } from "vue";
+
+defineProps({
+  variant: {
+    type: String,
+    default: "secondary" // primary or secondary
+  },
+  size: {
+    type: String,
+    default: "md"
+  },
+  hideTextOnMobile: {
+    type: Boolean,
+    default: false
+  }
+});
+
+defineEmits(["click"]);
+</script>
+
+<style scoped>
+.btn {
+  border-radius: 0.5rem;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.btn-primary-gradient {
+  background: linear-gradient(to right, #2563eb, #4f46e5);
+  color: white;
+}
+
+.btn-primary-gradient:hover {
+  background: linear-gradient(to right, #1d4ed8, #4338ca);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3) !important;
+}
+
+.btn-outline-indigo {
+  background-color: white;
+  border: 1px solid #e0e7ff !important;
+  color: #4f46e5;
+}
+
+.btn-outline-indigo:hover {
+  background-color: #f5f7ff;
+  color: #4338ca;
+}
+
+.transition-all {
+  transition: all 0.2s ease-in-out;
+}
+</style>
diff --git a/thanasoft-front/src/components/molecules/Planning/PlanningCollaboratorsSidebar.vue b/thanasoft-front/src/components/molecules/Planning/PlanningCollaboratorsSidebar.vue
new file mode 100644
index 0000000..3613c7f
--- /dev/null
+++ b/thanasoft-front/src/components/molecules/Planning/PlanningCollaboratorsSidebar.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="card border-0 shadow-lg rounded-xl h-100 sidebar-card" :class="{ 'collapsed': isCollapsed }">
+    <div class="card-header bg-white border-0 pb-0">
+      <div class="d-flex align-items-center justify-content-between mb-3">
+        <div class="d-flex align-items-center gap-2">
+          <i class="fas fa-users text-indigo-600"></i>
+          <h3 class="text-xs font-semibold mb-0">👥 Collaborateurs ({{ count }})</h3>
+        </div>
+      </div>
+    </div>
+    <div class="card-body pt-0">
+      <div v-if="count === 0" class="text-center text-secondary py-4 text-xs">
+        <p class="mb-2">Aucun collaborateur</p>
+        <p class="text-muted opacity-60">💡 Allouez une couleur depuis la page Salariés</p>
+      </div>
+      <slot v-else></slot>
+    </div>
+
+    <!-- Toggle bit for mobile if needed, though we handle collapse in template -->
+  </div>
+</template>
+
+<script setup>
+import { defineProps } from "vue";
+
+defineProps({
+  count: {
+    type: Number,
+    default: 0
+  },
+  isCollapsed: {
+    type: Boolean,
+    default: false
+  }
+});
+</script>
+
+<style scoped>
+.sidebar-card {
+  border-radius: 0.75rem;
+  background-color: white;
+  border: 2px solid #e0e7ff; /* border-indigo-200 */
+}
+
+.text-xs {
+  font-size: 0.75rem;
+}
+
+.font-semibold {
+  font-weight: 600;
+}
+
+.text-indigo-600 {
+  color: #4f46e5;
+}
+
+.sidebar-card {
+  transition: all 0.3s ease;
+}
+
+@media (max-width: 767.98px) {
+  .sidebar-card.collapsed {
+    width: 0;
+    overflow: hidden;
+    padding: 0;
+    margin: 0;
+    border: none;
+  }
+}
+</style>
diff --git a/thanasoft-front/src/components/molecules/Planning/PlanningDateNavigator.vue b/thanasoft-front/src/components/molecules/Planning/PlanningDateNavigator.vue
new file mode 100644
index 0000000..8682b5e
--- /dev/null
+++ b/thanasoft-front/src/components/molecules/Planning/PlanningDateNavigator.vue
@@ -0,0 +1,93 @@
+<template>
+  <div class="d-flex align-items-center bg-white shadow-sm rounded-lg p-1 border">
+    <button 
+      class="btn btn-sm btn-icon mb-0 shadow-none border-0 hover:bg-gray-100 rounded-md" 
+      @click="$emit('prev-week')"
+    >
+      <i class="fas fa-chevron-left text-secondary text-xs"></i>
+    </button>
+    <div class="px-3 py-1 text-sm font-semibold text-dark whitespace-nowrap min-w-140 text-center">
+      {{ dateRangeDisplay }}
+    </div>
+    <button 
+      class="btn btn-sm btn-icon mb-0 shadow-none border-0 hover:bg-gray-100 rounded-md" 
+      @click="$emit('next-week')"
+    >
+      <i class="fas fa-chevron-right text-secondary text-xs"></i>
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { computed, defineProps, defineEmits } from "vue";
+
+const props = defineProps({
+  currentDate: {
+    type: Date,
+    default: () => new Date()
+  }
+});
+
+defineEmits(["prev-week", "next-week"]);
+
+const dateRangeDisplay = computed(() => {
+  const current = new Date(props.currentDate);
+  const dayOfWeek = current.getDay(); // 0 is Sunday
+  
+  // Calculate Monday of current week
+  const diff = current.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1);
+  const monday = new Date(current);
+  monday.setDate(diff);
+  
+  // Calculate Sunday of current week
+  const sunday = new Date(monday);
+  sunday.setDate(monday.getDate() + 6);
+  
+  const options = { day: 'numeric', month: 'short' };
+  const startStr = monday.toLocaleDateString('fr-FR', options);
+  
+  // If same month, don't repeat month in start date (optional refinement, sticking to simple for now)
+  const endStr = sunday.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short', year: 'numeric' });
+  
+  return `${startStr} - ${endStr}`;
+});
+</script>
+
+<style scoped>
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+
+.rounded-md {
+  border-radius: 0.375rem;
+}
+
+.text-xs {
+  font-size: 0.75rem;
+}
+
+.text-sm {
+  font-size: 0.875rem;
+}
+
+.font-semibold {
+  font-weight: 600;
+}
+
+.min-w-140 {
+  min-width: 140px;
+}
+
+.hover\:bg-gray-100:hover {
+  background-color: #f3f4f6;
+}
+
+.btn-icon {
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>
diff --git a/thanasoft-front/src/components/molecules/Planning/PlanningKanban.vue b/thanasoft-front/src/components/molecules/Planning/PlanningKanban.vue
new file mode 100644
index 0000000..6c9eec0
--- /dev/null
+++ b/thanasoft-front/src/components/molecules/Planning/PlanningKanban.vue
@@ -0,0 +1,191 @@
+<template>
+  <div class="planning-kanban-container mt-3">
+    <div class="py-2 min-vh-100 d-inline-flex" style="overflow-x: auto">
+      <div id="planningKanban"></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+/* eslint-disable */
+import { onMounted, watch, defineProps, defineEmits } from "vue";
+import "jkanban/dist/jkanban.min.js";
+import "jkanban/dist/jkanban.min.css";
+
+const props = defineProps({
+  interventions: {
+    type: Array,
+    default: () => []
+  }
+});
+
+const emit = defineEmits(["edit", "update-status"]);
+
+let kanbanInstance = null;
+
+const columns = [
+  { id: 'todo', title: 'À planifier', status: 'En attente', colorClass: 'warning' },
+  { id: 'planned', title: 'Confirmé', status: 'Confirmé', colorClass: 'info' },
+  { id: 'in-progress', title: 'En cours', status: 'En cours', colorClass: 'primary' },
+  { id: 'done', title: 'Terminé', status: 'Terminé', colorClass: 'success' }
+];
+
+const getBoards = () => {
+  return columns.map(col => ({
+    id: col.id,
+    title: col.title,
+    class: col.colorClass, // custom class for header styling if needed
+    item: props.interventions
+      .filter(i => i.status === col.status)
+      .map(i => ({
+        id: i.id.toString(),
+        title: buildCardHtml(i),
+        originalData: i // Store original data for easy access
+      }))
+  }));
+};
+
+const buildCardHtml = (item) => {
+  // Helpers
+  const formatTime = (d) => new Date(d).toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });
+  const formatDate = (d) => new Date(d).toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' });
+  const getInitials = (n) => n ? n.split(' ').map(s => s[0]).join('').substring(0, 2).toUpperCase() : "?";
+  
+  const typeColors = {
+    'Soin': '#3b82f6',
+    'Transport': '#10b981',
+    'Mise en bière': '#f59e0b',
+    'Cérémonie': '#8b5cf6'
+  };
+  const typeColor = typeColors[item.type] || '#6b7280';
+
+  return `
+    <div class="card-content">
+      <div class="d-flex justify-content-between mb-2">
+        <span class="badge badge-sm bg-gradient-light text-dark border py-1">${item.type}</span>
+        <span class="text-xs font-weight-bold text-secondary">${formatTime(item.date)}</span>
+      </div>
+      <h6 class="mb-1 text-sm font-weight-bold">${item.deceased || 'Non spécifié'}</h6>
+      <p class="text-xs text-secondary mb-3 text-truncate">${item.client || '-'}</p>
+      
+      <div class="d-flex align-items-center justify-content-between border-top pt-2">
+        <div class="d-flex align-items-center gap-1">
+           <i class="far fa-calendar text-xs text-secondary"></i>
+           <span class="text-xs text-secondary">${formatDate(item.date)}</span>
+        </div>
+        <div class="avatar avatar-xs rounded-circle bg-gray-200 text-xs d-flex align-items-center justify-content-center" title="${item.collaborator}">
+          ${getInitials(item.collaborator)}
+        </div>
+      </div>
+      <div class="card-left-strip" style="background-color: ${typeColor}; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;"></div>
+    </div>
+  `;
+};
+
+const initKanban = () => {
+  const boards = getBoards();
+  
+  // Clean up existing if any (jkanban doesn't have a destroy method easily accessible, but we can empty container)
+  const container = document.getElementById("planningKanban");
+  if (container) container.innerHTML = "";
+
+  kanbanInstance = new jKanban({
+    element: "#planningKanban",
+    gutter: "10px",
+    widthBoard: "300px",
+    responsivePercentage: false,
+    dragItems: true,
+    boards: boards,
+    click: (el) => {
+      const id = el.getAttribute("data-eid");
+      const item = props.interventions.find(i => i.id.toString() === id);
+      if (item) {
+        emit("edit", item);
+      }
+    },
+    dropEl: (el, target, source, sibling) => {
+      const id = el.getAttribute("data-eid");
+      const targetBoardId = target.parentElement.getAttribute("data-id");
+      
+      // Find new status based on target board ID
+      const targetCol = columns.find(c => c.id === targetBoardId);
+      if (targetCol) {
+        emit("update-status", { id, status: targetCol.status });
+      }
+    }
+  });
+
+  // Apply custom styling adjustments after render
+  applyCustomStyles();
+};
+
+const applyCustomStyles = () => {
+  // Helper to add Bootstrap classes or custom styles to jKanban generated elements
+  const headers = document.querySelectorAll('.kanban-board-header');
+  headers.forEach(header => {
+    header.classList.add('bg-transparent', 'border-0', 'pb-2');
+    // Add dot
+    const boardId = header.parentElement.getAttribute('data-id');
+    const col = columns.find(c => c.id === boardId);
+    if(col) {
+      // Logic to inject the dot and count if we want to replicate the exact header design
+      // Note: jKanban header usually just contains title text. We might want to customize title HTML in getBoards().
+    }
+  });
+};
+
+onMounted(() => {
+  // Give DOM a moment
+  setTimeout(() => {
+    initKanban();
+  }, 100);
+});
+
+watch(() => props.interventions, () => {
+  // Re-init on data change
+  // Optimization: use kanbanInstance methods to add/remove, but full re-init is safer for consistency for now
+  initKanban();
+}, { deep: true });
+
+</script>
+
+<style>
+/* Global styles for jKanban overrides */
+.kanban-container {
+  display: flex;
+  width: 100%;
+}
+
+.kanban-board {
+  background: transparent !important;
+  padding: 0 !important;
+}
+
+.kanban-board-header {
+  padding-bottom: 10px !important;
+}
+
+.kanban-item {
+  background: white !important;
+  border-radius: 0.75rem !important; /* rounded-xl */
+  margin-bottom: 10px !important;
+  padding: 1rem !important;
+  box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important;
+  border: 0 !important;
+  position: relative;
+  overflow: hidden;
+}
+
+.kanban-item:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
+  transition: all 0.2s ease;
+}
+
+.kanban-drag {
+  min-height: 500px;
+  background-color: #f1f5f9; /* slate-100 */
+  border-radius: 0.75rem;
+  padding: 10px;
+}
+</style>
diff --git a/thanasoft-front/src/components/molecules/Planning/PlanningLegend.vue b/thanasoft-front/src/components/molecules/Planning/PlanningLegend.vue
new file mode 100644
index 0000000..7026704
--- /dev/null
+++ b/thanasoft-front/src/components/molecules/Planning/PlanningLegend.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="card border-0 shadow-md rounded-xl">
+    <div class="card-header bg-white border-0 pb-0">
+      <div class="d-flex align-items-center gap-2 mb-2">
+        <h3 class="text-sm font-semibold mb-0">🏖️ Légende congés</h3>
+      </div>
+    </div>
+    <div class="card-body pt-2">
+      <div class="d-flex flex-wrap gap-3">
+        <div v-for="item in legend" :key="item.label" class="d-flex align-items-center gap-2">
+          <span class="text-sm">{{ item.emoji }}</span>
+          <div class="legend-bar rounded-pill" :style="{ backgroundColor: item.color }"></div>
+          <span class="text-xs text-secondary">{{ item.label }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const legend = [
+  { emoji: "🏖️", label: "Congé payé", color: "#3b82f6" },
+  { emoji: "🏥", label: "Maladie", color: "#ef4444" },
+  { emoji: "📚", label: "Formation", color: "#8b5cf6" },
+  { emoji: "💼", label: "Sans solde", color: "#6b7280" },
+  { emoji: "🚑", label: "Accident travail", color: "#dc2626" }
+];
+</script>
+
+<style scoped>
+.card {
+  border-radius: 0.75rem;
+  background-color: white;
+  border: 1px solid #e5e7eb;
+}
+
+.text-sm {
+  font-size: 0.875rem;
+}
+
+.text-xs {
+  font-size: 0.75rem;
+}
+
+.font-semibold {
+  font-weight: 600;
+}
+
+.legend-bar {
+  width: 2rem;
+  height: 0.125rem;
+}
+
+.rounded-xl {
+  border-radius: 0.75rem;
+}
+
+.gap-3 {
+  gap: 0.75rem;
+}
+</style>
diff --git a/thanasoft-front/src/components/molecules/Planning/PlanningList.vue b/thanasoft-front/src/components/molecules/Planning/PlanningList.vue
new file mode 100644
index 0000000..c3fe3a4
--- /dev/null
+++ b/thanasoft-front/src/components/molecules/Planning/PlanningList.vue
@@ -0,0 +1,141 @@
+<template>
+  <div class="planning-list card border-0 shadow-sm rounded-xl">
+    <div class="card-body p-0">
+      <div class="table-responsive">
+        <table class="table align-items-center mb-0">
+          <thead class="bg-gray-50">
+            <tr>
+              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-4">Date & Heure</th>
+              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Type</th>
+              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Défunt / Client</th>
+              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Collaborateur</th>
+              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Statut</th>
+              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-if="interventions.length === 0">
+              <td colspan="6" class="text-center py-5">
+                <span class="text-muted text-sm">Aucune intervention pour cette période</span>
+              </td>
+            </tr>
+            <tr v-for="intervention in interventions" :key="intervention.id" class="hover-row transition-all">
+              <td class="ps-4">
+                <div class="d-flex flex-column">
+                  <h6 class="mb-0 text-sm font-weight-bold">{{ formatDate(intervention.date) }}</h6>
+                  <span class="text-xs text-secondary">{{ formatTime(intervention.date) }}</span>
+                </div>
+              </td>
+              <td>
+                <div class="d-flex align-items-center">
+                  <span class="badge badge-sm bg-gradient-light text-dark mb-0 d-flex align-items-center gap-1 border">
+                    <span class="width-8-px height-8-px rounded-circle me-1" :style="{ backgroundColor: getTypeColor(intervention.type) }"></span>
+                    {{ intervention.type }}
+                  </span>
+                </div>
+              </td>
+              <td>
+                <div class="d-flex flex-column">
+                  <h6 class="mb-0 text-sm">{{ intervention.deceased || 'Non spécifié' }}</h6>
+                  <span class="text-xs text-secondary">Client: {{ intervention.client || '-' }}</span>
+                </div>
+              </td>
+              <td>
+                <div class="d-flex align-items-center">
+                  <div class="avatar avatar-xs me-2 bg-gradient-primary rounded-circle text-white d-flex align-items-center justify-content-center text-xxs">
+                    {{ getInitials(intervention.collaborator) }}
+                  </div>
+                  <span class="text-sm font-weight-bold text-secondary">{{ intervention.collaborator }}</span>
+                </div>
+              </td>
+              <td>
+                <span class="badge badge-sm" :class="getStatusBadgeClass(intervention.status)">
+                  {{ intervention.status }}
+                </span>
+              </td>
+              <td>
+                <button class="btn btn-link text-secondary mb-0 px-2" @click="$emit('edit', intervention)">
+                  <i class="fas fa-edit text-xs"></i>
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps, defineEmits } from "vue";
+
+defineProps({
+  interventions: {
+    type: Array,
+    default: () => []
+  }
+});
+
+defineEmits(["edit"]);
+
+const formatDate = (dateString) => {
+  if (!dateString) return "-";
+  return new Date(dateString).toLocaleDateString('fr-FR', { weekday: 'long', day: 'numeric', month: 'short' });
+};
+
+const formatTime = (dateString) => {
+  if (!dateString) return "-";
+  return new Date(dateString).toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });
+};
+
+const getInitials = (name) => {
+  if (!name) return "?";
+  return name.split(' ').map(n => n[0]).join('').substring(0, 2).toUpperCase();
+};
+
+const getTypeColor = (type) => {
+  const colors = {
+    'Soin': '#3b82f6',
+    'Transport': '#10b981',
+    'Mise en bière': '#f59e0b',
+    'Cérémonie': '#8b5cf6'
+  };
+  return colors[type] || '#6b7280';
+};
+
+const getStatusBadgeClass = (status) => {
+  const map = {
+    'Confirmé': 'bg-gradient-info',
+    'Terminé': 'bg-gradient-success',
+    'En attente': 'bg-gradient-warning',
+    'Annulé': 'bg-gradient-danger'
+  };
+  return map[status] || 'bg-gradient-secondary';
+};
+</script>
+
+<style scoped>
+.text-xxs {
+  font-size: 0.65rem !important;
+}
+
+.width-8-px {
+  width: 8px;
+}
+.height-8-px {
+  height: 8px;
+}
+
+.hover-row:hover {
+  background-color: #f8fafc;
+}
+
+.transition-all {
+  transition: all 0.2s ease;
+}
+
+.rounded-xl {
+  border-radius: 0.75rem;
+  overflow: hidden;
+}
+</style>
diff --git a/thanasoft-front/src/components/molecules/Planning/PlanningViewToggles.vue b/thanasoft-front/src/components/molecules/Planning/PlanningViewToggles.vue
new file mode 100644
index 0000000..2607fb8
--- /dev/null
+++ b/thanasoft-front/src/components/molecules/Planning/PlanningViewToggles.vue
@@ -0,0 +1,65 @@
+<template>
+  <div class="d-flex gap-2">
+    <button
+      v-for="view in views"
+      :key="view.id"
+      class="btn d-inline-flex align-items-center justify-content-center gap-2 border-0 shadow-sm transition-all"
+      :class="[
+        activeView === view.id ? 'btn-active' : 'btn-inactive'
+      ]"
+      @click="$emit('update:activeView', view.id)"
+    >
+      <i :class="view.icon"></i>
+      <span class="d-none d-sm-inline">{{ view.label }}</span>
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { defineProps, defineEmits } from "vue";
+
+defineProps({
+  activeView: {
+    type: String,
+    default: "grille"
+  }
+});
+
+defineEmits(["update:activeView"]);
+
+const views = [
+  { id: "liste", label: "Liste", icon: "fas fa-list", color: "gray" },
+  { id: "kanban", label: "Kanban", icon: "fas fa-columns", color: "gray" },
+  { id: "grille", label: "Grille", icon: "fas fa-calendar-alt", color: "indigo" }
+];
+</script>
+
+<style scoped>
+.btn {
+  border-radius: 0.5rem;
+  font-weight: 500;
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  white-space: nowrap;
+}
+
+.btn-active {
+  background-color: #4f46e5;
+  color: white;
+}
+
+.btn-inactive {
+  background-color: white;
+  color: #64748b;
+  border: 1px solid #e2e8f0 !important;
+}
+
+.btn-inactive:hover {
+  background-color: #f8fafc;
+  color: #1e293b;
+}
+
+.transition-all {
+  transition: all 0.2s ease-in-out;
+}
+</style>
diff --git a/thanasoft-front/src/components/molecules/Planning/PlanningWeekGrid.vue b/thanasoft-front/src/components/molecules/Planning/PlanningWeekGrid.vue
new file mode 100644
index 0000000..e8f04f3
--- /dev/null
+++ b/thanasoft-front/src/components/molecules/Planning/PlanningWeekGrid.vue
@@ -0,0 +1,158 @@
+<template>
+  <div class="calendar-grid-container card h-100 border-0 shadow-sm rounded-xl">
+    <div class="card-body p-3 h-100">
+      <div ref="calendarEl" id="fullCalendarGrid" class="h-100"></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch, defineProps, defineEmits } from "vue";
+import { Calendar } from "@fullcalendar/core";
+import timeGridPlugin from "@fullcalendar/timegrid";
+import interactionPlugin from "@fullcalendar/interaction";
+import frLocale from "@fullcalendar/core/locales/fr";
+
+const props = defineProps({
+  startDate: {
+    type: Date,
+    default: () => new Date()
+  },
+  interventions: {
+    type: Array,
+    default: () => []
+  }
+});
+
+const emit = defineEmits(["cell-click", "edit"]);
+
+const calendarEl = ref(null);
+let calendar = null;
+
+const initializeCalendar = () => {
+  if (calendar) {
+    calendar.destroy();
+  }
+
+  if (!calendarEl.value) return;
+
+  calendar = new Calendar(calendarEl.value, {
+    plugins: [timeGridPlugin, interactionPlugin],
+    initialView: "timeGridWeek",
+    locale: frLocale,
+    headerToolbar: false, // Hidden header, controlled by parent navigator
+    initialDate: props.startDate,
+    allDaySlot: false,
+    slotMinTime: "07:00:00",
+    slotMaxTime: "21:00:00",
+    height: "auto",
+    contentHeight: "auto",
+    expandRows: true,
+    stickyHeaderDates: true,
+    dayHeaderFormat: { weekday: 'long', day: 'numeric', month: 'short' }, // "Lundi 12 janv."
+    events: mapEvents(props.interventions),
+    eventClick: (info) => {
+      const originalEvent = info.event.extendedProps.originalData;
+      emit("edit", originalEvent);
+    },
+    dateClick: (info) => {
+      // timeGrid view dateClick gives date with time
+      emit("cell-click", { date: info.date });
+    },
+    // Styling customization via class names injection if needed
+    eventClassNames: (arg) => {
+      return ['shadow-sm', 'border-0']; 
+    }
+  });
+
+  calendar.render();
+};
+
+const mapEvents = (interventions) => {
+  return interventions.map(i => {
+    // Map props.interventions structure to FullCalendar event object
+    // Assuming intervention has: id, date (ISO string), title (or type), status, color
+    const typeColors = {
+      'Soin': '#3b82f6',
+      'Transport': '#10b981',
+      'Mise en bière': '#f59e0b',
+      'Cérémonie': '#8b5cf6'
+    };
+    
+    // Default duration 1 hour if not specified
+    const start = new Date(i.date);
+    const end = new Date(start.getTime() + 60 * 60 * 1000); 
+
+    return {
+      id: i.id,
+      title: i.deceased ? `${i.type} - ${i.deceased}` : i.type,
+      start: i.date,
+      end: i.end || end, // Use provided end or default
+      backgroundColor: typeColors[i.type] || '#6b7280',
+      borderColor: typeColors[i.type] || '#6b7280',
+      textColor: '#ffffff',
+      extendedProps: {
+        originalData: i
+      }
+    };
+  });
+};
+
+onMounted(() => {
+  initializeCalendar();
+});
+
+watch(() => props.startDate, (newDate) => {
+  if (calendar) {
+    calendar.gotoDate(newDate);
+  }
+});
+
+watch(() => props.interventions, (newInterventions) => {
+  if (calendar) {
+    calendar.removeAllEvents();
+    calendar.addEventSource(mapEvents(newInterventions));
+  }
+}, { deep: true });
+
+</script>
+
+<style scoped>
+.calendar-grid-container {
+  min-height: 600px;
+}
+
+/* FullCalendar Custom Overrides to match Soft UI */
+:deep(.fc-col-header-cell) {
+  background-color: transparent;
+  border: none;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #67748e;
+  padding-bottom: 10px;
+  text-transform: capitalize;
+}
+
+:deep(.fc-timegrid-slot) {
+  height: 3rem; /* Taller slots */
+}
+
+:deep(.fc-timegrid-slot-label) {
+  font-size: 0.75rem;
+  color: #8392ab;
+  font-weight: 600;
+}
+
+:deep(.fc-scrollgrid) {
+  border: none;
+}
+
+:deep(.fc td), :deep(.fc th) {
+  border-color: #e9ecef;
+}
+
+/* Today highlight */
+:deep(.fc-day-today) {
+  background-color: rgba(233, 236, 239, 0.3) !important;
+}
+</style>
diff --git a/thanasoft-front/src/components/molecules/Tables/Stock/ProductCategoryTable b/thanasoft-front/src/components/molecules/Tables/Stock/ProductCategoryTable
deleted file mode 100644
index 9942bf5..0000000
--- a/thanasoft-front/src/components/molecules/Tables/Stock/ProductCategoryTable
+++ /dev/null
@@ -1,516 +0,0 @@
-<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>Code</th>
-                <th>Nom</th>
-                <th>Catégorie parent</th>
-                <th>Description</th>
-                <th>Statut</th>
-                <th>Produits</th>
-                <th>Actions</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="i in skeletonRows" :key="i" class="skeleton-row">
-                <!-- Code 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>
-
-                <!-- Name Column Skeleton -->
-                <td>
-                  <div class="d-flex align-items-center">
-                    <div class="skeleton-avatar"></div>
-                    <div class="skeleton-text long ms-2"></div>
-                  </div>
-                </td>
-
-                <!-- Parent Category Column Skeleton -->
-                <td>
-                  <div class="skeleton-text medium"></div>
-                </td>
-
-                <!-- Description Column Skeleton -->
-                <td>
-                  <div class="skeleton-text very-long"></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>
-
-                <!-- Products Count Column Skeleton -->
-                <td>
-                  <div class="skeleton-text short"></div>
-                </td>
-
-                <!-- Actions Column Skeleton -->
-                <td>
-                  <div class="d-flex gap-1">
-                    <div class="skeleton-icon small"></div>
-                    <div class="skeleton-icon small"></div>
-                    <div class="skeleton-icon small"></div>
-                  </div>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-
-    <!-- Data State -->
-    <div v-else class="table-responsive">
-      <table id="product-category-list" class="table table-flush">
-        <thead class="thead-light">
-          <tr>
-            <th>Code</th>
-            <th>Nom</th>
-            <th>Catégorie parent</th>
-            <th>Description</th>
-            <th>Statut</th>
-            <th>Produits</th>
-            <th>Actions</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="category in data" :key="category.id">
-            <!-- Code Column -->
-            <td class="font-weight-bold">
-              <div class="d-flex align-items-center">
-                <span>{{ category.code }}</span>
-              </div>
-            </td>
-
-            <!-- Name Column -->
-            <td class="font-weight-bold">
-              <div class="d-flex align-items-center">
-                <div>
-                  <div class="text-sm font-weight-bold">
-                    {{ category.name }}
-                  </div>
-                  <div class="text-xs text-muted">ID: {{ category.id }}</div>
-                </div>
-              </div>
-            </td>
-
-            <!-- Parent Category Column -->
-            <td class="text-xs font-weight-bold">
-              <div v-if="category.parent" class="d-flex align-items-center">
-                <soft-button
-                  color="info"
-                  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-folder" aria-hidden="true"></i>
-                </soft-button>
-                <span>{{ category.parent.name }}</span>
-              </div>
-              <div v-else class="text-muted">
-                <soft-button
-                  color="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-folder-open" aria-hidden="true"></i>
-                </soft-button>
-                Catégorie racine
-              </div>
-            </td>
-
-            <!-- Description Column -->
-            <td class="text-xs font-weight-bold">
-              <div class="description-cell">
-                <span
-                  v-if="category.description"
-                  class="text-truncate d-inline-block"
-                  style="max-width: 200px"
-                >
-                  {{ category.description }}
-                </span>
-                <span v-else class="text-muted">Aucune description</span>
-              </div>
-            </td>
-
-            <!-- Status Column -->
-            <td class="text-xs font-weight-bold">
-              <div class="d-flex flex-column">
-                <!-- Status Badge -->
-                <span :class="getStatusClass(category)">
-                  <i
-                    :class="category.active ? 'fas fa-check me-1' : 'fas fa-times me-1'"
-                  ></i>
-                  {{ category.active ? "Active" : "Inactive" }}
-                </span>
-
-                <!-- Children Badge -->
-                <span
-                  v-if="category.has_children"
-                  class="badge badge-info mt-1"
-                >
-                  <i class="fas fa-sitemap me-1"></i>
-                  {{ category.children_count || 0 }} enfants
-                </span>
-              </div>
-            </td>
-
-            <!-- Products Count Column -->
-            <td class="text-xs font-weight-bold">
-              <div class="d-flex align-items-center">
-                <soft-badge
-                  :color="category.has_products ? 'success' : 'secondary'"
-                  class="me-2"
-                >
-                  {{ category.products_count || 0 }}
-                </soft-badge>
-                <span class="text-muted">produits</span>
-              </div>
-            </td>
-
-            <td>
-              <div class="d-flex align-items-center gap-2">
-                <!-- View Button -->
-                <soft-button
-                  color="info"
-                  variant="outline"
-                  title="Voir la catégorie"
-                  :data-category-id="category.id"
-                  class="btn-icon-only btn-rounded mb-0 btn-sm d-flex align-items-center justify-content-center"
-                  @click="emit('view', category)"
-                >
-                  <i class="fas fa-eye" aria-hidden="true"></i>
-                </soft-button>
-
-                <!-- Edit Button -->
-                <soft-button
-                  color="warning"
-                  variant="outline"
-                  title="Modifier la catégorie"
-                  :data-category-id="category.id"
-                  class="btn-icon-only btn-rounded mb-0 btn-sm d-flex align-items-center justify-content-center"
-                  @click="emit('edit', category)"
-                >
-                  <i class="fas fa-edit" aria-hidden="true"></i>
-                </soft-button>
-
-                <!-- Delete Button -->
-                <soft-button
-                  color="danger"
-                  variant="outline"
-                  title="Supprimer la catégorie"
-                  :data-category-id="category.id"
-                  class="btn-icon-only btn-rounded mb-0 btn-sm d-flex align-items-center justify-content-center"
-                  @click="emit('delete', category)"
-                >
-                  <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-tags fa-3x text-muted"></i>
-      </div>
-      <h5 class="empty-title">Aucune catégorie de produit trouvée</h5>
-      <p class="empty-text text-muted">
-        Aucune catégorie de produit à afficher pour le moment.
-      </p>
-    </div>
-  </div>
-</template>
-
-<script setup>
-  import { ref, onMounted, watch, onUnmounted } from "vue";
-  import { DataTable } from "simple-datatables";
-  import SoftButton from "@/components/SoftButton.vue";
-  import SoftAvatar from "@/components/SoftAvatar.vue";
-  import SoftBadge from "@/components/SoftBadge.vue";
-  import { defineProps, defineEmits } from "vue";
-
-  const emit = defineEmits(["view", "edit", "delete"]);
-
-  // Sample avatar images for categories
-  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 getStatusClass = (category) => {
-    return category.active ? "badge badge-success" : "badge badge-danger";
-  };
-
-  const initializeDataTable = () => {
-    // Destroy existing instance if it exists
-    if (dataTableInstance.value) {
-      dataTableInstance.value.destroy();
-      dataTableInstance.value = null;
-    }
-
-    const dataTableEl = document.getElementById("product-category-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 categoryId = button.getAttribute("data-category-id");
-
-    if (
-      button.title === "Supprimer la catégorie" ||
-      button.querySelector(".fa-trash")
-    ) {
-      emit("delete", categoryId);
-    } else if (
-      button.title === "Modifier la catégorie" ||
-      button.querySelector(".fa-edit")
-    ) {
-      emit("edit", categoryId);
-    } else if (
-      button.title === "Voir la catégorie" ||
-      button.querySelector(".fa-eye")
-    ) {
-      emit("view", categoryId);
-    }
-  };
-
-  // 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("product-category-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-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;
-  }
-
-  .skeleton-text.very-long {
-    width: 160px;
-  }
-
-  .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;
-  }
-
-  .description-cell {
-    max-width: 200px;
-    word-wrap: break-word;
-  }
-
-  .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.very-long {
-      width: 100px;
-    }
-
-    .skeleton-text.long {
-      width: 80px;
-    }
-
-    .skeleton-text.medium {
-      width: 60px;
-    }
-  }
-
-  .skeleton-icon.small {
-    width: 24px;
-    height: 24px;
-    border-radius: 50%;
-    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
-    background-size: 200% 100%;
-    animation: shimmer 2s infinite;
-  }
-</style>
diff --git a/thanasoft-front/src/components/templates/Planning/PlanningTemplate.vue b/thanasoft-front/src/components/templates/Planning/PlanningTemplate.vue
new file mode 100644
index 0000000..3989d5d
--- /dev/null
+++ b/thanasoft-front/src/components/templates/Planning/PlanningTemplate.vue
@@ -0,0 +1,73 @@
+<template>
+  <div class="planning-container p-2 p-md-4">
+    <div class="container-max mx-auto">
+      <!-- Header Section -->
+      <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-4 gap-3">
+        <slot name="header"></slot>
+      </div>
+
+      <!-- View Toggles -->
+      <div class="d-flex gap-2 mb-4 overflow-auto pb-2">
+        <slot name="view-toggles"></slot>
+      </div>
+
+      <div class="content-wrapper">
+        <div class="row g-4">
+          <!-- Sidebar & Legend Column (Left on desktop) -->
+          <!-- <div class="col-12 col-xl-3 order-2 order-xl-1">
+            <div class="sticky-top" style="top: 2rem; z-index: 10;">
+              <div class="mb-4">
+                <slot name="legend"></slot>
+              </div>
+              <slot name="sidebar"></slot>
+            </div>
+          </div> -->
+
+          <!-- Calendar Grid Column (Right on desktop) -->
+          <div class="col-12 col-xl-12 order-1 order-xl-2">
+            <slot name="calendar-grid"></slot>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+// Template layout for Planning page
+</script>
+
+<style scoped>
+.planning-container {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #f0f7ff 0%, #eef2ff 50%, #f5f3ff 100%);
+}
+
+.container-max {
+  max-width: 1400px;
+}
+
+.content-wrapper {
+  position: relative;
+}
+
+.gap-3 {
+  gap: 1rem;
+}
+
+/* Custom scrollbar for view toggles on mobile */
+.overflow-auto::-webkit-scrollbar {
+  height: 4px;
+}
+.overflow-auto::-webkit-scrollbar-thumb {
+  background: #e2e8f0;
+  border-radius: 10px;
+}
+
+@media (min-width: 1200px) {
+  .sticky-top {
+    max-height: calc(100vh - 4rem);
+    overflow-y: auto;
+  }
+}
+</style>
diff --git a/thanasoft-front/src/examples/Sidenav/SidenavList.vue b/thanasoft-front/src/examples/Sidenav/SidenavList.vue
index 3d22fc7..811b701 100644
--- a/thanasoft-front/src/examples/Sidenav/SidenavList.vue
+++ b/thanasoft-front/src/examples/Sidenav/SidenavList.vue
@@ -120,6 +120,14 @@ export default {
           miniIcon: "A",
           route: { name: "Agenda" },
         },
+        {
+          id: "planning",
+          type: "single",
+          text: "Planning",
+          icon: "Office",
+          miniIcon: "P",
+          route: { name: "Planning" },
+        },
         {
           id: "courriel",
           type: "single",
diff --git a/thanasoft-front/src/router/index.js b/thanasoft-front/src/router/index.js
index 75fef2b..3eac766 100644
--- a/thanasoft-front/src/router/index.js
+++ b/thanasoft-front/src/router/index.js
@@ -401,6 +401,12 @@ const routes = [
     name: "Agenda",
     component: () => import("@/views/pages/Agenda.vue"),
   },
+  // Planning
+  {
+    path: "/planning",
+    name: "Planning",
+    component: () => import("@/views/pages/Planning.vue"),
+  },
   // Courriel
   {
     path: "/courriel",
diff --git a/thanasoft-front/src/views/pages/Planning.vue b/thanasoft-front/src/views/pages/Planning.vue
new file mode 100644
index 0000000..275536f
--- /dev/null
+++ b/thanasoft-front/src/views/pages/Planning.vue
@@ -0,0 +1,150 @@
+<template>
+  <div>
+    <planning-presentation
+      :intervention-count="interventions.length"
+      :collaborators="collaborators"
+      :interventions="interventions"
+      :current-date="currentDate"
+      v-model:activeView="activeView"
+      @refresh="handleRefresh"
+      @new-request="handleNewRequest"
+      @cell-click="handleCellClick"
+      @prev-week="handlePrevWeek"
+      @next-week="handleNextWeek"
+      @edit-intervention="handleEditIntervention"
+      @update-status="handleUpdateStatus"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import PlanningPresentation from "@/components/Organism/Planning/PlanningPresentation.vue";
+
+// State
+const interventions = ref([]);
+const collaborators = ref([]);
+const currentDate = ref(new Date());
+const activeView = ref("grille");
+
+// Lifecycle
+onMounted(async () => {
+  await fetchData();
+});
+
+// Methods
+const fetchData = async () => {
+  // Mock data for demonstration
+  collaborators.value = [
+    { id: 1, name: "Jean Dupont" },
+    { id: 2, name: "Marie Curie" },
+    { id: 3, name: "Lucas Martin" }
+  ];
+
+  // Generate some random interventions around current date
+  const baseDate = new Date(currentDate.value);
+  const startOfWeek = getMonday(baseDate);
+  
+  interventions.value = [
+    {
+      id: 101,
+      date: addDays(startOfWeek, 0, 9, 30), // Monday 9:30
+      type: "Soin",
+      deceased: "M. Martin",
+      client: "Pompes Funèbres Générales",
+      collaborator: "Jean Dupont",
+      status: "Confirmé"
+    },
+    {
+      id: 102,
+      date: addDays(startOfWeek, 1, 14, 0), // Tuesday 14:00
+      type: "Transport",
+      deceased: "Mme. Dubois",
+      client: "Roc Eclerc",
+      collaborator: "Marie Curie",
+      status: "En cours"
+    },
+    {
+      id: 103,
+      date: addDays(startOfWeek, 2, 10, 0), // Wednesday 10:00
+      type: "Mise en bière",
+      deceased: "M. Lefebvre",
+      client: "PF Locales",
+      collaborator: "Lucas Martin",
+      status: "En attente"
+    },
+    {
+      id: 104,
+      date: addDays(startOfWeek, 3, 16, 30), // Thursday 16:30
+      type: "Cérémonie",
+      deceased: "Mme. Petit",
+      client: "Famille Petit",
+      collaborator: "Jean Dupont",
+      status: "Terminé"
+    },
+    {
+      id: 105,
+      date: addDays(startOfWeek, 4, 11, 0), // Friday 11:00
+      type: "Soin",
+      deceased: "Inconnu",
+      client: "Police",
+      collaborator: "Marie Curie",
+      status: "Annulé"
+    }
+  ];
+};
+
+const handleRefresh = async () => {
+  await fetchData();
+};
+
+const handleNewRequest = () => {
+  console.log("New request");
+};
+
+const handleCellClick = (info) => {
+  console.log("Cell clicked", info);
+};
+
+const handleEditIntervention = (intervention) => {
+  console.log("Edit intervention", intervention);
+};
+
+const handlePrevWeek = () => {
+  const newDate = new Date(currentDate.value);
+  newDate.setDate(newDate.getDate() - 7);
+  currentDate.value = newDate;
+  fetchData(); // Refresh data for new week
+};
+
+const handleUpdateStatus = (payload) => {
+  const intervention = interventions.value.find(i => i.id.toString() === payload.id);
+  if (intervention) {
+    intervention.status = payload.status;
+    // In a real app, we would make an API call here to persist the change
+    console.log(`Updated status of intervention ${payload.id} to ${payload.status}`);
+  }
+};
+
+const handleNextWeek = () => {
+  const newDate = new Date(currentDate.value);
+  newDate.setDate(newDate.getDate() + 7);
+  currentDate.value = newDate;
+  fetchData(); // Refresh data for new week
+};
+
+// Utilities
+function getMonday(d) {
+  d = new Date(d);
+  var day = d.getDay(),
+      diff = d.getDate() - day + (day == 0 ? -6 : 1); // adjust when day is sunday
+  return new Date(d.setDate(diff));
+}
+
+function addDays(date, days, hours, minutes) {
+  const result = new Date(date);
+  result.setDate(result.getDate() + days);
+  result.setHours(hours, minutes, 0, 0);
+  return result.toISOString();
+}
+</script>