Skip to content

Commit 0043c07

Browse files
authored
Merge pull request #155 from OpenLake/ui-revamp
UI revamp
2 parents 3474fc5 + b81d9fe commit 0043c07

95 files changed

Lines changed: 5672 additions & 3182 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

backend/models/schema.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ var findOrCreate = require("mongoose-findorcreate");
66
const userSchema = new mongoose.Schema({
77
user_id: {
88
type: String,
9-
//user_id is the ID provided by institute, ie ID no
109
},
1110
role: {
1211
type: String,

frontend/src/App.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,14 @@ import RoleRedirect from "./Components/Auth/RoleRedirect";
1414
import Unauthorised from "./Components/Unauthorised";
1515
import "react-toastify/dist/ReactToastify.css";
1616
import { ToastContainer } from "react-toastify";
17+
import { NavbarConfig } from "./config/navbarConfig";
18+
import { SidebarProvider } from "./hooks/useSidebar";
1719

1820
function App() {
1921
const authData = useAuth();
2022
const { isUserLoggedIn, isOnboardingComplete, isLoading } = authData;
23+
// const role = isUserLoggedIn?.role || "STUDENT";
24+
// const navItems = NavbarConfig[role] || [];
2125

2226
// Show loading state while checking authentication
2327
if (isLoading) {
@@ -27,6 +31,7 @@ function App() {
2731
return (
2832
<>
2933
<AdminContext.Provider value={authData}>
34+
{/* <SidebarProvider role={role} navItems={navItems}> */}
3035
<BrowserRouter>
3136
<Routes>
3237
{/* Public Routes */}
@@ -55,6 +60,7 @@ function App() {
5560
/>
5661
</Routes>
5762
</BrowserRouter>
63+
{/* </SidebarProvider> */}
5864
</AdminContext.Provider>
5965
<ToastContainer
6066
position="top-right"
Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
import { Award, CheckCircle, ExternalLink, XCircle } from "lucide-react";
2+
import {
3+
formatDate,
4+
getLevelBadgeColor,
5+
getVerificationBadgeColor,
6+
} from "../../utils/achievementHelpers";
7+
8+
const AchievementCard = ({ achievement }) => {
9+
return (
10+
<div className="bg-white rounded-lg gray-200 overflow-hidden">
11+
{/* Header */}
12+
<div className="px-6 py-4 border-b border-gray-200">
13+
<div className="flex items-start justify-between">
14+
<div className="flex-1">
15+
<h3 className="text-lg font-semibold text-gray-900">
16+
{achievement.title}
17+
</h3>
18+
{achievement.description && (
19+
<p className="text-sm text-gray-600 mb-3">
20+
{achievement.description}
21+
</p>
22+
)}
23+
<div className="flex items-center gap-2 flex-wrap">
24+
<span className="px-2 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-800">
25+
{achievement.category?.charAt(0).toUpperCase() +
26+
achievement.category?.slice(1)}
27+
</span>
28+
{achievement.level && (
29+
<span
30+
className={`px-2 py-1 text-xs font-medium rounded-full ${getLevelBadgeColor(achievement.level)}`}
31+
>
32+
{achievement.level.charAt(0).toUpperCase() +
33+
achievement.level.slice(1)}
34+
</span>
35+
)}
36+
<span
37+
className={`px-2 py-1 text-xs font-medium rounded-full flex items-center gap-1 ${getVerificationBadgeColor(achievement.verified)}`}
38+
>
39+
{achievement.verified ? (
40+
<>
41+
<CheckCircle className="w-3 h-3" />
42+
Verified
43+
</>
44+
) : (
45+
<>
46+
<XCircle className="w-3 h-3" />
47+
Pending
48+
</>
49+
)}
50+
</span>
51+
</div>
52+
</div>
53+
</div>
54+
</div>
55+
56+
<div className="p-6 space-y-4">
57+
{/* Achievement Details */}
58+
<div>
59+
<div className="flex items-center gap-2 mb-3">
60+
<Award className="w-4 h-4 text-orange-500" />
61+
<h4 className="text-sm font-medium text-gray-900">
62+
Achievement Details
63+
</h4>
64+
</div>
65+
<div className="bg-orange-50 rounded-lg p-3 space-y-2">
66+
<div className="flex justify-between text-sm">
67+
<span className="text-gray-600">Date achieved:</span>
68+
<span className="text-gray-900 font-medium">
69+
{formatDate(achievement.date_achieved)}
70+
</span>
71+
</div>
72+
{achievement.type && (
73+
<div className="flex justify-between text-sm">
74+
<span className="text-gray-600">Type:</span>
75+
<span className="text-gray-900 font-medium">
76+
{achievement.type}
77+
</span>
78+
</div>
79+
)}
80+
{achievement.position && (
81+
<div className="flex justify-between text-sm">
82+
<span className="text-gray-600">Position:</span>
83+
<span className="text-gray-900 font-medium">
84+
{achievement.position}
85+
</span>
86+
</div>
87+
)}
88+
{achievement.event_id && (
89+
<div className="flex justify-between text-sm">
90+
<span className="text-gray-600">Event:</span>
91+
<span className="text-gray-900 font-medium">
92+
{achievement.event_id.title ||
93+
achievement.event_id.name ||
94+
"Event"}
95+
</span>
96+
</div>
97+
)}
98+
</div>
99+
</div>
100+
101+
{/* Verification Details */}
102+
{achievement.verified && achievement.verified_by && (
103+
<div>
104+
<div className="flex items-center gap-2 mb-3">
105+
<CheckCircle className="w-4 h-4 text-green-500" />
106+
<h4 className="text-sm font-medium text-gray-900">
107+
Verification Details
108+
</h4>
109+
</div>
110+
<div className="bg-green-50 rounded-lg p-3">
111+
<div className="flex justify-between text-sm">
112+
<span className="text-gray-600">Verified by:</span>
113+
<span className="text-gray-900 font-medium">
114+
{achievement.verified_by.personal_info?.name ||
115+
achievement.verified_by.username ||
116+
"Unknown"}
117+
</span>
118+
</div>
119+
</div>
120+
</div>
121+
)}
122+
123+
{/* Certificate */}
124+
{achievement.certificate_url && (
125+
<div>
126+
<a
127+
href={achievement.certificate_url}
128+
target="_blank"
129+
rel="noopener noreferrer"
130+
className="flex items-center justify-center gap-2 w-full bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-lg font-medium transition-colors focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 outline-none"
131+
>
132+
<ExternalLink className="w-4 h-4" />
133+
View Certificate
134+
</a>
135+
</div>
136+
)}
137+
138+
{/* Timeline */}
139+
<div className="flex justify-between text-xs text-gray-500 pt-3 border-t border-gray-200">
140+
<span>Added: {formatDate(achievement.created_at)}</span>
141+
<span>ID: {achievement.achievement_id}</span>
142+
</div>
143+
</div>
144+
</div>
145+
);
146+
};
147+
export default AchievementCard;

0 commit comments

Comments
 (0)