fix admin

deskripsi:
- ui layout admin
- navbar & header responsive

src/app_modules/admin/_components_v3/comp_button_user_circle.tsx

@@ -14,7 +14,7 @@ import {
   SimpleGrid,
   Stack,
   Text,
-  Title
+  Title,
 } from "@mantine/core";
 import {
   IconBell,
@@ -22,7 +22,7 @@ import {
   IconLogout,
   IconReplaceUser,
   IconUser,
-  IconUserCircle
+  IconUserCircle,
 } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
@@ -30,12 +30,24 @@ import { Admin_ComponentModal } from "../_admin_global/_component/comp_admin_mod
 
 export function Admin_V3_ComponentButtonUserCircle({
   dataUser,
+  openPop,
+  setOpenPop,
+  setNavbarOpen,
+  setDrawerNotifikasi,
 }: {
   dataUser: MODEL_USER | null;
+  openPop: boolean;
+  setOpenPop: React.Dispatch<React.SetStateAction<boolean>>;
+  // setOpenPop: (open: boolean) => void;
+  setNavbarOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  // setNavbarOpen: (open: boolean) => void;
+  setDrawerNotifikasi: React.Dispatch<React.SetStateAction<boolean>>;
+  // setDrawerNotifikasi: (open: boolean) => void;
+
 }) {
   const router = useRouter();
   const [isOpenMenuUser, setOpenMenuUser] = useState(false);
-  const [openPop, setOpenPop] = useState(false);
+  // const [openPop, setOpenPop] = useState(false);
   const [openModalLogout, setOpenModalLogout] = useState(false);
   const [openModalReplaceUser, setOpenModalReplaceUser] = useState(false);
   const [loadingLogout, setLoadingLogout] = useState(false);
@@ -62,7 +74,7 @@ export function Admin_V3_ComponentButtonUserCircle({
       icon: IconBell,
       label: "Notifikasi",
       color: "",
-      onClick: () => console.log("Notifikasi"),
+      onClick: () => setDrawerNotifikasi(true),
     },
     {
       icon: IconReplaceUser,
@@ -100,6 +112,7 @@ export function Admin_V3_ComponentButtonUserCircle({
             variant="transparent"
             onClick={() => {
               setOpenPop((o) => !o);
+              setNavbarOpen(false);
             }}
           >
             <IconUserCircle color={dataUser ? "white" : "gray"} />
@@ -116,7 +129,7 @@ export function Admin_V3_ComponentButtonUserCircle({
             {listMenu.map((e, i) => (
               <Group key={i}>
                 <e.icon size={18} />
-                <Text lineClamp={1} >{e.label}</Text>
+                <Text lineClamp={1}>{e.label}</Text>
               </Group>
             ))}
 
@@ -131,58 +144,10 @@ export function Admin_V3_ComponentButtonUserCircle({
                 </Center>
               ))}
             </SimpleGrid>
-
-            {/* <SimpleGrid cols={2}>
-              <Button
-                radius={"xl"}
-                onClick={() => router.push("/dev/home", { scroll: false })}
-              >
-                User Access
-              </Button>
-              <Button
-                radius={"xl"}
-                color="red"
-                onClick={() => setOpenModal(true)}
-              >
-                Keluar
-              </Button>
-            </SimpleGrid> */}
           </Stack>
         </Popover.Dropdown>
       </Popover>
 
-      {/* <Modal
-        opened={openModal}
-        onClose={() => setOpenModal(false)}
-        centered
-        withCloseButton={false}
-        closeOnClickOutside={false}
-      >
-        <Stack>
-          <Title order={6}>Anda yakin ingin keluar ?</Title>
-          <Group align="center" position="center">
-            <Button
-              onClick={() => {
-                setOpenModal(false);
-              }}
-              radius={50}
-            >
-              Batal
-            </Button>
-            <Button
-              loaderPosition="center"
-              loading={loadingLogout ? true : false}
-              radius={50}
-              bg={Warna.merah}
-              color="red"
-              onClick={() => onClickLogout()}
-            >
-              Keluar
-            </Button>
-          </Group>
-        </Stack>
-      </Modal> */}
-
       <Admin_ComponentModal
         opened={openModalLogout}
         onClose={() => setOpenModalLogout(false)}
@@ -205,7 +170,7 @@ export function Admin_V3_ComponentButtonUserCircle({
             </Button>
             <Button
               loaderPosition="center"
-              loading={loadingLogout ? true : false}
+              loading={loadingLogout}
               radius={50}
               bg={Warna.merah}
               color="red"
@@ -225,7 +190,7 @@ export function Admin_V3_ComponentButtonUserCircle({
       >
         <Stack>
           <Title order={5} c={AccentColor.white}>
-            Anda yakin ingin keluar ?
+            Anda yakin ingin pindah ke tampilan user ?
           </Title>
           <Group align="center" position="center">
             <Button
@@ -239,15 +204,16 @@ export function Admin_V3_ComponentButtonUserCircle({
             </Button>
             <Button
               loaderPosition="center"
-              loading={loadingLogout ? true : false}
+              loading={loadingReplaceUser}
               radius={50}
               bg={AccentColor.softblue}
               color="blue"
               onClick={() => {
                 router.push("/dev/home", { scroll: false });
+                setLoadingReplaceUser(true)
               }}
             >
-              User Akses
+              Ke Tampilan User
             </Button>
           </Group>
         </Stack>

src/app_modules/admin/_components_v3/main_layout.tsx

@@ -6,38 +6,38 @@ import { MODEL_USER } from "@/app_modules/home/model/interface";
 import { MODEL_NOTIFIKASI } from "@/app_modules/notifikasi/model/interface";
 import { gs_admin_ntf } from "@/lib/global_state";
 import {
-    AppShell,
-    Burger,
-    Divider,
-    Group,
-    Header,
-    MediaQuery,
-    Navbar,
-    ScrollArea,
-    Stack,
-    Text,
-    useMantineTheme
+  AppShell,
+  Burger,
+  Divider,
+  Drawer,
+  Group,
+  Header,
+  MediaQuery,
+  Navbar,
+  ScrollArea,
+  Stack,
+  Text,
+  useMantineTheme,
 } from "@mantine/core";
 import { useDisclosure, useShallowEffect } from "@mantine/hooks";
 import {
-    IconBriefcase,
-    IconCoin,
-    IconHome,
-    IconMessage,
-    IconUser
+  IconBriefcase,
+  IconCoin,
+  IconHome,
+  IconMessage,
+  IconUser,
 } from "@tabler/icons-react";
 import { useAtom } from "jotai";
 import { usePathname, useRouter } from "next/navigation";
 import type React from "react";
 import { useState } from "react";
+import { Admin_UiNavbar } from "../_admin_global";
 import {
-    Admin_UiNavbar
-} from "../_admin_global";
-import {
-    gs_admin_navbar_menu,
-    gs_admin_navbar_subMenu,
+  gs_admin_navbar_menu,
+  gs_admin_navbar_subMenu,
 } from "../_admin_global/new_global_state";
 import { Admin_V3_ComponentButtonUserCircle } from "./comp_button_user_circle";
+import { Admin_V3_SkeletonNavbar } from "./skeleton_navbar";
 
 export function Admin_V3_MainLayout({
   children,
@@ -52,7 +52,6 @@ export function Admin_V3_MainLayout({
   listNotifikasi: MODEL_NOTIFIKASI[];
   version: string;
 }) {
-  const router = useRouter();
   const [dataUser, setDataUser] = useState<MODEL_USER | null>(null);
   const userRoleId = dataUser?.masterUserRoleId;
   const [activeId, setActiveId] = useAtom(gs_admin_navbar_menu);
@@ -61,7 +60,6 @@ export function Admin_V3_MainLayout({
     useState<MODEL_NOTIFIKASI[]>(listNotifikasi);
 
   // Notifikasi
-  const [isDrawerNotifikasi, setDrawerNotifikasi] = useState(false);
   const [countNtf, setCountNtf] = useState(countNotifikasi);
   const [newAdminNtf, setNewAdminNtf] = useAtom(gs_admin_ntf);
 
@@ -82,54 +80,74 @@ export function Admin_V3_MainLayout({
       console.error("Error fetching user data", error);
     }
   }
+  const [openPop, setOpenPop] = useState(false);
+  const [opened, handlers] = useDisclosure(false);
+  const [openedDrawer, handlersDrawer] = useDisclosure(false);
+  const pathname = usePathname();
 
-  const [opened, { toggle, close }] = useDisclosure(false);
+  const navLinks = [
+    { icon: IconHome, label: "Home", path: "/" },
+    { icon: IconBriefcase, label: "Portfolio", path: "/portfolio" },
+    { icon: IconUser, label: "About Me", path: "/about" },
+    { icon: IconCoin, label: "Price List", path: "/pricing" },
+    { icon: IconMessage, label: "Contact", path: "/contact" },
+  ];
 
+  const isActive = (path: string) => {
+    if (path === "/" && pathname === "/") return true;
+    if (path !== "/" && pathname.startsWith(path)) return true;
+    return false;
+  };
 
   return (
-    <AppShell
-      bg={MainColor.darkblue}
-      padding={"md"}
-      navbarOffsetBreakpoint="md"
-      navbar={
-        <Navbar
-          p="md"
-          hiddenBreakpoint="md"
-          hidden={!opened}
-          width={{ base: 250 }}
-          bg={AccentColor.darkblue}
-          style={{ borderColor: "transparent", transition: " ease 1s" }}
-          height={"93vh"}
-        >
-          <Navbar.Section
-            h={"88vh"}
-            grow
-            component={ScrollArea}
-            style={{ color: "white", transition: "1s" }}
+    <>
+      <AppShell
+        bg={MainColor.darkblue}
+        padding={"md"}
+        navbarOffsetBreakpoint="md"
+        navbar={
+          <Navbar
+            p="md"
+            hiddenBreakpoint="md"
+            hidden={!opened}
+            width={{ base: 250 }}
+            bg={AccentColor.darkblue}
+            style={{ borderColor: "transparent", transition: " ease 1s" }}
+            height={"93vh"}
           >
-            <Stack style={{ color: "white" }} mb={"lg"}>
-              <Admin_UiNavbar
-                userRoleId={userRoleId as any}
-                activeId={activeId as any}
-                activeChildId={activeChildId as any}
-                setActiveId={setActiveId}
-                setActiveChildId={setActiveChildId}
-              />
-            </Stack>
-          </Navbar.Section>
+            <Navbar.Section
+              h={"88vh"}
+              grow
+              component={ScrollArea}
+              style={{ color: "white", transition: "1s" }}
+            >
+              <Stack style={{ color: "white" }} mb={"lg"}>
+                {!dataUser ? (
+                  <Admin_V3_SkeletonNavbar />
+                ) : (
+                  <Admin_UiNavbar
+                    userRoleId={userRoleId as any}
+                    activeId={activeId as any}
+                    activeChildId={activeChildId as any}
+                    setActiveId={setActiveId}
+                    setActiveChildId={setActiveChildId}
+                  />
+                )}
+              </Stack>
+            </Navbar.Section>
 
-          <Navbar.Section h="5">
-            <Stack>
-              <Divider />
-              <Group position="center">
-                <Text fs={"italic"} c={"white"} fz={"xs"}>
-                  V {version}
-                </Text>
-              </Group>
-            </Stack>
-          </Navbar.Section>
+            <Navbar.Section h="5">
+              <Stack>
+                <Divider />
+                <Group position="center">
+                  <Text fs={"italic"} c={"white"} fz={"xs"}>
+                    V {version}
+                  </Text>
+                </Group>
+              </Stack>
+            </Navbar.Section>
 
-          {/* <Box  style={{ flex: "1" }}>
+            {/* <Box  style={{ flex: "1" }}>
             <Stack spacing="xs">
               {navLinks.map((link) => (
                 <Anchor
@@ -163,51 +181,85 @@ export function Admin_V3_MainLayout({
               ))}
             </Stack>
           </Box> */}
+          </Navbar>
+        }
+        header={
+          <Header height={"7vh"} px="md" bg={AccentColor.darkblue}>
+            <Group style={{ height: "100%" }} position="apart">
+              <MediaQuery largerThan="md" styles={{ display: "none" }}>
+                <Burger
+                  disabled={!dataUser}
+                  opened={opened}
+                  onClick={handlers.toggle}
+                  size="sm"
+                  color={!dataUser ? "gray" : AccentColor.white}
+                />
+              </MediaQuery>
 
-          {/* <Box mt="auto">
-            <Divider my="sm" />
-            <Group position="center" mt="md">
-              <ThemeIcon size={36} radius="xl" color="blue">
-                <IconBrandGithub size={18} />
-              </ThemeIcon>
-              <ThemeIcon size={36} radius="xl" color="blue">
-                <IconBrandLinkedin size={18} />
-              </ThemeIcon>
-              <ThemeIcon size={36} radius="xl" color="blue">
-                <IconMail size={18} />
-              </ThemeIcon>
-            </Group>
-          </Box> */}
-        </Navbar>
-      }
-      header={
-        <Header
-          height={"7vh"}
-          px="md"
-          bg={AccentColor.darkblue}
-          //   style={{ border: "none" }}
-        >
-          <Group style={{ height: "100%" }} position="apart">
-            <MediaQuery largerThan="md" styles={{ display: "none" }}>
-              <Burger
-                disabled={!dataUser}
-                opened={opened}
-                onClick={toggle}
-                size="sm"
-                color={!dataUser ? "gray" : AccentColor.white}
+              <Text size="lg" weight={700} c={MainColor.white}>
+                HIMPI DASHBOARD
+              </Text>
+
+              <Admin_V3_ComponentButtonUserCircle
+                dataUser={dataUser as any}
+                openPop={openPop}
+                setOpenPop={setOpenPop}
+                setNavbarOpen={handlers.close}
+                setDrawerNotifikasi={handlersDrawer.toggle}
               />
-            </MediaQuery>
+            </Group>
+          </Header>
+        }
+      >
+        {children}
+      </AppShell>
 
-            <Text size="lg" weight={700} c={MainColor.white}>
-              HIMPI DASHBOARD
+      <Drawer
+        styles={{
+          content: {
+            backgroundColor: AccentColor.blue,
+            color: AccentColor.white,
+          },
+          header: {
+            backgroundColor: AccentColor.darkblue,
+            color: AccentColor.white,
+          },
+          close: {
+            color: AccentColor.white,
+            "&:hover": {
+              backgroundColor: AccentColor.blue,
+              color: AccentColor.white,
+            },
+          },
+        }}
+        title={
+          <Group position="apart">
+            <Text fw={"bold"} fz={"lg"}>
+              Notifikasi
             </Text>
-
-            <Admin_V3_ComponentButtonUserCircle dataUser={dataUser as any} />
           </Group>
-        </Header>
-      }
-    >
-      {children}
-    </AppShell>
+        }
+        opened={openedDrawer}
+        onClose={handlersDrawer.toggle}
+        position="right"
+        size={"sm"}
+      >
+        On Maintenance . . .
+        {/* <ComponentAdmin_UIDrawerNotifikasi
+                newAdminNtf={newAdminNtf}
+                listNotifikasi={dataNotifikasi}
+                onChangeNavbar={(val: { id: string; childId: string }) => {
+                  setActiveId(val.id as any);
+                  setActiveChildId(val.childId);
+                }}
+                onToggleNavbar={(val: any) => {
+                  setDrawerNotifikasi(val);
+                }}
+                onLoadCountNotif={(val: any) => {
+                  setCountNtf(val);
+                }}
+              /> */}
+      </Drawer>
+    </>
   );
 }

src/app_modules/admin/_components_v3/skeleton_navbar.tsx

@@ -0,0 +1,32 @@
+import { Box, NavLink, Text } from "@mantine/core";
+import _ from "lodash";
+import { newListAdminPage } from "../new_list_page";
+
+export function Admin_V3_SkeletonNavbar() {
+  const listPage = newListAdminPage.slice(0, -1);
+  return (
+    <>
+      {listPage.map((parent) => (
+        <Box key={parent.id}>
+          <NavLink
+            disabled
+            style={{
+              color: "gray",
+              transition: "0.5s",
+            }}
+            sx={{
+              ":hover": {
+                backgroundColor: "transparent",
+              },
+            }}
+            label={<Text>{parent.name}</Text>}
+            icon={parent.icon}
+          >
+            {!_.isEmpty(parent.child) &&
+              parent.child.map((child) => <Box key={child.id} />)}
+          </NavLink>
+        </Box>
+      ))}
+    </>
+  );
+}

src/app_modules/admin/main_dashboard/main/view.tsx

@@ -16,18 +16,15 @@ export default function AdminMain() {
   const [countUser, setCountUser] = useState<number | null>(null);
   const [countPortofolio, setCountPortofolio] = useState<number | null>(null);
 
-  // useShallowEffect(() => {
-  //   onLoadDataUser();
-  //   onLoadDataPortofolio();
-  // }, []);
+  useShallowEffect(() => {
+    onLoadDataUser();
+    onLoadDataPortofolio();
+  }, []);
 
   async function onLoadDataUser() {
     try {
       const response = await apiGetCountUserActive();
       if (response) {
-        // console.log(response.data);
-        // console.log(typeof response.data);
-        // console.log( response);
         setCountUser(response.data);
       }