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

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import { RouterLink } from 'vue-router';
import axios from 'axios';
import { api } from '@/lib/api';
import { useAuthStore } from '@/stores/auth';
import { canReassignRecords, canViewAllRecords } from '@/lib/roles';
import { formatMoney as formatMoneyLib } from '@/lib/money';
import { formatLocalDateInput } from '@/lib/jalali';
import JalaliDateInput from '@/components/JalaliDateInput.vue';
import MoneyInput from '@/components/MoneyInput.vue';
import type {
  CreateSalesGoalRequest,
  OrgUserDto,
  SalesForecastDto,
  SalesGoalDto,
} from '@mento/shared';

const auth = useAuthStore();
const loading = ref(false);
const saving = ref(false);
const error = ref('');
const forecast = ref<SalesForecastDto | null>(null);
const users = ref<OrgUserDto[]>([]);

const title = ref('هدف فروش ماه جاری');
const targetAmount = ref('');
const notes = ref('');
const userId = ref('');
const periodStart = ref('');
const periodEnd = ref('');

const canManageTeamGoals = computed(() => canReassignRecords(auth.user?.role));
const showAllHint = computed(() => canViewAllRecords(auth.user?.role));

function monthBounds() {
  const now = new Date();
  const start = new Date(now.getFullYear(), now.getMonth(), 1);
  const end = new Date(now.getFullYear(), now.getMonth() + 1, 0);
  return {
    start: formatLocalDateInput(start),
    end: formatLocalDateInput(end),
  };
}

function formatMoney(amount: number) {
  return formatMoneyLib(amount, forecast.value?.currency || 'IRR');
}

function formatDate(iso: string) {
  try {
    return new Intl.DateTimeFormat('fa-IR').format(new Date(iso));
  } catch {
    return iso.slice(0, 10);
  }
}

async function load() {
  loading.value = true;
  error.value = '';
  try {
    const { data } = await api.get<SalesForecastDto>('/sales/forecast');
    forecast.value = data;
    if (canManageTeamGoals.value && !users.value.length) {
      try {
        const res = await api.get<OrgUserDto[]>('/users');
        users.value = res.data;
      } catch {
        // optional
      }
    }
  } catch (e) {
    if (axios.isAxiosError(e) && !e.response) {
      error.value = 'اتصال به API برقرار نشد.';
    } else {
      error.value = 'بارگذاری پیش‌بینی ناموفق بود.';
    }
  } finally {
    loading.value = false;
  }
}

async function createGoal() {
  if (!title.value.trim() || !targetAmount.value) {
    error.value = 'عنوان و مبلغ هدف را وارد کنید.';
    return;
  }
  saving.value = true;
  error.value = '';
  try {
    const bounds = monthBounds();
    const body: CreateSalesGoalRequest = {
      title: title.value.trim(),
      periodStart: new Date(periodStart.value || bounds.start).toISOString(),
      periodEnd: new Date(
        (periodEnd.value || bounds.end) + 'T23:59:59.000Z',
      ).toISOString(),
      targetAmount: Number(targetAmount.value),
      notes: notes.value || undefined,
      userId: canManageTeamGoals.value
        ? userId.value === ''
          ? null
          : userId.value
        : undefined,
      currency: 'IRR',
    };
    await api.post<SalesGoalDto>('/sales/goals', body);
    targetAmount.value = '';
    notes.value = '';
    await load();
  } catch (e) {
    if (axios.isAxiosError(e)) {
      const msg = (e.response?.data as { message?: string | string[] })?.message;
      error.value = Array.isArray(msg)
        ? msg.join('، ')
        : (msg ?? 'ثبت هدف ناموفق بود');
    } else {
      error.value = 'ثبت هدف ناموفق بود';
    }
  } finally {
    saving.value = false;
  }
}

async function removeGoal(id: string) {
  if (!confirm('این هدف حذف شود؟')) return;
  await api.delete(`/sales/goals/${id}`);
  await load();
}

onMounted(() => {
  const b = monthBounds();
  periodStart.value = b.start;
  periodEnd.value = b.end;
  void load();
});
</script>

<template>
  <section class="page">
    <header class="page-head">
      <div>
        <p class="eyebrow">فروش</p>
        <h1>هدف و پیش‌بینی</h1>
        <p class="lead">
          هدف ماهانه را بگذارید و تحقق، کاریز باز و پیش‌بینی ساده را ببینید.
          <span v-if="!showAllHint"> اعداد بر اساس پرونده‌های شماست.</span>
        </p>
      </div>
      <RouterLink class="btn btn-ghost" :to="{ name: 'home' }">خانه</RouterLink>
    </header>

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

    <div v-if="forecast" class="metrics">
      <article>
        <p class="label">هدف دوره</p>
        <strong>{{ formatMoney(forecast.targetAmount) }}</strong>
      </article>
      <article>
        <p class="label">تحقق (برنده)</p>
        <strong>{{ formatMoney(forecast.wonAmount) }}</strong>
        <span class="muted">{{ forecast.wonDealsCount }} معامله</span>
      </article>
      <article>
        <p class="label">کاریز باز</p>
        <strong>{{ formatMoney(forecast.openPipelineAmount) }}</strong>
        <span class="muted">{{ forecast.openDealsCount }} معامله</span>
      </article>
      <article class="accent">
        <p class="label">پیش‌بینی ساده</p>
        <strong>{{ formatMoney(forecast.forecastAmount) }}</strong>
        <span class="muted">تحقق + ۴۰٪ کاریز باز</span>
      </article>
    </div>

    <div v-if="forecast" class="progress-block">
      <div class="progress-head">
        <span>پیشرفت نسبت به هدف</span>
        <strong>
          {{
            forecast.progressPercent == null
              ? '—'
              : `${new Intl.NumberFormat('fa-IR').format(forecast.progressPercent)}٪`
          }}
        </strong>
      </div>
      <div class="bar">
        <div
          class="fill"
          :style="{
            width: `${Math.min(100, forecast.progressPercent ?? 0)}%`,
          }"
        />
      </div>
      <p class="muted period">
        {{ formatDate(forecast.periodStart) }}
        تا
        {{ formatDate(forecast.periodEnd) }}
      </p>
    </div>

    <form class="form-card" @submit.prevent="createGoal">
      <h2>هدف جدید</h2>
      <div class="grid">
        <div class="field wide">
          <label>عنوان</label>
          <input v-model="title" required maxlength="200" />
        </div>
        <div class="field">
          <label>مبلغ هدف (ریال)</label>
          <MoneyInput v-model="targetAmount" :decimals="0" required />
        </div>
        <div v-if="canManageTeamGoals" class="field">
          <label>برای</label>
          <select v-model="userId">
            <option value="">کل سازمان</option>
            <option v-for="u in users" :key="u.id" :value="u.id">
              {{ u.fullName }}
            </option>
          </select>
        </div>
        <div class="field">
          <label>از تاریخ</label>
          <JalaliDateInput v-model="periodStart" required />
        </div>
        <div class="field">
          <label>تا تاریخ</label>
          <JalaliDateInput v-model="periodEnd" required />
        </div>
        <div class="field wide">
          <label>یادداشت</label>
          <input v-model="notes" maxlength="2000" />
        </div>
      </div>
      <button class="btn" type="submit" :disabled="saving">
        {{ saving ? 'در حال ذخیره…' : 'ثبت هدف' }}
      </button>
    </form>

    <div class="goals">
      <h2>اهداف این دوره</h2>
      <div v-if="forecast?.goals.length" class="goal-list">
        <div v-for="g in forecast.goals" :key="g.id" class="goal-row">
          <div>
            <strong>{{ g.title }}</strong>
            <p class="muted">
              {{ formatMoney(g.targetAmount) }}
              · {{ formatDate(g.periodStart) }} تا {{ formatDate(g.periodEnd) }}
              <span v-if="g.user"> · {{ g.user.fullName }}</span>
              <span v-else> · سازمانی</span>
            </p>
          </div>
          <button class="btn btn-ghost" type="button" @click="removeGoal(g.id)">
            حذف
          </button>
        </div>
      </div>
      <p v-else class="empty">هنوز هدفی برای این دوره ثبت نشده.</p>
    </div>
  </section>
</template>

<style scoped>
.page {
  display: grid;
  gap: 1.1rem;
  max-width: 920px;
}

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

.eyebrow {
  margin: 0;
  color: var(--accent);
  font-weight: 700;
}

h1 {
  margin: 0.2rem 0;
}

h2 {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
}

.lead,
.muted {
  color: var(--muted);
}

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

.metrics article {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  display: grid;
  gap: 0.25rem;
}

.metrics .accent {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
}

.label {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.progress-block {
  display: grid;
  gap: 0.45rem;
}

.progress-head {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}

.bar {
  height: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 80%, #fff);
  overflow: hidden;
}

.fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  min-width: 0;
}

.period {
  margin: 0;
  font-size: 0.9rem;
}

.form-card,
.goals {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  margin-bottom: 0.85rem;
}

.field {
  display: grid;
  gap: 0.3rem;
}

.field.wide {
  grid-column: 1 / -1;
}

label {
  color: var(--muted);
  font-size: 0.9rem;
}

input,
select {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.7rem 0.85rem;
  font: inherit;
  background: #fff;
  width: 100%;
}

.goal-list {
  display: grid;
  gap: 0.5rem;
}

.goal-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: center;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.goal-row p {
  margin: 0.2rem 0 0;
}

.empty,
.error {
  margin: 0;
}

.error {
  color: #b42318;
}

.empty {
  color: var(--muted);
}

@media (max-width: 800px) {
  .metrics,
  .grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .metrics,
  .grid {
    grid-template-columns: 1fr;
  }
}
</style>