CRM_Montzar/apps/web/src/views/ActivitiesCalendarView.vue

<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue';
import { RouterLink, useRoute, useRouter } from 'vue-router';
import axios from 'axios';
import { api } from '@/lib/api';
import UiIcon from '@/components/UiIcon.vue';
import type { ActivityDto, PaginatedResponse } from '@mento/shared';
import {
  addJalaliMonths,
  dateToJalali,
  formatJalaliLong,
  gregorianDayKey,
  jalaliMonthLength,
  jalaliMonthName,
  jalaliToDate,
  toFaDigits,
} from '@/lib/jalali';

const route = useRoute();
const router = useRouter();

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

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

const WEEKDAYS = ['ش', 'ی', 'د', 'س', 'چ', 'پ', 'ج'] as const;

type CalCell = {
  key: string;
  date: Date;
  jy: number;
  jm: number;
  jd: number;
  inMonth: boolean;
  isToday: boolean;
};

type JalaliCursor = { jy: number; jm: number };

function parseMonthParam(value: unknown): JalaliCursor {
  if (typeof value === 'string' && /^\d{4}-\d{2}$/.test(value)) {
    const [y, m] = value.split('-').map(Number);
    if (m >= 1 && m <= 12) {
      // queryهای قدیمی با سال میلادی (مثلاً 2026-08) را به شمسی برمی‌گردانیم
      if (y >= 1700) {
        const j = dateToJalali(new Date(y, m - 1, 1));
        return { jy: j.jy, jm: j.jm };
      }
      if (y >= 1200 && y <= 1600) {
        return { jy: y, jm: m };
      }
    }
  }
  const today = dateToJalali(new Date());
  return { jy: today.jy, jm: today.jm };
}

const cursor = computed(() => parseMonthParam(route.query.month));

const monthLabel = computed(
  () => `${jalaliMonthName(cursor.value.jm)} ${toFaDigits(cursor.value.jy)}`,
);

function monthParam(jy: number, jm: number) {
  return `${jy}-${String(jm).padStart(2, '0')}`;
}

/** شبکه ماه شمسی؛ هفته از شنبه */
const cells = computed<CalCell[]>(() => {
  const { jy, jm } = cursor.value;
  const daysInMonth = jalaliMonthLength(jy, jm);
  const first = jalaliToDate(jy, jm, 1);
  const firstDow = (first.getDay() + 1) % 7; // شنبه = 0
  const todayKey = gregorianDayKey(new Date());
  const out: CalCell[] = [];

  const prev = addJalaliMonths(jy, jm, -1);
  const prevLen = jalaliMonthLength(prev.jy, prev.jm);
  for (let i = 0; i < firstDow; i += 1) {
    const jd = prevLen - firstDow + i + 1;
    const date = jalaliToDate(prev.jy, prev.jm, jd);
    out.push({
      key: gregorianDayKey(date),
      date,
      jy: prev.jy,
      jm: prev.jm,
      jd,
      inMonth: false,
      isToday: gregorianDayKey(date) === todayKey,
    });
  }

  for (let jd = 1; jd <= daysInMonth; jd += 1) {
    const date = jalaliToDate(jy, jm, jd);
    out.push({
      key: gregorianDayKey(date),
      date,
      jy,
      jm,
      jd,
      inMonth: true,
      isToday: gregorianDayKey(date) === todayKey,
    });
  }

  const next = addJalaliMonths(jy, jm, 1);
  let n = 1;
  while (out.length % 7 !== 0) {
    const date = jalaliToDate(next.jy, next.jm, n);
    out.push({
      key: gregorianDayKey(date),
      date,
      jy: next.jy,
      jm: next.jm,
      jd: n,
      inMonth: false,
      isToday: gregorianDayKey(date) === todayKey,
    });
    n += 1;
  }
  return out;
});

const byDay = computed(() => {
  const map = new Map<string, ActivityDto[]>();
  for (const item of items.value) {
    if (!item.dueAt) continue;
    const key = gregorianDayKey(new Date(item.dueAt));
    const list = map.get(key) ?? [];
    list.push(item);
    map.set(key, list);
  }
  return map;
});

const selectedItems = computed(() => {
  if (!selectedKey.value) return [];
  return byDay.value.get(selectedKey.value) ?? [];
});

const selectedLabel = computed(() => {
  if (!selectedKey.value) return '';
  const cell = cells.value.find((c) => c.key === selectedKey.value);
  if (cell) return formatJalaliLong(cell.date);
  const [y, m, d] = selectedKey.value.split('-').map(Number);
  return formatJalaliLong(new Date(y, m - 1, d));
});

function rangeForJalaliMonth(jy: number, jm: number) {
  const from = jalaliToDate(jy, jm, 1);
  from.setHours(0, 0, 0, 0);
  const next = addJalaliMonths(jy, jm, 1);
  const to = jalaliToDate(next.jy, next.jm, 1);
  to.setHours(0, 0, 0, 0);
  return { from: from.toISOString(), to: to.toISOString() };
}

async function load() {
  loading.value = true;
  error.value = '';
  try {
    const { from, to } = rangeForJalaliMonth(cursor.value.jy, cursor.value.jm);
    const { data } = await api.get<PaginatedResponse<ActivityDto>>('/activities', {
      params: { filter: 'all', from, to, limit: 200 },
    });
    items.value = data.items;
    if (!selectedKey.value) {
      selectedKey.value = gregorianDayKey(new Date());
    }
  } catch (e) {
    if (axios.isAxiosError(e) && !e.response) {
      error.value = 'اتصال به API برقرار نشد.';
    } else {
      error.value = 'بارگذاری تقویم ناموفق بود.';
    }
    items.value = [];
  } finally {
    loading.value = false;
  }
}

function goMonth(delta: number) {
  const next = addJalaliMonths(cursor.value.jy, cursor.value.jm, delta);
  router.replace({
    name: 'activities-calendar',
    query: { month: monthParam(next.jy, next.jm) },
  });
}

function goToday() {
  const now = new Date();
  const j = dateToJalali(now);
  selectedKey.value = gregorianDayKey(now);
  router.replace({
    name: 'activities-calendar',
    query: { month: monthParam(j.jy, j.jm) },
  });
}

function selectDay(cell: CalCell) {
  selectedKey.value = cell.key;
  if (!cell.inMonth) {
    router.replace({
      name: 'activities-calendar',
      query: { month: monthParam(cell.jy, cell.jm) },
    });
  }
}

function newForSelected() {
  if (!selectedKey.value) return { name: 'activity-new' as const };
  const dueAt = `${selectedKey.value}T09:00:00`;
  return {
    name: 'activity-new' as const,
    query: { dueAt },
  };
}

function formatTime(iso: string | null) {
  if (!iso) return '';
  try {
    return new Intl.DateTimeFormat('fa-IR', { timeStyle: 'short' }).format(new Date(iso));
  } catch {
    return '';
  }
}

watch(
  () => route.query.month,
  () => {
    void load();
  },
);

onMounted(() => {
  selectedKey.value = gregorianDayKey(new Date());
  const parsed = parseMonthParam(route.query.month);
  const normalized = monthParam(parsed.jy, parsed.jm);
  if (route.query.month !== normalized) {
    void router.replace({
      name: 'activities-calendar',
      query: { month: normalized },
    });
  } else {
    void load();
  }
});
</script>

<template>
  <section class="page">
    <nav class="crumbs" aria-label="مسیر">
      <RouterLink :to="{ name: 'home' }">خانه</RouterLink>
      <span>‹</span>
      <RouterLink :to="{ name: 'activities' }">فعالیت‌ها</RouterLink>
      <span>‹</span>
      <span>تقویم</span>
    </nav>

    <header class="page-head">
      <div class="head-copy">
        <h1>تقویم فعالیت‌ها</h1>
        <p class="lead">نمای ماهانه شمسی موعد تماس، جلسه و وظیفه.</p>
      </div>
      <div class="head-actions">
        <RouterLink class="btn ghost" :to="{ name: 'activities' }">
          <UiIcon name="list" :size="18" />
          لیست
        </RouterLink>
        <RouterLink class="btn primary" :to="newForSelected()">
          <span>+</span>
          فعالیت جدید
        </RouterLink>
      </div>
    </header>

    <div class="nav">
      <button class="btn ghost nav-btn" type="button" @click="goMonth(-1)">ماه قبل</button>
      <div class="nav-center">
        <strong>{{ monthLabel }}</strong>
        <button class="linkish" type="button" @click="goToday">برو به امروز</button>
      </div>
      <button class="btn ghost nav-btn" type="button" @click="goMonth(1)">ماه بعد</button>
    </div>

    <p v-if="error" class="error">{{ error }}</p>
    <p v-else-if="loading" class="muted">در حال بارگذاری…</p>

    <div class="layout">
      <div class="calendar" :aria-busy="loading">
        <div class="weekdays">
          <span v-for="w in WEEKDAYS" :key="w">{{ w }}</span>
        </div>
        <div class="grid">
          <button
            v-for="cell in cells"
            :key="cell.key + '-' + cell.jd"
            type="button"
            class="day"
            :class="{
              outside: !cell.inMonth,
              today: cell.isToday,
              selected: selectedKey === cell.key,
              has: (byDay.get(cell.key)?.length ?? 0) > 0,
            }"
            @click="selectDay(cell)"
          >
            <span class="num">{{ toFaDigits(cell.jd) }}</span>
            <span v-if="byDay.get(cell.key)?.length" class="count">
              {{ toFaDigits(byDay.get(cell.key)!.length) }}
            </span>
            <ul v-if="cell.inMonth" class="previews">
              <li
                v-for="act in (byDay.get(cell.key) ?? []).slice(0, 2)"
                :key="act.id"
                :class="{ done: act.status === 'done' }"
              >
                {{ act.title }}
              </li>
            </ul>
          </button>
        </div>
      </div>

      <aside class="day-panel">
        <header>
          <h2>{{ selectedLabel || 'یک روز را انتخاب کنید' }}</h2>
          <RouterLink v-if="selectedKey" class="btn ghost sm" :to="newForSelected()">
            افزودن در این روز
          </RouterLink>
        </header>
        <ul v-if="selectedItems.length" class="day-list">
          <li v-for="act in selectedItems" :key="act.id" :class="{ done: act.status === 'done' }">
            <RouterLink :to="{ name: 'activity-detail', params: { id: act.id } }">
              <span class="type">{{ typeLabel[act.type] }}</span>
              <strong>{{ act.title }}</strong>
              <span class="meta">
                {{ formatTime(act.dueAt) }}
                <template v-if="act.person">
                  · {{ act.person.fullName }}
                </template>
                <template v-if="act.status === 'done'"> · انجام‌شده</template>
              </span>
            </RouterLink>
          </li>
        </ul>
        <p v-else class="muted">برای این روز فعالیتی با موعد ثبت نشده.</p>
      </aside>
    </div>
  </section>
</template>

<style scoped>
.page {
  display: grid;
  gap: 1rem;
  min-width: 0;
  overflow-x: clip;
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  color: #94a3b8;
  font-size: 0.78rem;
}

.crumbs a {
  color: inherit;
  text-decoration: none;
}

.crumbs a:hover {
  color: #0f766e;
}

.page-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

.head-copy {
  min-width: 0;
}

.head-actions {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
}

h1 {
  margin: 0 0 0.3rem;
  font-size: clamp(1.45rem, 2.5vw, 1.85rem);
  font-weight: 600;
}

h2 {
  margin: 0;
  font-size: 1.05rem;
  color: #0f172a;
}

.lead,
.muted,
.meta {
  margin: 0;
  color: #64748b;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: var(--control-h);
  padding: 0 0.95rem;
  border-radius: var(--radius);
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
}

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

.btn.ghost {
  background: #fff;
  color: #0f766e;
  border-color: #99f6e4;
}

.btn.sm {
  min-height: 36px;
  padding: 0.4rem 0.75rem;
  font-size: 0.88rem;
}

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  background: #fff;
  border-radius: var(--radius);
  padding: 0.75rem 0.95rem;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.nav-center {
  display: grid;
  justify-items: center;
  gap: 0.15rem;
  color: #0f766e;
}

.linkish {
  border: 0;
  background: transparent;
  color: #14b8a6;
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0;
}

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(240px, 0.9fr);
  gap: 1rem;
  align-items: start;
}

.calendar {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
  padding: 0.85rem;
  min-width: 0;
}

.weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.35rem;
  margin-bottom: 0.35rem;
  color: #94a3b8;
  font-size: 0.85rem;
  text-align: center;
  font-weight: 700;
}

.grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.35rem;
}

.day {
  min-height: 92px;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius);
  background: #f8fafc;
  padding: 0.45rem;
  text-align: right;
  cursor: pointer;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 0.2rem;
  font: inherit;
  color: inherit;
  min-width: 0;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.day:hover {
  border-color: #99f6e4;
}

.day.outside {
  opacity: 0.45;
}

.day.today {
  border-color: #14b8a6;
  background: #f0fdfa;
}

.day.selected {
  outline: 2px solid #14b8a6;
  outline-offset: 1px;
  background: #fff;
}

.day.has .num {
  font-weight: 600;
  color: #0f766e;
}

.num {
  font-size: 0.95rem;
}

.count {
  justify-self: start;
  font-size: 0.72rem;
  background: #0f766e;
  color: #fff;
  border-radius: 999px;
  padding: 0.05rem 0.4rem;
  font-weight: 700;
}

.previews {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.15rem;
  align-content: start;
}

.previews li {
  font-size: 0.72rem;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.previews li.done {
  text-decoration: line-through;
}

.day-panel {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
  padding: 1rem;
  display: grid;
  gap: 0.85rem;
  min-width: 0;
}

.day-panel header {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

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

.day-list a {
  display: grid;
  gap: 0.15rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid #f1f5f9;
  border-radius: var(--radius);
  background: #f8fafc;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease;
}

.day-list a:hover {
  border-color: #99f6e4;
}

.day-list .type {
  font-size: 0.78rem;
  color: #0f766e;
  font-weight: 700;
}

.day-list .done a {
  opacity: 0.7;
}

.error {
  margin: 0;
  color: #b91c1c;
}

@media (max-width: 900px) {
  .crumbs {
    display: none;
  }

  .layout {
    grid-template-columns: 1fr;
  }

  .page-head {
    flex-direction: column;
  }

  .head-actions {
    width: 100%;
  }

  .head-actions .btn {
    flex: 1;
  }

  .day {
    min-height: 68px;
  }

  .previews {
    display: none;
  }
}

@media (max-width: 700px) {
  h1 {
    font-size: 1.55rem;
  }

  .nav {
    justify-content: center;
  }

  .nav-btn {
    flex: 1;
    min-width: 0;
  }

  .day {
    min-height: 54px;
    padding: 0.3rem;
  }

  .count {
    display: none;
  }
}
</style>