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

Merge pull request #182 from bipproduction/lukman/3-september-2024

Browse Source 
style : update ui
This commit is contained in:
Amalia
2024-09-03 14:30:25 +08:00
committed by GitHub
parent b437d9686b bc9eb2fc1d
commit 10d9cd54f9
14 changed files with 338 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -75,7 +75,7 @@ export default function CreateAnnouncement() {
return ( return (
<Box> <Box>
<LayoutNavbarNew back="" title="Tambah Pengumuman" menu={<></>} /> <LayoutNavbarNew back="/announcement/" title="Tambah Pengumuman" menu={<></>} />
<Stack <Stack
p={20} p={20}
> >

152
src/module/announcement/ui/create_users_announcement.tsx
View File

@@ -1,7 +1,7 @@
"use client"; "use client";
import { LayoutNavbarNew, WARNA } from '@/module/_global'; import { LayoutNavbarNew, WARNA } from '@/module/_global';
import { funGetGroupDivision } from '@/module/group/lib/api_group'; 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 { useShallowEffect } from '@mantine/hooks';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { FaCheck } from 'react-icons/fa'; import { FaCheck } from 'react-icons/fa';
@@ -22,6 +22,7 @@ export default function CreateUsersAnnouncement({ onClose }: { onClose: (val: an
const [selectAll, setSelectAll] = useState(false); const [selectAll, setSelectAll] = useState(false);
const [isData, setIsData] = useState<GroupData[]>([]) const [isData, setIsData] = useState<GroupData[]>([])
const memberGroup = useHookstate(globalMemberAnnouncement) const memberGroup = useHookstate(globalMemberAnnouncement)
const [loading, setLoading] = useState(false)
const handleCheck = (groupId: string, divisionId: string) => { const handleCheck = (groupId: string, divisionId: string) => {
const newChecked = { ...checked }; const newChecked = { ...checked };
@@ -70,6 +71,7 @@ export default function CreateUsersAnnouncement({ onClose }: { onClose: (val: an
}; };
async function getData() { async function getData() {
setLoading(true)
const response = await funGetGroupDivision() const response = await funGetGroupDivision()
setIsData(response.data) setIsData(response.data)
@@ -81,6 +83,8 @@ export default function CreateUsersAnnouncement({ onClose }: { onClose: (val: an
setChecked(formatArray) setChecked(formatArray)
} }
setLoading(false)
} }
const handleSubmit = () => { const handleSubmit = () => {
@@ -121,75 +125,89 @@ export default function CreateUsersAnnouncement({ onClose }: { onClose: (val: an
Pilih Semua Pilih Semua
</Text> </Text>
</Group> </Group>
{isData.map((item) => ( {loading ?
<Stack mb={30} key={item.id}> Array(6)
<Group onClick={() => handleGroupCheck(item.id)} justify='space-between' align='center'> .fill(null)
<Text .map((_, i) => (
style={{ <Box key={i}>
cursor: 'pointer', <Skeleton mt={20} h={20}/>
display: 'flex', <Skeleton mt={20} h={20} ml={20}/>
alignItems: 'center', <Skeleton mt={20} h={20} ml={20}/>
}} <Skeleton mt={20} h={20} ml={20}/>
fw={checked[item.id] && checked[item.id].length === item.Division.length ? 'bold' : 'normal'} </Box>
> ))
{item.name} :
</Text> isData.map((item) => (
<Text <Stack mb={30} key={item.id}>
> <Group onClick={() => handleGroupCheck(item.id)} justify='space-between' align='center'>
{checked[item.id] && checked[item.id].length === item.Division.length ? <FaCheck style={{ marginRight: 10 }} /> <Text
: (checked[item.id] && checked[item.id].length > 0 && checked[item.id].length < item.Division.length) ? <FaMinus style={{ marginRight: 10 }} /> : ""} style={{
</Text> cursor: 'pointer',
</Group> display: 'flex',
<Divider /> alignItems: 'center',
{item.Division.map((division) => ( }}
<Box key={division.id}> fw={checked[item.id] && checked[item.id].length === item.Division.length ? 'bold' : 'normal'}
<Group onClick={() => handleCheck(item.id, division.id)} justify='space-between' align='center'> lineClamp={1}
<Text >
style={{ {item.name}
cursor: 'pointer', </Text>
display: 'flex', <Text
alignItems: 'center', >
paddingLeft: 20, {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>
{division.name} </Group>
</Text> <Divider />
<Text {item.Division.map((division) => (
style={{ <Box key={division.id}>
cursor: 'pointer', <Group onClick={() => handleCheck(item.id, division.id)} justify='space-between' align='center'>
display: 'flex', <Box w={{
alignItems: 'center', base: 280,
paddingLeft: 20, xl: 430
}} }}>
> <Text truncate="end" pl={20}>
{checked[item.id] && checked[item.id].includes(division.id) ? <FaCheck style={{ marginRight: 10 }} /> : ""} {division.name}
</Text> </Text>
</Group> </Box>
<Box pt={15}> <Text
<Divider /> 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> </Box>
</Box>
))} ))}
</Stack> </Stack>
))} ))
}
<Box mt="xl"> </Box>
<Button <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
color="white" maxWidth: rem(550),
bg={WARNA.biruTua} zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`,
size="lg" }}>
radius={30} <Button
fullWidth color="white"
onClick={() => { bg={WARNA.biruTua}
handleSubmit()
}}
>
Simpan
</Button>
</Box>
size="lg"
radius={30}
fullWidth
onClick={() => {
handleSubmit()
}}
>
Simpan
</Button>
</Box> </Box>
</div> </div>
); );

32
src/module/announcement/ui/detail_announcement.tsx
View File

@@ -1,5 +1,5 @@
"use client" "use client"
import { ActionIcon, Box, Flex, Grid, Group, List, Skeleton, Spoiler, Stack, Text } from "@mantine/core"; import { ActionIcon, Box, Center, Flex, Grid, Group, List, Skeleton, Spoiler, Stack, Text } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks"; import { useShallowEffect } from "@mantine/hooks";
import { useState } from "react"; import { useState } from "react";
import { BsCardText } from "react-icons/bs"; import { BsCardText } from "react-icons/bs";
@@ -78,15 +78,25 @@ export default function DetailAnnouncement({ id }: { id: string }) {
</Stack> </Stack>
: :
<Stack> <Stack>
<Group>
<TfiAnnouncement size={25} />
<Text fw={'bold'}>{isData?.title}</Text>
</Group>
<Grid gutter={'md'}> <Grid gutter={'md'}>
<Grid.Col span={1}> <Grid.Col span={2}>
<BsCardText size={25} /> <Center>
<TfiAnnouncement size={30} />
</Center>
</Grid.Col> </Grid.Col>
<Grid.Col span={11}> <Grid.Col span={10}>
<Spoiler maxHeight={100} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
<Text fw={'bold'}>{isData?.title}</Text>
</Spoiler>
</Grid.Col>
</Grid>
<Grid gutter={'md'}>
<Grid.Col span={2}>
<Center>
<BsCardText size={30} />
</Center>
</Grid.Col>
<Grid.Col span={10}>
<Spoiler maxHeight={100} showLabel="Lebih banyak" hideLabel="Lebih sedikit"> <Spoiler maxHeight={100} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
<Text>{isData?.desc}</Text> <Text>{isData?.desc}</Text>
</Spoiler> </Spoiler>
@@ -108,10 +118,12 @@ export default function DetailAnnouncement({ id }: { id: string }) {
return ( return (
<Box key={i} mb={10}> <Box key={i} mb={10}>
<Text>{isMember[v]?.[0].group}</Text> <Text>{isMember[v]?.[0].group}</Text>
<List> <List ml={10}>
{ {
isMember[v].map((item: any, x: any) => { isMember[v].map((item: any, x: any) => {
return <List.Item key={x}>{item.division}</List.Item> return <List.Item key={x}>
<Text lineClamp={1}>{item.division}</Text>
</List.Item>
}) })
} }
</List> </List>

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

@@ -1,23 +1,25 @@
'use client' 'use client'
import { LayoutNavbarNew, WARNA } from "@/module/_global"; import { LayoutNavbarNew, WARNA } from "@/module/_global";
import LayoutModal from "@/module/_global/layout/layout_modal"; import LayoutModal from "@/module/_global/layout/layout_modal";
import { Box, Button, Flex, List, rem, Skeleton, Stack, Text, Textarea, TextInput } from "@mantine/core"; import { Box, Button, Flex, Group, List, rem, Skeleton, Stack, Text, Textarea, TextInput } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks"; import { useShallowEffect } from "@mantine/hooks";
import { useState } from "react"; import { useState } from "react";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
import { HiOutlineChevronRight } from "react-icons/hi2"; import { HiOutlineChevronRight } from "react-icons/hi2";
import { funEditAnnouncement, funGetAnnouncementById } from "../lib/api_announcement"; import { funEditAnnouncement, funGetAnnouncementById } from "../lib/api_announcement";
import { useParams } from "next/navigation"; import { useParams, useRouter } from "next/navigation";
import { useHookstate } from "@hookstate/core"; import { useHookstate } from "@hookstate/core";
import { globalMemberEditAnnouncement } from "../lib/val_announcement"; import { globalMemberEditAnnouncement } from "../lib/val_announcement";
import { GroupData, GroupDataEditAnnouncement } from "../lib/type_announcement"; import { GroupData, GroupDataEditAnnouncement } from "../lib/type_announcement";
import EditChooseMember from "./edit_choose_member"; import EditChooseMember from "./edit_choose_member";
import { IoIosArrowForward } from "react-icons/io";
export default function EditAnnouncement() { export default function EditAnnouncement() {
const [isOpen, setOpen] = useState(false) const [isOpen, setOpen] = useState(false)
const [isChooseDivisi, setChooseDivisi] = useState(false) const [isChooseDivisi, setChooseDivisi] = useState(false)
const param = useParams<{ id: string }>() const param = useParams<{ id: string }>()
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true)
const router = useRouter()
const [touched, setTouched] = useState({ const [touched, setTouched] = useState({
title: false, title: false,
desc: false desc: false
@@ -89,6 +91,7 @@ export default function EditAnnouncement() {
if (response.success) { if (response.success) {
toast.success(response.message) toast.success(response.message)
router.push(`/announcement/${param.id}`)
} else { } else {
toast.error(response.message) toast.error(response.message)
} }
@@ -121,7 +124,7 @@ export default function EditAnnouncement() {
<> <>
<Skeleton height={40} mt={20} radius={30} /> <Skeleton height={40} mt={20} radius={30} />
<Skeleton height={75} mt={20} radius={10} /> <Skeleton height={75} mt={20} radius={10} />
<Skeleton height={40} mt={10} radius={30} /> <Skeleton height={40} mt={10} radius={10} />
</> </>
: :
<> <>
@@ -173,9 +176,22 @@ export default function EditAnnouncement() {
} }
/> />
<Button onClick={() => { setChooseDivisi(true) }} rightSection={<HiOutlineChevronRight size={14} />} variant="default" fullWidth radius={30} size="md" mt={10}> <Box pt={10} w={"100%"}>
Pilih Divisi <Group justify="space-between" style={{
</Button> border: `1px solid ${WARNA.biruTua}`,
maxWidth: rem(550),
padding: 10,
borderRadius: 10
}}
onClick={() => { setChooseDivisi(true) }}
>
<Text size="sm">
Tambah divisi penerima pengumuman
</Text>
<IoIosArrowForward />
</Group>
</Box>
</> </>
} }
@@ -197,11 +213,17 @@ export default function EditAnnouncement() {
return ( return (
<Box key={i} mt={10}> <Box key={i} mt={10}>
<Text fw={"bold"}>{v.name}</Text> <Text fw={"bold"}>{v.name}</Text>
<Box pl={20}> <Box pl={20} pr={10}>
<Flex direction={"column"} gap={"md"}> <Flex direction={"column"} gap={"md"}>
{v.Division.map((division: any) => ( <List>
<li key={division.id}>{division.name}</li> {
))} v.Division.map((division: any) => {
return <List.Item key={division.id}>
<Text lineClamp={1}>{division.name}</Text>
</List.Item>
})
}
</List>
</Flex> </Flex>
</Box> </Box>
</Box> </Box>

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

@@ -145,6 +145,7 @@ export default function EditChooseMember({ onClose }: { onClose: (val: any) => v
alignItems: 'center', alignItems: 'center',
}} }}
fw={checked[item.id] && checked[item.id].length === item.Division.length ? 'bold' : 'normal'} fw={checked[item.id] && checked[item.id].length === item.Division.length ? 'bold' : 'normal'}
lineClamp={1}
> >
{item.name} {item.name}
</Text> </Text>
@@ -158,16 +159,14 @@ export default function EditChooseMember({ onClose }: { onClose: (val: any) => v
{item.Division.map((division) => ( {item.Division.map((division) => (
<Box key={division.id}> <Box key={division.id}>
<Group onClick={() => handleCheck(item.id, division.id)} justify='space-between' align='center'> <Group onClick={() => handleCheck(item.id, division.id)} justify='space-between' align='center'>
<Text <Box w={{
style={{ base: 280,
cursor: 'pointer', xl: 430
display: 'flex', }}>
alignItems: 'center', <Text truncate="end" pl={20}>
paddingLeft: 20, {division.name}
}} </Text>
> </Box>
{division.name}
</Text>
<Text <Text
style={{ style={{
cursor: 'pointer', cursor: 'pointer',

20
src/module/announcement/ui/list_announcement.tsx
View File

@@ -83,12 +83,22 @@ export default function ListAnnouncement() {
</Center> </Center>
</Grid.Col> </Grid.Col>
<Grid.Col span={10}> <Grid.Col span={10}>
<Group justify='space-between' mb={5} onClick={() => { <Grid onClick={() => {
router.push(`/announcement/${v.id}`) router.push(`/announcement/${v.id}`)
}}> }} mb={10}>
<Text fw={'bold'} c={WARNA.biruTua}>{v.title}</Text> <Grid.Col span={{
<Text fw={'lighter'} c={WARNA.biruTua} fz={13}>{v.createdAt}</Text> base: 7,
</Group> xl: 8
}}>
<Text fw={'bold'} c={WARNA.biruTua} lineClamp={1}>{v.title}</Text>
</Grid.Col>
<Grid.Col span={{
base: 5,
xl: 4
}}>
<Text ta={"end"} fw={'lighter'} c={WARNA.biruTua} fz={13}>{v.createdAt}</Text>
</Grid.Col>
</Grid>
{/* <Text c={WARNA.biruTua} lineClamp={2}>{v.desc}</Text> */} {/* <Text c={WARNA.biruTua} lineClamp={2}>{v.desc}</Text> */}
<Spoiler maxHeight={50} showLabel="Lebih banyak" hideLabel="Lebih sedikit"> <Spoiler maxHeight={50} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
<Text c={WARNA.biruTua} onClick={() => { <Text c={WARNA.biruTua} onClick={() => {

2
src/module/announcement/ui/navbar_detail_announcement.tsx
View File

@@ -11,7 +11,7 @@ export default function NavbarDetailAnnouncement() {
const router = useRouter() const router = useRouter()
return ( return (
<Box> <Box>
<LayoutNavbarNew back="" title="Pengumuman" <LayoutNavbarNew back="/announcement/" title="Pengumuman"
menu={ menu={
<ActionIcon onClick={() => setOpenDrawer(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings"> <ActionIcon onClick={() => setOpenDrawer(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiMenu size={20} color='white' /> <HiMenu size={20} color='white' />

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

@@ -3,7 +3,7 @@ import { LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global';
import LayoutModal from '@/module/_global/layout/layout_modal'; import LayoutModal from '@/module/_global/layout/layout_modal';
import { funGetUserByCookies } from '@/module/auth'; import { funGetUserByCookies } from '@/module/auth';
import { funGetAllmember, TypeUser } from '@/module/user'; import { funGetAllmember, TypeUser } from '@/module/user';
import { Avatar, Box, Button, Divider, Group, rem, Stack, Text, TextInput } from '@mantine/core'; import { Avatar, Box, Button, Divider, Flex, Grid, Group, rem, Stack, Text, TextInput } from '@mantine/core';
import { useParams, useRouter } from 'next/navigation'; import { useParams, useRouter } from 'next/navigation';
import React, { useState } from 'react'; import React, { useState } from 'react';
import toast from 'react-hot-toast'; import toast from 'react-hot-toast';
@@ -103,56 +103,63 @@ export default function CreateAnggotaDivision() {
/> />
</Stack> </Stack>
{loading ? {loading ?
Array(8) Array(8)
.fill(null) .fill(null)
.map((_, i) => ( .map((_, i) => (
<Box key={i}> <Box key={i}>
<SkeletonSingle/> <SkeletonSingle />
</Box> </Box>
)) ))
: :
<Box mt={20} mb={100}> <Box mt={20} mb={100}>
{dataMember.map((v: any, index: any) => { {dataMember.map((v: any, index: any) => {
const isSelected = selectedFiles.some((i: any) => i.idUser == dataMember[index].id) const isSelected = selectedFiles.some((i: any) => i.idUser == dataMember[index].id)
const found = memberDb.some((i: any) => i.idUser == v.id) const found = memberDb.some((i: any) => i.idUser == v.id)
return ( return (
<Box my={10} key={index} onClick={() => (!found) ? handleFileClick(index) : null}> <Box my={10} key={index} onClick={() => (!found) ? handleFileClick(index) : null}>
<Group justify='space-between' align='center'> <Grid align='center' gutter={{
<Group> base: 60,
<Avatar src={`/api/file/img?cat=user&file=${v.img}`} alt="it's me" size="lg" /> xl: "xs"
<Stack align="flex-start" justify="flex-start"> }}>
<Text>{v.name}</Text> <Grid.Col span={2}>
<Text c={"dimmed"}>{(found) ? "sudah menjadi anggota divisi" : ""}</Text> <Avatar src={`/api/file/img?cat=user&file=${v.img}`} alt="it's me" size="lg" />
</Stack> </Grid.Col>
</Group> <Grid.Col span={10}>
{isSelected ? <FaCheck /> : null} <Flex justify='space-between' align={"center"}>
</Group> <Flex direction={'column'} align="flex-start" justify="flex-start">
<Box mt={10}> <Text lineClamp={1}>{v.name}</Text>
<Divider size={"xs"} /> <Text c={"dimmed"}>{(found) ? "sudah menjadi anggota divisi" : ""}</Text>
</Flex>
{isSelected ? <FaCheck/> : null}
</Flex>
</Grid.Col>
</Grid>
<Box mt={10}>
<Divider size={"xs"} />
</Box>
</Box> </Box>
</Box> )
) })}
})} </Box>
</Box>
} }
</Box> </Box>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{ <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550), maxWidth: rem(550),
zIndex: 999, zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`, backgroundColor: `${WARNA.bgWhite}`,
}}> }}>
<Button <Button
color="white" color="white"
bg={WARNA.biruTua} bg={WARNA.biruTua}
size="lg" size="lg"
radius={30} radius={30}
fullWidth fullWidth
onClick={() => { setOpen(true) }} onClick={() => { setOpen(true) }}
> >
Simpan Simpan
</Button> </Button>
</Box> </Box>
<LayoutModal opened={isOpen} onClose={() => setOpen(false)} <LayoutModal opened={isOpen} onClose={() => setOpen(false)}
description="Apakah Anda yakin ingin menambahkan anggota divisi?" description="Apakah Anda yakin ingin menambahkan anggota divisi?"
onYes={(val) => { onYes={(val) => {

38
src/module/division_new/ui/information_division.tsx
View File

@@ -1,6 +1,6 @@
"use client" "use client"
import { LayoutDrawer, LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global'; import { LayoutDrawer, LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global';
import { ActionIcon, Avatar, Box, Button, Divider, Flex, Group, Skeleton, Stack, Text } from '@mantine/core'; import { ActionIcon, Avatar, Box, Button, Divider, Flex, Grid, Group, Skeleton, Stack, Text } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks'; import { useShallowEffect } from '@mantine/hooks';
import { useParams, useRouter } from 'next/navigation'; import { useParams, useRouter } from 'next/navigation';
import React, { useState } from 'react'; import React, { useState } from 'react';
@@ -184,24 +184,28 @@ export default function InformationDivision() {
: member.map((v, i) => { : member.map((v, i) => {
return ( return (
<Box key={i}> <Box key={i}>
<Flex <Grid align='center' mt={10}
justify={"space-between"}
align={"center"}
mt={10}
onClick={() => { onClickMember(v.id, (v.isAdmin) ? true : false), setChooseMemberName(v.name) }} onClick={() => { onClickMember(v.id, (v.isAdmin) ? true : false), setChooseMemberName(v.name) }}
> >
<Group> <Grid.Col span={9}>
<Avatar src={`/api/file/img?cat=user&file=${v.img}`} alt="it's me" size="lg" /> <Group>
<Box> <Avatar src={`/api/file/img?cat=user&file=${v.img}`} alt="it's me" size="lg" />
<Text c={WARNA.biruTua} fw={"bold"}> <Box w={{
{v.name} base: 140,
</Text> xl: 270
</Box> }}>
</Group> <Text c={WARNA.biruTua} fw={"bold"} lineClamp={1}>
<Text c={WARNA.biruTua} fw={"bold"}> {v.name}
{(v.isAdmin) ? 'Admin' : 'Anggota'} </Text>
</Text> </Box>
</Flex> </Group>
</Grid.Col>
<Grid.Col span={3}>
<Text c={WARNA.biruTua} fw={"bold"} ta={'end'}>
{(v.isAdmin) ? 'Admin' : 'Anggota'}
</Text>
</Grid.Col>
</Grid>
<Box mt={10}> <Box mt={10}>
<Divider size={"xs"} /> <Divider size={"xs"} />
</Box> </Box>

63
src/module/division_new/ui/list_division.tsx
View File

@@ -150,26 +150,45 @@ export default function ListDivision() {
data?.map((v: any, i: any) => { data?.map((v: any, i: any) => {
return ( return (
<Box key={i}> <Box key={i}>
<Group justify="space-between" mb={10} onClick={() => router.push(`/division/${v.id}`)}> <Grid align='center'>
<Group> <Grid.Col span={{
<Center> base: 2,
<ActionIcon xl: 1
variant="gradient" }}>
size={50} <Group onClick={() => router.push(`/division/${v.id}`)}>
aria-label="Gradient action icon" <Center>
radius={100} <ActionIcon
gradient={{ variant="gradient"
from: '#DFDA7C', size={50}
to: '#F2AF46', aria-label="Gradient action icon"
deg: 174 radius={100}
}} gradient={{
> from: '#DFDA7C',
<HiMiniUserGroup size={25} color={WARNA.biruTua} /> to: '#F2AF46',
</ActionIcon> deg: 174
</Center> }}
<Text>{v.name}</Text> >
</Group> <HiMiniUserGroup size={25} color={WARNA.biruTua} />
</Group> </ActionIcon>
</Center>
</Group>
</Grid.Col>
<Grid.Col span={{
base: 10,
xl: 11
}}>
<Box>
<Box w={{
base: 280,
xl: 430
}}>
<Text truncate="end" pl={20}>
{v.name}
</Text>
</Box>
</Box>
</Grid.Col>
</Grid>
<Divider my="sm" /> <Divider my="sm" />
</Box> </Box>
); );
@@ -193,8 +212,8 @@ export default function ListDivision() {
<Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`/division/${v.id}`)}> <Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`/division/${v.id}`)}>
<Card.Section> <Card.Section>
<Box h={120} bg={WARNA.biruTua}> <Box h={120} bg={WARNA.biruTua}>
<Flex justify={'center'} align={'center'} h={"100%"}> <Flex justify={'center'} align={'center'} h={"100%"} pl={20} pr={20}>
<Title order={3} c={"white"}>{v.name}</Title> <Title order={3} c={"white"} ta={"center"} lineClamp={2}>{v.name}</Title>
</Flex> </Flex>
</Box> </Box>
</Card.Section> </Card.Section>

4
src/module/home/ui/list_divisi.tsx
View File

@@ -63,8 +63,8 @@ export default function ListDivisi() {
<Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`/division/${v.id}`)}> <Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`/division/${v.id}`)}>
<Card.Section> <Card.Section>
<Box h={120} bg={`linear-gradient(180deg, rgba(223,218,124,1) 25%, rgba(242,175,70,1) 100%)`}> <Box h={120} bg={`linear-gradient(180deg, rgba(223,218,124,1) 25%, rgba(242,175,70,1) 100%)`}>
<Flex justify={'center'} align={'center'} h={"100%"}> <Flex justify={'center'} align={'center'} h={"100%"} pl={20} pr={20}>
<Title order={3} c={WARNA.biruTua}>{v.name}</Title> <Title order={3} c={WARNA.biruTua} ta={"center"} lineClamp={2}>{v.name}</Title>
</Flex> </Flex>
</Box> </Box>
</Card.Section> </Card.Section>

4
src/module/home/ui/list_project.tsx
View File

@@ -62,8 +62,8 @@ export default function ListProjects() {
<Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`/project/${v.id}`)}> <Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`/project/${v.id}`)}>
<Card.Section> <Card.Section>
<Box h={120} bg={WARNA.biruTua}> <Box h={120} bg={WARNA.biruTua}>
<Flex justify={'center'} align={'center'} h={"100%"}> <Flex justify={'center'} align={'center'} h={"100%"} pl={20} pr={20}>
<Title order={3} c={"white"}>{v.title}</Title> <Title order={3} c={"white"} ta={"center"} lineClamp={2}>{v.title}</Title>
</Flex> </Flex>
</Box> </Box>
</Card.Section> </Card.Section>

77
src/module/project/ui/list_project.tsx
View File

@@ -121,35 +121,50 @@ export default function ListProject() {
{isData.map((v, i) => { {isData.map((v, i) => {
return ( return (
<Box key={i}> <Box key={i}>
<Group justify="space-between" mb={10} onClick={() => router.push(`/project/${v.id}`)}> <Grid align='center' gutter={10}>
<Group> <Grid.Col span={1}>
<Center> <Group onClick={() => router.push(`/project/${v.id}`)}>
<ActionIcon <Center>
variant="gradient" <ActionIcon
size={50} variant="gradient"
aria-label="Gradient action icon" size={50}
radius={100} aria-label="Gradient action icon"
gradient={{ radius={100}
from: '#DFDA7C', gradient={{
to: '#F2AF46', from: '#DFDA7C',
deg: 174 to: '#F2AF46',
}} deg: 174
> }}
<HiMiniPresentationChartBar size={25} color={WARNA.biruTua} /> >
</ActionIcon> <HiMiniPresentationChartBar size={25} color={WARNA.biruTua} />
</Center> </ActionIcon>
<Text>{v.title}</Text> </Center>
</Group> </Group>
<Box> </Grid.Col>
<RiCircleFill size={12} color={ <Grid.Col span={11}>
v.status === 0 ? '#1372C4' : <Group justify='space-between' align='center'>
v.status === 1 ? '#C5771A' : <Box>
v.status === 2 ? '#0B6025' : <Box w={{
v.status === 3 ? '#BB1F1F' : base: 280,
"" xl: 430
} /> }}>
</Box> <Text truncate="end" pl={20}>
</Group> {v.title}
</Text>
</Box>
{/* <Text lineClamp={1}></Text> */}
</Box>
<RiCircleFill size={12} color={
v.status === 0 ? '#1372C4' :
v.status === 1 ? '#C5771A' :
v.status === 2 ? '#0B6025' :
v.status === 3 ? '#BB1F1F' :
""
} />
</Group>
</Grid.Col>
</Grid>
<Divider my="sm" /> <Divider my="sm" />
</Box> </Box>
); );
@@ -163,8 +178,8 @@ export default function ListProject() {
<Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`/project/${v.id}`)}> <Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`/project/${v.id}`)}>
<Card.Section> <Card.Section>
<Box h={120} bg={WARNA.biruTua}> <Box h={120} bg={WARNA.biruTua}>
<Flex justify={'center'} align={'center'} h={"100%"}> <Flex justify={'center'} align={'center'} h={"100%"} pl={20} pr={20}>
<Title order={3} c={"white"}>{v.title}</Title> <Title order={3} c={"white"} ta={"center"} lineClamp={2}>{v.title}</Title>
</Flex> </Flex>
</Box> </Box>
</Card.Section> </Card.Section>

19
src/module/user/member/ui/tab_list_member.tsx
View File

@@ -1,6 +1,6 @@
import { SkeletonSingle, WARNA } from "@/module/_global" import { SkeletonSingle, WARNA } from "@/module/_global"
import { Box, Group, ActionIcon, Text, TextInput, Divider, Avatar } from "@mantine/core" import { Box, Group, ActionIcon, Text, TextInput, Divider, Avatar, Grid } from "@mantine/core"
import { useShallowEffect } from "@mantine/hooks" import { useShallowEffect } from "@mantine/hooks"
import { useRouter, useSearchParams } from "next/navigation" import { useRouter, useSearchParams } from "next/navigation"
import { useEffect, useState } from "react" import { useEffect, useState } from "react"
@@ -104,17 +104,18 @@ export default function TabListMember() {
<Box onClick={() => { <Box onClick={() => {
router.push(`/member/${v.id}`) router.push(`/member/${v.id}`)
}}> }}>
<Group align='center' style={{ <Grid p={10} gutter={{
padding: 10, base: 60,
}} > xl: "xs"
<Box> }} align="center">
<Grid.Col span={2}>
<Avatar src={`/api/file/img?cat=user&file=${v.img}`} size={50} alt="image" /> <Avatar src={`/api/file/img?cat=user&file=${v.img}`} size={50} alt="image" />
</Box> </Grid.Col>
<Box> <Grid.Col span={9}>
<Text fw={'bold'} c={WARNA.biruTua} lineClamp={1}>{_.startCase(v.name)}</Text> <Text fw={'bold'} c={WARNA.biruTua} lineClamp={1}>{_.startCase(v.name)}</Text>
<Text fw={'lighter'} fz={12}>{v.group + ' - ' + v.position}</Text> <Text fw={'lighter'} fz={12}>{v.group + ' - ' + v.position}</Text>
</Box> </Grid.Col>
</Group> </Grid>
</Box> </Box>
<Divider my={10} /> <Divider my={10} />
</Box> </Box>