Componentize dashboard middle section and add Mento brand assets.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-09-01 16:05:29 +03:30
parent da6c494fcb
commit 57fa6c8d12
15 changed files with 1491 additions and 1015 deletions
@@ -0,0 +1,158 @@
+<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>