UI Sub Menu Keamanan

src/app/darmasaba/(pages)/keamanan/keamanan/page.tsx

@@ -1,106 +0,0 @@
-import colors from '@/con/colors';
-import { Box, Center, List, ListItem, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
-import { IconHospitalCircle, IconPhone, IconReport, IconReportMedical, IconSpeakerphone } from '@tabler/icons-react';
-import BackButton from '../../desa/layanan/_com/BackButto';
-
-const data1 = [
-  {
-    id: 1,
-    judul: 'Layanan Medis Cepat',
-    icon: <IconHospitalCircle size={80} color={colors["blue-button"]} />,
-    deskripsi: <List>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Ambulans desa siap siaga 24 jam untuk keadaan darurat medis.</ListItem>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Pos kesehatan desa menyediakan layanan pertolongan pertama dan perawatan dasar.</ListItem>
-    </List>
-  },
-  {
-    id: 2,
-    judul: 'Nomor Darurat',
-    icon: <IconPhone size={80} color={colors["blue-button"]}/>,
-    deskripsi: <List>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Ambulans: 08125651052</ListItem>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Pos Kesehatan: 08125651052</ListItem>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Pemadam Kebakaran: 113</ListItem>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Polisi: 110</ListItem>
-    </List>
-  },
-  {
-    id: 3,
-    judul: 'Posko Kesehatan & Evakuasi',
-    icon: <IconReportMedical size={80} color={colors["blue-button"]}/>,
-    deskripsi: <List>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Ambulans desa siap siaga 24 jam untuk keadaan darurat medis.</ListItem>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Pos kesehatan desa menyediakan layanan pertolongan pertama dan perawatan dasar.</ListItem>
-    </List>
-  },
-  {
-    id: 4,
-    judul: 'Pelatihan & Sosialisasi',
-    icon: <IconSpeakerphone size={80} color={colors["blue-button"]}/>,
-    deskripsi: <List>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Setiap bulan, desa mengadakan pelatihan P3K (Pertolongan Pertama pada Kecelakaan) bagi masyarakat.</ListItem>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Edukasi tentang tindakan saat bencana seperti gempa bumi dan banjir.</ListItem>
-    </List>
-  },
-  {
-    id: 5,
-    judul: 'Sistem Laporan Kejadian',
-    icon: <IconReport size={80} color={colors["blue-button"]}/>,
-    deskripsi: <List>
-      <ListItem>Warga bisa melaporkan kejadian darurat melalui aplikasi desa atau menghubungi perangkat desa.</ListItem>
-      <ListItem>Laporan akan segera ditindaklanjuti oleh tim penanganan darurat.</ListItem>
-    </List>
-  }
-]
-
-function Page() {
-  return (
-    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
-      <Box px={{ base: 'md', md: 100 }}>
-        <BackButton />
-      </Box>
-      <Box>
-        <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
-          Penanganan Darurat
-        </Text>
-        <Text px={{base: 20, md: 150}} ta={"center"} fz={{ base: "h4", md: "h3" }} >
-          Program kesehatan di Desa Darmasaba memiliki peran penting dalam meningkatkan kesejahteraan masyarakat. Kami berkomitmen untuk memberikan layanan darurat yang cepat, responsif, dan mudah diakses oleh seluruh warga.
-        </Text>
-      </Box>
-      <Box px={{ base: "md", md: 100 }}>
-        <Stack gap={'lg'}>
-          <SimpleGrid
-            pb={10}
-            cols={{
-              base: 1,
-              md: 3,
-            }}>
-            {data1.map((v, k) => {
-              return (
-                <Paper radius={10} key={k} bg={colors["white-trans-1"]}>
-                  <Stack gap={'xs'}>
-                    <Center py={40}>
-                      {v.icon}
-                    </Center>
-                    <Box px={'lg'}>
-                      <Box pb={20}>
-                        <Text pb={10} c={colors["blue-button"]} fw={"bold"} fz={"h3"}>
-                          {v.judul}
-                        </Text>
-                        <Box px={10}>
-                        {v.deskripsi}
-                        </Box>
-                      </Box>
-                    </Box>
-                  </Stack>
-                </Paper>
-              )
-            })}
-          </SimpleGrid>
-        </Stack>
-      </Box>
-    </Stack>
-  );
-}
-
-export default Page;

src/app/darmasaba/(pages)/keamanan/laporan-publik/page.tsx

@@ -0,0 +1,118 @@
+import colors from '@/con/colors';
+import { Stack, Box, Text, Flex, ColorSwatch, SimpleGrid, List, ListItem, Button, Paper, Title } from '@mantine/core';
+import React from 'react';
+import BackButton from '../../desa/layanan/_com/BackButto';
+import { IconArrowRight } from '@tabler/icons-react';
+
+
+const data = [
+  {
+    id: 1,
+    judul: 'Kasus Pencurian Banjar Tengah',
+    tanggal: '3 Februari 2025, 02:00 WITA',
+    deskripsi: <List>
+      <ListItem>Laporan ke Polsek setempat</ListItem>
+      <ListItem>Penyisiran area oleh Pecalang</ListItem>
+      <ListItem>Koordinasi dengan dealer motor</ListItem>
+      <ListItem>Penyebaran informasi ke grup keamanan</ListItem>
+    </List>,
+    button: <Button fz={'md'} fullWidth bg={'#2A742D'}>Terselesaikan</Button>
+
+  },
+  {
+    id: 2,
+    judul: 'Kasus Narkoba Banjar Kaja',
+    tanggal: '10 Februari 2025, 22:30 WITA',
+    deskripsi: <List>
+      <ListItem>Koordinasi dengan Satres Narkoba</ListItem>
+      <ListItem>Penggerebekan lokasi</ListItem>
+      <ListItem>Pengamanan barang bukti</ListItem>
+      <ListItem>Pemeriksaan saksi</ListItem>
+    </List>,
+    button: <Button fz={'md'} fullWidth bg={'#D1961F'}>Dalam Proses</Button>
+
+  },
+  {
+    id: 3,
+    judul: 'Kasus Tawuran Banjar Kaja',
+    tanggal: '15 Februari 2025, 22:30 WITA',
+    deskripsi: <List>
+      <ListItem>Laporan ke Polsek setempat</ListItem>
+      <ListItem>Penggerebekan lokasi</ListItem>
+      <ListItem>Pengamanan barang bukti</ListItem>
+      <ListItem>Pemeriksaan saksi</ListItem>
+    </List>,
+    button: <Button fz={'md'} fullWidth bg={'#2A742D'}>Terselesaikan</Button>
+
+  },
+]
+function Page() {
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+      <Box px={{ base: 'md', md: 100 }}>
+        <BackButton />
+      </Box>
+      <Box>
+        <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+          Laporan Keamanan Lingkungan
+        </Text>
+      </Box>
+      <Box px={{ base: "md", md: 100 }}>
+        <Stack gap={'lg'}>
+          <Flex justify={'space-between'} align={'center'}>
+            <Text fz={{ base: 'sm', md: 'h4' }} fw={'bold'}>Laporan Terbaru</Text>
+            <Box>
+              <Flex gap={'lg'}>
+                <Box>
+                  <Flex gap={{ base: 2, md: 5 }} align={'center'}>
+                    <Text fz={{ base: 'sm', md: 'h4' }}>Terselesaikan</Text>
+                    <ColorSwatch color="#2A742D" size={20} />
+                  </Flex>
+                </Box>
+                <Box>
+                  <Flex gap={{ base: 2, md: 5 }} align={'center'}>
+                    <Text fz={{ base: 'sm', md: 'h4' }}>Dalam Proses</Text>
+                    <ColorSwatch color="#D1961F" size={20} />
+                  </Flex>
+                </Box>
+                <Box>
+                  <Flex gap={{ base: 2, md: 5 }} align={'center'}>
+                    <Text fz={{ base: 'sm', md: 'h4' }}>Gagal</Text>
+                    <ColorSwatch color="#A34437" size={20} />
+                  </Flex>
+                </Box>
+              </Flex>
+            </Box>
+          </Flex>
+          <SimpleGrid
+            cols={{
+              base: 1,
+              md: 3
+          }}
+          >
+            {data.map((v, k) => {
+              return (
+                <Paper radius={'lg'} key={k} bg={colors['white-trans-1']} p={'xl'}>
+                  <Stack>
+                    <Title c={colors['blue-button']} order={1}>{v.judul}</Title>
+                    <Text fs={'italic'} fz={'xl'}>{v.tanggal}</Text>
+                    <Box>
+                      <Text fw={'bold'}>Penanganan:</Text>
+                      {v.deskripsi}
+                    </Box>
+                    <Box>
+                      {v.button}
+                    </Box>
+                    <Button bg={colors['blue-button']} rightSection={<IconArrowRight size={20} color={colors['white-1']} />}>Lihat Detail Kronologi</Button>
+                  </Stack>
+                </Paper>
+              )
+            })}
+          </SimpleGrid>
+        </Stack>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/keamanan/laporan/page.tsx

@@ -1,50 +0,0 @@
-import colors from '@/con/colors';
-import { Stack, Box, Text, Flex, ColorSwatch } from '@mantine/core';
-import React from 'react';
-import BackButton from '../../desa/layanan/_com/BackButto';
-
-function Page() {
-  return (
-    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
-      <Box px={{ base: 'md', md: 100 }}>
-        <BackButton />
-      </Box>
-      <Box>
-        <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
-          Laporan Keamanan Lingkungan
-        </Text>
-      </Box>
-      <Box px={{ base: "md", md: 100 }}>
-        <Stack gap={'lg'}>
-          <Flex justify={'space-between'}>
-            <Text fz={"h4"}>Laporan Terbaru</Text>
-            <Box>
-              <Flex gap={'lg'}>
-                <Box>
-                  <Flex gap={{ base: 0, md: 5 }} align={'center'}>
-                    <Text fz={{ base: 'md', md: 'h4' }}>Terselesaikan</Text>
-                    <ColorSwatch color="#2A742D" size={30} />
-                  </Flex>
-                </Box>
-                <Box>
-                  <Flex gap={{ base: 0, md: 5 }} align={'center'}>
-                    <Text fz={{ base: 'md', md: 'h4' }}>Dalam Proses</Text>
-                    <ColorSwatch color="#135A9B" size={30} />
-                  </Flex>
-                </Box>
-                <Box>
-                  <Flex gap={{ base: 0, md: 5 }} align={'center'}>
-                    <Text fz={{ base: 'md', md: 'h4' }}>Gagal</Text>
-                    <ColorSwatch color="#A34437" size={30} />
-                  </Flex>
-                </Box>
-              </Flex>
-            </Box>
-          </Flex>
-        </Stack>
-      </Box>
-    </Stack>
-  );
-}
-
-export default Page;

src/app/darmasaba/(pages)/keamanan/tips-keamanan/page.tsx

@@ -0,0 +1,120 @@
+import colors from '@/con/colors';
+import { Box, Center, Image, List, ListItem, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
+import BackButton from '../../desa/layanan/_com/BackButto';
+
+const data1 = [
+  {
+    id: 1,
+    judul: 'Keamanan Rumah',
+    image: '/api/img/kemanan.png',
+    deskripsi: <List>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Pastikan pintu dan jendela selalu terkunci saat meninggalkan rumah.</ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Pasang lampu penerangan di halaman dan area sekitar rumah untuk mencegah tindak kejahatan.</ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Jangan mudah memberikan akses masuk ke orang yang tidak dikenal.</ListItem>
+    </List>
+  },
+  {
+    id: 2,
+    judul: 'Keamanan di Jalan',
+    image: '/api/img/keamananjalan.png',
+    deskripsi: <List>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Hindari berjalan sendirian di tempat sepi, terutama pada malam hari.</ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Simpan barang berharga di tempat yang aman saat bepergian.</ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Gunakan jalur yang ramai dan terang saat pulang malam.</ListItem>
+    </List>
+  },
+  {
+    id: 3,
+    judul: 'Keamanan Kendaraan',
+    image: '/api/img/keamanankendaraan.png',
+    deskripsi: <List>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Gunakan kunci ganda saat memarkir kendaraan, terutama di tempat umum.</ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Parkir di tempat yang terang dan mudah diawasi.</ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Jangan meninggalkan barang berharga di dalam kendaraan.</ListItem>
+    </List>
+  },
+  {
+    id: 4,
+    judul: 'Keamanan Sosial',
+    image: '/api/img/mencurigakan.png',
+    deskripsi: <List>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Laporkan kejadian mencurigakan kepada Pecalang atau perangkat desa.</ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Jangan mudah percaya terhadap informasi yang belum jelas sumbernya.</ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Ikuti program sosialisasi keamanan yang diadakan oleh desa.</ListItem>
+    </List>
+  },
+  {
+    id: 5,
+    judul: 'Sistem Laporan Kejadian',
+    image: '/api/img/securitydigital.png',
+    deskripsi: <List>
+      <ListItem>Jangan mudah membagikan informasi pribadi di media sosial.</ListItem>
+      <ListItem>Waspada terhadap penipuan online dan telepon yang mengatasnamakan instansi resmi.</ListItem>
+      <ListItem>Gunakan kata sandi yang kuat untuk akun digital dan ganti secara berkala.</ListItem>
+    </List>
+  },
+  {
+    id: 6,
+    judul: 'Nomor Darurat yang Bisa Dihubungi',
+    image: '/api/img/kontakpecalang.png',
+    deskripsi: <List>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Pecalang: 08125651052</ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Ambulans: 08125651052</ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Pemadam Kebakaran: 113</ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Polisi: 110</ListItem>
+    </List>
+  }
+]
+
+function Page() {
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+      <Box px={{ base: 'md', md: 100 }}>
+        <BackButton />
+      </Box>
+      <Box>
+        <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+          Tips Keamanan
+        </Text>
+        <Text px={{ base: 20, md: 150 }} ta={"center"} fz={{ base: "h4", md: "h3" }} >
+          Desa Darmasaba berkomitmen untuk menjaga keamanan dan kenyamanan seluruh warganya. Berikut beberapa tips yang dapat membantu meningkatkan keamanan di lingkungan desa.
+        </Text>
+      </Box>
+      <Box px={{ base: "md", md: 100 }}>
+        <Stack gap={'lg'}>
+          <SimpleGrid
+            pb={10}
+            cols={{
+              base: 1,
+              md: 3,
+            }}>
+            {data1.map((v, k) => {
+              return (
+                <Paper radius={10} key={k} bg={colors["white-trans-1"]}>
+                  <Stack gap={'xs'}>
+                    <Center p={10}>
+                      <Image src={v.image} radius={10}
+                     alt='' />
+                    </Center>
+                    <Box px={'xl'}>
+                      <Box pb={20}>
+                        <Text pb={10} c={colors["blue-button"]} fw={"bold"} fz={"h3"}>
+                          {v.judul}
+                        </Text>
+                        <Box pr={10}>
+                          {v.deskripsi}
+                        </Box>
+                      </Box>
+                    </Box>
+                  </Stack>
+                </Paper>
+              )
+            })}
+          </SimpleGrid>
+        </Stack>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;