wibu/desa-darmasaba
1
0
Fork 0
Code Issues Pull Requests 5 Actions Packages Projects Releases Wiki Activity

Fix Tampilan User & Admin Menu Inovasi & Lingkungan

Browse Source
This commit is contained in:
nico
2025-09-22 17:15:11 +08:00
parent 0fc47c28ff
commit b5c044df6e
40 changed files with 3114 additions and 1667 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/page.tsx
View File

@@ -2,21 +2,23 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import colors from '@/con/colors';
import { Box, Button, Center, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
import {
IconChartLine, IconChristmasTreeFilled, IconClipboardTextFilled, IconDeviceImac, IconDroplet, IconHome, IconHomeEco, IconLeaf,
Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack,
Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text,
Title,
Tooltip
} from '@mantine/core';
import {
IconChartLine, IconChristmasTreeFilled, IconClipboardTextFilled,
IconDeviceImacCog, IconDroplet, IconHome, IconHomeEco, IconLeaf,
IconPlus,
IconRecycle, IconScale, IconSearch, IconShieldFilled, IconTent,
IconTrashFilled,
IconTree,
IconTrendingUp,
IconTrophy,
IconTruckFilled
IconTrashFilled, IconTree, IconTrendingUp, IconTrophy, IconTruckFilled
} from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import React, { useEffect, useState } from 'react';
import { useProxy } from 'valtio/utils';
import HeaderSearch from '../../_com/header';
import JudulList from '../../_com/judulList';
import dataLingkunganDesaState from '../../_state/lingkungan/data-lingkungan-desa';
@@ -26,7 +28,7 @@ function DataLingkunganDesa() {
<Box>
<HeaderSearch
title='Data Lingkungan Desa'
placeholder='pencarian'
placeholder='Cari data lingkungan...'
searchIcon={<IconSearch size={20} />}
value={search}
onChange={(e) => setSearch(e.currentTarget.value)}
@@ -64,76 +66,98 @@ function ListDataLingkunganDesa({ search }: { search: string }) {
rumah: IconHome,
pohon: IconTree,
air: IconDroplet
};
if (loading || !data) {
return (
<Stack py={10}>
<Skeleton height={650} />
<Skeleton height={600} radius="md" />
</Stack>
);
}
if (data.length === 0) {
return (
<Box py={10}>
<Paper p="md" >
<Paper withBorder shadow="md" radius="md" p="lg" bg={colors['white-1']}>
<Stack>
<JudulList
title='List Data Lingkungan Desa'
href='/admin/lingkungan/data-lingkungan-desa/create'
/>
<Table striped withTableBorder withRowBorders>
<Group justify="space-between" mb="md">
<Title order={4}>Daftar Data Lingkungan Desa</Title>
<Tooltip label="Tambah Data Lingkungan Desa" withArrow>
<Button leftSection={<IconPlus size={18} />} color="blue" variant="light" onClick={() => router.push('/admin/lingkungan/data-lingkungan-desa/create')}>
Tambah Baru
</Button>
</Tooltip>
</Group>
<Table highlightOnHover>
<TableThead>
<TableTr>
<TableTh>No</TableTh>
<TableTh>Nama Data Lingkungan Desa</TableTh>
<TableTh>Jumlah Data Lingkungan Desa</TableTh>
<TableTh>Jumlah</TableTh>
<TableTh>Ikon</TableTh>
<TableTh>Detail</TableTh>
</TableTr>
</TableThead>
</Table>
<Text ta="center">Tidak ada data lingkungan desa yang tersedia</Text>
<Center py={20}>
<Text c="dimmed">Tidak ada data lingkungan desa yang tersedia</Text>
</Center>
</Stack>
</Paper>
</Box >
);
}
return (
<Box py={10}>
<Paper bg={colors['white-1']} p={'md'} h={{ base: 'auto', md: 650 }}>
<JudulList
title='List Data Lingkungan Desa'
href='/admin/lingkungan/data-lingkungan-desa/create'
/>
<Box style={{ overflowY: 'auto' }}>
<Table striped withTableBorder withRowBorders>
<Paper withBorder shadow="md" radius="md" bg={colors['white-1']} p="lg">
<Group justify="space-between" mb="md">
<Title order={4}>Daftar Data Lingkungan Desa</Title>
<Tooltip label="Tambah Data Lingkungan Desa" withArrow>
<Button leftSection={<IconPlus size={18} />} color="blue" variant="light" onClick={() => router.push('/admin/lingkungan/data-lingkungan/create')}>
Tambah Baru
</Button>
</Tooltip>
</Group>
<Box style={{ overflowX: 'auto' }}>
<Table highlightOnHover>
<TableThead>
<TableTr>
<TableTh style={{ width: '5%', textAlign: 'center' }}>No</TableTh>
<TableTh style={{ width: '20%' }}>Nama Data Lingkungan Desa</TableTh>
<TableTh style={{ width: '35%' }}>Jumlah Data Lingkungan Desa</TableTh>
<TableTh style={{ width: '10%' }}>Ikon</TableTh>
<TableTh style={{ width: '15%', textAlign: 'center' }}>Detail</TableTh>
<TableTh style={{ width: '25%' }}>Nama Data</TableTh>
<TableTh style={{ width: '35%' }}>Jumlah</TableTh>
<TableTh style={{ width: '15%' }}>Ikon</TableTh>
<TableTh style={{ width: '20%', textAlign: 'center' }}>Detail</TableTh>
</TableTr>
</TableThead>
<TableTbody>
{filteredData.map((item, index) => (
<TableTr key={item.id}>
<TableTd style={{ width: '5%', textAlign: 'center' }}>{index + 1}</TableTd>
<TableTd style={{ width: '20%', wordWrap: 'break-word' }}>{item.name}</TableTd>
<TableTd style={{ width: '35%', wordWrap: 'break-word' }}>± {item.jumlah}</TableTd>
<TableTd style={{ width: '10%' }}>
<TableTd style={{ textAlign: 'center' }}>{index + 1}</TableTd>
<TableTd>
<Text fw={500} truncate="end" lineClamp={1}>{item.name}</Text>
</TableTd>
<TableTd>
<Text fz="sm" c="dimmed">± {item.jumlah}</Text>
</TableTd>
<TableTd>
{iconMap[item.icon] && (
<Box title={item.icon}>
{React.createElement(iconMap[item.icon], { size: 24 })}
{React.createElement(iconMap[item.icon], { size: 22 })}
</Box>
)}
</TableTd>
<TableTd style={{ width: '15%', textAlign: 'center' }}>
<Button onClick={() => router.push(`/admin/lingkungan/data-lingkungan-desa/${item.id}`)}>
<IconDeviceImac size={25} />
<TableTd style={{ textAlign: 'center' }}>
<Button
size="xs"
radius="md"
variant="light"
color="blue"
leftSection={<IconDeviceImacCog size={16} />}
onClick={() => router.push(`/admin/lingkungan/data-lingkungan-desa/${item.id}`)}
>
Detail
</Button>
</TableTd>
</TableTr>
@@ -147,11 +171,13 @@ function ListDataLingkunganDesa({ search }: { search: string }) {
value={page}
onChange={(newPage) => {
load(newPage, 10);
window.scrollTo(0, 0);
window.scrollTo({ top: 0, behavior: 'smooth' });
}}
total={totalPages}
mt="md"
mb="md"
color="blue"
radius="md"
/>
</Center>
</Box>