codersforcauses · loklokyx · Dec 2, 2025 · Dec 2, 2025 · Dec 3, 2025 · Dec 8, 2025
diff --git a/client/src/app/layout.tsx b/client/src/app/layout.tsx
@@ -13,7 +13,14 @@ const montserrat = Montserrat({
 export default function RootLayout({ children }: { children: ReactNode }) {
   return (
     <html lang="en">
-      <body className={montserrat.variable}>
+      <body
+        className={montserrat.variable}
+        // The following attributes are injected by browser extensions.
+        // This can cause React hydration warnings. They are safe to ignore or remove.
+        data-new-gr-c-s-check-loaded="14.1265.0"
+        data-gr-ext-installed=""
+        data-gr-ext-disabled="forever"
+      >
         <Providers>{children}</Providers>
       </body>
     </html>

diff --git a/client/src/app/test/card/page.tsx b/client/src/app/test/card/page.tsx
@@ -0,0 +1,53 @@
+"use client";
+
+import {
+  AdminRoomCard,
+  BookingRoomCard,
+  RoomCard,
+} from "@/components/ui/room-card";
+import { roomsMock } from "@/types/card";
+
+export default function RoomsList() {
+  return (
+    <div className="w-full rounded-xl bg-gray-100 p-6">
+      <h2 className="mb-4 text-xl font-semibold">Booking Rooms Display</h2>
+
+      <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4">
+        {roomsMock.map((room) => (
+          <BookingRoomCard
+            key={room.id}
+            room={room}
+            onBook={() => alert("Book")}
+          />
+        ))}
+      </div>
+
+      <div className="my-10 border-t border-gray-300"></div>
+
+      <h2 className="mb-4 text-xl font-semibold">
+        Admin Meeting Rooms Display
+      </h2>
+
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+        {roomsMock.map((room) => (
+          <AdminRoomCard
+            key={room.id}
+            room={room}
+            onView={() => alert("View")}
+            onEdit={() => alert("Edit")}
+            onRemove={() => alert("Remove")}
+          />
+        ))}
+      </div>
+      <div className="my-10 border-t border-gray-300"></div>
+
+      <h2 className="mb-4 text-xl font-semibold">General Rooms Display</h2>
+
+      <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3">
+        {roomsMock.map((room) => (
+          <RoomCard key={room.id} room={room} />
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/components/ui/alert.tsx b/client/src/components/ui/alert.tsx
@@ -26,15 +26,15 @@ import { Button } from "./button";
  *
  * @param title Optional title displayed at the top of the dialog
  * @param successText Text displayed when the operation is complete
- * @param color Optional color for the success icon and button (default: `#006DD5`)
+ * @param color Optional color for the success icon and button (default: `var(--bloom-blue)`)
  * @param showIcon Whether to show the icon above the content (default: `true`)
  * @param children React node used as the DialogTrigger
  *
  * @example
  * <AlertDialog
  *   title="Excel sheet download"
  *   successText="Your request for excel sheet download successfully"
- *   color="#67D4EC"
+ *   color="var(--bloom-blue)"
  * >
  *   <Button>Open Dialog</Button>
  * </AlertDialog>
@@ -43,7 +43,7 @@ function AlertDialog({
   title,
   successText,
   children,
-  color = "#006DD5",
+  color = "var(--bloom-blue)",
   showIcon = true,
 }: {
   title?: string;
@@ -81,7 +81,7 @@ function AlertDialog({
           <DialogClose asChild>
             <Button
               className={cn(
-                "mt-4 h-[41px] w-[72px] text-[14px] text-white focus:ring-2",
+                "mt-4 h-[41px] w-[72px] border-b-4 text-[14px] text-white",
                 isPending && "bg-gray-300 text-black",
               )}
               disabled={isPending}

diff --git a/client/src/components/ui/card.tsx b/client/src/components/ui/card.tsx
@@ -0,0 +1,108 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+/**
+ * Card component from shadcn/ui.
+ *
+ * Provides a styled container with optional header, title, description,
+ * content, and footer sections.
+ *
+ * @see {@link https://ui.shadcn.com/docs/components/card} for more details.
+ *
+ * @example
+ * <Card className="w-[350px]">
+ *   <CardHeader>
+ *     <CardTitle>Dashboard</CardTitle>
+ *     <CardDescription>Summary of recent activity</CardDescription>
+ *   </CardHeader>
+ *   <CardContent>
+ *     <p>Your content goes here.</p>
+ *   </CardContent>
+ *   <CardFooter>
+ *     <button>Action</button>
+ *   </CardFooter>
+ * </Card>
+ */
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className,
+    )}
+    {...props}
+  />
+));
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+));
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className,
+    )}
+    {...props}
+  />
+));
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+));
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+));
+CardFooter.displayName = "CardFooter";
+
+export {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+};