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

57
src/app/admin/(dashboard)/ppid/daftar-informasi-publik-desa-darmasaba/[id]/edit/page.tsx
View File

@@ -1,5 +1,6 @@
'use client';
/* eslint-disable react-hooks/exhaustive-deps */
'use client';
import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
import daftarInformasiPublik from '@/app/admin/(dashboard)/_state/ppid/daftar_informasi_publik/daftarInformasiPublik';
import colors from '@/con/colors';
@@ -17,15 +18,15 @@ interface FormDaftarInformasi {
}
function EditDaftarInformasiPublik() {
const daftarInformasi = useProxy(daftarInformasiPublik)
const router = useRouter()
const params = useParams()
const daftarInformasi = useProxy(daftarInformasiPublik);
const router = useRouter();
const params = useParams();
const [formData, setFormData] = useState<FormDaftarInformasi>({
jenisInformasi: '',
deskripsi: '',
tanggal: '',
})
});
const formatDateForInput = (dateString: string) => {
if (!dateString) return '';
@@ -33,6 +34,7 @@ function EditDaftarInformasiPublik() {
return date.toISOString().split('T')[0];
};
// Load data once on mount / when ID changes
useEffect(() => {
const loadDaftarInformasi = async () => {
const id = params?.id as string;
@@ -48,14 +50,18 @@ function EditDaftarInformasiPublik() {
});
}
} catch (error) {
console.error("Error loading daftar informasi:", error);
toast.error("Gagal memuat data daftar informasi");
console.error('Error loading daftar informasi:', error);
toast.error('Gagal memuat data daftar informasi');
}
}
};
loadDaftarInformasi();
}, [params?.id]);
const handleChange = (field: keyof FormDaftarInformasi, value: string) => {
setFormData((prev) => ({ ...prev, [field]: value }));
};
const handleSubmit = async () => {
try {
daftarInformasi.edit.form = {
@@ -63,14 +69,14 @@ function EditDaftarInformasiPublik() {
jenisInformasi: formData.jenisInformasi.trim(),
deskripsi: formData.deskripsi.trim(),
tanggal: formData.tanggal.trim(),
}
await daftarInformasi.edit.update()
router.push("/admin/ppid/daftar-informasi-publik-desa-darmasaba");
};
await daftarInformasi.edit.update();
router.push('/admin/ppid/daftar-informasi-publik-desa-darmasaba');
} catch (error) {
console.error("Error updating berita:", error);
toast.error("Terjadi kesalahan saat memperbarui berita");
console.error('Error updating berita:', error);
toast.error('Terjadi kesalahan saat memperbarui berita');
}
}
};
return (
<Box px={{ base: 'sm', md: 'lg' }} py="md">
@@ -97,13 +103,8 @@ function EditDaftarInformasiPublik() {
<TextInput
label="Jenis Informasi"
placeholder="Masukkan jenis informasi"
defaultValue={formData.jenisInformasi}
onChange={(val) => {
setFormData({
...formData,
jenisInformasi: val.target.value
});
}}
value={formData.jenisInformasi}
onChange={(e) => handleChange('jenisInformasi', e.target.value)}
required
/>
@@ -113,10 +114,7 @@ function EditDaftarInformasiPublik() {
</Text>
<EditEditor
value={formData.deskripsi}
onChange={(htmlContent) => {
setFormData((prev) => ({ ...prev, deskripsi: htmlContent }));
daftarInformasi.edit.form.deskripsi = htmlContent;
}}
onChange={(htmlContent) => handleChange('deskripsi', htmlContent)}
/>
</Box>
@@ -124,13 +122,8 @@ function EditDaftarInformasiPublik() {
type="date"
label="Tanggal Publikasi"
placeholder="Pilih tanggal publikasi"
defaultValue={formatDateForInput(formData.tanggal)}
onChange={(val) => {
setFormData({
...formData,
tanggal: val.target.value
});
}}
value={formatDateForInput(formData.tanggal)}
onChange={(e) => handleChange('tanggal', e.target.value)}
required
/>

2
src/app/admin/(dashboard)/ppid/daftar-informasi-publik-desa-darmasaba/[id]/page.tsx
View File

@@ -63,7 +63,7 @@ function DetailDaftarInformasiPublik() {
Detail Informasi Publik
</Text>
<Paper bg="#f8f9fa" p="md" radius="md" shadow="xs">
<Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
<Stack gap="lg">
<Box>
<Text fz="lg" fw="bold" mb={4}>Jenis Informasi</Text>

53
src/app/admin/(dashboard)/ppid/dasar-hukum/edit/page.tsx
View File

@@ -9,37 +9,44 @@ import stateDasarHukumPPID from '../../../_state/ppid/dasar_hukum/dasarHukum';
import { useRouter } from 'next/navigation';
import { IconArrowBack } from '@tabler/icons-react';
const PPIDTextEditor = dynamic(() => import('../../_com/PPIDTextEditor').then(mod => mod.PPIDTextEditor), {
ssr: false,
});
const PPIDTextEditor = dynamic(
() => import('../../_com/PPIDTextEditor').then(mod => mod.PPIDTextEditor),
{ ssr: false }
);
function EditDasarHukum() {
const router = useRouter()
const dasarHukumState = useProxy(stateDasarHukumPPID)
const [judul, setJudul] = useState('');
const [content, setContent] = useState('');
const router = useRouter();
const dasarHukumState = useProxy(stateDasarHukumPPID);
// Gabungkan judul & content jadi satu state lokal
const [formData, setFormData] = useState({ judul: '', content: '' });
// Load data awal sekali
useShallowEffect(() => {
if (!dasarHukumState.findById.data) {
dasarHukumState.findById.initialize(); // biar masuk ke `findFirst` route kamu
dasarHukumState.findById.initialize();
}
}, []);
// Set state lokal saat data global sudah tersedia
useEffect(() => {
if (dasarHukumState.findById.data) {
setJudul(dasarHukumState.findById.data.judul ?? '')
setContent(dasarHukumState.findById.data.content ?? '')
setFormData({
judul: dasarHukumState.findById.data.judul ?? '',
content: dasarHukumState.findById.data.content ?? '',
});
}
}, [dasarHukumState.findById.data])
}, [dasarHukumState.findById.data]);
const submit = () => {
const handleSubmit = () => {
if (dasarHukumState.findById.data) {
dasarHukumState.findById.data.judul = judul;
dasarHukumState.findById.data.content = content;
dasarHukumState.update.save(dasarHukumState.findById.data)
// Update global state hanya saat submit
const updated = { ...dasarHukumState.findById.data, ...formData };
dasarHukumState.update.save(updated);
}
router.push('/admin/ppid/dasar-hukum')
}
router.push('/admin/ppid/dasar-hukum');
};
return (
<Box px={{ base: 'sm', md: 'lg' }} py="md">
<Group mb="md">
@@ -69,12 +76,12 @@ function EditDasarHukum() {
<Box style={{ border: '1px solid #dee2e6', borderRadius: '0.25rem' }}>
<PPIDTextEditor
showSubmit={false}
onChange={setJudul}
initialContent={judul}
initialContent={formData.judul}
onChange={value => setFormData(prev => ({ ...prev, judul: value }))}
/>
</Box>
</Box>
<Box>
<Text fw="bold" fz="sm" mb={6}>
Konten
@@ -82,15 +89,15 @@ function EditDasarHukum() {
<Box style={{ border: '1px solid #dee2e6', borderRadius: '0.25rem' }}>
<PPIDTextEditor
showSubmit={false}
onChange={setContent}
initialContent={content}
initialContent={formData.content}
onChange={value => setFormData(prev => ({ ...prev, content: value }))}
/>
</Box>
</Box>
<Group justify="flex-end" mt="md">
<Button
onClick={submit}
onClick={handleSubmit}
loading={dasarHukumState.update.loading}
radius="md"
size="md"

70
src/app/admin/(dashboard)/ppid/ikm-desa-darmasaba/_lib/layoutTabs.tsx
View File

@@ -1,7 +1,7 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client';
import colors from '@/con/colors';
import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
import { ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
import { IconChartBar, IconUsers } from '@tabler/icons-react';
import { usePathname, useRouter } from 'next/navigation';
import React, { useEffect, useState } from 'react';
@@ -49,41 +49,49 @@ function LayoutTabsIKM({ children }: { children: React.ReactNode }) {
IKM Desa Darmasaba
</Title>
<Tabs
radius="xl"
color={colors['blue-button']}
color={colors["blue-button"]}
variant="pills"
value={activeTab}
onChange={handleTabChange}
radius="lg"
keepMounted={false}
>
<TabsList
p="sm"
style={{
background: "#F3F4FB",
borderRadius: "1rem",
}}
>
{tabs.map((e, i) => (
<Tooltip
key={i}
label={e.description}
withArrow
position="bottom"
transitionProps={{ transition: 'pop', duration: 200 }}
>
<TabsTab
value={e.value}
leftSection={e.icon}
style={{
fontWeight: 500,
fontSize: "0.9rem",
transition: "all 0.2s ease",
}}
<ScrollArea type="auto" offsetScrollbars>
<TabsList
p="sm"
style={{
background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
borderRadius: "1rem",
boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
display: "flex",
flexWrap: "nowrap",
gap: "0.5rem",
paddingInline: "0.5rem", // ✅ biar nggak nempel ke tepi
}}
>
{tabs.map((e, i) => (
<Tooltip
key={i}
label={e.description}
withArrow
position="bottom"
transitionProps={{ transition: 'pop', duration: 200 }}
>
{e.label}
</TabsTab>
</Tooltip>
))}
</TabsList>
<TabsTab
value={e.value}
leftSection={e.icon}
style={{
fontWeight: 500,
fontSize: "0.9rem",
transition: "all 0.2s ease",
}}
>
{e.label}
</TabsTab>
</Tooltip>
))}
</TabsList>
</ScrollArea>
{tabs.map((e, i) => (
<TabsPanel key={i} value={e.value} mt="md">
{/* Konten dummy, bisa diganti tergantung routing */}

147
src/app/admin/(dashboard)/ppid/ikm-desa-darmasaba/responden/[id]/edit/page.tsx
View File

@@ -1,11 +1,11 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
'use client'
/* eslint-disable react-hooks/exhaustive-deps */
import indeksKepuasanState from '@/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan';
import colors from '@/con/colors';
import { Box, Button, Group, Paper, Select, Stack, TextInput, Title, Tooltip } from '@mantine/core';
import { IconArrowBack, IconDeviceFloppy } 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';
@@ -18,24 +18,35 @@ interface FormResponden {
}
function EditResponden() {
const router = useRouter()
const params = useParams() as { id: string }
const state = useProxy(indeksKepuasanState.responden)
const id = params.id
const router = useRouter();
const params = useParams() as { id: string };
const state = useProxy(indeksKepuasanState.responden);
const id = params.id;
const [formData, setFormData] = useState<FormResponden>({
name: '',
tanggal: '',
jenisKelaminId: '',
ratingId: '',
kelompokUmurId: '',
})
});
// Helper untuk membuat data Select dari state
const mapSelectData = (data: any[] | null | undefined) =>
(data || [])
.filter(Boolean)
.map((v: any) => ({
value: v.id || '',
label: typeof v.name === 'string' ? v.name : 'Tanpa Nama',
}));
useEffect(() => {
// Load opsi dropdown
indeksKepuasanState.jenisKelaminResponden.findMany.load();
indeksKepuasanState.pilihanRatingResponden.findMany.load();
indeksKepuasanState.kelompokUmurResponden.findMany.load();
const loadResponden = async () => {
const id = params?.id as string;
if (!id) return;
try {
@@ -43,39 +54,35 @@ function EditResponden() {
if (data) {
state.update.id = id;
state.update.form = {
name: data.name,
tanggal: data.tanggal,
jenisKelaminId: data.jenisKelaminId,
ratingId: data.ratingId,
kelompokUmurId: data.kelompokUmurId,
};
// **formData lokal tetap controlled**, tidak overwrite tiap render
setFormData({
name: data.name,
tanggal: data.tanggal,
jenisKelaminId: data.jenisKelaminId,
ratingId: data.ratingId,
kelompokUmurId: data.kelompokUmurId,
name: data.name || '',
tanggal: data.tanggal || '',
jenisKelaminId: data.jenisKelaminId || '',
ratingId: data.ratingId || '',
kelompokUmurId: data.kelompokUmurId || '',
});
}
} catch (error) {
console.error("Error loading program penghijauan:", error);
toast.error("Gagal memuat data program penghijauan");
console.error("Error loading responden:", error);
toast.error("Gagal memuat data responden");
}
}
};
loadResponden();
}, [params?.id]);
}, [id, state.update]);
const handleChange = (field: keyof FormResponden) => (e: ChangeEvent<HTMLInputElement> | string | null) => {
const value = typeof e === 'string' || e === null ? e || '' : e.currentTarget.value;
setFormData((prev) => ({ ...prev, [field]: value }));
};
const handleSubmit = async () => {
state.update.id = id;
state.update.form = { ...formData }; // <-- sinkronisasi manual
state.update.form = { ...formData }; // hanya update global state saat submit
await state.update.submit();
router.push('/admin/ppid/ikm-desa-darmasaba/responden')
}
router.push('/admin/ppid/ikm-desa-darmasaba/responden');
};
return (
<Box px={{ base: 'sm', md: 'lg' }} py="md">
@@ -101,47 +108,27 @@ function EditResponden() {
<Stack gap="md">
<TextInput
label="Nama Responden"
type='text'
placeholder="Masukkan nama responden"
defaultValue={formData.name}
onChange={(val) => {
setFormData({
...formData,
name: val.currentTarget.value
})
}}
value={formData.name}
onChange={handleChange('name')}
radius="md"
required
/>
<TextInput
label="Tanggal"
type="date"
placeholder='Pilih tanggal'
defaultValue={formData.tanggal ? new Date(formData.tanggal).toISOString().split('T')[0] : ''}
onChange={(e) => {
const selectedDate = e.currentTarget.value;
setFormData({
...formData,
tanggal: selectedDate,
});
}}
value={formData.tanggal ? new Date(formData.tanggal).toISOString().split('T')[0] : ''}
onChange={handleChange('tanggal')}
radius="md"
required
/>
<Select
key="jenisKelamin"
label="Jenis Kelamin"
placeholder="Pilih jenis kelamin"
value={formData.jenisKelaminId}
onChange={(val) => setFormData({ ...formData, jenisKelaminId: val || "" })}
data={
(indeksKepuasanState.jenisKelaminResponden.findMany.data || [])
.filter(Boolean)
.map((v) => ({
value: v.id || '',
label: typeof v.name === 'string' ? v.name : 'Tanpa Nama'
}))
}
onChange={handleChange('jenisKelaminId')}
data={mapSelectData(indeksKepuasanState.jenisKelaminResponden.findMany.data)}
disabled={indeksKepuasanState.jenisKelaminResponden.findMany.loading}
clearable
searchable
@@ -149,20 +136,13 @@ function EditResponden() {
radius="md"
error={!formData.jenisKelaminId ? "Pilih jenis kelamin" : undefined}
/>
<Select
key="rating"
value={formData.ratingId}
onChange={(val) => setFormData({ ...formData, ratingId: val || "" })}
label="Rating"
placeholder='Pilih rating'
data={
(indeksKepuasanState.pilihanRatingResponden.findMany.data || [])
.filter(Boolean)
.map((v) => ({
value: v.id || '',
label: typeof v.name === 'string' ? v.name : 'Tanpa Nama'
}))
}
placeholder="Pilih rating"
value={formData.ratingId}
onChange={handleChange('ratingId')}
data={mapSelectData(indeksKepuasanState.pilihanRatingResponden.findMany.data)}
disabled={indeksKepuasanState.pilihanRatingResponden.findMany.loading}
clearable
searchable
@@ -172,37 +152,26 @@ function EditResponden() {
/>
<Select
key={"kelompokUmur"}
value={formData.kelompokUmurId}
onChange={(val) => setFormData({ ...formData, kelompokUmurId: val || "" })}
label="Kelompok Umur"
placeholder='Pilih kelompok umur'
data={
(indeksKepuasanState.kelompokUmurResponden.findMany.data || [])
.filter(Boolean)
.map((v) => ({
value: v.id || '',
label: typeof v.name === 'string' ? v.name : 'Tanpa Nama'
}))
}
placeholder="Pilih kelompok umur"
value={formData.kelompokUmurId}
onChange={handleChange('kelompokUmurId')}
data={mapSelectData(indeksKepuasanState.kelompokUmurResponden.findMany.data)}
disabled={indeksKepuasanState.kelompokUmurResponden.findMany.loading}
clearable
searchable
required
radius="md"
error={!formData.kelompokUmurId ? "Pilih kelompok umur" : undefined}
/>
<Group justify="flex-end" mt="md">
<Button
variant="light"
color="red"
onClick={() => router.back()}
>
<Button variant="light" color="red" onClick={() => router.back()}>
Batal
</Button>
<Button
<Button
leftSection={<IconDeviceFloppy size={20} />}
onClick={handleSubmit}
onClick={handleSubmit}
loading={state.update.loading}
color={colors['blue-button']}
>

95
src/app/admin/(dashboard)/ppid/permohonan-informasi-publik/[id]/page.tsx Normal file
View File

@@ -0,0 +1,95 @@
'use client'
import colors from '@/con/colors';
import { Box, Button, Paper, Skeleton, Stack, Text } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconArrowBack } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
import { useProxy } from 'valtio/utils';
import statepermohonanInformasiPublikForm from '../../../_state/ppid/permohonan_informasi_publik/permohonanInformasiPublik';
function DetailPermohonanInformasiPublik() {
const state = useProxy(statepermohonanInformasiPublikForm.statepermohonanInformasiPublik)
const router = useRouter()
const params = useParams()
useShallowEffect(() => {
state.findUnique.load(params?.id as string)
}, [params?.id])
if (!state.findUnique.data) {
return (
<Stack py={10}>
<Skeleton height={500} radius="md" />
</Stack>
)
}
const data = state.findUnique.data;
return (
<Box py="md">
<Button
variant="subtle"
onClick={() => router.back()}
leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
mb={15}
>
Kembali
</Button>
<Paper
withBorder
w={{ base: '100%', md: '60%' }}
bg={colors['white-1']}
p="lg"
radius="md"
shadow="sm"
>
<Stack gap="xl">
<Text fz="2xl" fw="bold" c={colors['blue-button']}>
Detail Informasi Publik
</Text>
<Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
<Stack gap="lg">
<Box>
<Text fz="lg" fw="bold" mb={4}>Nama</Text>
<Text fz="md" c="dimmed">{data.name || '-'}</Text>
</Box>
<Box>
<Text fz="lg" fw="bold" mb={4}>NIK</Text>
<Text fz="md" c="dimmed">{data.nik || '-'}</Text>
</Box>
<Box>
<Text fz="lg" fw="bold" mb={4}>Telepon</Text>
<Text fz="md" c="dimmed">{data.notelp || '-'}</Text>
</Box>
<Box>
<Text fz="lg" fw="bold" mb={4}>Email</Text>
<Text fz="md" c="dimmed">{data.email || '-'}</Text>
</Box>
<Box>
<Text fz="lg" fw="bold" mb={4}>Jenis Informasi</Text>
<Text fz="md" c="dimmed">{data.jenisInformasiDiminta?.name || '-'}</Text>
</Box>
<Box>
<Text fz="lg" fw="bold" mb={4}>Cara Akses Informasi</Text>
<Text fz="md" c="dimmed">{data.caraMemperolehInformasi?.name || '-'}</Text>
</Box>
<Box>
<Text fz="lg" fw="bold" mb={4}>Cara Akses Salinan Informasi</Text>
<Text fz="md" c="dimmed">{data.caraMemperolehSalinanInformasi?.name || '-'}</Text>
</Box>
</Stack>
</Paper>
</Stack>
</Paper>
</Box>
);
}
export default DetailPermohonanInformasiPublik;

53
src/app/admin/(dashboard)/ppid/permohonan-informasi-publik/page.tsx
View File

@@ -1,13 +1,15 @@
'use client'
import { useProxy } from 'valtio/utils'
import { useShallowEffect } from '@mantine/hooks'
import { Box, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Title, Text, Group, Tooltip, Badge } from '@mantine/core'
import { IconInfoCircle, IconUser, IconMail, IconPhone, IconId } from '@tabler/icons-react'
import statepermohonanInformasiPublikForm from '../../_state/ppid/permohonan_informasi_publik/permohonanInformasiPublik'
import colors from '@/con/colors'
import { Box, Button, Group, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip } from '@mantine/core'
import { useShallowEffect } from '@mantine/hooks'
import { IconDeviceImacCog, IconId, IconInfoCircle, IconPhone, IconUser } from '@tabler/icons-react'
import { useRouter } from 'next/navigation'
import { useProxy } from 'valtio/utils'
import statepermohonanInformasiPublikForm from '../../_state/ppid/permohonan_informasi_publik/permohonanInformasiPublik'
function Page() {
const permohonanInformasiPublikState = useProxy(statepermohonanInformasiPublikForm)
const router = useRouter()
useShallowEffect(() => {
permohonanInformasiPublikState.statepermohonanInformasiPublik.findMany.load()
@@ -56,10 +58,7 @@ function Page() {
<TableTh><Group gap={5}><IconUser size={16} /> Nama</Group></TableTh>
<TableTh><Group gap={5}><IconId size={16} /> NIK</Group></TableTh>
<TableTh><Group gap={5}><IconPhone size={16} /> Telepon</Group></TableTh>
<TableTh><Group gap={5}><IconMail size={16} /> Email</Group></TableTh>
<TableTh>Jenis Informasi</TableTh>
<TableTh>Cara Akses Informasi</TableTh>
<TableTh>Salinan Informasi</TableTh>
<TableTh><Group gap={5}><IconInfoCircle size={16} /> Detail</Group></TableTh>
</TableTr>
</TableThead>
<TableTbody>
@@ -67,27 +66,31 @@ function Page() {
<TableTr key={item.id}>
<TableTd>{index + 1}</TableTd>
<TableTd>
<Tooltip label={item.name}>
<Box w={200}>
<Text lineClamp={1} fw={500}>{item.name}</Text>
</Tooltip>
</TableTd>
<TableTd>{item.nik}</TableTd>
<TableTd>{item.notelp}</TableTd>
<TableTd>{item.email}</TableTd>
<TableTd>
<Badge variant="light" radius="sm" color="blue">
{item.jenisInformasiDiminta?.name || '-'}
</Badge>
</Box>
</TableTd>
<TableTd>
<Tooltip label={item.caraMemperolehInformasi?.name}>
<Text lineClamp={1} size="sm">{item.caraMemperolehInformasi?.name || '-'}</Text>
</Tooltip>
<Box w={200}>
{item.nik}
</Box>
</TableTd>
<TableTd>
<Tooltip label={item.caraMemperolehSalinanInformasi?.name}>
<Text lineClamp={1} size="sm">{item.caraMemperolehSalinanInformasi?.name || '-'}</Text>
</Tooltip>
<Box w={200}>
{item.notelp}
</Box>
</TableTd>
<TableTd>
<Button
size="xs"
radius="md"
variant="light"
color="blue"
leftSection={<IconDeviceImacCog size={16} />}
onClick={() => router.push(`/admin/ppid/permohonan-informasi-publik/${item.id}`)}
>
Detail
</Button>
</TableTd>
</TableTr>
))}

82
src/app/admin/(dashboard)/ppid/permohonan-keberatan-informasi-publik/[id]/page.tsx Normal file
View File

@@ -0,0 +1,82 @@
'use client'
import colors from '@/con/colors';
import { Box, Button, Paper, Skeleton, Stack, Text } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconArrowBack } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
import { useProxy } from 'valtio/utils';
import statePermohonanKeberatan from '../../../_state/ppid/permohonan_keberatan_informasi_publik/permohonanKeberatanInformasi'
function DetailPermohonanKeberatanInformasiPublik() {
const state = useProxy(statePermohonanKeberatan)
const router = useRouter()
const params = useParams()
useShallowEffect(() => {
state.findUnique.load(params?.id as string)
}, [params?.id])
if (!state.findUnique.data) {
return (
<Stack py={10}>
<Skeleton height={500} radius="md" />
</Stack>
)
}
const data = state.findUnique.data;
return (
<Box py="md">
<Button
variant="subtle"
onClick={() => router.back()}
leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
mb={15}
>
Kembali
</Button>
<Paper
withBorder
w={{ base: '100%', md: '60%' }}
bg={colors['white-1']}
p="lg"
radius="md"
shadow="sm"
>
<Stack gap="xl">
<Text fz="2xl" fw="bold" c={colors['blue-button']}>
Detail Informasi Publik
</Text>
<Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
<Stack gap="lg">
<Box>
<Text fz="lg" fw="bold" mb={4}>Nama</Text>
<Text fz="md" c="dimmed">{data.name || '-'}</Text>
</Box>
<Box>
<Text fz="lg" fw="bold" mb={4}>Telepon</Text>
<Text fz="md" c="dimmed">{data.notelp || '-'}</Text>
</Box>
<Box>
<Text fz="lg" fw="bold" mb={4}>Email</Text>
<Text fz="md" c="dimmed">{data.email || '-'}</Text>
</Box>
<Box>
<Text fz="lg" fw="bold" mb={4}>Alasan</Text>
<Text fz="md" c="dimmed" dangerouslySetInnerHTML={{ __html: data.alasan || '-' }}></Text>
</Box>
</Stack>
</Paper>
</Stack>
</Paper>
</Box>
);
}
export default DetailPermohonanKeberatanInformasiPublik;

35
src/app/admin/(dashboard)/ppid/permohonan-keberatan-informasi-publik/page.tsx
View File

@@ -1,13 +1,15 @@
'use client'
import colors from '@/con/colors'
import { Box, Group, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip } from '@mantine/core'
import { Box, Button, Group, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip } from '@mantine/core'
import { useShallowEffect } from '@mantine/hooks'
import { IconInfoCircle, IconMail, IconMessage, IconPhone, IconUser } from '@tabler/icons-react'
import { IconDeviceImacCog, IconInfoCircle, IconMail, IconPhone, IconUser } from '@tabler/icons-react'
import { useProxy } from 'valtio/utils'
import statePermohonanKeberatan from '../../_state/ppid/permohonan_keberatan_informasi_publik/permohonanKeberatanInformasi'
import { useRouter } from 'next/navigation'
function Page() {
const listState = useProxy(statePermohonanKeberatan)
const router = useRouter()
useShallowEffect(() => {
listState.findMany.load()
}, [])
@@ -55,7 +57,7 @@ function Page() {
<TableTh><Group gap={5}><IconUser size={16} /> Nama</Group></TableTh>
<TableTh><Group gap={5}><IconMail size={16} /> Email</Group></TableTh>
<TableTh><Group gap={5}><IconPhone size={16} /> Telepon</Group></TableTh>
<TableTh><Group gap={5}><IconMessage size={16} /> Alasan Keberatan</Group></TableTh>
<TableTh><Group gap={5}><IconInfoCircle size={16} /> Detail</Group></TableTh>
</TableTr>
</TableThead>
<TableTbody>
@@ -74,23 +76,16 @@ function Page() {
<Text>{item.notelp || '-'}</Text>
</TableTd>
<TableTd>
<Tooltip label={item.alasan?.replace(/<[^>]*>?/gm, '')}>
<div
style={{
maxWidth: '300px',
overflow: 'hidden',
textOverflow: 'ellipsis',
wordBreak: "break-word",
whiteSpace: "normal"
}}
dangerouslySetInnerHTML={{
__html: item.alasan ?
item.alasan.replace(/<[^>]*>?/gm, '').substring(0, 50) + '...' :
'-'
}}
/>
</Tooltip>
<Button
size="xs"
radius="md"
variant="light"
color="blue"
leftSection={<IconDeviceImacCog size={16} />}
onClick={() => router.push(`/admin/ppid/permohonan-keberatan-informasi-publik/${item.id}`)}
>
Detail
</Button>
</TableTd>
</TableTr>
))}

2
src/app/admin/(dashboard)/ppid/profile-ppid/[id]/page.tsx
View File

@@ -175,7 +175,7 @@ function EditProfilePPID() {
<TextInput
label={<Text fw="bold">Nama Perbekel</Text>}
placeholder="Masukkan nama perbekel"
defaultValue={allState.editForm.form.name}
value={allState.editForm.form.name}
onChange={(e) => handleFieldChange('name', e.currentTarget.value)}
error={!allState.editForm.form.name && "Nama wajib diisi"}
/>

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, {

33
src/app/admin/(dashboard)/ppid/visi-misi-ppid/edit/page.tsx
View File

@@ -10,13 +10,14 @@ import stateVisiMisiPPID from '../../../_state/ppid/visi_misi_ppid/visimisiPPID'
import MisiPPID from '../misiPPID/misi-PPID';
import VisiPPID from '../visiPPID/visi-PPID';
function VisiMisiPPIDEdit() {
const router = useRouter()
const router = useRouter();
const visiMisi = useProxy(stateVisiMisiPPID);
const [draftVisi, setDraftVisi] = useState('');
const [draftMisi, setDraftMisi] = useState('');
// Gabung state lokal menjadi satu object
const [formData, setFormData] = useState({ visi: '', misi: '' });
// Initialize global data ke state lokal saat pertama load
useShallowEffect(() => {
if (!visiMisi.findById.data) {
visiMisi.findById.initialize();
@@ -25,19 +26,25 @@ function VisiMisiPPIDEdit() {
useEffect(() => {
if (visiMisi.findById.data) {
setDraftVisi(visiMisi.findById.data.visi ?? '');
setDraftMisi(visiMisi.findById.data.misi ?? '');
setFormData({
visi: visiMisi.findById.data.visi ?? '',
misi: visiMisi.findById.data.misi ?? '',
});
}
}, [visiMisi.findById.data]);
const handleChange = (key: 'visi' | 'misi', value: string) => {
setFormData(prev => ({ ...prev, [key]: value }));
};
const submit = () => {
if (visiMisi.findById.data) {
// update nilai di state global hanya saat submit
visiMisi.findById.data.visi = draftVisi;
visiMisi.findById.data.misi = draftMisi;
// update nilai global hanya saat submit
visiMisi.findById.data.visi = formData.visi;
visiMisi.findById.data.misi = formData.misi;
visiMisi.update.save(visiMisi.findById.data);
}
router.push('/admin/ppid/visi-misi-ppid')
router.push('/admin/ppid/visi-misi-ppid');
};
return (
@@ -63,11 +70,11 @@ function VisiMisiPPIDEdit() {
>
<Stack gap="xl">
<Box>
<VisiPPID value={draftVisi} onChange={setDraftVisi} />
<VisiPPID value={formData.visi} onChange={value => handleChange('visi', value)} />
</Box>
<Box>
<MisiPPID value={draftMisi} onChange={setDraftMisi} />
<MisiPPID value={formData.misi} onChange={value => handleChange('misi', value)} />
</Box>
<Group justify="flex-end" mt="md">