Skip to content

Commit 7c826b3

Browse files
palsarippalsarip
authored
Merge pull request #4 from MAXIMA-2023/update
fix: adjustment for eventus and inspice
2 parents f06f173 + 7f92b8b commit 7c826b3

File tree

4 files changed

+135
-125
lines changed

4 files changed

+135
-125
lines changed

‎app/dashboard/page.tsx

Lines changed: 118 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -2,81 +2,14 @@
22
import React, { useRef, useEffect, useState, MutableRefObject } from "react";
33
import Layout from "@/components/Layout";
44
import { useAuth } from "@/contexts/Auth";
5-
import { Text, Box, Flex, Icon } from "@chakra-ui/react";
5+
import { Text, Box, Flex, Icon, Tooltip, Center } from "@chakra-ui/react";
66
import { motion } from "framer-motion";
7-
import { MdOutlineShield, MdOutlineSchool, MdOutlineAirplanemodeActive } from "react-icons/md";
7+
import { MdOutlineShield, MdOutlineSchool, MdOutlineAirplanemodeActive, MdInfoOutline } from "react-icons/md";
88
import { HiOutlineOfficeBuilding, HiOutlineSparkles } from "react-icons/hi";
99
import Charts from "@/components/Charts";
10-
import LoadingSpinner from "@/components/LoadingSpinner";
11-
12-
// chart dummy data
13-
const dummyJmlMahasiswa = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
14-
const dummyDates = [
15-
"2023-09-18T00:00:00+0700",
16-
"2023-09-19T00:00:00+0700",
17-
"2023-09-20T00:00:00+07:00",
18-
"2023-09-21T00:00:00+0700",
19-
"2023-09-22T00:00:00+0700",
20-
"2023-09-23T00:00:00+0700",
21-
"2023-09-24T00:00:00+0700",
22-
"2023-09-25T00:00:00+0700",
23-
"2023-09-26T00:00:00+0700",
24-
"2023-09-27T00:00:00+0700",
25-
"2023-09-28T00:00:00+0700",
26-
];
27-
28-
const tabs = [
29-
{
30-
name: "Panitia",
31-
href: "/dashboard/daftarpanitia",
32-
icon: MdOutlineShield,
33-
bgColor: "#E7EDFE",
34-
iconBgColor: "#185C99",
35-
total: 0,
36-
},
37-
{
38-
name: "Panitia Divisi",
39-
href: "/dashboard/panitiafivisi",
40-
icon: MdOutlineShield,
41-
bgColor: "#E7EDFE",
42-
iconBgColor: "#185C99",
43-
total: 0,
44-
},
45-
{
46-
name: "Organisator",
47-
href: "/dashboard/organisator",
48-
icon: HiOutlineOfficeBuilding,
49-
bgColor: "#FEE7E7",
50-
iconBgColor: "#E53E3E",
51-
total: 0,
52-
},
53-
{
54-
name: "Mahasiswa",
55-
href: "/dashboard/mahasiswa",
56-
icon: MdOutlineSchool,
57-
bgColor: "#FEF5E7",
58-
iconBgColor: "#D77300",
59-
total: 0,
60-
},
61-
{
62-
name: "STATE",
63-
href: "/dashboard/daftarstate ",
64-
icon: MdOutlineAirplanemodeActive,
65-
bgColor: "#ECE7FE",
66-
iconBgColor: "#4A05DE",
67-
total: 0,
68-
},
69-
{
70-
name: "Malpun",
71-
href: "/dashboard/malpun ",
72-
icon: HiOutlineSparkles,
73-
bgColor: "#FEE7FC",
74-
iconBgColor: "#DE05C8",
75-
total: 0,
76-
},
77-
];
78-
10+
import { useRouter } from "next/navigation";
7911
export default function Dashboard() {
12+
const router = useRouter();
8013
const auth = useAuth();
8114
const [width, setWidth] = useState(0);
8215
const cardRef = useRef() as MutableRefObject<HTMLDivElement>;
@@ -87,6 +20,84 @@ export default function Dashboard() {
8720
}
8821
}, []);
8922

23+
// chart dummy data
24+
const dummyJmlMahasiswa = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
25+
const dummyDates = [
26+
"2023-09-18T00:00:00+0700",
27+
"2023-09-19T00:00:00+0700",
28+
"2023-09-20T00:00:00+07:00",
29+
"2023-09-21T00:00:00+0700",
30+
"2023-09-22T00:00:00+0700",
31+
"2023-09-23T00:00:00+0700",
32+
"2023-09-24T00:00:00+0700",
33+
"2023-09-25T00:00:00+0700",
34+
"2023-09-26T00:00:00+0700",
35+
"2023-09-27T00:00:00+0700",
36+
"2023-09-28T00:00:00+0700",
37+
];
38+
39+
const tabs = [
40+
{
41+
name: "Panitia",
42+
href: "/dashboard/panitia/daftarpanitia",
43+
icon: MdOutlineShield,
44+
bgColor: "#E7EDFE",
45+
iconBgColor: "#185C99",
46+
tooltipLabel: "Data ini menampilkan jumlah panitia yang terdaftar",
47+
tooltipIcon: "Panitia",
48+
total: 0,
49+
},
50+
{
51+
name: "Panitia Divisi",
52+
href: "/dashboard/panitia/panitiadivisi",
53+
icon: MdOutlineShield,
54+
bgColor: "#E7EDFE",
55+
iconBgColor: "#185C99",
56+
tooltipLabel: `Data ini menampilkan jumlah panitia divisi ${auth.user?.divisiName} yang terdaftar`,
57+
total: 0,
58+
},
59+
{
60+
name: "Organisator",
61+
href: "/dashboard/organisator",
62+
icon: HiOutlineOfficeBuilding,
63+
bgColor: "#FEE7E7",
64+
iconBgColor: "#E53E3E",
65+
tooltipLabel: "Data ini menampilkan jumlah PIC organisator yang terdaftar",
66+
tooltipIcon: "Organisator",
67+
total: 0,
68+
},
69+
{
70+
name: "Mahasiswa",
71+
href: "/dashboard/mahasiswa",
72+
icon: MdOutlineSchool,
73+
bgColor: "#FEF5E7",
74+
iconBgColor: "#D77300",
75+
tooltipLabel: "Data ini menampilkan jumlah mahasiswa yang terdaftar",
76+
tooltipIcon: "Mahasiswa",
77+
total: 0,
78+
},
79+
{
80+
name: "STATE",
81+
href: "/dashboard/state/daftarstate ",
82+
icon: MdOutlineAirplanemodeActive,
83+
bgColor: "#ECE7FE",
84+
iconBgColor: "#4A05DE",
85+
tooltipLabel: "Data ini menampilkan jumlah mahasiswa yang mengikuti STATE",
86+
tooltipIcon: "STATE",
87+
total: 0,
88+
},
89+
{
90+
name: "Malpun",
91+
href: "/dashboard/malpun/peserta ",
92+
icon: HiOutlineSparkles,
93+
bgColor: "#FEE7FC",
94+
iconBgColor: "#DE05C8",
95+
tooltipLabel: "Data ini menampilkan jumlah mahasiswa yang mengikuti Malam Puncak",
96+
tooltipIcon: "Malpun",
97+
total: 0,
98+
},
99+
];
100+
90101
return (
91102
<>
92103
<title>MAXIMA 2023 Internal - Dashboard</title>
@@ -111,14 +122,28 @@ export default function Dashboard() {
111122
<Box as={motion.div} minW={"15em"} h={"7.5em"} p={"1em"} bg={tab.bgColor} mr={"1em"} mb={"1em"} key={index} borderRadius={"lg"}>
112123
<Box w={"full"} h={"auto"}>
113124
<Flex w={"full"} h={"auto"} justifyContent={"space-between"} alignItems={"center"}>
114-
<Box>
115-
<Text fontSize={"md"} fontWeight={"medium"}>
116-
{tab.name}
117-
</Text>
118-
</Box>
119-
<Box ml={"auto"} bg={tab.iconBgColor} w={"1.5em"} h={"1.5em"} borderRadius={"50%"} display={"flex"} justifyContent={"center"} alignItems={"center"}>
120-
<Icon as={tab.icon} color={"white"} w={"1em"} h={"1em"} />
121-
</Box>
125+
<Flex w={"full"} justifyContent={"start"} alignItems={"center"}>
126+
<Box
127+
_hover={{ textDecoration: "underline", cursor: "pointer" }}
128+
onClick={() => {
129+
router.push(tab.href);
130+
}}
131+
>
132+
<Text fontSize={"md"} fontWeight={"medium"}>
133+
{tab.name}
134+
</Text>
135+
</Box>
136+
<Tooltip p={"1em"} hasArrow label={tab.tooltipLabel} bg={"white"} color={"#1E1D22"} borderRadius={"md"}>
137+
<Center _hover={{ cursor: "pointer" }}>
138+
<Icon as={MdInfoOutline} color={"#1E1D22"} w={"0.85em"} h={"0.85em"} ml={"0.25em"} />
139+
</Center>
140+
</Tooltip>
141+
</Flex>
142+
<Tooltip p={"0.5em"} hasArrow label={tab.tooltipIcon} bg={"white"} color={"#1E1D22"} borderRadius={"md"}>
143+
<Box ml={"auto"} bg={tab.iconBgColor} w={"1.5em"} h={"1.5em"} borderRadius={"50%"} display={"flex"} justifyContent={"center"} alignItems={"center"}>
144+
<Icon as={tab.icon} color={"white"} w={"1em"} h={"1em"} />
145+
</Box>
146+
</Tooltip>
122147
</Flex>
123148
<Box w={"full"} h={"auto"} mt={"1em"}>
124149
<Text fontSize={"3xl"} fontWeight={"semibold"}>
@@ -158,6 +183,20 @@ export default function Dashboard() {
158183
</Box>
159184
</Box>
160185
<Box w={"full"} mt={"2em"}>
186+
<Flex justifyContent={"start"} alignItems={"center"}>
187+
<Box>
188+
<Text color={"#1E1D22"} fontSize="md" fontWeight={"semibold"}>
189+
Mahasiswa
190+
</Text>
191+
</Box>
192+
<Box>
193+
<Tooltip p={"1em"} hasArrow label={"Data ini menampilkan perkembangan mahasiswa yang mendaftar STATE kamu setiap harinya 🤩"} bg={"white"} color={"#1E1D22"} borderRadius={"md"}>
194+
<Center _hover={{ cursor: "pointer" }}>
195+
<Icon as={MdInfoOutline} color={"#1E1D22"} w={"0.85em"} h={"0.85em"} ml={"0.25em"} />
196+
</Center>
197+
</Tooltip>
198+
</Box>
199+
</Flex>
161200
<Charts jmlPendaftar={dummyJmlMahasiswa} dates={dummyDates} />
162201
</Box>
163202
</Box>

‎app/dashboard/panitia/panitiadivisi/page.tsx

Lines changed: 5 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,7 @@
22
import MUIDataTable, { MUIDataTableColumn } from "mui-datatables";
33
import { useState, useEffect } from "react";
44
import { ThemeProvider } from "@mui/material/styles";
5-
import {
6-
Box,
7-
Flex,
8-
Text,
9-
Divider,
10-
HStack,
11-
Switch,
12-
Link,
13-
Select,
14-
Image,
15-
Button,
16-
SkeletonText,
17-
} from "@chakra-ui/react";
5+
import { Box, Flex, Text, Divider, HStack, Switch, Link, Select, Image, Button, SkeletonText } from "@chakra-ui/react";
186
import { createTheme } from "@mui/material/styles";
197
import Layout from "@/components/Layout";
208
import api, { ResponseModel, HandleAxiosError } from "@/services/api";
@@ -71,23 +59,15 @@ export default function PanitiaDivisi() {
7159

7260
useEffect(() => {
7361
if (!auth.loading && auth.role !== "panit") {
74-
Swal.fire(
75-
"Error!",
76-
"Maaf, anda tidak memiliki akses ke page ini",
77-
"error"
78-
);
62+
Swal.fire("Error!", "Maaf, anda tidak memiliki akses ke page ini", "error");
7963
route.push("/dashboard");
8064
return;
8165
}
8266

8367
const loadDataPanit = async () => {
8468
try {
8569
const { data } = await api.get<ResponseModel<Panitia[]>>(`panit/data`);
86-
setDataPanitia(
87-
data.data!.filter(
88-
(panitia) => panitia.divisiID === auth.user?.divisiID
89-
)
90-
);
70+
setDataPanitia(data.data!.filter((panitia) => panitia.divisiID === auth.user?.divisiID));
9171
} catch (error) {
9272
console.log(error);
9373
HandleAxiosError(error);
@@ -100,18 +80,9 @@ export default function PanitiaDivisi() {
10080
return (
10181
<>
10282
<title>MAXIMA 2023 Internal - Organisator</title>
103-
<Layout
104-
title="Organisator"
105-
tag={auth.user?.divisiName}
106-
showDashboardButton
107-
>
83+
<Layout title={"Panitia Divisi"} tag={auth.user?.divisiName} showDashboardButton>
10884
<Box w={"full"}>
109-
<SkeletonText
110-
isLoaded={!fetchLoading}
111-
noOfLines={10}
112-
spacing={8}
113-
skeletonHeight={12}
114-
>
85+
<SkeletonText isLoaded={!fetchLoading} noOfLines={10} spacing={8} skeletonHeight={12}>
11586
<ThemeProvider theme={createTheme()}>
11687
<MUIDataTable
11788
title={""}

‎app/dashboard/state/details/[stateID]/page.tsx

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -175,6 +175,14 @@ export default function Details() {
175175

176176
const allowedEditPanitia = ["D01", "D02", "D05", "D13"]; // divisi registrasi?
177177

178+
// exclude divisi D13 - Inspice (registrasi)
179+
// cursed banget :(
180+
const isSuntingAllowed =
181+
auth.role === "organisator" ||
182+
(auth.role === "panit" &&
183+
allowedEditPanitia.includes(auth.user?.divisiID!) &&
184+
auth.user?.divisiID !== "D13");
185+
178186
const columnsDetails: MUIDataTableColumn[] = [
179187
{
180188
label: "Nama",
@@ -231,6 +239,7 @@ export default function Details() {
231239
disabled={
232240
auth.role !== "panit" ||
233241
!allowedEditPanitia.includes(auth.user?.divisiID!) ||
242+
auth.user?.divisiID === "D05" ||
234243
value
235244
}
236245
/>
@@ -272,6 +281,7 @@ export default function Details() {
272281
disabled={
273282
auth.role !== "panit" ||
274283
!allowedEditPanitia.includes(auth.user?.divisiID!) ||
284+
auth.user?.divisiID === "D05" ||
275285
value
276286
}
277287
/>
@@ -290,9 +300,7 @@ export default function Details() {
290300
showDashboardButton={auth.role === "organisator"}
291301
>
292302
<Box w={"full"} h={"auto"}>
293-
{(auth.role === "organisator" ||
294-
(auth.role === "panit" &&
295-
allowedEditPanitia.includes(auth.user?.divisiID!))) && (
303+
{isSuntingAllowed && (
296304
<Flex justifyContent={"flex-end"} mb={"2em"}>
297305
<Button
298306
h={"2.25em"}

‎components/Charts.tsx

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,7 @@ import React, { Component, useState } from "react";
44
const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
55
import { Text, Box, Flex, Icon } from "@chakra-ui/react";
66

7-
const Charts = ({
8-
jmlPendaftar,
9-
dates,
10-
}: {
11-
jmlPendaftar: number[];
12-
dates: string[];
13-
}) => {
7+
const Charts = ({ jmlPendaftar, dates }: { jmlPendaftar: number[]; dates: string[] }) => {
148
return (
159
<>
1610
<Box w={"full"}>
@@ -35,7 +29,6 @@ const Charts = ({
3529
},
3630
},
3731
title: {
38-
text: "Mahasiswa",
3932
align: "left",
4033
style: {
4134
fontSize: "16px",
@@ -61,7 +54,6 @@ const Charts = ({
6154
}}
6255
series={[
6356
{
64-
name: "Mahasiswa",
6557
data: jmlPendaftar,
6658
},
6759
]}

0 commit comments

Comments
 (0)