Add business registration for customers, owner panel, role-based nav, and Montime branding.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-05-23 18:13:25 +03:30
parent e07527c1db
commit 6897acc846
10 changed files with 404 additions and 9 deletions
@@ -1,13 +1,125 @@
 <template>
  <WebAppLayout>
    <h1 class="mb-4 text-xl font-bold text-text">مدیریت کسب‌وکار</h1>
-    <p class="mb-4 text-sm text-muted">خدمات، ویژگی‌ها و رزروهای ورودی</p>
-    <div class="rounded-2xl border border-dashed border-border bg-surface-2 p-6 text-center text-sm text-muted">
-      به‌زودی — پنل صاحب کسب‌وکار
+
+    <p
+      v-if="error"
+      class="mb-4 rounded-xl border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-600"
+    >
+      {{ error }}
+    </p>
+    <p
+      v-if="message"
+      class="mb-4 rounded-xl border border-brand-500/40 bg-brand-500/10 px-4 py-3 text-sm text-brand-700 dark:text-brand-500"
+    >
+      {{ message }}
+    </p>
+
+    <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>
+
+    <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>
+
+      <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
+      />
+      <AppInput id="ownerAddress" v-model="form.address" label="آدرس" />
+
+      <AppButton type="submit" :loading="saving">ذخیره تغییرات</AppButton>
+    </form>
  </WebAppLayout>
 </template>

 <script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { fetchMyBusinesses, updateBusiness } from '@/api/businesses';
+import type { Business } 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';
+
+const business = ref<Business | null>(null);
+const loading = ref(true);
+const saving = ref(false);
+const error = ref('');
+const message = ref('');
+
+const form = ref({
+  title: '',
+  description: '',
+  contactPhone: '',
+  address: '',
+});
+
+onMounted(async () => {
+  loading.value = true;
+  error.value = '';
+  try {
+    const list = await fetchMyBusinesses();
+    business.value = list[0] ?? null;
+    if (business.value) {
+      form.value = {
+        title: business.value.title,
+        description: business.value.description ?? '',
+        contactPhone: business.value.contactPhone ?? '',
+        address: business.value.address ?? '',
+      };
+    }
+  } catch (e) {
+    error.value = e instanceof ApiError ? e.message : 'خطا در بارگذاری';
+  } finally {
+    loading.value = false;
+  }
+});
+
+async function onSave() {
+  if (!business.value) return;
+  saving.value = true;
+  error.value = '';
+  message.value = '';
+  try {
+    business.value = await updateBusiness(business.value.id, {
+      title: form.value.title.trim(),
+      description: form.value.description.trim() || null,
+      contactPhone: form.value.contactPhone.trim() || null,
+      address: form.value.address.trim() || null,
+    });
+    message.value = 'ذخیره شد.';
+  } catch (e) {
+    error.value = e instanceof ApiError ? e.message : 'خطا در ذخیره';
+  } finally {
+    saving.value = false;
+  }
+}
 </script>
@@ -27,6 +27,35 @@
        </div>
      </dl>

+      <section
+        v-if="auth.isCustomer"
+        class="rounded-2xl border border-border bg-surface-2 p-4"
+      >
+        <h2 class="text-sm font-semibold text-text">کسب‌وکار من</h2>
+        <p class="mt-1 text-xs text-muted">
+          می‌توانید درخواست ثبت کسب‌وکار دهید تا پس از تأیید مدیریت، پنل صاحب کسب‌وکار فعال شود.
+        </p>
+        <RouterLink
+          to="/app/register-business"
+          class="mt-3 inline-flex w-full items-center justify-center rounded-xl bg-brand-600 px-4 py-3 text-sm font-semibold text-white"
+        >
+          ثبت کسب‌وکار من
+        </RouterLink>
+      </section>
+
+      <section
+        v-else-if="auth.isBusinessOwner"
+        class="rounded-2xl border border-border bg-surface-2 p-4"
+      >
+        <h2 class="text-sm font-semibold text-text">مدیریت کسب‌وکار</h2>
+        <RouterLink
+          to="/app/owner"
+          class="mt-3 inline-flex w-full items-center justify-center rounded-xl border border-border px-4 py-3 text-sm font-semibold text-text hover:bg-surface-3"
+        >
+          ورود به پنل کسب‌وکار
+        </RouterLink>
+      </section>
+
      <section class="space-y-3 rounded-2xl border border-border bg-surface-2 p-4">
        <h2 class="text-sm font-semibold text-text">
          {{ auth.user.hasPassword ? 'تغییر رمز عبور' : 'تنظیم رمز عبور' }}
@@ -0,0 +1,173 @@
+<template>
+  <WebAppLayout>
+    <h1 class="mb-2 text-xl font-bold text-text">ثبت کسب‌وکار</h1>
+    <p class="mb-4 text-sm text-muted">
+      درخواست شما پس از بررسی توسط مدیریت منتایم فعال می‌شود.
+    </p>
+
+    <p
+      v-if="error"
+      class="mb-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="text-sm text-muted">در حال بارگذاری…</div>
+
+    <div
+      v-else-if="pendingRequest"
+      class="space-y-4 rounded-2xl border border-amber-500/30 bg-amber-500/10 p-4"
+    >
+      <p class="font-semibold text-text">در انتظار تأیید</p>
+      <p class="text-sm text-muted">
+        درخواست «{{ pendingRequest.title }}» ثبت شده و در حال بررسی است.
+      </p>
+      <p class="text-xs text-muted">
+        پس از تأیید، پیامک دریافت می‌کنید و تب «کسب‌وکار» در اپ فعال می‌شود.
+      </p>
+    </div>
+
+    <div
+      v-else-if="lastRejected"
+      class="mb-4 rounded-xl border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-600"
+    >
+      آخرین درخواست «{{ lastRejected.title }}» رد شد.
+      <span v-if="lastRejected.adminNote"> — {{ lastRejected.adminNote }}</span>
+      می‌توانید دوباره درخواست دهید.
+    </div>
+
+    <form v-if="showForm" class="space-y-4" @submit.prevent="onSubmit">
+      <AppInput id="bizTitle" v-model="form.title" label="نام کسب‌وکار" required />
+
+      <div class="space-y-1.5">
+        <label for="bizCategory" class="block text-sm font-medium text-muted">دسته</label>
+        <select
+          id="bizCategory"
+          v-model="form.categoryId"
+          required
+          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"
+        >
+          <option value="" disabled>انتخاب دسته</option>
+          <option v-for="cat in categories" :key="cat.id" :value="cat.id">
+            {{ cat.title }}
+          </option>
+        </select>
+      </div>
+
+      <div class="space-y-1.5">
+        <label for="bizDesc" class="block text-sm font-medium text-muted">توضیحات</label>
+        <textarea
+          id="bizDesc"
+          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="bizPhone"
+        v-model="form.contactPhone"
+        label="تلفن تماس"
+        type="tel"
+        inputmode="tel"
+        ltr
+      />
+      <AppInput id="bizAddress" v-model="form.address" label="آدرس" />
+
+      <AppButton type="submit" :loading="saving">ارسال درخواست</AppButton>
+    </form>
+  </WebAppLayout>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { fetchBusinessCategories } from '@/api/business-categories';
+import {
+  fetchMyBusinessRegistrations,
+  submitBusinessRegistration,
+} from '@/api/business-registrations';
+import type { BusinessCategory, BusinessRegistrationRequest } 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 { useAuthStore } from '@/stores/auth';
+
+const router = useRouter();
+const auth = useAuthStore();
+
+const loading = ref(true);
+const saving = ref(false);
+const error = ref('');
+const categories = ref<BusinessCategory[]>([]);
+const requests = ref<BusinessRegistrationRequest[]>([]);
+
+const form = ref({
+  title: '',
+  categoryId: '',
+  description: '',
+  contactPhone: '',
+  address: '',
+});
+
+const pendingRequest = computed(() =>
+  requests.value.find((r) => r.status === 'pending'),
+);
+
+const lastRejected = computed(() =>
+  requests.value.find((r) => r.status === 'rejected'),
+);
+
+const showForm = computed(
+  () => !pendingRequest.value && auth.isCustomer,
+);
+
+onMounted(async () => {
+  if (auth.isBusinessOwner) {
+    await router.replace({ name: 'app-owner' });
+    return;
+  }
+
+  loading.value = true;
+  error.value = '';
+  try {
+    const [cats, mine] = await Promise.all([
+      fetchBusinessCategories(),
+      fetchMyBusinessRegistrations(),
+    ]);
+    categories.value = cats.filter((c) => c.isActive);
+    requests.value = mine;
+    if (categories.value[0] && !form.value.categoryId) {
+      form.value.categoryId = categories.value[0].id;
+    }
+  } catch (e) {
+    error.value = e instanceof ApiError ? e.message : 'خطا در بارگذاری';
+  } finally {
+    loading.value = false;
+  }
+});
+
+async function onSubmit() {
+  if (!form.value.title.trim() || !form.value.categoryId) {
+    error.value = 'نام و دسته را وارد کنید.';
+    return;
+  }
+  saving.value = true;
+  error.value = '';
+  try {
+    await submitBusinessRegistration({
+      title: form.value.title.trim(),
+      categoryId: form.value.categoryId,
+      description: form.value.description.trim() || undefined,
+      contactPhone: form.value.contactPhone.trim() || undefined,
+      address: form.value.address.trim() || undefined,
+    });
+    requests.value = await fetchMyBusinessRegistrations();
+  } catch (e) {
+    error.value = e instanceof ApiError ? e.message : 'خطا در ارسال درخواست';
+  } finally {
+    saving.value = false;
+  }
+}
+</script>
@@ -1,5 +1,5 @@
 <template>
-  <AuthLayout title="مون‌تایم" subtitle="ورود به حساب کاربری">
+  <AuthLayout title="منتایم" subtitle="ورود به حساب کاربری">
    <p
      v-if="error"
      class="mb-4 rounded-xl border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-600 dark:text-red-400"