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

style : update style responsive

Browse Source 
Deskripsi:
- update api discussion
- update calender
- update dicussion

No Issue
This commit is contained in:
lukman
2024-09-04 15:14:39 +08:00
parent 878294e063
commit 85a08aaa00
13 changed files with 451 additions and 348 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
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, rem, Text } from '@mantine/core';
import { Avatar, Box, Button, Divider, Flex, Grid, Group, rem, Text } from '@mantine/core';
import { FaCheck } from 'react-icons/fa6';
export default function CreateUserCalender({ onClose }: { onClose: (val: any) => void }) {
@@ -31,7 +31,7 @@ export default function CreateUserCalender({ onClose }: { onClose: (val: any) =>
} else {
toast.error(response.message)
}
} catch (error) {
console.log(error)
toast.error("Gagal mendapatkan anggota, coba lagi nanti");
@@ -83,77 +83,73 @@ export default function CreateUserCalender({ onClose }: { onClose: (val: any) =>
return (
<Box>
<LayoutNavbarNew
// back=""
title="Pilih Anggota"
menu
/>
<Box p={20}>
<Group justify="space-between" mt={20} onClick={handleSelectAll}>
<Text c={WARNA.biruTua} fw={"bold"}>
Pilih Semua Anggota
</Text>
{selectAll ? <FaCheck style={{ marginRight: 10 }} /> : ""}
<LayoutNavbarNew
// back=""
title="Pilih Anggota"
menu
/>
<Box p={20}>
<Group justify="space-between" mt={20} onClick={handleSelectAll}>
<Text c={WARNA.biruTua} fw={"bold"}>
Pilih Semua Anggota
</Text>
{selectAll ? <FaCheck style={{ marginRight: 10 }} /> : ""}
</Group>
{loading ?
{loading ?
Array(8)
.fill(null)
.map((_, i) => (
<Box key={i}>
.fill(null)
.map((_, i) => (
<Box key={i}>
<SkeletonSingle />
</Box>
))
:
<Box mt={20}>
{isData.map((v, i) => {
const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser);
return (
<Box mb={15} key={i} onClick={() => handleFileClick(i)}>
<Flex justify={"space-between"} align={"center"}>
<Group>
<Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" />
<Text style={{
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
</Box>
))
:
<Box mt={20} mb={100}>
{isData.map((v, i) => {
const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser);
return (
<Box mb={15} key={i} onClick={() => handleFileClick(i)}>
<Grid align='center' gutter={{
base: 60,
xl: "xs"
}}>
{v.name}
</Text>
</Group>
<Text
style={{
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
paddingLeft: 20,
}}
>
{isSelected ? <FaCheck style={{ marginRight: 10 }} /> : ""}
</Text>
</Flex>
<Divider my={"md"} />
</Box>
);
})}
</Box>
<Grid.Col span={2}>
<Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" />
</Grid.Col>
<Grid.Col span={10}>
<Flex justify='space-between' align={"center"}>
<Flex direction={'column'} align="flex-start" justify="flex-start">
<Text lineClamp={1}>{v.name}</Text>
</Flex>
{isSelected ? <FaCheck /> : null}
</Flex>
</Grid.Col>
</Grid>
<Box mt={10}>
<Divider size={"xs"} />
</Box>
</Box>
);
})}
</Box>
}
</Box>
</Box>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550),
zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`,
}}>
maxWidth: rem(550),
zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`,
}}>
<Button
c={"white"}
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => {onSubmit()}}
onClick={() => { onSubmit() }}
>
Simpan
</Button>
</Box>
</Box>
</Box>
);
}

26
src/module/calender/ui/date_event_division.tsx
View File

@@ -1,5 +1,5 @@
import { WARNA } from '@/module/_global';
import { Box, Divider, Group, Indicator, Skeleton, Text } from '@mantine/core';
import { Box, Divider, Flex, Group, Indicator, Skeleton, Text } from '@mantine/core';
import { DatePicker, DatePickerProps } from '@mantine/dates';
import { useParams, useRouter } from 'next/navigation';
import React, { useState } from 'react';
@@ -82,7 +82,7 @@ export default function DateEventDivision() {
const muncul = isListTgl.includes(coba)
return (
<Indicator color="red" offset={-3} disabled={!muncul} position='top-end' inline size={6} >
<Indicator color="red" offset={-3} disabled={!muncul} position='top-end' inline size={6} >
<div>{day}</div>
</Indicator>
);
@@ -136,11 +136,25 @@ export default function DateEventDivision() {
}} h={113}>
<Group>
<Divider h={92} size="lg" orientation="vertical" color={colorDivider} />
<Box>
<Flex direction={'column'}>
<Text>{event.timeStart} - {event.timeEnd}</Text>
<Text fw={"bold"}>{event.title}</Text>
<Text>Dibuat oleh : {event.user_name}</Text>
</Box>
<Box w={{
base: 280,
xl: 430
}}>
<Text fw={"bold"} lineClamp={1}>
{_.startCase(event.title)}
</Text>
</Box>
<Box w={{
base: 280,
xl: 420
}}>
<Text lineClamp={1}>
Dibuat oleh : {event.user_name}
</Text>
</Box>
</Flex>
</Group>
</Box>
</Box>

229
src/module/calender/ui/detail_event_division.tsx
View File

@@ -1,6 +1,6 @@
'use client'
import { LayoutDrawer, LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global';
import { ActionIcon, Avatar, Box, CopyButton, Flex, Group, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
import { ActionIcon, Avatar, Box, CopyButton, Divider, Flex, Grid, Group, Skeleton, Spoiler, Stack, Text, Tooltip } from '@mantine/core';
import React, { useState } from 'react';
import { BsCalendar2Event, BsCalendarDate } from 'react-icons/bs';
import { MdEventNote, MdOutlineFormatListBulleted } from "react-icons/md";
@@ -61,63 +61,130 @@ export default function DetailEventDivision() {
padding: 20,
borderRadius: 10
}}>
<Stack ml={10}>
<Group mb={10} gap={30}>
<BsCalendar2Event size={25} color={WARNA.biruTua} />
<Text>{isDataCalender?.title}</Text>
</Group>
<Group mb={10} gap={30}>
<BsCalendarDate size={25} color={WARNA.biruTua} />
<Text>{moment(isDataCalender?.dateStart).format('LL')}</Text>
</Group>
<Group mb={10} gap={30}>
<LuClock size={25} color={WARNA.biruTua} />
<Text>{isDataCalender?.timeStart} | {isDataCalender?.timeEnd} </Text>
</Group>
<Group mb={10} gap={30}>
<BsCalendarDate size={25} color={WARNA.biruTua} />
<Text>
{isDataCalender?.repeatEventTyper.toString() === '1' ? 'Acara 1 Kali' :
isDataCalender?.repeatEventTyper.toString() === '2' ? 'Hari Kerja (senin - jumat)' :
isDataCalender?.repeatEventTyper.toString() === '3' ? 'Minggu' :
isDataCalender?.repeatEventTyper.toString() === '4' ? 'Bulanan' :
isDataCalender?.repeatEventTyper.toString() === '5' ? 'Tahunan' :
''}
</Text>
</Group>
<Group mb={10} gap={30}>
<LuLink size={25} color={WARNA.biruTua} />
{isDataCalender?.linkMeet ? (
<Group justify='space-between'>
<Text>{isDataCalender?.linkMeet}</Text>
<CopyButton value={String(isDataCalender?.linkMeet)} timeout={2000}>
{({ copied, copy }) => (
<Tooltip label={copied ? 'Copied' : 'Copy'} withArrow position="right">
<ActionIcon color={copied ? 'teal' : WARNA.biruTua} variant="subtle" onClick={copy}>
{copied ? (
<FaCheck size={20} />
) : (
<TbCopy size={20} />
)}
</ActionIcon>
</Tooltip>
)}
</CopyButton>
</Group>
) : (
<Text>-</Text>
)
}
</Group>
<Group gap={30}>
<MdOutlineFormatListBulleted size={25} color={WARNA.biruTua} />
{isDataCalender?.desc ? (
<Text>{isDataCalender?.desc}</Text>
) : (
<Text>-</Text>
)
}
</Group>
<Stack>
<Grid gutter={"lg"}>
<Grid.Col span={{
base: 2,
xl: 1
}}>
<BsCalendar2Event size={25} color={WARNA.biruTua} />
</Grid.Col>
<Grid.Col span={{
base: 10,
xl: 11
}}>
<Text>{isDataCalender?.title}</Text>
</Grid.Col>
</Grid>
<Grid gutter={"lg"}>
<Grid.Col span={{
base: 2,
xl: 1
}}>
<BsCalendarDate size={25} color={WARNA.biruTua} />
</Grid.Col>
<Grid.Col span={{
base: 10,
xl: 11
}}>
<Text>{moment(isDataCalender?.dateStart).format('LL')}</Text>
</Grid.Col>
</Grid>
<Grid gutter={"lg"}>
<Grid.Col span={{
base: 2,
xl: 1
}}>
<LuClock size={25} color={WARNA.biruTua} />
</Grid.Col>
<Grid.Col span={{
base: 10,
xl: 11
}}>
<Text>{isDataCalender?.timeStart} | {isDataCalender?.timeEnd} </Text>
</Grid.Col>
</Grid>
<Grid gutter={"lg"}>
<Grid.Col span={{
base: 2,
xl: 1
}}>
<BsCalendarDate size={25} color={WARNA.biruTua} />
</Grid.Col>
<Grid.Col span={{
base: 10,
xl: 11
}}>
<Text>
{isDataCalender?.repeatEventTyper.toString() === '1' ? 'Acara 1 Kali' :
isDataCalender?.repeatEventTyper.toString() === '2' ? 'Hari Kerja (senin - jumat)' :
isDataCalender?.repeatEventTyper.toString() === '3' ? 'Minggu' :
isDataCalender?.repeatEventTyper.toString() === '4' ? 'Bulanan' :
isDataCalender?.repeatEventTyper.toString() === '5' ? 'Tahunan' :
''}
</Text>
</Grid.Col>
</Grid>
<Grid gutter={"lg"}>
<Grid.Col span={{
base: 2,
xl: 1
}}>
<LuLink size={25} color={WARNA.biruTua} />
</Grid.Col>
<Grid.Col span={{
base: 10,
xl: 11
}}>
{isDataCalender?.linkMeet ? (
<Group justify='space-between'>
<Box w={{
base: 170,
xl: 380
}}>
<Text lineClamp={1}>{isDataCalender?.linkMeet}</Text>
</Box>
<CopyButton value={String(isDataCalender?.linkMeet)} timeout={2000}>
{({ copied, copy }) => (
<Tooltip label={copied ? 'Copied' : 'Copy'} withArrow position="right">
<ActionIcon color={copied ? 'teal' : WARNA.biruTua} variant="subtle" onClick={copy}>
{copied ? (
<FaCheck size={20} />
) : (
<TbCopy size={20} />
)}
</ActionIcon>
</Tooltip>
)}
</CopyButton>
</Group>
) : (
<Text>-</Text>
)
}
</Grid.Col>
</Grid>
<Grid gutter={"lg"}>
<Grid.Col span={{
base: 2,
xl: 1
}}>
<MdOutlineFormatListBulleted size={25} color={WARNA.biruTua} />
</Grid.Col>
<Grid.Col span={{
base: 10,
xl: 11
}}>
{isDataCalender?.desc ? (
<Spoiler maxHeight={80} showLabel="Lebih banyak" hideLabel="Lebih dikit">
<Text>{isDataCalender?.desc}</Text>
</Spoiler>
) : (
<Text>-</Text>
)
}
</Grid.Col>
</Grid>
</Stack>
</Box>
}
@@ -157,7 +224,7 @@ export default function DetailEventDivision() {
px={20}
pt={20}
>
{isLengthMember == 0? (
{isLengthMember == 0 ? (
<Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '30vh' }}>
<Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada anggota</Text>
</Box>
@@ -165,24 +232,32 @@ export default function DetailEventDivision() {
<Box>
{isDataAnggota.map((v, i) => {
return (
<Flex
justify={"space-between"}
align={"center"}
mb={20}
key={i}
>
<Group>
<Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" />
<Box>
<Text c={WARNA.biruTua} fw={"bold"}>
{v.name}
</Text>
<Text c={"#5A687D"} fz={14}>
{v.email}
</Text>
</Box>
</Group>
</Flex>
<Box my={10} key={i}>
<Grid align='center' gutter={"lg"}>
<Grid.Col span={{
base: 3,
xl: 2
}}>
<Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" />
</Grid.Col>
<Grid.Col span={{
base: 9,
xl: 10
}}>
<Flex justify='space-between' align={"center"}>
<Flex direction={'column'} align="flex-start" justify="flex-start">
<Text lineClamp={1}>{v.name}</Text>
<Text c={"#5A687D"} fz={14} lineClamp={1}>
{v.email}
</Text>
</Flex>
</Flex>
</Grid.Col>
</Grid>
<Box mt={10}>
<Divider size={"xs"} />
</Box>
</Box>
);
})}
</Box>

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

@@ -91,20 +91,20 @@ export default function HistoryDivisionCalender() {
:
isData.map((v, i) => {
return (
<Grid key={i}>
<Grid.Col span={2}>
<Grid key={i} align='center'>
<Grid.Col span={3}>
<Flex justify={"center"} direction={'column'}>
<Text ta={"center"} fz={20} fw={'bold'}>{moment(v.dateStart).format('D MMM')}</Text>
<Text ta={"center"} fz={15}>{moment(v.dateStart).format('dddd')}</Text>
</Flex>
</Grid.Col>
<Grid.Col span={'auto'}>
<Grid.Col span={9}>
{v.data.map((d, x) => {
return (
<Box mb={10} key={x}
<Box mb={9} key={x}
onClick={() => router.push(`/division/${param.id}/calender/${d.id}`)}
>
<Text fw={"bold"}>{d.title}</Text>
<Text fw={"bold"} lineClamp={1}>{d.title}</Text>
<Text>{d.timeStart} | {d.timeEnd}</Text>
</Box>
)

46
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, rem, Select, SimpleGrid, Stack, Text, Textarea, TextInput } from '@mantine/core';
import { Avatar, Box, Button, Divider, Flex, Grid, 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';
@@ -85,7 +85,7 @@ export default function NavbarCreateDivisionCalender() {
<Box>
<LayoutNavbarNew back={`/division/${param.id}/calender/`} title="tambah kalender" menu />
<Box p={20}>
<Stack>
<Stack pb={100}>
<TextInput
required
styles={{
@@ -268,24 +268,32 @@ export default function NavbarCreateDivisionCalender() {
member.get().map((v: any, i: any) => {
return (
<Flex
justify={"space-between"}
align={"center"}
mt={20}
key={i}
>
<Group>
<Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" />
<Box>
<Text c={WARNA.biruTua} fw={"bold"}>
{v.name}
<Box key={i}>
<Grid align='center' mt={10}
>
<Grid.Col span={9}>
<Group>
<Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" />
<Box w={{
base: 140,
xl: 270
}}>
<Text c={WARNA.biruTua} fw={"bold"} lineClamp={1}>
{v.name}
</Text>
</Box>
</Group>
</Grid.Col>
<Grid.Col span={3}>
<Text c={WARNA.biruTua} fw={"bold"} ta={'end'}>
Anggota
</Text>
</Box>
</Group>
<Text c={WARNA.biruTua} fw={"bold"}>
Anggota
</Text>
</Flex>
</Grid.Col>
</Grid>
<Box mt={10}>
<Divider size={"xs"} />
</Box>
</Box>
);
})}
</Box>

34
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, Skeleton, Stack, Text, Textarea, TextInput } from '@mantine/core';
import { Avatar, Box, Button, Divider, Flex, Grid, 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';
@@ -305,7 +305,7 @@ export default function UpdateDivisionCalender() {
borderRadius: 10,
}}
>
<Text>Tambah Anggota *</Text>
<Text>Tambah Anggota</Text>
<IoIosArrowDropright size={25} />
</Group>
</Box>
@@ -332,24 +332,22 @@ export default function UpdateDivisionCalender() {
memberUser.get().map((v: any, i: any) => {
return (
<Flex
justify={"space-between"}
align={"center"}
mt={20}
key={i}
>
<Group>
<Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" />
<Box>
<Text c={WARNA.biruTua} fw={"bold"}>
<Box key={i}>
<Grid align='center' mt={10}
>
<Grid.Col span={3}>
<Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" />
</Grid.Col>
<Grid.Col span={9}>
<Text c={WARNA.biruTua} fw={"bold"} lineClamp={1}>
{v.name}
</Text>
</Box>
</Group>
<Text c={WARNA.biruTua} fw={"bold"}>
Anggota
</Text>
</Flex>
</Grid.Col>
</Grid>
<Box mt={10}>
<Divider size={"xs"} />
</Box>
</Box>
);
})}
</Box>

80
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, rem, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
import { Avatar, Box, Button, Center, Divider, Flex, Grid, 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';
@@ -11,38 +11,6 @@ import toast from 'react-hot-toast';
import { useShallowEffect } from '@mantine/hooks';
import { FaCheck } from 'react-icons/fa6';
const dataUser = [
{
id: 1,
img: "https://i.pravatar.cc/500?img=3",
name: "Doni Setiawan",
},
{
id: 2,
img: "https://i.pravatar.cc/500?img=10",
name: "Ilham Udin",
},
{
id: 3,
img: "https://i.pravatar.cc/500?img=11",
name: "Didin Anang",
},
{
id: 4,
img: "https://i.pravatar.cc/500?img=1",
name: "Angga Saputra",
},
{
id: 5,
img: "https://i.pravatar.cc/500?img=2",
name: "Marcel Widianto",
},
{
id: 6,
img: "https://i.pravatar.cc/500?img=7",
name: "Bagas Nusantara",
},
];
export default function UpdateListUsers({ onClose }: { onClose: (val: any) => void }) {
const router = useRouter()
@@ -83,7 +51,7 @@ export default function UpdateListUsers({ onClose }: { onClose: (val: any) => vo
if (selectedFiles.some((i: any) => i.idUser == isData[index].idUser)) {
setSelectedFiles(selectedFiles.filter((i: any) => i.idUser != isData[index].idUser))
} else {
setSelectedFiles([...selectedFiles, { idUser: isData[index].idUser, name: isData[index].name }])
setSelectedFiles([...selectedFiles, { idUser: isData[index].idUser, name: isData[index].name, img: isData[index].img }])
}
};
@@ -95,7 +63,7 @@ export default function UpdateListUsers({ onClose }: { onClose: (val: any) => vo
for (let index = 0; index < isData.length; index++) {
if (!selectedFiles.some((i: any) => i.idUser == isData[index].idUser)) {
const newArr = {
idUser: isData[index].idUser, name: isData[index].name
idUser: isData[index].idUser, name: isData[index].name, img: isData[index].img
}
setSelectedFiles((selectedFiles: any) => [...selectedFiles, newArr])
}
@@ -138,34 +106,30 @@ export default function UpdateListUsers({ onClose }: { onClose: (val: any) => vo
</Box>
))
:
<Box mt={20}>
<Box mt={20} mb={100}>
{isData.map((v, i) => {
const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser);
return (
<Box mb={15} key={i} onClick={() => handleFileClick(i)}>
<Flex justify={"space-between"} align={"center"}>
<Group>
<Grid align='center' gutter={{
base: 60,
xl: "xs"
}}>
<Grid.Col span={2}>
<Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" />
<Text style={{
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
}}>
{v.name}
</Text>
</Group>
<Text
style={{
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
paddingLeft: 20,
}}
>
{isSelected ? <FaCheck style={{ marginRight: 10 }} /> : ""}
</Text>
</Flex>
<Divider my={"md"} />
</Grid.Col>
<Grid.Col span={10}>
<Flex justify='space-between' align={"center"}>
<Flex direction={'column'} align="flex-start" justify="flex-start">
<Text lineClamp={1}>{v.name}</Text>
</Flex>
{isSelected ? <FaCheck /> : null}
</Flex>
</Grid.Col>
</Grid>
<Box mt={10}>
<Divider size={"xs"} />
</Box>
</Box>
);
})}