From d0439448053ad88f8f5e05e4ed89745636150417 Mon Sep 17 00:00:00 2001
From: Mahdi <mahdi.banilohi@gmail.com>
Date: Sun, 24 May 2026 11:34:52 +0330
Subject: [PATCH] Add business owner service management for price comparison

---
 src/api/business-services.ts            |  47 ++-
 src/api/service-templates.ts            |  10 +
 src/views/app/AppBusinessDetailView.vue |   2 +-
 src/views/app/AppOwnerView.vue          | 369 +++++++++++++++++++++---
 4 files changed, 387 insertions(+), 41 deletions(-)
 create mode 100644 src/api/service-templates.ts

diff --git a/src/api/business-services.ts b/src/api/business-services.ts
index a614f13..2ebf23f 100644
--- a/src/api/business-services.ts
+++ b/src/api/business-services.ts
@@ -1,10 +1,47 @@
 import { api } from './client';
 import type { BusinessService } from './types';
 
-export function fetchBusinessServices(businessId: string) {
-  const search = new URLSearchParams({
-    businessId,
-    isActive: 'true',
-  });
+export type CreateBusinessServicePayload = {
+  businessId: string;
+  serviceTemplateId: string;
+  price: number;
+  durationMinutes?: number | null;
+  isActive?: boolean;
+};
+
+export type UpdateBusinessServicePayload = {
+  price?: number;
+  durationMinutes?: number | null;
+  isActive?: boolean;
+};
+
+export function fetchBusinessServices(
+  businessId: string,
+  options?: { activeOnly?: boolean },
+) {
+  const search = new URLSearchParams({ businessId });
+  if (options?.activeOnly) {
+    search.set('isActive', 'true');
+  }
   return api<BusinessService[]>(`/business-services?${search}`);
 }
+
+export function createBusinessService(payload: CreateBusinessServicePayload) {
+  return api<BusinessService>('/business-services', {
+    method: 'POST',
+    body: JSON.stringify(payload),
+  });
+}
+
+export function updateBusinessService(id: string, payload: UpdateBusinessServicePayload) {
+  return api<BusinessService>(`/business-services/${id}`, {
+    method: 'PATCH',
+    body: JSON.stringify(payload),
+  });
+}
+
+export function deleteBusinessService(id: string) {
+  return api<{ success: true }>(`/business-services/${id}`, {
+    method: 'DELETE',
+  });
+}
diff --git a/src/api/service-templates.ts b/src/api/service-templates.ts
new file mode 100644
index 0000000..8fd676f
--- /dev/null
+++ b/src/api/service-templates.ts
@@ -0,0 +1,10 @@
+import { api } from './client';
+import type { ServiceTemplate } from './types';
+
+export function fetchServiceTemplates(categoryId: string) {
+  const search = new URLSearchParams({
+    categoryId,
+    isActive: 'true',
+  });
+  return api<ServiceTemplate[]>(`/service-templates?${search}`);
+}
diff --git a/src/views/app/AppBusinessDetailView.vue b/src/views/app/AppBusinessDetailView.vue
index e3144d6..360930b 100644
--- a/src/views/app/AppBusinessDetailView.vue
+++ b/src/views/app/AppBusinessDetailView.vue
@@ -111,7 +111,7 @@ async function load() {
   error.value = '';
   try {
     business.value = await fetchBusiness(id);
-    services.value = await fetchBusinessServices(id);
+    services.value = await fetchBusinessServices(id, { activeOnly: true });
   } catch (e) {
     error.value =
       e instanceof ApiError ? e.message : 'بارگذاری اطلاعات ناموفق بود.';
diff --git a/src/views/app/AppOwnerView.vue b/src/views/app/AppOwnerView.vue
index d7091a6..2cb3447 100644
--- a/src/views/app/AppOwnerView.vue
+++ b/src/views/app/AppOwnerView.vue
@@ -17,63 +17,227 @@
 
     <div v-if="loading" class="text-sm text-muted">در حال بارگذاری…</div>
 
-    <div v-else-if="!business" class="rounded-2xl border border-dashed border-border p-6 text-center text-sm text-muted">
+    <div
+      v-else-if="!business"
+      class="rounded-2xl border border-dashed border-border p-6 text-center text-sm text-muted"
+    >
       کسب‌وکاری به حساب شما وصل نیست.
     </div>
 
-    <form v-else class="space-y-4" @submit.prevent="onSave">
-      <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>
+    <div v-else class="space-y-8">
+      <form class="space-y-4" @submit.prevent="onSave">
+        <h2 class="text-base font-semibold text-text">اطلاعات کسب‌وکار</h2>
 
-      <AppInput id="ownerTitle" v-model="form.title" label="نام کسب‌وکار" required />
+        <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>
 
-      <div class="space-y-1.5">
-        <label for="ownerDesc" class="block text-sm font-medium text-muted">توضیحات</label>
-        <textarea
-          id="ownerDesc"
-          v-model="form.description"
-          rows="3"
-          class="w-full rounded-xl border border-border bg-surface-2 px-4 py-3 text-text outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/30"
+        <AppInput id="ownerTitle" v-model="form.title" label="نام کسب‌وکار" required />
+
+        <div class="space-y-1.5">
+          <label for="ownerDesc" class="block text-sm font-medium text-muted">توضیحات</label>
+          <textarea
+            id="ownerDesc"
+            v-model="form.description"
+            rows="3"
+            class="w-full rounded-xl border border-border bg-surface-2 px-4 py-3 text-text outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/30"
+          />
+        </div>
+
+        <AppInput
+          id="ownerPhone"
+          v-model="form.contactPhone"
+          label="تلفن"
+          type="tel"
+          inputmode="tel"
+          ltr
         />
-      </div>
+        <AppInput id="ownerAddress" v-model="form.address" label="آدرس" />
 
-      <AppInput
-        id="ownerPhone"
-        v-model="form.contactPhone"
-        label="تلفن"
-        type="tel"
-        inputmode="tel"
-        ltr
-      />
-      <AppInput id="ownerAddress" v-model="form.address" label="آدرس" />
+        <AppButton type="submit" :loading="saving">ذخیره تغییرات</AppButton>
+      </form>
 
-      <AppButton type="submit" :loading="saving">ذخیره تغییرات</AppButton>
-    </form>
+      <section class="space-y-4 border-t border-border pt-6">
+        <h2 class="text-base font-semibold text-text">خدمات و قیمت‌ها</h2>
+        <p class="text-xs text-muted">
+          خدماتی که اینجا ثبت می‌کنید در صفحه کسب‌وکار برای مشتریان و مقایسه نمایش داده می‌شود.
+        </p>
+
+        <div v-if="loadingServices" class="text-sm text-muted">در حال بارگذاری خدمات…</div>
+
+        <ul v-else-if="services.length" class="space-y-2">
+          <li
+            v-for="svc in services"
+            :key="svc.id"
+            class="rounded-xl border border-border bg-surface-2 p-3"
+          >
+            <div class="flex items-start justify-between gap-2">
+              <div class="min-w-0 flex-1">
+                <p class="font-medium text-text">
+                  {{ svc.serviceTemplate?.title ?? 'خدمت' }}
+                </p>
+                <p
+                  v-if="svc.serviceTemplate?.description"
+                  class="mt-0.5 text-xs text-muted"
+                >
+                  {{ 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>
+
+            <div v-if="editingId === svc.id" class="mt-3 space-y-2">
+              <AppInput
+                id="editPrice"
+                v-model="editForm.price"
+                label="قیمت (تومان)"
+                type="number"
+                inputmode="numeric"
+                ltr
+              />
+              <AppInput
+                id="editDuration"
+                v-model="editForm.durationMinutes"
+                label="مدت (دقیقه)"
+                type="number"
+                inputmode="numeric"
+                ltr
+              />
+              <div class="flex gap-2">
+                <AppButton class="!w-auto flex-1" :loading="savingService" @click="onSaveEdit(svc)">
+                  ذخیره
+                </AppButton>
+                <AppButton variant="ghost" class="!w-auto px-4" @click="cancelEdit">
+                  انصراف
+                </AppButton>
+              </div>
+            </div>
+
+            <div v-else class="mt-2 flex flex-wrap items-center gap-2 text-sm text-muted">
+              <span>{{ formatPriceToman(svc.price) }} تومان</span>
+              <span>·</span>
+              <span>{{
+                formatDuration(
+                  svc.durationMinutes,
+                  svc.serviceTemplate?.defaultDurationMinutes,
+                )
+              }}</span>
+              <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>
+          </li>
+        </ul>
+
+        <p v-else class="text-sm text-muted">هنوز خدمتی ثبت نشده است.</p>
+
+        <div
+          v-if="!loadingServices && templates.length === 0"
+          class="rounded-xl border border-dashed border-border bg-surface-2 p-4 text-sm text-muted"
+        >
+          برای دسته «{{ business.category?.title }}» هنوز نوع خدمتی تعریف نشده. از مدیر سیستم
+          بخواهید قالب خدمت اضافه کند.
+        </div>
+
+        <form
+          v-else-if="availableTemplates.length"
+          class="space-y-3 rounded-2xl border border-border bg-surface-2 p-4"
+          @submit.prevent="onAddService"
+        >
+          <p class="text-sm font-medium text-text">افزودن خدمت</p>
+
+          <div class="space-y-1.5">
+            <label for="svcTemplate" class="block text-sm font-medium text-muted">نوع خدمت</label>
+            <select
+              id="svcTemplate"
+              v-model="serviceForm.serviceTemplateId"
+              required
+              class="w-full rounded-xl border border-border bg-surface px-4 py-3 text-text outline-none focus:border-brand-500"
+            >
+              <option value="" disabled>انتخاب کنید</option>
+              <option v-for="tpl in availableTemplates" :key="tpl.id" :value="tpl.id">
+                {{ tpl.title }}
+              </option>
+            </select>
+          </div>
+
+          <AppInput
+            id="svcPrice"
+            v-model="serviceForm.price"
+            label="قیمت (تومان)"
+            type="number"
+            inputmode="numeric"
+            ltr
+            required
+          />
+          <AppInput
+            id="svcDuration"
+            v-model="serviceForm.durationMinutes"
+            label="مدت (دقیقه — اختیاری)"
+            type="number"
+            inputmode="numeric"
+            ltr
+          />
+
+          <AppButton type="submit" :loading="addingService">افزودن</AppButton>
+        </form>
+
+        <p
+          v-else-if="!loadingServices && templates.length && !availableTemplates.length"
+          class="text-sm text-muted"
+        >
+          همهٔ انواع خدمت این دسته را اضافه کرده‌اید.
+        </p>
+      </section>
+    </div>
   </WebAppLayout>
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { fetchMyBusinesses, updateBusiness } from '@/api/businesses';
-import type { Business } from '@/api/types';
+import {
+  createBusinessService,
+  deleteBusinessService,
+  fetchBusinessServices,
+  updateBusinessService,
+} from '@/api/business-services';
+import { fetchServiceTemplates } from '@/api/service-templates';
+import type { Business, BusinessService } from '@/api/types';
 import { ApiError } from '@/api/client';
 import AppButton from '@/components/ui/AppButton.vue';
 import AppInput from '@/components/ui/AppInput.vue';
 import WebAppLayout from '@/layouts/WebAppLayout.vue';
+import { formatDuration, formatPriceToman } from '@/utils/format';
 
 const business = ref<Business | null>(null);
+const services = ref<BusinessService[]>([]);
+const templates = ref<Awaited<ReturnType<typeof fetchServiceTemplates>>>([]);
 const loading = ref(true);
+const loadingServices = ref(false);
 const saving = ref(false);
+const savingService = ref(false);
+const addingService = ref(false);
 const error = ref('');
 const message = ref('');
+const editingId = ref<string | null>(null);
 
 const form = ref({
   title: '',
@@ -82,6 +246,42 @@ const form = ref({
   address: '',
 });
 
+const serviceForm = ref({
+  serviceTemplateId: '',
+  price: '',
+  durationMinutes: '',
+});
+
+const editForm = ref({
+  price: '',
+  durationMinutes: '',
+});
+
+const availableTemplates = computed(() => {
+  const used = new Set(services.value.map((s) => s.serviceTemplateId));
+  return templates.value.filter((t) => !used.has(t.id));
+});
+
+async function loadServicesAndTemplates() {
+  if (!business.value) return;
+  loadingServices.value = true;
+  try {
+    const [svcList, tplList] = await Promise.all([
+      fetchBusinessServices(business.value.id),
+      fetchServiceTemplates(business.value.categoryId),
+    ]);
+    services.value = svcList;
+    templates.value = tplList;
+    if (availableTemplates.value[0] && !serviceForm.value.serviceTemplateId) {
+      serviceForm.value.serviceTemplateId = availableTemplates.value[0].id;
+    }
+  } catch (e) {
+    error.value = e instanceof ApiError ? e.message : 'خطا در بارگذاری خدمات';
+  } finally {
+    loadingServices.value = false;
+  }
+}
+
 onMounted(async () => {
   loading.value = true;
   error.value = '';
@@ -95,6 +295,7 @@ onMounted(async () => {
         contactPhone: business.value.contactPhone ?? '',
         address: business.value.address ?? '',
       };
+      await loadServicesAndTemplates();
     }
   } catch (e) {
     error.value = e instanceof ApiError ? e.message : 'خطا در بارگذاری';
@@ -115,11 +316,109 @@ async function onSave() {
       contactPhone: form.value.contactPhone.trim() || null,
       address: form.value.address.trim() || null,
     });
-    message.value = 'ذخیره شد.';
+    message.value = 'اطلاعات ذخیره شد.';
   } catch (e) {
     error.value = e instanceof ApiError ? e.message : 'خطا در ذخیره';
   } finally {
     saving.value = false;
   }
 }
+
+function parsePrice(value: string): number | null {
+  const n = Number.parseFloat(value.replace(/,/g, ''));
+  if (!Number.isFinite(n) || n < 0) return null;
+  return n;
+}
+
+async function onAddService() {
+  if (!business.value || !serviceForm.value.serviceTemplateId) return;
+  const price = parsePrice(serviceForm.value.price);
+  if (price === null) {
+    error.value = 'قیمت معتبر نیست.';
+    return;
+  }
+  addingService.value = true;
+  error.value = '';
+  message.value = '';
+  try {
+    const durationRaw = serviceForm.value.durationMinutes.trim();
+    const duration = durationRaw ? Number.parseInt(durationRaw, 10) : undefined;
+    await createBusinessService({
+      businessId: business.value.id,
+      serviceTemplateId: serviceForm.value.serviceTemplateId,
+      price,
+      durationMinutes: duration && duration > 0 ? duration : undefined,
+    });
+    serviceForm.value = { serviceTemplateId: '', price: '', durationMinutes: '' };
+    await loadServicesAndTemplates();
+    if (availableTemplates.value[0]) {
+      serviceForm.value.serviceTemplateId = availableTemplates.value[0].id;
+    }
+    message.value = 'خدمت اضافه شد.';
+  } catch (e) {
+    error.value = e instanceof ApiError ? e.message : 'خطا در افزودن خدمت';
+  } finally {
+    addingService.value = false;
+  }
+}
+
+function startEdit(svc: BusinessService) {
+  editingId.value = svc.id;
+  editForm.value = {
+    price: String(Math.round(Number.parseFloat(svc.price))),
+    durationMinutes: svc.durationMinutes != null ? String(svc.durationMinutes) : '',
+  };
+}
+
+function cancelEdit() {
+  editingId.value = null;
+}
+
+async function onSaveEdit(svc: BusinessService) {
+  const price = parsePrice(editForm.value.price);
+  if (price === null) {
+    error.value = 'قیمت معتبر نیست.';
+    return;
+  }
+  savingService.value = true;
+  error.value = '';
+  try {
+    const durationRaw = editForm.value.durationMinutes.trim();
+    const duration = durationRaw ? Number.parseInt(durationRaw, 10) : null;
+    await updateBusinessService(svc.id, {
+      price,
+      durationMinutes: duration && duration > 0 ? duration : null,
+    });
+    editingId.value = null;
+    await loadServicesAndTemplates();
+    message.value = 'خدمت به‌روزرسانی شد.';
+  } catch (e) {
+    error.value = e instanceof ApiError ? e.message : 'خطا در ویرایش';
+  } finally {
+    savingService.value = false;
+  }
+}
+
+async function onToggleActive(svc: BusinessService) {
+  error.value = '';
+  try {
+    await updateBusinessService(svc.id, { isActive: !svc.isActive });
+    await loadServicesAndTemplates();
+  } catch (e) {
+    error.value = e instanceof ApiError ? e.message : 'خطا در تغییر وضعیت';
+  }
+}
+
+async function onDelete(svc: BusinessService) {
+  const title = svc.serviceTemplate?.title ?? 'این خدمت';
+  if (!confirm(`«${title}» حذف شود؟`)) return;
+  error.value = '';
+  try {
+    await deleteBusinessService(svc.id);
+    await loadServicesAndTemplates();
+    message.value = 'خدمت حذف شد.';
+  } catch (e) {
+    error.value = e instanceof ApiError ? e.message : 'خطا در حذف';
+  }
+}
 </script>