wibu/desa-darmasaba
1
0
Fork 0
Code Issues Pull Requests 5 Actions Packages Projects Releases Wiki Activity

Fix konsisten font, menu landing page & PPID

Browse Source
This commit is contained in:
nico
2025-12-10 17:44:31 +08:00
parent 99c2c9c6d7
commit 242ea86f77
25 changed files with 1505 additions and 700 deletions
Download Patch File Download Diff File Expand all files Collapse all files

225
src/app/darmasaba/_com/main-page/kepuasan/index.tsx
View File

@@ -15,8 +15,6 @@ interface ChartDataItem {
label?: string;
}
function Kepuasan() {
const state = useProxy(indeksKepuasanState.responden);
const { data, loading } = state.findMany;
@@ -154,66 +152,88 @@ function Kepuasan() {
if (data.length === 0) {
return (
<Stack p="sm" my={"xs"}>
<Container w={{ base: "100%", md: "80%" }} p={"sm"}>
<Stack p="sm" my="xs">
<Container w={{ base: "100%", md: "80%" }} p="sm">
<Center>
<Text
<Title
order={2}
ta="center"
fz={{ base: '2rem', md: '2.8rem' }}
lh={{ base: 1.05, md: 1.04 }}
c={colors['blue-button']}
fw={800}
style={{ letterSpacing: '-0.5px' }}
>Indeks Kepuasan Masyarakat</Text>
>
Indeks Kepuasan Masyarakat
</Title>
</Center>
<Text ta={"center"} fz={{ base: "1rem", md: "1.3rem" }}>Ukur kebahagiaan warga, tingkatkan layanan desa! Dengan partisipasi aktif masyarakat, kami berkomitmen untuk terus memperbaiki layanan agar lebih transparan, efektif, dan sesuai dengan kebutuhan warga. Kepuasan Anda adalah prioritas utama kami dalam membangun desa yang lebih baik!</Text>
<Center mt={10}>
<Text
ta="center"
fz={{ base: "0.95rem", md: "1.25rem" }}
lh={{ base: 1.45, md: 1.5 }}
c="black"
mt="sm"
>
Ukur kebahagiaan warga, tingkatkan layanan desa! Dengan partisipasi aktif masyarakat, kami berkomitmen untuk terus memperbaiki layanan agar lebih transparan, efektif, dan sesuai dengan kebutuhan warga. Kepuasan Anda adalah prioritas utama kami dalam membangun desa yang lebih baik!
</Text>
<Center mt={12}>
<Button
radius={"lg"}
radius="lg"
onClick={open}
variant="gradient"
gradient={{ from: "#26667F", to: "#124170" }}
>Ajukan Responden</Button>
style={{ paddingLeft: 20, paddingRight: 20, fontWeight: 600 }}
>
<Text fz={{ base: "0.95rem", md: "1rem" }} ta="center" c="white">Ajukan Responden</Text>
</Button>
</Center>
</Container>
<Box px={"sm"}>
<Paper p={"lg"} bg={colors.Bg}>
<Paper p={"lg"}>
<Stack gap={"xs"}>
<Box px="sm">
<Paper p="lg" bg={colors.Bg}>
<Paper p="lg">
<Stack gap="xs">
<Flex
direction={{ base: "column", sm: "row" }}
justify="space-between"
align={{ base: "flex-start", sm: "center" }}
gap={{ base: "xs", sm: "md" }} // 👈 Tambahkan gap untuk memberi ruang
gap={{ base: "xs", sm: "md" }}
>
<Text
fw="bold"
fw={700}
ta={{ base: "center", sm: "left" }}
fz={{ base: "sm", sm: "md" }} // 👈 Atur ukuran font agar lebih proporsional di mobile
fz={{ base: "0.95rem", sm: "1rem" }}
lh={1.3}
>
Pelayanan Terhadap Publik Desa Darmasaba
</Text>
<Box
mt={{ base: "sm", sm: 0 }}
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-end', // 👈 Pastikan teks dan angka sejajar ke kanan
textAlign: 'right', // 👈 Agar teks rata kanan
alignItems: 'flex-end',
textAlign: 'right',
}}
>
<Text fz={{ base: "xs", sm: "sm" }} fw={"bold"} c={colors["blue-button"]}>
<Text fz={{ base: "0.8rem", sm: "0.95rem" }} fw={700} c={colors["blue-button"]} lh={1.2}>
Total Responden
</Text>
<Text
ta="end"
fz={{ base: "h2", sm: "h1" }} // 👈 Ukuran font lebih kecil di mobile
fw={"bold"}
fz={{ base: "1.6rem", sm: "2rem" }}
fw={800}
c={colors["blue-button"]}
lh={1.02}
>
{state.findMany.total.toLocaleString('id-ID')}
</Text>
</Box>
</Flex>
<Box style={{ overflowX: 'auto', width: '100%' }}>
<BarChart
h={300}
@@ -230,26 +250,20 @@ function Kepuasan() {
textAnchor: 'end',
fontSize: 12,
}}
// 👇 Tambahkan ini agar chart punya lebar minimum yang cukup untuk semua bar
style={{ minWidth: 'fit-content' }}
/>
</Box>
</Stack>
</Paper>
<Box py={"xl"}>
<SimpleGrid
cols={{ base: 1, sm: 2, lg: 3 }}
spacing="md"
verticalSpacing="md"
>
<Box py="xl">
<SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="md" verticalSpacing="md">
{/* Chart Jenis Kelamin */}
<Paper bg={colors['white-1']} p="md" radius="md">
<Stack>
<Title order={4}>Jenis Kelamin</Title>
<Title order={4} fz={{ base: "1rem", md: "1.1rem" }} lh={1.2}>Jenis Kelamin</Title>
{donutDataJenisKelamin.every(item => item.value === 0) ? (
<Text c="dimmed" ta="center" my="md">
Belum ada data untuk ditampilkan dalam grafik
</Text>
<Text c="dimmed" ta="center" my="md" fz="sm">Belum ada data untuk ditampilkan dalam grafik</Text>
) : (
<Paper p="md" radius="md" withBorder>
<Box style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
@@ -259,19 +273,20 @@ function Kepuasan() {
withTooltip
tooltipAnimationDuration={200}
withLabels
labelsPosition="inside" // 👈 ini yang penting!
labelsPosition="inside"
labelsType="percent"
withLabelsLine
size={isMobile ? 180 : 250} // 👈 kecilkan ukuran di mobile
size={isMobile ? 180 : 250}
data={donutDataJenisKelamin}
/>
</Center>
</Box>
<Stack gap="sm" mt="md">
{donutDataJenisKelamin.map((entry) => (
<Flex key={entry.name} gap="md" align="center">
<Box bg={entry.color} w={20} h={20} style={{ flexShrink: 0 }} />
<Text size="sm">{entry.name}: {entry.value}</Text>
<Text fz="sm" lh={1.25}>{entry.name}: {entry.value}</Text>
</Flex>
))}
</Stack>
@@ -284,11 +299,9 @@ function Kepuasan() {
{/* Chart Rating */}
<Paper bg={colors['white-1']} p="md" radius="md">
<Stack>
<Title order={4}>Ulasan</Title>
<Title order={4} fz={{ base: "1rem", md: "1.1rem" }} lh={1.2}>Ulasan</Title>
{donutDataRating.every(item => item.value === 0) ? (
<Text c="dimmed" ta="center" my="md">
Belum ada data untuk ditampilkan dalam grafik
</Text>
<Text c="dimmed" ta="center" my="md" fz="sm">Belum ada data untuk ditampilkan dalam grafik</Text>
) : (
<Paper p="md" radius="md" withBorder>
<Box style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
@@ -298,20 +311,21 @@ function Kepuasan() {
withTooltip
tooltipAnimationDuration={200}
withLabels
labelsPosition="inside" // 👈 ini yang penting!
labelsPosition="inside"
labelsType="percent"
withLabelsLine
size={isMobile ? 180 : 250} // 👈 kecilkan ukuran di mobile
size={isMobile ? 180 : 250}
data={donutDataRating}
/>
</Center>
</Box>
<Box mt="md" style={{ width: '100%' }}>
<SimpleGrid cols={2} spacing="xs" verticalSpacing="xs">
{donutDataRating.map((entry) => (
<Flex key={entry.name} gap="sm" align="center" style={{ overflow: 'hidden' }}>
<Box bg={entry.color} w={16} h={16} style={{ flexShrink: 0 }} />
<Text size="xs" lineClamp={1} style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
<Text fz="xs" lh={1.2} lineClamp={1} style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
{entry.name}: {entry.value}
</Text>
</Flex>
@@ -327,11 +341,9 @@ function Kepuasan() {
{/* Chart Kelompok Umur */}
<Paper bg={colors['white-1']} p="md" radius="md">
<Stack>
<Title order={4}>Umur</Title>
<Title order={4} fz={{ base: "1rem", md: "1.1rem" }} lh={1.2}>Umur</Title>
{donutDataKelompokUmur.every(item => item.value === 0) ? (
<Text c="dimmed" ta="center" my="md">
Belum ada data untuk ditampilkan dalam grafik
</Text>
<Text c="dimmed" ta="center" my="md" fz="sm">Belum ada data untuk ditampilkan dalam grafik</Text>
) : (
<Paper p="md" radius="md" withBorder>
<Box style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
@@ -341,20 +353,21 @@ function Kepuasan() {
withTooltip
tooltipAnimationDuration={200}
withLabels
labelsPosition="inside"// 👈 ini yang penting!
labelsPosition="inside"
labelsType="percent"
withLabelsLine
size={isMobile ? 180 : 250} // 👈 kecilkan ukuran di mobile
size={isMobile ? 180 : 250}
data={donutDataKelompokUmur}
/>
</Center>
</Box>
<Box mt="md" style={{ width: '100%' }}>
<SimpleGrid cols={2} spacing="xs" verticalSpacing="xs">
{donutDataKelompokUmur.map((entry) => (
<Flex key={entry.name} gap="sm" align="center" style={{ overflow: 'hidden' }}>
<Box bg={entry.color} w={16} h={16} style={{ flexShrink: 0 }} />
<Text size="xs" lineClamp={1} style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
<Text fz="xs" lh={1.2} lineClamp={1} style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
{entry.name}: {entry.value}
</Text>
</Flex>
@@ -366,17 +379,19 @@ function Kepuasan() {
)}
</Stack>
</Paper>
</SimpleGrid>
</Box>
</Paper>
</Box>
{/* Modal */}
<Modal opened={opened} onClose={close} title="Ajukan Responden" centered>
<Paper bg={colors['white-1']} p={'md'}>
<Paper bg={colors['white-1']} p="md">
<Stack>
<TextInput
label="Nama"
type='text'
type="text"
placeholder="Masukkan nama"
value={state.create.form.name}
onChange={(val) => {
@@ -450,8 +465,9 @@ function Kepuasan() {
mt={10}
bg={colors['blue-button']}
onClick={handleSubmit}
style={{ fontWeight: 700 }}
>
Submit
<Text fz="sm" ta="center" c="white">Submit</Text>
</Button>
</Stack>
</Paper>
@@ -459,62 +475,78 @@ function Kepuasan() {
</Stack>
);
}
return (
<Stack p={"sm"} my={"xs"}>
<Stack p="sm" my="xs">
<Container size="lg" px="sm">
<Center>
<Text
<Title
order={2}
ta="center"
fz={{ base: '2rem', md: '2.8rem' }}
lh={{ base: 1.05, md: 1.04 }}
c={colors['blue-button']}
fw={800}
style={{ letterSpacing: '-0.5px' }}
>Indeks Kepuasan Masyarakat</Text>
>
Indeks Kepuasan Masyarakat
</Title>
</Center>
<Text fz={{ base: "1.2rem", md: "1.4rem" }} ta={"center"}>Ukur kebahagiaan warga, tingkatkan layanan desa! Dengan partisipasi aktif masyarakat, kami berkomitmen untuk terus memperbaiki layanan agar lebih transparan, efektif, dan sesuai dengan kebutuhan warga. Kepuasan Anda adalah prioritas utama kami dalam membangun desa yang lebih baik!</Text>
<Center mt={10}>
<Button radius={"lg"} bg={colors["blue-button"]} onClick={open}>Ajukan Responden</Button>
<Text fz={{ base: "1rem", md: "1.25rem" }} ta="center" c="black" lh={1.5} mt="sm">
Ukur kebahagiaan warga, tingkatkan layanan desa! Dengan partisipasi aktif masyarakat, kami berkomitmen untuk terus memperbaiki layanan agar lebih transparan, efektif, dan sesuai dengan kebutuhan warga. Kepuasan Anda adalah prioritas utama kami dalam membangun desa yang lebih baik!
</Text>
<Center mt={12}>
<Button radius="lg" bg={colors["blue-button"]} onClick={open} style={{ paddingLeft: 20, paddingRight: 20, fontWeight: 600 }}>
<Text fz={{ base: "0.95rem", md: "1rem" }} ta="center" c="white">Ajukan Responden</Text>
</Button>
</Center>
</Container>
<Box px={"md"}>
<Paper p={"lg"} bg={colors.Bg}>
<Paper p={"lg"} >
<Stack gap={"xs"}>
<Box px="md">
<Paper p="lg" bg={colors.Bg}>
<Paper p="lg">
<Stack gap="xs">
<Flex
direction={{ base: "column", sm: "row" }}
justify="space-between"
align={{ base: "flex-start", sm: "center" }}
gap={{ base: "xs", sm: "md" }} // 👈 Tambahkan gap untuk memberi ruang
gap={{ base: "xs", sm: "md" }}
>
<Text
fw="bold"
fw={700}
ta={{ base: "center", sm: "left" }}
fz={{ base: "sm", sm: "md" }} // 👈 Atur ukuran font agar lebih proporsional di mobile
fz={{ base: "0.95rem", sm: "1rem" }}
lh={1.3}
>
Pelayanan Terhadap Publik Desa Darmasaba
</Text>
<Box
mt={{ base: "sm", sm: 0 }}
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-end', // 👈 Pastikan teks dan angka sejajar ke kanan
textAlign: 'right', // 👈 Agar teks rata kanan
alignItems: 'flex-end',
textAlign: 'right',
}}
>
<Text fz={{ base: "xs", sm: "sm" }} fw={"bold"} c={colors["blue-button"]}>
<Text fz={{ base: "0.8rem", sm: "0.95rem" }} fw={700} c={colors["blue-button"]} lh={1.2}>
Total Responden
</Text>
<Text
ta="end"
fz={{ base: "h2", sm: "h1" }} // 👈 Ukuran font lebih kecil di mobile
fw={"bold"}
fz={{ base: "1.6rem", sm: "2rem" }}
fw={800}
c={colors["blue-button"]}
lh={1.02}
>
{state.findMany.total.toLocaleString('id-ID')}
</Text>
</Box>
</Flex>
<Box style={{ overflowX: 'auto', width: '100%' }} pb={50}>
<BarChart
h={300}
@@ -536,23 +568,15 @@ function Kepuasan() {
</Box>
</Stack>
</Paper>
<Box py={"xl"}>
<SimpleGrid
cols={{
base: 1,
md: 1,
lg: 1,
xl: 3
}}
>
<Box py="xl">
<SimpleGrid cols={{ base: 1, md: 1, lg: 1, xl: 3 }}>
{/* Chart Jenis Kelamin */}
<Paper bg={colors['white-1']} p="md" radius="md">
<Stack>
<Title order={4}>Jenis Kelamin</Title>
<Title order={4} fz={{ base: "1rem", md: "1.1rem" }} lh={1.2}>Jenis Kelamin</Title>
{donutDataJenisKelamin.every(item => item.value === 0) ? (
<Text c="dimmed" ta="center" my="md">
Belum ada data untuk ditampilkan dalam grafik
</Text>
<Text c="dimmed" ta="center" my="md" fz="sm">Belum ada data untuk ditampilkan dalam grafik</Text>
) : (
<Paper p="md" radius="md" withBorder>
<Box style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
@@ -562,18 +586,18 @@ function Kepuasan() {
withLabels
withTooltip
labelsPosition="inside"
labelsType="percent"
size={200}
data={donutDataJenisKelamin}
/>
</Center>
</Box>
<Stack gap="sm" mt="md">
{donutDataJenisKelamin.map((entry) => (
<Flex key={entry.name} gap="md" align="center">
<Box bg={entry.color} w={20} h={20} style={{ flexShrink: 0 }} />
<Text size="sm">{entry.name}: {entry.value}</Text>
<Text fz="sm" lh={1.25}>{entry.name}: {entry.value}</Text>
</Flex>
))}
</Stack>
@@ -586,11 +610,9 @@ function Kepuasan() {
{/* Chart Rating */}
<Paper bg={colors['white-1']} p="md" radius="md">
<Stack>
<Title order={4}>Ulasan</Title>
<Title order={4} fz={{ base: "1rem", md: "1.1rem" }} lh={1.2}>Ulasan</Title>
{donutDataRating.every(item => item.value === 0) ? (
<Text c="dimmed" ta="center" my="md">
Belum ada data untuk ditampilkan dalam grafik
</Text>
<Text c="dimmed" ta="center" my="md" fz="sm">Belum ada data untuk ditampilkan dalam grafik</Text>
) : (
<Paper p="md" radius="md" withBorder>
<Box style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
@@ -600,7 +622,6 @@ function Kepuasan() {
withTooltip
tooltipAnimationDuration={200}
withLabels
labelsPosition="inside"
labelsType="percent"
withLabelsLine
@@ -609,12 +630,13 @@ function Kepuasan() {
/>
</Center>
</Box>
<Box mt="md" style={{ width: '100%' }}>
<SimpleGrid cols={2} spacing="xs" verticalSpacing="xs">
{donutDataRating.map((entry) => (
<Flex key={entry.name} gap="sm" align="center" style={{ overflow: 'hidden' }}>
<Box bg={entry.color} w={16} h={16} style={{ flexShrink: 0 }} />
<Text size="xs" lineClamp={1} style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
<Text fz="xs" lh={1.2} lineClamp={1} style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
{entry.name}: {entry.value}
</Text>
</Flex>
@@ -630,11 +652,9 @@ function Kepuasan() {
{/* Chart Kelompok Umur */}
<Paper bg={colors['white-1']} p="md" radius="md">
<Stack>
<Title order={4}>Umur</Title>
<Title order={4} fz={{ base: "1rem", md: "1.1rem" }} lh={1.2}>Umur</Title>
{donutDataKelompokUmur.every(item => item.value === 0) ? (
<Text c="dimmed" ta="center" my="md">
Belum ada data untuk ditampilkan dalam grafik
</Text>
<Text c="dimmed" ta="center" my="md" fz="sm">Belum ada data untuk ditampilkan dalam grafik</Text>
) : (
<Paper p="md" radius="md" withBorder>
<Box style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
@@ -644,7 +664,6 @@ function Kepuasan() {
withTooltip
tooltipAnimationDuration={200}
withLabels
labelsPosition="inside"
labelsType="percent"
withLabelsLine
@@ -653,12 +672,13 @@ function Kepuasan() {
/>
</Center>
</Box>
<Box mt="md" style={{ width: '100%' }}>
<SimpleGrid cols={2} spacing="xs" verticalSpacing="xs">
{donutDataKelompokUmur.map((entry) => (
<Flex key={entry.name} gap="sm" align="center" style={{ overflow: 'hidden' }}>
<Box bg={entry.color} w={16} h={16} style={{ flexShrink: 0 }} />
<Text size="xs" lineClamp={1} style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
<Text fz="xs" lh={1.2} lineClamp={1} style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
{entry.name}: {entry.value}
</Text>
</Flex>
@@ -670,13 +690,15 @@ function Kepuasan() {
)}
</Stack>
</Paper>
</SimpleGrid>
</Box>
</Paper>
</Box>
{/* Modal */}
<Modal opened={opened} onClose={close} title="Ajukan Responden" centered>
<Paper bg={colors['white-1']} p={'md'}>
<Paper bg={colors['white-1']} p="md">
<Stack>
<TextInput
label="Nama"
@@ -754,8 +776,9 @@ function Kepuasan() {
mt={10}
bg={colors['blue-button']}
onClick={handleSubmit}
style={{ fontWeight: 700 }}
>
Submit
<Text fz="sm" ta="center" c="white">Submit</Text>
</Button>
</Stack>
</Paper>
@@ -764,4 +787,4 @@ function Kepuasan() {
);
}
export default Kepuasan;
export default Kepuasan;