Create dan Update

# feat
- tampilan user
- tampilan admin
## No Issue

src/app_modules/donasi/component/detail_main/cerita_penggalang.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { MODEL_DONASI } from "../../model/interface";
+import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
+import { Stack, Title, Paper, Group, ActionIcon, Text } from "@mantine/core";
+import { IconCircleChevronRight } from "@tabler/icons-react";
+import moment from "moment";
+
+export default function ComponentCeritaPenggalangDanaDonasi({
+  donasi,
+}: {
+  donasi: MODEL_DONASI;
+}) {
+  const router = useRouter();
+  return (
+    <>
+      <Stack spacing={"xs"}>
+        <Title order={4}>Cerita Penggalang Dana</Title>
+        <Paper p={"sm"} withBorder>
+          <Stack>
+            <Group position="apart">
+              <Text>{moment(donasi.createdAt).format("ll")}</Text>
+              <ActionIcon
+                variant="transparent"
+                onClick={() => router.push(RouterDonasi.cerita_penggalang + `${donasi.id}`)}
+              >
+                <IconCircleChevronRight />
+              </ActionIcon>
+            </Group>
+            <Text lineClamp={4}>
+             {donasi.CeritaDonasi.cerita}
+            </Text>
+            {/* <Text c={"blue"}>Baca selengkapnya</Text> */}
+          </Stack>
+        </Paper>
+      </Stack>
+    </>
+  );
+}

src/app_modules/donasi/component/notifikasi/notif_berhasil.tsx

@@ -0,0 +1,31 @@
+import { Center, Text } from "@mantine/core";
+import { notifications } from "@mantine/notifications";
+import { IconAlertTriangle, IconChecklist, IconCircleCheck } from "@tabler/icons-react";
+
+/**
+ * 
+ * @param text | masukan text untuk peringatan
+ * @type string
+ * @returns notifikasi peringatan
+ */
+export async function NotifBerhasil(text: string) {
+  return notifications.show({
+    message: (
+      <Center>
+        <Text fw={"bold"}>{text}</Text>
+      </Center>
+    ),
+    color: "green",
+    radius: "md",
+    autoClose: 1000,
+    icon: <IconCircleCheck color="white" />,
+    withCloseButton: false,
+
+    styles: (theme) => ({
+      description: { color: theme.white },
+      root: {
+        backgroundColor: theme.colors.green[7],
+      },
+    }),
+  });
+}

src/app_modules/donasi/component/notifikasi/notif_gagal.tsx

@@ -0,0 +1,31 @@
+import { Center, Text } from "@mantine/core";
+import { notifications } from "@mantine/notifications";
+import { IconAlertTriangle } from "@tabler/icons-react";
+
+/**
+ * 
+ * @param text | masukan text untuk peringatan
+ * @type string
+ * @returns notifikasi peringatan
+ */
+export async function NotifGagal(text: string) {
+  return notifications.show({
+    message: (
+      <Center>
+        <Text fw={"bold"}>{text}</Text>
+      </Center>
+    ),
+    color: "red",
+    radius: "md",
+    autoClose: 1000,
+    icon: <IconAlertTriangle color="white" />,
+    withCloseButton: false,
+
+    styles: (theme) => ({
+      description: { color: theme.white },
+      root: {
+        backgroundColor: theme.colors.red[7],
+      },
+    }),
+  });
+}

src/app_modules/donasi/component/notifikasi/notif_peringatan.tsx

@@ -0,0 +1,31 @@
+import { Center, Text } from "@mantine/core";
+import { notifications } from "@mantine/notifications";
+import { IconAlertTriangle } from "@tabler/icons-react";
+
+/**
+ * 
+ * @param text | masukan text untuk peringatan
+ * @type string
+ * @returns notifikasi peringatan
+ */
+export async function NotifPeringatan(text: string) {
+  return notifications.show({
+    message: (
+      <Center>
+        <Text fw={"bold"}>{text}</Text>
+      </Center>
+    ),
+    color: "yellow",
+    radius: "md",
+    autoClose: 1000,
+    icon: <IconAlertTriangle color="white" />,
+    withCloseButton: false,
+
+    styles: (theme) => ({
+      description: { color: theme.white },
+      root: {
+        backgroundColor: theme.colors.yellow[7],
+      },
+    }),
+  });
+}

src/app_modules/donasi/component/tampilan_rupiah.tsx

@@ -0,0 +1,14 @@
+import { Text } from "@mantine/core";
+
+export default function TampilanRupiahDonasi({nominal}: {nominal: number}) {
+  return (
+    <>
+      <Text>
+        Rp.{" "}
+        {new Intl.NumberFormat("id-ID", { maximumFractionDigits: 10 }).format(
+          nominal
+        )}
+      </Text>
+    </>
+  );
+}