[Adjustment][Antonio] Moved ParkingLogs to /parking-history page

app/(routes)/dashboard/page.tsx

@@ -8,7 +8,6 @@ import { useState, useEffect } from "react";
 import { Spinner } from "@/components/spinner";
 import useAuthState from "@/hooks/useAuthState";
 import useParkingSlotCount from "@/hooks/useParkingSlotCount";
-import DashboardLayout from "./components/dashboard-layout";
 
 const DashboardPage = () => {
   const { userId, userFirstname, userLastname, loading } = useAuthState();
@@ -128,9 +127,7 @@ const DashboardPage = () => {
                 options={chartOptions}
                 plugins={[ChartDataLabels]}
               />
-              <DashboardLayout/> 
             </div>
-
           </main>
         </div>
       )}

app/(routes)/parking-history/_components/dashboard-announcement.tsx

@@ -0,0 +1,41 @@
+import Link from "next/link";
+
+const Announcement: React.FC = () => {
+  return (
+    <div className="flex flex-col items-stretch bg-primary-foreground text-black rounded-lg p-4  ">
+      <div className="mb-4 px-10 p-4 bg-primary text-center rounded">
+        <Link href="" className="text-black hover:underline ">
+          ANNOUNCEMENT!
+        </Link>
+      </div>
+      <div className="px-10 p-4 bg-primary text-center rounded ">
+        STATUS
+        <div className="mt-4">
+          <div className="relative w-[100px] h-[100px] mx-auto">
+            <svg className="absolute inset-0 w-[100px] h-[100px]">
+              <circle
+                cx="50%"
+                cy="50%"
+                r="45%"
+                stroke="black"
+                strokeWidth="10"
+                fill="none"
+              />
+              <circle
+                cx="50%"
+                cy="50%"
+                r="45%"
+                stroke="orange"
+                strokeWidth="10"
+                strokeDasharray="calc(282.6 * 0.25) 282.6"
+                fill="none"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Announcement;

app/(routes)/dashboard/components/dashboard-data-list-logs.tsx → app/(routes)/parking-history/_components/dashboard-data-list-logs.tsx

@@ -1,6 +1,8 @@
-import { useEffect, useState, useCallback } from 'react';
-import { collection, getDocs, Timestamp } from 'firebase/firestore';
+import { useEffect, useState, useCallback } from "react";
+import { collection, getDocs, Timestamp } from "firebase/firestore";
+
 import { firestore } from "@/firebase/config";
+import { Spinner } from "@/components/spinner";
 
 type User = {
   id: string;
@@ -16,15 +18,15 @@ const DataList: React.FC<{ tab: string }> = ({ tab }) => {
 
   const fetchUsers = useCallback(async () => {
     setLoading(true);
-    const querySnapshot = await getDocs(collection(firestore, 'users'));
-    const usersData: User[] = querySnapshot.docs.map(doc => {
+    const querySnapshot = await getDocs(collection(firestore, "users"));
+    const usersData: User[] = querySnapshot.docs.map((doc) => {
       const data = doc.data();
       return {
         id: doc.id,
         firstName: data.firstName,
         email: data.email,
         vehicle: data.vehicle,
-        timeIn: data.timeIn instanceof Timestamp ? data.timeIn : null
+        timeIn: data.timeIn instanceof Timestamp ? data.timeIn : null,
       } as User;
     });
     setUsers(usersData);
@@ -36,15 +38,25 @@ const DataList: React.FC<{ tab: string }> = ({ tab }) => {
   }, [fetchUsers, tab]);
 
   if (loading) {
-    return <div>Loading...</div>;
+    return (
+      <div className="flex items-center justify-center relative inset-y-0 h-full w-full z-50">
+        <Spinner size="lg" text="background" />
+      </div>
+    );
   }
 
   return (
     <div className="flex flex-col space-y-4">
-      {users.map(user => (
+      {users.map((user) => (
         <div key={user.id} className="p-4 bg-primary rounded-lg shadow">
-          {tab === 'logs' && <p>{user.timeIn ? user.timeIn.toDate().toLocaleString() : 'No time available'}</p>}
-          {tab === 'vehicles' && <p>{user.vehicle}</p>}
+          {tab === "logs" && (
+            <p>
+              {user.timeIn
+                ? user.timeIn.toDate().toLocaleString()
+                : "No time available"}
+            </p>
+          )}
+          {tab === "vehicles" && <p>{user.vehicle}</p>}
         </div>
       ))}
     </div>

app/(routes)/parking-history/_components/dashboard-layout.tsx

@@ -0,0 +1,69 @@
+import { useState } from "react";
+
+import DataList from "./dashboard-data-list-logs";
+import Announcement from "./dashboard-announcement";
+
+type Tab = "logs" | "vehicles" | "delete" | "configure";
+
+const ParkingLogs: React.FC = () => {
+  const [selectedTab, setSelectedTab] = useState<Tab>("logs");
+
+  const renderContent = () => {
+    return <DataList tab={selectedTab} />;
+  };
+
+  return (
+    <div className="flex flex-col justify-center items-stretch h-full p-2">
+      <div className="flex flex-col bg-primary-foreground text-white rounded-lg mb-4 p-4">
+        <div className="flex justify-between mb-5 space-x-1">
+          <button
+            className={`flex-1 p-2 rounded text-xs md:text-base ${
+              selectedTab === "logs"
+                ? "bg-black text-white"
+                : "bg-primary text-black"
+            }`}
+            onClick={() => setSelectedTab("logs")}
+          >
+            Logs
+          </button>
+          <button
+            className={`flex-1 p-2 rounded text-xs md:text-base ${
+              selectedTab === "vehicles"
+                ? "bg-black text-white"
+                : "bg-primary text-black"
+            }`}
+            onClick={() => setSelectedTab("vehicles")}
+          >
+            Vehicles
+          </button>
+          {/* <button
+            className={`flex-1 p-2 rounded text-xs md:text-base ${
+              selectedTab === "delete"
+                ? "bg-black text-white"
+                : "bg-primary text-black"
+            }`}
+            onClick={() => setSelectedTab("delete")}
+          >
+            Delete
+          </button> */}
+          <button
+            className={`flex-1 p-2 rounded text-xs md:text-base ${
+              selectedTab === "configure"
+                ? "bg-black text-white"
+                : "bg-primary text-black"
+            }`}
+            onClick={() => setSelectedTab("configure")}
+          >
+            Configure
+          </button>
+        </div>
+        <div className="flex flex-col space-y-4 bg-main  rounded">
+          {renderContent()}
+        </div>
+      </div>
+      <Announcement />
+    </div>
+  );
+};
+
+export default ParkingLogs;

app/(routes)/parking-history/page.tsx

@@ -5,6 +5,7 @@ import { FileClock } from "lucide-react";
 import { Spinner } from "@/components/spinner";
 import { Heading } from "@/app/(routes)/_components/heading";
 import useAuthState from "@/hooks/useAuthState";
+import ParkingLogs from "./_components/dashboard-layout";
 
 const ParkingHistoryPage = () => {
   const { userId, loading } = useAuthState();
@@ -30,7 +31,9 @@ const ParkingHistoryPage = () => {
               />
             </div>
           </div>
-          <div className="px-4 lg:px-8 space-y-4 pt-4"></div>
+          <div className="px-4 lg:px-8 space-y-4 pt-4">
+            <ParkingLogs />
+          </div>
         </div>
       )}
     </>

components/spinner.tsx

@@ -2,8 +2,12 @@ import { Loader } from "lucide-react";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
-const spinnerVariants = cva("text-primary animate-spin", {
+const spinnerVariants = cva("animate-spin", {
   variants: {
+    text: {
+      default: "text-primary",
+      background: "text-background",
+    },
     size: {
       default: "h-4 w-4",
       sm: "h-2 w-2",
@@ -12,12 +16,13 @@ const spinnerVariants = cva("text-primary animate-spin", {
     },
   },
   defaultVariants: {
+    text: "default",
     size: "default",
   },
 });
 
 interface SpinnerProps extends VariantProps<typeof spinnerVariants> {}
 
-export const Spinner = ({ size }: SpinnerProps) => {
-  return <Loader className={cn(spinnerVariants({ size }))} />;
+export const Spinner = ({ text, size }: SpinnerProps) => {
+  return <Loader className={cn(spinnerVariants({ text, size }))} />;
 };