Fix QC Kak Inno Mobile Done
FIx QC Kak Ayu Mobile Admin Done Fix Tampilan Admin Mobile Device All Menu Done
This commit is contained in:
@@ -100,7 +100,7 @@ function EditPengajar() {
|
||||
};
|
||||
|
||||
return (
|
||||
<Box px={{ base: 'sm', md: 'lg' }} py="md">
|
||||
<Box px={{ base: 0, md: 'lg' }} py="xs">
|
||||
{/* Header Back + Title */}
|
||||
<Group mb="md">
|
||||
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
|
||||
|
||||
@@ -41,7 +41,7 @@ function DetailPengajar() {
|
||||
const data = detailState.findUnique.data;
|
||||
|
||||
return (
|
||||
<Box py={10}>
|
||||
<Box px={{ base: 0, md: 'lg' }} py="xs">
|
||||
<Button
|
||||
variant="subtle"
|
||||
onClick={() => router.back()}
|
||||
@@ -53,7 +53,7 @@ function DetailPengajar() {
|
||||
|
||||
<Paper
|
||||
withBorder
|
||||
w={{ base: "100%", md: "60%" }}
|
||||
w={{ base: "100%", md: "70%" }}
|
||||
bg={colors['white-1']}
|
||||
p="lg"
|
||||
radius="md"
|
||||
|
||||
@@ -57,7 +57,7 @@ function CreatePengajar() {
|
||||
};
|
||||
|
||||
return (
|
||||
<Box px={{ base: 'sm', md: 'lg' }} py="md">
|
||||
<Box px={{ base: 0, md: 'lg' }} py="xs">
|
||||
{/* Header Back + Title */}
|
||||
<Group mb="md">
|
||||
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
|
||||
|
||||
@@ -11,6 +11,7 @@ import { useEffect, useState } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import HeaderSearch from '../../../_com/header';
|
||||
import infoSekolahPaud from '../../../_state/pendidikan/info-sekolah-paud';
|
||||
import { useDebouncedValue } from '@mantine/hooks';
|
||||
|
||||
function Pengajar() {
|
||||
const [search, setSearch] = useState('');
|
||||
@@ -29,8 +30,9 @@ function Pengajar() {
|
||||
}
|
||||
|
||||
function ListPengajar({ search }: { search: string }) {
|
||||
const listState = useProxy(infoSekolahPaud.pengajar)
|
||||
const listState = useProxy(infoSekolahPaud.pengajar);
|
||||
const router = useRouter();
|
||||
const [debouncedSearch] = useDebouncedValue(search, 1000);
|
||||
|
||||
const {
|
||||
data,
|
||||
@@ -41,24 +43,26 @@ function ListPengajar({ search }: { search: string }) {
|
||||
} = listState.findMany;
|
||||
|
||||
useEffect(() => {
|
||||
load(page, 10, search)
|
||||
}, [page, search])
|
||||
load(page, 10, debouncedSearch);
|
||||
}, [page, debouncedSearch]);
|
||||
|
||||
const filteredData = data || []
|
||||
const filteredData = data || [];
|
||||
|
||||
if (loading || !data) {
|
||||
return (
|
||||
<Stack py={10}>
|
||||
<Stack py={{ base: 'sm', md: 'md' }}>
|
||||
<Skeleton h={500} radius="md" />
|
||||
</Stack>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
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}>Daftar Pengajar</Title>
|
||||
<Box py={{ base: 'sm', md: 'md' }}>
|
||||
<Paper withBorder bg={colors['white-1']} p={{ base: 'sm', md: 'lg' }} shadow="md" radius="md">
|
||||
<Group justify="space-between" mb={{ base: 'sm', md: 'md' }}>
|
||||
<Title order={4} lh={1.2}>
|
||||
Daftar Pengajar
|
||||
</Title>
|
||||
<Button
|
||||
leftSection={<IconPlus size={18} />}
|
||||
color="blue"
|
||||
@@ -69,13 +73,33 @@ function ListPengajar({ search }: { search: string }) {
|
||||
</Button>
|
||||
</Group>
|
||||
|
||||
<Box style={{ overflowX: 'auto' }}>
|
||||
<Table highlightOnHover striped withRowBorders style={{ minWidth: '700px' }}>
|
||||
{/* Desktop Table */}
|
||||
<Box visibleFrom="md">
|
||||
<Table
|
||||
highlightOnHover
|
||||
miw={0}
|
||||
style={{
|
||||
tableLayout: 'fixed',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<TableThead>
|
||||
<TableTr>
|
||||
<TableTh style={{ width: '35%' }}>Nama Pengajar</TableTh>
|
||||
<TableTh style={{ width: '35%' }}>Lembaga</TableTh>
|
||||
<TableTh style={{ width: '20%' }}>Aksi</TableTh>
|
||||
<TableTh style={{ width: '35%' }}>
|
||||
<Text fz="sm" fw={600} lh={1.4} ta="left">
|
||||
Nama Pengajar
|
||||
</Text>
|
||||
</TableTh>
|
||||
<TableTh style={{ width: '35%' }}>
|
||||
<Text fz="sm" fw={600} lh={1.4} ta="left">
|
||||
Lembaga
|
||||
</Text>
|
||||
</TableTh>
|
||||
<TableTh style={{ width: '30%' }}>
|
||||
<Text fz="sm" fw={600} lh={1.4} ta="left">
|
||||
Aksi
|
||||
</Text>
|
||||
</TableTh>
|
||||
</TableTr>
|
||||
</TableThead>
|
||||
<TableTbody>
|
||||
@@ -83,10 +107,14 @@ function ListPengajar({ search }: { search: string }) {
|
||||
filteredData.map((item) => (
|
||||
<TableTr key={item.id}>
|
||||
<TableTd>
|
||||
<Text fw={500} truncate="end" lineClamp={1}>{item.nama}</Text>
|
||||
<Text fz="md" fw={500} lh={1.5} truncate="end" lineClamp={1}>
|
||||
{item.nama}
|
||||
</Text>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Text truncate="end" fz="sm" c="dimmed">{item.lembaga.nama}</Text>
|
||||
<Text fz="md" fw={500} lh={1.5} c="gray.7" truncate="end">
|
||||
{item.lembaga.nama}
|
||||
</Text>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Button
|
||||
@@ -95,7 +123,9 @@ function ListPengajar({ search }: { search: string }) {
|
||||
onClick={() => router.push(`/admin/pendidikan/info-sekolah/pengajar/${item.id}`)}
|
||||
>
|
||||
<IconDeviceImacCog size={20} />
|
||||
<Text ml={5}>Detail</Text>
|
||||
<Text ml={5} fz="sm" fw={500} lh={1.4}>
|
||||
Detail
|
||||
</Text>
|
||||
</Button>
|
||||
</TableTd>
|
||||
</TableTr>
|
||||
@@ -103,8 +133,10 @@ function ListPengajar({ search }: { search: string }) {
|
||||
) : (
|
||||
<TableTr>
|
||||
<TableTd colSpan={3}>
|
||||
<Center py={20}>
|
||||
<Text c="dimmed">Tidak ada data pengajar yang cocok</Text>
|
||||
<Center py={{ base: 'md', md: 'lg' }}>
|
||||
<Text c="gray.6" fz="sm" lh={1.4}>
|
||||
Tidak ada data pengajar yang cocok
|
||||
</Text>
|
||||
</Center>
|
||||
</TableTd>
|
||||
</TableTr>
|
||||
@@ -112,14 +144,63 @@ function ListPengajar({ search }: { search: string }) {
|
||||
</TableTbody>
|
||||
</Table>
|
||||
</Box>
|
||||
|
||||
{/* Mobile Card View */}
|
||||
<Box hiddenFrom="md">
|
||||
<Stack gap="xs">
|
||||
{filteredData.length > 0 ? (
|
||||
filteredData.map((item) => (
|
||||
<Paper key={item.id} withBorder radius="md" p="sm">
|
||||
<Stack gap={"xs"}>
|
||||
<Box>
|
||||
<Text fz="sm" fw={600} lh={1.4}>
|
||||
Nama Pengajar
|
||||
</Text>
|
||||
<Text fz="sm" fw={500} lh={1.4}>
|
||||
{item.nama}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fz="sm" fw={600} lh={1.4}>
|
||||
Lembaga
|
||||
</Text>
|
||||
<Text fz="sm" fw={500} lh={1.4} c="gray.7">
|
||||
{item.lembaga.nama}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Button
|
||||
fullWidth
|
||||
variant="light"
|
||||
color="blue"
|
||||
onClick={() => router.push(`/admin/pendidikan/info-sekolah/pengajar/${item.id}`)}
|
||||
>
|
||||
<IconDeviceImacCog size={18} />
|
||||
<Text ml={5} fz="sm" fw={500} lh={1.4}>
|
||||
Detail
|
||||
</Text>
|
||||
</Button>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Paper>
|
||||
))
|
||||
) : (
|
||||
<Center py="md">
|
||||
<Text c="gray.6" fz="sm" lh={1.4}>
|
||||
Tidak ada data pengajar yang cocok
|
||||
</Text>
|
||||
</Center>
|
||||
)}
|
||||
</Stack>
|
||||
</Box>
|
||||
</Paper>
|
||||
|
||||
<Center>
|
||||
<Pagination
|
||||
value={page}
|
||||
onChange={(newPage) => {
|
||||
load(newPage, 10, search)
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' })
|
||||
load(newPage, 10, search);
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}}
|
||||
total={totalPages}
|
||||
mt="md"
|
||||
@@ -129,7 +210,7 @@ function ListPengajar({ search }: { search: string }) {
|
||||
/>
|
||||
</Center>
|
||||
</Box>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default Pengajar;
|
||||
export default Pengajar;
|
||||
Reference in New Issue
Block a user