Fix tampilan dashboard admin donasi & event

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/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/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/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" }}
             >
-              <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"}>
+                  <Title c={AccentColor.white}>{e.jumlah}</Title>
+                  <ThemeIcon radius={"xl"} size={"md"} color={AccentColor.white}>
+                    {e.icon}
+                  </ThemeIcon>
+                </Flex>
               </Stack>
-              </Group>
+
             </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" }}
             >
-              <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_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/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,12 +106,18 @@ export function Donasi_ViewEditKabar({
     } catch (error) {
       setLoading(false);
       clientLogger.error("Error update donasi", error);
+    } finally {
+      setLoading(false);
     }
   }
 
   return (
     <>
       <Stack px={"lg"} pb={"lg"}>
+        {isLoading ? (
+          <SkeletonEditDonasi />
+        ) : (
+          <>
             <ComponentGlobal_BoxInformation informasi="Gambar tidak wajib di isi ! Hanya upload jika di butuhkan." />
 
             <TextInput
@@ -206,6 +214,8 @@ export function Donasi_ViewEditKabar({
             >
               Simpan
             </Button>
+          </>
+        )}
       </Stack>
     </>
   );