@skalfa/skalfa-app 1.0.2 → 1.0.5

package/components/base.components/table/FilterComponent.tsx

@@ -1,518 +0,0 @@
-"use client"
-
-import { useState, useEffect } from "react";
-import { faChevronUp, faEllipsisH, faPlus, faRotate, faTimes } from "@fortawesome/free-solid-svg-icons";
-import { ApiFilterType, cn, pcn, useResponsive } from "@utils";
-import {ButtonComponent, ChipComponent, IconButtonComponent, InputComponent, InputCurrencyComponent, InputDateComponent, InputNumberComponent, ModalComponent, SelectComponent} from "@components";
-import { useToggleContext } from "@contexts";
-import { faBookmark } from "@fortawesome/free-regular-svg-icons";
-
-
-
-type CT = "base" | "title";
-
-export type FilterColumnOption = {
-  label: string;
-  selector: string;
-  type: "text" | "number" | "currency" | "date";
-} | {
-  label: string;
-  selector: string;
-  type: "select";
-  options: { label: string; value: any }[];
-};
-
-export type FilterBookmark = {
-  id: string;
-  name: string;
-  filters: ApiFilterType[];
-  createdAt: number;
-};
-
-export interface AdvancedFilterProps {
-  columns     :  FilterColumnOption[];
-  onChange   ?:  (filters: ApiFilterType[]) => void;
-  value      ?:  ApiFilterType[];
-  onMinimize ?:  () => void;
-
-  /** Use custom class with: "title::". */
-  className  ?:  string;
-}
-
-const FILTER_OPERATORS = [
-  { label: "Cari", value: "li" },
-  { label: "Sama", value: "eq" },
-  { label: "Tidak Sama", value: "ne" },
-  { label: "Termasuk", value: "in" },
-  { label: "Tidak Termasuk", value: "ni" },
-  { label: "Antara", value: "bw" },
-];
-
-const LOGIC_OPTIONS = [
-  { label: "Dan", value: "and" },
-  { label: "Atau", value: "or" },
-];
-
-const BOOKMARK_KEY = "filter-bookmarks";
-
-
-
-export function FilterComponent({
-  columns,
-  onChange,
-  value,
-  onMinimize,
-  className = "",
-}: AdvancedFilterProps) {
-  const { isSm }                                 =  useResponsive();
-  const { toggle, setToggle }                    =  useToggleContext()
-  const [filters, setFilters]                    =  useState<ApiFilterType[]>([]);
-
-  const [bookmarks, setBookmarks]                =  useState<FilterBookmark[]>([]);
-
-  const handleChange = (index: number, key: keyof ApiFilterType, value: any) => {
-    const updated = [...filters];
-    updated[index][key] = value;
-
-    if (key === "column") {
-      updated[index].type = "";
-      updated[index].value = "";
-    }
-
-    setFilters(updated);
-  };
-
-  const addFilter = () => {
-    setFilters([
-      ...filters,
-      { column: "", type: "", value: "", logic: filters.length ? "and" : undefined },
-    ]);
-  };
-
-  const removeFilter = (index: number) => {
-    const updated = filters.filter((_, i) => i !== index);
-    setFilters(updated);
-  };
-
-  useEffect(() => {
-    if (onChange) onChange(filters);
-  }, [filters]);
-
-
-  useEffect(() => {}, [value]);
-
-
-  useEffect(() => {
-    setBookmarks(JSON.parse(localStorage.getItem(BOOKMARK_KEY) || "[]"));
-  }, []);
-
-  useEffect(() => {
-    localStorage.setItem(BOOKMARK_KEY, JSON.stringify(bookmarks));
-  }, [bookmarks]);
-
-
-  return (
-    <>
-      <div className={cn("p-4 border rounded-sm", pcn<CT>(className, "base"))}>
-        <div className="flex justify-between items-center mb-4">
-          <p className={cn(pcn<CT>(className, "title"))}>Filter</p>
-          <div className="flex gap-4 items-center">
-            <div className="flex gap-2 items-center">
-              <IconButtonComponent
-                icon={faBookmark}
-                variant="outline"
-                paint="primary"
-                className="text-slate-400 icon::text-slate-400"
-                size="xs"
-                onClick={() => setToggle("MODAL_BOOKMARK", { bookmark_id: "new" })}
-              />
-
-              {!!bookmarks?.length && (
-                <ChipComponent 
-                  items={bookmarks.slice(0, 5).map((b) => b.name)} 
-                  onClick={(_, index) => setFilters(bookmarks[index]?.filters)}
-                  onDelete={(_, index) => setBookmarks(bookmarks.filter(( _, bi: number) => bi != index))}
-                />
-              )}
-
-              {bookmarks?.length > 5 && (
-                <IconButtonComponent
-                  icon={faEllipsisH}
-                  variant="outline"
-                  paint="primary"
-                  className="text-slate-400 icon::text-slate-400"
-                  size="xs"
-                  onClick={() => setToggle("MODAL_BOOKMARK_LIST")}
-                />
-              )}
-            </div>
-
-            <ButtonComponent
-              icon={faRotate}
-              label="Bersihkan"
-              variant="outline"
-              paint="primary"
-              className="text-slate-400 icon::text-slate-400"
-              size="xs"
-              onClick={() => setFilters([])}
-            />
-
-            {onMinimize && (
-              <IconButtonComponent
-                icon={faChevronUp}
-                variant="outline"
-                paint="primary"
-                className="text-slate-400 icon::text-slate-400"
-                size="xs"
-                onClick={onMinimize}
-              />
-            )}
-          </div>
-        </div>
-
-        {filters.map((f, i) => {
-          const column = columns.find((c) => c.selector === f.column);
-
-          return (
-            <div key={i} className="flex flex-wrap  items-center gap-2 mb-2">
-              {i > 0 && (
-                <div className="w-[20%] md:w-[10%]">
-                  <SelectComponent
-                    name={`filter_logic_${i}`}
-                    options={LOGIC_OPTIONS}
-                    placeholder="Dan/Atau"
-                    value={f.logic}
-                    onChange={(e) => handleChange(i, "logic", e as "and" | "or")}
-                    className="text-sm p-2 px-3"
-                  />
-                </div>
-              )}
-
-              <div className={i > 0 ? "w-[30%] md:w-[20%]" : "w-[52.5%] md:w-[30.7%]"}>
-                <SelectComponent
-                  name={`filter_column_${i}`}
-                  options={columns.map((c) => ({
-                    label: c.label,
-                    value: c.selector,
-                  }))}
-                  placeholder="Kolom"
-                  value={f.column}
-                  onChange={(e) => handleChange(i, "column", e)}
-                  className="text-sm p-2 px-3"
-                />
-              </div>
-
-              <div className="w-[35%] md:w-[18%]">
-                <SelectComponent
-                  name={`filter_operator_${i}`}
-                  options={FILTER_OPERATORS}
-                  placeholder="Operator"
-                  value={f.type}
-                  onChange={(e) => handleChange(i, "type", e)}
-                  className="text-sm p-2 px-3"
-                />
-              </div>
-              
-              {isSm && (
-                <IconButtonComponent 
-                  icon={faTimes}
-                  paint="danger"
-                  variant="outline"
-                  onClick={() => removeFilter(i)}
-                  size="xs"
-                />
-              )}
-              
-              {column && (
-                <div className="w-full md:w-[45%]">
-                  <InputFilterValueComponent 
-                    type={column.type}
-                    name={`filter_value_${i}`}
-                    placeholder="..."
-                    value={f.value || ""}
-                    onChange={(e: any) => handleChange(i, "value", e)}
-                    options={column.type === "select" && column.options ? column.options : []}
-                    className="text-sm p-2 px-3"
-                    between={f.type === "bw"}
-                    multiple={["in", "ni"].includes(f.type || "")}
-                  />
-                </div>
-              )}
-
-              {!isSm && (
-                <IconButtonComponent 
-                  icon={faTimes}
-                  paint="danger"
-                  variant="outline"
-                  onClick={() => removeFilter(i)}
-                  size="xs"
-                />
-              )}
-            </div>
-          );
-        })}
-
-        <ButtonComponent
-          label="Tambahkan"
-          icon={faPlus}
-          variant="outline"
-          paint="primary"
-          size={isSm ? "xs" : "sm"}
-          onClick={addFilter}
-          className="md:mt-4"
-        />
-      </div>
-
-      <ModalComponent
-        show={!!toggle["MODAL_BOOKMARK_LIST"]}
-        onClose={() => setToggle("MODAL_BOOKMARK_LIST", false)}
-        title="Bookmark Filter"
-      >
-        <div className="p-4 flex flex-col gap-2">
-          {bookmarks?.length ? bookmarks?.map((b, key) => (
-            <div className="p-2 border rounded-sm flex justify-between" key={key}>
-              <p className="pl-1">{b.name}</p>
-              <div className="flex gap-2">
-                <IconButtonComponent
-                  icon={faPlus}
-                  variant="outline"
-                  paint="primary"
-                  className=""
-                  size="xs"
-                  onClick={() => {
-                    setFilters(b.filters)
-                    setToggle("MODAL_BOOKMARK_LIST", false)
-                  }}
-                />
-                <IconButtonComponent
-                  icon={faTimes}
-                  variant="outline"
-                  paint="danger"
-                  className=""
-                  size="xs"
-                  onClick={() => setBookmarks(bookmarks.filter(( _, bi: number) => bi != key))}
-                />
-              </div>
-            </div>
-          )) : (
-            <div className="text-center text-light-foreground py-4"> -- Tidak ada Bookmark --</div>
-          )}
-        </div>
-      </ModalComponent>
-
-      <ModalComponent
-        show={!!toggle["MODAL_BOOKMARK"]}
-        onClose={() => setToggle("MODAL_BOOKMARK", false)}
-        title="Bookmark Filter"
-        footer={
-          <div className="flex justify-end">
-            <ButtonComponent 
-              label="Terapkan"
-              onClick={() => {
-                let updated: FilterBookmark[] = [];
-
-                if ((toggle["MODAL_BOOKMARK"] as { bookmark_id: string })?.bookmark_id == "new") {
-                  const newBookmark: FilterBookmark = {
-                    id: crypto.randomUUID(),
-                    name: (toggle["MODAL_BOOKMARK"] as { bookmark_name: string })?.bookmark_name || "Tanpa Nama",
-                    filters,
-                    createdAt: Date.now(),
-                  };
-
-                  updated = [newBookmark, ...bookmarks];
-                } else {
-                  updated = bookmarks.map(b =>
-                    b.id === (toggle["MODAL_BOOKMARK"] as { bookmark_id: string })?.bookmark_id
-                      ? { ...b, filters, createdAt: Date.now() }
-                      : b
-                  );
-                }
-
-                setBookmarks(updated)
-                setToggle("MODAL_BOOKMARK", false)
-              }}
-            />
-          </div>
-        }
-      >
-        <div className="p-4">
-          <SelectComponent
-            name={`bookmark_id`}
-            placeholder="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 --",
-                value: "new",
-              },
-              ...bookmarks.map((b) => ({
-                label: b.name,
-                value: b.id,
-              }))
-            ]}
-          />
-
-          {(toggle["MODAL_BOOKMARK"] as { bookmark_id: string })?.bookmark_id == "new" && (
-            <InputComponent 
-              name="bookmark_name"
-              placeholder="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="mt-4"
-            />
-          )}
-        </div>
-      </ModalComponent>
-    </>
-  );
-}
-
-
-
-interface FilterInputProps {
-  type         ?:  string | null;
-  name          :  string;
-  value         :  string | number | number[] | string[] | null;
-  onChange      :  (value: any) => void;
-  options      ?:  { label: string; value: any }[];
-  placeholder  ?:  string;
-  className    ?:  string;
-  between      ?:  boolean;
-  multiple     ?:  boolean;
-}
-
-export function InputFilterValueComponent({
-  type,
-  name,
-  value,
-  onChange,
-  options = [],
-  placeholder = "",
-  className = "",
-  between,
-  multiple,
-}: FilterInputProps) {
-  const resolvedType = type || "text";
-
-  if (!between) {
-    switch (resolvedType) {
-      case "select":
-        return (
-          <SelectComponent
-            name={name}
-            options={options}
-            placeholder={placeholder}
-            value={options.find((o) => o.value === value)?.label}
-            onChange={onChange}
-            className={className}
-          />
-        );
-
-      case "number":
-        return (
-          <InputNumberComponent
-            name={name}
-            value={Number(value) || 0}
-            onChange={onChange}
-            placeholder={placeholder}
-            className={className}
-            multiple={multiple}
-          />
-        );
-
-      case "currency":
-        return (
-          <InputCurrencyComponent
-            name={name}
-            value={Number(value) || 0}
-            onChange={onChange}
-            placeholder={placeholder}
-            className={className}
-          />
-        );
-
-      case "date":
-        return (
-          <InputDateComponent
-            name={name}
-            value={value as string || ""}
-            onChange={onChange}
-            placeholder={placeholder}
-            className={className}
-          />
-        );
-
-      default:
-        return (
-          <InputComponent
-            name={name}
-            value={value || ""}
-            onChange={onChange}
-            placeholder={placeholder}
-            className={className}
-            multiple={multiple}
-          />
-        );
-    }
-  }
-
-  const val         =  Array.isArray(value) ? value : ["", ""];
-  const [from, to]  =  val;
-
-  const renderInput = (pos: "from" | "to") => {
-    const currentValue  =  pos  ===  "from" ? from : to;
-    const handle        =  (v: any) => onChange(pos === "from" ? [v, to] : [from, v]);
-
-    switch (resolvedType) {
-      case "number":
-        return (
-          <InputNumberComponent
-            name={`${name}_${pos}`}
-            value={Number(currentValue) || 0}
-            onChange={handle}
-            placeholder={pos === "from" ? "Dari" : "Sampai"}
-            className={className}
-          />
-        );
-      case "currency":
-        return (
-          <InputCurrencyComponent
-            name={`${name}_${pos}`}
-            value={Number(currentValue) || 0}
-            onChange={handle}
-            placeholder={pos === "from" ? "Dari" : "Sampai"}
-            className={className}
-          />
-        );
-      case "date":
-        return (
-          <InputDateComponent
-            name={`${name}_${pos}`}
-            value={currentValue as string || ""}
-            onChange={handle}
-            placeholder={pos === "from" ? "Dari" : "Sampai"}
-            className={className}
-          />
-        );
-      default:
-        return (
-          <InputComponent
-            name={`${name}_${pos}`}
-            value={currentValue || ""}
-            onChange={(e: any) => handle(e.target.value)}
-            placeholder={pos === "from" ? "Dari" : "Sampai"}
-            className={className}
-          />
-        );
-    }
-  };
-
-  return (
-    <div className="flex items-center gap-2 flex-1">
-      {renderInput("from")}
-      <span>s/d</span>
-      {renderInput("to")}
-    </div>
-  );
-}

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

@@ -1,159 +0,0 @@
-"use client"
-
-import { useEffect, useState } from "react";
-import { faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { cn, pcn } from "@utils";
-import { IconButtonComponent, InputRadioComponent } from "@components";
-
-
-
-type CT = "item" | "active" | "base";
-
-export interface PaginationProps {
-  totalRow    :  number;
-  paginate    :  number;
-  page        :  number;
-  onChange   ?:  (totalRow: number, paginate: number, page: number) => void;
-  className  ?:  string;
-};
-
-
-
-export function PaginationComponent({
-  paginate   =  10,
-  page       =  1,
-  totalRow   =  0,
-  onChange,
-  className  =  "",
-}: PaginationProps) {
-  const [pages, setPages]  =  useState<number[]>([]);
-  const lastPage           =  Math.ceil(totalRow / paginate);
-
-  useEffect(() => {
-    let newPages      =  [];
-    if (totalRow > paginate) {
-      const start     =  Math.max(1, page - 1);
-      const end       =  Math.min(lastPage, page + 1);
-      newPages        =  Array.from({ length: end - start + 1 }, (_, i) => start + i);
-    } else {
-      newPages        =  [1];
-    }
-    setPages(newPages);
-  }, [totalRow, page, paginate]);
-
-  const styles = {
-    base        :  cn("flex items-center justify-end md:justify-between gap-4 md:gap-6", pcn<CT>(className, "base")),
-    item        :  cn("w-8 md:w-12 h-8 text-sm flex justify-center items-center bg-white rounded-[4px] border cursor-pointer",pcn<CT>(className, "item")),
-    activeItem  :  cn("bg-light-primary/50 text-primary",pcn<CT>(className, "active")),
-    overflow    :  "py-1.5 px-2 text-foreground text-sm",
-  };
-
-  if (!totalRow) return;
-
-  return (
-    <div className={styles.base}>
-      <div className="hidden md:flex items-center gap-6">
-        <InputRadioComponent
-          name="paginate"
-          options={[10, 20, 50].map((val) => ({
-            value: val,
-            label: String(val),
-          }))}
-          value={paginate}
-          onChange={(e) => onChange?.(totalRow, Number(e), 1)}
-          className="py-1.5 text-sm bg-white rounded-[4px]"
-        />
-
-        {totalRow > paginate && (
-          <div className="flex items-center gap-2 mt-0.5">
-            {page > 1 && (
-              <button
-                className={styles.overflow}
-                onClick={() => onChange?.(totalRow, paginate, page - 1)}
-              >
-                <FontAwesomeIcon icon={faChevronLeft} />
-              </button>
-            )}
-
-            {page > 2 && (
-              <>
-                <button
-                  className={styles.item}
-                  onClick={() => onChange?.(totalRow, paginate, 1)}
-                >
-                  1
-                </button>
-                {page > 3 && <span className={styles.overflow}>...</span>}
-              </>
-            )}
-
-            {pages.map((p) => (
-              <button
-                key={p}
-                className={cn(styles.item, p === page && styles.activeItem)}
-                onClick={() => onChange?.(totalRow, paginate, p)}
-              >
-                {p}
-              </button>
-            ))}
-
-            {page < lastPage - 1 && (
-              <>
-                {page < lastPage - 2 && (
-                  <span className={styles.overflow}>...</span>
-                )}
-                <button
-                  className={styles.item}
-                  onClick={() => onChange?.(totalRow, paginate, lastPage)}
-                >
-                  {lastPage}
-                </button>
-              </>
-            )}
-
-            {page < lastPage && (
-              <button
-                className={styles.overflow}
-                onClick={() => onChange?.(totalRow, paginate, page + 1)}
-              >
-                <FontAwesomeIcon icon={faChevronRight} />
-              </button>
-            )}
-          </div>
-        )}
-      </div>
-      
-      <div className="hidden md:block text-sm text-foreground">
-        {Math.min(totalRow, paginate * (page - 1) + 1)} - {Math.min(totalRow, paginate * page)} / {totalRow}
-      </div>
-      
-
-      <div className="border rounded-sm flex md:hidden items-center">
-        <div className="text-sm text-foreground px-4 py-2">
-          {Math.min(totalRow, paginate * (page - 1) + 1)} - {Math.min(totalRow, paginate * page)} / {totalRow}
-        </div>
-        
-        {totalRow > paginate && (
-          <div className="flex items-center gap-2 bg-light-primary/50 text-primary p-2">
-            {page > 1 && (
-              <IconButtonComponent 
-                icon={faChevronLeft}
-                onClick={() => onChange?.(totalRow, paginate, page - 1)}
-                size="sm"
-              />
-            )}
-            {/* <div>{page}</div> */}
-            {page < lastPage && (
-              <IconButtonComponent 
-                icon={faChevronRight}
-                onClick={() => onChange?.(totalRow, paginate, page + 1)}
-                size="sm"
-              />
-            )}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}