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>
2026-09-05 02:29:41 +03:30
parent 20a9ac0d34
commit 092767b6f2
22 changed files with 3946 additions and 1717 deletions
@@ -68,23 +68,22 @@ onMounted(() => {
 <template>
  <section class="page">
    <header class="page-head">
-      <div>
-        <p class="eyebrow">مدیریت</p>
+      <div class="head-copy">
        <h1>گزارشات و داشبورد</h1>
        <p class="lead">نمای یک‌صفحه‌ای فروش، فعالیت، تیم و پشتیبانی.</p>
      </div>
    </header>

    <form class="toolbar" @submit.prevent="load">
-      <label>
-        از
+      <label class="field">
+        <span>از</span>
        <JalaliDateInput v-model="from" />
      </label>
-      <label>
-        تا
+      <label class="field">
+        <span>تا</span>
        <JalaliDateInput v-model="to" />
      </label>
-      <button class="btn" type="submit" :disabled="loading">اعمال</button>
+      <button class="btn primary" type="submit" :disabled="loading">اعمال</button>
      <a
        v-if="org"
        class="portal-link"
@@ -116,7 +115,7 @@ onMounted(() => {
          <strong>{{ data.sales.winRate }}٪</strong>
          <small>{{ data.sales.lostCount }} باخت</small>
        </article>
-        <article>
+        <article class="accent">
          <span>اشخاص جدید</span>
          <strong>{{ data.peopleCreated }}</strong>
          <small>در بازه</small>
@@ -126,28 +125,30 @@ onMounted(() => {
      <div class="grid">
        <section class="panel">
          <h2>قیف فروش (باز)</h2>
-          <table>
-            <thead>
-              <tr>
-                <th>مرحله</th>
-                <th>تعداد</th>
-                <th>مبلغ</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="s in data.funnel" :key="s.stageId">
-                <td>
-                  {{ s.stageName }}
-                  <span class="muted"> · {{ s.pipelineName }}</span>
-                </td>
-                <td>{{ s.count }}</td>
-                <td>{{ money(s.amount) }}</td>
-              </tr>
-              <tr v-if="!data.funnel.length">
-                <td colspan="3" class="muted">داده‌ای نیست</td>
-              </tr>
-            </tbody>
-          </table>
+          <div class="table-wrap">
+            <table>
+              <thead>
+                <tr>
+                  <th>مرحله</th>
+                  <th>تعداد</th>
+                  <th>مبلغ</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="s in data.funnel" :key="s.stageId">
+                  <td>
+                    {{ s.stageName }}
+                    <span class="muted"> · {{ s.pipelineName }}</span>
+                  </td>
+                  <td>{{ s.count }}</td>
+                  <td>{{ money(s.amount) }}</td>
+                </tr>
+                <tr v-if="!data.funnel.length">
+                  <td colspan="3" class="muted">داده‌ای نیست</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
        </section>

        <section class="panel">
@@ -166,25 +167,27 @@ onMounted(() => {

        <section class="panel">
          <h2>تیم</h2>
-          <table>
-            <thead>
-              <tr>
-                <th>کاربر</th>
-                <th>برد</th>
-                <th>فعالیت انجام‌شده</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="u in data.team" :key="u.userId">
-                <td>{{ u.fullName }}</td>
-                <td>{{ u.wonCount }} · {{ money(u.wonAmount) }}</td>
-                <td>{{ u.activitiesDone }}</td>
-              </tr>
-              <tr v-if="!data.team.length">
-                <td colspan="3" class="muted">داده‌ای نیست</td>
-              </tr>
-            </tbody>
-          </table>
+          <div class="table-wrap">
+            <table>
+              <thead>
+                <tr>
+                  <th>کاربر</th>
+                  <th>برد</th>
+                  <th>فعالیت انجام‌شده</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="u in data.team" :key="u.userId">
+                  <td>{{ u.fullName }}</td>
+                  <td>{{ u.wonCount }} · {{ money(u.wonAmount) }}</td>
+                  <td>{{ u.activitiesDone }}</td>
+                </tr>
+                <tr v-if="!data.team.length">
+                  <td colspan="3" class="muted">داده‌ای نیست</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
        </section>

        <section class="panel">
@@ -212,46 +215,102 @@ onMounted(() => {
 <style scoped>
 .page {
  display: grid;
-  gap: 1.1rem;
+  gap: 1rem;
+  min-width: 0;
+  overflow-x: clip;
 }

-.eyebrow {
-  margin: 0;
-  color: var(--accent);
-  font-weight: 700;
+.page-head {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  align-items: flex-start;
+}
+
+.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;
+}
+
+h2 {
+  margin: 0 0 0.85rem;
+  font-size: 1.05rem;
+  color: #0f172a;
 }

 .lead,
 .muted {
-  color: var(--muted);
+  margin: 0;
+  color: #64748b;
 }

 .toolbar {
  display: flex;
  flex-wrap: wrap;
-  gap: 0.75rem;
+  gap: 0.65rem;
  align-items: end;
+  background: #fff;
+  border-radius: 18px;
+  padding: 0.95rem 1rem;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
 }

-.toolbar label {
+.field {
  display: grid;
-  gap: 0.25rem;
+  gap: 0.3rem;
  font-size: 0.85rem;
-  color: var(--muted);
+  color: #64748b;
+  min-width: 0;
+}
+
+.field span {
+  font-weight: 700;
 }

 .toolbar :deep(.trigger) {
  min-width: 11.5rem;
 }

+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 42px;
+  padding: 0.55rem 1rem;
+  border-radius: 12px;
+  font-weight: 700;
+  border: 1px solid transparent;
+  cursor: pointer;
+  font: inherit;
+}
+
+.btn.primary {
+  background: #14b8a6;
+  color: #fff;
+  box-shadow: 0 8px 18px rgba(20, 184, 166, 0.24);
+}
+
+.btn.primary:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
 .portal-link {
  margin-inline-start: auto;
-  color: var(--accent);
+  color: #0f766e;
  font-size: 0.9rem;
+  font-weight: 700;
+  text-decoration: none;
+  align-self: center;
+}
+
+.portal-link:hover {
+  color: #14b8a6;
 }

 .kpis {
@@ -261,22 +320,33 @@ h1 {
 }

 .kpis article {
-  background: var(--surface);
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  padding: 0.9rem 1rem;
+  background: #fff;
+  border-radius: 18px;
+  padding: 1rem 1.05rem;
  display: grid;
  gap: 0.25rem;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
+  min-width: 0;
+}
+
+.kpis article.accent {
+  background: linear-gradient(135deg, #f0fdfa 0%, #fff 100%);
+  border: 1px solid #99f6e4;
 }

 .kpis span,
 .kpis small {
-  color: var(--muted);
+  color: #64748b;
  font-size: 0.85rem;
 }

 .kpis strong {
  font-size: 1.15rem;
+  color: #0f172a;
+}
+
+.kpis .accent strong {
+  color: #0f766e;
 }

 .grid {
@@ -286,28 +356,36 @@ h1 {
 }

 .panel {
-  background: var(--surface);
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  padding: 1rem;
+  background: #fff;
+  border-radius: 18px;
+  padding: 1rem 1.05rem;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
+  min-width: 0;
 }

-.panel h2 {
-  margin: 0 0 0.75rem;
-  font-size: 1.05rem;
+.table-wrap {
+  overflow-x: auto;
+  min-width: 0;
 }

 table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
+  min-width: 0;
 }

 th,
 td {
  text-align: start;
-  padding: 0.45rem 0.25rem;
-  border-bottom: 1px solid var(--line);
+  padding: 0.55rem 0.35rem;
+  border-bottom: 1px solid #f1f5f9;
+}
+
+th {
+  font-size: 0.78rem;
+  color: #94a3b8;
+  font-weight: 700;
 }

 .stats {
@@ -315,17 +393,47 @@ td {
  padding: 0;
  list-style: none;
  display: grid;
-  gap: 0.35rem;
+  gap: 0.4rem;
+  color: #334155;
 }

 .error {
-  color: #b42318;
+  margin: 0;
+  color: #b91c1c;
 }

@media (max-width: 900px) {
-  .kpis,
+  .kpis {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
  .grid {
    grid-template-columns: 1fr;
  }
+
+  .portal-link {
+    margin-inline-start: 0;
+    width: 100%;
+  }
+}
+
+@media (max-width: 700px) {
+  .kpis {
+    grid-template-columns: 1fr;
+  }
+
+  .toolbar {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .field :deep(.trigger) {
+    width: 100%;
+    min-width: 0;
+  }
+
+  .btn.primary {
+    width: 100%;
+  }
 }
 </style>