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

API & UI Program Kemiskinan Menu Ekonomi

Browse Source
This commit is contained in:
nico
2025-07-03 12:21:08 +08:00
parent aec2f5094a
commit 10361770b4
4 changed files with 219 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
src/app/admin/(dashboard)/ekonomi/program-kemiskinan/[id]/edit/page.tsx
View File

@@ -1,45 +1,125 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import colors from '@/con/colors';
import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
import { IconArrowBack } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
import programKemiskinanState from '@/app/admin/(dashboard)/_state/ekonomi/program-kemiskinan';
import colors from '@/con/colors';
import {
Box,
Button,
Group,
Paper,
Stack,
Text,
TextInput,
Title,
} from '@mantine/core';
import { IconArrowBack } from '@tabler/icons-react';
import { useRouter, useParams } from 'next/navigation';
import { useEffect } from 'react';
import { useProxy } from 'valtio/utils';
function EditProgramKemiskinan() {
const router = useRouter();
const params = useParams() as { id: string };
const stateProgram = useProxy(programKemiskinanState);
const id = params.id;
useEffect(() => {
if (id) {
stateProgram.findUnique.load(id).then(() => {
const data = stateProgram.findUnique.data;
if (data) {
stateProgram.update.form = {
nama: data.nama || '',
deskripsi: data.deskripsi || '',
ikonUrl: data.ikonUrl || '',
statistik: {
tahun: data.statistik?.tahun?.toString() || '',
jumlah: data.statistik?.jumlah?.toString() || '',
},
};
}
});
}
}, [id]);
const handleSubmit = async () => {
stateProgram.update.id = id;
await stateProgram.update.update();
router.push('/admin/ekonomi/program-kemiskinan');
};
return (
<Box>
<Box mb={10}>
<Button onClick={() => router.back()} variant='subtle' color={'blue'}>
<IconArrowBack color={colors['blue-button']} size={25}/>
<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"}>
<Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p="md">
<Stack gap="xs">
<Title order={4}>Edit Program Kemiskinan</Title>
<TextInput
label={<Text fw={"bold"} fz={"sm"}>Judul Program</Text>}
placeholder='Masukkan judul program'
value={stateProgram.update.form.nama}
onChange={(e) => {
stateProgram.update.form.nama = e.target.value;
}}
label={<Text fw="bold" fz="md">Judul Program</Text>}
placeholder="Masukkan judul program"
/>
<Box>
<Text fw="bold" fz="md">Deskripsi</Text>
<EditEditor
value={stateProgram.update.form.deskripsi}
onChange={(val) => {
stateProgram.update.form.deskripsi = val;
}}
/>
</Box>
<TextInput
label={<Text fw={"bold"} fz={"sm"}>Deskripsi Singkat</Text>}
placeholder='Masukkan deskripsi'
value={stateProgram.update.form.ikonUrl}
onChange={(e) => {
stateProgram.update.form.ikonUrl = e.target.value;
}}
label={<Text fw="bold" fz="md">Ikon URL</Text>}
placeholder="Masukkan ikon url"
/>
<Text fw="bold" fz="md">Statistik Jumlah Masyarakat Miskin</Text>
<TextInput
label={<Text fw={"bold"} fz={"sm"}>Jumlah Masyarakat Miskin</Text>}
placeholder='Masukkan jumlah masyarakat miskin'
type="number"
value={stateProgram.update.form.statistik.jumlah}
onChange={(e) => {
stateProgram.update.form.statistik.jumlah = e.target.value;
}}
label={<Text fw="bold" fz="md">Jumlah Masyarakat Miskin</Text>}
placeholder="Masukkan jumlah masyarakat miskin"
/>
<TextInput
label={<Text fw={"bold"} fz={"sm"}>Deskripsi</Text>}
placeholder='Masukkan deskripsi'
type="number"
value={stateProgram.update.form.statistik.tahun}
onChange={(e) => {
stateProgram.update.form.statistik.tahun = e.target.value;
}}
label={<Text fw="bold" fz="md">Tahun</Text>}
placeholder="Masukkan tahun"
/>
<Group>
<Button bg={colors['blue-button']}>Submit</Button>
<Button bg={colors['blue-button']} onClick={handleSubmit}>
Submit
</Button>
</Group>
</Stack>
</Stack>
</Paper>
</Box>
</Box>
);
}

23
src/app/admin/(dashboard)/ekonomi/program-kemiskinan/[id]/page.tsx
View File

@@ -1,12 +1,10 @@
/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable @typescript-eslint/no-explicit-any */
'use client'
import colors from '@/con/colors';
import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
import { useState } from 'react';
import { useProxy } from 'valtio/utils';
import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
import programKemiskinanState from '../../../_state/ekonomi/program-kemiskinan';
@@ -14,15 +12,12 @@ import programKemiskinanState from '../../../_state/ekonomi/program-kemiskinan';
function DetailProgramKemiskinan() {
const programState = useProxy(programKemiskinanState)
const [lineChart, setLineChart] = useState<any[]>([]);
const [mounted, setMounted] = useState(false);
const [modalHapus, setModalHapus] = useState(false)
const [selectedId, setSelectedId] = useState<string | null>(null)
const router = useRouter();
const params = useParams()
useShallowEffect(() => {
setMounted(true);
programState.findUnique.load(params?.id as string)
}, [])
@@ -35,12 +30,6 @@ function DetailProgramKemiskinan() {
}
}
useEffect(() => {
if (programState.findUnique.data) {
setLineChart([programState.findUnique.data]);
}
}, [programState.findUnique.data])
if (!programState.findUnique.data) {
return (
<Stack py={10}>
@@ -62,24 +51,24 @@ function DetailProgramKemiskinan() {
<Stack gap={"xs"}>
<Box>
<Text fw={"bold"}>Judul Program</Text>
<Text fz={"sm"}>{programState.findUnique.data?.nama}</Text>
<Text fz={"md"}>{programState.findUnique.data?.nama}</Text>
</Box>
<Box>
<Text fw={"bold"}>Deskripsi Singkat</Text>
<Text fz={"sm"} dangerouslySetInnerHTML={{ __html: programState.findUnique.data?.deskripsi }}></Text>
<Text fz={"md"} dangerouslySetInnerHTML={{ __html: programState.findUnique.data?.deskripsi }}></Text>
</Box>
<Box>
<Text fw={"bold"}>Ikon URL</Text>
<Text fz={"sm"}>{programState.findUnique.data?.ikonUrl}</Text>
<Text fz={"md"}>{programState.findUnique.data?.ikonUrl}</Text>
</Box>
<Text fw={"bold"}>Statistik Jumlah Masyarakat Miskin</Text>
<Box>
<Text fw={"bold"}>Jumlah Masyarakat Miskin</Text>
<Text fz={"sm"}>{programState.findUnique.data?.statistik?.jumlah}</Text>
<Text fz={"md"}>{programState.findUnique.data?.statistik?.jumlah}</Text>
</Box>
<Box>
<Text fw={"bold"}>Tahun</Text>
<Text fz={"sm"}>{programState.findUnique.data?.statistik?.tahun}</Text>
<Text fz={"md"}>{programState.findUnique.data?.statistik?.tahun}</Text>
</Box>
<Flex gap={"xs"} mt={10}>
<Button

63
src/app/admin/(dashboard)/ekonomi/program-kemiskinan/page.tsx
View File

@@ -1,6 +1,7 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
'use client'
import colors from '@/con/colors';
import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
import HeaderSearch from '../../_com/header';
import JudulList from '../../_com/judulList';
@@ -8,6 +9,8 @@ import { useRouter } from 'next/navigation';
import { useProxy } from 'valtio/utils';
import programKemiskinanState from '../../_state/ekonomi/program-kemiskinan';
import { useShallowEffect } from '@mantine/hooks';
import { useEffect, useState } from 'react';
import { CartesianGrid, Legend, Line, LineChart, Tooltip, XAxis, YAxis } from 'recharts';
function ProgramKemiskinan() {
return (
@@ -25,11 +28,29 @@ function ProgramKemiskinan() {
function ListProgramKemiskinan() {
const programState = useProxy(programKemiskinanState)
const router = useRouter();
const [lineChart, setLineChart] = useState<any[]>([]);
const [mounted, setMounted] = useState(false);
useShallowEffect(() => {
setMounted(true)
programState.findMany.load()
}, [])
useEffect(() => {
if (programState.findMany.data) {
const chartData = programState.findMany.data
.filter(item => item.statistik)
.map(item => ({
tahun: item.statistik?.tahun,
jumlah: Number(item.statistik?.jumlah)
}))
.sort((a, b) => (a.tahun || 0) - (b.tahun || 0)); // opsional, urutkan tahun
setLineChart(chartData);
}
}, [programState.findMany.data])
if (!programState.findMany.data) {
return (
<Stack py={10}>
@@ -71,6 +92,46 @@ function ListProgramKemiskinan() {
</TableTbody>
</Table>
</Paper>
{/* Chart */}
<Box>
<Paper bg={colors['white-1']} p={'md'} >
<Stack>
<Box >
<Title pb={10} order={3}>Grafik Berdasarkan Responden</Title>
{mounted && lineChart.length > 0 ? (<Box style={{ width: '100%', height: 'auto', }}>
<Box w={"100%"} style={{overflowX: 'auto'}}>
<LineChart
width={650}
height={300}
data={lineChart}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="tahun" />
<YAxis />
<Tooltip
formatter={(value: any, name: string) => [`${value} orang`, name]}
labelFormatter={(label: any) => `Tahun: ${label}`}
/>
<Legend />
<Line
type="monotone"
dataKey="jumlah"
name="Jumlah per Tahun"
stroke={colors['blue-button']}
/>
</LineChart>
</Box>
</Box>
) : (
<Text c='dimmed'>Belum ada data untuk ditampilkan dalam grafik</Text>
)}
</Box>
</Stack>
</Paper>
</Box>
</Box>
);
}

76
src/app/api/[[...slugs]]/_lib/ekonomi/program-kemiskinan/updt.ts
View File

@@ -15,29 +15,57 @@ export default async function programKemiskinanUpdate(context: Context) {
const id = context.params.id as string;
const body = context.body as FormUpdate;
const program = await prisma.programKemiskinan.update({
where: { id },
data: {
nama: body.nama,
deskripsi: body.deskripsi,
ikonUrl: body.ikonUrl,
statistik: body.statistik
? {
create: {
tahun: Number(body.statistik.tahun),
jumlah: Number(body.statistik.jumlah),
},
}
: undefined,
},
include: {
statistik: true,
},
});
try {
// cari ID statistik yang terkait
const existing = await prisma.programKemiskinan.findUnique({
where: { id },
include: { statistik: true },
});
return {
success: true,
message: "Success update program kemiskinan",
data: program,
};
if (!existing) {
return new Response(JSON.stringify({ success: false, message: "Program tidak ditemukan" }), { status: 404 });
}
// update statistik (bisa update atau create kalau belum ada)
let statistikUpdate;
if (existing.statistikId) {
statistikUpdate = await prisma.statistikKemiskinan.update({
where: { id: existing.statistikId },
data: {
tahun: Number(body.statistik?.tahun),
jumlah: Number(body.statistik?.jumlah),
},
});
} else {
statistikUpdate = await prisma.statistikKemiskinan.create({
data: {
tahun: Number(body.statistik?.tahun),
jumlah: Number(body.statistik?.jumlah),
},
});
}
const program = await prisma.programKemiskinan.update({
where: { id },
data: {
nama: body.nama,
deskripsi: body.deskripsi,
ikonUrl: body.ikonUrl,
statistik: {
connect: { id: statistikUpdate.id }, // konek ke statistik baru atau yang diperbarui
},
},
include: { statistik: true },
});
return new Response(JSON.stringify({ success: true, data: program }), {
status: 200,
});
} catch (err) {
console.error("Gagal update:", err);
return new Response(JSON.stringify({ success: false, message: "Gagal update program" }), {
status: 500,
});
}
}