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

Merge pull request #328 from bipproduction/join

Browse Source 
Join
This commit is contained in:
Amalia
2024-11-06 11:27:55 +08:00
committed by GitHub
parent 7eaef66a50 1794c2e758
commit 6099a6ffd4
55 changed files with 861 additions and 654 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/(application)/division/[id]/(fitur-division)/calender/[detail]/page.tsx
View File

@@ -1,10 +1,9 @@
import { DetailEventDivision } from '@/module/calender'; import { DetailEventDivision } from '@/module/calender';
import React from 'react';
function Page() { function Page() {
return ( return (
<> <>
<DetailEventDivision /> <DetailEventDivision />
</> </>
); );
} }

7
src/app/api/calender/[id]/route.ts
View File

@@ -100,7 +100,7 @@ export async function GET(request: Request, context: { params: { id: string } })
} }
return NextResponse.json({ success: true, message: "Berhasil mendapatkan kalender", data: dataFix }, { status: 200 }); return NextResponse.json({ success: true, message: "Berhasil mendapatkan kalender", data: dataFix, user: user.id }, { status: 200 });
} catch (error) { } catch (error) {
return NextResponse.json({ success: false, message: "Gagal mendapatkan kalender, data tidak ditemukan (error: 500)", }, { status: 500 }); return NextResponse.json({ success: false, message: "Gagal mendapatkan kalender, data tidak ditemukan (error: 500)", }, { status: 500 });
@@ -139,13 +139,16 @@ export async function DELETE(request: Request, context: { params: { id: string }
}, },
data: { data: {
isActive: false isActive: false
},
select: {
dateStart: true
} }
}); });
// create log user // create log user
const log = await createLogUser({ act: 'DELETE', desc: 'User menghapus data acara kalender', table: 'divisionCalendar', data: id }) const log = await createLogUser({ act: 'DELETE', desc: 'User menghapus data acara kalender', table: 'divisionCalendar', data: id })
return NextResponse.json({ success: true, message: "Berhasil menghapus acara kalender", data }, { status: 200 }); return NextResponse.json({ success: true, message: "Berhasil menghapus acara kalender", data, user: user.id }, { status: 200 });
} catch (error) { } catch (error) {
return NextResponse.json({ success: false, message: "Gagal menghapus kalender, coba lagi nanti (error: 500)", }, { status: 500 } return NextResponse.json({ success: false, message: "Gagal menghapus kalender, coba lagi nanti (error: 500)", }, { status: 500 }

17
src/app/api/division/report/route.ts
View File

@@ -8,14 +8,20 @@ export async function GET(request: Request) {
try { try {
const user = await funGetUserByCookies() const user = await funGetUserByCookies()
const { searchParams } = new URL(request.url) const { searchParams } = new URL(request.url)
const group = searchParams.get("group") const idGroup = searchParams.get("group")
const division = searchParams.get("division") const division = searchParams.get("division")
const date = searchParams.get("date") const date = searchParams.get("date")
let grup
if (user.id == undefined) { if (user.id == undefined) {
return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 }) return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 })
} }
if (idGroup == "null" || idGroup == undefined || idGroup == "") {
grup = user.idGroup
} else {
grup = idGroup
}
// CHART PROGRESS // CHART PROGRESS
let kondisiProgress let kondisiProgress
@@ -26,7 +32,7 @@ export async function GET(request: Request) {
lte: new Date(String(date)) lte: new Date(String(date))
}, },
Division: { Division: {
idGroup: String(group) idGroup: String(grup)
} }
} }
} else { } else {
@@ -52,9 +58,10 @@ export async function GET(request: Request) {
const cek = data.some((i: any) => i.status == dataStatus[index].status) const cek = data.some((i: any) => i.status == dataStatus[index].status)
if (cek) { if (cek) {
const find = ((Number(data.find((i: any) => i.status == dataStatus[index].status)?._count) * 100) / data.reduce((n, { _count }) => n + _count, 0)).toFixed(2) const find = ((Number(data.find((i: any) => i.status == dataStatus[index].status)?._count) * 100) / data.reduce((n, { _count }) => n + _count, 0)).toFixed(2)
const fix = find != "100.00" ? find.substr(-2, 2) == "00" ? find.substr(0, 2) : find : "100"
input = { input = {
name: dataStatus[index].name, name: dataStatus[index].name,
value: find value: fix
} }
} else { } else {
input = { input = {
@@ -75,7 +82,7 @@ export async function GET(request: Request) {
isActive: true, isActive: true,
category: 'FILE', category: 'FILE',
Division: { Division: {
idGroup: String(group) idGroup: String(grup)
}, },
createdAt: { createdAt: {
lte: new Date(String(date)) lte: new Date(String(date))
@@ -137,7 +144,7 @@ export async function GET(request: Request) {
kondisiEvent = { kondisiEvent = {
isActive: true, isActive: true,
Division: { Division: {
idGroup: String(group) idGroup: String(grup)
}, },
dateStart: new Date(String(date)) dateStart: new Date(String(date))
} }

9
src/app/api/document/route.ts
View File

@@ -125,6 +125,11 @@ export async function GET(request: Request) {
updatedAt: true updatedAt: true
} }
} }
},
orderBy: {
DivisionDocumentFolderFile: {
createdAt: 'desc'
}
} }
}) })
@@ -169,7 +174,7 @@ export async function GET(request: Request) {
updatedAt: true updatedAt: true
}, },
orderBy: { orderBy: {
name: 'asc' createdAt: 'desc'
} }
}) })
@@ -185,7 +190,7 @@ export async function GET(request: Request) {
allData.push(...formatDataShare) allData.push(...formatDataShare)
} }
const formatData = _.orderBy(allData, ['category', 'name'], ['desc', 'asc']); const formatData = _.orderBy(allData, ['category', 'createdAt'], ['desc', 'asc']);
let pathNow = path let pathNow = path
let jalur = [] let jalur = []

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

@@ -185,7 +185,7 @@ export async function GET(request: Request) {
const cek = data.some((i: any) => i.status == dataStatus[index].status) const cek = data.some((i: any) => i.status == dataStatus[index].status)
if (cek) { if (cek) {
const find = ((Number(data.find((i: any) => i.status == dataStatus[index].status)?._count) * 100) / data.reduce((n, { _count }) => n + _count, 0)).toFixed(2) const find = ((Number(data.find((i: any) => i.status == dataStatus[index].status)?._count) * 100) / data.reduce((n, { _count }) => n + _count, 0)).toFixed(2)
const fix = find.substr(-2, 2) == "00" ? find.substr(0, 2) : find const fix = find != "100.00" ? find.substr(-2, 2) == "00" ? find.substr(0, 2) : find : "100"
input = { input = {
name: dataStatus[index].name, name: dataStatus[index].name,
value: fix value: fix

18
src/app/api/project/[id]/member/route.ts
View File

@@ -136,6 +136,10 @@ export async function GET(request: Request, context: { params: { id: string } })
id: { id: {
not: String(userId) not: String(userId)
}, },
OR: [
{ idUserRole: 'coadmin', },
{ idUserRole: 'user', }
],
isActive: true, isActive: true,
name: { name: {
contains: (name == undefined || name == "null") ? "" : name, contains: (name == undefined || name == "null") ? "" : name,
@@ -147,14 +151,24 @@ export async function GET(request: Request, context: { params: { id: string } })
id: true, id: true,
name: true, name: true,
email: true, email: true,
img: true img: true,
UserRole: {
select: {
name: true
}
}
}, },
orderBy: { orderBy: {
name: 'asc' name: 'asc'
} }
}) })
const fixMember = member.map((v: any) => ({ const omitData = member.map((v: any) => ({
..._.omit(v, ["UserRole"]),
userRole: v.UserRole.name
}))
const fixMember = omitData.map((v: any) => ({
idUser: v.id, idUser: v.id,
name: v.name, name: v.name,
email: v.email, email: v.email,

10
src/app/api/project/[id]/route.ts
View File

@@ -65,6 +65,7 @@ export async function GET(request: Request, context: { params: { id: string } })
status: true, status: true,
dateStart: true, dateStart: true,
dateEnd: true, dateEnd: true,
createdAt: true
}, },
orderBy: { orderBy: {
createdAt: 'asc' createdAt: 'asc'
@@ -72,12 +73,13 @@ export async function GET(request: Request, context: { params: { id: string } })
}) })
const formatData = dataProgress.map((v: any) => ({ const formatData = dataProgress.map((v: any) => ({
..._.omit(v, ["dateStart", "dateEnd"]), ..._.omit(v, ["dateStart", "dateEnd", "createdAt"]),
dateStart: moment(v.dateStart).format("DD-MM-YYYY"), dateStart: moment(v.dateStart).format("DD-MM-YYYY"),
dateEnd: moment(v.dateEnd).format("DD-MM-YYYY"), dateEnd: moment(v.dateEnd).format("DD-MM-YYYY"),
createdAt: moment(v.createdAt).format("DD-MM-YYYY HH:mm"),
})) }))
const dataFix = _.orderBy(formatData, 'createdAt', 'asc')
allData = formatData allData = dataFix
} else if (kategori == "file") { } else if (kategori == "file") {
const dataFile = await prisma.projectFile.findMany({ const dataFile = await prisma.projectFile.findMany({
@@ -86,7 +88,7 @@ export async function GET(request: Request, context: { params: { id: string } })
idProject: String(id) idProject: String(id)
}, },
orderBy: { orderBy: {
createdAt: 'desc' createdAt: 'asc'
}, },
select: { select: {
id: true, id: true,

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

@@ -50,6 +50,7 @@ export async function GET(request: Request) {
}, },
select: { select: {
id: true, id: true,
idUserRole: true,
isActive: true, isActive: true,
nik: true, nik: true,
name: true, name: true,
@@ -92,6 +93,7 @@ export async function GET(request: Request) {
}, },
select: { select: {
id: true, id: true,
idUserRole: true,
isActive: true, isActive: true,
nik: true, nik: true,
name: true, name: true,

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) { export async function GET(request: Request) {
try { try {
return NextResponse.json({ success: true, version: "0.1.8", mode: "staging" }, { status: 200 }); return NextResponse.json({ success: true, version: "0.1.9", mode: "staging" }, { status: 200 });
} catch (error) { } catch (error) {
console.error(error); console.error(error);
return NextResponse.json({ success: false, version: "Gagal mendapatkan version, coba lagi nanti (error: 500)", reason: (error as Error).message, }, { status: 500 }); return NextResponse.json({ success: false, version: "Gagal mendapatkan version, coba lagi nanti (error: 500)", reason: (error as Error).message, }, { status: 500 });

4
src/app/page.tsx
View File

@@ -1,8 +1,4 @@
import { pwd_key_config } from "@/module/_global";
import { funDetectCookies, ViewLogin } from "@/module/auth"; import { funDetectCookies, ViewLogin } from "@/module/auth";
import { unsealData } from "iron-session";
import _ from "lodash";
import { cookies } from "next/headers";
import { redirect } from "next/navigation"; import { redirect } from "next/navigation";
export default async function Home() { export default async function Home() {

96
src/module/auth/login/view/view_login.tsx
View File

@@ -1,28 +1,14 @@
"use client" "use client"
import { LayoutLogin, WARNA } from "@/module/_global"; import { LayoutLogin, WARNA } from "@/module/_global";
import { import { Box, Button, Stack, Text, TextInput } from "@mantine/core";
Box, import { useFocusTrap } from "@mantine/hooks";
Button, import { useState } from "react";
Checkbox,
Image,
rem,
Stack,
Text,
TextInput,
Title,
} from "@mantine/core";
import { useRouter } from "next/navigation";
import React, { useState } from "react";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
import ViewVerification from "../../varification/view/view_verification"; import ViewVerification from "../../varification/view/view_verification";
import { useFocusTrap } from "@mantine/hooks";
function ViewLogin() { function ViewLogin() {
const focusTrapRef = useFocusTrap() const focusTrapRef = useFocusTrap()
const router = useRouter() const textInfo = "Kami akan mengirimkan kode verifikasi melalui WhatsApp untuk mengonfirmasi nomor Anda.";
const textInfo =
"Kami akan mengirimkan kode verifikasi melalui WhatsApp untuk mengonfirmasi nomor Anda.";
const [isPhone, setPhone] = useState("") const [isPhone, setPhone] = useState("")
const [isOTP, setOTP] = useState<any>(null) const [isOTP, setOTP] = useState<any>(null)
const [isValPhone, setValPhone] = useState<any>(null) const [isValPhone, setValPhone] = useState<any>(null)
@@ -37,46 +23,50 @@ function ViewLogin() {
if (isPhone.toString().length <= 11) if (isPhone.toString().length <= 11)
return toast.error('Nomor telepon tidak valid') return toast.error('Nomor telepon tidak valid')
const cek = await fetch('/api/auth/login', { try {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ phone: isPhone })
})
const cekLogin = await cek.json()
if (cekLogin.success) {
const code = Math.floor(Math.random() * 1000) + 1000
setLoading(true) setLoading(true)
try { const cek = await fetch('/api/auth/login', {
const res = await fetch(`https://wa.wibudev.com/code?nom=${cekLogin.phone}&text=*DARMASABA*%0A%0A method: 'POST',
JANGAN BERIKAN KODE RAHASIA ini kepada siapa pun TERMASUK PIHAK DARMASABA. Masukkan otentikasi: *${encodeURIComponent(code)}*`).then( headers: {
async (res) => { 'Content-Type': 'application/json'
if (res.status == 200) { },
setValPhone(cekLogin.phone) body: JSON.stringify({ phone: isPhone })
setOTP(code) })
setUser(cekLogin.id) const cekLogin = await cek.json()
setVerif(true) if (cekLogin.success) {
setLoading(false) const code = Math.floor(Math.random() * 1000) + 1000
toast.success('Kode verifikasi telah dikirim') try {
} else { const res = await fetch(`https://wa.wibudev.com/code?nom=${cekLogin.phone}&text=*DARMASABA*%0A%0A
console.error(res.status) JANGAN BERIKAN KODE RAHASIA ini kepada siapa pun TERMASUK PIHAK DARMASABA. Masukkan otentikasi: *${encodeURIComponent(code)}*`).then(
toast.error('Internal Server Error') async (res) => {
setLoading(false) if (res.status == 200) {
setValPhone(cekLogin.phone)
setOTP(code)
setUser(cekLogin.id)
setVerif(true)
toast.success('Kode verifikasi telah dikirim')
} else {
console.error(res.status)
toast.error('Internal Server Error')
}
} }
} )
) } catch (error) {
} catch (error) { console.error(error)
console.error(error) toast.error('Internal Server Error')
toast.error('Internal Server Error') }
}finally{ } else {
setLoading(false) return toast.error(cekLogin.message)
} }
} else { } catch (error) {
return toast.error(cekLogin.message) console.error(error)
toast.error('Internal Server Error')
} finally {
setLoading(false)
} }
} }
if (isVerif) return <ViewVerification otp={isOTP} phone={isValPhone} user={isUser} /> if (isVerif) return <ViewVerification otp={isOTP} phone={isValPhone} user={isUser} />

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

@@ -211,6 +211,7 @@ export default function CreateCalenderDivisionCaleder() {
} }
/> />
<DateInput <DateInput
valueFormat='DD-MM-YYYY'
required required
styles={{ styles={{
input: { input: {

22
src/module/calender/ui/create_user_calender.tsx
View File

@@ -1,19 +1,18 @@
import React, { useState } from 'react'; import { LayoutNavbarNew, SkeletonList, TEMA } from '@/module/_global';
import { globalCalender } from '../lib/val_calender'; import { funGetSearchMemberDivision, IDataMemberDivision } from '@/module/division_new';
import { useParams, useRouter } from 'next/navigation';
import { funGetDivisionById, funGetSearchMemberDivision, IDataMemberDivision } from '@/module/division_new';
import { useHookstate } from '@hookstate/core'; import { useHookstate } from '@hookstate/core';
import toast from 'react-hot-toast'; import { Carousel } from '@mantine/carousel';
import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Indicator, rem, Stack, Text, TextInput } from '@mantine/core';
import { useMediaQuery, useShallowEffect } from '@mantine/hooks'; import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import { LayoutNavbarNew, SkeletonList, SkeletonSingle, TEMA } from '@/module/_global'; import { useParams } from 'next/navigation';
import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Group, Indicator, rem, Stack, Text, TextInput } from '@mantine/core'; import { useState } from 'react';
import toast from 'react-hot-toast';
import { FaCheck } from 'react-icons/fa6'; import { FaCheck } from 'react-icons/fa6';
import { HiChevronLeft, HiMagnifyingGlass } from 'react-icons/hi2'; import { HiChevronLeft, HiMagnifyingGlass } from 'react-icons/hi2';
import { IoArrowBackOutline, IoClose } from 'react-icons/io5'; import { IoArrowBackOutline, IoClose } from 'react-icons/io5';
import { Carousel } from '@mantine/carousel'; import { globalCalender } from '../lib/val_calender';
export default function CreateUserCalender({ onClose }: { onClose: (val: any) => void }) { export default function CreateUserCalender({ onClose }: { onClose: (val: any) => void }) {
const router = useRouter()
const param = useParams<{ id: string }>() const param = useParams<{ id: string }>()
const [selectedFiles, setSelectedFiles] = useState<any>([]) const [selectedFiles, setSelectedFiles] = useState<any>([])
const [isData, setData] = useState<IDataMemberDivision[]>([]) const [isData, setData] = useState<IDataMemberDivision[]>([])
@@ -34,11 +33,9 @@ export default function CreateUserCalender({ onClose }: { onClose: (val: any) =>
if (member.length > 0) { if (member.length > 0) {
setSelectedFiles(JSON.parse(JSON.stringify(member.get()))) setSelectedFiles(JSON.parse(JSON.stringify(member.get())))
} }
setLoading(false)
} else { } else {
toast.error(response.message) toast.error(response.message)
} }
} catch (error) { } catch (error) {
console.error(error) console.error(error)
toast.error("Gagal mendapatkan anggota, coba lagi nanti"); toast.error("Gagal mendapatkan anggota, coba lagi nanti");
@@ -103,6 +100,7 @@ export default function CreateUserCalender({ onClose }: { onClose: (val: any) =>
async function fetchGetMember(val: string) { async function fetchGetMember(val: string) {
setSearchQuery(val) setSearchQuery(val)
try { try {
setLoading(true)
const res = await funGetSearchMemberDivision('?search=' + val, param.id); const res = await funGetSearchMemberDivision('?search=' + val, param.id);
if (res.success) { if (res.success) {
setData(res.data) setData(res.data)
@@ -111,6 +109,8 @@ export default function CreateUserCalender({ onClose }: { onClose: (val: any) =>
} }
} catch (error) { } catch (error) {
console.error(error); console.error(error);
} finally {
setLoading(false)
} }
} }

29
src/module/calender/ui/create_user_detail_calender.tsx
View File

@@ -1,18 +1,19 @@
"use client" "use client"
import React, { useState } from 'react'; import { keyWibu, LayoutNavbarNew, SkeletonList, TEMA } from '@/module/_global';
import { useParams, useRouter } from 'next/navigation';
import { funGetSearchMemberDivision, IDataMemberDivision } from '@/module/division_new'; import { funGetSearchMemberDivision, IDataMemberDivision } from '@/module/division_new';
import toast from 'react-hot-toast'; import { useHookstate } from '@hookstate/core';
import { Carousel } from '@mantine/carousel';
import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Indicator, rem, Stack, Text, TextInput } from '@mantine/core';
import { useMediaQuery, useShallowEffect } from '@mantine/hooks'; import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import { LayoutNavbarNew, SkeletonList, SkeletonSingle, TEMA } from '@/module/_global'; import { useParams, useRouter } from 'next/navigation';
import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Group, Indicator, rem, Stack, Text, TextInput } from '@mantine/core'; import { useState } from 'react';
import toast from 'react-hot-toast';
import { FaCheck } from 'react-icons/fa6'; import { FaCheck } from 'react-icons/fa6';
import { HiMagnifyingGlass } from 'react-icons/hi2'; import { HiMagnifyingGlass } from 'react-icons/hi2';
import { IoArrowBackOutline, IoClose } from 'react-icons/io5'; import { IoArrowBackOutline, IoClose } from 'react-icons/io5';
import { Carousel } from '@mantine/carousel';
import { funAddMemberCalender, funGetOneCalender } from '../lib/api_calender'; import { funAddMemberCalender, funGetOneCalender } from '../lib/api_calender';
import { IDataDetailByIdCalender, IDataDetailByIdMember } from '../lib/type_calender'; import { IDataDetailByIdCalender, IDataDetailByIdMember } from '../lib/type_calender';
import { useHookstate } from '@hookstate/core'; import { useWibuRealtime } from 'wibu-realtime';
export default function CreateUserDetailCalender() { export default function CreateUserDetailCalender() {
const router = useRouter() const router = useRouter()
@@ -27,6 +28,11 @@ export default function CreateUserDetailCalender() {
const [searchQuery, setSearchQuery] = useState('') const [searchQuery, setSearchQuery] = useState('')
const tema = useHookstate(TEMA) const tema = useHookstate(TEMA)
const isMobile2 = useMediaQuery("(max-width: 438px)"); const isMobile2 = useMediaQuery("(max-width: 438px)");
const [loadingSubmit, setLoadingSubmit] = useState(false)
const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
async function getData() { async function getData() {
try { try {
@@ -88,9 +94,13 @@ export default function CreateUserDetailCalender() {
if (selectedFiles.length == 0) { if (selectedFiles.length == 0) {
return toast.error("Error! silahkan pilih anggota") return toast.error("Error! silahkan pilih anggota")
} }
setLoadingSubmit(true)
const res = await funAddMemberCalender(String(isDataCalender?.idCalendar), selectedFiles) const res = await funAddMemberCalender(String(isDataCalender?.idCalendar), selectedFiles)
if (res.success) { if (res.success) {
setDataRealtime([{
category: "calendar-detail",
id: isDataCalender?.idCalendar,
}])
toast.success(res.message) toast.success(res.message)
router.push('./') router.push('./')
} else { } else {
@@ -99,6 +109,8 @@ export default function CreateUserDetailCalender() {
} catch (error) { } catch (error) {
console.error(error); console.error(error);
toast.error("Gagal menambahkan anggota, coba lagi nanti"); toast.error("Gagal menambahkan anggota, coba lagi nanti");
} finally {
setLoadingSubmit(false)
} }
} }
@@ -290,6 +302,7 @@ export default function CreateUserDetailCalender() {
backgroundColor: `${tema.get().bgUtama}`, backgroundColor: `${tema.get().bgUtama}`,
}}> }}>
<Button <Button
loading={loadingSubmit}
c={"white"} c={"white"}
bg={tema.get().utama} bg={tema.get().utama}
size="lg" size="lg"

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

@@ -1,25 +1,26 @@
'use client' 'use client'
import { LayoutDrawer, LayoutNavbarNew, SkeletonList, SkeletonSingle, TEMA } from '@/module/_global'; import { keyWibu, LayoutDrawer, LayoutNavbarNew, SkeletonList, TEMA } from '@/module/_global';
import { ActionIcon, Avatar, Box, Center, CopyButton, Divider, Flex, Grid, Group, SimpleGrid, Skeleton, Spoiler, Stack, Text, Tooltip } from '@mantine/core'; import LayoutModal from '@/module/_global/layout/layout_modal';
import React, { useState } from 'react'; import { useHookstate } from '@hookstate/core';
import { BsCalendar2Event, BsCalendarDate } from 'react-icons/bs'; import { ActionIcon, Avatar, Box, Center, CopyButton, Divider, Flex, Grid, Group, SimpleGrid, Spoiler, Stack, Text, Tooltip } from '@mantine/core';
import { MdEventNote, MdOutlineFormatListBulleted } from "react-icons/md";
import { LuClock, LuCopy, LuLink } from "react-icons/lu";
import { FaCheck, FaUser } from 'react-icons/fa6';
import { TbCopy } from 'react-icons/tb';
import { HiMenu } from 'react-icons/hi';
import DrawerDetailEvent from './drawer_detail_event';
import { useParams, useRouter } from 'next/navigation';
import { funDeleteMemberCalender, funGetOneCalender } from '../lib/api_calender';
import { useMediaQuery, useShallowEffect } from '@mantine/hooks'; import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import moment from "moment"; import moment from "moment";
import "moment/locale/id"; import "moment/locale/id";
import { IDataDetailByIdCalender, IDataDetailByIdMember } from '../lib/type_calender'; import { useParams, useRouter } from 'next/navigation';
import SkeletonDetailEvent from './skeleton_detail_event'; import { useState } from 'react';
import { IoIosCloseCircle } from 'react-icons/io';
import LayoutModal from '@/module/_global/layout/layout_modal';
import toast from 'react-hot-toast'; import toast from 'react-hot-toast';
import { useHookstate } from '@hookstate/core'; import { BsCalendar2Event, BsCalendarDate } from 'react-icons/bs';
import { FaCheck, FaUser } from 'react-icons/fa6';
import { HiMenu } from 'react-icons/hi';
import { IoIosCloseCircle } from 'react-icons/io';
import { LuClock, LuLink } from "react-icons/lu";
import { MdOutlineFormatListBulleted } from "react-icons/md";
import { TbCopy } from 'react-icons/tb';
import { useWibuRealtime } from 'wibu-realtime';
import { funDeleteMemberCalender, funGetOneCalender } from '../lib/api_calender';
import { IDataDetailByIdCalender, IDataDetailByIdMember } from '../lib/type_calender';
import DrawerDetailEvent from './drawer_detail_event';
import SkeletonDetailEvent from './skeleton_detail_event';
export default function DetailEventDivision() { export default function DetailEventDivision() {
const param = useParams<{ id: string, detail: string }>() const param = useParams<{ id: string, detail: string }>()
@@ -35,16 +36,22 @@ export default function DetailEventDivision() {
const tema = useHookstate(TEMA) const tema = useHookstate(TEMA)
const isMobile2 = useMediaQuery("(max-width: 460px)"); const isMobile2 = useMediaQuery("(max-width: 460px)");
const isMobile = useMediaQuery('(max-width: 369px)'); const isMobile = useMediaQuery('(max-width: 369px)');
const [loadingDelete, setLoadingDelete] = useState(false)
const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
const [isUserLogin, setUserLogin] = useState('')
const getData = async () => { const getData = async (loading: boolean) => {
try { try {
setLoading(true) setLoading(loading)
const response = await funGetOneCalender(param.detail) const response = await funGetOneCalender(param.detail)
setUserLogin(response.user)
setDataCalender(response.data.calender) setDataCalender(response.data.calender)
setDataAnggota(response.data.member) setDataAnggota(response.data.member)
setLengthMember(response.data.total) setLengthMember(response.data.total)
setLoading(false)
} catch (error) { } catch (error) {
console.error(error) console.error(error)
} finally { } finally {
@@ -53,16 +60,34 @@ export default function DetailEventDivision() {
} }
useShallowEffect(() => { useShallowEffect(() => {
getData() getData(true)
}, []) }, [])
useShallowEffect(() => {
if (dataRealTime && dataRealTime.some((i: any) => i.category == 'calendar-detail' && i.id == isDataCalender?.idCalendar)) {
getData(false)
}
if (dataRealTime && dataRealTime.some((i: any) => i.category == 'calendar-detail-delete' && i.id == isDataCalender?.idCalendar && i.idUserFrom != isUserLogin)) {
toast.error("Data telah di hapus, anda akan beralih ke halaman list acara")
setTimeout(() => {
router.push(`/division/${param.id}/calender`)
}, 2000)
}
}, [dataRealTime])
async function onSubmit() { async function onSubmit() {
try { try {
setLoadingDelete(true)
const res = await funDeleteMemberCalender(String(isDataCalender?.idCalendar), { idUser: dataChoose.id }); const res = await funDeleteMemberCalender(String(isDataCalender?.idCalendar), { idUser: dataChoose.id });
if (res.success) { if (res.success) {
setDataRealtime([{
category: "calendar-detail",
id: isDataCalender?.idCalendar,
}])
toast.success(res.message) toast.success(res.message)
setDataChoose({ id: '', name: '' }) setDataChoose({ id: '', name: '' })
getData() getData(false)
setOpenDrawer(false) setOpenDrawer(false)
setOpenDrawerUser(false) setOpenDrawerUser(false)
} else { } else {
@@ -71,6 +96,9 @@ export default function DetailEventDivision() {
} catch (error) { } catch (error) {
console.error(error); console.error(error);
toast.error("Gagal mengeluarkan anggota, coba lagi nanti"); toast.error("Gagal mengeluarkan anggota, coba lagi nanti");
} finally {
setLoadingDelete(false)
setOpenModal(false)
} }
} }
@@ -432,16 +460,17 @@ export default function DetailEventDivision() {
</Box> </Box>
</LayoutDrawer> </LayoutDrawer>
<LayoutModal opened={isOpenModal} onClose={() => setOpenModal(false)} <LayoutModal loading={loadingDelete} opened={isOpenModal} onClose={() => setOpenModal(false)}
description="Apakah Anda yakin ingin mengeluarkan anggota?" description="Apakah Anda yakin ingin mengeluarkan anggota?"
onYes={(val) => { onYes={(val) => {
if (val) { if (val) {
onSubmit() onSubmit()
} else {
setOpenModal(false)
} }
setOpenModal(false)
}} /> }} />
<LayoutDrawer opened={openDrawer} title={'Menu'} onClose={() => setOpenDrawer(false)}> <LayoutDrawer opened={openDrawer} title={'Menu'} onClose={() => setOpenDrawer(false)}>
<DrawerDetailEvent idCalendar={String(isDataCalender?.idCalendar)} /> <DrawerDetailEvent idCalendar={String(isDataCalender?.idCalendar)} close={() => { setOpenDrawer(false) }} />
</LayoutDrawer> </LayoutDrawer>
</Box> </Box>
); );

32
src/module/calender/ui/drawer_detail_event.tsx
View File

@@ -1,5 +1,5 @@
"use client" "use client"
import { TEMA } from '@/module/_global'; import { keyWibu, TEMA } from '@/module/_global';
import LayoutModal from '@/module/_global/layout/layout_modal'; import LayoutModal from '@/module/_global/layout/layout_modal';
import { Box, Flex, SimpleGrid, Stack, Text } from '@mantine/core'; import { Box, Flex, SimpleGrid, Stack, Text } from '@mantine/core';
import { useParams, useRouter } from 'next/navigation'; import { useParams, useRouter } from 'next/navigation';
@@ -9,30 +9,50 @@ import { MdDelete, MdEdit } from 'react-icons/md';
import { funDeleteCalenderById } from '../lib/api_calender'; import { funDeleteCalenderById } from '../lib/api_calender';
import { FaUsers } from 'react-icons/fa6'; import { FaUsers } from 'react-icons/fa6';
import { useHookstate } from '@hookstate/core'; import { useHookstate } from '@hookstate/core';
import { useWibuRealtime } from 'wibu-realtime';
export default function DrawerDetailEvent({ idCalendar }: { idCalendar: string }) { export default function DrawerDetailEvent({ idCalendar, close }: { idCalendar: string, close: (val:boolean) => void }) {
const router = useRouter() const router = useRouter()
const [isModal, setModal] = useState(false) const [isModal, setModal] = useState(false)
const param = useParams<{ id: string, detail: string }>() const param = useParams<{ id: string, detail: string }>()
const tema = useHookstate(TEMA) const tema = useHookstate(TEMA)
const [loadingDelete, setLoadingDelete] = useState(false)
const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
async function fetchDeleteCalender(val: boolean) { async function fetchDeleteCalender(val: boolean) {
try { try {
if (val) { if (val) {
setLoadingDelete(true)
const response = await funDeleteCalenderById(idCalendar) const response = await funDeleteCalenderById(idCalendar)
if (response.success) { if (response.success) {
setDataRealtime([
{
category: "calendar-detail-delete",
id: idCalendar,
},
{
category: "calendar-event",
division: param.id,
date: response.data.dateStart,
idUserFrom: response.user
}
])
toast.success(response.message) toast.success(response.message)
setModal(false)
router.push(`/division/${param.id}/calender`) router.push(`/division/${param.id}/calender`)
} else { } else {
toast.error(response.message) toast.error(response.message)
} }
} }
setModal(false)
} catch (error) { } catch (error) {
console.error(error); console.error(error);
setModal(false)
toast.error("Gagal hapus acara, coba lagi nanti"); toast.error("Gagal hapus acara, coba lagi nanti");
} finally {
close(true)
setLoadingDelete(false)
setModal(false)
} }
} }
@@ -72,7 +92,7 @@ export default function DrawerDetailEvent({ idCalendar }: { idCalendar: string }
</Flex> </Flex>
</SimpleGrid> </SimpleGrid>
</Stack> </Stack>
<LayoutModal opened={isModal} onClose={() => setModal(false)} <LayoutModal loading={loadingDelete} opened={isModal} onClose={() => setModal(false)}
description="Apakah Anda yakin ingin menghapus data acara ini? Data ini akan mempengaruhi semua data yang terkait" description="Apakah Anda yakin ingin menghapus data acara ini? Data ini akan mempengaruhi semua data yang terkait"
onYes={(val) => { fetchDeleteCalender(val) }} /> onYes={(val) => { fetchDeleteCalender(val) }} />
</Box> </Box>

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

@@ -6,7 +6,7 @@ import { ActionIcon, Avatar, Badge, Box, Center, Divider, Flex, Grid, Group, rem
import { useMediaQuery, useShallowEffect } from "@mantine/hooks"; import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
import moment from "moment"; import moment from "moment";
import "moment/locale/id"; import "moment/locale/id";
import { useParams, useRouter } from "next/navigation"; import { useParams } from "next/navigation";
import { useState } from "react"; import { useState } from "react";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
import { GrChatOption } from "react-icons/gr"; import { GrChatOption } from "react-icons/gr";
@@ -23,7 +23,6 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
const [isComent, setIsComent] = useState("") const [isComent, setIsComent] = useState("")
const param = useParams<{ id: string, detail: string }>() const param = useParams<{ id: string, detail: string }>()
const [isLoad, setIsLoad] = useState(true) const [isLoad, setIsLoad] = useState(true)
const router = useRouter()
const refresh = useHookstate(globalRefreshDiscussion) const refresh = useHookstate(globalRefreshDiscussion)
const roleLogin = useHookstate(globalRole) const roleLogin = useHookstate(globalRole)
const [isCreator, setCreator] = useState(false) const [isCreator, setCreator] = useState(false)

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

@@ -23,13 +23,15 @@ export default function DrawerDetailDiscussion({ onSuccess, id, status, idDivisi
WIBU_REALTIME_TOKEN: keyWibu, WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm" project: "sdm"
}) })
const [loadingUpdate, setLoadingUpdate] = useState(false)
const [loadingDelete, setLoadingDelete] = useState(false)
async function fetchStatusDiscussion(val: boolean) { async function fetchStatusDiscussion(val: boolean) {
try { try {
setLoadingUpdate(true)
if (val) { if (val) {
const response = await funEditStatusDiscussion(id, { status: status }) const response = await funEditStatusDiscussion(id, { status: status })
if (response.success) { if (response.success) {
toast.success(response.message) toast.success(response.message)
refresh.set(!refresh.get()) refresh.set(!refresh.get())
@@ -38,40 +40,37 @@ export default function DrawerDetailDiscussion({ onSuccess, id, status, idDivisi
id: id, id: id,
}]) }])
onSuccess(false) onSuccess(false)
setValModalStatus(false)
} else { } else {
toast.error(response.message) toast.error(response.message)
} }
} }
setValModalStatus(false)
} catch (error) { } catch (error) {
console.error(error); console.error(error);
setValModalStatus(false)
toast.error("Gagal menambahkan diskusi, coba lagi nanti"); toast.error("Gagal menambahkan diskusi, coba lagi nanti");
} finally { } finally {
setLoadingUpdate(false)
setValModalStatus(false) setValModalStatus(false)
} }
} }
async function fetchDeleteDiscussion(val: boolean) { async function fetchDeleteDiscussion(val: boolean) {
try { try {
setLoadingDelete(true)
if (val) { if (val) {
const response = await funDeleteDiscussion(id) const response = await funDeleteDiscussion(id)
if (response.success) { if (response.success) {
toast.success(response.message) toast.success(response.message)
setValModal(false)
onSuccess(false) onSuccess(false)
router.push(`/division/${param.id}/discussion`) router.push(`/division/${param.id}/discussion`)
} else { } else {
toast.error(response.message) toast.error(response.message)
} }
} }
setValModal(false)
} catch (error) { } catch (error) {
console.error(error); console.error(error);
setValModal(false)
toast.error("Gagal hapus diskusi, coba lagi nanti"); toast.error("Gagal hapus diskusi, coba lagi nanti");
} finally { } finally {
setLoadingDelete(false)
setValModal(false) setValModal(false)
} }
} }
@@ -130,12 +129,12 @@ export default function DrawerDetailDiscussion({ onSuccess, id, status, idDivisi
</SimpleGrid> </SimpleGrid>
</Stack> </Stack>
<LayoutModal opened={isValModal} onClose={() => setValModal(false)} <LayoutModal loading={loadingDelete} opened={isValModal} onClose={() => setValModal(false)}
description="Apakah Anda yakin ingin menghapus diskusi ini?" description="Apakah Anda yakin ingin menghapus diskusi ini?"
onYes={(val) => { fetchDeleteDiscussion(val) }} /> onYes={(val) => { fetchDeleteDiscussion(val) }} />
<LayoutModal opened={isValModalStatus} onClose={() => setValModalStatus(false)} <LayoutModal loading={loadingUpdate} opened={isValModalStatus} onClose={() => setValModalStatus(false)}
description="Apakah Anda yakin ingin mengubah status diskusi ini?" description="Apakah Anda yakin ingin mengubah status diskusi ini?"
onYes={(val) => { fetchStatusDiscussion(val) }} /> onYes={(val) => { fetchStatusDiscussion(val) }} />
</Box> </Box>

27
src/module/discussion/ui/form_create_discussion.tsx
View File

@@ -15,7 +15,6 @@ export default function FormCreateDiscussion({ id }: { id: string }) {
const [isValModal, setValModal] = useState(false) const [isValModal, setValModal] = useState(false)
const [loadingModal, setLoadingModal] = useState(false) const [loadingModal, setLoadingModal] = useState(false)
const router = useRouter() const router = useRouter()
const [isImg, setImg] = useState("")
const param = useParams<{ id: string, detail: string }>() const param = useParams<{ id: string, detail: string }>()
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true)
const [img, setIMG] = useState<any | null>() const [img, setIMG] = useState<any | null>()
@@ -51,25 +50,27 @@ export default function FormCreateDiscussion({ id }: { id: string }) {
async function createDiscussion(val: boolean) { async function createDiscussion(val: boolean) {
try { try {
setLoadingModal(true) if (val) {
const response = await funCreateDiscussion({ setLoadingModal(true)
desc: isData.desc, const response = await funCreateDiscussion({
idDivision: id desc: isData.desc,
}) idDivision: id
})
if (response.success) { if (response.success) {
setDataRealtime(response.notif) setDataRealtime(response.notif)
toast.success(response.message) toast.success(response.message)
router.push(`/division/${param.id}/discussion/`) router.push(`/division/${param.id}/discussion/`)
} else { } else {
toast.error(response.message) toast.error(response.message)
}
} }
} catch (error) { } catch (error) {
console.error(error); console.error(error);
toast.error("Gagal menambahkan diskusi, coba lagi nanti"); toast.error("Gagal menambahkan diskusi, coba lagi nanti");
} finally { } finally {
setValModal(false)
setLoadingModal(false) setLoadingModal(false)
setValModal(false)
} }
} }

48
src/module/discussion/ui/list_discussion.tsx
View File

@@ -1,16 +1,17 @@
'use client' 'use client'
import { currentScroll, TEMA } from "@/module/_global"; import { currentScroll, globalNotifPage, ReloadButtonTop, TEMA } from "@/module/_global";
import { useHookstate } from "@hookstate/core";
import { Avatar, Badge, Box, Divider, Flex, Grid, Group, Skeleton, Spoiler, Text, TextInput } from "@mantine/core"; import { Avatar, Badge, Box, Divider, Flex, Grid, Group, Skeleton, Spoiler, Text, TextInput } from "@mantine/core";
import { useParams, useRouter, useSearchParams } from "next/navigation"; import { useShallowEffect } from "@mantine/hooks";
import _ from "lodash";
import { useParams, useRouter } from "next/navigation";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import toast from "react-hot-toast";
import { GrChatOption } from "react-icons/gr"; import { GrChatOption } from "react-icons/gr";
import { HiMagnifyingGlass } from "react-icons/hi2"; import { HiMagnifyingGlass } from "react-icons/hi2";
import { funGetAllDiscussion } from "../lib/api_discussion"; import { funGetAllDiscussion } from "../lib/api_discussion";
import { useShallowEffect } from "@mantine/hooks";
import { IDataDiscussion } from "../lib/type_discussion"; import { IDataDiscussion } from "../lib/type_discussion";
import toast from "react-hot-toast";
import _ from "lodash";
import { useHookstate } from "@hookstate/core";
export default function ListDiscussion({ id }: { id: string }) { export default function ListDiscussion({ id }: { id: string }) {
const [isData, setData] = useState<IDataDiscussion[]>([]) const [isData, setData] = useState<IDataDiscussion[]>([])
@@ -21,11 +22,12 @@ export default function ListDiscussion({ id }: { id: string }) {
const router = useRouter() const router = useRouter()
const { value: containerRef } = useHookstate(currentScroll); const { value: containerRef } = useHookstate(currentScroll);
const [isPage, setPage] = useState(1) const [isPage, setPage] = useState(1)
const notifLoadPage = useHookstate(globalNotifPage)
const [isRefresh, setRefresh] = useState(false)
const getData = async (loading: boolean) => { const getData = async (loading: boolean) => {
try { try {
if (loading) setLoading(loading)
setLoading(true)
const response = await funGetAllDiscussion('?division=' + id + '&search=' + searchQuery + '&page=' + isPage) const response = await funGetAllDiscussion('?division=' + id + '&search=' + searchQuery + '&page=' + isPage)
if (response.success) { if (response.success) {
if (isPage == 1) { if (isPage == 1) {
@@ -36,7 +38,6 @@ export default function ListDiscussion({ id }: { id: string }) {
} else { } else {
toast.error(response.message) toast.error(response.message)
} }
setLoading(false)
} catch (error) { } catch (error) {
console.error(error) console.error(error)
} finally { } finally {
@@ -75,8 +76,37 @@ export default function ListDiscussion({ id }: { id: string }) {
}, [containerRef, isPage]); }, [containerRef, isPage]);
useShallowEffect(() => {
console.log(notifLoadPage.get())
if (notifLoadPage.get().category == 'division/' + param.id + '/discussion' && notifLoadPage.get().load == true) {
setRefresh(true)
}
}, [notifLoadPage.get().load])
function onRefresh() {
notifLoadPage.set({
category: '',
load: false
})
setRefresh(false)
setPage(1)
setTimeout(() => {
getData(false)
}, 500)
}
return ( return (
<Box p={20}> <Box p={20}>
{
isRefresh &&
<ReloadButtonTop
onReload={() => { onRefresh() }}
title='UPDATE'
/>
}
<TextInput <TextInput
styles={{ styles={{
input: { input: {

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

@@ -28,7 +28,8 @@ export default function CreateAnggotaDivision() {
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true)
const [onClickSearch, setOnClickSearch] = useState(false) const [onClickSearch, setOnClickSearch] = useState(false)
const tema = useHookstate(TEMA) const tema = useHookstate(TEMA)
const isMobile2 = useMediaQuery("(max-width: 438px)"); const isMobile2 = useMediaQuery("(max-width: 438px)")
const [loadingModal, setLoadingModal] = useState(false)
const handleFileClick = (index: number) => { const handleFileClick = (index: number) => {
if (selectedFiles.some((i: any) => i.idUser == dataMember[index].id)) { if (selectedFiles.some((i: any) => i.idUser == dataMember[index].id)) {
@@ -44,16 +45,25 @@ export default function CreateAnggotaDivision() {
async function loadMember(group: string, search: string) { async function loadMember(group: string, search: string) {
setLoading(true) try {
const res = await funGetAllmember('?active=true&group=' + group + '&search=' + search); setLoading(true)
const user = await funGetUserByCookies(); const res = await funGetAllmember('?active=true&group=' + group + '&search=' + search);
const user = await funGetUserByCookies();
if (res.success) { if (res.success) {
setDataMember(res.data.filter((i: any) => i.id != user.id)) const dariUserLogin = res.data.filter((i: any) => i.id != user.id)
} else { const fixListUser = dariUserLogin.filter((i: any) => i.idUserRole == 'coadmin' || i.idUserRole == 'user')
toast.error(res.message) setDataMember(fixListUser)
} else {
toast.error(res.message)
}
} catch (error) {
console.error(error)
toast.error("Gagal memuat data, coba lagi nanti")
} finally {
setLoading(false)
} }
setLoading(false)
} }
async function loadFirst() { async function loadFirst() {
@@ -69,6 +79,7 @@ export default function CreateAnggotaDivision() {
async function addMember() { async function addMember() {
try { try {
setLoadingModal(true)
const res = await funAddDivisionMember(param.id, selectedFiles) const res = await funAddDivisionMember(param.id, selectedFiles)
if (res.success) { if (res.success) {
toast.success(res.message) toast.success(res.message)
@@ -76,15 +87,22 @@ export default function CreateAnggotaDivision() {
} else { } else {
toast.error(res.message) toast.error(res.message)
} }
setOpen(false)
} catch (error) { } catch (error) {
setOpen(false)
console.error(error); console.error(error);
toast.error("Gagal menambahkan anggota divisi, coba lagi nanti"); toast.error("Gagal menambahkan anggota divisi, coba lagi nanti");
} finally {
setLoadingModal(false)
setOpen(false)
} }
} }
function onCheck() {
if (selectedFiles.length == 0) {
return toast.error("Error! silahkan pilih anggota")
}
setOpen(true)
}
useShallowEffect(() => { useShallowEffect(() => {
loadFirst() loadFirst()
@@ -149,7 +167,7 @@ export default function CreateAnggotaDivision() {
borderBottom: `1px solid ${"#E0DFDF"}` borderBottom: `1px solid ${"#E0DFDF"}`
}}> }}>
{selectedFiles.length > 0 ? ( {selectedFiles.length > 0 ? (
<Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withControls={false}> <Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withControls={false}>
{selectedFiles.map((v: any, i: any) => { {selectedFiles.map((v: any, i: any) => {
return ( return (
<Carousel.Slide key={i}> <Carousel.Slide key={i}>
@@ -195,51 +213,51 @@ export default function CreateAnggotaDivision() {
<Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada anggota</Text> <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada anggota</Text>
</Stack> </Stack>
: :
<Box pt={90} mb={100}> <Box pt={90} mb={100}>
{dataMember.map((v: any, index: any) => { {dataMember.map((v: any, index: any) => {
const isSelected = selectedFiles.some((i: any) => i.idUser == dataMember[index].id) const isSelected = selectedFiles.some((i: any) => i.idUser == dataMember[index].id)
const found = memberDb.some((i: any) => i.idUser == v.id) const found = memberDb.some((i: any) => i.idUser == v.id)
return ( return (
<Box my={10} key={index} onClick={() => (!found) ? handleFileClick(index) : null}> <Box my={10} key={index} onClick={() => (!found) ? handleFileClick(index) : null}>
<Grid align='center' > <Grid align='center' >
<Grid.Col <Grid.Col
span={{ span={{
base: 1, base: 1,
xs: 1, xs: 1,
sm: 1, sm: 1,
md: 1, md: 1,
lg: 1, lg: 1,
xl: 1, xl: 1,
}} }}
> >
<Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size="lg" /> <Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size="lg" />
</Grid.Col> </Grid.Col>
<Grid.Col <Grid.Col
span={{ span={{
base: 11, base: 11,
xs: 11, xs: 11,
sm: 11, sm: 11,
md: 11, md: 11,
lg: 11, lg: 11,
xl: 11, xl: 11,
}} }}
> >
<Flex justify='space-between' align={"center"}> <Flex justify='space-between' align={"center"}>
<Flex direction={'column'} align="flex-start" justify="flex-start"> <Flex direction={'column'} align="flex-start" justify="flex-start">
<Text pl={isMobile2 ? 40 : 30} lineClamp={1}>{v.name}</Text> <Text pl={isMobile2 ? 40 : 30} lineClamp={1}>{v.name}</Text>
<Text pl={isMobile2 ? 40 : 30} c={"dimmed"} lineClamp={1}>{(found) ? "sudah menjadi anggota divisi" : ""}</Text> <Text pl={isMobile2 ? 40 : 30} c={"dimmed"} lineClamp={1}>{(found) ? "sudah menjadi anggota divisi" : ""}</Text>
</Flex>
{isSelected ? <FaCheck /> : null}
</Flex> </Flex>
{isSelected ? <FaCheck /> : null} </Grid.Col>
</Flex> </Grid>
</Grid.Col> <Box mt={10}>
</Grid> <Divider size={"xs"} />
<Box mt={10}> </Box>
<Divider size={"xs"} />
</Box> </Box>
</Box> )
) })}
})} </Box>
</Box>
} }
</Box> </Box>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{ <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
@@ -253,12 +271,12 @@ export default function CreateAnggotaDivision() {
size="lg" size="lg"
radius={30} radius={30}
fullWidth fullWidth
onClick={() => { setOpen(true) }} onClick={() => { onCheck() }}
> >
Simpan Simpan
</Button> </Button>
</Box> </Box>
<LayoutModal opened={isOpen} onClose={() => setOpen(false)} <LayoutModal loading={loadingModal} opened={isOpen} onClose={() => setOpen(false)}
description="Apakah Anda yakin ingin menambahkan anggota divisi?" description="Apakah Anda yakin ingin menambahkan anggota divisi?"
onYes={(val) => { onYes={(val) => {
if (val) { if (val) {

73
src/module/division_new/ui/create_report.tsx
View File

@@ -1,19 +1,18 @@
"use client"; "use client";
import { LayoutNavbarNew, TEMA } from "@/module/_global"; import { globalRole, LayoutNavbarNew, TEMA } from "@/module/_global";
import { Box, Select, Skeleton, Stack, Text } from "@mantine/core";
import { DateInput } from "@mantine/dates";
import React, { useState } from "react";
import EchartPaiReport from "./echart_pai_report";
import EchartBarReport from "./echart_bar_report";
import EventReport from "./event_report";
import DiscussionReport from "./discussion_report";
import { funGetAllGroup, IDataGroup } from "@/module/group"; import { funGetAllGroup, IDataGroup } from "@/module/group";
import toast from "react-hot-toast";
import { useShallowEffect } from "@mantine/hooks";
import { funGetReportDivision } from "../lib/api_division";
import { useParams } from "next/navigation";
import moment from "moment";
import { useHookstate } from "@hookstate/core"; import { useHookstate } from "@hookstate/core";
import { Box, Select, Skeleton, Stack } from "@mantine/core";
import { DateInput } from "@mantine/dates";
import { useShallowEffect } from "@mantine/hooks";
import moment from "moment";
import { useParams } from "next/navigation";
import { useState } from "react";
import toast from "react-hot-toast";
import { funGetReportDivision } from "../lib/api_division";
import EchartBarReport from "./echart_bar_report";
import EchartPaiReport from "./echart_pai_report";
import EventReport from "./event_report";
export default function CreateReport() { export default function CreateReport() {
const [value, setValue] = useState<Date | null>(null); const [value, setValue] = useState<Date | null>(null);
@@ -23,6 +22,7 @@ export default function CreateReport() {
const [isGroup, setIsGroup] = useState(""); const [isGroup, setIsGroup] = useState("");
const param = useParams<{ id: string }>() const param = useParams<{ id: string }>()
const tema = useHookstate(TEMA) const tema = useHookstate(TEMA)
const roleLogin = useHookstate(globalRole)
const [report, setReport] = useState({ const [report, setReport] = useState({
progress: [], progress: [],
dokumen: [], dokumen: [],
@@ -74,13 +74,20 @@ export default function CreateReport() {
} }
function onChangeDate(val: any) { function onChangeDate(val: any) {
if (val != null && val != "" && isGroup != "" && isGroup != "null") {
onReport(isGroup, val)
}
if (isGroup == null || isGroup == "") { if (roleLogin.get() == "supadmin") {
setTampil(false) if (val != null && val != "" && isGroup != "" && isGroup != "null") {
toast.error("Error! harus memilih grup") onReport(isGroup, val)
}
if (isGroup == null || isGroup == "") {
setTampil(false)
toast.error("Error! harus memilih grup")
}
} else {
if (val != null && val != "") {
onReport(isGroup, val)
}
} }
setValue(val) setValue(val)
@@ -95,19 +102,23 @@ export default function CreateReport() {
<LayoutNavbarNew back="/division" title="Laporan Divisi" menu /> <LayoutNavbarNew back="/division" title="Laporan Divisi" menu />
<Box p={20}> <Box p={20}>
<Stack> <Stack>
<Select {roleLogin.get() == "supadmin" &&
placeholder="Grup" <Select
label="Grup" placeholder="Grup"
size="md" label="Grup"
required size="md"
radius={10} required
data={dataGroup?.map((pro: any) => ({ radius={10}
value: String(pro.id), data={dataGroup?.map((pro: any) => ({
label: pro.name value: String(pro.id),
}))} label: pro.name
onChange={(val) => { onChooseGroup(val) }} }))}
/> onChange={(val) => { onChooseGroup(val) }}
/>
}
<DateInput <DateInput
valueFormat="DD-MM-YYYY"
value={value} value={value}
onChange={(val) => { onChangeDate(val) }} onChange={(val) => { onChangeDate(val) }}
radius={10} radius={10}

3
src/module/division_new/ui/drawer_detail_division.tsx
View File

@@ -1,10 +1,9 @@
"use client" "use client"
import { TEMA } from "@/module/_global"; import { TEMA } from "@/module/_global";
import { useHookstate } from "@hookstate/core"; import { useHookstate } from "@hookstate/core";
import { Box, Stack, SimpleGrid, Flex, Text } from "@mantine/core"; import { Box, Flex, SimpleGrid, Stack, Text } from "@mantine/core";
import { useParams, useRouter } from "next/navigation"; import { useParams, useRouter } from "next/navigation";
import { BsInfoCircle } from "react-icons/bs"; import { BsInfoCircle } from "react-icons/bs";
import { FaPencil } from "react-icons/fa6";
import { TbReportAnalytics } from "react-icons/tb"; import { TbReportAnalytics } from "react-icons/tb";
export default function DrawerDetailDivision() { export default function DrawerDetailDivision() {

11
src/module/division_new/ui/echart_pai_report.tsx
View File

@@ -1,11 +1,10 @@
import React, { useState } from 'react';
import { EChartsOption, color } from "echarts";
import EChartsReact from "echarts-for-react";
import { useShallowEffect } from '@mantine/hooks';
import * as echarts from 'echarts';
import { Box } from '@mantine/core';
import { TEMA } from '@/module/_global'; import { TEMA } from '@/module/_global';
import { useHookstate } from '@hookstate/core'; import { useHookstate } from '@hookstate/core';
import { Box } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { EChartsOption } from "echarts";
import EChartsReact from "echarts-for-react";
import { useState } from 'react';
export default function EchartPaiReport({ data }: { data: any }) { export default function EchartPaiReport({ data }: { data: any }) {
const [options, setOptions] = useState<EChartsOption>({}); const [options, setOptions] = useState<EChartsOption>({});

3
src/module/division_new/ui/edit_division.tsx
View File

@@ -70,8 +70,6 @@ export default function EditDivision() {
} else { } else {
toast.error(res.message); toast.error(res.message);
} }
setLoading(false);
} catch (error) { } catch (error) {
console.error(error); console.error(error);
toast.error("Gagal mendapatkan divisi, coba lagi nanti"); toast.error("Gagal mendapatkan divisi, coba lagi nanti");
@@ -87,6 +85,7 @@ export default function EditDivision() {
const res = await funEditDivision(param.id, body) const res = await funEditDivision(param.id, body)
if (res.success) { if (res.success) {
toast.success(res.message) toast.success(res.message)
router.push("/division/info/" + param.id)
} else { } else {
toast.error(res.message) toast.error(res.message)
} }

7
src/module/division_new/ui/event_report.tsx
View File

@@ -1,8 +1,7 @@
import { Box, Divider, Group, ScrollArea, Stack, Text } from '@mantine/core'; import { Box, Divider, Group, Text } from '@mantine/core';
import React from 'react';
import { IDataReportDivision } from '../lib/type_division';
import _ from 'lodash'; import _ from 'lodash';
import { useRouter } from 'next/navigation'; import { useRouter } from 'next/navigation';
import { IDataReportDivision } from '../lib/type_division';
export default function EventReport({ data, tgl }: { data: IDataReportDivision[], tgl: string }) { export default function EventReport({ data, tgl }: { data: IDataReportDivision[], tgl: string }) {
const router = useRouter() const router = useRouter()
@@ -14,7 +13,7 @@ export default function EventReport({ data, tgl }: { data: IDataReportDivision[]
_.isEmpty(data) _.isEmpty(data)
? ?
<Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '20vh' }}> <Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '20vh' }}>
<Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada event</Text> <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada acara</Text>
</Box> </Box>
: :
data.map((event, index) => { data.map((event, index) => {

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

@@ -37,10 +37,11 @@ export default function InformationDivision() {
const isMobile2 = useMediaQuery("(max-width: 438px)"); const isMobile2 = useMediaQuery("(max-width: 438px)");
const tema = useHookstate(TEMA) const tema = useHookstate(TEMA)
const [loadingStatus, setLoadingStatus] = useState(false) const [loadingStatus, setLoadingStatus] = useState(false)
const [loadingDelete, setLoadingDelete] = useState(false)
async function getOneData() { async function getOneData(loading: boolean) {
try { try {
setLoading(true); setLoading(loading)
const res = await funGetDivisionById(param.id); const res = await funGetDivisionById(param.id);
const login = await funGetUserByCookies() const login = await funGetUserByCookies()
if (res.success) { if (res.success) {
@@ -53,18 +54,17 @@ export default function InformationDivision() {
} else { } else {
toast.error(res.message); toast.error(res.message);
} }
setLoading(false);
} catch (error) { } catch (error) {
console.error(error); console.error(error);
toast.error("Gagal mendapatkan divisi, coba lagi nanti"); toast.error("Gagal mendapatkan divisi, coba lagi nanti");
} finally { } finally {
setLoading(false); setLoading(false)
} }
} }
useShallowEffect(() => { useShallowEffect(() => {
getOneData(); getOneData(true);
}, [param.id]) }, [param.id])
@@ -77,19 +77,21 @@ export default function InformationDivision() {
async function deleteMember() { async function deleteMember() {
try { try {
setLoadingDelete(true)
const res = await funDeleteMemberDivision(param.id, { id: valChooseMember }) const res = await funDeleteMemberDivision(param.id, { id: valChooseMember })
if (res.success) { if (res.success) {
toast.success(res.message) toast.success(res.message)
setDrawer(false) setDrawer(false)
getOneData() getOneData(false)
} else { } else {
toast.error(res.message) toast.error(res.message)
} }
setOpenModal(false)
} catch (error) { } catch (error) {
console.error(error); console.error(error);
setOpenModal(false)
toast.error("Gagal mendapatkan divisi, coba lagi nanti"); toast.error("Gagal mendapatkan divisi, coba lagi nanti");
} finally {
setLoadingDelete(false)
setOpenModal(false)
} }
} }
@@ -99,7 +101,7 @@ export default function InformationDivision() {
const res = await funEditStatusAdminDivision(param.id, { id: valChooseMember, isAdmin: valChooseMemberStatus }) const res = await funEditStatusAdminDivision(param.id, { id: valChooseMember, isAdmin: valChooseMemberStatus })
if (res.success) { if (res.success) {
toast.success(res.message) toast.success(res.message)
getOneData() getOneData(false)
} else { } else {
toast.error(res.message) toast.error(res.message)
} }
@@ -116,7 +118,7 @@ export default function InformationDivision() {
const res = await funUpdateStatusDivision(param.id, { isActive: valActive }) const res = await funUpdateStatusDivision(param.id, { isActive: valActive })
if (res.success) { if (res.success) {
toast.success(res.message) toast.success(res.message)
getOneData() getOneData(false)
} else { } else {
toast.error(res.message) toast.error(res.message)
} }
@@ -276,7 +278,7 @@ export default function InformationDivision() {
</Box> </Box>
</LayoutDrawer> </LayoutDrawer>
<LayoutModal opened={isOpenModal} onClose={() => setOpenModal(false)} <LayoutModal loading={loadingDelete} opened={isOpenModal} onClose={() => setOpenModal(false)}
description="Apakah Anda yakin ingin mengeluarkan anggota?" description="Apakah Anda yakin ingin mengeluarkan anggota?"
onYes={(val) => { onYes={(val) => {
if (!val) { if (!val) {

199
src/module/division_new/ui/list_discussion.tsx
View File

@@ -1,15 +1,15 @@
"use client" "use client"
import { TEMA } from "@/module/_global"; import { TEMA } from "@/module/_global";
import { useHookstate } from "@hookstate/core";
import { Box, Grid, Group, Skeleton, Stack, Text } from "@mantine/core"; import { Box, Grid, Group, Skeleton, Stack, Text } from "@mantine/core";
import { useMediaQuery, useShallowEffect } from "@mantine/hooks"; import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
import { useParams, useRouter } from "next/navigation"; import { useParams, useRouter } from "next/navigation";
import { useState } from "react"; import { useState } from "react";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
import { CiUser, CiClock2 } from "react-icons/ci"; import { CiClock2, CiUser } from "react-icons/ci";
import { GoDiscussionClosed } from "react-icons/go"; import { GoDiscussionClosed } from "react-icons/go";
import { funGetDetailDivisionById } from "../lib/api_division"; import { funGetDetailDivisionById } from "../lib/api_division";
import { IDataDiscussionOnDetailDivision } from "../lib/type_division"; import { IDataDiscussionOnDetailDivision } from "../lib/type_division";
import { useHookstate } from "@hookstate/core";
export default function ListDiscussionOnDetailDivision() { export default function ListDiscussionOnDetailDivision() {
@@ -30,7 +30,6 @@ export default function ListDiscussionOnDetailDivision() {
} else { } else {
toast.error(res.message); toast.error(res.message);
} }
setLoading(false);
} catch (error) { } catch (error) {
console.error(error); console.error(error);
toast.error("Gagal mendapatkan divisi, coba lagi nanti"); toast.error("Gagal mendapatkan divisi, coba lagi nanti");
@@ -49,106 +48,108 @@ export default function ListDiscussionOnDetailDivision() {
<Text c={tema.get().utama} mb={10} fw={"bold"} fz={16}> <Text c={tema.get().utama} mb={10} fw={"bold"} fz={16}>
Diskusi Terbaru Diskusi Terbaru
</Text> </Text>
<Box {
bg={"white"} !loading && data.length === 0 ?
style={{ <Stack align="stretch" justify="center" w={"100%"}>
borderRadius: 10, <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada diskusi</Text>
border: `1px solid ${"#D6D8F6"}`, </Stack>
padding: 10, :
}} <Box
> bg={"white"}
style={{
borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`,
padding: 10,
}}
>
{ {
loading ? loading ?
Array(2) Array(2)
.fill(null) .fill(null)
.map((_, i) => ( .map((_, i) => (
<Stack align="stretch" justify="center" key={i} pb={10}> <Stack align="stretch" justify="center" key={i} pb={10}>
<Skeleton height={80} radius="md" m={0} /> <Skeleton height={80} radius="md" m={0} />
<Group justify="space-between"> <Group justify="space-between">
<Skeleton height={10} radius="md" m={0} w={100} /> <Skeleton height={10} radius="md" m={0} w={100} />
<Skeleton height={10} radius="md" m={0} w={100} /> <Skeleton height={10} radius="md" m={0} w={100} />
</Group> </Group>
</Stack> </Stack>
)) ))
: : <></>
(data.length === 0) ? }
<Stack align="stretch" justify="center" w={"100%"}> {data.map((v, i) => {
<Text c="dimmed" ta={"center"} fs={"italic"}>Belum ada diskusi</Text> return (
</Stack> <Box key={i} p={10}>
: <></> <Box style={{
} borderRadius: 10,
{data.map((v, i) => { border: `1px solid ${"#D6D8F6"}`,
return ( padding: 10,
<Box key={i} p={10}> }}
<Box style={{ onClick={() => router.push(`${param.id}/discussion/${v.id}`)}
borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`,
padding: 10,
}}
onClick={() => router.push(`${param.id}/discussion/${v.id}`)}
>
<Grid align='center'>
<Grid.Col
span={{
base: 1,
xs: 1,
sm: 1,
md: 1,
lg: 1,
xl: 1,
}}
> >
<GoDiscussionClosed size={25} /> <Grid align='center'>
</Grid.Col> <Grid.Col
<Grid.Col span={{
span={{ base: 1,
base: 11, xs: 1,
xs: 11, sm: 1,
sm: 11, md: 1,
md: 11, lg: 1,
lg: 11, xl: 1,
xl: 11, }}
}} >
> <GoDiscussionClosed size={25} />
<Text fw={"bold"} truncate="end" pl={isMobile2 ? 10 : 0} fz={isMobile ? 14 : 16}> </Grid.Col>
{v.desc} <Grid.Col
</Text> span={{
</Grid.Col> base: 11,
</Grid> xs: 11,
<Grid align="center" mt={20}> sm: 11,
<Grid.Col span={{ md: 11,
base: 7, lg: 11,
xl: 9 xl: 11,
}}> }}
<Group gap={5} align="center"> >
<CiUser size={18} /> <Text fw={"bold"} truncate="end" pl={isMobile2 ? 10 : 0} fz={isMobile ? 14 : 16}>
<Box w={{ {v.desc}
base: isMobile ? 110 : 125,
xl: 300
}}>
<Text fz={13} lineClamp={1}>
{v.user}
</Text> </Text>
</Box> </Grid.Col>
</Group> </Grid>
</Grid.Col> <Grid align="center" mt={20}>
<Grid.Col span={{ <Grid.Col span={{
base: 5, base: 7,
xl: 3 xl: 9
}}> }}>
<Group gap={5} align="center" justify="flex-end"> <Group gap={5} align="center">
<CiClock2 size={18} /> <CiUser size={18} />
<Text fz={isMobile ? 11 : 13}>{v.date}</Text> <Box w={{
</Group> base: isMobile ? 110 : 125,
</Grid.Col> xl: 300
</Grid> }}>
</Box> <Text fz={13} lineClamp={1}>
</Box> {v.user}
</Text>
</Box>
</Group>
</Grid.Col>
<Grid.Col span={{
base: 5,
xl: 3
}}>
<Group gap={5} align="center" justify="flex-end">
<CiClock2 size={18} />
<Text fz={isMobile ? 11 : 13}>{v.date}</Text>
</Group>
</Grid.Col>
</Grid>
</Box>
</Box>
); );
})} })}
</Box> </Box>
}
</Box> </Box>
</> </>
); );

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

@@ -1,5 +1,5 @@
'use client' 'use client'
import { currentScroll, globalNotifPage, globalRole, LayoutDrawer, LayoutNavbarNew, ReloadButtonTop, SkeletonList, TEMA } from '@/module/_global'; import { currentScroll, globalNotifPage, globalRole, ReloadButtonTop, SkeletonList, TEMA } from '@/module/_global';
import { useHookstate } from '@hookstate/core'; import { useHookstate } from '@hookstate/core';
import { ActionIcon, Avatar, Box, Card, Center, Divider, Flex, Grid, Group, Skeleton, Text, TextInput, Title } from '@mantine/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 { useMediaQuery, useShallowEffect } from '@mantine/hooks';
@@ -7,12 +7,10 @@ import _ from 'lodash';
import { useRouter, useSearchParams } from 'next/navigation'; import { useRouter, useSearchParams } from 'next/navigation';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import toast from 'react-hot-toast'; import toast from 'react-hot-toast';
import { HiMenu } from 'react-icons/hi';
import { HiMagnifyingGlass, HiMiniUserGroup, HiOutlineListBullet, HiSquares2X2 } from 'react-icons/hi2'; import { HiMagnifyingGlass, HiMiniUserGroup, HiOutlineListBullet, HiSquares2X2 } from 'react-icons/hi2';
import { MdAccountCircle } from 'react-icons/md'; import { MdAccountCircle } from 'react-icons/md';
import { funGetAllDivision } from '../lib/api_division'; import { funGetAllDivision } from '../lib/api_division';
import { IDataDivison } from '../lib/type_division'; import { IDataDivison } from '../lib/type_division';
import DrawerDivision from './drawer_division';
export default function ListDivision() { export default function ListDivision() {
const [isList, setIsList] = useState(false) const [isList, setIsList] = useState(false)
@@ -243,36 +241,42 @@ export default function ListDivision() {
</Box> </Box>
)) ))
: :
data?.map((v: any, i: any) => { _.isEmpty(data)
return ( ?
<Box key={i} mb={20}> <Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh' }}>
<Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`/division/${v.id}`)}> <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada Divisi</Text>
<Card.Section> </Box>
<Box h={120} bg={tema.get().utama}> :
<Flex justify={'center'} align={'center'} h={"100%"} pl={20} pr={20}> data?.map((v: any, i: any) => {
<Title order={3} c={"white"} ta={"center"} lineClamp={2}>{v.name}</Title> return (
</Flex> <Box key={i} mb={20}>
<Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`/division/${v.id}`)}>
<Card.Section>
<Box h={120} bg={tema.get().utama}>
<Flex justify={'center'} align={'center'} h={"100%"} pl={20} pr={20}>
<Title order={3} c={"white"} ta={"center"} lineClamp={2}>{v.name}</Title>
</Flex>
</Box>
</Card.Section>
<Box pt={10}>
<Text lineClamp={2}>{v.desc}</Text>
<Group align='center' pt={10} justify='flex-end'>
<Avatar.Group>
<Avatar>
<MdAccountCircle size={32} color={tema.get().utama} />
</Avatar>
<Avatar>
{
(v.jumlah_member == 0) ? "0" : "+" + (v.jumlah_member - 1)
}
</Avatar>
</Avatar.Group>
</Group>
</Box> </Box>
</Card.Section> </Card>
<Box pt={10}> </Box>
<Text lineClamp={2}>{v.desc}</Text> );
<Group align='center' pt={10} justify='flex-end'> })
<Avatar.Group>
<Avatar>
<MdAccountCircle size={32} color={tema.get().utama} />
</Avatar>
<Avatar>
{
(v.jumlah_member == 0) ? "0" : "+" + (v.jumlah_member - 1)
}
</Avatar>
</Avatar.Group>
</Group>
</Box>
</Card>
</Box>
);
})
} }
</Box> </Box>
)} )}

13
src/module/division_new/ui/list_document.tsx
View File

@@ -1,15 +1,15 @@
'use client' 'use client'
import { TEMA, } from "@/module/_global"; import { TEMA, } from "@/module/_global";
import { useHookstate } from "@hookstate/core";
import { Carousel } from "@mantine/carousel"; import { Carousel } from "@mantine/carousel";
import { Box, Image, Text, Center, Paper, Stack, UnstyledButton, Skeleton, Group } from "@mantine/core"; import { Box, Center, Group, Image, Skeleton, Stack, Text, UnstyledButton } from "@mantine/core";
import * as ICON from '../lib/file_icon'
import { useParams, useRouter } from "next/navigation";
import { useMediaQuery, useShallowEffect } from "@mantine/hooks"; import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
import { useParams, useRouter } from "next/navigation";
import { useState } from "react";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
import { funGetDetailDivisionById } from "../lib/api_division"; import { funGetDetailDivisionById } from "../lib/api_division";
import * as ICON from '../lib/file_icon';
import { IDataKalenderOnDetailDivision } from "../lib/type_division"; import { IDataKalenderOnDetailDivision } from "../lib/type_division";
import { useState } from "react";
import { useHookstate } from "@hookstate/core";
const iconContainer = (icon: string) => 'data:image/svg+xml;base64,' + btoa(icon) const iconContainer = (icon: string) => 'data:image/svg+xml;base64,' + btoa(icon)
@@ -29,7 +29,6 @@ export default function ListDocumentOnDetailDivision() {
} else { } else {
toast.error(res.message); toast.error(res.message);
} }
setLoading(false);
} catch (error) { } catch (error) {
console.error(error); console.error(error);
toast.error("Gagal mendapatkan divisi, coba lagi nanti"); toast.error("Gagal mendapatkan divisi, coba lagi nanti");
@@ -60,7 +59,7 @@ export default function ListDocumentOnDetailDivision() {
)) ))
: (data.length === 0) ? : (data.length === 0) ?
<Stack align="stretch" justify="center" w={"100%"}> <Stack align="stretch" justify="center" w={"100%"}>
<Text c="dimmed" ta={"center"} fs={"italic"}>Belum ada file</Text> <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada dokumen</Text>
</Stack> </Stack>
: <></> : <></>
} }

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

@@ -1,16 +1,15 @@
'use client' 'use client'
import { TEMA } from "@/module/_global"; import { TEMA } from "@/module/_global";
import { useHookstate } from "@hookstate/core";
import { Carousel } from "@mantine/carousel"; import { Carousel } from "@mantine/carousel";
import { Avatar, Box, Group, Skeleton, Stack, Text } from "@mantine/core"; import { Box, Group, Skeleton, Stack, Text } from "@mantine/core";
import { useMediaQuery, useShallowEffect } from "@mantine/hooks"; import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
import { useParams, useRouter } from "next/navigation"; import { useParams, useRouter } from "next/navigation";
import { useState } from "react";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
import { CiClock2 } from "react-icons/ci"; import { CiClock2 } from "react-icons/ci";
import { funGetDetailDivisionById } from "../lib/api_division"; import { funGetDetailDivisionById } from "../lib/api_division";
import { useState } from "react";
import { IDataTaskOnDetailDivision } from "../lib/type_division"; import { IDataTaskOnDetailDivision } from "../lib/type_division";
import _ from "lodash";
import { useHookstate } from "@hookstate/core";
export default function ListTaskOnDetailDivision() { export default function ListTaskOnDetailDivision() {
@@ -29,7 +28,6 @@ export default function ListTaskOnDetailDivision() {
} else { } else {
toast.error(res.message); toast.error(res.message);
} }
setLoading(false);
} catch (error) { } catch (error) {
console.error(error); console.error(error);
toast.error("Gagal mendapatkan divisi, coba lagi nanti"); toast.error("Gagal mendapatkan divisi, coba lagi nanti");
@@ -61,7 +59,7 @@ export default function ListTaskOnDetailDivision() {
: :
(data.length === 0) ? (data.length === 0) ?
<Stack align="stretch" justify="center" w={"100%"}> <Stack align="stretch" justify="center" w={"100%"}>
<Text c="dimmed" ta={"center"} fs={"italic"}>Belum ada tugas hari ini</Text> <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada tugas hari ini</Text>
</Stack> </Stack>
: <></> : <></>
} }

8
src/module/division_new/ui/navbar_detail_division.tsx
View File

@@ -1,5 +1,5 @@
'use client' 'use client'
import { LayoutDrawer, LayoutNavbarNew, TEMA } from "@/module/_global"; import { globalRole, LayoutDrawer, LayoutNavbarNew, TEMA } from "@/module/_global";
import { useHookstate } from "@hookstate/core"; import { useHookstate } from "@hookstate/core";
import { ActionIcon } from "@mantine/core"; import { ActionIcon } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks"; import { useShallowEffect } from "@mantine/hooks";
@@ -15,12 +15,16 @@ export default function NavbarDetailDivision() {
const param = useParams<{ id: string }>() const param = useParams<{ id: string }>()
const [name, setName] = useState('') const [name, setName] = useState('')
const tema = useHookstate(TEMA) const tema = useHookstate(TEMA)
const roleLogin = useHookstate(globalRole)
const [grup, setGroup] = useState('')
async function getOneData() { async function getOneData() {
try { try {
const res = await funGetDivisionById(param.id); const res = await funGetDivisionById(param.id);
if (res.success) { if (res.success) {
setName(res.data.division.name); setName(res.data.division.name);
setGroup(res.data.division.idGroup)
} else { } else {
toast.error(res.message); toast.error(res.message);
} }
@@ -37,7 +41,7 @@ export default function NavbarDetailDivision() {
return ( return (
<> <>
<LayoutNavbarNew back="" title={name} menu={ <LayoutNavbarNew back={roleLogin.get() == 'supadmin' ? `/division?group=${grup}` : '/division'} title={name} menu={
<ActionIcon variant="light" onClick={() => (setOpenDrawer(true))} bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings"> <ActionIcon variant="light" onClick={() => (setOpenDrawer(true))} bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiMenu size={20} color='white' /> <HiMenu size={20} color='white' />
</ActionIcon> </ActionIcon>

16
src/module/division_new/ui/report_division_id.tsx
View File

@@ -1,18 +1,17 @@
"use client" "use client"
import { LayoutNavbarNew, TEMA } from '@/module/_global'; import { LayoutNavbarNew, TEMA } from '@/module/_global';
import { useHookstate } from '@hookstate/core';
import { Box, Skeleton, Stack } from '@mantine/core'; import { Box, Skeleton, Stack } from '@mantine/core';
import { DateInput } from '@mantine/dates'; import { DateInput } from '@mantine/dates';
import React, { useState } from 'react';
import EchartPaiReport from './echart_pai_report';
import EchartBarReport from './echart_bar_report';
import EventReport from './event_report';
import DiscussionReport from './discussion_report';
import { useParams } from 'next/navigation';
import { funGetReportDivision } from '../lib/api_division';
import moment from 'moment'; import moment from 'moment';
import "moment/locale/id"; import "moment/locale/id";
import { useParams } from 'next/navigation';
import { useState } from 'react';
import toast from 'react-hot-toast'; import toast from 'react-hot-toast';
import { useHookstate } from '@hookstate/core'; import { funGetReportDivision } from '../lib/api_division';
import EchartBarReport from './echart_bar_report';
import EchartPaiReport from './echart_pai_report';
import EventReport from './event_report';
export default function ReportDivisionId() { export default function ReportDivisionId() {
@@ -64,6 +63,7 @@ export default function ReportDivisionId() {
<Box p={20}> <Box p={20}>
<Stack> <Stack>
<DateInput <DateInput
valueFormat='DD-MM-YYYY'
value={value} value={value}
onChange={(val) => { onChangeDate(val) }} onChange={(val) => { onChangeDate(val) }}
radius={10} radius={10}

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

@@ -8,11 +8,11 @@ import toast from "react-hot-toast";
import { FcFolder } from "react-icons/fc"; import { FcFolder } from "react-icons/fc";
import { GoChevronRight } from "react-icons/go"; import { GoChevronRight } from "react-icons/go";
import { MdFolder } from "react-icons/md"; import { MdFolder } from "react-icons/md";
import { useWibuRealtime } from "wibu-realtime";
import { funCreateFolder, funGetAllDocument } from "../lib/api_document"; import { funCreateFolder, funGetAllDocument } from "../lib/api_document";
import { IDataDocument, IFormDetailMoreItem, IJalurItem, } from "../lib/type_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, loadingAction, onChoosePath, data, }: { category: string; loadingAction: boolean; data: IFormDetailMoreItem[]; onChoosePath: (val: string) => void; }) {
const [opened, setOpened] = useState(false); const [opened, setOpened] = useState(false);
const param = useParams<{ id: string }>(); const param = useParams<{ id: string }>();
const [path, setPath] = useState("home"); const [path, setPath] = useState("home");
@@ -100,6 +100,7 @@ export default function DrawerCutDocuments({ category, onChoosePath, data, }: {
</Grid.Col> </Grid.Col>
<Grid.Col span={6}> <Grid.Col span={6}>
<Button <Button
loading={loadingAction}
variant="filled" variant="filled"
fullWidth fullWidth
color={tema.get().utama} color={tema.get().utama}

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

@@ -24,6 +24,7 @@ export default function DrawerMenuDocumentDivision() {
const openRef = useRef<() => void>(null) const openRef = useRef<() => void>(null)
const tema = useHookstate(TEMA) const tema = useHookstate(TEMA)
const [loading, setLoading] = useState(false) const [loading, setLoading] = useState(false)
const [loadingCreate, setLoadingCreate] = useState(false)
const [dataRealTime, setDataRealtime] = useWibuRealtime({ const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu, WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm" project: "sdm"
@@ -36,6 +37,7 @@ export default function DrawerMenuDocumentDivision() {
async function onCreateFolder() { async function onCreateFolder() {
try { try {
setLoadingCreate(true)
const res = await funCreateFolder(bodyFolder) const res = await funCreateFolder(bodyFolder)
if (!res.success) { if (!res.success) {
toast.error(res.message) toast.error(res.message)
@@ -48,11 +50,13 @@ export default function DrawerMenuDocumentDivision() {
} catch (error) { } catch (error) {
console.error(error); console.error(error);
toast.error("Gagal membuat folder baru, coba lagi nanti"); toast.error("Gagal membuat folder baru, coba lagi nanti");
} finally {
setLoadingCreate(false)
refresh.set(true)
setOpenModal(false)
setOpenDrawerDocument(false)
} }
refresh.set(true)
setOpenModal(false)
setOpenDrawerDocument(false)
} }
async function onUploadFile(data: any) { async function onUploadFile(data: any) {
@@ -204,7 +208,7 @@ export default function DrawerMenuDocumentDivision() {
<Button variant="subtle" fullWidth color='#969494' onClick={() => setOpenModal(false)}>Batalkan</Button> <Button variant="subtle" fullWidth color='#969494' onClick={() => setOpenModal(false)}>Batalkan</Button>
</Grid.Col> </Grid.Col>
<Grid.Col span={6}> <Grid.Col span={6}>
<Button variant="subtle" fullWidth color={tema.get().utama} onClick={() => onCreateFolder()}>Membuat</Button> <Button loading={loadingCreate} variant="subtle" fullWidth color={tema.get().utama} onClick={() => onCreateFolder()}>Membuat</Button>
</Grid.Col> </Grid.Col>
</Grid> </Grid>
</Box> </Box>

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

@@ -2,15 +2,15 @@ import { keyWibu, LayoutDrawer, TEMA } from "@/module/_global";
import { useHookstate } from "@hookstate/core"; import { useHookstate } from "@hookstate/core";
import { Box, Flex, SimpleGrid, Stack, Text } from "@mantine/core"; import { Box, Flex, SimpleGrid, Stack, Text } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks"; import { useShallowEffect } from "@mantine/hooks";
import { useParams } from "next/navigation"; import { useParams, useSearchParams } from "next/navigation";
import { useState } from "react"; import { useState } from "react";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
import { LuFolders, LuFolderSymlink } from "react-icons/lu"; import { LuFolders, LuFolderSymlink } from "react-icons/lu";
import { useWibuRealtime } from "wibu-realtime";
import { funCopyDocument, funMoveDocument } from "../lib/api_document"; import { funCopyDocument, funMoveDocument } from "../lib/api_document";
import { IDataDocument } from "../lib/type_document"; import { IDataDocument } from "../lib/type_document";
import { globalRefreshDocument } from "../lib/val_document"; import { globalRefreshDocument } from "../lib/val_document";
import DrawerCutDocuments from "./drawer_cut_documents"; import DrawerCutDocuments from "./drawer_cut_documents";
import { useWibuRealtime } from "wibu-realtime";
export default function DrawerMore({ data }: { data: IDataDocument[] }) { export default function DrawerMore({ data }: { data: IDataDocument[] }) {
const [isCut, setIsCut] = useState(false) const [isCut, setIsCut] = useState(false)
@@ -19,20 +19,31 @@ export default function DrawerMore({ data }: { data: IDataDocument[] }) {
const param = useParams<{ id: string }>() const param = useParams<{ id: string }>()
const [forbidCopy, setForbidCopy] = useState(true) const [forbidCopy, setForbidCopy] = useState(true)
const tema = useHookstate(TEMA) const tema = useHookstate(TEMA)
const [loadingMove, setLoadingMove] = useState(false)
const [loadingCopy, setLoadingCopy] = useState(false)
const [dataRealTime, setDataRealtime] = useWibuRealtime({ const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu, WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm" project: "sdm"
}) })
const searchParams = useSearchParams()
const pathAwal = searchParams.get('path')
async function onMoveItem(path: string) { async function onMoveItem(path: string) {
try { try {
setLoadingMove(true)
const res = await funMoveDocument({ path, dataItem: data }) const res = await funMoveDocument({ path, dataItem: data })
if (res.success) { if (res.success) {
setDataRealtime([{ setDataRealtime([
category: "division-document", {
id: path, category: "division-document",
}]) id: path,
},
{
category: "division-document",
id: pathAwal,
}
])
toast.success(res.message) toast.success(res.message)
refresh.set(true) refresh.set(true)
} else { } else {
@@ -41,13 +52,16 @@ export default function DrawerMore({ data }: { data: IDataDocument[] }) {
} catch (error) { } catch (error) {
console.error(error) console.error(error)
toast.error("Gagal memindahkan item, coba lagi nanti") toast.error("Gagal memindahkan item, coba lagi nanti")
} finally {
setLoadingMove(false)
setIsCut(false)
} }
setIsCut(false)
} }
async function onCopyItem(path: string) { async function onCopyItem(path: string) {
try { try {
setLoadingCopy(true)
const res = await funCopyDocument({ idDivision: param.id, path, dataItem: data }) const res = await funCopyDocument({ idDivision: param.id, path, dataItem: data })
if (res.success) { if (res.success) {
setDataRealtime([{ setDataRealtime([{
@@ -62,8 +76,10 @@ export default function DrawerMore({ data }: { data: IDataDocument[] }) {
} catch (error) { } catch (error) {
console.error(error) console.error(error)
toast.error("Gagal memindahkan item, coba lagi nanti") toast.error("Gagal memindahkan item, coba lagi nanti")
} finally {
setLoadingCopy(false)
setIsCopy(false)
} }
setIsCopy(false)
} }
@@ -108,11 +124,11 @@ export default function DrawerMore({ data }: { data: IDataDocument[] }) {
<LayoutDrawer opened={isCut} onClose={() => setIsCut(false)} title={'Pilih Lokasi Pemindahan'} size="lg"> <LayoutDrawer opened={isCut} onClose={() => setIsCut(false)} title={'Pilih Lokasi Pemindahan'} size="lg">
<DrawerCutDocuments data={data} onChoosePath={(val) => { onMoveItem(val) }} category="move" /> <DrawerCutDocuments data={data} loadingAction={loadingMove} onChoosePath={(val) => { onMoveItem(val) }} category="move" />
</LayoutDrawer> </LayoutDrawer>
<LayoutDrawer opened={isCopy} onClose={() => setIsCopy(false)} title={'Pilih Lokasi Salin'} size="lg"> <LayoutDrawer opened={isCopy} onClose={() => setIsCopy(false)} title={'Pilih Lokasi Salin'} size="lg">
<DrawerCutDocuments data={data} onChoosePath={(val) => { onCopyItem(val) }} category="copy" /> <DrawerCutDocuments data={data} loadingAction={loadingCopy} onChoosePath={(val) => { onCopyItem(val) }} category="copy" />
</LayoutDrawer> </LayoutDrawer>
</Box> </Box>
); );

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

@@ -18,13 +18,13 @@ import { HiMenu } from "react-icons/hi";
import { LuShare2 } from "react-icons/lu"; import { LuShare2 } from "react-icons/lu";
import { MdClose, MdOutlineMoreHoriz } from "react-icons/md"; import { MdClose, MdOutlineMoreHoriz } from "react-icons/md";
import { RiListCheck } from "react-icons/ri"; import { RiListCheck } from "react-icons/ri";
import { useWibuRealtime } from "wibu-realtime";
import { funDeleteDocument, funGetAllDocument, funRenameDocument, } from "../lib/api_document"; import { funDeleteDocument, funGetAllDocument, funRenameDocument, } from "../lib/api_document";
import { IDataDocument, IJalurItem } from "../lib/type_document"; import { IDataDocument, IJalurItem } from "../lib/type_document";
import { globalRefreshDocument } from "../lib/val_document"; import { globalRefreshDocument } from "../lib/val_document";
import DrawerMenuDocumentDivision from "./drawer_menu_document_division"; import DrawerMenuDocumentDivision from "./drawer_menu_document_division";
import DrawerMore from "./drawer_more"; import DrawerMore from "./drawer_more";
import DrawerShareDocument from "./drawer_share_document"; import DrawerShareDocument from "./drawer_share_document";
import { useWibuRealtime } from "wibu-realtime";
export default function NavbarDocumentDivision() { export default function NavbarDocumentDivision() {
const router = useRouter(); const router = useRouter();
@@ -52,6 +52,8 @@ export default function NavbarDocumentDivision() {
const isMobile2 = useMediaQuery("(max-width: 496px)"); const isMobile2 = useMediaQuery("(max-width: 496px)");
const tema = useHookstate(TEMA); const tema = useHookstate(TEMA);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [loadingRename, setLoadingRename] = useState(false);
const [loadingDelete, setLoadingDelete] = useState(false);
const [dataRealTime, setDataRealtime] = useWibuRealtime({ const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu, WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm" project: "sdm"
@@ -138,8 +140,9 @@ export default function NavbarDocumentDivision() {
}; };
async function onConfirmDelete(val: boolean) { async function onConfirmDelete(val: boolean) {
if (val) { try {
try { if (val) {
setLoadingDelete(true)
const respon = await funDeleteDocument(selectedFiles); const respon = await funDeleteDocument(selectedFiles);
if (respon.success) { if (respon.success) {
getOneData(false); getOneData(false);
@@ -150,19 +153,20 @@ export default function NavbarDocumentDivision() {
} else { } else {
toast.error(respon.message); toast.error(respon.message);
} }
} catch (error) { handleBatal();
console.error(error);
toast.error("Gagal menghapus item, coba lagi nanti");
} }
} catch (error) {
handleBatal(); console.error(error);
toast.error("Gagal menghapus item, coba lagi nanti");
} finally {
setLoadingDelete(false)
setIsDelete(false);
} }
setIsDelete(false);
} }
async function onRenameSubmit() { async function onRenameSubmit() {
try { try {
setLoadingRename(true);
const res = await funRenameDocument(bodyRename); const res = await funRenameDocument(bodyRename);
if (res.success) { if (res.success) {
setDataRealtime([{ setDataRealtime([{
@@ -176,11 +180,13 @@ export default function NavbarDocumentDivision() {
} catch (error) { } catch (error) {
console.error(error); console.error(error);
toast.error("Gagal mengganti nama item, coba lagi nanti"); toast.error("Gagal mengganti nama item, coba lagi nanti");
} finally {
setLoadingRename(false)
setSelectedFiles([]);
setDariSelectAll(false);
setRename(false);
} }
setSelectedFiles([]);
setDariSelectAll(false);
setRename(false);
} }
useShallowEffect(() => { useShallowEffect(() => {
@@ -802,6 +808,7 @@ export default function NavbarDocumentDivision() {
{/* MODAL KONFIRMASI DELETE */} {/* MODAL KONFIRMASI DELETE */}
<LayoutModal <LayoutModal
loading={loadingDelete}
opened={isDelete} opened={isDelete}
onClose={() => setIsDelete(false)} onClose={() => setIsDelete(false)}
description="Apakah Anda yakin ingin menghapus item?" description="Apakah Anda yakin ingin menghapus item?"
@@ -861,6 +868,7 @@ export default function NavbarDocumentDivision() {
</Grid.Col> </Grid.Col>
<Grid.Col span={6}> <Grid.Col span={6}>
<Button <Button
loading={loadingRename}
variant="subtle" variant="subtle"
fullWidth fullWidth
color={tema.get().utama} color={tema.get().utama}

2
src/module/project/lib/api_project.ts
View File

@@ -1,4 +1,4 @@
import { IFormAddDetailproject, IFormAddMemberProject, IFormDateProject, IFormProject } from "./type_project"; import { IFormAddDetailproject, IFormAddMemberProject, IFormDateProject } from "./type_project";
export const funGetAllProject = async (path?: string) => { export const funGetAllProject = async (path?: string) => {

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

@@ -2,7 +2,7 @@
import { keyWibu, LayoutDrawer, LayoutNavbarNew, TEMA } from "@/module/_global"; import { keyWibu, LayoutDrawer, LayoutNavbarNew, TEMA } from "@/module/_global";
import LayoutModal from "@/module/_global/layout/layout_modal"; import LayoutModal from "@/module/_global/layout/layout_modal";
import { useHookstate } from "@hookstate/core"; import { useHookstate } from "@hookstate/core";
import { Box, Button, Flex, Group, rem, SimpleGrid, Stack, Text, } from "@mantine/core"; import { Box, Button, Flex, Group, Loader, rem, SimpleGrid, Stack, Text, } from "@mantine/core";
import { Dropzone } from "@mantine/dropzone"; import { Dropzone } from "@mantine/dropzone";
import _ from "lodash"; import _ from "lodash";
import { useParams, useRouter } from "next/navigation"; import { useParams, useRouter } from "next/navigation";
@@ -10,10 +10,10 @@ import { useRef, useState } from "react";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
import { FaTrash } from "react-icons/fa6"; import { FaTrash } from "react-icons/fa6";
import { IoIosArrowDropright } from "react-icons/io"; import { IoIosArrowDropright } from "react-icons/io";
import { useWibuRealtime } from "wibu-realtime";
import { funAddFileProject, funCekNamFileUploadProject } from "../lib/api_project"; import { funAddFileProject, funCekNamFileUploadProject } from "../lib/api_project";
import { IListFileTaskProject } from "../lib/type_project"; import { IListFileTaskProject } from "../lib/type_project";
import ResultsFile from "./results_file"; import ResultsFile from "./results_file";
import { useWibuRealtime } from "wibu-realtime";
export default function AddFileDetailProject() { export default function AddFileDetailProject() {
@@ -26,6 +26,7 @@ export default function AddFileDetailProject() {
const [indexDelFile, setIndexDelFile] = useState<number>(0) const [indexDelFile, setIndexDelFile] = useState<number>(0)
const [openDrawerFile, setOpenDrawerFile] = useState(false) const [openDrawerFile, setOpenDrawerFile] = useState(false)
const tema = useHookstate(TEMA) const tema = useHookstate(TEMA)
const [loadingUpload, setLoadingUpload] = useState(false)
const openRef = useRef<() => void>(null) const openRef = useRef<() => void>(null)
const [dataRealTime, setDataRealtime] = useWibuRealtime({ const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu, WIBU_REALTIME_TOKEN: keyWibu,
@@ -41,6 +42,7 @@ export default function AddFileDetailProject() {
async function cekFileName(data: any) { async function cekFileName(data: any) {
try { try {
setLoadingUpload(true)
const fd = new FormData(); const fd = new FormData();
fd.append(`file`, data); fd.append(`file`, data);
const res = await funCekNamFileUploadProject(param.id, fd) const res = await funCekNamFileUploadProject(param.id, fd)
@@ -53,6 +55,8 @@ export default function AddFileDetailProject() {
} catch (error) { } catch (error) {
console.error(error) console.error(error)
toast.error("Gagal menambahkan file, coba lagi nanti") toast.error("Gagal menambahkan file, coba lagi nanti")
} finally {
setLoadingUpload(false)
} }
} }
@@ -92,8 +96,7 @@ export default function AddFileDetailProject() {
return ( return (
<Box> <Box>
<LayoutNavbarNew back="" title={"Tambah File"} menu /> <LayoutNavbarNew back="" title={"Tambah File"} menu />
<Box p={20} pb={100}>
<Box p={20}>
<Stack> <Stack>
<Dropzone <Dropzone
openRef={openRef} openRef={openRef}
@@ -147,6 +150,13 @@ export default function AddFileDetailProject() {
</Box> </Box>
</Box> </Box>
} }
{
loadingUpload &&
<Group justify="center" py={20}>
<Loader color="gray" type="dots" />
</Group>
}
</Box> </Box>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{ <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550), maxWidth: rem(550),

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

@@ -3,7 +3,7 @@ import { keyWibu, LayoutNavbarNew, SkeletonList, TEMA } from '@/module/_global';
import LayoutModal from '@/module/_global/layout/layout_modal'; import LayoutModal from '@/module/_global/layout/layout_modal';
import { useHookstate } from '@hookstate/core'; import { useHookstate } from '@hookstate/core';
import { Carousel } from '@mantine/carousel'; 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 { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Group, Indicator, rem, Stack, Text, TextInput } from '@mantine/core';
import { useMediaQuery, useShallowEffect } from '@mantine/hooks'; import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import { useParams, useRouter } from 'next/navigation'; import { useParams, useRouter } from 'next/navigation';
import { useState } from 'react'; import { useState } from 'react';
@@ -50,7 +50,6 @@ export default function AddMemberDetailProject() {
} else { } else {
toast.error(res.message); toast.error(res.message);
} }
setLoading(false)
} catch (error) { } catch (error) {
console.error(error) console.error(error)
toast.error("Gagal mendapatkan anggota, coba lagi nanti"); toast.error("Gagal mendapatkan anggota, coba lagi nanti");
@@ -296,20 +295,16 @@ export default function AddMemberDetailProject() {
zIndex: 999, zIndex: 999,
backgroundColor: `${tema.get().bgUtama}`, backgroundColor: `${tema.get().bgUtama}`,
}}> }}>
{loading ? <Button
<Skeleton height={50} radius={30} /> c={"white"}
: bg={tema.get().utama}
<Button size="lg"
c={"white"} radius={30}
bg={tema.get().utama} fullWidth
size="lg" onClick={() => { onVerifikasi() }}
radius={30} >
fullWidth Simpan
onClick={() => { onVerifikasi() }} </Button>
>
Simpan
</Button>
}
</Box> </Box>
<LayoutModal loading={loadingModal} opened={openModal} onClose={() => setOpenModal(false)} <LayoutModal loading={loadingModal} opened={openModal} onClose={() => setOpenModal(false)}

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

@@ -13,6 +13,7 @@ export default function CancelProject() {
const router = useRouter() const router = useRouter()
const [alasan, setAlasan] = useState("") const [alasan, setAlasan] = useState("")
const [openModal, setOpenModal] = useState(false) const [openModal, setOpenModal] = useState(false)
const [loadingModal, setLoadingModal] = useState(false)
const param = useParams<{ id: string }>() const param = useParams<{ id: string }>()
const tema = useHookstate(TEMA) const tema = useHookstate(TEMA)
const [touched, setTouched] = useState({ const [touched, setTouched] = useState({
@@ -23,15 +24,38 @@ export default function CancelProject() {
project: "sdm" project: "sdm"
}) })
function onVerification() { function onCheck() {
if (alasan == "") const cek = checkAll()
return toast.error("Error! harus memasukkan alasan pembatalan Kegiatan") if (!cek)
return false
setOpenModal(true) setOpenModal(true)
} }
function checkAll() {
let nilai = true
if (alasan == "") {
setTouched(touched => ({ ...touched, reason: true }))
nilai = false
}
return nilai
}
function onValidation(kategori: string, val: string) {
if (kategori == 'reason') {
setAlasan(val)
if (val == "") {
setTouched({ ...touched, reason: true })
} else {
setTouched({ ...touched, reason: false })
}
}
}
async function onSubmit() { async function onSubmit() {
try { try {
setLoadingModal(true)
const res = await funCancelProject(param.id, { reason: alasan }) const res = await funCancelProject(param.id, { reason: alasan })
if (res.success) { if (res.success) {
setDataRealtime([{ setDataRealtime([{
@@ -39,13 +63,16 @@ export default function CancelProject() {
id: param.id, id: param.id,
}]) }])
toast.success(res.message) toast.success(res.message)
router.push("/project") router.push("/project/" + param.id)
} else { } else {
toast.error(res.message) toast.error(res.message)
} }
} catch (error) { } catch (error) {
console.error(error) console.error(error)
toast.error("Gagal membatalkan Kegiatan, coba lagi nanti") toast.error("Gagal membatalkan Kegiatan, coba lagi nanti")
} finally {
setLoadingModal(false)
setOpenModal(false)
} }
} }
@@ -63,8 +90,7 @@ export default function CancelProject() {
value={alasan} value={alasan}
size="md" placeholder='Contoh : Kegiatan tidak sesuai' label="Alasan Pembatalan" size="md" placeholder='Contoh : Kegiatan tidak sesuai' label="Alasan Pembatalan"
onChange={(event) => { onChange={(event) => {
setAlasan(event.target.value) onValidation('reason', event.target.value)
setTouched({ ...touched, reason: false })
}} }}
error={ error={
touched.reason && ( touched.reason && (
@@ -86,20 +112,21 @@ export default function CancelProject() {
size="lg" size="lg"
radius={30} radius={30}
fullWidth fullWidth
onClick={() => { onVerification() }} onClick={() => { onCheck() }}
> >
Simpan Simpan
</Button> </Button>
</Box> </Box>
<LayoutModal opened={openModal} onClose={() => setOpenModal(false)} <LayoutModal loading={loadingModal} opened={openModal} onClose={() => setOpenModal(false)}
description="Apakah Anda yakin ingin membatalkan Kegiatan ini? Pembatalan Kegiatan bersifat permanen" description="Apakah Anda yakin ingin membatalkan kegiatan ini? Pembatalan kegiatan bersifat permanen"
onYes={(val) => { onYes={(val) => {
if (val) { if (val) {
onSubmit() onSubmit()
} else {
setOpenModal(false)
} }
setOpenModal(false)
}} /> }} />
</Box> </Box>
); );

55
src/module/project/ui/create_users_project.tsx
View File

@@ -1,27 +1,24 @@
"use client" "use client"
import { LayoutNavbarNew, SkeletonList, SkeletonSingle, SkeletonUser, TEMA } from '@/module/_global'; import { LayoutNavbarNew, SkeletonList, TEMA } from '@/module/_global';
import { useHookstate } from '@hookstate/core';
import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Indicator, Input, rem, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import { useRouter } from 'next/navigation';
import React, { useState } from 'react';
import { HiChevronLeft, HiMagnifyingGlass } from 'react-icons/hi2';
import { funGetAllmember, TypeUser } from '@/module/user';
import { funGetUserByCookies } from '@/module/auth'; import { funGetUserByCookies } from '@/module/auth';
import toast from 'react-hot-toast'; import { funGetAllmember, TypeUser } from '@/module/user';
import { globalMemberProject } from '../lib/val_project'; import { useHookstate } from '@hookstate/core';
import { FaCheck } from 'react-icons/fa6';
import { IoArrowBackOutline, IoClose } from 'react-icons/io5';
import { Carousel } from '@mantine/carousel'; import { Carousel } from '@mantine/carousel';
import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Indicator, rem, Stack, Text, TextInput } from '@mantine/core';
import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import { useState } from 'react';
import toast from 'react-hot-toast';
import { FaCheck } from 'react-icons/fa6';
import { HiChevronLeft, HiMagnifyingGlass } from 'react-icons/hi2';
import { IoArrowBackOutline, IoClose } from 'react-icons/io5';
import { globalMemberProject } from '../lib/val_project';
export default function CreateUsersProject({ grup, onClose }: { grup?: string, onClose: (val: any) => void }) { export default function CreateUsersProject({ grup, onClose }: { grup?: string, onClose: (val: any) => void }) {
const router = useRouter()
const member = useHookstate(globalMemberProject) const member = useHookstate(globalMemberProject)
const [selectedFiles, setSelectedFiles] = useState<any>([]); const [selectedFiles, setSelectedFiles] = useState<any>([]);
const [dataMember, setDataMember] = useState<TypeUser>([]) const [dataMember, setDataMember] = useState<TypeUser>([])
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true)
const [openTugas, setOpenTugas] = useState(false)
const [onClickSearch, setOnClickSearch] = useState(false) const [onClickSearch, setOnClickSearch] = useState(false)
const tema = useHookstate(TEMA) const tema = useHookstate(TEMA)
const isMobile2 = useMediaQuery("(max-width: 438px)"); const isMobile2 = useMediaQuery("(max-width: 438px)");
@@ -36,21 +33,25 @@ export default function CreateUsersProject({ grup, onClose }: { grup?: string, o
async function loadData(search: string) { async function loadData(search: string) {
setLoading(true) try {
const res = await funGetAllmember('?active=true&group=' + grup + '&search=' + search); setLoading(true)
const user = await funGetUserByCookies(); const res = await funGetAllmember('?active=true&group=' + grup + '&search=' + search);
const user = await funGetUserByCookies();
if (res.success) { if (res.success) {
setDataMember(res.data.filter((i: any) => i.id != user.id)) setDataMember(res.data.filter((i: any) => i.id != user.id))
// cek data member sebelumnya
// cek data member sebelumnya if (member.length > 0) {
if (member.length > 0) { setSelectedFiles(JSON.parse(JSON.stringify(member.get())))
setSelectedFiles(JSON.parse(JSON.stringify(member.get()))) }
} else {
toast.error("Gagal mendapatkan data, coba lagi nanti")
} }
} else { } catch (error) {
toast.error(res.message) console.error(error)
toast.error("Gagal mendapatkan data, coba lagi nanti")
} finally {
setLoading(false)
} }
setLoading(false)
} }

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

@@ -1,5 +1,5 @@
"use client" "use client"
import { LayoutNavbarNew, TEMA } from '@/module/_global'; import { keyWibu, LayoutNavbarNew, TEMA } from '@/module/_global';
import LayoutModal from '@/module/_global/layout/layout_modal'; import LayoutModal from '@/module/_global/layout/layout_modal';
import { useHookstate } from '@hookstate/core'; import { useHookstate } from '@hookstate/core';
import { Box, Button, Flex, Group, rem, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core'; import { Box, Button, Flex, Group, rem, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
@@ -9,6 +9,7 @@ import moment from 'moment';
import { useParams, useRouter } from 'next/navigation'; import { useParams, useRouter } from 'next/navigation';
import { useState } from 'react'; import { useState } from 'react';
import toast from 'react-hot-toast'; import toast from 'react-hot-toast';
import { useWibuRealtime } from 'wibu-realtime';
import { funEditDetailProject, funGetDetailProject } from '../lib/api_project'; import { funEditDetailProject, funGetDetailProject } from '../lib/api_project';
export default function EditDetailTaskProject() { export default function EditDetailTaskProject() {
@@ -24,6 +25,10 @@ export default function EditDetailTaskProject() {
title: false, title: false,
date: false, date: false,
}); });
const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
const router = useRouter() const router = useRouter()
async function onSubmit() { async function onSubmit() {
@@ -43,6 +48,10 @@ export default function EditDetailTaskProject() {
}) })
if (res.success) { if (res.success) {
setDataRealtime([{
category: "project-detail-task",
id: idProject,
}])
toast.success(res.message); toast.success(res.message);
router.push('/project/' + idProject) router.push('/project/' + idProject)
} else { } else {

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

@@ -55,7 +55,6 @@ export default function ListProject() {
} else { } else {
toast.error(response.message); toast.error(response.message);
} }
setLoading(false);
} catch (error) { } catch (error) {
toast.error("Gagal mendapatkan kegiatan, coba lagi nanti"); toast.error("Gagal mendapatkan kegiatan, coba lagi nanti");
console.error(error); console.error(error);

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

@@ -17,6 +17,7 @@ export default function NavbarDetailProject() {
const router = useRouter() const router = useRouter()
const param = useParams<{ id: string }>() const param = useParams<{ id: string }>()
const [name, setName] = useState('') const [name, setName] = useState('')
const [grup, setGrup] = useState("")
const [isOpen, setOpen] = useState(false) const [isOpen, setOpen] = useState(false)
const roleLogin = useHookstate(globalRole) const roleLogin = useHookstate(globalRole)
const tema = useHookstate(TEMA) const tema = useHookstate(TEMA)
@@ -32,6 +33,7 @@ export default function NavbarDetailProject() {
if (res.success) { if (res.success) {
setName(res.data.title); setName(res.data.title);
setReason(res.data.reason); setReason(res.data.reason);
setGrup(res.data.idGroup);
} else { } else {
toast.error(res.message); toast.error(res.message);
} }
@@ -54,7 +56,7 @@ export default function NavbarDetailProject() {
return ( return (
<> <>
<LayoutNavbarNew back="" title={name} menu={ <LayoutNavbarNew back={`/project?group=${grup}`} title={name} menu={
<ActionIcon <ActionIcon
variant="light" variant="light"
bg={tema.get().bgIcon} bg={tema.get().bgIcon}

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

@@ -110,7 +110,7 @@ export default function ProgressDetailProject() {
: :
<Box <Box
p={20} p={20}
bg={"#DCEED8"} bg={tema.get().bgTotalKegiatan}
style={{ style={{
borderRadius: 10, borderRadius: 10,
}} }}

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

@@ -2,7 +2,7 @@
import { keyWibu, LayoutDrawer, LayoutNavbarNew, TEMA } from "@/module/_global"; import { keyWibu, LayoutDrawer, LayoutNavbarNew, TEMA } from "@/module/_global";
import LayoutModal from "@/module/_global/layout/layout_modal"; import LayoutModal from "@/module/_global/layout/layout_modal";
import { useHookstate } from "@hookstate/core"; import { useHookstate } from "@hookstate/core";
import { Box, Button, Flex, Group, rem, SimpleGrid, Stack, Text, } from "@mantine/core"; import { Box, Button, Flex, Group, Loader, rem, SimpleGrid, Stack, Text, } from "@mantine/core";
import { Dropzone } from "@mantine/dropzone"; import { Dropzone } from "@mantine/dropzone";
import _ from "lodash"; import _ from "lodash";
import { useParams, useRouter } from "next/navigation"; import { useParams, useRouter } from "next/navigation";
@@ -27,6 +27,7 @@ export default function AddFileDetailTask() {
const [openDrawerFile, setOpenDrawerFile] = useState(false) const [openDrawerFile, setOpenDrawerFile] = useState(false)
const tema = useHookstate(TEMA) const tema = useHookstate(TEMA)
const openRef = useRef<() => void>(null) const openRef = useRef<() => void>(null)
const [loadingUpload, setLoadingUpload] = useState(false)
const [dataRealTime, setDataRealtime] = useWibuRealtime({ const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu, WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm" project: "sdm"
@@ -41,6 +42,7 @@ export default function AddFileDetailTask() {
async function cekFileName(data: any) { async function cekFileName(data: any) {
try { try {
setLoadingUpload(true)
const fd = new FormData(); const fd = new FormData();
fd.append(`file`, data); fd.append(`file`, data);
const res = await funCekNamFileUploadTask(param.detail, fd) const res = await funCekNamFileUploadTask(param.detail, fd)
@@ -53,6 +55,8 @@ export default function AddFileDetailTask() {
} catch (error) { } catch (error) {
console.error(error) console.error(error)
toast.error("Gagal menambahkan file, coba lagi nanti") toast.error("Gagal menambahkan file, coba lagi nanti")
} finally {
setLoadingUpload(false)
} }
} }
@@ -146,6 +150,12 @@ export default function AddFileDetailTask() {
</Box> </Box>
</Box> </Box>
} }
{
loadingUpload &&
<Group justify="center" py={20}>
<Loader color="gray" type="dots" />
</Group>
}
</Box> </Box>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{ <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550), maxWidth: rem(550),

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

@@ -4,7 +4,7 @@ import LayoutModal from "@/module/_global/layout/layout_modal";
import { funGetSearchMemberDivision, IDataMemberDivision } from "@/module/division_new"; import { funGetSearchMemberDivision, IDataMemberDivision } from "@/module/division_new";
import { useHookstate } from "@hookstate/core"; import { useHookstate } from "@hookstate/core";
import { Carousel } from "@mantine/carousel"; import { Carousel } from "@mantine/carousel";
import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Group, Indicator, rem, Stack, Text, TextInput } from "@mantine/core"; import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Indicator, rem, Stack, Text, TextInput } from "@mantine/core";
import { useMediaQuery, useShallowEffect } from "@mantine/hooks"; import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
import { useParams, useRouter } from "next/navigation"; import { useParams, useRouter } from "next/navigation";
import { useState } from "react"; import { useState } from "react";
@@ -53,7 +53,6 @@ export default function AddMemberDetailTask() {
toast.error(res.message); toast.error(res.message);
} }
setLoading(false)
} catch (error) { } catch (error) {
console.error(error) console.error(error)
toast.error("Gagal mendapatkan anggota, coba lagi nanti"); toast.error("Gagal mendapatkan anggota, coba lagi nanti");
@@ -143,6 +142,7 @@ export default function AddMemberDetailTask() {
async function fetchGetMember(val: string) { async function fetchGetMember(val: string) {
setSearchQuery(val) setSearchQuery(val)
try { try {
setLoading(true)
const res = await funGetSearchMemberDivision('?search=' + val, param.id); const res = await funGetSearchMemberDivision('?search=' + val, param.id);
if (res.success) { if (res.success) {
setData(res.data) setData(res.data)
@@ -151,6 +151,8 @@ export default function AddMemberDetailTask() {
} }
} catch (error) { } catch (error) {
console.error(error); console.error(error);
} finally {
setLoading(false)
} }
} }
@@ -243,12 +245,12 @@ export default function AddMemberDetailTask() {
<Box p={20}> <Box p={20}>
<Group justify="space-between" mt={100} onClick={handleSelectAll}> {/* <Group justify="space-between" mt={100} onClick={handleSelectAll}>
<Text c={tema.get().utama} fw={"bold"}> <Text c={tema.get().utama} fw={"bold"}>
Pilih Semua Anggota Pilih Semua Anggota
</Text> </Text>
{selectAll ? <FaCheck style={{ marginRight: 10 }} /> : ""} {selectAll ? <FaCheck style={{ marginRight: 10 }} /> : ""}
</Group> </Group> */}
{loading ? Array(8) {loading ? Array(8)
.fill(null) .fill(null)
.map((_, i) => ( .map((_, i) => (
@@ -267,7 +269,7 @@ export default function AddMemberDetailTask() {
const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser); const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser);
const found = isDataMember.some((i: any) => i.idUser == v.idUser) const found = isDataMember.some((i: any) => i.idUser == v.idUser)
return ( return (
<Box mb={15} key={i} onClick={() => (!found) ? handleFileClick(i) : null}> <Box mb={15} mt={i === 0 ? 100 : 0} key={i} onClick={() => (!found) ? handleFileClick(i) : null}>
<Grid align='center'> <Grid align='center'>
<Grid.Col span={{ <Grid.Col span={{
base: 1, base: 1,

1
src/module/task/ui/create_task.tsx
View File

@@ -34,7 +34,6 @@ export default function CreateTask() {
const [dataTask, setDataTask] = useState<IFormDateTask[]>([]) const [dataTask, setDataTask] = useState<IFormDateTask[]>([])
const openRef = useRef<() => void>(null) const openRef = useRef<() => void>(null)
const [fileForm, setFileForm] = useState<any[]>([]) const [fileForm, setFileForm] = useState<any[]>([])
const [imgForm, setImgForm] = useState<any>()
const [listFile, setListFile] = useState<IListFileTask[]>([]) const [listFile, setListFile] = useState<IListFileTask[]>([])
const [indexDelFile, setIndexDelFile] = useState<number>(0) const [indexDelFile, setIndexDelFile] = useState<number>(0)
const [indexDelTask, setIndexDelTask] = useState<number>(0) const [indexDelTask, setIndexDelTask] = useState<number>(0)

118
src/module/task/ui/create_users_project.tsx
View File

@@ -1,38 +1,20 @@
"use client" "use client"
import { LayoutNavbarNew, SkeletonList, SkeletonSingle, TEMA } from "@/module/_global"; import { LayoutNavbarNew, SkeletonList, TEMA } from "@/module/_global";
import { funGetDivisionById, funGetSearchMemberDivision, IDataMemberDivision } from "@/module/division_new"; import { funGetSearchMemberDivision, IDataMemberDivision } from "@/module/division_new";
import { useHookstate } from "@hookstate/core"; import { useHookstate } from "@hookstate/core";
import { import { Carousel } from "@mantine/carousel";
ActionIcon, import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Group, Indicator, rem, Skeleton, Stack, Text, TextInput } from "@mantine/core";
Avatar,
Box,
Button,
Center,
Divider,
Flex,
Grid,
Group,
Indicator,
rem,
Skeleton,
Stack,
Text,
TextInput,
} from "@mantine/core";
import { useMediaQuery, useShallowEffect } from "@mantine/hooks"; import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
import { useParams, useRouter } from "next/navigation"; import { useParams, useRouter } from "next/navigation";
import React, { useState } from "react"; import { useState } from "react";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
import { globalMemberTask } from "../lib/val_task";
import { FaCheck } from "react-icons/fa6";
import { RiListCheck } from "react-icons/ri";
import { BsListCheck } from "react-icons/bs"; import { BsListCheck } from "react-icons/bs";
import { FaCheck } from "react-icons/fa6";
import { HiChevronLeft, HiMagnifyingGlass } from "react-icons/hi2"; import { HiChevronLeft, HiMagnifyingGlass } from "react-icons/hi2";
import { IoArrowBackOutline, IoClose } from "react-icons/io5"; import { IoArrowBackOutline, IoClose } from "react-icons/io5";
import { Carousel } from "@mantine/carousel"; import { globalMemberTask } from "../lib/val_task";
export default function CreateUsersProject({ onClose }: { onClose: (val: any) => void }) { export default function CreateUsersProject({ onClose }: { onClose: (val: any) => void }) {
const router = useRouter()
const param = useParams<{ id: string }>() const param = useParams<{ id: string }>()
const [selectedFiles, setSelectedFiles] = useState<any>([]) const [selectedFiles, setSelectedFiles] = useState<any>([])
const [isData, setData] = useState<IDataMemberDivision[]>([]) const [isData, setData] = useState<IDataMemberDivision[]>([])
@@ -57,7 +39,6 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
} else { } else {
toast.error(response.message) toast.error(response.message)
} }
setLoading(false)
} catch (error) { } catch (error) {
console.error(error) console.error(error)
toast.error("Gagal mendapatkan anggota, coba lagi nanti"); toast.error("Gagal mendapatkan anggota, coba lagi nanti");
@@ -122,6 +103,7 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
async function fetchGetMember(val: string) { async function fetchGetMember(val: string) {
setSearchQuery(val) setSearchQuery(val)
try { try {
setLoading(true)
const res = await funGetSearchMemberDivision('?search=' + val, param.id); const res = await funGetSearchMemberDivision('?search=' + val, param.id);
if (res.success) { if (res.success) {
setData(res.data) setData(res.data)
@@ -130,6 +112,8 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
} }
} catch (error) { } catch (error) {
console.error(error); console.error(error);
} finally {
setLoading(false)
} }
} }
@@ -228,7 +212,7 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
<Box p={20}> <Box p={20}>
{loading ? {/* {loading ?
<Skeleton height={20} width={"100%"} mt={20} /> <Skeleton height={20} width={"100%"} mt={20} />
: :
<Group justify="space-between" mt={100} onClick={handleSelectAll}> <Group justify="space-between" mt={100} onClick={handleSelectAll}>
@@ -237,7 +221,7 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
</Text> </Text>
<BsListCheck size={25} style={{ marginRight: 5 }} color={tema.get().utama} /> <BsListCheck size={25} style={{ marginRight: 5 }} color={tema.get().utama} />
</Group> </Group>
} } */}
<Box mt={15} mb={100}> <Box mt={15} mb={100}>
{loading ? {loading ?
Array(8) Array(8)
@@ -249,47 +233,47 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
)) ))
: :
(isData.length === 0) ? (isData.length === 0) ?
<Stack align="stretch" justify="center" w={"100%"} h={"60vh"}> <Stack align="stretch" justify="center" w={"100%"} h={"60vh"}>
<Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada anggota</Text> <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada anggota</Text>
</Stack> </Stack>
: :
isData.map((v, i) => { isData.map((v, i) => {
const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser); const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser);
return ( return (
<Box mb={15} key={i} onClick={() => handleFileClick(i)}> <Box mb={15} key={i} onClick={() => handleFileClick(i)} mt={i===0 ? 100 : 0}>
<Grid align='center'> <Grid align='center'>
<Grid.Col span={{ <Grid.Col span={{
base: 1, base: 1,
xs: 1, xs: 1,
sm: 1, sm: 1,
md: 1, md: 1,
lg: 1, lg: 1,
xl: 1 xl: 1
}}> }}>
<Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size="lg" /> <Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size="lg" />
</Grid.Col> </Grid.Col>
<Grid.Col span={{ <Grid.Col span={{
base: 11, base: 11,
xs: 11, xs: 11,
sm: 11, sm: 11,
md: 11, md: 11,
lg: 11, lg: 11,
xl: 11, xl: 11,
}}> }}>
<Flex justify='space-between' align={"center"}> <Flex justify='space-between' align={"center"}>
<Flex direction={'column'} align="flex-start" justify="flex-start"> <Flex direction={'column'} align="flex-start" justify="flex-start">
<Text lineClamp={1} pl={isMobile2 ? 40 : 30}>{v.name}</Text> <Text lineClamp={1} pl={isMobile2 ? 40 : 30}>{v.name}</Text>
</Flex>
{isSelected ? <FaCheck /> : null}
</Flex> </Flex>
{isSelected ? <FaCheck /> : null} </Grid.Col>
</Flex> </Grid>
</Grid.Col> <Box mt={10}>
</Grid> <Divider size={"xs"} />
<Box mt={10}> </Box>
<Divider size={"xs"} />
</Box> </Box>
</Box> );
); })
})
} }
</Box> </Box>
</Box> </Box>

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

@@ -114,7 +114,7 @@ export default function EditTask() {
onChange={(e) => { onValidation('title', e.target.value) }} onChange={(e) => { onValidation('title', e.target.value) }}
error={ error={
touched.title && ( touched.title && (
title == "" ? "Error! harus memasukkan judul tugas" : null title == "" ? "Judul Tugas Tidak Boleh Kosong" : null
) )
} }
/> />

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

@@ -1,15 +1,15 @@
import { currentScroll, globalNotifPage, ReloadButtonTop, SkeletonList, TEMA } from "@/module/_global"; import { currentScroll, globalNotifPage, ReloadButtonTop, SkeletonList, TEMA } from "@/module/_global";
import { useHookstate } from "@hookstate/core";
import { ActionIcon, Avatar, Box, Card, Center, Divider, Flex, Grid, Group, Progress, Skeleton, Text, TextInput, Title } from "@mantine/core"; 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";
import { HiMagnifyingGlass, HiMiniPresentationChartBar, HiOutlineListBullet, HiSquares2X2 } from "react-icons/hi2";
import { MdAccountCircle } from "react-icons/md";
import { IDataTask } from "../lib/type_task";
import { funGetAllTask } from "../lib/api_task";
import toast from "react-hot-toast";
import { useMediaQuery, useShallowEffect } from "@mantine/hooks"; import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
import _ from "lodash"; import _ from "lodash";
import { useHookstate } from "@hookstate/core"; import { useParams, useRouter, useSearchParams } from "next/navigation";
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 { funGetAllTask } from "../lib/api_task";
import { IDataTask } from "../lib/type_task";
export default function ListDivisionTask() { export default function ListDivisionTask() {
const [isList, setIsList] = useState(false) const [isList, setIsList] = useState(false)
@@ -46,8 +46,6 @@ export default function ListDivisionTask() {
} else { } else {
toast.error(response.message); toast.error(response.message);
} }
setLoading(false);
} catch (error) { } catch (error) {
toast.error("Gagal mendapatkan tugas divisi, coba lagi nanti"); toast.error("Gagal mendapatkan tugas divisi, coba lagi nanti");
console.error(error); console.error(error);
@@ -56,17 +54,16 @@ export default function ListDivisionTask() {
} }
}; };
useShallowEffect(() => {
fetchData(false)
}, [isPage])
useShallowEffect(() => { useShallowEffect(() => {
setPage(1) setPage(1)
fetchData(true); fetchData(true);
}, [status, searchQuery]); }, [status, searchQuery]);
useShallowEffect(() => {
fetchData(false)
}, [isPage])
useEffect(() => { useEffect(() => {
const handleScroll = async () => { const handleScroll = async () => {
if (containerRef && containerRef.current) { if (containerRef && containerRef.current) {
@@ -149,7 +146,7 @@ export default function ListDivisionTask() {
<Box bg={tema.get().bgTotalKegiatan} p={10} style={{ borderRadius: 10 }}> <Box bg={tema.get().bgTotalKegiatan} p={10} style={{ borderRadius: 10 }}>
<Text fw={'bold'} c={tema.get().utama}>Total Tugas</Text> <Text fw={'bold'} c={tema.get().utama}>Total Tugas</Text>
<Flex justify={'center'} align={'center'} h={'100%'}> <Flex justify={'center'} align={'center'} h={'100%'}>
<Text fz={40} fw={'bold'} c={tema.get().utama}>{totalData}</Text> <Text fz={40} fw={'bold'} c={tema.get().utama}>{loading ? 0 : totalData}</Text>
</Flex> </Flex>
</Box> </Box>
{isList ? ( {isList ? (
@@ -173,7 +170,7 @@ export default function ListDivisionTask() {
isData.map((v, i) => { isData.map((v, i) => {
return ( return (
<Box key={i}> <Box key={i}>
<Grid align='center'> <Grid align='center' onClick={() => router.push(`task/${v.id}`)}>
<Grid.Col span={{ <Grid.Col span={{
base: 1, base: 1,
xs: 1, xs: 1,
@@ -182,7 +179,7 @@ export default function ListDivisionTask() {
lg: 1, lg: 1,
xl: 1 xl: 1
}}> }}>
<Group onClick={() => router.push(`task/${v.id}`)}> <Group>
<Center> <Center>
<ActionIcon <ActionIcon
variant="gradient" variant="gradient"
@@ -251,8 +248,8 @@ export default function ListDivisionTask() {
</Card.Section> </Card.Section>
<Box pt={10}> <Box pt={10}>
<Progress.Root size="xl" radius="xl" style={{ border: `1px solid ${'#BDBDBD'}` }}> <Progress.Root size="xl" radius="xl" style={{ border: `1px solid ${'#BDBDBD'}` }}>
<Progress.Section value={v.progress} color="yellow" striped > <Progress.Section value={_.isNull(v.progress) ? 0 : v.progress} color="yellow" striped >
<Progress.Label>{v.progress}%</Progress.Label> <Progress.Label>{_.isNull(v.progress) ? 0 : v.progress}%</Progress.Label>
</Progress.Section> </Progress.Section>
</Progress.Root> </Progress.Root>
<Text my={10}>{v.desc}</Text> <Text my={10}>{v.desc}</Text>

77
src/module/task/ui/tabs_division_task.tsx
View File

@@ -1,14 +1,13 @@
'use client' 'use client'
import { Box, Button, Flex, rem, Tabs } from "@mantine/core"; import { TEMA } from "@/module/_global";
import { useHookstate } from "@hookstate/core";
import { Box, Button, Flex, rem } from "@mantine/core";
import { useRouter, useSearchParams } from "next/navigation";
import { IoIosCheckmarkCircleOutline } from "react-icons/io"; import { IoIosCheckmarkCircleOutline } from "react-icons/io";
import { IoCloseCircleOutline } from "react-icons/io5"; import { IoCloseCircleOutline } from "react-icons/io5";
import { RiProgress3Line } from "react-icons/ri"; import { RiProgress3Line } from "react-icons/ri";
import { TbClockPause } from "react-icons/tb"; import { TbClockPause } from "react-icons/tb";
import ListDivisionTask from "./list_division_task"; import ListDivisionTask from "./list_division_task";
import { useRouter, useSearchParams } from "next/navigation";
import { Carousel } from "@mantine/carousel";
import { TEMA } from "@/module/_global";
import { useHookstate } from "@hookstate/core";
export default function TabsDivisionTask() { export default function TabsDivisionTask() {
const iconStyle = { width: rem(20), height: rem(20) }; const iconStyle = { width: rem(20), height: rem(20) };
@@ -43,40 +42,40 @@ export default function TabsDivisionTask() {
return ( return (
<Box p={20}> <Box p={20}>
<Box <Box
style={{ style={{
display: "flex", display: "flex",
gap: "20px", gap: "20px",
position: "relative", position: "relative",
overflowX: "scroll", overflowX: "scroll",
scrollbarWidth: "none", scrollbarWidth: "none",
maxWidth: "550px" maxWidth: "550px"
}} }}
> >
<Flex gap={"md"} justify={"space-between"}> <Flex gap={"md"} justify={"space-between"}>
{dataStatus.map((item, index) => ( {dataStatus.map((item, index) => (
<Button <Button
variant="subtle" variant="subtle"
color={ color={
status == item.id status == item.id
? "white" ? "white"
: (status == null && item.id == "0") ? "white" : tema.get().utama : (status == null && item.id == "0") ? "white" : tema.get().utama
} }
onClick={() => { router.push("?status=" + item.id) }} onClick={() => { router.push("?status=" + item.id) }}
defaultValue={(status == "1" || status == "2" || status == "3") ? status : "0"} defaultValue={(status == "1" || status == "2" || status == "3") ? status : "0"}
radius={"xl"} radius={"xl"}
key={index} key={index}
bg={ bg={
status == item.id status == item.id
? tema.get().bgFiturDivision ? tema.get().bgFiturDivision
: (status == null && item.id == "0") ? tema.get().bgFiturDivision : "transparent" : (status == null && item.id == "0") ? tema.get().bgFiturDivision : "transparent"
} }
leftSection={item.icon} leftSection={item.icon}
> >
{item.title} {item.title}
</Button> </Button>
))} ))}
</Flex> </Flex>
</Box> </Box>
<ListDivisionTask /> <ListDivisionTask />
</Box> </Box>
) )

3
src/module/user/lib/type_user.ts
View File

@@ -1,11 +1,12 @@
export type TypeUser = { export type TypeUser = {
id: string id: string
idUserRole: string
name: string name: string
nik: string nik: string
phone: string phone: string
email: string email: string
gender: string gender: string
img:string img: string
isActive: boolean, isActive: boolean,
group: string, group: string,
position: string position: string

2
src/module/user/member/lib/api_member.ts
View File

@@ -1,4 +1,4 @@
import { IEditDataMember, IFormMember, IStatusmember } from "./type_member"; import { IStatusmember } from "./type_member";
export const funGetAllmember = async (path?: string) => { export const funGetAllmember = async (path?: string) => {
const response = await fetch(`/api/user${(path) ? path : ''}`, { next: { tags: ['member'] } }); const response = await fetch(`/api/user${(path) ? path : ''}`, { next: { tags: ['member'] } });