basic conv display + fetch messages fnc

src/components/HotelContext.jsx

@@ -38,6 +38,17 @@ async function updateRoomStatus(roomId, status) {
     setRooms(updated);
   }
 
+  async function fetchHotelUsers() {
+    const res = await fetch(`${API_BASE}/chat/hotel_users`, {
+      method: "POST",
+      headers: { 
+        Authorization: `Bearer ${accessTokenSingle}`,
+        "Content-Type": "application/json", 
+      },
+    });
+    return res.json();
+  }
+
   async function fetchConversations() {
     const res = await fetch(`${API_BASE}/chat/get_conv`, {
       method: "POST",
@@ -53,13 +64,30 @@ async function updateRoomStatus(roomId, status) {
     return res.json();
   }
 
-  async function fetchHotelUsers() {
+  async function fetchMessages({ conv_id }) {
-    const res = await fetch(`${API_BASE}/chat/hotel_users`, {
+
-      headers: { Authorization: `Bearer ${accessTokenSingle}` },
+    const payload = {
+    conv_id,
+    timestamp: "2025-09-25 11:05:33",
+    };
+
+    console.log(JSON.stringify(payload));
+
+    const res = await fetch(`${API_BASE}/chat/get_message`, {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${accessTokenSingle}`,
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(payload),
     });
-    return res.json();
+
+    return res;
+    
+    //return res.json
   }
 
+
   // --- INITIAL DATA LOADING ---
   useEffect(() => {
     if (!accessToken) return;
@@ -68,12 +96,12 @@ async function updateRoomStatus(roomId, status) {
       const [roomsData, convData, usersData] = await Promise.all([
         fetchRooms(),
         fetchConversations(),
-        //fetchHotelUsers(),
+        fetchHotelUsers(),
       ]);
 
       setRooms(roomsData);
       setConversations(convData);
-      //setUsers(usersData);
+      setUsers(usersData);
     }
 
     load();
@@ -86,6 +114,7 @@ async function updateRoomStatus(roomId, status) {
         conversations,
         users,
         updateRoomStatus,
+        fetchMessages,
       }}
     >
       {children}

src/components/MainApp.jsx

@@ -1,6 +1,8 @@
 import { HotelProvider, useHotel } from "./HotelContext";
 import RoomWidget from "./widget/roomWidget"
+import ChatWidget from "./widget/chatWidget"
 
+import "./MainApp.css"
 
 export default function MainAppWrapper() {
   const accessToken = localStorage.getItem("access_tokens");
@@ -22,15 +24,15 @@ function MainApp() {
 
       <h2>Access token</h2>
       <pre>{accessToken}</pre>
-
+      <h3>Rooms: {rooms.length}</h3>
-      <section>
+      <h3>Conversations: {conversations.length}</h3>
+      <h3>Users: {users.length}</h3>
       <h2>Dashboard</h2>
-        <ul>
+      <section className="main">
-          <li>Rooms: {rooms.length}</li>
+
         <RoomWidget roomlist={rooms}/> 
-          <li>Conversations: {conversations.length}</li>
+        <ChatWidget convlist={conversations}/> 
-          <li>Users: {users.length}</li>
+          
-        </ul>
       </section>
     </div>
   );

src/components/Mainapp.css

@@ -0,0 +1,6 @@
+.main {
+
+    display: flex;
+    justify-content: space-around;
+    background-color: rgb(160, 149, 199);
+}

src/components/widget/RoomWidget.css

@@ -1,11 +1,14 @@
 .grid {
-  display: grid;
+  display: flex;
-  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  justify-items: space-around;
   gap: 1px;
     background-color: #777777;
 }
 
 .card {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
   gap: 1px;
     background-color: #a3a3a3;
     padding: 5px;

src/components/widget/chatWidget.css

@@ -0,0 +1,11 @@
+.convcard {
+    background-color: brown;
+}
+
+.convlist {
+    
+    display: flex;
+    flex-direction: column;
+    align-items: right;
+    background-color: darkcyan;
+}

src/components/widget/chatWidget.jsx

@@ -0,0 +1,40 @@
+import { useHotel } from "../HotelContext";
+import { useState } from "react";
+
+//import {fetchMessage} from .
+
+import "./chatWidget.css"
+
+export default function ChatWidget({convlist}) {
+
+
+
+    return (
+        <div className="convlist">
+            {convlist.map(conv => (
+                <ConvCard
+                key={conv.id}
+                id={conv.id}
+                title={conv.title}
+                />
+            ))}
+        </div>
+    );
+}
+
+function ConvCard({id, title}) {
+
+    const {fetchMessages} = useHotel();
+
+    return(
+    <div className="convcard">
+    <h3>ConvId : {id} </h3>
+    <h3>Name : {title}</h3>
+    <p onClick={() => fetchMessages({conv_id: 4})}> GET MESSAAGE</p>
+    </div>
+    )
+}
+
+function MessagesBox({id}) {
+
+}

src/components/widget/roomWidget.jsx

@@ -19,11 +19,11 @@ export default function RoomWidget({ roomlist }) {
 }
 
 function RoomCard({ number, status ,id}) {
+  
   const { updateRoomStatus } = useHotel();
   const [editing, setEditing] = useState(false);
   const [value, SetValue] = useState(status);
 
-
   function submit() {
     updateRoomStatus(id,value);
     setEditing(false);