Added new pages to dashboard

2024-03-23 17:03:13 +01:00
parent 07f7a90c0d
commit ea4e6b7a59
23 changed files with 743 additions and 313 deletions
@@ -0,0 +1,183 @@
+import { useState } from "react";
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import Logo from "../../assets/icons/logo.svg";
+import { Icons } from "../../components";
+
+type Props = {
+  asideDisplay?: () => void;
+};
+
+export default function Aside({ asideDisplay }: Props) {
+  const { pathname } = useLocation();
+
+  const navigate = useNavigate();
+
+  const [openNestedLink, setOpenNestedLink] = useState<{ name: string | null }>(
+    { name: "" }
+  );
+
+  const handleOpenNestedLink = (e: any) => {
+    if (!e || !e.target) {
+      return setOpenNestedLink({ name: "" });
+    }
+    if (openNestedLink.name && openNestedLink.name == e.target.name) {
+      setOpenNestedLink({ name: "" });
+    } else {
+      setOpenNestedLink({ name: e.target.name });
+    }
+  };
+
+  return (
+    <div className="py-5 px-10 flex flex-col h-full bg-inherit">
+      <Link to="/">
+        <img src={Logo} alt="Logo" className="w-[72px] h-[63px]" />
+      </Link>
+      <div className="mt-10 h-full overflow-y-auto bg-inherit">
+        {asideLinks.map((link, index) => {
+          if (link.nestedLink?.length) {
+            let allNestedLinks = link.nestedLink.map((item) => item.link);
+            return (
+              <div
+                key={index}
+                className="w-full relative bg-inherit overflow-hidden"
+              >
+                <button
+                  name={link.name}
+                  onClick={(e) => handleOpenNestedLink(e)}
+                  className={`py-2 pl-2 text-left relative w-full overflow-hidden rounded-lg flex justify-between items-center z-10 bg-inherit ${
+                    allNestedLinks.includes(pathname)
+                      ? " text-[#5C2684]"
+                      : " text-[#585858]"
+                  }`}
+                >
+                  {link.name}
+                  {/* <div className={`mr-2 ${openNestedLink.name == link.name ? '-rotate-90' : 'rotate-90'} transition-all duration-300`}>
+                    <Icons
+                      name='greater-than' 
+                      fillColor={`${openNestedLink.name == link.name ? '#5C2684' : '#585858'}`} 
+                    />
+                  </div> */}
+                </button>
+                <div
+                  className={`transition-all duration-300 w-full z-1 ${
+                    openNestedLink.name == link.name
+                      ? "relative top-0"
+                      : "absolute -top-[500px]"
+                  }`}
+                >
+                  {link.nestedLink.map((nextLink, index) => (
+                    <Link
+                      onClick={() => {
+                        asideDisplay && asideDisplay();
+                      }}
+                      key={index}
+                      to={nextLink.link ? nextLink.link : "#"}
+                      className={`w-full my-1 flex items-center gap-2 py-2 pl-5 text-base font-medium ${
+                        pathname == nextLink.link
+                          ? " text-[#5C2684]"
+                          : "text-[#585858]"
+                      }`}
+                    >
+                      <Icons
+                        name={nextLink.icon}
+                        fillColor={`${
+                          pathname == nextLink.link ? "#5C2684" : "#585858"
+                        }`}
+                      />
+                      {nextLink.name}
+                    </Link>
+                  ))}
+                </div>
+              </div>
+            );
+          } else {
+            return (
+              <Link
+                onClick={() => {
+                  asideDisplay && asideDisplay();
+                }}
+                key={index}
+                to={link.link ? link.link : "#"}
+                className={`w-full my-4 flex items-center gap-2 py-2 pl-5 rounded-lg text-base font-medium ${
+                  pathname == link.link ? "text-[#5C2684]" : "text-[#585858]"
+                }`}
+              >
+                <Icons
+                  name={link.icon}
+                  fillColor={`${pathname == link.link ? "#5C2684" : "#585858"}`}
+                />
+                {link.name}
+              </Link>
+            );
+          }
+        })}
+      </div>
+      <div className="w-full flex justify-center items-center flex-col gap-3">
+        <button
+          className="py-3 px-6 bg-red-100 text-red-500 font-medium rounded-md w-full"
+          onClick={() => navigate("/login", { replace: true })}
+        >
+          Log out
+        </button>
+
+      
+        <div className="flex flex-col gap-[.4375rem] text-[.75rem]">
+          <p className="font-extrabold tracking-[3%] text-[#FBB700] underline">
+            For more enquiries and support
+          </p>
+          <p className="font-extrabold tracking-[3%] text-[#5A5A5A]">
+            Call: 09099000000
+          </p>
+          <p className="font-extrabold tracking-[3%] text-[#5A5A5A]">
+            Email: fcmbloan@support.com
+          </p>
+        </div>
+      
+      </div>
+    </div>
+  );
+}
+
+type AsideLinksType = {
+  name: string;
+  link?: string;
+  icon: string;
+  nestedLink?: {
+    name: string;
+    link: string;
+    icon: string;
+  }[];
+}[];
+
+const asideLinks: AsideLinksType = [
+  { name: "Dashboard", link: "/dashboard/home", icon: "dash-icon", nestedLink: [] },
+  {
+    name: "Your Profile",
+    link: "/dashboard/profile",
+    icon: "dash-icon",
+    nestedLink: [],
+  },
+  {
+    name: "Employment Details",
+    link: "/dashboard/verification",
+    icon: "dash-icon",
+    nestedLink: [],
+  },
+  {
+    name: "Reference Details",
+    link: "/dashboard/payments",
+    icon: "dash-icon",
+    nestedLink: [],
+  },
+  {
+    name: "Agreements",
+    link: "/dashboard/legals",
+    icon: "dash-icon",
+    nestedLink: [],
+  },
+  // {name: 'Nested Link', icon: 'home', nestedLink:[
+  //     {name: 'Link 2', link: '/dashboard/not-found', icon: 'legals'},
+  //     {name: 'Link 1', link: '/dashboard/not-found', icon: 'home'}
+  //   ]
+  // },
+];
@@ -0,0 +1,11 @@
+
+import DashboardLayout from "./DashboardLayout";
+import { Outlet } from "react-router-dom";
+
+export default function DashboardAuth() {
+  return (
+  <DashboardLayout>
+    <Outlet />
+  </DashboardLayout>
+  )
+}
@@ -0,0 +1,84 @@
+import { ReactNode, useState, useEffect } from "react";
+
+import Aside from "./Aside";
+
+export default function DashboardLayout({ children }: { children: ReactNode }) {
+  const [showAside, setShowAside] = useState<boolean>(false);
+  const asideDisplay = (): void => {
+    setShowAside((prev) => !prev);
+  };
+
+  useEffect(() => {
+    const handleResize = () => {
+      return setShowAside(false);
+    };
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  // Assume this interface for ChildProps
+  // interface ChildProps {
+  //   customProp?: string;
+  // }
+
+  // const enhanceChildren = React.Children.map(children, (child) => {
+  //   if (React.isValidElement<ChildProps>(child)) {
+  //     return React.cloneElement(child, { customProp: "Hello, World!" });
+  //   }
+  //   return child;
+  // });
+
+  return (
+    <div className="w-full max-w-[2000px] mx-auto h-screen flex bg-[#020202] text-black">
+      <aside className="max-w-[18.75rem] w-full bg-white hidden md:block border-r-2 border-[#E6E6E6]">
+        <Aside />
+      </aside>
+      <aside
+        className={`max-w-[18.75rem] w-full md:hidden bg-white border-r-2 border-[#E6E6E6] fixed top-0 bottom-0 z-50 transition-all duration-500 ${
+          showAside ? "left-0" : "-left-[200%]"
+        }`}
+      >
+        <Aside asideDisplay={asideDisplay} />
+      </aside>
+      <main className="dash-bg-image bg-[#F9F9F9] relative w-full overflow-y-auto overflow-x-hidden">
+        <div className="flex p-5 relative">
+          <div className="w-full p-5">{children}</div>
+        </div>
+      </main>
+    </div>
+  );
+}
+
+// {/* <header className={`p-5 sticky z-10 top-0 w-full bg-[#F9F9F9] border-b-2 border-[#E6E6E6]`}>
+// <div className='h-14 w-full flex justify-end items-center gap-5'>
+
+//     {/* MENU HAND BURGER */}
+//     <div className='w-full'>Welcome Austin Catherine</div>
+//     <div
+//     className="relative md:hidden w-5 h-[20px] flex flex-col items-center justify-between"
+//     onClick={asideDisplay}
+//     >
+//     <div
+//         className={`absolute left-0 w-5 h-1 bg-black/80 dark:bg-white transition-all duration-500 ${
+//         showAside ? "top-1/2 -translate-y-1/2 rotate-45" : "top-0"
+//         }`}
+//     ></div>
+//     <div
+//         className={`absolute left-0 w-5 h-1 bg-black/80 dark:bg-white transition-all duration-300 ${
+//         showAside
+//             ? "top-1/2 -translate-y-1/2 rotate-[2000deg] opacity-0"
+//             : "top-1/2 -translate-y-1/2"
+//         }`}
+//     ></div>
+//     <div
+//         className={`absolute left-0 w-5 h-1 bg-black/80 dark:bg-white transition-all duration-500 ${
+//         showAside
+//             ? "top-1/2 -translate-y-1/2 -rotate-45"
+//             : "bottom-0"
+//         }`}
+//     ></div>
+//     </div>
+// </div>
+// </header> */}
@@ -0,0 +1,3 @@
+import DashboardAuth from "./DashboardAuth";
+
+export { DashboardAuth };