Merge design_ui_v2 into design_ui so the new design system can be previewed without dropping later product work.

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

apps/web/src/views/CustomFieldsSettingsView.vue

@@ -2,6 +2,17 @@
 import { computed, onMounted, ref } from 'vue';
 import axios from 'axios';
 import { api } from '@/lib/api';
+import {
+  UiBadge,
+  UiButton,
+  UiCard,
+  UiEmptyState,
+  UiField,
+  UiInput,
+  UiPageHeader,
+  UiSelect,
+} from '@/components/ui';
+import UiIcon from '@/components/UiIcon.vue';
 import type {
   CreateCustomFieldRequest,
   CustomFieldDefinitionDto,
@@ -13,7 +24,7 @@ const loading = ref(false);
 const saving = ref(false);
 const error = ref('');
 const fields = ref<CustomFieldDefinitionDto[]>([]);
-const filter = ref<'all' | CustomFieldEntity>('all');
+const filter = ref<string>('all');
 
 const label = ref('');
 const entityType = ref<CustomFieldEntity>('person');
@@ -112,283 +123,256 @@ onMounted(load);
 </script>
 
 <template>
-  <section class="page">
-    <header class="page-head">
-      <div class="head-copy">
-        <h1>فیلدهای سفارشی</h1>
-        <p class="lead">
-          فیلدهای اختصاصی سازمان را برای شخص، شرکت یا معامله تعریف کنید.
-        </p>
-      </div>
-    </header>
+  <section class="crm-page narrow">
+    <UiPageHeader
+      title="فیلدهای سفارشی"
+      lead="فیلدهای اختصاصی سازمان را برای شخص، شرکت یا معامله تعریف کنید."
+    />
 
-    <form class="panel" @submit.prevent="createField">
-      <h2>فیلد جدید</h2>
-      <div class="grid">
-        <div class="field">
-          <label for="cf-label">عنوان</label>
-          <input id="cf-label" v-model="label" required placeholder="مثلاً صنعت" />
+    <form class="crm-form" @submit.prevent="createField">
+      <UiCard>
+        <template #header>
+          <div class="card-title">
+            <UiIcon name="settings" :size="18" />
+            <h3>فیلد جدید</h3>
+          </div>
+        </template>
+        <div class="crm-form-grid-3">
+          <UiField label="عنوان" required for-id="cf-label">
+            <UiInput id="cf-label" v-model="label" required placeholder="مثلاً صنعت" />
+          </UiField>
+
+          <UiField label="روی چه چیزی؟" for-id="cf-entity">
+            <UiSelect id="cf-entity" v-model="entityType">
+              <option value="person">شخص</option>
+              <option value="company">شرکت</option>
+              <option value="deal">معامله</option>
+            </UiSelect>
+          </UiField>
+
+          <UiField label="نوع فیلد" for-id="cf-type">
+            <UiSelect id="cf-type" v-model="fieldType">
+              <option value="text">متن</option>
+              <option value="number">عدد</option>
+              <option value="date">تاریخ</option>
+              <option value="boolean">بله/خیر</option>
+              <option value="select">لیست انتخابی</option>
+            </UiSelect>
+          </UiField>
+
+          <div v-if="fieldType === 'select'" class="crm-col-span-full">
+            <UiField label="گزینه‌ها (با کاما جدا کنید)" for-id="cf-options">
+              <UiInput
+                id="cf-options"
+                v-model="optionsRaw"
+                placeholder="مثلاً فناوری، تولید، خدمات"
+              />
+            </UiField>
+          </div>
+
+          <div class="crm-col-span-full check-row">
+            <label class="check">
+              <input v-model="required" type="checkbox" />
+              <span>فیلد اجباری است</span>
+            </label>
+          </div>
         </div>
-        <div class="field">
-          <label for="cf-entity">روی چه چیزی؟</label>
-          <select id="cf-entity" v-model="entityType">
-            <option value="person">شخص</option>
-            <option value="company">شرکت</option>
-            <option value="deal">معامله</option>
-          </select>
-        </div>
-        <div class="field">
-          <label for="cf-type">نوع</label>
-          <select id="cf-type" v-model="fieldType">
-            <option value="text">متن</option>
-            <option value="number">عدد</option>
-            <option value="date">تاریخ</option>
-            <option value="boolean">بله/خیر</option>
-            <option value="select">لیست انتخابی</option>
-          </select>
-        </div>
-        <div class="field check-field">
-          <label class="check">
-            <input v-model="required" type="checkbox" />
-            اجباری
-          </label>
-        </div>
-        <div v-if="fieldType === 'select'" class="field wide">
-          <label for="cf-options">گزینه‌ها (با کاما جدا کنید)</label>
-          <input
-            id="cf-options"
-            v-model="optionsRaw"
-            placeholder="مثلاً فناوری، تولید، خدمات"
-          />
-        </div>
-      </div>
-      <button class="btn primary" type="submit" :disabled="saving">
-        {{ saving ? 'در حال ثبت…' : 'افزودن فیلد' }}
-      </button>
+        <template #footer>
+          <UiButton
+            variant="primary"
+            type="submit"
+            :disabled="saving"
+            :loading="saving"
+          >
+            <UiIcon name="plus" :size="16" />
+            {{ saving ? 'در حال ثبت…' : 'افزودن فیلد' }}
+          </UiButton>
+        </template>
+      </UiCard>
     </form>
 
-    <div class="toolbar">
-      <select v-model="filter">
-        <option value="all">همه</option>
+    <div class="crm-toolbar">
+      <UiSelect v-model="filter" class="filter-select">
+        <option value="all">همه موجودیت‌ها</option>
         <option value="person">شخص</option>
         <option value="company">شرکت</option>
         <option value="deal">معامله</option>
-      </select>
-      <button class="btn btn-ghost" type="button" @click="load">بروزرسانی</button>
+      </UiSelect>
+      <UiButton variant="ghost" type="button" @click="load">
+        <UiIcon name="refresh" :size="16" />
+        بروزرسانی
+      </UiButton>
     </div>
 
-    <p v-if="error" class="error">{{ error }}</p>
+    <p v-if="error" class="error-msg">{{ error }}</p>
     <p v-if="loading" class="muted">در حال بارگذاری…</p>
 
     <div v-else class="list">
-      <article v-for="field in visible" :key="field.id" class="row">
-        <div>
-          <strong>{{ field.label }}</strong>
-          <p class="meta">
-            {{ entityLabels[field.entityType] }} · {{ typeLabels[field.fieldType] }}
-            · کلید: <code>{{ field.key }}</code>
-            <span v-if="!field.isActive"> · غیرفعال</span>
-          </p>
+      <UiCard v-for="field in visible" :key="field.id" padding="sm" class="field-item-card">
+        <div class="field-item">
+          <div class="field-meta">
+            <div class="field-title-line">
+              <strong>{{ field.label }}</strong>
+              <UiBadge :variant="field.entityType === 'deal' ? 'warning' : field.entityType === 'company' ? 'info' : 'primary'" size="sm">
+                {{ entityLabels[field.entityType] }}
+              </UiBadge>
+              <UiBadge variant="neutral" size="sm">
+                {{ typeLabels[field.fieldType] }}
+              </UiBadge>
+              <UiBadge v-if="field.required" variant="danger" size="sm">
+                اجباری
+              </UiBadge>
+              <UiBadge :variant="field.isActive ? 'success' : 'neutral'" size="sm" dot>
+                {{ field.isActive ? 'فعال' : 'غیرفعال' }}
+              </UiBadge>
+            </div>
+            <p class="meta-code">
+              کلید سیستمی: <code>{{ field.key }}</code>
+              <span v-if="field.options?.length" class="options-preview">
+                · گزینه‌ها: {{ field.options.join('، ') }}
+              </span>
+            </p>
+          </div>
+          <div class="actions">
+            <UiButton
+              variant="outline"
+              size="sm"
+              @click="toggleActive(field)"
+            >
+              {{ field.isActive ? 'غیرفعال‌سازی' : 'فعال‌سازی' }}
+            </UiButton>
+            <UiButton
+              variant="danger"
+              size="sm"
+              @click="removeField(field)"
+            >
+              حذف
+            </UiButton>
+          </div>
         </div>
-        <div class="actions">
-          <button class="btn btn-ghost" type="button" @click="toggleActive(field)">
-            {{ field.isActive ? 'غیرفعال' : 'فعال' }}
-          </button>
-          <button class="btn btn-danger" type="button" @click="removeField(field)">
-            حذف
-          </button>
-        </div>
-      </article>
-      <p v-if="!visible.length" class="muted">هنوز فیلدی تعریف نشده است.</p>
+      </UiCard>
+
+      <UiEmptyState
+        v-if="!visible.length"
+        icon="settings"
+        title="فیلدی تعریف نشده است"
+        description="هیچ فیلد سفارشی برای این موجودیت وجود ندارد."
+      />
     </div>
   </section>
 </template>
 
 <style scoped>
-.page {
-  display: grid;
-  gap: 1rem;
-  max-width: 920px;
-  min-width: 0;
-  overflow-x: clip;
-}
-
-.page-head {
+.card-title {
   display: flex;
-  justify-content: space-between;
-  gap: 1rem;
-  align-items: flex-start;
-  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--sp-2);
 }
 
-.head-copy {
-  min-width: 0;
-}
-
-h1 {
-  margin: 0 0 0.3rem;
-  font-size: clamp(1.45rem, 2.5vw, 1.85rem);
-  font-weight: 800;
-}
-
-.lead,
-.muted,
-.meta {
+.card-title h3 {
   margin: 0;
-  color: #64748b;
-}
-
-.error {
-  margin: 0;
-  color: #b91c1c;
-}
-
-.panel,
-.row {
-  background: #fff;
-  border: 1px solid #e2e8f0;
-  border-radius: 18px;
-  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
-  padding: 1.1rem;
-}
-
-.panel {
-  display: grid;
-  gap: 0.9rem;
-}
-
-.panel h2 {
-  margin: 0;
-  font-size: 1.05rem;
+  font-size: var(--fs-base);
   font-weight: 700;
-  color: #0f172a;
 }
 
-.grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 0.85rem;
-}
-
-.wide {
-  grid-column: 1 / -1;
-}
-
-.field label {
-  color: #64748b;
-  font-size: 0.9rem;
-}
-
-select,
-input[type='text'] {
-  border: 1px solid #e2e8f0;
-  border-radius: var(--radius);
-  min-height: var(--control-h);
-  padding: 0 0.95rem;
-  background: #fff;
-  font: inherit;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.check-field {
+.check-row {
   display: flex;
-  align-items: end;
+  align-items: center;
 }
 
 .check {
   display: flex;
   align-items: center;
-  gap: 0.45rem;
-}
-
-.toolbar {
-  display: flex;
-  gap: 0.6rem;
-  align-items: center;
-  flex-wrap: wrap;
-}
-
-.toolbar select {
-  flex: 1;
-  min-width: 0;
-}
-
-.btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: var(--control-h);
-  padding: 0 0.95rem;
-  border-radius: var(--radius);
-  font-weight: 700;
-  border: 1px solid transparent;
+  gap: var(--sp-2);
   cursor: pointer;
-  font: inherit;
+  font-size: var(--fs-sm);
+  color: var(--color-text);
 }
 
-.btn.primary {
-  background: #14b8a6;
-  color: #fff;
-  box-shadow: 0 8px 18px rgba(20, 184, 166, 0.24);
+.filter-select {
+  min-width: 180px;
 }
 
-.btn-ghost {
-  background: #fff;
-  color: #0f766e;
-  border: 1px solid #99f6e4;
-  box-shadow: none;
-}
-
-.btn-danger {
-  background: #fff;
-  color: #b91c1c;
-  border: 1px solid #fecaca;
-  box-shadow: none;
+.error-msg {
+  color: var(--color-danger);
+  font-size: var(--fs-sm);
+  font-weight: 600;
 }
 
 .list {
   display: grid;
-  gap: 0.7rem;
+  gap: var(--sp-3);
 }
 
-.row {
+.field-item-card {
+  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
+}
+
+.field-item-card:hover {
+  box-shadow: var(--shadow-md);
+}
+
+.field-item {
   display: flex;
   justify-content: space-between;
-  gap: 1rem;
   align-items: center;
+  gap: var(--sp-4);
+  flex-wrap: wrap;
 }
 
-.meta {
-  margin-top: 0.25rem;
-  font-size: 0.92rem;
+.field-meta {
+  display: grid;
+  gap: var(--sp-1);
+}
+
+.field-title-line {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  flex-wrap: wrap;
+}
+
+.field-title-line strong {
+  font-size: var(--fs-base);
+  color: var(--color-text-emphasis);
+}
+
+.meta-code {
+  margin: 0;
+  font-size: var(--fs-xs);
+  color: var(--color-text-muted);
+}
+
+.meta-code code {
+  font-family: Consolas, monospace;
+  background: var(--color-surface-sunken);
+  padding: 1px var(--sp-2);
+  border-radius: var(--radius-sm);
+  color: var(--color-text);
+}
+
+.options-preview {
+  color: var(--color-text-muted);
 }
 
 .actions {
   display: flex;
-  gap: 0.45rem;
-  flex-wrap: wrap;
+  gap: var(--sp-2);
+  align-items: center;
 }
 
-code {
-  font-family: Consolas, monospace;
-  font-size: 0.85em;
+.muted {
+  color: var(--color-text-muted);
 }
 
-@media (max-width: 700px) {
-  .grid {
-    grid-template-columns: 1fr;
-  }
-
-  .row {
+@media (max-width: 640px) {
+  .field-item {
     flex-direction: column;
     align-items: stretch;
   }
 
-  .actions,
-  .toolbar {
-    flex-direction: column;
-    align-items: stretch;
+  .actions {
+    justify-content: flex-end;
   }
 }
 </style>