Merge pull request 'upd : dashboard admin' (#18) from amalia/10-nov-25 into main

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

src/AppRoutes.tsx

@@ -19,6 +19,7 @@ import CredentialPage from "./pages/scr/dashboard/credential/credential_page";
 import DashboardHome from "./pages/scr/dashboard/dashboard_home";
 import ListPelayananPage from "./pages/scr/dashboard/pelayanan-surat/list_pelayanan_page";
 import ListPage from "./pages/scr/dashboard/pengaduan/list_page";
+import DetailPage from "./pages/scr/dashboard/pengaduan/detail_page";
 import ApikeyPage from "./pages/scr/dashboard/apikey/apikey_page";
 import DashboardLayout from "./pages/scr/dashboard/dashboard_layout";
 import ScrLayout from "./pages/scr/scr_layout";
@@ -102,6 +103,10 @@ export default function AppRoutes() {
               path="/scr/dashboard/pengaduan/list"
               element={<ListPage />}
             />
+            <Route
+              path="/scr/dashboard/pengaduan/detail"
+              element={<DetailPage />}
+            />
             <Route
               path="/scr/dashboard/apikey/apikey"
               element={<ApikeyPage />}

src/clientRoutes.ts

@@ -21,6 +21,7 @@ const clientRoutes = {
   "/scr/dashboard/dashboard-home": "/scr/dashboard/dashboard-home",
   "/scr/dashboard/pelayanan-surat/list-pelayanan": "/scr/dashboard/pelayanan-surat/list-pelayanan",
   "/scr/dashboard/pengaduan/list": "/scr/dashboard/pengaduan/list",
+  "/scr/dashboard/pengaduan/detail": "/scr/dashboard/pengaduan/detail",
   "/scr/dashboard/apikey/apikey": "/scr/dashboard/apikey/apikey",
   "/dir/dir": "/dir/dir",
   "/*": "/*"

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

@@ -0,0 +1,301 @@
+import apiFetch from "@/lib/apiFetch";
+import {
+   Anchor,
+   Badge,
+   Card,
+   Container,
+   Divider,
+   Flex,
+   Grid,
+   Group,
+   Stack,
+   Table,
+   Text,
+   Title
+} from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import {
+   IconAlignJustified,
+   IconCategory,
+   IconFileCertificate,
+   IconInfoTriangle,
+   IconMapPin,
+   IconMessageReport,
+   IconPhotoScan,
+   IconUser
+} from "@tabler/icons-react";
+import { useState } from "react";
+import { useLocation } from "react-router-dom";
+import useSwr from "swr";
+
+export default function DetailPengaduanPage() {
+   const { search } = useLocation();
+   const query = new URLSearchParams(search);
+   const id = query.get("id");
+
+   return (
+      <Container size="xl" py="xl" w={"100%"}>
+         <Grid>
+            <Grid.Col span={8}>
+               <Stack gap={"xl"}>
+                  <DetailDataPengaduan />
+                  <DetailDataHistori />
+               </Stack>
+            </Grid.Col>
+            <Grid.Col span={4}>
+               <DetailUserPengaduan />
+            </Grid.Col>
+         </Grid>
+      </Container>
+   );
+}
+
+function DetailDataPengaduan() {
+   return (
+      <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)",
+         }}
+      >
+         <Stack gap={"md"}>
+            <Flex align="center" justify="space-between">
+               <Group gap="xs">
+                  <Title order={4} c="gray.2">
+                     Pengaduan
+                  </Title>
+                  <Title order={4} c="dimmed">
+                     #PGf-2345-33
+                  </Title>
+               </Group>
+               <Badge
+                  size="xl"
+                  variant="light"
+                  radius="sm"
+                  color={"yellow"}
+                  style={{ textTransform: "none" }}
+               >
+                  antrian
+               </Badge>
+            </Flex>
+            <Divider my={0} />
+            <Grid>
+               <Grid.Col span={6}>
+                  <Stack gap="md">
+                     <Flex direction={"column"} justify="flex-start">
+                        <Group gap="xs">
+                           <IconAlignJustified size={20} />
+                           <Text size="md">
+                              Judul
+                           </Text>
+                        </Group>
+                        <Text size="md" c={"white"}>Judul Pengaduan</Text>
+                     </Flex>
+                     <Flex direction={"column"} justify="flex-start">
+                        <Group gap="xs">
+                           <IconMapPin size={20} />
+                           <Text size="md">
+                              Lokasi
+                           </Text>
+                        </Group>
+                        <Text size="md" c="white">fwef</Text>
+                     </Flex>
+                  </Stack>
+               </Grid.Col>
+               <Grid.Col span={6}>
+                  <Stack gap="md">
+                     <Flex direction={"column"} justify="flex-start">
+                        <Group gap="xs">
+                           <IconCategory size={20} />
+                           <Text size="md">
+                              Kategori
+                           </Text>
+                        </Group>
+                        <Text size="md" c="white">fwef</Text>
+                     </Flex>
+                     <Flex direction={"column"} justify="flex-start">
+                        <Group gap="xs">
+                           <IconPhotoScan size={20} />
+                           <Text size="md">
+                              Gambar
+                           </Text>
+                        </Group>
+                        <Anchor href="https://mantine.dev/" target="_blank">
+                           Lihat Gambar
+                        </Anchor>
+                     </Flex>
+                  </Stack>
+               </Grid.Col>
+               <Grid.Col span={12}>
+                  <Stack gap="md">
+                     <Flex direction={"column"} justify="flex-start">
+                        <Group gap="xs">
+                           <IconAlignJustified size={20} />
+                           <Text size="md">
+                              Detail
+                           </Text>
+                        </Group>
+                        <Text size="md" c="white">
+                           Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum, corporis iusto. Suscipit veritatis quas, non nobis fuga, laudantium accusantium tempora sint aliquid architecto totam esse eum excepturi nostrum fugiat ut.
+                        </Text>
+                     </Flex>
+                     <Flex direction={"column"} justify="flex-start">
+                        <Group gap="xs">
+                           <IconInfoTriangle size={20} />
+                           <Text size="md">
+                              Keterangan
+                           </Text>
+                        </Group>
+                        <Text size="md" c={"white"}>
+                           Lorem ipsum dolor, sit amet consectetur adipisicing elit. At fugiat eligendi nesciunt dolore? Maiores a cumque vitae suscipit incidunt quos beatae modi, vel, id ullam quae voluptas, deserunt quas placeat.
+                        </Text>
+                     </Flex>
+                  </Stack>
+               </Grid.Col>
+            </Grid>
+         </Stack>
+      </Card>
+   );
+}
+
+function DetailDataHistori() {
+   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 (
+      <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)",
+         }}
+      >
+         <Stack gap="md">
+            <Flex align="center" justify="space-between">
+               <Title order={4} c="gray.2">
+                  Histori Pengaduan
+               </Title>
+            </Flex>
+            <Divider my={0} />
+            <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>
+      </Card>
+
+   )
+}
+
+function DetailUserPengaduan() {
+   const [page, setPage] = useState(1);
+   const [value, setValue] = useState("");
+   const { data, mutate, isLoading } = useSwr("/", () =>
+      apiFetch.api.pengaduan.list.get({
+         query: {
+            status,
+            search: value,
+            take: "",
+            page: "",
+         },
+      }),
+   );
+
+   useShallowEffect(() => {
+      mutate();
+   }, [status, value]);
+
+   const list = data?.data || [];
+
+   return (
+      <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)",
+         }}
+      >
+         <Stack gap="md">
+            <Flex align="center" justify="space-between">
+               <Flex direction={"column"}>
+                  <Title order={4} c="gray.2">
+                     Warga
+                  </Title>
+               </Flex>
+            </Flex>
+            <Divider my={0} />
+            <Stack gap="md">
+               <Group justify="space-between" >
+                  <Group gap="xs">
+                     <IconUser size={20} />
+                     <Text size="md">
+                        Nama
+                     </Text>
+                  </Group>
+                  <Text size="md" c={"white"}>Amalia Dwi Yustiani</Text>
+               </Group>
+               <Group justify="space-between" >
+                  <Group gap="xs">
+                     <IconMapPin size={20} />
+                     <Text size="md">
+                        Telepon
+                     </Text>
+                  </Group>
+                  <Text size="md" c="white">08123456789</Text>
+               </Group>
+               <Group justify="space-between" >
+                  <Group gap="xs">
+                     <IconMessageReport size={20} />
+                     <Text size="md">
+                        Jumlah Pengaduan
+                     </Text>
+                  </Group>
+                  <Text size="md" c="white">10</Text>
+               </Group>
+               <Group justify="space-between" >
+                  <Group gap="xs">
+                     <IconFileCertificate size={20} />
+                     <Text size="md">
+                        Jumlah Pelayanan Surat
+                     </Text>
+                  </Group>
+                  <Text size="md" c="white">10</Text>
+               </Group>
+            </Stack>
+         </Stack>
+      </Card>
+   );
+}

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

@@ -115,7 +115,9 @@ type StatusKey =
   | "ditolak"
   | "selesai"
   | "semua";
+
 function ListPengaduan({ status }: { status: StatusKey }) {
+  const navigate = useNavigate();
   const [page, setPage] = useState(1);
   const [value, setValue] = useState("");
   const { data, mutate, isLoading } = useSwr("/", () =>
@@ -196,6 +198,7 @@ function ListPengaduan({ status }: { status: StatusKey }) {
               borderColor: "rgba(100,100,100,0.2)",
               boxShadow: "0 0 20px rgba(0,255,200,0.08)",
             }}
+            onClick={() => navigate(`/scr/dashboard/pengaduan/detail?id=${v.id}`)}
           >
             <Stack gap="md">
               <Flex align="center" justify="space-between">

src/server/routes/pengaduan_route.ts

@@ -563,6 +563,7 @@ const PengaduanRoute = new Elysia({
       const dataFix = data.map((item) => {
          return {
             noPengaduan: item.noPengaduan,
+            id: item.id,
             title: item.title,
             detail: item.detail,
             status: item.status,