From 031f0a44abe0439abf5ca253ec8a1312fe2c94b1 Mon Sep 17 00:00:00 2001
From: Mahdi <mahdi.banilohi@gmail.com>
Date: Mon, 1 Jun 2026 21:01:45 +0330
Subject: [PATCH] edit business

---
 src/api/types.ts                             |   2 +
 src/components/brand/AppLogo.vue             |   4 +-
 src/components/owner/ServiceClassManager.vue | 198 +++++++++--------
 src/components/ui/AppIcon.vue                |  10 +
 src/components/ui/AppIconButton.vue          |  39 ++++
 src/components/ui/AppInput.vue               |  55 ++++-
 src/layouts/WebAppLayout.vue                 |   2 +-
 src/types/icons.ts                           |   7 +-
 src/views/app/AppOwnerView.vue               | 215 ++++++++++++++-----
 9 files changed, 387 insertions(+), 145 deletions(-)
 create mode 100644 src/components/ui/AppIconButton.vue

diff --git a/src/api/types.ts b/src/api/types.ts
index b8ba013..6d9755d 100644
--- a/src/api/types.ts
+++ b/src/api/types.ts
@@ -24,6 +24,7 @@ export type Business = {
   isActive: boolean;
   serviceClassesEnabled?: boolean;
   concurrentCapacity?: number;
+  slotStepMinutes?: number;
   categoryId: string;
   ownerId?: string | null;
   category?: BusinessCategory;
@@ -67,6 +68,7 @@ export type UpdateBusinessPayload = {
   longitude?: number | null;
   serviceClassesEnabled?: boolean;
   concurrentCapacity?: number;
+  slotStepMinutes?: number;
 };
 
 export type BusinessServiceClass = {
diff --git a/src/components/brand/AppLogo.vue b/src/components/brand/AppLogo.vue
index 4f41b8d..e577274 100644
--- a/src/components/brand/AppLogo.vue
+++ b/src/components/brand/AppLogo.vue
@@ -7,12 +7,12 @@
   />
   <template v-else>
     <img
-      src="/brand/logo-dark.png"
+      src="/brand/logo-lite.png"
       alt="منتایم"
       :class="['dark:hidden', imgClass]"
     />
     <img
-      src="/brand/logo-lite.png"
+      src="/brand/logo-dark.png"
       alt="منتایم"
       :class="['hidden dark:block', imgClass]"
     />
diff --git a/src/components/owner/ServiceClassManager.vue b/src/components/owner/ServiceClassManager.vue
index e7ac37e..6f509f1 100644
--- a/src/components/owner/ServiceClassManager.vue
+++ b/src/components/owner/ServiceClassManager.vue
@@ -1,106 +1,122 @@
 <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">
-          اختیاری — برای مثال کارواش می‌تواند بر اساس اندازه خودرو قیمت‌گذاری کند.
+  <section class="border-t border-border pt-4">
+    <button
+      type="button"
+      class="flex w-full items-center justify-between gap-3 rounded-2xl border border-border bg-surface-2 px-4 py-3 text-start transition hover:border-brand-500/30"
+      :aria-expanded="expanded"
+      @click="expanded = !expanded"
+    >
+      <div class="min-w-0 flex-1">
+        <div class="flex items-center gap-2">
+          <AppIcon name="folder" size="sm" class="text-brand-600 dark:text-brand-500" />
+          <h2 class="text-base font-semibold text-text">کلاس‌بندی خدمات</h2>
+        </div>
+        <p v-if="!expanded" class="mt-1 truncate text-xs text-muted">
+          {{ collapsedSummary }}
         </p>
       </div>
-      <label class="flex shrink-0 items-center gap-2 text-sm text-text">
-        <input
-          type="checkbox"
-          :checked="enabled"
-          @change="onToggleEnabled"
+      <div class="flex shrink-0 items-center gap-2">
+        <label class="flex items-center gap-2 text-sm text-text" @click.stop>
+          <input type="checkbox" :checked="enabled" @change="onToggleEnabled" />
+          فعال
+        </label>
+        <AppIcon
+          :name="expanded ? 'chevron-up' : 'chevron-down'"
+          size="sm"
+          class="text-muted"
         />
-        فعال
-      </label>
-    </div>
+      </div>
+    </button>
 
-    <p v-if="!enabled" class="text-sm text-muted">
-      در حالت غیرفعال، هر خدمت یک قیمت ثابت دارد. با فعال‌کردن، می‌توانید کلاس‌ها را تعریف کنید.
-    </p>
+    <div v-show="expanded" class="mt-3 space-y-3">
+      <p class="text-xs leading-relaxed 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>
+      <p v-if="!enabled" class="text-sm text-muted">
+        در حالت غیرفعال، هر خدمت یک قیمت ثابت دارد. با فعال‌کردن، می‌توانید کلاس‌ها را تعریف کنید.
+      </p>
 
-    <div v-if="loading" class="text-sm text-muted">در حال بارگذاری…</div>
+      <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>
 
-    <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 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 items-center gap-1">
+                <AppIconButton icon="pencil" label="ویرایش کلاس" @click="startEdit(item)" />
+                <AppIconButton icon="trash" label="حذف کلاس" variant="danger" @click="onDelete(item)" />
+              </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="editClassDesc" class="block text-sm font-medium text-muted">توضیح (اختیاری)</label>
+            <label for="classDesc" class="block text-sm font-medium text-muted">توضیح (اختیاری)</label>
             <textarea
-              id="editClassDesc"
-              v-model="editForm.description"
+              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>
-          <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>
+          <AppButton type="submit" :loading="adding">افزودن کلاس</AppButton>
+        </form>
+      </template>
+    </div>
   </section>
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, watch } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import {
   createBusinessServiceClass,
   deleteBusinessServiceClass,
@@ -110,6 +126,8 @@ import {
 import { ApiError } from '@/api/client';
 import type { BusinessServiceClass } from '@/api/types';
 import AppButton from '@/components/ui/AppButton.vue';
+import AppIcon from '@/components/ui/AppIcon.vue';
+import AppIconButton from '@/components/ui/AppIconButton.vue';
 import AppInput from '@/components/ui/AppInput.vue';
 
 const props = defineProps<{
@@ -122,6 +140,7 @@ const emit = defineEmits<{
   'update:enabled': [value: boolean];
 }>();
 
+const expanded = ref(false);
 const classes = ref<BusinessServiceClass[]>([]);
 const loading = ref(false);
 const adding = ref(false);
@@ -132,6 +151,15 @@ const editingId = ref<string | null>(null);
 const form = ref({ title: '', description: '' });
 const editForm = ref({ title: '', description: '', isActive: true });
 
+const collapsedSummary = computed(() => {
+  if (!props.enabled) return 'غیرفعال — هر خدمت یک قیمت ثابت';
+  if (loading.value) return 'فعال — در حال بارگذاری…';
+  const count = classes.value.length;
+  if (count === 0) return 'فعال — هنوز کلاسی تعریف نشده';
+  const activeCount = classes.value.filter((c) => c.isActive).length;
+  return `فعال · ${count} کلاس (${activeCount} فعال)`;
+});
+
 async function load() {
   if (!props.enabled) {
     classes.value = [];
diff --git a/src/components/ui/AppIcon.vue b/src/components/ui/AppIcon.vue
index d18251d..eac58d9 100644
--- a/src/components/ui/AppIcon.vue
+++ b/src/components/ui/AppIcon.vue
@@ -19,16 +19,21 @@ import {
   CircleCheck,
   Clock,
   ClipboardList,
+  Eye,
+  EyeOff,
   FolderOpen,
   Home,
   LayoutDashboard,
   MapPin,
   Moon,
   Plus,
+  Pencil,
   Search,
   Store,
   Sun,
+  Trash2,
   User,
+  UserCog,
   Users,
   X,
 } from '@lucide/vue';
@@ -55,6 +60,11 @@ const iconMap: Record<AppIconName, Component> = {
   'chevron-down': ChevronDown,
   'chevron-up': ChevronUp,
   clock: Clock,
+  pencil: Pencil,
+  trash: Trash2,
+  'user-cog': UserCog,
+  eye: Eye,
+  'eye-off': EyeOff,
 };
 
 const props = withDefaults(
diff --git a/src/components/ui/AppIconButton.vue b/src/components/ui/AppIconButton.vue
new file mode 100644
index 0000000..399d9c4
--- /dev/null
+++ b/src/components/ui/AppIconButton.vue
@@ -0,0 +1,39 @@
+<template>
+  <button
+    type="button"
+    class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/50 disabled:pointer-events-none disabled:opacity-50"
+    :class="variantClasses"
+    :aria-label="label"
+    :disabled="disabled"
+    @click="emit('click', $event)"
+  >
+    <AppIcon :name="icon" size="sm" />
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import AppIcon from '@/components/ui/AppIcon.vue';
+import type { AppIconName } from '@/types/icons';
+
+const props = withDefaults(
+  defineProps<{
+    icon: AppIconName;
+    label: string;
+    variant?: 'default' | 'danger';
+    disabled?: boolean;
+  }>(),
+  {
+    variant: 'default',
+    disabled: false,
+  },
+);
+
+const emit = defineEmits<{ click: [event: MouseEvent] }>();
+
+const variantClasses = computed(() =>
+  props.variant === 'danger'
+    ? 'text-muted hover:bg-red-500/10 hover:text-red-600'
+    : 'text-muted hover:bg-surface-3 hover:text-text',
+);
+</script>
diff --git a/src/components/ui/AppInput.vue b/src/components/ui/AppInput.vue
index 809bc24..45a32d5 100644
--- a/src/components/ui/AppInput.vue
+++ b/src/components/ui/AppInput.vue
@@ -3,22 +3,40 @@
     <label v-if="label" :for="id" class="block text-sm font-medium text-muted">
       {{ label }}
     </label>
-    <input
-      :id="id"
-      v-model="model"
-      class="w-full rounded-xl border border-border bg-surface-2 px-4 py-3 text-text outline-none transition placeholder:text-[var(--color-placeholder)] focus:border-brand-500 focus:ring-2 focus:ring-brand-500/30"
-      :class="ltr ? 'text-left' : ''"
-      v-bind="$attrs"
-    />
+    <div class="relative">
+      <input
+        :id="id"
+        v-model="model"
+        class="w-full rounded-xl border border-border bg-surface-2 py-3 text-text outline-none transition placeholder:text-[var(--color-placeholder)] focus:border-brand-500 focus:ring-2 focus:ring-brand-500/30"
+        :class="inputPaddingClass"
+        :type="resolvedType"
+        v-bind="inputAttrs"
+      />
+      <button
+        v-if="isPassword"
+        type="button"
+        class="absolute top-1/2 flex h-9 w-9 -translate-y-1/2 items-center justify-center rounded-lg text-muted transition hover:text-text"
+        :class="toggleButtonClass"
+        :aria-label="showPassword ? 'مخفی کردن رمز' : 'نمایش رمز'"
+        @click="showPassword = !showPassword"
+      >
+        <AppIcon :name="showPassword ? 'eye-off' : 'eye'" size="sm" />
+      </button>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { computed, ref, useAttrs } from 'vue';
+import AppIcon from '@/components/ui/AppIcon.vue';
+
 defineOptions({ inheritAttrs: false });
 
 const model = defineModel<string>({ default: '' });
+const attrs = useAttrs();
+const showPassword = ref(false);
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     label?: string;
     id?: string;
@@ -26,4 +44,25 @@ withDefaults(
   }>(),
   { ltr: false },
 );
+
+const isPassword = computed(() => attrs.type === 'password');
+
+const resolvedType = computed(() => {
+  if (!isPassword.value) return attrs.type as string | undefined;
+  return showPassword.value ? 'text' : 'password';
+});
+
+const inputAttrs = computed(() => {
+  const { type: _type, ...rest } = attrs;
+  return rest;
+});
+
+const inputPaddingClass = computed(() => {
+  if (isPassword.value) {
+    return props.ltr ? 'pl-4 pr-11 text-left' : 'pl-11 pr-4';
+  }
+  return props.ltr ? 'px-4 text-left' : 'px-4';
+});
+
+const toggleButtonClass = computed(() => (props.ltr ? 'right-1' : 'left-1'));
 </script>
diff --git a/src/layouts/WebAppLayout.vue b/src/layouts/WebAppLayout.vue
index 8466de1..f9dda70 100644
--- a/src/layouts/WebAppLayout.vue
+++ b/src/layouts/WebAppLayout.vue
@@ -4,7 +4,7 @@
       class="sticky top-0 z-10 flex items-center justify-between border-b border-border bg-surface/95 px-4 py-3 backdrop-blur"
     >
       <div class="flex min-w-0 items-center gap-3">
-        <AppLogo variant="horizontal" class="h-8 shrink-0" />
+        <AppLogo variant="horizontal" class="h-10 shrink-0" />
         <p v-if="auth.user" class="text-xs text-muted" dir="ltr">{{ auth.user.mobile }}</p>
       </div>
       <div class="flex items-center gap-2">
diff --git a/src/types/icons.ts b/src/types/icons.ts
index b61a361..0ec0356 100644
--- a/src/types/icons.ts
+++ b/src/types/icons.ts
@@ -18,7 +18,12 @@ export type AppIconName =
   | 'search'
   | 'chevron-down'
   | 'chevron-up'
-  | 'clock';
+  | 'clock'
+  | 'pencil'
+  | 'trash'
+  | 'user-cog'
+  | 'eye'
+  | 'eye-off';
 
 export type NavItem = {
   to: string;
diff --git a/src/views/app/AppOwnerView.vue b/src/views/app/AppOwnerView.vue
index cd5f6dc..03345a6 100644
--- a/src/views/app/AppOwnerView.vue
+++ b/src/views/app/AppOwnerView.vue
@@ -28,16 +28,23 @@
       <form class="space-y-4" @submit.prevent="onSave">
         <h2 class="text-base font-semibold text-text">اطلاعات کسب‌وکار</h2>
 
-        <div class="rounded-2xl border border-border bg-surface-2 p-4">
-          <p class="text-xs text-muted">دسته</p>
-          <p class="mt-0.5 font-medium text-text">{{ business.category?.title ?? '—' }}</p>
-          <span
-            class="mt-2 inline-block rounded-lg px-2 py-0.5 text-xs"
-            :class="business.isActive ? 'bg-green-500/15 text-green-700' : 'bg-amber-500/15 text-amber-700'"
-          >
-            {{ business.isActive ? 'فعال' : 'غیرفعال' }}
-          </span>
-        </div>
+        <dl class="space-y-3 rounded-2xl border border-border bg-surface-2 p-4">
+          <div class="flex items-center justify-between gap-4">
+            <dt class="shrink-0 text-xs text-muted">دسته</dt>
+            <dd class="font-medium text-text">{{ business.category?.title ?? '—' }}</dd>
+          </div>
+          <div class="flex items-center justify-between gap-4">
+            <dt class="shrink-0 text-xs text-muted">وضعیت</dt>
+            <dd>
+              <span
+                class="inline-block rounded-lg px-2 py-0.5 text-xs"
+                :class="business.isActive ? 'bg-green-500/15 text-green-700' : 'bg-amber-500/15 text-amber-700'"
+              >
+                {{ business.isActive ? 'فعال' : 'غیرفعال' }}
+              </span>
+            </dd>
+          </div>
+        </dl>
 
         <AppInput id="ownerTitle" v-model="form.title" label="نام کسب‌وکار" required />
 
@@ -61,22 +68,65 @@
         />
         <AppInput id="ownerAddress" v-model="form.address" label="آدرس" />
 
-        <AppInput
-          id="ownerConcurrentCapacity"
-          v-model="form.concurrentCapacity"
-          label="پذیرش همزمان"
-          type="number"
-          inputmode="numeric"
-          ltr
-          required
-        />
-        <p class="-mt-2 text-xs text-muted">
-          حداکثر تعداد مشتری که همزمان می‌توانید پذیرش کنید. مثلاً ۳ یعنی هر ساعت تا ۳ رزرو هم‌پوشان.
-        </p>
-
         <AppButton type="submit" :loading="saving">ذخیره تغییرات</AppButton>
       </form>
 
+      <section class="border-t border-border pt-4">
+        <button
+          type="button"
+          class="flex w-full items-center justify-between gap-3 rounded-2xl border border-border bg-surface-2 px-4 py-3 text-start transition hover:border-brand-500/30"
+          :aria-expanded="bookingExpanded"
+          @click="bookingExpanded = !bookingExpanded"
+        >
+          <div class="min-w-0 flex-1">
+            <div class="flex items-center gap-2">
+              <AppIcon name="calendar" size="sm" class="text-brand-600 dark:text-brand-500" />
+              <h2 class="text-base font-semibold text-text">تنظیمات نوبت‌دهی</h2>
+            </div>
+            <p v-if="!bookingExpanded" class="mt-1 truncate text-xs text-muted">
+              {{ bookingSummary }}
+            </p>
+          </div>
+          <AppIcon
+            :name="bookingExpanded ? 'chevron-up' : 'chevron-down'"
+            size="sm"
+            class="shrink-0 text-muted"
+          />
+        </button>
+
+        <div v-show="bookingExpanded" class="mt-3 space-y-4">
+          <AppInput
+            id="ownerConcurrentCapacity"
+            v-model="bookingForm.concurrentCapacity"
+            label="پذیرش همزمان"
+            type="number"
+            inputmode="numeric"
+            ltr
+            required
+          />
+          <p class="-mt-2 text-xs text-muted">
+            حداکثر تعداد مشتری که همزمان می‌توانید پذیرش کنید. مثلاً ۳ یعنی هر ساعت تا ۳ رزرو هم‌پوشان.
+          </p>
+
+          <AppInput
+            id="ownerSlotStep"
+            v-model="bookingForm.slotStepMinutes"
+            label="گام نوبت‌دهی (دقیقه)"
+            type="number"
+            inputmode="numeric"
+            ltr
+            required
+          />
+          <p class="-mt-2 text-xs text-muted">
+            فاصله بین ساعت‌های قابل رزرو. مثلاً ۳۰ یعنی ۱۰:۰۰، ۱۰:۳۰، ۱۱:۰۰ و …
+          </p>
+
+          <AppButton :loading="savingBooking" @click="onSaveBookingSettings">
+            ذخیره تنظیمات نوبت‌دهی
+          </AppButton>
+        </div>
+      </section>
+
       <BusinessAvailabilityEditor
         v-if="business"
         :business-id="business.id"
@@ -90,8 +140,30 @@
         @update:enabled="onServiceClassesEnabledChange"
       />
 
-      <section class="space-y-4 border-t border-border pt-6">
-        <h2 class="text-base font-semibold text-text">خدمات و قیمت‌ها</h2>
+      <section class="border-t border-border pt-4">
+        <button
+          type="button"
+          class="flex w-full items-center justify-between gap-3 rounded-2xl border border-border bg-surface-2 px-4 py-3 text-start transition hover:border-brand-500/30"
+          :aria-expanded="servicesExpanded"
+          @click="servicesExpanded = !servicesExpanded"
+        >
+          <div class="min-w-0 flex-1">
+            <div class="flex items-center gap-2">
+              <AppIcon name="clipboard-list" size="sm" class="text-brand-600 dark:text-brand-500" />
+              <h2 class="text-base font-semibold text-text">خدمات و قیمت‌ها</h2>
+            </div>
+            <p v-if="!servicesExpanded" class="mt-1 truncate text-xs text-muted">
+              {{ servicesSummary }}
+            </p>
+          </div>
+          <AppIcon
+            :name="servicesExpanded ? 'chevron-up' : 'chevron-down'"
+            size="sm"
+            class="shrink-0 text-muted"
+          />
+        </button>
+
+        <div v-show="servicesExpanded" class="mt-3 space-y-4">
         <p class="text-xs text-muted">
           خدماتی که اینجا ثبت می‌کنید در صفحه کسب‌وکار برای مشتریان و مقایسه نمایش داده می‌شود.
         </p>
@@ -116,14 +188,20 @@
                   {{ svc.serviceTemplate.description }}
                 </p>
               </div>
-              <label class="flex shrink-0 items-center gap-1 text-xs text-muted">
-                <input
-                  type="checkbox"
-                  :checked="svc.isActive"
-                  @change="onToggleActive(svc)"
-                />
-                فعال
-              </label>
+              <div class="flex shrink-0 items-center gap-1">
+                <label class="flex items-center gap-1 text-xs text-muted">
+                  <input
+                    type="checkbox"
+                    :checked="svc.isActive"
+                    @change="onToggleActive(svc)"
+                  />
+                  فعال
+                </label>
+                <template v-if="editingId !== svc.id">
+                  <AppIconButton icon="pencil" label="ویرایش خدمت" @click="startEdit(svc)" />
+                  <AppIconButton icon="trash" label="حذف خدمت" variant="danger" @click="onDelete(svc)" />
+                </template>
+              </div>
             </div>
 
             <div v-if="editingId === svc.id" class="mt-3 space-y-2">
@@ -212,14 +290,6 @@
                   )
                 }}</span>
               </div>
-              <div class="flex flex-wrap items-center gap-2">
-              <AppButton variant="ghost" class="!w-auto px-2 text-xs" @click="startEdit(svc)">
-                ویرایش
-              </AppButton>
-              <AppButton variant="danger" class="!w-auto px-2 text-xs" @click="onDelete(svc)">
-                حذف
-              </AppButton>
-              </div>
             </div>
           </li>
         </ul>
@@ -359,6 +429,7 @@
             <AppButton type="submit" :loading="addingCustom">ارسال برای تأیید</AppButton>
           </form>
         </section>
+        </div>
       </section>
     </div>
   </WebAppLayout>
@@ -391,6 +462,8 @@ import { ApiError } from '@/api/client';
 import BusinessAvailabilityEditor from '@/components/owner/BusinessAvailabilityEditor.vue';
 import ServiceClassManager from '@/components/owner/ServiceClassManager.vue';
 import AppButton from '@/components/ui/AppButton.vue';
+import AppIcon from '@/components/ui/AppIcon.vue';
+import AppIconButton from '@/components/ui/AppIconButton.vue';
 import AppInput from '@/components/ui/AppInput.vue';
 import PriceInput from '@/components/ui/PriceInput.vue';
 import WebAppLayout from '@/layouts/WebAppLayout.vue';
@@ -413,6 +486,7 @@ const templates = ref<Awaited<ReturnType<typeof fetchServiceTemplates>>>([]);
 const loading = ref(true);
 const loadingServices = ref(false);
 const saving = ref(false);
+const savingBooking = ref(false);
 const savingService = ref(false);
 const addingService = ref(false);
 const addingCustom = ref(false);
@@ -420,15 +494,22 @@ const serviceRequests = ref<BusinessServiceRequest[]>([]);
 const error = ref('');
 const message = ref('');
 const editingId = ref<string | null>(null);
+const servicesExpanded = ref(false);
 
 const form = ref({
   title: '',
   description: '',
   contactPhone: '',
   address: '',
-  concurrentCapacity: '1',
 });
 
+const bookingForm = ref({
+  concurrentCapacity: '1',
+  slotStepMinutes: '30',
+});
+
+const bookingExpanded = ref(false);
+
 const serviceForm = ref({
   serviceTemplateId: '',
   price: '',
@@ -460,6 +541,19 @@ const hasServiceClasses = computed(
   () => business.value?.serviceClassesEnabled === true && activeClasses.value.length > 0,
 );
 
+const servicesSummary = computed(() => {
+  if (loadingServices.value) return 'در حال بارگذاری…';
+  const count = services.value.length;
+  if (count === 0) return 'هنوز خدمتی ثبت نشده';
+  const activeCount = services.value.filter((s) => s.isActive).length;
+  return `${count} خدمت · ${activeCount} فعال`;
+});
+
+const bookingSummary = computed(
+  () =>
+    `${bookingForm.value.concurrentCapacity} همزمان · گام ${bookingForm.value.slotStepMinutes} دقیقه`,
+);
+
 function emptyClassPriceForm() {
   const result: Record<string, { price: string; durationMinutes: string }> = {};
   for (const cls of activeClasses.value) {
@@ -550,7 +644,10 @@ onMounted(async () => {
         description: business.value.description ?? '',
         contactPhone: business.value.contactPhone ?? '',
         address: business.value.address ?? '',
+      };
+      bookingForm.value = {
         concurrentCapacity: String(business.value.concurrentCapacity ?? 1),
+        slotStepMinutes: String(business.value.slotStepMinutes ?? 30),
       };
       await loadServicesAndTemplates();
     }
@@ -563,11 +660,6 @@ onMounted(async () => {
 
 async function onSave() {
   if (!business.value) return;
-  const concurrentCapacity = Number.parseInt(form.value.concurrentCapacity, 10);
-  if (!Number.isFinite(concurrentCapacity) || concurrentCapacity < 1 || concurrentCapacity > 20) {
-    error.value = 'پذیرش همزمان باید عددی بین ۱ تا ۲۰ باشد.';
-    return;
-  }
   saving.value = true;
   error.value = '';
   message.value = '';
@@ -577,7 +669,6 @@ async function onSave() {
       description: form.value.description.trim() || null,
       contactPhone: form.value.contactPhone.trim() || null,
       address: form.value.address.trim() || null,
-      concurrentCapacity,
     });
     message.value = 'اطلاعات ذخیره شد.';
   } catch (e) {
@@ -587,6 +678,34 @@ async function onSave() {
   }
 }
 
+async function onSaveBookingSettings() {
+  if (!business.value) return;
+  const concurrentCapacity = Number.parseInt(bookingForm.value.concurrentCapacity, 10);
+  if (!Number.isFinite(concurrentCapacity) || concurrentCapacity < 1 || concurrentCapacity > 20) {
+    error.value = 'پذیرش همزمان باید عددی بین ۱ تا ۲۰ باشد.';
+    return;
+  }
+  const slotStepMinutes = Number.parseInt(bookingForm.value.slotStepMinutes, 10);
+  if (!Number.isFinite(slotStepMinutes) || slotStepMinutes < 5 || slotStepMinutes > 120) {
+    error.value = 'گام نوبت‌دهی باید عددی بین ۵ تا ۱۲۰ دقیقه باشد.';
+    return;
+  }
+  savingBooking.value = true;
+  error.value = '';
+  message.value = '';
+  try {
+    business.value = await updateBusiness(business.value.id, {
+      concurrentCapacity,
+      slotStepMinutes,
+    });
+    message.value = 'تنظیمات نوبت‌دهی ذخیره شد.';
+  } catch (e) {
+    error.value = e instanceof ApiError ? e.message : 'خطا در ذخیره';
+  } finally {
+    savingBooking.value = false;
+  }
+}
+
 async function onAddService() {
   if (!business.value || !serviceForm.value.serviceTemplateId) return;