fix responsive admin donas

deksripsi:
- table per status
- table kategpori

src/app/dev/admin/donasi/sub-menu/publish/page.tsx

@@ -1,9 +1,9 @@
 import { AdminDonasi_TablePublish } from "@/app_modules/admin/donasi";
-import adminDonasi_getListPublish from "@/app_modules/admin/donasi/fun/get/get_list_publish";
 
 export default async function Page() {
-
+  return (
-    return<>
+    <>
-    <AdminDonasi_TablePublish />
+      <AdminDonasi_TablePublish />
     </>
-}
+  );
+}

src/app_modules/admin/donasi/detail/detail_reject.tsx

@@ -43,7 +43,7 @@ export default function AdminDonasi_DetailReject() {
       try {
         const response = await apiGetAdminDonasiById({
           id: params.id,
-        })
+        });
 
         if (response?.success && response?.data) {
           setData(response.data);
@@ -55,15 +55,15 @@ export default function AdminDonasi_DetailReject() {
         clientLogger.error("Invalid data format recieved:", error);
         setData(null);
       }
-    }
+    };
     loadInitialData();
-  })
+  });
 
   return (
     <>
       <Stack>
         {!data ? (
-          <SkeletonAdminDetailDonasiReject/>
+          <SkeletonAdminDetailDonasiReject />
         ) : (
           <>
             <ButtonOnHeader
@@ -88,7 +88,7 @@ export default function AdminDonasi_DetailReject() {
             </SimpleGrid>
           </>
         )}
-      </Stack >
+      </Stack>
     </>
   );
 }
@@ -158,12 +158,7 @@ function ButtonOnHeader({
         }
         buttonKiri={
           <>
-            <Button
+            <Button radius={"xl"} onClick={() => setOpened(false)}>
-              radius={"xl"}
-              onClick={() => {
-                close();
-              }}
-            >
               Batal
             </Button>
           </>
@@ -209,7 +204,9 @@ function CatatanReject({ catatan }: { catatan: string }) {
     <>
       <Paper p={"md"} bg={AdminColor.softBlue}>
         <Stack>
-          <Title c={AdminColor.white} order={5}>Alasan Penolakan :</Title>
+          <Title c={AdminColor.white} order={5}>
+            Alasan Penolakan :
+          </Title>
           <Text c={AdminColor.white}>{catatan}</Text>
         </Stack>
       </Paper>

src/app_modules/admin/donasi/sub_menu/table_kategori.tsx

@@ -1,40 +1,40 @@
 "use client";
 
-import {
-  Stack,
-  Group,
-  Title,
-  Paper,
-  ScrollArea,
-  Center,
-  Pagination,
-  Table,
-  Grid,
-  TextInput,
-  Button,
-  Text,
-  ActionIcon,
-  Overlay,
-  Switch,
-  Modal,
-} from "@mantine/core";
-import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
-import { MODEL_NEW_DEFAULT_MASTER } from "@/app_modules/model_global/interface";
-import { useState } from "react";
-import { IconCirclePlus, IconEdit, IconTrash } from "@tabler/icons-react";
-import adminDonasi_funCreateKategori from "../fun/create/fun_create_kategori";
-import { ComponentAdminGlobal_NotifikasiBerhasil } from "../../_admin_global/admin_notifikasi/notifikasi_berhasil";
-import { ComponentAdminGlobal_NotifikasiGagal } from "../../_admin_global/admin_notifikasi/notifikasi_gagal";
-import adminDonasi_getMasterKategori from "../fun/master/get_list_kategori";
-import adminDonasi_funDeleteKategori from "../fun/delete/fun_delete_by_id";
-import adminDonasi_funUpdatekategoriById from "../fun/update/fun_update_kategori_by_id";
-import _ from "lodash";
-import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component";
 import { AccentColor } from "@/app_modules/_global/color";
 import { AdminColor } from "@/app_modules/_global/color/color_pallet";
-import { useShallowEffect } from "@mantine/hooks";
+import { MODEL_NEW_DEFAULT_MASTER } from "@/app_modules/model_global/interface";
-import { apiGetAdminDonasiKategori } from "../lib/api_fetch_admin_donasi";
 import { clientLogger } from "@/util/clientLogger";
+import {
+  ActionIcon,
+  Box,
+  Button,
+  Center,
+  Group,
+  Modal,
+  Paper,
+  ScrollArea,
+  Stack,
+  Switch,
+  Table,
+  Text,
+  TextInput,
+  Title,
+} from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { IconEdit } from "@tabler/icons-react";
+import _ from "lodash";
+import { useState } from "react";
+import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component";
+import { ComponentAdminGlobal_NotifikasiBerhasil } from "../../_admin_global/admin_notifikasi/notifikasi_berhasil";
+import { ComponentAdminGlobal_NotifikasiGagal } from "../../_admin_global/admin_notifikasi/notifikasi_gagal";
+import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
+import { Admin_V3_ComponentBreakpoint } from "../../_components_v3/comp_simple_grid_breakpoint";
+import { Admin_V3_ComponentSkeletonBreakpoint } from "../../_components_v3/comp_skeleton_breakpoint";
+import adminDonasi_funCreateKategori from "../fun/create/fun_create_kategori";
+import adminDonasi_funDeleteKategori from "../fun/delete/fun_delete_by_id";
+import adminDonasi_getMasterKategori from "../fun/master/get_list_kategori";
+import adminDonasi_funUpdatekategoriById from "../fun/update/fun_update_kategori_by_id";
+import { apiGetAdminDonasiKategori } from "../lib/api_fetch_admin_donasi";
 
 export default function AdminDonasi_TableKategori() {
   return (
@@ -50,7 +50,7 @@ export default function AdminDonasi_TableKategori() {
 function TableView() {
   const [data, setData] = useState<MODEL_NEW_DEFAULT_MASTER[] | null>(null);
   const [create, setCreate] = useState("");
-  const [isCreate, setIsCreate] = useState(false);
+  const [isCreate, setIsCreate] = useState(true);
 
   // const [kategoriId, setKategoriId] = useState("");
   const [updateKategori, setUpdateKategori] = useState({
@@ -70,16 +70,15 @@ function TableView() {
   }, []);
 
   async function onLoadData() {
-  try {
+    try {
-    const response = await apiGetAdminDonasiKategori();
+      const response = await apiGetAdminDonasiKategori();
-    if (response) {
+      if (response) {
-
+        setData(response.data);
-      setData(response.data)
+      }
+    } catch (error) {
+      clientLogger.error("Error get kategori", error);
     }
-  } catch (error) {
-    clientLogger.error("Error get kategori" , error)
   }
-}
 
   async function onCreateNewKategori() {
     const tambahData = await adminDonasi_funCreateKategori({
@@ -96,7 +95,6 @@ function TableView() {
   }
 
   async function onChangeStatus() {
-    
     const del = await adminDonasi_funDeleteKategori({
       kategoriId: updateStatus.kategoriId,
       isActive: updateStatus.isActive as any,
@@ -123,6 +121,7 @@ function TableView() {
       const loadData = await adminDonasi_getMasterKategori();
       setData(loadData);
       setIsUpdate(false);
+      setIsCreate(true);
     } else {
       ComponentAdminGlobal_NotifikasiGagal(updt.message);
     }
@@ -138,14 +137,14 @@ function TableView() {
             </Center>
           </td>
         </tr>
-      )
+      );
     }
     return data.map((e, i) => (
       <tr key={i}>
         <td>
-          <Center c={AccentColor.white}>
+          <Box c={AccentColor.white}>
             <Text>{e?.name}</Text>
-          </Center>
+          </Box>
         </td>
         <td>
           <Center>
@@ -168,6 +167,7 @@ function TableView() {
         <td>
           <Group position="center">
             <ActionIcon
+              variant="transparent"
               onClick={() => {
                 setIsUpdate(true);
                 setIsCreate(false);
@@ -183,52 +183,139 @@ function TableView() {
         </td>
       </tr>
     ));
-  }
+  };
-
 
   return (
     <>
       <Stack spacing={"xs"} h={"100%"}>
-        {/* <pre>{JSON.stringify(listUser, null, 2)}</pre> */}
         <ComponentAdminGlobal_TitlePage
           name="Kategori"
           color={AdminColor.softBlue}
-          component={
+          // component={
-            <Button
+          //   <Button
-              w={120}
+          //     w={120}
-              leftIcon={<IconCirclePlus />}
+          //     leftIcon={<IconCirclePlus />}
-              radius={"xl"}
+          //     radius={"xl"}
-              onClick={() => {
+          //     onClick={() => {
-                setIsCreate(true);
+          //       setIsCreate(true);
-                setIsUpdate(false);
+          //       setIsUpdate(false);
-              }}
+          //     }}
-            >
+          //   >
-              Tambah
+          //     Tambah
-            </Button>
+          //   </Button>
-          }
+          // }
         />
-        {/* <Group
-          position="apart"
-          bg={"gray.4"}
-          p={"xs"}
-          style={{ borderRadius: "6px" }}
-        >
-          <Title order={4}>Kategori</Title>
-          <Button
-            w={120}
-            leftIcon={<IconCirclePlus />}
-            radius={"xl"}
-            onClick={() => {
-              setIsCreate(true);
-              setIsUpdate(false);
-            }}
-          >
-            Tambah
-          </Button>
-        </Group> */}
 
-        <Grid>
+        {!data ? (
-          <Grid.Col span={"auto"}>
+          <Admin_V3_ComponentSkeletonBreakpoint />
+        ) : (
+          <Admin_V3_ComponentBreakpoint md={2} lg={2}>
+            <div>
+              {isCreate && (
+                <Paper p={"md"} bg={AdminColor.softBlue}>
+                  <Stack>
+                    <TextInput
+                      value={create}
+                      label={
+                        <Title c={AdminColor.white} order={6}>
+                          Tambah Kategori
+                        </Title>
+                      }
+                      placeholder="Masukan kategori baru"
+                      onChange={(val) => {
+                        setCreate(val.currentTarget.value);
+                      }}
+                    />
+                    <Group position="right">
+                      {/* <Button
+                      style={{
+                        transition: "0.5s",
+                      }}
+                      radius={"xl"}
+                      onClick={() => {
+                        setIsCreate(false);
+                        setCreate("");
+                      }}
+                    >
+                      Batal
+                    </Button> */}
+                      <Button
+                        style={{
+                          transition: "0.5s",
+                        }}
+                        disabled={create === ""}
+                        radius={"xl"}
+                        color="teal"
+                        onClick={() => {
+                          onCreateNewKategori();
+                        }}
+                      >
+                        Simpan
+                      </Button>
+                    </Group>
+                  </Stack>
+                </Paper>
+              )}
+
+              {isUpdate && (
+                <Paper
+                  p={"md"}
+                  bg={AdminColor.softBlue}
+                  style={{ transition: "1s" }}
+                >
+                  <Stack>
+                    <TextInput
+                      value={updateKategori.name}
+                      label={
+                        <Title c={AdminColor.white} order={6}>
+                          Update Kategori
+                        </Title>
+                      }
+                      placeholder="Update kategori"
+                      onChange={(val) => {
+                        const data = _.clone(updateKategori);
+                        setUpdateKategori({
+                          kategoriId: data.kategoriId,
+                          name: val.currentTarget.value,
+                        });
+                      }}
+                    />
+                    <Group position="right">
+                      <Button
+                        style={{
+                          transition: "0.5s",
+                        }}
+                        radius={"xl"}
+                        onClick={() => {
+                          setIsUpdate(false);
+                          setIsCreate(true);
+                          setUpdateKategori({
+                            kategoriId: "",
+                            name: "",
+                          });
+                        }}
+                      >
+                        Batal
+                      </Button>
+                      <Button
+                        disabled={updateKategori.name === "" ? true : false}
+                        style={{
+                          transition: "0.5s",
+                        }}
+                        color="green"
+                        radius={"xl"}
+                        onClick={() => {
+                          onUpdate();
+                        }}
+                      >
+                        Update
+                      </Button>
+                    </Group>
+                  </Stack>
+                </Paper>
+              )}
+            </div>
+
             <Paper p={"md"} bg={AdminColor.softBlue} shadow="lg" h={"70vh"}>
               <ScrollArea w={"100%"} h={"90%"}>
                 <Table
@@ -236,12 +323,11 @@ function TableView() {
                   horizontalSpacing={"md"}
                   p={"md"}
                   w={"100%"}
-
                 >
                   <thead>
                     <tr>
                       <th>
-                        <Center c={AccentColor.white}>Kategori</Center>
+                        <Text c={AccentColor.white}>Kategori</Text>
                       </th>
                       <th>
                         <Center c={AccentColor.white}>Status</Center>
@@ -265,105 +351,8 @@ function TableView() {
                 />
               </Center> */}
             </Paper>
-          </Grid.Col>
+          </Admin_V3_ComponentBreakpoint>
-
+        )}
-          <Grid.Col span={4}>
-            {isCreate ? (
-              <Paper p={"md"} bg={AdminColor.softBlue}>
-                <Stack>
-                  <TextInput
-                    value={create}
-                    label={<Title c={AdminColor.white} order={6}>Tambah Kategori</Title>}
-                    placeholder="Masukan kategori baru"
-                    onChange={(val) => {
-                      setCreate(val.currentTarget.value);
-                    }}
-                  />
-                  <Group position="right">
-                    <Button
-                      style={{
-                        transition: "0.5s",
-                      }}
-                      radius={"xl"}
-                      onClick={() => {
-                        setIsCreate(false);
-                        setCreate("");
-                      }}
-                    >
-                      Batal
-                    </Button>
-                    <Button
-                      style={{
-                        transition: "0.5s",
-                      }}
-                      disabled={create === "" ? true : false}
-                      radius={"xl"}
-                      color="teal"
-                      onClick={() => {
-                        onCreateNewKategori();
-                      }}
-                    >
-                      Simpan
-                    </Button>
-                  </Group>
-                </Stack>
-              </Paper>
-            ) : (
-              ""
-            )}
-
-            {isUpdate ? (
-              <Paper p={"md"} bg={AdminColor.softBlue} style={{ transition: "1s" }}>
-                <Stack>
-                  <TextInput
-                    value={updateKategori.name}
-                    label={<Title c={AdminColor.white} order={6}>Update Kategori</Title>}
-                    placeholder="Update kategori"
-                    onChange={(val) => {
-                      const data = _.clone(updateKategori);
-                      setUpdateKategori({
-                        kategoriId: data.kategoriId,
-                        name: val.currentTarget.value,
-                      });
-                    }}
-                  />
-                  <Group position="right">
-                    <Button
-                      style={{
-                        transition: "0.5s",
-                      }}
-                      radius={"xl"}
-                      onClick={() => {
-                        setIsUpdate(false);
-                        setUpdateKategori({
-                          kategoriId: "",
-                          name: "",
-                        });
-                      }}
-                    >
-                      Batal
-                    </Button>
-                    <Button
-                      disabled={updateKategori.name === "" ? true : false}
-                      style={{
-                        transition: "0.5s",
-                      }}
-                      color="green"
-                      radius={"xl"}
-                      onClick={() => {
-                        onUpdate();
-                      }}
-                    >
-                      Update
-                    </Button>
-                  </Group>
-                </Stack>
-              </Paper>
-            ) : (
-              ""
-            )}
-          </Grid.Col>
-        </Grid>
       </Stack>
 
       <Modal

src/app_modules/admin/donasi/sub_menu/table_publish.tsx

@@ -16,7 +16,7 @@ import {
   Stack,
   Table,
   Text,
-  TextInput
+  TextInput,
 } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { IconSearch } from "@tabler/icons-react";
@@ -26,6 +26,7 @@ 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 { apiGetAdminDonasiByStatus } from "../lib/api_fetch_admin_donasi";
+import { Admin_V3_ComponentPaginationBreakpoint } from "../../_components_v3/comp_pagination_breakpoint";
 
 export default function AdminDonasi_TablePublish() {
   return (
@@ -215,15 +216,14 @@ function TableStatus() {
             </ScrollArea>
             {/* <ScrollArea>
           </ScrollArea> */}
-            <Center mt={"xl"}>
+
-              <Pagination
+            <Admin_V3_ComponentPaginationBreakpoint
-                value={isActivePage}
+              value={isActivePage}
-                total={isNPage}
+              total={isNPage}
-                onChange={(val) => {
+              onChange={(val) => {
-                  onPageClick(val);
+                onPageClick(val);
-                }}
+              }}
-              />
+            />
-            </Center>
           </Paper>
         )}
       </Stack>

src/app_modules/admin/donasi/sub_menu/table_reject.tsx

@@ -1,16 +1,16 @@
 "use client";
 
-import { RouterAdminDonasi_OLD } from "@/lib/router_hipmi/router_admin";
+import { AccentColor } from "@/app_modules/_global/color";
-import { AccentColor, MainColor } from "@/app_modules/_global/color";
 import { AdminColor } from "@/app_modules/_global/color/color_pallet";
 import { ComponentGlobal_TampilanRupiah } from "@/app_modules/_global/component";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import { MODEL_DONASI } from "@/app_modules/donasi/model/interface";
+import { RouterAdminDonasi_OLD } from "@/lib/router_hipmi/router_admin";
+import { clientLogger } from "@/util/clientLogger";
 import {
   Box,
-  Button,
   Center,
   Modal,
-  Pagination,
   Paper,
   ScrollArea,
   Stack,
@@ -20,17 +20,14 @@ import {
   Title,
 } from "@mantine/core";
 import { useDisclosure, useShallowEffect } from "@mantine/hooks";
-import { IconEyeEdit, IconSearch } from "@tabler/icons-react";
+import { IconSearch } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component";
-import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
-import adminDonasi_getListReject from "../fun/get/get_list_reject";
-import { IconEyeCheck } from "@tabler/icons-react";
-import { clientLogger } from "@/util/clientLogger";
-import { apiGetAdminDonasiByStatus } from "../lib/api_fetch_admin_donasi";
-import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 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 { apiGetAdminDonasiByStatus } from "../lib/api_fetch_admin_donasi";
 
 export default function AdminDonasi_TableReject() {
   return (
@@ -180,11 +177,7 @@ function TableStatus() {
         ) : (
           <Paper p={"md"} bg={AdminColor.softBlue} shadow="lg" h={"80vh"}>
             <ScrollArea w={"100%"} h={"90%"}>
-              <Table
+              <Table verticalSpacing={"md"} horizontalSpacing={"md"} p={"md"}>
-                verticalSpacing={"md"}
-                horizontalSpacing={"md"}
-                p={"md"}
-              >
                 <thead>
                   <tr>
                     <th>
@@ -210,17 +203,14 @@ function TableStatus() {
                 <tbody>{renderTableBody()}</tbody>
               </Table>
             </ScrollArea>
-            {/* <ScrollArea>
+
-          </ScrollArea> */}
+            <Admin_V3_ComponentPaginationBreakpoint
-            <Center mt={"xl"}>
+              value={isActivePage}
-              <Pagination
+              total={isNPage}
-                value={isActivePage}
+              onChange={(val) => {
-                total={isNPage}
+                onPageClick(val);
-                onChange={(val) => {
+              }}
-                  onPageClick(val);
+            />
-                }}
-              />
-            </Center>
           </Paper>
         )}
       </Stack>

src/app_modules/admin/donasi/sub_menu/table_review.tsx

@@ -31,6 +31,7 @@ import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component";
 import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
 import { apiGetAdminDonasiByStatus } from "../lib/api_fetch_admin_donasi";
 import Admin_DetailButton from "../../_admin_global/_component/button/detail_button";
+import { Admin_V3_ComponentPaginationBreakpoint } from "../../_components_v3/comp_pagination_breakpoint";
 
 export default function AdminDonasi_TableReview() {
   return (
@@ -261,15 +262,14 @@ function TableStatus() {
                 <tbody>{renderTableBody()}</tbody>
               </Table>
             </ScrollArea>
-            <Center mt={"xl"}>
+
-              <Pagination
+            <Admin_V3_ComponentPaginationBreakpoint
-                value={isActivePage}
+              value={isActivePage}
-                total={isNPage}
+              total={isNPage}
-                onChange={(val) => {
+              onChange={(val) => {
-                  onPageClick(val);
+                onPageClick(val);
-                }}
+              }}
-              />
+            />
-            </Center>
           </Paper>
         )}
       </Stack>