boursecu_admin/src/pages/menuPages/customers/base/components/PargarWalletSyncAction.vue

<template>
  <div class="pargar-wallet-sync">
    <div class="pargar-wallet-sync__head">
      <div class="pargar-wallet-sync__icon" aria-hidden="true">
        <Icon icon="vuesax-linear:refresh-circle" :size="18" color="var(--admin-primary, #10913A)" />
      </div>
      <div class="pargar-wallet-sync__copy min-w-0 flex-1">
        <p class="pargar-wallet-sync__title">همگام‌سازی با پرگار</p>
        <p class="pargar-wallet-sync__hint">
          {{
            canSync
              ? 'موجودی را با ماندهٔ پرگار یکی می‌کند — تاریخچهٔ اسناد روی کیف replay نمی‌شود'
              : 'ابتدا کد حسابداری پرگار را برای این مشتری ثبت کنید'
          }}
        </p>
      </div>
    </div>
    <a-button
      type="primary"
      block
      size="small"
      class="pargar-wallet-sync__btn"
      :loading="loading"
      :disabled="!canSync || loading"
      @click="$emit('sync')"
    >
      همگام‌سازی مانده از پرگار
    </a-button>
  </div>
</template>

<script setup lang="ts">
import Icon from '@core/components/BaseIcon/src/Icon.vue'

defineProps<{
  loading?: boolean
  canSync?: boolean
}>()

defineEmits<{
  (e: 'sync'): void
}>()
</script>

<style scoped>
.pargar-wallet-sync {
  @apply mb-2.5 rounded-xl border border-base p-2.5;
  background: var(--admin-surface-muted, var(--admin-bg-muted, #f8fafc));
}

.pargar-wallet-sync__head {
  @apply mb-2.5 flex items-start gap-2;
}

.pargar-wallet-sync__icon {
  @apply flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-gray-50;
}

.pargar-wallet-sync__title {
  @apply m-0 text-sm font-700;
  color: var(--admin-text, inherit);
}

.pargar-wallet-sync__hint {
  @apply m-0 mt-0.5 text-xs leading-5;
  color: var(--admin-text-secondary, #6b7280);
}

.pargar-wallet-sync__btn {
  @apply font-600;
}
</style>