Fix UI Admin Menu Landing Page & PPID

src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/_lib/layoutTab.tsx

@@ -1,63 +1,89 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
-import colors from '@/con/colors';
-import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
+import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
+import { IconChartBar, IconUsers } from '@tabler/icons-react';
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
 
 function LayoutTabsKepuasan({ children }: { children: React.ReactNode }) {
-    const router = useRouter()
-    const pathname = usePathname()
-    const tabs = [
-        {
-            label: "Grafik Kepuasan Masyarakat",
-            value: "grafikkepuasannamasyarakat",
-            href: "/admin/landing-page/indeks-kepuasan-masyarakat/grafik-kepuasan-masyarakat"
-        },
-        {
-            label: "Responden",
-            value: "responden",
-            href: "/admin/landing-page/indeks-kepuasan-masyarakat/responden"
-        },
-        
-    ];
-    const curentTab = tabs.find(tab => tab.href === pathname)
-    const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
+  const router = useRouter();
+  const pathname = usePathname();
+  const tabs = [
+    {
+      label: "Grafik Kepuasan",
+      description: "Lihat visualisasi grafik kepuasan masyarakat",
+      value: "grafik",
+      href: "/admin/landing-page/indeks-kepuasan-masyarakat/grafik-kepuasan-masyarakat",
+      icon: <IconChartBar size={18} stroke={1.8} />
+    },
+    {
+      label: "Responden",
+      description: "Kelola dan tinjau data responden",
+      value: "responden",
+      href: "/admin/landing-page/indeks-kepuasan-masyarakat/responden",
+      icon: <IconUsers size={18} stroke={1.8} />
+    },
+  ];
 
-    const handleTabChange = (value: string | null) => {
-        const tab = tabs.find(t => t.value === value)
-        if (tab) {
-            router.push(tab.href)
-        }
-        setActiveTab(value)
-    }
+  const curentTab = tabs.find(tab => tab.href === pathname);
+  const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
 
-    useEffect(() => {
-        const match = tabs.find(tab => tab.href === pathname)
-        if (match) {
-            setActiveTab(match.value)
-        }
-    }, [pathname])
+  const handleTabChange = (value: string | null) => {
+    const tab = tabs.find(t => t.value === value);
+    if (tab) router.push(tab.href);
+    setActiveTab(value);
+  };
 
-    return (
-        <Stack>
-            <Title order={3}>Indeks Kepuasan Masyarakat</Title>
-            <Tabs color={colors['blue-button']} variant='pills' value={activeTab} onChange={handleTabChange}>
-                <TabsList p={"xs"} bg={"#BBC8E7FF"}>
-                    {tabs.map((e, i) => (
-                        <TabsTab key={i} value={e.value}>{e.label}</TabsTab>
-                    ))}
-                </TabsList>
-                {tabs.map((e, i) => (
-                    <TabsPanel key={i} value={e.value}>
-                        {/* Konten dummy, bisa diganti tergantung routing */}
-                        <></>
-                    </TabsPanel>
-                ))}
-            </Tabs>
-            {children}
-        </Stack>
-    );
+  useEffect(() => {
+    const match = tabs.find(tab => tab.href === pathname);
+    if (match) setActiveTab(match.value);
+  }, [pathname]);
+
+  return (
+    <Stack gap="lg">
+      <Title order={2} style={{ fontWeight: 700, color: "#1a1a1a" }}>
+        Indeks Kepuasan Masyarakat
+      </Title>
+      <Tabs
+        radius="xl"
+        color="blue"
+        variant="pills"
+        value={activeTab}
+        onChange={handleTabChange}
+      >
+        <TabsList
+          p="sm"
+          style={{
+            background: "#F3F4FB",
+            borderRadius: "1rem",
+            
+          }}
+        >
+          {tabs.map((e, i) => (
+            <Tooltip key={i} label={e.description} withArrow position="bottom" transitionProps={{ transition: 'pop', duration: 200 }}>
+              <TabsTab
+                value={e.value}
+                leftSection={e.icon}
+                style={{
+                  fontWeight: 500,
+                  fontSize: "0.9rem",
+                  transition: "all 0.2s ease",
+                }}
+              >
+                {e.label}
+              </TabsTab>
+            </Tooltip>
+          ))}
+        </TabsList>
+        {tabs.map((e, i) => (
+          <TabsPanel key={i} value={e.value} mt="md">
+            <></>
+          </TabsPanel>
+        ))}
+      </Tabs>
+      {children}
+    </Stack>
+  );
 }
 
-export default LayoutTabsKepuasan;
+export default LayoutTabsKepuasan;

src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/grafik-kepuasan-masyarakat/page.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 'use client';
 import colors from '@/con/colors';
-import { PieChart, BarChart } from '@mantine/charts'; // ✅ Ganti recharts dengan Mantine
+import { PieChart, BarChart } from '@mantine/charts';
 import {
   Box,
   Center,
@@ -22,11 +22,8 @@ interface ChartDataItem {
   name: string;
   value: number;
   color: string;
-  label?: string;
 }
 
-
-
 function Page() {
   const state = useProxy(indeksKepuasanState.responden);
   const { data, loading } = state.findMany;
@@ -41,28 +38,23 @@ function Page() {
       return;
     }
     if (data) {
-      // Hitung total berdasarkan jenis kelamin
       const totalLaki = data.filter((item: any) => item.jenisKelamin?.name?.toLowerCase() === 'laki-laki').length;
       const totalPerempuan = data.filter((item: any) => item.jenisKelamin?.name?.toLowerCase() === 'perempuan').length;
 
-      // Hitung total berdasarkan rating
       const totalSangatBaik = data.filter((item: any) => item.rating?.name?.toLowerCase() === 'sangat baik').length;
       const totalBaik = data.filter((item: any) => item.rating?.name?.toLowerCase() === 'baik').length;
       const totalKurangBaik = data.filter((item: any) => item.rating?.name?.toLowerCase() === 'kurang baik').length;
       const totalSangatKurangBaik = data.filter((item: any) => item.rating?.name?.toLowerCase() === 'sangat kurang baik').length;
 
-      // Hitung total berdasarkan kelompok umur
       const totalMuda = data.filter((item: any) => item.kelompokUmur?.name?.toLowerCase() === 'muda').length;
       const totalDewasa = data.filter((item: any) => item.kelompokUmur?.name?.toLowerCase() === 'dewasa').length;
       const totalLansia = data.filter((item: any) => item.kelompokUmur?.name?.toLowerCase() === 'lansia').length;
 
-      // Update gender chart data
       setDonutDataJenisKelamin([
         { name: 'Laki-laki', value: totalLaki, color: colors['blue-button'] },
         { name: 'Perempuan', value: totalPerempuan, color: '#10A85AFF' },
       ]);
 
-      // Update rating chart data
       setDonutDataRating([
         { name: 'Sangat Baik', value: totalSangatBaik, color: colors['blue-button'] },
         { name: 'Baik', value: totalBaik, color: '#10A85AFF' },
@@ -70,18 +62,15 @@ function Page() {
         { name: 'Sangat Kurang Baik', value: totalSangatKurangBaik, color: '#FF4500' },
       ]);
 
-      // Update age group chart data
       setDonutDataKelompokUmur([
         { name: 'Muda', value: totalMuda, color: colors['blue-button'] },
         { name: 'Dewasa', value: totalDewasa, color: '#10A85AFF' },
         { name: 'Lansia', value: totalLansia, color: '#FFA500' },
       ]);
 
-      // Process data for bar chart (group by month)
       const monthYearMap = new Map<string, number>();
 
       data.forEach((item: any) => {
-        // Try both createdAt and tanggal fields
         const dateValue = item.tanggal || item.createdAt;
         if (!dateValue) return;
 
@@ -95,7 +84,6 @@ function Page() {
         monthYearMap.set(monthYearKey, (monthYearMap.get(monthYearKey) || 0) + 1);
       });
 
-      // Convert map to array and sort by date
       const barData = Array.from(monthYearMap.entries())
         .map(([key, count]) => {
           const [year, month] = key.split('-');
@@ -104,7 +92,7 @@ function Page() {
           return {
             month: `${monthName} ${year}`,
             count,
-            sortKey: parseInt(`${year}${String(month).padStart(2, '0')}`, 10)
+            sortKey: parseInt(`${year}${String(month).padStart(2, '0')}`, 10),
           };
         })
         .sort((a, b) => a.sortKey - b.sortKey)
@@ -116,28 +104,27 @@ function Page() {
 
   if (loading || !data) {
     return (
-      <Stack py={10}>
-        <Skeleton height={730} />
+      <Stack py="xl">
+        <Skeleton height={750} radius="lg" />
       </Stack>
     );
   }
 
   if (data.length === 0) {
     return (
-      <Stack py={10}>
-        <Text c="dimmed" ta="center" my="md">
-          Belum ada data untuk ditampilkan
+      <Stack py="xl">
+        <Text c="dimmed" ta="center" size="lg">
+          Belum ada data yang tersedia
         </Text>
       </Stack>
     );
   }
 
   return (
-    <Stack gap="xs">
-      {/* Bar Chart - Data per Tanggal */}
-      <Paper bg={colors['white-1']} p="md" radius="md" mb="md">
-        <Title order={4} mb="md" ta="center">Jumlah Responden per Bulan</Title>
-        <Box h={300}>
+    <Stack gap="lg">
+      <Paper withBorder bg={colors['white-1']} p="lg" radius="xl" shadow="sm">
+        <Title order={3} mb="md" ta="center">Tren Jumlah Responden</Title>
+        <Box h={320}>
           <BarChart
             h={300}
             data={barChartData}
@@ -152,14 +139,13 @@ function Page() {
         </Box>
       </Paper>
 
-      <SimpleGrid cols={{ base: 1, md: 3 }}>
-        {/* Chart Jenis Kelamin */}
-        <Paper bg={colors['white-1']} p="md" radius="md">
+      <SimpleGrid cols={{ base: 1, md: 3 }} spacing="lg">
+        <Paper withBorder bg={colors['white-1']} p="lg" radius="xl" shadow="sm">
           <Stack>
-            <Title order={4}>Jenis Kelamin</Title>
+            <Title order={4} ta="center">Distribusi Jenis Kelamin</Title>
             {donutDataJenisKelamin.every(item => item.value === 0) ? (
               <Text c="dimmed" ta="center" my="md">
-                Belum ada data untuk ditampilkan dalam grafik
+                Tidak ada data
               </Text>
             ) : (
               <Box>
@@ -168,15 +154,15 @@ function Page() {
                     withLabels
                     withTooltip
                     labelsType="percent"
-                    size={250}
+                    size={220}
                     data={donutDataJenisKelamin}
                   />
                 </Center>
-                <Stack gap="sm" mt="md">
+                <Stack gap="xs" mt="md">
                   {donutDataJenisKelamin.map((entry) => (
-                    <Flex key={entry.name} gap="md" align="center">
-                      <Box bg={entry.color} w={20} h={20} style={{ flexShrink: 0 }} />
-                      <Text size="sm">{entry.name}: {entry.value}</Text>
+                    <Flex key={entry.name} gap="sm" align="center">
+                      <Box bg={entry.color} w={14} h={14} style={{ borderRadius: 4, flexShrink: 0 }} />
+                      <Text size="sm" fw={500}>{entry.name}: {entry.value}</Text>
                     </Flex>
                   ))}
                 </Stack>
@@ -185,13 +171,12 @@ function Page() {
           </Stack>
         </Paper>
 
-        {/* Chart Rating */}
-        <Paper bg={colors['white-1']} p="md" radius="md">
+        <Paper withBorder bg={colors['white-1']} p="lg" radius="xl" shadow="sm">
           <Stack>
-            <Title order={4}>Pilihan</Title>
+            <Title order={4} ta="center">Distribusi Penilaian</Title>
             {donutDataRating.every(item => item.value === 0) ? (
               <Text c="dimmed" ta="center" my="md">
-                Belum ada data untuk ditampilkan dalam grafik
+                Tidak ada data
               </Text>
             ) : (
               <Box>
@@ -200,15 +185,15 @@ function Page() {
                     withLabels
                     withTooltip
                     labelsType="percent"
-                    size={250}
+                    size={220}
                     data={donutDataRating}
                   />
                 </Center>
-                <Stack gap="sm" mt="md">
+                <Stack gap="xs" mt="md">
                   {donutDataRating.map((entry) => (
-                    <Flex key={entry.name} gap="md" align="center">
-                      <Box bg={entry.color} w={20} h={20} style={{ flexShrink: 0 }} />
-                      <Text size="sm">{entry.name}: {entry.value}</Text>
+                    <Flex key={entry.name} gap="sm" align="center">
+                      <Box bg={entry.color} w={14} h={14} style={{ borderRadius: 4, flexShrink: 0 }} />
+                      <Text size="sm" fw={500}>{entry.name}: {entry.value}</Text>
                     </Flex>
                   ))}
                 </Stack>
@@ -217,13 +202,12 @@ function Page() {
           </Stack>
         </Paper>
 
-        {/* Chart Kelompok Umur */}
-        <Paper bg={colors['white-1']} p="md" radius="md">
+        <Paper withBorder bg={colors['white-1']} p="lg" radius="xl" shadow="sm">
           <Stack>
-            <Title order={4}>Umur</Title>
+            <Title order={4} ta="center">Distribusi Kelompok Umur</Title>
             {donutDataKelompokUmur.every(item => item.value === 0) ? (
               <Text c="dimmed" ta="center" my="md">
-                Belum ada data untuk ditampilkan dalam grafik
+                Tidak ada data
               </Text>
             ) : (
               <Box>
@@ -232,15 +216,15 @@ function Page() {
                     withLabels
                     withTooltip
                     labelsType="percent"
-                    size={250}
+                    size={220}
                     data={donutDataKelompokUmur}
                   />
                 </Center>
-                <Stack gap="sm" mt="md">
+                <Stack gap="xs" mt="md">
                   {donutDataKelompokUmur.map((entry) => (
-                    <Flex key={entry.name} gap="md" align="center">
-                      <Box bg={entry.color} w={20} h={20} style={{ flexShrink: 0 }} />
-                      <Text size="sm">{entry.name}: {entry.value}</Text>
+                    <Flex key={entry.name} gap="sm" align="center">
+                      <Box bg={entry.color} w={14} h={14} style={{ borderRadius: 4, flexShrink: 0 }} />
+                      <Text size="sm" fw={500}>{entry.name}: {entry.value}</Text>
                     </Flex>
                   ))}
                 </Stack>
@@ -253,4 +237,4 @@ function Page() {
   );
 }
 
-export default Page;
+export default Page;

src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/responden/[id]/edit/page.tsx

@@ -4,8 +4,8 @@ import React, { useEffect, useState } from 'react';
 import { useRouter, useParams } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
 import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Title, TextInput, Text, Select } from '@mantine/core';
-import { IconArrowBack } from '@tabler/icons-react';
+import { Box, Button, Group, Paper, Stack, Title, TextInput, Text, Select, Tooltip } from '@mantine/core';
+import { IconArrowBack, IconDeviceFloppy } from '@tabler/icons-react';
 import indeksKepuasanState from '@/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan';
 import { toast } from 'react-toastify';
 
@@ -74,23 +74,39 @@ function EditResponden() {
     state.update.id = id;
     state.update.form = { ...formData }; // <-- sinkronisasi manual
     await state.update.submit();
-    router.push('/admin/ppid/ikm-desa-darmasaba/responden')
+    router.push('/admin/landing-page/indeks-kepuasan-masyarakat/responden')
   }
 
   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 Responden</Title>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Edit Responden
+        </Title>
+      </Group>
+
+      <Paper
+        withBorder
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+      >
+        <Stack gap="md">
           <TextInput
-            label="Nama"
+            label={
+              <Text fw="bold" fz="sm" mb={4}>
+                Nama Responden
+              </Text>
+            }
             type='text'
-            placeholder="masukkan nama"
+            placeholder="Masukkan nama responden"
             value={formData.name}
             onChange={(val) => {
               setFormData({
@@ -98,9 +114,15 @@ function EditResponden() {
                 name: val.currentTarget.value
               })
             }}
+            radius="md"
+            required
           />
           <TextInput
-            label="Tanggal"
+            label={
+              <Text fw="bold" fz="sm" mb={4}>
+                Tanggal
+              </Text>
+            }
             type="date"
             placeholder='Pilih tanggal'
             value={formData.tanggal ? new Date(formData.tanggal).toISOString().split('T')[0] : ''}
@@ -111,32 +133,43 @@ function EditResponden() {
                 tanggal: selectedDate,
               });
             }}
+            radius="md"
+            required
           />
           <Select
-            key={"jenisKelamin"}
-            label={<Text fw="bold" fz="sm">Jenis Kelamin</Text>}
+            key="jenisKelamin"
+            label={
+              <Text fw="bold" fz="sm" mb={4}>
+                Jenis Kelamin
+              </Text>
+            }
             placeholder="Pilih jenis kelamin"
             value={formData.jenisKelaminId}
             onChange={(val) => setFormData({ ...formData, jenisKelaminId: val || "" })}
             data={
               (indeksKepuasanState.jenisKelaminResponden.findMany.data || [])
-                .filter(Boolean) // Hapus null/undefined
+                .filter(Boolean)
                 .map((v) => ({
                   value: v.id || '',
                   label: typeof v.name === 'string' ? v.name : 'Tanpa Nama'
                 }))
             }
-            disabled={indeksKepuasanState.jenisKelaminResponden.findMany.loading} // ✅ disable saat loading
+            disabled={indeksKepuasanState.jenisKelaminResponden.findMany.loading}
             clearable
             searchable
             required
+            radius="md"
             error={!formData.jenisKelaminId ? "Pilih jenis kelamin" : undefined}
           />
           <Select
-            key={"rating"}
+            key="rating"
             value={formData.ratingId}
             onChange={(val) => setFormData({ ...formData, ratingId: val || "" })}
-            label={<Text fw={"bold"} fz={"sm"}>Rating</Text>}
+            label={
+              <Text fw="bold" fz="sm" mb={4}>
+                Rating
+              </Text>
+            }
             placeholder='Pilih rating'
             data={
               (indeksKepuasanState.pilihanRatingResponden.findMany.data || [])
@@ -150,6 +183,7 @@ function EditResponden() {
             clearable
             searchable
             required
+            radius="md"
             error={!formData.ratingId ? "Pilih rating" : undefined}
           />
 
@@ -173,14 +207,24 @@ function EditResponden() {
             required
             error={!formData.kelompokUmurId ? "Pilih kelompok umur" : undefined}
           />
-
-          <Button
-            mt={10}
-            bg={colors['blue-button']}
-            onClick={handleSubmit}
-          >
-            Submit
-          </Button>
+          
+          <Group justify="flex-end" mt="md">
+            <Button 
+              variant="light" 
+              color="red" 
+              onClick={() => router.back()}
+            >
+              Batal
+            </Button>
+            <Button 
+              leftSection={<IconDeviceFloppy size={20} />}
+              onClick={handleSubmit} 
+              loading={state.update.loading}
+              color={colors['blue-button']}
+            >
+              Simpan
+            </Button>
+          </Group>
         </Stack>
       </Paper>
     </Box>

src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/responden/[id]/page.tsx

@@ -3,10 +3,10 @@
 import { ModalKonfirmasiHapus } from "@/app/admin/(dashboard)/_com/modalKonfirmasiHapus"
 import indeksKepuasanState from "@/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan"
 import colors from "@/con/colors"
-import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from "@mantine/core"
+import { Box, Button, Group, Paper, Skeleton, Stack, Text, Tooltip } from "@mantine/core"
 import { useShallowEffect } from "@mantine/hooks"
-import { IconArrowBack, IconEdit, IconX } from "@tabler/icons-react"
-import { useRouter, useParams } from "next/navigation"
+import { IconArrowBack, IconEdit, IconTrash } from "@tabler/icons-react"
+import { useParams, useRouter } from "next/navigation"
 import { useState } from "react"
 import { useProxy } from "valtio/utils"
 
@@ -38,67 +38,89 @@ export default function DetailResponden() {
     )
   }
   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 Responden</Text>
+    <Box py={10}>
+      <Button
+        variant="subtle"
+        onClick={() => router.back()}
+        leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
+        mb={15}
+      >
+        Kembali
+      </Button>
 
-          <Paper bg={colors['BG-trans']} p={'md'}>
-            <Stack gap={"xs"}>
+      <Paper
+        withBorder
+        w={{ base: "100%", md: "60%" }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+      >
+        <Stack gap="md">
+          <Text fz="2xl" fw="bold" c={colors['blue-button']}>
+            Detail Responden
+          </Text>
+
+          <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
+            <Stack gap="sm">
               <Box>
-                <Text fz={"lg"} fw={"bold"}>Nama Responden</Text>
-                <Text fz={"lg"}>{stateDetail.findUnique.data?.name}</Text>
+                <Text fz="lg" fw="bold">Nama Responden</Text>
+                <Text fz="md" c="dimmed">{stateDetail.findUnique.data?.name || '-'}</Text>
               </Box>
               <Box>
-                <Text fz={"lg"} fw={"bold"}>Tanggal</Text>
-                <Text fz={"lg"}>{
+                <Text fz="lg" fw="bold">Tanggal</Text>
+                <Text fz="md" c="dimmed">{
                   stateDetail.findUnique.data?.tanggal
                     ? new Date(stateDetail.findUnique.data.tanggal).toLocaleDateString('id-ID')
                     : '-'
                 }</Text>
               </Box>
               <Box>
-                <Text fz={"lg"} fw={"bold"}>Jenis Kelamin</Text>
-                <Text fz={"lg"}>{stateDetail.findUnique.data?.jenisKelamin?.name}</Text>
+                <Text fz="lg" fw="bold">Jenis Kelamin</Text>
+                <Text fz="md" c="dimmed">{stateDetail.findUnique.data?.jenisKelamin?.name || '-'}</Text>
               </Box>
               <Box>
-                <Text fz={"lg"} fw={"bold"}>Rating</Text>
-                <Text fz={"lg"}>{stateDetail.findUnique.data?.rating?.name}</Text>
+                <Text fz="lg" fw="bold">Rating</Text>
+                <Text fz="md" c="dimmed">{stateDetail.findUnique.data?.rating?.name || '-'}</Text>
               </Box>
               <Box>
-                <Text fz={"lg"} fw={"bold"}>Kelompok Umur</Text>
-                <Text fz={"lg"}>{stateDetail.findUnique.data?.kelompokUmur?.name}</Text>
+                <Text fz="lg" fw="bold">Kelompok Umur</Text>
+                <Text fz="md" c="dimmed">{stateDetail.findUnique.data?.kelompokUmur?.name || '-'}</Text>
               </Box>
-              <Flex gap={"xs"} mt={10}>
-                <Button
-                  onClick={() => {
-                    if (stateDetail.findUnique.data) {
-                      setSelectedId(stateDetail.findUnique.data.id);
-                      setModalHapus(true);
-                    }
-                  }}
-                  disabled={stateDetail.delete.loading || !stateDetail.findUnique.data}
-                  color={"red"}
-                >
-                  <IconX size={20} />
-                </Button>
-                <Button
-                  onClick={() => {
-                    if (stateDetail.findUnique.data) {
-                      router.push(`/admin/ppid/ikm-desa-darmasaba/responden/${stateDetail.findUnique.data.id}/edit`);
-                    }
-                  }}
-                  disabled={!stateDetail.findUnique.data}
-                  color={"green"}
-                >
-                  <IconEdit size={20} />
-                </Button>
-              </Flex>
+              
+              <Group gap="sm" mt="md">
+                <Tooltip label="Hapus Responden" withArrow position="top">
+                  <Button
+                    color="red"
+                    variant="light"
+                    onClick={() => {
+                      if (stateDetail.findUnique.data) {
+                        setSelectedId(stateDetail.findUnique.data.id);
+                        setModalHapus(true);
+                      }
+                    }}
+                    disabled={stateDetail.delete.loading || !stateDetail.findUnique.data}
+                    leftSection={<IconTrash size={20} />}
+                  >
+                    Hapus
+                  </Button>
+                </Tooltip>
+                <Tooltip label="Edit Responden" withArrow position="top">
+                  <Button
+                    color="green"
+                    variant="light"
+                    onClick={() => {
+                      if (stateDetail.findUnique.data) {
+                        router.push(`/admin/landing-page/indeks-kepuasan-masyarakat/responden/${stateDetail.findUnique.data.id}/edit`);
+                      }
+                    }}
+                    disabled={!stateDetail.findUnique.data}
+                    leftSection={<IconEdit size={20} />}
+                  >
+                    Edit
+                  </Button>
+                </Tooltip>
+              </Group>
             </Stack>
           </Paper>
         </Stack>

src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/responden/page.tsx

@@ -1,22 +1,37 @@
 'use client';
-import colors from '@/con/colors';
-import { Box, Button, Center, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
-import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
 import { useState } from 'react';
+import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
+import { useShallowEffect } from '@mantine/hooks';
+import {
+  Box,
+  Button,
+  Center,
+  Pagination,
+  Paper,
+  Skeleton,
+  Stack,
+  Table,
+  TableTbody,
+  TableTd,
+  TableTh,
+  TableThead,
+  TableTr,
+  Text,
+  Title,
+} from '@mantine/core';
+import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
 import HeaderSearch from '../../../_com/header';
 import indeksKepuasanState from '../../../_state/landing-page/indeks-kepuasan';
 
 function Responden() {
-  const [search, setSearch] = useState("");
+  const [search, setSearch] = useState('');
   return (
     <Box>
       <HeaderSearch
-        title='Responden'
-        placeholder='pencarian'
-        searchIcon={<IconSearch size={20} />}
+        title="Data Responden"
+        placeholder="Cari nama responden..."
+        searchIcon={<IconSearch size={18} />}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
       />
@@ -34,84 +49,99 @@ function ListResponden({ search }: ListRespondenProps) {
   const router = useRouter();
   const { data, page, totalPages, loading, load } = state.findMany;
 
-
   useShallowEffect(() => {
-    load(page, 10)
+    load(page, 10);
   }, [page]);
 
-
-  const filteredData = (data || []).filter(item => {
+  const filteredData = (data || []).filter((item) => {
     const keyword = search.toLowerCase();
-    return (
-      item.name.toLowerCase().includes(keyword)
-    );
+    return item.name.toLowerCase().includes(keyword);
   });
 
   if (loading || !data) {
     return (
-      <Stack py={10}>
-        <Skeleton height={730} />
+      <Stack py="md">
+        <Skeleton height={650} radius="lg" />
       </Stack>
     );
   }
+
   if (data.length === 0) {
     return (
-      <Box py={10}>
-        <Paper p="md">
-          <Stack>
-            <Title>Responden</Title>
-            <Table striped withTableBorder withRowBorders>
-              <TableThead>
-                <TableTr>
-                  <TableTh>No</TableTh>
-                  <TableTh>Nama</TableTh>
-                  <TableTh>Tanggal</TableTh>
-                  <TableTh>Jenis Kelamin</TableTh>
-                  <TableTh>Detail</TableTh>
-                </TableTr>
-              </TableThead>
-            </Table>
-            <Text ta="center">Tidak ada data berdasarkan jenis kelamin responden yang tersedia</Text>
+      <Box py="md">
+        <Paper p="lg" radius="lg" shadow="md" withBorder>
+          <Stack align="center" gap="sm">
+            <Title order={4}>Data Responden</Title>
+            <Text c="dimmed" ta="center">
+              Belum ada data responden yang tersedia
+            </Text>
           </Stack>
         </Paper>
-      </Box >
+      </Box>
     );
   }
 
   return (
     <Box>
-      <Stack gap="xs">
-        <Paper bg={colors['white-1']} p="md" h={{ base: 730, md: 650 }}>
-          <Title mb={10} order={3}>List Responden</Title>
-          <Table striped withTableBorder withRowBorders>
+      <Stack gap="md">
+        <Paper p="lg" radius="lg" shadow="md" withBorder>
+          <Title order={4} mb="sm">
+            Daftar Responden
+          </Title>
+          <Table
+            striped
+            highlightOnHover
+            withTableBorder
+            withRowBorders
+            verticalSpacing="sm"
+          >
             <TableThead>
               <TableTr>
                 <TableTh style={{ width: '5%', textAlign: 'center' }}>No</TableTh>
-                <TableTh style={{ width: '20%', textAlign: 'center' }}>Nama</TableTh>
+                <TableTh style={{ width: '25%', textAlign: 'center' }}>Nama</TableTh>
                 <TableTh style={{ width: '20%', textAlign: 'center' }}>Tanggal</TableTh>
                 <TableTh style={{ width: '20%', textAlign: 'center' }}>Jenis Kelamin</TableTh>
-                <TableTh style={{ width: '15%', textAlign: 'center' }}>Detail</TableTh>
+                <TableTh style={{ width: '15%', textAlign: 'center' }}>Aksi</TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
               {filteredData.length === 0 ? (
                 <TableTr>
-                  <TableTd colSpan={6}>
-                    <Text ta='center' c='dimmed'>Belum ada data responden</Text>
+                  <TableTd colSpan={5}>
+                    <Text ta="center" c="dimmed">
+                      Tidak ditemukan data dengan kata kunci pencarian
+                    </Text>
                   </TableTd>
                 </TableTr>
               ) : (
                 filteredData.map((item, index) => (
                   <TableTr key={item.id}>
-                    <TableTd style={{ width: '5%', textAlign: 'center' }}>{index + 1}</TableTd>
-                    <TableTd style={{ width: '20%', textAlign: 'center' }}>{item.name}</TableTd>
-                    <TableTd style={{ width: '20%', textAlign: 'center' }}>{item.tanggal
-                      ? new Date(item.tanggal).toLocaleDateString('id-ID')
-                      : '-'}</TableTd>
-                    <TableTd style={{ width: '20%', textAlign: 'center' }}>{item.jenisKelamin.name}</TableTd>
-                    <TableTd style={{ width: '15%', textAlign: 'center' }}>
-                      <Button color='green' onClick={() => router.push(`/admin/ppid/ikm-desa-darmasaba/responden/${item.id}`)}>
-                        <IconDeviceImac size={20} />
+                    <TableTd ta="center">{index + 1}</TableTd>
+                    <TableTd ta="center">{item.name}</TableTd>
+                    <TableTd ta="center">
+                      {item.tanggal
+                        ? new Date(item.tanggal).toLocaleDateString('id-ID', {
+                            day: '2-digit',
+                            month: 'long',
+                            year: 'numeric',
+                          })
+                        : '-'}
+                    </TableTd>
+                    <TableTd ta="center">{item.jenisKelamin.name}</TableTd>
+                    <TableTd ta="center">
+                      <Button
+                        size="xs"
+                        radius="md"
+                        variant="light"
+                        color="blue"
+                        leftSection={<IconDeviceImac size={16} />}
+                        onClick={() =>
+                          router.push(
+                            `/admin/landing-page/indeks-kepuasan-masyarakat/responden/${item.id}`
+                          )
+                        }
+                      >
+                        Detail
                       </Button>
                     </TableTd>
                   </TableTr>
@@ -123,22 +153,19 @@ function ListResponden({ search }: ListRespondenProps) {
         <Center>
           <Pagination
             value={page}
+            total={totalPages}
             onChange={(newPage) => {
               load(newPage, 10);
-              window.scrollTo(0, 0);
+              window.scrollTo({ top: 0, behavior: 'smooth' });
             }}
-            total={totalPages}
+            size="md"
+            radius="md"
             mt="md"
-            mb="md"
           />
         </Center>
-
-       
       </Stack>
     </Box>
   );
 }
 
 export default Responden;
-
-