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

Merge pull request #308 from bipproduction/join

Browse Source 
Join
This commit is contained in:
Amalia
2024-10-16 18:02:22 +08:00
committed by GitHub
parent e4445a4595 53cc842d5d
commit 96d3a31322
64 changed files with 1506 additions and 957 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/assets/img/banner/bg-10.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 497 KiB

3
src/app/api/division/[id]/detail/route.ts
View File

@@ -100,6 +100,7 @@ export async function GET(request: Request, context: { params: { id: string } })
},
select: {
id: true,
idProject: true,
title: true,
dateStart: true,
dateEnd: true,
@@ -166,7 +167,7 @@ export async function GET(request: Request, context: { params: { id: string } })
allData = diskusi.map((v: any) => ({
..._.omit(v, ["createdAt", "User"]),
date: moment(v.dateStart).format("ll"),
date: moment(v.createdAt).format("ll"),
user: v.User.name
}))
}

2
src/app/api/home/route.ts
View File

@@ -420,7 +420,7 @@ export async function GET(request: Request) {
allData = data.map((v: any) => ({
..._.omit(v, ["createdAt", "User"]),
date: moment(v.dateStart).format("ll"),
date: moment(v.createdAt).format("ll"),
user: v.User.name
}))
} else if (kategori == "header") {

1
src/app/api/position/[id]/route.ts
View File

@@ -120,7 +120,6 @@ export async function PUT(request: Request, context: { params: { id: string } })
},
data: {
name: data.name,
// idGroup: data.idGroup,
},
});

1
src/app/api/position/route.ts
View File

@@ -113,6 +113,7 @@ export async function POST(request: Request) {
select: {
id: true,
name: true,
idGroup: true
},
});

6
src/app/api/user/[id]/route.ts
View File

@@ -111,6 +111,10 @@ export async function DELETE(request: Request, context: { params: { id: string }
data: {
isActive: !isActive,
},
select: {
id: true,
idGroup: true,
},
});
// create log user
@@ -120,7 +124,7 @@ export async function DELETE(request: Request, context: { params: { id: string }
{
success: true,
message: "Berhasil mengupdate status anggota",
result,
data: result,
},
{ status: 200 }
);

5
src/app/api/user/route.ts
View File

@@ -186,7 +186,8 @@ export async function POST(request: Request) {
idUserRole: data.idUserRole,
},
select: {
id: true
id: true,
idGroup: true,
},
});
@@ -211,7 +212,7 @@ export async function POST(request: Request) {
// create log user
const log = await createLogUser({ act: 'CREATE', desc: 'User membuat data user baru', table: 'user', data: users.id })
return Response.json({ success: true, message: 'Sukses membuat user' }, { status: 200 });
return Response.json({ success: true, message: 'Sukses membuat user', data: users}, { status: 200 });
} else {
return Response.json({ success: false, message: "User sudah ada" }, { status: 400 });
}

2
src/app/api/version-app/route.ts
View File

@@ -2,7 +2,7 @@ import { NextResponse } from "next/server";
export async function GET(request: Request) {
try {
return NextResponse.json({ success: true, version: "0.1.2", mode: "staging" }, { status: 200 });
return NextResponse.json({ success: true, version: "0.1.4", mode: "staging" }, { status: 200 });
} catch (error) {
console.error(error);
return NextResponse.json({ success: false, version: "Gagal mendapatkan version, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });

2
src/module/_global/components/reload_button_top.tsx
View File

@@ -13,7 +13,7 @@ export default function ReloadButtonTop({ onReload, title }: { onReload: () => v
useShallowEffect(() => {
const timer = setTimeout(() => {
setOpened(true);
}, 2000);
}, 500);
return () => clearTimeout(timer);
}, []);

35
src/module/_global/components/skeleton_banner.tsx Normal file
View File

@@ -0,0 +1,35 @@
import { useHookstate } from '@hookstate/core';
import { Box, Flex, Group, Paper, Skeleton } from '@mantine/core';
import { TEMA } from '../bin/val_global';
export default function SkeletonBanner() {
const tema = useHookstate(TEMA)
return (
<Box mb={10}>
<Paper radius={'md'} withBorder style={{
width: '100%',
maxWidth: 550,
height: 85,
backgroundColor: 'transparent',
border: `1px solid ${tema.get().bgTotalKegiatan}`
}}>
<Group
mt={"25"}
align="center"
ml={"12"}
>
<Flex direction={"row"} justify={"center"} align={"center"} gap={"md"} >
<Box pr={12}>
<Skeleton height={40} width={90} />
</Box>
<Box>
<Skeleton height={25} width={150} />
</Box>
</Flex>
</Group>
</Paper>
</Box>
);
}

25
src/module/_global/components/wrap_layout.tsx
View File

@@ -5,7 +5,9 @@ import { useShallowEffect } from "@mantine/hooks";
import { useEffect, useState } from "react";
import { useWibuRealtime } from "wibu-realtime";
import NotificationCustome from "./notification_custome";
import { useRouter } from "next/navigation";
import { usePathname, useRouter } from "next/navigation";
import { globalParamJumlahNotif } from "@/module/home";
import ReloadButtonTop from "./reload_button_top";
export default function WrapLayout({ children, role, theme, user }: { children: React.ReactNode, role: any, theme: any, user: any }) {
const router = useRouter()
@@ -13,10 +15,13 @@ export default function WrapLayout({ children, role, theme, user }: { children:
const tema = useHookstate(TEMA)
const notifLoadPage = useHookstate(globalNotifPage)
const [tampilNotif, setTampilNotif] = useState(false)
const paramNotif = useHookstate(globalParamJumlahNotif)
const [data, setData] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
const path = usePathname()
useEffect(() => {
roleLogin.set(role)
@@ -26,10 +31,18 @@ export default function WrapLayout({ children, role, theme, user }: { children:
useShallowEffect(() => {
if (data && data.some((i: any) => i.idUserTo == user)) {
setTampilNotif(true)
setTimeout(() => {
setTampilNotif(false);
}, 4000);
if (data.some((i: any) => i.category == path.substring(1))) {
notifLoadPage.set({
category: path.substring(1),
load: true
})
} else {
setTampilNotif(true)
paramNotif.set(!paramNotif.get())
setTimeout(() => {
setTampilNotif(false);
}, 4000);
}
}
}, [data])
@@ -40,7 +53,6 @@ export default function WrapLayout({ children, role, theme, user }: { children:
return (
<>
{/* {JSON.stringify(data)} */}
{
tampilNotif &&
<NotificationCustome
@@ -50,7 +62,6 @@ export default function WrapLayout({ children, role, theme, user }: { children:
onClose={() => { '' }}
/>
}
{children}
</>
);

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

@@ -1,28 +1,29 @@
'use client'
import { currentScroll, globalNotifPage, SkeletonSingle, SkeletonUser, TEMA, WARNA } from '@/module/_global';
import { ActionIcon, Box, Center, Divider, Grid, Group, Spoiler, Stack, Text, TextInput } from '@mantine/core';
import React, { useEffect, useState } from 'react';
import { TfiAnnouncement } from "react-icons/tfi";
import { HiMagnifyingGlass } from 'react-icons/hi2';
import { useRouter, useSearchParams } from 'next/navigation';
import { useShallowEffect } from '@mantine/hooks';
import { IListDataAnnouncement } from '../lib/type_announcement';
import { funGetAllAnnouncement } from '../lib/api_announcement';
import toast from 'react-hot-toast';
import { currentScroll, globalNotifPage, ReloadButtonTop, SkeletonUser, TEMA } from '@/module/_global';
import { funGetUserByCookies } from '@/module/auth';
import { useHookstate } from '@hookstate/core';
import { ActionIcon, Box, Center, Divider, Grid, Spoiler, Stack, Text, TextInput } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
import toast from 'react-hot-toast';
import { HiMagnifyingGlass } from 'react-icons/hi2';
import { TfiAnnouncement } from "react-icons/tfi";
import { funGetAllAnnouncement } from '../lib/api_announcement';
import { IListDataAnnouncement } from '../lib/type_announcement';
export default function ListAnnouncement() {
const [isData, setIsData] = useState<IListDataAnnouncement[]>([])
const [user, setUser] = useState('')
const [searchQuery, setSearchQuery] = useState('')
const router = useRouter()
const [loading, setLoading] = useState(true);
const tema = useHookstate(TEMA)
const load = useHookstate(globalNotifPage)
// ini
const notifLoadPage = useHookstate(globalNotifPage)
const { value: containerRef } = useHookstate(currentScroll);
const [isPage, setPage] = useState(1)
const [isRefresh, setRefresh] = useState(false)
const fetchData = async (loading: boolean) => {
@@ -31,11 +32,11 @@ export default function ListAnnouncement() {
setLoading(true)
const response = await funGetAllAnnouncement('?search=' + searchQuery + '&page=' + isPage)
if (response.success) {
if (isPage == 1) {
setIsData(response?.data)
} else {
setIsData([...isData, ...response?.data])
}
if (isPage == 1) {
setIsData(response?.data)
} else {
setIsData([...isData, ...response?.data])
}
} else {
toast.error(response.message);
}
@@ -48,7 +49,12 @@ export default function ListAnnouncement() {
}
}
function onSearch(val:string){
async function onUser() {
const user = await funGetUserByCookies()
setUser(String(user.id))
}
function onSearch(val: string) {
setSearchQuery(val)
setPage(1)
}
@@ -63,6 +69,11 @@ export default function ListAnnouncement() {
}, [isPage])
useShallowEffect(() => {
onUser()
}, [])
useEffect(() => {
const handleScroll = async () => {
@@ -84,8 +95,35 @@ export default function ListAnnouncement() {
};
}, [containerRef, isPage]);
useShallowEffect(() => {
if (notifLoadPage.get().category == 'announcement' && notifLoadPage.get().load == true) {
setRefresh(true)
}
}, [notifLoadPage.get().load])
function onRefresh() {
notifLoadPage.set({
category: '',
load: false
})
setRefresh(false)
setPage(1)
setTimeout(() => {
fetchData(true)
}, 500)
}
return (
<Box p={20}>
{
isRefresh &&
<ReloadButtonTop
onReload={() => { onRefresh() }}
title='UPDATE'
/>
}
<TextInput
styles={{
input: {

5
src/module/banner/index.ts
View File

@@ -1,6 +1,9 @@
import { IDataBanner } from './lib/type_banner';
import { funGetAllBanner } from './lib/api_banner';
import NavbarBanner from "./ui/navbar_banner";
import ListBanner from "./ui/list_banner";
import CreateBanner from "./ui/create_banner";
import EditBanner from "./ui/edit_banner";
import ViewfileBanner from "./ui/viewfile_banner";
export { NavbarBanner, ListBanner, CreateBanner, EditBanner, ViewfileBanner }
export { NavbarBanner, ListBanner, CreateBanner, EditBanner, ViewfileBanner, funGetAllBanner };
export type { IDataBanner };

123
src/module/banner/ui/create_banner.tsx
View File

@@ -30,25 +30,6 @@ function CreateBanner() {
image: false
})
function onValidation(kategori: string, val: any) {
if (kategori == 'title') {
setListData({ ...listData, title: val })
if (val === "") {
setTouched({ ...touched, title: true })
} else {
setTouched({ ...touched, title: false })
}
} else if (kategori == 'image') {
if (imgForm) {
setTouched({ ...touched, image: false })
} else {
setTouched({ ...touched, image: true })
}
}
}
async function onSubmit(val: boolean) {
if (!imgForm || !listData.title) {
toast.error("Mohon lengkapi semua data");
@@ -69,8 +50,8 @@ function CreateBanner() {
router.push('/banner')
} else {
toast.error(res.message);
setModal(false);
}
setModal(false);
} catch (error) {
toast.error("Error");
} finally {
@@ -79,9 +60,46 @@ function CreateBanner() {
}
}
// async function loadData() {
// const
// }
function onCheck() {
const cek = checkAll()
if (!cek)
return false
setModal(true)
}
function checkAll() {
let nilai = true
if (listData.title == "") {
setTouched(touched => ({ ...touched, title: true }))
nilai = false
}
if (!imgForm) {
setTouched(touched => ({ ...touched, image: true }))
nilai = false
}
return nilai
}
function onValidation(kategori: string, val: any) {
if (kategori == 'title') {
setListData({ ...listData, title: val })
if (val === "") {
setTouched({ ...touched, title: true })
} else {
setTouched({ ...touched, title: false })
}
} else if (kategori == 'image') {
if (imgForm) {
setTouched({ ...touched, image: true })
} else {
setTouched({ ...touched, image: false })
}
}
}
return (
<Box>
@@ -102,7 +120,7 @@ function CreateBanner() {
}}
activateOnClick={false}
maxSize={1 * 1024 ** 2}
accept={['image/png', 'imagfe/jpeg', 'image/heic']}
accept={['image/png', 'image/jpeg', 'image/heic']}
onReject={(files) => {
return toast.error('File yang diizinkan: .png, .jpg, dan .heic dengan ukuran maksimal 1 MB')
}}
@@ -111,13 +129,20 @@ function CreateBanner() {
{
img ?
<Image radius="md" src={img} alt='' />
<Image
radius="md"
src={img}
alt=''
/>
:
<Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
<Dropzone.Accept>
<IconUpload
style={{ width: rem(52), height: rem(52), color: 'var(--mantine-color-blue-6)' }}
stroke={1.5}
/>
</Dropzone.Accept>
<Dropzone.Reject>
@@ -133,12 +158,18 @@ function CreateBanner() {
/>
</Dropzone.Idle>
<div>
<Text size="xl" inline>
<div >
<Text size="xl" inline>
Klik Untuk Upload Image
</Text>
<Text size="sm" c="dimmed" inline mt={7}>
Ukuran Foto Tidak Boleh Lebih Dari 1MB
<Text mb={2} size="sm" c="dimmed" inline mt={7}>
Mohon unggah gambar dalam resolusi
</Text>
<Text mb={2} size='sm' c={"dimmed"} inline>
1535 x 450 piksel untuk memastikan
</Text>
<Text size='sm' c={"dimmed"} inline>
tampilan sesuai dengan kebutuhan desain.
</Text>
</div>
</Group>
@@ -146,12 +177,19 @@ function CreateBanner() {
</Dropzone>
</Paper>
<Box mt={10}>
{touched.image && !imgForm && (
<Text size='sm' c={'red'}>
Silahkan Pilih Gambar
</Text>
)}
</Box>
<Box>
<TextInput
<TextInput
mt={10}
label={<Text >Judul Banner</Text>}
value={listData.title}
label="Judul Banner"
placeholder='Judul Banner'
value={listData.title}
onChange={(e) => {
setListData({ ...listData, title: e.target.value })
onValidation('title', e.target.value)
@@ -162,8 +200,13 @@ function CreateBanner() {
borderRadius: 10,
},
}}
required
size='md'
error={
touched.title && (
listData.title == "" ? "Judul Banner Tidak Boleh Kosong" : null
)
}
/>
</Box>
<Box pos={"fixed"} bottom={0} p={rem(20)} w={"100%"} style={{
@@ -174,14 +217,10 @@ function CreateBanner() {
<Button
size='lg'
color='white'
bg={tema.get().utama} radius={30} fullWidth
onClick={() => {
if (touched.title || touched.image) {
toast.error("Mohon Isi Semua Data")
} else {
setModal(true)
}
}}
bg={tema.get().utama}
radius={30}
fullWidth
onClick={() => { onCheck() }}
>Simpan</Button>
</Box>

31
src/module/banner/ui/edit_banner.tsx
View File

@@ -2,7 +2,7 @@
import { LayoutNavbarNew, TEMA, WARNA } from '@/module/_global';
import LayoutModal from '@/module/_global/layout/layout_modal';
import { useHookstate } from '@hookstate/core';
import { Box, Button, Image, Paper, rem, TextInput } from '@mantine/core';
import { Box, Button, Image, Paper, rem, Text, TextInput } from '@mantine/core';
import { Dropzone } from '@mantine/dropzone';
import { useShallowEffect } from '@mantine/hooks';
import _ from 'lodash';
@@ -44,14 +44,20 @@ export default function EditBanner() {
}
} else if (kategori == 'image') {
if (imgForm) {
setTouched({ ...touched, image: false })
} else {
setTouched({ ...touched, image: true })
} else {
setTouched({ ...touched, image: false })
}
}
}
function onCheck() {
if (Object.values(touched).some((v) => v == true))
return false
setModal(true)
}
async function getOneData() {
try {
const res = await funGetOneBanner(param.id)
@@ -128,7 +134,7 @@ export default function EditBanner() {
<TextInput
mt={10}
label="Judul Banner"
placeholder='Banner'
placeholder='Judul Banner'
value={data.title}
onChange={(e) => {
setData({ ...data, title: e.target.value })
@@ -142,6 +148,11 @@ export default function EditBanner() {
}}
required
size='md'
error={
touched.title && (
data.title == "" ? "Judul Banner Tidak Boleh Kosong" : null
)
}
/>
</Box>
<Box pos={"fixed"} bottom={0} p={rem(20)} w={"100%"} style={{
@@ -151,17 +162,11 @@ export default function EditBanner() {
}}>
<Button
size='lg'
color='white'
c='white'
bg={tema.get().utama}
radius={30}
fullWidth
onClick={() => {
if (touched.title || touched.image) {
toast.error('Mohon Isi Semua Data')
} else {
setModal(true)
}
}}
onClick={() => { onCheck() }}
>
Simpan
</Button>

0
src/module/banner/ui/git.keep
View File

195
src/module/banner/ui/list_banner.tsx
View File

@@ -1,22 +1,21 @@
'use client'
import { currentScroll, LayoutDrawer, LayoutModalViewFile, TEMA, WARNA } from '@/module/_global';
import { LayoutDrawer, LayoutModalViewFile, TEMA, WARNA } from '@/module/_global';
import SkeletonBanner from '@/module/_global/components/skeleton_banner';
import LayoutModal from '@/module/_global/layout/layout_modal';
import { useHookstate } from '@hookstate/core';
import { ActionIcon, Anchor, Box, Flex, Group, Image, Paper, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
import { useParams, useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
import { FaFile, FaPencil, FaTrash } from 'react-icons/fa6';
import { IDataBanner } from '../lib/type_banner';
import toast from 'react-hot-toast';
import { ActionIcon, Box, Flex, Group, Image, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { funDeleteBanner, funGetAllBanner, funGetOneBanner } from '../lib/api_banner';
import { HiMagnifyingGlass } from 'react-icons/hi2';
import { useParams, useRouter } from 'next/navigation';
import { useState } from 'react';
import toast from 'react-hot-toast';
import { FaFile, FaPencil, FaTrash } from 'react-icons/fa6';
import { funDeleteBanner, funGetAllBanner } from '../lib/api_banner';
import { IDataBanner } from '../lib/type_banner';
function ListBanner() {
const [isList, setIsList] = useState(false)
const tema = useHookstate(TEMA)
const router = useRouter();
const param = useParams<{ id: string }>()
const [isOpenModalView, setOpenModalView] = useState(false)
const [isOpenModal, setOpenModal] = useState(false)
const [openDrawer, setOpenDrawer] = useState(false);
@@ -26,18 +25,12 @@ function ListBanner() {
const [isData, setData] = useState<IDataBanner[]>([])
const [idData, setIdData] = useState('')
const [isPage, setPage] = useState(1)
const [searchQuerry, setSearchQuerry] = useState('')
// const { value: containerRef } = useHookstate(currentScroll);
const handleList = () => {
setIsList(!isList)
}
const fetchData = async (loading: boolean) => {
try {
if (loading)
setLoading(true)
const response = await funGetAllBanner('?search=' + searchQuerry)
const response = await funGetAllBanner('?page=' + isPage)
if (response.success) {
setData(response.data.map((banner: { image: any; }) => ({ ...banner, image: banner.image })));
} else {
@@ -52,15 +45,10 @@ function ListBanner() {
}
}
function searchBanner(search: string) {
setSearchQuerry(search)
setPage(1)
}
useShallowEffect(() => {
fetchData(true)
}, [searchQuerry])
setPage(1)
}, [isPage])
useShallowEffect(() => {
fetchData(false)
@@ -92,65 +80,61 @@ function ListBanner() {
return (
<Box pt={2}>
<Box p={20}>
<TextInput
styles={{
input: {
color: tema.get().utama,
borderRadius: '#A3A3A3',
borderColor: '#A3A3A3',
},
}}
size='md'
radius={30}
leftSection={<HiMagnifyingGlass size={20} />}
placeholder='pencarian'
value={searchQuerry}
onChange={(val) => { searchBanner(val.target.value) }}
/>
{loading
?
Array(7)
.fill(null)
.map((_, i) => (
<Box key={i} mb={20}>
<SkeletonBanner />
</Box>
))
:
<Box >
{isData.length == 0 ?
<Box style={{ display: "flex", justifyContent: "center", alignItems: "center", height: "75vh" }}>
<Text c={"dimmed"} ta={"center"} fs={"italic"}>Tidak ada Banner</Text>
</Box>
:
isData.map((v, i) => {
return (
<Box key={i} mb={20}>
<Paper radius={'md'} withBorder onClick={() => {
setIdData(v.id);
setIdDataStorage(v.image);
setExtension(v.extension);
setOpenDrawer(true)
}
}
style={{
width: '100%',
maxWidth: 550,
height: 85,
backgroundColor: 'transparent',
border: `1px solid ${tema.get().bgTotalKegiatan}`
}}>
<Group mt={"25"}>
<ActionIcon variant='transparent' w={"100"}>
<Image
radius={"xs"}
src={`https://wibu-storage.wibudev.com/api/files/${v.image}`}
alt=''
w={76}
h={38.9}
/>
</ActionIcon>
<Text c={"dark"} fz={"h4"}>{v.title}</Text>
</Group>
</Paper>
</Box>
)
})
}
</Box>
}
</Box>
<Box p={20}>
<Anchor underline='never'>
<Stack align='center' justify='center'>
{isData.map((v, index) => (
<Paper radius={'md'} withBorder key={index} onClick={() => {
setIdData(v.id);
setIdDataStorage(v.image);
setExtension(v.extension);
setOpenDrawer(true)
}
}
style={{
width: '100%',
maxWidth: 550,
height: 85,
backgroundColor: 'transparent',
border: `1px solid ${tema.get().bgTotalKegiatan}`
}}>
<Group mt={"15"}>
<ActionIcon variant='transparent' w={"100"}>
<Image
radius={"xs"}
src={`https://wibu-storage.wibudev.com/api/files/${v.image}`}
alt=''
w={76}
h={38.9}
/>
</ActionIcon>
<Flex direction={"column"}>
<Text c={"dark"} fz={"h4"}>{v.title}</Text>
</Flex>
</Group>
</Paper>
))}
</Stack>
</Anchor>
</Box>
<LayoutDrawer opened={openDrawer} title={'Menu'} onClose={() => setOpenDrawer(false)}>
<Box>
<Stack pt={10}>
@@ -161,22 +145,22 @@ function ListBanner() {
alignItems: "flex-start"
}}
>
<Flex onClick={() => router.push(`/banner/edit/${idData}`)} direction="column" align="center" justify="center" pb={20}>
<Box>
<FaPencil size={30} color={WARNA.biruTua} />
</Box>
<Box>
<Text c={tema.get().utama} fz={{ base: 'sm', md: 'md' }}>Edit</Text>
</Box>
</Flex>
<Flex onClick={() => router.push(`/banner/edit/${idData}`)} direction="column" align="center" justify="center" pb={20}>
<Box>
<FaPencil size={30} color={WARNA.biruTua} />
</Box>
<Box>
<Text c={tema.get().utama} fz={{ base: 'sm', md: 'md' }}>Edit</Text>
</Box>
</Flex>
<Flex onClick={() => { setOpenModalView(true) }} direction={"column"} align={"center"} justify={"center"}>
<Box>
<FaFile size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={tema.get().utama} fz={{ base: 'sm', md: 'md'}}>Lihat File</Text>
<Text c={tema.get().utama} fz={{ base: 'sm', md: 'md' }}>Lihat File</Text>
</Box>
</Flex>
@@ -185,7 +169,7 @@ function ListBanner() {
<FaTrash size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={tema.get().utama} fz={{ base: 'sm', md: 'md'}}>Hapus</Text>
<Text c={tema.get().utama} fz={{ base: 'sm', md: 'md' }}>Hapus</Text>
</Box>
</Flex>
</SimpleGrid>
@@ -210,28 +194,3 @@ function ListBanner() {
}
export default ListBanner;
// useEffect(() => {
// const handleScroll = async () => {
// if (containerRef && containerRef.current) {
// const scrollTop = containerRef.current.scrollTop;
// const containerHeight = containerRef.current.clientHeight;
// const scrollHeight = containerRef.current.scrollHeight;
// if (scrollTop + containerHeight + 1 >= scrollHeight) {
// setPage(isPage + 1)
// }
// }
// };
// const container = containerRef?.current;
// container?.addEventListener("scroll", handleScroll);
// return () => {
// container?.removeEventListener("scroll", handleScroll);
// };
// }, [containerRef, isPage]);

13
src/module/calender/ui/create_calender_division_caleder.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import { LayoutNavbarNew, TEMA } from '@/module/_global';
import { keyWibu, LayoutNavbarNew, TEMA } from '@/module/_global';
import LayoutModal from '@/module/_global/layout/layout_modal';
import { useHookstate } from '@hookstate/core';
import { Avatar, Box, Button, Divider, Grid, Group, rem, Select, SimpleGrid, Stack, Text, Textarea, TextInput } from '@mantine/core';
@@ -10,6 +10,7 @@ import { useParams, useRouter } from 'next/navigation';
import { useState } from 'react';
import toast from 'react-hot-toast';
import { IoIosArrowDropright } from 'react-icons/io';
import { useWibuRealtime } from 'wibu-realtime';
import { funCreateCalender } from '../lib/api_calender';
import { IFormMemberCalender } from '../lib/type_calender';
import { globalCalender } from '../lib/val_calender';
@@ -47,6 +48,11 @@ export default function CreateCalenderDivisionCaleder() {
desc: "",
repeatValue: "1"
})
const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
async function onSubmit(val: boolean) {
try {
@@ -65,6 +71,11 @@ export default function CreateCalenderDivisionCaleder() {
})
if (response.success) {
setDataRealtime([{
category: "calendar-event",
division: param.id,
date: isData.dateStart
}])
setModal(false)
router.push(`/division/${param.id}/calender`)
toast.success(response.message)

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

@@ -1,14 +1,16 @@
import { keyWibu } from '@/module/_global';
import { Box, Divider, Flex, Grid, Group, Indicator, Skeleton, Text } from '@mantine/core';
import { DatePicker, DatePickerProps } from '@mantine/dates';
import { useParams, useRouter } from 'next/navigation';
import React, { useState } from 'react';
import { funGetAllCalender, funGetIndicatorCalender } from '../lib/api_calender';
import { useMediaQuery, useSetState, useShallowEffect } from '@mantine/hooks';
import { IDataCalender } from '../lib/type_calender';
import moment from 'moment';
import 'dayjs/locale/id';
import _ from 'lodash';
import moment from 'moment';
import { useParams, useRouter } from 'next/navigation';
import { useState } from 'react';
import toast from 'react-hot-toast';
import 'dayjs/locale/id'
import { useWibuRealtime } from 'wibu-realtime';
import { funGetAllCalender, funGetIndicatorCalender } from '../lib/api_calender';
import { IDataCalender } from '../lib/type_calender';
export default function DateEventDivision() {
@@ -20,11 +22,15 @@ export default function DateEventDivision() {
const [isMonth, setMonth] = useState<any>(moment().month() + 1)
const [loading, setLoading] = useState(true)
const isMobile = useMediaQuery('(max-width: 369px)');
const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
const getData = async (tgl: any) => {
const getData = async (tgl: any, loading: boolean) => {
try {
setLoading(true)
setLoading(loading)
const response = await funGetAllCalender('?division=' + param.id + '&date=' + tgl)
if (response.success) {
setData(response.data)
@@ -66,12 +72,12 @@ export default function DateEventDivision() {
function change(val: Date) {
const a: any = moment(new Date(val)).format('YYYY-MM-DD')
setDate(a)
getData(a)
getData(a, true)
}
useShallowEffect(() => {
getData(isDate)
getData(isDate, true)
getIndicator(isDate)
}, [])
@@ -88,6 +94,15 @@ export default function DateEventDivision() {
);
};
useShallowEffect(() => {
if (dataRealTime && dataRealTime.some((i: any) => i.category == 'calendar-event' && i.division == param.id && i.date == isDate)) {
getIndicator(isDate)
getData(isDate, false)
} else if (dataRealTime && dataRealTime.some((i: any) => i.category == 'calendar-event' && i.division == param.id && i.date != isDate)) {
getIndicator(isDate)
}
}, [dataRealTime])

111
src/module/discussion/ui/detail_discussion.tsx
View File

@@ -1,21 +1,22 @@
"use client"
import { globalRole, keyWibu, LayoutDrawer, LayoutNavbarNew, TEMA } from "@/module/_global";
import { globalIsAdminDivision } from "@/module/division_new";
import { useHookstate } from "@hookstate/core";
import { ActionIcon, Avatar, Badge, Box, Center, Divider, Flex, Grid, Group, rem, Skeleton, Spoiler, Text, TextInput } from "@mantine/core";
import { globalRole, LayoutDrawer, LayoutNavbarNew, TEMA } from "@/module/_global";
import { GrChatOption } from "react-icons/gr";
import { LuSendHorizonal } from "react-icons/lu";
import { useState } from "react";
import { funCreateComent, funGetDiscussionById } from "../lib/api_discussion";
import { useShallowEffect } from "@mantine/hooks";
import { IDetailDiscussion } from "../lib/type_discussion";
import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
import moment from "moment";
import "moment/locale/id";
import { useParams, useRouter } from "next/navigation";
import { useState } from "react";
import toast from "react-hot-toast";
import { useHookstate } from "@hookstate/core";
import { globalRefreshDiscussion } from "../lib/val_discussion";
import { GrChatOption } from "react-icons/gr";
import { HiMenu } from "react-icons/hi";
import { LuSendHorizonal } from "react-icons/lu";
import { useWibuRealtime } from "wibu-realtime";
import { funCreateComent, funGetDiscussionById } from "../lib/api_discussion";
import { IDetailDiscussion } from "../lib/type_discussion";
import { globalRefreshDiscussion } from "../lib/val_discussion";
import DrawerDetailDiscussion from "./drawer_detail_discussion";
import {globalIsAdminDivision } from "@/module/division_new";
export default function DetailDiscussion({ id, idDivision }: { id: string, idDivision: string }) {
const [isData, setData] = useState<IDetailDiscussion>()
@@ -28,10 +29,16 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
const [isCreator, setCreator] = useState(false)
const adminLogin = useHookstate(globalIsAdminDivision)
const tema = useHookstate(TEMA)
const isMobile = useMediaQuery('(max-width: 369px)');
const isMobile2 = useMediaQuery("(max-width: 438px)");
const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
const getData = async () => {
const getData = async (loading: boolean) => {
try {
setIsLoad(true)
setIsLoad(loading)
const response = await funGetDiscussionById(id)
setData(response.data)
setIsLoad(false)
@@ -44,9 +51,15 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
}
useShallowEffect(() => {
getData()
getData(true)
}, [refresh.get()])
useShallowEffect(() => {
if (dataRealTime && dataRealTime.some((i: any) => i.category == 'discussion-detail' && i.id == id)) {
getData(false)
}
}, [dataRealTime])
async function reloadData() {
try {
const response = await funGetDiscussionById(id)
@@ -65,6 +78,10 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
if (response.success) {
setIsComent("")
setDataRealtime([{
category: "discussion-detail",
id: id,
}])
reloadData()
} else {
toast.error(response.message)
@@ -125,24 +142,22 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
<>
{isData?.totalComments == 0 ?
<Box mb={60} pl={5} pr={5}>
<Flex
justify={"space-between"}
align={"center"}
mt={20}
>
{isData?.username ?
<Group>
<Avatar src={`https://wibu-storage.wibudev.com/api/files/${isData?.user_img}`} alt="it's me" size="lg" />
<Box>
<Text c={tema.get().utama} fw={"bold"}>
{isData?.username}
</Text>
<Badge color={isData?.status === 1 ? "green" : "red"} size="sm">{isData?.status === 1 ? "BUKA" : "TUTUP"}</Badge>
</Box>
</Group> : ""
}
<Text c={"grey"} fz={13}>{isData?.createdAt}</Text>
</Flex>
<Grid align='center'>
<Grid.Col span={1}>
<Avatar src={`https://wibu-storage.wibudev.com/api/files/${isData?.user_img}`} alt="it's me" size={'lg'} />
</Grid.Col>
<Grid.Col span={8}>
<Box pl={isMobile2 ? 40 : 30}>
<Text lineClamp={1} fz={isMobile ? 15 : 16}>{isData?.username}</Text>
<Badge color={isData?.status === 1 ? "green" : "red"} size="sm">{isData?.status === 1 ? "BUKA" : "TUTUP"}</Badge>
</Box>
</Grid.Col>
<Grid.Col span={3}>
<Text c={tema.get().utama} ta={'end'} fz={isMobile ? 15 : 16}>
{isData?.createdAt}
</Text>
</Grid.Col>
</Grid>
<Box mt={10}>
<Spoiler maxHeight={50} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
<Text
@@ -164,26 +179,20 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
</Group>
</Box> :
<Box mb={20}>
<Grid align="center">
<Grid.Col span={2}>
<Avatar src={`https://wibu-storage.wibudev.com/api/files/${isData?.user_img}`} alt="it's me" size="lg" />
<Grid align='center'>
<Grid.Col span={1}>
<Avatar src={`https://wibu-storage.wibudev.com/api/files/${isData?.user_img}`} alt="it's me" size={'lg'} />
</Grid.Col>
<Grid.Col span={6}>
<Box pl={{
sm: 0,
lg: 0,
xl: 0,
md: 0,
base: 10
}}>
<Text c={tema.get().utama} fw={"bold"} lineClamp={1}>
{isData?.username}
</Text>
<Grid.Col span={8}>
<Box pl={isMobile2 ? 40 : 30}>
<Text lineClamp={1} fz={isMobile ? 15 : 16}>{isData?.username}</Text>
<Badge color={isData?.status === 1 ? "green" : "red"} size="sm">{isData?.status === 1 ? "BUKA" : "TUTUP"}</Badge>
</Box>
</Grid.Col>
<Grid.Col span={4}>
<Text c={"grey"} ta={"end"} fz={13}>{isData?.createdAt}</Text>
<Grid.Col span={3}>
<Text c={tema.get().utama} ta={'end'} fz={isMobile ? 15 : 16}>
{isData?.createdAt}
</Text>
</Grid.Col>
</Grid>
<Box mt={10}>
@@ -245,17 +254,17 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
return (
<Box key={i} p={10} >
<Grid align="center">
<Grid.Col span={2}>
<Grid.Col span={1}>
<Avatar alt="it's me" size="md" src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} />
</Grid.Col>
<Grid.Col span={6}>
<Grid.Col span={8}>
<Box>
<Text c={tema.get().utama} fw={"bold"} lineClamp={1} fz={15}>
<Text c={tema.get().utama} fw={"bold"} lineClamp={1} pl={isMobile2 ? 25 : 15} fz={isMobile ? 15 : 16}>
{v.username}
</Text>
</Box>
</Grid.Col>
<Grid.Col span={4}>
<Grid.Col span={3}>
<Text c={"grey"} ta={"end"} fz={13}>{moment(v.createdAt).format("ll")}</Text>
</Grid.Col>
</Grid>

17
src/module/discussion/ui/drawer_detail_discussion.tsx
View File

@@ -1,14 +1,15 @@
import { TEMA } from "@/module/_global";
import { keyWibu, TEMA } from "@/module/_global";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { Box, Stack, SimpleGrid, Flex, Text } from "@mantine/core";
import { useHookstate } from "@hookstate/core";
import { Box, Flex, SimpleGrid, Stack, Text } from "@mantine/core";
import { useParams, useRouter } from "next/navigation";
import { useState } from "react";
import toast from "react-hot-toast";
import { BsTrash3 } from "react-icons/bs";
import { FaCheck, FaPencil } from "react-icons/fa6";
import { MdClose } from "react-icons/md";
import { useWibuRealtime } from "wibu-realtime";
import { funDeleteDiscussion, funEditStatusDiscussion } from "../lib/api_discussion";
import { useParams, useRouter } from "next/navigation";
import { useHookstate } from "@hookstate/core";
import { globalRefreshDiscussion } from "../lib/val_discussion";
export default function DrawerDetailDiscussion({ onSuccess, id, status, idDivision }: { onSuccess: (val: boolean) => void, id: string, status: number, idDivision: string }) {
@@ -18,6 +19,10 @@ export default function DrawerDetailDiscussion({ onSuccess, id, status, idDivisi
const param = useParams<{ id: string, detail: string }>()
const refresh = useHookstate(globalRefreshDiscussion)
const tema = useHookstate(TEMA)
const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
async function fetchStatusDiscussion(val: boolean) {
@@ -28,6 +33,10 @@ export default function DrawerDetailDiscussion({ onSuccess, id, status, idDivisi
if (response.success) {
toast.success(response.message)
refresh.set(!refresh.get())
setDataRealtime([{
category: "discussion-detail",
id: id,
}])
onSuccess(false)
setValModalStatus(false)
} else {

11
src/module/discussion/ui/form_edit_discussion.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import { TEMA } from "@/module/_global"
import { keyWibu, TEMA } from "@/module/_global"
import LayoutModal from "@/module/_global/layout/layout_modal"
import { Box, Group, Avatar, Textarea, Button, Grid, rem, Skeleton } from "@mantine/core"
import { useParams, useRouter } from "next/navigation"
@@ -9,6 +9,7 @@ import { funEditDiscussion, funGetDiscussionById } from "../lib/api_discussion"
import { useShallowEffect } from "@mantine/hooks"
import { funGetProfileByCookies } from "@/module/user/profile/lib/api_profile"
import { useHookstate } from "@hookstate/core"
import { useWibuRealtime } from "wibu-realtime"
export default function FormEditDiscussion() {
const [isValModal, setValModal] = useState(false)
@@ -22,6 +23,10 @@ export default function FormEditDiscussion() {
const [touched, setTouched] = useState({
desc: false,
});
const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
async function fetchGetOneDiscussion() {
try {
@@ -45,6 +50,10 @@ export default function FormEditDiscussion() {
if (response.success) {
toast.success(response.message)
setValModal(false)
setDataRealtime([{
category: "discussion-detail",
id: param.detail,
}])
router.push(`/division/${param.id}/discussion/${param.detail}`)
} else {
toast.error(response.message)

1
src/module/division_new/lib/type_division.ts
View File

@@ -31,6 +31,7 @@ export interface IDataJumlahDetailDivision {
export interface IDataTaskOnDetailDivision {
id: string,
idProject: string,
title: string,
dateStart: string,
dateEnd: string,

72
src/module/division_new/ui/carousel_division.tsx
View File

@@ -1,13 +1,46 @@
'use client'
import React, { useRef } from 'react';
import { Carousel } from '@mantine/carousel';
import { TEMA } from '@/module/_global';
import Autoplay from 'embla-carousel-autoplay';
import { Flex, Text } from '@mantine/core';
import { funGetAllBanner, IDataBanner } from '@/module/banner';
import { funGetHome } from '@/module/home';
import { useHookstate } from '@hookstate/core';
import { Carousel } from '@mantine/carousel';
import { Flex, Image, Text } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import Autoplay from 'embla-carousel-autoplay';
import { useRef, useState } from 'react';
import toast from 'react-hot-toast';
export default function CarouselDivision() {
const autoplay = useRef(Autoplay({ delay: 5000 }));
const tema = useHookstate(TEMA)
const [isDesa, setDesa] = useState("")
const [isData, setData] = useState<IDataBanner[]>([])
const fetchData = async () => {
try {
const res_banner = await funGetAllBanner()
if (res_banner.success) {
setData(res_banner.data)
} else {
toast.error(res_banner.message);
}
const response = await funGetHome('?cat=header')
if (response.success) {
setDesa(response.data.village)
} else {
toast.error(response.message);
}
} catch (error) {
toast.error("Gagal mendapatkan data, coba lagi nanti");
console.error(error);
}
};
useShallowEffect(() => {
fetchData();
}, []);
return (
<>
<Carousel
@@ -17,21 +50,22 @@ export default function CarouselDivision() {
onMouseEnter={autoplay.current.stop}
onMouseLeave={autoplay.current.reset}
>
<Carousel.Slide bg={tema.get().utama} style={{ borderRadius: 10 }}>
<Flex justify={'center'} h={"100%"} align={'center'}>
<Text c={"white"}>INFORMASI DARMASABA</Text>
</Flex>
</Carousel.Slide>
<Carousel.Slide bg={tema.get().utama} style={{ borderRadius: 10 }}>
<Flex justify={'center'} h={"100%"} align={'center'}>
<Text c={"white"}>INFORMASI DARMASABA</Text>
</Flex>
</Carousel.Slide>
<Carousel.Slide bg={tema.get().utama} style={{ borderRadius: 10 }}>
<Flex justify={'center'} h={"100%"} align={'center'}>
<Text c={"white"}>INFORMASI DARMASABA</Text>
</Flex>
</Carousel.Slide>
{
isData.length > 0 ?
isData.map((item, index) => (
<Carousel.Slide key={index} bg={tema.get().utama} style={{ borderRadius: 10 }}>
<Image alt={item.title} h={"100%"} style={{ borderRadius: 10 }} src={`https://wibu-storage.wibudev.com/api/files/${item.image}`} />
</Carousel.Slide>
))
:
[...Array(3)].map((_, index) => (
<Carousel.Slide key={index} bg={tema.get().utama} style={{ borderRadius: 10 }}>
<Flex justify={'center'} h={"100%"} align={'center'}>
<Text c={"white"}>INFORMASI {isDesa.toUpperCase()}</Text>
</Flex>
</Carousel.Slide>
))
}
</Carousel>
</>
);

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

@@ -1,18 +1,18 @@
'use client'
import { currentScroll, globalRole, LayoutDrawer, LayoutNavbarNew, SkeletonList, SkeletonSingle, TEMA } from '@/module/_global';
import { currentScroll, globalNotifPage, globalRole, LayoutDrawer, LayoutNavbarNew, ReloadButtonTop, SkeletonList, TEMA } from '@/module/_global';
import { useHookstate } from '@hookstate/core';
import { ActionIcon, Avatar, Box, Card, Center, Divider, Flex, Grid, Group, Skeleton, Text, TextInput, Title } from '@mantine/core';
import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import _ from 'lodash';
import { useRouter, useSearchParams } from 'next/navigation';
import React, { useEffect, useState } from 'react';
import { useEffect, useState } from 'react';
import toast from 'react-hot-toast';
import { HiMenu } from 'react-icons/hi';
import { HiMagnifyingGlass, HiMiniUserGroup, HiOutlineListBullet, HiSquares2X2 } from 'react-icons/hi2';
import { MdAccountCircle } from 'react-icons/md';
import DrawerDivision from './drawer_division';
import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import { IDataDivison } from '../lib/type_division';
import { funGetAllDivision } from '../lib/api_division';
import toast from 'react-hot-toast';
import { useHookstate } from '@hookstate/core';
import _ from 'lodash';
import { IDataDivison } from '../lib/type_division';
import DrawerDivision from './drawer_division';
export default function ListDivision() {
const [isList, setIsList] = useState(false)
@@ -29,8 +29,9 @@ export default function ListDivision() {
const tema = useHookstate(TEMA)
const { value: containerRef } = useHookstate(currentScroll);
const [isPage, setPage] = useState(1)
const paddingLift = useMediaQuery('(max-width: 505px)')
const [isRefresh, setRefresh] = useState(false)
const notifLoadPage = useHookstate(globalNotifPage)
const handleList = () => {
@@ -39,21 +40,23 @@ export default function ListDivision() {
const fetchData = async (loading: boolean) => {
try {
if (loading)
setLoading(true);
setLoading(loading);
if (isPage == 1) {
setData([])
}
const response = await funGetAllDivision('?search=' + searchQuery + '&group=' + group + '&page=' + isPage)
if (response.success) {
setJumlah(response.total)
setNameGroup(response.filter.name)
if (isPage == 1) {
setData(response.data)
}else{
setData([...data, ...response.data])
} else {
setData((data) => [...data, ...response.data])
}
} else {
toast.error(response.message);
}
setLoading(false);
} catch (error) {
toast.error("Gagal mendapatkan divisi, coba lagi nanti");
console.error(error);
@@ -74,28 +77,46 @@ export default function ListDivision() {
useShallowEffect(() => {
fetchData(false)
}, [isPage])
}, [isPage])
useEffect(() => {
const handleScroll = async () => {
if (containerRef && containerRef.current) {
useEffect(() => {
const handleScroll = async () => {
if (containerRef && containerRef.current) {
const scrollTop = containerRef.current.scrollTop;
const containerHeight = containerRef.current.clientHeight;
const scrollHeight = containerRef.current.scrollHeight;
if (scrollTop + containerHeight >= scrollHeight) {
setPage(isPage + 1)
setPage(isPage + 1)
}
}
};
}
};
const container = containerRef?.current;
container?.addEventListener("scroll", handleScroll);
const container = containerRef?.current;
container?.addEventListener("scroll", handleScroll);
return () => {
container?.removeEventListener("scroll", handleScroll);
};
}, [containerRef, isPage]);
return () => {
container?.removeEventListener("scroll", handleScroll);
};
}, [containerRef, isPage]);
useShallowEffect(() => {
if (notifLoadPage.get().category == 'division' && notifLoadPage.get().load == true) {
setRefresh(true)
}
}, [notifLoadPage.get().load])
function onRefresh() {
notifLoadPage.set({
category: '',
load: false
})
setRefresh(false)
setPage(1)
setTimeout(() => {
fetchData(false)
}, 500)
}
return (
@@ -109,6 +130,14 @@ export default function ListDivision() {
} />
<Box p={20}>
{
isRefresh &&
<ReloadButtonTop
onReload={() => { onRefresh() }}
title='UPDATE'
/>
}
<Grid justify='center' align='center'>
<Grid.Col span={10}>
<TextInput
@@ -139,12 +168,12 @@ export default function ListDivision() {
</Grid>
<Box pt={20}>
{roleLogin.get() == 'supadmin' && <Text>Filter by: {nameGroup}</Text>}
<Box bg={tema.get().bgTotalKegiatan} p={10} style={{ borderRadius: 10 }}>
<Text fw={'bold'} c={tema.get().utama}>Total Divisi</Text>
<Flex justify={'center'} align={'center'} h={'100%'}>
<Text fz={40} fw={'bold'} c={tema.get().utama}>{jumlah}</Text>
</Flex>
</Box>
<Box bg={tema.get().bgTotalKegiatan} p={10} style={{ borderRadius: 10 }}>
<Text fw={'bold'} c={tema.get().utama}>Total Divisi</Text>
<Flex justify={'center'} align={'center'} h={'100%'}>
<Text fz={40} fw={'bold'} c={tema.get().utama}>{jumlah}</Text>
</Flex>
</Box>
</Box>
{isList ? (
<Box pt={20}>
@@ -153,66 +182,66 @@ export default function ListDivision() {
.fill(null)
.map((_, i) => (
<Box key={i}>
<SkeletonList/>
<SkeletonList />
</Box>
))
:
_.isEmpty(data)
?
<Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh' }}>
<Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada Divisi</Text>
</Box>
:
data?.map((v: any, i: any) => {
return (
<Box key={i}>
<Grid align='center' onClick={() => router.push(`/division/${v.id}`)}>
<Grid.Col span={{
base: 1,
xs: 1,
sm: 1,
md: 1,
lg: 1,
xl: 1
}}>
<Group >
<Center>
<ActionIcon
variant="gradient"
size={50}
aria-label="Gradient action icon"
radius={100}
bg={tema.get().bgFiturHome}
>
<HiMiniUserGroup size={25} color={tema.get().utama} />
</ActionIcon>
</Center>
</Group>
</Grid.Col>
<Grid.Col span={{
base: 11,
xs: 11,
sm: 11,
md: 11,
lg: 11,
xl: 11,
}}>
<Box>
<Box w={{
base: 280,
xl: 430
}}>
<Text truncate="end" pl={paddingLift ? 30 : 20}>
{v.name}
</Text>
?
<Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh' }}>
<Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada Divisi</Text>
</Box>
:
data?.map((v: any, i: any) => {
return (
<Box key={i}>
<Grid align='center' onClick={() => router.push(`/division/${v.id}`)}>
<Grid.Col span={{
base: 1,
xs: 1,
sm: 1,
md: 1,
lg: 1,
xl: 1
}}>
<Group >
<Center>
<ActionIcon
variant="gradient"
size={50}
aria-label="Gradient action icon"
radius={100}
bg={tema.get().bgFiturHome}
>
<HiMiniUserGroup size={25} color={tema.get().utama} />
</ActionIcon>
</Center>
</Group>
</Grid.Col>
<Grid.Col span={{
base: 11,
xs: 11,
sm: 11,
md: 11,
lg: 11,
xl: 11,
}}>
<Box>
<Box w={{
base: 280,
xl: 430
}}>
<Text truncate="end" pl={paddingLift ? 30 : 20}>
{v.name}
</Text>
</Box>
</Box>
</Box>
</Grid.Col>
</Grid>
<Divider my="sm" />
</Box>
);
})
</Grid.Col>
</Grid>
<Divider my="sm" />
</Box>
);
})
}
</Box>
) : (

6
src/module/division_new/ui/list_task.tsx
View File

@@ -55,7 +55,7 @@ export default function ListTaskOnDetailDivision() {
.map((_, i) => (
<Stack align="stretch" justify="center" key={i}>
<Skeleton height={80} radius="md" m={0} w={isMobile ? "80%" : "90%"} />
<Skeleton height={10} radius="md" m={0} w={isMobile ? "80%" : "90%"}/>
<Skeleton height={10} radius="md" m={0} w={isMobile ? "80%" : "90%"} />
</Stack>
))
:
@@ -72,8 +72,8 @@ export default function ListTaskOnDetailDivision() {
<Box p={20} w={{
base: isMobile ? 230 : 300,
md: 400
}} onClick={() => router.push(`/task/${v.id}`)} bg={"white"} style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}>
<Text fw={'bold'} c={tema.get().utama} lineClamp={1}>{v.title+' - '+ v.projectTitle}</Text>
}} onClick={() => router.push(`/division/${param.id}/task/${v.idProject}`)} bg={"white"} style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}>
<Text fw={'bold'} c={tema.get().utama} lineClamp={1}>{v.title + ' - ' + v.projectTitle}</Text>
<Group justify="space-between" mt={20}>
<Group gap={5} align="center">
<CiClock2 size={18} />

70
src/module/document/ui/drawer_cut_documents.tsx
View File

@@ -1,47 +1,18 @@
import { TEMA } from "@/module/_global";
import {
Box,
Breadcrumbs,
Button,
Divider,
Flex,
Grid,
Group,
Modal,
ScrollArea,
Skeleton,
Text,
TextInput,
} from "@mantine/core";
import React, { useState } from "react";
import { keyWibu, TEMA } from "@/module/_global";
import { useHookstate } from "@hookstate/core";
import { Box, Breadcrumbs, Button, Divider, Flex, Grid, Group, Modal, ScrollArea, Skeleton, Text, TextInput, } from "@mantine/core";
import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
import { useParams } from "next/navigation";
import { useState } from "react";
import toast from "react-hot-toast";
import { FcFolder } from "react-icons/fc";
import {
funCreateFolder,
funGetAllDocument,
funMoveDocument,
} from "../lib/api_document";
import { useParams } from "next/navigation";
import {
IDataDocument,
IFormDetailMoreItem,
IJalurItem,
} from "../lib/type_document";
import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
import { MdFolder } from "react-icons/md";
import router from "next/router";
import { GoChevronRight } from "react-icons/go";
import { useHookstate } from "@hookstate/core";
import { MdFolder } from "react-icons/md";
import { funCreateFolder, funGetAllDocument } from "../lib/api_document";
import { IDataDocument, IFormDetailMoreItem, IJalurItem, } from "../lib/type_document";
import { useWibuRealtime } from "wibu-realtime";
export default function DrawerCutDocuments({
category,
onChoosePath,
data,
}: {
category: string;
data: IFormDetailMoreItem[];
onChoosePath: (val: string) => void;
}) {
export default function DrawerCutDocuments({ category, onChoosePath, data, }: { category: string; data: IFormDetailMoreItem[]; onChoosePath: (val: string) => void; }) {
const [opened, setOpened] = useState(false);
const param = useParams<{ id: string }>();
const [path, setPath] = useState("home");
@@ -51,6 +22,10 @@ export default function DrawerCutDocuments({
const tema = useHookstate(TEMA);
const [loading, setLoading] = useState(true);
const isMobile = useMediaQuery("(max-width: 369px)");
const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
async function onCreateFolder() {
try {
@@ -60,7 +35,11 @@ export default function DrawerCutDocuments({
idDivision: param.id,
});
if (res.success) {
getOneData();
getOneData(false);
setDataRealtime([{
category: "division-document",
id: path,
}])
} else {
toast.error(res.message);
}
@@ -72,9 +51,9 @@ export default function DrawerCutDocuments({
setOpened(false);
}
async function getOneData() {
async function getOneData(loading: boolean) {
try {
setLoading(true);
setLoading(loading);
const respon = await funGetAllDocument(
"?division=" + param.id + "&path=" + path + "&category=folder"
);
@@ -84,7 +63,6 @@ export default function DrawerCutDocuments({
} else {
toast.error(respon.message);
}
setLoading(false);
} catch (error) {
console.error(error);
toast.error("Gagal mendapatkan item, coba lagi nanti");
@@ -94,7 +72,7 @@ export default function DrawerCutDocuments({
}
useShallowEffect(() => {
getOneData();
getOneData(true);
}, [param.id, path]);
return (
@@ -133,7 +111,7 @@ export default function DrawerCutDocuments({
</Grid.Col>
</Grid>
</Box>
<Box pb={60}>
<Box pb={60}>
<Box>
<Breadcrumbs
separator={<GoChevronRight />}

38
src/module/document/ui/drawer_menu_document_division.tsx
View File

@@ -1,31 +1,33 @@
"use clent"
import { LayoutDrawer, TEMA } from '@/module/_global';
import { ActionIcon, Box, Button, Center, Divider, Flex, Grid, Modal, Progress, rem, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
import { useParams, useRouter, useSearchParams } from 'next/navigation';
import React, { useRef, useState } from 'react';
import toast from 'react-hot-toast';
import { FaFolderClosed, FaRegImage } from 'react-icons/fa6';
import { HiDocumentText } from 'react-icons/hi2';
import { IoAddCircle, IoDocumentText } from 'react-icons/io5';
import { funCreateFolder, funUploadFileDocument } from '../lib/api_document';
import { keyWibu, LayoutDrawer, TEMA } from '@/module/_global';
import { useHookstate } from '@hookstate/core';
import { globalRefreshDocument } from '../lib/val_document';
import { ActionIcon, Box, Button, Flex, Grid, Modal, Progress, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
import { Dropzone } from '@mantine/dropzone';
import _ from 'lodash';
import { useParams, useSearchParams } from 'next/navigation';
import { useRef, useState } from 'react';
import toast from 'react-hot-toast';
import { FaFolderClosed } from 'react-icons/fa6';
import { HiDocumentText } from 'react-icons/hi2';
import { IoAddCircle } from 'react-icons/io5';
import { useWibuRealtime } from 'wibu-realtime';
import { funCreateFolder, funUploadFileDocument } from '../lib/api_document';
import { globalRefreshDocument } from '../lib/val_document';
export default function DrawerMenuDocumentDivision() {
const [openDrawerDocument, setOpenDrawerDocument] = useState(false)
const [openModal, setOpenModal] = useState(false)
const router = useRouter()
const param = useParams<{ id: string }>()
const searchParams = useSearchParams()
const path = searchParams.get('path')
const refresh = useHookstate(globalRefreshDocument)
const openRef = useRef<() => void>(null)
const [fileForm, setFileForm] = useState<any>()
const tema = useHookstate(TEMA)
const [loading, setLoading] = useState(false)
const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
const [bodyFolder, setBodyFolder] = useState({
name: '',
path: (path == undefined || path == '' || path == null) ? 'home' : path,
@@ -37,6 +39,11 @@ export default function DrawerMenuDocumentDivision() {
const res = await funCreateFolder(bodyFolder)
if (!res.success) {
toast.error(res.message)
} else {
setDataRealtime([{
category: "division-document",
id: path,
}])
}
} catch (error) {
console.error(error);
@@ -63,6 +70,11 @@ export default function DrawerMenuDocumentDivision() {
if (!res.success) {
toast.error(res.message)
} else {
setDataRealtime([{
category: "division-document",
id: path,
}])
}
setLoading(false)
} catch (error) {

33
src/module/document/ui/drawer_more.tsx
View File

@@ -1,15 +1,16 @@
import { LayoutDrawer, TEMA } from "@/module/_global";
import { Box, Flex, Group, SimpleGrid, Stack, Text } from "@mantine/core";
import React, { useState } from "react";
import { LuFolders, LuFolderSymlink } from "react-icons/lu";
import DrawerCutDocuments from "./drawer_cut_documents";
import { IDataDocument, IFormDetailMoreItem } from "../lib/type_document";
import toast from "react-hot-toast";
import { funCopyDocument, funMoveDocument } from "../lib/api_document";
import { keyWibu, LayoutDrawer, TEMA } from "@/module/_global";
import { useHookstate } from "@hookstate/core";
import { globalRefreshDocument } from "../lib/val_document";
import { useParams } from "next/navigation";
import { Box, Flex, SimpleGrid, Stack, Text } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useParams } from "next/navigation";
import { useState } from "react";
import toast from "react-hot-toast";
import { LuFolders, LuFolderSymlink } from "react-icons/lu";
import { funCopyDocument, funMoveDocument } from "../lib/api_document";
import { IDataDocument } from "../lib/type_document";
import { globalRefreshDocument } from "../lib/val_document";
import DrawerCutDocuments from "./drawer_cut_documents";
import { useWibuRealtime } from "wibu-realtime";
export default function DrawerMore({ data }: { data: IDataDocument[] }) {
const [isCut, setIsCut] = useState(false)
@@ -18,12 +19,20 @@ export default function DrawerMore({ data }: { data: IDataDocument[] }) {
const param = useParams<{ id: string }>()
const [forbidCopy, setForbidCopy] = useState(true)
const tema = useHookstate(TEMA)
const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
async function onMoveItem(path: string) {
try {
const res = await funMoveDocument({ path, dataItem: data })
if (res.success) {
setDataRealtime([{
category: "division-document",
id: path,
}])
toast.success(res.message)
refresh.set(true)
} else {
@@ -41,6 +50,10 @@ export default function DrawerMore({ data }: { data: IDataDocument[] }) {
try {
const res = await funCopyDocument({ idDivision: param.id, path, dataItem: data })
if (res.success) {
setDataRealtime([{
category: "division-document",
id: path,
}])
toast.success(res.message)
refresh.set(true)
} else {

25
src/module/document/ui/drawer_share_document.tsx
View File

@@ -1,22 +1,7 @@
import { TEMA } from "@/module/_global";
import {
funGetListDivisionByIdDivision,
IDataDivison,
} from "@/module/division_new";
import { funGetListDivisionByIdDivision, IDataDivison, } from "@/module/division_new";
import { useHookstate } from "@hookstate/core";
import {
ActionIcon,
Box,
Button,
Divider,
Flex,
Grid,
Group,
ScrollArea,
Skeleton,
Stack,
Text
} from "@mantine/core";
import { ActionIcon, Box, Button, Divider, Flex, Grid, Group, ScrollArea, Skeleton, Stack, Text } from "@mantine/core";
import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
import { useParams } from "next/navigation";
import { useState } from "react";
@@ -26,11 +11,7 @@ import { funShareDocument } from "../lib/api_document";
import { IShareDivision } from "../lib/type_document";
import { globalRefreshDocument } from "../lib/val_document";
export default function DrawerShareDocument({
data,
}: {
data: IShareDivision[];
}) {
export default function DrawerShareDocument({ data, }: { data: IShareDivision[]; }) {
const [selectedFiles, setSelectedFiles] = useState<any>([]);
const [isData, setData] = useState<IDataDivison[]>([]);
const param = useParams<{ id: string }>();

96
src/module/document/ui/navbar_document_division.tsx
View File

@@ -1,58 +1,30 @@
"use client";
import {
LayoutDrawer,
LayoutModalViewFile,
LayoutNavbarNew,
TEMA,
} from "@/module/_global";
import {
ActionIcon,
Anchor,
Box,
Breadcrumbs,
Button,
Checkbox,
Divider,
Flex,
Grid,
Group,
Indicator,
Menu,
Modal,
rem,
Select,
SimpleGrid,
Skeleton,
Text,
TextInput,
} from "@mantine/core";
import React, { useState } from "react";
import { HiMenu } from "react-icons/hi";
import { FcDocument, FcFolder, FcImageFile } from "react-icons/fc";
import { BsDownload, BsListCheck } from "react-icons/bs";
import { keyWibu, LayoutDrawer, LayoutModalViewFile, LayoutNavbarNew, TEMA, } from "@/module/_global";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { funGetDivisionById } from "@/module/division_new";
import { useHookstate } from "@hookstate/core";
import { ActionIcon, Box, Breadcrumbs, Button, Checkbox, Divider, Flex, Grid, Group, Indicator, Menu, Modal, rem, SimpleGrid, Skeleton, Text, TextInput } from "@mantine/core";
import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
import { useParams, useRouter, useSearchParams } from "next/navigation";
import { useState } from "react";
import toast from "react-hot-toast";
import { AiOutlineDelete } from "react-icons/ai";
import { BsDownload, BsListCheck } from "react-icons/bs";
import { CgRename } from "react-icons/cg";
import { FaShare } from "react-icons/fa6";
import { FcDocument, FcFolder, FcImageFile } from "react-icons/fc";
import { GoChevronRight } from "react-icons/go";
import { HiMenu } from "react-icons/hi";
import { LuShare2 } from "react-icons/lu";
import { MdClose, MdOutlineMoreHoriz } from "react-icons/md";
import LayoutModal from "@/module/_global/layout/layout_modal";
import toast from "react-hot-toast";
import { useParams, useRouter, useSearchParams } from "next/navigation";
import { RiListCheck } from "react-icons/ri";
import { funDeleteDocument, funGetAllDocument, funRenameDocument, } from "../lib/api_document";
import { IDataDocument, IJalurItem } from "../lib/type_document";
import { globalRefreshDocument } from "../lib/val_document";
import DrawerMenuDocumentDivision from "./drawer_menu_document_division";
import DrawerMore from "./drawer_more";
import { funGetDivisionById } from "@/module/division_new";
import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
import {
funDeleteDocument,
funGetAllDocument,
funRenameDocument,
} from "../lib/api_document";
import { IDataDocument, IJalurItem } from "../lib/type_document";
import { useHookstate } from "@hookstate/core";
import { globalRefreshDocument } from "../lib/val_document";
import { RiListCheck } from "react-icons/ri";
import { GoChevronRight } from "react-icons/go";
import DrawerShareDocument from "./drawer_share_document";
import { FaShare } from "react-icons/fa6";
import { useWibuRealtime } from "wibu-realtime";
export default function NavbarDocumentDivision() {
const router = useRouter();
@@ -80,6 +52,10 @@ export default function NavbarDocumentDivision() {
const isMobile2 = useMediaQuery("(max-width: 496px)");
const tema = useHookstate(TEMA);
const [loading, setLoading] = useState(true);
const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
const [bodyRename, setBodyRename] = useState({
id: "",
name: "",
@@ -166,7 +142,11 @@ export default function NavbarDocumentDivision() {
try {
const respon = await funDeleteDocument(selectedFiles);
if (respon.success) {
getOneData();
getOneData(false);
setDataRealtime([{
category: "division-document",
id: path,
}])
} else {
toast.error(respon.message);
}
@@ -185,7 +165,11 @@ export default function NavbarDocumentDivision() {
try {
const res = await funRenameDocument(bodyRename);
if (res.success) {
getOneData();
setDataRealtime([{
category: "division-document",
id: path,
}])
getOneData(false);
} else {
toast.error(res.message);
}
@@ -199,21 +183,25 @@ export default function NavbarDocumentDivision() {
setRename(false);
}
async function getOneData() {
useShallowEffect(() => {
if (dataRealTime && dataRealTime.some((i: any) => i.category == 'division-document' && i.id == path)) {
getOneData(false)
}
}, [dataRealTime])
async function getOneData(loading: boolean) {
try {
setLoading(true);
setLoading(loading);
const respon = await funGetAllDocument(
"?division=" + param.id + "&path=" + path
);
if (respon.success) {
setDataDocument(respon.data);
setDataJalur(respon.jalur);
setLoading(false);
} else {
toast.error(respon.message);
setDataDocument([]);
setDataJalur([]);
setLoading(false);
}
const res = await funGetDivisionById(param.id);
if (res.success) {
@@ -242,7 +230,7 @@ export default function NavbarDocumentDivision() {
}, [selectedFiles]);
useShallowEffect(() => {
getOneData();
getOneData(true);
resetRefresh();
}, [param.id, path, refresh.get()]);

6
src/module/home/index.ts
View File

@@ -1,3 +1,5 @@
import { funGetHome } from "./lib/api_home";
import { globalParamJumlahNotif } from "./lib/val_home";
import ViewDetailFeature from "./ui/view_detail_feature";
import ViewHome from "./ui/view_home";
import ViewNotification from "./ui/view_notification";
@@ -6,4 +8,6 @@ import ViewSearch from "./ui/view_search";
export { ViewHome }
export { ViewDetailFeature }
export { ViewSearch }
export { ViewNotification }
export { ViewNotification }
export { funGetHome }
export { globalParamJumlahNotif }

3
src/module/home/lib/val_home.ts Normal file
View File

@@ -0,0 +1,3 @@
import { hookstate } from "@hookstate/core";
export const globalParamJumlahNotif = hookstate<boolean>(false)

74
src/module/home/ui/carosole.tsx
View File

@@ -1,13 +1,46 @@
'use client'
import React, { useRef } from 'react';
import { Carousel } from '@mantine/carousel';
import { TEMA, WARNA } from '@/module/_global';
import Autoplay from 'embla-carousel-autoplay';
import { Flex, Text } from '@mantine/core';
import { TEMA } from '@/module/_global';
import { funGetAllBanner, IDataBanner } from '@/module/banner';
import { useHookstate } from '@hookstate/core';
import { Carousel } from '@mantine/carousel';
import { Flex, Image, Text } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import Autoplay from 'embla-carousel-autoplay';
import { useRef, useState } from 'react';
import toast from 'react-hot-toast';
import { funGetHome } from '../lib/api_home';
export default function Carosole() {
const autoplay = useRef(Autoplay({ delay: 5000 }));
const tema = useHookstate(TEMA)
const [isDesa, setDesa] = useState("")
const [isData, setData] = useState<IDataBanner[]>([])
const fetchData = async () => {
try {
const res_banner = await funGetAllBanner()
if (res_banner.success) {
setData(res_banner.data)
} else {
toast.error(res_banner.message);
}
const response = await funGetHome('?cat=header')
if (response.success) {
setDesa(response.data.village)
} else {
toast.error(response.message);
}
} catch (error) {
toast.error("Gagal mendapatkan data, coba lagi nanti");
console.error(error);
}
};
useShallowEffect(() => {
fetchData();
}, []);
return (
<>
<Carousel
@@ -17,21 +50,22 @@ export default function Carosole() {
onMouseEnter={autoplay.current.stop}
onMouseLeave={autoplay.current.reset}
>
<Carousel.Slide bg={tema.get().utama} style={{ borderRadius: 10 }}>
<Flex justify={'center'} h={"100%"} align={'center'}>
<Text c={"white"}>INFORMASI DARMASABA</Text>
</Flex>
</Carousel.Slide>
<Carousel.Slide bg={tema.get().utama} style={{ borderRadius: 10 }}>
<Flex justify={'center'} h={"100%"} align={'center'}>
<Text c={"white"}>INFORMASI DARMASABA</Text>
</Flex>
</Carousel.Slide>
<Carousel.Slide bg={tema.get().utama} style={{ borderRadius: 10 }}>
<Flex justify={'center'} h={"100%"} align={'center'}>
<Text c={"white"}>INFORMASI DARMASABA</Text>
</Flex>
</Carousel.Slide>
{
isData.length > 0 ?
isData.map((item, index) => (
<Carousel.Slide key={index} bg={tema.get().utama} style={{ borderRadius: 10 }}>
<Image alt={item.title} h={"100%"} style={{ borderRadius: 10 }} src={`https://wibu-storage.wibudev.com/api/files/${item.image}`} />
</Carousel.Slide>
))
:
[...Array(3)].map((_, index) => (
<Carousel.Slide key={index} bg={tema.get().utama} style={{ borderRadius: 10 }}>
<Flex justify={'center'} h={"100%"} align={'center'}>
<Text c={"white"}>INFORMASI {isDesa.toUpperCase()}</Text>
</Flex>
</Carousel.Slide>
))
}
</Carousel>
</>
);

14
src/module/home/ui/header_home.tsx
View File

@@ -2,22 +2,26 @@
import { LayoutNavbarHome, TEMA } from "@/module/_global";
import { useHookstate } from "@hookstate/core";
import { ActionIcon, Box, Group, Indicator, Text } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useRouter } from "next/navigation";
import { useState } from "react";
import toast from "react-hot-toast";
import { HiMagnifyingGlass, HiOutlineBell, HiOutlineUser } from "react-icons/hi2";
import { funGetHome } from "../lib/api_home";
import { useShallowEffect } from "@mantine/hooks";
import { globalParamJumlahNotif } from "../lib/val_home";
export default function HeaderHome() {
const router = useRouter()
const tema = useHookstate(TEMA)
const [isDesa, setDesa] = useState("")
const [isNotif, setNotif] = useState(0)
const paramNotif = useHookstate(globalParamJumlahNotif)
const [loading, setLoading] = useState(true)
const fetchData = async () => {
try {
setLoading(true)
const response = await funGetHome('?cat=header')
if (response.success) {
setDesa(response.data.village)
@@ -28,6 +32,8 @@ export default function HeaderHome() {
} catch (error) {
toast.error("Gagal mendapatkan data, coba lagi nanti");
console.error(error);
} finally {
setLoading(false)
}
};
@@ -36,6 +42,12 @@ export default function HeaderHome() {
fetchData();
}, []);
useShallowEffect(() => {
if (!loading) {
setNotif(isNotif + 1)
}
}, [paramNotif.get()])
return (
<LayoutNavbarHome>

8
src/module/home/ui/view_home.tsx
View File

@@ -18,14 +18,6 @@ export default function ViewHome() {
return (
<>
<HeaderHome />
{/* <ReloadButtonTop
onReload={
() => {
''
}
}
title='UPDATE'
/> */}
<Box p={20}>
<Stack >
<Carosole />

15
src/module/position/ui/drawer_detail_position.tsx
View File

@@ -1,4 +1,4 @@
import { LayoutDrawer, TEMA, WARNA } from "@/module/_global"
import { keyWibu, LayoutDrawer, TEMA, WARNA } from "@/module/_global"
import LayoutModal from "@/module/_global/layout/layout_modal"
import { funGetAllGroup, IDataGroup } from "@/module/group"
import { Box, Stack, SimpleGrid, Flex, Text, Select, TextInput, Button, Skeleton } from "@mantine/core"
@@ -10,6 +10,7 @@ import { funEditPosition, funEditStatusPosition, funGetOnePosition } from "../li
import { IDataPosition } from "../lib/type_position"
import { useHookstate } from "@hookstate/core"
import { globalRefreshPosition } from "../lib/val_posisition"
import { useWibuRealtime } from "wibu-realtime"
export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
onUpdated: (val: boolean) => void, id: string, isActive: boolean;
@@ -29,6 +30,10 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
const [touched, setTouched] = useState({
name: false,
});
const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
function onCLose() {
onUpdated(true)
@@ -78,6 +83,10 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
if (res.success) {
toast.success(res.message);
setDataRealtime([{
category: "data-position",
group: data.idGroup,
}])
refresh.set(!refresh.get())
onUpdated(true);
onCLose();
@@ -122,6 +131,10 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
const res = await funEditStatusPosition(id, { isActive: isActive })
if (res.success) {
toast.success(res.message);
setDataRealtime([{
category: "data-position",
group: data.idGroup,
}])
refresh.set(!refresh.get())
onUpdated(true);
} else {

14
src/module/position/ui/drawer_list_position.tsx
View File

@@ -1,4 +1,4 @@
import { WARNA, LayoutDrawer, globalRole, TEMA } from "@/module/_global";
import { WARNA, LayoutDrawer, globalRole, TEMA, keyWibu } from "@/module/_global";
import { funGetAllGroup, IDataGroup } from "@/module/group";
import { Box, Stack, SimpleGrid, Flex, TextInput, Button, Text, Select } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
@@ -10,6 +10,7 @@ import { RiFilter2Line } from "react-icons/ri";
import { funCreatePosition } from "../lib/api_position";
import { useHookstate } from "@hookstate/core";
import { globalRefreshPosition } from "../lib/val_posisition";
import { useWibuRealtime } from "wibu-realtime";
export default function DrawerListPosition({ onCreated }: { onCreated: (val: boolean) => void }) {
@@ -26,11 +27,14 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo
name: false,
idGroup: false
});
const [listData, setListData] = useState({
name: "",
idGroup: "",
})
const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
async function getAllGroup() {
try {
@@ -60,10 +64,14 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo
})
if (res.success) {
setOpenDrawerGroup(false)
toast.success(res.message)
setDataRealtime([{
category: "data-position",
group: res.positions.idGroup,
}])
refresh.set(!refresh.get())
onCreated(true)
setOpenDrawerGroup(false)
} else {
toast.error(res.message)
setOpenDrawerGroup(false)

32
src/module/position/ui/list_position_active.tsx
View File

@@ -1,17 +1,17 @@
import { globalRole, LayoutDrawer, SkeletonSingle, TEMA, WARNA } from "@/module/_global";
import { globalRole, keyWibu, LayoutDrawer, TEMA } from "@/module/_global";
import { useHookstate } from "@hookstate/core";
import { ActionIcon, Box, Flex, Grid, Group, Skeleton, Text, TextInput } from "@mantine/core";
import React, { useState } from "react";
import { FaUserTie } from "react-icons/fa6";
import { HiMagnifyingGlass } from "react-icons/hi2";
import DrawerDetailPosition from "./drawer_detail_position";
import toast from "react-hot-toast";
import _ from "lodash";
import { useShallowEffect } from "@mantine/hooks";
import { useSearchParams } from "next/navigation";
import { useState } from "react";
import toast from "react-hot-toast";
import { FaUserTie } from "react-icons/fa6";
import { HiMagnifyingGlass } from "react-icons/hi2";
import { useWibuRealtime } from "wibu-realtime";
import { funGetAllPosition } from "../lib/api_position";
import { IDataPosition } from "../lib/type_position";
import { useHookstate } from "@hookstate/core";
import { globalRefreshPosition } from "../lib/val_posisition";
import DrawerDetailPosition from "./drawer_detail_position";
export default function ListPositionActive() {
@@ -29,10 +29,14 @@ export default function ListPositionActive() {
const roleLogin = useHookstate(globalRole)
const [nameGroup, setNameGroup] = useState('')
const tema = useHookstate(TEMA)
const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
async function getAllPosition() {
async function getAllPosition(loading: boolean) {
try {
setLoading(true)
setLoading(loading)
const res = await funGetAllPosition('?active=' + status + '&group=' + group + '&search=' + searchQuery)
setDataPosition(res.data);
setNameGroup(res.filter.name)
@@ -46,9 +50,15 @@ export default function ListPositionActive() {
}
useShallowEffect(() => {
getAllPosition();
getAllPosition(true);
}, [status, group, searchQuery, refresh.get()])
useShallowEffect(() => {
if (dataRealTime && dataRealTime.some((i: any) => i.category == 'data-position' && i.group == group)) {
getAllPosition(false)
}
}, [dataRealTime])
return (
<Box pt={20}>

25
src/module/project/ui/add_detail_task_project.tsx
View File

@@ -1,14 +1,15 @@
"use client"
import { useParams, useRouter } from 'next/navigation';
import React, { useState } from 'react';
import toast from 'react-hot-toast';
import { funCreateDetailProject } from '../lib/api_project';
import { Box, Button, Group, Input, rem, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
import { LayoutNavbarNew, TEMA, WARNA } from '@/module/_global';
import { DatePicker } from '@mantine/dates';
import moment from 'moment';
import { keyWibu, LayoutNavbarNew, TEMA } from '@/module/_global';
import LayoutModal from '@/module/_global/layout/layout_modal';
import { useHookstate } from '@hookstate/core';
import { Box, Button, Group, rem, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
import { DatePicker } from '@mantine/dates';
import moment from 'moment';
import { useParams, useRouter } from 'next/navigation';
import { useState } from 'react';
import toast from 'react-hot-toast';
import { useWibuRealtime } from 'wibu-realtime';
import { funCreateDetailProject } from '../lib/api_project';
export default function AddDetailTaskProject() {
const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
@@ -20,6 +21,10 @@ export default function AddDetailTaskProject() {
const [touched, setTouched] = useState({
name: false,
});
const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
function onVerification() {
if (value[0] == null || value[1] == null)
@@ -40,6 +45,10 @@ export default function AddDetailTaskProject() {
})
if (res.success) {
setDataRealtime([{
category: "project-detail-task",
id: param.id,
}])
toast.success(res.message)
setOpenModal(false)
router.push(`/project/${param.id}`)

39
src/module/project/ui/add_file_detail_project.tsx
View File

@@ -1,28 +1,19 @@
"use client";
import { LayoutDrawer, LayoutNavbarNew } from "@/module/_global";
import {
Box,
Button,
Flex,
Group,
rem,
SimpleGrid,
Stack,
Text,
} from "@mantine/core";
import React, { useRef, useState } from "react";
import { useParams, useRouter } from "next/navigation";
import toast from "react-hot-toast";
import { IoIosArrowDropright } from "react-icons/io";
import { keyWibu, LayoutDrawer, LayoutNavbarNew, TEMA } from "@/module/_global";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { useHookstate } from "@hookstate/core";
import { Box, Button, Flex, Group, rem, SimpleGrid, Stack, Text, } from "@mantine/core";
import { Dropzone } from "@mantine/dropzone";
import _ from "lodash";
import ResultsFile from "./results_file";
import { useParams, useRouter } from "next/navigation";
import { useRef, useState } from "react";
import toast from "react-hot-toast";
import { FaTrash } from "react-icons/fa6";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { IListFileTaskProject } from "../lib/type_project";
import { IoIosArrowDropright } from "react-icons/io";
import { funAddFileProject, funCekNamFileUploadProject } from "../lib/api_project";
import { TEMA } from "@/module/_global";
import { useHookstate } from "@hookstate/core";
import { IListFileTaskProject } from "../lib/type_project";
import ResultsFile from "./results_file";
import { useWibuRealtime } from "wibu-realtime";
export default function AddFileDetailProject() {
@@ -35,6 +26,10 @@ export default function AddFileDetailProject() {
const [openDrawerFile, setOpenDrawerFile] = useState(false)
const tema = useHookstate(TEMA)
const openRef = useRef<() => void>(null)
const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
function deleteFile(index: number) {
setListFile([...listFile.filter((val, i) => i !== index)])
@@ -70,6 +65,10 @@ export default function AddFileDetailProject() {
const response = await funAddFileProject(param.id, fd)
console.group(response)
if (response.success) {
setDataRealtime([{
category: "project-detail-file",
id: param.id,
}])
toast.success(response.message)
setFileForm([])
setListFile([])

31
src/module/project/ui/add_member_detail_project.tsx
View File

@@ -1,18 +1,19 @@
"use client"
import { useParams, useRouter } from 'next/navigation';
import React, { useState } from 'react';
import { IDataMemberProject, IDataMemberProjectDetail } from '../lib/type_project';
import toast from 'react-hot-toast';
import { funAddMemberProject, funGetAllMemberById, funGetOneProjectById } from '../lib/api_project';
import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Group, Indicator, rem, Skeleton, Stack, Text, TextInput } from '@mantine/core';
import { LayoutNavbarNew, SkeletonList, SkeletonSingle, TEMA, WARNA } from '@/module/_global';
import { FaCheck } from 'react-icons/fa6';
import { keyWibu, LayoutNavbarNew, SkeletonList, TEMA } from '@/module/_global';
import LayoutModal from '@/module/_global/layout/layout_modal';
import { useHookstate } from '@hookstate/core';
import { Carousel } from '@mantine/carousel';
import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Group, Indicator, rem, Skeleton, Stack, Text, TextInput } from '@mantine/core';
import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import { useParams, useRouter } from 'next/navigation';
import { useState } from 'react';
import toast from 'react-hot-toast';
import { FaCheck } from 'react-icons/fa6';
import { HiMagnifyingGlass } from 'react-icons/hi2';
import { IoArrowBackOutline, IoClose } from 'react-icons/io5';
import { Carousel } from '@mantine/carousel';
import { useHookstate } from '@hookstate/core';
import { useWibuRealtime } from 'wibu-realtime';
import { funAddMemberProject, funGetAllMemberById, funGetOneProjectById } from '../lib/api_project';
import { IDataMemberProject, IDataMemberProjectDetail } from '../lib/type_project';
export default function AddMemberDetailProject() {
const router = useRouter()
@@ -27,6 +28,10 @@ export default function AddMemberDetailProject() {
const [searchQuery, setSearchQuery] = useState('')
const tema = useHookstate(TEMA)
const isMobile2 = useMediaQuery("(max-width: 438px)");
const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
async function getData() {
@@ -99,6 +104,10 @@ export default function AddMemberDetailProject() {
try {
const res = await funAddMemberProject(param.id, { member: selectedFiles });
if (res.success) {
setDataRealtime([{
category: "project-detail-anggota",
id: param.id,
}])
toast.success(res.message)
router.back()
} else {

21
src/module/project/ui/cancel_project.tsx
View File

@@ -1,12 +1,13 @@
"use client"
import { useParams, useRouter } from 'next/navigation';
import React, { useState } from 'react';
import toast from 'react-hot-toast';
import { funCancelProject } from '../lib/api_project';
import { Box, Button, rem, Stack, Textarea } from '@mantine/core';
import { LayoutNavbarNew, TEMA} from '@/module/_global';
import { keyWibu, LayoutNavbarNew, TEMA } from '@/module/_global';
import LayoutModal from '@/module/_global/layout/layout_modal';
import { useHookstate } from '@hookstate/core';
import { Box, Button, rem, Stack, Textarea } from '@mantine/core';
import { useParams, useRouter } from 'next/navigation';
import { useState } from 'react';
import toast from 'react-hot-toast';
import { useWibuRealtime } from 'wibu-realtime';
import { funCancelProject } from '../lib/api_project';
export default function CancelProject() {
const router = useRouter()
@@ -17,6 +18,10 @@ export default function CancelProject() {
const [touched, setTouched] = useState({
reason: false,
});
const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
function onVerification() {
if (alasan == "")
@@ -29,6 +34,10 @@ export default function CancelProject() {
try {
const res = await funCancelProject(param.id, { reason: alasan })
if (res.success) {
setDataRealtime([{
category: "project-detail-status",
id: param.id,
}])
toast.success(res.message)
router.push("/project")
} else {

11
src/module/project/ui/edit_task_project.tsx
View File

@@ -1,5 +1,5 @@
"use client"
import { LayoutNavbarNew, TEMA } from '@/module/_global';
import { keyWibu, LayoutNavbarNew, TEMA } from '@/module/_global';
import LayoutModal from '@/module/_global/layout/layout_modal';
import { useHookstate } from '@hookstate/core';
import { Box, Button, rem, Skeleton, Stack, TextInput } from '@mantine/core';
@@ -8,6 +8,7 @@ import { useParams, useRouter } from 'next/navigation';
import { useState } from 'react';
import toast from 'react-hot-toast';
import { funEditProject, funGetOneProjectById } from '../lib/api_project';
import { useWibuRealtime } from 'wibu-realtime';
export default function EditTaskProject() {
const router = useRouter()
@@ -19,11 +20,19 @@ export default function EditTaskProject() {
const [touched, setTouched] = useState({
name: false,
});
const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
async function onSubmit() {
try {
const res = await funEditProject(param.id, { name })
if (res.success) {
setDataRealtime([{
category: "project-detail",
id: param.id,
}])
toast.success(res.message)
router.push("./")
} else {

57
src/module/project/ui/list_anggota_detail_project.tsx
View File

@@ -1,16 +1,17 @@
'use client'
import { globalRole, LayoutDrawer, SkeletonList, SkeletonSingle, TEMA } from '@/module/_global';
import { Avatar, Box, Divider, Flex, Grid, Group, SimpleGrid, Stack, Text } from '@mantine/core';
import React, { useState } from 'react';
import { funDeleteMemberProject, funGetOneProjectById } from '../lib/api_project';
import toast from 'react-hot-toast';
import { useParams, useRouter } from 'next/navigation';
import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import { IDataMemberProject } from '../lib/type_project';
import { FaUser } from 'react-icons/fa6';
import { IoIosCloseCircle } from 'react-icons/io';
import { globalRole, keyWibu, LayoutDrawer, SkeletonList, TEMA } from '@/module/_global';
import LayoutModal from '@/module/_global/layout/layout_modal';
import { useHookstate } from '@hookstate/core';
import { Avatar, Box, Divider, Flex, Grid, Group, SimpleGrid, Stack, Text } from '@mantine/core';
import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import { useParams, useRouter } from 'next/navigation';
import { useState } from 'react';
import toast from 'react-hot-toast';
import { FaUser } from 'react-icons/fa6';
import { IoIosCloseCircle } from 'react-icons/io';
import { useWibuRealtime } from 'wibu-realtime';
import { funDeleteMemberProject, funGetOneProjectById } from '../lib/api_project';
import { IDataMemberProject } from '../lib/type_project';
export default function ListAnggotaDetailProject() {
@@ -25,6 +26,11 @@ export default function ListAnggotaDetailProject() {
const tema = useHookstate(TEMA)
const [reason, setReason] = useState("")
const isMobile2 = useMediaQuery("(max-width: 438px)");
const isMobile = useMediaQuery('(max-width: 369px)');
const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
async function getOneDataCancel() {
try {
@@ -45,9 +51,9 @@ export default function ListAnggotaDetailProject() {
getOneDataCancel();
}, [param.id])
async function getOneData() {
async function getOneData(loading: boolean) {
try {
setLoading(true)
setLoading(loading)
const res = await funGetOneProjectById(param.id, 'member');
if (res.success) {
setData(res.data)
@@ -64,7 +70,7 @@ export default function ListAnggotaDetailProject() {
}
useShallowEffect(() => {
getOneData();
getOneData(true);
}, [param.id])
@@ -72,9 +78,13 @@ export default function ListAnggotaDetailProject() {
try {
const res = await funDeleteMemberProject(param.id, { idUser: dataChoose.id });
if (res.success) {
setDataRealtime([{
category: "project-detail-anggota",
id: param.id,
}])
toast.success(res.message)
setDataChoose({ id: '', name: '' })
getOneData()
getOneData(false)
setOpenDrawer(false)
} else {
toast.error(res.message)
@@ -84,7 +94,14 @@ export default function ListAnggotaDetailProject() {
toast.error("Gagal menghapus anggota Kegiatan, coba lagi nanti");
}
}
const isMobile = useMediaQuery('(max-width: 369px)');
useShallowEffect(() => {
if (dataRealTime && dataRealTime.some((i: any) => i.category == 'project-detail-anggota' && i.id == param.id)) {
getOneData(false)
} else if (dataRealTime && dataRealTime.some((i: any) => i.category == 'project-detail-status' && i.id == param.id)) {
getOneDataCancel()
}
}, [dataRealTime])
return (
<Box pt={20}>
@@ -128,11 +145,11 @@ export default function ListAnggotaDetailProject() {
<Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size={'lg'} />
</Grid.Col>
<Grid.Col span={8}>
<Text lineClamp={1} pl={isMobile2 ? 40 : 30} fz={isMobile ? 15 : 16}>{v.name}</Text>
<Text c={"#5A687D"} truncate="end" fz={isMobile ? 12 : 14} pl={isMobile2 ? 40 : 30}
style={{
overflowWrap: "break-word"
}}>{v.email}</Text>
<Text lineClamp={1} pl={isMobile2 ? 40 : 30} fz={isMobile ? 15 : 16}>{v.name}</Text>
<Text c={"#5A687D"} truncate="end" fz={isMobile ? 12 : 14} pl={isMobile2 ? 40 : 30}
style={{
overflowWrap: "break-word"
}}>{v.email}</Text>
</Grid.Col>
<Grid.Col span={3}>
<Text c={tema.get().utama} fw={"bold"} ta={'end'} fz={isMobile ? 13 : 16}>

45
src/module/project/ui/list_file_detail_project.tsx
View File

@@ -1,16 +1,17 @@
'use client'
import { LayoutDrawer, LayoutModalViewFile, TEMA } from '@/module/_global';
import { Box, Center, Flex, Grid, Group, SimpleGrid, Skeleton, Stack, Text } from '@mantine/core';
import React, { useState } from 'react';
import toast from 'react-hot-toast';
import { funDeleteFileProject, funGetOneProjectById } from '../lib/api_project';
import { useParams } from 'next/navigation';
import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import { IDataFileProject } from '../lib/type_project';
import { BsFileTextFill, BsFiletypeCsv, BsFiletypeHeic, BsFiletypeJpg, BsFiletypePdf, BsFiletypePng } from 'react-icons/bs';
import { keyWibu, LayoutDrawer, LayoutModalViewFile, TEMA } from '@/module/_global';
import LayoutModal from '@/module/_global/layout/layout_modal';
import { FaTrash } from 'react-icons/fa6';
import { useHookstate } from '@hookstate/core';
import { Box, Flex, Grid, Group, SimpleGrid, Skeleton, Stack, Text } from '@mantine/core';
import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import { useParams } from 'next/navigation';
import { useState } from 'react';
import toast from 'react-hot-toast';
import { BsFileTextFill, BsFiletypeCsv, BsFiletypeHeic, BsFiletypeJpg, BsFiletypePdf, BsFiletypePng } from 'react-icons/bs';
import { FaTrash } from 'react-icons/fa6';
import { useWibuRealtime } from 'wibu-realtime';
import { funDeleteFileProject, funGetOneProjectById } from '../lib/api_project';
import { IDataFileProject } from '../lib/type_project';
export default function ListFileDetailProject() {
const [isData, setData] = useState<IDataFileProject[]>([])
@@ -26,6 +27,10 @@ export default function ListFileDetailProject() {
const tema = useHookstate(TEMA)
const isMobile = useMediaQuery("(max-width: 350px)");
const [reason, setReason] = useState("")
const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
async function getOneDataCancel() {
try {
@@ -46,9 +51,9 @@ export default function ListFileDetailProject() {
getOneDataCancel();
}, [param.id])
async function getOneData() {
async function getOneData(loading: boolean) {
try {
setLoading(true)
setLoading(loading)
const res = await funGetOneProjectById(param.id, 'file');
if (res.success) {
setData(res.data)
@@ -65,7 +70,7 @@ export default function ListFileDetailProject() {
}
useShallowEffect(() => {
getOneData();
getOneData(true);
}, [param.id])
@@ -73,8 +78,12 @@ export default function ListFileDetailProject() {
try {
const res = await funDeleteFileProject(idData);
if (res.success) {
setDataRealtime([{
category: "project-detail-file",
id: param.id,
}])
toast.success(res.message)
getOneData()
getOneData(false)
setIdData("")
setIdStorage("")
setOpenDrawer(false)
@@ -88,6 +97,14 @@ export default function ListFileDetailProject() {
}
useShallowEffect(() => {
if (dataRealTime && dataRealTime.some((i: any) => i.category == 'project-detail-file' && i.id == param.id)) {
getOneData(false)
} else if (dataRealTime && dataRealTime.some((i: any) => i.category == 'project-detail-status' && i.id == param.id)) {
getOneDataCancel()
}
}, [dataRealTime])
return (
<>
<Box pt={20}>

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

@@ -1,17 +1,16 @@
"use client"
import { currentScroll, globalRole, SkeletonList, TEMA } from '@/module/_global';
import { currentScroll, globalNotifPage, globalRole, ReloadButtonTop, SkeletonList, TEMA } from '@/module/_global';
import { useHookstate } from '@hookstate/core';
import { ActionIcon, Avatar, Badge, Box, Card, Center, Divider, Flex, Grid, Group, Skeleton, Text, TextInput, Title } from '@mantine/core';
import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import _ from 'lodash';
import { useRouter, useSearchParams } from 'next/navigation';
import React, { useEffect, useState } from 'react';
import { useEffect, useState } from 'react';
import toast from 'react-hot-toast';
import { HiMagnifyingGlass, HiMiniPresentationChartBar, HiOutlineListBullet, HiSquares2X2 } from 'react-icons/hi2';
import { MdAccountCircle } from 'react-icons/md';
import { RiCircleFill } from 'react-icons/ri';
import { funGetAllProject } from '../lib/api_project';
import toast from 'react-hot-toast';
import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import { IDataProject } from '../lib/type_project';
import { useHookstate } from '@hookstate/core';
import _ from 'lodash';
export default function ListProject() {
const [isList, setIsList] = useState(false)
@@ -30,6 +29,8 @@ export default function ListProject() {
const [totalData, setTotalData] = useState(0)
const isMobile = useMediaQuery('(max-width: 369px)');
const paddingLift = useMediaQuery('(max-width: 505px)')
const [isRefresh, setRefresh] = useState(false)
const notifLoadPage = useHookstate(globalNotifPage)
const handleList = () => {
setIsList(!isList)
@@ -39,6 +40,9 @@ export default function ListProject() {
try {
if (loading)
setLoading(true)
if (isPage == 1) {
setData([])
}
const response = await funGetAllProject('?status=' + status + '&search=' + searchQuery + '&group=' + group + '&page=' + isPage)
if (response.success) {
setNameGroup(response.filter.name)
@@ -46,7 +50,7 @@ export default function ListProject() {
if (isPage == 1) {
setData(response.data)
} else {
setData([...isData, ...response.data])
setData((isData) => [...isData, ...response.data])
}
} else {
toast.error(response.message);
@@ -92,8 +96,34 @@ export default function ListProject() {
};
}, [containerRef, isPage]);
useShallowEffect(() => {
if (notifLoadPage.get().category == 'project' && notifLoadPage.get().load == true) {
setRefresh(true)
}
}, [notifLoadPage.get().load])
function onRefresh() {
notifLoadPage.set({
category: '',
load: false
})
setRefresh(false)
setPage(1)
setTimeout(() => {
fetchData(true)
}, 500)
}
return (
<Box mt={20}>
{
isRefresh &&
<ReloadButtonTop
onReload={() => { onRefresh() }}
title='UPDATE'
/>
}
<Grid justify='center' align='center'>
<Grid.Col span={10}>
<TextInput
@@ -137,7 +167,7 @@ export default function ListProject() {
.fill(null)
.map((_, i) => (
<Box key={i}>
<SkeletonList/>
<SkeletonList />
</Box>
))
:
@@ -147,59 +177,59 @@ export default function ListProject() {
<Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada Kegiatan</Text>
</Box>
:
isData.map((v, i) => {
return (
<Box key={i}>
<Grid align='center' onClick={() => router.push(`/project/${v.id}`)}>
<Grid.Col span={{
base: 1,
xs: 1,
sm: 1,
md: 1,
lg: 1,
xl: 1
}}>
<Group >
<Center>
<ActionIcon
variant="gradient"
size={50}
aria-label="Gradient action icon"
radius={100}
bg={tema.get().bgFiturHome}
>
<HiMiniPresentationChartBar size={25} color={tema.get().utama} />
</ActionIcon>
</Center>
</Group>
</Grid.Col>
<Grid.Col span={{
base: 11,
xs: 11,
sm: 11,
md: 11,
lg: 11,
xl: 11,
}}>
<Group justify='space-between' align='center'>
<Box>
<Box w={{
base: isMobile ? 200 : 230,
xl: 430
}}>
<Text truncate="end" pl={paddingLift ? 30 : 20}>
{v.title}
</Text>
</Box>
isData.map((v, i) => {
return (
<Box key={i}>
<Grid align='center' onClick={() => router.push(`/project/${v.id}`)}>
<Grid.Col span={{
base: 1,
xs: 1,
sm: 1,
md: 1,
lg: 1,
xl: 1
}}>
<Group >
<Center>
<ActionIcon
variant="gradient"
size={50}
aria-label="Gradient action icon"
radius={100}
bg={tema.get().bgFiturHome}
>
<HiMiniPresentationChartBar size={25} color={tema.get().utama} />
</ActionIcon>
</Center>
</Group>
</Grid.Col>
<Grid.Col span={{
base: 11,
xs: 11,
sm: 11,
md: 11,
lg: 11,
xl: 11,
}}>
<Group justify='space-between' align='center'>
<Box>
<Box w={{
base: isMobile ? 200 : 230,
xl: 430
}}>
<Text truncate="end" pl={paddingLift ? 30 : 20}>
{v.title}
</Text>
</Box>
</Group>
</Grid.Col>
</Grid>
<Divider my="sm" />
</Box>
);
})
}
</Box>
</Group>
</Grid.Col>
</Grid>
<Divider my="sm" />
</Box>
);
})
}
</Box>
) : (
<Box pt={20}>

120
src/module/project/ui/list_tugas_detail_project.tsx
View File

@@ -1,17 +1,18 @@
'use client'
import { LayoutDrawer, SkeletonDetailListTugasTask, TEMA } from '@/module/_global';
import { keyWibu, LayoutDrawer, SkeletonDetailListTugasTask, TEMA } from '@/module/_global';
import LayoutModal from '@/module/_global/layout/layout_modal';
import { useHookstate } from '@hookstate/core';
import { Box, Center, Checkbox, Divider, Flex, Grid, Group, SimpleGrid, Stack, Text } from '@mantine/core';
import React, { useState } from 'react';
import { useShallowEffect } from '@mantine/hooks';
import { useParams, useRouter } from 'next/navigation';
import { useState } from 'react';
import toast from 'react-hot-toast';
import { AiOutlineFileDone, AiOutlineFileSync } from 'react-icons/ai';
import { funDeleteDetailProject, funGetOneProjectById, funUpdateStatusProject } from '../lib/api_project';
import { useParams, useRouter } from 'next/navigation';
import { useShallowEffect } from '@mantine/hooks';
import { IDataListTaskProject } from '../lib/type_project';
import { useHookstate } from '@hookstate/core';
import { globalRefreshProject, valStatusDetailProject } from '../lib/val_project';
import { FaCheck, FaPencil, FaTrash } from 'react-icons/fa6';
import LayoutModal from '@/module/_global/layout/layout_modal';
import { useWibuRealtime } from 'wibu-realtime';
import { funDeleteDetailProject, funGetOneProjectById, funUpdateStatusProject } from '../lib/api_project';
import { IDataListTaskProject } from '../lib/type_project';
import { globalRefreshProject, valStatusDetailProject } from '../lib/val_project';
export default function ListTugasDetailProject() {
const [isData, setData] = useState<IDataListTaskProject[]>([])
@@ -26,6 +27,10 @@ export default function ListTugasDetailProject() {
const router = useRouter()
const tema = useHookstate(TEMA)
const [reason, setReason] = useState("")
const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
async function getOneDataCancel() {
try {
@@ -46,9 +51,9 @@ export default function ListTugasDetailProject() {
getOneDataCancel();
}, [param.id])
async function getOneData() {
async function getOneData(loading: boolean) {
try {
setLoading(true)
setLoading(loading)
const res = await funGetOneProjectById(param.id, 'task');
if (res.success) {
setData(res.data)
@@ -65,15 +70,19 @@ export default function ListTugasDetailProject() {
}
useShallowEffect(() => {
getOneData();
getOneData(true);
}, [param.id])
async function onDelete() {
try {
const res = await funDeleteDetailProject(idData, { idProject: param.id });
if (res.success) {
setDataRealtime([{
category: "project-detail-task",
id: param.id,
}])
toast.success(res.message);
getOneData();
getOneData(false);
setIdData("")
setOpenDrawer(false)
refresh.set(true)
@@ -90,8 +99,12 @@ export default function ListTugasDetailProject() {
try {
const res = await funUpdateStatusProject(idData, { status: val, idProject: param.id });
if (res.success) {
setDataRealtime([{
category: "project-detail-task",
id: param.id,
}])
toast.success(res.message);
getOneData();
getOneData(false);
setIdData("")
setOpenDrawer(false)
setOpenDrawerStatus(false)
@@ -105,6 +118,15 @@ export default function ListTugasDetailProject() {
}
}
useShallowEffect(() => {
if (dataRealTime && dataRealTime.some((i: any) => i.category == 'project-detail-task' && i.id == param.id)) {
refresh.set(true)
getOneData(false)
} else if (dataRealTime && dataRealTime.some((i: any) => i.category == 'project-detail-status' && i.id == param.id)) {
getOneDataCancel()
}
}, [dataRealTime])
return (
<>
<Box pt={20}>
@@ -124,21 +146,21 @@ export default function ListTugasDetailProject() {
{
loading ? <>
<Box pl={5} pr={5} pt={20} pb={20}>
<SkeletonDetailListTugasTask />
<SkeletonDetailListTugasTask />
</Box>
</> :
isData.length === 0 ? <Text>Tidak ada tugas</Text> :
isData.map((item, index) => {
return (
<Box key={index}>
<Box onClick={() => {
<Box onClick={() => {
setIdData(item.id)
setStatusData(item.status)
reason == null ?
setOpenDrawer(true)
: setOpenDrawer(false)
: setOpenDrawer(false)
}} my={18}>
<Checkbox color="teal" size="md" checked={(item.status === 1) ? true : false} disabled
<Checkbox color="teal" size="md" checked={(item.status === 1) ? true : false} disabled
label={item.status === 1 ? 'Sudah Selesai' : 'Belum Selesai'}
/>
<Box mt={20}>
@@ -187,7 +209,7 @@ export default function ListTugasDetailProject() {
</Box>
</Box>
</Box>
<Divider my={20}/>
<Divider my={20} />
</Box>
)
})
@@ -203,7 +225,7 @@ export default function ListTugasDetailProject() {
alignItems: 'flex-start',
}}
>
<Flex onClick={() => { setOpenDrawerStatus(true) }} justify={'center'} align={'center'} direction={'column'} pb={20}>
<Flex onClick={() => { setOpenDrawerStatus(true) }} justify={'center'} align={'center'} direction={'column'} pb={20}>
<Box>
<AiOutlineFileDone size={30} color={tema.get().utama} />
</Box>
@@ -245,36 +267,36 @@ export default function ListTugasDetailProject() {
<LayoutDrawer opened={openDrawerStatus} title={'Status'} onClose={() => setOpenDrawerStatus(false)}>
<Box>
{
valStatusDetailProject.map((item, index) => {
return (
<Box key={index} onClick={() => { onUpdateStatus(item.value) }}>
<Flex justify={"space-between"} align={"center"}>
<Group>
<Text style={{
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
}}>
{item.name}
</Text>
</Group>
<Text
style={{
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
paddingLeft: 20,
}}
>
{statusData === item.value ? <FaCheck style={{ marginRight: 10 }} /> : ""}
{
valStatusDetailProject.map((item, index) => {
return (
<Box key={index} onClick={() => { onUpdateStatus(item.value) }}>
<Flex justify={"space-between"} align={"center"}>
<Group>
<Text style={{
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
}}>
{item.name}
</Text>
</Flex>
<Divider my={20} />
</Box>
)
})
}
</Group>
<Text
style={{
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
paddingLeft: 20,
}}
>
{statusData === item.value ? <FaCheck style={{ marginRight: 10 }} /> : ""}
</Text>
</Flex>
<Divider my={20} />
</Box>
)
})
}
</Box>
</LayoutDrawer>

19
src/module/project/ui/navbar_detail_project.tsx
View File

@@ -1,16 +1,17 @@
'use client'
import { globalRole, LayoutDrawer, LayoutNavbarNew, TEMA } from '@/module/_global';
import { globalRole, keyWibu, LayoutDrawer, LayoutNavbarNew, TEMA } from '@/module/_global';
import { useHookstate } from '@hookstate/core';
import { ActionIcon, Box, Flex, SimpleGrid, Stack, Text } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { useParams, useRouter } from 'next/navigation';
import React, { useState } from 'react';
import { useState } from 'react';
import toast from 'react-hot-toast';
import { FaFileCirclePlus, FaPencil, FaUsers } from 'react-icons/fa6';
import { HiMenu } from 'react-icons/hi';
import { IoAddCircle } from 'react-icons/io5';
import { MdCancel } from 'react-icons/md';
import { funGetOneProjectById } from '../lib/api_project';
import { useShallowEffect } from '@mantine/hooks';
import { useHookstate } from '@hookstate/core';
import { useWibuRealtime } from 'wibu-realtime';
export default function NavbarDetailProject() {
const router = useRouter()
@@ -20,6 +21,10 @@ export default function NavbarDetailProject() {
const roleLogin = useHookstate(globalRole)
const tema = useHookstate(TEMA)
const [reason, setReason] = useState("")
const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
async function getOneData() {
try {
@@ -41,6 +46,12 @@ export default function NavbarDetailProject() {
getOneData();
}, [param.id])
useShallowEffect(() => {
if (dataRealTime && dataRealTime.some((i: any) => (i.category == 'project-detail' || i.category == 'project-detail-status') && i.id == param.id)) {
getOneData()
}
}, [dataRealTime])
return (
<>
<LayoutNavbarNew back="/project?status=0" title={name} menu={

34
src/module/project/ui/progress_detail_project.tsx
View File

@@ -1,15 +1,16 @@
'use client'
import { keyWibu, TEMA } from '@/module/_global';
import { useHookstate } from '@hookstate/core';
import { ActionIcon, Box, Grid, Group, Progress, Skeleton, Text } from '@mantine/core';
import { useParams } from 'next/navigation';
import React, { useState } from 'react';
import { HiMiniPresentationChartBar } from 'react-icons/hi2';
import { globalRefreshProject } from '../lib/val_project';
import toast from 'react-hot-toast';
import { funGetOneProjectById } from '../lib/api_project';
import { useShallowEffect } from '@mantine/hooks';
import { TEMA } from '@/module/_global';
import { useParams } from 'next/navigation';
import { useState } from 'react';
import toast from 'react-hot-toast';
import { HiMiniPresentationChartBar } from 'react-icons/hi2';
import { IoIosWarning } from 'react-icons/io';
import { useWibuRealtime } from 'wibu-realtime';
import { funGetOneProjectById } from '../lib/api_project';
import { globalRefreshProject } from '../lib/val_project';
export default function ProgressDetailProject() {
const [valProgress, setValProgress] = useState(0)
@@ -19,10 +20,14 @@ export default function ProgressDetailProject() {
const [loading, setLoading] = useState(true)
const tema = useHookstate(TEMA)
const [reason, setReason] = useState("")
const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
async function getOneData() {
async function getOneData(loading: boolean) {
try {
setLoading(true)
setLoading(loading)
const res = await funGetOneProjectById(param.id, 'progress');
if (res.success) {
setValProgress(res.data.progress);
@@ -60,7 +65,7 @@ export default function ProgressDetailProject() {
function onRefresh() {
if (refresh.get()) {
getOneData()
getOneData(false)
refresh.set(false)
}
}
@@ -70,9 +75,16 @@ export default function ProgressDetailProject() {
}, [refresh.get()])
useShallowEffect(() => {
getOneData();
getOneData(true);
}, [param.id])
useShallowEffect(() => {
if (dataRealTime && dataRealTime.some((i: any) => i.category == 'project-detail-status' && i.id == param.id)) {
getOneDataCancel()
getOneData(false)
}
}, [dataRealTime])
return (
<>
<Box mt={10}>

72
src/module/task/ui/add_detail_task.tsx
View File

@@ -1,28 +1,15 @@
"use client";
import { LayoutNavbarNew, TEMA } from "@/module/_global";
import {
Avatar,
Box,
Button,
Flex,
Group,
Input,
rem,
SimpleGrid,
Stack,
Text,
TextInput,
} from "@mantine/core";
import React, { useState } from "react";
import { DatePicker } from "@mantine/dates";
import { useParams, useRouter } from "next/navigation";
import toast from "react-hot-toast";
import { IFormDateTask } from "../lib/type_task";
import moment from "moment";
import { funCreateDetailTask } from "../lib/api_task";
import { keyWibu, LayoutNavbarNew, TEMA } from "@/module/_global";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { useHookstate } from "@hookstate/core";
import { Box, Button, Group, rem, SimpleGrid, Stack, Text, TextInput } from "@mantine/core";
import { DatePicker } from "@mantine/dates";
import moment from "moment";
import { useParams, useRouter } from "next/navigation";
import { useState } from "react";
import toast from "react-hot-toast";
import { funCreateDetailTask } from "../lib/api_task";
import { useWibuRealtime } from "wibu-realtime";
export default function AddDetailTask() {
const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
@@ -34,6 +21,11 @@ export default function AddDetailTask() {
const [touched, setTouched] = useState({
title: false,
});
const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
function onVerification() {
if (value[0] == null || value[1] == null)
@@ -55,6 +47,10 @@ export default function AddDetailTask() {
})
if (res.success) {
setDataRealtime([{
category: "tugas-detail-task",
id: param.detail,
}])
toast.success(res.message)
setOpenModal(false)
router.push(`/division/${param.id}/task/${param.detail}`)
@@ -139,22 +135,22 @@ export default function AddDetailTask() {
/>
</Stack>
</Box>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550),
zIndex: 999,
backgroundColor: `${tema.get().bgUtama}`,
}}>
<Button
c={"white"}
bg={tema.get().utama}
size="lg"
radius={30}
fullWidth
onClick={() => { onVerification() }}
>
Simpan
</Button>
</Box>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550),
zIndex: 999,
backgroundColor: `${tema.get().bgUtama}`,
}}>
<Button
c={"white"}
bg={tema.get().utama}
size="lg"
radius={30}
fullWidth
onClick={() => { onVerification() }}
>
Simpan
</Button>
</Box>
<LayoutModal opened={openModal} onClose={() => setOpenModal(false)}
description="Apakah Anda yakin ingin menambahkan tugas?"

42
src/module/task/ui/add_file_detail_task.tsx
View File

@@ -1,27 +1,19 @@
"use client";
import { LayoutDrawer, LayoutNavbarNew, TEMA } from "@/module/_global";
import {
Box,
Button,
Flex,
Group,
rem,
SimpleGrid,
Stack,
Text,
} from "@mantine/core";
import React, { useRef, useState } from "react";
import { useParams, useRouter } from "next/navigation";
import toast from "react-hot-toast";
import { IoIosArrowDropright } from "react-icons/io";
import { Dropzone } from "@mantine/dropzone";
import _ from "lodash";
import { IListFileTask } from "../lib/type_task";
import ResultsFile from "./results_file";
import { FaTrash } from "react-icons/fa6";
import { funAddFileTask, funCekNamFileUploadTask } from "../lib/api_task";
import { keyWibu, LayoutDrawer, LayoutNavbarNew, TEMA } from "@/module/_global";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { useHookstate } from "@hookstate/core";
import { Box, Button, Flex, Group, rem, SimpleGrid, Stack, Text, } from "@mantine/core";
import { Dropzone } from "@mantine/dropzone";
import _ from "lodash";
import { useParams, useRouter } from "next/navigation";
import { useRef, useState } from "react";
import toast from "react-hot-toast";
import { FaTrash } from "react-icons/fa6";
import { IoIosArrowDropright } from "react-icons/io";
import { funAddFileTask, funCekNamFileUploadTask } from "../lib/api_task";
import { IListFileTask } from "../lib/type_task";
import ResultsFile from "./results_file";
import { useWibuRealtime } from "wibu-realtime";
export default function AddFileDetailTask() {
@@ -34,6 +26,10 @@ export default function AddFileDetailTask() {
const [openDrawerFile, setOpenDrawerFile] = useState(false)
const tema = useHookstate(TEMA)
const openRef = useRef<() => void>(null)
const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
function deleteFile(index: number) {
setListFile([...listFile.filter((val, i) => i !== index)])
@@ -68,6 +64,10 @@ export default function AddFileDetailTask() {
const response = await funAddFileTask(param.detail, fd)
if (response.success) {
setDataRealtime([{
category: "tugas-detail-file",
id: param.detail,
}])
toast.success(response.message)
setFileForm([])
setListFile([])

44
src/module/task/ui/add_member_detail_task.tsx
View File

@@ -1,36 +1,20 @@
"use client"
import { LayoutNavbarNew, SkeletonList, SkeletonSingle, TEMA } from "@/module/_global";
import { funGetDivisionById, funGetSearchMemberDivision, IDataMemberDivision } from "@/module/division_new";
import {
ActionIcon,
Anchor,
Avatar,
Box,
Button,
Center,
Checkbox,
Divider,
Flex,
Grid,
Group,
Indicator,
rem,
Stack,
Text,
TextInput,
} from "@mantine/core";
import { keyWibu, LayoutNavbarNew, SkeletonList, TEMA } from "@/module/_global";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { funGetSearchMemberDivision, IDataMemberDivision } from "@/module/division_new";
import { useHookstate } from "@hookstate/core";
import { Carousel } from "@mantine/carousel";
import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Group, Indicator, rem, Stack, Text, TextInput } from "@mantine/core";
import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
import { useParams, useRouter } from "next/navigation";
import React, { useState } from "react";
import { useState } from "react";
import toast from "react-hot-toast";
import { FaCheck } from "react-icons/fa6";
import { funAddMemberTask, funGetTaskDivisionById } from "../lib/api_task";
import { IDataMemberTaskDivision } from "../lib/type_task";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { HiMagnifyingGlass } from "react-icons/hi2";
import { IoArrowBackOutline, IoClose } from "react-icons/io5";
import { Carousel } from "@mantine/carousel";
import { useHookstate } from "@hookstate/core";
import { funAddMemberTask, funGetTaskDivisionById } from "../lib/api_task";
import { IDataMemberTaskDivision } from "../lib/type_task";
import { useWibuRealtime } from "wibu-realtime";
export default function AddMemberDetailTask() {
const router = useRouter()
@@ -45,6 +29,10 @@ export default function AddMemberDetailTask() {
const [searchQuery, setSearchQuery] = useState('')
const tema = useHookstate(TEMA)
const isMobile2 = useMediaQuery("(max-width: 438px)");
const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
async function getData() {
@@ -120,6 +108,10 @@ export default function AddMemberDetailTask() {
try {
const res = await funAddMemberTask(param.detail, { idDivision: param.id, member: selectedFiles });
if (res.success) {
setDataRealtime([{
category: "tugas-detail-anggota",
id: param.detail,
}])
toast.success(res.message)
router.back()
} else {

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

@@ -1,18 +1,13 @@
"use client";
import { LayoutNavbarNew, TEMA } from "@/module/_global";
import {
Box,
Button,
rem,
Stack,
Textarea,
} from "@mantine/core";
import React, { useState } from "react";
import { useParams, useRouter } from "next/navigation";
import toast from "react-hot-toast";
import { funCancelTask } from "../lib/api_task";
import { keyWibu, LayoutNavbarNew, TEMA } from "@/module/_global";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { useHookstate } from "@hookstate/core";
import { Box, Button, rem, Stack, Textarea, } from "@mantine/core";
import { useParams, useRouter } from "next/navigation";
import { useState } from "react";
import toast from "react-hot-toast";
import { funCancelTask } from "../lib/api_task";
import { useWibuRealtime } from "wibu-realtime";
export default function CancelTask() {
@@ -24,6 +19,10 @@ export default function CancelTask() {
const [touched, setTouched] = useState({
reason: false,
});
const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
function onVerification() {
if (alasan == "")
@@ -36,6 +35,10 @@ export default function CancelTask() {
try {
const res = await funCancelTask(param.detail, { reason: alasan })
if (res.success) {
setDataRealtime([{
category: "tugas-detail-status",
id: param.detail,
}])
toast.success(res.message)
router.push("./")
} else {

41
src/module/task/ui/detail_list_anggota_task.tsx
View File

@@ -1,17 +1,18 @@
'use client'
import { globalRole, LayoutDrawer, SkeletonList, SkeletonSingle, TEMA } from "@/module/_global";
import { Box, Group, Flex, Avatar, Text, SimpleGrid, Stack, Grid, Divider } from "@mantine/core";
import { globalRole, keyWibu, LayoutDrawer, SkeletonList, TEMA } from "@/module/_global";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { globalIsAdminDivision } from "@/module/division_new";
import { useHookstate } from "@hookstate/core";
import { Avatar, Box, Divider, Flex, Grid, Group, SimpleGrid, Stack, Text } from "@mantine/core";
import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
import { useParams, useRouter } from "next/navigation";
import { useState } from "react";
import toast from "react-hot-toast";
import { funDeleteMemberTask, funGetTaskDivisionById } from "../lib/api_task";
import { IDataMemberTaskDivision } from "../lib/type_task";
import { FaUser } from "react-icons/fa6";
import { IoIosCloseCircle } from "react-icons/io";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { useHookstate } from "@hookstate/core";
import { globalIsAdminDivision } from "@/module/division_new";
import { funDeleteMemberTask, funGetTaskDivisionById } from "../lib/api_task";
import { IDataMemberTaskDivision } from "../lib/type_task";
import { useWibuRealtime } from "wibu-realtime";
export default function ListAnggotaDetailTask() {
@@ -28,6 +29,10 @@ export default function ListAnggotaDetailTask() {
const isMobile2 = useMediaQuery("(max-width: 438px)");
const tema = useHookstate(TEMA)
const [reason, setReason] = useState("")
const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
async function getOneDataCancel() {
try {
@@ -48,16 +53,15 @@ export default function ListAnggotaDetailTask() {
getOneDataCancel();
}, [param.detail])
async function getOneData() {
async function getOneData(loading: boolean) {
try {
setLoading(true)
setLoading(loading)
const res = await funGetTaskDivisionById(param.detail, 'member');
if (res.success) {
setData(res.data)
} else {
toast.error(res.message);
}
} catch (error) {
console.error(error);
toast.error("Gagal mendapatkan member tugas divisi, coba lagi nanti");
@@ -67,17 +71,30 @@ export default function ListAnggotaDetailTask() {
}
useShallowEffect(() => {
getOneData();
getOneData(true);
}, [param.detail])
useShallowEffect(() => {
if (dataRealTime && dataRealTime.some((i: any) => i.category == 'tugas-detail-anggota' && i.id == param.detail)) {
getOneData(false)
} else if (dataRealTime && dataRealTime.some((i: any) => i.category == 'tugas-detail-status' && i.id == param.detail)) {
getOneDataCancel()
}
}, [dataRealTime])
async function onSubmit() {
try {
const res = await funDeleteMemberTask(param.detail, { idUser: dataChoose.id });
if (res.success) {
setDataRealtime([{
category: "tugas-detail-anggota",
id: param.detail,
}])
toast.success(res.message)
setDataChoose({ id: '', name: '' })
getOneData()
getOneData(false)
setOpenDrawer(false)
} else {
toast.error(res.message)

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

@@ -1,16 +1,17 @@
'use client'
import { LayoutDrawer, LayoutModalViewFile, SkeletonDetailListTugasTask, TEMA } from "@/module/_global";
import { keyWibu, LayoutDrawer, LayoutModalViewFile, TEMA } from "@/module/_global";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { useHookstate } from "@hookstate/core";
import { Box, Center, Flex, Grid, Group, SimpleGrid, Skeleton, Stack, Text } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useParams } from "next/navigation";
import { useState } from "react";
import toast from "react-hot-toast";
import { BsFileTextFill, BsFiletypeCsv, BsFiletypeHeic, BsFiletypeJpg, BsFiletypePdf, BsFiletypePng } from "react-icons/bs";
import { FaTrash } from "react-icons/fa6";
import { funDeleteFileTask, funGetTaskDivisionById } from "../lib/api_task";
import { IDataFileTaskDivision } from "../lib/type_task";
import { FaTrash } from "react-icons/fa6";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { useHookstate } from "@hookstate/core";
import { useWibuRealtime } from "wibu-realtime";
export default function ListFileDetailTask() {
const [isData, setData] = useState<IDataFileTaskDivision[]>([])
@@ -26,6 +27,10 @@ export default function ListFileDetailTask() {
const [isExtension, setExtension] = useState('')
const tema = useHookstate(TEMA)
const [reason, setReason] = useState("")
const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
async function getOneDataCancel() {
try {
@@ -46,9 +51,9 @@ export default function ListFileDetailTask() {
getOneDataCancel();
}, [param.detail])
async function getOneData() {
async function getOneData(loading: boolean) {
try {
setLoading(true)
setLoading(loading)
const res = await funGetTaskDivisionById(param.detail, 'file');
if (res.success) {
setData(res.data)
@@ -64,7 +69,7 @@ export default function ListFileDetailTask() {
}
useShallowEffect(() => {
getOneData();
getOneData(true);
}, [param.detail])
@@ -72,8 +77,12 @@ export default function ListFileDetailTask() {
try {
const res = await funDeleteFileTask(idData);
if (res.success) {
setDataRealtime([{
category: "tugas-detail-file",
id: param.detail,
}])
toast.success(res.message)
getOneData()
getOneData(false)
setIdData("")
setIdDataStorage("")
setOpenDrawer(false)
@@ -84,9 +93,16 @@ export default function ListFileDetailTask() {
console.error(error);
toast.error("Gagal menghapus file, coba lagi nanti");
}
}
useShallowEffect(() => {
if (dataRealTime && dataRealTime.some((i: any) => i.category == 'tugas-detail-file' && i.id == param.detail)) {
getOneData(false)
} else if (dataRealTime && dataRealTime.some((i: any) => i.category == 'tugas-detail-status' && i.id == param.detail)) {
getOneDataCancel()
}
}, [dataRealTime])
return (
<Box pt={20}>
<Text fw={'bold'} c={tema.get().utama}>File</Text>

50
src/module/task/ui/detail_list_tugas_task.tsx
View File

@@ -1,18 +1,19 @@
'use client'
import { LayoutDrawer, SkeletonDetailListTugasTask, TEMA } from "@/module/_global"
import { Box, Grid, Center, Checkbox, Group, SimpleGrid, Text, Stack, Flex, Divider } from "@mantine/core"
import { keyWibu, LayoutDrawer, SkeletonDetailListTugasTask, TEMA } from "@/module/_global"
import LayoutModal from "@/module/_global/layout/layout_modal"
import { useHookstate } from "@hookstate/core"
import { Box, Center, Checkbox, Divider, Flex, Grid, Group, SimpleGrid, Stack, Text } from "@mantine/core"
import { useShallowEffect } from "@mantine/hooks"
import "moment/locale/id"
import { useParams, useRouter } from "next/navigation"
import { useState } from "react"
import toast from "react-hot-toast"
import { AiOutlineFileDone, AiOutlineFileSync } from "react-icons/ai"
import { funDeleteDetailTask, funGetTaskDivisionById, funUpdateStatusDetailTask } from "../lib/api_task"
import { useState } from "react"
import { IDataListTaskDivision } from "../lib/type_task"
import { FaCheck, FaPencil, FaTrash } from "react-icons/fa6"
import LayoutModal from "@/module/_global/layout/layout_modal"
import { useWibuRealtime } from "wibu-realtime"
import { funDeleteDetailTask, funGetTaskDivisionById, funUpdateStatusDetailTask } from "../lib/api_task"
import { IDataListTaskDivision } from "../lib/type_task"
import { globalRefreshTask, valStatusDetailTask } from "../lib/val_task"
import { useHookstate } from "@hookstate/core"
import "moment/locale/id"
export default function ListTugasDetailTask() {
const [openDrawer, setOpenDrawer] = useState(false)
@@ -27,6 +28,10 @@ export default function ListTugasDetailTask() {
const refresh = useHookstate(globalRefreshTask)
const tema = useHookstate(TEMA)
const [reason, setReason] = useState("")
const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
async function getOneDataCancel() {
try {
@@ -47,9 +52,9 @@ export default function ListTugasDetailTask() {
getOneDataCancel();
}, [param.detail])
async function getOneData() {
async function getOneData(loading: boolean) {
try {
setLoading(true)
setLoading(loading)
const res = await funGetTaskDivisionById(param.detail, 'task');
if (res.success) {
setData(res.data)
@@ -66,7 +71,7 @@ export default function ListTugasDetailTask() {
}
useShallowEffect(() => {
getOneData();
getOneData(true);
}, [param.detail])
@@ -74,9 +79,13 @@ export default function ListTugasDetailTask() {
try {
const res = await funDeleteDetailTask(idData, { idProject: param.detail });
if (res.success) {
setDataRealtime([{
category: "tugas-detail-task",
id: param.detail,
}])
toast.success(res.message);
refresh.set(true)
getOneData();
getOneData(false);
setIdData("")
setOpenDrawer(false)
} else {
@@ -93,9 +102,13 @@ export default function ListTugasDetailTask() {
try {
const res = await funUpdateStatusDetailTask(idData, { status: val, idProject: param.detail });
if (res.success) {
setDataRealtime([{
category: "tugas-detail-task",
id: param.detail,
}])
toast.success(res.message);
refresh.set(true)
getOneData();
getOneData(false);
setIdData("")
setOpenDrawerStatus(false)
setOpenDrawer(false)
@@ -108,6 +121,15 @@ export default function ListTugasDetailTask() {
}
}
useShallowEffect(() => {
if (dataRealTime && dataRealTime.some((i: any) => i.category == 'tugas-detail-task' && i.id == param.detail)) {
refresh.set(true)
getOneData(false)
} else if (dataRealTime && dataRealTime.some((i: any) => i.category == 'tugas-detail-status' && i.id == param.detail)) {
getOneDataCancel()
}
}, [dataRealTime])
return (
<Box pt={20}>
<Text fw={"bold"} c={tema.get().utama}>
@@ -118,7 +140,7 @@ export default function ListTugasDetailTask() {
style={{
borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`,
padding:20
padding: 20
}}
>
{

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

@@ -1,15 +1,16 @@
'use client'
import { TEMA } from "@/module/_global";
import { Box, Grid, ActionIcon, Progress, Text, Skeleton, Group } from "@mantine/core";
import { keyWibu, TEMA } from "@/module/_global";
import { useHookstate } from "@hookstate/core";
import { ActionIcon, Box, Grid, Group, Progress, Skeleton, Text } from "@mantine/core";
import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
import { useParams } from "next/navigation";
import { useState } from "react";
import toast from "react-hot-toast";
import { HiMiniPresentationChartBar } from "react-icons/hi2";
import { funGetTaskDivisionById } from "../lib/api_task";
import { useState } from "react";
import { globalRefreshTask } from "../lib/val_task";
import { useHookstate } from "@hookstate/core";
import { IoIosWarning } from "react-icons/io";
import { useWibuRealtime } from "wibu-realtime";
import { funGetTaskDivisionById } from "../lib/api_task";
import { globalRefreshTask } from "../lib/val_task";
export default function ProgressDetailTask() {
const [valProgress, setValProgress] = useState(0)
@@ -20,6 +21,10 @@ export default function ProgressDetailTask() {
const isMobile = useMediaQuery('(max-width: 369px)');
const tema = useHookstate(TEMA)
const [reason, setReason] = useState("")
const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
async function getOneDataCancel() {
try {
@@ -41,9 +46,9 @@ export default function ProgressDetailTask() {
}, [param.detail])
async function getOneData() {
async function getOneData(loading: boolean) {
try {
setLoading(true)
setLoading(loading)
const res = await funGetTaskDivisionById(param.detail, 'progress');
if (res.success) {
setValProgress(res.data.progress);
@@ -51,7 +56,6 @@ export default function ProgressDetailTask() {
} else {
toast.error(res.message);
}
setLoading(false)
} catch (error) {
console.error(error);
toast.error("Gagal mendapatkan progress tugas divisi, coba lagi nanti");
@@ -62,7 +66,7 @@ export default function ProgressDetailTask() {
function onRefresh() {
if (refresh.get()) {
getOneData()
getOneData(false)
refresh.set(false)
}
}
@@ -73,9 +77,16 @@ export default function ProgressDetailTask() {
}, [refresh.get()])
useShallowEffect(() => {
getOneData();
getOneData(true);
}, [param.detail])
useShallowEffect(() => {
if (dataRealTime && dataRealTime.some((i: any) => i.category == 'tugas-detail-status' && i.id == param.detail)) {
getOneDataCancel()
getOneData(false)
}
}, [dataRealTime])
return (
<Box mt={10}>
{loading ? "" :

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

@@ -1,5 +1,5 @@
"use client";
import { LayoutNavbarNew, TEMA } from "@/module/_global";
import { keyWibu, LayoutNavbarNew, TEMA } from "@/module/_global";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { useHookstate } from "@hookstate/core";
import { Box, Button, rem, Skeleton, Stack, TextInput } from "@mantine/core";
@@ -8,6 +8,7 @@ import { useParams, useRouter } from "next/navigation";
import { useState } from "react";
import toast from "react-hot-toast";
import { funEditTask, funGetTaskDivisionById } from "../lib/api_task";
import { useWibuRealtime } from "wibu-realtime";
export default function EditTask() {
@@ -20,6 +21,10 @@ export default function EditTask() {
const [touched, setTouched] = useState({
title: false,
});
const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
function onVerification() {
if (Object.values(touched).some((v) => v == true))
@@ -42,6 +47,10 @@ export default function EditTask() {
try {
const res = await funEditTask(param.detail, { title })
if (res.success) {
setDataRealtime([{
category: "tugas-detail",
id: param.detail,
}])
toast.success(res.message)
router.push("./")
} else {
@@ -97,7 +106,7 @@ export default function EditTask() {
label="Judul Tugas"
size="md"
value={title}
onChange={(e) => { onValidation('title', e.target.value)}}
onChange={(e) => { onValidation('title', e.target.value) }}
error={
touched.title && (
title == "" ? "Error! harus memasukkan judul tugas" : null

37
src/module/task/ui/list_division_task.tsx
View File

@@ -1,4 +1,4 @@
import { currentScroll, SkeletonList, TEMA } from "@/module/_global";
import { currentScroll, globalNotifPage, ReloadButtonTop, SkeletonList, TEMA } from "@/module/_global";
import { ActionIcon, Avatar, Box, Card, Center, Divider, Flex, Grid, Group, Progress, Skeleton, Text, TextInput, Title } from "@mantine/core";
import { useParams, useRouter, useSearchParams } from "next/navigation";
import { useEffect, useState } from "react";
@@ -25,6 +25,8 @@ export default function ListDivisionTask() {
const { value: containerRef } = useHookstate(currentScroll)
const [isPage, setPage] = useState(1)
const [totalData, setTotalData] = useState(0)
const [isRefresh, setRefresh] = useState(false)
const notifLoadPage = useHookstate(globalNotifPage)
const handleList = () => {
setIsList(!isList)
@@ -32,15 +34,14 @@ export default function ListDivisionTask() {
const fetchData = async (loading: boolean) => {
try {
if (loading)
setLoading(true)
setLoading(loading)
const response = await funGetAllTask('?division=' + param.id + '&status=' + status + '&search=' + searchQuery + '&page=' + isPage)
if (response.success) {
setTotalData(response.total)
if (isPage == 1) {
setData(response?.data)
} else {
setData([...isData, ...response.data])
setData((isData) => [...isData, ...response.data])
}
} else {
toast.error(response.message);
@@ -87,8 +88,36 @@ export default function ListDivisionTask() {
};
}, [containerRef, isPage]);
useShallowEffect(() => {
if (notifLoadPage.get().category == 'division/' + param.id + '/task' && notifLoadPage.get().load == true) {
setRefresh(true)
}
}, [notifLoadPage.get().load])
function onRefresh() {
notifLoadPage.set({
category: '',
load: false
})
setRefresh(false)
setPage(1)
setTimeout(() => {
fetchData(false)
}, 500)
}
return (
<Box py={20}>
{
isRefresh &&
<ReloadButtonTop
onReload={() => { onRefresh() }}
title='UPDATE'
/>
}
<Grid justify='center' align='center'>
<Grid.Col span={10}>
<TextInput

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

@@ -1,17 +1,18 @@
'use client'
import { globalRole, LayoutDrawer, LayoutNavbarNew, TEMA } from "@/module/_global";
import { globalRole, keyWibu, LayoutDrawer, LayoutNavbarNew, TEMA } from "@/module/_global";
import { globalIsAdminDivision } from "@/module/division_new";
import { useHookstate } from "@hookstate/core";
import { ActionIcon, Box, Flex, SimpleGrid, Stack, Text } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useParams, useRouter } from "next/navigation";
import { useState } from "react";
import toast from "react-hot-toast";
import { funGetTaskDivisionById } from "../lib/api_task";
import { useShallowEffect } from "@mantine/hooks";
import { FaFileCirclePlus, FaPencil, FaUsers } from "react-icons/fa6";
import { HiMenu } from "react-icons/hi";
import { IoAddCircle } from "react-icons/io5";
import { FaFileCirclePlus, FaPencil, FaUsers } from "react-icons/fa6";
import { MdCancel } from "react-icons/md";
import { globalIsAdminDivision } from "@/module/division_new";
import { useHookstate } from "@hookstate/core";
import { funGetTaskDivisionById } from "../lib/api_task";
import { useWibuRealtime } from "wibu-realtime";
export default function NavbarDetailDivisionTask() {
const router = useRouter()
@@ -22,6 +23,10 @@ export default function NavbarDetailDivisionTask() {
const adminLogin = useHookstate(globalIsAdminDivision)
const tema = useHookstate(TEMA)
const [reason, setReason] = useState("")
const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
async function getOneData() {
try {
@@ -43,6 +48,13 @@ export default function NavbarDetailDivisionTask() {
getOneData();
}, [param.detail])
useShallowEffect(() => {
if (dataRealTime && dataRealTime.some((i: any) => (i.category == 'tugas-detail' || i.category == 'tugas-detail-status') && i.id == param.detail)) {
getOneData()
}
}, [dataRealTime])
return (
<>
<LayoutNavbarNew back={`/division/${param.id}/task/`} title={name} menu={

11
src/module/user/member/ui/create_member.tsx
View File

@@ -1,5 +1,5 @@
"use client";
import { globalRole, TEMA } from "@/module/_global";
import { globalRole, keyWibu, TEMA } from "@/module/_global";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { funGetUserByCookies } from "@/module/auth";
import { funGetAllGroup, IDataGroup } from "@/module/group";
@@ -16,6 +16,7 @@ import { FaCamera } from "react-icons/fa6";
import { valueRoleUser } from "../../lib/val_user";
import { funCreateMember } from "../lib/api_member";
import { IDataPositionMember, IDataROleMember } from "../lib/type_member";
import { useWibuRealtime } from "wibu-realtime";
export default function CreateMember() {
const router = useRouter();
@@ -29,6 +30,10 @@ export default function CreateMember() {
const [imgForm, setImgForm] = useState<any>()
const openRef = useRef<() => void>(null)
const tema = useHookstate(TEMA)
const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
const [touched, setTouched] = useState({
nik: false,
name: false,
@@ -118,6 +123,10 @@ export default function CreateMember() {
))
const res = await funCreateMember(fd);
if (res.success) {
setDataRealtime([{
category: "data-member",
group: res.data.idGroup,
}])
toast.success(res.message);
router.push("/member?active=true");
} else {

25
src/module/user/member/ui/drawer_detail_member.tsx
View File

@@ -1,28 +1,23 @@
"use client";
import { TEMA, WARNA } from "@/module/_global";
import { keyWibu, TEMA } from "@/module/_global";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { useHookstate } from "@hookstate/core";
import { Box, Flex, SimpleGrid, Stack, Text } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useRouter } from "next/navigation";
import { useState } from "react";
import toast from "react-hot-toast";
import { FaPencil, FaToggleOff } from "react-icons/fa6";
import { ImUserCheck } from "react-icons/im";
import { useWibuRealtime } from "wibu-realtime";
import { funEditStatusMember } from "../lib/api_member";
import { useHookstate } from "@hookstate/core";
export default function DrawerDetailMember({
onDeleted,
id,
status,
}: {
onDeleted: (val: boolean) => void;
id: string;
status: boolean;
}) {
export default function DrawerDetailMember({ onDeleted, id, status, }: { onDeleted: (val: boolean) => void; id: string; status: boolean; }) {
const router = useRouter();
const [isModal, setModal] = useState(false);
const tema = useHookstate(TEMA)
const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
async function nonActive(val: boolean) {
try {
@@ -31,6 +26,10 @@ export default function DrawerDetailMember({
isActive: status ? true : false,
});
if (res.success) {
setDataRealtime([{
category: "data-member",
group: res.data.idGroup,
}])
toast.success(res.message);
router.push("/member?active=true");
onDeleted(true);

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

@@ -1,14 +1,15 @@
import { currentScroll, globalRole, SkeletonSingle, SkeletonUser, TEMA } from "@/module/_global"
import { Box, Text, TextInput, Divider, Avatar, Grid, Group, ActionIcon, Skeleton } from "@mantine/core"
import { currentScroll, globalRole, keyWibu, ReloadButtonTop, SkeletonUser, TEMA } from "@/module/_global"
import { useHookstate } from "@hookstate/core"
import { Avatar, Box, Divider, Grid, Text, TextInput } from "@mantine/core"
import { useMediaQuery, useShallowEffect } from "@mantine/hooks"
import _ from "lodash"
import { useRouter, useSearchParams } from "next/navigation"
import { useEffect, useState } from "react"
import { HiMagnifyingGlass } from "react-icons/hi2"
import { IListMember } from "../lib/type_member"
import { funGetAllmember } from "../lib/api_member"
import toast from "react-hot-toast"
import _ from "lodash"
import { useHookstate } from "@hookstate/core"
import { HiMagnifyingGlass } from "react-icons/hi2"
import { useWibuRealtime } from "wibu-realtime"
import { funGetAllmember } from "../lib/api_member"
import { IListMember } from "../lib/type_member"
export default function TabListMember() {
@@ -21,10 +22,16 @@ export default function TabListMember() {
const status = searchParams.get('active')
const roleLogin = useHookstate(globalRole)
const [nameGroup, setNameGroup] = useState('')
const [idGroup, setIdGroup] = useState('')
const tema = useHookstate(TEMA)
const { value: containerRef } = useHookstate(currentScroll);
const [isPage, setPage] = useState(1)
const isMobile2 = useMediaQuery("(max-width: 438px)");
const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
const [isRefresh, setRefresh] = useState(false)
async function getAllUser(loading: boolean) {
@@ -34,10 +41,11 @@ export default function TabListMember() {
const res = await funGetAllmember('?active=' + status + '&group=' + group + '&search=' + searchQuery + '&page=' + isPage)
if (res.success) {
setNameGroup(res.filter.name)
setIdGroup(res.filter.id)
if (isPage == 1) {
setDataMember(res.data)
} else {
setDataMember([...dataMember, ...res.data])
setDataMember((dataMember) => [...dataMember, ...res.data])
}
} else {
@@ -81,9 +89,30 @@ export default function TabListMember() {
};
}, [containerRef, isPage]);
useShallowEffect(() => {
if (dataRealTime && dataRealTime.some((i: any) => i.category == 'data-member' && i.group == idGroup)) {
setRefresh(true)
}
}, [dataRealTime])
function onRefresh() {
setRefresh(false)
setPage(1)
getAllUser(true)
}
return (
<>
<Box>
{
isRefresh &&
<ReloadButtonTop
onReload={() => { onRefresh() }}
title='UPDATE'
/>
}
<TextInput
styles={{
input: {