Today we’ll enhance the user interface by visually highlighting flagged fields and adding trust indicators like “✅ Validated”, “⚠️ Review Needed”, or “🚨 Action Required” based on GPT validation notes.
🎯 Goal
Make validation results immediately visible by color-coding field statuses and showing an overall document health badge.
🧩 Step 1: Add a validation_status Column
php artisan make:migration add_validation_status_to_documents_table
In the migration:
public function up()
{
Schema::table('documents', function (Blueprint $table) {
$table->string('validation_status')->default('pending'); // pending, validated, warning, error
});
}
Run the migration:
php artisan migrate
🤖 Step 2: Update Validation to Set Status
In your DocumentAnalysisService or controller:
$status = 'validated';
if (str_contains($notes, 'missing') || str_contains($notes, 'inconsistenc')) {
$status = 'warning';
}
if (str_contains($notes, 'risky') || str_contains($notes, 'termination')) {
$status = 'error';
}
$document->update([
'validation_notes' => $notes,
'validation_status' => $status,
]);
🎨 Step 3: Add Trust Indicator to View
In show.blade.php or a component:
@php
$badgeClass = match($document->validation_status) {
'validated' => 'bg-green-200 text-green-800',
'warning' => 'bg-yellow-200 text-yellow-800',
'error' => 'bg-red-200 text-red-800',
default => 'bg-gray-200 text-gray-800',
};
@endphp
<span class="px-2 py-1 rounded {{ $badgeClass }}">
{{ ucfirst($document->validation_status) }}
</span>
✏️ Step 4: Highlight Individual Fields
In the extracted fields section:
@foreach(json_decode($document->extracted_fields, true) as $key => $value)
<div class="mb-2">
<label>{{ ucfirst(str_replace('_', ' ', $key)) }}:</label>
<input
type="text"
name="fields[{{ $key }}]"
value="{{ $value }}"
class="form-input
@if(str_contains($document->validation_notes, $key))
border-red-500 bg-red-50
@elseif($document->validation_status === 'validated')
border-green-500 bg-green-50
@endif
"
>
</div>
@endforeach
✅ Summary
✅ Today you:
- Stored a validation status for each document
- Set dynamic badge indicators based on AI feedback
- Visually flagged risky fields for better UX
✅ Up next (Day 7): We’ll enable corrections and re-validation, allowing users to edit fields and send the updated content back to GPT for confirmation.
