fix tampilan admin menu inovasi, sisa menu lingkungan

src/app/admin/(dashboard)/inovasi/ajukan-ide-inovatif/[id]/page.tsx

@@ -1,8 +1,8 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { Box, Button, Flex, Paper, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { IconArrowBack, IconX } from '@tabler/icons-react';
+import { IconArrowBack, IconTrash } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
@@ -10,87 +10,114 @@ import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 import ajukanIdeInovatifState from '../../../_state/inovasi/ajukan-ide-inovatif';
 
 function DetailAjukanIdeInofativDesa() {
-  const state = useProxy(ajukanIdeInovatifState)
+  const state = useProxy(ajukanIdeInovatifState);
   const [modalHapus, setModalHapus] = useState(false);
   const [selectedId, setSelectedId] = useState<string | null>(null);
-  const router = useRouter()
-  const params = useParams()
+  const router = useRouter();
+  const params = useParams();
 
   useShallowEffect(() => {
-    state.findUnique.load(params?.id as string)
-  }, [])
+    state.findUnique.load(params?.id as string);
+  }, []);
 
   const handleHapus = () => {
     if (selectedId) {
-      state.delete.byId(selectedId)
-      setModalHapus(false)
-      setSelectedId(null)
-      router.push("/admin/inovasi/ajukan-ide-inovatif")
+      state.delete.byId(selectedId);
+      setModalHapus(false);
+      setSelectedId(null);
+      router.push("/admin/inovasi/ajukan-ide-inovatif");
     }
-  }
+  };
 
   if (!state.findUnique.data) {
     return (
       <Stack py={10}>
-        <Skeleton h={500} />
+        <Skeleton height={500} radius="md" />
       </Stack>
-    )
+    );
   }
 
+  const data = state.findUnique.data;
+
   return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
-        <Stack>
-          <Flex justify="space-between" gap={"xs"}>
-            <Text fz={"xl"} fw={"bold"}>Detail Ajukan Ide Inovatif Desa</Text>
-            <Button
-              onClick={() => {
-                if (state.findUnique.data) {
-                  setSelectedId(state.findUnique.data.id);
+    <Box py={10}>
+      {/* Tombol Kembali */}
+      <Button
+        variant="subtle"
+        onClick={() => router.back()}
+        leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
+        mb={15}
+      >
+        Kembali
+      </Button>
+
+      {/* Card Utama */}
+      <Paper
+        withBorder
+        w={{ base: "100%", md: "80%", lg: "60%" }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+      >
+        <Stack gap="md">
+          {/* Header */}
+          <Flex justify="space-between" align="center">
+            <Text fz="2xl" fw="bold" c={colors['blue-button']}>
+              Detail Ajukan Ide Inovatif Desa
+            </Text>
+
+            <Tooltip label="Hapus Ide Inovatif" withArrow position="top">
+              <Button
+                color="red"
+                onClick={() => {
+                  setSelectedId(data.id);
                   setModalHapus(true);
-                }
-              }}
-              disabled={state.delete.loading || !state.findUnique.data}
-              color={"red"}
-            >
-              <IconX size={20} />
-            </Button>
+                }}
+                variant="light"
+                radius="md"
+                size="md"
+                disabled={state.delete.loading}
+              >
+                <IconTrash size={20} />
+              </Button>
+            </Tooltip>
           </Flex>
-          {state.findUnique.data ? (
-            <Paper key={state.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
-              <Stack gap={"xs"}>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Nama</Text>
-                  <Text fz={"lg"}>{state.findUnique.data?.name}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Alamat</Text>
-                  <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: state.findUnique.data?.alamat }} />
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Nama Ide Inovatif</Text>
-                  <Text fz={"lg"}>{state.findUnique.data?.namaIde}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Deskripsi</Text>
-                  <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: state.findUnique.data?.deskripsi }} />
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Masalah</Text>
-                  <Text fz={"lg"}>{state.findUnique.data?.masalah}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Benefit</Text>
-                  <Text fz={"lg"}>{state.findUnique.data?.benefit}</Text>
-                </Box>
-              </Stack>
-            </Paper>
-          ) : null}
+
+          {/* Detail Data */}
+          <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
+            <Stack gap="sm">
+              <Box>
+                <Text fz="lg" fw="bold">Nama</Text>
+                <Text fz="md" c="dimmed">{data?.name || '-'}</Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Alamat</Text>
+                <Text fz="md" c="dimmed" dangerouslySetInnerHTML={{ __html: data?.alamat || '-' }} />
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Nama Ide Inovatif</Text>
+                <Text fz="md" c="dimmed">{data?.namaIde || '-'}</Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Deskripsi</Text>
+                <Text fz="md" c="dimmed" dangerouslySetInnerHTML={{ __html: data?.deskripsi || '-' }} />
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Masalah</Text>
+                <Text fz="md" c="dimmed">{data?.masalah || '-'}</Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Benefit</Text>
+                <Text fz="md" c="dimmed">{data?.benefit || '-'}</Text>
+              </Box>
+            </Stack>
+          </Paper>
         </Stack>
       </Paper>
 
@@ -99,7 +126,7 @@ function DetailAjukanIdeInofativDesa() {
         opened={modalHapus}
         onClose={() => setModalHapus(false)}
         onConfirm={handleHapus}
-        text='Apakah anda yakin ingin menghapus ajukan ide inovatif ini?'
+        text="Apakah anda yakin ingin menghapus ajukan ide inovatif ini?"
       />
     </Box>
   );

src/app/admin/(dashboard)/inovasi/ajukan-ide-inovatif/page.tsx

@@ -1,8 +1,26 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Center,
+  Group,
+  Pagination,
+  Paper,
+  Skeleton,
+  Stack,
+  Table,
+  TableTbody,
+  TableTd,
+  TableTh,
+  TableThead,
+  TableTr,
+  Text,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+import { IconDeviceImac, IconSearch, IconPlus } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
@@ -15,7 +33,7 @@ function AjukanIdeInovatif() {
     <Box>
       <HeaderSearch
         title='Ajukan Ide Inovatif'
-        placeholder='pencarian'
+        placeholder='Cari ide inovatif...'
         searchIcon={<IconSearch size={20} />}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
@@ -28,62 +46,110 @@ function AjukanIdeInovatif() {
 function ListAjukanIdeInovatif({ search }: { search: string }) {
   const state = useProxy(ajukanIdeInovatifState)
   const router = useRouter()
+
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = state.findMany;
+
   useShallowEffect(() => {
-    state.findMany.load()
-  }, [])
+    load(page, 10, search)
+  }, [page, search])
 
-  const filteredData = (state.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.name.toLowerCase().includes(keyword) ||
-      item.deskripsi.toLowerCase().includes(keyword) ||
-      item.alamat.toLowerCase().includes(keyword) ||
-      item.namaIde.toLowerCase().includes(keyword) ||
-      item.masalah.toLowerCase().includes(keyword) ||
-      item.benefit.toLowerCase().includes(keyword)
-    );
-  });
+  const filteredData = data || []
 
-  if (!state.findMany.data) {
+  if (loading || !data) {
     return (
       <Stack py={10}>
-        <Skeleton h={500} />
+        <Skeleton height={500} radius="md" />
       </Stack>
     )
   }
+
   return (
     <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <Title mb={10} order={3}>List Ajukan Ide Inovatif</Title>
-        <Table striped withTableBorder withRowBorders>
-          <TableThead>
-            <TableTr>
-              <TableTh>Nama</TableTh>
-              <TableTh>Alamat</TableTh>
-              <TableTh>Nama Ide Inovatif</TableTh>
-              <TableTh>Detail</TableTh>
-            </TableTr>
-          </TableThead>
-          <TableTbody>
-            {filteredData.map((item) => (
-              <TableTr key={item.id}>
-                <TableTd>{item.name}</TableTd>
-                <TableTd>
-                  <Text truncate="end" fz={"sm"} dangerouslySetInnerHTML={{ __html: item.alamat }} />
-                </TableTd>
-                <TableTd>
-                  <Text truncate="end" fz={"sm"} dangerouslySetInnerHTML={{ __html: item.namaIde }} />
-                </TableTd>
-              <TableTd>
-                <Button onClick={() => router.push(`/admin/inovasi/ajukan-ide-inovatif/${item.id}`)}>
-                  <IconDeviceImac size={20} />
-                </Button>
-              </TableTd>
-            </TableTr>
-          ))}
-          </TableTbody>
-        </Table>
+      <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
+        <Group justify="space-between" mb="md">
+          <Title order={4}>Daftar Ide Inovatif</Title>
+          <Tooltip label="Ajukan Ide Baru" withArrow>
+            <Button
+              leftSection={<IconPlus size={18} />}
+              color="blue"
+              variant="light"
+              onClick={() => router.push('/admin/inovasi/ajukan-ide-inovatif/create')}
+            >
+              Tambah Baru
+            </Button>
+          </Tooltip>
+        </Group>
+
+        <Box style={{ overflowX: "auto" }}>
+          <Table highlightOnHover>
+            <TableThead>
+              <TableTr>
+                <TableTh style={{ width: '20%' }}>Nama</TableTh>
+                <TableTh style={{ width: '30%' }}>Alamat</TableTh>
+                <TableTh style={{ width: '30%' }}>Nama Ide Inovatif</TableTh>
+                <TableTh style={{ width: '15%' }}>Aksi</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {filteredData.length > 0 ? (
+                filteredData.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd>
+                      <Text fw={500} truncate lineClamp={1}>{item.name}</Text>
+                    </TableTd>
+                    <TableTd>
+                      <Text truncate fz="sm" c="dimmed" lineClamp={1} dangerouslySetInnerHTML={{ __html: item.alamat }} />
+                    </TableTd>
+                    <TableTd>
+                      <Text truncate fz="sm" lineClamp={1} dangerouslySetInnerHTML={{ __html: item.namaIde }} />
+                    </TableTd>
+                    <TableTd>
+                      <Button
+                        size="xs"
+                        radius="md"
+                        variant="light"
+                        color="blue"
+                        leftSection={<IconDeviceImac size={16} />}
+                        onClick={() => router.push(`/admin/inovasi/ajukan-ide-inovatif/${item.id}`)}
+                      >
+                        Detail
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))
+              ) : (
+                <TableTr>
+                  <TableTd colSpan={4}>
+                    <Center py={20}>
+                      <Text color="dimmed">Tidak ada ide inovatif yang cocok</Text>
+                    </Center>
+                  </TableTd>
+                </TableTr>
+              )}
+            </TableTbody>
+          </Table>
+        </Box>
       </Paper>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => {
+            load(newPage, 10);
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+          }}
+          total={totalPages}
+          mt="md"
+          mb="md"
+          color="blue"
+          radius="md"
+        />
+      </Center>
     </Box>
   );
 }