From f27a900604e7f6bd7f59d728f6b0c1ba802eb835 Mon Sep 17 00:00:00 2001
From: nico <nicoarya20@gmail.com>
Date: Thu, 6 Feb 2025 11:15:46 +0800
Subject: [PATCH] Fix UI Event Dashboard Admin

---
 src/app_modules/admin/event/child/riwayat.tsx | 40 +++++++++---------
 .../admin/event/child/tipe_acara.tsx          | 14 ++++---
 .../event/table_status/table_publish.tsx      | 41 +++++++++----------
 3 files changed, 48 insertions(+), 47 deletions(-)

diff --git a/src/app_modules/admin/event/child/riwayat.tsx b/src/app_modules/admin/event/child/riwayat.tsx
index 8abcb72d..424e3c78 100644
--- a/src/app_modules/admin/event/child/riwayat.tsx
+++ b/src/app_modules/admin/event/child/riwayat.tsx
@@ -24,6 +24,7 @@ import { useState } from "react";
 import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
 import { apiGetAdminEventRiwayat } from "@/app/dev/admin/event/_lib/api_fecth_admin_event";
 import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { AdminColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function AdminEvent_Riwayat() {
   return (
@@ -112,28 +113,28 @@ function DetailRiwayat() {
         </td>
 
         <td>
-          <Center w={200}>
+          <Center c={AdminColor.white} w={200}>
             <Text>{e?.Author?.username}</Text>
           </Center>
         </td>
         <td>
-          <Center w={200}>
+          <Center c={AdminColor.white} w={200}>
             <Text lineClamp={2}>{e.title}</Text>
           </Center>
         </td>
         <td>
-          <Center w={200}>
+          <Center c={AdminColor.white} w={200}>
             <Text>{e.lokasi}</Text>
           </Center>
         </td>
         <td>
-          <Center w={200}>
+          <Center c={AdminColor.white} w={200}>
             <Text>{e.EventMaster_TipeAcara.name}</Text>
           </Center>
         </td>
 
         <td>
-          <Center w={200}>
+          <Center c={AdminColor.white} w={200}>
             <Text align="center">
               {new Intl.DateTimeFormat("id-ID", {
                 dateStyle: "full",
@@ -148,7 +149,7 @@ function DetailRiwayat() {
           </Center>
         </td>
         <td>
-          <Center w={200}>
+          <Center c={AdminColor.white} w={200}>
             <Text align="center">
               {new Intl.DateTimeFormat("id-ID", {
                 dateStyle: "full",
@@ -164,7 +165,7 @@ function DetailRiwayat() {
         </td>
 
         <td>
-          <Center w={400}>
+          <Center c={AdminColor.white} w={400}>
             <Spoiler
               hideLabel="sembunyikan"
               maxHeight={50}
@@ -183,11 +184,11 @@ function DetailRiwayat() {
       <Stack spacing={"xs"} h={"100%"}>
         <Group
           position="apart"
-          bg={"gray.4"}
+          bg={AdminColor.softBlue}
           p={"xs"}
           style={{ borderRadius: "6px" }}
         >
-          <Title order={4}>Riwayat</Title>
+          <Title c={AdminColor.white} order={4}>Riwayat</Title>
           <TextInput
             icon={<IconSearch size={20} />}
             radius={"xl"}
@@ -201,41 +202,40 @@ function DetailRiwayat() {
         {!data ? (
           <CustomSkeleton height={"80vh"} width="100%" />
         ) : (
-          <Paper p={"md"} withBorder shadow="lg" h={"80vh"}>
+          <Paper p={"md"} bg={AdminColor.softBlue} h={"80vh"}>
             <ScrollArea w={"100%"} h={"90%"}>
               <Table
                 verticalSpacing={"md"}
                 horizontalSpacing={"md"}
                 p={"md"}
                 w={"100%"}
-                striped
-                highlightOnHover
+                
               >
                 <thead>
                   <tr>
                     <th>
-                      <Center>Aksi</Center>
+                      <Center c={AdminColor.white}>Aksi</Center>
                     </th>
                     <th>
-                      <Center>Username</Center>
+                      <Center c={AdminColor.white}>Username</Center>
                     </th>
                     <th>
-                      <Center>Judul</Center>
+                      <Center c={AdminColor.white}>Judul</Center>
                     </th>
                     <th>
-                      <Center>Lokasi</Center>
+                      <Center c={AdminColor.white}>Lokasi</Center>
                     </th>
                     <th>
-                      <Center>Tipe Acara</Center>
+                      <Center c={AdminColor.white}>Tipe Acara</Center>
                     </th>
                     <th>
-                      <Center>Tanggal & Waktu Mulai</Center>
+                      <Center c={AdminColor.white}>Tanggal & Waktu Mulai</Center>
                     </th>
                     <th>
-                      <Center>Tanggal & Waktu Selesai</Center>
+                      <Center c={AdminColor.white}>Tanggal & Waktu Selesai</Center>
                     </th>
                     <th>
-                      <Center>Deskripsi</Center>
+                      <Center c={AdminColor.white}>Deskripsi</Center>
                     </th>
                   </tr>
                 </thead>
diff --git a/src/app_modules/admin/event/child/tipe_acara.tsx b/src/app_modules/admin/event/child/tipe_acara.tsx
index e8bd586c..5175c8bc 100644
--- a/src/app_modules/admin/event/child/tipe_acara.tsx
+++ b/src/app_modules/admin/event/child/tipe_acara.tsx
@@ -28,6 +28,7 @@ import { AdminEvent_getListTipeAcara } from "../fun/get/get_list_tipe_acara";
 import { apiGetAdminEventTipeAcara } from "@/app/dev/admin/event/_lib/api_fecth_admin_event";
 import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import { clientLogger } from "@/util/clientLogger";
+import { AdminColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function AdminEvent_DetailTipeAcara() {
   return (
@@ -92,11 +93,11 @@ function DetailTipeAcara() {
 
       <Group
         position="apart"
-        bg={"gray.4"}
+        bg={AdminColor.softBlue}
         p={"xs"}
         style={{ borderRadius: "6px" }}
       >
-        <Title order={4}>Tipe Acara</Title>
+        <Title c={AdminColor.white} order={4}>Tipe Acara</Title>
         <Button
           leftIcon={<IconCirclePlus />}
           radius={"xl"}
@@ -123,14 +124,14 @@ function DetailTipeAcara() {
           ]}
         >
           <div>
-            <Paper p={"md"} shadow="lg" withBorder>
+            <Paper p={"md"} bg={AdminColor.softBlue}>
               <Stack>
-                <Title order={3}>Tipe Acara Yang Tersedia </Title>
+                <Title c={AdminColor.white} order={3}>Tipe Acara Yang Tersedia </Title>
                 <Stack px={"md"}>
                   {tipe.map((e, i) => (
                     <Stack key={e.id} spacing={"xs"}>
                       <Group position="apart">
-                        <Text>{e.name}</Text>
+                        <Text c={AdminColor.white}>{e.name}</Text>
                         <Group>
                           <ActionIcon
                             variant="transparent"
@@ -202,9 +203,10 @@ function DetailTipeAcara() {
 
           <div>
             {openEditor ? (
-              <Paper p={"sm"} shadow="lg" withBorder>
+              <Paper p={"sm"} bg={AdminColor.softBlue}>
                 <Stack>
                   <TextInput
+                    styles={{ label: { color: AdminColor.white } }}
                     value={edit?.name ? edit?.name : ""}
                     label="Edit Tipe"
                     placeholder="Contoh: Ramah Tamah, dll"
diff --git a/src/app_modules/admin/event/table_status/table_publish.tsx b/src/app_modules/admin/event/table_status/table_publish.tsx
index 61148459..c1502f67 100644
--- a/src/app_modules/admin/event/table_status/table_publish.tsx
+++ b/src/app_modules/admin/event/table_status/table_publish.tsx
@@ -24,6 +24,7 @@ import { useState } from "react";
 import QRCode from "react-qr-code";
 import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component";
 import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
+import { AdminColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function AdminEvent_TablePublish() {
   return (
@@ -135,28 +136,28 @@ function TableStatus() {
           </Center>
         </td>
         <td>
-          <Center w={200}>
+          <Center c={AdminColor.white} w={200}>
             <Text>{e?.Author?.username}</Text>
           </Center>
         </td>
         <td>
-          <Center w={200}>
+          <Center c={AdminColor.white} w={200}>
             <Text lineClamp={2}>{e.title}</Text>
           </Center>
         </td>
         <td>
-          <Center w={200}>
+          <Center c={AdminColor.white} w={200}>
             <Text>{e.lokasi}</Text>
           </Center>
         </td>
         <td>
-          <Center w={200}>
+          <Center c={AdminColor.white} w={200}>
             <Text>{e.EventMaster_TipeAcara?.name}</Text>
           </Center>
         </td>
 
         <td>
-          <Center w={200}>
+          <Center c={AdminColor.white} w={200}>
             <Text align="center">
               {new Intl.DateTimeFormat("id-ID", {
                 dateStyle: "full",
@@ -171,7 +172,7 @@ function TableStatus() {
           </Center>
         </td>
         <td>
-          <Center w={200}>
+          <Center c={AdminColor.white} w={200}>
             <Text align="center">
               {new Intl.DateTimeFormat("id-ID", {
                 dateStyle: "full",
@@ -187,7 +188,7 @@ function TableStatus() {
         </td>
 
         <td>
-          <Center w={400}>
+          <Center c={AdminColor.white} w={400}>
             <Spoiler
               hideLabel="sembunyikan"
               maxHeight={50}
@@ -222,7 +223,7 @@ function TableStatus() {
     <Stack spacing="xs" h="100%">
       <ComponentAdminGlobal_TitlePage
         name="Publish"
-        color="green"
+        color={AdminColor.softBlue}
         component={
           <TextInput
             disabled={!data}
@@ -238,47 +239,45 @@ function TableStatus() {
       {!data ? (
         <CustomSkeleton height={"80vh"} width="100%" />
       ) : (
-        <Paper p="md" withBorder shadow="lg" h="80vh">
+        <Paper p="md" bg={AdminColor.softBlue} h="80vh">
           <ScrollArea w="100%" h="90%">
             <Table
               verticalSpacing="md"
               horizontalSpacing="md"
               p="md"
               w={1500}
-              striped
-              highlightOnHover
             >
               <thead>
                 <tr>
                   <th>
-                    <Center>QR Code</Center>
+                    <Center c={AdminColor.white}>QR Code</Center>
                   </th>
                   <th>
-                    <Center>Download QR</Center>
+                    <Center c={AdminColor.white}>Download QR</Center>
                   </th>
                   <th>
-                    <Center>Username</Center>
+                    <Center c={AdminColor.white}>Username</Center>
                   </th>
                   <th>
-                    <Center>Judul</Center>
+                    <Center c={AdminColor.white}>Judul</Center>
                   </th>
                   <th>
-                    <Center>Lokasi</Center>
+                    <Center c={AdminColor.white}>Lokasi</Center>
                   </th>
                   <th>
-                    <Center>Tipe Acara</Center>
+                    <Center c={AdminColor.white}>Tipe Acara</Center>
                   </th>
                   <th>
-                    <Center>Tanggal & Waktu Mulai</Center>
+                    <Center c={AdminColor.white}>Tanggal & Waktu Mulai</Center>
                   </th>
                   <th>
-                    <Center>Tanggal & Waktu Selesai</Center>
+                    <Center c={AdminColor.white}>Tanggal & Waktu Selesai</Center>
                   </th>
                   <th>
-                    <Center>Deskripsi</Center>
+                    <Center c={AdminColor.white}>Deskripsi</Center>
                   </th>
                   <th>
-                    <Center>Aksi</Center>
+                    <Center c={AdminColor.white}>Aksi</Center>
                   </th>
                 </tr>
               </thead>