@sasindi/radiologytestscheduling 0.0.0-stage → 1.0.1

package/src/radiology-test-scheduling.scss

@@ -0,0 +1,478 @@
+/* Radiology Test Scheduling Unified Design System - OpenMRS 3 */
+
+:root {
+  --primary-color: #009384;
+  --primary-hover: #007a6d;
+  --secondary-color: #00bfa5;
+  --bg-color: #f4f7f6;
+  --card-bg: #ffffff;
+  --text-dark: #212529;
+  --text-light: #6c757d;
+  --border-color: #dee2e6;
+  --danger-color: #da1e28;
+  --danger-bg: #fff1f1;
+  --success-color: #198038;
+  --info-color: #0f62fe;
+  --warning-color: #f1c21b;
+  --selected-bg: #e6f7f5;
+}
+
+.bodyWrapper {
+  background-color: var(--bg-color);
+  padding: 1.5rem;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  color: var(--text-dark);
+  min-height: 100vh;
+}
+
+.card {
+  background: var(--card-bg);
+  border-radius: 8px;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
+  padding: 1.75rem;
+  margin-bottom: 2rem;
+  border: 1px solid var(--border-color);
+}
+
+.cardHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.5rem;
+  padding-bottom: 0.85rem;
+  border-bottom: 2px solid var(--primary-color);
+}
+
+.formHeading {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--primary-color);
+  margin: 0;
+  letter-spacing: -0.2px;
+}
+
+.sectionHeader {
+  font-size: 1.15rem;
+  font-weight: 600;
+  color: var(--primary-color);
+  margin-top: 0;
+  margin-bottom: 1rem;
+  padding-bottom: 0.4rem;
+  border-bottom: 1px solid var(--border-color);
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: -0.75rem;
+  margin-left: -0.75rem;
+}
+
+.col12 { flex: 0 0 100%; max-width: 100%; padding: 0 0.75rem; }
+.col8 { flex: 0 0 66.666667%; max-width: 66.666667%; padding: 0 0.75rem; }
+.col6 { flex: 0 0 50%; max-width: 50%; padding: 0 0.75rem; }
+.col4 { flex: 0 0 33.333333%; max-width: 33.333333%; padding: 0 0.75rem; }
+.col3 { flex: 0 0 25%; max-width: 25%; padding: 0 0.75rem; }
+.col2 { flex: 0 0 16.666667%; max-width: 16.666667%; padding: 0 0.75rem; }
+
+.formGroup {
+  margin-bottom: 1.1rem;
+}
+
+.label {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.4rem;
+  font-weight: 600;
+  font-size: 0.875rem;
+  color: var(--text-dark);
+}
+
+.formControl {
+  display: block;
+  width: 100%;
+  height: 2.5rem;
+  padding: 0.45rem 0.8rem;
+  font-size: 0.9rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #495057;
+  background-color: #fff;
+  border: 1px solid #ced4da;
+  border-radius: 4px;
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  box-sizing: border-box;
+
+  &:focus {
+    color: #495057;
+    background-color: #fff;
+    border-color: var(--primary-color);
+    outline: 0;
+    box-shadow: 0 0 0 0.2rem rgba(0, 147, 132, 0.2);
+  }
+}
+
+textarea.formControl {
+  height: auto;
+  min-height: 80px;
+}
+
+/* Service filter box */
+.filterBox {
+  background: #f8f9fa;
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  padding: 1.25rem;
+  margin-bottom: 1.5rem;
+}
+
+/* Table styling */
+.tableContainer {
+  width: 100%;
+  overflow-x: auto;
+  margin-top: 1rem;
+  margin-bottom: 1.5rem;
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  background: #fff;
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  white-space: nowrap;
+  font-size: 0.875rem;
+
+  thead th {
+    background-color: #f1f3f5;
+    color: #343a40;
+    font-weight: 600;
+    padding: 0.65rem 0.85rem;
+    text-align: left;
+    border-bottom: 2px solid var(--border-color);
+    border-right: 1px solid var(--border-color);
+
+    &:last-child {
+      border-right: none;
+    }
+  }
+
+  tbody td {
+    padding: 0.6rem 0.85rem;
+    border-bottom: 1px solid var(--border-color);
+    border-right: 1px solid #f1f3f5;
+    color: #495057;
+    vertical-align: middle;
+
+    &:last-child {
+      border-right: none;
+    }
+  }
+
+  tbody tr {
+    transition: background-color 0.15s ease;
+
+    &:hover {
+      background-color: #f8f9fa;
+    }
+  }
+}
+
+.urgentRow {
+  background-color: #ffebee !important;
+  color: #c62828 !important;
+
+  &:hover {
+    background-color: #ffcdd2 !important;
+  }
+}
+
+.selectedRow {
+  background-color: var(--selected-bg) !important;
+  border-left: 4px solid var(--primary-color) !important;
+  font-weight: 500;
+}
+
+.badge {
+  display: inline-block;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius: 10rem;
+}
+
+.badgeUrgent {
+  color: #fff;
+  background-color: #da1e28;
+}
+
+.badgeRoutine {
+  color: #212529;
+  background-color: #e0e0e0;
+}
+
+.badgeType {
+  color: #fff;
+  background-color: #009384;
+}
+
+/* Patient & Investigation details panel */
+.detailsPanel {
+  background: #fafbfc;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  padding: 1.25rem;
+  margin-bottom: 1.5rem;
+}
+
+.infoField {
+  margin-bottom: 0.6rem;
+  font-size: 0.88rem;
+  display: flex;
+  align-items: baseline;
+  gap: 0.4rem;
+}
+
+.infoLabel {
+  font-weight: 600;
+  color: #495057;
+  min-width: 130px;
+}
+
+.infoValue {
+  color: #212529;
+  font-weight: 500;
+  word-break: break-word;
+}
+
+.avatarContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem;
+}
+
+.avatarImg {
+  width: 110px;
+  height: 110px;
+  border-radius: 8px;
+  object-fit: cover;
+  border: 2px solid var(--border-color);
+  background-color: #eaeff2;
+}
+
+/* Action buttons */
+.buttonGroup {
+  display: flex;
+  gap: 1rem;
+  margin-top: 1.5rem;
+}
+
+.btnPrimary {
+  background-color: #0f62fe;
+  color: #ffffff;
+  border: none;
+  border-radius: 4px;
+  padding: 0.7rem 1.6rem;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  transition: background-color 0.2s, box-shadow 0.2s;
+
+  &:hover:not(:disabled) {
+    background-color: #0353e9;
+    box-shadow: 0 4px 8px rgba(15, 98, 254, 0.3);
+  }
+
+  &:disabled {
+    background-color: #8d8d8d;
+    cursor: not-allowed;
+    opacity: 0.7;
+  }
+}
+
+.btnCancel {
+  background-color: #e0e0e0;
+  color: #393939;
+  border: none;
+  border-radius: 4px;
+  padding: 0.7rem 1.4rem;
+  font-size: 0.95rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: #d1d1d1;
+  }
+}
+
+.btnSelect {
+  background-color: #ffb800;
+  color: #212529;
+  border: none;
+  border-radius: 4px;
+  padding: 0.3rem 0.8rem;
+  font-size: 0.8rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 0.15s;
+
+  &:hover {
+    background-color: #e6a600;
+  }
+}
+
+/* Calendar styling */
+.calendarWrapper {
+  background: #ffffff;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  padding: 1.25rem;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.calendarNav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.calendarMonthTitle {
+  font-size: 1.15rem;
+  font-weight: 700;
+  color: #343a40;
+}
+
+.calendarNavBtn {
+  background: #f1f3f5;
+  border: 1px solid #ced4da;
+  border-radius: 4px;
+  padding: 0.35rem 0.8rem;
+  font-size: 0.85rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.15s;
+
+  &:hover {
+    background: #e9ecef;
+  }
+}
+
+.calendarGrid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 2px;
+  background-color: #dee2e6;
+  border: 1px solid #dee2e6;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.calendarDayHeader {
+  background-color: #f8f9fa;
+  font-weight: 600;
+  font-size: 0.8rem;
+  color: #495057;
+  text-align: center;
+  padding: 0.5rem 0.25rem;
+}
+
+.calendarCell {
+  background-color: #fff;
+  min-height: 80px;
+  padding: 0.35rem;
+  display: flex;
+  flex-direction: column;
+  transition: background-color 0.15s;
+
+  &:hover {
+    background-color: #fbfbfb;
+  }
+}
+
+.calendarCellInactive {
+  background-color: #f8f9fa;
+  opacity: 0.5;
+}
+
+.calendarDayNumber {
+  font-size: 0.78rem;
+  font-weight: 600;
+  color: #6c757d;
+  margin-bottom: 0.25rem;
+}
+
+.calendarDayToday {
+  color: #0f62fe;
+  font-weight: 800;
+}
+
+.calendarBadge {
+  margin-top: 2px;
+  padding: 2px 5px;
+  font-size: 0.72rem;
+  border-radius: 3px;
+  color: #fff;
+  cursor: pointer;
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-weight: 600;
+  transition: transform 0.1s;
+
+  &:hover {
+    transform: scale(1.02);
+  }
+}
+
+.badgeXray {
+  background-color: #da1e28;
+}
+
+.badgeCT {
+  background-color: #0f62fe;
+}
+
+.badgeMRI {
+  background-color: #198038;
+}
+
+.badgeOther {
+  background-color: #6f42c1;
+}
+
+/* Empty state */
+.emptyState {
+  text-align: center;
+  padding: 2.5rem 1rem;
+  color: var(--text-light);
+  font-style: italic;
+  font-size: 0.95rem;
+}
+
+@media (max-width: 992px) {
+  .col6, .col8, .col4, .col3 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+
+  .calendarCell {
+    min-height: 60px;
+  }
+}

package/src/root.component.test.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import Root from './root.component';
+
+describe('Root', () => {
+  it('mounts the route shell without crashing', () => {
+    // No route matches the default jsdom URL, so the shell mounts but renders
+    // no route content; this asserts the wiring (BrowserRouter + Routes) works.
+    expect(() => render(<Root />)).not.toThrow();
+  });
+});

package/src/root.component.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import RadiologyTestScheduling from './radiology-test-scheduling.component';
+
+const Root: React.FC = () => (
+  <BrowserRouter basename={window.getOpenmrsSpaBase()}>
+    <Routes>
+      <Route path="radiologytestscheduling" element={<RadiologyTestScheduling />} />
+    </Routes>
+  </BrowserRouter>
+);
+
+export default Root;

package/src/root.scss

@@ -0,0 +1,5 @@
+@use '@carbon/layout';
+
+.container {
+  padding: layout.$spacing-05;
+}

package/src/routes.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "https://json.openmrs.org/routes.schema.json",
+  "pages": [
+    {
+      "route": "radiologytestscheduling",
+      "component": "root",
+      "online": true
+    }
+  ],
+  "extensions": [
+  ]
+}

package/src/types.ts

@@ -0,0 +1,100 @@
+export interface RadiologyOrder {
+  id: number;
+  patientId?: string;
+  patientPhn: string;
+  patientSystem?: string;
+  encounter?: string;
+  location: string;
+  section?: string;
+  schedulingreq?: string;
+  approvalreq?: string;
+  identifier?: string;
+  basedOn?: string;
+  replaces?: string;
+  requisition?: string;
+  status?: string;
+  intent?: string;
+  priority?: string;
+  doNotPerform?: string;
+  categoryCode?: string;
+  categoryDisplay?: string; // 'Xray' | 'CT' | 'MRI' | etc.
+  codeCode?: string;
+  codeDisplay?: string; // Test Name
+  quantity?: string;
+  quantityRatio?: string;
+  quantityRange?: string;
+  focusCode?: string;
+  focusDisplay?: string;
+  occurrenceDateTime?: string;
+  occurrencePeriod?: string;
+  occurrenceTiming?: string;
+  asNeededBoolean?: string;
+  authoredOn?: string;
+  requesterReference?: string;
+  requesterDisplay?: string;
+  performerTypeCode?: string;
+  performerTypeDisplay?: string;
+  performerReference?: string;
+  performerDisplay?: string;
+  reason?: string;
+  supportingInfo?: string; // Exam Room
+  specimen?: string; // Localization
+  bodySiteCode?: string;
+  bodySiteDisplay?: string; // Position
+  bodySiteText?: string; // Region
+  bodyStructureId?: string;
+  bodyStructureIdentifier?: string;
+  bodyStructureCode?: string;
+  bodyStructureDisplay?: string;
+  bodyStructureText?: string;
+  bodyStructureDescription?: string;
+  note?: string; // Comment
+  scheduledDateTime?: string;
+  remarks?: string;
+  noty?: string;
+  cby?: string;
+  cdate?: string;
+}
+
+export interface SchedulingOrderDTO {
+  radiology: RadiologyOrder;
+  type: 'OPD' | 'Clinic' | 'Ward';
+  patientName?: string;
+  patientGender?: string;
+  patientAge?: string | number;
+  locationName?: string;
+  orderedByName?: string;
+}
+
+export interface PatientDemographics {
+  fullName: string;
+  gender: string;
+  nicNo: string;
+  guardianInfo: string;
+  address: string;
+  years: string | number;
+  months: string | number;
+  days: string | number;
+  dateOfBirth: string;
+  profileImage: string;
+  telephoneHome: string;
+  telephoneMobile: string;
+}
+
+export interface ExamRoom {
+  id?: number | string;
+  name: string;
+}
+
+export interface InstituteOption {
+  uuid: string;
+  name: string;
+}
+
+export interface CalendarEvent {
+  title: string;
+  date: string; // YYYY-MM-DD
+  category: string;
+  count: number;
+  breakdown: Record<string, number>;
+}