QC Investasi
# fix Tampilan admin investasi Tampilan admin donasi ## No issuee
This commit is contained in:
@@ -20,6 +20,8 @@ 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,
|
||||
@@ -33,62 +35,66 @@ export default function ComponentDonasi_BoxPublish({
|
||||
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}`);
|
||||
}}
|
||||
>
|
||||
<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}
|
||||
/>
|
||||
{_.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>
|
||||
<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>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
{width > 575 ? "" : <Divider />}
|
||||
</Stack>
|
||||
</Box>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -14,25 +14,25 @@ import {
|
||||
} from "@mantine/core";
|
||||
import TampilanRupiahDonasi from "../tampilan_rupiah";
|
||||
|
||||
export default function ComponentDonasi_DetailDataGalangDana({ donasi }: { donasi: MODEL_DONASI }) {
|
||||
export default function ComponentDonasi_DetailDataGalangDana({
|
||||
donasi,
|
||||
}: {
|
||||
donasi: MODEL_DONASI;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
return (
|
||||
<>
|
||||
<Stack>
|
||||
<Stack px={"xs"}>
|
||||
<Stack>
|
||||
<AspectRatio ratio={16 / 9}>
|
||||
<Paper radius={"md"}>
|
||||
<Image
|
||||
alt="Foto"
|
||||
src={RouterDonasi.api_gambar + `${donasi.imagesId}`}
|
||||
/>
|
||||
</Paper>
|
||||
</AspectRatio>
|
||||
<Image
|
||||
alt="Foto"
|
||||
src={RouterDonasi.api_gambar + `${donasi.imagesId}`}
|
||||
/>
|
||||
{/* <AspectRatio ratio={9 / 16} maw={500} mah={1000} bg={"blue"}>
|
||||
</AspectRatio> */}
|
||||
<Stack spacing={0}>
|
||||
<Title order={4}>{donasi.title}</Title>
|
||||
<Text fz={10}>
|
||||
Durasi: {donasi.DonasiMaster_Durasi.name} hari
|
||||
</Text>
|
||||
<Text fz={10}>Durasi: {donasi.DonasiMaster_Durasi.name} hari</Text>
|
||||
</Stack>
|
||||
<Stack spacing={0}>
|
||||
<Group position="apart">
|
||||
|
||||
@@ -6,6 +6,7 @@ import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
|
||||
import { Stack, Title, Paper, Group, ActionIcon, Text } from "@mantine/core";
|
||||
import { IconCircleChevronRight } from "@tabler/icons-react";
|
||||
import moment from "moment";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function ComponentDonasi_CeritaPenggalangMain({
|
||||
donasi,
|
||||
@@ -13,6 +14,7 @@ export default function ComponentDonasi_CeritaPenggalangMain({
|
||||
donasi: MODEL_DONASI;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const [isLoading, setLoading] = useState(false);
|
||||
return (
|
||||
<>
|
||||
<Stack spacing={"xs"}>
|
||||
@@ -20,12 +22,18 @@ export default function ComponentDonasi_CeritaPenggalangMain({
|
||||
<Paper p={"sm"} withBorder>
|
||||
<Stack>
|
||||
<Group position="apart">
|
||||
<Text>{moment(donasi.createdAt).format("ll")}</Text>
|
||||
<Text>
|
||||
{new Intl.DateTimeFormat("id-ID", { dateStyle: "full" }).format(
|
||||
donasi.createdAt
|
||||
)}
|
||||
</Text>
|
||||
<ActionIcon
|
||||
loading={isLoading ? true : false}
|
||||
variant="transparent"
|
||||
onClick={() =>
|
||||
router.push(RouterDonasi.cerita_penggalang + `${donasi.id}`)
|
||||
}
|
||||
onClick={() => {
|
||||
setLoading(true);
|
||||
router.push(RouterDonasi.cerita_penggalang + `${donasi.id}`);
|
||||
}}
|
||||
>
|
||||
<IconCircleChevronRight />
|
||||
</ActionIcon>
|
||||
|
||||
@@ -14,6 +14,8 @@ import {
|
||||
Divider,
|
||||
Image,
|
||||
Text,
|
||||
Center,
|
||||
Loader,
|
||||
} from "@mantine/core";
|
||||
import {
|
||||
IconClover,
|
||||
@@ -26,6 +28,8 @@ import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.share
|
||||
import { NotifPeringatan } from "../notifikasi/notif_peringatan";
|
||||
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/component_global/loading_card";
|
||||
|
||||
export function ComponentDonasi_DetailDataMain({
|
||||
donasi,
|
||||
@@ -37,19 +41,28 @@ export function ComponentDonasi_DetailDataMain({
|
||||
userLoginId?: string | any;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const [isLoadingDonatur, setLoadingDonatur] = useState(false);
|
||||
const [isLoadingKabar, setLoadingKabar] = useState(false);
|
||||
const [isLoadingPencairan, setLoadingPencairan] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Stack>
|
||||
<Stack px={"xs"}>
|
||||
<Stack>
|
||||
<AspectRatio ratio={16 / 9}>
|
||||
<Center>
|
||||
<Image
|
||||
mah={500}
|
||||
maw={"auto"}
|
||||
radius={"md"}
|
||||
alt="Foto"
|
||||
src={RouterDonasi.api_gambar + `${donasi.imagesId}`}
|
||||
/>
|
||||
</Center>
|
||||
{/* <AspectRatio ratio={16 / 9}>
|
||||
<Paper radius={"md"}>
|
||||
<Image
|
||||
alt="Foto"
|
||||
src={RouterDonasi.api_gambar + `${donasi.imagesId}`}
|
||||
/>
|
||||
</Paper>
|
||||
</AspectRatio>
|
||||
<Stack spacing={0}>
|
||||
</AspectRatio> */}
|
||||
<Stack spacing={0} mt={"lg"}>
|
||||
<Title order={4}>{donasi.title}</Title>
|
||||
<ComponentDonasi_TampilanHitungMundur
|
||||
durasi={donasi.DonasiMaster_Durasi.name}
|
||||
@@ -84,11 +97,19 @@ export function ComponentDonasi_DetailDataMain({
|
||||
<Grid>
|
||||
<Grid.Col
|
||||
span={"auto"}
|
||||
onClick={() => router.push(RouterDonasi.donatur + `${donasi.id}`)}
|
||||
onClick={() => {
|
||||
setLoadingDonatur(true);
|
||||
router.push(RouterDonasi.donatur + `${donasi.id}`);
|
||||
}}
|
||||
>
|
||||
<Stack align="center" spacing={"xs"}>
|
||||
<Group>
|
||||
<IconClover color="skyblue" />
|
||||
{isLoadingDonatur ? (
|
||||
<Loader size={25} />
|
||||
) : (
|
||||
<IconClover color="skyblue" />
|
||||
)}
|
||||
|
||||
<Title order={6} c={"blue"}>
|
||||
{countDonatur}
|
||||
</Title>
|
||||
@@ -99,20 +120,34 @@ export function ComponentDonasi_DetailDataMain({
|
||||
<Divider orientation="vertical" />
|
||||
<Grid.Col
|
||||
span={"auto"}
|
||||
onClick={() => router.push(RouterDonasi.kabar + `${donasi.id}`)}
|
||||
onClick={() => {
|
||||
setLoadingKabar(true);
|
||||
router.push(RouterDonasi.kabar + `${donasi.id}`);
|
||||
}}
|
||||
>
|
||||
<Stack spacing={"sm"} align="center">
|
||||
<IconMessageChatbot color="skyblue" />
|
||||
{isLoadingKabar ? (
|
||||
<Loader size={25} />
|
||||
) : (
|
||||
<IconMessageChatbot color="skyblue" />
|
||||
)}
|
||||
<Text fz={"xs"}>Kabar Terbaru</Text>
|
||||
</Stack>
|
||||
</Grid.Col>
|
||||
<Divider orientation="vertical" />
|
||||
<Grid.Col
|
||||
span={"auto"}
|
||||
onClick={() => onPencairanDana(router, donasi, userLoginId)}
|
||||
onClick={() => {
|
||||
setLoadingPencairan(true);
|
||||
onPencairanDana(router, donasi, userLoginId);
|
||||
}}
|
||||
>
|
||||
<Stack spacing={"sm"} align="center">
|
||||
<IconMoneybag color="skyblue" />
|
||||
{isLoadingPencairan ? (
|
||||
<Loader size={25} />
|
||||
) : (
|
||||
<IconMoneybag color="skyblue" />
|
||||
)}
|
||||
<Text fz={"xs"}>Pencairan Dana</Text>
|
||||
</Stack>
|
||||
</Grid.Col>
|
||||
@@ -132,10 +167,10 @@ async function onPencairanDana(
|
||||
// console.log(donasi.authorId)
|
||||
const cek = await Donasi_findDonaturByTokenId(donasi.id, userLoginId);
|
||||
|
||||
if(userLoginId == donasi.authorId)
|
||||
return router.push(RouterDonasi.pencairan_dana + `${donasi.id}`);
|
||||
if (userLoginId == donasi.authorId)
|
||||
return router.push(RouterDonasi.pencairan_dana + `${donasi.id}`);
|
||||
|
||||
if (!cek ) return NotifPeringatan("Halaman khusus donatur");
|
||||
if (!cek) return NotifPeringatan("Halaman khusus donatur");
|
||||
router.push(RouterDonasi.pencairan_dana + `${donasi.id}`);
|
||||
|
||||
// if (userLoginId != donasi.authorId)
|
||||
|
||||
@@ -1,50 +1,68 @@
|
||||
"use client"
|
||||
"use client";
|
||||
|
||||
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
|
||||
import { MODEL_USER } from "@/app_modules/home/model/interface";
|
||||
import { Stack, Title, Paper, Group, ActionIcon, Avatar, Text } from "@mantine/core";
|
||||
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";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function ComponentDonasi_InformasiPenggalangMain({ author }: { author: MODEL_USER}) {
|
||||
const router = useRouter();
|
||||
return (
|
||||
<>
|
||||
export default function ComponentDonasi_InformasiPenggalangMain({
|
||||
author,
|
||||
}: {
|
||||
author: MODEL_USER;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const [isLoading, setLoading] = useState(false);
|
||||
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,
|
||||
<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
|
||||
loading={isLoading ? true : false}
|
||||
variant="transparent"
|
||||
onClick={() => {
|
||||
setLoading(true);
|
||||
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
/>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -4,9 +4,11 @@ import { Footer, Center, Button } from "@mantine/core";
|
||||
import { useAtom } from "jotai";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { gs_proses_donasi } from "../global_state";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function ButtonDonasi({ donasiId }: { donasiId: string }) {
|
||||
const router = useRouter();
|
||||
const [isLoading, setLoading] = useState(false);
|
||||
const [prosesDonasi, setProsesDonasi] = useAtom(gs_proses_donasi);
|
||||
|
||||
async function onClick() {
|
||||
@@ -16,6 +18,7 @@ export default function ButtonDonasi({ donasiId }: { donasiId: string }) {
|
||||
nominal: "",
|
||||
norek: "",
|
||||
});
|
||||
setLoading(true);
|
||||
router.push(RouterDonasi.masukan_donasi + `${donasiId}`);
|
||||
}
|
||||
|
||||
@@ -23,7 +26,13 @@ export default function ButtonDonasi({ donasiId }: { donasiId: string }) {
|
||||
<>
|
||||
<Footer height={70} px={"md"} sx={{ borderStyle: "none" }}>
|
||||
<Center h={70}>
|
||||
<Button w={"100%"} radius={"xl"} onClick={() => onClick()}>
|
||||
<Button
|
||||
loaderPosition="center"
|
||||
loading={isLoading ? true : false}
|
||||
w={"100%"}
|
||||
radius={"xl"}
|
||||
onClick={() => onClick()}
|
||||
>
|
||||
Donasi
|
||||
</Button>
|
||||
</Center>
|
||||
|
||||
@@ -15,7 +15,7 @@ export default function ComponentDonasi_HeaderTamplate({
|
||||
bg,
|
||||
}: {
|
||||
hideBack?: boolean;
|
||||
changeIconBack?: any
|
||||
changeIconBack?: any;
|
||||
route?: any;
|
||||
route2?: any;
|
||||
title: string;
|
||||
@@ -23,6 +23,9 @@ export default function ComponentDonasi_HeaderTamplate({
|
||||
bg?: any;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const [isLoading, setLoading] = useState(false);
|
||||
const [isRightLoading, setRightLoading] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header
|
||||
@@ -35,8 +38,10 @@ export default function ComponentDonasi_HeaderTamplate({
|
||||
<ActionIcon variant="transparent" disabled></ActionIcon>
|
||||
) : (
|
||||
<ActionIcon
|
||||
loading={isLoading ? true : false}
|
||||
variant="transparent"
|
||||
onClick={() => {
|
||||
setLoading(true);
|
||||
if (route === null || route === undefined) {
|
||||
return router.back();
|
||||
} else {
|
||||
@@ -44,7 +49,7 @@ export default function ComponentDonasi_HeaderTamplate({
|
||||
}
|
||||
}}
|
||||
>
|
||||
{changeIconBack ? changeIconBack: <IconChevronLeft />}
|
||||
{changeIconBack ? changeIconBack : <IconChevronLeft />}
|
||||
</ActionIcon>
|
||||
)}
|
||||
<Title order={5}>{title}</Title>
|
||||
@@ -54,8 +59,12 @@ export default function ComponentDonasi_HeaderTamplate({
|
||||
} else {
|
||||
return (
|
||||
<ActionIcon
|
||||
loading={isRightLoading ? true : false}
|
||||
variant="transparent"
|
||||
onClick={() => router.push(route2)}
|
||||
onClick={() => {
|
||||
setRightLoading(true);
|
||||
router.push(route2);
|
||||
}}
|
||||
>
|
||||
{icon}
|
||||
</ActionIcon>
|
||||
|
||||
17
src/app_modules/donasi/component/is_empty_data.tsx
Normal file
17
src/app_modules/donasi/component/is_empty_data.tsx
Normal file
@@ -0,0 +1,17 @@
|
||||
"use client";
|
||||
|
||||
import { Center } from "@mantine/core";
|
||||
|
||||
export default function ComponentDonasi_IsEmptyData({
|
||||
text,
|
||||
}: {
|
||||
text?: string;
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
<Center h={"50vh"} fz={"sm"} c="gray" fw={"bold"} style={{ zIndex: 1 }}>
|
||||
{text ? text : "Tidak ada data"}
|
||||
</Center>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user