Initial Mento CRM: portal OTP, reports, SMS, and deploy for crm.montzar.ir.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/web/src/views/InvoicesView.vue

@@ -0,0 +1,245 @@
+<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>