Merge pull request 'amalia/12-nov-25' (#20) from amalia/12-nov-25 into main

Reviewed-on: http://wibugit.wibudev.com/wibu/jenna-mcp/pulls/20

src/App.tsx

@@ -1,7 +1,7 @@
 import "@mantine/core/styles.css";
-import "@mantine/notifications/styles.css";
 import "@mantine/dates/styles.css";
 import { Notifications } from "@mantine/notifications";
+import "@mantine/notifications/styles.css";
 
 import { MantineProvider } from "@mantine/core";
 import AppRoutes from "./AppRoutes";

src/components/DesaSetting.tsx

@@ -0,0 +1,157 @@
+import apiFetch from "@/lib/apiFetch";
+import {
+   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";
+import { useState } from "react";
+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: "",
+   });
+
+   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);
+      } else {
+         setBtnDisable(false);
+      }
+
+      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>
+      </>
+   );
+}

src/components/notificationGlobal.ts

@@ -0,0 +1,38 @@
+import { showNotification } from "@mantine/notifications";
+
+export default function notification({ title, message, type }: { title: string, message: string, type: "success" | "error" | "warning" | "info" }) {
+   switch (type) {
+      case "success":
+         return showNotification({
+            title,
+            message,
+            color: "green",
+            autoClose: 3000,
+         })
+         break;
+      case "error":
+         return showNotification({
+            title,
+            message,
+            color: "red",
+            autoClose: 3000,
+         })
+         break;
+      case "warning":
+         return showNotification({
+            title,
+            message,
+            color: "orange",
+            autoClose: 3000,
+         })
+         break;
+      case "info":
+         return showNotification({
+            title,
+            message,
+            color: "blue",
+            autoClose: 3000,
+         })
+         break;
+   }
+}

src/index.tsx

@@ -1,3 +1,4 @@
+import cors from "@elysiajs/cors";
 import Swagger from "@elysiajs/swagger";
 import Elysia from "elysia";
 import html from "./index.html";
@@ -14,7 +15,7 @@ import PelayananRoute from "./server/routes/pelayanan_surat_route";
 import PengaduanRoute from "./server/routes/pengaduan_route";
 import TestRoute from "./server/routes/test";
 import UserRoute from "./server/routes/user_route";
-import cors from "@elysiajs/cors";
+import ConfigurationDesaRoute from "./server/routes/configuration_desa_route";
 
 const Docs = new Elysia({
   tags: ["docs"],
@@ -30,6 +31,7 @@ const Api = new Elysia({
 })
   .use(PengaduanRoute)
   .use(PelayananRoute)
+  .use(ConfigurationDesaRoute)
   .use(TestRoute)
   .use(apiAuth)
   .use(ApiKeyRoute)

src/pages/scr/dashboard/setting/detail_setting_page.tsx

@@ -1,150 +1,171 @@
-import { Button, Card, Container, Divider, Flex, Grid, Group, Input, NavLink, Stack, Table, Title } from "@mantine/core";
-import { IconCircleOff, IconGauge, IconHome2 } from "@tabler/icons-react";
+import DesaSetting from "@/components/DesaSetting";
+import {
+  Button,
+  Card,
+  Container,
+  Divider,
+  Flex,
+  Grid,
+  Group,
+  Input,
+  NavLink,
+  Stack,
+  Table,
+  Title,
+} from "@mantine/core";
+import {
+  IconBuildingBank,
+  IconCategory2,
+  IconMailSpark,
+  IconUserCog,
+} from "@tabler/icons-react";
 import { useLocation } from "react-router-dom";
 
 export default function DetailSettingPage() {
-   const { search } = useLocation();
-   const query = new URLSearchParams(search);
-   const type = query.get("type");
+  const { search } = useLocation();
+  const query = new URLSearchParams(search);
+  const type = query.get("type");
 
-   return (
-      <Container size="xl" py="xl" w={"100%"}>
-         <Grid>
-            <Grid.Col span={3}>
-               <Card
-                  radius="md"
-                  p="lg"
-                  withBorder
-                  style={{
-                     background:
-                        "linear-gradient(145deg, rgba(25,25,25,0.95), rgba(45,45,45,0.85))",
-                     borderColor: "rgba(100,100,100,0.2)",
-                     boxShadow: "0 0 20px rgba(0,255,200,0.08)",
-                  }}
-               >
-                  <NavLink
-                     href={`?type=profile`}
-                     label="Profile"
-                     leftSection={<IconHome2 size={16} stroke={1.5} />}
-                     active={type === "profile" || !type}
-                  />
-                  <NavLink
-                     href={`?type=cat-pengaduan`}
-                     label="Kategori Pengaduan"
-                     leftSection={<IconGauge size={16} stroke={1.5} />}
-                     active={type === "cat-pengaduan"}
-                  />
-                  <NavLink
-                     href={`?type=cat-pelayanan`}
-                     label="Kategori Pelayanan Surat"
-                     leftSection={<IconCircleOff size={16} stroke={1.5} />}
-                     active={type === "cat-pelayanan"}
-                  />
-                  <NavLink
-                     href={`?type=desa`}
-                     label="Desa"
-                     leftSection={<IconCircleOff size={16} stroke={1.5} />}
-                     active={type === "desa"}
-                  />
-               </Card>
-            </Grid.Col>
-            <Grid.Col span={9}>
-               <Card
-                  radius="md"
-                  p="lg"
-                  withBorder
-                  style={{
-                     background:
-                        "linear-gradient(145deg, rgba(25,25,25,0.95), rgba(45,45,45,0.85))",
-                     borderColor: "rgba(100,100,100,0.2)",
-                     boxShadow: "0 0 20px rgba(0,255,200,0.08)",
-                  }}
-               >
-                  {type === "cat-pengaduan"
-                     ? <KategoriPengaduanPage />
-                     : type === "cat-pelayanan"
-                        ? <KategoriPengaduanPage />
-                        : type === "desa"
-                           ? <KategoriPengaduanPage />
-                           : <ProfilePage />}
-               </Card>
-            </Grid.Col>
-         </Grid>
-      </Container>
-   );
+  return (
+    <Container size="xl" py="xl" w={"100%"}>
+      <Grid>
+        <Grid.Col span={3}>
+          <Card
+            radius="md"
+            p="lg"
+            withBorder
+            style={{
+              background:
+                "linear-gradient(145deg, rgba(25,25,25,0.95), rgba(45,45,45,0.85))",
+              borderColor: "rgba(100,100,100,0.2)",
+              boxShadow: "0 0 20px rgba(0,255,200,0.08)",
+            }}
+          >
+            <NavLink
+              href={`?type=profile`}
+              label="Profile"
+              leftSection={<IconUserCog size={16} stroke={1.5} />}
+              active={type === "profile" || !type}
+            />
+            <NavLink
+              href={`?type=cat-pengaduan`}
+              label="Kategori Pengaduan"
+              leftSection={<IconCategory2 size={16} stroke={1.5} />}
+              active={type === "cat-pengaduan"}
+            />
+            <NavLink
+              href={`?type=cat-pelayanan`}
+              label="Kategori Pelayanan Surat"
+              leftSection={<IconMailSpark size={16} stroke={1.5} />}
+              active={type === "cat-pelayanan"}
+            />
+            <NavLink
+              href={`?type=desa`}
+              label="Desa"
+              leftSection={<IconBuildingBank size={16} stroke={1.5} />}
+              active={type === "desa"}
+            />
+          </Card>
+        </Grid.Col>
+        <Grid.Col span={9}>
+          <Card
+            radius="md"
+            p="lg"
+            withBorder
+            style={{
+              background:
+                "linear-gradient(145deg, rgba(25,25,25,0.95), rgba(45,45,45,0.85))",
+              borderColor: "rgba(100,100,100,0.2)",
+              boxShadow: "0 0 20px rgba(0,255,200,0.08)",
+            }}
+          >
+            {type === "cat-pengaduan" ? (
+              <KategoriPengaduanPage />
+            ) : type === "cat-pelayanan" ? (
+              <KategoriPengaduanPage />
+            ) : type === "desa" ? (
+              <DesaSetting />
+            ) : (
+              <ProfilePage />
+            )}
+          </Card>
+        </Grid.Col>
+      </Grid>
+    </Container>
+  );
 }
 
 function ProfilePage() {
-   return (
+  return (
+    <Stack gap={"md"}>
+      <Flex align="center" justify="space-between">
+        <Title order={4} c="gray.2">
+          Profile Pengguna
+        </Title>
+        <Button variant="light">Edit</Button>
+      </Flex>
+      <Divider my={0} />
       <Stack gap={"md"}>
-         <Flex align="center" justify="space-between">
-            <Title order={4} c="gray.2">
-               Profile Pengguna
-            </Title>
-            <Button variant="light">Edit</Button>
-         </Flex>
-         <Divider my={0} />
-         <Stack gap={"md"}>
-            <Group gap="xl" grow>
-               <Input.Wrapper label="Nama" description="" error="">
-                  <Input value={"Amalia Dwi Yustiani"} readOnly />
-               </Input.Wrapper>
-               <Input.Wrapper label="Phone" description="" error="">
-                  <Input value={"08123456789"} readOnly />
-               </Input.Wrapper>
-            </Group>
-            <Group gap="xl" grow>
-               <Input.Wrapper label="Email" description="" error="">
-                  <Input value={"amaliadwiyustiani@gmail.com"} readOnly />
-               </Input.Wrapper>
-               <Input.Wrapper label="Role" description="" error="">
-                  <Input value={"Admin"} readOnly />
-               </Input.Wrapper>
-            </Group>
-         </Stack>
+        <Group gap="xl" grow>
+          <Input.Wrapper label="Nama" description="" error="">
+            <Input value={"Amalia Dwi Yustiani"} readOnly />
+          </Input.Wrapper>
+          <Input.Wrapper label="Phone" description="" error="">
+            <Input value={"08123456789"} readOnly />
+          </Input.Wrapper>
+        </Group>
+        <Group gap="xl" grow>
+          <Input.Wrapper label="Email" description="" error="">
+            <Input value={"amaliadwiyustiani@gmail.com"} readOnly />
+          </Input.Wrapper>
+          <Input.Wrapper label="Role" description="" error="">
+            <Input value={"Admin"} readOnly />
+          </Input.Wrapper>
+        </Group>
       </Stack>
-   )
+    </Stack>
+  );
 }
 
 function KategoriPengaduanPage() {
-   const elements = [
-      { position: 6, mass: 12.011, symbol: "C", name: "Carbon" },
-      { position: 7, mass: 14.007, symbol: "N", name: "Nitrogen" },
-      { position: 39, mass: 88.906, symbol: "Y", name: "Yttrium" },
-      { position: 56, mass: 137.33, symbol: "Ba", name: "Barium" },
-      { position: 58, mass: 140.12, symbol: "Ce", name: "Cerium" },
-   ];
+  const elements = [
+    { position: 6, mass: 12.011, symbol: "C", name: "Carbon" },
+    { position: 7, mass: 14.007, symbol: "N", name: "Nitrogen" },
+    { position: 39, mass: 88.906, symbol: "Y", name: "Yttrium" },
+    { position: 56, mass: 137.33, symbol: "Ba", name: "Barium" },
+    { position: 58, mass: 140.12, symbol: "Ce", name: "Cerium" },
+  ];
 
-   const rows = elements.map((element) => (
-      <Table.Tr key={element.name}>
-         <Table.Td>{element.position}</Table.Td>
-         <Table.Td>{element.name}</Table.Td>
-         <Table.Td>{element.symbol}</Table.Td>
-         <Table.Td>{element.mass}</Table.Td>
-      </Table.Tr>
-   ));
-   return (
+  const rows = elements.map((element) => (
+    <Table.Tr key={element.name}>
+      <Table.Td>{element.position}</Table.Td>
+      <Table.Td>{element.name}</Table.Td>
+      <Table.Td>{element.symbol}</Table.Td>
+      <Table.Td>{element.mass}</Table.Td>
+    </Table.Tr>
+  ));
+  return (
+    <Stack gap={"md"}>
+      <Flex align="center" justify="space-between">
+        <Title order={4} c="gray.2">
+          Kategori Pengaduan
+        </Title>
+        <Button variant="light">Tambah</Button>
+      </Flex>
+      <Divider my={0} />
       <Stack gap={"md"}>
-         <Flex align="center" justify="space-between">
-            <Title order={4} c="gray.2">
-               Kategori Pengaduan
-            </Title>
-            <Button variant="light">Tambah</Button>
-         </Flex>
-         <Divider my={0} />
-         <Stack gap={"md"}>
-            <Table>
-               <Table.Thead>
-                  <Table.Tr>
-                     <Table.Th>Tanggal</Table.Th>
-                     <Table.Th>Deskripsi</Table.Th>
-                     <Table.Th>Status</Table.Th>
-                     <Table.Th>User</Table.Th>
-                  </Table.Tr>
-               </Table.Thead>
-               <Table.Tbody>{rows}</Table.Tbody>
-            </Table>
-         </Stack>
+        <Table>
+          <Table.Thead>
+            <Table.Tr>
+              <Table.Th>Tanggal</Table.Th>
+              <Table.Th>Deskripsi</Table.Th>
+              <Table.Th>Status</Table.Th>
+              <Table.Th>User</Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>{rows}</Table.Tbody>
+        </Table>
       </Stack>
-   )
+    </Stack>
+  );
 }

src/server/lib/seafile.ts

@@ -162,6 +162,7 @@ export async function uploadFile(config: Config, file: File): Promise<string> {
    if (!res.ok) throw new Error(`Upload failed: ${text}`);
    return `✅ Uploaded ${file.name} successfully`;
 }
+
 export async function uploadFileBase64(config: Config, base64File: { name: string; data: string; }): Promise<string> {
    const remoteName = path.basename(base64File.name);
 
@@ -194,6 +195,38 @@ export async function uploadFileBase64(config: Config, base64File: { name: strin
    return `✅ Uploaded ${base64File.name} successfully`;
 }
 
+export async function uploadFileToFolder(config: Config, base64File: { name: string; data: string; }, folder: 'syarat-dokumen' | 'pengaduan'): Promise<string> {
+   const remoteName = path.basename(base64File.name);
+
+   // 1. Dapatkan upload link (pakai Authorization)
+   const uploadUrlResponse = await fetchWithAuth(
+      config,
+      `${config.URL}/${config.REPO}/upload-link/`
+   );
+   const uploadUrl = (await uploadUrlResponse.text()).replace(/"/g, "");
+
+   // 2. Konversi base64 ke Blob
+   const binary = Buffer.from(base64File.data, "base64");
+   const blob = new Blob([binary]);
+
+   // 3. Siapkan form-data
+   const formData = new FormData();
+   formData.append("parent_dir", "/");
+   formData.append("relative_path", folder); // tanpa slash di akhir
+   formData.append("file", blob, remoteName);
+
+   // 4. Upload file TANPA Authorization header, token di query param
+   const res = await fetch(`${uploadUrl}?token=${config.TOKEN}`, {
+      method: "POST",
+      body: formData,
+   });
+
+   const text = await res.text();
+
+   if (!res.ok) throw new Error(`Upload failed: ${text}`);
+   return `✅ Uploaded ${base64File.name} successfully`;
+}
+
 
 
 

src/server/routes/configuration_desa_route.ts

@@ -0,0 +1,48 @@
+import Elysia, { t } from "elysia";
+import { prisma } from "../lib/prisma";
+
+const ConfigurationDesaRoute = new Elysia({
+   prefix: "configuration-desa",
+   tags: ["configuration-desa"],
+})
+
+   .get("/list", async () => {
+      const data = await prisma.configuration.findMany({
+         orderBy: {
+            name: "asc"
+         }
+      })
+
+      return data
+   }, {
+      detail: {
+         summary: "List Konfigurasi",
+         description: `tool untuk mendapatkan list konfigurasi`,
+      }
+   })
+   .post("/edit", async ({ body }) => {
+      const { id, value } = body
+
+      await prisma.configuration.update({
+         where: {
+            id,
+         },
+         data: {
+            value,
+         }
+      })
+
+      return { success: true, message: 'konfigurasi sudah diperbarui' }
+   }, {
+      body: t.Object({
+         id: t.String({ minLength: 1, error: "id harus diisi" }),
+         value: t.String({ minLength: 1, error: "value harus diisi" }),
+      }),
+      detail: {
+         summary: "edit konfigurasi desa",
+         description: `tool untuk edit konfigurasi desa`
+      }
+   })
+   ;
+
+export default ConfigurationDesaRoute

src/server/routes/pengaduan_route.ts

@@ -6,7 +6,7 @@ import { mimeToExtension } from "../lib/mimetypeToExtension"
 import { generateNoPengaduan } from "../lib/no-pengaduan"
 import { normalizePhoneNumber } from "../lib/normalizePhone"
 import { prisma } from "../lib/prisma"
-import { catFile, defaultConfigSF, testConnection, uploadFile, uploadFileBase64 } from "../lib/seafile"
+import { catFile, defaultConfigSF, testConnection, uploadFile, uploadFileBase64, uploadFileToFolder } from "../lib/seafile"
 
 const PengaduanRoute = new Elysia({
    prefix: "pengaduan",
@@ -100,7 +100,8 @@ const PengaduanRoute = new Elysia({
 
    // --- PENGADUAN ---
    .post("/create", async ({ body }) => {
-      const { title, detail, location, image, idCategory, idWarga, phone } = body
+      const { title, detail, location, imageData, imageMime, idCategory, idWarga, phone } = body
+      let imageFix = null
       const noPengaduan = await generateNoPengaduan()
       let idCategoryFix = idCategory
       let idWargaFix = idWarga
@@ -110,6 +111,12 @@ const PengaduanRoute = new Elysia({
          }
       })
 
+      if (!imageData && !imageMime) {
+         const ext = mimeToExtension(imageMime)
+         imageFix = `${uuidv4()}.${ext}`
+         await uploadFileToFolder(defaultConfigSF, { name: imageFix, data: imageData }, "pengaduan")
+      }
+
       if (!category) {
          const cariCategory = await prisma.categoryPengaduan.findFirst({
             where: {
@@ -163,7 +170,7 @@ const PengaduanRoute = new Elysia({
             idCategory: idCategoryFix,
             idWarga: idWargaFix,
             location,
-            image,
+            image: imageFix,
             noPengaduan,
          },
          select: {
@@ -172,7 +179,7 @@ const PengaduanRoute = new Elysia({
       })
 
       if (!pengaduan.id) {
-         throw new Error("gagal membuat pengaduan")
+         return { success: false, message: 'gagal membuat pengaduan' }
       }
 
       await prisma.historyPengaduan.create({
@@ -188,7 +195,8 @@ const PengaduanRoute = new Elysia({
          title: t.String({ minLength: 1, error: "title harus diisi" }),
          detail: t.String({ minLength: 1, error: "detail harus diisi" }),
          location: t.String({ minLength: 1, error: "location harus diisi" }),
-         image: t.Any(),
+         imageData: t.String({ optional: true, description: "base64 encoded image data" }),
+         imageMime: t.String({ optional: true, description: "mime type of image" }),
          idCategory: t.String({ minLength: 1, error: "idCategory harus diisi" }),
          idWarga: t.String({ minLength: 1, error: "idWarga harus diisi" }),
          phone: t.String({ minLength: 1, error: "phone harus diisi" }),
@@ -622,7 +630,7 @@ const PengaduanRoute = new Elysia({
       const { fileName } = query
 
       const connect = await testConnection(defaultConfigSF)
-      console.log({connect})
+      console.log({ connect })
 
       const hasil = await catFile(defaultConfigSF, fileName)
       console.log('hasilnya', hasil)