add business category

src/api/business-service-requests.ts

@@ -0,0 +1,16 @@
+import { api } from './client';
+import type {
+  BusinessServiceRequest,
+  CreateBusinessServiceRequestPayload,
+} from './types';
+
+export function fetchMyServiceRequests() {
+  return api<BusinessServiceRequest[]>('/business-service-requests/mine');
+}
+
+export function createServiceRequest(payload: CreateBusinessServiceRequestPayload) {
+  return api<BusinessServiceRequest>('/business-service-requests', {
+    method: 'POST',
+    body: JSON.stringify(payload),
+  });
+}

src/api/types.ts

@@ -83,6 +83,31 @@ export type BusinessService = {
   serviceTemplate?: ServiceTemplate;
 };
 
+export type BusinessServiceRequestStatus = 'pending' | 'approved' | 'rejected';
+
+export type BusinessServiceRequest = {
+  id: string;
+  businessId: string;
+  requestedById: string;
+  status: BusinessServiceRequestStatus;
+  title: string;
+  description: string | null;
+  price: string;
+  durationMinutes: number | null;
+  adminNote: string | null;
+  serviceTemplateId: string | null;
+  businessServiceId: string | null;
+  createdAt?: string;
+  business?: Business;
+};
+
+export type CreateBusinessServiceRequestPayload = {
+  title: string;
+  description?: string;
+  price: number;
+  durationMinutes?: number;
+};
+
 export type BookingStatus =
   | 'pending'
   | 'confirmed'

src/components/ui/PriceInput.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="space-y-1.5">
+    <label v-if="label" :for="id" class="block text-sm font-medium text-muted">
+      {{ label }}
+    </label>
+    <input
+      :id="id"
+      :value="display"
+      type="text"
+      inputmode="numeric"
+      class="w-full rounded-xl border border-border bg-surface-2 px-4 py-3 text-text outline-none transition placeholder:text-muted focus:border-brand-500 focus:ring-2 focus:ring-brand-500/30"
+      :class="ltr ? 'text-left' : ''"
+      :placeholder="placeholder"
+      :required="required"
+      :disabled="disabled"
+      dir="ltr"
+      @input="onInput"
+      @blur="onBlur"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { digitsOnlyPrice, formatPriceInputDisplay } from '@/utils/format';
+
+const model = defineModel<string>({ default: '' });
+
+withDefaults(
+  defineProps<{
+    label?: string;
+    id?: string;
+    ltr?: boolean;
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+  }>(),
+  { ltr: true, placeholder: '۰', required: false, disabled: false },
+);
+
+const display = ref(formatPriceInputDisplay(model.value));
+
+watch(
+  () => model.value,
+  (v) => {
+    const next = formatPriceInputDisplay(v);
+    if (next !== display.value) display.value = next;
+  },
+);
+
+function onInput(e: Event) {
+  const raw = (e.target as HTMLInputElement).value;
+  const digits = digitsOnlyPrice(raw);
+  model.value = digits;
+  display.value = digits ? formatPriceInputDisplay(digits) : '';
+}
+
+function onBlur() {
+  display.value = formatPriceInputDisplay(model.value);
+}
+</script>

src/utils/format.ts

@@ -1,17 +1,44 @@
-/** Parses price from form input (string or number from type="number"). */
+const PERSIAN_DIGITS = '۰۱۲۳۴۵۶۷۸۹';
+const ARABIC_DIGITS = '٠١٢٣٤٥٦٧٨٩';
+
+function toAsciiDigits(value: string): string {
+  return value.replace(/./g, (ch) => {
+    const pi = PERSIAN_DIGITS.indexOf(ch);
+    if (pi >= 0) return String(pi);
+    const ai = ARABIC_DIGITS.indexOf(ch);
+    if (ai >= 0) return String(ai);
+    return ch;
+  });
+}
+
+/** Strips grouping separators; keeps digits only for price inputs. */
+export function digitsOnlyPrice(value: string | number | null | undefined): string {
+  if (value == null || value === '') return '';
+  if (typeof value === 'number') {
+    return Number.isFinite(value) && value >= 0 ? String(Math.trunc(value)) : '';
+  }
+  return toAsciiDigits(String(value)).replace(/[^\d]/g, '');
+}
+
+/** Formats price for text inputs with fa-IR thousand separators. */
+export function formatPriceInputDisplay(
+  value: string | number | null | undefined,
+): string {
+  const digits = digitsOnlyPrice(value);
+  if (!digits) return '';
+  const n = Number.parseInt(digits, 10);
+  if (!Number.isFinite(n)) return '';
+  return new Intl.NumberFormat('fa-IR').format(n);
+}
+
+/** Parses price from form input (formatted or plain digits). */
 export function parsePriceInput(
   value: string | number | null | undefined,
 ): number | null {
-  if (value == null || value === '') {
+  const digits = digitsOnlyPrice(value);
-    return null;
+  if (!digits) return null;
-  }
+  const n = Number.parseInt(digits, 10);
-  if (typeof value === 'number') {
+  if (!Number.isFinite(n) || n < 0) return null;
-    return Number.isFinite(value) && value >= 0 ? value : null;
-  }
-  const n = Number.parseFloat(String(value).replace(/,/g, '').trim());
-  if (!Number.isFinite(n) || n < 0) {
-    return null;
-  }
   return n;
 }
 
@@ -69,19 +96,6 @@ export function bookingStatusLabel(status: string): string {
   return map[status] ?? status;
 }
 
-const PERSIAN_DIGITS = '۰۱۲۳۴۵۶۷۸۹';
-const ARABIC_DIGITS = '٠١٢٣٤٥٦٧٨٩';
-
-function toAsciiDigits(value: string): string {
-  return value.replace(/./g, (ch) => {
-    const pi = PERSIAN_DIGITS.indexOf(ch);
-    if (pi >= 0) return String(pi);
-    const ai = ARABIC_DIGITS.indexOf(ch);
-    if (ai >= 0) return String(ai);
-    return ch;
-  });
-}
-
 /** Normalizes browser/API time to HH:mm (24h) for availability API. */
 export function normalizeHmTime(value: string): string | null {
   const raw = toAsciiDigits(String(value ?? '').trim()).normalize('NFKC');

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) : '',
   };
 }