update rezerv

src/components/booking/BookingItem.vue

@@ -8,6 +8,9 @@
         <p class="mt-0.5 text-sm text-muted">
           {{ serviceTitle }}
         </p>
+        <p v-if="groupHint" class="mt-0.5 text-xs text-brand-600 dark:text-brand-500">
+          {{ groupHint }}
+        </p>
         <p class="mt-1 text-xs text-muted">
           {{ formatDate(booking.scheduledAt) }}
         </p>
@@ -72,8 +75,16 @@ const emit = defineEmits<{
   cancel: [booking: Booking];
 }>();
 
-const serviceTitle = computed(
-  () => props.booking.businessService?.serviceTemplate?.title ?? 'خدمت',
+const serviceTitle = computed(() => {
+  const title = props.booking.businessService?.serviceTemplate?.title ?? 'خدمت';
+  if (props.booking.serviceClass?.title) {
+    return `${title} · ${props.booking.serviceClass.title}`;
+  }
+  return title;
+});
+
+const groupHint = computed(() =>
+  props.booking.bookingGroupId ? 'بخشی از رزرو چندخدمتی' : '',
 );
 
 const statusClass = computed(() => {

src/components/booking/BookingSlotPicker.vue

@@ -93,7 +93,8 @@ const model = defineModel<string>({ default: '' });
 const props = defineProps<{
   label?: string;
   businessId: string;
-  businessServiceId: string;
+  businessServiceIds: string[];
+  serviceClassId?: string | null;
 }>();
 
 const dateParts = ref<Pick<JalaliDateTimeParts, 'jy' | 'jm' | 'jd'>>({
@@ -145,11 +146,10 @@ async function loadSlots() {
   try {
     ensureDateNotPast();
     const ymd = jalaliToGregorianYmd(dateParts.value);
-    const res = await fetchAvailableSlots(
-      props.businessId,
-      props.businessServiceId,
-      ymd,
-    );
+    const res = await fetchAvailableSlots(props.businessId, ymd, {
+      businessServiceIds: props.businessServiceIds,
+      serviceClassId: props.serviceClassId ?? undefined,
+    });
     slots.value = res.slots;
     if (model.value && !slots.value.includes(model.value)) {
       model.value = slots.value[0] ?? '';
@@ -182,12 +182,18 @@ function selectSlot(iso: string) {
 }
 
 watch(
-  () => [props.businessId, props.businessServiceId],
+  () => [props.businessId, props.businessServiceIds.join(','), props.serviceClassId],
   () => {
     model.value = '';
-    loadSlots();
+    if (props.businessServiceIds.length) {
+      loadSlots();
+    }
   },
 );
 
-onMounted(loadSlots);
+onMounted(() => {
+  if (props.businessServiceIds.length) {
+    loadSlots();
+  }
+});
 </script>

src/components/owner/ServiceClassManager.vue

@@ -0,0 +1,230 @@
+<template>
+  <section class="space-y-3 rounded-2xl border border-border bg-surface-2 p-4">
+    <div class="flex items-start justify-between gap-3">
+      <div>
+        <h2 class="text-base font-semibold text-text">کلاس‌بندی خدمات</h2>
+        <p class="mt-1 text-xs text-muted">
+          اختیاری — برای مثال کارواش می‌تواند بر اساس اندازه خودرو قیمت‌گذاری کند.
+        </p>
+      </div>
+      <label class="flex shrink-0 items-center gap-2 text-sm text-text">
+        <input
+          type="checkbox"
+          :checked="enabled"
+          @change="onToggleEnabled"
+        />
+        فعال
+      </label>
+    </div>
+
+    <p v-if="!enabled" class="text-sm text-muted">
+      در حالت غیرفعال، هر خدمت یک قیمت ثابت دارد. با فعال‌کردن، می‌توانید کلاس‌ها را تعریف کنید.
+    </p>
+
+    <template v-else>
+    <p v-if="error" class="rounded-xl border border-red-500/30 bg-red-500/10 px-3 py-2 text-sm text-red-600">
+      {{ error }}
+    </p>
+
+    <div v-if="loading" class="text-sm text-muted">در حال بارگذاری…</div>
+
+    <ul v-else-if="classes.length" class="space-y-2">
+      <li
+        v-for="item in classes"
+        :key="item.id"
+        class="rounded-xl border border-border bg-surface px-3 py-2"
+      >
+        <div v-if="editingId === item.id" class="space-y-2">
+          <AppInput id="editClassTitle" v-model="editForm.title" label="عنوان کلاس" required />
+          <div class="space-y-1.5">
+            <label for="editClassDesc" class="block text-sm font-medium text-muted">توضیح (اختیاری)</label>
+            <textarea
+              id="editClassDesc"
+              v-model="editForm.description"
+              rows="2"
+              class="w-full rounded-xl border border-border bg-surface-2 px-4 py-3 text-sm text-text outline-none focus:border-brand-500"
+            />
+          </div>
+          <label class="flex items-center gap-2 text-xs text-muted">
+            <input v-model="editForm.isActive" type="checkbox" />
+            فعال
+          </label>
+          <div class="flex gap-2">
+            <AppButton class="!w-auto flex-1" :loading="saving" @click="saveEdit(item.id)">
+              ذخیره
+            </AppButton>
+            <AppButton variant="ghost" class="!w-auto px-4" @click="cancelEdit">انصراف</AppButton>
+          </div>
+        </div>
+        <div v-else class="flex items-start justify-between gap-2">
+          <div class="min-w-0">
+            <p class="font-medium text-text">{{ item.title }}</p>
+            <p v-if="item.description" class="mt-0.5 text-xs text-muted">{{ item.description }}</p>
+            <span
+              v-if="!item.isActive"
+              class="mt-1 inline-block rounded-lg bg-surface-3 px-2 py-0.5 text-xs text-muted"
+            >
+              غیرفعال
+            </span>
+          </div>
+          <div class="flex shrink-0 gap-1">
+            <AppButton variant="ghost" class="!w-auto px-2 text-xs" @click="startEdit(item)">
+              ویرایش
+            </AppButton>
+            <AppButton variant="danger" class="!w-auto px-2 text-xs" @click="onDelete(item)">
+              حذف
+            </AppButton>
+          </div>
+        </div>
+      </li>
+    </ul>
+
+    <p v-else class="text-sm text-muted">هنوز کلاسی تعریف نشده است.</p>
+
+    <form class="space-y-3 border-t border-border pt-3" @submit.prevent="onAdd">
+      <p class="text-sm font-medium text-text">افزودن کلاس</p>
+      <AppInput id="classTitle" v-model="form.title" label="عنوان کلاس" required />
+      <div class="space-y-1.5">
+        <label for="classDesc" class="block text-sm font-medium text-muted">توضیح (اختیاری)</label>
+        <textarea
+          id="classDesc"
+          v-model="form.description"
+          rows="2"
+          class="w-full rounded-xl border border-border bg-surface-2 px-4 py-3 text-sm text-text outline-none focus:border-brand-500"
+        />
+      </div>
+      <AppButton type="submit" :loading="adding">افزودن کلاس</AppButton>
+    </form>
+    </template>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue';
+import {
+  createBusinessServiceClass,
+  deleteBusinessServiceClass,
+  fetchBusinessServiceClasses,
+  updateBusinessServiceClass,
+} from '@/api/business-service-classes';
+import { ApiError } from '@/api/client';
+import type { BusinessServiceClass } from '@/api/types';
+import AppButton from '@/components/ui/AppButton.vue';
+import AppInput from '@/components/ui/AppInput.vue';
+
+const props = defineProps<{
+  businessId: string;
+  enabled: boolean;
+}>();
+
+const emit = defineEmits<{
+  updated: [classes: BusinessServiceClass[]];
+  'update:enabled': [value: boolean];
+}>();
+
+const classes = ref<BusinessServiceClass[]>([]);
+const loading = ref(false);
+const adding = ref(false);
+const saving = ref(false);
+const error = ref('');
+const editingId = ref<string | null>(null);
+
+const form = ref({ title: '', description: '' });
+const editForm = ref({ title: '', description: '', isActive: true });
+
+async function load() {
+  if (!props.enabled) {
+    classes.value = [];
+    emit('updated', []);
+    return;
+  }
+  loading.value = true;
+  error.value = '';
+  try {
+    classes.value = await fetchBusinessServiceClasses(props.businessId);
+    emit('updated', classes.value);
+  } catch (e) {
+    error.value = e instanceof ApiError ? e.message : 'بارگذاری کلاس‌ها ناموفق بود';
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function onAdd() {
+  const title = form.value.title.trim();
+  if (!title) return;
+  adding.value = true;
+  error.value = '';
+  try {
+    await createBusinessServiceClass({
+      businessId: props.businessId,
+      title,
+      description: form.value.description.trim() || null,
+    });
+    form.value = { title: '', description: '' };
+    await load();
+  } catch (e) {
+    error.value = e instanceof ApiError ? e.message : 'افزودن کلاس ناموفق بود';
+  } finally {
+    adding.value = false;
+  }
+}
+
+function startEdit(item: BusinessServiceClass) {
+  editingId.value = item.id;
+  editForm.value = {
+    title: item.title,
+    description: item.description ?? '',
+    isActive: item.isActive,
+  };
+}
+
+function cancelEdit() {
+  editingId.value = null;
+}
+
+async function saveEdit(id: string) {
+  const title = editForm.value.title.trim();
+  if (!title) return;
+  saving.value = true;
+  error.value = '';
+  try {
+    await updateBusinessServiceClass(id, {
+      title,
+      description: editForm.value.description.trim() || null,
+      isActive: editForm.value.isActive,
+    });
+    editingId.value = null;
+    await load();
+  } catch (e) {
+    error.value = e instanceof ApiError ? e.message : 'ذخیره ناموفق بود';
+  } finally {
+    saving.value = false;
+  }
+}
+
+async function onDelete(item: BusinessServiceClass) {
+  if (!confirm(`«${item.title}» حذف شود؟`)) return;
+  error.value = '';
+  try {
+    await deleteBusinessServiceClass(item.id);
+    await load();
+  } catch (e) {
+    error.value = e instanceof ApiError ? e.message : 'حذف ناموفق بود';
+  }
+}
+
+function onToggleEnabled(event: Event) {
+  const checked = (event.target as HTMLInputElement).checked;
+  emit('update:enabled', checked);
+}
+
+watch(
+  () => [props.businessId, props.enabled],
+  () => {
+    if (props.businessId) load();
+  },
+);
+
+onMounted(load);
+</script>