3 and 4 completed

apps/mobile/src/app/(tabs)/attendance.tsx

@@ -12,6 +12,7 @@ import { useAuth } from "@clerk/clerk-expo";
 import { LinearGradient } from "expo-linear-gradient";
 import { Ionicons } from "@expo/vector-icons";
 import { attendanceApi, Attendance } from "../../api/attendance";
+import { AttendanceCalendar } from "../../components/AttendanceCalendar";
 import { theme } from "../../styles/theme";
 import { Animated } from "react-native";
 import { getErrorMessage } from "../../utils/error-helpers";
@@ -186,6 +187,9 @@ export default function AttendanceScreen() {
         )}
       </View>
 
+      {/* Attendance Calendar */}
+      {history.length > 0 && <AttendanceCalendar attendanceRecords={history} />}
+
       <Text style={styles.sectionTitle}>Recent History</Text>
       {history.map((item) => (
         <LinearGradient