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

Donasi

Browse Source 
# feat
- Tampilan user selesai
- Tampilan admin in progres
### No Issue
This commit is contained in:
Bagasbanuna02
2023-12-23 04:45:55 +08:00
parent 414cf8f776
commit 5c56c32dd4
105 changed files with 4067 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
src/app_modules/donasi/main/beranda.tsx Normal file
View File

@@ -0,0 +1,82 @@
"use client";
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
import { Warna } from "@/app/lib/warna";
import {
AspectRatio,
Avatar,
Badge,
Box,
Button,
Card,
CardSection,
Center,
Divider,
Grid,
Group,
Image,
Paper,
Progress,
SimpleGrid,
Stack,
Text,
Title,
} from "@mantine/core";
import { useViewportSize } from "@mantine/hooks";
import { useRouter } from "next/navigation";
export default function MainDonasi() {
const router = useRouter();
const { height, width } = useViewportSize();
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(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>
</>
);
}

87
src/app_modules/donasi/main/donasi_saya.tsx Normal file
View File

@@ -0,0 +1,87 @@
"use client";
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
import {
AspectRatio,
Avatar,
Badge,
Box,
Button,
Card,
Center,
Divider,
Grid,
Group,
Image,
Paper,
Progress,
SimpleGrid,
Stack,
Text,
Title,
} from "@mantine/core";
import { useViewportSize } from "@mantine/hooks";
import { useRouter } from "next/navigation";
import toast from "react-simple-toasts";
export default function DonasiSayaDonasi() {
const router = useRouter();
const { height, width } = useViewportSize();
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(5)
.fill(0)
.map((e, i) => (
<Box
key={i}
onClick={() =>
router.push(RouterDonasi.detail_donasi_saya)
}
>
<Stack>
<Grid>
<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"}>Donasi Saya</Text>
<Text fz={"sm"} fw={"bold"} c={"orange"} truncate>
Rp. 25.000.000
</Text>
</Stack>
</Stack>
</Grid.Col>
<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>
{width > 575 ? "" : <Divider />}
</Stack>
</Box>
))}
</SimpleGrid>
</>
);
}

108
src/app_modules/donasi/main/galang_dana.tsx Normal file
View File

@@ -0,0 +1,108 @@
"use client";
import {
Affix,
Box,
Button,
Divider,
Stack,
Tabs,
TabsProps,
Text,
rem,
} from "@mantine/core";
import { IconCirclePlus } from "@tabler/icons-react";
import { useAtom } from "jotai";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { gs_donasi_tabs_posting } from "../global_state";
import PostingPublishDonasi from "./galang_dana/publish";
import PostingReviewDonasi from "./galang_dana/review";
import PostingRejectDonasi from "./galang_dana/reject";
import { Warna } from "@/app/lib/warna";
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
import PostingDraftDonasi from "./galang_dana/draft";
export default function GalangDanaDonasi() {
const router = useRouter();
const [tabsPostingDonasi, setTabsPostingDonasi] = useAtom(
gs_donasi_tabs_posting
);
const listPosting = [
{
id: 1,
value: "Publish",
path: <PostingPublishDonasi data={"1"} />,
color: "green",
},
{
id: 2,
value: "Review",
path: <PostingReviewDonasi data={"2"} />,
color: "yellow",
},
{
id: 3,
value: "Draft",
path: <PostingDraftDonasi data={"3"} />,
color: "red",
},
{
id: 4,
value: "Reject",
path: <PostingRejectDonasi data={"4"} />,
color: "red",
},
];
return (
<>
<Affix position={{ bottom: rem(100), right: rem(20) }}>
<Button
radius={"xl"}
bg={"orange"}
color="orange"
leftIcon={<IconCirclePlus />}
onClick={() => router.push(RouterDonasi.create)}
>
Galang Dana
</Button>
</Affix>
<Stack >
<Tabs
color="orange"
variant="pills"
radius="xl"
defaultValue="Publish"
value={tabsPostingDonasi}
onTabChange={setTabsPostingDonasi}
>
<Stack>
<Tabs.List grow>
{listPosting.map((e, i) => (
<Tabs.Tab
key={e.id}
value={e.value}
bg={tabsPostingDonasi === e.value ? e.color : "gray.1"}
>
<Text
c={tabsPostingDonasi === e.value ? "white" : "gray"}
fw={tabsPostingDonasi === e.value ? 900 : "normal"}
>
{e.value}
</Text>
</Tabs.Tab>
))}
</Tabs.List>
{listPosting.map((e, i) => (
<Tabs.Panel key={e.id} value={e.value} pt="xs">
{e.path}
</Tabs.Panel>
))}
</Stack>
</Tabs>
</Stack>
</>
);
}

80
src/app_modules/donasi/main/galang_dana/draft.tsx Normal file
View File

@@ -0,0 +1,80 @@
"use client";
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
import {
AspectRatio,
Box,
Button,
Card,
Center,
Divider,
Grid,
Image,
Paper,
Progress,
SimpleGrid,
Stack,
Text,
Title,
} from "@mantine/core";
import { useViewportSize } from "@mantine/hooks";
import { useRouter } from "next/navigation";
import toast from "react-simple-toasts";
export default function PostingDraftDonasi({ data }: { data: any }) {
const { height, width } = useViewportSize();
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(5)
.fill(0)
.map((e, i) => (
<Box
key={i}
onClick={() => router.push(RouterDonasi.detail_draft)}
>
<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>
<Stack spacing={0}>
<Text fz={"sm"}>Terget Dana</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>
</>
);
}

84
src/app_modules/donasi/main/galang_dana/publish.tsx Normal file
View File

@@ -0,0 +1,84 @@
"use client";
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
import {
AspectRatio,
Box,
Button,
Card,
Center,
Divider,
Grid,
Group,
Image,
Paper,
Progress,
SimpleGrid,
Stack,
Text,
Title,
} from "@mantine/core";
import { useViewportSize } from "@mantine/hooks";
import { useRouter } from "next/navigation";
import toast from "react-simple-toasts";
export default function PostingPublishDonasi({ data }: { data: any }) {
const router = useRouter();
const { height, width } = useViewportSize();
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(5)
.fill(0)
.map((e, i) => (
<Box
key={i}
onClick={() =>
router.push(RouterDonasi.detail_publish)
// toast("Cooming soon")
}
>
<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>
</>
);
}

83
src/app_modules/donasi/main/galang_dana/reject.tsx Normal file
View File

@@ -0,0 +1,83 @@
"use client";
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
import {
AspectRatio,
Box,
Button,
Card,
Center,
Divider,
Grid,
Image,
Paper,
SimpleGrid,
Stack,
Text,
Title,
} from "@mantine/core";
import { useViewportSize } from "@mantine/hooks";
import { useRouter } from "next/navigation";
import toast from "react-simple-toasts";
export default function PostingRejectDonasi({ data }: { data: any }) {
const { height, width } = useViewportSize();
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(5)
.fill(0)
.map((e, i) => (
<Box
key={i}
onClick={() =>
router.push(RouterDonasi.detail_reject)
}
>
<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>
<Stack spacing={0}>
<Text fz={"sm"} fw={"bold"}>Alasan ditolak</Text>
<Text fz={"sm"} lineClamp={2}>
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Expedita inventore rem iure praesentium delectus consectetur
alias, veniam, fugit in ab esse recusandae mollitia quasi
perferendis tenetur suscipit architecto saepe! Animi.
</Text>
</Stack>
</Stack>
</Grid.Col>
</Grid>
{width > 575 ? "" : <Divider />}
</Stack>
</Box>
))}
</SimpleGrid>
</>
);
}

80
src/app_modules/donasi/main/galang_dana/review.tsx Normal file
View File

@@ -0,0 +1,80 @@
"use client";
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
import {
AspectRatio,
Box,
Button,
Card,
Center,
Divider,
Grid,
Image,
Paper,
Progress,
SimpleGrid,
Stack,
Text,
Title,
} from "@mantine/core";
import { useViewportSize } from "@mantine/hooks";
import { useRouter } from "next/navigation";
import toast from "react-simple-toasts";
export default function PostingReviewDonasi({ data }: { data: any }) {
const { height, width } = useViewportSize();
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(5)
.fill(0)
.map((e, i) => (
<Box
key={i}
onClick={() => router.push(RouterDonasi.detail_review)}
>
<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>
<Stack spacing={0}>
<Text fz={"sm"}>Terget Dana</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>
</>
);
}

100
src/app_modules/donasi/main/layout.tsx Normal file
View File

@@ -0,0 +1,100 @@
"use client";
import {
ActionIcon,
AppShell,
Center,
Flex,
Footer,
Grid,
Text,
} from "@mantine/core";
import React, { useState } from "react";
import HeaderTamplateDonasi from "../component/header_tamplate";
import {
IconCurrencyDollar,
IconGift,
IconGiftCardFilled,
IconHome,
IconMoneybag,
IconSend,
} from "@tabler/icons-react";
import toast from "react-simple-toasts";
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
import { useRouter } from "next/navigation";
import { useAtom } from "jotai";
import { gs_donasi_hot_menu } from "../global_state";
import { RouterCrowd } from "@/app/lib/router_hipmi/router_crowd";
export default function LayoutDonasi({
children,
}: {
children: React.ReactNode;
}) {
const router = useRouter();
const [active, setActive] = useAtom(gs_donasi_hot_menu);
const listPage = [
{
id: 1,
name: "Beranda",
path: RouterDonasi.main_beranda,
icon: <IconHome />,
},
{
id: 2,
name: "Galang Dana",
path: RouterDonasi.main_galang_dana,
icon: <IconMoneybag />,
},
{
id: 3,
name: "Donasi Saya",
path: RouterDonasi.main_donasi_saya,
icon: <IconGiftCardFilled />,
},
];
return (
<>
<AppShell
header={
<HeaderTamplateDonasi title="Donasi" route={RouterCrowd.main} />
}
footer={
<Footer height={70} bg={"dark"}>
<Grid align="center" h={60} pt={"xs"} grow>
{/* Tampilan Bursa */}
{listPage.map((e, i) => (
<Grid.Col
key={e.id}
span={3}
onClick={() => {
router.push(e.path);
setActive(i);
}}
>
<Center>
<Flex direction={"column"} align={"center"} w={"100%"}>
<ActionIcon
variant="transparent"
c={active === i ? "orange" : "white"}
>
{e.icon}
</ActionIcon>
<Text c={active === i ? "orange" : "white"}>
{e.name}
</Text>
</Flex>
</Center>
</Grid.Col>
))}
</Grid>
</Footer>
}
>
{children}
</AppShell>
</>
);
}