devops/encoach_backend_new_v2
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

feat(frontend): Phase 2/3 hardening release

Browse Source 
Roadmap P0
- Ship /logo.svg fallback and rewire asset references (superseded later by
  the project-manager PNG in a separate commit).

Roadmap P1
- Response envelope alignment ({items,total,page,size}) across services
  and query hooks.
- Approval/ticket UX updates tied to the new backend rollback semantics.

Roadmap P2
- React.lazy + Vite manualChunks to split vendor-radix/charts/icons/forms
  from the main bundle and cut initial JS.
- Fix the 181 tsc errors (PaginationParams class + per-service generics).
- Auto-refresh flow for JWT refresh tokens wired into api-client.ts.

Roadmap P3
- i18n: i18next + language detector, en/ar locales, RTL auto-switch,
  LanguageToggle component in RoleLayout and AdminLmsLayout.
- GDPR: PrivacyCenter page for data export and right-to-erasure, backed
  by gdpr.service.ts; logout via AuthContext after erasure.
- Human-in-the-loop exam review UI: admin ExamReviewQueue + ExamReviewDetail
  pages, useExamReview hooks, exam-review.service.ts.
- AI quality loop: AIPromptEditor (versioning + render preview),
  AIFeedbackButtons for students, AIFeedbackTriage admin page, dedicated
  services, hooks, and types.
- Dark mode: ThemeProvider + ThemeToggle + chart color tokens.
- Accessibility: DialogDescription on every DialogContent; alert-dialog
  and sheet updates.
- Retire dead pages: ExamPage marketing, Index, ProfilePage import.
- Playwright e2e scaffolding: playwright.config.ts + e2e/login.spec.ts
  smoke tests, npm scripts test:e2e / test:e2e:install.

Made-with: Cursor
This commit is contained in:
Yamen Ahmad
2026-04-19 14:16:32 +04:00
parent dcf5ea6941
commit e70a2854f4
75 changed files with 3727 additions and 551 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/pages/student/AiIeltsCourse.tsx
View File

@@ -166,7 +166,7 @@ export default function AiIeltsCourse() {
const band = Number(targetBand || course?.target_level || 7);
createIelts.mutate(
{
skill: skillsRanked[0]?.skill ?? "writing",
skill: (skillsRanked[0]?.skill ?? "writing") as "reading" | "listening" | "writing" | "speaking",
target_band: Number.isFinite(band) ? band : 7,
},
{

2
frontend/src/pages/student/ExamResults.tsx
View File

@@ -78,7 +78,7 @@ export default function ExamResults() {
const { data: results, isLoading, isError } = useQuery<ExamResultsData>({
queryKey: ["exam-results", examId],
queryFn: () => examSessionService.getResults(Number(examId)),
queryFn: () => examSessionService.getResults<ExamResultsData>(Number(examId)),
enabled: !!examId,
});

2
frontend/src/pages/student/StudentAttendance.tsx
View File

@@ -61,7 +61,7 @@ export default function StudentAttendance() {
{attendanceRecords.map(a => (
<TableRow key={a.id}>
<TableCell>{a.date}</TableCell>
<TableCell>{a.courseName}</TableCell>
<TableCell>{a.course_name}</TableCell>
<TableCell><Badge variant={badgeVariant(a.status)} className="capitalize">{a.status}</Badge></TableCell>
</TableRow>
))}

2
frontend/src/pages/student/StudentDiscussionBoard.tsx
View File

@@ -77,7 +77,7 @@ export default function StudentDiscussionBoard() {
const [newTitle, setNewTitle] = useState("");
const [newContent, setNewContent] = useState("");
const posts = postsData?.results ?? [];
const posts = postsData?.items ?? [];
const handleCreatePost = () => {
if (!selectedBoardId) return;

14
frontend/src/pages/student/StudentGrades.tsx
View File

@@ -11,15 +11,15 @@ export default function StudentGrades() {
if (isLoading) return <div className="flex items-center justify-center min-h-[400px]"><div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary" /></div>;
const avgGrade = gradeRecords.length
? (gradeRecords.reduce((sum, g) => sum + (g.grade / g.maxGrade) * 100, 0) / gradeRecords.length).toFixed(1)
? (gradeRecords.reduce((sum, g) => sum + (g.grade / g.max_grade) * 100, 0) / gradeRecords.length).toFixed(1)
: "0";
const highest = gradeRecords.length
? Math.max(...gradeRecords.map(g => (g.grade / g.maxGrade) * 100)).toFixed(1)
? Math.max(...gradeRecords.map(g => (g.grade / g.max_grade) * 100)).toFixed(1)
: "0";
const chartData = gradeRecords.map(g => ({
name: g.assignmentTitle.length > 15 ? g.assignmentTitle.slice(0, 15) + "…" : g.assignmentTitle,
grade: Math.round((g.grade / g.maxGrade) * 100),
name: g.assignment_title.length > 15 ? g.assignment_title.slice(0, 15) + "…" : g.assignment_title,
grade: Math.round((g.grade / g.max_grade) * 100),
}));
return (
@@ -69,11 +69,11 @@ export default function StudentGrades() {
<TableBody>
{gradeRecords.map(g => (
<TableRow key={g.id}>
<TableCell className="font-medium">{g.assignmentTitle}</TableCell>
<TableCell>{g.courseName}</TableCell>
<TableCell className="font-medium">{g.assignment_title}</TableCell>
<TableCell>{g.course_name}</TableCell>
<TableCell><Badge variant="outline" className="text-xs capitalize">{g.type}</Badge></TableCell>
<TableCell>{g.date}</TableCell>
<TableCell className="text-right font-bold">{g.grade}/{g.maxGrade}</TableCell>
<TableCell className="text-right font-bold">{g.grade}/{g.max_grade}</TableCell>
<TableCell><AiGradeExplainer studentName="Sarah Johnson" /></TableCell>
</TableRow>
))}

4
frontend/src/pages/student/StudentMessages.tsx
View File

@@ -23,8 +23,8 @@ export default function StudentMessages() {
const { data: unreadData } = useUnreadMessageCount();
const sendMessage = useSendMessage();
const inbox = inboxData?.results ?? [];
const sent = sentData?.results ?? [];
const inbox = inboxData?.items ?? [];
const sent = sentData?.items ?? [];
const unreadCount = unreadData?.count ?? 0;
const [showCompose, setShowCompose] = useState(false);

18
frontend/src/pages/student/StudentTimetable.tsx
View File

@@ -8,21 +8,21 @@ export default function StudentTimetable() {
const { data: timetableSessions = [], isLoading } = useTimetable();
if (isLoading) return <div className="flex items-center justify-center min-h-[400px]"><div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary" /></div>;
const mySessions = timetableSessions.filter(s => ["c1", "c2", "c5", "c8"].includes(s.courseId));
const mySessions = timetableSessions.filter(s => ["c1", "c2", "c5", "c8"].includes(String(s.course_id)));
function getSessionAt(day: string, hour: string) {
return mySessions.find(s => s.day === day && s.startTime <= hour && s.endTime > hour);
return mySessions.find(s => s.day === day && s.start_time <= hour && s.end_time > hour);
}
function isStart(day: string, hour: string) {
return mySessions.find(s => s.day === day && s.startTime === hour);
return mySessions.find(s => s.day === day && s.start_time === hour);
}
function getSpan(session: (typeof mySessions)[0]) {
const start = parseInt(session.startTime.split(":")[0]);
const end = parseInt(session.endTime.split(":")[0]);
const startMin = parseInt(session.startTime.split(":")[1]);
const endMin = parseInt(session.endTime.split(":")[1]);
const start = parseInt(session.start_time.split(":")[0]);
const end = parseInt(session.end_time.split(":")[0]);
const startMin = parseInt(session.start_time.split(":")[1]);
const endMin = parseInt(session.end_time.split(":")[1]);
return (end - start) + (endMin > 0 ? 0.5 : 0) - (startMin > 0 ? 0.5 : 0);
}
@@ -55,8 +55,8 @@ export default function StudentTimetable() {
className="rounded-md p-2 text-xs text-white"
style={{ backgroundColor: session.color, minHeight: `${getSpan(session) * 48}px` }}
>
<p className="font-semibold">{session.courseName}</p>
<p className="opacity-80">{session.startTime}-{session.endTime}</p>
<p className="font-semibold">{session.course_name}</p>
<p className="opacity-80">{session.start_time}-{session.end_time}</p>
<p className="opacity-70">{session.room}</p>
</div>
);