Fix Ui Admin & User to Mobile && QC Menu Landing Page, PPID, Desa

This commit is contained in:
2025-09-24 14:50:53 +08:00
parent b5c044df6e
commit 3e4a7a1c0a
47 changed files with 1778 additions and 502 deletions

View File

@@ -87,7 +87,9 @@ function ListAPBDes({ search }: { search: string }) {
<Text fw={500} truncate="end">{item.name}</Text>
</TableTd>
<TableTd>
<Text>Rp. {item.jumlah}</Text>
<Box w={150}>
<Text>Rp. {item.jumlah}</Text>
</Box>
</TableTd>
<TableTd>
{item.file?.link ? (

View File

@@ -93,7 +93,9 @@ function ListKategoriKegiatan({ search }: { search: string }) {
filteredData.map((item) => (
<TableTr key={item.id}>
<TableTd>
<Text fw={500}>{item.name}</Text>
<Box w={200}>
<Text fw={500} lineClamp={1}>{item.name}</Text>
</Box>
</TableTd>
<TableTd>
<Tooltip label="Edit" withArrow>

View File

@@ -98,9 +98,11 @@ function ListDesaAntiKorupsi({ search }: { search: string }) {
</Text>
</TableTd>
<TableTd style={{ width: '30%' }}>
<Text fz="sm" c="dimmed">
<Box w={200}>
<Text fz="sm" c="dimmed" lineClamp={1}>
{item.kategori?.name || '-'}
</Text>
</Box>
</TableTd>
<TableTd style={{ width: '20%', textAlign: 'center' }}>
<Button

View File

@@ -154,7 +154,7 @@ function Page() {
withLabels
withTooltip
labelsType="percent"
size={220}
size={180}
data={donutDataJenisKelamin}
/>
</Center>
@@ -185,7 +185,7 @@ function Page() {
withLabels
withTooltip
labelsType="percent"
size={220}
size={180}
data={donutDataRating}
/>
</Center>
@@ -216,7 +216,7 @@ function Page() {
withLabels
withTooltip
labelsType="percent"
size={220}
size={180}
data={donutDataKelompokUmur}
/>
</Center>

View File

@@ -88,66 +88,74 @@ function ListResponden({ search }: ListRespondenProps) {
<Title order={4} mb="sm">
Daftar Responden
</Title>
<Table
striped
highlightOnHover
withRowBorders
verticalSpacing="sm"
>
<TableThead>
<TableTr>
<TableTh style={{ width: '5%', textAlign: 'center' }}>No</TableTh>
<TableTh style={{ width: '25%', textAlign: 'center' }}>Nama</TableTh>
<TableTh style={{ width: '20%', textAlign: 'center' }}>Tanggal</TableTh>
<TableTh style={{ width: '20%', textAlign: 'center' }}>Jenis Kelamin</TableTh>
<TableTh style={{ width: '15%', textAlign: 'center' }}>Aksi</TableTh>
</TableTr>
</TableThead>
<TableTbody>
{filteredData.length === 0 ? (
<Box style={{ overflowX: 'auto' }}>
<Table
striped
highlightOnHover
withRowBorders
verticalSpacing="sm"
>
<TableThead>
<TableTr>
<TableTd colSpan={5}>
<Text ta="center" c="dimmed">
Tidak ditemukan data dengan kata kunci pencarian
</Text>
</TableTd>
<TableTh style={{ width: '5%', textAlign: 'center' }}>No</TableTh>
<TableTh style={{ width: '25%', textAlign: 'center' }}>Nama</TableTh>
<TableTh style={{ width: '20%', textAlign: 'center' }}>Tanggal</TableTh>
<TableTh style={{ width: '20%', textAlign: 'center' }}>Jenis Kelamin</TableTh>
<TableTh style={{ width: '15%', textAlign: 'center' }}>Aksi</TableTh>
</TableTr>
) : (
filteredData.map((item, index) => (
<TableTr key={item.id}>
<TableTd ta="center">{index + 1}</TableTd>
<TableTd ta="center">{item.name}</TableTd>
<TableTd ta="center">
{item.tanggal
? new Date(item.tanggal).toLocaleDateString('id-ID', {
</TableThead>
<TableTbody>
{filteredData.length === 0 ? (
<TableTr>
<TableTd colSpan={5}>
<Text ta="center" c="dimmed">
Tidak ditemukan data dengan kata kunci pencarian
</Text>
</TableTd>
</TableTr>
) : (
filteredData.map((item, index) => (
<TableTr key={item.id}>
<TableTd ta="center">{index + 1}</TableTd>
<TableTd ta="center">{item.name}</TableTd>
<TableTd ta="center">
<Box w={150}>
{item.tanggal
? new Date(item.tanggal).toLocaleDateString('id-ID', {
day: '2-digit',
month: 'long',
year: 'numeric',
})
: '-'}
</TableTd>
<TableTd ta="center">{item.jenisKelamin.name}</TableTd>
<TableTd ta="center">
<Button
size="xs"
radius="md"
variant="light"
color="blue"
leftSection={<IconDeviceImac size={16} />}
onClick={() =>
router.push(
`/admin/landing-page/indeks-kepuasan-masyarakat/responden/${item.id}`
)
}
>
Detail
</Button>
</TableTd>
</TableTr>
))
)}
</TableTbody>
</Table>
: '-'}
</Box>
</TableTd>
<TableTd ta="center">
<Box w={100}>
{item.jenisKelamin.name}
</Box>
</TableTd>
<TableTd ta="center">
<Button
size="xs"
radius="md"
variant="light"
color="blue"
leftSection={<IconDeviceImac size={16} />}
onClick={() =>
router.push(
`/admin/landing-page/indeks-kepuasan-masyarakat/responden/${item.id}`
)
}
>
Detail
</Button>
</TableTd>
</TableTr>
))
)}
</TableTbody>
</Table>
</Box>
</Paper>
<Center>
<Pagination

View File

@@ -96,7 +96,11 @@ function ListKategoriPrestasi({ search }: { search: string }) {
) : (
filteredData.map((item) => (
<TableTr key={item.id}>
<TableTd>{item.name}</TableTd>
<TableTd>
<Box w={200}>
<Text truncate="end" fz={"sm"}>{item.name}</Text>
</Box>
</TableTd>
<TableTd style={{ textAlign: 'center', width: '120px' }}>
<Tooltip label="Edit" withArrow position="top">
<Button

View File

@@ -78,9 +78,9 @@ function DetailPrestasiDesa() {
<Box>
<Text fz="lg" fw="bold">Deskripsi</Text>
<Box
fz="md"
c="dimmed"
<Box
fz="md"
c="dimmed"
dangerouslySetInnerHTML={{ __html: detailState.findUnique.data?.deskripsi || '-' }}
/>
</Box>
@@ -91,10 +91,11 @@ function DetailPrestasiDesa() {
<Image
src={detailState.findUnique.data.image.link}
alt={detailState.findUnique.data.name || 'Gambar Prestasi'}
w={300}
w="100%"
maw={300} // max width 300px
fit="contain"
style={{ borderRadius: '8px', border: '1px solid #e0e0e0' }}
loading='lazy'
loading="lazy"
/>
) : (
<Text fz="sm" c="dimmed">Tidak ada gambar</Text>

View File

@@ -104,7 +104,9 @@ function ListPrestasi({ search }: { search: string }) {
<Text lineClamp={1} fz="sm" c="dimmed" dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
</TableTd>
<TableTd style={{ width: '25%' }}>
<Text truncate="end" fz={"sm"}>{item.kategori?.name || 'Tidak ada kategori'}</Text>
<Box w={150}>
<Text truncate="end" fz={"sm"}>{item.kategori?.name || 'Tidak ada kategori'}</Text>
</Box>
</TableTd>
<TableTd style={{ width: '25%', textAlign: 'center' }}>
<Tooltip label="Kelola Prestasi" withArrow>

View File

@@ -51,8 +51,10 @@ function DetailMediaSosial() {
</Button>
<Paper
withBorder
w={{ base: "100%", md: "60%" }}
withBorder
w="100%"
maw={500} // <= tambahkan ini, biar tidak lebih dari 500px
mx="auto" // center di layar
bg={colors['white-1']}
p="lg"
radius="md"
@@ -70,9 +72,9 @@ function DetailMediaSosial() {
<Text fz="md" c="dimmed">{data.name || '-'}</Text>
</Box>
<Box>
<Box >
<Text fz="lg" fw="bold">Link / Nomor Telepon</Text>
<Text fz="md" c="dimmed">{data.iconUrl || '-'}</Text>
<Text fz="md" c="dimmed" style={{ wordBreak: "break-all", whiteSpace: "pre-wrap" }}>{data.iconUrl || '-'}</Text>
</Box>
<Box>
@@ -81,12 +83,14 @@ function DetailMediaSosial() {
<Image
src={data.image.link}
alt={data.name || 'Gambar Media Sosial'}
w={120}
h={120}
w="100%"
maw={120} // max width biar tidak keluar layar
h="auto"
radius="md"
fit="cover"
loading="lazy"
/>
) : (
<Text fz="sm" c="dimmed">Tidak ada gambar</Text>
)}

View File

@@ -224,7 +224,7 @@ function EditPejabatDesa() {
alt="Preview"
style={{
maxWidth: '100%',
maxHeight: '200px',
maxHeight: '150px',
objectFit: 'contain',
borderRadius: '8px',
border: '1px solid #ddd',

View File

@@ -72,7 +72,7 @@ function Page() {
<Image
pt={{ base: 0, md: 60 }}
src={item.image?.link || "/perbekel.png"}
w={{ base: 250, md: 350 }}
w={{ base: 150, md: 350 }}
alt="Foto Profil Pejabat"
radius="md"
onError={(e) => { e.currentTarget.src = "/perbekel.png"; }}
@@ -87,7 +87,7 @@ function Page() {
className="glass3"
style={{ mt: -30, boxShadow: '0 4px 20px rgba(0,0,0,0.15)' }}
>
<Text ta="center" c={colors['white-1']} fw="bolder" fz={{ base: "1.2rem", md: "1.6rem" }}>
<Text ta="center" c={colors['white-1']} fw="bolder" fz={{ base: "1rem", md: "1.6rem" }}>
{item.name}
</Text>
</Paper>

View File

@@ -1,6 +1,6 @@
'use client'
import colors from '@/con/colors';
import { Box, Button, Center, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip } from '@mantine/core';
import { Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
@@ -49,9 +49,7 @@ function ListProgramInovasi({ search }: { search: string }) {
return (
<Box py={15}>
<Paper bg={colors['white-1']} withBorder p="lg" radius="md" shadow="sm">
<Box mb="md" display="flex"
style={{ justifyContent: 'space-between', alignItems: 'center' }}
>
<Group justify='space-between'>
<Title order={4}>Daftar Program Inovasi</Title>
<Tooltip label="Tambah Program Inovasi" withArrow>
<Button
@@ -64,7 +62,7 @@ function ListProgramInovasi({ search }: { search: string }) {
Tambah Program
</Button>
</Tooltip>
</Box>
</Group>
<Box style={{ overflowX: 'auto' }}>
<Table highlightOnHover striped verticalSpacing="sm">
<TableThead>