CRM_Montzar/apps/web/src/components/routines/RelatedTasksPanel.vue

<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import type { RoutineEntityRefDto, RoutineTaskDto } from '@mento/shared';
import UiIcon from '@/components/UiIcon.vue';
import QuickTaskModal from '@/components/routines/QuickTaskModal.vue';
import RoutineTaskRow, { type RoutineTaskRowAction } from '@/components/routines/RoutineTaskRow.vue';
import RoutineTaskModals from '@/components/routines/RoutineTaskModals.vue';
import { UiButton } from '@/components/ui';
import { api } from '@/lib/api';
import { toFaDigits } from '@/lib/jalali';
import { apiError, isOpenStatus } from '@/lib/routines';
import { useRoutineTaskActions } from '@/lib/useRoutineTaskActions';
import { useAuthStore } from '@/stores/auth';

const props = withDefaults(
  defineProps<{
    entity: RoutineEntityRefDto;
    title?: string;
    emptyTitle?: string;
    emptyHint?: string;
  }>(),
  {
    title: 'کارهای مرتبط',
    emptyTitle: 'هنوز کاری برای این پرونده ثبت نشده.',
  },
);

const router = useRouter();
const auth = useAuthStore();

const enabled = computed(() => {
  const mods = auth.user?.enabledModules;
  return !mods || mods.includes('routines');
});

const items = ref<RoutineTaskDto[]>([]);
const loading = ref(false);
const error = ref('');
const showClosed = ref(false);
const quickOpen = ref(false);

async function load() {
  if (!enabled.value || !props.entity.id) return;
  loading.value = true;
  error.value = '';
  try {
    const { data } = await api.get<RoutineTaskDto[]>('/routine-tasks/by-entity', {
      params: { [`${props.entity.type}Id`]: props.entity.id },
    });
    items.value = data;
  } catch (e) {
    error.value = apiError(e, 'بارگذاری کارهای مرتبط ممکن نشد.');
  } finally {
    loading.value = false;
  }
}

watch(() => `${props.entity.type}:${props.entity.id}`, load, { immediate: true });

const actions = useRoutineTaskActions((updated) => {
  const i = items.value.findIndex((t) => t.id === updated.id);
  if (i >= 0) items.value[i] = updated;
});

function onAction(kind: RoutineTaskRowAction, task: RoutineTaskDto) {
  if (kind === 'start') void actions.start(task);
  else if (kind === 'complete-note') actions.openComplete(task);
  else if (kind === 'reschedule') actions.openReschedule(task);
  else if (kind === 'move-today') void actions.moveToday(task);
  else if (kind === 'skip') actions.openSkip(task);
  else actions.openCancel(task);
}

const open = computed(() => items.value.filter((t) => isOpenStatus(t.status)));
const closed = computed(() => items.value.filter((t) => !isOpenStatus(t.status)));

function openTask(t: RoutineTaskDto) {
  void router.push({ path: '/routines', query: { task: t.id } });
}

function onCreated(t: RoutineTaskDto) {
  items.value = [t, ...items.value];
}
</script>

<template>
  <section v-if="enabled" class="related">
    <header>
      <h3>
        <span class="mark"><UiIcon name="check" :size="15" /></span>
        {{ title }}
        <em v-if="open.length">{{ toFaDigits(open.length) }} باز</em>
      </h3>
      <UiButton size="sm" variant="outline" @click="quickOpen = true">
        <template #icon><UiIcon name="plus" :size="14" /></template>
        ایجاد Task
      </UiButton>
    </header>

    <p v-if="error" class="error">{{ error }}</p>
    <p v-if="actions.error.value" class="error">{{ actions.error.value }}</p>
    <div v-if="loading && !items.length" class="muted">در حال بارگذاری…</div>
    <div v-else-if="!items.length" class="empty">
      <div class="empty-art" aria-hidden="true">
        <svg viewBox="0 0 72 72" width="72" height="72">
          <rect x="18" y="16" width="36" height="44" rx="8" fill="#f4fbf8" stroke="#b7e4d4" stroke-width="1.6" />
          <rect x="26" y="10" width="20" height="12" rx="4" fill="#e7f6f1" stroke="#7dcebb" stroke-width="1.6" />
          <path d="M30 40l5 5 9-11" fill="none" stroke="#12856a" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
      </div>
      <p class="muted">{{ emptyTitle }}</p>
      <p v-if="emptyHint" class="hint">{{ emptyHint }}</p>
      <button class="empty-cta" type="button" @click="quickOpen = true">
        ایجاد Task
        <UiIcon name="plus" :size="14" />
      </button>
    </div>

    <div v-else class="rows">
      <RoutineTaskRow
        v-for="t in open"
        :key="t.id"
        :task="t"
        :busy="actions.busyId.value === t.id"
        show-date
        show-assignee
        show-delay
        @toggle="actions.toggle"
        @open="openTask"
        @action="onAction"
      />
      <button v-if="closed.length" type="button" class="toggle-closed" @click="showClosed = !showClosed">
        {{ showClosed ? 'پنهان کردن' : 'نمایش' }} {{ toFaDigits(closed.length) }} کار انجام‌شده / بسته
      </button>
      <template v-if="showClosed">
        <RoutineTaskRow
          v-for="t in closed"
          :key="t.id"
          :task="t"
          :busy="actions.busyId.value === t.id"
          show-date
          show-assignee
          @toggle="actions.toggle"
          @open="openTask"
          @action="onAction"
        />
      </template>
    </div>

    <QuickTaskModal :open="quickOpen" :preset="entity" @close="quickOpen = false" @created="onCreated" />
    <RoutineTaskModals :actions="actions" />
  </section>
</template>

<style scoped>
.related {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}

h3 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--ink);
}

h3 em {
  font-style: normal;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  padding: 1px 8px;
  border-radius: 99px;
  background: var(--accent-subtle);
  color: var(--accent-deep);
}

.rows {
  display: grid;
  gap: var(--sp-2);
}

.muted {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
}

.toggle-closed {
  justify-self: start;
  border: 0;
  background: transparent;
  color: var(--accent-deep);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  padding: 4px 0;
}

.error {
  margin: 0;
}

.empty {
  display: grid;
  gap: 0.35rem;
}

.empty-art,
.hint,
.empty-cta {
  display: none;
}

@media (max-width: 900px) {
  .fancy {
    gap: 0.85rem;
    padding: 0.95rem 0.85rem 1rem;
    border: 1px solid #e7eef2;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
  }

  .fancy .mark {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: #e7f6f1;
    color: #0f766e;
  }

  .fancy header :deep(.ui-btn),
  .fancy header :deep(button) {
    border: 0;
    border-radius: 999px;
    background: #e7f6f1;
    color: #0f766e;
    box-shadow: none;
    height: auto;
    min-height: 34px;
    padding: 0.3rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    flex-direction: row-reverse;
    gap: 0.2rem;
  }

  .fancy .empty {
    justify-items: center;
    text-align: center;
    gap: 0.35rem;
    padding: 0.4rem 0.5rem 0.2rem;
  }

  .fancy .empty-art {
    display: grid;
    place-items: center;
    width: 92px;
    height: 92px;
    margin-bottom: 0.2rem;
    border-radius: 24px;
    background: linear-gradient(180deg, #f7fcfa, #eef8f4);
  }

  .fancy .hint {
    display: block;
    margin: 0;
    color: #94a3b8;
    font-size: 0.78rem;
  }

  .fancy .empty-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.35rem;
    border: 0;
    border-radius: 999px;
    background: #e7f6f1;
    color: #0f766e;
    padding: 0.45rem 0.9rem;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
  }
}
</style>