UI & API Menu Ekonomi, Submenu Jumlah Penduduk usia yang menganggur
This commit is contained in:
@@ -5,31 +5,48 @@ import { IconCircleDashedPlus, IconSearch } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import React from 'react';
|
||||
|
||||
const JudulListTab = ({ title = "", href = "#", placeholder = "pencarian", searchIcon = <IconSearch size={20} /> }) => {
|
||||
type JudulListTabProps = {
|
||||
title: string;
|
||||
href: string;
|
||||
placeholder: string;
|
||||
searchIcon: React.ReactNode;
|
||||
value?: string;
|
||||
onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
||||
}
|
||||
|
||||
|
||||
const JudulListTab = ({
|
||||
title = "",
|
||||
href = "#",
|
||||
placeholder = "pencarian",
|
||||
searchIcon = <IconSearch size={20} />,
|
||||
value,
|
||||
onChange
|
||||
}: JudulListTabProps) => {
|
||||
const router = useRouter();
|
||||
|
||||
const handleNavigate = () => {
|
||||
router.push(href);
|
||||
};
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<Grid mb={10}>
|
||||
<GridCol span={{ base: 12, md: 8 }}>
|
||||
<Text fz={{base: "md", md: "xl"}} fw={"bold"}>{title}</Text>
|
||||
<Text fz={{ base: "md", md: "xl" }} fw={"bold"}>{title}</Text>
|
||||
</GridCol>
|
||||
<GridCol span={{ base: 9, md: 3}} ta="right">
|
||||
<GridCol span={{ base: 9, md: 3 }} ta="right">
|
||||
<Paper radius={"lg"} bg={colors['white-1']}>
|
||||
<TextInput
|
||||
radius="lg"
|
||||
placeholder={placeholder}
|
||||
leftSection={searchIcon}
|
||||
w="100%"
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
/>
|
||||
</Paper>
|
||||
</GridCol>
|
||||
<GridCol span={{ base: 3, md: 1}} ta="right">
|
||||
<GridCol span={{ base: 3, md: 1 }} ta="right">
|
||||
<Button onClick={handleNavigate} bg={colors['blue-button']}>
|
||||
<IconCircleDashedPlus size={25} />
|
||||
</Button>
|
||||
|
||||
376
src/app/admin/(dashboard)/_state/ekonomi/usia-kerja-nganggur.ts
Normal file
376
src/app/admin/(dashboard)/_state/ekonomi/usia-kerja-nganggur.ts
Normal file
@@ -0,0 +1,376 @@
|
||||
import ApiFetch from "@/lib/api-fetch";
|
||||
import { Prisma } from "@prisma/client";
|
||||
import { toast } from "react-toastify";
|
||||
import { proxy } from "valtio";
|
||||
import { z } from "zod";
|
||||
|
||||
const templateGrafikUsiaKerjaYangMenganggur = z.object({
|
||||
usia18_25: z.string().min(1, "Data usia 18-25 harus diisi"),
|
||||
usia26_35: z.string().min(1, "Data usia 26-35 harus diisi"),
|
||||
usia36_45: z.string().min(1, "Data usia 36-45 harus diisi"),
|
||||
usia46_keatas: z.string().min(1, "Data usia 46 keatas harus diisi"),
|
||||
});
|
||||
|
||||
type GrafikUsiaKerjaYangMenganggur = Prisma.GrafikMenganggurBerdasarkanUsiaGetPayload<{
|
||||
select: {
|
||||
id: true;
|
||||
usia18_25: true;
|
||||
usia26_35: true;
|
||||
usia36_45: true;
|
||||
usia46_keatas: true;
|
||||
};
|
||||
}>;
|
||||
|
||||
const defaultForm: Omit<GrafikUsiaKerjaYangMenganggur, 'id'> & { id?: string } = {
|
||||
usia18_25: "",
|
||||
usia26_35: "",
|
||||
usia36_45: "",
|
||||
usia46_keatas: "",
|
||||
};
|
||||
|
||||
const grafikBerdasarkanUsiaKerjaNganggur = proxy({
|
||||
create: {
|
||||
form: defaultForm,
|
||||
loading: false,
|
||||
async create() {
|
||||
const cek = templateGrafikUsiaKerjaYangMenganggur.safeParse(
|
||||
grafikBerdasarkanUsiaKerjaNganggur.create.form
|
||||
);
|
||||
if (!cek.success) {
|
||||
const err = `[${cek.error.issues
|
||||
.map((v) => `${v.path.join(".")}`)
|
||||
.join("\n")}] required`;
|
||||
return toast.error(err);
|
||||
}
|
||||
try {
|
||||
grafikBerdasarkanUsiaKerjaNganggur.create.loading = true;
|
||||
const res = await ApiFetch.api.ekonomi.grafikusiakerjayangmenganggur[
|
||||
"create"
|
||||
].post(grafikBerdasarkanUsiaKerjaNganggur.create.form);
|
||||
if (res.status === 200) {
|
||||
const id = res.data?.data?.id;
|
||||
if (id) {
|
||||
toast.success("Success create");
|
||||
grafikBerdasarkanUsiaKerjaNganggur.create.form = {
|
||||
usia18_25: "",
|
||||
usia26_35: "",
|
||||
usia36_45: "",
|
||||
usia46_keatas: "",
|
||||
};
|
||||
grafikBerdasarkanUsiaKerjaNganggur.findMany.load();
|
||||
return id;
|
||||
}
|
||||
}
|
||||
return toast.error("failed create");
|
||||
} catch (error) {
|
||||
console.log((error as Error).message);
|
||||
} finally {
|
||||
grafikBerdasarkanUsiaKerjaNganggur.create.loading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
findMany: {
|
||||
data: null as
|
||||
| Prisma.GrafikMenganggurBerdasarkanUsiaGetPayload<{
|
||||
omit: { isActive: true };
|
||||
}>[]
|
||||
| null,
|
||||
loading: false,
|
||||
async load() {
|
||||
const res = await ApiFetch.api.ekonomi.grafikusiakerjayangmenganggur[
|
||||
"find-many"
|
||||
].get();
|
||||
if (res.status === 200) {
|
||||
grafikBerdasarkanUsiaKerjaNganggur.findMany.data = res.data?.data ?? [];
|
||||
}
|
||||
},
|
||||
},
|
||||
findUnique: {
|
||||
data: null as Prisma.GrafikMenganggurBerdasarkanUsiaGetPayload<{
|
||||
omit: { isActive: true };
|
||||
}> | null,
|
||||
async load(id: string) {
|
||||
try {
|
||||
const res = await fetch(
|
||||
`/api/ekonomi/grafikusiakerjayangmenganggur/${id}`
|
||||
);
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
grafikBerdasarkanUsiaKerjaNganggur.findUnique.data = data.data ?? null;
|
||||
} else {
|
||||
console.error("Failed to fetch data", res.status, res.statusText);
|
||||
grafikBerdasarkanUsiaKerjaNganggur.findUnique.data = null;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error loading grafik berdasarkan usia kerja yang menganggur:", error);
|
||||
grafikBerdasarkanUsiaKerjaNganggur.findUnique.data = null;
|
||||
}
|
||||
},
|
||||
},
|
||||
update: {
|
||||
id: "",
|
||||
form: {...defaultForm},
|
||||
loading: false,
|
||||
async byId() {
|
||||
// Method implementation if needed
|
||||
},
|
||||
async submit() {
|
||||
const id = this.id;
|
||||
if (!id) {
|
||||
toast.warn("ID tidak valid");
|
||||
return null;
|
||||
}
|
||||
const cek = templateGrafikUsiaKerjaYangMenganggur.safeParse(this.form);
|
||||
if (!cek.success) {
|
||||
const err = `[${cek.error.issues.map((v) => `${v.path.join(".")}`).join("\n")}] required`;
|
||||
toast.error(err);
|
||||
return null;
|
||||
}
|
||||
this.loading = true;
|
||||
try {
|
||||
const response = await fetch(
|
||||
`/api/ekonomi/grafikusiakerjayangmenganggur/${id}`, {
|
||||
method: "PUT",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(this.form),
|
||||
});
|
||||
const result = await response.json();
|
||||
if (!response.ok || !result?.success) {
|
||||
throw new Error(result?.message || "Gagal update data");
|
||||
}
|
||||
toast.success("Berhasil update data!");
|
||||
await grafikBerdasarkanUsiaKerjaNganggur.findMany.load();
|
||||
return result.data;
|
||||
} catch (error) {
|
||||
console.error("Error update data:", error);
|
||||
toast.error("Gagal update data grafik berdasarkan usia kerja yang menganggur");
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
delete: {
|
||||
loading: false,
|
||||
async byId(id: string) {
|
||||
if (!id) return toast.warn("ID tidak valid");
|
||||
|
||||
try {
|
||||
grafikBerdasarkanUsiaKerjaNganggur.delete.loading = true;
|
||||
|
||||
const response = await fetch(`/api/ekonomi/grafikusiakerjayangmenganggur/del/${id}`, {
|
||||
method: "DELETE",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (response.ok && result?.success) {
|
||||
toast.success(result.message || "Grafik berdasarkan usia kerja yang menganggur berhasil dihapus");
|
||||
await grafikBerdasarkanUsiaKerjaNganggur.findMany.load(); // refresh list
|
||||
} else {
|
||||
toast.error(result?.message || "Gagal menghapus grafik berdasarkan usia kerja yang menganggur");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Gagal delete:", error);
|
||||
toast.error("Terjadi kesalahan saat menghapus grafik berdasarkan usia kerja yang menganggur");
|
||||
} finally {
|
||||
grafikBerdasarkanUsiaKerjaNganggur.delete.loading = false;
|
||||
}
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
const templateGrafikBerpendidikanYangMenganggur = z.object({
|
||||
SD: z.string().min(1, "Data SD harus diisi"),
|
||||
SMP: z.string().min(1, "Data SMP harus diisi"),
|
||||
SMA: z.string().min(1, "Data SMA harus diisi"),
|
||||
D3: z.string().min(1, "Data D3 harus diisi"),
|
||||
S1: z.string().min(1, "Data S1 harus diisi"),
|
||||
});
|
||||
|
||||
type GrafikBerpendidikanYangMenganggur = Prisma.GrafikMenganggurBerdasarkanPendidikanGetPayload<{
|
||||
select: {
|
||||
id: true;
|
||||
SD: true;
|
||||
SMP: true;
|
||||
SMA: true;
|
||||
D3: true;
|
||||
S1: true;
|
||||
};
|
||||
}>;
|
||||
|
||||
const defaultFormBerpendidikan: Omit<GrafikBerpendidikanYangMenganggur, 'id'> & { id?: string } = {
|
||||
SD: "",
|
||||
SMP: "",
|
||||
SMA: "",
|
||||
D3: "",
|
||||
S1: "",
|
||||
};
|
||||
|
||||
const grafikBerdasarkanPendidikan = proxy({
|
||||
create: {
|
||||
form: defaultFormBerpendidikan,
|
||||
loading: false,
|
||||
async create() {
|
||||
const cek = templateGrafikBerpendidikanYangMenganggur.safeParse(
|
||||
grafikBerdasarkanPendidikan.create.form
|
||||
);
|
||||
if (!cek.success) {
|
||||
const err = `[${cek.error.issues
|
||||
.map((v) => `${v.path.join(".")}`)
|
||||
.join("\n")}] required`;
|
||||
return toast.error(err);
|
||||
}
|
||||
try {
|
||||
grafikBerdasarkanPendidikan.create.loading = true;
|
||||
const res = await ApiFetch.api.ekonomi.grafikmenganggurberdasarkanpendidikan[
|
||||
"create"
|
||||
].post(grafikBerdasarkanPendidikan.create.form);
|
||||
if (res.status === 200) {
|
||||
const id = res.data?.data?.id;
|
||||
if (id) {
|
||||
toast.success("Success create");
|
||||
grafikBerdasarkanPendidikan.create.form = {
|
||||
SD: "",
|
||||
SMP: "",
|
||||
SMA: "",
|
||||
D3: "",
|
||||
S1: "",
|
||||
};
|
||||
grafikBerdasarkanPendidikan.findMany.load();
|
||||
return id;
|
||||
}
|
||||
}
|
||||
return toast.error("failed create");
|
||||
} catch (error) {
|
||||
console.log((error as Error).message);
|
||||
} finally {
|
||||
grafikBerdasarkanPendidikan.create.loading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
findMany: {
|
||||
data: null as
|
||||
| Prisma.GrafikMenganggurBerdasarkanPendidikanGetPayload<{
|
||||
omit: { isActive: true };
|
||||
}>[]
|
||||
| null,
|
||||
loading: false,
|
||||
async load() {
|
||||
const res = await ApiFetch.api.ekonomi.grafikmenganggurberdasarkanpendidikan[
|
||||
"find-many"
|
||||
].get();
|
||||
if (res.status === 200) {
|
||||
grafikBerdasarkanPendidikan.findMany.data = res.data?.data ?? [];
|
||||
}
|
||||
},
|
||||
},
|
||||
findUnique: {
|
||||
data: null as Prisma.GrafikMenganggurBerdasarkanPendidikanGetPayload<{
|
||||
omit: { isActive: true };
|
||||
}> | null,
|
||||
async load(id: string) {
|
||||
try {
|
||||
const res = await fetch(
|
||||
`/api/ekonomi/grafikmenganggurberdasarkanpendidikan/${id}`
|
||||
);
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
grafikBerdasarkanPendidikan.findUnique.data = data.data ?? null;
|
||||
} else {
|
||||
console.error("Failed to fetch data", res.status, res.statusText);
|
||||
grafikBerdasarkanPendidikan.findUnique.data = null;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error loading grafik berdasarkan usia kerja yang menganggur:", error);
|
||||
grafikBerdasarkanPendidikan.findUnique.data = null;
|
||||
}
|
||||
},
|
||||
},
|
||||
update: {
|
||||
id: "",
|
||||
form: {...defaultFormBerpendidikan},
|
||||
loading: false,
|
||||
async byId() {
|
||||
// Method implementation if needed
|
||||
},
|
||||
async submit() {
|
||||
const id = this.id;
|
||||
if (!id) {
|
||||
toast.warn("ID tidak valid");
|
||||
return null;
|
||||
}
|
||||
const cek = templateGrafikBerpendidikanYangMenganggur.safeParse(this.form);
|
||||
if (!cek.success) {
|
||||
const err = `[${cek.error.issues.map((v) => `${v.path.join(".")}`).join("\n")}] required`;
|
||||
toast.error(err);
|
||||
return null;
|
||||
}
|
||||
this.loading = true;
|
||||
try {
|
||||
const response = await fetch(
|
||||
`/api/ekonomi/grafikmenganggurberdasarkanpendidikan/${id}`, {
|
||||
method: "PUT",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(this.form),
|
||||
});
|
||||
const result = await response.json();
|
||||
if (!response.ok || !result?.success) {
|
||||
throw new Error(result?.message || "Gagal update data");
|
||||
}
|
||||
toast.success("Berhasil update data!");
|
||||
await grafikBerdasarkanPendidikan.findMany.load();
|
||||
return result.data;
|
||||
} catch (error) {
|
||||
console.error("Error update data:", error);
|
||||
toast.error("Gagal update data grafik berdasarkan pendidikan yang menganggur");
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
delete: {
|
||||
loading: false,
|
||||
async byId(id: string) {
|
||||
if (!id) return toast.warn("ID tidak valid");
|
||||
|
||||
try {
|
||||
grafikBerdasarkanPendidikan.delete.loading = true;
|
||||
|
||||
const response = await fetch(`/api/ekonomi/grafikmenganggurberdasarkanpendidikan/del/${id}`, {
|
||||
method: "DELETE",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (response.ok && result?.success) {
|
||||
toast.success(result.message || "Grafik berdasarkan pendidikan yang menganggur berhasil dihapus");
|
||||
await grafikBerdasarkanPendidikan.findMany.load(); // refresh list
|
||||
} else {
|
||||
toast.error(result?.message || "Gagal menghapus grafik berdasarkan pendidikan yang menganggur");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Gagal delete:", error);
|
||||
toast.error("Terjadi kesalahan saat menghapus grafik berdasarkan pendidikan yang menganggur");
|
||||
} finally {
|
||||
grafikBerdasarkanPendidikan.delete.loading = false;
|
||||
}
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
const grafikNganggur = proxy({
|
||||
grafikBerdasarkanUsiaKerjaNganggur,
|
||||
grafikBerdasarkanPendidikan
|
||||
})
|
||||
|
||||
export default grafikNganggur;
|
||||
@@ -0,0 +1,62 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
|
||||
import { usePathname, useRouter } from 'next/navigation';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
|
||||
function LayoutTabs({ children }: { children: React.ReactNode }) {
|
||||
const router = useRouter()
|
||||
const pathname = usePathname()
|
||||
const tabs = [
|
||||
{
|
||||
label: "Pengangguran Berdasarkan Usia",
|
||||
value: "pengangguranberdasarkanusia",
|
||||
href: "/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia"
|
||||
},
|
||||
{
|
||||
label: "Pengangguran Berdasarkan Pendidikan",
|
||||
value: "pengangguranberdasarkanpendidikan",
|
||||
href: "/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan"
|
||||
},
|
||||
];
|
||||
const curentTab = tabs.find(tab => tab.href === pathname)
|
||||
const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
|
||||
|
||||
const handleTabChange = (value: string | null) => {
|
||||
const tab = tabs.find(t => t.value === value)
|
||||
if (tab) {
|
||||
router.push(tab.href)
|
||||
}
|
||||
setActiveTab(value)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const match = tabs.find(tab => tab.href === pathname)
|
||||
if (match) {
|
||||
setActiveTab(match.value)
|
||||
}
|
||||
}, [pathname])
|
||||
|
||||
return (
|
||||
<Stack>
|
||||
<Title order={3}>Jumlah Penduduk Usia Kerja yang Menganggur</Title>
|
||||
<Tabs color={colors['blue-button']} variant='pills' value={activeTab} onChange={handleTabChange}>
|
||||
<TabsList p={"xs"} bg={"#BBC8E7FF"}>
|
||||
{tabs.map((e, i) => (
|
||||
<TabsTab key={i} value={e.value}>{e.label}</TabsTab>
|
||||
))}
|
||||
</TabsList>
|
||||
{tabs.map((e, i) => (
|
||||
<TabsPanel key={i} value={e.value}>
|
||||
{/* Konten dummy, bisa diganti tergantung routing */}
|
||||
<></>
|
||||
</TabsPanel>
|
||||
))}
|
||||
</Tabs>
|
||||
{children}
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
export default LayoutTabs;
|
||||
@@ -0,0 +1,9 @@
|
||||
import LayoutTabs from "./_lib/layoutTabs";
|
||||
|
||||
export default function Layout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<LayoutTabs>
|
||||
{children}
|
||||
</LayoutTabs>
|
||||
);
|
||||
}
|
||||
@@ -1,31 +0,0 @@
|
||||
import colors from "@/con/colors";
|
||||
import { Box, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from "@mantine/core";
|
||||
import PengangguranBerdasarkanUsia from "./pengangguran_berdasarkan_usia/page";
|
||||
import PengangguranBerdasarkanPendidikan from "./pengangguran_berdasarkan_pendidikan/page";
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<Box>
|
||||
<Stack gap={"xs"}>
|
||||
<Title order={3}>Jumlah Penduduk Usia Kerja yang Menganggur</Title>
|
||||
<Tabs color={colors['blue-button']} variant='pills' defaultValue={"Pengangguran Berdasarkan Usia"}>
|
||||
<TabsList p={"xs"} bg={"#BBC8E7FF"}>
|
||||
<TabsTab value={"Pengangguran Berdasarkan Usia"}>
|
||||
Pengangguran Berdasarkan Usia
|
||||
</TabsTab>
|
||||
<TabsTab value={"Pengangguran Berdasarkan Pendidikan"}>
|
||||
Pengangguran Berdasarkan Pendidikan
|
||||
</TabsTab>
|
||||
</TabsList>
|
||||
|
||||
<TabsPanel value={"Pengangguran Berdasarkan Usia"}>
|
||||
<PengangguranBerdasarkanUsia />
|
||||
</TabsPanel>
|
||||
<TabsPanel value={"Pengangguran Berdasarkan Pendidikan"}>
|
||||
<PengangguranBerdasarkanPendidikan/>
|
||||
</TabsPanel>
|
||||
</Tabs>
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,109 @@
|
||||
'use client'
|
||||
import grafikNganggur from '@/app/admin/(dashboard)/_state/ekonomi/usia-kerja-nganggur';
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Paper, Stack, TextInput, Title } from '@mantine/core';
|
||||
import { IconArrowBack } from '@tabler/icons-react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { useEffect } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
|
||||
function EditGrafikBerdasarkanPendidikan() {
|
||||
const router = useRouter()
|
||||
const params = useParams() as { id: string }
|
||||
const stategrafik = useProxy(grafikNganggur.grafikBerdasarkanPendidikan)
|
||||
const id = params.id
|
||||
|
||||
useEffect(() => {
|
||||
if(id){
|
||||
stategrafik.findUnique.load(id).then(() => {
|
||||
const data = stategrafik.findUnique.data
|
||||
if(data){
|
||||
stategrafik.update.form = {
|
||||
SD: data.SD || '',
|
||||
SMP: data.SMP || '',
|
||||
SMA: data.SMA || '',
|
||||
D3: data.D3 || '',
|
||||
S1: data.S1 || '',
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}, [id])
|
||||
|
||||
const handleSubmit = async () => {
|
||||
stategrafik.update.id = id;
|
||||
await stategrafik.update.submit();
|
||||
router.push('/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan')
|
||||
}
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Box mb={10}>
|
||||
<Button variant="subtle" onClick={() => router.back()}>
|
||||
<IconArrowBack size={20} />
|
||||
</Button>
|
||||
</Box>
|
||||
<Paper bg={colors['white-1']} w={{ base: '100%', md: '50%' }} p={'md'}>
|
||||
<Stack>
|
||||
<Title order={3}>Edit Grafik Pengangguran Berdasarkan Pendidikan</Title>
|
||||
<TextInput
|
||||
label="SD"
|
||||
type='number'
|
||||
placeholder="masukkan jumlah"
|
||||
value={stategrafik.update.form.SD}
|
||||
onChange={(val) => {
|
||||
stategrafik.update.form.SD = val.currentTarget.value;
|
||||
}}
|
||||
/>
|
||||
<TextInput
|
||||
label="SMP"
|
||||
type="number"
|
||||
placeholder="masukkan jumlah"
|
||||
value={stategrafik.update.form.SMP}
|
||||
onChange={(val) => {
|
||||
stategrafik.update.form.SMP = val.currentTarget.value;
|
||||
}}
|
||||
/>
|
||||
<TextInput
|
||||
label="SMA"
|
||||
type="number"
|
||||
placeholder="masukkan jumlah"
|
||||
value={stategrafik.update.form.SMA}
|
||||
onChange={(val) => {
|
||||
stategrafik.update.form.SMA = val.currentTarget.value;
|
||||
}}
|
||||
/>
|
||||
<TextInput
|
||||
label="D3"
|
||||
type="number"
|
||||
placeholder="masukkan jumlah"
|
||||
value={stategrafik.update.form.D3}
|
||||
onChange={(val) => {
|
||||
stategrafik.update.form.D3 = val.currentTarget.value;
|
||||
}}
|
||||
/>
|
||||
<TextInput
|
||||
label="S1"
|
||||
type="number"
|
||||
placeholder="masukkan jumlah"
|
||||
value={stategrafik.update.form.S1}
|
||||
onChange={(val) => {
|
||||
stategrafik.update.form.S1 = val.currentTarget.value;
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
mt={10}
|
||||
bg={colors['blue-button']}
|
||||
onClick={handleSubmit}
|
||||
>
|
||||
Submit
|
||||
</Button>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default EditGrafikBerdasarkanPendidikan;
|
||||
@@ -1,54 +1,111 @@
|
||||
'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';
|
||||
/* eslint-disable @typescript-eslint/no-unused-vars */
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
import React from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import grafikBerdasarkanJenisKelamin from '@/app/admin/(dashboard)/_state/ppid/indeks_kepuasan_masyarakat/grafikBerdasarkanJenisKelamin';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import { useState } from 'react';
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Paper, Stack, Title, TextInput } from '@mantine/core';
|
||||
import { IconArrowBack } from '@tabler/icons-react';
|
||||
import grafikNganggur from '@/app/admin/(dashboard)/_state/ekonomi/usia-kerja-nganggur';
|
||||
|
||||
|
||||
function CreatePengangguranBerdasarkanPendidikan() {
|
||||
function CreateGrafikBerdasarkanPendidikan() {
|
||||
const router = useRouter();
|
||||
const stategrafik = useProxy(grafikNganggur.grafikBerdasarkanPendidikan)
|
||||
const [donutData, setDonutData] = useState<any[]>([]);
|
||||
|
||||
const resetForm = () => {
|
||||
stategrafik.create.form = {
|
||||
...stategrafik.create.form,
|
||||
SD: "",
|
||||
SMP: "",
|
||||
SMA: "",
|
||||
D3: "",
|
||||
S1: "",
|
||||
}
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const id = await stategrafik.create.create();
|
||||
if (id) {
|
||||
const idStr = String(id);
|
||||
await stategrafik.findUnique.load(idStr);
|
||||
if (stategrafik.findUnique.data) {
|
||||
setDonutData([stategrafik.findUnique.data]);
|
||||
}
|
||||
}
|
||||
resetForm();
|
||||
router.push("/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan")
|
||||
}
|
||||
return (
|
||||
<Box>
|
||||
<Box mb={10}>
|
||||
<Button onClick={() => router.back()} variant='subtle' color={'blue'}>
|
||||
<IconArrowBack color={colors['blue-button']} size={25}/>
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
|
||||
<Stack gap={"xs"}>
|
||||
<Title order={4}>Create Pengangguran Berdasarkan Pendidikan</Title>
|
||||
<TextInput
|
||||
label={<Text fw={"bold"} fz={"sm"}>Pendidikan SD</Text>}
|
||||
placeholder='Masukkan pendidikan sd'
|
||||
/>
|
||||
<TextInput
|
||||
label={<Text fw={"bold"} fz={"sm"}>Pendidikan SMP</Text>}
|
||||
placeholder='Masukkan pendidikan smp'
|
||||
/>
|
||||
<TextInput
|
||||
label={<Text fw={"bold"} fz={"sm"}>Pendidikan SMA</Text>}
|
||||
placeholder='Masukkan pendidikan sma'
|
||||
/>
|
||||
<TextInput
|
||||
label={<Text fw={"bold"} fz={"sm"}>Pendidikan S1</Text>}
|
||||
placeholder='Masukkan pendidikan s1'
|
||||
/>
|
||||
<TextInput
|
||||
label={<Text fw={"bold"} fz={"sm"}>Pendidikan S2</Text>}
|
||||
placeholder='Masukkan pendidikan s2'
|
||||
/>
|
||||
<TextInput
|
||||
label={<Text fw={"bold"} fz={"sm"}>Pendidikan S3</Text>}
|
||||
placeholder='Masukkan pendidikan s3'
|
||||
/>
|
||||
<Group>
|
||||
<Button bg={colors['blue-button']}>Submit</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
<Box mb={10}>
|
||||
<Button variant="subtle" onClick={() => router.back()}>
|
||||
<IconArrowBack size={20} />
|
||||
</Button>
|
||||
</Box>
|
||||
<Paper bg={colors['white-1']} w={{ base: '100%', md: '50%' }} p={'md'}>
|
||||
<Stack>
|
||||
<Title order={3}>Create Grafik Pengangguran Berdasarkan Pendidikan</Title>
|
||||
<TextInput
|
||||
label="SD"
|
||||
type='number'
|
||||
placeholder="masukkan jumlah"
|
||||
value={stategrafik.create.form.SD}
|
||||
onChange={(val) => {
|
||||
stategrafik.create.form.SD = val.currentTarget.value;
|
||||
}}
|
||||
/>
|
||||
<TextInput
|
||||
label="SMP"
|
||||
type="number"
|
||||
placeholder="masukkan jumlah"
|
||||
value={stategrafik.create.form.SMP}
|
||||
onChange={(val) => {
|
||||
stategrafik.create.form.SMP = val.currentTarget.value;
|
||||
}}
|
||||
/>
|
||||
<TextInput
|
||||
label="SMA"
|
||||
type="number"
|
||||
placeholder="masukkan jumlah"
|
||||
value={stategrafik.create.form.SMA}
|
||||
onChange={(val) => {
|
||||
stategrafik.create.form.SMA = val.currentTarget.value;
|
||||
}}
|
||||
/>
|
||||
<TextInput
|
||||
label="D3"
|
||||
type="number"
|
||||
placeholder="masukkan jumlah"
|
||||
value={stategrafik.create.form.D3}
|
||||
onChange={(val) => {
|
||||
stategrafik.create.form.D3 = val.currentTarget.value;
|
||||
}}
|
||||
/>
|
||||
<TextInput
|
||||
label="S1"
|
||||
type="number"
|
||||
placeholder="masukkan jumlah"
|
||||
value={stategrafik.create.form.S1}
|
||||
onChange={(val) => {
|
||||
stategrafik.create.form.S1 = val.currentTarget.value;
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
mt={10}
|
||||
bg={colors['blue-button']}
|
||||
onClick={handleSubmit}
|
||||
>
|
||||
Submit
|
||||
</Button>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default CreatePengangguranBerdasarkanPendidikan;
|
||||
export default CreateGrafikBerdasarkanPendidikan;
|
||||
|
||||
@@ -1,74 +0,0 @@
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Flex, Paper, Stack, Text } from '@mantine/core';
|
||||
import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
|
||||
|
||||
function DetailPengangguranBerdasarkanPendidikan() {
|
||||
const router = useRouter();
|
||||
return (
|
||||
<Box>
|
||||
<Box mb={10}>
|
||||
<Button variant="subtle" onClick={() => router.back()}>
|
||||
<IconArrowBack color={colors['blue-button']} size={25} />
|
||||
</Button>
|
||||
</Box>
|
||||
<Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
|
||||
<Stack>
|
||||
<Text fz={"xl"} fw={"bold"}>Detail Pengangguran Berdasarkan Pendidikan</Text>
|
||||
|
||||
<Paper bg={colors['BG-trans']} p={'md'}>
|
||||
<Stack gap={"xs"}>
|
||||
<Box>
|
||||
<Text fw={"bold"}>Pendidikan SD</Text>
|
||||
<Text>50</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fw={"bold"}>Pendidikan SMP</Text>
|
||||
<Text>60</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fw={"bold"}>Pendidikan SMA</Text>
|
||||
<Text>80</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fw={"bold"}>Pendidikan S1</Text>
|
||||
<Text>40</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fw={"bold"}>Pendidikan S2</Text>
|
||||
<Text>20</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fw={"bold"}>Pendidikan S3</Text>
|
||||
<Text>10</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Flex gap={"xs"}>
|
||||
<Button color="red">
|
||||
<IconX size={20} />
|
||||
</Button>
|
||||
<Button onClick={() => router.push('/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/edit')} color="green">
|
||||
<IconEdit size={20} />
|
||||
</Button>
|
||||
</Flex>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
{/* Modal Hapus
|
||||
<ModalKonfirmasiHapus
|
||||
opened={modalHapus}
|
||||
onClose={() => setModalHapus(false)}
|
||||
onConfirm={handleHapus}
|
||||
text="Apakah anda yakin ingin menghapus potensi ini?"
|
||||
/> */}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default DetailPengangguranBerdasarkanPendidikan;
|
||||
|
||||
@@ -1,54 +0,0 @@
|
||||
'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';
|
||||
|
||||
|
||||
function EditPengangguranBerdasarkanPendidikan() {
|
||||
const router = useRouter();
|
||||
return (
|
||||
<Box>
|
||||
<Box mb={10}>
|
||||
<Button onClick={() => router.back()} variant='subtle' color={'blue'}>
|
||||
<IconArrowBack color={colors['blue-button']} size={25}/>
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
|
||||
<Stack gap={"xs"}>
|
||||
<Title order={4}>Edit Pengangguran Berdasarkan Pendidikan</Title>
|
||||
<TextInput
|
||||
label={<Text fw={"bold"} fz={"sm"}>Pendidikan SD</Text>}
|
||||
placeholder='Masukkan pendidikan sd'
|
||||
/>
|
||||
<TextInput
|
||||
label={<Text fw={"bold"} fz={"sm"}>Pendidikan SMP</Text>}
|
||||
placeholder='Masukkan pendidikan smp'
|
||||
/>
|
||||
<TextInput
|
||||
label={<Text fw={"bold"} fz={"sm"}>Pendidikan SMA</Text>}
|
||||
placeholder='Masukkan pendidikan sma'
|
||||
/>
|
||||
<TextInput
|
||||
label={<Text fw={"bold"} fz={"sm"}>Pendidikan S1</Text>}
|
||||
placeholder='Masukkan pendidikan s1'
|
||||
/>
|
||||
<TextInput
|
||||
label={<Text fw={"bold"} fz={"sm"}>Pendidikan S2</Text>}
|
||||
placeholder='Masukkan pendidikan s2'
|
||||
/>
|
||||
<TextInput
|
||||
label={<Text fw={"bold"} fz={"sm"}>Pendidikan S3</Text>}
|
||||
placeholder='Masukkan pendidikan s3'
|
||||
/>
|
||||
<Group>
|
||||
<Button bg={colors['blue-button']}>Submit</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default EditPengangguranBerdasarkanPendidikan;
|
||||
@@ -1,49 +1,215 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Title } from '@mantine/core';
|
||||
import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
|
||||
import { Box, Button, Flex, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { IconEdit, IconSearch, IconTrash } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Cell, Pie, PieChart } from 'recharts';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import JudulListTab from '../../../_com/jusulListTab';
|
||||
import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
|
||||
import grafikNganggur from '../../../_state/ekonomi/usia-kerja-nganggur';
|
||||
|
||||
function PengangguranBerdasarkanPendidikan() {
|
||||
const router = useRouter();
|
||||
function GrafikBerdasarkanPendidikan() {
|
||||
return (
|
||||
<Box py={10}>
|
||||
<Paper bg={colors['white-1']} p={'md'}>
|
||||
<Stack gap={"xs"}>
|
||||
<JudulListTab
|
||||
title='Pengangguran Berdasarkan Pendidikan'
|
||||
href='/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/create'
|
||||
placeholder='pencarian'
|
||||
searchIcon={<IconSearch size={20} />}
|
||||
/>
|
||||
<Title order={4}>List Pengangguran Berdasarkan Pendidikan</Title>
|
||||
<Table striped withTableBorder withRowBorders>
|
||||
<TableThead>
|
||||
<TableTr>
|
||||
<TableTh>Pendidikan SD</TableTh>
|
||||
<TableTh>Pendidikan SMP</TableTh>
|
||||
<TableTh>Pendidikan SMA</TableTh>
|
||||
<TableTh>Detail</TableTh>
|
||||
</TableTr>
|
||||
</TableThead>
|
||||
<TableTbody>
|
||||
<TableTr>
|
||||
<TableTd>80</TableTd>
|
||||
<TableTd>40</TableTd>
|
||||
<TableTd>20</TableTd>
|
||||
<TableTd>
|
||||
<Button onClick={() => router.push('/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/detail')}>
|
||||
<IconDeviceImac size={20} />
|
||||
</Button>
|
||||
</TableTd>
|
||||
</TableTr>
|
||||
</TableTbody>
|
||||
</Table>
|
||||
</Stack>
|
||||
</Paper>
|
||||
<Box>
|
||||
<Stack gap={"xs"}>
|
||||
<Title order={3}>Grafik Pengangguran Berdasarkan Pendidikan</Title>
|
||||
<ListGrafikBerdasarkanPendidikan />
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default PengangguranBerdasarkanPendidikan;
|
||||
function ListGrafikBerdasarkanPendidikan() {
|
||||
const stategrafik = useProxy(grafikNganggur.grafikBerdasarkanPendidikan)
|
||||
const [donutData, setDonutData] = useState<any[]>([]);
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const [modalHapus, setModalHapus] = useState(false)
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null)
|
||||
const router = useRouter();
|
||||
const [search, setSearch] = useState("");
|
||||
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (selectedId) {
|
||||
await stategrafik.delete.byId(selectedId)
|
||||
setModalHapus(false)
|
||||
setSelectedId(null)
|
||||
|
||||
stategrafik.findMany.load()
|
||||
}
|
||||
}
|
||||
|
||||
useShallowEffect(() => {
|
||||
setMounted(true);
|
||||
stategrafik.findMany.load()
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (stategrafik.findMany.data) {
|
||||
const SD = stategrafik.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.SD || 0), 0);
|
||||
const SMP = stategrafik.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.SMP || 0), 0);
|
||||
const SMA = stategrafik.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.SMA || 0), 0);
|
||||
const D3 = stategrafik.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.D3 || 0), 0);
|
||||
const S1 = stategrafik.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.S1 || 0), 0);
|
||||
setDonutData([
|
||||
{ name: 'SD', value: SD, color: colors['blue-button'], key: 'SD' },
|
||||
{ name: 'SMP', value: SMP, color: '#10A85AFF', key: 'SMP' },
|
||||
{ name: 'SMA', value: SMA, color: '#C07B13FF', key: 'SMA' },
|
||||
{ name: 'D3', value: D3, color: '#1094A8FF', key: 'D3' },
|
||||
{ name: 'S1', value: S1, color: '#A83610FF', key: 'S1' },
|
||||
]);
|
||||
}
|
||||
}, [stategrafik.findMany.data])
|
||||
|
||||
const filteredData = (stategrafik.findMany.data || []).filter(item => {
|
||||
const keyword = search.toLowerCase();
|
||||
return (
|
||||
item.SD.toString().toLowerCase().includes(keyword) ||
|
||||
item.SMP.toString().toLowerCase().includes(keyword) ||
|
||||
item.SMA.toString().toLowerCase().includes(keyword) ||
|
||||
item.D3.toString().toLowerCase().includes(keyword) ||
|
||||
item.S1.toString().toLowerCase().includes(keyword)
|
||||
);
|
||||
});
|
||||
|
||||
if (!stategrafik.findMany.data) {
|
||||
return (
|
||||
<Box>
|
||||
<Skeleton h={500} />
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Stack gap={"xs"}>
|
||||
<Paper bg={colors['white-1']} p={"md"}>
|
||||
<JudulListTab
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.currentTarget.value)}
|
||||
title='List Grafik Pengangguran Berdasarkan Pendidikan'
|
||||
href='/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/create'
|
||||
placeholder='pencarian'
|
||||
searchIcon={<IconSearch size={16} />}
|
||||
/>
|
||||
<Table striped withTableBorder withRowBorders>
|
||||
<TableThead>
|
||||
<TableTr>
|
||||
<TableTh>SD</TableTh>
|
||||
<TableTh>SMP</TableTh>
|
||||
<TableTh>SMA</TableTh>
|
||||
<TableTh>D3</TableTh>
|
||||
<TableTh>S1</TableTh>
|
||||
<TableTh>Edit</TableTh>
|
||||
<TableTh>Delete</TableTh>
|
||||
</TableTr>
|
||||
</TableThead>
|
||||
<TableTbody>
|
||||
{filteredData.length === 0 ? (
|
||||
<TableTr>
|
||||
<TableTd colSpan={6}>
|
||||
<Text ta='center' c='dimmed'>Belum ada data grafik responden</Text>
|
||||
</TableTd>
|
||||
</TableTr>
|
||||
) : (
|
||||
filteredData.map((item) => (
|
||||
<TableTr key={item.id}>
|
||||
<TableTd>{item.SD}</TableTd>
|
||||
<TableTd>{item.SMP}</TableTd>
|
||||
<TableTd>{item.SMA}</TableTd>
|
||||
<TableTd>{item.D3}</TableTd>
|
||||
<TableTd>{item.S1}</TableTd>
|
||||
<TableTd>
|
||||
<Button color='green' onClick={() => router.push(`/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/${item.id}`)}>
|
||||
<IconEdit size={20} />
|
||||
</Button>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Button
|
||||
color='red'
|
||||
disabled={stategrafik.delete.loading}
|
||||
onClick={() => {
|
||||
setSelectedId(item.id)
|
||||
setModalHapus(true)
|
||||
}}>
|
||||
<IconTrash size={20} />
|
||||
</Button>
|
||||
</TableTd>
|
||||
</TableTr>
|
||||
))
|
||||
)}
|
||||
</TableTbody>
|
||||
|
||||
</Table>
|
||||
</Paper>
|
||||
|
||||
{/* Chart */}
|
||||
<Box>
|
||||
<Paper bg={colors['white-1']} p={'md'}>
|
||||
<Stack>
|
||||
<Title pb={10} order={3}>Grafik Pengangguran Berdasarkan Pendidikan</Title>
|
||||
{mounted && donutData.length > 0 ? (<Box style={{ width: '100%', height: 'auto', minHeight: 200 }}>
|
||||
<PieChart
|
||||
width={800} height={300}
|
||||
data={donutData}
|
||||
>
|
||||
<Pie
|
||||
dataKey="value"
|
||||
nameKey="name"
|
||||
data={donutData}
|
||||
cx={500}
|
||||
cy={150}
|
||||
innerRadius={60}
|
||||
outerRadius={115}
|
||||
label={true}
|
||||
>
|
||||
{donutData.map((entry, index) => (
|
||||
<Cell key={`cell-${index}`} fill={entry.color} />
|
||||
))}
|
||||
</Pie>
|
||||
</PieChart>
|
||||
<Flex gap={"md"} align={"center"}>
|
||||
<Box bg={colors['blue-button']} w={20} h={20} />
|
||||
<Text>SD : {donutData.find((entry) => entry.name === 'SD')?.value}</Text>
|
||||
</Flex>
|
||||
<Flex gap={"md"} align={"center"}>
|
||||
<Box bg={'#10A85AFF'} w={20} h={20} />
|
||||
<Text>SMP : {donutData.find((entry) => entry.name === 'SMP')?.value}</Text>
|
||||
</Flex>
|
||||
<Flex gap={"md"} align={"center"}>
|
||||
<Box bg={'#C07B13FF'} w={20} h={20} />
|
||||
<Text>SMA : {donutData.find((entry) => entry.name === 'SMA')?.value}</Text>
|
||||
</Flex>
|
||||
<Flex gap={"md"} align={"center"}>
|
||||
<Box bg={'#1094A8FF'} w={20} h={20} />
|
||||
<Text>D3 : {donutData.find((entry) => entry.name === 'D3')?.value}</Text>
|
||||
</Flex>
|
||||
<Flex gap={"md"} align={"center"}>
|
||||
<Box bg={'#A83610FF'} w={20} h={20} />
|
||||
<Text>S1 : {donutData.find((entry) => entry.name === 'S1')?.value}</Text>
|
||||
</Flex>
|
||||
</Box>
|
||||
) : (
|
||||
<Text c='dimmed'>Belum ada data untuk ditampilkan dalam grafik</Text>
|
||||
)}
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
</Stack>
|
||||
|
||||
{/* Modal Konfirmasi Hapus */}
|
||||
<ModalKonfirmasiHapus
|
||||
opened={modalHapus}
|
||||
onClose={() => setModalHapus(false)}
|
||||
onConfirm={handleDelete}
|
||||
text='Apakah anda yakin ingin menghapus grafik pengangguran berdasarkan pendidikan ini?'
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default GrafikBerdasarkanPendidikan;
|
||||
|
||||
@@ -0,0 +1,99 @@
|
||||
'use client'
|
||||
import grafikNganggur from '@/app/admin/(dashboard)/_state/ekonomi/usia-kerja-nganggur';
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Paper, Stack, TextInput, Title } from '@mantine/core';
|
||||
import { IconArrowBack } from '@tabler/icons-react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { useEffect } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
|
||||
function EditGrafikBerdasarkanUsiaKerjaYangMenganggur() {
|
||||
const router = useRouter()
|
||||
const params = useParams() as { id: string }
|
||||
const stategrafik = useProxy(grafikNganggur.grafikBerdasarkanUsiaKerjaNganggur)
|
||||
const id = params.id
|
||||
|
||||
useEffect(() => {
|
||||
if(id){
|
||||
stategrafik.findUnique.load(id).then(() => {
|
||||
const data = stategrafik.findUnique.data
|
||||
if(data){
|
||||
stategrafik.update.form = {
|
||||
usia18_25: data.usia18_25 || '',
|
||||
usia26_35: data.usia26_35 || '',
|
||||
usia36_45: data.usia36_45 || '',
|
||||
usia46_keatas: data.usia46_keatas || '',
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}, [id])
|
||||
|
||||
const handleSubmit = async () => {
|
||||
stategrafik.update.id = id;
|
||||
await stategrafik.update.submit();
|
||||
router.push('/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia')
|
||||
}
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Box mb={10}>
|
||||
<Button variant="subtle" onClick={() => router.back()}>
|
||||
<IconArrowBack size={20} />
|
||||
</Button>
|
||||
</Box>
|
||||
<Paper bg={colors['white-1']} w={{ base: '100%', md: '50%' }} p={'md'}>
|
||||
<Stack>
|
||||
<Title order={3}>Edit Grafik Pengangguran Berdasarkan Usia Kerja</Title>
|
||||
<TextInput
|
||||
label="Usia 18 - 25"
|
||||
type='number'
|
||||
placeholder="masukkan jumlah"
|
||||
value={stategrafik.update.form.usia18_25}
|
||||
onChange={(val) => {
|
||||
stategrafik.update.form.usia18_25 = val.currentTarget.value;
|
||||
}}
|
||||
/>
|
||||
<TextInput
|
||||
label="Usia 26 - 35"
|
||||
type="number"
|
||||
placeholder="masukkan jumlah"
|
||||
value={stategrafik.update.form.usia26_35}
|
||||
onChange={(val) => {
|
||||
stategrafik.update.form.usia26_35 = val.currentTarget.value;
|
||||
}}
|
||||
/>
|
||||
<TextInput
|
||||
label="Usia 36 - 45"
|
||||
type="number"
|
||||
placeholder="masukkan jumlah"
|
||||
value={stategrafik.update.form.usia36_45}
|
||||
onChange={(val) => {
|
||||
stategrafik.update.form.usia36_45 = val.currentTarget.value;
|
||||
}}
|
||||
/>
|
||||
<TextInput
|
||||
label="Usia 46 +"
|
||||
type="number"
|
||||
placeholder="masukkan jumlah"
|
||||
value={stategrafik.update.form.usia46_keatas}
|
||||
onChange={(val) => {
|
||||
stategrafik.update.form.usia46_keatas = val.currentTarget.value;
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
mt={10}
|
||||
bg={colors['blue-button']}
|
||||
onClick={handleSubmit}
|
||||
>
|
||||
Submit
|
||||
</Button>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default EditGrafikBerdasarkanUsiaKerjaYangMenganggur;
|
||||
@@ -1,45 +1,101 @@
|
||||
'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';
|
||||
/* eslint-disable @typescript-eslint/no-unused-vars */
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
import React from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import grafikBerdasarkanJenisKelamin from '@/app/admin/(dashboard)/_state/ppid/indeks_kepuasan_masyarakat/grafikBerdasarkanJenisKelamin';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import { useState } from 'react';
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Paper, Stack, Title, TextInput } from '@mantine/core';
|
||||
import { IconArrowBack } from '@tabler/icons-react';
|
||||
import grafikNganggur from '@/app/admin/(dashboard)/_state/ekonomi/usia-kerja-nganggur';
|
||||
|
||||
function CreatePengangguranBerdasarkanUsia() {
|
||||
|
||||
function CreateGrafikBerdasarkanUsiaKerjaYangMenganggur() {
|
||||
const router = useRouter();
|
||||
const stategrafik = useProxy(grafikNganggur.grafikBerdasarkanUsiaKerjaNganggur)
|
||||
const [donutData, setDonutData] = useState<any[]>([]);
|
||||
|
||||
const resetForm = () => {
|
||||
stategrafik.create.form = {
|
||||
...stategrafik.create.form,
|
||||
usia18_25: "",
|
||||
usia26_35: "",
|
||||
usia36_45: "",
|
||||
usia46_keatas: "",
|
||||
}
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const id = await stategrafik.create.create();
|
||||
if (id) {
|
||||
const idStr = String(id);
|
||||
await stategrafik.findUnique.load(idStr);
|
||||
if (stategrafik.findUnique.data) {
|
||||
setDonutData([stategrafik.findUnique.data]);
|
||||
}
|
||||
}
|
||||
resetForm();
|
||||
router.push("/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia")
|
||||
}
|
||||
return (
|
||||
<Box>
|
||||
<Box mb={10}>
|
||||
<Button onClick={() => router.back()} variant='subtle' color={'blue'}>
|
||||
<IconArrowBack color={colors['blue-button']} size={25}/>
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
|
||||
<Stack gap={"xs"}>
|
||||
<Title order={4}>Create Pengangguran Berdasarkan Usia</Title>
|
||||
<TextInput
|
||||
label={<Text fw={"bold"} fz={"sm"}>Usia 18 - 25</Text>}
|
||||
placeholder='Masukkan usia'
|
||||
/>
|
||||
<TextInput
|
||||
label={<Text fw={"bold"} fz={"sm"}>Usia 26 - 35</Text>}
|
||||
placeholder='Masukkan usia'
|
||||
/>
|
||||
<TextInput
|
||||
label={<Text fw={"bold"} fz={"sm"}>Usia 36 - 45</Text>}
|
||||
placeholder='Masukkan usia'
|
||||
/>
|
||||
<TextInput
|
||||
label={<Text fw={"bold"} fz={"sm"}>Usia 46 +</Text>}
|
||||
placeholder='Masukkan usia'
|
||||
/>
|
||||
<Group>
|
||||
<Button bg={colors['blue-button']}>Submit</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
<Box mb={10}>
|
||||
<Button variant="subtle" onClick={() => router.back()}>
|
||||
<IconArrowBack size={20} />
|
||||
</Button>
|
||||
</Box>
|
||||
<Paper bg={colors['white-1']} w={{ base: '100%', md: '50%' }} p={'md'}>
|
||||
<Stack>
|
||||
<Title order={3}>Create Grafik Pengangguran Berdasarkan Usia Kerja</Title>
|
||||
<TextInput
|
||||
label="Usia 18 - 25"
|
||||
type='number'
|
||||
placeholder="masukkan jumlah"
|
||||
value={stategrafik.create.form.usia18_25}
|
||||
onChange={(val) => {
|
||||
stategrafik.create.form.usia18_25 = val.currentTarget.value;
|
||||
}}
|
||||
/>
|
||||
<TextInput
|
||||
label="Usia 26 - 35"
|
||||
type="number"
|
||||
placeholder="masukkan jumlah"
|
||||
value={stategrafik.create.form.usia26_35}
|
||||
onChange={(val) => {
|
||||
stategrafik.create.form.usia26_35 = val.currentTarget.value;
|
||||
}}
|
||||
/>
|
||||
<TextInput
|
||||
label="Usia 36 - 45"
|
||||
type="number"
|
||||
placeholder="masukkan jumlah"
|
||||
value={stategrafik.create.form.usia36_45}
|
||||
onChange={(val) => {
|
||||
stategrafik.create.form.usia36_45 = val.currentTarget.value;
|
||||
}}
|
||||
/>
|
||||
<TextInput
|
||||
label="Usia 46 +"
|
||||
type="number"
|
||||
placeholder="masukkan jumlah"
|
||||
value={stategrafik.create.form.usia46_keatas}
|
||||
onChange={(val) => {
|
||||
stategrafik.create.form.usia46_keatas = val.currentTarget.value;
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
mt={10}
|
||||
bg={colors['blue-button']}
|
||||
onClick={handleSubmit}
|
||||
>
|
||||
Submit
|
||||
</Button>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default CreatePengangguranBerdasarkanUsia;
|
||||
export default CreateGrafikBerdasarkanUsiaKerjaYangMenganggur;
|
||||
|
||||
@@ -1,70 +0,0 @@
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Flex, Paper, Stack, Text } from '@mantine/core';
|
||||
import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
|
||||
|
||||
function DetailPengangguranBerdasarkanUsia() {
|
||||
const router = useRouter();
|
||||
return (
|
||||
<Box>
|
||||
<Box mb={10}>
|
||||
<Button variant="subtle" onClick={() => router.back()}>
|
||||
<IconArrowBack color={colors['blue-button']} size={25} />
|
||||
</Button>
|
||||
</Box>
|
||||
<Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
|
||||
<Stack>
|
||||
<Text fz={"xl"} fw={"bold"}>Detail Pengangguran Berdasarkan Usia</Text>
|
||||
|
||||
<Paper bg={colors['BG-trans']} p={'md'}>
|
||||
<Stack gap={"xs"}>
|
||||
<Box>
|
||||
<Text fw={"bold"}>Usia 18 - 25</Text>
|
||||
<Text>80</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fw={"bold"}>Usia 26 - 35</Text>
|
||||
<Text>40</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fw={"bold"}>Usia 36 - 45</Text>
|
||||
<Text>20</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fw={"bold"}>Usia 46 +</Text>
|
||||
<Text>10</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fw={"bold"}>Total</Text>
|
||||
<Text>150</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Flex gap={"xs"}>
|
||||
<Button color="red">
|
||||
<IconX size={20} />
|
||||
</Button>
|
||||
<Button onClick={() => router.push('/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/edit')} color="green">
|
||||
<IconEdit size={20} />
|
||||
</Button>
|
||||
</Flex>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
{/* Modal Hapus
|
||||
<ModalKonfirmasiHapus
|
||||
opened={modalHapus}
|
||||
onClose={() => setModalHapus(false)}
|
||||
onConfirm={handleHapus}
|
||||
text="Apakah anda yakin ingin menghapus potensi ini?"
|
||||
/> */}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default DetailPengangguranBerdasarkanUsia;
|
||||
|
||||
@@ -1,47 +0,0 @@
|
||||
'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';
|
||||
|
||||
|
||||
|
||||
function EditPengangguranBerdasarkanUsia() {
|
||||
const router = useRouter();
|
||||
return (
|
||||
<Box>
|
||||
<Box mb={10}>
|
||||
<Button onClick={() => router.back()} variant='subtle' color={'blue'}>
|
||||
<IconArrowBack color={colors['blue-button']} size={25}/>
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
|
||||
<Stack gap={"xs"}>
|
||||
<Title order={4}>Edit Pengangguran Berdasarkan Usia</Title>
|
||||
<TextInput
|
||||
label={<Text fw={"bold"} fz={"sm"}>Usia 18 - 25</Text>}
|
||||
placeholder='Masukkan usia'
|
||||
/>
|
||||
<TextInput
|
||||
label={<Text fw={"bold"} fz={"sm"}>Usia 26 - 35</Text>}
|
||||
placeholder='Masukkan usia'
|
||||
/>
|
||||
<TextInput
|
||||
label={<Text fw={"bold"} fz={"sm"}>Usia 36 - 45</Text>}
|
||||
placeholder='Masukkan usia'
|
||||
/>
|
||||
<TextInput
|
||||
label={<Text fw={"bold"} fz={"sm"}>Usia 46 +</Text>}
|
||||
placeholder='Masukkan usia'
|
||||
/>
|
||||
<Group>
|
||||
<Button bg={colors['blue-button']}>Submit</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default EditPengangguranBerdasarkanUsia;
|
||||
@@ -1,49 +1,206 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Title } from '@mantine/core';
|
||||
import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
|
||||
import { Box, Button, Flex, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { IconEdit, IconSearch, IconTrash } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Cell, Pie, PieChart } from 'recharts';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import JudulListTab from '../../../_com/jusulListTab';
|
||||
import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
|
||||
import grafikNganggur from '../../../_state/ekonomi/usia-kerja-nganggur';
|
||||
|
||||
function PengangguranBerdasarkanUsia() {
|
||||
const router = useRouter();
|
||||
function GrafikBerdasarkanUsiaKerjaYangMenganggur() {
|
||||
return (
|
||||
<Box py={10}>
|
||||
<Paper bg={colors['white-1']} p={'md'}>
|
||||
<Stack gap={"xs"}>
|
||||
<JudulListTab
|
||||
title='Pengangguran Berdasarkan Usia'
|
||||
href='/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/create'
|
||||
placeholder='pencarian'
|
||||
searchIcon={<IconSearch size={20} />}
|
||||
/>
|
||||
<Title order={4}>List Pengangguran Berdasarkan Usia</Title>
|
||||
<Table striped withTableBorder withRowBorders>
|
||||
<TableThead>
|
||||
<TableTr>
|
||||
<TableTh>Usia 18 - 25</TableTh>
|
||||
<TableTh>Usia 26 - 35</TableTh>
|
||||
<TableTh>Usia 36 - 45</TableTh>
|
||||
<TableTh>Detail</TableTh>
|
||||
</TableTr>
|
||||
</TableThead>
|
||||
<TableTbody>
|
||||
<TableTr>
|
||||
<TableTd>80</TableTd>
|
||||
<TableTd>40</TableTd>
|
||||
<TableTd>20</TableTd>
|
||||
<TableTd>
|
||||
<Button onClick={() => router.push('/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/detail')}>
|
||||
<IconDeviceImac size={20} />
|
||||
</Button>
|
||||
</TableTd>
|
||||
</TableTr>
|
||||
</TableTbody>
|
||||
</Table>
|
||||
</Stack>
|
||||
</Paper>
|
||||
<Box>
|
||||
<Stack gap={"xs"}>
|
||||
<Title order={3}>Grafik Pengangguran Berdasarkan Usia Kerja</Title>
|
||||
<ListGrafikBerdasarkanUsiaKerjaYangMenganggur />
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default PengangguranBerdasarkanUsia;
|
||||
function ListGrafikBerdasarkanUsiaKerjaYangMenganggur() {
|
||||
const stategrafik = useProxy(grafikNganggur.grafikBerdasarkanUsiaKerjaNganggur)
|
||||
const [donutData, setDonutData] = useState<any[]>([]);
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const [modalHapus, setModalHapus] = useState(false)
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null)
|
||||
const router = useRouter();
|
||||
const [search, setSearch] = useState("");
|
||||
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (selectedId) {
|
||||
await stategrafik.delete.byId(selectedId)
|
||||
setModalHapus(false)
|
||||
setSelectedId(null)
|
||||
|
||||
stategrafik.findMany.load()
|
||||
}
|
||||
}
|
||||
|
||||
useShallowEffect(() => {
|
||||
setMounted(true);
|
||||
stategrafik.findMany.load()
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (stategrafik.findMany.data) {
|
||||
const totalUsia18_25 = stategrafik.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.usia18_25 || 0), 0);
|
||||
const totalUsia26_35 = stategrafik.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.usia26_35 || 0), 0);
|
||||
const totalUsia36_45 = stategrafik.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.usia36_45 || 0), 0);
|
||||
const totalUsia46_keatas = stategrafik.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.usia46_keatas || 0), 0);
|
||||
setDonutData([
|
||||
{ name: 'usia18_25', value: totalUsia18_25, color: colors['blue-button'], key: 'usia18_25' },
|
||||
{ name: 'usia26_35', value: totalUsia26_35, color: '#10A85AFF', key: 'usia26_35' },
|
||||
{ name: 'usia36_45', value: totalUsia36_45, color: '#C07B13FF', key: 'usia36_45' },
|
||||
{ name: 'usia46_keatas', value: totalUsia46_keatas, color: '#1094A8FF', key: 'usia46_keatas' },
|
||||
]);
|
||||
}
|
||||
}, [stategrafik.findMany.data])
|
||||
|
||||
const filteredData = (stategrafik.findMany.data || []).filter(item => {
|
||||
const keyword = search.toLowerCase();
|
||||
return (
|
||||
item.usia18_25.toString().toLowerCase().includes(keyword) ||
|
||||
item.usia26_35.toString().toLowerCase().includes(keyword) ||
|
||||
item.usia36_45.toString().toLowerCase().includes(keyword) ||
|
||||
item.usia46_keatas.toString().toLowerCase().includes(keyword)
|
||||
);
|
||||
});
|
||||
|
||||
if (!stategrafik.findMany.data) {
|
||||
return (
|
||||
<Box>
|
||||
<Skeleton h={500} />
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Stack gap={"xs"}>
|
||||
<Paper bg={colors['white-1']} p={"md"}>
|
||||
<JudulListTab
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.currentTarget.value)}
|
||||
title='List Pengangguran Berdasarkan Usia Kerja'
|
||||
href='/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/create'
|
||||
placeholder='pencarian'
|
||||
searchIcon={<IconSearch size={16} />}
|
||||
/>
|
||||
<Table striped withTableBorder withRowBorders>
|
||||
<TableThead>
|
||||
<TableTr>
|
||||
<TableTh>Usia 18-25</TableTh>
|
||||
<TableTh>Usia 26-35</TableTh>
|
||||
<TableTh>Usia 36-45</TableTh>
|
||||
<TableTh>Usia 46 +</TableTh>
|
||||
<TableTh>Edit</TableTh>
|
||||
<TableTh>Delete</TableTh>
|
||||
</TableTr>
|
||||
</TableThead>
|
||||
<TableTbody>
|
||||
{filteredData.length === 0 ? (
|
||||
<TableTr>
|
||||
<TableTd colSpan={6}>
|
||||
<Text ta='center' c='dimmed'>Belum ada data grafik responden</Text>
|
||||
</TableTd>
|
||||
</TableTr>
|
||||
) : (
|
||||
filteredData.map((item) => (
|
||||
<TableTr key={item.id}>
|
||||
<TableTd>{item.usia18_25}</TableTd>
|
||||
<TableTd>{item.usia26_35}</TableTd>
|
||||
<TableTd>{item.usia36_45}</TableTd>
|
||||
<TableTd>{item.usia46_keatas}</TableTd>
|
||||
<TableTd>
|
||||
<Button color='green' onClick={() => router.push(`/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/${item.id}`)}>
|
||||
<IconEdit size={20} />
|
||||
</Button>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Button
|
||||
color='red'
|
||||
disabled={stategrafik.delete.loading}
|
||||
onClick={() => {
|
||||
setSelectedId(item.id)
|
||||
setModalHapus(true)
|
||||
}}>
|
||||
<IconTrash size={20} />
|
||||
</Button>
|
||||
</TableTd>
|
||||
</TableTr>
|
||||
))
|
||||
)}
|
||||
</TableTbody>
|
||||
|
||||
</Table>
|
||||
</Paper>
|
||||
|
||||
{/* Chart */}
|
||||
<Box>
|
||||
<Paper bg={colors['white-1']} p={'md'}>
|
||||
<Stack>
|
||||
<Title pb={10} order={3}>Grafik Pengangguran Berdasarkan Usia Kerja</Title>
|
||||
{mounted && donutData.length > 0 ? (<Box style={{ width: '100%', height: 'auto', minHeight: 200 }}>
|
||||
<PieChart
|
||||
width={800} height={300}
|
||||
data={donutData}
|
||||
>
|
||||
<Pie
|
||||
dataKey="value"
|
||||
nameKey="name"
|
||||
data={donutData}
|
||||
cx={500}
|
||||
cy={150}
|
||||
innerRadius={60}
|
||||
outerRadius={115}
|
||||
label={true}
|
||||
>
|
||||
{donutData.map((entry, index) => (
|
||||
<Cell key={`cell-${index}`} fill={entry.color} />
|
||||
))}
|
||||
</Pie>
|
||||
</PieChart>
|
||||
<Flex gap={"md"} align={"center"}>
|
||||
<Box bg={colors['blue-button']} w={20} h={20} />
|
||||
<Text>Usia 18-25 : {donutData.find((entry) => entry.name === 'usia18_25')?.value}</Text>
|
||||
</Flex>
|
||||
<Flex gap={"md"} align={"center"}>
|
||||
<Box bg={'#10A85AFF'} w={20} h={20} />
|
||||
<Text>Usia 26-35 : {donutData.find((entry) => entry.name === 'usia26_35')?.value}</Text>
|
||||
</Flex>
|
||||
<Flex gap={"md"} align={"center"}>
|
||||
<Box bg={'#C07B13FF'} w={20} h={20} />
|
||||
<Text>Usia 36-45 : {donutData.find((entry) => entry.name === 'usia36_45')?.value}</Text>
|
||||
</Flex>
|
||||
<Flex gap={"md"} align={"center"}>
|
||||
<Box bg={'#1094A8FF'} w={20} h={20} />
|
||||
<Text>Usia 46 + : {donutData.find((entry) => entry.name === 'usia46_keatas')?.value}</Text>
|
||||
</Flex>
|
||||
</Box>
|
||||
) : (
|
||||
<Text c='dimmed'>Belum ada data untuk ditampilkan dalam grafik</Text>
|
||||
)}
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
</Stack>
|
||||
|
||||
{/* Modal Konfirmasi Hapus */}
|
||||
<ModalKonfirmasiHapus
|
||||
opened={modalHapus}
|
||||
onClose={() => setModalHapus(false)}
|
||||
onConfirm={handleDelete}
|
||||
text='Apakah anda yakin ingin menghapus grafik pengangguran berdasarkan usia kerja ini?'
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default GrafikBerdasarkanUsiaKerjaYangMenganggur;
|
||||
|
||||
@@ -240,7 +240,7 @@ export const navBar = [
|
||||
{
|
||||
id: "Ekonomi_6",
|
||||
name: "Jumlah penduduk usia kerja yang menganggur",
|
||||
path: "/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur"
|
||||
path: "/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia"
|
||||
},
|
||||
{
|
||||
id: "Ekonomi_7",
|
||||
|
||||
@@ -4,6 +4,8 @@ import LowonganKerja from "./lowongan-kerja";
|
||||
import ProgramKemiskinan from "./program-kemiskinan";
|
||||
import KategoriProduk from "./pasar-desa/kategori-produk";
|
||||
import StrukturOrganisasi from "./struktur-organisasi";
|
||||
import GrafikUsiaKerjaYangMenganggur from "./usia-kerja-yang-menganggur";
|
||||
import GrafikMenganggurBerdasarkanPendidikan from "./usia-kerja-yang-menganggur/pengangguran-berdasrkan-pendidikan";
|
||||
|
||||
const Ekonomi = new Elysia({
|
||||
prefix: "/api/ekonomi",
|
||||
@@ -14,5 +16,7 @@ const Ekonomi = new Elysia({
|
||||
.use(LowonganKerja)
|
||||
.use(ProgramKemiskinan)
|
||||
.use(StrukturOrganisasi)
|
||||
.use(GrafikUsiaKerjaYangMenganggur)
|
||||
.use(GrafikMenganggurBerdasarkanPendidikan)
|
||||
|
||||
export default Ekonomi
|
||||
@@ -0,0 +1,36 @@
|
||||
import prisma from "@/lib/prisma";
|
||||
import { Prisma } from "@prisma/client";
|
||||
import { Context } from "elysia";
|
||||
|
||||
type FormCreate = Prisma.GrafikMenganggurBerdasarkanUsiaGetPayload<{
|
||||
select: {
|
||||
usia18_25: true;
|
||||
usia26_35: true;
|
||||
usia36_45: true;
|
||||
usia46_keatas: true;
|
||||
}
|
||||
}>
|
||||
export default async function grafikMenganggurBerdasarkanUsiaCreate(context: Context) {
|
||||
const body = context.body as FormCreate;
|
||||
|
||||
const created = await prisma.grafikMenganggurBerdasarkanUsia.create({
|
||||
data: {
|
||||
usia18_25: body.usia18_25,
|
||||
usia26_35: body.usia26_35,
|
||||
usia36_45: body.usia36_45,
|
||||
usia46_keatas: body.usia46_keatas,
|
||||
},
|
||||
select: {
|
||||
id: true,
|
||||
usia18_25: true,
|
||||
usia26_35: true,
|
||||
usia36_45: true,
|
||||
usia46_keatas: true,
|
||||
}
|
||||
});
|
||||
return {
|
||||
success: true,
|
||||
message: "Success create grafik menganggur berdasarkan usia",
|
||||
data: created,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
import { Context } from "elysia";
|
||||
import prisma from "@/lib/prisma";
|
||||
|
||||
export default async function grafikMenganggurBerdasarkanUsiaDelete(context: Context) {
|
||||
const {id} = context.params as {id: string}
|
||||
|
||||
try {
|
||||
const existingData = await prisma.grafikMenganggurBerdasarkanUsia.findUnique({
|
||||
where: {
|
||||
id: id,
|
||||
}
|
||||
})
|
||||
|
||||
if (!existingData) {
|
||||
return {
|
||||
success: false,
|
||||
message: "Data tidak ditemukan",
|
||||
data: null,
|
||||
}
|
||||
}
|
||||
|
||||
await prisma.grafikMenganggurBerdasarkanUsia.delete({
|
||||
where: {
|
||||
id: id
|
||||
}
|
||||
})
|
||||
|
||||
return {
|
||||
success: true,
|
||||
message: "Data berhasil dihapus",
|
||||
data: {
|
||||
id: id,
|
||||
},
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Delete error:", error);
|
||||
return {
|
||||
success: false,
|
||||
message: "Gagal menghapus data: " + (error instanceof Error ? error.message : 'Unknown error'),
|
||||
data: null,
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
import prisma from "@/lib/prisma";
|
||||
|
||||
export default async function grafikMenganggurBerdasarkanUsiaFindMany() {
|
||||
const res = await prisma.grafikMenganggurBerdasarkanUsia.findMany();
|
||||
return {
|
||||
data: res
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
import prisma from "@/lib/prisma";
|
||||
|
||||
export default async function grafikMenganggurBerdasarkanUsiaFindUnique(
|
||||
request: Request,
|
||||
) {
|
||||
const url = new URL(request.url);
|
||||
const pathSegments = url.pathname.split('/');
|
||||
const id = pathSegments[pathSegments.length - 1];
|
||||
|
||||
if (!id) {
|
||||
return Response.json({
|
||||
success: false,
|
||||
message: "ID tidak boleh kosong",
|
||||
}, { status: 400 });
|
||||
}
|
||||
|
||||
try {
|
||||
if (typeof id !== 'string') {
|
||||
return Response.json({
|
||||
success: false,
|
||||
message: "ID tidak valid",
|
||||
}, { status: 400 });
|
||||
}
|
||||
|
||||
const data = await prisma.grafikMenganggurBerdasarkanUsia.findUnique({
|
||||
where: { id },
|
||||
});
|
||||
|
||||
if (!data) {
|
||||
return Response.json({
|
||||
success: false,
|
||||
message: "Data tidak ditemukan",
|
||||
data: null,
|
||||
}, { status: 404 });
|
||||
}
|
||||
|
||||
return Response.json({
|
||||
success: true,
|
||||
message: "Data berhasil ditemukan",
|
||||
data,
|
||||
}, { status: 200 });
|
||||
} catch (error) {
|
||||
console.error("Find unique error:", error);
|
||||
return Response.json({
|
||||
success: false,
|
||||
message: "Gagal menemukan data: " + (error instanceof Error ? error.message : 'Unknown error'),
|
||||
data: null,
|
||||
}, { status: 500 });
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import Elysia, { t } from "elysia";
|
||||
import grafikMenganggurBerdasarkanUsiaFindMany from "./findMany";
|
||||
import grafikMenganggurBerdasarkanUsiaFindUnique from "./findUnique";
|
||||
import grafikMenganggurBerdasarkanUsiaUpdate from "./updt";
|
||||
import grafikMenganggurBerdasarkanUsiaCreate from "./create";
|
||||
import grafikMenganggurBerdasarkanUsiaDelete from "./del";
|
||||
|
||||
const GrafikUsiaKerjaYangMenganggur = new Elysia({prefix: "/grafikusiakerjayangmenganggur", tags: ["Ekonomi/Jumlah Penduduk Usia Kerja Yang Menganggur"]})
|
||||
.get("/find-many", grafikMenganggurBerdasarkanUsiaFindMany)
|
||||
.get("/:id", async (context) => {
|
||||
const response = await grafikMenganggurBerdasarkanUsiaFindUnique(new Request(context.request))
|
||||
return response
|
||||
})
|
||||
.put("/:id", grafikMenganggurBerdasarkanUsiaUpdate, {
|
||||
params: t.Object({
|
||||
id: t.String(),
|
||||
}),
|
||||
body: t.Object({
|
||||
usia18_25: t.String(),
|
||||
usia26_35: t.String(),
|
||||
usia36_45: t.String(),
|
||||
usia46_keatas: t.String(),
|
||||
}),
|
||||
})
|
||||
.post("/create", grafikMenganggurBerdasarkanUsiaCreate, {
|
||||
body: t.Object({
|
||||
usia18_25: t.String(),
|
||||
usia26_35: t.String(),
|
||||
usia36_45: t.String(),
|
||||
usia46_keatas: t.String(),
|
||||
}),
|
||||
})
|
||||
.delete("/del/:id", grafikMenganggurBerdasarkanUsiaDelete, {
|
||||
params: t.Object({
|
||||
id: t.String(),
|
||||
}),
|
||||
});
|
||||
|
||||
export default GrafikUsiaKerjaYangMenganggur;
|
||||
@@ -0,0 +1,39 @@
|
||||
import prisma from "@/lib/prisma";
|
||||
import { Prisma } from "@prisma/client";
|
||||
import { Context } from "elysia";
|
||||
|
||||
type FormCreate = Prisma.GrafikMenganggurBerdasarkanPendidikanGetPayload<{
|
||||
select: {
|
||||
SD: true;
|
||||
SMP: true;
|
||||
SMA: true;
|
||||
D3: true;
|
||||
S1: true;
|
||||
}
|
||||
}>
|
||||
export default async function grafikMenganggurBerdasarkanPendidikanCreate(context: Context) {
|
||||
const body = context.body as FormCreate;
|
||||
|
||||
const created = await prisma.grafikMenganggurBerdasarkanPendidikan.create({
|
||||
data: {
|
||||
SD: body.SD,
|
||||
SMP: body.SMP,
|
||||
SMA: body.SMA,
|
||||
D3: body.D3,
|
||||
S1: body.S1,
|
||||
},
|
||||
select: {
|
||||
id: true,
|
||||
SD: true,
|
||||
SMP: true,
|
||||
SMA: true,
|
||||
D3: true,
|
||||
S1: true,
|
||||
}
|
||||
});
|
||||
return {
|
||||
success: true,
|
||||
message: "Success create grafik menganggur berdasarkan pendidikan",
|
||||
data: created,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
import { Context } from "elysia";
|
||||
import prisma from "@/lib/prisma";
|
||||
|
||||
export default async function grafikMenganggurBerdasarkanPendidikanDelete(context: Context) {
|
||||
const {id} = context.params as {id: string}
|
||||
|
||||
try {
|
||||
const existingData = await prisma.grafikMenganggurBerdasarkanPendidikan.findUnique({
|
||||
where: {
|
||||
id: id,
|
||||
}
|
||||
})
|
||||
|
||||
if (!existingData) {
|
||||
return {
|
||||
success: false,
|
||||
message: "Data tidak ditemukan",
|
||||
data: null,
|
||||
}
|
||||
}
|
||||
|
||||
await prisma.grafikMenganggurBerdasarkanPendidikan.delete({
|
||||
where: {
|
||||
id: id
|
||||
}
|
||||
})
|
||||
|
||||
return {
|
||||
success: true,
|
||||
message: "Data berhasil dihapus",
|
||||
data: {
|
||||
id: id,
|
||||
},
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Delete error:", error);
|
||||
return {
|
||||
success: false,
|
||||
message: "Gagal menghapus data: " + (error instanceof Error ? error.message : 'Unknown error'),
|
||||
data: null,
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
import prisma from "@/lib/prisma";
|
||||
|
||||
export default async function grafikMenganggurBerdasarkanPendidikanFindMany() {
|
||||
const res = await prisma.grafikMenganggurBerdasarkanPendidikan.findMany();
|
||||
return {
|
||||
data: res
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
import prisma from "@/lib/prisma";
|
||||
|
||||
export default async function grafikMenganggurBerdasarkanPendidikanFindUnique(
|
||||
request: Request,
|
||||
) {
|
||||
const url = new URL(request.url);
|
||||
const pathSegments = url.pathname.split('/');
|
||||
const id = pathSegments[pathSegments.length - 1];
|
||||
|
||||
if (!id) {
|
||||
return Response.json({
|
||||
success: false,
|
||||
message: "ID tidak boleh kosong",
|
||||
}, { status: 400 });
|
||||
}
|
||||
|
||||
try {
|
||||
if (typeof id !== 'string') {
|
||||
return Response.json({
|
||||
success: false,
|
||||
message: "ID tidak valid",
|
||||
}, { status: 400 });
|
||||
}
|
||||
|
||||
const data = await prisma.grafikMenganggurBerdasarkanPendidikan.findUnique({
|
||||
where: { id },
|
||||
});
|
||||
|
||||
if (!data) {
|
||||
return Response.json({
|
||||
success: false,
|
||||
message: "Data tidak ditemukan",
|
||||
data: null,
|
||||
}, { status: 404 });
|
||||
}
|
||||
|
||||
return Response.json({
|
||||
success: true,
|
||||
message: "Data berhasil ditemukan",
|
||||
data,
|
||||
}, { status: 200 });
|
||||
} catch (error) {
|
||||
console.error("Find unique error:", error);
|
||||
return Response.json({
|
||||
success: false,
|
||||
message: "Gagal menemukan data: " + (error instanceof Error ? error.message : 'Unknown error'),
|
||||
data: null,
|
||||
}, { status: 500 });
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
import Elysia, { t } from "elysia";
|
||||
import grafikMenganggurBerdasarkanPendidikanCreate from "./create";
|
||||
import grafikMenganggurBerdasarkanPendidikanDelete from "./del";
|
||||
import grafikMenganggurBerdasarkanPendidikanFindMany from "./findMany";
|
||||
import grafikMenganggurBerdasarkanPendidikanFindUnique from "./findUnique";
|
||||
import grafikMenganggurBerdasarkanPendidikanUpdate from "./updt";
|
||||
|
||||
const GrafikMenganggurBerdasarkanPendidikan = new Elysia({prefix: "grafikmenganggurberdasarkanpendidikan", tags: ["Ekonomi/Usia Kerja Yang Menganggur/Pengangguran Berdasarkan Pendidikan"]})
|
||||
.get("/find-many", grafikMenganggurBerdasarkanPendidikanFindMany)
|
||||
.get("/:id", async (context) => {
|
||||
const response = await grafikMenganggurBerdasarkanPendidikanFindUnique(new Request(context.request))
|
||||
return response
|
||||
})
|
||||
.put("/:id", grafikMenganggurBerdasarkanPendidikanUpdate, {
|
||||
params: t.Object({
|
||||
id: t.String(),
|
||||
}),
|
||||
body: t.Object({
|
||||
SD: t.String(),
|
||||
SMP: t.String(),
|
||||
SMA: t.String(),
|
||||
D3: t.String(),
|
||||
S1: t.String(),
|
||||
}),
|
||||
})
|
||||
.post("/create", grafikMenganggurBerdasarkanPendidikanCreate, {
|
||||
body: t.Object({
|
||||
SD: t.String(),
|
||||
SMP: t.String(),
|
||||
SMA: t.String(),
|
||||
D3: t.String(),
|
||||
S1: t.String(),
|
||||
}),
|
||||
})
|
||||
.delete("/del/:id", grafikMenganggurBerdasarkanPendidikanDelete, {
|
||||
params: t.Object({
|
||||
id: t.String(),
|
||||
}),
|
||||
});
|
||||
|
||||
|
||||
export default GrafikMenganggurBerdasarkanPendidikan
|
||||
@@ -0,0 +1,53 @@
|
||||
import prisma from "@/lib/prisma";
|
||||
import { Context } from "elysia";
|
||||
|
||||
export default async function grafikMenganggurBerdasarkanPendidikanUpdate(context: Context) {
|
||||
const id = context.params?.id;
|
||||
|
||||
if (!id) {
|
||||
return {
|
||||
success: false,
|
||||
message: "Id tidak ditemukan",
|
||||
}
|
||||
}
|
||||
|
||||
const {SD, SMP, SMA, D3, S1} = context.body as {
|
||||
SD: string;
|
||||
SMP: string;
|
||||
SMA: string;
|
||||
D3: string;
|
||||
S1: string;
|
||||
}
|
||||
|
||||
const existing = await prisma.grafikMenganggurBerdasarkanPendidikan.findUnique({
|
||||
where: {
|
||||
id: id,
|
||||
},
|
||||
})
|
||||
|
||||
if (!existing) {
|
||||
return {
|
||||
success: false,
|
||||
message: "Data tidak ditemukan",
|
||||
}
|
||||
}
|
||||
|
||||
const updated = await prisma.grafikMenganggurBerdasarkanPendidikan.update({
|
||||
where: {
|
||||
id: id,
|
||||
},
|
||||
data: {
|
||||
SD: SD,
|
||||
SMP: SMP,
|
||||
SMA: SMA,
|
||||
D3: D3,
|
||||
S1: S1,
|
||||
},
|
||||
})
|
||||
|
||||
return {
|
||||
success: true,
|
||||
message: "Data berhasil diupdate",
|
||||
data: updated,
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
import prisma from "@/lib/prisma";
|
||||
import { Context } from "elysia";
|
||||
|
||||
export default async function grafikMenganggurBerdasarkanUsiaUpdate(context: Context) {
|
||||
const id = context.params?.id;
|
||||
|
||||
if (!id) {
|
||||
return {
|
||||
success: false,
|
||||
message: "Id tidak ditemukan",
|
||||
}
|
||||
}
|
||||
|
||||
const {usia18_25, usia26_35, usia36_45, usia46_keatas} = context.body as {
|
||||
usia18_25: string;
|
||||
usia26_35: string;
|
||||
usia36_45: string;
|
||||
usia46_keatas: string;
|
||||
}
|
||||
|
||||
const existing = await prisma.grafikMenganggurBerdasarkanUsia.findUnique({
|
||||
where: {
|
||||
id: id,
|
||||
},
|
||||
})
|
||||
|
||||
if (!existing) {
|
||||
return {
|
||||
success: false,
|
||||
message: "Data tidak ditemukan",
|
||||
}
|
||||
}
|
||||
|
||||
const updated = await prisma.grafikMenganggurBerdasarkanUsia.update({
|
||||
where: {
|
||||
id: id,
|
||||
},
|
||||
data: {
|
||||
usia18_25: usia18_25,
|
||||
usia26_35: usia26_35,
|
||||
usia36_45: usia36_45,
|
||||
usia46_keatas: usia46_keatas,
|
||||
},
|
||||
})
|
||||
|
||||
return {
|
||||
success: true,
|
||||
message: "Data berhasil diupdate",
|
||||
data: updated,
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user