Files
TIS_RMS/documentation/index.html
T

1237 lines
79 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TIS-RMS User Guide & System Documentation</title>
<meta name="description" content="Official technical and operational manual for Talisay Integrated School - Records Management System on Windows and Android.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/png" href="assets/logo.png">
</head>
<body>
<!-- Top Sticky Header -->
<header class="doc-header">
<div class="header-left">
<button id="mobileMenuBtn" class="mobile-menu-btn" title="Open Navigation Menu" aria-label="Open Navigation Menu">
<svg class="hamburger-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
<svg class="close-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:none;"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
</button>
<a href="#overview" class="header-brand">
<img src="assets/logo.png" alt="TIS-RMS Logo">
<div class="brand-text">
<h1>TIS-RMS Docs</h1>
<span>Talisay Integrated School v1.0</span>
</div>
</a>
</div>
<div class="header-search" id="headerSearchBox">
<div class="search-input-wrap">
<svg class="search-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
<input type="text" id="docSearchInput" class="search-input" placeholder="Search documentation, modules, FAQs..." autocomplete="off">
<span class="search-kbd">Ctrl+K</span>
</div>
</div>
<div class="header-actions">
<button id="mobileSearchBtn" class="mobile-search-btn" title="Search" aria-label="Search Documentation">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
</button>
<div class="platform-pill-toggle">
<button type="button" class="platform-btn active" data-platform-filter="all">All</button>
<button type="button" class="platform-btn" data-platform-filter="windows">
<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M0 3.449L9.75 2.1v9.451H0m10.949-9.602L24 0v11.4H10.949M0 12.6h9.75v9.451L0 20.699M10.949 12.6H24V24l-12.901-1.799"/></svg>
<span class="platform-text">Windows</span>
</button>
<button type="button" class="platform-btn" data-platform-filter="android">
<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M17.523 15.3414c-.5511 0-.9993-.4486-.9993-.9997s.4482-.9993.9993-.9993c.551 0 .9993.4482.9993.9993.0001.5511-.4483.9997-.9993.9997m-11.046 0c-.5511 0-.9993-.4486-.9993-.9997s.4482-.9993.9993-.9993c.5511 0 .9993.4482.9993.9993 0 .5511-.4482.9997-.9993.9997m11.4045-6.02l1.9973-3.4592a.416.416 0 00-.1521-.5676.416.416 0 00-.5676.1521l-2.0223 3.503C15.5902 8.4116 13.8533 8.084 12 8.084s-3.5902.3276-5.1368.8657L4.8409 5.4467a.4161.4161 0 00-.5677-.1521.4157.4157 0 00-.1521.5676l1.9973 3.4592C2.6889 11.1867.3432 14.6589 0 18.761h24c-.3432-4.1021-2.6889-7.5743-6.1185-9.4396"/></svg>
<span class="platform-text">Android</span>
</button>
</div>
<button id="themeToggleBtn" class="theme-toggle-btn" title="Toggle Theme" aria-label="Toggle Theme">
<svg class="sun-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
</button>
<button id="printBtn" class="print-btn" title="Print Documentation" aria-label="Print Documentation">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 6 2 18 2 18 9"></polyline><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path><rect x="6" y="14" width="12" height="8"></rect></svg>
</button>
</div>
</header>
<!-- Sidebar Backdrop Overlay for Mobile -->
<div class="sidebar-backdrop" id="sidebarBackdrop"></div>
<!-- Main Layout -->
<div class="doc-layout">
<!-- Sticky Navigation Sidebar -->
<aside class="doc-sidebar" id="docSidebar">
<div class="sidebar-heading">Getting Started</div>
<ul class="sidebar-nav">
<li>
<a href="#overview" class="nav-link active">
<span class="nav-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path></svg></span>
System Overview
<span class="nav-badge">Intro</span>
</a>
</li>
<li>
<a href="#roles" class="nav-link">
<span class="nav-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg></span>
Role Permissions
<span class="nav-badge">RBAC</span>
</a>
</li>
<li>
<a href="#login" class="nav-link">
<span class="nav-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg></span>
Login & Access
<span class="nav-badge">Auth</span>
</a>
</li>
</ul>
<div class="sidebar-heading">Core Modules</div>
<ul class="sidebar-nav">
<li>
<a href="#dashboard" class="nav-link">
<span class="nav-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="9"></rect><rect x="14" y="3" width="7" height="5"></rect><rect x="14" y="12" width="7" height="9"></rect><rect x="3" y="16" width="7" height="5"></rect></svg></span>
Dashboard & Analytics
</a>
</li>
<li>
<a href="#students" class="nav-link">
<span class="nav-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg></span>
Student Information
</a>
</li>
<li>
<a href="#documents" class="nav-link">
<span class="nav-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg></span>
Documents & Folders
</a>
</li>
<li>
<a href="#archives" class="nav-link">
<span class="nav-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="21 8 21 21 3 21 3 8"></polyline><rect x="1" y="3" width="22" height="5"></rect><line x1="10" y1="12" x2="14" y2="12"></line></svg></span>
Archival Vault
</a>
</li>
<li>
<a href="#batchprint" class="nav-link">
<span class="nav-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 6 2 18 2 18 9"></polyline><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path><rect x="6" y="14" width="12" height="8"></rect></svg></span>
Batch Print Queue
</a>
</li>
<li>
<a href="#reports" class="nav-link">
<span class="nav-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg></span>
Reports & SF10 Engine
</a>
</li>
<li>
<a href="#users" class="nav-link">
<span class="nav-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><line x1="20" y1="8" x2="20" y2="14"></line><line x1="23" y1="11" x2="17" y2="11"></line></svg></span>
Users & Audit Trail
</a>
</li>
<li>
<a href="#settings" class="nav-link">
<span class="nav-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg></span>
Settings & Backup
</a>
</li>
</ul>
<div class="sidebar-heading">Reference & Support</div>
<ul class="sidebar-nav">
<li>
<a href="#shortcuts" class="nav-link">
<span class="nav-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2" ry="2"></rect><line x1="6" y1="8" x2="6" y2="8"></line><line x1="10" y1="8" x2="10" y2="8"></line><line x1="14" y1="8" x2="14" y2="8"></line><line x1="18" y1="8" x2="18" y2="8"></line><line x1="6" y1="12" x2="6" y2="12"></line><line x1="18" y1="12" x2="18" y2="12"></line><line x1="6" y1="16" x2="18" y2="16"></line></svg></span>
Keyboard Shortcuts
</a>
</li>
<li>
<a href="#faq" class="nav-link">
<span class="nav-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg></span>
Frequently Asked Questions
<span class="nav-badge">FAQs</span>
</a>
</li>
<li>
<a href="#troubleshooting" class="nav-link">
<span class="nav-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path></svg></span>
Diagnostics & Setup
</a>
</li>
</ul>
</aside>
<!-- Main Content Body -->
<main class="doc-main">
<!-- Hero Banner -->
<section id="overview" class="hero-banner">
<span class="hero-tag">System Manual & Operational Reference</span>
<h1 class="hero-title">Talisay Integrated School - Records Management System</h1>
<p class="hero-subtitle">
An institutional records management and document archiving system built for secondary schools. Supports offline SQLite operation, Socket.IO real-time LAN synchronization, automated DepEd SF10 PDF compiling, multi-page batch scanning, and role-based access control.
</p>
<div class="hero-badges">
<span class="badge-item">Windows</span>
<span class="badge-item">Android</span>
<span class="badge-item">Socket.IO Real-Time Sync</span>
<span class="badge-item">Port 18484</span>
<span class="badge-item">DepEd SF10 Engine</span>
<span class="badge-item">RA 10173 Audit Ledger</span>
</div>
</section>
<!-- System Architecture & Roles Section -->
<section id="roles" class="doc-section">
<div class="section-header">
<h2 class="section-title">User Roles & Security Matrix</h2>
<p class="section-subtitle">Role-based access control policies governing registrar and teacher duties.</p>
</div>
<div class="module-summary">
<div class="module-summary-label">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
Security Overview
</div>
<ul class="module-summary-list">
<li><strong>Administrator:</strong> Unrestricted access to master data, user accounts, system configuration, permanent deletions, and school-wide reporting.</li>
<li><strong>Teacher / Staff:</strong> Scoped access to assigned sections, student enrollment profiles, document scanning, and Form 138/SF9 grade entry.</li>
<li><strong>Audit Logging:</strong> Every record access, print action, and modification is committed to an append-only audit trail with workstation IP and timestamp.</li>
</ul>
</div>
<p class="paragraph">
TIS-RMS separates duties between the school registrar (Administrator) and classroom advisors (Teachers). This ensures student records are safeguarded in accordance with DepEd orders and the Philippine Data Privacy Act of 2012 (RA 10173).
</p>
<div class="table-wrap">
<table class="doc-table">
<thead>
<tr>
<th>Operation / Capability</th>
<th>Administrator</th>
<th>Teacher / Staff</th>
<th>Enforcement Rule</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Access System Dashboard</strong></td>
<td><span class="badge success">School-Wide</span></td>
<td><span class="badge info">Assigned Section</span></td>
<td>Scoped by teacher ID</td>
</tr>
<tr>
<td><strong>Create / Edit Student Profile</strong></td>
<td><span class="badge success">Allowed</span></td>
<td><span class="badge success">Allowed</span></td>
<td>Logged in audit trail</td>
</tr>
<tr>
<td><strong>Upload Scanned Documents (SF9, PSA)</strong></td>
<td><span class="badge success">Allowed</span></td>
<td><span class="badge success">Allowed</span></td>
<td>File type & size validated</td>
</tr>
<tr>
<td><strong>Archive Completed Records</strong></td>
<td><span class="badge success">Allowed</span></td>
<td><span class="badge danger">Restricted</span></td>
<td>Admin-only authorization</td>
</tr>
<tr>
<td><strong>Generate Official SF10 Form</strong></td>
<td><span class="badge success">Allowed</span></td>
<td><span class="badge success">Allowed</span></td>
<td>Watermark applied to drafts</td>
</tr>
<tr>
<td><strong>Manage User Accounts & Passwords</strong></td>
<td><span class="badge success">Allowed</span></td>
<td><span class="badge danger">Restricted</span></td>
<td>Generates 10-char random temporary password</td>
</tr>
<tr>
<td><strong>Export Database Snapshots</strong></td>
<td><span class="badge success">Allowed</span></td>
<td><span class="badge danger">Restricted</span></td>
<td>Direct SQLite backup</td>
</tr>
</tbody>
</table>
</div>
</section>
<!-- Access & Authentication Section -->
<section id="login" class="doc-section">
<div class="section-header">
<h2 class="section-title">Login & System Access</h2>
<p class="section-subtitle">Secure access portal for desktop workstations and Android devices.</p>
</div>
<div class="module-summary">
<div class="module-summary-label">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
Authentication Summary
</div>
<ul class="module-summary-list">
<li><strong>Single Sign-On Terminal:</strong> Users sign in using their registered username and encrypted password.</li>
<li><strong>Role Auto-Detection:</strong> Upon successful sign-in, the system automatically tailors the navigation drawer to either Administrator or Teacher permissions.</li>
<li><strong>Local Server Connection:</strong> The Android client connects directly to the school host machine via local network configuration (port 18484).</li>
</ul>
</div>
<!-- Login Mockups -->
<div class="mockup-container">
<div class="mockup-tabs">
<button class="mockup-tab-btn active" data-tab-target="win-login">Windows</button>
<button class="mockup-tab-btn" data-tab-target="and-login">Android</button>
</div>
<div class="mockup-pane active" id="win-login">
<figure class="doc-figure" data-lightbox="assets/images/windows/login.webp" data-caption="Windows Login Screen with credential entry and server status">
<div class="doc-figure-img-wrap">
<img src="assets/images/windows/login.webp" alt="Windows Login Screen" loading="lazy">
</div>
<figcaption>
<span>Figure 1A: Windows Authentication Screen</span>
<span class="zoom-hint"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="11" y1="8" x2="11" y2="14"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg> Click to enlarge</span>
</figcaption>
</figure>
</div>
<div class="mockup-pane" id="and-login" style="display:none;">
<figure class="doc-figure doc-figure-android" data-lightbox="assets/images/android/login.webp" data-caption="Android Login Interface with host connection settings">
<div class="doc-figure-img-wrap">
<img src="assets/images/android/login.webp" alt="Android Login Screen" loading="lazy">
</div>
<figcaption>
<span>Figure 1B: Android Authentication Screen</span>
<span class="zoom-hint"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="11" y1="8" x2="11" y2="14"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg> Click to enlarge</span>
</figcaption>
</figure>
</div>
</div>
</section>
<!-- Module 1: Dashboard & Analytics -->
<section id="dashboard" class="doc-section">
<div class="section-header">
<h2 class="section-title">Module 1: Dashboard & Analytics</h2>
<p class="section-subtitle">Real-time status indicators, enrollment charts, and missing document flags.</p>
</div>
<div class="module-summary">
<div class="module-summary-label">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>
Key Capabilities
</div>
<ul class="module-summary-list">
<li><strong>Summary Counters:</strong> Instant visibility into Total Students, Incomplete Requirements, Total Documents, and Active Cohorts.</li>
<li><strong>Socket.IO Live Synchronization:</strong> Counters update reactively whenever students or documents are added across the local network.</li>
<li><strong>Activity Feed:</strong> Shows chronological stream of recent scans, edits, and status transitions.</li>
</ul>
</div>
<p class="paragraph">
The Dashboard serves as the central operational hub for both administrative staff and classroom advisers. Statistics are updated reactively from local SQLite queries and Socket.IO broadcasts, ensuring zero latency even when internet connectivity is unavailable.
</p>
<!-- Platform Mockup Showcase -->
<div class="mockup-container">
<div class="mockup-tabs">
<button class="mockup-tab-btn active" data-tab-target="win-dash">Windows</button>
<button class="mockup-tab-btn" data-tab-target="and-dash">Android</button>
</div>
<div class="mockup-pane active" id="win-dash">
<figure class="doc-figure" data-lightbox="assets/images/windows/dashboard.webp" data-caption="Windows Dashboard with Metric Cards and Grade Level Distribution">
<div class="doc-figure-img-wrap">
<img src="assets/images/windows/dashboard.webp" alt="Windows Dashboard" loading="lazy">
</div>
<figcaption>
<span>Figure 2A: Windows Dashboard & Real-Time Analytics</span>
<span class="zoom-hint"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="11" y1="8" x2="11" y2="14"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg> Click to enlarge</span>
</figcaption>
</figure>
</div>
<div class="mockup-pane" id="and-dash" style="display:none;">
<figure class="doc-figure doc-figure-android" data-lightbox="assets/images/android/dashboard.webp" data-caption="Android Dashboard Interface">
<div class="doc-figure-img-wrap">
<img src="assets/images/android/dashboard.webp" alt="Android Dashboard" loading="lazy">
</div>
<figcaption>
<span>Figure 2B: Android Dashboard & Analytics</span>
<span class="zoom-hint"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="11" y1="8" x2="11" y2="14"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg> Click to enlarge</span>
</figcaption>
</figure>
</div>
</div>
<h3 class="subheading">Dashboard Metric Breakdown</h3>
<div class="feature-grid">
<div class="feature-card">
<div class="card-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline><polyline points="17 6 23 6 23 12"></polyline></svg>
</div>
<h4 class="card-title">Real-Time Stat Counters</h4>
<p class="card-desc">Active Enrollees, Archived Students, Total Scanned Pages, and Incomplete Student Folders updated instantaneously through local reactive streams.</p>
</div>
<div class="feature-card">
<div class="card-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
</div>
<h4 class="card-title">Grade & Strand Ratios</h4>
<p class="card-desc">Visual distribution graphs indicating cohort sizes across Grade 7 through Grade 12, allowing administrators to balance section loading.</p>
</div>
<div class="feature-card">
<div class="card-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 14 14"></polyline></svg>
</div>
<h4 class="card-title">Live Audit Stream</h4>
<p class="card-desc">Continuous audit trail logging user authentication, student profile edits, document attachments, and batch print executions.</p>
</div>
</div>
</section>
<!-- Module 2: Student Information Management -->
<section id="students" class="doc-section">
<div class="section-header">
<h2 class="section-title">Module 2: Student Information System</h2>
<p class="section-subtitle">Learner profiles, enrollment management, requirement tracking, and optical character recognition (OCR).</p>
</div>
<div class="module-summary">
<div class="module-summary-label">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle></svg>
Key Capabilities
</div>
<ul class="module-summary-list">
<li><strong>LRN Master Index:</strong> All records are keyed by DepEd's unique 12-digit Learner Reference Number to prevent duplication.</li>
<li><strong>OCR-Assisted Data Entry:</strong> Scan birth certificates or SF9 cards to auto-populate demographic fields into the registration form.</li>
<li><strong>Missing Requirements Flag:</strong> Red status badges immediately indicate students with missing birth certificates or Form 137 records.</li>
</ul>
</div>
<p class="paragraph">
The Student module holds complete demographic and academic records. Search queries match against LRN, last name, first name, grade level, and section in real-time as you type.
</p>
<!-- Mockup Display -->
<div class="mockup-container">
<div class="mockup-tabs">
<button class="mockup-tab-btn active" data-tab-target="win-stud">Windows</button>
<button class="mockup-tab-btn" data-tab-target="and-stud">Android</button>
</div>
<div class="mockup-pane active" id="win-stud">
<figure class="doc-figure" data-lightbox="assets/images/windows/students.webp" data-caption="Student Master List with Quick Search, Filter Badges, and Action Menu">
<div class="doc-figure-img-wrap">
<img src="assets/images/windows/students.webp" alt="Windows Student Master List" loading="lazy">
</div>
<figcaption>
<span>Figure 3A: Windows Students Master List</span>
<span class="zoom-hint"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="11" y1="8" x2="11" y2="14"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg> Click to enlarge</span>
</figcaption>
</figure>
</div>
<div class="mockup-pane" id="and-stud" style="display:none;">
<figure class="doc-figure doc-figure-android" data-lightbox="assets/images/android/students.webp" data-caption="Android Student List with Tab Filters">
<div class="doc-figure-img-wrap">
<img src="assets/images/android/students.webp" alt="Android Student Master List" loading="lazy">
</div>
<figcaption>
<span>Figure 3B: Android Students List</span>
<span class="zoom-hint"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="11" y1="8" x2="11" y2="14"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg> Click to enlarge</span>
</figcaption>
</figure>
</div>
</div>
<h3 class="subheading">Step-by-Step: Adding a New Student</h3>
<div class="steps-container">
<div class="step-card">
<div class="step-number">1</div>
<div class="step-content">
<h4>Open Registration Form</h4>
<p>Navigate to the Students screen and select <strong>Add Student</strong> or press keyboard shortcut <kbd>Ctrl+N</kbd>.</p>
</div>
</div>
<div class="step-card">
<div class="step-number">2</div>
<div class="step-content">
<h4>Provide Learner Profile</h4>
<p>Enter the 12-digit LRN, legal name (Last, First, Middle, Suffix), date of birth, sex, grade level, section, and guardian contact numbers. Alternatively, choose <strong>Scan with OCR</strong> to extract details automatically.</p>
</div>
</div>
<div class="step-card">
<div class="step-number">3</div>
<div class="step-content">
<h4>Automatic Folder Provisioning</h4>
<p>The system creates a student folder with standard requirement slots: PSA Birth Certificate, SF9 (Form 138), Good Moral, and 2x2 Photo.</p>
</div>
</div>
<div class="step-card">
<div class="step-number">4</div>
<div class="step-content">
<h4>Save and Commit</h4>
<p>Click <strong>Save Record</strong>. The student is immediately indexed in local SQLite storage and Socket.IO broadcasts the update to all connected Windows and Android clients.</p>
</div>
</div>
</div>
</section>
<!-- Module 3: Document Management & Virtual Folders -->
<section id="documents" class="doc-section">
<div class="section-header">
<h2 class="section-title">Module 3: Documents & Virtual Folders</h2>
<p class="section-subtitle">Tree directory structure, requirement taxonomy, and high-performance in-app WebP rendering.</p>
</div>
<div class="module-summary">
<div class="module-summary-label">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
Key Capabilities
</div>
<ul class="module-summary-list">
<li><strong>Virtual Filing Cabinets:</strong> Organizes student documents by School Year, Grade Level, and Section without file path conflicts.</li>
<li><strong>Standard DepEd Taxonomy:</strong> Categorizes documents into PSA Birth Certificates, SF9 Progress Reports, SF10 Permanent Records, and Ancillary Certifications.</li>
<li><strong>Server-Side WebP Conversion:</strong> Multi-page documents and scanned PDFs are converted into optimized WebP images for immediate in-app viewing without external PDF viewer software.</li>
</ul>
</div>
<p class="paragraph">
TIS-RMS implements a tree-based <strong>Virtual Folder Architecture</strong> mimicking physical registrar filing cabinets. Folders are automatically maintained per school year and section.
</p>
<!-- Document Mockups -->
<div class="mockup-container">
<div class="mockup-tabs">
<button class="mockup-tab-btn active" data-tab-target="win-doc">Windows</button>
<button class="mockup-tab-btn" data-tab-target="and-doc">Android</button>
</div>
<div class="mockup-pane active" id="win-doc">
<figure class="doc-figure" data-lightbox="assets/images/windows/documents.webp" data-caption="Windows Document Explorer showing virtual school year folders and student document intake">
<div class="doc-figure-img-wrap">
<img src="assets/images/windows/documents.webp" alt="Windows Documents Explorer" loading="lazy">
</div>
<figcaption>
<span>Figure 4A: Windows Documents Explorer</span>
<span class="zoom-hint"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="11" y1="8" x2="11" y2="14"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg> Click to enlarge</span>
</figcaption>
</figure>
</div>
<div class="mockup-pane" id="and-doc" style="display:none;">
<figure class="doc-figure doc-figure-android" data-lightbox="assets/images/android/documents.webp" data-caption="Android Document Viewer and scanning interface">
<div class="doc-figure-img-wrap">
<img src="assets/images/android/documents.webp" alt="Android Documents View" loading="lazy">
</div>
<figcaption>
<span>Figure 4B: Android Documents View</span>
<span class="zoom-hint"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="11" y1="8" x2="11" y2="14"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg> Click to enlarge</span>
</figcaption>
</figure>
</div>
</div>
<h3 class="subheading">Supported Document Classifications</h3>
<div class="feature-grid">
<div class="feature-card">
<div class="card-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
</div>
<h4 class="card-title">PSA / NSO Birth Certificate</h4>
<p class="card-desc">Legal record verifying student name, date of birth, sex, and parentage during enrollment intake.</p>
</div>
<div class="feature-card">
<div class="card-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
</div>
<h4 class="card-title">DepEd Form 138 (SF9)</h4>
<p class="card-desc">Report card displaying quarterly learning area ratings, attendance marks, and observed behavioral values.</p>
</div>
<div class="feature-card">
<div class="card-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
</div>
<h4 class="card-title">Certificate of Good Moral</h4>
<p class="card-desc">Character certification required for transferring in, scholarship verification, and graduation clearance.</p>
</div>
<div class="feature-card">
<div class="card-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="7" r="4"></circle><path d="M5.5 21h13a2 2 0 0 0 2-2v-2a7 7 0 0 0-14 0v2a2 2 0 0 0 2 2z"></path></svg>
</div>
<h4 class="card-title">2x2 Formal Identification Photo</h4>
<p class="card-desc">Official student identification portrait used for Form 137 records, diploma inserts, and examination badges.</p>
</div>
</div>
</section>
<!-- Module 4: Archive System -->
<section id="archives" class="doc-section">
<div class="section-header">
<h2 class="section-title">Module 4: Archival Vault & Records Retention</h2>
<p class="section-subtitle">Long-term preservation for graduated, transferred-out, and dropped student records.</p>
</div>
<div class="module-summary">
<div class="module-summary-label">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="21 8 21 21 3 21 3 8"></polyline><rect x="1" y="3" width="22" height="5"></rect><line x1="10" y1="12" x2="14" y2="12"></line></svg>
Key Capabilities
</div>
<ul class="module-summary-list">
<li><strong>Cohort Separation:</strong> Separates graduated or transferred students from active enrollment while keeping scholastic history accessible.</li>
<li><strong>Real-Time Backend Filter:</strong> Archive search queries execute asynchronous SQLite queries with debouncing, returning results in under 10ms.</li>
<li><strong>Reinstatement:</strong> Administrators can restore incorrectly archived students with a single click, preserving all attached document links.</li>
</ul>
</div>
<p class="paragraph">
Under national educational records policies, records of graduated students must be retained for permanent access. TIS-RMS isolates archived students from active section rosters while preserving full document searchability.
</p>
<!-- Mockup Display -->
<div class="mockup-container">
<div class="mockup-tabs">
<button class="mockup-tab-btn active" data-tab-target="win-arch">Windows</button>
<button class="mockup-tab-btn" data-tab-target="and-arch">Android</button>
</div>
<div class="mockup-pane active" id="win-arch">
<figure class="doc-figure" data-lightbox="assets/images/windows/archives.webp" data-caption="Archive Explorer with Real-time Filters for Status, School Year, and Grade">
<div class="doc-figure-img-wrap">
<img src="assets/images/windows/archives.webp" alt="Windows Archive Explorer" loading="lazy">
</div>
<figcaption>
<span>Figure 5A: Windows Archival Vault</span>
<span class="zoom-hint"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="11" y1="8" x2="11" y2="14"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg> Click to enlarge</span>
</figcaption>
</figure>
</div>
<div class="mockup-pane" id="and-arch" style="display:none;">
<figure class="doc-figure doc-figure-android" data-lightbox="assets/images/android/archives.webp" data-caption="Android Archive Vault View">
<div class="doc-figure-img-wrap">
<img src="assets/images/android/archives.webp" alt="Android Archive View" loading="lazy">
</div>
<figcaption>
<span>Figure 5B: Android Archival Vault</span>
<span class="zoom-hint"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="11" y1="8" x2="11" y2="14"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg> Click to enlarge</span>
</figcaption>
</figure>
</div>
</div>
<h3 class="subheading">Archival Guardrails</h3>
<div class="feature-grid">
<div class="feature-card">
<div class="card-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
</div>
<h4 class="card-title">Read-Only Locking</h4>
<p class="card-desc">Archived transcripts are locked in read-only mode to prevent inadvertent grade changes after graduation certificates are issued.</p>
</div>
<div class="feature-card">
<div class="card-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="1 4 1 10 7 10"></polyline><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path></svg>
</div>
<h4 class="card-title">Instant Restoration</h4>
<p class="card-desc">Students archived by mistake can be restored to active registry status with all prior grades and documents preserved.</p>
</div>
<div class="feature-card">
<div class="card-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
</div>
<h4 class="card-title">Cohort Multi-Filtering</h4>
<p class="card-desc">Filter archives across School Year (e.g., 2023–2024), Grade Level, Section, or Status (Graduated, Transferred Out, Dropped).</p>
</div>
</div>
</section>
<!-- Module 5: Batch Print Queue & PDF Compilation -->
<section id="batchprint" class="doc-section">
<div class="section-header">
<h2 class="section-title">Module 5: Batch Print Queue & PDF Compilation</h2>
<p class="section-subtitle">Multi-record merging, auto-duplex formatting, official watermarking, and print spooling.</p>
</div>
<div class="module-summary">
<div class="module-summary-label">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 6 2 18 2 18 9"></polyline><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path><rect x="6" y="14" width="12" height="8"></rect></svg>
Key Capabilities
</div>
<ul class="module-summary-list">
<li><strong>Automated Compilation:</strong> Merges multiple student records into a single consolidated PDF package for division audits.</li>
<li><strong>Background Queue:</strong> Large print jobs process asynchronously in the background so workstation responsiveness is maintained.</li>
<li><strong>Watermark Enforcement:</strong> Embeds official school seal, verification hash, and "OFFICIAL COPY" watermarks on exported files.</li>
</ul>
</div>
<p class="paragraph">
Generating records for an entire graduating section can be time-consuming. TIS-RMS compiles and spools documents in batches of 10 to prevent memory pressure while producing clean, standardized vector PDF packages.
</p>
<div class="steps-container">
<div class="step-card">
<div class="step-number">1</div>
<div class="step-content">
<h4>Select Target Students</h4>
<p>In the Students or Archives screen, check the target student rows or choose <strong>Select All in Section</strong>.</p>
</div>
</div>
<div class="step-card">
<div class="step-number">2</div>
<div class="step-content">
<h4>Launch Batch Print Dialog</h4>
<p>Click the <strong>Batch Print</strong> toolbar icon or press keyboard shortcut <kbd>Ctrl+P</kbd>.</p>
</div>
</div>
<div class="step-card">
<div class="step-number">3</div>
<div class="step-content">
<h4>Configure Compilation Options</h4>
<p>Choose document types to compile (SF10 only, SF9 only, or Full Dossier including PSA birth certificates). Toggle duplex page alignment if your printer supports double-sided printing.</p>
</div>
</div>
<div class="step-card">
<div class="step-number">4</div>
<div class="step-content">
<h4>Compile & Print</h4>
<p>Click <strong>Compile Dossier</strong>. TIS-RMS streams the merged output directly to the system print dialogue or saves a merged PDF.</p>
</div>
</div>
</div>
</section>
<!-- Module 6: DepEd SF10 & Reports -->
<section id="reports" class="doc-section">
<div class="section-header">
<h2 class="section-title">Module 6: DepEd SF10 & Reports Engine</h2>
<p class="section-subtitle">Official DepEd Form 137/SF10 compilation directly from Excel templates into standardized PDF outputs.</p>
</div>
<div class="module-summary">
<div class="module-summary-label">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
Key Capabilities
</div>
<ul class="module-summary-list">
<li><strong>DepEd Standard Templates:</strong> Reads official DepEd SF10 Excel workbooks for Junior High (JHS) and Senior High (SHS).</li>
<li><strong>Automated Computation:</strong> Calculates general averages, remedial subject credits, and promotion remarks automatically.</li>
<li><strong>Direct PDF Rendering:</strong> Produces print-ready vector PDF files with correct DepEd header seals and signatory blocks.</li>
</ul>
</div>
<p class="paragraph">
The system includes a dedicated <strong>Excel-to-PDF Template Engine</strong>. It loads official DepEd SF10 spreadsheets, fills demographic and scholastic data into template cells, and renders standardized vector PDFs.
</p>
<!-- Reports Mockup -->
<div class="mockup-container">
<div class="mockup-tabs">
<button class="mockup-tab-btn active" data-tab-target="win-rep">Windows</button>
<button class="mockup-tab-btn" data-tab-target="and-rep">Android</button>
</div>
<div class="mockup-pane active" id="win-rep">
<figure class="doc-figure" data-lightbox="assets/images/windows/reports.webp" data-caption="Reports Generator Interface with Grade Selection and Export Formats">
<div class="doc-figure-img-wrap">
<img src="assets/images/windows/reports.webp" alt="Windows Reports Generator" loading="lazy">
</div>
<figcaption>
<span>Figure 6A: Windows Reports & SF10 Generator</span>
<span class="zoom-hint"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="11" y1="8" x2="11" y2="14"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg> Click to enlarge</span>
</figcaption>
</figure>
</div>
<div class="mockup-pane" id="and-rep" style="display:none;">
<figure class="doc-figure doc-figure-android" data-lightbox="assets/images/android/reports.webp" data-caption="Android Reports Screen with template selectors">
<div class="doc-figure-img-wrap">
<img src="assets/images/android/reports.webp" alt="Android Reports Generator" loading="lazy">
</div>
<figcaption>
<span>Figure 6B: Android Reports & Form Generator</span>
<span class="zoom-hint"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="11" y1="8" x2="11" y2="14"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg> Click to enlarge</span>
</figcaption>
</figure>
</div>
</div>
</section>
<!-- Module 7: Users & Immutable Audit Trail -->
<section id="users" class="doc-section">
<div class="section-header">
<h2 class="section-title">Module 7: User Accounts & Audit Trail</h2>
<p class="section-subtitle">Account provisioning, role assignments, security sessions, and tamper-evident audit history.</p>
</div>
<div class="module-summary">
<div class="module-summary-label">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
Key Capabilities
</div>
<ul class="module-summary-list">
<li><strong>Data Privacy Act Compliance:</strong> Maintains an immutable activity log recording user ID, target student LRN, action type, IP address, and timestamp.</li>
<li><strong>Cryptographic Password Generation:</strong> Newly created user accounts and password resets generate a 10-character randomized temporary password displayed directly on screen.</li>
<li><strong>Access Forensics:</strong> Filter audit logs by user, action (View, Update, Delete, Print, Login), or student record. Responsive badge layout ensures zero text clipping.</li>
</ul>
</div>
<p class="paragraph">
To comply with the Philippine Data Privacy Act of 2012 (RA 10173), all actions performed within TIS-RMS—including viewing, downloading, printing, editing, and deleting records—are committed to an immutable audit ledger.
</p>
<!-- Users Mockup -->
<div class="mockup-container">
<div class="mockup-tabs">
<button class="mockup-tab-btn active" data-tab-target="win-usr">Windows</button>
<button class="mockup-tab-btn" data-tab-target="and-usr">Android</button>
</div>
<div class="mockup-pane active" id="win-usr">
<figure class="doc-figure" data-lightbox="assets/images/windows/users.webp" data-caption="User Accounts Screen with Role Assignment and Security Status">
<div class="doc-figure-img-wrap">
<img src="assets/images/windows/users.webp" alt="Windows User Accounts" loading="lazy">
</div>
<figcaption>
<span>Figure 7A: Windows User Account Management</span>
<span class="zoom-hint"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="11" y1="8" x2="11" y2="14"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg> Click to enlarge</span>
</figcaption>
</figure>
</div>
<div class="mockup-pane" id="and-usr" style="display:none;">
<figure class="doc-figure doc-figure-android" data-lightbox="assets/images/android/users.webp" data-caption="Android User Accounts View">
<div class="doc-figure-img-wrap">
<img src="assets/images/android/users.webp" alt="Android User Accounts" loading="lazy">
</div>
<figcaption>
<span>Figure 7B: Android User Accounts Management</span>
<span class="zoom-hint"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="11" y1="8" x2="11" y2="14"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg> Click to enlarge</span>
</figcaption>
</figure>
</div>
</div>
<h3 class="subheading">Audit History & Activity Ledger</h3>
<p class="paragraph">
The History screen logs every operation performed in the system. Entries cannot be cleared or modified by non-root users.
</p>
<!-- Audit History Mockup -->
<div class="mockup-container">
<div class="mockup-tabs">
<button class="mockup-tab-btn active" data-tab-target="win-hist">Windows</button>
<button class="mockup-tab-btn" data-tab-target="and-hist">Android</button>
</div>
<div class="mockup-pane active" id="win-hist">
<figure class="doc-figure" data-lightbox="assets/images/windows/history.webp" data-caption="Windows Audit Ledger recording user IP, action type, student LRN, and timestamp">
<div class="doc-figure-img-wrap">
<img src="assets/images/windows/history.webp" alt="Windows History Log" loading="lazy">
</div>
<figcaption>
<span>Figure 8A: Windows Immutable Audit History Log</span>
<span class="zoom-hint"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="11" y1="8" x2="11" y2="14"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg> Click to enlarge</span>
</figcaption>
</figure>
</div>
<div class="mockup-pane" id="and-hist" style="display:none;">
<figure class="doc-figure doc-figure-android" data-lightbox="assets/images/android/history.webp" data-caption="Android Audit Ledger View">
<div class="doc-figure-img-wrap">
<img src="assets/images/android/history.webp" alt="Android History View" loading="lazy">
</div>
<figcaption>
<span>Figure 8B: Android Immutable Audit Ledger</span>
<span class="zoom-hint"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="11" y1="8" x2="11" y2="14"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg> Click to enlarge</span>
</figcaption>
</figure>
</div>
</div>
</section>
<!-- Module 8: Settings & Mandatory Requirements -->
<section id="settings" class="doc-section">
<div class="section-header">
<h2 class="section-title">Module 8: Settings & Mandatory Checklist</h2>
<p class="section-subtitle">System customization, requirement checklists, database backups, and network sync configurations.</p>
</div>
<div class="module-summary">
<div class="module-summary-label">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
Key Capabilities
</div>
<ul class="module-summary-list">
<li><strong>Checklist Configurator:</strong> Configure mandatory versus optional documents per grade level (JHS vs. SHS requirements).</li>
<li><strong>Institutional Headers:</strong> Set School Name, DepEd School ID, District, Division, and Region for all printed transcripts.</li>
<li><strong>Local Database Backup:</strong> Generate timestamped SQLite snapshot files for off-site backup or disaster recovery.</li>
</ul>
</div>
<p class="paragraph">
The Settings panel allows Administrators to configure school profile headers, customize required document checklists per grade level, export offline SQL backups, and check local network health.
</p>
<!-- Settings Mockup -->
<div class="mockup-container">
<div class="mockup-tabs">
<button class="mockup-tab-btn active" data-tab-target="win-set">Windows</button>
<button class="mockup-tab-btn" data-tab-target="and-set">Android</button>
</div>
<div class="mockup-pane active" id="win-set">
<figure class="doc-figure" data-lightbox="assets/images/windows/settings.webp" data-caption="Settings Panel with Database Backup, Checklist Configurator, and Links">
<div class="doc-figure-img-wrap">
<img src="assets/images/windows/settings.webp" alt="Windows Settings" loading="lazy">
</div>
<figcaption>
<span>Figure 9A: Windows System Settings Panel</span>
<span class="zoom-hint"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="11" y1="8" x2="11" y2="14"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg> Click to enlarge</span>
</figcaption>
</figure>
</div>
<div class="mockup-pane" id="and-set" style="display:none;">
<figure class="doc-figure doc-figure-android" data-lightbox="assets/images/android/settings.webp" data-caption="Android Settings View with Mobile Link Handlers">
<div class="doc-figure-img-wrap">
<img src="assets/images/android/settings.webp" alt="Android Settings" loading="lazy">
</div>
<figcaption>
<span>Figure 9B: Android System Settings</span>
<span class="zoom-hint"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="11" y1="8" x2="11" y2="14"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg> Click to enlarge</span>
</figcaption>
</figure>
</div>
</div>
<h3 class="subheading">Managing Mandatory Document Rules</h3>
<p class="paragraph">
Administrators can toggle whether a document is <em>Mandatory</em> or <em>Optional</em>. If a student is missing any required document, their record is automatically flagged with a red badge on the dashboard and student list.
</p>
</section>
<!-- Keyboard Shortcuts -->
<section id="shortcuts" class="doc-section">
<div class="section-header">
<h2 class="section-title">Keyboard Shortcuts (Windows Desktop)</h2>
<p class="section-subtitle">Productivity keybindings available throughout the desktop client.</p>
</div>
<div class="table-wrap">
<table class="doc-table">
<thead>
<tr>
<th>Key Combination</th>
<th>Operation</th>
<th>Scope / Context</th>
</tr>
</thead>
<tbody>
<tr>
<td><kbd>Ctrl</kbd> + <kbd>F</kbd> or <kbd>/</kbd></td>
<td>Focus Search Input Field</td>
<td>Global</td>
</tr>
<tr>
<td><kbd>Ctrl</kbd> + <kbd>N</kbd></td>
<td>Open "New Student" Registration Dialog</td>
<td>Students Screen</td>
</tr>
<tr>
<td><kbd>Ctrl</kbd> + <kbd>U</kbd></td>
<td>Open Document Upload / Scanner Dialog</td>
<td>Documents Screen</td>
</tr>
<tr>
<td><kbd>Ctrl</kbd> + <kbd>P</kbd></td>
<td>Open Batch Print Compilation Dialog</td>
<td>Documents / Archives Screen</td>
</tr>
<tr>
<td><kbd>Esc</kbd></td>
<td>Dismiss Active Dialog or Lightbox Modal</td>
<td>Global</td>
</tr>
</tbody>
</table>
</div>
</section>
<!-- Frequently Asked Questions (FAQ) Section -->
<section id="faq" class="doc-section">
<div class="section-header">
<h2 class="section-title">Frequently Asked Questions (FAQ)</h2>
<p class="section-subtitle">Detailed answers to common technical, operational, and DepEd compliance questions based on current system capabilities.</p>
</div>
<!-- Category: System Access & Security -->
<div class="faq-category">
<h3 class="faq-category-title">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
System Access & Security
</h3>
<div class="faq-item">
<button class="faq-question">
<span>What credentials do I use to log into TIS-RMS?</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>
</button>
<div class="faq-answer">
<p>Teachers and staff are issued an individual username and temporary password by the System Administrator. When an Administrator creates a user account or resets a password, TIS-RMS automatically generates a 10-character cryptographically randomized temporary password displayed directly in the creation dialog.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question">
<span>How are new user passwords created and reset?</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>
</button>
<div class="faq-answer">
<p>Administrators navigate to <strong>User Accounts</strong>, click <strong>Create User</strong> or select an existing account and click <strong>Reset Password</strong>. The system generates a randomized 10-character alphanumeric password (e.g., <code>k9Xm2Wq7Lp</code>). The user logs in using this temporary credential and can change it to a personal password under their profile settings.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question">
<span>Can multiple teachers access the system simultaneously?</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>
</button>
<div class="faq-answer">
<p>Yes. TIS-RMS supports concurrent connections across the local area network (LAN). Teachers can scan records, update profiles, and check document checklists on their Android devices or desktop PCs simultaneously without data lock conflicts.</p>
</div>
</div>
</div>
<!-- Category: Real-Time Sync & Networking -->
<div class="faq-category">
<h3 class="faq-category-title">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 14 14"></polyline></svg>
Real-Time Sync & Networking
</h3>
<div class="faq-item">
<button class="faq-question">
<span>How does real-time synchronization work across the school network?</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>
</button>
<div class="faq-answer">
<p>TIS-RMS utilizes Socket.IO WebSocket connections across the local school network. Whenever any teacher or administrator creates, edits, or deletes a student record, or uploads documents, the server broadcasts the event instantaneously. Connected Windows and Android clients update their screens in real time without requiring manual page refreshes or pull-to-refresh actions.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question">
<span>Does TIS-RMS require an active internet connection to work?</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>
</button>
<div class="faq-answer">
<p>No. TIS-RMS operates completely offline on the school's local area network (LAN). It uses an embedded SQLite database and a local Node.js server running on port <strong>18484</strong>, guaranteeing full system uptime even during internet service provider outages.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question">
<span>How do I connect an Android device to the school server?</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>
</button>
<div class="faq-answer">
<p>Connect both the server computer and Android device to the same Wi-Fi access point or local network router. Find the server's local IPv4 address using <code>ipconfig</code> in Command Prompt (e.g., <code>192.168.1.100</code>). On the Android app login screen, configure the server URL with the default port: <code>http://192.168.1.100:18484</code> and tap <strong>Connect</strong>.</p>
</div>
</div>
</div>
<!-- Category: Student Records & OCR -->
<div class="faq-category">
<h3 class="faq-category-title">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle></svg>
Student Records & OCR Intake
</h3>
<div class="faq-item">
<button class="faq-question">
<span>When adding a student using OCR, does the scanned file automatically save into their folder?</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>
</button>
<div class="faq-answer">
<p>No. The OCR engine reads the scanned document (e.g., PSA Birth Certificate or SF9) to extract learner details (LRN, full name, birthdate, sex, etc.) directly into the registration form. However, to keep student folders cleanly organized and ensure each file is verified, the raw OCR scan is not automatically saved into their document checklist. The official final document can be uploaded directly to the student's virtual folder when verified.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question">
<span>What happens if an LRN is accidentally entered twice?</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>
</button>
<div class="faq-answer">
<p>TIS-RMS strictly enforces a unique constraint on the 12-digit Learner Reference Number (LRN). If a user attempts to register an LRN that already exists in either the active directory or the archives, the system prevents duplicate creation and prompts the user to view the existing student record.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question">
<span>Why does a student record show an "Incomplete Requirements" badge?</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>
</button>
<div class="faq-answer">
<p>The red badge indicates that one or more documents marked as <em>Mandatory</em> in the Settings Checklist (e.g., PSA Birth Certificate or Grade 7 SF10) have not yet been uploaded for that student. Once the missing file is uploaded, the badge automatically updates to green.</p>
</div>
</div>
</div>
<!-- Category: Document Management & File Formats -->
<div class="faq-category">
<h3 class="faq-category-title">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
Document Management & Viewing
</h3>
<div class="faq-item">
<button class="faq-question">
<span>How do I view uploaded documents without opening an external PDF application?</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>
</button>
<div class="faq-answer">
<p>TIS-RMS converts scanned PDF pages into lossless WebP images on the server. Clicking any document card opens the built-in high-resolution preview modal with instant page navigation, zoom, and rotation, eliminating the need to launch third-party PDF viewers like Adobe Acrobat.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question">
<span>What file types and sizes are supported for document uploads?</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>
</button>
<div class="faq-answer">
<p>The system accepts PDF documents, PNG images, and JPEG files up to 10MB per file. During upload, the backend automatically optimizes the file and generates WebP thumbnails for instantaneous in-app rendering.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question">
<span>What should I do if a scanned document preview appears blank?</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>
</button>
<div class="faq-answer">
<p>Right-click the document card (or tap the context menu on Android) and select <strong>Regenerate Thumbnail</strong>. The system will re-parse the raw source file and re-render lossless WebP preview pages.</p>
</div>
</div>
</div>
<!-- Category: SF10, Reports & Batch Printing -->
<div class="faq-category">
<h3 class="faq-category-title">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline></svg>
SF10 & DepEd Reports
</h3>
<div class="faq-item">
<button class="faq-question">
<span>How does the automated SF10 (Form 137) generator work?</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>
</button>
<div class="faq-answer">
<p>The system loads the official DepEd Excel SF10 template workbook, pulls student demographics, quarterly ratings, general averages, and remedial notes directly from the database, and compiles them into a standardized vector PDF with official school headers and signatures.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question">
<span>How do I print permanent records for an entire graduating class?</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>
</button>
<div class="faq-answer">
<p>From the Students or Archives screen, select the desired section using the filter dropdown, click the <strong>Select All in Section</strong> checkbox, and tap the <strong>Batch Print</strong> button (<kbd>Ctrl+P</kbd>). The system queues the records in background chunks and outputs a single consolidated PDF package ready for duplex printing.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question">
<span>How and when should database backups be performed?</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>
</button>
<div class="faq-answer">
<p>Administrators should create a database backup at least once a week or before major grading periods. Navigate to <strong>Settings &gt; Database Backup</strong> and click <strong>Create Snapshot</strong>. Save the exported <code>.sqlite</code> file to a secondary external USB drive or secured storage.</p>
</div>
</div>
</div>
</section>
<!-- Troubleshooting & Connection Diagnostics -->
<section id="troubleshooting" class="doc-section">
<div class="section-header">
<h2 class="section-title">Troubleshooting & Diagnostics</h2>
<p class="section-subtitle">Recommended resolutions for connectivity, printing, and document rendering questions.</p>
</div>
<div class="feature-grid">
<div class="feature-card">
<div class="card-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12.55a11 11 0 0 1 14.08 0"></path><path d="M1.42 9a16 16 0 0 1 21.16 0"></path><path d="M8.53 16.11a6 6 0 0 1 6.95 0"></path><line x1="12" y1="20" x2="12.01" y2="20"></line></svg>
</div>
<h4 class="card-title">Android Device Cannot Reach Server</h4>
<p class="card-desc">Verify both the computer hosting <code>tis_rms_server</code> and the Android device are connected to the same local network router. Ensure the Server IP in the app login matches the host machine's LAN address with port 18484 (e.g., <code>http://192.168.1.100:18484</code>).</p>
</div>
<div class="feature-card">
<div class="card-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline></svg>
</div>
<h4 class="card-title">Scanned Document Preview Fails</h4>
<p class="card-desc">If an uploaded PDF has damaged headers, select <strong>Regenerate Thumbnail</strong> from the document context menu. The server will re-render pages as lossless WebP images.</p>
</div>
<div class="feature-card">
<div class="card-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 6 2 18 2 18 9"></polyline><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path><rect x="6" y="14" width="12" height="8"></rect></svg>
</div>
<h4 class="card-title">Batch Print Memory Allocation</h4>
<p class="card-desc">When compiling large cohorts (>50 students), ensure the host machine has at least 500MB free temporary disk space. TIS-RMS streams pages in chunks of 10 to prevent memory exhaustion.</p>
</div>
</div>
</section>
<!-- Documentation Footer -->
<footer class="doc-footer">
<div class="footer-credits">
<img src="assets/logo.png" alt="Logo">
<div>
<strong>Talisay Integrated School - Records Management System</strong>
<div>Designed for Talisay Integrated School Tiaong, Quezon. All rights reserved.</div>
</div>
</div>
<div>
<span>Document Version 1.0 • Updated October 2026</span>
</div>
</footer>
</main>
</div>
<!-- Lightbox Modal for High-Resolution Screenshot Zooming -->
<div class="lightbox-modal" id="lightboxModal">
<button class="lightbox-close" id="lightboxCloseBtn" title="Close (Esc)">&times;</button>
<img src="" alt="Enlarged Screenshot" class="lightbox-img" id="lightboxImg">
<div class="lightbox-caption" id="lightboxCaption"></div>
</div>
<script src="app.js"></script>
</body>
</html>