Fix Table Admin Preview Desktop
Seeder Menu Kesehatan
This commit is contained in:
@@ -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%' }}>
|
||||
|
||||
@@ -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%">
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -83,7 +83,7 @@ function ListDesaAntiKorupsi({ search }: { search: string }) {
|
||||
</Group>
|
||||
|
||||
{/* Desktop Table */}
|
||||
<Box visibleFrom="md">
|
||||
<Box visibleFrom="md" style={{ overflowX: 'auto' }}>
|
||||
<Table
|
||||
striped
|
||||
highlightOnHover
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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%' }}>
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user