From dec87dfdb71c48fac1841dfb508da0dafd8d26b2 Mon Sep 17 00:00:00 2001
From: nyavokevin <nyavoevin@gmail.com>
Date: Thu, 5 Mar 2026 17:12:40 +0300
Subject: [PATCH] Feat: improve desing contact and  agenda

---
 .../Agenda/InterventionMultiStepModal.vue     |    6 +-
 .../Planning/PlanningCreationTypeSelector.vue |    1 -
 .../components/molecules/form/ContactForm.vue | 1233 ++++++++++-------
 3 files changed, 743 insertions(+), 497 deletions(-)

diff --git a/thanasoft-front/src/components/Organism/Agenda/InterventionMultiStepModal.vue b/thanasoft-front/src/components/Organism/Agenda/InterventionMultiStepModal.vue
index 2093973..904e69c 100644
--- a/thanasoft-front/src/components/Organism/Agenda/InterventionMultiStepModal.vue
+++ b/thanasoft-front/src/components/Organism/Agenda/InterventionMultiStepModal.vue
@@ -41,7 +41,6 @@
               <!-- SECTION: Défunt & Client (two columns) -->
               <div class="form-section">
                 <div class="section-label">
-                  <span class="section-number">1</span>
                   <span>Personnes concernées</span>
                 </div>
 
@@ -166,7 +165,6 @@
               <!-- SECTION: Date, Type, Intervenant -->
               <div class="form-section">
                 <div class="section-label">
-                  <span class="section-number">2</span>
                   <span>Planification</span>
                 </div>
 
@@ -288,7 +286,7 @@
               <!-- SECTION: Lieu & Prescription -->
               <div class="form-section">
                 <div class="section-label">
-                  <span class="section-number">3</span>
+        
                   <span>Lieu & Documents</span>
                 </div>
 
@@ -380,7 +378,7 @@
               <!-- SECTION: Notes -->
               <div class="form-section">
                 <div class="section-label">
-                  <span class="section-number">4</span>
+          
                   <span>Observations</span>
                 </div>
                 <div class="field-group">
diff --git a/thanasoft-front/src/components/molecules/Planning/PlanningCreationTypeSelector.vue b/thanasoft-front/src/components/molecules/Planning/PlanningCreationTypeSelector.vue
index d503c6d..981d9ce 100644
--- a/thanasoft-front/src/components/molecules/Planning/PlanningCreationTypeSelector.vue
+++ b/thanasoft-front/src/components/molecules/Planning/PlanningCreationTypeSelector.vue
@@ -19,7 +19,6 @@
 
     <soft-button
       color="success"
-   
       @click="$emit('select-type', 'event')"
     >
 
diff --git a/thanasoft-front/src/components/molecules/form/ContactForm.vue b/thanasoft-front/src/components/molecules/form/ContactForm.vue
index 31d2fe3..f8d2efb 100644
--- a/thanasoft-front/src/components/molecules/form/ContactForm.vue
+++ b/thanasoft-front/src/components/molecules/form/ContactForm.vue
@@ -1,333 +1,298 @@
 <template>
-  <div class="card p-3 border-radius-xl bg-white" data-animation="FadeIn">
-    <h5 class="font-weight-bolder mb-0">Nouveau Contact</h5>
-    <p class="mb-0 text-sm">Informations du contact</p>
+  <div class="contact-form-root">
 
-    <!-- Message de succès -->
-    <div
-      v-if="props.success"
-      class="alert alert-success alert-dismissible fade show mt-3"
-      role="alert"
-    >
-      <span class="alert-icon"><i class="ni ni-like-2"></i></span>
-      <span class="alert-text"
-        ><strong>Succès !</strong> Contact créé avec succès !</span
-      >
+    <!-- Header -->
+    <div class="form-header">
+      <div class="header-icon-wrap">
+        <i class="fas fa-user-plus"></i>
+      </div>
+      <div>
+        <h5 class="form-title">Nouveau Contact</h5>
+        <p class="form-subtitle">Associez un contact à un client existant</p>
+      </div>
     </div>
 
-    <!-- Message d'erreur général -->
-    <div
-      v-if="fieldErrors.general"
-      class="alert alert-danger alert-dismissible fade show mt-3"
-      role="alert"
-    >
-      <span class="alert-icon"><i class="ni ni-support-16"></i></span>
-      <span class="alert-text">
-        {{ fieldErrors.general }}
-      </span>
-    </div>
+    <!-- Success Banner -->
+    <transition name="banner-fade">
+      <div v-if="props.success" class="status-banner success-banner">
+        <i class="fas fa-check-circle banner-icon"></i>
+        <span><strong>Contact créé avec succès !</strong> Il est maintenant lié au client.</span>
+      </div>
+    </transition>
 
-    <div class="multisteps-form__content">
-      <!-- Recherche de client existant -->
-      <div class="row mt-3">
-        <div class="col-12">
-          <label class="form-label"
-            >Client <span class="text-danger">*</span></label
-          >
-          <div class="search-container position-relative">
-            <soft-input
+    <!-- Error Banner -->
+    <transition name="banner-fade">
+      <div v-if="fieldErrors.general" class="status-banner error-banner">
+        <i class="fas fa-exclamation-circle banner-icon"></i>
+        <span>{{ fieldErrors.general }}</span>
+      </div>
+    </transition>
+
+    <div class="form-body">
+
+      <!-- ── SECTION 1: Client ── -->
+      <div class="form-section">
+        <div class="section-label">
+          <span>Client associé</span>
+        </div>
+
+        <!-- Search -->
+        <div class="field-group" v-if="!selectedClient">
+          <label class="field-label">
+            Client <span class="req">*</span>
+          </label>
+          <div class="search-wrap" :class="{ 'has-error': fieldErrors.client_id }">
+            <i class="fas fa-search search-pfx"></i>
+            <input
               :value="searchQuery"
-              class="multisteps-form__input"
-              :class="{ 'is-invalid': fieldErrors.client_id }"
               type="text"
-              placeholder="Tapez pour rechercher un client..."
-              icon="ni ni-zoom-split-in"
-              icon-dir="left"
+              class="field-input search-input"
+              placeholder="Rechercher un client par nom ou email..."
               @input="handleSearchInput($event.target.value)"
               @focus="showDropdown = true"
               @blur="onInputBlur"
             />
-            <div v-if="fieldErrors.client_id" class="invalid-feedback d-block">
-              {{ fieldErrors.client_id }}
-            </div>
-
-            <!-- Liste déroulante des résultats -->
-            <div
-              v-if="
-                showDropdown &&
-                props.searchResults &&
-                props.searchResults.length > 0
-              "
-              class="dropdown-results show position-absolute w-100"
-            >
-              <div class="list-group">
-                <button
-                  v-for="client in props.searchResults"
-                  :key="client.id"
-                  type="button"
-                  class="list-group-item list-group-item-action"
-                  @mousedown="selectClient(client)"
-                >
-                  <div
-                    class="d-flex justify-content-between align-items-center"
-                  >
-                    <div>
-                      <strong>{{ client.name }}</strong>
-                      <div v-if="client.email" class="text-muted small">
-                        {{ client.email }}
-                      </div>
-                    </div>
-                    <i class="ni ni-check-bold text-success"></i>
-                  </div>
-                </button>
-              </div>
-            </div>
-
-            <!-- Message aucun résultat -->
-            <div
-              v-if="
-                showDropdown &&
-                searchQuery &&
-                props.searchResults &&
-                props.searchResults.length === 0
-              "
-              class="dropdown-results show position-absolute w-100"
-            >
-              <div class="list-group">
-                <div class="list-group-item text-muted text-center">
-                  <i class="ni ni-bulb-61 me-2"></i>
-                  Aucun client trouvé pour "{{ searchQuery }}"
-                </div>
-              </div>
-            </div>
+            <span v-if="searchQuery" class="search-loader">
+              <i class="fas fa-circle-notch fa-spin" style="color:#9ca3af;font-size:0.75rem"></i>
+            </span>
           </div>
-          <small class="text-muted">
-            Sélectionnez un client existant pour associer le contact
-          </small>
-        </div>
-      </div>
+          <span v-if="fieldErrors.client_id" class="field-error">
+            <i class="fas fa-exclamation-circle"></i> {{ fieldErrors.client_id }}
+          </span>
+          <p class="hint-text"><i class="fas fa-info-circle me-1"></i>Le contact sera rattaché à ce client</p>
 
-      <!-- Client sélectionné -->
-      <div
-        v-if="selectedClient"
-        class="selected-contact mt-3 p-3 bg-success bg-opacity-10 border-radius-lg"
-      >
-        <div class="d-flex justify-content-between align-items-center">
-          <div>
-            <h6 class="mb-1 text-success">
-              <i class="ni ni-check-bold me-2"></i>
-              Client sélectionné
-            </h6>
-            <p class="mb-0">
-              <strong>{{ selectedClient.name }}</strong>
-              <span v-if="selectedClient.email">
-                • {{ selectedClient.email }}</span
+          <!-- Dropdown -->
+          <transition name="dropdown-pop">
+            <div v-if="showDropdown && props.searchResults && props.searchResults.length > 0" class="search-dropdown">
+              <button
+                v-for="client in props.searchResults"
+                :key="client.id"
+                type="button"
+                class="dropdown-row"
+                @mousedown="selectClient(client)"
               >
-            </p>
-            <small class="text-muted"> Le contact sera lié à ce client </small>
-          </div>
-          <button
-            type="button"
-            class="btn btn-outline-danger btn-sm"
-            @click="clearSelection"
-          >
-            <i class="ni ni-fat-remove"></i> Changer
-          </button>
+                <div class="dr-avatar">{{ (client.name || '?')[0] }}</div>
+                <div class="dr-info">
+                  <span class="dr-name">{{ client.name }}</span>
+                  <span class="dr-meta" v-if="client.email">{{ client.email }}</span>
+                </div>
+                <i class="fas fa-arrow-right dr-arrow"></i>
+              </button>
+            </div>
+            <div v-else-if="showDropdown && searchQuery && props.searchResults && props.searchResults.length === 0" class="search-dropdown">
+              <div class="dropdown-empty">
+                <i class="fas fa-search empty-icon"></i>
+                <span>Aucun résultat pour <strong>« {{ searchQuery }} »</strong></span>
+              </div>
+            </div>
+          </transition>
         </div>
+
+        <!-- Selected Client Card -->
+        <transition name="banner-fade">
+          <div v-if="selectedClient" class="selected-client-card">
+            <div class="sc-avatar">{{ (selectedClient.name || '?')[0] }}</div>
+            <div class="sc-info">
+              <span class="sc-label">Client sélectionné</span>
+              <span class="sc-name">{{ selectedClient.name }}</span>
+              <span class="sc-meta" v-if="selectedClient.email">{{ selectedClient.email }}</span>
+            </div>
+            <button type="button" class="sc-change-btn" @click="clearSelection">
+              <i class="fas fa-exchange-alt me-1"></i>Changer
+            </button>
+          </div>
+        </transition>
       </div>
 
-      <!-- Prénom et Nom -->
-      <div class="row mt-3">
-        <div class="col-12 col-sm-6">
-          <label class="form-label">Prénom</label>
-          <soft-input
-            :value="form.first_name"
-            class="multisteps-form__input"
-            :class="{ 'is-invalid': fieldErrors.first_name }"
-            type="text"
-            placeholder="ex. Jean"
-            maxlength="191"
-            @input="form.first_name = $event.target.value"
-          />
-          <div v-if="fieldErrors.first_name" class="invalid-feedback">
-            {{ fieldErrors.first_name }}
-          </div>
-        </div>
-        <div class="col-12 col-sm-6 mt-3 mt-sm-0">
-          <label class="form-label">Nom</label>
-          <soft-input
-            :value="form.last_name"
-            class="multisteps-form__input"
-            :class="{ 'is-invalid': fieldErrors.last_name }"
-            type="text"
-            placeholder="ex. Dupont"
-            maxlength="191"
-            @input="form.last_name = $event.target.value"
-          />
-          <div v-if="fieldErrors.last_name" class="invalid-feedback">
-            {{ fieldErrors.last_name }}
-          </div>
-        </div>
-      </div>
+      <div class="section-divider"></div>
 
-      <!-- Email -->
-      <div class="row mt-3">
-        <div class="col-12">
-          <label class="form-label">Email</label>
-          <soft-input
-            :value="form.email"
-            class="multisteps-form__input"
-            :class="{ 'is-invalid': fieldErrors.email }"
-            type="email"
-            placeholder="ex. jean.dupont@entreprise.com"
-            maxlength="191"
-            @input="form.email = $event.target.value"
-          />
-          <div v-if="fieldErrors.email" class="invalid-feedback">
-            {{ fieldErrors.email }}
-          </div>
+      <!-- ── SECTION 2: Identity ── -->
+      <div class="form-section">
+        <div class="section-label">
+          <span>Identité</span>
         </div>
-      </div>
 
-      <!-- Téléphone et Mobile -->
-      <div class="row mt-3">
-        <div class="col-12 col-sm-6">
-          <label class="form-label">Téléphone</label>
-          <soft-input
-            :value="form.phone"
-            class="multisteps-form__input"
-            :class="{ 'is-invalid': fieldErrors.phone }"
-            type="text"
-            placeholder="ex. +33 1 23 45 67 89"
-            maxlength="50"
-            @input="form.phone = $event.target.value"
-          />
-          <div v-if="fieldErrors.phone" class="invalid-feedback">
-            {{ fieldErrors.phone }}
+        <div class="two-col">
+          <div class="field-group">
+            <label class="field-label">Prénom</label>
+            <input
+              :value="form.first_name"
+              type="text"
+              class="field-input"
+              :class="{ 'is-invalid': fieldErrors.first_name }"
+              placeholder="Jean"
+              maxlength="191"
+              @input="form.first_name = $event.target.value"
+            />
+            <span v-if="fieldErrors.first_name" class="field-error">
+              <i class="fas fa-exclamation-circle"></i> {{ fieldErrors.first_name }}
+            </span>
+          </div>
+          <div class="field-group">
+            <label class="field-label">Nom</label>
+            <input
+              :value="form.last_name"
+              type="text"
+              class="field-input"
+              :class="{ 'is-invalid': fieldErrors.last_name }"
+              placeholder="Dupont"
+              maxlength="191"
+              @input="form.last_name = $event.target.value"
+            />
+            <span v-if="fieldErrors.last_name" class="field-error">
+              <i class="fas fa-exclamation-circle"></i> {{ fieldErrors.last_name }}
+            </span>
           </div>
         </div>
-        <div class="col-12 col-sm-6 mt-3 mt-sm-0">
-          <label class="form-label">Mobile</label>
-          <soft-input
-            :value="form.mobile"
-            class="multisteps-form__input"
-            :class="{ 'is-invalid': fieldErrors.mobile }"
-            type="text"
-            placeholder="ex. +33 6 12 34 56 78"
-            maxlength="50"
-            @input="form.mobile = $event.target.value"
-          />
-          <div v-if="fieldErrors.mobile" class="invalid-feedback">
-            {{ fieldErrors.mobile }}
-          </div>
-        </div>
-      </div>
 
-      <!-- Poste/Rôle -->
-      <div class="row mt-3">
-        <div class="col-12">
-          <label class="form-label">Rôle</label>
-          <soft-input
+        <div class="field-group mt-field">
+          <label class="field-label">
+            <i class="fas fa-briefcase field-pfx-icon"></i>Rôle / Poste
+          </label>
+          <input
             :value="form.role"
-            class="multisteps-form__input"
-            :class="{ 'is-invalid': fieldErrors.role }"
             type="text"
-            placeholder="ex. Directeur Commercial"
+            class="field-input"
+            :class="{ 'is-invalid': fieldErrors.role }"
+            placeholder="ex. Directeur Commercial, Responsable RH..."
             maxlength="191"
             @input="form.role = $event.target.value"
           />
-          <div v-if="fieldErrors.role" class="invalid-feedback">
-            {{ fieldErrors.role }}
+          <span v-if="fieldErrors.role" class="field-error">
+            <i class="fas fa-exclamation-circle"></i> {{ fieldErrors.role }}
+          </span>
+        </div>
+      </div>
+
+      <div class="section-divider"></div>
+
+      <!-- ── SECTION 3: Coordonnées ── -->
+      <div class="form-section">
+        <div class="section-label">
+          <span>Coordonnées</span>
+        </div>
+
+        <div class="field-group">
+          <label class="field-label">
+            <i class="fas fa-envelope field-pfx-icon"></i>Email
+          </label>
+          <input
+            :value="form.email"
+            type="email"
+            class="field-input"
+            :class="{ 'is-invalid': fieldErrors.email }"
+            placeholder="jean.dupont@entreprise.com"
+            maxlength="191"
+            @input="form.email = $event.target.value"
+          />
+          <span v-if="fieldErrors.email" class="field-error">
+            <i class="fas fa-exclamation-circle"></i> {{ fieldErrors.email }}
+          </span>
+        </div>
+
+        <div class="two-col mt-field">
+          <div class="field-group">
+            <label class="field-label">
+              <i class="fas fa-phone field-pfx-icon"></i>Téléphone
+            </label>
+            <input
+              :value="form.phone"
+              type="text"
+              class="field-input"
+              :class="{ 'is-invalid': fieldErrors.phone }"
+              placeholder="+33 1 23 45 67 89"
+              maxlength="50"
+              @input="form.phone = $event.target.value"
+            />
+            <span v-if="fieldErrors.phone" class="field-error">
+              <i class="fas fa-exclamation-circle"></i> {{ fieldErrors.phone }}
+            </span>
+          </div>
+          <div class="field-group">
+            <label class="field-label">
+              <i class="fas fa-mobile-alt field-pfx-icon"></i>Mobile
+            </label>
+            <input
+              :value="form.mobile"
+              type="text"
+              class="field-input"
+              :class="{ 'is-invalid': fieldErrors.mobile }"
+              placeholder="+33 6 12 34 56 78"
+              maxlength="50"
+              @input="form.mobile = $event.target.value"
+            />
+            <span v-if="fieldErrors.mobile" class="field-error">
+              <i class="fas fa-exclamation-circle"></i> {{ fieldErrors.mobile }}
+            </span>
           </div>
         </div>
       </div>
 
-      <!-- Notes -->
-      <div class="row mt-3">
-        <div class="col-12">
-          <label class="form-label">Notes</label>
+      <div class="section-divider"></div>
+
+      <!-- ── SECTION 4: Notes ── -->
+      <div class="form-section">
+        <div class="section-label">
+          <span>Notes</span>
+        </div>
+        <div class="field-group">
+          <label class="field-label">
+            <i class="fas fa-sticky-note field-pfx-icon"></i>Observations
+          </label>
           <textarea
             :value="form.notes"
-            class="form-control multisteps-form__input"
+            class="field-textarea"
             rows="3"
-            placeholder="Notes supplémentaires sur le contact..."
+            placeholder="Informations complémentaires sur ce contact..."
             maxlength="1000"
             @input="form.notes = $event.target.value"
           ></textarea>
+          <span class="char-count">{{ (form.notes || '').length }}/1000</span>
         </div>
       </div>
 
-      <!-- Validation message -->
-      <div
-        v-if="showValidationWarning"
-        class="alert alert-warning mt-3"
-        role="alert"
-      >
-        <i class="ni ni-notification-70 me-2"></i>
-        <strong>Attention :</strong> Au moins un champ (prénom, nom, email ou
-        téléphone) doit être renseigné.
-      </div>
+      <!-- Validation Warning -->
+      <transition name="banner-fade">
+        <div v-if="showValidationWarning && form.client_id" class="warn-banner">
+          <i class="fas fa-exclamation-triangle warn-icon"></i>
+          <span>Renseignez au moins un champ parmi : prénom, nom, email ou téléphone.</span>
+        </div>
+      </transition>
 
-      <!-- Boutons -->
-      <div class="button-row d-flex mt-4">
-        <soft-button
-          type="button"
-          color="secondary"
-          variant="outline"
-          class="me-2 mb-0"
-          @click="resetForm"
-        >
-          Réinitialiser
-        </soft-button>
-        <soft-button
-          type="button"
-          color="dark"
-          variant="gradient"
-          class="ms-auto mb-0"
-          :disabled="props.loading || !isFormValid"
-          @click="submitForm"
-        >
-          <span
-            v-if="props.loading"
-            class="spinner-border spinner-border-sm me-2"
-            role="status"
-          ></span>
-          {{ props.loading ? "Création..." : "Créer le contact" }}
-        </soft-button>
-      </div>
     </div>
+
+    <!-- Footer Actions -->
+    <div class="form-footer">
+      <button type="button" class="btn-reset" @click="resetForm">
+        <i class="fas fa-undo me-2"></i>Réinitialiser
+      </button>
+      <button
+        type="button"
+        class="btn-submit"
+        :disabled="props.loading || !isFormValid"
+        @click="submitForm"
+      >
+        <span v-if="props.loading" class="spinner-border spinner-border-sm me-2" role="status"></span>
+        <i v-else class="fas fa-user-check me-2"></i>
+        {{ props.loading ? "Création en cours…" : "Créer le contact" }}
+      </button>
+    </div>
+
   </div>
 </template>
 
 <script setup>
 import { ref, defineProps, defineEmits, watch, computed } from "vue";
-import SoftInput from "@/components/SoftInput.vue";
-import SoftButton from "@/components/SoftButton.vue";
 
-// Props
 const props = defineProps({
-  loading: {
-    type: Boolean,
-    default: false,
-  },
-  validationErrors: {
-    type: Object,
-    default: () => ({}),
-  },
-  success: {
-    type: Boolean,
-    default: false,
-  },
-  searchResults: {
-    type: Array,
-    default: () => [],
-  },
+  loading: { type: Boolean, default: false },
+  validationErrors: { type: Object, default: () => ({}) },
+  success: { type: Boolean, default: false },
+  searchResults: { type: Array, default: () => [] },
 });
 
-// Emits
 const emit = defineEmits(["createContact", "searchClient", "clientSelected"]);
 
-// Reactive data
 const errors = ref([]);
 const fieldErrors = ref({});
 const searchQuery = ref("");
@@ -336,96 +301,36 @@ const showDropdown = ref(false);
 const searchTimeout = ref(null);
 
 const form = ref({
-  client_id: null,
-  first_name: "",
-  last_name: "",
-  email: "",
-  phone: "",
-  mobile: "",
-  role: "",
-  notes: "",
+  client_id: null, first_name: "", last_name: "",
+  email: "", phone: "", mobile: "", role: "", notes: "",
 });
 
-// Computed properties
-const showValidationWarning = computed(() => {
-  return (
-    !form.value.first_name &&
-    !form.value.last_name &&
-    !form.value.email &&
-    !form.value.phone &&
-    !form.value.mobile
-  );
-});
-
-const isFormValid = computed(() => {
-  // Client est obligatoire
-  if (!form.value.client_id) return false;
-
-  // Au moins un champ de contact doit être rempli
-  if (showValidationWarning.value) return false;
-
-  return true;
-});
-
-// Watch for validation errors from parent
-watch(
-  () => props.validationErrors,
-  (newErrors) => {
-    fieldErrors.value = { ...newErrors };
-  },
-  { deep: true }
+const showValidationWarning = computed(() =>
+  !form.value.first_name && !form.value.last_name &&
+  !form.value.email && !form.value.phone && !form.value.mobile
 );
 
-// Watch for success from parent
-watch(
-  () => props.success,
-  (newSuccess) => {
-    if (newSuccess) {
-      resetForm();
-    }
-  }
+const isFormValid = computed(() =>
+  !!form.value.client_id && !showValidationWarning.value
 );
 
-// Methods
+watch(() => props.validationErrors, (v) => { fieldErrors.value = { ...v }; }, { deep: true });
+watch(() => props.success, (v) => { if (v) resetForm(); });
+
 const handleSearchInput = (value) => {
   searchQuery.value = value;
-
-  // Clear previous timeout
-  if (searchTimeout.value) {
-    clearTimeout(searchTimeout.value);
-  }
-
-  // If empty query, clear results and hide dropdown
-  if (!value.trim()) {
-    showDropdown.value = false;
-    return;
-  }
-
-  // Show dropdown
+  if (searchTimeout.value) clearTimeout(searchTimeout.value);
+  if (!value.trim()) { showDropdown.value = false; return; }
   showDropdown.value = true;
-
-  // Set new timeout for debounce (300ms)
-  searchTimeout.value = setTimeout(() => {
-    // Emit search event to parent
-    emit("searchClient", value);
-  }, 300);
+  searchTimeout.value = setTimeout(() => emit("searchClient", value), 300);
 };
 
 const selectClient = (client) => {
-  // Store the selected client
   selectedClient.value = client;
   form.value.client_id = client.id;
-
-  // Clear search and dropdown
   searchQuery.value = "";
   showDropdown.value = false;
-
-  // Clear client_id error if any
-  if (fieldErrors.value.client_id) {
-    delete fieldErrors.value.client_id;
-  }
-
-  // Emit client selection
+  if (fieldErrors.value.client_id) delete fieldErrors.value.client_id;
   emit("clientSelected", client.id);
 };
 
@@ -434,190 +339,534 @@ const clearSelection = () => {
   form.value.client_id = null;
   searchQuery.value = "";
   showDropdown.value = false;
-
-  // Emit that client selection was cleared
   emit("clientSelected", null);
 };
 
-const onInputBlur = () => {
-  // Petit délai pour permettre le clic sur les éléments de la liste
-  setTimeout(() => {
-    showDropdown.value = false;
-  }, 200);
-};
+const onInputBlur = () => setTimeout(() => { showDropdown.value = false; }, 200);
+
+const isValidEmail = (e) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e);
 
 const validateForm = () => {
-  const errors = {};
-
-  // Validation client_id
-  if (!form.value.client_id) {
-    errors.client_id = "Le client est obligatoire.";
-  }
-
-  // Validation des longueurs max
-  if (form.value.first_name && form.value.first_name.length > 191) {
-    errors.first_name = "Le prénom ne peut pas dépasser 191 caractères.";
-  }
-
-  if (form.value.last_name && form.value.last_name.length > 191) {
-    errors.last_name = "Le nom ne peut pas dépasser 191 caractères.";
-  }
-
-  if (form.value.email && form.value.email.length > 191) {
-    errors.email = "L'adresse email ne peut pas dépasser 191 caractères.";
-  }
-
-  if (form.value.phone && form.value.phone.length > 50) {
-    errors.phone = "Le téléphone ne peut pas dépasser 50 caractères.";
-  }
-
-  if (form.value.mobile && form.value.mobile.length > 50) {
-    errors.mobile = "Le mobile ne peut pas dépasser 50 caractères.";
-  }
-
-  if (form.value.role && form.value.role.length > 191) {
-    errors.role = "Le rôle ne peut pas dépasser 191 caractères.";
-  }
-
-  // Validation email format
-  if (form.value.email && !isValidEmail(form.value.email)) {
-    errors.email = "L'adresse email doit être valide.";
-  }
-
-  // Validation règle générale (au moins un champ rempli)
-  if (
-    !form.value.first_name &&
-    !form.value.last_name &&
-    !form.value.email &&
-    !form.value.phone &&
-    !form.value.mobile
-  ) {
-    errors.general =
-      "Au moins un champ (prénom, nom, email ou téléphone) doit être renseigné.";
-  }
-
-  return errors;
+  const errs = {};
+  if (!form.value.client_id) errs.client_id = "Le client est obligatoire.";
+  if (form.value.email && !isValidEmail(form.value.email)) errs.email = "Adresse email invalide.";
+  if (showValidationWarning.value) errs.general = "Au moins un champ (prénom, nom, email ou téléphone) doit être renseigné.";
+  return errs;
 };
 
-const isValidEmail = (email) => {
-  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-  return emailRegex.test(email);
-};
-
-const submitForm = async () => {
-  // Clear errors before submitting
+const submitForm = () => {
   fieldErrors.value = {};
-  errors.value = [];
-
-  // Validate form locally first
   const localErrors = validateForm();
-  if (Object.keys(localErrors).length > 0) {
-    fieldErrors.value = localErrors;
-    return;
-  }
-
-  // Clean up form data: convert empty strings to null
-  const cleanedForm = {};
-  const formData = form.value;
-
-  for (const [key, value] of Object.entries(formData)) {
-    if (value === "" || value === null || value === undefined) {
-      cleanedForm[key] = null;
-    } else {
-      cleanedForm[key] = value;
-    }
-  }
-
-  console.log("Form data being emitted:", cleanedForm);
-
-  // Emit the cleaned form data to parent
-  emit("createContact", cleanedForm);
+  if (Object.keys(localErrors).length > 0) { fieldErrors.value = localErrors; return; }
+  const cleaned = Object.fromEntries(
+    Object.entries(form.value).map(([k, v]) => [k, v === "" ? null : v])
+  );
+  emit("createContact", cleaned);
 };
 
 const resetForm = () => {
-  form.value = {
-    client_id: null,
-    first_name: "",
-    last_name: "",
-    email: "",
-    phone: "",
-    mobile: "",
-    role: "",
-    notes: "",
-  };
+  form.value = { client_id: null, first_name: "", last_name: "", email: "", phone: "", mobile: "", role: "", notes: "" };
   selectedClient.value = null;
   searchQuery.value = "";
   showDropdown.value = false;
-  clearErrors();
-};
-
-const clearErrors = () => {
-  errors.value = [];
   fieldErrors.value = {};
+  errors.value = [];
 };
 </script>
 
 <style scoped>
-.search-container {
-  z-index: 1000;
+/* ─── Root ─── */
+.contact-form-root {
+  background: #fff;
+  border-radius: 16px;
+  border: 1px solid #e5e7eb;
+  box-shadow: 0 4px 24px rgba(0,0,0,0.07);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
 
-.dropdown-results {
-  top: 100%;
-  left: 0;
-  z-index: 1050;
-  max-height: 300px;
-  overflow-y: auto;
-  background: white;
-  border: 1px solid #dee2e6;
-  border-radius: 0.375rem;
-  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
-  margin-top: 2px;
+/* ─── Header ─── */
+.form-header {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 20px 24px 16px;
+  border-bottom: 1px solid #f0f2f5;
+  background: linear-gradient(135deg, #1a2e4a 0%, #2d4a6e 100%);
 }
 
-.list-group-item {
-  border: none;
-  border-bottom: 1px solid #f8f9fa;
-  padding: 0.75rem 1rem;
-  cursor: pointer;
+.header-icon-wrap {
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
+  background: rgba(255,255,255,0.15);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  color: #fff;
+  flex-shrink: 0;
 }
 
-.list-group-item:hover {
-  background-color: #f8f9fa;
+.form-title {
+  color: #fff;
+  font-size: 1rem;
+  font-weight: 700;
+  margin: 0 0 2px;
 }
 
-.list-group-item:last-child {
-  border-bottom: none;
+.form-subtitle {
+  color: rgba(255,255,255,0.6);
+  font-size: 0.78rem;
+  margin: 0;
 }
 
-.selected-contact {
-  border: 1px solid #2dce89;
+/* ─── Banners ─── */
+.status-banner {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 24px;
+  font-size: 0.84rem;
 }
 
-.form-label {
+.success-banner {
+  background: #f0fdf4;
+  border-bottom: 1px solid #bbf7d0;
+  color: #166534;
+}
+
+.error-banner {
+  background: #fff1f2;
+  border-bottom: 1px solid #fecdd3;
+  color: #9f1239;
+}
+
+.banner-icon { font-size: 1rem; flex-shrink: 0; }
+
+.warn-banner {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  background: #fffbeb;
+  border: 1px solid #fde68a;
+  border-radius: 9px;
+  padding: 10px 14px;
+  font-size: 0.8rem;
+  color: #92400e;
+  margin: 0 24px;
+}
+
+.warn-icon { color: #f59e0b; flex-shrink: 0; margin-top: 1px; }
+
+/* ─── Body ─── */
+.form-body {
+  flex: 1;
+  padding: 4px 0;
+}
+
+/* ─── Sections ─── */
+.form-section {
+  padding: 18px 24px;
+}
+
+.section-divider {
+  height: 1px;
+  background: #f0f2f5;
+  margin: 0 24px;
+}
+
+.section-label {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  font-size: 0.72rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  color: #8c9ab0;
+  margin-bottom: 14px;
+}
+
+.section-num {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #e8eef7;
+  color: #2d4a6e;
+  font-size: 0.68rem;
+  font-weight: 800;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+/* ─── Grid ─── */
+.two-col {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+@media (max-width: 540px) {
+  .two-col { grid-template-columns: 1fr; }
+}
+
+.mt-field { margin-top: 12px; }
+
+/* ─── Field Group ─── */
+.field-group {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  position: relative;
+}
+
+.field-label {
+  font-size: 0.79rem;
   font-weight: 600;
-  margin-bottom: 0.5rem;
+  color: #374151;
+  display: flex;
+  align-items: center;
+  gap: 5px;
 }
 
-.text-danger {
-  color: #f5365c;
+.field-pfx-icon {
+  font-size: 0.72rem;
+  color: #9ca3af;
+  width: 14px;
+  text-align: center;
 }
 
-.invalid-feedback {
-  display: block;
+.req { color: #ef4444; }
+
+/* ─── Inputs ─── */
+.field-input {
+  border: 1.5px solid #e5e7eb;
+  border-radius: 9px;
+  padding: 9px 12px;
+  font-size: 0.875rem;
+  color: #111827;
+  outline: none;
+  width: 100%;
+  background: #fff;
+  transition: border-color 0.2s, box-shadow 0.2s;
+  font-family: inherit;
+}
+.field-input:focus {
+  border-color: #2d4a6e;
+  box-shadow: 0 0 0 3px rgba(45,74,110,0.08);
+}
+.field-input.is-invalid { border-color: #ef4444; }
+.field-input::placeholder { color: #9ca3af; }
+
+.field-textarea {
+  border: 1.5px solid #e5e7eb;
+  border-radius: 9px;
+  padding: 9px 12px;
+  font-size: 0.875rem;
+  color: #111827;
+  outline: none;
+  width: 100%;
+  background: #fff;
+  resize: vertical;
+  min-height: 80px;
+  transition: border-color 0.2s, box-shadow 0.2s;
+  font-family: inherit;
+}
+.field-textarea:focus {
+  border-color: #2d4a6e;
+  box-shadow: 0 0 0 3px rgba(45,74,110,0.08);
+}
+.field-textarea::placeholder { color: #9ca3af; }
+
+.char-count {
+  font-size: 0.68rem;
+  color: #9ca3af;
+  text-align: right;
+  margin-top: -2px;
 }
 
-.spinner-border-sm {
-  width: 1rem;
-  height: 1rem;
+/* ─── Field Error ─── */
+.field-error {
+  font-size: 0.74rem;
+  color: #ef4444;
+  display: flex;
+  align-items: center;
+  gap: 4px;
 }
 
-.alert {
-  border-radius: 0.75rem;
+.hint-text {
+  font-size: 0.73rem;
+  color: #9ca3af;
+  margin: 0;
 }
 
-.btn:disabled {
-  opacity: 0.6;
+/* ─── Search ─── */
+.search-wrap {
+  position: relative;
+  display: flex;
+  align-items: center;
+  border: 1.5px solid #e5e7eb;
+  border-radius: 9px;
+  background: #fff;
+  overflow: visible;
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+.search-wrap:focus-within {
+  border-color: #2d4a6e;
+  box-shadow: 0 0 0 3px rgba(45,74,110,0.08);
+}
+.search-wrap.has-error { border-color: #ef4444; }
+
+.search-pfx {
+  padding: 0 10px;
+  color: #9ca3af;
+  font-size: 0.8rem;
+  flex-shrink: 0;
+}
+
+.search-input {
+  flex: 1;
+  border: none !important;
+  border-radius: 0 !important;
+  box-shadow: none !important;
+  padding: 9px 4px !important;
+  min-width: 0;
+}
+.search-input:focus { box-shadow: none !important; border: none !important; }
+
+.search-loader { padding: 0 10px; flex-shrink: 0; }
+
+/* ─── Dropdown ─── */
+.search-dropdown {
+  position: absolute;
+  top: calc(100% + 5px);
+  left: 0;
+  right: 0;
+  background: #fff;
+  border: 1.5px solid #e5e7eb;
+  border-radius: 10px;
+  box-shadow: 0 12px 32px rgba(0,0,0,0.12);
+  z-index: 1050;
+  overflow: hidden;
+  max-height: 260px;
+  overflow-y: auto;
+}
+
+.search-dropdown::-webkit-scrollbar { width: 4px; }
+.search-dropdown::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 4px; }
+
+.dropdown-row {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  text-align: left;
+  border-bottom: 1px solid #f9fafb;
+  transition: background 0.15s;
+}
+.dropdown-row:last-child { border-bottom: none; }
+.dropdown-row:hover { background: #f5f8ff; }
+.dropdown-row:hover .dr-arrow { opacity: 1; transform: translateX(0); }
+
+.dr-avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 9px;
+  background: linear-gradient(135deg, #1a2e4a, #2d4a6e);
+  color: #fff;
+  font-size: 0.8rem;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  text-transform: uppercase;
+}
+
+.dr-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+}
+
+.dr-name {
+  font-size: 0.84rem;
+  font-weight: 600;
+  color: #111827;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.dr-meta {
+  font-size: 0.72rem;
+  color: #9ca3af;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.dr-arrow {
+  font-size: 0.72rem;
+  color: #2d4a6e;
+  opacity: 0;
+  transform: translateX(-4px);
+  transition: opacity 0.15s, transform 0.15s;
+  flex-shrink: 0;
+}
+
+.dropdown-empty {
+  padding: 20px;
+  text-align: center;
+  color: #9ca3af;
+  font-size: 0.82rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+
+.empty-icon { font-size: 1.4rem; opacity: 0.4; }
+
+/* ─── Selected Client Card ─── */
+.selected-client-card {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background: #f0fdf4;
+  border: 1.5px solid #bbf7d0;
+  border-radius: 10px;
+  padding: 12px 14px;
+}
+
+.sc-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+  background: linear-gradient(135deg, #059669, #10b981);
+  color: #fff;
+  font-size: 1rem;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  text-transform: uppercase;
+}
+
+.sc-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+}
+
+.sc-label {
+  font-size: 0.68rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: #059669;
+}
+
+.sc-name {
+  font-size: 0.88rem;
+  font-weight: 700;
+  color: #064e3b;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sc-meta {
+  font-size: 0.73rem;
+  color: #6b7280;
+}
+
+.sc-change-btn {
+  background: #fff;
+  border: 1.5px solid #bbf7d0;
+  border-radius: 8px;
+  color: #059669;
+  font-size: 0.75rem;
+  font-weight: 600;
+  padding: 5px 12px;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: all 0.15s;
+  white-space: nowrap;
+}
+.sc-change-btn:hover { background: #dcfce7; border-color: #86efac; }
+
+/* ─── Footer ─── */
+.form-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 24px;
+  background: #f8fafc;
+  border-top: 1px solid #f0f2f5;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.btn-reset {
+  font-size: 0.82rem;
+  color: #6b7280;
+  background: #fff;
+  border: 1.5px solid #e5e7eb;
+  border-radius: 9px;
+  padding: 8px 16px;
+  cursor: pointer;
+  font-weight: 500;
+  transition: all 0.15s;
+}
+.btn-reset:hover { background: #f3f4f6; border-color: #d1d5db; }
+
+.btn-submit {
+  font-size: 0.875rem;
+  color: #fff;
+  background: linear-gradient(135deg, #1a2e4a 0%, #2d4a6e 100%);
+  border: none;
+  border-radius: 9px;
+  padding: 9px 22px;
+  cursor: pointer;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  transition: all 0.2s;
+  box-shadow: 0 2px 8px rgba(45,74,110,0.25);
+  margin-left: auto;
+}
+.btn-submit:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 14px rgba(45,74,110,0.35);
+}
+.btn-submit:disabled {
+  opacity: 0.5;
   cursor: not-allowed;
+  transform: none;
 }
-</style>
+
+/* ─── Animations ─── */
+.banner-fade-enter-active,
+.banner-fade-leave-active { transition: opacity 0.22s ease, transform 0.22s ease; }
+.banner-fade-enter-from { opacity: 0; transform: translateY(-6px); }
+.banner-fade-leave-to { opacity: 0; transform: translateY(-4px); }
+
+.dropdown-pop-enter-active,
+.dropdown-pop-leave-active { transition: opacity 0.18s ease, transform 0.18s ease; }
+.dropdown-pop-enter-from { opacity: 0; transform: translateY(-8px) scale(0.97); }
+.dropdown-pop-leave-to { opacity: 0; transform: translateY(-4px) scale(0.98); }
+</style>
\ No newline at end of file