diff --git a/src/pages/scr/dashboard/pengaduan/detail_page.tsx b/src/pages/scr/dashboard/pengaduan/detail_page.tsx
index a5051fd..11fb9a1 100644
--- a/src/pages/scr/dashboard/pengaduan/detail_page.tsx
+++ b/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,115 +54,156 @@ export default function DetailPengaduanPage() {
 }
 
 function DetailDataPengaduan() {
+   const [opened, { open, close }] = useDisclosure(false);
+   const [catModal, setCatModal] = useState<'tolak' | 'terima'>('tolak');
+
    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">
-               <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
+      <>
+         <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"
+            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="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>
-                        </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
+                        </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>
-                        </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>
-                     </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>
+                        </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>
+      </>
    );
 }