fix admin

- responsive ui

src/app_modules/admin/_admin_global/_component/comp_admin_modal.tsx

@@ -1,6 +1,5 @@
 import { AdminColor } from "@/app_modules/_global/color/color_pallet";
 import { Modal } from "@mantine/core";
-import { reject } from "lodash";
 
 export function Admin_ComponentModal({
   children,
@@ -15,7 +14,7 @@ export function Admin_ComponentModal({
   opened: boolean;
   onClose: () => void;
   size?: "sm" | "md" | "lg" | "xl";
-  title: any;
+  title?: any;
   withCloseButton?: boolean | undefined;
   closeOnClickOutside?: boolean | undefined;
 }) {

src/app_modules/admin/_admin_global/_component/comp_button_user_on_navbar.tsx

@@ -37,7 +37,7 @@ export function Admin_ComponentButtonUserCircle({
 
   async function onClickLogout() {
     setLoadingLogout(true);
-    const res = await fetch(`/api/auth/logout?id=${dataUser.id}`, {
+    const res = await fetch(`/api/auth/logout?id=${dataUser?.id}`, {
       method: "GET",
     });
 
@@ -69,7 +69,7 @@ export function Admin_ComponentButtonUserCircle({
                 <IconUser />
               </Grid.Col>
               <Grid.Col span={"auto"}>
-                <Text lineClamp={1}>{dataUser.username}</Text>
+                <Text lineClamp={1}>{dataUser?.username}</Text>
               </Grid.Col>
             </Grid>
 
@@ -78,7 +78,7 @@ export function Admin_ComponentButtonUserCircle({
                 <IconPhone />
               </Grid.Col>
               <Grid.Col span={"auto"}>
-                <Text lineClamp={1}>+{dataUser.nomor}</Text>
+                <Text lineClamp={1}>+{dataUser?.nomor}</Text>
               </Grid.Col>
             </Grid>
 
@@ -208,7 +208,7 @@ export function Admin_ComponentButtonUserCircle({
                 <IconUser />
               </Grid.Col>
               <Grid.Col span={"auto"}>
-                <Text lineClamp={1}>{dataUser.username}</Text>
+                <Text lineClamp={1}>{dataUser?.username}</Text>
               </Grid.Col>
             </Grid>
           </Menu.Item>
@@ -218,7 +218,7 @@ export function Admin_ComponentButtonUserCircle({
                 <IconPhone />
               </Grid.Col>
               <Grid.Col span={"auto"}>
-                <Text lineClamp={1}>+{dataUser.nomor}</Text>
+                <Text lineClamp={1}>+{dataUser?.nomor}</Text>
               </Grid.Col>
             </Grid>
           </Menu.Item>

src/app_modules/admin/_admin_global/_ui/ui_navbar_admin.tsx

@@ -14,7 +14,7 @@ export default function Admin_UiNavbar({
   setActiveId,
   setActiveChildId,
 }: {
-  userRoleId: string;
+  userRoleId: string | null;
   activeId: string;
   activeChildId: string;
   setActiveId: (val: any) => void;
@@ -199,5 +199,5 @@ export default function Admin_UiNavbar({
     </Box>
   ));
 
-  return userRoleId == "2" ? adminNavbar : developerNavbar;
+  return userRoleId == "3" ? developerNavbar : adminNavbar;
 }

src/app_modules/admin/_admin_global/header_tamplate.tsx

@@ -1,13 +1,13 @@
 "use client";
 
 import { AdminColor } from "@/app_modules/_global/color/color_pallet";
-import { Divider, Stack, Title } from "@mantine/core";
+import { Stack, Title } from "@mantine/core";
 
 export default function ComponentAdminGlobal_HeaderTamplate({name}: {name: string}) {
   return (
     <>
       <Stack spacing={5} >
-        <Title mb={"md"} c={AdminColor.white}>{name ?  name : null}</Title>
+        <Title c={AdminColor.white}>{name ?  name : null}</Title>
       </Stack>
     </>
   );

src/app_modules/admin/_components_v3/comp_button_user_circle.tsx

@@ -0,0 +1,257 @@
+"use client";
+
+import { AccentColor } from "@/app_modules/_global/color";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global";
+import { MODEL_USER } from "@/app_modules/home/model/interface";
+import { Warna } from "@/lib/warna";
+import {
+  ActionIcon,
+  Button,
+  Center,
+  Divider,
+  Group,
+  Popover,
+  SimpleGrid,
+  Stack,
+  Text,
+  Title
+} from "@mantine/core";
+import {
+  IconBell,
+  IconHierarchy2,
+  IconLogout,
+  IconReplaceUser,
+  IconUser,
+  IconUserCircle
+} from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { Admin_ComponentModal } from "../_admin_global/_component/comp_admin_modal";
+
+export function Admin_V3_ComponentButtonUserCircle({
+  dataUser,
+}: {
+  dataUser: MODEL_USER | null;
+}) {
+  const router = useRouter();
+  const [isOpenMenuUser, setOpenMenuUser] = useState(false);
+  const [openPop, setOpenPop] = useState(false);
+  const [openModalLogout, setOpenModalLogout] = useState(false);
+  const [openModalReplaceUser, setOpenModalReplaceUser] = useState(false);
+  const [loadingLogout, setLoadingLogout] = useState(false);
+  const [loadingReplaceUser, setLoadingReplaceUser] = useState(false);
+
+  const listMenu = [
+    {
+      icon: IconUser,
+      label: dataUser?.username,
+    },
+    {
+      icon: IconHierarchy2,
+      label:
+        dataUser?.masterUserRoleId == "2"
+          ? "Admin "
+          : dataUser?.masterUserRoleId == "3"
+            ? "Super Admin"
+            : "",
+    },
+  ];
+
+  const listAction = [
+    {
+      icon: IconBell,
+      label: "Notifikasi",
+      color: "",
+      onClick: () => console.log("Notifikasi"),
+    },
+    {
+      icon: IconReplaceUser,
+      label: "Tampilan user",
+      color: "",
+      onClick: () => setOpenModalReplaceUser(true),
+    },
+    {
+      icon: IconLogout,
+      label: "Logout",
+      color: "red",
+      onClick: () => setOpenModalLogout(true),
+    },
+  ];
+
+  async function onClickLogout() {
+    setLoadingLogout(true);
+    const res = await fetch(`/api/auth/logout?id=${dataUser?.id}`, {
+      method: "GET",
+    });
+
+    const result = await res.json();
+    if (res.status === 200) {
+      ComponentGlobal_NotifikasiBerhasil(result.message);
+      router.push("/", { scroll: false });
+    }
+  }
+
+  return (
+    <>
+      <Popover opened={openPop} onChange={setOpenPop} position="left-start">
+        <Popover.Target>
+          <ActionIcon
+            disabled={!dataUser}
+            variant="transparent"
+            onClick={() => {
+              setOpenPop((o) => !o);
+            }}
+          >
+            <IconUserCircle color={dataUser ? "white" : "gray"} />
+          </ActionIcon>
+        </Popover.Target>
+
+        <Popover.Dropdown
+          style={{
+            backgroundColor: AccentColor.blue,
+            color: AccentColor.white,
+          }}
+        >
+          <Stack>
+            {listMenu.map((e, i) => (
+              <Group key={i}>
+                <e.icon size={18} />
+                <Text lineClamp={1} >{e.label}</Text>
+              </Group>
+            ))}
+
+            <Divider />
+
+            <SimpleGrid cols={3}>
+              {listAction.map((e, i) => (
+                <Center key={i}>
+                  <ActionIcon variant="transparent" onClick={e.onClick}>
+                    <e.icon color={e.color || "white"} />
+                  </ActionIcon>
+                </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)}
+        withCloseButton={false}
+        closeOnClickOutside={false}
+      >
+        <Stack>
+          <Title order={5} c={AccentColor.white}>
+            Anda yakin ingin keluar ?
+          </Title>
+          <Group align="center" position="center">
+            <Button
+              onClick={() => {
+                setOpenPop((o) => !o);
+                setOpenModalLogout(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>
+      </Admin_ComponentModal>
+
+      <Admin_ComponentModal
+        opened={openModalReplaceUser}
+        onClose={() => setOpenModalReplaceUser(false)}
+        withCloseButton={false}
+        closeOnClickOutside={false}
+      >
+        <Stack>
+          <Title order={5} c={AccentColor.white}>
+            Anda yakin ingin keluar ?
+          </Title>
+          <Group align="center" position="center">
+            <Button
+              onClick={() => {
+                setOpenPop((o) => !o);
+                setOpenModalReplaceUser(false);
+              }}
+              radius={50}
+            >
+              Batal
+            </Button>
+            <Button
+              loaderPosition="center"
+              loading={loadingLogout ? true : false}
+              radius={50}
+              bg={AccentColor.softblue}
+              color="blue"
+              onClick={() => {
+                router.push("/dev/home", { scroll: false });
+              }}
+            >
+              User Akses
+            </Button>
+          </Group>
+        </Stack>
+      </Admin_ComponentModal>
+    </>
+  );
+}

src/app_modules/admin/_components_v3/main_layout.tsx

@@ -0,0 +1,213 @@
+"use client";
+
+import { AccentColor, MainColor } from "@/app_modules/_global/color";
+import { apiGetUserById } from "@/app_modules/_global/lib/api_user";
+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
+} from "@mantine/core";
+import { useDisclosure, useShallowEffect } from "@mantine/hooks";
+import {
+    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 {
+    gs_admin_navbar_menu,
+    gs_admin_navbar_subMenu,
+} from "../_admin_global/new_global_state";
+import { Admin_V3_ComponentButtonUserCircle } from "./comp_button_user_circle";
+
+export function Admin_V3_MainLayout({
+  children,
+  userLoginId,
+  countNotifikasi,
+  listNotifikasi,
+  version,
+}: {
+  children: React.ReactNode;
+  userLoginId: string;
+  countNotifikasi: number;
+  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);
+  const [activeChildId, setActiveChildId] = useAtom(gs_admin_navbar_subMenu);
+  const [dataNotifikasi, setDataNotifikasi] =
+    useState<MODEL_NOTIFIKASI[]>(listNotifikasi);
+
+  // Notifikasi
+  const [isDrawerNotifikasi, setDrawerNotifikasi] = useState(false);
+  const [countNtf, setCountNtf] = useState(countNotifikasi);
+  const [newAdminNtf, setNewAdminNtf] = useAtom(gs_admin_ntf);
+
+  useShallowEffect(() => {
+    handleLoadUser();
+  }, []);
+
+  async function handleLoadUser() {
+    try {
+      const response = await apiGetUserById({ id: userLoginId });
+      if (response && response.success) {
+        setDataUser(response.data);
+      } else {
+        console.error("Failed to fetch user data", response);
+        setDataUser(null);
+      }
+    } catch (error) {
+      console.error("Error fetching user data", error);
+    }
+  }
+
+  const [opened, { toggle, close }] = useDisclosure(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" }}
+          >
+            <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="5">
+            <Stack>
+              <Divider />
+              <Group position="center">
+                <Text fs={"italic"} c={"white"} fz={"xs"}>
+                  V {version}
+                </Text>
+              </Group>
+            </Stack>
+          </Navbar.Section>
+
+          {/* <Box  style={{ flex: "1" }}>
+            <Stack spacing="xs">
+              {navLinks.map((link) => (
+                <Anchor
+                  key={link.path}
+                  component={Link}
+                  href={link.path}
+                  color={isActive(link.path) ? "blue" : "dimmed"}
+                  weight={500}
+                  p="xs"
+                  style={{
+                    display: "flex",
+                    borderRadius: theme.radius.sm,
+                    backgroundColor: isActive(link.path)
+                      ? theme.colors.dark[6]
+                      : "transparent",
+                  }}
+                  //   onClick={() => {
+                  //     if (
+                  //       typeof window !== "undefined" &&
+                  //       window.innerWidth < theme.breakpoints.md
+                  //     ) {
+                  //       close();
+                  //     }
+                  //   }}
+                >
+                  <Group>
+                    <link.icon size={18} />
+                    <Text>{link.label}</Text>
+                  </Group>
+                </Anchor>
+              ))}
+            </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
+          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}
+              />
+            </MediaQuery>
+
+            <Text size="lg" weight={700} c={MainColor.white}>
+              HIMPI DASHBOARD
+            </Text>
+
+            <Admin_V3_ComponentButtonUserCircle dataUser={dataUser as any} />
+          </Group>
+        </Header>
+      }
+    >
+      {children}
+    </AppShell>
+  );
+}

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

@@ -16,10 +16,10 @@ 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 {

src/app_modules/admin/splash/splash.tsx

@@ -11,6 +11,7 @@ import {
   gs_admin_navbar_subMenu,
 } from "../_admin_global/new_global_state";
 import { IAdmin_ActivePage } from "../notifikasi/route_setting/type_of_select_page";
+import { AccentColor } from "@/app_modules/_global/color";
 
 export default function SplashDashboardAdmin() {
   const router = useRouter();
@@ -28,7 +29,7 @@ export default function SplashDashboardAdmin() {
     <>
       <Center h={"100vh"}>
         <Stack spacing={0}>
-          <Title>Welcome Admin</Title>
+          <Title c={AccentColor.white}>Welcome Admin</Title>
 
           <AspectRatio ratio={1 / 1} mah={700} maw={700}>
             <Image src={"/aset/logo/logo-hipmi.png"} alt="Logo" />