custom feature components | Jportal Docs

Attendance cards, progress rings, marks and subject cards.

Overview#

Component	Used in
`AttendanceCard`	Attendance
`CircleProgress`	Attendance
`MarksCard`	Grades
`SubjectInfoCard`	Subjects

GradeCard and InteractiveGPAChart sit beside these on the grades page.

Component architecture#

Component hierarchy#

flowchart TD
  Att["Attendance"] --> AC["AttendanceCard"]
  AC --> CP["CircleProgress"]
  AC --> Cal["Calendar"]
  AC --> Line["recharts LineChart"]
  Gr["Grades"] --> MC["MarksCard"]
  Sub["Subjects"] --> SIC["SubjectInfoCard"]

Data flow pattern#

flowchart TD
  Parent["Attendance state"] --> Props["subject selectedSubject data fetchSubjectAttendance"]
  Props --> AC
  AC --> Local["selectedDate isLoading"]
  AC --> CB["setSelectedSubject fetchSubjectAttendance"]

AttendanceCard component#

Props: subject, selectedSubject, setSelectedSubject, subjectAttendanceData, fetchSubjectAttendance.

Card view (collapsed)#

flowchart LR
  Name["displayName strip parens"] --> Meta["L T P percents"]
  Meta --> Ring["CircleProgress"]
  Ring --> Goal["Attend X or Can miss Y"]

Detail view (sheet)#

Calendar modifiers: presentSingle, absentSingle, doubles, triples, mixed gradients. Chart from processAttendanceData().

getDayStatus formats DD/MM/YYYY, filters records, returns booleans. processAttendanceData sorts, accumulates, one percentage per day.

CircleProgress component#

SVG implementation#

flowchart TD
  Circ["circumference 2 pi r"] --> Offset["offset = c - pct/100 * c"]
  Offset --> Anim["useEffect 1000ms"]
  SVG["rotate so start is 12 o'clock"] --> Stroke["stroke var(--primary)"]

Props: percentage, optional label, className.

MarksCard component#

Visual layout#

flowchart TD
  Course["name + code"] --> Exam["exam name"]
  Exam --> Bar["Progress OM/FM"]

getProgressColor: ≥80 outstanding, ≥60 good, ≥40 average, else poor.

SubjectInfoCard component#

Layout implementation#

flowchart LR
  L["name code L/T/P teachers"] --> R["credits"]

L Lecture, T Tutorial, P Practical. isAudit from grouped data.

Component integration patterns#

Props drilling pattern#

flowchart TD
  AA["AuthenticatedApp"] --> Att["Attendance"]
  Att --> Many["many AttendanceCard"]

Lazy load: click card → if no subjectAttendanceData[name] call fetchSubjectAttendance.

Responsive: max-[390px] on type and ring size.