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

Alur pembayaran donasi

Browse Source 
# feat
- Tampilan invoce
- Proses acc admin
- Transaksi berhasil
# Issue: Hitungan progres masih salah
This commit is contained in:
Bagasbanuna02
2024-01-08 13:56:14 +08:00
parent 4fc158bdc5
commit b4fe35e7d8
113 changed files with 2840 additions and 1274 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,159 +1,66 @@
"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 {
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 BoxInformasiDonasi from "../../component/box_informasi";
import ComponentDonasi_NotedBox from "../../component/noted_box";
import { useState } from "react";
import { MODEL_DONASI, MODEL_DONASI_INVOICE } from "../../model/interface";
import TampilanRupiahDonasi from "../../component/tampilan_rupiah";
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";
export default function DetailDonasiSaya() {
export default function DetailDonasiSaya({
dataDonasi,
countDonatur,
}: {
dataDonasi: MODEL_DONASI_INVOICE;
countDonatur: number;
}) {
const [invoice, setInvoice] = useState(dataDonasi);
return (
<>
<Stack>
<Stack spacing={0}>
<Text>Donasi Saya:</Text>
<Title order={4} c={"blue"}>
Rp. 100.000
<TampilanRupiahDonasi nominal={+invoice.nominal} />
</Title>
</Stack>
<DetailDonasi/>
<InformasiPenggalangDana/>
<CeritaPenggalangDana/>
<ComponentDonasi_DetailDataMain
donasi={invoice.Donasi}
countDonatur={countDonatur}
/>
<ComponentDonasi_InformasiPenggalangMain
author={invoice.Donasi.Author}
/>
<ComponentDonasi_CeritaPenggalangMain donasi={invoice.Donasi} />
</Stack>
</>
);
}
function DetailDonasi() {
const router = useRouter();
return (
<>
<Stack>
<Stack>
<AspectRatio ratio={16 / 9}>
<Paper radius={"md"}>
<Image alt="Foto" src={"/aset/no-img.png"} />
</Paper>
</AspectRatio>
<Title order={4}>Judul Donasi</Title>
<Stack spacing={0}>
<Group position="apart">
<Stack spacing={0}>
<Text fz={12}>Dana dibutuhkan</Text>
<Title order={4} c="blue">
Rp. 50.000.000
</Title>
</Stack>
<Text fz={"xs"}>
Sisa hari{" "}
<Text span inherit fw={"bold"}>
100
</Text>{" "}
</Text>
</Group>
</Stack>
<Progress value={50} />
<Grid>
<Grid.Col
span={"auto"}
onClick={() => router.push(RouterDonasi.donatur)}
>
<Stack align="center" spacing={"xs"}>
<Group>
<IconClover color="skyblue" />
<Text>50</Text>
</Group>
<Text>Donatur</Text>
</Stack>
</Grid.Col>
<Divider orientation="vertical" />
<Grid.Col
span={"auto"}
onClick={() => router.push(RouterDonasi.kabar)}
>
<Stack spacing={"sm"} align="center">
<IconMessageChatbot color="skyblue" />
<Text>Kabar Terbaru</Text>
</Stack>
</Grid.Col>
<Divider orientation="vertical" />
<Grid.Col
span={"auto"}
onClick={() => router.push(RouterDonasi.pencairan_dana)}
>
<Stack spacing={"sm"} align="center">
<IconMoneybag color="skyblue" />
<Text>Pencairan Dana</Text>
</Stack>
</Grid.Col>
</Grid>
</Stack>
</Stack>
</>
);
}
function InformasiPenggalangDana() {
const router = useRouter();
return (
<>
<Stack spacing={"xs"}>
<Title order={4}>Informasi Penggalang Dana</Title>
<Paper p={"sm"} withBorder>
<Stack>
<Group position="apart">
<Title order={5}>Penggalang Dana</Title>
<ActionIcon
variant="transparent"
onClick={() => router.push(RouterDonasi.penggalang_dana)}
>
<IconCircleChevronRight />
</ActionIcon>
</Group>
<Group>
<Avatar radius={"xl"} variant="filled" bg={"blue"}>
U
</Avatar>
<Text>Username</Text>
</Group>
<BoxInformasiDonasi
informasi="Semua dana yang terkumpul akan disalurkan ke penggalang dana,
kabar penyaluran dapat dilihat di halaman kabar terbaru."
/>
</Stack>
</Paper>
</Stack>
</>
);
}
function CeritaPenggalangDana() {
const router = useRouter();
return (
<>
<Stack spacing={"xs"}>
<Title order={4}>Cerita Penggalang Dana</Title>
<Paper p={"sm"} withBorder>
<Stack>
<Group position="apart">
<Text>1 Des 2023</Text>
<ActionIcon
variant="transparent"
onClick={() => router.push(RouterDonasi.cerita_penggalang)}
>
<IconCircleChevronRight />
</ActionIcon>
</Group>
<Text lineClamp={4}>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat
doloremque perferendis laborum? Cupiditate sed consequatur quasi
doloremque, consequuntur libero? Vel nam esse fuga, sed et
repellat commodi nemo quia dignissimos?
</Text>
{/* <Text c={"blue"}>Baca selengkapnya</Text> */}
</Stack>
</Paper>
</Stack>
</>
);
}

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

@@ -3,11 +3,12 @@
import { AppShell } from "@mantine/core"
import React from "react"
import HeaderTamplateDonasi from "../../component/header_tamplate"
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi"
export default function LayoutDetailDonasiSaya({children}: {children: React.ReactNode}){
return<>
<AppShell
header={<HeaderTamplateDonasi title="Detail Donasi Saya"/>}
header={<HeaderTamplateDonasi title="Detail Donasi Saya" route={RouterDonasi.main_donasi_saya} />}
>
{children}
</AppShell>

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

@@ -24,17 +24,18 @@ import {
IconMessageChatbot,
} from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import BoxInformasiDonasi from "../../component/box_informasi";
import ComponentDonasi_NotedBox from "../../component/noted_box";
import { useAtom } from "jotai";
import { gs_donasi_tabs_posting } from "../../global_state";
import { MODEL_DONASI } from "../../model/interface";
import { useState } from "react";
import TampilanRupiahDonasi from "../../component/tampilan_rupiah";
import ComponentCeritaPenggalangDanaDonasi from "../../component/detail_main/cerita_penggalang";
import ComponentDonasi_CeritaPenggalangMain from "../../component/detail_main/cerita_penggalang";
import { Donasi_funGantiStatus } from "../../fun/update/fun_ganti_status";
import { NotifBerhasil } from "../../component/notifikasi/notif_berhasil";
import { NotifPeringatan } from "../../component/notifikasi/notif_peringatan";
import { useShallowEffect } from "@mantine/hooks";
import ComponentDonasi_DetailDataGalangDana from "../../component/detail_galang_dana/detail_data_donasi";
export default function DetailDraftDonasi({
dataDonasi,
@@ -44,8 +45,8 @@ export default function DetailDraftDonasi({
return (
<>
<Stack spacing={"xl"}>
<DetailDonasi dataDonasi={dataDonasi} />
<ComponentCeritaPenggalangDanaDonasi donasi={dataDonasi} />
<ComponentDonasi_DetailDataGalangDana donasi={dataDonasi} />
<ComponentDonasi_CeritaPenggalangMain donasi={dataDonasi} />
<ButtonAjukanPenggalangan dataDonasi={dataDonasi} />
</Stack>
</>
@@ -86,47 +87,47 @@ function ButtonAjukanPenggalangan({
);
}
function DetailDonasi({ dataDonasi }: { dataDonasi: MODEL_DONASI }) {
const [donasi, setDonasi] = useState(dataDonasi);
useShallowEffect(() => {
setDonasi(dataDonasi);
}, [dataDonasi]);
return (
<>
<Stack>
<Stack>
<AspectRatio ratio={16 / 9}>
<Paper radius={"md"}>
<Image
alt="Foto"
src={RouterDonasi.api_image + `${donasi.imageDonasi.url}`}
/>
</Paper>
</AspectRatio>
<Stack spacing={0}>
<Title order={4}>{donasi.title}</Title>
<Text fz={"xs"}>
Durasi: {donasi.DonasiMaster_Durasi.name} hari
</Text>
</Stack>
<Stack spacing={0}>
<Group position="apart">
<Stack spacing={0}>
<Text fz={12}>Dana dibutuhkan</Text>
<Title order={4} c="blue">
<TampilanRupiahDonasi nominal={+donasi.target} />
</Title>
</Stack>
<Stack spacing={0}>
<Text fz={12}>Kategori</Text>
<Title order={4} c="blue">
{donasi.DonasiMaster_Ketegori.name}
</Title>
</Stack>
</Group>
</Stack>
</Stack>
</Stack>
</>
);
}
// function DetailDonasi({ dataDonasi }: { dataDonasi: MODEL_DONASI }) {
// const [donasi, setDonasi] = useState(dataDonasi);
// useShallowEffect(() => {
// setDonasi(dataDonasi);
// }, [dataDonasi]);
// return (
// <>
// <Stack>
// <Stack>
// <AspectRatio ratio={16 / 9}>
// <Paper radius={"md"}>
// <Image
// alt="Foto"
// src={RouterDonasi.api_image + `${donasi.imageDonasi.url}`}
// />
// </Paper>
// </AspectRatio>
// <Stack spacing={0}>
// <Title order={4}>{donasi.title}</Title>
// <Text fz={"xs"}>
// Durasi: {donasi.DonasiMaster_Durasi.name} hari
// </Text>
// </Stack>
// <Stack spacing={0}>
// <Group position="apart">
// <Stack spacing={0}>
// <Text fz={12}>Dana dibutuhkan</Text>
// <Title order={4} c="blue">
// <TampilanRupiahDonasi nominal={+donasi.target} />
// </Title>
// </Stack>
// <Stack spacing={0}>
// <Text fz={12}>Kategori</Text>
// <Title order={4} c="blue">
// {donasi.DonasiMaster_Ketegori.name}
// </Title>
// </Stack>
// </Group>
// </Stack>
// </Stack>
// </Stack>
// </>
// );
// }

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

@@ -9,9 +9,11 @@ import React from "react";
export default function LayoutCeritaPenggalangDonasi({
children,
statusDonasiId,
donasiId
}: {
children: React.ReactNode;
statusDonasiId: string;
donasiId: string
}) {
if (statusDonasiId !== "1") {
return (
@@ -27,7 +29,7 @@ export default function LayoutCeritaPenggalangDonasi({
return (
<AppShell
header={<HeaderTamplateDonasi title="Cerita Penggalang Dana" />}
footer={<ButtonDonasi />}
footer={<ButtonDonasi donasiId={donasiId}/>}
>
{children}
</AppShell>

149
src/app_modules/donasi/detail/detail_main/index.tsx
View File

@@ -27,144 +27,25 @@ import {
IconMoneybag,
} from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import BoxInformasiDonasi from "../../component/box_informasi";
import ComponentDonasi_NotedBox from "../../component/noted_box";
import { ComponentDonasi_DetailDataMain } from "../../component/detail_main/detail_data_donasi";
import { MODEL_DONASI } from "../../model/interface";
import ComponentDonasi_CeritaPenggalangMain from "../../component/detail_main/cerita_penggalang";
import ComponentDonasi_InformasiPenggalangMain from "../../component/detail_main/informasi_penggalang";
export default function DetailMainDonasi() {
export default function DetailMainDonasi({
dataDonasi,
countDonatur
}: {
dataDonasi: MODEL_DONASI;
countDonatur: number
}) {
return (
<>
<Stack spacing={40}>
<DetailDonasi />
<InformasiPenggalangDana />
<CeritaPenggalangDana />
</Stack>
</>
);
}
function DetailDonasi() {
const router = useRouter();
return (
<>
<Stack>
<Stack>
<AspectRatio ratio={16 / 9}>
<Paper radius={"md"}>
<Image alt="Foto" src={"/aset/no-img.png"} />
</Paper>
</AspectRatio>
<Title order={4}>Judul Donasi</Title>
<Stack spacing={0}>
<Group position="apart">
<Stack spacing={0}>
<Text fz={12}>Dana dibutuhkan</Text>
<Title order={4} c="blue">
Rp. 50.000.000
</Title>
</Stack>
<Text fz={"xs"}>Sisa hari <Text span inherit fw={"bold"}>100</Text> </Text>
</Group>
</Stack>
<Progress value={50} />
<Grid>
<Grid.Col
span={"auto"}
onClick={() => router.push(RouterDonasi.donatur)}
>
<Stack align="center" spacing={"xs"}>
<Group>
<IconClover color="skyblue" />
<Text>50</Text>
</Group>
<Text>Donatur</Text>
</Stack>
</Grid.Col>
<Divider orientation="vertical" />
<Grid.Col
span={"auto"}
onClick={() => router.push(RouterDonasi.kabar)}
>
<Stack spacing={"sm"} align="center">
<IconMessageChatbot color="skyblue" />
<Text>Kabar Terbaru</Text>
</Stack>
</Grid.Col>
<Divider orientation="vertical" />
<Grid.Col
span={"auto"}
onClick={() => router.push(RouterDonasi.pencairan_dana)}
>
<Stack spacing={"sm"} align="center">
<IconMoneybag color="skyblue" />
<Text>Pencairan Dana</Text>
</Stack>
</Grid.Col>
</Grid>
</Stack>
</Stack>
</>
);
}
function InformasiPenggalangDana() {
const router = useRouter();
return (
<>
<Stack spacing={"xs"}>
<Title order={4}>Informasi Penggalang Dana</Title>
<Paper p={"sm"} withBorder>
<Stack>
<Group position="apart">
<Title order={5}>Penggalang Dana</Title>
<ActionIcon
variant="transparent"
onClick={() => router.push(RouterDonasi.penggalang_dana)}
>
<IconCircleChevronRight />
</ActionIcon>
</Group>
<Group>
<Avatar radius={"xl"} variant="filled" bg={"blue"}>
U
</Avatar>
<Text>Username</Text>
</Group>
<BoxInformasiDonasi
informasi="Semua dana yang terkumpul akan disalurkan ke penggalang dana,
kabar penyaluran dapat dilihat di halaman kabar terbaru."
/>
</Stack>
</Paper>
</Stack>
</>
);
}
function CeritaPenggalangDana() {
const router = useRouter();
return (
<>
<Stack spacing={"xs"}>
<Title order={4}>Cerita Penggalang Dana</Title>
<Paper p={"sm"} withBorder>
<Stack>
<Group position="apart">
<Text>1 Des 2023</Text>
<ActionIcon
variant="transparent"
onClick={() => router.push(RouterDonasi.cerita_penggalang)}
>
<IconCircleChevronRight />
</ActionIcon>
</Group>
<Text lineClamp={4}>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat
doloremque perferendis laborum? Cupiditate sed consequatur quasi
doloremque, consequuntur libero? Vel nam esse fuga, sed et
repellat commodi nemo quia dignissimos?
</Text>
{/* <Text c={"blue"}>Baca selengkapnya</Text> */}
</Stack>
</Paper>
<ComponentDonasi_DetailDataMain donasi={dataDonasi} countDonatur={countDonatur} />
<ComponentDonasi_InformasiPenggalangMain author={dataDonasi.Author} />
<ComponentDonasi_CeritaPenggalangMain donasi={dataDonasi} />
</Stack>
</>
);

4
src/app_modules/donasi/detail/detail_main/layout.tsx
View File

@@ -7,14 +7,16 @@ import ButtonDonasi from "../../component/footer_button_donasi";
export default function LayoutDetailMainDonasi({
children,
donasiId
}: {
children: React.ReactNode;
donasiId: string
}) {
return (
<>
<AppShell
header={<HeaderTamplateDonasi title="Detail Donasi" />}
footer={<ButtonDonasi />}
footer={<ButtonDonasi donasiId={donasiId}/>}
>
{children}
</AppShell>

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

@@ -1,93 +0,0 @@
"use client";
import {
Box,
Button,
Grid,
Group,
Paper,
Stack,
Text,
TextInput,
Title,
} from "@mantine/core";
import {
IconChevronRight,
IconMoodSmile,
IconMoodSmileBeam,
IconMoodSmileDizzy,
IconMoodXd,
} from "@tabler/icons-react";
export default function MasukanDonasi() {
const listNominal = [
{
id: 1,
nominal: 25000,
icon: <IconMoodSmile />,
},
{
id: 2,
nominal: 50000,
icon: <IconMoodSmileBeam />,
},
{
id: 3,
nominal: 75000,
icon: <IconMoodSmileDizzy />,
},
{
id: 4,
nominal: 10000,
icon: <IconMoodXd />,
},
];
return (
<>
<Stack>
<Box>
{listNominal.map((e) => (
<Paper
key={e.id}
withBorder
radius={"md"}
p={"sm"}
shadow="lg"
mb={"md"}
>
<Group position="apart">
<Group>
{e.icon}
<Title order={4}>
Rp.{" "}
{new Intl.NumberFormat("id-ID", {
maximumFractionDigits: 10,
}).format(e.nominal)}
</Title>
</Group>
<IconChevronRight />
</Group>
</Paper>
))}
</Box>
<Paper p={"sm"} withBorder shadow="lg">
<Stack>
<Text>Nominal Lainnya</Text>
<Grid>
<Grid.Col span={1}>
<Title order={4}>Rp.</Title>
</Grid.Col>
<Grid.Col span={11}>
<TextInput type="number" />
</Grid.Col>
</Grid>
<Text c={"gray"} fz={"xs"}>
Minimal Donasi Rp. 10.000
</Text>
</Stack>
</Paper>
<Button radius={"xl"}>Lanjutan Pembayaran</Button>
</Stack>
</>
);
}

21
src/app_modules/donasi/detail/detail_main/masukan_donasi/layout.tsx
View File

@@ -1,21 +0,0 @@
"use client";
import { AppShell } from "@mantine/core";
import React from "react";
import HeaderTamplateDonasi from "../../../component/header_tamplate";
export default function LayoutMasukanDonasi({
children,
}: {
children: React.ReactNode;
}) {
return (
<>
<AppShell
header={<HeaderTamplateDonasi title="Masukan Nominal Donasi" />}
>
{children}
</AppShell>
</>
);
}

4
src/app_modules/donasi/detail/detail_main/pencairan_dana/index.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import BoxInformasiDonasi from "@/app_modules/donasi/component/box_informasi";
import ComponentDonasi_NotedBox from "@/app_modules/donasi/component/noted_box";
import {
Avatar,
Button,
@@ -45,7 +45,7 @@ function BoxDanaDicarikan() {
<Text fz={"xs"}>Pencairan dana</Text>
</Grid.Col>
</Grid>
<BoxInformasiDonasi informasi=" Pencairan dana akan dilakukan oleh Admin HIPMI tanpa campur tangan
<ComponentDonasi_NotedBox informasi=" Pencairan dana akan dilakukan oleh Admin HIPMI tanpa campur tangan
pihak manapun, jika berita pencairan dana dibawah tidak sesuai
dengan kabar yang diberikan oleh PENGGALANG DANA. Maka pegguna lain
dapat melaporkannya pada Admin HIPMI !"/>

108
src/app_modules/donasi/detail/detail_main/penggalang_dana/index.tsx
View File

@@ -1,6 +1,13 @@
"use client";
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
import ComponentDonasi_BoxPublish from "@/app_modules/donasi/component/box_publish";
import TampilanRupiahDonasi from "@/app_modules/donasi/component/tampilan_rupiah";
import {
MODEL_DONASI,
MODEL_DONASI_INFO_PENGGALANG,
} from "@/app_modules/donasi/model/interface";
import { MODEL_AUTHOR } from "@/app_modules/home/models/interface";
import {
AspectRatio,
Avatar,
@@ -27,23 +34,38 @@ import {
} from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import router from "next/router";
import { useState } from "react";
export default function PenggalangDanaDonasi({
dataPenggalang,
}: {
dataPenggalang: MODEL_DONASI_INFO_PENGGALANG;
}) {
const [value, setValue] = useState(dataPenggalang);
export default function PenggalangDanaDonasi() {
return (
<>
<Stack>
<InformasiPenggalang />
<DataPengganganDana />
<InformasiPenggalang value={value as any} />
<ComponentDonasi_BoxPublish
dataDonasi={value.Donasi}
path={RouterDonasi.detail_publish}
/>
</Stack>
</>
);
}
function InformasiPenggalang() {
function InformasiPenggalang({ value }: { value: MODEL_AUTHOR }) {
return (
<>
<Paper radius={"md"}>
<Stack bg={"gray.1"} p={"md"} spacing={"xl"} sx={{borderRadius: "10px"}}>
<Stack
bg={"gray.1"}
p={"md"}
spacing={"xl"}
sx={{ borderRadius: "10px" }}
>
<Stack align="center" spacing={0}>
<Paper
radius={"100%"}
@@ -60,7 +82,7 @@ function InformasiPenggalang() {
/>
</Center>
</Paper>
<Title order={3}>@Username</Title>
<Title order={3}>@{value.username}</Title>
</Stack>
<Stack>
<Group>
@@ -69,7 +91,7 @@ function InformasiPenggalang() {
</Group>
<Group>
<IconPhone />
<Text>+62 81x xxx xxx</Text>
<Text>+{value.nomor}</Text>
</Group>
<Group>
<IconBrandGmail />
@@ -82,13 +104,12 @@ function InformasiPenggalang() {
);
}
function DataPengganganDana() {
function DataPengganganDana({ donasi }: { donasi: MODEL_DONASI[] }) {
const router = useRouter();
const { height, width } = useViewportSize();
return (
<>
<Title order={5}>Peggalangan Dana Yang Dilakukan</Title>
<SimpleGrid
cols={4}
spacing="lg"
@@ -98,42 +119,43 @@ function DataPengganganDana() {
{ maxWidth: "36rem", cols: 1, spacing: "sm" },
]}
>
{Array(5)
.fill(0)
.map((e, i) => (
<Box key={i} onClick={() => router.push(RouterDonasi.detail_main)}>
<Stack>
<Grid>
<Grid.Col span={7}>
<AspectRatio ratio={16 / 9}>
<Paper radius={"md"}>
<Image
alt="Foto"
src={"/aset/no-img.png"}
radius={"md"}
/>
</Paper>
</AspectRatio>
</Grid.Col>
<Grid.Col span={5}>
<Stack spacing={"xs"}>
<Text fz={"sm"} fw={"bold"} lineClamp={2}>
Judul Donasi Bisa Dilihat Disini Untuk Contoh
{donasi.map((e, i) => (
<Box
key={i}
onClick={() => router.push(RouterDonasi.detail_main + `${e.id}`)}
>
<Stack>
<Grid>
<Grid.Col span={7}>
<AspectRatio ratio={16 / 9}>
<Paper radius={"md"}>
<Image
alt="Foto"
src={RouterDonasi.api_gambar + `${e.imagesId}`}
radius={"md"}
/>
</Paper>
</AspectRatio>
</Grid.Col>
<Grid.Col span={5}>
<Stack spacing={"xs"}>
<Text fz={"sm"} fw={"bold"} lineClamp={2}>
{e.title}
</Text>
<Progress value={50} color="orange" />
<Stack spacing={0}>
<Text fz={"sm"}>Terkumpul</Text>
<Text fz={"sm"} fw={"bold"} c={"orange"} truncate>
<TampilanRupiahDonasi nominal={+e.target} />
</Text>
<Progress value={50} color="orange" />
<Stack spacing={0}>
<Text fz={"sm"}>Terkumpul</Text>
<Text fz={"sm"} fw={"bold"} c={"orange"} truncate>
Rp. 100.000.000
</Text>
</Stack>
</Stack>
</Grid.Col>
</Grid>
{width > 575 ? "" : <Divider />}
</Stack>
</Box>
))}
</Stack>
</Grid.Col>
</Grid>
{width > 575 ? "" : <Divider />}
</Stack>
</Box>
))}
</SimpleGrid>
</>
);

2
src/app_modules/donasi/detail/detail_main/penggalang_dana/layout.tsx
View File

@@ -12,7 +12,7 @@ export default function LayoutPenggalangDanaDonasi({
return (
<>
<AppShell
header={<HeaderTamplateDonasi title="Informasu Penggalangan Dana" />}
header={<HeaderTamplateDonasi title="Informasi Penggalangan Dana" />}
// footer={<FooterDonasi />}
>
{children}

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

@@ -22,146 +22,31 @@ import {
IconCircleChevronRight,
IconMessageChatbot,
} from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import BoxInformasiDonasi from "../../component/box_informasi";
import { MODEL_DONASI } from "../../model/interface";
import { useState } from "react";
import ComponentDonasi_CeritaPenggalangMain from "../../component/detail_main/cerita_penggalang";
import { ComponentDonasi_DetailDataMain } from "../../component/detail_main/detail_data_donasi";
import _ from "lodash";
import ComponentDonasi_InformasiPenggalangMain from "../../component/detail_main/informasi_penggalang";
export default function DetailPublishDonasi() {
export default function DetailPublishDonasi({
dataPublish,
countDonatur
}: {
dataPublish: MODEL_DONASI;
countDonatur: number
}) {
const [donasi, setDonasi] = useState(dataPublish);
return (
<>
{/* <pre>{JSON.stringify(donasi,null,2)}</pre> */}
<Stack spacing={40}>
<DetailDonasi />
<InformasiPenggalangDana />
<CeritaPenggalangDana />
<ComponentDonasi_DetailDataMain donasi={donasi} countDonatur={countDonatur} />
<ComponentDonasi_InformasiPenggalangMain author={donasi.Author}/>
<ComponentDonasi_CeritaPenggalangMain donasi={donasi} />
</Stack>
</>
);
}
function DetailDonasi() {
const router = useRouter();
return (
<>
<Stack>
<Stack>
<AspectRatio ratio={16 / 9}>
<Paper radius={"md"}>
<Image alt="Foto" src={"/aset/no-img.png"} />
</Paper>
</AspectRatio>
<Title order={4}>Judul Donasi</Title>
<Stack spacing={0}>
<Group position="apart">
<Stack spacing={0}>
<Text fz={12}>Dana dibutuhkan</Text>
<Title order={4} c="blue">
Rp. 50.000.000
</Title>
</Stack>
<Text fz={"xs"}>Sisa hari <Text span inherit fw={"bold"}>100</Text> </Text>
</Group>
</Stack>
<Progress value={50} />
<Grid>
<Grid.Col
span={"auto"}
onClick={() => router.push(RouterDonasi.donatur)}
>
<Stack align="center" spacing={"xs"}>
<Group>
<IconClover color="skyblue" />
<Text>50</Text>
</Group>
<Text>Donatur</Text>
</Stack>
</Grid.Col>
<Divider orientation="vertical" />
<Grid.Col
span={"auto"}
onClick={() => router.push(RouterDonasi.kabar)}
>
<Stack spacing={"sm"} align="center">
<IconMessageChatbot color="skyblue" />
<Text>Kabar Terbaru</Text>
</Stack>
</Grid.Col>
<Divider orientation="vertical" />
<Grid.Col
span={"auto"}
onClick={() => router.push(RouterDonasi.pencairan_dana)}
>
<Stack spacing={"sm"} align="center">
<IconMoneybag color="skyblue" />
<Text>Pencairan Dana</Text>
</Stack>
</Grid.Col>
</Grid>
</Stack>
</Stack>
</>
);
}
function InformasiPenggalangDana() {
const router = useRouter();
return (
<>
<Stack spacing={"xs"}>
<Title order={4}>Informasi Penggalang Dana</Title>
<Paper p={"sm"} withBorder>
<Stack>
<Group position="apart">
<Title order={5}>Penggalang Dana</Title>
<ActionIcon
variant="transparent"
onClick={() => router.push(RouterDonasi.penggalang_dana)}
>
<IconCircleChevronRight />
</ActionIcon>
</Group>
<Group>
<Avatar radius={"xl"} variant="filled" bg={"blue"}>
U
</Avatar>
<Text>Username</Text>
</Group>
<BoxInformasiDonasi
informasi="Semua dana yang terkumpul akan disalurkan ke penggalang dana,
kabar penyaluran dapat dilihat di halaman kabar terbaru."
/>
</Stack>
</Paper>
</Stack>
</>
);
}
function CeritaPenggalangDana() {
const router = useRouter();
return (
<>
<Stack spacing={"xs"}>
<Title order={4}>Cerita Penggalang Dana</Title>
<Paper p={"sm"} withBorder>
<Stack>
<Group position="apart">
<Text>1 Des 2023</Text>
<ActionIcon
variant="transparent"
onClick={() => router.push(RouterDonasi.cerita_penggalang)}
>
<IconCircleChevronRight />
</ActionIcon>
</Group>
<Text lineClamp={4}>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat
doloremque perferendis laborum? Cupiditate sed consequatur quasi
doloremque, consequuntur libero? Vel nam esse fuga, sed et
repellat commodi nemo quia dignissimos?
</Text>
{/* <Text c={"blue"}>Baca selengkapnya</Text> */}
</Stack>
</Paper>
</Stack>
</>
);
}

197
src/app_modules/donasi/detail/detail_reject/index.tsx
View File

@@ -26,26 +26,54 @@ import {
IconMessageChatbot,
} from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import BoxInformasiDonasi from "../../component/box_informasi";
import ComponentDonasi_NotedBox from "../../component/noted_box";
import { useAtom } from "jotai";
import { gs_donasi_tabs_posting } from "../../global_state";
import { useDisclosure } from "@mantine/hooks";
import { useState } from "react";
import { MODEL_DONASI } from "../../model/interface";
import { Donasi_funGantiStatus } from "../../fun/update/fun_ganti_status";
import { NotifBerhasil } from "../../component/notifikasi/notif_berhasil";
import { NotifGagal } from "../../component/notifikasi/notif_gagal";
import ComponentDonasi_CeritaPenggalangMain from "../../component/detail_main/cerita_penggalang";
import ComponentDonasi_DetailDataGalangDana from "../../component/detail_galang_dana/detail_data_donasi";
export default function DetailRejectDonasi() {
export default function DetailRejectDonasi({
dataReject,
}: {
dataReject: MODEL_DONASI;
}) {
const [donasi, setDonasi] = useState(dataReject);
return (
<>
<Stack spacing={"xl"}>
<AlasanPenolakan />
<DetailDonasi />
{/* <InformasiPenggalangDana /> */}
<CeritaPenggalangDana />
<ButtonAction />
<AlasanPenolakan catatan={donasi.catatan} />
<ComponentDonasi_DetailDataGalangDana donasi={donasi} />
<ComponentDonasi_CeritaPenggalangMain donasi={donasi} />
<ButtonAction donasiId={donasi.id} />
</Stack>
</>
);
}
function ButtonAction() {
function AlasanPenolakan({ catatan }: { catatan: string }) {
return (
<>
<Paper bg={"blue.1"} p={"sm"}>
<Title order={5}>Alasan penolakan</Title>
<Spoiler
maxHeight={50}
hideLabel="Sembunyikan"
showLabel="Selengkapnya"
>
{catatan}
</Spoiler>
</Paper>
</>
);
}
function ButtonAction({ donasiId }: { donasiId: string }) {
const [tabsPostingDonasi, setTabsPostingDonasi] = useAtom(
gs_donasi_tabs_posting
);
@@ -53,7 +81,14 @@ function ButtonAction() {
const [opened, { open, close }] = useDisclosure(false);
async function onCLick() {
router.push(RouterDonasi.main_galang_dana);
await Donasi_funGantiStatus(donasiId, "3").then((res) => {
if (res.status === 200) {
NotifBerhasil(res.message);
router.push(RouterDonasi.main_galang_dana);
} else {
NotifGagal(res.message);
}
});
setTabsPostingDonasi("Draft");
}
async function onDelete() {
@@ -68,19 +103,36 @@ function ButtonAction() {
bg={"orange"}
color="orange"
onClick={() => onCLick()}
compact
>
Ajukan Kembali
Edit Donasi
</Button>
<Button radius={"xl"} bg={"red"} color="red" onClick={() => open()}>
<Button
radius={"xl"}
bg={"red"}
color="red"
onClick={() => open()}
compact
>
Hapus Donasi
</Button>
</Group>
<Modal opened={opened} onClose={close} centered title="Yakin menghapus Penggalanagn Dana ini ?">
<Modal
opened={opened}
onClose={close}
centered
title="Yakin menghapus Penggalanagn Dana ini ?"
>
<Group position="center">
<Button radius={"xl"} variant="outline" onClick={close}>
Batal
</Button>
<Button radius={"xl"} variant="outline" color="red" onClick={() => onDelete()}>
<Button
radius={"xl"}
variant="outline"
color="red"
onClick={() => onDelete()}
>
Hapus
</Button>
</Group>
@@ -88,122 +140,3 @@ function ButtonAction() {
</>
);
}
function AlasanPenolakan() {
return (
<>
<Paper bg={"blue.1"} p={"sm"}>
<Title order={5}>Alasan penolakan</Title>
<Spoiler
maxHeight={50}
hideLabel="Sembunyikan"
showLabel="Selengkapnya"
>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam id
explicabo accusantium consequatur natus ex nisi perferendis rem
deserunt illo exercitationem illum doloremque, maxime voluptatibus
nihil rerum provident et? Nobis.
</Spoiler>
</Paper>
</>
);
}
function DetailDonasi() {
const router = useRouter();
return (
<>
<Stack>
<Stack>
<AspectRatio ratio={16 / 9}>
<Paper radius={"md"}>
<Image alt="Foto" src={"/aset/no-img.png"} />
</Paper>
</AspectRatio>
<Title order={4}>Judul Donasi</Title>
<Stack spacing={0}>
<Group position="apart">
<Stack spacing={0}>
<Text fz={12}>Dana dibutuhkan</Text>
<Title order={4} c="blue">
Rp. 50.000.000
</Title>
</Stack>
<Stack spacing={0}>
<Text fz={12}>Kategori</Text>
<Title order={4} c="blue">
Kesehatan
</Title>
</Stack>
</Group>
</Stack>
</Stack>
</Stack>
</>
);
}
function InformasiPenggalangDana() {
const router = useRouter();
return (
<>
<Stack spacing={"xs"}>
<Title order={4}>Informasi Penggalang Dana</Title>
<Paper p={"sm"} withBorder>
<Stack>
<Group position="apart">
<Title order={5}>Penggalang Dana</Title>
<ActionIcon
variant="transparent"
onClick={() => router.push(RouterDonasi.penggalang_dana)}
>
<IconCircleChevronRight />
</ActionIcon>
</Group>
<Group>
<Avatar radius={"xl"} variant="filled" bg={"blue"}>
U
</Avatar>
<Text>Username</Text>
</Group>
<BoxInformasiDonasi
informasi="Semua dana yang terkumpul akan disalurkan ke penggalang dana,
kabar penyaluran dapat dilihat di halaman kabar terbaru."
/>
</Stack>
</Paper>
</Stack>
</>
);
}
function CeritaPenggalangDana() {
const router = useRouter();
return (
<>
<Stack spacing={"xs"}>
<Title order={4}>Cerita Penggalang Dana</Title>
<Paper p={"sm"} withBorder>
<Stack>
<Group position="apart">
<Text>1 Des 2023</Text>
<ActionIcon
variant="transparent"
onClick={() => router.push(RouterDonasi.cerita_penggalang)}
>
<IconCircleChevronRight />
</ActionIcon>
</Group>
<Text lineClamp={4}>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat
doloremque perferendis laborum? Cupiditate sed consequatur quasi
doloremque, consequuntur libero? Vel nam esse fuga, sed et
repellat commodi nemo quia dignissimos?
</Text>
{/* <Text c={"blue"}>Baca selengkapnya</Text> */}
</Stack>
</Paper>
</Stack>
</>
);
}

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

@@ -24,16 +24,17 @@ import {
IconMessageChatbot,
} from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import BoxInformasiDonasi from "../../component/box_informasi";
import ComponentDonasi_NotedBox from "../../component/noted_box";
import { useAtom } from "jotai";
import { gs_donasi_tabs_posting } from "../../global_state";
import { MODEL_DONASI } from "../../model/interface";
import { useState } from "react";
import TampilanRupiahDonasi from "../../component/tampilan_rupiah";
import ComponentCeritaPenggalangDanaDonasi from "../../component/detail_main/cerita_penggalang";
import ComponentDonasi_CeritaPenggalangMain from "../../component/detail_main/cerita_penggalang";
import { Donasi_funGantiStatus } from "../../fun/update/fun_ganti_status";
import { NotifPeringatan } from "../../component/notifikasi/notif_peringatan";
import { NotifBerhasil } from "../../component/notifikasi/notif_berhasil";
import ComponentDonasi_DetailDataGalangDana from "../../component/detail_galang_dana/detail_data_donasi";
export default function DetailReviewDonasi({
dataDonasi,
@@ -44,14 +45,13 @@ export default function DetailReviewDonasi({
return (
<>
<Stack spacing={"xl"}>
<DetailDonasi donasi={donasi} />
<ComponentCeritaPenggalangDanaDonasi donasi={donasi} />
<ComponentDonasi_DetailDataGalangDana donasi={donasi} />
<ComponentDonasi_CeritaPenggalangMain donasi={donasi} />
<ButtonBatalReview donasi={donasi} />
</Stack>
</>
);
}
function ButtonBatalReview({ donasi }: { donasi: MODEL_DONASI }) {
const router = useRouter();
const [tabsPostingDonasi, setTabsPostingDonasi] = useAtom(
@@ -78,44 +78,4 @@ function ButtonBatalReview({ donasi }: { donasi: MODEL_DONASI }) {
);
}
function DetailDonasi({ donasi }: { donasi: MODEL_DONASI }) {
const router = useRouter();
return (
<>
<Stack>
<Stack>
<AspectRatio ratio={16 / 9}>
<Paper radius={"md"}>
<Image
alt="Foto"
src={RouterDonasi.api_gambar + `${donasi.imagesId}`}
/>
</Paper>
</AspectRatio>
<Stack spacing={0}>
<Title order={4}>{donasi.title}</Title>
<Text fz={"xs"}>
Durasi: {donasi.DonasiMaster_Durasi.name} hari
</Text>
</Stack>
<Stack spacing={0}>
<Group position="apart">
<Stack spacing={0}>
<Text fz={12}>Dana dibutuhkan</Text>
<Title order={4} c="blue">
<TampilanRupiahDonasi nominal={+donasi.target} />
</Title>
</Stack>
<Stack spacing={0}>
<Text fz={12}>Kategori</Text>
<Title order={4} c="blue">
{donasi.DonasiMaster_Ketegori.name}
</Title>
</Stack>
</Group>
</Stack>
</Stack>
</Stack>
</>
);
}