@sasindi/labmanagement 1.0.8 → 1.0.9

package/src/labtestmaster.component.tsx

@@ -0,0 +1,355 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ArrowLeft, Search, Plus, Trash2, CheckCircle2, AlertCircle, BookOpen } from 'lucide-react';
+
+interface LabTest {
+  id: string;
+  testName: string;
+  shortCode: string;
+  category: string;
+  unit: string;
+  normalRange: string;
+}
+
+const LabTestMaster: React.FC = () => {
+  const { t } = useTranslation();
+  const [searchQuery, setSearchQuery] = useState('');
+  const [showForm, setShowForm] = useState(false);
+  const [saveStatus, setSaveStatus] = useState<'idle' | 'success' | 'error'>('idle');
+  const [testName, setTestName] = useState('');
+  const [shortCode, setShortCode] = useState('');
+  const [category, setCategory] = useState('');
+  const [unit, setUnit] = useState('');
+  const [normalRange, setNormalRange] = useState('');
+
+  const navigateTo = (url: string) => {
+    window.history.pushState({}, '', url);
+    window.dispatchEvent(new PopStateEvent('popstate'));
+  };
+
+  const [tests, setTests] = useState<LabTest[]>([
+    { id: '1', testName: 'Full Blood Count (FBC)', shortCode: 'FBC', category: 'Haematology', unit: 'cells/µL', normalRange: '4.5–11.0 × 10⁹/L' },
+    { id: '2', testName: 'Serum Creatinine', shortCode: 'SCr', category: 'Biochemistry', unit: 'mg/dL', normalRange: '0.6–1.2 mg/dL' },
+    { id: '3', testName: 'Lipid Profile', shortCode: 'LP', category: 'Biochemistry', unit: 'mg/dL', normalRange: 'LDL < 100 mg/dL' },
+    { id: '4', testName: 'Urine Full Report', shortCode: 'UFR', category: 'Microbiology', unit: '—', normalRange: 'No abnormalities' },
+    { id: '5', testName: 'Blood Glucose Fasting', shortCode: 'FBG', category: 'Biochemistry', unit: 'mg/dL', normalRange: '70–100 mg/dL' },
+  ]);
+
+  const filteredTests = tests.filter(test =>
+    test.testName.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    test.shortCode.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    test.category.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const handleAdd = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!testName.trim() || !shortCode.trim()) {
+      setSaveStatus('error');
+      return;
+    }
+    const newTest: LabTest = {
+      id: Date.now().toString(),
+      testName,
+      shortCode,
+      category,
+      unit,
+      normalRange
+    };
+    setTests(prev => [...prev, newTest]);
+    setSaveStatus('success');
+    setTimeout(() => {
+      setSaveStatus('idle');
+      setShowForm(false);
+      setTestName('');
+      setShortCode('');
+      setCategory('');
+      setUnit('');
+      setNormalRange('');
+    }, 1500);
+  };
+
+  const handleDelete = (id: string) => {
+    setTests(prev => prev.filter(t => t.id !== id));
+  };
+
+  const categoryColors: Record<string, { bg: string; color: string }> = {
+    Haematology: { bg: '#fce7f3', color: '#be185d' },
+    Biochemistry: { bg: '#dbeafe', color: '#1d4ed8' },
+    Microbiology: { bg: '#d1fae5', color: '#065f46' },
+    Immunology: { bg: '#ede9fe', color: '#6d28d9' },
+    Radiology: { bg: '#fed7aa', color: '#b45309' },
+  };
+
+  const getCategoryStyle = (cat: string) =>
+    categoryColors[cat] ?? { bg: '#f1f5f9', color: '#475569' };
+
+  return (
+    <div style={{
+      padding: '40px 24px',
+      maxWidth: '1200px',
+      margin: '0 auto',
+      fontFamily: 'Inter, system-ui, sans-serif',
+      color: '#1e293b'
+    }}>
+      {/* Header */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: '16px', marginBottom: '32px' }}>
+        <button
+          onClick={() => navigateTo('/openmrs/spa/labmanagement')}
+          style={{
+            cursor: 'pointer',
+            background: '#ffffff',
+            border: '1px solid #cbd5e1',
+            borderRadius: '12px',
+            width: '44px',
+            height: '44px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            boxShadow: '0 1px 2px rgba(0,0,0,0.05)',
+            transition: 'all 0.2s'
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.borderColor = '#94a3b8';
+            e.currentTarget.style.background = '#f8fafc';
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.borderColor = '#cbd5e1';
+            e.currentTarget.style.background = '#ffffff';
+          }}
+        >
+          <ArrowLeft style={{ width: '20px', height: '20px', color: '#64748b' }} />
+        </button>
+        <div style={{ flex: 1 }}>
+          <h1 style={{ fontSize: '28px', fontWeight: '700', margin: 0, letterSpacing: '-0.02em' }}>
+            {t('labTestMasterHeading', 'Lab Test Master')}
+          </h1>
+          <p style={{ fontSize: '14px', color: '#64748b', margin: '4px 0 0 0' }}>
+            Manage the master list of laboratory tests, short codes, and reference ranges.
+          </p>
+        </div>
+        <button
+          onClick={() => { setShowForm(true); setSaveStatus('idle'); }}
+          style={{
+            cursor: 'pointer',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+            background: '#8b5cf6',
+            color: '#ffffff',
+            border: 'none',
+            borderRadius: '14px',
+            padding: '12px 20px',
+            fontWeight: '600',
+            fontSize: '14px',
+            boxShadow: '0 4px 12px rgba(139,92,246,0.25)',
+            transition: 'background 0.2s'
+          }}
+          onMouseEnter={(e) => e.currentTarget.style.background = '#7c3aed'}
+          onMouseLeave={(e) => e.currentTarget.style.background = '#8b5cf6'}
+        >
+          <Plus style={{ width: '18px', height: '18px' }} />
+          Add Test
+        </button>
+      </div>
+
+      {/* Add Test Form */}
+      {showForm && (
+        <div style={{
+          background: '#ffffff',
+          borderRadius: '24px',
+          padding: '28px',
+          border: '1px solid #e2e8f0',
+          boxShadow: '0 4px 16px rgba(0,0,0,0.06)',
+          marginBottom: '32px'
+        }}>
+          <h2 style={{ fontSize: '18px', fontWeight: '600', margin: '0 0 20px 0' }}>
+            New Lab Test
+          </h2>
+          <form onSubmit={handleAdd} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px' }}>
+            <div>
+              <label style={{ display: 'block', fontSize: '13px', fontWeight: '600', color: '#475569', marginBottom: '6px' }}>
+                Test Name <span style={{ color: '#ef4444' }}>*</span>
+              </label>
+              <input
+                type="text"
+                placeholder="e.g. Full Blood Count"
+                value={testName}
+                onChange={(e) => setTestName(e.target.value)}
+                style={{ width: '100%', padding: '11px', borderRadius: '10px', border: '1px solid #cbd5e1', fontSize: '14px', outline: 'none' }}
+              />
+            </div>
+            <div>
+              <label style={{ display: 'block', fontSize: '13px', fontWeight: '600', color: '#475569', marginBottom: '6px' }}>
+                Short Code <span style={{ color: '#ef4444' }}>*</span>
+              </label>
+              <input
+                type="text"
+                placeholder="e.g. FBC"
+                value={shortCode}
+                onChange={(e) => setShortCode(e.target.value)}
+                style={{ width: '100%', padding: '11px', borderRadius: '10px', border: '1px solid #cbd5e1', fontSize: '14px', outline: 'none' }}
+              />
+            </div>
+            <div>
+              <label style={{ display: 'block', fontSize: '13px', fontWeight: '600', color: '#475569', marginBottom: '6px' }}>
+                Category
+              </label>
+              <select
+                value={category}
+                onChange={(e) => setCategory(e.target.value)}
+                style={{ width: '100%', padding: '11px', borderRadius: '10px', border: '1px solid #cbd5e1', fontSize: '14px', outline: 'none', background: '#fff' }}
+              >
+                <option value="">Select category</option>
+                <option value="Haematology">Haematology</option>
+                <option value="Biochemistry">Biochemistry</option>
+                <option value="Microbiology">Microbiology</option>
+                <option value="Immunology">Immunology</option>
+                <option value="Radiology">Radiology</option>
+              </select>
+            </div>
+            <div>
+              <label style={{ display: 'block', fontSize: '13px', fontWeight: '600', color: '#475569', marginBottom: '6px' }}>
+                Unit
+              </label>
+              <input
+                type="text"
+                placeholder="e.g. mg/dL"
+                value={unit}
+                onChange={(e) => setUnit(e.target.value)}
+                style={{ width: '100%', padding: '11px', borderRadius: '10px', border: '1px solid #cbd5e1', fontSize: '14px', outline: 'none' }}
+              />
+            </div>
+            <div style={{ gridColumn: '1 / -1' }}>
+              <label style={{ display: 'block', fontSize: '13px', fontWeight: '600', color: '#475569', marginBottom: '6px' }}>
+                Normal Range
+              </label>
+              <input
+                type="text"
+                placeholder="e.g. 4.5–11.0 × 10⁹/L"
+                value={normalRange}
+                onChange={(e) => setNormalRange(e.target.value)}
+                style={{ width: '100%', padding: '11px', borderRadius: '10px', border: '1px solid #cbd5e1', fontSize: '14px', outline: 'none' }}
+              />
+            </div>
+
+            {saveStatus === 'success' && (
+              <div style={{ gridColumn: '1 / -1', display: 'flex', alignItems: 'center', gap: '8px', background: '#f0fdf4', color: '#15803d', padding: '12px', borderRadius: '10px', fontSize: '14px' }}>
+                <CheckCircle2 style={{ width: '18px', height: '18px' }} />
+                Lab test added successfully!
+              </div>
+            )}
+            {saveStatus === 'error' && (
+              <div style={{ gridColumn: '1 / -1', display: 'flex', alignItems: 'center', gap: '8px', background: '#fef2f2', color: '#b91c1c', padding: '12px', borderRadius: '10px', fontSize: '14px' }}>
+                <AlertCircle style={{ width: '18px', height: '18px' }} />
+                Test Name and Short Code are required.
+              </div>
+            )}
+
+            <div style={{ gridColumn: '1 / -1', display: 'flex', gap: '12px', justifyContent: 'flex-end' }}>
+              <button
+                type="button"
+                onClick={() => setShowForm(false)}
+                style={{ cursor: 'pointer', background: '#f1f5f9', border: '1px solid #e2e8f0', borderRadius: '12px', padding: '11px 20px', fontWeight: '600', fontSize: '14px', color: '#475569', transition: 'background 0.2s' }}
+                onMouseEnter={(e) => e.currentTarget.style.background = '#e2e8f0'}
+                onMouseLeave={(e) => e.currentTarget.style.background = '#f1f5f9'}
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                style={{ cursor: 'pointer', background: '#8b5cf6', color: '#ffffff', border: 'none', borderRadius: '12px', padding: '11px 24px', fontWeight: '600', fontSize: '14px', boxShadow: '0 4px 12px rgba(139,92,246,0.2)', transition: 'background 0.2s' }}
+                onMouseEnter={(e) => e.currentTarget.style.background = '#7c3aed'}
+                onMouseLeave={(e) => e.currentTarget.style.background = '#8b5cf6'}
+              >
+                Save Test
+              </button>
+            </div>
+          </form>
+        </div>
+      )}
+
+      {/* Search & Table */}
+      <div style={{ background: '#ffffff', borderRadius: '24px', padding: '28px', border: '1px solid #e2e8f0', boxShadow: '0 4px 6px -1px rgba(0,0,0,0.05)' }}>
+        {/* Search */}
+        <div style={{ position: 'relative', marginBottom: '24px', maxWidth: '400px' }}>
+          <input
+            type="text"
+            placeholder="Search by name, code or category..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            style={{ width: '100%', padding: '12px 16px 12px 44px', borderRadius: '14px', border: '1px solid #cbd5e1', fontSize: '14px', outline: 'none' }}
+          />
+          <Search style={{ position: 'absolute', left: '16px', top: '50%', transform: 'translateY(-50%)', width: '18px', height: '18px', color: '#94a3b8' }} />
+        </div>
+
+        {/* Table */}
+        <div style={{ overflowX: 'auto' }}>
+          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '14px' }}>
+            <thead>
+              <tr style={{ borderBottom: '2px solid #f1f5f9' }}>
+                {['Test Name', 'Short Code', 'Category', 'Unit', 'Normal Range', ''].map((h) => (
+                  <th key={h} style={{ textAlign: 'left', padding: '12px 16px', fontWeight: '600', color: '#64748b', fontSize: '12px', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+                    {h}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {filteredTests.map((test, idx) => {
+                const catStyle = getCategoryStyle(test.category);
+                return (
+                  <tr
+                    key={test.id}
+                    style={{ borderBottom: '1px solid #f8fafc', background: idx % 2 === 0 ? '#ffffff' : '#fafafa', transition: 'background 0.15s' }}
+                    onMouseEnter={(e) => (e.currentTarget.style.background = '#f1f5f9')}
+                    onMouseLeave={(e) => (e.currentTarget.style.background = idx % 2 === 0 ? '#ffffff' : '#fafafa')}
+                  >
+                    <td style={{ padding: '14px 16px', fontWeight: '500', color: '#1e293b' }}>
+                      <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+                        <div style={{ width: '36px', height: '36px', borderRadius: '10px', background: '#f3e8ff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                          <BookOpen style={{ width: '18px', height: '18px', color: '#8b5cf6' }} />
+                        </div>
+                        {test.testName}
+                      </div>
+                    </td>
+                    <td style={{ padding: '14px 16px' }}>
+                      <span style={{ fontFamily: 'monospace', fontWeight: '600', color: '#8b5cf6', background: '#f3e8ff', padding: '3px 8px', borderRadius: '6px', fontSize: '13px' }}>
+                        {test.shortCode}
+                      </span>
+                    </td>
+                    <td style={{ padding: '14px 16px' }}>
+                      <span style={{ background: catStyle.bg, color: catStyle.color, padding: '3px 10px', borderRadius: '6px', fontSize: '12px', fontWeight: '600' }}>
+                        {test.category || '—'}
+                      </span>
+                    </td>
+                    <td style={{ padding: '14px 16px', color: '#475569' }}>{test.unit || '—'}</td>
+                    <td style={{ padding: '14px 16px', color: '#475569' }}>{test.normalRange || '—'}</td>
+                    <td style={{ padding: '14px 16px' }}>
+                      <button
+                        onClick={() => handleDelete(test.id)}
+                        style={{ cursor: 'pointer', background: '#fef2f2', border: 'none', borderRadius: '8px', padding: '6px 8px', display: 'flex', alignItems: 'center', transition: 'background 0.2s' }}
+                        onMouseEnter={(e) => e.currentTarget.style.background = '#fee2e2'}
+                        onMouseLeave={(e) => e.currentTarget.style.background = '#fef2f2'}
+                      >
+                        <Trash2 style={{ width: '16px', height: '16px', color: '#ef4444' }} />
+                      </button>
+                    </td>
+                  </tr>
+                );
+              })}
+              {filteredTests.length === 0 && (
+                <tr>
+                  <td colSpan={6} style={{ textAlign: 'center', padding: '60px', color: '#94a3b8' }}>
+                    No lab tests found.
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default LabTestMaster;

package/src/root.component.tsx

@@ -1,11 +1,15 @@
 import React from 'react';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import Labmanagement from './labmanagement.component';
+import AddResults from './addresults.component';
+import LabTestMaster from './labtestmaster.component';
 
 const Root: React.FC = () => (
   <BrowserRouter basename={window.getOpenmrsSpaBase()}>
     <Routes>
       <Route path="labmanagement" element={<Labmanagement />} />
+      <Route path="addresults" element={<AddResults />} />
+      <Route path="labtestmaster" element={<LabTestMaster />} />
     </Routes>
   </BrowserRouter>
 );

package/dist/340.js

@@ -1 +0,0 @@
-"use strict";(globalThis.webpackChunk_sasindi_labmanagement=globalThis.webpackChunk_sasindi_labmanagement||[]).push([["340"],{1759(e,a,n){n.r(a),n.d(a,{default:()=>r});var t=n(8670),l=n.n(t),s=n(1969),m=n(9196);let r=function(){return l().createElement(s.BrowserRouter,{basename:window.getOpenmrsSpaBase()},l().createElement(s.Routes,null,l().createElement(s.Route,{path:"labmanagement",element:l().createElement(m.default,null)})))}}}]);

package/dist/340.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"340.js","sources":["webpack://@sasindi/labmanagement/./src/root.component.tsx"],"names":["BrowserRouter","window","Routes","Route","Labmanagement"],"mappings":"mNAYA,MARuB,W,OACrB,kBAACA,EAAAA,aAAaA,CAAAA,CAAC,SAAUC,OAAO,iBAAiB,E,EAC/C,kBAACC,EAAAA,MAAMA,CAAAA,KACL,kBAACC,EAAAA,KAAKA,CAAAA,CAAC,KAAK,gBAAgB,QAAS,kBAACC,EAAAA,OAAaA,CAAAA,K"}