basic room display grid + buttons

src/components/MainApp.jsx

@@ -1,24 +1,41 @@
+import { HotelProvider, useHotel } from "./HotelContext";
+import RoomWidget from "./widget/roomWidget"
 
 
-export default function MainApp() {
-  // You could fetch your short-lived access token from localStorage
+export default function MainAppWrapper() {
   const accessToken = localStorage.getItem("access_tokens");
-  console.log("the accesToken in Mainapp is :" + accessToken);
+
+  return (
+    <HotelProvider accessToken={accessToken}>
+      <MainApp />
+    </HotelProvider>
+  );
+}
+
+function MainApp() {
+  const accessToken = localStorage.getItem("access_tokens");
+  const { rooms, conversations, users } = useHotel();
+
   return (
     <div style={{ padding: "2rem" }}>
       <h1>Welcome to MyHotel!</h1>
-      <p>Your access token (short-lived) is:</p>
+
+      <h2>Access token</h2>
       <pre>{accessToken}</pre>
 
       <section>
         <h2>Dashboard</h2>
         <ul>
-          <li>Rooms</li>
-          <li>Bookings</li>
-          <li>Guests</li>
-          <li>Reports</li>
+          <li>Rooms: {rooms.length}</li>
+          <RoomWidget roomlist={rooms}/> 
+          <li>Conversations: {conversations.length}</li>
+          <li>Users: {users.length}</li>
         </ul>
       </section>
     </div>
   );
+
+  
+
+
 }