Refactor Active and Reports components for improved layout and functionality. Adjust footer padding in Active component and update margin styles in statCard. Enhance Reports component by adding filtering options, improving student risk assessment logic, and refining the Chip component for better user interaction. Update attendance display to handle cases with no sessions and sort student statistics by risk level.

CodeWithEugene · CodeWithEugene · commit fc57c78a7264 · 2026-05-12T09:20:04.000+03:00
diff --git a/app/(lecturer)/active.tsx b/app/(lecturer)/active.tsx
@@ -236,7 +236,7 @@ export default function Active() {
         }}
       />
 
-      <View style={[styles.footer, { paddingBottom: spacing.lg + insets.bottom }]}>
+      <View style={[styles.footer, { paddingBottom: spacing.sm }]}>
         <Button title="End Session" variant="danger" onPress={() => router.push('/(lecturer)/end')} />
       </View>
     </View>
@@ -253,7 +253,7 @@ const styles = StyleSheet.create({
   liveRoom: { color: 'rgba(255,255,255,0.78)', fontSize: 13, fontWeight: '600', marginTop: 4 },
   statCard: {
     marginHorizontal: spacing.lg,
-    marginTop: -spacing.xl,
+    marginTop: spacing.md,
     backgroundColor: colors.white,
     borderRadius: radius.lg,
     padding: spacing.lg,
diff --git a/app/(lecturer)/reports.tsx b/app/(lecturer)/reports.tsx
@@ -1,10 +1,12 @@
+import { Ionicons } from '@expo/vector-icons';
 import { useFocusEffect, useRouter } from 'expo-router';
 import { useCallback, useState } from 'react';
-import { ScrollView, StyleSheet, Text, View } from 'react-native';
+import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import Svg, { Circle as SvgCircle } from 'react-native-svg';
 import { GreenHeader } from '../../src/components/GreenHeader';
-import { Body, Button, Card, Pill } from '../../src/components/UI';
-import { colors, spacing } from '../../src/theme';
+import { Body, Button, Card, Caption, Pill } from '../../src/components/UI';
+import { colors, radius, shadows, spacing } from '../../src/theme';
 import { repo } from '../../src/data/repo';
 import { AttendanceRecord, ClassUnit, Session, User } from '../../src/data/types';
 import { buildOverviewCsv, shareCsv } from '../../src/lib/export';
@@ -54,15 +56,23 @@ export default function Reports() {
     const unitIds = selectedUnit === 'all' ? units.map(u => u.id) : [selectedUnit];
     const relevantUnits = units.filter(u => unitIds.includes(u.id));
     const studentIds = Array.from(new Set(relevantUnits.flatMap(u => u.enrolledStudentIds)));
-    return studentIds.map(sid => {
-      const su = users.find(x => x.id === sid);
-      const sessIds = filteredSessions.filter(s => unitIds.includes(s.unitId)).map(s => s.id);
-      const attended = records.filter(r => r.studentId === sid && sessIds.includes(r.sessionId)).length;
-      const tot = sessIds.length;
-      const pct = tot ? Math.round((attended / tot) * 100) : 100;
-      const risk = pct >= 75 ? 'Good' : pct >= 50 ? 'At Risk' : 'Critical';
-      return { id: sid, name: su?.name ?? sid, attended, total: tot, pct, risk };
-    });
+    return studentIds
+      .map(sid => {
+        const su = users.find(x => x.id === sid);
+        const sessIds = filteredSessions.filter(s => unitIds.includes(s.unitId)).map(s => s.id);
+        const attended = records.filter(r => r.studentId === sid && sessIds.includes(r.sessionId)).length;
+        const tot = sessIds.length;
+        const pct = tot ? Math.round((attended / tot) * 100) : 0;
+        const risk: 'Good' | 'At Risk' | 'Critical' | 'No data' =
+          tot === 0 ? 'No data' : pct >= 75 ? 'Good' : pct >= 50 ? 'At Risk' : 'Critical';
+        return { id: sid, name: su?.name ?? sid, attended, total: tot, pct, risk };
+      })
+      .sort((a, b) => {
+        // Critical first, then At Risk, then Good, then No data; within group by lowest pct
+        const order = { Critical: 0, 'At Risk': 1, Good: 2, 'No data': 3 } as const;
+        if (order[a.risk] !== order[b.risk]) return order[a.risk] - order[b.risk];
+        return a.pct - b.pct;
+      });
   })();
 
   const scrollPadBottom = spacing.lg + Math.max(insets.bottom, 12) + 56;
@@ -71,12 +81,30 @@ export default function Reports() {
     <View style={{ flex: 1, backgroundColor: colors.bgCanvas }}>
       <GreenHeader title="Reports" centered />
       <ScrollView contentContainerStyle={{ padding: spacing.lg, paddingBottom: scrollPadBottom, gap: 14 }}>
-        <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 6 }}>
-          <Chip label="All" active={selectedUnit === 'all'} onPress={() => setSelectedUnit('all')} />
+        <Caption style={{ marginBottom: -6 }}>FILTER BY CLASS</Caption>
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={{ gap: 8, paddingVertical: 2 }}
+        >
+          <Chip
+            icon="apps"
+            label="All classes"
+            sub={`${units.length} ${units.length === 1 ? 'class' : 'classes'}`}
+            active={selectedUnit === 'all'}
+            onPress={() => setSelectedUnit('all')}
+          />
           {units.map(u => (
-            <Chip key={u.id} label={u.code} active={selectedUnit === u.id} onPress={() => setSelectedUnit(u.id)} />
+            <Chip
+              key={u.id}
+              icon="book"
+              label={u.code}
+              sub={u.name}
+              active={selectedUnit === u.id}
+              onPress={() => setSelectedUnit(u.id)}
+            />
           ))}
-        </View>
+        </ScrollView>
 
         <Card>
           <Text style={{ fontWeight: '700' }}>Per-session attendance</Text>
@@ -111,18 +139,32 @@ export default function Reports() {
 
         <Card>
           <Text style={{ fontWeight: '700', marginBottom: 8 }}>Students</Text>
-          {studentStats.map(s => (
-            <View key={s.id} style={styles.row}>
-              <View style={{ flex: 1 }}>
-                <Text style={{ fontWeight: '600' }}>{s.name}</Text>
-                <Body muted>{s.id} • {s.attended}/{s.total} • {s.pct}%</Body>
+          {studentStats.length === 0 ? (
+            <Body muted>No students enrolled for this filter.</Body>
+          ) : (
+            studentStats.map(s => (
+              <View key={s.id} style={styles.row}>
+                <View style={{ flex: 1 }}>
+                  <Text style={{ fontWeight: '600' }} numberOfLines={1}>{s.name}</Text>
+                  <Body muted>
+                    {s.id} • {s.total === 0 ? 'no sessions yet' : `${s.attended}/${s.total} · ${s.pct}%`}
+                  </Body>
+                </View>
+                <Pill
+                  label={s.risk}
+                  tone={
+                    s.risk === 'Good'
+                      ? 'success'
+                      : s.risk === 'At Risk'
+                        ? 'warn'
+                        : s.risk === 'Critical'
+                          ? 'danger'
+                          : 'neutral'
+                  }
+                />
               </View>
-              <Pill
-                label={s.risk}
-                tone={s.risk === 'Good' ? 'success' : s.risk === 'At Risk' ? 'warn' : 'danger'}
-              />
-            </View>
-          ))}
+            ))
+          )}
         </Card>
 
         <Button
@@ -158,18 +200,47 @@ export default function Reports() {
   );
 }
 
-function Chip({ label, active, onPress }: any) {
+function Chip({
+  label,
+  sub,
+  icon,
+  active,
+  onPress,
+}: {
+  label: string;
+  sub?: string;
+  icon?: keyof typeof Ionicons.glyphMap;
+  active?: boolean;
+  onPress: () => void;
+}) {
   return (
-    <Text
+    <Pressable
       onPress={onPress}
-      style={{
-        paddingHorizontal: 12, paddingVertical: 6, borderRadius: 999,
-        backgroundColor: active ? colors.gold : colors.bgSubtle,
-        color: active ? '#fff' : colors.text, fontWeight: '600', overflow: 'hidden',
-      }}
+      hitSlop={6}
+      style={({ pressed }) => [
+        styles.chip,
+        active && styles.chipActive,
+        !active && shadows.xs,
+        { opacity: pressed ? 0.85 : 1, transform: [{ scale: pressed ? 0.98 : 1 }] },
+      ]}
     >
-      {label}
-    </Text>
+      {icon ? (
+        <Ionicons
+          name={icon}
+          size={14}
+          color={active ? colors.white : colors.green}
+          style={{ marginRight: 6 }}
+        />
+      ) : null}
+      <View>
+        <Text style={[styles.chipLabel, active && styles.chipLabelActive]}>{label}</Text>
+        {sub ? (
+          <Text style={[styles.chipSub, active && styles.chipSubActive]} numberOfLines={1}>
+            {sub}
+          </Text>
+        ) : null}
+      </View>
+    </Pressable>
   );
 }
 
@@ -183,24 +254,63 @@ function LegendDot({ color, label }: any) {
 }
 
 function Donut({ percent }: { percent: number }) {
-  const size = 100;
-  const r = size / 2 - 10;
-  const p = Math.round(percent * 100);
+  const size = 110;
+  const stroke = 12;
+  const p = Math.max(0, Math.min(1, percent));
+  const pct = Math.round(p * 100);
+  const r = (size - stroke) / 2;
+  const c = 2 * Math.PI * r;
   return (
-    <View style={{ width: size, height: size, borderRadius: size / 2, borderWidth: 10, borderColor: colors.red, alignItems: 'center', justifyContent: 'center', overflow: 'hidden' }}>
-      <View style={{
-        position: 'absolute', top: -5, left: -5, width: size, height: size, borderRadius: size / 2,
-        borderWidth: 10, borderColor: colors.green,
-        borderRightColor: percent > 0.25 ? colors.green : 'transparent',
-        borderBottomColor: percent > 0.5 ? colors.green : 'transparent',
-        borderLeftColor: percent > 0.75 ? colors.green : 'transparent',
-        transform: [{ rotate: `${percent * 360}deg` }],
-      }} />
-      <Text style={{ fontSize: 20, fontWeight: '800', color: colors.green }}>{p}%</Text>
+    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
+      <Svg width={size} height={size}>
+        {/* Background ring */}
+        <SvgCircle
+          cx={size / 2}
+          cy={size / 2}
+          r={r}
+          stroke={colors.red}
+          strokeWidth={stroke}
+          fill="none"
+        />
+        {/* Foreground arc — rotate -90° to start at 12 o'clock */}
+        <SvgCircle
+          cx={size / 2}
+          cy={size / 2}
+          r={r}
+          stroke={colors.green}
+          strokeWidth={stroke}
+          fill="none"
+          strokeDasharray={`${c * p} ${c}`}
+          strokeLinecap="round"
+          transform={`rotate(-90 ${size / 2} ${size / 2})`}
+        />
+      </Svg>
+      <Text style={{ position: 'absolute', fontSize: 20, fontWeight: '800', color: colors.green }}>
+        {pct}%
+      </Text>
     </View>
   );
 }
 
 const styles = StyleSheet.create({
-  row: { flexDirection: 'row', alignItems: 'center', paddingVertical: 10, borderBottomWidth: 1, borderBottomColor: colors.border },
+  row: { flexDirection: 'row', alignItems: 'center', paddingVertical: 10, borderBottomWidth: 1, borderBottomColor: colors.border, gap: spacing.md },
+  chip: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    borderRadius: radius.md,
+    backgroundColor: colors.white,
+    borderWidth: 1,
+    borderColor: colors.border,
+    minWidth: 110,
+  },
+  chipActive: {
+    backgroundColor: colors.green,
+    borderColor: colors.green,
+  },
+  chipLabel: { fontWeight: '800', fontSize: 13, color: colors.text, letterSpacing: 0.2 },
+  chipLabelActive: { color: colors.white },
+  chipSub: { fontSize: 11, color: colors.textMuted, marginTop: 1, maxWidth: 160 },
+  chipSubActive: { color: 'rgba(255,255,255,0.85)' },
 });
