397 lines
11 KiB
TypeScript
397 lines
11 KiB
TypeScript
import apiFetch from "@/lib/apiFetch";
|
|
import {
|
|
Anchor,
|
|
Badge,
|
|
Button,
|
|
Card,
|
|
Container,
|
|
Divider,
|
|
Flex,
|
|
Grid,
|
|
Group,
|
|
Image,
|
|
Modal,
|
|
Stack,
|
|
Table,
|
|
Text,
|
|
Textarea,
|
|
Title,
|
|
} from "@mantine/core";
|
|
import { useDisclosure, 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() {
|
|
const [opened, { open, close }] = useDisclosure(false);
|
|
const [catModal, setCatModal] = useState<"tolak" | "terima">("tolak");
|
|
const [imageSrc, setImageSrc] = useState<string | null>(null);
|
|
const [openedModalImage, { open: openModalImage, close: closeModalImage }] =
|
|
useDisclosure(false);
|
|
|
|
async function handleLihatGambar() {
|
|
const res = await apiFetch.api.pengaduan.image.get({
|
|
query: {
|
|
fileName: "57d5ce89-7d18-4244-9f4c-ca21b70adb7e",
|
|
},
|
|
});
|
|
console.error("client", res);
|
|
// const blob = await res.data?.blob();
|
|
// setImageSrc(URL.createObjectURL(blob!));
|
|
// openModalImage();
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Modal
|
|
opened={opened}
|
|
onClose={close}
|
|
title={"Konfirmasi"}
|
|
centered
|
|
overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
|
|
>
|
|
<Stack gap="sm">
|
|
{catModal === "tolak" ? (
|
|
<>
|
|
<Text>
|
|
Anda yakin ingin menolak pengaduan ini? Berikan alasan penolakan
|
|
</Text>
|
|
|
|
<Textarea size="md" minRows={5} />
|
|
<Group justify="center" grow>
|
|
<Button variant="light" onClick={close}>
|
|
Batal
|
|
</Button>
|
|
<Button variant="filled" color="red" onClick={close}>
|
|
Tolak
|
|
</Button>
|
|
</Group>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Text>Anda yakin ingin menerima pengaduan ini?</Text>
|
|
<Group justify="center" grow>
|
|
<Button variant="light" onClick={close}>
|
|
Batal
|
|
</Button>
|
|
<Button variant="filled" color="green" onClick={close}>
|
|
Terima
|
|
</Button>
|
|
</Group>
|
|
</>
|
|
)}
|
|
</Stack>
|
|
</Modal>
|
|
|
|
<Modal
|
|
opened={openedModalImage}
|
|
onClose={closeModalImage}
|
|
title="Gambar Pengaduan"
|
|
centered
|
|
overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
|
|
>
|
|
<Image src={imageSrc!} />
|
|
</Modal>
|
|
|
|
<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="#" onClick={handleLihatGambar}>
|
|
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.Col span={12}>
|
|
<Group justify="center" grow>
|
|
<Button
|
|
variant="light"
|
|
onClick={() => {
|
|
setCatModal("tolak");
|
|
open();
|
|
}}
|
|
>
|
|
Tolak
|
|
</Button>
|
|
<Button
|
|
variant="filled"
|
|
onClick={() => {
|
|
setCatModal("terima");
|
|
open();
|
|
}}
|
|
>
|
|
Terima
|
|
</Button>
|
|
</Group>
|
|
</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>
|
|
);
|
|
}
|