UI & API Menu Ekonomi, Submenu Jumlah Penduduk usia yang menganggur

This commit is contained in:
2025-07-08 15:20:26 +08:00
parent bffe648802
commit adcbe3aa3d
30 changed files with 1778 additions and 454 deletions

View File

@@ -1123,19 +1123,19 @@ model PosisiOrganisasi {
}
model Pegawai {
id String @id @default(uuid()) @db.Uuid
namaLengkap String @db.VarChar(255)
gelarAkademik String? @db.VarChar(100)
image FileStorage? @relation(fields: [imageId], references: [id])
imageId String?
tanggalMasuk DateTime? @db.Date
email String? @unique @db.VarChar(255)
telepon String? @db.VarChar(20)
alamat String? @db.Text
posisiId String @db.VarChar(50)
isActive Boolean @default(true)
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
id String @id @default(uuid()) @db.Uuid
namaLengkap String @db.VarChar(255)
gelarAkademik String? @db.VarChar(100)
image FileStorage? @relation(fields: [imageId], references: [id])
imageId String?
tanggalMasuk DateTime? @db.Date
email String? @unique @db.VarChar(255)
telepon String? @db.VarChar(20)
alamat String? @db.Text
posisiId String @db.VarChar(50)
isActive Boolean @default(true)
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
posisi PosisiOrganisasi @relation(fields: [posisiId], references: [id])
@@ -1201,3 +1201,29 @@ model StatistikKemiskinan {
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
// ========================================= JUMLAH PENDUDUK USIA KERJA YANG MENGANGGUR ========================================= //
model GrafikMenganggurBerdasarkanUsia {
id String @id @default(cuid())
usia18_25 String
usia26_35 String
usia36_45 String
usia46_keatas String
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
deletedAt DateTime @default(now())
isActive Boolean @default(true)
}
model GrafikMenganggurBerdasarkanPendidikan {
id String @id @default(cuid())
SD String
SMP String
SMA String
D3 String
S1 String
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
deletedAt DateTime @default(now())
isActive Boolean @default(true)
}

View File

@@ -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>

View 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;

View File

@@ -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;

View File

@@ -0,0 +1,9 @@
import LayoutTabs from "./_lib/layoutTabs";
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<LayoutTabs>
{children}
</LayoutTabs>
);
}

View File

@@ -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>
);
}

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;

View File

@@ -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",

View File

@@ -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

View File

@@ -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,
};
}

View File

@@ -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,
}
}
}

View File

@@ -0,0 +1,8 @@
import prisma from "@/lib/prisma";
export default async function grafikMenganggurBerdasarkanUsiaFindMany() {
const res = await prisma.grafikMenganggurBerdasarkanUsia.findMany();
return {
data: res
}
}

View File

@@ -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 });
}
}

View File

@@ -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;

View File

@@ -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,
};
}

View File

@@ -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,
}
}
}

View File

@@ -0,0 +1,8 @@
import prisma from "@/lib/prisma";
export default async function grafikMenganggurBerdasarkanPendidikanFindMany() {
const res = await prisma.grafikMenganggurBerdasarkanPendidikan.findMany();
return {
data: res
}
}

View File

@@ -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 });
}
}

View File

@@ -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

View File

@@ -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,
}
}

View File

@@ -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,
}
}