Fix Table Admin Preview Desktop

Seeder Menu Kesehatan
This commit is contained in:
2026-01-13 11:45:55 +08:00
parent 903dc74cca
commit 184854d273
115 changed files with 1508 additions and 695 deletions

View File

@@ -74,8 +74,10 @@ function ListSdgsDesa({ search }: { search: string }) {
</Group>
{/* Desktop Table */}
<Box visibleFrom="md">
<Table highlightOnHover striped verticalSpacing="sm">
<Box visibleFrom="md" style={{ overflowX: 'auto' }}>
<Table highlightOnHover
layout="fixed" // 🔥 PENTING
withColumnBorders={false} striped verticalSpacing="sm">
<TableThead>
<TableTr>
<TableTh style={{ width: '60%' }}>

View File

@@ -66,7 +66,7 @@ function ListAPBDes({ search }: { search: string }) {
return (
<Box py={{ base: 'md', md: 'lg' }}>
{/* Desktop Table */}
<Box visibleFrom="md">
<Box visibleFrom="md" style={{ overflowX: 'auto' }}>
<Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
<Group justify="space-between" mb="md">
<Title order={4} size="lg" lh={1.2}>
@@ -83,7 +83,9 @@ function ListAPBDes({ search }: { search: string }) {
</Group>
<Box>
<Table highlightOnHover miw={0}>
<Table highlightOnHover
layout="fixed" // 🔥 PENTING
withColumnBorders={false} miw={0}>
<TableThead>
<TableTr>
<TableTh fz="md" fw={600} ta="left" w="25%">

View File

@@ -123,7 +123,9 @@ function ListKategoriKegiatan({ search }: { search: string }) {
// Desktop table
const renderDesktopTable = () => (
<Box>
<Table highlightOnHover striped verticalSpacing="sm" miw={300}>
<Table highlightOnHover
layout="fixed" // 🔥 PENTING
withColumnBorders={false} striped verticalSpacing="sm" miw={300}>
<TableThead>
<TableTr>
<TableTh>
@@ -208,7 +210,7 @@ function ListKategoriKegiatan({ search }: { search: string }) {
</Button>
</Group>
<Box visibleFrom="md">{renderDesktopTable()}</Box>
<Box visibleFrom="md" style={{ overflowX: 'auto' }}>{renderDesktopTable()}</Box>
<Box hiddenFrom="md">{renderMobileCards()}</Box>
</Paper>

View File

@@ -83,7 +83,7 @@ function ListDesaAntiKorupsi({ search }: { search: string }) {
</Group>
{/* Desktop Table */}
<Box visibleFrom="md">
<Box visibleFrom="md" style={{ overflowX: 'auto' }}>
<Table
striped
highlightOnHover

View File

@@ -85,7 +85,7 @@ function ListResponden({ search }: ListRespondenProps) {
<Box>
<Stack gap={'lg'}>
{/* Desktop Table */}
<Box visibleFrom="md">
<Box visibleFrom="md" style={{ overflowX: 'auto' }}>
<Paper p="lg" radius="lg" shadow="md" withBorder>
<Title order={4} size="lg" mb="md" lh={1.2}>
Daftar Responden

View File

@@ -79,7 +79,7 @@ function ListKategoriPrestasi({ search }: { search: string }) {
Tambah Baru
</Button>
</Group>
<Box visibleFrom="md">
<Box visibleFrom="md" style={{ overflowX: 'auto' }}>
<Table verticalSpacing="sm" highlightOnHover>
<TableThead>
<TableTr>

View File

@@ -73,7 +73,9 @@ function ListPrestasi({ search }: { search: string }) {
{/* Desktop Table */}
<Box visibleFrom="md" style={{ overflowX: 'auto' }}>
<Table highlightOnHover striped verticalSpacing="sm" miw={800}>
<Table highlightOnHover
layout="fixed" // 🔥 PENTING
withColumnBorders={false} striped verticalSpacing="sm" miw={800}>
<TableThead>
<TableTr>
<TableTh>Nama Prestasi</TableTh>

View File

@@ -100,8 +100,10 @@ function ListMediaSosial({ search }: { search: string }) {
<Box>
{/* Desktop: Table | Mobile: Card-based vertical layout */}
<Box visibleFrom="md">
<Table highlightOnHover>
<Box visibleFrom="md" style={{ overflowX: 'auto' }}>
<Table highlightOnHover
layout="fixed" // 🔥 PENTING
withColumnBorders={false}>
<TableThead>
<TableTr>
<TableTh style={{ width: '25%' }}>

View File

@@ -13,7 +13,7 @@ function ProgramInovasi() {
const [search, setSearch] = useState("");
return (
<Box px={{base: 0, md: "md"}} py="lg">
<Box px={{ base: 0, md: "md" }} py="lg">
<HeaderSearch
title="Program Inovasi"
placeholder="Cari program inovasi..."
@@ -34,8 +34,8 @@ function ListProgramInovasi({ search }: { search: string }) {
const { data, page, totalPages, loading, load } = stateProgramInovasi.findMany;
useShallowEffect(() => {
load(page, 10, debouncedSearch);
}, [page, debouncedSearch]);
load(page, 10, debouncedSearch);
}, [page, debouncedSearch]);
const filteredData = data || [];
@@ -62,67 +62,67 @@ function ListProgramInovasi({ search }: { search: string }) {
Tambah Program
</Button>
</Group>
<Box visibleFrom='md'>
<Box style={{ overflowX: 'auto' }}>
<Table highlightOnHover striped verticalSpacing="sm">
<TableThead>
<Box visibleFrom='md' style={{ overflowX: 'auto' }}>
<Table highlightOnHover
layout="fixed" // 🔥 PENTING
withColumnBorders={false} striped verticalSpacing="sm">
<TableThead>
<TableTr>
<TableTh>Nama Program</TableTh>
<TableTh>Deskripsi</TableTh>
<TableTh>Link</TableTh>
<TableTh>Aksi</TableTh>
</TableTr>
</TableThead>
<TableTbody>
{filteredData.length === 0 ? (
<TableTr>
<TableTh>Nama Program</TableTh>
<TableTh>Deskripsi</TableTh>
<TableTh>Link</TableTh>
<TableTh>Aksi</TableTh>
<TableTd colSpan={4}>
<Center py={20}>
<Text color="dimmed">Belum ada data program inovasi</Text>
</Center>
</TableTd>
</TableTr>
</TableThead>
<TableTbody>
{filteredData.length === 0 ? (
<TableTr>
<TableTd colSpan={4}>
<Center py={20}>
<Text color="dimmed">Belum ada data program inovasi</Text>
</Center>
) : (
filteredData.map((item) => (
<TableTr key={item.id}>
<TableTd>
<Text fw={500}>{item.name}</Text>
</TableTd>
<TableTd style={{ maxWidth: 250 }}>
<Text fz="sm" lineClamp={1} dangerouslySetInnerHTML={{ __html: item.description || '-' }}></Text>
</TableTd>
<TableTd style={{ maxWidth: 250 }}>
<Tooltip label="Buka tautan program" position="top" withArrow>
<a
href={item.link}
target="_blank"
rel="noopener noreferrer"
style={{ color: colors['blue-button'], textDecoration: 'underline' }}
>
<Text truncate fz="sm">{item.link}</Text>
</a>
</Tooltip>
</TableTd>
<TableTd>
<Button
size="xs"
radius="md"
variant="light"
color="blue"
leftSection={<IconDeviceImacCog size={16} />}
onClick={() =>
router.push(`/admin/landing-page/profil/program-inovasi/${item.id}`)
}
>
Detail
</Button>
</TableTd>
</TableTr>
) : (
filteredData.map((item) => (
<TableTr key={item.id}>
<TableTd>
<Text fw={500}>{item.name}</Text>
</TableTd>
<TableTd style={{ maxWidth: 250 }}>
<Text fz="sm" lineClamp={1} dangerouslySetInnerHTML={{ __html: item.description || '-' }}></Text>
</TableTd>
<TableTd style={{ maxWidth: 250 }}>
<Tooltip label="Buka tautan program" position="top" withArrow>
<a
href={item.link}
target="_blank"
rel="noopener noreferrer"
style={{ color: colors['blue-button'], textDecoration: 'underline' }}
>
<Text truncate fz="sm">{item.link}</Text>
</a>
</Tooltip>
</TableTd>
<TableTd>
<Button
size="xs"
radius="md"
variant="light"
color="blue"
leftSection={<IconDeviceImacCog size={16} />}
onClick={() =>
router.push(`/admin/landing-page/profil/program-inovasi/${item.id}`)
}
>
Detail
</Button>
</TableTd>
</TableTr>
))
)}
</TableTbody>
</Table>
</Box>
))
)}
</TableTbody>
</Table>
</Box>
<Box hiddenFrom="md" pt={20}>
<Stack gap="sm">