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

fix ui collaboration layout

Browse Source
This commit is contained in:
Bagasbanuna02
2025-03-14 11:16:43 +08:00
parent 3eb9bbe9ca
commit cd294581f5
15 changed files with 179 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/dev/colab/main/layout.tsx
View File

@@ -1,5 +1,4 @@
import { LayoutColab_Main } from "@/app_modules/colab"; import { LayoutColab_Main } from "@/app_modules/colab";
import colab_CekNotifikasi from "@/app_modules/colab/fun/get/cek_notifikasi";
import React from "react"; import React from "react";
export default async function Layout({ export default async function Layout({
@@ -7,11 +6,10 @@ export default async function Layout({
}: { }: {
children: React.ReactNode; children: React.ReactNode;
}) { }) {
const cekNotif = await colab_CekNotifikasi();
return ( return (
<> <>
<LayoutColab_Main cekNotif={cekNotif as any}>{children}</LayoutColab_Main> <LayoutColab_Main >{children}</LayoutColab_Main>
</> </>
); );
} }

2
src/app_modules/_global/ui/V2_layout_tamplate.tsx
View File

@@ -134,7 +134,7 @@ export function UI_NewChildren({ children }: { children: ReactNode }) {
const { classes } = useStyles(); const { classes } = useStyles();
return ( return (
<Box className={classes.content}> <Box className={classes.content}>
<Container size="xl" py="md"> <Container size="xl" pt={"md"}>
{children} {children}
</Container> </Container>
</Box> </Box>

64
src/app_modules/colab/component/comp_new_footer_collaboration.tsx Normal file
View File

@@ -0,0 +1,64 @@
import { useAtom } from "jotai";
import { useRouter } from "next/navigation";
import { gs_colab_hot_menu } from "../global_state";
import { useState } from "react";
import { IconHome, IconMessages, IconUsersGroup } from "@tabler/icons-react";
import { RouterColab } from "@/lib/router_hipmi/router_colab";
import { MainColor } from "@/app_modules/_global/color";
import { SimpleGrid, Stack, ActionIcon, Text } from "@mantine/core";
export function Collaboration_ComponentNewFooter() {
const router = useRouter();
const [hotMenu, setHotMenu] = useAtom(gs_colab_hot_menu);
const [loading, setLoading] = useState(false);
const listFooter = [
{
id: 1,
name: "Beranda",
path: RouterColab.beranda,
icon: <IconHome />,
},
{
id: 2,
name: "Partisipasi",
path: RouterColab.proyek,
icon: <IconUsersGroup />,
},
{
id: 3,
name: "Grup Diskusi",
path: RouterColab.grup_diskusi,
icon: <IconMessages />,
},
];
return (
<>
<SimpleGrid cols={listFooter.length} h={"9vh"} mx={"xs"} w={"100%"}>
{listFooter.map((e) => (
<Stack key={e.id} align="center" justify="center" spacing={0}>
<ActionIcon
// disabled={e.path === "" ? true : false}
variant="transparent"
c={hotMenu === e.id ? MainColor.yellow : MainColor.white}
onClick={() => {
router.replace(e.path, { scroll: false });
setHotMenu(e.id);
}}
>
{e.icon}
</ActionIcon>
<Text
c={hotMenu === e.id ? MainColor.yellow : MainColor.white}
fz={"xs"}
lineClamp={1}
>
{e.name}
</Text>
</Stack>
))}
</SimpleGrid>
</>
);
}

18
src/app_modules/colab/create/layout.tsx
View File

@@ -1,7 +1,10 @@
"use client"; "use client";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate"; import { Component_Header } from "@/app_modules/_global/component/new/component_header";
import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate"; import UI_NewLayoutTamplate, {
UI_NewChildren,
UI_NewHeader,
} from "@/app_modules/_global/ui/V2_layout_tamplate";
import React from "react"; import React from "react";
export default function LayoutColab_Create({ export default function LayoutColab_Create({
@@ -11,11 +14,18 @@ export default function LayoutColab_Create({
}) { }) {
return ( return (
<> <>
<UIGlobal_LayoutTamplate {/* <UIGlobal_LayoutTamplate
header={<UIGlobal_LayoutHeaderTamplate title="Tambah Proyek" />} header={<UIGlobal_LayoutHeaderTamplate title="Tambah Proyek" />}
> >
{children} {children}
</UIGlobal_LayoutTamplate> </UIGlobal_LayoutTamplate> */}
<UI_NewLayoutTamplate>
<UI_NewHeader>
<Component_Header title="Tambah Proyek" />
</UI_NewHeader>
<UI_NewChildren>{children}</UI_NewChildren>
</UI_NewLayoutTamplate>
</> </>
); );
} }

15
src/app_modules/colab/detail/info_grup/index.tsx
View File

@@ -22,15 +22,26 @@ import {
import { import {
MODEL_COLLABORATION_ROOM_CHAT MODEL_COLLABORATION_ROOM_CHAT
} from "../../model/interface"; } from "../../model/interface";
import { Component_Header } from "@/app_modules/_global/component/new/component_header";
import UI_NewLayoutTamplate, { UI_NewHeader, UI_NewChildren } from "@/app_modules/_global/ui/V2_layout_tamplate";
export default function Colab_DetailInfoGrup() { export default function Colab_DetailInfoGrup() {
return ( return (
<> <>
<UIGlobal_LayoutTamplate {/* <UIGlobal_LayoutTamplate
header={<UIGlobal_LayoutHeaderTamplate title="Info Grup" />} header={<UIGlobal_LayoutHeaderTamplate title="Info Grup" />}
> >
<InfoGroup /> <InfoGroup />
</UIGlobal_LayoutTamplate> </UIGlobal_LayoutTamplate> */}
<UI_NewLayoutTamplate>
<UI_NewHeader>
<Component_Header title="Info Grup" />
</UI_NewHeader>
<UI_NewChildren>
<InfoGroup />
</UI_NewChildren>
</UI_NewLayoutTamplate>
</> </>
); );
} }

18
src/app_modules/colab/detail/main_detail/layout.tsx
View File

@@ -1,7 +1,10 @@
"use client"; "use client";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate"; import { Component_Header } from "@/app_modules/_global/component/new/component_header";
import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate"; import UI_NewLayoutTamplate, {
UI_NewChildren,
UI_NewHeader,
} from "@/app_modules/_global/ui/V2_layout_tamplate";
import React from "react"; import React from "react";
export default function LayoutColab_MainDetail({ export default function LayoutColab_MainDetail({
@@ -15,7 +18,7 @@ export default function LayoutColab_MainDetail({
}) { }) {
return ( return (
<> <>
<UIGlobal_LayoutTamplate {/* <UIGlobal_LayoutTamplate
header={ header={
<UIGlobal_LayoutHeaderTamplate <UIGlobal_LayoutHeaderTamplate
title="Detail" title="Detail"
@@ -25,7 +28,14 @@ export default function LayoutColab_MainDetail({
} }
> >
{children} {children}
</UIGlobal_LayoutTamplate> </UIGlobal_LayoutTamplate> */}
<UI_NewLayoutTamplate>
<UI_NewHeader>
<Component_Header title="Detail" />
</UI_NewHeader>
<UI_NewChildren>{children}</UI_NewChildren>
</UI_NewLayoutTamplate>
</> </>
); );
} }

16
src/app_modules/colab/detail/proyek/partisipasi/layout.tsx
View File

@@ -1,7 +1,12 @@
"use client"; "use client";
import { Component_Header } from "@/app_modules/_global/component/new/component_header";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate"; import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate"; import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
import UI_NewLayoutTamplate, {
UI_NewHeader,
UI_NewChildren,
} from "@/app_modules/_global/ui/V2_layout_tamplate";
export default function LayoutColab_DetailPartisipasiProyek({ export default function LayoutColab_DetailPartisipasiProyek({
children, children,
@@ -10,11 +15,18 @@ export default function LayoutColab_DetailPartisipasiProyek({
}) { }) {
return ( return (
<> <>
<UIGlobal_LayoutTamplate {/* <UIGlobal_LayoutTamplate
header={<UIGlobal_LayoutHeaderTamplate title="Detail Partisipan" />} header={<UIGlobal_LayoutHeaderTamplate title="Detail Partisipan" />}
> >
{children} {children}
</UIGlobal_LayoutTamplate> </UIGlobal_LayoutTamplate> */}
<UI_NewLayoutTamplate>
<UI_NewHeader>
<Component_Header title="Detail Partisipan" />
</UI_NewHeader>
<UI_NewChildren>{children}</UI_NewChildren>
</UI_NewLayoutTamplate>
</> </>
); );
} }

23
src/app_modules/colab/detail/proyek/saya/layout.tsx
View File

@@ -8,6 +8,8 @@ import { ActionIcon } from "@mantine/core";
import { IconDotsVertical, IconEdit } from "@tabler/icons-react"; import { IconDotsVertical, IconEdit } from "@tabler/icons-react";
import { useParams } from "next/navigation"; import { useParams } from "next/navigation";
import React, { useState } from "react"; import React, { useState } from "react";
import { Component_Header } from "@/app_modules/_global/component/new/component_header";
import UI_NewLayoutTamplate, { UI_NewHeader, UI_NewChildren } from "@/app_modules/_global/ui/V2_layout_tamplate";
export default function LayoutColab_DetailProyekSaya({ export default function LayoutColab_DetailProyekSaya({
children, children,
@@ -27,7 +29,7 @@ export default function LayoutColab_DetailProyekSaya({
return ( return (
<> <>
<UIGlobal_LayoutTamplate {/* <UIGlobal_LayoutTamplate
header={ header={
<UIGlobal_LayoutHeaderTamplate <UIGlobal_LayoutHeaderTamplate
title="Proyek Saya" title="Proyek Saya"
@@ -43,7 +45,24 @@ export default function LayoutColab_DetailProyekSaya({
} }
> >
{children} {children}
</UIGlobal_LayoutTamplate> </UIGlobal_LayoutTamplate> */}
<UI_NewLayoutTamplate>
<UI_NewHeader>
<Component_Header
title="Proyek Saya"
customButtonRight={
<ActionIcon
variant="transparent"
onClick={() => setOpenDrawer(true)}
>
<IconDotsVertical color="white" />
</ActionIcon>
}
/>
</UI_NewHeader>
<UI_NewChildren>{children}</UI_NewChildren>
</UI_NewLayoutTamplate>
<UIGlobal_Drawer <UIGlobal_Drawer
opened={openDrawer} opened={openDrawer}

18
src/app_modules/colab/edit/layout.tsx
View File

@@ -1,7 +1,10 @@
"use client"; "use client";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate"; import { Component_Header } from "@/app_modules/_global/component/new/component_header";
import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate"; import UI_NewLayoutTamplate, {
UI_NewChildren,
UI_NewHeader,
} from "@/app_modules/_global/ui/V2_layout_tamplate";
import React from "react"; import React from "react";
export default function LayoutColab_Edit({ export default function LayoutColab_Edit({
@@ -11,9 +14,16 @@ export default function LayoutColab_Edit({
}) { }) {
return ( return (
<> <>
<UIGlobal_LayoutTamplate header={<UIGlobal_LayoutHeaderTamplate title="Edit Proyek" />}> {/* <UIGlobal_LayoutTamplate header={<UIGlobal_LayoutHeaderTamplate title="Edit Proyek" />}>
{children} {children}
</UIGlobal_LayoutTamplate> </UIGlobal_LayoutTamplate> */}
<UI_NewLayoutTamplate>
<UI_NewHeader>
<Component_Header title="Edit Proyek" />
</UI_NewHeader>
<UI_NewChildren>{children}</UI_NewChildren>
</UI_NewLayoutTamplate>
</> </>
); );
} }

2
src/app_modules/colab/main/beranda.tsx
View File

@@ -77,7 +77,7 @@ export default function Colab_Beranda({
) : ( ) : (
<Box> <Box>
<ScrollOnly <ScrollOnly
height="82vh" height="80vh"
renderLoading={() => ( renderLoading={() => (
<Center mt={"lg"}> <Center mt={"lg"}>
<Loader color={"yellow"} /> <Loader color={"yellow"} />

2
src/app_modules/colab/main/grup/index.tsx
View File

@@ -54,7 +54,7 @@ export default function Colab_GrupDiskus() {
) : ( ) : (
<Box> <Box>
<ScrollOnly <ScrollOnly
height="82vh" height="85vh"
renderLoading={() => ( renderLoading={() => (
<Center mt={"lg"}> <Center mt={"lg"}>
<Loader color={"yellow"} /> <Loader color={"yellow"} />

53
src/app_modules/colab/main/layout.tsx
View File

@@ -11,13 +11,14 @@ import { useAtom } from "jotai";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import React, { useState } from "react"; import React, { useState } from "react";
import { gs_colab_hot_menu } from "../global_state"; import { gs_colab_hot_menu } from "../global_state";
import { Collaboration_ComponentNewFooter } from "../component/comp_new_footer_collaboration";
import { Component_Header } from "@/app_modules/_global/component/new/component_header";
import UI_NewLayoutTamplate, { UI_NewHeader, UI_NewChildren, UI_NewFooter } from "@/app_modules/_global/ui/V2_layout_tamplate";
export default function LayoutColab_Main({ export default function LayoutColab_Main({
children, children,
cekNotif,
}: { }: {
children: React.ReactNode; children: React.ReactNode;
cekNotif: boolean;
}) { }) {
const router = useRouter(); const router = useRouter();
const [hotMenu, setHotMenu] = useAtom(gs_colab_hot_menu); const [hotMenu, setHotMenu] = useAtom(gs_colab_hot_menu);
@@ -46,7 +47,20 @@ export default function LayoutColab_Main({
return ( return (
<> <>
<UIGlobal_LayoutTamplate <UI_NewLayoutTamplate>
<UI_NewHeader>
<Component_Header
title="Collaboration"
routerLeft={RouterHome.main_home}
/>
</UI_NewHeader>
<UI_NewChildren>{children}</UI_NewChildren>
<UI_NewFooter>
<Collaboration_ComponentNewFooter />
</UI_NewFooter>
</UI_NewLayoutTamplate>
{/* <UIGlobal_LayoutTamplate
header={ header={
<UIGlobal_LayoutHeaderTamplate <UIGlobal_LayoutHeaderTamplate
title="Collaboration" title="Collaboration"
@@ -79,41 +93,10 @@ export default function LayoutColab_Main({
))} ))}
</SimpleGrid> </SimpleGrid>
// <Footer height={"10vh"} bg={"black"}>
// {/* {value} */}
// <Stack justify="center" h={"100%"}>
// <Grid>
// {listFooter.map((e) => (
// <Grid.Col key={e.id} span={"auto"} pt={"md"}>
// <Center>
// <Stack
// align="center"
// spacing={0}
// onClick={() => {
// router.replace(e.path);
// setHotMenu(e.id);
// }}
// >
// <ActionIcon
// variant="transparent"
// c={hotMenu === e.id ? "blue" : "white"}
// >
// {e.icon}
// </ActionIcon>
// <Text fz={10} c={hotMenu === e.id ? "blue" : "white"}>
// {e.name}
// </Text>
// </Stack>
// </Center>
// </Grid.Col>
// ))}
// </Grid>
// </Stack>
// </Footer>
} }
> >
{children} {children}
</UIGlobal_LayoutTamplate> </UIGlobal_LayoutTamplate> */}
</> </>
); );
} }

2
src/app_modules/colab/main/proyek/partisipasi.tsx
View File

@@ -49,7 +49,7 @@ export default function Colab_PartisipasiProyek() {
) : ( ) : (
<Box> <Box>
<ScrollOnly <ScrollOnly
height="73vh" height="75vh"
renderLoading={() => ( renderLoading={() => (
<Center mt={"lg"}> <Center mt={"lg"}>
<Loader color={"yellow"} /> <Loader color={"yellow"} />

2
src/app_modules/colab/main/proyek/saya.tsx
View File

@@ -48,7 +48,7 @@ export default function Colab_ProyekSaya() {
// --- Main component --- // // --- Main component --- //
<Box> <Box>
<ScrollOnly <ScrollOnly
height="73vh" height="75vh"
renderLoading={() => ( renderLoading={() => (
<Center mt={"lg"}> <Center mt={"lg"}>
<Loader color={"yellow"} /> <Loader color={"yellow"} />

2
src/lib/router_hipmi/router_admin.ts
View File

@@ -34,7 +34,7 @@ export const RouterAdminDonasi_OLD = {
pencairan_dana: "/dev/admin/donasi/pencairan_dana/", pencairan_dana: "/dev/admin/donasi/pencairan_dana/",
}; };
export const RouterColab = { export const RouterAdminColab = {
// detail // detail
detail_publish: "/dev/admin/colab/detail/publish/", detail_publish: "/dev/admin/colab/detail/publish/",
} }