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

Fix Tampilan User & Admin Menu Inovasi & Lingkungan

Browse Source
This commit is contained in:
nico
2025-09-22 17:15:11 +08:00
parent 0fc47c28ff
commit b5c044df6e
40 changed files with 3114 additions and 1667 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
src/app/admin/(dashboard)/lingkungan/program-penghijauan/[id]/edit/page.tsx
View File

@@ -4,14 +4,23 @@ import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
import SelectIconProgramEdit from '@/app/admin/(dashboard)/_com/selectIconEdit';
import programPenghijauanState from '@/app/admin/(dashboard)/_state/lingkungan/program-penghijauan';
import colors from '@/con/colors';
import { Box, Button, Paper, Stack, Text, TextInput, Title } 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';
import { toast } from 'react-toastify';
import { useProxy } from 'valtio/utils';
interface FormProgramPenghijauan {
name: string;
deskripsi: string;
@@ -19,19 +28,32 @@ interface FormProgramPenghijauan {
icon: string;
}
type IconKey = 'ekowisata' | 'kompetisi' | 'wisata' | 'ekonomi' | 'sampah' | 'truck' | 'scale' | 'clipboard' | 'trash' | 'lingkunganSehat' | 'sumberOksigen' | 'ekonomiBerkelanjutan' | 'mencegahBencana';
type IconKey =
| 'ekowisata'
| 'kompetisi'
| 'wisata'
| 'ekonomi'
| 'sampah'
| 'truck'
| 'scale'
| 'clipboard'
| 'trash'
| 'lingkunganSehat'
| 'sumberOksigen'
| 'ekonomiBerkelanjutan'
| 'mencegahBencana';
function EditProgramPenghijauan() {
const stateProgramPenghijauan = useProxy(programPenghijauanState)
const params = useParams()
const stateProgramPenghijauan = useProxy(programPenghijauanState);
const params = useParams();
const router = useRouter();
const [formData, setFormData] = useState<FormProgramPenghijauan>({
name: '',
deskripsi: '',
judul: '',
icon: '',
})
});
useEffect(() => {
const loadProgramPenghijauan = async () => {
@@ -41,7 +63,6 @@ function EditProgramPenghijauan() {
try {
const data = await stateProgramPenghijauan.update.load(id);
if (data) {
// ⬇️ FIX PENTING: tambahkan ini
stateProgramPenghijauan.update.id = id;
stateProgramPenghijauan.update.form = {
@@ -59,16 +80,14 @@ function EditProgramPenghijauan() {
});
}
} catch (error) {
console.error("Error loading program penghijauan:", error);
toast.error("Gagal memuat data program penghijauan");
console.error('Error loading program penghijauan:', error);
toast.error('Gagal memuat data program penghijauan');
}
}
};
loadProgramPenghijauan();
}, [params?.id]);
const handleSubmit = async () => {
try {
stateProgramPenghijauan.update.form = {
@@ -77,49 +96,74 @@ function EditProgramPenghijauan() {
deskripsi: formData.deskripsi.trim(),
judul: formData.judul.trim(),
icon: formData.icon.trim(),
}
};
await stateProgramPenghijauan.update.submit();
router.push("/admin/lingkungan/program-penghijauan");
router.push('/admin/lingkungan/program-penghijauan');
} catch (error) {
console.error("Error updating program penghijauan:", error);
toast.error("Gagal memuat data program penghijauan");
console.error('Error updating program penghijauan:', error);
toast.error('Gagal memperbarui program penghijauan');
}
}
return (
<Box>
<Box mb={10}>
<Button onClick={() => router.back()} variant='subtle' color={'blue'}>
<IconArrowBack color={colors['blue-button']} size={25} />
</Button>
</Box>
};
<Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
<Stack gap={"xs"}>
<Title order={3}>Edit Program Penghijauan</Title>
return (
<Box px={{ base: 'sm', md: 'lg' }} py="md">
{/* Header dengan back button */}
<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 Program Penghijauan
</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">
<TextInput
value={formData.name}
label={<Text fz={"sm"} fw={"bold"}>Nama Program Penghijauan</Text>}
placeholder="masukkan nama program penghijauan"
onChange={(val) => {
label="Nama Program Penghijauan"
placeholder="Masukkan nama program penghijauan"
onChange={(val) =>
setFormData({
...formData,
name: val.target.value
name: val.target.value,
})
}}
}
required
/>
<TextInput
value={formData.judul}
label={<Text fz={"sm"} fw={"bold"}>Judul Deskripsi Program Penghijauan</Text>}
placeholder="masukkan judul deskripsi program penghijauan"
onChange={(val) => {
label="Judul Deskripsi Program Penghijauan"
placeholder="Masukkan judul deskripsi program penghijauan"
onChange={(val) =>
setFormData({
...formData,
judul: val.target.value
judul: val.target.value,
})
}}
}
required
/>
<Box>
<Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
<Text fw="bold" fz="sm" mb={6}>
Deskripsi
</Text>
<EditEditor
value={formData.deskripsi}
onChange={(htmlContent) => {
@@ -128,16 +172,35 @@ function EditProgramPenghijauan() {
}}
/>
</Box>
<Box>
<Text fz={"sm"} fw={"bold"}>Ikon Program Penghijauan</Text>
<Text fw="bold" fz="sm" mb={6}>
Ikon Program Penghijauan
</Text>
<SelectIconProgramEdit
value={formData.icon as IconKey}
onChange={(value) => {
setFormData((prev) => ({ ...prev, icon: value }));
stateProgramPenghijauan.update.form.icon = value;
}} />
}}
/>
</Box>
<Button bg={colors['blue-button']} onClick={handleSubmit}>Simpan</Button>
{/* Tombol simpan */}
<Group justify="flex-end">
<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>