upd: dashboard admin

Deskripsi:
- tampilan profile;2A
- tampilan list category pengaduan
- tampilan list category pelayanan surat
- tampilan list configurasi desa

No Issues

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 (
+      <Container size="xl" py="xl" w={"100%"}>
+         <Grid>
+            <Grid.Col span={3}>
+               <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)",
+                  }}
+               >
+                  <NavLink
+                     href={`?type=profile`}
+                     label="Profile"
+                     leftSection={<IconHome2 size={16} stroke={1.5} />}
+                     active={type === "profile" || !type}
+                  />
+                  <NavLink
+                     href={`?type=cat-pengaduan`}
+                     label="Kategori Pengaduan"
+                     leftSection={<IconGauge size={16} stroke={1.5} />}
+                     active={type === "cat-pengaduan"}
+                  />
+                  <NavLink
+                     href={`?type=cat-pelayanan`}
+                     label="Kategori Pelayanan Surat"
+                     leftSection={<IconCircleOff size={16} stroke={1.5} />}
+                     active={type === "cat-pelayanan"}
+                  />
+                  <NavLink
+                     href={`?type=desa`}
+                     label="Desa"
+                     leftSection={<IconCircleOff size={16} stroke={1.5} />}
+                     active={type === "desa"}
+                  />
+               </Card>
+            </Grid.Col>
+            <Grid.Col span={9}>
+               <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)",
+                  }}
+               >
+                  {type === "cat-pengaduan"
+                     ? <KategoriPengaduanPage />
+                     : type === "cat-pelayanan"
+                        ? <KategoriPengaduanPage />
+                        : type === "desa"
+                           ? <KategoriPengaduanPage />
+                           : <ProfilePage />}
+               </Card>
+            </Grid.Col>
+         </Grid>
+      </Container>
+   );
+}
+
+function ProfilePage() {
+   return (
+      <Stack gap={"md"}>
+         <Flex align="center" justify="space-between">
+            <Title order={4} c="gray.2">
+               Profile Pengguna
+            </Title>
+            <Button variant="light">Edit</Button>
+         </Flex>
+         <Divider my={0} />
+         <Stack gap={"md"}>
+            <Group gap="xl" grow>
+               <Input.Wrapper label="Nama" description="" error="">
+                  <Input value={"Amalia Dwi Yustiani"} readOnly />
+               </Input.Wrapper>
+               <Input.Wrapper label="Phone" description="" error="">
+                  <Input value={"08123456789"} readOnly />
+               </Input.Wrapper>
+            </Group>
+            <Group gap="xl" grow>
+               <Input.Wrapper label="Email" description="" error="">
+                  <Input value={"amaliadwiyustiani@gmail.com"} readOnly />
+               </Input.Wrapper>
+               <Input.Wrapper label="Role" description="" error="">
+                  <Input value={"Admin"} readOnly />
+               </Input.Wrapper>
+            </Group>
+         </Stack>
+      </Stack>
+   )
+}
+
+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) => (
+      <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 (
+      <Stack gap={"md"}>
+         <Flex align="center" justify="space-between">
+            <Title order={4} c="gray.2">
+               Kategori Pengaduan
+            </Title>
+            <Button variant="light">Tambah</Button>
+         </Flex>
+         <Divider my={0} />
+         <Stack gap={"md"}>
+            <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>
+      </Stack>
+   )
+}