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

feat : update all button

Browse Source
This commit is contained in:
lukman
2024-08-29 17:43:05 +08:00
parent 2ce1f204ed
commit e5adacb636
20 changed files with 406 additions and 295 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/module/_global/view/view_filter.tsx
View File

@@ -84,21 +84,23 @@ export default function ViewFilter({ linkFilter }: { linkFilter: string }) {
)
}
</Box>
<Box pos={'fixed'} bottom={0} p={rem(15)} w={"100%"} style={{
maxWidth: rem(550)
}}>
<Button
fullWidth
radius={100}
size="lg"
color={WARNA.biruTua}
onClick={() => {
router.push(`/${linkFilter}?group=` + selectedFilter)
}}
>
Terapkan
</Button>
</Box>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550),
zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`,
}}>
<Button
fullWidth
radius={100}
size="lg"
color={WARNA.biruTua}
onClick={() => {
router.push(`/${linkFilter}?group=` + selectedFilter)
}}
>
Terapkan
</Button>
</Box>
</Box>
);
}

12
src/module/announcement/ui/create_announcement.tsx
View File

@@ -2,7 +2,7 @@
import { LayoutNavbarNew, WARNA } from "@/module/_global";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { useHookstate } from "@hookstate/core";
import { Avatar, Box, Button, Flex, Group, Stack, Text, Textarea, TextInput } from "@mantine/core";
import { Avatar, Box, Button, Flex, Group, rem, Stack, Text, Textarea, TextInput } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useState } from "react";
import toast from "react-hot-toast";
@@ -140,7 +140,7 @@ export default function CreateAnnouncement() {
<IoIosArrowForward />
</Group>
</Box>
<Box pt={20}>
<Box pt={20} mb={60}>
<Text c={WARNA.biruTua} mb={10}>Divisi Terpilih</Text>
{(memberGroup.length === 0) ? (
<Text c="dimmed" ta={"center"} fs={"italic"}>Belum ada anggota</Text>
@@ -160,11 +160,15 @@ export default function CreateAnnouncement() {
})}
</Box>
</Stack>
<Box mt={30} mx={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}
size="md"
size="lg"
radius={30}
fullWidth
onClick={() => {

12
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, Stack, Text, Textarea, TextInput } from "@mantine/core";
import { Box, Button, Flex, List, rem, Stack, Text, Textarea, TextInput } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useState } from "react";
import toast from "react-hot-toast";
@@ -163,7 +163,7 @@ export default function EditAnnouncement() {
Pilih Divisi
</Button>
</Stack>
<Box mt={20} mx={20}>
<Box mb={60} p={20}>
{
memberGroup.get().map((v: any, i: any) => {
return (
@@ -185,11 +185,15 @@ export default function EditAnnouncement() {
</Box>
<Box mt={30} mx={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}
size="md"
size="lg"
radius={30}
fullWidth
onClick={() => {

12
src/module/calender/ui/create_user_calender.tsx
View File

@@ -6,7 +6,7 @@ import { useHookstate } from '@hookstate/core';
import toast from 'react-hot-toast';
import { useShallowEffect } from '@mantine/hooks';
import { LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global';
import { Avatar, Box, Button, Divider, Flex, Group, Text } from '@mantine/core';
import { Avatar, Box, Button, Divider, Flex, Group, rem, Text } from '@mantine/core';
import { FaCheck } from 'react-icons/fa6';
export default function CreateUserCalender({ onClose }: { onClose: (val: any) => void }) {
@@ -96,7 +96,7 @@ export default function CreateUserCalender({ onClose }: { onClose: (val: any) =>
{selectAll ? <FaCheck style={{ marginRight: 10 }} /> : ""}
</Group>
{loading ?
Array(4)
Array(8)
.fill(null)
.map((_, i) => (
<Box key={i}>
@@ -137,7 +137,12 @@ export default function CreateUserCalender({ onClose }: { onClose: (val: any) =>
})}
</Box>
}
<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}
@@ -149,7 +154,6 @@ export default function CreateUserCalender({ onClose }: { onClose: (val: any) =>
Simpan
</Button>
</Box>
</Box>
</Box>
);
}

5
src/module/calender/ui/history_division_calender.tsx
View File

@@ -18,6 +18,7 @@ export default function HistoryDivisionCalender() {
const [searchQuery, setSearchQuery] = useState('')
const [loading, setLoading] = useState(true)
const getData = async () => {
try {
setLoading(true)
@@ -100,7 +101,9 @@ export default function HistoryDivisionCalender() {
<Grid.Col span={'auto'}>
{v.data.map((d, x) => {
return (
<Box mb={10} key={x} >
<Box mb={10} key={x}
onClick={() => router.push(`/division/${param.id}/calender/${d.id}`)}
>
<Text fw={"bold"}>{d.title}</Text>
<Text>{d.timeStart} | {d.timeEnd}</Text>
</Box>

56
src/module/calender/ui/navbar_create_division_calender.tsx
View File

@@ -1,6 +1,6 @@
"use client"
import { LayoutNavbarNew, WARNA } from '@/module/_global';
import { Avatar, Box, Button, Flex, Group, Input, Select, SimpleGrid, Stack, Text, Textarea, TextInput } from '@mantine/core';
import { Avatar, Box, Button, Flex, Group, Input, rem, Select, SimpleGrid, Stack, Text, Textarea, TextInput } from '@mantine/core';
import { DateInput, TimeInput } from '@mantine/dates';
import React, { useState } from 'react';
import { IoIosArrowDropright } from 'react-icons/io';
@@ -245,7 +245,7 @@ export default function NavbarCreateDivisionCalender() {
</Box>
{
memberUser.length > 0 &&
<Box pt={30}>
<Box pt={30} mb={60}>
<Group justify="space-between">
<Text c={WARNA.biruTua}>Anggota Terpilih</Text>
<Text c={WARNA.biruTua}>Total {memberUser.length} Anggota</Text>
@@ -287,32 +287,36 @@ export default function NavbarCreateDivisionCalender() {
</Box>
</Box>
}
<Box mt={"xl"}>
<Button
c={"white"}
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => {
if (
isData.title !== "" &&
isData.dateStart !== " " &&
isData.timeStart !== "" &&
isData.timeEnd !== "" &&
isData.repeatEventTyper !== ""
) {
setModal(true);
} else {
toast.error("Mohon lengkapi semua form");
}
}}
>
Simpan
</Button>
</Box>
</Stack>
</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}
size="lg"
radius={30}
fullWidth
onClick={() => {
if (
isData.title !== "" &&
isData.dateStart !== " " &&
isData.timeStart !== "" &&
isData.timeEnd !== "" &&
isData.repeatEventTyper !== ""
) {
setModal(true);
} else {
toast.error("Mohon lengkapi semua form");
}
}}
>
Simpan
</Button>
</Box>
<LayoutModal opened={isModal} onClose={() => setModal(false)}
description="Apakah Anda yakin ingin menambahkan data?"
onYes={(val) => { onSubmit(val) }} />

84
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, Select, SimpleGrid, Stack, Text, Textarea, TextInput } from '@mantine/core';
import { Avatar, Box, Button, Flex, Group, Input, rem, Select, SimpleGrid, Stack, Text, Textarea, TextInput } from '@mantine/core';
import { DateInput, TimeInput } from '@mantine/dates';
import React, { useState } from 'react';
import { IoIosArrowDropright } from 'react-icons/io';
@@ -295,8 +295,8 @@ export default function UpdateDivisionCalender() {
<Text c={WARNA.biruTua}>Anggota Terpilih</Text>
<Text c={WARNA.biruTua}>Total {memberUser.length} Anggota</Text>
</Group>
<Box pt={10}>
<Box mb={20}>
<Box pt={10} >
<Box mb={100}>
<Box
style={{
border: `1px solid ${"#C7D6E8"}`,
@@ -305,46 +305,56 @@ export default function UpdateDivisionCalender() {
px={20}
py={10}
>
{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"}>
Anggota
</Text>
</Flex>
);
})}
{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>
<Text c={WARNA.biruTua} fw={"bold"}>
{v.name}
</Text>
</Box>
</Group>
<Text c={WARNA.biruTua} fw={"bold"}>
Anggota
</Text>
</Flex>
);
})}
</Box>
</Box>
</Box>
</Box>
<Box mt={"xl"}>
<Button
c={"white"}
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => setModal(true)}
>
Simpan
</Button>
</Box>
</Stack>
</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}
size="lg"
radius={30}
fullWidth
onClick={() => setModal(true)}
>
Simpan
</Button>
</Box>
<LayoutModal opened={isModal} onClose={() => setModal(false)}
description="Apakah Anda yakin ingin menambahkan data?"
onYes={(val) => { onSubmit(val) }} />

34
src/module/discussion/ui/form_create_discussion.tsx
View File

@@ -1,7 +1,7 @@
'use client'
import { WARNA } from "@/module/_global";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { Avatar, Box, Button, Center, Grid, Group, Text, Textarea } from "@mantine/core";
import { Avatar, Box, Button, Center, Grid, Group, rem, Text, Textarea } from "@mantine/core";
import { useState } from "react";
import toast from "react-hot-toast";
import { funCreateDiscussion } from "../lib/api_discussion";
@@ -13,7 +13,7 @@ export default function FormCreateDiscussion({ id }: { id: string }) {
const param = useParams<{ id: string }>()
const [touched, setTouched] = useState({
desc: false,
});
});
const [isData, setData] = useState({
desc: "",
idDivision: id
@@ -26,7 +26,7 @@ export default function FormCreateDiscussion({ id }: { id: string }) {
desc: isData.desc,
idDivision: id
})
if (response.success) {
toast.success(response.message)
router.push(`/division/${param.id}/discussion/`)
@@ -47,7 +47,7 @@ export default function FormCreateDiscussion({ id }: { id: string }) {
return (
<Box pos={"relative"} h={"89vh"}>
<Box >
<Box p={20} >
<Grid gutter={0} pt={10}>
<Grid.Col span={"auto"}>
@@ -69,34 +69,38 @@ export default function FormCreateDiscussion({ id }: { id: string }) {
onBlur={() => setTouched({ ...touched, desc: true })}
error={
touched.desc && (
isData.desc == "" ? "Form Tidak Boleh Kosong" : null
isData.desc == "" ? "Form Tidak Boleh Kosong" : null
)
}
}
/>
</Box>
</Grid.Col>
</Grid>
<Box pos={"absolute"} bottom={10} left={0} right={0} p={20}>
</Box>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550),
zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`,
}}>
<Button
color="white"
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => {
if (
isData.desc !== ""
) {
setValModal(true)
} else {
toast.error("Form Tidak Boleh Kosong");
onClick={() => {
if (
isData.desc !== ""
) {
setValModal(true)
} else {
toast.error("Form Tidak Boleh Kosong");
}
}}
>
Simpan
</Button>
</Box>
</Box>
<LayoutModal opened={isValModal} onClose={() => setValModal(false)}
description="Apakah Anda yakin ingin

50
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 } from "@mantine/core"
import { Box, Group, Avatar, Textarea, Button, Grid, rem } from "@mantine/core"
import { useParams, useRouter } from "next/navigation"
import { useState } from "react"
import toast from "react-hot-toast"
@@ -15,7 +15,7 @@ export default function FormEditDiscussion() {
const [isDataOne, setDataOne] = useState("")
const [touched, setTouched] = useState({
desc: false,
});
});
async function fetchGetOneDiscussion() {
try {
@@ -56,7 +56,7 @@ export default function FormEditDiscussion() {
}, [])
return (
<Box pos={"relative"} h={"89vh"}>
<Box >
<Box p={20}>
<Grid gutter={0} pt={10}>
<Grid.Col span={"auto"}>
@@ -78,33 +78,37 @@ export default function FormEditDiscussion() {
onBlur={() => setTouched({ ...touched, desc: true })}
error={
touched.desc && (
isDataOne == "" ? "Form Tidak Boleh Kosong" : null
isDataOne == "" ? "Form Tidak Boleh Kosong" : null
)
}
}
/>
</Box>
</Grid.Col>
</Grid>
<Box pos={"absolute"} bottom={10} left={0} right={0} p={20}>
<Button
color="white"
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => {
if (
isDataOne !== ""
) {
setValModal(true)
} else {
toast.error("Form Tidak Boleh Kosong");
</Box>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550),
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>
</Box>
>
Simpan
</Button>
</Box>
<LayoutModal opened={isValModal} onClose={() => setValModal(false)}

28
src/module/division_new/ui/create_anggota_division.tsx
View File

@@ -1,9 +1,9 @@
"use client"
import { LayoutNavbarNew, WARNA } from '@/module/_global';
import { LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global';
import LayoutModal from '@/module/_global/layout/layout_modal';
import { funGetUserByCookies } from '@/module/auth';
import { funGetAllmember, TypeUser } from '@/module/user';
import { Avatar, Box, Button, Divider, Group, Stack, Text, TextInput } from '@mantine/core';
import { Avatar, Box, Button, Divider, Group, rem, Stack, Text, TextInput } from '@mantine/core';
import { useParams, useRouter } from 'next/navigation';
import React, { useState } from 'react';
import toast from 'react-hot-toast';
@@ -22,6 +22,7 @@ export default function CreateAnggotaDivision() {
const [group, setGroup] = useState("")
const [isOpen, setOpen] = useState(false)
const param = useParams<{ id: string }>()
const [loading, setLoading] = useState(true)
const handleFileClick = (index: number) => {
if (selectedFiles.some((i: any) => i.idUser == dataMember[index].id)) {
@@ -33,6 +34,7 @@ export default function CreateAnggotaDivision() {
async function loadMember(group: string, search: string) {
setLoading(true)
const res = await funGetAllmember('?active=true&group=' + group + '&search=' + search);
const user = await funGetUserByCookies();
@@ -41,6 +43,7 @@ export default function CreateAnggotaDivision() {
} else {
toast.error(res.message)
}
setLoading(false)
}
async function loadFirst() {
@@ -99,7 +102,17 @@ export default function CreateAnggotaDivision() {
onChange={(e: any) => loadMember(group, e.target.value)}
/>
</Stack>
<Box mt={20}>
{loading ?
Array(8)
.fill(null)
.map((_, i) => (
<Box key={i}>
<SkeletonSingle/>
</Box>
))
:
<Box mt={20} mb={60}>
{dataMember.map((v: any, index: any) => {
const isSelected = selectedFiles.some((i: any) => i.idUser == dataMember[index].id)
const found = memberDb.some((i: any) => i.idUser == v.id)
@@ -122,7 +135,13 @@ export default function CreateAnggotaDivision() {
)
})}
</Box>
<Box mt="xl">
}
</Box>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550),
zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`,
}}>
<Button
color="white"
bg={WARNA.biruTua}
@@ -134,7 +153,6 @@ export default function CreateAnggotaDivision() {
Simpan
</Button>
</Box>
</Box>
<LayoutModal opened={isOpen} onClose={() => setOpen(false)}
description="Apakah Anda yakin ingin menambahkan anggota divisi?"
onYes={(val) => {

35
src/module/division_new/ui/create_division.tsx
View File

@@ -7,6 +7,7 @@ import {
Button,
Flex,
Group,
rem,
Select,
Stack,
Text,
@@ -167,7 +168,7 @@ export default function CreateDivision() {
<IoIosArrowDropright size={25} />
</Group>
</Box>
<Box pt={20}>
<Box pt={20} pb={50}>
<Group justify="space-between">
<Text c={WARNA.biruTua}>Anggota Terpilih</Text>
<Text c={WARNA.biruTua}>Total {member.length} Anggota</Text>
@@ -210,22 +211,26 @@ export default function CreateDivision() {
</Box>
</Box>
</Box>
<Box mt="xl">
<Button
color="white"
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => {
onSubmit()
}}
>
Simpan
</Button>
</Box>
</Stack>
</Box>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550),
zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`,
}}>
<Button
color="white"
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => {
onSubmit()
}}
>
Simpan
</Button>
</Box>
</Box>
);
}

10
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, Select, Stack, Textarea, TextInput } from '@mantine/core';
import { Box, Button, rem, Select, Stack, Textarea, TextInput } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { useParams, useRouter } from 'next/navigation';
import React, { useState } from 'react';
@@ -106,7 +106,12 @@ export default function EditDivision() {
}}
/>
</Stack>
<Box pos={"absolute"} bottom={10} left={0} right={0} p={20}>
</Box>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550),
zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`,
}}>
<Button
color="white"
bg={WARNA.biruTua}
@@ -126,7 +131,6 @@ 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) {

88
src/module/division_new/ui/navbar_create_users.tsx
View File

@@ -1,7 +1,7 @@
"use client"
import { LayoutNavbarNew, WARNA } from '@/module/_global';
import { useHookstate } from '@hookstate/core';
import { Avatar, Box, Button, Center, Input, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
import { Avatar, Box, Button, Center, Input, rem, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { useRouter } from 'next/navigation';
import React, { useState } from 'react';
@@ -94,50 +94,56 @@ export default function NavbarCreateUsers({ grup, onClose }: { grup?: string, on
))}
</SimpleGrid>
:
<SimpleGrid
cols={{ base: 2, sm: 2, lg: 2 }}
spacing={{ base: 20, sm: "xl" }}
verticalSpacing={{ base: "md", sm: "xl" }}
>
{dataMember.map((v, index) => {
const isSelected = selectedFiles.some((i: any) => i.idUser == dataMember[index].id);
return (
<Box key={index} mb={10}>
<Box
bg={isSelected ? WARNA.bgHijauMuda : "white"}
style={{
border: `1px solid ${WARNA.biruTua}`,
borderRadius: 20,
}}
py={10}
onClick={() => handleFileClick(index)}
>
<Center>
<Avatar src={"https://i.pravatar.cc/1000?img=37"} alt="it's me" size="xl" />
</Center>
<Text mt={20} ta="center">
{v.name}
</Text>
<Box mb={60}>
<SimpleGrid
cols={{ base: 2, sm: 2, lg: 2 }}
spacing={{ base: 20, sm: "xl" }}
verticalSpacing={{ base: "md", sm: "xl" }}
>
{dataMember.map((v, index) => {
const isSelected = selectedFiles.some((i: any) => i.idUser == dataMember[index].id);
return (
<Box key={index} mb={10}>
<Box
bg={isSelected ? WARNA.bgHijauMuda : "white"}
style={{
border: `1px solid ${WARNA.biruTua}`,
borderRadius: 20,
}}
py={10}
onClick={() => handleFileClick(index)}
>
<Center>
<Avatar src={"https://i.pravatar.cc/1000?img=37"} alt="it's me" size="xl" />
</Center>
<Text mt={20} ta="center">
{v.name}
</Text>
</Box>
</Box>
</Box>
);
})}
</SimpleGrid>
);
})}
</SimpleGrid>
</Box>
}
</Box>
</Stack>
<Box mt="xl">
<Button
color="white"
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => { onSubmit() }}
>
Simpan
</Button>
</Box>
</Box>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550),
zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`,
}}>
<Button
color="white"
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => { onSubmit() }}
>
Simpan
</Button>
</Box>
</Box>
);

112
src/module/task/ui/add_member_detail_task.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 {
Anchor,
@@ -10,6 +10,7 @@ import {
Divider,
Flex,
Group,
rem,
Stack,
Text,
TextInput,
@@ -31,10 +32,12 @@ export default function AddMemberDetailTask() {
const [isDataMember, setDataMember] = useState<IDataMemberTaskDivision[]>([])
const [selectAll, setSelectAll] = useState(false)
const [openModal, setOpenModal] = useState(false)
const [loading, setLoading] = useState(true)
async function getData() {
try {
setLoading(true)
const response = await funGetDivisionById(param.id)
if (response.success) {
setData(response.data.member)
@@ -48,9 +51,13 @@ export default function AddMemberDetailTask() {
} else {
toast.error(res.message);
}
setLoading(false)
} catch (error) {
console.log(error)
toast.error("Gagal mendapatkan anggota, coba lagi nanti");
} finally {
setLoading(false)
}
}
@@ -127,54 +134,67 @@ export default function AddMemberDetailTask() {
</Text>
{selectAll ? <FaCheck style={{ marginRight: 10 }} /> : ""}
</Group>
<Box mt={15}>
{isData.map((v, i) => {
const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser);
const found = isDataMember.some((i: any) => i.idUser == v.idUser)
return (
<Box mb={15} key={i} onClick={() => (!found) ? handleFileClick(i) : null}>
<Flex justify={"space-between"} align={"center"}>
<Group>
<Avatar src={"v.image"} alt="it's me" size="lg" />
<Stack align="flex-start" justify="flex-start">
<Text style={{
{loading ? Array(8)
.fill(null)
.map((_, i) => (
<Box key={i}>
<SkeletonSingle />
</Box>
))
:
<Box mt={15} mb={60}>
{isData.map((v, i) => {
const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser);
const found = isDataMember.some((i: any) => i.idUser == v.idUser)
return (
<Box mb={15} key={i} onClick={() => (!found) ? handleFileClick(i) : null}>
<Flex justify={"space-between"} align={"center"}>
<Group>
<Avatar src={"v.image"} alt="it's me" size="lg" />
<Stack align="flex-start" justify="flex-start">
<Text style={{
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
}}>
{v.name}
</Text>
<Text c={"dimmed"}>{(found) ? "sudah menjadi anggota" : ""}</Text>
</Stack>
</Group>
<Text
style={{
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
}}>
{v.name}
</Text>
<Text c={"dimmed"}>{(found) ? "sudah menjadi anggota" : ""}</Text>
</Stack>
</Group>
<Text
style={{
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
paddingLeft: 20,
}}
>
{isSelected ? <FaCheck style={{ marginRight: 10 }} /> : ""}
</Text>
</Flex>
<Divider my={"md"} />
</Box>
);
})}
</Box>
<Box mt={"xl"}>
<Button
c={"white"}
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => { onVerifikasi() }}
>
Simpan
</Button>
</Box>
paddingLeft: 20,
}}
>
{isSelected ? <FaCheck style={{ marginRight: 10 }} /> : ""}
</Text>
</Flex>
<Divider my={"md"} />
</Box>
);
})}
</Box>
}
</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}
size="lg"
radius={30}
fullWidth
onClick={() => { onVerifikasi() }}
>
Simpan
</Button>
</Box>
<LayoutModal opened={openModal} onClose={() => setOpenModal(false)}

33
src/module/task/ui/cancel_task.tsx
View File

@@ -3,6 +3,7 @@ import { LayoutNavbarNew, WARNA } from "@/module/_global";
import {
Box,
Button,
rem,
Stack,
Textarea,
} from "@mantine/core";
@@ -20,7 +21,7 @@ export default function CancelTask() {
const param = useParams<{ id: string, detail: string }>()
const [touched, setTouched] = useState({
reason: false,
});
});
function onVerification() {
if (alasan == "")
@@ -47,7 +48,7 @@ export default function CancelTask() {
return (
<Box pos={"relative"} h={"100vh"}>
<Box>
<LayoutNavbarNew back="" title={"Pembatalan Tugas"} menu />
<Box p={20}>
<Stack pt={15}>
@@ -68,18 +69,22 @@ export default function CancelTask() {
onBlur={() => setTouched({ ...touched, reason: true })}
/>
</Stack>
<Box pos={"absolute"} bottom={10} left={0} right={0} p={20}>
<Button
c={"white"}
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => { onVerification() }}
>
Simpan
</Button>
</Box>
</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}
size="lg"
radius={30}
fullWidth
onClick={() => { onVerification() }}
>
Simpan
</Button>
</Box>

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

@@ -7,6 +7,7 @@ import {
Flex,
Group,
Input,
rem,
SimpleGrid,
Stack,
Text,
@@ -110,7 +111,12 @@ export default function ViewDateEndTask({ onClose }: { onClose: (val: IFormDateT
error={touched.title && title == "" ? "Judul Tugas 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}
@@ -122,7 +128,6 @@ export default function ViewDateEndTask({ onClose }: { onClose: (val: IFormDateT
Simpan
</Button>
</Box>
</Box>
</Box>
);
}

12
src/module/task/ui/create_task.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { LayoutDrawer, LayoutNavbarNew, WARNA } from "@/module/_global";
import { Avatar, Box, Button, Center, Flex, Group, Input, SimpleGrid, Stack, Text, TextInput } from "@mantine/core";
import { Avatar, Box, Button, Center, Flex, Group, Input, rem, SimpleGrid, Stack, Text, TextInput } from "@mantine/core";
import { useParams, useRouter } from "next/navigation";
import React, { useRef, useState } from "react";
import { IoIosArrowDropright } from "react-icons/io";
@@ -205,7 +205,7 @@ export default function CreateTask() {
{
member.length > 0 &&
<Box pt={30}>
<Box pt={30} mb={60}>
<Group justify="space-between">
<Text c={WARNA.biruTua}>Anggota Terpilih</Text>
<Text c={WARNA.biruTua}>Total {member.length} Anggota</Text>
@@ -249,7 +249,12 @@ export default function CreateTask() {
}
<Box mt="xl">
</Box>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550),
zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`,
}}>
<Button
color="white"
bg={WARNA.biruTua}
@@ -267,7 +272,6 @@ export default function CreateTask() {
Simpan
</Button>
</Box>
</Box>

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

@@ -12,6 +12,7 @@ import {
Divider,
Flex,
Group,
rem,
Skeleton,
Text,
TextInput,
@@ -104,19 +105,6 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
menu
/>
<Box p={20}>
{/* <TextInput
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
size="md"
radius={30}
leftSection={<HiMagnifyingGlass size={20} />}
placeholder="Pencarian"
/> */}
{loading ?
<Skeleton height={20} width={"100%"} mt={20} />
:
@@ -127,7 +115,7 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
{selectAll ? <FaCheck style={{ marginRight: 10 }} /> : ""}
</Group>
}
<Box mt={15}>
<Box mt={15} mb={60}>
{loading ?
Array(3)
.fill(null)
@@ -184,7 +172,12 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
})
}
</Box>
<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}
@@ -196,7 +189,6 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
Simpan
</Button>
</Box>
</Box>
</Box>
);
}

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

@@ -7,9 +7,11 @@ import {
Flex,
Group,
Input,
rem,
SimpleGrid,
Stack,
Text,
TextInput,
} from "@mantine/core";
import React, { useState } from "react";
import { DatePicker } from "@mantine/dates";
@@ -122,31 +124,37 @@ export default function EditDetailTask() {
</Box>
</SimpleGrid>
<Stack pt={15}>
<Input
<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 mt={"xl"}>
<Button
c={"white"}
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => { setOpenModal(true) }}
>
Simpan
</Button>
</Box>
</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}
size="lg"
radius={30}
fullWidth
onClick={() => { setOpenModal(true) }}
>
Simpan
</Button>
</Box>
<LayoutModal opened={openModal} onClose={() => setOpenModal(false)}

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

@@ -4,6 +4,7 @@ import {
Box,
Button,
Input,
rem,
Stack,
Textarea,
TextInput,
@@ -23,7 +24,7 @@ export default function EditTask() {
const param = useParams<{ id: string, detail: string }>()
const [touched, setTouched] = useState({
title: false,
});
});
function onVerification() {
if (title == "")
@@ -69,7 +70,7 @@ export default function EditTask() {
return (
<Box pos={"relative"} h={"100vh"}>
<Box >
<LayoutNavbarNew back="" title={"Edit Judul Tugas"} menu />
<Box p={20}>
<Stack pt={15}>
@@ -86,18 +87,23 @@ export default function EditTask() {
size="md"
value={title}
onChange={(e) => {
setTitle(e.target.value)
setTitle(e.target.value)
setTouched({ ...touched, title: false })
}}
error={
touched.title && (
title == "" ? "Error! harus memasukkan judul tugas" : null
title == "" ? "Error! harus memasukkan judul tugas" : null
)
}
}
onBlur={() => setTouched({ ...touched, title: true })}
/>
</Stack>
<Box pos={"absolute"} bottom={10} left={0} right={0} p={20}>
</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}
@@ -109,7 +115,6 @@ export default function EditTask() {
Simpan
</Button>
</Box>
</Box>
<LayoutModal opened={openModal} onClose={() => setOpenModal(false)}