add business category

src/api/business-service-requests.ts

@@ -0,0 +1,20 @@
+import { api } from './client';
+import type { BusinessServiceRequest, BusinessServiceRequestStatus } from './types';
+
+export function fetchServiceRequests(status?: BusinessServiceRequestStatus) {
+  const query = status ? `?status=${status}` : '';
+  return api<BusinessServiceRequest[]>(`/business-service-requests${query}`);
+}
+
+export function approveServiceRequest(id: string) {
+  return api<BusinessServiceRequest>(`/business-service-requests/${id}/approve`, {
+    method: 'POST',
+  });
+}
+
+export function rejectServiceRequest(id: string, adminNote?: string) {
+  return api<BusinessServiceRequest>(`/business-service-requests/${id}/reject`, {
+    method: 'POST',
+    body: JSON.stringify({ adminNote: adminNote || undefined }),
+  });
+}

src/api/types.ts

@@ -144,6 +144,25 @@ export type BusinessRegistrationRequest = {
   applicant?: User;
 };
 
+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;
+  requestedBy?: User;
+};
+
 export type Booking = {
   id: string;
   customerId: string;

src/components/admin/BusinessServicesSection.vue

@@ -20,7 +20,7 @@
         <div class="min-w-0">
           <p class="font-medium text-text">{{ svc.serviceTemplate?.title ?? 'خدمت' }}</p>
           <p class="text-xs text-muted">
-            {{ formatPrice(svc.price) }} تومان
+            {{ formatPriceToman(svc.price) }} تومان
             <span v-if="svc.durationMinutes"> · {{ svc.durationMinutes }} دقیقه</span>
           </p>
         </div>
@@ -45,13 +45,10 @@
         label="نوع خدمت"
         :options="templateOptions"
       />
-      <AppInput
+      <PriceInput
         id="svcPrice"
         v-model="form.price"
         label="قیمت (تومان)"
-        type="number"
-        inputmode="numeric"
-        ltr
         required
       />
       <AppButton type="submit" class="sm:col-span-2" :loading="adding">
@@ -79,8 +76,9 @@ import { fetchServiceTemplates } from '@/api/service-templates';
 import type { ServiceTemplate } from '@/api/types';
 import { ApiError } from '@/api/client';
 import AppButton from '@/components/ui/AppButton.vue';
-import AppInput from '@/components/ui/AppInput.vue';
 import AppSelect from '@/components/ui/AppSelect.vue';
+import PriceInput from '@/components/ui/PriceInput.vue';
+import { formatPriceToman, parsePriceInput } from '@/utils/price';
 
 const props = defineProps<{
   businessId: string;
@@ -104,12 +102,6 @@ const templateOptions = computed(() =>
   availableTemplates.value.map((t) => ({ value: t.id, label: t.title })),
 );
 
-function formatPrice(price: string): string {
-  const n = Number.parseFloat(price);
-  if (!Number.isFinite(n)) return price;
-  return new Intl.NumberFormat('fa-IR').format(Math.round(n));
-}
-
 async function load() {
   loading.value = true;
   error.value = '';
@@ -130,17 +122,8 @@ async function load() {
   }
 }
 
-function parsePrice(value: string | number): number | null {
-  if (value === '' || value == null) return null;
-  if (typeof value === 'number') {
-    return Number.isFinite(value) && value >= 0 ? value : null;
-  }
-  const n = Number.parseFloat(String(value).replace(/,/g, '').trim());
-  return Number.isFinite(n) && n >= 0 ? n : null;
-}
-
 async function onAdd() {
-  const price = parsePrice(form.value.price);
+  const price = parsePriceInput(form.value.price);
   if (!form.value.serviceTemplateId || price === null) {
     error.value = 'نوع خدمت و قیمت معتبر را وارد کنید.';
     return;

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/price';
+
+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/layouts/AdminLayout.vue

@@ -69,7 +69,8 @@ const items: AdminNavItem[] = [
   { to: '/', name: 'dashboard', label: 'داشبورد', icon: 'layout-dashboard' },
   { to: '/categories', name: 'categories', label: 'دسته', icon: 'folder' },
   { to: '/businesses', name: 'businesses', label: 'کسب‌وکار', icon: 'store' },
-  { to: '/business-requests', name: 'business-requests', label: 'درخواست', icon: 'clipboard-list' },
+  { to: '/business-requests', name: 'business-requests', label: 'ثبت کسب', icon: 'clipboard-list' },
+  { to: '/service-requests', name: 'service-requests', label: 'خدمت', icon: 'plus' },
   { to: '/bookings', name: 'bookings', label: 'رزرو', icon: 'calendar' },
   { to: '/users', name: 'users', label: 'کاربران', icon: 'users' },
 ];

src/router/index.ts

@@ -52,6 +52,12 @@ const router = createRouter({
       component: () => import('@/views/BusinessRequestsView.vue'),
       meta: { requiresAuth: true, requiresAdmin: true },
     },
+    {
+      path: '/service-requests',
+      name: 'service-requests',
+      component: () => import('@/views/ServiceRequestsView.vue'),
+      meta: { requiresAuth: true, requiresAdmin: true },
+    },
     {
       path: '/bookings',
       name: 'bookings',

src/utils/price.ts

@@ -0,0 +1,46 @@
+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;
+  });
+}
+
+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, '');
+}
+
+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);
+}
+
+export function parsePriceInput(
+  value: string | number | null | undefined,
+): number | null {
+  const digits = digitsOnlyPrice(value);
+  if (!digits) return null;
+  const n = Number.parseInt(digits, 10);
+  if (!Number.isFinite(n) || n < 0) return null;
+  return n;
+}
+
+export function formatPriceToman(price: string): string {
+  const value = Number.parseFloat(price);
+  if (!Number.isFinite(value)) return price;
+  return new Intl.NumberFormat('fa-IR').format(Math.round(value));
+}

src/views/ServiceRequestsView.vue

@@ -0,0 +1,192 @@
+<template>
+  <AdminLayout>
+    <PageHeader
+      title="درخواست خدمات سفارشی"
+      subtitle="خدماتی که صاحب کسب‌وکار پیشنهاد داده — پس از تأیید به لیست خدمات اضافه می‌شود"
+    />
+
+    <div class="mt-4 flex gap-2">
+      <AppButton
+        variant="ghost"
+        class="!w-auto px-3"
+        :class="filterStatus === 'pending' ? 'bg-brand-500/15' : ''"
+        @click="setFilter('pending')"
+      >
+        در انتظار
+      </AppButton>
+      <AppButton
+        variant="ghost"
+        class="!w-auto px-3"
+        :class="filterStatus === 'all' ? 'bg-brand-500/15' : ''"
+        @click="setFilter('all')"
+      >
+        همه
+      </AppButton>
+    </div>
+
+    <p v-if="error" class="mt-4 rounded-xl border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-600">
+      {{ error }}
+    </p>
+
+    <div v-if="loading" class="mt-4 text-sm text-muted">در حال بارگذاری…</div>
+
+    <EmptyState v-else-if="requests.length === 0" class="mt-4">
+      درخواستی یافت نشد.
+    </EmptyState>
+
+    <ul v-else class="mt-4 space-y-2">
+      <li
+        v-for="req in requests"
+        :key="req.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-semibold text-text">{{ req.title }}</p>
+            <p class="mt-0.5 text-xs text-muted">
+              {{ req.business?.title ?? '—' }}
+            </p>
+            <p v-if="req.description" class="mt-1 text-xs text-muted">
+              {{ req.description }}
+            </p>
+            <p class="mt-1 text-sm text-text">
+              {{ formatPriceToman(req.price) }} تومان
+              <span v-if="req.durationMinutes"> · {{ req.durationMinutes }} دقیقه</span>
+            </p>
+            <AppBadge class="mt-2" :tone="statusTone(req.status)">
+              {{ statusLabel(req.status) }}
+            </AppBadge>
+            <p v-if="req.adminNote" class="mt-2 text-xs text-red-600">{{ req.adminNote }}</p>
+          </div>
+          <div v-if="req.status === 'pending'" class="flex shrink-0 flex-col gap-1">
+            <AppButton
+              class="!w-auto px-3 text-xs"
+              :loading="actingId === req.id && actingType === 'approve'"
+              @click="onApprove(req)"
+            >
+              تأیید و افزودن
+            </AppButton>
+            <AppButton
+              variant="danger"
+              class="!w-auto px-3 text-xs"
+              @click="openReject(req)"
+            >
+              رد
+            </AppButton>
+          </div>
+        </div>
+      </li>
+    </ul>
+
+    <AppModal :open="!!rejectTarget" title="رد درخواست خدمت" @close="rejectTarget = null">
+      <form v-if="rejectTarget" class="space-y-4" @submit.prevent="onReject">
+        <p class="text-sm text-text">{{ rejectTarget.title }}</p>
+        <AppTextarea id="rejectNote" v-model="rejectNote" label="دلیل (اختیاری)" />
+        <AppButton type="submit" variant="danger" :loading="actingId === rejectTarget.id">
+          رد درخواست
+        </AppButton>
+      </form>
+    </AppModal>
+  </AdminLayout>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import {
+  approveServiceRequest,
+  fetchServiceRequests,
+  rejectServiceRequest,
+} from '@/api/business-service-requests';
+import type { BusinessServiceRequest, BusinessServiceRequestStatus } from '@/api/types';
+import { ApiError } from '@/api/client';
+import AppBadge from '@/components/ui/AppBadge.vue';
+import AppButton from '@/components/ui/AppButton.vue';
+import AppModal from '@/components/ui/AppModal.vue';
+import AppTextarea from '@/components/ui/AppTextarea.vue';
+import EmptyState from '@/components/ui/EmptyState.vue';
+import PageHeader from '@/components/ui/PageHeader.vue';
+import AdminLayout from '@/layouts/AdminLayout.vue';
+import { formatPriceToman } from '@/utils/price';
+
+const requests = ref<BusinessServiceRequest[]>([]);
+const filterStatus = ref<'pending' | 'all'>('pending');
+const loading = ref(true);
+const error = ref('');
+const actingId = ref<string | null>(null);
+const actingType = ref<'approve' | 'reject' | null>(null);
+const rejectTarget = ref<BusinessServiceRequest | null>(null);
+const rejectNote = ref('');
+
+function statusLabel(status: BusinessServiceRequestStatus): string {
+  const map: Record<BusinessServiceRequestStatus, string> = {
+    pending: 'در انتظار تأیید',
+    approved: 'تأیید شده',
+    rejected: 'رد شده',
+  };
+  return map[status];
+}
+
+function statusTone(status: BusinessServiceRequestStatus): 'default' | 'success' | 'warning' | 'danger' {
+  if (status === 'approved') return 'success';
+  if (status === 'rejected') return 'danger';
+  return 'warning';
+}
+
+function setFilter(next: 'pending' | 'all') {
+  filterStatus.value = next;
+  load();
+}
+
+async function load() {
+  loading.value = true;
+  error.value = '';
+  try {
+    requests.value = await fetchServiceRequests(
+      filterStatus.value === 'pending' ? 'pending' : undefined,
+    );
+  } catch (e) {
+    error.value = e instanceof ApiError ? e.message : 'خطا در بارگذاری';
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function onApprove(req: BusinessServiceRequest) {
+  actingId.value = req.id;
+  actingType.value = 'approve';
+  error.value = '';
+  try {
+    await approveServiceRequest(req.id);
+    await load();
+  } catch (e) {
+    error.value = e instanceof ApiError ? e.message : 'تأیید ناموفق بود';
+  } finally {
+    actingId.value = null;
+    actingType.value = null;
+  }
+}
+
+function openReject(req: BusinessServiceRequest) {
+  rejectTarget.value = req;
+  rejectNote.value = '';
+}
+
+async function onReject() {
+  if (!rejectTarget.value) return;
+  actingId.value = rejectTarget.value.id;
+  actingType.value = 'reject';
+  error.value = '';
+  try {
+    await rejectServiceRequest(rejectTarget.value.id, rejectNote.value.trim() || undefined);
+    rejectTarget.value = null;
+    await load();
+  } catch (e) {
+    error.value = e instanceof ApiError ? e.message : 'رد ناموفق بود';
+  } finally {
+    actingId.value = null;
+    actingType.value = null;
+  }
+}
+
+onMounted(load);
+</script>