change UI & fix bugs

src/views/customers/CustomersView.vue

@@ -172,16 +172,20 @@ function cycleStatusFilter() {
         <div class="customer-card__body">
           <div class="customer-card__top">
             <strong>{{ item.name }}</strong>
-            <span
-              class="status"
-              :class="item.status === 'active' ? 'status--ok' : 'status--muted'"
-            >
-              {{ statusLabel(item.status) }}
-            </span>
           </div>
-          <p dir="ltr">{{ item.phone }}</p>
+          <p>{{ item.phone }}</p>
           <p>مجموع خرید: {{ formatNumber(item.totalPurchaseToman) }} تومان</p>
         </div>
+        <span
+          class="status"
+          :class="{
+            'status--ok': item.status === 'active',
+            'status--off': item.status === 'inactive',
+            'status--new': item.status === 'new',
+          }"
+        >
+          {{ statusLabel(item.status) }}
+        </span>
         <IconChevronLeft :size="18" class="chevron" />
       </button>
 
@@ -339,7 +343,7 @@ function cycleStatusFilter() {
 
 .customer-card {
   display: grid;
-  grid-template-columns: 48px 1fr 20px;
+  grid-template-columns: 48px 1fr auto 18px;
   gap: 10px;
   align-items: center;
   border: none;
@@ -349,6 +353,7 @@ function cycleStatusFilter() {
   text-align: start;
   cursor: pointer;
   box-shadow: var(--shadow-sm);
+  font-family: inherit;
 }
 
 .customer-card__avatar {
@@ -375,23 +380,33 @@ function cycleStatusFilter() {
 }
 
 .status {
-  font-size: 0.72rem;
-  padding: 2px 8px;
+  flex-shrink: 0;
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1;
+  padding: 6px 12px;
   border-radius: 999px;
+  white-space: nowrap;
 }
 
 .status--ok {
-  background: var(--color-primary-soft);
-  color: var(--color-primary);
+  background: #e8f5e9;
+  color: #2e7d32;
 }
 
-.status--muted {
-  background: #eef0ef;
-  color: var(--color-text-muted);
+.status--off {
+  background: #f5f5f5;
+  color: #757575;
+}
+
+.status--new {
+  background: #e3f2fd;
+  color: #1565c0;
 }
 
 .chevron {
   color: var(--color-text-muted);
+  flex-shrink: 0;
 }
 
 .promo {