UI Admin Keamanan

src/app/admin/(dashboard)/keamanan/kontak-darurat/create/createKontak.tsx

@@ -0,0 +1,28 @@
+import colors from '@/con/colors';
+import { Box, Stack, Text, TextInput } from '@mantine/core';
+import { IconImageInPicture } from '@tabler/icons-react';
+
+function CreateKontakDarurat() {
+  return (
+    <Box>
+     <Stack gap={"xs"}>
+      <TextInput 
+      label={<Text fz={"sm"} fw={"bold"}>Judul Kontak Darurat</Text>}
+      placeholder="masukkan judul kontak darurat"
+      />
+      <IconImageInPicture size={24} color={colors['blue-button']} />
+      <TextInput 
+      label={<Text fz={"sm"} fw={"bold"}>Nama Kontak Darurat</Text>}
+      placeholder="masukkan nama kontak darurat"
+      />
+      <IconImageInPicture size={24} color={colors['blue-button']} />
+      <TextInput 
+      label={<Text fz={"sm"} fw={"bold"}>Nomor Kontak Darurat</Text>}
+      placeholder="masukkan nomor kontak darurat"
+      />
+     </Stack>
+    </Box>
+  );
+}
+
+export default CreateKontakDarurat;

src/app/admin/(dashboard)/keamanan/kontak-darurat/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 ListDataKontakDarurat() {
+  return (
+    <Paper bg={colors['white-1']} p={'md'} radius={10}>
+      <Stack gap={"xs"}>
+        <Title order={3}>List Data Kontak Darurat</Title>
+        <Box>
+          <Text fw={"bold"}>Judul Kontak Darurat</Text>
+          <Text> </Text>
+          <Text fw={"bold"}>Nama Kontak Darurat</Text>
+          <Text> </Text>
+          <Text fw={"bold"}>Nomor Kontak Darurat</Text>
+          <Text> </Text>
+        </Box>
+      </Stack>
+    </Paper>
+  );
+}
+
+export default ListDataKontakDarurat;

src/app/admin/(dashboard)/keamanan/kontak-darurat/page.tsx

@@ -1,10 +1,30 @@
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, SimpleGrid, Stack, Title } from '@mantine/core';
 import React from 'react';
+import CreateKontakDarurat from './create/createKontak';
+import ListDataKontakDarurat from './listData/page';
 
 function Page() {
   return (
-    <div>
-      kontak-darurat
-    </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>
+          <CreateKontakDarurat/>
+          <Group>
+            <Button
+              mt={10}
+              bg={colors['blue-button']}
+            >
+              Submit
+            </Button>
+          </Group>
+          </Paper>
+        </Box>
+        <ListDataKontakDarurat/>
+      </SimpleGrid>
+    </Stack>
   );
 }