Skip to content

fix: Dashboard UI polish — remove redundant criteria icons, clean up form layout, guard submit - #31

Merged
rsalus merged 1 commit into
mainfrom
02-21-fix_dashboard_ui_polish_remove_redundant_criteria_icons_clean_up_form_layout_guard_submit
Feb 22, 2026
Merged

fix: Dashboard UI polish — remove redundant criteria icons, clean up form layout, guard submit#31
rsalus merged 1 commit into
mainfrom
02-21-fix_dashboard_ui_polish_remove_redundant_criteria_icons_clean_up_form_layout_guard_submit

Conversation

@rsalus

Copy link
Copy Markdown
Contributor
  • 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

…form layout, guard submit
- 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>
@rsalusGraphite App

Copy link
Copy Markdown
ContributorAuthor

@coderabbitai

coderabbitaiBot commented Feb 22, 2026

Copy link
Copy Markdown
📝 Walkthrough

Walkthrough

A refactor of the analysis page consolidating UI components and submission logic. Changes include: import simplification, replacing individual status icons with a compact badge, introducing canSubmit state gating for submission actions, updating form fields and messaging to reflect draft status awareness, and renaming a section header from "PA Form Data" to "Clinical Details".

Changes

Cohort / File(s)Summary
Analysis Page Refactor
apps/dashboard/src/routes/analysis.$transactionId.tsx
Streamlined icon imports and replaced multi-icon status rendering with a single compact status badge. Introduced canSubmit derived state to gate submission actions. Simplified patient form by removing multiple EditableField blocks, updated section header to "Clinical Details", and added draft-aware messaging to the confidence panel. Adjusted submit button disabled states and inline conditional UI to reflect submission prerequisites.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

Poem

🎨 Icons condensed, forms refined,
Status badges cleanly designed,
Submission gates now gently aligned,
Draft-aware messaging redefined,
Cleaner paths where workflows wind ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check nameStatusExplanationResolution
Docstring Coverage⚠️ WarningDocstring coverage is 50.00% which is insufficient. The required threshold is 80.00%.Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check nameStatusExplanation
Title check✅ PassedThe title accurately summarizes the main changes: UI polish involving icon removal, form cleanup, and submit button gating.
Description check✅ PassedThe description clearly relates to the changeset, detailing specific UI improvements and form adjustments that match the summary.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
  • 📝 Generate docstrings (stacked PR)
  • 📝 Generate docstrings (commit on current branch)
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch 02-21-fix_dashboard_ui_polish_remove_redundant_criteria_icons_clean_up_form_layout_guard_submit

Comment @coderabbitai help to get the list of available commands and usage tips.

@rsalus
rsalus merged commit 205c246 into mainFeb 22, 2026
14 of 15 checks passed
@rsalusGraphite App

Copy link
Copy Markdown
ContributorAuthor

Merge activity

@github-project-automationgithub-project-automationBot moved this from Todo to Done in Authscript DemoFeb 22, 2026

@coderabbitaicoderabbitaiBot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/dashboard/src/routes/analysis`.$transactionId.tsx:
- Around line 602-605: The top submit button currently uses the same label
regardless of disabled state; update the button rendering in the component that
uses onClick={handleSubmit} and disabled={!canSubmit || isSubmitting ||
showSubmissionOverlay} so that when !canSubmit (or when disabled for the same
conditions) its visible label mirrors the sidebar guidance (e.g., "Process
request before submitting") or add an accessible tooltip/aria-describedby
explaining the reason; ensure you reference the same props/flags (canSubmit,
isSubmitting, showSubmissionOverlay) and keep the existing click/disabled logic
and styling while only changing the displayed text or adding a tooltip/aria
attribute for accessibility.
- Around line 456-457: handleSubmit isn't protected by the new canSubmit guard
and can be invoked programmatically; update the handleSubmit function to
early-return when !canSubmit or when isSubmittingRef.current is true, then set
isSubmittingRef.current = true and call setShowSubmissionOverlay(true) only
after passing the guard (refer to canSubmit, handleSubmit, isSubmittingRef, and
setShowSubmissionOverlay to locate the change).
- Around line 694-704: The current onChange handler for EditableField (label
"Diagnosis Code") uses v.split(' - ') which loses parts when the diagnosis
contains the delimiter and clears fields if only one side is typed; change the
parse to split only once (e.g., find the first ' - ' and take left part as
diagnosisCode and the rest as diagnosis) so you preserve any additional hyphens
and avoid clearing the second field, then call setEditedData(...) with
diagnosisCode and diagnosis derived from that single-split logic (refer to the
EditableField onChange, setEditedData, and displayData.diagnosisCode/diagnosis
symbols).

Comment on lines +456 to 457
const canSubmit = effectiveRequest.status !== 'draft' && !!effectiveRequest.clinicalSummary?.trim();

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Guard handleSubmit with canSubmit.
Line 456 introduces the new gate, but handleSubmit can still be triggered programmatically even when canSubmit is false. Add an early return to enforce the gate in code, not just UI.

✅ Suggested guard near handleSubmit
consthandleSubmit=()=>{if(!canSubmit||isSubmittingRef.current)return;isSubmittingRef.current=true;setShowSubmissionOverlay(true);};
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/dashboard/src/routes/analysis`.$transactionId.tsx around lines 456 -
457, handleSubmit isn't protected by the new canSubmit guard and can be invoked
programmatically; update the handleSubmit function to early-return when
!canSubmit or when isSubmittingRef.current is true, then set
isSubmittingRef.current = true and call setShowSubmissionOverlay(true) only
after passing the guard (refer to canSubmit, handleSubmit, isSubmittingRef, and
setShowSubmissionOverlay to locate the change).

Comment on lines 602 to 605
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"
>

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Disabled header submit button lacks a reason.
Line 603 disables the top submit button but keeps the label “Confirm & Submit,” which is inconsistent with the sidebar’s explicit guidance. Consider mirroring the “Process request before submitting” message or adding a tooltip.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/dashboard/src/routes/analysis`.$transactionId.tsx around lines 602 -
605, The top submit button currently uses the same label regardless of disabled
state; update the button rendering in the component that uses
onClick={handleSubmit} and disabled={!canSubmit || isSubmitting ||
showSubmissionOverlay} so that when !canSubmit (or when disabled for the same
conditions) its visible label mirrors the sidebar guidance (e.g., "Process
request before submitting") or add an accessible tooltip/aria-describedby
explaining the reason; ensure you reference the same props/flags (canSubmit,
isSubmitting, showSubmissionOverlay) and keep the existing click/disabled logic
and styling while only changing the displayed text or adding a tooltip/aria
attribute for accessibility.

Comment on lines +694 to 704
<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] || ''
});
}}

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Avoid lossy split for Diagnosis Code.
Line 698 splits on ' - ', which truncates diagnoses that contain the delimiter and clears the second field when users type only one side. Split once and preserve the rest.

🔧 Safer parse to preserve hyphens
- const parts = v.split(' - ');- setEditedData({- ...editedData,- diagnosisCode: parts[0] || '',- diagnosis: parts[1] || ''- });+ const [code, ...rest] = v.split(' - ');+ setEditedData({+ ...editedData,+ diagnosisCode: (code ?? '').trim(),+ diagnosis: rest.join(' - ').trim()+ });
📝 Committable suggestion

‼️IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<EditableField
label="Diagnosis Code"
value={`${displayData.diagnosisCode} - ${displayData.diagnosis}`}
onChange={(v)=>{
constparts=v.split(' - ');
setEditedData({
...editedData,
setEditedData({
...editedData,
diagnosisCode: parts[0]||'',
diagnosis: parts[1]||''
});
}}
<EditableField
label="Diagnosis Code"
value={`${displayData.diagnosisCode} - ${displayData.diagnosis}`}
onChange={(v)=>{
const[code, ...rest]=v.split(' - ');
setEditedData({
...editedData,
diagnosisCode: (code??'').trim(),
diagnosis: rest.join(' - ').trim()
});
}}
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/dashboard/src/routes/analysis`.$transactionId.tsx around lines 694 -
704, The current onChange handler for EditableField (label "Diagnosis Code")
uses v.split(' - ') which loses parts when the diagnosis contains the delimiter
and clears fields if only one side is typed; change the parse to split only once
(e.g., find the first ' - ' and take left part as diagnosisCode and the rest as
diagnosis) so you preserve any additional hyphens and avoid clearing the second
field, then call setEditedData(...) with diagnosisCode and diagnosis derived
from that single-split logic (refer to the EditableField onChange,
setEditedData, and displayData.diagnosisCode/diagnosis symbols).

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: Done

Development

Successfully merging this pull request may close these issues.

1 participant

@rsalus