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

style : update skeleton

Browse Source 
Deskripsi:
- update announcement
- update celender
- update division
- update task
- update project
- update user

No Issue
This commit is contained in:
lukman
2024-09-02 12:24:43 +08:00
parent b442e6e599
commit 2a8a3a1129
18 changed files with 1302 additions and 1012 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
src/module/announcement/ui/edit_announcement.tsx
View File

@@ -1,7 +1,7 @@
'use client'
import { LayoutNavbarNew, WARNA } from "@/module/_global";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { Box, Button, Flex, List, rem, Stack, Text, Textarea, TextInput } from "@mantine/core";
import { Box, Button, Flex, List, rem, Skeleton, Stack, Text, Textarea, TextInput } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useState } from "react";
import toast from "react-hot-toast";
@@ -17,10 +17,11 @@ export default function EditAnnouncement() {
const [isOpen, setOpen] = useState(false)
const [isChooseDivisi, setChooseDivisi] = useState(false)
const param = useParams<{ id: string }>()
const [loading, setLoading] = useState(true)
const [touched, setTouched] = useState({
title: false,
desc: false
});
});
const [body, setBody] = useState({
title: "",
desc: "",
@@ -30,6 +31,7 @@ export default function EditAnnouncement() {
async function fetchOneAnnouncement() {
try {
setLoading(true)
memberGroup.set([])
const res = await funGetAnnouncementById(param.id)
if (res.success) {
@@ -62,9 +64,13 @@ export default function EditAnnouncement() {
toast.error(res.message)
}
setLoading(false)
} catch (error) {
console.error(error)
toast.error("Gagal mendapatkan pengumuman, coba lagi nanti")
} finally {
setLoading(false)
}
}
@@ -110,61 +116,83 @@ export default function EditAnnouncement() {
pt={30}
px={20}
>
<TextInput
size="md" type="text" radius={30} placeholder="Judul Pengumuman" withAsterisk label="Judul" w={"100%"}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
value={body.title}
onChange={(val) => {
setBody({ ...body, title: val.target.value })
setTouched({ ...touched, title: false })
}}
onBlur={() => setTouched({ ...touched, title: true })}
error={
touched.title && (
body.title == "" ? "Judul Tidak Boleh Kosong" : null
)
}
/>
<Textarea
size="md"
radius={20}
w={"100%"}
label="Pengumuman"
withAsterisk
placeholder="Deskripsi Pengumuman"
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
value={body.desc}
onChange={(val) => {
setBody({ ...body, desc: val.target.value })
setTouched({ ...touched, desc: false })
}}
onBlur={() => setTouched({ ...touched, desc: true })}
error={
touched.desc && (
body.desc == "" ? "Pengumuman Tidak Boleh Kosong" : null
)
}
/>
{loading ?
<>
<Skeleton height={40} mt={20} radius={30} />
<Skeleton height={75} mt={20} radius={10} />
<Skeleton height={40} mt={10} radius={30} />
</>
:
<>
<TextInput
size="md" type="text" radius={30} placeholder="Judul Pengumuman" withAsterisk label="Judul" w={"100%"}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
value={body.title}
onChange={(val) => {
setBody({ ...body, title: val.target.value })
setTouched({ ...touched, title: false })
}}
onBlur={() => setTouched({ ...touched, title: true })}
error={
touched.title && (
body.title == "" ? "Judul Tidak Boleh Kosong" : null
)
}
/>
<Textarea
size="md"
radius={10}
w={"100%"}
label="Pengumuman"
withAsterisk
placeholder="Deskripsi Pengumuman"
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
value={body.desc}
onChange={(val) => {
setBody({ ...body, desc: val.target.value })
setTouched({ ...touched, desc: false })
}}
onBlur={() => setTouched({ ...touched, desc: true })}
error={
touched.desc && (
body.desc == "" ? "Pengumuman Tidak Boleh Kosong" : null
)
}
/>
<Button onClick={() => { setChooseDivisi(true) }} rightSection={<HiOutlineChevronRight size={14} />} variant="default" fullWidth radius={30} size="md" mt={10}>
Pilih Divisi
</Button>
</>
}
<Button onClick={() => { setChooseDivisi(true) }} rightSection={<HiOutlineChevronRight size={14} />} variant="default" fullWidth radius={30} size="md" mt={10}>
Pilih Divisi
</Button>
</Stack>
<Box mb={60} p={20}>
{
{loading ?
Array(3)
.fill(null)
.map((_, i) => (
<Box key={i} mb={20}>
<Skeleton height={20} radius={10} mt={20} width={"30%"} />
<Skeleton height={20} ml={40} radius={10} mt={10} width={"80%"} />
<Skeleton height={20} ml={40} radius={10} mt={20} width={"80%"} />
</Box>
))
:
memberGroup.get().map((v: any, i: any) => {
return (
<Box key={i} mt={10}>
@@ -190,25 +218,29 @@ export default function EditAnnouncement() {
zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`,
}}>
<Button
c={"white"}
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => {
if (
body.title !== "" &&
body.desc !== ""
) {
setOpen(true)
} else {
toast.error("Isi data dengan lengkap")
}
}}
>
Simpan
</Button>
{loading ?
<Skeleton height={40} radius={30} />
:
<Button
c={"white"}
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => {
if (
body.title !== "" &&
body.desc !== ""
) {
setOpen(true)
} else {
toast.error("Isi data dengan lengkap")
}
}}
>
Simpan
</Button>
}
</Box>
<LayoutModal opened={isOpen} onClose={() => setOpen(false)}
description="Apakah Anda yakin ingin mengubah data?"

133
src/module/announcement/ui/edit_choose_member.tsx
View File

@@ -1,7 +1,7 @@
"use client";
import { LayoutNavbarNew, WARNA } from '@/module/_global';
import { funGetGroupDivision } from '@/module/group/lib/api_group';
import { Box, Button, Divider, Flex, Group, Stack, Text } from '@mantine/core';
import { Box, Button, Divider, Flex, Group, rem, Skeleton, Stack, Text } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import React, { useState } from 'react';
import { FaCheck } from 'react-icons/fa';
@@ -22,6 +22,7 @@ export default function EditChooseMember({ onClose }: { onClose: (val: any) => v
const [selectAll, setSelectAll] = useState(false);
const [isData, setIsData] = useState<GroupData[]>([])
const memberGroup = useHookstate(globalMemberEditAnnouncement)
const [loading, setLoading] = useState(true)
const handleCheck = (groupId: string, divisionId: string) => {
const newChecked = { ...checked };
@@ -70,6 +71,7 @@ export default function EditChooseMember({ onClose }: { onClose: (val: any) => v
};
async function getData() {
setLoading(true)
const response = await funGetGroupDivision()
setIsData(response.data)
@@ -81,6 +83,7 @@ export default function EditChooseMember({ onClose }: { onClose: (val: any) => v
setChecked(formatArray)
}
setLoading(false)
}
const handleSubmit = () => {
@@ -107,7 +110,7 @@ export default function EditChooseMember({ onClose }: { onClose: (val: any) => v
return (
<div>
<LayoutNavbarNew back="" title="Tambah Divisi Penerima Pengumuman" menu={<></>} />
<Box p={20}>
<Box p={20} pb={100}>
<Group justify='flex-end' mb={20}>
<Text
onClick={handleSelectAll}
@@ -121,60 +124,81 @@ export default function EditChooseMember({ onClose }: { onClose: (val: any) => v
Pilih Semua
</Text>
</Group>
{isData.map((item) => (
<Stack mb={30} key={item.id}>
<Group onClick={() => handleGroupCheck(item.id)} justify='space-between' align='center'>
<Text
style={{
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
}}
fw={checked[item.id] && checked[item.id].length === item.Division.length ? 'bold' : 'normal'}
>
{item.name}
</Text>
<Text
>
{checked[item.id] && checked[item.id].length === item.Division.length ? <FaCheck style={{ marginRight: 10 }} />
: (checked[item.id] && checked[item.id].length > 0 && checked[item.id].length < item.Division.length) ? <FaMinus style={{ marginRight: 10 }} /> : ""}
</Text>
</Group>
<Divider />
{item.Division.map((division) => (
<Box key={division.id}>
<Group onClick={() => handleCheck(item.id, division.id)} justify='space-between' align='center'>
<Text
style={{
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
paddingLeft: 20,
}}
>
{division.name}
</Text>
<Text
style={{
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
paddingLeft: 20,
}}
>
{checked[item.id] && checked[item.id].includes(division.id) ? <FaCheck style={{ marginRight: 10 }} /> : ""}
</Text>
</Group>
<Box pt={15}>
<Divider />
</Box>
{loading ?
Array(6)
.fill(null)
.map((_, i) => (
<Box key={i} mb={20}>
<Skeleton height={20} radius={10} mt={20} width={"30%"} />
<Skeleton height={20} ml={40} radius={10} mt={10} width={"80%"} />
<Skeleton height={20} ml={40} radius={10} mt={20} width={"80%"} />
</Box>
))
:
isData.map((item) => (
<Stack mb={30} key={item.id}>
<Group onClick={() => handleGroupCheck(item.id)} justify='space-between' align='center'>
<Text
style={{
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
}}
fw={checked[item.id] && checked[item.id].length === item.Division.length ? 'bold' : 'normal'}
>
{item.name}
</Text>
<Text
>
{checked[item.id] && checked[item.id].length === item.Division.length ? <FaCheck style={{ marginRight: 10 }} />
: (checked[item.id] && checked[item.id].length > 0 && checked[item.id].length < item.Division.length) ? <FaMinus style={{ marginRight: 10 }} /> : ""}
</Text>
</Group>
<Divider />
{item.Division.map((division) => (
<Box key={division.id}>
<Group onClick={() => handleCheck(item.id, division.id)} justify='space-between' align='center'>
<Text
style={{
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
paddingLeft: 20,
}}
>
{division.name}
</Text>
<Text
style={{
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
paddingLeft: 20,
}}
>
{checked[item.id] && checked[item.id].includes(division.id) ? <FaCheck style={{ marginRight: 10 }} /> : ""}
</Text>
</Group>
<Box pt={15}>
<Divider />
</Box>
</Box>
))}
</Stack>
))}
))}
</Stack>
))
}
<Box mt="xl">
</Box>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550),
zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`,
}}>
{loading ?
<Skeleton height={50} radius={30} />
:
<Button
color="white"
bg={WARNA.biruTua}
@@ -188,8 +212,7 @@ export default function EditChooseMember({ onClose }: { onClose: (val: any) => v
>
Simpan
</Button>
</Box>
}
</Box>
</div>
);

517
src/module/calender/ui/update_division_calender.tsx
View File

@@ -1,6 +1,6 @@
"use client"
import { LayoutNavbarNew, WARNA } from '@/module/_global';
import { Avatar, Box, Button, Flex, Group, Input, rem, Select, SimpleGrid, Stack, Text, Textarea, TextInput } from '@mantine/core';
import { Avatar, Box, Button, Flex, Group, Input, rem, Select, SimpleGrid, Skeleton, Stack, Text, Textarea, TextInput } from '@mantine/core';
import { DateInput, TimeInput } from '@mantine/dates';
import React, { useState } from 'react';
import { IoIosArrowDropright } from 'react-icons/io';
@@ -23,6 +23,7 @@ export default function UpdateDivisionCalender() {
const memberValue = memberUser.get() as IFormMemberCalender[]
const [isDataCalender, setDataCalender] = useState<IDetailByIdCalender>()
const [openMember, setOpenMember] = useState(false)
const [loading, setLoading] = useState(true)
const [touched, setTouched] = useState({
title: false,
dateStart: false,
@@ -34,11 +35,14 @@ export default function UpdateDivisionCalender() {
const fetchGetOne = async () => {
try {
setLoading(true)
const response = await funGetOneCalender(param.detail)
setDataCalender(response.data.calender)
memberUser.set(response.data.member)
} catch (error) {
console.log(error)
} finally {
setLoading(false)
}
}
@@ -87,256 +91,273 @@ export default function UpdateDivisionCalender() {
<LayoutNavbarNew back={`/division/${param.id}/calender/${param.detail}`} title="Edit kalender" menu />
<Box p={20}>
<Stack>
<TextInput
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
size="md"
placeholder="Event Nama"
label="Event Nama"
defaultValue={isDataCalender?.title}
onChange={
(event) => {
setDataCalender({
...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
)
}
/>
<DateInput
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
size="md"
value={
(isDataCalender?.dateStart == '' || isDataCalender?.dateStart == null) ? null : new Date(isDataCalender.dateStart)
}
onChange={
(val) => {
setValue(val);
setDataCalender({
...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
)
}
required
/>
<SimpleGrid
cols={{ base: 2, sm: 2, lg: 2 }}
>
<TimeInput
styles={{
{loading ?
<>
<Skeleton height={40} mt={25} radius={10} />
<Skeleton height={40} mt={25} radius={10} />
<Group justify='space-between'>
<Skeleton height={40} width={"47%"} mt={20} radius={10} />
<Skeleton height={40} width={"47%"} mt={20} radius={10} />
</Group>
<Skeleton height={40} mt={25} radius={10} />
<Skeleton height={40} mt={25} radius={10} />
<Skeleton height={80} mt={25} radius={10} />
<Skeleton height={40} mt={20} radius={10} />
</>
:
<>
<TextInput
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
size="md"
placeholder="Event Nama"
label="Event Nama"
defaultValue={isDataCalender?.title}
onChange={
(event) => {
setDataCalender({
...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
)
}
/>
<DateInput
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
size="md"
value={
(isDataCalender?.dateStart == '' || isDataCalender?.dateStart == null) ? null : new Date(isDataCalender.dateStart)
}
onChange={
(val) => {
setValue(val);
setDataCalender({
...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
)
}
required
/>
<SimpleGrid
cols={{ base: 2, sm: 2, lg: 2 }}
>
<TimeInput
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
size="md"
label="Waktu Awal"
// value={isDataCalender?.timeStart}
defaultValue={isDataCalender?.timeStart}
onChange={
(event) => {
setDataCalender({
...isDataCalender,
timeStart: event.target.value
})
}
}
onBlur={() => setTouched({ ...touched, timeStart: true })}
error={touched.timeStart && !isDataCalender?.timeStart ? "Waktu Awal Tidak Boleh Kosong" : null}
required
/>
<TimeInput
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
size="md"
label="Waktu Akhir"
// value={isDataCalender?.timeEnd}
defaultValue={isDataCalender?.timeEnd}
onChange={
(event) => {
setDataCalender({
...isDataCalender,
timeEnd: event.target.value
})
}
}
onBlur={() => setTouched({ ...touched, timeEnd: true })}
required
error={
touched.timeEnd && (
isDataCalender?.timeEnd == "" ? "Waktu Akhir Tidak Boleh Kosong" : null
) ||
(String(isDataCalender?.timeStart) > String(isDataCalender?.timeEnd) ? "Waktu Akhir Tidak Tepat" : null)
}
/>
</SimpleGrid>
<TextInput
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
size="md"
placeholder="Link Meet"
label="Link Meet"
// value={isDataCalender?.linkMeet}
defaultValue={isDataCalender?.linkMeet}
onChange={
(event) => {
setDataCalender({
...isDataCalender,
linkMeet: event.target.value
})
}
}
/>
<Select
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
size="md"
placeholder="Ulangi Event"
label="Ulangi Event"
data={[
{ value: '1', label: 'Acara 1 Kali' },
{ value: '2', label: 'Hari Kerja (Sen - Jum)' },
{ value: '3', label: 'Mingguan' },
{ value: '4', label: 'Bulanan' },
{ value: '5', label: 'Tahunan' },
]}
value={isDataCalender?.repeatEventTyper}
defaultValue={isDataCalender?.repeatEventTyper}
onChange={
(val: any) => {
setDataCalender({
...isDataCalender,
repeatEventTyper: val
})
setTouched({ ...touched, repeatEventTyper: false })
}
}
onBlur={() => setTouched({ ...touched, repeatEventTyper: true })}
error={
touched.repeatEventTyper && (
isDataCalender?.repeatEventTyper == "" ? "Ulangi Event Tidak Boleh Kosong" : null
)
}
required
/>
<Textarea styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
size="md"
label="Waktu Awal"
// value={isDataCalender?.timeStart}
defaultValue={isDataCalender?.timeStart}
onChange={
(event) => {
setDataCalender({
...isDataCalender,
timeStart: event.target.value
})
size="md" placeholder='Deskripsi' label="Deskripsi"
// value={isDataCalender?.desc}
defaultValue={isDataCalender?.desc}
onChange={
(event) => {
setDataCalender({
...isDataCalender,
desc: event.target.value
})
}
}
}
onBlur={() => setTouched({ ...touched, timeStart: true })}
error={touched.timeStart && !isDataCalender?.timeStart ? "Waktu Awal Tidak Boleh Kosong" : null}
required
/>
<TimeInput
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
size="md"
label="Waktu Akhir"
// value={isDataCalender?.timeEnd}
defaultValue={isDataCalender?.timeEnd}
onChange={
(event) => {
setDataCalender({
...isDataCalender,
timeEnd: event.target.value
})
}
}
onBlur={() => setTouched({ ...touched, timeEnd: true })}
required
error={
touched.timeEnd && (
isDataCalender?.timeEnd == "" ? "Waktu Akhir Tidak Boleh Kosong" : null
) ||
(String(isDataCalender?.timeStart) > String(isDataCalender?.timeEnd) ? "Waktu Akhir Tidak Tepat" : null)
}
/>
</SimpleGrid>
<TextInput
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
size="md"
placeholder="Link Meet"
label="Link Meet"
// value={isDataCalender?.linkMeet}
defaultValue={isDataCalender?.linkMeet}
onChange={
(event) => {
setDataCalender({
...isDataCalender,
linkMeet: event.target.value
})
}
}
/>
<Select
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
size="md"
placeholder="Ulangi Event"
label="Ulangi Event"
data={[
{ value: '1', label: 'Acara 1 Kali' },
{ value: '2', label: 'Hari Kerja (Sen - Jum)' },
{ value: '3', label: 'Mingguan' },
{ value: '4', label: 'Bulanan' },
{ value: '5', label: 'Tahunan' },
]}
value={isDataCalender?.repeatEventTyper}
defaultValue={isDataCalender?.repeatEventTyper}
onChange={
(val: any) => {
setDataCalender({
...isDataCalender,
repeatEventTyper: val
})
setTouched({ ...touched, repeatEventTyper: false })
}
}
onBlur={() => setTouched({ ...touched, repeatEventTyper: true })}
error={
touched.repeatEventTyper && (
isDataCalender?.repeatEventTyper == "" ? "Ulangi Event Tidak Boleh Kosong" : null
)
}
required
/>
<Textarea styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
size="md" placeholder='Deskripsi' label="Deskripsi"
// value={isDataCalender?.desc}
defaultValue={isDataCalender?.desc}
onChange={
(event) => {
setDataCalender({
...isDataCalender,
desc: event.target.value
})
}
}
/>
<Box mt={5} onClick={() => setOpenMember(true)}>
<Group
justify="space-between"
p={10}
style={{
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
}}
>
<Text>Tambah Anggota *</Text>
<IoIosArrowDropright size={25} />
</Group>
</Box>
<Box pt={30}>
<Group justify="space-between">
<Text c={WARNA.biruTua}>Anggota Terpilih</Text>
<Text c={WARNA.biruTua}>Total {memberUser.length} Anggota</Text>
</Group>
<Box pt={10} >
<Box mb={100}>
<Box
/>
<Box mt={5} onClick={() => setOpenMember(true)}>
<Group
justify="space-between"
p={10}
style={{
border: `1px solid ${"#C7D6E8"}`,
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
}}
px={20}
py={10}
>
{memberUser.length == 0 ?
<Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '10vh' }}>
<Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada Anggota</Text>
</Box>
:
<Text>Tambah Anggota *</Text>
<IoIosArrowDropright size={25} />
</Group>
</Box>
<Box pt={30}>
<Group justify="space-between">
<Text c={WARNA.biruTua}>Anggota Terpilih</Text>
<Text c={WARNA.biruTua}>Total {memberUser.length} Anggota</Text>
</Group>
<Box pt={10} >
<Box mb={100}>
<Box
style={{
border: `1px solid ${"#C7D6E8"}`,
borderRadius: 10,
}}
px={20}
py={10}
>
{memberUser.length == 0 ?
<Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '10vh' }}>
<Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada Anggota</Text>
</Box>
:
memberUser.get().map((v: any, i: any) => {
return (
<Flex
justify={"space-between"}
align={"center"}
mt={20}
key={i}
>
<Group>
<Avatar src={"v.image"} alt="it's me" size="lg" />
<Box>
memberUser.get().map((v: any, i: any) => {
return (
<Flex
justify={"space-between"}
align={"center"}
mt={20}
key={i}
>
<Group>
<Avatar src={"v.image"} alt="it's me" size="lg" />
<Box>
<Text c={WARNA.biruTua} fw={"bold"}>
{v.name}
</Text>
</Box>
</Group>
<Text c={WARNA.biruTua} fw={"bold"}>
{v.name}
Anggota
</Text>
</Box>
</Group>
<Text c={WARNA.biruTua} fw={"bold"}>
Anggota
</Text>
</Flex>
);
})}
</Flex>
);
})}
</Box>
</Box>
</Box>
</Box>
</Box>
</Box>
</>
}
</Stack>
</Box>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
@@ -344,16 +365,20 @@ export default function UpdateDivisionCalender() {
zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`,
}}>
<Button
c={"white"}
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => setModal(true)}
>
Simpan
</Button>
{loading ?
<Skeleton height={50} radius={30} />
:
<Button
c={"white"}
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => setModal(true)}
>
Simpan
</Button>
}
</Box>
<LayoutModal opened={isModal} onClose={() => setModal(false)}
description="Apakah Anda yakin ingin menambahkan data?"

14
src/module/calender/ui/update_list_users.tsx
View File

@@ -2,7 +2,7 @@
import { LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global';
import { funGetDivisionById, IDataMemberDivision } from '@/module/division_new';
import { useHookstate } from '@hookstate/core';
import { Avatar, Box, Button, Center, Divider, Flex, Group, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
import { Avatar, Box, Button, Center, Divider, Flex, Group, rem, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
import { useParams, useRouter } from 'next/navigation';
import React, { useState } from 'react';
import { HiMagnifyingGlass } from 'react-icons/hi2';
@@ -171,7 +171,15 @@ export default function UpdateListUsers({ onClose }: { onClose: (val: any) => vo
})}
</Box>
}
<Box mt={"xl"}>
</Box>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550),
zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`,
}}>
{loading ?
<Skeleton height={50} radius={30} />
:
<Button
c={"white"}
bg={WARNA.biruTua}
@@ -182,8 +190,8 @@ export default function UpdateListUsers({ onClose }: { onClose: (val: any) => vo
>
Simpan
</Button>
}
</Box>
</Box>
</Box>
);
}

60
src/module/discussion/ui/form_edit_discussion.tsx
View File

@@ -1,7 +1,7 @@
'use client'
import { WARNA } from "@/module/_global"
import LayoutModal from "@/module/_global/layout/layout_modal"
import { Box, Group, Avatar, Textarea, Button, Grid, rem } from "@mantine/core"
import { Box, Group, Avatar, Textarea, Button, Grid, rem, Skeleton } from "@mantine/core"
import { useParams, useRouter } from "next/navigation"
import { useState } from "react"
import toast from "react-hot-toast"
@@ -13,17 +13,21 @@ export default function FormEditDiscussion() {
const router = useRouter()
const param = useParams<{ id: string, detail: string }>()
const [isDataOne, setDataOne] = useState("")
const [loading, setLoading] = useState(true)
const [touched, setTouched] = useState({
desc: false,
});
async function fetchGetOneDiscussion() {
try {
setLoading(true)
const response = await funGetDiscussionById(param.detail)
setDataOne(response.data.desc)
} catch (error) {
console.log(error);
toast.error("Gagal menampilkan discussion, coba lagi nanti");
} finally {
setLoading(false)
}
}
@@ -60,9 +64,22 @@ export default function FormEditDiscussion() {
<Box p={20}>
<Grid gutter={0} pt={10}>
<Grid.Col span={"auto"}>
{loading ?
<Skeleton height={60} width={60} radius={100} />
:
<Avatar src={'https://i.pravatar.cc/1000?img=32'} alt="it's me" size="lg" />
}
</Grid.Col>
<Grid.Col span={10}>
{loading ?
Array(10)
.fill(null)
.map((_, i) => (
<Box key={i} mb={20}>
<Skeleton height={20} radius={10} />
</Box>
))
:
<Box>
<Textarea
placeholder="Tuliskan apa yang ingin anda diskusikan"
@@ -83,6 +100,7 @@ export default function FormEditDiscussion() {
}
/>
</Box>
}
</Grid.Col>
</Grid>
</Box>
@@ -91,24 +109,28 @@ export default function FormEditDiscussion() {
zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`,
}}>
<Button
color="white"
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => {
if (
isDataOne !== ""
) {
setValModal(true)
} else {
toast.error("Form Tidak Boleh Kosong");
}
}}
>
Simpan
</Button>
{loading ?
<Skeleton height={50} radius={30} />
:
<Button
color="white"
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => {
if (
isDataOne !== ""
) {
setValModal(true)
} else {
toast.error("Form Tidak Boleh Kosong");
}
}}
>
Simpan
</Button>
}
</Box>
<LayoutModal opened={isValModal} onClose={() => setValModal(false)}

81
src/module/division_new/ui/edit_division.tsx
View File

@@ -1,7 +1,7 @@
"use client"
import { LayoutNavbarNew, WARNA } from '@/module/_global';
import LayoutModal from '@/module/_global/layout/layout_modal';
import { Box, Button, rem, Select, Stack, Textarea, TextInput } from '@mantine/core';
import { Box, Button, rem, Select, Skeleton, Stack, Textarea, TextInput } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { useParams, useRouter } from 'next/navigation';
import React, { useState } from 'react';
@@ -78,40 +78,52 @@ export default function EditDivision() {
<LayoutNavbarNew back="" title="Edit Divisi" menu />
<Box p={20}>
<Stack>
<TextInput
placeholder="Judul"
label="Judul"
size="md"
required
radius={40}
value={body.name}
onChange={(e) => {
setBody({ ...body, name: e.target.value })
setTouched({ ...touched, name: false })
}}
onBlur={() => setTouched({ ...touched, name: true })}
error={
touched.name && (
body.name == "" ? "Judul Tidak Boleh Kosong" : null
)
}
/>
<Textarea placeholder="Deskripsi" label="Deskripsi" size="md" radius={10}
value={body.desc}
onChange={(e) => { setBody({ ...body, desc: e.currentTarget.value }) }}
styles={{
input: {
height: "40vh"
}
}}
/>
{loading ?
<>
<Skeleton height={40} mt={20} radius={30} />
<Skeleton height={"40vh"} mt={20} radius={10} />
</>
:
<>
<TextInput
placeholder="Judul"
label="Judul"
size="md"
required
radius={40}
value={body.name}
onChange={(e) => {
setBody({ ...body, name: e.target.value })
setTouched({ ...touched, name: false })
}}
onBlur={() => setTouched({ ...touched, name: true })}
error={
touched.name && (
body.name == "" ? "Judul Tidak Boleh Kosong" : null
)
}
/>
<Textarea placeholder="Deskripsi" label="Deskripsi" size="md" radius={10}
value={body.desc}
onChange={(e) => { setBody({ ...body, desc: e.currentTarget.value }) }}
styles={{
input: {
height: "40vh"
}
}}
/>
</>
}
</Stack>
</Box>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550),
zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`,
}}>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550),
zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`,
}}>
{loading ?
<Skeleton height={50} radius={30} />
:
<Button
color="white"
bg={WARNA.biruTua}
@@ -130,7 +142,8 @@ export default function EditDivision() {
>
Simpan
</Button>
</Box>
}
</Box>
<LayoutModal opened={openModal} onClose={() => setOpenModal(false)} description='Apakah Anda yakin ingin edit data'
onYes={(val) => {
if (val) {

138
src/module/position/ui/drawer_detail_position.tsx
View File

@@ -1,7 +1,7 @@
import { LayoutDrawer, WARNA } from "@/module/_global"
import LayoutModal from "@/module/_global/layout/layout_modal"
import { funGetAllGroup, IDataGroup } from "@/module/group"
import { Box, Stack, SimpleGrid, Flex, Text, Select, TextInput, Button } from "@mantine/core"
import { Box, Stack, SimpleGrid, Flex, Text, Select, TextInput, Button, Skeleton } from "@mantine/core"
import { useShallowEffect } from "@mantine/hooks"
import { useEffect, useState } from "react"
import toast from "react-hot-toast"
@@ -17,6 +17,7 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
const [openDrawerGroup, setOpenDrawerGroup] = useState(false)
const [isModal, setModal] = useState(false)
const refresh = useHookstate(globalRefreshPosition)
const [loading, setLoading] = useState(true)
const [data, setData] = useState<any>({
id: id,
name: "",
@@ -26,7 +27,7 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
const [touched, setTouched] = useState({
name: false,
idGroup: false
});
});
function onCLose() {
onUpdated(true)
@@ -49,15 +50,19 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
async function getOneData() {
try {
setLoading(true)
const res = await funGetOnePosition(id)
if (res.success) {
setData(res.data)
} else {
toast.error(res.message)
}
setLoading(false)
} catch (error) {
console.error(error)
toast.error("Gagal mendapatkan jabatan, coba lagi nanti");
} finally {
setLoading(false)
}
}
@@ -147,66 +152,75 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
<LayoutDrawer opened={openDrawerGroup} onClose={() => setOpenDrawerGroup(false)} title={'Edit Jabatan'} size="lg">
<Box pt={10} pos={"relative"} h={"70vh"}>
<Select
label="Grup"
placeholder="Pilih grup"
size="md"
radius={10}
data={
listGroup
? listGroup.map((data) => ({
value: data.id,
label: data.name,
}))
: []
}
value={String(data.idGroup)}
mb={5}
onChange={(val) => {
setData({ ...data, idGroup: val })
setTouched({ ...touched, idGroup: false })
}}
withAsterisk
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
error={
touched.idGroup && (
data.idGroup == "" ? "Grup Tidak Boleh Kosong" : null
)
}
onBlur={() => setTouched({ ...touched, idGroup: true })}
/>
<TextInput
label="Jabatan"
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
required
my={15}
size="md"
value={String(data.name)}
onChange={(e) => {
setData({ ...data, name: e.target.value })
setTouched({ ...touched, name: false })
}}
onBlur={() => setTouched({ ...touched, name: true })}
error={
touched.name && (
data.name == "" ? "Nama Jabatan Tidak Boleh Kosong" : null
)
}
radius={10}
placeholder="Nama Jabatan"
/>
{loading ?
<Box>
<Skeleton height={40} mt={6} radius={10} />
<Skeleton height={40} mt={15} radius={10} />
</Box>
:
<Box>
<Select
label="Grup"
placeholder="Pilih grup"
size="md"
radius={10}
data={
listGroup
? listGroup.map((data) => ({
value: data.id,
label: data.name,
}))
: []
}
value={String(data.idGroup)}
mb={5}
onChange={(val) => {
setData({ ...data, idGroup: val })
setTouched({ ...touched, idGroup: false })
}}
withAsterisk
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
error={
touched.idGroup && (
data.idGroup == "" ? "Grup Tidak Boleh Kosong" : null
)
}
onBlur={() => setTouched({ ...touched, idGroup: true })}
/>
<TextInput
label="Jabatan"
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
required
my={15}
size="md"
value={String(data.name)}
onChange={(e) => {
setData({ ...data, name: e.target.value })
setTouched({ ...touched, name: false })
}}
onBlur={() => setTouched({ ...touched, name: true })}
error={
touched.name && (
data.name == "" ? "Nama Jabatan Tidak Boleh Kosong" : null
)
}
radius={10}
placeholder="Nama Jabatan"
/>
</Box>
}
<Box pos={"absolute"} bottom={10} left={0} right={0}>
<Button
c={"white"}

26
src/module/project/ui/add_member_detail_project.tsx
View File

@@ -5,8 +5,8 @@ import { IDataMemberProject, IDataMemberProjectDetail } from '../lib/type_projec
import toast from 'react-hot-toast';
import { funAddMemberProject, funGetAllMemberById, funGetOneProjectById } from '../lib/api_project';
import { useShallowEffect } from '@mantine/hooks';
import { Avatar, Box, Button, Divider, Flex, Group, rem, Stack, Text } from '@mantine/core';
import { LayoutNavbarNew, WARNA } from '@/module/_global';
import { Avatar, Box, Button, Divider, Flex, Group, rem, Skeleton, Stack, Text } from '@mantine/core';
import { LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global';
import { FaCheck } from 'react-icons/fa6';
import LayoutModal from '@/module/_global/layout/layout_modal';
@@ -17,27 +17,31 @@ export default function AddMemberDetailProject() {
const [isData, setData] = useState<IDataMemberProjectDetail[]>([])
const [isDataMember, setDataMember] = useState<IDataMemberProject[]>([])
const [selectAll, setSelectAll] = useState(false)
const [loading, setLoading] = useState(true)
const [openModal, setOpenModal] = useState(false)
async function getData() {
try {
setLoading(true)
const response = await funGetAllMemberById(param.id)
if (response.success) {
setData(response.data.member)
} else {
toast.error(response.message)
}
const res = await funGetOneProjectById(param.id, 'member');
if (res.success) {
setDataMember(res.data)
} else {
toast.error(res.message);
}
setLoading(false)
} catch (error) {
console.log(error)
toast.error("Gagal mendapatkan anggota, coba lagi nanti");
} finally {
setLoading(false)
}
}
@@ -112,6 +116,15 @@ export default function AddMemberDetailProject() {
</Text>
{selectAll ? <FaCheck style={{ marginRight: 10 }} /> : ""}
</Group>
{loading ?
Array(8)
.fill(null)
.map((_, i) => (
<Box key={i} mb={10}>
<SkeletonSingle/>
</Box>
))
:
<Box mt={15} mb={100}>
{isData.map((v, i) => {
const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser);
@@ -148,12 +161,16 @@ export default function AddMemberDetailProject() {
);
})}
</Box>
}
</Box>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550),
zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`,
}}>
}}>
{loading ?
<Skeleton height={50} radius={30} />
:
<Button
c={"white"}
bg={WARNA.biruTua}
@@ -164,6 +181,7 @@ export default function AddMemberDetailProject() {
>
Simpan
</Button>
}
</Box>
<LayoutModal opened={openModal} onClose={() => setOpenModal(false)}

105
src/module/project/ui/edit_detail_task_project.tsx
View File

@@ -5,7 +5,7 @@ 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, rem, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
import { Box, Button, Group, Input, rem, SimpleGrid, Skeleton, 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';
@@ -15,6 +15,7 @@ export default function EditDetailTaskProject() {
const [name, setName] = useState("")
const param = useParams<{ id: string }>()
const [openModal, setOpenModal] = useState(false)
const [loading, setLoading] = useState(true)
const [touched, setTouched] = useState({
title: false,
});
@@ -47,6 +48,7 @@ export default function EditDetailTaskProject() {
async function getOneData() {
try {
setLoading(true)
const res = await funGetDetailProject(param.id);
if (res.success) {
setName(res.data.title)
@@ -57,9 +59,12 @@ export default function EditDetailTaskProject() {
} else {
toast.error(res.message);
}
setLoading(false);
} catch (error) {
console.error(error);
toast.error("Gagal mendapatkan detail tugas Kegiatan, coba lagi nanti");
} finally {
setLoading(false);
}
}
@@ -88,49 +93,65 @@ export default function EditDetailTaskProject() {
</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>
{loading ?
<Skeleton height={45} mt={20} radius={10} />
:
<>
<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>
{loading ?
<Skeleton height={45} mt={20} radius={10} />
:
<>
<Text>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 pt={15} pb={100}>
{loading ?
<Skeleton height={40} mt={20} radius={10} />
:
<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>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
@@ -138,6 +159,9 @@ export default function EditDetailTaskProject() {
zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`,
}}>
{loading ?
<Skeleton height={50} radius={30} />
:
<Button
c={"white"}
bg={WARNA.biruTua}
@@ -156,6 +180,7 @@ export default function EditDetailTaskProject() {
>
Simpan
</Button>
}
</Box>
<LayoutModal opened={openModal} onClose={() => setOpenModal(false)}

16
src/module/project/ui/edit_task_project.tsx
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, rem, Stack, TextInput } from '@mantine/core';
import { Box, Button, Input, rem, Skeleton, Stack, TextInput } from '@mantine/core';
import { LayoutNavbarNew, WARNA } from '@/module/_global';
import LayoutModal from '@/module/_global/layout/layout_modal';
@@ -13,6 +13,7 @@ export default function EditTaskProject() {
const [name, setName] = useState("")
const [openModal, setOpenModal] = useState(false)
const param = useParams<{ id: string }>()
const [loading, setLoading] = useState(true)
const [touched, setTouched] = useState({
name: false,
});
@@ -41,16 +42,19 @@ export default function EditTaskProject() {
async function getOneData() {
try {
setLoading(true)
const res = await funGetOneProjectById(param.id, 'data');
if (res.success) {
setName(res.data.title);
} else {
toast.error(res.message);
}
setLoading(false);
} catch (error) {
console.error(error);
toast.error("Gagal mendapatkan data Kegiatan, coba lagi nanti");
} finally {
setLoading(false);
}
}
@@ -63,6 +67,9 @@ export default function EditTaskProject() {
<LayoutNavbarNew back="" title={"Edit Judul Kegiatan"} menu />
<Box p={20}>
<Stack pt={15}>
{loading ?
<Skeleton height={40} mt={20} radius={10} />
:
<TextInput
styles={{
input: {
@@ -86,6 +93,7 @@ export default function EditTaskProject() {
}
onBlur={() => setTouched({ ...touched, name: true })}
/>
}
</Stack>
</Box>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
@@ -93,6 +101,9 @@ export default function EditTaskProject() {
zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`,
}}>
{loading ?
<Skeleton height={50} radius={30} />
:
<Button
c={"white"}
bg={WARNA.biruTua}
@@ -103,6 +114,7 @@ export default function EditTaskProject() {
>
Simpan
</Button>
}
</Box>

22
src/module/task/ui/add_detail_task.tsx
View File

@@ -7,6 +7,7 @@ import {
Flex,
Group,
Input,
rem,
SimpleGrid,
Stack,
Text,
@@ -98,7 +99,7 @@ export default function AddDetailTask() {
</Group>
</Box>
<Box>
<Text c={WARNA.biruTua}>Tanggal Berakhir</Text>
<Text >Tanggal Berakhir</Text>
<Group
justify="center"
bg={"white"}
@@ -109,7 +110,7 @@ export default function AddDetailTask() {
</Group>
</Box>
</SimpleGrid>
<Stack pt={15}>
<Stack pt={15} pb={100}>
<TextInput
styles={{
input: {
@@ -125,13 +126,22 @@ export default function AddDetailTask() {
onChange={(e) => {
setTitle(e.target.value)
setTouched({ ...touched, title: false })
}
}
}
onBlur={() => setTouched({ ...touched, title: true })}
error={touched.title ? "Tahapan wajib diisi" : undefined}
error={
touched.title && (
title == "" ? "Tahapan Tidak Boleh Kosong" : null
)
}
/>
</Stack>
<Box mt={"xl"}>
</Box>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550),
zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`,
}}>
<Button
c={"white"}
bg={WARNA.biruTua}
@@ -143,8 +153,6 @@ export default function AddDetailTask() {
Simpan
</Button>
</Box>
</Box>
<LayoutModal opened={openModal} onClose={() => setOpenModal(false)}
description="Apakah Anda yakin ingin menambahkan tugas?"

4
src/module/task/ui/create_date_end_task.tsx
View File

@@ -79,7 +79,7 @@ export default function ViewDateEndTask({ onClose }: { onClose: (val: IFormDateT
</Group>
</Box>
<Box>
<Text c={WARNA.biruTua}>Tanggal Berakhir</Text>
<Text >Tanggal Berakhir</Text>
<Group
justify="center"
bg={"white"}
@@ -90,7 +90,7 @@ export default function ViewDateEndTask({ onClose }: { onClose: (val: IFormDateT
</Group>
</Box>
</SimpleGrid>
<Stack pt={15}>
<Stack pt={15} mb={100}>
<TextInput
styles={{
input: {

21
src/module/task/ui/create_users_project.tsx
View File

@@ -1,5 +1,5 @@
"use client"
import { LayoutNavbarNew, WARNA } from "@/module/_global";
import { LayoutNavbarNew, SkeletonSingle, WARNA } from "@/module/_global";
import { funGetDivisionById, IDataMemberDivision } from "@/module/division_new";
import { useHookstate } from "@hookstate/core";
import {
@@ -116,26 +116,11 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
}
<Box mt={15} mb={100}>
{loading ?
Array(3)
Array(8)
.fill(null)
.map((_, i) => (
<Box key={i} mb={15}>
<Group>
<Box>
<ActionIcon
variant="light"
bg={"#DCEED8"}
size={"lg"}
radius={100}
aria-label="icon"
>
<Skeleton height={30} width={30} />
</ActionIcon>
</Box>
<Box>
<Skeleton height={20} width={"80%"} />
</Box>
</Group>
<SkeletonSingle/>
</Box>
))
:

113
src/module/task/ui/edit_detail_task.tsx
View File

@@ -9,6 +9,7 @@ import {
Input,
rem,
SimpleGrid,
Skeleton,
Stack,
Text,
TextInput,
@@ -29,6 +30,7 @@ export default function EditDetailTask() {
const [title, setTitle] = useState("")
const param = useParams<{ id: string, detail: string }>()
const [openModal, setOpenModal] = useState(false)
const [loading, setLoading] = useState(true)
async function onSubmit() {
if (value[0] == null || value[1] == null)
@@ -58,6 +60,7 @@ export default function EditDetailTask() {
async function getOneData() {
try {
setLoading(true)
const res = await funGetDetailTask(param.detail);
if (res.success) {
setTitle(res.data.title)
@@ -68,10 +71,12 @@ export default function EditDetailTask() {
} else {
toast.error(res.message);
}
setLoading(false)
} catch (error) {
console.error(error);
toast.error("Gagal mendapatkan detail tugas divisi, coba lagi nanti");
} finally {
setLoading(false)
}
}
@@ -101,43 +106,59 @@ export default function EditDetailTask() {
</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>
{loading ?
<Skeleton height={45} mt={20} radius={10} />
:
<>
<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>
{loading ?
<Skeleton height={45} mt={20} radius={10} />
:
<>
<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,
},
}}
label={"Nama Tahapan"}
required
placeholder="Input Nama Tahapan"
size="md"
value={title}
onChange={(e) => { setTitle(e.target.value) }}
/>
<Stack pt={15} pb={100}>
{loading ?
<Skeleton height={40} mt={20} radius={10} />
:
<TextInput
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
label={"Nama Tahapan"}
required
placeholder="Input Nama Tahapan"
size="md"
value={title}
onChange={(e) => { setTitle(e.target.value) }}
/>
}
</Stack>
</Box>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
@@ -145,16 +166,20 @@ export default function EditDetailTask() {
zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`,
}}>
<Button
c={"white"}
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => { setOpenModal(true) }}
>
Simpan
</Button>
{loading ?
<Skeleton height={50} radius={30} />
:
<Button
c={"white"}
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => { setOpenModal(true) }}
>
Simpan
</Button>
}
</Box>
<LayoutModal opened={openModal} onClose={() => setOpenModal(false)}

74
src/module/task/ui/edit_task.tsx
View File

@@ -5,6 +5,7 @@ import {
Button,
Input,
rem,
Skeleton,
Stack,
Textarea,
TextInput,
@@ -22,6 +23,7 @@ export default function EditTask() {
const [title, setTitle] = useState("")
const [openModal, setOpenModal] = useState(false)
const param = useParams<{ id: string, detail: string }>()
const [loading, setLoading] = useState(true)
const [touched, setTouched] = useState({
title: false,
});
@@ -50,16 +52,19 @@ export default function EditTask() {
async function getOneData() {
try {
setLoading(true)
const res = await funGetTaskDivisionById(param.detail, 'data');
if (res.success) {
setTitle(res.data.title);
} else {
toast.error(res.message);
}
setLoading(false);
} catch (error) {
console.error(error);
toast.error("Gagal mendapatkan data tugas divisi, coba lagi nanti");
} finally {
setLoading(false);
}
}
@@ -74,36 +79,43 @@ export default function EditTask() {
<LayoutNavbarNew back="" title={"Edit Judul Tugas"} menu />
<Box p={20}>
<Stack pt={15}>
<TextInput
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
required
placeholder="Tugas"
label="Judul Tugas"
size="md"
value={title}
onChange={(e) => {
setTitle(e.target.value)
setTouched({ ...touched, title: false })
}}
error={
touched.title && (
title == "" ? "Error! harus memasukkan judul tugas" : null
)
}
onBlur={() => setTouched({ ...touched, title: true })}
/>
{loading ?
<Skeleton height={40} mt={20} radius={10} />
:
<TextInput
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
required
placeholder="Tugas"
label="Judul Tugas"
size="md"
value={title}
onChange={(e) => {
setTitle(e.target.value)
setTouched({ ...touched, title: false })
}}
error={
touched.title && (
title == "" ? "Error! harus memasukkan judul tugas" : null
)
}
onBlur={() => setTouched({ ...touched, title: true })}
/>
}
</Stack>
</Box>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550),
zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`,
}}>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550),
zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`,
}}>
{loading ?
<Skeleton height={50} radius={30} />
:
<Button
c={"white"}
bg={WARNA.biruTua}
@@ -114,7 +126,9 @@ export default function EditTask() {
>
Simpan
</Button>
</Box>
}
</Box>
<LayoutModal opened={openModal} onClose={() => setOpenModal(false)}

10
src/module/user/member/ui/create_member.tsx
View File

@@ -2,7 +2,7 @@
import { WARNA } from "@/module/_global";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { funGetAllGroup, IDataGroup } from "@/module/group";
import { Box, Button, Select, Stack, Text, TextInput } from "@mantine/core";
import { Box, Button, rem, Select, Stack, Text, TextInput } from "@mantine/core";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import toast from "react-hot-toast";
@@ -129,7 +129,7 @@ export default function CreateMember() {
return (
<Box>
<Stack align="center" justify="center" gap="xs" pt={30} px={20}>
<Stack align="center" justify="center" gap="xs" pt={30} px={20} pb={100}>
<Box
bg={WARNA.biruTua}
py={30}
@@ -406,7 +406,11 @@ export default function CreateMember() {
}
/>
</Stack>
<Box mt={30} mx={20} pb={20}>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550),
zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`,
}}>
<Button
c={"white"}
bg={WARNA.biruTua}

517
src/module/user/member/ui/edit_member.tsx
View File

@@ -3,7 +3,7 @@ import { WARNA } from "@/module/_global";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { funGetAllGroup, IDataGroup } from "@/module/group";
import { funGetAllPosition } from "@/module/position/lib/api_position";
import { Avatar, Box, Button, Indicator, Select, Stack, Text, TextInput } from "@mantine/core";
import { Avatar, Box, Button, Indicator, rem, Select, Skeleton, Stack, Text, TextInput } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useRouter } from "next/navigation";
import { useRef, useState } from "react";
@@ -25,6 +25,7 @@ export default function EditMember({ id }: { id: string }) {
const [imgForm, setImgForm] = useState<any>()
const openRef = useRef<() => void>(null)
const [img, setIMG] = useState<any | null>()
const [loading, setLoading] = useState(true)
const [touched, setTouched] = useState({
nik: false,
name: false,
@@ -63,12 +64,16 @@ export default function EditMember({ id }: { id: string }) {
async function getOneData() {
try {
setLoading(true)
const res = await funGetOneMember(id)
setData(res.data)
getAllPosition(res.data?.idGroup)
setIMG(`/api/file/img?cat=user&file=${res.data.img}`)
setLoading(false)
} catch (error) {
console.error(error)
} finally {
setLoading(false)
}
}
@@ -143,6 +148,7 @@ export default function EditMember({ id }: { id: string }) {
gap="xs"
pt={30}
px={20}
pb={100}
>
<Dropzone
openRef={openRef}
@@ -161,249 +167,276 @@ export default function EditMember({ id }: { id: string }) {
}}
>
</Dropzone>
<Indicator offset={20} withBorder inline color={WARNA.borderBiruMuda} position="bottom-end" label={<FaCamera size={20} />} size={40} onClick={() => openRef.current?.()}>
<Avatar
size="150"
radius={"100"}
src={img}
/>
</Indicator>
<Select
placeholder="Pilih Grup" label="Grup" w={"100%"} size="md" required withAsterisk radius={30}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
data={
listGroup
? listGroup.map((data) => ({
value: data.id,
label: data.name,
}))
: []
}
onChange={(val: any) => {
changeGrup(val)
setTouched({ ...touched, idGroup: false })
}}
value={data?.idGroup}
onBlur={() => setTouched({ ...touched, idGroup: true })}
error={
touched.idGroup && (
data.idGroup == "" ? "Grup Tidak Boleh Kosong" : null
)
}
/>
<Select
placeholder="Pilih Jabatan" label="Jabatan" w={"100%"} size="md" required withAsterisk radius={30}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
data={
listPosition
? listPosition.map((data) => ({
value: data.id,
label: data.name,
}))
: []
}
onChange={(val: any) => {
setData({ ...data, idPosition: val })
setTouched({ ...touched, idPosition: false })
}}
value={(data?.idPosition == "") ? null : data.idPosition}
onBlur={() => setTouched({ ...touched, idPosition: true })}
error={
touched.idPosition && (
data.idPosition == "" ? "Jabatan Tidak Boleh Kosong" : null
)
}
/>
<Select
placeholder="Pilih Role" label="User Role" w={"100%"} size="md" required withAsterisk radius={30}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
data={
listUserRole
? listUserRole.map((data) => ({
value: data.id,
label: data.name,
}))
: []
}
onChange={(val: any) => {
setData({ ...data, idUserRole: val })
setTouched({ ...touched, idUserRole: false })
}}
value={data?.idUserRole}
onBlur={() => setTouched({ ...touched, idUserRole: true })}
error={
touched.idUserRole && (
data.idUserRole == "" ? "Role Tidak Boleh Kosong" : null
)
}
/>
<TextInput
size="md" type="number" radius={30} placeholder="NIK" withAsterisk label="NIK" w={"100%"}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
onChange={(e) => {
setData({ ...data, nik: e.target.value })
setTouched({ ...touched, nik: false })
}}
value={data.nik}
onBlur={() => setTouched({ ...touched, nik: true })}
error={
touched.nik && (
data.nik === "" ? "NIK Tidak Boleh Kosong" :
data.nik.length !== 16 ? "NIK Harus 16 Karakter" : null
)
}
/>
<TextInput
size="md" type="text" radius={30} placeholder="Nama" withAsterisk label="Nama" w={"100%"}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
onChange={(e) => {
setData({ ...data, name: e.target.value })
setTouched({ ...touched, name: false })
}}
value={data.name}
onBlur={() => setTouched({ ...touched, name: true })}
error={
touched.name && (
data.name == "" ? "Nama Tidak Boleh Kosong" : null
)
}
/>
<TextInput
size="md" type="email" radius={30} placeholder="Email" withAsterisk label="Email" w={"100%"}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
onChange={(e) => {
setData({ ...data, email: e.target.value })
setTouched({ ...touched, email: false })
}}
value={data.email}
onBlur={() => setTouched({ ...touched, email: true })}
error={
touched.email && (
data.email == "" ? "Email Tidak Boleh Kosong" :
!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(data.email) ? "Email tidak valid" : null
)
}
/>
<TextInput
size="md" type="number" radius={30} withAsterisk label="Nomor Telepon" w={"100%"}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
placeholder="8xxx xxxx xxxx"
leftSection={<Text>+62</Text>}
onChange={(e) => {
setData({ ...data, phone: e.target.value })
setTouched({ ...touched, phone: false })
}}
value={data.phone}
onBlur={() => setTouched({ ...touched, phone: true })}
error={
touched.phone && (
data.phone == "" ? "Nomor Telepon Tidak Boleh Kosong" :
data.phone.length < 10 ? "Nomor Telepon harus 10 digit" : null
)
}
/>
<Select
placeholder="Jenis Kelamin" label="Jenis Kelamin" w={"100%"} size="md" required withAsterisk radius={30}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
data={
[
{
value: "M",
label: "Laki-laki"
},
{
value: "F",
label: "Perempuan"
{loading ?
<Skeleton height={150} width={150} radius={"100"} />
:
<Indicator offset={20} withBorder inline color={WARNA.borderBiruMuda} position="bottom-end" label={<FaCamera size={20} />} size={40} onClick={() => openRef.current?.()}>
<Avatar
size="150"
radius={"100"}
src={img}
/>
</Indicator>
}
{loading ?
<>
<Skeleton height={40} mt={20} radius={30} />
<Skeleton height={40} mt={10} radius={30} />
<Skeleton height={40} mt={10} radius={30} />
<Skeleton height={40} mt={10} radius={30} />
<Skeleton height={40} mt={10} radius={30} />
<Skeleton height={40} mt={10} radius={30} />
<Skeleton height={40} mt={10} radius={30} />
</>
:
<>
<Select
placeholder="Pilih Grup" label="Grup" w={"100%"} size="md" required withAsterisk radius={30}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
data={
listGroup
? listGroup.map((data) => ({
value: data.id,
label: data.name,
}))
: []
}
]
}
onChange={(val: any) => {
setData({ ...data, gender: val })
setTouched({ ...touched, gender: false })
}}
value={data.gender}
onBlur={() => setTouched({ ...touched, gender: true })}
error={
touched.gender && (
data.gender == "" ? "Gender Tidak Boleh Kosong" : null
)
}
/>
onChange={(val: any) => {
changeGrup(val)
setTouched({ ...touched, idGroup: false })
}}
value={data?.idGroup}
onBlur={() => setTouched({ ...touched, idGroup: true })}
error={
touched.idGroup && (
data.idGroup == "" ? "Grup Tidak Boleh Kosong" : null
)
}
/>
<Select
placeholder="Pilih Jabatan" label="Jabatan" w={"100%"} size="md" required withAsterisk radius={30}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
data={
listPosition
? listPosition.map((data) => ({
value: data.id,
label: data.name,
}))
: []
}
onChange={(val: any) => {
setData({ ...data, idPosition: val })
setTouched({ ...touched, idPosition: false })
}}
value={(data?.idPosition == "") ? null : data.idPosition}
onBlur={() => setTouched({ ...touched, idPosition: true })}
error={
touched.idPosition && (
data.idPosition == "" ? "Jabatan Tidak Boleh Kosong" : null
)
}
/>
<Select
placeholder="Pilih Role" label="User Role" w={"100%"} size="md" required withAsterisk radius={30}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
data={
listUserRole
? listUserRole.map((data) => ({
value: data.id,
label: data.name,
}))
: []
}
onChange={(val: any) => {
setData({ ...data, idUserRole: val })
setTouched({ ...touched, idUserRole: false })
}}
value={data?.idUserRole}
onBlur={() => setTouched({ ...touched, idUserRole: true })}
error={
touched.idUserRole && (
data.idUserRole == "" ? "Role Tidak Boleh Kosong" : null
)
}
/>
<TextInput
size="md" type="number" radius={30} placeholder="NIK" withAsterisk label="NIK" w={"100%"}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
onChange={(e) => {
setData({ ...data, nik: e.target.value })
setTouched({ ...touched, nik: false })
}}
value={data.nik}
onBlur={() => setTouched({ ...touched, nik: true })}
error={
touched.nik && (
data.nik === "" ? "NIK Tidak Boleh Kosong" :
data.nik.length !== 16 ? "NIK Harus 16 Karakter" : null
)
}
/>
<TextInput
size="md" type="text" radius={30} placeholder="Nama" withAsterisk label="Nama" w={"100%"}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
onChange={(e) => {
setData({ ...data, name: e.target.value })
setTouched({ ...touched, name: false })
}}
value={data.name}
onBlur={() => setTouched({ ...touched, name: true })}
error={
touched.name && (
data.name == "" ? "Nama Tidak Boleh Kosong" : null
)
}
/>
<TextInput
size="md" type="email" radius={30} placeholder="Email" withAsterisk label="Email" w={"100%"}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
onChange={(e) => {
setData({ ...data, email: e.target.value })
setTouched({ ...touched, email: false })
}}
value={data.email}
onBlur={() => setTouched({ ...touched, email: true })}
error={
touched.email && (
data.email == "" ? "Email Tidak Boleh Kosong" :
!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(data.email) ? "Email tidak valid" : null
)
}
/>
<TextInput
size="md" type="number" radius={30} withAsterisk label="Nomor Telepon" w={"100%"}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
placeholder="8xxx xxxx xxxx"
leftSection={<Text>+62</Text>}
onChange={(e) => {
setData({ ...data, phone: e.target.value })
setTouched({ ...touched, phone: false })
}}
value={data.phone}
onBlur={() => setTouched({ ...touched, phone: true })}
error={
touched.phone && (
data.phone == "" ? "Nomor Telepon Tidak Boleh Kosong" :
data.phone.length < 10 ? "Nomor Telepon harus 10 digit" : null
)
}
/>
<Select
placeholder="Jenis Kelamin" label="Jenis Kelamin" w={"100%"} size="md" required withAsterisk radius={30}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
data={
[
{
value: "M",
label: "Laki-laki"
},
{
value: "F",
label: "Perempuan"
}
]
}
onChange={(val: any) => {
setData({ ...data, gender: val })
setTouched({ ...touched, gender: false })
}}
value={data.gender}
onBlur={() => setTouched({ ...touched, gender: true })}
error={
touched.gender && (
data.gender == "" ? "Gender Tidak Boleh Kosong" : null
)
}
/>
</>
}
</Stack>
<Box mt={30} mx={20} pb={20}>
<Button
c={"white"}
bg={WARNA.biruTua}
size="md"
radius={30}
fullWidth
onClick={() => {
if (
data.nik !== "" &&
data.name !== "" &&
data.email !== "" &&
data.phone !== "" &&
data.gender !== "" &&
data.idGroup !== "" &&
data.idPosition !== "" &&
data.idUserRole !== ""
) {
setModal(true);
} else {
toast.error("Mohon lengkapi semua form");
}
}}
>
Simpan
</Button>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550),
zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`,
}}>
{loading ?
<Skeleton height={50} radius={30} />
:
<Button
c={"white"}
bg={WARNA.biruTua}
size="md"
radius={30}
fullWidth
onClick={() => {
if (
data.nik !== "" &&
data.name !== "" &&
data.email !== "" &&
data.phone !== "" &&
data.gender !== "" &&
data.idGroup !== "" &&
data.idPosition !== "" &&
data.idUserRole !== ""
) {
setModal(true);
} else {
toast.error("Mohon lengkapi semua form");
}
}}
>
Simpan
</Button>
}
</Box>
<LayoutModal opened={isModal} onClose={() => setModal(false)}
description="Apakah Anda yakin ingin mengubah data?"

285
src/module/user/profile/ui/edit_profile.tsx
View File

@@ -1,6 +1,6 @@
"use client"
import { LayoutNavbarNew, WARNA } from "@/module/_global";
import { Avatar, Box, Button, Flex, Indicator, Modal, Select, Stack, Text, TextInput } from "@mantine/core";
import { Avatar, Box, Button, Flex, Indicator, Modal, rem, Select, Skeleton, Stack, Text, TextInput } from "@mantine/core";
import toast from "react-hot-toast";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { useRef, useState } from "react";
@@ -19,6 +19,7 @@ export default function EditProfile() {
const [img, setIMG] = useState<any | null>()
const [imgForm, setImgForm] = useState<any>()
const router = useRouter()
const [loading, setLoading] = useState(true)
const [touched, setTouched] = useState({
nik: false,
@@ -41,11 +42,15 @@ export default function EditProfile() {
async function getAllProfile() {
try {
setLoading(true)
const res = await funGetProfileByCookies()
setData(res.data)
setIMG(`/api/file/img?cat=user&file=${res.data.img}`)
setLoading(false)
} catch (error) {
console.error(error);
} finally {
setLoading(false)
}
}
@@ -104,135 +109,158 @@ export default function EditProfile() {
>
</Dropzone>
<Indicator offset={20} withBorder inline color={WARNA.borderBiruMuda} position="bottom-end" label={<FaCamera size={20} />} size={40} onClick={() => openRef.current?.()}>
<Avatar
size="150"
radius={"100"}
src={img}
/>
</Indicator>
<TextInput
size="md" type="number" radius={30} placeholder="NIK" withAsterisk label="NIK" w={"100%"}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
onChange={(e) => {
setData({ ...data, nik: e.target.value })
setTouched({ ...touched, nik: false })
}}
value={data.nik}
onBlur={() => setTouched({ ...touched, nik: true })}
error={
touched.nik && (
data.nik === "" ? "NIK Tidak Boleh Kosong" :
data.nik.length !== 16 ? "NIK Harus 16 Karakter" : null
)
}
/>
<TextInput
size="md" type="text" radius={30} placeholder="Nama" withAsterisk label="Nama" w={"100%"}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
onChange={(e) => {
setData({ ...data, name: e.target.value })
setTouched({ ...touched, name: false })
}}
value={data.name}
onBlur={() => setTouched({ ...touched, name: true })}
error={
touched.name && (
data.name == "" ? "Nama Tidak Boleh Kosong" : null
)
}
/>
<TextInput
size="md" type="email" radius={30} placeholder="Email" withAsterisk label="Email" w={"100%"}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
onChange={(e) => {
setData({ ...data, email: e.target.value })
setTouched({ ...touched, email: false })
}}
value={data.email}
onBlur={() => setTouched({ ...touched, email: true })}
error={
touched.email && (
data.email == "" ? "Email Tidak Boleh Kosong" :
!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(data.email) ? "Email tidak valid" : null
)
}
/>
<TextInput
size="md" type="number" radius={30} placeholder="8xx xxxx xxxx" withAsterisk label="Nomor Telepon" w={"100%"}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
leftSection={<Text>+62</Text>}
onChange={(e) => {
setData({ ...data, phone: e.target.value })
setTouched({ ...touched, phone: false })
}}
value={data.phone}
onBlur={() => setTouched({ ...touched, phone: true })}
error={
touched.phone && (
data.phone == "" ? "Nomor Telepon Tidak Boleh Kosong" : null
)
}
/>
<Select
placeholder="Jenis Kelamin" label="Jenis Kelamin" w={"100%"} size="md" required withAsterisk radius={30}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
data={
[
{
value: "M",
label: "Laki-laki"
},
{
value: "F",
label: "Perempuan"
{loading ?
<Skeleton height={150} width={150} radius={"100"} />
:
<Indicator offset={20} withBorder inline color={WARNA.borderBiruMuda} position="bottom-end" label={<FaCamera size={20} />} size={40} onClick={() => openRef.current?.()}>
<Avatar
size="150"
radius={"100"}
src={img}
/>
</Indicator>
}
{loading ?
<>
<Skeleton height={40} mt={20} radius={30} />
<Skeleton height={40} mt={20} radius={30} />
<Skeleton height={40} mt={20} radius={30} />
<Skeleton height={40} mt={20} radius={30} />
<Skeleton height={40} mt={20} radius={30} />
</>
:
<>
<TextInput
size="md" type="number" radius={30} placeholder="NIK" withAsterisk label="NIK" w={"100%"}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
onChange={(e) => {
setData({ ...data, nik: e.target.value })
setTouched({ ...touched, nik: false })
}}
value={data.nik}
onBlur={() => setTouched({ ...touched, nik: true })}
error={
touched.nik && (
data.nik === "" ? "NIK Tidak Boleh Kosong" :
data.nik.length !== 16 ? "NIK Harus 16 Karakter" : null
)
}
]
}
onChange={(val: any) => {
setData({ ...data, gender: val })
setTouched({ ...touched, gender: false })
}}
value={data.gender}
onBlur={() => setTouched({ ...touched, gender: true })}
error={
touched.gender && (
data.gender == "" ? "Jenis Kelamin Tidak Boleh Kosong" : null
)
}
/>
/>
<TextInput
size="md" type="text" radius={30} placeholder="Nama" withAsterisk label="Nama" w={"100%"}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
onChange={(e) => {
setData({ ...data, name: e.target.value })
setTouched({ ...touched, name: false })
}}
value={data.name}
onBlur={() => setTouched({ ...touched, name: true })}
error={
touched.name && (
data.name == "" ? "Nama Tidak Boleh Kosong" : null
)
}
/>
<TextInput
size="md" type="email" radius={30} placeholder="Email" withAsterisk label="Email" w={"100%"}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
onChange={(e) => {
setData({ ...data, email: e.target.value })
setTouched({ ...touched, email: false })
}}
value={data.email}
onBlur={() => setTouched({ ...touched, email: true })}
error={
touched.email && (
data.email == "" ? "Email Tidak Boleh Kosong" :
!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(data.email) ? "Email tidak valid" : null
)
}
/>
<TextInput
size="md" type="number" radius={30} placeholder="8xx xxxx xxxx" withAsterisk label="Nomor Telepon" w={"100%"}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
leftSection={<Text>+62</Text>}
onChange={(e) => {
setData({ ...data, phone: e.target.value })
setTouched({ ...touched, phone: false })
}}
value={data.phone}
onBlur={() => setTouched({ ...touched, phone: true })}
error={
touched.phone && (
data.phone == "" ? "Nomor Telepon Tidak Boleh Kosong" : null
)
}
/>
<Select
placeholder="Jenis Kelamin" label="Jenis Kelamin" w={"100%"} size="md" required withAsterisk radius={30}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
data={
[
{
value: "M",
label: "Laki-laki"
},
{
value: "F",
label: "Perempuan"
}
]
}
onChange={(val: any) => {
setData({ ...data, gender: val })
setTouched({ ...touched, gender: false })
}}
value={data.gender}
onBlur={() => setTouched({ ...touched, gender: true })}
error={
touched.gender && (
data.gender == "" ? "Jenis Kelamin Tidak Boleh Kosong" : null
)
}
/>
</>
}
</Stack>
<Box mt={30} mx={20} pb={20}>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550),
zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`,
}}>
{loading ?
<Skeleton height={50} radius={30} />
:
<Button
c={"white"}
bg={WARNA.biruTua}
@@ -255,6 +283,7 @@ export default function EditProfile() {
>
Simpan
</Button>
}
</Box>
<LayoutModal opened={isValModal} onClose={() => setValModal(false)}
description="Apakah Anda yakin ingin