CRM_Montzar/apps/web/src/views/QuotesView.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 { formatMoney } from '@/lib/money';
import type { PaginatedResponse, QuoteDto, QuoteStatus } from '@mento/shared';

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

const loading = ref(false);
const error = ref('');
const data = ref<PaginatedResponse<QuoteDto> | null>(null);
const q = ref(typeof route.query.q === 'string' ? route.query.q : '');
const status = ref<QuoteStatus | 'all'>(
  typeof route.query.status === 'string' &&
    ['draft', 'sent', 'accepted', 'rejected', 'expired'].includes(route.query.status)
    ? (route.query.status as QuoteStatus)
    : 'all',
);

const statusLabel: Record<QuoteStatus, string> = {
  draft: 'پیش‌نویس',
  sent: 'ارسال‌شده',
  accepted: 'تأییدشده',
  rejected: 'ردشده',
  expired: 'منقضی',
};

const items = computed(() => data.value?.items ?? []);

async function load() {
  loading.value = true;
  error.value = '';
  try {
    const { data: res } = await api.get<PaginatedResponse<QuoteDto>>('/quotes', {
      params: {
        q: q.value || undefined,
        status: status.value === 'all' ? undefined : status.value,
        dealId: typeof route.query.dealId === 'string' ? route.query.dealId : undefined,
        limit: 50,
      },
    });
    data.value = res;
  } catch (e) {
    if (axios.isAxiosError(e) && !e.response) {
      error.value = 'اتصال به API برقرار نشد.';
    } else {
      error.value = 'بارگذاری پیش‌فاکتورها ناموفق بود.';
    }
  } finally {
    loading.value = false;
  }
}

function onSearch() {
  router.replace({
    name: 'quotes',
    query: {
      ...route.query,
      q: q.value.trim() || undefined,
      status: status.value === 'all' ? undefined : status.value,
    },
  });
}

watch(
  () => [route.query.q, route.query.status, route.query.dealId],
  () => {
    q.value = typeof route.query.q === 'string' ? route.query.q : '';
    status.value =
      typeof route.query.status === 'string' &&
      ['draft', 'sent', 'accepted', 'rejected', 'expired'].includes(route.query.status)
        ? (route.query.status as QuoteStatus)
        : 'all';
    void load();
  },
);

onMounted(load);
</script>

<template>
  <section class="page">
    <header class="page-head">
      <div>
        <p class="eyebrow">مالی سبک</p>
        <h1>پیش‌فاکتورها</h1>
        <p class="lead">از روی معامله یا جداگانه پیش‌فاکتور بسازید و وضعیت را پیگیری کنید.</p>
      </div>
      <RouterLink class="btn" :to="{ name: 'quote-new', query: route.query }">پیش‌فاکتور جدید</RouterLink>
    </header>

    <form class="toolbar" @submit.prevent="onSearch">
      <input v-model="q" type="search" placeholder="جستجو در عنوان یا شماره…" />
      <select v-model="status" @change="onSearch">
        <option value="all">همه وضعیت‌ها</option>
        <option v-for="(label, key) in statusLabel" :key="key" :value="key">{{ label }}</option>
      </select>
      <button class="btn btn-ghost" type="submit">جستجو</button>
    </form>

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

    <div v-else class="list">
      <RouterLink
        v-for="quote in items"
        :key="quote.id"
        class="row"
        :to="{ name: 'quote-detail', params: { id: quote.id } }"
      >
        <div>
          <strong>{{ quote.title }}</strong>
          <p class="muted">
            {{ quote.number }}
            · {{ statusLabel[quote.status as QuoteStatus] || quote.status }}
            <span v-if="quote.person"> · {{ quote.person.fullName }}</span>
            <span v-if="quote.deal"> · {{ quote.deal.title }}</span>
          </p>
        </div>
        <strong class="amount">{{ formatMoney(quote.totalAmount, quote.currency) }}</strong>
      </RouterLink>
      <p v-if="!items.length" class="empty">هنوز پیش‌فاکتوری نیست.</p>
    </div>
  </section>
</template>

<style scoped>
.page {
  display: grid;
  gap: 1.1rem;
}

.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;
}

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

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

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

.list {
  display: grid;
  gap: 0.55rem;
}

.row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  text-decoration: none;
  color: inherit;
}

.row p {
  margin: 0.25rem 0 0;
}

.amount {
  white-space: nowrap;
}

.empty,
.error {
  margin: 0;
}

.error {
  color: #b42318;
}

.empty {
  padding: 1rem;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--muted);
}
</style>