From e6d79018828d3f271a747c69389d6283152dcba1 Mon Sep 17 00:00:00 2001
From: BadLuckZ <thanagorn8802@gmail.com>
Date: Wed, 23 Jul 2025 12:19:00 +0700
Subject: [PATCH 1/5] feat: House Display

---
 .../rpkm/components/house-display.astro       | 94 +++++++++++++++++++
 .../rpkm/components/house-picker.astro        | 36 -------
 src/components/rpkm/sample.astro              |  9 +-
 3 files changed, 102 insertions(+), 37 deletions(-)
 create mode 100644 src/components/rpkm/components/house-display.astro

diff --git a/src/components/rpkm/components/house-display.astro b/src/components/rpkm/components/house-display.astro
new file mode 100644
index 0000000..bdd5d6c
--- /dev/null
+++ b/src/components/rpkm/components/house-display.astro
@@ -0,0 +1,94 @@
+---
+import Frame from "@/components/common/Frame.astro";
+import { getGroupByGroupId } from "@/lib/groupAPI";
+import { getProfile } from "@/lib/profileAPI";
+import type { Group, User } from "@/types/common";
+
+
+const token = Astro.cookies.get("token")?.value;
+
+let groupData: Group | null = null;
+let user: User | null = null;
+
+if (token) {
+  let groupID = "";
+  const userResponse = await getProfile(token);
+  if (userResponse.success && userResponse.data) {
+    user = userResponse.data.user as User;
+    groupID = user.groupId ? user.groupId : "";
+    if (groupID) {
+      const groupResponse = await getGroupByGroupId(groupID, token);
+      if (groupResponse.success && groupResponse.data) {
+        groupData = groupResponse.data.data as Group;
+      } else {
+        return Astro.redirect("/login");
+      }
+    } else {
+      return Astro.redirect("/login");
+    }
+  } else {
+    console.error("Failed to fetch user data:", userResponse.error);
+  }
+} else {
+  return Astro.redirect("/login");
+}
+
+if (!groupData || !user) {
+  return Astro.redirect("/login");
+}
+
+const assignedHouse = null; // Replace with actual house attribute
+---
+
+<div class="h-full w-full" id="view-house-final">
+  {
+    assignedHouse ? (
+      <Frame size="xs" color="purple" contentContainerClass="!h-full">
+        {/* Title */}
+        <p class="text-2xl font-semibold text-white">
+          บ้านรับเพื่อนที่เลือกไว้
+        </p>
+
+        {/* Empty Houses */}
+        <div class="pt-5">
+          <p class="text-[28px] font-semibold text-white">
+            คุณยังไม่ได้เลือกบ้าน
+          </p>
+        </div>
+      </Frame>
+    ) : (
+      <Frame
+        size="md"
+        color="purple"
+        contentContainerClass="!h-full !items-center !flex !flex-col"
+      >
+        {/* Title */}
+        <p class="text-2xl font-semibold text-white">บ้านรับเพื่อนที่ได้</p>
+
+        {/* House Image */}
+        <img
+          src="/images/rpkm/house-demo.png"
+          width={160}
+          height={160}
+          class="mt-5 border-4 border-white"
+        />
+
+        {/* House Name */}
+        <p class="pt-5 text-3xl font-semibold text-white">บ้าน xxx</p>
+
+        {/* House Instagram */}
+        <a
+          id="house-instagram-link-final"
+          href="https://youtu.be/dQw4w9WgXcQ?si=To9bwNaRw7cl03NT"
+          target="_blank"
+          class="flex cursor-pointer items-center gap-1 pt-4 pb-8"
+        >
+          <img src="/images/rpkm/instagram-icon.svg" width="20" height="20" />
+          <p id="house-instagram-final" class="font-medium text-white">
+            baan.something
+          </p>
+        </a>
+      </Frame>
+    )
+  }
+</div>
diff --git a/src/components/rpkm/components/house-picker.astro b/src/components/rpkm/components/house-picker.astro
index df5b3b2..7b47ccb 100644
--- a/src/components/rpkm/components/house-picker.astro
+++ b/src/components/rpkm/components/house-picker.astro
@@ -253,42 +253,6 @@ const isPickAllMainHouses =
 
 <HouseConfirmPopup />
 
-<!-- House Final Wrapper -->
-<div class="hidden h-full w-full" id="view-house-final">
-  <Frame
-    size="md"
-    color="purple"
-    contentContainerClass="!h-full !items-center !flex !flex-col"
-  >
-    <!-- Title -->
-    <p class="text-2xl font-semibold text-white">บ้านรับเพื่อนที่ได้</p>
-
-    <!-- House Image -->
-    <img
-      src="/images/rpkm/house-demo.png"
-      width={160}
-      height={160}
-      class="mt-5 border-4 border-white"
-    />
-
-    <!-- House Name -->
-    <p class="pt-5 text-3xl font-semibold text-white">บ้าน xxx</p>
-
-    <!-- House Instagram -->
-    <a
-      id="house-instagram-link-final"
-      href="https://youtu.be/dQw4w9WgXcQ?si=To9bwNaRw7cl03NT"
-      target="_blank"
-      class="flex cursor-pointer items-center gap-1 pt-4 pb-8"
-    >
-      <img src="/images/rpkm/instagram-icon.svg" width="20" height="20" />
-      <p id="house-instagram-final" class="font-medium text-white">
-        baan.something
-      </p>
-    </a>
-  </Frame>
-</div>
-
 <!-- Script -->
 <script
   define:vars={{
diff --git a/src/components/rpkm/sample.astro b/src/components/rpkm/sample.astro
index fa1a530..0da640d 100644
--- a/src/components/rpkm/sample.astro
+++ b/src/components/rpkm/sample.astro
@@ -3,6 +3,13 @@ import "@rpkm/styles/styles.css";
 import GroupPicker from "@rpkm/components/group-picker.astro";
 import HousePicker from "@rpkm/components/house-picker.astro";
 import Profile from "@rpkm/components/profile.astro";
+
+import HouseDisplay from "./components/house-display.astro";
+
+const displayHouseDate = new Date("2025-07-27T00:00:00+07:00");
+const currentDate = new Date();
+
+const isHouseDisplayEnabled = currentDate >= displayHouseDate;
 ---
 
 <div
@@ -12,7 +19,7 @@ import Profile from "@rpkm/components/profile.astro";
   <Profile />
 
   <!-- House -->
-  <HousePicker />
+  {isHouseDisplayEnabled ? <HouseDisplay /> : <HousePicker />}
 
   <!-- Group -->
   <GroupPicker />

From b9b4efaffc2e7aab18b9228af996848bcc571abf Mon Sep 17 00:00:00 2001
From: BadLuckZ <thanagorn8802@gmail.com>
Date: Wed, 23 Jul 2025 16:15:43 +0700
Subject: [PATCH 2/5] feat: Update House Disable Picking

---
 .../rpkm/components/group-picker.astro        | 34 +++++++++++++++++--
 .../rpkm/components/house-display.astro       |  9 ++---
 .../rpkm/components/house-picker.astro        | 26 ++++++++++----
 src/components/rpkm/data/date.ts              |  2 ++
 src/components/rpkm/sample.astro              |  9 ++---
 5 files changed, 59 insertions(+), 21 deletions(-)
 create mode 100644 src/components/rpkm/data/date.ts

diff --git a/src/components/rpkm/components/group-picker.astro b/src/components/rpkm/components/group-picker.astro
index fd8fd60..88929de 100644
--- a/src/components/rpkm/components/group-picker.astro
+++ b/src/components/rpkm/components/group-picker.astro
@@ -364,6 +364,10 @@ const member2 = members.length > 1 ? members[1] : null;
   import { AvatarMap } from "@rpkm/data/profile";
   import { getProfile } from "@/lib/profileAPI";
   import type { Group, User } from "@/types/common";
+  import { disablePickingDate } from "@rpkm/data/date";
+
+  const currentDate = new Date();
+  const isPickingDisabled = currentDate >= disablePickingDate;
 
   document.addEventListener("DOMContentLoaded", async () => {
     const userResponse = await getProfile();
@@ -380,8 +384,6 @@ const member2 = members.length > 1 ? members[1] : null;
     const groupData = groupResponse.data.data as Group;
 
     const isConfirmed = groupData ? groupData.isConfirmed : undefined;
-    const isOwner =
-      groupData && user ? groupData.ownerId === user.id : undefined;
     const memberCount = groupData ? groupData.memberCount : -1;
 
     const input = document.getElementById("room-id-insert") as HTMLInputElement;
@@ -490,6 +492,34 @@ const member2 = members.length > 1 ? members[1] : null;
       }
     }
 
+    if (isPickingDisabled) {
+      input.disabled = true;
+      input.placeholder = "ไม่สามารถกรอกเลขห้องได้";
+      headGroupBtn.disabled = true;
+      headGroupBtn.classList.add(
+        "cursor-not-allowed",
+        "opacity-50",
+        "brightness-75"
+      );
+      headGroupBtn.classList.remove("cursor-pointer");
+      backBtn?.classList.add("hidden");
+      exitButton?.classList.add("hidden");
+      joinGroupButton.disabled = true;
+    } else {
+      input.disabled = false;
+      input.placeholder = "โปรดกรอกรหัสห้อง";
+      headGroupBtn.disabled = false;
+      headGroupBtn.classList.remove(
+        "cursor-not-allowed",
+        "opacity-50",
+        "brightness-75"
+      );
+      headGroupBtn.classList.add("cursor-pointer");
+      backBtn?.classList.remove("hidden");
+      exitButton?.classList.remove("hidden");
+      joinGroupButton.disabled = false;
+    }
+
     input?.addEventListener("input", toggleSubmitButton);
     toggleSubmitButton();
 
diff --git a/src/components/rpkm/components/house-display.astro b/src/components/rpkm/components/house-display.astro
index bdd5d6c..57c5945 100644
--- a/src/components/rpkm/components/house-display.astro
+++ b/src/components/rpkm/components/house-display.astro
@@ -4,7 +4,6 @@ import { getGroupByGroupId } from "@/lib/groupAPI";
 import { getProfile } from "@/lib/profileAPI";
 import type { Group, User } from "@/types/common";
 
-
 const token = Astro.cookies.get("token")?.value;
 
 let groupData: Group | null = null;
@@ -42,7 +41,7 @@ const assignedHouse = null; // Replace with actual house attribute
 
 <div class="h-full w-full" id="view-house-final">
   {
-    assignedHouse ? (
+    !assignedHouse ? (
       <Frame size="xs" color="purple" contentContainerClass="!h-full">
         {/* Title */}
         <p class="text-2xl font-semibold text-white">
@@ -50,10 +49,8 @@ const assignedHouse = null; // Replace with actual house attribute
         </p>
 
         {/* Empty Houses */}
-        <div class="pt-5">
-          <p class="text-[28px] font-semibold text-white">
-            คุณยังไม่ได้เลือกบ้าน
-          </p>
+        <div class="pt-8">
+          <p class="text-[28px] font-semibold text-white">คุณไม่ได้เลือกบ้าน</p>
         </div>
       </Frame>
     ) : (
diff --git a/src/components/rpkm/components/house-picker.astro b/src/components/rpkm/components/house-picker.astro
index 7b47ccb..de4ee7e 100644
--- a/src/components/rpkm/components/house-picker.astro
+++ b/src/components/rpkm/components/house-picker.astro
@@ -1,4 +1,5 @@
 ---
+import { disablePickingDate } from "@rpkm/data/date";
 import {
   getHouses,
   type HouseDisplayType,
@@ -16,6 +17,9 @@ import { getGroupByGroupId } from "@/lib/groupAPI";
 import { getProfile } from "@/lib/profileAPI";
 import type { Group, User } from "@/types/common";
 
+const currentDate = new Date();
+const isHousePickingDisabled = currentDate >= disablePickingDate;
+
 const houseSizes = ["ทั้งหมด", "S", "M", "L", "XL", "XXL"];
 
 let houseDisplayData: HouseDisplayType[] = [];
@@ -262,6 +266,7 @@ const isPickAllMainHouses =
     token: token || "",
     isConfirmed: isConfirmed,
     isOwner: isOwner,
+    isHousePickingDisabled: isHousePickingDisabled,
   }}
 >
   document.addEventListener("DOMContentLoaded", () => {
@@ -273,15 +278,17 @@ const isPickAllMainHouses =
     const houseSearchInput = document.getElementById("house-search");
     const houseSizeFilter = document.getElementById("house-size-filter");
     const houseSizeOptions = document.querySelectorAll(".size-option");
+
     const houseCardContainer = document.getElementById("house-card-container");
     const closeBtn = document.getElementById("popup-close-btn");
-    if (!isOwner) {
+    if (!isOwner || isHousePickingDisabled) {
       closeBtn.classList.add("hidden");
     } else {
       closeBtn.classList.remove("hidden");
     }
+
     const pickBtn = document.getElementById("btn-picking-house");
-    if (!isOwner) {
+    if (!isOwner || isHousePickingDisabled) {
       pickBtn.disabled = true;
       pickBtn.classList.add("cursor-not-allowed", "opacity-50");
       pickBtn.classList.remove("cursor-pointer", "opacity-100");
@@ -292,12 +299,14 @@ const isPickAllMainHouses =
       pickBtn.classList.add("cursor-pointer", "opacity-100");
       pickBtn.innerHTML = `<p class="text-xl text-white font-medium">เลือกบ้าน</p>`;
     }
+
     const submitBtn = document.getElementById("btn-submit-house");
-    if (!isOwner) {
+    if (!isOwner || isHousePickingDisabled) {
       submitBtn.classList.add("hidden");
     } else {
       submitBtn.classList.remove("hidden");
     }
+
     const notPickingView = document.getElementById("view-not-picking");
     const pickingView = document.getElementById("view-picking");
 
@@ -640,7 +649,10 @@ const isPickAllMainHouses =
                 <p class="text-xs text-[#2B2D42] font-semibold text-center overflow-hidden whitespace-nowrap text-ellipsis">${house.nameThai}</p>
               </div>
               ${
-                isOwner && !isConfirmed && !isSubmitted
+                isOwner &&
+                !isConfirmed &&
+                !isSubmitted &&
+                !isHousePickingDisabled
                   ? `
                 <div class="flex justify-center">
                   <button class="cursor-pointer flex justify-center items-center">
@@ -655,9 +667,9 @@ const isPickAllMainHouses =
         } else {
           card.innerHTML = `
             <button 
-              class="relative h-[100px] w-[80px] border-dashed border-2 flex justify-center items-center border-[#D38DD8] ${isOwner && !isConfirmed && !isSubmitted ? "hover:bg-[#D38DD8]/20 transition-colors cursor-pointer" : "cursor-default"}"
+              class="relative h-[100px] w-[80px] border-dashed border-2 flex justify-center items-center border-[#D38DD8] ${isOwner && !isConfirmed && !isSubmitted && !isHousePickingDisabled ? "hover:bg-[#D38DD8]/20 transition-colors cursor-pointer" : "cursor-default"}"
               data-rank="${rank}"
-              ${!isOwner ? "disabled" : ""}
+              ${!isOwner || isHousePickingDisabled ? "disabled" : ""}
             >
               <img 
                 src="/images/rpkm/rank-${rank}.svg"
@@ -667,7 +679,7 @@ const isPickAllMainHouses =
               />
               <img 
                 src="/images/rpkm/plus-icon.svg"
-                class="w-5 h-5 ${isOwner && !isConfirmed && !isSubmitted ? "" : "hidden"}" 
+                class="w-5 h-5 ${!isHousePickingDisabled && isOwner && !isConfirmed && !isSubmitted ? "" : "hidden"}" 
               />
             </button>
           `;
diff --git a/src/components/rpkm/data/date.ts b/src/components/rpkm/data/date.ts
new file mode 100644
index 0000000..fecafd5
--- /dev/null
+++ b/src/components/rpkm/data/date.ts
@@ -0,0 +1,2 @@
+export const disablePickingDate = new Date("2025-07-24T00:00:00+07:00");
+export const displayHouseDate = new Date("2025-07-27T00:00:00+07:00");
diff --git a/src/components/rpkm/sample.astro b/src/components/rpkm/sample.astro
index 0da640d..56a95ec 100644
--- a/src/components/rpkm/sample.astro
+++ b/src/components/rpkm/sample.astro
@@ -1,15 +1,12 @@
 ---
 import "@rpkm/styles/styles.css";
 import GroupPicker from "@rpkm/components/group-picker.astro";
+import HouseDisplay from "@rpkm/components/house-display.astro";
 import HousePicker from "@rpkm/components/house-picker.astro";
 import Profile from "@rpkm/components/profile.astro";
+import { displayHouseDate } from "@rpkm/data/date";
 
-import HouseDisplay from "./components/house-display.astro";
-
-const displayHouseDate = new Date("2025-07-27T00:00:00+07:00");
 const currentDate = new Date();
-
-const isHouseDisplayEnabled = currentDate >= displayHouseDate;
 ---
 
 <div
@@ -19,7 +16,7 @@ const isHouseDisplayEnabled = currentDate >= displayHouseDate;
   <Profile />
 
   <!-- House -->
-  {isHouseDisplayEnabled ? <HouseDisplay /> : <HousePicker />}
+  {currentDate >= displayHouseDate ? <HouseDisplay /> : <HousePicker />}
 
   <!-- Group -->
   <GroupPicker />

From 15c90d032fcc72edf2e17e3a23835825e67e98e5 Mon Sep 17 00:00:00 2001
From: BadLuckZ <thanagorn8802@gmail.com>
Date: Wed, 23 Jul 2025 16:37:12 +0700
Subject: [PATCH 3/5] fix: More Disable

---
 .../rpkm/components/group-picker.astro        | 26 +++++++++++++++++++
 .../rpkm/components/house-picker.astro        | 12 ++++++---
 2 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/src/components/rpkm/components/group-picker.astro b/src/components/rpkm/components/group-picker.astro
index 88929de..064e721 100644
--- a/src/components/rpkm/components/group-picker.astro
+++ b/src/components/rpkm/components/group-picker.astro
@@ -504,7 +504,20 @@ const member2 = members.length > 1 ? members[1] : null;
       headGroupBtn.classList.remove("cursor-pointer");
       backBtn?.classList.add("hidden");
       exitButton?.classList.add("hidden");
+      submitGroupButton.disabled = true;
+      submitGroupButton.classList.add(
+        "cursor-not-allowed",
+        "opacity-50",
+        "brightness-75"
+      );
+      submitGroupButton.classList.remove("cursor-pointer");
       joinGroupButton.disabled = true;
+      joinGroupButton.classList.add(
+        "cursor-not-allowed",
+        "opacity-50",
+        "brightness-75"
+      );
+      joinGroupButton.classList.remove("cursor-pointer");
     } else {
       input.disabled = false;
       input.placeholder = "โปรดกรอกรหัสห้อง";
@@ -517,7 +530,20 @@ const member2 = members.length > 1 ? members[1] : null;
       headGroupBtn.classList.add("cursor-pointer");
       backBtn?.classList.remove("hidden");
       exitButton?.classList.remove("hidden");
+      submitGroupButton.disabled = false;
+      submitGroupButton.classList.remove(
+        "cursor-not-allowed",
+        "opacity-50",
+        "brightness-75"
+      );
+      submitGroupButton.classList.add("cursor-pointer");
       joinGroupButton.disabled = false;
+      joinGroupButton.classList.remove(
+        "cursor-not-allowed",
+        "opacity-50",
+        "brightness-75"
+      );
+      joinGroupButton.classList.add("cursor-pointer");
     }
 
     input?.addEventListener("input", toggleSubmitButton);
diff --git a/src/components/rpkm/components/house-picker.astro b/src/components/rpkm/components/house-picker.astro
index de4ee7e..a8458d5 100644
--- a/src/components/rpkm/components/house-picker.astro
+++ b/src/components/rpkm/components/house-picker.astro
@@ -93,7 +93,13 @@ const isPickAllMainHouses =
 
     <!-- Empty Houses -->
     <div class="pt-5">
-      <p class="text-[28px] font-semibold text-white">คุณยังไม่ได้เลือกบ้าน</p>
+      <p class="text-[28px] font-semibold text-white">
+        {
+          !isHousePickingDisabled
+            ? "คุณยังไม่ได้เลือกบ้าน"
+            : "คุณไม่ได้เลือกบ้าน"
+        }
+      </p>
     </div>
 
     <!-- Button -->
@@ -288,7 +294,7 @@ const isPickAllMainHouses =
     }
 
     const pickBtn = document.getElementById("btn-picking-house");
-    if (!isOwner || isHousePickingDisabled) {
+    if (!isOwner || isConfirmed || isHousePickingDisabled) {
       pickBtn.disabled = true;
       pickBtn.classList.add("cursor-not-allowed", "opacity-50");
       pickBtn.classList.remove("cursor-pointer", "opacity-100");
@@ -301,7 +307,7 @@ const isPickAllMainHouses =
     }
 
     const submitBtn = document.getElementById("btn-submit-house");
-    if (!isOwner || isHousePickingDisabled) {
+    if (!isOwner || isHousePickingDisabled || isConfirmed) {
       submitBtn.classList.add("hidden");
     } else {
       submitBtn.classList.remove("hidden");

From 0c2cb56d4748061b214d729f9e7afe33ac60bb7b Mon Sep 17 00:00:00 2001
From: BadLuckZ <thanagorn8802@gmail.com>
Date: Wed, 23 Jul 2025 16:41:27 +0700
Subject: [PATCH 4/5] fix: Forget IG

---
 src/components/rpkm/components/house-picker.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/rpkm/components/house-picker.astro b/src/components/rpkm/components/house-picker.astro
index a8458d5..0e46542 100644
--- a/src/components/rpkm/components/house-picker.astro
+++ b/src/components/rpkm/components/house-picker.astro
@@ -859,7 +859,7 @@ const isPickAllMainHouses =
       // Update instagram link
       const instagramLink = housePopup?.querySelector("#house-instagram-link");
       if (instagramLink) {
-        instagramLink.href = house.instagramURL;
+        instagramLink.href = house.instagram;
       }
 
       // Update button texts

From 8126d7802c97fb86d4e74afd24bbe478a2437110 Mon Sep 17 00:00:00 2001
From: BadLuckZ <thanagorn8802@gmail.com>
Date: Wed, 23 Jul 2025 16:53:36 +0700
Subject: [PATCH 5/5] fix: More Disable

---
 src/components/rpkm/components/group-picker.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/rpkm/components/group-picker.astro b/src/components/rpkm/components/group-picker.astro
index 064e721..941e70d 100644
--- a/src/components/rpkm/components/group-picker.astro
+++ b/src/components/rpkm/components/group-picker.astro
@@ -782,7 +782,7 @@ const member2 = members.length > 1 ? members[1] : null;
       }
     });
 
-    if (isConfirmed) {
+    if (isConfirmed || isPickingDisabled) {
       exitButton?.classList.add("hidden");
       backBtn?.classList.add("hidden");
     } else {