Merge pull request #252 from bipproduction/Nico/24Jan2025

Nico/24 jan2025

prisma/schema.prisma

@@ -11,6 +11,7 @@ datasource db {
   url      = env("DATABASE_URL")
 }
 
+
 model User {
   id                                   String                                 @id @default(cuid())
   username                             String                                 @unique

src/app/dev/admin/donasi/main/page.tsx

@@ -12,7 +12,6 @@ export default async function Page() {
       <AdminDonasi_Main
         countPublish={countPublish as number}
         countReview={countReview as number}
-        countDraft={countDraft as number}
         countReject={countReject as number}
       />
     </>

src/app/lib/router_hipmi/router_admin.ts

@@ -22,6 +22,7 @@ export const RouterAdminDonasi_OLD = {
   table_publish: "/dev/admin/donasi/table/publish",
   table_review: "/dev/admin/donasi/table/review",
   table_reject: "/dev/admin/donasi/table/reject",
+  table_kategori: "/dev/admin/donasi/table/kategori",
 
   // detail
   detail_publish: "/dev/admin/donasi/detail/publish/",

src/app_modules/admin/_admin_global/_component/comp_admin_modal_publish.tsx

@@ -11,8 +11,6 @@ function Admin_ComponentModalPublish({ onClose, opened, title, buttonKiri, butto
   return (
     <>
       <Modal
-        style={{ fontWeight: "bold" }}
-        fw={"bold"}
         centered
         opened={opened}
         onClose={onClose}

src/app_modules/admin/colab/dashboard/index.tsx

@@ -51,7 +51,7 @@ export default function AdminColab_Dashboard({
           {listStatus.map((e, i) => (
             <Paper
               key={i}
-              bg={"gray.2"}
+              bg={`${e.color}.2`}
               shadow="md"
               radius="md"
               p="md"

src/app_modules/admin/donasi/detail/detail_review.tsx

@@ -24,6 +24,8 @@ import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/noti
 import adminNotifikasi_funCreateToAllUser from "../../notifikasi/fun/create/fun_create_notif_to_all_user";
 import { clientLogger } from "@/util/clientLogger";
 import { apiGetAllUserWithExceptId } from "@/app_modules/_global/lib/api_user";
+import Admin_ComponentModalPublish from "../../_admin_global/_component/comp_admin_modal_publish";
+import { MainColor } from "@/app_modules/_global/color";
 
 export default function AdminDonasi_DetailReview({
   dataReview,
@@ -65,10 +67,11 @@ function ButtonOnHeader({
   const router = useRouter();
   const [isLoadingPublish, setLoadingPublish] = useState(false);
   const [isLoadingReject, setLoadingReject] = useState(false);
-  const [opened, { open, close }] = useDisclosure(false);
+  const [openedPublish, { open: openPublish, close: closePublish }] = useDisclosure(false);
+  const [openedReject, { open: openReject, close: closeReject }] = useDisclosure(false);
   const [catatan, setCatatan] = useState("");
 
-  async function onPulish() {
+  async function onPublish() {
     try {
       setLoadingPublish(true);
       const checkStatus = await donasi_checkStatus({ id: donasi.id });
@@ -210,16 +213,15 @@ function ButtonOnHeader({
         {donasi.donasiMaster_StatusDonasiId === "2" ? (
           <Group>
             <Button
-              loading={isLoadingPublish}
               loaderPosition="center"
               radius={"xl"}
               bg={"green"}
               color="green"
-              onClick={() => onPulish()}
+              onClick={openPublish}
             >
               Publish
             </Button>
-            <Button radius={"xl"} bg={"red"} color="red" onClick={open}>
+            <Button radius={"xl"} bg={"red"} color="red" onClick={openReject}>
               Reject
             </Button>
           </Group>
@@ -230,8 +232,8 @@ function ButtonOnHeader({
       {/* <Divider /> */}
 
       <Admin_ComponentModalReport
-        opened={opened}
+        opened={openedReject}
-        onClose={close}
+        onClose={closeReject}
         title={"Alasan penolakan"}
         onHandlerChange={(val: any) => setCatatan(val.target.value)}
         buttonKiri={
@@ -239,7 +241,7 @@ function ButtonOnHeader({
             <Button
               radius={"xl"}
               onClick={() => {
-                close();
+                closeReject();
               }}
             >
               Batal
@@ -249,6 +251,7 @@ function ButtonOnHeader({
         buttonKanan={
           <>
             <Button
+              bg={MainColor.green}
               loaderPosition="center"
               loading={isLoadingReject ? true : false}
               radius={"xl"}
@@ -269,6 +272,42 @@ function ButtonOnHeader({
           </>
         }
       />
+      <Admin_ComponentModalPublish
+       opened={openedPublish}
+       onClose={closePublish}
+       title={"Anda yakin ingin publish donasi ini?"}
+       buttonKiri={
+         <>
+           <Button
+             radius={"xl"}
+             onClick={() => {
+               closePublish();
+             }}
+           >
+             Batal
+           </Button>
+         </>
+       }
+       buttonKanan={
+         <>
+           <Button
+             bg={MainColor.green}
+             loaderPosition="center"
+             loading={isLoadingPublish ? true : false}
+             radius={"xl"}
+             onClick={() => {
+               onPublish();
+             }}
+           >
+             Simpan
+           </Button>
+         </>
+       }
+      />
+
+
+
+
 
       {/* <Modal
         opened={opened}

src/app_modules/admin/donasi/main/index.tsx

@@ -12,20 +12,23 @@ import {
   Box,
   Group,
   ActionIcon,
+  Flex,
+  ThemeIcon,
 } from "@mantine/core";
-import { IconChevronsRight } from "@tabler/icons-react";
+import { IconAlertTriangle, IconBookmark, IconCategory, IconChevronsRight, IconUpload } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
+import { AccentColor, MainColor } from "@/app_modules/_global/color";
 
 export default function AdminDonasi_Main({
   countPublish,
   countReview,
-  countDraft,
+  
   countReject,
 }: {
   countPublish: number;
   countReview: number;
-  countDraft: number;
+  
   countReject: number;
 }) {
   const router = useRouter();
@@ -35,29 +38,34 @@ export default function AdminDonasi_Main({
       name: "Publish",
       jumlah: countPublish,
       link: RouterAdminDonasi_OLD.table_publish,
-      color: "green",
+      color: MainColor.green,
+      icon: <IconUpload size={18} color="#4CAF4F"/>,
     },
     {
       id: 2,
       name: "Review",
       jumlah: countReview,
       link: RouterAdminDonasi_OLD.table_review,
-      color: "orange",
+      color: MainColor.orange,
+      icon: <IconBookmark size={18}  color="#FF7043"/>
     },
-    // {
-    //   id: 3,
-    //   name: "Draft",
-    //   jumlah: countDraft,
-    //   link: "",
-    //   color: "yellow",
-    // },
     {
-      id: 4,
+      id: 3,
       name: "Reject",
       jumlah: countReject,
       link: RouterAdminDonasi_OLD.table_reject,
-      color: "red",
+      color: MainColor.red,
+      icon: <IconAlertTriangle size={18} color="#FF4B4C" />
     },
+    {
+      id: 4,
+      name: "Kategori",
+      jumlah: 5,
+      link: RouterAdminDonasi_OLD.table_kategori,
+      color: AccentColor.softblue,
+      icon: <IconCategory size={18} color="#007CBA"/>
+
+    }
   ];
   return (
     <>
@@ -76,18 +84,22 @@ export default function AdminDonasi_Main({
           {listBox.map((e, i) => (
             <Paper
               key={i}
-              bg={`${e.color}.2`}
+              bg={e.color}
               shadow="md"
               radius="md"
               p="md"
               // sx={{ borderColor: e.color, borderStyle: "solid" }}
             >
-              <Group position="center">
+                <Stack spacing={0}>
-                <Stack align="center" spacing={0}>
+                <Text c={AccentColor.white} fw={"bold"}>{e.name}</Text>
-                  <Text>{e.name}</Text>
+                <Flex align={"center"} justify={"space-between"}>
-                  <Title>{e.jumlah}</Title>
+                  <Title c={AccentColor.white} fw={"bold"}>{e.jumlah ? e.jumlah : 0}</Title>
+                  <ThemeIcon color={AccentColor.white} radius={"xl"} size={"md"}>
+                    {e.icon}
+                  </ThemeIcon>
+                </Flex>
                 </Stack>
-              </Group>
+              
             </Paper>
           ))}
         </SimpleGrid>

src/app_modules/admin/donasi/sub_menu/table_reject.tsx

@@ -25,6 +25,7 @@ import { useState } from "react";
 import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component";
 import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
 import adminDonasi_getListReject from "../fun/get/get_list_reject";
+import { IconEyeCheck } from "@tabler/icons-react";
 
 export default function AdminDonasi_TableReject({
   dataReject,
@@ -95,7 +96,7 @@ function TableStatus({ dataReject }: { dataReject: any }) {
           <Button
             style={{ backgroundColor: MainColor.green }}
             color={AccentColor.white}
-            leftIcon={<IconEyeEdit />}
+            leftIcon={<IconEyeCheck />}
             radius={"xl"}
             onClick={() =>
               router.push(RouterAdminDonasi_OLD.detail_reject + `${e.id}`)

src/app_modules/admin/donasi/sub_menu/table_review.tsx

@@ -120,10 +120,9 @@ function TableStatus({ listReview }: { listReview: any }) {
           <Button
             loaderPosition="center"
             loading={isLoading && e?.id == idData ? true : false}
-            color={"orange"}
+            style={{ backgroundColor: MainColor.green, color: AccentColor.white }}
             leftIcon={<IconEyeCheck />}
             radius={"xl"}
-            variant="outline"
             onClick={() => {
               setLoading(true);
               setIdData(e?.id);
@@ -146,13 +145,13 @@ function TableStatus({ listReview }: { listReview: any }) {
           color={AdminColor.orange}
           component={
             <TextInput
-            icon={<IconSearch size={20} />}
+              icon={<IconSearch size={20} />}
-            radius={"xl"}
+              radius={"xl"}
-            placeholder="Masukan judul"
+              placeholder="Masukan judul"
-            onChange={(val) => {
+              onChange={(val) => {
-              onSearch(val.currentTarget.value);
+                onSearch(val.currentTarget.value);
-            }}
+              }}
-          />
+            />
           }
         />
         {/* <Group

src/app_modules/admin/event/_view/view_table_review.tsx

@@ -47,6 +47,8 @@ import { AdminEvent_funEditStatusPublishById } from "../fun/edit/fun_edit_status
 import { AdminEvent_funEditCatatanById } from "../fun/edit/fun_edit_status_reject_by_id";
 import { event_checkStatus } from "@/app_modules/event/fun/get/fun_check_status_by_id";
 import { ComponentAdminGlobal_NotifikasiPeringatan } from "../../_admin_global/admin_notifikasi/notifikasi_peringatan";
+import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component";
+import { AdminColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function AdminEvent_ComponentTableReview({
   listData,
@@ -324,7 +326,21 @@ export default function AdminEvent_ComponentTableReview({
   return (
     <>
       <Stack spacing={"xs"} h={"100%"}>
-        <Group
+        <ComponentAdminGlobal_TitlePage
+          name="Review"
+          color={AdminColor.orange}
+          component={
+            <TextInput
+            icon={<IconSearch size={20} />}
+            radius={"xl"}
+            placeholder="Masukan judul"
+            onChange={(val) => {
+              onSearch(val.currentTarget.value);
+            }}
+          />
+          }
+        />
+        {/* <Group
           position="apart"
           bg={"orange.4"}
           p={"xs"}
@@ -339,7 +355,7 @@ export default function AdminEvent_ComponentTableReview({
               onSearch(val.currentTarget.value);
             }}
           />
-        </Group>
+        </Group> */}
 
         <Paper p={"md"} withBorder shadow="lg" h={"80vh"}>
           {isShowReload && (

src/app_modules/admin/event/main/index.tsx

@@ -2,14 +2,17 @@
 
 import { RouterAdminEvent } from "@/app/lib/router_admin/router_admin_event";
 
+import { AccentColor, MainColor } from "@/app_modules/_global/color";
 import {
-  Group,
+  Flex,
   Paper,
   SimpleGrid,
   Stack,
   Text,
+  ThemeIcon,
   Title
 } from "@mantine/core";
+import { IconAlertTriangle, IconBookmark, IconBriefcase, IconHistory, IconUpload } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
 
@@ -36,14 +39,16 @@ export default function AdminEvent_Main({
       name: "Publish",
       jumlah: countPublish,
       path: RouterAdminEvent.table_publish,
-      color: "green",
+      color: MainColor.green,
+      icon: <IconUpload size={18} color="#4CAF4F"/>,
     },
     {
       id: 2,
       name: "Review",
       jumlah: countReview,
       path: RouterAdminEvent.table_review,
-      color: "orange",
+      color: MainColor.orange,
+      icon: <IconBookmark size={18}  color="#FF7043"/>
     },
     // {
     //   id: 3,
@@ -53,28 +58,32 @@ export default function AdminEvent_Main({
     //   color: "yellow",
     // },
     {
-      id: 4,
+      id: 3,
       name: "Reject",
       jumlah: countReject,
       path: RouterAdminEvent.table_reject,
-      color: "red",
+      color: MainColor.red,
+      icon: <IconAlertTriangle size={18} color="#FF4B4C" />
+    },
+    {
+      id: 4,
+      name: "Riwayat Event",
+      jumlah: countRiwayat,
+      path: RouterAdminEvent.table_publish,
+      color: AccentColor.softblue,
+      icon: <IconHistory size={18} color="#007CBA"/>
     },
   ];
 
   const listBox2 = [
+
     {
       id: 1,
-      name: "Riwayat Event",
-      jumlah: countRiwayat,
-      path: RouterAdminEvent.table_publish,
-      color: "gray",
-    },
-    {
-      id: 2,
       name: "Tipe Acara",
       jumlah: countTipeAcara,
       path: RouterAdminEvent.table_publish,
-      color: "gray",
+      color: "#A888E2",
+      icon: <IconBriefcase size={18} color="#A888E2" />
     },
   ];
 
@@ -95,18 +104,23 @@ export default function AdminEvent_Main({
           {listStatus.map((e, i) => (
             <Paper
               key={i}
-              bg={`${e.color}.2`}
+              bg={e.color}
               shadow="md"
               radius="md"
               p="md"
-              // sx={{ borderColor: e.color, borderStyle: "solid" }}
+            // sx={{ borderColor: e.color, borderStyle: "solid" }}
             >
-              <Group position="center">
+
-                <Stack align="center" spacing={0}>
+              <Stack spacing={0}>
-                  <Text>{e.name}</Text>
+                <Text fw={"bold"} color={AccentColor.white}>{e.name}</Text>
-                  <Title>{e.jumlah}</Title>
+                <Flex align={"center"} justify={"space-between"}>
-                </Stack>
+                  <Title c={AccentColor.white}>{e.jumlah}</Title>
-              </Group>
+                  <ThemeIcon radius={"xl"} size={"md"} color={AccentColor.white}>
+                    {e.icon}
+                  </ThemeIcon>
+                </Flex>
+              </Stack>
+
             </Paper>
           ))}
         </SimpleGrid>
@@ -122,18 +136,21 @@ export default function AdminEvent_Main({
           {listBox2.map((e, i) => (
             <Paper
               key={i}
-              bg={`${e.color}.2`}
+              bg={e.color}
               shadow="md"
               radius="md"
               p="md"
-              // sx={{ borderColor: e.color, borderStyle: "solid" }}
+            // sx={{ borderColor: e.color, borderStyle: "solid" }}
             >
-              <Group position="center">
+                <Stack spacing={0}>
-                <Stack align="center" spacing={0}>
+                  <Text fw={"bold"} color={AccentColor.white}>{e.name}</Text>
-                  <Text>{e.name}</Text>
+                  <Flex align={"center"} justify={"space-between"}>
-                  <Title>{e.jumlah}</Title>
+                    <Title c={AccentColor.white}>{e.jumlah}</Title>
+                    <ThemeIcon radius={"xl"} size={"md"} bg={AccentColor.white}>
+                      {e.icon}
+                    </ThemeIcon>
+                  </Flex>
                 </Stack>
-              </Group>
             </Paper>
           ))}
         </SimpleGrid>

src/app_modules/admin/event/table_status/table_publish.tsx

@@ -27,6 +27,7 @@ import QRCode from "react-qr-code";
 import { useShallowEffect } from "@mantine/hooks";
 import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component";
 import { MainColor } from "@/app_modules/_global/color";
+import { AdminColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function AdminEvent_TablePublish({
   listPublish,
@@ -224,7 +225,7 @@ function TableStatus({ listPublish }: { listPublish: any }) {
       <Stack spacing={"xs"} h={"100%"}>
         <ComponentAdminGlobal_TitlePage
           name="Publish"
-          color={MainColor.green}
+          color={AdminColor.green}
           component={
             <TextInput
             icon={<IconSearch size={20} />}

src/app_modules/admin/event/table_status/table_reject.tsx

@@ -28,6 +28,7 @@ import { adminEvent_funGetListReject } from "../fun";
 import { AdminEvent_funEditCatatanById } from "../fun/edit/fun_edit_status_reject_by_id";
 import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component";
 import { MainColor } from "@/app_modules/_global/color";
+import { AdminColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function AdminEvent_TableReject({
   listReject,
@@ -181,7 +182,7 @@ function TableStatus({ listReject }: { listReject: any }) {
       <Stack spacing={"xs"} h={"100%"}>
         <ComponentAdminGlobal_TitlePage
           name="Reject"
-          color={MainColor.red}
+          color={AdminColor.red}
           component={
             <TextInput
             icon={<IconSearch size={20} />}

src/app_modules/admin/forum/main/dashboard.tsx

@@ -69,7 +69,7 @@ function ForumMain({
         {listBox.map((e, i) => (
           <Paper
             key={i}
-            bg={`${"gray"}.2`}
+            bg={`${e.color}.2`}
             shadow="md"
             radius="md"
             p="md"

src/app_modules/admin/investasi/_view/detail/view_daftar_transaksi.tsx

@@ -1,4 +1,4 @@
-import { ComponentAdminGlobal_TampilanRupiah } from "@/app_modules/admin/_admin_global/_component";
+import { ComponentAdminGlobal_TampilanRupiah, ComponentAdminGlobal_TitlePage } from "@/app_modules/admin/_admin_global/_component";
 import {
   MODEL_INVOICE_INVESTASI,
   MODEL_STATUS_INVOICE_INVESTASI,
@@ -165,7 +165,38 @@ export function AdminInvestasi_ViewDaftarTransaksi({
   return (
     <>
       <Stack spacing={"xs"} h={"100%"}>
-        <Group
+        <ComponentAdminGlobal_TitlePage
+          name="Transkasi"
+          color="gray.4"
+          component={<Group>
+            <ActionIcon
+              size={"lg"}
+              radius={"xl"}
+              variant="light"
+              onClick={() => {
+                onReload();
+              }}
+            >
+              <IconReload />
+            </ActionIcon>
+            <Select
+              placeholder="Pilih status"
+              value={selectedStatus}
+              data={
+                isEmpty(listStatsus)
+                  ? []
+                  : listStatsus.map((e) => ({
+                      value: e.id,
+                      label: e.name,
+                    }))
+              }
+              onChange={(val: any) => {
+                onSelected(val);
+              }}
+            />
+          </Group>}
+        />
+        {/* <Group
           position="apart"
           bg={"gray.4"}
           p={"xs"}
@@ -199,7 +230,7 @@ export function AdminInvestasi_ViewDaftarTransaksi({
               }}
             />
           </Group>
-        </Group>
+        </Group> */}
 
         <Paper p={"md"} withBorder shadow="lg" h={"80vh"}>
           <ScrollArea w={"100%"} h={"90%"}>

src/app_modules/admin/job/_view/view_table_review.tsx

@@ -33,6 +33,7 @@ import {
   IconBan,
   IconSearch,
   IconRefresh,
+  IconCircleCheck,
 } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
@@ -44,7 +45,7 @@ import { AdminJob_funEditStatusPublishById } from "../fun/edit/fun_edit_status_p
 import adminJob_getListReview from "../fun/get/get_list_review";
 import { useAtom } from "jotai";
 import { AccentColor } from "@/app_modules/_global/color";
-import { AdminColor } from "@/app_modules/_global/color/color_pallet";
+import { AdminColor, MainColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function AdminJob_ViewTavleReview({
   listReview,
@@ -56,7 +57,7 @@ export default function AdminJob_ViewTavleReview({
   const [nPage, setNPage] = useState(listReview.nPage);
   const [activePage, setActivePage] = useState(1);
   const [isSearch, setSearch] = useState("");
-
+  const [publish, setPublish] = useState(false);
   const [reject, setReject] = useState(false);
   const [jobId, setJobId] = useState("");
   const [isLoading, setIsLoading] = useState(false);
@@ -189,16 +190,13 @@ export default function AdminJob_ViewTavleReview({
           <Stack align="center">
             <Button
               color={"green"}
-              leftIcon={<IconEyeShare />}
+              leftIcon={<IconCircleCheck />}
               radius={"xl"}
-              onClick={() =>
+              onClick={() => {
-                onPublish({
+                setJobId(e?.id);
-                  jobId: e?.id,
+                setPublish(true);
-                  onLoadData(val: any) {
+              }
-                    setData(val.data);
+                
-                    setNPage(val.nPage);
-                  },
-                })
               }
             >
               Publish
@@ -222,6 +220,41 @@ export default function AdminJob_ViewTavleReview({
 
   return (
     <>
+      <Modal
+        title={"Apakah anda yakin ingin mempublish job ini?"}
+        withCloseButton={false}
+        opened={publish}
+        onClose={() => {
+          setPublish(false);
+        }}
+        size={"sm"}
+        centered
+      >
+        <Stack>
+          <Group position="center">
+            <Button radius={"xl"} onClick={() => setPublish(false)}>
+              Batal
+            </Button>
+            <Button
+              style={{ transition: "0.5s", backgroundColor: MainColor.green }}
+              radius={"xl"}
+              onClick={() => {
+                onPublish({
+                  jobId: jobId,
+                  onLoadData(val: any) {
+                    setData(val.data);
+                    setNPage(val.nPage);
+                  },
+                })
+                setPublish(false);
+              }}
+            >
+              Simpan
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
+
       <Modal
         opened={reject}
         onClose={() => {
@@ -252,7 +285,8 @@ export default function AdminJob_ViewTavleReview({
               Batal
             </Button>
             <Button
-              style={{ transition: "0.5s" }}
+              style={{ transition: "0.5s", }}
+              bg={MainColor.green}
               disabled={catatan === "" ? true : false}
               radius={"xl"}
               onClick={() => {
@@ -272,6 +306,7 @@ export default function AdminJob_ViewTavleReview({
           </Group>
         </Stack>
       </Modal>
+      
 
       <Stack spacing={"xs"} h={"100%"}>
         <ComponentAdminGlobal_TitlePage

src/app_modules/donasi/_view/edit/view_edit_kabar.tsx

@@ -21,6 +21,7 @@ import {
   Button,
   Center,
   Image,
+  Skeleton,
   Stack,
   TextInput,
   Textarea,
@@ -32,6 +33,7 @@ import { useState } from "react";
 import { donasi_funUpdateKabar } from "../../fun";
 import { MODEL_DONASI_KABAR } from "../../model/interface";
 import { clientLogger } from "@/util/clientLogger";
+import SkeletonEditDonasi from "../../edit/edit_donasi/skeleton_edit_donasi";
 
 export function Donasi_ViewEditKabar({
   dataKabar,
@@ -104,108 +106,116 @@ export function Donasi_ViewEditKabar({
     } catch (error) {
       setLoading(false);
       clientLogger.error("Error update donasi", error);
+    } finally {
+      setLoading(false);
     }
   }
 
   return (
     <>
       <Stack px={"lg"} pb={"lg"}>
-        <ComponentGlobal_BoxInformation informasi="Gambar tidak wajib di isi ! Hanya upload jika di butuhkan." />
+        {isLoading ? (
+          <SkeletonEditDonasi />
+        ) : (
+          <>
+            <ComponentGlobal_BoxInformation informasi="Gambar tidak wajib di isi ! Hanya upload jika di butuhkan." />
 
-        <TextInput
+            <TextInput
-          maxLength={100}
+              maxLength={100}
-          styles={{
+              styles={{
-            label: {
+                label: {
-              color: "white",
+                  color: "white",
-            },
+                },
-          }}
+              }}
-          label="Judul"
+              label="Judul"
-          withAsterisk
+              withAsterisk
-          placeholder="Masukan judul kabar"
+              placeholder="Masukan judul kabar"
-          value={data.title}
+              value={data.title}
-          onChange={(val) => {
+              onChange={(val) => {
-            setData({
+                setData({
-              ...data,
+                  ...data,
-              title: _.startCase(val.target.value),
+                  title: _.startCase(val.target.value),
-            });
+                });
-          }}
+              }}
-        />
+            />
-        <Textarea
+            <Textarea
-          maxLength={1000}
+              maxLength={1000}
-          styles={{
+              styles={{
-            label: {
+                label: {
-              color: "white",
+                  color: "white",
-            },
+                },
-          }}
+              }}
-          label="Deskripsi"
+              label="Deskripsi"
-          withAsterisk
+              withAsterisk
-          placeholder="Masukan deskripsi kabar"
+              placeholder="Masukan deskripsi kabar"
-          autosize
+              autosize
-          maxRows={10}
+              maxRows={10}
-          minRows={2}
+              minRows={2}
-          value={data.deskripsi}
+              value={data.deskripsi}
-          onChange={(val) => {
+              onChange={(val) => {
-            setData({
+                setData({
-              ...data,
+                  ...data,
-              deskripsi: val.target.value,
+                  deskripsi: val.target.value,
-            });
+                });
-          }}
+              }}
-        />
+            />
-        <ComponentGlobal_InputCountDown
+            <ComponentGlobal_InputCountDown
-          lengthInput={data.deskripsi.length}
+              lengthInput={data.deskripsi.length}
-          maxInput={1000}
+              maxInput={1000}
-        />
-
-        <Stack spacing={5}>
-          <ComponentGlobal_BoxUploadImage>
-            {img ? (
-              <AspectRatio ratio={1 / 1} mt={5} maw={300} mx={"auto"}>
-                <Image
-                  style={{ maxHeight: 250 }}
-                  alt="Foto"
-                  height={250}
-                  src={img}
-                />
-              </AspectRatio>
-            ) : data.imageId === null ? (
-              <Stack justify="center" align="center" h={"100%"}>
-                <IconPhoto size={100} />
-              </Stack>
-            ) : (
-              <Stack justify="center" align="center" h={"100%"} p={"sm"}>
-                <ComponentGlobal_LoadImageCustom
-                  fileId={data.imageId}
-                  height={200}
-                />
-              </Stack>
-            )}
-          </ComponentGlobal_BoxUploadImage>
-
-          {/* Upload Foto */}
-          <Center>
-            <ComponentGlobal_ButtonUploadFileImage
-              onSetFile={setFile}
-              onSetImage={setImg}
             />
-          </Center>
-        </Stack>
 
-        <Button
+            <Stack spacing={5}>
-          style={{
+              <ComponentGlobal_BoxUploadImage>
-            transition: "0.5s",
+                {img ? (
-          }}
+                  <AspectRatio ratio={1 / 1} mt={5} maw={300} mx={"auto"}>
-          disabled={_.values(data).includes("") ? true : false}
+                    <Image
-          radius={"xl"}
+                      style={{ maxHeight: 250 }}
-          mt={"lg"}
+                      alt="Foto"
-          bg={MainColor.yellow}
+                      height={250}
-          color="yellow"
+                      src={img}
-          c={"black"}
+                    />
-          loading={isLoading}
+                  </AspectRatio>
-          loaderPosition="center"
+                ) : data.imageId === null ? (
-          onClick={() => onUpdate()}
+                  <Stack justify="center" align="center" h={"100%"}>
-        >
+                    <IconPhoto size={100} />
-          Simpan
+                  </Stack>
-        </Button>
+                ) : (
+                  <Stack justify="center" align="center" h={"100%"} p={"sm"}>
+                    <ComponentGlobal_LoadImageCustom
+                      fileId={data.imageId}
+                      height={200}
+                    />
+                  </Stack>
+                )}
+              </ComponentGlobal_BoxUploadImage>
+
+              {/* Upload Foto */}
+              <Center>
+                <ComponentGlobal_ButtonUploadFileImage
+                  onSetFile={setFile}
+                  onSetImage={setImg}
+                />
+              </Center>
+            </Stack>
+
+            <Button
+              style={{
+                transition: "0.5s",
+              }}
+              disabled={_.values(data).includes("") ? true : false}
+              radius={"xl"}
+              mt={"lg"}
+              bg={MainColor.yellow}
+              color="yellow"
+              c={"black"}
+              loading={isLoading}
+              loaderPosition="center"
+              onClick={() => onUpdate()}
+            >
+              Simpan
+            </Button>
+          </>
+        )}
       </Stack>
     </>
   );