update: dashboard admin

Deskripsi:
- tampilan detail pengaduan

No Issues

src/pages/scr/dashboard/pengaduan/detail_page.tsx

@@ -2,18 +2,21 @@ import apiFetch from "@/lib/apiFetch";
 import {
    Anchor,
    Badge,
+   Button,
    Card,
    Container,
    Divider,
    Flex,
    Grid,
    Group,
+   Modal,
    Stack,
    Table,
    Text,
+   Textarea,
    Title
 } from "@mantine/core";
-import { useShallowEffect } from "@mantine/hooks";
+import { useDisclosure, useShallowEffect } from "@mantine/hooks";
 import {
    IconAlignJustified,
    IconCategory,
@@ -51,7 +54,41 @@ export default function DetailPengaduanPage() {
 }
 
 function DetailDataPengaduan() {
+   const [opened, { open, close }] = useDisclosure(false);
+   const [catModal, setCatModal] = useState<'tolak' | 'terima'>('tolak');
+
    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>
+
          <Card
             radius="md"
             p="lg"
@@ -157,9 +194,16 @@ function DetailDataPengaduan() {
                         </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>
+      </>
    );
 }