Blood Bank Management Screen Requirements
Home / Clinical Modules / Blood Bank Management / Screen Requirements

Blood Bank Management Screen Requirements

Screen Inventory

Screen ID Screen Name Primary Actor(s) Workflow(s) Access Level
SCR-BLOODBANK-001 Donor Registration & Screening Blood Bank Technologist, Donor Physician WF-BB-001 Blood bank staff, Donor physicians
SCR-BLOODBANK-002 Blood Collection & Processing Blood Bank Technologist WF-BB-002 Blood bank staff
SCR-BLOODBANK-003 Type & Screen / Crossmatch Workbench Blood Bank Technologist, Senior Technologist WF-BB-003, WF-BB-004 Blood bank staff
SCR-BLOODBANK-004 Blood Component Inventory Blood Bank Technologist, Blood Bank Supervisor WF-BB-002, WF-BB-004, WF-BB-007 Blood bank staff, Supervisors
SCR-BLOODBANK-005 Blood Issue & Return Blood Bank Technologist, Nurse (Transfusion) WF-BB-004, WF-BB-005 Blood bank staff, Ward nurses
SCR-BLOODBANK-006 Transfusion Administration Nurse (Transfusion), Ordering Physician WF-BB-005 Ward/ICU nurses, Physicians
SCR-BLOODBANK-007 Transfusion Reaction Investigation Blood Bank Technologist, Blood Bank Medical Director, Physician WF-BB-006 Blood bank staff, Pathologists
SCR-BLOODBANK-008 Blood Bank Dashboard Blood Bank Supervisor, Blood Bank Medical Director WF-BB-007 (monitoring) Supervisors, Medical Director
flowchart LR H["HIS Home"] --> BB["Blood Bank Home"] BB --> DRS["SCR-BLOODBANK-001<br/>Donor Registration & Screening"] BB --> BCP["SCR-BLOODBANK-002<br/>Blood Collection & Processing"] BB --> TSX["SCR-BLOODBANK-003<br/>Type & Screen / Crossmatch Workbench"] BB --> INV["SCR-BLOODBANK-004<br/>Blood Component Inventory"] BB --> ISSUE["SCR-BLOODBANK-005<br/>Blood Issue & Return"] BB --> ADMIN["SCR-BLOODBANK-006<br/>Transfusion Administration"] BB --> REACT["SCR-BLOODBANK-007<br/>Transfusion Reaction Investigation"] BB --> DASH["SCR-BLOODBANK-008<br/>Blood Bank Dashboard"] %% Donor flow DRS -->|"Approved donor"| BCP %% Pre-transfusion testing TSX --> INV TSX --> ISSUE %% Issue & administration INV --> ISSUE ISSUE --> ADMIN ISSUE --> INV %% Reaction handling ADMIN -->|"Reaction suspected"| REACT REACT --> TSX REACT --> INV %% Supervisory / monitoring INV --> DASH ISSUE --> DASH ADMIN --> DASH REACT --> DASH

Screen Specifications

Notes for all clinical screens: - Patient banner (for patient-facing workflows) or Donor banner (for donor workflows) appears at top. - All date/time fields use facility time zone; 24-hour format. - All lists support Arabic/English labels; data stored in neutral codes.

SCR-BLOODBANK-001: Donor Registration & Screening

Purpose

Capture donor demographics, Emirates ID, contact details, screening questionnaire, vitals, consent, and deferral decisions for voluntary donors and blood drives, in compliance with UAE MOH blood safety guidelines and UAE PDPL.

Field Specifications

Field Type Required Validation Default Notes
Donor Search Text + button No Min 2 chars; search by name, Emirates ID, phone — Searches blood_donors and optionally patients (if donor is also patient)
Emirates ID Text Yes (for UAE residents) Regex ^784-\d{4}-\d{7}-\d$; uniqueness in blood_donors — Auto-format 784-YYYY-NNNNNNN-C; allow override for non-residents (passport)
Passport Number Text Conditional Required if Emirates ID not provided — For visitors / non-residents
First Name (English) Text Yes 1–50 chars — Stored in blood_donors.first_name
Last Name (English) Text Yes 1–50 chars — blood_donors.last_name
Name (Arabic) Text No Max 100 chars — For bilingual labels; optional
Date of Birth Date Yes Not in future; age ≥ 18 (configurable) — Age-based eligibility check
Gender Dropdown Yes IN (Male, Female, Other) — Drives eligibility rules (e.g., pregnancy questions)
Mobile Number Tel Yes UAE mobile format ^\+971 5\d \d{3} \d{4}$ +971 SMS reminders, deferral notifications
Email Email No Valid email format — For donor communication
Nationality Dropdown Yes From master nationalities UAE Impacts some risk questions (e.g., malaria endemic areas)
Address (Free Text) Textarea No Max 250 chars — Include PO Box, Emirate
ABO Group (if known) Dropdown No From master ABO codes — For repeat donors; not used for eligibility
Rh Type (if known) Dropdown No From master Rh codes — Optional
Donation History Summary Read-only No — — Displays total donations, last donation date, deferrals
Screening Questionnaire Responses Structured checklist Yes Each question must be answered Yes/No — Questions configured in master; auto-score risk
Auto-Score Result Read-only badge Yes Derived from questionnaire — Eligible / Temporary Deferral / Permanent Deferral / Needs Physician Review
Vitals: Blood Pressure Numeric (systolic/diastolic) Yes Within configured safe range — Stored in vitals JSON or separate table
Vitals: Pulse Numeric Yes 40–120 bpm (configurable) — Eligibility rule
Vitals: Temperature Numeric Yes 35–38 °C (configurable) —
Vitals: Weight Numeric Yes ≥ min weight (e.g., 50 kg) — Used to calculate max donation volume
Hemoglobin / Hb Numeric Yes Within gender-specific thresholds — May be imported from POCT device
Donor Physician Decision Radio Yes IN (Approved, Temporary Deferral, Permanent Deferral) — Only Donor Physician can finalize
Deferral Reason Dropdown Conditional Required if deferral selected; from master Donor Deferral Reasons — MOH-compliant reasons
Deferral Until Date Conditional Required for temporary deferral; > today — Auto-calculated for some reasons
Consent to Donate Checkbox Yes Must be checked Unchecked Text references UAE PDPL and MOH consent requirements
Consent Timestamp Read-only Yes Auto-set when consent checked Now Audit trail
Donor Status Read-only Yes Derived: Active / Deferred / Permanently Deferred — blood_donors.donor_status
Notes Textarea No Max 500 chars — Free-text comments by physician
Blood Drive / Collection Site Dropdown Yes From facilities/locations Current facility For mobile drives vs in-centre

Validation Messages

Condition Message Severity
Emirates ID format invalid "Please enter a valid Emirates ID in the format 784-YYYY-NNNNNNN-C." Error
Duplicate Emirates ID "A donor with this Emirates ID already exists. Load existing record instead of creating a new one." Error
Age < minimum "Donor does not meet minimum age requirement for donation." Error
Required questionnaire unanswered "Please answer all screening questions before proceeding." Error
Auto-score = High risk but decision = Approved "High-risk screening result. Donor cannot be approved without overriding risk criteria." Error (hard stop for non-physicians; warning for physicians with override reason required)
Vitals outside safe range "Recorded vital signs are outside acceptable donation limits. Please review or defer donor." Warning (can be escalated to error per policy)
Consent not checked "Informed consent is required before registering a donation." Error
Temporary deferral without 'Deferral Until' "Please specify the deferral end date." Error

Actions / Buttons

Action Description Permissions
Search Donor Executes donor search and displays results list All blood bank staff
New Donor Clears form for new donor registration Blood Bank Technologist, Supervisor
Save Draft Saves incomplete screening without final decision Blood Bank Technologist
Submit for Physician Review Locks questionnaire and vitals; routes to Donor Physician Blood Bank Technologist
Approve Donor Sets donor as eligible and creates/updates blood_donors record Donor Physician
Defer Donor Sets donor as temporarily or permanently deferred Donor Physician, Supervisor
Print Donor Card Prints donor ID card with barcode Blood Bank Technologist
Start Donation Creates pending blood_donations record and navigates to SCR-BLOODBANK-002 Blood Bank Technologist

HTML Wireframe Mockup (Key Screen)

Show HTML code
HTML
<div style="font-family: Arial, sans-serif; max-width: 960px; margin: 0 auto; border: 1px solid #ccc; border-radius: 8px; overflow: hidden;">
  <div style="background: #0b5ed7; color: white; padding: 12px 20px; display: flex; justify-content: space-between; align-items: center;">
    <h3 style="margin: 0;">Donor Registration &amp; Screening</h3>
    <span style="font-size: 12px;">UAE MOH Compliant • v1.0</span>
  </div>
  <div style="padding: 16px 20px; border-bottom: 1px solid #eee;">
    <!-- Search / Existing Donor -->
    <div style="display: flex; gap: 8px; align-items: flex-end;">
      <div style="flex: 1;">
        <label for="donorSearch" style="display:block; font-weight:bold; margin-bottom:4px;">Search Donor (Name / Emirates ID / Mobile)</label>
        <input id="donorSearch" type="text" style="width:100%; padding:6px 8px; border:1px solid #ccc; border-radius:4px;" />
      </div>
      <button type="button" style="padding:6px 12px; border:none; border-radius:4px; background:#0b5ed7; color:#fff;">Search</button>
      <button type="button" style="padding:6px 12px; border:1px solid #0b5ed7; border-radius:4px; background:#fff; color:#0b5ed7;">New Donor</button>
    </div>
  </div>
  <div style="padding: 16px 20px; display:flex; flex-wrap:wrap; gap:16px;">
    <!-- Left column: Demographics -->
    <div style="flex:1 1 320px; min-width:280px;">
      <h4 style="margin-top:0;">Demographics</h4>
      <div style="margin-bottom:8px;">
        <label style="display:block; font-weight:bold;">Emirates ID</label>
        <input type="text" placeholder="784-YYYY-NNNNNNN-C" style="width:100%; padding:6px 8px; border:1px solid #ccc; border-radius:4px;">
      </div>
      <div style="display:flex; gap:8px; margin-bottom:8px;">
        <div style="flex:1;">
          <label style="display:block; font-weight:bold;">First Name (EN)</label>
          <input type="text" style="width:100%; padding:6px 8px; border:1px solid #ccc; border-radius:4px;">
        </div>
        <div style="flex:1;">
          <label style="display:block; font-weight:bold;">Last Name (EN)</label>
          <input type="text" style="width:100%; padding:6px 8px; border:1px solid #ccc; border-radius:4px;">
        </div>
      </div>
      <div style="margin-bottom:8px;">
        <label style="display:block; font-weight:bold;">Name (Arabic)</label>
        <input type="text" dir="rtl" style="width:100%; padding:6px 8px; border:1px solid #ccc; border-radius:4px;">
      </div>
      <div style="display:flex; gap:8px; margin-bottom:8px;">
        <div style="flex:1;">
          <label style="display:block; font-weight:bold;">Date of Birth</label>
          <input type="date" style="width:100%; padding:6px 8px; border:1px solid #ccc; border-radius:4px;">
        </div>
        <div style="flex:1;">
          <label style="display:block; font-weight:bold;">Gender</label>
          <select style="width:100%; padding:6px 8px; border:1px solid #ccc; border-radius:4px;">
            <option>Male</option>
            <option>Female</option>
            <option>Other</option>
          </select>
        </div>
      </div>
      <div style="margin-bottom:8px;">
        <label style="display:block; font-weight:bold;">Mobile Number</label>
        <input type="tel" placeholder="+971 5X XXX XXXX" style="width:100%; padding:6px 8px; border:1px solid #ccc; border-radius:4px;">
      </div>
    </div>
    <!-- Right column: Screening & Vitals -->
    <div style="flex:1 1 320px; min-width:280px;">
      <h4 style="margin-top:0;">Screening &amp; Vitals</h4>
      <div style="margin-bottom:8px; padding:8px; border:1px solid #eee; border-radius:4px; background:#f8f9fa;">
        <strong>Screening Result:</strong>
        <span style="display:inline-block; margin-left:8px; padding:2px 6px; border-radius:4px; background:#d1e7dd; color:#0f5132;">Eligible</span>
      </div>
      <div style="display:flex; gap:8px; margin-bottom:8px;">
        <div style="flex:1;">
          <label style="display:block; font-weight:bold;">BP (mmHg)</label>
          <input type="text" placeholder="120/80" style="width:100%; padding:6px 8px; border:1px solid #ccc; border-radius:4px;">
        </div>
        <div style="flex:1;">
          <label style="display:block; font-weight:bold;">Pulse (bpm)</label>
          <input type="number" style="width:100%; padding:6px 8px; border:1px solid:#ccc; border-radius:4px;">
        </div>
      </div>
      <div style="display:flex; gap:8px; margin-bottom:8px;">
        <div style="flex:1;">
          <label style="display:block; font-weight:bold;">Temperature (°C)</label>
          <input type="number" step="0.1" style="width:100%; padding:6px 8px; border:1px solid:#ccc; border-radius:4px;">
        </div>
        <div style="flex:1;">
          <label style="display:block; font-weight:bold;">Weight (kg)</label>
          <input type="number" step="0.1" style="width:100%; padding:6px 8px; border:1px solid:#ccc; border-radius:4px;">
        </div>
      </div>
      <div style="margin-bottom:8px;">
        <label style="display:block; font-weight:bold;">Hemoglobin (g/dL)</label>
        <input type="number" step="0.1" style="width:100%; padding:6px 8px; border:1px solid:#ccc; border-radius:4px;">
      </div>
      <div style="margin-top:12px;">
        <label style="display:block; font-weight:bold;">Physician Decision</label>
        <div>
          <label><input type="radio" name="decision"> Approve</label>
          <label style="margin-left:12px;"><input type="radio" name="decision"> Temporary Deferral</label>
          <label style="margin-left:12px;"><input type="radio" name="decision"> Permanent Deferral</label>
        </div>
      </div>
    </div>
  </div>
  <div style="padding: 12px 20px; border-top:1px solid #eee; display:flex; justify-content:space-between; align-items:center;">
    <div>
      <label><input type="checkbox"> I confirm informed consent has been obtained (Arabic/English form).</label>
    </div>
    <div>
      <button type="button" style="margin-right:8px; padding:6px 12px; border:1px solid #6c757d; border-radius:4px; background:#fff; color:#6c757d;">Save Draft</button>
      <button type="button" style="margin-right:8px; padding:6px 12px; border:none; border-radius:4px; background:#0b5ed7; color:#fff;">Submit for Review</button>
      <button type="button" style="padding:6px 12px; border:none; border-radius:4px; background:#198754; color:#fff;">Start Donation</button>
    </div>
  </div>
</div>

Accessibility (WCAG 2.1 AA)

  • All inputs have <label> elements; grouping of vitals and decisions uses <fieldset>/<legend> in implementation.
  • Error messages associated via aria-describedby and announced in an aria-live="polite" region.
  • Colour-coded eligibility badges always include text labels.
  • Keyboard navigation: logical tab order; radio groups navigable via arrow keys.
  • Support for right-to-left text in Arabic fields (dir="rtl").

Responsive / Mobile

  • On tablets (≥768px): two-column layout as shown.
  • On small screens (<768px): stacks into single column; buttons become full-width.
  • Touch targets ≥44px height; numeric keyboards for vitals and Emirates ID on mobile.
  • Questionnaire presented as paginated sections on mobile to reduce scrolling.

SCR-BLOODBANK-002: Blood Collection & Processing

Purpose

Record donation event details, collection status, pilot tube tracking, component processing, labeling, and quarantine/release actions, with barcode-driven workflows and linkage to LIS for infectious disease testing.

Field Specifications

Field Type Required Validation Default Notes
Donation ID Read-only Yes Auto-generated unique — blood_donations.donation_id
Donor Banner Read-only Yes — — Shows donor name, ID, last Hb, deferral status
Collection Site Dropdown Yes From facilities/locations From donor registration blood_donations.collection_site
Collector (Technologist) Dropdown / auto Yes Must be active user with permission Current user blood_donations.collector_id
Donation Date Date Yes ≤ today Today
Donation Start Time Time Yes Not in future Now
Donation End Time Time Yes ≥ start time —
Donation Type Dropdown Yes IN (Whole blood, Apheresis platelets, Apheresis plasma, Other) Whole blood blood_donations.donation_type
Volume Collected (mL) Numeric Yes >0 and ≤ max allowed (based on weight) — blood_donations.volume_ml
Complications Multi-select No From master (e.g., vasovagal, hematoma) — blood_donations.complications
Screening Pass Checkbox Yes Must be true to proceed Checked blood_donations.screening_pass
Infectious Disease Status Read-only Yes Pending / Negative / Positive / Indeterminate Pending Updated from LIS
Collection Status Read-only Yes IN (In progress, Completed, Aborted) In progress blood_donations.status
Pilot Tube Barcodes Repeating barcode inputs Yes Each tube scanned must be unique — Linked to LIS specimen IDs
Component List Dynamic table Yes At least one component — Derived from processing template
Component Type Dropdown (per row) Yes From master Blood Component Types — blood_components.component_type
Component ABO/Rh Read-only Yes From donor type — blood_components.abo_group, rh_type
Component Volume (mL) Numeric Yes >0 — blood_components.volume_ml
Collection Datetime Read-only Yes From donation end time — blood_components.collection_datetime
Expiry Datetime Read-only Yes Calculated from component type rules — blood_components.expiry_datetime
Special Processing Flags Checkboxes No — — Irradiated, Leukoreduced, Washed
Quarantine Status Read-only Yes Quarantined Pending Tests / Released / Discarded Quarantined blood_quarantine_log linkage
Label Printing Button Yes Requires all mandatory fields — Triggers ISBT 128 label print

Validation Messages

Condition Message Severity
Volume exceeds allowed max "Collected volume exceeds maximum allowed for donor weight. Please verify." Error
Donation end time < start time "End time cannot be earlier than start time." Error
No pilot tubes scanned "At least one pilot tube must be collected and scanned." Error
Component row missing type or volume "Please complete component type and volume for all rows." Error
Attempt to release components before negative tests "Components cannot be released until all mandatory infectious disease tests are reported negative." Error
Infectious disease positive "Donation is reactive. All associated components must be permanently quarantined and discarded per biohazard protocol." Error (blocks release)

Actions / Buttons

Action Description Permissions
Start Collection Marks donation as In progress Blood Bank Technologist
Complete Collection Validates fields and sets status to Completed Blood Bank Technologist
Abort Collection Marks donation as Aborted with reason Blood Bank Technologist, Supervisor
Generate Components Auto-creates component rows based on donation type template Blood Bank Technologist
Print Labels Prints ISBT 128-compliant labels for each component and pilot tube Blood Bank Technologist
Quarantine Components Creates entries in blood_quarantine_log with reason "Pending infectious disease testing" Blood Bank Technologist
Release Components Upon negative results, updates inventory and quarantine log Senior Technologist, Supervisor
Mark for Discard For positive/indeterminate results; creates blood_discard_log entries Supervisor

Accessibility

  • Barcode input fields support manual entry with clear labels for screen readers.
  • Status changes announced via aria-live region (e.g., "Donation marked as completed").
  • Tables use <th scope="col"> and <th scope="row"> for component rows.

Responsive / Mobile

  • Optimized for tablets at collection sites; two-column layout collapses to single column on phones.
  • Barcode scan buttons integrate with device camera where supported; fallback to manual entry.
  • Large buttons for Start/Complete/Abort to support gloved use.

SCR-BLOODBANK-003: Type & Screen / Crossmatch Workbench

Purpose

Unified workbench for managing type & screen orders, performing ABO/Rh typing, antibody screening and identification, and recording crossmatch results with historical comparison, in alignment with UAE MOH and international transfusion safety standards.

Field Specifications

Workbench is split into three panels: Worklist, Patient Details, Testing Results.

Worklist Panel

Field Type Required Validation Default Notes
Filter by Status Dropdown No IN (All, Pending, In Progress, Completed) Pending
Filter by Priority Dropdown No IN (Routine, Urgent, Emergency) All
Search (Patient / MRN) Text No Min 2 chars — Filters worklist
Worklist Table Table — — — Shows specimen ID, patient, location, order type, status

Patient Details Panel

Field Type Required Validation Default Notes
Patient Banner Read-only Yes — — Name, MRN, age, sex, location, allergies
Current Specimen ID Read-only Yes — — blood_type_screen.specimen_id
Specimen Collection Time Read-only Yes — — From LIS / CPOE
Historical ABO/Rh Read-only No — — Last 3 results; highlight discrepancies
Transfusion History Read-only No — — Last transfusions, reactions

Testing Results Panel (Type & Screen)

Field Type Required Validation Default Notes
Forward Group (Cell) Dropdown Yes A/B/AB/O — blood_type_screen.forward_group
Reverse Group (Serum) Dropdown Yes A/B/AB/O — blood_type_screen.reverse_group
ABO Group Read-only Yes Derived from forward/reverse — blood_type_screen.abo_group
Rh Type Dropdown Yes Positive/Negative — blood_type_screen.rh_type
Antibody Screen Result Dropdown Yes Negative / Positive / Inconclusive — blood_type_screen.antibody_screen_result
Antibody Specificity Autocomplete Conditional Required if screen positive — blood_type_screen.antibody_specificity (from master)
Tested By Dropdown/auto Yes Active technologist Current user blood_type_screen.tested_by
Tested Datetime Datetime Yes ≤ now Now blood_type_screen.tested_datetime
Valid Until Datetime Yes ≥ tested datetime Auto: +72h blood_type_screen.valid_until
Historical Type Concordant Read-only Yes Yes/No — blood_type_screen.historical_type_concordant

Crossmatch Section (per selected component)

Field Type Required Validation Default Notes
Crossmatch Type Dropdown Yes IN (Electronic, Serological) Based on rules crossmatch_records.crossmatch_type
Selected Component ID Read-only Yes Must be compatible ABO/Rh — crossmatch_records.component_id
Result Dropdown Yes Compatible / Incompatible / Not Performed — crossmatch_records.result
Performed By Dropdown/auto Yes Active technologist Current user crossmatch_records.performed_by
Performed Datetime Datetime Yes ≤ now Now crossmatch_records.performed_datetime
Valid Until Datetime Yes ≥ performed datetime Auto per policy crossmatch_records.valid_until
Comments Textarea No Max 500 chars —

Validation Messages

Condition Message Severity
Forward and reverse groups inconsistent "Forward and reverse grouping are discrepant. Resolve discrepancy before releasing result." Error
Historical type discordant "Current ABO/Rh does not match historical records. Investigation required before transfusion." Warning (may be hard stop for electronic crossmatch)
Antibody screen positive but specificity empty "Please record antibody specificity or mark as 'Unknown' with comment." Error
Electronic crossmatch selected but rules not met "Electronic crossmatch not permitted. Two concordant historical types and negative antibody screen are required." Error
Crossmatch result incompatible "Selected unit is incompatible. Do not issue this unit." Error

Actions / Buttons

Action Description Permissions
Claim / Start Assigns specimen to current technologist and sets status to In Progress Blood Bank Technologist
Save Partial Saves partially completed results Blood Bank Technologist
Finalize Type & Screen Locks results and sends to CPOE/EHR Senior Technologist (or Technologist with rights)
Add Crossmatch Opens component selection and crossmatch entry Blood Bank Technologist
Approve Electronic Crossmatch Override Allows override in exceptional cases with justification Senior Technologist, Medical Director
Print Compatibility Tag Prints patient-unit compatibility label Blood Bank Technologist

HTML Wireframe Mockup (Key Screen)

Show HTML code
HTML
<div style="font-family: Arial, sans-serif; max-width: 1100px; margin: 0 auto; border: 1px solid #ccc; border-radius: 8px; overflow: hidden;">
  <div style="background:#0b5ed7; color:#fff; padding:10px 16px;">
    <h3 style="margin:0;">Type &amp; Screen / Crossmatch Workbench</h3>
  </div>
  <div style="display:flex; flex-wrap:wrap;">
    <!-- Worklist -->
    <div style="flex:0 0 30%; min-width:260px; border-right:1px solid #eee; max-height:520px; overflow-y:auto;">
      <div style="padding:10px 12px; border-bottom:1px solid #eee;">
        <strong>Worklist</strong>
        <div style="margin-top:8px;">
          <input type="text" placeholder="Search patient / MRN" style="width:100%; padding:4px 6px; border:1px solid #ccc; border-radius:4px;">
        </div>
      </div>
      <table style="width:100%; border-collapse:collapse; font-size:12px;">
        <thead>
          <tr style="background:#f8f9fa;">
            <th style="padding:4px; border-bottom:1px solid #eee;">Specimen</th>
            <th style="padding:4px; border-bottom:1px solid #eee;">Patient</th>
            <th style="padding:4px; border-bottom:1px solid #eee;">Status</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td style="padding:4px; border-bottom:1px solid #f1f1f1;">TS-2026-00123</td>
            <td style="padding:4px; border-bottom:1px solid #f1f1f1;">Ahmed Al-Maktoum</td>
            <td style="padding:4px; border-bottom:1px solid #f1f1f1;"><span style="background:#fff3cd; padding:2px 4px; border-radius:4px;">Pending</span></td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- Main panel -->
    <div style="flex:1 1 70%; min-width:320px;">
      <!-- Patient banner -->
      <div style="padding:8px 12px; border-bottom:1px solid #eee; background:#f8f9fa;">
        <strong>Patient:</strong> Ahmed Al-Maktoum (MRN: 00123456) • Male • 45 yrs • Ward: ICU-3<br>
        <strong>Allergies:</strong> None • <strong>Last transfusion:</strong> 2026-01-15
      </div>
      <div style="padding:10px 12px; display:flex; flex-wrap:wrap; gap:12px;">
        <!-- Type & Screen -->
        <div style="flex:1 1 260px; min-width:260px;">
          <h4 style="margin-top:0;">Type &amp; Screen</h4>
          <div style="margin-bottom:6px;">
            <label style="display:block; font-weight:bold;">Forward Group</label>
            <select style="width:100%; padding:4px 6px; border:1px solid #ccc; border-radius:4px;">
              <option>O</option><option>A</option><option>B</option><option>AB</option>
            </select>
          </div>
          <div style="margin-bottom:6px;">
            <label style="display:block; font-weight:bold;">Reverse Group</label>
            <select style="width:100%; padding:4px 6px; border:1px solid #ccc; border-radius:4px;">
              <option>O</option><option>A</option><option>B</option><option>AB</option>
            </select>
          </div>
          <div style="margin-bottom:6px;">
            <label style="display:block; font-weight:bold;">Rh Type</label>
            <select style="width:100%; padding:4px 6px; border:1px solid #ccc; border-radius:4px;">
              <option>Positive</option><option>Negative</option>
            </select>
          </div>
          <div style="margin-bottom:6px;">
            <label style="display:block; font-weight:bold;">Antibody Screen</label>
            <select style="width:100%; padding:4px 6px; border:1px solid #ccc; border-radius:4px;">
              <option>Negative</option><option>Positive</option><option>Inconclusive</option>
            </select>
          </div>
          <div style="margin-bottom:6px;">
            <label style="display:block; font-weight:bold;">Antibody Specificity</label>
            <input type="text" placeholder="e.g., Anti-D" style="width:100%; padding:4px 6px; border:1px solid #ccc; border-radius:4px;">
          </div>
        </div>
        <!-- Crossmatch -->
        <div style="flex:1 1 260px; min-width:260px;">
          <h4 style="margin-top:0;">Crossmatch</h4>
          <div style="margin-bottom:6px;">
            <label style="display:block; font-weight:bold;">Component ID</label>
            <input type="text" placeholder="Scan unit barcode" style="width:100%; padding:4px 6px; border:1px solid #ccc; border-radius:4px;">
          </div>
          <div style="margin-bottom:6px;">
            <label style="display:block; font-weight:bold;">Crossmatch Type</label>
            <select style="width:100%; padding:4px 6px; border:1px solid #ccc; border-radius:4px;">
              <option>Electronic</option>
              <option>Serological</option>
            </select>
          </div>
          <div style="margin-bottom:6px;">
            <label style="display:block; font-weight:bold;">Result</label>
            <select style="width:100%; padding:4px 6px; border:1px solid #ccc; border-radius:4px;">
              <option>Compatible</option>
              <option>Incompatible</option>
              <option>Not Performed</option>
            </select>
          </div>
          <div style="margin-bottom:6px;">
            <label style="display:block; font-weight:bold;">Comments</label>
            <textarea style="width:100%; padding:4px 6px; border:1px solid #ccc; border-radius:4px;" rows="3"></textarea>
          </div>
        </div>
      </div>
      <div style="padding:8px 12px; border-top:1px solid #eee; display:flex; justify-content:space-between; align-items:center;">
        <div>
          <span style="font-size:12px;">Valid until: 2026-02-10 14:30 • Historical type: O+ (Concordant)</span>
        </div>
        <div>
          <button type="button" style="margin-right:8px; padding:6px 10px; border:1px solid #6c757d; border-radius:4px; background:#fff; color:#6c757d;">Save</button>
          <button type="button" style="margin-right:8px; padding:6px 10px; border:none; border-radius:4px; background:#0b5ed7; color:#fff;">Finalize T&amp;S</button>
          <button type="button" style="padding:6px 10px; border:none; border-radius:4px; background:#198754; color:#fff;">Print Tag</button>
        </div>
      </div>
    </div>
  </div>
</div>

Accessibility

  • Worklist rows focusable; pressing Enter selects specimen.
  • Crossmatch and type fields grouped with <fieldset> and descriptive legends.
  • Discrepancy warnings displayed in an aria-live="assertive" region.

Responsive / Mobile

  • On smaller screens, worklist collapses to a top dropdown; main panel occupies full width.
  • Crossmatch section can be toggled to full-screen on mobile for easier barcode scanning.

SCR-BLOODBANK-004: Blood Component Inventory

Purpose

Provide real-time view and management of blood component inventory across facilities/locations, with FEFO (First Expiry First Out) ordering, filters by component and ABO/Rh, and actions to issue or discard units.

Field Specifications

Field Type Required Validation Default Notes
Component Type Filter Dropdown No From master Blood Component Types All
ABO Group Filter Dropdown No From ABO master All
Rh Filter Dropdown No IN (All, Positive, Negative) All
Facility / Location Filter Dropdown No From facilities/locations Current facility
Status Filter Dropdown No IN (Available, Reserved, Quarantined, Issued, Discarded) Available
Expiry Sort Toggle No Asc/Desc Asc (soonest first) FEFO
Inventory Table Table — — — Columns: Component ID, Type, ABO/Rh, Expiry, Location, Status, Actions
Low-Stock Indicator Read-only No Calculated vs par levels — Visual gauges per component group

Validation Messages

Condition Message Severity
Attempt to issue quarantined unit "This unit is quarantined and cannot be issued." Error
Attempt to issue expired unit "This unit is expired and must be discarded, not issued." Error
Attempt to discard without reason "Please select a discard reason and witness before confirming discard." Error

Actions / Buttons

Action Description Permissions
Refresh Reloads inventory data All blood bank users
Issue Opens SCR-BLOODBANK-005 with selected unit pre-populated Blood Bank Technologist
Mark Quarantined Changes status and opens quarantine reason dialog Technologist, Supervisor
Discard Opens discard dialog; creates blood_discard_log entry Supervisor
Transfer Initiates inter-facility transfer workflow Supervisor

Accessibility

  • Inventory table supports keyboard navigation and column sorting via keyboard.
  • Low-stock alerts use icons and text, not colour alone.

Responsive / Mobile

  • On mobile, table collapses to cards per unit with key fields and actions.
  • Filters accessible via slide-down panel.

SCR-BLOODBANK-005: Blood Issue & Return

Purpose

Manage issuing of compatible blood components to patients based on transfusion orders, ensure correct patient-component matching, track pickup and return, and handle re-inventory or discard of returned units.

Field Specifications

Field Type Required Validation Default Notes
Transfusion Order Search Text Yes Search by order ID, patient, MRN —
Selected Order Summary Read-only Yes — — Shows component type, units requested, indication, priority
Patient Banner Read-only Yes — —
Compatible Units List Table Yes Only units matching ABO/Rh and special requirements — From crossmatch_records and inventory
Crossmatch Status Read-only Yes Completed / Pending / Not required —
Issue To (Ward/Unit) Dropdown Yes From locations From order encounter
Issue To Person Text / dropdown Yes Must be valid staff ID — Nurse picking up
Pickup Verification Barcode + checkbox Yes Unit ID scanned must match selected component —
Issue Time Datetime Yes ≤ now Now
Return Processing Section Collapsible No — — For returned units
Returned? Checkbox Conditional If checked, return fields required —
Return Time Datetime Conditional ≥ issue time —
Return Condition Dropdown Conditional IN (Unopened, Opened, Damaged, Temperature excursion) —
Re-Inventory Eligible Read-only Conditional Based on time out and condition — Business rules
Return Processed By Dropdown/auto Conditional Active technologist Current user

Validation Messages

Condition Message Severity
No compatible units available "No compatible units available for this order. Please review inventory or contact supervisor." Error
Issue without crossmatch when required "Crossmatch is required for this patient/order before issuing units." Error
Unit not picked up within threshold "Unit has been out of controlled storage for more than {threshold} minutes. Re-issue is not permitted; process as return/discard." Warning
Return marked re-inventory but condition unsuitable "Unit cannot be returned to inventory due to condition/time out of fridge." Error

Actions / Buttons

Action Description Permissions
Select Order Loads order and compatible units Technologist
Issue Selected Unit(s) Records issue event and updates inventory Technologist
Print Issue Tag Prints patient/unit tag and checklist Technologist
Process Return Updates inventory or discard log based on rules Technologist, Supervisor
Alert Unreturned Units Shows list of units not returned within threshold Technologist, Supervisor

Accessibility

  • Issue checklist presented as ordered list with clear labels.
  • Barcode scanning fields have text alternatives.

Responsive / Mobile

  • Designed primarily for blood bank workstations; mobile view supports quick issue confirmation and return processing.

SCR-BLOODBANK-006: Transfusion Administration

Purpose

Bedside interface for nurses to verify patient and product, record vitals and monitoring timeline, document completion, and trigger reaction workflow, supporting barcode scanning and timed prompts.

Field Specifications

Field Type Required Validation Default Notes
Patient Verification Barcode + read-only banner Yes Wristband ID must match patient —
Product Verification Barcode + read-only Yes Unit ID, ABO/Rh, patient name must match issue tag —
Two-Nurse Check Checkbox pair Yes Both nurses must confirm — verifier1_id, verifier2_id
Pre-Transfusion Vitals Structured inputs Yes All fields required (Temp, BP, Pulse, Resp, SpO2) — Stored in pre_vitals_json
Start Datetime Datetime Yes ≥ now - small tolerance Now transfusion_administration.start_datetime
Rate (mL/hr) Numeric Yes >0 and ≤ max allowed — transfusion_administration.rate
Monitoring Timeline Read-only timeline + inputs Yes Prompts at 15 min, then per protocol —
Interim Vitals Structured inputs Yes At each prompt —
Reaction Alert Button Button No — — Triggers WF-BB-006
End Datetime Datetime Yes ≥ start time —
Volume Infused (mL) Numeric Yes ≤ component volume —
Post-Transfusion Vitals Structured inputs Yes All fields required — post_vitals_json
Reaction Occurred Checkbox Yes If checked, reaction details required No transfusion_administration.reaction_occurred
Status Read-only Yes In progress / Completed / Stopped due to reaction —

Validation Messages

Condition Message Severity
Patient/product mismatch "Patient and product identifiers do not match. Do NOT start transfusion." Error (hard stop)
Missing pre-transfusion vitals "Pre-transfusion vital signs are required before starting." Error
Monitoring interval missed "Scheduled monitoring time has passed. Please record vitals and assess patient." Warning
Volume infused > component volume "Infused volume exceeds component volume. Please verify." Error

Actions / Buttons

Action Description Permissions
Verify Patient & Product Confirms matching IDs and updates status Nurse
Start Transfusion Records start time and rate Nurse
Record Vitals Opens vitals entry dialog at each timepoint Nurse
Reaction Alert Stops transfusion, records status, opens SCR-BLOODBANK-007 Nurse
Complete Transfusion Records end time, volume, post-vitals Nurse

HTML Wireframe Mockup (Key Screen)

Show HTML code
HTML
<div style="font-family: Arial, sans-serif; max-width: 900px; margin: 0 auto; border:1px solid #ccc; border-radius:8px; overflow:hidden;">
  <div style="background:#0b5ed7; color:#fff; padding:10px 16px;">
    <h3 style="margin:0;">Transfusion Administration</h3>
  </div>
  <!-- Patient banner -->
  <div style="padding:8px 16px; background:#f8f9fa; border-bottom:1px solid #eee;">
    <strong>Patient:</strong> Fatima Al-Nahyan (MRN: 00987654) • Female • 32 yrs • Ward: OB-2<br>
    <strong>Order:</strong> 1 unit RBC • Indication: Postpartum hemorrhage
  </div>
  <div style="padding:12px 16px;">
    <!-- Verification -->
    <h4 style="margin-top:0;">Verification</h4>
    <div style="display:flex; flex-wrap:wrap; gap:12px;">
      <div style="flex:1 1 260px;">
        <label style="display:block; font-weight:bold;">Scan Patient Wristband</label>
        <input type="text" placeholder="Scan barcode" style="width:100%; padding:6px 8px; border:1px solid #ccc; border-radius:4px;">
      </div>
      <div style="flex:1 1 260px;">
        <label style="display:block; font-weight:bold;">Scan Blood Unit</label>
        <input type="text" placeholder="Scan unit barcode" style="width:100%; padding:6px 8px; border:1px solid #ccc; border-radius:4px;">
      </div>
    </div>
    <div style="margin-top:8px;">
      <label><input type="checkbox"> Nurse 1 verified patient and product</label>
      <label style="margin-left:12px;"><input type="checkbox"> Nurse 2 verified patient and product</label>
    </div>
    <!-- Pre-vitals -->
    <h4>Pre-Transfusion Vitals</h4>
    <div style="display:flex; flex-wrap:wrap; gap:8px;">
      <div style="flex:1 1 120px;">
        <label style="display:block; font-weight:bold;">Temp (°C)</label>
        <input type="number" step="0.1" style="width:100%; padding:4px 6px; border:1px solid #ccc; border-radius:4px;">
      </div>
      <div style="flex:1 1 120px;">
        <label style="display:block; font-weight:bold;">BP (mmHg)</label>
        <input type="text" placeholder="120/80" style="width:100%; padding:4px 6px; border:1px solid #ccc; border-radius:4px;">
      </div>
      <div style="flex:1 1 120px;">
        <label style="display:block; font-weight:bold;">Pulse</label>
        <input type="number" style="width:100%; padding:4px 6px; border:1px solid #ccc; border-radius:4px;">
      </div>
      <div style="flex:1 1 120px;">
        <label style="display:block; font-weight:bold;">SpO₂ (%)</label>
        <input type="number" style="width:100%; padding:4px 6px; border:1px solid #ccc; border-radius:4px;">
      </div>
    </div>
    <!-- Controls -->
    <div style="margin-top:12px; display:flex; justify-content:space-between; align-items:center;">
      <div>
        <label style="display:block; font-weight:bold;">Rate (mL/hr)</label>
        <input type="number" style="width:120px; padding:4px 6px; border:1px solid #ccc; border-radius:4px;">
      </div>
      <div>
        <button type="button" style="margin-right:8px; padding:6px 12px; border:none; border-radius:4px; background:#0b5ed7; color:#fff;">Start Transfusion</button>
        <button type="button" style="padding:6px 12px; border:none; border-radius:4px; background:#dc3545; color:#fff;">Reaction Alert</button>
      </div>
    </div>
  </div>
</div>

Accessibility

  • Two-nurse verification checkboxes labelled clearly; screen reader text clarifies requirement.
  • Timed prompts for vitals announced via aria-live and visible countdown.

Responsive / Mobile

  • Designed for mobile/tablet; single-column layout on phones.
  • Large buttons and inputs; minimal horizontal scrolling.

SCR-BLOODBANK-007: Transfusion Reaction Investigation

Purpose

Structured workflow to document suspected transfusion reactions, symptoms, investigation steps, classification, MOH hemovigilance reporting, and follow-up actions.

Field Specifications

Field Type Required Validation Default Notes
Linked Administration ID Read-only Yes Must reference existing transfusion — transfusion_reactions.admin_id
Patient Banner Read-only Yes — —
Component ID Read-only Yes — —
Reaction Onset Time Datetime Yes ≥ transfusion start — transfusion_reactions.onset_time
Reaction Type Dropdown Yes From master Transfusion Reaction Types — transfusion_reactions.reaction_type
Severity Dropdown Yes Mild / Moderate / Severe / Life-threatening — transfusion_reactions.severity
Symptom Checklist Multi-select Yes At least one symptom — transfusion_reactions.symptoms
Clerical Check OK Radio Yes Yes/No — transfusion_reactions.clerical_check_ok
DAT Result Dropdown No Positive / Negative / Not done — transfusion_reactions.dat_result
Hemolysis Check Dropdown No Present / Absent / Not done — transfusion_reactions.hemolysis_check
Investigation Findings Textarea Yes Max 1000 chars — transfusion_reactions.investigation_findings
Classification Dropdown Yes From master classification codes — transfusion_reactions.classification
Reported to MOH Checkbox Conditional Required for serious reactions — transfusion_reactions.reported_to_moh
MOH Report Reference Text Conditional Required if reported — For audit
Investigated By Dropdown/auto Yes Technologist/Physician Current user transfusion_reactions.investigated_by
Follow-up Actions Textarea No Max 500 chars — transfusion_reactions.follow_up

Validation Messages

Condition Message Severity
Serious reaction but not reported "Serious reactions must be reported to UAE MOH hemovigilance. Please mark 'Reported to MOH' and enter reference." Error
Missing symptom selection "Please select at least one symptom." Error
Onset time before transfusion start "Reaction onset time cannot be before transfusion start." Error

Actions / Buttons

Action Description Permissions
Save Draft Saves partial investigation Technologist
Finalize Investigation Locks record and updates patient reaction history Senior Technologist, Medical Director
Generate MOH Report Generates structured report for MOH portal Medical Director
Print Summary Prints investigation summary Technologist, Physician

Accessibility

  • Symptom checklist implemented as checkboxes with clear labels.
  • Serious reaction alerts announced via aria-live="assertive".

Responsive / Mobile

  • Single-column layout; collapsible sections for Symptoms, Labs, Classification.

SCR-BLOODBANK-008: Blood Bank Dashboard

Purpose

Real-time dashboard for supervisors and medical directors to monitor inventory levels, expiries, transfusion volume, reaction rates, donor statistics, and key KPIs (e.g., C:T ratio, wastage rate).

Field Specifications

Field / Widget Type Required Validation Default Notes
Date Range Filter Date range picker No From ≤ To Last 7 days Applies to KPIs and charts
Facility Filter Dropdown No From facilities All
Inventory Levels Widget Bar/tiles Yes — — Units on hand by component and ABO/Rh
Expiry Alerts Widget List Yes — — Units expiring in next N days
Transfusion Volume Chart Line/bar chart Yes — — Daily/weekly transfusions
Reaction Rate Widget Gauge Yes — — Transfusion Reaction Rate KPI
Donor Statistics Widget Tiles Yes — — Total donors, new donors, deferral rate
Crossmatch-to-Transfusion Ratio Gauge Yes — — KPI vs target ≤2.0
Wastage Rate Widget Gauge Yes — — RBC/platelet wastage vs targets

Actions / Buttons

Action Description
Refresh Reloads dashboard data
Export Exports KPI data to CSV/PDF
Drill-down Clicking a widget opens detailed report screen (outside scope)

Accessibility

  • Charts provide data tables as alternative views.
  • Colour-coded gauges include numeric values and textual status (e.g., "On target", "Above target").

Responsive / Mobile

  • Widgets stack vertically; charts simplified for small screens.
  • Tap on widget opens full-screen detail.

Common UI Patterns

Patient Banner (Clinical Screens)

  • Appears on SCR-BLOODBANK-003, 005, 006, 007, 008 when patient context exists.
  • Content: Patient name (EN + optional AR), MRN, age, sex, location, primary physician, allergies, blood group, transfusion/reaction icons.
  • Behaviour:
  • Clickable to open mini patient summary.
  • High-contrast text; icons with tooltips and text labels.
  • Implementation:
  • Reusable component shared with other clinical modules (../ehr-patient-mgmt).

Donor Banner

  • Appears on SCR-BLOODBANK-001, 002.
  • Content: Donor name, Emirates ID, donor ID, last donation date, total donations, deferral status.
  • Deferral status colour-coded with text (e.g., "Temporarily deferred until 2026-03-01").

Search Components

  • Standard search bar with:
  • Placeholder text in English/Arabic (e.g., "Search donor / ابحث عن المتبرع").
  • Debounced search (300–500 ms).
  • Minimum characters (2–3) before querying.
  • Results displayed in tables with sortable columns and pagination.

Alert / Notification Patterns

  • Severity levels:
  • Info (blue), Warning (amber), Error (red), Success (green).
  • Display:
  • Inline messages near fields.
  • Global banner at top for form-level issues.
  • Modal dialogs for critical blocking alerts (e.g., patient-product mismatch).
  • All alerts:
  • Include icon + text.
  • Announced via aria-live regions for screen readers.

Loading States

  • Skeleton loaders for tables and worklists.
  • Spinners with text "Loading inventory…" or "Saving transfusion record…".
  • Avoid blocking entire UI where possible; show per-panel loading.

Arabic/English Bilingual UI

  • All labels, buttons, and messages support English and Arabic translations.
  • Layout considerations:
  • For Arabic UI, main direction dir="rtl"; tables remain LTR for numeric IDs where appropriate.
  • Donor and patient names can display both scripts (e.g., "Ahmed Al-Maktoum / أحمد المكتوم").
  • Input:
  • Arabic name fields explicitly set dir="rtl".
  • Regulatory text (consent, MOH references) available in both languages.

Accessibility & PDPL Considerations

  • WCAG 2.1 AA:
  • Contrast ratio ≥ 4.5:1 for text.
  • Keyboard-only navigation supported across all screens.
  • Focus indicators visible.
  • Forms use proper landmarks (<main>, <header>, <nav>).
  • UAE PDPL:
  • Consent checkboxes with clear explanation of data use (donor data, transfusion records).
  • Links to privacy notice.
  • Minimal necessary data displayed on shared screens; sensitive data (e.g., infectious status) restricted to authorized roles and not shown on general dashboards.

Responsive / Mobile General

  • All screens designed mobile-first for key bedside and donor-drive workflows (SCR-BLOODBANK-001, 002, 006).
  • Breakpoints:
  • <768px: single-column, stacked layout.
  • 768–1024px: two-column where appropriate.

  • 1024px: multi-column workbench layouts.

  • Touch targets ≥44x44 px; avoid hover-only interactions.
← Previous Blood Bank Management Data Specifications Next → Blood Bank Management Integration Specifications
content/clinical/blood-bank/04-screen-requirements.md Generated 2026-02-20 22:54