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

Create dan Update

Browse Source 
# feat
- tampilan user
- tampilan admin
## No Issue
This commit is contained in:
Bagasbanuna02
2024-01-02 16:35:55 +08:00
parent f02e907bc5
commit 4fc158bdc5
92 changed files with 2357 additions and 851 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -27,60 +27,100 @@ import { useRouter } from "next/navigation";
import BoxInformasiDonasi from "../../component/box_informasi";
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 { 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";
export default function DetailDraftDonasi() {
const router = useRouter()
const [tabsPostingDonasi, setTabsPostingDonasi] = useAtom(
gs_donasi_tabs_posting
);
async function onClick() {
router.push(RouterDonasi.main_galang_dana)
setTabsPostingDonasi("Review")
}
export default function DetailDraftDonasi({
dataDonasi,
}: {
dataDonasi: MODEL_DONASI;
}) {
return (
<>
<Stack spacing={"xl"}>
<DetailDonasi />
{/* <InformasiPenggalangDana /> */}
<CeritaPenggalangDana />
<Button
radius={"xl"}
bg={"orange"}
color="orange"
onClick={() => onClick()}
>
Ajukan Penggalangan Dana
</Button>
<DetailDonasi dataDonasi={dataDonasi} />
<ComponentCeritaPenggalangDanaDonasi donasi={dataDonasi} />
<ButtonAjukanPenggalangan dataDonasi={dataDonasi} />
</Stack>
</>
);
}
function DetailDonasi() {
function ButtonAjukanPenggalangan({
dataDonasi,
}: {
dataDonasi: MODEL_DONASI;
}) {
const router = useRouter();
const [tabsPostingDonasi, setTabsPostingDonasi] = useAtom(
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);
setTabsPostingDonasi("Review");
NotifBerhasil("Berhasil Diajukan");
} else {
NotifPeringatan(res.message);
}
});
}
return (
<>
<Button
radius={"xl"}
bg={"orange"}
color="orange"
onClick={() => onCLick()}
>
Ajukan Penggalangan Dana
</Button>
</>
);
}
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={"/aset/no-img.png"} />
<Image
alt="Foto"
src={RouterDonasi.api_image + `${donasi.imageDonasi.url}`}
/>
</Paper>
</AspectRatio>
<Title order={4}>Judul Donasi</Title>
<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">
Rp. 50.000.000
<TampilanRupiahDonasi nominal={+donasi.target} />
</Title>
</Stack>
<Stack spacing={0}>
<Text fz={12}>Kategori</Text>
<Title order={4} c="blue">
Kesehatan
{donasi.DonasiMaster_Ketegori.name}
</Title>
</Stack>
</Group>
@@ -90,68 +130,3 @@ function DetailDonasi() {
</>
);
}
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>
</>
);
}

7
src/app_modules/donasi/detail/detail_draft/layout.tsx
View File

@@ -23,11 +23,14 @@ import { useDisclosure } from "@mantine/hooks";
import router from "next/router";
import { title } from "process";
import { useRouter } from "next/navigation";
import { data } from "autoprefixer";
export default function LayoutDetailDraftDonasi({
children,
donasiId
}: {
children: React.ReactNode;
donasiId: string
}) {
const [opened, { open, close }] = useDisclosure(false);
const router = useRouter();
@@ -62,7 +65,7 @@ export default function LayoutDetailDraftDonasi({
radius={"xl"}
w={"100%"}
color="blue"
onClick={() => router.push(RouterDonasi.edit_donasi)}
onClick={() => router.push(RouterDonasi.edit_donasi + `${donasiId}`)}
>
Edit Donasi
</Button>
@@ -71,7 +74,7 @@ export default function LayoutDetailDraftDonasi({
radius={"xl"}
w={"100%"}
color="teal"
onClick={() => router.push(RouterDonasi.edit_cerita_penggalang)}
onClick={() => router.push(RouterDonasi.edit_cerita_penggalang + `${donasiId}`)}
>
Edit Cerita
</Button>

35
src/app_modules/donasi/detail/detail_main/cerita_penggalang/index.tsx
View File

@@ -1,28 +1,29 @@
"use client";
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
import { MODEL_CERITA_DONASI } from "@/app_modules/donasi/model/interface";
import { Box, Image, Stack, Text } from "@mantine/core";
import moment from "moment";
import { useState } from "react";
export default function CeritaPenggalangDonasi() {
export default function CeritaPenggalangDonasi({
dataCerita,
}: {
dataCerita: MODEL_CERITA_DONASI;
}) {
const [data, setData] = useState(dataCerita);
return (
<>
{/* <pre>{JSON.stringify(data.imageCeritaDonasi, null, 2)}</pre> */}
<Stack>
{moment(Date.now()).format("ll")}
<Text> Halo Orang-orang baik</Text>
<Text>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias eos
expedita vitae unde tenetur, veritatis libero doloribus sunt
temporibus, vel cum, quo odio asperiores quos. Suscipit facilis dolore
optio quaerat?
</Text>
<Image alt="Foto" src={"/aset/no-img.png"}/>
<Text>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias eos
expedita vitae unde tenetur, veritatis libero doloribus sunt
temporibus, vel cum, quo odio asperiores quos. Suscipit facilis dolore
optio quaerat?
</Text>
{moment(data.createdAt).format("ll")}
<Text fw={"bold"}> #HaloOrangBaik</Text>
<Text>{data.pembukaan}</Text>
<Image
alt="Foto"
src={RouterDonasi.api_image_cerita + `${data.imageCeritaDonasi.url}`}
/>
<Text>{data.cerita}</Text>
</Stack>
</>
);

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

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

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

@@ -27,38 +27,58 @@ import { useRouter } from "next/navigation";
import BoxInformasiDonasi from "../../component/box_informasi";
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 { Donasi_funGantiStatus } from "../../fun/update/fun_ganti_status";
import { NotifPeringatan } from "../../component/notifikasi/notif_peringatan";
import { NotifBerhasil } from "../../component/notifikasi/notif_berhasil";
export default function DetailReviewDonasi() {
const [tabsPostingDonasi, setTabsPostingDonasi] = useAtom(
gs_donasi_tabs_posting
);
const router = useRouter()
async function onCLick() {
router.push(RouterDonasi.main_galang_dana)
setTabsPostingDonasi("Draft")
}
export default function DetailReviewDonasi({
dataDonasi,
}: {
dataDonasi: MODEL_DONASI;
}) {
const [donasi, setDonasi] = useState(dataDonasi);
return (
<>
<Stack spacing={"xl"}>
<DetailDonasi />
{/* <InformasiPenggalangDana /> */}
<CeritaPenggalangDana />
<Button
radius={"xl"}
bg={"red"}
color="red"
onClick={() => onCLick()}
>
Batalkan Review
</Button>
<DetailDonasi donasi={donasi} />
<ComponentCeritaPenggalangDanaDonasi donasi={donasi} />
<ButtonBatalReview donasi={donasi} />
</Stack>
</>
);
}
function DetailDonasi() {
function ButtonBatalReview({ donasi }: { donasi: MODEL_DONASI }) {
const router = useRouter();
const [tabsPostingDonasi, setTabsPostingDonasi] = useAtom(
gs_donasi_tabs_posting
);
async function onCLick() {
await Donasi_funGantiStatus(donasi.id, "3").then((res) => {
if (res.status === 200) {
router.push(RouterDonasi.main_galang_dana);
setTabsPostingDonasi("Draft");
NotifBerhasil("Berhasil Dibatalkan");
} else {
NotifPeringatan(res.message);
}
});
}
return (
<>
<Button radius={"xl"} bg={"red"} color="red" onClick={() => onCLick()}>
Batalkan Review
</Button>
</>
);
}
function DetailDonasi({ donasi }: { donasi: MODEL_DONASI }) {
const router = useRouter();
return (
<>
@@ -66,24 +86,31 @@ function DetailDonasi() {
<Stack>
<AspectRatio ratio={16 / 9}>
<Paper radius={"md"}>
<Image alt="Foto" src={"/aset/no-img.png"} />
<Image
alt="Foto"
src={RouterDonasi.api_gambar + `${donasi.imagesId}`}
/>
</Paper>
</AspectRatio>
<Title order={4}>Judul Donasi</Title>
<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">
Rp. 50.000.000
<TampilanRupiahDonasi nominal={+donasi.target} />
</Title>
</Stack>
<Stack spacing={0}>
<Text fz={12}>Kategori</Text>
<Text fz={12}>Kategori</Text>
<Title order={4} c="blue">
Kesehatan
{donasi.DonasiMaster_Ketegori.name}
</Title>
</Stack>
</Group>
</Stack>
@@ -92,68 +119,3 @@ function DetailDonasi() {
</>
);
}
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>
</>
);
}