Standard Operating Procedure: Institutional QMS Web Layout

1.0 Purpose

This document defines the layout rules, interactive components, and visual framework of the HWB Institutional Operating Manual. It outlines how dynamic assets are loaded and displayed to ensure users can navigate standard procedures easily.

2.0 Scope

Applies to the web interface templates of the QMS system, specifically the base layout, department-based filter views, and sequential document readers.

3.0 The Web Layout Architecture

The manual is built using a microservice framework that separates content compilation from page rendering. The layout acts as an interactive shell that displays standard-compliant documents on demand.

3.1 Architectural Working Parts Flowchart

4.0 Detailed Interface Working Parts

4.1 Global Base Shell (sop_base.html)

• Sidebar Catalog: Groups manual records by department. Built dynamically from qms_index.json using nested loops.
• Collapsible Department Accordions: Smooth height-shifting folders controlled by client-side JavaScript. Activating an SOP automatically expands its parent department.
• Live Keyword Search: A client-side filter input that scans titles and document IDs. It hides unmatched folders and expands matching results instantly.
• Active SOW Queue: A browser-based manual pinning system (Option A). Allows the operator to bookmark up to 10 key SOP files for active work sessions. Stored in localStorage.
• Recently Viewed Tracker: An automatic history list (Option B) that displays the last 3 accessed SOPs for rapid backtracking.
• Visual Blueprint: Clinical slate palette background (#f8fafc) with a soft grid overlay. Structural card border-radii are capped strictly at 1.25rem (20px).

4.2 Enterprise Card Index (qms_manual_index.html)

• Enterprise Tab Rack: A row of compressed department tab buttons. Selecting a tab filters the grid below instantly.
• High-Density Info Cards: Displays the SOP Title, Document ID, Version, and Release Date. Features soft depth shadows and translations on hover.
• Compliance Status Badges: Soft pastel pills indicating baseline checks (Muted Green #e6f4ea for UPDATED, Muted Yellow #fef7e0 for OUTDATED).

4.3 Sequential Document Shell (qms_shell.html)

• Fragment Inject Zone: A central content container that renders HTML snippets from the Compliance Engine inside a smooth slide-fade animation (.sigma-view-fade).
• Smart Navigation System: Buttons at the bottom that dynamically read the sidebar to find the Next and Previous SOP links. Displays the exact ID and path for sequential reading.
• Audit Header Control: Limits heading elements (h1, h2, h3) inside the inject zone to high-density, Semi-Bold limits (capped strictly to 1.5rem).

5.0 Verification (Zero-Defect Checklist)

• Verify that all interactive accordion menus transition smoothly on click.
• Confirm that the real-time search input correctly filters both SOP IDs and full titles.
• Check that printing the document excludes the sidebar and navigation bars, producing a clean paper copy.

6.0 Revision History