pukaad-ui-lib 1.299.0 → 1.301.0

package/dist/module.json

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

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

@@ -0,0 +1,24 @@
+export interface PlaceItem {
+    id?: string;
+    name?: string;
+    cover_image?: string;
+    rating?: number;
+    review_count?: number;
+    like_count?: number;
+    address?: string;
+    description?: string;
+    is_liked?: boolean;
+}
+type __VLS_ModelProps = {
+    modelValue?: PlaceItem;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: PlaceItem) => any;
+} & {
+    "require-auth": () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: PlaceItem) => any) | undefined;
+    "onRequire-auth"?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,108 @@
+<template>
+  <div class="flex gap-[16px] items-start justify-between" @click="onClickCard">
+    <div class="flex gap-[8px] cursor-pointer flex-1 min-w-0">
+      <Image
+        v-if="modelValue?.cover_image"
+        :src="modelValue.cover_image"
+        width="114"
+        height="64"
+        class="rounded-[4px] object-cover flex-shrink-0"
+      />
+      <div
+        v-else
+        class="w-[114px] h-[64px] bg-mercury flex items-center justify-center rounded-[4px] flex-shrink-0"
+      >
+        <Icon name="fa6-solid:map-location-dot" size="24" class="text-gray" />
+      </div>
+
+      <div class="flex flex-col gap-[4px] min-w-0">
+        <div class="font-body-large-prominent truncate">
+          {{ modelValue?.name }}
+        </div>
+        <div
+          class="flex gap-[4px] items-center text-gray font-body-small flex-wrap"
+        >
+          <InputRating
+            :size="10"
+            readonly
+            :model-value="modelValue?.rating || 0"
+          />
+          <div>
+            {{ $convert.convertNumber(modelValue?.review_count || 0) }}
+          </div>
+          <div>•</div>
+          <div>
+            ถูกใจ {{ $convert.convertNumber(modelValue?.like_count || 0) }}
+          </div>
+          <div>•</div>
+          <div class="truncate">{{ modelValue?.address }}</div>
+        </div>
+        <div class="font-body-small text-gray line-clamp-2">
+          {{ modelValue?.description }}
+        </div>
+      </div>
+    </div>
+
+    <Button
+      :variant="modelValue?.is_liked ? 'default' : 'outline'"
+      :color="modelValue?.is_liked ? 'default' : 'primary'"
+      class="flex-shrink-0"
+      @click.stop="onLikeToggle"
+    >
+      {{ modelValue?.is_liked ? "\u0E16\u0E39\u0E01\u0E43\u0E08\u0E41\u0E25\u0E49\u0E27" : "\u0E16\u0E39\u0E01\u0E43\u0E08" }}
+    </Button>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+import { useCookie, useRuntimeConfig } from "nuxt/app";
+import { useApi } from "../../composables/useApi";
+const modelValue = defineModel({ type: Object, ...{ default: () => ({}) } });
+const emit = defineEmits(["require-auth"]);
+const router = useRouter();
+const api = useApi();
+const config = useRuntimeConfig();
+const isLoading = ref(false);
+const onClickCard = () => {
+  if (modelValue.value?.id) {
+    router.push(`/place/${modelValue.value.id}`);
+  }
+};
+const onLikeToggle = async () => {
+  const { APP_TYPE } = config.public;
+  const secId = useCookie(APP_TYPE === "OFFICE" ? "OFFICE_SEC_ID" : "SEC_ID");
+  if (!secId.value) {
+    emit("require-auth");
+    return;
+  }
+  if (!modelValue.value?.id) return;
+  if (isLoading.value) return;
+  const placeId = modelValue.value.id;
+  const currentLiked = !!modelValue.value.is_liked;
+  modelValue.value.is_liked = !currentLiked;
+  if (modelValue.value.like_count !== void 0) {
+    modelValue.value.like_count += !currentLiked ? 1 : -1;
+  }
+  isLoading.value = true;
+  try {
+    const method = currentLiked ? "DELETE" : "POST";
+    const response = await api(`/personal/suggest-places/${placeId}/like`, { method });
+    if (response.data) {
+      modelValue.value.is_liked = response.data.is_liked;
+      if (modelValue.value.like_count !== void 0) {
+        modelValue.value.like_count = response.data.like_count;
+      }
+    }
+  } catch (error) {
+    modelValue.value.is_liked = currentLiked;
+    if (modelValue.value.like_count !== void 0) {
+      modelValue.value.like_count += currentLiked ? 1 : -1;
+    }
+    console.error("Like toggle failed:", error);
+  } finally {
+    isLoading.value = false;
+  }
+};
+</script>

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

@@ -0,0 +1,24 @@
+export interface PlaceItem {
+    id?: string;
+    name?: string;
+    cover_image?: string;
+    rating?: number;
+    review_count?: number;
+    like_count?: number;
+    address?: string;
+    description?: string;
+    is_liked?: boolean;
+}
+type __VLS_ModelProps = {
+    modelValue?: PlaceItem;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: PlaceItem) => any;
+} & {
+    "require-auth": () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: PlaceItem) => any) | undefined;
+    "onRequire-auth"?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/card/card-review.d.vue.ts

@@ -4,22 +4,37 @@ type __VLS_Props = {
     isProfile: boolean;
     disabledLike?: boolean;
     disabledMenu?: boolean;
+    /** ถ้ามี place context → like/unlike และ edit จัดการใน component เลย */
+    place?: {
+        id: string | number;
+        name?: string;
+        address?: string;
+        cover?: string;
+    };
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     delete: (item: CardReviewProps) => any;
     edit: (item: CardReviewProps) => any;
     "toggle-like": (item: CardReviewProps, liked: boolean) => any;
     "select-image": (item: CardReviewProps, index: number) => any;
+    "review-updated": (data: unknown) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onDelete?: ((item: CardReviewProps) => any) | undefined;
     onEdit?: ((item: CardReviewProps) => any) | undefined;
     "onToggle-like"?: ((item: CardReviewProps, liked: boolean) => any) | undefined;
     "onSelect-image"?: ((item: CardReviewProps, index: number) => any) | undefined;
+    "onReview-updated"?: ((data: unknown) => any) | undefined;
 }>, {
     item: CardReviewProps;
     disabledMenu: boolean;
     isProfile: boolean;
     disabledLike: boolean;
+    place: {
+        id: string | number;
+        name?: string;
+        address?: string;
+        cover?: string;
+    };
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/card/card-review.vue

@@ -24,7 +24,7 @@
                 <Button
                   variant="text"
                   :color="liked ? 'primary' : 'default'"
-                  :disabled="props.disabledLike"
+                  :disabled="props.disabledLike || isLikeLoading"
                   :aria-pressed="liked"
                   @click="toggleLike"
                 >
@@ -40,7 +40,7 @@
                   v-if="!props.disabledMenu"
                   :state="menuType"
                   disabled-padding
-                  @review-edit="emit('edit', props.item)"
+                  @review-edit="onEdit"
                   @review-delete="emit('delete', props.item)"
                 />
               </div>
@@ -57,7 +57,9 @@
               :model-value="props.item.review?.rating"
             />
             <div class="text-gray font-body-small">
-              {{ convertDateTime(props.item.review?.created_at ?? "") }}
+              {{
+                convertDateTorelativeText(props.item.review?.created_at ?? "")
+              }}
             </div>
           </div>
         </div>
@@ -93,14 +95,27 @@
     :start-index="startIndex"
     title="รูปภาพรีวิว"
   />
+
+  <!-- Drawer แก้ไขรีวิว (ใช้เมื่อมี place context) -->
+  <DrawerPostReview
+    v-if="props.place?.id"
+    v-model="isDrawerOpen"
+    :item="drawerItem"
+    @success="onReviewSuccess"
+  />
 </template>
 
 <script setup>
 import { computed, ref, watch } from "vue";
 import { useRouter } from "vue-router";
+import { useNuxtApp } from "nuxt/app";
 import { useConvert } from "../../composables/useConvert";
+import { useApi } from "../../composables/useApi";
 const router = useRouter();
-const { convertNumber, convertDateTime } = useConvert();
+const { convertNumber, convertDateTorelativeText } = useConvert();
+const api = useApi();
+const nuxtApp = useNuxtApp();
+const $toast = nuxtApp.$toast;
 const props = defineProps({
   item: { type: Object, required: true, default: () => ({
     review_id: "0",
@@ -129,13 +144,15 @@ const props = defineProps({
   }) },
   isProfile: { type: Boolean, required: true, default: false },
   disabledLike: { type: Boolean, required: false, default: false },
-  disabledMenu: { type: Boolean, required: false, default: false }
+  disabledMenu: { type: Boolean, required: false, default: false },
+  place: { type: Object, required: false, default: void 0 }
 });
-const emit = defineEmits(["toggle-like", "select-image", "edit", "delete"]);
+const emit = defineEmits(["toggle-like", "select-image", "edit", "delete", "review-updated"]);
 const isOpen = ref(false);
 const startIndex = ref(0);
 const liked = ref(props.item.review?.liked ?? false);
 const likeCount = ref(props.item.review?.like_count ?? 0);
+const isLikeLoading = ref(false);
 watch(
   () => props.item.review?.liked,
   (val) => {
@@ -148,6 +165,16 @@ watch(
     likeCount.value = val ?? 0;
   }
 );
+const isDrawerOpen = ref(false);
+const drawerItem = computed(() => ({
+  placeId: String(props.place?.id ?? ""),
+  placeName: props.place?.name ?? "",
+  address: props.place?.address ?? "",
+  coverImage: props.place?.cover ?? "",
+  rating: props.item.review?.rating ?? 0,
+  description: props.item.review?.description ?? "",
+  photos: (props.item.review?.images ?? []).map((url) => ({ url }))
+}));
 const menuType = computed(
   () => props.item.user?.is_my_review ? "my-review" : "report-review"
 );
@@ -155,15 +182,41 @@ const navigateToProfile = (pathName) => {
   if (!pathName) return;
   router.push(`/@${pathName}`);
 };
-const toggleLike = () => {
-  if (liked.value) {
-    likeCount.value -= 1;
-    liked.value = false;
+const toggleLike = async () => {
+  if (isLikeLoading.value) return;
+  const newLiked = !liked.value;
+  liked.value = newLiked;
+  likeCount.value += newLiked ? 1 : -1;
+  emit("toggle-like", props.item, newLiked);
+  if (!props.place?.id) return;
+  isLikeLoading.value = true;
+  try {
+    const method = newLiked ? "post" : "delete";
+    const res = await api(
+      `/personal/suggest-places/${props.place.id}/reviews/${props.item.review_id}/like`,
+      { method }
+    );
+    if (res?.data) {
+      liked.value = res.data.liked ?? newLiked;
+      likeCount.value = res.data.like_count ?? likeCount.value;
+    }
+  } catch {
+    liked.value = !newLiked;
+    likeCount.value += newLiked ? -1 : 1;
+    $toast.error("\u0E40\u0E01\u0E34\u0E14\u0E02\u0E49\u0E2D\u0E1C\u0E34\u0E14\u0E1E\u0E25\u0E32\u0E14 \u0E01\u0E23\u0E38\u0E13\u0E32\u0E25\u0E2D\u0E07\u0E43\u0E2B\u0E21\u0E48\u0E2D\u0E35\u0E01\u0E04\u0E23\u0E31\u0E49\u0E07");
+  } finally {
+    isLikeLoading.value = false;
+  }
+};
+const onEdit = () => {
+  if (props.place?.id) {
+    isDrawerOpen.value = true;
   } else {
-    likeCount.value += 1;
-    liked.value = true;
+    emit("edit", props.item);
   }
-  emit("toggle-like", props.item, liked.value);
+};
+const onReviewSuccess = (data) => {
+  emit("review-updated", data);
 };
 const selectImage = (index) => {
   startIndex.value = index;

package/dist/runtime/components/card/card-review.vue.d.ts

@@ -4,22 +4,37 @@ type __VLS_Props = {
     isProfile: boolean;
     disabledLike?: boolean;
     disabledMenu?: boolean;
+    /** ถ้ามี place context → like/unlike และ edit จัดการใน component เลย */
+    place?: {
+        id: string | number;
+        name?: string;
+        address?: string;
+        cover?: string;
+    };
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     delete: (item: CardReviewProps) => any;
     edit: (item: CardReviewProps) => any;
     "toggle-like": (item: CardReviewProps, liked: boolean) => any;
     "select-image": (item: CardReviewProps, index: number) => any;
+    "review-updated": (data: unknown) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onDelete?: ((item: CardReviewProps) => any) | undefined;
     onEdit?: ((item: CardReviewProps) => any) | undefined;
     "onToggle-like"?: ((item: CardReviewProps, liked: boolean) => any) | undefined;
     "onSelect-image"?: ((item: CardReviewProps, index: number) => any) | undefined;
+    "onReview-updated"?: ((data: unknown) => any) | undefined;
 }>, {
     item: CardReviewProps;
     disabledMenu: boolean;
     isProfile: boolean;
     disabledLike: boolean;
+    place: {
+        id: string | number;
+        name?: string;
+        address?: string;
+        cover?: string;
+    };
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/display/display-rating-summary.d.vue.ts

@@ -7,6 +7,7 @@ export interface DisplayRatingSummaryProps {
     totalReviews?: number | string;
     distribution?: RatingDistribution[];
     badge?: number;
+    hasReviewed?: boolean;
 }
 declare const __VLS_export: import("vue").DefineComponent<DisplayRatingSummaryProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "write-review": () => any;
@@ -16,6 +17,7 @@ declare const __VLS_export: import("vue").DefineComponent<DisplayRatingSummaryPr
     rating: number | string;
     totalReviews: number | string;
     distribution: RatingDistribution[];
+    hasReviewed: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/display/display-rating-summary.vue

@@ -12,7 +12,7 @@
           {{ convertNumber(Number(props.totalReviews)) }} รีวิว
         </div>
       </div>
-      <Button color="primary" @click="emit('write-review')">
+      <Button v-if="!props.hasReviewed" color="primary" @click="emit('write-review')">
         <Icon name="pukaad:write-review" /> เขียนรีวิว
       </Button>
     </div>
@@ -63,7 +63,8 @@ const props = defineProps({
   rating: { type: [Number, String], required: false, default: 0 },
   totalReviews: { type: [Number, String], required: false, default: 0 },
   distribution: { type: Array, required: false, default: () => [] },
-  badge: { type: Number, required: false }
+  badge: { type: Number, required: false },
+  hasReviewed: { type: Boolean, required: false, default: false }
 });
 const sortedDistribution = computed(
   () => [...props.distribution].sort((a, b) => b.stars - a.stars)

package/dist/runtime/components/display/display-rating-summary.vue.d.ts

@@ -7,6 +7,7 @@ export interface DisplayRatingSummaryProps {
     totalReviews?: number | string;
     distribution?: RatingDistribution[];
     badge?: number;
+    hasReviewed?: boolean;
 }
 declare const __VLS_export: import("vue").DefineComponent<DisplayRatingSummaryProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "write-review": () => any;
@@ -16,6 +17,7 @@ declare const __VLS_export: import("vue").DefineComponent<DisplayRatingSummaryPr
     rating: number | string;
     totalReviews: number | string;
     distribution: RatingDistribution[];
+    hasReviewed: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/drawer/drawer-profile-network.d.vue.ts

@@ -4,7 +4,7 @@ export interface ProfileSummary {
     avatar: string;
     follower_count: number;
     following_count: number;
-    favorite_count?: number;
+    like_place_count?: number;
 }
 export interface DrawerProfileNetworkProps {
     profileId: string;

package/dist/runtime/components/drawer/drawer-profile-network.vue

@@ -17,13 +17,19 @@
     <ShadTabs v-model="activeTab" class="flex-1 flex flex-col h-full">
       <ShadTabsList>
         <ShadTabsTrigger value="followers" class="px-[16px] py-[8px]">
-          ผู้ติดตาม ({{ $convert.convertNumber(profileData?.follower_count || 0) }})
+          ผู้ติดตาม ({{
+            $convert.convertNumber(profileData?.follower_count || 0)
+          }})
         </ShadTabsTrigger>
         <ShadTabsTrigger value="following" class="px-[16px] py-[8px]">
-          กำลังติดตาม ({{ $convert.convertNumber(profileData?.following_count || 0) }})
+          กำลังติดตาม ({{
+            $convert.convertNumber(profileData?.following_count || 0)
+          }})
         </ShadTabsTrigger>
         <ShadTabsTrigger value="favorites" class="px-[16px] py-[8px]">
-          สถานที่โปรด ({{ $convert.convertNumber(profileData?.favorite_count || 0) }})
+          สถานที่โปรด ({{
+            $convert.convertNumber(profileData?.like_place_count || 0)
+          }})
         </ShadTabsTrigger>
       </ShadTabsList>
 
@@ -32,33 +38,62 @@
         <ShadTabsContent value="followers" class="flex flex-col mt-0">
           <template v-if="tabState.followers.loading">
             <div class="flex justify-center py-[40px]">
-              <Icon name="lucide:loader-2" size="24" class="animate-spin text-gray" />
+              <Icon
+                name="lucide:loader-2"
+                size="24"
+                class="animate-spin text-gray"
+              />
             </div>
           </template>
           <template v-else-if="followers.length > 0">
             <div class="flex flex-col gap-[16px]">
-              <template v-for="(user, index) in followers" :key="user.id || index">
-                <CardUserItem v-model="followers[index]" @require-auth="emit('require-auth')" />
+              <template
+                v-for="(user, index) in followers"
+                :key="user.id || index"
+              >
+                <CardUserItem
+                  v-model="followers[index]"
+                  @require-auth="emit('require-auth')"
+                />
                 <Divider v-if="index !== followers.length - 1" />
               </template>
             </div>
-            <div v-if="tabState.followers.loadingMore" class="flex justify-center py-[16px]">
-              <Icon name="lucide:loader-2" size="20" class="animate-spin text-gray" />
+            <div
+              v-if="tabState.followers.loadingMore"
+              class="flex justify-center py-[16px]"
+            >
+              <Icon
+                name="lucide:loader-2"
+                size="20"
+                class="animate-spin text-gray"
+              />
             </div>
           </template>
           <template v-else>
-            <div v-if="isMyProfile" class="h-[200px] flex flex-col gap-[8px] items-center justify-center">
-              <div class="font-title-medium-prominent text-black">กำลังมองหาผู้ติดตามอยู่ใช่ไหม</div>
+            <div
+              v-if="isMyProfile"
+              class="h-[200px] flex flex-col gap-[8px] items-center justify-center"
+            >
+              <div class="font-title-medium-prominent text-black">
+                กำลังมองหาผู้ติดตามอยู่ใช่ไหม
+              </div>
               <div class="flex flex-col font-body-large text-gray items-center">
                 <div>เมื่อมีคนติดตามบัญชีนี้ ข้อมูลจะแสดงที่นี่</div>
                 <div>การโพสต์และการโต้ตอบกับผู้อื่นจะช่วยเพิ่มผู้ติดตาม</div>
               </div>
             </div>
-            <div v-else class="h-[200px] flex flex-col gap-[8px] items-center justify-center">
-              <div class="font-title-medium-prominent text-black flex gap-[4px]">
+            <div
+              v-else
+              class="h-[200px] flex flex-col gap-[8px] items-center justify-center"
+            >
+              <div
+                class="font-title-medium-prominent text-black flex gap-[4px]"
+              >
                 {{ profileData?.name }} ยังไม่มีผู้ติดตาม
               </div>
-              <div class="font-body-large text-gray">เมื่อมีคนติดตามบัญชีนี้ ข้อมูลจะแสดงที่นี่</div>
+              <div class="font-body-large text-gray">
+                เมื่อมีคนติดตามบัญชีนี้ ข้อมูลจะแสดงที่นี่
+              </div>
             </div>
           </template>
         </ShadTabsContent>
@@ -67,36 +102,71 @@
         <ShadTabsContent value="following" class="flex flex-col mt-0">
           <template v-if="tabState.following.loading">
             <div class="flex justify-center py-[40px]">
-              <Icon name="lucide:loader-2" size="24" class="animate-spin text-gray" />
+              <Icon
+                name="lucide:loader-2"
+                size="24"
+                class="animate-spin text-gray"
+              />
             </div>
           </template>
           <template v-else-if="following.length > 0">
             <div class="flex flex-col gap-[16px]">
-              <template v-for="(user, index) in following" :key="user.id || index">
-                <CardUserItem v-model="following[index]" @require-auth="emit('require-auth')" />
+              <template
+                v-for="(user, index) in following"
+                :key="user.id || index"
+              >
+                <CardUserItem
+                  v-model="following[index]"
+                  @require-auth="emit('require-auth')"
+                />
                 <Divider v-if="index !== following.length - 1" />
               </template>
             </div>
-            <div v-if="tabState.following.loadingMore" class="flex justify-center py-[16px]">
-              <Icon name="lucide:loader-2" size="20" class="animate-spin text-gray" />
+            <div
+              v-if="tabState.following.loadingMore"
+              class="flex justify-center py-[16px]"
+            >
+              <Icon
+                name="lucide:loader-2"
+                size="20"
+                class="animate-spin text-gray"
+              />
             </div>
           </template>
           <template v-else>
-            <div v-if="isMyProfile" class="flex flex-col gap-[24px] items-center justify-center h-[200px]">
+            <div
+              v-if="isMyProfile"
+              class="flex flex-col gap-[24px] items-center justify-center h-[200px]"
+            >
               <div class="flex flex-col gap-[8px] items-center">
-                <div class="font-title-medium-prominent text-black">ทันเหตุการณ์</div>
-                <div class="flex flex-col font-body-large text-gray items-center">
-                  <div>การติดตามบัญชีเป็นวิธีที่ง่ายในการสร้างลำดับเหตุการณ์</div>
-                  <div>ของคุณและรู้ว่ามีอะไรเกิดขึ้นบ้างกับหัวข้อและผู้ที่คุณสนใจ</div>
+                <div class="font-title-medium-prominent text-black">
+                  ทันเหตุการณ์
+                </div>
+                <div
+                  class="flex flex-col font-body-large text-gray items-center"
+                >
+                  <div>
+                    การติดตามบัญชีเป็นวิธีที่ง่ายในการสร้างลำดับเหตุการณ์
+                  </div>
+                  <div>
+                    ของคุณและรู้ว่ามีอะไรเกิดขึ้นบ้างกับหัวข้อและผู้ที่คุณสนใจ
+                  </div>
                 </div>
               </div>
-              <Button color="primary" @click="emit('explore-profiles')">ติดตามใครดี</Button>
+              <Button color="primary" @click="emit('explore-profiles')"
+                >ติดตามใครดี</Button
+              >
             </div>
-            <div v-else class="h-[200px] flex flex-col gap-[8px] items-center justify-center">
+            <div
+              v-else
+              class="h-[200px] flex flex-col gap-[8px] items-center justify-center"
+            >
               <div class="font-title-medium-prominent text-black">
                 {{ profileData?.name }} ไม่ได้กำลังติดตามใคร
               </div>
-              <div class="font-body-large text-gray">เมื่อพวกเขาติดตามบัญชี ข้อมูลจะแสดงที่นี่</div>
+              <div class="font-body-large text-gray">
+                เมื่อพวกเขาติดตามบัญชี ข้อมูลจะแสดงที่นี่
+              </div>
             </div>
           </template>
         </ShadTabsContent>
@@ -105,30 +175,65 @@
         <ShadTabsContent value="favorites" class="flex flex-col mt-0">
           <template v-if="tabState.favorites.loading">
             <div class="flex justify-center py-[40px]">
-              <Icon name="lucide:loader-2" size="24" class="animate-spin text-gray" />
+              <Icon
+                name="lucide:loader-2"
+                size="24"
+                class="animate-spin text-gray"
+              />
             </div>
           </template>
           <template v-else-if="favorites.length > 0">
-            <div class="flex flex-col items-center justify-center p-[48px] text-gray font-body-large">
-              สถานที่โปรด (อยู่ระหว่างการพัฒนา)?
+            <div class="flex flex-col gap-[16px]">
+              <template
+                v-for="(place, index) in favorites"
+                :key="place.id || index"
+              >
+                <CardPlaceItem
+                  v-model="favorites[index]"
+                  @require-auth="emit('require-auth')"
+                />
+                <Divider v-if="index !== favorites.length - 1" />
+              </template>
             </div>
-            <div v-if="tabState.favorites.loadingMore" class="flex justify-center py-[16px]">
-              <Icon name="lucide:loader-2" size="20" class="animate-spin text-gray" />
+
+            <div
+              v-if="tabState.favorites.loadingMore"
+              class="flex justify-center py-[16px]"
+            >
+              <Icon
+                name="lucide:loader-2"
+                size="20"
+                class="animate-spin text-gray"
+              />
             </div>
           </template>
           <template v-else>
-            <div v-if="isMyProfile" class="flex flex-col gap-[24px] items-center justify-center h-[200px]">
+            <div
+              v-if="isMyProfile"
+              class="flex flex-col gap-[24px] items-center justify-center h-[200px]"
+            >
               <div class="flex flex-col gap-[8px] items-center">
-                <div class="font-title-medium-prominent text-black">ยังไม่มีสถานที่โปรด</div>
-                <div class="font-body-large text-gray">กดหัวใจที่สถานที่ใดก็ได้เพื่อบันทึกไว้ที่นี่</div>
+                <div class="font-title-medium-prominent text-black">
+                  ยังไม่มีสถานที่โปรด
+                </div>
+                <div class="font-body-large text-gray">
+                  กดหัวใจที่สถานที่ใดก็ได้เพื่อบันทึกไว้ที่นี่
+                </div>
               </div>
-              <Button color="primary" @click="emit('explore-places')">ที่ไหนน่าสนใจ</Button>
+              <Button color="primary" @click="emit('explore-places')"
+                >ที่ไหนน่าสนใจ</Button
+              >
             </div>
-            <div v-else class="h-[200px] flex flex-col gap-[8px] items-center justify-center">
+            <div
+              v-else
+              class="h-[200px] flex flex-col gap-[8px] items-center justify-center"
+            >
               <div class="font-title-medium-prominent text-black">
                 @{{ profileData?.name }} ยังไม่มีสถานที่โปรด
               </div>
-              <div class="font-body-large text-gray">เมื่อเขาบันทึกสถานที่ไว้จะแสดงที่นี่</div>
+              <div class="font-body-large text-gray">
+                เมื่อเขาบันทึกสถานที่ไว้จะแสดงที่นี่
+              </div>
             </div>
           </template>
         </ShadTabsContent>
@@ -179,9 +284,12 @@ const fetchFollowers = async (isLoadMore = false) => {
     s.page = 1;
   }
   try {
-    const res = await api(`/profiles/${props.profileId}/followers`, {
-      query: { page: s.page, page_size: PAGE_SIZE }
-    });
+    const res = await api(
+      `/profiles/${props.profileId}/followers`,
+      {
+        query: { page: s.page, page_size: PAGE_SIZE }
+      }
+    );
     if (res.meta) s.hasMore = s.page < res.meta.total_pages;
     if (res.data?.profile) syncProfile(res.data.profile);
     const items = res.data?.items || [];
@@ -204,9 +312,12 @@ const fetchFollowing = async (isLoadMore = false) => {
     s.page = 1;
   }
   try {
-    const res = await api(`/profiles/${props.profileId}/following`, {
-      query: { page: s.page, page_size: PAGE_SIZE }
-    });
+    const res = await api(
+      `/profiles/${props.profileId}/following`,
+      {
+        query: { page: s.page, page_size: PAGE_SIZE }
+      }
+    );
     if (res.meta) s.hasMore = s.page < res.meta.total_pages;
     if (res.data?.profile) syncProfile(res.data.profile);
     const items = res.data?.items || [];
@@ -229,10 +340,9 @@ const fetchFavorites = async (isLoadMore = false) => {
     s.page = 1;
   }
   try {
-    const res = await api(
-      `/profiles/${props.profileId}/favorites`,
-      { query: { page: s.page, page_size: PAGE_SIZE } }
-    );
+    const res = await api(`/profiles/${props.profileId}/liked-places`, {
+      query: { page: s.page, page_size: PAGE_SIZE }
+    });
     if (res.meta) s.hasMore = s.page < res.meta.total_pages;
     if (res.data?.profile) syncProfile(res.data.profile);
     const items = res.data?.items || [];

package/dist/runtime/components/drawer/drawer-profile-network.vue.d.ts

@@ -4,7 +4,7 @@ export interface ProfileSummary {
     avatar: string;
     follower_count: number;
     following_count: number;
-    favorite_count?: number;
+    like_place_count?: number;
 }
 export interface DrawerProfileNetworkProps {
     profileId: string;

package/dist/runtime/components/input/input-address.d.vue.ts

@@ -49,11 +49,11 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     label: string;
     required: boolean;
     name: string;
+    gap: string;
     placeholder: string;
     labelDetail: string;
     placeholderDetail: string;
     requiredDetail: boolean;
-    gap: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/input/input-address.vue.d.ts

@@ -49,11 +49,11 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     label: string;
     required: boolean;
     name: string;
+    gap: string;
     placeholder: string;
     labelDetail: string;
     placeholderDetail: string;
     requiredDetail: boolean;
-    gap: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/input/input-autocomplete.d.vue.ts

@@ -48,10 +48,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     pageSize: number;
     id: string;
     name: string;
-    description: string;
     options: AutocompleteOption[] | string[] | number[];
-    limit: number;
+    description: string;
     placeholder: string;
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

package/dist/runtime/components/input/input-autocomplete.vue.d.ts

@@ -48,10 +48,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     pageSize: number;
     id: string;
     name: string;
-    description: string;
     options: AutocompleteOption[] | string[] | number[];
-    limit: number;
+    description: string;
     placeholder: string;
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

package/dist/runtime/components/input/input-file.d.vue.ts

@@ -34,9 +34,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     fullWidth: boolean;
     fullHeight: boolean;
     name: string;
+    accept: string;
     limit: number;
     disabledErrorMessage: boolean;
-    accept: string;
     labelIcon: string;
     disabledDrop: boolean;
     column: boolean;

package/dist/runtime/components/input/input-file.vue.d.ts

@@ -34,9 +34,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     fullWidth: boolean;
     fullHeight: boolean;
     name: string;
+    accept: string;
     limit: number;
     disabledErrorMessage: boolean;
-    accept: string;
     labelIcon: string;
     disabledDrop: boolean;
     column: boolean;

package/dist/runtime/components/input/input-password.d.vue.ts

@@ -22,8 +22,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
 }>, {
     id: string;
     name: string;
-    new: boolean;
     disabledForgotPassword: boolean;
+    new: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/input/input-password.vue.d.ts

@@ -22,8 +22,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
 }>, {
     id: string;
     name: string;
-    new: boolean;
     disabledForgotPassword: boolean;
+    new: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/input/input-tag.d.vue.ts

@@ -26,8 +26,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     name: string;
     state: "user" | "admin";
-    limit: number;
     placeholder: string;
+    limit: number;
     ignore: string[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/input/input-tag.vue.d.ts

@@ -26,8 +26,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     name: string;
     state: "user" | "admin";
-    limit: number;
     placeholder: string;
+    limit: number;
     ignore: string[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/modal/modal-password-confirmed.d.vue.ts

@@ -24,8 +24,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     }) => any) | undefined;
 }>, {
     title: string;
-    disabledForgotPassword: boolean;
     confirmText: string;
+    disabledForgotPassword: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/modal/modal-password-confirmed.vue.d.ts

@@ -24,8 +24,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     }) => any) | undefined;
 }>, {
     title: string;
-    disabledForgotPassword: boolean;
     confirmText: string;
+    disabledForgotPassword: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/modal/modal-password-verify.d.vue.ts

@@ -32,8 +32,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     title: string;
     mode: "login" | "secure";
-    disabledForgotPassword: boolean;
     confirmText: string;
+    disabledForgotPassword: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/modal/modal-password-verify.vue.d.ts

@@ -32,8 +32,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     title: string;
     mode: "login" | "secure";
-    disabledForgotPassword: boolean;
     confirmText: string;
+    disabledForgotPassword: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pukaad-ui-lib",
-  "version": "1.299.0",
+  "version": "1.301.0",
   "description": "pukaad-ui for MeMSG",
   "repository": {
     "type": "git",