wibu/hipmi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix UI Event Dashboard Admin

Browse Source
This commit is contained in:
nico
2025-02-06 11:15:46 +08:00
parent a32588834a
commit f27a900604
3 changed files with 48 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/app_modules/admin/event/child/riwayat.tsx
View File

@@ -24,6 +24,7 @@ import { useState } from "react";
import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate"; import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
import { apiGetAdminEventRiwayat } from "@/app/dev/admin/event/_lib/api_fecth_admin_event"; import { apiGetAdminEventRiwayat } from "@/app/dev/admin/event/_lib/api_fecth_admin_event";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton"; import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
import { AdminColor } from "@/app_modules/_global/color/color_pallet";
export default function AdminEvent_Riwayat() { export default function AdminEvent_Riwayat() {
return ( return (
@@ -112,28 +113,28 @@ function DetailRiwayat() {
</td> </td>
<td> <td>
<Center w={200}> <Center c={AdminColor.white} w={200}>
<Text>{e?.Author?.username}</Text> <Text>{e?.Author?.username}</Text>
</Center> </Center>
</td> </td>
<td> <td>
<Center w={200}> <Center c={AdminColor.white} w={200}>
<Text lineClamp={2}>{e.title}</Text> <Text lineClamp={2}>{e.title}</Text>
</Center> </Center>
</td> </td>
<td> <td>
<Center w={200}> <Center c={AdminColor.white} w={200}>
<Text>{e.lokasi}</Text> <Text>{e.lokasi}</Text>
</Center> </Center>
</td> </td>
<td> <td>
<Center w={200}> <Center c={AdminColor.white} w={200}>
<Text>{e.EventMaster_TipeAcara.name}</Text> <Text>{e.EventMaster_TipeAcara.name}</Text>
</Center> </Center>
</td> </td>
<td> <td>
<Center w={200}> <Center c={AdminColor.white} w={200}>
<Text align="center"> <Text align="center">
{new Intl.DateTimeFormat("id-ID", { {new Intl.DateTimeFormat("id-ID", {
dateStyle: "full", dateStyle: "full",
@@ -148,7 +149,7 @@ function DetailRiwayat() {
</Center> </Center>
</td> </td>
<td> <td>
<Center w={200}> <Center c={AdminColor.white} w={200}>
<Text align="center"> <Text align="center">
{new Intl.DateTimeFormat("id-ID", { {new Intl.DateTimeFormat("id-ID", {
dateStyle: "full", dateStyle: "full",
@@ -164,7 +165,7 @@ function DetailRiwayat() {
</td> </td>
<td> <td>
<Center w={400}> <Center c={AdminColor.white} w={400}>
<Spoiler <Spoiler
hideLabel="sembunyikan" hideLabel="sembunyikan"
maxHeight={50} maxHeight={50}
@@ -183,11 +184,11 @@ function DetailRiwayat() {
<Stack spacing={"xs"} h={"100%"}> <Stack spacing={"xs"} h={"100%"}>
<Group <Group
position="apart" position="apart"
bg={"gray.4"} bg={AdminColor.softBlue}
p={"xs"} p={"xs"}
style={{ borderRadius: "6px" }} style={{ borderRadius: "6px" }}
> >
<Title order={4}>Riwayat</Title> <Title c={AdminColor.white} order={4}>Riwayat</Title>
<TextInput <TextInput
icon={<IconSearch size={20} />} icon={<IconSearch size={20} />}
radius={"xl"} radius={"xl"}
@@ -201,41 +202,40 @@ function DetailRiwayat() {
{!data ? ( {!data ? (
<CustomSkeleton height={"80vh"} width="100%" /> <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%"}> <ScrollArea w={"100%"} h={"90%"}>
<Table <Table
verticalSpacing={"md"} verticalSpacing={"md"}
horizontalSpacing={"md"} horizontalSpacing={"md"}
p={"md"} p={"md"}
w={"100%"} w={"100%"}
striped
highlightOnHover
> >
<thead> <thead>
<tr> <tr>
<th> <th>
<Center>Aksi</Center> <Center c={AdminColor.white}>Aksi</Center>
</th> </th>
<th> <th>
<Center>Username</Center> <Center c={AdminColor.white}>Username</Center>
</th> </th>
<th> <th>
<Center>Judul</Center> <Center c={AdminColor.white}>Judul</Center>
</th> </th>
<th> <th>
<Center>Lokasi</Center> <Center c={AdminColor.white}>Lokasi</Center>
</th> </th>
<th> <th>
<Center>Tipe Acara</Center> <Center c={AdminColor.white}>Tipe Acara</Center>
</th> </th>
<th> <th>
<Center>Tanggal & Waktu Mulai</Center> <Center c={AdminColor.white}>Tanggal & Waktu Mulai</Center>
</th> </th>
<th> <th>
<Center>Tanggal & Waktu Selesai</Center> <Center c={AdminColor.white}>Tanggal & Waktu Selesai</Center>
</th> </th>
<th> <th>
<Center>Deskripsi</Center> <Center c={AdminColor.white}>Deskripsi</Center>
</th> </th>
</tr> </tr>
</thead> </thead>

14
src/app_modules/admin/event/child/tipe_acara.tsx
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 { apiGetAdminEventTipeAcara } from "@/app/dev/admin/event/_lib/api_fecth_admin_event";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton"; import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
import { clientLogger } from "@/util/clientLogger"; import { clientLogger } from "@/util/clientLogger";
import { AdminColor } from "@/app_modules/_global/color/color_pallet";
export default function AdminEvent_DetailTipeAcara() { export default function AdminEvent_DetailTipeAcara() {
return ( return (
@@ -92,11 +93,11 @@ function DetailTipeAcara() {
<Group <Group
position="apart" position="apart"
bg={"gray.4"} bg={AdminColor.softBlue}
p={"xs"} p={"xs"}
style={{ borderRadius: "6px" }} style={{ borderRadius: "6px" }}
> >
<Title order={4}>Tipe Acara</Title> <Title c={AdminColor.white} order={4}>Tipe Acara</Title>
<Button <Button
leftIcon={<IconCirclePlus />} leftIcon={<IconCirclePlus />}
radius={"xl"} radius={"xl"}
@@ -123,14 +124,14 @@ function DetailTipeAcara() {
]} ]}
> >
<div> <div>
<Paper p={"md"} shadow="lg" withBorder> <Paper p={"md"} bg={AdminColor.softBlue}>
<Stack> <Stack>
<Title order={3}>Tipe Acara Yang Tersedia </Title> <Title c={AdminColor.white} order={3}>Tipe Acara Yang Tersedia </Title>
<Stack px={"md"}> <Stack px={"md"}>
{tipe.map((e, i) => ( {tipe.map((e, i) => (
<Stack key={e.id} spacing={"xs"}> <Stack key={e.id} spacing={"xs"}>
<Group position="apart"> <Group position="apart">
<Text>{e.name}</Text> <Text c={AdminColor.white}>{e.name}</Text>
<Group> <Group>
<ActionIcon <ActionIcon
variant="transparent" variant="transparent"
@@ -202,9 +203,10 @@ function DetailTipeAcara() {
<div> <div>
{openEditor ? ( {openEditor ? (
<Paper p={"sm"} shadow="lg" withBorder> <Paper p={"sm"} bg={AdminColor.softBlue}>
<Stack> <Stack>
<TextInput <TextInput
styles={{ label: { color: AdminColor.white } }}
value={edit?.name ? edit?.name : ""} value={edit?.name ? edit?.name : ""}
label="Edit Tipe" label="Edit Tipe"
placeholder="Contoh: Ramah Tamah, dll" placeholder="Contoh: Ramah Tamah, dll"

41
src/app_modules/admin/event/table_status/table_publish.tsx
View File

@@ -24,6 +24,7 @@ import { useState } from "react";
import QRCode from "react-qr-code"; import QRCode from "react-qr-code";
import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component"; import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component";
import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate"; import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
import { AdminColor } from "@/app_modules/_global/color/color_pallet";
export default function AdminEvent_TablePublish() { export default function AdminEvent_TablePublish() {
return ( return (
@@ -135,28 +136,28 @@ function TableStatus() {
</Center> </Center>
</td> </td>
<td> <td>
<Center w={200}> <Center c={AdminColor.white} w={200}>
<Text>{e?.Author?.username}</Text> <Text>{e?.Author?.username}</Text>
</Center> </Center>
</td> </td>
<td> <td>
<Center w={200}> <Center c={AdminColor.white} w={200}>
<Text lineClamp={2}>{e.title}</Text> <Text lineClamp={2}>{e.title}</Text>
</Center> </Center>
</td> </td>
<td> <td>
<Center w={200}> <Center c={AdminColor.white} w={200}>
<Text>{e.lokasi}</Text> <Text>{e.lokasi}</Text>
</Center> </Center>
</td> </td>
<td> <td>
<Center w={200}> <Center c={AdminColor.white} w={200}>
<Text>{e.EventMaster_TipeAcara?.name}</Text> <Text>{e.EventMaster_TipeAcara?.name}</Text>
</Center> </Center>
</td> </td>
<td> <td>
<Center w={200}> <Center c={AdminColor.white} w={200}>
<Text align="center"> <Text align="center">
{new Intl.DateTimeFormat("id-ID", { {new Intl.DateTimeFormat("id-ID", {
dateStyle: "full", dateStyle: "full",
@@ -171,7 +172,7 @@ function TableStatus() {
</Center> </Center>
</td> </td>
<td> <td>
<Center w={200}> <Center c={AdminColor.white} w={200}>
<Text align="center"> <Text align="center">
{new Intl.DateTimeFormat("id-ID", { {new Intl.DateTimeFormat("id-ID", {
dateStyle: "full", dateStyle: "full",
@@ -187,7 +188,7 @@ function TableStatus() {
</td> </td>
<td> <td>
<Center w={400}> <Center c={AdminColor.white} w={400}>
<Spoiler <Spoiler
hideLabel="sembunyikan" hideLabel="sembunyikan"
maxHeight={50} maxHeight={50}
@@ -222,7 +223,7 @@ function TableStatus() {
<Stack spacing="xs" h="100%"> <Stack spacing="xs" h="100%">
<ComponentAdminGlobal_TitlePage <ComponentAdminGlobal_TitlePage
name="Publish" name="Publish"
color="green" color={AdminColor.softBlue}
component={ component={
<TextInput <TextInput
disabled={!data} disabled={!data}
@@ -238,47 +239,45 @@ function TableStatus() {
{!data ? ( {!data ? (
<CustomSkeleton height={"80vh"} width="100%" /> <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%"> <ScrollArea w="100%" h="90%">
<Table <Table
verticalSpacing="md" verticalSpacing="md"
horizontalSpacing="md" horizontalSpacing="md"
p="md" p="md"
w={1500} w={1500}
striped
highlightOnHover
> >
<thead> <thead>
<tr> <tr>
<th> <th>
<Center>QR Code</Center> <Center c={AdminColor.white}>QR Code</Center>
</th> </th>
<th> <th>
<Center>Download QR</Center> <Center c={AdminColor.white}>Download QR</Center>
</th> </th>
<th> <th>
<Center>Username</Center> <Center c={AdminColor.white}>Username</Center>
</th> </th>
<th> <th>
<Center>Judul</Center> <Center c={AdminColor.white}>Judul</Center>
</th> </th>
<th> <th>
<Center>Lokasi</Center> <Center c={AdminColor.white}>Lokasi</Center>
</th> </th>
<th> <th>
<Center>Tipe Acara</Center> <Center c={AdminColor.white}>Tipe Acara</Center>
</th> </th>
<th> <th>
<Center>Tanggal & Waktu Mulai</Center> <Center c={AdminColor.white}>Tanggal & Waktu Mulai</Center>
</th> </th>
<th> <th>
<Center>Tanggal & Waktu Selesai</Center> <Center c={AdminColor.white}>Tanggal & Waktu Selesai</Center>
</th> </th>
<th> <th>
<Center>Deskripsi</Center> <Center c={AdminColor.white}>Deskripsi</Center>
</th> </th>
<th> <th>
<Center>Aksi</Center> <Center c={AdminColor.white}>Aksi</Center>
</th> </th>
</tr> </tr>
</thead> </thead>