Merge branch 'hngprojects:dev' into feat/HNG-create-edit-product-deta…

…il-page-team-KIMIKO

next.config.mjs

@@ -1,6 +1,17 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  output: "standalone",
+  output: 'standalone',
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'lh3.googleusercontent.com',
+        port: '',
+        pathname: '/**',
+      },
+    ],
+  },
+  transpilePackages: ["lucide-react"],
 };
 
-export default nextConfig;
+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)/_components/layout/navbar/index.tsx

@@ -1,14 +1,33 @@
+"use client";
+
 import { BellIcon, ChevronDown, HelpCircle, SearchIcon } from "lucide-react";
+import { useSession } from "next-auth/react";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
 
-import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar";
+import UserCard from "~/components/card/user-card";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from "~/components/ui/popover";
 import UnreadNotificationCard from "../../unread-notification-card/UnreadNotificationCard";
 
+interface User {
+  email: string;
+  image: string;
+  name: string;
+}
+
 const DashboardNavbar = () => {
+  const { data: session, status } = useSession();
+  const router = useRouter();
+  useEffect(() => {
+    if (status === "unauthenticated") {
+      router.push("/login");
+    }
+  }, [status, router]);
+
   return (
     <nav
       className="fixed left-[50px] right-0 top-0 z-50 border-b-[0.5px] border-border md:left-[220px] lg:left-[252px]"
@@ -59,10 +78,9 @@ const DashboardNavbar = () => {
             />
           </div>
           <div className="hover:bg-black-1 flex w-full max-w-[64px] cursor-pointer items-center justify-between gap-2">
-            <Avatar data-testid="avatar" className="h-10 w-10">
-              <AvatarImage src="https://github.com/shadcn.png" />
-              <AvatarFallback>CN</AvatarFallback>
-            </Avatar>
+            {status === "authenticated" && (
+              <UserCard user={session?.user as User} />
+            )}
             <ChevronDown
               data-testid="chevronDown"
               className="2-5 h-5 text-neutral-dark-1"

src/app/dashboard/(admin)/admin/dashboard/client.tsx → 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>;
+}