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

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

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

type Row = {
  id: string;
  title: string;
  when: string;
  type: string;
  tone: 'done' | 'pending' | 'held' | 'late';
  label: string;
};

const demoRows: Row[] = [
  {
    id: 'd1',
    title: 'تماس با شرکت آریا',
    when: 'امروز، ۱۰:۴۵',
    type: 'call',
    tone: 'done',
    label: 'انجام شد',
  },
  {
    id: 'd2',
    title: 'ارسال پیشنهاد قیمت به پارسیان',
    when: 'دیروز، ۱۴:۴۰',
    type: 'mail',
    tone: 'pending',
    label: 'در انتظار پاسخ',
  },
  {
    id: 'd3',
    title: 'جلسه با مشتری جدید',
    when: 'پریروز، ۱۱:۰۰',
    type: 'meeting',
    tone: 'held',
    label: 'برگزار شد',
  },
];

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

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

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;
}

const rows = computed<Row[]>(() => {
  if (!props.activities.length) return demoRows;
  return props.activities.slice(0, 3).map((act) => {
    const st = activityStatus(act);
    return {
      id: act.id,
      title: act.title,
      when: `${typeLabel[act.type] ?? act.type} · ${props.formatWhen(act.dueAt || act.createdAt)}`,
      type: act.type,
      tone: st.tone,
      label: st.label,
    };
  });
});
</script>

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

    <ul class="activity-list">
      <li v-for="act in rows" :key="act.id">
        <span class="act-icon">
          <UiIcon :name="activityIcon(act.type)" :size="16" />
        </span>
        <div class="act-body">
          <strong>{{ act.title }}</strong>
          <span>{{ act.when }}</span>
        </div>
        <span class="status-pill" :class="act.tone">{{ act.label }}</span>
      </li>
    </ul>
  </article>
</template>

<style scoped>
.panel {
  background: #fff;
  border-radius: var(--radius);
  padding: 1rem 1.05rem;
  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.95rem;
}

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

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

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

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

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

.act-body strong {
  font-size: 0.84rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.status-pill {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.22rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
}

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

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

.status-pill.late {
  background: #fee2e2;
  color: #b91c1c;
}
</style>