defunt Doc

thanasoft-front/src/components/molecules/Defunts/DefuntDetailContent.vue

@@ -1,4 +1,76 @@
 <template>
+  <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"
+          >
+            <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>
+
+      <!-- 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 -->
@@ -22,15 +94,6 @@
                 </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">
@@ -70,7 +133,9 @@
                         <h6 class="mb-0 text-sm">
                           {{ formatDate(deceased?.birth_date) }}
                         </h6>
-                  <p class="text-xs text-secondary mb-0">Date de naissance</p>
+                        <p class="text-xs text-secondary mb-0">
+                          Date de naissance
+                        </p>
                       </div>
                     </div>
                   </div>
@@ -166,7 +231,10 @@
                     placeholder="Nom de famille"
                     :class="{ 'is-invalid': validationErrors.last_name }"
                   />
-            <div v-if="validationErrors.last_name" class="invalid-feedback">
+                  <div
+                    v-if="validationErrors.last_name"
+                    class="invalid-feedback"
+                  >
                     {{ validationErrors.last_name }}
                   </div>
                 </div>
@@ -179,7 +247,10 @@
                     placeholder="Prénom(s)"
                     :class="{ 'is-invalid': validationErrors.first_name }"
                   />
-            <div v-if="validationErrors.first_name" class="invalid-feedback">
+                  <div
+                    v-if="validationErrors.first_name"
+                    class="invalid-feedback"
+                  >
                     {{ validationErrors.first_name }}
                   </div>
                 </div>
@@ -191,7 +262,10 @@
                     type="date"
                     :class="{ 'is-invalid': validationErrors.birth_date }"
                   />
-            <div v-if="validationErrors.birth_date" class="invalid-feedback">
+                  <div
+                    v-if="validationErrors.birth_date"
+                    class="invalid-feedback"
+                  >
                     {{ validationErrors.birth_date }}
                   </div>
                 </div>
@@ -203,7 +277,10 @@
                     type="date"
                     :class="{ 'is-invalid': validationErrors.death_date }"
                   />
-            <div v-if="validationErrors.death_date" class="invalid-feedback">
+                  <div
+                    v-if="validationErrors.death_date"
+                    class="invalid-feedback"
+                  >
                     {{ validationErrors.death_date }}
                   </div>
                 </div>
@@ -267,13 +344,67 @@
             </div>
           </div>
         </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>
+
+        <!-- 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 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>

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>