UI Layanan & Sub Desa Layanan
This commit is contained in:
@@ -0,0 +1,19 @@
|
||||
import colors from '@/con/colors';
|
||||
import { Stack, Container, Text } from '@mantine/core';
|
||||
import React from 'react';
|
||||
|
||||
function Page() {
|
||||
return (
|
||||
<Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={"42"}>
|
||||
<Container w={{ base: "100%", md: "50%" }} p={"xl"}>
|
||||
<Stack gap={0}>
|
||||
<Text>
|
||||
|
||||
</Text>
|
||||
</Stack>
|
||||
</Container>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
206
src/app/darmasaba/(pages)/desa/layanan/page.tsx
Normal file
206
src/app/darmasaba/(pages)/desa/layanan/page.tsx
Normal file
@@ -0,0 +1,206 @@
|
||||
'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 { IconBrandFacebook, IconBrandInstagram, IconBrandTwitter, IconBrandWhatsapp } from "@tabler/icons-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
|
||||
const data = [
|
||||
{
|
||||
id: 1,
|
||||
images: "/api/img/test.png",
|
||||
name: "Surat Keterangan Domisili Organisasi",
|
||||
link: ""
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
images: "/api/img/test-3.jpeg",
|
||||
name: "Surat Keterangan Penghasilan",
|
||||
link: ""
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
images: "/api/img/domisili.jpeg",
|
||||
name: "Surat Keterangan Tidak Mampu",
|
||||
link: ""
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
images: "/api/img/kelahiran.jpeg",
|
||||
name: "Surat Keterangan Kelahiran",
|
||||
link: ""
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
images: "/api/img/keterangan-usaha.jpeg",
|
||||
name: "Surat Keterangan Usaha",
|
||||
link: ""
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
images: "/api/img/kematian.jpeg",
|
||||
name: "Surat Keterangan Kematian",
|
||||
link: ""
|
||||
},
|
||||
|
||||
]
|
||||
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.grey[1]} py={"xl"} gap={"42"}>
|
||||
<Container w={{ base: "100%", md: "50%" }} >
|
||||
<Stack align="center" gap={0}>
|
||||
{/* Bagian Layanan */}
|
||||
<Text fz={"3.4rem"} fw={"bold"}>
|
||||
Layanan
|
||||
</Text>
|
||||
<Text
|
||||
>
|
||||
Adapun berbagai layanan yang telah tersedia dan dapat diakses dengan mudah oleh masyarakat di Desa Darmasaba :
|
||||
</Text>
|
||||
</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={350}
|
||||
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 <Anchor>(https://oss.go.id/)</Anchor> 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 <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>
|
||||
</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>
|
||||
)
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
import { Stack } from "@mantine/core";
|
||||
|
||||
export default function Page() {
|
||||
return <Stack>
|
||||
layanan
|
||||
</Stack>
|
||||
}
|
||||
@@ -102,7 +102,9 @@ function Footer() {
|
||||
position: 'relative'
|
||||
}}
|
||||
>
|
||||
<Image src="/api/img/chatbot-removebg-preview.png" alt="Logo Desa" width={80} height={80} />
|
||||
<ActionIcon size={80} radius={"xl"} variant='transparent'>
|
||||
<Image src="/api/img/chatbot-removebg-preview.png" alt="Logo Desa" width={80} height={80} />
|
||||
</ActionIcon>
|
||||
</Box>
|
||||
</Group>
|
||||
</Stack>
|
||||
@@ -195,7 +197,7 @@ function Footer() {
|
||||
</Box>
|
||||
<Divider py={15} />
|
||||
<Text ta={"center"} c={"white"} p={20}>
|
||||
© 2024 Desa Darmasaba. Hak Cipta Dilindungi.
|
||||
© 2024 Desa Darmasaba. Hak Cipta Dilindungi.
|
||||
</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
|
||||
@@ -2,13 +2,13 @@
|
||||
import colors from "@/con/colors";
|
||||
import navbarListMenu from "@/con/navbar-list-menu";
|
||||
import stateNav from "@/state/state-nav";
|
||||
import { ActionIcon, Box, Burger, Group, Stack, Text } from "@mantine/core";
|
||||
import { IconHome, IconSquareArrowRight } from "@tabler/icons-react";
|
||||
import { ActionIcon, Box, Burger, Group, Image, Stack, Text } from "@mantine/core";
|
||||
import { IconSquareArrowRight } from "@tabler/icons-react";
|
||||
import { motion } from 'framer-motion';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useSnapshot } from "valtio";
|
||||
import { MenuItem } from "../../../../types/menu-item";
|
||||
import { NavbarMainMenu } from "./NavbarMainMenu";
|
||||
import { useRouter } from 'next/navigation'
|
||||
|
||||
export function Navbar() {
|
||||
const { item, isSearch, mobileOpen } = useSnapshot(stateNav);
|
||||
@@ -31,8 +31,10 @@ export function Navbar() {
|
||||
<ActionIcon variant="transparent" onClick={() => {
|
||||
router.push("/darmasaba")
|
||||
stateNav.mobileOpen = false
|
||||
}}>
|
||||
<IconHome />
|
||||
}}
|
||||
size={80} radius={"xl"}
|
||||
>
|
||||
<Image src="/api/img/darmasaba-icon.png" alt="Logo Desa" width={50} height={50} />
|
||||
</ActionIcon>
|
||||
<Burger onClick={() => stateNav.mobileOpen = !stateNav.mobileOpen} color={colors["blue-button"]} opened={mobileOpen} />
|
||||
</Group>
|
||||
|
||||
@@ -18,6 +18,7 @@ import { useMediaQuery } from "@mantine/hooks";
|
||||
import Autoplay from "embla-carousel-autoplay";
|
||||
import _ from "lodash";
|
||||
import { useTransitionRouter } from "next-view-transitions";
|
||||
import Link from "next/link";
|
||||
import { useRef } from "react";
|
||||
import useSWR from "swr";
|
||||
|
||||
@@ -84,9 +85,7 @@ function Layanan() {
|
||||
{textHeading.des}
|
||||
</Text>
|
||||
<Box p={"md"}>
|
||||
<Button onClick={() => {
|
||||
router.push("/layanan")
|
||||
}} variant="filled" bg={colors["blue-button"]} radius={100}>
|
||||
<Button component={Link} href={"/darmasaba/desa/layanan"} variant="filled" bg={colors["blue-button"]} radius={100}>
|
||||
Detail
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
@@ -21,7 +21,7 @@ import {
|
||||
import { ViewTransitions } from "next-view-transitions";
|
||||
|
||||
export const metadata = {
|
||||
title: "desa darmasaba",
|
||||
title: "Desa Darmasaba",
|
||||
description: "Desa Darmasaba Kabupaten Badung",
|
||||
};
|
||||
|
||||
|
||||
@@ -6,32 +6,32 @@ const navbarListMenu = [
|
||||
children: [
|
||||
{
|
||||
id: "1.1",
|
||||
name: "profile",
|
||||
name: "Profile",
|
||||
href: "/darmasaba/desa/profile"
|
||||
},
|
||||
{
|
||||
id: "1.2",
|
||||
name: "potensi",
|
||||
name: "Potensi",
|
||||
href: "/darmasaba/desa/potensi"
|
||||
},
|
||||
{
|
||||
id: "1.3",
|
||||
name: "berita",
|
||||
name: "Berita",
|
||||
href: "/darmasaba/desa/berita"
|
||||
},
|
||||
{
|
||||
id: "1.4",
|
||||
name: "pengumuman",
|
||||
name: "Pengumuman",
|
||||
href: "/darmasaba/desa/pengumuman"
|
||||
},
|
||||
{
|
||||
id: "1.5",
|
||||
name: "galery",
|
||||
name: "Gallery",
|
||||
href: "/darmasaba/desa/galery"
|
||||
},
|
||||
{
|
||||
id: "1.6",
|
||||
name: "layanan",
|
||||
name: "Layanan",
|
||||
href: "/darmasaba/desa/layanan"
|
||||
},
|
||||
|
||||
|
||||
Reference in New Issue
Block a user