Montime/webMontime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add business_owner

Browse Source
This commit is contained in:
Mahdi
2026-07-15 19:14:52 +03:30
parent c02ff06e2c
commit 0d4158db4e
12 changed files with 267 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/home/HomeBusinessCard.vue
+8 -15
View File
@@ -1,11 +1,11 @@
<template>
<RouterLink
:to="{ name: 'app-business-detail', params: { id: business.id } }"
class="group flex h-full flex-col rounded-2xl border border-slate-200 bg-white p-6 text-center shadow-sm transition hover:-translate-y-0.5 hover:border-brand-500 hover:shadow-md dark:border-border dark:bg-surface"
class="group flex h-full flex-col rounded-xl border border-slate-200 bg-white p-4 text-center shadow-sm transition hover:-translate-y-0.5 hover:border-brand-500 hover:shadow-md dark:border-border dark:bg-surface"
:class="featured ? 'border-brand-500 ring-1 ring-brand-500/20' : ''"
>
<div
class="mx-auto mb-4 flex h-16 w-16 items-center justify-center overflow-hidden rounded-full bg-brand-500/10 text-brand-600 transition group-hover:bg-brand-500/15 dark:text-brand-500"
class="mx-auto mb-3 flex h-12 w-12 items-center justify-center overflow-hidden rounded-full bg-brand-500/10 text-brand-600 transition group-hover:bg-brand-500/15 dark:text-brand-500"
>
<img
v-if="cover"
@@ -14,42 +14,35 @@
class="h-full w-full object-cover"
loading="lazy"
/>
<AppIcon v-else name="store" size="lg" />
<AppIcon v-else name="store" size="md" />
</div>
<h3 class="text-base font-bold text-slate-800 dark:text-text">{{ business.title }}</h3>
<h3 class="text-sm font-bold text-slate-800 dark:text-text">{{ business.title }}</h3>
<BusinessRatingBadge
class="mx-auto mt-2"
class="mx-auto mt-1.5"
:average-rating="business.averageRating"
:review-count="business.reviewCount"
/>
<p
v-if="business.description"
class="mt-2 line-clamp-3 min-h-[4.5rem] text-sm leading-7 text-slate-600 dark:text-muted"
class="mt-1.5 line-clamp-2 text-xs leading-6 text-slate-600 dark:text-muted"
>
{{ business.description }}
</p>
<p v-else class="mt-2 min-h-[4.5rem] text-sm text-slate-400 dark:text-muted">—</p>
<p v-if="business.category" class="mt-3 text-xs font-medium text-brand-600 dark:text-brand-500">
<p v-if="business.category" class="mt-2 text-[11px] font-medium text-brand-600 dark:text-brand-500">
{{ business.category.title }}
</p>
<p
v-if="business.address"
class="mt-2 flex items-center justify-center gap-1 text-xs text-slate-500 dark:text-muted"
class="mt-1.5 flex items-center justify-center gap-1 text-[11px] text-slate-500 dark:text-muted"
>
<AppIcon name="map-pin" size="sm" class="shrink-0" />
<span class="line-clamp-1">{{ business.address }}</span>
</p>
<span
class="mt-auto pt-5 text-sm font-semibold text-brand-600 transition group-hover:text-brand-700 dark:text-brand-500"
>
مشاهده و رزرو
</span>
</RouterLink>
</template>
src/components/home/HomeBusinessList.vue
+1 -1
View File
@@ -17,7 +17,7 @@
v-else
:class="
variant === 'featured'
? 'grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3'
? 'grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4'
: 'grid grid-cols-1 gap-2'
"
>
src/components/home/HomeHeroSection.vue
+5 -5
View File
@@ -72,7 +72,7 @@
<div class="relative shadow-[0_20px_50px_-12px_rgba(0,0,0,0.18)]">
<BusinessImageGallery
:images="singleBusiness?.images"
:images="landingBusiness?.images"
:title="heroTitle"
variant="hero"
frame-extra-class="landing-hero-blob bg-slate-200"
@@ -103,13 +103,13 @@ const emit = defineEmits<{
}>();
const tenant = useTenantStore();
const { singleBusiness } = storeToRefs(tenant);
const { landingBusiness } = storeToRefs(tenant);
const heroTitle = computed(() => singleBusiness.value?.title ?? '');
const heroTitle = computed(() => landingBusiness.value?.title ?? '');
const heroSubtitle = computed(() => singleBusiness.value?.subtitle?.trim() ?? '');
const heroSubtitle = computed(() => landingBusiness.value?.subtitle?.trim() ?? '');
const heroDescription = computed(() => singleBusiness.value?.description?.trim() ?? '');
const heroDescription = computed(() => landingBusiness.value?.description?.trim() ?? '');
const highlights: { label: string; icon: AppIconName }[] = [
{ label: 'رضایت مشتریان', icon: 'shield' },
src/components/home/HomeServicesSection.vue
+1 -1
View File
@@ -71,7 +71,7 @@ const gridClass = computed(() => {
function serviceLink(item: LandingServiceItem) {
if (!props.bookingEnabled) return '#services';
return {
name: 'app-business-detail',
name: 'app-business-book',
params: { id: item.businessId },
hash: 'services',
};
src/components/landing/DesktopLandingPage.vue
+2 -2
View File
@@ -42,7 +42,7 @@ const props = withDefaults(
const router = useRouter();
const auth = useAuthStore();
const tenant = useTenantStore();
const { singleBusinessId } = storeToRefs(tenant);
const { landingBusinessId } = storeToRefs(tenant);
function scrollToServices() {
const el = document.getElementById('services');
@@ -55,7 +55,7 @@ function goToBooking() {
return;
}
const id = singleBusinessId.value;
const id = landingBusinessId.value;
if (!id) {
scrollToServices();
return;
src/components/landing/MobileBusinessLanding.vue
+5 -5
View File
@@ -18,7 +18,7 @@
class="overflow-hidden rounded-2xl bg-slate-100 shadow-[0_8px_30px_rgba(15,23,42,0.12)] dark:bg-surface-2 dark:shadow-black/30"
>
<BusinessImageGallery
:images="singleBusiness?.images"
:images="landingBusiness?.images"
:title="businessTitle"
variant="card"
/>
@@ -132,11 +132,11 @@ const emit = defineEmits<{
}>();
const tenant = useTenantStore();
const { singleBusiness } = storeToRefs(tenant);
const { landingBusiness } = storeToRefs(tenant);
const businessTitle = computed(() => singleBusiness.value?.title ?? '');
const businessSubtitle = computed(() => singleBusiness.value?.subtitle?.trim() ?? '');
const aboutText = computed(() => singleBusiness.value?.description?.trim() ?? '');
const businessTitle = computed(() => landingBusiness.value?.title ?? '');
const businessSubtitle = computed(() => landingBusiness.value?.subtitle?.trim() ?? '');
const aboutText = computed(() => landingBusiness.value?.description?.trim() ?? '');
const quickActions: {
id: string;
src/components/shell/SiteFooter.vue
+6 -6
View File
@@ -80,23 +80,23 @@ import AppIcon from '@/components/ui/AppIcon.vue';
import { useTenantStore } from '@/stores/tenant';
const tenant = useTenantStore();
const { brand, singleBusiness, isSingleBusiness } = storeToRefs(tenant);
const { brand, landingBusiness } = storeToRefs(tenant);
const contactPhone = computed(() => {
if (isSingleBusiness.value && singleBusiness.value?.contactPhone) {
return singleBusiness.value.contactPhone;
if (landingBusiness.value?.contactPhone) {
return landingBusiness.value.contactPhone;
}
return '021-12345678';
});
const contactMobile = computed(() => {
if (isSingleBusiness.value) return null;
if (landingBusiness.value) return null;
return '0912-123-4567';
});
const address = computed(() => {
if (isSingleBusiness.value && singleBusiness.value?.address) {
return singleBusiness.value.address;
if (landingBusiness.value?.address) {
return landingBusiness.value.address;
}
return 'تهران، خیابان ولیعصر، پلاک ۱۲۳';
});
src/router/index.ts
+9 -1
View File
@@ -30,6 +30,11 @@ const router = createRouter({
name: 'app-business-detail',
component: () => import('@/views/app/AppBusinessDetailView.vue'),
},
{
path: '/app/businesses/:id/book',
name: 'app-business-book',
component: () => import('@/views/app/AppBusinessBookingView.vue'),
},
{
path: '/app/bookings',
name: 'app-bookings',
@@ -86,7 +91,10 @@ router.beforeEach(async (to) => {
return auth.isBusinessOwner ? { name: 'app-owner' } : { name: 'app-home' };
}
if (to.name === 'app-business-detail' && auth.isBusinessOwner) {
if (
(to.name === 'app-business-detail' || to.name === 'app-business-book') &&
auth.isBusinessOwner
) {
const { ensureLoaded, isOwnBusiness } = useOwnedBusiness();
await ensureLoaded();
if (isOwnBusiness(String(to.params.id))) {
src/stores/tenant.ts
+24 -10
View File
@@ -10,22 +10,28 @@ export const useTenantStore = defineStore('tenant', () => {
const loading = ref(false);
const isSingleBusiness = ref(false);
const singleBusiness = ref<Business | null>(null);
/** Business landing opened from multi-tenant discovery (not platform-wide single-business mode). */
const focusedBusiness = ref<Business | null>(null);
const landingBusiness = computed(() =>
isSingleBusiness.value ? singleBusiness.value : focusedBusiness.value,
);
const landingBusinessId = computed(() => landingBusiness.value?.id ?? null);
const brand = computed<SiteBrand>(() => {
const base = isSingleBusiness.value ? NIVASH_BRAND : MONTIME_BRAND;
if (isSingleBusiness.value && singleBusiness.value) {
const biz = landingBusiness.value;
if (biz) {
return {
...base,
name: singleBusiness.value.title,
shortName: singleBusiness.value.title,
copyrightName: singleBusiness.value.title,
aboutText:
singleBusiness.value.description?.trim() || base.aboutText,
...NIVASH_BRAND,
name: biz.title,
shortName: biz.title,
copyrightName: biz.title,
aboutText: biz.description?.trim() || NIVASH_BRAND.aboutText,
};
}
return base;
return MONTIME_BRAND;
});
const singleBusinessId = computed(() => singleBusiness.value?.id ?? null);
@@ -35,6 +41,10 @@ export const useTenantStore = defineStore('tenant', () => {
singleBusiness.value = business;
}
function setFocusedBusiness(business: Business | null) {
focusedBusiness.value = business;
}
async function bootstrap() {
if (loaded.value || loading.value) return;
loading.value = true;
@@ -68,8 +78,12 @@ export const useTenantStore = defineStore('tenant', () => {
isSingleBusiness,
singleBusiness,
singleBusinessId,
focusedBusiness,
landingBusiness,
landingBusinessId,
brand,
bootstrap,
syncSingleBusiness,
setFocusedBusiness,
};
});
src/utils/auth-redirect.ts
+2 -2
View File
@@ -20,7 +20,7 @@ export function loginRouteWithRedirect(redirectPath: string) {
export function businessBookingPath(businessId: string, hash?: string) {
const normalizedHash = hash?.replace(/^#/, '');
const base = `/app/businesses/${businessId}`;
const base = `/app/businesses/${businessId}/book`;
return normalizedHash ? `${base}#${normalizedHash}` : base;
}
@@ -35,7 +35,7 @@ export function bookingDestination(
const normalizedHash = hash?.replace(/^#/, '');
return {
name: 'app-business-detail' as const,
name: 'app-business-book' as const,
params: { id: businessId },
...(normalizedHash ? { hash: normalizedHash } : {}),
};
src/views/app/AppBusinessBookingView.vue
+117
View File
@@ -0,0 +1,117 @@
<template>
<ResponsiveAppLayout>
<DetailPageSkeleton v-if="loading" />
<p
v-else-if="error"
class="rounded-xl border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-600 dark:text-red-400"
>
{{ error }}
</p>
<section v-else-if="business" class="min-w-0 max-w-full space-y-6">
<div
v-if="!business.isActive"
class="rounded-xl border border-amber-500/30 bg-amber-500/10 px-4 py-3 text-sm text-amber-700 dark:text-amber-400"
>
این کسب‌وکار فعلاً غیرفعال است.
</div>
<div
v-else-if="isOwnBusinessView"
class="rounded-2xl border border-border bg-surface-2 p-6 text-center"
>
<p class="text-sm text-muted">
شما صاحب این کسب‌وکار هستید و نمی‌توانید برای خودتان نوبت رزرو کنید.
</p>
<RouterLink
:to="{ name: 'app-owner' }"
class="mt-4 inline-flex items-center justify-center rounded-xl bg-brand-600 px-5 py-3 text-sm font-semibold text-white"
>
ورود به پنل مدیریت
</RouterLink>
</div>
<DesktopBookingFlow
v-else
:business="business"
:services="services"
:loading-services="loadingServices"
:services-error="servicesError"
:home-to="homeRoute"
@login="goToLoginForBooking"
@view-bookings="router.push({ name: 'app-bookings' })"
@go-home="router.push(homeRoute)"
/>
</section>
</ResponsiveAppLayout>
</template>
<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import { RouterLink, useRoute, useRouter } from 'vue-router';
import { fetchBusinessServices } from '@/api/business-services';
import { fetchBusiness } from '@/api/businesses';
import { ApiError } from '@/api/client';
import type { Business, BusinessService } from '@/api/types';
import DesktopBookingFlow from '@/components/booking/DesktopBookingFlow.vue';
import DetailPageSkeleton from '@/components/ui/DetailPageSkeleton.vue';
import ResponsiveAppLayout from '@/layouts/ResponsiveAppLayout.vue';
import { useOwnedBusiness } from '@/composables/useOwnedBusiness';
import { loginRouteWithRedirect } from '@/utils/auth-redirect';
const route = useRoute();
const router = useRouter();
const { ensureLoaded, isOwnBusiness } = useOwnedBusiness();
const business = ref<Business | null>(null);
const services = ref<BusinessService[]>([]);
const loading = ref(true);
const loadingServices = ref(false);
const error = ref('');
const servicesError = ref('');
const homeRoute = computed(() => ({
name: 'app-business-detail' as const,
params: { id: String(route.params.id) },
}));
const isOwnBusinessView = computed(() =>
business.value ? isOwnBusiness(business.value.id) : false,
);
async function loadBusiness() {
loading.value = true;
error.value = '';
try {
business.value = await fetchBusiness(String(route.params.id));
} catch (e) {
error.value = e instanceof ApiError ? e.message : 'بارگذاری کسب‌وکار ناموفق بود.';
} finally {
loading.value = false;
}
}
async function loadServices() {
if (!business.value) return;
loadingServices.value = true;
servicesError.value = '';
try {
services.value = await fetchBusinessServices(business.value.id, { activeOnly: true });
} catch (e) {
servicesError.value = e instanceof ApiError ? e.message : 'بارگذاری خدمات ناموفق بود.';
} finally {
loadingServices.value = false;
}
}
function goToLoginForBooking() {
void router.push(loginRouteWithRedirect(route.fullPath));
}
onMounted(async () => {
await ensureLoaded();
await loadBusiness();
if (!isOwnBusinessView.value) {
await loadServices();
}
});
</script>
src/views/app/AppBusinessDetailView.vue
+87 -60
View File
@@ -1,114 +1,141 @@
<template>
<ResponsiveAppLayout>
<DetailPageSkeleton v-if="loading" />
<div
v-if="loading"
class="flex min-h-dvh items-center justify-center bg-white dark:bg-[#0d1117]"
>
<BusinessCardSkeleton class="w-full max-w-5xl px-8" />
</div>
<div v-else-if="error" class="mx-auto max-w-lg px-6 py-16">
<p
v-else-if="error"
class="rounded-xl border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-600 dark:text-red-400"
>
{{ error }}
</p>
<section v-else-if="business" class="min-w-0 max-w-full space-y-6">
<div
v-if="!business.isActive"
class="rounded-xl border border-amber-500/30 bg-amber-500/10 px-4 py-3 text-sm text-amber-700 dark:text-amber-400"
>
این کسب‌وکار فعلاً غیرفعال است.
</div>
</div>
<div
v-else-if="isOwnBusinessView"
class="rounded-2xl border border-border bg-surface-2 p-6 text-center"
>
<p class="text-sm text-muted">
شما صاحب این کسب‌وکار هستید و نمی‌توانید برای خودتان نوبت رزرو کنید.
</p>
<RouterLink
:to="{ name: 'app-owner' }"
class="mt-4 inline-flex items-center justify-center rounded-xl bg-brand-600 px-5 py-3 text-sm font-semibold text-white"
>
ورود به پنل مدیریت
</RouterLink>
</div>
<DesktopLandingPage
v-else-if="business && isDesktop"
:services="landingServices"
:loading-services="loadingServices"
:services-error="servicesError"
:booking-enabled="bookingEnabled"
/>
<DesktopBookingFlow
v-else
:business="business"
:services="services"
:loading-services="loadingServices"
:services-error="servicesError"
:home-to="homeRoute"
@login="goToLoginForBooking"
@view-bookings="router.push({ name: 'app-bookings' })"
@go-home="router.push(homeRoute)"
/>
</section>
</ResponsiveAppLayout>
<WebAppLayout v-else-if="business">
<div
v-if="!business.isActive"
class="mb-4 rounded-xl border border-amber-500/30 bg-amber-500/10 px-4 py-3 text-sm text-amber-700 dark:text-amber-400"
>
این کسب‌وکار فعلاً غیرفعال است.
</div>
<MobileBusinessLanding
:services="landingServices"
:loading-services="loadingServices"
:services-error="servicesError"
:booking-enabled="bookingEnabled"
@book="goToBooking"
/>
</WebAppLayout>
</template>
<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import { RouterLink, useRoute, useRouter } from 'vue-router';
import { fetchBusinessServices } from '@/api/business-services';
import { useMediaQuery } from '@vueuse/core';
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { fetchBusiness } from '@/api/businesses';
import { ApiError } from '@/api/client';
import type { Business, BusinessService } from '@/api/types';
import DesktopBookingFlow from '@/components/booking/DesktopBookingFlow.vue';
import DetailPageSkeleton from '@/components/ui/DetailPageSkeleton.vue';
import ResponsiveAppLayout from '@/layouts/ResponsiveAppLayout.vue';
import type { Business } from '@/api/types';
import MobileBusinessLanding from '@/components/landing/MobileBusinessLanding.vue';
import DesktopLandingPage from '@/components/landing/DesktopLandingPage.vue';
import BusinessCardSkeleton from '@/components/ui/BusinessCardSkeleton.vue';
import WebAppLayout from '@/layouts/WebAppLayout.vue';
import { useOwnedBusiness } from '@/composables/useOwnedBusiness';
import { loginRouteWithRedirect } from '@/utils/auth-redirect';
import { useAuthStore } from '@/stores/auth';
import { useTenantStore } from '@/stores/tenant';
import type { LandingServiceItem } from '@/types/landing';
import { fetchLandingServices } from '@/utils/landing-services';
import { bookingDestination } from '@/utils/auth-redirect';
const isDesktop = useMediaQuery('(min-width: 1024px)');
const route = useRoute();
const router = useRouter();
const auth = useAuthStore();
const tenant = useTenantStore();
const { ensureLoaded, isOwnBusiness } = useOwnedBusiness();
const business = ref<Business | null>(null);
const services = ref<BusinessService[]>([]);
const landingServices = ref<LandingServiceItem[]>([]);
const loading = ref(true);
const loadingServices = ref(false);
const error = ref('');
const servicesError = ref('');
const homeRoute = computed(() => ({ name: 'app-home' }));
const isOwnBusinessView = computed(() =>
business.value ? isOwnBusiness(business.value.id) : false,
);
const bookingEnabled = computed(() => {
if (!business.value) return false;
if (!business.value.isActive) return false;
return !isOwnBusiness(business.value.id);
});
async function loadBusiness() {
loading.value = true;
error.value = '';
try {
business.value = await fetchBusiness(String(route.params.id));
const id = String(route.params.id);
business.value = await fetchBusiness(id);
tenant.setFocusedBusiness(business.value);
} catch (e) {
business.value = null;
tenant.setFocusedBusiness(null);
error.value = e instanceof ApiError ? e.message : 'بارگذاری کسب‌وکار ناموفق بود.';
} finally {
loading.value = false;
}
}
async function loadServices() {
async function loadLandingServices() {
if (!business.value) return;
loadingServices.value = true;
servicesError.value = '';
try {
services.value = await fetchBusinessServices(business.value.id, { activeOnly: true });
landingServices.value = await fetchLandingServices(business.value.id);
} catch (e) {
servicesError.value = e instanceof ApiError ? e.message : 'بارگذاری خدمات ناموفق بود.';
landingServices.value = [];
servicesError.value =
e instanceof ApiError ? e.message : 'بارگذاری خدمات ناموفق بود.';
} finally {
loadingServices.value = false;
}
}
function goToLoginForBooking() {
void router.push(loginRouteWithRedirect(route.fullPath));
function goToBooking() {
if (!business.value || !bookingEnabled.value) return;
void router.push(bookingDestination(business.value.id, auth.isLoggedIn));
}
watch(
() => route.params.id,
async () => {
await loadBusiness();
if (business.value) {
await loadLandingServices();
}
},
);
onMounted(async () => {
await ensureLoaded();
if (auth.isLoggedIn) {
await auth.loadUser();
await ensureLoaded();
}
await tenant.bootstrap();
await loadBusiness();
if (!isOwnBusinessView.value) {
await loadServices();
if (business.value) {
await loadLandingServices();
}
});
onBeforeUnmount(() => {
tenant.setFocusedBusiness(null);
});
</script>