133 lines
5.2 KiB
TypeScript
133 lines
5.2 KiB
TypeScript
import apiFetch from "@/lib/apiFetch";
|
|
import { Badge, Button, Card, Flex, Group, Stack, Text, Title, Tooltip } from "@mantine/core";
|
|
import { useShallowEffect } from "@mantine/hooks";
|
|
import { useNavigate } from "react-router-dom";
|
|
import useSWR from "swr";
|
|
|
|
export default function DashboardLastData() {
|
|
const navigate = useNavigate();
|
|
const { data, mutate, isLoading } = useSWR("last-update", async () => {
|
|
const res = await apiFetch.api.dashboard["last-update"].get();
|
|
return res.data
|
|
});
|
|
|
|
useShallowEffect(() => {
|
|
mutate();
|
|
}, []);
|
|
|
|
|
|
return (
|
|
<Flex justify="flex-start" gap="md">
|
|
<Card
|
|
radius="lg"
|
|
p="xl"
|
|
withBorder
|
|
w={"50%"}
|
|
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 25px rgba(0,255,200,0.08)",
|
|
}}
|
|
>
|
|
<Stack gap="sm">
|
|
<Flex align="center" pb={"sm"} justify="space-between" style={{ borderBottom: "1px solid rgba(255,255,255,0.1)" }}>
|
|
<Title order={4} c="gray.0">
|
|
Last update pengaduan
|
|
</Title>
|
|
<Button variant="subtle" size="xs" radius="md" onClick={() => navigate(`/scr/dashboard/pengaduan/list`)}>View All</Button>
|
|
</Flex>
|
|
<Stack gap="sm" mt="md" align="stretch" justify="center">
|
|
{
|
|
data && Array.isArray(data.pengaduan) && data.pengaduan.length > 0 ? data.pengaduan.map((item: any, index: number) => (
|
|
<PengaduanSection
|
|
key={index}
|
|
id={item.id}
|
|
nomer={item.noPengaduan}
|
|
judul={item.title}
|
|
status={item.status}
|
|
updated={item.updatedAt}
|
|
kategori="pengaduan"
|
|
/>
|
|
)) : <Text c="dimmed" ta={"center"} >Tidak ada data</Text>
|
|
}
|
|
</Stack>
|
|
</Stack>
|
|
</Card>
|
|
|
|
<Card
|
|
radius="lg"
|
|
p="xl"
|
|
withBorder
|
|
w={"50%"}
|
|
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 25px rgba(0,255,200,0.08)",
|
|
}}
|
|
>
|
|
<Stack gap="sm">
|
|
<Flex align="center" pb={"sm"} justify="space-between" style={{ borderBottom: "1px solid rgba(255,255,255,0.1)" }}>
|
|
<Title order={4} c="gray.0">
|
|
Last update pelayanan surat
|
|
</Title>
|
|
<Button variant="subtle" size="xs" radius="md" onClick={() => navigate(`/scr/dashboard/pelayanan-surat/list-pelayanan`)}>View All</Button>
|
|
</Flex>
|
|
<Stack gap="sm" mt="md" align="stretch" justify="center">
|
|
{
|
|
data && Array.isArray(data.pelayanan) && data.pelayanan.length > 0 ? data.pelayanan.map((item: any, index: number) => (
|
|
<PengaduanSection
|
|
key={index}
|
|
id={item.id}
|
|
nomer={item.noPengaduan}
|
|
judul={item.title}
|
|
status={item.status}
|
|
updated={item.updatedAt}
|
|
kategori="pelayanan"
|
|
/>
|
|
)) : <Text c="dimmed" ta={"center"} >Tidak ada data</Text>
|
|
}
|
|
</Stack>
|
|
</Stack>
|
|
</Card>
|
|
</Flex>
|
|
);
|
|
}
|
|
|
|
function PengaduanSection({ id, nomer, judul, status, updated, kategori }: { id: string, nomer: string, judul: string, status: string, updated: string, kategori: 'pengaduan' | 'pelayanan' }) {
|
|
const navigate = useNavigate();
|
|
|
|
return (
|
|
<Stack
|
|
gap="xs"
|
|
onClick={() => navigate(kategori == "pelayanan" ? `/scr/dashboard/pelayanan-surat/detail-pelayanan?id=${id}` : `/scr/dashboard/pengaduan/detail?id=${id}`)}
|
|
>
|
|
<Flex align="center" pb={"sm"} justify="space-between" gap="md" style={{ borderBottom: "1px solid rgba(255,255,255,0.1)" }}>
|
|
<Flex direction={"column"}>
|
|
<Text size="md" c="gray.2" lineClamp={1}>
|
|
{judul}
|
|
</Text>
|
|
<Group>
|
|
<Text size="sm" c="dimmed">
|
|
#{nomer} ∙ {updated}
|
|
</Text>
|
|
</Group>
|
|
</Flex>
|
|
<Tooltip label={status}>
|
|
<Badge size="xs" circle color={
|
|
status === "diterima"
|
|
? "green"
|
|
: status === "ditolak"
|
|
? "red"
|
|
: status === "selesai"
|
|
? "blue"
|
|
: status === "dikerjakan"
|
|
? "gray"
|
|
: "yellow"
|
|
} />
|
|
</Tooltip>
|
|
</Flex>
|
|
</Stack>
|
|
)
|
|
} |