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

fix inputan edit menu: desa, ekonomi, inovasi, keamanan, kesehatan, landing-page, & lingkungan

Browse Source
This commit is contained in:
nico
2025-09-30 21:41:26 +08:00
parent c2f1ab8179
commit 63054cedf0
67 changed files with 3056 additions and 2989 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,5 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
'use client';
import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
import artikelKesehatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
@@ -15,7 +15,7 @@ import {
Text,
TextInput,
Title,
Tooltip
Tooltip,
} from '@mantine/core';
import { Dropzone } from '@mantine/dropzone';
import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
@@ -44,32 +44,18 @@ function EditArtikelKesehatan() {
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,
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
},
prevention: {
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
},
mythVsFact: {
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
}
title: '',
content: '',
imageId: '',
introduction: { content: '' },
symptom: { title: '', content: '' },
prevention: { title: '', content: '' },
firstAid: { title: '', content: '' },
mythVsFact: { title: '', mitos: '', fakta: '' },
doctorSign: { content: '' },
});
// Load data artikel
useEffect(() => {
const loadArtikelKesehatan = async () => {
const id = params?.id as string;
@@ -78,74 +64,89 @@ function EditArtikelKesehatan() {
try {
await stateArtikelKesehatan.edit.load(id);
const { form } = stateArtikelKesehatan.edit;
if (form) {
setFormData({
title: form.title,
content: form.content,
introduction: { content: form.introduction?.content || '' },
imageId: form.imageId,
symptom: {
title: form.symptom?.title || '',
content: form.symptom?.content || ''
},
prevention: {
title: form.prevention?.title || '',
content: form.prevention?.content || ''
},
firstAid: {
title: form.firstAid?.title || '',
content: form.firstAid?.content || ''
},
mythVsFact: {
title: form.mythVsFact?.title || '',
mitos: form.mythVsFact?.mitos || '',
fakta: form.mythVsFact?.fakta || ''
},
doctorSign: {
content: form.doctorSign?.content || ''
}
});
if (!form) return;
if (form?.imageId) {
setPreviewImage(`${process.env.NEXT_PUBLIC_API_URL}/file/${form.imageId}`);
}
setFormData({
title: form.title || '',
content: form.content || '',
imageId: form.imageId || '',
introduction: { content: form.introduction?.content || '' },
symptom: { title: form.symptom?.title || '', content: form.symptom?.content || '' },
prevention: { title: form.prevention?.title || '', content: form.prevention?.content || '' },
firstAid: { title: form.firstAid?.title || '', content: form.firstAid?.content || '' },
mythVsFact: {
title: form.mythVsFact?.title || '',
mitos: form.mythVsFact?.mitos || '',
fakta: form.mythVsFact?.fakta || '',
},
doctorSign: { 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);
toast.error("Gagal memuat data artikel kesehatan");
console.error('Error loading artikel kesehatan:', error);
toast.error('Gagal memuat data artikel kesehatan');
}
};
loadArtikelKesehatan();
}, [params?.id]);
const handleFileChange = (files: File[]) => {
const selectedFile = files[0];
if (!selectedFile) return;
setFile(selectedFile);
setPreviewImage(URL.createObjectURL(selectedFile));
};
const handleSubmit = async () => {
try {
// Copy formData ke global state
stateArtikelKesehatan.edit.form = { ...formData };
// Upload gambar kalau ada
if (file) {
const res = await ApiFetch.api.fileStorage.create.post({
file,
name: file.name,
});
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");
}
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!");
router.push("/admin/kesehatan/data-kesehatan-warga/artikel_kesehatan");
toast.success('Artikel kesehatan berhasil diperbarui!');
router.push('/admin/kesehatan/data-kesehatan-warga/artikel_kesehatan');
}
} catch (error) {
console.error("Error updating artikel kesehatan:", error);
toast.error(error instanceof Error ? error.message : "Gagal memperbarui data artikel kesehatan");
console.error('Error updating artikel kesehatan:', error);
toast.error(error instanceof Error ? error.message : 'Gagal memperbarui data artikel kesehatan');
}
};
const InputText = ({
label,
value,
onChange,
placeholder,
required,
}: {
label: string;
value: string;
onChange: (v: string) => void;
placeholder?: string;
required?: boolean;
}) => (
<TextInput
label={label}
value={value}
placeholder={placeholder}
onChange={(e) => onChange(e.target.value)}
required={required}
/>
);
return (
<Box px={{ base: 'sm', md: 'lg' }} py="md">
{/* Header */}
@@ -170,34 +171,31 @@ function EditArtikelKesehatan() {
style={{ border: '1px solid #e0e0e0' }}
>
<Stack gap="md">
<TextInput
{/* Judul */}
<InputText
label="Judul"
value={formData.title}
onChange={(value) => setFormData((prev) => ({ ...prev, title: value }))}
placeholder="Masukkan judul artikel"
defaultValue={formData.title}
onChange={(e) => setFormData(prev => ({ ...prev, title: e.target.value }))}
required
/>
{/* Gambar */}
<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")}
onDrop={handleFileChange}
onReject={() => toast.error('File tidak valid, gunakan format gambar')}
maxSize={5 * 1024 ** 2}
accept={{ "image/*": [] }}
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} />
<IconUpload size={48} color={colors['blue-button']} stroke={1.5} />
</Dropzone.Accept>
<Dropzone.Reject>
<IconX size={48} color="red" stroke={1.5} />
@@ -215,64 +213,57 @@ function EditArtikelKesehatan() {
</Stack>
</Group>
</Dropzone>
{previewImage && (
<Box mt="sm" style={{ display: "flex", justifyContent: "center" }}>
<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"]}`,
objectFit: 'contain',
border: `1px solid ${colors['blue-button']}`,
}}
loading="lazy"
/>
</Box>
)}
</Box>
<TextInput
{/* Konten */}
<InputText
label="Deskripsi"
value={formData.content}
onChange={(value) => setFormData((prev) => ({ ...prev, content: value }))}
placeholder="Masukkan deskripsi artikel"
defaultValue={formData.content}
onChange={(e) => setFormData(prev => ({ ...prev, content: e.target.value }))}
required
/>
<TextInput
{/* Pendahuluan */}
<InputText
label="Pendahuluan"
placeholder="Masukkan pendahuluan"
defaultValue={formData.introduction.content}
onChange={(e) =>
setFormData(prev => ({
...prev,
introduction: { ...prev.introduction, content: e.target.value }
}))
value={formData.introduction.content}
onChange={(value) =>
setFormData((prev) => ({ ...prev, introduction: { content: value } }))
}
placeholder="Masukkan pendahuluan"
/>
{/* Gejala */}
<Box>
<Text fw="bold">Gejala</Text>
<Stack gap="xs">
<TextInput
<InputText
label="Judul Gejala"
placeholder="Masukkan judul gejala"
defaultValue={formData.symptom.title}
onChange={(e) =>
setFormData(prev => ({
...prev,
symptom: { ...prev.symptom, title: e.target.value }
}))
value={formData.symptom.title}
onChange={(value) =>
setFormData((prev) => ({ ...prev, symptom: { ...prev.symptom, title: value } }))
}
/>
<EditEditor
value={formData.symptom.content}
onChange={(e) =>
setFormData(prev => ({
...prev,
symptom: { ...prev.symptom, content: e }
}))
onChange={(value) =>
setFormData((prev) => ({ ...prev, symptom: { ...prev.symptom, content: value } }))
}
/>
</Stack>
@@ -281,23 +272,17 @@ function EditArtikelKesehatan() {
{/* Pencegahan */}
<Box>
<Text fw="bold">Pencegahan</Text>
<TextInput
<InputText
label="Judul"
defaultValue={formData.prevention.title}
onChange={(e) =>
setFormData(prev => ({
...prev,
prevention: { ...prev.prevention, title: e.target.value }
}))
value={formData.prevention.title}
onChange={(value) =>
setFormData((prev) => ({ ...prev, prevention: { ...prev.prevention, title: value } }))
}
/>
<EditEditor
value={formData.prevention.content}
onChange={(e) =>
setFormData(prev => ({
...prev,
prevention: { ...prev.prevention, content: e }
}))
onChange={(value) =>
setFormData((prev) => ({ ...prev, prevention: { ...prev.prevention, content: value } }))
}
/>
</Box>
@@ -305,23 +290,17 @@ function EditArtikelKesehatan() {
{/* Pertolongan Pertama */}
<Box>
<Text fw="bold">Pertolongan Pertama</Text>
<TextInput
<InputText
label="Judul"
defaultValue={formData.firstAid.title}
onChange={(e) =>
setFormData(prev => ({
...prev,
firstAid: { ...prev.firstAid, title: e.target.value }
}))
value={formData.firstAid.title}
onChange={(value) =>
setFormData((prev) => ({ ...prev, firstAid: { ...prev.firstAid, title: value } }))
}
/>
<EditEditor
value={formData.firstAid.content}
onChange={(e) =>
setFormData(prev => ({
...prev,
firstAid: { ...prev.firstAid, content: e }
}))
onChange={(value) =>
setFormData((prev) => ({ ...prev, firstAid: { ...prev.firstAid, content: value } }))
}
/>
</Box>
@@ -329,48 +308,36 @@ function EditArtikelKesehatan() {
{/* Mitos vs Fakta */}
<Box>
<Text fw="bold">Mitos vs Fakta</Text>
<TextInput
<InputText
label="Judul"
defaultValue={formData.mythVsFact.title}
onChange={(e) =>
setFormData(prev => ({
...prev,
mythVsFact: { ...prev.mythVsFact, title: e.target.value }
}))
value={formData.mythVsFact.title}
onChange={(value) =>
setFormData((prev) => ({ ...prev, mythVsFact: { ...prev.mythVsFact, title: value } }))
}
/>
<Text fw="500">Mitos</Text>
<EditEditor
value={formData.mythVsFact.mitos}
onChange={(e) =>
setFormData(prev => ({
...prev,
mythVsFact: { ...prev.mythVsFact, mitos: e }
}))
onChange={(value) =>
setFormData((prev) => ({ ...prev, mythVsFact: { ...prev.mythVsFact, mitos: value } }))
}
/>
<Text fw="500">Fakta</Text>
<EditEditor
value={formData.mythVsFact.fakta}
onChange={(e) =>
setFormData(prev => ({
...prev,
mythVsFact: { ...prev.mythVsFact, fakta: e }
}))
onChange={(value) =>
setFormData((prev) => ({ ...prev, mythVsFact: { ...prev.mythVsFact, fakta: value } }))
}
/>
</Box>
{/* Kapan harus ke dokter */}
{/* Dokter */}
<Box>
<Text fw="bold">Kapan Harus Ke Dokter</Text>
<EditEditor
value={formData.doctorSign.content}
onChange={(e) =>
setFormData(prev => ({
...prev,
doctorSign: { ...prev.doctorSign, content: e }
}))
onChange={(value) =>
setFormData((prev) => ({ ...prev, doctorSign: { content: value } }))
}
/>
</Box>
@@ -384,7 +351,7 @@ function EditArtikelKesehatan() {
style={{
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)'
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}
>
Simpan

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

@@ -1,5 +1,5 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
'use client';
import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
import fasilitasKesehatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
@@ -43,89 +43,64 @@ interface FasilitasKesehatanFormBase {
}
function EditFasilitasKesehatan() {
const stateFasilitasKesehatan = useProxy(fasilitasKesehatanState.fasilitasKesehatan);
const state = useProxy(fasilitasKesehatanState.fasilitasKesehatan);
const router = useRouter();
const params = useParams();
const [formData, setFormData] = useState<FasilitasKesehatanFormBase>({
name: stateFasilitasKesehatan.edit.form.name || '',
informasiUmum: {
fasilitas: stateFasilitasKesehatan.edit.form.informasiUmum?.fasilitas || '',
alamat: stateFasilitasKesehatan.edit.form.informasiUmum?.alamat || '',
jamOperasional: stateFasilitasKesehatan.edit.form.informasiUmum?.jamOperasional || '',
},
layananUnggulan: {
content: stateFasilitasKesehatan.edit.form.layananUnggulan?.content || '',
},
dokterdanTenagaMedis: {
name: stateFasilitasKesehatan.edit.form.dokterdanTenagaMedis?.name || '',
specialist: stateFasilitasKesehatan.edit.form.dokterdanTenagaMedis?.specialist || '',
jadwal: stateFasilitasKesehatan.edit.form.dokterdanTenagaMedis?.jadwal || '',
},
fasilitasPendukung: {
content: stateFasilitasKesehatan.edit.form.fasilitasPendukung?.content || '',
},
prosedurPendaftaran: {
content: stateFasilitasKesehatan.edit.form.prosedurPendaftaran?.content || '',
},
tarifDanLayanan: {
layanan: stateFasilitasKesehatan.edit.form.tarifDanLayanan?.layanan || '',
tarif: stateFasilitasKesehatan.edit.form.tarifDanLayanan?.tarif || '',
},
name: '',
informasiUmum: { fasilitas: '', alamat: '', jamOperasional: '' },
layananUnggulan: { content: '' },
dokterdanTenagaMedis: { name: '', specialist: '', jadwal: '' },
fasilitasPendukung: { content: '' },
prosedurPendaftaran: { content: '' },
tarifDanLayanan: { layanan: '', tarif: '' },
});
// Helper untuk update nested state
const updateForm = <K extends keyof FasilitasKesehatanFormBase>(
key: K,
value: FasilitasKesehatanFormBase[K]
) => setFormData(prev => ({ ...prev, [key]: value }));
const updateNested = <
K extends keyof FasilitasKesehatanFormBase,
N extends keyof FasilitasKesehatanFormBase[K]
>(key: K, nestedKey: N, value: FasilitasKesehatanFormBase[K][N]) =>
setFormData(prev => ({
...prev,
[key]: { ...prev[key] as object, [nestedKey]: value },
}));
// Load data
useEffect(() => {
const loadFasilitasKesehatan = async () => {
const load = async () => {
const id = params?.id as string;
if (!id) return;
try {
await stateFasilitasKesehatan.edit.load(id);
const { form } = stateFasilitasKesehatan.edit;
if (form) {
setFormData({
name: form.name,
informasiUmum: {
fasilitas: form.informasiUmum?.fasilitas || '',
alamat: form.informasiUmum?.alamat || '',
jamOperasional: form.informasiUmum?.jamOperasional || '',
},
layananUnggulan: { content: form.layananUnggulan?.content || '' },
dokterdanTenagaMedis: {
name: form.dokterdanTenagaMedis?.name || '',
specialist: form.dokterdanTenagaMedis?.specialist || '',
jadwal: form.dokterdanTenagaMedis?.jadwal || '',
},
fasilitasPendukung: { content: form.fasilitasPendukung?.content || '' },
prosedurPendaftaran: { content: form.prosedurPendaftaran?.content || '' },
tarifDanLayanan: {
layanan: form.tarifDanLayanan?.layanan || '',
tarif: form.tarifDanLayanan?.tarif || '',
},
});
}
} catch (error) {
console.error("Error loading fasilitas kesehatan:", error);
toast.error("Gagal memuat data fasilitas kesehatan");
await state.edit.load(id);
const form = state.edit.form;
if (form) setFormData(form as FasilitasKesehatanFormBase);
} catch (err) {
console.error(err);
toast.error('Gagal memuat data fasilitas kesehatan');
}
};
loadFasilitasKesehatan();
load();
}, [params?.id]);
// Submit
const handleSubmit = async () => {
try {
stateFasilitasKesehatan.edit.form = {
...stateFasilitasKesehatan.edit.form,
...formData,
};
const success = await stateFasilitasKesehatan.edit.submit();
state.edit.form = { ...state.edit.form, ...formData };
const success = await state.edit.submit();
if (success) {
toast.success("Fasilitas kesehatan berhasil diperbarui!");
router.push("/admin/kesehatan/data-kesehatan-warga/fasilitas_kesehatan");
toast.success('Fasilitas kesehatan berhasil diperbarui!');
router.push('/admin/kesehatan/data-kesehatan-warga/fasilitas_kesehatan');
}
} catch (error) {
console.error("Error updating fasilitas kesehatan:", error);
toast.error("Terjadi kesalahan saat memperbarui data fasilitas kesehatan");
} catch (err) {
console.error(err);
toast.error('Terjadi kesalahan saat memperbarui data fasilitas kesehatan');
}
};
@@ -156,145 +131,104 @@ function EditFasilitasKesehatan() {
<TextInput
label="Nama Fasilitas Kesehatan"
placeholder="Masukkan nama fasilitas kesehatan"
defaultValue={formData.name}
onChange={(e) => setFormData(prev => ({ ...prev, name: e.target.value }))}
value={formData.name}
onChange={(e) => updateForm('name', e.target.value)}
required
/>
{/* Informasi Umum */}
<Box>
<Text fw="bold" mb={5}>Informasi Umum</Text>
<Text fw="bold" mb={5}>
Informasi Umum
</Text>
<TextInput
label="Fasilitas"
defaultValue={formData.informasiUmum.fasilitas}
onChange={(e) =>
setFormData(prev => ({
...prev,
informasiUmum: { ...prev.informasiUmum, fasilitas: e.target.value },
}))
}
value={formData.informasiUmum.fasilitas}
onChange={(e) => updateNested('informasiUmum', 'fasilitas', e.target.value)}
/>
<TextInput
label="Alamat"
defaultValue={formData.informasiUmum.alamat}
onChange={(e) =>
setFormData(prev => ({
...prev,
informasiUmum: { ...prev.informasiUmum, alamat: e.target.value },
}))
}
value={formData.informasiUmum.alamat}
onChange={(e) => updateNested('informasiUmum', 'alamat', e.target.value)}
/>
<TextInput
label="Jam Operasional"
defaultValue={formData.informasiUmum.jamOperasional}
onChange={(e) =>
setFormData(prev => ({
...prev,
informasiUmum: { ...prev.informasiUmum, jamOperasional: e.target.value },
}))
}
value={formData.informasiUmum.jamOperasional}
onChange={(e) => updateNested('informasiUmum', 'jamOperasional', e.target.value)}
/>
</Box>
{/* Layanan Unggulan */}
<Box>
<Text fw="bold" mb={5}>Layanan Unggulan</Text>
<Text fw="bold" mb={5}>
Layanan Unggulan
</Text>
<EditEditor
value={formData.layananUnggulan.content}
onChange={(e) =>
setFormData(prev => ({
...prev,
layananUnggulan: { content: e },
}))
}
onChange={(v) => updateNested('layananUnggulan', 'content', v)}
/>
</Box>
{/* Dokter dan Tenaga Medis */}
<Box>
<Text fw="bold" mb={5}>Dokter dan Tenaga Medis</Text>
<Text fw="bold" mb={5}>
Dokter dan Tenaga Medis
</Text>
<TextInput
label="Nama Dokter"
defaultValue={formData.dokterdanTenagaMedis.name}
onChange={(e) =>
setFormData(prev => ({
...prev,
dokterdanTenagaMedis: { ...prev.dokterdanTenagaMedis, name: e.target.value },
}))
}
value={formData.dokterdanTenagaMedis.name}
onChange={(e) => updateNested('dokterdanTenagaMedis', 'name', e.target.value)}
/>
<TextInput
label="Specialist"
defaultValue={formData.dokterdanTenagaMedis.specialist}
value={formData.dokterdanTenagaMedis.specialist}
onChange={(e) =>
setFormData(prev => ({
...prev,
dokterdanTenagaMedis: { ...prev.dokterdanTenagaMedis, specialist: e.target.value },
}))
updateNested('dokterdanTenagaMedis', 'specialist', e.target.value)
}
/>
<TextInput
label="Jadwal"
defaultValue={formData.dokterdanTenagaMedis.jadwal}
onChange={(e) =>
setFormData(prev => ({
...prev,
dokterdanTenagaMedis: { ...prev.dokterdanTenagaMedis, jadwal: e.target.value },
}))
}
value={formData.dokterdanTenagaMedis.jadwal}
onChange={(e) => updateNested('dokterdanTenagaMedis', 'jadwal', e.target.value)}
/>
</Box>
{/* Fasilitas Pendukung */}
<Box>
<Text fw="bold" mb={5}>Fasilitas Pendukung</Text>
<Text fw="bold" mb={5}>
Fasilitas Pendukung
</Text>
<EditEditor
value={formData.fasilitasPendukung.content}
onChange={(e) =>
setFormData(prev => ({
...prev,
fasilitasPendukung: { content: e },
}))
}
onChange={(v) => updateNested('fasilitasPendukung', 'content', v)}
/>
</Box>
{/* Prosedur Pendaftaran */}
<Box>
<Text fw="bold" mb={5}>Prosedur Pendaftaran</Text>
<Text fw="bold" mb={5}>
Prosedur Pendaftaran
</Text>
<EditEditor
value={formData.prosedurPendaftaran.content}
onChange={(e) =>
setFormData(prev => ({
...prev,
prosedurPendaftaran: { content: e },
}))
}
onChange={(v) => updateNested('prosedurPendaftaran', 'content', v)}
/>
</Box>
{/* Tarif dan Layanan */}
<Box>
<Text fw="bold" mb={5}>Tarif dan Layanan</Text>
<Text fw="bold" mb={5}>
Tarif dan Layanan
</Text>
<TextInput
label="Tarif"
defaultValue={formData.tarifDanLayanan.tarif}
onChange={(e) =>
setFormData(prev => ({
...prev,
tarifDanLayanan: { ...prev.tarifDanLayanan, tarif: e.target.value },
}))
}
value={formData.tarifDanLayanan.tarif}
onChange={(e) => updateNested('tarifDanLayanan', 'tarif', e.target.value)}
/>
<TextInput
label="Layanan"
defaultValue={formData.tarifDanLayanan.layanan}
onChange={(e) =>
setFormData(prev => ({
...prev,
tarifDanLayanan: { ...prev.tarifDanLayanan, layanan: e.target.value },
}))
}
value={formData.tarifDanLayanan.layanan}
onChange={(e) => updateNested('tarifDanLayanan', 'layanan', e.target.value)}
/>
</Box>
@@ -304,7 +238,7 @@ function EditFasilitasKesehatan() {
onClick={handleSubmit}
radius="md"
size="md"
loading={stateFasilitasKesehatan.edit.loading}
loading={state.edit.loading}
style={{
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',

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

@@ -1,5 +1,6 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import grafikkepuasan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/grafikKepuasan';
import colors from '@/con/colors';
import {
@@ -24,13 +25,14 @@ function EditGrafikHasilKepuasan() {
const params = useParams();
const [formData, setFormData] = useState({
nama: editState.update.form.nama || '',
tanggal: editState.update.form.tanggal || '',
jenisKelamin: editState.update.form.jenisKelamin || '',
alamat: editState.update.form.alamat || '',
penyakit: editState.update.form.penyakit || '',
nama: '',
tanggal: '',
jenisKelamin: '',
alamat: '',
penyakit: '',
});
// Load data once
useEffect(() => {
const loadData = async () => {
const id = params?.id as string;
@@ -38,17 +40,15 @@ function EditGrafikHasilKepuasan() {
try {
const data = await editState.update.load(id);
if (data) {
setFormData({
nama: data.nama || '',
tanggal: data.tanggal || '',
jenisKelamin: data.jenisKelamin || '',
alamat: data.alamat || '',
penyakit: data.penyakit || '',
});
}
} catch (error) {
console.error("Error loading grafik hasil kepuasan:", error);
if (data) setFormData({
nama: data.nama || '',
tanggal: data.tanggal || '',
jenisKelamin: data.jenisKelamin || '',
alamat: data.alamat || '',
penyakit: data.penyakit || '',
});
} catch (err) {
console.error("Error loading grafik hasil kepuasan:", err);
toast.error("Gagal memuat data grafik hasil kepuasan");
}
};
@@ -56,17 +56,19 @@ function EditGrafikHasilKepuasan() {
loadData();
}, [params?.id]);
// Generic handler for controlled inputs
const handleChange = (field: keyof typeof formData, value: string) => {
setFormData((prev) => ({ ...prev, [field]: value }));
};
const handleSubmit = async () => {
try {
editState.update.form = {
...editState.update.form,
...formData,
};
editState.update.form = { ...editState.update.form, ...formData };
await editState.update.submit();
toast.success('Grafik hasil kepuasan berhasil diperbarui!');
router.push('/admin/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan');
} catch (error) {
console.error('Error updating grafik hasil kepuasan:', error);
} catch (err) {
console.error('Error updating grafik hasil kepuasan:', err);
toast.error('Terjadi kesalahan saat memperbarui grafik hasil kepuasan');
}
};
@@ -100,44 +102,17 @@ function EditGrafikHasilKepuasan() {
style={{ border: '1px solid #e0e0e0' }}
>
<Stack gap="md">
<TextInput
defaultValue={formData.nama}
onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
label="Nama"
placeholder="Masukkan nama"
required
/>
<TextInput
type="date"
defaultValue={formData.tanggal}
onChange={(e) => setFormData({ ...formData, tanggal: e.target.value })}
label="Tanggal"
placeholder="Masukkan tanggal"
required
/>
<TextInput
defaultValue={formData.jenisKelamin}
onChange={(e) =>
setFormData({ ...formData, jenisKelamin: e.target.value })
}
label="Jenis Kelamin"
placeholder="Masukkan jenis kelamin"
required
/>
<TextInput
defaultValue={formData.alamat}
onChange={(e) => setFormData({ ...formData, alamat: e.target.value })}
label="Alamat"
placeholder="Masukkan alamat"
required
/>
<TextInput
defaultValue={formData.penyakit}
onChange={(e) => setFormData({ ...formData, penyakit: e.target.value })}
label="Penyakit"
placeholder="Masukkan penyakit"
required
/>
{(['nama','tanggal','jenisKelamin','alamat','penyakit'] as const).map((field) => (
<TextInput
key={field}
value={formData[field]}
onChange={(e) => handleChange(field, e.target.value)}
type={field === 'tanggal' ? 'date' : 'text'}
label={field === 'jenisKelamin' ? 'Jenis Kelamin' : field.charAt(0).toUpperCase() + field.slice(1)}
placeholder={`Masukkan ${field}`}
required
/>
))}
<Group justify="right">
<Button

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

@@ -4,17 +4,7 @@
import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
import jadwalKegiatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/jadwalKegiatan';
import colors from '@/con/colors';
import {
Box,
Button,
Group,
Paper,
Stack,
Text,
TextInput,
Title,
Tooltip,
} from '@mantine/core';
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';
@@ -29,46 +19,49 @@ interface JadwalKegiatanFormBase {
waktu: string;
lokasi: string;
};
deskripsiJadwalKegiatan: {
deskripsi: string;
};
layananJadwalKegiatan: {
content: string;
};
syaratKetentuanJadwalKegiatan: {
content: string;
};
dokumenJadwalKegiatan: {
content: string;
};
deskripsiJadwalKegiatan: { deskripsi: string };
layananJadwalKegiatan: { content: string };
syaratKetentuanJadwalKegiatan: { content: string };
dokumenJadwalKegiatan: { content: string };
}
const emptyForm = (): JadwalKegiatanFormBase => ({
content: '',
informasiJadwalKegiatan: { name: '', tanggal: '', waktu: '', lokasi: '' },
deskripsiJadwalKegiatan: { deskripsi: '' },
layananJadwalKegiatan: { content: '' },
syaratKetentuanJadwalKegiatan: { content: '' },
dokumenJadwalKegiatan: { content: '' },
});
function EditJadwalKegiatan() {
const stateJadwalKegiatan = useProxy(jadwalKegiatanState);
const router = useRouter();
const params = useParams();
const [formData, setFormData] = useState<JadwalKegiatanFormBase>({
content: stateJadwalKegiatan.edit.form.content || '',
informasiJadwalKegiatan: {
name: stateJadwalKegiatan.edit.form.informasiJadwalKegiatan?.name || '',
tanggal: stateJadwalKegiatan.edit.form.informasiJadwalKegiatan?.tanggal || '',
waktu: stateJadwalKegiatan.edit.form.informasiJadwalKegiatan?.waktu || '',
lokasi: stateJadwalKegiatan.edit.form.informasiJadwalKegiatan?.lokasi || '',
},
deskripsiJadwalKegiatan: {
deskripsi: stateJadwalKegiatan.edit.form.deskripsiJadwalKegiatan?.deskripsi || '',
},
layananJadwalKegiatan: {
content: stateJadwalKegiatan.edit.form.layananJadwalKegiatan?.content || '',
},
syaratKetentuanJadwalKegiatan: {
content: stateJadwalKegiatan.edit.form.syaratKetentuanJadwalKegiatan?.content || '',
},
dokumenJadwalKegiatan: {
content: stateJadwalKegiatan.edit.form.dokumenJadwalKegiatan?.content || '',
},
});
const [formData, setFormData] = useState<JadwalKegiatanFormBase>(emptyForm());
// Helper untuk update nested state
const updateNested = <
K extends keyof JadwalKegiatanFormBase,
N extends keyof JadwalKegiatanFormBase[K]
>(
key: K,
subKey: N,
value: string
) => {
setFormData(prev => ({
...prev,
[key]: {
...(prev[key] as Record<string, unknown>),
[subKey]: value
}
}));
};
const updateSimple = (key: keyof JadwalKegiatanFormBase, value: string) => {
setFormData(prev => ({ ...prev, [key]: value }));
};
useEffect(() => {
const loadJadwalKegiatan = async () => {
@@ -80,25 +73,17 @@ function EditJadwalKegiatan() {
const { form } = stateJadwalKegiatan.edit;
if (form) {
setFormData({
content: form.content,
content: form.content || '',
informasiJadwalKegiatan: {
name: form.informasiJadwalKegiatan?.name || '',
tanggal: form.informasiJadwalKegiatan?.tanggal || '',
waktu: form.informasiJadwalKegiatan?.waktu || '',
lokasi: form.informasiJadwalKegiatan?.lokasi || '',
},
deskripsiJadwalKegiatan: {
deskripsi: form.deskripsiJadwalKegiatan?.deskripsi || '',
},
layananJadwalKegiatan: {
content: form.layananJadwalKegiatan?.content || '',
},
syaratKetentuanJadwalKegiatan: {
content: form.syaratKetentuanJadwalKegiatan?.content || '',
},
dokumenJadwalKegiatan: {
content: form.dokumenJadwalKegiatan?.content || '',
},
deskripsiJadwalKegiatan: { deskripsi: form.deskripsiJadwalKegiatan?.deskripsi || '' },
layananJadwalKegiatan: { content: form.layananJadwalKegiatan?.content || '' },
syaratKetentuanJadwalKegiatan: { content: form.syaratKetentuanJadwalKegiatan?.content || '' },
dokumenJadwalKegiatan: { content: form.dokumenJadwalKegiatan?.content || '' },
});
}
} catch (error) {
@@ -111,16 +96,7 @@ function EditJadwalKegiatan() {
const handleSubmit = async () => {
try {
stateJadwalKegiatan.edit.form = {
...stateJadwalKegiatan.edit.form,
content: formData.content,
informasiJadwalKegiatan: { ...formData.informasiJadwalKegiatan },
deskripsiJadwalKegiatan: { ...formData.deskripsiJadwalKegiatan },
layananJadwalKegiatan: { ...formData.layananJadwalKegiatan },
syaratKetentuanJadwalKegiatan: { ...formData.syaratKetentuanJadwalKegiatan },
dokumenJadwalKegiatan: { ...formData.dokumenJadwalKegiatan }
};
stateJadwalKegiatan.edit.form = { ...stateJadwalKegiatan.edit.form, ...formData };
const success = await stateJadwalKegiatan.edit.submit();
if (success) {
toast.success("Jadwal kegiatan berhasil diperbarui!");
@@ -160,8 +136,8 @@ function EditJadwalKegiatan() {
<TextInput
label="Nama Jadwal Kegiatan"
placeholder="Masukkan nama jadwal kegiatan"
defaultValue={formData.content}
onChange={(e) => setFormData((prev) => ({ ...prev, content: e.target.value }))}
value={formData.content}
onChange={(e) => updateSimple('content', e.target.value)}
/>
{/* Deskripsi */}
@@ -169,45 +145,22 @@ function EditJadwalKegiatan() {
<Text fz="sm" fw="bold">Deskripsi Jadwal Kegiatan</Text>
<EditEditor
value={formData.deskripsiJadwalKegiatan.deskripsi}
onChange={(val) => setFormData((prev) => ({
...prev,
deskripsiJadwalKegiatan: { deskripsi: val }
}))}
onChange={(val) => updateNested('deskripsiJadwalKegiatan', 'deskripsi', val)}
/>
</Box>
{/* Informasi Jadwal */}
<Box>
<Text fz="md" fw="bold">Informasi Jadwal Kegiatan</Text>
<TextInput
label="Nama"
defaultValue={formData.informasiJadwalKegiatan.name}
onChange={(e) => setFormData((prev) => ({
...prev, informasiJadwalKegiatan: { ...prev.informasiJadwalKegiatan, name: e.target.value }
}))}
/>
<TextInput
type="date"
label="Tanggal"
defaultValue={formData.informasiJadwalKegiatan.tanggal}
onChange={(e) => setFormData((prev) => ({
...prev, informasiJadwalKegiatan: { ...prev.informasiJadwalKegiatan, tanggal: e.target.value }
}))}
/>
<TextInput
label="Waktu"
defaultValue={formData.informasiJadwalKegiatan.waktu}
onChange={(e) => setFormData((prev) => ({
...prev, informasiJadwalKegiatan: { ...prev.informasiJadwalKegiatan, waktu: e.target.value }
}))}
/>
<TextInput
label="Lokasi"
defaultValue={formData.informasiJadwalKegiatan.lokasi}
onChange={(e) => setFormData((prev) => ({
...prev, informasiJadwalKegiatan: { ...prev.informasiJadwalKegiatan, lokasi: e.target.value }
}))}
/>
{(['name', 'tanggal', 'waktu', 'lokasi'] as const).map((field) => (
<TextInput
key={field}
label={field === 'name' ? 'Nama' : field.charAt(0).toUpperCase() + field.slice(1)}
type={field === 'tanggal' ? 'date' : 'text'}
value={formData.informasiJadwalKegiatan[field]}
onChange={(e) => updateNested('informasiJadwalKegiatan', field, e.target.value)}
/>
))}
</Box>
{/* Layanan */}
@@ -215,10 +168,7 @@ function EditJadwalKegiatan() {
<Text fz="md" fw="bold">Layanan Jadwal Kegiatan</Text>
<EditEditor
value={formData.layananJadwalKegiatan.content}
onChange={(val) => setFormData((prev) => ({
...prev,
layananJadwalKegiatan: { content: val }
}))}
onChange={(val) => updateNested('layananJadwalKegiatan', 'content', val)}
/>
</Box>
@@ -227,10 +177,7 @@ function EditJadwalKegiatan() {
<Text fz="md" fw="bold">Syarat dan Ketentuan</Text>
<EditEditor
value={formData.syaratKetentuanJadwalKegiatan.content}
onChange={(val) => setFormData((prev) => ({
...prev,
syaratKetentuanJadwalKegiatan: { content: val }
}))}
onChange={(val) => updateNested('syaratKetentuanJadwalKegiatan', 'content', val)}
/>
</Box>
@@ -239,10 +186,7 @@ function EditJadwalKegiatan() {
<Text fz="md" fw="bold">Dokumen Yang Perlu Dibawa</Text>
<EditEditor
value={formData.dokumenJadwalKegiatan.content}
onChange={(val) => setFormData((prev) => ({
...prev,
dokumenJadwalKegiatan: { content: val }
}))}
onChange={(val) => updateNested('dokumenJadwalKegiatan', 'content', val)}
/>
</Box>

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

@@ -1,16 +1,17 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
'use client';
import persentaseKelahiranKematian from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/persentaseKelahiran';
import colors from '@/con/colors';
import {
Box,
Button,
Group,
Paper,
Stack,
TextInput,
Title,
Tooltip
Box,
Button,
Group,
Paper,
Stack,
TextInput,
Title,
Tooltip,
} from '@mantine/core';
import { IconArrowBack } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
@@ -18,146 +19,130 @@ import { useEffect, useState } from 'react';
import { toast } from 'react-toastify';
import { useProxy } from 'valtio/utils';
function EditKelahiran() {
const editState = useProxy(persentaseKelahiranKematian.kelahiran);
const router = useRouter();
const params = useParams();
const editState = useProxy(persentaseKelahiranKematian.kelahiran);
const router = useRouter();
const params = useParams();
const [formData, setFormData] = useState({
nama: '',
tanggal: '',
jenisKelamin: '',
alamat: '',
});
const [formData, setFormData] = useState({
nama: editState.edit.form.nama || '',
tanggal: editState.edit.form.tanggal || '',
jenisKelamin: editState.edit.form.jenisKelamin || '',
alamat: editState.edit.form.alamat || '',
});
// Load data saat mount atau params.id berubah
useEffect(() => {
const loadKelahiran = async () => {
const id = params?.id as string;
if (!id) return;
try {
const data = await editState.edit.load(id);
if (data) setFormData({
nama: data.nama || '',
tanggal: data.tanggal || '',
jenisKelamin: data.jenisKelamin || '',
alamat: data.alamat || ''
});
} catch (error) {
console.error('Error loading data kelahiran:', error);
toast.error('Gagal memuat data kelahiran');
}
};
useEffect(() => {
const loadKelahiran = async () => {
const id = params?.id as string;
if (!id) return;
loadKelahiran();
}, [params?.id]);
const handleChange = (key: keyof typeof formData, value: string) => {
setFormData((prev) => ({ ...prev, [key]: value }));
};
try {
const data = await editState.edit.load(id);
if (data) {
setFormData({
nama: data.nama || '',
tanggal: data.tanggal || '',
jenisKelamin: data.jenisKelamin || '',
alamat: data.alamat || '',
});
}
} catch (error) {
console.error('Error loading data kelahiran:', error);
toast.error('Gagal memuat data kelahiran');
}
};
const handleSubmit = async () => {
try {
// Update global state hanya saat submit
editState.edit.form = { ...editState.edit.form, ...formData };
await editState.edit.update();
toast.success('Data kelahiran berhasil diperbarui!');
router.push('/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kelahiran');
} catch (error) {
console.error('Error updating data kelahiran:', error);
toast.error('Terjadi kesalahan saat memperbarui data kelahiran');
}
};
return (
<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 Data Kelahiran
</Title>
</Group>
loadKelahiran();
}, [params?.id]);
{/* 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
value={formData.nama}
onChange={(e) => handleChange('nama', e.target.value)}
label="Nama"
placeholder="Masukkan nama"
required
/>
<TextInput
type="date"
value={formData.tanggal}
onChange={(e) => handleChange('tanggal', e.target.value)}
label="Tanggal"
placeholder="Masukkan tanggal"
required
/>
<TextInput
value={formData.jenisKelamin}
onChange={(e) => handleChange('jenisKelamin', e.target.value)}
label="Jenis Kelamin"
placeholder="Masukkan jenis kelamin"
required
/>
<TextInput
value={formData.alamat}
onChange={(e) => handleChange('alamat', e.target.value)}
label="Alamat"
placeholder="Masukkan alamat"
required
/>
const handleSubmit = async () => {
try {
editState.edit.form = {
...editState.edit.form,
nama: formData.nama,
tanggal: formData.tanggal,
jenisKelamin: formData.jenisKelamin,
alamat: formData.alamat,
};
await editState.edit.update();
toast.success('Data kelahiran berhasil diperbarui!');
router.push(
'/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kelahiran'
);
} catch (error) {
console.error('Error updating data kelahiran:', error);
toast.error('Terjadi kesalahan saat memperbarui data kelahiran');
}
};
return (
<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 Data Kelahiran
</Title>
</Group>
{/* 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
defaultValue={formData.nama}
onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
label="Nama"
placeholder="Masukkan nama"
required
/>
<TextInput
type="date"
defaultValue={formData.tanggal}
onChange={(e) => setFormData({ ...formData, tanggal: e.target.value })}
label="Tanggal"
placeholder="Masukkan tanggal"
required
/>
<TextInput
defaultValue={formData.jenisKelamin}
onChange={(e) => setFormData({ ...formData, jenisKelamin: e.target.value })}
label="Jenis Kelamin"
placeholder="Masukkan jenis kelamin"
required
/>
<TextInput
defaultValue={formData.alamat}
onChange={(e) => setFormData({ ...formData, alamat: e.target.value })}
label="Alamat"
placeholder="Masukkan alamat"
required
/>
<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>
);
<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>
);
}
export default EditKelahiran;
export default EditKelahiran;

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

@@ -1,18 +1,19 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
import persentaseKelahiranKematian from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/persentaseKelahiran';
import colors from '@/con/colors';
import {
Box,
Button,
Group,
Paper,
Stack,
Text,
TextInput,
Title,
Tooltip,
Box,
Button,
Group,
Paper,
Stack,
Text,
TextInput,
Title,
Tooltip,
} from '@mantine/core';
import { IconArrowBack } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
@@ -20,160 +21,149 @@ import { useEffect, useState } from 'react';
import { toast } from 'react-toastify';
import { useProxy } from 'valtio/utils';
function EditKematian() {
const editState = useProxy(persentaseKelahiranKematian.kematian);
const router = useRouter();
const params = useParams();
const editState = useProxy(persentaseKelahiranKematian.kematian);
const router = useRouter();
const params = useParams();
const [formData, setFormData] = useState({
nama: '',
tanggal: '',
jenisKelamin: '',
alamat: '',
penyebab: '',
});
const [formData, setFormData] = useState({
nama: editState.edit.form.nama || '',
tanggal: editState.edit.form.tanggal || '',
jenisKelamin: editState.edit.form.jenisKelamin || '',
alamat: editState.edit.form.alamat || '',
penyebab: editState.edit.form.penyebab || '',
});
// Load data saat mount
useEffect(() => {
const loadData = async () => {
const id = params?.id as string;
if (!id) return;
try {
const data = await editState.edit.load(id);
if (data) {
setFormData({
nama: data.nama || '',
tanggal: data.tanggal || '',
jenisKelamin: data.jenisKelamin || '',
alamat: data.alamat || '',
penyebab: data.penyebab || '',
});
}
} catch (error) {
console.error('Error loading data kematian:', error);
toast.error('Gagal memuat data kematian');
}
};
useEffect(() => {
const loadData = async () => {
const id = params?.id as string;
if (!id) return;
loadData();
}, [params?.id]);
const handleChange = (key: keyof typeof formData, value: string) => {
setFormData(prev => ({ ...prev, [key]: value }));
};
try {
const data = await editState.edit.load(id);
if (data) {
setFormData({
nama: data.nama || '',
tanggal: data.tanggal || '',
jenisKelamin: data.jenisKelamin || '',
alamat: data.alamat || '',
penyebab: data.penyebab || '',
});
}
} catch (error) {
console.error('Error loading data kematian:', error);
toast.error('Gagal memuat data kematian');
}
};
const handleSubmit = async () => {
try {
// Update global state saat submit
editState.edit.form = { ...editState.edit.form, ...formData };
await editState.edit.update();
toast.success('Data kematian berhasil diperbarui!');
router.push(
'/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kematian'
);
} catch (error) {
console.error('Error updating data kematian:', error);
toast.error('Terjadi kesalahan saat memperbarui data kematian');
}
};
return (
<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 Data Kematian
</Title>
</Group>
loadData();
}, [params?.id]);
{/* Form Card */}
<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"
placeholder="Masukkan nama"
value={formData.nama}
onChange={(e) => handleChange('nama', e.target.value)}
required
/>
<TextInput
type="date"
label="Tanggal"
placeholder="Masukkan tanggal"
value={formData.tanggal}
onChange={(e) => handleChange('tanggal', e.target.value)}
required
/>
const handleSubmit = async () => {
try {
editState.edit.form = { ...editState.edit.form, ...formData };
await editState.edit.update();
toast.success('Data kematian berhasil diperbarui!');
router.push(
'/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kematian'
);
} catch (error) {
console.error('Error updating data kematian:', error);
toast.error('Terjadi kesalahan saat memperbarui data kematian');
}
};
<TextInput
label="Jenis Kelamin"
placeholder="Masukkan jenis kelamin"
value={formData.jenisKelamin}
onChange={(e) => handleChange('jenisKelamin', e.target.value)}
required
/>
<TextInput
label="Alamat"
placeholder="Masukkan alamat"
value={formData.alamat}
onChange={(e) => handleChange('alamat', e.target.value)}
required
/>
return (
<Box px={{ base: 'sm', md: 'lg' }} py="md">
{/* Header dengan tombol back */}
<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 Data Kematian
</Title>
</Group>
<Box>
<Text fz="sm" fw="bold" mb={6}>
Penyebab
</Text>
<EditEditor
value={formData.penyebab}
onChange={(htmlContent) => handleChange('penyebab', htmlContent)}
/>
</Box>
{/* Card 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"
placeholder="Masukkan nama"
defaultValue={formData.nama}
onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
required
/>
<TextInput
type="date"
label="Tanggal"
placeholder="Masukkan tanggal"
defaultValue={formData.tanggal}
onChange={(e) => setFormData({ ...formData, tanggal: e.target.value })}
required
/>
<TextInput
label="Jenis Kelamin"
placeholder="Masukkan jenis kelamin"
defaultValue={formData.jenisKelamin}
onChange={(e) => setFormData({ ...formData, jenisKelamin: e.target.value })}
required
/>
<TextInput
label="Alamat"
placeholder="Masukkan alamat"
defaultValue={formData.alamat}
onChange={(e) => setFormData({ ...formData, alamat: e.target.value })}
required
/>
<Box>
<Text fz="sm" fw="bold" mb={6}>
Penyebab
</Text>
<EditEditor
value={formData.penyebab}
onChange={(htmlContent) => {
setFormData((prev) => ({ ...prev, penyebab: htmlContent }));
editState.edit.form.penyebab = htmlContent;
}}
/>
</Box>
<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>
);
<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>
);
}
export default EditKematian;
export default EditKematian;

81
src/app/admin/(dashboard)/kesehatan/info-wabah-penyakit/[id]/edit/page.tsx
View File

@@ -19,7 +19,7 @@ import {
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 { useEffect, useState, ChangeEvent } from 'react';
import { toast } from 'react-toastify';
import { useProxy } from 'valtio/utils';
@@ -28,15 +28,21 @@ function EditInfoWabahPenyakit() {
const router = useRouter();
const params = useParams();
const [formData, setFormData] = useState({
name: '',
deskripsiSingkat: '',
deskripsi: '',
imageId: '',
});
const [previewImage, setPreviewImage] = useState<string | null>(null);
const [file, setFile] = useState<File | null>(null);
const [formData, setFormData] = useState({
name: infoWabahPenyakitState.edit.form.name || '',
deskripsiSingkat: infoWabahPenyakitState.edit.form.deskripsiSingkat || '',
deskripsi: infoWabahPenyakitState.edit.form.deskripsiLengkap || '',
imageId: infoWabahPenyakitState.edit.form.imageId || '',
});
// Helper untuk update field formData
const updateField = (field: keyof typeof formData, value: string) => {
setFormData((prev) => ({ ...prev, [field]: value }));
};
// Load data edit
useEffect(() => {
const loadInfoWabahPenyakit = async () => {
const id = params?.id as string;
@@ -52,12 +58,10 @@ function EditInfoWabahPenyakit() {
imageId: data.imageId || '',
});
if (data?.image?.link) {
setPreviewImage(data.image.link);
}
if (data.image?.link) setPreviewImage(data.image.link);
}
} catch (error) {
console.error('Error loading info wabah penyakit:', error);
console.error(error);
toast.error('Gagal memuat data info wabah penyakit');
}
};
@@ -67,34 +71,43 @@ function EditInfoWabahPenyakit() {
const handleSubmit = async () => {
try {
let uploadedImageId = formData.imageId;
// Upload file kalau ada
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');
uploadedImageId = uploaded.id;
}
// Update global state
infoWabahPenyakitState.edit.form = {
...infoWabahPenyakitState.edit.form,
name: formData.name,
deskripsiSingkat: formData.deskripsiSingkat,
deskripsiLengkap: formData.deskripsi,
imageId: formData.imageId,
imageId: uploadedImageId,
};
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');
}
infoWabahPenyakitState.edit.form.imageId = uploaded.id;
}
await infoWabahPenyakitState.edit.update();
toast.success('Info wabah penyakit berhasil diperbarui!');
router.push('/admin/kesehatan/info-wabah-penyakit');
} catch (error) {
console.error('Error updating info wabah penyakit:', error);
console.error(error);
toast.error('Terjadi kesalahan saat memperbarui info wabah penyakit');
}
};
const handleDrop = (files: File[]) => {
const selectedFile = files[0];
if (selectedFile) {
setFile(selectedFile);
setPreviewImage(URL.createObjectURL(selectedFile));
}
};
return (
<Box px={{ base: 'sm', md: 'lg' }} py="md">
{/* Header */}
@@ -120,16 +133,18 @@ function EditInfoWabahPenyakit() {
>
<Stack gap="md">
<TextInput
defaultValue={formData.name}
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
value={formData.name}
onChange={(e: ChangeEvent<HTMLInputElement>) => updateField('name', e.target.value)}
label="Judul"
placeholder="Masukkan judul"
required
/>
<TextInput
defaultValue={formData.deskripsiSingkat}
onChange={(e) => setFormData({ ...formData, deskripsiSingkat: e.target.value })}
value={formData.deskripsiSingkat}
onChange={(e: ChangeEvent<HTMLInputElement>) =>
updateField('deskripsiSingkat', e.target.value)
}
label="Deskripsi Singkat"
placeholder="Masukkan deskripsi singkat"
required
@@ -141,7 +156,7 @@ function EditInfoWabahPenyakit() {
</Text>
<EditEditor
value={formData.deskripsi}
onChange={(val) => setFormData({ ...formData, deskripsi: val })}
onChange={(val) => updateField('deskripsi', val)}
/>
</Box>
@@ -150,13 +165,7 @@ function EditInfoWabahPenyakit() {
Gambar
</Text>
<Dropzone
onDrop={(files) => {
const selectedFile = files[0];
if (selectedFile) {
setFile(selectedFile);
setPreviewImage(URL.createObjectURL(selectedFile));
}
}}
onDrop={handleDrop}
onReject={() => toast.error('File tidak valid.')}
maxSize={5 * 1024 ** 2}
accept={{ 'image/*': [] }}

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

@@ -1,5 +1,4 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
'use client';
import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
import kontakDarurat from '@/app/admin/(dashboard)/_state/kesehatan/kontak-darurat/kontakDarurat';
import colors from '@/con/colors';
@@ -23,7 +22,6 @@ import { useEffect, useState } from 'react';
import { toast } from 'react-toastify';
import { useProxy } from 'valtio/utils';
function EditKontakDarurat() {
const kontakDaruratState = useProxy(kontakDarurat);
const router = useRouter();
@@ -32,11 +30,13 @@ function EditKontakDarurat() {
const [previewImage, setPreviewImage] = useState<string | null>(null);
const [file, setFile] = useState<File | null>(null);
const [formData, setFormData] = useState({
name: kontakDaruratState.edit.form.name || '',
deskripsi: kontakDaruratState.edit.form.deskripsi || '',
imageId: kontakDaruratState.edit.form.imageId || '',
name: '',
deskripsi: '',
imageId: '',
});
const [loading, setLoading] = useState(true);
// Load data sekali saat mount
useEffect(() => {
const loadKontakDarurat = async () => {
const id = params?.id as string;
@@ -50,40 +50,38 @@ function EditKontakDarurat() {
deskripsi: data.deskripsi || '',
imageId: data.imageId || '',
});
if (data?.image?.link) {
setPreviewImage(data.image.link);
}
if (data?.image?.link) setPreviewImage(data.image.link);
}
} catch (error) {
console.error("Error loading kontak darurat:", error);
toast.error("Gagal memuat data kontak darurat");
} finally {
setLoading(false);
}
};
loadKontakDarurat();
}, [params?.id]);
}, [params?.id, kontakDaruratState.edit]);
const handleSubmit = async () => {
try {
kontakDaruratState.edit.form = {
...kontakDaruratState.edit.form,
name: formData.name,
deskripsi: formData.deskripsi,
imageId: formData.imageId,
};
let imageId = formData.imageId;
// Upload file baru jika ada
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");
}
kontakDaruratState.edit.form.imageId = uploaded.id;
if (!uploaded?.id) return toast.error("Gagal upload gambar");
imageId = uploaded.id;
}
// Update global state sekaligus submit
kontakDaruratState.edit.form = {
...kontakDaruratState.edit.form,
...formData,
imageId,
};
await kontakDaruratState.edit.update();
toast.success("Kontak darurat berhasil diperbarui!");
router.push("/admin/kesehatan/kontak-darurat");
@@ -93,9 +91,10 @@ function EditKontakDarurat() {
}
};
if (loading) return <Text>Loading...</Text>;
return (
<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">
@@ -107,7 +106,6 @@ function EditKontakDarurat() {
</Title>
</Group>
{/* Form */}
<Paper
w={{ base: '100%', md: '50%' }}
bg={colors['white-1']}
@@ -117,9 +115,10 @@ function EditKontakDarurat() {
style={{ border: '1px solid #e0e0e0' }}
>
<Stack gap="md">
{/* Controlled Input */}
<TextInput
defaultValue={formData.name}
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
value={formData.name}
onChange={(e) => setFormData(prev => ({ ...prev, name: e.target.value }))}
label="Judul"
placeholder="Masukkan judul"
required
@@ -129,7 +128,7 @@ function EditKontakDarurat() {
<Text fz="sm" fw="bold">Deskripsi</Text>
<EditEditor
value={formData.deskripsi}
onChange={(val) => setFormData({ ...formData, deskripsi: val })}
onChange={(val) => setFormData(prev => ({ ...prev, deskripsi: val }))}
/>
</Box>

85
src/app/admin/(dashboard)/kesehatan/penanganan-darurat/[id]/edit/page.tsx
View File

@@ -1,5 +1,6 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
import penangananDarurat from '@/app/admin/(dashboard)/_state/kesehatan/penanganan-darurat/penangananDarurat';
import colors from '@/con/colors';
@@ -28,16 +29,19 @@ function EditPenangananDarurat() {
const router = useRouter();
const params = useParams()
const [formData, setFormData] = useState({
name: '',
deskripsi: '',
imageId: '',
});
const [previewImage, setPreviewImage] = useState<string | null>(null);
const [file, setFile] = useState<File | null>(null);
const [formData, setFormData] = useState({
name: penangananDaruratState.edit.form.name || '',
deskripsi: penangananDaruratState.edit.form.deskripsi || '',
imageId: penangananDaruratState.edit.form.imageId || '',
})
const [loading, setLoading] = useState(true);
// Load data satu kali saat component mount
useEffect(() => {
const loadPenangananDarurat = async () => {
const loadData = async () => {
const id = params?.id as string;
if (!id) return;
@@ -48,49 +52,66 @@ function EditPenangananDarurat() {
name: data.name || '',
deskripsi: data.deskripsi || '',
imageId: data.imageId || '',
})
});
if (data?.image?.link) {
if (data.image?.link) {
setPreviewImage(data.image.link);
}
}
} catch (error) {
console.error('Error loading penanganan darurat:', error);
} catch (err) {
console.error('Error loading penanganan darurat:', err);
toast.error('Gagal memuat data penanganan darurat');
} finally {
setLoading(false);
}
}
loadPenangananDarurat();
}, [params?.id])
loadData();
}, [params?.id]);
const handleChange = (key: keyof typeof formData, value: string) => {
setFormData(prev => ({ ...prev, [key]: value }));
};
const handleDrop = (files: File[]) => {
const selected = files[0];
if (!selected) return;
setFile(selected);
setPreviewImage(URL.createObjectURL(selected));
};
const handleSubmit = async () => {
try {
penangananDaruratState.edit.form = {
...penangananDaruratState.edit.form,
name: formData.name,
deskripsi: formData.deskripsi,
imageId: formData.imageId,
}
let imageId = formData.imageId;
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");
}
if (!uploaded?.id) return toast.error("Gagal upload gambar");
penangananDaruratState.edit.form.imageId = uploaded.id;
imageId = uploaded.id;
}
// update global state sekali saat submit
penangananDaruratState.edit.form = {
...penangananDaruratState.edit.form,
name: formData.name,
deskripsi: formData.deskripsi,
imageId,
};
await penangananDaruratState.edit.update();
toast.success("Penanganan darurat berhasil diperbarui!");
router.push("/admin/kesehatan/penanganan-darurat");
} catch (error) {
console.error("Error updating penanganan darurat:", error);
} catch (err) {
console.error("Error updating penanganan darurat:", err);
toast.error("Gagal memperbarui data penanganan darurat");
}
}
};
if (loading) return <Text>Loading...</Text>;
return (
<Box px={{ base: 'sm', md: 'lg' }} py="md">
@@ -117,8 +138,8 @@ function EditPenangananDarurat() {
>
<Stack gap="md">
<TextInput
defaultValue={formData.name}
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
value={formData.name}
onChange={(e) => handleChange('name', e.target.value)}
label="Judul"
placeholder="Masukkan judul"
required
@@ -128,20 +149,14 @@ function EditPenangananDarurat() {
<Text fz="sm" fw="bold">Deskripsi</Text>
<EditEditor
value={formData.deskripsi}
onChange={(val) => setFormData({ ...formData, deskripsi: val })}
onChange={(val) => handleChange('deskripsi', val)}
/>
</Box>
<Box>
<Text fz="sm" fw="bold">Gambar</Text>
<Dropzone
onDrop={(files) => {
const selectedFile = files[0];
if (selectedFile) {
setFile(selectedFile);
setPreviewImage(URL.createObjectURL(selectedFile));
}
}}
onDrop={handleDrop}
onReject={() => toast.error('File tidak valid.')}
maxSize={5 * 1024 ** 2}
accept={{ 'image/*': [] }}

424
src/app/admin/(dashboard)/kesehatan/posyandu/[id]/edit/page.tsx
View File

@@ -1,20 +1,21 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
'use client';
import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
import posyandustate from '@/app/admin/(dashboard)/_state/kesehatan/posyandu/posyandu';
import colors from '@/con/colors';
import ApiFetch from '@/lib/api-fetch';
import {
Box,
Button,
Group,
Image,
Paper,
Stack,
Text,
TextInput,
Title,
Tooltip,
Box,
Button,
Group,
Image,
Paper,
Stack,
Text,
TextInput,
Title,
Tooltip,
} from '@mantine/core';
import { Dropzone } from '@mantine/dropzone';
import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
@@ -23,234 +24,211 @@ import { useEffect, useState } from 'react';
import { toast } from 'react-toastify';
import { useProxy } from 'valtio/utils';
function EditPosyandu() {
const statePosyandu = useProxy(posyandustate);
const router = useRouter();
const params = useParams();
const statePosyandu = useProxy(posyandustate);
const router = useRouter();
const params = useParams();
const [previewImage, setPreviewImage] = useState<string | null>(null);
const [file, setFile] = useState<File | null>(null);
const [formData, setFormData] = useState({
name: '',
nomor: '',
deskripsi: '',
imageId: '',
jadwalPelayanan: '',
});
const [previewImage, setPreviewImage] = useState<string | null>(null);
const [file, setFile] = useState<File | null>(null);
const [formData, setFormData] = useState({
name: statePosyandu.edit.form.name || '',
nomor: statePosyandu.edit.form.nomor || '',
deskripsi: statePosyandu.edit.form.deskripsi || '',
imageId: statePosyandu.edit.form.imageId || '',
jadwalPelayanan: statePosyandu.edit.form.jadwalPelayanan || '',
});
// Load data posyandu
useEffect(() => {
const loadPosyandu = async () => {
const id = params?.id as string;
if (!id) return;
try {
const data = await statePosyandu.edit.load(id);
if (data) {
setFormData({
name: data.name || '',
nomor: data.nomor || '',
deskripsi: data.deskripsi || '',
imageId: data.imageId || '',
jadwalPelayanan: data.jadwalPelayanan || '',
});
if (data?.image?.link) setPreviewImage(data.image.link);
}
} catch (error) {
console.error('Error loading posyandu:', error);
toast.error('Gagal memuat data posyandu');
}
};
loadPosyandu();
}, [params?.id]);
useEffect(() => {
const loadPosyandu = async () => {
const id = params?.id as string;
if (!id) return;
const handleSubmit = async () => {
try {
// Update global state hanya saat submit
const updatedForm = { ...statePosyandu.edit.form, ...formData };
// Upload file jika ada
if (file) {
const res = await ApiFetch.api.fileStorage.create.post({ file, name: file.name });
const uploaded = res.data?.data;
try {
const data = await statePosyandu.edit.load(id);
if (data) {
setFormData({
name: data.name || '',
nomor: data.nomor || '',
deskripsi: data.deskripsi || '',
imageId: data.imageId || '',
jadwalPelayanan: data.jadwalPelayanan || '',
});
if (!uploaded?.id) return toast.error('Gagal upload gambar');
updatedForm.imageId = uploaded.id;
}
statePosyandu.edit.form = updatedForm;
await statePosyandu.edit.update();
if (data?.image?.link) {
setPreviewImage(data.image.link);
}
}
} catch (error) {
console.error("Error loading posyandu:", error);
toast.error("Gagal memuat data posyandu");
}
};
loadPosyandu();
}, [params?.id]);
toast.success('Posyandu berhasil diperbarui!');
router.push('/admin/kesehatan/posyandu');
} catch (error) {
console.error('Error updating posyandu:', error);
toast.error('Terjadi kesalahan saat memperbarui posyandu');
}
};
return (
<Box px={{ base: 'sm', md: 'lg' }} py="md">
{/* Tombol Back */}
<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 Posyandu
</Title>
</Group>
const handleSubmit = async () => {
try {
statePosyandu.edit.form = {
...statePosyandu.edit.form,
...formData,
};
{/* Card utama */}
<Paper
w={{ base: '100%', md: '50%' }}
bg={colors['white-1']}
p="lg"
radius="md"
shadow="sm"
style={{ border: '1px solid #e0e0e0' }}
>
<Stack gap="md">
{/* Upload Gambar */}
<Box>
<Text fw="bold" fz="sm" mb={6}>
Gambar Posyandu
</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']}`,
}}
loading="lazy"
/>
</Box>
)}
</Box>
if (file) {
const res = await ApiFetch.api.fileStorage.create.post({ file, name: file.name });
const uploaded = res.data?.data;
{/* Input Form */}
<TextInput
label="Nama Posyandu"
placeholder="Masukkan nama posyandu"
value={formData.name}
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
required
/>
<TextInput
label="Nomor Posyandu"
placeholder="Masukkan nomor posyandu"
value={formData.nomor}
onChange={(e) => setFormData({ ...formData, nomor: e.target.value })}
required
/>
if (!uploaded?.id) {
return toast.error("Gagal upload gambar");
}
<Box>
<Text fw="bold" fz="sm" mb={6}>
Deskripsi Posyandu
</Text>
<EditEditor
value={formData.deskripsi}
onChange={(htmlContent) => setFormData({ ...formData, deskripsi: htmlContent })}
/>
</Box>
<Box>
<Text fw="bold" fz="sm" mb={6}>
Jadwal Pelayanan
</Text>
<EditEditor
value={formData.jadwalPelayanan}
onChange={(htmlContent) =>
setFormData({ ...formData, jadwalPelayanan: htmlContent })
}
/>
</Box>
statePosyandu.edit.form.imageId = uploaded.id;
}
await statePosyandu.edit.update();
toast.success("Posyandu berhasil diperbarui!");
router.push("/admin/kesehatan/posyandu");
} catch (error) {
console.error("Error updating posyandu:", error);
toast.error("Terjadi kesalahan saat memperbarui posyandu");
}
};
return (
<Box px={{ base: 'sm', md: 'lg' }} py="md">
{/* Tombol Back */}
<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 Posyandu
</Title>
</Group>
{/* Card utama */}
<Paper
w={{ base: '100%', md: '50%' }}
bg={colors['white-1']}
p="lg"
radius="md"
shadow="sm"
style={{ border: '1px solid #e0e0e0' }}
>
<Stack gap="md">
{/* Upload Gambar */}
<Box>
<Text fw="bold" fz="sm" mb={6}>
Gambar Posyandu
</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']}`,
}}
loading="lazy"
/>
</Box>
)}
</Box>
{/* Input Form */}
<TextInput
label="Nama Posyandu"
placeholder="Masukkan nama posyandu"
defaultValue={formData.name}
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
required
/>
<TextInput
label="Nomor Posyandu"
placeholder="Masukkan nomor posyandu"
defaultValue={formData.nomor}
onChange={(e) => setFormData({ ...formData, nomor: e.target.value })}
required
/>
<Box>
<Text fw="bold" fz="sm" mb={6}>Deskripsi Posyandu</Text>
<EditEditor
value={formData.deskripsi}
onChange={(htmlContent) => {
setFormData({ ...formData, deskripsi: htmlContent });
statePosyandu.edit.form.deskripsi = htmlContent;
}}
/>
</Box>
<Box>
<Text fw="bold" fz="sm" mb={6}>Jadwal Pelayanan</Text>
<EditEditor
value={formData.jadwalPelayanan}
onChange={(htmlContent) => {
setFormData({ ...formData, jadwalPelayanan: htmlContent });
statePosyandu.edit.form.jadwalPelayanan = htmlContent;
}}
/>
</Box>
{/* 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>
);
{/* 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>
);
}
export default EditPosyandu;
export default EditPosyandu;

105
src/app/admin/(dashboard)/kesehatan/program-kesehatan/[id]/edit/page.tsx
View File

@@ -1,5 +1,5 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
'use client';
import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
import programKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/program-kesehatan/programKesehatan';
import colors from '@/con/colors';
@@ -31,73 +31,70 @@ function EditProgramKesehatan() {
const [previewImage, setPreviewImage] = useState<string | null>(null);
const [file, setFile] = useState<File | null>(null);
const [formData, setFormData] = useState({
name: programKesehatanState.edit.form.name || '',
deskripsiSingkat: programKesehatanState.edit.form.deskripsiSingkat || '',
deskripsi: programKesehatanState.edit.form.deskripsi || '',
imageId: programKesehatanState.edit.form.imageId || '',
name: '',
deskripsiSingkat: '',
deskripsi: '',
imageId: '',
});
// Load data awal
useEffect(() => {
const loadProgramKesehatan = async () => {
const loadData = async () => {
const id = params?.id as string;
if (!id) return;
try {
const data = await programKesehatanState.edit.load(id);
if (data) {
setFormData({
name: data.name || '',
deskripsiSingkat: data.deskripsiSingkat || '',
deskripsi: data.deskripsi || '',
imageId: data.imageId || '',
});
if (!data) return;
if (data?.image?.link) {
setPreviewImage(data.image.link);
}
}
} catch (error) {
console.error('Error loading program kesehatan:', error);
setFormData({
name: data.name || '',
deskripsiSingkat: data.deskripsiSingkat || '',
deskripsi: data.deskripsi || '',
imageId: data.imageId || '',
});
if (data?.image?.link) setPreviewImage(data.image.link);
} catch (err) {
console.error(err);
toast.error('Gagal memuat data program kesehatan');
}
};
loadProgramKesehatan();
loadData();
}, [params?.id]);
// Handler input controlled
const handleChange = (key: keyof typeof formData, value: string) => {
setFormData((prev) => ({ ...prev, [key]: value }));
};
// Submit form
const handleSubmit = async () => {
try {
programKesehatanState.edit.form = {
...programKesehatanState.edit.form,
name: formData.name,
deskripsiSingkat: formData.deskripsiSingkat,
deskripsi: formData.deskripsi,
imageId: formData.imageId,
};
const updatedForm = { ...programKesehatanState.edit.form, ...formData };
// Upload file kalau ada
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');
if (!uploaded?.id) {
return toast.error('Gagal upload gambar');
}
programKesehatanState.edit.form.imageId = uploaded.id;
updatedForm.imageId = uploaded.id;
}
programKesehatanState.edit.form = updatedForm;
await programKesehatanState.edit.update();
toast.success('Program kesehatan berhasil diperbarui!');
router.push('/admin/kesehatan/program-kesehatan');
} catch (error) {
console.error('Error updating program kesehatan:', error);
} catch (err) {
console.error(err);
toast.error('Terjadi kesalahan saat memperbarui program kesehatan');
}
};
return (
<Box px={{ base: 'sm', md: 'lg' }} py="md">
{/* Header dengan tombol back */}
<Group mb="md">
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
@@ -109,7 +106,6 @@ function EditProgramKesehatan() {
</Title>
</Group>
{/* Card Form */}
<Paper
w={{ base: '100%', md: '50%' }}
bg={colors['white-1']}
@@ -119,21 +115,19 @@ function EditProgramKesehatan() {
style={{ border: '1px solid #e0e0e0' }}
>
<Stack gap="md">
<TextInput
defaultValue={formData.name}
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
label="Judul"
placeholder="Masukkan judul"
required
/>
<TextInput
defaultValue={formData.deskripsiSingkat}
onChange={(e) => setFormData({ ...formData, deskripsiSingkat: e.target.value })}
label="Deskripsi Singkat"
placeholder="Masukkan deskripsi singkat"
required
/>
{[
{ label: 'Judul', key: 'name', placeholder: 'Masukkan judul' },
{ label: 'Deskripsi Singkat', key: 'deskripsiSingkat', placeholder: 'Masukkan deskripsi singkat' },
].map((field) => (
<TextInput
key={field.key}
label={field.label}
placeholder={field.placeholder}
value={formData[field.key as keyof typeof formData]}
onChange={(e) => handleChange(field.key as keyof typeof formData, e.target.value)}
required
/>
))}
<Box>
<Text fz="sm" fw="bold" mb={6}>
@@ -141,7 +135,7 @@ function EditProgramKesehatan() {
</Text>
<EditEditor
value={formData.deskripsi}
onChange={(val) => setFormData({ ...formData, deskripsi: val })}
onChange={(val) => handleChange('deskripsi', val)}
/>
</Box>
@@ -152,10 +146,9 @@ function EditProgramKesehatan() {
<Dropzone
onDrop={(files) => {
const selectedFile = files[0];
if (selectedFile) {
setFile(selectedFile);
setPreviewImage(URL.createObjectURL(selectedFile));
}
if (!selectedFile) return;
setFile(selectedFile);
setPreviewImage(URL.createObjectURL(selectedFile));
}}
onReject={() => toast.error('File tidak valid.')}
maxSize={5 * 1024 ** 2}

37
src/app/admin/(dashboard)/kesehatan/puskesmas/[id]/edit/page.tsx
View File

@@ -54,20 +54,11 @@ function EditPuskesmas() {
const [previewImage, setPreviewImage] = useState<string | null>(null);
const [file, setFile] = useState<File | null>(null);
const [formData, setFormData] = useState<PuskesmasFormData>({
name: statePuskesmas.edit.form.name || '',
alamat: statePuskesmas.edit.form.alamat || '',
jam: {
workDays: statePuskesmas.edit.form.jam?.workDays || '',
weekDays: statePuskesmas.edit.form.jam?.weekDays || '',
holiday: statePuskesmas.edit.form.jam?.holiday || '',
},
kontak: {
kontakPuskesmas: statePuskesmas.edit.form.kontak?.kontakPuskesmas || '',
email: statePuskesmas.edit.form.kontak?.email || '',
facebook: statePuskesmas.edit.form.kontak?.facebook || '',
kontakUGD: statePuskesmas.edit.form.kontak?.kontakUGD || '',
},
imageId: statePuskesmas.edit.form.imageId || '',
name: '',
alamat: '',
jam: { workDays: '', weekDays: '', holiday: '' },
kontak: { kontakPuskesmas: '', email: '', facebook: '', kontakUGD: '' },
imageId: '',
});
useEffect(() => {
@@ -183,7 +174,7 @@ function EditPuskesmas() {
label="Nama Puskesmas"
placeholder="Masukkan nama puskesmas"
name="name"
defaultValue={formData.name}
value={formData.name}
onChange={handleInputChange}
required
/>
@@ -192,7 +183,7 @@ function EditPuskesmas() {
label="Alamat"
placeholder="Masukkan alamat"
name="alamat"
defaultValue={formData.alamat}
value={formData.alamat}
onChange={handleInputChange}
required
/>
@@ -200,7 +191,7 @@ function EditPuskesmas() {
<TextInput
label="Jam Buka"
placeholder="Masukkan jam buka"
defaultValue={formData.jam.workDays}
value={formData.jam.workDays}
onChange={(e) => handleNestedChange('jam', 'workDays', e.target.value)}
required
/>
@@ -208,7 +199,7 @@ function EditPuskesmas() {
<TextInput
label="Jam Tutup"
placeholder="Masukkan jam tutup"
defaultValue={formData.jam.weekDays}
value={formData.jam.weekDays}
onChange={(e) => handleNestedChange('jam', 'weekDays', e.target.value)}
required
/>
@@ -216,7 +207,7 @@ function EditPuskesmas() {
<TextInput
label="Jam Libur"
placeholder="Masukkan jam libur"
defaultValue={formData.jam.holiday}
value={formData.jam.holiday}
onChange={(e) => handleNestedChange('jam', 'holiday', e.target.value)}
required
/>
@@ -224,28 +215,28 @@ function EditPuskesmas() {
<TextInput
label="Kontak Puskesmas"
placeholder="Masukkan kontak puskesmas"
defaultValue={formData.kontak.kontakPuskesmas}
value={formData.kontak.kontakPuskesmas}
onChange={(e) => handleNestedChange('kontak', 'kontakPuskesmas', e.target.value)}
/>
<TextInput
label="Email"
placeholder="Masukkan email"
defaultValue={formData.kontak.email}
value={formData.kontak.email}
onChange={(e) => handleNestedChange('kontak', 'email', e.target.value)}
/>
<TextInput
label="Facebook"
placeholder="Masukkan facebook"
defaultValue={formData.kontak.facebook}
value={formData.kontak.facebook}
onChange={(e) => handleNestedChange('kontak', 'facebook', e.target.value)}
/>
<TextInput
label="Kontak UGD"
placeholder="Masukkan kontak UGD"
defaultValue={formData.kontak.kontakUGD}
value={formData.kontak.kontakUGD}
onChange={(e) => handleNestedChange('kontak', 'kontakUGD', e.target.value)}
/>