Donasi
# feat - Tampilan user selesai - Tampilan admin in progres ### No Issue
This commit is contained in:
159
src/app_modules/donasi/detail/detail_donasi_saya/index.tsx
Normal file
159
src/app_modules/donasi/detail/detail_donasi_saya/index.tsx
Normal file
@@ -0,0 +1,159 @@
|
||||
"use client";
|
||||
|
||||
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
|
||||
import { ActionIcon, AspectRatio, Avatar, Divider, Grid, Group, Image, Paper, Progress, Stack, Text, Title } from "@mantine/core";
|
||||
import { IconClover, IconMessageChatbot, IconMoneybag, IconCircleChevronRight } from "@tabler/icons-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import BoxInformasiDonasi from "../../component/box_informasi";
|
||||
|
||||
export default function DetailDonasiSaya() {
|
||||
return (
|
||||
<>
|
||||
<Stack>
|
||||
<Stack spacing={0}>
|
||||
<Text>Donasi Saya:</Text>
|
||||
<Title order={4} c={"blue"}>
|
||||
Rp. 100.000
|
||||
</Title>
|
||||
</Stack>
|
||||
<DetailDonasi/>
|
||||
<InformasiPenggalangDana/>
|
||||
<CeritaPenggalangDana/>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function DetailDonasi() {
|
||||
const router = useRouter();
|
||||
return (
|
||||
<>
|
||||
<Stack>
|
||||
<Stack>
|
||||
<AspectRatio ratio={16 / 9}>
|
||||
<Paper radius={"md"}>
|
||||
<Image alt="Foto" src={"/aset/no-img.png"} />
|
||||
</Paper>
|
||||
</AspectRatio>
|
||||
<Title order={4}>Judul Donasi</Title>
|
||||
<Stack spacing={0}>
|
||||
<Group position="apart">
|
||||
<Stack spacing={0}>
|
||||
<Text fz={12}>Dana dibutuhkan</Text>
|
||||
<Title order={4} c="blue">
|
||||
Rp. 50.000.000
|
||||
</Title>
|
||||
</Stack>
|
||||
<Text fz={"xs"}>
|
||||
Sisa hari{" "}
|
||||
<Text span inherit fw={"bold"}>
|
||||
100
|
||||
</Text>{" "}
|
||||
</Text>
|
||||
</Group>
|
||||
</Stack>
|
||||
<Progress value={50} />
|
||||
<Grid>
|
||||
<Grid.Col
|
||||
span={"auto"}
|
||||
onClick={() => router.push(RouterDonasi.donatur)}
|
||||
>
|
||||
<Stack align="center" spacing={"xs"}>
|
||||
<Group>
|
||||
<IconClover color="skyblue" />
|
||||
<Text>50</Text>
|
||||
</Group>
|
||||
<Text>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>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>Pencairan Dana</Text>
|
||||
</Stack>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
15
src/app_modules/donasi/detail/detail_donasi_saya/layout.tsx
Normal file
15
src/app_modules/donasi/detail/detail_donasi_saya/layout.tsx
Normal file
@@ -0,0 +1,15 @@
|
||||
"use client"
|
||||
|
||||
import { AppShell } from "@mantine/core"
|
||||
import React from "react"
|
||||
import HeaderTamplateDonasi from "../../component/header_tamplate"
|
||||
|
||||
export default function LayoutDetailDonasiSaya({children}: {children: React.ReactNode}){
|
||||
return<>
|
||||
<AppShell
|
||||
header={<HeaderTamplateDonasi title="Detail Donasi Saya"/>}
|
||||
>
|
||||
{children}
|
||||
</AppShell>
|
||||
</>
|
||||
}
|
||||
157
src/app_modules/donasi/detail/detail_draft/index.tsx
Normal file
157
src/app_modules/donasi/detail/detail_draft/index.tsx
Normal file
@@ -0,0 +1,157 @@
|
||||
"use client";
|
||||
|
||||
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
|
||||
import {
|
||||
Stack,
|
||||
AspectRatio,
|
||||
Paper,
|
||||
Title,
|
||||
Progress,
|
||||
Grid,
|
||||
Group,
|
||||
Divider,
|
||||
ActionIcon,
|
||||
Avatar,
|
||||
Text,
|
||||
Image,
|
||||
Button,
|
||||
} from "@mantine/core";
|
||||
import {
|
||||
IconClover,
|
||||
IconMail,
|
||||
IconMoneybag,
|
||||
IconCircleChevronRight,
|
||||
IconMessageChatbot,
|
||||
} from "@tabler/icons-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import BoxInformasiDonasi from "../../component/box_informasi";
|
||||
import { useAtom } from "jotai";
|
||||
import { gs_donasi_tabs_posting } from "../../global_state";
|
||||
|
||||
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")
|
||||
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<Stack spacing={"xl"}>
|
||||
<DetailDonasi />
|
||||
{/* <InformasiPenggalangDana /> */}
|
||||
<CeritaPenggalangDana />
|
||||
<Button
|
||||
radius={"xl"}
|
||||
bg={"orange"}
|
||||
color="orange"
|
||||
onClick={() => onClick()}
|
||||
>
|
||||
Ajukan Penggalangan Dana
|
||||
</Button>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function DetailDonasi() {
|
||||
const router = useRouter();
|
||||
return (
|
||||
<>
|
||||
<Stack>
|
||||
<Stack>
|
||||
<AspectRatio ratio={16 / 9}>
|
||||
<Paper radius={"md"}>
|
||||
<Image alt="Foto" src={"/aset/no-img.png"} />
|
||||
</Paper>
|
||||
</AspectRatio>
|
||||
<Title order={4}>Judul Donasi</Title>
|
||||
<Stack spacing={0}>
|
||||
<Group position="apart">
|
||||
<Stack spacing={0}>
|
||||
<Text fz={12}>Dana dibutuhkan</Text>
|
||||
<Title order={4} c="blue">
|
||||
Rp. 50.000.000
|
||||
</Title>
|
||||
</Stack>
|
||||
<Stack spacing={0}>
|
||||
<Text fz={12}>Kategori</Text>
|
||||
<Title order={4} c="blue">
|
||||
Kesehatan
|
||||
</Title>
|
||||
</Stack>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
82
src/app_modules/donasi/detail/detail_draft/layout.tsx
Normal file
82
src/app_modules/donasi/detail/detail_draft/layout.tsx
Normal file
@@ -0,0 +1,82 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
ActionIcon,
|
||||
AppShell,
|
||||
Button,
|
||||
Footer,
|
||||
Group,
|
||||
Header,
|
||||
Modal,
|
||||
Stack,
|
||||
Title,
|
||||
} from "@mantine/core";
|
||||
import React from "react";
|
||||
import HeaderTamplateDonasi from "../../component/header_tamplate";
|
||||
import {
|
||||
IconChevronLeft,
|
||||
IconEdit,
|
||||
IconMessageShare,
|
||||
} from "@tabler/icons-react";
|
||||
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
|
||||
import { useDisclosure } from "@mantine/hooks";
|
||||
import router from "next/router";
|
||||
import { title } from "process";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
export default function LayoutDetailDraftDonasi({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
const [opened, { open, close }] = useDisclosure(false);
|
||||
const router = useRouter();
|
||||
return (
|
||||
<>
|
||||
<AppShell
|
||||
header={
|
||||
<Header height={50} sx={{ borderStyle: "none" }}>
|
||||
<Group h={50} position="apart" px={"md"}>
|
||||
<ActionIcon
|
||||
variant="transparent"
|
||||
onClick={() => {
|
||||
router.back();
|
||||
}}
|
||||
>
|
||||
<IconChevronLeft />
|
||||
</ActionIcon>
|
||||
<Title order={5}>Detail Draft</Title>
|
||||
<ActionIcon variant="transparent" onClick={() => open()}>
|
||||
<IconEdit />
|
||||
</ActionIcon>
|
||||
</Group>
|
||||
</Header>
|
||||
}
|
||||
>
|
||||
{children}
|
||||
</AppShell>
|
||||
<Modal opened={opened} onClose={close} centered withCloseButton={false}>
|
||||
<Stack>
|
||||
<Button
|
||||
variant="outline"
|
||||
radius={"xl"}
|
||||
w={"100%"}
|
||||
color="blue"
|
||||
onClick={() => router.push(RouterDonasi.edit_donasi)}
|
||||
>
|
||||
Edit Donasi
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
radius={"xl"}
|
||||
w={"100%"}
|
||||
color="teal"
|
||||
onClick={() => router.push(RouterDonasi.edit_cerita_penggalang)}
|
||||
>
|
||||
Edit Cerita
|
||||
</Button>
|
||||
</Stack>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
52
src/app_modules/donasi/detail/detail_kabar/index.tsx
Normal file
52
src/app_modules/donasi/detail/detail_kabar/index.tsx
Normal file
@@ -0,0 +1,52 @@
|
||||
"use client";
|
||||
|
||||
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
|
||||
import {
|
||||
Paper,
|
||||
Stack,
|
||||
Group,
|
||||
Avatar,
|
||||
Title,
|
||||
Text,
|
||||
AspectRatio,
|
||||
Image,
|
||||
Divider,
|
||||
} from "@mantine/core";
|
||||
import moment from "moment";
|
||||
|
||||
export default function DetailKabarDonasi() {
|
||||
return (
|
||||
<>
|
||||
<Stack>
|
||||
<Group>
|
||||
<Avatar variant="filled" radius={"xl"} />
|
||||
<Stack spacing={0}>
|
||||
<Text>Username</Text>
|
||||
<Text fz={"xs"}>{moment(Date.now()).format("ll")}</Text>
|
||||
</Stack>
|
||||
</Group>
|
||||
<Stack>
|
||||
<Title order={5}>Judul Berita</Title>
|
||||
|
||||
|
||||
<Text>
|
||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquam
|
||||
nostrum vitae eum facilis similique minus exercitationem assumenda,
|
||||
quidem dolores illum ducimus fuga rem molestias? Numquam id
|
||||
praesentium dolor qui amet.
|
||||
</Text>
|
||||
|
||||
<AspectRatio ratio={16 / 9}>
|
||||
<Image alt="Foro" src={"/aset/no-img.png"} />
|
||||
</AspectRatio>
|
||||
<Text>
|
||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquam
|
||||
nostrum vitae eum facilis similique minus exercitationem assumenda,
|
||||
quidem dolores illum ducimus fuga rem molestias? Numquam id
|
||||
praesentium dolor qui amet.
|
||||
</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
32
src/app_modules/donasi/detail/detail_kabar/layout.tsx
Normal file
32
src/app_modules/donasi/detail/detail_kabar/layout.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
AppShell,
|
||||
Button,
|
||||
Center,
|
||||
Divider,
|
||||
Footer,
|
||||
Header,
|
||||
} from "@mantine/core";
|
||||
import { useRouter } from "next/navigation";
|
||||
import React from "react";
|
||||
import FooterDonasi from "../../component/footer_close_donasi";
|
||||
import HeaderTamplateDonasi from "../../component/header_tamplate";
|
||||
|
||||
export default function LayoutDetailKabarDonasi({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
return (
|
||||
<>
|
||||
<AppShell
|
||||
header={<HeaderTamplateDonasi title="Detail Kabar" hideBack={true} />}
|
||||
footer={<FooterDonasi />}
|
||||
>
|
||||
{children}
|
||||
</AppShell>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
"use client";
|
||||
|
||||
import { Box, Image, Stack, Text } from "@mantine/core";
|
||||
import moment from "moment";
|
||||
|
||||
export default function CeritaPenggalangDonasi() {
|
||||
return (
|
||||
<>
|
||||
<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>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
"use client";
|
||||
|
||||
import ButtonDonasi from "@/app_modules/donasi/component/footer_button_donasi";
|
||||
import FooterDonasi from "@/app_modules/donasi/component/footer_close_donasi";
|
||||
import HeaderTamplateDonasi from "@/app_modules/donasi/component/header_tamplate";
|
||||
import { AppShell } from "@mantine/core";
|
||||
import React from "react";
|
||||
|
||||
export default function LayoutCeritaPenggalangDonasi({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
<AppShell
|
||||
header={<HeaderTamplateDonasi title="Cerita Penggalang Dana" />}
|
||||
footer={<ButtonDonasi />}
|
||||
>
|
||||
{children}
|
||||
</AppShell>
|
||||
</>
|
||||
);
|
||||
}
|
||||
57
src/app_modules/donasi/detail/detail_main/donatur/index.tsx
Normal file
57
src/app_modules/donasi/detail/detail_main/donatur/index.tsx
Normal file
@@ -0,0 +1,57 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
Avatar,
|
||||
Center,
|
||||
Grid,
|
||||
Group,
|
||||
Paper,
|
||||
SimpleGrid,
|
||||
Stack,
|
||||
Text,
|
||||
Title,
|
||||
} from "@mantine/core";
|
||||
import { size } from "lodash";
|
||||
import moment from "moment";
|
||||
|
||||
export default function DonaturDonasi() {
|
||||
return (
|
||||
<>
|
||||
<SimpleGrid
|
||||
cols={4}
|
||||
spacing="md"
|
||||
breakpoints={[
|
||||
{ maxWidth: "62rem", cols: 3, spacing: "md" },
|
||||
{ maxWidth: "48rem", cols: 2, spacing: "sm" },
|
||||
{ maxWidth: "36rem", cols: 1, spacing: "sm" },
|
||||
]}
|
||||
>
|
||||
{Array(10)
|
||||
.fill(0)
|
||||
.map((e, i) => (
|
||||
<Paper key={i} bg={"gray.1"} p={"sm"}>
|
||||
<Grid>
|
||||
<Grid.Col span={3}>
|
||||
<Center h={"100%"}>
|
||||
<Avatar variant="filled" radius={"xl"} size={"md"} />
|
||||
</Center>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={9}>
|
||||
<Stack spacing={0}>
|
||||
<Title order={5}>Orang Baik</Title>
|
||||
<Group spacing={"xs"}>
|
||||
<Text>Berdonasi sebesar</Text>
|
||||
<Text truncate fw={"bold"}>
|
||||
Rp. 50.000
|
||||
</Text>
|
||||
</Group>
|
||||
<Text fz={"xs"}>{moment(Date.now()).format("ll")}</Text>
|
||||
</Stack>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</Paper>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
19
src/app_modules/donasi/detail/detail_main/donatur/layout.tsx
Normal file
19
src/app_modules/donasi/detail/detail_main/donatur/layout.tsx
Normal file
@@ -0,0 +1,19 @@
|
||||
"use client";
|
||||
|
||||
import { AppShell } from "@mantine/core";
|
||||
import React from "react";
|
||||
import HeaderTamplateDonasi from "../../../component/header_tamplate";
|
||||
|
||||
export default function LayoutDonaturDonasi({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
<AppShell header={<HeaderTamplateDonasi title="Donatur" />}>
|
||||
{children}
|
||||
</AppShell>
|
||||
</>
|
||||
);
|
||||
}
|
||||
171
src/app_modules/donasi/detail/detail_main/index.tsx
Normal file
171
src/app_modules/donasi/detail/detail_main/index.tsx
Normal file
@@ -0,0 +1,171 @@
|
||||
"use client";
|
||||
|
||||
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
|
||||
import {
|
||||
ActionIcon,
|
||||
AspectRatio,
|
||||
Avatar,
|
||||
Badge,
|
||||
Button,
|
||||
Center,
|
||||
Divider,
|
||||
Grid,
|
||||
Group,
|
||||
Image,
|
||||
Paper,
|
||||
Progress,
|
||||
Stack,
|
||||
Text,
|
||||
Title,
|
||||
} from "@mantine/core";
|
||||
import {
|
||||
IconCircleChevronRight,
|
||||
IconClover,
|
||||
IconMail,
|
||||
IconMailAi,
|
||||
IconMessageChatbot,
|
||||
IconMoneybag,
|
||||
} from "@tabler/icons-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import BoxInformasiDonasi from "../../component/box_informasi";
|
||||
|
||||
export default function DetailMainDonasi() {
|
||||
return (
|
||||
<>
|
||||
<Stack spacing={40}>
|
||||
<DetailDonasi />
|
||||
<InformasiPenggalangDana />
|
||||
<CeritaPenggalangDana />
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function DetailDonasi() {
|
||||
const router = useRouter();
|
||||
return (
|
||||
<>
|
||||
<Stack>
|
||||
<Stack>
|
||||
<AspectRatio ratio={16 / 9}>
|
||||
<Paper radius={"md"}>
|
||||
<Image alt="Foto" src={"/aset/no-img.png"} />
|
||||
</Paper>
|
||||
</AspectRatio>
|
||||
<Title order={4}>Judul Donasi</Title>
|
||||
<Stack spacing={0}>
|
||||
<Group position="apart">
|
||||
<Stack spacing={0}>
|
||||
<Text fz={12}>Dana dibutuhkan</Text>
|
||||
<Title order={4} c="blue">
|
||||
Rp. 50.000.000
|
||||
</Title>
|
||||
</Stack>
|
||||
<Text fz={"xs"}>Sisa hari <Text span inherit fw={"bold"}>100</Text> </Text>
|
||||
</Group>
|
||||
</Stack>
|
||||
<Progress value={50} />
|
||||
<Grid>
|
||||
<Grid.Col
|
||||
span={"auto"}
|
||||
onClick={() => router.push(RouterDonasi.donatur)}
|
||||
>
|
||||
<Stack align="center" spacing={"xs"}>
|
||||
<Group>
|
||||
<IconClover color="skyblue" />
|
||||
<Text>50</Text>
|
||||
</Group>
|
||||
<Text>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>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>Pencairan Dana</Text>
|
||||
</Stack>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
62
src/app_modules/donasi/detail/detail_main/kabar/index.tsx
Normal file
62
src/app_modules/donasi/detail/detail_main/kabar/index.tsx
Normal file
@@ -0,0 +1,62 @@
|
||||
"use client";
|
||||
|
||||
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
|
||||
import {
|
||||
ActionIcon,
|
||||
Avatar,
|
||||
Group,
|
||||
Paper,
|
||||
SimpleGrid,
|
||||
Spoiler,
|
||||
Stack,
|
||||
Text,
|
||||
Title,
|
||||
} from "@mantine/core";
|
||||
import { IconCircleChevronRight } from "@tabler/icons-react";
|
||||
import moment from "moment";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
export default function KabarDonasi() {
|
||||
const router = useRouter()
|
||||
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" },
|
||||
]}
|
||||
>
|
||||
{Array(4)
|
||||
.fill(0)
|
||||
.map((e, i) => (
|
||||
<Paper key={i} bg={"gray.1"} p={"md"}>
|
||||
<Stack>
|
||||
<Group>
|
||||
<Avatar variant="filled" radius={"xl"} />
|
||||
<Stack spacing={0}>
|
||||
<Text>Username</Text>
|
||||
<Text fz={"xs"}>{moment(Date.now()).format("ll")}</Text>
|
||||
</Stack>
|
||||
</Group>
|
||||
<Stack>
|
||||
<Title order={5}>Judul Kabar</Title>
|
||||
<Stack spacing={0}>
|
||||
<Text lineClamp={2}>
|
||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
|
||||
Aliquam nostrum vitae eum facilis similique minus
|
||||
exercitationem assumenda, quidem dolores illum ducimus
|
||||
fuga rem molestias? Numquam id praesentium dolor qui amet.
|
||||
</Text>
|
||||
<Text c={"blue"} onClick={() => router.push(RouterDonasi.detail_kabar)}>Buka Kabar</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Paper>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
16
src/app_modules/donasi/detail/detail_main/kabar/layout.tsx
Normal file
16
src/app_modules/donasi/detail/detail_main/kabar/layout.tsx
Normal file
@@ -0,0 +1,16 @@
|
||||
"use client"
|
||||
|
||||
import { AppShell } from "@mantine/core"
|
||||
import React from "react"
|
||||
import HeaderTamplateDonasi from "../../../component/header_tamplate"
|
||||
|
||||
export default function LayoutKabarDonasi({children}: {children: React.ReactNode}){
|
||||
return<>
|
||||
<AppShell
|
||||
header={<HeaderTamplateDonasi title="Kabar Terbaru"/>}
|
||||
>
|
||||
{children}
|
||||
</AppShell>
|
||||
|
||||
</>
|
||||
}
|
||||
23
src/app_modules/donasi/detail/detail_main/layout.tsx
Normal file
23
src/app_modules/donasi/detail/detail_main/layout.tsx
Normal file
@@ -0,0 +1,23 @@
|
||||
"use client";
|
||||
|
||||
import { AppShell, Box, Button, Center, Footer } from "@mantine/core";
|
||||
import React from "react";
|
||||
import HeaderTamplateDonasi from "../../component/header_tamplate";
|
||||
import ButtonDonasi from "../../component/footer_button_donasi";
|
||||
|
||||
export default function LayoutDetailMainDonasi({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
<AppShell
|
||||
header={<HeaderTamplateDonasi title="Detail Donasi" />}
|
||||
footer={<ButtonDonasi />}
|
||||
>
|
||||
{children}
|
||||
</AppShell>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Grid,
|
||||
Group,
|
||||
Paper,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
Title,
|
||||
} from "@mantine/core";
|
||||
import {
|
||||
IconChevronRight,
|
||||
IconMoodSmile,
|
||||
IconMoodSmileBeam,
|
||||
IconMoodSmileDizzy,
|
||||
IconMoodXd,
|
||||
} from "@tabler/icons-react";
|
||||
|
||||
export default function MasukanDonasi() {
|
||||
const listNominal = [
|
||||
{
|
||||
id: 1,
|
||||
nominal: 25000,
|
||||
icon: <IconMoodSmile />,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
nominal: 50000,
|
||||
icon: <IconMoodSmileBeam />,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
nominal: 75000,
|
||||
icon: <IconMoodSmileDizzy />,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
nominal: 10000,
|
||||
icon: <IconMoodXd />,
|
||||
},
|
||||
];
|
||||
return (
|
||||
<>
|
||||
<Stack>
|
||||
<Box>
|
||||
{listNominal.map((e) => (
|
||||
<Paper
|
||||
key={e.id}
|
||||
withBorder
|
||||
radius={"md"}
|
||||
p={"sm"}
|
||||
shadow="lg"
|
||||
mb={"md"}
|
||||
>
|
||||
<Group position="apart">
|
||||
<Group>
|
||||
{e.icon}
|
||||
<Title order={4}>
|
||||
Rp.{" "}
|
||||
{new Intl.NumberFormat("id-ID", {
|
||||
maximumFractionDigits: 10,
|
||||
}).format(e.nominal)}
|
||||
</Title>
|
||||
</Group>
|
||||
<IconChevronRight />
|
||||
</Group>
|
||||
</Paper>
|
||||
))}
|
||||
</Box>
|
||||
<Paper p={"sm"} withBorder shadow="lg">
|
||||
<Stack>
|
||||
<Text>Nominal Lainnya</Text>
|
||||
<Grid>
|
||||
<Grid.Col span={1}>
|
||||
<Title order={4}>Rp.</Title>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={11}>
|
||||
<TextInput type="number" />
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
<Text c={"gray"} fz={"xs"}>
|
||||
Minimal Donasi Rp. 10.000
|
||||
</Text>
|
||||
</Stack>
|
||||
</Paper>
|
||||
<Button radius={"xl"}>Lanjutan Pembayaran</Button>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
"use client";
|
||||
|
||||
import { AppShell } from "@mantine/core";
|
||||
import React from "react";
|
||||
import HeaderTamplateDonasi from "../../../component/header_tamplate";
|
||||
|
||||
export default function LayoutMasukanDonasi({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
<AppShell
|
||||
header={<HeaderTamplateDonasi title="Masukan Nominal Donasi" />}
|
||||
>
|
||||
{children}
|
||||
</AppShell>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
"use client";
|
||||
|
||||
import BoxInformasiDonasi from "@/app_modules/donasi/component/box_informasi";
|
||||
import {
|
||||
Avatar,
|
||||
Button,
|
||||
Center,
|
||||
Grid,
|
||||
Group,
|
||||
Image,
|
||||
Modal,
|
||||
Paper,
|
||||
Spoiler,
|
||||
Stack,
|
||||
Text,
|
||||
Title,
|
||||
} from "@mantine/core";
|
||||
import { useDisclosure } from "@mantine/hooks";
|
||||
import { IconTransferIn } from "@tabler/icons-react";
|
||||
import moment from "moment";
|
||||
|
||||
export default function PencairanDanaDonasi() {
|
||||
return (
|
||||
<>
|
||||
<Stack>
|
||||
<BoxDanaDicarikan />
|
||||
<InformasiPencairanDana />
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function BoxDanaDicarikan() {
|
||||
return (
|
||||
<>
|
||||
<Paper bg={"gray.1"} p={"md"}>
|
||||
<Stack>
|
||||
<Grid>
|
||||
<Grid.Col span={6}>
|
||||
<Title order={5}>Rp. 10.000.000</Title>
|
||||
<Text fz={"xs"}>Dana sudah dicairkan</Text>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={6}>
|
||||
<Title order={5}>2 kali</Title>
|
||||
<Text fz={"xs"}>Pencairan dana</Text>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
<BoxInformasiDonasi informasi=" Pencairan dana akan dilakukan oleh Admin HIPMI tanpa campur tangan
|
||||
pihak manapun, jika berita pencairan dana dibawah tidak sesuai
|
||||
dengan kabar yang diberikan oleh PENGGALANG DANA. Maka pegguna lain
|
||||
dapat melaporkannya pada Admin HIPMI !"/>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function InformasiPencairanDana() {
|
||||
const [opened, { open, close }] = useDisclosure(false);
|
||||
return (
|
||||
<>
|
||||
<Modal opened={opened} onClose={close} fullScreen>
|
||||
<Paper>
|
||||
<Stack>
|
||||
<Center>
|
||||
<Title order={5}>Bukti Pencairan Dana</Title>
|
||||
</Center>
|
||||
<Image alt="Foto" src={"/aset/donasi/bukti.jpg"} />
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Modal>
|
||||
{Array(2)
|
||||
.fill(0)
|
||||
.map((e, i) => (
|
||||
<Paper key={i} withBorder p={"md"}>
|
||||
<Text fz={"xs"}>{moment(Date.now()).format("ll")}</Text>
|
||||
<Stack spacing={"lg"}>
|
||||
<Title order={5}>Pencairan Dana Sebesar Rp. 5.000.000</Title>
|
||||
<Spoiler
|
||||
maxHeight={50}
|
||||
hideLabel="Sembunyikan"
|
||||
showLabel="Baca Selengkapnya"
|
||||
>
|
||||
Pencairan Dana kepada pihak Penggalang dana sebesar 5 juta yang
|
||||
di transfer pada, {moment(Date.now()).format("lll")}.
|
||||
</Spoiler>
|
||||
<Center>
|
||||
<Button
|
||||
radius={"xl"}
|
||||
variant="outline"
|
||||
leftIcon={<IconTransferIn />}
|
||||
onClick={() => open()}
|
||||
>
|
||||
Bukti Transfer
|
||||
</Button>
|
||||
</Center>
|
||||
</Stack>
|
||||
</Paper>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
"use client";
|
||||
|
||||
import HeaderTamplateDonasi from "@/app_modules/donasi/component/header_tamplate";
|
||||
import { AppShell } from "@mantine/core";
|
||||
import React from "react";
|
||||
|
||||
export default function LayoutPencairanDanaDonasi({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
<AppShell header={<HeaderTamplateDonasi title="Pencairan Dana" />}>
|
||||
{children}
|
||||
</AppShell>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,140 @@
|
||||
"use client";
|
||||
|
||||
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
|
||||
import {
|
||||
AspectRatio,
|
||||
Avatar,
|
||||
Box,
|
||||
Center,
|
||||
Divider,
|
||||
Grid,
|
||||
Group,
|
||||
Image,
|
||||
Paper,
|
||||
Progress,
|
||||
SimpleGrid,
|
||||
Stack,
|
||||
Text,
|
||||
Title,
|
||||
} from "@mantine/core";
|
||||
import { useViewportSize } from "@mantine/hooks";
|
||||
import {
|
||||
IconBrandGmail,
|
||||
IconHome,
|
||||
IconMoodSmile,
|
||||
IconPhone,
|
||||
IconRecordMail,
|
||||
} from "@tabler/icons-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import router from "next/router";
|
||||
|
||||
export default function PenggalangDanaDonasi() {
|
||||
return (
|
||||
<>
|
||||
<Stack>
|
||||
<InformasiPenggalang />
|
||||
<DataPengganganDana />
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function InformasiPenggalang() {
|
||||
return (
|
||||
<>
|
||||
<Paper radius={"md"}>
|
||||
<Stack bg={"gray.1"} p={"md"} spacing={"xl"} sx={{borderRadius: "10px"}}>
|
||||
<Stack align="center" spacing={0}>
|
||||
<Paper
|
||||
radius={"100%"}
|
||||
h={100}
|
||||
w={100}
|
||||
sx={{ borderStyle: "solid" }}
|
||||
>
|
||||
<Center h={"100%"}>
|
||||
<Image
|
||||
width={100}
|
||||
height={100}
|
||||
alt="Foto"
|
||||
src={"/aset/avatar.png"}
|
||||
/>
|
||||
</Center>
|
||||
</Paper>
|
||||
<Title order={3}>@Username</Title>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Group>
|
||||
<IconMoodSmile />
|
||||
<Text>Nama Penggalang Dana</Text>
|
||||
</Group>
|
||||
<Group>
|
||||
<IconPhone />
|
||||
<Text>+62 81x xxx xxx</Text>
|
||||
</Group>
|
||||
<Group>
|
||||
<IconBrandGmail />
|
||||
<Text>user1@gmail.com</Text>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function DataPengganganDana() {
|
||||
const router = useRouter();
|
||||
const { height, width } = useViewportSize();
|
||||
return (
|
||||
<>
|
||||
<Title order={5}>Peggalangan Dana Yang Dilakukan</Title>
|
||||
|
||||
<SimpleGrid
|
||||
cols={4}
|
||||
spacing="lg"
|
||||
breakpoints={[
|
||||
{ maxWidth: "62rem", cols: 3, spacing: "md" },
|
||||
{ maxWidth: "48rem", cols: 2, spacing: "sm" },
|
||||
{ maxWidth: "36rem", cols: 1, spacing: "sm" },
|
||||
]}
|
||||
>
|
||||
{Array(5)
|
||||
.fill(0)
|
||||
.map((e, i) => (
|
||||
<Box key={i} onClick={() => router.push(RouterDonasi.detail_main)}>
|
||||
<Stack>
|
||||
<Grid>
|
||||
<Grid.Col span={7}>
|
||||
<AspectRatio ratio={16 / 9}>
|
||||
<Paper radius={"md"}>
|
||||
<Image
|
||||
alt="Foto"
|
||||
src={"/aset/no-img.png"}
|
||||
radius={"md"}
|
||||
/>
|
||||
</Paper>
|
||||
</AspectRatio>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={5}>
|
||||
<Stack spacing={"xs"}>
|
||||
<Text fz={"sm"} fw={"bold"} lineClamp={2}>
|
||||
Judul Donasi Bisa Dilihat Disini Untuk Contoh
|
||||
</Text>
|
||||
<Progress value={50} color="orange" />
|
||||
<Stack spacing={0}>
|
||||
<Text fz={"sm"}>Terkumpul</Text>
|
||||
<Text fz={"sm"} fw={"bold"} c={"orange"} truncate>
|
||||
Rp. 100.000.000
|
||||
</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
{width > 575 ? "" : <Divider />}
|
||||
</Stack>
|
||||
</Box>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
"use client";
|
||||
|
||||
import HeaderTamplateDonasi from "@/app_modules/donasi/component/header_tamplate";
|
||||
import { AppShell } from "@mantine/core";
|
||||
import React from "react";
|
||||
|
||||
export default function LayoutPenggalangDanaDonasi({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
<AppShell
|
||||
header={<HeaderTamplateDonasi title="Informasu Penggalangan Dana" />}
|
||||
// footer={<FooterDonasi />}
|
||||
>
|
||||
{children}
|
||||
</AppShell>
|
||||
</>
|
||||
);
|
||||
}
|
||||
167
src/app_modules/donasi/detail/detail_publish/index.tsx
Normal file
167
src/app_modules/donasi/detail/detail_publish/index.tsx
Normal file
@@ -0,0 +1,167 @@
|
||||
"use client";
|
||||
|
||||
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
|
||||
import {
|
||||
Stack,
|
||||
AspectRatio,
|
||||
Paper,
|
||||
Title,
|
||||
Progress,
|
||||
Grid,
|
||||
Group,
|
||||
Divider,
|
||||
ActionIcon,
|
||||
Avatar,
|
||||
Text,
|
||||
Image,
|
||||
} from "@mantine/core";
|
||||
import {
|
||||
IconClover,
|
||||
IconMail,
|
||||
IconMoneybag,
|
||||
IconCircleChevronRight,
|
||||
IconMessageChatbot,
|
||||
} from "@tabler/icons-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import BoxInformasiDonasi from "../../component/box_informasi";
|
||||
|
||||
export default function DetailPublishDonasi() {
|
||||
return (
|
||||
<>
|
||||
<Stack spacing={40}>
|
||||
<DetailDonasi />
|
||||
<InformasiPenggalangDana />
|
||||
<CeritaPenggalangDana />
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function DetailDonasi() {
|
||||
const router = useRouter();
|
||||
return (
|
||||
<>
|
||||
<Stack>
|
||||
<Stack>
|
||||
<AspectRatio ratio={16 / 9}>
|
||||
<Paper radius={"md"}>
|
||||
<Image alt="Foto" src={"/aset/no-img.png"} />
|
||||
</Paper>
|
||||
</AspectRatio>
|
||||
<Title order={4}>Judul Donasi</Title>
|
||||
<Stack spacing={0}>
|
||||
<Group position="apart">
|
||||
<Stack spacing={0}>
|
||||
<Text fz={12}>Dana dibutuhkan</Text>
|
||||
<Title order={4} c="blue">
|
||||
Rp. 50.000.000
|
||||
</Title>
|
||||
</Stack>
|
||||
<Text fz={"xs"}>Sisa hari <Text span inherit fw={"bold"}>100</Text> </Text>
|
||||
</Group>
|
||||
</Stack>
|
||||
<Progress value={50} />
|
||||
<Grid>
|
||||
<Grid.Col
|
||||
span={"auto"}
|
||||
onClick={() => router.push(RouterDonasi.donatur)}
|
||||
>
|
||||
<Stack align="center" spacing={"xs"}>
|
||||
<Group>
|
||||
<IconClover color="skyblue" />
|
||||
<Text>50</Text>
|
||||
</Group>
|
||||
<Text>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>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>Pencairan Dana</Text>
|
||||
</Stack>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
21
src/app_modules/donasi/detail/detail_publish/layout.tsx
Normal file
21
src/app_modules/donasi/detail/detail_publish/layout.tsx
Normal file
@@ -0,0 +1,21 @@
|
||||
"use client";
|
||||
|
||||
import { AppShell } from "@mantine/core";
|
||||
import React from "react";
|
||||
import HeaderTamplateDonasi from "../../component/header_tamplate";
|
||||
import { IconEdit, IconMessageShare } from "@tabler/icons-react";
|
||||
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
|
||||
|
||||
export default function LayoutDetailPublishDonasi({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
<AppShell header={<HeaderTamplateDonasi title="Detail Publish" icon={<IconMessageShare/>} route2={RouterDonasi.list_kabar} />}>
|
||||
{children}
|
||||
</AppShell>
|
||||
</>
|
||||
);
|
||||
}
|
||||
209
src/app_modules/donasi/detail/detail_reject/index.tsx
Normal file
209
src/app_modules/donasi/detail/detail_reject/index.tsx
Normal file
@@ -0,0 +1,209 @@
|
||||
"use client";
|
||||
|
||||
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
|
||||
import {
|
||||
Stack,
|
||||
AspectRatio,
|
||||
Paper,
|
||||
Title,
|
||||
Progress,
|
||||
Grid,
|
||||
Group,
|
||||
Divider,
|
||||
ActionIcon,
|
||||
Avatar,
|
||||
Text,
|
||||
Image,
|
||||
Button,
|
||||
Spoiler,
|
||||
Modal,
|
||||
} from "@mantine/core";
|
||||
import {
|
||||
IconClover,
|
||||
IconMail,
|
||||
IconMoneybag,
|
||||
IconCircleChevronRight,
|
||||
IconMessageChatbot,
|
||||
} from "@tabler/icons-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import BoxInformasiDonasi from "../../component/box_informasi";
|
||||
import { useAtom } from "jotai";
|
||||
import { gs_donasi_tabs_posting } from "../../global_state";
|
||||
import { useDisclosure } from "@mantine/hooks";
|
||||
|
||||
export default function DetailRejectDonasi() {
|
||||
return (
|
||||
<>
|
||||
<Stack spacing={"xl"}>
|
||||
<AlasanPenolakan />
|
||||
<DetailDonasi />
|
||||
{/* <InformasiPenggalangDana /> */}
|
||||
<CeritaPenggalangDana />
|
||||
<ButtonAction />
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function ButtonAction() {
|
||||
const [tabsPostingDonasi, setTabsPostingDonasi] = useAtom(
|
||||
gs_donasi_tabs_posting
|
||||
);
|
||||
const router = useRouter();
|
||||
const [opened, { open, close }] = useDisclosure(false);
|
||||
|
||||
async function onCLick() {
|
||||
router.push(RouterDonasi.main_galang_dana);
|
||||
setTabsPostingDonasi("Draft");
|
||||
}
|
||||
async function onDelete() {
|
||||
router.push(RouterDonasi.main_galang_dana);
|
||||
setTabsPostingDonasi("Reject");
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<Group position="center">
|
||||
<Button
|
||||
radius={"xl"}
|
||||
bg={"orange"}
|
||||
color="orange"
|
||||
onClick={() => onCLick()}
|
||||
>
|
||||
Ajukan Kembali
|
||||
</Button>
|
||||
<Button radius={"xl"} bg={"red"} color="red" onClick={() => open()}>
|
||||
Hapus Donasi
|
||||
</Button>
|
||||
</Group>
|
||||
<Modal opened={opened} onClose={close} centered title="Yakin menghapus Penggalanagn Dana ini ?">
|
||||
<Group position="center">
|
||||
<Button radius={"xl"} variant="outline" onClick={close}>
|
||||
Batal
|
||||
</Button>
|
||||
<Button radius={"xl"} variant="outline" color="red" onClick={() => onDelete()}>
|
||||
Hapus
|
||||
</Button>
|
||||
</Group>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function AlasanPenolakan() {
|
||||
return (
|
||||
<>
|
||||
<Paper bg={"blue.1"} p={"sm"}>
|
||||
<Title order={5}>Alasan penolakan</Title>
|
||||
<Spoiler
|
||||
maxHeight={50}
|
||||
hideLabel="Sembunyikan"
|
||||
showLabel="Selengkapnya"
|
||||
>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam id
|
||||
explicabo accusantium consequatur natus ex nisi perferendis rem
|
||||
deserunt illo exercitationem illum doloremque, maxime voluptatibus
|
||||
nihil rerum provident et? Nobis.
|
||||
</Spoiler>
|
||||
</Paper>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function DetailDonasi() {
|
||||
const router = useRouter();
|
||||
return (
|
||||
<>
|
||||
<Stack>
|
||||
<Stack>
|
||||
<AspectRatio ratio={16 / 9}>
|
||||
<Paper radius={"md"}>
|
||||
<Image alt="Foto" src={"/aset/no-img.png"} />
|
||||
</Paper>
|
||||
</AspectRatio>
|
||||
<Title order={4}>Judul Donasi</Title>
|
||||
<Stack spacing={0}>
|
||||
<Group position="apart">
|
||||
<Stack spacing={0}>
|
||||
<Text fz={12}>Dana dibutuhkan</Text>
|
||||
<Title order={4} c="blue">
|
||||
Rp. 50.000.000
|
||||
</Title>
|
||||
</Stack>
|
||||
<Stack spacing={0}>
|
||||
<Text fz={12}>Kategori</Text>
|
||||
<Title order={4} c="blue">
|
||||
Kesehatan
|
||||
</Title>
|
||||
</Stack>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
22
src/app_modules/donasi/detail/detail_reject/layout.tsx
Normal file
22
src/app_modules/donasi/detail/detail_reject/layout.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
"use client";
|
||||
|
||||
import { AppShell } from "@mantine/core";
|
||||
import React from "react";
|
||||
import HeaderTamplateDonasi from "../../component/header_tamplate";
|
||||
import { IconEdit, IconMessageShare } from "@tabler/icons-react";
|
||||
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
|
||||
|
||||
export default function LayoutDetailRejectDonasi({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
|
||||
return (
|
||||
<>
|
||||
<AppShell header={<HeaderTamplateDonasi title="Detail Reject" />}>
|
||||
{children}
|
||||
</AppShell>
|
||||
</>
|
||||
);
|
||||
}
|
||||
159
src/app_modules/donasi/detail/detail_review/index.tsx
Normal file
159
src/app_modules/donasi/detail/detail_review/index.tsx
Normal file
@@ -0,0 +1,159 @@
|
||||
"use client";
|
||||
|
||||
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
|
||||
import {
|
||||
Stack,
|
||||
AspectRatio,
|
||||
Paper,
|
||||
Title,
|
||||
Progress,
|
||||
Grid,
|
||||
Group,
|
||||
Divider,
|
||||
ActionIcon,
|
||||
Avatar,
|
||||
Text,
|
||||
Image,
|
||||
Button,
|
||||
} from "@mantine/core";
|
||||
import {
|
||||
IconClover,
|
||||
IconMail,
|
||||
IconMoneybag,
|
||||
IconCircleChevronRight,
|
||||
IconMessageChatbot,
|
||||
} from "@tabler/icons-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import BoxInformasiDonasi from "../../component/box_informasi";
|
||||
import { useAtom } from "jotai";
|
||||
import { gs_donasi_tabs_posting } from "../../global_state";
|
||||
|
||||
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")
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<Stack spacing={"xl"}>
|
||||
<DetailDonasi />
|
||||
{/* <InformasiPenggalangDana /> */}
|
||||
<CeritaPenggalangDana />
|
||||
<Button
|
||||
radius={"xl"}
|
||||
bg={"red"}
|
||||
color="red"
|
||||
onClick={() => onCLick()}
|
||||
>
|
||||
Batalkan Review
|
||||
</Button>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function DetailDonasi() {
|
||||
const router = useRouter();
|
||||
return (
|
||||
<>
|
||||
<Stack>
|
||||
<Stack>
|
||||
<AspectRatio ratio={16 / 9}>
|
||||
<Paper radius={"md"}>
|
||||
<Image alt="Foto" src={"/aset/no-img.png"} />
|
||||
</Paper>
|
||||
</AspectRatio>
|
||||
<Title order={4}>Judul Donasi</Title>
|
||||
<Stack spacing={0}>
|
||||
<Group position="apart">
|
||||
<Stack spacing={0}>
|
||||
<Text fz={12}>Dana dibutuhkan</Text>
|
||||
<Title order={4} c="blue">
|
||||
Rp. 50.000.000
|
||||
</Title>
|
||||
</Stack>
|
||||
<Stack spacing={0}>
|
||||
<Text fz={12}>Kategori</Text>
|
||||
<Title order={4} c="blue">
|
||||
Kesehatan
|
||||
</Title>
|
||||
|
||||
</Stack>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
22
src/app_modules/donasi/detail/detail_review/layout.tsx
Normal file
22
src/app_modules/donasi/detail/detail_review/layout.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
"use client";
|
||||
|
||||
import { AppShell } from "@mantine/core";
|
||||
import React from "react";
|
||||
import HeaderTamplateDonasi from "../../component/header_tamplate";
|
||||
import { IconEdit, IconMessageShare } from "@tabler/icons-react";
|
||||
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
|
||||
|
||||
export default function LayoutDetailReviewDonasi({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
|
||||
return (
|
||||
<>
|
||||
<AppShell header={<HeaderTamplateDonasi title="Detail Review" />}>
|
||||
{children}
|
||||
</AppShell>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user