UI Admin Keamanan

src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/create/createPencegahan.tsx

@@ -0,0 +1,25 @@
+import colors from '@/con/colors';
+import { Box, Stack, Text, TextInput } from '@mantine/core';
+import { IconImageInPicture } from '@tabler/icons-react';
+import React from 'react';
+
+function CreatePencegahan() {
+  return (
+    <Box>
+      <Stack gap={"xs"}>
+        <TextInput
+          label={<Text fz={"sm"} fw={"bold"}>Judul Pencegahan Kriminalitas</Text>}
+          placeholder="masukkan judul pencegahan kriminalitas"
+        />
+        <TextInput
+          label={<Text fz={"sm"} fw={"bold"}>Deskripsi Pencegahan Kriminalitas</Text>}
+          placeholder="masukkan deskripsi pencegahan kriminalitas"
+        />
+        <Text fw={"bold"} fz={"sm"} >Gambar Pencegahan Kriminalitas</Text>
+        <IconImageInPicture size={24} color={colors['blue-button']} />
+      </Stack>
+    </Box>
+  );
+}
+
+export default CreatePencegahan;

src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/listData/page.tsx

@@ -0,0 +1,23 @@
+import colors from '@/con/colors';
+import { Box, Paper, Stack, Text, Title } from '@mantine/core';
+import React from 'react';
+
+function ListDataPencegahan() {
+  return (
+    <Paper bg={colors['white-1']} p={'md'} radius={10}>
+      <Stack gap={"xs"}>
+        <Title order={3}>List Data Pencegahan Kriminalitas</Title>
+        <Box>
+          <Text fw={"bold"}>Judul Pencegahan Kriminalitas</Text>
+          <Text> </Text>
+          <Text fw={"bold"}>Deskripsi Pencegahan Kriminalitas</Text>
+          <Text> </Text>
+          <Text fw={"bold"}>Gambar Pencegahan Kriminalitas</Text>
+          <Text> </Text>
+        </Box>
+      </Stack>
+    </Paper>
+  );
+}
+
+export default ListDataPencegahan;

src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/page.tsx

@@ -1,10 +1,31 @@
+import colors from '@/con/colors';
+import { Stack, SimpleGrid, Box, Paper, Title, Group, Button } from '@mantine/core';
 import React from 'react';
+import CreatePencegahan from './create/createPencegahan';
+import ListDataPencegahan from './listData/page';
+
 
 function Page() {
   return (
-    <div>
-      pencegahan-kriminalitas
-    </div>
+    <Stack gap={"xs"}>
+    <SimpleGrid cols={{ base: 1, md: 2 }}>
+      <Box>
+        <Paper bg={colors['white-1']} p={'md'} radius={10}>
+          <Title order={3}>Kontak Darurat</Title>
+        <CreatePencegahan/>
+        <Group>
+          <Button
+            mt={10}
+            bg={colors['blue-button']}
+          >
+            Submit
+          </Button>
+        </Group>
+        </Paper>
+      </Box>
+      <ListDataPencegahan/>
+    </SimpleGrid>
+  </Stack>
   );
 }