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

fix layout donasi:

Browse Source 
deskripsi:
- fix layout main donasi
- fix layout main detail donasi
This commit is contained in:
Bagasbanuna02
2025-03-18 10:59:01 +08:00
parent 425fb1ac74
commit ce98d5bf8e
13 changed files with 231 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/app/dev/donasi/penggalang_dana/[id]/page.tsx
View File

@@ -5,7 +5,6 @@ export default async function Page({ params }: { params: { id: string } }) {
let authorId = params.id; let authorId = params.id;
const dataPenggalang = await Donasi_getAuthorById(authorId); const dataPenggalang = await Donasi_getAuthorById(authorId);
return ( return (
<> <>
<PenggalangDanaDonasi dataPenggalang={dataPenggalang as any} /> <PenggalangDanaDonasi dataPenggalang={dataPenggalang as any} />

3
src/app_modules/_global/component/button_create.tsx
View File

@@ -28,6 +28,9 @@ const useStyles = createStyles((theme) => ({
[`@media (min-width: 769px)`]: { [`@media (min-width: 769px)`]: {
right: "calc(50% - 250px + 20px)", // Sesuaikan dengan lebar container (500px) right: "calc(50% - 250px + 20px)", // Sesuaikan dengan lebar container (500px)
}, },
[":hover"]: {
backgroundColor: AccentColor.blue,
},
}, },
})); }));

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

@@ -59,7 +59,7 @@ const useStyles = createStyles((theme) => ({
[`@media (max-width: 768px)`]: { [`@media (max-width: 768px)`]: {
height: "8vh", height: "8vh",
}, },
borderBottom: `1px solid ${AccentColor.blue}`, borderBottom: `2px solid ${AccentColor.blue}`,
borderBottomLeftRadius: "20px", borderBottomLeftRadius: "20px",
borderBottomRightRadius: "20px", borderBottomRightRadius: "20px",
}, },
@@ -74,7 +74,7 @@ const useStyles = createStyles((theme) => ({
footer: { footer: {
width: "100%", width: "100%",
backgroundColor: MainColor.darkblue, backgroundColor: MainColor.darkblue,
borderTop: `1px solid ${AccentColor.blue}`, borderTop: `2px solid ${AccentColor.blue}`,
height: "10vh", // Tinggi footer height: "10vh", // Tinggi footer
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",

10
src/app_modules/donasi/component/footer_button_donasi.tsx
View File

@@ -28,13 +28,19 @@ export default function ButtonDonasi({ donasiId }: { donasiId: string }) {
<Footer <Footer
height={70} height={70}
px={"md"} px={"md"}
sx={{ borderStyle: "none", backgroundColor: "transparent" }} style={{
borderStyle: "none",
backgroundColor: "transparent",
width: "100%",
}}
> >
<Center h={70}> <Center h={70}>
<Button <Button
style={{
width: "100%",
}}
loaderPosition="center" loaderPosition="center"
loading={isLoading ? true : false} loading={isLoading ? true : false}
w={"100%"}
radius={"xl"} radius={"xl"}
onClick={() => onClick()} onClick={() => onClick()}
bg={MainColor.yellow} bg={MainColor.yellow}

17
src/app_modules/donasi/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 LayoutCreateDonasi({ export default function LayoutCreateDonasi({
@@ -11,11 +14,17 @@ export default function LayoutCreateDonasi({
}) { }) {
return ( return (
<> <>
<UIGlobal_LayoutTamplate {/* <UIGlobal_LayoutTamplate
header={<UIGlobal_LayoutHeaderTamplate title="Tambah Donasi" />} header={<UIGlobal_LayoutHeaderTamplate title="Tambah Donasi" />}
> >
{children} {children}
</UIGlobal_LayoutTamplate> </UIGlobal_LayoutTamplate> */}
<UI_NewLayoutTamplate>
<UI_NewHeader>
<Component_Header title="Tambah Donasi" />
</UI_NewHeader>
<UI_NewChildren>{children}</UI_NewChildren>
</UI_NewLayoutTamplate>
</> </>
); );
} }

18
src/app_modules/donasi/create/layout_cerita_penggalang.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 LayoutCreateCeritaDonasi({ export default function LayoutCreateCeritaDonasi({
@@ -11,13 +14,20 @@ export default function LayoutCreateCeritaDonasi({
}) { }) {
return ( return (
<> <>
<UIGlobal_LayoutTamplate {/* <UIGlobal_LayoutTamplate
header={ header={
<UIGlobal_LayoutHeaderTamplate title="Tambah Cerita" hideButtonLeft /> <UIGlobal_LayoutHeaderTamplate title="Tambah Cerita" hideButtonLeft />
} }
> >
{children} {children}
</UIGlobal_LayoutTamplate> </UIGlobal_LayoutTamplate> */}
<UI_NewLayoutTamplate>
<UI_NewHeader>
<Component_Header title="Tambah Cerita" hideButtonLeft />
</UI_NewHeader>
<UI_NewChildren>{children}</UI_NewChildren>
</UI_NewLayoutTamplate>
</> </>
); );
} }

42
src/app_modules/donasi/detail/detail_main/cerita_penggalang/layout.tsx
View File

@@ -1,7 +1,11 @@
"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_NewFooter,
UI_NewHeader,
} from "@/app_modules/_global/ui/V2_layout_tamplate";
import ButtonDonasi from "@/app_modules/donasi/component/footer_button_donasi"; import ButtonDonasi from "@/app_modules/donasi/component/footer_button_donasi";
import React from "react"; import React from "react";
@@ -17,22 +21,40 @@ export default function LayoutCeritaPenggalangDonasi({
if (statusDonasiId !== "1") { if (statusDonasiId !== "1") {
return ( return (
<> <>
<UIGlobal_LayoutTamplate {/* <UIGlobal_LayoutTamplate
header={ header={
<UIGlobal_LayoutHeaderTamplate title="Cerita Penggalang Dana" /> <UIGlobal_LayoutHeaderTamplate title="Cerita Penggalang Dana" />
} }
> >
{children} {children}
</UIGlobal_LayoutTamplate> </UIGlobal_LayoutTamplate> */}
<UI_NewLayoutTamplate>
<UI_NewHeader>
<Component_Header title="Cerita Penggalang Dana" />
</UI_NewHeader>
<UI_NewChildren>{children}</UI_NewChildren>
</UI_NewLayoutTamplate>
</> </>
); );
} }
return ( return (
<UIGlobal_LayoutTamplate // <UIGlobal_LayoutTamplate
header={<UIGlobal_LayoutHeaderTamplate title="Cerita Penggalang Dana" />} // header={<UIGlobal_LayoutHeaderTamplate title="Cerita Penggalang Dana" />}
footer={<ButtonDonasi donasiId={donasiId} />} // footer={<ButtonDonasi donasiId={donasiId} />}
> // >
{children} // {children}
</UIGlobal_LayoutTamplate> // </UIGlobal_LayoutTamplate>
<UI_NewLayoutTamplate>
<UI_NewHeader>
<Component_Header title="Cerita Penggalang Dana" />
</UI_NewHeader>
<UI_NewChildren>{children}</UI_NewChildren>
<UI_NewFooter>
<ButtonDonasi donasiId={donasiId} />
</UI_NewFooter>
</UI_NewLayoutTamplate>
); );
} }

18
src/app_modules/donasi/detail/detail_main/donatur/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 LayoutDonaturDonasi({ export default function LayoutDonaturDonasi({
@@ -11,11 +14,18 @@ export default function LayoutDonaturDonasi({
}) { }) {
return ( return (
<> <>
<UIGlobal_LayoutTamplate {/* <UIGlobal_LayoutTamplate
header={<UIGlobal_LayoutHeaderTamplate title="Donatur" />} header={<UIGlobal_LayoutHeaderTamplate title="Donatur" />}
> >
{children} {children}
</UIGlobal_LayoutTamplate> </UIGlobal_LayoutTamplate> */}
<UI_NewLayoutTamplate>
<UI_NewHeader>
<Component_Header title="Donatur" />
</UI_NewHeader>
<UI_NewChildren>{children}</UI_NewChildren>
</UI_NewLayoutTamplate>
</> </>
); );
} }

18
src/app_modules/donasi/detail/detail_main/kabar/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 LayoutKabarDonasi({ export default function LayoutKabarDonasi({
@@ -11,11 +14,18 @@ export default function LayoutKabarDonasi({
}) { }) {
return ( return (
<> <>
<UIGlobal_LayoutTamplate {/* <UIGlobal_LayoutTamplate
header={<UIGlobal_LayoutHeaderTamplate title="Kabar" />} header={<UIGlobal_LayoutHeaderTamplate title="Kabar" />}
> >
{children} {children}
</UIGlobal_LayoutTamplate> </UIGlobal_LayoutTamplate> */}
<UI_NewLayoutTamplate>
<UI_NewHeader>
<Component_Header title="Kabar" />
</UI_NewHeader>
<UI_NewChildren>{children}</UI_NewChildren>
</UI_NewLayoutTamplate>
</> </>
); );
} }

90
src/app_modules/donasi/detail/detail_main/layout_new.tsx
View File

@@ -11,6 +11,8 @@ import { useParams } from "next/navigation";
import { apiGetOneDonasiById } from "../../lib/api_donasi"; import { apiGetOneDonasiById } from "../../lib/api_donasi";
import { funGetUserIdByToken } from "@/app_modules/_global/fun/get"; import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
import { useShallowEffect } from "@mantine/hooks"; import { useShallowEffect } from "@mantine/hooks";
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 LayoutDetailMainDonasiNew({ children, }: { children: React.ReactNode; }) { export default function LayoutDetailMainDonasiNew({ children, }: { children: React.ReactNode; }) {
const [openDrawer, setOpenDrawer] = useState(false); const [openDrawer, setOpenDrawer] = useState(false);
@@ -49,37 +51,63 @@ export default function LayoutDetailMainDonasiNew({ children, }: { children: Rea
}, []) }, [])
return ( return (
<> <>
<UIGlobal_LayoutTamplate {/* <UIGlobal_LayoutTamplate
header={ header={
<UIGlobal_LayoutHeaderTamplate <UIGlobal_LayoutHeaderTamplate
title="Detail Donasi" title="Detail Donasi"
customButtonRight={ customButtonRight={
loading ? "" loading ? (
: ""
userLogin !== authorId ? ( ) : userLogin !== authorId ? (
"" ""
) : ( ) : (
<ActionIcon <ActionIcon
variant="transparent" variant="transparent"
onClick={() => setOpenDrawer(true)} onClick={() => setOpenDrawer(true)}
> >
<IconDotsVertical color="white" /> <IconDotsVertical color="white" />
</ActionIcon> </ActionIcon>
) )
} }
/> />
} }
footer={<ButtonDonasi donasiId={param.id} />} footer={<ButtonDonasi donasiId={param.id} />}
> >
{children} {children}
</UIGlobal_LayoutTamplate> </UIGlobal_LayoutTamplate> */}
<UIGlobal_Drawer <UI_NewLayoutTamplate>
opened={openDrawer} <UI_NewHeader>
close={() => setOpenDrawer(false)} <Component_Header
component={listPage} title="Detail Donasi"
/> customButtonRight={
</> loading ? (
""
) : userLogin !== authorId ? (
""
) : (
<ActionIcon
variant="transparent"
onClick={() => setOpenDrawer(true)}
>
<IconDotsVertical color="white" />
</ActionIcon>
)
}
/>
</UI_NewHeader>
<UI_NewChildren>{children}</UI_NewChildren>
<UI_NewFooter>
<ButtonDonasi donasiId={param.id} />
</UI_NewFooter>
</UI_NewLayoutTamplate>
<UIGlobal_Drawer
opened={openDrawer}
close={() => setOpenDrawer(false)}
component={listPage}
/>
</>
); );
} }

18
src/app_modules/donasi/detail/detail_main/pencairan_dana/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 LayoutPencairanDanaDonasi({ export default function LayoutPencairanDanaDonasi({
@@ -11,11 +14,18 @@ export default function LayoutPencairanDanaDonasi({
}) { }) {
return ( return (
<> <>
<UIGlobal_LayoutTamplate {/* <UIGlobal_LayoutTamplate
header={<UIGlobal_LayoutHeaderTamplate title="Pencairan Dana" />} header={<UIGlobal_LayoutHeaderTamplate title="Pencairan Dana" />}
> >
{children} {children}
</UIGlobal_LayoutTamplate> </UIGlobal_LayoutTamplate> */}
<UI_NewLayoutTamplate>
<UI_NewHeader>
<Component_Header title="Pencairan Dana" />
</UI_NewHeader>
<UI_NewChildren>{children}</UI_NewChildren>
</UI_NewLayoutTamplate>
</> </>
); );
} }

18
src/app_modules/donasi/detail/detail_main/penggalang_dana/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 LayoutPenggalangDanaDonasi({ export default function LayoutPenggalangDanaDonasi({
@@ -11,14 +14,21 @@ export default function LayoutPenggalangDanaDonasi({
}) { }) {
return ( return (
<> <>
<UIGlobal_LayoutTamplate {/* <UIGlobal_LayoutTamplate
header={ header={
<UIGlobal_LayoutHeaderTamplate title="Informasi Penggalangan Dana" /> <UIGlobal_LayoutHeaderTamplate title="Informasi Penggalangan Dana" />
} }
// footer={<FooterDonasi />} // footer={<FooterDonasi />}
> >
{children} {children}
</UIGlobal_LayoutTamplate> </UIGlobal_LayoutTamplate> */}
<UI_NewLayoutTamplate>
<UI_NewHeader>
<Component_Header title="Informasi Penggalangan Dana" />
</UI_NewHeader>
<UI_NewChildren>{children}</UI_NewChildren>
</UI_NewLayoutTamplate>
</> </>
); );
} }

50
src/app_modules/donasi/main/layout.tsx
View File

@@ -1,11 +1,15 @@
"use client"; "use client";
import { MainColor } from "@/app_modules/_global/color/color_pallet";
import { Component_Header } from "@/app_modules/_global/component/new/component_header";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
import UI_NewLayoutTamplate, {
UI_NewChildren,
UI_NewFooter,
UI_NewHeader,
} from "@/app_modules/_global/ui/V2_layout_tamplate";
import { RouterCrowd } from "@/lib/router_hipmi/router_crowd"; import { RouterCrowd } from "@/lib/router_hipmi/router_crowd";
import { RouterDonasi } from "@/lib/router_hipmi/router_donasi"; import { RouterDonasi } from "@/lib/router_hipmi/router_donasi";
import { MainColor } from "@/app_modules/_global/color/color_pallet";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
import { ActionIcon, SimpleGrid, Stack, Text } from "@mantine/core"; import { ActionIcon, SimpleGrid, Stack, Text } from "@mantine/core";
import { import {
IconGiftCardFilled, IconGiftCardFilled,
@@ -48,7 +52,7 @@ export default function LayoutDonasi({
return ( return (
<> <>
<UIGlobal_LayoutTamplate {/* <UIGlobal_LayoutTamplate
header={ header={
<UIGlobal_LayoutHeaderTamplate <UIGlobal_LayoutHeaderTamplate
title="Donasi" title="Donasi"
@@ -84,7 +88,41 @@ export default function LayoutDonasi({
} }
> >
{children} {children}
</UIGlobal_LayoutTamplate> </UIGlobal_LayoutTamplate> */}
<UI_NewLayoutTamplate>
<UI_NewHeader>
<Component_Header title="Donasi" routerLeft={RouterCrowd.main} />
</UI_NewHeader>
<UI_NewChildren>{children}</UI_NewChildren>
<UI_NewFooter>
<SimpleGrid cols={listFooter.length} h={"9vh"} mx={"xs"} w={"100%"}>
{listFooter.map((e, i) => (
<Stack key={i} align="center" justify="center" spacing={0}>
<ActionIcon
// disabled={e.path === "" ? true : false}
variant="transparent"
c={active === i ? MainColor.yellow : MainColor.white}
onClick={() =>
e.path === ""
? ComponentGlobal_NotifikasiPeringatan("Cooming Soon")
: (router.replace(e.path), setActive(i))
}
>
{e.icon}
</ActionIcon>
<Text
c={active === i ? MainColor.yellow : MainColor.white}
fz={"xs"}
lineClamp={1}
>
{e.name}
</Text>
</Stack>
))}
</SimpleGrid>
</UI_NewFooter>
</UI_NewLayoutTamplate>
</> </>
); );
} }