Kebutuhan Deploy

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan/[uuid]/page.tsx

@@ -11,15 +11,15 @@ import { useProxy } from 'valtio/utils';
 
 function EditGrafikHasilKepuasan() {
   const router = useRouter()
-  const params = useParams() as { id: string }
+  const params = useParams() as { uuid: string }
   const stateGrafikKepuasan = useProxy(grafikkepuasan)
 
-  const id = params.id
+  const uuid = params.uuid
 
   // Load data saat komponen mount
   useEffect(() => {
-    if (id) {
-      stateGrafikKepuasan.findUnique.load(id).then(() => {
+    if (uuid) {
+      stateGrafikKepuasan.findUnique.load(uuid).then(() => {
         const data = stateGrafikKepuasan.findUnique.data
         if (data) {
           stateGrafikKepuasan.update.form = {
@@ -29,11 +29,11 @@ function EditGrafikHasilKepuasan() {
         }
       })
     }
-  }, [id])
+  }, [uuid])
 
   const handleSubmit = async () => {
     // Set the ID before submitting
-    stateGrafikKepuasan.update.id = id;
+    stateGrafikKepuasan.update.uuid = uuid;
     await stateGrafikKepuasan.update.submit();
     router.push('/admin/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan')
   }

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan/page.tsx

@@ -45,7 +45,7 @@ function GrafikHasilKepuasanMasyarakat() {
     setMounted(true);
     if (stateGrafikKepuasan.findMany.data) {
       setChartData(stateGrafikKepuasan.findMany.data.map((item) => ({
-        id: item.id,
+        id: item.uuid,
         label: item.label,
         jumlah: Number(item.jumlah),
       })));
@@ -82,11 +82,11 @@ function GrafikHasilKepuasanMasyarakat() {
             </TableThead>
             <TableTbody>
               {stateGrafikKepuasan.findMany.data?.map((item) => (
-                <TableTr key={item.id}>
+                <TableTr key={item.uuid}>
                   <TableTd>{item.label}</TableTd>
                   <TableTd>{item.jumlah}</TableTd>
                   <TableTd>
-                    <Button color='green' onClick={() => router.push(`/admin/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan/${item.id}`)}>
+                    <Button color='green' onClick={() => router.push(`/admin/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan/${item.uuid}`)}>
                       <IconEdit size={20} />
                     </Button>
                   </TableTd>
@@ -95,7 +95,7 @@ function GrafikHasilKepuasanMasyarakat() {
                       color='red'
                       disabled={stateGrafikKepuasan.delete.loading}
                       onClick={() => {
-                        setSelectedId(item.id)
+                        setSelectedId(item.uuid)
                         setModalHapus(true)
                       }}>
                       <IconTrash size={20} />

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/[uuid]/page.tsx

@@ -7,38 +7,51 @@ 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 { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
 function EditPersentaseDataKelahiranKematian() {
   const router = useRouter()
-  const params = useParams() as { id: string }
+  const params = useParams() as { uuid: string }
   const statePresentase = useProxy(persentasekelahiran)
 
-  const id = params.id
+  const id = params.uuid
 
   // Load data saat komponen mount
-  useEffect(() => {
-    if (id) {
-      statePresentase.findUnique.load(id).then(() => {
-        const data = statePresentase.findUnique.data
-        if (data) {
-          statePresentase.update.form = {
-            tahun: data.tahun || '',
-            kematianKasar: data.kematianKasar || '',
-            kelahiranKasar: data.kelahiranKasar || '',
-            kematianBayi: data.kematianBayi || '',
-          }
-        }
-      })
-    }
-  }, [id])
+// Di file page.tsx, ubah useEffect-nya menjadi:
+useEffect(() => {
+  if (!id) return;
+  statePresentase.update.uuid = id;
+  statePresentase.findUnique.load(id)
+    .then(() => {
+      const data = statePresentase.findUnique.data;
+      if (data) {
+        statePresentase.update.form = {
+          tahun: String(data.tahun || ''),
+          kematianKasar: String(data.kematianKasar || ''),
+          kelahiranKasar: String(data.kelahiranKasar || ''),
+          kematianBayi: String(data.kematianBayi || '')
+        };
+      }
+    })
+    .catch(error => {
+      console.error('Error loading data:', error);
+      toast.error('Gagal memuat data');
+    });
+}, [id]);
 
-  const handleSubmit = async () => {
-    // Set the ID before submitting
-    statePresentase.update.id = id;
+// Di handleSubmit, ubah menjadi:
+const handleSubmit = async () => {
+  try {
+    statePresentase.update.uuid = id;
     await statePresentase.update.submit();
-    router.push('/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian')
+    toast.success('Data berhasil diperbarui');
+    router.push('/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian');
+  } catch (error) {
+    console.error('Error updating data:', error);
+    toast.error('Gagal memperbarui data');
   }
+};
 
   return (
     <Box>

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/page.tsx

@@ -13,7 +13,7 @@ import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 
 function PersentaseDataKelahiranKematian() {
   type PDKMGrafik = {
-    id: string;
+    uuid: string;
     tahun: string;
     kematianKasar: number;
     kematianBayi: number;
@@ -47,7 +47,7 @@ function PersentaseDataKelahiranKematian() {
     setMounted(true);
     if (statePersentase.findMany.data) {
       setChartData(statePersentase.findMany.data.map((item) => ({
-        id: item.id,
+        uuid: item.uuid,
         tahun: item.tahun,
         kematianKasar: Number(item.kematianKasar),
         kematianBayi: Number(item.kematianBayi),
@@ -88,13 +88,13 @@ function PersentaseDataKelahiranKematian() {
             </TableThead>
             <TableTbody>
               {statePersentase.findMany.data?.map((item) => (
-                <TableTr key={item.id}>
+                <TableTr key={item.uuid}>
                   <TableTd>{item.tahun}</TableTd>
                   <TableTd>{item.kematianKasar}</TableTd>
                   <TableTd>{item.kematianBayi}</TableTd>
                   <TableTd>{item.kelahiranKasar}</TableTd>
                   <TableTd>
-                    <Button color='green' onClick={() => router.push(`/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/${item.id}`)}>
+                    <Button color='green' onClick={() => router.push(`/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/${item.uuid}`)}>
                       <IconEdit size={20} />
                     </Button>
                   </TableTd>
@@ -103,7 +103,7 @@ function PersentaseDataKelahiranKematian() {
                       color='red'
                       disabled={statePersentase.delete.loading}
                       onClick={() => {
-                        setSelectedId(item.id)
+                        setSelectedId(item.uuid)
                         setModalHapus(true)
                       }}>
                       <IconTrash size={20} />