CRM_Montzar/apps/web/src/components/person-profile/ProfileEmptyState.vue

<script setup lang="ts">
import { RouterLink } from 'vue-router';
import type { RouteLocationRaw } from 'vue-router';
import UiIcon from '@/components/UiIcon.vue';

withDefaults(
  defineProps<{
    title?: string;
    description?: string;
    primaryLabel: string;
    primaryTo: RouteLocationRaw;
    secondaryLabel?: string;
    secondaryTo?: RouteLocationRaw;
    secondaryIcon?: 'calendar' | 'calendar-plus' | 'user-plus';
  }>(),
  {
    title: 'هنوز اطلاعاتی ثبت نشده!',
    description:
      'برای شروع، اطلاعات اولیه مشتری را ثبت کنید یا اولین فعالیت خود را اضافه نمایید.',
    secondaryIcon: 'calendar-plus',
  },
);
</script>

<template>
  <div class="empty-state">
    <div class="art" aria-hidden="true">
      <span class="spark s1">✦</span>
      <span class="spark s2">✦</span>
      <span class="spark s3">✦</span>
      <svg viewBox="0 0 168 132" fill="none">
        <path
          d="M26 44c0-7.2 5.8-13 13-13h30l9 9h51c7.2 0 13 5.8 13 13v54c0 7.2-5.8 13-13 13H39c-7.2 0-13-5.8-13-13V44Z"
          fill="#D9E6E8"
        />
        <path
          d="M26 50h116v47c0 7.2-5.8 13-13 13H39c-7.2 0-13-5.8-13-13V50Z"
          fill="#E8F1F2"
        />
        <rect x="54" y="34" width="60" height="74" rx="11" fill="#fff" />
        <rect x="54" y="34" width="60" height="74" rx="11" stroke="#E2E8F0" />
        <circle cx="84" cy="60" r="12" fill="#C5D4DA" />
        <path
          d="M66 96c2.2-9.2 8.4-14 18-14s15.8 4.8 18 14"
          stroke="#C5D4DA"
          stroke-width="9"
          stroke-linecap="round"
        />
        <circle cx="122" cy="100" r="17" fill="#14b8a6" />
        <circle cx="122" cy="100" r="17" fill="#14b8a6" stroke="#fff" stroke-width="3" />
        <path d="M122 92.5v15M114.5 100h15" stroke="#fff" stroke-width="2.8" stroke-linecap="round" />
      </svg>
    </div>

    <h3>{{ title }}</h3>
    <p>{{ description }}</p>

    <div class="actions">
      <RouterLink class="btn-primary" :to="primaryTo">
        <span class="plus">+</span>
        {{ primaryLabel }}
      </RouterLink>
      <RouterLink v-if="secondaryLabel && secondaryTo" class="btn-secondary" :to="secondaryTo">
        <UiIcon :name="secondaryIcon" :size="18" />
        {{ secondaryLabel }}
      </RouterLink>
    </div>
  </div>
</template>

<style scoped>
.empty-state {
  display: grid;
  justify-items: center;
  align-content: center;
  text-align: center;
  width: 100%;
  padding: 1.4rem 0.8rem 0.6rem;
}

.art {
  position: relative;
  width: 168px;
  margin-bottom: 1.05rem;
}

.art svg {
  width: 168px;
  height: auto;
  display: block;
}

.spark {
  position: absolute;
  color: #5eead4;
  font-size: 0.68rem;
  line-height: 1;
}

.s1 {
  top: 6px;
  inset-inline-end: 8px;
}

.s2 {
  top: 44px;
  inset-inline-start: 2px;
  font-size: 0.52rem;
  color: #99f6e4;
}

.s3 {
  bottom: 20px;
  inset-inline-end: -2px;
  font-size: 0.46rem;
  color: #99f6e4;
}

h3 {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 600;
  color: #1e2937;
}

p {
  margin: 0.5rem 0 1.25rem;
  max-width: 21.5rem;
  color: #94a3b8;
  font-size: 0.84rem;
  line-height: 1.85;
}

.actions {
  display: grid;
  gap: 0.7rem;
  width: min(100%, 304px);
}

.btn-primary,
.btn-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: var(--control-h);
  height: var(--control-h);
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 0.9rem;
}

.btn-primary {
  background: #14b8a6;
  color: #fff;
  box-shadow: 0 8px 18px rgba(20, 184, 166, 0.26);
}

.plus {
  font-size: 1.2rem;
  line-height: 1;
  font-weight: 600;
}

.btn-secondary {
  background: #fff;
  color: #0f766e;
  border: 1px solid #e2e8f0;
}

@media (max-width: 599px) {
  .empty-state {
    padding: 1.2rem 0.2rem 0.4rem;
  }

  .art,
  .art svg {
    width: 152px;
  }

  h3 {
    font-size: 1.02rem;
  }

  p {
    font-size: 0.8rem;
    margin-bottom: 1.15rem;
  }

  .btn-primary,
  .btn-secondary {
    min-height: var(--control-h);
    height: var(--control-h);
    font-size: 0.86rem;
    border-radius: var(--radius);
  }
}
</style>