[Fix] Dev

src/components/rpkm/data/sizeColors.ts

@@ -0,0 +1,7 @@
+export const colorMap = [
+  { sizeLetter: "S", bgColor: "#0FF", textColor: "#000" },
+  { sizeLetter: "M", bgColor: "#FF1493", textColor: "#fff" },
+  { sizeLetter: "L", bgColor: "#FFB6C1", textColor: "#000" },
+  { sizeLetter: "XL", bgColor: "#D38DD8", textColor: "#000" },
+  { sizeLetter: "XXL", bgColor: "#2B2D42", textColor: "#fff" },
+];

src/components/rpkm/elements/house-confirm-popup.astro

@@ -5,8 +5,14 @@ declare global {
   interface Window {
     showHouseConfirmPopup?: () => void;
     confirmHouseSubmission?: () => void;
+    showSuccessPopup?: () => void;
   }
 }
+
+const token = Astro.cookies.get("token")?.value;
+if (!token) {
+  Astro.redirect("/login");
+}
 ---
 
 <!-- House Confirm Popup Overlay -->
@@ -92,7 +98,7 @@ declare global {
     </button>
   </div>
 
-  <script>
+  <script define:vars={{ token: token || "" }}>
     document.addEventListener("DOMContentLoaded", () => {
       const confirmPopup = document.getElementById("view-house-confirm-popup");
       const successPopup = document.getElementById("view-house-success-popup");
@@ -117,6 +123,7 @@ declare global {
         successPopup?.classList.remove("hidden");
         successPopup?.classList.add("flex");
       }
+      window.showSuccessPopup = showSuccessPopup;
 
       // Hide success popup function
       function hideSuccessPopup() {
@@ -130,14 +137,32 @@ declare global {
       });
 
       // Confirm button - hide confirm popup and show success popup
-      btnConfirm?.addEventListener("click", () => {
+      btnConfirm?.addEventListener("click", async () => {
         hideConfirmPopup();
         showSuccessPopup();
 
         // Trigger the actual submission in the parent component
         if (window.confirmHouseSubmission) {
           window.confirmHouseSubmission();
         }
+
+        // Submit houses
+        try {
+          const response = await fetch("/api/group/confirm", {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+              Authorization: `Bearer ${token}`,
+            },
+            body: JSON.stringify({}),
+          });
+          const result = await response.json();
+          if (!result.success) {
+            console.error("Failed to submit houses:", result.error);
+          }
+        } catch (err) {
+          console.error("Network error submitting houses:", err);
+        }
       });
 
       // Close button - hide success popup

src/components/rpkm/elements/house-detail-card.astro

@@ -1,25 +1,19 @@
 ---
-const { houseData = {} } = Astro.props;
-const { thName, image, size, amount, capacity } = houseData;
+import { colorMap } from "@rpkm/data/sizeColors";
 
-const colors = [
-  { size: "S", bgColor: "#0FF", textColor: "#000" },
-  { size: "M", bgColor: "#FF1493", textColor: "#fff" },
-  { size: "L", bgColor: "#FFB6C1", textColor: "#000" },
-  { size: "XL", bgColor: "#D38DD8", textColor: "#000" },
-  { size: "XXL", bgColor: "#2B2D42", textColor: "#fff" },
-];
+const { houseData = {} } = Astro.props;
+const { nameThai, image, sizeLetter, chosenCount, capacity } = houseData;
 
-let colorData = colors.find((color) => color.size == size);
+let colorData = colorMap.find((color) => color.sizeLetter == sizeLetter);
 if (!colorData) {
-  colorData = { size: "", bgColor: "#000", textColor: "#fff" };
+  colorData = { sizeLetter: "", bgColor: "#000", textColor: "#fff" };
 }
 ---
 
 <div
   class="relative h-[120px] w-[80px] cursor-pointer bg-white p-1"
-  data-name={thName}
-  id={`house-card-${thName}`}
+  data-name={nameThai}
+  id={`house-card-${nameThai}`}
 >
   <img
     src={image
@@ -32,23 +26,24 @@ if (!colorData) {
     <p
       class="w-auto overflow-hidden text-xs font-semibold text-ellipsis whitespace-nowrap text-[#2B2D42]"
     >
-      {thName}
+      {nameThai}
     </p>
 
     <p
       class="flex aspect-square w-[18px] items-center justify-center rounded-full px-[3px] py-[1px] text-[8px] font-semibold"
       style={`background-color: ${colorData.bgColor}; color: ${colorData.textColor};`}
     >
-      {size}
+      {sizeLetter}
     </p>
   </div>
 
   <!-- Lower Content -->
   <div class="flex items-center justify-between">
     <div class="flex items-center gap-[1px] text-[8px]">
       <p class="text-[#313131E5]">
-        <span style={`color: ${amount == capacity ? "#FF1493" : "#68A987"};`}
-          >{amount}</span
+        <span
+          style={`color: ${chosenCount == capacity ? "#FF1493" : "#68A987"};`}
+          >{chosenCount}</span
         >/{capacity}
       </p>
       <img src="/images/rpkm/person-icon.svg" width="12" height="12" />

src/components/rpkm/elements/house-info-popup.astro

@@ -1,16 +1,10 @@
 ---
-import Frame from "@/components/common/Frame.astro";
+import { colorMap } from "@rpkm/data/sizeColors";
 
-const colors = [
-  { size: "S", bgColor: "#0FF", textColor: "#000" },
-  { size: "M", bgColor: "#FF1493", textColor: "#fff" },
-  { size: "L", bgColor: "#FFB6C1", textColor: "#000" },
-  { size: "XL", bgColor: "#D38DD8", textColor: "#000" },
-  { size: "XXL", bgColor: "#2B2D42", textColor: "#fff" },
-];
+import Frame from "@/components/common/Frame.astro";
 
 // Default color
-const defaultColor = colors[0];
+const defaultColor = colorMap[0];
 ---
 
 <!-- House Popup Overlay -->

src/components/rpkm/elements/house-picking-card.astro

@@ -2,8 +2,18 @@
 const { house = {} } = Astro.props;
 const { name, imageURL, rank } = house;
 
-const rankWidth = rank === "sub" ? "55" : rank == 1 || rank == 2 ? "30" : "24";
-const rankHeight = rank === "sub" ? "55" : rank == 1 || rank == 2 ? "30" : "24";
+const rankWidth =
+  rank === "houseRankSub"
+    ? "55"
+    : rank == "houseRank1" || rank == "houseRank2"
+      ? "30"
+      : "24";
+const rankHeight =
+  rank === "houseRankSub"
+    ? "55"
+    : rank == "houseRank1" || rank == "houseRank2"
+      ? "30"
+      : "24";
 ---
 
 {

src/lib/houseAPI.ts

@@ -0,0 +1,111 @@
+import { type ApiResponse, api } from "@/lib/api";
+import { getAuthHeaders, getAuthToken } from "@/lib/auth";
+
+export interface SetHousePreferencesRequest {
+  houseRank1: string;
+  houseRank2: string;
+  houseRank3: string;
+  houseRank4: string;
+  houseRank5: string;
+  houseRankSub?: string;
+}
+
+export interface GetHousePreferencesRequest {
+  houseRank1: HouseResponse;
+  houseRank2: HouseResponse;
+  houseRank3: HouseResponse;
+  houseRank4: HouseResponse;
+  houseRank5: HouseResponse;
+  houseRankSub?: HouseResponse;
+}
+
+export type HouseResponse = {
+  id: string;
+  nameThai: string;
+  nameEnglish: string;
+  descriptionThai: string;
+  descriptionEnglish: string;
+  sizeLetter: string;
+  chosenCount: number;
+  capacity: number;
+  instagram: string;
+  facebook: string;
+  tiktok: string;
+};
+
+export async function setHousePreferences(
+  preferences: SetHousePreferencesRequest,
+  authToken?: string
+): Promise<
+  ApiResponse<{
+    groupId: string;
+    updatedPreferences: SetHousePreferencesRequest;
+    message: string;
+  }>
+> {
+  const token = authToken || getAuthToken();
+  if (!token) {
+    return {
+      success: false,
+      error: "กรุณาเข้าสู่ระบบก่อนลงทะเบียน",
+    };
+  }
+
+  const response = await api.post<{
+    groupId: string;
+    updatedPreferences: SetHousePreferencesRequest;
+    message: string;
+  }>("/group/house-preferences", preferences, {
+    headers: getAuthHeaders(token),
+  });
+
+  if (!response.success) {
+    console.error("Failed to set house preferences:", response.error);
+  }
+  return response;
+}
+
+export async function getHousePreferences(
+  authToken?: string
+): Promise<ApiResponse<{ data: GetHousePreferencesRequest }>> {
+  const token = authToken || getAuthToken();
+  if (!token) {
+    return {
+      success: false,
+      error: "กรุณาเข้าสู่ระบบก่อนลงทะเบียน",
+    };
+  }
+
+  const response = await api.get<{ data: GetHousePreferencesRequest }>(
+    "/group/house-preferences",
+    {
+      headers: getAuthHeaders(token),
+    }
+  );
+
+  if (!response.success) {
+    console.error("Failed to fetch house preferences:", response.error);
+  }
+  return response;
+}
+
+export async function getAllHouses(
+  authToken?: string
+): Promise<ApiResponse<{ data: HouseResponse[] }>> {
+  const token = authToken || getAuthToken();
+  if (!token) {
+    return {
+      success: false,
+      error: "กรุณาเข้าสู่ระบบก่อนลงทะเบียน",
+    };
+  }
+
+  const response = await api.get<{ data: HouseResponse[] }>("/houses", {
+    headers: getAuthHeaders(token),
+  });
+
+  if (!response.success && !response.data) {
+    console.error("Failed to fetch house data:", response.error);
+  }
+  return response;
+}

src/pages/fest/quest-3-1.astro

@@ -18,7 +18,7 @@ import Layout from "@/layouts/fest/FestWithNavbar.astro";
     </div>
     <div class="pt-4">
       <img
-        src="/public/images/fest/quest-3-1-banner.webp"
+        src="/images/fest/quest-3-1-banner.webp"
         alt="Quest 3-1 Banner"
         class="mb-4 h-auto w-full shadow-md"
       />

src/pages/fest/quest-3-2.astro

@@ -18,7 +18,7 @@ import Layout from "@/layouts/fest/FestWithNavbar.astro";
     </div>
     <div class="pt-4">
       <img
-        src="/public/images/fest/quest-3-2-banner.webp"
+        src="/images/fest/quest-3-2-banner.webp"
         alt="Quest 3-2 Banner"
         class="mb-4 h-auto w-full shadow-md"
       />

src/pages/fest/quest-3-3.astro

@@ -18,7 +18,7 @@ import Layout from "@/layouts/fest/FestWithNavbar.astro";
     </div>
     <div class="pt-4">
       <img
-        src="/public/images/fest/quest-3-3-banner.webp"
+        src="/images/fest/quest-3-3-banner.webp"
         alt="Quest 3-3 Banner"
         class="mb-4 h-auto w-full shadow-md"
       />

src/pages/fest/quest-3-4.astro

@@ -18,7 +18,7 @@ import Layout from "@/layouts/fest/FestWithNavbar.astro";
     </div>
     <div class="pt-4">
       <img
-        src="/public/images/fest/quest-3-4-banner.webp"
+        src="/images/fest/quest-3-4-banner.webp"
         alt="Quest 3-4 Banner"
         class="mb-4 h-auto w-full shadow-md"
       />

src/pages/fest/quest-3-5.astro

@@ -18,7 +18,7 @@ import Layout from "@/layouts/fest/FestWithNavbar.astro";
     </div>
     <div class="pt-4">
       <img
-        src="/public/images/fest/quest-3-5-banner.webp"
+        src="/images/fest/quest-3-5-banner.webp"
         alt="Quest 3-5 Banner"
         class="mb-4 h-auto w-full shadow-md"
       />

src/types/common.d.ts

@@ -50,7 +50,7 @@ export interface User {
 export interface Group {
   id: string;
   ownerId: string;
-  isconfirmed: boolean;
+  isConfirmed: boolean;
   inviteCode: string;
   memberCount: number;
   houseRank1: House | null;