A simple, mobile-first Single Page Application (SPA) designed to make the daily routine at radiology departments smoother. Built to replace the previously used tedious paper-based logbooks and messy, fragmented GForms & GSheets for shift handovers and daily machine checklist.
Hospital Gomback
Sistem bersepadu pengurusan log oncall & status operasi bilik modaliti.
Merekod statistik kes & Laporan Tugasan Syif Oncall Unit Kecemasan.
Merekod Checklist Mesin & status operasi harian modaliti.
Jabatan Radiologi Hospital Gomback
Jabatan Radiologi Hospital Gomback
Sila pilih peranan dan masukkan kod PIN keselamatan untuk melanjutkan:
1234
This project was born out of a practical proposal to replace previous tedious paper-based logbooks and messy, fragmented GForms & GSheets at the Radiology Department facilities.
Instead of jumping onto heavy frameworks that require constant updates and complex build steps (like React or Next.js), I wanted to keep things simple and durable. It is coded using raw Vanilla JS, standard HTML5, and basic CSS, styled with FlyonUI so it loads instantly (<100ms) and can be easily maintained by any web developer.
Digitizing case counts avoids lost or damaged paper logbooks in busy emergency rooms and keeps historical inspection data neatly organized for future reference.
The "Missing Logs Tracker" makes it crystal clear right on the home screen if a previous shift forgot to file their daily equipment check or contrast reaction log.
Simple visual charts show workload patterns across Resus, General ED, CT, and OT zones, helping department supervisors allocate staff fairly based on actual numbers.
I randomly chose FlyonUI (with Tailwind CSS under the hood) because it offers a clean, modern aesthetic right out of the box without the headache of choosing between heavy component libraries.
Pure HTML5, Vanilla CSS3, and ES6 JavaScript Modules. No heavy React/Vue runtime dependencies to install or maintain over time.
Adapts the cleanliness of Google UI experiences with responsive mobile touch targets, ensuring fast operation when staff access the portal via smartphones.
Hosted via serverless Cloudflare Pages Functions, providing instant edge availability, simple route handling, and minimal operational overhead. What is more important is that Cloudflare provides FREE hosting with 100GB of bandwidth per month. This is more than enough to handle the traffic for this webapp.
Powered by Cloudflare D1 (Serverless SQLite) for reliable, low-latency structured data storage that replaces disconnected spreadsheet entries. Free tier (5GB) is more than enough for this web app. It is also super fast and reliable.
The application follows a straightforward 3-step verification routine designed around the roles and duties of our hospital radiology staff.
Fill out Shift Logs with case distributions across difference units. Staff also submit daily machine start-up/shut-down checklists and report any PACS or equipment issues using their ID.
Track daily log completions and review reported equipment faults during shift handovers. Senior supervisors can sign off on completed shift submissions or revert entries back to 'Pending' if corrections or updates are needed.
Act as the final verification and administration step. Officers oversee the staff master list and grades (U5 to U12), analyze overall workload distribution across modalities, and export monthly summary spreadsheets or PDF reports.
Clean, practical tools tailored specifically to everyday radiology needs without unnecessary clutter.
Simple access levels tailored to JXR, JXR Kanan, and Imaging Officers with personal ID for daily logs.
Uniform `DD-MM-YYYY` date formats and clear shift tags.
A friendly notice on the home screen pointing out which equipment or duty rooms haven't filed a report yet for the day.
Mistakes happen. Approvers can easily revert an approved log back to 'Pending' to allow corrections or updates.
Every verification step leaves a traceable timestamp and editor log (accessible inside the detailed log history views).
Download logs as spreadsheets (CSV) or print-friendly PDF reports formatted cleanly for monthly department records.
As this project is under active refinement based on actual department workflow challenges, several high-impact automation features and architectural improvements are planned:
The Problem: Radiology bunkers, CT scan rooms, and basement wards often have Wi-Fi dead zones or intermittent 4G mobile coverage.
The
Feature: Local IndexedDB storage and Service Worker background sync.
Radiographers can complete daily machine checklists offline and auto-sync to Cloudflare D1
the moment signal restores.
The problem: This is web based and need internet
to start up, then, how to tackle this issue?
The Problem: Critical machine failures noted in daily checklists often sit in the database until a supervisor manually opens the report.
The Feature: Automatic alert triggers via Webhooks (Telegram Bot or instant email) sent directly to Senior Radiographers or whenever "Machine Down" flag is submitted.
The Problem: Typing 4-digit PINs multiple times a day on touchscreens while wearing medical gloves or in an emergency rush is tedious.
The Feature: Hardware biometric authentication (Touch ID / Face ID / Android Biometrics) via WebAuthn for instant, secure 1-tap sign-in on staff devices.
The Problem: As required in some facilities, Senior Officers have to manually compile data and generate PDF reports at the end of every day or monthly cycle.
The Feature: Scheduled Cron Jobs that compile daily case statistics and auto-email an A4 Landscape PDF summary to the Head of Department every morning or month for physical records.
The Problem: Shift handovers and newly submitted checklists require immediate visibility across on-duty radiographers and supervisors.
The Feature: Automated text summary generated and dispatched directly into the department radiographers' group chat (Telegram / WhatsApp) every time a log is submitted, notifying supervisors instantly.
Introduce analytics smart suggestions that alert supervisors when certain radiographers have been working repeatedly in heavy or high-stress modalities, enabling fairer duty rotations and balanced staff workloads.
Build a customizable developer/admin settings dashboard (like a lightweight CMS) where supervisors can easily change modality lists, facility details, and shift parameters so other hospitals can effortlessly adopt this system.
Work on improving and resolving broken script map (`.map`) alerts across module bundles to ensure clean browser console output, accurate error stack traces during debugging, and optimized asset caching.
Refactor and clean up messy cross-file communications between individual JavaScript views (`home.js`, `laporan.js`, `checklist.js`, etc.) into a cleaner event pub/sub or centralized state structure for easier maintenance.
Add extra visual analytics features to track long-term shift case trends, modality utilization rates, and peak examination hours to assist hospital management in resource and equipment planning.
Implement searchable staff dropdowns for fast selection, remove local testing PIN hints on production, and strengthen session validation to prevent unauthorized submission under another staff member's ID.
As a radiographer vibe-coding to solve workflow hurdles, since I am not a real programmer, I'm
always open to feedback from
professional programmers, imaging officers, and radiographers.
Let me know if you would like
to test this workflow or adapt it for your facility!