Revisi Tampilan Admin

# fix :
- Tampilan Donasi
# feat :
- Penambahan App Information
## No Issuee

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

@@ -15,51 +15,54 @@ import {
   Text,
   ActionIcon,
   Overlay,
+  Switch,
+  Modal,
 } from "@mantine/core";
-import ComponentAdminGlobal_HeaderTamplate from "../../component/header_tamplate";
+import ComponentAdminGlobal_HeaderTamplate from "../../component_global/header_tamplate";
 import { MODEL_NEW_DEFAULT_MASTER } from "@/app_modules/model_global/interface";
 import { useState } from "react";
-import { IconEdit, IconTrash } from "@tabler/icons-react";
+import { IconCirclePlus, IconEdit, IconTrash } from "@tabler/icons-react";
 import adminDonasi_funCreateKategori from "../fun/create/fun_create_kategori";
-import { ComponentGlobalAdmin_NotifikasiBerhasil } from "../../component/admin_notifikasi/notifikasi_berhasil";
-import { ComponentGlobalAdmin_NotifikasiGagal } from "../../component/admin_notifikasi/notifikasi_gagal";
+import { ComponentGlobalAdmin_NotifikasiBerhasil } from "../../component_global/admin_notifikasi/notifikasi_berhasil";
+import { ComponentGlobalAdmin_NotifikasiGagal } from "../../component_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";
 
 export default function AdminDonasi_TableKategori({
   listKategori,
 }: {
   listKategori: MODEL_NEW_DEFAULT_MASTER[];
 }) {
-  const [list, setList] = useState(listKategori);
-
   return (
     <>
       <Stack h={"100%"}>
         <ComponentAdminGlobal_HeaderTamplate name="Donasi" />
-        <TableView
-          list={list}
-          onLoadData={(val) => {
-            setList(val);
-          }}
-        />
+        <TableView list={listKategori} />
       </Stack>
     </>
   );
 }
 
-function TableView({
-  list,
-  onLoadData,
-}: {
-  list: MODEL_NEW_DEFAULT_MASTER[];
-  onLoadData: (val: any) => void;
-}) {
+function TableView({ list }: { list: MODEL_NEW_DEFAULT_MASTER[] }) {
+  const [data, setData] = useState(list);
+
   const [create, setCreate] = useState("");
-  const [visible, setVisible] = useState(true);
-  const [kategoriId, setKategoriId] = useState("");
-  const [updateName, setUpdateName] = useState("");
+  const [isCreate, setIsCreate] = useState(false);
+
+  // const [kategoriId, setKategoriId] = useState("");
+  const [updateKategori, setUpdateKategori] = useState({
+    kategoriId: "",
+    name: "",
+  });
+  const [isUpdate, setIsUpdate] = useState(false);
+
+  const [updateStatus, setUpdateStatus] = useState({
+    kategoriId: "",
+    isActive: "",
+  });
+  const [isChangeStatus, setIsChangeStatus] = useState(false);
 
   async function onCreateNewKategori() {
     const tambahData = await adminDonasi_funCreateKategori({
@@ -67,7 +70,7 @@ function TableView({
     });
     if (tambahData.status === 200) {
       const loadNewdata = await adminDonasi_getMasterKategori();
-      onLoadData(loadNewdata);
+      setData(loadNewdata);
       setCreate("");
       ComponentGlobalAdmin_NotifikasiBerhasil(tambahData.message);
     } else {
@@ -75,12 +78,18 @@ function TableView({
     }
   }
 
-  async function onDelete(id: string) {
-    const del = await adminDonasi_funDeleteKategori({ kategoriId: id });
+  async function onChangeStatus() {
+    // console.log(updateStatus.kategoriId, updateStatus.isActive);
+    const del = await adminDonasi_funDeleteKategori({
+      kategoriId: updateStatus.kategoriId,
+      isActive: updateStatus.isActive as any,
+    });
+
     if (del.status === 200) {
       const loadNewdata = await adminDonasi_getMasterKategori();
-      onLoadData(loadNewdata);
+      setData(loadNewdata);
       ComponentGlobalAdmin_NotifikasiBerhasil(del.message);
+      setIsChangeStatus(false);
     } else {
       ComponentGlobalAdmin_NotifikasiGagal(del.message);
     }
@@ -88,46 +97,59 @@ function TableView({
 
   async function onUpdate() {
     const updt = await adminDonasi_funUpdatekategoriById({
-      kategoriId: kategoriId,
-      name: updateName,
+      kategoriId: updateKategori.kategoriId,
+      name: updateKategori.name,
     });
     if (updt.status === 200) {
-      setVisible(true);
-      setKategoriId("");
-      setUpdateName("");
+      setUpdateKategori({ kategoriId: "", name: "" });
       ComponentGlobalAdmin_NotifikasiBerhasil(updt.message);
       const loadData = await adminDonasi_getMasterKategori();
-      onLoadData(loadData);
+      setData(loadData);
+      setIsUpdate(false);
     } else {
       ComponentGlobalAdmin_NotifikasiGagal(updt.message);
     }
   }
 
-  const rowTable = list.map((e, i) => (
+  const rowTable = data.map((e, i) => (
     <tr key={i}>
       <td>
         <Center>
           <Text>{e?.name}</Text>
         </Center>
       </td>
+      <td>
+        <Center>
+          <Switch
+            color="orange"
+            onLabel="ON"
+            offLabel="OFF"
+            checked={e?.active}
+            onChange={(val) => {
+              const status = val.currentTarget.checked;
+              setIsChangeStatus(true);
+              setUpdateStatus({
+                kategoriId: e?.id,
+                isActive: status as any,
+              });
+            }}
+          />
+        </Center>
+      </td>
       <td>
         <Group position="center">
           <ActionIcon
             onClick={() => {
-              setVisible(false);
-              setKategoriId(e?.id);
-              setUpdateName(e?.name);
+              setIsUpdate(true);
+              setIsCreate(false);
+              setUpdateKategori({
+                kategoriId: e?.id,
+                name: e?.name,
+              });
             }}
           >
             <IconEdit color="green" />
           </ActionIcon>
-          <ActionIcon
-            onClick={() => {
-              onDelete(e?.id);
-            }}
-          >
-            <IconTrash color="red" />
-          </ActionIcon>
         </Group>
       </td>
     </tr>
@@ -144,84 +166,22 @@ function TableView({
           style={{ borderRadius: "6px" }}
         >
           <Title order={4}>Kategori</Title>
+          <Button
+            w={120}
+            leftIcon={<IconCirclePlus />}
+            radius={"xl"}
+            onClick={() => {
+              setIsCreate(true);
+              setIsUpdate(false);
+            }}
+          >
+            Tambah
+          </Button>
         </Group>
 
         <Grid>
           <Grid.Col span={"auto"}>
-            <Stack>
-              <Paper p={"md"} withBorder>
-                <Stack>
-                  <TextInput
-                    value={create}
-                    label={<Title order={6}>Tambah Kategori</Title>}
-                    placeholder="Masukan kategori baru"
-                    onChange={(val) => {
-                      setCreate(val.currentTarget.value);
-                    }}
-                  />
-                  <Group position="right">
-                    <Button
-                      style={{
-                        transition: "0.5s",
-                      }}
-                      disabled={create === "" ? true : false}
-                      radius={"xl"}
-                      onClick={() => {
-                        onCreateNewKategori();
-                      }}
-                    >
-                      Simpan
-                    </Button>
-                  </Group>
-                </Stack>
-              </Paper>
-
-              <Paper p={"md"} withBorder style={{ transition: "1s" }}>
-                <Stack>
-                  <TextInput
-                    value={updateName}
-                    disabled={visible ? true : false}
-                    label={<Title order={6}>Update Kategori</Title>}
-                    placeholder="Update kategori"
-                    onChange={(val) => {
-                      setUpdateName(val.currentTarget.value);
-                    }}
-                  />
-                  <Group position="right">
-                    <Button
-                      disabled={visible ? true : false}
-                      style={{
-                        transition: "0.5s",
-                      }}
-                      radius={"xl"}
-                      onClick={() => {
-                        setKategoriId("");
-                        setUpdateName("");
-                        setVisible(true);
-                      }}
-                    >
-                      Batal
-                    </Button>
-                    <Button
-                      style={{
-                        transition: "0.5s",
-                      }}
-                      color="green"
-                      disabled={visible ? true : false}
-                      radius={"xl"}
-                      onClick={() => {
-                        onUpdate();
-                      }}
-                    >
-                      Update
-                    </Button>
-                  </Group>
-                </Stack>
-              </Paper>
-            </Stack>
-          </Grid.Col>
-          <Grid.Col span={8} h={"80vh"}>
-            <Paper p={"md"} withBorder shadow="lg" h={"100%"}>
+            <Paper p={"md"} withBorder shadow="lg" h={"70vh"}>
               <ScrollArea w={"100%"} h={"90%"}>
                 <Table
                   verticalSpacing={"xs"}
@@ -236,6 +196,9 @@ function TableView({
                       <th>
                         <Center>Kategori</Center>
                       </th>
+                      <th>
+                        <Center>Status</Center>
+                      </th>
                       <th>
                         <Center>Aksi</Center>
                       </th>
@@ -256,8 +219,142 @@ function TableView({
               </Center> */}
             </Paper>
           </Grid.Col>
+
+          <Grid.Col span={4}>
+            {isCreate ? (
+              <Paper p={"md"} withBorder>
+                <Stack>
+                  <TextInput
+                    value={create}
+                    label={<Title 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"} withBorder style={{ transition: "1s" }}>
+                <Stack>
+                  <TextInput
+                    value={updateKategori.name}
+                    label={<Title 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
+        opened={isChangeStatus}
+        onClose={() => setIsChangeStatus(false)}
+        withCloseButton={false}
+        centered
+      >
+        <Stack align="center">
+          <Title order={5}>
+            Anda ingin{" "}
+            {updateStatus.isActive ? (
+              <Text span inherit>
+                mengaktifkan
+              </Text>
+            ) : (
+              <Text span inherit>
+                menonaktifkan
+              </Text>
+            )}{" "}
+            Bank ini ?
+          </Title>
+          <Group>
+            <Button radius={"xl"} onClick={() => setIsChangeStatus(false)}>
+              Batal
+            </Button>
+            <Button
+              color="green"
+              radius={"xl"}
+              onClick={() => {
+                onChangeStatus();
+              }}
+            >
+              Iya
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
     </>
   );
 }

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

@@ -22,7 +22,7 @@ import ComponentAdminDonasi_TombolKembali from "../component/tombol_kembali";
 import { MODEL_DONASI } from "@/app_modules/donasi/model/interface";
 import { useState } from "react";
 import TampilanRupiahDonasi from "@/app_modules/donasi/component/tampilan_rupiah";
-import ComponentAdminGlobal_HeaderTamplate from "../../component/header_tamplate";
+import ComponentAdminGlobal_HeaderTamplate from "../../component_global/header_tamplate";
 import adminDonasi_getListPublish from "../fun/get/get_list_publish";
 
 export default function AdminDonasi_TablePublish({

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

@@ -31,7 +31,7 @@ import AdminDonasi_DetailReview from "../detail/detail_review";
 import { MODEL_DONASI } from "@/app_modules/donasi/model/interface";
 import { useState } from "react";
 import TampilanRupiahDonasi from "@/app_modules/donasi/component/tampilan_rupiah";
-import ComponentAdminGlobal_HeaderTamplate from "../../component/header_tamplate";
+import ComponentAdminGlobal_HeaderTamplate from "../../component_global/header_tamplate";
 import adminDonasi_getListReject from "../fun/get/get_list_reject";
 
 export default function AdminDonasi_TableReject({

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

@@ -25,7 +25,7 @@ import AdminDonasi_DetailReview from "../detail/detail_review";
 import { MODEL_DONASI } from "@/app_modules/donasi/model/interface";
 import { useState } from "react";
 import TampilanRupiahDonasi from "@/app_modules/donasi/component/tampilan_rupiah";
-import ComponentAdminGlobal_HeaderTamplate from "../../component/header_tamplate";
+import ComponentAdminGlobal_HeaderTamplate from "../../component_global/header_tamplate";
 import _ from "lodash";
 import adminDonasi_getListReview from "../fun/get/get_list_review";