style: convert UI palette to clean clinical hospital theme
This commit is contained in:
@@ -7,16 +7,12 @@ import { AmbientAudioRecorder } from '@/components/ui/AmbientAudioRecorder';
|
||||
import { STANDARD_CPT_CODES, STANDARD_ICD10_CODES } from '@/lib/mock-data';
|
||||
import {
|
||||
FileText,
|
||||
Sparkles,
|
||||
CheckCircle,
|
||||
Copy,
|
||||
PenTool,
|
||||
Save,
|
||||
DollarSign,
|
||||
ChevronLeft,
|
||||
Tag,
|
||||
ShieldCheck,
|
||||
AlertCircle,
|
||||
} from 'lucide-react';
|
||||
|
||||
interface SoapChartEditorProps {
|
||||
@@ -61,16 +57,15 @@ export const SoapChartEditor: React.FC<SoapChartEditorProps> = ({
|
||||
]
|
||||
);
|
||||
const [selectedIcd10, setSelectedIcd10] = useState<Icd10CodeItem[]>(
|
||||
initialSoapNote?.icd10Codes || [STANDARD_ICD10_CODES[2], STANDARD_ICD10_CODES[5]] // M99.03 & M54.50
|
||||
initialSoapNote?.icd10Codes || [STANDARD_ICD10_CODES[2], STANDARD_ICD10_CODES[5]]
|
||||
);
|
||||
const [selectedCpt, setSelectedCpt] = useState<CptCodeItem[]>(
|
||||
initialSoapNote?.cptCodes || [STANDARD_CPT_CODES[0], STANDARD_CPT_CODES[3]] // 98940 & 97140
|
||||
initialSoapNote?.cptCodes || [STANDARD_CPT_CODES[0], STANDARD_CPT_CODES[3]]
|
||||
);
|
||||
const [vasScore, setVasScore] = useState<number>(initialSoapNote?.vasScore || 3);
|
||||
const [isSigned, setIsSigned] = useState<boolean>(initialSoapNote?.status === 'signed');
|
||||
const [signedTimestamp, setSignedTimestamp] = useState<string | undefined>(initialSoapNote?.signedAt);
|
||||
|
||||
// Ambient AI Scribe callback
|
||||
const handleApplyExtractedSoap = (data: {
|
||||
vasScore: number;
|
||||
subjective: string;
|
||||
@@ -91,11 +86,9 @@ export const SoapChartEditor: React.FC<SoapChartEditorProps> = ({
|
||||
setAdjustments(data.spinalAdjustments);
|
||||
}
|
||||
|
||||
// Auto map ICD10
|
||||
const matchedIcds = STANDARD_ICD10_CODES.filter((icd) => data.icd10.includes(icd.code));
|
||||
if (matchedIcds.length > 0) setSelectedIcd10(matchedIcds);
|
||||
|
||||
// Auto map CPT
|
||||
const matchedCpts = STANDARD_CPT_CODES.filter((cpt) => data.cpt.includes(cpt.code));
|
||||
if (matchedCpts.length > 0) setSelectedCpt(matchedCpts);
|
||||
};
|
||||
@@ -174,13 +167,13 @@ export const SoapChartEditor: React.FC<SoapChartEditorProps> = ({
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Top Breadcrumb & Patient Header */}
|
||||
<div className="bg-slate-900 border border-slate-800 rounded-2xl p-5 shadow-xl flex flex-col md:flex-row md:items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-4">
|
||||
{/* Top Patient Header Bar */}
|
||||
<div className="bg-white border border-slate-200 rounded-xl p-5 shadow-xs flex flex-col md:flex-row md:items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onBackToCalendar}
|
||||
className="p-2 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-xl transition"
|
||||
className="p-2 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-lg transition"
|
||||
title="Back to Calendar"
|
||||
>
|
||||
<ChevronLeft className="w-5 h-5" />
|
||||
@@ -188,29 +181,29 @@ export const SoapChartEditor: React.FC<SoapChartEditorProps> = ({
|
||||
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className="text-lg font-black text-white">
|
||||
<h3 className="text-lg font-bold text-slate-900">
|
||||
{patient.firstName} {patient.lastName}
|
||||
</h3>
|
||||
<span className="text-xs px-2.5 py-0.5 rounded-full bg-teal-500/20 text-teal-300 border border-teal-500/30 font-semibold">
|
||||
<span className="text-xs px-2.5 py-0.5 rounded-full bg-sky-50 text-sky-800 border border-sky-200 font-semibold">
|
||||
Care Plan: Visit {patient.carePlan.completedVisits + 1} of {patient.carePlan.totalVisits}
|
||||
</span>
|
||||
{isSigned ? (
|
||||
<span className="text-xs px-2.5 py-0.5 rounded-full bg-emerald-500/20 text-emerald-300 border border-emerald-500/30 font-semibold flex items-center gap-1">
|
||||
<span className="text-xs px-2.5 py-0.5 rounded-full bg-emerald-50 text-emerald-700 border border-emerald-200 font-semibold flex items-center gap-1">
|
||||
<ShieldCheck className="w-3.5 h-3.5" /> Signed & Locked
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-xs px-2.5 py-0.5 rounded-full bg-amber-500/20 text-amber-300 border border-amber-500/30 font-semibold">
|
||||
<span className="text-xs px-2.5 py-0.5 rounded-full bg-amber-50 text-amber-700 border border-amber-200 font-semibold">
|
||||
In Progress (Draft)
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-3 text-xs text-slate-400 mt-1">
|
||||
<div className="flex flex-wrap items-center gap-3 text-xs text-slate-500 mt-1">
|
||||
<span>DOB: {patient.dob}</span>
|
||||
<span>•</span>
|
||||
<span>Insurance: {patient.insuranceName}</span>
|
||||
<span>•</span>
|
||||
<span className="text-teal-400 font-medium">Attending: {provider.name}</span>
|
||||
<span className="text-sky-800 font-medium">Attending: {provider.name}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -220,9 +213,9 @@ export const SoapChartEditor: React.FC<SoapChartEditorProps> = ({
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleCloneLastNote}
|
||||
className="px-3 py-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-300 text-xs font-semibold flex items-center gap-1.5 transition"
|
||||
className="px-3 py-2 rounded-lg bg-slate-100 hover:bg-slate-200 text-slate-700 border border-slate-200 text-xs font-semibold flex items-center gap-1.5 transition"
|
||||
>
|
||||
<Copy className="w-3.5 h-3.5" />
|
||||
<Copy className="w-3.5 h-3.5 text-slate-600" />
|
||||
Clone Last Note
|
||||
</button>
|
||||
|
||||
@@ -230,20 +223,20 @@ export const SoapChartEditor: React.FC<SoapChartEditorProps> = ({
|
||||
type="button"
|
||||
onClick={handleSignChart}
|
||||
disabled={isSigned}
|
||||
className={`px-4 py-2 rounded-xl text-xs font-bold flex items-center gap-1.5 shadow-lg transition ${
|
||||
className={`px-4 py-2 rounded-lg text-xs font-bold flex items-center gap-1.5 transition shadow-xs ${
|
||||
isSigned
|
||||
? 'bg-emerald-500/20 text-emerald-400 border border-emerald-500/40 cursor-default'
|
||||
: 'bg-teal-500 hover:bg-teal-400 text-slate-950 shadow-teal-500/20'
|
||||
? 'bg-emerald-50 text-emerald-700 border border-emerald-200 cursor-default'
|
||||
: 'bg-emerald-700 hover:bg-emerald-800 text-white'
|
||||
}`}
|
||||
>
|
||||
<CheckCircle className="w-4 h-4" />
|
||||
{isSigned ? 'Signed by Doctor' : 'Sign & Complete Note'}
|
||||
{isSigned ? 'Signed & Locked' : 'Sign & Complete Note'}
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleCreateSuperbillClick}
|
||||
className="px-4 py-2 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-bold flex items-center gap-1.5 shadow-lg shadow-indigo-600/20 transition"
|
||||
className="px-4 py-2 rounded-lg bg-sky-700 hover:bg-sky-800 text-white text-xs font-bold flex items-center gap-1.5 shadow-xs transition"
|
||||
>
|
||||
<DollarSign className="w-4 h-4" />
|
||||
Generate Superbill
|
||||
@@ -251,56 +244,57 @@ export const SoapChartEditor: React.FC<SoapChartEditorProps> = ({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Ambient AI Clinical Scribe Section */}
|
||||
{/* Ambient AI Scribe */}
|
||||
<AmbientAudioRecorder onApplyExtractedSoap={handleApplyExtractedSoap} />
|
||||
|
||||
{/* 2D Spine Visualizer Subluxation Clicker */}
|
||||
{/* Spine Subluxation Visualizer */}
|
||||
<SpineVisualizer
|
||||
adjustments={adjustments}
|
||||
onToggleAdjustment={handleToggleAdjustment}
|
||||
readOnly={isSigned}
|
||||
/>
|
||||
|
||||
{/* Structured SOAP Fields Grid */}
|
||||
{/* Structured SOAP Fields */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-5">
|
||||
{/* Subjective */}
|
||||
<div className="bg-slate-900 border border-slate-800 rounded-2xl p-4 shadow-xl flex flex-col justify-between">
|
||||
{/* S */}
|
||||
<div className="bg-white border border-slate-200 rounded-xl p-4 shadow-xs flex flex-col justify-between">
|
||||
<div>
|
||||
<div className="flex items-center justify-between pb-2 border-b border-slate-800 mb-2">
|
||||
<span className="text-xs font-bold text-teal-400 uppercase tracking-wider flex items-center gap-1.5">
|
||||
<span className="w-5 h-5 rounded-md bg-teal-500/20 flex items-center justify-center font-black text-teal-300">
|
||||
<div className="flex items-center justify-between pb-2 border-b border-slate-100 mb-2">
|
||||
<span className="text-xs font-bold text-sky-800 uppercase tracking-wider flex items-center gap-1.5">
|
||||
<span className="w-5 h-5 rounded bg-sky-100 text-sky-800 flex items-center justify-center font-bold">
|
||||
S
|
||||
</span>
|
||||
Subjective Complaint & History
|
||||
Subjective History & Complaint
|
||||
</span>
|
||||
<span className="text-xs font-mono font-semibold text-slate-600 bg-slate-100 px-2 py-0.5 rounded">
|
||||
VAS: {vasScore}/10
|
||||
</span>
|
||||
<span className="text-xs font-mono text-slate-400">VAS: {vasScore}/10</span>
|
||||
</div>
|
||||
<textarea
|
||||
rows={4}
|
||||
value={subjective}
|
||||
disabled={isSigned}
|
||||
onChange={(e) => setSubjective(e.target.value)}
|
||||
className="w-full bg-slate-950 border border-slate-800 rounded-xl p-3 text-xs text-slate-200 focus:outline-none focus:border-teal-500 resize-none font-sans"
|
||||
placeholder="Patient reports symptoms, VAS rating, changes since last visit..."
|
||||
className="w-full bg-slate-50 border border-slate-200 rounded-lg p-3 text-xs text-slate-800 focus:bg-white focus:outline-none focus:border-sky-500 resize-none"
|
||||
/>
|
||||
</div>
|
||||
<div className="text-[10px] text-slate-500 mt-2">
|
||||
<div className="text-[11px] text-slate-400 mt-2">
|
||||
Auto-populated from Intake and Ambient Scribe.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Objective */}
|
||||
<div className="bg-slate-900 border border-slate-800 rounded-2xl p-4 shadow-xl flex flex-col justify-between">
|
||||
{/* O */}
|
||||
<div className="bg-white border border-slate-200 rounded-xl p-4 shadow-xs flex flex-col justify-between">
|
||||
<div>
|
||||
<div className="flex items-center justify-between pb-2 border-b border-slate-800 mb-2">
|
||||
<span className="text-xs font-bold text-teal-400 uppercase tracking-wider flex items-center gap-1.5">
|
||||
<span className="w-5 h-5 rounded-md bg-teal-500/20 flex items-center justify-center font-black text-teal-300">
|
||||
<div className="flex items-center justify-between pb-2 border-b border-slate-100 mb-2">
|
||||
<span className="text-xs font-bold text-sky-800 uppercase tracking-wider flex items-center gap-1.5">
|
||||
<span className="w-5 h-5 rounded bg-sky-100 text-sky-800 flex items-center justify-center font-bold">
|
||||
O
|
||||
</span>
|
||||
Objective Findings & Palpation
|
||||
Objective Exam & Palpation
|
||||
</span>
|
||||
<span className="text-xs font-mono text-slate-400">
|
||||
{adjustments.length} Segment(s) Listed
|
||||
<span className="text-xs font-mono font-semibold text-slate-600 bg-slate-100 px-2 py-0.5 rounded">
|
||||
{adjustments.length} Segment(s)
|
||||
</span>
|
||||
</div>
|
||||
<textarea
|
||||
@@ -308,21 +302,20 @@ export const SoapChartEditor: React.FC<SoapChartEditorProps> = ({
|
||||
value={objective}
|
||||
disabled={isSigned}
|
||||
onChange={(e) => setObjective(e.target.value)}
|
||||
className="w-full bg-slate-950 border border-slate-800 rounded-xl p-3 text-xs text-slate-200 focus:outline-none focus:border-teal-500 resize-none font-sans"
|
||||
placeholder="Physical findings, spinal fixations, muscle spasms, range of motion..."
|
||||
className="w-full bg-slate-50 border border-slate-200 rounded-lg p-3 text-xs text-slate-800 focus:bg-white focus:outline-none focus:border-sky-500 resize-none"
|
||||
/>
|
||||
</div>
|
||||
<div className="text-[10px] text-slate-500 mt-2">
|
||||
Vertebrae selected in 2D Spine Map sync automatically.
|
||||
<div className="text-[11px] text-slate-400 mt-2">
|
||||
Vertebrae selected in Spine Map sync automatically.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Assessment */}
|
||||
<div className="bg-slate-900 border border-slate-800 rounded-2xl p-4 shadow-xl flex flex-col justify-between">
|
||||
{/* A */}
|
||||
<div className="bg-white border border-slate-200 rounded-xl p-4 shadow-xs flex flex-col justify-between">
|
||||
<div>
|
||||
<div className="flex items-center justify-between pb-2 border-b border-slate-800 mb-2">
|
||||
<span className="text-xs font-bold text-teal-400 uppercase tracking-wider flex items-center gap-1.5">
|
||||
<span className="w-5 h-5 rounded-md bg-teal-500/20 flex items-center justify-center font-black text-teal-300">
|
||||
<div className="flex items-center justify-between pb-2 border-b border-slate-100 mb-2">
|
||||
<span className="text-xs font-bold text-sky-800 uppercase tracking-wider flex items-center gap-1.5">
|
||||
<span className="w-5 h-5 rounded bg-sky-100 text-sky-800 flex items-center justify-center font-bold">
|
||||
A
|
||||
</span>
|
||||
Clinical Assessment & Progress
|
||||
@@ -333,24 +326,23 @@ export const SoapChartEditor: React.FC<SoapChartEditorProps> = ({
|
||||
value={assessment}
|
||||
disabled={isSigned}
|
||||
onChange={(e) => setAssessment(e.target.value)}
|
||||
className="w-full bg-slate-950 border border-slate-800 rounded-xl p-3 text-xs text-slate-200 focus:outline-none focus:border-teal-500 resize-none font-sans"
|
||||
placeholder="Clinical impression, diagnosis evaluation, treatment response..."
|
||||
className="w-full bg-slate-50 border border-slate-200 rounded-lg p-3 text-xs text-slate-800 focus:bg-white focus:outline-none focus:border-sky-500 resize-none"
|
||||
/>
|
||||
</div>
|
||||
<div className="text-[10px] text-slate-500 mt-2">
|
||||
Maps to ICD-10 diagnostic codes below.
|
||||
<div className="text-[11px] text-slate-400 mt-2">
|
||||
Mapped to ICD-10 diagnostic codes below.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Plan */}
|
||||
<div className="bg-slate-900 border border-slate-800 rounded-2xl p-4 shadow-xl flex flex-col justify-between">
|
||||
{/* P */}
|
||||
<div className="bg-white border border-slate-200 rounded-xl p-4 shadow-xs flex flex-col justify-between">
|
||||
<div>
|
||||
<div className="flex items-center justify-between pb-2 border-b border-slate-800 mb-2">
|
||||
<span className="text-xs font-bold text-teal-400 uppercase tracking-wider flex items-center gap-1.5">
|
||||
<span className="w-5 h-5 rounded-md bg-teal-500/20 flex items-center justify-center font-black text-teal-300">
|
||||
<div className="flex items-center justify-between pb-2 border-b border-slate-100 mb-2">
|
||||
<span className="text-xs font-bold text-sky-800 uppercase tracking-wider flex items-center gap-1.5">
|
||||
<span className="w-5 h-5 rounded bg-sky-100 text-sky-800 flex items-center justify-center font-bold">
|
||||
P
|
||||
</span>
|
||||
Treatment Plan & Home Care
|
||||
Treatment Plan & Modalities
|
||||
</span>
|
||||
</div>
|
||||
<textarea
|
||||
@@ -358,26 +350,27 @@ export const SoapChartEditor: React.FC<SoapChartEditorProps> = ({
|
||||
value={plan}
|
||||
disabled={isSigned}
|
||||
onChange={(e) => setPlan(e.target.value)}
|
||||
className="w-full bg-slate-950 border border-slate-800 rounded-xl p-3 text-xs text-slate-200 focus:outline-none focus:border-teal-500 resize-none font-sans"
|
||||
placeholder="Techniques delivered, rehabilitation modalities, next visit schedule..."
|
||||
className="w-full bg-slate-50 border border-slate-200 rounded-lg p-3 text-xs text-slate-800 focus:bg-white focus:outline-none focus:border-sky-500 resize-none"
|
||||
/>
|
||||
</div>
|
||||
<div className="text-[10px] text-slate-500 mt-2">
|
||||
Determines CPT procedure line items on Superbill.
|
||||
<div className="text-[11px] text-slate-400 mt-2">
|
||||
Populates CPT procedure line items on Superbill.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ICD-10 & CPT Billing Code Selectors */}
|
||||
{/* ICD-10 & CPT Selectors */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-5">
|
||||
{/* ICD-10 Codes */}
|
||||
<div className="bg-slate-900 border border-slate-800 rounded-2xl p-4 shadow-xl">
|
||||
<div className="flex items-center justify-between pb-2 border-b border-slate-800 mb-3">
|
||||
<span className="text-xs font-bold text-slate-200 uppercase tracking-wider flex items-center gap-1.5">
|
||||
<Tag className="w-3.5 h-3.5 text-teal-400" />
|
||||
{/* ICD-10 */}
|
||||
<div className="bg-white border border-slate-200 rounded-xl p-4 shadow-xs">
|
||||
<div className="flex items-center justify-between pb-2 border-b border-slate-100 mb-3">
|
||||
<span className="text-xs font-bold text-slate-800 uppercase tracking-wider flex items-center gap-1.5">
|
||||
<Tag className="w-3.5 h-3.5 text-sky-700" />
|
||||
ICD-10 Diagnostic Codes
|
||||
</span>
|
||||
<span className="text-xs text-teal-400 font-mono">{selectedIcd10.length} Selected</span>
|
||||
<span className="text-xs text-sky-800 font-mono font-bold">
|
||||
{selectedIcd10.length} Selected
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-1.5 max-h-40 overflow-y-auto pr-1">
|
||||
{STANDARD_ICD10_CODES.map((item) => {
|
||||
@@ -394,10 +387,10 @@ export const SoapChartEditor: React.FC<SoapChartEditorProps> = ({
|
||||
setSelectedIcd10((prev) => [...prev, item]);
|
||||
}
|
||||
}}
|
||||
className={`px-2.5 py-1.5 rounded-lg text-xs font-medium text-left transition ${
|
||||
className={`px-3 py-1.5 rounded-md text-xs font-medium text-left transition ${
|
||||
active
|
||||
? 'bg-teal-500 text-slate-950 font-bold shadow-sm'
|
||||
: 'bg-slate-800 text-slate-300 hover:bg-slate-700'
|
||||
? 'bg-sky-700 text-white font-bold shadow-xs'
|
||||
: 'bg-slate-100 text-slate-700 hover:bg-slate-200'
|
||||
}`}
|
||||
>
|
||||
<span className="font-mono font-bold mr-1">{item.code}</span>
|
||||
@@ -409,14 +402,14 @@ export const SoapChartEditor: React.FC<SoapChartEditorProps> = ({
|
||||
</div>
|
||||
|
||||
{/* CPT Codes */}
|
||||
<div className="bg-slate-900 border border-slate-800 rounded-2xl p-4 shadow-xl">
|
||||
<div className="flex items-center justify-between pb-2 border-b border-slate-800 mb-3">
|
||||
<span className="text-xs font-bold text-slate-200 uppercase tracking-wider flex items-center gap-1.5">
|
||||
<DollarSign className="w-3.5 h-3.5 text-teal-400" />
|
||||
CPT Procedure Codes & Fee Schedule
|
||||
<div className="bg-white border border-slate-200 rounded-xl p-4 shadow-xs">
|
||||
<div className="flex items-center justify-between pb-2 border-b border-slate-100 mb-3">
|
||||
<span className="text-xs font-bold text-slate-800 uppercase tracking-wider flex items-center gap-1.5">
|
||||
<DollarSign className="w-3.5 h-3.5 text-emerald-600" />
|
||||
CPT Procedure Codes
|
||||
</span>
|
||||
<span className="text-xs text-teal-400 font-mono">
|
||||
Total: ${selectedCpt.reduce((sum, c) => sum + c.fee, 0)}
|
||||
<span className="text-xs text-emerald-800 font-mono font-bold">
|
||||
Fee Total: ${selectedCpt.reduce((sum, c) => sum + c.fee, 0)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-1.5 max-h-40 overflow-y-auto pr-1">
|
||||
@@ -434,17 +427,19 @@ export const SoapChartEditor: React.FC<SoapChartEditorProps> = ({
|
||||
setSelectedCpt((prev) => [...prev, item]);
|
||||
}
|
||||
}}
|
||||
className={`px-2.5 py-1.5 rounded-lg text-xs font-medium text-left transition flex items-center justify-between gap-2 ${
|
||||
className={`px-3 py-1.5 rounded-md text-xs font-medium text-left transition flex items-center justify-between gap-2 ${
|
||||
active
|
||||
? 'bg-indigo-600 text-white font-bold shadow-sm'
|
||||
: 'bg-slate-800 text-slate-300 hover:bg-slate-700'
|
||||
? 'bg-emerald-700 text-white font-bold shadow-xs'
|
||||
: 'bg-slate-100 text-slate-700 hover:bg-slate-200'
|
||||
}`}
|
||||
>
|
||||
<div>
|
||||
<span className="font-mono font-bold mr-1">{item.code}</span>
|
||||
<span className="text-[11px] opacity-90 truncate">{item.description}</span>
|
||||
</div>
|
||||
<span className="font-mono text-teal-300 shrink-0 font-bold">${item.fee}</span>
|
||||
<span className="font-mono text-emerald-800 bg-white/20 px-1.5 rounded shrink-0 font-bold">
|
||||
${item.fee}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
@@ -454,12 +449,12 @@ export const SoapChartEditor: React.FC<SoapChartEditorProps> = ({
|
||||
|
||||
{/* Signature Attestation Footer */}
|
||||
{isSigned && (
|
||||
<div className="p-4 bg-emerald-500/10 border border-emerald-500/30 rounded-2xl flex items-center justify-between text-xs text-emerald-300">
|
||||
<div className="p-4 bg-emerald-50 border border-emerald-200 rounded-xl flex items-center justify-between text-xs text-emerald-900">
|
||||
<div className="flex items-center gap-2">
|
||||
<ShieldCheck className="w-5 h-5 text-emerald-400" />
|
||||
<ShieldCheck className="w-5 h-5 text-emerald-600" />
|
||||
<div>
|
||||
<strong>Electronically Signed by:</strong> {provider.name}, {provider.credentials} (NPI {provider.npi})
|
||||
<div className="text-[11px] text-emerald-400/80 mt-0.5">
|
||||
<div className="text-[11px] text-emerald-700 mt-0.5">
|
||||
Timestamp: {signedTimestamp || '2026-09-05T09:25:00-07:00'} • Immutable Legal Record
|
||||
</div>
|
||||
</div>
|
||||
@@ -467,7 +462,7 @@ export const SoapChartEditor: React.FC<SoapChartEditorProps> = ({
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleCreateSuperbillClick}
|
||||
className="px-3 py-1.5 bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-bold rounded-lg transition"
|
||||
className="px-3.5 py-1.5 bg-emerald-700 hover:bg-emerald-800 text-white font-bold rounded-lg transition"
|
||||
>
|
||||
Open Superbill
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user