next-helios-fe 1.0.1 → 1.0.3

package/dist/index.js.LICENSE.txt

@@ -32,6 +32,8 @@ PERFORMANCE OF THIS SOFTWARE.
 
 /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
 
+/*! sheetjs (C) 2013-present SheetJS -- http://sheetjs.com */
+
 /*! svg.draggable.js - v2.2.2 - 2019-01-08
 * https://github.com/svgdotjs/svg.draggable.js
 * Copyright (c) 2019 Wout Fierens; Licensed MIT */

package/package.json

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

package/src/components/table/index.tsx

@@ -1,11 +1,14 @@
 "use client";
 import React, { useState, useEffect, useMemo } from "react";
 import { Icon } from "@iconify/react";
+import { exportToExcel } from "react-json-to-excel";
+import dayjs from "dayjs";
 import { Form, Button, Dropdown } from "../../components";
 import { Action, type ActionProps } from "./action";
 
 interface TableProps {
   title?: string;
+
   header: {
     title: string;
     key: string;
@@ -14,13 +17,14 @@ interface TableProps {
   data: any[];
   options?: {
     hideToolbar?: boolean;
-    hideNumber?: boolean;
+    hideNumberColumn?: boolean;
     checkbox?: boolean;
     height?: "full" | "fit" | "20" | "40" | "80";
     maxRow?: 10 | 20 | 50 | 100;
     border?: boolean;
   };
   actions?: (e: any) => React.ReactNode;
+  onAddData?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
 interface TableComponentProps extends React.FC<TableProps> {
@@ -33,6 +37,7 @@ export const Table: TableComponentProps = ({
   data,
   options,
   actions,
+  onAddData,
 }) => {
   const [search, setSearch] = useState<string>("");
   const [filter, setFilter] = useState<any[]>([]);
@@ -68,12 +73,10 @@ export const Table: TableComponentProps = ({
           return item;
         } else if (
           header.some((headerItem) => {
-            if (headerItem.title !== header[1].title) {
-              return item[headerItem.key as keyof typeof item]
-                ?.toString()
-                .toLowerCase()
-                .includes(search.toLowerCase());
-            }
+            return item[headerItem.key as keyof typeof item]
+              ?.toString()
+              .toLowerCase()
+              .includes(search.toLowerCase());
           })
         ) {
           return item;
@@ -130,22 +133,30 @@ export const Table: TableComponentProps = ({
                 }`}
               />
             </button>
-            <input
-              type="search"
-              className="w-full px-0 pt-0 pb-0.5 border-default border-t-0 border-b border-x-0 bg-secondary-bg text-sm font-normal placeholder:duration-300 placeholder:translate-x-0 [&::-webkit-search-cancel-button]:appearance-none focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-0 focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400"
-              value={
-                filter.find((filterItem) => filterItem.key === item.key)?.value
-              }
-              onChange={(e) => {
-                setFilter(
-                  filter.map((filterItem) => {
-                    return filterItem.key === item.key
-                      ? { ...filterItem, value: e.target.value }
-                      : filterItem;
-                  })
-                );
-              }}
-            />
+            <div className="relative flex items-center">
+              <input
+                type="search"
+                className="w-full ps-6 pe-0 pt-0 pb-0.5 border-default border-t-0 border-b border-x-0 bg-secondary-bg text-sm font-normal placeholder:duration-300 placeholder:translate-x-0 [&::-webkit-search-cancel-button]:appearance-none focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-0 focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400"
+                placeholder="search.."
+                value={
+                  filter.find((filterItem) => filterItem.key === item.key)
+                    ?.value
+                }
+                onChange={(e) => {
+                  setFilter(
+                    filter.map((filterItem) => {
+                      return filterItem.key === item.key
+                        ? { ...filterItem, value: e.target.value }
+                        : filterItem;
+                    })
+                  );
+                }}
+              />
+              <Icon
+                icon="ic:round-search"
+                className="absolute text-sm text-slate-400"
+              />
+            </div>
           </div>
         </th>
       );
@@ -184,7 +195,7 @@ export const Table: TableComponentProps = ({
               />
             </td>
           )}
-          {!options?.hideNumber && (
+          {!options?.hideNumberColumn && (
             <td className="sticky left-0 px-4 py-1 border-b bg-secondary-bg text-center">
               {(page - 1) * maxRow + index + 1}
             </td>
@@ -227,6 +238,17 @@ export const Table: TableComponentProps = ({
         <div className="flex justify-between items-center gap-4 w-full h-fit">
           <span className="text-lg">{title}</span>
           <div className="flex items-center gap-4">
+            {onAddData && (
+              <button
+                type="button"
+                className="p-1.5 rounded-full bg-primary text-white hover:bg-primary-dark"
+                onClick={(e) => {
+                  onAddData && onAddData(e);
+                }}
+              >
+                <Icon icon="ic:round-plus" className="text-2xl" />
+              </button>
+            )}
             <Dropdown
               trigger={
                 <button
@@ -270,7 +292,12 @@ export const Table: TableComponentProps = ({
             />
             <Button
               options={{ variant: "primary", width: "fit" }}
-              onClick={() => {}}
+              onClick={() => {
+                exportToExcel(
+                  filteredData,
+                  `${title}-data_${dayjs().format("YYYY-MM-DD_HH-mm-ss")}`
+                );
+              }}
             >
               Export
             </Button>
@@ -308,8 +335,8 @@ export const Table: TableComponentProps = ({
                   </div>
                 </th>
               )}
-              {!options?.hideNumber && (
-                <th className="sticky left-0 w-min px-4 py-2 bg-secondary-bg font-medium text-center whitespace-nowrap">
+              {!options?.hideNumberColumn && (
+                <th className="sticky left-0 w-min px-4 py-2 z-10 bg-secondary-bg font-medium text-center whitespace-nowrap">
                   <div className="flex flex-col">
                     <span>NO.</span>
                     <div className="invisible w-0 overflow-hidden">