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

prisma/schema.prisma

@@ -1123,19 +1123,19 @@ model PosisiOrganisasi {
 }
 
 model Pegawai {
-  id            String    @id @default(uuid()) @db.Uuid
+  id            String       @id @default(uuid()) @db.Uuid
-  namaLengkap   String    @db.VarChar(255)
+  namaLengkap   String       @db.VarChar(255)
-  gelarAkademik String?   @db.VarChar(100)
+  gelarAkademik String?      @db.VarChar(100)
-  image FileStorage? @relation(fields: [imageId], references: [id])
+  image         FileStorage? @relation(fields: [imageId], references: [id])
-  imageId String?
+  imageId       String?
-  tanggalMasuk  DateTime? @db.Date
+  tanggalMasuk  DateTime?    @db.Date
-  email         String?   @unique @db.VarChar(255)
+  email         String?      @unique @db.VarChar(255)
-  telepon       String?   @db.VarChar(20)
+  telepon       String?      @db.VarChar(20)
-  alamat        String?   @db.Text
+  alamat        String?      @db.Text
-  posisiId      String    @db.VarChar(50)
+  posisiId      String       @db.VarChar(50)
-  isActive      Boolean   @default(true)
+  isActive      Boolean      @default(true)
-  createdAt     DateTime  @default(now())
+  createdAt     DateTime     @default(now())
-  updatedAt     DateTime  @updatedAt
+  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)
+}

src/app/admin/(dashboard)/_com/jusulListTab.tsx

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

src/app/admin/(dashboard)/_state/ekonomi/usia-kerja-nganggur.ts

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

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/_lib/layoutTabs.tsx

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

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/layout.tsx

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

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/page.tsx

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

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/[id]/page.tsx

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

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/create/page.tsx

@@ -1,54 +1,111 @@
 'use client'
-import colors from '@/con/colors';
+/* eslint-disable @typescript-eslint/no-unused-vars */
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+/* eslint-disable @typescript-eslint/no-explicit-any */
-import { IconArrowBack } from '@tabler/icons-react';
+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}>
+       <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+         <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25}/>
+           <IconArrowBack size={20} />
-        </Button>
+         </Button>
-      </Box>
+       </Box>
-
+       <Paper bg={colors['white-1']} w={{ base: '100%', md: '50%' }} p={'md'}>
-      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
+         <Stack>
-        <Stack gap={"xs"}>
+           <Title order={3}>Create Grafik Pengangguran Berdasarkan Pendidikan</Title>
-          <Title order={4}>Create Pengangguran Berdasarkan Pendidikan</Title>
+           <TextInput
-          <TextInput
+             label="SD"
-          label={<Text fw={"bold"} fz={"sm"}>Pendidikan SD</Text>}
+             type='number'
-          placeholder='Masukkan pendidikan sd'
+             placeholder="masukkan jumlah"
-          />
+             value={stategrafik.create.form.SD}
-          <TextInput
+             onChange={(val) => {
-          label={<Text fw={"bold"} fz={"sm"}>Pendidikan SMP</Text>}
+               stategrafik.create.form.SD = val.currentTarget.value;
-          placeholder='Masukkan pendidikan smp'
+             }}
-          />
+           />
-          <TextInput
+           <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Pendidikan SMA</Text>}
+             label="SMP"
-          placeholder='Masukkan pendidikan sma'
+             type="number"
-          />
+             placeholder="masukkan jumlah"
-          <TextInput
+             value={stategrafik.create.form.SMP}
-          label={<Text fw={"bold"} fz={"sm"}>Pendidikan S1</Text>}
+             onChange={(val) => {
-          placeholder='Masukkan pendidikan s1'
+               stategrafik.create.form.SMP = val.currentTarget.value;
-          />
+             }}
-          <TextInput
+           />
-          label={<Text fw={"bold"} fz={"sm"}>Pendidikan S2</Text>}
+           <TextInput
-          placeholder='Masukkan pendidikan s2'
+             label="SMA"
-          />
+             type="number"
-          <TextInput
+             placeholder="masukkan jumlah"
-          label={<Text fw={"bold"} fz={"sm"}>Pendidikan S3</Text>}
+             value={stategrafik.create.form.SMA}
-          placeholder='Masukkan pendidikan s3'
+             onChange={(val) => {
-          />
+               stategrafik.create.form.SMA = val.currentTarget.value;
-          <Group>
+             }}
-            <Button bg={colors['blue-button']}>Submit</Button>
+           />
-          </Group>
+           <TextInput
-       </Stack>
+             label="D3"
-      </Paper>
+             type="number"
-   </Box>
+             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;

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/detail/page.tsx

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

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/edit/page.tsx

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

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/page.tsx

@@ -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 { Box, Button, Flex, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
-import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+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() {
+function GrafikBerdasarkanPendidikan() {
-  const router = useRouter();
   return (
-    <Box py={10}>
+    <Box>
-      <Paper bg={colors['white-1']} p={'md'}>
+      <Stack gap={"xs"}>
-       <Stack gap={"xs"}>
+        <Title order={3}>Grafik Pengangguran Berdasarkan Pendidikan</Title>
-       <JudulListTab
+        <ListGrafikBerdasarkanPendidikan />
-          title='Pengangguran Berdasarkan Pendidikan'
+      </Stack>
-          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>
   );
 }
 
-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;

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/[id]/page.tsx

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

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/create/page.tsx

@@ -1,45 +1,101 @@
 'use client'
-import colors from '@/con/colors';
+/* eslint-disable @typescript-eslint/no-unused-vars */
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+/* eslint-disable @typescript-eslint/no-explicit-any */
-import { IconArrowBack } from '@tabler/icons-react';
+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}>
+       <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+         <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25}/>
+           <IconArrowBack size={20} />
-        </Button>
+         </Button>
-      </Box>
+       </Box>
-
+       <Paper bg={colors['white-1']} w={{ base: '100%', md: '50%' }} p={'md'}>
-      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
+         <Stack>
-        <Stack gap={"xs"}>
+           <Title order={3}>Create Grafik Pengangguran Berdasarkan Usia Kerja</Title>
-          <Title order={4}>Create Pengangguran Berdasarkan Usia</Title>
+           <TextInput
-          <TextInput
+             label="Usia 18 - 25"
-          label={<Text fw={"bold"} fz={"sm"}>Usia 18 - 25</Text>}
+             type='number'
-          placeholder='Masukkan usia'
+             placeholder="masukkan jumlah"
-          />
+             value={stategrafik.create.form.usia18_25}
-          <TextInput
+             onChange={(val) => {
-          label={<Text fw={"bold"} fz={"sm"}>Usia 26 - 35</Text>}
+               stategrafik.create.form.usia18_25 = val.currentTarget.value;
-          placeholder='Masukkan usia'
+             }}
-          />
+           />
-          <TextInput
+           <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Usia 36 - 45</Text>}
+             label="Usia 26 - 35"
-          placeholder='Masukkan usia'
+             type="number"
-          />
+             placeholder="masukkan jumlah"
-          <TextInput
+             value={stategrafik.create.form.usia26_35}
-          label={<Text fw={"bold"} fz={"sm"}>Usia 46 +</Text>}
+             onChange={(val) => {
-          placeholder='Masukkan usia'
+               stategrafik.create.form.usia26_35 = val.currentTarget.value;
-          />
+             }}
-          <Group>
+           />
-            <Button bg={colors['blue-button']}>Submit</Button>
+           <TextInput
-          </Group>
+             label="Usia 36 - 45"
-       </Stack>
+             type="number"
-      </Paper>
+             placeholder="masukkan jumlah"
-   </Box>
+             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;

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/detail/page.tsx

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

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/edit/page.tsx

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

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/page.tsx

@@ -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 { Box, Button, Flex, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
-import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+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() {
+function GrafikBerdasarkanUsiaKerjaYangMenganggur() {
-  const router = useRouter();
   return (
-    <Box py={10}>
+    <Box>
-      <Paper bg={colors['white-1']} p={'md'}>
+      <Stack gap={"xs"}>
-       <Stack gap={"xs"}>
+        <Title order={3}>Grafik Pengangguran Berdasarkan Usia Kerja</Title>
-       <JudulListTab
+        <ListGrafikBerdasarkanUsiaKerjaYangMenganggur />
-          title='Pengangguran Berdasarkan Usia'
+      </Stack>
-          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>
   );
 }
 
-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;

src/app/admin/_com/list_PageAdmin.tsx

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

src/app/api/[[...slugs]]/_lib/ekonomi/index.ts

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

src/app/api/[[...slugs]]/_lib/ekonomi/usia-kerja-yang-menganggur/create.ts

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

src/app/api/[[...slugs]]/_lib/ekonomi/usia-kerja-yang-menganggur/del.ts

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

src/app/api/[[...slugs]]/_lib/ekonomi/usia-kerja-yang-menganggur/findMany.ts

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

src/app/api/[[...slugs]]/_lib/ekonomi/usia-kerja-yang-menganggur/findUnique.ts

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

src/app/api/[[...slugs]]/_lib/ekonomi/usia-kerja-yang-menganggur/index.ts

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

src/app/api/[[...slugs]]/_lib/ekonomi/usia-kerja-yang-menganggur/pengangguran-berdasrkan-pendidikan/create.ts

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

src/app/api/[[...slugs]]/_lib/ekonomi/usia-kerja-yang-menganggur/pengangguran-berdasrkan-pendidikan/del.ts

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

src/app/api/[[...slugs]]/_lib/ekonomi/usia-kerja-yang-menganggur/pengangguran-berdasrkan-pendidikan/findMany.ts

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

src/app/api/[[...slugs]]/_lib/ekonomi/usia-kerja-yang-menganggur/pengangguran-berdasrkan-pendidikan/findUnique.ts

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

src/app/api/[[...slugs]]/_lib/ekonomi/usia-kerja-yang-menganggur/pengangguran-berdasrkan-pendidikan/index.ts

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

src/app/api/[[...slugs]]/_lib/ekonomi/usia-kerja-yang-menganggur/pengangguran-berdasrkan-pendidikan/updt.ts

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

src/app/api/[[...slugs]]/_lib/ekonomi/usia-kerja-yang-menganggur/updt.ts

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