From cc998e2cfe68e0145d39a604ba4ee343a1cf31bd Mon Sep 17 00:00:00 2001
From: Mahdi <mahdi.banilohi@gmail.com>
Date: Thu, 16 Jul 2026 13:34:02 +0330
Subject: [PATCH] logo set

---
 src/api/businesses.ts                     |  20 +++++
 src/api/platform-settings.ts              |   2 +
 src/api/types.ts                          |   2 +
 src/components/brand/AppLogo.vue          |  24 +++--
 src/components/brand/BrandMark.vue        |  10 ++-
 src/components/brand/useAppLogo.ts        |  34 +++++++
 src/components/shared/LogoUploadField.vue |  62 +++++++++++++
 src/components/shared/LogoUploadPair.vue  |  68 ++++++++++++++
 src/composables/useLogoSources.ts         |  63 +++++++++++++
 src/layouts/WebAppLayout.vue              |  12 ++-
 src/stores/platform-settings.ts           | 105 +++++++++++++---------
 src/stores/tenant.ts                      |   8 +-
 src/utils/media.ts                        |  29 ++++++
 src/views/app/AppBusinessBookingView.vue  |  11 ++-
 src/views/app/AppOwnerView.vue            |  90 ++++++++++++++++++-
 15 files changed, 482 insertions(+), 58 deletions(-)
 create mode 100644 src/components/brand/useAppLogo.ts
 create mode 100644 src/components/shared/LogoUploadField.vue
 create mode 100644 src/components/shared/LogoUploadPair.vue
 create mode 100644 src/composables/useLogoSources.ts

diff --git a/src/api/businesses.ts b/src/api/businesses.ts
index 44fafb5..cd9430e 100644
--- a/src/api/businesses.ts
+++ b/src/api/businesses.ts
@@ -51,3 +51,23 @@ export function setBusinessCoverImage(imageId: string) {
     method: 'PATCH',
   });
 }
+
+export function uploadBusinessLogoLight(file: File) {
+  const form = new FormData();
+  form.append('file', file);
+  return apiFormData<Business>('/businesses/mine/logo-light', form);
+}
+
+export function uploadBusinessLogoDark(file: File) {
+  const form = new FormData();
+  form.append('file', file);
+  return apiFormData<Business>('/businesses/mine/logo-dark', form);
+}
+
+export function removeBusinessLogoLight() {
+  return api<Business>('/businesses/mine/logo-light', { method: 'DELETE' });
+}
+
+export function removeBusinessLogoDark() {
+  return api<Business>('/businesses/mine/logo-dark', { method: 'DELETE' });
+}
diff --git a/src/api/platform-settings.ts b/src/api/platform-settings.ts
index fb26850..5de0431 100644
--- a/src/api/platform-settings.ts
+++ b/src/api/platform-settings.ts
@@ -2,6 +2,8 @@ import { api } from './client';
 
 export type PlatformSettings = {
   loginHeroImageUrl: string | null;
+  logoLightUrl: string | null;
+  logoDarkUrl: string | null;
 };
 
 export function fetchPlatformSettings() {
diff --git a/src/api/types.ts b/src/api/types.ts
index b38ce54..bdfe92a 100644
--- a/src/api/types.ts
+++ b/src/api/types.ts
@@ -43,6 +43,8 @@ export type Business = {
   promoDiscountPercent?: number | null;
   promoDiscountCode?: string | null;
   promoDiscountMode?: 'first_booking' | 'always';
+  logoLightUrl?: string | null;
+  logoDarkUrl?: string | null;
   averageRating?: number | null;
   reviewCount?: number;
   createdAt?: string;
diff --git a/src/components/brand/AppLogo.vue b/src/components/brand/AppLogo.vue
index e577274..e0005d0 100644
--- a/src/components/brand/AppLogo.vue
+++ b/src/components/brand/AppLogo.vue
@@ -1,19 +1,19 @@
 <template>
   <img
     v-if="variant === 'mark'"
-    src="/icons/icon-192.png"
-    alt="منتایم"
+    :src="markSrc"
+    :alt="alt"
     :class="imgClass"
   />
   <template v-else>
     <img
-      src="/brand/logo-lite.png"
-      alt="منتایم"
+      :src="lightSrc"
+      :alt="alt"
       :class="['dark:hidden', imgClass]"
     />
     <img
-      src="/brand/logo-dark.png"
-      alt="منتایم"
+      :src="darkSrc"
+      :alt="alt"
       :class="['hidden dark:block', imgClass]"
     />
   </template>
@@ -21,16 +21,22 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-
-export type LogoVariant = 'auto' | 'mark' | 'horizontal' | 'vertical';
+import { useAppLogoProps, type LogoVariant } from '@/components/brand/useAppLogo';
 
 const props = withDefaults(
   defineProps<{
     variant?: LogoVariant;
     class?: string;
+    alt?: string;
+    lightSrc?: string;
+    darkSrc?: string;
   }>(),
-  { variant: 'auto' },
+  {
+    variant: 'auto',
+    alt: 'منتایم',
+  },
 );
 
 const imgClass = computed(() => props.class ?? 'h-8 w-auto object-contain');
+const { lightSrc, darkSrc, markSrc } = useAppLogoProps(props);
 </script>
diff --git a/src/components/brand/BrandMark.vue b/src/components/brand/BrandMark.vue
index bc88e75..f370457 100644
--- a/src/components/brand/BrandMark.vue
+++ b/src/components/brand/BrandMark.vue
@@ -3,7 +3,13 @@
     <div
       class="flex h-11 w-11 shrink-0 items-center justify-center overflow-hidden rounded-full bg-white p-1.5 shadow-sm ring-1 ring-slate-200 dark:bg-slate-800 dark:ring-slate-600"
     >
-      <AppLogo variant="horizontal" class="h-full w-full object-contain" />
+      <AppLogo
+        variant="horizontal"
+        class="h-full w-full object-contain"
+        :light-src="activeLogos.light"
+        :dark-src="activeLogos.dark"
+        :alt="brand.name"
+      />
     </div>
     <span class="text-lg font-bold text-slate-800 dark:text-slate-100">
       {{ brand.name }}
@@ -14,8 +20,10 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia';
 import AppLogo from '@/components/brand/AppLogo.vue';
+import { useLogoSources } from '@/composables/useLogoSources';
 import { useTenantStore } from '@/stores/tenant';
 
 const tenant = useTenantStore();
 const { brand } = storeToRefs(tenant);
+const { activeLogos } = useLogoSources();
 </script>
diff --git a/src/components/brand/useAppLogo.ts b/src/components/brand/useAppLogo.ts
new file mode 100644
index 0000000..a153c21
--- /dev/null
+++ b/src/components/brand/useAppLogo.ts
@@ -0,0 +1,34 @@
+import { computed, onMounted } from 'vue';
+import { resolveLogoPair, DEFAULT_LOGO_LIGHT, DEFAULT_LOGO_DARK } from '@/utils/media';
+import { usePlatformSettingsStore } from '@/stores/platform-settings';
+
+export type LogoVariant = 'auto' | 'mark' | 'horizontal' | 'vertical';
+
+export function useAppLogoProps(
+  props: {
+    variant?: LogoVariant;
+    lightSrc?: string;
+    darkSrc?: string;
+  },
+) {
+  const platform = usePlatformSettingsStore();
+
+  onMounted(() => {
+    void platform.load();
+  });
+
+  const resolved = computed(() => {
+    if (props.lightSrc || props.darkSrc) {
+      return resolveLogoPair(props.lightSrc, props.darkSrc);
+    }
+    return platform.logoSources;
+  });
+
+  return {
+    lightSrc: computed(() => resolved.value.light),
+    darkSrc: computed(() => resolved.value.dark),
+    markSrc: computed(() => '/icons/icon-192.png'),
+  };
+}
+
+export { DEFAULT_LOGO_LIGHT, DEFAULT_LOGO_DARK };
diff --git a/src/components/shared/LogoUploadField.vue b/src/components/shared/LogoUploadField.vue
new file mode 100644
index 0000000..1e8622d
--- /dev/null
+++ b/src/components/shared/LogoUploadField.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="rounded-xl border border-border bg-surface-2 p-3">
+    <p class="mb-2 text-xs font-medium text-muted">{{ label }}</p>
+
+    <div
+      class="flex aspect-[3/1] items-center justify-center overflow-hidden rounded-lg border border-border px-4 py-3"
+      :class="darkPreview ? 'bg-slate-900' : 'bg-white'"
+    >
+      <img :src="previewSrc" alt="" class="max-h-12 w-auto max-w-full object-contain" />
+    </div>
+
+    <div class="mt-3 flex flex-wrap gap-2">
+      <label
+        class="inline-flex cursor-pointer items-center gap-2 rounded-lg bg-brand-600 px-3 py-2 text-xs font-semibold text-white transition hover:bg-brand-700"
+      >
+        <span>{{ uploading ? 'در حال آپلود...' : 'آپلود' }}</span>
+        <input
+          type="file"
+          accept="image/jpeg,image/png,image/webp,image/gif"
+          class="hidden"
+          :disabled="uploading || removing"
+          @change="onPick"
+        />
+      </label>
+
+      <button
+        v-if="hasCustom"
+        type="button"
+        class="rounded-lg border border-border px-3 py-2 text-xs text-muted transition hover:border-red-500/40 hover:text-red-600 disabled:opacity-50"
+        :disabled="uploading || removing"
+        @click="emit('remove')"
+      >
+        {{ removing ? 'در حال حذف...' : 'حذف' }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  label: string;
+  previewSrc: string;
+  uploading?: boolean;
+  removing?: boolean;
+  hasCustom?: boolean;
+  darkPreview?: boolean;
+}>();
+
+const emit = defineEmits<{
+  pick: [file: File];
+  remove: [];
+}>();
+
+function onPick(event: Event) {
+  const input = event.target as HTMLInputElement;
+  const file = input.files?.[0];
+  input.value = '';
+  if (file) {
+    emit('pick', file);
+  }
+}
+</script>
diff --git a/src/components/shared/LogoUploadPair.vue b/src/components/shared/LogoUploadPair.vue
new file mode 100644
index 0000000..a1abce1
--- /dev/null
+++ b/src/components/shared/LogoUploadPair.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="space-y-3">
+    <div>
+      <label class="block text-sm font-medium text-text">لوگوی کسب‌وکار</label>
+      <p class="mt-1 text-xs text-muted">
+        اختیاری — JPG، PNG یا WebP تا ۵ مگابایت. اگر فقط یکی را بارگذاری کنید، در هر دو حالت روشن و تاریک نمایش داده می‌شود.
+      </p>
+    </div>
+
+    <div class="grid gap-4 sm:grid-cols-2">
+      <LogoUploadField
+        label="حالت روشن"
+        :preview-src="lightPreview"
+        :uploading="uploadingLight"
+        :removing="removingLight"
+        :has-custom="!!lightUrl"
+        @pick="(file) => emit('upload-light', file)"
+        @remove="emit('remove-light')"
+      />
+      <LogoUploadField
+        label="حالت تاریک"
+        :preview-src="darkPreview"
+        :uploading="uploadingDark"
+        :removing="removingDark"
+        :has-custom="!!darkUrl"
+        dark-preview
+        @pick="(file) => emit('upload-dark', file)"
+        @remove="emit('remove-dark')"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import LogoUploadField from '@/components/shared/LogoUploadField.vue';
+import { resolveLogoPair } from '@/utils/media';
+
+const props = defineProps<{
+  lightUrl?: string | null;
+  darkUrl?: string | null;
+  fallbackLight?: string;
+  fallbackDark?: string;
+  uploadingLight?: boolean;
+  uploadingDark?: boolean;
+  removingLight?: boolean;
+  removingDark?: boolean;
+}>();
+
+const emit = defineEmits<{
+  'upload-light': [file: File];
+  'upload-dark': [file: File];
+  'remove-light': [];
+  'remove-dark': [];
+}>();
+
+const resolved = computed(() =>
+  resolveLogoPair(
+    props.lightUrl,
+    props.darkUrl,
+    props.fallbackLight,
+    props.fallbackDark,
+  ),
+);
+
+const lightPreview = computed(() => resolved.value.light);
+const darkPreview = computed(() => resolved.value.dark);
+</script>
diff --git a/src/composables/useLogoSources.ts b/src/composables/useLogoSources.ts
new file mode 100644
index 0000000..e3e06dc
--- /dev/null
+++ b/src/composables/useLogoSources.ts
@@ -0,0 +1,63 @@
+import { computed, onMounted } from 'vue';
+import { storeToRefs } from 'pinia';
+import type { Business } from '@/api/types';
+import { usePlatformSettingsStore } from '@/stores/platform-settings';
+import { useTenantStore } from '@/stores/tenant';
+import { resolveLogoPair } from '@/utils/media';
+
+export function useLogoSources() {
+  const platform = usePlatformSettingsStore();
+  const tenant = useTenantStore();
+  const { landingBusiness } = storeToRefs(tenant);
+
+  onMounted(() => {
+    void platform.load();
+  });
+
+  const platformLogos = computed(() =>
+    resolveLogoPair(
+      platform.logoLightUrl,
+      platform.logoDarkUrl,
+      platform.defaultLogoLight,
+      platform.defaultLogoDark,
+    ),
+  );
+
+  const businessLogos = computed(() => {
+    const biz = landingBusiness.value;
+    if (!biz?.logoLightUrl && !biz?.logoDarkUrl) {
+      return null;
+    }
+    return resolveLogoPair(
+      biz.logoLightUrl,
+      biz.logoDarkUrl,
+      platformLogos.value.light,
+      platformLogos.value.dark,
+    );
+  });
+
+  const activeLogos = computed(() => businessLogos.value ?? platformLogos.value);
+
+  return {
+    landingBusiness,
+    platformLogos,
+    businessLogos,
+    activeLogos,
+  };
+}
+
+export function logosForBusiness(
+  business: Pick<Business, 'logoLightUrl' | 'logoDarkUrl'> | null | undefined,
+  platformLight?: string | null,
+  platformDark?: string | null,
+) {
+  if (!business?.logoLightUrl && !business?.logoDarkUrl) {
+    return resolveLogoPair(platformLight, platformDark);
+  }
+  return resolveLogoPair(
+    business.logoLightUrl,
+    business.logoDarkUrl,
+    resolveLogoPair(platformLight, platformDark).light,
+    resolveLogoPair(platformLight, platformDark).dark,
+  );
+}
diff --git a/src/layouts/WebAppLayout.vue b/src/layouts/WebAppLayout.vue
index bbad6ba..5c51ae5 100644
--- a/src/layouts/WebAppLayout.vue
+++ b/src/layouts/WebAppLayout.vue
@@ -4,7 +4,13 @@
       class="z-20 flex shrink-0 items-center justify-between border-b border-border bg-surface/95 px-4 py-3 backdrop-blur supports-[backdrop-filter]:bg-surface/80 pt-[max(0.75rem,env(safe-area-inset-top))]"
     >
       <div class="flex min-w-0 items-center gap-3">
-        <AppLogo variant="horizontal" class="h-9 shrink-0" />
+        <AppLogo
+          variant="horizontal"
+          class="h-9 shrink-0"
+          :light-src="activeLogos.light"
+          :dark-src="activeLogos.dark"
+          :alt="brand.name"
+        />
       </div>
       <div class="flex items-center gap-2">
         <ThemeToggle />
@@ -50,16 +56,20 @@
 
 <script setup lang="ts">
 import { onMounted } from 'vue';
+import { storeToRefs } from 'pinia';
 import AppShell from '@/components/shell/AppShell.vue';
 import AppIcon from '@/components/ui/AppIcon.vue';
 import AppLogo from '@/components/brand/AppLogo.vue';
 import ThemeToggle from '@/components/ui/ThemeToggle.vue';
 import AuthHeaderAction from '@/components/shell/AuthHeaderAction.vue';
 import { useAppNav } from '@/composables/useAppNav';
+import { useLogoSources } from '@/composables/useLogoSources';
 import { useTenantStore } from '@/stores/tenant';
 
 const { mobileNavItems, mobileNavGridClass, navLinkClass, goToNavItem } = useAppNav();
 const tenant = useTenantStore();
+const { brand } = storeToRefs(tenant);
+const { activeLogos } = useLogoSources();
 
 onMounted(() => {
   void tenant.bootstrap();
diff --git a/src/stores/platform-settings.ts b/src/stores/platform-settings.ts
index 100dc4c..9c6d806 100644
--- a/src/stores/platform-settings.ts
+++ b/src/stores/platform-settings.ts
@@ -1,41 +1,64 @@
-import { defineStore } from 'pinia';
-import { computed, ref } from 'vue';
-import { fetchPlatformSettings } from '@/api/platform-settings';
-import { uploadUrl } from '@/utils/media';
-
-const DEFAULT_LOGIN_HERO = '/landing/hero-car-wash.jpg';
-
-export const usePlatformSettingsStore = defineStore('platformSettings', () => {
-  const loginHeroImageUrl = ref<string | null>(null);
-  const loaded = ref(false);
-  const loading = ref(false);
-
-  const loginHeroSrc = computed(
-    () => uploadUrl(loginHeroImageUrl.value) || DEFAULT_LOGIN_HERO,
-  );
-
-  async function load(force = false) {
-    if (loaded.value && !force) return;
-    if (loading.value) return;
-
-    loading.value = true;
-    try {
-      const data = await fetchPlatformSettings();
-      loginHeroImageUrl.value = data.loginHeroImageUrl;
-      loaded.value = true;
-    } catch {
-      loginHeroImageUrl.value = null;
-      loaded.value = true;
-    } finally {
-      loading.value = false;
-    }
-  }
-
-  return {
-    loginHeroImageUrl,
-    loginHeroSrc,
-    loaded,
-    loading,
-    load,
-  };
-});
+import { defineStore } from 'pinia';

+import { computed, ref } from 'vue';

+import { fetchPlatformSettings } from '@/api/platform-settings';

+import {

+  DEFAULT_LOGO_DARK,

+  DEFAULT_LOGO_LIGHT,

+  resolveLogoPair,

+  uploadUrl,

+} from '@/utils/media';

+

+const DEFAULT_LOGIN_HERO = '/landing/hero-car-wash.jpg';

+

+export const usePlatformSettingsStore = defineStore('platformSettings', () => {

+  const loginHeroImageUrl = ref<string | null>(null);

+  const logoLightUrl = ref<string | null>(null);

+  const logoDarkUrl = ref<string | null>(null);

+  const loaded = ref(false);

+  const loading = ref(false);

+

+  const defaultLogoLight = DEFAULT_LOGO_LIGHT;

+  const defaultLogoDark = DEFAULT_LOGO_DARK;

+

+  const loginHeroSrc = computed(

+    () => uploadUrl(loginHeroImageUrl.value) || DEFAULT_LOGIN_HERO,

+  );

+

+  const logoSources = computed(() =>

+    resolveLogoPair(logoLightUrl.value, logoDarkUrl.value),

+  );

+

+  async function load(force = false) {

+    if (loaded.value && !force) return;

+    if (loading.value) return;

+

+    loading.value = true;

+    try {

+      const data = await fetchPlatformSettings();

+      loginHeroImageUrl.value = data.loginHeroImageUrl;

+      logoLightUrl.value = data.logoLightUrl;

+      logoDarkUrl.value = data.logoDarkUrl;

+      loaded.value = true;

+    } catch {

+      loginHeroImageUrl.value = null;

+      logoLightUrl.value = null;

+      logoDarkUrl.value = null;

+      loaded.value = true;

+    } finally {

+      loading.value = false;

+    }

+  }

+

+  return {

+    loginHeroImageUrl,

+    logoLightUrl,

+    logoDarkUrl,

+    defaultLogoLight,

+    defaultLogoDark,

+    loginHeroSrc,

+    logoSources,

+    loaded,

+    loading,

+    load,

+  };

+});

diff --git a/src/stores/tenant.ts b/src/stores/tenant.ts
index 39f7bbb..eafa49c 100644
--- a/src/stores/tenant.ts
+++ b/src/stores/tenant.ts
@@ -37,8 +37,12 @@ export const useTenantStore = defineStore('tenant', () => {
   const singleBusinessId = computed(() => singleBusiness.value?.id ?? null);
 
   function syncSingleBusiness(business: Business) {
-    if (!isSingleBusiness.value) return;
-    singleBusiness.value = business;
+    if (isSingleBusiness.value) {
+      singleBusiness.value = business;
+    }
+    if (focusedBusiness.value?.id === business.id) {
+      focusedBusiness.value = business;
+    }
   }
 
   function setFocusedBusiness(business: Business | null) {
diff --git a/src/utils/media.ts b/src/utils/media.ts
index 6c78647..d2da239 100644
--- a/src/utils/media.ts
+++ b/src/utils/media.ts
@@ -44,3 +44,32 @@ export function businessGalleryUrls(
     .map((image) => uploadUrl(image.url))
     .filter(Boolean);
 }
+
+export const DEFAULT_LOGO_LIGHT = '/brand/logo-lite.png';
+export const DEFAULT_LOGO_DARK = '/brand/logo-dark.png';
+
+export type LogoSourcePair = {
+  light: string;
+  dark: string;
+};
+
+export function resolveLogoPair(
+  lightUrl: string | null | undefined,
+  darkUrl: string | null | undefined,
+  fallbackLight = DEFAULT_LOGO_LIGHT,
+  fallbackDark = DEFAULT_LOGO_DARK,
+): LogoSourcePair {
+  const light = uploadUrl(lightUrl);
+  const dark = uploadUrl(darkUrl);
+
+  if (light && dark) {
+    return { light, dark };
+  }
+  if (light && !dark) {
+    return { light, dark: light };
+  }
+  if (!light && dark) {
+    return { light: dark, dark };
+  }
+  return { light: fallbackLight, dark: fallbackDark };
+}
diff --git a/src/views/app/AppBusinessBookingView.vue b/src/views/app/AppBusinessBookingView.vue
index 9f17c9b..b6cfc95 100644
--- a/src/views/app/AppBusinessBookingView.vue
+++ b/src/views/app/AppBusinessBookingView.vue
@@ -46,7 +46,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
 import { RouterLink, useRoute, useRouter } from 'vue-router';
 import { fetchBusinessServices } from '@/api/business-services';
 import { fetchBusiness } from '@/api/businesses';
@@ -56,10 +56,12 @@ 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 { useTenantStore } from '@/stores/tenant';
 import { loginRouteWithRedirect } from '@/utils/auth-redirect';
 
 const route = useRoute();
 const router = useRouter();
+const tenant = useTenantStore();
 const { ensureLoaded, isOwnBusiness } = useOwnedBusiness();
 
 const business = ref<Business | null>(null);
@@ -83,7 +85,10 @@ async function loadBusiness() {
   error.value = '';
   try {
     business.value = await fetchBusiness(String(route.params.id));
+    tenant.setFocusedBusiness(business.value);
   } catch (e) {
+    business.value = null;
+    tenant.setFocusedBusiness(null);
     error.value = e instanceof ApiError ? e.message : 'بارگذاری کسب‌وکار ناموفق بود.';
   } finally {
     loading.value = false;
@@ -114,4 +119,8 @@ onMounted(async () => {
     await loadServices();
   }
 });
+
+onBeforeUnmount(() => {
+  tenant.setFocusedBusiness(null);
+});
 </script>
diff --git a/src/views/app/AppOwnerView.vue b/src/views/app/AppOwnerView.vue
index 9cca5b0..653ad85 100644
--- a/src/views/app/AppOwnerView.vue
+++ b/src/views/app/AppOwnerView.vue
@@ -73,6 +73,21 @@
         <AppButton type="submit" :loading="saving">ذخیره تغییرات</AppButton>
       </form>
 
+      <section class="border-t border-border pt-6">
+        <LogoUploadPair
+          :light-url="business.logoLightUrl"
+          :dark-url="business.logoDarkUrl"
+          :uploading-light="uploadingLogoLight"
+          :uploading-dark="uploadingLogoDark"
+          :removing-light="removingLogoLight"
+          :removing-dark="removingLogoDark"
+          @upload-light="onUploadLogoLight"
+          @upload-dark="onUploadLogoDark"
+          @remove-light="onRemoveLogoLight"
+          @remove-dark="onRemoveLogoDark"
+        />
+      </section>
+
       <section class="border-t border-border pt-6">
         <BusinessImageUpload
           :existing="business.images ?? []"
@@ -556,7 +571,7 @@
 
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue';
-import { fetchMyBusinesses, updateBusiness, uploadBusinessImages, deleteBusinessImage, setBusinessCoverImage } from '@/api/businesses';
+import { fetchMyBusinesses, updateBusiness, uploadBusinessImages, deleteBusinessImage, setBusinessCoverImage, uploadBusinessLogoLight, uploadBusinessLogoDark, removeBusinessLogoLight, removeBusinessLogoDark } from '@/api/businesses';
 import {
   createServiceRequest,
   fetchMyServiceRequests,
@@ -580,6 +595,7 @@ import type {
 import { ApiError } from '@/api/client';
 import BusinessAvailabilityEditor from '@/components/owner/BusinessAvailabilityEditor.vue';
 import BusinessImageUpload from '@/components/owner/BusinessImageUpload.vue';
+import LogoUploadPair from '@/components/shared/LogoUploadPair.vue';
 import ServiceClassManager from '@/components/owner/ServiceClassManager.vue';
 import FormPageSkeleton from '@/components/ui/FormPageSkeleton.vue';
 import ListCardSkeleton from '@/components/ui/ListCardSkeleton.vue';
@@ -614,6 +630,10 @@ const saving = ref(false);
 const savingBooking = ref(false);
 const savingService = ref(false);
 const uploadingImages = ref(false);
+const uploadingLogoLight = ref(false);
+const uploadingLogoDark = ref(false);
+const removingLogoLight = ref(false);
+const removingLogoDark = ref(false);
 const deletingImageId = ref<string | null>(null);
 const settingCoverId = ref<string | null>(null);
 const addingService = ref(false);
@@ -819,15 +839,79 @@ onMounted(async () => {
   }
 });
 
-async function refreshBusinessImages() {
+async function refreshBusinessFromMine() {
   if (!business.value) return;
   const list = await fetchMyBusinesses();
   const fresh = list.find((item) => item.id === business.value?.id) ?? list[0];
   if (!fresh) return;
-  business.value = { ...business.value, images: fresh.images ?? [] };
+  business.value = { ...business.value, ...fresh };
   tenant.syncSingleBusiness(business.value);
 }
 
+async function refreshBusinessImages() {
+  await refreshBusinessFromMine();
+}
+
+async function onUploadLogoLight(file: File) {
+  if (!business.value) return;
+  uploadingLogoLight.value = true;
+  error.value = '';
+  try {
+    business.value = await uploadBusinessLogoLight(file);
+    tenant.syncSingleBusiness(business.value);
+    message.value = 'لوگوی حالت روشن به‌روزرسانی شد.';
+  } catch (e) {
+    error.value = e instanceof ApiError ? e.message : 'آپلود لوگو ناموفق بود';
+  } finally {
+    uploadingLogoLight.value = false;
+  }
+}
+
+async function onUploadLogoDark(file: File) {
+  if (!business.value) return;
+  uploadingLogoDark.value = true;
+  error.value = '';
+  try {
+    business.value = await uploadBusinessLogoDark(file);
+    tenant.syncSingleBusiness(business.value);
+    message.value = 'لوگوی حالت تاریک به‌روزرسانی شد.';
+  } catch (e) {
+    error.value = e instanceof ApiError ? e.message : 'آپلود لوگو ناموفق بود';
+  } finally {
+    uploadingLogoDark.value = false;
+  }
+}
+
+async function onRemoveLogoLight() {
+  if (!business.value?.logoLightUrl) return;
+  removingLogoLight.value = true;
+  error.value = '';
+  try {
+    business.value = await removeBusinessLogoLight();
+    tenant.syncSingleBusiness(business.value);
+    message.value = 'لوگوی حالت روشن حذف شد.';
+  } catch (e) {
+    error.value = e instanceof ApiError ? e.message : 'حذف لوگو ناموفق بود';
+  } finally {
+    removingLogoLight.value = false;
+  }
+}
+
+async function onRemoveLogoDark() {
+  if (!business.value?.logoDarkUrl) return;
+  removingLogoDark.value = true;
+  error.value = '';
+  try {
+    business.value = await removeBusinessLogoDark();
+    tenant.syncSingleBusiness(business.value);
+    message.value = 'لوگوی حالت تاریک حذف شد.';
+  } catch (e) {
+    error.value = e instanceof ApiError ? e.message : 'حذف لوگو ناموفق بود';
+  } finally {
+    removingLogoDark.value = false;
+  }
+}
+
 async function onUploadImages(files: File[]) {
   if (!business.value || !files.length) return;