CRM_Montzar/apps/web/src/views/InvoicesView.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 { InvoiceDto, InvoiceStatus, PaginatedResponse } from '@mento/shared';

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

const loading = ref(false);
const error = ref('');
const data = ref<PaginatedResponse<InvoiceDto> | null>(null);
const q = ref(typeof route.query.q === 'string' ? route.query.q : '');
const status = ref<InvoiceStatus | 'all'>(
  typeof route.query.status === 'string' &&
    ['draft', 'issued', 'partially_paid', 'paid', 'canceled'].includes(
      route.query.status,
    )
    ? (route.query.status as InvoiceStatus)
    : 'all',
);

const statusLabel: Record<InvoiceStatus, string> = {
  draft: 'پیش‌نویس',
  issued: 'صادرشده',
  partially_paid: 'پرداخت جزئی',
  paid: 'تسویه‌شده',
  canceled: 'لغوشده',
};

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

async function load() {
  loading.value = true;
  error.value = '';
  try {
    const { data: res } = await api.get<PaginatedResponse<InvoiceDto>>(
      '/invoices',
      {
        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: 'invoices',
    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', 'issued', 'partially_paid', 'paid', 'canceled'].includes(
        route.query.status,
      )
        ? (route.query.status as InvoiceStatus)
        : '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: 'invoice-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="invoice in items"
        :key="invoice.id"
        class="row"
        :to="{ name: 'invoice-detail', params: { id: invoice.id } }"
      >
        <div>
          <strong>{{ invoice.title }}</strong>
          <p class="muted">
            {{ invoice.number }}
            · {{ statusLabel[invoice.status as InvoiceStatus] || invoice.status }}
            <span v-if="invoice.person"> · {{ invoice.person.fullName }}</span>
            <span v-if="invoice.deal"> · {{ invoice.deal.title }}</span>
          </p>
        </div>
        <div class="amounts">
          <strong>{{ formatMoney(invoice.totalAmount, invoice.currency) }}</strong>
          <span v-if="invoice.paidAmount > 0" class="muted paid">
            وصول: {{ formatMoney(invoice.paidAmount, invoice.currency) }}
          </span>
        </div>
      </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;
}

.amounts {
  display: grid;
  gap: 0.2rem;
  text-align: end;
  white-space: nowrap;
}

.paid {
  font-size: 0.85rem;
}

.empty,
.error {
  margin: 0;
}

.error {
  color: #b42318;
}

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