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

Fix Admin - User Menu Keamanan, Submenu Laporan Kontak Darurat, Laporan Publik

Browse Source
This commit is contained in:
nico
2025-09-17 14:59:46 +08:00
parent 39e1e7b575
commit 79ad39fc55
50 changed files with 1326 additions and 1021 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/app/admin/(dashboard)/_com/iconMap.tsx
View File

@@ -23,6 +23,10 @@ import {
IconSchool,
IconShoppingCart,
IconHospital,
IconAmbulance,
IconFiretruck,
IconBuilding,
IconAlertTriangle,
} from '@tabler/icons-react'
export type IconKey =
@@ -46,6 +50,13 @@ export type IconKey =
| 'pelatihan'
| 'subsidi'
| 'layananKesehatan'
| 'polisi'
| 'ambulans'
| 'pemadam'
| 'rumahSakit'
| 'bangunan'
| 'darurat'
const iconMap: Record<IconKey, React.FC<any>> = {
ekowisata: IconLeaf,
@@ -68,6 +79,12 @@ const iconMap: Record<IconKey, React.FC<any>> = {
pelatihan: IconSchool,
subsidi: IconShoppingCart,
layananKesehatan: IconHospital,
polisi: IconShieldFilled,
ambulans: IconAmbulance,
pemadam: IconFiretruck,
rumahSakit: IconHospital,
bangunan: IconBuilding,
darurat: IconAlertTriangle
}
type Props = {

10
src/app/admin/(dashboard)/_com/selectIcon.tsx
View File

@@ -3,11 +3,15 @@
import { Box, rem, Select } from '@mantine/core';
import {
IconAlertTriangle,
IconAmbulance,
IconBuilding,
IconCash,
IconChartLine,
IconChristmasTreeFilled,
IconClipboardTextFilled,
IconDroplet,
IconFiretruck,
IconHome,
IconHomeEco,
IconHospital,
@@ -47,6 +51,12 @@ const iconMap = {
pelatihan: { label: 'Pelatihan', icon: IconSchool },
subsidi: { label: 'Subsidi', icon: IconShoppingCart },
layananKesehatan: { label: 'Layanan Kesehatan', icon: IconHospital },
polisi: { label: 'Polisi', icon: IconShieldFilled },
ambulans: { label: 'Ambulans', icon: IconAmbulance },
pemadam: { label: 'Pemadam', icon: IconFiretruck },
rumahSakit: { label: 'Rumah Sakit', icon: IconHospital },
bangunan: { label: 'Bangunan', icon: IconBuilding },
darurat: { label: 'Darurat', icon: IconAlertTriangle },
};

10
src/app/admin/(dashboard)/_com/selectIconEdit.tsx
View File

@@ -2,11 +2,13 @@
import { Box, rem, Select } from '@mantine/core';
import {
IconAmbulance,
IconCash,
IconChartLine,
IconChristmasTreeFilled,
IconClipboardTextFilled,
IconDroplet,
IconFiretruck,
IconHome,
IconHomeEco,
IconHospital,
@@ -22,6 +24,8 @@ import {
IconTrendingUp,
IconTrophy,
IconTruckFilled,
IconBuilding,
IconAlertTriangle
} from '@tabler/icons-react';
const iconMap = {
@@ -45,6 +49,12 @@ const iconMap = {
pelatihan: {label: 'Pelatihan', icon: IconSchool},
subsidi: {label: 'Subsidi', icon: IconShoppingCart},
layananKesehatan: {label: 'Layanan Kesehatan', icon: IconHospital},
polisi: {label: 'Polisi', icon: IconShieldFilled},
ambulans: {label: 'Ambulans', icon: IconAmbulance},
pemadam: {label: 'Pemadam', icon: IconFiretruck},
rumahSakit: {label: 'Rumah Sakit', icon: IconHospital},
bangunan: {label: 'Bangunan', icon: IconBuilding},
darurat: {label: 'Darurat', icon: IconAlertTriangle},
};
type IconKey = keyof typeof iconMap;

114
src/app/admin/(dashboard)/_state/keamanan/kontak-darurat-keamanan.ts
View File

@@ -7,13 +7,13 @@ import { z } from "zod";
const templateForm = z.object({
nama: z.string().min(1, "Nama minimal 1 karakter"),
imageId: z.string().nonempty(),
icon: z.string().nonempty(),
kategoriId: z.array(z.string()).min(1, "Minimal pilih satu kategori"),
});
const defaultForm = {
nama: "",
imageId: "",
icon: "",
kategoriId: [] as string[],
};
@@ -54,7 +54,6 @@ const kontakDaruratKeamananState = proxy({
Prisma.KontakDaruratKeamananGetPayload<{
include: {
kategori: true;
image: true;
kontakItems: {
include: {
kontakItem: true;
@@ -102,14 +101,9 @@ const kontakDaruratKeamananState = proxy({
include: {
kontakItems: {
include: {
kontakItem: {
include: {
image: true;
}
};
kontakItem: true;
};
};
image: true;
kategori: true;
};
}> | null,
@@ -192,8 +186,9 @@ const kontakDaruratKeamananState = proxy({
this.id = data.id;
this.form = {
nama: data.nama,
imageId: data.imageId || '',
kategoriId: data.kontakItems?.map((item: any) => item.kontakItemId) || []
icon: data.icon || "",
kategoriId:
data.kontakItems?.map((item: any) => item.kontakItemId) || [],
};
return data;
} else {
@@ -230,7 +225,7 @@ const kontakDaruratKeamananState = proxy({
},
body: JSON.stringify({
nama: this.form.nama,
imageId: this.form.imageId,
icon: this.form.icon,
kategoriId: this.form.kategoriId,
}),
}
@@ -271,13 +266,13 @@ const kontakDaruratKeamananState = proxy({
const templateFormItem = z.object({
nama: z.string().min(1, "Nama minimal 1 karakter"),
nomorTelepon: z.string().min(1, "Nomor Telepon minimal 1 karakter"),
imageId: z.string().nonempty(),
icon: z.string().nonempty(),
});
const defaultFormItem = {
nama: "",
nomorTelepon: "",
imageId: "",
icon: "",
};
const kontakDaruratItem = proxy({
@@ -285,9 +280,7 @@ const kontakDaruratItem = proxy({
form: { ...defaultFormItem },
loading: false,
async create() {
const cek = templateFormItem.safeParse(
kontakDaruratItem.create.form
);
const cek = templateFormItem.safeParse(kontakDaruratItem.create.form);
if (!cek.success) {
const err = `[${cek.error.issues
.map((v) => `${v.path.join(".")}`)
@@ -296,9 +289,9 @@ const kontakDaruratItem = proxy({
}
try {
kontakDaruratItem.create.loading = true;
const res = await ApiFetch.api.keamanan.kontakitem[
"create"
].post(kontakDaruratItem.create.form);
const res = await ApiFetch.api.keamanan.kontakitem["create"].post(
kontakDaruratItem.create.form
);
if (res.status === 200) {
kontakDaruratItem.findMany.load();
return toast.success("success create");
@@ -315,8 +308,8 @@ const kontakDaruratItem = proxy({
findMany: {
data: null as Array<
Prisma.KontakItemGetPayload<{
include: {
image: true;
omit: {
isActive: true;
};
}>
> | null,
@@ -333,14 +326,13 @@ const kontakDaruratItem = proxy({
const query: any = { page, limit };
if (search) query.search = search;
const res = await ApiFetch.api.keamanan.kontakitem[
"find-many"
].get({ query });
const res = await ApiFetch.api.keamanan.kontakitem["find-many"].get({
query,
});
if (res.status === 200 && res.data?.success) {
kontakDaruratItem.findMany.data = res.data.data ?? [];
kontakDaruratItem.findMany.totalPages =
res.data.totalPages ?? 1;
kontakDaruratItem.findMany.totalPages = res.data.totalPages ?? 1;
} else {
kontakDaruratItem.findMany.data = [];
kontakDaruratItem.findMany.totalPages = 1;
@@ -356,9 +348,8 @@ const kontakDaruratItem = proxy({
},
findUnique: {
data: null as Prisma.KontakItemGetPayload<{
include: {
kategori: true;
image: true;
omit: {
isActive: true;
};
}> | null,
loading: false,
@@ -384,15 +375,12 @@ const kontakDaruratItem = proxy({
if (!id) return toast.warn("ID tidak valid");
try {
kontakDaruratItem.delete.loading = true;
const response = await fetch(
`/api/keamanan/kontakitem/del/${id}`,
{
method: "DELETE",
headers: {
"Content-Type": "application/json",
},
}
);
const response = await fetch(`/api/keamanan/kontakitem/del/${id}`, {
method: "DELETE",
headers: {
"Content-Type": "application/json",
},
});
const result = await response.json();
@@ -422,15 +410,12 @@ const kontakDaruratItem = proxy({
}
try {
const response = await fetch(
`/api/keamanan/kontakitem/${id}`,
{
method: "GET",
headers: {
"Content-Type": "application/json",
},
}
);
const response = await fetch(`/api/keamanan/kontakitem/${id}`, {
method: "GET",
headers: {
"Content-Type": "application/json",
},
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
@@ -441,7 +426,7 @@ const kontakDaruratItem = proxy({
this.form = {
nama: data.nama,
nomorTelepon: data.nomorTelepon,
imageId: data.imageId,
icon: data.icon,
};
return data;
} else {
@@ -457,9 +442,7 @@ const kontakDaruratItem = proxy({
},
async update() {
const cek = templateFormItem.safeParse(
kontakDaruratItem.update.form
);
const cek = templateFormItem.safeParse(kontakDaruratItem.update.form);
if (!cek.success) {
const err = `[${cek.error.issues
.map((v) => `${v.path.join(".")}`)
@@ -469,20 +452,17 @@ const kontakDaruratItem = proxy({
try {
kontakDaruratItem.update.loading = true;
const response = await fetch(
`/api/keamanan/kontakitem/${this.id}`,
{
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
nama: this.form.nama,
nomorTelepon: this.form.nomorTelepon,
imageId: this.form.imageId,
}),
}
);
const response = await fetch(`/api/keamanan/kontakitem/${this.id}`, {
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
nama: this.form.nama,
nomorTelepon: this.form.nomorTelepon,
icon: this.form.icon,
}),
});
if (!response.ok) {
const errorData = await response.json().catch(() => ({}));
throw new Error(
@@ -514,7 +494,7 @@ const kontakDaruratItem = proxy({
kontakDaruratItem.update.form = { ...defaultFormItem };
},
},
})
});
const kontakDarurat = proxy({
kontakDaruratKeamananState,

25
src/app/admin/(dashboard)/_state/keamanan/laporan-publik.ts
View File

@@ -11,12 +11,24 @@ const templateForm = z.object({
judul: z.string().min(3, "Judul minimal 3 karakter"),
lokasi: z.string().min(3, "Lokasi minimal 3 karakter"),
tanggalWaktu: z.string().min(3, "Tanggal Waktu minimal 3 karakter"),
status: z.enum(["Selesai", "Proses", "Gagal"]),
penanganan: z.string(),
kronologi: z.string().optional(),
});
interface FormData {
judul: string;
lokasi: string;
tanggalWaktu: string;
kronologi: string;
}
const defaultForm: FormData = {
judul: "",
lokasi: "",
tanggalWaktu: new Date().toISOString(),
kronologi: "",
};
interface FormEditData {
judul: string;
lokasi: string;
tanggalWaktu: string;
@@ -25,15 +37,16 @@ interface FormData {
kronologi: string;
}
const defaultForm: FormData = {
const editForm: FormEditData = {
judul: "",
lokasi: "",
tanggalWaktu: new Date().toISOString(),
kronologi: "",
status: "Proses",
penanganan: "",
kronologi: "",
};
const laporanPublikState = proxy({
create: {
form: { ...defaultForm },
@@ -185,7 +198,7 @@ const laporanPublikState = proxy({
},
edit: {
id: "",
form: { ...defaultForm },
form: { ...editForm },
loading: false,
async load(id: string) {
if (!id) {
@@ -291,7 +304,7 @@ const laporanPublikState = proxy({
},
reset() {
laporanPublikState.edit.id = "";
laporanPublikState.edit.form = { ...defaultForm };
laporanPublikState.edit.form = { ...editForm };
},
}
});

7
src/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan.ts
View File

@@ -31,11 +31,13 @@ const templateForm = z.object({
doctorSign: z.object({
content: z.string().min(1, "Content harus diisi"),
}),
imageId: z.string().min(1, "Image ID harus diisi"),
});
const defaultForm = {
title: "",
content: "",
imageId: "",
introduction: {
content: "",
},
@@ -59,6 +61,7 @@ const defaultForm = {
doctorSign: {
content: "",
},
};
const artikelKesehatanState = proxy({
@@ -112,6 +115,7 @@ const artikelKesehatanState = proxy({
firstaid: true;
mythvsfact: true;
doctorsign: true;
image: true;
};
}>[]
| null,
@@ -159,6 +163,7 @@ const artikelKesehatanState = proxy({
firstaid: true;
mythvsfact: true;
doctorsign: true;
image: true;
};
}> | null,
loading: false,
@@ -213,6 +218,7 @@ const artikelKesehatanState = proxy({
doctorSign: {
content: data.doctorsign.content,
},
imageId: data.imageId,
};
},
async submit() {
@@ -253,6 +259,7 @@ const artikelKesehatanState = proxy({
doctorSign: {
content: artikelKesehatanState.edit.form.doctorSign.content,
},
imageId: artikelKesehatanState.edit.form.imageId,
};
const res = await fetch(

237
src/app/admin/(dashboard)/inovasi/desa-digital-smart-village/create/page.tsx
View File

@@ -1,7 +1,18 @@
'use client'
'use client';
import colors from '@/con/colors';
import ApiFetch from '@/lib/api-fetch';
import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
import {
Box,
Button,
Group,
Image,
Paper,
Stack,
Text,
TextInput,
Title,
Tooltip,
} from '@mantine/core';
import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
@@ -11,139 +22,167 @@ import CreateEditor from '../../../_com/createEditor';
import desaDigitalState from '../../../_state/inovasi/desa-digital';
import { Dropzone } from '@mantine/dropzone';
function CreateDesaDigital() {
const stateDesaDigital = useProxy(desaDigitalState)
const stateDesaDigital = useProxy(desaDigitalState);
const [previewImage, setPreviewImage] = useState<string | null>(null);
const [file, setFile] = useState<File | null>(null);
const router = useRouter()
const router = useRouter();
const resetForm = () => {
stateDesaDigital.create.form = {
name: "",
deskripsi: "",
imageId: "",
}
setPreviewImage(null)
setFile(null)
}
name: '',
deskripsi: '',
imageId: '',
};
setPreviewImage(null);
setFile(null);
};
const handleSubmit = async () => {
if (!file) {
return toast.error("Silahkan pilih file gambar terlebih dahulu")
return toast.warn('Silakan pilih file gambar terlebih dahulu');
}
try {
// Upload the image first
// Upload gambar dulu
const uploadRes = await ApiFetch.api.fileStorage.create.post({
file: file,
name: file.name
})
file,
name: file.name,
});
const uploaded = uploadRes.data?.data
const uploaded = uploadRes.data?.data;
if (!uploaded?.id) {
return toast.error("Gagal upload gambar")
return toast.error('Gagal mengunggah gambar');
}
// Set the image ID in the form
stateDesaDigital.create.form.imageId = uploaded.id
// Submit the form
const success = await stateDesaDigital.create.create()
// Set imageId ke form
stateDesaDigital.create.form.imageId = uploaded.id;
// Submit form
const success = await stateDesaDigital.create.create();
if (success) {
resetForm()
router.push("/admin/inovasi/desa-digital-smart-village")
resetForm();
router.push('/admin/inovasi/desa-digital-smart-village');
}
} catch (error) {
console.error("Error in handleSubmit:", error)
toast.error("Terjadi kesalahan saat menyimpan data")
console.error('Error in handleSubmit:', error);
toast.error('Terjadi kesalahan saat menyimpan data');
}
};
}
return (
<Box>
<Box mb={10}>
<Button variant="subtle" onClick={() => router.back()}>
<IconArrowBack color={colors['blue-button']} size={25} />
</Button>
</Box>
<Paper bg={colors["white-1"]} p={"md"} w={{ base: "100%", md: "50%" }}>
<Stack gap={"xs"}>
<Title order={3}>Create Desa Digital Smart Village</Title>
<Box px={{ base: 'sm', md: 'lg' }} py="md">
{/* Header */}
<Group mb="md">
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
</Tooltip>
<Title order={4} ml="sm" c="dark">
Tambah Desa Digital Smart Village
</Title>
</Group>
{/* Card */}
<Paper
w={{ base: '100%', md: '60%' }}
bg={colors['white-1']}
p="lg"
radius="md"
shadow="sm"
style={{ border: '1px solid #e0e0e0' }}
>
<Stack gap="md">
{/* Nama */}
<TextInput
label="Nama Desa Digital Smart Village"
placeholder="Masukkan nama desa digital smart village"
value={stateDesaDigital.create.form.name}
onChange={(val) => {
stateDesaDigital.create.form.name = val.target.value;
}}
label={<Text fz={"sm"} fw={"bold"}>Nama Desa Digital Smart Village</Text>}
placeholder="masukkan nama desa digital smart village"
onChange={(e) => (stateDesaDigital.create.form.name = e.target.value)}
required
/>
{/* Deskripsi */}
<Box>
<Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
<Text fw="bold" fz="sm" mb={6}>
Deskripsi
</Text>
<CreateEditor
value={stateDesaDigital.create.form.deskripsi}
onChange={(htmlContent) => {
stateDesaDigital.create.form.deskripsi = htmlContent;
onChange={(val) => {
stateDesaDigital.create.form.deskripsi = val;
}}
/>
</Box>
{/* Upload Gambar */}
<Box>
<Text fz={"md"} fw={"bold"}>Gambar</Text>
<Box>
<Dropzone
onDrop={(files) => {
const selectedFile = files[0]; // Ambil file pertama
if (selectedFile) {
setFile(selectedFile);
setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
}
}}
onReject={() => toast.error('File tidak valid.')}
maxSize={5 * 1024 ** 2} // Maks 5MB
accept={{ 'image/*': [] }}
>
<Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
<Dropzone.Accept>
<IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
</Dropzone.Accept>
<Dropzone.Reject>
<IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
</Dropzone.Reject>
<Dropzone.Idle>
<IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
</Dropzone.Idle>
<Text fw="bold" fz="sm" mb={6}>
Gambar
</Text>
<Dropzone
onDrop={(files) => {
const selectedFile = files[0];
if (selectedFile) {
setFile(selectedFile);
setPreviewImage(URL.createObjectURL(selectedFile));
}
}}
onReject={() => toast.error('File tidak valid, gunakan format gambar')}
maxSize={5 * 1024 ** 2}
accept={{ 'image/*': [] }}
radius="md"
p="xl"
>
<Group justify="center" gap="xl" mih={180}>
<Dropzone.Accept>
<IconUpload size={48} color="var(--mantine-color-blue-6)" stroke={1.5} />
</Dropzone.Accept>
<Dropzone.Reject>
<IconX size={48} color="var(--mantine-color-red-6)" stroke={1.5} />
</Dropzone.Reject>
<Dropzone.Idle>
<IconPhoto size={48} color="var(--mantine-color-dimmed)" stroke={1.5} />
</Dropzone.Idle>
</Group>
<Text ta="center" mt="sm" size="sm" color="dimmed">
Seret gambar atau klik untuk memilih file (maks 5MB)
</Text>
</Dropzone>
<div>
<Text size="xl" inline>
Drag gambar ke sini atau klik untuk pilih file
</Text>
<Text size="sm" c="dimmed" inline mt={7}>
Maksimal 5MB dan harus format gambar
</Text>
</div>
</Group>
</Dropzone>
{/* Tampilkan preview kalau ada */}
{previewImage && (
<Box mt="sm">
<Image
src={previewImage}
alt="Preview"
style={{
maxWidth: '100%',
maxHeight: '200px',
objectFit: 'contain',
borderRadius: '8px',
border: '1px solid #ddd',
}}
/>
</Box>
)}
</Box>
{/* Preview */}
{previewImage && (
<Box mt="sm" style={{ textAlign: 'center' }}>
<Image
src={previewImage}
alt="Preview"
radius="md"
style={{
maxHeight: 200,
objectFit: 'contain',
border: '1px solid #ddd',
}}
/>
</Box>
)}
</Box>
<Button bg={colors['blue-button']} onClick={handleSubmit}>Simpan</Button>
{/* Tombol Submit */}
<Group justify="right">
<Button
onClick={handleSubmit}
radius="md"
size="md"
style={{
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}
>
Simpan
</Button>
</Group>
</Stack>
</Paper>
</Box>

158
src/app/admin/(dashboard)/inovasi/desa-digital-smart-village/page.tsx
View File

@@ -1,13 +1,30 @@
'use client'
import colors from '@/con/colors';
import { Box, Button, Center, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Pagination } 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 { IconDeviceImac, IconSearch } from '@tabler/icons-react';
import { IconDeviceImac, IconPlus, IconSearch } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
import { useProxy } from 'valtio/utils';
import HeaderSearch from '../../_com/header';
import JudulList from '../../_com/judulList';
import desaDigitalState from '../../_state/inovasi/desa-digital';
function DesaDigitalSmartVillage() {
@@ -15,8 +32,8 @@ function DesaDigitalSmartVillage() {
return (
<Box>
<HeaderSearch
title='Desa Digital Smart Village'
placeholder='pencarian'
title="Desa Digital Smart Village"
placeholder="Cari inovasi digital desa..."
searchIcon={<IconSearch size={20} />}
value={search}
onChange={(e) => setSearch(e.currentTarget.value)}
@@ -27,69 +44,114 @@ function DesaDigitalSmartVillage() {
}
function ListDesaDigitalSmartVillage({ search }: { search: string }) {
const state = useProxy(desaDigitalState)
const router = useRouter()
const state = useProxy(desaDigitalState);
const router = useRouter();
const {
data,
page,
totalPages,
loading,
load,
} = state.findMany
const { data, page, totalPages, loading, load } = state.findMany;
useShallowEffect(() => {
load(page, 10, search)
}, [page, search])
load(page, 10, search);
}, [page, search]);
const filteredData = data || []
const filteredData = data || [];
if (loading || !data) {
return (
<Stack py={10}>
<Skeleton h={500} />
<Skeleton height={600} radius="md" />
</Stack>
)
);
}
return (
<Box py={10}>
<Paper bg={colors['white-1']} p={'md'}>
<JudulList
title='List Desa Digital Smart Village'
href='/admin/inovasi/desa-digital-smart-village/create'
/>
<Table striped withTableBorder withRowBorders>
<TableThead>
<TableTr>
<TableTh>Nama Inovasi</TableTh>
<TableTh>Deskripsi Singkat Inovasi</TableTh>
<TableTh>Detail</TableTh>
</TableTr>
</TableThead>
<TableTbody>
{filteredData.map((item) => (
<TableTr key={item.id}>
<TableTd>{item.name}</TableTd>
<TableTd>
<Text lineClamp={1} truncate="end" fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
</TableTd>
<TableTd>
<Button onClick={() => router.push(`/admin/inovasi/desa-digital-smart-village/${item.id}`)}>
<IconDeviceImac size={20} />
</Button>
</TableTd>
<Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
<Group justify="space-between" mb="md">
<Title order={4}>List Desa Digital Smart Village</Title>
<Tooltip label="Tambah Inovasi" withArrow>
<Button
leftSection={<IconPlus size={18} />}
color="blue"
variant="light"
onClick={() =>
router.push('/admin/inovasi/desa-digital-smart-village/create')
}
>
Tambah Baru
</Button>
</Tooltip>
</Group>
<Box style={{ overflowX: 'auto' }}>
<Table highlightOnHover>
<TableThead>
<TableTr>
<TableTh style={{ width: '30%' }}>Nama Inovasi</TableTh>
<TableTh style={{ width: '50%' }}>
Deskripsi Singkat Inovasi
</TableTh>
<TableTh style={{ width: '20%' }}>Aksi</TableTh>
</TableTr>
))}
</TableTbody>
</Table>
</TableThead>
<TableTbody>
{filteredData.length > 0 ? (
filteredData.map((item) => (
<TableTr key={item.id}>
<TableTd>
<Text fw={500} truncate="end" lineClamp={1}>
{item.name}
</Text>
</TableTd>
<TableTd>
<Text
fz="sm"
c="dimmed"
lineClamp={2}
dangerouslySetInnerHTML={{ __html: item.deskripsi }}
/>
</TableTd>
<TableTd>
<Button
variant="light"
color="blue"
onClick={() =>
router.push(
`/admin/inovasi/desa-digital-smart-village/${item.id}`
)
}
>
<IconDeviceImac size={20} />
<Text ml={5}>Detail</Text>
</Button>
</TableTd>
</TableTr>
))
) : (
<TableTr>
<TableTd colSpan={3}>
<Center py={20}>
<Text color="dimmed">
Tidak ada data inovasi digital yang cocok
</Text>
</Center>
</TableTd>
</TableTr>
)}
</TableTbody>
</Table>
</Box>
</Paper>
<Center>
<Pagination
value={page}
onChange={(newPage) => load(newPage)} // ini penting!
onChange={(newPage) => {
load(newPage, 10);
window.scrollTo({ top: 0, behavior: 'smooth' });
}}
total={totalPages}
mt="md"
mb="md"
color="blue"
radius="md"
/>
</Center>
</Box>

12
src/app/admin/(dashboard)/inovasi/program-kreatif-desa/[id]/edit/page.tsx
View File

@@ -35,20 +35,20 @@ function EditProgramKreatifDesa() {
const loadProgramKreatif = async () => {
const id = params?.id as string;
if (!id) return;
try {
const data = await stateProgramKreatif.update.load(id);
if (data) {
// ⬇️ FIX PENTING: tambahkan ini
stateProgramKreatif.update.id = id;
stateProgramKreatif.update.form = {
name: data.name,
slug: data.slug,
deskripsi: data.deskripsi,
icon: data.icon,
};
setFormData({
name: data.name,
slug: data.slug,
@@ -61,10 +61,10 @@ function EditProgramKreatifDesa() {
toast.error("Gagal memuat data program kreatif");
}
}
loadProgramKreatif();
}, [params?.id]);
const handleSubmit = async () => {
@@ -134,7 +134,7 @@ function EditProgramKreatifDesa() {
setFormData((prev) => ({ ...prev, icon: value }));
stateProgramKreatif.update.form.icon = value;
}}
/>
/>
</Box>

196
src/app/admin/(dashboard)/keamanan/kontak-darurat/kontak-darurat-item/[id]/edit/page.tsx
View File

@@ -1,29 +1,36 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import { IconKey } from '@/app/admin/(dashboard)/_com/iconMap';
import SelectIconProgramEdit from '@/app/admin/(dashboard)/_com/selectIconEdit';
import kontakDarurat from '@/app/admin/(dashboard)/_state/keamanan/kontak-darurat-keamanan';
import colors from '@/con/colors';
import ApiFetch from '@/lib/api-fetch';
import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
import { Dropzone } from '@mantine/dropzone';
import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
import {
Box,
Button,
Group,
Paper,
Stack,
Text,
TextInput,
Title,
Tooltip,
} from '@mantine/core';
import { IconArrowBack } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
import { toast } from 'react-toastify';
import { useProxy } from 'valtio/utils';
function EditKontakItem() {
const router = useRouter();
const kontakState = useProxy(kontakDarurat.kontakDaruratItem)
const params = useParams()
const kontakState = useProxy(kontakDarurat.kontakDaruratItem);
const params = useParams();
const [previewUtama, setPreviewUtama] = useState<string | null>(null);
const [fileUtama, setFileUtama] = useState<File | null>(null);
const [formData, setFormData] = useState({
name: kontakState.update.form.nama || '',
imageId: kontakState.update.form.imageId || '',
nomorTelepon: kontakState.update.form.nomorTelepon || '',
})
icon: kontakState.update.form.icon || '',
});
useEffect(() => {
const loadKontakDarurat = async () => {
@@ -35,17 +42,13 @@ function EditKontakItem() {
if (data) {
setFormData({
name: data.nama || '',
imageId: data.imageId || '',
nomorTelepon: data.nomorTelepon || '',
icon: data.icon || '',
});
if (data?.image?.link) {
setPreviewUtama(data.image.link);
}
}
} catch (error) {
console.error("Error loading kontak darurat:", error);
toast.error("Gagal memuat data kontak darurat");
console.error('Error loading kontak darurat:', error);
toast.error('Gagal memuat data kontak darurat');
}
};
@@ -57,115 +60,84 @@ function EditKontakItem() {
kontakState.update.form = {
...kontakState.update.form,
nama: formData.name,
imageId: formData.imageId,
nomorTelepon: formData.nomorTelepon,
}
if (fileUtama) {
const res = await ApiFetch.api.fileStorage.create.post({ file: fileUtama, name: fileUtama.name });
const uploaded = res.data?.data;
if (!uploaded?.id) {
return toast.error("Gagal upload gambar");
}
kontakState.update.form.imageId = uploaded.id;
}
icon: formData.icon,
};
await kontakState.update.update();
toast.success("Kontak Darurat berhasil diperbarui!");
router.push("/admin/keamanan/kontak-darurat/kontak-darurat-item");
toast.success('Kontak Darurat berhasil diperbarui!');
router.push('/admin/keamanan/kontak-darurat/kontak-darurat-item');
} catch (error) {
console.error("Error updating kontak darurat:", error);
toast.error("Terjadi kesalahan saat memperbarui kontak darurat");
console.error('Error updating kontak darurat:', error);
toast.error('Terjadi kesalahan saat memperbarui kontak darurat');
}
}
};
return (
<Box>
<Box mb={10}>
<Button onClick={() => router.back()} variant='subtle' color={'blue'}>
<IconArrowBack color={colors['blue-button']} size={25} />
</Button>
</Box>
<Box px={{ base: 'sm', md: 'lg' }} py="md">
{/* Header */}
<Group mb="md">
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
</Tooltip>
<Title order={4} ml="sm" c="dark">
Edit Kontak Darurat Item
</Title>
</Group>
<Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
<Stack gap={"xs"}>
<Title order={4}>Edit Kontak Darurat</Title>
{/* Form */}
<Paper
w={{ base: '100%', md: '50%' }}
bg={colors['white-1']}
p="lg"
radius="md"
shadow="sm"
style={{ border: '1px solid #e0e0e0' }}
>
<Stack gap="md">
<TextInput
label="Nama Kontak"
placeholder="Masukkan nama kontak"
value={formData.name}
onChange={(val) => {
setFormData({ ...formData, name: val.target.value });
}}
label={<Text fw={"bold"} fz={"sm"}>Nama Kontak</Text>}
placeholder='Masukkan nama Kontak'
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
required
/>
<TextInput
label="Nomor Telepon"
placeholder="Masukkan nomor telepon"
value={formData.nomorTelepon}
onChange={(val) => {
setFormData({ ...formData, nomorTelepon: val.target.value });
}}
label={<Text fw={"bold"} fz={"sm"}>Nomor Telepon</Text>}
placeholder='Masukkan nomor telepon'
onChange={(e) => setFormData({ ...formData, nomorTelepon: e.target.value })}
required
/>
<Box>
<Text fz={"md"} fw={"bold"}>Gambar</Text>
<Box>
<Dropzone
onDrop={(files) => {
const selectedFile = files[0]; // Ambil file pertama
if (selectedFile) {
setFileUtama(selectedFile);
setPreviewUtama(URL.createObjectURL(selectedFile)); // Buat preview
}
}}
onReject={() => toast.error('File tidak valid.')}
maxSize={5 * 1024 ** 2} // Maks 5MB
accept={{ 'image/*': [] }}
>
<Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
<Dropzone.Accept>
<IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
</Dropzone.Accept>
<Dropzone.Reject>
<IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
</Dropzone.Reject>
<Dropzone.Idle>
<IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
</Dropzone.Idle>
<div>
<Text size="xl" inline>
Drag gambar ke sini atau klik untuk pilih file
</Text>
<Text size="sm" c="dimmed" inline mt={7}>
Maksimal 5MB dan harus format gambar
</Text>
</div>
</Group>
</Dropzone>
{/* Tampilkan preview kalau ada */}
{previewUtama && (
<Box mt="sm">
<Image
src={previewUtama}
alt="Preview"
style={{
maxWidth: '100%',
maxHeight: '200px',
objectFit: 'contain',
borderRadius: '8px',
border: '1px solid #ddd',
}}
/>
</Box>
)}
</Box>
<Text fw="bold" fz="sm" mb={6}>
Ikon Program Kreatif Desa
</Text>
<SelectIconProgramEdit
value={formData.icon as IconKey}
onChange={(value) => {
setFormData((prev) => ({ ...prev, icon: value }));
kontakState.update.form.icon = value;
}}
/>
</Box>
<Group>
<Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
<Group justify="right">
<Button
onClick={handleSubmit}
radius="md"
size="md"
style={{
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}
>
Simpan
</Button>
</Group>
</Stack>
</Paper>

52
src/app/admin/(dashboard)/keamanan/kontak-darurat/kontak-darurat-item/[id]/page.tsx
View File

@@ -1,11 +1,12 @@
'use client'
import colors from '@/con/colors';
import { Box, Button, Group, Image, Paper, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
import { IconKey, IconMapper } from '@/app/admin/(dashboard)/_com/iconMap';
import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
import kontakDarurat from '@/app/admin/(dashboard)/_state/keamanan/kontak-darurat-keamanan';
import colors from '@/con/colors';
import { Box, Button, Group, Paper, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
import { useState } from 'react';
import { useProxy } from 'valtio/utils';
@@ -62,48 +63,31 @@ function DetailKontakDarurat() {
>
<Stack gap="md">
<Text fz="2xl" fw="bold" c={colors['blue-button']}>
Detail Kontak Darurat
Detail Kontak Darurat Item
</Text>
<Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
<Stack gap="sm">
{/* Judul */}
<Box>
<Text fz="lg" fw="bold">Judul Kontak Darurat</Text>
<Text fz="lg" fw="bold">Judul Kontak Darurat Item</Text>
<Text fz="md" c="dimmed">{data?.nama || '-'}</Text>
</Box>
<Box>
<Text fz="lg" fw="bold">Judul Kontak Darurat</Text>
<Text fz="md" c="dimmed">{data?.nama || '-'}</Text>
<Text fz="lg" fw="bold">Nomor Telepon Kontak Darurat Item</Text>
<Text fz="md" c="dimmed">{data?.nomorTelepon || '-'}</Text>
</Box>
{/* Gambar Utama */}
<Box>
<Text fz="lg" fw="bold">Gambar</Text>
<Image
w={{ base: 150, md: 490 }}
src={data?.image?.link}
alt="gambar kontak darurat"
/>
</Box>
{/* Kontak Item */}
<Box>
<Text fz="lg" fw="bold">Kontak</Text>
<Stack>
<Box>
<Text fz="md" fw="bold">{data.nama}</Text>
<Text fz="md" c="dimmed">{data.nomorTelepon}</Text>
{data.image?.link && (
<Image
w={{ base: 120, md: 200 }}
src={data.image.link}
alt={`gambar kontak ${data.nama}`}
/>
)}
</Box>
</Stack>
<Text fz={"lg"} fw={"bold"}>Ikon Kontak Darurat</Text>
{data?.icon && (
<IconMapper
name={data?.icon as IconKey}
size={32}
color={colors['blue-button']}
/>
)}
</Box>
{/* Aksi */}
@@ -126,7 +110,7 @@ function DetailKontakDarurat() {
<Tooltip label="Edit Data" withArrow position="top">
<Button
color="green"
onClick={() => router.push(`/admin/keamanan/kontak-darurat/${data.id}/edit`)}
onClick={() => router.push(`/admin/keamanan/kontak-darurat/kontak-darurat-item/${data.id}/edit`)}
variant="light"
radius="md"
size="md"

93
src/app/admin/(dashboard)/keamanan/kontak-darurat/kontak-darurat-item/create/page.tsx
View File

@@ -1,59 +1,34 @@
'use client'
import SelectIconProgram from '@/app/admin/(dashboard)/_com/selectIcon';
import kontakDarurat from '@/app/admin/(dashboard)/_state/keamanan/kontak-darurat-keamanan';
import colors from '@/con/colors';
import ApiFetch from '@/lib/api-fetch';
import {
Box,
Button,
Group,
Image,
Paper,
Stack,
Text,
TextInput,
Title,
Tooltip,
Tooltip
} from '@mantine/core';
import { Dropzone } from '@mantine/dropzone';
import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
import { IconArrowBack } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
import { toast } from 'react-toastify';
import { useProxy } from 'valtio/utils';
function CreateKontakItem() {
const kontakState = useProxy(kontakDarurat.kontakDaruratItem);
const router = useRouter();
const [fileUtama, setFileUtama] = useState<File | null>(null);
const [previewUtama, setPreviewUtama] = useState<string | null>(null);
const resetForm = () => {
kontakState.create.form = {
nama: '',
imageId: '',
icon: '',
nomorTelepon: '',
};
setPreviewUtama(null);
setFileUtama(null);
};
const handleSubmit = async () => {
if (!fileUtama) {
return toast.warn('Pilih file gambar kategori terlebih dahulu');
}
const res = await ApiFetch.api.fileStorage.create.post({
file: fileUtama,
name: fileUtama.name,
});
const uploaded = res.data?.data;
if (!uploaded?.id) {
return toast.error('Gagal mengupload gambar kategori');
}
kontakState.create.form.imageId = uploaded.id;
await kontakState.create.create();
resetForm();
router.push('/admin/keamanan/kontak-darurat/kontak-darurat-item');
@@ -109,67 +84,11 @@ function CreateKontakItem() {
required
/>
{/* Upload Gambar Kategori */}
<Box>
<Text fz="sm" fw="bold">
Gambar Kontak Darurat
</Text>
<Dropzone
onDrop={(files) => {
const selectedFile = files[0];
if (selectedFile) {
setFileUtama(selectedFile);
setPreviewUtama(URL.createObjectURL(selectedFile));
}
}}
onReject={() => toast.error('File tidak valid.')}
maxSize={5 * 1024 ** 2}
accept={{ 'image/*': [] }}
>
<Group
justify="center"
gap="xl"
mih={220}
style={{ pointerEvents: 'none' }}
>
<Dropzone.Accept>
<IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
</Dropzone.Accept>
<Dropzone.Reject>
<IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
</Dropzone.Reject>
<Dropzone.Idle>
<IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
</Dropzone.Idle>
<div>
<Text size="xl" inline>
Drag gambar ke sini atau klik untuk pilih file
</Text>
<Text size="sm" c="dimmed" inline mt={7}>
Maksimal 5MB dan harus format gambar
</Text>
</div>
</Group>
</Dropzone>
{previewUtama && (
<Box mt="sm">
<Image
src={previewUtama}
alt="Preview"
style={{
maxWidth: '100%',
maxHeight: '200px',
objectFit: 'contain',
borderRadius: '8px',
border: '1px solid #ddd',
}}
/>
</Box>
)}
<Text fz={"sm"} fw={"bold"}>Ikon Kontak Darurat Item</Text>
<SelectIconProgram onChange={(value) => kontakState.create.form.icon = value} />
</Box>
{/* Tombol Submit */}
<Group justify="right">
<Button

87
src/app/admin/(dashboard)/keamanan/kontak-darurat/kontak-darurat-keamanan/[id]/edit/page.tsx
View File

@@ -1,30 +1,24 @@
/* eslint-disable react-hooks/exhaustive-deps */
"use client";
import { IconKey } from "@/app/admin/(dashboard)/_com/iconMap";
import SelectIconProgramEdit from "@/app/admin/(dashboard)/_com/selectIconEdit";
import kontakDarurat from "@/app/admin/(dashboard)/_state/keamanan/kontak-darurat-keamanan";
import colors from "@/con/colors";
import ApiFetch from "@/lib/api-fetch";
import {
Box,
Button,
Center,
Group,
Image,
MultiSelect,
Paper,
Stack,
Text,
TextInput,
Title,
Tooltip,
Tooltip
} from "@mantine/core";
import { Dropzone } from "@mantine/dropzone";
import {
IconArrowBack,
IconImageInPicture,
IconPhoto,
IconUpload,
IconX,
IconArrowBack
} from "@tabler/icons-react";
import { useParams, useRouter } from "next/navigation";
import { useEffect, useState } from "react";
@@ -35,12 +29,9 @@ function EditKontakDaruratKeamanan() {
const router = useRouter();
const kontakState = useProxy(kontakDarurat.kontakDaruratKeamananState);
const params = useParams();
const [previewUtama, setPreviewUtama] = useState<string | null>(null);
const [fileUtama, setFileUtama] = useState<File | null>(null);
const [formData, setFormData] = useState({
name: kontakState.update.form.nama || "",
imageId: kontakState.update.form.imageId || "",
icon: kontakState.update.form.icon || "",
kategoriId: kontakState.update.form.kategoriId || [],
});
@@ -56,11 +47,9 @@ function EditKontakDaruratKeamanan() {
if (data) {
setFormData({
name: data.nama || "",
imageId: data.imageId || "",
icon: data.icon || "",
kategoriId: data.kategoriId || [],
});
if (data?.image?.link) setPreviewUtama(data.image.link);
}
} catch (error) {
console.error("Error loading kontak darurat:", error);
@@ -77,20 +66,9 @@ function EditKontakDaruratKeamanan() {
kontakState.update.form = {
...kontakState.update.form,
nama: formData.name,
imageId: formData.imageId,
icon: formData.icon,
kategoriId: formData.kategoriId,
};
if (fileUtama) {
const res = await ApiFetch.api.fileStorage.create.post({
file: fileUtama,
name: fileUtama.name,
});
const uploaded = res.data?.data;
if (!uploaded?.id) return toast.error("Gagal upload gambar utama");
kontakState.update.form.imageId = uploaded.id;
}
await kontakState.update.update();
toast.success("Kontak Darurat berhasil diperbarui!");
router.push("/admin/keamanan/kontak-darurat");
@@ -155,52 +133,15 @@ function EditKontakDaruratKeamanan() {
error={!formData.kategoriId.length ? "Pilih minimal satu kategori" : undefined}
/>
{/* Gambar utama */}
<Box>
<Text fz="sm" fw="bold">
Masukkan Gambar
</Text>
<Dropzone
onDrop={(files) => {
const selectedFile = files[0];
if (selectedFile) {
setFileUtama(selectedFile);
setPreviewUtama(URL.createObjectURL(selectedFile));
}
<Text fz={"sm"} fw={"bold"}>Ikon Program Kreatif Desa</Text>
<SelectIconProgramEdit
value={formData.icon as IconKey}
onChange={(value) => {
setFormData((prev) => ({ ...prev, icon: value }));
kontakState.update.form.icon = value;
}}
onReject={() => toast.error("File tidak valid.")}
maxSize={5 * 1024 ** 2}
accept={{ "image/*": [] }}
>
<Group justify="center" gap="xl" mih={220} style={{ pointerEvents: "none" }}>
<Dropzone.Accept>
<IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
</Dropzone.Accept>
<Dropzone.Reject>
<IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
</Dropzone.Reject>
<Dropzone.Idle>
<IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
</Dropzone.Idle>
<div>
<Text size="xl" inline>
Drag gambar ke sini atau klik untuk pilih file
</Text>
<Text size="sm" c="dimmed" inline mt={7}>
Maksimal 5MB dan harus format gambar
</Text>
</div>
</Group>
</Dropzone>
{previewUtama ? (
<Image alt="" src={previewUtama} w={200} h={200} mt="sm" />
) : (
<Center w={200} h={200} bg={"gray"} mt="sm">
<IconImageInPicture />
</Center>
)}
/>
</Box>
{/* Submit */}

36
src/app/admin/(dashboard)/keamanan/kontak-darurat/kontak-darurat-keamanan/[id]/page.tsx
View File

@@ -1,11 +1,12 @@
'use client'
import colors from '@/con/colors';
import { Box, Button, Group, Image, Paper, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
import { IconKey, IconMapper } from '@/app/admin/(dashboard)/_com/iconMap';
import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
import kontakDarurat from '@/app/admin/(dashboard)/_state/keamanan/kontak-darurat-keamanan';
import colors from '@/con/colors';
import { Box, Button, Group, Paper, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
import { useState } from 'react';
import { useProxy } from 'valtio/utils';
@@ -17,7 +18,7 @@ function DetailKontakDaruratKeamanan() {
const kontakState = useProxy(kontakDarurat.kontakDaruratKeamananState);
useShallowEffect(() => {
kontakDarurat.kontakDaruratItem.findUnique.load(params?.id as string);
kontakDarurat.kontakDaruratItem.findMany.load();
kontakState.findUnique.load(params?.id as string);
}, []);
@@ -74,14 +75,15 @@ function DetailKontakDaruratKeamanan() {
<Text fz="md" c="dimmed">{data?.nama || '-'}</Text>
</Box>
{/* Gambar Utama */}
<Box>
<Text fz="lg" fw="bold">Gambar</Text>
<Image
w={{ base: 150, md: 490 }}
src={data?.image?.link}
alt="gambar kontak darurat"
/>
<Text fz={"lg"} fw={"bold"}>Ikon Program Kreatif Desa</Text>
{data?.icon && (
<IconMapper
name={data?.icon as IconKey}
size={32}
color={colors['blue-button']}
/>
)}
</Box>
{/* Kontak Items */}
@@ -92,11 +94,11 @@ function DetailKontakDaruratKeamanan() {
<Box key={index}>
<Text fz="md" fw="bold">{item.kontakItem.nama}</Text>
<Text fz="md" c="dimmed">{item.kontakItem.nomorTelepon}</Text>
{item.kontakItem.image?.link && (
<Image
w={{ base: 120, md: 200 }}
src={item.kontakItem.image.link}
alt={`gambar kontak`}
{item.kontakItem.icon && (
<IconMapper
name={item.kontakItem.icon as IconKey}
size={32}
color={colors['blue-button']}
/>
)}
</Box>

91
src/app/admin/(dashboard)/keamanan/kontak-darurat/kontak-darurat-keamanan/create/page.tsx
View File

@@ -1,35 +1,28 @@
'use client'
import SelectIconProgram from '@/app/admin/(dashboard)/_com/selectIcon';
import kontakDarurat from '@/app/admin/(dashboard)/_state/keamanan/kontak-darurat-keamanan';
import colors from '@/con/colors';
import ApiFetch from '@/lib/api-fetch';
import {
Box,
Button,
Group,
Image,
MultiSelect,
Paper,
Stack,
Text,
TextInput,
Title,
Tooltip,
Tooltip
} from '@mantine/core';
import { Dropzone } from '@mantine/dropzone';
import { useShallowEffect } from '@mantine/hooks';
import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
import { IconArrowBack } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
import { toast } from 'react-toastify';
import { useProxy } from 'valtio/utils';
function CreateKontakDaruratKeamanan() {
const kontakState = useProxy(kontakDarurat.kontakDaruratKeamananState);
const router = useRouter();
const [fileUtama, setFileUtama] = useState<File | null>(null);
const [previewUtama, setPreviewUtama] = useState<string | null>(null);
useShallowEffect(() => {
kontakDarurat.kontakDaruratItem.findMany.load();
}, []);
@@ -37,29 +30,12 @@ function CreateKontakDaruratKeamanan() {
const resetForm = () => {
kontakState.create.form = {
nama: '',
imageId: '',
icon: '',
kategoriId: []
};
setPreviewUtama(null);
setFileUtama(null);
};
const handleSubmit = async () => {
if (!fileUtama) {
return toast.warn('Pilih file gambar kategori terlebih dahulu');
}
const res = await ApiFetch.api.fileStorage.create.post({
file: fileUtama,
name: fileUtama.name,
});
const uploaded = res.data?.data;
if (!uploaded?.id) {
return toast.error('Gagal mengupload gambar kategori');
}
kontakState.create.form.imageId = uploaded.id;
await kontakState.create.create();
resetForm();
router.push('/admin/keamanan/kontak-darurat/kontak-darurat-keamanan');
@@ -105,64 +81,9 @@ function CreateKontakDaruratKeamanan() {
required
/>
{/* Upload Gambar Kategori */}
<Box>
<Text fz="sm" fw="bold">
Masukkan Gambar
</Text>
<Dropzone
onDrop={(files) => {
const selectedFile = files[0];
if (selectedFile) {
setFileUtama(selectedFile);
setPreviewUtama(URL.createObjectURL(selectedFile));
}
}}
onReject={() => toast.error('File tidak valid.')}
maxSize={5 * 1024 ** 2}
accept={{ 'image/*': [] }}
>
<Group
justify="center"
gap="xl"
mih={220}
style={{ pointerEvents: 'none' }}
>
<Dropzone.Accept>
<IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
</Dropzone.Accept>
<Dropzone.Reject>
<IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
</Dropzone.Reject>
<Dropzone.Idle>
<IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
</Dropzone.Idle>
<div>
<Text size="xl" inline>
Drag gambar ke sini atau klik untuk pilih file
</Text>
<Text size="sm" c="dimmed" inline mt={7}>
Maksimal 5MB dan harus format gambar
</Text>
</div>
</Group>
</Dropzone>
{previewUtama && (
<Box mt="sm">
<Image
src={previewUtama}
alt="Preview"
style={{
maxWidth: '100%',
maxHeight: '200px',
objectFit: 'contain',
borderRadius: '8px',
border: '1px solid #ddd',
}}
/>
</Box>
)}
<Text fz={"sm"} fw={"bold"}>Ikon Kontak Darurat</Text>
<SelectIconProgram onChange={(value) => kontakState.create.form.icon = value} />
</Box>
<MultiSelect

25
src/app/admin/(dashboard)/keamanan/laporan-publik/[id]/page.tsx
View File

@@ -73,7 +73,7 @@ function DetailLaporanPublik() {
Detail Laporan Publik
</Text>
<Paper bg={colors['BG-trans']} p="md" radius="md" shadow="xs">
<Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
<Stack gap="sm">
<Box>
<Text fz="lg" fw="bold">Judul Laporan Publik</Text>
@@ -96,7 +96,27 @@ function DetailLaporanPublik() {
<Box>
<Text fz="lg" fw="bold">Status</Text>
<Text fz="md" c="dimmed">{data.status || '-'}</Text>
<Box
style={{
display: 'inline-block',
padding: '4px 12px',
borderRadius: '16px',
backgroundColor:
data.status === 'Selesai' ? '#94EF95FF' :
data.status === 'Proses' ? '#F1D295FF' :
'#F38E8EFF',
color:
data.status === 'Selesai' ? '#01BA01FF' :
data.status === 'Proses' ? '#B67A00FF' :
'#AE1700FF',
fontWeight: 900,
fontSize: '0.75rem',
textAlign: 'center',
minWidth: '80px',
}}
>
{data.status || '-'}
</Box>
</Box>
<Box>
@@ -109,7 +129,6 @@ function DetailLaporanPublik() {
{data.penanganan?.length ? (
data.penanganan.map((item, index) => (
<Box key={index} pl="sm">
<Text fz="md" fw="bold">Deskripsi Penanganan</Text>
<Text
fz="md"
c="dimmed"

28
src/app/admin/(dashboard)/keamanan/laporan-publik/create/page.tsx
View File

@@ -5,18 +5,16 @@ import {
Button,
Group,
Paper,
Select,
Stack,
Text,
TextInput,
Title,
Tooltip,
Tooltip
} from '@mantine/core';
import { DateTimePicker } from '@mantine/dates';
import { IconArrowBack } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useProxy } from 'valtio/utils';
import CreateEditor from '../../../_com/createEditor';
import laporanPublikState from '../../../_state/keamanan/laporan-publik';
export type Status = 'Selesai' | 'Proses' | 'Gagal';
@@ -30,8 +28,6 @@ function CreateLaporanPublik() {
judul: '',
lokasi: '',
tanggalWaktu: '',
status: 'Proses' as Status,
penanganan: '',
kronologi: '',
};
};
@@ -94,18 +90,6 @@ function CreateLaporanPublik() {
}}
/>
<Select
value={stateLaporan.create.form.status}
onChange={(e) => (stateLaporan.create.form.status = e?.valueOf() as Status)}
label={<Text fw="bold" fz="sm">Status Laporan Publik</Text>}
placeholder="Pilih status laporan publik"
data={[
{ value: 'Selesai', label: 'Selesai' },
{ value: 'Proses', label: 'Proses' },
{ value: 'Gagal', label: 'Gagal' },
]}
/>
<TextInput
value={stateLaporan.create.form.kronologi}
onChange={(e) => (stateLaporan.create.form.kronologi = e.target.value)}
@@ -114,16 +98,6 @@ function CreateLaporanPublik() {
required
/>
<Box>
<Text fw="bold" fz="sm" mb={6}>
Penanganan Laporan Publik
</Text>
<CreateEditor
value={stateLaporan.create.form.penanganan}
onChange={(e) => (stateLaporan.create.form.penanganan = e)}
/>
</Box>
<Group justify="right">
<Button
onClick={handleSubmit}

30
src/app/admin/(dashboard)/keamanan/laporan-publik/page.tsx
View File

@@ -111,12 +111,34 @@ function ListLaporanPublik({ search }: { search: string }) {
</Text>
</TableTd>
<TableTd>
<Text fz="sm">{item.status}</Text>
<Box
style={{
display: 'inline-block',
padding: '4px 12px',
borderRadius: '16px',
backgroundColor:
item.status === 'Selesai' ? '#94EF95FF' :
item.status === 'Proses' ? '#F1D295FF' :
'#F38E8EFF',
color:
item.status === 'Selesai' ? '#01BA01FF' :
item.status === 'Proses' ? '#B67A00FF' :
'#AE1700FF',
fontWeight: 900,
fontSize: '0.75rem',
textAlign: 'center',
minWidth: '80px',
}}
>
{item.status}
</Box>
</TableTd>
<TableTd>
<Text truncate fz="sm" c="dimmed" lineClamp={1}>
{item.kronologi}
</Text>
<Box w={200}>
<Text truncate fz="sm" c="dimmed" lineClamp={1}>
{item.kronologi}
</Text>
</Box>
</TableTd>
<TableTd>
<Button

108
src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/artikel_kesehatan/[id]/edit/page.tsx
View File

@@ -4,10 +4,12 @@
import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
import artikelKesehatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
import colors from '@/con/colors';
import ApiFetch from '@/lib/api-fetch';
import {
Box,
Button,
Group,
Image,
Paper,
Stack,
Text,
@@ -15,7 +17,8 @@ import {
Title,
Tooltip
} from '@mantine/core';
import { IconArrowBack } from '@tabler/icons-react';
import { Dropzone } from '@mantine/dropzone';
import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
import { toast } from 'react-toastify';
@@ -24,6 +27,7 @@ import { useProxy } from 'valtio/utils';
interface ArtikelKesehatanFormBase {
title: string;
content: string;
imageId: string;
introduction: { content: string };
symptom: { title: string; content: string };
prevention: { title: string; content: string };
@@ -37,29 +41,32 @@ function EditArtikelKesehatan() {
const router = useRouter();
const params = useParams();
const [previewImage, setPreviewImage] = useState<string | null>(null);
const [file, setFile] = useState<File | null>(null);
const [formData, setFormData] = useState<ArtikelKesehatanFormBase>({
title: stateArtikelKesehatan.edit.form.title || '',
content: stateArtikelKesehatan.edit.form.content || '',
introduction: { content: stateArtikelKesehatan.edit.form.introduction?.content || '' },
title: stateArtikelKesehatan.edit.form.title,
content: stateArtikelKesehatan.edit.form.content,
imageId: stateArtikelKesehatan.edit.form.imageId,
introduction: { content: stateArtikelKesehatan.edit.form.introduction?.content },
symptom: {
title: stateArtikelKesehatan.edit.form.symptom?.title || '',
content: stateArtikelKesehatan.edit.form.symptom?.content || ''
title: stateArtikelKesehatan.edit.form.symptom?.title,
content: stateArtikelKesehatan.edit.form.symptom?.content
},
prevention: {
title: stateArtikelKesehatan.edit.form.prevention?.title || '',
content: stateArtikelKesehatan.edit.form.prevention?.content || ''
title: stateArtikelKesehatan.edit.form.prevention?.title,
content: stateArtikelKesehatan.edit.form.prevention?.content
},
firstAid: {
title: stateArtikelKesehatan.edit.form.firstAid?.title || '',
content: stateArtikelKesehatan.edit.form.firstAid?.content || ''
title: stateArtikelKesehatan.edit.form.firstAid?.title,
content: stateArtikelKesehatan.edit.form.firstAid?.content
},
mythVsFact: {
title: stateArtikelKesehatan.edit.form.mythVsFact?.title || '',
mitos: stateArtikelKesehatan.edit.form.mythVsFact?.mitos || '',
fakta: stateArtikelKesehatan.edit.form.mythVsFact?.fakta || ''
title: stateArtikelKesehatan.edit.form.mythVsFact?.title,
mitos: stateArtikelKesehatan.edit.form.mythVsFact?.mitos,
fakta: stateArtikelKesehatan.edit.form.mythVsFact?.fakta
},
doctorSign: {
content: stateArtikelKesehatan.edit.form.doctorSign?.content || ''
content: stateArtikelKesehatan.edit.form.doctorSign?.content
}
});
@@ -76,6 +83,7 @@ function EditArtikelKesehatan() {
title: form.title,
content: form.content,
introduction: { content: form.introduction?.content || '' },
imageId: form.imageId,
symptom: {
title: form.symptom?.title || '',
content: form.symptom?.content || ''
@@ -97,6 +105,10 @@ function EditArtikelKesehatan() {
content: form.doctorSign?.content || ''
}
});
if (form?.imageId) {
setPreviewImage(`${process.env.NEXT_PUBLIC_API_URL}/file/${form.imageId}`);
}
}
} catch (error) {
console.error("Error loading artikel kesehatan:", error);
@@ -109,6 +121,20 @@ function EditArtikelKesehatan() {
const handleSubmit = async () => {
try {
stateArtikelKesehatan.edit.form = { ...formData };
if (file) {
const res = await ApiFetch.api.fileStorage.create.post({
file,
name: file.name,
});
const uploaded = res.data?.data;
if (!uploaded?.id) {
return toast.error("Gagal upload gambar");
}
stateArtikelKesehatan.edit.form.imageId = uploaded.id;
}
const success = await stateArtikelKesehatan.edit.submit();
if (success) {
toast.success("Artikel kesehatan berhasil diperbarui!");
@@ -151,6 +177,60 @@ function EditArtikelKesehatan() {
onChange={(e) => setFormData(prev => ({ ...prev, title: e.target.value }))}
required
/>
<Box>
<Text fw="bold" fz="sm" mb={6}>
Gambar Berita
</Text>
<Dropzone
onDrop={(files) => {
const selectedFile = files[0];
if (selectedFile) {
setFile(selectedFile);
setPreviewImage(URL.createObjectURL(selectedFile));
}
}}
onReject={() => toast.error("File tidak valid, gunakan format gambar")}
maxSize={5 * 1024 ** 2}
accept={{ "image/*": [] }}
radius="md"
p="xl"
>
<Group justify="center" gap="xl" mih={180}>
<Dropzone.Accept>
<IconUpload size={48} color={colors["blue-button"]} stroke={1.5} />
</Dropzone.Accept>
<Dropzone.Reject>
<IconX size={48} color="red" stroke={1.5} />
</Dropzone.Reject>
<Dropzone.Idle>
<IconPhoto size={48} color="#868e96" stroke={1.5} />
</Dropzone.Idle>
<Stack gap="xs" align="center">
<Text size="md" fw={500}>
Seret gambar atau klik untuk memilih file
</Text>
<Text size="sm" c="dimmed">
Maksimal 5MB, format gambar wajib
</Text>
</Stack>
</Group>
</Dropzone>
{previewImage && (
<Box mt="sm" style={{ display: "flex", justifyContent: "center" }}>
<Image
src={previewImage}
alt="Preview Gambar"
radius="md"
style={{
maxHeight: 220,
objectFit: "contain",
border: `1px solid ${colors["blue-button"]}`,
}}
/>
</Box>
)}
</Box>
<TextInput
label="Deskripsi"
placeholder="Masukkan deskripsi artikel"

17
src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/artikel_kesehatan/[id]/page.tsx
View File

@@ -6,6 +6,7 @@ import {
Box,
Button,
Group,
Image,
Paper,
Skeleton,
Stack,
@@ -81,6 +82,22 @@ function DetailArtikelKesehatan() {
<Text fz="lg" fw="bold">Judul</Text>
<Text fz="md" c="dimmed">{data.title}</Text>
</Box>
{/* Gambar */}
<Box>
<Text fz="lg" fw="bold">Gambar</Text>
{data.image?.link ? (
<Image
src={data.image.link}
alt={data.title || 'Gambar Berita'}
w={200}
h={200}
radius="md"
fit="cover"
/>
) : (
<Text fz="sm" c="dimmed">Tidak ada gambar</Text>
)}
</Box>
{/* Deskripsi */}
<Box>

76
src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/artikel_kesehatan/create/page.tsx
View File

@@ -2,10 +2,12 @@
import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
import artikelKesehatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
import colors from '@/con/colors';
import ApiFetch from '@/lib/api-fetch';
import {
Box,
Button,
Group,
Image,
Paper,
Stack,
Text,
@@ -13,19 +15,24 @@ import {
Title,
Tooltip,
} from '@mantine/core';
import { IconArrowBack } from '@tabler/icons-react';
import { Dropzone } from '@mantine/dropzone';
import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
import { toast } from 'react-toastify';
import { useProxy } from 'valtio/utils';
function CreateArtikelKesehatan() {
const stateArtikelKesehatan = useProxy(artikelKesehatanState);
const [previewImage, setPreviewImage] = useState<string | null>(null);
const [file, setFile] = useState<File | null>(null);
const router = useRouter();
const resetForm = () => {
stateArtikelKesehatan.create.form = {
title: '',
content: '',
imageId: '',
introduction: {
content: '',
},
@@ -50,10 +57,27 @@ function CreateArtikelKesehatan() {
content: '',
},
};
setPreviewImage(null);
setFile(null);
};
const handleSubmit = async (e?: React.FormEvent) => {
e?.preventDefault();
if (!file) {
return toast.warn('Silakan pilih file gambar terlebih dahulu');
}
const res = await ApiFetch.api.fileStorage.create.post({
file,
name: file.name,
});
const uploaded = res.data?.data;
if (!uploaded?.id) {
return toast.error('Gagal mengunggah gambar, silakan coba lagi');
}
stateArtikelKesehatan.create.form.imageId = uploaded.id;
await stateArtikelKesehatan.create.submit();
toast.success('Data berhasil disimpan');
resetForm();
@@ -89,6 +113,56 @@ function CreateArtikelKesehatan() {
style={{ border: '1px solid #e0e0e0' }}
>
<Stack gap="md">
<Box>
<Text fw="bold" fz="sm" mb={6}>
Gambar Berita
</Text>
<Dropzone
onDrop={(files) => {
const selectedFile = files[0];
if (selectedFile) {
setFile(selectedFile);
setPreviewImage(URL.createObjectURL(selectedFile));
}
}}
onReject={() => toast.error('File tidak valid, gunakan format gambar')}
maxSize={5 * 1024 ** 2}
accept={{ 'image/*': [] }}
radius="md"
p="xl"
>
<Group justify="center" gap="xl" mih={180}>
<Dropzone.Accept>
<IconUpload size={48} color="var(--mantine-color-blue-6)" stroke={1.5} />
</Dropzone.Accept>
<Dropzone.Reject>
<IconX size={48} color="var(--mantine-color-red-6)" stroke={1.5} />
</Dropzone.Reject>
<Dropzone.Idle>
<IconPhoto size={48} color="var(--mantine-color-dimmed)" stroke={1.5} />
</Dropzone.Idle>
</Group>
<Text ta="center" mt="sm" size="sm" color="dimmed">
Seret gambar atau klik untuk memilih file (maks 5MB)
</Text>
</Dropzone>
{previewImage && (
<Box mt="sm" style={{ textAlign: 'center' }}>
<Image
src={previewImage}
alt="Preview Gambar"
radius="md"
style={{
maxHeight: 200,
objectFit: 'contain',
border: '1px solid #ddd',
}}
/>
</Box>
)}
</Box>
<TextInput
label={"Judul"}
placeholder="Masukkan judul"

14
src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/artikel_kesehatan/page.tsx
View File

@@ -5,8 +5,8 @@ import {
Button,
Center,
Group,
Paper,
Pagination,
Paper,
Skeleton,
Stack,
Table,
@@ -20,26 +20,18 @@ import {
Tooltip,
} from '@mantine/core';
import { 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 { useState } from 'react';
import { useProxy } from 'valtio/utils';
import HeaderSearch from '../../../_com/header';
import artikelKesehatanState from '../../../_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
import { useState } from 'react';
function ArtikelKesehatan() {
const router = useRouter();
const [search, setSearch] = useState("");
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='Artikel Kesehatan'