add business category

src/views/app/AppOwnerView.vue

@@ -106,13 +106,10 @@
             </div>
 
             <div v-if="editingId === svc.id" class="mt-3 space-y-2">
-              <AppInput
+              <PriceInput
                 id="editPrice"
                 v-model="editForm.price"
                 label="قیمت (تومان)"
-                type="number"
-                inputmode="numeric"
-                ltr
               />
               <AppInput
                 id="editDuration"
@@ -183,13 +180,10 @@
             </select>
           </div>
 
-          <AppInput
+          <PriceInput
             id="svcPrice"
             v-model="serviceForm.price"
             label="قیمت (تومان)"
-            type="number"
-            inputmode="numeric"
-            ltr
             required
           />
           <AppInput
@@ -210,6 +204,58 @@
         >
           همهٔ انواع خدمت این دسته را اضافه کرده‌اید.
         </p>
+
+        <section class="space-y-3 rounded-2xl border border-dashed border-brand-500/40 bg-brand-500/5 p-4">
+          <h3 class="text-sm font-semibold text-text">خدمت سفارشی (خارج از لیست ادمین)</h3>
+          <p class="text-xs text-muted">
+            اگر خدمتی در لیست بالا نیست، اینجا پیشنهاد دهید. پس از تأیید مدیر، به خدمات کسب‌وکار شما
+            اضافه می‌شود.
+          </p>
+
+          <ul v-if="serviceRequests.length" class="space-y-2">
+            <li
+              v-for="req in serviceRequests"
+              :key="req.id"
+              class="rounded-xl border border-border bg-surface-2 px-3 py-2 text-sm"
+            >
+              <p class="font-medium text-text">{{ req.title }}</p>
+              <p class="mt-0.5 text-xs text-muted">
+                {{ formatPriceToman(req.price) }} تومان
+                <span v-if="req.durationMinutes"> · {{ req.durationMinutes }} دقیقه</span>
+              </p>
+              <span
+                class="mt-1 inline-block rounded-lg px-2 py-0.5 text-xs"
+                :class="requestStatusClass(req.status)"
+              >
+                {{ requestStatusLabel(req.status) }}
+              </span>
+              <p v-if="req.adminNote" class="mt-1 text-xs text-red-600">{{ req.adminNote }}</p>
+            </li>
+          </ul>
+
+          <form class="space-y-3" @submit.prevent="onAddCustomService">
+            <AppInput id="customTitle" v-model="customForm.title" label="نام خدمت" required />
+            <div class="space-y-1.5">
+              <label for="customDesc" class="block text-sm font-medium text-muted">توضیح (اختیاری)</label>
+              <textarea
+                id="customDesc"
+                v-model="customForm.description"
+                rows="2"
+                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>
+            <PriceInput id="customPrice" v-model="customForm.price" label="قیمت پیشنهادی (تومان)" required />
+            <AppInput
+              id="customDuration"
+              v-model="customForm.durationMinutes"
+              label="مدت (دقیقه — اختیاری)"
+              type="number"
+              inputmode="numeric"
+              ltr
+            />
+            <AppButton type="submit" :loading="addingCustom">ارسال برای تأیید</AppButton>
+          </form>
+        </section>
       </section>
     </div>
   </WebAppLayout>
@@ -218,6 +264,10 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue';
 import { fetchMyBusinesses, updateBusiness } from '@/api/businesses';
+import {
+  createServiceRequest,
+  fetchMyServiceRequests,
+} from '@/api/business-service-requests';
 import {
   createBusinessService,
   deleteBusinessService,
@@ -225,14 +275,21 @@ import {
   updateBusinessService,
 } from '@/api/business-services';
 import { fetchServiceTemplates } from '@/api/service-templates';
-import type { Business, BusinessService } from '@/api/types';
+import type {
+  Business,
+  BusinessService,
+  BusinessServiceRequest,
+  BusinessServiceRequestStatus,
+} from '@/api/types';
 import { ApiError } from '@/api/client';
 import BusinessAvailabilityEditor from '@/components/owner/BusinessAvailabilityEditor.vue';
 import AppButton from '@/components/ui/AppButton.vue';
 import AppInput from '@/components/ui/AppInput.vue';
+import PriceInput from '@/components/ui/PriceInput.vue';
 import WebAppLayout from '@/layouts/WebAppLayout.vue';
 import {
   formatDuration,
+  formatPriceInputDisplay,
   formatPriceToman,
   parseOptionalMinutes,
   parsePriceInput,
@@ -246,6 +303,8 @@ const loadingServices = ref(false);
 const saving = ref(false);
 const savingService = ref(false);
 const addingService = ref(false);
+const addingCustom = ref(false);
+const serviceRequests = ref<BusinessServiceRequest[]>([]);
 const error = ref('');
 const message = ref('');
 const editingId = ref<string | null>(null);
@@ -268,6 +327,13 @@ const editForm = ref({
   durationMinutes: '',
 });
 
+const customForm = ref({
+  title: '',
+  description: '',
+  price: '',
+  durationMinutes: '',
+});
+
 const availableTemplates = computed(() => {
   const used = new Set(services.value.map((s) => s.serviceTemplateId));
   return templates.value.filter((t) => !used.has(t.id));
@@ -277,12 +343,14 @@ async function loadServicesAndTemplates() {
   if (!business.value) return;
   loadingServices.value = true;
   try {
-    const [svcList, tplList] = await Promise.all([
+    const [svcList, tplList, reqs] = await Promise.all([
       fetchBusinessServices(business.value.id),
       fetchServiceTemplates(business.value.categoryId),
+      fetchMyServiceRequests(),
     ]);
     services.value = svcList;
     templates.value = tplList;
+    serviceRequests.value = reqs;
     if (availableTemplates.value[0] && !serviceForm.value.serviceTemplateId) {
       serviceForm.value.serviceTemplateId = availableTemplates.value[0].id;
     }
@@ -370,10 +438,57 @@ async function onAddService() {
   }
 }
 
+function requestStatusLabel(status: BusinessServiceRequestStatus): string {
+  const map: Record<BusinessServiceRequestStatus, string> = {
+    pending: 'در انتظار تأیید',
+    approved: 'تأیید و اضافه شد',
+    rejected: 'رد شده',
+  };
+  return map[status];
+}
+
+function requestStatusClass(status: BusinessServiceRequestStatus): string {
+  if (status === 'approved') return 'bg-green-500/15 text-green-700';
+  if (status === 'rejected') return 'bg-red-500/15 text-red-600';
+  return 'bg-amber-500/15 text-amber-700';
+}
+
+async function onAddCustomService() {
+  const title = customForm.value.title.trim();
+  const price = parsePriceInput(customForm.value.price);
+  const duration = parseOptionalMinutes(customForm.value.durationMinutes);
+  if (!title || price === null) {
+    error.value = 'نام و قیمت معتبر را وارد کنید.';
+    return;
+  }
+  if (duration === null) {
+    error.value = 'مدت زمان معتبر نیست.';
+    return;
+  }
+  addingCustom.value = true;
+  error.value = '';
+  message.value = '';
+  try {
+    await createServiceRequest({
+      title,
+      description: customForm.value.description.trim() || undefined,
+      price,
+      durationMinutes: duration && duration > 0 ? duration : undefined,
+    });
+    customForm.value = { title: '', description: '', price: '', durationMinutes: '' };
+    await loadServicesAndTemplates();
+    message.value = 'درخواست ارسال شد. پس از تأیید مدیر در لیست خدمات نمایش داده می‌شود.';
+  } catch (e) {
+    error.value = e instanceof ApiError ? e.message : 'ارسال درخواست ناموفق بود';
+  } finally {
+    addingCustom.value = false;
+  }
+}
+
 function startEdit(svc: BusinessService) {
   editingId.value = svc.id;
   editForm.value = {
-    price: String(Math.round(Number.parseFloat(svc.price))),
+    price: formatPriceInputDisplay(Math.round(Number.parseFloat(svc.price))),
     durationMinutes: svc.durationMinutes != null ? String(svc.durationMinutes) : '',
   };
 }