edit one business

2026-05-31 16:42:32 +03:30
parent 40abab5fde
commit 4eae73159a
6 changed files with 213 additions and 116 deletions
@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <div class="flex items-start justify-between gap-2">
+      <div class="min-w-0 flex-1">
+        <p class="font-semibold text-text">
+          {{ booking.business?.title ?? 'کسب‌وکار' }}
+        </p>
+        <p class="mt-0.5 text-sm text-muted">
+          {{ serviceTitle }}
+        </p>
+        <p class="mt-1 text-xs text-muted">
+          {{ formatDate(booking.scheduledAt) }}
+        </p>
+        <p
+          v-if="showCustomer && booking.customer?.mobile"
+          class="mt-1 text-xs text-muted"
+          dir="ltr"
+        >
+          {{ booking.customer.fullName ? `${booking.customer.fullName} · ` : '' }}{{ booking.customer.mobile }}
+        </p>
+        <p v-if="booking.note" class="mt-2 text-xs text-muted">{{ booking.note }}</p>
+        <span
+          class="mt-2 inline-block rounded-lg px-2 py-0.5 text-xs"
+          :class="statusClass"
+        >
+          {{ bookingStatusLabel(booking.status) }}
+        </span>
+      </div>
+    </div>
+
+    <div
+      v-if="canConfirm || canCancel"
+      class="mt-3 flex flex-wrap gap-2 border-t border-border pt-3"
+    >
+      <AppButton
+        v-if="canConfirm"
+        class="!w-auto flex-1 px-3"
+        :loading="actingId === booking.id"
+        @click="emit('confirm', booking)"
+      >
+        تأیید
+      </AppButton>
+      <AppButton
+        v-if="canCancel"
+        variant="danger"
+        class="!w-auto flex-1 px-3"
+        :loading="actingId === booking.id"
+        @click="emit('cancel', booking)"
+      >
+        لغو
+      </AppButton>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { Booking } from '@/api/types';
+import AppButton from '@/components/ui/AppButton.vue';
+import { bookingStatusLabel, formatDate } from '@/utils/format';
+
+const props = defineProps<{
+  booking: Booking;
+  actingId: string | null;
+  showCustomer: boolean;
+  canConfirm: boolean;
+  canCancel: boolean;
+}>();
+
+const emit = defineEmits<{
+  confirm: [booking: Booking];
+  cancel: [booking: Booking];
+}>();
+
+const serviceTitle = computed(
+  () => props.booking.businessService?.serviceTemplate?.title ?? 'خدمت',
+);
+
+const statusClass = computed(() => {
+  const status = props.booking.status;
+  if (status === 'confirmed' || status === 'completed') {
+    return 'bg-emerald-500/15 text-emerald-700 dark:text-emerald-400';
+  }
+  if (status === 'pending') {
+    return 'bg-amber-500/15 text-amber-700 dark:text-amber-400';
+  }
+  if (status === 'cancelled') {
+    return 'bg-red-500/15 text-red-600 dark:text-red-400';
+  }
+  return 'bg-surface-3 text-muted';
+});
+</script>