Align older CRM pages with the Mento visual language.

Restyle list, form, settings, and secondary modules to match contacts/activities patterns with teal chrome, soft panels, and mobile layouts — without changing already-redesigned screens.

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

apps/web/src/views/InvoicesView.vue

@@ -4,6 +4,8 @@ import { RouterLink, useRoute, useRouter } from 'vue-router';
 import axios from 'axios';
 import { api } from '@/lib/api';
 import { formatMoney } from '@/lib/money';
+import { toFaDigits } from '@/lib/jalali';
+import UiIcon from '@/components/UiIcon.vue';
 import type { InvoiceDto, InvoiceStatus, PaginatedResponse } from '@mento/shared';
 
 const route = useRoute();
@@ -15,12 +17,11 @@ 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,
-    )
+    ['draft', 'issued', 'partially_paid', 'paid', 'canceled'].includes(route.query.status)
     ? (route.query.status as InvoiceStatus)
     : 'all',
 );
+const filterOpen = ref(false);
 
 const statusLabel: Record<InvoiceStatus, string> = {
   draft: 'پیش‌نویس',
@@ -31,25 +32,24 @@ const statusLabel: Record<InvoiceStatus, string> = {
 };
 
 const items = computed(() => data.value?.items ?? []);
+const listEmpty = computed(() => !loading.value && !items.value.length);
+const statusFilterLabel = computed(() =>
+  status.value === 'all' ? 'همه وضعیت‌ها' : statusLabel[status.value],
+);
 
 async function load() {
   loading.value = true;
   error.value = '';
+  filterOpen.value = false;
   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,
-        },
+    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) {
@@ -63,7 +63,7 @@ async function load() {
 }
 
 function onSearch() {
-  router.replace({
+  void router.replace({
     name: 'invoices',
     query: {
       ...route.query,
@@ -73,15 +73,19 @@ function onSearch() {
   });
 }
 
+function setStatus(next: InvoiceStatus | 'all') {
+  status.value = next;
+  filterOpen.value = false;
+  onSearch();
+}
+
 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,
-      )
+      ['draft', 'issued', 'partially_paid', 'paid', 'canceled'].includes(route.query.status)
         ? (route.query.status as InvoiceStatus)
         : 'all';
     void load();
@@ -92,154 +96,506 @@ onMounted(load);
 </script>
 
 <template>
-  <section class="page">
+  <section class="page" @click="filterOpen = false">
     <header class="page-head">
-      <div>
-        <p class="eyebrow">مالی سبک</p>
+      <div class="head-copy">
         <h1>فاکتورها</h1>
-        <p class="lead">
-          صدور فاکتور، ثبت پرداخت و پیگیری اقساط ساده.
-        </p>
+        <p class="lead">صدور فاکتور، ثبت پرداخت و پیگیری اقساط ساده.</p>
       </div>
-      <RouterLink class="btn" :to="{ name: 'invoice-new', query: route.query }"
-        >فاکتور جدید</RouterLink
-      >
+      <RouterLink class="add-btn" :to="{ name: 'invoice-new', query: route.query }" aria-label="فاکتور جدید">
+        <span>+</span>
+      </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>
+    <div class="tools">
+      <form class="search" @submit.prevent="onSearch">
+        <UiIcon name="search" :size="18" />
+        <input v-model="q" type="search" placeholder="جستجو در عنوان یا شماره…" />
+      </form>
+      <div class="filter-wrap" @click.stop>
+        <button class="btn ghost filter-btn" type="button" @click="filterOpen = !filterOpen">
+          <UiIcon name="filter" :size="16" />
+          <span class="btn-full">{{ statusFilterLabel }}</span>
+          <span class="btn-short">وضعیت</span>
+          <UiIcon name="chevron" :size="14" class="chev" />
+        </button>
+        <div v-if="filterOpen" class="popover">
+          <button type="button" :class="{ on: status === 'all' }" @click="setStatus('all')">
+            همه وضعیت‌ها
+          </button>
+          <button
+            v-for="(label, key) in statusLabel"
+            :key="key"
+            type="button"
+            :class="{ on: status === key }"
+            @click="setStatus(key as InvoiceStatus)"
+          >
+            {{ label }}
+          </button>
+        </div>
+      </div>
+    </div>
 
     <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>
+    <div v-else-if="listEmpty" class="empty-card">
+      <div class="art" aria-hidden="true">
+        <svg viewBox="0 0 168 148" fill="none">
+          <rect x="38" y="18" width="92" height="112" rx="16" fill="#E7F6F3" />
+          <rect x="50" y="32" width="68" height="84" rx="10" fill="#fff" />
+          <path d="M62 52h28" stroke="#14b8a6" stroke-width="4" stroke-linecap="round" />
+          <path d="M62 68h36" stroke="#99f6e4" stroke-width="4" stroke-linecap="round" />
+          <path d="M62 84h22" stroke="#99f6e4" stroke-width="4" stroke-linecap="round" />
+          <circle cx="118" cy="112" r="20" fill="#14b8a6" />
+          <path d="M118 104v16M110 112h16" stroke="#fff" stroke-width="3" stroke-linecap="round" />
+        </svg>
+      </div>
+      <h2>هنوز فاکتوری نیست</h2>
+      <p>اولین فاکتور را صادر کنید تا پرداخت‌ها و اقساط را اینجا ببینید.</p>
+      <RouterLink class="btn primary wide" :to="{ name: 'invoice-new', query: route.query }">
+        <span>+</span>
+        فاکتور جدید
+      </RouterLink>
+    </div>
+
+    <template v-else>
+      <div class="list-head">
+        <strong>{{ toFaDigits(items.length) }} فاکتور</strong>
+      </div>
+
+      <div class="table-wrap desktop-only">
+        <table class="data-table">
+          <thead>
+            <tr>
+              <th>عنوان</th>
+              <th>شماره</th>
+              <th>وضعیت</th>
+              <th>مشتری / معامله</th>
+              <th>مبلغ</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="invoice in items" :key="invoice.id">
+              <td>
+                <RouterLink class="title" :to="{ name: 'invoice-detail', params: { id: invoice.id } }">
+                  {{ invoice.title }}
+                </RouterLink>
+              </td>
+              <td class="muted">{{ invoice.number }}</td>
+              <td>
+                <span class="badge" :class="invoice.status">
+                  {{ statusLabel[invoice.status as InvoiceStatus] || invoice.status }}
+                </span>
+              </td>
+              <td class="muted">
+                <span v-if="invoice.person">{{ invoice.person.fullName }}</span>
+                <span v-if="invoice.person && invoice.deal"> · </span>
+                <span v-if="invoice.deal">{{ invoice.deal.title }}</span>
+                <span v-if="!invoice.person && !invoice.deal">—</span>
+              </td>
+              <td class="amounts">
+                <strong>{{ formatMoney(invoice.totalAmount, invoice.currency) }}</strong>
+                <span v-if="invoice.paidAmount > 0" class="paid">
+                  وصول: {{ formatMoney(invoice.paidAmount, invoice.currency) }}
+                </span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div class="cards mobile-only">
+        <RouterLink
+          v-for="invoice in items"
+          :key="invoice.id"
+          class="m-card"
+          :to="{ name: 'invoice-detail', params: { id: invoice.id } }"
+        >
+          <div class="m-top">
+            <strong>{{ invoice.title }}</strong>
+            <span class="badge" :class="invoice.status">
+              {{ statusLabel[invoice.status as InvoiceStatus] || invoice.status }}
+            </span>
+          </div>
+          <p class="muted">{{ invoice.number }}</p>
+          <p v-if="invoice.person || invoice.deal" class="meta">
+            <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>
+          <div class="m-foot">
+            <strong>{{ formatMoney(invoice.totalAmount, invoice.currency) }}</strong>
+            <span v-if="invoice.paidAmount > 0" class="paid">
+              وصول: {{ formatMoney(invoice.paidAmount, invoice.currency) }}
+            </span>
+          </div>
+        </RouterLink>
+      </div>
+    </template>
   </section>
 </template>
 
 <style scoped>
 .page {
   display: grid;
-  gap: 1.1rem;
+  gap: 1rem;
+  min-width: 0;
+  overflow-x: clip;
 }
 
 .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;
+.head-copy {
+  min-width: 0;
 }
 
 h1 {
-  margin: 0.2rem 0;
+  margin: 0 0 0.3rem;
+  font-size: clamp(1.45rem, 2.5vw, 1.85rem);
+  font-weight: 800;
 }
 
 .lead,
-.muted {
-  color: var(--muted);
+.muted,
+.error,
+.meta {
+  margin: 0;
 }
 
-.toolbar {
-  display: flex;
-  gap: 0.55rem;
-  flex-wrap: wrap;
+.lead,
+.muted,
+.meta {
+  color: #64748b;
 }
 
-.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;
+.error {
+  color: #b91c1c;
 }
 
-.list {
+.add-btn {
+  width: 48px;
+  height: 48px;
+  border-radius: 999px;
+  background: #14b8a6;
+  color: #fff;
   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;
+  place-items: center;
   text-decoration: none;
-  color: inherit;
+  font-size: 1.6rem;
+  font-weight: 700;
+  box-shadow: 0 8px 18px rgba(20, 184, 166, 0.28);
+  flex-shrink: 0;
 }
 
-.row p {
-  margin: 0.25rem 0 0;
+.tools {
+  display: flex;
+  gap: 0.55rem;
+  align-items: center;
+}
+
+.search {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  background: #fff;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  padding: 0 0.85rem;
+  color: #94a3b8;
+}
+
+.search input {
+  flex: 1;
+  min-width: 0;
+  border: 0;
+  background: none;
+  padding: 0.75rem 0;
+  font: inherit;
+}
+
+.filter-wrap {
+  position: relative;
+  flex-shrink: 0;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  min-height: 42px;
+  padding: 0.55rem 1rem;
+  border-radius: 12px;
+  font-weight: 700;
+  border: 1px solid transparent;
+  cursor: pointer;
+  font: inherit;
+  text-decoration: none;
+}
+
+.btn.primary {
+  background: #14b8a6;
+  color: #fff;
+  box-shadow: 0 8px 18px rgba(20, 184, 166, 0.24);
+}
+
+.btn.ghost {
+  background: #fff;
+  color: #0f766e;
+  border-color: #99f6e4;
+}
+
+.btn.wide {
+  width: min(100%, 320px);
+}
+
+.filter-btn .chev {
+  transform: rotate(90deg);
+}
+
+.btn-short {
+  display: none;
+}
+
+.popover {
+  position: absolute;
+  top: calc(100% + 6px);
+  inset-inline-end: 0;
+  min-width: 11rem;
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
+  padding: 0.35rem;
+  display: grid;
+  z-index: 8;
+}
+
+.popover button {
+  display: block;
+  width: 100%;
+  text-align: start;
+  border: 0;
+  background: none;
+  padding: 0.6rem 0.7rem;
+  border-radius: 8px;
+  font: inherit;
+  cursor: pointer;
+  color: #0f172a;
+}
+
+.popover button:hover,
+.popover button.on {
+  background: #f0fdfa;
+  color: #0f766e;
+}
+
+.empty-card {
+  background: #fff;
+  border-radius: 22px;
+  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
+  padding: 2.4rem 1.2rem 2rem;
+  display: grid;
+  justify-items: center;
+  text-align: center;
+  gap: 0.7rem;
+}
+
+.art svg {
+  width: 148px;
+  height: auto;
+  display: block;
+}
+
+.empty-card h2 {
+  margin: 0.2rem 0 0;
+  font-size: 1.15rem;
+}
+
+.empty-card > p {
+  max-width: 22rem;
+  color: #94a3b8;
+  line-height: 1.8;
+}
+
+.list-head {
+  color: #0f766e;
+}
+
+.table-wrap {
+  background: #fff;
+  border-radius: 18px;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
+  overflow: auto;
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  min-width: 640px;
+}
+
+.data-table th,
+.data-table td {
+  padding: 0.9rem 1rem;
+  text-align: start;
+  border-bottom: 1px solid #f1f5f9;
+}
+
+.data-table th {
+  font-size: 0.78rem;
+  color: #94a3b8;
+  font-weight: 700;
+  background: #f8fafc;
+}
+
+.title {
+  color: #0f172a;
+  font-weight: 700;
+  text-decoration: none;
+}
+
+.title:hover {
+  color: #0f766e;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem 0.55rem;
+  border-radius: 999px;
+  font-size: 0.75rem;
+  font-weight: 700;
+  background: #f1f5f9;
+  color: #475569;
+  white-space: nowrap;
+}
+
+.badge.draft {
+  background: #f1f5f9;
+  color: #64748b;
+}
+
+.badge.issued {
+  background: #ecfeff;
+  color: #0e7490;
+}
+
+.badge.partially_paid {
+  background: #fff7ed;
+  color: #c2410c;
+}
+
+.badge.paid {
+  background: #ecfdf5;
+  color: #047857;
+}
+
+.badge.canceled {
+  background: #fef2f2;
+  color: #b91c1c;
 }
 
 .amounts {
   display: grid;
-  gap: 0.2rem;
-  text-align: end;
+  gap: 0.15rem;
   white-space: nowrap;
 }
 
 .paid {
-  font-size: 0.85rem;
+  font-size: 0.8rem;
+  color: #64748b;
 }
 
-.empty,
-.error {
-  margin: 0;
+.desktop-only {
+  display: block;
 }
 
-.error {
-  color: #b42318;
+.mobile-only {
+  display: none;
 }
 
-.empty {
-  padding: 1rem;
-  border: 1px dashed var(--line);
-  border-radius: var(--radius);
-  color: var(--muted);
+.cards {
+  display: grid;
+  gap: 0.65rem;
+}
+
+.m-card {
+  background: #fff;
+  border-radius: 16px;
+  padding: 0.95rem 1rem;
+  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
+  text-decoration: none;
+  color: inherit;
+  display: grid;
+  gap: 0.35rem;
+  min-width: 0;
+}
+
+.m-top {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.6rem;
+  align-items: flex-start;
+}
+
+.m-top strong {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.m-foot {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem 0.75rem;
+  align-items: baseline;
+  margin-top: 0.25rem;
+}
+
+@media (max-width: 900px) {
+  .page-head {
+    align-items: center;
+  }
+
+  .tools {
+    flex-wrap: wrap;
+  }
+
+  .search {
+    flex: 1 1 100%;
+  }
+
+  .btn-full {
+    display: none;
+  }
+
+  .btn-short {
+    display: inline;
+  }
+
+  .desktop-only {
+    display: none;
+  }
+
+  .mobile-only {
+    display: grid;
+  }
+}
+
+@media (max-width: 520px) {
+  .add-btn {
+    width: 44px;
+    height: 44px;
+  }
+
+  .m-card {
+    padding: 0.85rem;
+  }
 }
 </style>