pukaad-ui-lib 1.332.0 → 1.334.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "pukaad-ui-lib",
   "configKey": "pukaadUI",
-  "version": "1.332.0",
+  "version": "1.334.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/button.vue

@@ -4,16 +4,16 @@
   props.variant === 'text' || props.variant === 'link' ? '!p-0 !h-auto' : '',
   props.circle && 'rounded-full aspect-square',
   props.class
-]" :variant="props.variant" :color="props.color" :size="resolvedSize" :type="props.type"
-    :disabled="props.loading || props.disabled">
-    <span class="inline-grid place-items-center">
-      <span class="inline-flex items-center justify-center gap-[8px] [grid-area:1/1]"
-        :class="{ invisible: props.loading }">
-        <slot />
-      </span>
-      <ShadSpinner v-if="props.loading" class="[grid-area:1/1]" />
-    </span>
-  </ShadButton>
+]" :variant="props.variant" :color="props.color" :size="resolvedSize" :type="props.type"
+    :disabled="props.loading || props.disabled">
+    <span class="inline-grid place-items-center">
+      <span class="inline-flex items-center justify-center gap-[8px] [grid-area:1/1]"
+        :class="{ invisible: props.loading }">
+        <slot />
+      </span>
+      <ShadSpinner v-if="props.loading" class="[grid-area:1/1]" />
+    </span>
+  </ShadButton>
 </template>
 
 <script setup>

package/dist/runtime/components/card/card-place-detail.vue

@@ -92,17 +92,18 @@ const DAY_NAMES = [
 const props = defineProps({
   item: { type: Object, required: false, default: () => ({}) }
 });
+const toArray = (value) => Array.isArray(value) ? value : [];
 const categoryText = computed(
-  () => (props.item.categories ?? []).map((c) => c.category_name).join(", ")
+  () => toArray(props.item.categories).filter((c) => c?.category_name).map((c) => c.category_name).join(", ")
 );
 const businessHours = computed(
-  () => (props.item.opening_hours ?? []).map((h) => ({
+  () => toArray(props.item.opening_hours).filter((h) => !!h).map((h) => ({
     day: DAY_NAMES[h.day] ?? "",
-    time_range: !h.isOpen ? "\u0E2B\u0E22\u0E38\u0E14\u0E17\u0E33\u0E01\u0E32\u0E23" : h.isAllDay ? "\u0E40\u0E1B\u0E34\u0E14\u0E15\u0E25\u0E2D\u0E14 24 \u0E0A\u0E21." : (h.timeSlots ?? []).map((t) => `${t.start} - ${t.end}`).join(", ") || "\u0E40\u0E1B\u0E34\u0E14"
+    time_range: !h.isOpen ? "\u0E2B\u0E22\u0E38\u0E14\u0E17\u0E33\u0E01\u0E32\u0E23" : h.isAllDay ? "\u0E40\u0E1B\u0E34\u0E14\u0E15\u0E25\u0E2D\u0E14 24 \u0E0A\u0E21." : toArray(h.timeSlots).map((t) => `${t.start} - ${t.end}`).join(", ") || "\u0E40\u0E1B\u0E34\u0E14"
   }))
 );
 const socialLinks = computed(
-  () => (props.item.contact_channels ?? []).filter((ch) => ch.value).map((ch) => ({
+  () => toArray(props.item.contact_channels).filter((ch) => ch?.value).map((ch) => ({
     name: ch.channel_type ?? "link",
     link: ch.value
   }))

package/dist/runtime/components/card/card-place-search-row.d.vue.ts

@@ -0,0 +1,20 @@
+export interface PlaceSearchRowItem {
+    id: string;
+    business_name: string;
+    image_cover?: string;
+    rating?: number;
+    review_count?: number;
+    address?: {
+        full_address?: string;
+    } | null;
+}
+export interface CardPlaceSearchRowProps {
+    item: PlaceSearchRowItem;
+}
+declare const __VLS_export: import("vue").DefineComponent<CardPlaceSearchRowProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (item: PlaceSearchRowItem) => any;
+}, string, import("vue").PublicProps, Readonly<CardPlaceSearchRowProps> & Readonly<{
+    onSelect?: ((item: PlaceSearchRowItem) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/card/card-place-search-row.vue

@@ -0,0 +1,47 @@
+<template>
+  <div
+    class="flex items-center gap-[8px] px-[8px] py-[6px] rounded-md hover:bg-bright cursor-pointer"
+    @click="emit('select', props.item)"
+  >
+    <!-- thumbnail -->
+    <Image
+      v-if="props.item.image_cover"
+      :src="props.item.image_cover"
+      :width="71"
+      :height="40"
+      class="shrink-0 rounded-[4px] object-cover"
+    />
+    <div
+      v-else
+      class="w-[71px] h-[40px] bg-cloud shrink-0 rounded-[4px] flex items-center justify-center"
+    >
+      <Icon name="fa6-solid:map-location-dot" :size="20" class="text-gray" />
+    </div>
+
+    <!-- content -->
+    <div class="flex flex-col gap-[4px] min-w-0 flex-1">
+      <div class="font-body-medium text-black truncate">
+        {{ props.item.business_name }}
+      </div>
+      <div class="flex items-center gap-[4px] min-w-0">
+        <InputRating :model-value="props.item.rating ?? 0" readonly :size="14" />
+        <template v-if="props.item.review_count != null">
+          <span class="font-body-small text-gray shrink-0">
+            {{ $convert.convertNumber(props.item.review_count) }}
+          </span>
+          <span class="font-body-small text-gray shrink-0">•</span>
+        </template>
+        <span class="font-body-small text-gray truncate">
+          {{ props.item.address?.full_address }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  item: { type: Object, required: true }
+});
+const emit = defineEmits(["select"]);
+</script>

package/dist/runtime/components/card/card-place-search-row.vue.d.ts

@@ -0,0 +1,20 @@
+export interface PlaceSearchRowItem {
+    id: string;
+    business_name: string;
+    image_cover?: string;
+    rating?: number;
+    review_count?: number;
+    address?: {
+        full_address?: string;
+    } | null;
+}
+export interface CardPlaceSearchRowProps {
+    item: PlaceSearchRowItem;
+}
+declare const __VLS_export: import("vue").DefineComponent<CardPlaceSearchRowProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (item: PlaceSearchRowItem) => any;
+}, string, import("vue").PublicProps, Readonly<CardPlaceSearchRowProps> & Readonly<{
+    onSelect?: ((item: PlaceSearchRowItem) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/carousel.vue

@@ -1,35 +1,35 @@
 <template>
-  <div class="relative w-full h-full">
-    <div class="absolute top-[20px] left-1/2 transform -translate-x-1/2 z-[50]">
-      <div class="rounded-full py-[6px] px-[16px] bg-black/60 flex items-center justify-center">
-        <span class="text-white text-sm font-medium tracking-widest">
-          {{ currentIndex + 1 }} / {{ props.items.length }}
-        </span>
-      </div>
-    </div>
-
-    <ShadCarousel
-      :opts="{ startIndex: props.selectIndex }"
-      class="carousel-media w-full h-full"
-      @init-api="onInitApi"
-    >
-      <ShadCarouselContent class="h-full">
-        <ShadCarouselItem
-          v-for="(item, i) in props.items"
-          :key="i"
-          class="h-full flex items-center justify-center"
-        >
-          <img
-            :src="item.url"
-            class="w-full h-full object-contain select-none"
-            draggable="false"
-          />
-        </ShadCarouselItem>
-      </ShadCarouselContent>
-      <ShadCarouselPrevious v-if="props.items.length > 1" class="!left-[12px]" />
-      <ShadCarouselNext v-if="props.items.length > 1" class="!right-[12px]" />
-    </ShadCarousel>
-  </div>
+  <div class="relative w-full h-full">
+    <div class="absolute top-[20px] left-1/2 transform -translate-x-1/2 z-[50]">
+      <div class="rounded-full py-[6px] px-[16px] bg-black/60 flex items-center justify-center">
+        <span class="text-white text-sm font-medium tracking-widest">
+          {{ currentIndex + 1 }} / {{ props.items.length }}
+        </span>
+      </div>
+    </div>
+
+    <ShadCarousel
+      :opts="{ startIndex: props.selectIndex }"
+      class="carousel-media w-full h-full"
+      @init-api="onInitApi"
+    >
+      <ShadCarouselContent class="h-full">
+        <ShadCarouselItem
+          v-for="(item, i) in props.items"
+          :key="i"
+          class="h-full flex items-center justify-center"
+        >
+          <img
+            :src="item.url"
+            class="w-full h-full object-contain select-none"
+            draggable="false"
+          />
+        </ShadCarouselItem>
+      </ShadCarouselContent>
+      <ShadCarouselPrevious v-if="props.items.length > 1" class="!left-[12px]" />
+      <ShadCarouselNext v-if="props.items.length > 1" class="!right-[12px]" />
+    </ShadCarousel>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/chart/chart-approval-activity.d.vue.ts

@@ -0,0 +1,35 @@
+export type ApprovalStatusKey = "pending" | "approved" | "rejected";
+export interface ApprovalSeriesPoint {
+    date: string | Date;
+    value: number;
+}
+export interface ApprovalSeries {
+    /** เดือนที่โฟกัสของแถวนี้ (controlled โดย parent) */
+    month?: string | Date;
+    /** ข้อมูลรายวันของแถวนี้ */
+    data?: ApprovalSeriesPoint[];
+    /** ตัวเลขสรุปของแถว — ถ้าไม่ส่งจะรวมจาก data ให้ */
+    summary?: number;
+}
+type __VLS_Props = {
+    pending?: ApprovalSeries;
+    approved?: ApprovalSeries;
+    rejected?: ApprovalSeries;
+    /** locale ของชื่อเดือน (default en-US ตาม Figma) */
+    locale?: string;
+    /** ความสูง component เช่น "600px" หรือ 600 — ไม่ส่ง = เต็ม parent */
+    height?: string | number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    change: (key: ApprovalStatusKey, month: Date) => any;
+    prev: (key: ApprovalStatusKey, month: Date) => any;
+    next: (key: ApprovalStatusKey, month: Date) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onChange?: ((key: ApprovalStatusKey, month: Date) => any) | undefined;
+    onPrev?: ((key: ApprovalStatusKey, month: Date) => any) | undefined;
+    onNext?: ((key: ApprovalStatusKey, month: Date) => any) | undefined;
+}>, {
+    locale: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/chart/chart-approval-activity.vue

@@ -0,0 +1,152 @@
+<script setup>
+import { computed } from "vue";
+import { VisAxis, VisGroupedBar, VisXYContainer } from "@unovis/vue";
+import { ChartContainer } from "#pukaad-ui/runtime/components/ui/chart";
+const props = defineProps({
+  pending: { type: Object, required: false },
+  approved: { type: Object, required: false },
+  rejected: { type: Object, required: false },
+  locale: { type: String, required: false, default: "en-US" },
+  height: { type: [String, Number], required: false }
+});
+const emit = defineEmits(["change", "prev", "next"]);
+const rows = [
+  { key: "pending", title: "\u0E23\u0E2D\u0E01\u0E32\u0E23\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19", color: "#FEF3C7" },
+  { key: "approved", title: "\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19\u0E41\u0E25\u0E49\u0E27", color: "#E3F5E3" },
+  { key: "rejected", title: "\u0E1B\u0E0F\u0E34\u0E40\u0E2A\u0E18", color: "#FDE3E3" }
+];
+const summaryMeta = [
+  { key: "pending", label: "\u0E23\u0E2D\u0E01\u0E32\u0E23\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19", color: "#F9A825" },
+  { key: "approved", label: "\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19\u0E41\u0E25\u0E49\u0E27", color: "#43A047" },
+  { key: "rejected", label: "\u0E1B\u0E0F\u0E34\u0E40\u0E2A\u0E18", color: "#D32F2F" }
+];
+const chartConfig = {};
+const seriesByKey = computed(() => ({
+  pending: props.pending ?? {},
+  approved: props.approved ?? {},
+  rejected: props.rejected ?? {}
+}));
+const normalizedByKey = computed(() => {
+  const out = { pending: [], approved: [], rejected: [] };
+  for (const r of rows) {
+    out[r.key] = (seriesByKey.value[r.key].data ?? []).map((d) => ({
+      _date: d.date instanceof Date ? d.date : new Date(d.date),
+      value: d.value ?? 0
+    }));
+  }
+  return out;
+});
+const monthByKey = computed(() => {
+  const out = {};
+  for (const r of rows) {
+    const m = seriesByKey.value[r.key].month;
+    out[r.key] = m ? m instanceof Date ? m : new Date(m) : /* @__PURE__ */ new Date();
+  }
+  return out;
+});
+const summaryByKey = computed(() => {
+  const out = {};
+  for (const r of rows) {
+    const s = seriesByKey.value[r.key].summary;
+    out[r.key] = s ?? normalizedByKey.value[r.key].reduce((a, p) => a + p.value, 0);
+  }
+  return out;
+});
+const rootHeight = computed(
+  () => props.height == null ? void 0 : typeof props.height === "number" ? `${props.height}px` : props.height
+);
+const addMonths = (d, delta) => new Date(d.getFullYear(), d.getMonth() + delta, 1);
+const fmtMonth = (d, withYear) => d.toLocaleDateString(props.locale, {
+  month: "long",
+  ...withYear ? { year: "numeric" } : {}
+});
+const monthLabelOf = (k) => fmtMonth(monthByKey.value[k], true);
+const prevLabelOf = (k) => fmtMonth(addMonths(monthByKey.value[k], -1), false);
+const nextLabelOf = (k) => fmtMonth(addMonths(monthByKey.value[k], 1), false);
+const goPrev = (k) => {
+  const m = addMonths(monthByKey.value[k], -1);
+  emit("prev", k, m);
+  emit("change", k, m);
+};
+const goNext = (k) => {
+  const m = addMonths(monthByKey.value[k], 1);
+  emit("next", k, m);
+  emit("change", k, m);
+};
+const indicesOf = (k) => normalizedByKey.value[k].map((_, i) => i);
+const dayLabelOf = (k, i) => {
+  const d = normalizedByKey.value[k][i]?._date;
+  return d ? String(d.getDate()) : "";
+};
+</script>
+
+<template>
+  <div
+    class="flex flex-col gap-[16px] w-full"
+    :class="rootHeight ? '' : 'h-full'"
+    :style="rootHeight ? { height: rootHeight } : void 0"
+  >
+    <div
+      v-for="(row, ri) in rows"
+      :key="row.key"
+      class="flex flex-col gap-[16px] flex-1 min-h-0"
+    >
+      <div class="flex items-end justify-between gap-[16px]">
+        <div class="font-title-small-prominent">{{ row.title }}</div>
+        <div v-if="ri === 0" class="flex gap-[17px]">
+          <div
+            v-for="m in summaryMeta"
+            :key="m.key"
+            class="flex flex-col items-center border rounded-[8px] py-[8px] px-[16px] min-w-[114px]"
+          >
+            <div
+              class="font-title-medium-prominent"
+              :style="{ color: m.color }"
+            >
+              {{ summaryByKey[m.key] }}
+            </div>
+            <div class="font-body-large-prominent text-gray">{{ m.label }}</div>
+          </div>
+        </div>
+      </div>
+
+      <ChartContainer
+        :config="chartConfig"
+        class="flex-1 min-h-0 w-full aspect-auto"
+      >
+        <VisXYContainer :data="normalizedByKey[row.key]">
+          <VisGroupedBar
+            :x="(_d, i) => i"
+            :y="[(d) => d.value]"
+            :color="[row.color]"
+            :rounded-corners="4"
+            bar-padding="0.25"
+          />
+          <VisAxis
+            type="x"
+            :x="(_d, i) => i"
+            :tick-values="indicesOf(row.key)"
+            :tick-format="(i) => dayLabelOf(row.key, i)"
+            :tick-line="false"
+            :domain-line="false"
+            :grid-line="false"
+          />
+        </VisXYContainer>
+      </ChartContainer>
+
+      <div
+        class="flex items-center justify-between font-label-sans-serif-small-prominent text-gray uppercase"
+      >
+        <div class="flex items-center cursor-pointer" @click="goPrev(row.key)">
+          <Icon name="lucide:chevrons-left" size="16" />
+          {{ prevLabelOf(row.key) }}
+        </div>
+        <div>{{ monthLabelOf(row.key) }}</div>
+        <div class="flex items-center cursor-pointer" @click="goNext(row.key)">
+          {{ nextLabelOf(row.key) }}
+          <Icon name="lucide:chevrons-right" size="16" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/chart/chart-approval-activity.vue.d.ts

@@ -0,0 +1,35 @@
+export type ApprovalStatusKey = "pending" | "approved" | "rejected";
+export interface ApprovalSeriesPoint {
+    date: string | Date;
+    value: number;
+}
+export interface ApprovalSeries {
+    /** เดือนที่โฟกัสของแถวนี้ (controlled โดย parent) */
+    month?: string | Date;
+    /** ข้อมูลรายวันของแถวนี้ */
+    data?: ApprovalSeriesPoint[];
+    /** ตัวเลขสรุปของแถว — ถ้าไม่ส่งจะรวมจาก data ให้ */
+    summary?: number;
+}
+type __VLS_Props = {
+    pending?: ApprovalSeries;
+    approved?: ApprovalSeries;
+    rejected?: ApprovalSeries;
+    /** locale ของชื่อเดือน (default en-US ตาม Figma) */
+    locale?: string;
+    /** ความสูง component เช่น "600px" หรือ 600 — ไม่ส่ง = เต็ม parent */
+    height?: string | number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    change: (key: ApprovalStatusKey, month: Date) => any;
+    prev: (key: ApprovalStatusKey, month: Date) => any;
+    next: (key: ApprovalStatusKey, month: Date) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onChange?: ((key: ApprovalStatusKey, month: Date) => any) | undefined;
+    onPrev?: ((key: ApprovalStatusKey, month: Date) => any) | undefined;
+    onNext?: ((key: ApprovalStatusKey, month: Date) => any) | undefined;
+}>, {
+    locale: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/display/display-image-place.vue

@@ -1,102 +1,102 @@
 <template>
-  <!-- Personal state → Featured layout — 1 รูป: w-full -->
-  <div v-if="layoutMode === 'featured' && photos.length === 1" class="h-[360px]">
-    <div class="w-full h-full rounded-[8px] overflow-hidden cursor-pointer" @click="openLightbox('photo', 0)">
-      <Image :src="photos[0].url" class="w-full h-full object-cover" width="auto" height="auto" />
-    </div>
-  </div>
-
-  <!-- Personal state → Featured layout — 2 รูป: แบ่งครึ่ง w-full -->
-  <div v-else-if="layoutMode === 'featured' && photos.length === 2" class="flex gap-[8px] h-[360px]">
-    <div class="flex-1 rounded-[8px] overflow-hidden cursor-pointer" @click="openLightbox('photo', 0)">
-      <Image :src="photos[0].url" class="w-full h-full object-cover" width="auto" height="auto" />
-    </div>
-    <div class="flex-1 rounded-[8px] overflow-hidden cursor-pointer" @click="openLightbox('photo', 1)">
-      <Image :src="photos[1].url" class="w-full h-full object-cover" width="auto" height="auto" />
-    </div>
-  </div>
-
-  <!-- Personal state → Featured layout — 3+ รูป: layout เดิม -->
-  <div v-else-if="layoutMode === 'featured'" class="flex gap-[8px] h-[360px]">
-    <div v-if="photos[0]" class="w-[620px] shrink-0 rounded-[8px] overflow-hidden cursor-pointer"
-      @click="openLightbox('photo', 0)">
-      <Image :src="photos[0].url" class="w-full h-full object-cover" width="auto" height="auto" />
-    </div>
-
-    <div v-if="photos[1]" class="flex-1 rounded-[8px] overflow-hidden cursor-pointer" @click="openLightbox('photo', 1)">
-      <Image :src="photos[1].url" class="w-full h-full object-cover" width="auto" height="auto" />
-    </div>
-
-    <div class="w-[306px] shrink-0 flex flex-col gap-[8px]">
-      <div v-if="photos[2]" class="flex-1 min-h-0 relative rounded-[8px] overflow-hidden cursor-pointer"
-        @click="openLightbox('photo', 2)">
-        <Image :src="photos[2].url" class="w-full h-full object-cover" width="auto" height="auto" />
-        <div v-if="featuredPhoto2Overflow > 0"
-          class="absolute inset-0 bg-black/50 flex flex-col items-center justify-center text-white gap-[6px]">
-          <Icon name="fa6-solid:image" :size="42" />
-          <span class="font-body-large">รูปภาพ ({{ convertNumber(featuredPhoto2Overflow) }})</span>
-        </div>
-      </div>
-
-      <div v-if="videos[0]" class="flex-1 min-h-0 relative rounded-[8px] overflow-hidden cursor-pointer"
-        @click="openLightbox('video', 0)">
-        <Image :src="videos[0].url" class="w-full h-full object-cover" width="auto" height="auto" />
-        <div class="absolute inset-0 bg-black/50 flex flex-col items-center justify-center text-white gap-[6px]">
-          <Icon name="fa6-solid:video" :size="42" />
-          <span class="font-body-large">วิดีโอ ({{ videos.length }})</span>
-        </div>
-      </div>
-      <div v-else-if="photos[3]" class="flex-1 min-h-0 relative rounded-[8px] overflow-hidden cursor-pointer"
-        @click="openLightbox('photo', 3)">
-        <Image :src="photos[3].url" class="w-full h-full object-cover" width="auto" height="auto" />
-        <div v-if="featuredPhoto3Overflow > 0"
-          class="absolute inset-0 bg-black/50 flex flex-col items-center justify-center text-white gap-[6px]">
-          <Icon name="fa6-solid:image" :size="42" />
-          <span class="font-body-large">รูปภาพ ({{ convertNumber(featuredPhoto3Overflow) }})</span>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Office / Business state → Album layout -->
-  <div v-else-if="layoutMode === 'album'" class="grid grid-cols-5 gap-[10px]">
-    <!-- Row 1: photos[0..3] -->
-    <div v-for="(photo, i) in galleryRow1" :key="`g1-${i}`"
-      class="w-[132px] h-[132px] rounded-[8px] overflow-hidden cursor-pointer" @click="openLightbox('photo', i)">
-      <Image :src="photo.url" class="w-full h-full object-cover" width="auto" height="auto" />
-    </div>
-
-    <!-- Row 1 col 5: image count overlay -->
-    <div v-show="galleryCountPhoto != null"
-      class="w-[132px] h-[132px] relative rounded-[8px] overflow-hidden cursor-pointer"
-      @click="openLightbox('photo', 8)">
-      <Image v-if="galleryCountPhoto" :src="galleryCountPhoto.url" class="w-full h-full object-cover" width="auto"
-        height="auto" />
-      <div class="absolute inset-0 bg-black/50 flex flex-col items-center justify-center text-white gap-[6px]">
-        <Icon name="fa6-solid:image" :size="35" />
-        <span class="font-label-medium">รูปภาพ ({{ convertNumber(photos.length - 8) }})</span>
-      </div>
-    </div>
-
-    <!-- Row 2: photos[4..7] -->
-    <div v-for="(photo, i) in galleryRow2" :key="`g2-${i}`"
-      class="w-[132px] h-[132px] rounded-[8px] overflow-hidden cursor-pointer" @click="openLightbox('photo', 4 + i)">
-      <Image :src="photo.url" class="w-full h-full object-cover" width="auto" height="auto" />
-    </div>
-
-    <!-- Row 2 col 5: video overlay -->
-    <div v-if="videos[0]" class="w-[132px] h-[132px] relative rounded-[8px] overflow-hidden cursor-pointer"
-      @click="openLightbox('video', 0)">
-      <Image :src="videos[0].url" class="w-full h-full object-cover" width="auto" height="auto" />
-      <div class="absolute inset-0 bg-black/50 flex flex-col items-center justify-center text-white gap-[6px]">
-        <Icon name="fa6-solid:video" :size="35" />
-        <span class="font-label-medium">วิดีโอ ({{ videos.length }})</span>
-      </div>
-    </div>
-  </div>
-
-  <!-- Lightbox modal -->
-  <ModalMediaView v-model="isMediaOpen" :items="mediaItems" :title="props.title" :start-index="mediaStartIndex" />
+  <!-- Personal state → Featured layout — 1 รูป: w-full -->
+  <div v-if="layoutMode === 'featured' && photos.length === 1" class="h-[360px]">
+    <div class="w-full h-full rounded-[8px] overflow-hidden cursor-pointer" @click="openLightbox('photo', 0)">
+      <Image :src="photos[0].url" class="w-full h-full object-cover" width="auto" height="auto" />
+    </div>
+  </div>
+
+  <!-- Personal state → Featured layout — 2 รูป: แบ่งครึ่ง w-full -->
+  <div v-else-if="layoutMode === 'featured' && photos.length === 2" class="flex gap-[8px] h-[360px]">
+    <div class="flex-1 rounded-[8px] overflow-hidden cursor-pointer" @click="openLightbox('photo', 0)">
+      <Image :src="photos[0].url" class="w-full h-full object-cover" width="auto" height="auto" />
+    </div>
+    <div class="flex-1 rounded-[8px] overflow-hidden cursor-pointer" @click="openLightbox('photo', 1)">
+      <Image :src="photos[1].url" class="w-full h-full object-cover" width="auto" height="auto" />
+    </div>
+  </div>
+
+  <!-- Personal state → Featured layout — 3+ รูป: layout เดิม -->
+  <div v-else-if="layoutMode === 'featured'" class="flex gap-[8px] h-[360px]">
+    <div v-if="photos[0]" class="w-[620px] shrink-0 rounded-[8px] overflow-hidden cursor-pointer"
+      @click="openLightbox('photo', 0)">
+      <Image :src="photos[0].url" class="w-full h-full object-cover" width="auto" height="auto" />
+    </div>
+
+    <div v-if="photos[1]" class="flex-1 rounded-[8px] overflow-hidden cursor-pointer" @click="openLightbox('photo', 1)">
+      <Image :src="photos[1].url" class="w-full h-full object-cover" width="auto" height="auto" />
+    </div>
+
+    <div class="w-[306px] shrink-0 flex flex-col gap-[8px]">
+      <div v-if="photos[2]" class="flex-1 min-h-0 relative rounded-[8px] overflow-hidden cursor-pointer"
+        @click="openLightbox('photo', 2)">
+        <Image :src="photos[2].url" class="w-full h-full object-cover" width="auto" height="auto" />
+        <div v-if="featuredPhoto2Overflow > 0"
+          class="absolute inset-0 bg-black/50 flex flex-col items-center justify-center text-white gap-[6px]">
+          <Icon name="fa6-solid:image" :size="42" />
+          <span class="font-body-large">รูปภาพ ({{ convertNumber(featuredPhoto2Overflow) }})</span>
+        </div>
+      </div>
+
+      <div v-if="videos[0]" class="flex-1 min-h-0 relative rounded-[8px] overflow-hidden cursor-pointer"
+        @click="openLightbox('video', 0)">
+        <Image :src="videos[0].url" class="w-full h-full object-cover" width="auto" height="auto" />
+        <div class="absolute inset-0 bg-black/50 flex flex-col items-center justify-center text-white gap-[6px]">
+          <Icon name="fa6-solid:video" :size="42" />
+          <span class="font-body-large">วิดีโอ ({{ videos.length }})</span>
+        </div>
+      </div>
+      <div v-else-if="photos[3]" class="flex-1 min-h-0 relative rounded-[8px] overflow-hidden cursor-pointer"
+        @click="openLightbox('photo', 3)">
+        <Image :src="photos[3].url" class="w-full h-full object-cover" width="auto" height="auto" />
+        <div v-if="featuredPhoto3Overflow > 0"
+          class="absolute inset-0 bg-black/50 flex flex-col items-center justify-center text-white gap-[6px]">
+          <Icon name="fa6-solid:image" :size="42" />
+          <span class="font-body-large">รูปภาพ ({{ convertNumber(featuredPhoto3Overflow) }})</span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Office / Business state → Album layout -->
+  <div v-else-if="layoutMode === 'album'" class="grid grid-cols-5 gap-[10px]">
+    <!-- Row 1: photos[0..3] -->
+    <div v-for="(photo, i) in galleryRow1" :key="`g1-${i}`"
+      class="w-[132px] h-[132px] rounded-[8px] overflow-hidden cursor-pointer" @click="openLightbox('photo', i)">
+      <Image :src="photo.url" class="w-full h-full object-cover" width="auto" height="auto" />
+    </div>
+
+    <!-- Row 1 col 5: image count overlay -->
+    <div v-show="galleryCountPhoto != null"
+      class="w-[132px] h-[132px] relative rounded-[8px] overflow-hidden cursor-pointer"
+      @click="openLightbox('photo', 8)">
+      <Image v-if="galleryCountPhoto" :src="galleryCountPhoto.url" class="w-full h-full object-cover" width="auto"
+        height="auto" />
+      <div class="absolute inset-0 bg-black/50 flex flex-col items-center justify-center text-white gap-[6px]">
+        <Icon name="fa6-solid:image" :size="35" />
+        <span class="font-label-medium">รูปภาพ ({{ convertNumber(photos.length - 8) }})</span>
+      </div>
+    </div>
+
+    <!-- Row 2: photos[4..7] -->
+    <div v-for="(photo, i) in galleryRow2" :key="`g2-${i}`"
+      class="w-[132px] h-[132px] rounded-[8px] overflow-hidden cursor-pointer" @click="openLightbox('photo', 4 + i)">
+      <Image :src="photo.url" class="w-full h-full object-cover" width="auto" height="auto" />
+    </div>
+
+    <!-- Row 2 col 5: video overlay -->
+    <div v-if="videos[0]" class="w-[132px] h-[132px] relative rounded-[8px] overflow-hidden cursor-pointer"
+      @click="openLightbox('video', 0)">
+      <Image :src="videos[0].url" class="w-full h-full object-cover" width="auto" height="auto" />
+      <div class="absolute inset-0 bg-black/50 flex flex-col items-center justify-center text-white gap-[6px]">
+        <Icon name="fa6-solid:video" :size="35" />
+        <span class="font-label-medium">วิดีโอ ({{ videos.length }})</span>
+      </div>
+    </div>
+  </div>
+
+  <!-- Lightbox modal -->
+  <ModalMediaView v-model="isMediaOpen" :items="mediaItems" :title="props.title" :start-index="mediaStartIndex" />
 </template>
 
 <script setup>