diff --git a/src/AppRoutes.tsx b/src/AppRoutes.tsx index fc5ebc6..de98664 100644 --- a/src/AppRoutes.tsx +++ b/src/AppRoutes.tsx @@ -19,6 +19,8 @@ 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 DetailPelayananPage from "./pages/scr/dashboard/pelayanan-surat/detail_pelayanan_page"; +import DetailWargaPage from "./pages/scr/dashboard/warga/detail_warga_page"; +import ListWargaPage from "./pages/scr/dashboard/warga/list_warga_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"; @@ -104,6 +106,14 @@ export default function AppRoutes() { path="/scr/dashboard/pelayanan-surat/detail-pelayanan" element={} /> + } + /> + } + /> } diff --git a/src/clientRoutes.ts b/src/clientRoutes.ts index b1b098a..6abe3a6 100644 --- a/src/clientRoutes.ts +++ b/src/clientRoutes.ts @@ -21,6 +21,8 @@ const clientRoutes = { "/scr/dashboard/dashboard-home": "/scr/dashboard/dashboard-home", "/scr/dashboard/pelayanan-surat/list-pelayanan": "/scr/dashboard/pelayanan-surat/list-pelayanan", "/scr/dashboard/pelayanan-surat/detail-pelayanan": "/scr/dashboard/pelayanan-surat/detail-pelayanan", + "/scr/dashboard/warga/detail-warga": "/scr/dashboard/warga/detail-warga", + "/scr/dashboard/warga/list-warga": "/scr/dashboard/warga/list-warga", "/scr/dashboard/pengaduan/list": "/scr/dashboard/pengaduan/list", "/scr/dashboard/pengaduan/detail": "/scr/dashboard/pengaduan/detail", "/scr/dashboard/apikey/apikey": "/scr/dashboard/apikey/apikey", diff --git a/src/pages/scr/dashboard/dashboard_layout.tsx b/src/pages/scr/dashboard/dashboard_layout.tsx index f4241b1..169eeb5 100644 --- a/src/pages/scr/dashboard/dashboard_layout.tsx +++ b/src/pages/scr/dashboard/dashboard_layout.tsx @@ -236,10 +236,10 @@ function NavigationDashboard() { description: "Manage pelayanan surat", }, { - path: "/scr/dashboard/user", + path: "/scr/dashboard/warga/list-warga", icon: , - label: "User", - description: "Manage user", + label: "Warga", + description: "Manage warga", }, { path: "/scr/dashboard/setting", diff --git a/src/pages/scr/dashboard/pelayanan-surat/list_pelayanan_page.tsx b/src/pages/scr/dashboard/pelayanan-surat/list_pelayanan_page.tsx index db5a160..0a6d2bb 100644 --- a/src/pages/scr/dashboard/pelayanan-surat/list_pelayanan_page.tsx +++ b/src/pages/scr/dashboard/pelayanan-surat/list_pelayanan_page.tsx @@ -195,7 +195,9 @@ function ListPelayananSurat({ status }: { status: StatusKey }) { boxShadow: "0 0 20px rgba(0,255,200,0.08)", }} onClick={() => { - navigate(`/scr/dashboard/pelayanan-surat/detail-pelayanan?id=${v.id}`); + navigate( + `/scr/dashboard/pelayanan-surat/detail-pelayanan?id=${v.id}`, + ); }} > diff --git a/src/pages/scr/dashboard/warga/detail_warga_page.tsx b/src/pages/scr/dashboard/warga/detail_warga_page.tsx new file mode 100644 index 0000000..e1b6a2b --- /dev/null +++ b/src/pages/scr/dashboard/warga/detail_warga_page.tsx @@ -0,0 +1,191 @@ +import apiFetch from "@/lib/apiFetch"; +import { + Avatar, + Box, + Card, + Container, + Divider, + Flex, + Grid, + Group, + Stack, + Table, + Text, + Title +} from "@mantine/core"; +import { useShallowEffect } from "@mantine/hooks"; +import { + IconMail, + IconMapPin, + IconPhone +} from "@tabler/icons-react"; +import { useState } from "react"; +import { useLocation } from "react-router-dom"; +import useSwr from "swr"; + +export default function DetailWargaPage() { + const { search } = useLocation(); + const query = new URLSearchParams(search); + const id = query.get("id"); + + return ( + + + + + + + + + + + + + + ); +} + +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) => ( + + {element.position} + {element.name} + {element.symbol} + {element.mass} + + )); + return ( + + + + + Histori Pengaduan + + + + + + + Tanggal + Deskripsi + Status + User + + + {rows} +
+ + + ); +} + +function DetailWarga() { + 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 ( + + + + {/* Profile image */} + + + {/* Main content */} + + + Lizbeth Moore + + + Social Media Strategies + + + + + {/* Contact info */} + + + + + lizbeth.moore@email.com + + + + + +1 555-7788 + + + + + Greenway Ave, Los Angeles, CA, USA + + + + + ); +} diff --git a/src/pages/scr/dashboard/warga/list_warga_page.tsx b/src/pages/scr/dashboard/warga/list_warga_page.tsx new file mode 100644 index 0000000..cb34134 --- /dev/null +++ b/src/pages/scr/dashboard/warga/list_warga_page.tsx @@ -0,0 +1,97 @@ +import { + Button, + Card, + CloseButton, + Container, + Divider, + Flex, + Input, + Stack, + Table, + Title, +} from "@mantine/core"; +import { IconSearch } from "@tabler/icons-react"; +import { useState } from "react"; +import { useNavigate } from "react-router-dom"; + +export default function ListWargaPage() { + const navigate = useNavigate(); + const [value, setValue] = useState(""); + 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) => ( + + {element.position} + {element.name} + {element.symbol} + {element.mass} + + + + + )); + + return ( + + + + + + List Data Warga + + setValue(event.currentTarget.value)} + leftSection={} + rightSectionPointerEvents="all" + rightSection={ + setValue("")} + style={{ display: value ? undefined : "none" }} + /> + } + /> + + + + + + Tanggal + Deskripsi + Status + User + Aksi + + + {rows} +
+ + + + ); +}