gdc_cmod/app/Views/shared/dialog_val.php
mahdahar 01908bb002 feat: Implement status-based row coloring and enhance validation dialog
This commit implements a comprehensive status color system across the dashboard and validation interfaces, ensuring visual consistency between table rows and filter buttons.

Color System Changes:
- Updated statusRowBg mapping in script_requests.php with custom hex colors:
  * Pend: white (#ffffff) with black text
  * PartColl: pink (#ff99aa) with black text
  * Coll: red (#d63031) with white text
  * PartRecv: light blue (#a0c0d9) with black text
  * Recv: blue (#0984e3) with white text
  * Inc: yellow (#ffff00) with black text
  * Fin: green (#008000) with white text
- Added custom CSS button classes in layout.php matching row background colors
- Applied color backgrounds to table rows (Order through Tests columns)
- Removed hardcoded text-white classes, now using dynamic text colors from mapping

UI/UX Improvements:
- Table rows now have consistent color-coded backgrounds based on request status
- Filter button badges match their corresponding row background colors
- Yellow status uses black text for better readability
- Swapped Coll (yellow) and Inc (orange) colors as requested

Validation Dialog Enhancement:
- Updated dialog_val.php iframe to use dynamic URL generation
- Removed preview type selection (ID, EN, PDF options) - uses default only
- Added getPreviewUrl() method in script_validation.php
- Now uses same URL pattern as preview dialog: http://glenlis/spooler_db/main_dev.php?acc={accessnumber}

Documentation Updates:
- Added Serena MCP tool usage guidelines to AGENTS.md
- Renamed CHECKLIST.md to TODO.md
- Removed CLAUDE.md

Technical Details:
- Color mappings now include both background and text color classes
- Implemented using Tailwind arbitrary values for precise hex color matching
- Status buttons use btn-status-{status} and badge-status-{status} classes
- All 7 columns from Order through Tests have status-colored backgrounds
2026-02-02 14:27:12 +07:00

61 lines
2.5 KiB
PHP

<dialog class="modal" :open="isDialogValOpen" @keydown.escape="closeValDialog()">
<template x-if="valItem">
<div class="modal-box w-2/3 max-w-5xl" x-trap.noreturn="isDialogValOpen">
<!-- Progress indicator -->
<div class="text-sm text-base-content/60 mb-2">
<span x-text="currentIndex + 1"></span> / <span x-text="unvalidatedFiltered.length"></span>
</div>
<!-- Request info header -->
<div class="bg-base-200 p-3 rounded mb-3">
<div class="grid grid-cols-4 gap-2 text-sm">
<div>Access#: <span x-text="valItem?.SP_ACCESSNUMBER" class="font-mono font-bold"></span></div>
<div>Patient: <span x-text="valItem?.PATNAME || valItem?.Name"></span></div>
<div>MRN: <span x-text="valItem?.PATNUMBER?.substring(14) || valItem?.PATNUMBER"></span></div>
<div>Tests: <span x-text="(valItem?.TESTS || valItem?.TESTNAMES || '').substring(0,40) + '...'"></span></div>
</div>
</div>
<div class="flex justify-between items-center mb-2">
<h3 class="font-bold text-lg">Validate Request</h3>
<button class="btn btn-sm btn-ghost" @click="closeValDialog()" aria-label="Close">
<i class="fa fa-times"></i>
</button>
</div>
<p class="mb-2 flex gap-2">
<button id="validate-btn" x-ref="validateBtn" class="btn btn-sm btn-success"
@click="validate(valAccessnumber, '<?=session('userid');?>')"
:disabled="isValidating"
@keydown.enter.prevent="validate(valAccessnumber, '<?=session('userid');?>')"
@keydown.tab="focusNext($event)">
<i class="fa fa-check"></i> Validate (Enter)
</button>
<button class="btn btn-sm btn-neutral" @click="skipToNext()" @keydown.tab="focusPrev($event)">
<i class="fa fa-arrow-right"></i> Skip (N)
</button>
<button class="btn btn-sm btn-ghost" @click="closeValDialog()" @keydown.tab="focusPrev($event)">
Close (Esc)
</button>
</p>
<iframe id="result-iframe" x-ref="resultIframe" :src="getPreviewUrl()" width="100%" height="500px"
class="border border-base-300 rounded"></iframe>
<!-- Loading overlay -->
<template x-if="isValidating">
<div class="absolute inset-0 bg-base-100/80 flex items-center justify-center z-10 rounded-box">
<span class="loading loading-spinner loading-lg text-success"></span>
</div>
</template>
</div>
</template>
</dialog>
<!-- Toast notification -->
<div x-show="toast.show" x-transition
class="alert fixed bottom-4 right-4 z-50"
:class="toast.type === 'error' ? 'alert-error' : 'alert-success'">
<i :class="toast.type === 'error' ? 'fa fa-times-circle' : 'fa fa-check-circle'"></i>
<span x-text="toast.message"></span>
</div>