Feat/hng 20 admin charts component

src/app/dashboard/(admin)/_components/layout/Sidebar/index.tsx

@@ -1,6 +1,14 @@
 "use client";
 
-import { Box, House, LucideProps, Mail, Settings, Users } from "lucide-react";
+import {
+  Box,
+  House,
+  List,
+  LucideProps,
+  Mail,
+  Settings,
+  Users,
+} from "lucide-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { FC, ForwardRefExoticComponent, RefAttributes } from "react";
@@ -10,43 +18,43 @@ import DashboardLogo from "../logo";
 const sideItems = [
   {
     route: "Dashboard",
-    link: "/admin/dashboard",
+    link: "/dashboard/admin/dashboard",
     icon: House,
     id: "dashboard",
   },
   {
     route: "Products",
-    link: "/admin/products",
+    link: "/dashboard/admin/products",
     icon: Box,
     id: "products",
   },
   {
     route: "Users",
-    link: "/admin/users",
+    link: "/dashboard/admin/users",
     icon: Users,
     id: "users",
   },
   {
     route: "Email Templates",
-    link: "/admin/email",
+    link: "/dashboard/admin/email",
     icon: Mail,
     id: "email",
   },
   {
     route: "Squeeze Pages",
-    link: "/admin/squeeze-pages",
+    link: "/dashboard/admin/squeeze-pages",
     icon: Users,
     id: "squeeze",
   },
   {
     route: "Waitlist Page",
-    link: "/admin/waitlist-page",
-    icon: Mail,
+    link: "/dashboard/admin/waitlist-page",
+    icon: List,
     id: "waitlist",
   },
   {
     route: "Settings",
-    link: "/admin/settings",
+    link: "/dashboard/admin/settings",
     icon: Settings,
     id: "settings",
   },
@@ -67,18 +75,19 @@ const Sidebar: FC<Iproperties> = ({
   currenPathName,
 }) => {
   const pathname = usePathname();
-  const currentPath = pathname?.split("/")[2];
+  const currentPath = pathname?.split("/")[3];
+
   return (
-    <div className="flex flex-col items-center justify-start border-r bg-muted/40 md:block md:px-4">
+    <div className="fixed bottom-0 left-0 top-0 z-50 flex h-screen w-[50px] flex-col items-center justify-start border-r bg-[#FDFDFD] md:block md:w-[220px] md:px-4 lg:w-[252px]">
       <DashboardLogo />
-      <section className="flex flex-col items-center gap-5 pt-6 md:items-stretch">
+      <section className="flex flex-col items-center gap-y-3 pt-6 md:items-stretch">
         {sideNavitems.map((item, index) => (
           <Link
             key={index}
             href={item.link}
             data-testid={item.id}
             role="sidebar-link"
-            className={`${currenPathName || currentPath === item.id ? "bg-primary text-white" : "bg-transparent text-neutral-dark-2"} flex h-10 w-10 items-center justify-center gap-3 rounded-full px-2.5 py-4 transition-all duration-300 hover:bg-primary hover:text-white md:h-auto md:w-auto md:justify-start md:rounded-[8px]`}
+            className={`${currenPathName || currentPath === item.id ? "bg-primary text-white" : "bg-transparent text-neutral-dark-2 hover:bg-gray-200"} flex items-center justify-center gap-2.5 rounded-full px-2.5 py-3 text-sm transition-all duration-300 ease-in md:h-auto md:w-auto md:justify-start md:rounded-sm`}
           >
             <item.icon className="h-5 w-5" role="sidebar-icon" />
             <span className="hidden md:block">{item.route}</span>

src/app/dashboard/(admin)/_components/layout/Sidebar/sidebar.test.tsx

@@ -1,48 +1,48 @@
-import Sidebar from ".";
-import { Box, House, Mail, Settings, Users } from "lucide-react";
+import { Box, House, List, Mail, Settings, Users } from "lucide-react";
 
 import { render, screen } from "~/test/utils";
+import Sidebar from "./index";
 
 const sideItems = [
   {
     route: "Dashboard",
-    link: "/admin/dashboard",
+    link: "/dashboard/admin/dashboard",
     icon: House,
     id: "dashboard",
   },
   {
     route: "Products",
-    link: "/admin/products",
+    link: "/dashboard/admin/products",
     icon: Box,
     id: "products",
   },
   {
     route: "Users",
-    link: "/admin/users",
+    link: "/dashboard/admin/users",
     icon: Users,
     id: "users",
   },
   {
     route: "Email Templates",
-    link: "/admin/email",
+    link: "/dashboard/admin/email",
     icon: Mail,
     id: "email",
   },
   {
     route: "Squeeze Pages",
-    link: "/admin/squeeze-pages",
+    link: "/dashboard/admin/squeeze-pages",
     icon: Users,
     id: "squeeze",
   },
   {
     route: "Waitlist Page",
-    link: "/admin/waitlist-page",
-    icon: Mail,
+    link: "/dashboard/admin/waitlist-page",
+    icon: List,
     id: "waitlist",
   },
   {
     route: "Settings",
-    link: "/admin/settings",
+    link: "/dashboard/admin/settings",
     icon: Settings,
     id: "settings",
   },

src/app/dashboard/(admin)/_components/layout/navbar/index.tsx

@@ -10,8 +10,11 @@ import UnreadNotificationCard from "../../unread-notification-card/UnreadNotific
 
 const DashboardNavbar = () => {
   return (
-    <nav className="border-b-[0.5px] border-border" role="navbar">
-      <div className="flex items-center justify-between gap-2 bg-background px-[10px] py-[14px]">
+    <nav
+      className="fixed left-[50px] right-0 top-0 z-50 border-b-[0.5px] border-border md:left-[220px] lg:left-[252px]"
+      role="navbar"
+    >
+      <div className="flex items-center justify-between gap-2 bg-[#FDFDFD] px-[10px] py-[14px]">
         <div className="flex h-10 items-center justify-between gap-2 rounded-[6px] border border-border bg-white px-3 text-sm font-normal placeholder:text-sm">
           <SearchIcon
             data-testid="search"
@@ -23,7 +26,7 @@ const DashboardNavbar = () => {
             data-testid="input"
           />
         </div>
-        <div className="flex w-full max-w-[152px] items-center justify-between gap-1">
+        <div className="flex items-center justify-between gap-1 md:gap-2 lg:gap-4">
           <div className="relative flex items-center justify-center">
             <Popover>
               <PopoverTrigger>

src/app/dashboard/(admin)/admin/dashboard/client.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import CardComponent from "~/components/adminDashboard/CardComponent";
+import { cardData } from "~/components/adminDashboard/cardData";
+import { Chart } from "~/components/adminDashboard/Chart";
+import { chartConfig, chartData } from "~/components/adminDashboard/chartData";
+import { data, gradients } from "~/components/adminDashboard/productData";
+import TopProductsComponent from "~/components/adminDashboard/TopProductsComponent";
+import { Card } from "~/components/ui/card";
+
+const Client = () => {
+  return (
+    <section>
+      <div className="mb-4 md:mb-0">
+        <div className="flex flex-col items-start justify-start">
+          <h1 className="text-2xl font-bold text-neutral-dark-1">Overview</h1>
+          <p className="text-base font-normal leading-[19.36px] text-neutral-dark-1">
+            Showing records from the last .....
+          </p>
+        </div>
+      </div>
+
+      <div className="mb-6 mt-4 grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
+        {cardData.map((card, index) => (
+          <CardComponent
+            key={index}
+            title={card.title}
+            value={card.value}
+            description={card.description}
+            icon={card.icon}
+          />
+        ))}
+      </div>
+
+      <div className="mt-8 flex w-full flex-col gap-4 xl:flex-row">
+        <Card className="basis-2/3 rounded-xl border border-border bg-white px-[24px] pb-[28px] pt-[23px] shadow-spread">
+          <h2 className="mb-2 ml-3 text-base font-semibold leading-[19.36px] text-zinc-950">
+            Overview
+          </h2>
+          <Chart chartData={chartData} chartConfig={chartConfig} />
+        </Card>
+        <TopProductsComponent data={data} gradients={gradients} />
+      </div>
+    </section>
+  );
+};
+
+export default Client;

src/app/dashboard/(admin)/admin/dashboard/page.tsx

@@ -1,5 +1,13 @@
-const page = () => {
-  return <div>Admin dashboard</div>;
+import Client from "./client";
+
+export const metadata = {
+  title: "Dashboard",
+  description:
+    "Super Admin Dashboard using ShadCN UI components, adhering to design specifications and best practices for accessibility.",
+};
+
+const AdminDashboardPage = () => {
+  return <Client />;
 };
 
-export default page;
+export default AdminDashboardPage;

src/app/dashboard/(admin)/layout.tsx

@@ -9,11 +9,11 @@ export default function AdminLayout({
   children: React.ReactNode;
 }) {
   return (
-    <div className="grid min-h-screen grid-cols-[60px_1fr] md:grid-cols-[252px_1fr]">
+    <div className="min-h-screen w-full pl-[50px] md:pl-[220px] lg:pl-[252px]">
       <Sidebar />
-      <div className="grid grid-rows-[auto_1fr]">
-        <DashboardNavbar />
-        <main className="p-8">
+      <DashboardNavbar />
+      <div className="">
+        <main className="mt-12 p-3 pt-6 md:p-5 md:pt-8">
           <Suspense>{children}</Suspense>
         </main>
       </div>

src/components/adminDashboard/CardComponent.tsx

@@ -0,0 +1,47 @@
+import Image from "next/image";
+import { FC } from "react";
+
+interface CardProperties {
+  title: string;
+  value: string;
+  description: string;
+  icon: string;
+}
+
+const CardComponent: FC<CardProperties> = ({
+  title,
+  value,
+  description,
+  icon,
+}) => {
+  return (
+    <>
+      <div className="rounded-xl bg-white px-[24px] pb-[28px] pt-[23px] shadow-spread ring-1 ring-border">
+        <div className="flex flex-row items-center justify-between">
+          <h4 className="text-sm font-[500] leading-[16.94px] text-neutral-dark-2">
+            {title}
+          </h4>
+
+          <Image
+            src={icon}
+            alt={title}
+            width={24}
+            height={24}
+            className="mr-2"
+          />
+        </div>
+
+        <div className="mt-1">
+          <h2 className="text-2xl font-semibold leading-[29.05px] text-neutral-dark-2">
+            {value}
+          </h2>
+          <small className="mt-0 text-xs leading-[14.52px] text-neutral-dark-1">
+            {description}
+          </small>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default CardComponent;

src/components/adminDashboard/Chart.tsx

@@ -0,0 +1,58 @@
+import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts";
+
+import { CardContent } from "~/components/ui/card";
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "~/components/ui/chart";
+
+type ChartProperties = {
+  chartData: { month: string; revenue: number }[];
+  chartConfig: ChartConfig;
+};
+
+export function Chart({ chartData = [], chartConfig }: ChartProperties) {
+  return (
+    <>
+      <div className="h-full w-full">
+        <CardContent className="h-full w-full pl-0">
+          <ChartContainer className="h-full w-full p-0" config={chartConfig}>
+            <BarChart
+              className="w-full"
+              accessibilityLayer
+              data={chartData}
+              margin={{ top: 20, bottom: 2 }}
+            >
+              <CartesianGrid vertical={false} />
+              <XAxis
+                dataKey="month"
+                tickLine={false}
+                tickMargin={10}
+                axisLine={false}
+                tickFormatter={(value) => value.slice(0, 3)}
+              />
+              <YAxis
+                ticks={[0, 1500, 3000, 4500, 6000]}
+                axisLine={false}
+                tickLine={false}
+                tickFormatter={(value) => `$${value}`}
+              />
+              <ChartTooltip
+                cursor={false}
+                content={<ChartTooltipContent hideLabel />}
+              />
+              <Bar
+                dataKey="revenue"
+                fill="var(--color-desktop)"
+                radius={8}
+                data-testid="bar"
+              />
+            </BarChart>
+          </ChartContainer>
+        </CardContent>
+      </div>
+    </>
+  );
+}