From f9b6e5e0f693cfb68c5bcbb740672e883d3bf3b2 Mon Sep 17 00:00:00 2001
From: Nyavokevin <42602932+nyavokevin@users.noreply.github.com>
Date: Tue, 2 Dec 2025 17:35:40 +0300
Subject: [PATCH] defunt Doc

---
 .../molecules/Defunts/DefuntDetailContent.vue | 727 ++++++++++++------
 .../molecules/Defunts/DefuntDetailSidebar.vue |  31 -
 2 files changed, 479 insertions(+), 279 deletions(-)

diff --git a/thanasoft-front/src/components/molecules/Defunts/DefuntDetailContent.vue b/thanasoft-front/src/components/molecules/Defunts/DefuntDetailContent.vue
index 0f25da4..de8456d 100644
--- a/thanasoft-front/src/components/molecules/Defunts/DefuntDetailContent.vue
+++ b/thanasoft-front/src/components/molecules/Defunts/DefuntDetailContent.vue
@@ -1,279 +1,410 @@
 <template>
-  <div class="card">
-    <div class="card-body">
-      <!-- Header with Title and Actions -->
-      <div class="row align-items-center mb-4">
-        <div class="col">
-          <h5 class="mb-0">Informations du défunt</h5>
-          <p class="text-sm text-secondary mb-0">
-            Détails et informations personnelles
-          </p>
-        </div>
-        <div class="col-auto">
-          <soft-button
-            color="primary"
-            variant="gradient"
-            class="btn-sm"
-            @click="isEditing = !isEditing"
+  <div>
+    <!-- Loading State -->
+    <div v-if="isLoading" class="text-center py-5">
+      <div class="spinner-border" role="status">
+        <span class="visually-hidden">Chargement...</span>
+      </div>
+      <p class="mt-3 text-muted">Chargement des détails du défunt...</p>
+    </div>
+
+    <!-- Content -->
+    <template v-else-if="deceased">
+      <!-- Tab Navigation -->
+      <div class="card">
+        <div class="card-body">
+          <ul
+            class="nav nav-tabs card-header-tabs"
+            id="defuntTabs"
+            role="tablist"
           >
-            <i class="fas fa-edit me-2"></i>
-            {{ isEditing ? "Annuler" : "Modifier" }}
-          </soft-button>
+            <li class="nav-item" role="presentation">
+              <button
+                class="nav-link"
+                :class="{ active: activeTab === 'details' }"
+                @click="activeTab = 'details'"
+                type="button"
+              >
+                <i class="fas fa-user me-2"></i>
+                Détails
+              </button>
+            </li>
+            <li class="nav-item" role="presentation">
+              <button
+                class="nav-link"
+                :class="{ active: activeTab === 'documents' }"
+                @click="activeTab = 'documents'"
+                type="button"
+              >
+                <i class="fas fa-file-alt me-2"></i>
+                Documents
+                <span
+                  v-if="deceased.documents_count"
+                  class="badge bg-primary ms-1"
+                >
+                  {{ deceased.documents_count }}
+                </span>
+              </button>
+            </li>
+            <li class="nav-item" role="presentation">
+              <button
+                class="nav-link"
+                :class="{ active: activeTab === 'interventions' }"
+                @click="activeTab = 'interventions'"
+                type="button"
+              >
+                <i class="fas fa-clipboard-list me-2"></i>
+                Interventions
+                <span
+                  v-if="deceased.interventions_count"
+                  class="badge bg-info ms-1"
+                >
+                  {{ deceased.interventions_count }}
+                </span>
+              </button>
+            </li>
+          </ul>
         </div>
       </div>
 
-      <!-- Loading State -->
-      <div v-if="isLoading" class="text-center p-4">
-        <div class="spinner-border text-primary" role="status">
-          <span class="visually-hidden">Chargement...</span>
-        </div>
-      </div>
-
-      <!-- Content -->
-      <div v-else>
-        <!-- View Mode -->
-        <div v-if="!isEditing" class="row">
-          <div class="col-12">
-            <h6
-              class="text-uppercase text-secondary text-xs font-weight-bolder mb-3"
-            >
-              Informations personnelles
-            </h6>
-          </div>
-
-          <!-- Personal Info -->
-          <div class="col-md-6 mb-3">
-            <div class="border rounded-3 p-3 h-100">
-              <div class="d-flex align-items-center">
-                <div
-                  class="avatar avatar-sm bg-gradient-secondary rounded-circle d-flex align-items-center justify-content-center me-3"
-                >
-                  <i class="fas fa-user text-white"></i>
+      <!-- Tab Content -->
+      <div class="tab-content mt-4">
+        <!-- Details Tab -->
+        <div v-if="activeTab === 'details'" class="tab-pane fade show active">
+          <div class="card">
+            <div class="card-body">
+              <!-- Header with Title and Actions -->
+              <div class="row align-items-center mb-4">
+                <div class="col">
+                  <h5 class="mb-0">Informations du défunt</h5>
+                  <p class="text-sm text-secondary mb-0">
+                    Détails et informations personnelles
+                  </p>
                 </div>
-                <div>
-                  <h6 class="mb-0 text-sm">{{ getFullName }}</h6>
-                  <p class="text-xs text-secondary mb-0">Nom complet</p>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div class="col-md-6 mb-3">
-            <div class="border rounded-3 p-3 h-100">
-              <div class="d-flex align-items-center">
-                <div
-                  class="avatar avatar-sm bg-gradient-info rounded-circle d-flex align-items-center justify-content-center me-3"
-                >
-                  <i class="fas fa-calendar-alt text-white"></i>
-                </div>
-                <div>
-                  <h6 class="mb-0 text-sm">
-                    {{ formatDate(deceased?.birth_date) }}
-                  </h6>
-                  <p class="text-xs text-secondary mb-0">Date de naissance</p>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div class="col-md-6 mb-3">
-            <div class="border rounded-3 p-3 h-100">
-              <div class="d-flex align-items-center">
-                <div
-                  class="avatar avatar-sm bg-gradient-danger rounded-circle d-flex align-items-center justify-content-center me-3"
-                >
-                  <i class="fas fa-cross text-white"></i>
-                </div>
-                <div>
-                  <h6 class="mb-0 text-sm">
-                    {{ formatDate(deceased?.death_date) }}
-                  </h6>
-                  <p class="text-xs text-secondary mb-0">Date de décès</p>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div class="col-md-6 mb-3">
-            <div class="border rounded-3 p-3 h-100">
-              <div class="d-flex align-items-center">
-                <div
-                  class="avatar avatar-sm bg-gradient-warning rounded-circle d-flex align-items-center justify-content-center me-3"
-                >
-                  <i class="fas fa-map-marker-alt text-white"></i>
-                </div>
-                <div>
-                  <h6 class="mb-0 text-sm">
-                    {{ deceased?.place_of_death || "Non renseigné" }}
-                  </h6>
-                  <p class="text-xs text-secondary mb-0">Lieu de décès</p>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- Age at death -->
-          <div class="col-12 mb-4">
-            <div class="border rounded-3 p-3">
-              <div class="row align-items-center">
                 <div class="col-auto">
-                  <div
-                    class="avatar avatar-lg bg-gradient-success rounded-circle d-flex align-items-center justify-content-center"
+                  <soft-button
+                    color="primary"
+                    variant="gradient"
+                    class="btn-sm"
+                    @click="isEditing = !isEditing"
                   >
-                    <i class="fas fa-birthday-cake text-white"></i>
+                    <i class="fas fa-edit me-2"></i>
+                    {{ isEditing ? "Annuler" : "Modifier" }}
+                  </soft-button>
+                </div>
+              </div>
+
+              <!-- View Mode -->
+              <div v-if="!isEditing" class="row">
+                <div class="col-12">
+                  <h6
+                    class="text-uppercase text-secondary text-xs font-weight-bolder mb-3"
+                  >
+                    Informations personnelles
+                  </h6>
+                </div>
+
+                <!-- Personal Info -->
+                <div class="col-md-6 mb-3">
+                  <div class="border rounded-3 p-3 h-100">
+                    <div class="d-flex align-items-center">
+                      <div
+                        class="avatar avatar-sm bg-gradient-secondary rounded-circle d-flex align-items-center justify-content-center me-3"
+                      >
+                        <i class="fas fa-user text-white"></i>
+                      </div>
+                      <div>
+                        <h6 class="mb-0 text-sm">{{ getFullName }}</h6>
+                        <p class="text-xs text-secondary mb-0">Nom complet</p>
+                      </div>
+                    </div>
                   </div>
                 </div>
-                <div class="col">
-                  <h3 class="mb-0">{{ calculateAgeAtDeath }}</h3>
-                  <p class="text-sm text-secondary mb-0">Âge au décès</p>
+
+                <div class="col-md-6 mb-3">
+                  <div class="border rounded-3 p-3 h-100">
+                    <div class="d-flex align-items-center">
+                      <div
+                        class="avatar avatar-sm bg-gradient-info rounded-circle d-flex align-items-center justify-content-center me-3"
+                      >
+                        <i class="fas fa-calendar-alt text-white"></i>
+                      </div>
+                      <div>
+                        <h6 class="mb-0 text-sm">
+                          {{ formatDate(deceased?.birth_date) }}
+                        </h6>
+                        <p class="text-xs text-secondary mb-0">
+                          Date de naissance
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="col-md-6 mb-3">
+                  <div class="border rounded-3 p-3 h-100">
+                    <div class="d-flex align-items-center">
+                      <div
+                        class="avatar avatar-sm bg-gradient-danger rounded-circle d-flex align-items-center justify-content-center me-3"
+                      >
+                        <i class="fas fa-cross text-white"></i>
+                      </div>
+                      <div>
+                        <h6 class="mb-0 text-sm">
+                          {{ formatDate(deceased?.death_date) }}
+                        </h6>
+                        <p class="text-xs text-secondary mb-0">Date de décès</p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="col-md-6 mb-3">
+                  <div class="border rounded-3 p-3 h-100">
+                    <div class="d-flex align-items-center">
+                      <div
+                        class="avatar avatar-sm bg-gradient-warning rounded-circle d-flex align-items-center justify-content-center me-3"
+                      >
+                        <i class="fas fa-map-marker-alt text-white"></i>
+                      </div>
+                      <div>
+                        <h6 class="mb-0 text-sm">
+                          {{ deceased?.place_of_death || "Non renseigné" }}
+                        </h6>
+                        <p class="text-xs text-secondary mb-0">Lieu de décès</p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Age at death -->
+                <div class="col-12 mb-4">
+                  <div class="border rounded-3 p-3">
+                    <div class="row align-items-center">
+                      <div class="col-auto">
+                        <div
+                          class="avatar avatar-lg bg-gradient-success rounded-circle d-flex align-items-center justify-content-center"
+                        >
+                          <i class="fas fa-birthday-cake text-white"></i>
+                        </div>
+                      </div>
+                      <div class="col">
+                        <h3 class="mb-0">{{ calculateAgeAtDeath }}</h3>
+                        <p class="text-sm text-secondary mb-0">Âge au décès</p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Notes -->
+                <div class="col-12">
+                  <h6
+                    class="text-uppercase text-secondary text-xs font-weight-bolder mb-3"
+                  >
+                    Notes et observations
+                  </h6>
+                  <div class="border rounded-3 p-3">
+                    <p class="text-sm mb-0">
+                      {{ deceased?.notes || "Aucune note renseignée" }}
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Edit Mode -->
+              <div v-else class="row">
+                <div class="col-12">
+                  <h6
+                    class="text-uppercase text-secondary text-xs font-weight-bolder mb-3"
+                  >
+                    Modifier les informations
+                  </h6>
+                </div>
+
+                <div class="col-md-6 mb-3">
+                  <label class="form-label"
+                    >Nom de famille <span class="text-danger">*</span></label
+                  >
+                  <soft-input
+                    v-model="editForm.last_name"
+                    type="text"
+                    placeholder="Nom de famille"
+                    :class="{ 'is-invalid': validationErrors.last_name }"
+                  />
+                  <div
+                    v-if="validationErrors.last_name"
+                    class="invalid-feedback"
+                  >
+                    {{ validationErrors.last_name }}
+                  </div>
+                </div>
+
+                <div class="col-md-6 mb-3">
+                  <label class="form-label">Prénom(s)</label>
+                  <soft-input
+                    v-model="editForm.first_name"
+                    type="text"
+                    placeholder="Prénom(s)"
+                    :class="{ 'is-invalid': validationErrors.first_name }"
+                  />
+                  <div
+                    v-if="validationErrors.first_name"
+                    class="invalid-feedback"
+                  >
+                    {{ validationErrors.first_name }}
+                  </div>
+                </div>
+
+                <div class="col-md-6 mb-3">
+                  <label class="form-label">Date de naissance</label>
+                  <soft-input
+                    v-model="editForm.birth_date"
+                    type="date"
+                    :class="{ 'is-invalid': validationErrors.birth_date }"
+                  />
+                  <div
+                    v-if="validationErrors.birth_date"
+                    class="invalid-feedback"
+                  >
+                    {{ validationErrors.birth_date }}
+                  </div>
+                </div>
+
+                <div class="col-md-6 mb-3">
+                  <label class="form-label">Date de décès</label>
+                  <soft-input
+                    v-model="editForm.death_date"
+                    type="date"
+                    :class="{ 'is-invalid': validationErrors.death_date }"
+                  />
+                  <div
+                    v-if="validationErrors.death_date"
+                    class="invalid-feedback"
+                  >
+                    {{ validationErrors.death_date }}
+                  </div>
+                </div>
+
+                <div class="col-12 mb-3">
+                  <label class="form-label">Lieu de décès</label>
+                  <soft-input
+                    v-model="editForm.place_of_death"
+                    type="text"
+                    placeholder="Lieu de décès"
+                    :class="{ 'is-invalid': validationErrors.place_of_death }"
+                  />
+                  <div
+                    v-if="validationErrors.place_of_death"
+                    class="invalid-feedback"
+                  >
+                    {{ validationErrors.place_of_death }}
+                  </div>
+                </div>
+
+                <div class="col-12 mb-4">
+                  <label class="form-label">Notes et observations</label>
+                  <textarea
+                    v-model="editForm.notes"
+                    class="form-control"
+                    rows="4"
+                    placeholder="Notes complémentaires..."
+                    :class="{ 'is-invalid': validationErrors.notes }"
+                  ></textarea>
+                  <div v-if="validationErrors.notes" class="invalid-feedback">
+                    {{ validationErrors.notes }}
+                  </div>
+                </div>
+
+                <div class="col-12">
+                  <div class="d-flex gap-2">
+                    <soft-button
+                      color="primary"
+                      variant="gradient"
+                      @click="saveChanges"
+                      :disabled="isSaving"
+                    >
+                      <span
+                        v-if="isSaving"
+                        class="spinner-border spinner-border-sm me-2"
+                        role="status"
+                      ></span>
+                      {{ isSaving ? "Sauvegarde..." : "Sauvegarder" }}
+                    </soft-button>
+                    <soft-button
+                      color="secondary"
+                      variant="outline"
+                      @click="cancelEdit"
+                      :disabled="isSaving"
+                    >
+                      Annuler
+                    </soft-button>
+                  </div>
                 </div>
               </div>
             </div>
           </div>
-
-          <!-- Notes -->
-          <div class="col-12">
-            <h6
-              class="text-uppercase text-secondary text-xs font-weight-bolder mb-3"
-            >
-              Notes et observations
-            </h6>
-            <div class="border rounded-3 p-3">
-              <p class="text-sm mb-0">
-                {{ deceased?.notes || "Aucune note renseignée" }}
-              </p>
-            </div>
-          </div>
         </div>
 
-        <!-- Edit Mode -->
-        <div v-else class="row">
-          <div class="col-12">
-            <h6
-              class="text-uppercase text-secondary text-xs font-weight-bolder mb-3"
-            >
-              Modifier les informations
-            </h6>
-          </div>
+        <!-- Documents Tab -->
+        <div v-if="activeTab === 'documents'" class="tab-pane fade show active">
+          <DocumentManagement
+            :documents="deceasedDocuments"
+            :loading="documentStore.isLoading"
+            :error="documentStore.getError"
+            @files-selected="handleFilesSelected"
+            @upload-files="handleUploadFiles"
+            @delete-document="handleDeleteDocument"
+            @delete-documents="handleDeleteDocuments"
+            @update-document-label="handleUpdateDocumentLabel"
+            @retry="loadDeceasedDocuments"
+          />
+        </div>
 
-          <div class="col-md-6 mb-3">
-            <label class="form-label"
-              >Nom de famille <span class="text-danger">*</span></label
-            >
-            <soft-input
-              v-model="editForm.last_name"
-              type="text"
-              placeholder="Nom de famille"
-              :class="{ 'is-invalid': validationErrors.last_name }"
-            />
-            <div v-if="validationErrors.last_name" class="invalid-feedback">
-              {{ validationErrors.last_name }}
+        <!-- Interventions Tab -->
+        <div
+          v-if="activeTab === 'interventions'"
+          class="tab-pane fade show active"
+        >
+          <div class="card">
+            <div class="card-header pb-0">
+              <div class="d-flex align-items-center">
+                <h6 class="mb-0">
+                  Interventions ({{ deceased?.interventions_count || 0 }})
+                </h6>
+              </div>
             </div>
-          </div>
-
-          <div class="col-md-6 mb-3">
-            <label class="form-label">Prénom(s)</label>
-            <soft-input
-              v-model="editForm.first_name"
-              type="text"
-              placeholder="Prénom(s)"
-              :class="{ 'is-invalid': validationErrors.first_name }"
-            />
-            <div v-if="validationErrors.first_name" class="invalid-feedback">
-              {{ validationErrors.first_name }}
-            </div>
-          </div>
-
-          <div class="col-md-6 mb-3">
-            <label class="form-label">Date de naissance</label>
-            <soft-input
-              v-model="editForm.birth_date"
-              type="date"
-              :class="{ 'is-invalid': validationErrors.birth_date }"
-            />
-            <div v-if="validationErrors.birth_date" class="invalid-feedback">
-              {{ validationErrors.birth_date }}
-            </div>
-          </div>
-
-          <div class="col-md-6 mb-3">
-            <label class="form-label">Date de décès</label>
-            <soft-input
-              v-model="editForm.death_date"
-              type="date"
-              :class="{ 'is-invalid': validationErrors.death_date }"
-            />
-            <div v-if="validationErrors.death_date" class="invalid-feedback">
-              {{ validationErrors.death_date }}
-            </div>
-          </div>
-
-          <div class="col-12 mb-3">
-            <label class="form-label">Lieu de décès</label>
-            <soft-input
-              v-model="editForm.place_of_death"
-              type="text"
-              placeholder="Lieu de décès"
-              :class="{ 'is-invalid': validationErrors.place_of_death }"
-            />
-            <div
-              v-if="validationErrors.place_of_death"
-              class="invalid-feedback"
-            >
-              {{ validationErrors.place_of_death }}
-            </div>
-          </div>
-
-          <div class="col-12 mb-4">
-            <label class="form-label">Notes et observations</label>
-            <textarea
-              v-model="editForm.notes"
-              class="form-control"
-              rows="4"
-              placeholder="Notes complémentaires..."
-              :class="{ 'is-invalid': validationErrors.notes }"
-            ></textarea>
-            <div v-if="validationErrors.notes" class="invalid-feedback">
-              {{ validationErrors.notes }}
-            </div>
-          </div>
-
-          <div class="col-12">
-            <div class="d-flex gap-2">
-              <soft-button
-                color="primary"
-                variant="gradient"
-                @click="saveChanges"
-                :disabled="isSaving"
-              >
-                <span
-                  v-if="isSaving"
-                  class="spinner-border spinner-border-sm me-2"
-                  role="status"
-                ></span>
-                {{ isSaving ? "Sauvegarde..." : "Sauvegarder" }}
-              </soft-button>
-              <soft-button
-                color="secondary"
-                variant="outline"
-                @click="cancelEdit"
-                :disabled="isSaving"
-              >
-                Annuler
-              </soft-button>
+            <div class="card-body">
+              <div class="text-center py-5">
+                <div class="avatar avatar-xl mb-3">
+                  <div class="avatar-title bg-gradient-info text-white h5 mb-0">
+                    <i class="fas fa-clipboard-list"></i>
+                  </div>
+                </div>
+                <h6 class="text-sm text-muted">Liste des interventions</h6>
+                <p class="text-xs text-muted">
+                  Interface de gestion des interventions à implémenter...
+                </p>
+              </div>
             </div>
           </div>
         </div>
       </div>
+    </template>
+
+    <!-- No data state -->
+    <div v-else class="text-center py-5">
+      <p class="text-muted">Aucune donnée de défunt disponible</p>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, watch } from "vue";
+import { ref, computed, watch, onMounted } from "vue";
 import { defineProps, defineEmits } from "vue";
 import SoftInput from "@/components/SoftInput.vue";
 import SoftButton from "@/components/SoftButton.vue";
+import DocumentManagement from "@/components/molecules/Interventions/DocumentManagement.vue";
+import { useDocumentAttachmentStore } from "@/stores/documentAttachmentStore";
 
 const props = defineProps({
   deceased: {
@@ -286,11 +417,20 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["update-deceased"]);
+const emit = defineEmits(["update-deceased", "refresh-deceased"]);
 
 const isEditing = ref(false);
 const isSaving = ref(false);
 const validationErrors = ref({});
+const activeTab = ref("details");
+
+// Document attachment store
+const documentStore = useDocumentAttachmentStore();
+
+// Computed properties for document attachments
+const deceasedDocuments = computed(() =>
+  documentStore.getDeceasedAttachments(props.deceased?.id || 0)
+);
 
 const editForm = ref({
   last_name: "",
@@ -380,7 +520,70 @@ const cancelEdit = () => {
   populateEditForm();
 };
 
-// Watch for deceased changes
+// Document management handlers
+const handleFilesSelected = (files) => {
+  // Files have been selected, parent can handle validation if needed
+  console.log("Files selected:", files.length);
+};
+
+const handleUploadFiles = async (files) => {
+  if (!props.deceased?.id || !files.length) return;
+
+  try {
+    await documentStore.uploadAndAttachFiles(
+      files,
+      "App\\Models\\Deceased",
+      props.deceased.id
+    );
+    emit("refresh-deceased");
+  } catch (error) {
+    console.error("Error uploading files:", error);
+    documentStore.clearError();
+  }
+};
+
+const handleDeleteDocument = async (documentId) => {
+  try {
+    await documentStore.detachFile(documentId);
+    emit("refresh-deceased");
+  } catch (error) {
+    console.error("Error deleting document:", error);
+    documentStore.clearError();
+  }
+};
+
+const handleDeleteDocuments = async (documentIds) => {
+  try {
+    await documentStore.detachMultipleFiles({ attachment_ids: documentIds });
+    emit("refresh-deceased");
+  } catch (error) {
+    console.error("Error deleting documents:", error);
+    documentStore.clearError();
+  }
+};
+
+const handleUpdateDocumentLabel = async ({ id, label }) => {
+  try {
+    await documentStore.updateAttachmentMetadata(id, { label });
+    emit("refresh-deceased");
+  } catch (error) {
+    console.error("Error updating document label:", error);
+    documentStore.clearError();
+  }
+};
+
+const loadDeceasedDocuments = async () => {
+  if (!props.deceased?.id) return;
+
+  try {
+    await documentStore.fetchDeceasedFiles(props.deceased.id);
+  } catch (error) {
+    console.error("Error loading document attachments:", error);
+    documentStore.clearError();
+  }
+};
+
+// Watchers
 watch(
   () => props.deceased,
   (newDeceased) => {
@@ -391,6 +594,34 @@ watch(
   { deep: true }
 );
 
+watch(
+  () => activeTab.value,
+  (newTab) => {
+    // Load document attachments when documents tab is activated
+    if (newTab === "documents" && props.deceased?.id) {
+      loadDeceasedDocuments();
+    }
+  }
+);
+
+watch(
+  () => props.deceased?.id,
+  (newId) => {
+    // Load document attachments when deceased changes
+    if (newId && activeTab.value === "documents") {
+      loadDeceasedDocuments();
+    }
+  }
+);
+
+// Lifecycle
+onMounted(() => {
+  // Load document attachments if starting on documents tab
+  if (activeTab.value === "documents" && props.deceased?.id) {
+    loadDeceasedDocuments();
+  }
+});
+
 // Initialize form when component mounts
 populateEditForm();
 </script>
diff --git a/thanasoft-front/src/components/molecules/Defunts/DefuntDetailSidebar.vue b/thanasoft-front/src/components/molecules/Defunts/DefuntDetailSidebar.vue
index ebe9b7a..feca2b2 100644
--- a/thanasoft-front/src/components/molecules/Defunts/DefuntDetailSidebar.vue
+++ b/thanasoft-front/src/components/molecules/Defunts/DefuntDetailSidebar.vue
@@ -57,37 +57,6 @@
     </div>
 
     <hr class="horizontal dark my-3 mx-3" />
-
-    <!-- Key Dates -->
-    <div class="card-body pt-0">
-      <h6 class="text-uppercase text-secondary text-xs font-weight-bolder mb-3">
-        Dates importantes
-      </h6>
-      <div class="timeline timeline-one-side">
-        <div class="timeline-block mb-3">
-          <span class="timeline-step">
-            <i class="fas fa-calendar-alt text-primary"></i>
-          </span>
-          <div class="timeline-content">
-            <h6 class="text-dark text-sm font-weight-bold mb-0">Naissance</h6>
-            <p class="text-secondary text-xs mb-0">
-              {{ formatDate(deceased?.birth_date) }}
-            </p>
-          </div>
-        </div>
-        <div class="timeline-block mb-0">
-          <span class="timeline-step">
-            <i class="fas fa-cross text-dark"></i>
-          </span>
-          <div class="timeline-content">
-            <h6 class="text-dark text-sm font-weight-bold mb-0">Décès</h6>
-            <p class="text-secondary text-xs mb-0">
-              {{ formatDate(deceased?.death_date) }}
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
   </div>
 </template>