From 14faf8111a2496e9755c91d0a3247d66e553fb56 Mon Sep 17 00:00:00 2001
From: Sukma Gladys <sukmagladysv@gmail.com>
Date: Thu, 31 Oct 2024 15:16:47 +0700
Subject: [PATCH] feat: add navlink at header

---
 apps/frontend/src/components/AppHeader.tsx | 89 ++++++++++++++++++++--
 1 file changed, 81 insertions(+), 8 deletions(-)

diff --git a/apps/frontend/src/components/AppHeader.tsx b/apps/frontend/src/components/AppHeader.tsx
index cab58ab..600beb0 100644
--- a/apps/frontend/src/components/AppHeader.tsx
+++ b/apps/frontend/src/components/AppHeader.tsx
@@ -3,7 +3,7 @@ import logo from "@/assets/logos/amati-logo.png";
 import cx from "clsx";
 import classNames from "./styles/appHeader.module.css";
 import { IoMdMenu } from "react-icons/io";
-import { Link } from "@tanstack/react-router";
+import { Link, useLocation } from "@tanstack/react-router";
 import useAuth from "@/hooks/useAuth";
 import { Avatar, AvatarFallback, AvatarImage } from "@/shadcn/components/ui/avatar";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/shadcn/components/ui/dropdown-menu";
@@ -21,6 +21,7 @@ interface User {
 	id: string;
 	name: string;
 	permissions: string[];
+	role: string;
 	photoProfile?: string;
 }
 
@@ -34,22 +35,94 @@ export default function AppHeader({ toggle }: Props) {
 	const [userMenuOpened, setUserMenuOpened] = useState(false);
 
 	const { user }: { user: User | null } = useAuth();
+	const isSuperAdmin = user?.role === "super-admin";
 
 	// const userMenus = getUserMenus().map((item, i) => (
 	// 	<UserMenuItem item={item} key={i} />
 	// ));
 
+	const { pathname } = useLocation();
+	const showAssessmentResultLinks = pathname === "/assessmentResult";
+	const showAssessmentLinks = pathname === "/assessment";
+	const assessmentRequestsLinks = pathname === "/assessmentRequest";
+	const managementResultsLinks = pathname === "/assessmentResultsManagement";
+
+	const shouldShowButton = !(showAssessmentResultLinks || showAssessmentLinks || assessmentRequestsLinks);
+
 	return (
 		<header className="fixed top-0 left-0 w-full h-16 bg-white z-50 border">
 			<div className="flex h-full justify-between w-full items-center">
-				<Button
-					onClick={toggle}
-					className="flex items-center px-5 py-5 lg:hidden bg-white text-black hover:bg-white hover:text-black focus:bg-white focus:text-black active:bg-white active:text-black"
-				>
-					<IoMdMenu />
-				</Button>
+				<div className="flex items-center">
+					{shouldShowButton && (
+						<Button
+							onClick={toggle}
+							className="flex items-center px-5 py-5 lg:hidden bg-white text-black hover:bg-white hover:text-black focus:bg-white focus:text-black active:bg-white active:text-black"
+						>
+							<IoMdMenu />
+						</Button>
+					)}
 
-				<img src={logo} alt="" className="w-fit h-full px-8 py-5" />
+					<img src={logo} alt="" className="w-44 h-fit px-8 py-5" />
+				</div>
+
+				{/* Conditional Navlinks */}
+				<div className="flex space-x-4 justify-center w-full">
+					{showAssessmentResultLinks && (
+						<>
+							<Link
+								to="/assessmentRequest"
+								className={cx("text-sm font-medium", {
+									"text-blue-600": isSuperAdmin ? managementResultsLinks : assessmentRequestsLinks, // warna aktif
+									"text-gray-700": isSuperAdmin ? !managementResultsLinks : !assessmentRequestsLinks, // warna default
+								})}
+								onClick={() => {
+									if (window.opener) {
+										window.close();
+									}
+								}}
+							>
+								{isSuperAdmin ? "Manajemen Hasil" : "Permohonan Assessment"}
+							</Link>
+							<Link
+								to="/assessmentResult"
+								className={cx("text-sm font-medium", {
+									"text-blue-600": showAssessmentResultLinks, // warna aktif
+									"text-gray-700": !showAssessmentResultLinks, // warna default
+								})}
+							>
+								Hasil Assessment
+							</Link>
+						</>
+					)}
+
+					{showAssessmentLinks && (
+						<>
+							<Link
+								to="/assessmentRequest"
+								className={cx("text-sm font-medium", {
+									"text-blue-600": assessmentRequestsLinks, // warna aktif
+									"text-gray-700": !assessmentRequestsLinks, // warna default
+								})}
+								onClick={() => {
+									if (window.opener) {
+										window.close();
+									}
+								}}
+							>
+								Permohonan Assessment
+							</Link>
+							<Link
+								to="/assessment"
+								className={cx("text-sm font-medium", {
+									"text-blue-600": showAssessmentLinks, // warna aktif
+									"text-gray-700": !showAssessmentLinks, // warna default
+								})}
+							>
+								Assessment
+							</Link>
+						</>
+					)}
+				</div>
 
 				<DropdownMenu
 					modal={false}