New-Thanasoft/thanasoft-front/src/components/Organism/Interventions/AddInterventionPresentation.vue

<template>
  <client-detail-template>
    <template #button-return>
      <div class="col-12">
        <router-link
          to="/interventions"
          class="btn btn-outline-secondary btn-sm mb-3"
        >
          <i class="fas fa-arrow-left me-2"></i>Retour aux interventions
        </router-link>
      </div>
    </template>

    <template #client-detail-sidebar>
      <div class="card position-sticky top-1 intervention-sidebar-card">
        <div class="card-body text-center p-4">
          <div class="avatar avatar-xxl position-relative mx-auto mb-3">
            <div
              class="intervention-avatar w-100 border-radius-xl shadow-sm d-flex align-items-center justify-content-center"
            >
              <i class="fas fa-notes-medical text-white text-xl"></i>
            </div>
          </div>

          <soft-badge color="success" variant="gradient" size="sm" class="mb-3">
            Nouvelle intervention
          </soft-badge>

          <h5 class="mb-1">Planifier une intervention</h5>
          <p class="text-sm text-muted mb-0">
            Préparez une fiche claire, liée au client et au défunt, dans le
            style du dashboard.
          </p>
        </div>
      </div>

      <div class="card intervention-sidebar-card mt-4">
        <div class="card-header pb-0">
          <h6 class="mb-1">Repères</h6>
          <p class="text-sm text-muted mb-0">
            Les éléments ci-dessous suffisent pour démarrer correctement.
          </p>
        </div>
        <div class="card-body pt-3">
          <div class="check-item">
            <span class="check-dot bg-gradient-success"></span>
            <span class="text-sm">Associer le bon client</span>
          </div>
          <div class="check-item">
            <span class="check-dot bg-gradient-info"></span>
            <span class="text-sm">Définir le type d'intervention</span>
          </div>
          <div class="check-item">
            <span class="check-dot bg-gradient-dark"></span>
            <span class="text-sm">Renseigner la planification si connue</span>
          </div>
        </div>
      </div>
    </template>

    <template #client-detail-content>
      <div class="card intervention-hero-card mb-4">
        <div class="card-body p-4">
          <div
            class="d-flex flex-column flex-lg-row align-items-lg-center justify-content-between gap-3"
          >
            <div>
              <p
                class="text-sm text-uppercase text-success font-weight-bold mb-2"
              >
                Dashboard intervention
              </p>
              <h4 class="mb-1">Créer une nouvelle intervention</h4>
              <p class="text-sm text-muted mb-0">
                Une mise en page plus propre, cohérente avec le reste de
                l'application, centrée sur les informations métier utiles.
              </p>
            </div>

            <div class="hero-pill-group">
              <span class="hero-pill">
                <i class="fas fa-user me-2 text-success"></i>Client
              </span>
              <span class="hero-pill">
                <i class="fas fa-cross me-2 text-info"></i>Défunt
              </span>
              <span class="hero-pill">
                <i class="fas fa-calendar-alt me-2 text-dark"></i>Planning
              </span>
            </div>
          </div>
        </div>
      </div>

      <intervention-form
        :loading="loading"
        :validation-errors="validationErrors"
        :success="success"
        :deceased-list="deceasedList"
        :deceased-loading="deceasedLoading"
        :client-list="clientList"
        :client-loading="clientLoading"
        :search-clients="searchClients"
        :on-client-select="onClientSelect"
        :search-deceased="searchDeceased"
        :on-deceased-select="onDeceasedSelect"
        @create-intervention="handleCreateIntervention"
      />
    </template>
  </client-detail-template>
</template>
<script setup>
import ClientDetailTemplate from "@/components/templates/CRM/ClientDetailTemplate.vue";
import InterventionForm from "@/components/molecules/Interventions/InterventionForm.vue";
import SoftBadge from "@/components/SoftBadge.vue";
import { defineProps, defineEmits } from "vue";
import { RouterLink } from "vue-router";

defineProps({
  loading: {
    type: Boolean,
    default: false,
  },
  validationErrors: {
    type: Object,
    default: () => ({}),
  },
  success: {
    type: Boolean,
    default: false,
  },
  deceasedList: {
    type: Array,
    default: () => [],
  },
  deceasedLoading: {
    type: Boolean,
    default: false,
  },
  clientList: {
    type: Array,
    default: () => [],
  },
  clientLoading: {
    type: Boolean,
    default: false,
  },
  searchClients: {
    type: Function,
    required: true,
  },
  onClientSelect: {
    type: Function,
    required: true,
  },
  searchDeceased: {
    type: Function,
    required: true,
  },
  onDeceasedSelect: {
    type: Function,
    required: true,
  },
});

const emit = defineEmits(["createIntervention"]);

const handleCreateIntervention = (data) => {
  emit("createIntervention", data);
};
</script>

<style scoped>
.position-sticky {
  top: 1rem;
}

.intervention-sidebar-card,
.intervention-hero-card {
  border: 0;
  box-shadow: 0 0 2rem 0 rgba(136, 152, 170, 0.15);
}

.intervention-avatar {
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, #17c1e8 0%, #3a416f 100%);
}

.check-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.check-item + .check-item {
  margin-top: 0.9rem;
}

.check-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
  flex: 0 0 auto;
}

.hero-pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  background: rgba(248, 249, 250, 0.95);
  color: #344767;
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}
</style>