Merge branch 'development' into feat/FE/US-163/TASK-188-193-198-slicing-expense-request-form

2026-05-21 22:05:45 +00:00 · 2025-11-14 13:41:47 +07:00
parent 6ffb6e1560 c6f881c78d
commit 1ee0454e6b
58 changed files with 4673 additions and 875 deletions
@@ -0,0 +1,90 @@
+'use client';
+
+import { ChangeEvent } from 'react';
+import {
+  PatternFormat,
+  NumberFormatBase,
+  NumberFormatBaseProps,
+  OnValueChange,
+} from 'react-number-format';
+import TextInput, { TextInputProps } from '@/components/input/TextInput';
+
+interface PatternInputProps extends Omit<TextInputProps, 'type'> {
+  /**
+   * Format pattern, contoh: "##/##/####", "(###) ###-####", "####-####-####"
+   */
+  format: string;
+  /** Mask karakter kosong, misal "_" */
+  mask?: string;
+  /** 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 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={handleValueChange}
+    />
+  );
+};
+
+export default PatternInput;
@@ -1,22 +1,23 @@
 'use client';

 import { ComponentType, ReactNode, useEffect, useMemo, useState } from 'react';
-import useSWR from 'swr';
-
 import Select, {
  OptionProps,
  GroupBase,
  InputActionMeta,
  MultiValue,
  SingleValue,
+  components as ReactSelectComponents,
+  ControlProps,
 } from 'react-select';
 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;
@@ -53,6 +54,8 @@ interface SelectInputBaseProps<T = OptionType> {
  openMenu?: boolean;
  delay?: number;
  onInputChange?: (search: string) => void;
+  startAdornment?: ReactNode;
+  menuPortalTarget?: HTMLElement | null;
 }

 interface SelectInputProps<T = OptionType> extends SelectInputBaseProps<T> {
@@ -63,6 +66,33 @@ interface SelectInputProps<T = OptionType> extends SelectInputBaseProps<T> {

 const animatedComponents = makeAnimated();

+const CustomControl = <
+  Option,
+  IsMulti extends boolean,
+  Group extends GroupBase<Option>,
+>(
+  props: ControlProps<Option, IsMulti, Group>
+) => {
+  const { children } = props;
+
+  const customProps = props.selectProps as unknown as {
+    shouldShowAdornment?: boolean;
+    startAdornment?: ReactNode;
+  };
+
+  const shouldShowAdornment = customProps.shouldShowAdornment ?? false;
+  const startAdornment = customProps.startAdornment;
+
+  return (
+    <ReactSelectComponents.Control {...props}>
+      <div className='flex-1 px-4! py-1.5 gap-1 flex items-center'>
+        {shouldShowAdornment && startAdornment}
+        {children}
+      </div>
+    </ReactSelectComponents.Control>
+  );
+};
+
 const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
  const {
    label,
@@ -87,15 +117,25 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
    delay = 300,
    createables = false,
    onInputChange,
+    startAdornment,
+    menuPortalTarget,
  } = props;

  const [internalInputValue, setInternalInputValue] = useState('');
  const [debouncedInputValue] = useDebounce(internalInputValue, delay);

+  const shouldShowAdornment = startAdornment && !internalInputValue;
+
  const components = useMemo(() => {
    const base = isAnimated ? animatedComponents : {};
-    return { ...base, IndicatorSeparator: () => null };
-  }, [isAnimated]);
+    const customComponents = { ...base, IndicatorSeparator: () => null };
+
+    if (startAdornment) {
+      customComponents.Control = CustomControl;
+    }
+
+    return customComponents;
+  }, [isAnimated, startAdornment]);

  const internalInputChangeHandler = (val: string, meta: InputActionMeta) => {
    if (meta.action === 'input-change') setInternalInputValue(val);
@@ -152,11 +192,12 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
      <SelectComponent<T, boolean, GroupBase<T>>
        instanceId='select'
        value={value ?? (isMulti ? [] : null)}
-        onChange={handleChange}
+        onChange={onChange ? handleChange : undefined}
        options={options}
        menuIsOpen={openMenu}
        inputValue={internalInputValue}
        onInputChange={internalInputChangeHandler}
+        onMenuClose={() => setInternalInputValue('')}
        isMulti={isMulti}
        isDisabled={isDisabled}
        isLoading={isLoading}
@@ -166,17 +207,19 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
        placeholder={placeholder}
        className={cn('w-full', className?.select)}
        classNames={{
-          control: ({ isFocused, isDisabled }) =>
-            cn(
-              'w-full min-h-12! rounded border bg-white transition-shadow cursor-pointer!',
-              {
-                'border-red-500! ring-2 ring-red-200': isError,
-                'border-indigo-500 ring-2 ring-indigo-200': isFocused,
-                'border-gray-300': !isError && !isFocused,
-                'bg-gray-100 text-gray-400 cursor-not-allowed': isDisabled,
-              }
-            ),
-          valueContainer: () => cn('flex-1 px-4! py-2! gap-1'),
+          ...(!startAdornment && {
+            control: ({ isFocused, isDisabled }) =>
+              cn(
+                'w-full min-h-12! rounded border bg-white transition-shadow cursor-pointer!',
+                {
+                  'border-red-500! ring-2 ring-red-200': isError,
+                  'border-indigo-500 ring-2 ring-indigo-200': isFocused,
+                  'border-gray-300': !isError && !isFocused,
+                  'bg-gray-100 text-gray-400 cursor-not-allowed': isDisabled,
+                }
+              ),
+            valueContainer: () => cn('flex-1 px-4! py-2! gap-1'),
+          }),
          placeholder: () =>
            cn({ 'text-gray-400': !isError, 'text-red-300!': isError }),
          singleValue: () =>
@@ -193,7 +236,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,
@@ -214,8 +257,14 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
          ...components,
          ...(optionComponent ? { Option: optionComponent } : {}),
        }}
+        {...(startAdornment && {
+          shouldShowAdornment,
+          startAdornment,
+        })}
        menuPortalTarget={
-          typeof document !== 'undefined' ? document.body : undefined
+          typeof document !== 'undefined'
+            ? (menuPortalTarget ?? document.body)
+            : undefined
        }
        styles={{
          menuPortal: (base) => ({ ...base, zIndex: 9999 }),
@@ -244,7 +293,7 @@ const useSelect = <T,>(
      [searchKey]: inputValue ?? '',
      ...params,
    }).toString();
-  }, [inputValue, searchKey]);
+  }, [inputValue, searchKey, params]);

  const optionsUrl = `${basePath}?${optionsUrlParams}`;