crm/apps/web/src/components/dashboard/HomeRecentActivities.vue

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

defineProps<{
  activities: ActivityDto[];
  formatWhen: (value: string | null) => string;
}>();

const typeLabel: Record<string, string> = {
  call: 'تماس',
  meeting: 'جلسه',
  task: 'وظیفه',
  note: 'یادداشت',
};

function activityStatus(act: ActivityDto) {
  if (act.status === 'done') return { label: 'انجام شد', tone: 'done' };
  if (act.dueAt && new Date(act.dueAt) < new Date()) {
    return { label: 'عقب‌افتاده', tone: 'late' };
  }
  return { label: 'در انتظار پاسخ', tone: 'pending' };
}

function activityIcon(type: string) {
  if (type === 'call') return 'phone' as const;
  if (type === 'meeting') return 'calendar' as const;
  if (type === 'task') return 'check' as const;
  return 'mail' as const;
}
</script>

<template>
  <article class="panel">
    <header class="panel-head">
      <h2>فعالیت‌های اخیر</h2>
      <RouterLink :to="{ name: 'activities' }">مشاهده همه</RouterLink>
    </header>

    <ul v-if="activities.length" class="activity-list">
      <li v-for="act in activities" :key="act.id">
        <span class="act-icon">
          <UiIcon :name="activityIcon(act.type)" :size="16" />
        </span>
        <div class="act-body">
          <strong>{{ act.title }}</strong>
          <span>
            {{ typeLabel[act.type] ?? act.type }} ·
            {{ formatWhen(act.dueAt || act.createdAt) }}
          </span>
        </div>
        <span class="status-pill" :class="activityStatus(act).tone">
          {{ activityStatus(act).label }}
        </span>
      </li>
    </ul>
    <p v-else class="muted">فعالیتی ثبت نشده.</p>
  </article>
</template>

<style scoped>
.panel {
  background: #fff;
  border-radius: 22px;
  padding: 1.05rem 1.1rem;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
  border: 1px solid #eef2f7;
  min-width: 0;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

h2 {
  margin: 0;
  font-size: 0.98rem;
}

a {
  color: #14b8a6;
  font-size: 0.82rem;
  font-weight: 600;
}

.activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.activity-list li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.act-icon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: #ecfdf8;
  color: #14b8a6;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.act-body {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 0.15rem;
}

.act-body strong {
  font-size: 0.88rem;
}

.act-body span {
  color: #94a3b8;
  font-size: 0.74rem;
}

.status-pill {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.24rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
}

.status-pill.done {
  background: #dcfce7;
  color: #166534;
}

.status-pill.pending {
  background: #dbeafe;
  color: #1d4ed8;
}

.status-pill.late {
  background: #fee2e2;
  color: #b91c1c;
}

.muted {
  color: #94a3b8;
}
</style>