Skip to content

Commit c4b4e2a

Browse files
SamGu-NRXCooperzillaAndrxwWxng
committed
New hero design + basic dashboard. Fixed various errors
Co-authored-by: Cooperzilla <[email protected]> Co-authored-by: Andrew Wang <[email protected]>
1 parent bae43fd commit c4b4e2a

15 files changed

+554
-6659
lines changed

‎backend/package-lock.json

-6,464
This file was deleted.

‎backend/package.json

+5-2
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,15 @@
1414
"body-parser": "^1.20.2",
1515
"cors": "^2.8.5",
1616
"dotenv": "^16.4.5",
17-
"eslint": "^9.5.0",
18-
"eslint-config-google": "^0.14.0",
1917
"express": "^4.19.2",
2018
"firebase-admin": "^12.2.0",
2119
"firebase-functions": "^5.0.1",
2220
"firebase-functions-test": "^3.3.0",
2321
"uuid": "^10.0.0"
22+
},
23+
"devDependencies": {
24+
"pnpm": "^9.4.0",
25+
"eslint": "^9.5.0",
26+
"eslint-config-google": "^0.14.0"
2427
}
2528
}

‎backend/pnpm-lock.yaml

+17-6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/package.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
"homepage": "https://samgu-nrx.github.io/LuminAI/",
55
"private": true,
66
"type": "module",
7-
87
"scripts": {
98
"dev": "vite",
109
"start": "vite",
@@ -17,6 +16,7 @@
1716
"@chakra-ui/react": "^2.8.2",
1817
"@directus/sdk": "^16.1.1",
1918
"@emailjs/browser": "^4.3.3",
19+
"@heroicons/react": "^2.1.4",
2020
"@react-oauth/google": "^0.12.1",
2121
"@tabler/icons-react": "^3.8.0",
2222
"@tanstack/react-router": "^1.40.0",
@@ -33,12 +33,14 @@
3333
"react-dom": "^18.3.1",
3434
"react-helmet-async": "^2.0.5",
3535
"react-icons": "^5.2.1",
36+
"react-simple-typewriter": "^5.0.1",
3637
"sonner": "^1.5.0",
3738
"tailwind-merge": "^2.3.0"
3839
},
3940
"devDependencies": {
4041
"@tanstack/router-vite-plugin": "^1.40.3",
4142
"@types/aos": "^3.0.7",
43+
"@types/locomotive-scroll": "^4.1.3",
4244
"@types/react": "^18.3.3",
4345
"@types/react-dom": "^18.3.0",
4446
"@vitejs/plugin-react": "^4.3.1",

‎frontend/pnpm-lock.yaml

+35
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/src/components/Dashboard/Dashboard.tsx

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
// components/Dashboard.jsx
2+
import { EllipsisVerticalIcon } from "@heroicons/react/24/solid";
3+
4+
5+
function Dashboard() {
6+
return (
7+
<div>
8+
<h1 className="text-2xl font-bold mb-6">Dashboard</h1>
9+
<div className="bg-gray-800 rounded-lg p-4 mb-6">
10+
<div className="flex justify-between items-center mb-4">
11+
<div>
12+
<h2 className="text-xl font-semibold">
13+
LuminAI Innovate Scholars (Summer 2024)
14+
</h2>
15+
<p>LIS Summer 24</p>
16+
</div>
17+
<EllipsisVerticalIcon className="h-6 w-6" />
18+
</div>
19+
<div className="w-full bg-gray-700 rounded-full h-2.5">
20+
<div
21+
className="bg-blue-600 h-2.5 rounded-full"
22+
style={{ width: "93%" }}
23+
></div>
24+
</div>
25+
<p className="text-right mt-2">93%</p>
26+
</div>
27+
<DueSection />
28+
</div>
29+
);
30+
}
31+
32+
function DueSection() {
33+
const dueItems = [
34+
{ name: "Unit 4 Test", dueIn: "2d" },
35+
{ name: "Discussion: Fail-Safe Recovery", dueIn: "2d" },
36+
{ name: "Activity: Hardware Security Guidelines", dueIn: "2d" },
37+
{ name: "Lab: Asymmetric Practice", dueIn: "2d" },
38+
];
39+
40+
return (
41+
<div>
42+
<h2 className="text-xl font-semibold mb-4">Due</h2>
43+
{dueItems.map((item, index) => (
44+
<div key={index} className="flex justify-between items-center mb-2">
45+
<span>{item.name}</span>
46+
<span className="text-gray-400">in {item.dueIn}</span>
47+
</div>
48+
))}
49+
</div>
50+
);
51+
}
52+
53+
export default Dashboard;

‎frontend/src/components/Dashboard/Sidebar.tsx

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
// components/Sidebar.jsx
2+
import {
3+
HomeIcon,
4+
BookOpenIcon,
5+
CalendarIcon,
6+
InboxIcon,
7+
ClockIcon,
8+
QuestionMarkCircleIcon,
9+
} from "@heroicons/react/24/solid";
10+
11+
function Sidebar() {
12+
const menuItems = [
13+
{ icon: HomeIcon, label: "Dashboard" },
14+
{ icon: BookOpenIcon, label: "Courses" },
15+
{ icon: CalendarIcon, label: "Calendar" },
16+
{ icon: InboxIcon, label: "Inbox" },
17+
{ icon: ClockIcon, label: "History" },
18+
{ icon: QuestionMarkCircleIcon, label: "Help" },
19+
];
20+
21+
return (
22+
<aside className="w-20 bg-gray-800 p-4">
23+
<div className="mb-8">
24+
<img
25+
src="/path-to-avatar.png"
26+
alt="Account"
27+
className="w-12 h-12 rounded-full"
28+
/>
29+
</div>
30+
{menuItems.map((item, index) => (
31+
<div key={index} className="mb-6 text-center">
32+
<item.icon className="h-6 w-6 mx-auto mb-1" />
33+
<span className="text-xs">{item.label}</span>
34+
</div>
35+
))}
36+
</aside>
37+
);
38+
}
39+
40+
export default Sidebar;

‎frontend/src/components/Dashboard/TodoList.tsx

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
// components/TodoList.jsx
2+
import { PlusIcon } from "@heroicons/react/24/solid";
3+
4+
function TodoList() {
5+
const todoItems = [
6+
{
7+
name: "Unit 3 Test",
8+
course: "LIS Summer 24",
9+
dueDate: "Jun 27 at 18:00 (5 days ago)",
10+
},
11+
{
12+
name: "Discussion: Physical and Tactical Controls",
13+
course: "LIS Summer 24",
14+
dueDate: "July 2 at 18:00 (5 days ago)",
15+
},
16+
// Add more items...
17+
];
18+
19+
return (
20+
<aside className="w-80 bg-gray-800 p-4 overflow-y-auto">
21+
<div className="flex justify-between items-center mb-4">
22+
<h2 className="text-xl font-semibold">To Do</h2>
23+
<button className="bg-blue-500 p-1 rounded-full">
24+
<PlusIcon className="h-5 w-5" />
25+
</button>
26+
</div>
27+
{todoItems.map((item, index) => (
28+
<TodoItem key={index} {...item} />
29+
))}
30+
<Announcements />
31+
<RecentFeedback />
32+
</aside>
33+
);
34+
}
35+
36+
function TodoItem({ name, course, dueDate }) {
37+
return (
38+
<div className="mb-4 bg-gray-700 p-3 rounded-lg">
39+
<h3 className="font-semibold">{name}</h3>
40+
<p className="text-sm text-gray-400">{course}</p>
41+
<p className="text-sm text-red-400">{dueDate}</p>
42+
</div>
43+
);
44+
}
45+
46+
function Announcements() {
47+
return (
48+
<div className="mt-6">
49+
<h2 className="text-xl font-semibold mb-4">Announcements</h2>
50+
<div className="bg-gray-700 p-3 rounded-lg">
51+
<h3 className="font-semibold">WEEK 6 (7/1 - 7/3) ANNOUNCEMENT</h3>
52+
<p className="text-sm text-gray-400">LIS Summer 24</p>
53+
<p className="text-sm text-gray-400">Jul 1 at 9:07 (3 days ago)</p>
54+
</div>
55+
</div>
56+
);
57+
}
58+
59+
function RecentFeedback() {
60+
return (
61+
<div className="mt-6">
62+
<h2 className="text-xl font-semibold mb-4">Recent Feedback</h2>
63+
<p className="text-blue-400">Activity: Something</p>
64+
</div>
65+
);
66+
}
67+
68+
export default TodoList;

‎frontend/src/components/Header/Header.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ const Header = () => {
2020
<StyledLink address="/Staff" text="Meet Our Staff" />
2121
<StyledLink address="/Inquiry" text="Inquiry" />
2222
<StyledLink address="/Login" text="Login" />
23+
<StyledLink address="/Dashboard" text="Dashboard" />
2324
</nav>
2425
</div>
2526
</header>

0 commit comments

Comments
 (0)