rikkei_simple_care/walkthrough.md

Walkthrough - Attendance Local Approval, Modal Redesign & Native HTTP MJPEG Streaming

We have successfully updated the leave requests approval logic to operate locally, redesigned the attendance panel into a spacious full-height modal, and implemented a high-performance native HTTP MJPEG streaming architecture based on raia_v3.

Changes Made

1. Backend Implementation

Leave Approvals & Redesign

• Model Addition (models.go):
  • Defined LocalLeaveRequest to keep track of approvals and rejections locally inside Simple Care database.
• Database Migration (db.go):
  • Registered LocalLeaveRequest model for Gorm AutoMigrate.
• Approval Logic (handlers_attendance.go):
  • Modified UpdateLeaveStatusHandler to store status overrides directly to the local database, completely bypassing the external qldtClient.UpdateLeaveStatus API call.
• Leave Query status overriding (handlers_attendance.go):
  • Modified GetLeaveRequestsHandler to intercept the QLDT API list response and override the status field of leave requests with the stored local database values before returning it to the frontend.

High-Performance HTTP MJPEG Streaming

• HTTP MJPEG Endpoint Support (websocket.go):
  • Added RegisterHttpSubscriber and UnregisterHttpSubscriber methods to WsHub to manage active HTTP streaming connections dynamically.
  • Implemented GetStudentScreenStreamHandler and GetStudentWebcamStreamHandler Fiber controllers.
  • Upon receiving streaming frames over the WebSocket connection from a student, the server decodes the base64 JPEGs to raw binary JPEGs and feeds them directly to the corresponding HTTP MJPEG channels.
  • Automatically triggers the student's screenshot/webcam capture stream when an HTTP connection is established, and stops it when all subscribers disconnect, saving huge amounts of client CPU and network bandwidth.
• Unified Query Parameter Auth (staff.go):
  • Updated RequireStaff() middleware to accept the JWT token from the query parameter ?token=... if no Authorization header is present. This allows standard <img> tags to securely request stream data.
• Stream Routing (main.go):
  • Registered routes /api/students/:studentId/stream/screen and /api/students/:studentId/stream/webcam under the authenticated staff router.

---

2. Frontend UI / UX Redesign

Modal wrapper for Attendance

• Modal layout (AttendancePanel.tsx):
  • Redesigned the main container of <AttendancePanel> to be a full-screen backdrop modal (.attendance-modal-overlay and .attendance-modal-container) with a top header containing a close button (×).
• Modal Dismiss callback (ClassWorkspace.tsx):
  • Configured onClose callback on the <AttendancePanel> to automatically navigate the teacher back to the roster tab ('roster') when they dismiss the modal.
• Leave Modal Notices (AttendancePanel.tsx):
  • Added a clear alert notice informing teachers that approving or rejecting a leave request records the action locally inside Simple Care only and does not sync back to the QLDT portal. Approving will mark the student's status to "Nghỉ có phép".
• Responsive CSS Styles (index.css):
  • Implemented .attendance-modal-overlay, .attendance-modal-container, and .attendance-modal-body CSS styles. The container utilizes width: 98vw !important and height: 96vh !important to provide a spacious UI layout with full scroll support, avoiding squeezed tables on small screens and low-height devices.
• Exam Violations Notice (ViolationsPanel.tsx):
  • Added an amber warning notice label in the violations list tab specifically during exam mode (props.mode === 'exam') stating: "Lưu ý: Chức năng theo dõi vi phạm đang được theo dõi đánh giá tính chuẩn xác, hiện tại kết quả chạy thử chỉ mang tính chất tham khảo."

Native Stream Rendering (MJPEG)

• StudentStreamImage Component (StudentStreamImage.tsx):
  • Created a reusable component that binds directly to the HTTP stream.
  • Automatically manages connection establishment, listens to error states (e.g. when a student is offline or stream is dropped), and retries the connection after a small delay.
• Stream Panel Integration (ProctorStreamPanels.tsx):
  • Rewrote the panel component to render screens and webcams using <StudentStreamImage>.
  • Completely removed all complex WebSocket subscription state management, subscriptions, and connection setups from the component, eliminating lag, thread blocks, and frontend JSON parsing overhead.
• Grid View Integration (ExamGridProctor.tsx):
  • Simplified the grid view by using <StudentStreamImage> for both card frames and the zoomed modal.
  • Bypassed WebSocket connections completely for grid monitoring, reducing frontend CPU load and rendering overhead to zero.

---

Verification Results

Backend Compile Check

• Built Go code successfully:

  go build -o server_test.exe main.go
  

  Backend compiles cleanly without errors.

Frontend Build Check

• Ran Vite production compilation:

  npx tsc --noEmit
  

  Frontend builds and type-checks successfully with all TS checks passing.