(feat-HNG-202): user dashboard overview page layout for Team-Starlight

next.config.mjs

@@ -11,6 +11,7 @@ const nextConfig = {
       },
     ],
   },
+  transpilePackages: ["lucide-react"],
 };
 
 export default nextConfig;

package.json

@@ -44,6 +44,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cookies-next": "^4.2.1",
+    "date-fns": "^3.6.0",
     "framer-motion": "^11.3.8",
     "input-otp": "^1.2.4",
     "jest-axe": "^9.0.0",

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

@@ -1,11 +1,11 @@
 "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 CardComponent from "~/components/common/DashboardCard/CardComponent";
 import { Card } from "~/components/ui/card";
 
 const Client = () => {

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

@@ -2,9 +2,9 @@
 
 import { CirclePlus, Filter } from "lucide-react";
 
-import CardComponent from "~/components/adminDashboard/CardComponent";
 import { cardData } from "~/components/adminDashboard/cardData";
 import { Button } from "~/components/common/common-button";
+import CardComponent from "~/components/common/DashboardCard/CardComponent";
 import {
   DropdownMenu,
   DropdownMenuContent,

src/app/dashboard/(admin)/admin/users/data/user-dummy-data.ts

@@ -1,8 +1,10 @@
+import type { LucideIconName } from "~/components/common/lucide-icon";
+
 interface UserCardData {
   title: string;
   value: number;
   description: string;
-  icon: string;
+  icon: LucideIconName;
 }
 
 interface UserStatusProperties {
@@ -23,19 +25,19 @@ export const userCardData: UserCardData[] = [
     title: "Total Users",
     value: 4000,
     description: "+10% from last month",
-    icon: `/admin-dashboard/icons/user.svg`,
+    icon: "user",
   },
   {
     title: "Active Users",
     value: 1500,
     description: "+20% from last month",
-    icon: `/admin-dashboard/icons/box.svg`,
+    icon: "box",
   },
   {
     title: "Deleted Users",
     value: 2500,
     description: "+150% from last month",
-    icon: `/admin-dashboard/icons/arrowUp.svg`,
+    icon: "arrow-up",
   },
 ];
 

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

@@ -9,8 +9,8 @@ import {
 } from "lucide-react";
 import { useState } from "react";
 
-import CardComponent from "~/components/adminDashboard/CardComponent";
 import CustomButton from "~/components/common/common-button/common-button";
+import CardComponent from "~/components/common/DashboardCard/CardComponent";
 import { Button } from "~/components/ui/button";
 import {
   DropdownMenu,

src/app/dashboard/(user-dashboard)/(user-metrics)/analytics/page.tsx

@@ -0,0 +1,3 @@
+export default function DashboardAnalytics() {
+  return <div>ANALYTICS</div>;
+}

src/app/dashboard/(user-dashboard)/(user-metrics)/layout.tsx

@@ -0,0 +1,40 @@
+import type { PropsWithChildren } from "react";
+
+import { DateSelector } from "~/app/dashboard/(user-dashboard)/_components/layout/dateselector";
+import { Tablinks } from "~/app/dashboard/(user-dashboard)/_components/layout/tablinks";
+import { Button } from "~/components/common/common-button";
+
+const links = [
+  {
+    title: "Overview",
+    href: "/dashboard",
+  },
+  {
+    title: "Analytics",
+    href: "/dashboard/analytics",
+  },
+  {
+    title: "Reports",
+    href: "/dashboard/reports",
+  },
+];
+
+export default function UserMetricsLayout({ children }: PropsWithChildren) {
+  return (
+    <div className="flex h-full flex-col gap-[37px] bg-background">
+      <div className="flex flex-wrap items-center justify-between gap-x-6 gap-y-2 pt-6">
+        <div className="space-y-6">
+          <h1 className="text-2xl font-semibold lg:text-[30px]">Dashboard</h1>
+          <Tablinks links={links} />
+        </div>
+        <div className="flex flex-wrap items-center gap-2 max-sm:flex-grow max-sm:justify-between">
+          <DateSelector />
+          <Button variant="primary" className="h-10">
+            Download
+          </Button>
+        </div>
+      </div>
+      <div className="flex-1 pb-9">{children}</div>
+    </div>
+  );
+}

src/app/dashboard/(user-dashboard)/(user-metrics)/page.tsx

@@ -0,0 +1,19 @@
+import { OverviewChart } from "~/app/dashboard/(user-dashboard)/_components/overview-chart";
+import { OverviewRevenue } from "~/app/dashboard/(user-dashboard)/_components/overview-revenue";
+import { OverviewSales } from "~/app/dashboard/(user-dashboard)/_components/overview-sales";
+
+export default function DashboardOverview() {
+  return (
+    <div className="flex flex-col gap-4">
+      <div>
+        <OverviewRevenue />
+      </div>
+      <div className="flex flex-wrap gap-4">
+        <OverviewChart className="flex-grow basis-full md:basis-1/2 lg:max-w-[787px]" />
+        <div className="flex-1 flex-grow md:min-w-[400px]">
+          <OverviewSales />
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/dashboard/(user-dashboard)/(user-metrics)/reports/page.tsx

@@ -0,0 +1,3 @@
+export default function DashboardReports() {
+  return <div>REPORTS</div>;
+}

src/app/dashboard/(user-dashboard)/_components/RecentSales.tsx

@@ -0,0 +1,87 @@
+import React from "react";
+
+import { Card } from "~/components/ui/card";
+
+type ProductData = {
+  name: string;
+  amount: string;
+  email: string;
+};
+
+type TopProductsProperties = {
+  data: ProductData[];
+  gradients: string[];
+  noOfSales: number;
+};
+
+const RecentSales: React.FC<TopProductsProperties> = ({
+  data,
+  gradients,
+  noOfSales,
+}) => {
+  return (
+    <Card className="h-full basis-1/2 rounded-xl border border-border bg-white p-3 shadow-spread md:p-5">
+      <div className="mb-6 flex items-center justify-between">
+        <div className="flex flex-col items-start">
+          <h2 className="text-base font-semibold text-[#080808]">
+            Recent Sales
+          </h2>
+          <p className="text-sm font-medium text-[#626262] md:text-sm">
+            You made {noOfSales} sales this month
+          </p>
+        </div>
+      </div>
+      <ul className="text-[#0A0A0A]">
+        {data.map((item, index) => {
+          let amount = Number(item.amount).toFixed(2);
+          amount = amount
+            .replaceAll(
+              new RegExp(
+                String.raw`^(\d{` +
+                  (amount.length % 3 ?? 0) +
+                  String.raw`})(\d{3})`,
+                "g",
+              ),
+              "$1 $2",
+            )
+            .replaceAll(/(\d{3})+?/gi, "$1 ")
+            .trim();
+          const separator = ",";
+          amount = amount.replaceAll(/\s/g, separator);
+          amount = amount.replace(",.", ".");
+
+          return (
+            <li
+              key={index}
+              className="mb-2 flex items-center justify-between py-2"
+            >
+              <div className="flex items-center space-x-4">
+                <div
+                  className="h-10 w-10 rounded-full"
+                  style={{ background: gradients[index % gradients.length] }}
+                />
+                <div>
+                  <p
+                    data-testid={`product-name-${index}`}
+                    className="text-base font-medium"
+                  >
+                    {item.name}
+                  </p>
+                  <p className="text-sm text-neutral-dark-1">{item.email}</p>
+                </div>
+              </div>
+              <p
+                data-testid={`product-amount-${index}`}
+                className="text-base font-semibold"
+              >
+                +${amount}
+              </p>
+            </li>
+          );
+        })}
+      </ul>
+    </Card>
+  );
+};
+
+export default RecentSales;

src/app/dashboard/(user-dashboard)/_components/layout/dateselector/index.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { format, subMonths } from "date-fns";
+import { CalendarDaysIcon } from "lucide-react";
+import { useState } from "react";
+import { DateRange } from "react-day-picker";
+
+import { Button } from "~/components/common/common-button";
+import { Calendar } from "~/components/ui/calendar";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "~/components/ui/popover";
+import { cn } from "~/lib/utils";
+
+type DateSelectorProperties = {
+  from?: Date;
+  to?: Date;
+  className?: string;
+};
+export function DateSelector({
+  from = subMonths(new Date(), 1),
+  to = new Date(),
+  className,
+}: DateSelectorProperties) {
+  const [date, setDate] = useState<DateRange | undefined>({
+    from,
+    to,
+  });
+
+  return (
+    <div className={cn("grid gap-2", className)}>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            id="date"
+            variant={"outline"}
+            className={cn(
+              "h-10 max-w-[256px] justify-start gap-1 p-2 text-left font-normal",
+              !date && "text-muted-foreground",
+            )}
+          >
+            <CalendarDaysIcon className="h-6 w-6" />
+            <span className="truncate">
+              {date?.from ? (
+                date.to ? (
+                  <>
+                    {format(date.from, "LLL dd, y")} -{" "}
+                    {format(date.to, "LLL dd, y")}
+                  </>
+                ) : (
+                  format(date.from, "LLL dd, y")
+                )
+              ) : (
+                "Pick a date"
+              )}
+            </span>
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0" align="start">
+          <Calendar
+            initialFocus
+            mode="range"
+            defaultMonth={date?.from}
+            selected={date}
+            onSelect={setDate}
+            numberOfMonths={2}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}