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

95
src/app_modules/donasi/component/box_publish.tsx Normal file
View File

@@ -0,0 +1,95 @@
"use client";
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
import {
SimpleGrid,
Box,
Stack,
Grid,
AspectRatio,
Paper,
Progress,
Divider,
Image,
Text,
} from "@mantine/core";
import router from "next/router";
import ComponentDonasi_TampilanHitungMundur from "./tampilan_hitung_mundur";
import TampilanRupiahDonasi from "./tampilan_rupiah";
import { MODEL_DONASI } from "../model/interface";
import { useViewportSize } from "@mantine/hooks";
import { useRouter } from "next/navigation";
import { useState } from "react";
export default function ComponentDonasi_BoxPublish({
dataDonasi,
path,
}: {
dataDonasi: MODEL_DONASI[];
path: string;
}) {
const { height, width } = useViewportSize();
const router = useRouter();
const [donasi, setDonasi] = useState(dataDonasi);
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" },
]}
>
{donasi.map((e, i) => (
<Box
key={i}
onClick={
() => router.push(path + `${e.id}`)
// toast("Cooming soon")
}
>
<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"}>
<Stack spacing={0}>
<Text fz={"sm"} fw={"bold"} lineClamp={2}>
{e.title}
</Text>
<ComponentDonasi_TampilanHitungMundur
durasi={e.DonasiMaster_Durasi.name}
publishTime={e.publishTime}
textSize={10}
/>
</Stack>
<Progress value={+e.progres} color="orange" />
<Stack spacing={0}>
<Text fz={"sm"}>Terkumpul</Text>
<Text fz={"sm"} fw={"bold"} c={"orange"} truncate>
<TampilanRupiahDonasi nominal={+e.terkumpul} />
</Text>
</Stack>
</Stack>
</Grid.Col>
</Grid>
{width > 575 ? "" : <Divider />}
</Stack>
</Box>
))}
</SimpleGrid>
</>
);
}

57
src/app_modules/donasi/component/detail_galang_dana/detail_data_donasi.tsx Normal file
View File

@@ -0,0 +1,57 @@
"use client";
import { useRouter } from "next/navigation";
import { MODEL_DONASI } from "../../model/interface";
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
import {
Stack,
AspectRatio,
Paper,
Title,
Group,
Image,
Text,
} from "@mantine/core";
import TampilanRupiahDonasi from "../tampilan_rupiah";
export default function ComponentDonasi_DetailDataGalangDana({ 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={10}>
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>
</>
);
}

10
src/app_modules/donasi/component/detail_main/cerita_penggalang.tsx
View File

@@ -7,7 +7,7 @@ import { Stack, Title, Paper, Group, ActionIcon, Text } from "@mantine/core";
import { IconCircleChevronRight } from "@tabler/icons-react";
import moment from "moment";
export default function ComponentCeritaPenggalangDanaDonasi({
export default function ComponentDonasi_CeritaPenggalangMain({
donasi,
}: {
donasi: MODEL_DONASI;
@@ -23,14 +23,14 @@ export default function ComponentCeritaPenggalangDanaDonasi({
<Text>{moment(donasi.createdAt).format("ll")}</Text>
<ActionIcon
variant="transparent"
onClick={() => router.push(RouterDonasi.cerita_penggalang + `${donasi.id}`)}
onClick={() =>
router.push(RouterDonasi.cerita_penggalang + `${donasi.id}`)
}
>
<IconCircleChevronRight />
</ActionIcon>
</Group>
<Text lineClamp={4}>
{donasi.CeritaDonasi.cerita}
</Text>
<Text lineClamp={4}>{donasi.CeritaDonasi.cerita}</Text>
{/* <Text c={"blue"}>Baca selengkapnya</Text> */}
</Stack>
</Paper>

118
src/app_modules/donasi/component/detail_main/detail_data_donasi.tsx Normal file
View File

@@ -0,0 +1,118 @@
"use client";
import { useRouter } from "next/navigation";
import { MODEL_DONASI } from "../../model/interface";
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
import {
Stack,
AspectRatio,
Paper,
Title,
Group,
Progress,
Grid,
Divider,
Image,
Text,
} from "@mantine/core";
import {
IconClover,
IconMessageChatbot,
IconMoneybag,
} from "@tabler/icons-react";
import TampilanRupiahDonasi from "../tampilan_rupiah";
import ComponentDonasi_TampilanHitungMundur from "../tampilan_hitung_mundur";
export function ComponentDonasi_DetailDataMain({
donasi,
countDonatur,
}: {
donasi: MODEL_DONASI;
countDonatur: number;
}) {
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>
<ComponentDonasi_TampilanHitungMundur
durasi={donasi.DonasiMaster_Durasi.name}
publishTime={donasi.publishTime}
/>
</Stack>
<Stack spacing={0}>
<Group position="apart" align="center" h={"100%"}>
<Stack spacing={0}>
<Text fz={12}>Dana terkumpul</Text>
<Title order={4} c="blue">
<TampilanRupiahDonasi nominal={+donasi.terkumpul} />
</Title>
<Group>
<Text fz={10}>Dari total</Text>{" "}
<TampilanRupiahDonasi
nominal={+donasi.target}
fontSize={10}
/>
</Group>
</Stack>
<Stack spacing={0}>
<Text fz={12}>Kategori</Text>
<Title order={4} c="blue">
{donasi.DonasiMaster_Ketegori.name}
</Title>
</Stack>
</Group>
</Stack>
<Progress value={+donasi.progres} animate />
<Grid>
<Grid.Col
span={"auto"}
onClick={() => router.push(RouterDonasi.donatur)}
>
<Stack align="center" spacing={"xs"}>
<Group>
<IconClover color="skyblue" />
<Title order={6} c={"blue"}>
{countDonatur}
</Title>
</Group>
<Text fz={"xs"}>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 fz={"xs"}>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 fz={"xs"}>Pencairan Dana</Text>
</Stack>
</Grid.Col>
</Grid>
</Stack>
</Stack>
</>
);
}

50
src/app_modules/donasi/component/detail_main/informasi_penggalang.tsx Normal file
View File

@@ -0,0 +1,50 @@
"use client"
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
import { MODEL_AUTHOR } from "@/app_modules/home/models/interface";
import { Stack, Title, Paper, Group, ActionIcon, Avatar, Text } from "@mantine/core";
import { IconCircleChevronRight } from "@tabler/icons-react";
import _ from "lodash";
import { useRouter } from "next/navigation";
import ComponentDonasi_NotedBox from "../noted_box";
export default function ComponentDonasi_InformasiPenggalangMain({ author }: { author: MODEL_AUTHOR}) {
const router = useRouter();
return (
<>
{/* <pre>{JSON.stringify(author, null, 2)}</pre> */}
<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 + `${author.id}`)}
>
<IconCircleChevronRight />
</ActionIcon>
</Group>
<Group>
<Avatar radius={"xl"} variant="filled" bg={"blue"}>
{(() => {
const usr = author.username;
const splt = usr.split("");
const Up = _.upperCase(splt[0]);
return Up;
})()}
</Avatar>
<Text>{author.username}</Text>
</Group>
<ComponentDonasi_NotedBox
informasi="Semua dana yang terkumpul akan disalurkan ke penggalang dana,
kabar penyaluran dapat dilihat di halaman kabar terbaru."
/>
</Stack>
</Paper>
</Stack>
</>
);
}

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

@@ -1,19 +1,29 @@
"use client";
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
import { Footer, Center, Button } from "@mantine/core";
import { useAtom } from "jotai";
import { useRouter } from "next/navigation";
import { gs_proses_donasi } from "../global_state";
export default function ButtonDonasi() {
export default function ButtonDonasi({ donasiId }: { donasiId: string }) {
const router = useRouter();
const [prosesDonasi, setProsesDonasi] = useAtom(gs_proses_donasi);
async function onClick() {
setProsesDonasi({
...prosesDonasi,
bank: "",
nominal: "",
norek: "",
});
router.push(RouterDonasi.masukan_donasi + `${donasiId}`);
}
return (
<>
<Footer height={70} px={"md"} sx={{ borderStyle: "none" }}>
<Center h={70}>
<Button
w={"100%"}
radius={"xl"}
onClick={() => router.push(RouterDonasi.masukan_donasi)}
>
<Button w={"100%"} radius={"xl"} onClick={() => onClick()}>
Donasi
</Button>
</Center>

4
src/app_modules/donasi/component/header_tamplate.tsx
View File

@@ -7,6 +7,7 @@ import { useState } from "react";
export default function HeaderTamplateDonasi({
hideBack,
changeIconBack,
route,
route2,
title,
@@ -14,6 +15,7 @@ export default function HeaderTamplateDonasi({
bg,
}: {
hideBack?: boolean;
changeIconBack?: any
route?: any;
route2?: any;
title: string;
@@ -42,7 +44,7 @@ export default function HeaderTamplateDonasi({
}
}}
>
<IconChevronLeft />
{changeIconBack ? changeIconBack: <IconChevronLeft />}
</ActionIcon>
)}
<Title order={5}>{title}</Title>

10
src/app_modules/donasi/component/box_informasi.tsx → src/app_modules/donasi/component/noted_box.tsx
View File

@@ -1,6 +1,6 @@
import { Center, Grid, Group, Paper, Text, Title } from "@mantine/core";
export default function BoxInformasiDonasi({
export default function ComponentDonasi_NotedBox({
informasi,
}: {
informasi: string;
@@ -9,10 +9,10 @@ export default function BoxInformasiDonasi({
<>
<Paper bg={"blue.3"} p={"sm"}>
<Group>
<Text fz={"xs"} fs={"italic"}>
<Text span inherit c={"red"}>* </Text>
<Text fz={"xs"} fs={"italic"}>
<Text span inherit c={"red"}>
*{" "}
</Text>
{informasi}
</Text>
</Group>

30
src/app_modules/donasi/component/tampilan_hitung_mundur.tsx Normal file
View File

@@ -0,0 +1,30 @@
"use client";
import { Text } from "@mantine/core";
import moment from "moment";
export default function ComponentDonasi_TampilanHitungMundur({
durasi,
publishTime,
textSize,
}: {
durasi: any;
publishTime: any;
textSize?: number
}) {
return (
<>
<Text fz={textSize? textSize: "xs"}>
Sisa hari{" "}
<Text span inherit fw={"bold"}>
{Number(durasi) -
moment(new Date()).diff(new Date(publishTime), "days") <=
0
? 0
: Number(durasi) -
moment(new Date()).diff(new Date(publishTime), "days")}
</Text>{" "}
</Text>
</>
);
}

4
src/app_modules/donasi/component/tampilan_rupiah.tsx
View File

@@ -1,9 +1,9 @@
import { Text } from "@mantine/core";
export default function TampilanRupiahDonasi({nominal}: {nominal: number}) {
export default function TampilanRupiahDonasi({nominal, fontSize}: {nominal: number, fontSize?: number}) {
return (
<>
<Text>
<Text fz={ fontSize ? fontSize : "md"}>
Rp.{" "}
{new Intl.NumberFormat("id-ID", { maximumFractionDigits: 10 }).format(
nominal