@ubkinfotech/tecaher-erp 0.1.0

package/lib/module/modules/marks/screens/MarksScreen.js

@@ -0,0 +1,1615 @@
+"use strict";
+
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { ActivityIndicator, Alert, FlatList, Modal, Pressable, SafeAreaView, ScrollView, StyleSheet, Switch, Text, TextInput, 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 { fetchClassTeacherClasses, fetchCoScholasticCategories, fetchCoScholasticEntry, fetchCoScholasticGrades, fetchExamDropdown, fetchMarksClasses, fetchMarksSections, fetchScholasticEntry, fetchStudentRemarks, fetchTeacherSubjectsForExam, submitCoScholasticMarks, submitExamMarks, submitExamRemark } from "../services/marksService.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const REMARK_OPTIONS = ['Good in studies. Needs to put in a little more effort in oral work.', 'Needs to work hard for better marks. Needs practice in both writing and oral work', 'Has shown considerable improvement b needs to pay more attention to conversation skills.', 'Needs systematic and regular follow up at home with regard to studies.', 'Can do better with some help at home. Oral work needs brushing up', 'promising child who needs to put in a little more effort', 'Has the potential to do very well but needs more focused attention.', 'Good in studies. Can be excellent with a little extra care.', 'Has shown good improvement. Has the potential to do even better.', 'Extra care can bring improvement in performance. All round improvement required.', 'Has not yet become familiar with the school atmosphere. No amount of coaxing can make him write.', 'Has performed below ability. Needs special care, time and encouragement to do better.', 'Has not yet become familiar with the school atmosphere. No amount of coaxing can make him write.', 'Needs to be more patient with written work. More practice in conversation is also required.', 'Has shown no improvement. Parents are requested to give special care at home.', 'Finishes the given work but is very talkative and disturbing in class.', 'Handwriting needs to improve. Proper guidance at home can bring good results.', 'Weak in studies. Does not respond in class. Needs to work much harder in order to get promotion.', 'An average child who can improve with a little more care and attention at home.', 'Inattentive in class. Does not follow class room instructions. Needs to pay attention to his studies.', 'Others'];
+function normalizeList(result) {
+  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 normalizeOptions(result) {
+  const list = normalizeList(result);
+  return list.map((item, index) => ({
+    label: String(item?.label ?? item?.type ?? item?.title ?? item?.skill ?? item?.name ?? `Option ${index + 1}`),
+    value: item?.value ?? item?.id ?? item?.mark_to ?? index + 1,
+    parent: item?.parent,
+    raw: item
+  }));
+}
+function normalizeGradeOptions(list) {
+  return list.map((item, index) => ({
+    label: String(item?.label ?? item?.title ?? item?.mark_to ?? item?.value ?? `Grade ${index + 1}`),
+    value: String(item?.value ?? item?.mark_to ?? item?.id ?? ''),
+    raw: item
+  }));
+}
+function matchesValue(a, b) {
+  return String(a ?? '') === String(b ?? '');
+}
+function findOption(options, value) {
+  return options.find(item => matchesValue(item.value, value)) ?? null;
+}
+function hasOverLimit(value, fullMarks) {
+  const parsed = Number(value ?? '');
+  const max = Number(fullMarks ?? '');
+  if (!Number.isFinite(parsed) || !Number.isFinite(max)) {
+    return false;
+  }
+  return parsed > max;
+}
+function buildRemarkForm(student) {
+  const existingRemark = String(student?.exam_remarks ?? '');
+  const predefined = REMARK_OPTIONS.find(item => item === existingRemark) ?? '';
+  return {
+    selectedRemark: predefined || (existingRemark ? 'Others' : ''),
+    remarks: predefined ? predefined : existingRemark,
+    metting_date_1: String(student?.metting_date_1 ?? ''),
+    attended_1: String(student?.attended_1 ?? ''),
+    metting_date_2: String(student?.metting_date_2 ?? ''),
+    attended_2: String(student?.attended_2 ?? ''),
+    metting_date_3: String(student?.metting_date_3 ?? ''),
+    attended_3: String(student?.attended_3 ?? ''),
+    working_days: String(student?.working_days ?? ''),
+    days_present: String(student?.days_present ?? '')
+  };
+}
+function SelectField({
+  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"
+            })
+          })]
+        })
+      })
+    })]
+  });
+}
+function FlowTab({
+  title,
+  active,
+  onPress
+}) {
+  return /*#__PURE__*/_jsx(TouchableOpacity, {
+    onPress: onPress,
+    style: [styles.tabBtn, active ? styles.tabBtnActive : null],
+    children: /*#__PURE__*/_jsx(Text, {
+      style: [styles.tabBtnText, active ? styles.tabBtnTextActive : null],
+      children: title
+    })
+  });
+}
+function StatusToggle({
+  label,
+  value,
+  onValueChange
+}) {
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.toggleLine,
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: styles.toggleText,
+      children: label
+    }), /*#__PURE__*/_jsx(Switch, {
+      value: value,
+      onValueChange: onValueChange
+    })]
+  });
+}
+function MarksInput({
+  label,
+  value,
+  fullMarks,
+  absent,
+  useSelect,
+  onTextChange,
+  onPick,
+  onAbsentChange
+}) {
+  const overLimit = hasOverLimit(value, fullMarks);
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.markField,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.markHeader,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.markLabel,
+        children: label
+      }), /*#__PURE__*/_jsxs(Text, {
+        style: styles.markMax,
+        children: ["Max: ", String(fullMarks ?? '-')]
+      })]
+    }), useSelect ? /*#__PURE__*/_jsx(TouchableOpacity, {
+      style: [styles.markSelectBtn, absent ? styles.disabledInput : null],
+      onPress: onPick,
+      disabled: absent,
+      children: /*#__PURE__*/_jsx(Text, {
+        style: styles.markSelectText,
+        children: value || 'Select Grade'
+      })
+    }) : /*#__PURE__*/_jsx(TextInput, {
+      value: value,
+      onChangeText: onTextChange,
+      placeholder: "Enter marks",
+      placeholderTextColor: "#9CA3AF",
+      keyboardType: "numeric",
+      editable: !absent,
+      style: [styles.input, absent ? styles.disabledInput : null, overLimit ? styles.errorBorder : null]
+    }), /*#__PURE__*/_jsx(StatusToggle, {
+      label: "Absent",
+      value: absent,
+      onValueChange: onAbsentChange
+    }), overLimit ? /*#__PURE__*/_jsx(Text, {
+      style: styles.errorText,
+      children: "Marks exceed max marks"
+    }) : null]
+  });
+}
+export function MarksScreen(props) {
+  const {
+    api
+  } = useERP();
+  const sessionId = props.sessionId;
+  const [flow, setFlow] = useState('scholastic');
+  const [entryMode, setEntryMode] = useState('filters');
+  const [classes, setClasses] = useState([]);
+  const [sections, setSections] = useState([]);
+  const [exams, setExams] = useState([]);
+  const [subjects, setSubjects] = useState([]);
+  const [selectedClass, setSelectedClass] = useState(null);
+  const [selectedSection, setSelectedSection] = useState(null);
+  const [selectedExam, setSelectedExam] = useState(null);
+  const [selectedSubject, setSelectedSubject] = useState(null);
+  const [loadingFilters, setLoadingFilters] = useState(true);
+  const [busy, setBusy] = useState(false);
+  const [gradeModal, setGradeModal] = useState({
+    visible: false,
+    title: '',
+    options: []
+  });
+  const [scholasticStudents, setScholasticStudents] = useState([]);
+  const [scholasticExam, setScholasticExam] = useState(null);
+  const [scholasticGrades, setScholasticGrades] = useState([]);
+  const [coStudents, setCoStudents] = useState([]);
+  const [coAreas, setCoAreas] = useState([]);
+  const [coGrades, setCoGrades] = useState([]);
+  const [coFormData, setCoFormData] = useState([]);
+  const [remarkStudents, setRemarkStudents] = useState([]);
+  const [remarkModalVisible, setRemarkModalVisible] = useState(false);
+  const [selectedRemarkStudent, setSelectedRemarkStudent] = useState(null);
+  const [remarkForm, setRemarkForm] = useState({
+    selectedRemark: '',
+    remarks: '',
+    metting_date_1: '',
+    attended_1: '',
+    metting_date_2: '',
+    attended_2: '',
+    metting_date_3: '',
+    attended_3: '',
+    working_days: '',
+    days_present: ''
+  });
+  const resetFilters = useCallback(() => {
+    setSections([]);
+    setExams([]);
+    setSubjects([]);
+    setSelectedClass(null);
+    setSelectedSection(null);
+    setSelectedExam(null);
+    setSelectedSubject(null);
+    setEntryMode('filters');
+    setScholasticStudents([]);
+    setScholasticExam(null);
+    setScholasticGrades([]);
+    setCoStudents([]);
+    setCoAreas([]);
+    setCoGrades([]);
+    setCoFormData([]);
+    setRemarkStudents([]);
+  }, []);
+  useEffect(() => {
+    resetFilters();
+    setLoadingFilters(true);
+    const load = async () => {
+      try {
+        const res = flow === 'remarks' ? await fetchClassTeacherClasses(api) : await fetchMarksClasses(api);
+        setClasses(normalizeOptions(res));
+      } catch (error) {
+        Alert.alert('Error', String(error?.message ?? 'Could not load classes'));
+      } finally {
+        setLoadingFilters(false);
+      }
+    };
+    load().catch(() => {});
+  }, [api, flow, resetFilters]);
+  useEffect(() => {
+    if (!selectedClass?.value) {
+      setSections([]);
+      setExams([]);
+      setSubjects([]);
+      setSelectedSection(null);
+      setSelectedExam(null);
+      setSelectedSubject(null);
+      return;
+    }
+    fetchMarksSections(api, {
+      classId: selectedClass.value
+    }).then(res => {
+      setSections(normalizeOptions(res));
+    }).catch(error => {
+      Alert.alert('Error', String(error?.message ?? 'Could not load sections'));
+    });
+    if (sessionId === undefined) {
+      setExams([]);
+      return;
+    }
+    fetchExamDropdown(api, {
+      sessionId,
+      classId: selectedClass.value
+    }).then(res => {
+      setExams(normalizeOptions(res));
+    }).catch(error => {
+      Alert.alert('Error', String(error?.message ?? 'Could not load exams'));
+    });
+  }, [api, selectedClass?.value, sessionId]);
+  useEffect(() => {
+    setSubjects([]);
+    setSelectedSubject(null);
+    if (!selectedClass?.value || !selectedExam?.value || sessionId === undefined) {
+      return;
+    }
+    if (flow === 'scholastic') {
+      if (!selectedSection?.value) {
+        return;
+      }
+      const args = {
+        sessionId,
+        classId: selectedClass.value,
+        sectionId: selectedSection.value,
+        examId: selectedExam.value
+      };
+      fetchTeacherSubjectsForExam(api, args).then(res => {
+        const normalized = normalizeOptions(res);
+        const list = normalized.flatMap(item => {
+          const raw = item.raw;
+          if (Array.isArray(raw?.options)) {
+            return raw.options.map((opt, index) => ({
+              label: String(opt?.label ?? `Subject ${index + 1}`),
+              value: opt?.value ?? opt?.id ?? index + 1,
+              raw: opt
+            }));
+          }
+          return [item];
+        });
+        setSubjects(list);
+      }).catch(error => {
+        Alert.alert('Error', String(error?.message ?? 'Could not load subjects'));
+      });
+      return;
+    }
+    if (flow === 'coscholastic') {
+      fetchCoScholasticCategories(api, {
+        sessionId,
+        classId: selectedClass.value,
+        examId: selectedExam.value
+      }).then(res => {
+        setSubjects(normalizeOptions(res));
+      }).catch(error => {
+        Alert.alert('Error', String(error?.message ?? 'Could not load categories'));
+      });
+    }
+  }, [api, flow, selectedClass?.value, selectedExam?.value, selectedSection?.value, sessionId]);
+  const openGradePicker = useCallback((title, options, onSelect) => {
+    setGradeModal({
+      visible: true,
+      title,
+      options,
+      onSelect
+    });
+  }, []);
+  const closeGradePicker = useCallback(() => {
+    setGradeModal({
+      visible: false,
+      title: '',
+      options: [],
+      onSelect: undefined
+    });
+  }, []);
+  const handleScholasticMarkChange = useCallback((studentId, subject, value, assessmentIndex) => {
+    setScholasticStudents(prev => prev.map(student => {
+      if (!matchesValue(student.id, studentId)) {
+        return student;
+      }
+      if (subject !== 'assessment') {
+        return {
+          ...student,
+          [subject]: value
+        };
+      }
+      const currentMarks = [...(student.assement_marks ?? [])];
+      const assessmentId = scholasticExam?.assesment_type?.[assessmentIndex ?? 0]?.id;
+      const existingIndex = currentMarks.findIndex(mark => matchesValue(mark?.assement_id, assessmentId));
+      if (existingIndex >= 0) {
+        currentMarks[existingIndex] = {
+          ...currentMarks[existingIndex],
+          marks: value
+        };
+      } else {
+        currentMarks.push({
+          assement_id: assessmentId,
+          marks: value,
+          is_absent: false
+        });
+      }
+      return {
+        ...student,
+        assement_marks: currentMarks
+      };
+    }));
+  }, [scholasticExam?.assesment_type]);
+  const handleScholasticAbsentChange = useCallback((studentId, type, isAbsent, index) => {
+    setScholasticStudents(prev => prev.map(student => {
+      if (!matchesValue(student.id, studentId)) {
+        return student;
+      }
+      if (type === 'theory') {
+        return {
+          ...student,
+          theory_absent: isAbsent
+        };
+      }
+      if (type === 'practical') {
+        return {
+          ...student,
+          practical_absent: isAbsent
+        };
+      }
+      const currentMarks = [...(student.assement_marks ?? [])];
+      const assessmentId = scholasticExam?.assesment_type?.[index ?? 0]?.id;
+      const existingIndex = currentMarks.findIndex(mark => matchesValue(mark?.assement_id, assessmentId));
+      if (existingIndex >= 0) {
+        currentMarks[existingIndex] = {
+          ...currentMarks[existingIndex],
+          is_absent: isAbsent
+        };
+      } else {
+        currentMarks.push({
+          assement_id: assessmentId,
+          marks: '',
+          is_absent: isAbsent
+        });
+      }
+      return {
+        ...student,
+        assement_marks: currentMarks
+      };
+    }));
+  }, [scholasticExam?.assesment_type]);
+  const loadScholasticEntry = useCallback(async () => {
+    if (!selectedClass?.value || !selectedSection?.value || !selectedExam?.value || !selectedSubject?.value) {
+      Alert.alert('Error', 'Please provide class, section, exam, and subject');
+      return;
+    }
+    setBusy(true);
+    try {
+      const res = await fetchScholasticEntry(api, {
+        classId: selectedClass.value,
+        sectionId: selectedSection.value,
+        examId: selectedExam.value,
+        subjectId: selectedSubject.value
+      });
+      const response = res;
+      if (response?.Status && response.Status !== 'Success') {
+        Alert.alert('Failed', String(response?.msg ?? response?.Message ?? 'Could not load marks'));
+        return;
+      }
+      const exam = response?.exam_details?.[0] ?? response?.data?.exam_details?.[0] ?? null;
+      const rawStudents = normalizeList(response?.data ?? response);
+      const initialized = rawStudents.map(student => ({
+        ...student,
+        theory_absent: student?.main_subject_marks === 'AB' || student?.main_subject_marks === '-1',
+        practical_absent: student?.practical_subject_marks === 'AB' || student?.practical_subject_marks === '-1',
+        assement_marks: (student?.assement_marks ?? []).map(mark => ({
+          ...mark,
+          is_absent: String(mark?.status ?? '').toLowerCase() === 'absent' || mark?.marks === 'AB' || mark?.marks === '-1'
+        }))
+      }));
+      setScholasticStudents(initialized);
+      setScholasticExam(exam);
+      setScholasticGrades(normalizeGradeOptions(response?.exam_grade ?? []));
+      setEntryMode('scholastic');
+    } catch (error) {
+      Alert.alert('Error', String(error?.message ?? 'Could not load marks entry'));
+    } finally {
+      setBusy(false);
+    }
+  }, [api, selectedClass?.value, selectedExam?.value, selectedSection?.value, selectedSubject?.value]);
+  const loadCoScholasticEntry = useCallback(async () => {
+    if (!selectedClass?.value || !selectedSection?.value || !selectedExam?.value || !selectedSubject?.value) {
+      Alert.alert('Error', 'Please provide class, section, exam, and category');
+      return;
+    }
+    setBusy(true);
+    try {
+      const [gradesRes, entryRes] = await Promise.all([fetchCoScholasticGrades(api), fetchCoScholasticEntry(api, {
+        classId: selectedClass.value,
+        sectionId: selectedSection.value,
+        examId: selectedExam.value,
+        categoryId: selectedSubject.value
+      })]);
+      const entryResponse = entryRes;
+      if (entryResponse?.Status && entryResponse.Status !== 'Success') {
+        Alert.alert('Failed', String(entryResponse?.msg ?? entryResponse?.Message ?? 'Could not load co-scholastic entry'));
+        return;
+      }
+      const students = normalizeList(entryResponse?.data ?? entryResponse);
+      const areas = entryResponse?.exam_details ?? entryResponse?.data?.exam_details ?? [];
+      const formData = students.map(student => {
+        const row = {
+          studentid: student.id
+        };
+        areas.forEach(area => {
+          const existing = (student.marks_data ?? []).find(mark => matchesValue(mark?.fk_co_scholasticarea_id, area.id));
+          row[String(area.id ?? '')] = existing && !matchesValue(existing.marks_grade_id, '0') ? String(existing.marks_grade_id) : '0';
+        });
+        return row;
+      });
+      setCoGrades(normalizeOptions(gradesRes));
+      setCoStudents(students);
+      setCoAreas(areas);
+      setCoFormData(formData);
+      setEntryMode('coscholastic');
+    } catch (error) {
+      Alert.alert('Error', String(error?.message ?? 'Could not load co-scholastic entry'));
+    } finally {
+      setBusy(false);
+    }
+  }, [api, selectedClass?.value, selectedExam?.value, selectedSection?.value, selectedSubject?.value]);
+  const loadRemarksEntry = useCallback(async () => {
+    if (!selectedClass?.value || !selectedSection?.value || !selectedExam?.value) {
+      Alert.alert('Error', 'Please provide class, section, and exam');
+      return;
+    }
+    setBusy(true);
+    try {
+      const res = await fetchStudentRemarks(api, {
+        classId: selectedClass.value,
+        sectionId: selectedSection.value,
+        examId: selectedExam.value
+      });
+      const response = res;
+      if (response?.Status && response.Status !== 'Success') {
+        Alert.alert('Failed', String(response?.msg ?? response?.Message ?? 'Could not load remarks'));
+        return;
+      }
+      setRemarkStudents(normalizeList(response));
+      setEntryMode('remarks');
+    } catch (error) {
+      Alert.alert('Error', String(error?.message ?? 'Could not load remarks entry'));
+    } finally {
+      setBusy(false);
+    }
+  }, [api, selectedClass?.value, selectedExam?.value, selectedSection?.value]);
+  const startEntry = useCallback(() => {
+    if (sessionId === undefined) {
+      Alert.alert('Error', 'Pass sessionId to MarksScreen');
+      return;
+    }
+    if (flow === 'scholastic') {
+      loadScholasticEntry().catch(() => {});
+      return;
+    }
+    if (flow === 'coscholastic') {
+      loadCoScholasticEntry().catch(() => {});
+      return;
+    }
+    loadRemarksEntry().catch(() => {});
+  }, [flow, loadCoScholasticEntry, loadRemarksEntry, loadScholasticEntry, sessionId]);
+  const submitScholastic = useCallback(async () => {
+    if (!selectedClass?.value || !selectedSection?.value || !selectedExam?.value || !selectedSubject?.value || !scholasticExam) {
+      Alert.alert('Error', 'Missing scholastic filters');
+      return;
+    }
+    setBusy(true);
+    try {
+      const data = scholasticStudents.map(student => {
+        const row = {
+          student_id: student.id,
+          attendance_status: scholasticExam?.is_theory === 'yes' && student?.theory_absent ? 'Absent' : 'Present'
+        };
+        if (scholasticExam?.is_theory === 'yes') {
+          row.main_marks = student?.theory_absent ? 'AB' : student.main_subject_marks || '0';
+        }
+        if (scholasticExam?.is_practical === 'yes') {
+          row.practical_marks = student?.practical_absent ? 'AB' : student.practical_subject_marks || '0';
+        }
+        if (Array.isArray(scholasticExam?.assesment_type) && scholasticExam.assesment_type.length) {
+          row.assesment_coloum = scholasticExam.assesment_type.map((assessment, index) => {
+            const currentMark = (student.assement_marks ?? []).find(mark => matchesValue(mark?.assement_id, assessment.id));
+            if (currentMark?.is_absent) {
+              return {
+                assement_id: assessment.id ?? index,
+                marks: 'AB',
+                status: 'Absent'
+              };
+            }
+            return {
+              assement_id: assessment.id ?? index,
+              marks: currentMark?.marks || '0',
+              status: 'Present'
+            };
+          });
+        }
+        return row;
+      });
+      const payload = {
+        exam_id: selectedExam.value,
+        subject_id: selectedSubject.value,
+        class_id: selectedClass.value,
+        section_id: selectedSection.value,
+        exam_schedule_id: scholasticExam?.id,
+        Isassessment: scholasticExam?.Isassessment,
+        assesment_type_id: scholasticExam?.template_details?.assessment_type === 'Exam_wise' ? scholasticExam?.assesment_type?.[0]?.fk_assesment_id : scholasticExam?.assesment_type?.[0]?.assesment_type_id,
+        assessment_type: scholasticExam?.template_details?.assessment_type,
+        isFinalExam: false,
+        data
+      };
+      const res = await submitExamMarks(api, payload);
+      const response = res;
+      if (response?.Status && response.Status !== 'Success') {
+        Alert.alert('Failed', String(response?.msg ?? response?.Message ?? 'Marks submission failed'));
+        return;
+      }
+      Alert.alert('Success', 'Marks submitted successfully');
+    } catch (error) {
+      Alert.alert('Error', String(error?.message ?? 'Failed to submit marks'));
+    } finally {
+      setBusy(false);
+    }
+  }, [api, scholasticExam, scholasticStudents, selectedClass?.value, selectedExam?.value, selectedSection?.value, selectedSubject?.value]);
+  const submitCoScholastic = useCallback(async () => {
+    if (!selectedClass?.value || !selectedSection?.value || !selectedExam?.value || !selectedSubject?.value) {
+      Alert.alert('Error', 'Missing co-scholastic filters');
+      return;
+    }
+    setBusy(true);
+    try {
+      const res = await submitCoScholasticMarks(api, {
+        formData: coFormData,
+        examdetails: {
+          class_id: selectedClass.value,
+          section_id: selectedSection.value,
+          exam_id: selectedExam.value,
+          subject_id: selectedSubject.value,
+          parentVal: selectedExam?.parent
+        }
+      });
+      const response = res;
+      if (response?.Status && response.Status !== 'Success') {
+        Alert.alert('Failed', String(response?.msg ?? response?.Message ?? 'Marks submission failed'));
+        return;
+      }
+      Alert.alert('Success', 'Marks submitted successfully');
+    } catch (error) {
+      Alert.alert('Error', String(error?.message ?? 'Failed to submit co-scholastic marks'));
+    } finally {
+      setBusy(false);
+    }
+  }, [api, coFormData, selectedClass?.value, selectedExam?.parent, selectedExam?.value, selectedSection?.value, selectedSubject?.value]);
+  const openRemarksEditor = useCallback(student => {
+    setSelectedRemarkStudent(student);
+    setRemarkForm(buildRemarkForm(student));
+    setRemarkModalVisible(true);
+  }, []);
+  const saveRemarks = useCallback(async () => {
+    if (!selectedRemarkStudent?.student_id && !selectedRemarkStudent?.id) {
+      Alert.alert('Error', 'Student is missing');
+      return;
+    }
+    if (!selectedExam?.value) {
+      Alert.alert('Error', 'Exam is missing');
+      return;
+    }
+    const payload = {
+      studentId: selectedRemarkStudent.student_id ?? selectedRemarkStudent.id,
+      examId: selectedExam.value,
+      exam_remarks: remarkForm.remarks,
+      metting_date_1: remarkForm.metting_date_1,
+      attended_1: remarkForm.attended_1,
+      metting_date_2: remarkForm.metting_date_2,
+      attended_2: remarkForm.attended_2,
+      metting_date_3: remarkForm.metting_date_3,
+      attended_3: remarkForm.attended_3,
+      working_days: remarkForm.working_days,
+      days_present: remarkForm.days_present
+    };
+    setBusy(true);
+    try {
+      const res = await submitExamRemark(api, payload);
+      const response = res;
+      if (response?.Status && response.Status !== 'Success') {
+        Alert.alert('Failed', String(response?.msg ?? response?.Message ?? 'Could not save remarks'));
+        return;
+      }
+      Alert.alert('Success', 'Remarks saved successfully');
+      setRemarkModalVisible(false);
+      setSelectedRemarkStudent(null);
+      await loadRemarksEntry();
+    } catch (error) {
+      Alert.alert('Error', String(error?.message ?? 'Could not save remarks'));
+    } finally {
+      setBusy(false);
+    }
+  }, [api, loadRemarksEntry, remarkForm, selectedExam?.value, selectedRemarkStudent]);
+  const selectedFlowLabel = useMemo(() => {
+    if (flow === 'scholastic') return 'Marks';
+    if (flow === 'coscholastic') return 'Co-Scholastic';
+    return 'Exam Remarks';
+  }, [flow]);
+  if (loadingFilters) {
+    return /*#__PURE__*/_jsx(LoadingState, {});
+  }
+  const renderFilters = () => {
+    return /*#__PURE__*/_jsx(ScrollView, {
+      contentContainerStyle: styles.content,
+      children: /*#__PURE__*/_jsxs(View, {
+        style: styles.card,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.cardTitle,
+          children: selectedFlowLabel
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.tabRow,
+          children: [/*#__PURE__*/_jsx(FlowTab, {
+            title: "Marks",
+            active: flow === 'scholastic',
+            onPress: () => setFlow('scholastic')
+          }), /*#__PURE__*/_jsx(FlowTab, {
+            title: "Co-Scholastic",
+            active: flow === 'coscholastic',
+            onPress: () => setFlow('coscholastic')
+          }), /*#__PURE__*/_jsx(FlowTab, {
+            title: "Exam Remarks",
+            active: flow === 'remarks',
+            onPress: () => setFlow('remarks')
+          })]
+        }), /*#__PURE__*/_jsx(SelectField, {
+          label: "Class",
+          value: selectedClass,
+          options: classes,
+          placeholder: "Select class",
+          onChange: next => {
+            setSelectedClass(next);
+            setSelectedSection(null);
+            setSelectedExam(null);
+            setSelectedSubject(null);
+            setSections([]);
+            setExams([]);
+            setSubjects([]);
+          }
+        }), /*#__PURE__*/_jsx(SelectField, {
+          label: "Section",
+          value: selectedSection,
+          options: sections,
+          placeholder: "Select section",
+          onChange: next => {
+            setSelectedSection(next);
+            setSelectedSubject(null);
+          }
+        }), /*#__PURE__*/_jsx(SelectField, {
+          label: "Exam",
+          value: selectedExam,
+          options: exams,
+          placeholder: "Select exam",
+          onChange: next => {
+            setSelectedExam(next);
+            setSelectedSubject(null);
+          }
+        }), flow !== 'remarks' ? /*#__PURE__*/_jsx(SelectField, {
+          label: flow === 'scholastic' ? 'Subject' : 'Category',
+          value: selectedSubject,
+          options: subjects,
+          placeholder: flow === 'scholastic' ? 'Select subject' : 'Select category',
+          onChange: setSelectedSubject
+        }) : null, sessionId === undefined ? /*#__PURE__*/_jsx(Text, {
+          style: styles.helperText,
+          children: "Pass `sessionId` to `MarksScreen` to load exams and marks entry."
+        }) : null, /*#__PURE__*/_jsx(TouchableOpacity, {
+          onPress: startEntry,
+          style: styles.primaryBtn,
+          disabled: busy,
+          children: busy ? /*#__PURE__*/_jsx(ActivityIndicator, {
+            color: "#FFFFFF"
+          }) : /*#__PURE__*/_jsx(Text, {
+            style: styles.primaryBtnText,
+            children: flow === 'remarks' ? 'Open Remarks' : 'Open Entry'
+          })
+        })]
+      })
+    });
+  };
+  const renderScholasticEntry = () => {
+    if (!scholasticExam) {
+      return /*#__PURE__*/_jsx(EmptyState, {
+        title: "No Data Found"
+      });
+    }
+    const isAdditional = scholasticExam?.subject_type === 'Additional';
+    const isMinorMarks = scholasticExam?.template_details?.minor_sub_marks_type === 'MARKS';
+    const useGradeForSubject = isAdditional && !isMinorMarks;
+    const useGradeForAssessment = scholasticExam?.assessment_type === 'only_assessment';
+    return /*#__PURE__*/_jsx(FlatList, {
+      data: scholasticStudents,
+      keyExtractor: (item, index) => String(item?.id ?? index),
+      contentContainerStyle: styles.content,
+      ListHeaderComponent: /*#__PURE__*/_jsxs(View, {
+        style: styles.card,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.cardTitle,
+          children: "Scholastic Entry"
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.infoRow,
+          children: [/*#__PURE__*/_jsxs(Text, {
+            style: styles.infoText,
+            children: ["Class: ", selectedClass?.label]
+          }), /*#__PURE__*/_jsxs(Text, {
+            style: styles.infoText,
+            children: ["Section: ", selectedSection?.label]
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.infoRow,
+          children: [/*#__PURE__*/_jsxs(Text, {
+            style: styles.infoText,
+            children: ["Exam: ", selectedExam?.label]
+          }), /*#__PURE__*/_jsxs(Text, {
+            style: styles.infoText,
+            children: ["Subject: ", selectedSubject?.label]
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.actionRow,
+          children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+            onPress: () => setEntryMode('filters'),
+            style: styles.secondaryBtn,
+            children: /*#__PURE__*/_jsx(Text, {
+              style: styles.secondaryBtnText,
+              children: "Back"
+            })
+          }), /*#__PURE__*/_jsx(TouchableOpacity, {
+            onPress: submitScholastic,
+            style: styles.primaryBtnCompact,
+            children: busy ? /*#__PURE__*/_jsx(ActivityIndicator, {
+              color: "#FFFFFF"
+            }) : /*#__PURE__*/_jsx(Text, {
+              style: styles.primaryBtnText,
+              children: "Submit Marks"
+            })
+          })]
+        })]
+      }),
+      renderItem: ({
+        item
+      }) => /*#__PURE__*/_jsxs(View, {
+        style: styles.studentCard,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.studentHeader,
+          children: [/*#__PURE__*/_jsxs(Text, {
+            style: styles.studentName,
+            children: [String(item?.firstname ?? ''), " ", String(item?.lastname ?? '')]
+          }), /*#__PURE__*/_jsxs(Text, {
+            style: styles.rollText,
+            children: ["Roll No: ", String(item?.roll_no ?? '-')]
+          })]
+        }), scholasticExam?.is_theory === 'yes' && scholasticExam?.assessment_type !== 'only_assessment' ? /*#__PURE__*/_jsx(MarksInput, {
+          label: "Theory",
+          value: String(item?.main_subject_marks ?? ''),
+          fullMarks: scholasticExam?.full_marks,
+          absent: Boolean(item?.theory_absent),
+          useSelect: useGradeForSubject,
+          onTextChange: value => handleScholasticMarkChange(item.id, 'main_subject_marks', value),
+          onPick: () => openGradePicker('Select Theory Grade', scholasticGrades, value => handleScholasticMarkChange(item.id, 'main_subject_marks', value)),
+          onAbsentChange: value => handleScholasticAbsentChange(item.id, 'theory', value)
+        }) : null, scholasticExam?.is_practical === 'yes' ? /*#__PURE__*/_jsx(MarksInput, {
+          label: "Practical",
+          value: String(item?.practical_subject_marks ?? ''),
+          fullMarks: scholasticExam?.practical_full_marks,
+          absent: Boolean(item?.practical_absent),
+          useSelect: useGradeForSubject,
+          onTextChange: value => handleScholasticMarkChange(item.id, 'practical_subject_marks', value),
+          onPick: () => openGradePicker('Select Practical Grade', scholasticGrades, value => handleScholasticMarkChange(item.id, 'practical_subject_marks', value)),
+          onAbsentChange: value => handleScholasticAbsentChange(item.id, 'practical', value)
+        }) : null, scholasticExam?.subject_type !== 'Additional' ? scholasticExam?.assesment_type?.map((assessment, index) => {
+          const currentMark = (item.assement_marks ?? []).find(mark => matchesValue(mark?.assement_id, assessment.id));
+          return /*#__PURE__*/_jsx(MarksInput, {
+            label: String(assessment?.title ?? `Assessment ${index + 1}`),
+            value: String(currentMark?.marks ?? ''),
+            fullMarks: assessment?.max_marks,
+            absent: Boolean(currentMark?.is_absent),
+            useSelect: useGradeForAssessment,
+            onTextChange: value => handleScholasticMarkChange(item.id, 'assessment', value, index),
+            onPick: () => openGradePicker(`Select ${String(assessment?.title ?? 'Assessment')} Grade`, scholasticGrades, value => handleScholasticMarkChange(item.id, 'assessment', value, index)),
+            onAbsentChange: value => handleScholasticAbsentChange(item.id, 'assessment', value, index)
+          }, `${item.id}-${assessment.id ?? index}`);
+        }) : null]
+      }),
+      ListEmptyComponent: /*#__PURE__*/_jsx(EmptyState, {
+        title: "No students found"
+      })
+    });
+  };
+  const renderCoScholasticEntry = () => {
+    return /*#__PURE__*/_jsx(FlatList, {
+      data: coStudents,
+      keyExtractor: (item, index) => String(item?.id ?? index),
+      contentContainerStyle: styles.content,
+      ListHeaderComponent: /*#__PURE__*/_jsxs(View, {
+        style: styles.card,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.cardTitle,
+          children: "Co-Scholastic Entry"
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.infoRow,
+          children: [/*#__PURE__*/_jsxs(Text, {
+            style: styles.infoText,
+            children: ["Class: ", selectedClass?.label]
+          }), /*#__PURE__*/_jsxs(Text, {
+            style: styles.infoText,
+            children: ["Section: ", selectedSection?.label]
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.infoRow,
+          children: [/*#__PURE__*/_jsxs(Text, {
+            style: styles.infoText,
+            children: ["Exam: ", selectedExam?.label]
+          }), /*#__PURE__*/_jsxs(Text, {
+            style: styles.infoText,
+            children: ["Category: ", selectedSubject?.label]
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.actionRow,
+          children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+            onPress: () => setEntryMode('filters'),
+            style: styles.secondaryBtn,
+            children: /*#__PURE__*/_jsx(Text, {
+              style: styles.secondaryBtnText,
+              children: "Back"
+            })
+          }), /*#__PURE__*/_jsx(TouchableOpacity, {
+            onPress: submitCoScholastic,
+            style: styles.primaryBtnCompact,
+            children: busy ? /*#__PURE__*/_jsx(ActivityIndicator, {
+              color: "#FFFFFF"
+            }) : /*#__PURE__*/_jsx(Text, {
+              style: styles.primaryBtnText,
+              children: "Submit Marks"
+            })
+          })]
+        })]
+      }),
+      renderItem: ({
+        item
+      }) => {
+        return /*#__PURE__*/_jsxs(View, {
+          style: styles.studentCard,
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.studentHeader,
+            children: [/*#__PURE__*/_jsxs(Text, {
+              style: styles.studentName,
+              children: [String(item?.firstname ?? ''), " ", String(item?.lastname ?? '')]
+            }), /*#__PURE__*/_jsxs(Text, {
+              style: styles.rollText,
+              children: ["Roll No: ", String(item?.roll_no ?? '-')]
+            })]
+          }), Array.from({
+            length: Math.ceil(coAreas.length / 3)
+          }, (_, rowIndex) => {
+            const rowItems = coAreas.slice(rowIndex * 3, rowIndex * 3 + 3);
+            return /*#__PURE__*/_jsx(View, {
+              style: styles.criteriaRow,
+              children: rowItems.map(area => {
+                const row = coFormData.find(form => matchesValue(form.studentid, item.id));
+                const currentValue = String(row?.[String(area.id ?? '')] ?? '0');
+                const currentGrade = findOption(coGrades, currentValue)?.label ?? 'Select Grade';
+                return /*#__PURE__*/_jsxs(View, {
+                  style: styles.criteriaCol,
+                  children: [/*#__PURE__*/_jsx(Text, {
+                    style: styles.criteriaLabel,
+                    children: String(area?.skill ?? '-')
+                  }), /*#__PURE__*/_jsx(TouchableOpacity, {
+                    style: styles.markSelectBtn,
+                    onPress: () => openGradePicker(`Select Grade for ${String(area?.skill ?? '')}`, coGrades, value => setCoFormData(prev => prev.map(form => matchesValue(form.studentid, item.id) ? {
+                      ...form,
+                      [String(area.id ?? '')]: value
+                    } : form))),
+                    children: /*#__PURE__*/_jsx(Text, {
+                      style: styles.markSelectText,
+                      children: currentGrade
+                    })
+                  })]
+                }, String(area.id ?? ''));
+              })
+            }, rowIndex);
+          })]
+        });
+      },
+      ListEmptyComponent: /*#__PURE__*/_jsx(EmptyState, {
+        title: "No students found"
+      })
+    });
+  };
+  const renderRemarksEntry = () => {
+    return /*#__PURE__*/_jsx(FlatList, {
+      data: remarkStudents,
+      keyExtractor: (item, index) => String(item?.student_id ?? item?.id ?? index),
+      contentContainerStyle: styles.content,
+      ListHeaderComponent: /*#__PURE__*/_jsxs(View, {
+        style: styles.card,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.cardTitle,
+          children: "Exam Remarks"
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.infoRow,
+          children: [/*#__PURE__*/_jsxs(Text, {
+            style: styles.infoText,
+            children: ["Class: ", selectedClass?.label]
+          }), /*#__PURE__*/_jsxs(Text, {
+            style: styles.infoText,
+            children: ["Section: ", selectedSection?.label]
+          })]
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.infoRow,
+          children: /*#__PURE__*/_jsxs(Text, {
+            style: styles.infoText,
+            children: ["Exam: ", selectedExam?.label]
+          })
+        }), /*#__PURE__*/_jsx(TouchableOpacity, {
+          onPress: () => setEntryMode('filters'),
+          style: styles.secondaryBtn,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.secondaryBtnText,
+            children: "Back"
+          })
+        })]
+      }),
+      renderItem: ({
+        item
+      }) => {
+        const hasRemarks = String(item?.exam_remarks ?? '').trim().length > 0;
+        return /*#__PURE__*/_jsx(View, {
+          style: [styles.studentCard, hasRemarks ? styles.successBorder : styles.errorBorderLeft],
+          children: /*#__PURE__*/_jsxs(View, {
+            style: styles.remarkTopRow,
+            children: [/*#__PURE__*/_jsxs(View, {
+              style: {
+                flex: 1
+              },
+              children: [/*#__PURE__*/_jsxs(Text, {
+                style: styles.studentName,
+                children: [String(item?.firstname ?? ''), " ", String(item?.lastname ?? '')]
+              }), /*#__PURE__*/_jsxs(Text, {
+                style: styles.rollText,
+                children: ["Roll No: ", String(item?.roll_no ?? '-')]
+              }), hasRemarks ? /*#__PURE__*/_jsxs(Text, {
+                style: styles.remarkText,
+                children: ["Remarks: ", String(item?.exam_remarks ?? '')]
+              }) : null]
+            }), /*#__PURE__*/_jsx(TouchableOpacity, {
+              style: styles.primaryBtnSmall,
+              onPress: () => openRemarksEditor(item),
+              children: /*#__PURE__*/_jsx(Text, {
+                style: styles.primaryBtnSmallText,
+                children: "Add Remarks"
+              })
+            })]
+          })
+        });
+      },
+      ListEmptyComponent: /*#__PURE__*/_jsx(EmptyState, {
+        title: "No students found"
+      })
+    });
+  };
+  return /*#__PURE__*/_jsxs(SafeAreaView, {
+    style: styles.root,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: styles.screenHeader,
+      children: /*#__PURE__*/_jsx(Text, {
+        style: styles.screenTitle,
+        children: "Marks"
+      })
+    }), entryMode === 'filters' ? renderFilters() : null, entryMode === 'scholastic' ? renderScholasticEntry() : null, entryMode === 'coscholastic' ? renderCoScholasticEntry() : null, entryMode === 'remarks' ? renderRemarksEntry() : null, /*#__PURE__*/_jsx(Modal, {
+      visible: gradeModal.visible,
+      transparent: true,
+      animationType: "fade",
+      children: /*#__PURE__*/_jsx(Pressable, {
+        style: styles.modalOverlay,
+        onPress: closeGradePicker,
+        children: /*#__PURE__*/_jsxs(Pressable, {
+          style: styles.modalCard,
+          onPress: () => {},
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.modalTitle,
+            children: gradeModal.title
+          }), /*#__PURE__*/_jsx(FlatList, {
+            data: gradeModal.options,
+            keyExtractor: (item, index) => `${item.value}-${index}`,
+            renderItem: ({
+              item
+            }) => /*#__PURE__*/_jsx(Pressable, {
+              style: styles.optionRow,
+              onPress: () => {
+                gradeModal.onSelect?.(String(item.value));
+                closeGradePicker();
+              },
+              children: /*#__PURE__*/_jsx(Text, {
+                style: styles.optionText,
+                children: item.label
+              })
+            })
+          })]
+        })
+      })
+    }), /*#__PURE__*/_jsx(Modal, {
+      visible: remarkModalVisible,
+      transparent: true,
+      animationType: "slide",
+      children: /*#__PURE__*/_jsx(View, {
+        style: styles.modalOverlay,
+        children: /*#__PURE__*/_jsxs(View, {
+          style: styles.remarkModalCard,
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.remarkHeader,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: styles.modalTitle,
+              children: "Remarks and Others"
+            }), /*#__PURE__*/_jsx(TouchableOpacity, {
+              onPress: () => {
+                setRemarkModalVisible(false);
+                setSelectedRemarkStudent(null);
+              },
+              style: styles.secondaryBtn,
+              children: /*#__PURE__*/_jsx(Text, {
+                style: styles.secondaryBtnText,
+                children: "Close"
+              })
+            })]
+          }), /*#__PURE__*/_jsxs(ScrollView, {
+            showsVerticalScrollIndicator: false,
+            children: [selectedRemarkStudent ? /*#__PURE__*/_jsxs(View, {
+              style: styles.field,
+              children: [/*#__PURE__*/_jsxs(Text, {
+                style: styles.studentName,
+                children: [String(selectedRemarkStudent?.firstname ?? ''), ' ', String(selectedRemarkStudent?.lastname ?? '')]
+              }), /*#__PURE__*/_jsxs(Text, {
+                style: styles.rollText,
+                children: ["Roll No: ", String(selectedRemarkStudent?.roll_no ?? '-')]
+              })]
+            }) : null, /*#__PURE__*/_jsx(SelectField, {
+              label: "Remark",
+              value: remarkForm.selectedRemark ? {
+                label: remarkForm.selectedRemark,
+                value: remarkForm.selectedRemark
+              } : null,
+              options: REMARK_OPTIONS.map(item => ({
+                label: item,
+                value: item
+              })),
+              placeholder: "Select a remark",
+              onChange: next => {
+                const selected = String(next.value);
+                setRemarkForm(prev => ({
+                  ...prev,
+                  selectedRemark: selected,
+                  remarks: selected === 'Others' ? '' : selected
+                }));
+              }
+            }), remarkForm.selectedRemark === 'Others' ? /*#__PURE__*/_jsxs(View, {
+              style: styles.field,
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: styles.label,
+                children: "Custom Remark"
+              }), /*#__PURE__*/_jsx(TextInput, {
+                value: remarkForm.remarks,
+                onChangeText: value => setRemarkForm(prev => ({
+                  ...prev,
+                  remarks: value
+                })),
+                placeholder: "Enter custom remark",
+                placeholderTextColor: "#9CA3AF",
+                multiline: true,
+                style: [styles.input, styles.textarea]
+              })]
+            }) : null, /*#__PURE__*/_jsx(Text, {
+              style: styles.sectionTitle,
+              children: "Meeting Dates"
+            }), [['metting_date_1', 'attended_1'], ['metting_date_2', 'attended_2'], ['metting_date_3', 'attended_3']].map((pair, index) => {
+              const dateKey = pair[0];
+              const attendedKey = pair[1];
+              return /*#__PURE__*/_jsxs(View, {
+                style: styles.doubleRow,
+                children: [/*#__PURE__*/_jsxs(View, {
+                  style: styles.doubleCol,
+                  children: [/*#__PURE__*/_jsxs(Text, {
+                    style: styles.label,
+                    children: ["Date ", index + 1]
+                  }), /*#__PURE__*/_jsx(TextInput, {
+                    value: remarkForm[dateKey],
+                    onChangeText: value => setRemarkForm(prev => ({
+                      ...prev,
+                      [dateKey]: value
+                    })),
+                    placeholder: "Date",
+                    placeholderTextColor: "#9CA3AF",
+                    style: styles.input
+                  })]
+                }), /*#__PURE__*/_jsxs(View, {
+                  style: styles.doubleCol,
+                  children: [/*#__PURE__*/_jsxs(Text, {
+                    style: styles.label,
+                    children: ["Attended ", index + 1]
+                  }), /*#__PURE__*/_jsx(TextInput, {
+                    value: remarkForm[attendedKey],
+                    onChangeText: value => setRemarkForm(prev => ({
+                      ...prev,
+                      [attendedKey]: value
+                    })),
+                    placeholder: "Attended",
+                    placeholderTextColor: "#9CA3AF",
+                    style: styles.input
+                  })]
+                })]
+              }, String(dateKey));
+            }), /*#__PURE__*/_jsx(Text, {
+              style: styles.sectionTitle,
+              children: "Attendance Detailed"
+            }), /*#__PURE__*/_jsxs(View, {
+              style: styles.doubleRow,
+              children: [/*#__PURE__*/_jsxs(View, {
+                style: styles.doubleCol,
+                children: [/*#__PURE__*/_jsx(Text, {
+                  style: styles.label,
+                  children: "Total Working Days"
+                }), /*#__PURE__*/_jsx(TextInput, {
+                  value: remarkForm.working_days,
+                  onChangeText: value => setRemarkForm(prev => ({
+                    ...prev,
+                    working_days: value
+                  })),
+                  placeholder: "Total working days",
+                  placeholderTextColor: "#9CA3AF",
+                  keyboardType: "numeric",
+                  style: styles.input
+                })]
+              }), /*#__PURE__*/_jsxs(View, {
+                style: styles.doubleCol,
+                children: [/*#__PURE__*/_jsx(Text, {
+                  style: styles.label,
+                  children: "Days Present"
+                }), /*#__PURE__*/_jsx(TextInput, {
+                  value: remarkForm.days_present,
+                  onChangeText: value => setRemarkForm(prev => ({
+                    ...prev,
+                    days_present: value
+                  })),
+                  placeholder: "Number of days present",
+                  placeholderTextColor: "#9CA3AF",
+                  keyboardType: "numeric",
+                  style: styles.input
+                })]
+              })]
+            }), /*#__PURE__*/_jsx(TouchableOpacity, {
+              onPress: saveRemarks,
+              style: styles.primaryBtn,
+              children: busy ? /*#__PURE__*/_jsx(ActivityIndicator, {
+                color: "#FFFFFF"
+              }) : /*#__PURE__*/_jsx(Text, {
+                style: styles.primaryBtnText,
+                children: "Save"
+              })
+            })]
+          })]
+        })
+      })
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    backgroundColor: '#F8FAFC'
+  },
+  screenHeader: {
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    borderBottomWidth: 1,
+    borderBottomColor: '#E5E7EB',
+    backgroundColor: '#FFFFFF'
+  },
+  screenTitle: {
+    fontSize: 18,
+    fontWeight: '700',
+    color: '#111827'
+  },
+  content: {
+    padding: 16,
+    gap: 12
+  },
+  card: {
+    backgroundColor: '#FFFFFF',
+    borderWidth: 1,
+    borderColor: '#E5E7EB',
+    borderRadius: 16,
+    padding: 16
+  },
+  cardTitle: {
+    fontSize: 17,
+    fontWeight: '700',
+    color: '#111827',
+    marginBottom: 12
+  },
+  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'
+  },
+  helperText: {
+    marginTop: 10,
+    fontSize: 12,
+    color: '#6B7280'
+  },
+  tabRow: {
+    flexDirection: 'row',
+    gap: 8,
+    flexWrap: 'wrap',
+    marginBottom: 8
+  },
+  tabBtn: {
+    flexGrow: 1,
+    minWidth: '30%',
+    borderWidth: 1,
+    borderColor: '#CBD5E1',
+    borderRadius: 999,
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    alignItems: 'center',
+    backgroundColor: '#FFFFFF'
+  },
+  tabBtnActive: {
+    backgroundColor: '#2563EB',
+    borderColor: '#2563EB'
+  },
+  tabBtnText: {
+    fontSize: 12,
+    fontWeight: '700',
+    color: '#111827'
+  },
+  tabBtnTextActive: {
+    color: '#FFFFFF'
+  },
+  primaryBtn: {
+    marginTop: 16,
+    backgroundColor: '#2563EB',
+    borderRadius: 12,
+    paddingVertical: 14,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  primaryBtnCompact: {
+    flex: 1,
+    backgroundColor: '#2563EB',
+    borderRadius: 12,
+    paddingVertical: 14,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  primaryBtnText: {
+    color: '#FFFFFF',
+    fontSize: 14,
+    fontWeight: '700'
+  },
+  secondaryBtn: {
+    minWidth: 88,
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    borderRadius: 12,
+    backgroundColor: '#E5E7EB',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  secondaryBtnText: {
+    color: '#111827',
+    fontSize: 14,
+    fontWeight: '700'
+  },
+  actionRow: {
+    marginTop: 12,
+    flexDirection: 'row',
+    gap: 10
+  },
+  infoRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    gap: 8,
+    marginTop: 6
+  },
+  infoText: {
+    fontSize: 12,
+    color: '#4B5563',
+    flex: 1
+  },
+  studentCard: {
+    backgroundColor: '#FFFFFF',
+    borderWidth: 1,
+    borderColor: '#E5E7EB',
+    borderRadius: 16,
+    padding: 16,
+    marginBottom: 12
+  },
+  studentHeader: {
+    paddingBottom: 12,
+    marginBottom: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: '#E5E7EB'
+  },
+  studentName: {
+    fontSize: 16,
+    fontWeight: '700',
+    color: '#111827'
+  },
+  rollText: {
+    marginTop: 4,
+    fontSize: 13,
+    color: '#6B7280'
+  },
+  markField: {
+    marginTop: 10,
+    padding: 12,
+    borderWidth: 1,
+    borderColor: '#E5E7EB',
+    borderRadius: 12,
+    backgroundColor: '#F9FAFB'
+  },
+  markHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 8,
+    gap: 8
+  },
+  markLabel: {
+    fontSize: 13,
+    fontWeight: '700',
+    color: '#111827',
+    flex: 1
+  },
+  markMax: {
+    fontSize: 12,
+    color: '#6B7280'
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: '#D1D5DB',
+    borderRadius: 10,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    backgroundColor: '#FFFFFF',
+    color: '#111827'
+  },
+  textarea: {
+    minHeight: 90,
+    textAlignVertical: 'top'
+  },
+  markSelectBtn: {
+    borderWidth: 1,
+    borderColor: '#D1D5DB',
+    borderRadius: 10,
+    paddingHorizontal: 12,
+    paddingVertical: 12,
+    backgroundColor: '#FFFFFF'
+  },
+  markSelectText: {
+    fontSize: 14,
+    color: '#111827'
+  },
+  disabledInput: {
+    opacity: 0.55
+  },
+  toggleLine: {
+    marginTop: 10,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between'
+  },
+  toggleText: {
+    fontSize: 12,
+    color: '#4B5563',
+    fontWeight: '600'
+  },
+  errorText: {
+    marginTop: 6,
+    fontSize: 12,
+    color: '#DC2626'
+  },
+  errorBorder: {
+    borderColor: '#DC2626'
+  },
+  criteriaRow: {
+    flexDirection: 'row',
+    gap: 8,
+    marginTop: 10
+  },
+  criteriaCol: {
+    flex: 1
+  },
+  criteriaLabel: {
+    minHeight: 36,
+    fontSize: 12,
+    fontWeight: '700',
+    color: '#2563EB',
+    textAlign: 'center',
+    marginBottom: 6
+  },
+  primaryBtnSmall: {
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    borderRadius: 10,
+    backgroundColor: '#2563EB',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  primaryBtnSmallText: {
+    color: '#FFFFFF',
+    fontSize: 12,
+    fontWeight: '700'
+  },
+  remarkTopRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12
+  },
+  remarkText: {
+    marginTop: 8,
+    fontSize: 12,
+    color: '#16A34A'
+  },
+  successBorder: {
+    borderLeftWidth: 4,
+    borderLeftColor: '#16A34A'
+  },
+  errorBorderLeft: {
+    borderLeftWidth: 4,
+    borderLeftColor: '#DC2626'
+  },
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.45)',
+    justifyContent: 'center',
+    padding: 16
+  },
+  modalCard: {
+    backgroundColor: '#FFFFFF',
+    borderRadius: 16,
+    maxHeight: '80%',
+    overflow: 'hidden'
+  },
+  modalTitle: {
+    paddingHorizontal: 16,
+    paddingTop: 16,
+    paddingBottom: 8,
+    fontSize: 16,
+    fontWeight: '700',
+    color: '#111827'
+  },
+  optionRow: {
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderTopWidth: 1,
+    borderTopColor: '#F3F4F6'
+  },
+  optionText: {
+    fontSize: 14,
+    color: '#111827'
+  },
+  optionEmpty: {
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    color: '#6B7280'
+  },
+  remarkModalCard: {
+    backgroundColor: '#FFFFFF',
+    borderRadius: 16,
+    maxHeight: '88%',
+    padding: 16
+  },
+  remarkHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 8
+  },
+  sectionTitle: {
+    marginTop: 16,
+    fontSize: 15,
+    fontWeight: '700',
+    color: '#111827'
+  },
+  doubleRow: {
+    flexDirection: 'row',
+    gap: 10,
+    marginTop: 10
+  },
+  doubleCol: {
+    flex: 1
+  }
+});