source: src/app/students/subjects/page.tsx@ 2d635ae

Last change on this file since 2d635ae was 2d635ae, checked in by stefansaveski <stefansaveski19@…>, 11 months ago

fix: Update total display color to white for better visibility in SubjectsPage
  • Property mode set to 100644
File size: 13.4 KB
Line 
1"use client"
2
3import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
4import {
5 faBook,
6 faChevronDown,
7 faInfoCircle,
8 faMoneyBillWave,
9 faCreditCard,
10 faFileInvoice,
11 faGraduationCap
12} from '@fortawesome/free-solid-svg-icons';
13import { useState } from 'react';
14import subjectsData from '@/data/subjects.json';
15
16interface TableCellProps {
17 children: React.ReactNode;
18 className?: string;
19}
20
21const TableCell = ({ children, className = "" }: TableCellProps) => (
22 <td className={`px-4 py-3 text-sm border-b border-gray-200 ${className}`}>
23 {children}
24 </td>
25);
26
27const StatusBadge = ({ status }: { status: string }) => {
28 const baseClasses = "px-3 py-1 rounded-md text-xs font-medium";
29
30 if (status === "Зад.") {
31 return (
32 <span className={`${baseClasses} bg-blue-100 text-blue-800`}>
33 {status}
34 </span>
35 );
36 } else if (status === "Изб.") {
37 return (
38 <span className={`${baseClasses} bg-green-100 text-green-800`}>
39 {status}
40 </span>
41 );
42 }
43
44 return (
45 <span className={`${baseClasses} bg-gray-100 text-gray-800`}>
46 {status}
47 </span>
48 );
49};
50
51export default function SubjectsPage() {
52 const [selectedSemester, setSelectedSemester] = useState(subjectsData.currentSemester.id);
53 const [isDropdownOpen, setIsDropdownOpen] = useState(false);
54
55 const currentSemesterData = subjectsData.semesters.find(s => s.id === selectedSemester) || subjectsData.currentSemester;
56 const currentSubjects = (subjectsData.subjectsBySemester as any)[selectedSemester] || [];
57 const { currentSemester } = subjectsData;
58
59 return (
60 <div className="min-h-screen pb-8">
61 {/* Header */}
62 <div className="bg-primary text-white rounded-xl p-8 mb-8">
63 <div className="flex items-center gap-4">
64 <div className="bg-white bg-opacity-20 rounded-full p-4">
65 <FontAwesomeIcon icon={faBook} className="text-3xl text-primary" />
66 </div>
67 <div>
68 <h1 className="text-3xl font-bold mb-2">Предмети</h1>
69 <p className="text-lg opacity-90">
70 Преглед на запишани предмети по семестри
71 </p>
72 </div>
73 </div>
74 </div>
75
76 {/* Status and Selection Section */}
77 <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
78
79 {/* Left Column - Status and Dropdown */}
80 <div className="lg:col-span-1 space-y-6">
81
82 {/* Status Card */}
83 <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
84 <div className="text-sm text-gray-600 mb-2">
85 Статус: <span className="text-primary font-semibold">Запишан од студент</span>
86 </div>
87 <div className="text-sm text-gray-600">
88 Број на тикет: <span className="font-semibold">{currentSemester.ticketNumber}</span>
89 </div>
90 </div>
91
92 {/* Semester Selection */}
93 <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
94 <div className="text-sm text-gray-600 mb-2">
95 Долг од документи: <span className="font-semibold">{currentSemester.debt}</span>
96 </div>
97
98 <div className="relative mt-4">
99 <label className="block text-sm font-medium text-gray-700 mb-2">
100 Избери семестар:
101 </label>
102 <div className="relative">
103 <button
104 onClick={() => setIsDropdownOpen(!isDropdownOpen)}
105 className="w-full bg-white border border-gray-300 rounded-lg px-4 py-3 text-left focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary"
106 >
107 <div className="flex items-center justify-between">
108 <span className="text-sm font-medium text-primary">
109 {currentSemesterData.name}
110 </span>
111 <FontAwesomeIcon
112 icon={faChevronDown}
113 className={`w-4 h-4 text-gray-400 transition-transform ${isDropdownOpen ? 'rotate-180' : ''}`}
114 />
115 </div>
116 </button>
117
118 {isDropdownOpen && (
119 <div className="absolute z-10 w-full mt-1 bg-white border border-gray-200 rounded-lg shadow-lg">
120 {subjectsData.semesters.map((semester) => (
121 <button
122 key={semester.id}
123 onClick={() => {
124 setSelectedSemester(semester.id);
125 setIsDropdownOpen(false);
126 }}
127 className="w-full px-4 py-3 text-left text-sm hover:bg-gray-50 focus:outline-none focus:bg-gray-50 first:rounded-t-lg last:rounded-b-lg"
128 >
129 <div className="font-medium text-gray-900">{semester.name}</div>
130 <div className="text-xs text-gray-500">Статус: {semester.status}</div>
131 </button>
132 ))}
133 </div>
134 )}
135 </div>
136 </div>
137
138 <div className="mt-4 text-sm">
139 <div className="text-primary font-medium">
140 Сериски број: {currentSemesterData.serviceNumber}
141 </div>
142 </div>
143 </div>
144
145 {/* Enrolled Subjects */}
146 <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
147 <h3 className="font-semibold text-gray-900 mb-3 flex items-center gap-2">
148 <FontAwesomeIcon icon={faBook} className="w-4 h-4 text-primary" />
149 Запишани предмети
150 </h3>
151 <div className="text-3xl font-bold text-primary">
152 {currentSubjects.length}
153 </div>
154 </div>
155 </div>
156
157 {/* Right Column - Financial Information */}
158 <div className="lg:col-span-2">
159 <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
160 <div className="bg-primary text-white px-6 py-4">
161 <h2 className="text-xl font-bold flex items-center gap-2">
162 <FontAwesomeIcon icon={faFileInvoice} />
163 Финансиски информации
164 </h2>
165 </div>
166
167 <div className="p-6">
168 <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
169
170 {/* Left Financial Column */}
171 <div className="space-y-4">
172 <div className="flex justify-between items-center py-2 border-b border-gray-100">
173 <span className="text-gray-600">Сума:</span>
174 <span className="font-semibold text-primary">{currentSemester.financialInfo.sum}</span>
175 </div>
176 <div className="flex justify-between items-center py-2 border-b border-gray-100">
177 <span className="text-gray-600">Платено:</span>
178 <span className="font-semibold text-green-600">{currentSemester.financialInfo.paid}</span>
179 </div>
180 <div className="flex justify-between items-center py-2 border-b border-gray-100">
181 <span className="text-gray-600">Должи:</span>
182 <span className="font-semibold text-red-600">{currentSemester.financialInfo.due}</span>
183 </div>
184 <div className="mt-4 p-4 bg-blue-50 rounded-lg">
185 <div className="text-sm font-medium text-blue-800 mb-1">Материјални трошоци:</div>
186 <div className="text-sm text-blue-700">{currentSemester.financialInfo.materialCosts}</div>
187 </div>
188 </div>
189
190 {/* Right Financial Column */}
191 <div className="space-y-4">
192 <div className="flex justify-between items-center py-2 border-b border-gray-100">
193 <span className="text-gray-600">Кредити:</span>
194 <span className="font-semibold text-primary">{currentSemester.financialInfo.credits}</span>
195 </div>
196 <div className="flex justify-between items-center py-2 border-b border-gray-100">
197 <span className="text-gray-600">МКСА:</span>
198 <span className="font-semibold">{currentSemester.financialInfo.MKSA}</span>
199 </div>
200 <div className="flex justify-between items-center py-2 border-b border-gray-100">
201 <span className="text-gray-600">Електронско запишување:</span>
202 <span className="font-semibold">{currentSemester.financialInfo.electronicRegistration}</span>
203 </div>
204 <div className="flex justify-between items-center py-2 border-b border-gray-100">
205 <span className="text-gray-600">Е-УКИМ:</span>
206 <span className="font-semibold">{currentSemester.financialInfo.eUKIM}</span>
207 </div>
208 <div className="flex justify-between items-center py-2 border-b border-gray-100">
209 <span className="text-gray-600">Банкарска провизија:</span>
210 <span className="font-semibold">{currentSemester.financialInfo.bankProvision}</span>
211 </div>
212 <div className="flex justify-between items-center py-3 border-t-2 border-primary bg-primary bg-opacity-5 rounded-lg px-4">
213 <span className="font-bold text-white">Тотал:</span>
214 <span className="font-bold text-xl text-white">{currentSemester.financialInfo.total}</span>
215 </div>
216 </div>
217 </div>
218 </div>
219 </div>
220 </div>
221 </div>
222
223 {/* Subjects Table */}
224 <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
225 <div className="bg-primary text-white px-6 py-4">
226 <h2 className="text-xl font-bold">Листа на предмети</h2>
227 </div>
228
229 <div className="overflow-x-auto">
230 <table className="w-full">
231 <thead className="bg-gray-50">
232 <tr>
233 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">#</th>
234 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Код</th>
235 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Часови</th>
236 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Кој пат</th>
237 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Предмет</th>
238 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Семестар</th>
239 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Статус</th>
240 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Потпис</th>
241 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Група</th>
242 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Професор</th>
243 </tr>
244 </thead>
245 <tbody className="divide-y divide-gray-100">
246 {currentSubjects.map((subject: any) => (
247 <tr key={subject.id} className="hover:bg-gray-50 transition-colors">
248 <TableCell className="font-medium text-gray-900">{subject.id}</TableCell>
249 <TableCell className="font-mono text-sm text-primary font-medium">{subject.code}</TableCell>
250 <TableCell className="font-medium">{subject.hours}</TableCell>
251 <TableCell className="text-center font-medium">{subject.kojPat}</TableCell>
252 <TableCell className="font-medium text-gray-900 max-w-xs">
253 <div className="flex items-center gap-2">
254 <FontAwesomeIcon icon={faBook} className="w-4 h-4 text-primary" />
255 {subject.name}
256 </div>
257 </TableCell>
258 <TableCell className="text-center font-medium text-primary">{subject.semester}</TableCell>
259 <TableCell>
260 <StatusBadge status={subject.status} />
261 </TableCell>
262 <TableCell className="text-center">
263 {subject.signature || (
264 <span className="text-gray-400">—</span>
265 )}
266 </TableCell>
267 <TableCell className="text-center">
268 {subject.group || (
269 <span className="text-gray-400">—</span>
270 )}
271 </TableCell>
272 <TableCell>
273 {subject.professor || (
274 <span className="text-gray-400">—</span>
275 )}
276 </TableCell>
277 </tr>
278 ))}
279 </tbody>
280 </table>
281 </div>
282 </div>
283 </div>
284 );
285}
Note: See TracBrowser for help on using the repository browser.