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

# style:

Browse Source 
- UI Investasi
- UI Donasi
## No issue
This commit is contained in:
Bagasbanuna02
2024-08-01 16:48:54 +08:00
parent 810ce1c00d
commit 2ab3a8abb1
135 changed files with 2222 additions and 1652 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/app_modules/donasi/detail/detail_donasi_saya/index.tsx
View File

@@ -1,34 +1,13 @@
"use client";
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
import {
ActionIcon,
AspectRatio,
Avatar,
Divider,
Grid,
Group,
Image,
Paper,
Progress,
Stack,
Text,
Title,
} from "@mantine/core";
import {
IconClover,
IconMessageChatbot,
IconMoneybag,
IconCircleChevronRight,
} from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import ComponentDonasi_NotedBox from "../../component/noted_box";
import { Stack, Text, Title } from "@mantine/core";
import { useState } from "react";
import { MODEL_DONASI, MODEL_DONASI_INVOICE } from "../../model/interface";
import TampilanRupiahDonasi from "../../component/tampilan_rupiah";
import ComponentDonasi_CeritaPenggalangMain from "../../component/detail_main/cerita_penggalang";
import { ComponentDonasi_DetailDataMain } from "../../component/detail_main/detail_data_donasi";
import ComponentDonasi_InformasiPenggalangMain from "../../component/detail_main/informasi_penggalang";
import ComponentDonasi_CeritaPenggalangMain from "../../component/detail_main/cerita_penggalang";
import TampilanRupiahDonasi from "../../component/tampilan_rupiah";
import { MODEL_DONASI_INVOICE } from "../../model/interface";
import { AccentColor } from "@/app_modules/_global/color/color_pallet";
export default function DetailDonasiSaya({
dataDonasi,
@@ -40,27 +19,32 @@ export default function DetailDonasiSaya({
const [invoice, setInvoice] = useState(dataDonasi);
return (
<>
<Stack>
<Stack spacing={0}>
<Stack pb={"lg"}>
<Stack
spacing={0}
style={{
padding: "15px",
border: `2px solid ${AccentColor.blue}`,
backgroundColor: AccentColor.darkblue,
borderRadius: "10px",
color: "white",
}}
align={"center"}
>
<Text>Donasi Saya:</Text>
<Title order={4} c={"blue"}>
<TampilanRupiahDonasi nominal={+invoice.nominal} />
<TampilanRupiahDonasi nominal={+invoice?.nominal} />
</Title>
</Stack>
<ComponentDonasi_DetailDataMain
donasi={invoice.Donasi}
donasi={invoice?.Donasi}
countDonatur={countDonatur}
/>
<ComponentDonasi_InformasiPenggalangMain
author={invoice.Donasi.Author}
author={invoice?.Donasi.Author}
/>
<ComponentDonasi_CeritaPenggalangMain donasi={invoice.Donasi} />
<ComponentDonasi_CeritaPenggalangMain donasi={invoice?.Donasi} />
</Stack>
</>
);
}

8
src/app_modules/donasi/detail/detail_donasi_saya/layout.tsx
View File

@@ -4,13 +4,15 @@ import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi"
import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate"
import React from "react"
import ComponentDonasi_HeaderTamplate from "../../component/header_tamplate"
import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate"
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate"
export default function LayoutDetailDonasiSaya({children}: {children: React.ReactNode}){
return<>
<AppComponentGlobal_LayoutTamplate
header={<ComponentDonasi_HeaderTamplate title="Detail Donasi Saya" route={RouterDonasi.main_donasi_saya} />}
<UIGlobal_LayoutTamplate
header={<UIGlobal_LayoutHeaderTamplate title="Detail Donasi Saya" routerLeft={RouterDonasi.main_donasi_saya} />}
>
{children}
</AppComponentGlobal_LayoutTamplate>
</UIGlobal_LayoutTamplate>
</>
}

37
src/app_modules/donasi/detail/detail_draft/index.tsx
View File

@@ -11,9 +11,10 @@ import { NotifPeringatan } from "../../component/notifikasi/notif_peringatan";
import { Donasi_funGantiStatus } from "../../fun/update/fun_ganti_status";
import { gs_donasi_tabs_posting } from "../../global_state";
import { MODEL_DONASI } from "../../model/interface";
import { useState } from "react";
import { useShallowEffect } from "@mantine/hooks";
import { Donasi_getOneById } from "../../fun/get/get_one_donasi_by_id";
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
import mqtt_client from "@/util/mqtt_client";
import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_admin";
export default function DetailDraftDonasi({
dataDonasi,
@@ -52,15 +53,31 @@ function ButtonAjukanPenggalangan({
gs_donasi_tabs_posting
);
async function onCLick() {
await Donasi_funGantiStatus(dataDonasi.id, "2").then((res) => {
if (res.status === 200) {
router.push(RouterDonasi.main_galang_dana);
const res = await Donasi_funGantiStatus(dataDonasi.id, "2");
if (res.status === 200) {
const dataNotif = {
appId: res.data?.id as any,
status: res.data?.DonasiMaster_Status?.name as any,
userId: res.data?.authorId as any,
pesan: res.data?.title as any,
kategoriApp: "DONASI",
title: "Mengajukan review",
};
const notif = await notifikasiToAdmin_funCreate({
data: dataNotif as any,
});
if (notif.status === 201) {
mqtt_client.publish("ADMIN", JSON.stringify({ count: 1 }));
setTabsPostingDonasi("Review");
NotifBerhasil("Berhasil Diajukan");
} else {
NotifPeringatan(res.message);
ComponentGlobal_NotifikasiBerhasil("Berhasil Diajukan");
router.push(RouterDonasi.main_galang_dana);
}
});
} else {
ComponentGlobal_NotifikasiPeringatan(res.message);
}
}
return (
<>

18
src/app_modules/donasi/detail/detail_kabar/index.tsx
View File

@@ -15,15 +15,27 @@ import {
import moment from "moment";
import { MODEL_DONASI_KABAR } from "../../model/interface";
import { useState } from "react";
import { AccentColor } from "@/app_modules/_global/color/color_pallet";
export default function DetailKabarDonasi({dataDonasi}: {dataDonasi: MODEL_DONASI_KABAR}) {
const [kabar, setKabar] = useState(dataDonasi)
return (
<>
<Stack>
<Stack
style={{
backgroundColor: AccentColor.darkblue,
border: `2px solid ${AccentColor.blue}`,
padding: "20px",
borderRadius: "10px",
color: "white",
marginBottom: "15px",
}}
>
<Stack>
<Text fz={"xs"}>{moment(Date.now()).format("ll")}</Text>
<Title order={5}>{kabar.title}</Title>
<Group position="right">
<Text fz={"xs"}>{moment(Date.now()).format("ll")}</Text>
</Group>
<Title align="center" order={4}>{kabar.title}</Title>
{kabar.imagesId === null ? (
""
) : (

13
src/app_modules/donasi/detail/detail_kabar/layout.tsx
View File

@@ -1,10 +1,9 @@
"use client";
import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
import { useRouter } from "next/navigation";
import React from "react";
import FooterDonasi from "../../component/footer_close_donasi";
import ComponentDonasi_HeaderTamplate from "../../component/header_tamplate";
export default function LayoutDetailKabarDonasi({
children,
@@ -14,12 +13,12 @@ export default function LayoutDetailKabarDonasi({
const router = useRouter();
return (
<>
<AppComponentGlobal_LayoutTamplate
header={<ComponentDonasi_HeaderTamplate title="Detail Kabar" hideBack={true} />}
footer={<FooterDonasi />}
<UIGlobal_LayoutTamplate
header={<UIGlobal_LayoutHeaderTamplate title="Detail Kabar" />}
// footer={<FooterDonasi />}
>
{children}
</AppComponentGlobal_LayoutTamplate>
</UIGlobal_LayoutTamplate>
</>
);
}

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

@@ -10,17 +10,19 @@ import React from "react";
export default function LayoutCeritaPenggalangDonasi({
children,
statusDonasiId,
donasiId
donasiId,
}: {
children: React.ReactNode;
statusDonasiId: string;
donasiId: string
donasiId: string;
}) {
if (statusDonasiId !== "1") {
return (
<>
<UIGlobal_LayoutTamplate
header={<UIGlobal_LayoutHeaderTamplate title="Cerita Penggalang Dana" />}
header={
<UIGlobal_LayoutHeaderTamplate title="Cerita Penggalang Dana" />
}
>
{children}
</UIGlobal_LayoutTamplate>
@@ -28,11 +30,11 @@ export default function LayoutCeritaPenggalangDonasi({
);
}
return (
<AppComponentGlobal_LayoutTamplate
header={<ComponentDonasi_HeaderTamplate title="Cerita Penggalang Dana" />}
footer={<ButtonDonasi donasiId={donasiId}/>}
<UIGlobal_LayoutTamplate
header={<UIGlobal_LayoutHeaderTamplate title="Cerita Penggalang Dana" />}
footer={<ButtonDonasi donasiId={donasiId} />}
>
{children}
</AppComponentGlobal_LayoutTamplate>
</UIGlobal_LayoutTamplate>
);
}

93
src/app_modules/donasi/detail/detail_main/donatur/index.tsx
View File

@@ -1,23 +1,13 @@
"use client";
"use dev";
import { AccentColor } from "@/app_modules/_global/color/color_pallet";
import ComponentDonasi_IsEmptyData from "@/app_modules/donasi/component/is_empty_data";
import TampilanRupiahDonasi from "@/app_modules/donasi/component/tampilan_rupiah";
import { MODEL_DONASI_INVOICE } from "@/app_modules/donasi/model/interface";
import {
Avatar,
Center,
Grid,
Group,
Paper,
SimpleGrid,
Stack,
Text,
Title,
} from "@mantine/core";
import { IconMoodSmile, IconMoodSmileBeam } from "@tabler/icons-react";
import _, { size } from "lodash";
import moment from "moment";
import { Center, Grid, Group, Paper, Stack, Text, Title } from "@mantine/core";
import { IconMoodSmileBeam } from "@tabler/icons-react";
import _ from "lodash";
import { useState } from "react";
export default function DonaturDonasi({
@@ -30,44 +20,45 @@ export default function DonaturDonasi({
return (
<>
<SimpleGrid
cols={4}
spacing="md"
breakpoints={[
{ maxWidth: "62rem", cols: 3, spacing: "md" },
{ maxWidth: "48rem", cols: 2, spacing: "sm" },
{ maxWidth: "36rem", cols: 1, spacing: "sm" },
]}
>
{donatur.map((e, i) => (
<Paper key={i} bg={"gray.1"} p={"sm"}>
<Grid>
<Grid.Col span={3}>
<Center h={"100%"}>
{/* <Avatar variant="filled" radius={"xl"} size={"md"} /> */}
<IconMoodSmileBeam size={50} />
</Center>
</Grid.Col>
<Grid.Col span={9}>
<Stack spacing={0}>
<Title order={5}>{e.Author.username}</Title>
<Group spacing={"xs"}>
<Text fz={"xs"}>Berdonasi sebesar</Text>
<Text truncate fw={"bold"}>
<TampilanRupiahDonasi nominal={+e.nominal} />
</Text>
</Group>
<Text fz={"xs"}>
{new Intl.DateTimeFormat("id-ID", {
dateStyle: "full",
}).format(e?.createdAt)}
{donatur.map((e, i) => (
<Paper
key={i}
style={{
backgroundColor: AccentColor.blue,
border: `2px solid ${AccentColor.darkblue}`,
padding: "15px",
cursor: "pointer",
borderRadius: "10px",
color: "white",
marginBottom: "10px",
}}
>
<Grid>
<Grid.Col span={3}>
<Center h={"100%"}>
{/* <Avatar variant="filled" radius={"xl"} size={"md"} /> */}
<IconMoodSmileBeam size={50} />
</Center>
</Grid.Col>
<Grid.Col span={9}>
<Stack spacing={0}>
<Title order={5}>{e.Author.username}</Title>
<Group spacing={"xs"}>
<Text fz={"xs"}>Berdonasi sebesar</Text>
<Text truncate fw={"bold"}>
<TampilanRupiahDonasi nominal={+e.nominal} />
</Text>
</Stack>
</Grid.Col>
</Grid>
</Paper>
))}
</SimpleGrid>
</Group>
<Text fz={"xs"}>
{new Intl.DateTimeFormat("id-ID", {
dateStyle: "full",
}).format(e?.createdAt)}
</Text>
</Stack>
</Grid.Col>
</Grid>
</Paper>
))}
</>
);
}

10
src/app_modules/donasi/detail/detail_main/donatur/layout.tsx
View File

@@ -1,8 +1,8 @@
"use client";
import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
import React from "react";
import ComponentDonasi_HeaderTamplate from "../../../component/header_tamplate";
export default function LayoutDonaturDonasi({
children,
@@ -11,9 +11,11 @@ export default function LayoutDonaturDonasi({
}) {
return (
<>
<AppComponentGlobal_LayoutTamplate header={<ComponentDonasi_HeaderTamplate title="Donatur" />}>
<UIGlobal_LayoutTamplate
header={<UIGlobal_LayoutHeaderTamplate title="Donatur" />}
>
{children}
</AppComponentGlobal_LayoutTamplate>
</UIGlobal_LayoutTamplate>
</>
);
}

48
src/app_modules/donasi/detail/detail_main/kabar/index.tsx
View File

@@ -1,25 +1,11 @@
"use client";
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
import ComponentDonasi_ListKabar from "@/app_modules/donasi/component/detail_main/list_kabar";
import ComponentDonasi_IsEmptyData from "@/app_modules/donasi/component/is_empty_data";
import { MODEL_DONASI_KABAR } from "@/app_modules/donasi/model/interface";
import {
ActionIcon,
Avatar,
Box,
Group,
Paper,
SimpleGrid,
Spoiler,
Stack,
Text,
Title,
} from "@mantine/core";
import { IconCircleChevronRight } from "@tabler/icons-react";
import { Box } from "@mantine/core";
import _ from "lodash";
import moment from "moment";
import { useRouter } from "next/navigation";
import { useState } from "react";
export default function KabarDonasi({
@@ -27,31 +13,21 @@ export default function KabarDonasi({
}: {
listKabar: MODEL_DONASI_KABAR[];
}) {
const router = useRouter();
const [kabar, setKabar] = useState(listKabar);
if (_.isEmpty(kabar)) return <ComponentDonasi_IsEmptyData />;
if (_.isEmpty(kabar)) return <ComponentGlobal_IsEmptyData />;
return (
<>
<SimpleGrid
cols={4}
spacing="lg"
breakpoints={[
{ maxWidth: "62rem", cols: 3, spacing: "md" },
{ maxWidth: "48rem", cols: 2, spacing: "sm" },
{ maxWidth: "36rem", cols: 1, spacing: "sm" },
]}
>
{kabar.map((e, i) => (
<Box key={i}>
<ComponentDonasi_ListKabar
kabar={e}
route={RouterDonasi.detail_kabar}
/>
</Box>
))}
</SimpleGrid>
{kabar.map((e, i) => (
<Box key={i}>
<ComponentDonasi_ListKabar
kabar={e}
route={RouterDonasi.detail_kabar}
/>
</Box>
))}
</>
);
}

11
src/app_modules/donasi/detail/detail_main/kabar/layout.tsx
View File

@@ -1,9 +1,8 @@
"use client";
import { AppShell } from "@mantine/core";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
import React from "react";
import ComponentDonasi_HeaderTamplate from "../../../component/header_tamplate";
import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
export default function LayoutKabarDonasi({
children,
@@ -12,11 +11,11 @@ export default function LayoutKabarDonasi({
}) {
return (
<>
<AppComponentGlobal_LayoutTamplate
header={<ComponentDonasi_HeaderTamplate title="Kabar Terbaru" />}
<UIGlobal_LayoutTamplate
header={<UIGlobal_LayoutHeaderTamplate title="Kabar Terbaru" />}
>
{children}
</AppComponentGlobal_LayoutTamplate>
</UIGlobal_LayoutTamplate>
</>
);
}

2
src/app_modules/donasi/detail/detail_publish/index.tsx
View File

@@ -22,7 +22,7 @@ export default function DetailPublishDonasi({
return (
<>
{/* <pre>{JSON.stringify(donasi,null,2)}</pre> */}
<Stack spacing={40}>
<Stack spacing={"xl"} pb={"lg"}>
<ComponentDonasi_DetailDataMain donasi={donasi} countDonatur={countDonatur} userLoginId={userLoginId}/>
<ComponentDonasi_InformasiPenggalangMain author={donasi.Author}/>
<ComponentDonasi_CeritaPenggalangMain donasi={donasi} />

2
src/app_modules/donasi/detail/detail_publish/layout.tsx
View File

@@ -26,7 +26,7 @@ export default function LayoutDetailPublishDonasi({
const listPage = [
{
id: "1",
name: "Kabar",
name: "Daftar Kabar",
icon: <IconMessageShare />,
path: RouterDonasi.list_kabar + donasiId,
},

40
src/app_modules/donasi/detail/detail_review/index.tsx
View File

@@ -1,21 +1,19 @@
"use client";
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
import {
Button,
Stack
} from "@mantine/core";
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
import { Button, Stack } from "@mantine/core";
import { useAtom } from "jotai";
import { useRouter } from "next/navigation";
import { useState } from "react";
import ComponentDonasi_DetailDataGalangDana from "../../component/detail_galang_dana/detail_data_donasi";
import ComponentDonasi_CeritaPenggalangMain from "../../component/detail_main/cerita_penggalang";
import { NotifBerhasil } from "../../component/notifikasi/notif_berhasil";
import { NotifPeringatan } from "../../component/notifikasi/notif_peringatan";
import { Donasi_funGantiStatus } from "../../fun/update/fun_ganti_status";
import { gs_donasi_tabs_posting } from "../../global_state";
import { MODEL_DONASI } from "../../model/interface";
import { MainColor } from "@/app_modules/_global/color/color_pallet";
import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_admin";
import mqtt_client from "@/util/mqtt_client";
export default function DetailReviewDonasi({
dataDonasi,
@@ -42,16 +40,32 @@ function ButtonBatalReview({ donasi }: { donasi: MODEL_DONASI }) {
);
async function onCLick() {
await Donasi_funGantiStatus(donasi.id, "3").then((res) => {
if (res.status === 200) {
const res = await Donasi_funGantiStatus(donasi.id, "3");
if (res.status === 200) {
const dataNotif = {
appId: res.data?.id as any,
status: res.data?.DonasiMaster_Status?.name as any,
userId: res.data?.authorId as any,
pesan: res.data?.title as any,
kategoriApp: "DONASI",
title: "Membatalkan review",
};
const notif = await notifikasiToAdmin_funCreate({
data: dataNotif as any,
});
if (notif.status === 201) {
mqtt_client.publish("ADMIN", JSON.stringify({ count: 1 }));
setTabsPostingDonasi("Draft");
NotifBerhasil("Berhasil Dibatalkan");
ComponentGlobal_NotifikasiBerhasil("Berhasil Dibatalkan");
setLoading(true);
router.push(RouterDonasi.main_galang_dana);
} else {
NotifPeringatan(res.message);
}
});
} else {
ComponentGlobal_NotifikasiPeringatan(res.message);
}
}
return (
<>