Merge pull request #147 from bipproduction/lukman/27-agustus-2024

feat : update validation and color
This commit is contained in:
Amalia
2024-08-27 13:37:34 +08:00
committed by GitHub
44 changed files with 503 additions and 354 deletions

View File

@@ -140,10 +140,10 @@ export async function POST(request: Request) {
}
return NextResponse.json({ success: true, message: "Berhasil membuat proyek", data: data, }, { status: 200 });
return NextResponse.json({ success: true, message: "Berhasil membuat kegiatan", data: data, }, { status: 200 });
} catch (error) {
console.error(error);
return NextResponse.json({ success: false, message: "Gagal membuat proyek, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
return NextResponse.json({ success: false, message: "Gagal membuat kegiatan, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
}
}

View File

@@ -1,7 +1,9 @@
export const WARNA = {
bgWhite: "#F4F9FD",
biruTua: "#19345E",
bgIcon: "#384288",
// biruTua: "#19345E",
biruTua: "#508D4E",
// bgIcon: "#384288",
bgIcon: "#3C8754",
borderOrange: "#FCAA4B",
bgHijauMuda: "#DCEED8",
borderBiruMuda: "#9EBDED"

View File

@@ -12,7 +12,7 @@ export default function LayoutLogin({
<Stack justify="center" align="center" pt={rem(50)}>
<Image w={102} h={103} src={"/assets/img/logo/logo-1.png"} alt="logo" />
<Title c={WARNA.biruTua} order={4}>
PERBEKAL DARMASABA
PERBEKEL DARMASABA
</Title>
</Stack>
{children}

View File

@@ -17,7 +17,7 @@ import { WARNA } from "@/module/_global";
const listTextWellcome = [
{
id: "1",
text: "Selamat Datang di Aplikasi Desa Darmasaba Optimalkan Proyek Desa dengan Fitur Kolaboratif Manajemen Proyek yang Efisien untuk Masa Depan Yang Lebih Baik",
text: "Selamat Datang di Aplikasi Desa Darmasaba Optimalkan Kegiatan Desa dengan Fitur Kolaboratif Manajemen Kegiatan yang Efisien untuk Masa Depan Yang Lebih Baik",
img: "/assets/img/welcome/wellcome-1.png",
},
{

View File

@@ -108,7 +108,10 @@ export default function NavbarCreateDivisionCalender() {
placeholder="Nama Acara"
label="Nama Acara"
value={isData.title}
onChange={(event) => setData({ ...isData, title: event.target.value })}
onChange={(event) => {
setData({ ...isData, title: event.target.value })
setTouched({ ...touched, title: false })
}}
onBlur={() => setTouched({ ...touched, title: true })}
error={
touched.title && (
@@ -129,6 +132,7 @@ export default function NavbarCreateDivisionCalender() {
onChange={(val) => {
setValue(val);
setData({ ...isData, dateStart: moment(val).format("YYYY-MM-DD") });
setTouched({ ...touched, dateStart: false });
}}
placeholder="Input Tanggal"
label="Tanggal"
@@ -215,8 +219,10 @@ export default function NavbarCreateDivisionCalender() {
{ value: '5', label: 'Tahunan' },
]}
value={isData.repeatEventTyper}
onChange={(val: any) =>
onChange={(val: any) => {
setData({ ...isData, repeatEventTyper: val })
setTouched({ ...touched, repeatEventTyper: false })
}
}
onBlur={() => setTouched({ ...touched, repeatEventTyper: true })}
error={

View File

@@ -104,11 +104,16 @@ export default function UpdateDivisionCalender() {
...isDataCalender,
title: event.target.value
})
setTouched({ ...touched, title: false })
}
}
onBlur={() => setTouched({ ...touched, title: true })}
required
error={touched.title && !isDataCalender?.title ? "Nama Acara Tidak Boleh Kosong" : null}
error={
touched.title && (
isDataCalender?.title == "" ? "Nama Acara Tidak Boleh Kosong" : null
)
}
/>
<DateInput
styles={{
@@ -128,13 +133,18 @@ export default function UpdateDivisionCalender() {
...isDataCalender,
dateStart: moment(val).format("YYYY-MM-DD")
})
setTouched({ ...touched, dateStart: false })
}
}
placeholder="Input Tanggal"
label="Tanggal"
minDate={new Date()}
onBlur={() => setTouched({ ...touched, dateStart: true })}
error={touched.dateStart && !isDataCalender?.dateStart ? "Tanggal Tidak Boleh Kosong" : null}
error={
touched.dateStart && (
isDataCalender?.dateStart == "" ? "Tanggal Tidak Boleh Kosong" : null
)
}
required
/>
<SimpleGrid
@@ -238,6 +248,7 @@ export default function UpdateDivisionCalender() {
...isDataCalender,
repeatEventTyper: val
})
setTouched({ ...touched, repeatEventTyper: false })
}
}
onBlur={() => setTouched({ ...touched, repeatEventTyper: true })}

View File

@@ -1,5 +1,5 @@
import { WARNA } from '@/module/_global';
import { Box, Breadcrumbs, Button, Divider, Flex, Grid, Group, Modal, Text, TextInput } from '@mantine/core';
import { Box, Breadcrumbs, Button, Divider, Flex, Grid, Group, Modal, ScrollArea, Text, TextInput } from '@mantine/core';
import React, { useState } from 'react';
import toast from 'react-hot-toast';
import { FcFolder } from 'react-icons/fc';
@@ -95,6 +95,10 @@ export default function DrawerCutDocuments({ category, onChoosePath, data }: { c
}
</Breadcrumbs>
</Box>
<ScrollArea h={{
base: "55vh", xl: "58vh", md: "57vh",
sm: "58vh",
}} type="scroll" scrollbarSize={2} scrollHideDelay={0} scrollbars="y">
{dataDocument.map((v, i) => {
const found = data.some((i: any) => i.id == v.id)
return (
@@ -128,6 +132,7 @@ export default function DrawerCutDocuments({ category, onChoosePath, data }: { c
</Box>
)
})}
</ScrollArea>
</Box>

View File

@@ -16,7 +16,7 @@ export default function ChartProgressHome() {
const loadData = () => {
const option: EChartsOption = {
title: {
text: "PROGRES PROYEK",
text: "PROGRES KEGIATAN",
top: '2%',
left: 'center',
textStyle: {

View File

@@ -39,7 +39,7 @@ export default function Features() {
</ActionIcon>
</Center>
<Center>
<Text fz={15} c={WARNA.biruTua}>Proyek</Text>
<Text fz={15} c={WARNA.biruTua}>Kegiatan</Text>
</Center>
</Box>
<Box onClick={() => router.push('/announcement')}>

View File

@@ -42,7 +42,7 @@ export default function ListDivisi() {
</Box>
</Card.Section>
<Box pt={10} mih={150}>
<Text fw={'bold'} fz={18}>PROYEK</Text>
<Text fw={'bold'} fz={18}>KEGIATAN</Text>
<Text fw={'bolder'} ta={'center'} fz={70}>{v.total}</Text>
</Box>
</Card>

View File

@@ -36,7 +36,7 @@ export default function ListProjects() {
return (
<>
<Box pt={10}>
<Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Proyek Terbaru</Text>
<Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Kegiatan Terbaru</Text>
<Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
{dataProject.map((v) =>
<Carousel.Slide key={v.id}>

View File

@@ -42,7 +42,7 @@ export default function ViewDetailFeature() {
</ActionIcon>
</Center>
<Center>
<Text fz={15} c={WARNA.biruTua}>Proyek</Text>
<Text fz={15} c={WARNA.biruTua}>Kegiatan</Text>
</Center>
</Box>
<Box onClick={() => router.push('/announcement')}>

View File

@@ -17,7 +17,7 @@ export default function ViewHome() {
<>
<LayoutNavbarHome>
<Group justify='space-between'>
<Text fw={'bold'} c={'white'} >Perbekal Darmasaba</Text>
<Text fw={'bold'} c={'white'} >Perbekel Darmasaba</Text>
<IconNavbar />
</Group>
</LayoutNavbarHome>

View File

@@ -141,7 +141,7 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
</Stack>
<LayoutDrawer opened={openDrawerGroup} onClose={() => setOpenDrawerGroup(false)} title={'Edit Jabatan'} size="lg">
<Box pt={10}>
<Box pt={10} pos={"relative"} h={"70vh"}>
<Select
label="Grup"
placeholder="Pilih grup"
@@ -202,7 +202,7 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
radius={10}
placeholder="Nama Jabatan"
/>
<Box mt={'xl'}>
<Box pos={"absolute"} bottom={10} left={0} right={0}>
<Button
c={"white"}
bg={WARNA.biruTua}

View File

@@ -89,7 +89,7 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo
</SimpleGrid>
</Stack>
<LayoutDrawer opened={openDrawerGroup} onClose={() => setOpenDrawerGroup(false)} title={'Tambah Jabatan'} size="lg">
<Box pt={0}>
<Box pt={10} pos={"relative"} h={"70vh"}>
<Select
label="Grup"
placeholder="Pilih grup"
@@ -156,7 +156,7 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo
onBlur={() => setTouched({ ...touched, name: true })}
required
/>
<Box mt={'xl'}>
<Box pos={"absolute"} bottom={10} left={0} right={0}>
<Button
c={"white"}
bg={WARNA.biruTua}

View File

@@ -61,7 +61,7 @@ export default function DetailProject() {
<Box>
<LayoutNavbarNew
back=""
title="Proyek Desa Maju"
title="Kegiatan Desa Maju"
menu={
<ActionIcon
variant="light"
@@ -98,7 +98,7 @@ export default function DetailProject() {
</Grid.Col>
<Grid.Col span={9}>
<Box>
<Text>Kemajuan Proyek 60%</Text>
<Text>Kemajuan Kegiatan 60%</Text>
<Progress
style={{
border: `1px solid ${"#BDBDBD"}`,

View File

@@ -200,7 +200,7 @@ export default function UpdateProgres({ searchParams }: { searchParams: any }) {
>
<Group>
<BsFiletypeCsv size={25} />
<Text>Proyek Laporan Permasyarakatan</Text>
<Text>Kegiatan Laporan Permasyarakatan</Text>
</Group>
</Box>
<Box
@@ -212,7 +212,7 @@ export default function UpdateProgres({ searchParams }: { searchParams: any }) {
>
<Group>
<BsFiletypeCsv size={25} />
<Text>Proyek Laporan Permasyarakatan</Text>
<Text>Kegiatan Laporan Permasyarakatan</Text>
</Group>
</Box>
</Box>

View File

@@ -82,7 +82,7 @@ export default function ProjectCencel() {
</Grid>
<Box pt={20}>
<Box bg={"#DCEED8"} p={10} style={{ borderRadius: 10 }}>
<Text fw={'bold'} c={WARNA.biruTua}>Total Proyek</Text>
<Text fw={'bold'} c={WARNA.biruTua}>Total Kegiatan</Text>
<Flex justify={'center'} align={'center'} h={'100%'}>
<Text fz={40} fw={'bold'} c={WARNA.biruTua}>35</Text>
</Flex>

View File

@@ -82,7 +82,7 @@ export default function ProjectDone() {
</Grid>
<Box pt={20}>
<Box bg={"#DCEED8"} p={10} style={{ borderRadius: 10 }}>
<Text fw={'bold'} c={WARNA.biruTua}>Total Proyek</Text>
<Text fw={'bold'} c={WARNA.biruTua}>Total Kegiatan</Text>
<Flex justify={'center'} align={'center'} h={'100%'}>
<Text fz={40} fw={'bold'} c={WARNA.biruTua}>35</Text>
</Flex>

View File

@@ -82,7 +82,7 @@ export default function ProjectProcess() {
</Grid>
<Box pt={20}>
<Box bg={"#DCEED8"} p={10} style={{ borderRadius: 10 }}>
<Text fw={'bold'} c={WARNA.biruTua}>Total Proyek</Text>
<Text fw={'bold'} c={WARNA.biruTua}>Total Kegiatan</Text>
<Flex justify={'center'} align={'center'} h={'100%'}>
<Text fz={40} fw={'bold'} c={WARNA.biruTua}>35</Text>
</Flex>

View File

@@ -16,7 +16,7 @@ export default function DrawerProject() {
<IoAddCircle size={30} color={WARNA.biruTua} />
</Box>
<Box>
<Text c={WARNA.biruTua}>Tambah Proyek</Text>
<Text c={WARNA.biruTua}>Tambah Kegiatan</Text>
</Box>
</Flex>
<Flex onClick={() => window.location.href = "/project?cat=filter"} justify={'center'} align={'center'} direction={'column'} >

View File

@@ -59,7 +59,7 @@ export default function NavbarProject() {
return (
<Box>
<LayoutNavbarNew back='/home' title='proyek'
<LayoutNavbarNew back='/home' title='Kegiatan'
menu={<ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiMenu size={20} color='white' />
</ActionIcon>} />

View File

@@ -8,7 +8,7 @@ export const funGetAllProject = async (path?: string) => {
export const funCreateProject = async (data: IFormProject) => {
if (data.title.length < 3)
return { success: false, message: 'Nama proyek minimal 3 karakter' }
return { success: false, message: 'Nama Kegiatan minimal 3 karakter' }
const response = await fetch(`/api/project`, {
method: "POST",

View File

@@ -3,131 +3,145 @@ import { useParams, useRouter } from 'next/navigation';
import React, { useState } from 'react';
import toast from 'react-hot-toast';
import { funCreateDetailProject } from '../lib/api_project';
import { Box, Button, Group, Input, SimpleGrid, Stack, Text } from '@mantine/core';
import { Box, Button, Group, Input, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
import { LayoutNavbarNew, WARNA } from '@/module/_global';
import { DatePicker } from '@mantine/dates';
import moment from 'moment';
import LayoutModal from '@/module/_global/layout/layout_modal';
export default function AddDetailTaskProject() {
const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
const router = useRouter()
const [name, setName] = useState("")
const [openModal, setOpenModal] = useState(false)
const param = useParams<{ id: string }>()
const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
const router = useRouter()
const [name, setName] = useState("")
const [openModal, setOpenModal] = useState(false)
const param = useParams<{ id: string }>()
const [touched, setTouched] = useState({
name: false,
});
function onVerification() {
if (value[0] == null || value[1] == null)
return toast.error("Error! harus memilih tanggal")
function onVerification() {
if (value[0] == null || value[1] == null)
return toast.error("Error! harus memilih tanggal")
if (name == "")
return toast.error("Error! harus memasukkan judul tugas")
if (name == "")
return toast.error("Error! harus memasukkan judul tugas")
setOpenModal(true)
}
async function onSubmit() {
try {
const res = await funCreateDetailProject(param.id, {
name,
dateStart: (value[0] != null) ? value[0] : new Date,
dateEnd: (value[1] != null) ? value[1] : new Date,
})
setOpenModal(true)
}
if (res.success) {
toast.success(res.message)
setOpenModal(false)
router.push(`/project/${param.id}`)
} else {
toast.error(res.message)
async function onSubmit() {
try {
const res = await funCreateDetailProject(param.id, {
name,
dateStart: (value[0] != null) ? value[0] : new Date,
dateEnd: (value[1] != null) ? value[1] : new Date,
})
if (res.success) {
toast.success(res.message)
setOpenModal(false)
router.push(`/project/${param.id}`)
} else {
toast.error(res.message)
}
} catch (error) {
console.log(error)
toast.error("Gagal menambahkan tugas, coba lagi nanti")
}
} catch (error) {
console.log(error)
toast.error("Gagal menambahkan tugas, coba lagi nanti")
}
}
}
return (
<Box>
<LayoutNavbarNew back="" title={"Tambah Proyek"} menu />
<Box p={20}>
<Group
justify="center"
bg={"white"}
py={20}
style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
>
<DatePicker
styles={{}}
type="range"
value={value}
onChange={setValue}
size="md"
c={WARNA.biruTua}
/>
</Group>
<SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} mt={20}>
<Box>
<Text>Tanggal Mulai</Text>
<Group
justify="center"
bg={"white"}
h={45}
style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
>
<Text>{value[0] ? `${moment(value[0]).format('DD-MM-YYYY')}` : ""}</Text>
</Group>
</Box>
<Box>
<Text c={WARNA.biruTua}>Tanggal Berakhir</Text>
<Group
justify="center"
bg={"white"}
h={45}
style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
>
<Text>{value[1] ? `${moment(value[1]).format('DD-MM-YYYY')}` : ""}</Text>
</Group>
</Box>
</SimpleGrid>
<Stack pt={15}>
<Input
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
placeholder="Input Nama Tahapan"
size="md"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</Stack>
<Box mt={"xl"}>
<Button
c={"white"}
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => { onVerification() }}
>
Simpan
</Button>
</Box>
</Box>
return (
<Box>
<LayoutNavbarNew back="" title={"Tambah Kegiatan"} menu />
<Box p={20}>
<Group
justify="center"
bg={"white"}
py={20}
style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
>
<DatePicker
styles={{}}
type="range"
value={value}
onChange={setValue}
size="md"
c={WARNA.biruTua}
/>
</Group>
<SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} mt={20}>
<Box>
<Text>Tanggal Mulai</Text>
<Group
justify="center"
bg={"white"}
h={45}
style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
>
<Text>{value[0] ? `${moment(value[0]).format('DD-MM-YYYY')}` : ""}</Text>
</Group>
</Box>
<Box>
<Text c={WARNA.biruTua}>Tanggal Berakhir</Text>
<Group
justify="center"
bg={"white"}
h={45}
style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
>
<Text>{value[1] ? `${moment(value[1]).format('DD-MM-YYYY')}` : ""}</Text>
</Group>
</Box>
</SimpleGrid>
<Stack pt={15}>
<TextInput
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
placeholder="Input Nama Tahapan"
label="Judul Tahapan"
required
size="md"
value={name}
onChange={(e) => {
setName(e.target.value)
setTouched({ ...touched, name: false })
}}
onBlur={() => setTouched({ ...touched, name: true })}
error={
touched.name && (
name == "" ? "Judul Tidak Boleh Kosong" : null
)
}
/>
</Stack>
<Box mt={"xl"}>
<Button
c={"white"}
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => { onVerification() }}
>
Simpan
</Button>
</Box>
</Box>
<LayoutModal opened={openModal} onClose={() => setOpenModal(false)}
description="Apakah Anda yakin ingin menambahkan tugas?"
onYes={(val) => {
if (val) {
onSubmit()
}
setOpenModal(false)
}} />
</Box>
);
<LayoutModal opened={openModal} onClose={() => setOpenModal(false)}
description="Apakah Anda yakin ingin menambahkan tugas?"
onYes={(val) => {
if (val) {
onSubmit()
}
setOpenModal(false)
}} />
</Box>
);
}

View File

@@ -12,10 +12,13 @@ export default function CancelProject() {
const [alasan, setAlasan] = useState("")
const [openModal, setOpenModal] = useState(false)
const param = useParams<{ id: string }>()
const [touched, setTouched] = useState({
reason: false,
});
function onVerification() {
if (alasan == "")
return toast.error("Error! harus memasukkan alasan pembatalan proyek")
return toast.error("Error! harus memasukkan alasan pembatalan Kegiatan")
setOpenModal(true)
}
@@ -31,13 +34,13 @@ export default function CancelProject() {
}
} catch (error) {
console.log(error)
toast.error("Gagal membatalkan proyek, coba lagi nanti")
toast.error("Gagal membatalkan Kegiatan, coba lagi nanti")
}
}
return (
<Box>
<LayoutNavbarNew back="" title={"Pembatalan Proyek"} menu />
<Box pos={"relative"} h={"100vh"}>
<LayoutNavbarNew back="" title={"Pembatalan Kegiatan"} menu />
<Box p={20}>
<Stack pt={15}>
<Textarea styles={{
@@ -47,11 +50,20 @@ export default function CancelProject() {
},
}}
value={alasan}
size="md" placeholder='Contoh : proyek tidak sesuai' label="Alasan Pembatalan"
onChange={(event) => setAlasan(event.target.value)}
size="md" placeholder='Contoh : Kegiatan tidak sesuai' label="Alasan Pembatalan"
onChange={(event) => {
setAlasan(event.target.value)
setTouched({ ...touched, reason: false })
}}
error={
touched.reason && (
alasan == "" ? "Alasan Tidak Boleh Kosong" : null
)
}
onBlur={() => setTouched({ ...touched, reason: true })}
/>
</Stack>
<Box mt={"xl"}>
<Box pos={"absolute"} bottom={10} left={0} right={0} p={20}>
<Button
c={"white"}
bg={WARNA.biruTua}
@@ -67,7 +79,7 @@ export default function CancelProject() {
<LayoutModal opened={openModal} onClose={() => setOpenModal(false)}
description="Apakah Anda yakin ingin membatalkan proyek ini? Pembatalan proyek bersifat permanen"
description="Apakah Anda yakin ingin membatalkan Kegiatan ini? Pembatalan Kegiatan bersifat permanen"
onYes={(val) => {
if (val) {
onSubmit()

View File

@@ -10,6 +10,7 @@ import {
SimpleGrid,
Stack,
Text,
TextInput,
} from "@mantine/core";
import React, { useState } from "react";
import { DatePicker } from "@mantine/dates";
@@ -23,6 +24,9 @@ export default function ViewDateEndTask({ onClose }: { onClose: (val: IFormDateP
const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
const router = useRouter()
const [title, setTitle] = useState("")
const [touched, setTouched] = useState({
title: false
});
function onSubmit() {
if (value[0] == null || value[1] == null)
@@ -85,7 +89,7 @@ export default function ViewDateEndTask({ onClose }: { onClose: (val: IFormDateP
</Box>
</SimpleGrid>
<Stack pt={15}>
<Input
<TextInput
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
@@ -93,9 +97,20 @@ export default function ViewDateEndTask({ onClose }: { onClose: (val: IFormDateP
},
}}
placeholder="Input Nama Tahapan"
label="Judul Tahapan"
required
size="md"
value={title}
onChange={(e) => setTitle(e.target.value)}
onChange={(e) => {
setTitle(e.target.value)
setTouched({ ...touched, title: false })
}}
onBlur={() => setTouched({ ...touched, title: true })}
error={
touched.title && (
title == "" ? "Judul Tidak Boleh Kosong" : null
)
}
/>
</Stack>
<Box mt={"xl"}>

View File

@@ -125,7 +125,7 @@ export default function CreateProject() {
return (
<Box>
<LayoutNavbarNew back="/project" title="tambah proyek" menu />
<LayoutNavbarNew back="/project" title="tambah Kegiatan" menu />
<Box p={20}>
<Stack>
{
@@ -156,7 +156,7 @@ export default function CreateProject() {
)
}
<TextInput
label="Proyek"
label="Kegiatan"
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
@@ -164,14 +164,17 @@ export default function CreateProject() {
},
}}
required withAsterisk
placeholder="Nama Proyek"
placeholder="Nama Kegiatan"
size="md"
value={body.title}
onChange={(e) => setBody({ ...body, title: e.target.value })}
onChange={(e) => {
setBody({ ...body, title: e.target.value })
setTouched({ ...touched, title: false })
}}
onBlur={() => setTouched({ ...touched, title: true })}
error={
touched.title && (
body.title == "" ? "Proyek Tidak Boleh Kosong" : null
body.title == "" ? "Kegiatan Tidak Boleh Kosong" : null
)
}
/>
@@ -304,7 +307,22 @@ export default function CreateProject() {
}
<Box mt="xl">
<Button color="white" bg={WARNA.biruTua} size="lg" radius={30} fullWidth onClick={() => setModal(true)}>
<Button
color="white"
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => {
if (
body.title !== "" &&
body.idGroup !== ""
) {
setModal(true)
} else {
toast.error("Mohon lengkapi data terlebih dahulu");
}
}}>
Simpan
</Button>
</Box>

View File

@@ -5,144 +5,163 @@ import toast from 'react-hot-toast';
import { funEditDetailProject, funGetDetailProject } from '../lib/api_project';
import moment from 'moment';
import { useShallowEffect } from '@mantine/hooks';
import { Box, Button, Group, Input, SimpleGrid, Stack, Text } from '@mantine/core';
import { Box, Button, Group, Input, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
import { LayoutNavbarNew, WARNA } from '@/module/_global';
import { DatePicker } from '@mantine/dates';
import LayoutModal from '@/module/_global/layout/layout_modal';
export default function EditDetailTaskProject() {
const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
const [name, setName] = useState("")
const param = useParams<{ id: string}>()
const [openModal, setOpenModal] = useState(false)
const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
const [name, setName] = useState("")
const param = useParams<{ id: string }>()
const [openModal, setOpenModal] = useState(false)
const [touched, setTouched] = useState({
title: false,
});
async function onSubmit() {
if (value[0] == null || value[1] == null)
return toast.error("Error! harus memilih tanggal")
async function onSubmit() {
if (value[0] == null || value[1] == null)
return toast.error("Error! harus memilih tanggal")
if (name == "")
return toast.error("Error! harus memasukkan judul tugas")
if (name == "")
return toast.error("Error! harus memasukkan judul tugas")
try {
const res = await funEditDetailProject(param.id, {
title: name,
dateStart: value[0],
dateEnd: value[1],
try {
const res = await funEditDetailProject(param.id, {
title: name,
dateStart: value[0],
dateEnd: value[1],
})
})
if (res.success) {
toast.success(res.message);
} else {
toast.error(res.message);
if (res.success) {
toast.success(res.message);
} else {
toast.error(res.message);
}
} catch (error) {
console.error(error);
toast.error("Gagal edit detail tugas Kegiatan, coba lagi nanti");
}
} catch (error) {
console.error(error);
toast.error("Gagal edit detail tugas proyek, coba lagi nanti");
}
}
}
async function getOneData() {
try {
const res = await funGetDetailProject(param.id);
if (res.success) {
setName(res.data.title)
setValue([
new Date(moment(res.data.dateStart).format('YYYY-MM-DD')),
new Date(moment(res.data.dateEnd).format('YYYY-MM-DD')),
])
} else {
toast.error(res.message);
async function getOneData() {
try {
const res = await funGetDetailProject(param.id);
if (res.success) {
setName(res.data.title)
setValue([
new Date(moment(res.data.dateStart).format('YYYY-MM-DD')),
new Date(moment(res.data.dateEnd).format('YYYY-MM-DD')),
])
} else {
toast.error(res.message);
}
} catch (error) {
console.error(error);
toast.error("Gagal mendapatkan detail tugas Kegiatan, coba lagi nanti");
}
} catch (error) {
console.error(error);
toast.error("Gagal mendapatkan detail tugas proyek, coba lagi nanti");
}
}
}
useShallowEffect(() => {
getOneData();
}, [param.id])
useShallowEffect(() => {
getOneData();
}, [param.id])
return (
<Box>
<LayoutNavbarNew back="" title={"Edit Detail Proyek"} menu />
<Box p={20}>
<Group
justify="center"
bg={"white"}
py={20}
style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
>
<DatePicker
styles={{}}
type="range"
value={value}
onChange={setValue}
size="md"
c={WARNA.biruTua}
/>
</Group>
<SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} mt={20}>
<Box>
<Text>Tanggal Mulai</Text>
<Group
justify="center"
bg={"white"}
h={45}
style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
>
<Text>{value[0] ? `${moment(value[0]).format('DD-MM-YYYY')}` : ""}</Text>
</Group>
</Box>
<Box>
<Text c={WARNA.biruTua}>Tanggal Berakhir</Text>
<Group
justify="center"
bg={"white"}
h={45}
style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
>
<Text>{value[1] ? `${moment(value[1]).format('DD-MM-YYYY')}` : ""}</Text>
</Group>
</Box>
</SimpleGrid>
<Stack pt={15}>
<Input
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
placeholder="Input Nama Tahapan"
size="md"
value={name}
onChange={(e) => { setName(e.target.value) }}
/>
</Stack>
<Box mt={"xl"}>
<Button
c={"white"}
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => { setOpenModal(true) }}
>
Simpan
</Button>
</Box>
</Box>
return (
<Box>
<LayoutNavbarNew back="" title={"Edit Detail Kegiatan"} menu />
<Box p={20}>
<Group
justify="center"
bg={"white"}
py={20}
style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
>
<DatePicker
styles={{}}
type="range"
value={value}
onChange={setValue}
size="md"
c={WARNA.biruTua}
/>
</Group>
<SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} mt={20}>
<Box>
<Text>Tanggal Mulai</Text>
<Group
justify="center"
bg={"white"}
h={45}
style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
>
<Text>{value[0] ? `${moment(value[0]).format('DD-MM-YYYY')}` : ""}</Text>
</Group>
</Box>
<Box>
<Text c={WARNA.biruTua}>Tanggal Berakhir</Text>
<Group
justify="center"
bg={"white"}
h={45}
style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
>
<Text>{value[1] ? `${moment(value[1]).format('DD-MM-YYYY')}` : ""}</Text>
</Group>
</Box>
</SimpleGrid>
<Stack pt={15}>
<TextInput
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
placeholder="Input Nama Tahapan"
label="Judul Tahapan"
required
size="md"
value={name}
onChange={(e) => { setName(e.target.value) }}
onBlur={() => setTouched({ ...touched, title: true })}
error={
touched.title && (
name == "" ? "Judul Tidak Boleh Kosong" : null
)
}
/>
</Stack>
<Box mt={"xl"}>
<Button
c={"white"}
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => {
if (
name !== ""
) {
setOpenModal(true)
} else {
toast.error("Judul Tidak Boleh Kosong")
}
}}
>
Simpan
</Button>
</Box>
</Box>
<LayoutModal opened={openModal} onClose={() => setOpenModal(false)}
description="Apakah Anda yakin ingin mengubah data?"
onYes={(val) => {
if (val) {
onSubmit()
}
setOpenModal(false)
}} />
</Box>
);
<LayoutModal opened={openModal} onClose={() => setOpenModal(false)}
description="Apakah Anda yakin ingin mengubah data?"
onYes={(val) => {
if (val) {
onSubmit()
}
setOpenModal(false)
}} />
</Box>
);
}

View File

@@ -4,7 +4,7 @@ import React, { useState } from 'react';
import toast from 'react-hot-toast';
import { funEditProject, funGetOneProjectById } from '../lib/api_project';
import { useShallowEffect } from '@mantine/hooks';
import { Box, Button, Input, Stack } from '@mantine/core';
import { Box, Button, Input, Stack, TextInput } from '@mantine/core';
import { LayoutNavbarNew, WARNA } from '@/module/_global';
import LayoutModal from '@/module/_global/layout/layout_modal';
@@ -13,6 +13,9 @@ export default function EditTaskProject() {
const [name, setName] = useState("")
const [openModal, setOpenModal] = useState(false)
const param = useParams<{ id: string }>()
const [touched, setTouched] = useState({
name: false,
});
function onVerification() {
if (name == "")
@@ -32,7 +35,7 @@ export default function EditTaskProject() {
}
} catch (error) {
console.log(error)
toast.error("Gagal mengedit proyek, coba lagi nanti")
toast.error("Gagal mengedit Kegiatan, coba lagi nanti")
}
}
@@ -47,7 +50,7 @@ export default function EditTaskProject() {
} catch (error) {
console.error(error);
toast.error("Gagal mendapatkan data proyek, coba lagi nanti");
toast.error("Gagal mendapatkan data Kegiatan, coba lagi nanti");
}
}
@@ -56,11 +59,11 @@ export default function EditTaskProject() {
}, [param.id])
return (
<Box>
<LayoutNavbarNew back="" title={"Edit Judul Proyek"} menu />
<Box pos={"relative"} h={"100vh"}>
<LayoutNavbarNew back="" title={"Edit Judul Kegiatan"} menu />
<Box p={20}>
<Stack pt={15}>
<Input
<TextInput
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
@@ -68,12 +71,22 @@ export default function EditTaskProject() {
},
}}
placeholder="Tugas"
required
size="md"
value={name}
onChange={(e) => { setName(e.target.value) }}
onChange={(e) => {
setName(e.target.value)
setTouched({ ...touched, name: false })
}}
error={
touched.name && (
name == "" ? "Judul Tidak Boleh Kosong" : null
)
}
onBlur={() => setTouched({ ...touched, name: true })}
/>
</Stack>
<Box mt={"xl"}>
<Box pos={"absolute"} bottom={10} left={0} right={0} p={20}>
<Button
c={"white"}
bg={WARNA.biruTua}

View File

@@ -1,5 +1,5 @@
'use client'
import { LayoutDrawer, WARNA } from '@/module/_global';
import { LayoutDrawer, SkeletonSingle, WARNA } from '@/module/_global';
import { Avatar, Box, Flex, Group, SimpleGrid, Stack, Text } from '@mantine/core';
import React, { useState } from 'react';
import { funDeleteMemberProject, funGetOneProjectById } from '../lib/api_project';
@@ -33,7 +33,7 @@ export default function ListAnggotaDetailProject() {
} catch (error) {
console.error(error);
toast.error("Gagal mendapatkan member proyek, coba lagi nanti");
toast.error("Gagal mendapatkan member Kegiatan, coba lagi nanti");
} finally {
setLoading(false)
}
@@ -56,7 +56,7 @@ export default function ListAnggotaDetailProject() {
}
} catch (error) {
console.error(error);
toast.error("Gagal menghapus anggota proyek, coba lagi nanti");
toast.error("Gagal menghapus anggota Kegiatan, coba lagi nanti");
}
}
@@ -77,7 +77,15 @@ export default function ListAnggotaDetailProject() {
py={10}
>
{
loading ? <Text>loading</Text> :
loading ?
Array(6)
.fill(null)
.map((_, i) => (
<Box key={i}>
<SkeletonSingle />
</Box>
))
:
isData.length === 0 ? <Text>Tidak ada anggota</Text> :
isData.map((v, i) => {
return (
@@ -113,41 +121,41 @@ export default function ListAnggotaDetailProject() {
</Box>
<LayoutDrawer opened={openDrawer} title={dataChoose.name} onClose={() => setOpenDrawer(false)}>
<Box>
<Stack pt={10}>
<SimpleGrid
cols={{ base: 3, sm: 3, lg: 3 }}
>
<Flex onClick={() => { router.push('/member/' + dataChoose.id) }} justify={'center'} align={'center'} direction={'column'} >
<Box>
<FaUser size={30} color={WARNA.biruTua} />
</Box>
<Box>
<Text c={WARNA.biruTua}>Lihat profil</Text>
</Box>
</Flex>
<Box>
<Stack pt={10}>
<SimpleGrid
cols={{ base: 3, sm: 3, lg: 3 }}
>
<Flex onClick={() => { router.push('/member/' + dataChoose.id) }} justify={'center'} align={'center'} direction={'column'} >
<Box>
<FaUser size={30} color={WARNA.biruTua} />
</Box>
<Box>
<Text c={WARNA.biruTua}>Lihat profil</Text>
</Box>
</Flex>
<Flex onClick={() => { setOpenModal(true) }} justify={'center'} align={'center'} direction={'column'} >
<Box>
<IoIosCloseCircle size={30} color={WARNA.biruTua} />
</Box>
<Box>
<Text c={WARNA.biruTua}>Keluarkan anggota</Text>
</Box>
</Flex>
</SimpleGrid>
</Stack>
</Box>
</LayoutDrawer>
<Flex onClick={() => { setOpenModal(true) }} justify={'center'} align={'center'} direction={'column'} >
<Box>
<IoIosCloseCircle size={30} color={WARNA.biruTua} />
</Box>
<Box>
<Text c={WARNA.biruTua}>Keluarkan anggota</Text>
</Box>
</Flex>
</SimpleGrid>
</Stack>
</Box>
</LayoutDrawer>
<LayoutModal opened={isOpenModal} onClose={() => setOpenModal(false)}
description="Apakah Anda yakin ingin mengeluarkan anggota?"
onYes={(val) => {
if (val) {
onSubmit()
}
setOpenModal(false)
}} />
<LayoutModal opened={isOpenModal} onClose={() => setOpenModal(false)}
description="Apakah Anda yakin ingin mengeluarkan anggota?"
onYes={(val) => {
if (val) {
onSubmit()
}
setOpenModal(false)
}} />
</Box>
);

View File

@@ -1,6 +1,6 @@
'use client'
import { WARNA } from '@/module/_global';
import { Box, Group, Text } from '@mantine/core';
import { Box, Group, Skeleton, Text } from '@mantine/core';
import React, { useState } from 'react';
import toast from 'react-hot-toast';
import { funGetOneProjectById } from '../lib/api_project';
@@ -26,7 +26,7 @@ export default function ListFileDetailProject() {
} catch (error) {
console.error(error);
toast.error("Gagal mendapatkan file proyek, coba lagi nanti");
toast.error("Gagal mendapatkan file Kegiatan, coba lagi nanti");
} finally {
setLoading(false)
}
@@ -47,7 +47,18 @@ export default function ListFileDetailProject() {
}}>
{
loading ? <Text>loading</Text> :
loading ?
Array(1)
.fill(null)
.map((_, i) => (
<Box key={i} mb={10}>
<Group>
<Skeleton width={30} height={30} radius={"md"} />
<Skeleton width={"50%"} height={30} radius={"md"} />
</Group>
</Box>
))
:
isData.length === 0 ? <Text>Tidak ada file</Text> :
isData.map((item, index) => {
return (

View File

@@ -35,7 +35,7 @@ export default function ListProject() {
setLoading(false);
} catch (error) {
toast.error("Gagal mendapatkan proyek, coba lagi nanti");
toast.error("Gagal mendapatkan Kegiatan, coba lagi nanti");
console.error(error);
} finally {
setLoading(false);
@@ -83,7 +83,7 @@ export default function ListProject() {
</Grid>
<Box pt={20}>
<Box bg={"#DCEED8"} p={10} style={{ borderRadius: 10 }}>
<Text fw={'bold'} c={WARNA.biruTua}>Total Proyek</Text>
<Text fw={'bold'} c={WARNA.biruTua}>Total Kegiatan</Text>
<Flex justify={'center'} align={'center'} h={'100%'}>
<Text fz={40} fw={'bold'} c={WARNA.biruTua}>{isData.length}</Text>
</Flex>

View File

@@ -1,5 +1,5 @@
'use client'
import { LayoutDrawer, WARNA } from '@/module/_global';
import { LayoutDrawer, SkeletonDetailListTugasTask, WARNA } from '@/module/_global';
import { Box, Center, Checkbox, Divider, Flex, Grid, Group, SimpleGrid, Stack, Text } from '@mantine/core';
import React, { useState } from 'react';
import toast from 'react-hot-toast';
@@ -37,7 +37,7 @@ export default function ListTugasDetailProject() {
} catch (error) {
console.error(error);
toast.error("Gagal mendapatkan list tugas proyek, coba lagi nanti");
toast.error("Gagal mendapatkan list tugas Kegiatan, coba lagi nanti");
} finally {
setLoading(false)
}
@@ -61,7 +61,7 @@ export default function ListTugasDetailProject() {
}
} catch (error) {
console.error(error);
toast.error("Gagal hapus tugas proyek, coba lagi nanti");
toast.error("Gagal hapus tugas Kegiatan, coba lagi nanti");
}
}
@@ -80,7 +80,7 @@ export default function ListTugasDetailProject() {
}
} catch (error) {
console.error(error);
toast.error("Gagal update status tugas proyek, coba lagi nanti");
toast.error("Gagal update status tugas Kegiatan, coba lagi nanti");
}
}
@@ -99,7 +99,9 @@ export default function ListTugasDetailProject() {
}}
>
{
loading ? <Text>loading</Text> :
loading ? <>
<SkeletonDetailListTugasTask />
</> :
isData.length === 0 ? <Text>Tidak ada tugas</Text> :
isData.map((item, index) => {
return (
@@ -163,7 +165,10 @@ export default function ListTugasDetailProject() {
</Box>
</Grid.Col>
</Grid>
<Divider my={"lg"} />
{isData.length >= 1
? "" :
<Divider my={"lg"} />
}
</Box>
)
})
@@ -207,7 +212,7 @@ export default function ListTugasDetailProject() {
</LayoutDrawer>
<LayoutModal opened={isOpenModal} onClose={() => setOpenModal(false)}
description="Apakah Anda yakin ingin menghapus proyek ini?"
description="Apakah Anda yakin ingin menghapus Kegiatan ini?"
onYes={(val) => {
if (val) {
onDelete()

View File

@@ -16,7 +16,7 @@ export default function MenuDrawerProject() {
<IoAddCircle size={30} color={WARNA.biruTua} />
</Box>
<Box>
<Text c={WARNA.biruTua}>Tambah Proyek</Text>
<Text c={WARNA.biruTua}>Tambah Kegiatan</Text>
</Box>
</Flex>
<Flex onClick={() => window.location.href = "/project?cat=filter"} justify={'center'} align={'center'} direction={'column'} >

View File

@@ -28,7 +28,7 @@ export default function NavbarDetailProject() {
} catch (error) {
console.error(error);
toast.error("Gagal mendapatkan data proyek, coba lagi nanti");
toast.error("Gagal mendapatkan data Kegiatan, coba lagi nanti");
}
}
@@ -38,7 +38,7 @@ export default function NavbarDetailProject() {
return (
<>
<LayoutNavbarNew back="" title={name} menu={
<LayoutNavbarNew back="/project?status=0" title={name} menu={
<ActionIcon
variant="light"
bg={WARNA.bgIcon}

View File

@@ -1,7 +1,7 @@
'use client'
import { WARNA } from '@/module/_global';
import { useHookstate } from '@hookstate/core';
import { ActionIcon, Box, Grid, Progress, Text } from '@mantine/core';
import { ActionIcon, Box, Grid, Progress, Skeleton, Text } from '@mantine/core';
import { useParams } from 'next/navigation';
import React, { useState } from 'react';
import { HiMiniPresentationChartBar } from 'react-icons/hi2';
@@ -15,9 +15,11 @@ export default function ProgressDetailProject() {
const [valLastUpdate, setValLastUpdate] = useState('')
const param = useParams<{ id: string }>()
const refresh = useHookstate(globalRefreshProject)
const [loading, setLoading] = useState(true)
async function getOneData() {
try {
setLoading(true)
const res = await funGetOneProjectById(param.id, 'progress');
if (res.success) {
setValProgress(res.data.progress);
@@ -25,10 +27,12 @@ export default function ProgressDetailProject() {
} else {
toast.error(res.message);
}
setLoading(false)
} catch (error) {
console.error(error);
toast.error("Gagal mendapatkan progress proyek, coba lagi nanti");
toast.error("Gagal mendapatkan progress Kegiatan, coba lagi nanti");
} finally {
setLoading(false)
}
}
@@ -50,6 +54,9 @@ export default function ProgressDetailProject() {
return (
<>
<Box mt={10}>
{loading ?
<Skeleton width={"100%"} height={100} radius={"md"} />
:
<Box
p={20}
bg={"#DCEED8"}
@@ -71,7 +78,7 @@ export default function ProgressDetailProject() {
</Grid.Col>
<Grid.Col span={9}>
<Box>
<Text>Kemajuan Proyek {valProgress}%</Text>
<Text>Kemajuan Kegiatan {valProgress}%</Text>
<Progress
style={{
border: `1px solid ${"#BDBDBD"}`,
@@ -86,6 +93,7 @@ export default function ProgressDetailProject() {
</Grid.Col>
</Grid>
</Box>
}
</Box>
</>
);

View File

@@ -22,7 +22,7 @@ export default function TabProject() {
return (
<Box>
<LayoutNavbarNew back='/home' title='proyek'
<LayoutNavbarNew back='/home' title='Kegiatan'
menu={<ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiMenu size={20} color='white' />
</ActionIcon>} />

View File

@@ -8,7 +8,7 @@ export const funGetAllTask = async (path?: string) => {
export const funCreateTask = async (data: IFormTaskDivision) => {
if (data.title.length < 3)
return { success: false, message: 'Nama proyek minimal 3 karakter' }
return { success: false, message: 'Nama Kegiatan minimal 3 karakter' }
const response = await fetch("/api/task", {
method: "POST",

View File

@@ -59,6 +59,7 @@ export default function CancelTask() {
}}
value={alasan}
size="md" placeholder='Contoh : Tugas tidak sesuai' label="Alasan Pembatalan"
required
onChange={(event) => {
setAlasan(event.target.value)
setTouched({ ...touched, reason: false })

View File

@@ -78,7 +78,7 @@ export default function ProgressDetailTask() {
</Grid.Col>
<Grid.Col span={9}>
<Box>
<Text>Kemajuan Proyek {valProgress}%</Text>
<Text>Kemajuan Kegiatan {valProgress}%</Text>
<Progress
style={{
border: `1px solid ${"#BDBDBD"}`,

View File

@@ -80,6 +80,7 @@ export default function EditTask() {
borderRadius: 10,
},
}}
required
placeholder="Tugas"
label="Judul Tugas"
size="md"

View File

@@ -86,7 +86,7 @@ export default function ListDivisionTask() {
</Box>
:
<Box bg={"#DCEED8"} p={10} style={{ borderRadius: 10 }}>
<Text fw={'bold'} c={WARNA.biruTua}>Total Proyek</Text>
<Text fw={'bold'} c={WARNA.biruTua}>Total Kegiatan</Text>
<Flex justify={'center'} align={'center'} h={'100%'}>
<Text fz={40} fw={'bold'} c={WARNA.biruTua}>{isData.length}</Text>
</Flex>

View File

@@ -371,8 +371,8 @@ export default function CreateMember() {
}
/>
<Select
placeholder="Pilih Gender"
label="Gender"
placeholder="Jenis Kelamin"
label="Jenis Kelamin"
w={"100%"}
size="md"
required

View File

@@ -321,7 +321,7 @@ export default function EditMember({ id }: { id: string }) {
}
/>
<Select
placeholder="Pilih Gender" label="Gender" w={"100%"} size="md" required withAsterisk radius={30}
placeholder="Jenis Kelamin" label="Jenis Kelamin" w={"100%"} size="md" required withAsterisk radius={30}
styles={{
input: {
color: WARNA.biruTua,