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

Fix QC Kak Inno Admin, Fix QC Keano UI User, Fix QC Pak jun tabel apbdes

Browse Source
This commit is contained in:
nico
2025-11-12 17:42:31 +08:00
parent 417a8937f5
commit 9622eb5a9a
354 changed files with 11444 additions and 4012 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/app/admin/(dashboard)/landing-page/prestasi-desa/kategori-prestasi-desa/[id]/page.tsx
View File

@@ -3,7 +3,7 @@
import prestasiState from '@/app/admin/(dashboard)/_state/landing-page/prestasi-desa';
import colors from '@/con/colors';
import { Box, Button, Group, Paper, Stack, TextInput, Title } from '@mantine/core';
import { Box, Button, Group, Paper, Stack, TextInput, Title, Loader } from '@mantine/core';
import { IconArrowBack } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
@@ -17,6 +17,8 @@ function EditKategoriPrestasi() {
const stateKategori = useProxy(prestasiState.kategoriPrestasi);
const [formData, setFormData] = useState({ name: '' });
const [isSubmitting, setIsSubmitting] = useState(false);
const [resetData, setResetData] = useState({ name: '' });
const [loading, setLoading] = useState(false);
// Load data kategori prestasi saat component mount
@@ -30,6 +32,7 @@ function EditKategoriPrestasi() {
if (data) {
stateKategori.edit.id = id;
setFormData({ name: data.name || '' });
setResetData({ name: data.name || '' });
}
} catch (err) {
console.error(err);
@@ -42,6 +45,13 @@ function EditKategoriPrestasi() {
loadKategori();
}, [id]);
const resetForm = () => {
setFormData({
name: resetData.name,
});
toast.info('Form dikembalikan ke data awal');
};
// Submit: update global state hanya saat submit
const handleSubmit = async () => {
if (!formData.name.trim()) {
@@ -50,6 +60,7 @@ function EditKategoriPrestasi() {
}
try {
setIsSubmitting(true);
stateKategori.edit.form = { name: formData.name.trim() };
stateKategori.edit.id ||= id; // fallback jika id belum ada
@@ -61,6 +72,8 @@ function EditKategoriPrestasi() {
} catch (err) {
console.error(err);
toast.error('Gagal memperbarui kategori prestasi desa');
} finally {
setIsSubmitting(false);
}
};
@@ -94,18 +107,29 @@ function EditKategoriPrestasi() {
/>
<Group justify="right">
{/* Tombol Batal */}
<Button
variant="outline"
color="gray"
radius="md"
size="md"
onClick={resetForm}
>
Batal
</Button>
{/* Tombol Simpan */}
<Button
onClick={handleSubmit}
radius="md"
size="md"
loading={loading}
style={{
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}
>
Simpan
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
</Button>
</Group>
</Stack>

38
src/app/admin/(dashboard)/landing-page/prestasi-desa/kategori-prestasi-desa/create/page.tsx
View File

@@ -2,16 +2,18 @@
'use client'
import prestasiState from '@/app/admin/(dashboard)/_state/landing-page/prestasi-desa';
import colors from '@/con/colors';
import { Box, Button, Group, Paper, Stack, TextInput, Title } from '@mantine/core';
import { Box, Button, Group, Paper, Stack, TextInput, Title, Loader } from '@mantine/core';
import { IconArrowBack } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useEffect } from 'react';
import { useEffect, useState } from 'react';
import { toast } from 'react-toastify';
import { useProxy } from 'valtio/utils';
function CreateKategoriPrestasi() {
const router = useRouter();
const stateKategori = useProxy(prestasiState.kategoriPrestasi)
const [isSubmitting, setIsSubmitting] = useState(false);
useEffect(() => {
stateKategori.findMany.load();
@@ -24,9 +26,17 @@ function CreateKategoriPrestasi() {
}
const handleSubmit = async () => {
await stateKategori.create.create();
resetForm();
router.push("/admin/landing-page/prestasi-desa/kategori-prestasi-desa")
try {
setIsSubmitting(true);
await stateKategori.create.create();
resetForm();
router.push("/admin/landing-page/prestasi-desa/kategori-prestasi-desa")
} catch (error) {
console.error("Error creating kategori prestasi:", error);
toast.error("Terjadi kesalahan saat menambahkan kategori prestasi");
} finally {
setIsSubmitting(false);
}
}
return (
@@ -52,12 +62,24 @@ function CreateKategoriPrestasi() {
<TextInput
label="Nama Kategori Prestasi"
placeholder="Masukkan nama kategori prestasi"
defaultValue={stateKategori.create.form.name || ''}
value={stateKategori.create.form.name || ''}
onChange={(val) => (stateKategori.create.form.name = val.target.value)}
required
/>
<Group justify="right" mt="md">
<Group justify="right">
{/* Tombol Batal */}
<Button
variant="outline"
color="gray"
radius="md"
size="md"
onClick={resetForm}
>
Reset
</Button>
{/* Tombol Simpan */}
<Button
onClick={handleSubmit}
radius="md"
@@ -68,7 +90,7 @@ function CreateKategoriPrestasi() {
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}
>
Simpan
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
</Button>
</Group>
</Stack>

114
src/app/admin/(dashboard)/landing-page/prestasi-desa/list-prestasi-desa/[id]/edit/page.tsx
View File

@@ -1,6 +1,6 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client';
import { Box, Button, Group, Image, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
import { ActionIcon, Box, Button, Group, Image, Paper, Select, Stack, Text, TextInput, Title, Loader } from '@mantine/core';
import { Dropzone } from '@mantine/dropzone';
import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
@@ -28,6 +28,17 @@ export default function EditPrestasiDesa() {
kategoriId: '',
imageId: '',
});
const [isSubmitting, setIsSubmitting] = useState(false);
const [originalData, setOriginalData] = useState({
name: "",
deskripsi: "",
kategoriId: "",
imageId: "",
imageUrl: "",
});
const [previewFile, setPreviewFile] = useState<string | null>(null);
const [file, setFile] = useState<File | null>(null);
const params = useParams();
@@ -59,6 +70,14 @@ export default function EditPrestasiDesa() {
imageId: data.imageId,
});
setOriginalData({
name: data.name,
deskripsi: data.deskripsi,
kategoriId: data.kategoriId,
imageId: data.imageId,
imageUrl: data.image?.link || "",
});
if (data.image?.link) setPreviewFile(data.image.link);
}
} catch (error) {
@@ -70,9 +89,22 @@ export default function EditPrestasiDesa() {
loadPrestasi();
}, [params?.id]);
const handleResetForm = () => {
setFormData({
name: originalData.name,
deskripsi: originalData.deskripsi,
kategoriId: originalData.kategoriId,
imageId: originalData.imageId,
});
setPreviewFile(originalData.imageUrl || null);
setFile(null);
toast.info("Form dikembalikan ke data awal");
};
const handleSubmit = async () => {
try {
// Jika ada file baru, upload dulu
setIsSubmitting(true);
let imageId = formData.imageId;
if (file) {
const res = await ApiFetch.api.fileStorage.create.post({ file, name: file.name });
@@ -90,15 +122,17 @@ export default function EditPrestasiDesa() {
} catch (error) {
console.error('Error updating prestasi desa:', error);
toast.error('Terjadi kesalahan saat memperbarui prestasi desa');
} finally {
setIsSubmitting(false);
}
};
return (
<Box px={{ base: 'sm', md: 'lg' }} py="md">
<Group mb="md">
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
<Title order={4} ml="sm" c="dark">Edit Prestasi Desa</Title>
</Group>
@@ -118,12 +152,29 @@ export default function EditPrestasiDesa() {
</Box>
<Select
label="Kategori"
placeholder="Pilih kategori"
value={formData.kategoriId}
onChange={(val) => setFormData({ ...formData, kategoriId: val ?? '' })}
data={prestasiState.kategoriPrestasi.findMany.data?.map((v) => ({ value: v.id, label: v.name })) || []}
required
label="Kategori"
placeholder="Pilih kategori"
data={prestasiState.kategoriPrestasi.findMany.data?.map((item) => ({
label: item.name,
value: item.id,
})) || []}
value={formData.kategoriId || null}
onChange={(val: string | null) => {
if (val) {
const selected = prestasiState.kategoriPrestasi.findMany.data?.find(
(item) => item.id === val
);
if (selected) {
setFormData({ ...formData, kategoriId: selected.id });
}
} else {
setFormData({ ...formData, kategoriId: '' });
}
}}
searchable
clearable
nothingFoundMessage="Tidak ditemukan"
required
/>
<Box>
@@ -138,7 +189,7 @@ export default function EditPrestasiDesa() {
}}
onReject={() => toast.error('File tidak valid, gunakan format gambar')}
maxSize={5 * 1024 ** 2}
accept={{ 'image/*': [] }}
accept={{ 'image/*': ['.jpeg', '.jpg', '.png', '.webp'] }}
radius="md"
p="xl"
>
@@ -148,13 +199,13 @@ export default function EditPrestasiDesa() {
<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="sm" c="dimmed">Maksimal 5MB, format gambar .png, .jpg, .jpeg, webp</Text>
</Stack>
</Group>
</Dropzone>
{previewFile && (
<Box mt="sm" style={{ display: 'flex', justifyContent: 'center' }}>
<Box pos="relative" mt="sm" style={{ display: 'flex', justifyContent: 'center' }}>
<Image
src={previewFile}
alt="Preview Gambar"
@@ -162,11 +213,42 @@ export default function EditPrestasiDesa() {
style={{ maxHeight: 220, objectFit: 'contain', border: `1px solid ${colors['blue-button']}` }}
loading="lazy"
/>
<ActionIcon
variant="filled"
color="red"
radius="xl"
size="sm"
pos="absolute"
top={5}
right={5}
onClick={() => {
setPreviewFile(null);
setFile(null);
}}
style={{
boxShadow: '0 2px 6px rgba(0,0,0,0.15)',
}}
>
<IconX size={14} />
</ActionIcon>
</Box>
)}
</Box>
<Group justify="right" mt="md">
{/* ======= Tombol Aksi ======= */}
<Group justify="right">
{/* Tombol Batal */}
<Button
variant="outline"
color="gray"
radius="md"
size="md"
onClick={handleResetForm}
>
Batal
</Button>
{/* Tombol Simpan */}
<Button
onClick={handleSubmit}
radius="md"
@@ -177,7 +259,7 @@ export default function EditPrestasiDesa() {
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}
>
Simpan
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
</Button>
</Group>
</Stack>

149
src/app/admin/(dashboard)/landing-page/prestasi-desa/list-prestasi-desa/create/page.tsx
View File

@@ -4,7 +4,7 @@ import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
import prestasiState from '@/app/admin/(dashboard)/_state/landing-page/prestasi-desa';
import colors from '@/con/colors';
import ApiFetch from '@/lib/api-fetch';
import { Box, Button, Group, Image, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
import { ActionIcon, Box, Button, Group, Image, Paper, Select, Stack, Text, TextInput, Title, Loader } from '@mantine/core';
import { Dropzone } from '@mantine/dropzone';
import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
@@ -15,18 +15,20 @@ import { useProxy } from 'valtio/utils';
function CreatePrestasiDesa() {
const router = useRouter();
const stateCreate = useProxy(prestasiState.prestasiDesa)
const snapPrestasi = useProxy(prestasiState.prestasiDesa); // snapshot → buat render
const prestasi = prestasiState.prestasiDesa
const [previewFile, setPreviewFile] = useState<string | null>(null);
const [file, setFile] = useState<File | null>(null);
const [isSubmitting, setIsSubmitting] = useState(false);
useEffect(() => {
stateCreate.findMany.load();
prestasi.findMany.load();
prestasiState.kategoriPrestasi.findMany.load();
}, []);
const resetForm = () => {
stateCreate.create.form = {
prestasi.create.form = {
name: "",
deskripsi: "",
kategoriId: "",
@@ -36,34 +38,42 @@ function CreatePrestasiDesa() {
setPreviewFile(null);
};
const handleSubmit = async () => {
if (!file) {
return toast.warn("Pilih file image terlebih dahulu");
try {
setIsSubmitting(true);
if (!file) {
return toast.warn("Pilih file image terlebih dahulu");
}
const res = await ApiFetch.api.fileStorage.create.post({
file,
name: file.name,
})
const uploaded = res.data?.data;
if (!uploaded?.id) {
return toast.error("Gagal mengupload image");
}
prestasi.create.form.imageId = uploaded.id;
await prestasi.create.create();
resetForm();
router.push("/admin/landing-page/prestasi-desa/list-prestasi-desa")
} catch (error) {
console.error(error);
toast.error("Gagal menambahkan prestasi desa");
} finally {
setIsSubmitting(false);
}
const res = await ApiFetch.api.fileStorage.create.post({
file,
name: file.name,
})
const uploaded = res.data?.data;
if (!uploaded?.id) {
return toast.error("Gagal mengupload image");
}
stateCreate.create.form.imageId = uploaded.id;
await stateCreate.create.create();
resetForm();
router.push("/admin/landing-page/prestasi-desa/list-prestasi-desa")
}
return (
<Box px={{ base: 'sm', md: 'lg' }} py="md">
<Group mb="md">
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
<Title order={4} ml="sm" c="dark">
Tambah Prestasi Desa
</Title>
@@ -112,14 +122,14 @@ function CreatePrestasiDesa() {
Seret file gambar ke sini atau klik untuk memilih
</Text>
<Text size="sm" c="dimmed" inline mt={7}>
Unggah file gambar (maks. 5MB)
Maksimal 5MB, format gambar .png, .jpg, .jpeg, webp
</Text>
</div>
</Group>
</Dropzone>
{previewFile && (
<Box mt="md">
<Box mt="md" pos={"relative"}>
<Text size="sm" fw={500} mb={4}>
Pratinjau Gambar:
</Text>
@@ -132,6 +142,24 @@ function CreatePrestasiDesa() {
loading='lazy'
/>
</Box>
<ActionIcon
variant="filled"
color="red"
radius="xl"
size="sm"
pos="absolute"
top={5}
right={5}
onClick={() => {
setPreviewFile(null);
setFile(null);
}}
style={{
boxShadow: '0 2px 6px rgba(0,0,0,0.15)',
}}
>
<IconX size={14} />
</ActionIcon>
</Box>
)}
</Box>
@@ -139,8 +167,8 @@ function CreatePrestasiDesa() {
<TextInput
label="Judul Prestasi"
placeholder="Masukkan judul prestasi"
defaultValue={stateCreate.create.form.name}
onChange={(e) => (stateCreate.create.form.name = e.target.value)}
value={snapPrestasi.create.form.name}
onChange={(e) => (prestasi.create.form.name = e.target.value)}
required
/>
@@ -149,39 +177,62 @@ function CreatePrestasiDesa() {
Deskripsi Prestasi
</Text>
<CreateEditor
value={stateCreate.create.form.deskripsi}
onChange={(val) => (stateCreate.create.form.deskripsi = val)}
value={snapPrestasi.create.form.deskripsi}
onChange={(val) => (prestasi.create.form.deskripsi = val)}
/>
</Box>
<Select
label="Kategori Prestasi"
label="Kategori"
placeholder="Pilih kategori"
value={stateCreate.create.form.kategoriId}
onChange={(val) => (stateCreate.create.form.kategoriId = val ?? '')}
data={
prestasiState.kategoriPrestasi.findMany.data?.map((v) => ({
value: v.id,
label: v.name,
})) || []
}
data={prestasiState.kategoriPrestasi.findMany.data?.map((item) => ({
label: item.name,
value: item.id,
})) || []}
value={snapPrestasi.create.form.kategoriId || null}
onChange={(val: string | null) => {
if (val) {
const selected = prestasiState.kategoriPrestasi.findMany.data?.find(
(item) => item.id === val
);
if (selected) {
prestasi.create.form.kategoriId = selected.id;
}
} else {
prestasi.create.form.kategoriId = '';
}
}}
searchable
clearable
nothingFoundMessage="Tidak ditemukan"
required
/>
<Group justify="space-between" mt="md">
{/* ======= Tombol Aksi ======= */}
<Group justify="right">
{/* Tombol Batal */}
<Button
variant="light"
variant="outline"
color="gray"
onClick={() => router.back()}
radius="md"
size="md"
onClick={resetForm}
>
Batal
Reset
</Button>
{/* Tombol Simpan */}
<Button
onClick={handleSubmit}
bg={colors['blue-button']}
style={{ boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)' }}
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 Prestasi
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
</Button>
</Group>
</Stack>

60
src/app/admin/(dashboard)/landing-page/prestasi-desa/list-prestasi-desa/page.tsx
View File

@@ -1,10 +1,10 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import colors from '@/con/colors';
import { Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
import { useState } from 'react';
import { useProxy } from 'valtio/utils';
import HeaderSearch from '../../../_com/header';
import prestasiState from '../../../_state/landing-page/prestasi-desa';
@@ -37,23 +37,9 @@ function ListPrestasi({ search }: { search: string }) {
load,
} = listState.findMany
// Debug log
console.log('ListPrestasi state:', {
loading,
data: data?.length,
page,
totalPages,
search
});
useEffect(() => {
console.log('Loading data...', { page, search });
load(page, 10, search).then(() => {
console.log('Data loaded:', listState.findMany.data);
}).catch(error => {
console.error('Error loading data:', error);
});
}, [page, search])
useShallowEffect(() => {
load(page, 10, search);
}, [page, search]);
const filteredData = data || []
@@ -70,14 +56,14 @@ function ListPrestasi({ search }: { search: string }) {
<Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
<Group justify="space-between" mb="md">
<Title order={4}>Daftar Prestasi Desa</Title>
<Button
leftSection={<IconPlus size={18} />}
color="blue"
variant="light"
onClick={() => router.push('/admin/landing-page/prestasi-desa/list-prestasi-desa/create')}
>
Tambah Baru
</Button>
<Button
leftSection={<IconPlus size={18} />}
color="blue"
variant="light"
onClick={() => router.push('/admin/landing-page/prestasi-desa/list-prestasi-desa/create')}
>
Tambah Baru
</Button>
</Group>
<Box style={{ overflowX: 'auto' }}>
<Table highlightOnHover>
@@ -107,16 +93,16 @@ function ListPrestasi({ search }: { search: string }) {
</Box>
</TableTd>
<TableTd style={{ width: '25%', textAlign: 'center' }}>
<Button
size="xs"
radius="md"
variant="light"
color="blue"
leftSection={<IconDeviceImacCog size={16} />}
onClick={() => router.push(`/admin/landing-page/prestasi-desa/list-prestasi-desa/${item.id}`)}
>
Detail
</Button>
<Button
size="xs"
radius="md"
variant="light"
color="blue"
leftSection={<IconDeviceImacCog size={16} />}
onClick={() => router.push(`/admin/landing-page/prestasi-desa/list-prestasi-desa/${item.id}`)}
>
Detail
</Button>
</TableTd>
</TableTr>
))