🏗️ Refactored the card grid on dashboard

src/client/components/Dashboard/Dashboard.tsx

@@ -13,8 +13,34 @@ import {
 import { getLibraryStatistics } from "../../actions/comicinfo.actions";
 import { isEmpty, isNil } from "lodash";
 import Header from "../shared/Header";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import axios from "axios";
+import { Card } from "../shared/Carda";
+import {
+  LIBRARY_SERVICE_BASE_URI,
+  LIBRARY_SERVICE_HOST,
+} from "../../constants/endpoints";
 
 export const Dashboard = (): ReactElement => {
+  const { data: recentComics } = useQuery({
+    queryFn: async () =>
+      await axios({
+        url: `${LIBRARY_SERVICE_BASE_URI}/getComicBooks`,
+        method: "POST",
+        data: {
+          paginationOptions: {
+            page: 0,
+            limit: 5,
+            sort: { updatedAt: "-1" },
+          },
+          predicate: { "acquisition.source.wanted": false },
+          comicStatus: "recent",
+        },
+      }),
+    queryKey: ["recentComics"],
+  });
+
+  console.log("hari om", recentComics);
   //   useEffect(() => {
   //     dispatch(fetchVolumeGroups());
   //     dispatch(
@@ -56,9 +82,19 @@ export const Dashboard = (): ReactElement => {
   //     (state: RootState) => state.comicInfo.libraryStatistics,
   //   );
   return (
-    <div className="container mx-auto">
-      <section className="section">
-        <h1 className="title">Dashboard</h1>
+    <div className="container mx-auto max-w-full">
+      <section>
+        <h1>Dashboard</h1>
+        <div className="grid grid-cols-5 gap-6">
+          {recentComics?.data.docs.map((recentComic, idx) => (
+            <Card
+              orientation="vertical-2"
+              key={idx}
+              imageUrl={`${LIBRARY_SERVICE_HOST}/${recentComic.rawFileDetails.cover.filePath}`}
+              title={recentComic.inferredMetadata.issue.name}
+            />
+          ))}
+        </div>
       </section>
     </div>
   );

src/client/components/shared/Carda.tsx

@@ -4,8 +4,8 @@ import { isEmpty, isNil } from "lodash";
 
 interface ICardProps {
   orientation: string;
-  imageUrl: string;
-  hasDetails: boolean;
+  imageUrl?: string;
+  hasDetails?: boolean;
   title?: PropTypes.ReactElementLike | null;
   children?: PropTypes.ReactNodeLike;
   borderColorClass?: string;
@@ -80,6 +80,71 @@ const renderCard = (props: ICardProps): ReactElement => {
           </div>
         </div>
       );
+
+    case "vertical-2":
+      return (
+        <div className="block rounded-md w-fit h-fit shadow-md shadow-white-800 bg-gray-200 dark:bg-slate-500">
+          <img
+            alt="Home"
+            src={props.imageUrl}
+            className="rounded-t-md object-cover"
+          />
+
+          <div className="mt-2 px-2">
+            <dl>
+              <div>
+                <dd className="text-md text-slate-500 dark:text-black">
+                  {props.title}
+                </dd>
+              </div>
+
+              <div>
+                <dt className="sr-only">Address</dt>
+                <dd className="text-sm">
+                  <span className="whitespace-nowrap rounded-md bg-purple-100 px-2.5 py-0.5 text-sm text-purple-700">
+                    Live
+                  </span>
+                </dd>
+              </div>
+            </dl>
+
+            <div className="flex flex-row items-center gap-4 my-2">
+              <div className="sm:inline-flex sm:shrink-0 sm:items-center sm:gap-2">
+                <i className="h-7 w-7 icon-[solar--code-file-bold-duotone] text-orange-500 dark:text-orange"></i>
+
+                {/* <div className="">
+                  <p className="text-gray-500">Parking</p>
+                  <p className="font-medium">2 spaces</p>
+                </div> */}
+              </div>
+
+              <div className="sm:inline-flex sm:shrink-0 sm:items-center sm:gap-2">
+                <svg
+                  className="h-4 w-4 text-indigo-700"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"
+                  />
+                </svg>
+
+                {/* <div className="mt-1.5 sm:mt-0">
+                  <p className="text-slate-500">Bathroom</p>
+                  <p className="font-medium">2 rooms</p>
+                </div> */}
+              </div>
+
+              <div className="sm:inline-flex sm:shrink-0 sm:items-center sm:gap-2"></div>
+            </div>
+          </div>
+        </div>
+      );
     default:
       return <></>;
   }