@addsign/moje-agenda-shared-lib 0.0.47 → 0.0.49

package/dist/components/{DataTable.js → datatable/DataTable.js}

@@ -1,11 +1,11 @@
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
-import '../assets/tailwind.css';/* empty css                   */
-import Button from "./Button.js";
-import { M as MdOutlineFilterAlt, a as MdOutlineFilterAltOff, b as MdSearch, c as MdClose, d as MdArrowBack, e as MdArrowForward, f as MdArrowUpward, g as MdArrowDownward } from "../index-ZA1ctELQ.js";
-import FormField from "./form/FormField.js";
-import Spinner from "./Spinner.js";
-import "../contexts/FederationContext.js";
+import '../../assets/tailwind.css';/* empty css                      */
+import Button from "../Button.js";
+import { M as MdOutlineFilterAlt, a as MdOutlineFilterAltOff, b as MdSearch, c as MdClose, d as MdArrowBack, e as MdArrowForward, f as MdArrowUpward, g as MdArrowDownward } from "../../index-ZA1ctELQ.js";
+import FormField from "../form/FormField.js";
+import Spinner from "../Spinner.js";
+import "../../contexts/FederationContext.js";
 function DataTable({
   items,
   columns,
@@ -285,7 +285,7 @@ function DataTable({
           {
             className: "px-5 py-3 border-b border-gray-200 bg-white text-sm items-center justify-center align-middle",
             colSpan: columns.length,
-            children: "Žádná data"
+            children: "Žádná data"
           },
           "td-nodata"
         ) }, "tr-nodata   ")

package/dist/components/datatable/DataTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.js","sources":["../../../lib/components/datatable/DataTable.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\r\n\r\nimport { Button, FormField, Spinner } from \"../../main\";\r\nimport {\r\n  MdArrowBack,\r\n  MdArrowDownward,\r\n  MdArrowForward,\r\n  MdArrowUpward,\r\n  MdClose,\r\n  MdOutlineFilterAlt,\r\n  MdOutlineFilterAltOff,\r\n  MdSearch,\r\n} from \"react-icons/md\";\r\n\r\nexport interface DataTableColumn<T> {\r\n  key: keyof T | \"actions\";\r\n  header: string;\r\n  render?: (item: T) => React.ReactNode;\r\n  actions?: DataTableAction<T>[];\r\n  filterType?: string;\r\n  classes?: string;\r\n  type?: \"string\" | \"number\" | \"date\";\r\n  filterOperator?: \">=\" | \"<=\" | \"==\";\r\n}\r\nexport interface DataTableAction<T> {\r\n  label: string;\r\n  onClick: (item: T) => void;\r\n  visible?: (item: T) => boolean;\r\n  icon?: React.ReactNode;\r\n}\r\ninterface DataTableProps<T> {\r\n  items: T[];\r\n  columns: DataTableColumn<T | \"actions\">[];\r\n  itemsPerPage?: number;\r\n  title?: string;\r\n  subtitle?: string;\r\n  allowSearch?: boolean;\r\n  isLoading?: boolean;\r\n}\r\n\r\ntype DataTableInternalItems = {\r\n  _isHighlighted?: boolean;\r\n};\r\n\r\nfunction DataTable<T extends DataTableInternalItems>({\r\n  items,\r\n  columns,\r\n  itemsPerPage = 10,\r\n  title,\r\n  subtitle,\r\n  allowSearch = true,\r\n  isLoading,\r\n}: DataTableProps<T>) {\r\n  const [currentPage, setCurrentPage] = useState(0);\r\n  const [fulltextSearch, setFulltextSearch] = useState(\"\");\r\n  const [filterOptions, setFilterOptions] = useState<Record<string, any[]>>({});\r\n  const [columnFilters, setColumnFilters] = useState<Record<string, string>>(\r\n    {}\r\n  );\r\n\r\n  const [showColFilters, setShowColFilters] = useState(false);\r\n\r\n  const [sortConfig, setSortConfig] = useState<{\r\n    key: keyof T | \"actions\";\r\n    direction: \"ascending\" | \"descending\" | null;\r\n  } | null>(null);\r\n\r\n  useEffect(() => {\r\n    const newFilterOptions: Record<string, any[]> = {};\r\n\r\n    columns.forEach((column) => {\r\n      if (column.filterType && items.length > 0) {\r\n        const uniqueOptions = new Set(\r\n          items.map((item) => item[column.key as keyof T])\r\n        );\r\n        // Convert Set to an array of { value, label } objects\r\n        let sortedOptions = Array.from(uniqueOptions).map((option) => ({\r\n          value: option,\r\n          label:\r\n            column.type === \"date\"\r\n              ? new Date(option as string)?.toLocaleDateString()\r\n              : option,\r\n        }));\r\n\r\n        // Sort the options array by label in ascending alphabetical order\r\n        if (column.type === \"date\") {\r\n          // Convert labels to timestamps and sort accordingly\r\n          sortedOptions = sortedOptions.sort((a, b) => {\r\n            const timestampA = new Date(a.value as string).getTime();\r\n            const timestampB = new Date(b.value as string).getTime();\r\n            return timestampA - timestampB;\r\n          });\r\n        } else {\r\n          // Sort alphabetically by label for non-date columns\r\n          sortedOptions = sortedOptions.sort((a, b) =>\r\n            (a.label as string)?.localeCompare(b.label as string)\r\n          );\r\n        }\r\n\r\n        // Add a default option if needed\r\n        newFilterOptions[column.key as string] = [\r\n          { value: \"\", label: \"\" },\r\n          ...sortedOptions,\r\n        ];\r\n      }\r\n    });\r\n\r\n    setFilterOptions(newFilterOptions);\r\n  }, [items, columns]);\r\n\r\n  const requestSort = (key: keyof T | \"actions\") => {\r\n    if (sortConfig?.key === key && sortConfig.direction !== null) {\r\n      setSortConfig({\r\n        key,\r\n        direction: sortConfig.direction === \"ascending\" ? \"descending\" : null,\r\n      });\r\n    } else {\r\n      setSortConfig({ key, direction: \"ascending\" });\r\n    }\r\n  };\r\n\r\n  const getSortIcon = (key: keyof T | \"actions\") => {\r\n    if (sortConfig?.key === key) {\r\n      return sortConfig.direction === \"ascending\" ? (\r\n        <MdArrowUpward fontSize=\"small\" />\r\n      ) : sortConfig.direction === \"descending\" ? (\r\n        <MdArrowDownward fontSize=\"small\" />\r\n      ) : (\r\n        <MdArrowUpward\r\n          fontSize=\"small\"\r\n          className=\"text-gray-300 invisible group-hover:visible \"\r\n        />\r\n      );\r\n    }\r\n    return (\r\n      <MdArrowUpward\r\n        fontSize=\"small\"\r\n        className=\"text-gray-300 invisible group-hover:visible \"\r\n      />\r\n    );\r\n  };\r\n\r\n  const sortedItems = sortConfig?.direction\r\n    ? [...items].sort((a, b) => {\r\n        const aValue = a[sortConfig.key as keyof T];\r\n        const bValue = b[sortConfig.key as keyof T];\r\n\r\n        // Check if values are Date objects\r\n        if (aValue instanceof Date && bValue instanceof Date) {\r\n          return sortConfig.direction === \"ascending\"\r\n            ? aValue.getTime() - bValue.getTime()\r\n            : bValue.getTime() - aValue.getTime();\r\n        }\r\n        if (typeof aValue === \"number\" && typeof bValue === \"number\") {\r\n          return sortConfig.direction === \"ascending\"\r\n            ? aValue - bValue\r\n            : bValue - aValue;\r\n        }\r\n        return sortConfig.direction === \"ascending\"\r\n          ? String(aValue).localeCompare(String(bValue))\r\n          : String(bValue).localeCompare(String(aValue));\r\n      })\r\n    : items;\r\n\r\n  // const searchableKeys = new Set(\r\n  //   columns.filter((col) => !col.actions).map((col) => col.key)\r\n  // );\r\n\r\n  const filteredItems = sortedItems.filter((item: any) => {\r\n    const textSearchMatch = fulltextSearch\r\n      ? columns.some((column) => {\r\n          const value = item[column.key];\r\n          return (\r\n            (typeof value === \"string\" || typeof value === \"number\") &&\r\n            value\r\n              .toString()\r\n              .toLowerCase()\r\n              .includes(fulltextSearch.toLowerCase())\r\n          );\r\n        })\r\n      : true;\r\n\r\n    const columnFiltersMatch = columns.every((column) => {\r\n      //   debugger;\r\n      const filterValue = columnFilters[column.key as string];\r\n      if (!filterValue) return true; // Ignore filter if 'None' is selected\r\n\r\n      const itemValue = item[column.key];\r\n      if ((column.type || typeof itemValue) === \"string\") {\r\n        if (column.filterOperator == \">=\") {\r\n          return itemValue.toLowerCase() >= filterValue.toLowerCase();\r\n        } else if (column.filterOperator == \"<=\") {\r\n          return itemValue.toLowerCase() <= filterValue.toLowerCase();\r\n        }\r\n        if (column.filterType == \"text\") {\r\n          return itemValue.toLowerCase().includes(filterValue.toLowerCase());\r\n        } else {\r\n          return itemValue.toLowerCase() == filterValue.toLowerCase();\r\n        }\r\n      } else {\r\n        if (column.filterOperator == \">=\") {\r\n          return itemValue >= filterValue;\r\n        } else if (column.filterOperator == \"<=\") {\r\n          return itemValue <= filterValue;\r\n        } else {\r\n          return itemValue == filterValue;\r\n        }\r\n      }\r\n    });\r\n\r\n    return textSearchMatch && columnFiltersMatch;\r\n  });\r\n\r\n  // Pagination logic\r\n  const indexOfLastItem = (currentPage + 1) * itemsPerPage;\r\n  const indexOfFirstItem = indexOfLastItem - itemsPerPage;\r\n  const currentItems = filteredItems.slice(indexOfFirstItem, indexOfLastItem);\r\n\r\n  const nextPage = () => {\r\n    setCurrentPage(currentPage + 1);\r\n  };\r\n\r\n  const prevPage = () => {\r\n    setCurrentPage(currentPage - 1);\r\n  };\r\n  const handleSearchChanged = (\r\n    e: React.ChangeEvent<\r\n      HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement\r\n    >\r\n  ) => {\r\n    setFulltextSearch(e.target?.value);\r\n    setCurrentPage(0);\r\n  };\r\n\r\n  const totalPages = Math.max(\r\n    1,\r\n    Math.ceil(filteredItems.length / itemsPerPage)\r\n  );\r\n\r\n  // Pagination display logic\r\n  const paginationDisplay = `Strana ${currentPage + 1} z ${totalPages}`;\r\n\r\n  const filterHandler = (key: keyof T, value: string) => {\r\n    setColumnFilters((prev) => ({ ...prev, [key]: value }));\r\n    setCurrentPage(0);\r\n  };\r\n\r\n  if (isLoading) return <Spinner />;\r\n  return (\r\n    <>\r\n      <div className=\"container  shadow-lg border border-gray-200 rounded-xl overflow-hidden \">\r\n        {(title || subtitle || allowSearch) && (\r\n          <div className=\"p-5 leading-9 flex \">\r\n            <div className=\"flex-grow\">\r\n              {title && (\r\n                <h1 className=\"font-semibold text-xl leading-[42px] \">\r\n                  {title}\r\n                </h1>\r\n              )}\r\n              {subtitle && (\r\n                <p className=\"font-normal text-gray-600\">{subtitle}</p>\r\n              )}\r\n            </div>\r\n            <div\r\n              className=\"flex items-center text-xl h-full p-3 mr-5 cursor-pointer text-gray-500 \"\r\n              onClick={() => setShowColFilters(!showColFilters)}\r\n            >\r\n              {!showColFilters && <MdOutlineFilterAlt />}\r\n              {showColFilters && <MdOutlineFilterAltOff />}\r\n            </div>\r\n            {allowSearch && (\r\n              <div className=\"\">\r\n                <FormField\r\n                  placeholder=\"Vyhledávání\"\r\n                  name=\"search\"\r\n                  onInputChange={handleSearchChanged}\r\n                  type=\"text\"\r\n                  value={fulltextSearch}\r\n                >\r\n                  {\" \"}\r\n                  <div className=\" text-gray-500 leading-5 flex items-center h-full\">\r\n                    {!fulltextSearch && <MdSearch></MdSearch>}\r\n                    {fulltextSearch && (\r\n                      <MdClose onClick={() => setFulltextSearch(\"\")}></MdClose>\r\n                    )}\r\n                  </div>\r\n                </FormField>\r\n              </div>\r\n            )}\r\n          </div>\r\n        )}\r\n        <div className=\"overflow-x-auto\">\r\n          <table className=\"w-full leading-normal\">\r\n            <thead>\r\n              {showColFilters &&\r\n                columns.findIndex((it) => it.filterType) > -1 && (\r\n                  <tr>\r\n                    {columns.map(({ key, header, filterType }) => (\r\n                      <th\r\n                        key={String(key) + \"_filter\"}\r\n                        //  className=\"cursor-pointer px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-sm font-medium text-gray-600 uppercase tracking-wider\"\r\n                        className={` font-medium cursor-pointer leading-9 text-xs text-left pl-5 pb-5 text-gray-600  ${\r\n                          !title && !subtitle ? \"border-t-0\" : \"\"\r\n                        }`}\r\n                      >\r\n                        {filterType && (\r\n                          <FormField\r\n                            label={header}\r\n                            name={String(key) + \"_filter\"}\r\n                            onInputChange={(e) =>\r\n                              filterHandler(key as keyof T, e.target.value)\r\n                            }\r\n                            type={filterType}\r\n                            options={filterOptions[String(key)] || []}\r\n                            value={columnFilters[String(key)]}\r\n                            clearable\r\n                          ></FormField>\r\n                        )}\r\n                      </th>\r\n                    ))}\r\n                  </tr>\r\n                )}\r\n              <tr>\r\n                {columns.map(({ key, header, actions }) => (\r\n                  <th\r\n                    key={String(key)}\r\n                    //  className=\"cursor-pointer px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-sm font-medium text-gray-600 uppercase tracking-wider\"\r\n                    className={`group font-medium cursor-pointer leading-9 text-xs text-left px-5 text-gray-600 bg bg-gray-50 border-t border-b border-gray-200 ${\r\n                      !title && !subtitle ? \"border-t-0\" : \"\"\r\n                    }`}\r\n                    onClick={() => requestSort(key)}\r\n                  >\r\n                    <span className=\"inline-flex items-center gap-2\">\r\n                      {header} {!actions ? getSortIcon(key) : \"\"}\r\n                    </span>\r\n                  </th>\r\n                ))}\r\n              </tr>\r\n            </thead>\r\n\r\n            <tbody>\r\n              {currentItems.map((item, rowIndex) => (\r\n                <tr\r\n                  key={rowIndex}\r\n                  className={`${\r\n                    item._isHighlighted ? \" bg-gray-200  \" : \" \"\r\n                  } hover:bg-gray-50  border-gray-200 border-b text-sm `}\r\n                >\r\n                  {columns.map(({ render, actions, classes }, colIndex) => (\r\n                    <td\r\n                      key={`${rowIndex}-${colIndex}`}\r\n                      className={`px-5 py-2\r\n                   ${\r\n                     colIndex == 0\r\n                       ? \" font-medium text-gray-900\"\r\n                       : \" text-gray-700\"\r\n                   } ${classes}`}\r\n                    >\r\n                      {render ? render(item) : \"\"}\r\n                      {actions &&\r\n                        actions\r\n                          .filter((it) => {\r\n                            if (it.visible) {\r\n                              return it.visible(item);\r\n                            } else true;\r\n                          })\r\n                          .map((action, actionIndex) => (\r\n                            <div\r\n                              key={`${rowIndex}-${colIndex}-${actionIndex}`}\r\n                              className=\"flex inline-flex align-middle\"\r\n                            >\r\n                              {action.icon && (\r\n                                <Button\r\n                                  variant=\"icon\"\r\n                                  onClick={() => action.onClick(item)}\r\n                                >\r\n                                  {\" \"}\r\n                                  {action.icon}\r\n                                </Button>\r\n                              )}\r\n                              {!action.icon && (\r\n                                <Button\r\n                                  variant=\"transparent\"\r\n                                  onClick={() => action.onClick(item)}\r\n                                >\r\n                                  {\" \"}\r\n                                  {action.label}\r\n                                </Button>\r\n                              )}\r\n                            </div>\r\n                          ))}\r\n                    </td>\r\n                  ))}\r\n                </tr>\r\n              ))}\r\n              {currentItems.length == 0 && (\r\n                <tr key=\"tr-nodata   \">\r\n                  <td\r\n                    key=\"td-nodata\"\r\n                    className=\"px-5 py-3 border-b border-gray-200 bg-white text-sm items-center justify-center align-middle\"\r\n                    colSpan={columns.length}\r\n                  >\r\n                    Žádná data\r\n                  </td>\r\n                </tr>\r\n              )}\r\n            </tbody>\r\n          </table>\r\n        </div>\r\n        <div className=\"w-full p-5 grid grid-cols-3\">\r\n          <div className=\"text-left items-start justify-start\">\r\n            {currentPage !== 0 && (\r\n              <Button\r\n                variant=\"secondary\"\r\n                onClick={prevPage}\r\n                className=\"flex items-center float-left\"\r\n              >\r\n                <MdArrowBack className=\"mr-1.5\" /> Předchozí\r\n              </Button>\r\n            )}\r\n          </div>\r\n          <div className=\" text-center text-xs text-gray-800\">\r\n            {paginationDisplay} {/* Updated to use dynamic page numbers */}\r\n          </div>\r\n          <div className=\"text-right items-end justify-end\">\r\n            {indexOfLastItem < filteredItems.length && (\r\n              <Button\r\n                variant=\"secondary\"\r\n                onClick={nextPage}\r\n                className=\"flex items-center float-right\"\r\n              >\r\n                Následující <MdArrowForward className=\"ml-2\" size={20} />\r\n              </Button>\r\n            )}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </>\r\n  );\r\n}\r\n\r\nexport default DataTable;\r\n"],"names":[],"mappings":"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"}

package/dist/components/datatable/DataTableServer.d.ts

@@ -0,0 +1,15 @@
+import { DataTableColumn } from '../../main';
+
+interface DataTableServerProps<T> {
+    url: string;
+    columns: DataTableColumn<T | "actions">[];
+    itemsPerPage?: number;
+    title?: string;
+    subtitle?: string;
+    allowSearch?: boolean;
+}
+type DataTableInternalItems = {
+    _isHighlighted?: boolean;
+};
+declare function DataTableServer<T extends DataTableInternalItems>({ url, columns, itemsPerPage, title, subtitle, allowSearch, }: DataTableServerProps<T>): import("react/jsx-runtime").JSX.Element;
+export default DataTableServer;

package/dist/components/datatable/DataTableServer.js

@@ -0,0 +1,333 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import '../../assets/tailwind.css';/* empty css                      */
+import Button from "../Button.js";
+import { M as MdOutlineFilterAlt, a as MdOutlineFilterAltOff, b as MdSearch, c as MdClose, d as MdArrowBack, e as MdArrowForward, f as MdArrowUpward, g as MdArrowDownward } from "../../index-ZA1ctELQ.js";
+import FormField from "../form/FormField.js";
+import "../../contexts/FederationContext.js";
+import { useFederationContext } from "../../contexts/useFederationContext.js";
+import { handleErrors } from "../../utils/handleErrors.js";
+function DataTableServer({
+  url,
+  columns,
+  itemsPerPage = 10,
+  title,
+  subtitle,
+  allowSearch = true
+}) {
+  var _a;
+  const federationContext = useFederationContext();
+  const [data, setData] = useState();
+  const [isLoading, setIsLoading] = useState(false);
+  const [currentPage, setCurrentPage] = useState(0);
+  const [fulltextSearch, setFulltextSearch] = useState("");
+  const [filterOptions, setFilterOptions] = useState({});
+  const [columnFilters, setColumnFilters] = useState(
+    {}
+  );
+  const [showColFilters, setShowColFilters] = useState(false);
+  const [sortConfig, setSortConfig] = useState(null);
+  useEffect(() => {
+    setIsLoading(true);
+    federationContext.apiClient.get(url, {
+      params: {
+        ...columnFilters,
+        pageSize: itemsPerPage,
+        page: currentPage,
+        sortBy: sortConfig == null ? void 0 : sortConfig.sortParam,
+        sortDirection: sortConfig == null ? void 0 : sortConfig.direction
+      }
+    }).then((response) => {
+      setData(response.data);
+      setIsLoading(false);
+    }).catch((error) => {
+      console.error("Error fetching data:", error);
+      handleErrors(error, federationContext.emitter);
+      setIsLoading(false);
+    });
+  }, [
+    url,
+    columnFilters,
+    itemsPerPage,
+    federationContext,
+    currentPage,
+    sortConfig
+  ]);
+  useEffect(() => {
+    const fetchFilterOptions = async (column) => {
+      if (!column.filterSource)
+        ;
+      else {
+        try {
+          const response = await federationContext.apiClient.get(
+            column.filterSource
+          );
+          const options = response.data.map((item) => ({
+            value: item[column.filterValueKey],
+            label: item[column.filterLabelKey]
+          }));
+          return options;
+        } catch (error) {
+          console.error("Error fetching filter options:", error);
+          return [];
+        }
+      }
+    };
+    const updateFilterOptions = async () => {
+      const newFilterOptions = {};
+      for (const column of columns) {
+        if (column.filterType && column.filterSource && column.filterValueKey && column.filterLabelKey && column.filterParam) {
+          const options = await fetchFilterOptions(column);
+          if (options) {
+            newFilterOptions[column.filterParam] = [
+              { value: "", label: "" },
+              ...options
+            ];
+          }
+        }
+      }
+      console.log(
+        "%clibcomponentsdatatableDataTable.tsx:142 newFilterOptions",
+        "color: #007acc;",
+        newFilterOptions
+      );
+      setFilterOptions(newFilterOptions);
+    };
+    console.log(
+      "%clibcomponentsDataTable.tsx:162 items, columns",
+      "color: #007acc;",
+      columns
+    );
+    updateFilterOptions();
+  }, [columns]);
+  const requestSort = (sortParam) => {
+    setSortConfig((prevSortConfig) => {
+      if ((prevSortConfig == null ? void 0 : prevSortConfig.sortParam) === sortParam && prevSortConfig.direction !== null) {
+        return prevSortConfig.direction === "ascending" ? { sortParam, direction: "descending" } : null;
+      } else {
+        return { sortParam, direction: "ascending" };
+      }
+    });
+  };
+  const getSortIcon = (sortParam) => {
+    if ((sortConfig == null ? void 0 : sortConfig.sortParam) === sortParam) {
+      return sortConfig.direction === "ascending" ? /* @__PURE__ */ jsx(MdArrowUpward, { fontSize: "small" }) : sortConfig.direction === "descending" ? /* @__PURE__ */ jsx(MdArrowDownward, { fontSize: "small" }) : /* @__PURE__ */ jsx(
+        MdArrowUpward,
+        {
+          fontSize: "small",
+          className: "text-gray-300 invisible group-hover:visible "
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      MdArrowUpward,
+      {
+        fontSize: "small",
+        className: "text-gray-300 invisible group-hover:visible "
+      }
+    );
+  };
+  const nextPage = () => {
+    setCurrentPage(currentPage + 1);
+  };
+  const prevPage = () => {
+    setCurrentPage(currentPage - 1);
+  };
+  const handleSearchChanged = (e) => {
+    var _a2;
+    console.log(
+      "%clibcomponentsdatatableDataTable.tsx:238 e",
+      "color: #007acc;",
+      e
+    );
+    setFulltextSearch((_a2 = e.target) == null ? void 0 : _a2.value);
+    setCurrentPage(0);
+  };
+  const paginationDisplay = `Strana ${currentPage + 1} z ${data == null ? void 0 : data.totalPages}`;
+  const filterHandler = (filterParam, value) => {
+    console.log(
+      "%clibcomponentsdatatableDataTable.tsx:223 object filterParam,      value,      columnFilters ",
+      "color: #007acc;",
+      filterParam,
+      value,
+      columnFilters
+    );
+    setColumnFilters((prev) => ({ ...prev, [filterParam]: value }));
+    setCurrentPage(0);
+  };
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "container  shadow-lg border border-gray-200 rounded-xl overflow-hidden ", children: [
+    (title || subtitle || allowSearch) && /* @__PURE__ */ jsxs("div", { className: "p-5 leading-9 flex ", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex-grow", children: [
+        title && /* @__PURE__ */ jsx("h1", { className: "font-semibold text-xl leading-[42px] ", children: title }),
+        subtitle && /* @__PURE__ */ jsx("p", { className: "font-normal text-gray-600", children: subtitle })
+      ] }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex items-center text-xl h-full p-3  cursor-pointer text-gray-500 ",
+          onClick: () => setShowColFilters(!showColFilters),
+          children: [
+            !showColFilters && /* @__PURE__ */ jsx(MdOutlineFilterAlt, {}),
+            showColFilters && /* @__PURE__ */ jsx(MdOutlineFilterAltOff, {})
+          ]
+        }
+      ),
+      allowSearch && /* @__PURE__ */ jsx("div", { className: "ml-5", children: /* @__PURE__ */ jsxs(
+        FormField,
+        {
+          placeholder: "Vyhledávání",
+          name: "search",
+          onInputChange: handleSearchChanged,
+          type: "text",
+          value: fulltextSearch,
+          children: [
+            " ",
+            /* @__PURE__ */ jsxs("div", { className: " text-gray-500 leading-5 flex items-center h-full", children: [
+              !fulltextSearch && /* @__PURE__ */ jsx(MdSearch, {}),
+              fulltextSearch && /* @__PURE__ */ jsx(MdClose, { onClick: () => setFulltextSearch("") })
+            ] })
+          ]
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs("table", { className: "w-full leading-normal", children: [
+      /* @__PURE__ */ jsxs("thead", { children: [
+        showColFilters && columns.findIndex((it) => it.filterType) > -1 && /* @__PURE__ */ jsx("tr", { children: columns.map(({ key, header, filterType, filterParam }) => /* @__PURE__ */ jsx(
+          "th",
+          {
+            id: String(key) + "_filter",
+            className: ` font-medium cursor-pointer leading-9 text-xs text-left pl-5 pb-5 text-gray-600  ${!title && !subtitle ? "border-t-0" : ""}`,
+            children: filterType && /* @__PURE__ */ jsx(
+              FormField,
+              {
+                label: header,
+                name: String(key) + "_filter",
+                onInputChange: (e) => filterHandler(
+                  filterParam,
+                  e.target.value
+                ),
+                type: filterType,
+                options: filterOptions[String(filterParam)] || [],
+                value: columnFilters[String(key)],
+                clearable: true
+              }
+            )
+          },
+          String(key) + "_filter"
+        )) }),
+        /* @__PURE__ */ jsx("tr", { children: columns.map(({ key, header, actions, sortParam }) => /* @__PURE__ */ jsx(
+          "th",
+          {
+            className: `group font-medium leading-9 text-xs text-left px-5 text-gray-600 bg bg-gray-50 border-t border-b border-gray-200 ${!title && !subtitle ? "border-t-0" : ""} ${sortParam ? " cursor-pointer " : ""}`,
+            onClick: () => sortParam ? requestSort(sortParam) : () => {
+            },
+            children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2", children: [
+              header,
+              " ",
+              !actions && sortParam ? getSortIcon(sortParam) : ""
+            ] })
+          },
+          String(key)
+        )) })
+      ] }),
+      !isLoading && /* @__PURE__ */ jsxs("tbody", { children: [
+        data && data.content && data.content.map((item, rowIndex) => /* @__PURE__ */ jsx(
+          "tr",
+          {
+            className: `${item._isHighlighted ? " bg-gray-200  " : " "} hover:bg-gray-50  border-gray-200 border-b text-sm `,
+            children: columns.map(({ render, actions, classes }, colIndex) => /* @__PURE__ */ jsxs(
+              "td",
+              {
+                className: `px-5 py-2
+                   ${colIndex == 0 ? " font-medium text-gray-900" : " text-gray-700"} ${classes || ""}`,
+                children: [
+                  render ? render(item) : "",
+                  actions && actions.filter((it) => {
+                    if (it.visible) {
+                      return it.visible(item);
+                    }
+                  }).map((action, actionIndex) => /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: "flex inline-flex align-middle",
+                      children: [
+                        action.icon && /* @__PURE__ */ jsxs(
+                          Button,
+                          {
+                            variant: "icon",
+                            onClick: () => action.onClick(item),
+                            children: [
+                              " ",
+                              action.icon
+                            ]
+                          }
+                        ),
+                        !action.icon && /* @__PURE__ */ jsxs(
+                          Button,
+                          {
+                            variant: "transparent",
+                            onClick: () => action.onClick(item),
+                            children: [
+                              " ",
+                              action.label
+                            ]
+                          }
+                        )
+                      ]
+                    },
+                    `${rowIndex}-${colIndex}-${actionIndex}`
+                  ))
+                ]
+              },
+              `${rowIndex}-${colIndex}`
+            ))
+          },
+          rowIndex
+        )),
+        ((_a = data == null ? void 0 : data.content) == null ? void 0 : _a.length) == 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+          "td",
+          {
+            className: "px-5 py-3 border-b border-gray-200 bg-white text-sm items-center justify-center align-middle",
+            colSpan: columns.length,
+            children: "Žádná data"
+          },
+          "td-nodata"
+        ) }, "tr-nodata   ")
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "w-full p-5 grid grid-cols-3", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-left items-start justify-start", children: data && !data.first && /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "secondary",
+          onClick: prevPage,
+          className: "flex items-center float-left",
+          children: [
+            /* @__PURE__ */ jsx(MdArrowBack, { className: "mr-1.5" }),
+            " Předchozí"
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxs("div", { className: " text-center text-xs text-gray-800", children: [
+        paginationDisplay,
+        " "
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "text-right items-end justify-end", children: data && !data.last && /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "secondary",
+          onClick: nextPage,
+          className: "flex items-center float-right",
+          children: [
+            "Následující ",
+            /* @__PURE__ */ jsx(MdArrowForward, { className: "ml-2", size: 20 })
+          ]
+        }
+      ) })
+    ] })
+  ] }) });
+}
+export {
+  DataTableServer as default
+};
+//# sourceMappingURL=DataTableServer.js.map

package/dist/components/datatable/DataTableServer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableServer.js","sources":["../../../lib/components/datatable/DataTableServer.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\r\n\r\nimport {\r\n  Button,\r\n  DataTableColumn,\r\n  FormField,\r\n  IPageable,\r\n  handleErrors,\r\n  useFederationContext,\r\n} from \"../../main\";\r\nimport {\r\n  MdArrowBack,\r\n  MdArrowDownward,\r\n  MdArrowForward,\r\n  MdArrowUpward,\r\n  MdClose,\r\n  MdOutlineFilterAlt,\r\n  MdOutlineFilterAltOff,\r\n  MdSearch,\r\n} from \"react-icons/md\";\r\n\r\ninterface DataTableServerProps<T> {\r\n  url: string;\r\n  columns: DataTableColumn<T | \"actions\">[];\r\n  itemsPerPage?: number;\r\n  title?: string;\r\n  subtitle?: string;\r\n  allowSearch?: boolean;\r\n}\r\n\r\ntype DataTableInternalItems = {\r\n  _isHighlighted?: boolean;\r\n};\r\n\r\nfunction DataTableServer<T extends DataTableInternalItems>({\r\n  url,\r\n  columns,\r\n  itemsPerPage = 10,\r\n  title,\r\n  subtitle,\r\n  allowSearch = true,\r\n}: DataTableServerProps<T>) {\r\n  const federationContext = useFederationContext();\r\n  const [data, setData] = useState<IPageable<T>>();\r\n  const [isLoading, setIsLoading] = useState(false);\r\n\r\n  const [currentPage, setCurrentPage] = useState(0);\r\n  const [fulltextSearch, setFulltextSearch] = useState(\"\");\r\n  const [filterOptions, setFilterOptions] = useState<Record<string, any[]>>({});\r\n  const [columnFilters, setColumnFilters] = useState<Record<string, string>>(\r\n    {}\r\n  );\r\n\r\n  const [showColFilters, setShowColFilters] = useState(false);\r\n\r\n  const [sortConfig, setSortConfig] = useState<{\r\n    sortParam: string;\r\n    direction: \"ascending\" | \"descending\" | null;\r\n  } | null>(null);\r\n  useEffect(() => {\r\n    setIsLoading(true);\r\n\r\n    federationContext.apiClient\r\n      .get(url, {\r\n        params: {\r\n          ...columnFilters,\r\n          pageSize: itemsPerPage,\r\n          page: currentPage,\r\n          sortBy: sortConfig?.sortParam,\r\n          sortDirection: sortConfig?.direction,\r\n        },\r\n      })\r\n      .then((response) => {\r\n        setData(response.data);\r\n        setIsLoading(false);\r\n      })\r\n      .catch((error) => {\r\n        console.error(\"Error fetching data:\", error);\r\n        handleErrors(error, federationContext.emitter);\r\n        setIsLoading(false);\r\n      });\r\n  }, [\r\n    url,\r\n    columnFilters,\r\n    itemsPerPage,\r\n    federationContext,\r\n    currentPage,\r\n    sortConfig,\r\n  ]);\r\n\r\n  useEffect(() => {\r\n    const fetchFilterOptions = async (column: DataTableColumn<T>) => {\r\n      if (!column.filterSource) {\r\n      } else {\r\n        try {\r\n          const response = await federationContext.apiClient.get(\r\n            column.filterSource\r\n          );\r\n\r\n          const options = response.data.map((item: any) => ({\r\n            value: item[column.filterValueKey as keyof typeof item],\r\n            label: item[column.filterLabelKey as keyof typeof item],\r\n          }));\r\n          return options;\r\n        } catch (error) {\r\n          console.error(\"Error fetching filter options:\", error);\r\n          return [];\r\n        }\r\n      }\r\n    };\r\n\r\n    const updateFilterOptions = async () => {\r\n      const newFilterOptions: Record<string, any[]> = {};\r\n\r\n      for (const column of columns) {\r\n        if (\r\n          column.filterType &&\r\n          column.filterSource &&\r\n          column.filterValueKey &&\r\n          column.filterLabelKey &&\r\n          column.filterParam\r\n        ) {\r\n          const options = await fetchFilterOptions(column);\r\n\r\n          if (options) {\r\n            newFilterOptions[column.filterParam as string] = [\r\n              { value: \"\", label: \"\" },\r\n              ...options,\r\n            ];\r\n          }\r\n        }\r\n      }\r\n      console.log(\r\n        \"%clibcomponentsdatatableDataTable.tsx:142 newFilterOptions\",\r\n        \"color: #007acc;\",\r\n        newFilterOptions\r\n      );\r\n      setFilterOptions(newFilterOptions);\r\n    };\r\n    console.log(\r\n      \"%clibcomponentsDataTable.tsx:162 items, columns\",\r\n      \"color: #007acc;\",\r\n      columns\r\n    );\r\n    updateFilterOptions();\r\n  }, [columns]);\r\n\r\n  const requestSort = (sortParam: string) => {\r\n    setSortConfig((prevSortConfig) => {\r\n      if (\r\n        prevSortConfig?.sortParam === sortParam &&\r\n        prevSortConfig.direction !== null\r\n      ) {\r\n        return prevSortConfig.direction === \"ascending\"\r\n          ? { sortParam, direction: \"descending\" }\r\n          : null;\r\n      } else {\r\n        return { sortParam, direction: \"ascending\" };\r\n      }\r\n    });\r\n  };\r\n\r\n  const getSortIcon = (sortParam: string) => {\r\n    if (sortConfig?.sortParam === sortParam) {\r\n      return sortConfig.direction === \"ascending\" ? (\r\n        <MdArrowUpward fontSize=\"small\" />\r\n      ) : sortConfig.direction === \"descending\" ? (\r\n        <MdArrowDownward fontSize=\"small\" />\r\n      ) : (\r\n        <MdArrowUpward\r\n          fontSize=\"small\"\r\n          className=\"text-gray-300 invisible group-hover:visible \"\r\n        />\r\n      );\r\n    }\r\n    return (\r\n      <MdArrowUpward\r\n        fontSize=\"small\"\r\n        className=\"text-gray-300 invisible group-hover:visible \"\r\n      />\r\n    );\r\n  };\r\n\r\n  const nextPage = () => {\r\n    setCurrentPage(currentPage + 1);\r\n  };\r\n\r\n  const prevPage = () => {\r\n    setCurrentPage(currentPage - 1);\r\n  };\r\n  const handleSearchChanged = (\r\n    e: React.ChangeEvent<\r\n      HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement\r\n    >\r\n  ) => {\r\n    console.log(\r\n      \"%clibcomponentsdatatableDataTable.tsx:238 e\",\r\n      \"color: #007acc;\",\r\n      e\r\n    );\r\n    setFulltextSearch(e.target?.value);\r\n    setCurrentPage(0);\r\n  };\r\n\r\n  // Pagination display logic\r\n  const paginationDisplay = `Strana ${currentPage + 1} z ${data?.totalPages}`;\r\n\r\n  const filterHandler = (filterParam: keyof T, value: string) => {\r\n    console.log(\r\n      \"%clibcomponentsdatatableDataTable.tsx:223 object filterParam,      value,      columnFilters \",\r\n      \"color: #007acc;\",\r\n      filterParam,\r\n      value,\r\n      columnFilters\r\n    );\r\n    setColumnFilters((prev) => ({ ...prev, [filterParam]: value }));\r\n    setCurrentPage(0);\r\n  };\r\n\r\n  //if (isLoading) return <Spinner />;\r\n  return (\r\n    <>\r\n      <div className=\"container  shadow-lg border border-gray-200 rounded-xl overflow-hidden \">\r\n        {(title || subtitle || allowSearch) && (\r\n          <div className=\"p-5 leading-9 flex \">\r\n            <div className=\"flex-grow\">\r\n              {title && (\r\n                <h1 className=\"font-semibold text-xl leading-[42px] \">\r\n                  {title}\r\n                </h1>\r\n              )}\r\n              {subtitle && (\r\n                <p className=\"font-normal text-gray-600\">{subtitle}</p>\r\n              )}\r\n            </div>\r\n\r\n            <div\r\n              className=\"flex items-center text-xl h-full p-3  cursor-pointer text-gray-500 \"\r\n              onClick={() => setShowColFilters(!showColFilters)}\r\n            >\r\n              {!showColFilters && <MdOutlineFilterAlt />}\r\n              {showColFilters && <MdOutlineFilterAltOff />}\r\n            </div>\r\n            {allowSearch && (\r\n              <div className=\"ml-5\">\r\n                <FormField\r\n                  placeholder=\"Vyhledávání\"\r\n                  name=\"search\"\r\n                  onInputChange={handleSearchChanged}\r\n                  type=\"text\"\r\n                  value={fulltextSearch}\r\n                >\r\n                  {\" \"}\r\n                  <div className=\" text-gray-500 leading-5 flex items-center h-full\">\r\n                    {!fulltextSearch && <MdSearch></MdSearch>}\r\n                    {fulltextSearch && (\r\n                      <MdClose onClick={() => setFulltextSearch(\"\")}></MdClose>\r\n                    )}\r\n                  </div>\r\n                </FormField>\r\n              </div>\r\n            )}\r\n          </div>\r\n        )}\r\n        <div className=\"overflow-x-auto\">\r\n          <table className=\"w-full leading-normal\">\r\n            <thead>\r\n              {showColFilters &&\r\n                columns.findIndex((it) => it.filterType) > -1 && (\r\n                  <tr>\r\n                    {columns.map(({ key, header, filterType, filterParam }) => (\r\n                      <th\r\n                        key={String(key) + \"_filter\"}\r\n                        id={String(key) + \"_filter\"}\r\n                        //  className=\"cursor-pointer px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-sm font-medium text-gray-600 uppercase tracking-wider\"\r\n                        className={` font-medium cursor-pointer leading-9 text-xs text-left pl-5 pb-5 text-gray-600  ${\r\n                          !title && !subtitle ? \"border-t-0\" : \"\"\r\n                        }`}\r\n                      >\r\n                        {filterType && (\r\n                          <FormField\r\n                            label={header}\r\n                            name={String(key) + \"_filter\"}\r\n                            onInputChange={(e) =>\r\n                              filterHandler(\r\n                                filterParam as keyof T,\r\n                                e.target.value\r\n                              )\r\n                            }\r\n                            type={filterType}\r\n                            options={filterOptions[String(filterParam)] || []}\r\n                            value={columnFilters[String(key)]}\r\n                            clearable\r\n                          ></FormField>\r\n                        )}\r\n                      </th>\r\n                    ))}\r\n                  </tr>\r\n                )}\r\n              <tr>\r\n                {columns.map(({ key, header, actions, sortParam }) => (\r\n                  <th\r\n                    key={String(key)}\r\n                    //  className=\"cursor-pointer px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-sm font-medium text-gray-600 uppercase tracking-wider\"\r\n                    className={`group font-medium leading-9 text-xs text-left px-5 text-gray-600 bg bg-gray-50 border-t border-b border-gray-200 ${\r\n                      !title && !subtitle ? \"border-t-0\" : \"\"\r\n                    } ${sortParam ? \" cursor-pointer \" : \"\"}`}\r\n                    onClick={() =>\r\n                      sortParam ? requestSort(sortParam) : () => {}\r\n                    }\r\n                  >\r\n                    <span className=\"inline-flex items-center gap-2\">\r\n                      {header}{\" \"}\r\n                      {!actions && sortParam ? getSortIcon(sortParam) : \"\"}\r\n                    </span>\r\n                  </th>\r\n                ))}\r\n              </tr>\r\n            </thead>\r\n\r\n            {!isLoading && (\r\n              <tbody>\r\n                {data &&\r\n                  data.content &&\r\n                  data.content.map((item, rowIndex) => (\r\n                    <tr\r\n                      key={rowIndex}\r\n                      className={`${\r\n                        item._isHighlighted ? \" bg-gray-200  \" : \" \"\r\n                      } hover:bg-gray-50  border-gray-200 border-b text-sm `}\r\n                    >\r\n                      {columns.map(({ render, actions, classes }, colIndex) => (\r\n                        <td\r\n                          key={`${rowIndex}-${colIndex}`}\r\n                          className={`px-5 py-2\r\n                   ${\r\n                     colIndex == 0\r\n                       ? \" font-medium text-gray-900\"\r\n                       : \" text-gray-700\"\r\n                   } ${classes || \"\"}`}\r\n                        >\r\n                          {render ? render(item) : \"\"}\r\n                          {actions &&\r\n                            actions\r\n                              .filter((it) => {\r\n                                if (it.visible) {\r\n                                  return it.visible(item);\r\n                                } else true;\r\n                              })\r\n                              .map((action, actionIndex) => (\r\n                                <div\r\n                                  key={`${rowIndex}-${colIndex}-${actionIndex}`}\r\n                                  className=\"flex inline-flex align-middle\"\r\n                                >\r\n                                  {action.icon && (\r\n                                    <Button\r\n                                      variant=\"icon\"\r\n                                      onClick={() => action.onClick(item)}\r\n                                    >\r\n                                      {\" \"}\r\n                                      {action.icon}\r\n                                    </Button>\r\n                                  )}\r\n                                  {!action.icon && (\r\n                                    <Button\r\n                                      variant=\"transparent\"\r\n                                      onClick={() => action.onClick(item)}\r\n                                    >\r\n                                      {\" \"}\r\n                                      {action.label}\r\n                                    </Button>\r\n                                  )}\r\n                                </div>\r\n                              ))}\r\n                        </td>\r\n                      ))}\r\n                    </tr>\r\n                  ))}\r\n                {data?.content?.length == 0 && (\r\n                  <tr key=\"tr-nodata   \">\r\n                    <td\r\n                      key=\"td-nodata\"\r\n                      className=\"px-5 py-3 border-b border-gray-200 bg-white text-sm items-center justify-center align-middle\"\r\n                      colSpan={columns.length}\r\n                    >\r\n                      Žádná data\r\n                    </td>\r\n                  </tr>\r\n                )}\r\n              </tbody>\r\n            )}\r\n          </table>\r\n        </div>\r\n        <div className=\"w-full p-5 grid grid-cols-3\">\r\n          <div className=\"text-left items-start justify-start\">\r\n            {data && !data.first && (\r\n              <Button\r\n                variant=\"secondary\"\r\n                onClick={prevPage}\r\n                className=\"flex items-center float-left\"\r\n              >\r\n                <MdArrowBack className=\"mr-1.5\" /> Předchozí\r\n              </Button>\r\n            )}\r\n          </div>\r\n          <div className=\" text-center text-xs text-gray-800\">\r\n            {paginationDisplay} {/* Updated to use dynamic page numbers */}\r\n          </div>\r\n          <div className=\"text-right items-end justify-end\">\r\n            {data && !data.last && (\r\n              <Button\r\n                variant=\"secondary\"\r\n                onClick={nextPage}\r\n                className=\"flex items-center float-right\"\r\n              >\r\n                Následující <MdArrowForward className=\"ml-2\" size={20} />\r\n              </Button>\r\n            )}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </>\r\n  );\r\n}\r\n\r\nexport default DataTableServer;\r\n"],"names":["_a"],"mappings":"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"}

package/dist/components/datatable/types.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+export interface DataTableColumn<T> {
+    key: keyof T | "actions";
+    header: string;
+    render?: (item: T) => React.ReactNode;
+    actions?: DataTableAction<T>[];
+    filterType?: string;
+    classes?: string;
+    type?: "string" | "number" | "date";
+    filterOperator?: ">=" | "<=" | "==";
+    filterSource?: string;
+    filterValueKey?: string;
+    filterLabelKey?: string;
+    filterParam?: string;
+    sortParam?: string;
+    sumarize?: boolean;
+}
+export interface DataTableAction<T> {
+    label: string;
+    onClick: (item: T) => void;
+    visible?: (item: T) => boolean;
+    icon?: React.ReactNode;
+}
+export type DataTableInternalItems = {
+    _isHighlighted?: boolean;
+};

package/dist/components/datatable/types.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=types.js.map

package/dist/components/datatable/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/form/FormField.js

@@ -117,13 +117,13 @@ const FormField = ({
             },
             children: [
               placeholder && /* @__PURE__ */ jsx("option", { label: placeholder }),
-              localOptions == null ? void 0 : localOptions.map((option) => /* @__PURE__ */ jsx(
+              localOptions == null ? void 0 : localOptions.map((option, index) => /* @__PURE__ */ jsx(
                 "option",
                 {
                   value: option.value ? option.value : void 0,
                   children: option.label
                 },
-                option.value
+                index
               ))
             ]
           }

package/dist/components/form/FormField.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.js","sources":["../../../lib/components/form/FormField.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\r\n\r\nimport { MdClose } from \"react-icons/md\";\r\nimport { IOptionItem, useFederationContext } from \"../../main\";\r\n\r\nexport interface FormFieldProps {\r\n  label?: string;\r\n  description?: string;\r\n  name: string;\r\n  type: string;\r\n  value?: any;\r\n  register?: any;\r\n\r\n  errors?: any;\r\n  disabled?: boolean;\r\n  required?: boolean;\r\n  clearable?: boolean;\r\n  placeholder?: string;\r\n  options?: IOptionItem[];\r\n  children?: React.ReactNode;\r\n  fetchUrl?: string;\r\n  maxLength?: number;\r\n\r\n  valueKey?: string;\r\n  labelKey?: string;\r\n  onInputChange: (\r\n    e: React.ChangeEvent<\r\n      HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | any\r\n    >\r\n  ) => void;\r\n}\r\n\r\nconst FormField: React.FC<FormFieldProps> = ({\r\n  label,\r\n  name,\r\n  type,\r\n  register,\r\n  disabled,\r\n  errors = {},\r\n  required,\r\n  clearable,\r\n  value,\r\n  description,\r\n  onInputChange,\r\n  options,\r\n  placeholder,\r\n  children,\r\n  fetchUrl,\r\n  valueKey,\r\n  labelKey,\r\n  maxLength,\r\n}) => {\r\n  const [isFocused, setIsFocused] = useState(false);\r\n\r\n  const [localOptions, setLocalOptions] = useState(options);\r\n  const fallbackRef = useRef(null); // Create a fallback ref\r\n  const {\r\n    ref: registeredRef = fallbackRef,\r\n    onBlur: formOnBlur = () => {} /* default function */,\r\n    ...rest\r\n  } = register ? register(name) : {};\r\n\r\n  const apiClient = useFederationContext()?.apiClient;\r\n  const ref = registeredRef || fallbackRef;\r\n  const focusInput = () => {\r\n    if (ref.current) {\r\n      ref.current.focus();\r\n    }\r\n  };\r\n  const handleMultiSelectChange = (\r\n    event: React.ChangeEvent<HTMLSelectElement>\r\n  ) => {\r\n    const selectedOptions = Array.from(\r\n      event.target.selectedOptions,\r\n      (option) => option.value\r\n    );\r\n\r\n    onInputChange({\r\n      ...event,\r\n      target: {\r\n        value: selectedOptions,\r\n        name: event.target.name,\r\n      },\r\n    });\r\n  };\r\n\r\n  const handleCheckBoxChange = (\r\n    event: React.ChangeEvent<HTMLSelectElement>\r\n  ) => {\r\n    onInputChange({\r\n      ...event,\r\n      target: {\r\n        value: event.target.value == \"on\" ? true : false,\r\n        name: event.target.name,\r\n      },\r\n    });\r\n  };\r\n\r\n  const handleClear = (e: any) => {\r\n    value;\r\n    onInputChange({\r\n      ...e,\r\n      target: {\r\n        value: \"\",\r\n        name: name,\r\n      },\r\n    });\r\n  };\r\n  useEffect(() => {\r\n    const fetchOptions = async (fetchUrl: string) => {\r\n      const { data } = await apiClient.get(fetchUrl);\r\n\r\n      // Check if the first item in the data array is a number to determine the data type\r\n      const isArrayOfNumbers = typeof data[0] === \"number\";\r\n\r\n      // Transform data based on its type\r\n      const transformedOptions = data.map((item: any) => {\r\n        if (isArrayOfNumbers) {\r\n          // If it's a number, use the number for both value and label\r\n          return { value: item, label: item.toString() };\r\n        } else {\r\n          // Otherwise, extract using predefined keys or defaults\r\n          return {\r\n            value: item[valueKey || \"id\"],\r\n            label: item[labelKey || \"name\"],\r\n          };\r\n        }\r\n      });\r\n\r\n      setLocalOptions([\r\n        { value: null, label: \" \" }, // Add an empty option as the first item\r\n        ...transformedOptions,\r\n      ]);\r\n    };\r\n\r\n    if (fetchUrl) fetchOptions(fetchUrl);\r\n    if (options) setLocalOptions(options);\r\n  }, [fetchUrl, options, apiClient, valueKey, labelKey]); // ensure valueKey and labelKey are also in the dependency array if they are dynamic\r\n\r\n  const renderInput = () => {\r\n    switch (type) {\r\n      case \"select\":\r\n        return (\r\n          <>\r\n            <select\r\n              id={name}\r\n              className=\"grow shrink basis-0 text-gray-900 text-sm font-normal leading-tight focus:border-none bg-transparent\"\r\n              disabled={disabled}\r\n              value={value}\r\n              {...rest} // Spread the rest of register's return value\r\n              ref={ref}\r\n              onChange={onInputChange}\r\n              onFocus={() => setIsFocused(true)}\r\n              // Combine custom onBlur with form's onBlur\r\n              onBlur={(e) => {\r\n                formOnBlur(e); // Call React Hook Form's onBlur\r\n                setIsFocused(false); // Then call your custom onBlur logic\r\n              }}\r\n            >\r\n              {placeholder && <option label={placeholder}></option>}\r\n              {localOptions?.map((option) => (\r\n                <option\r\n                  key={option.value}\r\n                  value={option.value ? option.value : undefined}\r\n                >\r\n                  {option.label}\r\n                </option>\r\n              ))}\r\n            </select>\r\n          </>\r\n        );\r\n      case \"multiSelect\":\r\n        return (\r\n          <>\r\n            <select\r\n              id={name}\r\n              multiple\r\n              className=\"grow shrink basis-0 text-gray-900 text-sm font-normal leading-tight focus:border-none bg-transparent\"\r\n              disabled={disabled}\r\n              value={Array.isArray(value) ? value : []} // Ensure value is always an array\r\n              {...rest}\r\n              ref={ref}\r\n              onChange={handleMultiSelectChange} // Use the custom multi-select handler\r\n              onFocus={() => setIsFocused(true)}\r\n              onBlur={(e) => {\r\n                formOnBlur(e);\r\n                setIsFocused(false);\r\n              }}\r\n            >\r\n              {options?.map((option) => (\r\n                <option\r\n                  key={option.value}\r\n                  value={option.value ? option.value : undefined}\r\n                >\r\n                  {option.label}\r\n                </option>\r\n              ))}\r\n            </select>\r\n          </>\r\n        );\r\n      case \"radioGroup\":\r\n        return (\r\n          <div className=\"flex flex-col\">\r\n            {options?.map((option, index) => (\r\n              <label\r\n                key={index}\r\n                className=\"inline-flex items-center space-x-2 my-2\"\r\n              >\r\n                <input\r\n                  type=\"radio\"\r\n                  name={name}\r\n                  value={option.value}\r\n                  checked={value === option.value}\r\n                  disabled={disabled}\r\n                  {...register(name)} // Spread the rest of register's return value\r\n                  onChange={onInputChange}\r\n                  className=\"text-indigo-600 border-gray-300 focus:ring-indigo-500 mr-2\"\r\n                />\r\n                <span className=\"text-gray-900 text-sm font-normal leading-tight\">\r\n                  {option.label}\r\n                </span>\r\n              </label>\r\n            ))}\r\n          </div>\r\n        );\r\n      case \"textarea\":\r\n        return (\r\n          <textarea\r\n            id={name}\r\n            className=\"grow shrink basis-0 text-gray-900 text-sm font-normal leading-tight focus:border-none  \"\r\n            disabled={disabled}\r\n            value={value}\r\n            rows={3}\r\n            {...rest} // Spread the rest of register's return value\r\n            ref={ref}\r\n            onChange={onInputChange}\r\n            onFocus={() => setIsFocused(true)}\r\n            maxLength={maxLength || 4000}\r\n            // Combine custom onBlur with form's onBlur\r\n            onBlur={(e) => {\r\n              formOnBlur(e); // Call React Hook Form's onBlur\r\n              setIsFocused(false); // Then call your custom onBlur logic\r\n            }}\r\n          />\r\n        );\r\n      case \"checkbox\":\r\n        return (\r\n          <>\r\n            <input\r\n              type=\"checkbox\"\r\n              id={name}\r\n              className=\"shrink basis-0 text-gray-900 text-sm font-normal leading-tight focus:border-none\"\r\n              checked={value}\r\n              disabled={disabled}\r\n              {...rest} // Spread the rest of register's return value\r\n              ref={ref}\r\n              onChange={handleCheckBoxChange}\r\n              onFocus={() => setIsFocused(true)}\r\n              // Combine custom onBlur with form's onBlur\r\n              onBlur={(e) => {\r\n                formOnBlur(e); // Call React Hook Form's onBlur\r\n                setIsFocused(false); // Then call your custom onBlur logic\r\n              }}\r\n            />\r\n            <label htmlFor={name}>{label}</label>\r\n          </>\r\n        );\r\n      default:\r\n        return (\r\n          <>\r\n            <input\r\n              className=\"grow shrink basis-0 text-gray-900 text-sm font-normal leading-tight focus:border-none bg-transparent\"\r\n              id={name}\r\n              readOnly={disabled}\r\n              value={value}\r\n              type={type}\r\n              {...rest} // Spread the rest of register's return value\r\n              ref={ref}\r\n              placeholder={placeholder}\r\n              onChange={onInputChange}\r\n              onFocus={() => setIsFocused(true)}\r\n              // Combine custom onBlur with form's onBlur\r\n              onBlur={(e) => {\r\n                formOnBlur(e); // Call React Hook Form's onBlur\r\n                setIsFocused(false); // Then call your custom onBlur logic\r\n              }}\r\n            />\r\n          </>\r\n        );\r\n    }\r\n  };\r\n\r\n  return (\r\n    <div className=\"w-full min-h-30 flex-col justify-start items-start gap-1.5 inline-flex sharedLibrary\">\r\n      <div className=\"self-stretch  flex-col justify-start items-start gap-1.5 flex\">\r\n        {label && (\r\n          <label\r\n            className=\"text-slate-700 text-sm leading-tight font-medium\"\r\n            htmlFor={name}\r\n          >\r\n            {label} {required ? \"*\" : \"\"}\r\n          </label>\r\n        )}\r\n        <div\r\n          className={\r\n            `self-stretch px-3  py-2 rounded-lg justify-start items-center gap-2 inline-flex outline-none border` +\r\n            ` ${\r\n              isFocused && !errors[name]?.message\r\n                ? \"outline-4 outline-indigo-200 outline-offset-0 border-indigo-300\"\r\n                : \"\"\r\n            }` +\r\n            ` ${\r\n              isFocused && errors[name]?.message\r\n                ? \"outline-4 outline-red-200 outline-offset-0 border-none\"\r\n                : \"\"\r\n            } ` +\r\n            ` ${!isFocused && errors[name]?.message ? \"border-red-200\" : \"\"} ` +\r\n            ` ${disabled ? \"bg-gray-100\" : \"bg-transparent\"}`\r\n          }\r\n        >\r\n          <div className=\"flex relative grow shrink basis-0 min-h-5 xl:min-h-[32px] justify-start items-stretch gap-2 max-w-full\">\r\n            {renderInput()}\r\n            {children && <div onClick={focusInput}>{children}</div>}\r\n            {clearable && value && <MdClose onClick={handleClear}></MdClose>}\r\n          </div>\r\n        </div>\r\n      </div>\r\n      {description && (\r\n        <div className=\"HintText self-stretch text-slate-600 text-sm font-normal leading-tight\">\r\n          {description}\r\n        </div>\r\n      )}\r\n      {errors[name] && (\r\n        <div className=\"HintText self-stretch text-red-600 text-sm font-normal leading-tight\">\r\n          {errors[name]?.message}\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default FormField;\r\n"],"names":["fetchUrl"],"mappings":"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"}
+{"version":3,"file":"FormField.js","sources":["../../../lib/components/form/FormField.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\r\n\r\nimport { MdClose } from \"react-icons/md\";\r\nimport { IOptionItem, useFederationContext } from \"../../main\";\r\n\r\nexport interface FormFieldProps {\r\n  label?: string;\r\n  description?: string;\r\n  name: string;\r\n  type: string;\r\n  value?: any;\r\n  register?: any;\r\n\r\n  errors?: any;\r\n  disabled?: boolean;\r\n  required?: boolean;\r\n  clearable?: boolean;\r\n  placeholder?: string;\r\n  options?: IOptionItem[];\r\n  children?: React.ReactNode;\r\n  fetchUrl?: string;\r\n  maxLength?: number;\r\n\r\n  valueKey?: string;\r\n  labelKey?: string;\r\n  onInputChange: (\r\n    e: React.ChangeEvent<\r\n      HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | any\r\n    >\r\n  ) => void;\r\n}\r\n\r\nconst FormField: React.FC<FormFieldProps> = ({\r\n  label,\r\n  name,\r\n  type,\r\n  register,\r\n  disabled,\r\n  errors = {},\r\n  required,\r\n  clearable,\r\n  value,\r\n  description,\r\n  onInputChange,\r\n  options,\r\n  placeholder,\r\n  children,\r\n  fetchUrl,\r\n  valueKey,\r\n  labelKey,\r\n  maxLength,\r\n}) => {\r\n  const [isFocused, setIsFocused] = useState(false);\r\n\r\n  const [localOptions, setLocalOptions] = useState(options);\r\n  const fallbackRef = useRef(null); // Create a fallback ref\r\n  const {\r\n    ref: registeredRef = fallbackRef,\r\n    onBlur: formOnBlur = () => {} /* default function */,\r\n    ...rest\r\n  } = register ? register(name) : {};\r\n\r\n  const apiClient = useFederationContext()?.apiClient;\r\n  const ref = registeredRef || fallbackRef;\r\n  const focusInput = () => {\r\n    if (ref.current) {\r\n      ref.current.focus();\r\n    }\r\n  };\r\n  const handleMultiSelectChange = (\r\n    event: React.ChangeEvent<HTMLSelectElement>\r\n  ) => {\r\n    const selectedOptions = Array.from(\r\n      event.target.selectedOptions,\r\n      (option) => option.value\r\n    );\r\n\r\n    onInputChange({\r\n      ...event,\r\n      target: {\r\n        value: selectedOptions,\r\n        name: event.target.name,\r\n      },\r\n    });\r\n  };\r\n\r\n  const handleCheckBoxChange = (\r\n    event: React.ChangeEvent<HTMLSelectElement>\r\n  ) => {\r\n    onInputChange({\r\n      ...event,\r\n      target: {\r\n        value: event.target.value == \"on\" ? true : false,\r\n        name: event.target.name,\r\n      },\r\n    });\r\n  };\r\n\r\n  const handleClear = (e: any) => {\r\n    value;\r\n    onInputChange({\r\n      ...e,\r\n      target: {\r\n        value: \"\",\r\n        name: name,\r\n      },\r\n    });\r\n  };\r\n  useEffect(() => {\r\n    const fetchOptions = async (fetchUrl: string) => {\r\n      const { data } = await apiClient.get(fetchUrl);\r\n\r\n      // Check if the first item in the data array is a number to determine the data type\r\n      const isArrayOfNumbers = typeof data[0] === \"number\";\r\n\r\n      // Transform data based on its type\r\n      const transformedOptions = data.map((item: any) => {\r\n        if (isArrayOfNumbers) {\r\n          // If it's a number, use the number for both value and label\r\n          return { value: item, label: item.toString() };\r\n        } else {\r\n          // Otherwise, extract using predefined keys or defaults\r\n          return {\r\n            value: item[valueKey || \"id\"],\r\n            label: item[labelKey || \"name\"],\r\n          };\r\n        }\r\n      });\r\n\r\n      setLocalOptions([\r\n        { value: null, label: \" \" }, // Add an empty option as the first item\r\n        ...transformedOptions,\r\n      ]);\r\n    };\r\n\r\n    if (fetchUrl) fetchOptions(fetchUrl);\r\n    if (options) setLocalOptions(options);\r\n  }, [fetchUrl, options, apiClient, valueKey, labelKey]); // ensure valueKey and labelKey are also in the dependency array if they are dynamic\r\n\r\n  const renderInput = () => {\r\n    switch (type) {\r\n      case \"select\":\r\n        return (\r\n          <>\r\n            <select\r\n              id={name}\r\n              className=\"grow shrink basis-0 text-gray-900 text-sm font-normal leading-tight focus:border-none bg-transparent\"\r\n              disabled={disabled}\r\n              value={value}\r\n              {...rest} // Spread the rest of register's return value\r\n              ref={ref}\r\n              onChange={onInputChange}\r\n              onFocus={() => setIsFocused(true)}\r\n              // Combine custom onBlur with form's onBlur\r\n              onBlur={(e) => {\r\n                formOnBlur(e); // Call React Hook Form's onBlur\r\n                setIsFocused(false); // Then call your custom onBlur logic\r\n              }}\r\n            >\r\n              {placeholder && <option label={placeholder}></option>}\r\n              {localOptions?.map((option, index) => (\r\n                <option\r\n                  key={index}\r\n                  value={option.value ? option.value : undefined}\r\n                >\r\n                  {option.label}\r\n                </option>\r\n              ))}\r\n            </select>\r\n          </>\r\n        );\r\n      case \"multiSelect\":\r\n        return (\r\n          <>\r\n            <select\r\n              id={name}\r\n              multiple\r\n              className=\"grow shrink basis-0 text-gray-900 text-sm font-normal leading-tight focus:border-none bg-transparent\"\r\n              disabled={disabled}\r\n              value={Array.isArray(value) ? value : []} // Ensure value is always an array\r\n              {...rest}\r\n              ref={ref}\r\n              onChange={handleMultiSelectChange} // Use the custom multi-select handler\r\n              onFocus={() => setIsFocused(true)}\r\n              onBlur={(e) => {\r\n                formOnBlur(e);\r\n                setIsFocused(false);\r\n              }}\r\n            >\r\n              {options?.map((option) => (\r\n                <option\r\n                  key={option.value}\r\n                  value={option.value ? option.value : undefined}\r\n                >\r\n                  {option.label}\r\n                </option>\r\n              ))}\r\n            </select>\r\n          </>\r\n        );\r\n      case \"radioGroup\":\r\n        return (\r\n          <div className=\"flex flex-col\">\r\n            {options?.map((option, index) => (\r\n              <label\r\n                key={index}\r\n                className=\"inline-flex items-center space-x-2 my-2\"\r\n              >\r\n                <input\r\n                  type=\"radio\"\r\n                  name={name}\r\n                  value={option.value}\r\n                  checked={value === option.value}\r\n                  disabled={disabled}\r\n                  {...register(name)} // Spread the rest of register's return value\r\n                  onChange={onInputChange}\r\n                  className=\"text-indigo-600 border-gray-300 focus:ring-indigo-500 mr-2\"\r\n                />\r\n                <span className=\"text-gray-900 text-sm font-normal leading-tight\">\r\n                  {option.label}\r\n                </span>\r\n              </label>\r\n            ))}\r\n          </div>\r\n        );\r\n      case \"textarea\":\r\n        return (\r\n          <textarea\r\n            id={name}\r\n            className=\"grow shrink basis-0 text-gray-900 text-sm font-normal leading-tight focus:border-none  \"\r\n            disabled={disabled}\r\n            value={value}\r\n            rows={3}\r\n            {...rest} // Spread the rest of register's return value\r\n            ref={ref}\r\n            onChange={onInputChange}\r\n            onFocus={() => setIsFocused(true)}\r\n            maxLength={maxLength || 4000}\r\n            // Combine custom onBlur with form's onBlur\r\n            onBlur={(e) => {\r\n              formOnBlur(e); // Call React Hook Form's onBlur\r\n              setIsFocused(false); // Then call your custom onBlur logic\r\n            }}\r\n          />\r\n        );\r\n      case \"checkbox\":\r\n        return (\r\n          <>\r\n            <input\r\n              type=\"checkbox\"\r\n              id={name}\r\n              className=\"shrink basis-0 text-gray-900 text-sm font-normal leading-tight focus:border-none\"\r\n              checked={value}\r\n              disabled={disabled}\r\n              {...rest} // Spread the rest of register's return value\r\n              ref={ref}\r\n              onChange={handleCheckBoxChange}\r\n              onFocus={() => setIsFocused(true)}\r\n              // Combine custom onBlur with form's onBlur\r\n              onBlur={(e) => {\r\n                formOnBlur(e); // Call React Hook Form's onBlur\r\n                setIsFocused(false); // Then call your custom onBlur logic\r\n              }}\r\n            />\r\n            <label htmlFor={name}>{label}</label>\r\n          </>\r\n        );\r\n      default:\r\n        return (\r\n          <>\r\n            <input\r\n              className=\"grow shrink basis-0 text-gray-900 text-sm font-normal leading-tight focus:border-none bg-transparent\"\r\n              id={name}\r\n              readOnly={disabled}\r\n              value={value}\r\n              type={type}\r\n              {...rest} // Spread the rest of register's return value\r\n              ref={ref}\r\n              placeholder={placeholder}\r\n              onChange={onInputChange}\r\n              onFocus={() => setIsFocused(true)}\r\n              // Combine custom onBlur with form's onBlur\r\n              onBlur={(e) => {\r\n                formOnBlur(e); // Call React Hook Form's onBlur\r\n                setIsFocused(false); // Then call your custom onBlur logic\r\n              }}\r\n            />\r\n          </>\r\n        );\r\n    }\r\n  };\r\n\r\n  return (\r\n    <div className=\"w-full min-h-30 flex-col justify-start items-start gap-1.5 inline-flex sharedLibrary\">\r\n      <div className=\"self-stretch  flex-col justify-start items-start gap-1.5 flex\">\r\n        {label && (\r\n          <label\r\n            className=\"text-slate-700 text-sm leading-tight font-medium\"\r\n            htmlFor={name}\r\n          >\r\n            {label} {required ? \"*\" : \"\"}\r\n          </label>\r\n        )}\r\n        <div\r\n          className={\r\n            `self-stretch px-3  py-2 rounded-lg justify-start items-center gap-2 inline-flex outline-none border` +\r\n            ` ${\r\n              isFocused && !errors[name]?.message\r\n                ? \"outline-4 outline-indigo-200 outline-offset-0 border-indigo-300\"\r\n                : \"\"\r\n            }` +\r\n            ` ${\r\n              isFocused && errors[name]?.message\r\n                ? \"outline-4 outline-red-200 outline-offset-0 border-none\"\r\n                : \"\"\r\n            } ` +\r\n            ` ${!isFocused && errors[name]?.message ? \"border-red-200\" : \"\"} ` +\r\n            ` ${disabled ? \"bg-gray-100\" : \"bg-transparent\"}`\r\n          }\r\n        >\r\n          <div className=\"flex relative grow shrink basis-0 min-h-5 xl:min-h-[32px] justify-start items-stretch gap-2 max-w-full\">\r\n            {renderInput()}\r\n            {children && <div onClick={focusInput}>{children}</div>}\r\n            {clearable && value && <MdClose onClick={handleClear}></MdClose>}\r\n          </div>\r\n        </div>\r\n      </div>\r\n      {description && (\r\n        <div className=\"HintText self-stretch text-slate-600 text-sm font-normal leading-tight\">\r\n          {description}\r\n        </div>\r\n      )}\r\n      {errors[name] && (\r\n        <div className=\"HintText self-stretch text-red-600 text-sm font-normal leading-tight\">\r\n          {errors[name]?.message}\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default FormField;\r\n"],"names":["fetchUrl"],"mappings":"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"}

package/dist/main.d.ts

@@ -9,11 +9,13 @@ export { default as Spinner } from './components/Spinner.tsx';
 export { default as ConfirmationModalDialog } from './components/ConfirmationModalDialog.tsx';
 export { default as PositionsSelectorSingle } from './components/form/PositionsSelectorSingle.tsx';
 export { default as Calendar } from './components/Calendar.tsx';
-export { default as DataTable } from './components/DataTable.tsx';
-export type { DataTableColumn } from './components/DataTable.tsx';
+export { default as DataTable } from './components/datatable/DataTable.tsx';
+export { default as DataTableServer } from './components/datatable/DataTableServer.tsx';
+export * from './components/datatable/types.ts';
 export * from './contexts/FederationContext.tsx';
 export * from './contexts/useFederationContext.ts';
 export * from './utils/getFullName.ts';
+export * from './utils/getFullNamePositionWithEmployee.ts';
 export * from './utils/getIntersectingDays.ts';
 export * from './utils/handleErrors.ts';
 export * from './types.ts';

package/dist/main.js

@@ -9,10 +9,12 @@ import { default as default8 } from "./components/Spinner.js";
 import { ConfirmationModalDialog } from "./components/ConfirmationModalDialog.js";
 import { default as default9 } from "./components/form/PositionsSelectorSingle.js";
 import { default as default10 } from "./components/Calendar.js";
-import { default as default11 } from "./components/DataTable.js";
+import { default as default11 } from "./components/datatable/DataTable.js";
+import { default as default12 } from "./components/datatable/DataTableServer.js";
 import { FederationContext, FederationContextProvider } from "./contexts/FederationContext.js";
 import { useFederationContext } from "./contexts/useFederationContext.js";
 import { getFullName, getFullNameList } from "./utils/getFullName.js";
+import { getFullNameListPositionWithEmployee, getFullNamePositionWithEmployee } from "./utils/getFullNamePositionWithEmployee.js";
 import { getIntersectingDays } from "./utils/getIntersectingDays.js";
 import { handleErrors } from "./utils/handleErrors.js";
 export {
@@ -21,6 +23,7 @@ export {
   default10 as Calendar,
   ConfirmationModalDialog,
   default11 as DataTable,
+  default12 as DataTableServer,
   FederationContext,
   FederationContextProvider,
   default5 as FileInput,
@@ -31,6 +34,8 @@ export {
   default8 as Spinner,
   getFullName,
   getFullNameList,
+  getFullNameListPositionWithEmployee,
+  getFullNamePositionWithEmployee,
   getIntersectingDays,
   handleErrors,
   useFederationContext

package/dist/main.js.map

@@ -1 +1 @@
-{"version":3,"file":"main.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"main.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}

package/dist/types.d.ts

@@ -100,3 +100,14 @@ export interface IDepartment {
     parentLocationId: number;
     nameShort: string;
 }
+export interface IPageable<T> {
+    content: T[];
+    empty: boolean;
+    first: boolean;
+    last: boolean;
+    number: number;
+    numberOfElements: number;
+    size: number;
+    totalElements: number;
+    totalPages: number;
+}

package/dist/utils/getFullNamePositionWithEmployee.d.ts

@@ -0,0 +1,5 @@
+import { IPositionEmployee } from '../types';
+
+declare const getFullNamePositionWithEmployee: (position: IPositionEmployee, showEmplNumb?: boolean) => string;
+declare const getFullNameListPositionWithEmployee: (position: IPositionEmployee, showEmplNumb?: boolean) => string;
+export { getFullNamePositionWithEmployee, getFullNameListPositionWithEmployee };

package/dist/utils/getFullNamePositionWithEmployee.js

@@ -0,0 +1,17 @@
+const getFullNamePositionWithEmployee = (position, showEmplNumb = false) => {
+  var _a, _b, _c, _d;
+  if (!position.employee)
+    return "Neobsazená pozice (" + position.positionNumber + ")";
+  return (((_a = position.employee) == null ? void 0 : _a.degreeBefore) || "") + " " + (((_b = position.employee) == null ? void 0 : _b.firstName) || "") + " " + (((_c = position.employee) == null ? void 0 : _c.lastName) || "") + " " + (((_d = position.employee) == null ? void 0 : _d.degreeAfter) || "") + (showEmplNumb ? "(" + position.employee.employeeId + ")" : "");
+};
+const getFullNameListPositionWithEmployee = (position, showEmplNumb = false) => {
+  var _a, _b, _c, _d;
+  if (!position.employee)
+    return "Neobsazená pozice (" + position.positionNumber + ")";
+  return (((_a = position.employee) == null ? void 0 : _a.lastName) || "") + " " + (((_b = position.employee) == null ? void 0 : _b.firstName) || "") + " " + (((_c = position.employee) == null ? void 0 : _c.degreeBefore) || "") + " " + (((_d = position.employee) == null ? void 0 : _d.degreeAfter) || "") + (showEmplNumb ? "(" + position.employee.employeeId + ")" : "");
+};
+export {
+  getFullNameListPositionWithEmployee,
+  getFullNamePositionWithEmployee
+};
+//# sourceMappingURL=getFullNamePositionWithEmployee.js.map

package/dist/utils/getFullNamePositionWithEmployee.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getFullNamePositionWithEmployee.js","sources":["../../lib/utils/getFullNamePositionWithEmployee.ts"],"sourcesContent":["// userDataFetcher.ts\r\n\r\nimport { IPositionEmployee } from \"../types\";\r\n\r\nconst getFullNamePositionWithEmployee = (position: IPositionEmployee, showEmplNumb: boolean = false) => {\r\n    if (!position.employee) return 'Neobsazená pozice (' + position.positionNumber + ')';\r\n    return (\r\n        (position.employee?.degreeBefore || \"\") +\r\n        \" \" +\r\n        (position.employee?.firstName || \"\") +\r\n        \" \" +\r\n        (position.employee?.lastName || \"\") +\r\n        \" \" +\r\n        (position.employee?.degreeAfter || \"\") +\r\n        (showEmplNumb ? \"(\" + position.employee.employeeId + \")\" : \"\")\r\n    );\r\n};\r\nconst getFullNameListPositionWithEmployee = (\r\n    position: IPositionEmployee,\r\n    showEmplNumb: boolean = false,\r\n) => {\r\n    if (!position.employee) return 'Neobsazená pozice (' + position.positionNumber + ')';\r\n\r\n    return (\r\n        (position.employee?.lastName || \"\") +\r\n        \" \" +\r\n        (position.employee?.firstName || \"\") +\r\n        \" \" +\r\n        (position.employee?.degreeBefore || \"\") +\r\n        \" \" +\r\n        (position.employee?.degreeAfter || \"\") +\r\n        (showEmplNumb ? \"(\" + position.employee.employeeId + \")\" : \"\")\r\n    );\r\n};\r\nexport { getFullNamePositionWithEmployee, getFullNameListPositionWithEmployee };\r\n"],"names":[],"mappings":"AAIA,MAAM,kCAAkC,CAAC,UAA6B,eAAwB,UAAU;AAAxG;AACI,MAAI,CAAC,SAAS;AAAiB,WAAA,wBAAwB,SAAS,iBAAiB;AAE5E,YAAA,cAAS,aAAT,mBAAmB,iBAAgB,MACpC,SACC,cAAS,aAAT,mBAAmB,cAAa,MACjC,SACC,cAAS,aAAT,mBAAmB,aAAY,MAChC,SACC,cAAS,aAAT,mBAAmB,gBAAe,OAClC,eAAe,MAAM,SAAS,SAAS,aAAa,MAAM;AAEnE;AACA,MAAM,sCAAsC,CACxC,UACA,eAAwB,UACvB;AAhBL;AAiBI,MAAI,CAAC,SAAS;AAAiB,WAAA,wBAAwB,SAAS,iBAAiB;AAG5E,YAAA,cAAS,aAAT,mBAAmB,aAAY,MAChC,SACC,cAAS,aAAT,mBAAmB,cAAa,MACjC,SACC,cAAS,aAAT,mBAAmB,iBAAgB,MACpC,SACC,cAAS,aAAT,mBAAmB,gBAAe,OAClC,eAAe,MAAM,SAAS,SAAS,aAAa,MAAM;AAEnE;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@addsign/moje-agenda-shared-lib",
   "private": false,
-  "version": "0.0.47",
+  "version": "0.0.49",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",

package/dist/components/DataTable.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DataTable.js","sources":["../../lib/components/DataTable.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\r\n\r\nimport { Button, FormField, Spinner } from \"../main\";\r\nimport {\r\n  MdArrowBack,\r\n  MdArrowDownward,\r\n  MdArrowForward,\r\n  MdArrowUpward,\r\n  MdClose,\r\n  MdOutlineFilterAlt,\r\n  MdOutlineFilterAltOff,\r\n  MdSearch,\r\n} from \"react-icons/md\";\r\n\r\nexport interface DataTableColumn<T> {\r\n  key: keyof T | \"actions\";\r\n  header: string;\r\n  render?: (item: T) => React.ReactNode;\r\n  actions?: DataTableAction<T>[];\r\n  filterType?: string;\r\n  classes?: string;\r\n  type?: \"string\" | \"number\" | \"date\";\r\n  filterOperator?: \">=\" | \"<=\" | \"==\";\r\n}\r\nexport interface DataTableAction<T> {\r\n  label: string;\r\n  onClick: (item: T) => void;\r\n  visible?: (item: T) => boolean;\r\n  icon?: React.ReactNode;\r\n}\r\ninterface DataTableProps<T> {\r\n  items: T[];\r\n  columns: DataTableColumn<T | \"actions\">[];\r\n  itemsPerPage?: number;\r\n  title?: string;\r\n  subtitle?: string;\r\n  allowSearch?: boolean;\r\n  isLoading?: boolean;\r\n}\r\n\r\ntype DataTableInternalItems = {\r\n  _isHighlighted?: boolean;\r\n};\r\n\r\nfunction DataTable<T extends DataTableInternalItems>({\r\n  items,\r\n  columns,\r\n  itemsPerPage = 10,\r\n  title,\r\n  subtitle,\r\n  allowSearch = true,\r\n  isLoading,\r\n}: DataTableProps<T>) {\r\n  const [currentPage, setCurrentPage] = useState(0);\r\n  const [fulltextSearch, setFulltextSearch] = useState(\"\");\r\n  const [filterOptions, setFilterOptions] = useState<Record<string, any[]>>({});\r\n  const [columnFilters, setColumnFilters] = useState<Record<string, string>>(\r\n    {}\r\n  );\r\n\r\n  const [showColFilters, setShowColFilters] = useState(false);\r\n\r\n  const [sortConfig, setSortConfig] = useState<{\r\n    key: keyof T | \"actions\";\r\n    direction: \"ascending\" | \"descending\" | null;\r\n  } | null>(null);\r\n\r\n  useEffect(() => {\r\n    const newFilterOptions: Record<string, any[]> = {};\r\n\r\n    columns.forEach((column) => {\r\n      if (column.filterType && items.length > 0) {\r\n        const uniqueOptions = new Set(\r\n          items.map((item) => item[column.key as keyof T])\r\n        );\r\n        // Convert Set to an array of { value, label } objects\r\n        let sortedOptions = Array.from(uniqueOptions).map((option) => ({\r\n          value: option,\r\n          label:\r\n            column.type === \"date\"\r\n              ? new Date(option as string)?.toLocaleDateString()\r\n              : option,\r\n        }));\r\n\r\n        // Sort the options array by label in ascending alphabetical order\r\n        if (column.type === \"date\") {\r\n          // Convert labels to timestamps and sort accordingly\r\n          sortedOptions = sortedOptions.sort((a, b) => {\r\n            const timestampA = new Date(a.value as string).getTime();\r\n            const timestampB = new Date(b.value as string).getTime();\r\n            return timestampA - timestampB;\r\n          });\r\n        } else {\r\n          // Sort alphabetically by label for non-date columns\r\n          sortedOptions = sortedOptions.sort((a, b) =>\r\n            (a.label as string)?.localeCompare(b.label as string)\r\n          );\r\n        }\r\n\r\n        // Add a default option if needed\r\n        newFilterOptions[column.key as string] = [\r\n          { value: \"\", label: \"\" },\r\n          ...sortedOptions,\r\n        ];\r\n      }\r\n    });\r\n\r\n    setFilterOptions(newFilterOptions);\r\n  }, [items, columns]);\r\n\r\n  const requestSort = (key: keyof T | \"actions\") => {\r\n    if (sortConfig?.key === key && sortConfig.direction !== null) {\r\n      setSortConfig({\r\n        key,\r\n        direction: sortConfig.direction === \"ascending\" ? \"descending\" : null,\r\n      });\r\n    } else {\r\n      setSortConfig({ key, direction: \"ascending\" });\r\n    }\r\n  };\r\n\r\n  const getSortIcon = (key: keyof T | \"actions\") => {\r\n    if (sortConfig?.key === key) {\r\n      return sortConfig.direction === \"ascending\" ? (\r\n        <MdArrowUpward fontSize=\"small\" />\r\n      ) : sortConfig.direction === \"descending\" ? (\r\n        <MdArrowDownward fontSize=\"small\" />\r\n      ) : (\r\n        <MdArrowUpward\r\n          fontSize=\"small\"\r\n          className=\"text-gray-300 invisible group-hover:visible \"\r\n        />\r\n      );\r\n    }\r\n    return (\r\n      <MdArrowUpward\r\n        fontSize=\"small\"\r\n        className=\"text-gray-300 invisible group-hover:visible \"\r\n      />\r\n    );\r\n  };\r\n\r\n  const sortedItems = sortConfig?.direction\r\n    ? [...items].sort((a, b) => {\r\n        const aValue = a[sortConfig.key as keyof T];\r\n        const bValue = b[sortConfig.key as keyof T];\r\n\r\n        // Check if values are Date objects\r\n        if (aValue instanceof Date && bValue instanceof Date) {\r\n          return sortConfig.direction === \"ascending\"\r\n            ? aValue.getTime() - bValue.getTime()\r\n            : bValue.getTime() - aValue.getTime();\r\n        }\r\n        if (typeof aValue === \"number\" && typeof bValue === \"number\") {\r\n          return sortConfig.direction === \"ascending\"\r\n            ? aValue - bValue\r\n            : bValue - aValue;\r\n        }\r\n        return sortConfig.direction === \"ascending\"\r\n          ? String(aValue).localeCompare(String(bValue))\r\n          : String(bValue).localeCompare(String(aValue));\r\n      })\r\n    : items;\r\n\r\n  // const searchableKeys = new Set(\r\n  //   columns.filter((col) => !col.actions).map((col) => col.key)\r\n  // );\r\n\r\n  const filteredItems = sortedItems.filter((item: any) => {\r\n    const textSearchMatch = fulltextSearch\r\n      ? columns.some((column) => {\r\n          const value = item[column.key];\r\n          return (\r\n            (typeof value === \"string\" || typeof value === \"number\") &&\r\n            value\r\n              .toString()\r\n              .toLowerCase()\r\n              .includes(fulltextSearch.toLowerCase())\r\n          );\r\n        })\r\n      : true;\r\n\r\n    const columnFiltersMatch = columns.every((column) => {\r\n      //   debugger;\r\n      const filterValue = columnFilters[column.key as string];\r\n      if (!filterValue) return true; // Ignore filter if 'None' is selected\r\n\r\n      const itemValue = item[column.key];\r\n      if ((column.type || typeof itemValue) === \"string\") {\r\n        if (column.filterOperator == \">=\") {\r\n          return itemValue.toLowerCase() >= filterValue.toLowerCase();\r\n        } else if (column.filterOperator == \"<=\") {\r\n          return itemValue.toLowerCase() <= filterValue.toLowerCase();\r\n        }\r\n        if (column.filterType == \"text\") {\r\n          return itemValue.toLowerCase().includes(filterValue.toLowerCase());\r\n        } else {\r\n          return itemValue.toLowerCase() == filterValue.toLowerCase();\r\n        }\r\n      } else {\r\n        if (column.filterOperator == \">=\") {\r\n          return itemValue >= filterValue;\r\n        } else if (column.filterOperator == \"<=\") {\r\n          return itemValue <= filterValue;\r\n        } else {\r\n          return itemValue == filterValue;\r\n        }\r\n      }\r\n    });\r\n\r\n    return textSearchMatch && columnFiltersMatch;\r\n  });\r\n\r\n  // Pagination logic\r\n  const indexOfLastItem = (currentPage + 1) * itemsPerPage;\r\n  const indexOfFirstItem = indexOfLastItem - itemsPerPage;\r\n  const currentItems = filteredItems.slice(indexOfFirstItem, indexOfLastItem);\r\n\r\n  const nextPage = () => {\r\n    setCurrentPage(currentPage + 1);\r\n  };\r\n\r\n  const prevPage = () => {\r\n    setCurrentPage(currentPage - 1);\r\n  };\r\n  const handleSearchChanged = (\r\n    e: React.ChangeEvent<\r\n      HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement\r\n    >\r\n  ) => {\r\n    setFulltextSearch(e.target?.value);\r\n    setCurrentPage(0);\r\n  };\r\n\r\n  const totalPages = Math.max(\r\n    1,\r\n    Math.ceil(filteredItems.length / itemsPerPage)\r\n  );\r\n\r\n  // Pagination display logic\r\n  const paginationDisplay = `Strana ${currentPage + 1} z ${totalPages}`;\r\n\r\n  const filterHandler = (key: keyof T, value: string) => {\r\n    setColumnFilters((prev) => ({ ...prev, [key]: value }));\r\n    setCurrentPage(0);\r\n  };\r\n\r\n  if (isLoading) return <Spinner />;\r\n  return (\r\n    <>\r\n      <div className=\"container  shadow-lg border border-gray-200 rounded-xl overflow-hidden \">\r\n        {(title || subtitle || allowSearch) && (\r\n          <div className=\"p-5 leading-9 flex \">\r\n            <div className=\"flex-grow\">\r\n              {title && (\r\n                <h1 className=\"font-semibold text-xl leading-[42px] \">\r\n                  {title}\r\n                </h1>\r\n              )}\r\n              {subtitle && (\r\n                <p className=\"font-normal text-gray-600\">{subtitle}</p>\r\n              )}\r\n            </div>\r\n            <div\r\n              className=\"flex items-center text-xl h-full p-3 mr-5 cursor-pointer text-gray-500 \"\r\n              onClick={() => setShowColFilters(!showColFilters)}\r\n            >\r\n              {!showColFilters && <MdOutlineFilterAlt />}\r\n              {showColFilters && <MdOutlineFilterAltOff />}\r\n            </div>\r\n            {allowSearch && (\r\n              <div className=\"\">\r\n                <FormField\r\n                  placeholder=\"Vyhledávání\"\r\n                  name=\"search\"\r\n                  onInputChange={handleSearchChanged}\r\n                  type=\"text\"\r\n                  value={fulltextSearch}\r\n                >\r\n                  {\" \"}\r\n                  <div className=\" text-gray-500 leading-5 flex items-center h-full\">\r\n                    {!fulltextSearch && <MdSearch></MdSearch>}\r\n                    {fulltextSearch && (\r\n                      <MdClose onClick={() => setFulltextSearch(\"\")}></MdClose>\r\n                    )}\r\n                  </div>\r\n                </FormField>\r\n              </div>\r\n            )}\r\n          </div>\r\n        )}\r\n        <div className=\"overflow-x-auto\">\r\n          <table className=\"w-full leading-normal\">\r\n            <thead>\r\n              {showColFilters &&\r\n                columns.findIndex((it) => it.filterType) > -1 && (\r\n                  <tr>\r\n                    {columns.map(({ key, header, filterType }) => (\r\n                      <th\r\n                        key={String(key) + \"_filter\"}\r\n                        //  className=\"cursor-pointer px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-sm font-medium text-gray-600 uppercase tracking-wider\"\r\n                        className={` font-medium cursor-pointer leading-9 text-xs text-left pl-5 pb-5 text-gray-600  ${\r\n                          !title && !subtitle ? \"border-t-0\" : \"\"\r\n                        }`}\r\n                      >\r\n                        {filterType && (\r\n                          <FormField\r\n                            label={header}\r\n                            name={String(key) + \"_filter\"}\r\n                            onInputChange={(e) =>\r\n                              filterHandler(key as keyof T, e.target.value)\r\n                            }\r\n                            type={filterType}\r\n                            options={filterOptions[String(key)] || []}\r\n                            value={columnFilters[String(key)]}\r\n                            clearable\r\n                          ></FormField>\r\n                        )}\r\n                      </th>\r\n                    ))}\r\n                  </tr>\r\n                )}\r\n              <tr>\r\n                {columns.map(({ key, header, actions }) => (\r\n                  <th\r\n                    key={String(key)}\r\n                    //  className=\"cursor-pointer px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-sm font-medium text-gray-600 uppercase tracking-wider\"\r\n                    className={`group font-medium cursor-pointer leading-9 text-xs text-left px-5 text-gray-600 bg bg-gray-50 border-t border-b border-gray-200 ${\r\n                      !title && !subtitle ? \"border-t-0\" : \"\"\r\n                    }`}\r\n                    onClick={() => requestSort(key)}\r\n                  >\r\n                    <span className=\"inline-flex items-center gap-2\">\r\n                      {header} {!actions ? getSortIcon(key) : \"\"}\r\n                    </span>\r\n                  </th>\r\n                ))}\r\n              </tr>\r\n            </thead>\r\n\r\n            <tbody>\r\n              {currentItems.map((item, rowIndex) => (\r\n                <tr\r\n                  key={rowIndex}\r\n                  className={`${\r\n                    item._isHighlighted ? \" bg-gray-200  \" : \" \"\r\n                  } hover:bg-gray-50  border-gray-200 border-b text-sm `}\r\n                >\r\n                  {columns.map(({ render, actions, classes }, colIndex) => (\r\n                    <td\r\n                      key={`${rowIndex}-${colIndex}`}\r\n                      className={`px-5 py-2\r\n                   ${\r\n                     colIndex == 0\r\n                       ? \" font-medium text-gray-900\"\r\n                       : \" text-gray-700\"\r\n                   } ${classes}`}\r\n                    >\r\n                      {render ? render(item) : \"\"}\r\n                      {actions &&\r\n                        actions\r\n                          .filter((it) => {\r\n                            if (it.visible) {\r\n                              return it.visible(item);\r\n                            } else true;\r\n                          })\r\n                          .map((action, actionIndex) => (\r\n                            <div\r\n                              key={`${rowIndex}-${colIndex}-${actionIndex}`}\r\n                              className=\"flex inline-flex align-middle\"\r\n                            >\r\n                              {action.icon && (\r\n                                <Button\r\n                                  variant=\"icon\"\r\n                                  onClick={() => action.onClick(item)}\r\n                                >\r\n                                  {\" \"}\r\n                                  {action.icon}\r\n                                </Button>\r\n                              )}\r\n                              {!action.icon && (\r\n                                <Button\r\n                                  variant=\"transparent\"\r\n                                  onClick={() => action.onClick(item)}\r\n                                >\r\n                                  {\" \"}\r\n                                  {action.label}\r\n                                </Button>\r\n                              )}\r\n                            </div>\r\n                          ))}\r\n                    </td>\r\n                  ))}\r\n                </tr>\r\n              ))}\r\n              {currentItems.length == 0 && (\r\n                <tr key=\"tr-nodata   \">\r\n                  <td\r\n                    key=\"td-nodata\"\r\n                    className=\"px-5 py-3 border-b border-gray-200 bg-white text-sm items-center justify-center align-middle\"\r\n                    colSpan={columns.length}\r\n                  >\r\n                    Žádná data\r\n                  </td>\r\n                </tr>\r\n              )}\r\n            </tbody>\r\n          </table>\r\n        </div>\r\n        <div className=\"w-full p-5 grid grid-cols-3\">\r\n          <div className=\"text-left items-start justify-start\">\r\n            {currentPage !== 0 && (\r\n              <Button\r\n                variant=\"secondary\"\r\n                onClick={prevPage}\r\n                className=\"flex items-center float-left\"\r\n              >\r\n                <MdArrowBack className=\"mr-1.5\" /> Předchozí\r\n              </Button>\r\n            )}\r\n          </div>\r\n          <div className=\" text-center text-xs text-gray-800\">\r\n            {paginationDisplay} {/* Updated to use dynamic page numbers */}\r\n          </div>\r\n          <div className=\"text-right items-end justify-end\">\r\n            {indexOfLastItem < filteredItems.length && (\r\n              <Button\r\n                variant=\"secondary\"\r\n                onClick={nextPage}\r\n                className=\"flex items-center float-right\"\r\n              >\r\n                Následující <MdArrowForward className=\"ml-2\" size={20} />\r\n              </Button>\r\n            )}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </>\r\n  );\r\n}\r\n\r\nexport default DataTable;\r\n"],"names":[],"mappings":";;;;;;;;AA4CA,SAAS,UAA4C;AAAA,EACnD;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AACF,GAAsB;AACpB,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,CAAC;AAChD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,EAAE;AACvD,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAgC,CAAE,CAAA;AACtE,QAAA,CAAC,eAAe,gBAAgB,IAAI;AAAA,IACxC,CAAC;AAAA,EAAA;AAGH,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,KAAK;AAE1D,QAAM,CAAC,YAAY,aAAa,IAAI,SAG1B,IAAI;AAEd,YAAU,MAAM;AACd,UAAM,mBAA0C,CAAA;AAExC,YAAA,QAAQ,CAAC,WAAW;AAC1B,UAAI,OAAO,cAAc,MAAM,SAAS,GAAG;AACzC,cAAM,gBAAgB,IAAI;AAAA,UACxB,MAAM,IAAI,CAAC,SAAS,KAAK,OAAO,GAAc,CAAC;AAAA,QAAA;AAGjD,YAAI,gBAAgB,MAAM,KAAK,aAAa,EAAE,IAAI,CAAC,WAAY;;AAAA;AAAA,YAC7D,OAAO;AAAA,YACP,OACE,OAAO,SAAS,UACZ,SAAI,KAAK,MAAgB,MAAzB,mBAA4B,uBAC5B;AAAA,UACN;AAAA,SAAA;AAGE,YAAA,OAAO,SAAS,QAAQ;AAE1B,0BAAgB,cAAc,KAAK,CAAC,GAAG,MAAM;AAC3C,kBAAM,aAAa,IAAI,KAAK,EAAE,KAAe,EAAE;AAC/C,kBAAM,aAAa,IAAI,KAAK,EAAE,KAAe,EAAE;AAC/C,mBAAO,aAAa;AAAA,UAAA,CACrB;AAAA,QAAA,OACI;AAEL,0BAAgB,cAAc;AAAA,YAAK,CAAC,GAAG;;AACpC,6BAAE,UAAF,mBAAoB,cAAc,EAAE;AAAA;AAAA,UAAe;AAAA,QAExD;AAGiB,yBAAA,OAAO,GAAa,IAAI;AAAA,UACvC,EAAE,OAAO,IAAI,OAAO,GAAG;AAAA,UACvB,GAAG;AAAA,QAAA;AAAA,MAEP;AAAA,IAAA,CACD;AAED,qBAAiB,gBAAgB;AAAA,EAAA,GAChC,CAAC,OAAO,OAAO,CAAC;AAEb,QAAA,cAAc,CAAC,QAA6B;AAChD,SAAI,yCAAY,SAAQ,OAAO,WAAW,cAAc,MAAM;AAC9C,oBAAA;AAAA,QACZ;AAAA,QACA,WAAW,WAAW,cAAc,cAAc,eAAe;AAAA,MAAA,CAClE;AAAA,IAAA,OACI;AACL,oBAAc,EAAE,KAAK,WAAW,YAAa,CAAA;AAAA,IAC/C;AAAA,EAAA;AAGI,QAAA,cAAc,CAAC,QAA6B;AAC5C,SAAA,yCAAY,SAAQ,KAAK;AAC3B,aAAO,WAAW,cAAc,cAC9B,oBAAC,iBAAc,UAAS,QAAQ,CAAA,IAC9B,WAAW,cAAc,eAC3B,oBAAC,iBAAgB,EAAA,UAAS,QAAQ,CAAA,IAElC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,UAAS;AAAA,UACT,WAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IAGhB;AAEE,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,UAAS;AAAA,QACT,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EACZ;AAIE,QAAA,eAAc,yCAAY,aAC5B,CAAC,GAAG,KAAK,EAAE,KAAK,CAAC,GAAG,MAAM;AAClB,UAAA,SAAS,EAAE,WAAW,GAAc;AACpC,UAAA,SAAS,EAAE,WAAW,GAAc;AAGtC,QAAA,kBAAkB,QAAQ,kBAAkB,MAAM;AACpD,aAAO,WAAW,cAAc,cAC5B,OAAO,QAAQ,IAAI,OAAO,QAAA,IAC1B,OAAO,QAAQ,IAAI,OAAO,QAAQ;AAAA,IACxC;AACA,QAAI,OAAO,WAAW,YAAY,OAAO,WAAW,UAAU;AAC5D,aAAO,WAAW,cAAc,cAC5B,SAAS,SACT,SAAS;AAAA,IACf;AACA,WAAO,WAAW,cAAc,cAC5B,OAAO,MAAM,EAAE,cAAc,OAAO,MAAM,CAAC,IAC3C,OAAO,MAAM,EAAE,cAAc,OAAO,MAAM,CAAC;AAAA,EAChD,CAAA,IACD;AAMJ,QAAM,gBAAgB,YAAY,OAAO,CAAC,SAAc;AACtD,UAAM,kBAAkB,iBACpB,QAAQ,KAAK,CAAC,WAAW;AACjB,YAAA,QAAQ,KAAK,OAAO,GAAG;AAC7B,cACG,OAAO,UAAU,YAAY,OAAO,UAAU,aAC/C,MACG,SAAS,EACT,YAAY,EACZ,SAAS,eAAe,YAAa,CAAA;AAAA,IAE3C,CAAA,IACD;AAEJ,UAAM,qBAAqB,QAAQ,MAAM,CAAC,WAAW;AAE7C,YAAA,cAAc,cAAc,OAAO,GAAa;AACtD,UAAI,CAAC;AAAoB,eAAA;AAEnB,YAAA,YAAY,KAAK,OAAO,GAAG;AACjC,WAAK,OAAO,QAAQ,OAAO,eAAe,UAAU;AAC9C,YAAA,OAAO,kBAAkB,MAAM;AACjC,iBAAO,UAAU,YAAA,KAAiB,YAAY,YAAY;AAAA,QAAA,WACjD,OAAO,kBAAkB,MAAM;AACxC,iBAAO,UAAU,YAAA,KAAiB,YAAY,YAAY;AAAA,QAC5D;AACI,YAAA,OAAO,cAAc,QAAQ;AAC/B,iBAAO,UAAU,YAAY,EAAE,SAAS,YAAY,aAAa;AAAA,QAAA,OAC5D;AACL,iBAAO,UAAU,YAAA,KAAiB,YAAY,YAAY;AAAA,QAC5D;AAAA,MAAA,OACK;AACD,YAAA,OAAO,kBAAkB,MAAM;AACjC,iBAAO,aAAa;AAAA,QAAA,WACX,OAAO,kBAAkB,MAAM;AACxC,iBAAO,aAAa;AAAA,QAAA,OACf;AACL,iBAAO,aAAa;AAAA,QACtB;AAAA,MACF;AAAA,IAAA,CACD;AAED,WAAO,mBAAmB;AAAA,EAAA,CAC3B;AAGK,QAAA,mBAAmB,cAAc,KAAK;AAC5C,QAAM,mBAAmB,kBAAkB;AAC3C,QAAM,eAAe,cAAc,MAAM,kBAAkB,eAAe;AAE1E,QAAM,WAAW,MAAM;AACrB,mBAAe,cAAc,CAAC;AAAA,EAAA;AAGhC,QAAM,WAAW,MAAM;AACrB,mBAAe,cAAc,CAAC;AAAA,EAAA;AAE1B,QAAA,sBAAsB,CAC1B,MAGG;;AACe,uBAAA,OAAE,WAAF,mBAAU,KAAK;AACjC,mBAAe,CAAC;AAAA,EAAA;AAGlB,QAAM,aAAa,KAAK;AAAA,IACtB;AAAA,IACA,KAAK,KAAK,cAAc,SAAS,YAAY;AAAA,EAAA;AAI/C,QAAM,oBAAoB,UAAU,cAAc,CAAC,MAAM,UAAU;AAE7D,QAAA,gBAAgB,CAAC,KAAc,UAAkB;AACpC,qBAAA,CAAC,UAAU,EAAE,GAAG,MAAM,CAAC,GAAG,GAAG,MAAQ,EAAA;AACtD,mBAAe,CAAC;AAAA,EAAA;AAGd,MAAA;AAAW,+BAAQ,SAAQ,CAAA,CAAA;AAC/B,SAEI,oBAAA,UAAA,EAAA,UAAA,qBAAC,OAAI,EAAA,WAAU,2EACX,UAAA;AAAA,KAAA,SAAS,YAAY,gBACpB,qBAAA,OAAA,EAAI,WAAU,uBACb,UAAA;AAAA,MAAC,qBAAA,OAAA,EAAI,WAAU,aACZ,UAAA;AAAA,QAAA,SACE,oBAAA,MAAA,EAAG,WAAU,yCACX,UACH,OAAA;AAAA,QAED,YACC,oBAAC,KAAE,EAAA,WAAU,6BAA6B,UAAS,UAAA;AAAA,MAAA,GAEvD;AAAA,MACA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,SAAS,MAAM,kBAAkB,CAAC,cAAc;AAAA,UAE/C,UAAA;AAAA,YAAC,CAAA,sCAAmB,oBAAmB,EAAA;AAAA,YACvC,sCAAmB,uBAAsB,EAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAC5C;AAAA,MACC,eACC,oBAAC,OAAI,EAAA,WAAU,IACb,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,aAAY;AAAA,UACZ,MAAK;AAAA,UACL,eAAe;AAAA,UACf,MAAK;AAAA,UACL,OAAO;AAAA,UAEN,UAAA;AAAA,YAAA;AAAA,YACD,qBAAC,OAAI,EAAA,WAAU,qDACZ,UAAA;AAAA,cAAC,CAAA,sCAAmB,UAAS,EAAA;AAAA,cAC7B,kBACE,oBAAA,SAAA,EAAQ,SAAS,MAAM,kBAAkB,EAAE,GAAG;AAAA,YAAA,GAEnD;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA,GAEJ;AAAA,IAAA,GAEJ;AAAA,wBAED,OAAI,EAAA,WAAU,mBACb,UAAC,qBAAA,SAAA,EAAM,WAAU,yBACf,UAAA;AAAA,MAAA,qBAAC,SACE,EAAA,UAAA;AAAA,QAAA,kBACC,QAAQ,UAAU,CAAC,OAAO,GAAG,UAAU,IAAI,MACxC,oBAAA,MAAA,EACE,kBAAQ,IAAI,CAAC,EAAE,KAAK,QAAQ,iBAC3B;AAAA,UAAC;AAAA,UAAA;AAAA,YAGC,WAAW,oFACT,CAAC,SAAS,CAAC,WAAW,eAAe,EACvC;AAAA,YAEC,UACC,cAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,OAAO;AAAA,gBACP,MAAM,OAAO,GAAG,IAAI;AAAA,gBACpB,eAAe,CAAC,MACd,cAAc,KAAgB,EAAE,OAAO,KAAK;AAAA,gBAE9C,MAAM;AAAA,gBACN,SAAS,cAAc,OAAO,GAAG,CAAC,KAAK,CAAC;AAAA,gBACxC,OAAO,cAAc,OAAO,GAAG,CAAC;AAAA,gBAChC,WAAS;AAAA,cAAA;AAAA,YACV;AAAA,UAAA;AAAA,UAjBE,OAAO,GAAG,IAAI;AAAA,QAoBtB,CAAA,GACH;AAAA,QAEJ,oBAAC,QACE,UAAQ,QAAA,IAAI,CAAC,EAAE,KAAK,QAAQ,QAAA,MAC3B;AAAA,UAAC;AAAA,UAAA;AAAA,YAGC,WAAW,mIACT,CAAC,SAAS,CAAC,WAAW,eAAe,EACvC;AAAA,YACA,SAAS,MAAM,YAAY,GAAG;AAAA,YAE9B,UAAA,qBAAC,QAAK,EAAA,WAAU,kCACb,UAAA;AAAA,cAAA;AAAA,cAAO;AAAA,cAAE,CAAC,UAAU,YAAY,GAAG,IAAI;AAAA,YAAA,GAC1C;AAAA,UAAA;AAAA,UATK,OAAO,GAAG;AAAA,QAWlB,CAAA,GACH;AAAA,MAAA,GACF;AAAA,2BAEC,SACE,EAAA,UAAA;AAAA,QAAa,aAAA,IAAI,CAAC,MAAM,aACvB;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAW,GACT,KAAK,iBAAiB,mBAAmB,GAC3C;AAAA,YAEC,UAAA,QAAQ,IAAI,CAAC,EAAE,QAAQ,SAAS,WAAW,aAC1C;AAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,WAAW;AAAA,qBAEZ,YAAY,IACR,+BACA,gBACN,IAAI,OAAO;AAAA,gBAEP,UAAA;AAAA,kBAAS,SAAA,OAAO,IAAI,IAAI;AAAA,kBACxB,WACC,QACG,OAAO,CAAC,OAAO;AACd,wBAAI,GAAG,SAAS;AACP,6BAAA,GAAG,QAAQ,IAAI;AAAA,oBACjB;AAAA,kBACR,CAAA,EACA,IAAI,CAAC,QAAQ,gBACZ;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBAEC,WAAU;AAAA,sBAET,UAAA;AAAA,wBAAA,OAAO,QACN;AAAA,0BAAC;AAAA,0BAAA;AAAA,4BACC,SAAQ;AAAA,4BACR,SAAS,MAAM,OAAO,QAAQ,IAAI;AAAA,4BAEjC,UAAA;AAAA,8BAAA;AAAA,8BACA,OAAO;AAAA,4BAAA;AAAA,0BAAA;AAAA,wBACV;AAAA,wBAED,CAAC,OAAO,QACP;AAAA,0BAAC;AAAA,0BAAA;AAAA,4BACC,SAAQ;AAAA,4BACR,SAAS,MAAM,OAAO,QAAQ,IAAI;AAAA,4BAEjC,UAAA;AAAA,8BAAA;AAAA,8BACA,OAAO;AAAA,4BAAA;AAAA,0BAAA;AAAA,wBACV;AAAA,sBAAA;AAAA,oBAAA;AAAA,oBAnBG,GAAG,QAAQ,IAAI,QAAQ,IAAI,WAAW;AAAA,kBAAA,CAsB9C;AAAA,gBAAA;AAAA,cAAA;AAAA,cAxCA,GAAG,QAAQ,IAAI,QAAQ;AAAA,YAAA,CA0C/B;AAAA,UAAA;AAAA,UAjDI;AAAA,QAAA,CAmDR;AAAA,QACA,aAAa,UAAU,KACtB,oBAAC,MACC,EAAA,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAU;AAAA,YACV,SAAS,QAAQ;AAAA,YAClB,UAAA;AAAA,UAAA;AAAA,UAHK;AAAA,aAFA,cAQR;AAAA,MAAA,GAEJ;AAAA,IAAA,EAAA,CACF,EACF,CAAA;AAAA,IACA,qBAAC,OAAI,EAAA,WAAU,+BACb,UAAA;AAAA,MAAA,oBAAC,OAAI,EAAA,WAAU,uCACZ,UAAA,gBAAgB,KACf;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,SAAS;AAAA,UACT,WAAU;AAAA,UAEV,UAAA;AAAA,YAAC,oBAAA,aAAA,EAAY,WAAU,SAAS,CAAA;AAAA,YAAE;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA,GAGxC;AAAA,MACA,qBAAC,OAAI,EAAA,WAAU,sCACZ,UAAA;AAAA,QAAA;AAAA,QAAkB;AAAA,MAAA,GACrB;AAAA,0BACC,OAAI,EAAA,WAAU,oCACZ,UAAA,kBAAkB,cAAc,UAC/B;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,SAAS;AAAA,UACT,WAAU;AAAA,UACX,UAAA;AAAA,YAAA;AAAA,YACc,oBAAA,gBAAA,EAAe,WAAU,QAAO,MAAM,IAAI;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA,GAG7D;AAAA,IAAA,GACF;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ;"}