Merge pull request #676 from taiwonaf/feat-Hgn-email-template

Feat hgn email template

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

@@ -0,0 +1,130 @@
+"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",
+  },
+  {
+    route: "Settings",
+    link: "/dashboard/settings",
+    id: "settings",
+  },
+];
+
+const UserNavbar = () => {
+  const pathname = usePathname();
+  const currentPath = pathname?.split("/")[2];
+  return (
+    <nav
+      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">
+        <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;

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

@@ -1,17 +1,15 @@
 import { Suspense } from "react";
 
-// import AdminNavbar from "~/components/superadminlayout/navbar/AdminNavbar";
+import UserNavbar from "./_components/layout/navbar";
 
 export default function AdminLayout({
   children,
 }: {
   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="hidden border-r bg-muted/40 md:block" /> */}
-      {/* <AdminNavbar /> */}
-
+    <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>
       </div>

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;

src/app/dashboard/(user-dashboard)/settings/account/page.tsx

@@ -0,0 +1,5 @@
+const page = () => {
+  return <div>page</div>;
+};
+
+export default page;

src/app/dashboard/(user-dashboard)/settings/data-and-privacy/page.tsx

@@ -0,0 +1,5 @@
+const page = () => {
+  return <div>page</div>;
+};
+
+export default page;

src/app/dashboard/(user-dashboard)/settings/language-and-region/page.tsx

@@ -0,0 +1,5 @@
+const page = () => {
+  return <div>page</div>;
+};
+
+export default page;

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;

src/app/dashboard/(user-dashboard)/settings/notification/page.tsx

@@ -0,0 +1,5 @@
+const page = () => {
+  return <div>page</div>;
+};
+
+export default page;

src/app/dashboard/(user-dashboard)/settings/organization/integrations/page.tsx

@@ -0,0 +1,5 @@
+const page = () => {
+  return <div>page</div>;
+};
+
+export default page;

src/app/dashboard/(user-dashboard)/settings/organization/members/page.tsx

@@ -0,0 +1,5 @@
+const page = () => {
+  return <div>page</div>;
+};
+
+export default page;

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;

src/app/dashboard/(user-dashboard)/settings/payment-information/page.tsx

@@ -0,0 +1,5 @@
+const page = () => {
+  return <div>page</div>;
+};
+
+export default page;