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

QC User & Admin Responsive : Menu Landing Page - Desa

Browse Source
This commit is contained in:
nico
2025-10-02 00:10:33 +08:00
parent 63054cedf0
commit 8a6d8ed8db
70 changed files with 1839 additions and 1052 deletions
Download Patch File Download Diff File Expand all files Collapse all files

261
src/app/admin/(dashboard)/ppid/struktur-ppid/pegawai/[id]/edit/page.tsx
View File

@@ -23,27 +23,26 @@ import { useEffect, useState } from 'react';
import { toast } from 'react-toastify';
import { useProxy } from 'valtio/utils';
export default function EditPegawaiPPID() {
const router = useRouter();
const { id } = useParams<{ id: string }>();
const stateOrganisasi = useProxy(stateStrukturPPID.pegawai);
const [formData, setFormData] = useState({
namaLengkap: '',
gelarAkademik: '',
imageId: '',
tanggalMasuk: '',
email: '',
telepon: '',
alamat: '',
posisiId: '',
isActive: true,
});
const [previewImage, setPreviewImage] = useState<string | null>(null);
const [file, setFile] = useState<File | null>(null);
const stateOrganisasi = useProxy(stateStrukturPPID.pegawai);
const [formData, setFormData] = useState({
namaLengkap: stateOrganisasi.edit.form.namaLengkap,
gelarAkademik: stateOrganisasi.edit.form.gelarAkademik,
imageId: stateOrganisasi.edit.form.imageId,
tanggalMasuk: stateOrganisasi.edit.form.tanggalMasuk,
email: stateOrganisasi.edit.form.email,
telepon: stateOrganisasi.edit.form.telepon,
alamat: stateOrganisasi.edit.form.alamat,
posisiId: stateOrganisasi.edit.form.posisiId,
isActive: stateOrganisasi.edit.form.isActive,
});
// Format date to YYYY-MM-DD for date input
// Format date for <input type="date">
const formatDateForInput = (dateString: string) => {
if (!dateString) return '';
const date = new Date(dateString);
@@ -53,36 +52,29 @@ export default function EditPegawaiPPID() {
useEffect(() => {
const loadPegawai = async () => {
try {
await stateStrukturPPID.posisiOrganisasi.findMany.load(1, 0); // ambil semua data
await stateStrukturPPID.posisiOrganisasi.findManyAll.load();
const data = await stateOrganisasi.edit.load(id);
if (data) {
setFormData({
namaLengkap: data.namaLengkap || "",
gelarAkademik: data.gelarAkademik || "",
imageId: data.imageId || "",
tanggalMasuk: data.tanggalMasuk || "",
email: data.email || "",
telepon: data.telepon || "",
alamat: data.alamat || "",
posisiId: data.posisiId || "",
isActive: data.isActive ?? true, // pakai nullish coalescing
namaLengkap: data.namaLengkap || '',
gelarAkademik: data.gelarAkademik || '',
imageId: data.imageId || '',
tanggalMasuk: data.tanggalMasuk || '',
email: data.email || '',
telepon: data.telepon || '',
alamat: data.alamat || '',
posisiId: data.posisiId || '',
isActive: data.isActive ?? true,
});
if (data.image?.link) {
setPreviewImage(data.image.link);
} else {
setPreviewImage(null);
}
setPreviewImage(data.image?.link || null);
}
} catch (error) {
console.error("Error loading pegawai:", error);
toast.error(
error instanceof Error ? error.message : "Gagal mengambil data pegawai"
);
console.error('Error loading pegawai:', error);
toast.error(error instanceof Error ? error.message : 'Gagal mengambil data pegawai');
}
};
console.log('Current posisiId:', formData.posisiId);
console.log('Available positions:', stateStrukturPPID.posisiOrganisasi.findMany.data?.map(p => p.id));
loadPegawai();
}, [id]);
@@ -90,50 +82,28 @@ export default function EditPegawaiPPID() {
const handleSubmit = async () => {
try {
if (!formData.namaLengkap.trim()) {
toast.error('Nama lengkap tidak boleh kosong');
return;
return toast.error('Nama lengkap tidak boleh kosong');
}
stateOrganisasi.edit.form = {
namaLengkap: formData.namaLengkap.trim(),
gelarAkademik: formData.gelarAkademik.trim(),
imageId: formData.imageId || "",
tanggalMasuk: formData.tanggalMasuk.trim(),
email: formData.email.trim(),
telepon: formData.telepon.trim(),
alamat: formData.alamat.trim(),
posisiId: formData.posisiId.trim(),
isActive: formData.isActive,
};
// Update global state only on submit
const updatedForm = { ...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");
}
// Update imageId in global state
stateOrganisasi.edit.form.imageId = uploaded.id;
if (!uploaded?.id) return toast.error('Gagal upload gambar');
updatedForm.imageId = uploaded.id;
}
if (id && !stateOrganisasi.edit.id) {
stateOrganisasi.edit.id = id;
}
stateOrganisasi.edit.form = updatedForm;
if (id && !stateOrganisasi.edit.id) stateOrganisasi.edit.id = id;
const success = await stateOrganisasi.edit.submit();
if (success) {
router.push("/admin/ppid/struktur-ppid/pegawai");
}
if (success) router.push('/admin/ppid/struktur-ppid/pegawai');
} catch (error) {
console.error("Error updating pegawai:", error);
toast.error(error instanceof Error ? error.message : "Gagal memperbarui data pegawai");
console.error('Error updating pegawai:', error);
toast.error(error instanceof Error ? error.message : 'Gagal memperbarui data pegawai');
}
};
return (
@@ -144,9 +114,7 @@ export default function EditPegawaiPPID() {
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
</Tooltip>
<Title order={4} ml="sm" c="dark">
Edit Data Pegawai PPID
</Title>
<Title order={4} ml="sm" c="dark">Edit Data Pegawai PPID</Title>
</Group>
<Paper
@@ -158,27 +126,26 @@ export default function EditPegawaiPPID() {
style={{ border: '1px solid #e0e0e0' }}
>
<Stack gap="md">
{/* Nama Lengkap */}
<TextInput
label="Nama Lengkap"
placeholder="Masukkan nama lengkap"
value={formData.namaLengkap}
onChange={(e) => setFormData({ ...formData, namaLengkap: e.target.value })}
required
/>
{/* Gelar Akademik */}
<TextInput
label="Gelar Akademik"
placeholder="Contoh: S.Kom"
value={formData.gelarAkademik}
onChange={(e) => setFormData({ ...formData, gelarAkademik: e.target.value })}
/>
{/* Foto Profil */}
<Box>
<TextInput
label="Nama Lengkap"
placeholder="Masukkan nama lengkap"
defaultValue={formData.namaLengkap}
onChange={(e) => setFormData({ ...formData, namaLengkap: e.target.value })}
required
/>
</Box>
<Box>
<TextInput
label="Gelar Akademik"
placeholder="Contoh: S.Kom"
defaultValue={formData.gelarAkademik}
onChange={(e) => setFormData({ ...formData, gelarAkademik: e.target.value })}
/>
</Box>
<Box>
<Text fw="bold" fz="sm" mb={6}>
Foto Profil
</Text>
<Text fw="bold" fz="sm" mb={6}>Foto Profil</Text>
<Dropzone
onDrop={(files) => {
const selectedFile = files[0];
@@ -194,22 +161,12 @@ export default function EditPegawaiPPID() {
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>
<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>
<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>
@@ -221,78 +178,74 @@ export default function EditPegawaiPPID() {
alt="Preview Gambar"
radius="md"
style={{ maxHeight: 220, objectFit: 'contain', border: `1px solid ${colors['blue-button']}` }}
loading='lazy'
loading="lazy"
/>
</Box>
)}
</Box>
{/* Tanggal Masuk */}
<TextInput
label="Tanggal Masuk"
type="date"
placeholder="Contoh: 2022-01-01"
value={formatDateForInput(formData.tanggalMasuk)}
onChange={(e) => setFormData({ ...formData, tanggalMasuk: e.target.value })}
/>
{/* Email */}
<TextInput
label="Email"
type="email"
placeholder="contoh@email.com"
value={formData.email}
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
/>
{/* Telepon */}
<TextInput
label="Telepon"
placeholder="08123456789"
value={formData.telepon}
onChange={(e) => setFormData({ ...formData, telepon: e.target.value })}
/>
{/* Alamat */}
<TextInput
label="Alamat"
placeholder="Jl. Contoh No. 123"
value={formData.alamat}
onChange={(e) => setFormData({ ...formData, alamat: e.target.value })}
/>
{/* Posisi */}
<Box>
<TextInput
label="Tanggal Masuk"
type="date"
placeholder="Contoh: 2022-01-01"
defaultValue={formatDateForInput(formData.tanggalMasuk)}
onChange={(e) => setFormData({ ...formData, tanggalMasuk: e.target.value })}
/>
</Box>
<Box>
<TextInput
label="Email"
type="email"
placeholder="contoh@email.com"
defaultValue={formData.email}
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
/>
</Box>
<Box>
<TextInput
label="Telepon"
placeholder="08123456789"
defaultValue={formData.telepon}
onChange={(e) => setFormData({ ...formData, telepon: e.target.value })}
/>
</Box>
<Box>
<TextInput
label="Alamat"
placeholder="Jl. Contoh No. 123"
defaultValue={formData.alamat}
onChange={(e) => setFormData({ ...formData, alamat: e.target.value })}
/>
</Box>
<Box>
<Text fw="bold" fz="sm" mb={6}>
Posisi
</Text>
<Text fw="bold" fz="sm" mb={6}>Posisi</Text>
<Select
placeholder="Pilih posisi"
data={stateStrukturPPID.posisiOrganisasi.findMany.data?.map(p => ({
value: p.id,
label: p.nama
})) || []}
data={stateStrukturPPID.posisiOrganisasi.findManyAll.data?.map(p => ({ value: p.id, label: p.nama })) || []}
value={formData.posisiId}
onChange={(value) => value && setFormData({ ...formData, posisiId: value })}
searchable
clearable
/>
</Box>
{/* Status Pegawai */}
<Box>
<Text fw="bold" fz="sm" mb={6}>
Status Pegawai
</Text>
<Text fw="bold" fz="sm" mb={6}>Status Pegawai</Text>
<Select
data={[
{ value: 'true', label: 'Aktif' },
{ value: 'false', label: 'Tidak Aktif' },
]}
value={String(formData.isActive)}
onChange={(val) => {
setFormData({ ...formData, isActive: val === 'true' });
}}
onChange={(val) => setFormData({ ...formData, isActive: val === 'true' })}
clearable
/>
</Box>
{/* Submit Button */}
<Group justify="flex-end" mt="md">
<Button
onClick={handleSubmit}

35
src/app/admin/(dashboard)/ppid/struktur-ppid/pegawai/[id]/page.tsx
View File

@@ -12,6 +12,7 @@ import { useProxy } from 'valtio/utils';
function DetailPegawai() {
const statePegawai = useProxy(stateStrukturPPID.pegawai);
const [modalHapus, setModalHapus] = useState(false);
const [modalNonActive, setModalNonActive] = useState(false);
const [selectedId, setSelectedId] = useState<string | null>(null);
const params = useParams();
const router = useRouter();
@@ -30,6 +31,15 @@ function DetailPegawai() {
}
};
const handleNonActive = () => {
if (selectedId) {
statePegawai.nonActive.byId(selectedId);
setModalNonActive(false);
setSelectedId(null);
router.push("/admin/ppid/struktur-ppid/pegawai");
}
};
if (!statePegawai.findUnique.data) {
return (
<Stack py={10}>
@@ -64,7 +74,7 @@ function DetailPegawai() {
<Stack gap="md">
<Box>
<Text fz="lg" fw="bold">Nama Lengkap</Text>
<Text fz="md" c="dimmed" style={{wordBreak: "break-word", whiteSpace: "normal"}}>
<Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }}>
{data.namaLengkap || '-'} {data.gelarAkademik || ''}
</Text>
</Box>
@@ -86,7 +96,7 @@ function DetailPegawai() {
<Box>
<Text fz="lg" fw="bold">Alamat</Text>
<Text fz="md" c="dimmed" style={{wordBreak: "break-word", whiteSpace: "normal"}}>{data.alamat || '-'}</Text>
<Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }}>{data.alamat || '-'}</Text>
</Box>
<Box>
@@ -125,6 +135,19 @@ function DetailPegawai() {
)}
</Box>
<Button
color={data.isActive ? "green" : "gray"}
onClick={() => {
setSelectedId(data.id || null);
setModalNonActive(true);
}}
variant="light"
radius="md"
size="md"
>
{data.isActive ? "Aktif" : "Nonaktif"}
</Button>
<Group gap="sm" mt="md">
<Tooltip label="Hapus Pegawai" withArrow position="top">
<Button
@@ -165,6 +188,14 @@ function DetailPegawai() {
onConfirm={handleHapus}
text="Apakah Anda yakin ingin menghapus data pegawai ini?"
/>
{/* Modal NonActive */}
<ModalKonfirmasiHapus
opened={modalNonActive}
onClose={() => setModalNonActive(false)}
onConfirm={handleNonActive}
text="Apakah Anda yakin ingin menonaktifkan pegawai ini?"
/>
</Box>
);
}

4
src/app/admin/(dashboard)/ppid/struktur-ppid/pegawai/create/page.tsx
View File

@@ -16,7 +16,7 @@ function CreatePegawaiPPID() {
const [previewImage, setPreviewImage] = useState<{ preview: string; file: File } | null>(null);
const stateOrganisasi = useProxy(stateStrukturPPID.pegawai)
useEffect(() => {
stateStrukturPPID.posisiOrganisasi.findMany.load(1, 0);
stateStrukturPPID.posisiOrganisasi.findManyAll.load();
resetForm();
}, []);
@@ -228,7 +228,7 @@ function CreatePegawaiPPID() {
</Text>
<Select
placeholder="Pilih posisi"
data={stateStrukturPPID.posisiOrganisasi.findMany.data?.map(p => ({
data={stateStrukturPPID.posisiOrganisasi.findManyAll.data?.map(p => ({
value: p.id,
label: p.nama
})) || []}

63
src/app/admin/(dashboard)/ppid/struktur-ppid/posisi-organisasi/[id]/page.tsx
View File

@@ -1,5 +1,7 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable react-hooks/exhaustive-deps */
'use client';
import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
import stateStrukturPPID from '@/app/admin/(dashboard)/_state/ppid/struktur_ppid/struktur_PPID';
import colors from '@/con/colors';
@@ -17,20 +19,23 @@ function EditPosisiOrganisasiPPID() {
const stateOrganisasi = useProxy(stateStrukturPPID.posisiOrganisasi);
const [formData, setFormData] = useState({
nama: "",
deskripsi: "",
nama: '',
deskripsi: '',
hierarki: 0,
});
useEffect(() => {
const loadPosisiOrganisasi = async () => {
if (!id) return;
// Fungsi generik untuk update formData
const handleChange = (field: keyof typeof formData, value: any) => {
setFormData(prev => ({ ...prev, [field]: value }));
};
useEffect(() => {
if (!id) return;
const loadPosisiOrganisasi = async () => {
try {
const data = await stateOrganisasi.edit.load(id);
if (data) {
// pastikan id-nya masuk ke state edit
stateOrganisasi.edit.id = id;
setFormData({
nama: data.nama || '',
@@ -38,9 +43,9 @@ function EditPosisiOrganisasiPPID() {
hierarki: data.hierarki || 0,
});
}
} catch (error) {
console.error("Error loading posisi organisasi:", error);
toast.error("Gagal memuat data posisi organisasi");
} catch (err) {
console.error('Error loading posisi organisasi:', err);
toast.error('Gagal memuat data posisi organisasi');
}
};
@@ -48,31 +53,31 @@ function EditPosisiOrganisasiPPID() {
}, [id]);
const handleSubmit = async () => {
try {
if (!formData.nama.trim()) {
toast.error('Nama posisi organisasi tidak boleh kosong');
return;
}
if (!formData.nama.trim()) {
toast.error('Nama posisi organisasi tidak boleh kosong');
return;
}
try {
// Update global state hanya saat submit
stateOrganisasi.edit.form = {
nama: formData.nama.trim(),
deskripsi: formData.deskripsi.trim(),
hierarki: formData.hierarki,
};
// Safety check tambahan: pastikan ID tidak kosong
if (!stateOrganisasi.edit.id) {
stateOrganisasi.edit.id = id; // fallback
stateOrganisasi.edit.id = id;
}
const success = await stateOrganisasi.edit.update();
if (success) {
router.push("/admin/ppid/struktur-ppid/posisi-organisasi");
router.push('/admin/ppid/struktur-ppid/posisi-organisasi');
}
} catch (error) {
console.error("Error updating posisi organisasi:", error);
// toast akan ditampilkan dari fungsi update
} catch (err) {
console.error('Error updating posisi organisasi:', err);
// toast error biasanya sudah ada di update
}
};
@@ -101,32 +106,30 @@ function EditPosisiOrganisasiPPID() {
<TextInput
label="Nama Posisi Organisasi"
placeholder="Masukkan nama posisi organisasi"
defaultValue={formData.nama}
onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
value={formData.nama}
onChange={(e) => handleChange('nama', e.target.value)}
required
/>
<Box>
<Text fw="bold" fz="sm" mb={6}>
Deskripsi
</Text>
<EditEditor
value={formData.deskripsi}
onChange={(htmlContent) => {
setFormData({ ...formData, deskripsi: htmlContent });
}}
onChange={(html) => handleChange('deskripsi', html)}
/>
</Box>
<TextInput
label="Hierarki"
type="number"
min={0}
placeholder="Contoh: 1 (Angka semakin kecil, posisi semakin tinggi)"
defaultValue={formData.hierarki}
value={formData.hierarki}
onChange={(e) => {
const value = parseInt(e.target.value, 10);
setFormData({ ...formData, hierarki: isNaN(value) ? 0 : value });
handleChange('hierarki', isNaN(value) ? 0 : value);
}}
required
/>

5
src/app/admin/(dashboard)/ppid/struktur-ppid/struktur-organisasi/page.tsx
View File

@@ -42,7 +42,10 @@ function ListStrukturOrganisasiPPID() {
}
const posisiMap = new Map<string, any>();
for (const pegawai of stateOrganisasi.findMany.data) {
const aktifPegawai = stateOrganisasi.findMany.data.filter(p => p.isActive);
for (const pegawai of aktifPegawai) {
const posisiId = pegawai.posisi.id;
if (!posisiMap.has(posisiId)) {
posisiMap.set(posisiId, {