From cb27c768220f5e188de4179f32e36bb7aff526fe Mon Sep 17 00:00:00 2001
From: Reed <reedsalus@gmail.com>
Date: Sat, 21 Feb 2026 18:19:38 -0800
Subject: [PATCH] =?UTF-8?q?fix:=20Dashboard=20UI=20polish=20=E2=80=94=20re?=
 =?UTF-8?q?move=20redundant=20criteria=20icons,=20clean=20up=20form=20layo?=
 =?UTF-8?q?ut,=20guard=20submit?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove duplicate status icons from policy criteria list (keep left icon box,
  replace right icons with compact text badge)
- Rename 'PA Form Data' to 'Clinical Details' and remove redundant Patient
  Name, DOB, Member ID fields already shown in Patient Information card
- Disable submit button when request is still in draft status or clinical
  summary is empty — shows 'Process request before submitting' message
- Show 'Awaiting AI analysis' state in confidence panel for draft requests

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../src/routes/analysis.$transactionId.tsx    | 68 +++++++------------
 1 file changed, 24 insertions(+), 44 deletions(-)

diff --git a/apps/dashboard/src/routes/analysis.$transactionId.tsx b/apps/dashboard/src/routes/analysis.$transactionId.tsx
index 7216745..a72f37c 100644
--- a/apps/dashboard/src/routes/analysis.$transactionId.tsx
+++ b/apps/dashboard/src/routes/analysis.$transactionId.tsx
@@ -5,8 +5,7 @@ import { cn } from '@/lib/utils';
 import { 
   ArrowLeft, 
   Check, 
-  X, 
-  XCircle,
+  X,
   AlertCircle, 
   AlertTriangle,
   CheckCircle2, 
@@ -155,9 +154,7 @@ function CriteriaItem({
         {met === null && <AlertCircle className="w-3.5 h-3.5" />}
       </div>
       <span className="text-sm text-foreground flex-1">{label}</span>
-      {met === true && <CheckCircle2 className="w-5 h-5 text-green-500 flex-shrink-0" />}
-      {met === false && <XCircle className="w-5 h-5 text-red-500 flex-shrink-0" />}
-      {met === null && <AlertCircle className="w-5 h-5 text-amber-500 flex-shrink-0" />}
+      <span className={cn('text-[10px] font-bold uppercase tracking-wide px-2 py-0.5 rounded-md flex-shrink-0', style.text, style.bg)}>{style.statusLabel}</span>
       {isEditing && (
         <span className="text-xs text-muted-foreground">Toggle</span>
       )}
@@ -456,6 +453,7 @@ function AnalysisPage() {
   const displayData = isEditing ? editedData : effectiveRequest;
   const hasUnmetCriteria = (effectiveRequest.criteria || []).some((c: { met: boolean | null }) => c.met !== true);
   const isLowConfidence = effectiveRequest.status === 'ready' && effectiveRequest.confidence < LOW_CONFIDENCE_THRESHOLD;
+  const canSubmit = effectiveRequest.status !== 'draft' && !!effectiveRequest.clinicalSummary?.trim();
 
   return (
     <div className="p-6 space-y-6 animate-fade-in">
@@ -602,8 +600,8 @@ function AnalysisPage() {
                 </button>
                 <button
                   onClick={handleSubmit}
-                  disabled={isSubmitting || showSubmissionOverlay}
-                  className="px-5 py-2.5 text-sm font-semibold bg-teal text-white rounded-xl hover:bg-teal/90 disabled:opacity-70 transition-all shadow-teal flex items-center gap-2 min-w-[160px] justify-center click-effect-primary"
+                  disabled={!canSubmit || isSubmitting || showSubmissionOverlay}
+                  className="px-5 py-2.5 text-sm font-semibold bg-teal text-white rounded-xl hover:bg-teal/90 disabled:opacity-50 disabled:cursor-not-allowed transition-all shadow-teal flex items-center gap-2 min-w-[160px] justify-center click-effect-primary"
                 >
                   {(isSubmitting || showSubmissionOverlay) ? (
                     <>
@@ -684,7 +682,7 @@ function AnalysisPage() {
             <div className="flex items-center justify-between mb-5">
               <h2 className="font-bold text-foreground flex items-center gap-2">
                 <FileText className="w-5 h-5 text-teal" />
-                PA Form Data
+                Clinical Details
               </h2>
               <span className="flex items-center gap-1.5 px-3 py-1 rounded-full bg-teal/10 text-teal text-xs font-semibold">
                 <Sparkles className="w-3 h-3" />
@@ -693,44 +691,19 @@ function AnalysisPage() {
             </div>
             
             <div className="grid grid-cols-2 gap-x-8">
-              <EditableField 
-                label="Patient Name" 
-                value={request.patient.name} 
-                onChange={() => {}}
-                isEditing={false}
-              />
-              <EditableField 
-                label="Date of Birth" 
-                value={request.patient.dob} 
-                onChange={() => {}}
-                isEditing={false}
-              />
-              <EditableField 
-                label="Member ID" 
-                value={request.patient.memberId} 
-                onChange={() => {}}
-                isEditing={false}
-                mono
-              />
-              <EditableField 
-                label="Diagnosis Code" 
-                value={`${displayData.diagnosisCode} - ${displayData.diagnosis}`} 
+              <EditableField
+                label="Diagnosis Code"
+                value={`${displayData.diagnosisCode} - ${displayData.diagnosis}`}
                 onChange={(v) => {
                   const parts = v.split(' - ');
-                  setEditedData({ 
-                    ...editedData, 
+                  setEditedData({
+                    ...editedData,
                     diagnosisCode: parts[0] || '',
                     diagnosis: parts[1] || ''
                   });
                 }}
                 isEditing={isEditing}
               />
-              <EditableField 
-                label="Procedure Code" 
-                value={request.procedureCode} 
-                onChange={() => {}}
-                isEditing={false}
-              />
               <EditableField 
                 label="Service Date" 
                 value={displayData.serviceDate || ''} 
@@ -793,12 +766,14 @@ function AnalysisPage() {
             </div>
             <p className={cn(
               'text-center text-sm font-medium mt-4 p-3 rounded-lg',
-              displayConfidence(effectiveRequest.confidence) >= 80 ? 'bg-success/10 text-success' : 
-              displayConfidence(effectiveRequest.confidence) >= 60 ? 'bg-warning/10 text-warning' : 
+              effectiveRequest.status === 'draft' ? 'bg-secondary text-muted-foreground' :
+              displayConfidence(effectiveRequest.confidence) >= 80 ? 'bg-success/10 text-success' :
+              displayConfidence(effectiveRequest.confidence) >= 60 ? 'bg-warning/10 text-warning' :
               'bg-destructive/10 text-destructive'
             )}>
-              {displayConfidence(effectiveRequest.confidence) >= 80 ? 'High confidence — ready for submission' : 
-               displayConfidence(effectiveRequest.confidence) >= 60 ? 'Medium confidence — review recommended' : 
+              {effectiveRequest.status === 'draft' ? 'Awaiting AI analysis — click Process to begin' :
+               displayConfidence(effectiveRequest.confidence) >= 80 ? 'High confidence — ready for submission' :
+               displayConfidence(effectiveRequest.confidence) >= 60 ? 'Medium confidence — review recommended' :
                'Low confidence — manual review required'}
             </p>
           </div>
@@ -867,14 +842,19 @@ function AnalysisPage() {
             <div className="space-y-3">
               <button
                 onClick={handleSubmit}
-                disabled={isSubmitting || showSubmissionOverlay}
-                className="w-full px-5 py-3.5 text-sm font-semibold bg-teal text-white rounded-xl hover:bg-teal/90 disabled:opacity-70 transition-all shadow-teal flex items-center justify-center gap-2 click-effect-primary"
+                disabled={!canSubmit || isSubmitting || showSubmissionOverlay}
+                className="w-full px-5 py-3.5 text-sm font-semibold bg-teal text-white rounded-xl hover:bg-teal/90 disabled:opacity-50 disabled:cursor-not-allowed transition-all shadow-teal flex items-center justify-center gap-2 click-effect-primary"
               >
                 {(isSubmitting || showSubmissionOverlay) ? (
                   <>
                     <LoadingSpinner size="sm" className="border-white border-t-transparent" />
                     <span>Submitting to athenahealth...</span>
                   </>
+                ) : !canSubmit ? (
+                  <>
+                    <AlertCircle className="w-4 h-4" />
+                    Process request before submitting
+                  </>
                 ) : (
                   <>
                     <Send className="w-4 h-4" />