Senin, 20 May 2025 :

src/app/admin/(dashboard)/kesehatan/penanganan-darurat/page.tsx

@@ -1,10 +1,34 @@
+import colors from '@/con/colors';
+import { Box, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
 import React from 'react';
+import CreatePenangananDarurat from './ui/tambah_penanganan_darurat/page';
+import ListPenangananDarurat from './ui/list_penanganan_darurat/page';
 
 function Page() {
   return (
-    <div>
-      Penanganan Darurat
-    </div>
+    <Box>
+     <Stack gap={'xs'}>
+      <Title order={3}>Penanganan Darurat</Title>
+      <Tabs defaultValue="create" color={colors['blue-button']} variant='pills'>
+        <TabsList mb={10} bg={colors['BG-trans']} p={'xs'}>
+          <TabsTab value="create" >
+            Tambah Penanganan Darurat
+          </TabsTab>
+          <TabsTab value="list" >
+            List Penanganan Darurat
+          </TabsTab>
+        </TabsList>
+
+        <TabsPanel value="create">
+          <CreatePenangananDarurat/>
+        </TabsPanel>
+
+        <TabsPanel value="list">
+          <ListPenangananDarurat/>
+        </TabsPanel>
+      </Tabs>
+      </Stack>
+    </Box>
   );
 }
 

src/app/admin/(dashboard)/kesehatan/penanganan-darurat/ui/list_penanganan_darurat/page.tsx

@@ -0,0 +1,33 @@
+import { Box, Paper, Stack, Table, TableTbody, TableTh, TableThead, TableTr, Title } from '@mantine/core';
+import colors from '@/con/colors';
+import React from 'react';
+
+function ListPenangananDarurat() {
+  return (
+    <Box>
+      <Paper bg={colors['white-1']} p={'md'} radius={10}>
+        <Stack gap={'xs'}>
+          <Title order={3}>List Penanganan Darurat</Title>
+          <Box>
+            <Table striped withTableBorder withColumnBorders withRowBorders>
+              <TableThead>
+                <TableTr>
+                  <TableTh>Image</TableTh>
+                  <TableTh>Nama Penanganan Darurat</TableTh>
+                  <TableTh>Deskripsi Penanganan Darurat</TableTh>
+                  <TableTh>Aksi</TableTh>
+                  <TableTh>Detail</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+                
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default ListPenangananDarurat;

src/app/admin/(dashboard)/kesehatan/penanganan-darurat/ui/tambah_penanganan_darurat/page.tsx

@@ -0,0 +1,45 @@
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, SimpleGrid, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconImageInPicture } from '@tabler/icons-react';
+import React from 'react';
+import { KesehatanEditor } from '../../../_com/kesehatanEditor';
+
+function CreatePenangananDarurat() {
+  return (
+    <Box>
+      <Stack gap={'xs'}>
+        <SimpleGrid cols={{ base: 1, md: 2 }}>
+          <Box>
+            <Paper bg={colors['white-1']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Title order={4}>Tambah Penanganan Darurat</Title>
+                <Box>
+                  <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+                  <IconImageInPicture size={50} />
+                </Box>
+                <TextInput
+                label={<Text fw={"bold"} fz={"sm"}>Nama Penanganan Darurat</Text>}
+                placeholder='Masukkan nama penanganan darurat'
+                />
+                <Box>
+                  <Text fw={"bold"} fz={"sm"}>Deskripsi Penanganan Darurat</Text>
+                  <KesehatanEditor
+                    showSubmit={false}
+                  />
+                </Box>
+                <Group>
+                  <Button bg={colors['blue-button']}>Submit</Button>
+                </Group>
+              </Stack>
+            </Paper>
+          </Box>
+          <Box>
+
+          </Box>
+        </SimpleGrid>
+      </Stack>
+    </Box>
+  );
+}
+
+export default CreatePenangananDarurat;