@ubkinfotech/tecaher-erp 0.1.0

package/lib/module/modules/notes/screens/NotesScreen.js

@@ -0,0 +1,1281 @@
+"use strict";
+
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { ActivityIndicator, Alert, FlatList, Image, Modal, Pressable, RefreshControl, SafeAreaView, ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
+import { useERP } from "../../../core/provider/useERP.js";
+import { EmptyState } from "../../../shared/empty-states/EmptyState.js";
+import { ErrorState } from "../../../shared/empty-states/ErrorState.js";
+import { LoadingState } from "../../../shared/loaders/LoadingState.js";
+import { createNote, fetchNoteDetails, fetchNotesClasses, fetchNotesList, fetchNotesSections, fetchNotesSubjects, updateNote, uploadNoteFile } from "../services/notesService.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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?.data ?? result);
+  return list.map((item, index) => ({
+    label: String(item?.label ?? item?.title ?? item?.name ?? `Option ${index + 1}`),
+    value: item?.value ?? item?.id ?? index + 1,
+    raw: item
+  }));
+}
+function resolveNoteUrl(baseUrl, file) {
+  if (!file) return '';
+  if (/^https?:\/\//i.test(file)) return file;
+  const base = String(baseUrl ?? '').replace(/\/?$/, '/');
+  const normalized = String(file).replace(/^\/+/, '');
+  return `${base}student/note/${normalized}`;
+}
+function isImageUrl(file) {
+  const lower = String(file ?? '').toLowerCase();
+  return lower.endsWith('.png') || lower.endsWith('.jpg') || lower.endsWith('.jpeg') || lower.endsWith('.webp') || lower.endsWith('.gif');
+}
+function fileBaseName(path) {
+  const raw = String(path ?? '');
+  const cleaned = raw.split('?')[0] ?? raw;
+  const parts = cleaned.split(/[\\/]/);
+  return parts[parts.length - 1] || raw;
+}
+function ensureFileUri(path) {
+  return path.startsWith('file://') ? path : `file://${path}`;
+}
+function tryGetImageViewer() {
+  try {
+    const mod = require('react-native-image-viewing');
+    return mod?.default ?? mod;
+  } catch {
+    return null;
+  }
+}
+function tryGetPdf() {
+  try {
+    const mod = require('react-native-pdf');
+    return mod?.default ?? mod;
+  } catch {
+    return null;
+  }
+}
+function tryGetRNFS() {
+  try {
+    return require('react-native-fs');
+  } catch {
+    return null;
+  }
+}
+function tryGetFileViewer() {
+  try {
+    return require('react-native-file-viewer');
+  } catch {
+    return null;
+  }
+}
+async function downloadPdfToLocal(args) {
+  const safeName = fileBaseName(args.fileName || `document-${Date.now()}.pdf`) || `document-${Date.now()}.pdf`;
+  const target = `${args.RNFS.CachesDirectoryPath}/${safeName}`;
+  const result = await args.RNFS.downloadFile({
+    fromUrl: args.url,
+    toFile: target,
+    headers: args.headers ?? {}
+  }).promise;
+  if (result?.statusCode && result.statusCode >= 400) {
+    throw new Error(`PDF download failed with status ${result.statusCode}`);
+  }
+  const exists = await args.RNFS.exists(target);
+  if (!exists) {
+    throw new Error('Downloaded PDF file is missing');
+  }
+  return ensureFileUri(target);
+}
+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, {
+      style: styles.select,
+      onPress: () => setOpen(true),
+      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(TouchableOpacity, {
+              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 NoteEditor(props) {
+  const {
+    api,
+    fileBaseUrl,
+    authToken,
+    getAuthToken,
+    schoolCode
+  } = useERP();
+  const ImageView = useMemo(() => tryGetImageViewer(), []);
+  const Pdf = useMemo(() => tryGetPdf(), []);
+  const RNFS = useMemo(() => tryGetRNFS(), []);
+  const FileViewer = useMemo(() => tryGetFileViewer(), []);
+  const [loading, setLoading] = useState(props.mode === 'edit');
+  const [saving, setSaving] = useState(false);
+  const [classes, setClasses] = useState([]);
+  const [sections, setSections] = useState([]);
+  const [subjects, setSubjects] = useState([]);
+  const [title, setTitle] = useState('');
+  const [description, setDescription] = useState('');
+  const [status, setStatus] = useState('publish');
+  const [classOpt, setClassOpt] = useState(null);
+  const [sectionOpt, setSectionOpt] = useState(null);
+  const [subjectOpt, setSubjectOpt] = useState(null);
+  const [file, setFile] = useState('');
+  const [viewerOpen, setViewerOpen] = useState(false);
+  const [pdfVisible, setPdfVisible] = useState(false);
+  const [pdfUri, setPdfUri] = useState('');
+  const [pdfHeaders, setPdfHeaders] = useState({});
+  const [pdfLoading, setPdfLoading] = useState(false);
+  const [downloading, setDownloading] = useState(false);
+  const resolveHeaders = useCallback(async () => {
+    const nextToken = (await getAuthToken?.()) ?? authToken;
+    return {
+      ...(nextToken ? {
+        Authorization: nextToken
+      } : {}),
+      ...(schoolCode ? {
+        school_code: schoolCode
+      } : {})
+    };
+  }, [authToken, getAuthToken, schoolCode]);
+  useEffect(() => {
+    fetchNotesClasses(api).then(res => {
+      const classOptions = normalizeOptions(res);
+      setClasses(classOptions);
+    }).catch(() => {});
+  }, [api]);
+  useEffect(() => {
+    if (!classOpt?.value) {
+      setSections([]);
+      setSubjects([]);
+      return;
+    }
+    fetchNotesSections(api, {
+      classId: classOpt.value
+    }).then(res => setSections(normalizeOptions(res))).catch(() => {});
+    if (props.sessionId !== undefined) {
+      fetchNotesSubjects(api, {
+        classId: classOpt.value,
+        sessionId: props.sessionId
+      }).then(res => setSubjects(normalizeOptions(res))).catch(() => {});
+    }
+  }, [api, classOpt?.value, props.sessionId]);
+  useEffect(() => {
+    if (props.mode !== 'edit' || !props.noteId) {
+      return;
+    }
+    const load = async () => {
+      try {
+        setLoading(true);
+        const res = await fetchNoteDetails(api, {
+          noteId: props.noteId
+        });
+        const data = res?.data ?? res ?? {};
+        setTitle(String(data?.title ?? ''));
+        setDescription(String(data?.description ?? data?.remark ?? ''));
+        setStatus(String(data?.status ?? 'publish').toLowerCase() === 'unpublish' ? 'unpublish' : 'publish');
+        setFile(String(data?.file ?? ''));
+        const classId = data?.class_id ?? props.defaults.classId;
+        const sectionId = data?.section_id ?? props.defaults.sectionId;
+        const subjectId = data?.sub_id ?? data?.subject_id ?? props.defaults.subjectId;
+        if (classId !== undefined) {
+          const nextClass = normalizeOptions(await fetchNotesClasses(api)).find(it => String(it.value) === String(classId)) ?? null;
+          setClasses(normalizeOptions(await fetchNotesClasses(api)));
+          setClassOpt(nextClass);
+          if (nextClass) {
+            const sectionOptions = normalizeOptions(await fetchNotesSections(api, {
+              classId: nextClass.value
+            }));
+            setSections(sectionOptions);
+            setSectionOpt(sectionOptions.find(it => String(it.value) === String(sectionId)) ?? null);
+            if (props.sessionId !== undefined) {
+              const subjectOptions = normalizeOptions(await fetchNotesSubjects(api, {
+                classId: nextClass.value,
+                sessionId: props.sessionId
+              }));
+              setSubjects(subjectOptions);
+              setSubjectOpt(subjectOptions.find(it => String(it.value) === String(subjectId)) ?? null);
+            }
+          }
+        }
+      } catch (e) {
+        Alert.alert('Error', String(e?.message ?? 'Could not load note details'));
+      } finally {
+        setLoading(false);
+      }
+    };
+    load().catch(() => {});
+  }, [api, props.defaults.classId, props.defaults.sectionId, props.defaults.subjectId, props.mode, props.noteId, props.sessionId]);
+  useEffect(() => {
+    if (props.mode !== 'create' || !classes.length) return;
+    if (props.defaults.classId !== undefined && !classOpt) {
+      setClassOpt(classes.find(it => String(it.value) === String(props.defaults.classId)) ?? null);
+    }
+  }, [classOpt, classes, props.defaults.classId, props.mode]);
+  useEffect(() => {
+    if (!sections.length || props.mode !== 'create' || sectionOpt) return;
+    if (props.defaults.sectionId !== undefined) {
+      setSectionOpt(sections.find(it => String(it.value) === String(props.defaults.sectionId)) ?? null);
+    }
+  }, [props.defaults.sectionId, props.mode, sectionOpt, sections]);
+  const pickDocument = useCallback(async () => {
+    let dp = null;
+    try {
+      dp = require('react-native-document-picker');
+    } catch {}
+    if (!dp) return;
+    const selected = await dp.pickSingle({
+      presentationStyle: 'fullScreen',
+      type: [dp.types.pdf, dp.types.images]
+    });
+    const upload = {
+      uri: selected.uri,
+      name: selected.name ?? 'file',
+      type: selected.type ?? 'application/octet-stream'
+    };
+    setSaving(true);
+    try {
+      const res = await uploadNoteFile(api, upload);
+      if (res?.Status === 'Success' && res?.data) {
+        setFile(String(res.data));
+      } else {
+        Alert.alert('Error', 'File not uploaded');
+      }
+    } finally {
+      setSaving(false);
+    }
+  }, [api]);
+  const pickCamera = useCallback(async () => {
+    let picker = null;
+    try {
+      picker = require('react-native-image-picker');
+    } catch {}
+    if (!picker?.launchCamera) return;
+    const res = await new Promise(resolve => {
+      picker.launchCamera({
+        mediaType: 'photo',
+        saveToPhotos: true,
+        includeBase64: false
+      }, r => resolve(r));
+    });
+    const asset = res?.assets?.[0];
+    if (!asset?.uri) return;
+    const upload = {
+      uri: asset.uri,
+      name: asset.fileName ?? 'camera.jpg',
+      type: asset.type ?? 'image/jpeg'
+    };
+    setSaving(true);
+    try {
+      const response = await uploadNoteFile(api, upload);
+      if (response?.Status === 'Success' && response?.data) {
+        setFile(String(response.data));
+      } else {
+        Alert.alert('Error', 'File not uploaded');
+      }
+    } finally {
+      setSaving(false);
+    }
+  }, [api]);
+  const viewAttachment = useCallback(async () => {
+    if (!file) {
+      Alert.alert('No Attachment');
+      return;
+    }
+    const url = resolveNoteUrl(fileBaseUrl, file);
+    const headers = await resolveHeaders();
+    if (ImageView && isImageUrl(file)) {
+      setViewerOpen(true);
+      return;
+    }
+    const isPdf = String(file).toLowerCase().endsWith('.pdf') || url.toLowerCase().endsWith('.pdf');
+    if (Pdf && isPdf) {
+      if (!RNFS) {
+        setPdfHeaders(headers);
+        setPdfUri(url);
+        setPdfVisible(true);
+        return;
+      }
+      setDownloading(true);
+      setPdfLoading(true);
+      try {
+        const local = await downloadPdfToLocal({
+          RNFS,
+          url,
+          fileName: fileBaseName(file),
+          headers
+        });
+        setPdfHeaders({});
+        setPdfUri(local);
+        setPdfVisible(true);
+      } catch (e) {
+        Alert.alert('Error', String(e?.message ?? 'Could not open PDF'));
+      } finally {
+        setDownloading(false);
+        setPdfLoading(false);
+      }
+      return;
+    }
+    if (!RNFS || !FileViewer) {
+      Alert.alert('Viewer Missing', 'Install react-native-fs and react-native-file-viewer.');
+      return;
+    }
+    setDownloading(true);
+    try {
+      const localFile = `${RNFS.DocumentDirectoryPath}/${fileBaseName(file)}`;
+      await RNFS.downloadFile({
+        fromUrl: url,
+        toFile: localFile,
+        headers
+      }).promise;
+      await FileViewer.open(localFile, {
+        showOpenWithDialog: true
+      });
+    } catch {
+      Alert.alert('Error', 'Could not view the file.');
+    } finally {
+      setDownloading(false);
+    }
+  }, [FileViewer, ImageView, Pdf, RNFS, file, fileBaseUrl, resolveHeaders]);
+  const submit = useCallback(async () => {
+    if (!title || !description || !classOpt?.value || !sectionOpt?.value || !subjectOpt?.value || !file) {
+      Alert.alert('Error', 'Please enter all the details');
+      return;
+    }
+    const payload = {
+      id: props.noteId ?? undefined,
+      title,
+      description,
+      remark: description,
+      class_id: classOpt.value,
+      section_id: sectionOpt.value,
+      sub_id: subjectOpt.value,
+      file,
+      status
+    };
+    setSaving(true);
+    try {
+      const res = props.mode === 'create' ? await createNote(api, payload) : await updateNote(api, {
+        ...payload,
+        id: props.noteId ?? payload.id
+      });
+      const response = res;
+      if (response?.Status && response.Status !== 'Success') {
+        Alert.alert('Failed', String(response?.msg ?? 'Request failed'));
+        return;
+      }
+      Alert.alert('Success', props.mode === 'create' ? 'Note created successfully' : 'Note updated successfully');
+      props.onDone();
+    } catch (e) {
+      Alert.alert('Error', String(e?.message ?? 'Could not save note'));
+    } finally {
+      setSaving(false);
+    }
+  }, [api, classOpt?.value, description, file, props, sectionOpt?.value, status, subjectOpt?.value, title]);
+  if (loading) {
+    return /*#__PURE__*/_jsx(LoadingState, {});
+  }
+  const fileUrl = file ? resolveNoteUrl(fileBaseUrl, file) : '';
+  const headers = authToken || schoolCode ? {
+    ...(authToken ? {
+      Authorization: authToken
+    } : {}),
+    ...(schoolCode ? {
+      school_code: schoolCode
+    } : {})
+  } : undefined;
+  return /*#__PURE__*/_jsxs(SafeAreaView, {
+    style: styles.root,
+    children: [/*#__PURE__*/_jsxs(ScrollView, {
+      contentContainerStyle: styles.content,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.headerRow,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.title,
+          children: props.mode === 'create' ? 'Create Note' : 'Edit Note'
+        }), /*#__PURE__*/_jsx(TouchableOpacity, {
+          onPress: props.onCancel,
+          style: styles.secondaryBtn,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.secondaryBtnText,
+            children: "Back"
+          })
+        })]
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.card,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.field,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.label,
+            children: "Title"
+          }), /*#__PURE__*/_jsx(TextInput, {
+            value: title,
+            onChangeText: setTitle,
+            style: styles.input,
+            placeholder: "Enter title",
+            placeholderTextColor: "#9CA3AF"
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.field,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.label,
+            children: "Description"
+          }), /*#__PURE__*/_jsx(TextInput, {
+            value: description,
+            onChangeText: setDescription,
+            style: [styles.input, styles.textarea],
+            placeholder: "Enter description",
+            placeholderTextColor: "#9CA3AF",
+            multiline: true
+          })]
+        }), /*#__PURE__*/_jsx(SelectField, {
+          label: "Class",
+          value: classOpt,
+          options: classes,
+          placeholder: "Select class",
+          onChange: setClassOpt
+        }), /*#__PURE__*/_jsx(SelectField, {
+          label: "Section",
+          value: sectionOpt,
+          options: sections,
+          placeholder: "Select section",
+          onChange: setSectionOpt
+        }), /*#__PURE__*/_jsx(SelectField, {
+          label: "Subject",
+          value: subjectOpt,
+          options: subjects,
+          placeholder: props.sessionId === undefined ? 'Provide sessionId' : 'Select subject',
+          onChange: setSubjectOpt
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.field,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.label,
+            children: "Status"
+          }), /*#__PURE__*/_jsxs(View, {
+            style: styles.row,
+            children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+              style: [styles.chip, status === 'publish' ? styles.chipActive : null],
+              onPress: () => setStatus('publish'),
+              children: /*#__PURE__*/_jsx(Text, {
+                style: [styles.chipText, status === 'publish' ? styles.chipTextActive : null],
+                children: "Publish"
+              })
+            }), /*#__PURE__*/_jsx(TouchableOpacity, {
+              style: [styles.chip, status === 'unpublish' ? styles.chipActive : null],
+              onPress: () => setStatus('unpublish'),
+              children: /*#__PURE__*/_jsx(Text, {
+                style: [styles.chipText, status === 'unpublish' ? styles.chipTextActive : null],
+                children: "Unpublish"
+              })
+            })]
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.field,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.label,
+            children: "Attachment"
+          }), /*#__PURE__*/_jsxs(View, {
+            style: styles.row,
+            children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+              style: styles.secondaryBtn,
+              onPress: () => pickDocument().catch(() => {}),
+              children: /*#__PURE__*/_jsx(Text, {
+                style: styles.secondaryBtnText,
+                children: file ? 'Change File' : 'Upload File'
+              })
+            }), /*#__PURE__*/_jsx(TouchableOpacity, {
+              style: styles.secondaryBtn,
+              onPress: () => pickCamera().catch(() => {}),
+              children: /*#__PURE__*/_jsx(Text, {
+                style: styles.secondaryBtnText,
+                children: "Camera"
+              })
+            })]
+          }), file ? /*#__PURE__*/_jsxs(Text, {
+            style: styles.fileText,
+            children: ["Selected: ", fileBaseName(file)]
+          }) : null, file ? isImageUrl(file) ? /*#__PURE__*/_jsx(TouchableOpacity, {
+            style: styles.previewWrap,
+            onPress: () => setViewerOpen(true),
+            activeOpacity: 0.9,
+            children: /*#__PURE__*/_jsx(Image, {
+              source: {
+                uri: fileUrl,
+                headers
+              },
+              style: styles.previewImage,
+              resizeMode: "contain"
+            })
+          }) : /*#__PURE__*/_jsx(TouchableOpacity, {
+            style: styles.documentBtn,
+            onPress: () => viewAttachment().catch(() => {}),
+            disabled: downloading,
+            children: /*#__PURE__*/_jsx(Text, {
+              style: styles.documentBtnText,
+              children: downloading ? 'Opening Document...' : 'View Document'
+            })
+          }) : null]
+        }), /*#__PURE__*/_jsx(TouchableOpacity, {
+          style: styles.primaryBtn,
+          onPress: () => submit().catch(() => {}),
+          disabled: saving,
+          children: saving ? /*#__PURE__*/_jsx(ActivityIndicator, {
+            color: "#FFFFFF"
+          }) : /*#__PURE__*/_jsx(Text, {
+            style: styles.primaryBtnText,
+            children: props.mode === 'create' ? 'Create Note' : 'Update Note'
+          })
+        })]
+      })]
+    }), ImageView && file && isImageUrl(file) ? /*#__PURE__*/_jsx(ImageView, {
+      images: [{
+        uri: fileUrl,
+        headers
+      }],
+      imageIndex: 0,
+      visible: viewerOpen,
+      onRequestClose: () => setViewerOpen(false)
+    }) : null, /*#__PURE__*/_jsx(Modal, {
+      visible: pdfVisible,
+      animationType: "slide",
+      children: /*#__PURE__*/_jsxs(SafeAreaView, {
+        style: styles.root,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.headerRow,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.title,
+            children: "PDF Viewer"
+          }), /*#__PURE__*/_jsx(TouchableOpacity, {
+            onPress: () => {
+              setPdfVisible(false);
+              setPdfUri('');
+              setPdfHeaders({});
+            },
+            style: styles.secondaryBtn,
+            children: /*#__PURE__*/_jsx(Text, {
+              style: styles.secondaryBtnText,
+              children: "Close"
+            })
+          })]
+        }), pdfLoading ? /*#__PURE__*/_jsx(LoadingState, {}) : Pdf && pdfUri ? /*#__PURE__*/_jsx(Pdf, {
+          source: {
+            uri: pdfUri,
+            cache: true,
+            headers: pdfHeaders
+          },
+          style: {
+            flex: 1
+          }
+        }) : /*#__PURE__*/_jsx(EmptyState, {
+          title: "PDF Viewer Missing"
+        })]
+      })
+    })]
+  });
+}
+export function NotesScreen(props) {
+  const {
+    api,
+    fileBaseUrl,
+    authToken,
+    getAuthToken,
+    schoolCode
+  } = useERP();
+  const ImageView = useMemo(() => tryGetImageViewer(), []);
+  const Pdf = useMemo(() => tryGetPdf(), []);
+  const RNFS = useMemo(() => tryGetRNFS(), []);
+  const FileViewer = useMemo(() => tryGetFileViewer(), []);
+  const [mode, setMode] = useState('list');
+  const [editNoteId, setEditNoteId] = useState(null);
+  const [classes, setClasses] = useState([]);
+  const [sections, setSections] = useState([]);
+  const [subjects, setSubjects] = useState([]);
+  const [classOpt, setClassOpt] = useState(null);
+  const [sectionOpt, setSectionOpt] = useState(null);
+  const [subjectOpt, setSubjectOpt] = useState(null);
+  const [items, setItems] = useState([]);
+  const [page, setPage] = useState(props.page ?? 1);
+  const [totalPages, setTotalPages] = useState(1);
+  const [loading, setLoading] = useState(true);
+  const [refreshing, setRefreshing] = useState(false);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [error, setError] = useState(null);
+  const [selectedNote, setSelectedNote] = useState(null);
+  const [viewerOpen, setViewerOpen] = useState(false);
+  const [pdfVisible, setPdfVisible] = useState(false);
+  const [pdfUri, setPdfUri] = useState('');
+  const [pdfHeaders, setPdfHeaders] = useState({});
+  const [pdfLoading, setPdfLoading] = useState(false);
+  const [downloading, setDownloading] = useState(false);
+  const resolveHeaders = useCallback(async () => {
+    const nextToken = (await getAuthToken?.()) ?? authToken;
+    return {
+      ...(nextToken ? {
+        Authorization: nextToken
+      } : {}),
+      ...(schoolCode ? {
+        school_code: schoolCode
+      } : {})
+    };
+  }, [authToken, getAuthToken, schoolCode]);
+  useEffect(() => {
+    fetchNotesClasses(api).then(res => {
+      const opts = normalizeOptions(res);
+      setClasses(opts);
+      if (props.classId !== undefined) {
+        setClassOpt(opts.find(it => String(it.value) === String(props.classId)) ?? null);
+      }
+    }).catch(e => setError(String(e?.message ?? 'Could not load classes')));
+  }, [api, props.classId]);
+  useEffect(() => {
+    if (!classOpt?.value) {
+      setSections([]);
+      setSubjects([]);
+      setSectionOpt(props.sectionId === undefined ? null : sectionOpt);
+      return;
+    }
+    fetchNotesSections(api, {
+      classId: classOpt.value
+    }).then(res => {
+      const opts = normalizeOptions(res);
+      setSections(opts);
+      if (props.sectionId !== undefined) {
+        setSectionOpt(opts.find(it => String(it.value) === String(props.sectionId)) ?? null);
+      }
+    }).catch(() => {});
+    if (props.sessionId !== undefined) {
+      fetchNotesSubjects(api, {
+        classId: classOpt.value,
+        sessionId: props.sessionId
+      }).then(res => setSubjects(normalizeOptions(res))).catch(() => {});
+    }
+  }, [api, classOpt?.value, props.sectionId, props.sessionId]);
+  const loadList = useCallback(async (nextPage, reset = false) => {
+    try {
+      if (reset) {
+        setRefreshing(true);
+      } else if (nextPage === (props.page ?? 1) && !items.length) {
+        setLoading(true);
+      } else {
+        setLoadingMore(true);
+      }
+      setError(null);
+      const res = await fetchNotesList(api, {
+        page: nextPage,
+        perPage: props.perPage,
+        classId: classOpt?.value,
+        sectionId: sectionOpt?.value,
+        subjectId: subjectOpt?.value
+      });
+      const list = normalizeList(res?.data ?? res);
+      setItems(prev => reset ? list : [...prev, ...list]);
+      setPage(nextPage);
+      setTotalPages(Number(res?.pagination?.total_pages ?? 1));
+    } catch (e) {
+      setError(String(e?.message ?? 'Could not load notes'));
+    } finally {
+      setLoading(false);
+      setRefreshing(false);
+      setLoadingMore(false);
+    }
+  }, [api, classOpt?.value, items.length, props.page, props.perPage, sectionOpt?.value, subjectOpt?.value]);
+  useEffect(() => {
+    if (mode !== 'list') return;
+    loadList(props.page ?? 1, true).catch(() => {});
+  }, [loadList, mode, props.page]);
+  const viewNoteAttachment = useCallback(async () => {
+    const file = String(selectedNote?.file ?? '');
+    if (!file) {
+      Alert.alert('No Attachment');
+      return;
+    }
+    const url = resolveNoteUrl(fileBaseUrl, file);
+    const headers = await resolveHeaders();
+    if (ImageView && isImageUrl(file)) {
+      setViewerOpen(true);
+      return;
+    }
+    const isPdf = String(file).toLowerCase().endsWith('.pdf') || url.toLowerCase().endsWith('.pdf');
+    if (Pdf && isPdf) {
+      if (!RNFS) {
+        setPdfHeaders(headers);
+        setPdfUri(url);
+        setPdfVisible(true);
+        return;
+      }
+      setDownloading(true);
+      setPdfLoading(true);
+      try {
+        const local = await downloadPdfToLocal({
+          RNFS,
+          url,
+          fileName: fileBaseName(file),
+          headers
+        });
+        setPdfHeaders({});
+        setPdfUri(local);
+        setPdfVisible(true);
+      } catch (e) {
+        Alert.alert('Error', String(e?.message ?? 'Could not open PDF'));
+      } finally {
+        setDownloading(false);
+        setPdfLoading(false);
+      }
+      return;
+    }
+    if (!RNFS || !FileViewer) {
+      Alert.alert('Viewer Missing', 'Install react-native-fs and react-native-file-viewer.');
+      return;
+    }
+    setDownloading(true);
+    try {
+      const localFile = `${RNFS.DocumentDirectoryPath}/${fileBaseName(file)}`;
+      await RNFS.downloadFile({
+        fromUrl: url,
+        toFile: localFile,
+        headers
+      }).promise;
+      await FileViewer.open(localFile, {
+        showOpenWithDialog: true
+      });
+    } catch {
+      Alert.alert('Error', 'Could not view the file.');
+    } finally {
+      setDownloading(false);
+    }
+  }, [FileViewer, ImageView, Pdf, RNFS, fileBaseUrl, resolveHeaders, selectedNote?.file]);
+  if (mode === 'create') {
+    return /*#__PURE__*/_jsx(NoteEditor, {
+      mode: "create",
+      sessionId: props.sessionId,
+      defaults: {
+        classId: classOpt?.value ?? props.classId,
+        sectionId: sectionOpt?.value ?? props.sectionId,
+        subjectId: subjectOpt?.value
+      },
+      onDone: () => {
+        setMode('list');
+        loadList(props.page ?? 1, true).catch(() => {});
+      },
+      onCancel: () => setMode('list')
+    });
+  }
+  if (mode === 'edit' && editNoteId !== null) {
+    return /*#__PURE__*/_jsx(NoteEditor, {
+      mode: "edit",
+      noteId: editNoteId,
+      sessionId: props.sessionId,
+      defaults: {
+        classId: classOpt?.value ?? props.classId,
+        sectionId: sectionOpt?.value ?? props.sectionId,
+        subjectId: subjectOpt?.value
+      },
+      onDone: () => {
+        setMode('list');
+        setEditNoteId(null);
+        loadList(props.page ?? 1, true).catch(() => {});
+      },
+      onCancel: () => {
+        setMode('list');
+        setEditNoteId(null);
+      }
+    });
+  }
+  if (loading && !items.length) {
+    return /*#__PURE__*/_jsx(LoadingState, {});
+  }
+  if (error && !items.length) {
+    return /*#__PURE__*/_jsx(ErrorState, {
+      message: error
+    });
+  }
+  return /*#__PURE__*/_jsxs(SafeAreaView, {
+    style: styles.root,
+    children: [/*#__PURE__*/_jsx(FlatList, {
+      data: items,
+      keyExtractor: (item, index) => String(item?.id ?? index),
+      contentContainerStyle: styles.content,
+      refreshControl: /*#__PURE__*/_jsx(RefreshControl, {
+        refreshing: refreshing,
+        onRefresh: () => {
+          loadList(props.page ?? 1, true).catch(() => {});
+        },
+        tintColor: "#1D4ED8"
+      }),
+      ListHeaderComponent: /*#__PURE__*/_jsxs(View, {
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.headerRow,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.title,
+            children: "Notes"
+          }), /*#__PURE__*/_jsx(TouchableOpacity, {
+            style: styles.primaryBtnCompact,
+            onPress: () => setMode('create'),
+            children: /*#__PURE__*/_jsx(Text, {
+              style: styles.primaryBtnText,
+              children: "Create"
+            })
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.card,
+          children: [/*#__PURE__*/_jsx(SelectField, {
+            label: "Class",
+            value: classOpt,
+            options: classes,
+            placeholder: "All classes",
+            onChange: next => {
+              setClassOpt(next);
+              setSectionOpt(null);
+              setSubjectOpt(null);
+            }
+          }), /*#__PURE__*/_jsx(SelectField, {
+            label: "Section",
+            value: sectionOpt,
+            options: sections,
+            placeholder: "All sections",
+            onChange: setSectionOpt
+          }), /*#__PURE__*/_jsx(SelectField, {
+            label: "Subject",
+            value: subjectOpt,
+            options: subjects,
+            placeholder: props.sessionId === undefined ? 'Provide sessionId' : 'All subjects',
+            onChange: setSubjectOpt
+          }), /*#__PURE__*/_jsx(TouchableOpacity, {
+            style: styles.primaryBtn,
+            onPress: () => loadList(props.page ?? 1, true).catch(() => {}),
+            children: /*#__PURE__*/_jsx(Text, {
+              style: styles.primaryBtnText,
+              children: "Search"
+            })
+          })]
+        })]
+      }),
+      renderItem: ({
+        item
+      }) => /*#__PURE__*/_jsxs(View, {
+        style: styles.card,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.noteTitle,
+          children: String(item?.title ?? 'Note')
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.noteDesc,
+          numberOfLines: 3,
+          children: String(item?.description ?? item?.remark ?? '-')
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.noteMeta,
+          children: String(item?.created_at ?? '')
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.row,
+          children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+            style: styles.secondaryBtn,
+            onPress: () => setSelectedNote(item),
+            children: /*#__PURE__*/_jsx(Text, {
+              style: styles.secondaryBtnText,
+              children: "View"
+            })
+          }), /*#__PURE__*/_jsx(TouchableOpacity, {
+            style: styles.secondaryBtn,
+            onPress: () => {
+              setEditNoteId(item?.id ?? null);
+              setMode('edit');
+            },
+            children: /*#__PURE__*/_jsx(Text, {
+              style: styles.secondaryBtnText,
+              children: "Edit"
+            })
+          })]
+        })]
+      }),
+      ListEmptyComponent: /*#__PURE__*/_jsx(EmptyState, {
+        title: "No Data Found"
+      }),
+      onEndReached: () => {
+        if (!loadingMore && page < totalPages) {
+          loadList(page + 1).catch(() => {});
+        }
+      },
+      onEndReachedThreshold: 0.4,
+      ListFooterComponent: loadingMore ? /*#__PURE__*/_jsx(ActivityIndicator, {
+        color: "#1D4ED8"
+      }) : null
+    }), /*#__PURE__*/_jsx(Modal, {
+      visible: selectedNote !== null,
+      transparent: true,
+      animationType: "slide",
+      children: /*#__PURE__*/_jsx(Pressable, {
+        style: styles.modalOverlay,
+        onPress: () => setSelectedNote(null),
+        children: /*#__PURE__*/_jsxs(Pressable, {
+          style: styles.detailCard,
+          onPress: () => {},
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.headerRow,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: styles.title,
+              children: "Note Details"
+            }), /*#__PURE__*/_jsx(TouchableOpacity, {
+              onPress: () => setSelectedNote(null),
+              style: styles.secondaryBtn,
+              children: /*#__PURE__*/_jsx(Text, {
+                style: styles.secondaryBtnText,
+                children: "Close"
+              })
+            })]
+          }), selectedNote ? /*#__PURE__*/_jsxs(ScrollView, {
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: styles.noteTitle,
+              children: String(selectedNote?.title ?? '')
+            }), /*#__PURE__*/_jsx(Text, {
+              style: styles.noteMeta,
+              children: String(selectedNote?.created_at ?? '')
+            }), /*#__PURE__*/_jsx(Text, {
+              style: styles.noteDescFull,
+              children: String(selectedNote?.description ?? selectedNote?.remark ?? '-')
+            }), selectedNote?.file ? isImageUrl(String(selectedNote.file)) ? /*#__PURE__*/_jsx(TouchableOpacity, {
+              style: styles.previewWrap,
+              onPress: () => setViewerOpen(true),
+              activeOpacity: 0.9,
+              children: /*#__PURE__*/_jsx(Image, {
+                source: {
+                  uri: resolveNoteUrl(fileBaseUrl, String(selectedNote.file)),
+                  headers: authToken || schoolCode ? {
+                    ...(authToken ? {
+                      Authorization: authToken
+                    } : {}),
+                    ...(schoolCode ? {
+                      school_code: schoolCode
+                    } : {})
+                  } : undefined
+                },
+                style: styles.previewImage,
+                resizeMode: "contain"
+              })
+            }) : /*#__PURE__*/_jsx(TouchableOpacity, {
+              style: styles.documentBtn,
+              onPress: () => viewNoteAttachment().catch(() => {}),
+              disabled: downloading,
+              children: /*#__PURE__*/_jsx(Text, {
+                style: styles.documentBtnText,
+                children: downloading ? 'Opening Document...' : 'View Document'
+              })
+            }) : null]
+          }) : null]
+        })
+      })
+    }), ImageView && selectedNote?.file && isImageUrl(String(selectedNote.file)) ? /*#__PURE__*/_jsx(ImageView, {
+      images: [{
+        uri: resolveNoteUrl(fileBaseUrl, String(selectedNote.file))
+      }],
+      imageIndex: 0,
+      visible: viewerOpen,
+      onRequestClose: () => setViewerOpen(false)
+    }) : null, /*#__PURE__*/_jsx(Modal, {
+      visible: pdfVisible,
+      animationType: "slide",
+      children: /*#__PURE__*/_jsxs(SafeAreaView, {
+        style: styles.root,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.headerRow,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.title,
+            children: "PDF Viewer"
+          }), /*#__PURE__*/_jsx(TouchableOpacity, {
+            onPress: () => {
+              setPdfVisible(false);
+              setPdfUri('');
+              setPdfHeaders({});
+            },
+            style: styles.secondaryBtn,
+            children: /*#__PURE__*/_jsx(Text, {
+              style: styles.secondaryBtnText,
+              children: "Close"
+            })
+          })]
+        }), pdfLoading ? /*#__PURE__*/_jsx(LoadingState, {}) : Pdf && pdfUri ? /*#__PURE__*/_jsx(Pdf, {
+          source: {
+            uri: pdfUri,
+            cache: true,
+            headers: pdfHeaders
+          },
+          style: {
+            flex: 1
+          }
+        }) : /*#__PURE__*/_jsx(EmptyState, {
+          title: "PDF Viewer Missing"
+        })]
+      })
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    backgroundColor: '#F9FAFB'
+  },
+  content: {
+    padding: 16,
+    paddingBottom: 32
+  },
+  headerRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 12,
+    marginBottom: 12
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: '700',
+    color: '#111827'
+  },
+  card: {
+    backgroundColor: '#FFFFFF',
+    borderWidth: 1,
+    borderColor: '#E5E7EB',
+    borderRadius: 14,
+    padding: 14,
+    marginBottom: 12
+  },
+  field: {
+    marginBottom: 12
+  },
+  label: {
+    fontSize: 13,
+    fontWeight: '600',
+    color: '#1F2937',
+    marginBottom: 6
+  },
+  select: {
+    borderWidth: 1,
+    borderColor: '#D1D5DB',
+    borderRadius: 10,
+    backgroundColor: '#FFFFFF',
+    paddingHorizontal: 12,
+    paddingVertical: 12
+  },
+  selectText: {
+    fontSize: 14,
+    color: '#111827'
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: '#D1D5DB',
+    borderRadius: 10,
+    backgroundColor: '#FFFFFF',
+    paddingHorizontal: 12,
+    paddingVertical: 12,
+    fontSize: 14,
+    color: '#111827'
+  },
+  textarea: {
+    minHeight: 120,
+    textAlignVertical: 'top'
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+    flexWrap: 'wrap'
+  },
+  primaryBtn: {
+    backgroundColor: '#1D4ED8',
+    borderRadius: 12,
+    paddingVertical: 14,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginTop: 6
+  },
+  primaryBtnCompact: {
+    backgroundColor: '#1D4ED8',
+    borderRadius: 10,
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  primaryBtnText: {
+    color: '#FFFFFF',
+    fontSize: 14,
+    fontWeight: '700'
+  },
+  secondaryBtn: {
+    borderWidth: 1,
+    borderColor: '#BFDBFE',
+    backgroundColor: '#EFF6FF',
+    borderRadius: 10,
+    paddingHorizontal: 14,
+    paddingVertical: 10
+  },
+  secondaryBtnText: {
+    fontSize: 14,
+    fontWeight: '700',
+    color: '#1D4ED8'
+  },
+  chip: {
+    flex: 1,
+    minWidth: 120,
+    borderWidth: 1,
+    borderColor: '#BFDBFE',
+    backgroundColor: '#EFF6FF',
+    paddingVertical: 10,
+    borderRadius: 10,
+    alignItems: 'center'
+  },
+  chipActive: {
+    backgroundColor: '#1D4ED8',
+    borderColor: '#1D4ED8'
+  },
+  chipText: {
+    fontSize: 14,
+    fontWeight: '700',
+    color: '#1D4ED8'
+  },
+  chipTextActive: {
+    color: '#FFFFFF'
+  },
+  fileText: {
+    fontSize: 13,
+    color: '#374151',
+    marginTop: 8
+  },
+  previewWrap: {
+    marginTop: 12,
+    borderWidth: 1,
+    borderColor: '#E5E7EB',
+    borderRadius: 12,
+    overflow: 'hidden',
+    backgroundColor: '#F9FAFB',
+    height: 220
+  },
+  previewImage: {
+    width: '100%',
+    height: '100%'
+  },
+  documentBtn: {
+    marginTop: 12,
+    borderWidth: 1,
+    borderStyle: 'dashed',
+    borderColor: '#1D4ED8',
+    borderRadius: 12,
+    paddingVertical: 16,
+    alignItems: 'center'
+  },
+  documentBtnText: {
+    fontSize: 15,
+    fontWeight: '700',
+    color: '#1D4ED8'
+  },
+  noteTitle: {
+    fontSize: 16,
+    fontWeight: '700',
+    color: '#111827',
+    marginBottom: 6
+  },
+  noteDesc: {
+    fontSize: 14,
+    lineHeight: 20,
+    color: '#374151',
+    marginBottom: 8
+  },
+  noteDescFull: {
+    fontSize: 14,
+    lineHeight: 22,
+    color: '#374151',
+    marginTop: 10
+  },
+  noteMeta: {
+    fontSize: 12,
+    color: '#6B7280',
+    marginBottom: 10
+  },
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.35)',
+    justifyContent: 'center',
+    padding: 16
+  },
+  modalCard: {
+    backgroundColor: '#FFFFFF',
+    borderRadius: 14,
+    maxHeight: '75%',
+    padding: 16
+  },
+  detailCard: {
+    backgroundColor: '#FFFFFF',
+    borderRadius: 14,
+    maxHeight: '85%',
+    padding: 16
+  },
+  modalTitle: {
+    fontSize: 16,
+    fontWeight: '700',
+    color: '#111827',
+    marginBottom: 12
+  },
+  optionRow: {
+    paddingVertical: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: '#F3F4F6'
+  },
+  optionText: {
+    fontSize: 14,
+    color: '#111827'
+  },
+  optionEmpty: {
+    fontSize: 14,
+    color: '#6B7280',
+    textAlign: 'center',
+    paddingVertical: 16
+  }
+});