@sasindi/radiologytestscheduling 0.0.0-stage → 1.0.2

package/src/radiology-test-scheduling.scss

@@ -0,0 +1,396 @@
+/* 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;
+  --urgent-row-bg: #f5a4a4;
+  --success-color: #198038;
+  --info-color: #0f62fe;
+  --warning-color: #f1c21b;
+  --selected-bg: #d0e7ff;
+}
+
+.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.5rem;
+  margin-bottom: 2rem;
+  border: 1px solid var(--border-color);
+}
+
+.cardHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.25rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 2px solid var(--primary-color);
+}
+
+.formHeading {
+  font-size: 1.4rem;
+  font-weight: 700;
+  color: var(--primary-color);
+  margin: 0;
+  letter-spacing: -0.2px;
+}
+
+.serviceBox {
+  background: #f5f6f9;
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  padding: 1.25rem;
+}
+
+.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; box-sizing: border-box; }
+.col10 { flex: 0 0 83.333333%; max-width: 83.333333%; padding: 0 0.75rem; box-sizing: border-box; }
+.col8  { flex: 0 0 66.666667%; max-width: 66.666667%; padding: 0 0.75rem; box-sizing: border-box; }
+.col6  { flex: 0 0 50%; max-width: 50%; padding: 0 0.75rem; box-sizing: border-box; }
+.col4  { flex: 0 0 33.333333%; max-width: 33.333333%; padding: 0 0.75rem; box-sizing: border-box; }
+.col3  { flex: 0 0 25%; max-width: 25%; padding: 0 0.75rem; box-sizing: border-box; }
+.col2  { flex: 0 0 16.666667%; max-width: 16.666667%; padding: 0 0.75rem; box-sizing: border-box; }
+
+.formGroup {
+  margin-bottom: 1rem;
+}
+
+.label {
+  display: block;
+  margin-bottom: 0.4rem;
+  font-weight: 600;
+  font-size: 0.88rem;
+  color: #004080;
+}
+
+.formControl {
+  display: block;
+  width: 100%;
+  height: 2.4rem;
+  padding: 0.4rem 0.75rem;
+  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: 70px;
+}
+
+/* Filter controls row */
+.filterRow {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin-bottom: 1.25rem;
+}
+
+.instituteSelectGroup {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.instituteLabel {
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: #333;
+  margin: 0;
+  white-space: nowrap;
+}
+
+.searchGroup {
+  flex: 1;
+  min-width: 260px;
+}
+
+/* Table styling matching team's DataTable style */
+.tableContainer {
+  width: 100%;
+  overflow-x: auto;
+  margin-top: 0.5rem;
+  margin-bottom: 1.75rem;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  background: #fff;
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  white-space: nowrap;
+  font-size: 0.85rem;
+
+  thead th {
+    background-color: #f1f3f5;
+    color: #212529;
+    font-weight: 600;
+    padding: 0.65rem 0.75rem;
+    text-align: left;
+    border-bottom: 2px solid var(--border-color);
+    border-right: 1px solid #dee2e6;
+
+    &:last-child {
+      border-right: none;
+    }
+  }
+
+  tbody td {
+    padding: 0.55rem 0.75rem;
+    border-bottom: 1px solid #e9ecef;
+    border-right: 1px solid #f1f3f5;
+    color: #333;
+    vertical-align: middle;
+
+    &:last-child {
+      border-right: none;
+    }
+  }
+
+  tbody tr {
+    transition: background-color 0.15s ease;
+
+    &:hover {
+      background-color: #f8f9fa;
+    }
+  }
+}
+
+/* Urgent rows are highlighted in #f5a4a4 just like team's code */
+.urgentRow {
+  background-color: #f5a4a4 !important;
+
+  &:hover {
+    background-color: #f28b8b !important;
+  }
+}
+
+.selectedRow {
+  background-color: var(--selected-bg) !important;
+  font-weight: 600;
+  outline: 2px solid #0f62fe;
+}
+
+.badge {
+  display: inline-block;
+  padding: 0.2rem 0.5rem;
+  font-size: 0.72rem;
+  font-weight: 700;
+  line-height: 1;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius: 4px;
+}
+
+.badgeUrgent {
+  color: #fff;
+  background-color: #c62828;
+}
+
+.badgeRoutine {
+  color: #212529;
+  background-color: #e9ecef;
+}
+
+.badgeType {
+  color: #fff;
+  background-color: var(--primary-color);
+}
+
+.btnSelect {
+  background-color: #ffc107;
+  color: #212529;
+  border: 1px solid #d39e00;
+  border-radius: 4px;
+  padding: 0.2rem 0.65rem;
+  font-size: 0.8rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 0.15s;
+
+  &:hover {
+    background-color: #e0a800;
+  }
+}
+
+.btnSelected {
+  background-color: #0f62fe !important;
+  color: #ffffff !important;
+  border-color: #0353e9 !important;
+}
+
+/* Demographics Panel */
+.demographicsSection {
+  margin-top: 1rem;
+}
+
+.fieldItem {
+  margin-bottom: 0.55rem;
+  font-size: 0.88rem;
+  display: flex;
+  align-items: baseline;
+  color: #333;
+}
+
+.fieldIcon {
+  color: #009384;
+  margin-right: 0.4rem;
+  font-weight: bold;
+}
+
+.fieldTitle {
+  font-weight: 600;
+  color: #004080;
+  margin-right: 0.35rem;
+  white-space: nowrap;
+}
+
+.fieldVal {
+  color: #111;
+  font-weight: 500;
+  word-break: break-word;
+}
+
+/* Patient Image (upload-img matching team's style) */
+.uploadImgWrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0.5rem;
+}
+
+.uploadImg {
+  border-radius: 16px;
+  display: inline-block;
+  height: 100px;
+  width: 100px;
+  object-fit: cover;
+  object-position: 50% 50%;
+  border: 3px solid #20e5bf;
+  margin-right: 15px;
+  vertical-align: middle;
+  background-color: #e9ecef;
+}
+
+/* Investigation Details Row */
+.investigationRow {
+  border-bottom: 2px solid #808080;
+  padding-bottom: 0.75rem;
+  margin-top: 0.5rem;
+  margin-bottom: 1.25rem;
+}
+
+/* Scheduling Inputs & Action Buttons */
+.schedulingFormArea {
+  margin-top: 0.5rem;
+}
+
+.buttonGroup {
+  display: flex;
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
+/* Big blue button as explicitly requested by user */
+.btnPrimary {
+  background-color: #0f62fe;
+  color: #ffffff;
+  border: none;
+  border-radius: 4px;
+  padding: 0.7rem 1.8rem;
+  font-size: 1rem;
+  font-weight: 700;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  box-shadow: 0 2px 6px rgba(15, 98, 254, 0.25);
+  transition: background-color 0.2s, box-shadow 0.2s;
+
+  &:hover:not(:disabled) {
+    background-color: #0353e9;
+    box-shadow: 0 4px 10px rgba(15, 98, 254, 0.4);
+  }
+
+  &:disabled {
+    background-color: #8d8d8d;
+    cursor: not-allowed;
+    opacity: 0.7;
+  }
+}
+
+.btnCancel {
+  background-color: #dc3545;
+  color: #ffffff;
+  border: none;
+  border-radius: 4px;
+  padding: 0.7rem 1.5rem;
+  font-size: 0.95rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: #c82333;
+  }
+}
+
+.emptyState {
+  text-align: center;
+  padding: 2.5rem 1rem;
+  color: var(--text-light);
+  font-style: italic;
+  font-size: 0.95rem;
+}
+
+@media (max-width: 992px) {
+  .col10, .col8, .col6, .col4, .col3, .col2 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+
+  .uploadImgWrapper {
+    justify-content: flex-start;
+    margin-bottom: 1rem;
+  }
+}

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>;
+}