Donasi

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

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