Kabar Donasi

# feat
- Create kabar
- Delete kabar
- List kabar
## No issue

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

@@ -1,5 +1,7 @@
 "use client";
 
+import TampilanRupiahDonasi from "@/app_modules/donasi/component/tampilan_rupiah";
+import { MODEL_DONASI_INVOICE } from "@/app_modules/donasi/model/interface";
 import {
   Avatar,
   Center,
@@ -11,10 +13,13 @@ import {
   Text,
   Title,
 } from "@mantine/core";
+import { IconMoodSmile, IconMoodSmileBeam } from "@tabler/icons-react";
 import { size } from "lodash";
 import moment from "moment";
+import { useState } from "react";
 
-export default function DonaturDonasi() {
+export default function DonaturDonasi({listDonatur}: {listDonatur: MODEL_DONASI_INVOICE[]}) {
+  const [donatur, setDonatur] = useState(listDonatur)
   return (
     <>
       <SimpleGrid
@@ -26,26 +31,26 @@ export default function DonaturDonasi() {
           { maxWidth: "36rem", cols: 1, spacing: "sm" },
         ]}
       >
-        {Array(10)
-          .fill(0)
+        {donatur
           .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"} />
+                    {/* <Avatar variant="filled" radius={"xl"} size={"md"} /> */}
+                    <IconMoodSmileBeam size={50}/>
                   </Center>
                 </Grid.Col>
                 <Grid.Col span={9}>
                   <Stack spacing={0}>
-                    <Title order={5}>Orang Baik</Title>
+                    <Title order={5}>{e.Author.username}</Title>
                     <Group spacing={"xs"}>
-                      <Text>Berdonasi sebesar</Text>
+                      <Text fz={"xs"}>Berdonasi sebesar</Text>
                       <Text truncate fw={"bold"}>
-                        Rp. 50.000
+                       <TampilanRupiahDonasi nominal={+e.nominal}/>
                       </Text>
                     </Group>
-                    <Text fz={"xs"}>{moment(Date.now()).format("ll")}</Text>
+                    <Text fz={"xs"}>{moment(e.createdAt).format("ll")}</Text>
                   </Stack>
                 </Grid.Col>
               </Grid>

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

@@ -1,9 +1,12 @@
 "use client";
 
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
+import ComponentDonasi_ListKabar from "@/app_modules/donasi/component/detail_main/list_kabar";
+import { MODEL_DONASI_KABAR } from "@/app_modules/donasi/model/interface";
 import {
   ActionIcon,
   Avatar,
+  Box,
   Group,
   Paper,
   SimpleGrid,
@@ -15,9 +18,15 @@ import {
 import { IconCircleChevronRight } from "@tabler/icons-react";
 import moment from "moment";
 import { useRouter } from "next/navigation";
+import { useState } from "react";
 
-export default function KabarDonasi() {
-    const router = useRouter()
+export default function KabarDonasi({
+  listKabar,
+}: {
+  listKabar: MODEL_DONASI_KABAR[];
+}) {
+  const router = useRouter();
+  const [kabar, setKabar] = useState(listKabar);
   return (
     <>
       <SimpleGrid
@@ -29,33 +38,11 @@ export default function KabarDonasi() {
           { 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>
-          ))}
+        {kabar.map((e, i) => (
+         <Box key={i}>
+          <ComponentDonasi_ListKabar kabar={e} />
+         </Box>
+        ))}
       </SimpleGrid>
     </>
   );

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

@@ -6,14 +6,24 @@ 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({
+export default function LayoutDetailPublishDonasi({
   children,
+  donasiId,
 }: {
   children: React.ReactNode;
+  donasiId: string;
 }) {
   return (
     <>
-      <AppShell header={<HeaderTamplateDonasi title="Detail Publish" icon={<IconMessageShare/>} route2={RouterDonasi.list_kabar} />}>
+      <AppShell
+        header={
+          <HeaderTamplateDonasi
+            title="Detail Publish"
+            icon={<IconMessageShare />}
+            route2={RouterDonasi.list_kabar + `${donasiId}`}
+          />
+        }
+      >
         {children}
       </AppShell>
     </>