From 498602a2c908df27717dbe3435120b1be7b20a13 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 11 Feb 2026 14:19:52 +0700
Subject: [PATCH] refactor(FE): Refactor input components to use consistent
 color variables

---
 src/components/input/SelectInput.tsx          | 26 ++++++++++---------
 src/components/input/TextInput.tsx            | 17 ++++++------
 .../recording/form/RecordingForm.tsx          |  4 +++
 3 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/src/components/input/SelectInput.tsx b/src/components/input/SelectInput.tsx
index a79054dd..38be09e4 100644
--- a/src/components/input/SelectInput.tsx
+++ b/src/components/input/SelectInput.tsx
@@ -246,8 +246,8 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
               className={cn(
                 'inline-flex items-center px-3 border border-r-0 border-base-content/10 rounded-l-lg transition-all duration-200',
                 {
-                  'bg-gray-100 border-base-content/10': !isDisabled,
-                  'bg-gray-50 border-base-content/10': isDisabled,
+                  'bg-base-100 border-base-content/10': !isDisabled,
+                  'bg-base-200 border-base-content/10': isDisabled,
                   'border-error': isError,
                 },
                 className?.inputPrefix
@@ -278,15 +278,16 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
             className={cn('w-full flex-1', className?.select)}
             classNames={{
               control: ({ isFocused, isDisabled }) =>
-                cn('w-full border bg-white transition-shadow', 'rounded-lg!', {
+                cn('w-full border transition-shadow', 'rounded-lg!', {
+                  'bg-base-100!': !isDisabled && !readOnly,
+                  'bg-base-200! text-gray-400 cursor-not-allowed':
+                    isDisabled && !readOnly,
+                  'bg-transparent! cursor-not-allowed!': readOnly,
                   'cursor-pointer!': !readOnly && !isDisabled,
                   'border-red-500! ring-2 ring-red-200': isError,
                   'border-indigo-500 ring-2 ring-indigo-200':
                     isFocused && !startAdornment,
                   'border-base-content/10!': !isError && !isFocused,
-                  'bg-gray-100 text-gray-400 cursor-not-allowed':
-                    isDisabled && !readOnly,
-                  'bg-transparent! cursor-not-allowed!': readOnly,
                   'rounded-l-none!': inputPrefix && !startAdornment,
                   'rounded-r-none!': inputSuffix && !startAdornment,
                 }),
@@ -370,8 +371,8 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
               className={cn(
                 'inline-flex items-center px-3 border border-l-0 border-base-content/10 rounded-r-lg transition-all duration-200',
                 {
-                  'bg-gray-100 border-base-content/10': !isDisabled,
-                  'bg-gray-50 border-base-content/10': isDisabled,
+                  'bg-base-100 border-base-content/10': !isDisabled,
+                  'bg-base-200 border-base-content/10': isDisabled,
                   'border-error': isError,
                 },
                 className?.inputSuffix
@@ -404,18 +405,19 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
           classNames={{
             control: ({ isFocused, isDisabled }) =>
               cn(
-                'w-full border bg-white transition-shadow',
+                'w-full border transition-shadow',
                 // Gunakan rounded-lg untuk semua kasus
                 'rounded-lg!',
                 {
+                  'bg-base-100!': !isDisabled && !readOnly,
+                  'bg-base-200! text-gray-400 cursor-not-allowed':
+                    isDisabled && !readOnly,
+                  'bg-transparent! cursor-not-allowed!': readOnly,
                   'cursor-pointer!': !readOnly && !isDisabled,
                   'border-red-500! ring-2 ring-red-200': isError,
                   'border-indigo-500 ring-2 ring-indigo-200':
                     isFocused && !startAdornment,
                   'border-base-content/10!': !isError && !isFocused,
-                  'bg-gray-100 text-gray-400 cursor-not-allowed':
-                    isDisabled && !readOnly,
-                  'bg-transparent! cursor-not-allowed!': readOnly,
                 }
               ),
             valueContainer: () => cn('flex-1 px-3! pr-2! py-2.5! gap-1'),
diff --git a/src/components/input/TextInput.tsx b/src/components/input/TextInput.tsx
index 39c5b54a..b7d0984f 100644
--- a/src/components/input/TextInput.tsx
+++ b/src/components/input/TextInput.tsx
@@ -104,8 +104,8 @@ const TextInput = ({
               className={cn(
                 'inline-flex items-center px-3 border border-r-0 border-base-content/10 rounded-l-lg transition-all duration-200',
                 {
-                  'bg-gray-100 border-base-content/10': !disabled,
-                  'bg-gray-50 border-base-content/10': disabled,
+                  'bg-base-100 border-base-content/10': !disabled,
+                  'bg-base-200 border-base-content/10': disabled,
                   'border-error': isError,
                   'border-success!': isValid,
                 },
@@ -118,7 +118,7 @@ const TextInput = ({
 
           <div
             className={cn(
-              'input h-fit px-3 py-2.5 gap-1.5 text-sm font-normal leading-6 flex-1 rounded-lg! outline-none! transition-all duration-200 flex items-center bg-white border-base-content/10',
+              'input h-fit px-3 py-2.5 gap-1.5 text-sm font-normal leading-6 flex-1 rounded-lg! outline-none! transition-all duration-200 flex items-center border-base-content/10',
               {
                 'border-error': isError,
                 'border-success!': isValid,
@@ -126,7 +126,8 @@ const TextInput = ({
                 'rounded-r-none!': inputSuffix,
                 'input-disabled': disabled,
                 'cursor-not-allowed': disabled,
-                'bg-gray-50': disabled,
+                'bg-base-100': !disabled,
+                'bg-base-200': disabled,
               },
               className?.inputWrapper
             )}
@@ -167,8 +168,8 @@ const TextInput = ({
               className={cn(
                 'inline-flex items-center px-3 border border-l-0 border-base-content/10 rounded-r-lg transition-all duration-200',
                 {
-                  'bg-gray-100 border-base-content/10': !disabled,
-                  'bg-gray-50 border-base-content/10': disabled,
+                  'bg-base-100 border-base-content/10': !disabled,
+                  'bg-base-200 border-base-content/10': disabled,
                   'border-error': isError,
                   'border-success!': isValid,
                 },
@@ -186,8 +187,8 @@ const TextInput = ({
             {
               'border-error': isError,
               'border-success!': isValid,
-              'bg-white': !disabled,
-              'bg-base-content/5': disabled,
+              'bg-base-100': !disabled,
+              'bg-base-200': disabled,
             },
             className?.inputWrapper
           )}
diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index 6d1c290d..7ea58f0f 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -2469,6 +2469,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                   )
                                 : null
                             }
+                            disabled={type === 'detail'}
                           />
                           {getStockUsageAdornment(idx)}
                         </div>
@@ -2675,6 +2676,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                   )
                                 : null
                             }
+                            disabled={type === 'detail'}
                           />
                         </td>
                         {(type as 'add' | 'edit' | 'detail') !== 'detail' && (
@@ -2891,6 +2893,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                 }}
                                 placeholder='Masukkan jumlah telur'
                                 inputSuffix={'Butir'}
+                                disabled={type === 'detail'}
                               />
                             </td>
                             <td>
@@ -2917,6 +2920,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                 }}
                                 placeholder='Masukkan total berat telur (Kilogram)...'
                                 inputSuffix='Kilogram'
+                                disabled={type === 'detail'}
                               />
                             </td>
                             {(type as 'add' | 'edit' | 'detail') !==