Skip to content

Commit 74c3aa3

Browse files
palsarippalsarip
committed
style(dashboard): adding more styles to the page
1 parent b115039 commit 74c3aa3

File tree

1 file changed

+118
-79
lines changed

1 file changed

+118
-79
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>

0 commit comments

Comments
 (0)