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

fix tampilan admin menu inovasi, sisa menu lingkungan

Browse Source
This commit is contained in:
nico
2025-09-22 10:53:48 +08:00
parent 8e25c91e85
commit 0fc47c28ff
52 changed files with 3787 additions and 1723 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/darmasaba/(pages)/keamanan/laporan-publik/[id]/page.tsx
View File

@@ -120,7 +120,7 @@ function Page() {
<Box>
<Text fw={600} fz="lg" >Kronologi</Text>
<Text fz="sm" c="dimmed">{data.kronologi || '-'}</Text>
<Text fz="sm" c="dimmed" dangerouslySetInnerHTML={{ __html: data.kronologi || '-' }} />
</Box>
<Divider />

39
src/app/darmasaba/(pages)/keamanan/laporan-publik/page.tsx
View File

@@ -55,27 +55,28 @@ function Page() {
<Box px={{ base: 'md', md: 100 }}>
<Flex justify="space-between" align="center">
<BackButton />
<Flex gap={"xs"} align={"center"}>
<TextInput
placeholder="Cari laporan"
value={search}
onChange={(e) => setSearch(e.currentTarget.value)}
/>
<Button
onClick={open}
bg={colors['blue-button']}
size="md"
radius="md"
>
<IconPlus size={20} />
</Button>
</Flex>
<TextInput
placeholder="Cari laporan"
value={search}
onChange={(e) => setSearch(e.currentTarget.value)}
/>
</Flex>
</Box>
<Box>
<Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
Laporan Keamanan Lingkungan
</Text>
<Box px={{ base: 'md', md: 100 }}>
<Group justify="space-between">
<Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
Laporan Keamanan Lingkungan
</Text>
<Button
onClick={open}
bg={colors['blue-button']}
size="md"
radius="md"
rightSection={<IconPlus size={20} />}
>
Tambah Laporan
</Button>
</Group>
</Box>
<Box px={{ base: "md", md: 100 }}>
<Stack gap={'lg'}>

130
src/app/darmasaba/(pages)/keamanan/pencegahan-kriminalitas/[id]/page.tsx
View File

@@ -1,11 +1,129 @@
import React from 'react';
'use client'
import pencegahanKriminalitasState from '@/app/admin/(dashboard)/_state/keamanan/pencegahan-kriminalitas';
import { Box, Button, Card, Center, Group, Loader, Paper, Stack, Text, Title } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconArrowLeft } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
import { useProxy } from 'valtio/utils';
function DetailPencegahanKriminalitas() {
const router = useRouter();
const params = useParams();
const kriminalitasState = useProxy(pencegahanKriminalitasState);
useShallowEffect(() => {
kriminalitasState.findUnique.load(params?.id as string);
}, []);
if (kriminalitasState.findUnique.loading) {
return (
<Center py="xl">
<Loader size="lg" color="blue" />
</Center>
);
}
if (!kriminalitasState.findUnique.data) {
return (
<Center h={400}>
<Stack align="center" gap="sm">
<Text fz="lg" fw="bold" c="dimmed">Data tidak ditemukan</Text>
<Button
variant="light"
color="blue"
leftSection={<IconArrowLeft size={18} />}
onClick={() => router.push("/admin/keamanan/pencegahan-kriminalitas")}
>
Kembali ke daftar
</Button>
</Stack>
</Center>
);
}
const data = kriminalitasState.findUnique.data;
function Page() {
return (
<div>
Page
</div>
<Box py="md" px="md">
<Group mb="md">
<Button
variant="light"
color="blue"
onClick={() => router.back()}
leftSection={<IconArrowLeft size={20} />}
>
Kembali
</Button>
</Group>
<Card
withBorder
radius="xl"
shadow="md"
p="xl"
bg="white"
>
<Stack gap="lg">
<Title order={2} c="blue">Detail Pencegahan Kriminalitas</Title>
<Paper radius="lg" p="lg" withBorder>
<Stack gap="lg">
<Stack gap={4}>
<Text fz="sm" c="dimmed">Judul</Text>
<Text fz="lg" fw={600}>{data?.judul || '-'}</Text>
</Stack>
<Stack gap={4}>
<Text fz="sm" c="dimmed">Deskripsi Singkat</Text>
{data?.deskripsiSingkat ? (
<Text fz="md" dangerouslySetInnerHTML={{ __html: data.deskripsiSingkat }} />
) : (
<Text fz="sm" c="dimmed">Belum ada deskripsi singkat</Text>
)}
</Stack>
<Stack gap={4}>
<Text fz="sm" c="dimmed">Deskripsi Lengkap</Text>
{data?.deskripsi ? (
<Text fz="md" dangerouslySetInnerHTML={{ __html: data.deskripsi }} />
) : (
<Text fz="sm" c="dimmed">Belum ada deskripsi</Text>
)}
</Stack>
<Stack gap={4}>
<Text fz="sm" c="dimmed">Video</Text>
{data?.linkVideo ? (
<Box
component="iframe"
src={convertToEmbedUrl(data.linkVideo)}
width="100%"
h={{ base: 320, md: 450 }}
allowFullScreen
style={{ borderRadius: 12, border: 'none' }}
/>
) : (
<Text fz="sm" c="dimmed">Belum ada video</Text>
)}
</Stack>
</Stack>
</Paper>
</Stack>
</Card>
</Box>
);
function convertToEmbedUrl(youtubeUrl: string): string {
try {
const url = new URL(youtubeUrl);
const videoId = url.searchParams.get("v");
if (!videoId) return youtubeUrl;
return `https://www.youtube.com/embed/${videoId}`;
} catch {
return youtubeUrl;
}
}
}
export default Page;
export default DetailPencegahanKriminalitas;

138
src/app/darmasaba/(pages)/keamanan/pencegahan-kriminalitas/program-lainnya/page.tsx
View File

@@ -1,11 +1,137 @@
import React from 'react';
'use client'
import {
Box,
Card,
Center,
Group,
Pagination,
Skeleton,
Stack,
Text,
Title,
Tooltip,
Button,
Paper,
} from '@mantine/core';
import { IconSearch, IconArrowRight } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useProxy } from 'valtio/utils';
import pencegahanKriminalitasState from '@/app/admin/(dashboard)/_state/keamanan/pencegahan-kriminalitas';
import { useShallowEffect } from '@mantine/hooks';
import { useState } from 'react';
import HeaderSearch from '@/app/admin/(dashboard)/_com/header';
function PencegahanKriminalitas() {
const [search, setSearch] = useState("");
function Page() {
return (
<div>
Page
</div>
<Box>
<HeaderSearch
title="Program Pencegahan Kriminalitas"
placeholder="Cari program atau deskripsi..."
searchIcon={<IconSearch size={20} />}
value={search}
onChange={(e) => setSearch(e.currentTarget.value)}
/>
<ListPencegahanKriminalitas search={search} />
</Box>
);
}
export default Page;
function ListPencegahanKriminalitas({ search }: { search: string }) {
const kriminalitasState = useProxy(pencegahanKriminalitasState);
const router = useRouter();
const { data, page, totalPages, loading, load } = kriminalitasState.findMany;
useShallowEffect(() => {
load(page, 6, search);
}, [page, search]);
if (loading || !data) {
return (
<Stack py="lg">
<Skeleton height={300} radius="lg" />
<Skeleton height={300} radius="lg" />
</Stack>
);
}
return (
<Box py="lg">
<Stack>
{data.length > 0 ? (
data.map((item) => (
<Card
key={item.id}
withBorder
radius="lg"
shadow="md"
p="lg"
style={{
background: 'linear-gradient(135deg, #ffffff 0%, #f9fbff 100%)',
}}
>
<Stack gap="xs">
<Title order={4} c="blue" style={{ fontWeight: 600 }}>
{item.judul}
</Title>
<Text
fz="sm"
c="dimmed"
lineClamp={2}
dangerouslySetInnerHTML={{ __html: item.deskripsiSingkat || '' }}
/>
<Group justify="flex-end" mt="sm">
<Tooltip label="Lihat detail program" withArrow>
<Button
size="sm"
variant="gradient"
gradient={{ from: 'blue', to: 'cyan' }}
rightSection={<IconArrowRight size={18} />}
onClick={() => router.push(`/darmasaba/keamanan/pencegahan-kriminalitas/${item.id}`)}
>
Lihat Detail
</Button>
</Tooltip>
</Group>
</Stack>
</Card>
))
) : (
<Paper withBorder radius="lg" p="xl" shadow="sm">
<Center>
<Stack align="center" gap="xs">
<Text fz="lg" fw={500} c="dimmed">
Belum ada program pencegahan kriminalitas
</Text>
<Text fz="sm" c="dimmed">
Program akan ditampilkan di sini ketika tersedia
</Text>
</Stack>
</Center>
</Paper>
)}
</Stack>
{totalPages > 1 && (
<Center>
<Pagination
value={page}
onChange={(newPage) => {
load(newPage, 6, search);
window.scrollTo({ top: 0, behavior: 'smooth' });
}}
total={totalPages}
mt="xl"
color="blue"
radius="lg"
/>
</Center>
)}
</Box>
);
}
export default PencegahanKriminalitas;