CRM_Montzar/apps/web/src/components/activities/RelatedActivitiesPanel.vue

<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import {
  Alert as AAlert,
  Avatar as AAvatar,
  Button as AButton,
  Card as ACard,
  Collapse as ACollapse,
  CollapsePanel as ACollapsePanel,
  Divider as ADivider,
  Empty as AEmpty,
  Flex as AFlex,
  Space as ASpace,
  Spin as ASpin,
  Tag as ATag,
  Typography,
  theme,
} from 'ant-design-vue';
import {
  CalendarOutlined,
  CheckCircleOutlined,
  ClockCircleOutlined,
  LeftOutlined,
  PhoneOutlined,
  PlusOutlined,
  ScheduleOutlined,
  TeamOutlined,
  WarningOutlined,
} from '@ant-design/icons-vue';
import type { ActivityDto, ActivityStatus, ActivityType, PaginatedResponse } from '@mento/shared';
import { ACTIVITY_TYPE_LABELS } from '@mento/shared';
import { api } from '@/lib/api';
import {
  calendarDaysBetween,
  formatClockFa,
  formatJalaliDay,
  startOfLocalDay,
  toFaDigits,
} from '@/lib/jalali';

const { Text: ATypographyText, Title: ATypographyTitle, Paragraph: ATypographyParagraph } =
  Typography;
const { token } = theme.useToken();

const STATUS_LABELS: Record<ActivityStatus, string> = {
  open: 'باز',
  done: 'انجام‌شده',
  canceled: 'لغو شده',
};

const TYPE_ICONS: Record<ActivityType, typeof PhoneOutlined> = {
  call: PhoneOutlined,
  meeting: TeamOutlined,
  task: CheckCircleOutlined,
  note: ScheduleOutlined,
};

type DueTone = 'overdue' | 'today' | 'soon' | 'later' | 'none';

const props = withDefaults(
  defineProps<{
    dealId: string;
    personId?: string | null;
    companyId?: string | null;
    dealTitle?: string;
  }>(),
  {
    personId: null,
    companyId: null,
    dealTitle: '',
  },
);

const router = useRouter();

const items = ref<ActivityDto[]>([]);
const loading = ref(false);
const error = ref('');
const closedKeys = ref<string[]>([]);

function sortByDue(a: ActivityDto, b: ActivityDto) {
  const ta = a.dueAt ? new Date(a.dueAt).getTime() : Number.POSITIVE_INFINITY;
  const tb = b.dueAt ? new Date(b.dueAt).getTime() : Number.POSITIVE_INFINITY;
  if (Number.isNaN(ta) && Number.isNaN(tb)) return 0;
  if (Number.isNaN(ta)) return 1;
  if (Number.isNaN(tb)) return -1;
  return ta - tb;
}

const planned = computed(() =>
  items.value.filter((a) => a.status === 'open').slice().sort(sortByDue),
);
const closed = computed(() =>
  items.value
    .filter((a) => a.status !== 'open')
    .slice()
    .sort((a, b) => {
      const ta = a.completedAt || a.updatedAt || a.dueAt || '';
      const tb = b.completedAt || b.updatedAt || b.dueAt || '';
      return tb.localeCompare(ta);
    }),
);

function dueTone(dueAt: string | null): DueTone {
  if (!dueAt) return 'none';
  const due = new Date(dueAt);
  if (Number.isNaN(due.getTime())) return 'none';
  const days = calendarDaysBetween(startOfLocalDay(), startOfLocalDay(due));
  if (days < 0) return 'overdue';
  if (days === 0) return 'today';
  if (days <= 2) return 'soon';
  return 'later';
}

function dueLabel(dueAt: string | null) {
  if (!dueAt) return 'بدون موعد';
  const d = new Date(dueAt);
  if (Number.isNaN(d.getTime())) return 'بدون موعد';
  const tone = dueTone(dueAt);
  if (tone === 'overdue') {
    const days = Math.abs(calendarDaysBetween(startOfLocalDay(), startOfLocalDay(d)));
    return days === 1 ? 'دیروز موعد داشت' : `${toFaDigits(days)} روز تأخیر`;
  }
  if (tone === 'today') return `امروز · ${formatClockFa(d)}`;
  return `${formatJalaliDay(d)} · ${formatClockFa(d)}`;
}

function dueTagColor(tone: DueTone) {
  if (tone === 'overdue') return 'error';
  if (tone === 'today') return 'warning';
  if (tone === 'soon') return 'processing';
  return 'default';
}

function rowStyle(tone: DueTone, closedRow = false) {
  const base = {
    width: '100%',
    padding: `${token.value.paddingSM}px ${token.value.padding}px`,
    borderRadius: `${token.value.borderRadiusLG}px`,
    border: `1px solid ${token.value.colorBorderSecondary}`,
    background: token.value.colorBgContainer,
    cursor: 'pointer' as const,
    opacity: closedRow ? 0.78 : 1,
  };
  if (closedRow) {
    return { ...base, background: token.value.colorFillAlter };
  }
  if (tone === 'overdue') {
    return {
      ...base,
      borderColor: token.value.colorErrorBorder,
      background: token.value.colorErrorBg,
    };
  }
  if (tone === 'today') {
    return {
      ...base,
      borderColor: token.value.colorWarningBorder,
      background: token.value.colorWarningBg,
    };
  }
  return base;
}

function avatarStyle(tone: DueTone) {
  if (tone === 'overdue') {
    return { backgroundColor: token.value.colorErrorBg, color: token.value.colorError };
  }
  if (tone === 'today') {
    return { backgroundColor: token.value.colorWarningBg, color: token.value.colorWarning };
  }
  return {
    backgroundColor: token.value.colorPrimaryBg,
    color: token.value.colorPrimary,
  };
}

function typeLabel(item: ActivityDto) {
  const type = item.type as ActivityType;
  return item.typeDef?.name || ACTIVITY_TYPE_LABELS[type];
}

function statusLabel(status: ActivityDto['status']) {
  return STATUS_LABELS[status as ActivityStatus];
}

function typeIcon(type: ActivityDto['type']) {
  return TYPE_ICONS[type as ActivityType];
}

function newActivityQuery() {
  const query: Record<string, string> = { dealId: props.dealId };
  if (props.personId) query.personId = props.personId;
  if (props.companyId) query.companyId = props.companyId;
  if (props.dealTitle.trim()) query.title = `پیگیری: ${props.dealTitle.trim()}`;
  return query;
}

function goCreate() {
  void router.push({ name: 'activity-new', query: newActivityQuery() });
}

function goDetail(id: string) {
  void router.push({ name: 'activity-detail', params: { id } });
}

async function load() {
  if (!props.dealId) return;
  loading.value = true;
  error.value = '';
  try {
    const { data } = await api.get<PaginatedResponse<ActivityDto>>('/activities', {
      params: { filter: 'all', dealId: props.dealId, limit: 50 },
    });
    items.value = data.items ?? [];
  } catch {
    error.value = 'بارگذاری فعالیت‌های معامله ممکن نشد.';
    items.value = [];
  } finally {
    loading.value = false;
  }
}

watch(
  () => props.dealId,
  () => {
    void load();
  },
  { immediate: true },
);
</script>

<template>
  <a-card :bordered="false">
    <template #title>
      <a-space :size="8">
        <CalendarOutlined :style="{ color: token.colorPrimary }" />
        <span>فعالیت‌های برنامه‌ریزی‌شده</span>
        <a-tag v-if="planned.length" color="processing" :bordered="false">
          {{ toFaDigits(planned.length) }} باز
        </a-tag>
      </a-space>
    </template>
    <template #extra>
      <a-button type="primary" @click="goCreate">
        <template #icon><PlusOutlined /></template>
        افزودن فعالیت
      </a-button>
    </template>

    <a-alert
      v-if="error"
      type="error"
      show-icon
      :message="error"
      :style="{ marginBottom: `${token.margin}px` }"
    />

    <a-spin :spinning="loading">
      <a-empty
        v-if="!loading && !planned.length"
        :image="AEmpty.PRESENTED_IMAGE_SIMPLE"
        :style="{ paddingBlock: `${token.paddingLG}px` }"
      >
        <template #description>
          <a-flex vertical align="center" :gap="token.marginXS">
            <a-typography-title :level="5" :style="{ margin: 0 }">
              هنوز فعالیتی برای این معامله نیست
            </a-typography-title>
            <a-typography-paragraph
              type="secondary"
              :style="{ margin: 0, maxWidth: '28rem', textAlign: 'center' }"
            >
              یک تماس، جلسه یا پیگیری زمان‌بندی کن تا معامله از دست نرود.
            </a-typography-paragraph>
          </a-flex>
        </template>
        <a-button type="primary" @click="goCreate">
          <template #icon><PlusOutlined /></template>
          افزودن اولین فعالیت
        </a-button>
      </a-empty>

      <a-flex v-else-if="planned.length" vertical :gap="token.marginSM">
        <a-flex
          v-for="item in planned"
          :key="item.id"
          align="center"
          justify="space-between"
          :gap="token.marginSM"
          wrap="wrap"
          :style="rowStyle(dueTone(item.dueAt))"
          role="button"
          tabindex="0"
          @click="goDetail(item.id)"
          @keydown.enter="goDetail(item.id)"
        >
          <a-flex align="center" :gap="token.marginSM" :style="{ minWidth: 0, flex: '1 1 220px' }">
            <a-avatar :size="40" :style="avatarStyle(dueTone(item.dueAt))">
              <template #icon>
                <WarningOutlined v-if="dueTone(item.dueAt) === 'overdue'" />
                <ClockCircleOutlined v-else-if="dueTone(item.dueAt) === 'today'" />
                <component :is="typeIcon(item.type)" v-else />
              </template>
            </a-avatar>
            <a-flex vertical :gap="4" :style="{ minWidth: 0 }">
              <a-typography-text strong :ellipsis="{ tooltip: item.title }">
                {{ item.title }}
              </a-typography-text>
              <a-space :size="8" wrap>
                <a-tag :bordered="false">{{ typeLabel(item) }}</a-tag>
                <a-tag :color="dueTagColor(dueTone(item.dueAt))" :bordered="false">
                  {{ dueLabel(item.dueAt) }}
                </a-tag>
                <a-typography-text v-if="item.assignee?.fullName" type="secondary">
                  {{ item.assignee.fullName }}
                </a-typography-text>
              </a-space>
            </a-flex>
          </a-flex>
          <LeftOutlined :style="{ color: token.colorTextQuaternary, flexShrink: 0 }" />
        </a-flex>
      </a-flex>

      <template v-if="closed.length">
        <a-divider v-if="planned.length" :style="{ margin: `${token.marginMD}px 0` }" />
        <a-collapse
          v-model:activeKey="closedKeys"
          ghost
          :bordered="false"
          :style="{
            background: 'transparent',
            marginTop: planned.length ? 0 : `${token.marginSM}px`,
          }"
        >
          <a-collapse-panel key="closed">
            <template #header>
              <a-typography-text type="secondary">
                {{ toFaDigits(closed.length) }} فعالیت انجام‌شده یا لغو شده
              </a-typography-text>
            </template>
            <a-flex vertical :gap="token.marginSM">
              <a-flex
                v-for="item in closed"
                :key="item.id"
                align="center"
                justify="space-between"
                :gap="token.marginSM"
                wrap="wrap"
                :style="rowStyle('none', true)"
                role="button"
                tabindex="0"
                @click="goDetail(item.id)"
                @keydown.enter="goDetail(item.id)"
              >
                <a-flex
                  align="center"
                  :gap="token.marginSM"
                  :style="{ minWidth: 0, flex: '1 1 220px' }"
                >
                  <a-avatar
                    :size="40"
                    :style="{
                      backgroundColor: token.colorFillSecondary,
                      color: token.colorTextSecondary,
                    }"
                  >
                    <template #icon>
                      <component :is="typeIcon(item.type)" />
                    </template>
                  </a-avatar>
                  <a-flex vertical :gap="4" :style="{ minWidth: 0 }">
                    <a-typography-text :ellipsis="{ tooltip: item.title }">
                      {{ item.title }}
                    </a-typography-text>
                    <a-space :size="8" wrap>
                      <a-tag :bordered="false">{{ statusLabel(item.status) }}</a-tag>
                      <a-typography-text type="secondary">
                        {{ dueLabel(item.dueAt) }}
                      </a-typography-text>
                    </a-space>
                  </a-flex>
                </a-flex>
                <LeftOutlined :style="{ color: token.colorTextQuaternary, flexShrink: 0 }" />
              </a-flex>
            </a-flex>
          </a-collapse-panel>
        </a-collapse>
      </template>
    </a-spin>
  </a-card>
</template>