@sasindi/printlabtestresults 1.0.1

package/src/print-lab-test-results.scss

@@ -0,0 +1,299 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.container {
+  padding: layout.$spacing-05;
+  width: 100%;
+  margin: 0 auto;
+}
+
+.card {
+  background-color: #ffffff;
+  border-radius: 4px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
+  border: 1px solid #e0e0e0;
+}
+
+.cardBody {
+  padding: layout.$spacing-06;
+}
+
+.heading {
+  font-size: 20px;
+  font-weight: 600;
+  color: #009384;
+  margin: 0;
+}
+
+.filterRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: layout.$spacing-05;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.filterGroup {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.labelCompact {
+  font-weight: 600;
+  font-size: 14px;
+  color: #393939;
+}
+
+.selectCompact {
+  height: 36px;
+  padding: 0 12px;
+  border: 1px solid #8d8d8d;
+  border-radius: 4px;
+  background-color: #f4f4f4;
+  font-size: 14px;
+  outline: none;
+  cursor: pointer;
+
+  &:focus {
+    border-color: #0f62fe;
+    outline: 2px solid #0f62fe;
+  }
+}
+
+.searchInput {
+  height: 36px;
+  width: 280px;
+  padding: 0 12px;
+  border: 1px solid #8d8d8d;
+  border-radius: 4px;
+  background-color: #ffffff;
+  font-size: 14px;
+  outline: none;
+
+  &:focus {
+    border-color: #0f62fe;
+    outline: 2px solid #0f62fe;
+  }
+}
+
+.tableWrapper {
+  overflow-x: auto;
+  margin-top: layout.$spacing-04;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+}
+
+.dataTable {
+  width: 100%;
+  border-collapse: collapse;
+
+  th {
+    background-color: #f4f4f4;
+    color: #161616;
+    font-weight: 600;
+    font-size: 13px;
+    padding: 12px 14px;
+    text-align: left;
+    border-bottom: 2px solid #e0e0e0;
+    white-space: nowrap;
+  }
+
+  td {
+    padding: 10px 14px;
+    font-size: 13px;
+    color: #393939;
+    border-bottom: 1px solid #e0e0e0;
+    white-space: nowrap;
+  }
+
+  tbody tr:hover {
+    background-color: #eef5f5;
+  }
+}
+
+.tagOpd {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 600;
+  background-color: #edf5ff;
+  color: #0043ce;
+}
+
+.tagClinic {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 600;
+  background-color: #e8daff;
+  color: #6929c4;
+}
+
+.tagWard {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 600;
+  background-color: #defbe6;
+  color: #0e6027;
+}
+
+.actionBtnGroup {
+  display: flex;
+  gap: 6px;
+}
+
+.btnPrimary {
+  background-color: #0f62fe;
+  color: #ffffff;
+  border: none;
+  border-radius: 4px;
+  padding: 6px 14px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: #0353e9;
+  }
+}
+
+.btnSuccess {
+  background-color: #24a148;
+  color: #ffffff;
+  border: none;
+  border-radius: 4px;
+  padding: 6px 14px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: #198038;
+  }
+}
+
+.btnSecondary {
+  background-color: #393939;
+  color: #ffffff;
+  border: none;
+  border-radius: 4px;
+  padding: 6px 14px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #4c4c4c;
+  }
+}
+
+/* Modal Styling */
+.modalOverlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+}
+
+.modalContainer {
+  background-color: #ffffff;
+  border-radius: 6px;
+  width: 90%;
+  max-width: 850px;
+  max-height: 90vh;
+  overflow-y: auto;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+}
+
+.modalHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 24px;
+  border-bottom: 1px solid #e0e0e0;
+
+  h3 {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 600;
+    color: #009384;
+  }
+}
+
+.btnClose {
+  background: none;
+  border: none;
+  font-size: 24px;
+  cursor: pointer;
+  color: #525252;
+
+  &:hover {
+    color: #161616;
+  }
+}
+
+.modalBody {
+  padding: 20px 24px;
+}
+
+.gridForm {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px 16px;
+  margin-bottom: 16px;
+}
+
+.formField {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+
+  label {
+    font-size: 13px;
+    font-weight: 600;
+    color: #525252;
+  }
+
+  input, textarea {
+    padding: 6px 10px;
+    border: 1px solid #8d8d8d;
+    border-radius: 4px;
+    font-size: 13px;
+    background-color: #f4f4f4;
+  }
+}
+
+.formFieldFull {
+  grid-column: span 3;
+}
+
+.modalFooter {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  padding: 16px 24px;
+  border-top: 1px solid #e0e0e0;
+}
+
+/* Pagination */
+.pagination {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 16px;
+  font-size: 13px;
+}

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 PrintLabTestResults from './print-lab-test-results.component';
+
+const Root: React.FC = () => (
+  <BrowserRouter basename={window.getOpenmrsSpaBase()}>
+    <Routes>
+      <Route path="printlabtestresults" element={<PrintLabTestResults />} />
+    </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": "printlabtestresults",
+      "component": "root",
+      "online": true
+    }
+  ],
+  "extensions": [
+  ]
+}