UI & API Submenu Sektor Unggulan, Menu Ekonomi

src/app/admin/(dashboard)/ekonomi/sektor-unggulan-desa/[id]/edit/page.tsx

@@ -0,0 +1,89 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+
+import grafikSektorUnggulan from '@/app/admin/(dashboard)/_state/ekonomi/sektor-unggulan-desa';
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useEffect } from 'react';
+import { useProxy } from 'valtio/utils';
+
+function EditSektorUnggulanDesa() {
+  const router = useRouter()
+  const params = useParams() as { id: string }
+  const stateGrafik = useProxy(grafikSektorUnggulan)
+
+  const id = params.id
+
+  // Load data saat komponen mount
+  useEffect(() => {
+    if (id) {
+      stateGrafik.findUnique.load(id).then(() => {
+        const data = stateGrafik.findUnique.data
+        if (data) {
+          stateGrafik.update.form = {
+            name: data.name || '',
+            description: data.description || '',
+            value: data.value || 0,
+          }
+        }
+      })
+    }
+  }, [id])
+
+  const handleSubmit = async () => {
+    // Set the ID before submitting
+    stateGrafik.update.id = id;
+    await stateGrafik.update.submit();
+    router.push('/admin/ekonomi/sektor-unggulan-desa')
+  }
+return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack size={20} />
+        </Button>
+      </Box>
+      <Paper bg={colors['white-1']} w={{ base: '100%', md: '50%' }} p={'md'}>
+        <Stack>
+          <Title order={3}>Edit Sektor Unggulan Desa</Title>
+          <TextInput
+            label="Nama Sektor Unggulan"
+            placeholder="masukkan nama sektor unggulan"
+            value={stateGrafik.update.form.name}
+            onChange={(val) => {
+              stateGrafik.update.form.name = val.currentTarget.value;
+            }}
+          />
+          <TextInput
+            label="Deskripsi Sektor Unggulan"
+            placeholder="masukkan deskripsi sektor unggulan"
+            value={stateGrafik.update.form.description}
+            onChange={(val) => {
+              stateGrafik.update.form.description = val.currentTarget.value;
+            }}
+          />
+          <TextInput
+            label="Jumlah"
+            type="number"
+            placeholder="masukkan jumlah"
+            value={stateGrafik.update.form.value}
+            onChange={(val) => {
+              stateGrafik.update.form.value = Number(val.currentTarget.value);
+            }}
+          />
+          <Button
+            mt={10}
+            bg={colors['blue-button']}
+            onClick={handleSubmit}
+          >
+            Simpan
+          </Button>
+        </Stack>
+      </Paper>
+    </Box>
+  )
+}
+
+export default EditSektorUnggulanDesa;

src/app/admin/(dashboard)/ekonomi/sektor-unggulan-desa/[id]/page.tsx

@@ -0,0 +1,105 @@
+'use client'
+import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
+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 { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import grafikSektorUnggulan from '../../../_state/ekonomi/sektor-unggulan-desa';
+
+function DetailSektorUnggulanDesa() {
+  const stateGrafik = useProxy(grafikSektorUnggulan)
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const params = useParams()
+  const router = useRouter();
+
+  useShallowEffect(() => {
+    stateGrafik.findUnique.load(params?.id as string)
+  }, [])
+
+  const handleHapus = () => {
+    if (selectedId) {
+      stateGrafik.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/ekonomi/sektor-unggulan-desa")
+    }
+  }
+
+  if (!stateGrafik.findUnique.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </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 Sektor Unggulan Desa</Text>
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Nama Sektor Unggulan</Text>
+                <Text fz={"lg"}>{stateGrafik.findUnique.data?.name}</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Deskripsi Sektor Unggulan</Text>
+                <Text fz={"lg"}>{stateGrafik.findUnique.data?.description}</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Jumlah Sektor Unggulan</Text>
+                <Text fz={"lg"}>{stateGrafik.findUnique.data?.value}</Text>
+              </Box>
+              <Box>
+                <Flex gap={"xs"}>
+                  <Button
+                    onClick={() => {
+                      if (stateGrafik.findUnique.data) {
+                        setSelectedId(stateGrafik.findUnique.data.id);
+                        setModalHapus(true);
+                      }
+                    }}
+                    disabled={!stateGrafik.findUnique.data}
+                    color="red">
+                    <IconX size={20} />
+                  </Button>
+                  <Button
+                    onClick={() => {
+                      if (stateGrafik.findUnique.data) {
+                        router.push(`/admin/ekonomi/sektor-unggulan-desa/${stateGrafik.findUnique.data.id}/edit`);
+                      }
+                    }}
+                    disabled={!stateGrafik.findUnique.data}
+                    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 sektor unggulan ini?"
+      />
+    </Box>
+  );
+}
+
+export default DetailSektorUnggulanDesa;

src/app/admin/(dashboard)/ekonomi/sektor-unggulan-desa/create/page.tsx

@@ -1,43 +1,89 @@
+/* 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 { Box, Button, Group, Paper, Stack, TextInput, Title } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import { KeamananEditor } from '../../../keamanan/_com/keamananEditor';
-
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import grafikSektorUnggulan from '../../../_state/ekonomi/sektor-unggulan-desa';
 
 function CreateSektorUnggulanDesa() {
-  const router = useRouter();
+  const stateGrafik= useProxy(grafikSektorUnggulan);
+  const [chartData, setChartData] = useState<any[]>([]);
+  const router = useRouter()
+
+  const resetForm = () => {
+    stateGrafik.create.form = {
+      name: "",
+      description: "",
+      value: 0,
+    }
+  }
+
+  const handleSubmit = async () => {
+    const id = await stateGrafik.create.create();
+    if (id) {
+      const idStr = String(id);
+      await stateGrafik.findUnique.load(idStr);
+      if (stateGrafik.findUnique.data) {
+        setChartData([stateGrafik.findUnique.data]);
+      }
+    }
+    resetForm();
+    router.push("/admin/ekonomi/sektor-unggulan-desa");
+  }
   return (
     <Box>
       <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack size={20} />
         </Button>
       </Box>
-
-      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Create Sektor Unggulan Desa</Title>
-          <TextInput
-            label={<Text fw={"bold"} fz={"sm"}>Nama Sektor Unggulan</Text>}
-            placeholder='Masukkan nama sektor unggulan'
-          />
-          <Box>
-            <Text fw={"bold"} fz={"sm"}>Deskripsi Sektor Unggulan</Text>
-            <KeamananEditor
-              showSubmit={false}
+      <Box>
+        <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+          <Title order={4}>Tambah Grafik Hasil Kepuasan Masyarakat</Title>
+          <Stack gap={"xs"}>
+            <TextInput
+              label="Nama Sektor Unggulan"
+              type="text"
+              value={stateGrafik.create.form.name}
+              placeholder="Masukkan nama sektor unggulan"
+              onChange={(val) => {
+                stateGrafik.create.form.name = val.currentTarget.value;
+              }}
             />
-          </Box>
-          <TextInput
-            label={<Text fw={"bold"} fz={"sm"}>Jumlah Sektor Unggulan</Text>}
-            placeholder='Masukkan jumlah sektor unggulan'
-          />
-          <Group>
-            <Button bg={colors['blue-button']}>Submit</Button>
-          </Group>
-        </Stack>
-      </Paper>
+            <TextInput
+              label="Deskripsi Sektor Unggulan"
+              type="text"
+              value={stateGrafik.create.form.description}
+              placeholder="Masukkan deskripsi sektor unggulan"
+              onChange={(val) => {
+                stateGrafik.create.form.description = val.currentTarget.value;
+              }}
+            />
+            <TextInput
+              label="Jumlah"
+              type="number"
+              value={stateGrafik.create.form.value}
+              placeholder="Masukkan jumlah"
+              onChange={(val) => {
+                stateGrafik.create.form.value = Number(val.currentTarget.value);
+              }}
+            />
+            <Group>
+              <Button
+                bg={colors['blue-button']}
+                mt={10}
+                onClick={handleSubmit}
+              >
+                Submit
+              </Button>
+            </Group>
+          </Stack>
+        </Paper>
+      </Box>
     </Box>
   );
 }

src/app/admin/(dashboard)/ekonomi/sektor-unggulan-desa/detail/page.tsx

@@ -1,62 +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 DetailSektorUnggulanDesa() {
-  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 Sektor Unggulan Desa</Text>
-
-          <Paper bg={colors['BG-trans']} p={'md'}>
-            <Stack gap={"xs"}>
-             <Box>
-             <Text fw={"bold"}>Nama Sektor Unggulan</Text>
-             <Text>Petani</Text>
-             </Box>
-             <Box>
-             <Text fw={"bold"}>Deskripsi Sektor Unggulan</Text>
-             <Text>BIBD</Text>
-             </Box>
-             <Box>
-             <Text fw={"bold"}>Jumlah Sektor Unggulan</Text>
-             <Text>200</Text>
-             </Box>
-              <Box>
-                <Flex gap={"xs"}>
-                  <Button color="red">
-                    <IconX size={20} />
-                  </Button>
-                  <Button onClick={() => router.push('/admin/ekonomi/sektor-unggulan-desa/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 DetailSektorUnggulanDesa;
-

src/app/admin/(dashboard)/ekonomi/sektor-unggulan-desa/edit/page.tsx

@@ -1,45 +0,0 @@
-'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 { KeamananEditor } from '../../../keamanan/_com/keamananEditor';
-
-
-function EditSektorUnggulanDesa() {
-  const router = useRouter();
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-
-      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Edit Sektor Unggulan Desa</Title>
-          <TextInput
-            label={<Text fw={"bold"} fz={"sm"}>Nama Sektor Unggulan</Text>}
-            placeholder='Masukkan nama sektor unggulan'
-          />
-          <Box>
-            <Text fw={"bold"} fz={"sm"}>Deskripsi Sektor Unggulan</Text>
-            <KeamananEditor
-              showSubmit={false}
-            />
-          </Box>
-          <TextInput
-            label={<Text fw={"bold"} fz={"sm"}>Jumlah Sektor Unggulan</Text>}
-            placeholder='Masukkan jumlah sektor unggulan'
-          />
-          <Group>
-            <Button bg={colors['blue-button']}>Submit</Button>
-          </Group>
-        </Stack>
-      </Paper>
-    </Box>
-  );
-}
-
-export default EditSektorUnggulanDesa;

src/app/admin/(dashboard)/ekonomi/sektor-unggulan-desa/page.tsx

@@ -1,26 +1,65 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { Box, Button, Paper, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } 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 { useEffect, useState } from 'react';
+import grafikSektorUnggulan from '../../_state/ekonomi/sektor-unggulan-desa';
+import { useProxy } from 'valtio/utils';
+import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
+import { Bar, BarChart, Legend, Tooltip, XAxis, YAxis } from 'recharts';
 
 function SektorUnggulanDesa() {
+  const [search, setSearch] = useState('');
   return (
     <Box>
       <HeaderSearch
         title='Sektor Unggulan Desa'
         placeholder='pencarian'
         searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
       />
-      <ListSektorUnggulanDesa/>
+      <ListSektorUnggulanDesa search={search} />
     </Box>
   );
 }
 
-function ListSektorUnggulanDesa() {
+function ListSektorUnggulanDesa({ search }: { search: string }) {
   const router = useRouter();
+  const state = useProxy(grafikSektorUnggulan);
+  const [chartData, setChartData] = useState<{id: string; name: string; description: string | null; value: number | null}[]>([]);
+  const [mounted, setMounted] = useState(false); // untuk memastikan DOM sudah ready
+  const isTablet = useMediaQuery('(max-width: 1024px)')
+  const isMobile = useMediaQuery('(max-width: 768px)')
+
+  const filteredData = (state.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.name.toLowerCase().includes(keyword) ||
+      (item.value?.toString() || '').toLowerCase().includes(keyword)
+    );
+  });
+
+  useShallowEffect(() => {
+    setMounted(true)
+    state.findMany.load()
+  }, [])
+
+  useEffect(() => {
+    setMounted(true);
+    if (state.findMany.data) {
+      setChartData(state.findMany.data.map((item) => ({
+        id: item.id,
+        name: item.name,
+        description: item.description,
+        value: Number(item.value),
+      })));
+    }
+  }, [state.findMany.data]);
+
   return (
     <Box py={10}>
       <Paper bg={colors['white-1']} p={'md'}>
@@ -34,21 +73,48 @@ function ListSektorUnggulanDesa() {
               <TableTh>Nama Sektor Unggulan</TableTh>
               <TableTh>Deskripsi Sektor Unggulan</TableTh>
               <TableTh>Detail</TableTh>
-              </TableTr>
+            </TableTr>
           </TableThead>
           <TableTbody>
-            <TableTr>
-              <TableTd>Sektor 1</TableTd>
-              <TableTd>Deskripsi Sektor 1</TableTd>
-              <TableTd>
-                <Button onClick={() => router.push('/admin/ekonomi/sektor-unggulan-desa/detail')}>
-                  <IconDeviceImac size={20} />
-                </Button>
-              </TableTd>
-            </TableTr>
+            {filteredData.map((item) => (
+              <TableTr key={item.id}>
+                <TableTd>{item.name}</TableTd>
+                <TableTd>{item.description}</TableTd>
+                <TableTd>
+                  <Button onClick={() => router.push(`/admin/ekonomi/sektor-unggulan-desa/${item.id}`)}>
+                    <IconDeviceImac size={20} />
+                  </Button>
+                </TableTd>
+              </TableTr>
+            ))}
           </TableTbody>
-        </Table>  
+        </Table>
       </Paper>
+
+      {/* Chart */}
+      {!mounted && !chartData ? (
+          <Box style={{ width: '100%', minWidth: 300, height: 400, minHeight: 300 }}>
+            <Paper bg={colors['white-1']} p={'md'}>
+              <Title pb={10} order={3}>Grafik Hasil Kepuasan Masyarakat</Title>
+              <Text c='dimmed'>Belum ada data untuk ditampilkan dalam grafik</Text>
+            </Paper>
+          </Box>
+        ) : (
+          <Box style={{ width: '100%', minWidth: 300, height: 400, minHeight: 300 }}>
+            <Paper bg={colors['white-1']} p={'md'}>
+              <Title pb={10} order={4}>Grafik Sektor Unggulan Desa</Title>
+              {mounted && chartData.length > 0 && (
+                <BarChart width={isMobile ? 450 : isTablet ? 500 : 550} height={350} data={chartData} >
+                  <XAxis dataKey="name" />
+                  <YAxis />
+                  <Tooltip />
+                  <Legend />
+                  <Bar dataKey="value" fill={colors['blue-button']} name="Jumlah" />
+                </BarChart>
+              )}
+            </Paper>
+          </Box>
+        )}
     </Box>
   );
 }