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

UI Detail Layanan & Detail Penghargaan

Browse Source
This commit is contained in:
nico
2025-03-13 15:48:47 +08:00
parent cef0c98f1e
commit 7d93ba5108
22 changed files with 996 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -0,0 +1,35 @@
import colors from '@/con/colors';
import { Stack, Container, List, ListItem, Box, Text, Image } from '@mantine/core';
import React from 'react';
import BackButton from '../../_com/BackButto';
function Page() {
return (
<Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={"42"}>
<Container w={{ base: "100%", md: "50%" }} p={"xl"}>
<BackButton/>
<Stack gap={0}>
<Text fz={"3.4rem"} ta={"center"} fw={"bold"}>
Surat Keterangan Belum Kawin
</Text>
<Text fz={"h4"} py={20}>
Persyaratan Dokumen:
</Text>
<List>
<ListItem fz={"sm"}>Pengantar Kelian Banjar Dinas di Wilayah Masing - masing</ListItem>
<ListItem fz={"sm"}>Fotocopy Ktp atau Kartu Keluarga</ListItem>
<ListItem fz={"sm"}>Khusus bagi yang berstatus duda atau janda melampirkan fotocopy akta cerai atau dokumen pendukung lainnya</ListItem>
</List>
<Box py={20}>
<Text fz={"h4"} py={20}>
Alur Pelayanan:
</Text>
<Image src="/api/img/flowchart-suket-beda-biodatadiri-removebg-preview.png" alt='' />
</Box>
</Stack>
</Container>
</Stack>
);
}
export default Page;

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

@@ -0,0 +1,35 @@
import colors from '@/con/colors';
import { Stack, Container, List, ListItem, Box, Text, Image } from '@mantine/core';
import React from 'react';
import BackButton from '../../_com/BackButto';
function Page() {
return (
<Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={"42"}>
<Container w={{ base: "100%", md: "50%" }} p={"xl"}>
<BackButton/>
<Stack gap={0}>
<Text fz={"3.4rem"} ta={"center"} fw={"bold"}>
Surat Keterangan Beda Biodata Diri
</Text>
<Text fz={"h4"} py={20}>
Persyaratan Dokumen:
</Text>
<List>
<ListItem fz={"sm"}>Pengantar Kelian Banjar Dinas di Wilayah Masing - masing</ListItem>
<ListItem fz={"sm"}>Fotocopy Ktp atau Kartu Keluarga</ListItem>
<ListItem fz={"sm"}>Fotocopy dokumen bersangkutan yang terdapat perbedaan biodata diri misal : Sertifikat Tanah/Ijazah/Polis Asuransi dan lainnya.</ListItem>
</List>
<Box py={20}>
<Text fz={"h4"} py={20}>
Alur Pelayanan:
</Text>
<Image src="/api/img/flowchart-suket-beda-biodatadiri-removebg-preview.png" alt='' />
</Box>
</Stack>
</Container>
</Stack>
);
}
export default Page;

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

@@ -1,15 +1,31 @@
import colors from '@/con/colors';
import { Stack, Container, Text } from '@mantine/core';
import React from 'react';
import { Box, Container, Image, List, ListItem, Stack, Text } from '@mantine/core';
import BackButton from '../../_com/BackButto';
function Page() {
return (
<Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={"42"}>
<Container w={{ base: "100%", md: "50%" }} p={"xl"}>
<BackButton/>
<Stack gap={0}>
<Text>
</Text>
<Text fz={"3.4rem"} ta={"center"} fw={"bold"}>
Surat Keterangan Domisili Organisasi
</Text>
<Text fz={"h4"} py={20}>
Persyaratan Dokumen:
</Text>
<List>
<ListItem fz={"sm"}>Pengantar Kelian Banjar Dinas di Wilayah Masing - masing</ListItem>
<ListItem fz={"sm"}>Fotocopy Surat Keterangan Terdaftar (SKT) organisasi atau Pengukuhan Kelompok</ListItem>
<ListItem fz={"sm"}>Jika Pengajuan baru pembuatan SKT maka melengkapi Susunan Pengurus lengkap dengan Kop Organisasi</ListItem>
<ListItem fz={"sm"}>Tanggal berdiri/Tahun berdiri/Sejak kapan berdirinya organisasi</ListItem>
</List>
<Box py={20}>
<Text fz={"h4"} py={20}>
Alur Pelayanan:
</Text>
<Image src="/api/img/flowchart-suket-beda-biodatadiri-removebg-preview.png" alt=''/>
</Box>
</Stack>
</Container>
</Stack>

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

@@ -0,0 +1,36 @@
import colors from '@/con/colors';
import { Stack, Container, List, ListItem, Box, Text, Image } from '@mantine/core';
import React from 'react';
import BackButton from '../../_com/BackButto';
function Page() {
return (
<Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={"42"}>
<Container w={{ base: "100%", md: "50%" }} p={"xl"}>
<BackButton/>
<Stack gap={0}>
<Text fz={"3.4rem"} ta={"center"} fw={"bold"}>
Surat Keterangan Kelahiran
</Text>
<Text fz={"h4"} py={20}>
Persyaratan Dokumen:
</Text>
<List>
<ListItem fz={"sm"}>Pengantar Kelian Banjar Dinas di Wilayah Masing - masing</ListItem>
<ListItem fz={"sm"}>Fotocopy Surat lahir dari dokter/bidan (jika ada)</ListItem>
<ListItem fz={"sm"}>Fotocopy Kartu Keluarga</ListItem>
<ListItem fz={"sm"}>Fotocopy KTP 2 orang saksi</ListItem>
</List>
<Box py={20}>
<Text fz={"h4"} py={20}>
Alur Pelayanan:
</Text>
<Image src="/api/img/flowchart-suket-kelahiran-removebg-preview.png" alt='' />
</Box>
</Stack>
</Container>
</Stack>
);
}
export default Page;

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

@@ -0,0 +1,36 @@
import colors from '@/con/colors';
import { Stack, Container, List, ListItem, Box, Text, Image } from '@mantine/core';
import React from 'react';
import BackButton from '../../_com/BackButto';
function Page() {
return (
<Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={"42"}>
<Container w={{ base: "100%", md: "50%" }} p={"xl"}>
<BackButton/>
<Stack gap={0}>
<Text fz={"3.4rem"} ta={"center"} fw={"bold"}>
Surat Keterangan Kematian
</Text>
<Text fz={"h4"} py={20}>
Persyaratan Dokumen:
</Text>
<List>
<ListItem fz={"sm"}>Pengantar Kelian Banjar Dinas di Wilayah Masing - masing</ListItem>
<ListItem fz={"sm"}>Fotocopy KTP atau Kartu keluarga</ListItem>
<ListItem fz={"sm"}>Surat Kematian dari rumah sakit atau dokter (jika ada)</ListItem>
<ListItem fz={"sm"}>Tanggal dan Waktu Kematian</ListItem>
</List>
<Box py={20}>
<Text fz={"h4"} py={20}>
Alur Pelayanan:
</Text>
<Image src="/api/img/flowchart-suket-beda-biodatadiri-removebg-preview.png" alt='' />
</Box>
</Stack>
</Container>
</Stack>
);
}
export default Page;

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

@@ -0,0 +1,35 @@
import colors from '@/con/colors';
import { Stack, Container, List, ListItem, Box, Text, Image } from '@mantine/core';
import React from 'react';
import BackButton from '../../_com/BackButto';
function Page() {
return (
<Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={"42"}>
<Container w={{ base: "100%", md: "50%" }} p={"xl"}>
<BackButton/>
<Stack gap={0}>
<Text fz={"3.4rem"} ta={"center"} fw={"bold"}>
Surat Keterangan Penghasilan
</Text>
<Text fz={"h4"} py={20}>
Persyaratan Dokumen:
</Text>
<List>
<ListItem fz={"sm"}>Pengantar Kelian Banjar Dinas di Wilayah Masing - masing</ListItem>
<ListItem fz={"sm"}>Fotocopy KTP orang tua atau Fotocopy Kartu keluarga</ListItem>
<ListItem fz={"sm"}>Membuat Surat Pernyataan Penghasilan bermaterai (disertai jumlah penghasilan)</ListItem>
</List>
<Box py={20}>
<Text fz={"h4"} py={20}>
Alur Pelayanan:
</Text>
<Image src="/api/img/flowchart-suket-beda-biodatadiri-removebg-preview.png" alt='' />
</Box>
</Stack>
</Container>
</Stack>
);
}
export default Page;

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

@@ -0,0 +1,34 @@
import colors from '@/con/colors';
import { Stack, Container, List, ListItem, Box, Text, Image } from '@mantine/core';
import React from 'react';
import BackButton from '../../_com/BackButto';
function Page() {
return (
<Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={"42"}>
<Container w={{ base: "100%", md: "50%" }} p={"xl"}>
<BackButton/>
<Stack gap={0}>
<Text fz={"3.4rem"} ta={"center"} fw={"bold"}>
Surat Keterangan Kelakuan Baik (Pengantar SKCK)
</Text>
<Text fz={"h4"} py={20}>
Persyaratan Dokumen:
</Text>
<List>
<ListItem fz={"sm"}>Pengantar Kelian Banjar Dinas di Wilayah Masing - masing</ListItem>
<ListItem fz={"sm"}>Fotocopy Ktp atau Kartu Keluarga</ListItem>
</List>
<Box py={20}>
<Text fz={"h4"} py={20}>
Alur Pelayanan:
</Text>
<Image src="/api/img/flowchart-suket-beda-biodatadiri-removebg-preview.png" alt='' />
</Box>
</Stack>
</Container>
</Stack>
);
}
export default Page;

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

@@ -0,0 +1,36 @@
import colors from '@/con/colors';
import { Stack, Container, List, ListItem, Box, Text, Image } from '@mantine/core';
import React from 'react';
import BackButton from '../../_com/BackButto';
function Page() {
return (
<Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={"42"}>
<Container w={{ base: "100%", md: "50%" }} p={"xl"}>
<BackButton/>
<Stack gap={0}>
<Text fz={"3.4rem"} ta={"center"} fw={"bold"}>
Surat Keterangan Tempat Usaha
</Text>
<Text fz={"h4"} py={20}>
Persyaratan Dokumen:
</Text>
<List>
<ListItem fz={"sm"}>Pengantar Kelian Banjar Dinas di Wilayah Masing - masing</ListItem>
<ListItem fz={"sm"}>Fotocopy KTP atau Kartu keluarga</ListItem>
<ListItem fz={"sm"}>Foto Lokasi dan Kegiatan Usaha di cetak dalam selembar kertas (diparaf dan stempel oleh Kelian Banjar Dinas)</ListItem>
<ListItem fz={"sm"}>Surat Perjanjian Sewa/Kontrak atau Kwintansi Pembayaran Sewa 3 bulan terakhir bagi yang mengontrak tempat usaha, apabila tempat usaha milik sendiri lampiri dengan dokumen kepemilikan tempat usaha (dapat berupa fotocopy sppt atau Fotocopy Sertipikat Hak Milik)</ListItem>
</List>
<Box py={20}>
<Text fz={"h4"} py={20}>
Alur Pelayanan:
</Text>
<Image src="/api/img/flowchart-suket-tempat-usaha-removebg-preview.png" alt='' />
</Box>
</Stack>
</Container>
</Stack>
);
}
export default Page;

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

@@ -0,0 +1,37 @@
import colors from '@/con/colors';
import { Stack, Container, List, ListItem, Box, Text, Image } from '@mantine/core';
import React from 'react';
import BackButton from '../../_com/BackButto';
function Page() {
return (
<Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={"42"}>
<Container w={{ base: "100%", md: "50%" }} p={"xl"}>
<BackButton/>
<Stack gap={0}>
<Text fz={"3.4rem"} ta={"center"} fw={"bold"}>
Surat Keterangan Tidak Mampu
</Text>
<Text fz={"h4"} py={20}>
Persyaratan Dokumen:
</Text>
<List>
<ListItem fz={"sm"}>Pengantar Kelian Banjar Dinas di Wilayah Masing - masing</ListItem>
<ListItem fz={"sm"}>Fotocopy KTP/KIA atau Kartu Keluarga</ListItem>
<ListItem fz={"sm"}>Fotocopy Kartu Indonesia Pintar/Kartu Perlindungan Sosial/Terdaftar dalam DTKS</ListItem>
<ListItem fz={"sm"}>Jika tidak memiliki Kartu tersebut diatas diwajibkan membuat Surat Pernyataan Tidak Mampu
</ListItem>
</List>
<Box py={20}>
<Text fz={"h4"} py={20}>
Alur Pelayanan:
</Text>
<Image src="/api/img/flowchart-suket-tidak-mampu-removebg-preview.png" alt='' />
</Box>
</Stack>
</Container>
</Stack>
);
}
export default Page;

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

@@ -0,0 +1,35 @@
import colors from '@/con/colors';
import { Stack, Container, List, ListItem, Box, Text, Image } from '@mantine/core';
import React from 'react';
import BackButton from '../../_com/BackButto';
function Page() {
return (
<Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={"42"}>
<Container w={{ base: "100%", md: "50%" }} p={"xl"}>
<BackButton/>
<Stack gap={0}>
<Text fz={"3.4rem"} ta={"center"} fw={"bold"}>
Surat Keterangan Usaha
</Text>
<Text fz={"h4"} py={20}>
Persyaratan Dokumen:
</Text>
<List>
<ListItem fz={"sm"}>Pengantar Kelian Banjar Dinas di Wilayah Masing - masing</ListItem>
<ListItem fz={"sm"}>Fotocopy KTP atau Kartu keluarga</ListItem>
<ListItem fz={"sm"}>Foto Lokasi dan Kegiatan Usaha di cetak dalam selembar kertas (diparaf dan stempel oleh Kelian Banjar Dinas)</ListItem>
</List>
<Box py={20}>
<Text fz={"h4"} py={20}>
Alur Pelayanan:
</Text>
<Image src="/api/img/flowchart-suket-beda-biodatadiri-removebg-preview.png" alt='' />
</Box>
</Stack>
</Container>
</Stack>
);
}
export default Page;

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

@@ -0,0 +1,34 @@
import colors from '@/con/colors';
import { Stack, Container, List, ListItem, Box, Text, Image } from '@mantine/core';
import React from 'react';
import BackButton from '../../_com/BackButto';
function Page() {
return (
<Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={"42"}>
<Container w={{ base: "100%", md: "50%" }} p={"xl"}>
<BackButton />
<Stack gap={0}>
<Text fz={"3.4rem"} ta={"center"} fw={"bold"}>
Surat Keterangan Yatim Piatu
</Text>
<Text fz={"h4"} py={20}>
Persyaratan Dokumen:
</Text>
<List>
<ListItem fz={"sm"}>Pengantar Kelian Banjar Dinas di Wilayah Masing - masing</ListItem>
<ListItem fz={"sm"}>Fotocopy Ktp, KIA atau Kartu Keluarga</ListItem>
</List>
<Box py={20}>
<Text fz={"h4"} py={20}>
Alur Pelayanan:
</Text>
<Image src="/api/img/flowchart-suket-beda-biodatadiri-removebg-preview.png" alt='' />
</Box>
</Stack>
</Container>
</Stack>
);
}
export default Page;

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

@@ -1,47 +1,78 @@
'use client'
import colors from "@/con/colors";
import { ActionIcon, Anchor, BackgroundImage, Box, Button, Container, Divider, Flex, Group, List, ListItem, SimpleGrid, Stack, Stepper, StepperCompleted, StepperStep, Text } from "@mantine/core";
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 { 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: ""
link: "/darmasaba/desa/layanan/domisili"
},
{
id: 2,
images: "/api/img/test-3.jpeg",
name: "Surat Keterangan Penghasilan",
link: ""
link: "/darmasaba/desa/layanan/penghasilan"
},
{
id: 3,
images: "/api/img/domisili.jpeg",
name: "Surat Keterangan Tidak Mampu",
link: ""
link: "/darmasaba/desa/layanan/tidakmampu"
},
{
id: 4,
images: "/api/img/kelahiran.jpeg",
name: "Surat Keterangan Kelahiran",
link: ""
link: "/darmasaba/desa/layanan/kelahiran"
},
{
id: 5,
images: "/api/img/keterangan-usaha.jpeg",
name: "Surat Keterangan Usaha",
link: ""
link: "/darmasaba/desa/layanan/usaha"
},
{
id: 6,
images: "/api/img/kematian.jpeg",
name: "Surat Keterangan Kematian",
link: ""
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() {
@@ -52,6 +83,7 @@ export default function Page() {
return (
<Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={"42"}>
<Container w={{ base: "100%", md: "50%" }} >
<BackButton/>
<Stack align="center" gap={0}>
{/* Bagian Layanan */}
<Text fz={"3.4rem"} fw={"bold"}>
@@ -162,7 +194,7 @@ export default function Page() {
</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 <Anchor>(https://oss.go.id/)</Anchor> atau menghubungi instansi terkait di pemerintah Indonesia yang bertanggung jawab atas urusan perizinan usaha.</Text>
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}>
@@ -170,9 +202,9 @@ export default function Page() {
</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 <Anchor fz={"sm"}>Akta Kelahiran</Anchor>)</ListItem>
<ListItem fz={"sm"}>Telunjuk Sakti Desa Akta Perkawinan (Petunjuk Pengajuan pada link berikut : Download <Anchor fz={"sm"}>Akta Perkawinan</Anchor>)</ListItem>
<ListItem fz={"sm"}>Telunjuk Sakti Desa Akta Kematian (Petunjuk Pengajuan pada link berikut : Download <Anchor fz={"sm"}>Akata Kematian</Anchor>)</ListItem>
<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}>
@@ -199,7 +231,7 @@ export default function Page() {
</Flex>
</Box>
</Flex>
<Divider pb={50}/>
<Divider pb={50} />
</Container>
</Stack>
)