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

Merge pull request #213 from bipproduction/amalia/20-des-24

Browse Source 
Amalia/20 des 24
This commit is contained in:
Bagasbanuna02
2024-12-23 07:53:24 +08:00
committed by GitHub
parent 079b6b2f4b 692dd25609
commit 4a62205d8b
13 changed files with 588 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
src/app_modules/donasi/component/detail_main/cerita_penggalang_new.tsx Normal file
View File

@@ -0,0 +1,89 @@
"use client";
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
import { AccentColor, MainColor, } from "@/app_modules/_global/color/color_pallet";
import { ActionIcon, Group, Paper, Stack, Text, Title } from "@mantine/core";
import { IconCircleChevronRight } from "@tabler/icons-react";
import { useParams, useRouter } from "next/navigation";
import { useState } from "react";
import { apiGetOneDonasiById } from "../../lib/api_donasi";
import { useShallowEffect } from "@mantine/hooks";
import SkeletonCeritaPenggalangDonasi from "./skeleton_cerita_penggalang";
export default function ComponentDonasi_CeritaPenggalangMainNew() {
const router = useRouter();
const param = useParams<{ id: string }>();
const [loading, setLoading] = useState(true)
const [donasi, setDonasi] = useState<any>({})
async function getCeritaDonasi() {
try {
setLoading(true)
const response = await apiGetOneDonasiById(param.id, "cerita")
if (response.success) {
setDonasi(response.data)
}else{
}
} catch (error) {
console.error(error);
} finally {
setLoading(false)
}
}
useShallowEffect(() => {
getCeritaDonasi()
}, [])
return (
<>
<Stack
spacing={"xs"}
style={{
color: "white",
}}
>
<Title order={4}>Cerita Penggalang Dana</Title>
<Paper
style={{
padding: "15px",
backgroundColor: AccentColor.darkblue,
border: `2px solid ${AccentColor.blue}`,
borderRadius: "10px",
color: "white",
}}
>
{
loading ? <SkeletonCeritaPenggalangDonasi />
:
<Stack>
<Group position="apart">
<Text>
{new Intl.DateTimeFormat("id-ID", { dateStyle: "full" }).format(
new Date(donasi?.createdAt)
)}
</Text>
<ActionIcon
variant="transparent"
onClick={() => {
router.push(RouterDonasi.cerita_penggalang + `${donasi?.id}`);
}}
>
<IconCircleChevronRight
style={{
color: MainColor.yellow,
}}
/>
</ActionIcon>
</Group>
<Text lineClamp={4}>{donasi?.CeritaDonasi.cerita}</Text>
</Stack>
}
</Paper>
</Stack>
</>
);
}

175
src/app_modules/donasi/component/detail_main/detail_dana_donasi_new.tsx Normal file
View File

@@ -0,0 +1,175 @@
"use client";
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
import { MainColor } from "@/app_modules/_global/color/color_pallet";
import { ComponentGlobal_CardStyles, ComponentGlobal_LoadImageLandscape, } from "@/app_modules/_global/component";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
import { Divider, Grid, Group, Progress, Stack, Text, Title, } from "@mantine/core";
import { IconClover, IconMessageChatbot, IconMoneybag, } from "@tabler/icons-react";
import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
import { useParams, useRouter } from "next/navigation";
import { Donasi_findDonaturByTokenId } from "../../fun/get/get_donatur_by_token_id";
import { MODEL_DONASI } from "../../model/interface";
import ComponentDonasi_TampilanHitungMundur from "../tampilan_hitung_mundur";
import TampilanRupiahDonasi from "../tampilan_rupiah";
import { useState } from "react";
import { apiGetOneDonasiById } from "../../lib/api_donasi";
import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
import { useShallowEffect } from "@mantine/hooks";
import SkeletonDetailDanaDonasi from "./skeleton_detail_dana_donasi";
export function ComponentDonasi_DetailDataMainNew() {
const router = useRouter();
const param = useParams<{ id: string }>();
const [loading, setLoading] = useState(true);
const [donasi, setDonasi] = useState<MODEL_DONASI | any>();
const [countDonatur, setcountDonatur] = useState(0);
const [userLoginId, setuserLoginId] = useState("");
async function getData() {
try {
setLoading(true)
const response = await apiGetOneDonasiById(param.id, "semua")
const response1 = await apiGetOneDonasiById(param.id, "count")
const response2 = await funGetUserIdByToken()
if (response.success) {
setDonasi(response.data)
setcountDonatur(response1.data)
setuserLoginId(response2)
}
} catch (error) {
console.error(error);
} finally {
setLoading(false)
}
}
useShallowEffect(() => {
getData()
}, [])
return (
<>
<ComponentGlobal_CardStyles>
{
loading ? <SkeletonDetailDanaDonasi />
:
<Stack>
<ComponentGlobal_LoadImageLandscape fileId={donasi?.imageId} />
<Stack spacing={0} mt={"lg"}>
<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 target</Text>{" "}
<TampilanRupiahDonasi
nominal={+donasi?.target}
fontSize={10}
/>
</Group>
</Stack>
<Stack spacing={0}>
<Text fz={12}>Kategori</Text>
<Title
order={4}
style={{
color: MainColor.yellow,
}}
>
{donasi?.DonasiMaster_Ketegori.name}
</Title>
</Stack>
</Group>
</Stack>
<Progress value={+donasi?.progres} color="yellow" size={"lg"} />
<Grid>
<Grid.Col
span={"auto"}
onClick={() => {
router.push(RouterDonasi.donatur + `${donasi.id}`);
}}
>
<Stack
align="center"
spacing={"xs"}
style={{
color: MainColor.yellow,
}}
>
<Group align="center" h={"100%"}>
<IconClover />
<Title order={6}>{countDonatur}</Title>
</Group>
<Text fz={"xs"} c={"white"}>
Donatur
</Text>
</Stack>
</Grid.Col>
<Divider orientation="vertical" />
<Grid.Col
span={"auto"}
onClick={() => {
router.push(RouterDonasi.daftar_kabar({ id: donasi.id }), {
scroll: false,
});
}}
>
<Stack spacing={"sm"} align="center">
<IconMessageChatbot
style={{
color: MainColor.yellow,
}}
/>
<Text fz={"xs"}>Kabar Terbaru</Text>
</Stack>
</Grid.Col>
<Divider orientation="vertical" />
<Grid.Col
span={"auto"}
onClick={() => {
onPencairanDana(
router,
donasi,
userLoginId,
);
}}
>
<Stack spacing={"sm"} align="center">
<IconMoneybag
style={{
color: MainColor.yellow,
}}
/>
<Text fz={"xs"}>Pencairan Dana</Text>
</Stack>
</Grid.Col>
</Grid>
</Stack>
}
</ComponentGlobal_CardStyles>
</>
);
}
async function onPencairanDana(router: AppRouterInstance, donasi: MODEL_DONASI, userLoginId: string,) {
const cek = await Donasi_findDonaturByTokenId(donasi.id, userLoginId);
if (userLoginId == donasi.authorId) {
return router.push(RouterDonasi.pencairan_dana + `${donasi.id}`);
}
if (!cek) {
return ComponentGlobal_NotifikasiPeringatan("Halaman khusus donatur");
} else {
router.push(RouterDonasi.pencairan_dana + `${donasi.id}`);
}
}

97
src/app_modules/donasi/component/detail_main/informasi_penggalang_new.tsx Normal file
View File

@@ -0,0 +1,97 @@
"use client";
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
import { AccentColor, MainColor, } from "@/app_modules/_global/color/color_pallet";
import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
import { ActionIcon, Avatar, Group, Paper, Skeleton, Stack, Text, Title, } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { IconCircleChevronRight } from "@tabler/icons-react";
import _ from "lodash";
import { useParams, useRouter } from "next/navigation";
import { useState } from "react";
import { apiGetOneDonasiById } from "../../lib/api_donasi";
export default function ComponentDonasi_InformasiPenggalangMainNew() {
const router = useRouter();
const param = useParams<{ id: string }>();
const [loading, setLoading] = useState(true);
const [data, setData] = useState<any>({})
async function getDataAuthor() {
try {
setLoading(true)
const response = await apiGetOneDonasiById(param.id, "author")
if (response.success) {
setData(response.data)
}
} catch (error) {
console.error(error);
} finally {
setLoading(false)
}
}
useShallowEffect(() => {
getDataAuthor()
}, [])
return (
<>
<Stack
spacing={"xs"}
style={{
color: "white",
}}
>
<Title order={4}>Informasi Penggalang Dana</Title>
<Paper
style={{
padding: "15px",
backgroundColor: AccentColor.darkblue,
border: `2px solid ${AccentColor.blue}`,
borderRadius: "10px",
color: "white",
}}
>
{
loading ? <Skeleton height={100} radius="md" width={"100%"} />
:
<Stack>
<Group position="apart">
<Title order={5}>Penggalang Dana</Title>
<ActionIcon
variant="transparent"
onClick={() => {
router.push(RouterDonasi.penggalang_dana + `${data.authorId}`);
}}
>
<IconCircleChevronRight
style={{
color: MainColor.yellow,
}}
/>
</ActionIcon>
</Group>
<Group>
<Avatar radius={"xl"} variant="filled" bg={"blue"}>
{(() => {
const usr = data?.Author?.username;
const splt = usr?.split("");
const Up = _.upperCase(splt[0])
return Up;
})()}
</Avatar>
<Text>{data?.Author?.username}</Text>
</Group>
<ComponentGlobal_BoxInformation
informasi="Semua dana yang terkumpul akan disalurkan ke penggalang dana,
kabar penyaluran dapat dilihat di halaman kabar terbaru."
/>
</Stack>
}
</Paper>
</Stack>
</>
);
}

14
src/app_modules/donasi/component/detail_main/skeleton_cerita_penggalang.tsx Normal file
View File

@@ -0,0 +1,14 @@
import { Box, Skeleton } from "@mantine/core";
export default function SkeletonCeritaPenggalangDonasi() {
return (
<>
<Box mb={"md"}>
<Skeleton height={10} mt={0} radius="xl" width={"50%"} />
<Skeleton height={10} mt={10} radius="xl" />
<Skeleton height={10} mt={10} radius="xl" />
<Skeleton height={10} mt={10} radius="xl" />
</Box>
</>
);
}

21
src/app_modules/donasi/component/detail_main/skeleton_detail_dana_donasi.tsx Normal file
View File

@@ -0,0 +1,21 @@
import { Box, Skeleton } from "@mantine/core";
export default function SkeletonDetailDanaDonasi() {
return (
<>
<Box>
<Box mb={"md"}>
<Skeleton height={150} radius="md" />
</Box>
<Box mb={"md"}>
<Skeleton height={10} mt={10} radius="xl" width={"50%"} />
<Skeleton height={10} mt={10} radius="xl" />
<Skeleton height={10} mt={10} radius="xl" />
</Box>
<Box>
<Skeleton height={50} radius="md" />
</Box>
</Box>
</>
);
}

17
src/app_modules/donasi/detail/detail_main/index_new.tsx Normal file
View File

@@ -0,0 +1,17 @@
"use client";
import { Stack } from "@mantine/core";
import ComponentDonasi_CeritaPenggalangMainNew from "../../component/detail_main/cerita_penggalang_new";
import { ComponentDonasi_DetailDataMainNew } from "../../component/detail_main/detail_dana_donasi_new";
import ComponentDonasi_InformasiPenggalangMainNew from "../../component/detail_main/informasi_penggalang_new";
export default function DetailMainDonasiNew() {
return (
<>
<Stack spacing={40} py={"md"}>
<ComponentDonasi_DetailDataMainNew />
<ComponentDonasi_InformasiPenggalangMainNew />
<ComponentDonasi_CeritaPenggalangMainNew />
</Stack>
</>
);
}

85
src/app_modules/donasi/detail/detail_main/layout_new.tsx Normal file
View File

@@ -0,0 +1,85 @@
"use client";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
import React, { useState } from "react";
import ButtonDonasi from "../../component/footer_button_donasi";
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
import { IconDotsVertical, IconMessageShare } from "@tabler/icons-react";
import { UIGlobal_Drawer } from "@/app_modules/_global/ui";
import { ActionIcon } from "@mantine/core";
import { useParams } from "next/navigation";
import { apiGetOneDonasiById } from "../../lib/api_donasi";
import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
import { useShallowEffect } from "@mantine/hooks";
export default function LayoutDetailMainDonasiNew({ children, }: { children: React.ReactNode; }) {
const [openDrawer, setOpenDrawer] = useState(false);
const param = useParams<{ id: string }>();
const [loading, setLoading] = useState(true);
const [authorId, setAuthorId] = useState("");
const [userLogin, setUserLogin] = useState("");
const listPage = [
{
id: "1",
name: "Rekap Kabar",
icon: <IconMessageShare />,
path: RouterDonasi.rekap_kabar({ id: param.id }),
},
];
async function getDataDonasi() {
try {
setLoading(true)
const response = await apiGetOneDonasiById(param.id, "author")
const response2 = await funGetUserIdByToken()
if (response.success) {
setAuthorId(response.data.authorId)
setUserLogin(response2)
}
} catch (error) {
console.error(error);
} finally {
setLoading(false)
}
}
useShallowEffect(() => {
getDataDonasi()
}, [])
return (
<>
<UIGlobal_LayoutTamplate
header={
<UIGlobal_LayoutHeaderTamplate
title="Detail Donasi"
customButtonRight={
loading ? ""
:
userLogin !== authorId ? (
""
) : (
<ActionIcon
variant="transparent"
onClick={() => setOpenDrawer(true)}
>
<IconDotsVertical color="white" />
</ActionIcon>
)
}
/>
}
footer={<ButtonDonasi donasiId={param.id} />}
>
{children}
</UIGlobal_LayoutTamplate>
<UIGlobal_Drawer
opened={openDrawer}
close={() => setOpenDrawer(false)}
component={listPage}
/>
</>
);
}

2
src/app_modules/donasi/edit/edit_donasi/edit_donasi_new.tsx
View File

@@ -51,7 +51,7 @@ export default function EditDonasiNew() {
async function onGetData() {
try {
setLoadingData(true)
const response = await apiGetOneDonasiById(param.id)
const response = await apiGetOneDonasiById(param.id, "semua")
if (response.success) {
setData(response.data)
}

4
src/app_modules/donasi/index.ts
View File

@@ -1,3 +1,4 @@
import LayoutDetailMainDonasiNew from '@/app_modules/donasi/detail/detail_main/layout_new';
import MainDonasi from "./main/beranda";
import MainDonasiNew from "./main/beranda_new";
import LayoutDonasi from "./main/layout";
@@ -106,5 +107,6 @@ export {
MainDonasiNew,
GalangDanaDonasiNew,
CreateDonasiNew,
EditDonasiNew
EditDonasiNew,
LayoutDetailMainDonasiNew
};

4
src/app_modules/donasi/lib/api_donasi.ts
View File

@@ -13,7 +13,7 @@ export const apiGetAllDonasiSaya = async (path?: string) => {
return await response.json().catch(() => null)
}
export const apiGetOneDonasiById = async (path: string) => {
const response = await fetch(`/api/new/donasi/${path}`)
export const apiGetOneDonasiById = async (path: string, kategori: string) => {
const response = await fetch(`/api/new/donasi/${path}?cat=${kategori}`)
return await response.json().catch(() => null)
}