@skalfa/skalfa-app 1.0.0 → 1.0.2

package/components/base.components/supervision/FormSupervision.component.tsx

@@ -1,434 +1,434 @@
-"use client"
-
-import React, { ReactNode, useEffect, useRef, useState } from "react";
-import { faSave, faQuestionCircle, faPlus, faTimes } from "@fortawesome/free-solid-svg-icons";
-import { ApiType, cn, pcn, FormErrorType, FormRegisterType, FormValueType, useForm, ValidationRules, DBSchema } from "@utils";
-import {
-  InputCheckboxComponent,
-  InputComponent,
-  InputCurrencyComponent,
-  InputDateComponent,
-  InputNumberComponent,
-  InputOtpComponent,
-  InputPasswordComponent,
-  InputRadioComponent,
-  SelectComponent,
-  ButtonComponent,
-  ModalConfirmComponent,
-  ToastComponent,
-  InputProps,
-  InputCheckboxProps,
-  InputCurrencyProps,
-  InputDateProps,
-  InputNumberProps,
-  InputRadioProps,
-  SelectProps,
-  InputPasswordProps,
-  InputOtpProps,
-  InputTimeProps,
-  InputImageProps,
-  InputDateTimeProps,
-  InputDatetimeComponent,
-  InputTimeComponent,
-  IconButtonComponent,
-  InputImageComponent,
-  InputMapComponent,
-  InputMapProps,
-} from "@components";
-
-
-
-type CT = "base" | "title" | "submit";
-
-type formCustomConstructionProps = ({
-  formControl,
-  values,
-  setValues,
-  setRegister,
-  errors,
-  setErrors,
-}: {
-  formControl  :  (name: string) => {
-    register: (regName: string, regValidations?: ValidationRules | undefined) => void;
-    unregister: (regName: string) => void;
-    onChange: (e: any) => void;
-    value: any;
-    invalid: any;
-  };
-  values       :  { name: string; value?: any }[];
-  setValues    :  (values: FormValueType[]) => void;
-  errors       :  FormErrorType[];
-  setErrors    :  (errors: FormErrorType[]) => void;
-  setRegister  :  (registers: FormRegisterType) => void;
-  prefixName  ?:  string;
-}) => ReactNode;
-
-type ClusterConstruction = {
-  name    :  string;
-  label   :  string;
-  tip     :  string;
-  fields  :  FormType[];
-  wrap    :  boolean;
-  min     ?:  number;
-
-  /** Use custom class with: "label::", "tip::", "error::", "icon::", "suggest::", "suggest-item::". */
-  className  :  string;
-};
-
-type ConstructionMap = {
-  default           :  InputProps;
-  check             :  InputCheckboxProps;
-  currency          :  InputCurrencyProps;
-  date              :  InputDateProps;
-  datetime          :  InputDateTimeProps;
-  time              :  InputTimeProps;
-  image             :  InputImageProps;
-  cluster           :  ClusterConstruction;
-  number            :  InputNumberProps;
-  radio             :  InputRadioProps;
-  select            :  SelectProps;
-  "enter-password"  :  InputPasswordProps;
-  otp               :  InputOtpProps;
-  map               :  InputMapProps;
-  custom            :  formCustomConstructionProps;
-};
-
-type TypeKeys = keyof ConstructionMap;
-
-export type WatchContext = {
-  values  : Record<string, any>
-  self    : string
-  prev    : WatchAction
-}
-
-export type WatchAction = {
-  disabled  ?: boolean
-  hidden    ?: boolean
-  value     ?: any
-  required  ?: boolean
-  readonly  ?: boolean
-  reset     ?: boolean
-}
-
-export interface FormType<T extends TypeKeys = keyof ConstructionMap> {
-  col           ?:  1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | string;
-  className     ?:  string;
-  construction  ?:  ConstructionMap[T];
-  type          ?:  T;
-  onHide        ?:  (values: any) => boolean;
-  watch         ?:  (ctx: WatchContext) => WatchAction | undefined;
-}
-
-export interface formSupervisionProps {
-  title          ?:  string;
-  fields          :  FormType[];
-  confirmation   ?:  boolean;
-  defaultValue   ?:  object | null;
-  payload        ?:  (values: any) => Promise<object> | object;
-  submitControl   :  (ApiType & { idb?: never }) | { idb: { store: string, schema?: DBSchema }};
-  footerControl  ?:  ({ loading }: { loading: boolean }) => ReactNode;
-  onSuccess      ?:  (data: any) => void;
-  onError        ?:  (code: number) => void;
-  className      ?:  string;
-}
-
-
-
-export function FormSupervisionComponent({
-  title,
-  fields,
-  submitControl,
-  confirmation,
-  defaultValue,
-  onSuccess,
-  onError,
-  footerControl,
-  payload,
-  className = "",
-}: formSupervisionProps) {
-  const [modal, setModal]          =  useState<boolean | "success" | "failed">(false);
-  const [fresh, setFresh]          =  useState<boolean>(true);
-  const [mapGroups, setMapGroups]    =  useState<Record<string, number[]>>({});
-  const [watchState, setWatchState]  =  useState<Record<string, WatchAction>>({});
-  const watchRef                     =  useRef<Record<string, WatchAction>>({});
-
-  const { formControl, setRegister, unregister, unregisterPrefix, values, setValues, errors, setErrors, setDefaultValues, submit, loading, confirm } = useForm({
-    ...submitControl,
-    payload,
-    confirmation,
-    onSuccess: (data: any) => {
-      onSuccess?.(data);
-      setModal("success");
-      resetFresh();
-    },
-    onFailed: (code: number) => {
-      onError?.(code);
-      if (code == 422) confirm.onClose();
-      else setModal("failed");
-    },
-  });
-
-  const resetFresh = () => {
-    setFresh(false);
-    setTimeout(() => setFresh(true), 300);
-  };
-
-  useEffect(() => {
-    resetFresh();
-  }, [fields]);
-
-  useEffect(() => {
-    if (defaultValue) setDefaultValues(defaultValue);
-    else {
-      setDefaultValues(null);
-      resetFresh();
-    }
-  }, [defaultValue]);
-
-  // ==============================>
-  // ## Watch: collect watchers from fields
-  // ==============================>
-  const collectWatchers = (fieldList: FormType[], prefix?: string): { name: string, watch: NonNullable<FormType['watch']>, construction: any }[] => {
-    const result: { name: string, watch: NonNullable<FormType['watch']>, construction: any }[] = [];
-
-    for (const f of fieldList) {
-      const inputType = f.type || "default";
-      const name      = prefix ? `${prefix}.${f.construction?.name}` : f.construction?.name || "";
-
-      if (inputType === "cluster") {
-        const cluster   = f.construction as ClusterConstruction;
-        const groupKey  = prefix ? `${prefix}.${cluster.name}` : cluster.name;
-        const group     = mapGroups[groupKey] || [0];
-
-        for (const gIndex of group) {
-          result.push(...collectWatchers(cluster.fields, `${cluster.name}[${gIndex}]`));
-        }
-      } else if (f.watch) {
-        result.push({ name, watch: f.watch, construction: f.construction });
-      }
-    }
-
-    return result;
-  };
-
-
-  // ==============================>
-  // ## Watch: execute watchers on value change
-  // ==============================>
-  useEffect(() => {
-    const watchers = collectWatchers(fields);
-    if (watchers.length === 0) {
-      if (Object.keys(watchRef.current).length > 0) {
-        watchRef.current = {};
-        setWatchState({});
-      }
-      return;
-    }
-
-    const valMap = values.reduce<Record<string, any>>((acc, v) => { acc[v.name] = v.value; return acc; }, {});
-
-    const nextState    : Record<string, WatchAction> = {};
-    const valueUpdates : FormValueType[] = [];
-
-    for (const { name, watch, construction } of watchers) {
-      const prev   = watchRef.current[name] || {};
-      const action = watch({ values: valMap, self: name, prev });
-
-      if (!action) continue;
-
-      nextState[name] = action;
-
-      if (action.hidden && !prev.hidden) unregister(name);
-
-      if (action.required !== prev.required) {
-        const baseValidations = Array.isArray(construction?.validations) ? [...construction.validations] : [];
-        const newValidations  = action.required ? (baseValidations.includes("required") ? baseValidations : [...baseValidations, "required"]) : baseValidations.filter((v: string) => v !== "required");
-
-        setRegister({ name, validations: newValidations });
-      }
-
-      if (action.reset) {
-        const cur = valMap[name];
-
-        if (cur != null && cur !== "") valueUpdates.push({ name, value: "" });
-      } else if (action.value !== undefined && action.value !== valMap[name]) {
-        valueUpdates.push({ name, value: action.value });
-      }
-    }
-
-    if (JSON.stringify(watchRef.current) !== JSON.stringify(nextState)) {
-      watchRef.current = nextState;
-      setWatchState(nextState);
-    }
-
-    if (valueUpdates.length > 0) {
-      const merged = [...values];
-
-      for (const upd of valueUpdates) {
-        const idx = merged.findIndex(v => v.name === upd.name);
-        if (idx >= 0) merged[idx] = upd;
-        else merged.push(upd);
-      }
-
-      setValues(merged);
-    }
-  }, [values, fields, mapGroups]);
-
-
-  const generateColClass = (col: string | number) => String(col).split(" ").map((c) => (c.includes(":") ? `${c.replace(":", ":col-span-")}` : `col-span-${c}`)).join(" ");
-
-  const inputMap: Record<TypeKeys, React.FC<any>> = {
-    default           :  InputComponent,
-    check             :  InputCheckboxComponent,
-    currency          :  InputCurrencyComponent,
-    date              :  InputDateComponent,
-    datetime          :  InputDatetimeComponent,
-    time              :  InputTimeComponent,
-    number            :  InputNumberComponent,
-    radio             :  InputRadioComponent,
-    select            :  SelectComponent,
-    "enter-password"  :  InputPasswordComponent,
-    otp               :  InputOtpComponent,
-    image             :  InputImageComponent,
-    map               :  InputMapComponent,
-    cluster           :  () => null,
-    custom            :  () => null,
-  };
-
-  const renderInput = (form: FormType, key: number, prefix?: string) => {
-    const inputType = form.type || "default";
-    const name = prefix ? `${prefix}.${form.construction?.name}` : form.construction?.name || "input_name";
-
-    if (form?.onHide?.(values)) return null;
-
-    const ws = watchState[name];
-    if (ws?.hidden) return null;
-
-    if (inputType === "cluster") {
-      const { name: mapName, fields: innerForms, label, tip, wrap, className, min = 0 } = form.construction as ClusterConstruction;
-
-      const groupKey = prefix ? `${prefix}.${mapName}` : mapName;
-      const group = mapGroups[groupKey] || Array.from({ length: Math.max(min, 1) }, (_, i) => i);
-
-      const addGroup = () => setMapGroups((prev) => ({ ...prev, [groupKey]: [...group, group.length > 0 ? Math.max(...group) + 1 : 0] }));
-
-      const removeGroup = (gIndex: number) => {
-        setMapGroups((prev) => ({ ...prev, [groupKey]: group.filter((g) => g !== gIndex) }));
-
-        unregisterPrefix(`${groupKey}[${gIndex}]`);
-      };
-
-      return (
-        <div key={key} className={cn("flex flex-col gap-4", generateColClass(form.col || "12"))}>
-          {group.map((gIndex) => (
-            <div key={gIndex} className={cn("relative pr-8", wrap && "p-4 rounded border", className)}>
-              {label && <p className="input-label">{label} {gIndex + 1}</p>}
-              {tip && <small className={cn("input-tip")}>{tip}</small>}
-              {(label || tip) && <div className="mb-2"></div>}
-
-              <div className="w-full grid grid-cols-12 gap-4">
-                {innerForms.map((inner, i) => renderInput(inner, i, `${mapName}[${gIndex}]`))}
-              </div>
-
-              {group.length > min && (
-                <IconButtonComponent
-                  icon={faTimes}
-                  paint="danger"
-                  variant="outline"
-                  size="xs"
-                  className={cn("absolute top-10 right-2 translate-x-[50%] -translate-y-[50%]", wrap && "translate-x-0 -translate-y-0 top-1 right-1")}
-                  onClick={() => removeGroup(gIndex)}
-                />
-              )}
-            </div>
-          ))}
-
-          <div>
-            <ButtonComponent
-              icon={faPlus}
-              label={`Tambah ${label || mapName}`}
-              variant="outline"
-              size="sm"
-              onClick={addGroup}
-            />
-          </div>
-        </div>
-      );
-    }
-
-    if (inputType === "custom") {
-      const customRender = form.construction as formCustomConstructionProps;
-      return (
-        <div key={key} className={cn(form.className, generateColClass(form.col || "12"))}>
-          {customRender?.({ formControl, values, setValues, errors, setErrors, setRegister, prefixName: prefix })}
-        </div>
-      );
-    }
-
-    const Component = inputMap[inputType] || InputComponent;
-    return (
-      <div key={key} className={cn(form.className, generateColClass(form.col || "12"))}>
-        <Component
-          {...(form.construction as any)}
-          {...formControl(name)}
-          disabled={ws?.disabled}
-          readOnly={ws?.readonly}
-        />
-      </div>
-    );
-  };
-
-  return (
-    <>
-      {title && <h4 className={cn("text-lg font-semibold mb-4", pcn<CT>(className, "title"))}>{title}</h4>}
-
-      <form className={cn("grid grid-cols-12 gap-4", pcn<CT>(className, "base"))} onSubmit={submit}>
-        {fresh && fields.map((f, i) => renderInput(f, i))}
-
-        <div className="col-span-12">
-          {footerControl?.({ loading }) || (
-            <div className="flex justify-end mt-4">
-              <ButtonComponent
-                type="submit"
-                label="Simpan"
-                icon={faSave}
-                loading={loading}
-                className={pcn<CT>(className, "submit")}
-              />
-            </div>
-          )}
-        </div>
-      </form>
-
-      <ModalConfirmComponent
-        show={confirm.show}
-        onClose={() => confirm.onClose()}
-        icon={faQuestionCircle}
-        title="Yakin"
-        submitControl={{ onSubmit: () => confirm?.onConfirm(), paint: "primary" }}
-      >
-        <p className="px-2 pb-2 text-sm text-center">Yakin semua data sudah benar?</p>
-      </ModalConfirmComponent>
-
-      <ToastComponent
-        show={modal == "failed"}
-        onClose={() => setModal(false)}
-        title="Gagal"
-        className="!border-danger header::text-danger"
-      >
-        <p className="px-3 pb-2 text-sm">
-          Data gagal disimpan, cek data dan koneksi internet lalu coba kembali!
-        </p>
-      </ToastComponent>
-
-      <ToastComponent
-        show={modal == "success"}
-        onClose={() => setModal(false)}
-        title="Berhasil"
-        className="!border-success header::text-success"
-      >
-        <p className="px-3 pb-2 text-sm">Data berhasil disimpan!</p>
-      </ToastComponent>
-    </>
-  );
+"use client"
+
+import React, { ReactNode, useEffect, useRef, useState } from "react";
+import { faSave, faQuestionCircle, faPlus, faTimes } from "@fortawesome/free-solid-svg-icons";
+import { ApiType, cn, pcn, FormErrorType, FormRegisterType, FormValueType, useForm, ValidationRules, DBSchema } from "@utils";
+import {
+  InputCheckboxComponent,
+  InputComponent,
+  InputCurrencyComponent,
+  InputDateComponent,
+  InputNumberComponent,
+  InputOtpComponent,
+  InputPasswordComponent,
+  InputRadioComponent,
+  SelectComponent,
+  ButtonComponent,
+  ModalConfirmComponent,
+  ToastComponent,
+  InputProps,
+  InputCheckboxProps,
+  InputCurrencyProps,
+  InputDateProps,
+  InputNumberProps,
+  InputRadioProps,
+  SelectProps,
+  InputPasswordProps,
+  InputOtpProps,
+  InputTimeProps,
+  InputImageProps,
+  InputDateTimeProps,
+  InputDatetimeComponent,
+  InputTimeComponent,
+  IconButtonComponent,
+  InputImageComponent,
+  InputMapComponent,
+  InputMapProps,
+} from "@components";
+
+
+
+type CT = "base" | "title" | "submit";
+
+type formCustomConstructionProps = ({
+  formControl,
+  values,
+  setValues,
+  setRegister,
+  errors,
+  setErrors,
+}: {
+  formControl  :  (name: string) => {
+    register: (regName: string, regValidations?: ValidationRules | undefined) => void;
+    unregister: (regName: string) => void;
+    onChange: (e: any) => void;
+    value: any;
+    invalid: any;
+  };
+  values       :  { name: string; value?: any }[];
+  setValues    :  (values: FormValueType[]) => void;
+  errors       :  FormErrorType[];
+  setErrors    :  (errors: FormErrorType[]) => void;
+  setRegister  :  (registers: FormRegisterType) => void;
+  prefixName  ?:  string;
+}) => ReactNode;
+
+type ClusterConstruction = {
+  name    :  string;
+  label   :  string;
+  tip     :  string;
+  fields  :  FormType[];
+  wrap    :  boolean;
+  min     ?:  number;
+
+  /** Use custom class with: "label::", "tip::", "error::", "icon::", "suggest::", "suggest-item::". */
+  className  :  string;
+};
+
+type ConstructionMap = {
+  default           :  InputProps;
+  check             :  InputCheckboxProps;
+  currency          :  InputCurrencyProps;
+  date              :  InputDateProps;
+  datetime          :  InputDateTimeProps;
+  time              :  InputTimeProps;
+  image             :  InputImageProps;
+  cluster           :  ClusterConstruction;
+  number            :  InputNumberProps;
+  radio             :  InputRadioProps;
+  select            :  SelectProps;
+  "enter-password"  :  InputPasswordProps;
+  otp               :  InputOtpProps;
+  map               :  InputMapProps;
+  custom            :  formCustomConstructionProps;
+};
+
+type TypeKeys = keyof ConstructionMap;
+
+export type WatchContext = {
+  values  : Record<string, any>
+  self    : string
+  prev    : WatchAction
+}
+
+export type WatchAction = {
+  disabled  ?: boolean
+  hidden    ?: boolean
+  value     ?: any
+  required  ?: boolean
+  readonly  ?: boolean
+  reset     ?: boolean
+}
+
+export interface FormType<T extends TypeKeys = keyof ConstructionMap> {
+  col           ?:  1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | string;
+  className     ?:  string;
+  construction  ?:  ConstructionMap[T];
+  type          ?:  T;
+  onHide        ?:  (values: any) => boolean;
+  watch         ?:  (ctx: WatchContext) => WatchAction | undefined;
+}
+
+export interface formSupervisionProps {
+  title          ?:  string;
+  fields          :  FormType[];
+  confirmation   ?:  boolean;
+  defaultValue   ?:  object | null;
+  payload        ?:  (values: any) => Promise<object> | object;
+  submitControl   :  (ApiType & { idb?: never }) | { idb: { store: string, schema?: DBSchema }};
+  footerControl  ?:  ({ loading }: { loading: boolean }) => ReactNode;
+  onSuccess      ?:  (data: any) => void;
+  onError        ?:  (code: number) => void;
+  className      ?:  string;
+}
+
+
+
+export function FormSupervisionComponent({
+  title,
+  fields,
+  submitControl,
+  confirmation,
+  defaultValue,
+  onSuccess,
+  onError,
+  footerControl,
+  payload,
+  className = "",
+}: formSupervisionProps) {
+  const [modal, setModal]          =  useState<boolean | "success" | "failed">(false);
+  const [fresh, setFresh]          =  useState<boolean>(true);
+  const [mapGroups, setMapGroups]    =  useState<Record<string, number[]>>({});
+  const [watchState, setWatchState]  =  useState<Record<string, WatchAction>>({});
+  const watchRef                     =  useRef<Record<string, WatchAction>>({});
+
+  const { formControl, setRegister, unregister, unregisterPrefix, values, setValues, errors, setErrors, setDefaultValues, submit, loading, confirm } = useForm({
+    ...submitControl,
+    payload,
+    confirmation,
+    onSuccess: (data: any) => {
+      onSuccess?.(data);
+      setModal("success");
+      resetFresh();
+    },
+    onFailed: (code: number) => {
+      onError?.(code);
+      if (code == 422) confirm.onClose();
+      else setModal("failed");
+    },
+  });
+
+  const resetFresh = () => {
+    setFresh(false);
+    setTimeout(() => setFresh(true), 300);
+  };
+
+  useEffect(() => {
+    resetFresh();
+  }, [fields]);
+
+  useEffect(() => {
+    if (defaultValue) setDefaultValues(defaultValue);
+    else {
+      setDefaultValues(null);
+      resetFresh();
+    }
+  }, [defaultValue]);
+
+  // ==============================>
+  // ## Watch: collect watchers from fields
+  // ==============================>
+  const collectWatchers = (fieldList: FormType[], prefix?: string): { name: string, watch: NonNullable<FormType['watch']>, construction: any }[] => {
+    const result: { name: string, watch: NonNullable<FormType['watch']>, construction: any }[] = [];
+
+    for (const f of fieldList) {
+      const inputType = f.type || "default";
+      const name      = prefix ? `${prefix}.${f.construction?.name}` : f.construction?.name || "";
+
+      if (inputType === "cluster") {
+        const cluster   = f.construction as ClusterConstruction;
+        const groupKey  = prefix ? `${prefix}.${cluster.name}` : cluster.name;
+        const group     = mapGroups[groupKey] || [0];
+
+        for (const gIndex of group) {
+          result.push(...collectWatchers(cluster.fields, `${cluster.name}[${gIndex}]`));
+        }
+      } else if (f.watch) {
+        result.push({ name, watch: f.watch, construction: f.construction });
+      }
+    }
+
+    return result;
+  };
+
+
+  // ==============================>
+  // ## Watch: execute watchers on value change
+  // ==============================>
+  useEffect(() => {
+    const watchers = collectWatchers(fields);
+    if (watchers.length === 0) {
+      if (Object.keys(watchRef.current).length > 0) {
+        watchRef.current = {};
+        setWatchState({});
+      }
+      return;
+    }
+
+    const valMap = values.reduce<Record<string, any>>((acc, v) => { acc[v.name] = v.value; return acc; }, {});
+
+    const nextState    : Record<string, WatchAction> = {};
+    const valueUpdates : FormValueType[] = [];
+
+    for (const { name, watch, construction } of watchers) {
+      const prev   = watchRef.current[name] || {};
+      const action = watch({ values: valMap, self: name, prev });
+
+      if (!action) continue;
+
+      nextState[name] = action;
+
+      if (action.hidden && !prev.hidden) unregister(name);
+
+      if (action.required !== prev.required) {
+        const baseValidations = Array.isArray(construction?.validations) ? [...construction.validations] : [];
+        const newValidations  = action.required ? (baseValidations.includes("required") ? baseValidations : [...baseValidations, "required"]) : baseValidations.filter((v: string) => v !== "required");
+
+        setRegister({ name, validations: newValidations });
+      }
+
+      if (action.reset) {
+        const cur = valMap[name];
+
+        if (cur != null && cur !== "") valueUpdates.push({ name, value: "" });
+      } else if (action.value !== undefined && action.value !== valMap[name]) {
+        valueUpdates.push({ name, value: action.value });
+      }
+    }
+
+    if (JSON.stringify(watchRef.current) !== JSON.stringify(nextState)) {
+      watchRef.current = nextState;
+      setWatchState(nextState);
+    }
+
+    if (valueUpdates.length > 0) {
+      const merged = [...values];
+
+      for (const upd of valueUpdates) {
+        const idx = merged.findIndex(v => v.name === upd.name);
+        if (idx >= 0) merged[idx] = upd;
+        else merged.push(upd);
+      }
+
+      setValues(merged);
+    }
+  }, [values, fields, mapGroups]);
+
+
+  const generateColClass = (col: string | number) => String(col).split(" ").map((c) => (c.includes(":") ? `${c.replace(":", ":col-span-")}` : `col-span-${c}`)).join(" ");
+
+  const inputMap: Record<TypeKeys, React.FC<any>> = {
+    default           :  InputComponent,
+    check             :  InputCheckboxComponent,
+    currency          :  InputCurrencyComponent,
+    date              :  InputDateComponent,
+    datetime          :  InputDatetimeComponent,
+    time              :  InputTimeComponent,
+    number            :  InputNumberComponent,
+    radio             :  InputRadioComponent,
+    select            :  SelectComponent,
+    "enter-password"  :  InputPasswordComponent,
+    otp               :  InputOtpComponent,
+    image             :  InputImageComponent,
+    map               :  InputMapComponent,
+    cluster           :  () => null,
+    custom            :  () => null,
+  };
+
+  const renderInput = (form: FormType, key: number, prefix?: string) => {
+    const inputType = form.type || "default";
+    const name = prefix ? `${prefix}.${form.construction?.name}` : form.construction?.name || "input_name";
+
+    if (form?.onHide?.(values)) return null;
+
+    const ws = watchState[name];
+    if (ws?.hidden) return null;
+
+    if (inputType === "cluster") {
+      const { name: mapName, fields: innerForms, label, tip, wrap, className, min = 0 } = form.construction as ClusterConstruction;
+
+      const groupKey = prefix ? `${prefix}.${mapName}` : mapName;
+      const group = mapGroups[groupKey] || Array.from({ length: Math.max(min, 1) }, (_, i) => i);
+
+      const addGroup = () => setMapGroups((prev) => ({ ...prev, [groupKey]: [...group, group.length > 0 ? Math.max(...group) + 1 : 0] }));
+
+      const removeGroup = (gIndex: number) => {
+        setMapGroups((prev) => ({ ...prev, [groupKey]: group.filter((g) => g !== gIndex) }));
+
+        unregisterPrefix(`${groupKey}[${gIndex}]`);
+      };
+
+      return (
+        <div key={key} className={cn("flex flex-col gap-4", generateColClass(form.col || "12"))}>
+          {group.map((gIndex) => (
+            <div key={gIndex} className={cn("relative pr-8", wrap && "p-4 rounded border", className)}>
+              {label && <p className="input-label">{label} {gIndex + 1}</p>}
+              {tip && <small className={cn("input-tip")}>{tip}</small>}
+              {(label || tip) && <div className="mb-2"></div>}
+
+              <div className="w-full grid grid-cols-12 gap-4">
+                {innerForms.map((inner, i) => renderInput(inner, i, `${mapName}[${gIndex}]`))}
+              </div>
+
+              {group.length > min && (
+                <IconButtonComponent
+                  icon={faTimes}
+                  paint="danger"
+                  variant="outline"
+                  size="xs"
+                  className={cn("absolute top-10 right-2 translate-x-[50%] -translate-y-[50%]", wrap && "translate-x-0 -translate-y-0 top-1 right-1")}
+                  onClick={() => removeGroup(gIndex)}
+                />
+              )}
+            </div>
+          ))}
+
+          <div>
+            <ButtonComponent
+              icon={faPlus}
+              label={`Tambah ${label || mapName}`}
+              variant="outline"
+              size="sm"
+              onClick={addGroup}
+            />
+          </div>
+        </div>
+      );
+    }
+
+    if (inputType === "custom") {
+      const customRender = form.construction as formCustomConstructionProps;
+      return (
+        <div key={key} className={cn(form.className, generateColClass(form.col || "12"))}>
+          {customRender?.({ formControl, values, setValues, errors, setErrors, setRegister, prefixName: prefix })}
+        </div>
+      );
+    }
+
+    const Component = inputMap[inputType] || InputComponent;
+    return (
+      <div key={key} className={cn(form.className, generateColClass(form.col || "12"))}>
+        <Component
+          {...(form.construction as any)}
+          {...formControl(name)}
+          disabled={ws?.disabled}
+          readOnly={ws?.readonly}
+        />
+      </div>
+    );
+  };
+
+  return (
+    <>
+      {title && <h4 className={cn("text-lg font-semibold mb-4", pcn<CT>(className, "title"))}>{title}</h4>}
+
+      <form className={cn("grid grid-cols-12 gap-4", pcn<CT>(className, "base"))} onSubmit={submit}>
+        {fresh && fields.map((f, i) => renderInput(f, i))}
+
+        <div className="col-span-12">
+          {footerControl?.({ loading }) || (
+            <div className="flex justify-end mt-4">
+              <ButtonComponent
+                type="submit"
+                label="Simpan"
+                icon={faSave}
+                loading={loading}
+                className={pcn<CT>(className, "submit")}
+              />
+            </div>
+          )}
+        </div>
+      </form>
+
+      <ModalConfirmComponent
+        show={confirm.show}
+        onClose={() => confirm.onClose()}
+        icon={faQuestionCircle}
+        title="Yakin"
+        submitControl={{ onSubmit: () => confirm?.onConfirm(), paint: "primary" }}
+      >
+        <p className="px-2 pb-2 text-sm text-center">Yakin semua data sudah benar?</p>
+      </ModalConfirmComponent>
+
+      <ToastComponent
+        show={modal == "failed"}
+        onClose={() => setModal(false)}
+        title="Gagal"
+        className="!border-danger header::text-danger"
+      >
+        <p className="px-3 pb-2 text-sm">
+          Data gagal disimpan, cek data dan koneksi internet lalu coba kembali!
+        </p>
+      </ToastComponent>
+
+      <ToastComponent
+        show={modal == "success"}
+        onClose={() => setModal(false)}
+        title="Berhasil"
+        className="!border-success header::text-success"
+      >
+        <p className="px-3 pb-2 text-sm">Data berhasil disimpan!</p>
+      </ToastComponent>
+    </>
+  );
 }