Fix responsive lading page, menu ppid, dan menu desa

This commit is contained in:
2025-04-15 10:08:12 +08:00
parent 4bd9ef6acf
commit 1138fe14d0
70 changed files with 2600 additions and 547 deletions

View File

@@ -13,11 +13,10 @@ function Page() {
</Text>
<Box px={{ base: "md", md: 100 }}>
<Paper p={"xl"} bg={colors['white-trans-1']}>
<Box pb={30}>
<Text ta={"center"} fw={"bold"} fz={{ base: 'h4', md: 'h3' }}>DASAR HUKUM PEMBENTUKAN PPID</Text>
<Text ta={"center"} fw={"bold"} fz={{ base: 'h4', md: 'h3' }}>DESA DARMASABA</Text>
<Box>
<Text ta={"center"} fw={"bold"} fz={{ base: 'h4', md: 'h3' }}>DASAR HUKUM PEMBENTUKAN PPID DESA DARMASABA</Text>
</Box>
<List>
<List p={'lg'}>
<ListItem fz={{ base: 'md', md: 'h4' }}>
<Text ta={"justify"} fz={{ base: 'md', md: 'h4' }}>
<Text fw={"bold"} span>

View File

@@ -1,7 +1,10 @@
'use client'
import colors from '@/con/colors';
import { ActionIcon, Box, Button, Center, Image, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
import BackButton from '../../desa/layanan/_com/BackButto';
import { ActionIcon, Box, Button, Center, Checkbox, Combobox, ComboboxOption, Group, Input, InputBase, Paper, SimpleGrid, Stack, Text, Textarea, TextInput, useCombobox } from '@mantine/core';
import { IconDownload } from '@tabler/icons-react';
import BackButton from '../../desa/layanan/_com/BackButto';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
const data = [
{
@@ -30,7 +33,91 @@ const data = [
},
]
const jenisInformasi = [
{
id: 1,
jenis: 'Keuangan Desa'
},
{
id: 2,
jenis: 'Pembangunan Desa'
},
{
id: 3,
jenis: 'Data Demografi'
},
{
id: 4,
jenis: 'Lainnya'
},
]
const memperolehInformasi = [
{
id: 1,
jenis: 'Melihat/Membaca/Mendengarkan/Mencatat'
},
{
id: 2,
jenis: 'Mendapatkan Salinan Informasi (Hardcopy)'
},
{
id: 3,
jenis: 'Mendapatkan Salinan Informasi (Softcopy)'
}
]
const mendapatkanInformasi = [
{
id: 1,
jenis: 'Mengambil Langsung'
},
{
id: 2,
jenis: 'Dikirim via Post'
},
{
id: 3,
jenis: 'Dikirim via Email'
}
]
function Page() {
const combobox = useCombobox({
onDropdownClose: () => combobox.resetSelectedOption(),
});
const combobox2 = useCombobox({
onDropdownClose: () => combobox2.resetSelectedOption(),
});
const combobox3 = useCombobox({
onDropdownClose: () => combobox3.resetSelectedOption(),
});
const [value, setValue] = useState<string | null>(null);
const [value2, setValue2] = useState<string | null>(null);
const [value3, setValue3] = useState<string | null>(null);
const options = jenisInformasi.map((item) => (
<ComboboxOption value={item.jenis} key={item.id}>
{item.jenis}
</ComboboxOption>
))
const options2 = memperolehInformasi.map((item) => (
<ComboboxOption value={item.jenis} key={item.id}>
{item.jenis}
</ComboboxOption>
))
const options3 = mendapatkanInformasi.map((item) => (
<ComboboxOption value={item.jenis} key={item.id}>
{item.jenis}
</ComboboxOption>
))
const router = useRouter()
return (
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
<Box px={{ base: 'md', md: 100 }}>
@@ -47,7 +134,9 @@ function Page() {
pb={30}
cols={{
base: 1,
md: 4,
md: 2,
lg: 3,
xl: 4
}}>
{data.map((v, k) => {
return (
@@ -74,7 +163,136 @@ function Page() {
Unduh Dokumen
</Button>
</Center>
<Image src={'/api/img/formulirpermohonan.png'} alt=''/>
<Group justify='center'>
<Paper p={'xl'} bg={colors['white-1']}>
<Text fw={"bold"} fz={{ base: 'h4', md: 'h3' }} ta={"center"}>Formulir Permohonan Informasi</Text>
<TextInput
styles={{ input: { padding: 20 } }}
py={10}
placeholder='Nama Lengkap'
/>
<TextInput
styles={{ input: { padding: 20 } }}
placeholder='NIK'
/>
<TextInput
styles={{ input: { padding: 20 } }}
py={10}
placeholder='No.Telepon'
/>
<TextInput
styles={{ input: { padding: 20 } }}
placeholder="Alamat"
/>
<TextInput
py={10}
styles={{ input: { padding: 20 } }}
placeholder="Email"
/>
<TextInput
styles={{ input: { padding: 20 } }}
placeholder="Alamat"
/>
{/* ComboBox */}
<Box py={10}>
<Text fz={'sm'}>Jenis Informasi yang diminta</Text>
<Combobox
store={combobox}
withinPortal={false}
onOptionSubmit={(val) => {
setValue(val);
combobox.closeDropdown();
}}
>
<Combobox.Target>
<InputBase
component="button"
type="button"
pointer
rightSection={<Combobox.Chevron />}
onClick={() => combobox.toggleDropdown()}
rightSectionPointerEvents="none"
>
{value || <Input.Placeholder>--Pilih Jenis Informasi--</Input.Placeholder>}
</InputBase>
</Combobox.Target>
<Combobox.Dropdown>
<Combobox.Options>{options}</Combobox.Options>
</Combobox.Dropdown>
</Combobox>
</Box>
<Textarea
placeholder='Tujuan Penggunaan Informasi'
/>
{/* ComboBox2 */}
<Box py={10}>
<Text fz={'sm'}>Cara Memperoleh Informasi</Text>
<Combobox
store={combobox2}
withinPortal={false}
onOptionSubmit={(val) => {
setValue2(val);
combobox2.closeDropdown();
}}
>
<Combobox.Target>
<InputBase
component="button"
type="button"
pointer
rightSection={<Combobox.Chevron />}
onClick={() => combobox2.toggleDropdown()}
rightSectionPointerEvents="none"
>
{value2 || <Input.Placeholder>--Pilih Cara Memperoleh--</Input.Placeholder>}
</InputBase>
</Combobox.Target>
<Combobox.Dropdown>
<Combobox.Options>{options2}</Combobox.Options>
</Combobox.Dropdown>
</Combobox>
</Box>
{/* ComboBox3 */}
<Box pb={10}>
<Text fz={'sm'}>Cara Mendapatkan Salinan Informasi</Text>
<Combobox
store={combobox3}
withinPortal={false}
onOptionSubmit={(val) => {
setValue3(val);
combobox3.closeDropdown();
}}
>
<Combobox.Target>
<InputBase
component="button"
type="button"
pointer
rightSection={<Combobox.Chevron />}
onClick={() => combobox3.toggleDropdown()}
rightSectionPointerEvents="none"
>
{value3 || <Input.Placeholder>--Pilih Cara Mendapatkan--</Input.Placeholder>}
</InputBase>
</Combobox.Target>
<Combobox.Dropdown>
<Combobox.Options>{options3}</Combobox.Options>
</Combobox.Dropdown>
</Combobox>
</Box>
<Box pb={10}>
<Checkbox
label="Saya menyatakan bahwa informasi yang saya berikan adalah benar dan akan menggunakan informasi yang diminta"
/>
</Box>
<Button onClick={() => router.push('/darmasaba/permohonan/berhasil')} bg={"green"} fullWidth>
Kirim Permohonan
</Button>
</Paper>
</Group>
</Paper>
</Stack>
</Box>

View File

@@ -9,31 +9,35 @@ function Page() {
<Box px={{ base: 'md', md: 100 }}>
<BackButton />
</Box>
<Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
Profil Singkat PPID Desa Darmasaba
</Text>
<Box px={{ base: 'md', md: 100 }}>
<Text ta={"center"} fz={{ base: "2rem", md: "2.5rem", lg: "3rem", xl: "3.4rem" }} c={colors["blue-button"]} fw={"bold"}>
Profil Singkat PPID Desa Darmasaba
</Text>
</Box>
<Box px={{ base: "md", md: 100 }}>
<Paper p={"xl"} bg={colors['white-trans-1']}>
<Box px={{ base: "md", md: 100 }}>
<Flex align={"center"} gap={50}>
<Image src={"/api/img/darmasaba-icon.png"} h={{ base: 100, md: 150 }} alt='' />
<Text fz={{ base: "h3", md: "2.5rem" }} fw={'bold'}>PROFIL PIMPINAN BADAN PUBLIK DESA DARMASABA </Text>
<Image src={"/api/img/darmasaba-icon.png"} h={{ base: 80, md: 150 }} alt='' />
<Text fz={{ base: "1.4rem", md: "2rem", lg: "2.5rem", xl: "3rem" }} fw={'bold'}>PROFIL PIMPINAN BADAN PUBLIK DESA DARMASABA </Text>
</Flex>
</Box>
<Divider my={"md"} />
{/* biodata perbekel */}
<Box px={50} pb={30}>
<Box px={{base: 0, md: 50}} pb={30}>
<SimpleGrid
cols={{
base: 1,
md: 2,
md: 1,
lg: 1,
xl: 2,
}}
>
<Box px={{ base: 0, md: 80 }}>
<Box px={{ base: 0, md: 50 }}>
<Paper bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
<Stack gap={0}>
<Center>
<Image pt={{ base: 0, md: 30 }} src={"/api/img/perbekel.png"} w={{ base: 250, md: 326 }} alt='' />
<Image pt={{ base: 0, md: 90 }} src={"/api/img/perbekel.png"} w={{ base: 250, md: 355 }} alt='' />
</Center>
<Paper
bg={colors['blue-button']}
@@ -42,10 +46,10 @@ function Page() {
px={{ base: 20, md: 20 }}
>
<Text ta={"center"} c={colors['white-1']} fw={"bolder"} fz={{ base: "md", md: "h3" }}>
<Text ta={"center"} c={colors['white-1']} fw={"bolder"} fz={{ base: "1.5rem", md: "2.125rem", lg: "2.25rem", xl: "1.5rem" }}>
I.B. Surya Prabhawa Manuaba,
</Text>
<Text ta={"center"} c={colors['white-1']} fw={"bolder"} fz={{ base: "md", md: "h3" }}>
<Text ta={"center"} c={colors['white-1']} fw={"bolder"} fz={{ base: "1.5rem", md: "2.125rem", lg: "2.25rem", xl: "1.5rem" }}>
S.H.,M.H.,NL.P.
</Text>
</Paper>
@@ -54,52 +58,52 @@ function Page() {
</Box>
<Box>
<Box>
<Text fz={{ base: "h3", md: "h2" }} fw={'bold'}>Biodata</Text>
<Text fz={{ base: "md", md: "h3" }} ta={"justify"}>I.B Surya Prabhawa Manuaba, S.H., M.H., adalah Perbekel Darmasaba periode 2021-2027, seorang advokat, pendiri Mantra Legal Consultants & Advocates, serta aktif di bidang musik dan akademis.</Text>
<Text fz={{ base: "md", md: "h3" }} ta={"justify"}>Dia menempuh pendidikan hukum di Universitas Udayana dan Universitas Mahasaraswati Denpasar, serta memiliki pengalaman luas di berbagai organisasi dan kepemimpinan.</Text>
<Text fz={{ base: "1.125rem", md: "1.375rem", lg: "1.75rem", xl: "2rem" }} fw={'bold'}>Biodata</Text>
<Text fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} ta={"justify"}>I.B Surya Prabhawa Manuaba, S.H., M.H., adalah Perbekel Darmasaba periode 2021-2027, seorang advokat, pendiri Mantra Legal Consultants & Advocates, serta aktif di bidang musik dan akademis.</Text>
<Text fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} ta={"justify"}>Dia menempuh pendidikan hukum di Universitas Udayana dan Universitas Mahasaraswati Denpasar, serta memiliki pengalaman luas di berbagai organisasi dan kepemimpinan.</Text>
</Box>
<Box>
<Text fz={{ base: "h3", md: "h2" }} fw={'bold'}>Riwayat Karir</Text>
<Text fz={{ base: "md", md: "h3" }} >2021 - 2027: Perbekel Desa Darmasaba</Text>
<Text fz={{ base: "md", md: "h3" }} >2015 - Sekarang: Founder & Managing Director Mantra Legal Consultants & Advocates</Text>
<Text fz={{ base: "md", md: "h3" }} >2020 - Sekarang: Founder Ugawa Record Music Studio</Text>
<Text fz={{ base: "md", md: "h3" }} >2010 - 2016: Dosen Fakultas Hukum Universitas Mahasaraswati Denpasar</Text>
<Text fz={{ base: "1.125rem", md: "1.375rem", lg: "1.75rem", xl: "2rem" }} fw={'bold'}>Riwayat Karir</Text>
<Text fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} >2021 - 2027: Perbekel Desa Darmasaba</Text>
<Text fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} >2015 - Sekarang: Founder & Managing Director Mantra Legal Consultants & Advocates</Text>
<Text fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} >2020 - Sekarang: Founder Ugawa Record Music Studio</Text>
<Text fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} >2010 - 2016: Dosen Fakultas Hukum Universitas Mahasaraswati Denpasar</Text>
</Box>
</Box>
</SimpleGrid>
</Box>
<Box pb={30}>
<Text fz={{ base: "h3", md: "h2" }} fw={'bold'}>Pengalaman Organisasi</Text>
<Text fz={{ base: "1.125rem", md: "1.375rem", lg: "1.75rem", xl: "2rem" }} fw={'bold'}>Pengalaman Organisasi</Text>
<List>
<Box px={20}>
<ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>1996 - 1997: Ketua OSIS SMP Negeri 1 Abiansemal</ListItem>
<ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>1999 - 2000: Ketua OSIS SMA Negeri 1 Mengwi</ListItem>
<ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>2008 - 2009: Ketua BEM Universitas Mahasaraswati Denpasar</ListItem>
<ListItem fz={{ base: "md", md: "h3" }} >2008 - 2010: Ketua Sekaa Taruna Sila Dharma, Banjar Tengah, Desa Adat Tegal, Darmasaba</ListItem>
<ListItem fz={{ base: "md", md: "h3" }} >2020 - Sekarang: Pengurus Young Lawyer Committee Peradi Denpasar</ListItem>
<ListItem fz={{ base: "md", md: "h3" }} >2021 - Sekarang: Dewan Kehormatan Himpunan Pengusaha Muda Indonesia (HIPMI) Badung</ListItem>
<ListItem fz={{ base: "md", md: "h3" }} >2023 - 2028: Komite Tetap Advokasi - Bidang Hukum dan Regulasi Kamar Dagang dan Industri Badung</ListItem>
<ListItem fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} ta={"justify"}>1996 - 1997: Ketua OSIS SMP Negeri 1 Abiansemal</ListItem>
<ListItem fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} ta={"justify"}>1999 - 2000: Ketua OSIS SMA Negeri 1 Mengwi</ListItem>
<ListItem fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} ta={"justify"}>2008 - 2009: Ketua BEM Universitas Mahasaraswati Denpasar</ListItem>
<ListItem fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} >2008 - 2010: Ketua Sekaa Taruna Sila Dharma, Banjar Tengah, Desa Adat Tegal, Darmasaba</ListItem>
<ListItem fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} >2020 - Sekarang: Pengurus Young Lawyer Committee Peradi Denpasar</ListItem>
<ListItem fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} >2021 - Sekarang: Dewan Kehormatan Himpunan Pengusaha Muda Indonesia (HIPMI) Badung</ListItem>
<ListItem fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} >2023 - 2028: Komite Tetap Advokasi - Bidang Hukum dan Regulasi Kamar Dagang dan Industri Badung</ListItem>
</Box>
</List>
</Box>
<Box pb={20}>
<Text pb={20} fz={{ base: "h3", md: "h2" }} fw={'bold'}>Program Kerja Unggulan</Text>
<Text fz={{ base: "md", md: "h3" }} fw={'bold'}>Pemberdayaan Ekonmi dan UMKM</Text>
<Text pb={20} fz={{ base: "1.125rem", md: "1.375rem", lg: "1.75rem", xl: "2rem" }} fw={'bold'}>Program Kerja Unggulan</Text>
<Text fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} fw={'bold'}>Pemberdayaan Ekonomi dan UMKM</Text>
<List>
<Box px={20}>
<ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>Pelatihan dan pendampingan UMKM lokal</ListItem>
<ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>Program bantuan modal usaha bagi pelaku usaha kecil</ListItem>
<ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>Digitalisasi UMKM untuk meningkatkan pemasaran produk lokal</ListItem>
<ListItem fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} ta={"justify"}>Pelatihan dan pendampingan UMKM lokal</ListItem>
<ListItem fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} ta={"justify"}>Program bantuan modal usaha bagi pelaku usaha kecil</ListItem>
<ListItem fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} ta={"justify"}>Digitalisasi UMKM untuk meningkatkan pemasaran produk lokal</ListItem>
</Box>
</List>
</Box>
<Box>
<Text fz={{ base: "md", md: "h3" }} fw={'bold'}>Peningkatan Infrastruktur Desa</Text>
<Text fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} fw={'bold'}>Peningkatan Infrastruktur Desa</Text>
<List>
<Box px={20}>
<ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>Pembangunan dan perbaikan jalan desa</ListItem>
<ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>Penyediaan fasilitas umum dan ruang terbuka hijau</ListItem>
<ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>Optimalisasi layanan publik berbasis digital</ListItem>
<ListItem fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} ta={"justify"}>Pembangunan dan perbaikan jalan desa</ListItem>
<ListItem fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} ta={"justify"}>Penyediaan fasilitas umum dan ruang terbuka hijau</ListItem>
<ListItem fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} ta={"justify"}>Optimalisasi layanan publik berbasis digital</ListItem>
</Box>
</List>
</Box>

View File

@@ -36,7 +36,7 @@ function Page() {
<Text ta={"center"} fz={{ base: "h3", md: "h2" }} fw={"bold"}>
MISI PPID
</Text>
<Box px={20} >
<Box >
<List type='ordered'>
<ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>Meningkatkan pengelolaan dan pelayanan informasi yang berkualitas, benar dan bertanggung jawab</ListItem>
<ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>Membangun dan mengembangkan sistem penyediaan dan layanan informasi.</ListItem>