Fix UI Admin
This commit is contained in:
@@ -1,7 +1,10 @@
|
||||
"use client";
|
||||
|
||||
import { Group, Paper, SimpleGrid, Stack, Text, Title } from "@mantine/core";
|
||||
import { Flex, Group, Paper, SimpleGrid, Stack, Text, ThemeIcon, Title } from "@mantine/core";
|
||||
import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
|
||||
import { IconFlag, IconMessageReport, IconUpload } from "@tabler/icons-react";
|
||||
import { AccentColor } from "@/app_modules/_global/color";
|
||||
import { AdminColor } from "@/app_modules/_global/color/color_pallet";
|
||||
|
||||
export default function AdminForum_Main({
|
||||
countPublish,
|
||||
@@ -41,18 +44,21 @@ function ForumMain({
|
||||
name: "Publish",
|
||||
jumlah: countPublish,
|
||||
color: "green",
|
||||
icon: <IconUpload size={18} color="#4CAF4F" />
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Report Posting",
|
||||
jumlah: countLaporanPosting,
|
||||
color: "orange",
|
||||
icon: <IconFlag size={18} color="#FF9800" />
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Report Komentar",
|
||||
jumlah: countLaporanKomentar,
|
||||
color: "red",
|
||||
icon: <IconMessageReport size={18} color="#F44336" />
|
||||
},
|
||||
];
|
||||
return (
|
||||
@@ -69,18 +75,25 @@ function ForumMain({
|
||||
{listBox.map((e, i) => (
|
||||
<Paper
|
||||
key={i}
|
||||
bg={`${e.color}.2`}
|
||||
bg={AdminColor.softBlue}
|
||||
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}>
|
||||
<Text>{e.name}</Text>
|
||||
<Title>{e.jumlah ? e.jumlah : 0}</Title>
|
||||
</Stack>
|
||||
</Group>
|
||||
<Stack spacing={0}>
|
||||
<Text fw={"bold"} c={AccentColor.white}>{e.name}</Text>
|
||||
<Flex align={"center"} justify={"space-between"}>
|
||||
<Title color={AccentColor.white}>{e.jumlah ? e.jumlah : 0}</Title>
|
||||
<ThemeIcon
|
||||
radius={"xl"}
|
||||
size={"md"}
|
||||
color={AccentColor.white}
|
||||
>
|
||||
{e.icon}
|
||||
</ThemeIcon>
|
||||
</Flex>
|
||||
</Stack>
|
||||
</Paper>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
|
||||
@@ -94,7 +94,7 @@ function TablePublish({ listPublish }: { listPublish: any }) {
|
||||
<tr key={i}>
|
||||
<td>
|
||||
<Center w={200}>
|
||||
<Text lineClamp={1}>{e?.Author?.username}</Text>
|
||||
<Text c={AdminColor.white} lineClamp={1}>{e?.Author?.username}</Text>
|
||||
</Center>
|
||||
</td>
|
||||
<td>
|
||||
@@ -126,7 +126,7 @@ function TablePublish({ listPublish }: { listPublish: any }) {
|
||||
</td>
|
||||
<td>
|
||||
<Center w={150}>
|
||||
<Text>
|
||||
<Text c={AdminColor.white}>
|
||||
{new Intl.DateTimeFormat(["id-ID"], { dateStyle: "medium" }).format(
|
||||
e.createdAt
|
||||
)}
|
||||
@@ -135,7 +135,7 @@ function TablePublish({ listPublish }: { listPublish: any }) {
|
||||
</td>
|
||||
<td>
|
||||
<Center w={150}>
|
||||
<Text fw={"bold"} fz={"lg"}>
|
||||
<Text c={AdminColor.white} fw={"bold"} fz={"lg"}>
|
||||
{e?.Forum_Komentar.length}
|
||||
</Text>
|
||||
</Center>
|
||||
@@ -172,7 +172,7 @@ function TablePublish({ listPublish }: { listPublish: any }) {
|
||||
<Stack spacing={"xs"} h={"100%"}>
|
||||
<ComponentAdminGlobal_TitlePage
|
||||
name="Posting"
|
||||
color={AdminColor.green}
|
||||
color={AdminColor.softBlue}
|
||||
component={
|
||||
<TextInput
|
||||
icon={<IconSearch size={20} />}
|
||||
@@ -206,7 +206,7 @@ function TablePublish({ listPublish }: { listPublish: any }) {
|
||||
{isEmpty(data) ? (
|
||||
<ComponentAdminGlobal_IsEmptyData />
|
||||
) : (
|
||||
<Paper p={"md"} withBorder shadow="lg" h={"80vh"}>
|
||||
<Paper p={"md"} bg={AdminColor.softBlue} h={"80vh"}>
|
||||
<ScrollArea w={"100%"} h={"90%"} offsetScrollbars>
|
||||
<Table
|
||||
verticalSpacing={"md"}
|
||||
@@ -214,31 +214,30 @@ function TablePublish({ listPublish }: { listPublish: any }) {
|
||||
p={"md"}
|
||||
w={"100%"}
|
||||
h={"100%"}
|
||||
striped
|
||||
highlightOnHover
|
||||
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<Center>Username</Center>
|
||||
<Center c={AdminColor.white}>Username</Center>
|
||||
</th>
|
||||
<th>
|
||||
<Center>Status</Center>
|
||||
<Center c={AdminColor.white}>Status</Center>
|
||||
</th>
|
||||
<th>
|
||||
<Text>Postingan</Text>
|
||||
<Text c={AdminColor.white}>Postingan</Text>
|
||||
</th>
|
||||
<th>
|
||||
<Center>Tanggal Publish</Center>
|
||||
<Center c={AdminColor.white}>Tanggal Publish</Center>
|
||||
</th>
|
||||
<th>
|
||||
<Center>Komentar Aktif</Center>
|
||||
<Center c={AdminColor.white}>Komentar Aktif</Center>
|
||||
</th>
|
||||
<th>
|
||||
<Center>Total Report Posting</Center>
|
||||
<Center c={AdminColor.white}>Total Report Posting</Center>
|
||||
</th>
|
||||
<th>
|
||||
<Center>Aksi</Center>
|
||||
<Center c={AdminColor.white}>Aksi</Center>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
@@ -98,15 +98,15 @@ function TableView({ listData }: { listData: any }) {
|
||||
<tr key={i}>
|
||||
<td>
|
||||
<Center w={200}>
|
||||
<Text lineClamp={1}>{e?.User.username}</Text>
|
||||
<Text c={AdminColor.white} lineClamp={1}>{e?.User.username}</Text>
|
||||
</Center>
|
||||
</td>
|
||||
<td>
|
||||
<Center w={200}>
|
||||
{e?.forumMaster_KategoriReportId === null ? (
|
||||
<Text>Lainnya</Text>
|
||||
<Text c={AdminColor.white}>Lainnya</Text>
|
||||
) : (
|
||||
<Text lineClamp={1}>{e?.ForumMaster_KategoriReport.title}</Text>
|
||||
<Text c={AdminColor.white} lineClamp={1}>{e?.ForumMaster_KategoriReport.title}</Text>
|
||||
)}
|
||||
</Center>
|
||||
</td>
|
||||
@@ -160,7 +160,7 @@ function TableView({ listData }: { listData: any }) {
|
||||
<Stack spacing={"xs"} h={"100%"}>
|
||||
<ComponentAdminGlobal_TitlePage
|
||||
name="Report Komentar"
|
||||
color={AdminColor.yellow}
|
||||
color={AdminColor.softBlue}
|
||||
component={
|
||||
<TextInput
|
||||
icon={<IconSearch size={20} />}
|
||||
@@ -194,7 +194,7 @@ function TableView({ listData }: { listData: any }) {
|
||||
{isEmpty(data) ? (
|
||||
<ComponentAdminGlobal_IsEmptyData />
|
||||
) : (
|
||||
<Paper p={"md"} withBorder shadow="lg" h={"80vh"}>
|
||||
<Paper p={"md"} bg={AdminColor.softBlue} h={"80vh"}>
|
||||
<ScrollArea w={"100%"} h={"90%"} offsetScrollbars>
|
||||
<Table
|
||||
verticalSpacing={"md"}
|
||||
@@ -202,29 +202,28 @@ function TableView({ listData }: { listData: any }) {
|
||||
p={"md"}
|
||||
w={"100%"}
|
||||
h={"100%"}
|
||||
striped
|
||||
highlightOnHover
|
||||
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<Center>Pelapor</Center>
|
||||
<Center c={AdminColor.white}>Pelapor</Center>
|
||||
</th>
|
||||
|
||||
<th>
|
||||
<Center>Jenis Laporan</Center>
|
||||
<Center c={AdminColor.white}>Jenis Laporan</Center>
|
||||
</th>
|
||||
|
||||
<th>
|
||||
<Text>Komentar</Text>
|
||||
<Text c={AdminColor.white}>Komentar</Text>
|
||||
</th>
|
||||
|
||||
<th>
|
||||
<Center>Tanggal Report</Center>
|
||||
<Center c={AdminColor.white}>Tanggal Report</Center>
|
||||
</th>
|
||||
|
||||
<th>
|
||||
<Center>Aksi</Center>
|
||||
<Center c={AdminColor.white}>Aksi</Center>
|
||||
</th>
|
||||
|
||||
</tr>
|
||||
|
||||
@@ -169,7 +169,7 @@ function TableView({ listData }: { listData: any }) {
|
||||
<Stack spacing={"xs"} h={"100%"}>
|
||||
<ComponentAdminGlobal_TitlePage
|
||||
name="Report Posting"
|
||||
color={AdminColor.orange}
|
||||
color={AdminColor.softBlue}
|
||||
component={
|
||||
<TextInput
|
||||
icon={<IconSearch size={20} />}
|
||||
@@ -205,7 +205,7 @@ function TableView({ listData }: { listData: any }) {
|
||||
{isEmpty(data) ? (
|
||||
<ComponentAdminGlobal_IsEmptyData />
|
||||
) : (
|
||||
<Paper p={"md"} withBorder shadow="lg" h={"80vh"}>
|
||||
<Paper p={"md"} bg={AdminColor.softBlue} h={"80vh"}>
|
||||
<ScrollArea w={"100%"} h={"90%"} offsetScrollbars>
|
||||
<Table
|
||||
verticalSpacing={"md"}
|
||||
@@ -213,32 +213,31 @@ function TableView({ listData }: { listData: any }) {
|
||||
p={"md"}
|
||||
w={"100%"}
|
||||
h={"100%"}
|
||||
striped
|
||||
highlightOnHover
|
||||
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<Center>Pelapor</Center>
|
||||
<Center c={AdminColor.white}>Pelapor</Center>
|
||||
</th>
|
||||
<th>
|
||||
<Center>Jenis Laporan</Center>
|
||||
<Center c={AdminColor.white}>Jenis Laporan</Center>
|
||||
</th>
|
||||
{/* <th>
|
||||
<Center>Author</Center>
|
||||
<Center c={AdminColor.white}>Author</Center>
|
||||
</th>
|
||||
<th>
|
||||
<Text>Postingan</Text>
|
||||
</th> */}
|
||||
<th>
|
||||
<Center w={200}>Status Posting</Center>
|
||||
<Center c={AdminColor.white} w={200}>Status Posting</Center>
|
||||
</th>
|
||||
<th>
|
||||
<Center>Tanggal Report</Center>
|
||||
<Center c={AdminColor.white}>Tanggal Report</Center>
|
||||
</th>
|
||||
|
||||
<th>
|
||||
<Center>Aksi</Center>
|
||||
<Center c={AdminColor.white}>Aksi</Center>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
Reference in New Issue
Block a user