finished adding the card

src/app/(root)/(routes)/dashboard/page.tsx

@@ -1,9 +1,106 @@
 "use client";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 
-import React from "react";
+import { auth, useUser } from "@clerk/nextjs";
+import Link from "next/link";
+import axios from "axios";
+import { useState, useEffect } from "react";
+import { Search } from "@prisma/client";
+import { Button } from "@/components/ui/button";
 
 const dashboardPage = () => {
-  return <div>dashboardPage</div>;
+  const [searches, setSearches] = useState<null | Search[]>(null);
+  const { user } = useUser();
+  useEffect(() => {
+    const fetchSearches = async () => {
+      if (user) {
+        try {
+          const response = await axios.post(`/api/get-searches`, {
+            userId: user.id,
+          });
+          setSearches(response.data);
+        } catch (error) {
+          console.log("Error feteching searches: ", error);
+        }
+      }
+    };
+    fetchSearches();
+  }, [user]);
+
+  const formatDate = (dateString) => {
+    // Check if dateString is not provided or is empty
+    if (!dateString) {
+      return "N/A";
+    }
+
+    // Try to parse the dateString into a Date object
+    const date = new Date(dateString);
+
+    // Check if the date is valid
+    if (isNaN(date.getTime())) {
+      return "N/A";
+    }
+
+    // Format the date
+    return date.toLocaleDateString("en-US", {
+      day: "numeric",
+      month: "short",
+      year: "numeric",
+    });
+  };
+
+  if (searches == null) {
+    return <div>Loading searches...</div>;
+  }
+
+  if (searches.length == 0) {
+    return <div>No searches yet</div>;
+  }
+
+  return (
+    <div className="flex flex-row flex-wrap overflow-x-auto gap-4 p-5 justify-center">
+      {searches.map((search, index) => (
+        <div key={index}>
+          <Card key={index} className="w-96 h-96">
+            <CardHeader>
+              <CardTitle>{"Search " + (index + 1)}</CardTitle>
+              {/* <CardDescription>Card Description</CardDescription> */}
+            </CardHeader>
+            <CardContent className="break-words">
+              <ul className="px-3">
+                <li>
+                  <strong>Query:</strong> {search.query}
+                </li>
+                <li>
+                  <strong>Filters:</strong>{" "}
+                  {search.prefixFilters ? search.prefixFilters : "N/A"}
+                </li>
+                <li>
+                  <strong>Search Period:</strong> {formatDate(search.minDate)} -{" "}
+                  {formatDate(search.maxDate)}
+                </li>
+                <li>
+                  <strong>Search Date:</strong> {formatDate(search.createdAt)}
+                </li>
+              </ul>
+            </CardContent>
+            <CardFooter>
+              <Link href={`/results/${search.id}`}>
+                <Button className="w-full">Mark all as read</Button>
+              </Link>
+            </CardFooter>
+          </Card>
+        </div>
+      ))}
+    </div>
+  );
 };
 
 export default dashboardPage;

src/app/notused-dashboard/[searchId]/page.tsx → src/app/OLD_CODES/[searchId]/page.tsx

@@ -2,8 +2,8 @@
 
 import React, { useState } from "react";
 import Header from "@/components/Header";
-import Chat from "@/components/Chat";
-import Search from "@/components/Search";
+import Chat from "@/OLD_CODES/Chat";
+import Search from "@/OLD_CODES/Search";
 import dayjs from "dayjs";
 import { useRouter } from "next/router";
 

src/app/notused-dashboard/page.tsx → src/app/OLD_CODES/page.tsx

@@ -2,8 +2,8 @@
 
 import React, { useState } from "react";
 import Header from "@/components/Header";
-import Chat from "@/components/Chat";
-import Search from "@/components/Search";
+import Chat from "@/OLD_CODES/Chat";
+import Search from "@/OLD_CODES/Search";
 import dayjs from "dayjs";
 import { useRouter } from "next/router";
 

src/app/api/get-searches/route.ts

@@ -0,0 +1,16 @@
+import prismadb from "../../../lib/prismadb";
+import { NextResponse } from "next/server";
+
+export const POST = async (req: Request) => {
+    const { userId } = await req.json();
+    const _searches = await prismadb.search.findMany({
+        where: {
+          userId: userId,
+        },
+        orderBy: {
+            createdAt: 'desc'
+        }
+      });
+
+    return NextResponse.json(_searches);
+  };

src/app/components/ui/card.tsx

@@ -0,0 +1,79 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+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<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    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, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }