Donasi Create

# feat:
- Create Donasi
## No Issuee

src/app_modules/admin/donasi/component/tombol_kembali.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { Group, Button } from "@mantine/core";
+import { IconChevronLeft } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+
+export default function AdminDonasi_TombolKembali() {
+  const router = useRouter();
+  return (
+    <>
+      <Group>
+        <Button
+          c={"gray"}
+          leftIcon={<IconChevronLeft />}
+          variant="white"
+          onClick={() => router.back()}
+        >
+          Kembali
+        </Button>
+      </Group>
+    </>
+  );
+}

src/app_modules/admin/donasi/detail_table/detail_publish.tsx

@@ -0,0 +1,159 @@
+"use client";
+
+import {
+  AspectRatio,
+  Box,
+  Divider,
+  Grid,
+  Group,
+  Image,
+  Pagination,
+  Paper,
+  Progress,
+  ScrollArea,
+  SimpleGrid,
+  Stack,
+  Table,
+  Text,
+  Title,
+} from "@mantine/core";
+import AdminDonasi_TombolKembali from "../component/tombol_kembali";
+import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
+import {
+  IconClover,
+  IconMessageChatbot,
+  IconMoneybag,
+} from "@tabler/icons-react";
+import router from "next/router";
+import moment from "moment";
+
+export default function AdminDonasi_DetailPublish() {
+  return (
+    <>
+      <Stack>
+        <AdminDonasi_TombolKembali />
+        <SimpleGrid
+          cols={2}
+          spacing="lg"
+          breakpoints={[
+            { maxWidth: "md", cols: 2, spacing: "md" },
+            { maxWidth: "sm", cols: 1, spacing: "sm" },
+            { maxWidth: "xs", cols: 1, spacing: "xs" },
+          ]}
+        >
+          <TampilanDetailDonasi />
+          <TampilanListDonatur />
+        </SimpleGrid>
+      </Stack>
+    </>
+  );
+}
+
+function TampilanDetailDonasi() {
+  return (
+    <>
+      <Paper radius={"md"} bg={"blue.1"} p={"md"}>
+        <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 size={"lg"} 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>
+      </Paper>
+    </>
+  );
+}
+
+function TampilanListDonatur() {
+  const tableRows = Array(10)
+    .fill(0)
+    .map((e, i) => (
+      <tr key={i}>
+        <td>User {`${i + 1}`}</td>
+        <td>
+          Rp.{" "}
+          {`${new Intl.NumberFormat("id-ID", {
+            maximumFractionDigits: 10,
+          }).format(i + 100000)}`}
+        </td>
+        <td> {`${moment(Date.now()).format("ll")}`}</td>
+      </tr>
+    ));
+
+  return (
+    <>
+      <Paper radius={"md"} bg={"cyan.1"} p={"md"}>
+        <Stack>
+          <Title order={4}>List Donatur</Title>
+          <ScrollArea h={300}>
+            <Table>
+              <thead>
+                <tr>
+                  <th>Nama</th>
+                  <th>Jumlah Donasi</th>
+                  <th>Tanggal Donasi</th>
+                </tr>
+              </thead>
+              <tbody>{tableRows}</tbody>
+            </Table>
+          </ScrollArea>
+        </Stack>
+      </Paper>
+    </>
+  );
+}

src/app_modules/admin/donasi/detail_table/detail_reject.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { Button, Stack, Text } from "@mantine/core";
+
+export default function AdminDonasi_DetailReject({
+  closeModal,
+}: {
+  closeModal: any;
+}) {
+  return (
+    <>
+      <Stack>
+        <Text>Cooming Soon</Text>
+        <Button onClick={() => closeModal()}>close</Button>
+      </Stack>
+    </>
+  );
+}

src/app_modules/admin/donasi/detail_table/detail_review.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { Button, Stack, Text } from "@mantine/core";
+
+export default function AdminDonasi_DetailReview({
+  closeModal,
+}: {
+  closeModal: any;
+}) {
+  return (
+    <>
+      <Stack>
+        <Text>Cooming Soon</Text>
+        <Button onClick={() => closeModal()}>close</Button>
+      </Stack>
+    </>
+  );
+}

src/app_modules/admin/donasi/index.tsx

@@ -1,4 +1,13 @@
 import AdminDonasi_Main from "./main";
 import AdminDonasi_TablePublish from "./table_status/table_publish";
+import AdminDonasi_DetailPublish from "./detail_table/detail_publish";
+import AdminDonasi_TableReview from "./table_status/table_review";
+import AdminDonasi_TableReject from "./table_status/table_reject";
 
-export {AdminDonasi_Main, AdminDonasi_TablePublish}
+export {
+  AdminDonasi_Main,
+  AdminDonasi_TablePublish,
+  AdminDonasi_DetailPublish,
+  AdminDonasi_TableReview,
+  AdminDonasi_TableReject
+};

src/app_modules/admin/donasi/main/index.tsx

@@ -23,14 +23,14 @@ export default function AdminDonasi_Main() {
       id: 1,
       name: "Publish",
       //   jumlah: countDraft,
-      link: RouterAdminDonasi.table_donasi,
+      link: RouterAdminDonasi.table_publish,
       color: "green",
     },
     {
       id: 2,
       name: "Review",
       //   jumlah: countReview,
-      link: "",
+      link: RouterAdminDonasi.table_review,
       color: "orange",
     },
     {
@@ -44,7 +44,7 @@ export default function AdminDonasi_Main() {
       id: 4,
       name: "Reject",
       //   jumlah: countReject,
-      link: "",
+      link: RouterAdminDonasi.table_reject,
       color: "red",
     },
   ];

src/app_modules/admin/donasi/table_status/table_publish.tsx

@@ -1,16 +1,84 @@
-"use client"
+"use client";
 
-import { ActionIcon, Group, Text } from "@mantine/core"
-import { IconChevronLeft } from "@tabler/icons-react"
+import { RouterAdminDonasi } from "@/app/lib/router_hipmi/router_admin";
+import {
+  ActionIcon,
+  Box,
+  Button,
+  Group,
+  Stack,
+  Table,
+  Text,
+  Title,
+} from "@mantine/core";
+import { IconChevronLeft, IconEyeCheck } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import AdminDonasi_TombolKembali from "../component/tombol_kembali";
 
 export default function AdminDonasi_TablePublish() {
-    return<>
-   <Group>
-   <ActionIcon>
-        <IconChevronLeft/>
-    </ActionIcon>
-    <Text>Kembali</Text>
-   </Group>
-    table publish 
+  return (
+    <>
+      <Stack>
+        <AdminDonasi_TombolKembali />
+        <TableStatus />
+      </Stack>
     </>
-}
+  );
+}
+
+function TableStatus() {
+  const router = useRouter();
+  async function onClick() {
+    router.push(RouterAdminDonasi.detail_publish);
+  }
+
+  const TableRows = Array(5)
+    .fill(0)
+    .map((e, i) => (
+      <tr key={i}>
+        <td>{`User ${i + 1}`}</td>
+        <td>{`Judul ${i + 1}`}</td>
+        <td>
+          <Button
+            compact
+            color={"green"}
+            leftIcon={<IconEyeCheck />}
+            radius={"xl"}
+            variant="outline"
+            onClick={onClick}
+          >
+            Tampilkan
+          </Button>
+        </td>
+      </tr>
+    ));
+
+  return (
+    <>
+      <Box>
+        <Box bg={"green.1"} p={"xs"}>
+          <Title order={6} c={"green"}>
+            PUBLISH
+          </Title>
+        </Box>
+        <Table
+          withBorder
+          verticalSpacing={"md"}
+          horizontalSpacing={"xl"}
+          p={"md"}
+          striped
+          highlightOnHover
+        >
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Judul</th>
+              <th>Aksi</th>
+            </tr>
+          </thead>
+          <tbody>{TableRows}</tbody>
+        </Table>
+      </Box>
+    </>
+  );
+}

src/app_modules/admin/donasi/table_status/table_reject.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import { RouterAdminDonasi } from "@/app/lib/router_hipmi/router_admin";
+import {
+  ActionIcon,
+  Box,
+  Button,
+  Group,
+  Modal,
+  Stack,
+  Table,
+  Text,
+  Title,
+} from "@mantine/core";
+import { IconChevronLeft, IconEyeCheck } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import AdminDonasi_TombolKembali from "../component/tombol_kembali";
+import { useDisclosure } from "@mantine/hooks";
+import AdminDonasi_DetailReview from "../detail_table/detail_review";
+
+export default function AdminDonasi_TableReject() {
+  return (
+    <>
+      <Stack>
+        <AdminDonasi_TombolKembali />
+        <TableStatus />
+      </Stack>
+    </>
+  );
+}
+
+function TableStatus() {
+  const router = useRouter();
+  const [opened, { open, close }] = useDisclosure(false);
+
+  async function onClick() {
+    // router.push(RouterAdminDonasi.detail_publish);
+  }
+
+  const TableRows = Array(5)
+    .fill(0)
+    .map((e, i) => (
+      <tr key={i}>
+        <td>{`User ${i + 1}`}</td>
+        <td>{`Judul ${i + 1}`}</td>
+        <td>
+          <Button
+            compact
+            color={"red"}
+            leftIcon={<IconEyeCheck />}
+            radius={"xl"}
+            variant="outline"
+            onClick={open}
+          >
+            Tampilkan
+          </Button>
+        </td>
+      </tr>
+    ));
+
+  return (
+    <>
+      <Box>
+        <Box bg={"red.1"} p={"xs"}>
+          <Title order={6} c={"red"}>
+            REJECT
+          </Title>
+        </Box>
+        <Table
+          withBorder
+          verticalSpacing={"md"}
+          horizontalSpacing={"xl"}
+          p={"md"}
+          striped
+          highlightOnHover
+        >
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Judul</th>
+              <th>Aksi</th>
+            </tr>
+          </thead>
+          <tbody>{TableRows}</tbody>
+        </Table>
+      </Box>
+
+      <Modal opened={opened} onClose={close}>
+        <AdminDonasi_DetailReview closeModal={close}/>
+      </Modal>
+    </>
+  );
+}

src/app_modules/admin/donasi/table_status/table_review.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import { RouterAdminDonasi } from "@/app/lib/router_hipmi/router_admin";
+import {
+  ActionIcon,
+  Box,
+  Button,
+  Group,
+  Modal,
+  Stack,
+  Table,
+  Text,
+  Title,
+} from "@mantine/core";
+import { IconChevronLeft, IconEyeCheck } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import AdminDonasi_TombolKembali from "../component/tombol_kembali";
+import { useDisclosure } from "@mantine/hooks";
+import AdminDonasi_DetailReview from "../detail_table/detail_review";
+
+export default function AdminDonasi_TableReview() {
+  return (
+    <>
+      <Stack>
+        <AdminDonasi_TombolKembali />
+        <TableStatus />
+      </Stack>
+    </>
+  );
+}
+
+function TableStatus() {
+  const router = useRouter();
+  const [opened, { open, close }] = useDisclosure(false);
+
+  async function onClick() {
+    // router.push(RouterAdminDonasi.detail_publish);
+  }
+
+  const TableRows = Array(5)
+    .fill(0)
+    .map((e, i) => (
+      <tr key={i}>
+        <td>{`User ${i + 1}`}</td>
+        <td>{`Judul ${i + 1}`}</td>
+        <td>
+          <Button
+            compact
+            color={"orange"}
+            leftIcon={<IconEyeCheck />}
+            radius={"xl"}
+            variant="outline"
+            onClick={open}
+          >
+            Tampilkan
+          </Button>
+        </td>
+      </tr>
+    ));
+
+  return (
+    <>
+      <Box>
+        <Box bg={"orange.1"} p={"xs"}>
+          <Title order={6} c={"orange"}>
+            REVIEW
+          </Title>
+        </Box>
+        <Table
+          withBorder
+          verticalSpacing={"md"}
+          horizontalSpacing={"xl"}
+          p={"md"}
+          striped
+          highlightOnHover
+        >
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Judul</th>
+              <th>Aksi</th>
+            </tr>
+          </thead>
+          <tbody>{TableRows}</tbody>
+        </Table>
+      </Box>
+
+      <Modal opened={opened} onClose={close}>
+        <AdminDonasi_DetailReview closeModal={close}/>
+      </Modal>
+    </>
+  );
+}