Donasi

# feat
- Tampilan user selesai
- Tampilan admin in progres
### No Issue

src/app/dev/admin/donasi/main/page.tsx

@@ -0,0 +1,10 @@
+import { AdminDonasi_Main } from "@/app_modules/admin/donasi";
+
+
+export default async function Page() {
+  return (
+    <>
+      <AdminDonasi_Main />
+    </>
+  );
+}

src/app/dev/admin/donasi/table/publish/page.tsx

@@ -0,0 +1,7 @@
+import { AdminDonasi_TablePublish } from "@/app_modules/admin/donasi";
+
+export default async function Page() {
+    return<>
+    <AdminDonasi_TablePublish/>
+    </>
+}

src/app/dev/donasi/cerita_penggalang/layout.tsx

@@ -0,0 +1,8 @@
+import { LayoutCeritaPenggalangDonasi } from "@/app_modules/donasi";
+import React from "react";
+
+export default async function Layout({children}: {children: React.ReactNode}) {
+    return<>
+    <LayoutCeritaPenggalangDonasi>{children}</LayoutCeritaPenggalangDonasi>
+    </>
+}

src/app/dev/donasi/cerita_penggalang/page.tsx

@@ -0,0 +1,9 @@
+import { CeritaPenggalangDonasi } from "@/app_modules/donasi";
+
+export default async function Page() {
+  return (
+    <>
+      <CeritaPenggalangDonasi />
+    </>
+  );
+}

src/app/dev/donasi/create/cerita_penggalang/page.tsx

@@ -0,0 +1,7 @@
+import { CreateCeritaPenggalangDonasi } from "@/app_modules/donasi";
+
+export default async function Page() {
+    return<>
+    <CreateCeritaPenggalangDonasi/>
+    </>
+}

src/app/dev/donasi/create/layout.tsx

@@ -0,0 +1,14 @@
+import { LayoutCreateDonasi } from "@/app_modules/donasi";
+import React from "react";
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <LayoutCreateDonasi>{children}</LayoutCreateDonasi>
+    </>
+  );
+}

src/app/dev/donasi/create/page.tsx

@@ -0,0 +1,5 @@
+import { CreateDonasi } from "@/app_modules/donasi";
+
+export default async function Page() {
+    return <CreateDonasi/>
+}

src/app/dev/donasi/detail/detail_donasi_saya/layout.tsx

@@ -0,0 +1,14 @@
+import { LayoutDetailDonasiSaya } from "@/app_modules/donasi";
+import React from "react";
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <LayoutDetailDonasiSaya>{children}</LayoutDetailDonasiSaya>
+    </>
+  );
+}

src/app/dev/donasi/detail/detail_donasi_saya/page.tsx

@@ -0,0 +1,7 @@
+import { DetailDonasiSaya } from "@/app_modules/donasi";
+
+export default async function Page() {
+    return<>
+    <DetailDonasiSaya/>
+    </>
+}

src/app/dev/donasi/detail/detail_draft/layout.tsx

@@ -0,0 +1,14 @@
+import { LayoutDetailDraftDonasi } from "@/app_modules/donasi";
+import React from "react";
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <LayoutDetailDraftDonasi>{children}</LayoutDetailDraftDonasi>
+    </>
+  );
+}

src/app/dev/donasi/detail/detail_draft/page.tsx

@@ -0,0 +1,7 @@
+import { DetailDraftDonasi } from "@/app_modules/donasi";
+
+export default async function Paeg() {
+    return<>
+    <DetailDraftDonasi/>
+    </>
+}

src/app/dev/donasi/detail/detail_kabar/layout.tsx

@@ -0,0 +1,14 @@
+import { LayoutDetailKabarDonasi } from "@/app_modules/donasi";
+import React from "react";
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <LayoutDetailKabarDonasi>{children}</LayoutDetailKabarDonasi>
+    </>
+  );
+}

src/app/dev/donasi/detail/detail_kabar/page.tsx

@@ -0,0 +1,5 @@
+import { DetailKabarDonasi } from "@/app_modules/donasi";
+
+export default async function Page() {
+    return <DetailKabarDonasi/>
+}

src/app/dev/donasi/detail/detail_main/layout.tsx

@@ -0,0 +1,14 @@
+import { LayoutDetailMainDonasi } from "@/app_modules/donasi";
+import React from "react";
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <LayoutDetailMainDonasi>{children}</LayoutDetailMainDonasi>
+    </>
+  );
+}

src/app/dev/donasi/detail/detail_main/page.tsx

@@ -0,0 +1,9 @@
+import { DetailMainDonasi } from "@/app_modules/donasi";
+
+export default async function Page() {
+  return (
+    <>
+      <DetailMainDonasi />
+    </>
+  );
+}

src/app/dev/donasi/detail/detail_publish/layout.tsx

@@ -0,0 +1,14 @@
+import { LayoutDetailPublishDonasi } from "@/app_modules/donasi";
+import React from "react";
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <LayoutDetailPublishDonasi>{children}</LayoutDetailPublishDonasi>
+    </>
+  );
+}

src/app/dev/donasi/detail/detail_publish/page.tsx

@@ -0,0 +1,7 @@
+import { DetailPublishDonasi } from "@/app_modules/donasi";
+
+export default async function Page() {
+    return<>
+    <DetailPublishDonasi/>
+    </>
+}

src/app/dev/donasi/detail/detail_reject/layout.tsx

@@ -0,0 +1,8 @@
+import { LayoutDetailRejectDonasi } from "@/app_modules/donasi";
+import React from "react";
+
+export default async function Layout({children}: {children: React.ReactNode}) {
+    return<>
+    <LayoutDetailRejectDonasi>{children}</LayoutDetailRejectDonasi>
+    </>
+}

src/app/dev/donasi/detail/detail_reject/page.tsx

@@ -0,0 +1,7 @@
+import { DetailRejectDonasi } from "@/app_modules/donasi";
+
+export default async function Page() {
+    return<>
+    <DetailRejectDonasi/>
+    </>
+}

src/app/dev/donasi/detail/detail_review/layout.tsx

@@ -0,0 +1,14 @@
+import { LayoutDetailReviewDonasi } from "@/app_modules/donasi";
+import React from "react";
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <LayoutDetailReviewDonasi>{children}</LayoutDetailReviewDonasi>
+    </>
+  );
+}

src/app/dev/donasi/detail/detail_review/page.tsx

@@ -0,0 +1,7 @@
+import { DetailReviewDonasi } from "@/app_modules/donasi";
+
+export default async function Page() {
+    return<>
+    <DetailReviewDonasi/>
+    </>
+}

src/app/dev/donasi/donatur/layout.tsx

@@ -0,0 +1,14 @@
+import { LayoutDonaturDonasi } from "@/app_modules/donasi";
+import React from "react";
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <LayoutDonaturDonasi>{children}</LayoutDonaturDonasi>
+    </>
+  );
+}

src/app/dev/donasi/donatur/page.tsx

@@ -0,0 +1,8 @@
+import { DonaturDonasi } from "@/app_modules/donasi";
+
+export default async function Page() {
+    return<>
+    <DonaturDonasi/>
+    
+    </>
+}

src/app/dev/donasi/edit/edit_cerita/layout.tsx

@@ -0,0 +1,16 @@
+import { LayoutEditCeritaPenggalangDonasi } from "@/app_modules/donasi";
+import React from "react";
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <LayoutEditCeritaPenggalangDonasi>
+        {children}
+      </LayoutEditCeritaPenggalangDonasi>
+    </>
+  );
+}

src/app/dev/donasi/edit/edit_cerita/page.tsx

@@ -0,0 +1,7 @@
+import { EditCeritaPenggalangDonasi } from "@/app_modules/donasi";
+
+export default async function Page() {
+    return<>
+    <EditCeritaPenggalangDonasi/>
+    </>
+}

src/app/dev/donasi/edit/edit_donasi/layout.tsx

@@ -0,0 +1,14 @@
+import { LayoutEditDonasi } from "@/app_modules/donasi";
+import React from "react";
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <LayoutEditDonasi>{children}</LayoutEditDonasi>
+    </>
+  );
+}

src/app/dev/donasi/edit/edit_donasi/page.tsx

@@ -0,0 +1,9 @@
+import { EditDonasi } from "@/app_modules/donasi";
+
+export default async function Page() {
+  return (
+    <>
+      <EditDonasi />
+    </>
+  );
+}

src/app/dev/donasi/edit/update_kabar/layout.tsx

@@ -0,0 +1,14 @@
+import { LayoutUpdateKabarDonasi } from "@/app_modules/donasi";
+import React from "react";
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <LayoutUpdateKabarDonasi>{children}</LayoutUpdateKabarDonasi>
+    </>
+  );
+}

src/app/dev/donasi/edit/update_kabar/page.tsx

@@ -0,0 +1,7 @@
+import { UpdateKabarDonasi } from "@/app_modules/donasi";
+
+export default async function Page() {
+    return<>
+    <UpdateKabarDonasi/>
+    </>
+}

src/app/dev/donasi/kabar/layout.tsx

@@ -0,0 +1,14 @@
+import { LayoutKabarDonasi } from "@/app_modules/donasi";
+import React from "react";
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <LayoutKabarDonasi>{children}</LayoutKabarDonasi>
+    </>
+  );
+}

src/app/dev/donasi/kabar/page.tsx

@@ -0,0 +1,9 @@
+import { KabarDonasi } from "@/app_modules/donasi";
+
+export default async function Page() {
+  return (
+    <>
+      <KabarDonasi />
+    </>
+  );
+}

src/app/dev/donasi/list_kabar/layout.tsx

@@ -0,0 +1,14 @@
+import { LayoutListKabarDonasi } from "@/app_modules/donasi";
+import React from "react";
+
+export default async function Layput({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <LayoutListKabarDonasi>{children}</LayoutListKabarDonasi>
+    </>
+  );
+}

src/app/dev/donasi/list_kabar/page.tsx

@@ -0,0 +1,9 @@
+import { ListKabarDonasi } from "@/app_modules/donasi";
+
+export default async function Page() {
+  return (
+    <>
+      <ListKabarDonasi />
+    </>
+  );
+}

src/app/dev/donasi/main/beranda/page.tsx

@@ -0,0 +1,5 @@
+import { MainDonasi } from "@/app_modules/donasi";
+
+export default async function Page() {
+    return <MainDonasi/>
+}

src/app/dev/donasi/main/donasi_saya/page.tsx

@@ -0,0 +1,5 @@
+import { DonasiSayaDonasi } from "@/app_modules/donasi";
+
+export default async function Page() {
+    return <DonasiSayaDonasi/>
+}

src/app/dev/donasi/main/galang_dana/page.tsx

@@ -0,0 +1,7 @@
+import { PostingDonasi } from "@/app_modules/donasi";
+
+export default async function Page() {
+    return<>
+    <PostingDonasi/>
+    </>
+}

src/app/dev/donasi/main/layout.tsx

@@ -0,0 +1,8 @@
+import { LayoutDonasi } from "@/app_modules/donasi";
+import React from "react";
+
+export default async function Layout({children}: {children: React.ReactNode}) {
+    return <>
+    <LayoutDonasi>{children}</LayoutDonasi>
+    </>
+}

src/app/dev/donasi/masukan_donasi/layout.tsx

@@ -0,0 +1,14 @@
+import { LayoutMasukanDonasi } from "@/app_modules/donasi";
+import React from "react";
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <LayoutMasukanDonasi>{children}</LayoutMasukanDonasi>
+    </>
+  );
+}

src/app/dev/donasi/masukan_donasi/page.tsx

@@ -0,0 +1,5 @@
+import { MasukanDonasi } from "@/app_modules/donasi";
+
+export default async function Page() {
+    return <MasukanDonasi/>
+}

src/app/dev/donasi/page_pop_up/create/page.tsx

@@ -0,0 +1,5 @@
+import { PagePopUpCreateDonasi } from "@/app_modules/donasi";
+
+export default async function Page() {
+  return <PagePopUpCreateDonasi />;
+}

src/app/dev/donasi/pencairan_dana/layout.tsx

@@ -0,0 +1,14 @@
+import { LayoutPencairanDanaDonasi } from "@/app_modules/donasi";
+import React from "react";
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <LayoutPencairanDanaDonasi>{children}</LayoutPencairanDanaDonasi>
+    </>
+  );
+}

src/app/dev/donasi/pencairan_dana/page.tsx

@@ -0,0 +1,9 @@
+import { PencairanDanaDonasi } from "@/app_modules/donasi";
+
+export default async function Page() {
+  return (
+    <>
+      <PencairanDanaDonasi />
+    </>
+  );
+}

src/app/dev/donasi/penggalang_dana/layout.tsx

@@ -0,0 +1,14 @@
+import { LayoutPenggalangDanaDonasi } from "@/app_modules/donasi";
+import React from "react";
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <LayoutPenggalangDanaDonasi>{children}</LayoutPenggalangDanaDonasi>
+    </>
+  );
+}

src/app/dev/donasi/penggalang_dana/page.tsx

@@ -0,0 +1,10 @@
+import { PenggalangDanaDonasi } from "@/app_modules/donasi";
+
+
+export default async function Page() {
+  return (
+    <>
+      <PenggalangDanaDonasi />
+    </>
+  );
+}

src/app/lib/router_hipmi/router_admin.ts

@@ -14,6 +14,11 @@ export const RouterAdminInvestasi = {
   table_status_reject: "/dev/admin/investasi/table_status/reject",
 };
 
+export const RouterAdminDonasi = {
+  main_donasi: "/dev/admin/donasi/main",
+  table_donasi: "/dev/admin/donasi/table/publish"
+}
+
 export const RouterAdminAward = {
   main_award: "/dev/admin/award/main",
 };

src/app/lib/router_hipmi/router_crowd.ts

@@ -0,0 +1,5 @@
+export const RouterCrowd = {
+    main: "/dev/crowd/main",
+    investasi: "/dev/investasi/main",
+    donasi: "/dev/donasi/main/beranda"
+}

src/app/lib/router_hipmi/router_donasi.ts

@@ -0,0 +1,37 @@
+export const RouterDonasi = {
+  //main
+  main_beranda: "/dev/donasi/main/beranda",
+  main_galang_dana: "/dev/donasi/main/galang_dana",
+  main_donasi_saya: "/dev/donasi/main/donasi_saya",
+
+  // create
+  create: "/dev/donasi/create",
+  create_cerita_penggalang: "/dev/donasi/create/cerita_penggalang",
+
+  // edit
+  update_kabar: "/dev/donasi/edit/update_kabar",
+  edit_donasi: "/dev/donasi/edit/edit_donasi",
+  edit_cerita_penggalang: "/dev/donasi/edit/edit_cerita",
+
+
+  //pop up
+  page_pop_up_create: "/dev/donasi/page_pop_up/create",
+
+  //detail
+  detail_main: "/dev/donasi/detail/detail_main",
+  detail_kabar: "/dev/donasi/detail/detail_kabar",
+  detail_publish: "/dev/donasi/detail/detail_publish",
+  detail_review: "/dev/donasi/detail/detail_review",
+  detail_draft: "/dev/donasi/detail/detail_draft",
+  detail_reject: "/dev/donasi/detail/detail_reject",
+  detail_donasi_saya: "/dev/donasi/detail/detail_donasi_saya",
+
+  //alur donasi
+  masukan_donasi: "/dev/donasi/masukan_donasi",
+  donatur: "/dev/donasi/donatur",
+  kabar: "/dev/donasi/kabar",
+  pencairan_dana: "/dev/donasi/pencairan_dana",
+  penggalang_dana: "/dev/donasi/penggalang_dana",
+  cerita_penggalang: "/dev/donasi/cerita_penggalang",
+  list_kabar: "/dev/donasi/list_kabar"
+};

src/app_modules/admin/donasi/index.tsx

@@ -0,0 +1,4 @@
+import AdminDonasi_Main from "./main";
+import AdminDonasi_TablePublish from "./table_status/table_publish";
+
+export {AdminDonasi_Main, AdminDonasi_TablePublish}

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

@@ -0,0 +1,95 @@
+"use client";
+
+import { RouterAdminDonasi } from "@/app/lib/router_hipmi/router_admin";
+import {
+  Stack,
+  Title,
+  Divider,
+  SimpleGrid,
+  Paper,
+  Center,
+  Text,
+  Box,
+  Group,
+  ActionIcon,
+} from "@mantine/core";
+import { IconChevronsRight } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+
+export default function AdminDonasi_Main() {
+  const router = useRouter();
+  const listBox = [
+    {
+      id: 1,
+      name: "Publish",
+      //   jumlah: countDraft,
+      link: RouterAdminDonasi.table_donasi,
+      color: "green",
+    },
+    {
+      id: 2,
+      name: "Review",
+      //   jumlah: countReview,
+      link: "",
+      color: "orange",
+    },
+    {
+      id: 3,
+      name: "Draft",
+      //   jumlah: countPublish,
+      link: "",
+      color: "yellow",
+    },
+    {
+      id: 4,
+      name: "Reject",
+      //   jumlah: countReject,
+      link: "",
+      color: "red",
+    },
+  ];
+  return (
+    <>
+      <Stack spacing={"sm"}>
+        <Title>Donasi</Title>
+        <Divider mb={"md"} />
+        <SimpleGrid
+          cols={4}
+          spacing="lg"
+          breakpoints={[
+            { maxWidth: "62rem", cols: 4, spacing: "lg" },
+            { maxWidth: "48rem", cols: 2, spacing: "sm" },
+            { maxWidth: "36rem", cols: 1, spacing: "sm" },
+          ]}
+        >
+          {listBox.map((e, i) => (
+            <Paper
+              key={i}
+              bg={`${e.color}.2`}
+              shadow="md"
+              radius="md"
+              p="md"
+              //   sx={{ borderColor: e.color, borderStyle: "solid" }}
+            >
+              <Group position="apart">
+                <IconChevronsRight color={`${e.color}.2`} />
+                <Stack align="center" spacing={0}>
+                  <Text>{e.name}</Text>
+                  <Title>10</Title>
+                </Stack>
+                {e.link !== "" ? (
+                  <ActionIcon radius={"xl"} onClick={() => router.push(e.link)}>
+                    {" "}
+                    <IconChevronsRight />
+                  </ActionIcon>
+                ) : (
+                  <ActionIcon variant="transparent" disabled></ActionIcon>
+                )}
+              </Group>
+            </Paper>
+          ))}
+        </SimpleGrid>
+      </Stack>
+    </>
+  );
+}

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

@@ -0,0 +1,16 @@
+"use client"
+
+import { ActionIcon, Group, Text } from "@mantine/core"
+import { IconChevronLeft } from "@tabler/icons-react"
+
+export default function AdminDonasi_TablePublish() {
+    return<>
+   <Group>
+   <ActionIcon>
+        <IconChevronLeft/>
+    </ActionIcon>
+    <Text>Kembali</Text>
+   </Group>
+    table publish
+    </>
+}

src/app_modules/admin/main/layout.tsx

@@ -25,6 +25,7 @@ import { IconLetterH, IconLogout } from "@tabler/icons-react";
 import {
   RouterAdminAward,
   RouterAdminDashboard,
+  RouterAdminDonasi,
   RouterAdminInvestasi,
 } from "@/app/lib/router_hipmi/router_admin";
 import { useRouter } from "next/navigation";
@@ -54,8 +55,8 @@ export default function AdminLayout({
     },
     {
       id: 3,
-      name: "Award",
-      route: RouterAdminAward.main_award,
+      name: "Donasi",
+      route: RouterAdminDonasi.main_donasi,
     },
   ];
 

src/app_modules/crowd/main/view.tsx

@@ -1,6 +1,8 @@
 "use client";
 
+import { RouterCrowd } from "@/app/lib/router_hipmi/router_crowd";
 import { Warna } from "@/app/lib/warna";
+import { gs_donasi_hot_menu } from "@/app_modules/donasi/global_state";
 import { gs_investasiFooter } from "@/app_modules/investasi/g_state";
 import {
   AspectRatio,
@@ -22,6 +24,7 @@ import toast from "react-simple-toasts";
 export default function MainCrowd() {
   const router = useRouter();
   const [changeColor, setChangeColor] = useAtom(gs_investasiFooter);
+  const [donasiHotMenu, setDonasiHotMenu] = useAtom(gs_donasi_hot_menu)
   return (
     <>
       <Stack>
@@ -38,7 +41,7 @@ export default function MainCrowd() {
             radius={"md"}
             bg={"teal"}
             onClick={() => {
-              router.push("/dev/investasi/main");
+              router.push(RouterCrowd.investasi);
               setChangeColor(0);
             }}
           >
@@ -60,7 +63,10 @@ export default function MainCrowd() {
             bg={"blue.4"}
             radius={"md"}
             p={"xs"}
-            onClick={() => toast("Cooming Soon Feature...")}
+            onClick={() => {
+              router.push(RouterCrowd.donasi)
+              setDonasiHotMenu(0)
+            }}
           >
            <Grid>
               <Grid.Col span={10}>

src/app_modules/donasi/component/box_informasi.tsx

@@ -0,0 +1,22 @@
+import { Center, Grid, Group, Paper, Text, Title } from "@mantine/core";
+
+export default function BoxInformasiDonasi({
+  informasi,
+}: {
+  informasi: string;
+}) {
+  return (
+    <>
+      <Paper bg={"blue.3"} p={"sm"}>
+        <Group>
+         
+
+          <Text fz={"xs"}  fs={"italic"}>
+          <Text span inherit c={"red"}>* </Text>
+            {informasi}
+          </Text>
+        </Group>
+      </Paper>
+    </>
+  );
+}

src/app_modules/donasi/component/footer_button_donasi.tsx

@@ -0,0 +1,23 @@
+"use client";
+import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
+import { Footer, Center, Button } from "@mantine/core";
+import { useRouter } from "next/navigation";
+
+export default function ButtonDonasi() {
+  const router = useRouter();
+  return (
+    <>
+      <Footer height={70} px={"md"} sx={{ borderStyle: "none" }}>
+        <Center h={70}>
+          <Button
+            w={"100%"}
+            radius={"xl"}
+            onClick={() => router.push(RouterDonasi.masukan_donasi)}
+          >
+            Donasi
+          </Button>
+        </Center>
+      </Footer>
+    </>
+  );
+}

src/app_modules/donasi/component/footer_close_donasi.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { Footer, Center, Button } from "@mantine/core";
+import { useRouter } from "next/navigation";
+
+
+export default function FooterDonasi() {
+    const router = useRouter()
+  return (
+    <>
+      <Footer height={70} px={"md"}>
+        <Center h={"100%"}>
+          <Button w={"100%"} radius={"xl"} onClick={() => router.back()}>
+            Tutup
+          </Button>
+        </Center>
+      </Footer>
+    </>
+  );
+}

src/app_modules/donasi/component/header_tamplate.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { Header, Group, ActionIcon, Text, Title } from "@mantine/core";
+import { IconArrowLeft, IconChevronLeft } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export default function HeaderTamplateDonasi({
+  hideBack,
+  route,
+  route2,
+  title,
+  icon,
+  bg,
+}: {
+  hideBack?: boolean;
+  route?: any;
+  route2?: any;
+  title: string;
+  icon?: any;
+  bg?: any;
+}) {
+  const router = useRouter();
+  return (
+    <>
+      <Header
+        height={50}
+        sx={{ borderStyle: "none" }}
+        bg={bg === null ? "" : bg}
+      >
+        <Group h={50} position="apart" px={"md"}>
+          {hideBack ? (
+            <ActionIcon variant="transparent" disabled></ActionIcon>
+          ) : (
+            <ActionIcon
+              variant="transparent"
+              onClick={() => {
+                if (route === null || route === undefined) {
+                  return router.back();
+                } else {
+                  return router.push(route);
+                }
+              }}
+            >
+              <IconChevronLeft />
+            </ActionIcon>
+          )}
+          <Title order={5}>{title}</Title>
+          {(() => {
+            if (route2 === null || route2 === undefined) {
+              return <ActionIcon disabled variant="transparent"></ActionIcon>;
+            } else {
+              return (
+                <ActionIcon
+                  variant="transparent"
+                  onClick={() => router.push(route2)}
+                >
+                  {icon}
+                </ActionIcon>
+              );
+            }
+          })()}
+        </Group>
+      </Header>
+    </>
+  );
+}

src/app_modules/donasi/create/create_cerita_penggalang.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
+import {
+  AspectRatio,
+  Button,
+  Center,
+  Image,
+  Paper,
+  Stack,
+  Textarea,
+} from "@mantine/core";
+import { IconCamera } 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 BoxInformasiDonasi from "../component/box_informasi";
+
+export default function CreateCeritaPenggalangDonasi() {
+  const router = useRouter();
+  const [tabsPostingDonasi, setTabsPostingDonasi] = useAtom(
+    gs_donasi_tabs_posting
+  );
+  const [value, setValue] = useState({
+    pembukaan: "",
+    cerita: "",
+  });
+  async function onCreate() {
+    router.push(RouterDonasi.page_pop_up_create)
+setTabsPostingDonasi("Review")
+  }
+  return (
+    <>
+      <Stack spacing={"md"} px={"md"}>
+        <BoxInformasiDonasi informasi="Ceritakan dengan jujur & benar mengapa Penggalanagn Dana ini harus diadakan!"/>
+        <Textarea
+          autosize
+          minRows={2}
+          maxRows={4}
+          withAsterisk
+          label="Pembukaan"
+          placeholder="Pembuka dari isi cerita"
+          onChange={(val) =>
+            setValue({
+              ...value,
+              pembukaan: val.target.value,
+            })
+          }
+        />
+        <Textarea
+          autosize
+          minRows={2}
+          maxRows={10}
+          withAsterisk
+          label="Cerita"
+          placeholder="Ceritakan alasan mengapa harus membuat Penggalangan Dana"
+          onChange={(val) =>
+            setValue({
+              ...value,
+              cerita: val.target.value,
+            })
+          }
+        />
+
+        <Stack spacing={"xs"}>
+          <Center>
+            <Button
+              radius={"xl"}
+              variant="outline"
+              w={150}
+              leftIcon={<IconCamera />}
+            >
+              Upload
+            </Button>
+          </Center>
+          <AspectRatio ratio={16 / 9}>
+            <Paper radius={"md"}>
+              <Image alt="Foto" src={"/aset/no-img.png"} />
+            </Paper>
+          </AspectRatio>
+        </Stack>
+        <Button w={"100%"} radius={"xl"} onClick={() => onCreate()}>
+          Simpan
+        </Button>
+      </Stack>
+      {/* <pre> {JSON.stringify(value.pembukaan, null, 2)}</pre> */}
+    </>
+  );
+}

src/app_modules/donasi/create/index.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
+import {
+  ActionIcon,
+  AspectRatio,
+  Box,
+  Button,
+  Center,
+  Image,
+  Paper,
+  Select,
+  Stack,
+  Text,
+  TextInput,
+  Textarea,
+} from "@mantine/core";
+import { IconCamera } from "@tabler/icons-react";
+import { useAtom } from "jotai";
+import { useRouter } from "next/navigation";
+import { gs_donasi_tabs_posting } from "../global_state";
+import toast from "react-simple-toasts";
+import BoxInformasiDonasi from "../component/box_informasi";
+
+export default function CreateDonasi() {
+  const router = useRouter();
+  const [tabsPostingDonasi, setTabsPostingDonasi] = useAtom(
+    gs_donasi_tabs_posting
+  );
+
+  async function onCreate() {
+    router.push(RouterDonasi.create_cerita_penggalang);
+  }
+  return (
+    <>
+      <Stack spacing={"md"} px={"md"}>
+        <BoxInformasiDonasi informasi="Lengkapi semua data di bawah untuk selanjutnya mengisi cerita Penggalangan Dana!" />
+        <Select
+          label="Kategori"
+          placeholder="Pilih kategori penggalangan dana"
+          withAsterisk
+          data={[
+            { value: "1", label: "Medis" },
+            { value: "2", label: "Lingkungan" },
+            { value: "3", label: "Kegiatan Sosial" },
+            { value: "4", label: "Rumah Ibadah" },
+            { value: "5", label: "Bantuan Pendidikan" },
+          ]}
+        />
+        <Stack>
+          <AspectRatio ratio={16 / 9}>
+            <Paper radius={"md"}>
+              <Image alt="Foto" src={"/aset/no-img.png"} />
+            </Paper>
+          </AspectRatio>
+          <Center>
+            <Button
+              radius={"xl"}
+              variant="outline"
+              w={150}
+              leftIcon={<IconCamera />}
+            >
+              Upload
+            </Button>
+          </Center>
+        </Stack>
+        <Stack>
+          <TextInput
+            withAsterisk
+            label="Judul Donasi"
+            placeholder="Contoh: Renovasi Masjid pada kampung, dll"
+          />
+          <TextInput type="number" withAsterisk label="Target Dana" placeholder="Masukan nominal angka" />
+          <Select
+            label="Durasi"
+            placeholder="Jangka waktu penggalangan dana"
+            withAsterisk
+            data={[
+              { value: "30", label: "30 Hari" },
+              { value: "60", label: "60 Hari" },
+              { value: "90", label: "90 Hari" },
+            ]}
+          />
+        </Stack>
+        <Button my={"lg"} radius={"xl"} onClick={() => onCreate()}>
+          Selanjutnya
+        </Button>
+      </Stack>
+    </>
+  );
+}

src/app_modules/donasi/create/layout.tsx

@@ -0,0 +1,14 @@
+"use client"
+
+import { AppShell } from "@mantine/core"
+import React from "react"
+import HeaderTamplateDonasi from "../component/header_tamplate"
+
+export default function LayoutCreateDonasi({children}: {children: React.ReactNode}){
+    return<>
+    <AppShell header={<HeaderTamplateDonasi title="Buat Donasi"/>}>
+        {children}
+    </AppShell>
+    
+    </>
+}

src/app_modules/donasi/detail/detail_donasi_saya/index.tsx

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

src/app_modules/donasi/detail/detail_donasi_saya/layout.tsx

@@ -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>
+    </>
+}

src/app_modules/donasi/detail/detail_draft/index.tsx

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

src/app_modules/donasi/detail/detail_draft/layout.tsx

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

src/app_modules/donasi/detail/detail_kabar/index.tsx

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

src/app_modules/donasi/detail/detail_kabar/layout.tsx

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

src/app_modules/donasi/detail/detail_main/cerita_penggalang/index.tsx

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

src/app_modules/donasi/detail/detail_main/cerita_penggalang/layout.tsx

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

src/app_modules/donasi/detail/detail_main/donatur/index.tsx

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

src/app_modules/donasi/detail/detail_main/donatur/layout.tsx

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

src/app_modules/donasi/detail/detail_main/index.tsx

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

src/app_modules/donasi/detail/detail_main/kabar/index.tsx

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

src/app_modules/donasi/detail/detail_main/kabar/layout.tsx

@@ -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>
+    
+    </>
+}

src/app_modules/donasi/detail/detail_main/layout.tsx

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

src/app_modules/donasi/detail/detail_main/masukan_donasi/index.tsx

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

src/app_modules/donasi/detail/detail_main/masukan_donasi/layout.tsx

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

src/app_modules/donasi/detail/detail_main/pencairan_dana/index.tsx

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

src/app_modules/donasi/detail/detail_main/pencairan_dana/layout.tsx

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

src/app_modules/donasi/detail/detail_main/penggalang_dana/index.tsx

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

src/app_modules/donasi/detail/detail_main/penggalang_dana/layout.tsx

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

src/app_modules/donasi/detail/detail_publish/index.tsx

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

src/app_modules/donasi/detail/detail_publish/layout.tsx

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

src/app_modules/donasi/detail/detail_reject/index.tsx

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

src/app_modules/donasi/detail/detail_reject/layout.tsx

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

src/app_modules/donasi/detail/detail_review/index.tsx

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

src/app_modules/donasi/detail/detail_review/layout.tsx

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

src/app_modules/donasi/edit/edit_cerita_penggalang/index.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
+import {
+  AspectRatio,
+  Button,
+  Center,
+  Image,
+  Paper,
+  Stack,
+  Textarea,
+} from "@mantine/core";
+import { IconCamera } 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 toast from "react-simple-toasts";
+
+export default function EditCeritaPenggalangDonasi() {
+  const router = useRouter();
+  const [tabsPostingDonasi, setTabsPostingDonasi] = useAtom(
+    gs_donasi_tabs_posting
+  );
+  const [value, setValue] = useState({
+    pembukaan: "",
+    cerita: "",
+  });
+  async function onUpdate() {
+    router.back();
+    toast("Berhasil update cerita")
+
+  }
+  return (
+    <>
+      <Stack spacing={"md"} px={"md"}>
+        <Textarea
+          autosize
+          minRows={2}
+          maxRows={4}
+          withAsterisk
+          label="Pembukaan"
+          placeholder="Pembuka dari isi cerita"
+          onChange={(val) =>
+            setValue({
+              ...value,
+              pembukaan: val.target.value,
+            })
+          }
+        />
+        <Textarea
+          autosize
+          minRows={2}
+          maxRows={10}
+          withAsterisk
+          label="Cerita"
+          placeholder="Ceritakan alasan mengapa harus membuat Penggalangan Dana"
+          onChange={(val) =>
+            setValue({
+              ...value,
+              cerita: val.target.value,
+            })
+          }
+        />
+
+        <Stack spacing={"xs"}>
+          <Center>
+            <Button
+              radius={"xl"}
+              variant="outline"
+              w={150}
+              leftIcon={<IconCamera />}
+            >
+              Upload
+            </Button>
+          </Center>
+          <AspectRatio ratio={16 / 9}>
+            <Paper radius={"md"}>
+              <Image alt="Foto" src={"/aset/no-img.png"} />
+            </Paper>
+          </AspectRatio>
+        </Stack>
+        <Button w={"100%"} radius={"xl"} onClick={() => onUpdate()}>
+          Simpan
+        </Button>
+      </Stack>
+      {/* <pre> {JSON.stringify(value.pembukaan, null, 2)}</pre> */}
+    </>
+  );
+}

src/app_modules/donasi/edit/edit_cerita_penggalang/layout.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { AppShell } from "@mantine/core";
+import React from "react";
+import HeaderTamplateDonasi from "../../component/header_tamplate";
+
+export default function LayoutEditCeritaPenggalangDonasi({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <AppShell header={<HeaderTamplateDonasi title="Update Cerita Penggalang" />}>
+        {children}
+      </AppShell>
+    </>
+  );
+}

src/app_modules/donasi/edit/edit_donasi/index.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
+import {
+  Stack,
+  Select,
+  AspectRatio,
+  Paper,
+  Center,
+  Button,
+  TextInput,
+  Image,
+} from "@mantine/core";
+import { IconCamera } from "@tabler/icons-react";
+import { useAtom } from "jotai";
+import { useRouter } from "next/navigation";
+import { gs_donasi_tabs_posting } from "../../global_state";
+import toast from "react-simple-toasts";
+
+export default function EditDonasi() {
+  const router = useRouter();
+  const [tabsPostingDonasi, setTabsPostingDonasi] = useAtom(
+    gs_donasi_tabs_posting
+  );
+
+  async function onUpdate() {
+    router.back();
+    toast("Berhasil update data")
+  }
+  return (
+    <>
+      <Stack spacing={"md"} px={"md"}>
+        <Select
+          label="Kategori"
+          placeholder="Pilih kategori penggalangan dana"
+          withAsterisk
+          data={[
+            { value: "1", label: "Medis" },
+            { value: "2", label: "Lingkungan" },
+            { value: "3", label: "Kegiatan Sosial" },
+            { value: "4", label: "Rumah Ibadah" },
+            { value: "5", label: "Bantuan Pendidikan" },
+          ]}
+        />
+        <Stack>
+          <AspectRatio ratio={16 / 9}>
+            <Paper radius={"md"}>
+              <Image alt="Foto" src={"/aset/no-img.png"} />
+            </Paper>
+          </AspectRatio>
+          <Center>
+            <Button
+              radius={"xl"}
+              variant="outline"
+              w={150}
+              leftIcon={<IconCamera />}
+            >
+              Upload
+            </Button>
+          </Center>
+        </Stack>
+        <Stack>
+          <TextInput
+            withAsterisk
+            label="Judul Donasi"
+            placeholder="Contoh: Renovasi Masjid pada kampung, dll"
+          />
+          <TextInput
+            type="number"
+            withAsterisk
+            label="Target Dana"
+            placeholder="Masukan nominal angka"
+          />
+          <Select
+            label="Durasi"
+            placeholder="Jangka waktu penggalangan dana"
+            withAsterisk
+            data={[
+              { value: "30", label: "30 Hari" },
+              { value: "60", label: "60 Hari" },
+              { value: "90", label: "90 Hari" },
+            ]}
+          />
+        </Stack>
+        <Button my={"lg"} radius={"xl"} onClick={() => onUpdate()}>
+          Update
+        </Button>
+      </Stack>
+    </>
+  );
+}

src/app_modules/donasi/edit/edit_donasi/layout.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { AppShell } from "@mantine/core";
+import React from "react";
+import HeaderTamplateDonasi from "../../component/header_tamplate";
+
+export default function LayoutEditDonasi({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <AppShell header={<HeaderTamplateDonasi title="Edit Donasi" />}>
+        {children}
+      </AppShell>
+    </>
+  );
+}

src/app_modules/donasi/edit/list_kabar/index.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
+import {
+  ActionIcon,
+  Avatar,
+  Button,
+  Group,
+  Paper,
+  SimpleGrid,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+import {
+  IconCirclePlus,
+  IconEdit,
+  IconEditCircle,
+  IconTrash,
+} from "@tabler/icons-react";
+import moment from "moment";
+import { useRouter } from "next/navigation";
+
+export default function ListKabarDonasi() {
+  const router = useRouter();
+  return (
+    <>
+      <Stack>
+        <Button leftIcon={<IconCirclePlus />} radius={"xl"}>
+          Tambah Kabar
+        </Button>
+        <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.update_kabar)}
+                      >
+                        Buka Kabar
+                      </Text>
+                    </Stack>
+                  </Stack>
+                </Stack>
+              </Paper>
+            ))}
+        </SimpleGrid>
+      </Stack>
+    </>
+  );
+}

src/app_modules/donasi/edit/list_kabar/layout.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import HeaderTamplateDonasi from "@/app_modules/donasi/component/header_tamplate";
+import { AppShell } from "@mantine/core";
+import React from "react";
+
+export default function LayoutListKabarDonasi({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <AppShell 
+      header={<HeaderTamplateDonasi title="List Kabar" />}>
+        {children}
+      </AppShell>
+    </>
+  );
+}

src/app_modules/donasi/edit/update_kabar/index.tsx

@@ -0,0 +1,51 @@
+"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 UpdateKabarDonasi() {
+  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>
+    </>
+  );
+}

src/app_modules/donasi/edit/update_kabar/layout.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import {
+  AppShell,
+  Button,
+  Center,
+  Divider,
+  Footer,
+  Group,
+  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 LayoutUpdateKabarDonasi({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const router = useRouter();
+  return (
+    <>
+      <AppShell
+        header={<HeaderTamplateDonasi title="Update Kabar" />}
+        footer={
+          <Footer height={70}>
+            <Group align="center" h={"100%"} position="center" spacing={"xl"}>
+              <Button radius={"xl"} variant="outline" color="green">
+                Edit
+              </Button>
+              <Button radius={"xl"} variant="outline" color="red">
+                Hapus
+              </Button>
+            </Group>
+          </Footer>
+        }
+      >
+        {children}
+      </AppShell>
+    </>
+  );
+}

src/app_modules/donasi/global_state/index.ts

@@ -0,0 +1,14 @@
+import { atomWithStorage } from "jotai/utils";
+
+/**
+ * @param index 0 - 2
+ * @returns global state hot menu donasi
+ */
+export const gs_donasi_hot_menu = atomWithStorage("gs_donasi_hot_menu", 0)
+
+/**
+ * @param status - Publish, Review,, Draft, Reject
+ * @type string
+ * @returns status tabs pada posting
+ */
+export const gs_donasi_tabs_posting = atomWithStorage<string | null>("gs_donasi_tabs_posting", "Publish")

src/app_modules/donasi/index.ts

@@ -0,0 +1,87 @@
+import MainDonasi from "./main/beranda";
+import LayoutDonasi from "./main/layout";
+import GalangDanaDonasi from "./main/galang_dana";
+import DonasiSayaDonasi from "./main/donasi_saya";
+import CreateDonasi from "./create";
+import LayoutCreateDonasi from "./create/layout";
+import PagePopUpCreateDonasi from "./page_pop_up/create";
+import DetailMainDonasi from "./detail/detail_main";
+import LayoutDetailMainDonasi from "./detail/detail_main/layout";
+import MasukanDonasi from "./detail/detail_main/masukan_donasi";
+import LayoutMasukanDonasi from "./detail/detail_main/masukan_donasi/layout";
+import DonaturDonasi from "./detail/detail_main/donatur";
+import LayoutDonaturDonasi from "./detail/detail_main/donatur/layout";
+import KabarDonasi from "./detail/detail_main/kabar";
+import LayoutKabarDonasi from "./detail/detail_main/kabar/layout";
+import DetailKabarDonasi from "./detail/detail_kabar";
+import LayoutDetailKabarDonasi from "./detail/detail_kabar/layout";
+import PencairanDanaDonasi from "./detail/detail_main/pencairan_dana";
+import LayoutPencairanDanaDonasi from "./detail/detail_main/pencairan_dana/layout";
+import PenggalangDanaDonasi from "./detail/detail_main/penggalang_dana";
+import LayoutPenggalangDanaDonasi from "./detail/detail_main/penggalang_dana/layout";
+import CeritaPenggalangDonasi from "./detail/detail_main/cerita_penggalang";
+import LayoutCeritaPenggalangDonasi from "./detail/detail_main/cerita_penggalang/layout";
+import DetailPublishDonasi from "./detail/detail_publish";
+import LayoutDetailPublishDonasi from "./detail/detail_publish/layout";
+import CreateCeritaPenggalangDonasi from "./create/create_cerita_penggalang";
+import ListKabarDonasi from "./edit/list_kabar";
+import LayoutListKabarDonasi from "./edit/list_kabar/layout";
+import UpdateKabarDonasi from "./edit/update_kabar";
+import LayoutUpdateKabarDonasi from "./edit/update_kabar/layout";
+import DetailReviewDonasi from "./detail/detail_review";
+import LayoutDetailReviewDonasi from "./detail/detail_review/layout";
+import DetailDraftDonasi from "./detail/detail_draft";
+import LayoutDetailDraftDonasi from "./detail/detail_draft/layout";
+import DetailRejectDonasi from "./detail/detail_reject";
+import LayoutDetailRejectDonasi from "./detail/detail_reject/layout";
+import EditDonasi from "./edit/edit_donasi";
+import LayoutEditDonasi from "./edit/edit_donasi/layout";
+import EditCeritaPenggalangDonasi from "./edit/edit_cerita_penggalang";
+import LayoutEditCeritaPenggalangDonasi from "./edit/edit_cerita_penggalang/layout";
+import DetailDonasiSaya from "./detail/detail_donasi_saya";
+import LayoutDetailDonasiSaya from "./detail/detail_donasi_saya/layout";
+
+export {
+  MainDonasi,
+  LayoutDonasi,
+  GalangDanaDonasi as PostingDonasi,
+  DonasiSayaDonasi,
+  CreateDonasi,
+  LayoutCreateDonasi,
+  PagePopUpCreateDonasi,
+  DetailMainDonasi,
+  LayoutDetailMainDonasi,
+  MasukanDonasi,
+  LayoutMasukanDonasi,
+  DonaturDonasi,
+  LayoutDonaturDonasi,
+  KabarDonasi,
+  LayoutKabarDonasi,
+  DetailKabarDonasi,
+  LayoutDetailKabarDonasi,
+  PencairanDanaDonasi,
+  LayoutPencairanDanaDonasi,
+  PenggalangDanaDonasi,
+  LayoutPenggalangDanaDonasi,
+  CeritaPenggalangDonasi,
+  LayoutCeritaPenggalangDonasi,
+  DetailPublishDonasi,
+  LayoutDetailPublishDonasi,
+  CreateCeritaPenggalangDonasi,
+  ListKabarDonasi,
+  LayoutListKabarDonasi,
+  UpdateKabarDonasi,
+  LayoutUpdateKabarDonasi,
+  DetailReviewDonasi,
+  LayoutDetailReviewDonasi,
+  DetailDraftDonasi,
+  LayoutDetailDraftDonasi,
+  DetailRejectDonasi,
+  LayoutDetailRejectDonasi,
+  EditDonasi,
+  LayoutEditDonasi,
+  EditCeritaPenggalangDonasi,
+  LayoutEditCeritaPenggalangDonasi,
+  DetailDonasiSaya,
+  LayoutDetailDonasiSaya,
+};

src/app_modules/donasi/main/beranda.tsx

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

src/app_modules/donasi/main/donasi_saya.tsx

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

src/app_modules/donasi/main/galang_dana.tsx

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

src/app_modules/donasi/main/galang_dana/draft.tsx

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