fix responsive admin voting

deskripsi: - fix responsive table admin
2025-04-17 15:07:40 +08:00
parent 4f8cab3190
commit 1d902a3f2d
5 changed files with 95 additions and 111 deletions
--- a/src/app_modules/admin/forum/component/detail_one_posting.tsx
+++ b/src/app_modules/admin/forum/component/detail_one_posting.tsx
@@ -22,6 +22,7 @@ export default function ComponentAdminForum_ViewOneDetailPosting({
 }) {
  return (
    <>
+      <Admin_V3_ComponentBreakpoint cols={2}>
        <Paper p={"md"} radius={"md"} bg={AdminColor.softBlue} shadow="sm">
          <Stack>
            <Stack spacing={5}>
@@ -29,7 +30,7 @@ export default function ComponentAdminForum_ViewOneDetailPosting({
                <Text c={AdminColor.white} fw={"bold"}>
                  Username:{" "}
                  <Text span inherit lineClamp={1}>
-                    {dataPosting?.Author?.username} 
+                    {dataPosting?.Author?.username}
                  </Text>
                </Text>

@@ -64,8 +65,7 @@ export default function ComponentAdminForum_ViewOneDetailPosting({
            </Box>
          </Stack>
        </Paper>
-      {/* <Admin_V3_ComponentBreakpoint>
-      </Admin_V3_ComponentBreakpoint> */}
+      </Admin_V3_ComponentBreakpoint>
    </>
  );
 }
--- a/src/app_modules/admin/vote/child/riwayat/index.tsx
+++ b/src/app_modules/admin/vote/child/riwayat/index.tsx
@@ -3,28 +3,27 @@
 import ComponentAdminGlobal_HeaderTamplate from "@/app_modules/admin/_admin_global/header_tamplate";
 import { MODEL_VOTING } from "@/app_modules/vote/model/interface";
 import {
-  Box,
-  Button,
  Center,
  Modal,
  Pagination,
  Paper,
  ScrollArea,
-  Spoiler,
  Stack,
  Table,
  Text,
  TextInput,
 } from "@mantine/core";
 import { useDisclosure, useShallowEffect } from "@mantine/hooks";
-import { IconReportAnalytics, IconSearch } from "@tabler/icons-react";
+import { IconSearch } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";

 import { AccentColor } from "@/app_modules/_global/color";
 import { AdminColor } from "@/app_modules/_global/color/color_pallet";
 import { ComponentAdminGlobal_TitlePage } from "@/app_modules/admin/_admin_global/_component";
+import Admin_DetailButton from "@/app_modules/admin/_admin_global/_component/button/detail_button";
 import ComponentAdminGlobal_IsEmptyData from "@/app_modules/admin/_admin_global/is_empty_data";
 import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { RouterAdminVote } from "@/lib/router_admin/router_admin_vote";
 import { clientLogger } from "@/util/clientLogger";
 import _ from "lodash";
 import { useState } from "react";
@@ -32,8 +31,7 @@ import ComponentAdminVote_DetailHasil from "../../component/detail_hasil";
 import { AdminVote_getHasilById } from "../../fun/get/get_hasil_by_id";
 import { AdminVote_getListKontributorById } from "../../fun/get/get_list_kontributor_by_id";
 import { apiGetAdminVotingRiwayat } from "../../lib/api_fetch_admin_voting";
-import Admin_DetailButton from "@/app_modules/admin/_admin_global/_component/button/detail_button";
-import { RouterAdminVote } from "@/lib/router_admin/router_admin_vote";
+import { Admin_V3_ComponentPaginationBreakpoint } from "@/app_modules/admin/_components_v3/comp_pagination_breakpoint";

 export default function AdminVote_Riwayat() {
  return (
@@ -97,7 +95,7 @@ function TableStatus() {
        <tr>
          <td colSpan={12}>
            <Center>
-              <Text color={"gray"}>Tidak ada data</Text>
+              <ComponentAdminGlobal_IsEmptyData />
            </Center>
          </td>
        </tr>
@@ -127,10 +125,14 @@ function TableStatus() {
          </Center>
        </td> */}
        <td>
-          <Center c={AccentColor.white}>{e?.Author?.username}</Center>
+          <Text w={100} c={AccentColor.white}>
+            {e?.Author?.username}
+          </Text>
        </td>
        <td>
-          <Center c={AccentColor.white}>{e?.title}</Center>
+          <Text w={150} c={AccentColor.white} lineClamp={1}>
+            {e?.title}
+          </Text>
        </td>
        {/* <td>
          <Center c="white">
@@ -171,10 +173,9 @@ function TableStatus() {

        <td>
          <Center>
-            <Admin_DetailButton path={RouterAdminVote.detail({id: e.id})}/>
+            <Admin_DetailButton path={RouterAdminVote.detail({ id: e.id })} />
          </Center>
        </td>
-
      </tr>
    ));
  };
@@ -214,10 +215,10 @@ function TableStatus() {
                <thead>
                  <tr>
                    <th>
-                      <Center c={AccentColor.white}>Username</Center>
+                      <Text c={AccentColor.white}>Username</Text>
                    </th>
                    <th>
-                      <Center c={AccentColor.white}>Judul</Center>
+                      <Text c={AccentColor.white}>Judul</Text>
                    </th>
                    <th>
                      <Center c={AccentColor.white}>Mulai Vote</Center>
@@ -234,15 +235,13 @@ function TableStatus() {
              </Table>
            </ScrollArea>

-            <Center mt={"xl"}>
-              <Pagination
-                value={isActivePage}
-                total={isNPage}
-                onChange={(val) => {
-                  onPageClick(val);
-                }}
-              />
-            </Center>
+            <Admin_V3_ComponentPaginationBreakpoint
+              value={isActivePage}
+              total={isNPage}
+              onChange={(val) => {
+                onPageClick(val);
+              }}
+            />
          </Paper>
        )}
      </Stack>
--- a/src/app_modules/admin/vote/child/table_publish/index.tsx
+++ b/src/app_modules/admin/vote/child/table_publish/index.tsx
@@ -5,27 +5,26 @@ import {
  AdminColor,
 } from "@/app_modules/_global/color/color_pallet";
 import { ComponentAdminGlobal_TitlePage } from "@/app_modules/admin/_admin_global/_component";
+import Admin_DetailButton from "@/app_modules/admin/_admin_global/_component/button/detail_button";
 import ComponentAdminGlobal_HeaderTamplate from "@/app_modules/admin/_admin_global/header_tamplate";
 import ComponentAdminGlobal_IsEmptyData from "@/app_modules/admin/_admin_global/is_empty_data";
 import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import { MODEL_VOTING } from "@/app_modules/vote/model/interface";
+import { RouterAdminVote } from "@/lib/router_admin/router_admin_vote";
 import { clientLogger } from "@/util/clientLogger";
 import {
-  Box,
-  Button,
  Center,
  Modal,
  Pagination,
  Paper,
  ScrollArea,
-  Spoiler,
  Stack,
  Table,
  Text,
  TextInput,
 } from "@mantine/core";
 import { useDisclosure, useShallowEffect } from "@mantine/hooks";
-import { IconCircleCheckFilled, IconSearch } from "@tabler/icons-react";
+import { IconSearch } from "@tabler/icons-react";
 import _ from "lodash";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
@@ -33,8 +32,7 @@ import ComponentAdminVote_DetailHasil from "../../component/detail_hasil";
 import { AdminVote_getHasilById } from "../../fun/get/get_hasil_by_id";
 import { AdminVote_getListKontributorById } from "../../fun/get/get_list_kontributor_by_id";
 import { apiGetAdminVotingByStatus } from "../../lib/api_fetch_admin_voting";
-import Admin_DetailButton from "@/app_modules/admin/_admin_global/_component/button/detail_button";
-import { RouterAdminVote } from "@/lib/router_admin/router_admin_vote";
+import { Admin_V3_ComponentPaginationBreakpoint } from "@/app_modules/admin/_components_v3/comp_pagination_breakpoint";

 export default function AdminVote_TablePublish() {
  return (
@@ -99,7 +97,7 @@ function TableStatus() {
        <tr>
          <td colSpan={12}>
            <Center>
-              <Text color={"gray"}>Tidak ada data</Text>
+              <ComponentAdminGlobal_IsEmptyData />
            </Center>
          </td>
        </tr>
@@ -109,12 +107,16 @@ function TableStatus() {
    return data?.map((e, i) => (
      <tr key={i}>
        <td>
-          <Center c={AccentColor.white}>{e?.Author?.username}</Center>
+          <Text w={100} c={AccentColor.white}>
+            {e?.Author?.username}
+          </Text>
        </td>
        <td>
-          <Center c={AccentColor.white}>{e?.title}</Center>
+          <Text w={150} c={AccentColor.white} lineClamp={1}>
+            {e?.title}
+          </Text>
        </td>
-  
+
        <td>
          <Center c={AccentColor.white}>
            {new Intl.DateTimeFormat("id-ID", {
@@ -132,7 +134,7 @@ function TableStatus() {

        <td>
          <Center>
-            <Admin_DetailButton path={RouterAdminVote.detail({id: e.id})} />
+            <Admin_DetailButton path={RouterAdminVote.detail({ id: e.id })} />
          </Center>
        </td>
      </tr>
@@ -159,8 +161,6 @@ function TableStatus() {

        {!data ? (
          <CustomSkeleton height={"80vh"} width="100%" />
-        ) : _.isEmpty(data) ? (
-          <ComponentAdminGlobal_IsEmptyData />
        ) : (
          <Paper p={"md"} bg={AdminColor.softBlue} shadow="lg" h={"80vh"}>
            <ScrollArea w={"100%"} h={"90%"}>
@@ -168,10 +168,10 @@ function TableStatus() {
                <thead>
                  <tr>
                    <th>
-                      <Center c={AccentColor.white}>Username</Center>
+                      <Text c={AccentColor.white}>Username</Text>
                    </th>
                    <th>
-                      <Center c={AccentColor.white}>Judul</Center>
+                      <Text c={AccentColor.white}>Judul</Text>
                    </th>
                    <th>
                      <Center c={AccentColor.white}>Mulai Vote</Center>
@@ -188,15 +188,13 @@ function TableStatus() {
              </Table>
            </ScrollArea>

-            <Center mt={"xl"}>
-              <Pagination
-                value={isActivePage}
-                total={isNPage}
-                onChange={(val) => {
-                  onPageClick(val);
-                }}
-              />
-            </Center>
+            <Admin_V3_ComponentPaginationBreakpoint
+              value={isActivePage}
+              total={isNPage}
+              onChange={(val) => {
+                onPageClick(val);
+              }}
+            />
          </Paper>
        )}
      </Stack>
--- a/src/app_modules/admin/vote/child/table_reject/index.tsx
+++ b/src/app_modules/admin/vote/child/table_reject/index.tsx
@@ -10,6 +10,7 @@ import { ComponentAdminGlobal_NotifikasiBerhasil } from "@/app_modules/admin/_ad
 import { ComponentAdminGlobal_NotifikasiGagal } from "@/app_modules/admin/_admin_global/admin_notifikasi/notifikasi_gagal";
 import ComponentAdminGlobal_HeaderTamplate from "@/app_modules/admin/_admin_global/header_tamplate";
 import ComponentAdminGlobal_IsEmptyData from "@/app_modules/admin/_admin_global/is_empty_data";
+import { Admin_V3_ComponentPaginationBreakpoint } from "@/app_modules/admin/_components_v3/comp_pagination_breakpoint";
 import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import { MODEL_VOTING } from "@/app_modules/vote/model/interface";
 import { RouterAdminVote } from "@/lib/router_admin/router_admin_vote";
@@ -19,7 +20,6 @@ import {
  Center,
  Group,
  Modal,
-  Pagination,
  Paper,
  ScrollArea,
  Stack,
@@ -30,7 +30,6 @@ import {
 } from "@mantine/core";
 import { useDisclosure, useShallowEffect } from "@mantine/hooks";
 import { IconSearch } from "@tabler/icons-react";
-import _ from "lodash";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { AdminVote_funEditCatatanRejectById } from "../../fun/edit/fun_edit_catatan_reject_by_id";
@@ -118,7 +117,7 @@ function TableStatus() {
        <tr>
          <td colSpan={12}>
            <Center>
-              <Text color={"gray"}>Tidak ada data</Text>
+              <ComponentAdminGlobal_IsEmptyData />
            </Center>
          </td>
        </tr>
@@ -159,10 +158,14 @@ function TableStatus() {
          </Center>
        </td> */}
        <td>
-          <Center c={AccentColor.white}>{e?.Author?.username}</Center>
+          <Text w={100} c={AccentColor.white}>
+            {e?.Author?.username}
+          </Text>
        </td>
        <td>
-          <Center c={AccentColor.white}>{e.title}</Center>
+          <Text w={150} c={AccentColor.white} lineClamp={1}>
+            {e?.title}
+          </Text>
        </td>
        {/* <td>
          <Center c={"white"}>
@@ -230,8 +233,6 @@ function TableStatus() {

        {!data ? (
          <CustomSkeleton height={"80vh"} width="100%" />
-        ) : _.isEmpty(data) ? (
-          <ComponentAdminGlobal_IsEmptyData />
        ) : (
          <Paper p={"md"} bg={AdminColor.softBlue} shadow="lg" h={"80vh"}>
            <ScrollArea w={"100%"} h={"90%"}>
@@ -239,10 +240,10 @@ function TableStatus() {
                <thead>
                  <tr>
                    <th>
-                      <Center c={AccentColor.white}>Author</Center>
+                      <Text c={AccentColor.white}>Author</Text>
                    </th>
                    <th>
-                      <Center c={AccentColor.white}>Judul</Center>
+                      <Text c={AccentColor.white}>Judul</Text>
                    </th>

                    <th>
@@ -260,15 +261,13 @@ function TableStatus() {
              </Table>
            </ScrollArea>

-            <Center mt={"xl"}>
-              <Pagination
-                value={isActivePage}
-                total={nPage}
-                onChange={(val) => {
-                  onPageClick(val);
-                }}
-              />
-            </Center>
+            <Admin_V3_ComponentPaginationBreakpoint
+              value={isActivePage}
+              total={nPage}
+              onChange={(val) => {
+                onPageClick(val);
+              }}
+            />
          </Paper>
        )}
      </Stack>
--- a/src/app_modules/admin/vote/child/table_review/index.tsx
+++ b/src/app_modules/admin/vote/child/table_review/index.tsx
@@ -4,7 +4,6 @@ import ComponentAdminGlobal_HeaderTamplate from "@/app_modules/admin/_admin_glob
 import { MODEL_VOTING } from "@/app_modules/vote/model/interface";
 import {
  Affix,
-  Box,
  Button,
  Center,
  Group,
@@ -13,7 +12,6 @@ import {
  Paper,
  rem,
  ScrollArea,
-  Spoiler,
  Stack,
  Table,
  Text,
@@ -22,39 +20,33 @@ import {
  Title,
 } from "@mantine/core";
 import { useDisclosure, useShallowEffect } from "@mantine/hooks";
-import {
-  IconBan,
-  IconCircleCheck,
-  IconRefresh,
-  IconSearch,
-} from "@tabler/icons-react";
+import { IconRefresh, IconSearch } from "@tabler/icons-react";

+import { AccentColor, MainColor } from "@/app_modules/_global/color";
+import { AdminColor } from "@/app_modules/_global/color/color_pallet";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
+import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
+import { ComponentAdminGlobal_TitlePage } from "@/app_modules/admin/_admin_global/_component";
+import Admin_DetailButton from "@/app_modules/admin/_admin_global/_component/button/detail_button";
+import ComponentAdminGlobal_IsEmptyData from "@/app_modules/admin/_admin_global/is_empty_data";
+import adminNotifikasi_funCreateToUser from "@/app_modules/admin/notifikasi/fun/create/fun_create_notif_user";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import {
  gs_adminVoting_triggerReview,
  IRealtimeData,
 } from "@/lib/global_state";
-import { AccentColor, MainColor } from "@/app_modules/_global/color";
-import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
-import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
-import adminNotifikasi_funCreateToUser from "@/app_modules/admin/notifikasi/fun/create/fun_create_notif_user";
-import mqtt_client from "@/util/mqtt_client";
+import { RouterAdminVote } from "@/lib/router_admin/router_admin_vote";
+import { clientLogger } from "@/util/clientLogger";
 import { useAtom } from "jotai";
+import _ from "lodash";
 import moment from "moment";
 import { useState } from "react";
 import { WibuRealtime } from "wibu-pkg";
-import { adminVote_funGetListReview } from "../../fun";
 import { AdminVote_funEditStatusPublishById } from "../../fun/edit/fun_edit_status_publish_by_id";
 import { AdminEvent_funEditCatatanById } from "../../fun/edit/fun_edit_status_reject_by_id";
-import { ComponentAdminGlobal_TitlePage } from "@/app_modules/admin/_admin_global/_component";
-import { AdminColor } from "@/app_modules/_global/color/color_pallet";
-import { clientLogger } from "@/util/clientLogger";
 import { apiGetAdminVotingByStatus } from "../../lib/api_fetch_admin_voting";
-import _ from "lodash";
-import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
-import ComponentAdminGlobal_IsEmptyData from "@/app_modules/admin/_admin_global/is_empty_data";
-import Admin_DetailButton from "@/app_modules/admin/_admin_global/_component/button/detail_button";
-import { RouterAdminVote } from "@/lib/router_admin/router_admin_vote";
+import { Admin_V3_ComponentPaginationBreakpoint } from "@/app_modules/admin/_components_v3/comp_pagination_breakpoint";

 export default function AdminVote_TableReview() {
  return (
@@ -234,7 +226,7 @@ function TableStatus() {
        <tr>
          <td colSpan={12}>
            <Center>
-              <Text color={"gray"}>Tidak ada data</Text>
+              <ComponentAdminGlobal_IsEmptyData />
            </Center>
          </td>
        </tr>
@@ -244,10 +236,14 @@ function TableStatus() {
    return data?.map((e, i) => (
      <tr key={i}>
        <td>
-          <Center c={AccentColor.white}>{e?.Author?.username}</Center>
+          <Text w={100} c={AccentColor.white}>
+            {e?.Author?.username}
+          </Text>
        </td>
        <td>
-          <Center c={AccentColor.white}>{e.title}</Center>
+          <Text w={150} c={AccentColor.white} lineClamp={1}>
+            {e?.title}
+          </Text>
        </td>

        <td>
@@ -324,8 +320,6 @@ function TableStatus() {

        {!data ? (
          <CustomSkeleton height={"80vh"} width="100%" />
-        ) : _.isEmpty(data) ? (
-          <ComponentAdminGlobal_IsEmptyData />
        ) : (
          <Paper p={"md"} bg={AdminColor.softBlue} shadow="lg" h={"80vh"}>
            {isShowReload && (
@@ -351,18 +345,14 @@ function TableStatus() {
            )}

            <ScrollArea w={"100%"} h={"90%"}>
-              <Table
-                verticalSpacing={"md"}
-                horizontalSpacing={"md"}
-                p={"md"}
-              >
+              <Table verticalSpacing={"md"} horizontalSpacing={"md"} p={"md"}>
                <thead>
                  <tr>
                    <th>
-                      <Center c={AccentColor.white}>Username</Center>
+                      <Text c={AccentColor.white}>Username</Text>
                    </th>
                    <th>
-                      <Center c={AccentColor.white}>Judul</Center>
+                      <Text c={AccentColor.white}>Judul</Text>
                    </th>
                    <th>
                      <Center c={AccentColor.white}>Mulai Vote</Center>
@@ -379,15 +369,13 @@ function TableStatus() {
              </Table>
            </ScrollArea>

-            <Center mt={"xl"}>
-              <Pagination
-                value={isActivePage}
-                total={nPage}
-                onChange={(val) => {
-                  onPageClick(val);
-                }}
-              />
-            </Center>
+            <Admin_V3_ComponentPaginationBreakpoint
+              value={isActivePage}
+              total={nPage}
+              onChange={(val) => {
+                onPageClick(val);
+              }}
+            />
          </Paper>
        )}
      </Stack>