Donasi

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

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