Merge branch 'dev' into feat/HNG-wait-list-page

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

@@ -29,6 +29,7 @@
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-select": "^2.1.1",
+    "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.0",
     "@radix-ui/react-tabs": "^1.1.0",
@@ -43,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)/_components/unread-notification-card/UnreadNotificationCard.tsx

@@ -1,6 +1,10 @@
+"use client";
+
 import { BellRing } from "lucide-react";
 import { FC } from "react";
 
+import { useNotificationStore } from "~/app/dashboard/(user-dashboard)/settings/notification/action/notification-store";
+import { notificationSettingsProperties } from "~/app/dashboard/(user-dashboard)/settings/notification/types/notification-settings.types";
 import CustomButton from "~/components/common/common-button/common-button";
 import {
   Card,
@@ -29,6 +33,12 @@ const UnreadNotificationCard: FC<CardProperties> = ({
   unreadCount = 0,
   ...properties
 }) => {
+  const { settings, updateSettings } = useNotificationStore();
+
+  const handleToggleSwitch = (name: keyof notificationSettingsProperties) => {
+    updateSettings({ [name]: !settings[name] });
+  };
+
   return (
     <Card
       data-testid="cardContainer"
@@ -44,7 +54,7 @@ const UnreadNotificationCard: FC<CardProperties> = ({
       </CardHeader>
       <CardContent className="grid gap-4 p-4 pt-0 sm:p-6 sm:pt-0">
         <div className="flex items-center space-x-4 rounded-md border p-2 sm:p-4">
-          <BellRing />
+          <BellRing size={16} />
           <div className="flex-1 space-y-1">
             <p className="text-sm font-medium leading-none">
               Push Notifications
@@ -53,7 +63,13 @@ const UnreadNotificationCard: FC<CardProperties> = ({
               Send notifications to device.
             </p>
           </div>
-          <Switch />
+          <Switch
+            checked={settings.mobile_push_notifications}
+            onCheckedChange={() =>
+              handleToggleSwitch("mobile_push_notifications")
+            }
+            name="mobile_push_notifications"
+          />
         </div>
         <div data-testid="previewBody">
           {notificationsPreview.map((preview, index) => (
@@ -86,6 +102,9 @@ const UnreadNotificationCard: FC<CardProperties> = ({
             variant="primary"
             isDisabled={unreadCount === 0}
             className="w-full bg-primary"
+            onClick={() => {
+              // MARK ALL NOTIFICATION LOGIC
+            }}
           >
             Mark all as read
           </CustomButton>

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/email/edit-in-buit-templates/[templateId]/page.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { EllipsisVertical, Eye, Redo, Undo } from "lucide-react";
 
 import { Button } from "~/components/common/common-button";

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,