chore: prettier format

src/components/input/PatternInput.tsx

@@ -1,58 +1,88 @@
 'use client';
 
 import { ChangeEvent } from 'react';
-import { PatternFormat, OnValueChange } from 'react-number-format';
+import {
+  PatternFormat,
+  NumberFormatBase,
+  NumberFormatBaseProps,
+  OnValueChange,
+} from 'react-number-format';
 import TextInput, { TextInputProps } from '@/components/input/TextInput';
 
 interface PatternInputProps extends Omit<TextInputProps, 'type'> {
-  type?: 'password' | 'tel' | 'text' | undefined;
-
-  /** Format pattern, e.g. "##/##/####", "(###) ###-####", "####-####-####" */
+  /**
+   * Format pattern, contoh: "##/##/####", "(###) ###-####", "####-####-####"
+   */
   format: string;
-
-  /** Mask character for empty slots, e.g. "_" */
+  /** Mask karakter kosong, misal "_" */
   mask?: string;
-
-  /** Allow showing mask even when value is empty */
+  /** Menampilkan mask walau value kosong */
   allowEmptyFormatting?: boolean;
-
+  /** Placeholder karakter format, default: "#" */
   patternChar?: string;
+  /** Jika true, izinkan huruf (A-Z) selain angka */
+  inputVehicleNumber?: boolean;
+  type?: 'text' | 'password' | 'tel';
 }
 
+/**
+ * PatternInput – tetap backward-compatible dengan Storybook
+ * tapi bisa menerima huruf jika `allowCharacters={true}`
+ */
 const PatternInput = ({
   type = 'text',
   format,
   mask = '_',
   allowEmptyFormatting = false,
   patternChar = '#',
+  inputVehicleNumber = false,
   onChange,
   ...restProps
 }: PatternInputProps) => {
-  const valueChangeHandler: OnValueChange = (
-    patternFormatValues,
-    sourceInfo
-  ) => {
-    const newChangeEvent = sourceInfo.event as
-      | ChangeEvent<HTMLInputElement>
-      | undefined;
-
-    if (newChangeEvent) {
-      newChangeEvent.target.value = patternFormatValues.value;
-
-      onChange?.(newChangeEvent);
+  const handleValueChange: OnValueChange = (values, { event }) => {
+    const newEvent = event as ChangeEvent<HTMLInputElement> | undefined;
+    if (newEvent) {
+      newEvent.target.value = values.value.toUpperCase();
+      onChange?.(newEvent);
     }
   };
 
+  if (inputVehicleNumber) {
+    return (
+      <NumberFormatBase
+        {...restProps}
+        type={type}
+        customInput={TextInput}
+        format={(value) => {
+          const clean = value.replace(/[^a-z0-9]/gi, '').toUpperCase();
+
+          const match = clean.match(/^([A-Z]{0,2})(\d{0,4})([A-Z]{0,3})$/);
+          if (!match) return clean;
+          const [, prefix, number, suffix] = match;
+          return [prefix, number, suffix].filter(Boolean).join(' ');
+        }}
+        removeFormatting={(val) => val.replace(/\s+/g, '')}
+        isValidInputCharacter={(char) => /^[a-z0-9]$/i.test(char)}
+        getCaretBoundary={(val) =>
+          Array(val.length + 1)
+            .fill(true)
+            .map(Boolean)
+        }
+        onValueChange={handleValueChange}
+      />
+    );
+  }
+
   return (
     <PatternFormat
+      {...restProps}
       type={type}
       format={format}
       mask={mask}
       allowEmptyFormatting={allowEmptyFormatting}
       patternChar={patternChar}
       customInput={TextInput}
-      onValueChange={valueChangeHandler}
-      {...restProps}
+      onValueChange={handleValueChange}
     />
   );
 };

src/components/input/SelectInput.tsx

@@ -1,8 +1,6 @@
 'use client';
 
 import { ComponentType, ReactNode, useEffect, useMemo, useState } from 'react';
-import useSWR from 'swr';
-
 import Select, {
   OptionProps,
   GroupBase,
@@ -16,9 +14,10 @@ import CreatableSelect from 'react-select/creatable';
 import makeAnimated from 'react-select/animated';
 import { useDebounce } from 'use-debounce';
 import { cn, getByPath } from '@/lib/helper';
+import useSWR from 'swr';
 import { httpClientFetcher } from '@/services/http/client';
-import { isResponseSuccess } from '@/lib/api-helper';
 import { BaseApiResponse } from '@/types/api/api-general';
+import { isResponseSuccess } from '@/lib/api-helper';
 
 export interface OptionType {
   value: string | number;
@@ -56,6 +55,7 @@ interface SelectInputBaseProps<T = OptionType> {
   delay?: number;
   onInputChange?: (search: string) => void;
   startAdornment?: ReactNode;
+  menuPortalTarget?: HTMLElement | null;
 }
 
 interface SelectInputProps<T = OptionType> extends SelectInputBaseProps<T> {
@@ -118,6 +118,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
     createables = false,
     onInputChange,
     startAdornment,
+    menuPortalTarget,
   } = props;
 
   const [internalInputValue, setInternalInputValue] = useState('');
@@ -187,7 +188,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
 
       <SelectComponent<T, boolean, GroupBase<T>>
         instanceId='select'
-        value={value ?? (isMulti ? [] : undefined)}
+        value={value ?? (isMulti ? [] : null)}
         onChange={onChange ? handleChange : undefined}
         options={options}
         menuIsOpen={openMenu}
@@ -232,7 +233,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
             cn('border border-gray-200 rounded! bg-base-100 shadow-lg!'),
           menuList: () => cn('p-2! max-h-60 overflow-auto'),
           option: ({ isFocused, isSelected }) =>
-            cn('mt-1 px-3 py-2 rounded cursor-pointer!', {
+            cn('mt-1 px-3 py-2 rounded-md cursor-pointer!', {
               'bg-indigo-600 text-white': isFocused,
               'bg-blue-500!': isSelected,
               'text-gray-700': !isFocused && !isSelected,
@@ -258,7 +259,9 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
           startAdornment,
         })}
         menuPortalTarget={
-          typeof document !== 'undefined' ? document.body : undefined
+          typeof document !== 'undefined'
+            ? (menuPortalTarget ?? document.body)
+            : undefined
         }
         styles={{
           menuPortal: (base) => ({ ...base, zIndex: 9999 }),
@@ -275,8 +278,8 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
 
 const useSelect = <T,>(
   basePath: string,
-  valueKey: keyof T,
-  labelKey: keyof T,
+  valueKey: keyof T | string,
+  labelKey: keyof T | string,
   searchKey: string = 'search',
   params?: { [key: string]: string }
 ) => {
@@ -287,7 +290,7 @@ const useSelect = <T,>(
       [searchKey]: inputValue ?? '',
       ...params,
     }).toString();
-  }, [inputValue, searchKey]);
+  }, [inputValue, searchKey, params]);
 
   const optionsUrl = `${basePath}?${optionsUrlParams}`;