Push 1 Program Kemiskinan

src/app/admin/(dashboard)/ekonomi/program-kemiskinan/[id]/page.tsx

@@ -0,0 +1,126 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+import programKemiskinanState from '../../../_state/ekonomi/program-kemiskinan';
+
+
+function DetailProgramKemiskinan() {
+  const programState = useProxy(programKemiskinanState)
+  const [lineChart, setLineChart] = useState<any[]>([]);
+  const [mounted, setMounted] = useState(false);
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const router = useRouter();
+  const params = useParams()
+
+  useShallowEffect(() => {
+    setMounted(true);
+    programState.findUnique.load(params?.id as string)
+  }, [])
+
+  const handleHapus = () => {
+    if (selectedId) {
+      programState.delete.delete(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/ekonomi/program-kemiskinan")
+    }
+  }
+
+  useEffect(() => {
+    if (programState.findUnique.data) {
+      setLineChart([programState.findUnique.data]);
+    }
+  }, [programState.findUnique.data])
+
+  if (!programState.findUnique.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={40} />
+      </Stack>
+    )
+  }
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail Program Kemiskinan</Text>
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Box>
+                <Text fw={"bold"}>Judul Program</Text>
+                <Text fz={"sm"}>{programState.findUnique.data?.nama}</Text>
+              </Box>
+              <Box>
+                <Text fw={"bold"}>Deskripsi Singkat</Text>
+                <Text fz={"sm"} dangerouslySetInnerHTML={{ __html: programState.findUnique.data?.deskripsi }}></Text>
+              </Box>
+              <Box>
+                <Text fw={"bold"}>Ikon URL</Text>
+                <Text fz={"sm"}>{programState.findUnique.data?.ikonUrl}</Text>
+              </Box>
+              <Text fw={"bold"}>Statistik Jumlah Masyarakat Miskin</Text>
+              <Box>
+                <Text fw={"bold"}>Jumlah Masyarakat Miskin</Text>
+                <Text fz={"sm"}>{programState.findUnique.data?.statistik?.jumlah}</Text>
+              </Box>
+              <Box>
+                <Text fw={"bold"}>Tahun</Text>
+                <Text fz={"sm"}>{programState.findUnique.data?.statistik?.tahun}</Text>
+              </Box>
+              <Flex gap={"xs"} mt={10}>
+                <Button
+                  onClick={() => {
+                    if (programState.findUnique.data) {
+                      setSelectedId(programState.findUnique.data.id);
+                      setModalHapus(true);
+                    }
+                  }}
+                  disabled={programState.delete.loading || !programState.findUnique.data}
+                  color={"red"}
+                >
+                  <IconX size={20} />
+                </Button>
+                <Button
+                  onClick={() => {
+                    if (programState.findUnique.data) {
+                      router.push(`/admin/ekonomi/program-kemiskinan/${programState.findUnique.data.id}/edit`);
+                    }
+                  }}
+                  disabled={!programState.findUnique.data}
+                  color={"green"}
+                >
+                  <IconEdit size={20} />
+                </Button>
+              </Flex>
+            </Stack>
+          </Paper>
+        </Stack>
+      </Paper>
+
+      {/* Modal Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text="Apakah anda yakin ingin menghapus program kemiskinan ini?"
+      />
+    </Box>
+  );
+}
+
+export default DetailProgramKemiskinan;
+

src/app/admin/(dashboard)/ekonomi/program-kemiskinan/create/page.tsx

@@ -1,45 +1,107 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-explicit-any */
 'use client'
 import colors from '@/con/colors';
 import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+import programKemiskinanState from '../../../_state/ekonomi/program-kemiskinan';
+import CreateEditor from '../../../_com/createEditor';
+import { useState } from 'react';
 
 
 function CreateProgramKemiskinan() {
+  const programState = useProxy(programKemiskinanState)
   const router = useRouter();
+  const [lineChart, setLineChart] = useState<any[]>([]);
+
+  const resetForm = () => {
+    programState.create.form = {
+      nama: "",
+      deskripsi: "",
+      ikonUrl: "",
+      statistik: {
+        tahun: "",
+        jumlah: "",
+      }
+    }
+  }
+
+  const handleSubmit = async () => {
+    const id = await programState.create.create();
+    if (id) {
+      const idStr = String(id);
+      await programState.findUnique.load(idStr);
+      if (programState.findUnique.data) {
+        setLineChart([programState.findUnique.data]);
+      }
+    }
+    resetForm()
+    router.push("/admin/ekonomi/program-kemiskinan")
+  }
+
   return (
     <Box>
       <Box mb={10}>
         <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25}/>
+          <IconArrowBack color={colors['blue-button']} size={25} />
         </Button>
       </Box>
 
-      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
+      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
         <Stack gap={"xs"}>
           <Title order={4}>Create Program Kemiskinan</Title>
           <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Judul Program</Text>}
-          placeholder='Masukkan judul program'
+            value={programState.create.form.nama}
+            onChange={(val) => {
+              programState.create.form.nama = val.target.value;
+            }}
+            label={<Text fw={"bold"} fz={"md"}>Judul Program</Text>}
+            placeholder='Masukkan judul program'
+          />
+         <Box>
+          <Text fw={"bold"} fz={"md"}>Deskripsi</Text>
+         <CreateEditor
+            value={programState.create.form.deskripsi}
+            onChange={(val) => {
+              programState.create.form.deskripsi = val;
+            }}
+          />
+         </Box>
+          <TextInput
+            value={programState.create.form.ikonUrl}
+            onChange={(val) => {
+              programState.create.form.ikonUrl = val.target.value;
+            }}
+            label={<Text fw={"bold"} fz={"md"}>Ikon URL</Text>}
+            placeholder='Masukkan ikon url'
+          />
+          <Text fw={"bold"} fz={"md"}>Statistik Jumlah Masyarakat Miskin</Text>
+          <TextInput
+            type='number'
+            value={programState.create.form.statistik.jumlah}
+            onChange={(val) => {
+              programState.create.form.statistik.jumlah = val.target.value;
+            }}
+            label={<Text fw={"bold"} fz={"md"}>Jumlah Masyarakat Miskin</Text>}
+            placeholder='Masukkan jumlah masyarakat miskin'
           />
           <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Deskripsi Singkat</Text>}
-          placeholder='Masukkan deskripsi'
-          />
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Jumlah Masyarakat Miskin</Text>}
-          placeholder='Masukkan jumlah masyarakat miskin'
-          />
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Deskripsi</Text>}
-          placeholder='Masukkan deskripsi'
+            type='number'
+            value={programState.create.form.statistik.tahun}
+            onChange={(val) => {
+              programState.create.form.statistik.tahun = val.target.value;
+            }}
+            label={<Text fw={"bold"} fz={"md"}>Tahun</Text>}
+            placeholder='Masukkan tahun'
           />
           <Group>
-            <Button bg={colors['blue-button']}>Submit</Button>
+            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
           </Group>
-       </Stack>
+        </Stack>
       </Paper>
-   </Box>
+    </Box>
   );
 }
 

src/app/admin/(dashboard)/ekonomi/program-kemiskinan/detail/page.tsx

@@ -1,66 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Flex, Paper, Stack, Text } from '@mantine/core';
-import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
-
-function DetailProgramKemiskinan() {
-  const router = useRouter();
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <Text fz={"xl"} fw={"bold"}>Detail Program Kemiskinan</Text>
-
-          <Paper bg={colors['BG-trans']} p={'md'}>
-            <Stack gap={"xs"}>
-             <Box>
-             <Text fw={"bold"}>Judul Program</Text>
-             <Text>Program A</Text>
-             </Box>
-             <Box>
-             <Text fw={"bold"}>Deskripsi Singkat</Text>
-             <Text>Deskripsi Program A</Text>
-             </Box>
-             <Box>
-             <Text fw={"bold"}>Jumlah Masyarakat Miskin</Text>
-             <Text>100</Text>
-             </Box>
-             <Box>
-             <Text fw={"bold"}>Deskripsi</Text>
-             <Text>Deskripsi Program A</Text>
-             </Box>
-              <Box>
-                <Flex gap={"xs"}>
-                  <Button color="red">
-                    <IconX size={20} />
-                  </Button>
-                  <Button onClick={() => router.push('/admin/ekonomi/program-kemiskinan/edit')} color="green">
-                    <IconEdit size={20} />
-                  </Button>
-                </Flex>
-              </Box>
-            </Stack>
-          </Paper>
-        </Stack>
-      </Paper>
-
-      {/* Modal Hapus
-      <ModalKonfirmasiHapus
-        opened={modalHapus}
-        onClose={() => setModalHapus(false)}
-        onConfirm={handleHapus}
-        text="Apakah anda yakin ingin menghapus potensi ini?"
-      /> */}
-    </Box>
-  );
-}
-
-export default DetailProgramKemiskinan;
-

src/app/admin/(dashboard)/ekonomi/program-kemiskinan/page.tsx

@@ -1,10 +1,13 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
 import HeaderSearch from '../../_com/header';
 import JudulList from '../../_com/judulList';
 import { useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+import programKemiskinanState from '../../_state/ekonomi/program-kemiskinan';
+import { useShallowEffect } from '@mantine/hooks';
 
 function ProgramKemiskinan() {
   return (
@@ -14,13 +17,26 @@ function ProgramKemiskinan() {
         placeholder='pencarian'
         searchIcon={<IconSearch size={20} />}
       />
-      <ListProgramKemiskinan/>
+      <ListProgramKemiskinan />
     </Box>
   );
 }
 
 function ListProgramKemiskinan() {
+  const programState = useProxy(programKemiskinanState)
   const router = useRouter();
+
+  useShallowEffect(() => {
+    programState.findMany.load()
+  }, [])
+
+  if (!programState.findMany.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
   return (
     <Box py={10}>
       <Paper bg={colors['white-1']} p={'md'}>
@@ -35,21 +51,25 @@ function ListProgramKemiskinan() {
               <TableTh>Deskripsi Singkat</TableTh>
               <TableTh>Jumlah Masyarakat Miskin</TableTh>
               <TableTh>Detail</TableTh>
-              </TableTr>
+            </TableTr>
           </TableThead>
           <TableTbody>
-            <TableTr>
-              <TableTd>Program A</TableTd>
-              <TableTd>Deskripsi Program A</TableTd>
-              <TableTd>100</TableTd>
-              <TableTd>
-                <Button onClick={() => router.push('/admin/ekonomi/program-kemiskinan/detail')}>
-                  <IconDeviceImac size={20} />
-                </Button>
-              </TableTd>
-            </TableTr>
+            {programState.findMany.data?.map((item) => (
+              <TableTr key={item.id}>
+                <TableTd>{item.nama}</TableTd>
+                <TableTd>
+                  <Text fz={'sm'} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
+                </TableTd>
+                <TableTd>{item.statistik?.jumlah}</TableTd>
+                <TableTd>
+                  <Button onClick={() => router.push(`/admin/ekonomi/program-kemiskinan/${item.id}`)}>
+                    <IconDeviceImac size={20} />
+                  </Button>
+                </TableTd>
+              </TableTr>
+            ))}
           </TableTbody>
-        </Table>  
+        </Table>
       </Paper>
     </Box>
   );