From 374bd87dca51d5ee8c9cc4c024ee6dc635ad67fd Mon Sep 17 00:00:00 2001
From: Nafiu Taiwo <nafiutaiwosolomon@gmail.com>
Date: Thu, 25 Jul 2024 18:48:06 +0100
Subject: [PATCH 1/4] feat: users navbar

---
 .../_components/layout/navbar/index.tsx       | 125 ++++++++++++++++++
 src/app/dashboard/(user-dashboard)/layout.tsx |   6 +-
 2 files changed, 127 insertions(+), 4 deletions(-)
 create mode 100644 src/app/dashboard/(user-dashboard)/_components/layout/navbar/index.tsx

diff --git a/src/app/dashboard/(user-dashboard)/_components/layout/navbar/index.tsx b/src/app/dashboard/(user-dashboard)/_components/layout/navbar/index.tsx
new file mode 100644
index 000000000..337797f86
--- /dev/null
+++ b/src/app/dashboard/(user-dashboard)/_components/layout/navbar/index.tsx
@@ -0,0 +1,125 @@
+"use client";
+
+import {
+  BellIcon,
+  ChevronDown,
+  HelpCircle,
+  Menu,
+  SearchIcon,
+} from "lucide-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+import UnreadNotificationCard from "~/app/dashboard/(admin)/_components/unread-notification-card/UnreadNotificationCard";
+import Logo from "~/components/common/logo";
+import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "~/components/ui/popover";
+
+const navlinks = [
+  {
+    route: "Overview",
+    link: "/dashboard",
+    id: "dashboard",
+  },
+  {
+    route: "Customers",
+    link: "/dashboard/customer",
+    id: "customers",
+  },
+  {
+    route: "Products",
+    link: "/dashboard/products",
+    id: "products",
+  },
+];
+
+const UserNavbar = () => {
+  const pathname = usePathname();
+  const currentPath = pathname?.split("/")[2];
+  return (
+    <nav
+      className="sticky left-0 right-0 top-0 z-50 border-b-[0.5px] border-border bg-background px-5 py-2.5 md:left-[220px] lg:left-[252px]"
+      role="navbar"
+    >
+      <div className="flex items-center justify-between gap-2">
+        <div className="flex w-full max-w-[470px] justify-between gap-1">
+          <div className="flex w-full max-w-[200px] items-center justify-start gap-1">
+            <Menu className="h-[18px] w-[18px] text-neutral-dark-2 transition-all duration-300 hover:text-neutral-dark-2/50" />
+            <Logo />
+          </div>
+          <div className="flex w-full max-w-[220px] items-center justify-between gap-1">
+            {navlinks.map((item, index) => (
+              <Link
+                key={index}
+                href={item.link}
+                className={`text-sm font-bold transition-all duration-200 hover:text-primary ${currentPath === item.id ? "text-primary" : "text-neutral-dark-2"}`}
+              >
+                {item.route}
+              </Link>
+            ))}
+          </div>
+        </div>
+        <div className="flex w-full max-w-[440px] items-center justify-between gap-2 bg-[#FDFDFD]">
+          <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"
+              className="h-4 w-4 text-neutral-dark-2"
+            />
+            <input
+              className="h-full w-full border-none text-neutral-dark-2 outline-none ring-0 placeholder:text-neutral-dark-1"
+              placeholder="Search option..."
+              data-testid="input"
+            />
+          </div>
+          <div className="relative flex items-center justify-center">
+            <Popover>
+              <PopoverTrigger>
+                <BellIcon
+                  data-testid="bell"
+                  className="h-6 w-6 text-neutral-dark-2 transition-colors duration-300 hover:cursor-pointer hover:text-neutral-dark-1"
+                />
+              </PopoverTrigger>
+              <PopoverContent
+                data-testid="notificationContent"
+                align="end"
+                className="w-[380px] border-none p-0 shadow-none"
+              >
+                <UnreadNotificationCard
+                  notificationsPreview={[
+                    { header: "Check mail", time: "1 hour ago" },
+                    { header: "Sign up for offer", time: "2 hours ago" },
+                    { header: "Register for event", time: "1 hour ago" },
+                  ]}
+                  unreadCount={30}
+                />
+              </PopoverContent>
+            </Popover>
+            <span className="absolute right-1 top-0 h-[6px] w-[6px] rounded-full bg-error"></span>
+          </div>
+          <div>
+            <HelpCircle
+              data-testid="help"
+              className="h-6 w-6 text-neutral-dark-2 transition-colors duration-300 hover:cursor-pointer hover:text-neutral-dark-1"
+            />
+          </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>
+            <ChevronDown
+              data-testid="chevronDown"
+              className="2-5 h-5 text-neutral-dark-1"
+            />
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+export default UserNavbar;
diff --git a/src/app/dashboard/(user-dashboard)/layout.tsx b/src/app/dashboard/(user-dashboard)/layout.tsx
index 6c6e99f4d..4fbf16f44 100644
--- a/src/app/dashboard/(user-dashboard)/layout.tsx
+++ b/src/app/dashboard/(user-dashboard)/layout.tsx
@@ -1,6 +1,6 @@
 import { Suspense } from "react";
 
-// import AdminNavbar from "~/components/superadminlayout/navbar/AdminNavbar";
+import UserNavbar from "./_components/layout/navbar";
 
 export default function AdminLayout({
   children,
@@ -9,9 +9,7 @@ export default function AdminLayout({
 }) {
   return (
     <div className="md:grid-cols-[252px_1fr]x lg:grid-cols-[252px_1fr]x grid min-h-[100dvh] grid-rows-[auto_1fr]">
-      {/* <div className="hidden border-r bg-muted/40 md:block" /> */}
-      {/* <AdminNavbar /> */}
-
+      <UserNavbar />
       <div className="relative w-full bg-white px-2 max-lg:overflow-hidden xl:px-4">
         <Suspense>{children}</Suspense>
       </div>

From df6edde220174d58601af2a87be9d8a34e2ed14b Mon Sep 17 00:00:00 2001
From: Nafiu Taiwo <nafiutaiwosolomon@gmail.com>
Date: Thu, 25 Jul 2024 18:50:49 +0100
Subject: [PATCH 2/4] feat: update

---
 src/app/(auth-routes)/login/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/(auth-routes)/login/page.tsx b/src/app/(auth-routes)/login/page.tsx
index 5216d09e8..85a65d8dc 100644
--- a/src/app/(auth-routes)/login/page.tsx
+++ b/src/app/(auth-routes)/login/page.tsx
@@ -25,8 +25,8 @@ import {
 import { Input } from "~/components/ui/input";
 import { useUser } from "~/hooks/user/use-user";
 import { simulateDelay } from "~/lib/utils";
-import Google from "../../../../public/images/google.svg";
 import Facebook from "../../../../public/images/facebook.svg";
+import Google from "../../../../public/images/google.svg";
 
 const loginSchema = z.object({
   email: z.string().email({ message: "Invalid email format" }),

From e5e7a112782acef4d717234df268b5b67eb329a2 Mon Sep 17 00:00:00 2001
From: Nafiu Taiwo <nafiutaiwosolomon@gmail.com>
Date: Thu, 25 Jul 2024 21:35:22 +0100
Subject: [PATCH 3/4] feat: settings layout

---
 .../_components/layout/navbar/index.tsx       |   2 +-
 src/app/dashboard/(user-dashboard)/layout.tsx |   2 +-
 .../_components/layout/sidebar/index.tsx      | 145 ++++++++++++++++++
 .../settings/account/page.tsx                 |   5 +
 .../settings/data-and-privacy/page.tsx        |   5 +
 .../settings/language-and-region/page.tsx     |   5 +
 .../(user-dashboard)/settings/layout.tsx      |  17 ++
 .../settings/notification/page.tsx            |   5 +
 .../organization/integrations/page.tsx        |   5 +
 .../settings/organization/members/page.tsx    |   5 +
 .../roles-and-permissions/page.tsx            |   5 +
 .../settings/payment-information/page.tsx     |   5 +
 12 files changed, 204 insertions(+), 2 deletions(-)
 create mode 100644 src/app/dashboard/(user-dashboard)/settings/_components/layout/sidebar/index.tsx
 create mode 100644 src/app/dashboard/(user-dashboard)/settings/account/page.tsx
 create mode 100644 src/app/dashboard/(user-dashboard)/settings/data-and-privacy/page.tsx
 create mode 100644 src/app/dashboard/(user-dashboard)/settings/language-and-region/page.tsx
 create mode 100644 src/app/dashboard/(user-dashboard)/settings/layout.tsx
 create mode 100644 src/app/dashboard/(user-dashboard)/settings/notification/page.tsx
 create mode 100644 src/app/dashboard/(user-dashboard)/settings/organization/integrations/page.tsx
 create mode 100644 src/app/dashboard/(user-dashboard)/settings/organization/members/page.tsx
 create mode 100644 src/app/dashboard/(user-dashboard)/settings/organization/roles-and-permissions/page.tsx
 create mode 100644 src/app/dashboard/(user-dashboard)/settings/payment-information/page.tsx

diff --git a/src/app/dashboard/(user-dashboard)/_components/layout/navbar/index.tsx b/src/app/dashboard/(user-dashboard)/_components/layout/navbar/index.tsx
index 337797f86..6276f88ab 100644
--- a/src/app/dashboard/(user-dashboard)/_components/layout/navbar/index.tsx
+++ b/src/app/dashboard/(user-dashboard)/_components/layout/navbar/index.tsx
@@ -42,7 +42,7 @@ const UserNavbar = () => {
   const currentPath = pathname?.split("/")[2];
   return (
     <nav
-      className="sticky left-0 right-0 top-0 z-50 border-b-[0.5px] border-border bg-background px-5 py-2.5 md:left-[220px] lg:left-[252px]"
+      className="border-b-[0.5px] border-border bg-background px-5 py-2.5 md:left-[220px] lg:left-[252px]"
       role="navbar"
     >
       <div className="flex items-center justify-between gap-2">
diff --git a/src/app/dashboard/(user-dashboard)/layout.tsx b/src/app/dashboard/(user-dashboard)/layout.tsx
index 4fbf16f44..3ff9e35b6 100644
--- a/src/app/dashboard/(user-dashboard)/layout.tsx
+++ b/src/app/dashboard/(user-dashboard)/layout.tsx
@@ -8,7 +8,7 @@ export default function AdminLayout({
   children: React.ReactNode;
 }) {
   return (
-    <div className="md:grid-cols-[252px_1fr]x lg:grid-cols-[252px_1fr]x grid min-h-[100dvh] grid-rows-[auto_1fr]">
+    <div className="grid grid-rows-[auto_1fr]">
       <UserNavbar />
       <div className="relative w-full bg-white px-2 max-lg:overflow-hidden xl:px-4">
         <Suspense>{children}</Suspense>
diff --git a/src/app/dashboard/(user-dashboard)/settings/_components/layout/sidebar/index.tsx b/src/app/dashboard/(user-dashboard)/settings/_components/layout/sidebar/index.tsx
new file mode 100644
index 000000000..4d20d5cff
--- /dev/null
+++ b/src/app/dashboard/(user-dashboard)/settings/_components/layout/sidebar/index.tsx
@@ -0,0 +1,145 @@
+"use client";
+
+import {
+  Banknote,
+  Bell,
+  ChevronLeft,
+  ChevronRight,
+  Database,
+  Globe,
+  LucideProps,
+  User,
+  UserRoundCog,
+  UsersIcon,
+} from "lucide-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { FC, ForwardRefExoticComponent, RefAttributes } from "react";
+
+const sideItems = [
+  {
+    route: "General",
+    link: "/dashboard/settings",
+    icon: User,
+    id: "general",
+  },
+  {
+    route: "Account",
+    link: "/dashboard/settings/account",
+    icon: UserRoundCog,
+    id: "account",
+  },
+  {
+    route: "Notification",
+    link: "/dashboard/settings/notification",
+    icon: Bell,
+    id: "notification",
+  },
+  {
+    route: "Payment Information",
+    link: "/dashboard/settings/payment-information",
+    icon: Banknote,
+    id: "payment-information",
+  },
+  {
+    route: "Data and Privacy",
+    link: "/dashboard/settings/data-and-privacy",
+    icon: Database,
+    id: "data-and-privacy",
+  },
+  {
+    route: "Language and Region",
+    link: "/dashboard/settings/language-and-region",
+    icon: Globe,
+    id: "language-and-region",
+  },
+];
+
+const organizationLinks = [
+  {
+    route: "Members",
+    link: "/dashboard/settings/organization/members",
+    icon: UsersIcon,
+    id: "members",
+  },
+  {
+    route: "Roles and permissions",
+    link: "/dashboard/settings/organization/roles-and-permissions",
+    icon: Bell,
+    id: "roles-and-permissions",
+  },
+  {
+    route: "Integrations",
+    link: "/dashboard/settings/organization/integrations",
+    icon: Banknote,
+    id: "integrations",
+  },
+];
+
+interface Iproperties {
+  sideNavitems?: {
+    route: string;
+    link: string;
+    icon: ForwardRefExoticComponent<
+      Omit<LucideProps, "ref"> & RefAttributes<SVGSVGElement>
+    >;
+    id: string;
+  }[];
+  currenPathName?: string;
+}
+const SettingsSidebar: FC<Iproperties> = ({ sideNavitems = sideItems }) => {
+  const pathname = usePathname();
+  const currentPath =
+    pathname?.split("/").length == 2 ? "general" : pathname?.split("/")[3];
+  const organizationPath = pathname?.split("/")[4];
+
+  return (
+    <div className="h-screen w-[50px] flex-col items-center justify-center bg-[#FDFDFD] pt-6 md:block md:w-[260px] md:justify-start md:px-4">
+      <div className="mb-6 flex items-center justify-center md:justify-start md:gap-2">
+        <ChevronLeft className="h-5 w-5 text-neutral-dark-2" />
+        <h2 className="hidden text-xl text-neutral-dark-2 md:block">
+          Settings
+        </h2>
+      </div>
+      <h3 className="hidden p-2.5 text-lg text-neutral-dark-2 md:block">
+        Profile
+      </h3>
+      <section className="mb-2 flex flex-col items-center gap-y-3 border-b-[1px] border-border pb-2 pt-2 md:items-stretch">
+        {sideNavitems.map((item, index) => (
+          <Link
+            key={index}
+            href={item.link}
+            data-testid={item.id}
+            role="sidebar-link"
+            className={`${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>
+          </Link>
+        ))}
+      </section>
+      <h3 className="hidden p-2.5 text-lg text-neutral-dark-2 md:block">
+        Organization
+      </h3>
+      <section className="flex flex-col items-center gap-y-3 pt-2 md:items-stretch">
+        {organizationLinks.map((item, index) => (
+          <Link
+            key={index}
+            href={item.link}
+            data-testid={item.id}
+            role="sidebar-link"
+            className={`${organizationPath === 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-between md:rounded-sm`}
+          >
+            <div className="flex items-center justify-start gap-2.5">
+              <item.icon className="h-5 w-5" role="sidebar-icon" />
+              <span className="hidden md:block">{item.route}</span>
+            </div>
+            <ChevronRight className="hidden h-5 w-5 md:block" />
+          </Link>
+        ))}
+      </section>
+    </div>
+  );
+};
+
+export default SettingsSidebar;
diff --git a/src/app/dashboard/(user-dashboard)/settings/account/page.tsx b/src/app/dashboard/(user-dashboard)/settings/account/page.tsx
new file mode 100644
index 000000000..db4d38750
--- /dev/null
+++ b/src/app/dashboard/(user-dashboard)/settings/account/page.tsx
@@ -0,0 +1,5 @@
+const page = () => {
+  return <div>page</div>;
+};
+
+export default page;
diff --git a/src/app/dashboard/(user-dashboard)/settings/data-and-privacy/page.tsx b/src/app/dashboard/(user-dashboard)/settings/data-and-privacy/page.tsx
new file mode 100644
index 000000000..db4d38750
--- /dev/null
+++ b/src/app/dashboard/(user-dashboard)/settings/data-and-privacy/page.tsx
@@ -0,0 +1,5 @@
+const page = () => {
+  return <div>page</div>;
+};
+
+export default page;
diff --git a/src/app/dashboard/(user-dashboard)/settings/language-and-region/page.tsx b/src/app/dashboard/(user-dashboard)/settings/language-and-region/page.tsx
new file mode 100644
index 000000000..db4d38750
--- /dev/null
+++ b/src/app/dashboard/(user-dashboard)/settings/language-and-region/page.tsx
@@ -0,0 +1,5 @@
+const page = () => {
+  return <div>page</div>;
+};
+
+export default page;
diff --git a/src/app/dashboard/(user-dashboard)/settings/layout.tsx b/src/app/dashboard/(user-dashboard)/settings/layout.tsx
new file mode 100644
index 000000000..b6b98a2bd
--- /dev/null
+++ b/src/app/dashboard/(user-dashboard)/settings/layout.tsx
@@ -0,0 +1,17 @@
+import { FC, ReactNode } from "react";
+
+import SettingsSidebar from "./_components/layout/sidebar";
+
+interface Iproperties {
+  children: ReactNode;
+}
+const layout: FC<Iproperties> = ({ children }) => {
+  return (
+    <div className="grid grid-cols-[auto_1fr]">
+      <SettingsSidebar />
+      <div className="">{children}</div>
+    </div>
+  );
+};
+
+export default layout;
diff --git a/src/app/dashboard/(user-dashboard)/settings/notification/page.tsx b/src/app/dashboard/(user-dashboard)/settings/notification/page.tsx
new file mode 100644
index 000000000..db4d38750
--- /dev/null
+++ b/src/app/dashboard/(user-dashboard)/settings/notification/page.tsx
@@ -0,0 +1,5 @@
+const page = () => {
+  return <div>page</div>;
+};
+
+export default page;
diff --git a/src/app/dashboard/(user-dashboard)/settings/organization/integrations/page.tsx b/src/app/dashboard/(user-dashboard)/settings/organization/integrations/page.tsx
new file mode 100644
index 000000000..db4d38750
--- /dev/null
+++ b/src/app/dashboard/(user-dashboard)/settings/organization/integrations/page.tsx
@@ -0,0 +1,5 @@
+const page = () => {
+  return <div>page</div>;
+};
+
+export default page;
diff --git a/src/app/dashboard/(user-dashboard)/settings/organization/members/page.tsx b/src/app/dashboard/(user-dashboard)/settings/organization/members/page.tsx
new file mode 100644
index 000000000..db4d38750
--- /dev/null
+++ b/src/app/dashboard/(user-dashboard)/settings/organization/members/page.tsx
@@ -0,0 +1,5 @@
+const page = () => {
+  return <div>page</div>;
+};
+
+export default page;
diff --git a/src/app/dashboard/(user-dashboard)/settings/organization/roles-and-permissions/page.tsx b/src/app/dashboard/(user-dashboard)/settings/organization/roles-and-permissions/page.tsx
new file mode 100644
index 000000000..db4d38750
--- /dev/null
+++ b/src/app/dashboard/(user-dashboard)/settings/organization/roles-and-permissions/page.tsx
@@ -0,0 +1,5 @@
+const page = () => {
+  return <div>page</div>;
+};
+
+export default page;
diff --git a/src/app/dashboard/(user-dashboard)/settings/payment-information/page.tsx b/src/app/dashboard/(user-dashboard)/settings/payment-information/page.tsx
new file mode 100644
index 000000000..db4d38750
--- /dev/null
+++ b/src/app/dashboard/(user-dashboard)/settings/payment-information/page.tsx
@@ -0,0 +1,5 @@
+const page = () => {
+  return <div>page</div>;
+};
+
+export default page;

From d82a97819ddaa2209db59f01fb62f207d330a754 Mon Sep 17 00:00:00 2001
From: Nafiu Taiwo <nafiutaiwosolomon@gmail.com>
Date: Thu, 25 Jul 2024 21:43:09 +0100
Subject: [PATCH 4/4] feat: included settings to the users navbar

---
 .../(user-dashboard)/_components/layout/navbar/index.tsx     | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/app/dashboard/(user-dashboard)/_components/layout/navbar/index.tsx b/src/app/dashboard/(user-dashboard)/_components/layout/navbar/index.tsx
index 6276f88ab..c6c5d6c9c 100644
--- a/src/app/dashboard/(user-dashboard)/_components/layout/navbar/index.tsx
+++ b/src/app/dashboard/(user-dashboard)/_components/layout/navbar/index.tsx
@@ -35,6 +35,11 @@ const navlinks = [
     link: "/dashboard/products",
     id: "products",
   },
+  {
+    route: "Settings",
+    link: "/dashboard/settings",
+    id: "settings",
+  },
 ];
 
 const UserNavbar = () => {