# feat
- Tampilan user selesai
- Tampilan admin in progres
### No Issue
This commit is contained in:
2023-12-23 04:45:55 +08:00
parent 414cf8f776
commit 5c56c32dd4
105 changed files with 4067 additions and 4 deletions

View 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>
</>
);
}

View 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>
</>
}

View 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>
</>
);
}

View 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>
</>
);
}

View 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>
</>
);
}

View 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>
</>
);
}

View File

@@ -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>
</>
);
}

View File

@@ -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>
</>
);
}

View 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>
</>
);
}

View 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>
</>
);
}

View 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>
</>
);
}

View 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>
</>
);
}

View 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>
</>
}

View 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>
</>
);
}

View File

@@ -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>
</>
);
}

View File

@@ -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>
</>
);
}

View File

@@ -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>
))}
</>
);
}

View File

@@ -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>
</>
);
}

View File

@@ -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>
</>
);
}

View File

@@ -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>
</>
);
}

View 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>
</>
);
}

View 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>
</>
);
}

View 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>
</>
);
}

View 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>
</>
);
}

View 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>
</>
);
}

View 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>
</>
);
}