fix: dashboard and components setup

client/src/App.tsx

@@ -1,31 +1,9 @@
-import { Outlet, useNavigate, useLocation } from "react-router-dom";
+import { Outlet, useNavigate } from "react-router-dom";
 import { Routes } from "./components/utilities/Routes";
-
-const SidebarItem = ({ text, to }: { text: string; to: string }) => {
-  const navigate = useNavigate();
-  const current = useLocation();
-  const cur: boolean = current.pathname
-    .toLowerCase()
-    .includes(text.toLowerCase());
-
-  return (
-    <div
-      className={
-        cur
-          ? "px-4 border-[1px] border-[#3D3939] rounded-[5px] bg-[#3D3939]"
-          : "transition-all px-4 ease-in-out delay-20 hover:border-[1px] border-[#3D3939] hover:px-4 duration-300 rounded-[5px] hover:bg-[#3D3939]"
-      }
-      style={{ cursor: "pointer" }}
-      onClick={() => navigate(to)}
-    >
-      {text}
-    </div>
-  );
-};
+import { SidebarItem } from "./components/utilities/Sidebar";
 
 export default function App() {
   const navigate = useNavigate();
-  // const [current, setCurrent] = useState<string>("Dashboard");
   return (
     <div className="w-full h-[100vh] z-0 flex">
       <div className="flex-[20%] m-2 p-[10px] flex flex-col gap-[50px] ">

client/src/components/pages/components.tsx

@@ -27,18 +27,20 @@ export function UserCard() {
 export function MetricCard({
   title,
   count,
+  className,
 }: {
   title: string;
   count: number | null;
+  className?: string;
 }) {
   return (
-    <Card className="w-[200px]">
+    <Card className={className}>
       <CardHeader className="pb-0 pt-2 px-4 flex-col items-start">
         <p className="text-tiny uppercase font-bold">{title}</p>
         {count ? (
-          <h4 className="font-bold text-large">{count}</h4>
+          <h4 className="font-bold text-4xl">{count}</h4>
         ) : (
-          <h4 className="font-bold text-large">No Data</h4>
+          <h4 className="font-bold text-4xl">No Data</h4>
         )}
       </CardHeader>
       <CardBody className="overflow-visible py-2">

client/src/components/utilities/Sidebar.tsx

@@ -0,0 +1,23 @@
+import { useLocation, useNavigate } from "react-router-dom";
+
+export const SidebarItem = ({ text, to }: { text: string; to: string }) => {
+  const navigate = useNavigate();
+  const current = useLocation();
+  const cur: boolean = current.pathname
+    .toLowerCase()
+    .includes(text.toLowerCase());
+
+  return (
+    <div
+      className={
+        cur
+          ? "px-4 py-2 border-[1px] border-[#3D3939] rounded-[5px] bg-[#3D3939]"
+          : "transition-all px-4 py-2 ease-in-out delay-20 hover:border-[1px] border-[#3D3939] hover:px-4 duration-300 rounded-[5px] hover:bg-[#3D3939]"
+      }
+      style={{ cursor: "pointer" }}
+      onClick={() => navigate(to)}
+    >
+      {text}
+    </div>
+  );
+};