Fix QC Kak Inno 22 Des
Fix QC Kak Ayu 22 Des Fix Tampilan Admin Mobile Device Menu Ekonomi Fix Search -> useDebounced Menu Ekonomi
This commit is contained in:
@@ -118,7 +118,7 @@ export default function EditDemografiPekerjaan() {
|
||||
};
|
||||
|
||||
return (
|
||||
<Box px={{ base: 'sm', md: 'lg' }} py="md">
|
||||
<Box px={{ base: 0, md: 'xs' }} py="xs">
|
||||
{/* Header */}
|
||||
<Group mb="md">
|
||||
<Button
|
||||
|
||||
@@ -55,7 +55,7 @@ function CreateDemografiPekerjaan() {
|
||||
};
|
||||
|
||||
return (
|
||||
<Box px={{ base: 'sm', md: 'lg' }} py="md">
|
||||
<Box px={{ base: 0, md: 'xs' }} py="xs">
|
||||
{/* Header */}
|
||||
<Group mb="md">
|
||||
<Button
|
||||
|
||||
@@ -106,38 +106,52 @@ function ListDemografiPekerjaan({ search }: { search: string }) {
|
||||
}
|
||||
|
||||
return (
|
||||
<Box py={10}>
|
||||
<Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
|
||||
<Group justify="space-between" mb="md">
|
||||
<Title order={4}>List Demografi Pekerjaan</Title>
|
||||
<Box py={{ base: 'sm', md: 'md' }}>
|
||||
<Paper withBorder bg={colors['white-1']} p={{ base: 'md', md: 'lg' }} shadow="md" radius="md">
|
||||
<Group justify="space-between" mb={{ base: 'sm', md: 'md' }}>
|
||||
<Title
|
||||
order={4}
|
||||
lh={{ base: 1.2, md: 1.15 }}
|
||||
>
|
||||
List Demografi Pekerjaan
|
||||
</Title>
|
||||
<Button
|
||||
leftSection={<IconPlus size={18} />}
|
||||
color="blue"
|
||||
variant="light"
|
||||
onClick={() => router.push('/admin/ekonomi/demografi-pekerjaan/create')}
|
||||
fz={{ base: 'sm', md: 'md' }}
|
||||
>
|
||||
Tambah Baru
|
||||
</Button>
|
||||
</Group>
|
||||
|
||||
<Box style={{ overflowX: 'auto' }}>
|
||||
<Table highlightOnHover>
|
||||
{/* Desktop Table */}
|
||||
<Box visibleFrom="md">
|
||||
<Table
|
||||
highlightOnHover
|
||||
miw={0}
|
||||
style={{
|
||||
tableLayout: 'fixed',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<TableThead>
|
||||
<TableTr>
|
||||
<TableTh style={{ minWidth: 200 }}>Pekerjaan</TableTh>
|
||||
<TableTh style={{ minWidth: 200 }}>Laki - Laki</TableTh>
|
||||
<TableTh style={{ minWidth: 200 }}>Perempuan</TableTh>
|
||||
<TableTh>Edit</TableTh>
|
||||
<TableTh>Hapus</TableTh>
|
||||
<TableTh style={{ width: '40%' }}>Pekerjaan</TableTh>
|
||||
<TableTh style={{ width: '20%' }}>Laki - Laki</TableTh>
|
||||
<TableTh style={{ width: '20%' }}>Perempuan</TableTh>
|
||||
<TableTh style={{ width: '10%' }}>Edit</TableTh>
|
||||
<TableTh style={{ width: '10%' }}>Hapus</TableTh>
|
||||
</TableTr>
|
||||
</TableThead>
|
||||
<TableTbody>
|
||||
{filteredData.length > 0 ? (
|
||||
filteredData.map((item) => (
|
||||
<TableTr key={item.id}>
|
||||
<TableTd style={{ minWidth: 200 }}>{item.pekerjaan}</TableTd>
|
||||
<TableTd style={{ minWidth: 200 }}>{item.lakiLaki}</TableTd>
|
||||
<TableTd style={{ minWidth: 200 }}>{item.perempuan}</TableTd>
|
||||
<TableTd>{item.pekerjaan}</TableTd>
|
||||
<TableTd>{item.lakiLaki}</TableTd>
|
||||
<TableTd>{item.perempuan}</TableTd>
|
||||
<TableTd>
|
||||
<Button
|
||||
variant="light"
|
||||
@@ -145,8 +159,11 @@ function ListDemografiPekerjaan({ search }: { search: string }) {
|
||||
onClick={() =>
|
||||
router.push(`/admin/ekonomi/demografi-pekerjaan/${item.id}`)
|
||||
}
|
||||
fz="sm"
|
||||
px="xs"
|
||||
py="xs"
|
||||
>
|
||||
<IconEdit size={18} />
|
||||
<IconEdit size={16} />
|
||||
</Button>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
@@ -158,17 +175,22 @@ function ListDemografiPekerjaan({ search }: { search: string }) {
|
||||
setSelectedId(item.id);
|
||||
setModalHapus(true);
|
||||
}}
|
||||
fz="sm"
|
||||
px="xs"
|
||||
py="xs"
|
||||
>
|
||||
<IconTrash size={18} />
|
||||
<IconTrash size={16} />
|
||||
</Button>
|
||||
</TableTd>
|
||||
</TableTr>
|
||||
))
|
||||
) : (
|
||||
<TableTr>
|
||||
<TableTd colSpan={4}>
|
||||
<TableTd colSpan={5}>
|
||||
<Center py={20}>
|
||||
<Text color="dimmed">Tidak ada data demografi pekerjaan yang cocok</Text>
|
||||
<Text c="dimmed" fz="sm" lh={1.4}>
|
||||
Tidak ada data demografi pekerjaan yang cocok
|
||||
</Text>
|
||||
</Center>
|
||||
</TableTd>
|
||||
</TableTr>
|
||||
@@ -176,6 +198,78 @@ function ListDemografiPekerjaan({ search }: { search: string }) {
|
||||
</TableTbody>
|
||||
</Table>
|
||||
</Box>
|
||||
|
||||
{/* Mobile Card */}
|
||||
<Box hiddenFrom="md">
|
||||
<Stack gap="xs">
|
||||
{filteredData.length > 0 ? (
|
||||
filteredData.map((item) => (
|
||||
<Paper key={item.id} withBorder p="sm" radius="sm">
|
||||
<Stack gap={"xs"}>
|
||||
<Box>
|
||||
<Text fz="sm" fw={600} lh={1.4}>
|
||||
Pekerjaan
|
||||
</Text>
|
||||
<Text fz="sm" fw={500} lh={1.4}>
|
||||
{item.pekerjaan}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fz="sm" fw={600} lh={1.4}>
|
||||
Laki - Laki
|
||||
</Text>
|
||||
<Text fz="sm" fw={500} lh={1.4}>
|
||||
{item.lakiLaki}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fz="sm" fw={600} lh={1.4}>
|
||||
Perempuan
|
||||
</Text>
|
||||
<Text fz="sm" fw={500} lh={1.4}>
|
||||
{item.perempuan}
|
||||
</Text>
|
||||
</Box>
|
||||
<Group justify="flex-end" gap="xs">
|
||||
<Button
|
||||
variant="light"
|
||||
color="green"
|
||||
onClick={() =>
|
||||
router.push(`/admin/ekonomi/demografi-pekerjaan/${item.id}`)
|
||||
}
|
||||
fz="xs"
|
||||
px="xs"
|
||||
py="xs"
|
||||
>
|
||||
<IconEdit size={14} />
|
||||
</Button>
|
||||
<Button
|
||||
variant="light"
|
||||
color="red"
|
||||
disabled={stateDemografi.delete.loading}
|
||||
onClick={() => {
|
||||
setSelectedId(item.id);
|
||||
setModalHapus(true);
|
||||
}}
|
||||
fz="xs"
|
||||
px="xs"
|
||||
py="xs"
|
||||
>
|
||||
<IconTrash size={14} />
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
))
|
||||
) : (
|
||||
<Center py={20}>
|
||||
<Text c="dimmed" fz="sm" lh={1.4}>
|
||||
Tidak ada data demografi pekerjaan yang cocok
|
||||
</Text>
|
||||
</Center>
|
||||
)}
|
||||
</Stack>
|
||||
</Box>
|
||||
</Paper>
|
||||
|
||||
{/* Pagination */}
|
||||
@@ -195,10 +289,13 @@ function ListDemografiPekerjaan({ search }: { search: string }) {
|
||||
</Center>
|
||||
|
||||
{/* Chart */}
|
||||
<Box mt={30} style={{ width: '100%', minHeight: 400 }}>
|
||||
<Paper bg={colors['white-1']} p="md" radius="md" withBorder>
|
||||
<Stack gap={"xs"}>
|
||||
<Title pb={10} order={4}>
|
||||
<Box mt={{ base: 'lg', md: 'xl' }}>
|
||||
<Paper bg={colors['white-1']} p={{ base: 'md', md: 'lg' }} radius="md" withBorder>
|
||||
<Stack gap="xs">
|
||||
<Title
|
||||
order={4}
|
||||
lh={{ base: 1.2, md: 1.15 }}
|
||||
>
|
||||
Grafik Demografi Pekerjaan
|
||||
</Title>
|
||||
{mounted && chartData.length > 0 ? (
|
||||
@@ -213,17 +310,23 @@ function ListDemografiPekerjaan({ search }: { search: string }) {
|
||||
]}
|
||||
/>
|
||||
) : (
|
||||
<Text c="dimmed">Belum ada data untuk ditampilkan dalam grafik</Text>
|
||||
<Text c="dimmed" fz={{ base: 'sm', md: 'md' }} lh={1.4}>
|
||||
Belum ada data untuk ditampilkan dalam grafik
|
||||
</Text>
|
||||
)}
|
||||
<Box py={10}>
|
||||
<Group justify='center'>
|
||||
<Flex align="center" gap={10}>
|
||||
<Box bg="#5082EE" w={20} h={20} />
|
||||
<Text>Laki - Laki</Text>
|
||||
<Box py={{ base: 'sm', md: 'md' }}>
|
||||
<Group justify="center" gap='md'>
|
||||
<Flex align="center" gap={8}>
|
||||
<Box bg="#5082EE" w={16} h={16} />
|
||||
<Text fz={{ base: 'xs', md: 'sm' }} lh={1.4}>
|
||||
Laki - Laki
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex align="center" gap={10}>
|
||||
<Box bg="#6EDF9C" w={20} h={20} />
|
||||
<Text>Perempuan</Text>
|
||||
<Flex align="center" gap={8}>
|
||||
<Box bg="#6EDF9C" w={16} h={16} />
|
||||
<Text fz={{ base: 'xs', md: 'sm' }} lh={1.4}>
|
||||
Perempuan
|
||||
</Text>
|
||||
</Flex>
|
||||
</Group>
|
||||
</Box>
|
||||
@@ -242,4 +345,4 @@ function ListDemografiPekerjaan({ search }: { search: string }) {
|
||||
);
|
||||
}
|
||||
|
||||
export default DemografiPekerjaan;
|
||||
export default DemografiPekerjaan;
|
||||
Reference in New Issue
Block a user