@skalfa/skalfa-app 1.0.0 → 1.0.2

package/components/base.components/table/ControlBar.component.tsx

@@ -1,497 +1,497 @@
-"use client"
-
-import { ReactNode, useEffect, useRef } from 'react'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faArrowDownZA, faArrowUpAZ, faEllipsisV, faEyeLowVision, faMagnifyingGlass, faPlus, faRefresh, faSearch, faSliders, faSort } from '@fortawesome/free-solid-svg-icons';
-import { ApiFilterType, cn, conversion, shortcut, useResponsive } from '@utils';
-import { useToggleContext } from '@contexts';
-import { IconButtonComponent, InputCheckboxComponent, InputComponent, SelectComponent, OutsideClickComponent, ButtonComponent, BottomSheetComponent, FilterComponent, FilterColumnOption } from '@components';
-
-
-
-export type ControlBarOptionType = "SEARCH" | "SEARCHABLE" | "FILTER" | "SELECTABLE" | "REFRESH" | ReactNode;
-
-export interface ControlBarProps {
-  id                 ?:  string;
-  options            ?:  ControlBarOptionType[];
-  className          ?:  string
-  search             ?:  string,
-  onSearch           ?:  (searchable: string) => void,
-  searchableOptions  ?:  {label: string | ReactNode, selector: string}[]
-  searchable         ?:  string[],
-  onSearchable       ?:  (searchable: string[]) => void,
-  selectableOptions  ?:  {label: string | ReactNode, selector: string}[]
-  selectable         ?:  string[],
-  onSelectable       ?:  (searchable: string[]) => void,
-  sortableOptions    ?:  {label: string | ReactNode, selector: string}[]
-  sort               ?:  string[],
-  onSort             ?:  (sort: string[]) => void,
-  filterableColumns  ?:  FilterColumnOption[],
-  onFilter           ?:  (filters: ApiFilterType[]) => void,
-  filter             ?:  ApiFilterType[],
-  onRefresh          ?:  () => void,
-}
-
-
-
-export function ControlBarComponent({
-  id = "",
-  options, 
-  className, 
-  search, 
-  onSearch, 
-  searchableOptions,
-  searchable,
-  onSearchable,
-  selectableOptions,
-  selectable,
-  onSelectable,
-  sortableOptions,
-  sort,
-  onSort,
-  filterableColumns,
-  onFilter,
-  filter,
-  onRefresh
-}: ControlBarProps) {
-  const {toggle, setToggle}  =  useToggleContext()
-  const { isSm }             =  useResponsive();
-
-  const searchRef             =  useRef<HTMLInputElement | null>(null);
-
-  useEffect(() => {
-    if (options?.includes("SEARCH")) {
-      shortcut.register("ctrl+s", () => {
-        searchRef.current?.focus()
-      }, "Cari")
-    }
-
-    if (options?.includes("FILTER")) {
-      shortcut.register("ctrl+f", () => {
-        setToggle("FILTER")
-      }, "Filter")
-    }
-
-    if (options?.includes("SORT")) {
-      shortcut.register("ctrl+o", () => {
-        setToggle("SORT")
-      }, "Urutkan")
-    }
-
-    if (options?.includes("SELECTABLE")) {
-      shortcut.register("ctrl+l", () => {
-        setToggle("SELECTABLE")
-      }, "Kolom Ditampilkan")
-    }
-
-    if (options?.includes("REFRESH")) {
-      shortcut.register("ctrl+shift+r", () => {
-        onRefresh?.()
-      }, "Refresh Tabel")
-    }
-
-    return () => {
-      options?.includes("SEARCH") && shortcut.unregister("ctrl+s")
-      options?.includes("FILTER") && shortcut.unregister("ctrl+f")
-      options?.includes("SORT") && shortcut.unregister("ctrl+o")
-      options?.includes("SELECTABLE") && shortcut.unregister("ctrl+l")
-      options?.includes("REFRESH") && shortcut.unregister("ctrl+shift+r")
-    }
-  }, [options])
-
-  const onChangeSort = (item: string) => {
-    if(!!sort?.find((s) => s.split(" ")?.at(0) == item)) {
-      const findSort = sort.find((s) => s.split(" ")?.at(0) == item);
-
-      if (findSort?.split(" ")?.at(1) == "desc") {
-        onSort?.(sort.filter((s) => s != findSort));
-      } else {
-        const newSorts = [...sort];
-        newSorts[newSorts?.findIndex((s) => s == findSort)] = `${item} desc`
-        onSort?.(newSorts);
-      }
-    } else {
-      onSort?.([...(sort || []), `${item} asc`])
-    }
-  }
-  
-  return (
-    <>
-      <div className={cn("py-1 md:py-2 md:px-1.5 bg-white rounded-[6px] border flex items-center mb-2", className)}>
-        {(isSm ? [
-          ...(options?.filter((op, iop) => iop == 0 || op == "REFRESH") || []), 
-          ...(options && options?.length > 1 ? ['MOBILE_OPTION'] : [])
-        ] : options)?.map((option: ControlBarOptionType, key: number) => {
-          {
-            // =========================>
-            // ## Create button 
-            // =========================>
-          }
-          if (option == "CREATE") {
-            return (
-              <div className="pl-1.5 pr-3 mr-2 border-r" key="button-add">
-                <ButtonComponent
-                  icon={faPlus}
-                  label="Tambah Data"
-                  size="sm"
-                  onClick={() => setToggle(`MODAL_FORM_${conversion.strSnake(id).toUpperCase()}`)}
-                />
-              </div>
-            );
-          }
-
-          {
-            // =========================>
-            // ## Search Field
-            // =========================>
-          }
-          if (option == "SEARCH") {
-            const searchable = !!options?.find((option) => option == "SEARCHABLE");
-
-            return (
-              <div className={cn("w-full min-w-[150px]", searchable ? "pr-1.5" : "px-1.5")} key={key}>
-                <InputComponent
-                  ref={searchRef}
-                  name="search"
-                  placeholder="Cari disini..."
-                  rightIcon={faMagnifyingGlass}
-                  value={search}
-                  onChange={(e) => onSearch?.(e)}
-                  className={cn("py-1.5 text-sm", searchable && "rounded-l-none")}
-                />
-              </div>
-            );
-          }
-
-          {
-            // =========================>
-            // ## Searchable Field
-            // =========================>
-          }
-          if (option == "SEARCHABLE") {
-            return searchableOptions?.length ? (
-              <div className="w-28 pl-1.5" key={key}>
-                <SelectComponent
-                  name="searchableColumn"
-                  leftIcon={faSearch}
-                  options={searchableOptions?.map((column) => {
-                    return {
-                      label: column.label,
-                      value: column.selector,
-                    };
-                  }) || []}
-                  value={searchable}
-                  onChange={(e) => onSearchable?.(e as string[])}
-                  className="py-1.5 text-sm rounded-r-none border-r-0"
-                  multiple
-                />
-              </div>
-            ) : <></>;
-          }
-
-          {
-            // =========================>
-            // ## Selectable Button
-            // =========================>
-          }
-          if (option == "SELECTABLE") {
-            return (
-              <div className="px-1.5 rounded-md relative" key={key}>
-                <IconButtonComponent
-                  icon={faEyeLowVision}
-                  variant="outline"
-                  className="!text-foreground p-4"
-                  onClick={() => setToggle("SELECTABLE")}
-                  size="sm"
-                />
-                <OutsideClickComponent onOutsideClick={() => setToggle("SELECTABLE", false)}>
-                  <div
-                    className={cn(
-                      "absolute -bottom-4 bg-white translate-y-full right-0 w-[240px] z-20 rounded-lg border",
-                      !toggle.SELECTABLE && "scale-y-0 top-0 opacity-0"
-                    )}
-                  >
-                    <p className='input-label text-xs p-4'>Kolom Ditampilkan</p>
-                    <InputCheckboxComponent
-                      vertical
-                      name="show_column"
-                      options={selectableOptions?.map((option) => {
-                        return {
-                          label: option.label as string,
-                          value: option.selector,
-                        };
-                      })}
-                      onChange={(e) => onSelectable?.(Array().concat(e).map((val) => String(val)))}
-                      value={selectable}
-                      className='px-4 border-0 gap-4 mb-4'
-                      classNameCheckbox='w-5 h-5 label::text-xs'
-                    />
-                  </div>
-                </OutsideClickComponent>
-              </div>
-            );
-          }
-
-          {
-            // =========================>
-            // ## Sort Button
-            // =========================>
-          }
-          if (option == "SORT") {
-            return sortableOptions?.length ? (
-              <div className="px-1.5 rounded-md relative" key={key}>
-                <IconButtonComponent
-                  icon={faSort}
-                  variant="outline"
-                  className="!text-foreground p-4"
-                  onClick={() => setToggle("SORT")}
-                  size="sm"
-                />
-                <OutsideClickComponent onOutsideClick={() => setToggle("SORT", false)}>
-                  <div
-                    className={cn(
-                      "absolute -bottom-4 bg-white translate-y-full right-0 w-[240px] z-20 rounded-lg border",
-                      !toggle.SORT && "scale-y-0 top-0 opacity-0"
-                    )}
-                  >
-                    <p className='input-label text-xs p-4'>Urut Berdasarkan</p>
-                    <div className='flex flex-col mb-4'>
-                      {sortableOptions?.map((option, key) => {
-                        const sortBy = sort?.find((s) => s.split(" ")?.at(0) == option?.selector)?.split(" ")?.at(1) || "";
-                        return (
-                          <div 
-                            key={key}
-                            className={cn('flex justify-between cursor-pointer text-sm px-4 py-2 hover:bg-light-primary', !!sortBy && "text-primary bg-primary/10")}
-                            onClick={() => onChangeSort(option.selector)}
-                          >
-                            <p>{option.label}</p>
-
-                            {sortBy && (
-                              <div className='text-primary'>
-                                <FontAwesomeIcon icon={sortBy == "desc" ? faArrowDownZA : faArrowUpAZ} className='text-xs' /> 
-                                {sort?.length && sort?.length > 1 && <span className='text-[9px] ml-1'>{sort.findIndex((s) => s.split(" ")?.at(0) == option?.selector) + 1}</span>}
-                              </div>
-                            )}
-                          </div>
-                        )
-                      })}
-                    </div>
-                  </div>
-                </OutsideClickComponent>
-              </div>
-            ) : <></>;
-          }
-
-          {
-            // =========================>
-            // ## Refresh Button 
-            // =========================>
-          }
-          if (option == "REFRESH") {
-            return (
-              <div className="md:px-1.5 relative" key={key}>
-                <IconButtonComponent
-                  icon={faRefresh}
-                  variant="outline"
-                  className="!text-foreground p-4"
-                  onClick={() => onRefresh?.()}
-                  size="sm"
-                />
-              </div>
-            );
-          }
-
-          {
-            // =========================>
-            // ## Filter Button 
-            // =========================>
-          }
-          if (option == "FILTER") {
-            return (
-              <div className="px-1.5 rounded-md relative" key={key}>
-                <ButtonComponent
-                  icon={faSliders}
-                  label="Filter"
-                  variant="outline"
-                  className="!text-foreground"
-                  onClick={() => setToggle("FILTER")}
-                  size="sm"
-                />
-              </div>
-            );
-          }
-
-          {
-            // =========================>
-            // ## Mobile option button
-            // =========================>
-          }
-          if (option == "MOBILE_OPTION") {
-            return (
-              <div className="px-1.5 relative" key={key}>
-                <IconButtonComponent
-                  icon={faEllipsisV}
-                  variant="outline"
-                  className="!text-foreground p-4"
-                  onClick={() => setToggle("MOBILE_OPTION")}
-                  size="sm"
-                />
-              </div>
-            );
-          }
-
-          return option;
-        })}
-      </div>
-
-      {!!filterableColumns && !!filterableColumns?.length && (
-        <FilterComponent 
-          className={cn("", !toggle.FILTER ? "p-0 h-0 hidden overflow-hidden" : "mb-2 animate-intro-down")}
-          columns={filterableColumns}
-          onChange={onFilter}
-          value={filter}
-          onMinimize={() => setToggle("FILTER")}
-        />
-      )}
-
-      {isSm && (
-        <BottomSheetComponent
-          show={!!toggle["MOBILE_OPTION"]}
-          onClose={() => setToggle("MOBILE_OPTION", false)}
-          maxSize="98vh"
-        >
-          <div className='flex flex-col gap-4 p-2'>
-            {options?.filter((op, iop) => (iop != 0 && op != "CREATE" && op != "REFRESH"))?.map((option: ControlBarOptionType, key: number) => {
-              {
-                // =========================>
-                // ## Search Field
-                // =========================>
-              }
-              if (option == "SEARCH") {
-                return (
-                  <div key={key}>
-                    <InputComponent
-                      name="search"
-                      placeholder="Cari disini..."
-                      rightIcon={faMagnifyingGlass}
-                      value={search}
-                      onChange={(e) => onSearch?.(e)}
-                    />
-                  </div>
-                );
-              }
-
-              {
-                // =========================>
-                // ## Searchable Field
-                // =========================>
-              }
-              if (option == "SEARCHABLE") {
-                return searchableOptions?.length ? (
-                  <div key={key}>
-                    <SelectComponent
-                      name="searchableColumn"
-                      leftIcon={faSearch}
-                      options={searchableOptions?.map((column) => {
-                        return {
-                          label: column.label,
-                          value: column.selector,
-                        };
-                      }) || []}
-                      value={searchable}
-                      onChange={(e) => onSearchable?.(e as string[])}
-                      multiple
-                    />
-                  </div>
-                ) : <></>;
-              }
-
-              {
-                // =========================>
-                // ## Selectable Button
-                // =========================>
-              }
-              if (option == "SELECTABLE") {
-                return (
-                  <div key={key}>
-                    <p className='input-label text-xs pb-2'>Kolom Ditampilkan</p>
-                    <InputCheckboxComponent
-                      vertical
-                      name="show_column"
-                      options={selectableOptions?.map((option) => {
-                        return {
-                          label: option.label as string,
-                          value: option.selector,
-                        };
-                      })}
-                      onChange={(e) => onSelectable?.(Array().concat(e).map((val) => String(val)))}
-                      value={selectable}
-                      className='px-2 border-0 gap-4 bg-transparent'
-                      classNameCheckbox='w-5 h-5 label::text-xs'
-                    />
-                  </div>
-                );
-              }
-
-              {
-                // =========================>
-                // ## Sort Button
-                // =========================>
-              }
-              if (option == "SORT") {
-                return sortableOptions?.length ? (
-                  <div key={key}>
-                    <p className='input-label text-xs pb-2'>Urut Berdasarkan</p>
-                    <div className='flex flex-col'>
-                      {sortableOptions?.map((option, key) => {
-                        const sortBy = sort?.find((s) => s.split(" ")?.at(0) == option?.selector)?.split(" ")?.at(1) || "";
-                        return (
-                          <div 
-                            key={key}
-                            className={cn('flex justify-between cursor-pointer text-sm p-2 hover:bg-light-primary active:scale-x-[102%]', !!sortBy && "text-primary bg-primary/10")}
-                            onClick={() => onChangeSort(option.selector)}
-                          >
-                            <p>{option.label}</p>
-
-                            {sortBy && (
-                              <div className='text-primary'>
-                                <FontAwesomeIcon icon={sortBy == "desc" ? faArrowDownZA : faArrowUpAZ} className='text-xs' /> 
-                                {sort?.length && sort?.length > 1 && <span className='text-[9px] ml-1'>{sort.findIndex((s) => s.split(" ")?.at(0) == option?.selector) + 1}</span>}
-                              </div>
-                            )}
-                          </div>
-                        )
-                      })}
-                    </div>
-                  </div>
-                ) : <></>;
-              }
-
-              {
-                // =========================>
-                // ## Filter 
-                // =========================>
-              }
-              if (option == "FILTER") {
-                return (
-                  <div key={key}>
-                    {filterableColumns && filterableColumns?.length && (
-                      <FilterComponent
-                        className='border-0 p-0 mb-2 title::text-xs'
-                        columns={filterableColumns}
-                        onChange={onFilter}
-                        value={filter}
-                      />
-                    )}
-                  </div>
-                );
-              }
-
-              return option;
-            })}
-          </div>
-        </BottomSheetComponent>
-      )}
-    </>
-  )
-}
+"use client"
+
+import { ReactNode, useEffect, useRef } from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faArrowDownZA, faArrowUpAZ, faEllipsisV, faEyeLowVision, faMagnifyingGlass, faPlus, faRefresh, faSearch, faSliders, faSort } from '@fortawesome/free-solid-svg-icons';
+import { ApiFilterType, cn, conversion, shortcut, useResponsive } from '@utils';
+import { useToggleContext } from '@contexts';
+import { IconButtonComponent, InputCheckboxComponent, InputComponent, SelectComponent, OutsideClickComponent, ButtonComponent, BottomSheetComponent, FilterComponent, FilterColumnOption } from '@components';
+
+
+
+export type ControlBarOptionType = "SEARCH" | "SEARCHABLE" | "FILTER" | "SELECTABLE" | "REFRESH" | ReactNode;
+
+export interface ControlBarProps {
+  id                 ?:  string;
+  options            ?:  ControlBarOptionType[];
+  className          ?:  string
+  search             ?:  string,
+  onSearch           ?:  (searchable: string) => void,
+  searchableOptions  ?:  {label: string | ReactNode, selector: string}[]
+  searchable         ?:  string[],
+  onSearchable       ?:  (searchable: string[]) => void,
+  selectableOptions  ?:  {label: string | ReactNode, selector: string}[]
+  selectable         ?:  string[],
+  onSelectable       ?:  (searchable: string[]) => void,
+  sortableOptions    ?:  {label: string | ReactNode, selector: string}[]
+  sort               ?:  string[],
+  onSort             ?:  (sort: string[]) => void,
+  filterableColumns  ?:  FilterColumnOption[],
+  onFilter           ?:  (filters: ApiFilterType[]) => void,
+  filter             ?:  ApiFilterType[],
+  onRefresh          ?:  () => void,
+}
+
+
+
+export function ControlBarComponent({
+  id = "",
+  options, 
+  className, 
+  search, 
+  onSearch, 
+  searchableOptions,
+  searchable,
+  onSearchable,
+  selectableOptions,
+  selectable,
+  onSelectable,
+  sortableOptions,
+  sort,
+  onSort,
+  filterableColumns,
+  onFilter,
+  filter,
+  onRefresh
+}: ControlBarProps) {
+  const {toggle, setToggle}  =  useToggleContext()
+  const { isSm }             =  useResponsive();
+
+  const searchRef             =  useRef<HTMLInputElement | null>(null);
+
+  useEffect(() => {
+    if (options?.includes("SEARCH")) {
+      shortcut.register("ctrl+s", () => {
+        searchRef.current?.focus()
+      }, "Cari")
+    }
+
+    if (options?.includes("FILTER")) {
+      shortcut.register("ctrl+f", () => {
+        setToggle("FILTER")
+      }, "Filter")
+    }
+
+    if (options?.includes("SORT")) {
+      shortcut.register("ctrl+o", () => {
+        setToggle("SORT")
+      }, "Urutkan")
+    }
+
+    if (options?.includes("SELECTABLE")) {
+      shortcut.register("ctrl+l", () => {
+        setToggle("SELECTABLE")
+      }, "Kolom Ditampilkan")
+    }
+
+    if (options?.includes("REFRESH")) {
+      shortcut.register("ctrl+shift+r", () => {
+        onRefresh?.()
+      }, "Refresh Tabel")
+    }
+
+    return () => {
+      options?.includes("SEARCH") && shortcut.unregister("ctrl+s")
+      options?.includes("FILTER") && shortcut.unregister("ctrl+f")
+      options?.includes("SORT") && shortcut.unregister("ctrl+o")
+      options?.includes("SELECTABLE") && shortcut.unregister("ctrl+l")
+      options?.includes("REFRESH") && shortcut.unregister("ctrl+shift+r")
+    }
+  }, [options])
+
+  const onChangeSort = (item: string) => {
+    if(!!sort?.find((s) => s.split(" ")?.at(0) == item)) {
+      const findSort = sort.find((s) => s.split(" ")?.at(0) == item);
+
+      if (findSort?.split(" ")?.at(1) == "desc") {
+        onSort?.(sort.filter((s) => s != findSort));
+      } else {
+        const newSorts = [...sort];
+        newSorts[newSorts?.findIndex((s) => s == findSort)] = `${item} desc`
+        onSort?.(newSorts);
+      }
+    } else {
+      onSort?.([...(sort || []), `${item} asc`])
+    }
+  }
+  
+  return (
+    <>
+      <div className={cn("py-1 md:py-2 md:px-1.5 bg-white rounded-[6px] border flex items-center mb-2", className)}>
+        {(isSm ? [
+          ...(options?.filter((op, iop) => iop == 0 || op == "REFRESH") || []), 
+          ...(options && options?.length > 1 ? ['MOBILE_OPTION'] : [])
+        ] : options)?.map((option: ControlBarOptionType, key: number) => {
+          {
+            // =========================>
+            // ## Create button 
+            // =========================>
+          }
+          if (option == "CREATE") {
+            return (
+              <div className="pl-1.5 pr-3 mr-2 border-r" key="button-add">
+                <ButtonComponent
+                  icon={faPlus}
+                  label="Tambah Data"
+                  size="sm"
+                  onClick={() => setToggle(`MODAL_FORM_${conversion.strSnake(id).toUpperCase()}`)}
+                />
+              </div>
+            );
+          }
+
+          {
+            // =========================>
+            // ## Search Field
+            // =========================>
+          }
+          if (option == "SEARCH") {
+            const searchable = !!options?.find((option) => option == "SEARCHABLE");
+
+            return (
+              <div className={cn("w-full min-w-[150px]", searchable ? "pr-1.5" : "px-1.5")} key={key}>
+                <InputComponent
+                  ref={searchRef}
+                  name="search"
+                  placeholder="Cari disini..."
+                  rightIcon={faMagnifyingGlass}
+                  value={search}
+                  onChange={(e) => onSearch?.(e)}
+                  className={cn("py-1.5 text-sm", searchable && "rounded-l-none")}
+                />
+              </div>
+            );
+          }
+
+          {
+            // =========================>
+            // ## Searchable Field
+            // =========================>
+          }
+          if (option == "SEARCHABLE") {
+            return searchableOptions?.length ? (
+              <div className="w-28 pl-1.5" key={key}>
+                <SelectComponent
+                  name="searchableColumn"
+                  leftIcon={faSearch}
+                  options={searchableOptions?.map((column) => {
+                    return {
+                      label: column.label,
+                      value: column.selector,
+                    };
+                  }) || []}
+                  value={searchable}
+                  onChange={(e) => onSearchable?.(e as string[])}
+                  className="py-1.5 text-sm rounded-r-none border-r-0"
+                  multiple
+                />
+              </div>
+            ) : <></>;
+          }
+
+          {
+            // =========================>
+            // ## Selectable Button
+            // =========================>
+          }
+          if (option == "SELECTABLE") {
+            return (
+              <div className="px-1.5 rounded-md relative" key={key}>
+                <IconButtonComponent
+                  icon={faEyeLowVision}
+                  variant="outline"
+                  className="!text-foreground p-4"
+                  onClick={() => setToggle("SELECTABLE")}
+                  size="sm"
+                />
+                <OutsideClickComponent onOutsideClick={() => setToggle("SELECTABLE", false)}>
+                  <div
+                    className={cn(
+                      "absolute -bottom-4 bg-white translate-y-full right-0 w-[240px] z-20 rounded-lg border",
+                      !toggle.SELECTABLE && "scale-y-0 top-0 opacity-0"
+                    )}
+                  >
+                    <p className='input-label text-xs p-4'>Kolom Ditampilkan</p>
+                    <InputCheckboxComponent
+                      vertical
+                      name="show_column"
+                      options={selectableOptions?.map((option) => {
+                        return {
+                          label: option.label as string,
+                          value: option.selector,
+                        };
+                      })}
+                      onChange={(e) => onSelectable?.(Array().concat(e).map((val) => String(val)))}
+                      value={selectable}
+                      className='px-4 border-0 gap-4 mb-4'
+                      classNameCheckbox='w-5 h-5 label::text-xs'
+                    />
+                  </div>
+                </OutsideClickComponent>
+              </div>
+            );
+          }
+
+          {
+            // =========================>
+            // ## Sort Button
+            // =========================>
+          }
+          if (option == "SORT") {
+            return sortableOptions?.length ? (
+              <div className="px-1.5 rounded-md relative" key={key}>
+                <IconButtonComponent
+                  icon={faSort}
+                  variant="outline"
+                  className="!text-foreground p-4"
+                  onClick={() => setToggle("SORT")}
+                  size="sm"
+                />
+                <OutsideClickComponent onOutsideClick={() => setToggle("SORT", false)}>
+                  <div
+                    className={cn(
+                      "absolute -bottom-4 bg-white translate-y-full right-0 w-[240px] z-20 rounded-lg border",
+                      !toggle.SORT && "scale-y-0 top-0 opacity-0"
+                    )}
+                  >
+                    <p className='input-label text-xs p-4'>Urut Berdasarkan</p>
+                    <div className='flex flex-col mb-4'>
+                      {sortableOptions?.map((option, key) => {
+                        const sortBy = sort?.find((s) => s.split(" ")?.at(0) == option?.selector)?.split(" ")?.at(1) || "";
+                        return (
+                          <div 
+                            key={key}
+                            className={cn('flex justify-between cursor-pointer text-sm px-4 py-2 hover:bg-light-primary', !!sortBy && "text-primary bg-primary/10")}
+                            onClick={() => onChangeSort(option.selector)}
+                          >
+                            <p>{option.label}</p>
+
+                            {sortBy && (
+                              <div className='text-primary'>
+                                <FontAwesomeIcon icon={sortBy == "desc" ? faArrowDownZA : faArrowUpAZ} className='text-xs' /> 
+                                {sort?.length && sort?.length > 1 && <span className='text-[9px] ml-1'>{sort.findIndex((s) => s.split(" ")?.at(0) == option?.selector) + 1}</span>}
+                              </div>
+                            )}
+                          </div>
+                        )
+                      })}
+                    </div>
+                  </div>
+                </OutsideClickComponent>
+              </div>
+            ) : <></>;
+          }
+
+          {
+            // =========================>
+            // ## Refresh Button 
+            // =========================>
+          }
+          if (option == "REFRESH") {
+            return (
+              <div className="md:px-1.5 relative" key={key}>
+                <IconButtonComponent
+                  icon={faRefresh}
+                  variant="outline"
+                  className="!text-foreground p-4"
+                  onClick={() => onRefresh?.()}
+                  size="sm"
+                />
+              </div>
+            );
+          }
+
+          {
+            // =========================>
+            // ## Filter Button 
+            // =========================>
+          }
+          if (option == "FILTER") {
+            return (
+              <div className="px-1.5 rounded-md relative" key={key}>
+                <ButtonComponent
+                  icon={faSliders}
+                  label="Filter"
+                  variant="outline"
+                  className="!text-foreground"
+                  onClick={() => setToggle("FILTER")}
+                  size="sm"
+                />
+              </div>
+            );
+          }
+
+          {
+            // =========================>
+            // ## Mobile option button
+            // =========================>
+          }
+          if (option == "MOBILE_OPTION") {
+            return (
+              <div className="px-1.5 relative" key={key}>
+                <IconButtonComponent
+                  icon={faEllipsisV}
+                  variant="outline"
+                  className="!text-foreground p-4"
+                  onClick={() => setToggle("MOBILE_OPTION")}
+                  size="sm"
+                />
+              </div>
+            );
+          }
+
+          return option;
+        })}
+      </div>
+
+      {!!filterableColumns && !!filterableColumns?.length && (
+        <FilterComponent 
+          className={cn("", !toggle.FILTER ? "p-0 h-0 hidden overflow-hidden" : "mb-2 animate-intro-down")}
+          columns={filterableColumns}
+          onChange={onFilter}
+          value={filter}
+          onMinimize={() => setToggle("FILTER")}
+        />
+      )}
+
+      {isSm && (
+        <BottomSheetComponent
+          show={!!toggle["MOBILE_OPTION"]}
+          onClose={() => setToggle("MOBILE_OPTION", false)}
+          maxSize="98vh"
+        >
+          <div className='flex flex-col gap-4 p-2'>
+            {options?.filter((op, iop) => (iop != 0 && op != "CREATE" && op != "REFRESH"))?.map((option: ControlBarOptionType, key: number) => {
+              {
+                // =========================>
+                // ## Search Field
+                // =========================>
+              }
+              if (option == "SEARCH") {
+                return (
+                  <div key={key}>
+                    <InputComponent
+                      name="search"
+                      placeholder="Cari disini..."
+                      rightIcon={faMagnifyingGlass}
+                      value={search}
+                      onChange={(e) => onSearch?.(e)}
+                    />
+                  </div>
+                );
+              }
+
+              {
+                // =========================>
+                // ## Searchable Field
+                // =========================>
+              }
+              if (option == "SEARCHABLE") {
+                return searchableOptions?.length ? (
+                  <div key={key}>
+                    <SelectComponent
+                      name="searchableColumn"
+                      leftIcon={faSearch}
+                      options={searchableOptions?.map((column) => {
+                        return {
+                          label: column.label,
+                          value: column.selector,
+                        };
+                      }) || []}
+                      value={searchable}
+                      onChange={(e) => onSearchable?.(e as string[])}
+                      multiple
+                    />
+                  </div>
+                ) : <></>;
+              }
+
+              {
+                // =========================>
+                // ## Selectable Button
+                // =========================>
+              }
+              if (option == "SELECTABLE") {
+                return (
+                  <div key={key}>
+                    <p className='input-label text-xs pb-2'>Kolom Ditampilkan</p>
+                    <InputCheckboxComponent
+                      vertical
+                      name="show_column"
+                      options={selectableOptions?.map((option) => {
+                        return {
+                          label: option.label as string,
+                          value: option.selector,
+                        };
+                      })}
+                      onChange={(e) => onSelectable?.(Array().concat(e).map((val) => String(val)))}
+                      value={selectable}
+                      className='px-2 border-0 gap-4 bg-transparent'
+                      classNameCheckbox='w-5 h-5 label::text-xs'
+                    />
+                  </div>
+                );
+              }
+
+              {
+                // =========================>
+                // ## Sort Button
+                // =========================>
+              }
+              if (option == "SORT") {
+                return sortableOptions?.length ? (
+                  <div key={key}>
+                    <p className='input-label text-xs pb-2'>Urut Berdasarkan</p>
+                    <div className='flex flex-col'>
+                      {sortableOptions?.map((option, key) => {
+                        const sortBy = sort?.find((s) => s.split(" ")?.at(0) == option?.selector)?.split(" ")?.at(1) || "";
+                        return (
+                          <div 
+                            key={key}
+                            className={cn('flex justify-between cursor-pointer text-sm p-2 hover:bg-light-primary active:scale-x-[102%]', !!sortBy && "text-primary bg-primary/10")}
+                            onClick={() => onChangeSort(option.selector)}
+                          >
+                            <p>{option.label}</p>
+
+                            {sortBy && (
+                              <div className='text-primary'>
+                                <FontAwesomeIcon icon={sortBy == "desc" ? faArrowDownZA : faArrowUpAZ} className='text-xs' /> 
+                                {sort?.length && sort?.length > 1 && <span className='text-[9px] ml-1'>{sort.findIndex((s) => s.split(" ")?.at(0) == option?.selector) + 1}</span>}
+                              </div>
+                            )}
+                          </div>
+                        )
+                      })}
+                    </div>
+                  </div>
+                ) : <></>;
+              }
+
+              {
+                // =========================>
+                // ## Filter 
+                // =========================>
+              }
+              if (option == "FILTER") {
+                return (
+                  <div key={key}>
+                    {filterableColumns && filterableColumns?.length && (
+                      <FilterComponent
+                        className='border-0 p-0 mb-2 title::text-xs'
+                        columns={filterableColumns}
+                        onChange={onFilter}
+                        value={filter}
+                      />
+                    )}
+                  </div>
+                );
+              }
+
+              return option;
+            })}
+          </div>
+        </BottomSheetComponent>
+      )}
+    </>
+  )
+}