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

fix responsive admin collaboration

Browse Source
This commit is contained in:
Bagasbanuna02
2025-04-15 11:40:54 +08:00
parent 9311838551
commit 8eb87250b4
12 changed files with 258 additions and 355 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/app/dev/admin/colab/sub-menu/publish/page.tsx
View File

@@ -1,5 +1,4 @@
import { AdminColab_TablePublish } from "@/app_modules/admin/colab";
import adminColab_getListAllPublish from "@/app_modules/admin/colab/fun/get/get_list_all_publish";
export default async function Page() {
return (

1
src/app/dev/admin/colab/sub-menu/reject/page.tsx
View File

@@ -1,5 +1,4 @@
import { AdminColab_TableRejected } from "@/app_modules/admin/colab";
import adminColab_getListAllRejected from "@/app_modules/admin/colab/fun/get/get_list_all_reject";
export default async function Page() {

12
src/app_modules/admin/_components_v3/comp_detail_data.tsx
View File

@@ -1,16 +1,22 @@
import { MainColor } from "@/app_modules/_global/color";
import { Grid, Text } from "@mantine/core";
export function Admin_V3_ComponentDetail({ item }: { item: Record<string, any> }) {
export function Admin_V3_ComponentDetail({
item,
}: {
item: Record<string, any>;
}) {
return (
<>
<Grid m={0} bg={MainColor.soft_darkblue}>
<Grid.Col lg={3} md={3} sm={3} xs={3} span={4}>
<Text fw={"bold"}>{item.title}</Text>
<Text fw={"bold"}>{item.title || item.label}</Text>
</Grid.Col>
<Grid.Col span={"auto"}>
<Text>{item.value}</Text>
<Text>
{item.value}
</Text>
</Grid.Col>
</Grid>
</>

4
src/app_modules/admin/_components_v3/comp_pagination_breakpoint.tsx
View File

@@ -17,7 +17,7 @@ export function Admin_V3_ComponentPaginationBreakpoint({
return (
<>
<Pagination
mt={"xs"}
mt={"xs"}
value={value}
total={total}
onChange={(val) => {
@@ -32,4 +32,4 @@ export function Admin_V3_ComponentPaginationBreakpoint({
/>
</>
);
}
}

4
src/app_modules/admin/_components_v3/comp_simple_grid_breakpoint.tsx
View File

@@ -2,13 +2,15 @@ import { SimpleGrid } from "@mantine/core";
export function Admin_V3_ComponentBreakpoint({
children,
cols
}: {
children: React.ReactNode;
cols?: number;
}) {
return (
<>
<SimpleGrid
cols={2}
cols={cols || 2}
breakpoints={[
{ maxWidth: "sm", cols: 1 },
{ maxWidth: "md", cols: 1 },

10
src/app_modules/admin/_components_v3/comp_skeleton_breakpoint.tsx
View File

@@ -1,7 +1,11 @@
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
import { SimpleGrid } from "@mantine/core";
export function Admin_V3_ComponentSkeletonBreakpoint() {
export function Admin_V3_ComponentSkeletonBreakpoint({
skeletonRequest,
}: {
skeletonRequest?: number;
}) {
return (
<>
<SimpleGrid
@@ -12,7 +16,9 @@ export function Admin_V3_ComponentSkeletonBreakpoint() {
{ maxWidth: "lg", cols: 1 },
]}
>
<CustomSkeleton height={500} width={"100%"} />
{Array.from({ length: skeletonRequest || 1 }, (_, index) => (
<CustomSkeleton key={index} height={500} width={"100%"} />
))}
</SimpleGrid>
</>
);

131
src/app_modules/admin/colab/detail/detail_group.tsx
View File

@@ -22,6 +22,9 @@ import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamp
import { apiGetAdminCollaborationGroupById } from "../lib/api_fetch_admin_collaboration";
import { Admin_ComponentBoxStyle } from "../../_admin_global/_component/comp_admin_boxstyle";
import { IconCaretRight } from "@tabler/icons-react";
import { Admin_V3_ComponentSkeletonBreakpoint } from "../../_components_v3/comp_skeleton_breakpoint";
import { Admin_V3_ComponentBreakpoint } from "../../_components_v3/comp_simple_grid_breakpoint";
import { Admin_V3_ComponentDetail } from "../../_components_v3/comp_detail_data";
function DetailGroup() {
const params = useParams<{ id: string }>();
@@ -84,33 +87,22 @@ function DetailGroup() {
<ComponentAdminGlobal_HeaderTamplate name={`Detail group`} />
<AdminGlobal_ComponentBackButton />
<Grid>
<Grid.Col span={6}>
{!data ? (
<CustomSkeleton height={"50vh"} width={"100%"} />
) : (
<Admin_ComponentBoxStyle
style={{
height: 500,
}}
>
<ScrollArea h={450} scrollbarSize={"md"}>
<Stack spacing={"xs"}>
{listData.map((e, i) => (
<Grid c={"white"} key={i}>
<Grid.Col span={4}>
<Text c={AdminColor.white} fw={"bold"}>
{e.label}
</Text>
</Grid.Col>
<Grid.Col span={1}>:</Grid.Col>
<Grid.Col span={"auto"}>
<Text c={AdminColor.white}>{e.value}</Text>
</Grid.Col>
</Grid>
))}
{!data ? (
<Admin_V3_ComponentSkeletonBreakpoint skeletonRequest={2} />
) : (
<Admin_V3_ComponentBreakpoint>
<Admin_ComponentBoxStyle
style={{
height: 500,
}}
>
<ScrollArea h={450} scrollbarSize={"md"}>
<Stack spacing={"xs"}>
{listData.map((e, i) => (
<Admin_V3_ComponentDetail key={i} item={e}/>
))}
{/* <Group position="center">
{/* <Group position="center">
<Button
mt={"xl"}
radius={"xl"}
@@ -124,52 +116,49 @@ function DetailGroup() {
Reject
</Button>
</Group> */}
</Stack>
</ScrollArea>
</Admin_ComponentBoxStyle>
)}
</Grid.Col>
<Grid.Col span={6}>
{!data ? (
<CustomSkeleton height={"50vh"} width={"100%"} />
) : (
<Admin_ComponentBoxStyle
style={{
height: 500,
}}
>
<Stack>
<Title align="center" order={6}>
Anggota
</Title>
<ScrollArea h={400}>
{data.ProjectCollaboration_AnggotaRoomChat.map((e, i) => (
<Group key={i} align="flex-start" mb={"md"}>
<IconCaretRight />
<Stack spacing={0} w={"70%"}>
<Grid>
<Grid.Col span={3} fw={"bold"}>Username</Grid.Col>
<Grid.Col span={1}>:</Grid.Col>
<Grid.Col span={8}>{e.User.username}</Grid.Col>
</Grid>
<Grid>
<Grid.Col span={3} fw={"bold"}>Name</Grid.Col>
<Grid.Col span={1}>:</Grid.Col>
<Grid.Col span={8}>{e.User.Profile.name}</Grid.Col>
</Grid>
</Stack>
</Group>
))}
</ScrollArea>
</Stack>
</Admin_ComponentBoxStyle>
)}
</Grid.Col>
</Grid>
</ScrollArea>
</Admin_ComponentBoxStyle>
<Admin_ComponentBoxStyle
style={{
height: 500,
}}
>
<Stack>
<Title align="center" order={6}>
Anggota
</Title>
<ScrollArea h={400}>
{data.ProjectCollaboration_AnggotaRoomChat.map((e, i) => (
<Group key={i} align="flex-start" mb={"md"}>
<IconCaretRight />
<Stack spacing={0} w={"70%"}>
<Grid>
<Grid.Col span={3} fw={"bold"}>
Username
</Grid.Col>
<Grid.Col span={1}>:</Grid.Col>
<Grid.Col span={8}>{e.User.username}</Grid.Col>
</Grid>
<Grid>
<Grid.Col span={3} fw={"bold"}>
Name
</Grid.Col>
<Grid.Col span={1}>:</Grid.Col>
<Grid.Col span={8}>{e.User.Profile.name}</Grid.Col>
</Grid>
</Stack>
</Group>
))}
</ScrollArea>
</Stack>
</Admin_ComponentBoxStyle>
</Admin_V3_ComponentBreakpoint>
)}
</Stack>
);
}

56
src/app_modules/admin/colab/detail/detail_publish.tsx
View File

@@ -1,10 +1,12 @@
"use client";
import React, { useState } from "react";
import AdminGlobal_ComponentBackButton from "../../_admin_global/back_button";
import { AdminColor } from "@/app_modules/_global/color/color_pallet";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
import { MODEL_COLLABORATION } from "@/app_modules/colab/model/interface";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
import { clientLogger } from "@/util/clientLogger";
import {
Button,
Flex,
Grid,
Group,
Modal,
@@ -13,20 +15,19 @@ import {
Stack,
Text,
Textarea,
Title,
} from "@mantine/core";
import { useParams, useRouter } from "next/navigation";
import { MODEL_COLLABORATION } from "@/app_modules/colab/model/interface";
import { useShallowEffect } from "@mantine/hooks";
import { clientLogger } from "@/util/clientLogger";
import { apiGetAdminCollaborationById } from "../lib/api_fetch_admin_collaboration";
import { AdminColor } from "@/app_modules/_global/color/color_pallet";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
import { IconCheck, IconFlag2Off } from "@tabler/icons-react";
import { useParams, useRouter } from "next/navigation";
import { useState } from "react";
import { Admin_ComponentBoxStyle } from "../../_admin_global/_component/comp_admin_boxstyle";
import AdminGlobal_ComponentBackButton from "../../_admin_global/back_button";
import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
import adminColab_funReportProjectById from "../fun/edit/fun_report_project_by_id";
import { Admin_ComponentBoxStyle } from "../../_admin_global/_component/comp_admin_boxstyle";
import { apiGetAdminCollaborationById } from "../lib/api_fetch_admin_collaboration";
import { Admin_V3_ComponentSkeletonBreakpoint } from "../../_components_v3/comp_skeleton_breakpoint";
import { Admin_V3_ComponentBreakpoint } from "../../_components_v3/comp_simple_grid_breakpoint";
import { Admin_V3_ComponentDetail } from "../../_components_v3/comp_detail_data";
function DetailPublish() {
const router = useRouter();
@@ -57,7 +58,7 @@ function DetailPublish() {
async function onReject() {
try {
setLoading(true)
setLoading(true);
const response = await adminColab_funReportProjectById({
colabId: params.id,
report: report,
@@ -109,27 +110,16 @@ function DetailPublish() {
<>
<Stack>
<ComponentAdminGlobal_HeaderTamplate name={`Detail publish`} />
<AdminGlobal_ComponentBackButton />
<AdminGlobal_ComponentBackButton />
<SimpleGrid cols={2}>
{!data ? (
<CustomSkeleton height={"50vh"} width={"100%"} />
) : (
{!data ? (
<Admin_V3_ComponentSkeletonBreakpoint />
) : (
<Admin_V3_ComponentBreakpoint >
<Admin_ComponentBoxStyle>
<Stack spacing={"xs"}>
<Stack >
{listData.map((e, i) => (
<Grid c={"white"} key={i}>
<Grid.Col span={4}>
<Text c={AdminColor.white} fw={"bold"}>
{e.label}
</Text>
</Grid.Col>
<Grid.Col span={1}>:</Grid.Col>
<Grid.Col span={"auto"}>
<Text c={AdminColor.white}>{e.value}</Text>
</Grid.Col>
</Grid>
<Admin_V3_ComponentDetail key={i} item={e}/>
))}
<Group position="center">
@@ -148,8 +138,8 @@ function DetailPublish() {
</Group>
</Stack>
</Admin_ComponentBoxStyle>
)}
</SimpleGrid>
</Admin_V3_ComponentBreakpoint>
)}
</Stack>
{/* Reject Project */}

62
src/app_modules/admin/colab/detail/detail_reject.tsx
View File

@@ -27,6 +27,9 @@ import { IconCheck, IconFlag2Off } from "@tabler/icons-react";
import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
import adminColab_funReportProjectById from "../fun/edit/fun_report_project_by_id";
import { Admin_ComponentBoxStyle } from "../../_admin_global/_component/comp_admin_boxstyle";
import { Admin_V3_ComponentBreakpoint } from "../../_components_v3/comp_simple_grid_breakpoint";
import { Admin_V3_ComponentSkeletonBreakpoint } from "../../_components_v3/comp_skeleton_breakpoint";
import { Admin_V3_ComponentDetail } from "../../_components_v3/comp_detail_data";
function DetailReject() {
const router = useRouter();
@@ -55,24 +58,24 @@ function DetailReject() {
}
};
// async function onReject() {
// try {
// setLoading(true);
// const response = await adminColab_funReportProjectById({
// colabId: params.id,
// report: report,
// });
// async function onReject() {
// try {
// setLoading(true);
// const response = await adminColab_funReportProjectById({
// colabId: params.id,
// report: report,
// });
// if (response.status == 200) {
// setLoading(false);
// router.back();
// }
// } catch (error) {
// setLoading(false);
// ComponentGlobal_NotifikasiPeringatan("Gagal Load");
// clientLogger.error("Invalid report collaboration", error);
// }
// }
// if (response.status == 200) {
// setLoading(false);
// router.back();
// }
// } catch (error) {
// setLoading(false);
// ComponentGlobal_NotifikasiPeringatan("Gagal Load");
// clientLogger.error("Invalid report collaboration", error);
// }
// }
const listData = [
{
@@ -115,30 +118,19 @@ function DetailReject() {
<ComponentAdminGlobal_HeaderTamplate name={`Detail reject`} />
<AdminGlobal_ComponentBackButton />
<SimpleGrid cols={2}>
{!data ? (
<CustomSkeleton height={"50vh"} width={"100%"} />
) : (
{!data ? (
<Admin_V3_ComponentSkeletonBreakpoint />
) : (
<Admin_V3_ComponentBreakpoint cols={1}>
<Admin_ComponentBoxStyle>
<Stack spacing={"xs"}>
{listData.map((e, i) => (
<Grid c={"white"} key={i}>
<Grid.Col span={4}>
<Text c={AdminColor.white} fw={"bold"}>
{e.label}
</Text>
</Grid.Col>
<Grid.Col span={1}>:</Grid.Col>
<Grid.Col span={"auto"}>
<Text c={AdminColor.white}>{e.value}</Text>
</Grid.Col>
</Grid>
<Admin_V3_ComponentDetail key={i} item={e}/>
))}
</Stack>
</Admin_ComponentBoxStyle>
)}
</SimpleGrid>
</Admin_V3_ComponentBreakpoint>
)}
</Stack>
</>
);

118
src/app_modules/admin/colab/sub_menu/group.tsx
View File

@@ -1,38 +1,30 @@
"use client";
import {
Stack,
Group,
Title,
Paper,
ScrollArea,
Table,
Center,
Text,
Badge,
Spoiler,
Pagination,
Button,
Modal,
SimpleGrid,
Box,
} from "@mantine/core";
import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
import {
MODEL_COLLABORATION,
MODEL_COLLABORATION_ROOM_CHAT,
} from "@/app_modules/colab/model/interface";
import { IconBan, IconCircleDot, IconEye } from "@tabler/icons-react";
import { useState } from "react";
import adminColab_getOneByColabId from "../fun/get/get_one_by_colab_id";
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
import ComponentAdminColab_DetailData from "../component/detail_data";
import adminColab_getOneRoomChatById from "../fun/get/get_one_room_chat_by_id";
import adminColab_getListAllGroupChat from "../fun/get/get_list_all_group_chat";
import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component";
import { AccentColor } from "@/app_modules/_global/color";
import { AdminColor } from "@/app_modules/_global/color/color_pallet";
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
import { MODEL_COLLABORATION_ROOM_CHAT } from "@/app_modules/colab/model/interface";
import {
Box,
Center,
Modal,
Paper,
ScrollArea,
SimpleGrid,
Stack,
Table,
Text,
Title
} from "@mantine/core";
import { IconCircleDot } from "@tabler/icons-react";
import { useState } from "react";
import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component";
import Admin_DetailButton from "../../_admin_global/_component/button/detail_button";
import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
import { Admin_V3_ComponentPaginationBreakpoint } from "../../_components_v3/comp_pagination_breakpoint";
import ComponentAdminColab_DetailData from "../component/detail_data";
import adminColab_getListAllGroupChat from "../fun/get/get_list_all_group_chat";
import adminColab_getOneRoomChatById from "../fun/get/get_one_room_chat_by_id";
export default function AdminColab_TableGroup({
listGroup,
@@ -84,31 +76,31 @@ function TableMenu({ listGroup }: { listGroup: any }) {
}
const tableRow = data.map((e, i) => (
<tr key={i}>
<td>
<tr key={i} style={{ color: AdminColor.white }}>
{/* <td>
<Center c={AdminColor.white}>{noAwal++}</Center>
</td>
</td> */}
<td>
<Center c={AdminColor.white}>
<Box w={150}>
<Text lineClamp={1}>
{e?.ProjectCollaboration?.Author?.Profile?.name}
</Text>
</Center>
</Box>
</td>
<td>
<Center c={AdminColor.white}>
<Box w={150}>
<Text lineClamp={1}>{e?.name}</Text>
</Center>
</Box>
</td>
<td>
<Center c={AdminColor.white}>
<Box w={150}>
<Text>
{e?.ProjectCollaboration?.ProjectCollaborationMaster_Industri?.name}
</Text>
</Center>
</Box>
</td>
<td>
<Center c={AdminColor.white}>
<Center>
<Text>{e?.ProjectCollaboration_AnggotaRoomChat.length}</Text>
</Center>
</td>
@@ -118,36 +110,6 @@ function TableMenu({ listGroup }: { listGroup: any }) {
<Admin_DetailButton
path={`/dev/admin/colab/detail/group/${e.id}`}
/>
{/* <Button
loading={
idProject === e?.id ? (loadingDetail ? true : false) : false
}
leftIcon={<IconEye />}
loaderPosition="center"
radius={"xl"}
color="green"
onClick={() => {
onDetailData(e?.id);
}}
>
Detail 1
</Button> */}
{/* <Button
// loading={
// idProject === e?.id ? (loadingReject ? true : false) : false
// }
leftIcon={<IconBan />}
loaderPosition="center"
radius={"xl"}
color="red"
// onClick={() => {
// onRejected(e.id);
// }}
>
Reject
</Button> */}
</Stack>
</Center>
</td>
@@ -168,17 +130,17 @@ function TableMenu({ listGroup }: { listGroup: any }) {
<Table verticalSpacing={"xs"} horizontalSpacing={"md"} p={"md"}>
<thead>
<tr>
<th>
{/* <th>
<Center c={AdminColor.white}>No</Center>
</th> */}
<th>
<Text c={AdminColor.white}>Admin Room</Text>
</th>
<th>
<Center c={AdminColor.white}>Admin Room</Center>
<Text c={AdminColor.white}>Nama Group</Text>
</th>
<th>
<Center c={AdminColor.white}>Nama Group</Center>
</th>
<th>
<Center c={AdminColor.white}>Industri</Center>
<Text c={AdminColor.white}>Industri</Text>
</th>
<th>
<Center c={AdminColor.white}>Anggota Group</Center>
@@ -191,8 +153,7 @@ function TableMenu({ listGroup }: { listGroup: any }) {
<tbody>{tableRow}</tbody>
</Table>
</ScrollArea>
<Pagination
position="center"
<Admin_V3_ComponentPaginationBreakpoint
total={isNPage}
value={activePage}
onChange={(val) => {
@@ -246,7 +207,6 @@ function TableMenu({ listGroup }: { listGroup: any }) {
</Paper>
</SimpleGrid>
</Modal>
{/* <pre>{JSON.stringify(detailData, null, 2)}</pre> */}
</>
);
}

100
src/app_modules/admin/colab/sub_menu/publish.tsx
View File

@@ -1,42 +1,31 @@
"use client";
import { AdminColor } from "@/app_modules/_global/color/color_pallet";
import { MODEL_COLLABORATION } from "@/app_modules/colab/model/interface";
import {
Stack,
Box,
Button,
Center,
Group,
Title,
Pagination,
Paper,
ScrollArea,
Stack,
Table,
Center,
Text,
Badge,
Spoiler,
Pagination,
Button,
Modal,
TextInput,
Textarea,
Box,
Title,
} from "@mantine/core";
import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
import { MODEL_COLLABORATION } from "@/app_modules/colab/model/interface";
import { useState } from "react";
import { useDisclosure, useShallowEffect } from "@mantine/hooks";
import adminColab_getListAllPublish from "../fun/get/get_list_all_publish";
import ComponentAdminColab_DetailData from "../component/detail_data";
import adminColab_getOneByColabId from "../fun/get/get_one_by_colab_id";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
import _ from "lodash";
import { IconBan, IconCheck, IconEye } from "@tabler/icons-react";
import adminColab_funReportProjectById from "../fun/edit/fun_report_project_by_id";
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
import { AdminColor } from "@/app_modules/_global/color/color_pallet";
import { useShallowEffect } from "@mantine/hooks";
import { IconEye } from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import { useState } from "react";
import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
import { clientLogger } from "@/util/clientLogger";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
import { apiGetAdminCollaborationPublish } from "../lib/api_fetch_admin_collaboration";
import { RouterAdminColab } from "@/lib/router_admin/router_admin_colab";
import { clientLogger } from "@/util/clientLogger";
import { apiGetAdminCollaborationPublish } from "../lib/api_fetch_admin_collaboration";
import { Admin_V3_ComponentPaginationBreakpoint } from "../../_components_v3/comp_pagination_breakpoint";
export default function AdminColab_TablePublish() {
return (
@@ -65,24 +54,24 @@ function TableMenu() {
try {
const response = await apiGetAdminCollaborationPublish({
page: `${activePage}`,
})
});
if (response?.success && response?.data?.data) {
setData(response.data.data);
setNPage(response.data.nPage || 1);
} else {
console.error("Invalid data format recieved", response);
setData([])
setData([]);
}
} catch (error) {
clientLogger.error("Invalid data table publish", error);
setData([]);
}
}
};
const onPageCLick = (page: number) => {
setActivePage(page);
}
};
const renderTableBody = () => {
if (!Array.isArray(data) || data.length === 0) {
@@ -94,29 +83,32 @@ function TableMenu() {
</Center>
</td>
</tr>
)
);
}
return data.map((e, i) => (
<tr key={i}>
<tr
key={i}
style={{
color: AdminColor.white,
}}
>
<td>
<Center c={AdminColor.white}>
<Text lineClamp={1}>{e?.Author?.Profile?.name}</Text>
</Center>
<Box w={150}>
<Text lineClamp={1}>
{e?.Author?.username}
</Text>
</Box>
</td>
<td>
<Center c={AdminColor.white}>
<Box>
<Center c={AdminColor.white}>
<Text lineClamp={1}>{e?.title}</Text>
</Center>
</Box>
</Center>
<Box w={150}>
<Text lineClamp={1}>{e?.title}</Text>
</Box>
</td>
<td>
<Center c={AdminColor.white}>
<Box w={150}>
<Text>{e?.ProjectCollaborationMaster_Industri.name}</Text>
</Center>
</Box>
</td>
<td>
<Center c={AdminColor.white}>
@@ -143,7 +135,7 @@ function TableMenu() {
</td>
</tr>
));
}
};
// async function onReport() {
// if (report === "")
@@ -184,25 +176,20 @@ function TableMenu() {
{!data ? (
<CustomSkeleton height={"80vh"} width={"100%"} />
) : (
<Paper p={"md"} bg={AdminColor.softBlue} >
<Paper p={"md"} bg={AdminColor.softBlue}>
<Stack>
<ScrollArea h={"65vh"}>
<Table
verticalSpacing={"xs"}
horizontalSpacing={"md"}
p={"md"}
>
<Table verticalSpacing={"xs"} horizontalSpacing={"md"} p={"md"}>
<thead>
<tr>
<th>
<Center c={AdminColor.white}>Username</Center>
<Text c={AdminColor.white}>Username</Text>
</th>
<th>
<Center c={AdminColor.white}>Title</Center>
<Text c={AdminColor.white}>Title</Text>
</th>
<th>
<Center c={AdminColor.white}>Industri</Center>
<Text c={AdminColor.white}>Industri</Text>
</th>
<th>
<Center c={AdminColor.white}>Jumlah Partisipan</Center>
@@ -215,8 +202,7 @@ function TableMenu() {
<tbody>{renderTableBody()}</tbody>
</Table>
</ScrollArea>
<Pagination
position="center"
<Admin_V3_ComponentPaginationBreakpoint
total={isNPage}
value={activePage}
onChange={(val) => {

114
src/app_modules/admin/colab/sub_menu/reject.tsx
View File

@@ -1,31 +1,27 @@
"use client";
import { AdminColor } from "@/app_modules/_global/color/color_pallet";
import { MODEL_COLLABORATION } from "@/app_modules/colab/model/interface";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
import { clientLogger } from "@/util/clientLogger";
import {
Stack,
Box,
Center,
Group,
Title,
Pagination,
Paper,
ScrollArea,
Stack,
Table,
Center,
Text,
Badge,
Spoiler,
Box,
Pagination,
Button,
Title,
} from "@mantine/core";
import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
import { useState } from "react";
import { MODEL_COLLABORATION } from "@/app_modules/colab/model/interface";
import adminColab_getListAllRejected from "../fun/get/get_list_all_reject";
import { AdminColor } from "@/app_modules/_global/color/color_pallet";
import { clientLogger } from "@/util/clientLogger";
import { useShallowEffect } from "@mantine/hooks";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
import { IconEye } from "@tabler/icons-react";
import { apiGetAdminCollaborationReject } from "../lib/api_fetch_admin_collaboration";
import { useState } from "react";
import Admin_DetailButton from "../../_admin_global/_component/button/detail_button";
import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
import { apiGetAdminCollaborationReject } from "../lib/api_fetch_admin_collaboration";
import { Admin_V3_ComponentPaginationBreakpoint } from "../../_components_v3/comp_pagination_breakpoint";
export default function AdminColab_TableRejected() {
return (
@@ -41,35 +37,32 @@ function TableMenu() {
const [data, setData] = useState<MODEL_COLLABORATION[] | null>(null);
const [isNPage, setNPage] = useState<number>(1);
const [activePage, setActivePage] = useState(1);
const [loading, setLoading] = useState(false);
const [idData, setIdData] = useState("");
useShallowEffect(() => {
loadInitialData()
}, [activePage])
loadInitialData();
}, [activePage]);
const loadInitialData = async () => {
try {
const response = await apiGetAdminCollaborationReject({
page: `${activePage}`,
})
});
if (response?.success && response?.data?.data) {
setData(response.data.data);
setNPage(response.data.nPage || 1);
} else {
console.error("Invalid data format recieved", response);
setData([])
setData([]);
}
} catch (error) {
clientLogger.error("Error get data table reject", error);
setData([]);
}
}
};
const onPageClick = (page: number) => {
setActivePage(page);
}
};
const renderTableBody = () => {
if (!Array.isArray(data) || data.length === 0) {
@@ -81,31 +74,27 @@ function TableMenu() {
</Center>
</td>
</tr>
)
);
}
return data.map((e, i) => (
<tr key={i}>
<tr key={i} style={{ color: AdminColor.white }}>
<td>
<Center c={AdminColor.white}>
<Box w={150}>
<Text lineClamp={1}>{e?.Author.username}</Text>
</Center>
</Box>
</td>
<td>
<Center c={AdminColor.white}>
<Box>
<Center c={AdminColor.white}>
<Text lineClamp={1}>{e?.title}</Text>
</Center>
</Box>
</Center>
<Box w={150} c={AdminColor.white}>
<Text lineClamp={1}>{e?.title}</Text>
</Box>
</td>
<td>
<Center c={AdminColor.white}>
<Box w={150} c={AdminColor.white}>
<Text>{e?.ProjectCollaborationMaster_Industri.name}</Text>
</Center>
</Box>
</td>
<td>
@@ -115,25 +104,14 @@ function TableMenu() {
</td>
<td>
<Center>
{/* <Button
loading={loading && e?.id == idData ? true : false}
leftIcon={<IconEye />}
loaderPosition="center"
radius={"xl"}
color="green"
onClick={() => {
setLoading(true);
setIdData(e.id);
}}
>
Detail
</Button> */}
<Admin_DetailButton path={`/dev/admin/colab/detail/reject/${e.id}`} />
<Admin_DetailButton
path={`/dev/admin/colab/detail/reject/${e.id}`}
/>
</Center>
</td>
</tr >
</tr>
));
}
};
return (
<>
<Stack spacing={"xs"}>
@@ -143,7 +121,9 @@ function TableMenu() {
p={"xs"}
style={{ borderRadius: "6px" }}
>
<Title c={AdminColor.white} order={4}>Reject</Title>
<Title c={AdminColor.white} order={4}>
Reject
</Title>
</Group>
{!data ? (
<CustomSkeleton height={"80vh"} width={"100%"} />
@@ -151,22 +131,17 @@ function TableMenu() {
<Paper p={"md"} bg={AdminColor.softBlue}>
<Stack>
<ScrollArea h={"65vh"}>
<Table
verticalSpacing={"lg"}
horizontalSpacing={"md"}
p={"md"}
>
<Table verticalSpacing={"lg"} horizontalSpacing={"md"} p={"md"}>
<thead>
<tr>
<th>
<Center c={AdminColor.white}>Username</Center>
<Text c={AdminColor.white}>Username</Text>
</th>
<th>
<Center c={AdminColor.white}>Title</Center>
<Text c={AdminColor.white}>Title</Text>
</th>
<th>
<Center c={AdminColor.white}>Industri</Center>
<Text c={AdminColor.white}>Industri</Text>
</th>
<th>
<Center c={AdminColor.white}>Jumlah Partisipan</Center>
@@ -179,10 +154,9 @@ function TableMenu() {
<tbody>{renderTableBody()}</tbody>
</Table>
</ScrollArea>
<Pagination
position="center"
total={isNPage}
<Admin_V3_ComponentPaginationBreakpoint
value={activePage}
total={isNPage}
onChange={(val) => {
onPageClick(val);
}}
@@ -193,4 +167,4 @@ function TableMenu() {
</Stack>
</>
);
}
}