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

Fix QC Kak Inno 22 Des

Browse Source 
Fix QC Kak Ayu 22 Des
Fix Tampilan Admin Mobile Device Menu Ekonomi
Fix Search -> useDebounced Menu Ekonomi
This commit is contained in:
nico
2025-12-23 17:18:36 +08:00
parent 29065cb3e2
commit f0f201c853
75 changed files with 3023 additions and 1177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/_lib/layoutTabs.tsx
View File

@@ -2,6 +2,7 @@
'use client'
import colors from '@/con/colors';
import {
Box,
ScrollArea,
Stack,
Tabs,
@@ -61,36 +62,76 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
radius="lg"
keepMounted={false}
>
<ScrollArea type="auto" offsetScrollbars>
<TabsList
p="sm"
style={{
background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
borderRadius: "1rem",
boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
display: "flex",
flexWrap: "nowrap",
gap: "0.5rem",
paddingInline: "0.5rem",
}}
<Box visibleFrom='md' pb={10}>
<ScrollArea type="auto" offsetScrollbars>
<TabsList
p="sm"
style={{
background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
borderRadius: "1rem",
boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
display: "flex",
flexWrap: "nowrap",
gap: "0.5rem",
paddingInline: "0.5rem", // ✅ biar nggak nempel ke tepi
}}
>
{tabs.map((tab, i) => (
<TabsTab
key={i}
value={tab.value}
leftSection={tab.icon}
style={{
fontWeight: 600,
fontSize: "0.9rem",
transition: "all 0.2s ease",
flexShrink: 0, // ✅ jangan mengecil aneh-aneh
}}
>
{tab.label}
</TabsTab>
))}
</TabsList>
</ScrollArea>
</Box>
<Box hiddenFrom='md' pb={10}>
<ScrollArea
type="auto"
offsetScrollbars={false}
w="100%"
>
{tabs.map((tab, i) => (
<TabsTab
key={i}
value={tab.value}
leftSection={tab.icon}
style={{
fontWeight: 600,
fontSize: "0.9rem",
transition: "all 0.2s ease",
flexShrink: 0,
}}
>
{tab.label}
</TabsTab>
))}
</TabsList>
</ScrollArea>
<TabsList
p="xs" // lebih kecil
style={{
background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
borderRadius: "1rem",
display: "flex",
flexWrap: "nowrap",
gap: "0.5rem",
width: "max-content", // ⬅️ kunci
maxWidth: "100%", // ⬅️ penting
}}
>
{tabs.map((tab, i) => (
<TabsTab
key={i}
value={tab.value}
leftSection={tab.icon}
style={{
fontWeight: 600,
fontSize: "0.9rem",
paddingInline: "0.75rem", // ⬅️ lebih ramping
flexShrink: 0, // ✅ jangan mengecil aneh-aneh
}}
>
{tab.label}
</TabsTab>
))}
</TabsList>
</ScrollArea>
</Box>
{tabs.map((tab, i) => (
<TabsPanel

22
src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/layout.tsx
View File

@@ -1,6 +1,28 @@
'use client'
import { usePathname } from "next/navigation";
import LayoutTabs from "./_lib/layoutTabs";
import { Box } from "@mantine/core";
export default function Layout({ children }: { children: React.ReactNode }) {
const pathname = usePathname();
// Contoh path:
// - /darmasaba/desa/berita/semua → panjang 5 → list
// - /darmasaba/desa/berita/Pemerintahan → panjang 5 → list
// - /darmasaba/desa/berita/Pemerintahan/123 → panjang 6 → detail
const segments = pathname.split('/').filter(Boolean);
const isDetailPage = segments.length >= 5;
if (isDetailPage) {
// Tampilkan tanpa tab menu
return (
<Box>
{children}
</Box>
);
}
return (
<LayoutTabs>
{children}

2
src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/[id]/page.tsx
View File

@@ -93,7 +93,7 @@ function EditGrafikBerdasarkanPendidikan() {
};
return (
<Box px={{ base: 'sm', md: 'lg' }} py="md">
<Box px={{ base: 0, md: 'lg' }} py="xs">
<Group mb="md">
<Button
variant="subtle"

2
src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/create/page.tsx
View File

@@ -51,7 +51,7 @@ function CreateGrafikBerdasarkanPendidikan() {
};
return (
<Box px={{ base: 'sm', md: 'lg' }} py="md">
<Box px={{ base: 0, md: 'lg' }} py="xs">
<Group mb="md">
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
<IconArrowBack color={colors['blue-button']} size={24} />

198
src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/page.tsx
View File

@@ -7,6 +7,7 @@ import {
Button,
Center,
Flex,
Group,
Pagination,
Paper,
Skeleton,
@@ -20,7 +21,7 @@ import {
Text,
Title
} from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
import { IconEdit, IconPlus, IconSearch, IconTrash } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
@@ -51,6 +52,7 @@ function ListGrafikBerdasarkanPendidikan({ search }: { search: string }) {
const [modalHapus, setModalHapus] = useState(false);
const [selectedId, setSelectedId] = useState<string | null>(null);
const router = useRouter();
const [debouncedSearch] = useDebouncedValue(search, 1000);
const handleDelete = async () => {
if (selectedId) {
@@ -64,8 +66,8 @@ function ListGrafikBerdasarkanPendidikan({ search }: { search: string }) {
const { data, page, totalPages, loading, load } = stategrafik.findMany;
useShallowEffect(() => {
load(page, 10, search);
}, [page, search]);
load(page, 10, debouncedSearch);
}, [page, debouncedSearch]);
useEffect(() => {
if (stategrafik.findMany.data) {
@@ -103,18 +105,20 @@ function ListGrafikBerdasarkanPendidikan({ search }: { search: string }) {
if (loading || !data) {
return (
<Stack py={10}>
<Stack py={{ base: 'sm', md: 'lg' }}>
<Skeleton height={500} radius="md" />
</Stack>
);
}
return (
<Box py={10}>
{/* Table Data */}
<Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
<Flex justify="space-between" align="center" mb="md">
<Title order={4}>List Pengangguran Berdasarkan Pendidikan</Title>
<Stack py={{ base: 'sm', md: 'lg' }} gap='md'>
{/* Section: List Table */}
<Paper withBorder bg={colors['white-1']} p={{ base: 'sm', md: 'lg' }} shadow="md" radius="md">
<Flex visibleFrom='md' justify="space-between" align="center" mb={{ base: 'sm', md: 'md' }}>
<Title order={4} lh={1.2}>
List Pengangguran Berdasarkan Pendidikan
</Title>
<Button
leftSection={<IconPlus size={18} />}
color="blue"
@@ -129,17 +133,43 @@ function ListGrafikBerdasarkanPendidikan({ search }: { search: string }) {
</Button>
</Flex>
<Box style={{ overflowX: 'auto' }}>
<Table highlightOnHover>
<Group hiddenFrom='md' align="center" mb={{ base: 'sm', md: 'md' }}>
<Title order={4} lh={1.2}>
List Pengangguran Berdasarkan Pendidikan
</Title>
<Button
leftSection={<IconPlus size={18} />}
color="blue"
variant="light"
onClick={() =>
router.push(
'/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/create',
)
}
>
Tambah Baru
</Button>
</Group>
{/* Desktop Table */}
<Box visibleFrom="md">
<Table
highlightOnHover
miw={0}
style={{
tableLayout: 'fixed',
width: '100%',
}}
>
<TableThead>
<TableTr>
<TableTh>SD</TableTh>
<TableTh>SMP</TableTh>
<TableTh>SMA</TableTh>
<TableTh>D3</TableTh>
<TableTh>S1</TableTh>
<TableTh>Edit</TableTh>
<TableTh>Delete</TableTh>
<TableTh style={{ width: '16%' }}>SD</TableTh>
<TableTh style={{ width: '16%' }}>SMP</TableTh>
<TableTh style={{ width: '16%' }}>SMA</TableTh>
<TableTh style={{ width: '16%' }}>D3</TableTh>
<TableTh style={{ width: '16%' }}>S1</TableTh>
<TableTh style={{ width: '10%' }}>Edit</TableTh>
<TableTh style={{ width: '10%' }}>Delete</TableTh>
</TableTr>
</TableThead>
<TableTbody>
@@ -147,7 +177,7 @@ function ListGrafikBerdasarkanPendidikan({ search }: { search: string }) {
<TableTr>
<TableTd colSpan={7}>
<Center py={20}>
<Text color="dimmed">
<Text c="dimmed" fz="sm" lh={1.4}>
Belum ada data grafik responden
</Text>
</Center>
@@ -156,11 +186,31 @@ function ListGrafikBerdasarkanPendidikan({ search }: { search: string }) {
) : (
filteredData.map((item) => (
<TableTr key={item.id}>
<TableTd>{item.SD}</TableTd>
<TableTd>{item.SMP}</TableTd>
<TableTd>{item.SMA}</TableTd>
<TableTd>{item.D3}</TableTd>
<TableTd>{item.S1}</TableTd>
<TableTd>
<Text fz="md" fw={500} lh={1.5}>
{item.SD}
</Text>
</TableTd>
<TableTd>
<Text fz="md" fw={500} lh={1.5}>
{item.SMP}
</Text>
</TableTd>
<TableTd>
<Text fz="md" fw={500} lh={1.5}>
{item.SMA}
</Text>
</TableTd>
<TableTd>
<Text fz="md" fw={500} lh={1.5}>
{item.D3}
</Text>
</TableTd>
<TableTd>
<Text fz="md" fw={500} lh={1.5}>
{item.S1}
</Text>
</TableTd>
<TableTd>
<Button
color="green"
@@ -193,6 +243,92 @@ function ListGrafikBerdasarkanPendidikan({ search }: { search: string }) {
</TableTbody>
</Table>
</Box>
{/* Mobile Cards */}
<Box hiddenFrom="md">
{filteredData.length === 0 ? (
<Center py="sm">
<Text c="dimmed" fz="sm" lh={1.4}>
Belum ada data grafik responden
</Text>
</Center>
) : (
<Stack gap="sm">
{filteredData.map((item) => (
<Paper key={item.id} withBorder p="sm" radius="md">
<Stack gap={"xs"}>
<Box>
<Text fz="sm" fw={600} lh={1.4}>
SD
</Text>
<Text fz="sm" fw={500} lh={1.4}>
{item.SD}
</Text>
</Box>
<Box>
<Text fz="sm" fw={600} lh={1.4}>
SMP
</Text>
<Text fz="sm" fw={500} lh={1.4}>
{item.SMP}
</Text>
</Box>
<Box>
<Text fz="sm" fw={600} lh={1.4}>
SMA
</Text>
<Text fz="sm" fw={500} lh={1.4}>
{item.SMA}
</Text>
</Box>
<Box>
<Text fz="sm" fw={600} lh={1.4}>
D3
</Text>
<Text fz="sm" fw={500} lh={1.4}>
{item.D3}
</Text>
</Box>
<Box>
<Text fz="sm" fw={600} lh={1.4}>
S1
</Text>
<Text fz="sm" fw={500} lh={1.4}>
{item.S1}
</Text>
</Box>
<Flex gap="xs" mt="xs">
<Button
size="compact-sm"
color="green"
variant="light"
onClick={() =>
router.push(
`/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/${item.id}`,
)
}
>
<IconEdit size={16} />
</Button>
<Button
size="compact-sm"
color="red"
variant="light"
disabled={stategrafik.delete.loading}
onClick={() => {
setSelectedId(item.id);
setModalHapus(true);
}}
>
<IconTrash size={16} />
</Button>
</Flex>
</Stack>
</Paper>
))}
</Stack>
)}
</Box>
</Paper>
{/* Pagination */}
@@ -211,10 +347,10 @@ function ListGrafikBerdasarkanPendidikan({ search }: { search: string }) {
/>
</Center>
{/* Donut Chart */}
<Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md" mt="md">
<Stack>
<Title order={3} pb={10}>
{/* Section: Donut Chart */}
<Paper withBorder bg={colors['white-1']} p={{ base: 'sm', md: 'lg' }} shadow="md" radius="md">
<Stack gap="md">
<Title order={4} lh={1.2}>
Grafik Pengangguran Berdasarkan Pendidikan
</Title>
<Center>
@@ -228,7 +364,7 @@ function ListGrafikBerdasarkanPendidikan({ search }: { search: string }) {
thickness={40}
/>
) : (
<Text color="dimmed">
<Text c="dimmed" fz={{ base: 'xs', md: 'sm' }} lh={1.4}>
Belum ada data untuk ditampilkan dalam grafik
</Text>
)}
@@ -243,8 +379,8 @@ function ListGrafikBerdasarkanPendidikan({ search }: { search: string }) {
onConfirm={handleDelete}
text="Apakah anda yakin ingin menghapus grafik pengangguran berdasarkan pendidikan ini?"
/>
</Box>
</Stack>
);
}
export default GrafikBerdasarkanPendidikan;
export default GrafikBerdasarkanPendidikan;

2
src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/[id]/page.tsx
View File

@@ -106,7 +106,7 @@ function EditGrafikBerdasarkanUsiaKerjaYangMenganggur() {
};
return (
<Box px={{ base: 'sm', md: 'lg' }} py="md">
<Box px={{ base: 0, md: 'lg' }} py="xs">
<Group mb="md">
<Button
variant="subtle"

2
src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/create/page.tsx
View File

@@ -49,7 +49,7 @@ function CreateGrafikBerdasarkanUsiaKerjaYangMenganggur() {
};
return (
<Box px={{ base: 'sm', md: 'lg' }} py="md">
<Box px={{ base: 0, md: 'lg' }} py="xs">
{/* Header */}
<Group mb="md">
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">

170
src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/page.tsx
View File

@@ -1,11 +1,12 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
'use client'
'use client';
import colors from '@/con/colors';
import {
Box,
Button,
Center,
Flex,
Group,
Pagination,
Paper,
Skeleton,
@@ -19,7 +20,7 @@ import {
Text,
Title,
} from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
import { IconEdit, IconPlus, IconSearch, IconTrash } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
@@ -51,6 +52,7 @@ function ListGrafikBerdasarkanUsiaKerjaYangMenganggur({ search }: { search: stri
const [modalHapus, setModalHapus] = useState(false);
const [selectedId, setSelectedId] = useState<string | null>(null);
const router = useRouter();
const [debouncedSearch] = useDebouncedValue(search, 1000);
const handleDelete = async () => {
if (selectedId) {
@@ -64,8 +66,8 @@ function ListGrafikBerdasarkanUsiaKerjaYangMenganggur({ search }: { search: stri
const { data, page, totalPages, loading, load } = stategrafik.findMany;
useShallowEffect(() => {
load(page, 10, search);
}, [page, search]);
load(page, 10, debouncedSearch);
}, [page, debouncedSearch]);
useEffect(() => {
if (stategrafik.findMany.data) {
@@ -87,19 +89,21 @@ function ListGrafikBerdasarkanUsiaKerjaYangMenganggur({ search }: { search: stri
if (loading || !data) {
return (
<Stack py={10}>
<Stack py={{ base: 'sm', md: 'md' }}>
<Skeleton height={500} radius="md" />
</Stack>
);
}
return (
<Box py={10}>
{/* Table */}
<Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
<Stack>
<Flex justify="space-between" align="center" mb="md">
<Title order={4}>List Pengangguran Berdasarkan Usia Kerja</Title>
<Box py={{ base: 'sm', md: 'md' }}>
{/* Table - Desktop */}
<Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md" mb="lg">
<Stack gap="md">
<Flex justify="space-between" align="center" visibleFrom='md'>
<Title order={4} lh={1.2}>
List Pengangguran Berdasarkan Usia Kerja
</Title>
<Button
leftSection={<IconPlus size={18} />}
color="blue"
@@ -112,26 +116,58 @@ function ListGrafikBerdasarkanUsiaKerjaYangMenganggur({ search }: { search: stri
</Button>
</Flex>
<Box style={{ overflowX: 'auto' }}>
<Table highlightOnHover>
<Group align="center" hiddenFrom='md'>
<Title order={4} lh={1.2}>
List Pengangguran Berdasarkan Usia Kerja
</Title>
<Button
leftSection={<IconPlus size={18} />}
color="blue"
variant="light"
onClick={() =>
router.push('/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/create')
}
>
Tambah Baru
</Button>
</Group>
{/* Desktop Table */}
<Box visibleFrom="md">
<Table
highlightOnHover
miw={0}
style={{
tableLayout: 'fixed',
width: '100%',
}}
>
<TableThead>
<TableTr>
<TableTh>Usia 18-25</TableTh>
<TableTh>Usia 26-35</TableTh>
<TableTh>Usia 36-45</TableTh>
<TableTh>Usia 46+</TableTh>
<TableTh>Edit</TableTh>
<TableTh>Delete</TableTh>
<TableTh style={{ width: '20%' }}>Usia 18-25</TableTh>
<TableTh style={{ width: '20%' }}>Usia 26-35</TableTh>
<TableTh style={{ width: '20%' }}>Usia 36-45</TableTh>
<TableTh style={{ width: '20%' }}>Usia 46+</TableTh>
<TableTh style={{ width: '10%' }}>Edit</TableTh>
<TableTh style={{ width: '10%' }}>Delete</TableTh>
</TableTr>
</TableThead>
<TableTbody>
{filteredData.length > 0 ? (
filteredData.map((item) => (
<TableTr key={item.id}>
<TableTd>{item.usia18_25}</TableTd>
<TableTd>{item.usia26_35}</TableTd>
<TableTd>{item.usia36_45}</TableTd>
<TableTd>{item.usia46_keatas}</TableTd>
<TableTd fz="md" fw={500} lh={1.5}>
{item.usia18_25}
</TableTd>
<TableTd fz="md" fw={500} lh={1.5}>
{item.usia26_35}
</TableTd>
<TableTd fz="md" fw={500} lh={1.5}>
{item.usia36_45}
</TableTd>
<TableTd fz="md" fw={500} lh={1.5}>
{item.usia46_keatas}
</TableTd>
<TableTd>
<Button
color="green"
@@ -160,7 +196,9 @@ function ListGrafikBerdasarkanUsiaKerjaYangMenganggur({ search }: { search: stri
<TableTr>
<TableTd colSpan={6}>
<Center py={20}>
<Text color="dimmed">Belum ada data grafik responden</Text>
<Text c="dimmed" fz="sm" lh={1.4}>
Belum ada data grafik responden
</Text>
</Center>
</TableTd>
</TableTr>
@@ -168,6 +206,80 @@ function ListGrafikBerdasarkanUsiaKerjaYangMenganggur({ search }: { search: stri
</TableTbody>
</Table>
</Box>
{/* Mobile Card View */}
<Box hiddenFrom="md">
{filteredData.length > 0 ? (
<Stack gap="xs">
{filteredData.map((item) => (
<Paper key={item.id} withBorder p="sm" radius="sm">
<Stack gap={"xs"}>
<Box>
<Text fz="sm" fw={600} lh={1.4}>
Usia 18-25
</Text>
<Text fz="sm" fw={500} lh={1.4}>
{item.usia18_25}
</Text>
</Box>
<Box>
<Text fz="sm" fw={600} lh={1.4}>
Usia 26-35
</Text>
<Text fz="sm" fw={500} lh={1.4}>
{item.usia26_35}
</Text>
</Box>
<Box>
<Text fz="sm" fw={600} lh={1.4}>
Usia 36-45
</Text>
<Text fz="sm" fw={500} lh={1.4}>
{item.usia36_45}
</Text>
</Box>
<Box>
<Text fz="sm" fw={600} lh={1.4}>
Usia 46+
</Text>
<Text fz="sm" fw={500} lh={1.4}>
{item.usia46_keatas}
</Text>
</Box>
<Flex gap="xs" mt="xs">
<Button
size="xs"
color="green"
onClick={() =>
router.push(`/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/${item.id}`)
}
>
<IconEdit size={16} />
</Button>
<Button
size="xs"
color="red"
disabled={stategrafik.delete.loading}
onClick={() => {
setSelectedId(item.id);
setModalHapus(true);
}}
>
<IconTrash size={16} />
</Button>
</Flex>
</Stack>
</Paper>
))}
</Stack>
) : (
<Center py={20}>
<Text c="dimmed" fz="sm" lh={1.4}>
Belum ada data grafik responden
</Text>
</Center>
)}
</Box>
</Stack>
</Paper>
@@ -189,8 +301,8 @@ function ListGrafikBerdasarkanUsiaKerjaYangMenganggur({ search }: { search: stri
{/* Donut Chart */}
<Paper bg={colors['white-1']} p="md" mt="lg" withBorder radius="md">
<Stack>
<Title order={3} pb={10}>
<Stack gap="md">
<Title order={4} lh={1.2}>
Grafik Pengangguran Berdasarkan Usia Kerja
</Title>
{donutData.length > 0 ? (
@@ -205,7 +317,9 @@ function ListGrafikBerdasarkanUsiaKerjaYangMenganggur({ search }: { search: stri
/>
</Center>
) : (
<Text c="dimmed">Belum ada data untuk ditampilkan dalam grafik</Text>
<Text c="dimmed" fz={{ base: 'xs', md: 'sm' }} lh={1.4}>
Belum ada data untuk ditampilkan dalam grafik
</Text>
)}
</Stack>
</Paper>
@@ -221,4 +335,4 @@ function ListGrafikBerdasarkanUsiaKerjaYangMenganggur({ search }: { search: stri
);
}
export default GrafikBerdasarkanUsiaKerjaYangMenganggur;
export default GrafikBerdasarkanUsiaKerjaYangMenganggur;