diff --git a/src/AppRoutes.tsx b/src/AppRoutes.tsx
index 163c790..74aebc0 100644
--- a/src/AppRoutes.tsx
+++ b/src/AppRoutes.tsx
@@ -17,6 +17,7 @@ import FormSuratKeteranganKelakuanBaik from "./pages/darmasaba/form_surat_ketera
import Home from "./pages/Home";
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 ApikeyPage from "./pages/scr/dashboard/apikey/apikey_page";
import DashboardLayout from "./pages/scr/dashboard/dashboard_layout";
@@ -93,6 +94,10 @@ export default function AppRoutes() {
path="/scr/dashboard/dashboard-home"
element={}
/>
+ }
+ />
}
diff --git a/src/clientRoutes.ts b/src/clientRoutes.ts
index 5db3d11..d141a3b 100644
--- a/src/clientRoutes.ts
+++ b/src/clientRoutes.ts
@@ -19,6 +19,7 @@ const clientRoutes = {
"/scr/dashboard": "/scr/dashboard",
"/scr/dashboard/credential/credential": "/scr/dashboard/credential/credential",
"/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/apikey/apikey": "/scr/dashboard/apikey/apikey",
"/dir/dir": "/dir/dir",
diff --git a/src/pages/scr/dashboard/dashboard_layout.tsx b/src/pages/scr/dashboard/dashboard_layout.tsx
index 21c53bb..f4241b1 100644
--- a/src/pages/scr/dashboard/dashboard_layout.tsx
+++ b/src/pages/scr/dashboard/dashboard_layout.tsx
@@ -230,7 +230,7 @@ function NavigationDashboard() {
description: "Manage pengaduan warga",
},
{
- path: "/scr/dashboard/pelayanan",
+ path: "/scr/dashboard/pelayanan-surat/list-pelayanan",
icon: ,
label: "Pelayanan Surat",
description: "Manage pelayanan surat",
diff --git a/src/pages/scr/dashboard/pelayanan-surat/list_pelayanan_page.tsx b/src/pages/scr/dashboard/pelayanan-surat/list_pelayanan_page.tsx
new file mode 100644
index 0000000..6a5c0aa
--- /dev/null
+++ b/src/pages/scr/dashboard/pelayanan-surat/list_pelayanan_page.tsx
@@ -0,0 +1,271 @@
+import apiFetch from "@/lib/apiFetch";
+import {
+ Badge,
+ Card,
+ CloseButton,
+ Container,
+ Divider,
+ Flex,
+ Group,
+ Input,
+ Stack,
+ Tabs,
+ Text,
+ Title,
+} from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import {
+ IconAlignJustified,
+ IconClockHour3,
+ IconFileSad,
+ IconMapPin,
+ IconSearch,
+} from "@tabler/icons-react";
+import { useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import useSwr from "swr";
+import { proxy } from "valtio";
+
+const state = proxy({ reload: "" });
+function reloadState() {
+ state.reload = Math.random().toString();
+}
+
+export default function PelayananSuratListPage() {
+ const { search } = useLocation();
+ const query = new URLSearchParams(search);
+ const status = query.get("status") as StatusKey;
+
+ return (
+
+
+
+
+
+
+ );
+}
+
+function TabListPelayananSurat({ status }: { status: string }) {
+ const navigate = useNavigate();
+ const dataCount = useSwr("/pelayanan-surat/count", () =>
+ apiFetch.api.pengaduan.count.get().then((res) => res.data),
+ );
+
+ return (
+
+
+ {
+ navigate("?status=semua");
+ }}
+ >
+ Semua ({dataCount?.data?.semua || 0})
+
+ {
+ navigate("?status=antrian");
+ }}
+ >
+ Antrian ({dataCount?.data?.antrian || 0})
+
+ {
+ navigate("?status=diterima");
+ }}
+ >
+ Diterima ({dataCount?.data?.diterima || 0})
+
+ {
+ navigate("?status=dikerjakan");
+ }}
+ >
+ Dikerjakan ({dataCount?.data?.dikerjakan || 0})
+
+ {
+ navigate("?status=selesai");
+ }}
+ >
+ Selesai ({dataCount?.data?.selesai || 0})
+
+ {
+ navigate("?status=ditolak");
+ }}
+ >
+ Ditolak ({dataCount?.data?.ditolak || 0})
+
+
+
+ );
+}
+
+type StatusKey =
+ | "antrian"
+ | "diterima"
+ | "dikerjakan"
+ | "ditolak"
+ | "selesai"
+ | "semua";
+function ListPelayananSurat({ status }: { status: StatusKey }) {
+ 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]);
+
+ if (isLoading)
+ return (
+
+
+ Loading pengaduan...
+
+
+ );
+
+ const list = data?.data || [];
+
+ return (
+
+
+ setValue(event.currentTarget.value)}
+ leftSection={}
+ rightSectionPointerEvents="all"
+ rightSection={
+ setValue("")}
+ style={{ display: value ? undefined : "none" }}
+ />
+ }
+ />
+ {/*
+ Menampilkan {Number(data?.data?.length) * (page - 1) + 1} – {Math.min(10, Number(data?.data?.length) * page)} dari {Number(data?.data?.length)}
+
+ */}
+
+ {list.length === 0 ? (
+
+
+
+
+ No pengaduan have been added yet.
+
+
+
+ ) : (
+ list.map((v: any) => (
+
+
+
+
+
+ {v.title}
+
+
+
+ #{v.noPengaduan}
+
+
+ {v.updatedAt}
+
+
+
+
+ {v.status}
+
+
+
+
+
+
+
+
+ Tanggal Aduan
+
+
+ {v.createdAt}
+
+
+
+
+
+ Lokasi
+
+
+ {v.location}
+
+
+
+
+
+ Detail
+
+
+ {v.detail}
+
+
+
+
+ ))
+ )}
+
+ );
+}
diff --git a/src/pages/scr/dashboard/pengaduan/list_page.tsx b/src/pages/scr/dashboard/pengaduan/list_page.tsx
index 8bf33e8..547b79d 100644
--- a/src/pages/scr/dashboard/pengaduan/list_page.tsx
+++ b/src/pages/scr/dashboard/pengaduan/list_page.tsx
@@ -11,7 +11,7 @@ import {
Stack,
Tabs,
Text,
- Title
+ Title,
} from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import {
@@ -108,7 +108,13 @@ function TabListPengaduan({ status }: { status: string }) {
);
}
-type StatusKey = "antrian" | "diterima" | "dikerjakan" | "ditolak" | "selesai" | "semua";
+type StatusKey =
+ | "antrian"
+ | "diterima"
+ | "dikerjakan"
+ | "ditolak"
+ | "selesai"
+ | "semua";
function ListPengaduan({ status }: { status: StatusKey }) {
const [page, setPage] = useState(1);
const [value, setValue] = useState("");
@@ -158,8 +164,8 @@ function ListPengaduan({ status }: { status: StatusKey }) {
rightSection={
setValue('')}
- style={{ display: value ? undefined : 'none' }}
+ onClick={() => setValue("")}
+ style={{ display: value ? undefined : "none" }}
/>
}
/>