Fix: admin
Deskripsi: - Fix tampilan navbar
This commit is contained in:
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "hipmi",
|
"name": "hipmi",
|
||||||
"version": "1.0.9",
|
"version": "1.0.10",
|
||||||
"private": true,
|
"private": true,
|
||||||
"prisma": {
|
"prisma": {
|
||||||
"seed": "npx tsx prisma/seed.ts"
|
"seed": "npx tsx prisma/seed.ts"
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
|
import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
|
||||||
|
import { Admin_NewLayout } from "@/app_modules/admin";
|
||||||
import { AdminLayout } from "@/app_modules/admin/main_dashboard";
|
import { AdminLayout } from "@/app_modules/admin/main_dashboard";
|
||||||
import adminNotifikasi_countNotifikasi from "@/app_modules/admin/notifikasi/fun/count/count_is_read";
|
import adminNotifikasi_countNotifikasi from "@/app_modules/admin/notifikasi/fun/count/count_is_read";
|
||||||
import adminNotifikasi_getByUserId from "@/app_modules/admin/notifikasi/fun/get/get_notifikasi_by_user_id";
|
import adminNotifikasi_getByUserId from "@/app_modules/admin/notifikasi/fun/get/get_notifikasi_by_user_id";
|
||||||
@@ -18,13 +19,14 @@ export default async function Layout({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<AdminLayout
|
{/* <AdminLayout
|
||||||
listNotif={listNotif as any}
|
listNotif={listNotif as any}
|
||||||
dataUser={dataUser as any}
|
dataUser={dataUser as any}
|
||||||
countNotifikasi={countNotifikasi}
|
countNotifikasi={countNotifikasi}
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
</AdminLayout>
|
</AdminLayout> */}
|
||||||
|
<Admin_NewLayout user={dataUser as any}>{children}</Admin_NewLayout>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -13,15 +13,13 @@ import {
|
|||||||
Stack,
|
Stack,
|
||||||
Title,
|
Title,
|
||||||
} from "@mantine/core";
|
} from "@mantine/core";
|
||||||
import { useDisclosure } from "@mantine/hooks";
|
|
||||||
import { IconLogout } from "@tabler/icons-react";
|
|
||||||
import { useAtom } from "jotai";
|
import { useAtom } from "jotai";
|
||||||
import { useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
|
|
||||||
export default function Admin_Logout() {
|
export default function Admin_Logout() {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const [opened, { toggle }] = useDisclosure(false);
|
const [opened, setOpened] = useState(false);
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
|
|
||||||
const [kodeId, setKodeId] = useAtom(gs_kodeId);
|
const [kodeId, setKodeId] = useAtom(gs_kodeId);
|
||||||
@@ -43,7 +41,7 @@ export default function Admin_Logout() {
|
|||||||
<>
|
<>
|
||||||
<Modal
|
<Modal
|
||||||
opened={opened}
|
opened={opened}
|
||||||
onClose={toggle}
|
onClose={() => setOpened(false)}
|
||||||
centered
|
centered
|
||||||
withCloseButton={false}
|
withCloseButton={false}
|
||||||
closeOnClickOutside={false}
|
closeOnClickOutside={false}
|
||||||
@@ -53,7 +51,7 @@ export default function Admin_Logout() {
|
|||||||
<Group align="center" position="center">
|
<Group align="center" position="center">
|
||||||
<Button
|
<Button
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
toggle();
|
setOpened(false);
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
}}
|
}}
|
||||||
radius={50}
|
radius={50}
|
||||||
@@ -77,13 +75,9 @@ export default function Admin_Logout() {
|
|||||||
{loading ? (
|
{loading ? (
|
||||||
<Loader color="gray" />
|
<Loader color="gray" />
|
||||||
) : (
|
) : (
|
||||||
<IconLogout
|
<Button radius={"xl"} color={"red"} onClick={() => setOpened(true)}>
|
||||||
color={Warna.merah}
|
Keluar
|
||||||
onClick={() => {
|
</Button>
|
||||||
toggle();
|
|
||||||
setLoading(true);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
)}
|
||||||
</ActionIcon>
|
</ActionIcon>
|
||||||
{/* <Button radius={"xl"} color={"red"} onClick={toggle}>
|
{/* <Button radius={"xl"} color={"red"} onClick={toggle}>
|
||||||
|
|||||||
16
src/app_modules/admin/_admin_global/new_global_state.tsx
Normal file
16
src/app_modules/admin/_admin_global/new_global_state.tsx
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
import { atomWithStorage } from "jotai/utils";
|
||||||
|
|
||||||
|
export const gs_admin_navbar_menu = atomWithStorage<string>(
|
||||||
|
"gs_admin_navbar_menu",
|
||||||
|
"Main"
|
||||||
|
);
|
||||||
|
|
||||||
|
export const gs_admin_navbar_subMenu = atomWithStorage<string | null>(
|
||||||
|
"gs_admin_navbar_submenu",
|
||||||
|
null
|
||||||
|
);
|
||||||
|
|
||||||
|
export const gs_admin_navbar_isActive_dropdown = atomWithStorage<boolean>(
|
||||||
|
"gs_admin_navbar_isActive_dropdown",
|
||||||
|
false
|
||||||
|
);
|
||||||
3
src/app_modules/admin/index.ts
Normal file
3
src/app_modules/admin/index.ts
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
import { Admin_NewLayout } from "./new_layout";
|
||||||
|
|
||||||
|
export { Admin_NewLayout };
|
||||||
@@ -4,10 +4,8 @@ import mqtt_client from "@/util/mqtt_client";
|
|||||||
import {
|
import {
|
||||||
ActionIcon,
|
ActionIcon,
|
||||||
AppShell,
|
AppShell,
|
||||||
Badge,
|
|
||||||
Box,
|
Box,
|
||||||
Burger,
|
Burger,
|
||||||
Card,
|
|
||||||
Center,
|
Center,
|
||||||
Divider,
|
Divider,
|
||||||
Drawer,
|
Drawer,
|
||||||
@@ -17,7 +15,6 @@ import {
|
|||||||
MediaQuery,
|
MediaQuery,
|
||||||
NavLink,
|
NavLink,
|
||||||
Navbar,
|
Navbar,
|
||||||
Paper,
|
|
||||||
ScrollArea,
|
ScrollArea,
|
||||||
Stack,
|
Stack,
|
||||||
Text,
|
Text,
|
||||||
@@ -26,15 +23,12 @@ import {
|
|||||||
} from "@mantine/core";
|
} from "@mantine/core";
|
||||||
import {
|
import {
|
||||||
IconBell,
|
IconBell,
|
||||||
IconCheck,
|
|
||||||
IconChecks,
|
|
||||||
IconCircleDot,
|
IconCircleDot,
|
||||||
IconCircleDotFilled,
|
IconCircleDotFilled,
|
||||||
IconUserSquareRounded,
|
IconUserSquareRounded,
|
||||||
} from "@tabler/icons-react";
|
} from "@tabler/icons-react";
|
||||||
import { useAtom } from "jotai";
|
import { useAtom } from "jotai";
|
||||||
import _ from "lodash";
|
import _ from "lodash";
|
||||||
import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
|
|
||||||
import { useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
import React, { useEffect, useState } from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
import { MODEL_USER } from "../home/model/interface";
|
import { MODEL_USER } from "../home/model/interface";
|
||||||
@@ -46,15 +40,9 @@ import {
|
|||||||
gs_layout_admin_isNavbarOpen,
|
gs_layout_admin_isNavbarOpen,
|
||||||
} from "./global_state";
|
} from "./global_state";
|
||||||
import { listAdminPage } from "./list_page";
|
import { listAdminPage } from "./list_page";
|
||||||
import adminNotifikasi_countNotifikasi from "./notifikasi/fun/count/count_is_read";
|
|
||||||
import adminNotifikasi_getByUserId from "./notifikasi/fun/get/get_notifikasi_by_user_id";
|
import adminNotifikasi_getByUserId from "./notifikasi/fun/get/get_notifikasi_by_user_id";
|
||||||
import adminNotifikasi_funUpdateIsReadById from "./notifikasi/fun/update/fun_update_is_read_by_id";
|
|
||||||
import adminNotifikasi_findRouterJob from "./notifikasi/route_setting/job";
|
|
||||||
import adminNotifikasi_findRouterForum from "./notifikasi/route_setting/forum";
|
|
||||||
import { adminNotifikasi_findRouterVoting } from "./notifikasi/route_setting/voting";
|
|
||||||
import { adminNotifikasi_findRouterEvent } from "./notifikasi/route_setting/event";
|
|
||||||
import adminNotifikasi_findRouterDonasi from "./notifikasi/route_setting/donasi";
|
|
||||||
import { ComponentAdmin_UIDrawerNotifikasi } from "./notifikasi/ui_drawer_notifikasi";
|
import { ComponentAdmin_UIDrawerNotifikasi } from "./notifikasi/ui_drawer_notifikasi";
|
||||||
|
import { AccentColor, MainColor } from "../_global/color";
|
||||||
|
|
||||||
export default function AdminLayout({
|
export default function AdminLayout({
|
||||||
children,
|
children,
|
||||||
@@ -86,6 +74,7 @@ export default function AdminLayout({
|
|||||||
const developerNavbar = listAdminPage.map((e, i) => (
|
const developerNavbar = listAdminPage.map((e, i) => (
|
||||||
<Box key={e.id}>
|
<Box key={e.id}>
|
||||||
<NavLink
|
<NavLink
|
||||||
|
style={{ color: "white" }}
|
||||||
sx={{
|
sx={{
|
||||||
":hover": {
|
":hover": {
|
||||||
backgroundColor: "transparent",
|
backgroundColor: "transparent",
|
||||||
@@ -112,6 +101,7 @@ export default function AdminLayout({
|
|||||||
{e.child.map((v, ii) => (
|
{e.child.map((v, ii) => (
|
||||||
<Box key={v.id}>
|
<Box key={v.id}>
|
||||||
<NavLink
|
<NavLink
|
||||||
|
style={{ color: "white" }}
|
||||||
sx={{
|
sx={{
|
||||||
":hover": {
|
":hover": {
|
||||||
backgroundColor: "transparent",
|
backgroundColor: "transparent",
|
||||||
@@ -144,6 +134,7 @@ export default function AdminLayout({
|
|||||||
const adminNavbar = bukanDeveloper.map((e) => (
|
const adminNavbar = bukanDeveloper.map((e) => (
|
||||||
<Box key={e.id}>
|
<Box key={e.id}>
|
||||||
<NavLink
|
<NavLink
|
||||||
|
style={{ color: "white" }}
|
||||||
opened={e?.id === activeId && isNavbarOpen ? true : false}
|
opened={e?.id === activeId && isNavbarOpen ? true : false}
|
||||||
sx={{
|
sx={{
|
||||||
":hover": {
|
":hover": {
|
||||||
@@ -220,9 +211,13 @@ export default function AdminLayout({
|
|||||||
navbarOffsetBreakpoint="md"
|
navbarOffsetBreakpoint="md"
|
||||||
asideOffsetBreakpoint="sm"
|
asideOffsetBreakpoint="sm"
|
||||||
header={
|
header={
|
||||||
<Header height={"6vh"} bg={"gray.2"}>
|
<Header
|
||||||
|
height={"6vh"}
|
||||||
|
bg={AccentColor.darkblue}
|
||||||
|
style={{ color: "white", borderStyle: "none" }}
|
||||||
|
>
|
||||||
{/* Web View */}
|
{/* Web View */}
|
||||||
<MediaQuery smallerThan={"md"} styles={{ display: "none" }}>
|
<MediaQuery smallerThan={"sm"} styles={{ display: "none" }}>
|
||||||
<Group position="apart" align="center" h={"100%"} px={"md"}>
|
<Group position="apart" align="center" h={"100%"} px={"md"}>
|
||||||
<Title order={3}>Dashboard Admin</Title>
|
<Title order={3}>Dashboard Admin</Title>
|
||||||
|
|
||||||
@@ -238,7 +233,7 @@ export default function AdminLayout({
|
|||||||
processing
|
processing
|
||||||
label={<Text fz={10}>{countNotif}</Text>}
|
label={<Text fz={10}>{countNotif}</Text>}
|
||||||
>
|
>
|
||||||
<IconBell />
|
<IconBell color="white" />
|
||||||
</Indicator>
|
</Indicator>
|
||||||
</ActionIcon>
|
</ActionIcon>
|
||||||
<Divider orientation="vertical" color="dark" />
|
<Divider orientation="vertical" color="dark" />
|
||||||
@@ -251,7 +246,7 @@ export default function AdminLayout({
|
|||||||
</MediaQuery>
|
</MediaQuery>
|
||||||
|
|
||||||
{/* Mobile View */}
|
{/* Mobile View */}
|
||||||
<MediaQuery largerThan="md" styles={{ display: "none" }}>
|
<MediaQuery largerThan="sm" styles={{ display: "none" }}>
|
||||||
<Group h={50} align="center" px={"md"} position="apart">
|
<Group h={50} align="center" px={"md"} position="apart">
|
||||||
<Burger
|
<Burger
|
||||||
opened={opened}
|
opened={opened}
|
||||||
@@ -270,17 +265,21 @@ export default function AdminLayout({
|
|||||||
</Header>
|
</Header>
|
||||||
}
|
}
|
||||||
navbar={
|
navbar={
|
||||||
<MediaQuery smallerThan={"md"} styles={{ display: "none" }}>
|
<MediaQuery smallerThan={"sm"} styles={{ display: "none" }}>
|
||||||
<Navbar
|
<Navbar
|
||||||
h={"94vh"}
|
h={"94vh"}
|
||||||
width={{ lg: 250, md: 200, sm: 200, base: 250 }}
|
width={{ lg: 250, md: 200, sm: 200, base: 250 }}
|
||||||
hiddenBreakpoint="md"
|
hiddenBreakpoint="md"
|
||||||
hidden={!opened}
|
hidden={!opened}
|
||||||
p="xs"
|
p="xs"
|
||||||
bg={"gray.2"}
|
bg={AccentColor.darkblue}
|
||||||
>
|
>
|
||||||
<Navbar.Section grow component={ScrollArea}>
|
<Navbar.Section
|
||||||
<Stack>
|
grow
|
||||||
|
component={ScrollArea}
|
||||||
|
style={{ color: "white", transition: "0.5s" }}
|
||||||
|
>
|
||||||
|
<Stack style={{ color: "white" }}>
|
||||||
{userRoleId === "3" ? developerNavbar : adminNavbar}
|
{userRoleId === "3" ? developerNavbar : adminNavbar}
|
||||||
</Stack>
|
</Stack>
|
||||||
</Navbar.Section>
|
</Navbar.Section>
|
||||||
@@ -288,7 +287,7 @@ export default function AdminLayout({
|
|||||||
<Stack>
|
<Stack>
|
||||||
<Divider />
|
<Divider />
|
||||||
<Group position="apart">
|
<Group position="apart">
|
||||||
<Text fs={"italic"} c={"gray"} fz={"xs"}>
|
<Text fs={"italic"} c={"white"} fz={"xs"}>
|
||||||
V 1.0.0
|
V 1.0.0
|
||||||
</Text>
|
</Text>
|
||||||
<Admin_Logout />
|
<Admin_Logout />
|
||||||
@@ -345,5 +344,3 @@ export default function AdminLayout({
|
|||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
423
src/app_modules/admin/new_layout.tsx
Normal file
423
src/app_modules/admin/new_layout.tsx
Normal file
@@ -0,0 +1,423 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import {
|
||||||
|
ActionIcon,
|
||||||
|
AppShell,
|
||||||
|
Box,
|
||||||
|
Center,
|
||||||
|
Divider,
|
||||||
|
Drawer,
|
||||||
|
Grid,
|
||||||
|
Group,
|
||||||
|
Menu,
|
||||||
|
Navbar,
|
||||||
|
NavLink,
|
||||||
|
ScrollArea,
|
||||||
|
Stack,
|
||||||
|
Text,
|
||||||
|
Title
|
||||||
|
} from "@mantine/core";
|
||||||
|
import { useMediaQuery } from "@mantine/hooks";
|
||||||
|
import {
|
||||||
|
IconBell,
|
||||||
|
IconCircleDot,
|
||||||
|
IconCircleDotFilled,
|
||||||
|
IconPhone,
|
||||||
|
IconUser,
|
||||||
|
IconUserCircle
|
||||||
|
} from "@tabler/icons-react";
|
||||||
|
import { useAtom } from "jotai";
|
||||||
|
import _ from "lodash";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import { useState } from "react";
|
||||||
|
import { AccentColor, MainColor } from "../_global/color";
|
||||||
|
import { MODEL_USER } from "../home/model/interface";
|
||||||
|
import Admin_Logout from "./_admin_global/logout";
|
||||||
|
import {
|
||||||
|
gs_admin_navbar_isActive_dropdown,
|
||||||
|
gs_admin_navbar_menu,
|
||||||
|
gs_admin_navbar_subMenu,
|
||||||
|
} from "./_admin_global/new_global_state";
|
||||||
|
import { newListAdminPage } from "./new_list_page";
|
||||||
|
import { ComponentAdmin_UIDrawerNotifikasi } from "./notifikasi/ui_drawer_notifikasi";
|
||||||
|
|
||||||
|
export function Admin_NewLayout({
|
||||||
|
children,
|
||||||
|
user,
|
||||||
|
}: {
|
||||||
|
children: React.ReactNode;
|
||||||
|
user: MODEL_USER;
|
||||||
|
}) {
|
||||||
|
const matches = useMediaQuery("(min-width: 1024px)");
|
||||||
|
const [dataUser, setDataUser] = useState(user);
|
||||||
|
const userRoleId = dataUser.masterUserRoleId;
|
||||||
|
const [opened, setOpened] = useState(false);
|
||||||
|
|
||||||
|
// Notifikasi
|
||||||
|
const [isDrawerNotifikasi, setDrawerNotifikasi] = useState(false);
|
||||||
|
const [isNavbarOpen, setIsNavbarOpen] = useState(false);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<AppShell
|
||||||
|
padding="md"
|
||||||
|
navbarOffsetBreakpoint={1024}
|
||||||
|
asideOffsetBreakpoint="sm"
|
||||||
|
navbar={
|
||||||
|
<Navbar
|
||||||
|
width={{ lg: 250, md: 200, base: 250 }}
|
||||||
|
hiddenBreakpoint={1024}
|
||||||
|
hidden={!opened}
|
||||||
|
p="xs"
|
||||||
|
bg={AccentColor.darkblue}
|
||||||
|
>
|
||||||
|
{/* Header */}
|
||||||
|
<Navbar.Section style={{ color: "white" }}>
|
||||||
|
<Stack spacing={"lg"}>
|
||||||
|
<Grid>
|
||||||
|
<Grid.Col span={7}>
|
||||||
|
<Title order={3} lineClamp={1}>
|
||||||
|
{userRoleId == "2" ? "Admin" : "Developer"}
|
||||||
|
</Title>
|
||||||
|
</Grid.Col>
|
||||||
|
|
||||||
|
<Grid.Col span={5}>
|
||||||
|
<Stack h={"100%"} justify="center">
|
||||||
|
<Group position="right" spacing={5}>
|
||||||
|
<ButtonUserCircle dataUser={dataUser} />
|
||||||
|
|
||||||
|
<ActionIcon
|
||||||
|
variant="transparent"
|
||||||
|
onClick={() => setDrawerNotifikasi(true)}
|
||||||
|
>
|
||||||
|
<IconBell color="white" />
|
||||||
|
</ActionIcon>
|
||||||
|
</Group>
|
||||||
|
</Stack>
|
||||||
|
</Grid.Col>
|
||||||
|
</Grid>
|
||||||
|
<Divider color="white" />
|
||||||
|
</Stack>
|
||||||
|
</Navbar.Section>
|
||||||
|
|
||||||
|
{/* Main */}
|
||||||
|
<Navbar.Section
|
||||||
|
grow
|
||||||
|
component={ScrollArea}
|
||||||
|
style={{ color: "white", transition: "0.5s" }}
|
||||||
|
>
|
||||||
|
<Stack style={{ color: "white" }}>
|
||||||
|
<NavbarAdmin userRoleId={userRoleId} />
|
||||||
|
</Stack>
|
||||||
|
</Navbar.Section>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<Navbar.Section>
|
||||||
|
<Stack>
|
||||||
|
<Divider />
|
||||||
|
<Group position="center">
|
||||||
|
<Text fs={"italic"} c={"white"} fz={"xs"}>
|
||||||
|
V 1.0.0
|
||||||
|
</Text>
|
||||||
|
</Group>
|
||||||
|
</Stack>
|
||||||
|
</Navbar.Section>
|
||||||
|
</Navbar>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{matches ? (
|
||||||
|
children
|
||||||
|
) : (
|
||||||
|
<Stack align="center" justify="center" h={"100%"}>
|
||||||
|
<Title>Sorry !</Title>
|
||||||
|
<Title order={4} align="center">
|
||||||
|
View Only Available For Desktop
|
||||||
|
</Title>
|
||||||
|
</Stack>
|
||||||
|
)}
|
||||||
|
</AppShell>
|
||||||
|
|
||||||
|
{/* Notifikasi */}
|
||||||
|
<Drawer
|
||||||
|
title={
|
||||||
|
<Group position="apart">
|
||||||
|
<Text fw={"bold"} fz={"lg"}>
|
||||||
|
Notifikasi
|
||||||
|
</Text>
|
||||||
|
</Group>
|
||||||
|
}
|
||||||
|
opened={isDrawerNotifikasi}
|
||||||
|
onClose={() => setDrawerNotifikasi(false)}
|
||||||
|
position="right"
|
||||||
|
size={"xs"}
|
||||||
|
>
|
||||||
|
<ComponentAdmin_UIDrawerNotifikasi
|
||||||
|
data={[]}
|
||||||
|
onLoadReadNotif={(val: any) => {
|
||||||
|
// setDataNotif(val);
|
||||||
|
}}
|
||||||
|
onChangeNavbar={(val: any) => {
|
||||||
|
// setActiveId(val.id);
|
||||||
|
// setActiveChild(val.childId);
|
||||||
|
}}
|
||||||
|
onToggleNavbar={setIsNavbarOpen}
|
||||||
|
onLoadCountNotif={(val: any) => {
|
||||||
|
// setCountNotif(val);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Drawer>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function NavbarAdmin({ userRoleId }: { userRoleId: string }) {
|
||||||
|
const router = useRouter();
|
||||||
|
// global state
|
||||||
|
const [openDropdown, setOpenDropdown] = useAtom(
|
||||||
|
gs_admin_navbar_isActive_dropdown
|
||||||
|
);
|
||||||
|
|
||||||
|
const [activeId, setActiveId] = useAtom(gs_admin_navbar_menu);
|
||||||
|
const [activeChildId, setActiveChildId] = useAtom(gs_admin_navbar_subMenu);
|
||||||
|
|
||||||
|
// Kalau fix developer navbar, fix juga navbar admin, dan berlaku sebaliknya
|
||||||
|
const developerNavbar = newListAdminPage.map((parent) => (
|
||||||
|
<Box key={parent.id}>
|
||||||
|
<NavLink
|
||||||
|
opened={openDropdown && activeId === parent.id}
|
||||||
|
styles={{
|
||||||
|
icon: {
|
||||||
|
color: activeId === parent.id ? MainColor.yellow : "white",
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
color: activeId === parent.id ? MainColor.yellow : "white",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
style={{
|
||||||
|
color: "white",
|
||||||
|
transition: "0.5s",
|
||||||
|
}}
|
||||||
|
sx={{
|
||||||
|
":hover": {
|
||||||
|
backgroundColor: "transparent",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
fw={activeId === parent.id ? "bold" : "normal"}
|
||||||
|
label={<Text>{parent.name}</Text>}
|
||||||
|
icon={parent.icon}
|
||||||
|
onClick={() => {
|
||||||
|
setActiveId(parent.id);
|
||||||
|
setActiveChildId("");
|
||||||
|
|
||||||
|
parent.path == "" ? setActiveChildId(parent.child[0].id) : "";
|
||||||
|
parent.path == ""
|
||||||
|
? router.push(parent.child[0].path)
|
||||||
|
: router.push(parent.path);
|
||||||
|
|
||||||
|
openDropdown && activeId === parent.id
|
||||||
|
? setOpenDropdown(false)
|
||||||
|
: setOpenDropdown(true);
|
||||||
|
}}
|
||||||
|
// active={activeId === parent.id}
|
||||||
|
>
|
||||||
|
{/* Navlink Children */}
|
||||||
|
{!_.isEmpty(parent.child) &&
|
||||||
|
parent.child.map((child) => (
|
||||||
|
<Box key={child.id}>
|
||||||
|
<NavLink
|
||||||
|
styles={{
|
||||||
|
icon: {
|
||||||
|
color:
|
||||||
|
activeChildId === child.id ? MainColor.yellow : "white",
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
color:
|
||||||
|
activeChildId === child.id ? MainColor.yellow : "white",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
style={{
|
||||||
|
color: "white",
|
||||||
|
transition: "0.5s",
|
||||||
|
}}
|
||||||
|
sx={{
|
||||||
|
":hover": {
|
||||||
|
backgroundColor: "transparent",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
fw={activeChildId === child.id ? "bold" : "normal"}
|
||||||
|
label={<Text>{child.name}</Text>}
|
||||||
|
icon={
|
||||||
|
activeChildId === child.id ? (
|
||||||
|
<IconCircleDotFilled size={10} />
|
||||||
|
) : (
|
||||||
|
<IconCircleDot size={10} />
|
||||||
|
)
|
||||||
|
}
|
||||||
|
onClick={() => {
|
||||||
|
setActiveChildId(child.id);
|
||||||
|
router.push(child.path);
|
||||||
|
}}
|
||||||
|
active={activeId === child.id}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
))}
|
||||||
|
</NavLink>
|
||||||
|
</Box>
|
||||||
|
));
|
||||||
|
|
||||||
|
const bukanDeveloper = newListAdminPage.slice(0, -1);
|
||||||
|
const adminNavbar = bukanDeveloper.map((parent) => (
|
||||||
|
<Box key={parent.id}>
|
||||||
|
<NavLink
|
||||||
|
opened={openDropdown && activeId === parent.id}
|
||||||
|
styles={{
|
||||||
|
icon: {
|
||||||
|
color: activeId === parent.id ? MainColor.yellow : "white",
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
color: activeId === parent.id ? MainColor.yellow : "white",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
style={{
|
||||||
|
color: "white",
|
||||||
|
transition: "0.5s",
|
||||||
|
}}
|
||||||
|
sx={{
|
||||||
|
":hover": {
|
||||||
|
backgroundColor: "transparent",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
fw={activeId === parent.id ? "bold" : "normal"}
|
||||||
|
label={<Text>{parent.name}</Text>}
|
||||||
|
icon={parent.icon}
|
||||||
|
onClick={() => {
|
||||||
|
setActiveId(parent.id);
|
||||||
|
setActiveChildId("");
|
||||||
|
|
||||||
|
parent.path == "" ? setActiveChildId(parent.child[0].id) : "";
|
||||||
|
parent.path == ""
|
||||||
|
? router.push(parent.child[0].path)
|
||||||
|
: router.push(parent.path);
|
||||||
|
|
||||||
|
openDropdown && activeId === parent.id
|
||||||
|
? setOpenDropdown(false)
|
||||||
|
: setOpenDropdown(true);
|
||||||
|
}}
|
||||||
|
// active={activeId === parent.id}
|
||||||
|
>
|
||||||
|
{/* Navlink Children */}
|
||||||
|
{!_.isEmpty(parent.child) &&
|
||||||
|
parent.child.map((child) => (
|
||||||
|
<Box key={child.id}>
|
||||||
|
<NavLink
|
||||||
|
styles={{
|
||||||
|
icon: {
|
||||||
|
color:
|
||||||
|
activeChildId === child.id ? MainColor.yellow : "white",
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
color:
|
||||||
|
activeChildId === child.id ? MainColor.yellow : "white",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
style={{
|
||||||
|
color: "white",
|
||||||
|
transition: "0.5s",
|
||||||
|
}}
|
||||||
|
sx={{
|
||||||
|
":hover": {
|
||||||
|
backgroundColor: "transparent",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
fw={activeChildId === child.id ? "bold" : "normal"}
|
||||||
|
label={<Text>{child.name}</Text>}
|
||||||
|
icon={
|
||||||
|
activeChildId === child.id ? (
|
||||||
|
<IconCircleDotFilled size={10} />
|
||||||
|
) : (
|
||||||
|
<IconCircleDot size={10} />
|
||||||
|
)
|
||||||
|
}
|
||||||
|
onClick={() => {
|
||||||
|
setActiveChildId(child.id);
|
||||||
|
router.push(child.path);
|
||||||
|
}}
|
||||||
|
active={activeId === child.id}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
))}
|
||||||
|
</NavLink>
|
||||||
|
</Box>
|
||||||
|
));
|
||||||
|
|
||||||
|
return userRoleId == "2" ? adminNavbar : developerNavbar;
|
||||||
|
}
|
||||||
|
|
||||||
|
function ButtonUserCircle({ dataUser }: { dataUser: MODEL_USER }) {
|
||||||
|
const [isOpenMenuUser, setOpenMenuUser] = useState(false);
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Menu
|
||||||
|
withArrow
|
||||||
|
arrowPosition="center"
|
||||||
|
opened={isOpenMenuUser}
|
||||||
|
onChange={setOpenMenuUser}
|
||||||
|
shadow="md"
|
||||||
|
width={250}
|
||||||
|
position="bottom-start"
|
||||||
|
styles={{
|
||||||
|
dropdown: {
|
||||||
|
backgroundColor: AccentColor.blue,
|
||||||
|
border: `1px solid ${AccentColor.skyblue}`,
|
||||||
|
},
|
||||||
|
item: {
|
||||||
|
color: "white",
|
||||||
|
":hover": {
|
||||||
|
backgroundColor: "gray",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
arrow: {
|
||||||
|
borderTopColor: AccentColor.skyblue,
|
||||||
|
borderLeftColor: AccentColor.skyblue,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Menu.Target>
|
||||||
|
<ActionIcon variant="transparent" onClick={() => console.log("test")}>
|
||||||
|
<IconUserCircle color="white" />
|
||||||
|
</ActionIcon>
|
||||||
|
</Menu.Target>
|
||||||
|
|
||||||
|
<Menu.Dropdown>
|
||||||
|
<Stack spacing={5} px={"xs"}>
|
||||||
|
<Menu.Item>
|
||||||
|
<Grid>
|
||||||
|
<Grid.Col span={2}>
|
||||||
|
<IconUser />
|
||||||
|
</Grid.Col>
|
||||||
|
<Grid.Col span={"auto"}>
|
||||||
|
<Text lineClamp={1}>{dataUser.username}</Text>
|
||||||
|
</Grid.Col>
|
||||||
|
</Grid>
|
||||||
|
</Menu.Item>
|
||||||
|
<Menu.Item>
|
||||||
|
<Grid>
|
||||||
|
<Grid.Col span={2}>
|
||||||
|
<IconPhone />
|
||||||
|
</Grid.Col>
|
||||||
|
<Grid.Col span={"auto"}>
|
||||||
|
<Text lineClamp={1}>+{dataUser.nomor}</Text>
|
||||||
|
</Grid.Col>
|
||||||
|
</Grid>
|
||||||
|
</Menu.Item>
|
||||||
|
|
||||||
|
<Menu.Divider />
|
||||||
|
<Center py={"xs"}>
|
||||||
|
<Admin_Logout />
|
||||||
|
</Center>
|
||||||
|
</Stack>
|
||||||
|
</Menu.Dropdown>
|
||||||
|
</Menu>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
308
src/app_modules/admin/new_list_page.tsx
Normal file
308
src/app_modules/admin/new_list_page.tsx
Normal file
@@ -0,0 +1,308 @@
|
|||||||
|
import { RouterAdminColab } from "@/app/lib/router_admin/router_admin_colab";
|
||||||
|
import { RouterAdminDeveloper } from "@/app/lib/router_admin/router_admin_developer";
|
||||||
|
import { RouterAdminDonasi } from "@/app/lib/router_admin/router_admin_donasi";
|
||||||
|
import { RouterAdminEvent } from "@/app/lib/router_admin/router_admin_event";
|
||||||
|
import { RouterAdminForum } from "@/app/lib/router_admin/router_admin_forum";
|
||||||
|
import { RouterAdminInvestasi } from "@/app/lib/router_admin/router_admin_investasi";
|
||||||
|
import { RouterAdminJob } from "@/app/lib/router_admin/router_admin_job";
|
||||||
|
import { RouterAdminMap } from "@/app/lib/router_admin/router_admin_map";
|
||||||
|
import { RouterAdminVote } from "@/app/lib/router_admin/router_admin_vote";
|
||||||
|
import { RouterAdminUserAccess } from "@/app/lib/router_admin/router_admn_user_acces";
|
||||||
|
import { RouterAdminAppInformation } from "@/app/lib/router_admin/router_app_information";
|
||||||
|
import { RouterAdminDashboard } from "@/app/lib/router_hipmi/router_admin";
|
||||||
|
import {
|
||||||
|
IconAffiliate,
|
||||||
|
IconBriefcase,
|
||||||
|
IconDashboard,
|
||||||
|
IconDeviceMobile,
|
||||||
|
IconHeartHandshake,
|
||||||
|
IconHome,
|
||||||
|
IconMap2,
|
||||||
|
IconMessages,
|
||||||
|
IconMoneybag,
|
||||||
|
IconPackageImport,
|
||||||
|
IconPresentation,
|
||||||
|
IconUserCog,
|
||||||
|
} from "@tabler/icons-react";
|
||||||
|
|
||||||
|
export const newListAdminPage = [
|
||||||
|
// Main Dashboard
|
||||||
|
{
|
||||||
|
id: "Main",
|
||||||
|
name: "Main Dashboard",
|
||||||
|
path: RouterAdminDashboard.main_admin,
|
||||||
|
icon: <IconHome />,
|
||||||
|
child: [],
|
||||||
|
},
|
||||||
|
|
||||||
|
// Investasi
|
||||||
|
{
|
||||||
|
id: "Investasi",
|
||||||
|
name: "Investasi",
|
||||||
|
path: "",
|
||||||
|
icon: <IconMoneybag />,
|
||||||
|
child: [
|
||||||
|
{
|
||||||
|
id: "Investasi_1",
|
||||||
|
name: "Dashboard",
|
||||||
|
path: RouterAdminInvestasi.main,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "Investasi_2",
|
||||||
|
name: "Table Publish",
|
||||||
|
path: RouterAdminInvestasi.table_publish,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "Investasi_3",
|
||||||
|
name: "Table Review",
|
||||||
|
path: RouterAdminInvestasi.table_review,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "Investasi_4",
|
||||||
|
name: "Table Reject",
|
||||||
|
path: RouterAdminInvestasi.table_reject,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
|
||||||
|
//Donasi
|
||||||
|
{
|
||||||
|
id: "Donaasi",
|
||||||
|
name: "Donasi",
|
||||||
|
path: "",
|
||||||
|
icon: <IconHeartHandshake />,
|
||||||
|
child: [
|
||||||
|
{
|
||||||
|
id: "Donaasi_1",
|
||||||
|
name: "Dashboard",
|
||||||
|
path: RouterAdminDonasi.main,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "Donaasi_2",
|
||||||
|
name: "Table Publish",
|
||||||
|
path: RouterAdminDonasi.table_publish,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "Donaasi_3",
|
||||||
|
name: "Table Review",
|
||||||
|
path: RouterAdminDonasi.table_review,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "Donaasi_4",
|
||||||
|
name: "Table Reject",
|
||||||
|
path: RouterAdminDonasi.table_reject,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "Donaasi_5",
|
||||||
|
name: "Table Kategori",
|
||||||
|
path: RouterAdminDonasi.table_kategori,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
|
||||||
|
// Event
|
||||||
|
{
|
||||||
|
id: "Event",
|
||||||
|
name: "Event",
|
||||||
|
path: "",
|
||||||
|
icon: <IconPresentation />,
|
||||||
|
child: [
|
||||||
|
{
|
||||||
|
id: "Event_1",
|
||||||
|
name: "Dashboard",
|
||||||
|
path: RouterAdminEvent.main_event,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "Event_2",
|
||||||
|
name: "Table Publish",
|
||||||
|
path: RouterAdminEvent.table_publish,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "Event_3",
|
||||||
|
name: "Table Review",
|
||||||
|
path: RouterAdminEvent.table_review,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "Event_4",
|
||||||
|
name: "Table Reject",
|
||||||
|
path: RouterAdminEvent.table_reject,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "Event_5",
|
||||||
|
name: "Tipe Acara",
|
||||||
|
path: RouterAdminEvent.detail_tipe_acara,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "Event_6",
|
||||||
|
name: "Riwayat",
|
||||||
|
path: RouterAdminEvent.detail_riwayat,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
|
||||||
|
// Voting
|
||||||
|
{
|
||||||
|
id: "Voting",
|
||||||
|
name: "Voting",
|
||||||
|
path: "",
|
||||||
|
icon: <IconPackageImport />,
|
||||||
|
child: [
|
||||||
|
{
|
||||||
|
id: "Voting_1",
|
||||||
|
name: "Dashboard",
|
||||||
|
path: RouterAdminVote.main,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "Voting_2",
|
||||||
|
name: "Table Publish",
|
||||||
|
path: RouterAdminVote.table_publish,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "Voting_3",
|
||||||
|
name: "Table Review",
|
||||||
|
path: RouterAdminVote.table_review,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "Voting_4",
|
||||||
|
name: "Table Reject",
|
||||||
|
path: RouterAdminVote.table_reject,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "Voting_5",
|
||||||
|
name: "Riwayat",
|
||||||
|
path: RouterAdminVote.riwayat,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
|
||||||
|
// Job Vacancy
|
||||||
|
{
|
||||||
|
id: "Job",
|
||||||
|
name: "Job Vacancy",
|
||||||
|
path: "",
|
||||||
|
icon: <IconBriefcase />,
|
||||||
|
child: [
|
||||||
|
{
|
||||||
|
id: "Job_1",
|
||||||
|
name: "Dashboard",
|
||||||
|
path: RouterAdminJob.main,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "Job_2",
|
||||||
|
name: "Table Publish",
|
||||||
|
path: RouterAdminJob.publish,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "Job_3",
|
||||||
|
name: "Table Review",
|
||||||
|
path: RouterAdminJob.review,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "Job_4",
|
||||||
|
name: "Table Reject",
|
||||||
|
path: RouterAdminJob.reject,
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// id: 65,
|
||||||
|
// name: "Arsip",
|
||||||
|
// path: RouterAdminJob.arsip,
|
||||||
|
// },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
|
||||||
|
// Forum
|
||||||
|
{
|
||||||
|
id: "Forum",
|
||||||
|
name: "Forum",
|
||||||
|
path: "",
|
||||||
|
icon: <IconMessages />,
|
||||||
|
child: [
|
||||||
|
{
|
||||||
|
id: "Forum_1",
|
||||||
|
name: "Dashboard",
|
||||||
|
path: RouterAdminForum.main,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "Forum_2",
|
||||||
|
name: "Table Posting",
|
||||||
|
path: RouterAdminForum.table_posting,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "Forum_3",
|
||||||
|
name: "Report Posting",
|
||||||
|
path: RouterAdminForum.table_report_posting,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "Forum_4",
|
||||||
|
name: "Report Komentar",
|
||||||
|
path: RouterAdminForum.table_report_komentar,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
|
||||||
|
// Project Collaboration
|
||||||
|
{
|
||||||
|
id: "Collaboration",
|
||||||
|
name: "Collaboration",
|
||||||
|
path: "",
|
||||||
|
icon: <IconAffiliate />,
|
||||||
|
child: [
|
||||||
|
{
|
||||||
|
id: "Collaboration_1",
|
||||||
|
name: "Dashboard",
|
||||||
|
path: RouterAdminColab.dashboard,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "Collaboration_2",
|
||||||
|
name: "Table Publish",
|
||||||
|
path: RouterAdminColab.table_publish,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "Collaboration_3",
|
||||||
|
name: "Table Group",
|
||||||
|
path: RouterAdminColab.table_group,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "Collaboration_4",
|
||||||
|
name: "Table Reject",
|
||||||
|
path: RouterAdminColab.table_reject,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
|
||||||
|
// Maps
|
||||||
|
{
|
||||||
|
id: "Maps",
|
||||||
|
name: "Maps",
|
||||||
|
path: RouterAdminMap.main,
|
||||||
|
icon: <IconMap2 />,
|
||||||
|
child: [],
|
||||||
|
},
|
||||||
|
|
||||||
|
// App Information
|
||||||
|
{
|
||||||
|
id: "App Information",
|
||||||
|
name: "App Information",
|
||||||
|
path: RouterAdminAppInformation.main,
|
||||||
|
icon: <IconDeviceMobile />,
|
||||||
|
child: [],
|
||||||
|
},
|
||||||
|
|
||||||
|
// User Access
|
||||||
|
{
|
||||||
|
id: "User Access",
|
||||||
|
name: "User Access",
|
||||||
|
path: RouterAdminUserAccess.main,
|
||||||
|
icon: <IconUserCog />,
|
||||||
|
child: [],
|
||||||
|
},
|
||||||
|
|
||||||
|
// Developer
|
||||||
|
{
|
||||||
|
id: "Developer",
|
||||||
|
name: "Developer",
|
||||||
|
path: RouterAdminDeveloper.main,
|
||||||
|
icon: <IconDashboard />,
|
||||||
|
child: [],
|
||||||
|
},
|
||||||
|
];
|
||||||
@@ -7,11 +7,7 @@ export async function user_getOneByUserId(userId: string) {
|
|||||||
where: {
|
where: {
|
||||||
id: userId,
|
id: userId,
|
||||||
},
|
},
|
||||||
select: {
|
include: {
|
||||||
id: true,
|
|
||||||
active: true,
|
|
||||||
username: true,
|
|
||||||
masterUserRoleId: true,
|
|
||||||
Profile: true,
|
Profile: true,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,12 +1,12 @@
|
|||||||
[
|
[
|
||||||
{
|
{
|
||||||
"name": "banuna",
|
"name": "bagas_admin",
|
||||||
"nomor": "6282340374412",
|
"nomor": "6282340374412",
|
||||||
"masterUserRoleId": "3"
|
"masterUserRoleId": "3"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "fahmi_maliki",
|
"name": "fahmi_admin",
|
||||||
"nomor": "628123833845",
|
"nomor": "628123833845",
|
||||||
"masterUserRoleId": "3"
|
"masterUserRoleId": "2"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|||||||
Reference in New Issue
Block a user