Skip to content

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

Merged
rsalus merged 1 commit intomainfrom
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 intomainfrom
02-21-fix_dashboard_ui_polish_remove_redundant_criteria_icons_clean_up_form_layout_guard_submit

Conversation

@rsalus
Copy link
Contributor

@rsalus rsalus commented Feb 22, 2026

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

rsalus commented Feb 22, 2026

This stack of pull requests is managed by Graphite. Learn more about stacking.

@coderabbitai
Copy link

coderabbitai bot commented Feb 22, 2026

📝 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 name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring 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 name Status Explanation
Title check ✅ Passed The title accurately summarizes the main changes: UI polish involving icon removal, form cleanup, and submit button gating.
Description check ✅ Passed The 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 main Feb 22, 2026
14 of 15 checks passed
Copy link
Contributor Author

rsalus commented Feb 22, 2026

Merge activity

@github-project-automation github-project-automation bot moved this from Todo to Done in Authscript Demo Feb 22, 2026
Copy link

@coderabbitai coderabbitai bot left a comment

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

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
const handleSubmit = () => {
  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

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

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) => {
const parts = 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 free to 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