Fix UI Event Dashboard Admin

This commit is contained in:
2025-02-06 11:15:46 +08:00
parent a32588834a
commit f27a900604
3 changed files with 48 additions and 47 deletions

View File

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

View File

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

View File

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