wibu/jenna-mcp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update: dashboard admin

Browse Source 
Deskripsi:
- tampilan detail pengaduan

No Issues
This commit is contained in:
amaliadwiy
2025-11-11 11:00:54 +08:00
parent 2aaa44cf14
commit ddefbbbbff
1 changed files with 151 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

258
src/pages/scr/dashboard/pengaduan/detail_page.tsx
View File

@@ -2,18 +2,21 @@ import apiFetch from "@/lib/apiFetch";
import { import {
Anchor, Anchor,
Badge, Badge,
Button,
Card, Card,
Container, Container,
Divider, Divider,
Flex, Flex,
Grid, Grid,
Group, Group,
Modal,
Stack, Stack,
Table, Table,
Text, Text,
Textarea,
Title Title
} from "@mantine/core"; } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks"; import { useDisclosure, useShallowEffect } from "@mantine/hooks";
import { import {
IconAlignJustified, IconAlignJustified,
IconCategory, IconCategory,
@@ -51,115 +54,156 @@ export default function DetailPengaduanPage() {
} }
function DetailDataPengaduan() { function DetailDataPengaduan() {
const [opened, { open, close }] = useDisclosure(false);
const [catModal, setCatModal] = useState<'tolak' | 'terima'>('tolak');
return ( return (
<Card <>
radius="md" <Modal opened={opened} onClose={close} title={"Konfirmasi"} centered overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}>
p="lg" <Stack gap="sm">
withBorder {
style={{ catModal === 'tolak'
background: ? (
"linear-gradient(145deg, rgba(25,25,25,0.95), rgba(45,45,45,0.85))", <>
borderColor: "rgba(100,100,100,0.2)", <Text>Anda yakin ingin menolak pengaduan ini? Berikan alasan penolakan</Text>
boxShadow: "0 0 20px rgba(0,255,200,0.08)",
}} <Textarea size="md" minRows={5} />
> <Group justify="center" grow>
<Stack gap={"md"}> <Button variant="light" onClick={close}>Batal</Button>
<Flex align="center" justify="space-between"> <Button variant="filled" color="red" onClick={close}>Tolak</Button>
<Group gap="xs"> </Group>
<Title order={4} c="gray.2"> </>
Pengaduan )
</Title> :
<Title order={4} c="dimmed"> (
#PGf-2345-33 <>
</Title> <Text>Anda yakin ingin menerima pengaduan ini?</Text>
</Group> <Group justify="center" grow>
<Badge <Button variant="light" onClick={close}>Batal</Button>
size="xl" <Button variant="filled" color="green" onClick={close}>Terima</Button>
variant="light" </Group>
radius="sm" </>
color={"yellow"} )
style={{ textTransform: "none" }} }
>
antrian </Stack>
</Badge> </Modal>
</Flex>
<Divider my={0} /> <Card
<Grid> radius="md"
<Grid.Col span={6}> p="lg"
<Stack gap="md"> withBorder
<Flex direction={"column"} justify="flex-start"> style={{
<Group gap="xs"> background:
<IconAlignJustified size={20} /> "linear-gradient(145deg, rgba(25,25,25,0.95), rgba(45,45,45,0.85))",
<Text size="md"> borderColor: "rgba(100,100,100,0.2)",
Judul 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="https://mantine.dev/" target="_blank">
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> </Text>
</Group> </Flex>
<Text size="md" c={"white"}>Judul Pengaduan</Text> <Flex direction={"column"} justify="flex-start">
</Flex> <Group gap="xs">
<Flex direction={"column"} justify="flex-start"> <IconInfoTriangle size={20} />
<Group gap="xs"> <Text size="md">
<IconMapPin size={20} /> Keterangan
<Text size="md"> </Text>
Lokasi </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> </Text>
</Group> </Flex>
<Text size="md" c="white">fwef</Text> </Stack>
</Flex> </Grid.Col>
</Stack> <Grid.Col span={12}>
</Grid.Col> <Group justify="center" grow>
<Grid.Col span={6}> <Button variant="light" onClick={() => { setCatModal('tolak'); open() }}>Tolak</Button>
<Stack gap="md"> <Button variant="filled" onClick={() => { setCatModal('terima'); open() }}>Terima</Button>
<Flex direction={"column"} justify="flex-start"> </Group>
<Group gap="xs"> </Grid.Col>
<IconCategory size={20} /> </Grid>
<Text size="md"> </Stack>
Kategori </Card>
</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="https://mantine.dev/" target="_blank">
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>
</Stack>
</Card>
); );
} }