Fix All Image Add Lazy Loading

This commit is contained in:
2025-09-19 10:41:18 +08:00
parent 9f72e94557
commit 068d8b1077
180 changed files with 390 additions and 323 deletions

View File

@@ -352,16 +352,18 @@ const posisiOrganisasi = proxy({
totalPages: 1,
loading: false,
search: "",
load: async (page = 1, limit = 10, search = "") => {
posisiOrganisasi.findMany.loading = true; // ✅ Akses langsung via nama path
load: async (page = 1, limit?: number, search = "") => {
const appliedLimit = limit ?? 10;
posisiOrganisasi.findMany.page = page;
posisiOrganisasi.findMany.search = search;
try {
const query: any = { page, limit };
const query: any = { page, limit: appliedLimit };
if (search) query.search = search;
const res = await ApiFetch.api.ppid.strukturppid.posisiorganisasi["find-many"].get({ query });
const res = await ApiFetch.api.ppid.strukturppid.posisiorganisasi[
"find-many"
].get({ query });
if (res.status === 200 && res.data?.success) {
posisiOrganisasi.findMany.data = res.data.data ?? [];

View File

@@ -51,7 +51,7 @@ function Login() {
Login
</Title>
<Center>
<Image src={"/darmasaba-icon.png"} alt="" w={80} />
<Image loading="lazy" src={"/darmasaba-icon.png"} alt="" w={80} />
</Center>
</Box>
<Box>

View File

@@ -63,7 +63,7 @@ function Registrasi() {
Registrasi
</Title>
<Center>
<Image src={"/darmasaba-icon.png"} alt="" w={80} />
<Image loading="lazy" src={"/darmasaba-icon.png"} alt="" w={80} />
</Center>
<Box>
<TextInput placeholder='Username'

View File

@@ -198,6 +198,7 @@ function EditBerita() {
objectFit: "contain",
border: `1px solid ${colors["blue-button"]}`,
}}
loading="lazy"
/>
</Box>
)}

View File

@@ -93,6 +93,7 @@ function DetailBerita() {
h={200}
radius="md"
fit="cover"
loading='lazy'
/>
) : (
<Text fz="sm" c="dimmed">Tidak ada gambar</Text>

View File

@@ -183,6 +183,7 @@ export default function CreateBerita() {
objectFit: 'contain',
border: '1px solid #ddd',
}}
loading="lazy"
/>
</Box>
)}

View File

@@ -114,7 +114,7 @@ function ListBerita({ search }: { search: string }) {
style={{ borderRadius: 8, overflow: 'hidden' }}
>
{item.image?.link ? (
<Image src={item.image.link} alt="gambar" fit="cover" />
<Image loading='lazy' src={item.image.link} alt="gambar" fit="cover" />
) : (
<Box bg={colors['blue-button']} w="100%" h="100%" />
)}

View File

@@ -131,6 +131,7 @@ export default function ListImage() {
h={120}
fit="contain"
opacity={0.7}
loading="lazy"
/>
<Text c="dimmed" ta="center">
Belum ada foto yang tersedia

View File

@@ -188,6 +188,7 @@ function EditSuratKeterangan() {
objectFit: 'contain',
border: `1px solid ${colors['blue-button']}`,
}}
loading="lazy"
/>
</Box>
)}
@@ -244,6 +245,7 @@ function EditSuratKeterangan() {
objectFit: 'contain',
border: `1px solid ${colors['blue-button']}`,
}}
loading="lazy"
/>
</Box>
)}

View File

@@ -110,6 +110,7 @@ function DetailSuratKeterangan() {
h={200}
radius="md"
fit="cover"
loading="lazy"
/>
) : (
<Text fz="sm" c="dimmed">
@@ -130,6 +131,7 @@ function DetailSuratKeterangan() {
h={200}
radius="md"
fit="cover"
loading="lazy"
/>
) : (
<Text fz="sm" c="dimmed">

View File

@@ -170,6 +170,7 @@ function CreateSuratKeterangan() {
alt="Preview Gambar Utama"
radius="md"
style={{ maxHeight: 200, objectFit: 'contain', border: '1px solid #ddd' }}
loading="lazy"
/>
</Box>
)}
@@ -219,6 +220,7 @@ function CreateSuratKeterangan() {
alt="Preview Gambar Tambahan"
radius="md"
style={{ maxHeight: 200, objectFit: 'contain', border: '1px solid #ddd' }}
loading="lazy"
/>
</Box>
) : (

View File

@@ -20,7 +20,7 @@ import {
Title,
Tooltip
} from '@mantine/core';
import { IconDeviceImac, IconPlus, IconSearch } from '@tabler/icons-react';
import { IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useEffect, useMemo, useState } from 'react';
import { useProxy } from 'valtio/utils';
@@ -124,14 +124,16 @@ function ListSuratKeterangan({ search }: { search: string }) {
</TableTd>
<TableTd style={{ width: '15%' }}>
<Button
size="xs"
radius="md"
variant="light"
color="blue"
leftSection={<IconDeviceImacCog size={16} />}
onClick={() =>
router.push(`/admin/desa/layanan/pelayanan_surat_keterangan/${item.id}`)
}
>
<IconDeviceImac size={20} />
<Text ml={5}>Detail</Text>
Detail
</Button>
</TableTd>
</TableTr>

View File

@@ -183,6 +183,7 @@ function EditPenghargaan() {
alt="Preview Gambar"
radius="md"
style={{ maxHeight: 220, objectFit: 'contain', border: `1px solid ${colors['blue-button']}` }}
loading="lazy"
/>
</Box>
)}

View File

@@ -87,6 +87,7 @@ function DetailPenghargaan() {
h={200}
radius="md"
fit="cover"
loading="lazy"
/>
) : (
<Text fz="sm" c="dimmed">

View File

@@ -152,6 +152,7 @@ function CreatePenghargaan() {
alt="Preview Gambar"
radius="md"
style={{ maxHeight: 200, objectFit: 'contain', border: '1px solid #ddd' }}
loading="lazy"
/>
</Box>
)}

View File

@@ -21,7 +21,7 @@ import {
Title,
Tooltip
} from '@mantine/core';
import { IconDeviceImac, IconPlus, IconSearch } from '@tabler/icons-react';
import { IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
import { useProxy } from 'valtio/utils';
@@ -113,14 +113,16 @@ function ListPenghargaan({ search }: { search: string }) {
</TableTd>
<TableTd>
<Button
size="xs"
radius="md"
variant="light"
color="blue"
leftSection={<IconDeviceImacCog size={16} />}
onClick={() =>
router.push(`/admin/desa/penghargaan/${item.id}`)
}
>
<IconDeviceImac size={20} />
<Text ml={5}>Detail</Text>
Detail
</Button>
</TableTd>
</TableTr>

View File

@@ -202,6 +202,7 @@ function EditPotensi() {
objectFit: "contain",
border: `1px solid ${colors["blue-button"]}`,
}}
loading="lazy"
/>
</Box>
)}

View File

@@ -90,6 +90,7 @@ export default function DetailPotensi() {
h={200}
radius="md"
fit="cover"
loading='lazy'
/>
) : (
<Text fz="sm" c="dimmed">Tidak ada gambar</Text>

View File

@@ -165,6 +165,7 @@ function CreatePotensi() {
alt="Preview Gambar"
radius="md"
style={{ maxHeight: 200, objectFit: 'contain', border: '1px solid #ddd' }}
loading='lazy'
/>
</Box>
)}
@@ -195,7 +196,7 @@ function CreatePotensi() {
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}
>
Simpan Potensi
Simpan
</Button>
</Group>
</Stack>

View File

@@ -120,12 +120,14 @@ function ListPotensi({ search }: { search: string }) {
</TableTd>
<TableTd>
<Button
size="xs"
radius="md"
variant="light"
color="blue"
leftSection={<IconDeviceImacCog size={16} />}
onClick={() => router.push(`/admin/desa/potensi/list-potensi/${item.id}`)}
>
<IconDeviceImacCog size={20} />
<Text ml={5}>Detail</Text>
Detail
</Button>
</TableTd>
</TableTr>

View File

@@ -241,6 +241,7 @@ function Page() {
height={180}
fit="cover"
radius="sm"
loading='lazy'
/>
<TextInput
label={`Label Gambar ${index + 1}`}

View File

@@ -55,7 +55,7 @@ function Page() {
<Paper bg={colors['white-1']} withBorder radius="md" shadow="xs" p="lg">
<Stack gap={0}>
<Center>
<Image src="/darmasaba-icon.png" w={{ base: 150, md: 250 }} alt="Logo Desa" />
<Image loading='lazy' src="/darmasaba-icon.png" w={{ base: 150, md: 250 }} alt="Logo Desa" />
</Center>
<Paper
bg={colors['blue-button']}
@@ -102,7 +102,7 @@ function Page() {
<Paper bg={colors['white-1']} withBorder radius="md" shadow="xs" p="lg">
<Stack gap={0}>
<Center>
<Image src="/darmasaba-icon.png" w={{ base: 150, md: 250 }} alt="Logo Desa" />
<Image loading='lazy' src="/darmasaba-icon.png" w={{ base: 150, md: 250 }} alt="Logo Desa" />
</Center>
<Paper
bg={colors['blue-button']}
@@ -152,7 +152,7 @@ function Page() {
<Paper bg={colors['white-1']} withBorder radius="md" shadow="xs" p="lg">
<Stack gap={0}>
<Center>
<Image src="/darmasaba-icon.png" w={{ base: 150, md: 250 }} alt="Logo Desa" />
<Image loading='lazy' src="/darmasaba-icon.png" w={{ base: 150, md: 250 }} alt="Logo Desa" />
</Center>
<Paper
bg={colors['blue-button']}
@@ -199,7 +199,7 @@ function Page() {
<Paper bg={colors['white-1']} withBorder radius="md" shadow="xs" p="lg">
<Stack gap={0}>
<Center>
<Image src="/pudak-icon.png" w={{ base: 150, md: 250 }} alt="Maskot Desa" />
<Image loading='lazy' src="/pudak-icon.png" w={{ base: 150, md: 250 }} alt="Maskot Desa" />
</Center>
<Paper
bg={colors['blue-button']}
@@ -228,6 +228,7 @@ function Page() {
fit="cover"
radius="md"
style={{ border: '1px solid #ccc' }}
loading='lazy'
/>
</Center>
<Text ta="center" mt="xs" fw="bold">{img.label}</Text>

View File

@@ -161,6 +161,7 @@ function EditPerbekelDariMasaKeMasa() {
objectFit: 'contain',
border: `1px solid ${colors['blue-button']}`,
}}
loading='lazy'
/>
</Box>
)}

View File

@@ -75,6 +75,7 @@ function DetailPerbekelDariMasa() {
h={150}
radius="md"
fit="cover"
loading='lazy'
/>
) : (
<Text fz="sm" c="dimmed">Tidak ada gambar</Text>

View File

@@ -131,6 +131,7 @@ function CreatePerbekelDariMasaKeMasa() {
alt="Preview Gambar"
radius="md"
style={{ maxHeight: 200, objectFit: 'contain', border: '1px solid #ddd' }}
loading='lazy'
/>
</Box>
)}

View File

@@ -2,7 +2,7 @@
import colors from '@/con/colors';
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 { IconDeviceImac, IconPlus, IconSearch } from '@tabler/icons-react';
import { IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
import { useProxy } from 'valtio/utils';
@@ -82,12 +82,14 @@ function ListPerbekelDariMasaKeMasa({ search }: { search: string }) {
</TableTd>
<TableTd>
<Button
size="xs"
radius="md"
variant="light"
color="blue"
leftSection={<IconDeviceImacCog size={16} />}
onClick={() => router.push(`/admin/desa/profile/profile-perbekel-dari-masa-ke-masa/${item.id}`)}
>
<IconDeviceImac size={20} />
<Text ml={5}>Detail</Text>
Detail
</Button>
</TableTd>
</TableTr>

View File

@@ -145,7 +145,7 @@ function ProfilePerbekel() {
{/* Preview */}
<Box mt="sm">
{previewImage ? (
<Image src={previewImage} alt="Preview" w={200} h={200} fit="cover" radius="md" />
<Image loading='lazy' src={previewImage} alt="Preview" w={200} h={200} fit="cover" radius="md" />
) : (
<Center w={200} h={200} bg="gray.2">
<Stack align="center" gap="xs">

View File

@@ -56,7 +56,7 @@ function Page() {
<Grid>
<GridCol span={12}>
<Center>
<Image src="/darmasaba-icon.png" w={{ base: 100, md: 150 }} alt="Logo Desa" />
<Image loading='lazy' src="/darmasaba-icon.png" w={{ base: 100, md: 150 }} alt="Logo Desa" />
</Center>
</GridCol>
<GridCol span={12}>
@@ -77,6 +77,7 @@ function Page() {
alt="Foto Profil Perbekel"
radius="md"
onError={(e) => { e.currentTarget.src = "/perbekel.png"; }}
loading='lazy'
/>
</Center>
<Paper

View File

@@ -164,6 +164,7 @@ function EditPasarDesa() {
objectFit: 'contain',
border: `1px solid ${colors['blue-button']}`,
}}
loading="lazy"
/>
</Box>
)}

View File

@@ -95,6 +95,7 @@ function DetailPasarDesa() {
h={120}
radius="md"
fit="cover"
loading="lazy"
/>
) : (
<Text fz="sm" c="dimmed">Tidak ada gambar</Text>

View File

@@ -134,6 +134,7 @@ export default function CreatePasarDesa() {
alt="Preview Gambar"
radius="md"
style={{ maxHeight: 200, objectFit: 'contain', border: '1px solid #ddd' }}
loading="lazy"
/>
</Box>
)}

View File

@@ -208,6 +208,7 @@ export default function EditPegawai() {
fit="cover"
radius="sm"
mt="md"
loading="lazy"
/>
)}
</Box>

View File

@@ -60,7 +60,7 @@ function DetailPegawai() {
<Box>
<Text fz={"lg"} fw={"bold"}>Image</Text>
{statePegawai.findUnique.data?.image?.link ? (
<Image src={statePegawai.findUnique.data?.image?.link} alt='' />
<Image src={statePegawai.findUnique.data?.image?.link} alt='' loading="lazy" />
) : (
<Text fz={"md"} c="dimmed">Tidak ada gambar</Text>
)}

View File

@@ -141,6 +141,7 @@ function CreatePegawai() {
fit="cover"
radius="sm"
mt="md"
loading="lazy"
/>
)}
</Box>

View File

@@ -146,6 +146,7 @@ function EditPenghargaan() {
borderRadius: '8px',
border: '1px solid #ddd',
}}
loading="lazy"
/>
</Box>
)}

View File

@@ -60,7 +60,7 @@ function DetailDesaDigital() {
</Box>
<Box>
<Text fw={"bold"} fz={"lg"}>Gambar</Text>
<Image w={{ base: 150, md: 150, lg: 150 }} src={stateDesaDigital.findUnique.data?.image?.link} alt="gambar" />
<Image w={{ base: 150, md: 150, lg: 150 }} src={stateDesaDigital.findUnique.data?.image?.link} alt="gambar" loading="lazy"/>
</Box>
<Flex gap={"xs"} mt={10}>
<Button

View File

@@ -163,6 +163,7 @@ function CreateDesaDigital() {
objectFit: 'contain',
border: '1px solid #ddd',
}}
loading="lazy"
/>
</Box>
)}

View File

@@ -145,6 +145,7 @@ function EditInfoTeknologiTepatGuna() {
borderRadius: '8px',
border: '1px solid #ddd',
}}
loading="lazy"
/>
</Box>
)}

View File

@@ -60,7 +60,7 @@ function DetailInfoTeknologiTepatGuna() {
</Box>
<Box>
<Text fw={"bold"} fz={"lg"}>Gambar</Text>
<Image w={{ base: 150, md: 150, lg: 150 }} src={stateInfoTekno.findUnique.data?.image?.link} alt="gambar" />
<Image w={{ base: 150, md: 150, lg: 150 }} src={stateInfoTekno.findUnique.data?.image?.link} alt="gambar" loading="lazy"/>
</Box>
<Flex gap={"xs"} mt={10}>
<Button

View File

@@ -138,6 +138,7 @@ function CreateInfoTeknologiTepatGuna() {
borderRadius: '8px',
border: '1px solid #ddd',
}}
loading="lazy"
/>
</Box>
)}

View File

@@ -129,7 +129,7 @@ function EditFoto() {
</Dropzone>
{previewImage ? (
<Image alt="" src={previewImage} w={200} h={200} />
<Image alt="" src={previewImage} w={200} h={200} loading="lazy"/>
) : (
<Center w={200} h={200} bg={"gray"}>
<IconImageInPicture />

View File

@@ -118,6 +118,7 @@ function CreateFoto() {
borderRadius: '8px',
border: '1px solid #ddd',
}}
loading="lazy"
/>
</Box>
)}

View File

@@ -129,6 +129,7 @@ function ListMitraKolaborasi({ search }: { search: string }) {
objectFit: 'cover',
objectPosition: 'center'
}}
loading="lazy"
/>
</Box>
</TableTd>

View File

@@ -102,7 +102,7 @@ function DetailPengaduanMasyarakat() {
</Box>
<Box>
<Text fw={"bold"} fz={"lg"}>Gambar</Text>
<Image w={{ base: 150, md: 150, lg: 150 }} src={pengaduanState.pengaduanMasyarakat.findUnique.data?.image?.link} alt="gambar" />
<Image w={{ base: 150, md: 150, lg: 150 }} src={pengaduanState.pengaduanMasyarakat.findUnique.data?.image?.link} alt="gambar" loading="lazy"/>
</Box>
</Stack>
</Paper>

View File

@@ -186,7 +186,7 @@ function EditKeamananLingkungan() {
</Dropzone>
{previewImage ? (
<Image alt="" src={previewImage} w={200} h={200} />
<Image alt="" src={previewImage} w={200} h={200} loading="lazy"/>
) : (
<Center w={200} h={200} bg={"gray"}>
<IconImageInPicture />

View File

@@ -77,6 +77,7 @@ function DetailKeamananLingkungan() {
w={{ base: 150, md: 490 }}
src={data?.image?.link}
alt="gambar keamanan lingkungan"
loading="lazy"
/>
</Box>

View File

@@ -164,6 +164,7 @@ function CreateKeamananLingkungan() {
borderRadius: '8px',
border: '1px solid #ddd',
}}
loading="lazy"
/>
</Box>
)}

View File

@@ -175,6 +175,7 @@ function EditTipsKeamanan() {
objectFit: "contain",
border: `1px solid ${colors["blue-button"]}`,
}}
loading="lazy"
/>
</Box>
) : (

View File

@@ -90,6 +90,7 @@ function DetailTipsKeamanan() {
h={150}
radius="md"
fit="cover"
loading="lazy"
/>
) : (
<Text fz="sm" c="dimmed">Tidak ada gambar</Text>

View File

@@ -128,6 +128,7 @@ function CreateKeamananLingkungan() {
alt="Preview Gambar"
radius="md"
style={{ maxHeight: 200, objectFit: 'contain', border: '1px solid #ddd' }}
loading="lazy"
/>
</Box>
)}

View File

@@ -227,6 +227,7 @@ function EditArtikelKesehatan() {
objectFit: "contain",
border: `1px solid ${colors["blue-button"]}`,
}}
loading="lazy"
/>
</Box>
)}

View File

@@ -93,6 +93,7 @@ function DetailArtikelKesehatan() {
h={200}
radius="md"
fit="cover"
loading="lazy"
/>
) : (
<Text fz="sm" c="dimmed">Tidak ada gambar</Text>

View File

@@ -158,6 +158,7 @@ function CreateArtikelKesehatan() {
objectFit: 'contain',
border: '1px solid #ddd',
}}
loading="lazy"
/>
</Box>
)}

View File

@@ -22,7 +22,7 @@ import {
Tooltip
} from '@mantine/core';
import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import { IconArrowBack, IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
import { IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
import { Bar, BarChart, Tooltip as ChartTooltip, Legend, XAxis, YAxis } from 'recharts';
@@ -32,17 +32,9 @@ import grafikkepuasan from '../../../_state/kesehatan/data_kesehatan_warga/grafi
function GrafikHasilKepuasanMasyarakat() {
const [search, setSearch] = useState("");
const router = useRouter();
return (
<Box>
{/* Tombol Back */}
<Box mb={10}>
<Button variant="subtle" onClick={() => router.back()}>
<IconArrowBack color={colors["blue-button"]} size={25} />
</Button>
</Box>
{/* Header Search */}
<HeaderSearch
title='Grafik Hasil Kepuasan Masyarakat'

View File

@@ -37,7 +37,7 @@ function Kelahiran() {
<Box>
{/* Tombol Back */}
<Box mb={10}>
<Button variant="subtle" onClick={() => router.back()}>
<Button variant="subtle" onClick={() => router.push('/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian')}>
<IconArrowBack color={colors["blue-button"]} size={25} />
</Button>
</Box>

View File

@@ -37,7 +37,7 @@ function Kematian() {
<Box>
{/* Tombol Back */}
<Box mb={10}>
<Button variant="subtle" onClick={() => router.back()}>
<Button variant="subtle" onClick={() => router.push('/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian')}>
<IconArrowBack color={colors["blue-button"]} size={30} />
</Button>
</Box>

View File

@@ -195,6 +195,7 @@ function EditInfoWabahPenyakit() {
borderRadius: '8px',
border: '1px solid #ddd',
}}
loading="lazy"
/>
</Box>
)}

View File

@@ -104,6 +104,7 @@ function DetailInfoWabahPenyakit() {
alt="gambar wabah"
radius="md"
mt="xs"
loading="lazy"
/>
) : (
<Text fz="md" c="dimmed">-</Text>

View File

@@ -168,6 +168,7 @@ function CreateInfoWabahPenyakit() {
borderRadius: '8px',
border: '1px solid #ddd',
}}
loading="lazy"
/>
</Box>
)}

View File

@@ -115,7 +115,7 @@ function ListInfoWabahPenyakit({ search }: { search: string }) {
</Text>
</TableTd>
<TableTd>
<Image w={100} src={item.image?.link} alt="image" radius="md" />
<Image w={100} src={item.image?.link} alt="image" radius="md" loading="lazy"/>
</TableTd>
<TableTd>
<Button

View File

@@ -177,6 +177,7 @@ function EditKontakDarurat() {
borderRadius: '8px',
border: '1px solid #ddd',
}}
loading="lazy"
/>
</Box>
)}

View File

@@ -89,6 +89,7 @@ function DetailKontakDarurat() {
alt="gambar"
radius="md"
maw={300}
loading="lazy"
/>
) : (
<Text fz="md" c="dimmed">-</Text>

View File

@@ -180,6 +180,7 @@ function CreateKontakDarurat() {
borderRadius: '8px',
border: '1px solid #ddd',
}}
loading="lazy"
/>
</Box>
)}

View File

@@ -110,7 +110,7 @@ function ListKontakDarurat({ search }: { search: string }) {
<Text truncate fz="sm" c="dimmed" lineClamp={1} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
</TableTd>
<TableTd>
<Image w={100} src={item.image?.link} alt="image" radius="md" />
<Image w={100} src={item.image?.link} alt="image" radius="md" loading="lazy"/>
</TableTd>
<TableTd>
<Button

View File

@@ -180,6 +180,7 @@ function EditPenangananDarurat() {
borderRadius: '8px',
border: '1px solid #ddd',
}}
loading="lazy"
/>
</Box>
)}

View File

@@ -89,6 +89,7 @@ function DetailPenangananDarurat() {
radius="md"
mah={250}
fit="contain"
loading="lazy"
/>
</Box>

View File

@@ -184,6 +184,7 @@ function CreatePenangananDarurat() {
borderRadius: '8px',
border: '1px solid #ddd',
}}
loading="lazy"
/>
</Box>
)}

View File

@@ -114,7 +114,7 @@ function ListPenangananDarurat({ search }: { search: string }) {
/>
</TableTd>
<TableTd>
<Image w={100} src={item.image?.link} alt="image" />
<Image w={100} src={item.image?.link} alt="image" loading="lazy"/>
</TableTd>
<TableTd>
<Button

View File

@@ -181,6 +181,7 @@ function EditPosyandu() {
objectFit: 'contain',
border: `1px solid ${colors['blue-button']}`,
}}
loading="lazy"
/>
</Box>
)}

View File

@@ -117,6 +117,7 @@ function DetailPosyandu() {
h={200}
radius="md"
fit="cover"
loading="lazy"
/>
) : (
<Text fz="sm" c="dimmed">Tidak ada gambar</Text>

View File

@@ -144,6 +144,7 @@ function CreatePosyandu() {
objectFit: 'contain',
border: '1px solid #ddd',
}}
loading="lazy"
/>
</Box>
)}

View File

@@ -195,6 +195,7 @@ function EditProgramKesehatan() {
borderRadius: '8px',
border: '1px solid #ddd',
}}
loading="lazy"
/>
</Box>
)}

View File

@@ -84,7 +84,7 @@ function DetailProgramKesehatan() {
<Box>
<Text fz="lg" fw="bold">Gambar</Text>
{data?.image?.link ? (
<Image src={data.image.link} alt="gambar program kesehatan" radius="md" />
<Image src={data.image.link} alt="gambar program kesehatan" radius="md" loading="lazy"/>
) : (
<Text fz="md" c="dimmed">-</Text>
)}

View File

@@ -173,6 +173,7 @@ function CreateProgramKesehatan() {
borderRadius: '8px',
border: '1px solid #ddd',
}}
loading="lazy"
/>
</Box>
)}

View File

@@ -107,7 +107,7 @@ function ListProgramKesehatan({ search }: { search: string }) {
<Text fz="sm" truncate="end" lineClamp={2} dangerouslySetInnerHTML={{ __html: item.deskripsiSingkat }} />
</TableTd>
<TableTd>
<Image w={100} src={item.image?.link} alt="image" radius="md" />
<Image w={100} src={item.image?.link} alt="image" radius="md" loading="lazy"/>
</TableTd>
<TableTd>
<Button

View File

@@ -299,6 +299,7 @@ function EditPuskesmas() {
borderRadius: '8px',
border: '1px solid #ddd',
}}
loading="lazy"
/>
</Box>
)}

View File

@@ -86,7 +86,7 @@ function DetailPuskesmas() {
<Box>
<Text fz="lg" fw="bold">Gambar</Text>
{data?.image?.link ? (
<Image src={data.image.link} alt="gambar" radius="md" />
<Image src={data.image.link} alt="gambar" radius="md" loading="lazy"/>
) : (
<Text fz="md" c="dimmed">-</Text>
)}

View File

@@ -207,6 +207,7 @@ function CreatePuskesmas() {
borderRadius: '8px',
border: '1px solid #ddd',
}}
loading="lazy"
/>
</Box>
)}

View File

@@ -105,7 +105,7 @@ function ListPuskesmas({ search }: { search: string }) {
</TableTd>
<TableTd>{item.alamat}</TableTd>
<TableTd>
<Image w={100} src={item.image.link} alt="image" radius="md" />
<Image w={100} src={item.image.link} alt="image" radius="md" loading="lazy"/>
</TableTd>
<TableTd>
<Button

View File

@@ -202,6 +202,7 @@ function EditAPBDes() {
objectFit: 'contain',
border: `1px solid ${colors['blue-button']}`
}}
loading="lazy"
/>
</Box>
)}

View File

@@ -89,6 +89,7 @@ function DetailAPBDes() {
radius="md"
fit="contain"
style={{ border: '1px solid #ddd' }}
loading="lazy"
/>
) : (
<Text fz="sm" c="dimmed">Tidak ada gambar</Text>

View File

@@ -149,6 +149,7 @@ function CreateAPBDes() {
alt="Preview Gambar"
radius="md"
style={{ maxHeight: 200, objectFit: 'contain', border: '1px solid #ddd' }}
loading="lazy"
/>
</Box>
)}

View File

@@ -108,13 +108,15 @@ function ListAPBDes({ search }: { search: string }) {
</TableTd>
<TableTd>
<Button
size="xs"
radius="md"
variant="light"
color="blue"
leftSection={<IconDeviceImacCog size={16} />}
onClick={() => router.push(`/admin/landing-page/apbdes/${item.id}`)}
fullWidth
>
<IconDeviceImacCog size={20} />
<Text ml={5}>Detail</Text>
Detail
</Button>
</TableTd>
</TableTr>

View File

@@ -66,9 +66,7 @@ function ListDesaAntiKorupsi({ search }: { search: string }) {
<Group justify="space-between" mb="md">
<Title order={4}>Daftar Program Desa Anti Korupsi</Title>
<Tooltip label="Tambah Program Baru" withArrow>
<Button
leftSection={<IconPlus size={18} />}
color="blue"
<Button leftSection={<IconPlus size={18} />} color="blue" variant="light"
onClick={() => router.push('/admin/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/create')}
>
Tambah Baru

View File

@@ -85,7 +85,7 @@ function LayoutTabsKepuasan({ children }: { children: React.ReactNode }) {
</TabsList>
</ScrollArea>
{tabs.map((e, i) => (
<TabsPanel key={i} value={e.value} mt="md">
<TabsPanel key={i} value={e.value}>
<></>
</TabsPanel>
))}

View File

@@ -101,7 +101,7 @@ function ListKategoriPrestasi({ search }: { search: string }) {
<Tooltip label="Edit" withArrow position="top">
<Button
variant="light"
color="blue"
color="green"
size="sm"
onClick={() => router.push(`/admin/landing-page/prestasi-desa/kategori-prestasi-desa/${item.id}`)}
>

View File

@@ -36,6 +36,7 @@ function EditPrestasiDesa() {
})
useEffect(() => {
prestasiState.kategoriPrestasi.findMany.load()
const loadDesaAntiKorupsi = async () => {
const id = params?.id as string;
if (!id) return;
@@ -223,6 +224,7 @@ function EditPrestasiDesa() {
alt="Preview Gambar"
radius="md"
style={{ maxHeight: 220, objectFit: 'contain', border: `1px solid ${colors['blue-button']}` }}
loading='lazy'
/>
</Box>
)}

View File

@@ -18,6 +18,7 @@ function DetailPrestasiDesa() {
const router = useRouter()
useShallowEffect(() => {
prestasiState.kategoriPrestasi.findMany.load()
detailState.findUnique.load(params?.id as string)
}, [])
@@ -93,6 +94,7 @@ function DetailPrestasiDesa() {
w={300}
fit="contain"
style={{ borderRadius: '8px', border: '1px solid #e0e0e0' }}
loading='lazy'
/>
) : (
<Text fz="sm" c="dimmed">Tidak ada gambar</Text>

View File

@@ -131,6 +131,7 @@ function CreatePrestasiDesa() {
alt="Pratinjau gambar prestasi"
fit="cover"
style={{ width: '100%', height: 'auto' }}
loading='lazy'
/>
</Box>
</Box>

View File

@@ -109,12 +109,14 @@ function ListPrestasi({ search }: { search: string }) {
<TableTd style={{ width: '25%', textAlign: 'center' }}>
<Tooltip label="Kelola Prestasi" withArrow>
<Button
size="xs"
radius="md"
variant="light"
color="blue"
leftSection={<IconDeviceImacCog size={16} />}
onClick={() => router.push(`/admin/landing-page/prestasi-desa/list-prestasi-desa/${item.id}`)}
size="sm"
>
<IconDeviceImacCog size={20} />
Detail
</Button>
</Tooltip>
</TableTd>

View File

@@ -152,6 +152,7 @@ function EditMediaSosial() {
alt="Preview Gambar"
radius="md"
style={{ maxHeight: 220, objectFit: 'contain', border: `1px solid ${colors['blue-button']}` }}
loading="lazy"
/>
</Box>
)}

View File

@@ -71,7 +71,7 @@ function DetailMediaSosial() {
</Box>
<Box>
<Text fz="lg" fw="bold">Icon / Nomor Telepon</Text>
<Text fz="lg" fw="bold">Link / Nomor Telepon</Text>
<Text fz="md" c="dimmed">{data.iconUrl || '-'}</Text>
</Box>
@@ -85,6 +85,7 @@ function DetailMediaSosial() {
h={120}
radius="md"
fit="cover"
loading="lazy"
/>
) : (
<Text fz="sm" c="dimmed">Tidak ada gambar</Text>

View File

@@ -129,6 +129,7 @@ export default function CreateMediaSosial() {
alt="Preview Gambar"
radius="md"
style={{ maxHeight: 200, objectFit: 'contain', border: '1px solid #ddd' }}
loading="lazy"
/>
</Box>
)}

View File

@@ -2,7 +2,7 @@
import colors from '@/con/colors';
import { Box, Button, Center, Group, Image, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconDeviceImac, IconPlus, IconSearch } from '@tabler/icons-react';
import { IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
import { useProxy } from 'valtio/utils';
@@ -68,7 +68,7 @@ function ListMediaSosial({ search }: { search: string }) {
<TableTr>
<TableTh style={{ width: '25%' }}>Nama Media Sosial / Kontak</TableTh>
<TableTh style={{ width: '20%' }}>Gambar</TableTh>
<TableTh style={{ width: '20%' }}>Icon / No. Telepon</TableTh>
<TableTh style={{ width: '20%' }}>Link / No. Telepon</TableTh>
<TableTh style={{ width: '15%' }}>Aksi</TableTh>
</TableTr>
</TableThead>
@@ -82,25 +82,29 @@ function ListMediaSosial({ search }: { search: string }) {
<TableTd style={{ width: '20%', }}>
<Box w={50} h={50} style={{ borderRadius: 8, overflow: 'hidden', }}>
{item.image?.link ? (
<Image src={item.image.link} alt={item.name} fit="cover" />
<Image loading='lazy' src={item.image.link} alt={item.name} fit="cover" />
) : (
<Box bg={colors['blue-button']} w="100%" h="100%" />
)}
</Box>
</TableTd>
<TableTd style={{ width: '20%', }}>
<Text truncate fz="sm" c="dimmed">
<Box w={250}>
<Text truncate fz="sm" c="dimmed" lineClamp={1}>
{item.iconUrl || item.noTelp || '-'}
</Text>
</Box>
</TableTd>
<TableTd style={{ width: '15%'}}>
<TableTd style={{ width: '15%' }}>
<Button
size="xs"
radius="md"
variant="light"
color="blue"
leftSection={<IconDeviceImacCog size={16} />}
onClick={() => router.push(`/admin/landing-page/profile/media-sosial/${item.id}`)}
>
<IconDeviceImac size={20} />
<Text ml={5}>Detail</Text>
Detail
</Button>
</TableTd>
</TableTr>

View File

@@ -229,6 +229,7 @@ function EditPejabatDesa() {
borderRadius: '8px',
border: '1px solid #ddd',
}}
loading="lazy"
/>
</Box>
)}
@@ -240,7 +241,7 @@ function EditPejabatDesa() {
<Box>
<Text fz="sm" fw="bold" mb="xs">Preview Gambar</Text>
{previewImage ? (
<Image alt="Profile preview" src={previewImage} w={200} h={200} fit="cover" radius="md" />
<Image alt="Profile preview" src={previewImage} w={200} h={200} fit="cover" radius="md" loading="lazy"/>
) : (
<Center w={200} h={200} bg="gray.2">
<Stack align="center" gap="xs">

View File

@@ -54,7 +54,7 @@ function Page() {
<Grid>
<GridCol span={12}>
<Center>
<Image src="/darmasaba-icon.png" w={{ base: 100, md: 150 }} alt="Logo Desa" />
<Image src="/darmasaba-icon.png" w={{ base: 100, md: 150 }} alt="Logo Desa" loading="lazy"/>
</Center>
</GridCol>
<GridCol span={12}>
@@ -76,6 +76,7 @@ function Page() {
alt="Foto Profil Pejabat"
radius="md"
onError={(e) => { e.currentTarget.src = "/perbekel.png"; }}
loading='lazy'
/>
</Center>
<Paper

View File

@@ -165,6 +165,7 @@ function EditProgramInovasi() {
alt="Preview Gambar"
radius="md"
style={{ maxHeight: 220, objectFit: 'contain', border: `1px solid ${colors['blue-button']}` }}
loading="lazy"
/>
</Box>
)}

View File

@@ -73,6 +73,7 @@ function DetailProgramInovasi() {
alt="Gambar Program"
radius="md"
style={{ maxWidth: '100%', maxHeight: 300, objectFit: 'contain' }}
loading="lazy"
/>
) : (
<Text fz="md" c="dimmed">-</Text>

View File

@@ -135,6 +135,7 @@ function CreateProgramInovasi() {
alt="Preview Gambar"
radius="md"
style={{ maxHeight: 200, objectFit: 'contain', border: '1px solid #ddd' }}
loading="lazy"
/>
</Box>
)}

View File

@@ -2,7 +2,7 @@
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 { useShallowEffect } from '@mantine/hooks';
import { IconDeviceImac, IconPlus, IconSearch } from '@tabler/icons-react';
import { IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
import { useProxy } from 'valtio/utils';
@@ -107,14 +107,16 @@ function ListProgramInovasi({ search }: { search: string }) {
</TableTd>
<TableTd>
<Button
size="xs"
radius="md"
variant="light"
color="blue"
radius="md"
leftSection={<IconDeviceImacCog size={16} />}
onClick={() =>
router.push(`/admin/landing-page/profile/program-inovasi/${item.id}`)
}
>
<IconDeviceImac size={20} />
Detail
</Button>
</TableTd>
</TableTr>

Some files were not shown because too many files have changed in this diff Show More