Fix Tampilan UI Collab & Forum

This commit is contained in:
2025-03-06 15:31:47 +08:00
parent 9ac8c41a6f
commit cd64f14f34
9 changed files with 71 additions and 65 deletions

View File

@@ -1,3 +1,4 @@
import { AdminColor } from "@/app_modules/_global/color/color_pallet";
import { MODEL_COLLABORATION } from "@/app_modules/colab/model/interface"; import { MODEL_COLLABORATION } from "@/app_modules/colab/model/interface";
import { Stack, Box, Center, Title, Grid, Text } from "@mantine/core"; import { Stack, Box, Center, Title, Grid, Text } from "@mantine/core";
@@ -11,20 +12,20 @@ export default function ComponentAdminColab_DetailData({
<Stack> <Stack>
<Box> <Box>
<Center px={"md"} mb={"lg"}> <Center px={"md"} mb={"lg"}>
<Title order={4}>{data?.title ? data.title : "Judul Proyek"}</Title> <Title c={AdminColor.white} order={4}>{data?.title ? data.title : "Judul Proyek"}</Title>
</Center> </Center>
<Stack spacing={"sm"}> <Stack spacing={"sm"}>
<Grid> <Grid>
<Grid.Col span={2}> <Grid.Col span={2}>
<Text fw={"bold"} fz={"sm"}> <Text c={AdminColor.white} fw={"bold"} fz={"sm"}>
Industri Industri
</Text> </Text>
</Grid.Col> </Grid.Col>
<Grid.Col span={1}> <Grid.Col span={1}>
<Text fz={"sm"}>:</Text> <Text c={AdminColor.white} fz={"sm"}>:</Text>
</Grid.Col> </Grid.Col>
<Grid.Col span={"auto"}> <Grid.Col span={"auto"}>
<Text fz={"sm"}> <Text c={AdminColor.white} fz={"sm"}>
{data?.ProjectCollaborationMaster_Industri.name {data?.ProjectCollaborationMaster_Industri.name
? data.ProjectCollaborationMaster_Industri.name ? data.ProjectCollaborationMaster_Industri.name
: "Industri"} : "Industri"}
@@ -34,31 +35,31 @@ export default function ComponentAdminColab_DetailData({
<Grid> <Grid>
<Grid.Col span={2}> <Grid.Col span={2}>
<Text fw={"bold"} fz={"sm"}> <Text c={AdminColor.white} fw={"bold"} fz={"sm"}>
Lokasi Lokasi
</Text> </Text>
</Grid.Col> </Grid.Col>
<Grid.Col span={1}> <Grid.Col span={1}>
<Text fz={"sm"}>:</Text> <Text c={AdminColor.white} fz={"sm"}>:</Text>
</Grid.Col> </Grid.Col>
<Grid.Col span={"auto"}> <Grid.Col span={"auto"}>
<Text fz={"sm"} lineClamp={1}> <Text c={AdminColor.white} fz={"sm"} lineClamp={1}>
{data?.lokasi ? data.lokasi : " Lokasi dari proyek"} {data?.lokasi ? data.lokasi : " Lokasi dari proyek"}
</Text> </Text>
</Grid.Col> </Grid.Col>
</Grid> </Grid>
<Stack spacing={5}> <Stack spacing={5}>
<Text fw={"bold"} fz={"sm"}> <Text c={AdminColor.white} fw={"bold"} fz={"sm"}>
Tujuan proyek Tujuan proyek
</Text> </Text>
<Text fz={"sm"}>{data?.purpose ? data?.purpose : "-"}</Text> <Text c={AdminColor.white} fz={"sm"}>{data?.purpose ? data?.purpose : "-"}</Text>
</Stack> </Stack>
<Stack spacing={5}> <Stack spacing={5}>
<Text fw={"bold"} fz={"sm"}> <Text c={AdminColor.white} fw={"bold"} fz={"sm"}>
Keuntungan Keuntungan
</Text> </Text>
<Text fz={"sm"}>{data?.benefit ? data?.benefit : "-"}</Text> <Text c={AdminColor.white} fz={"sm"}>{data?.benefit ? data?.benefit : "-"}</Text>
</Stack> </Stack>
</Stack> </Stack>
</Box> </Box>

View File

@@ -205,6 +205,7 @@ function TableMenu({ listGroup }: { listGroup: any }) {
</Stack> </Stack>
<Modal <Modal
styles={{ body: { backgroundColor: AccentColor.darkblue}}}
opened={openDetail} opened={openDetail}
onClose={() => setOpenDetail(false)} onClose={() => setOpenDetail(false)}
centered centered
@@ -212,26 +213,26 @@ function TableMenu({ listGroup }: { listGroup: any }) {
withCloseButton={false} withCloseButton={false}
> >
<SimpleGrid cols={2}> <SimpleGrid cols={2}>
<Paper bg={"gray.1"} p={"md"} h={500}> <Paper bg={AdminColor.softBlue} p={"md"} h={500}>
<ScrollArea h={"100%"} w={"100%"}> <ScrollArea h={"100%"} w={"100%"}>
<ComponentAdminColab_DetailData <ComponentAdminColab_DetailData
data={detailData?.ProjectCollaboration as any} data={detailData?.ProjectCollaboration as any}
/> />
</ScrollArea> </ScrollArea>
</Paper> </Paper>
<Paper bg={"gray.1"} p={"md"} h={500}> <Paper bg={AdminColor.softBlue} p={"md"} h={500}>
<ScrollArea h={"100%"}> <ScrollArea h={"100%"}>
<Stack> <Stack>
<Center> <Center>
<Title order={4}>Anggota</Title> <Title c={AdminColor.white} order={4}>Anggota</Title>
</Center> </Center>
<Stack> <Stack>
{detailData?.ProjectCollaboration_AnggotaRoomChat?.map( {detailData?.ProjectCollaboration_AnggotaRoomChat?.map(
(e, i) => ( (e, i) => (
<Box key={i}> <Box key={i}>
<Text lineClamp={1}> <Text lineClamp={1}>
<IconCircleDot size={10} />{" "} <IconCircleDot color={AdminColor.white} size={10} />{" "}
<Text span inherit> <Text c={AdminColor.white} span inherit>
{e?.User?.Profile?.name} {e?.User?.Profile?.name}
</Text> </Text>
</Text> </Text>

View File

@@ -265,30 +265,32 @@ function TableMenu({ listData }: { listData: any }) {
{/* Detail Data */} {/* Detail Data */}
<Modal <Modal
styles={{body: { backgroundColor: AdminColor.softBlue}}}
opened={openDetail} opened={openDetail}
onClose={() => setOpenDetail(false)} onClose={() => setOpenDetail(false)}
centered centered
withCloseButton={false} withCloseButton={false}
size={"lg"} size={"lg"}
> >
<Paper p={"md"} bg={"gray.1"}> <Paper p={"md"} bg={AdminColor.softBlue}>
<ComponentAdminColab_DetailData data={detailData as any} /> <ComponentAdminColab_DetailData data={detailData as any} />
</Paper> </Paper>
</Modal> </Modal>
{/* Reject Project */} {/* Reject Project */}
<Modal <Modal
styles={{body: { backgroundColor: AdminColor.softBlue}}}
opened={openReject} opened={openReject}
onClose={() => setOpenReject(false)} onClose={() => setOpenReject(false)}
centered centered
withCloseButton={false} withCloseButton={false}
size={"lg"} size={"lg"}
> >
<Paper p={"md"}> <Paper bg={AdminColor.softBlue} p={"md"}>
<Stack> <Stack>
<Text> <Text c={AdminColor.white}>
Apakah anda yakin ingin mereport project{" "} Apakah anda yakin ingin mereport project{" "}
<Text span inherit fw={"bold"}> <Text c={AdminColor.white} span inherit fw={"bold"}>
{detailData?.title} {detailData?.title}
</Text> </Text>
? ?

View File

@@ -1,5 +1,6 @@
"use client"; "use client";
import { AdminColor } from "@/app_modules/_global/color/color_pallet";
import { MODEL_FORUM_KOMENTAR, MODEL_FORUM_POSTING } from "@/app_modules/forum/model/interface"; import { MODEL_FORUM_KOMENTAR, MODEL_FORUM_POSTING } from "@/app_modules/forum/model/interface";
import { import {
Badge, Badge,
@@ -21,17 +22,17 @@ export default function ComponentAdminForum_ViewOneDetailKomentar({
return ( return (
<> <>
<Stack spacing={"xs"} h={"100%"} w={"50%"}> <Stack spacing={"xs"} h={"100%"} w={"50%"}>
<Paper bg={"gray"} p={"xs"} style={{ borderRadius: "6px" }}> <Paper bg={AdminColor.softBlue} p={"xs"} style={{ borderRadius: "6px" }}>
<Title order={4} c={"white"}> <Title order={4} c={"white"}>
Detail Komentar Detail Komentar
</Title> </Title>
</Paper> </Paper>
<Paper withBorder p={"md"} radius={"md"} shadow="sm"> <Paper p={"md"} radius={"md"} bg={AdminColor.softBlue}>
<Stack> <Stack>
<Stack spacing={5}> <Stack spacing={5}>
<Group position="apart"> <Group position="apart">
<Text fw={"bold"}> <Text fw={"bold"} c={AdminColor.white}>
Username:{" "} Username:{" "}
<Text span inherit> <Text span inherit>
{dataKomentar?.Author?.username} {dataKomentar?.Author?.username}

View File

@@ -38,6 +38,7 @@ import ComponentAdminGlobal_IsEmptyData from "../../_admin_global/is_empty_data"
import { adminForum_getListKomentarById } from "../fun/get/get_list_komentar_by_id"; import { adminForum_getListKomentarById } from "../fun/get/get_list_komentar_by_id";
import AdminGlobal_ComponentBackButton from "../../_admin_global/back_button"; import AdminGlobal_ComponentBackButton from "../../_admin_global/back_button";
import ComponentAdminForum_ViewOneDetailPosting from "../component/detail_one_posting"; import ComponentAdminForum_ViewOneDetailPosting from "../component/detail_one_posting";
import { AdminColor } from "@/app_modules/_global/color/color_pallet";
export default function AdminForum_DetailPosting({ export default function AdminForum_DetailPosting({
listKomentar, listKomentar,
@@ -110,22 +111,22 @@ function TableKomentar({
const rowTable = data?.map((e, i) => ( const rowTable = data?.map((e, i) => (
<tr key={i}> <tr key={i}>
<td> <td>
<Center w={200}> <Center c={AdminColor.white} w={150}>
<Text lineClamp={1}>{e?.Author?.username}</Text> <Text lineClamp={1}>{e?.Author?.username}</Text>
</Center> </Center>
</td> </td>
<td> <td>
<Box w={500}> <Box w={300}>
<Spoiler maxHeight={50} hideLabel="sembunyikan" showLabel="tampilkan"> <Spoiler c={AdminColor.white} maxHeight={50} hideLabel="sembunyikan" showLabel="tampilkan">
<div <div
style={{ textAlign: "center" }} style={{ textAlign: "justify", textJustify: "auto" }}
dangerouslySetInnerHTML={{ __html: e?.komentar }} dangerouslySetInnerHTML={{ __html: e?.komentar }}
/> />
</Spoiler> </Spoiler>
</Box> </Box>
</td> </td>
<td> <td>
<Center w={200}> <Center c={AdminColor.white} w={150}>
<Text> <Text>
{new Intl.DateTimeFormat(["id-ID"], { dateStyle: "medium" }).format( {new Intl.DateTimeFormat(["id-ID"], { dateStyle: "medium" }).format(
e.createdAt e.createdAt
@@ -134,9 +135,9 @@ function TableKomentar({
</Center> </Center>
</td> </td>
<td> <td>
<Center w={100}> <Center w={100}>
<Text <Text
c={e?.Forum_ReportKomentar?.length >= 3 ? "red" : "black"} c={e?.Forum_ReportKomentar?.length >= 3 ? "red" : AdminColor.white}
fw={"bold"} fw={"bold"}
fz={"lg"} fz={"lg"}
> >
@@ -173,7 +174,7 @@ function TableKomentar({
<Stack spacing={"xs"} h={"100%"}> <Stack spacing={"xs"} h={"100%"}>
<Group <Group
position="apart" position="apart"
bg={"gray"} bg={AdminColor.softBlue}
p={"xs"} p={"xs"}
style={{ borderRadius: "6px" }} style={{ borderRadius: "6px" }}
> >
@@ -198,7 +199,7 @@ function TableKomentar({
{_.isEmpty(data) ? ( {_.isEmpty(data) ? (
<ComponentAdminGlobal_IsEmptyData text="Tidak Ada Komentar" /> <ComponentAdminGlobal_IsEmptyData text="Tidak Ada Komentar" />
) : ( ) : (
<Paper p={"md"} withBorder shadow="lg" h={"80vh"}> <Paper p={"md"} bg={AdminColor.softBlue} h={"80vh"}>
<ScrollArea w={"100%"} h={"90%"} offsetScrollbars> <ScrollArea w={"100%"} h={"90%"} offsetScrollbars>
<Table <Table
verticalSpacing={"md"} verticalSpacing={"md"}
@@ -206,25 +207,24 @@ function TableKomentar({
p={"md"} p={"md"}
w={"100%"} w={"100%"}
h={"100%"} h={"100%"}
striped
highlightOnHover
> >
<thead> <thead>
<tr> <tr>
<th> <th>
<Center w={200}>Username</Center> <Center c={AdminColor.white} w={150}>Username</Center>
</th> </th>
<th> <th>
<Center w={500}>Komentar</Center> <Center c={AdminColor.white} w={300}>Komentar</Center>
</th> </th>
<th> <th>
<Center w={200}>Tgl Komentar</Center> <Center c={AdminColor.white} w={150}>Tgl Komentar</Center>
</th> </th>
<th> <th>
<Center w={100}>Total Report</Center> <Center c={AdminColor.white} w={100}>Total Report</Center>
</th> </th>
<th> <th>
<Center w={200}>Aksi</Center> <Center c={AdminColor.white} w={200}>Aksi</Center>
</th> </th>
</tr> </tr>
</thead> </thead>

View File

@@ -36,6 +36,7 @@ import ComponentAdminForum_ViewOneDetailKomentar from "../component/detail_one_k
import { adminForum_funDeleteKomentarById } from "../fun/delete/fun_delete_komentar_by_id"; import { adminForum_funDeleteKomentarById } from "../fun/delete/fun_delete_komentar_by_id";
import { adminForum_getListReportKomentarbyId } from "../fun/get/get_list_report_komentar_by_id"; import { adminForum_getListReportKomentarbyId } from "../fun/get/get_list_report_komentar_by_id";
import adminForum_funGetOneKomentarById from "../fun/get/get_one_komentar_by_id"; import adminForum_funGetOneKomentarById from "../fun/get/get_one_komentar_by_id";
import { AdminColor } from "@/app_modules/_global/color/color_pallet";
export default function AdminForum_HasilReportKomentar({ export default function AdminForum_HasilReportKomentar({
komentarId, komentarId,
@@ -199,12 +200,12 @@ function HasilReportPosting({
const TableRows = data?.map((e, i) => ( const TableRows = data?.map((e, i) => (
<tr key={i}> <tr key={i}>
<td> <td>
<Center w={200}> <Center w={150}>
<Text>{e?.User?.Profile?.name}</Text> <Text>{e?.User?.Profile?.name}</Text>
</Center> </Center>
</td> </td>
<td> <td>
<Center w={200}> <Center w={150}>
<Text> <Text>
{e?.ForumMaster_KategoriReport?.title {e?.ForumMaster_KategoriReport?.title
? e?.ForumMaster_KategoriReport?.title ? e?.ForumMaster_KategoriReport?.title
@@ -214,7 +215,7 @@ function HasilReportPosting({
</td> </td>
<td> <td>
<Center w={500}> <Center w={300}>
<Spoiler maxHeight={50} hideLabel="sembunyikan" showLabel="tampilkan"> <Spoiler maxHeight={50} hideLabel="sembunyikan" showLabel="tampilkan">
{e?.ForumMaster_KategoriReport?.deskripsi ? ( {e?.ForumMaster_KategoriReport?.deskripsi ? (
<Text>{e?.ForumMaster_KategoriReport?.deskripsi}</Text> <Text>{e?.ForumMaster_KategoriReport?.deskripsi}</Text>
@@ -226,7 +227,7 @@ function HasilReportPosting({
</td> </td>
<td> <td>
<Center w={500}> <Center w={300}>
<Spoiler maxHeight={50} hideLabel="sembunyikan" showLabel="tampilkan"> <Spoiler maxHeight={50} hideLabel="sembunyikan" showLabel="tampilkan">
{e?.deskripsi ? <Text>{e?.deskripsi}</Text> : <Text>-</Text>} {e?.deskripsi ? <Text>{e?.deskripsi}</Text> : <Text>-</Text>}
</Spoiler> </Spoiler>
@@ -241,7 +242,7 @@ function HasilReportPosting({
<Stack spacing={"xs"} h={"100%"}> <Stack spacing={"xs"} h={"100%"}>
<Group <Group
position="apart" position="apart"
bg={"red.4"} bg={AdminColor.softBlue}
p={"xs"} p={"xs"}
style={{ borderRadius: "6px" }} style={{ borderRadius: "6px" }}
> >
@@ -261,7 +262,7 @@ function HasilReportPosting({
{_.isEmpty(data) ? ( {_.isEmpty(data) ? (
<ComponentAdminGlobal_IsEmptyData /> <ComponentAdminGlobal_IsEmptyData />
) : ( ) : (
<Paper p={"md"} withBorder shadow="lg" h={"80vh"}> <Paper p={"md"} bg={AdminColor.softBlue} h={"80vh"}>
<ScrollArea w={"100%"} h={"90%"} offsetScrollbars> <ScrollArea w={"100%"} h={"90%"} offsetScrollbars>
<Table <Table
verticalSpacing={"md"} verticalSpacing={"md"}
@@ -269,8 +270,7 @@ function HasilReportPosting({
p={"md"} p={"md"}
w={"100%"} w={"100%"}
h={"100%"} h={"100%"}
striped
highlightOnHover
> >
<thead> <thead>
<tr> <tr>

View File

@@ -178,12 +178,12 @@ function HasilReportPosting({
const TableRows = data?.map((e, i) => ( const TableRows = data?.map((e, i) => (
<tr key={i}> <tr key={i}>
<td> <td>
<Center c={AdminColor.white} w={200}> <Center c={AdminColor.white} w={150}>
<Text>{e?.User?.username}</Text> <Text>{e?.User?.username}</Text>
</Center> </Center>
</td> </td>
<td> <td>
<Center c={AdminColor.white} w={200}> <Center c={AdminColor.white} w={150}>
<Text> <Text>
{e?.ForumMaster_KategoriReport?.title {e?.ForumMaster_KategoriReport?.title
? e?.ForumMaster_KategoriReport?.title ? e?.ForumMaster_KategoriReport?.title
@@ -193,10 +193,10 @@ function HasilReportPosting({
</td> </td>
<td> <td>
<Center c={AdminColor.white} w={500}> <Center c={AdminColor.white} w={300}>
<Spoiler maxHeight={50} hideLabel="sembunyikan" showLabel="tampilkan"> <Spoiler maxHeight={50} hideLabel="sembunyikan" showLabel="tampilkan">
{e?.ForumMaster_KategoriReport?.deskripsi ? ( {e?.ForumMaster_KategoriReport?.deskripsi ? (
<Text>{e?.ForumMaster_KategoriReport?.deskripsi}</Text> <Text style={{textJustify: "auto", textAlign: "justify"}}>{e?.ForumMaster_KategoriReport?.deskripsi}</Text>
) : ( ) : (
<Text>-</Text> <Text>-</Text>
)} )}
@@ -205,9 +205,9 @@ function HasilReportPosting({
</td> </td>
<td> <td>
<Center c={AdminColor.white} w={500}> <Center c={AdminColor.white} w={300}>
<Spoiler maxHeight={50} hideLabel="sembunyikan" showLabel="tampilkan"> <Spoiler maxHeight={50} hideLabel="sembunyikan" showLabel="tampilkan">
{e?.deskripsi ? <Text>{e?.deskripsi}</Text> : <Text>-</Text>} {e?.deskripsi ? <Text style={{textJustify: "auto", textAlign: "justify"}}>{e?.deskripsi}</Text> : <Text>-</Text>}
</Spoiler> </Spoiler>
</Center> </Center>
</td> </td>
@@ -252,16 +252,16 @@ function HasilReportPosting({
<thead> <thead>
<tr> <tr>
<th> <th>
<Center c={AdminColor.white}>Username</Center> <Center w={150} c={AdminColor.white}>Username</Center>
</th> </th>
<th> <th>
<Center c={AdminColor.white}>Kategori</Center> <Center w={150} c={AdminColor.white}>Kategori</Center>
</th> </th>
<th> <th>
<Center c={AdminColor.white}>Deskripsi</Center> <Center w={300} c={AdminColor.white}>Deskripsi</Center>
</th> </th>
<th> <th>
<Center c={AdminColor.white}>Deskripsi Lainnya</Center> <Center w={300} c={AdminColor.white}>Deskripsi Lainnya</Center>
</th> </th>
</tr> </tr>
</thead> </thead>

View File

@@ -110,12 +110,12 @@ function TableView() {
return data?.map((e, i) => ( return data?.map((e, i) => (
<tr key={i}> <tr key={i}>
<td> <td>
<Center w={200}> <Center w={150}>
<Text c={AdminColor.white} lineClamp={1}>{e?.User?.Profile?.name}</Text> <Text c={AdminColor.white} lineClamp={1}>{e?.User?.Profile?.name}</Text>
</Center> </Center>
</td> </td>
<td> <td>
<Center w={200}> <Center w={150}>
{e?.forumMaster_KategoriReportId === null ? ( {e?.forumMaster_KategoriReportId === null ? (
<Text c={AdminColor.white}>Lainnya</Text> <Text c={AdminColor.white}>Lainnya</Text>
) : ( ) : (
@@ -126,8 +126,9 @@ function TableView() {
<td> <td>
<Box w={400}> <Box w={250}>
<Spoiler <Spoiler
style={{ textAlign: "justify", textJustify: "auto"}}
c={AdminColor.white} c={AdminColor.white}
// w={400} // w={400}
maxHeight={60} maxHeight={60}
@@ -238,7 +239,7 @@ function TableView() {
<th> <th>
<Text c={AdminColor.white}>Komentar</Text> <Center c={AdminColor.white}>Komentar</Center>
</th> </th>

View File

@@ -99,12 +99,12 @@ function TableView() {
return data?.map((e, i) => ( return data?.map((e, i) => (
<tr key={i}> <tr key={i}>
<td> <td>
<Center c={AdminColor.white} w={200}> <Center c={AdminColor.white} w={150}>
<Text lineClamp={1}>{e?.User.username}</Text> <Text lineClamp={1}>{e?.User.username}</Text>
</Center> </Center>
</td> </td>
<td> <td>
<Center c={AdminColor.white} w={200}> <Center c={AdminColor.white} w={150}>
{e?.forumMaster_KategoriReportId === null ? ( {e?.forumMaster_KategoriReportId === null ? (
<Text>Lainnya</Text> <Text>Lainnya</Text>
) : ( ) : (
@@ -137,7 +137,7 @@ function TableView() {
</td> */} </td> */}
<td> <td>
<Center w={200}> <Center w={250}>
<Badge <Badge
color={ color={
(e?.Forum_Posting?.ForumMaster_StatusPosting?.id as any) === 1 (e?.Forum_Posting?.ForumMaster_StatusPosting?.id as any) === 1
@@ -244,7 +244,7 @@ function TableView() {
<Text>Postingan</Text> <Text>Postingan</Text>
</th> */} </th> */}
<th> <th>
<Center c={AdminColor.white} w={200}>Status Posting</Center> <Center c={AdminColor.white} w={250}>Status Posting</Center>
</th> </th>
<th> <th>
<Center c={AdminColor.white}>Tanggal Report</Center> <Center c={AdminColor.white}>Tanggal Report</Center>