wibu/hipmi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: Navbar admin

Browse Source 
Deskripsi:
- Fix bug navbar yang terpotong bagian atasnya
This commit is contained in:
Bagasbanuna02
2024-11-18 15:18:35 +08:00
parent 1f8bfcbed9
commit 5fcb09b889
111 changed files with 284 additions and 2930 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/app_modules/admin/investasi/bukti_transfer/layout.tsx
View File

@@ -1,19 +0,0 @@
"use client";
import ComponentGlobal_HeaderTamplate from "@/app_modules/_global/header_tamplate";
import { AppShell } from "@mantine/core";
import React from "react";
export default function Admin_LayoutBuktiTransferInvestasi({
children,
}: {
children: React.ReactNode;
}) {
return (
<>
<AppShell header={<ComponentGlobal_HeaderTamplate title="Bukti Transfer" />}>
{children}
</AppShell>
</>
);
}

63
src/app_modules/admin/investasi/bukti_transfer/view.tsx
View File

@@ -1,63 +0,0 @@
"use client";
import { RouterAdminInvestasi_OLD } from "@/app/lib/router_hipmi/router_admin";
import { RouterInvestasi_OLD } from "@/app/lib/router_hipmi/router_investasi";
import {
Avatar,
Badge,
Grid,
Group,
Paper,
Text,
ThemeIcon,
Title,
} from "@mantine/core";
import { IconChevronRight } from "@tabler/icons-react";
import { useRouter } from "next/navigation";
export default function Admin_BuktiTransferInvestasi() {
const router = useRouter();
const listUsername = [
{
id: 1,
},
{
id: 2,
},
{
id: 3,
},
{
id: 4,
},
{
id: 5,
},
{
id: 6,
},
];
return (
<>
{/* Box Username */}
{listUsername.map((e) => (
<Paper
key={e.id}
bg={"gray"}
p={"md"}
mb={"xs"}
onClick={() => router.push(RouterAdminInvestasi_OLD.status_transfer)}
>
<Grid align="center">
<Grid.Col span={6}>
<Text>Username</Text>
</Grid.Col>
<Grid.Col span={4}>
<Badge variant="dot">Status Transfer</Badge>
</Grid.Col>
</Grid>
</Paper>
))}
</>
);
}

20
src/app_modules/admin/investasi/detail/detail_review.tsx
View File

@@ -217,25 +217,7 @@ export default function AdminInvestasi_DetailReview({
}
/>
{/* <Modal
opened={openModal}
onClose={() => setOpenModal(false)}
title="Alasan Penolakan"
size={"sm"}
centered
withCloseButton={false}
>
<Stack>
<Textarea
autosize
minRows={3}
maxRows={5}
placeholder="Masukan alasan penolakan"
onChange={(val) => setReport(val.target.value)}
/>
<Group position="right"></Group>
</Stack>
</Modal> */}
</>
);
}

20
src/app_modules/admin/investasi/halaman_aksi/layout.tsx
View File

@@ -1,20 +0,0 @@
"use client";
import ComponentGlobal_HeaderTamplate from "@/app_modules/_global/header_tamplate";
import { AppShell } from "@mantine/core";
import React from "react";
export default function Admin_LayoutHalamanAksi({
children,
}: {
children: React.ReactNode;
}) {
return (
<>
{/* {children} */}
<AppShell padding={"md"} header={<ComponentGlobal_HeaderTamplate title="Pilih Aksi" />}>
{children}
</AppShell>
</>
);
}

93
src/app_modules/admin/investasi/halaman_aksi/view.tsx
View File

@@ -1,93 +0,0 @@
"use client";
import { RouterAdminInvestasi_OLD } from "@/app/lib/router_hipmi/router_admin";
import {
Box,
Button,
Center,
Flex,
Grid,
Group,
Paper,
SimpleGrid,
Stack,
Text,
Title,
} from "@mantine/core";
import { IconChevronRight } from "@tabler/icons-react";
import { useRouter } from "next/navigation";
export default function Admin_HalamanAksi({idInves}: {idInves: string}) {
const router = useRouter();
const listHalamanAksi = [
{
id: 1,
name: "Konfirmasi",
desc: "Publis atau non - aktifkan proyek invetsasi",
route: RouterAdminInvestasi_OLD.konfirmasi,
},
{
id: 2,
name: "Bukti Transfer",
desc: "Lihat bukti transfer investor",
route: RouterAdminInvestasi_OLD.bukti_transfer,
},
];
return (
<>
<SimpleGrid
cols={4}
spacing="sm"
breakpoints={[
// { maxWidth: "lg", cols: 6, spacing: "lg" },
{ maxWidth: "md", cols: 3, spacing: "md" },
{ maxWidth: "sm", cols: 2, spacing: "sm" },
{ maxWidth: "xs", cols: 1, spacing: "xs" },
]}
>
{listHalamanAksi.map((e) => (
<Paper key={e.id} bg={"gray"} p={"sm"}>
<Stack>
<Stack spacing={0}>
<Title order={6}>{e.name}</Title>
<Text fz={"sm"}>{e.desc}</Text>
</Stack>
<Center>
<Button
compact
radius={50}
w={100}
onClick={() => router.push(e.route + `${idInves}`)}
>
Lihat
</Button>
</Center>
</Stack>
</Paper>
))}
</SimpleGrid>
{/* <Grid mb={"md"} align="center">
{listHalamanAksi.map((e) => (
<Grid.Col key={e.id} onClick={() => router.push(e.route)}>
<Paper bg={"gray"} p={"xs"}>
<Grid align="center">
<Grid.Col span={10}>
<Stack spacing={0}>
<Title order={5}>{e.name}</Title>
<Text fw={"lighter"} fz={"xs"}>
{e.desc}
</Text>
</Stack>
</Grid.Col>
<Grid.Col span={2}>
<IconChevronRight />
</Grid.Col>
</Grid>
</Paper>
</Grid.Col>
))}
</Grid> */}
</>
);
}

30
src/app_modules/admin/investasi/index.tsx
View File

@@ -1,32 +1,18 @@
import Admin_Investasi from "./main/view";
import Admin_HalamanAksi from "./halaman_aksi/view";
import Admin_LayoutHalamanAksi from "./halaman_aksi/layout";
import AdminInvestasi_DetailReview from "./detail/detail_review";
import Admin_LayoutKonfirmasiInvestasi from "./konfirmasi/layout";
import Admin_BuktiTransferInvestasi from "./bukti_transfer/view";
import Admin_LayoutBuktiTransferInvestasi from "./bukti_transfer/layout";
import Admin_StatusTransferInvesatasi from "./status_transfer/view";
import Admin_LayoutStatusTransferInvesatasi from "./status_transfer/layout";
import Admin_TableReviewInvestasi from "./main/table_review";
import Admin_TablePublishInvestasi from "./main/table_publish";
import Admin_TableRejectInvestasi from "./main/table_reject";
import { AdminInvestasi_DetailPublish } from "./detail/detail_publish";
import { AdminInvestasi_DetailReject } from "./detail/detail_reject";
import AdminInvestasi_DetailReview from "./detail/detail_review";
import Admin_TablePublishInvestasi from "./main/table_publish";
import Admin_TableRejectInvestasi from "./main/table_reject";
import Admin_TableReviewInvestasi from "./main/table_review";
import Admin_Investasi from "./main/view";
export {
Admin_Investasi,
Admin_HalamanAksi,
Admin_LayoutHalamanAksi,
AdminInvestasi_DetailReview as Admin_KonfirmasiInvestasi,
Admin_LayoutKonfirmasiInvestasi,
Admin_BuktiTransferInvestasi,
Admin_LayoutBuktiTransferInvestasi,
Admin_StatusTransferInvesatasi,
Admin_LayoutStatusTransferInvesatasi,
Admin_TablePublishInvestasi,
Admin_TableReviewInvestasi,
Admin_TableRejectInvestasi,
Admin_TableReviewInvestasi,
AdminInvestasi_DetailPublish,
AdminInvestasi_DetailReject,
AdminInvestasi_DetailReject
};

21
src/app_modules/admin/investasi/konfirmasi/layout.tsx
View File

@@ -1,21 +0,0 @@
"use client";
import ComponentGlobal_HeaderTamplate from "@/app_modules/_global/header_tamplate";
import { AppShell } from "@mantine/core";
import React from "react";
export default function Admin_LayoutKonfirmasiInvestasi({
children,
}: {
children: React.ReactNode;
}) {
return (
<>
<AppShell
header={<ComponentGlobal_HeaderTamplate title="Konfimasi Investasi" />}
>
{children}
</AppShell>
</>
);
}

19
src/app_modules/admin/investasi/status_transfer/layout.tsx
View File

@@ -1,19 +0,0 @@
"use client";
import ComponentGlobal_HeaderTamplate from "@/app_modules/_global/header_tamplate";
import { AppShell } from "@mantine/core";
import React from "react";
export default function Admin_LayoutStatusTransferInvesatasi({
children,
}: {
children: React.ReactNode;
}) {
return (
<>
<AppShell header={<ComponentGlobal_HeaderTamplate title="Status Transfer" />}>
{children}
</AppShell>
</>
);
}

58
src/app_modules/admin/investasi/status_transfer/view.tsx
View File

@@ -1,58 +0,0 @@
"use client";
import { Warna } from "@/app/lib/warna";
import {
AspectRatio,
Avatar,
Button,
Center,
Group,
Image,
Select,
Stack,
Text,
Title,
} from "@mantine/core";
import { useRouter } from "next/navigation";
export default function Admin_StatusTransferInvesatasi() {
const router = useRouter();
return (
<>
<Stack>
<Group>
<Avatar variant="outline" radius={50} />
<Text>Username</Text>
</Group>
<Select
label="Status investor"
data={[
{ value: "1", label: "Sudah Transfer" },
{ value: "2", label: "Menunggu Transfer" },
]}
/>
<Center>
<AspectRatio ratio={1 / 1} bg={"blue"} h={400} w={250}>
<Image alt="" height={400} w={200} src={"/aset/no-img.png"} />
</AspectRatio>
</Center>
<Center mt={"lg"}>
<Button
w={300}
radius={50}
bg={Warna.biru}
color="blue"
onClick={() => {
router.back();
}}
>
Simpan
</Button>
</Center>
</Stack>
</>
);
}

301
src/app_modules/admin/layout.tsx
View File

@@ -1,48 +1,19 @@
"use client";
import mqtt_client from "@/util/mqtt_client";
import {
ActionIcon,
AppShell,
Box,
Burger,
Center,
Divider,
Drawer,
Group,
Header,
Indicator,
MediaQuery,
NavLink,
Navbar,
ScrollArea,
Stack,
Text,
Title,
useMantineTheme,
useMantineTheme
} from "@mantine/core";
import {
IconBell,
IconCircleDot,
IconCircleDotFilled,
IconUserSquareRounded,
} from "@tabler/icons-react";
import { useAtom } from "jotai";
import _ from "lodash";
import { useRouter } from "next/navigation";
import React, { useEffect, useState } from "react";
import React, { useState } from "react";
import { MODEL_USER } from "../home/model/interface";
import { MODEL_NOTIFIKASI } from "../notifikasi/model/interface";
import Admin_Logout from "./_admin_global/logout";
import {
gs_admin_hotMenu,
gs_admin_subMenu,
gs_layout_admin_isNavbarOpen,
} from "./global_state";
import { listAdminPage } from "./list_page";
import adminNotifikasi_getByUserId from "./notifikasi/fun/get/get_notifikasi_by_user_id";
import { ComponentAdmin_UIDrawerNotifikasi } from "./notifikasi/ui_drawer_notifikasi";
import { AccentColor, MainColor } from "../_global/color";
export default function AdminLayout({
children,
@@ -71,142 +42,145 @@ export default function AdminLayout({
const [countNotif, setCountNotif] = useState(countNotifikasi);
const [isNavbarOpen, setIsNavbarOpen] = useAtom(gs_layout_admin_isNavbarOpen);
const developerNavbar = listAdminPage.map((e, i) => (
<Box key={e.id}>
<NavLink
style={{ color: "white" }}
sx={{
":hover": {
backgroundColor: "transparent",
},
}}
fw={activeId === e.id ? "bold" : "normal"}
icon={
// active === e.id ? loading ? <Loader size={10} /> : e.icon : e.icon
e.icon
}
label={<Text size={"sm"}>{e.name}</Text>}
onClick={() => {
setLoading(true);
setActiveId(e.id);
setActiveChild(null);
e.path === "" ? router.push(e.child[0].path) : router.push(e.path);
e.path === "" ? setActiveChild(e.child[0].id) : "";
}}
>
{_.isEmpty(e.child) ? (
""
) : (
<Box>
{e.child.map((v, ii) => (
<Box key={v.id}>
<NavLink
style={{ color: "white" }}
sx={{
":hover": {
backgroundColor: "transparent",
},
}}
fw={activeChild === v.id ? "bold" : "normal"}
label={<Text>{v.name}</Text>}
icon={
activeChild === v.id ? (
<IconCircleDotFilled size={10} />
) : (
<IconCircleDot size={10} />
)
}
onClick={() => {
setActiveId(e.id);
setActiveChild(v.id);
router.push(v.path);
}}
/>
</Box>
))}
</Box>
)}
</NavLink>
</Box>
));
// const developerNavbar = listAdminPage.map((e, i) => (
// <Box key={e.id}>
// <NavLink
// style={{ color: "white" }}
// sx={{
// ":hover": {
// backgroundColor: "transparent",
// },
// }}
// fw={activeId === e.id ? "bold" : "normal"}
// icon={
// // active === e.id ? loading ? <Loader size={10} /> : e.icon : e.icon
// e.icon
// }
// label={<Text size={"sm"}>{e.name}</Text>}
// onClick={() => {
// setLoading(true);
// setActiveId(e.id);
// setActiveChild(null);
// e.path === "" ? router.push(e.child[0].path) : router.push(e.path);
// e.path === "" ? setActiveChild(e.child[0].id) : "";
// }}
// >
// {_.isEmpty(e.child) ? (
// ""
// ) : (
// <Box>
// {e.child.map((v, ii) => (
// <Box key={v.id}>
// <NavLink
// style={{ color: "white" }}
// sx={{
// ":hover": {
// backgroundColor: "transparent",
// },
// }}
// fw={activeChild === v.id ? "bold" : "normal"}
// label={<Text>{v.name}</Text>}
// icon={
// activeChild === v.id ? (
// <IconCircleDotFilled size={10} />
// ) : (
// <IconCircleDot size={10} />
// )
// }
// onClick={() => {
// setActiveId(e.id);
// setActiveChild(v.id);
// router.push(v.path);
// }}
// />
// </Box>
// ))}
// </Box>
// )}
// </NavLink>
// </Box>
// ));
const bukanDeveloper = listAdminPage.slice(0, -1);
const adminNavbar = bukanDeveloper.map((e) => (
<Box key={e.id}>
<NavLink
style={{ color: "white" }}
opened={e?.id === activeId && isNavbarOpen ? true : false}
sx={{
":hover": {
backgroundColor: "transparent",
},
}}
fw={activeId === e.id ? "bold" : "normal"}
icon={e.icon}
label={<Text size={"sm"}>{e.name}</Text>}
onClick={() => {
setLoading(true);
setActiveId(e.id);
setActiveChild(null);
e.path === "" ? router.push(e.child[0].path) : router.push(e.path);
e.path === "" ? setActiveChild(e.child[0].id) : "";
// const bukanDeveloper = listAdminPage.slice(0, -1);
// const adminNavbar = bukanDeveloper.map((e) => (
// <Box key={e.id}>
// <NavLink
// style={{ color: "white" }}
// opened={e?.id === activeId && isNavbarOpen ? true : false}
// sx={{
// ":hover": {
// backgroundColor: "transparent",
// },
// }}
// fw={activeId === e.id ? "bold" : "normal"}
// icon={e.icon}
// label={<Text size={"sm"}>{e.name}</Text>}
// onClick={() => {
// setLoading(true);
// setActiveId(e.id);
// setActiveChild(null);
// e.path === "" ? router.push(e.child[0].path) : router.push(e.path);
// e.path === "" ? setActiveChild(e.child[0].id) : "";
setIsNavbarOpen(true);
}}
>
{_.isEmpty(e.child) ? (
""
) : (
<Box>
{e.child.map((v, ii) => (
<Box key={v.id}>
<NavLink
sx={{
":hover": {
backgroundColor: "transparent",
},
}}
fw={activeChild === v.id ? "bold" : "normal"}
label={<Text>{v.name}</Text>}
icon={
activeChild === v.id ? (
<IconCircleDotFilled size={10} />
) : (
<IconCircleDot size={10} />
)
}
onClick={() => {
setActiveId(e.id);
setActiveChild(v.id);
router.push(v.path);
}}
/>
</Box>
))}
</Box>
)}
</NavLink>
</Box>
));
// setIsNavbarOpen(true);
// }}
// >
// {_.isEmpty(e.child) ? (
// ""
// ) : (
// <Box>
// {e.child.map((v, ii) => (
// <Box key={v.id}>
// <NavLink
// sx={{
// ":hover": {
// backgroundColor: "transparent",
// },
// }}
// fw={activeChild === v.id ? "bold" : "normal"}
// label={<Text>{v.name}</Text>}
// icon={
// activeChild === v.id ? (
// <IconCircleDotFilled size={10} />
// ) : (
// <IconCircleDot size={10} />
// )
// }
// onClick={() => {
// setActiveId(e.id);
// setActiveChild(v.id);
// router.push(v.path);
// }}
// />
// </Box>
// ))}
// </Box>
// )}
// </NavLink>
// </Box>
// ));
// async function onLoadNotifikasi() {
// const loadNotif = await adminNotifikasi_getByUserId();
// setDataNotif(loadNotif as any);
// }
useEffect(() => {
mqtt_client.subscribe("ADMIN");
// useEffect(() => {
// mqtt_client.subscribe("ADMIN");
mqtt_client.on("message", (topic: any, message: any) => {
const data = JSON.parse(message.toString());
// console.log(data);
setCountNotif(countNotif + data.count);
});
}, [countNotif]);
// mqtt_client.on("message", (topic: any, message: any) => {
// const data = JSON.parse(message.toString());
// // console.log(data);
// setCountNotif(countNotif + data.count);
// });
// }, [countNotif]);
return (
<>
<AppShell
<Box>{children}</Box>
{/*
padding="md"
navbarOffsetBreakpoint="md"
asideOffsetBreakpoint="sm"
@@ -216,7 +190,6 @@ export default function AdminLayout({
bg={AccentColor.darkblue}
style={{ color: "white", borderStyle: "none" }}
>
{/* Web View */}
<MediaQuery smallerThan={"sm"} styles={{ display: "none" }}>
<Group position="apart" align="center" h={"100%"} px={"md"}>
<Title order={3}>Dashboard Admin</Title>
@@ -245,7 +218,6 @@ export default function AdminLayout({
</Group>
</MediaQuery>
{/* Mobile View */}
<MediaQuery largerThan="sm" styles={{ display: "none" }}>
<Group h={50} align="center" px={"md"} position="apart">
<Burger
@@ -256,7 +228,6 @@ export default function AdminLayout({
mr="xl"
/>
<Title order={6}>Dashboard Admin</Title>
{/* <Admin_Logout /> */}
<ActionIcon>
<IconBell />
</ActionIcon>
@@ -299,10 +270,10 @@ export default function AdminLayout({
}
>
{children}
</AppShell>
*/}
{/* Drawer Mobile View */}
<Drawer opened={opened} onClose={() => setOpened(false)} size={"50%"}>
{/* <Drawer opened={opened} onClose={() => setOpened(false)} size={"50%"}>
<Stack spacing={"xl"}>
{listAdminPage.map((e) => (
<Text key={e.id} onClick={() => router.push(e.path)}>
@@ -310,10 +281,10 @@ export default function AdminLayout({
</Text>
))}
</Stack>
</Drawer>
</Drawer> */}
{/* Drawer Notifikasi */}
<Drawer
{/* <Drawer
title={
<Group position="apart">
<Text fw={"bold"} fz={"lg"}>
@@ -326,7 +297,7 @@ export default function AdminLayout({
position="right"
size={"xs"}
>
{/* <ComponentAdmin_UIDrawerNotifikasi
<ComponentAdmin_UIDrawerNotifikasi
data={dataNotif}
onLoadReadNotif={(val: any) => {
setDataNotif(val);
@@ -339,8 +310,8 @@ export default function AdminLayout({
onLoadCountNotif={(val: any) => {
setCountNotif(val);
}}
/> */}
</Drawer>
/>
</Drawer> */}
</>
);
}