@skalfa/skalfa-component 1.0.10 → 1.0.12

package/src/nav/Footer.component.tsx

@@ -69,15 +69,15 @@ const defaultColumns: FooterColumnProps[] = [
 ];
 
 export function FooterComponent({
-  brandTitle = "Next Light v.3",
-  brandSubtitle = "The Magic Starter Template",
-  address = { label: "Soekarno Hatta No 27 C, Ponorogo, Jawa Timur, Indonesia", path: "https://maps.app.goo.gl/TY2QDjFPm3RfwjUq6" },
-  phone = { label: "+62 888888888888", path: "https://wa.me/6281456140392" },
-  email = { label: "example@gmail.com", path: "mailto:sejedigital@gmail.com" },
-  supportHours = "24 / 7 Online Suport | Senin - Sabtu ( 09.00 s/d 17.00 )",
-  socials = defaultSocials,
-  columns = defaultColumns,
-  copyrightLink = { label: "sejedigital.com 2020 - 2025", path: "https://sejedigital.com/" },
+  brandTitle     =  "Next Light v.3",
+  brandSubtitle  =  "The Magic Starter Template",
+  address        =  { label: "Soekarno Hatta No 27 C, Ponorogo, Jawa Timur, Indonesia", path: "https://maps.app.goo.gl/TY2QDjFPm3RfwjUq6" },
+  phone          =  { label: "+62 888888888888", path: "https://wa.me/6281456140392" },
+  email          =  { label: "example@gmail.com", path: "mailto:sejedigital@gmail.com" },
+  supportHours   =  "24 / 7 Online Suport | Senin - Sabtu ( 09.00 s/d 17.00 )",
+  socials        =  defaultSocials,
+  columns        =  defaultColumns,
+  copyrightLink  =  { label: "sejedigital.com 2020 - 2025", path: "https://sejedigital.com/" },
 }: FooterProps) {
   return (
     <>

package/src/nav/Navbar.component.tsx

@@ -37,12 +37,12 @@ const defaultSpecialLink = {
 } as const;
 
 export function NavbarComponent({
-  logoTitle = "Next Light v.3",
-  logoSubtitle = "The Magic Starter Template",
-  logoPath = "/",
-  specialLink = defaultSpecialLink,
-  items = defaultItems,
-  isLoggedIn = false,
+  logoTitle     =  "Next Light v.3",
+  logoSubtitle  =  "The Magic Starter Template",
+  logoPath      =  "/",
+  specialLink   =  defaultSpecialLink,
+  items         =  defaultItems,
+  isLoggedIn    =  false,
   onLogin,
   onRegister,
   onProfile,

package/src/nav/Sidebar.component.tsx

@@ -154,7 +154,7 @@ export function SidebarComponent({
         </div>
 
         <nav className={cn(
-          "flex flex-col flex-1 overflow-hidden", 
+          "flex flex-col flex-1 overflow-y-auto overflow-x-hidden", 
           toggle[`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`] ? "w-full" : "w-0 lg:w-full",
         )}>
           {items?.map((menu_head, menu_head_key) => {

package/src/nav/Tabbar.component.tsx

@@ -41,9 +41,7 @@ export function TabbarComponent({
               key={i}
               className={cn(
                 "tabbar-item",
-                isItemActive
-                  ? "tabbar-item-active"
-                  : "tabbar-item-inactive",
+                isItemActive ? "tabbar-item-active" : "tabbar-item-inactive",
                 pcn<CT>(className, "item"),
                 pcn<CT>(className, "active"),
               )}

package/src/supervision/FormSupervision.component.tsx

@@ -301,7 +301,7 @@ export function FormSupervisionComponent({
           <div>
             <ButtonComponent
               icon={"solid/plus"}
-              label={`Tambah ${label || mapName}`}
+              label={`${l.base.add ? l.base.add() : "Add"} ${label || mapName}`}
               variant="outline"
               size="sm"
               onClick={addGroup}
@@ -332,6 +332,10 @@ export function FormSupervisionComponent({
     );
   };
 
+  useEffect(() => {
+    setModal(false)
+  }, [values]);
+
   return (
     <>
       {title && <h4 className={cn("text-lg font-semibold mb-4", pcn<CT>(className, "title"))}>{title}</h4>}
@@ -341,7 +345,7 @@ export function FormSupervisionComponent({
           <div className="w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center">
             <Icon icon={"solid/check"} className="text-primary text-2xl" />
           </div>
-          <p className="text-primary text-lg font-semibold mt-4">{successMessage || "Berhasil disimpan!"}</p>
+          <p className="text-primary text-lg font-semibold mt-4">{successMessage || l.base?.success ? l.base.success() : "Success!"}</p>
         </div>
       ) : (
         <form id={id} className={cn("flex flex-col h-full pb-8")} onSubmit={submit}>
@@ -386,7 +390,7 @@ export function FormSupervisionComponent({
                     <Icon icon={"solid/exclamation-triangle"} className="text-danger text-lg" />
                   </div>
                 </div>
-                <p className="text-danger text-sm font-semibold">{"Terjadi Masalah, Coba ulangi lagi!"}</p>
+                <p className="text-danger text-sm font-semibold">{l.base.formFailed ? l.base.formFailed() : "Failed to save data, please check your data and internet connection then try again!"}</p>
               </div>
             )}
           </div>
@@ -396,7 +400,7 @@ export function FormSupervisionComponent({
       <ModalConfirmComponent
         show={confirm.show}
         onClose={() => confirm.onClose()}
-        title={l.base?.confirmTitle ? l.base.confirmTitle() : "Yakin"}
+        title={l.base?.formConfirm ? l.base.formConfirm() : "Are you sure all data is correct?"}
         submitControl={{ onSubmit: () => confirm?.onConfirm(), paint: "primary" }}
       />
     </>

package/src/supervision/TableSupervision.component.tsx

@@ -112,31 +112,31 @@ export function TableSupervisionComponent({
       shortcut.register("arrowdown", () => {
         const max = data?.data?.length - 1;
         setFocus(focus == null ? 0 : focus >= max ? max : (focus + 1))
-      }, "Pilih data kebawah")
+      }, l.base.shortcutDown ? l.base.shortcutDown() : "")
 
       shortcut.register("arrowup", () => {
         setFocus(focus == null ? 0 : focus <= 0 ? 0 : (focus - 1))
-      }, "Pilih data keatas")
+      }, l.base.shortcutUp ? l.base.shortcutUp() : "")
 
       if(focus != null) {
         shortcut.register("delete", () => {
           setSelected(data?.data?.at(focus))
           setToggle(`MODAL_DELETE_${toggleKey}`)
-        }, "Delete data yang dipilih")
+        }, l.base.shortcutDelete ? l.base.shortcutDelete() : "")
 
         shortcut.register(" ", () => {
           setSelected(data?.data?.at(focus))
           setToggle(`MODAL_FORM_${toggleKey}`)
-        }, "Edit data yang dipilih")
+        }, l.base.shortcutEdit ? l.base.shortcutEdit() : "")
   
         shortcut.register("enter", () => {
           setSelected(data?.data?.at(focus))
           setToggle(`MODAL_SHOW_${toggleKey}`)
-        }, "Detail data yang dipilih")
+        }, l.base.shortcutDetail ? l.base.shortcutDetail() : "")
 
         shortcut.register("escape", () => {
           setFocus(null)
-        }, "Kembali")
+        }, l.base.shortcutBack ? l.base.shortcutBack() : "")
       }
     }
 
@@ -339,9 +339,9 @@ export function TableSupervisionComponent({
         col           :  12,
         type          :  "text",
         construction  :  {
-          name         :  typeof col == "string" ? col                                 :  col?.selector,
-          label        :  typeof col == "string" ? col                                 :  col?.label,
-          placeholder  :  `Masukkan ${ typeof col == "string" ? col : col?.label}...`,
+          name         :  typeof col == "string" ? col : col?.selector,
+          label        :  typeof col == "string" ? col : col?.label,
+          placeholder  :  l.base.inputPlaceholder ? l.base.inputPlaceholder(`${ typeof col == "string" ? col : col?.label}`) : `Enter ${ typeof col == "string" ? col : col?.label}...`,
         },
       };
     }) || (data?.data?.at(0) ? Object.keys(data.data[0]).map((col) => {
@@ -351,7 +351,7 @@ export function TableSupervisionComponent({
           construction  :  {
             name         :  col,
             label        :  col,
-            placeholder  :  `Masukkan ${col}...`,
+            placeholder  :  l.base.inputPlaceholder ? l.base.inputPlaceholder(col) : `Enter ${col}...`,
           },
         };
       })
@@ -367,12 +367,12 @@ export function TableSupervisionComponent({
     return (
       <FormSupervisionComponent
         submitControl={(fetchControl as ApiType).path ? { 
-            path: `${(fetchControl as ApiType).path}/${(selected as { id: number })?.id || "" }`,
-            method: !(selected as { id: number })?.id ? "POST" : "PUT", 
-          } : (fetchControl as ApiType).url ? { 
-            url: `${(fetchControl as ApiType).url}/${(selected as { id: number })?.id || ""}`,
-            method: !(selected as { id: number })?.id ? "POST" : "PUT", 
-          } : { idb: (fetchControl as ({ idb: UseResourceIdb }))?.idb }
+            path    :  `${(fetchControl as ApiType).path}/${(selected as { id: number })?.id || "" }`,
+            method  :  !(selected as { id: number })?.id ? "POST"                                      :  "PUT",
+          }  :  (fetchControl as ApiType).url ? { 
+            url     :  `${(fetchControl as ApiType).url}/${(selected as { id: number })?.id || ""}`,
+            method  :  !(selected as { id: number })?.id ? "POST"                                    :  "PUT",
+          }  : { idb: (fetchControl as ({ idb: UseResourceIdb }))?.idb }
         }
         fields={fields?.filter((f: any) => f.visibility ? !(selected as { id: number })?.id ? ["*", "create"]?.includes(f.visibility) : ["*", "update"]?.includes(f.visibility) : true) as FormType[]}
         defaultValue={formControl?.defaultValue ? await formControl?.defaultValue(selected || null) : selected}
@@ -401,11 +401,12 @@ export function TableSupervisionComponent({
         controlBar={controlBar?.map((cb) => {
             if (cb == "CREATE") {
               if (isSm) return 
+
               return (
                 <div className="pl-1.5 pr-3 mr-2 border-r" key="button-add">
                   <ButtonComponent
                     icon={"solid/plus"}
-                    label="Tambah Data"
+                    label={l.base.add ? l.base.add() : "Add"}
                     size="sm"
                     onClick={() => {
                       setToggle(`MODAL_FORM_${toggleKey}`)
@@ -421,7 +422,6 @@ export function TableSupervisionComponent({
                 <div className="px-1.5 rounded-md relative" key={"import"}>
                   <ButtonComponent
                     icon={"solid/file-excel"}
-                    label="Import"
                     variant="outline"
                     className="!text-foreground"
                     onClick={() => setToggle(`MODAL_IMPORT_${toggleKey}`)}
@@ -436,7 +436,6 @@ export function TableSupervisionComponent({
                 <div className="px-1.5 rounded-md relative" key={"export-excel"}>
                   <ButtonComponent
                     icon={"solid/file-excel"}
-                    label="Export"
                     variant="outline"
                     className="!text-foreground"
                     onClick={() => setToggle(`MODAL_EXPORT_${toggleKey}`)}
@@ -451,7 +450,7 @@ export function TableSupervisionComponent({
                 <div className="px-1.5 rounded-md relative" key={"export-pdf"}>
                   <ButtonComponent
                     icon={"solid/file-pdf"}
-                    label="Cetak"
+                    label={l.base.print ? l.base.print() : "Print"}
                     variant="outline"
                     className="!text-foreground"
                     onClick={() => setToggle(`MODAL_PRINT_${toggleKey}`)}
@@ -467,7 +466,7 @@ export function TableSupervisionComponent({
             <div className="pl-1.5 pr-3 mr-2 border-r" key="button-add">
               <ButtonComponent
                 icon={"solid/plus"}
-                label="Tambah Data"
+                label={l.base.add ? l.base.add() : "Add"}
                 size="sm"
                 onClick={() => {
                   setToggle(`MODAL_FORM_${toggleKey}`)
@@ -532,7 +531,7 @@ export function TableSupervisionComponent({
       <FloatingPageComponent
         show={!!toggle[`MODAL_SHOW_${toggleKey}`]}
         onClose={() => setToggle(`MODAL_SHOW_${toggleKey}`, false)}
-        title="Detail"
+        title={l.base.detailTitle ? l.base.detailTitle() : "Detail"}
         className="bg-background"
         footer={renderTableAction(actionControl, undefined, {className: isSm ? "justify-end p-2 bg-background" : "justify-end", size: isSm ? "sm" : "md"})}
       >
@@ -543,7 +542,7 @@ export function TableSupervisionComponent({
       <FloatingPageComponent
         show={!!toggle[`MODAL_FORM_${toggleKey}`]}
         onClose={() => setToggle(`MODAL_FORM_${toggleKey}`, false)}
-        title={!!selected ? "Ubah Data" : "Tambah Data"}
+        title={!!selected ? (l.base.editTitle ? l.base.editTitle() : "Edit") : (l.base.addTitle ? l.base.addTitle() : "Add")}
         className={cn("bg-white", formControl?.modalControl?.className)}
       >
         <div className="p-4">
@@ -555,12 +554,12 @@ export function TableSupervisionComponent({
       <FloatingPageComponent
         show={!!toggle[`MODAL_EXPORT_${toggleKey}`]}
         onClose={() => setToggle(`MODAL_EXPORT_${toggleKey}`, false)}
-        title="Export Ke Excel"
+        title={l.base.exportTitle ? l.base.exportTitle() : "Export"}
         className="bg-white md:w-[1200px] max-w-[1200px]"
       >
         <ExportExcel 
           fetchControl={fetchControl} 
-          filename={"Export - " + title}
+          filename={"export"}
           columnControl={columns?.map((cc) => ({
             label: cc.label || "",
             selector: cc.selector || "",
@@ -572,7 +571,7 @@ export function TableSupervisionComponent({
       <FloatingPageComponent
         show={!!toggle[`MODAL_IMPORT_${toggleKey}`]}
         onClose={() => setToggle(`MODAL_IMPORT_${toggleKey}`, false)}
-        title="Import Dari Excel"
+        title={l.base.importTitle ? l.base.importTitle() : "Import"}
         className="bg-white md:w-[1200px] max-w-[1200px]"
       >
         <ImportExcel 
@@ -605,7 +604,7 @@ export function TableSupervisionComponent({
       <ModalConfirmComponent
         show={!!toggle[`MODAL_DELETE_${toggleKey}`]}
         onClose={() => setToggle(`MODAL_DELETE_${toggleKey}`, false)}
-        title={<>Menghapus Data <span className="font-semibold">&quot;{selected?.[columns?.at(0)?.selector || ""]}&quot;</span> ?</>}
+        title={l.base.deleteTitle ? l.base.deleteTitle({ data: selected?.[columns?.at(0)?.selector || ""] }) : `Delete ${selected?.[columns?.at(0)?.selector || ""]}?`}
         submitControl={{
           onSubmit: {
             ...((fetchControl as ApiType).path 

package/src/table/ControlBar.component.tsx

@@ -1,5 +1,5 @@
 "use client"
-import { Icon, type IconName } from "@skalfa/skalfa-icon";
+import { Icon } from "@skalfa/skalfa-icon";
 
 
 import { ReactNode, useEffect, useRef } from 'react'
@@ -12,6 +12,7 @@ import { OutsideClickComponent } from "../wrap/OutsideClick.component";
 import { ButtonComponent } from "../button/Button.component";
 import { BottomSheetComponent } from "../modal/BottomSheet.component";
 import { FilterComponent, FilterColumnOption } from "./FilterComponent";
+import { useLang } from "@skalfa/skalfa-lang";
 
 export type ControlBarOptionType = "SEARCH" | "SEARCHABLE" | "FILTER" | "SELECTABLE" | "REFRESH" | ReactNode;
 
@@ -56,6 +57,7 @@ export function ControlBarComponent({
   filter,
   onRefresh
 }: ControlBarProps) {
+  const l                    =  useLang();
   const {toggle, setToggle}  =  useToggleContext()
   const { isSm }             =  useResponsive();
 
@@ -65,31 +67,31 @@ export function ControlBarComponent({
     if (options?.includes("SEARCH")) {
       shortcut.register("ctrl+s", () => {
         searchRef.current?.focus()
-      }, "Cari")
+      }, l.base.shortcutSearch ? l.base.shortcutSearch() : "Search")
     }
 
     if (options?.includes("FILTER")) {
       shortcut.register("ctrl+f", () => {
         setToggle("FILTER")
-      }, "Filter")
+      },  l.base.shortcutFilter ? l.base.shortcutFilter() : "Filter")
     }
 
     if (options?.includes("SORT")) {
       shortcut.register("ctrl+o", () => {
         setToggle("SORT")
-      }, "Urutkan")
+      }, l.base.shortcutSort ? l.base.shortcutSort() : "Sort")
     }
 
     if (options?.includes("SELECTABLE")) {
       shortcut.register("ctrl+l", () => {
         setToggle("SELECTABLE")
-      }, "Kolom Ditampilkan")
+      }, l.base.shortcutSelectable ? l.base.shortcutSelectable() : "Select")
     }
 
     if (options?.includes("REFRESH")) {
       shortcut.register("ctrl+shift+r", () => {
         onRefresh?.()
-      }, "Refresh Tabel")
+      }, l.base.shortcutRefresh ? l.base.shortcutRefresh() : "Refresh")
     }
 
     return () => {
@@ -134,7 +136,7 @@ export function ControlBarComponent({
               <div className="control-bar-create-wrapper" key="button-add">
                 <ButtonComponent
                   icon="solid/plus"
-                  label="Tambah Data"
+                  label={l.base.add ? l.base.add() : "Add"}
                   size="sm"
                   onClick={() => setToggle(`MODAL_FORM_${conversion.strSnake(id).toUpperCase()}`)}
                 />
@@ -155,7 +157,7 @@ export function ControlBarComponent({
                 <InputComponent
                   ref={searchRef}
                   name="search"
-                  placeholder="Cari disini..."
+                  placeholder={l.base.searchPlaceholder ? l.base.searchPlaceholder() : "Search here..."}
                   rightIcon="solid/magnifying-glass"
                   value={search}
                   onChange={(e) => onSearch?.(e)}
@@ -213,7 +215,7 @@ export function ControlBarComponent({
                       !toggle.SELECTABLE && "control-bar-dropdown-hidden"
                     )}
                   >
-                    <p className='control-bar-dropdown-title'>Kolom Ditampilkan</p>
+                    <p className='control-bar-dropdown-title'>{l.base.selectable ? l.base.selectable() : "Show Column"}</p>
                     <InputCheckboxComponent
                       vertical
                       name="show_column"
@@ -256,7 +258,7 @@ export function ControlBarComponent({
                       !toggle.SORT && "control-bar-dropdown-hidden"
                     )}
                   >
-                    <p className='control-bar-dropdown-title'>Urut Berdasarkan</p>
+                    <p className='control-bar-dropdown-title'>{l.base.sort ? l.base.sort() : "Sort By"}</p>
                     <div className='control-bar-sort-list'>
                       {sortableOptions?.map((option, key) => {
                         const sortBy = sort?.find((s) => s.split(" ")?.at(0) == option?.selector)?.split(" ")?.at(1) || "";
@@ -376,7 +378,7 @@ export function ControlBarComponent({
                   <div key={key}>
                     <InputComponent
                       name="search"
-                      placeholder="Cari disini..."
+                      placeholder={l.base.searchPlaceholder ? l.base.searchPlaceholder() : "Search here..."}
                       rightIcon="solid/magnifying-glass"
                       value={search}
                       onChange={(e) => onSearch?.(e)}
@@ -418,7 +420,7 @@ export function ControlBarComponent({
               if (option == "SELECTABLE") {
                 return (
                   <div key={key}>
-                    <p className='control-bar-mobile-title'>Kolom Ditampilkan</p>
+                    <p className='control-bar-mobile-title'>{l.base.selectable ? l.base.selectable() : "Show Column"}</p>
                     <InputCheckboxComponent
                       vertical
                       name="show_column"
@@ -445,7 +447,7 @@ export function ControlBarComponent({
               if (option == "SORT") {
                 return sortableOptions?.length ? (
                   <div key={key}>
-                    <p className='control-bar-mobile-title'>Urut Berdasarkan</p>
+                    <p className='control-bar-mobile-title'>{l.base.sort ? l.base.sort() : "Sort By"}</p>
                     <div className='flex flex-col'>
                       {sortableOptions?.map((option, key) => {
                         const sortBy = sort?.find((s) => s.split(" ")?.at(0) == option?.selector)?.split(" ")?.at(1) || "";

package/src/table/FilterComponent.tsx

@@ -11,6 +11,7 @@ import { InputNumberComponent } from "../input/InputNumber.component";
 import { ModalComponent } from "../modal/Modal.component";
 import { SelectComponent } from "../input/Select.component";
 import { useToggleContext } from "@contexts";
+import { useLang } from "@skalfa/skalfa-lang";
 
 type CT = "base" | "title";
 
@@ -65,6 +66,8 @@ export function FilterComponent({
   onMinimize,
   className = "",
 }: AdvancedFilterProps) {
+  const l = useLang();
+  
   const { isSm }                                 =  useResponsive();
   const { toggle, setToggle }                    =  useToggleContext()
   const [filters, setFilters]                    =  useState<ApiFilterType[]>([]);
@@ -116,7 +119,7 @@ export function FilterComponent({
     <>
       <div className={cn("filter-panel", pcn<CT>(className, "base"))}>
         <div className="filter-panel-header">
-          <p className={cn(pcn<CT>(className, "title"))}>Filter</p>
+          <p className={cn(pcn<CT>(className, "title"))}>{l.base.filter ? l.base.filter() : "Filter"}</p>
           <div className="filter-panel-controls">
             <div className="filter-panel-bookmarks-wrapper">
               <ButtonComponent
@@ -150,7 +153,7 @@ export function FilterComponent({
 
             <ButtonComponent
               icon="solid/rotate"
-              label="Bersihkan"
+              label={l.base.clear ? l.base.clear() : "Filter"}
               variant="outline"
               paint="primary"
               className="filter-panel-bookmark-btn icon::text-slate-400"
@@ -181,7 +184,7 @@ export function FilterComponent({
                   <SelectComponent
                     name={`filter_logic_${i}`}
                     options={LOGIC_OPTIONS}
-                    placeholder="Dan/Atau"
+                    placeholder={l.base.filterLogic ? l.base.filterLogic() : "And/Or"}
                     value={f.logic}
                     onChange={(e) => handleChange(i, "logic", e as "and" | "or")}
                     className="filter-input-field"
@@ -196,7 +199,7 @@ export function FilterComponent({
                     label: c.label,
                     value: c.selector,
                   }))}
-                  placeholder="Kolom"
+                  placeholder={l.base.column ? l.base.column() : "Column"}
                   value={f.column}
                   onChange={(e) => handleChange(i, "column", e)}
                   className="filter-input-field"
@@ -207,7 +210,7 @@ export function FilterComponent({
                 <SelectComponent
                   name={`filter_operator_${i}`}
                   options={FILTER_OPERATORS}
-                  placeholder="Operator"
+                  placeholder={l.base.filterOperator ? l.base.filterOperator() : "Operation"}
                   value={f.type}
                   onChange={(e) => handleChange(i, "type", e)}
                   className="filter-input-field"
@@ -254,7 +257,7 @@ export function FilterComponent({
         })}
 
         <ButtonComponent
-          label="Tambahkan"
+          label={l.base.add ? l.base.add() : "Add"}
           icon="solid/plus"
           variant="outline"
           paint="primary"
@@ -267,7 +270,7 @@ export function FilterComponent({
       <ModalComponent
         show={!!toggle["MODAL_BOOKMARK_LIST"]}
         onClose={() => setToggle("MODAL_BOOKMARK_LIST", false)}
-        title="Bookmark Filter"
+        title={l.base.filterBookmarks ? l.base.filterBookmarks() : "Filter Bookmark"}
       >
         <div className="filter-bookmark-list-container">
           {bookmarks?.length ? bookmarks?.map((b, key) => (
@@ -296,7 +299,7 @@ export function FilterComponent({
               </div>
             </div>
           )) : (
-            <div className="filter-bookmark-empty-text"> -- Tidak ada Bookmark --</div>
+            <div className="filter-bookmark-empty-text"> -- {l.base.filterBookmarkEmpty ? l.base.filterBookmarkEmpty() : "No Bookmark"} --</div>
           )}
         </div>
       </ModalComponent>
@@ -304,11 +307,11 @@ export function FilterComponent({
       <ModalComponent
         show={!!toggle["MODAL_BOOKMARK"]}
         onClose={() => setToggle("MODAL_BOOKMARK", false)}
-        title="Bookmark Filter"
+        title={l.base.filterBookmark ? l.base.filterBookmark() : "Filter Bookmark"}
         footer={
           <div className="flex justify-end">
             <ButtonComponent 
-              label="Terapkan"
+              label={l.base.apply ? l.base.apply() : "Apply"}
               onClick={() => {
                 let updated: FilterBookmark[] = [];
 
@@ -339,12 +342,12 @@ export function FilterComponent({
         <div className="filter-bookmark-form-container">
           <SelectComponent
             name={`bookmark_id`}
-            placeholder="Pilih bookmark filter..."
+            placeholder={l.base.filterBookmarkPlaceholder ? l.base.filterBookmarkPlaceholder() : "Pilih bookmark filter..."}
             value={(toggle["MODAL_BOOKMARK"] as { bookmark_id: string })?.bookmark_id ?? ""}
             onChange={e => setToggle("MODAL_BOOKMARK", {...(toggle["MODAL_BOOKMARK"] as object), bookmark_id: e})}
             options={[
               {
-                label: "-- BOOKMARK BARU --",
+                label: `-- ${l.base.filterBookmarkNew ? l.base.filterBookmarkNew() : "New Filter Bookmark"} --`,
                 value: "new",
               },
               ...bookmarks.map((b) => ({
@@ -357,7 +360,7 @@ export function FilterComponent({
           {(toggle["MODAL_BOOKMARK"] as { bookmark_id: string })?.bookmark_id == "new" && (
             <InputComponent 
               name="bookmark_name"
-              placeholder="Masukkan nama bookmark..."
+              placeholder={l.base.filterBookmarkNewPlaceholder ? l.base.filterBookmarkNewPlaceholder() : "Masukkan nama bookmark..."}
               value={(toggle["MODAL_BOOKMARK"] as { bookmark_name: string })?.bookmark_name ?? ""}
               onChange={e => setToggle("MODAL_BOOKMARK", {...(toggle["MODAL_BOOKMARK"] as object), bookmark_name: e})}
               className="filter-bookmark-form-input"
@@ -392,6 +395,8 @@ export function InputFilterValueComponent({
   between,
   multiple,
 }: FilterInputProps) {
+  const l = useLang();
+
   const resolvedType = type || "text";
 
   if (!between) {
@@ -470,7 +475,7 @@ export function InputFilterValueComponent({
             name={`${name}_${pos}`}
             value={Number(currentValue) || 0}
             onChange={handle}
-            placeholder={pos === "from" ? "Dari" : "Sampai"}
+            placeholder={pos === "from" ? l.base.filterFrom ? l.base.filterFrom() : "Dari" : l.base.filterTo ? l.base.filterTo() : "Sampai"}
             className={className}
           />
         );
@@ -480,7 +485,7 @@ export function InputFilterValueComponent({
             name={`${name}_${pos}`}
             value={Number(currentValue) || 0}
             onChange={handle}
-            placeholder={pos === "from" ? "Dari" : "Sampai"}
+            placeholder={pos === "from" ? l.base.filterFrom ? l.base.filterFrom() : "Dari" : l.base.filterTo ? l.base.filterTo() : "Sampai"}
             className={className}
           />
         );
@@ -490,7 +495,7 @@ export function InputFilterValueComponent({
             name={`${name}_${pos}`}
             value={currentValue as string || ""}
             onChange={handle}
-            placeholder={pos === "from" ? "Dari" : "Sampai"}
+            placeholder={pos === "from" ? l.base.filterFrom ? l.base.filterFrom() : "Dari" : l.base.filterTo ? l.base.filterTo() : "Sampai"}
             className={className}
           />
         );
@@ -500,7 +505,7 @@ export function InputFilterValueComponent({
             name={`${name}_${pos}`}
             value={currentValue || ""}
             onChange={(e: any) => handle(e.target.value)}
-            placeholder={pos === "from" ? "Dari" : "Sampai"}
+            placeholder={pos === "from" ? l.base.filterFrom ? l.base.filterFrom() : "Dari" : l.base.filterTo ? l.base.filterTo() : "Sampai"}
             className={className}
           />
         );

package/src/table/Table.component.tsx

@@ -10,6 +10,7 @@ import { ScrollContainerComponent } from "../wrap/ScrollContainer.component";
 import { FilterColumnOption } from "./FilterComponent";
 import { CheckboxComponent } from "../input/Checkbox.component";
 import { SwipeComponent, SwipeActionType } from "../wrap/Swipe.component";
+import { useLang } from "@skalfa/skalfa-lang";
 
 type CT = "controller-bar" | "head-column" | "column" | "row" | "floating-action" | "base";
 
@@ -102,6 +103,8 @@ export function TableComponent({
   
   className = "",
 }: TableProps) {
+  const l = useLang();
+
   const [displayColumns, setDisplayColumns]              =  useState<string[]>([]);
   const [showFloatingAction, setShowFloatingAction]      =  useState(false);
   const [floatingActionActive, setFloatingActionActive]  =  useState<false | number>(false);
@@ -312,14 +315,14 @@ export function TableComponent({
             <div className="w-max min-w-full">
               <div className="table-loading-container">
                 <h1 className="table-loading-text">
-                  Memuat data...
+                  {l.base.tableLoading ? l.base.tableLoading() : ""}
                 </h1>
               </div>
             </div>
           ) : !data || !data.length ? (
             <div className="table-empty-container">
               <h1 className="table-empty-text">
-                Belum Ada Data
+                {l.base.tableEmpty ? l.base.tableEmpty() : "Data empty"}
               </h1>
             </div>
           ) : (
@@ -413,7 +416,7 @@ export function TableComponent({
 
       {!!actionBulking && !!checks?.length && (
         <div className="table-bulk-actions-bar">
-          <div className="table-bulk-actions-title">{checks?.length} Data Terpilih</div>
+          <div className="table-bulk-actions-title">{checks?.length} {l.base.tableSelected ? l.base.tableSelected() : ""}</div>
           <div className="table-bulk-actions-buttons">
             {actionBulking?.(checks)}
           </div>

package/src/wrap/ShortcutProvider.tsx

@@ -4,8 +4,10 @@ import { useEffect, Fragment } from "react";
 import { shortcut } from "@utils"
 import { useToggleContext } from "@contexts"
 import { ModalComponent } from "../modal/Modal.component";
+import { useLang } from "@skalfa/skalfa-lang";
 
 export function ShortcutProvider() {
+  const l = useLang();
   const { setToggle, toggle } = useToggleContext();
   const shortcuts = shortcut.list()
 
@@ -16,7 +18,7 @@ export function ShortcutProvider() {
   useEffect(() => {
     shortcut.register("ctrl+/", () => {
       setToggle("MODAL_SHORTCUT_HELP")
-    }, "List Shortcut")
+    }, l.base.shortcutList ? l.base.shortcutList() : "")
   }, [])
 
   function formatShortcutKey(key: string) {
@@ -39,7 +41,7 @@ export function ShortcutProvider() {
       <ModalComponent 
         show={!!toggle["MODAL_SHORTCUT_HELP"]}
         onClose={() => setToggle("MODAL_SHORTCUT_HELP")}
-        title="Shortcut"
+        title={l.base.shortcut ? l.base.shortcut() : ""}
       >
         <div className="shortcut-help-grid">
           {shortcuts.map(({ key, description }) => (