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"} />
@@ -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

@@ -9,6 +9,7 @@ import {
   AppShell,
   Burger,
   Divider,
+  Drawer,
   Group,
   Header,
   MediaQuery,
@@ -16,7 +17,7 @@ import {
   ScrollArea,
   Stack,
   Text,
-    useMantineTheme
+  useMantineTheme,
 } from "@mantine/core";
 import { useDisclosure, useShallowEffect } from "@mantine/hooks";
 import {
@@ -24,20 +25,19 @@ import {
   IconCoin,
   IconHome,
   IconMessage,
-    IconUser
+  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 {
+import { Admin_UiNavbar } from "../_admin_global";
-    Admin_UiNavbar
-} from "../_admin_global";
 import {
   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,11 +80,27 @@ 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"}
@@ -108,6 +122,9 @@ export function Admin_V3_MainLayout({
               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}
@@ -115,6 +132,7 @@ export function Admin_V3_MainLayout({
                     setActiveId={setActiveId}
                     setActiveChildId={setActiveChildId}
                   />
+                )}
               </Stack>
             </Navbar.Section>
 
@@ -163,36 +181,16 @@ export function Admin_V3_MainLayout({
               ))}
             </Stack>
           </Box> */}
-
-          {/* <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
+          <Header height={"7vh"} px="md" bg={AccentColor.darkblue}>
-          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}
+                  onClick={handlers.toggle}
                   size="sm"
                   color={!dataUser ? "gray" : AccentColor.white}
                 />
@@ -202,12 +200,66 @@ export function Admin_V3_MainLayout({
                 HIMPI DASHBOARD
               </Text>
 
-            <Admin_V3_ComponentButtonUserCircle dataUser={dataUser as any} />
+              <Admin_V3_ComponentButtonUserCircle
+                dataUser={dataUser as any}
+                openPop={openPop}
+                setOpenPop={setOpenPop}
+                setNavbarOpen={handlers.close}
+                setDrawerNotifikasi={handlersDrawer.toggle}
+              />
             </Group>
           </Header>
         }
       >
         {children}
       </AppShell>
+
+      <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>
+          </Group>
+        }
+        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(() => {
+  useShallowEffect(() => {
-  //   onLoadDataUser();
+    onLoadDataUser();
-  //   onLoadDataPortofolio();
+    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);
       }