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

#style:

Browse Source 
Deskripsi :
- Perbaikan UI Donasi
## NO Issue
This commit is contained in:
Bagasbanuna02
2024-07-22 10:29:51 +08:00
parent 8fa3f0332d
commit 73c6d58eef
89 changed files with 1686 additions and 1442 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
src/app_modules/donasi/component/box_publish.tsx
View File

@@ -1,100 +0,0 @@
"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";
import _ from "lodash";
import ComponentDonasi_IsEmptyData from "./is_empty_data";
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 (
<>
{_.isEmpty(dataDonasi) ? (
<ComponentDonasi_IsEmptyData text="Tidak ada data" />
) : (
<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}`);
}}
>
<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>
)}
</>
);
}

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

@@ -0,0 +1,84 @@
"use client";
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
import { AccentColor } from "@/app_modules/_global/color/color_pallet";
import {
AspectRatio,
Box,
Grid,
Image,
Paper,
Progress,
Stack,
Text
} from "@mantine/core";
import { useRouter } from "next/navigation";
import ComponentDonasi_TampilanHitungMundur from "../tampilan_hitung_mundur";
import TampilanRupiahDonasi from "../tampilan_rupiah";
export default function ComponentDonasi_CardPublish({
data,
path,
}: {
data: any;
path: string;
}) {
const router = useRouter();
return (
<>
<Box
style={{
padding: "15px",
backgroundColor: AccentColor.darkblue,
borderRadius: "10px",
border: `2px solid ${AccentColor.blue}`,
color: "white",
marginBottom: "15px",
}}
onClick={() => {
router.push(path + `${data.id}`);
}}
>
<Stack>
<Grid>
<Grid.Col span={7}>
<AspectRatio ratio={16 / 9}>
<Paper radius={"md"}>
<Image
alt="Foto"
src={RouterDonasi.api_gambar + `${data.imagesId}`}
radius={"xs"}
/>
</Paper>
</AspectRatio>
</Grid.Col>
<Grid.Col span={5}>
<Stack spacing={"xs"}>
<Stack spacing={0}>
<Text fz={"sm"} fw={"bold"} lineClamp={2}>
{data.title}
</Text>
<ComponentDonasi_TampilanHitungMundur
durasi={data?.DonasiMaster_Durasi?.name}
publishTime={data.publishTime}
textSize={10}
/>
</Stack>
<Progress value={+data.progres} color="yellow" />
<Stack spacing={0}>
<Text fz={"sm"}>Terkumpul</Text>
<Text fz={"sm"} fw={"bold"} c={"orange"} truncate>
<TampilanRupiahDonasi nominal={+data.terkumpul} />
</Text>
</Stack>
</Stack>
</Grid.Col>
</Grid>
{/* {width > 575 ? "" : <Divider />} */}
</Stack>
</Box>
</>
);
}

71
src/app_modules/donasi/component/card_view/card_status.tsx Normal file
View File

@@ -0,0 +1,71 @@
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
import { AccentColor } from "@/app_modules/_global/color/color_pallet";
import {
Box,
Stack,
Grid,
AspectRatio,
Paper,
Image,
Text,
} from "@mantine/core";
import { useRouter } from "next/navigation";
import { MODEL_DONASI } from "../../model/interface";
export function ComponentDonasi_CardStatus({
data,
path,
}: {
data: MODEL_DONASI;
path: string;
}) {
const router = useRouter();
return (
<>
<Box
style={{
padding: "15px",
backgroundColor: AccentColor.darkblue,
borderRadius: "10px",
border: `2px solid ${AccentColor.blue}`,
color: "white",
marginBottom: "15px",
}}
onClick={() => router.push(path + `${data.id}`)}
>
<Stack>
<Grid>
<Grid.Col span={7}>
<AspectRatio ratio={16 / 9}>
<Paper radius={"sm"} bg={"gray.1"}>
<Image
alt="Foto"
src={RouterDonasi.api_gambar + `${data.imagesId}`}
radius={"md"}
/>
</Paper>
</AspectRatio>
</Grid.Col>
<Grid.Col span={5}>
<Stack spacing={"xs"}>
<Text fz={"sm"} fw={"bold"} lineClamp={2}>
{data.title}
</Text>
<Stack spacing={0}>
<Text fz={"sm"}>Terget Dana</Text>
<Text fz={"sm"} fw={"bold"} c={"yellow"} lineClamp={1}>
Rp.{" "}
{new Intl.NumberFormat("id-ID", {
maximumFractionDigits: 10,
}).format(+data.target)}
</Text>
</Stack>
</Stack>
</Grid.Col>
</Grid>
{/* {width > 575 ? "" : <Divider />} */}
</Stack>
</Box>
</>
);
}

39
src/app_modules/donasi/component/detail_galang_dana/detail_data_donasi.tsx
View File

@@ -13,6 +13,7 @@ import {
Text,
} from "@mantine/core";
import TampilanRupiahDonasi from "../tampilan_rupiah";
import { AccentColor, MainColor } from "@/app_modules/_global/color/color_pallet";
export default function ComponentDonasi_DetailDataGalangDana({
donasi,
@@ -22,14 +23,30 @@ export default function ComponentDonasi_DetailDataGalangDana({
const router = useRouter();
return (
<>
<Stack px={"xs"}>
<Stack
style={{
paddingInline: "15px",
paddingBottom: "15px",
backgroundColor: AccentColor.darkblue,
border: `2px solid ${AccentColor.blue}`,
borderRadius: "10px",
color: "white",
}}
>
<Stack>
<Image
alt="Foto"
src={RouterDonasi.api_gambar + `${donasi.imagesId}`}
/>
{/* <AspectRatio ratio={9 / 16} maw={500} mah={1000} bg={"blue"}>
</AspectRatio> */}
<AspectRatio
ratio={9 / 16}
mx={"sm"}
mah={300}
// bg={"blue"}
style={{}}
>
<Image
alt="Foto"
src={RouterDonasi.api_image + `${donasi.imageDonasi.url}`}
radius={"sm"}
/>
</AspectRatio>
<Stack spacing={0}>
<Title order={4}>{donasi.title}</Title>
<Text fz={10}>Durasi: {donasi.DonasiMaster_Durasi.name} hari</Text>
@@ -38,13 +55,17 @@ export default function ComponentDonasi_DetailDataGalangDana({
<Group position="apart">
<Stack spacing={0}>
<Text fz={12}>Dana dibutuhkan</Text>
<Title order={4} c="blue">
<Title order={4} style={{
color: MainColor.yellow
}}>
<TampilanRupiahDonasi nominal={+donasi.target} />
</Title>
</Stack>
<Stack spacing={0}>
<Text fz={12}>Kategori</Text>
<Title order={4} c="blue">
<Title order={4} style={{
color: MainColor.yellow
}}>
{donasi.DonasiMaster_Ketegori.name}
</Title>
</Stack>

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

@@ -7,6 +7,11 @@ import { Stack, Title, Paper, Group, ActionIcon, Text } from "@mantine/core";
import { IconCircleChevronRight } from "@tabler/icons-react";
import moment from "moment";
import { useState } from "react";
import {
AccentColor,
MainColor,
} from "@/app_modules/_global/color/color_pallet";
import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
export default function ComponentDonasi_CeritaPenggalangMain({
donasi,
@@ -17,9 +22,22 @@ export default function ComponentDonasi_CeritaPenggalangMain({
const [isLoading, setLoading] = useState(false);
return (
<>
<Stack spacing={"xs"}>
<Stack
spacing={"xs"}
style={{
color: "white",
}}
>
<Title order={4}>Cerita Penggalang Dana</Title>
<Paper p={"sm"} withBorder>
<Paper
style={{
padding: "15px",
backgroundColor: AccentColor.darkblue,
border: `2px solid ${AccentColor.blue}`,
borderRadius: "10px",
color: "white",
}}
>
<Stack>
<Group position="apart">
<Text>
@@ -28,14 +46,21 @@ export default function ComponentDonasi_CeritaPenggalangMain({
)}
</Text>
<ActionIcon
loading={isLoading ? true : false}
variant="transparent"
onClick={() => {
setLoading(true);
router.push(RouterDonasi.cerita_penggalang + `${donasi.id}`);
}}
>
<IconCircleChevronRight />
{isLoading ? (
<ComponentGlobal_Loader />
) : (
<IconCircleChevronRight
style={{
color: MainColor.yellow,
}}
/>
)}
</ActionIcon>
</Group>
<Text lineClamp={4}>{donasi.CeritaDonasi.cerita}</Text>

65
src/app_modules/donasi/component/detail_main/detail_data_donasi.tsx
View File

@@ -30,6 +30,11 @@ import { NotifBerhasil } from "../notifikasi/notif_berhasil";
import { Donasi_findDonaturByTokenId } from "../../fun/get/get_donatur_by_token_id";
import { useState } from "react";
import ComponentGlobal_CardLoadingOverlay from "@/app_modules/_global/loading_card";
import {
AccentColor,
MainColor,
} from "@/app_modules/_global/color/color_pallet";
import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
export function ComponentDonasi_DetailDataMain({
donasi,
@@ -47,13 +52,20 @@ export function ComponentDonasi_DetailDataMain({
return (
<>
<Stack px={"xs"}>
<Stack
style={{
padding: "15px",
border: `2px solid ${AccentColor.blue}`,
backgroundColor: AccentColor.darkblue,
borderRadius: "10px",
color: "white",
}}
>
<Stack>
<Center>
<Image
mah={500}
maw={"auto"}
radius={"md"}
maw={200}
radius={"xs"}
alt="Foto"
src={RouterDonasi.api_gambar + `${donasi.imagesId}`}
/>
@@ -86,7 +98,12 @@ export function ComponentDonasi_DetailDataMain({
</Stack>
<Stack spacing={0}>
<Text fz={12}>Kategori</Text>
<Title order={4} c="blue">
<Title
order={4}
style={{
color: MainColor.yellow,
}}
>
{donasi.DonasiMaster_Ketegori.name}
</Title>
</Stack>
@@ -102,19 +119,25 @@ export function ComponentDonasi_DetailDataMain({
router.push(RouterDonasi.donatur + `${donasi.id}`);
}}
>
<Stack align="center" spacing={"xs"}>
<Group>
<Stack
align="center"
spacing={"xs"}
style={{
color: MainColor.yellow,
}}
>
<Group align="center" h={"100%"}>
{isLoadingDonatur ? (
<Loader size={25} />
<ComponentGlobal_Loader size={25} />
) : (
<IconClover color="skyblue" />
<IconClover />
)}
<Title order={6} c={"blue"}>
{countDonatur}
</Title>
<Title order={6}>{countDonatur}</Title>
</Group>
<Text fz={"xs"}>Donatur</Text>
<Text fz={"xs"} c={"white"}>
Donatur
</Text>
</Stack>
</Grid.Col>
<Divider orientation="vertical" />
@@ -127,9 +150,13 @@ export function ComponentDonasi_DetailDataMain({
>
<Stack spacing={"sm"} align="center">
{isLoadingKabar ? (
<Loader size={25} />
<ComponentGlobal_Loader size={25} />
) : (
<IconMessageChatbot color="skyblue" />
<IconMessageChatbot
style={{
color: MainColor.yellow,
}}
/>
)}
<Text fz={"xs"}>Kabar Terbaru</Text>
</Stack>
@@ -144,9 +171,13 @@ export function ComponentDonasi_DetailDataMain({
>
<Stack spacing={"sm"} align="center">
{isLoadingPencairan ? (
<Loader size={25} />
<ComponentGlobal_Loader size={25} />
) : (
<IconMoneybag color="skyblue" />
<IconMoneybag
style={{
color: MainColor.yellow,
}}
/>
)}
<Text fz={"xs"}>Pencairan Dana</Text>
</Stack>

36
src/app_modules/donasi/component/detail_main/informasi_penggalang.tsx
View File

@@ -16,6 +16,12 @@ import _ from "lodash";
import { useRouter } from "next/navigation";
import ComponentDonasi_NotedBox from "../noted_box";
import { useState } from "react";
import {
AccentColor,
MainColor,
} from "@/app_modules/_global/color/color_pallet";
import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
export default function ComponentDonasi_InformasiPenggalangMain({
author,
@@ -27,21 +33,41 @@ export default function ComponentDonasi_InformasiPenggalangMain({
return (
<>
{/* <pre>{JSON.stringify(author, null, 2)}</pre> */}
<Stack spacing={"xs"}>
<Stack
spacing={"xs"}
style={{
color: "white",
}}
>
<Title order={4}>Informasi Penggalang Dana</Title>
<Paper p={"sm"} withBorder>
<Paper
style={{
padding: "15px",
backgroundColor: AccentColor.darkblue,
border: `2px solid ${AccentColor.blue}`,
borderRadius: "10px",
color: "white",
}}
>
<Stack>
<Group position="apart">
<Title order={5}>Penggalang Dana</Title>
<ActionIcon
loading={isLoading ? true : false}
variant="transparent"
onClick={() => {
setLoading(true);
router.push(RouterDonasi.penggalang_dana + `${author.id}`);
}}
>
<IconCircleChevronRight />
{isLoading ? (
<ComponentGlobal_Loader />
) : (
<IconCircleChevronRight
style={{
color: MainColor.yellow,
}}
/>
)}
</ActionIcon>
</Group>
<Group>
@@ -56,7 +82,7 @@ export default function ComponentDonasi_InformasiPenggalangMain({
</Avatar>
<Text>{author.username}</Text>
</Group>
<ComponentDonasi_NotedBox
<ComponentGlobal_BoxInformation
informasi="Semua dana yang terkumpul akan disalurkan ke penggalang dana,
kabar penyaluran dapat dilihat di halaman kabar terbaru."
/>

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

@@ -5,6 +5,7 @@ import { useAtom } from "jotai";
import { useRouter } from "next/navigation";
import { gs_proses_donasi } from "../global_state";
import { useState } from "react";
import { MainColor } from "@/app_modules/_global/color/color_pallet";
export default function ButtonDonasi({ donasiId }: { donasiId: string }) {
const router = useRouter();
@@ -24,7 +25,11 @@ export default function ButtonDonasi({ donasiId }: { donasiId: string }) {
return (
<>
<Footer height={70} px={"md"} sx={{ borderStyle: "none" }}>
<Footer
height={70}
px={"md"}
sx={{ borderStyle: "none", backgroundColor: "transparent" }}
>
<Center h={70}>
<Button
loaderPosition="center"
@@ -32,6 +37,9 @@ export default function ButtonDonasi({ donasiId }: { donasiId: string }) {
w={"100%"}
radius={"xl"}
onClick={() => onClick()}
bg={MainColor.yellow}
color="yellow"
c={"black"}
>
Donasi
</Button>

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

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