Skip to content

Commit c010c89

Browse files
fezcodefezcode
committed
feat: roadmap 3
1 parent 0f88dca commit c010c89

File tree

4 files changed

+129
-53
lines changed

4 files changed

+129
-53
lines changed

‎src/components/RoadmapCard.js‎

Lines changed: 35 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,32 +4,54 @@ import { motion } from 'framer-motion';
44
import { KanbanIcon } from '@phosphor-icons/react'; // Using KanbanIcon as a default/watermark icon
55

66
const RoadmapCard = ({ app, index }) => {
7-
const getStatusColor = (status) => {
7+
const getStatusClasses = (status) => {
8+
let bgColor = '';
9+
let borderColor = '';
810
switch (status) {
911
case 'Planned':
10-
return 'bg-blue-500';
12+
bgColor = 'bg-blue-500';
13+
borderColor = 'border-blue-700'; // Darker shade for border
14+
break;
1115
case 'In Progress':
12-
return 'bg-yellow-500';
16+
bgColor = 'bg-yellow-500';
17+
borderColor = 'border-yellow-700';
18+
break;
1319
case 'Completed':
14-
return 'bg-green-500';
20+
bgColor = 'bg-green-500';
21+
borderColor = 'border-green-700';
22+
break;
1523
case 'On Hold':
16-
return 'bg-red-500';
24+
bgColor = 'bg-red-500';
25+
borderColor = 'border-red-700';
26+
break;
1727
default:
18-
return 'bg-gray-500';
28+
bgColor = 'bg-gray-500';
29+
borderColor = 'border-gray-700';
1930
}
31+
return `${bgColor} ${borderColor}`;
2032
};
2133

22-
const getPriorityColor = (priority) => {
34+
const getPriorityClasses = (priority) => {
35+
let textColor = '';
36+
let borderColor = '';
2337
switch (priority) {
2438
case 'High':
25-
return 'text-red-400';
39+
textColor = 'text-red-400';
40+
borderColor = 'border-red-700';
41+
break;
2642
case 'Medium':
27-
return 'text-yellow-400';
43+
textColor = 'text-yellow-400';
44+
borderColor = 'border-yellow-700';
45+
break;
2846
case 'Low':
29-
return 'text-green-400';
47+
textColor = 'text-green-400';
48+
borderColor = 'border-green-700';
49+
break;
3050
default:
31-
return 'text-gray-400';
51+
textColor = 'text-gray-400';
52+
borderColor = 'border-gray-700';
3253
}
54+
return `${textColor} ${borderColor}`;
3355
};
3456

3557
const statusTextColor = (status) => {
@@ -63,12 +85,12 @@ const RoadmapCard = ({ app, index }) => {
6385
<div className="relative z-10 flex-grow">
6486
<div className="flex items-center justify-between mb-2">
6587
<span
66-
className={`px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full ${getStatusColor(app.status || 'Planned')} ${statusTextColor(app.status || 'Planned')}`}
88+
className={`px-2 py-0 inline-flex text-xs font-mono font-semibold rounded-md shadow-sm border ${getStatusClasses(app.status || 'Planned')} ${statusTextColor(app.status || 'Planned')}`}
6789
>
6890
{app.status || 'Planned'}
6991
</span>
7092
<span
71-
className={`text-xs font-medium ${getPriorityColor(app.priority)}`}
93+
className={`px-2 py-0 inline-flex text-xs font-mono font-semibold rounded-md shadow-sm border ${getPriorityClasses(app.priority || 'Low')}`}
7294
>
7395
Priority: {app.priority || 'Low'}
7496
</span>

‎src/components/Sidebar.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ import {
3333
Trophy,
3434
MusicNoteIcon,
3535
SkullIcon,
36+
BugBeetleIcon,
3637
} from '@phosphor-icons/react';
3738

3839
import Fez from './Fez';
@@ -240,6 +241,10 @@ const Sidebar = ({ isOpen, toggleSidebar, toggleModal, setIsPaletteOpen }) => {
240241
<TimerIcon size={24} />
241242
<span>Timeline</span>
242243
</NavLink>
244+
<NavLink to="/roadmap" className={getLinkClass}>
245+
<BugBeetleIcon size={24} />
246+
<span>Fezzilla</span>
247+
</NavLink>
243248
</nav>
244249
)}
245250
</div>

‎src/pages/roadmap/RoadmapItemDetailPage.js‎

Lines changed: 35 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -39,32 +39,54 @@ const RoadmapItemDetailPage = () => {
3939
fetchRoadmapItem();
4040
}, [id]);
4141

42-
const getStatusColor = (status) => {
42+
const getStatusClasses = (status) => {
43+
let bgColor = '';
44+
let borderColor = '';
4345
switch (status) {
4446
case 'Planned':
45-
return 'bg-blue-500';
47+
bgColor = 'bg-blue-500';
48+
borderColor = 'border-blue-700';
49+
break;
4650
case 'In Progress':
47-
return 'bg-yellow-500';
51+
bgColor = 'bg-yellow-500';
52+
borderColor = 'border-yellow-700';
53+
break;
4854
case 'Completed':
49-
return 'bg-green-500';
55+
bgColor = 'bg-green-500';
56+
borderColor = 'border-green-700';
57+
break;
5058
case 'On Hold':
51-
return 'bg-red-500';
59+
bgColor = 'bg-red-500';
60+
borderColor = 'border-red-700';
61+
break;
5262
default:
53-
return 'bg-gray-500';
63+
bgColor = 'bg-gray-500';
64+
borderColor = 'border-gray-700';
5465
}
66+
return `${bgColor} ${borderColor}`;
5567
};
5668

57-
const getPriorityColor = (priority) => {
69+
const getPriorityClasses = (priority) => {
70+
let textColor = '';
71+
let borderColor = '';
5872
switch (priority) {
5973
case 'High':
60-
return 'text-red-400';
74+
textColor = 'text-red-400';
75+
borderColor = 'border-red-700';
76+
break;
6177
case 'Medium':
62-
return 'text-yellow-400';
78+
textColor = 'text-yellow-400';
79+
borderColor = 'border-yellow-700';
80+
break;
6381
case 'Low':
64-
return 'text-green-400';
82+
textColor = 'text-green-400';
83+
borderColor = 'border-green-700';
84+
break;
6585
default:
66-
return 'text-gray-400';
86+
textColor = 'text-gray-400';
87+
borderColor = 'border-gray-700';
6788
}
89+
return `${textColor} ${borderColor}`;
6890
};
6991

7092
if (isLoading) {
@@ -118,15 +140,15 @@ const RoadmapItemDetailPage = () => {
118140
<div>
119141
<p className="text-gray-400 font-mono font-medium">Status:</p>
120142
<span
121-
className={`px-3 py-1 inline-flex text-sm leading-5 font-semibold rounded-full ${getStatusColor(roadmapItem.status)}`}
143+
className={`px-2 py-0 inline-flex text-xs font-mono font-semibold rounded-md shadow-sm border ${getStatusClasses(roadmapItem.status)} text-white`}
122144
>
123145
{roadmapItem.status || 'Planned'}
124146
</span>
125147
</div>
126148
<div>
127149
<p className="text-gray-400 font-mono font-medium">Priority:</p>
128150
<span
129-
className={`px-3 py-1 inline-flex text-sm leading-5 font-semibold rounded-full ${getPriorityColor(roadmapItem.priority)}`}
151+
className={`px-2 py-0 inline-flex text-xs font-mono font-semibold rounded-md shadow-sm border ${getPriorityClasses(roadmapItem.priority)}`}
130152
>
131153
{roadmapItem.priority || 'Low'}
132154
</span>

‎src/pages/roadmap/RoadmapViewerPage.js‎

Lines changed: 54 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -37,32 +37,59 @@ const RoadmapViewerPage = () => {
3737
fetchRoadmap();
3838
}, []);
3939

40-
const getStatusColor = (status) => {
40+
const getStatusClasses = (status) => {
41+
let bgColor = '';
42+
let borderColor = '';
4143
switch (status) {
4244
case 'Planned':
43-
return 'bg-blue-500';
45+
bgColor = 'bg-blue-500';
46+
borderColor = 'border-blue-700';
47+
break;
4448
case 'In Progress':
45-
return 'bg-yellow-500';
49+
bgColor = 'bg-yellow-500';
50+
borderColor = 'border-yellow-700';
51+
break;
4652
case 'Completed':
47-
return 'bg-green-500';
53+
bgColor = 'bg-green-500';
54+
borderColor = 'border-green-700';
55+
break;
4856
case 'On Hold':
49-
return 'bg-red-500';
57+
bgColor = 'bg-red-500';
58+
borderColor = 'border-red-700';
59+
break;
5060
default:
51-
return 'bg-gray-500';
61+
bgColor = 'bg-gray-500';
62+
borderColor = 'border-gray-700';
5263
}
64+
return `${bgColor} ${borderColor}`;
5365
};
5466

55-
const getPriorityColor = (priority) => {
67+
const getPriorityClasses = (priority) => {
68+
let textColor = '';
69+
let borderColor = '';
5670
switch (priority) {
5771
case 'High':
58-
return 'text-red-400';
72+
textColor = 'text-red-400';
73+
borderColor = 'border-red-700';
74+
break;
5975
case 'Medium':
60-
return 'text-yellow-400';
76+
textColor = 'text-yellow-400';
77+
borderColor = 'border-yellow-700';
78+
break;
6179
case 'Low':
62-
return 'text-green-400';
80+
textColor = 'text-green-400';
81+
borderColor = 'border-green-700';
82+
break;
6383
default:
64-
return 'text-gray-400';
84+
textColor = 'text-gray-400';
85+
borderColor = 'border-gray-700';
6586
}
87+
return `${textColor} ${borderColor}`;
88+
};
89+
90+
const getOnlyBgStatusColor = (status) => {
91+
const classes = getStatusClasses(status);
92+
return classes.split(' ')[0]; // Returns only the bgColor class (e.g., "bg-blue-500")
6693
};
6794

6895
const RoadmapView = () => {
@@ -85,7 +112,7 @@ const RoadmapViewerPage = () => {
85112
className={`text-lg font-mono tracking-wider mb-4 flex items-center gap-2 text-white`}
86113
>
87114
<span
88-
className={`w-3 h-3 rounded-full ${getStatusColor(status)}`}
115+
className={`w-3 h-3 rounded-full ${getOnlyBgStatusColor(status)}`}
89116
></span>
90117
{status} ({groupedApps[status]?.length || 0})
91118
</h3>
@@ -164,53 +191,53 @@ const RoadmapViewerPage = () => {
164191
/>
165192
</div>
166193
<table className="min-w-full divide-y divide-gray-700 text-white">
167-
<thead>
194+
<thead className="bg-gray-800/60 border-b border-gray-700">
168195
<tr>
169196
<th
170197
scope="col"
171-
className="px-6 py-3 text-left text-sm font-mono text-gray-400 uppercase tracking-wide cursor-pointer hover:text-white transition-colors"
198+
className="px-6 py-3 text-left text-sm font-mono font-bold text-gray-400 uppercase tracking-wide cursor-pointer hover:text-white transition-colors"
172199
onClick={() => handleSort('title')}
173200
>
174201
Title {renderSortArrow('title')}
175202
</th>
176203
<th
177204
scope="col"
178-
className="px-6 py-3 text-left text-sm font-mono text-gray-400 uppercase tracking-wide"
205+
className="px-6 py-3 text-left text-sm font-mono font-bold text-gray-400 uppercase tracking-wide"
179206
>
180207
Description
181208
</th>
182209
<th
183210
scope="col"
184-
className="px-6 py-3 text-left text-sm font-mono text-gray-400 uppercase tracking-wide cursor-pointer hover:text-white transition-colors"
211+
className="px-6 py-3 text-left text-sm font-mono font-bold text-gray-400 uppercase tracking-wide cursor-pointer hover:text-white transition-colors"
185212
onClick={() => handleSort('status')}
186213
>
187214
Status {renderSortArrow('status')}
188215
</th>
189216
<th
190217
scope="col"
191-
className="px-6 py-3 text-left text-sm font-mono text-gray-400 uppercase tracking-wide cursor-pointer hover:text-white transition-colors"
218+
className="px-6 py-3 text-left text-sm font-mono font-bold text-gray-400 uppercase tracking-wide cursor-pointer hover:text-white transition-colors"
192219
onClick={() => handleSort('priority')}
193220
>
194221
Priority {renderSortArrow('priority')}
195222
</th>
196223
<th
197224
scope="col"
198-
className="px-6 py-3 text-left text-sm font-mono text-gray-400 uppercase tracking-wide cursor-pointer hover:text-white transition-colors"
225+
className="px-6 py-3 text-left text-sm font-mono font-bold text-gray-400 uppercase tracking-wide cursor-pointer hover:text-white transition-colors"
199226
onClick={() => handleSort('created_at')}
200227
>
201228
Created At {renderSortArrow('created_at')}
202229
</th>
203230
<th
204231
scope="col"
205-
className="px-6 py-3 text-left text-sm font-mono text-gray-400 uppercase tracking-wide"
232+
className="px-6 py-3 text-left text-sm font-mono font-bold text-gray-400 uppercase tracking-wide"
206233
>
207234
Notes
208235
</th>
209236
</tr>
210237
</thead>
211238
<tbody className="divide-y divide-gray-700">
212-
{sortedApps.map((app) => (
213-
<tr key={app.id} className="group hover:bg-gray-800/50 transition-colors">
239+
{sortedApps.map((app, index) => (
240+
<tr key={app.id} className={`group hover:bg-indigo-500/20 transition-colors ${index % 2 === 0 ? 'bg-gray-900/40' : 'bg-gray-800/40'}`}>
214241
<td className="px-6 py-4 whitespace-nowrap text-sm font-mono font-medium text-white">
215242
<Link to={`/roadmap/${app.id}`} className="hover:underline text-purple-400">
216243
{app.title}
@@ -219,16 +246,16 @@ const RoadmapViewerPage = () => {
219246
<td className="px-6 py-4 text-sm font-mono text-gray-400">
220247
{app.description}
221248
</td>
222-
<td className="px-6 py-4 whitespace-nowrap text-sm">
249+
<td className="px-6 py-4 whitespace-nowrap">
223250
<span
224-
className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${getStatusColor(app.status || 'Planned')} text-white`}
251+
className={`px-2 py-0 inline-flex text-xs font-mono font-semibold rounded-md shadow-sm border ${getStatusClasses(app.status || 'Planned')} text-white`}
225252
>
226253
{app.status || 'Planned'}
227254
</span>
228255
</td>
229-
<td className="px-6 py-4 whitespace-nowrap text-sm">
256+
<td className="px-6 py-4 whitespace-nowrap">
230257
<span
231-
className={`font-mono font-medium ${getPriorityColor(app.priority)}`}
258+
className={`px-2 py-0 inline-flex text-xs font-mono font-semibold rounded-md shadow-sm border ${getPriorityClasses(app.priority || 'Low')}`}
232259
>
233260
{app.priority || 'Low'}
234261
</span>
@@ -260,10 +287,10 @@ const RoadmapViewerPage = () => {
260287

261288
<div className="mx-auto max-w-2xl text-center mb-12">
262289
<h1 className="text-4xl md:text-5xl font-bold tracking-tighter text-white font-mono mb-4">
263-
SYSTEM_LOG <span className="text-gray-600">//</span> ROADMAP
290+
FEZZILLA <span className="text-gray-600">//</span> ROADMAP
264291
</h1>
265292
<p className="text-sm md:text-base text-gray-400 max-w-2xl mx-auto font-mono tracking-wide">
266-
[ TRACKING APPLICATION DEVELOPMENT CYCLES ]
293+
[ TRACKING PROJECT STATUS AND PROGRESS ]
267294
</p>
268295
</div>
269296

0 commit comments

Comments
 (0)