@ubkinfotech/tecaher-erp 0.1.0

package/lib/module/modules/attendance/screens/AttendanceScreen.js

@@ -0,0 +1,860 @@
+"use strict";
+
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { ActivityIndicator, Alert, FlatList, Modal, Pressable, SafeAreaView, StyleSheet, Switch, Text, TouchableOpacity, View } from 'react-native';
+import { useERP } from "../../../core/provider/useERP.js";
+import { EmptyState } from "../../../shared/empty-states/EmptyState.js";
+import { LoadingState } from "../../../shared/loaders/LoadingState.js";
+import { fetchAttendanceStudents, fetchTeacherClasses, fetchTeacherSections, notifyAttendance, submitAttendance } from "../services/attendanceService.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+function normalizeOptions(result) {
+  if (!result) {
+    return [];
+  }
+  if (Array.isArray(result)) {
+    return result;
+  }
+  if (Array.isArray(result?.data)) {
+    return result.data;
+  }
+  if (Array.isArray(result?.data?.data)) {
+    return result.data.data;
+  }
+  return [];
+}
+function normalizeAttendancePayload(result) {
+  if (!result) {
+    return null;
+  }
+  const raw = result?.data ?? result;
+  if (raw && typeof raw === 'object' && !Array.isArray(raw)) {
+    return raw;
+  }
+  return null;
+}
+function normalizeStudents(payload, mode) {
+  const list = Array.isArray(payload?.student) ? payload.student : [];
+  return list.map(item => {
+    const value = item?.attendence_type_id;
+    let next = value;
+    if (mode === 'take') {
+      next = value === null ? '4' : value !== undefined && value !== '' ? String(value) : '1';
+    } else {
+      next = value ? String(value) : '4';
+    }
+    return {
+      ...item,
+      attendence_type_id: next
+    };
+  });
+}
+function presentCountFromPayload(payload, students) {
+  const rawPresent = payload?.total?.[0]?.present;
+  if (rawPresent !== undefined && rawPresent !== null && rawPresent !== '') {
+    const value = Number(rawPresent);
+    if (Number.isFinite(value)) {
+      return value;
+    }
+  }
+  return students.filter(item => String(item?.attendence_type_id ?? '') === '1').length;
+}
+function formatDisplayDate(date) {
+  const parts = String(date ?? '').split('-');
+  if (parts.length !== 3) {
+    return date;
+  }
+  const [year, month, day] = parts;
+  const d = new Date(Number(year), Number(month) - 1, Number(day));
+  if (Number.isNaN(d.getTime())) {
+    return date;
+  }
+  return d.toLocaleDateString('en-US', {
+    day: '2-digit',
+    month: 'short',
+    year: 'numeric'
+  });
+}
+function todayYmd() {
+  const d = new Date();
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, '0');
+  const day = String(d.getDate()).padStart(2, '0');
+  return `${y}-${m}-${day}`;
+}
+function tryGetCalendar() {
+  try {
+    const mod = require('react-native-calendars');
+    return mod?.Calendar ?? mod?.default ?? mod;
+  } catch {
+    return null;
+  }
+}
+function SelectModal({
+  label,
+  value,
+  options,
+  placeholder,
+  onChange
+}) {
+  const [open, setOpen] = useState(false);
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.field,
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: styles.label,
+      children: label
+    }), /*#__PURE__*/_jsx(Pressable, {
+      onPress: () => setOpen(true),
+      style: styles.select,
+      children: /*#__PURE__*/_jsx(Text, {
+        style: styles.selectText,
+        children: value?.label ?? placeholder
+      })
+    }), /*#__PURE__*/_jsx(Modal, {
+      visible: open,
+      transparent: true,
+      animationType: "fade",
+      children: /*#__PURE__*/_jsx(Pressable, {
+        style: styles.modalOverlay,
+        onPress: () => setOpen(false),
+        children: /*#__PURE__*/_jsxs(Pressable, {
+          style: styles.modalCard,
+          onPress: () => {},
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.modalTitle,
+            children: label
+          }), /*#__PURE__*/_jsx(FlatList, {
+            data: options,
+            keyExtractor: (item, index) => `${item.value}-${index}`,
+            renderItem: ({
+              item
+            }) => /*#__PURE__*/_jsx(Pressable, {
+              style: styles.optionRow,
+              onPress: () => {
+                onChange(item);
+                setOpen(false);
+              },
+              children: /*#__PURE__*/_jsx(Text, {
+                style: styles.optionText,
+                children: item.label
+              })
+            }),
+            ListEmptyComponent: /*#__PURE__*/_jsx(Text, {
+              style: styles.optionEmpty,
+              children: "No options"
+            })
+          })]
+        })
+      })
+    })]
+  });
+}
+export function AttendanceScreen(props) {
+  const {
+    api
+  } = useERP();
+  const Calendar = useMemo(() => tryGetCalendar(), []);
+  const [mode, setMode] = useState('take');
+  const [classes, setClasses] = useState([]);
+  const [sections, setSections] = useState([]);
+  const [selectedClass, setSelectedClass] = useState(null);
+  const [selectedSection, setSelectedSection] = useState(null);
+  const [date, setDate] = useState(props.date ?? todayYmd());
+  const [calendarOpen, setCalendarOpen] = useState(false);
+  const [loadingFilters, setLoadingFilters] = useState(true);
+  const [searching, setSearching] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const [searched, setSearched] = useState(false);
+  const [attendanceData, setAttendanceData] = useState(null);
+  const [students, setStudents] = useState([]);
+  const [present, setPresent] = useState(0);
+  const [count, setCount] = useState(0);
+  const sessionId = props.sessionId;
+  const loadClasses = useCallback(async () => {
+    setLoadingFilters(true);
+    try {
+      const res = await fetchTeacherClasses(api);
+      setClasses(normalizeOptions(res));
+    } catch (error) {
+      Alert.alert('Error', String(error?.message ?? 'Could not load classes'));
+    } finally {
+      setLoadingFilters(false);
+    }
+  }, [api]);
+  useEffect(() => {
+    loadClasses().catch(() => {});
+  }, [loadClasses]);
+  useEffect(() => {
+    if (!classes.length || selectedClass || props.classId === undefined) {
+      return;
+    }
+    const found = classes.find(item => String(item.value) === String(props.classId));
+    if (found) {
+      setSelectedClass(found);
+    }
+  }, [classes, props.classId, selectedClass]);
+  useEffect(() => {
+    if (!selectedClass?.value) {
+      setSections([]);
+      setSelectedSection(null);
+      return;
+    }
+    fetchTeacherSections(api, {
+      classId: selectedClass.value
+    }).then(res => {
+      const next = normalizeOptions(res);
+      setSections(next);
+      if (props.sectionId !== undefined) {
+        const found = next.find(item => String(item.value) === String(props.sectionId));
+        if (found) {
+          setSelectedSection(found);
+        }
+      }
+    }).catch(error => {
+      Alert.alert('Error', String(error?.message ?? 'Could not load sections'));
+    });
+  }, [api, props.sectionId, selectedClass?.value]);
+  const runSearch = useCallback(async () => {
+    if (!selectedClass?.value) {
+      Alert.alert('Error', 'Please choose class');
+      return;
+    }
+    if (!selectedSection?.value) {
+      Alert.alert('Error', 'Please choose section');
+      return;
+    }
+    if (!sessionId) {
+      Alert.alert('Error', 'Pass sessionId to AttendanceScreen');
+      return;
+    }
+    setSearched(true);
+    setSearching(true);
+    try {
+      const res = await fetchAttendanceStudents(api, {
+        classId: selectedClass.value,
+        sectionId: selectedSection.value,
+        sessionId,
+        date
+      });
+      const payload = normalizeAttendancePayload(res);
+      const list = normalizeStudents(payload, mode);
+      setAttendanceData(payload);
+      setStudents(list);
+      setCount(list.length);
+      setPresent(presentCountFromPayload(payload, list));
+      if (!payload?.student?.length && !payload?.holiday && !payload?.week_off && payload?.sunday !== 'yes') {
+        Alert.alert('Error', 'No Data Found');
+      }
+    } catch (error) {
+      Alert.alert('Error', String(error?.message ?? 'Could not load attendance'));
+      setAttendanceData(null);
+      setStudents([]);
+      setCount(0);
+      setPresent(0);
+    } finally {
+      setSearching(false);
+    }
+  }, [api, date, mode, selectedClass?.value, selectedSection?.value, sessionId]);
+  useEffect(() => {
+    if (!searched || !attendanceData) {
+      return;
+    }
+    const list = normalizeStudents(attendanceData, mode);
+    setStudents(list);
+    setCount(list.length);
+    setPresent(presentCountFromPayload(attendanceData, list));
+  }, [attendanceData, mode, searched]);
+  const onToggleStudent = useCallback((studentId, item) => {
+    if (mode !== 'take') {
+      return;
+    }
+    setStudents(prev => {
+      const next = prev.map(student => {
+        if (String(student?.id) !== String(studentId)) {
+          return student;
+        }
+        const current = String(item?.attendence_type_id ?? '');
+        return {
+          ...student,
+          attendence_type_id: current === '1' ? '4' : '1'
+        };
+      });
+      setPresent(next.filter(student => String(student?.attendence_type_id ?? '') === '1').length);
+      return next;
+    });
+  }, [mode]);
+  const submitCurrentAttendance = useCallback(async () => {
+    if (!selectedClass?.value || !selectedSection?.value) {
+      Alert.alert('Error', 'Please choose class and section');
+      return;
+    }
+    if (!students.length) {
+      Alert.alert('Error', 'No students found');
+      return;
+    }
+    const payload = {
+      attendanceData: students,
+      attendanceDate: date,
+      class_id: selectedClass.value,
+      section_id: selectedSection.value
+    };
+    setSubmitting(true);
+    try {
+      const res = await submitAttendance(api, payload);
+      const response = res;
+      if (response?.Status && response.Status !== 'Success') {
+        Alert.alert('Failed', String(response?.Message ?? response?.Status ?? 'Request failed'));
+        return;
+      }
+      Alert.alert('Success', 'Attendance given successfully');
+      try {
+        await notifyAttendance(api, payload);
+      } catch {}
+      await runSearch();
+    } catch (error) {
+      Alert.alert('Failed', String(error?.message ?? 'Could not submit attendance'));
+    } finally {
+      setSubmitting(false);
+    }
+  }, [api, date, runSearch, selectedClass?.value, selectedSection?.value, students]);
+  const renderStudent = ({
+    item
+  }) => {
+    const isPresent = String(item?.attendence_type_id ?? '') === '1';
+    return /*#__PURE__*/_jsxs(View, {
+      style: styles.studentItem,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: styles.rollCol,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.studentText,
+          children: String(item?.roll_no ?? '-')
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: mode === 'take' ? styles.nameColTake : styles.nameColView,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.studentText,
+          children: String(item?.full_name ?? 'Student')
+        })
+      }), mode === 'take' ? /*#__PURE__*/_jsx(View, {
+        style: styles.statusColTake,
+        children: /*#__PURE__*/_jsx(Switch, {
+          value: isPresent,
+          onValueChange: () => onToggleStudent(String(item?.id ?? ''), item),
+          trackColor: {
+            false: '#EF4444',
+            true: '#22C55E'
+          },
+          thumbColor: "#FFFFFF"
+        })
+      }) : /*#__PURE__*/_jsx(View, {
+        style: styles.statusColView,
+        children: /*#__PURE__*/_jsx(View, {
+          style: [styles.statusBadge, isPresent ? styles.badgePresent : styles.badgeAbsent],
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.statusBadgeText,
+            children: isPresent ? 'Present' : 'Absent'
+          })
+        })
+      })]
+    });
+  };
+  const isHoliday = !!attendanceData?.holiday;
+  const isWeeklyOff = !!attendanceData?.week_off || attendanceData?.sunday === 'yes';
+  const emptyMessage = attendanceData?.sunday === 'yes' ? 'Today is Sunday' : 'Weekly off';
+  if (loadingFilters) {
+    return /*#__PURE__*/_jsx(LoadingState, {});
+  }
+  return /*#__PURE__*/_jsxs(SafeAreaView, {
+    style: styles.root,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.header,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.headerTitle,
+        children: "Attendance"
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.modeRow,
+        children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+          onPress: () => setMode('take'),
+          style: [styles.modeBtn, mode === 'take' ? styles.modeBtnActive : null],
+          children: /*#__PURE__*/_jsx(Text, {
+            style: [styles.modeBtnText, mode === 'take' ? styles.modeBtnTextActive : null],
+            children: "Take"
+          })
+        }), /*#__PURE__*/_jsx(TouchableOpacity, {
+          onPress: () => setMode('view'),
+          style: [styles.modeBtn, mode === 'view' ? styles.modeBtnActive : null],
+          children: /*#__PURE__*/_jsx(Text, {
+            style: [styles.modeBtnText, mode === 'view' ? styles.modeBtnTextActive : null],
+            children: "View"
+          })
+        })]
+      })]
+    }), /*#__PURE__*/_jsx(FlatList, {
+      data: !searched || searching || isHoliday || isWeeklyOff ? [] : students,
+      keyExtractor: (item, index) => String(item?.id ?? index),
+      renderItem: renderStudent,
+      contentContainerStyle: styles.content,
+      ListHeaderComponent: /*#__PURE__*/_jsxs(View, {
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.card,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.cardTitle,
+            children: mode === 'take' ? 'Attendance Details' : 'Filter Criteria'
+          }), /*#__PURE__*/_jsxs(View, {
+            style: styles.filterRow,
+            children: [/*#__PURE__*/_jsx(View, {
+              style: styles.filterCol,
+              children: /*#__PURE__*/_jsx(SelectModal, {
+                label: "Class",
+                value: selectedClass,
+                options: classes,
+                placeholder: "Select class",
+                onChange: next => {
+                  setSelectedClass(next);
+                  setSelectedSection(null);
+                  setAttendanceData(null);
+                  setStudents([]);
+                  setCount(0);
+                  setPresent(0);
+                  setSearched(false);
+                }
+              })
+            }), /*#__PURE__*/_jsx(View, {
+              style: styles.filterCol,
+              children: /*#__PURE__*/_jsx(SelectModal, {
+                label: "Section",
+                value: selectedSection,
+                options: sections,
+                placeholder: "Select section",
+                onChange: next => {
+                  setSelectedSection(next);
+                  setAttendanceData(null);
+                  setStudents([]);
+                  setCount(0);
+                  setPresent(0);
+                  setSearched(false);
+                }
+              })
+            })]
+          }), /*#__PURE__*/_jsxs(View, {
+            style: styles.field,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: styles.label,
+              children: "Date"
+            }), /*#__PURE__*/_jsx(TouchableOpacity, {
+              style: styles.dateBtn,
+              onPress: () => setCalendarOpen(true),
+              children: /*#__PURE__*/_jsx(Text, {
+                style: styles.dateBtnText,
+                children: formatDisplayDate(date)
+              })
+            })]
+          }), /*#__PURE__*/_jsx(TouchableOpacity, {
+            onPress: () => runSearch().catch(() => {}),
+            style: styles.searchBtn,
+            children: /*#__PURE__*/_jsx(Text, {
+              style: styles.searchBtnText,
+              children: "Search"
+            })
+          }), sessionId === undefined ? /*#__PURE__*/_jsx(Text, {
+            style: styles.helperText,
+            children: "Pass sessionId to AttendanceScreen"
+          }) : null]
+        }), searching ? /*#__PURE__*/_jsx(ActivityIndicator, {
+          style: styles.loader,
+          size: "large",
+          color: "#111827"
+        }) : null, searched && !searching && isHoliday ? /*#__PURE__*/_jsx(Text, {
+          style: styles.messageText,
+          children: "Today is Holiday"
+        }) : null, searched && !searching && !isHoliday && isWeeklyOff ? /*#__PURE__*/_jsx(Text, {
+          style: styles.messageText,
+          children: emptyMessage
+        }) : null, searched && !searching && !isHoliday && !isWeeklyOff && students.length > 0 ? /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.summaryRow,
+            children: [/*#__PURE__*/_jsxs(View, {
+              style: styles.summaryCard,
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: styles.summaryLabel,
+                children: "Total Present"
+              }), /*#__PURE__*/_jsx(Text, {
+                style: [styles.summaryValue, styles.presentText],
+                children: present
+              })]
+            }), /*#__PURE__*/_jsxs(View, {
+              style: styles.summaryCard,
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: styles.summaryLabel,
+                children: "Total Absent"
+              }), /*#__PURE__*/_jsx(Text, {
+                style: [styles.summaryValue, styles.absentText],
+                children: Math.max(count - present, 0)
+              })]
+            })]
+          }), mode === 'take' ? /*#__PURE__*/_jsx(TouchableOpacity, {
+            style: [styles.submitBtn, submitting ? styles.submitBtnDisabled : null],
+            onPress: () => submitCurrentAttendance().catch(() => {}),
+            disabled: submitting,
+            children: submitting ? /*#__PURE__*/_jsx(ActivityIndicator, {
+              color: "#FFFFFF"
+            }) : /*#__PURE__*/_jsx(Text, {
+              style: styles.submitBtnText,
+              children: "Submit"
+            })
+          }) : null, /*#__PURE__*/_jsxs(View, {
+            style: styles.listHeader,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: [styles.listHeaderText, styles.rollCol],
+              children: "Roll No"
+            }), /*#__PURE__*/_jsx(Text, {
+              style: [styles.listHeaderText, mode === 'take' ? styles.nameColTake : styles.nameColView],
+              children: "Student Name"
+            }), /*#__PURE__*/_jsx(Text, {
+              style: [styles.listHeaderText, mode === 'take' ? styles.statusColTake : styles.statusColView, styles.listHeaderRight],
+              children: "Status"
+            })]
+          })]
+        }) : null]
+      }),
+      ListEmptyComponent: searched && !searching && !isHoliday && !isWeeklyOff && students.length === 0 ? /*#__PURE__*/_jsx(Text, {
+        style: styles.messageText,
+        children: "No Data Found"
+      }) : null
+    }), /*#__PURE__*/_jsx(Modal, {
+      visible: calendarOpen,
+      transparent: true,
+      animationType: "fade",
+      children: /*#__PURE__*/_jsx(Pressable, {
+        style: styles.modalOverlay,
+        onPress: () => setCalendarOpen(false),
+        children: /*#__PURE__*/_jsxs(Pressable, {
+          style: styles.modalCard,
+          onPress: () => {},
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.calendarHeader,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: styles.modalTitle,
+              children: "Select Date"
+            }), /*#__PURE__*/_jsx(TouchableOpacity, {
+              onPress: () => setCalendarOpen(false),
+              style: styles.closeBtn,
+              children: /*#__PURE__*/_jsx(Text, {
+                style: styles.closeBtnText,
+                children: "Close"
+              })
+            })]
+          }), Calendar ? /*#__PURE__*/_jsx(Calendar, {
+            maxDate: todayYmd(),
+            onDayPress: day => {
+              const next = String(day?.dateString ?? '');
+              if (!next) {
+                return;
+              }
+              setDate(next);
+              setCalendarOpen(false);
+            },
+            markedDates: {
+              [date]: {
+                selected: true,
+                selectedColor: '#111827'
+              }
+            }
+          }) : /*#__PURE__*/_jsx(EmptyState, {
+            title: "Calendar missing",
+            message: "Install react-native-calendars to enable date picker"
+          })]
+        })
+      })
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    backgroundColor: '#FFFFFF'
+  },
+  header: {
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: '#E5E7EB',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 12
+  },
+  headerTitle: {
+    fontSize: 18,
+    fontWeight: '700',
+    color: '#111827'
+  },
+  modeRow: {
+    flexDirection: 'row',
+    gap: 8
+  },
+  modeBtn: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 999,
+    borderWidth: 1,
+    borderColor: '#D1D5DB',
+    backgroundColor: '#FFFFFF'
+  },
+  modeBtnActive: {
+    backgroundColor: '#111827',
+    borderColor: '#111827'
+  },
+  modeBtnText: {
+    fontSize: 12,
+    fontWeight: '700',
+    color: '#111827'
+  },
+  modeBtnTextActive: {
+    color: '#FFFFFF'
+  },
+  content: {
+    padding: 16,
+    gap: 12
+  },
+  card: {
+    borderWidth: 1,
+    borderColor: '#E5E7EB',
+    borderRadius: 16,
+    padding: 14,
+    backgroundColor: '#FFFFFF'
+  },
+  cardTitle: {
+    fontSize: 16,
+    fontWeight: '700',
+    color: '#111827',
+    marginBottom: 12
+  },
+  filterRow: {
+    flexDirection: 'row',
+    gap: 10
+  },
+  filterCol: {
+    flex: 1
+  },
+  field: {
+    marginTop: 10,
+    gap: 6
+  },
+  label: {
+    fontSize: 12,
+    fontWeight: '600',
+    color: '#6B7280'
+  },
+  select: {
+    borderWidth: 1,
+    borderColor: '#E5E7EB',
+    borderRadius: 12,
+    paddingHorizontal: 12,
+    paddingVertical: 12,
+    backgroundColor: '#FFFFFF'
+  },
+  selectText: {
+    fontSize: 14,
+    color: '#111827'
+  },
+  dateBtn: {
+    borderWidth: 1,
+    borderColor: '#E5E7EB',
+    borderRadius: 12,
+    paddingHorizontal: 12,
+    paddingVertical: 12,
+    backgroundColor: '#F9FAFB'
+  },
+  dateBtnText: {
+    fontSize: 14,
+    color: '#111827'
+  },
+  searchBtn: {
+    marginTop: 14,
+    paddingVertical: 12,
+    borderRadius: 12,
+    backgroundColor: '#111827',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  searchBtnText: {
+    fontSize: 14,
+    fontWeight: '700',
+    color: '#FFFFFF'
+  },
+  helperText: {
+    marginTop: 8,
+    fontSize: 12,
+    color: '#6B7280'
+  },
+  loader: {
+    marginVertical: 24
+  },
+  summaryRow: {
+    flexDirection: 'row',
+    gap: 12,
+    marginTop: 16
+  },
+  summaryCard: {
+    flex: 1,
+    borderWidth: 1,
+    borderColor: '#E5E7EB',
+    borderRadius: 14,
+    padding: 14,
+    backgroundColor: '#F9FAFB'
+  },
+  summaryLabel: {
+    fontSize: 12,
+    color: '#6B7280'
+  },
+  summaryValue: {
+    marginTop: 8,
+    fontSize: 22,
+    fontWeight: '800'
+  },
+  presentText: {
+    color: '#16A34A'
+  },
+  absentText: {
+    color: '#DC2626'
+  },
+  submitBtn: {
+    marginTop: 14,
+    paddingVertical: 13,
+    borderRadius: 12,
+    backgroundColor: '#2563EB',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  submitBtnDisabled: {
+    opacity: 0.7
+  },
+  submitBtnText: {
+    fontSize: 15,
+    fontWeight: '800',
+    color: '#FFFFFF'
+  },
+  listHeader: {
+    marginTop: 16,
+    paddingHorizontal: 10,
+    paddingVertical: 10,
+    borderRadius: 12,
+    backgroundColor: '#111827',
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  listHeaderText: {
+    fontSize: 12,
+    fontWeight: '700',
+    color: '#FFFFFF'
+  },
+  listHeaderRight: {
+    textAlign: 'right'
+  },
+  studentItem: {
+    marginTop: 10,
+    borderWidth: 1,
+    borderColor: '#E5E7EB',
+    borderRadius: 12,
+    paddingHorizontal: 10,
+    paddingVertical: 12,
+    backgroundColor: '#FFFFFF',
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  rollCol: {
+    width: '20%'
+  },
+  nameColTake: {
+    width: '60%'
+  },
+  statusColTake: {
+    width: '20%',
+    alignItems: 'flex-end'
+  },
+  nameColView: {
+    width: '50%'
+  },
+  statusColView: {
+    width: '30%',
+    alignItems: 'flex-end'
+  },
+  studentText: {
+    fontSize: 13,
+    color: '#111827'
+  },
+  statusBadge: {
+    minWidth: 82,
+    paddingHorizontal: 10,
+    paddingVertical: 7,
+    borderRadius: 999,
+    alignItems: 'center'
+  },
+  badgePresent: {
+    backgroundColor: '#DCFCE7'
+  },
+  badgeAbsent: {
+    backgroundColor: '#FEE2E2'
+  },
+  statusBadgeText: {
+    fontSize: 12,
+    fontWeight: '700',
+    color: '#111827'
+  },
+  messageText: {
+    marginTop: 16,
+    textAlign: 'center',
+    color: '#6B7280',
+    fontSize: 14
+  },
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.45)',
+    justifyContent: 'center',
+    padding: 16
+  },
+  modalCard: {
+    backgroundColor: '#FFFFFF',
+    borderRadius: 16,
+    overflow: 'hidden',
+    maxHeight: '80%'
+  },
+  modalTitle: {
+    fontSize: 16,
+    fontWeight: '700',
+    color: '#111827'
+  },
+  calendarHeader: {
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: '#E5E7EB',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between'
+  },
+  closeBtn: {
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    borderRadius: 10,
+    backgroundColor: '#F3F4F6'
+  },
+  closeBtnText: {
+    fontSize: 12,
+    fontWeight: '700',
+    color: '#111827'
+  },
+  optionRow: {
+    paddingHorizontal: 16,
+    paddingVertical: 12
+  },
+  optionText: {
+    fontSize: 14,
+    color: '#111827'
+  },
+  optionEmpty: {
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    color: '#6B7280'
+  }
+});