next-helios-fe 1.8.129 → 1.8.130

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-helios-fe",
-  "version": "1.8.129",
+  "version": "1.8.130",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/table/index.tsx

@@ -3,16 +3,19 @@ import React, { useState, useEffect, useRef, useMemo } from "react";
 import { Icon } from "@iconify/react";
 import * as xlsx from "xlsx";
 import dayjs from "dayjs";
-import { Form, Button, Dropdown, Tooltip } from "../../components";
+import utc from "dayjs/plugin/utc";
+import { Form, Button, Dropdown, Tooltip, Calendar } from "../../components";
 import { Action, type ActionProps } from "./action";
 
+dayjs.extend(utc);
+
 interface TableProps {
   title?: string;
   header: {
     title: string;
     key: string;
     defaultHide?: boolean;
-    type?: "basic" | "category" | string;
+    type?: "basic" | "category" | "date" | string;
     render?: (item: any) => React.ReactNode;
   }[];
   data: {
@@ -79,11 +82,13 @@ interface TableProps {
       maxRow: number;
       filter: any[];
       categoryFilter: any[];
+      dateFilter: any[];
       sortBy: any;
     }) => void;
     setValue?: {
       totalData?: number;
       categoryFilter?: { [key: string]: (string | number)[] };
+      dateFilter?: { [key: string]: any[] };
     };
   };
 }
@@ -107,6 +112,7 @@ export const Table: TableComponentProps = ({
   const [search, setSearch] = useState<string>("");
   const [filter, setFilter] = useState<any[]>([]);
   const [categoryFilter, setCategoryFilter] = useState<any>({});
+  const [dateFilter, setDateFilter] = useState<any>({});
   const [maxRow, setMaxRow] = useState<number>(options?.maxRow || 10);
   const [page, setPage] = useState<number>(1);
   const [selected, setSelected] = useState<
@@ -155,6 +161,7 @@ export const Table: TableComponentProps = ({
 
     if (data.length !== 0) {
       const tempCategoryFilter: any = {};
+      const tempDateFilter: any = {};
 
       header
         ?.filter((item) => item.type === "category")
@@ -192,7 +199,19 @@ export const Table: TableComponentProps = ({
           }
         });
 
+      header
+        ?.filter((item) => item.type === "date")
+        ?.map((item) => {
+          if (dynamicTable?.setValue?.dateFilter?.[item.key]) {
+            tempDateFilter[item.key] =
+              dynamicTable?.setValue?.dateFilter[item.key];
+          } else {
+            tempDateFilter[item.key] = [];
+          }
+        });
+
       setCategoryFilter(tempCategoryFilter);
+      setDateFilter(tempDateFilter);
       setIsReadyForDynamicValue(true);
     }
   }, [data, dynamicTable?.setValue?.categoryFilter]);
@@ -272,6 +291,24 @@ export const Table: TableComponentProps = ({
                 item[headerItem.key as keyof typeof item]
               );
             });
+        })
+        ?.filter((item) => {
+          if (
+            Object.keys(dateFilter)?.some(
+              (dateItem) => dateFilter[dateItem].length !== 0
+            )
+          ) {
+            return Object.keys(dateFilter)
+              ?.filter((dateItem) => dateFilter[dateItem].length !== 0)
+              ?.every((dateItem) => {
+                return (
+                  dayjs(item[dateItem]).isAfter(dateFilter[dateItem][0]) &&
+                  dayjs(item[dateItem]).isBefore(dateFilter[dateItem][1])
+                );
+              });
+          } else {
+            return item;
+          }
         });
 
       if (sortBy?.column === "") {
@@ -297,7 +334,7 @@ export const Table: TableComponentProps = ({
         });
       }
     }
-  }, [header, data, filter, categoryFilter, search, sortBy]);
+  }, [header, data, filter, categoryFilter, dateFilter, search, sortBy]);
 
   useEffect(() => {
     if (
@@ -326,6 +363,7 @@ export const Table: TableComponentProps = ({
             maxRow,
             filter,
             categoryFilter,
+            dateFilter,
             sortBy,
           })
         ) {
@@ -336,6 +374,7 @@ export const Table: TableComponentProps = ({
             maxRow,
             filter,
             categoryFilter,
+            dateFilter,
             sortBy,
           });
           setDynamicTableValueCopy({
@@ -345,6 +384,7 @@ export const Table: TableComponentProps = ({
             maxRow,
             filter,
             categoryFilter,
+            dateFilter,
             sortBy,
           });
         }
@@ -358,6 +398,7 @@ export const Table: TableComponentProps = ({
     maxRow,
     filter,
     categoryFilter,
+    dateFilter,
     sortBy,
   ]);
 
@@ -367,7 +408,9 @@ export const Table: TableComponentProps = ({
       return (
         <th
           key={item.key}
-          className="whitespace-nowrap bg-secondary-bg px-4 py-2 text-left font-medium"
+          className={`whitespace-nowrap bg-secondary-bg px-4 py-2 text-left font-medium ${
+            item.type === "date" && "min-w-56"
+          }`}
         >
           <div className="flex flex-col">
             <div className="flex items-center gap-2">
@@ -489,6 +532,50 @@ export const Table: TableComponentProps = ({
                   </Dropdown>
                 </div>
               )}
+              {item?.type === "date" && (
+                <div className="font-normal">
+                  <Dropdown
+                    placement="bottom-end"
+                    dismissOnClick={false}
+                    trigger={
+                      <button
+                        type="button"
+                        className="flex items-center rounded-full hover:bg-secondary-light"
+                      >
+                        <Icon icon="akar-icons:calendar" />
+                      </button>
+                    }
+                  >
+                    <div className="flex flex-col gap-2">
+                      <Calendar
+                        options={{ enableSelectRange: true }}
+                        value={dateFilter[item.key]}
+                        onChange={(e) => {
+                          const tempDateFilter = { ...dateFilter };
+
+                          tempDateFilter[item.key] = e;
+
+                          setDateFilter(tempDateFilter);
+                        }}
+                      />
+                      {dateFilter[item.key]?.length !== 0 && (
+                        <Button
+                          options={{ variant: "danger", position: "center" }}
+                          onClick={() => {
+                            const tempDateFilter = { ...dateFilter };
+
+                            tempDateFilter[item.key] = [];
+
+                            setDateFilter(tempDateFilter);
+                          }}
+                        >
+                          Remove Filter
+                        </Button>
+                      )}
+                    </div>
+                  </Dropdown>
+                </div>
+              )}
             </div>
             {options?.toolbar?.columnSearch?.show !== false && (
               <div
@@ -496,17 +583,47 @@ export const Table: TableComponentProps = ({
                   item?.type === "category" && "invisible"
                 }`}
               >
-                <Icon
-                  icon="ic:round-search"
-                  className="absolute text-sm text-disabled"
-                />
+                {item.type !== "date" && (
+                  <Icon
+                    icon="ic:round-search"
+                    className="absolute text-sm text-disabled"
+                  />
+                )}
                 <input
                   type="search"
-                  className="w-full border-x-0 border-b border-t-0 border-default bg-secondary-bg px-6 pb-0.5 pt-0 text-sm font-normal placeholder:translate-x-0 placeholder:text-silent placeholder:duration-300 focus:border-primary-dark focus:outline-none focus:ring-0 focus:placeholder:translate-x-1 disabled:bg-secondary-light disabled:text-disabled [&::-webkit-search-cancel-button]:appearance-none"
+                  className={`w-full border-x-0 border-t-0 border-default bg-secondary-bg pb-0.5 pt-0 text-sm font-normal placeholder:translate-x-0 placeholder:text-silent placeholder:duration-300 focus:border-primary-dark focus:outline-none focus:ring-0 focus:placeholder:translate-x-1 [&::-webkit-search-cancel-button]:appearance-none ${
+                    item.type !== "date" ? "px-6 border-b" : "border-b-0"
+                  }`}
                   placeholder="Search..."
+                  disabled={item.type === "date"}
                   value={
-                    filter?.find((filterItem) => filterItem.key === item.key)
-                      ?.value || ""
+                    item.type !== "date"
+                      ? filter?.find(
+                          (filterItem) => filterItem.key === item.key
+                        )?.value || ""
+                      : dateFilter[item.key]?.length !== 0
+                      ? `${
+                          dayjs(dateFilter[item.key]?.[0])
+                            .utc()
+                            .local()
+                            .format("MMM YYYY") ===
+                          dayjs(dateFilter[item.key]?.[1])
+                            .utc()
+                            .local()
+                            .format("MMM YYYY")
+                            ? dayjs(dateFilter[item.key]?.[0])
+                                .utc()
+                                .local()
+                                .format("DD")
+                            : dayjs(dateFilter[item.key]?.[0])
+                                .utc()
+                                .local()
+                                .format("DD MMM YYYY")
+                        } - ${dayjs(dateFilter[item.key]?.[1])
+                          .utc()
+                          .local()
+                          .format("DD MMM YYYY")}`
+                      : "-"
                   }
                   onChange={(e) => {
                     setFilter(