diff --git a/src/AppRoutes.tsx b/src/AppRoutes.tsx
index de98664..f0b024d 100644
--- a/src/AppRoutes.tsx
+++ b/src/AppRoutes.tsx
@@ -25,6 +25,7 @@ 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 DetailSettingPage from "./pages/scr/dashboard/setting/detail_setting_page";
import ScrLayout from "./pages/scr/scr_layout";
import DirPage from "./pages/dir/dir_page";
import NotFound from "./pages/NotFound";
@@ -126,6 +127,10 @@ export default function AppRoutes() {
path="/scr/dashboard/apikey/apikey"
element={}
/>
+ }
+ />
} />
diff --git a/src/clientRoutes.ts b/src/clientRoutes.ts
index 6abe3a6..9329ce6 100644
--- a/src/clientRoutes.ts
+++ b/src/clientRoutes.ts
@@ -26,6 +26,7 @@ const clientRoutes = {
"/scr/dashboard/pengaduan/list": "/scr/dashboard/pengaduan/list",
"/scr/dashboard/pengaduan/detail": "/scr/dashboard/pengaduan/detail",
"/scr/dashboard/apikey/apikey": "/scr/dashboard/apikey/apikey",
+ "/scr/dashboard/setting/detail-setting": "/scr/dashboard/setting/detail-setting",
"/dir/dir": "/dir/dir",
"/*": "/*"
} as const;
diff --git a/src/pages/scr/dashboard/dashboard_layout.tsx b/src/pages/scr/dashboard/dashboard_layout.tsx
index 169eeb5..2fc3115 100644
--- a/src/pages/scr/dashboard/dashboard_layout.tsx
+++ b/src/pages/scr/dashboard/dashboard_layout.tsx
@@ -242,7 +242,7 @@ function NavigationDashboard() {
description: "Manage warga",
},
{
- path: "/scr/dashboard/setting",
+ path: "/scr/dashboard/setting/detail-setting",
icon: ,
label: "Setting",
description:
diff --git a/src/pages/scr/dashboard/setting/detail_setting_page.tsx b/src/pages/scr/dashboard/setting/detail_setting_page.tsx
new file mode 100644
index 0000000..ec6e714
--- /dev/null
+++ b/src/pages/scr/dashboard/setting/detail_setting_page.tsx
@@ -0,0 +1,150 @@
+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 { useLocation } from "react-router-dom";
+
+export default function DetailSettingPage() {
+ const { search } = useLocation();
+ const query = new URLSearchParams(search);
+ const type = query.get("type");
+
+ return (
+
+
+
+
+ }
+ active={type === "profile" || !type}
+ />
+ }
+ active={type === "cat-pengaduan"}
+ />
+ }
+ active={type === "cat-pelayanan"}
+ />
+ }
+ active={type === "desa"}
+ />
+
+
+
+
+ {type === "cat-pengaduan"
+ ?
+ : type === "cat-pelayanan"
+ ?
+ : type === "desa"
+ ?
+ : }
+
+
+
+
+ );
+}
+
+function ProfilePage() {
+ return (
+
+
+
+ Profile Pengguna
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+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 rows = elements.map((element) => (
+
+ {element.position}
+ {element.name}
+ {element.symbol}
+ {element.mass}
+
+ ));
+ return (
+
+
+
+ Kategori Pengaduan
+
+
+
+
+
+
+
+
+ Tanggal
+ Deskripsi
+ Status
+ User
+
+
+ {rows}
+
+
+
+ )
+}
diff --git a/src/pages/scr/dashboard/warga/detail_warga_page.tsx b/src/pages/scr/dashboard/warga/detail_warga_page.tsx
index e1b6a2b..a4a3d04 100644
--- a/src/pages/scr/dashboard/warga/detail_warga_page.tsx
+++ b/src/pages/scr/dashboard/warga/detail_warga_page.tsx
@@ -1,191 +1,182 @@
import apiFetch from "@/lib/apiFetch";
import {
- Avatar,
- Box,
- Card,
- Container,
- Divider,
- Flex,
- Grid,
- Group,
- Stack,
- Table,
- Text,
- Title
+ 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 { 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");
+ const { search } = useLocation();
+ const query = new URLSearchParams(search);
+ const id = query.get("id");
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
+ 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 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}
-
-
-
- );
+ 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: "",
- },
- }),
- );
+ 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]);
+ useShallowEffect(() => {
+ mutate();
+ }, [status, value]);
- const list = data?.data || [];
+ const list = data?.data || [];
- return (
-
-
-
- {/* Profile image */}
-
+ return (
+
+
+
+ {/* Profile image */}
+
- {/* Main content */}
-
-
- Lizbeth Moore
-
-
- Social Media Strategies
-
-
-
+ {/* Main content */}
+
+
+ Lizbeth Moore
+
+
+ Social Media Strategies
+
+
+
- {/* Contact info */}
-
-
-
-
- lizbeth.moore@email.com
-
+ {/* Contact info */}
+
+
+
+
+ lizbeth.moore@email.com
+
-
-
- +1 555-7788
-
+
+
+ +1 555-7788
+
-
-
- Greenway Ave, Los Angeles, CA, USA
-
-
-
+
+
+ Greenway Ave, Los Angeles, CA, USA
+
+
- );
+
+ );
}