wibu/desa-darmasaba
1
0
Fork 0
Code Issues Pull Requests 5 Actions Packages Projects Releases Wiki Activity

Add UI Menu Desa

Browse Source
This commit is contained in:
nico
2025-03-15 15:10:07 +08:00
parent 7d93ba5108
commit 27bd00e773
35 changed files with 1556 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/darmasaba/(pages)/desa/layanan/(detail)/belumkawin/page.tsx
View File

@@ -1,5 +1,5 @@
import colors from '@/con/colors';
import { Stack, Container, List, ListItem, Box, Text, Image } from '@mantine/core';
import { Stack, Container, List, ListItem, Box, Text, Image, Button } from '@mantine/core';
import React from 'react';
import BackButton from '../../_com/BackButto';
@@ -26,6 +26,7 @@ function Page() {
</Text>
<Image src="/api/img/flowchart-suket-beda-biodatadiri-removebg-preview.png" alt='' />
</Box>
<Button radius={"lg"} fz={'h4'} bg={colors['blue-button']}>Ajukan Permohonan</Button>
</Stack>
</Container>
</Stack>

3
src/app/darmasaba/(pages)/desa/layanan/(detail)/biodata/page.tsx
View File

@@ -1,5 +1,5 @@
import colors from '@/con/colors';
import { Stack, Container, List, ListItem, Box, Text, Image } from '@mantine/core';
import { Stack, Container, List, ListItem, Box, Text, Image, Button } from '@mantine/core';
import React from 'react';
import BackButton from '../../_com/BackButto';
@@ -26,6 +26,7 @@ function Page() {
</Text>
<Image src="/api/img/flowchart-suket-beda-biodatadiri-removebg-preview.png" alt='' />
</Box>
<Button radius={"lg"} fz={'h4'} bg={colors['blue-button']}>Ajukan Permohonan</Button>
</Stack>
</Container>
</Stack>

3
src/app/darmasaba/(pages)/desa/layanan/(detail)/domisili/page.tsx
View File

@@ -1,5 +1,5 @@
import colors from '@/con/colors';
import { Box, Container, Image, List, ListItem, Stack, Text } from '@mantine/core';
import { Box, Button, Container, Image, List, ListItem, Stack, Text } from '@mantine/core';
import BackButton from '../../_com/BackButto';
function Page() {
@@ -26,6 +26,7 @@ function Page() {
</Text>
<Image src="/api/img/flowchart-suket-beda-biodatadiri-removebg-preview.png" alt=''/>
</Box>
<Button radius={"lg"} fz={'h4'} bg={colors['blue-button']}>Ajukan Permohonan</Button>
</Stack>
</Container>
</Stack>

3
src/app/darmasaba/(pages)/desa/layanan/(detail)/kelahiran/page.tsx
View File

@@ -1,5 +1,5 @@
import colors from '@/con/colors';
import { Stack, Container, List, ListItem, Box, Text, Image } from '@mantine/core';
import { Stack, Container, List, ListItem, Box, Text, Image, Button } from '@mantine/core';
import React from 'react';
import BackButton from '../../_com/BackButto';
@@ -27,6 +27,7 @@ function Page() {
</Text>
<Image src="/api/img/flowchart-suket-kelahiran-removebg-preview.png" alt='' />
</Box>
<Button radius={"lg"} fz={'h4'} bg={colors['blue-button']}>Ajukan Permohonan</Button>
</Stack>
</Container>
</Stack>

3
src/app/darmasaba/(pages)/desa/layanan/(detail)/kematian/page.tsx
View File

@@ -1,5 +1,5 @@
import colors from '@/con/colors';
import { Stack, Container, List, ListItem, Box, Text, Image } from '@mantine/core';
import { Stack, Container, List, ListItem, Box, Text, Image, Button } from '@mantine/core';
import React from 'react';
import BackButton from '../../_com/BackButto';
@@ -27,6 +27,7 @@ function Page() {
</Text>
<Image src="/api/img/flowchart-suket-beda-biodatadiri-removebg-preview.png" alt='' />
</Box>
<Button radius={"lg"} fz={'h4'} bg={colors['blue-button']}>Ajukan Permohonan</Button>
</Stack>
</Container>
</Stack>

3
src/app/darmasaba/(pages)/desa/layanan/(detail)/penghasilan/page.tsx
View File

@@ -1,5 +1,5 @@
import colors from '@/con/colors';
import { Stack, Container, List, ListItem, Box, Text, Image } from '@mantine/core';
import { Stack, Container, List, ListItem, Box, Text, Image, Button } from '@mantine/core';
import React from 'react';
import BackButton from '../../_com/BackButto';
@@ -26,6 +26,7 @@ function Page() {
</Text>
<Image src="/api/img/flowchart-suket-beda-biodatadiri-removebg-preview.png" alt='' />
</Box>
<Button radius={"lg"} fz={'h4'} bg={colors['blue-button']}>Ajukan Permohonan</Button>
</Stack>
</Container>
</Stack>

3
src/app/darmasaba/(pages)/desa/layanan/(detail)/skck/page.tsx
View File

@@ -1,5 +1,5 @@
import colors from '@/con/colors';
import { Stack, Container, List, ListItem, Box, Text, Image } from '@mantine/core';
import { Stack, Container, List, ListItem, Box, Text, Image, Button } from '@mantine/core';
import React from 'react';
import BackButton from '../../_com/BackButto';
@@ -25,6 +25,7 @@ function Page() {
</Text>
<Image src="/api/img/flowchart-suket-beda-biodatadiri-removebg-preview.png" alt='' />
</Box>
<Button radius={"lg"} fz={'h4'} bg={colors['blue-button']}>Ajukan Permohonan</Button>
</Stack>
</Container>
</Stack>

3
src/app/darmasaba/(pages)/desa/layanan/(detail)/tempatusaha/page.tsx
View File

@@ -1,5 +1,5 @@
import colors from '@/con/colors';
import { Stack, Container, List, ListItem, Box, Text, Image } from '@mantine/core';
import { Stack, Container, List, ListItem, Box, Text, Image, Button } from '@mantine/core';
import React from 'react';
import BackButton from '../../_com/BackButto';
@@ -27,6 +27,7 @@ function Page() {
</Text>
<Image src="/api/img/flowchart-suket-tempat-usaha-removebg-preview.png" alt='' />
</Box>
<Button radius={"lg"} fz={'h4'} bg={colors['blue-button']}>Ajukan Permohonan</Button>
</Stack>
</Container>
</Stack>

3
src/app/darmasaba/(pages)/desa/layanan/(detail)/tidakmampu/page.tsx
View File

@@ -1,5 +1,5 @@
import colors from '@/con/colors';
import { Stack, Container, List, ListItem, Box, Text, Image } from '@mantine/core';
import { Stack, Container, List, ListItem, Box, Text, Image, Button } from '@mantine/core';
import React from 'react';
import BackButton from '../../_com/BackButto';
@@ -28,6 +28,7 @@ function Page() {
</Text>
<Image src="/api/img/flowchart-suket-tidak-mampu-removebg-preview.png" alt='' />
</Box>
<Button radius={"lg"} fz={'h4'} bg={colors['blue-button']}>Ajukan Permohonan</Button>
</Stack>
</Container>
</Stack>

3
src/app/darmasaba/(pages)/desa/layanan/(detail)/usaha/page.tsx
View File

@@ -1,5 +1,5 @@
import colors from '@/con/colors';
import { Stack, Container, List, ListItem, Box, Text, Image } from '@mantine/core';
import { Stack, Container, List, ListItem, Box, Text, Image, Button } from '@mantine/core';
import React from 'react';
import BackButton from '../../_com/BackButto';
@@ -26,6 +26,7 @@ function Page() {
</Text>
<Image src="/api/img/flowchart-suket-beda-biodatadiri-removebg-preview.png" alt='' />
</Box>
<Button radius={"lg"} fz={'h4'} bg={colors['blue-button']}>Ajukan Permohonan</Button>
</Stack>
</Container>
</Stack>

3
src/app/darmasaba/(pages)/desa/layanan/(detail)/yatim/page.tsx
View File

@@ -1,5 +1,5 @@
import colors from '@/con/colors';
import { Stack, Container, List, ListItem, Box, Text, Image } from '@mantine/core';
import { Stack, Container, List, ListItem, Box, Text, Image, Button } from '@mantine/core';
import React from 'react';
import BackButton from '../../_com/BackButto';
@@ -25,6 +25,7 @@ function Page() {
</Text>
<Image src="/api/img/flowchart-suket-beda-biodatadiri-removebg-preview.png" alt='' />
</Box>
<Button radius={"lg"} fz={'h4'} bg={colors['blue-button']}>Ajukan Permohonan</Button>
</Stack>
</Container>
</Stack>

33
src/app/darmasaba/(pages)/desa/layanan/page.tsx
View File

@@ -1,7 +1,7 @@
'use client'
import colors from "@/con/colors";
import { ActionIcon, BackgroundImage, Box, Button, Container, Divider, Flex, Group, List, ListItem, SimpleGrid, Stack, Stepper, StepperCompleted, StepperStep, Text } from "@mantine/core";
import { IconBrandFacebook, IconBrandInstagram, IconBrandTwitter, IconBrandWhatsapp } from "@tabler/icons-react";
import { ActionIcon, BackgroundImage, Box, Button, Container, Divider, Flex, Group, List, ListItem, SimpleGrid, Stack, Stepper, StepperCompleted, StepperStep, Text, TextInput } from "@mantine/core";
import { IconBrandFacebook, IconBrandInstagram, IconBrandTwitter, IconBrandWhatsapp, IconSearch } from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import { useState } from "react";
import BackButton from "./_com/BackButto";
@@ -81,18 +81,25 @@ export default function Page() {
const nextStep = () => setActive((current) => (current < 6 ? current + 1 : current));
const prevStep = () => setActive((current) => (current > 0 ? current - 1 : current));
return (
<Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={"42"}>
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"42"}>
<Container w={{ base: "100%", md: "50%" }} >
<BackButton/>
<Stack align="center" gap={0}>
{/* Bagian Layanan */}
<Text fz={"3.4rem"} fw={"bold"}>
Layanan
<Text fz={"3.4rem"} c={colors["blue-button"]} fw={"bold"}>
Layanan Desa Darmasaba
</Text>
<Text
>
Adapun berbagai layanan yang telah tersedia dan dapat diakses dengan mudah oleh masyarakat di Desa Darmasaba :
Informasi dan Pelayanan Administrasi Digital
</Text>
<TextInput
py={20}
w={{ base: "70%", md: "50%" }}
placeholder="Cari Layanan"
leftSection={<IconSearch size={20} />}
/>
</Stack>
{/* Bagian Pelayanan Surat Keterangan */}
<Box py={10}>
@@ -110,7 +117,7 @@ export default function Page() {
<BackgroundImage
key={k}
src={v.images}
h={350}
h={250}
radius={16}
pos={"relative"}
>
@@ -211,27 +218,27 @@ export default function Page() {
<Text fz={"h4"} fw={"bold"}>Pelayanan Penduduk Non-Permanent</Text>
</Box>
<Text pb={20} fz={"sm"} ta={"justify"}>Surat Keterangan Penduduk Non-Permanent adalah dokumen yang dikeluarkan oleh pihak berwenang untuk memberikan keterangan bahwa seseorang atau kelompok orang memiliki status penduduk non-permanent di suatu wilayah. Dokumen ini biasanya digunakan untuk keperluan administratif atau legal, seperti mendapatkan akses ke layanan kesehatan, pendidikan, atau pelayanan publik lainnya.</Text>
<Divider />
<Divider color={colors["blue-button"]}/>
<Flex justify={"space-between"} py={20}>
<Text fz={"sm"}>25 May 2021 . Darmasaba</Text>
<Box>
<Flex gap={"lg"}>
<ActionIcon variant='transparent'>
<IconBrandFacebook color={"gray"} size={"30"} />
<IconBrandFacebook color={colors["blue-button"]} size={"30"} />
</ActionIcon>
<ActionIcon variant='transparent'>
<IconBrandInstagram color={"gray"} size={"30"} />
<IconBrandInstagram color={colors["blue-button"]} size={"30"} />
</ActionIcon>
<ActionIcon variant='transparent'>
<IconBrandTwitter color={"gray"} size={"30"} />
<IconBrandTwitter color={colors["blue-button"]} size={"30"} />
</ActionIcon>
<ActionIcon variant='transparent'>
<IconBrandWhatsapp color={"gray"} size={"30"} />
<IconBrandWhatsapp color={colors["blue-button"]} size={"30"} />
</ActionIcon>
</Flex>
</Box>
</Flex>
<Divider pb={50} />
<Divider color={colors["blue-button"]} pb={50} />
</Container>
</Stack>
)

245
src/app/darmasaba/(pages)/desa/layanan/page.txt Normal file
View File

@@ -0,0 +1,245 @@
'use client'
import colors from "@/con/colors";
import { ActionIcon, BackgroundImage, Box, Button, Container, Divider, Flex, Group, List, ListItem, SimpleGrid, Stack, Stepper, StepperCompleted, StepperStep, Text, TextInput } from "@mantine/core";
import { IconBrandFacebook, IconBrandInstagram, IconBrandTwitter, IconBrandWhatsapp, IconSearch } from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import { useState } from "react";
import BackButton from "./_com/BackButto";
const data = [
{
id: 1,
images: "/api/img/test.png",
name: "Surat Keterangan Domisili Organisasi",
link: "/darmasaba/desa/layanan/domisili"
},
{
id: 2,
images: "/api/img/test-3.jpeg",
name: "Surat Keterangan Penghasilan",
link: "/darmasaba/desa/layanan/penghasilan"
},
{
id: 3,
images: "/api/img/domisili.jpeg",
name: "Surat Keterangan Tidak Mampu",
link: "/darmasaba/desa/layanan/tidakmampu"
},
{
id: 4,
images: "/api/img/kelahiran.jpeg",
name: "Surat Keterangan Kelahiran",
link: "/darmasaba/desa/layanan/kelahiran"
},
{
id: 5,
images: "/api/img/keterangan-usaha.jpeg",
name: "Surat Keterangan Usaha",
link: "/darmasaba/desa/layanan/usaha"
},
{
id: 6,
images: "/api/img/kematian.jpeg",
name: "Surat Keterangan Kematian",
link: "/darmasaba/desa/layanan/kematian"
},
{
id: 7,
images: "/api/img/tempatusaha.jpeg",
name: "Surat Keterangan Tempat Usaha",
link: "/darmasaba/desa/layanan/tempatusaha"
},
{
id: 8,
images: "/api/img/belumkawin.jpeg",
name: "Surat Keterangan Belum Kawin",
link: "/darmasaba/desa/layanan/belumkawin"
},
{
id: 9,
images: "/api/img/berkelakuan-baik.jpeg",
name: "Surat Keterangan Kelakuan Baik",
link: "/darmasaba/desa/layanan/skck"
},
{
id: 10,
images: "/api/img/biodata.jpeg",
name: "Surat Keterangan Beda Biodata Diri",
link: "/darmasaba/desa/layanan/biodata"
},
{
id: 11,
images: "/api/img/yatim.jpeg",
name: "Surat Keterangan Yatim Piatu",
link: "/darmasaba/desa/layanan/yatim"
}
]
export default function Page() {
const router = useRouter()
const [active, setActive] = useState(1);
const nextStep = () => setActive((current) => (current < 6 ? current + 1 : current));
const prevStep = () => setActive((current) => (current > 0 ? current - 1 : current));
return (
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"42"}>
<Container w={{ base: "100%", md: "50%" }} >
<BackButton/>
<Stack align="center" gap={0}>
{/* Bagian Layanan */}
<Text fz={"3.4rem"} fw={"bold"}>
Layanan Desa Darmasaba
</Text>
<Text
>
Informasi dan Pelayanan Administrasi Digital
</Text>
<TextInput
py={20}
w={{ base: "70%", md: "50%" }}
placeholder="Cari Layanan"
leftSection={<IconSearch size={20} />}
/>
</Stack>
{/* Bagian Pelayanan Surat Keterangan */}
<Box py={10}>
<Text fz={"h4"} fw={"bold"}>Pelayanan Surat Keterangan</Text>
</Box>
<SimpleGrid
py={20}
cols={{
base: 1,
sm: 3
}}
>
{data.map((v, k) => {
return (
<BackgroundImage
key={k}
src={v.images}
h={250}
radius={16}
pos={"relative"}
>
<Box
style={{
borderRadius: 16,
zIndex: 0
}}
pos={"absolute"}
w={"100%"}
h={"100%"}
bg={colors.trans.dark[2]}
/>
<Stack justify='space-between' h={"100%"} gap={0} p={"lg"} pos={"relative"}>
<Box p={"lg"}>
<Text
c={"white"}
size={"1.5rem"}
style={{
textAlign: "center",
}}>{v.name}</Text>
</Box>
<Group justify="center">
<Button px={20} radius={"100"} size="md" bg={colors["blue-button"]}
onClick={() => router.push(v.link)}>
Detail
</Button>
</Group>
</Stack>
</BackgroundImage>
)
})}
</SimpleGrid>
{/* Bagian Pelayanan Perizinan Berusaha */}
<Box py={15}>
<Text fz={"h4"} fw={"bold"}>Pelayanan Perizinan Berusaha Berbasis Risiko Melalui Sistem ONLINE SINGLE SUBMISSION (OSS)</Text>
</Box>
<Text py={10} ta={"justify"} fz={"sm"}>Penyelenggaraan Perizinan Berusaha Berbasis Risiko melalui Sistem Online Single Submission (OSS)
merupakan pelaksanaan Undang-Undang Nomor 11 Tahun 2020 Tentang Cipta Kerja. OSS Berbasis Risiko wajib digunakan oleh Pelaku Usaha,
Kementerian/Lembaga, Pemerintah Daerah, Administrator Kawasan Ekonomi Khusus (KEK), dan Badan Pengusahaan Kawasan Perdagangan Bebas
Pelabuhan Bebas (KPBPB).Berdasarkan Peraturan Pemerintah Nomor 5 Tahun 2021 terdapat 1.702 kegiatan usaha yang terdiri atas 1.349
Klasifikasi Baku Lapangan Usaha Indonesia (KBLI) yang sudah diimplementasikan dalam Sistem OSS Berbasis Risiko.</Text>
<Text py={10} fz={"sm"}>Proses pendaftaran NIB melalui OSS mencakup beberapa langkah umum, seperti:</Text>
<Box p={"xl"} w={{ base: "100%", md: "100%" }} >
<Stepper active={active} onStepClick={setActive} orientation="vertical"
styles={{
separator: {
marginLeft: 25
},
step: {
padding: '12px 0'
}
}}>
<StepperStep label="Langkah Pertama" description="Pendaftaran Akun">
Pendaftaran akun pada portal OSS
</StepperStep>
<StepperStep label="Langkah Kedua" description="Pengisian Data Perusahaan">
Mengisi informasi perusahaan, termasuk data pemegang saham, alamat perusahaan, dan lainnya
</StepperStep>
<StepperStep label="Langkah Ketiga" description="Pemilihan KBLI ">
Memilih KBLI dengan jenis usaha yang akan didaftarkan
</StepperStep>
<StepperStep label="Langkah Keempat" description="Pengunggahan Dokumen">
Mengunggah dokumen-dokumen yang diperlukan, seperti akta pendirian perusahaan, surat izin usaha, dan dokumen lainnya sesuai dengan ketentuan yang berlaku
</StepperStep>
<StepperStep label="Langkah Kelima" description="Verifikasi dan Persetujuan">
Proses verifikasi dan persetujuan oleh instansi terkait
</StepperStep>
<StepperStep label="Langkah Keenam" description="Penerimaan NIB">
Jika proses sebelumnya berhasil, perusahaan akan menerima NIB sebagai identitas resmi usaha anda
</StepperStep>
<StepperCompleted>
Selesai, anda telah mengikuti proses pendaftaran NIB melalui OSS
</StepperCompleted>
</Stepper>
<Group justify="center" mt="xl">
<Button variant="default" onClick={prevStep}>Back</Button>
<Button onClick={nextStep}>Next step</Button>
</Group>
<Text py={35} ta={"justify"} fz={"sm"}>Penting untuk diingat bahwa prosedur dan persyaratan dapat berubah
seiring waktu. Untuk informasi yang lebih akurat dan terkini, saya sarankan untuk mengunjungi situs
resmi OSS <a href={"https://oss.go.id/"}>(https://oss.go.id/)</a> atau menghubungi instansi terkait di pemerintah Indonesia yang bertanggung jawab atas urusan perizinan usaha.</Text>
</Box>
{/* Bagian Pelayanan Telunjuk Sakti Desa */}
<Box py={15}>
<Text fz={"h4"} fw={"bold"}>Pelayanan Telunjuk Sakti Desa</Text>
</Box>
<Text fz={"sm"} py={10}>Terwujudnya Layanan umum bertajuk Sistim administrasi Kependudukan Terintegrasi di Desa berbasi Elektronik, Smart dan Aman. layanan telunjuk sakti Desa meliputi :</Text>
<List type="ordered" pb={20}>
<ListItem fz={"sm"}>Telunjuk Sakti Desa Akta Kelahiran (Petunjuk Pengajuan pada link berikut : Download <a href="https://darmasaba.desa.id/storage/files/PERSYARATAN%20DAN%20ALUR%20PENGAJUAN%20AKTA%20KELAHIRAN_(dengan%20contoh%20Formulir).pdf">Akta Kelahiran</a>)</ListItem>
<ListItem fz={"sm"}>Telunjuk Sakti Desa Akta Perkawinan (Petunjuk Pengajuan pada link berikut : Download <a href="https://darmasaba.desa.id/storage/files/PERSYARATAN%20DAN%20ALUR%20PENGAJUAN%20AKTA%20PERKAWINAN_(dengan%20contoh%20Formulir).pdf">Akta Perkawinan</a>)</ListItem>
<ListItem fz={"sm"}>Telunjuk Sakti Desa Akta Kematian (Petunjuk Pengajuan pada link berikut : Download <a href="https://darmasaba.desa.id/storage/files/PERSYARATAN%20DAN%20ALUR%20PENGAJUAN%20AKTA%20KEMATIAN_(dengan%20contoh%20Formulir).pdf">Akata Kematian</a>)</ListItem>
</List>
{/* Bagian Pelayanan Telunjuk Sakti Desa */}
<Box py={15}>
<Text fz={"h4"} fw={"bold"}>Pelayanan Penduduk Non-Permanent</Text>
</Box>
<Text pb={20} fz={"sm"} ta={"justify"}>Surat Keterangan Penduduk Non-Permanent adalah dokumen yang dikeluarkan oleh pihak berwenang untuk memberikan keterangan bahwa seseorang atau kelompok orang memiliki status penduduk non-permanent di suatu wilayah. Dokumen ini biasanya digunakan untuk keperluan administratif atau legal, seperti mendapatkan akses ke layanan kesehatan, pendidikan, atau pelayanan publik lainnya.</Text>
<Divider />
<Flex justify={"space-between"} py={20}>
<Text fz={"sm"}>25 May 2021 . Darmasaba</Text>
<Box>
<Flex gap={"lg"}>
<ActionIcon variant='transparent'>
<IconBrandFacebook color={"gray"} size={"30"} />
</ActionIcon>
<ActionIcon variant='transparent'>
<IconBrandInstagram color={"gray"} size={"30"} />
</ActionIcon>
<ActionIcon variant='transparent'>
<IconBrandTwitter color={"gray"} size={"30"} />
</ActionIcon>
<ActionIcon variant='transparent'>
<IconBrandWhatsapp color={"gray"} size={"30"} />
</ActionIcon>
</Flex>
</Box>
</Flex>
<Divider pb={50} />
</Container>
</Stack>
)
}

236
src/app/darmasaba/(pages)/desa/layanan/page2.txt Normal file
View File

@@ -0,0 +1,236 @@
'use client'
import colors from "@/con/colors";
import { ActionIcon, Box, Button, Container, Divider, Flex, Group, Image, List, ListItem, Modal, Paper, SimpleGrid, Stack, Stepper, StepperCompleted, StepperStep, Text, TextInput } from "@mantine/core";
import { IconBrandFacebook, IconBrandInstagram, IconBrandTwitter, IconBrandWhatsapp, IconSearch } from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import { useState } from "react";
import BackButton from "./_com/BackButto";
import { useDisclosure } from "@mantine/hooks";
const data = [
{
id: 1,
name: "Surat Keterangan Domisili Organisasi",
link: "/darmasaba/desa/layanan/domisili"
},
{
id: 2,
name: "Surat Keterangan Penghasilan",
link: "/darmasaba/desa/layanan/penghasilan"
},
{
id: 3,
name: "Surat Keterangan Tidak Mampu",
link: "/darmasaba/desa/layanan/tidakmampu"
},
{
id: 4,
name: "Surat Keterangan Kelahiran",
link: "/darmasaba/desa/layanan/kelahiran"
},
{
id: 5,
name: "Surat Keterangan Usaha",
link: "/darmasaba/desa/layanan/usaha"
},
{
id: 6,
name: "Surat Keterangan Kematian",
link: "/darmasaba/desa/layanan/kematian"
},
{
id: 7,
name: "Surat Keterangan Tempat Usaha",
link: "/darmasaba/desa/layanan/tempatusaha"
},
{
id: 8,
name: "Surat Keterangan Belum Kawin",
link: "/darmasaba/desa/layanan/belumkawin"
},
{
id: 9,
name: "Surat Keterangan Kelakuan Baik",
link: "/darmasaba/desa/layanan/skck"
},
{
id: 10,
name: "Surat Keterangan Beda Biodata Diri",
link: "/darmasaba/desa/layanan/biodata"
},
{
id: 11,
name: "Surat Keterangan Yatim Piatu",
link: "/darmasaba/desa/layanan/yatim"
}
]
export default function Page() {
const [opened, { open, close }] = useDisclosure(false);
const router = useRouter()
const [active, setActive] = useState(1);
const nextStep = () => setActive((current) => (current < 6 ? current + 1 : current));
const prevStep = () => setActive((current) => (current > 0 ? current - 1 : current));
return (
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"42"}>
<Container w={{ base: "100%", md: "50%" }} >
<BackButton />
<Stack align="center" gap={0}>
{/* Bagian Layanan */}
<Text fz={"3.4rem"} fw={"bold"}>
Layanan Desa Darmasaba
</Text>
<Text
>
Informasi dan Pelayanan Administrasi Digital
</Text>
<TextInput
py={20}
w={{ base: "70%", md: "50%" }}
placeholder="Cari Layanan"
leftSection={<IconSearch size={20} />}
/>
</Stack>
{/* Bagian Pelayanan Surat Keterangan */}
<Box py={10}>
<Text fz={"h4"} fw={"bold"}>Pelayanan Surat Keterangan</Text>
</Box>
<SimpleGrid
py={20}
cols={{
base: 1,
sm: 1
}}
>
{data.map((v, k) => {
return (
<Paper
key={k}
radius={16}
pos={"relative"}
>
<Stack gap={0} p={"lg"} pos={"relative"}>
<Flex justify={"space-between"} align={"center"} px={10}>
<Box>
<Flex p={"lg"} align={"center"} gap={"lg"}>
<Paper p={10} bg={colors.Bg} radius={"100%"}>
<Image src="/api/img/icondocument.png" alt="" w={30} h={30} />
</Paper>
<Text size={"1.5rem"}>{v.name}</Text>
</Flex>
</Box>
<ActionIcon size={"lg"} variant="transparent" onClick={open}>
<Image src="/api/img/arrowicon.png" alt="" w={30} h={30} />
</ActionIcon>
</Flex>
{/* <Group justify="center">
<Button px={20} radius={"100"} size="md" bg={colors["blue-button"]}
onClick={() => router.push(v.link)}>
Detail
</Button>
</Group> */}
</Stack>
</Paper>
)
})}
<Modal opened={opened} onClose={close} size={"xl"} title="Persyaratan">
<Text fz={"sm"}>Test</Text>
</Modal>
</SimpleGrid>
{/* Bagian Pelayanan Perizinan Berusaha */}
<Box py={15}>
<Text fz={"h4"} fw={"bold"}>Pelayanan Perizinan Berusaha Berbasis Risiko Melalui Sistem ONLINE SINGLE SUBMISSION (OSS)</Text>
</Box>
<Text py={10} ta={"justify"} fz={"sm"}>Penyelenggaraan Perizinan Berusaha Berbasis Risiko melalui Sistem Online Single Submission (OSS)
merupakan pelaksanaan Undang-Undang Nomor 11 Tahun 2020 Tentang Cipta Kerja. OSS Berbasis Risiko wajib digunakan oleh Pelaku Usaha,
Kementerian/Lembaga, Pemerintah Daerah, Administrator Kawasan Ekonomi Khusus (KEK), dan Badan Pengusahaan Kawasan Perdagangan Bebas
Pelabuhan Bebas (KPBPB).Berdasarkan Peraturan Pemerintah Nomor 5 Tahun 2021 terdapat 1.702 kegiatan usaha yang terdiri atas 1.349
Klasifikasi Baku Lapangan Usaha Indonesia (KBLI) yang sudah diimplementasikan dalam Sistem OSS Berbasis Risiko.</Text>
<Text py={10} fz={"sm"}>Proses pendaftaran NIB melalui OSS mencakup beberapa langkah umum, seperti:</Text>
<Box p={"xl"} w={{ base: "100%", md: "100%" }} >
<Stepper active={active} onStepClick={setActive} orientation="vertical"
styles={{
separator: {
marginLeft: 25
},
step: {
padding: '12px 0'
}
}}>
<StepperStep label="Langkah Pertama" description="Pendaftaran Akun">
Pendaftaran akun pada portal OSS
</StepperStep>
<StepperStep label="Langkah Kedua" description="Pengisian Data Perusahaan">
Mengisi informasi perusahaan, termasuk data pemegang saham, alamat perusahaan, dan lainnya
</StepperStep>
<StepperStep label="Langkah Ketiga" description="Pemilihan KBLI ">
Memilih KBLI dengan jenis usaha yang akan didaftarkan
</StepperStep>
<StepperStep label="Langkah Keempat" description="Pengunggahan Dokumen">
Mengunggah dokumen-dokumen yang diperlukan, seperti akta pendirian perusahaan, surat izin usaha, dan dokumen lainnya sesuai dengan ketentuan yang berlaku
</StepperStep>
<StepperStep label="Langkah Kelima" description="Verifikasi dan Persetujuan">
Proses verifikasi dan persetujuan oleh instansi terkait
</StepperStep>
<StepperStep label="Langkah Keenam" description="Penerimaan NIB">
Jika proses sebelumnya berhasil, perusahaan akan menerima NIB sebagai identitas resmi usaha anda
</StepperStep>
<StepperCompleted>
Selesai, anda telah mengikuti proses pendaftaran NIB melalui OSS
</StepperCompleted>
</Stepper>
<Group justify="center" mt="xl">
<Button variant="default" onClick={prevStep}>Back</Button>
<Button onClick={nextStep}>Next step</Button>
</Group>
<Text py={35} ta={"justify"} fz={"sm"}>Penting untuk diingat bahwa prosedur dan persyaratan dapat berubah
seiring waktu. Untuk informasi yang lebih akurat dan terkini, saya sarankan untuk mengunjungi situs
resmi OSS <a href={"https://oss.go.id/"}>(https://oss.go.id/)</a> atau menghubungi instansi terkait di pemerintah Indonesia yang bertanggung jawab atas urusan perizinan usaha.</Text>
</Box>
{/* Bagian Pelayanan Telunjuk Sakti Desa */}
<Box py={15}>
<Text fz={"h4"} fw={"bold"}>Pelayanan Telunjuk Sakti Desa</Text>
</Box>
<Text fz={"sm"} py={10}>Terwujudnya Layanan umum bertajuk Sistim administrasi Kependudukan Terintegrasi di Desa berbasi Elektronik, Smart dan Aman. layanan telunjuk sakti Desa meliputi :</Text>
<List type="ordered" pb={20}>
<ListItem fz={"sm"}>Telunjuk Sakti Desa Akta Kelahiran (Petunjuk Pengajuan pada link berikut : Download <a href="https://darmasaba.desa.id/storage/files/PERSYARATAN%20DAN%20ALUR%20PENGAJUAN%20AKTA%20KELAHIRAN_(dengan%20contoh%20Formulir).pdf">Akta Kelahiran</a>)</ListItem>
<ListItem fz={"sm"}>Telunjuk Sakti Desa Akta Perkawinan (Petunjuk Pengajuan pada link berikut : Download <a href="https://darmasaba.desa.id/storage/files/PERSYARATAN%20DAN%20ALUR%20PENGAJUAN%20AKTA%20PERKAWINAN_(dengan%20contoh%20Formulir).pdf">Akta Perkawinan</a>)</ListItem>
<ListItem fz={"sm"}>Telunjuk Sakti Desa Akta Kematian (Petunjuk Pengajuan pada link berikut : Download <a href="https://darmasaba.desa.id/storage/files/PERSYARATAN%20DAN%20ALUR%20PENGAJUAN%20AKTA%20KEMATIAN_(dengan%20contoh%20Formulir).pdf">Akata Kematian</a>)</ListItem>
</List>
{/* Bagian Pelayanan Telunjuk Sakti Desa */}
<Box py={15}>
<Text fz={"h4"} fw={"bold"}>Pelayanan Penduduk Non-Permanent</Text>
</Box>
<Text pb={20} fz={"sm"} ta={"justify"}>Surat Keterangan Penduduk Non-Permanent adalah dokumen yang dikeluarkan oleh pihak berwenang untuk memberikan keterangan bahwa seseorang atau kelompok orang memiliki status penduduk non-permanent di suatu wilayah. Dokumen ini biasanya digunakan untuk keperluan administratif atau legal, seperti mendapatkan akses ke layanan kesehatan, pendidikan, atau pelayanan publik lainnya.</Text>
<Divider />
<Flex justify={"space-between"} py={20}>
<Text fz={"sm"}>25 May 2021 . Darmasaba</Text>
<Box>
<Flex gap={"lg"}>
<ActionIcon variant='transparent'>
<IconBrandFacebook color={"gray"} size={"30"} />
</ActionIcon>
<ActionIcon variant='transparent'>
<IconBrandInstagram color={"gray"} size={"30"} />
</ActionIcon>
<ActionIcon variant='transparent'>
<IconBrandTwitter color={"gray"} size={"30"} />
</ActionIcon>
<ActionIcon variant='transparent'>
<IconBrandWhatsapp color={"gray"} size={"30"} />
</ActionIcon>
</Flex>
</Box>
</Flex>
<Divider pb={50} />
</Container>
</Stack>
)
}
function ModalDetail() {
}