update dashboard admin

Deskripsi:
- list warga
- detail warga

No Issues

src/components/DesaSetting.tsx

@@ -1,16 +1,16 @@
 import apiFetch from "@/lib/apiFetch";
 import {
-   ActionIcon,
-   Button,
-   Divider,
-   Flex,
-   Group,
-   Input,
-   Modal,
-   Stack,
-   Table,
-   Title,
-   Tooltip
+  ActionIcon,
+  Button,
+  Divider,
+  Flex,
+  Group,
+  Input,
+  Modal,
+  Stack,
+  Table,
+  Title,
+  Tooltip,
 } from "@mantine/core";
 import { useDisclosure, useShallowEffect } from "@mantine/hooks";
 import { IconEdit } from "@tabler/icons-react";
@@ -19,139 +19,153 @@ import useSWR from "swr";
 import notification from "./notificationGlobal";
 
 export default function DesaSetting() {
-   const [btnDisable, setBtnDisable] = useState(false);
-   const [btnLoading, setBtnLoading] = useState(false);
-   const [opened, { open, close }] = useDisclosure(false);
-   const { data, mutate, isLoading } = useSWR("/", () =>
-      apiFetch.api["configuration-desa"].list.get(),
-   );
-   const list = data?.data || [];
-   const [dataEdit, setDataEdit] = useState({
-      id: "",
-      value: "",
-      name: "",
-   });
+  const [btnDisable, setBtnDisable] = useState(false);
+  const [btnLoading, setBtnLoading] = useState(false);
+  const [opened, { open, close }] = useDisclosure(false);
+  const { data, mutate, isLoading } = useSWR("/", () =>
+    apiFetch.api["configuration-desa"].list.get(),
+  );
+  const list = data?.data || [];
+  const [dataEdit, setDataEdit] = useState({
+    id: "",
+    value: "",
+    name: "",
+  });
 
-   useShallowEffect(() => {
-      mutate();
-   }, []);
+  useShallowEffect(() => {
+    mutate();
+  }, []);
 
-   async function handleEdit() {
-      try {
-         setBtnLoading(true);
-         const res = await apiFetch.api["configuration-desa"].edit.post(dataEdit);
-         if (res.status === 200) {
-            mutate();
-            close();
-            notification({
-               title: "Success",
-               message: "Your settings have been saved",
-               type: "success",
-            })
-         } else {
-            notification({
-               title: "Error",
-               message: "Failed to edit configuration",
-               type: "error",
-            })
-         }
-      } catch (error) {
-         console.log(error);
-         notification({
-            title: "Error",
-            message: "Failed to edit configuration",
-            type: "error",
-         })
-      } finally {
-         setBtnLoading(false);
-      }
-   }
-
-   function chooseEdit({ data }: { data: { id: string, value: string, name: string } }) {
-      setDataEdit(data);
-      open();
-   }
-
-   function onValidation({ kat, value }: { kat: 'value', value: string }) {
-      if (value.length < 1) {
-         setBtnDisable(true);
+  async function handleEdit() {
+    try {
+      setBtnLoading(true);
+      const res = await apiFetch.api["configuration-desa"].edit.post(dataEdit);
+      if (res.status === 200) {
+        mutate();
+        close();
+        notification({
+          title: "Success",
+          message: "Your settings have been saved",
+          type: "success",
+        });
       } else {
-         setBtnDisable(false);
+        notification({
+          title: "Error",
+          message: "Failed to edit configuration",
+          type: "error",
+        });
       }
+    } catch (error) {
+      console.error(error);
+      notification({
+        title: "Error",
+        message: "Failed to edit configuration",
+        type: "error",
+      });
+    } finally {
+      setBtnLoading(false);
+    }
+  }
 
-      if (kat === 'value') {
-         setDataEdit({ ...dataEdit, value: value });
-      }
-   }
+  function chooseEdit({
+    data,
+  }: {
+    data: { id: string; value: string; name: string };
+  }) {
+    setDataEdit(data);
+    open();
+  }
 
-   useShallowEffect(() => {
-      if (dataEdit.value.length > 0) {
-         setBtnDisable(false);
-      }
-   }, [dataEdit.id]);
+  function onValidation({ kat, value }: { kat: "value"; value: string }) {
+    if (value.length < 1) {
+      setBtnDisable(true);
+    } else {
+      setBtnDisable(false);
+    }
 
-   return (
-      <>
-         <Modal
-            opened={opened}
-            onClose={close}
-            title={"Edit"}
-            centered
-            overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
-         >
-            <Stack gap="ld">
-               <Input.Wrapper label={dataEdit.name}>
-                  <Input value={dataEdit.value} onChange={(e) => onValidation({ kat: 'value', value: e.target.value })} />
-               </Input.Wrapper>
-               <Group justify="center" grow>
-                  <Button variant="light" onClick={close}>
-                     Batal
-                  </Button>
-                  <Button variant="filled" onClick={handleEdit} disabled={btnDisable} loading={btnLoading}>
-                     Simpan
-                  </Button>
-               </Group>
-            </Stack>
-         </Modal>
-         <Stack gap={"md"}>
-            <Flex align="center" justify="space-between">
-               <Title order={4} c="gray.2">
-                  Pengaturan Desa
-               </Title>
-            </Flex>
-            <Divider my={0} />
-            <Stack gap={"md"}>
-               <Table highlightOnHover>
-                  <Table.Thead>
-                     <Table.Tr>
-                        <Table.Th>Nama</Table.Th>
-                        <Table.Th>Value</Table.Th>
-                        <Table.Th>Aksi</Table.Th>
-                     </Table.Tr>
-                  </Table.Thead>
-                  <Table.Tbody>
-                     {list?.map((v: any) => (
-                        <Table.Tr key={v.id}>
-                           <Table.Td>{v.name}</Table.Td>
-                           <Table.Td>{v.value}</Table.Td>
-                           <Table.Td>
-                              <Tooltip label="Edit Setting">
-                                 <ActionIcon
-                                    variant="light"
-                                    size="sm"
-                                    style={{ boxShadow: "0 0 8px rgba(0,255,200,0.2)" }}
-                                    onClick={() => chooseEdit({ data: v })}
-                                 >
-                                    <IconEdit size={20} />
-                                 </ActionIcon>
-                              </Tooltip>
-                           </Table.Td>
-                        </Table.Tr>
-                     ))}
-                  </Table.Tbody>
-               </Table>
-            </Stack>
-         </Stack>
-      </>
-   );
+    if (kat === "value") {
+      setDataEdit({ ...dataEdit, value: value });
+    }
+  }
+
+  useShallowEffect(() => {
+    if (dataEdit.value.length > 0) {
+      setBtnDisable(false);
+    }
+  }, [dataEdit.id]);
+
+  return (
+    <>
+      <Modal
+        opened={opened}
+        onClose={close}
+        title={"Edit"}
+        centered
+        overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
+      >
+        <Stack gap="ld">
+          <Input.Wrapper label={dataEdit.name}>
+            <Input
+              value={dataEdit.value}
+              onChange={(e) =>
+                onValidation({ kat: "value", value: e.target.value })
+              }
+            />
+          </Input.Wrapper>
+          <Group justify="center" grow>
+            <Button variant="light" onClick={close}>
+              Batal
+            </Button>
+            <Button
+              variant="filled"
+              onClick={handleEdit}
+              disabled={btnDisable}
+              loading={btnLoading}
+            >
+              Simpan
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
+      <Stack gap={"md"}>
+        <Flex align="center" justify="space-between">
+          <Title order={4} c="gray.2">
+            Pengaturan Desa
+          </Title>
+        </Flex>
+        <Divider my={0} />
+        <Stack gap={"md"}>
+          <Table highlightOnHover>
+            <Table.Thead>
+              <Table.Tr>
+                <Table.Th>Nama</Table.Th>
+                <Table.Th>Value</Table.Th>
+                <Table.Th>Aksi</Table.Th>
+              </Table.Tr>
+            </Table.Thead>
+            <Table.Tbody>
+              {list?.map((v: any) => (
+                <Table.Tr key={v.id}>
+                  <Table.Td>{v.name}</Table.Td>
+                  <Table.Td>{v.value}</Table.Td>
+                  <Table.Td>
+                    <Tooltip label="Edit Setting">
+                      <ActionIcon
+                        variant="light"
+                        size="sm"
+                        style={{ boxShadow: "0 0 8px rgba(0,255,200,0.2)" }}
+                        onClick={() => chooseEdit({ data: v })}
+                      >
+                        <IconEdit size={20} />
+                      </ActionIcon>
+                    </Tooltip>
+                  </Table.Td>
+                </Table.Tr>
+              ))}
+            </Table.Tbody>
+          </Table>
+        </Stack>
+      </Stack>
+    </>
+  );
 }