Fix: Job
Deskripsi: - Fix notifikasi admi to user - Fix count notifikasi di admin dan user ## No Issue
This commit is contained in:
@@ -0,0 +1,75 @@
|
||||
import { AccentColor } from "@/app_modules/_global/color";
|
||||
import { MODEL_USER } from "@/app_modules/home/model/interface";
|
||||
import { Menu, ActionIcon, Stack, Grid, Center, Text } from "@mantine/core";
|
||||
import { IconUserCircle, IconUser, IconPhone } from "@tabler/icons-react";
|
||||
import { useState } from "react";
|
||||
import Admin_Logout from "../logout";
|
||||
|
||||
export function Admin_ComponentButtonUserCircle({ 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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
203
src/app_modules/admin/_admin_global/_ui/ui_navbar_admin.tsx
Normal file
203
src/app_modules/admin/_admin_global/_ui/ui_navbar_admin.tsx
Normal file
@@ -0,0 +1,203 @@
|
||||
import { MainColor } from "@/app_modules/_global/color";
|
||||
import { Box, NavLink, Text } from "@mantine/core";
|
||||
import { IconCircleDot, IconCircleDotFilled } from "@tabler/icons-react";
|
||||
import { useAtom } from "jotai";
|
||||
import _ from "lodash";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { newListAdminPage } from "../../new_list_page";
|
||||
import { gs_admin_navbar_isActive_dropdown } from "../new_global_state";
|
||||
|
||||
export default function Admin_UiNavbar({
|
||||
userRoleId,
|
||||
activeId,
|
||||
activeChildId,
|
||||
setActiveId,
|
||||
setActiveChildId,
|
||||
}: {
|
||||
userRoleId: string;
|
||||
activeId: string;
|
||||
activeChildId: string;
|
||||
setActiveId: (val: any) => void;
|
||||
setActiveChildId: (val: any) => void;
|
||||
}) {
|
||||
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;
|
||||
}
|
||||
@@ -1,5 +1,8 @@
|
||||
import { Admin_ComponentLoadImageLandscape } from "./_component/comp_admin_load_image";
|
||||
import { Admin_ComponentSkeletonNavbar } from "./_component/comp_admin_skeleton_navbar";
|
||||
import { Admin_ComponentButtonUserCircle } from "./_component/comp_button_user_on_navbar";
|
||||
import Admin_UiNavbar from "./_ui/ui_navbar_admin";
|
||||
|
||||
export { Admin_ComponentLoadImageLandscape, Admin_ComponentSkeletonNavbar };
|
||||
|
||||
export { Admin_UiNavbar };
|
||||
export {Admin_ComponentButtonUserCircle}
|
||||
Reference in New Issue
Block a user