fix(FE-42): fix validation supplier form and multi select component

2026-05-21 13:55:45 +00:00 · 2025-10-13 11:26:37 +07:00
parent 9b53c75f2f f662f2951e
commit 880ff5740d
12 changed files with 995 additions and 2 deletions
@@ -0,0 +1,113 @@
+'use client';
+
+import { ChangeEventHandler, ReactNode } from 'react';
+import { cn } from '@/lib/helper';
+
+export interface RadioOption {
+  label: string;
+  value: string;
+}
+
+export interface RadioInputProps {
+  label?: string;
+  bottomLabel?: string;
+  name: string;
+  value?: string;
+  options: RadioOption[];
+  variant?: string;
+  className?: {
+    wrapper?: string;
+    label?: string;
+    radioWrapper?: string;
+    radio?: string;
+  };
+  isError?: boolean;
+  isValid?: boolean;
+  errorMessage?: string;
+  required?: boolean;
+  disabled?: boolean;
+  startAdornment?: ReactNode;
+  endAdornment?: ReactNode;
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+}
+
+const RadioInput = ({
+  label,
+  bottomLabel,
+  name,
+  value,
+  options,
+  variant = 'radio-primary',
+  className,
+  isError,
+  errorMessage,
+  required = false,
+  disabled = false,
+  onChange,
+  onBlur,
+}: RadioInputProps) => {
+  return (
+    <div className={cn('w-full flex flex-col gap-2', className?.wrapper)}>
+      {/* Label atas */}
+      {label && (
+        <label
+          className={cn(
+            'w-full text-sm font-normal leading-5',
+            { 'text-error': isError },
+            className?.label
+          )}
+        >
+          {label}
+          {required && (
+            <span className='text-error ml-1' title='required'>
+              *
+            </span>
+          )}
+        </label>
+      )}
+
+      {/* Daftar opsi radio */}
+      <div
+        className={cn(
+          'flex flex-row flex-wrap gap-4 items-center',
+          className?.radioWrapper
+        )}
+      >
+        {options.map((option) => (
+          <label
+            key={option.value}
+            className={cn(
+              'flex flex-row items-center gap-2 cursor-pointer',
+              disabled && 'opacity-60 cursor-not-allowed'
+            )}
+          >
+            <input
+              type='radio'
+              name={name}
+              value={option.value}
+              checked={value === option.value}
+              onChange={onChange}
+              onBlur={onBlur}
+              disabled={disabled}
+              className={cn('radio', variant, className?.radio)}
+            />
+            <span className='text-sm'>{option.label}</span>
+          </label>
+        ))}
+      </div>
+
+      {/* Label bawah */}
+      {!isError && bottomLabel && (
+        <p className='text-sm opacity-60'>{bottomLabel}</p>
+      )}
+
+      {/* Pesan error */}
+      {isError && errorMessage && (
+        <p className='text-sm text-error'>{errorMessage}</p>
+      )}
+    </div>
+  );
+};
+
+export default RadioInput;