Complete super admin panel with CRUD, bookings, profile, and dev API proxy.
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Cursor
@@ -1,14 +1,377 @@
|
||||
<template>
|
||||
<AdminLayout>
|
||||
<h1 class="text-xl font-bold text-text">کسب‌وکارها</h1>
|
||||
<div
|
||||
class="mt-4 rounded-2xl border border-dashed border-border bg-surface-2 p-6 text-center text-sm text-muted"
|
||||
>
|
||||
به‌زودی — CRUD و واگذاری مدیر کسب‌وکار
|
||||
<PageHeader title="کسب‌وکارها" subtitle="ایجاد، ویرایش و واگذاری مدیر">
|
||||
<template #actions>
|
||||
<AppButton class="!w-auto shrink-0 px-4" @click="openCreate">جدید</AppButton>
|
||||
</template>
|
||||
</PageHeader>
|
||||
|
||||
<div class="mt-4 grid grid-cols-2 gap-2">
|
||||
<AppSelect
|
||||
id="filterCat"
|
||||
v-model="filterCategoryId"
|
||||
placeholder="همه دسته‌ها"
|
||||
:options="categoryFilterOptions"
|
||||
/>
|
||||
<AppSelect
|
||||
id="filterActive"
|
||||
v-model="filterActive"
|
||||
:options="activeFilterOptions"
|
||||
/>
|
||||
</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="businesses.length === 0" class="mt-4">
|
||||
کسب‌وکاری یافت نشد.
|
||||
</EmptyState>
|
||||
|
||||
<ul v-else class="mt-4 space-y-2">
|
||||
<li
|
||||
v-for="biz in businesses"
|
||||
:key="biz.id"
|
||||
class="rounded-2xl border border-border bg-surface-2 p-4"
|
||||
>
|
||||
<div class="flex items-start justify-between gap-2">
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="font-semibold text-text">{{ biz.title }}</p>
|
||||
<p class="mt-0.5 text-xs text-muted" dir="ltr">{{ biz.slug }}</p>
|
||||
<p v-if="biz.category" class="mt-1 text-xs text-muted">{{ biz.category.title }}</p>
|
||||
<div class="mt-2 flex flex-wrap gap-2">
|
||||
<AppBadge :tone="biz.isActive ? 'success' : 'warning'">
|
||||
{{ activeLabel(biz.isActive) }}
|
||||
</AppBadge>
|
||||
<AppBadge v-if="ownerLabel(biz)" tone="default">{{ ownerLabel(biz) }}</AppBadge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 grid grid-cols-3 gap-1">
|
||||
<AppButton variant="ghost" class="!w-auto px-2 text-xs" @click="openEdit(biz)">
|
||||
ویرایش
|
||||
</AppButton>
|
||||
<AppButton variant="ghost" class="!w-auto px-2 text-xs" @click="openAssign(biz)">
|
||||
مدیر
|
||||
</AppButton>
|
||||
<AppButton variant="danger" class="!w-auto px-2 text-xs" @click="onDelete(biz)">
|
||||
حذف
|
||||
</AppButton>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Create / Edit -->
|
||||
<AppModal
|
||||
:open="formOpen"
|
||||
:title="editingId ? 'ویرایش کسب‌وکار' : 'کسب‌وکار جدید'"
|
||||
@close="closeForm"
|
||||
>
|
||||
<form class="space-y-4" @submit.prevent="onSaveBusiness">
|
||||
<AppInput id="bizTitle" v-model="form.title" label="عنوان" required @blur="maybeSlug" />
|
||||
<AppInput id="bizSlug" v-model="form.slug" label="اسلاگ" ltr required />
|
||||
<AppSelect
|
||||
id="bizCategory"
|
||||
v-model="form.categoryId"
|
||||
label="دسته"
|
||||
placeholder="انتخاب دسته"
|
||||
:options="categoryOptions"
|
||||
/>
|
||||
<AppTextarea id="bizDesc" v-model="form.description" label="توضیحات" />
|
||||
<AppInput id="bizPhone" v-model="form.contactPhone" label="تلفن" ltr inputmode="tel" />
|
||||
<AppInput id="bizAddress" v-model="form.address" label="آدرس" />
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<AppInput id="bizLat" v-model="form.latitude" label="عرض جغرافیایی" ltr type="text" />
|
||||
<AppInput id="bizLng" v-model="form.longitude" label="طول جغرافیایی" ltr type="text" />
|
||||
</div>
|
||||
<label class="flex items-center gap-2 text-sm text-text">
|
||||
<input v-model="form.isActive" type="checkbox" class="rounded border-border" />
|
||||
فعال
|
||||
</label>
|
||||
<AppButton type="submit" :loading="saving">ذخیره</AppButton>
|
||||
</form>
|
||||
</AppModal>
|
||||
|
||||
<!-- Assign owner -->
|
||||
<AppModal
|
||||
:open="assignOpen"
|
||||
title="واگذاری مدیر کسب‌وکار"
|
||||
subtitle="کاربر با این موبایل ساخته یا به نقش صاحب کسب‌وکار ارتقا می‌یابد"
|
||||
@close="assignOpen = false"
|
||||
>
|
||||
<form v-if="assignTarget" class="space-y-4" @submit.prevent="onAssign">
|
||||
<p class="text-sm font-medium text-text">{{ assignTarget.title }}</p>
|
||||
<AppInput
|
||||
id="ownerMobile"
|
||||
v-model="assignForm.mobile"
|
||||
label="موبایل مدیر"
|
||||
ltr
|
||||
inputmode="tel"
|
||||
placeholder="09121234567"
|
||||
required
|
||||
/>
|
||||
<AppInput id="ownerName" v-model="assignForm.fullName" label="نام (اختیاری)" />
|
||||
<AppButton type="submit" :loading="saving">واگذاری</AppButton>
|
||||
</form>
|
||||
</AppModal>
|
||||
</AdminLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref, watch } from 'vue';
|
||||
import { fetchCategories } from '@/api/business-categories';
|
||||
import {
|
||||
assignBusinessOwner,
|
||||
createBusiness,
|
||||
deleteBusiness,
|
||||
fetchBusinesses,
|
||||
updateBusiness,
|
||||
} from '@/api/businesses';
|
||||
import { fetchUsers } from '@/api/users';
|
||||
import type { Business, BusinessCategory, User } from '@/api/types';
|
||||
import { ApiError } from '@/api/client';
|
||||
import AppBadge from '@/components/ui/AppBadge.vue';
|
||||
import AppButton from '@/components/ui/AppButton.vue';
|
||||
import AppInput from '@/components/ui/AppInput.vue';
|
||||
import AppModal from '@/components/ui/AppModal.vue';
|
||||
import AppSelect from '@/components/ui/AppSelect.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 { activeLabel } from '@/utils/format';
|
||||
import { isValidIranMobile, normalizeIranMobile } from '@/utils/mobile';
|
||||
import { isValidSlug, slugify } from '@/utils/slug';
|
||||
|
||||
const businesses = ref<Business[]>([]);
|
||||
const categories = ref<BusinessCategory[]>([]);
|
||||
const usersById = ref<Record<string, User>>({});
|
||||
const loading = ref(true);
|
||||
const error = ref('');
|
||||
const saving = ref(false);
|
||||
|
||||
const filterCategoryId = ref('');
|
||||
const filterActive = ref('all');
|
||||
|
||||
const formOpen = ref(false);
|
||||
const editingId = ref<string | null>(null);
|
||||
const slugTouched = ref(false);
|
||||
|
||||
const assignOpen = ref(false);
|
||||
const assignTarget = ref<Business | null>(null);
|
||||
|
||||
const form = ref({
|
||||
title: '',
|
||||
slug: '',
|
||||
categoryId: '',
|
||||
description: '',
|
||||
contactPhone: '',
|
||||
address: '',
|
||||
latitude: '',
|
||||
longitude: '',
|
||||
isActive: true,
|
||||
});
|
||||
|
||||
const assignForm = ref({ mobile: '', fullName: '' });
|
||||
|
||||
const categoryOptions = computed(() =>
|
||||
categories.value.map((c) => ({ value: c.id, label: c.title })),
|
||||
);
|
||||
|
||||
const categoryFilterOptions = computed(() => [
|
||||
{ value: '', label: 'همه دسته‌ها' },
|
||||
...categoryOptions.value,
|
||||
]);
|
||||
|
||||
const activeFilterOptions = [
|
||||
{ value: 'all', label: 'همه' },
|
||||
{ value: 'true', label: 'فعال' },
|
||||
{ value: 'false', label: 'غیرفعال' },
|
||||
];
|
||||
|
||||
function ownerLabel(biz: Business): string | null {
|
||||
if (!biz.ownerId) return 'بدون مدیر';
|
||||
const u = usersById.value[biz.ownerId];
|
||||
return u ? `${u.fullName ?? u.mobile}` : `مدیر: ${biz.ownerId.slice(0, 8)}…`;
|
||||
}
|
||||
|
||||
function parseCoord(value: string): number | undefined {
|
||||
const n = parseFloat(value.trim());
|
||||
return Number.isFinite(n) ? n : undefined;
|
||||
}
|
||||
|
||||
async function load() {
|
||||
loading.value = true;
|
||||
error.value = '';
|
||||
try {
|
||||
const params: { categoryId?: string; isActive?: boolean } = {};
|
||||
if (filterCategoryId.value) params.categoryId = filterCategoryId.value;
|
||||
if (filterActive.value !== 'all') params.isActive = filterActive.value === 'true';
|
||||
|
||||
const [bizList, cats, userList] = await Promise.all([
|
||||
fetchBusinesses(params),
|
||||
fetchCategories(),
|
||||
fetchUsers().catch(() => [] as User[]),
|
||||
]);
|
||||
businesses.value = bizList;
|
||||
categories.value = cats;
|
||||
usersById.value = Object.fromEntries(userList.map((u) => [u.id, u]));
|
||||
} catch (e) {
|
||||
error.value = e instanceof ApiError ? e.message : 'خطا در بارگذاری';
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function openCreate() {
|
||||
if (categories.value.length === 0) {
|
||||
error.value = 'ابتدا یک دسته در بخش «دسته‌ها» بسازید.';
|
||||
return;
|
||||
}
|
||||
editingId.value = null;
|
||||
slugTouched.value = false;
|
||||
form.value = {
|
||||
title: '',
|
||||
slug: '',
|
||||
categoryId: categories.value[0]?.id ?? '',
|
||||
description: '',
|
||||
contactPhone: '',
|
||||
address: '',
|
||||
latitude: '',
|
||||
longitude: '',
|
||||
isActive: true,
|
||||
};
|
||||
formOpen.value = true;
|
||||
}
|
||||
|
||||
function openEdit(biz: Business) {
|
||||
editingId.value = biz.id;
|
||||
slugTouched.value = true;
|
||||
form.value = {
|
||||
title: biz.title,
|
||||
slug: biz.slug,
|
||||
categoryId: biz.categoryId,
|
||||
description: biz.description ?? '',
|
||||
contactPhone: biz.contactPhone ?? '',
|
||||
address: biz.address ?? '',
|
||||
latitude: biz.latitude != null ? String(biz.latitude) : '',
|
||||
longitude: biz.longitude != null ? String(biz.longitude) : '',
|
||||
isActive: biz.isActive,
|
||||
};
|
||||
formOpen.value = true;
|
||||
}
|
||||
|
||||
function closeForm() {
|
||||
formOpen.value = false;
|
||||
}
|
||||
|
||||
function maybeSlug() {
|
||||
if (!slugTouched.value && !editingId.value) {
|
||||
form.value.slug = slugify(form.value.title);
|
||||
}
|
||||
}
|
||||
|
||||
function openAssign(biz: Business) {
|
||||
assignTarget.value = biz;
|
||||
assignForm.value = { mobile: '', fullName: '' };
|
||||
assignOpen.value = true;
|
||||
}
|
||||
|
||||
async function onSaveBusiness() {
|
||||
if (!isValidSlug(form.value.slug)) {
|
||||
error.value = 'اسلاگ نامعتبر است.';
|
||||
return;
|
||||
}
|
||||
if (!form.value.categoryId) {
|
||||
error.value = 'دسته را انتخاب کنید.';
|
||||
return;
|
||||
}
|
||||
|
||||
saving.value = true;
|
||||
error.value = '';
|
||||
const lat = parseCoord(form.value.latitude);
|
||||
const lng = parseCoord(form.value.longitude);
|
||||
|
||||
try {
|
||||
if (editingId.value) {
|
||||
await updateBusiness(editingId.value, {
|
||||
title: form.value.title.trim(),
|
||||
slug: form.value.slug.trim(),
|
||||
categoryId: form.value.categoryId,
|
||||
description: form.value.description.trim() || null,
|
||||
contactPhone: form.value.contactPhone.trim() || null,
|
||||
address: form.value.address.trim() || null,
|
||||
latitude: lat ?? null,
|
||||
longitude: lng ?? null,
|
||||
isActive: form.value.isActive,
|
||||
});
|
||||
} else {
|
||||
await createBusiness({
|
||||
title: form.value.title.trim(),
|
||||
slug: form.value.slug.trim(),
|
||||
categoryId: form.value.categoryId,
|
||||
description: form.value.description.trim() || undefined,
|
||||
contactPhone: form.value.contactPhone.trim() || undefined,
|
||||
address: form.value.address.trim() || undefined,
|
||||
latitude: lat,
|
||||
longitude: lng,
|
||||
isActive: form.value.isActive,
|
||||
});
|
||||
}
|
||||
closeForm();
|
||||
await load();
|
||||
} catch (e) {
|
||||
error.value = e instanceof ApiError ? e.message : 'خطا در ذخیره';
|
||||
} finally {
|
||||
saving.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function onAssign() {
|
||||
if (!assignTarget.value) return;
|
||||
const mobile = normalizeIranMobile(assignForm.value.mobile);
|
||||
if (!isValidIranMobile(mobile)) {
|
||||
error.value = 'شماره موبایل مدیر معتبر نیست.';
|
||||
return;
|
||||
}
|
||||
saving.value = true;
|
||||
error.value = '';
|
||||
try {
|
||||
await assignBusinessOwner(assignTarget.value.id, {
|
||||
mobile,
|
||||
fullName: assignForm.value.fullName.trim() || null,
|
||||
});
|
||||
assignOpen.value = false;
|
||||
await load();
|
||||
} catch (e) {
|
||||
error.value = e instanceof ApiError ? e.message : 'خطا در واگذاری';
|
||||
} finally {
|
||||
saving.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function onDelete(biz: Business) {
|
||||
if (
|
||||
!confirm(
|
||||
`«${biz.title}» و رزروهای مرتبط حذف شوند؟ این کار قابل بازگشت نیست.`,
|
||||
)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
error.value = '';
|
||||
try {
|
||||
await deleteBusiness(biz.id);
|
||||
await load();
|
||||
} catch (e) {
|
||||
error.value = e instanceof ApiError ? e.message : 'خطا در حذف';
|
||||
}
|
||||
}
|
||||
|
||||
watch([filterCategoryId, filterActive], () => {
|
||||
if (!loading.value) load();
|
||||
});
|
||||
|
||||
onMounted(load);
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user