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

update detail member

Browse Source
This commit is contained in:
lukman
2024-09-04 17:42:55 +08:00
parent bc2635ee3b
commit 089abd53b0
1 changed files with 55 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
src/module/user/member/ui/navbar_detail_member.tsx
View File

@@ -1,6 +1,6 @@
'use client' 'use client'
import { LayoutNavbarHome, LayoutIconBack, WARNA, LayoutDrawer, SkeletonDetailProfile } from "@/module/_global"; import { LayoutNavbarHome, LayoutIconBack, WARNA, LayoutDrawer, SkeletonDetailProfile } from "@/module/_global";
import { Box, Group, ActionIcon, Stack, Text, Center, Avatar, Skeleton } from "@mantine/core"; import { Box, Group, ActionIcon, Stack, Text, Center, Avatar, Skeleton, Grid } from "@mantine/core";
import { HiMenu } from "react-icons/hi"; import { HiMenu } from "react-icons/hi";
import { HiUser } from "react-icons/hi2"; import { HiUser } from "react-icons/hi2";
import DrawerDetailMember from "./drawer_detail_member"; import DrawerDetailMember from "./drawer_detail_member";
@@ -68,12 +68,12 @@ export default function NavbarDetailMember({ id }: IMember) {
<Center> <Center>
<Avatar src={`/api/file/img?jenis=image&cat=user&file=${dataOne?.img}`} alt="it's me" size="xl" /> <Avatar src={`/api/file/img?jenis=image&cat=user&file=${dataOne?.img}`} alt="it's me" size="xl" />
</Center> </Center>
{loading ? {loading ?
<> <>
<Skeleton height={25} mt={10} width={"40%"} /> <Skeleton height={25} mt={10} width={"40%"} />
<Skeleton height={15} mt={12} width={"30%"} /> <Skeleton height={15} mt={12} width={"30%"} />
</> </>
: :
<> <>
<Text c={'white'} fw={'bold'} fz={25}>{dataOne?.name}</Text> <Text c={'white'} fw={'bold'} fz={25}>{dataOne?.name}</Text>
<Text c={'white'} fw={'lighter'} fz={15}>{dataOne?.group} - {dataOne?.position}</Text> <Text c={'white'} fw={'lighter'} fz={15}>{dataOne?.group} - {dataOne?.position}</Text>
@@ -82,41 +82,60 @@ export default function NavbarDetailMember({ id }: IMember) {
</Stack> </Stack>
</LayoutNavbarHome> </LayoutNavbarHome>
{loading {loading
? ?
<SkeletonDetailProfile /> <SkeletonDetailProfile />
: :
<Box p={20}> <Stack p={20}>
<Group justify="space-between" grow py={5}> <Group justify="space-between" grow py={5}>
<Group> <Text fw={'bold'} fz={20}>Informasi</Text>
<RiIdCardFill size={28} />
<Text fz={18}>NIK</Text>
</Group>
<Text fz={18} fw={'bold'} ta={"right"}>{dataOne?.nik}</Text>
</Group> </Group>
<Group justify="space-between" grow py={5}> <Grid>
<Group> <Grid.Col span={4}>
<FaSquarePhone size={28} /> <Group>
<Text fz={18}>No Telepon</Text> <RiIdCardFill size={25} />
</Group> <Text fz={15}>NIK</Text>
<Text fz={18} fw={'bold'} ta={"right"}>+{dataOne?.phone}</Text> </Group>
</Group> </Grid.Col>
<Group justify="space-between" grow py={5}> <Grid.Col span={8}>
<Group> <Text fz={15} fw={'bold'} ta={"right"}>{dataOne?.nik}</Text>
<MdEmail size={28} /> </Grid.Col>
<Text fz={18}>Email</Text> </Grid>
</Group> <Grid>
<Text fz={18} fw={'bold'} ta={"right"}>{dataOne?.email}</Text> <Grid.Col span={5}>
</Group> <Group>
<Group justify="space-between" grow py={5}> <FaSquarePhone size={25} />
<Group> <Text fz={15}>No Telpon</Text>
<IoMaleFemale size={28} /> </Group>
<Text fz={18}>Gender</Text> </Grid.Col>
</Group> <Grid.Col span={7}>
<Text fz={18} fw={'bold'} ta={"right"}> <Text fz={15} fw={'bold'} ta={"right"}>+62{dataOne?.phone}</Text>
{dataOne?.gender === 'M' ? 'Laki-laki' : dataOne?.gender === 'F' ? 'Perempuan' : ''} </Grid.Col>
</Text> </Grid>
</Group> <Grid>
</Box> <Grid.Col span={4}>
<Group>
<MdEmail size={25} />
<Text fz={15}>Email</Text>
</Group>
</Grid.Col>
<Grid.Col span={8}>
<Text fz={15} fw={'bold'} ta={"right"} lineClamp={1}>{dataOne?.email}</Text>
</Grid.Col>
</Grid>
<Grid>
<Grid.Col span={6}>
<Group>
<IoMaleFemale size={25} />
<Text fz={15}>Jenis Kelamin</Text>
</Group>
</Grid.Col>
<Grid.Col span={6}>
<Text fz={15} fw={'bold'} ta={"right"}>
{dataOne?.gender === 'M' ? 'Laki-laki' : dataOne?.gender === 'F' ? 'Perempuan' : ''}
</Text>
</Grid.Col>
</Grid>
</Stack>
} }
<LayoutDrawer opened={isOpen} title={'Menu'} onClose={() => setOpen(false)}> <LayoutDrawer opened={isOpen} title={'Menu'} onClose={() => setOpen(false)}>
<DrawerDetailMember id={selectId} status={active} onDeleted={() => setOpen(false)} /> <DrawerDetailMember id={selectId} status={active} onDeleted={() => setOpen(false)} />