Update custome translations to i18n and various improvements

src/components/ui/form-numeric-input.tsx

@@ -25,8 +25,10 @@ interface NumericInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
   allowEmpty?: boolean
   clearButton?: boolean
   error?: boolean
+  warning?: boolean
   required?: boolean
   errorMessage?: string
+  warningMessage?: string
 }
 
 const FormNumericInput = React.forwardRef<HTMLInputElement, NumericInputProps>(
@@ -41,18 +43,22 @@ const FormNumericInput = React.forwardRef<HTMLInputElement, NumericInputProps>(
     allowEmpty = false,
     clearButton = false,
     error = false,
+    warning = false,
     required = false,
-    errorMessage = 'This field is required',
+    errorMessage = 'Time is required',
+    warningMessage,
     className,
     ...props
   }, ref) => {
     const [showError, setShowError] = React.useState(false)
+    const [showWarning, setShowWarning] = React.useState(false)
     const [touched, setTouched] = React.useState(false)
     const containerRef = React.useRef<HTMLDivElement>(null)
 
     // Check if value is invalid (check validity regardless of touch state)
     const isInvalid = required && !allowEmpty && (value === '' || value === null || value === undefined)
     const hasError = error || isInvalid
+    const hasWarning = warning && !hasError
 
     // Check validity on mount and when value changes
     React.useEffect(() => {
@@ -123,6 +129,7 @@ const FormNumericInput = React.forwardRef<HTMLInputElement, NumericInputProps>(
 
     const handleFocus = () => {
       setShowError(hasError)
+      setShowWarning(hasWarning)
     }
 
     const getAlignmentClass = () => {
@@ -197,11 +204,16 @@ const FormNumericInput = React.forwardRef<HTMLInputElement, NumericInputProps>(
           )}
         </div>
         {unit && <span className="text-sm text-muted-foreground whitespace-nowrap">{unit}</span>}
-        {hasError && showError && (
+        {hasError && showError && errorMessage && (
           <div className="absolute top-full left-0 mt-1 z-50 w-64 bg-destructive text-destructive-foreground text-xs p-2 rounded-md shadow-lg">
             {errorMessage}
           </div>
         )}
+        {hasWarning && showWarning && warningMessage && (
+          <div className="absolute top-full left-0 mt-1 z-50 w-48 bg-yellow-500 text-yellow-950 text-xs p-2 rounded-md shadow-lg">
+            {warningMessage}
+          </div>
+        )}
       </div>
     )
   }