adding attendance color codded progress

[tashifkhan]

This pull request introduces a color-coded progress indicator to the attendance card, making it easier to visually assess attendance status. The main changes implement a variant prop for the CircleProgress component, allowing the progress circle's color to reflect whether a student is on track, at risk, or in danger of falling behind.

Attendance status visualization improvements:

• Added a getProgressVariant function in AttendanceCard.jsx to determine the color variant ("danger", "warning", "primary") based on how many more classes need to be attended.
• Passed the computed variant prop from AttendanceCard.jsx to the CircleProgress component, enabling dynamic color changes.

CircleProgress component enhancements:

• Updated CircleProgress.jsx to accept a variant prop and map it to the appropriate CSS variable for stroke color, supporting "danger", "warning", and "primary" states. [1] [2]
• Changed the progress circle's stroke color to use the new getStrokeColor logic, replacing the previous static color.

[tashifkhan]