src/pages/scr/dashboard/pengaduan/detail_page.tsx

@@ -1,3 +1,4 @@
+import notification from "@/components/notificationGlobal";
 import apiFetch from "@/lib/apiFetch";
 import {
   Anchor,
@@ -17,7 +18,7 @@ import {
   Textarea,
   Title,
 } from "@mantine/core";
-import { useDisclosure } from "@mantine/hooks";
+import { useDisclosure, useShallowEffect } from "@mantine/hooks";
 import {
   IconAlignJustified,
   IconCategory,
@@ -25,14 +26,15 @@ import {
   IconInfoTriangle,
   IconMapPin,
   IconMessageReport,
+  IconPhone,
   IconPhotoScan,
   IconUser,
 } from "@tabler/icons-react";
+import type { User } from "generated/prisma";
 import _ from "lodash";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useLocation } from "react-router-dom";
 import useSwr from "swr";
-import { useShallowEffect } from "@mantine/hooks";
 
 export default function DetailPengaduanPage() {
   const { search } = useLocation();
@@ -55,7 +57,7 @@ export default function DetailPengaduanPage() {
       <Grid>
         <Grid.Col span={8}>
           <Stack gap={"xl"}>
-            <DetailDataPengaduan data={data?.data?.pengaduan} />
+            <DetailDataPengaduan data={data?.data?.pengaduan} onAction={() => { mutate(); }} />
             <DetailDataHistori data={data?.data?.history} />
           </Stack>
         </Grid.Col>
@@ -67,24 +69,57 @@ export default function DetailPengaduanPage() {
   );
 }
 
-function DetailDataPengaduan({ data }: { data: any }) {
+function DetailDataPengaduan({ data, onAction }: { data: any, onAction: () => void }) {
   const [opened, { open, close }] = useDisclosure(false);
   const [catModal, setCatModal] = useState<"tolak" | "terima">("tolak");
   const [imageSrc, setImageSrc] = useState<string | null>(null);
   const [openedModalImage, { open: openModalImage, close: closeModalImage }] =
     useDisclosure(false);
+  const [keterangan, setKeterangan] = useState("");
+  const [host, setHost] = useState<User | null>(null);
 
-  // async function handleLihatGambar() {
-  //   const res = await apiFetch.api.pengaduan.image.get({
-  //     query: {
-  //       fileName: "57d5ce89-7d18-4244-9f4c-ca21b70adb7e",
-  //     },
-  //   });
-  //   console.error("client", res);
-  //   // const blob = await res.data?.blob();
-  //   // setImageSrc(URL.createObjectURL(blob!));
-  //   // openModalImage();
-  // }
+  useEffect(() => {
+    async function fetchHost() {
+      const { data } = await apiFetch.api.user.find.get();
+      setHost(data?.user ?? null);
+    }
+    fetchHost();
+  }, []);
+
+  const handleKonfirmasi = async (cat: "terima" | "tolak") => {
+    try {
+      const res = await apiFetch.api.pengaduan["update-status"].post({
+        id: data?.id,
+        status: cat == 'tolak' ? 'ditolak' : data.status == 'antrian' ? 'diterima' : data.status == 'diterima' ? 'dikerjakan' : 'selesai',
+        keterangan: keterangan,
+        idUser: host?.id ?? ""
+      });
+
+      if (res?.status === 200) {
+        onAction();
+        close();
+        notification({
+          title: "Success",
+          message: "Success update pengaduan",
+          type: "success",
+        });
+      } else {
+        notification({
+          title: "Error",
+          message: "Failed to update pengaduan",
+          type: "error",
+        });
+      }
+
+    } catch (error) {
+      console.error(error);
+      notification({
+        title: "Error",
+        message: "Failed to update pengaduan",
+        type: "error",
+      });
+    }
+  }
 
   return (
     <>
@@ -94,7 +129,6 @@ function DetailDataPengaduan({ data }: { data: any }) {
         opened={opened}
         onClose={close}
         title={"Konfirmasi"}
-        centered
         overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
       >
         <Stack gap="sm">
@@ -104,25 +138,25 @@ function DetailDataPengaduan({ data }: { data: any }) {
                 Anda yakin ingin menolak pengaduan ini? Berikan alasan penolakan
               </Text>
 
-              <Textarea size="md" minRows={5} />
+              <Textarea size="md" minRows={5} value={keterangan} onChange={(e) => setKeterangan(e.target.value)} />
               <Group justify="center" grow>
                 <Button variant="light" onClick={close}>
                   Batal
                 </Button>
-                <Button variant="filled" color="red" onClick={close}>
+                <Button variant="filled" color="red" disabled={keterangan.length < 1} onClick={() => handleKonfirmasi("tolak")}>
                   Tolak
                 </Button>
               </Group>
             </>
           ) : (
             <>
-              <Text>Anda yakin ingin menerima pengaduan ini?</Text>
+              <Text>Anda yakin ingin {data?.status == 'antrian' ? 'menerima' : data.status == 'diterima' ? 'mengerjakan' : 'menyelesaikan'} pengaduan ini?</Text>
               <Group justify="center" grow>
                 <Button variant="light" onClick={close}>
-                  Batal
+                  Tidak
                 </Button>
-                <Button variant="filled" color="green" onClick={close}>
-                  Terima
+                <Button variant="filled" color="green" onClick={() => handleKonfirmasi("terima")}>
+                  Ya
                 </Button>
               </Group>
             </>
@@ -136,7 +170,6 @@ function DetailDataPengaduan({ data }: { data: any }) {
         opened={openedModalImage}
         onClose={closeModalImage}
         title="Gambar Pengaduan"
-        centered
         overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
       >
         <Image src={imageSrc!} />
@@ -175,7 +208,7 @@ function DetailDataPengaduan({ data }: { data: any }) {
                     : data?.status === "selesai"
                       ? "blue"
                       : data?.status === "dikerjakan"
-                        ? "purple"
+                        ? "gray"
                         : "yellow"
               }
               style={{ textTransform: "none" }}
@@ -256,26 +289,54 @@ function DetailDataPengaduan({ data }: { data: any }) {
               </Stack>
             </Grid.Col>
             <Grid.Col span={12}>
-              <Group justify="center" grow>
-                <Button
-                  variant="light"
-                  onClick={() => {
-                    setCatModal("tolak");
-                    open();
-                  }}
-                >
-                  Tolak
-                </Button>
-                <Button
-                  variant="filled"
-                  onClick={() => {
-                    setCatModal("terima");
-                    open();
-                  }}
-                >
-                  Terima
-                </Button>
-              </Group>
+              {
+                data?.status === "antrian" ? (
+                  <Group justify="center" grow>
+                    <Button
+                      variant="light"
+                      onClick={() => {
+                        setCatModal("tolak");
+                        open();
+                      }}
+                    >
+                      Tolak
+                    </Button>
+                    <Button
+                      variant="filled"
+                      onClick={() => {
+                        setCatModal("terima");
+                        open();
+                      }}
+                    >
+                      Terima
+                    </Button>
+                  </Group>
+                ) : data?.status === "diterima" ? (
+                  <Group justify="center" grow>
+                    <Button
+                      variant="filled"
+                      onClick={() => {
+                        setCatModal("terima");
+                        open();
+                      }}
+                    >
+                      Kerjakan
+                    </Button>
+                  </Group>
+                ) : data?.status === "dikerjakan" ? (
+                  <Group justify="center" grow>
+                    <Button
+                      variant="filled"
+                      onClick={() => {
+                        setCatModal("terima");
+                        open();
+                      }}
+                    >
+                      Selesai
+                    </Button>
+                  </Group>
+                ) : <></>
+              }
             </Grid.Col>
           </Grid>
         </Stack>
@@ -317,10 +378,10 @@ function DetailDataHistori({ data }: { data: any }) {
             {
               data?.map((item: any) => (
                 <Table.Tr key={item.id}>
-                  <Table.Td>{item.createdAt}</Table.Td>
+                  <Table.Td style={{ whiteSpace: "nowrap" }}>{item.createdAt}</Table.Td>
                   <Table.Td>{item.deskripsi}</Table.Td>
                   <Table.Td>{item.status}</Table.Td>
-                  <Table.Td>{item.user}</Table.Td>
+                  <Table.Td style={{ whiteSpace: "nowrap" }}>{item.nameUser ? item.nameUser : "-"}</Table.Td>
                 </Table.Tr>
               ))
             }
@@ -365,7 +426,7 @@ function DetailUserPengaduan({ data }: { data: any }) {
           </Group>
           <Group justify="space-between">
             <Group gap="xs">
-              <IconMapPin size={20} />
+              <IconPhone size={20} />
               <Text size="md">Telepon</Text>
             </Group>
             <Text size="md" c="white">

src/pages/scr/dashboard/pengaduan/list_page.tsx

@@ -24,7 +24,7 @@ import {
 import { useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import useSwr from "swr";
-import { proxy } from "valtio";
+import { proxy, subscribe } from "valtio";
 
 const state = proxy({ reload: "" });
 function reloadState() {
@@ -124,21 +124,28 @@ function ListPengaduan({ status }: { status: StatusKey }) {
   const navigate = useNavigate();
   const [page, setPage] = useState(1);
   const [value, setValue] = useState("");
-  const { data, mutate, isLoading } = useSwr("/", () =>
-    apiFetch.api.pengaduan.list.get({
+  const { data, mutate, isLoading } = useSwr("/", async () => {
+    const res = await apiFetch.api.pengaduan.list.get({
       query: {
         status,
         search: value,
         take: "",
         page: "",
       },
-    }),
-  );
+    });
+
+    return Array.isArray(res?.data) ? res.data : []; // ⬅ paksa return array
+  });
 
   useShallowEffect(() => {
     mutate();
   }, [status, value]);
 
+  useShallowEffect(() => {
+    const unsubscribe = subscribe(state, () => mutate());
+    return () => unsubscribe();
+  }, []);
+
   if (isLoading)
     return (
       <Card
@@ -156,7 +163,7 @@ function ListPengaduan({ status }: { status: StatusKey }) {
       </Card>
     );
 
-  const list = data?.data || [];
+  const list = data || [];
 
   return (
     <Stack gap="xl">
@@ -190,7 +197,7 @@ function ListPengaduan({ status }: { status: StatusKey }) {
           </Stack>
         </Flex>
       ) : (
-        list?.map((v: any) => (
+        Array.isArray(list) && list?.map((v: any) => (
           <Card
             key={v.id}
             radius="lg"
@@ -233,7 +240,7 @@ function ListPengaduan({ status }: { status: StatusKey }) {
                         : v.status === "selesai"
                           ? "blue"
                           : v.status === "dikerjakan"
-                            ? "purple"
+                            ? "gray"
                             : "yellow"
                   }
                   style={{ textTransform: "none" }}

src/server/routes/pengaduan_route.ts

@@ -383,7 +383,14 @@ Respon:
             id: item.id,
             deskripsi: item.deskripsi,
             status: item.status,
-            createdAt: item.createdAt.toLocaleDateString("id-ID", { day: "numeric", month: "long", year: "numeric" }),
+            createdAt: item.createdAt.toLocaleString("id-ID", {
+               day: "2-digit",
+               month: "short",
+               year: "numeric",
+               hour: "2-digit",
+               minute: "2-digit",
+               hour12: false
+            }),
             idUser: item.idUser,
             nameUser: item.User?.name,
          }