Merge pull request #272 from bipproduction/lukman/30-september-2024
Lukman/30 september 2024
This commit is contained in:
@@ -3,6 +3,7 @@ import { funGetUserByCookies } from "@/module/auth";
|
|||||||
import { createLogUser } from "@/module/user";
|
import { createLogUser } from "@/module/user";
|
||||||
import _ from "lodash";
|
import _ from "lodash";
|
||||||
import moment from "moment";
|
import moment from "moment";
|
||||||
|
import "moment/locale/id";
|
||||||
import { NextResponse } from "next/server";
|
import { NextResponse } from "next/server";
|
||||||
|
|
||||||
// GET ALL NOTIFIKASI
|
// GET ALL NOTIFIKASI
|
||||||
|
|||||||
@@ -8,7 +8,7 @@ export default function LayoutDrawer({ opened, onClose, title, children, size }:
|
|||||||
const tema = useHookstate(TEMA)
|
const tema = useHookstate(TEMA)
|
||||||
return (
|
return (
|
||||||
<Box>
|
<Box>
|
||||||
<Drawer opened={opened} title={<Text c={tema.get().utama} fw={'bold'}>{title}</Text>} onClose={onClose} position={"bottom"} size={(size == 'lg') ? '80%' : '40%'}
|
<Drawer opened={opened} title={<Text c={tema.get().utama} fw={'bold'}>{title}</Text>} onClose={onClose} position={"bottom"} size={(size == 'lg') ? '80%' : '40%' }
|
||||||
styles={{
|
styles={{
|
||||||
content: {
|
content: {
|
||||||
backgroundColor: "white",
|
backgroundColor: "white",
|
||||||
|
|||||||
@@ -320,7 +320,7 @@ export default function DetailEventDivision() {
|
|||||||
<Box
|
<Box
|
||||||
key={i}
|
key={i}
|
||||||
>
|
>
|
||||||
<SkeletonList/>
|
<SkeletonList />
|
||||||
</Box>
|
</Box>
|
||||||
))}
|
))}
|
||||||
</Box>
|
</Box>
|
||||||
@@ -365,7 +365,7 @@ export default function DetailEventDivision() {
|
|||||||
lg: 1,
|
lg: 1,
|
||||||
xl: 1,
|
xl: 1,
|
||||||
}}>
|
}}>
|
||||||
<Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size={isMobile ? 'md' : 'lg'} />
|
<Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size={'lg'} />
|
||||||
</Grid.Col>
|
</Grid.Col>
|
||||||
<Grid.Col span={{
|
<Grid.Col span={{
|
||||||
base: 11,
|
base: 11,
|
||||||
@@ -375,14 +375,11 @@ export default function DetailEventDivision() {
|
|||||||
lg: 11,
|
lg: 11,
|
||||||
xl: 11,
|
xl: 11,
|
||||||
}}>
|
}}>
|
||||||
<Flex justify='space-between' align={"center"}>
|
<Text lineClamp={1} pl={isMobile2 ? 40 : 30} fz={isMobile ? 15 : 16}>{v.name}</Text>
|
||||||
<Flex direction={'column'} align="flex-start" justify="flex-start">
|
<Text c={"#5A687D"} truncate="end" fz={isMobile ? 12 : 14} pl={isMobile2 ? 40 : 30}
|
||||||
<Text lineClamp={1} pl={isMobile ? 35 : 40}>{v.name}</Text>
|
style={{
|
||||||
<Text c={"#5A687D"} fz={14} lineClamp={1} pl={isMobile ? 35 : 40}>
|
overflowWrap: "break-word"
|
||||||
{v.email}
|
}}>{v.email}</Text>
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
</Flex>
|
|
||||||
</Grid.Col>
|
</Grid.Col>
|
||||||
</Grid>
|
</Grid>
|
||||||
<Box mt={10}>
|
<Box mt={10}>
|
||||||
|
|||||||
@@ -31,6 +31,7 @@ export default function InformationDivision() {
|
|||||||
const roleLogin = useHookstate(globalRole)
|
const roleLogin = useHookstate(globalRole)
|
||||||
const [isAdmin, setAdmin] = useState(false)
|
const [isAdmin, setAdmin] = useState(false)
|
||||||
const isMobile = useMediaQuery('(max-width: 455px)');
|
const isMobile = useMediaQuery('(max-width: 455px)');
|
||||||
|
const isMobile2 = useMediaQuery("(max-width: 438px)");
|
||||||
const tema = useHookstate(TEMA)
|
const tema = useHookstate(TEMA)
|
||||||
|
|
||||||
async function getOneData() {
|
async function getOneData() {
|
||||||
@@ -164,8 +165,8 @@ export default function InformationDivision() {
|
|||||||
|
|
||||||
((roleLogin.get() != 'user' && roleLogin.get() != 'coadmin') || isAdmin) ?
|
((roleLogin.get() != 'user' && roleLogin.get() != 'coadmin') || isAdmin) ?
|
||||||
<Group align='center' onClick={() => router.push('/division/add-member/' + param.id)}>
|
<Group align='center' onClick={() => router.push('/division/add-member/' + param.id)}>
|
||||||
<Avatar size={isMobile ? 'md' : 'lg'}>
|
<Avatar size={'lg'}>
|
||||||
<AiOutlineUserAdd size={isMobile ? 25 : 30} color={tema.get().utama} />
|
<AiOutlineUserAdd size={30} color={tema.get().utama} />
|
||||||
</Avatar>
|
</Avatar>
|
||||||
<Text fz={isMobile ? 14 : 16}>Tambah Anggota</Text>
|
<Text fz={isMobile ? 14 : 16}>Tambah Anggota</Text>
|
||||||
</Group>
|
</Group>
|
||||||
@@ -194,10 +195,10 @@ export default function InformationDivision() {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Grid.Col span={1}>
|
<Grid.Col span={1}>
|
||||||
<Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size={isMobile ? 'md' : 'lg'} />
|
<Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size={'lg'} />
|
||||||
</Grid.Col>
|
</Grid.Col>
|
||||||
<Grid.Col span={8}>
|
<Grid.Col span={8}>
|
||||||
<Text c={tema.get().utama} fw={"bold"} truncate="end" pl={isMobile ? 25 : 30} fz={isMobile ? 14 : 16}>
|
<Text c={tema.get().utama} fw={"bold"} truncate="end" pl={isMobile2 ? 40 : 30} fz={isMobile ? 14 : 16}>
|
||||||
{v.name}
|
{v.name}
|
||||||
</Text>
|
</Text>
|
||||||
</Grid.Col>
|
</Grid.Col>
|
||||||
|
|||||||
@@ -66,7 +66,7 @@ export default function ListTaskOnDetailDivision() {
|
|||||||
: <></>
|
: <></>
|
||||||
}
|
}
|
||||||
</Group>
|
</Group>
|
||||||
<Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
|
<Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withControls={false}>
|
||||||
{data.map((v, i) =>
|
{data.map((v, i) =>
|
||||||
<Carousel.Slide key={v.id}>
|
<Carousel.Slide key={v.id}>
|
||||||
<Box p={20} w={{
|
<Box p={20} w={{
|
||||||
|
|||||||
@@ -59,9 +59,9 @@ export default function ListDivisi() {
|
|||||||
<Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada divisi</Text>
|
<Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada divisi</Text>
|
||||||
</Box>
|
</Box>
|
||||||
:
|
:
|
||||||
<Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
|
<Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withControls={false}>
|
||||||
{isData.map((v) =>
|
{isData.map((v) =>
|
||||||
<Carousel.Slide key={v.id}>
|
<Carousel.Slide key={v.id} pb={20}>
|
||||||
<Box w={{
|
<Box w={{
|
||||||
base: isMobile ? 230 : 300,
|
base: isMobile ? 230 : 300,
|
||||||
md: 400
|
md: 400
|
||||||
|
|||||||
@@ -59,9 +59,9 @@ export default function ListProjects() {
|
|||||||
<Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada kegiatan terbaru</Text>
|
<Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada kegiatan terbaru</Text>
|
||||||
</Box>
|
</Box>
|
||||||
:
|
:
|
||||||
<Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
|
<Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withControls={false}>
|
||||||
{isData.map((v) =>
|
{isData.map((v) =>
|
||||||
<Carousel.Slide key={v.id}>
|
<Carousel.Slide key={v.id} pb={20}>
|
||||||
<Box w={{
|
<Box w={{
|
||||||
base: isMobile ? 230 : 300,
|
base: isMobile ? 230 : 300,
|
||||||
md: 400
|
md: 400
|
||||||
|
|||||||
@@ -96,6 +96,23 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
|
|||||||
getOneData()
|
getOneData()
|
||||||
}, [refresh.get()])
|
}, [refresh.get()])
|
||||||
|
|
||||||
|
function onCheck() {
|
||||||
|
if (Object.values(touched).some((v) => v == true))
|
||||||
|
return false
|
||||||
|
onSubmit()
|
||||||
|
}
|
||||||
|
|
||||||
|
function onValidation(kategori: string, val: string) {
|
||||||
|
if (kategori == 'name') {
|
||||||
|
setData({...data, name: val})
|
||||||
|
if (val == "" || val.length < 3) {
|
||||||
|
setTouched({ ...touched, name: true })
|
||||||
|
} else {
|
||||||
|
setTouched({ ...touched, name: false })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
async function nonActive(val: boolean) {
|
async function nonActive(val: boolean) {
|
||||||
try {
|
try {
|
||||||
if (val) {
|
if (val) {
|
||||||
@@ -156,7 +173,6 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
|
|||||||
{loading ?
|
{loading ?
|
||||||
<Box>
|
<Box>
|
||||||
<Skeleton height={40} mt={6} radius={10} />
|
<Skeleton height={40} mt={6} radius={10} />
|
||||||
<Skeleton height={40} mt={15} radius={10} />
|
|
||||||
</Box>
|
</Box>
|
||||||
:
|
:
|
||||||
<Box>
|
<Box>
|
||||||
@@ -172,14 +188,12 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
|
|||||||
required
|
required
|
||||||
size="md"
|
size="md"
|
||||||
value={String(data.name)}
|
value={String(data.name)}
|
||||||
onChange={(e) => {
|
onChange={(e) => { onValidation('name', e.target.value) }}
|
||||||
setData({ ...data, name: e.target.value })
|
|
||||||
setTouched({ ...touched, name: false })
|
|
||||||
}}
|
|
||||||
onBlur={() => setTouched({ ...touched, name: true })}
|
onBlur={() => setTouched({ ...touched, name: true })}
|
||||||
error={
|
error={
|
||||||
touched.name && (
|
touched.name &&
|
||||||
data.name == "" ? "Nama Jabatan Tidak Boleh Kosong" : null
|
(data.name == "" ? "Error! harus memasukkan Nama Jabatan" :
|
||||||
|
data.name.length < 3 ? "Masukkan Minimal 3 karakter" : ""
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
radius={10}
|
radius={10}
|
||||||
|
|||||||
@@ -73,6 +73,30 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function onCheck() {
|
||||||
|
if (Object.values(touched).some((v) => v == true))
|
||||||
|
return false
|
||||||
|
onSubmit()
|
||||||
|
}
|
||||||
|
|
||||||
|
function onValidation(kategori: string, val: string) {
|
||||||
|
if (kategori == 'name') {
|
||||||
|
setListData({...listData, name: val})
|
||||||
|
if (val == "" || val.length < 3) {
|
||||||
|
setTouched({ ...touched, name: true })
|
||||||
|
} else {
|
||||||
|
setTouched({ ...touched, name: false })
|
||||||
|
}
|
||||||
|
} else if (kategori == 'idGroup') {
|
||||||
|
setListData({ ...listData, idGroup: val })
|
||||||
|
if (val == "") {
|
||||||
|
setTouched({ ...touched, idGroup: true })
|
||||||
|
} else {
|
||||||
|
setTouched({ ...touched, idGroup: false })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box>
|
<Box>
|
||||||
<Stack pt={10}>
|
<Stack pt={10}>
|
||||||
@@ -102,9 +126,9 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo
|
|||||||
</Stack>
|
</Stack>
|
||||||
<LayoutDrawer opened={openDrawerGroup} onClose={() => setOpenDrawerGroup(false)} title={'Tambah Jabatan'} size="lg">
|
<LayoutDrawer opened={openDrawerGroup} onClose={() => setOpenDrawerGroup(false)} title={'Tambah Jabatan'} size="lg">
|
||||||
<Box pt={10} pos={"relative"} h={{
|
<Box pt={10} pos={"relative"} h={{
|
||||||
base: "69vh",
|
base: "65vh",
|
||||||
sm: "69vh",
|
sm: "67vh",
|
||||||
lg: "69vh",
|
lg: "67vh",
|
||||||
xl: "70vh"
|
xl: "70vh"
|
||||||
|
|
||||||
}}>
|
}}>
|
||||||
@@ -125,13 +149,9 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo
|
|||||||
radius={10}
|
radius={10}
|
||||||
mb={5}
|
mb={5}
|
||||||
withAsterisk
|
withAsterisk
|
||||||
onChange={(val: any) => {
|
onChange={(e: any) =>
|
||||||
setListData({
|
{ onValidation('idGroup', e) }
|
||||||
...listData,
|
}
|
||||||
idGroup: val
|
|
||||||
})
|
|
||||||
setTouched({ ...touched, idGroup: false })
|
|
||||||
}}
|
|
||||||
styles={{
|
styles={{
|
||||||
input: {
|
input: {
|
||||||
color: tema.get().utama,
|
color: tema.get().utama,
|
||||||
@@ -144,8 +164,6 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo
|
|||||||
listData.idGroup == "" ? "Grup Tidak Boleh Kosong" : null
|
listData.idGroup == "" ? "Grup Tidak Boleh Kosong" : null
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
onFocus={() => setTouched({ ...touched, idGroup: true })}
|
|
||||||
onBlur={() => setTouched({ ...touched, idGroup: true })}
|
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
<TextInput
|
<TextInput
|
||||||
@@ -159,22 +177,15 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo
|
|||||||
}}
|
}}
|
||||||
my={15}
|
my={15}
|
||||||
size="md"
|
size="md"
|
||||||
onChange={(event: any) => {
|
onChange={(e) => { onValidation('name', e.target.value) }}
|
||||||
setListData({
|
|
||||||
...listData,
|
|
||||||
name: event.target.value
|
|
||||||
})
|
|
||||||
setTouched({ ...touched, name: false })
|
|
||||||
}}
|
|
||||||
radius={10}
|
radius={10}
|
||||||
placeholder="Nama Jabatan"
|
placeholder="Nama Jabatan"
|
||||||
error={
|
error={
|
||||||
touched.name && (
|
touched.name &&
|
||||||
listData.name == "" ? "Nama Jabatan Tidak Boleh Kosong" : null
|
(listData.name == "" ? "Error! harus memasukkan Nama Jabatan" :
|
||||||
|
listData.name.length < 3 ? "Masukkan Minimal 3 karakter" : ""
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
onFocus={() => setTouched({ ...touched, name: true })}
|
|
||||||
onBlur={() => setTouched({ ...touched, name: true })}
|
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
<Box pos={"absolute"} bottom={10} left={0} right={0}>
|
<Box pos={"absolute"} bottom={10} left={0} right={0}>
|
||||||
@@ -184,7 +195,7 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo
|
|||||||
size="lg"
|
size="lg"
|
||||||
radius={30}
|
radius={30}
|
||||||
fullWidth
|
fullWidth
|
||||||
onClick={onSubmit}
|
onClick={() => { onCheck() }}
|
||||||
>
|
>
|
||||||
SIMPAN
|
SIMPAN
|
||||||
</Button>
|
</Button>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
'use client'
|
'use client'
|
||||||
import { globalRole, LayoutDrawer, SkeletonSingle, TEMA } from '@/module/_global';
|
import { globalRole, LayoutDrawer, SkeletonList, SkeletonSingle, TEMA } from '@/module/_global';
|
||||||
import { Avatar, Box, Flex, Grid, Group, SimpleGrid, Stack, Text } from '@mantine/core';
|
import { Avatar, Box, Divider, Flex, Grid, Group, SimpleGrid, Stack, Text } from '@mantine/core';
|
||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
import { funDeleteMemberProject, funGetOneProjectById } from '../lib/api_project';
|
import { funDeleteMemberProject, funGetOneProjectById } from '../lib/api_project';
|
||||||
import toast from 'react-hot-toast';
|
import toast from 'react-hot-toast';
|
||||||
@@ -24,6 +24,7 @@ export default function ListAnggotaDetailProject() {
|
|||||||
const roleLogin = useHookstate(globalRole)
|
const roleLogin = useHookstate(globalRole)
|
||||||
const tema = useHookstate(TEMA)
|
const tema = useHookstate(TEMA)
|
||||||
const [reason, setReason] = useState("")
|
const [reason, setReason] = useState("")
|
||||||
|
const isMobile2 = useMediaQuery("(max-width: 438px)");
|
||||||
|
|
||||||
async function getOneDataCancel() {
|
async function getOneDataCancel() {
|
||||||
try {
|
try {
|
||||||
@@ -83,7 +84,7 @@ export default function ListAnggotaDetailProject() {
|
|||||||
toast.error("Gagal menghapus anggota Kegiatan, coba lagi nanti");
|
toast.error("Gagal menghapus anggota Kegiatan, coba lagi nanti");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const isMobile = useMediaQuery('(max-width: 369px)');
|
const isMobile = useMediaQuery('(max-width: 369px)');
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box pt={20}>
|
<Box pt={20}>
|
||||||
@@ -107,7 +108,7 @@ const isMobile = useMediaQuery('(max-width: 369px)');
|
|||||||
.fill(null)
|
.fill(null)
|
||||||
.map((_, i) => (
|
.map((_, i) => (
|
||||||
<Box key={i}>
|
<Box key={i}>
|
||||||
<SkeletonSingle />
|
<SkeletonList />
|
||||||
</Box>
|
</Box>
|
||||||
))
|
))
|
||||||
:
|
:
|
||||||
@@ -123,19 +124,15 @@ const isMobile = useMediaQuery('(max-width: 369px)');
|
|||||||
: setOpenDrawer(false)
|
: setOpenDrawer(false)
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Grid.Col span={9}>
|
<Grid.Col span={1}>
|
||||||
<Group>
|
<Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size={'lg'} />
|
||||||
<Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size={isMobile ? 'md' : 'lg'} />
|
</Grid.Col>
|
||||||
<Box w={{
|
<Grid.Col span={8}>
|
||||||
base: isMobile ? 130 : 140,
|
<Text lineClamp={1} pl={isMobile2 ? 40 : 30} fz={isMobile ? 15 : 16}>{v.name}</Text>
|
||||||
xl: 270
|
<Text c={"#5A687D"} truncate="end" fz={isMobile ? 12 : 14} pl={isMobile2 ? 40 : 30}
|
||||||
}}>
|
style={{
|
||||||
<Flex direction={'column'} align="flex-start" justify="flex-start">
|
overflowWrap: "break-word"
|
||||||
<Text lineClamp={1} fz={isMobile ? 14 : 16}>{v.name}</Text>
|
}}>{v.email}</Text>
|
||||||
<Text c={"#5A687D"} fz={isMobile ? 10 : 14} lineClamp={1}>{v.email}</Text>
|
|
||||||
</Flex>
|
|
||||||
</Box>
|
|
||||||
</Group>
|
|
||||||
</Grid.Col>
|
</Grid.Col>
|
||||||
<Grid.Col span={3}>
|
<Grid.Col span={3}>
|
||||||
<Text c={tema.get().utama} fw={"bold"} ta={'end'} fz={isMobile ? 13 : 16}>
|
<Text c={tema.get().utama} fw={"bold"} ta={'end'} fz={isMobile ? 13 : 16}>
|
||||||
@@ -143,6 +140,9 @@ const isMobile = useMediaQuery('(max-width: 369px)');
|
|||||||
</Text>
|
</Text>
|
||||||
</Grid.Col>
|
</Grid.Col>
|
||||||
</Grid>
|
</Grid>
|
||||||
|
<Box mt={10}>
|
||||||
|
<Divider my={10} />
|
||||||
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
'use client'
|
'use client'
|
||||||
import { globalRole, LayoutDrawer, SkeletonSingle, TEMA } from "@/module/_global";
|
import { globalRole, LayoutDrawer, SkeletonList, SkeletonSingle, TEMA } from "@/module/_global";
|
||||||
import { Box, Group, Flex, Avatar, Text, SimpleGrid, Stack, Grid } from "@mantine/core";
|
import { Box, Group, Flex, Avatar, Text, SimpleGrid, Stack, Grid, Divider } from "@mantine/core";
|
||||||
import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
|
import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
|
||||||
import { useParams, useRouter } from "next/navigation";
|
import { useParams, useRouter } from "next/navigation";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
@@ -25,6 +25,7 @@ export default function ListAnggotaDetailTask() {
|
|||||||
const roleLogin = useHookstate(globalRole)
|
const roleLogin = useHookstate(globalRole)
|
||||||
const adminLogin = useHookstate(globalIsAdminDivision)
|
const adminLogin = useHookstate(globalIsAdminDivision)
|
||||||
const isMobile = useMediaQuery('(max-width: 369px)');
|
const isMobile = useMediaQuery('(max-width: 369px)');
|
||||||
|
const isMobile2 = useMediaQuery("(max-width: 438px)");
|
||||||
const tema = useHookstate(TEMA)
|
const tema = useHookstate(TEMA)
|
||||||
const [reason, setReason] = useState("")
|
const [reason, setReason] = useState("")
|
||||||
|
|
||||||
@@ -109,7 +110,7 @@ export default function ListAnggotaDetailTask() {
|
|||||||
.fill(null)
|
.fill(null)
|
||||||
.map((_, i) => (
|
.map((_, i) => (
|
||||||
<Box key={i}>
|
<Box key={i}>
|
||||||
<SkeletonSingle />
|
<SkeletonList />
|
||||||
</Box>
|
</Box>
|
||||||
))
|
))
|
||||||
:
|
:
|
||||||
@@ -125,19 +126,15 @@ export default function ListAnggotaDetailTask() {
|
|||||||
: setOpenDrawer(false)
|
: setOpenDrawer(false)
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Grid.Col span={9}>
|
<Grid.Col span={1}>
|
||||||
<Group>
|
<Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size={'lg'} />
|
||||||
<Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size={isMobile ? 'md' : 'lg'} />
|
</Grid.Col>
|
||||||
<Box w={{
|
<Grid.Col span={8}>
|
||||||
base: isMobile ? 130 : 140,
|
<Text lineClamp={1} pl={isMobile2 ? 40 : 30} fz={isMobile ? 15 : 16}>{v.name}</Text>
|
||||||
xl: 270
|
<Text c={"#5A687D"} truncate="end" fz={isMobile ? 12 : 14} pl={isMobile2 ? 40 : 30}
|
||||||
}}>
|
style={{
|
||||||
<Flex direction={'column'} align="flex-start" justify="flex-start">
|
overflowWrap: "break-word"
|
||||||
<Text lineClamp={1} fz={isMobile ? 14 : 16}>{v.name}</Text>
|
}}>{v.email}</Text>
|
||||||
<Text c={"#5A687D"} lineClamp={1} fz={isMobile ? 10 : 14}>{v.email}</Text>
|
|
||||||
</Flex>
|
|
||||||
</Box>
|
|
||||||
</Group>
|
|
||||||
</Grid.Col>
|
</Grid.Col>
|
||||||
<Grid.Col span={3}>
|
<Grid.Col span={3}>
|
||||||
<Text c={tema.get().utama} fw={"bold"} ta={'end'} fz={isMobile ? 13 : 16}>
|
<Text c={tema.get().utama} fw={"bold"} ta={'end'} fz={isMobile ? 13 : 16}>
|
||||||
@@ -145,6 +142,9 @@ export default function ListAnggotaDetailTask() {
|
|||||||
</Text>
|
</Text>
|
||||||
</Grid.Col>
|
</Grid.Col>
|
||||||
</Grid>
|
</Grid>
|
||||||
|
<Box mt={10}>
|
||||||
|
<Divider my={10} />
|
||||||
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
|||||||
Reference in New Issue
Block a user