From 7d085a0702a857dd33ce23f028239621cea762fc Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Tue, 11 Nov 2025 23:38:07 +0000
Subject: [PATCH] Enhance FormFieldWrapper Validation

Add real-time validation feedback to FormFieldWrapper:
- Manage validation state (idle/valid/invalid)
- Show green check icon when valid
- Show inline error icon when invalid
- Integrate with existing Input/Textarea components without altering core behavior
---
 src/components/ui/form-field-wrapper.tsx | 62 +++++++++++++++++-------
 1 file changed, 45 insertions(+), 17 deletions(-)

diff --git a/src/components/ui/form-field-wrapper.tsx b/src/components/ui/form-field-wrapper.tsx
index 25459c8e..cb9e1e61 100644
--- a/src/components/ui/form-field-wrapper.tsx
+++ b/src/components/ui/form-field-wrapper.tsx
@@ -5,6 +5,7 @@ import { Label } from "@/components/ui/label";
 import { TermTooltip } from "@/components/ui/term-tooltip";
 import { fieldHints } from "@/lib/enhancedValidation";
 import { cn } from "@/lib/utils";
+import { CheckCircle2, AlertCircle } from "lucide-react";
 
 /**
  * Field types that automatically get hints and terminology support
@@ -201,6 +202,11 @@ export function FormFieldWrapper({
   const showCharCount = isTextarea && maxLength && typeof value === 'string';
   const charCount = typeof value === 'string' ? value.length : 0;
   
+  // Determine validation state
+  const hasValue = value !== undefined && value !== null && value !== '';
+  const isValid = !error && hasValue;
+  const hasError = !!error;
+  
   return (
     <div className={cn("space-y-2", className)}>
       {/* Label with optional terminology tooltip */}
@@ -220,23 +226,45 @@ export function FormFieldWrapper({
         )}
       </Label>
       
-      {/* Input or Textarea */}
-      {isTextarea ? (
-        <Textarea
-          id={id}
-          className={cn(error && "border-destructive")}
-          maxLength={maxLength}
-          {...textareaProps}
-        />
-      ) : (
-        <Input
-          id={id}
-          type={inputType}
-          className={cn(error && "border-destructive")}
-          maxLength={maxLength}
-          {...inputProps}
-        />
-      )}
+      {/* Input or Textarea with validation icons */}
+      <div className="relative">
+        {isTextarea ? (
+          <Textarea
+            id={id}
+            className={cn(
+              "pr-10",
+              error && "border-destructive",
+              isValid && "border-green-500/50"
+            )}
+            maxLength={maxLength}
+            {...textareaProps}
+          />
+        ) : (
+          <Input
+            id={id}
+            type={inputType}
+            className={cn(
+              "pr-10",
+              error && "border-destructive",
+              isValid && "border-green-500/50"
+            )}
+            maxLength={maxLength}
+            {...inputProps}
+          />
+        )}
+        
+        {/* Validation icon */}
+        {(isValid || hasError) && (
+          <div className="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none">
+            {isValid && (
+              <CheckCircle2 className="h-4 w-4 text-green-500" />
+            )}
+            {hasError && (
+              <AlertCircle className="h-4 w-4 text-destructive" />
+            )}
+          </div>
+        )}
+      </div>
       
       {/* Hint text (if not hidden and exists) */}
       {!hideHint && displayHint && !error && (