init project portal web

2025-04-15 13:56:54 +07:00
parent 9a25243035
commit 8b15dcebf8
122 changed files with 13965 additions and 1 deletions
--- a/components/module/app-bar/index.tsx
+++ b/components/module/app-bar/index.tsx
@ -0,0 +1,81 @@
+"use client"
+import { loginRepository } from "@/lib/login/data/repository"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu"
+import { useMutation } from "@tanstack/react-query"
+import QueryWrapper from "../query-wrapper"
+import { useRouter } from "next/navigation"
+import logo_2 from "@/images/Telkomcel.png"
+import ava from "@/images/ava.png"
+import Image from "next/image"
+import { useEffect, useState } from "react"
+
+interface Props {
+    useLogo: boolean
+}
+
+const Content = ({
+    useLogo
+}: Props) => {
+    const [username, setUserName] = useState("");
+    const router = useRouter()
+    const mutation = useMutation({
+        mutationFn: () => loginRepository.logout(),
+        onSuccess: () => {
+            router.push("/onboard/login")
+        },
+        onError: () => {
+            console.log('error')
+        },
+    })
+
+    useEffect(() => {
+        fetch("/api/cookies")
+            .then((res) => res.json())
+            .then((data) => setUserName(data.credential.username));
+    }, []);
+
+    return (
+        <div className="flex justify-between items-center py-5 px-10 bg-white relative w-full">
+            {useLogo ? <div className="flex gap-2">
+                <div className="max-w-60">
+                    <Image src={logo_2} alt="logo_2" priority={false}/>
+                </div>
+            </div> : <div/>}
+            <div>
+                <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                        <div className="flex items-center gap-2 cursor-pointer">
+                            <div className="text-end">
+                                <h4 className="text-black-80 text-base">Welcome,</h4>
+                                <h4 className="text-black-100 uppercase">{username}</h4>
+                            </div>
+                            <Image src={ava} alt="ava" className="cursor-pointer" />
+                        </div>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent className="w-56 bg-white mr-8 shadow-md rounded-md transition-transform data-[state=open]:animate-fadeIn data-[state=closed]:animate-fadeOut text-black-70 hover:text-black-50">
+                        <DropdownMenuItem className="hover:bg-gray-300 border-none outline-none px-2">
+                            <button className="w-full flex justify-start">
+                                Profile
+                            </button>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem className="hover:bg-gray-300 border-none outline-none px-2">
+                            <button className="w-full flex justify-start" onClick={() => mutation.mutate()}>
+                                Logout
+                            </button>
+                        </DropdownMenuItem>
+                    </DropdownMenuContent>
+                </DropdownMenu>
+            </div>
+        </div>
+    )
+}
+
+const AppBar = ({useLogo = true}: {useLogo: boolean}) => {
+    return (
+        <QueryWrapper>
+            <Content useLogo={useLogo}/>
+        </QueryWrapper>
+    )
+}
+
+export default AppBar