fix

src/features/admin/users/components/verifications/VerificationItem.vue

@@ -21,25 +21,25 @@
       <div class="verification-item__date">
         <span class="verification-item__date-label">تاریخ ثبت نام:</span>
         <span class="verification-item__date-value">
-          {{ formatJalaaliDate(user.createdAt) || '—' }}
+          {{ formatJalaaliDateTime(user.createdAt) || '—' }}
         </span>
       </div>
-      <div
-        v-if="user.status === 'verified'"
-        class="verification-item__badge verification-item__badge--pending"
-      >
-        <span class="verification-item__dot" />
-        <span>در انتظار تایید</span>
-      </div>
-      <button
-        v-else-if="user.status === 'rejected'"
-        type="button"
-        class="verification-item__badge verification-item__badge--rejected"
+      <Badge
+        v-if="user.status === 'rejected'"
+        variant="danger"
+        :dot="true"
+        value="رد شده"
+        :clickable="true"
         @click="emit('show-reject-reason', user)"
-      >
-        <span class="verification-item__dot" />
-        <span>رد شده</span>
-      </button>
+      />
+      <Badge
+        v-else-if="statusLabel"
+        :variant="statusVariant"
+        :dot="true"
+        :value="statusLabel"
+        :clickable="user.status === 'blocked'"
+        @click="emit('show-reject-reason', user)"
+      />
     </div>
 
     <div class="verification-item__actions">
@@ -54,11 +54,11 @@
         </template>
       </CircleButton>
       <CircleButton
-        v-if="user.status !== 'rejected'"
+        v-if="user.status !== 'blocked'"
         tooltip="عدم تایید"
         bg-color="rgba(204, 40, 49, 0.08)"
         size="2.5rem"
-        @click="emit('verify-user', { id: user.id, status: 'rejected' })"
+        @click="emit('verify-user', { id: user.id, status: 'blocked' })"
       >
         <template #icon>
           <SvgIcon name="close" :size="20" color="var(--color-error)" />
@@ -80,10 +80,12 @@
 
 <script setup>
 import { computed } from 'vue'
+import { USER_STATUS } from '@/enums'
+import Badge from '@/components/Badge.vue'
 import BaseButton from '@/components/BaseButton.vue'
 import SvgIcon from '@/components/icons/SvgIcon.vue'
-import { formatJalaaliDate } from '@/utils/date-utils'
 import CircleButton from '@/components/CircleButton.vue'
+import { formatJalaaliDateTime } from '@/utils/date-utils'
 
 const props = defineProps({
   user: { type: Object, required: true },
@@ -92,7 +94,16 @@ const props = defineProps({
 
 const emit = defineEmits(['show-details', 'show-reject-reason', 'verify-user'])
 
+const STATUS_VARIANTS = {
+  pending: 'neutral',
+  verified: 'warning',
+  approved: 'success',
+  blocked: 'danger',
+}
+
 const fullName = computed(() => `${props.user.name || ''}`.trim() || '—')
+const statusLabel = computed(() => USER_STATUS[props.user.status] || '')
+const statusVariant = computed(() => STATUS_VARIANTS[props.user.status] || 'neutral')
 </script>
 
 <style lang="scss" scoped>
@@ -202,37 +213,6 @@ const fullName = computed(() => `${props.user.name || ''}`.trim() || '—')
     font-size: 0.75rem;
   }
 
-  &__badge {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.375rem;
-    padding: 0.25rem 1rem;
-    border-radius: 0.875rem;
-    font-family: var(--font-family-fa);
-    font-size: 0.7rem;
-    line-height: 1.5;
-    border: none;
-    cursor: default;
-
-    &--pending {
-      background: rgba(0, 255, 68, 6%);
-      color: #009a12;
-    }
-
-    &--rejected {
-      background: rgba(204, 40, 49, 6%);
-      color: var(--color-error);
-      cursor: pointer;
-    }
-  }
-
-  &__dot {
-    width: 0.375rem;
-    height: 0.375rem;
-    border-radius: 9999px;
-    background: currentcolor;
-  }
-
   &__actions {
     display: flex;
     justify-content: flex-end;