rez-table-listing-mui 0.0.25 → 0.0.26

package/src/App.tsx

@@ -1,103 +1,119 @@
 import { useEffect, useMemo, useState } from "react";
 import { useCraftTable } from "./libs/hooks/useCraftTable";
 import { TableTabs } from "./components/tabs";
-import { makeData, Person } from "./libs/utils/make-hierar-data";
 import { useDefaultColumns } from "./libs/hooks/useDefaultColumns";
 import TableWrapper from "./components/index-table";
-import Papa from "papaparse";
-import { DataFormat } from "./libs/utils/Data-format";
+import { entityTableMetaMaster } from "./libs/utils/apiColumn";
+import {
+  useCommonDropdownAPI,
+  useDeleteFilterAPI,
+  useEntityTableAPI,
+  useSavedFilterAPI,
+  useUpdateFilterAPI,
+} from "./libs/hooks/useEntityTableAPI";
+import {
+  useDetailsQueryAPI,
+  useFetchData,
+} from "./libs/hooks/useEntityTableHooks";
+import LoginButton from "./components/login";
+// import { ENTITY_TYPE } from "./libs/utils/common";
 
 function App() {
   const [mockLoading, setMockLoading] = useState<boolean>(true);
-  const [activeTab, setActiveTab] = useState<string>("ALL");
-  const [jsonData, setJsonData] = useState<any[]>([]);
+  // const [jsonData] = useState<any[]>([]);
   const [columns, setColumns] = useState<any[]>([]);
-  const [metadata, setMetadata] = useState<any[]>([]);
   const [searchTerm, setSearchTerm] = useState("");
+  // const [data, setData] = useState<Person[]>(() => makeData(50, 3, 2));
+  // const [entity_type] = useState(ENTITY_TYPE); //OR UPR BRD
+
+  const [selectedTab, setSelectedTab] = useState("ALL");
+
+  const tableStates = useCraftTable();
+  const { filters, setFilters, filterMaster, filterToDelete } = tableStates;
 
-  //To handle hierarchical data
   const { defaultColumns } = useDefaultColumns();
-  const [data, setData] = useState<Person[]>(() => makeData(50, 3, 2));
+
+  const { metaQuery } = useFetchData("UPR");
+  const { detailsQuery } = useDetailsQueryAPI(
+    filterMaster?.saved_filters?.selectedId
+      ? filterMaster?.saved_filters?.selectedId
+      : metaQuery?.data?.default_filter?.value
+  );
+
+  //API CALL FOR SAVED FILTER
+  const { savedMutation } = useSavedFilterAPI();
+
+  //API FOR DELETING FILTER
+  const { deleteMutation } = useDeleteFilterAPI();
+
+  //API FOR UPDATE FILTER
+  const { updateMutation } = useUpdateFilterAPI();
+
+  // const { dropdownData } = useCommonDropdownAPI(
+  //   metaQuery.data,
+  //   tableStates.filterMaster?.attributes?.selected
+  // );
+
+  const { dropdownData } = useCommonDropdownAPI(metaQuery.data);
 
   useEffect(() => {
     setTimeout(() => {
       setMockLoading(false);
     }, 1000);
+
+    const fetchMeta = async () => {
+      try {
+        const { res } = await entityTableMetaMaster("UPR");
+        setColumns(res);
+      } catch (error) {
+        console.error("Failed to fetch metadata:", error);
+      }
+    };
+
+    fetchMeta();
   }, []);
 
-  const tableStates = useCraftTable();
+  useEffect(() => {
+    setFilters(detailsQuery.data ?? []);
+  }, [detailsQuery.data]);
 
-  const handleMetadataUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
-    if (!file) return;
-
-    Papa.parse(file, {
-      delimiter: ",",
-      header: true,
-      skipEmptyLines: true,
-      complete: (result: any) => {
-        const meta = result.data as {
-          header: string;
-          accessorKey: string;
-          id: "string";
-          size: "number";
-          align: "string";
-        }[];
-        setMetadata(meta);
-
-        const dynamicColumns = meta.map(
-          ({ header, accessorKey, size, align }) => ({
-            header,
-            id: header,
-            accessorKey,
-            size: size || 200,
-            meta: { align },
-          })
-        );
+  const enableServerSideSorting = false;
 
-        setColumns(dynamicColumns);
+  const { tableData } = useEntityTableAPI({
+    page: 0,
+    size: 50,
+    entity_type: "UPR",
+    tabs: {
+      columnName: "status",
+      sortBy: "ASC",
+      value: "active",
+    },
+    quickFilter: tableStates.filters,
+    sortby: [
+      {
+        sortColum: "name",
+        sortType: "ASC",
       },
-    });
-  };
+    ],
+    attributeFilter: [],
+  });
 
-  const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
-    if (!file) return;
-
-    Papa.parse(file, {
-      delimiter: ",",
-      header: true,
-      skipEmptyLines: true,
-      complete: (result: any) => {
-        const data = result.data as object[];
-
-        const dataMap: Record<string, any> = {};
-        data.forEach((row: any) => {
-          const parentId = row.parentId;
-          if (parentId) {
-            if (!dataMap[parentId]) {
-              dataMap[parentId] = [];
-            }
-            dataMap[parentId].push(row);
-          }
-        });
-
-        const formattedData = data.map((row: any) => {
-          let formattedRow: any = {};
-          metadata.forEach(({ accessorKey, type }) => {
-            formattedRow[accessorKey] = DataFormat(row[accessorKey], type);
-          });
-
-          if (dataMap[row.id]) {
-            formattedRow.subRows = dataMap[row.id];
-          }
-
-          return formattedRow;
-        });
-        setJsonData(formattedData);
-      },
-    });
-  };
+  const newData = useMemo(
+    () => tableData?.entity_list || [],
+    [tableData?.entity_list]
+  );
+  const tabsData = tableData?.entity_tabs;
+
+  const totalCount = useMemo(() => {
+    return Number(
+      tableData?.entity_tabs?.find((tab) => {
+        const activeTab = selectedTab || "ALL";
+        return (
+          tab.tab_value?.toLocaleLowerCase() === activeTab.toLocaleLowerCase()
+        );
+      })?.tab_value_count || "0"
+    );
+  }, [tableData, selectedTab]);
 
   const handleRenderStatus = ({ value }: any) => {
     const statusValue = value?.toUpperCase();
@@ -119,57 +135,80 @@ function App() {
   };
 
   const handleRenderAction = ({ row }: any) => {
-    return (
-      <button
-        onClick={() => {
-          alert(JSON.stringify(row));
-        }}
-      >
-        Edit
-      </button>
-    );
+    return <button onClick={() => alert(JSON.stringify(row))}>Edit</button>;
   };
 
-  const entity_tabs = [
-    {
-      tab_value: "Active",
-      tab_value_count: "5",
-    },
-    {
-      tab_value: "INACTIVE",
-      tab_value_count: "4",
-    },
-    {
-      tab_value: "ALL",
-      tab_value_count: 9,
-    },
-  ];
-
-  console.log("+++", handleFileUpload, handleMetadataUpload, setData);
-
-  const rawData = useMemo(() => {
-    return jsonData && jsonData.length > 0 ? jsonData : data;
-  }, [jsonData, data]);
-
   const filteredData = useMemo(() => {
-    if (!searchTerm) return rawData;
+    if (!searchTerm) return newData;
 
-    return rawData.filter((row) =>
+    return newData.filter((row: any) =>
       Object.values(row)
         .join(" ")
         .toLowerCase()
         .includes(searchTerm.toLowerCase())
     );
-  }, [rawData, searchTerm]);
+  }, [newData, searchTerm]);
+
+  // API to handle saving a filter
+  const handleSaveFilter = (name: string) => {
+    const quickFilter = filters.map((f) => ({
+      filter_attribute: f.filter_attribute,
+      filter_operator: f.filter_operator,
+      filter_value: f.filter_value,
+    }));
+    console.log("Quick Filter in App.tsx", quickFilter);
+
+    const payload = {
+      name,
+      is_default: false,
+      mapped_entity_type: "UPR", // For that entity type
+      status: "ACTIVE",
+      entity_type: "SFM", // FIXED entity type
+      filterDetails: quickFilter,
+    };
+    const entity_type = "SFM";
+    savedMutation.mutate({ entity_type, payload });
+  };
+
+  // API to handle removing or deleting a filter
+  const handleRemoveFilter = () => {
+    const payload = {
+      name: filterToDelete?.label,
+      id: filterToDelete?.value,
+      is_default: false,
+      mapped_entity_type: "UPR",
+      status: "INACTIVE",
+      entity_type: "SFM",
+    };
+    const entity_type = "SFM";
+    deleteMutation.mutate({ entity_type, payload });
+  };
+
+  //API to update the filter
+  const handleUpdateFilter = () => {
+    const quickFilter = filters.map((f) => ({
+      filter_attribute: f.filter_attribute,
+      filter_operator: f.filter_operator,
+      filter_value: f.filter_value,
+    }));
+    console.log("Quick Filter in App.tsx", quickFilter);
+
+    const payload = {
+      name: filterMaster?.saved_filters?.selectedName, // Name of the filter
+      is_default: false,
+      id: filterMaster?.saved_filters?.selectedId,
+      mapped_entity_type: "UPR",
+      status: "ACTIVE",
+      entity_type: "SFM",
+      filterDetails: quickFilter,
+    };
+    const entity_type = "SFM";
+    updateMutation.mutate({ entity_type, payload });
+  };
 
   return (
     <div className="app_wrapper">
-      {/* <div>
-        <label>Meta Upload</label>&nbsp;
-        <input type="file" accept=".csv" onChange={handleMetadataUpload} />
-        <label>Data Upload</label>&nbsp;
-        <input type="file" accept=".csv" onChange={handleFileUpload} />
-      </div> */}
+      <LoginButton />
 
       <TableWrapper
         data={filteredData}
@@ -178,48 +217,52 @@ function App() {
         featureOptions={{
           striped: true,
           compactTable: false,
-          enableSorting: false,
+          enableSorting: !enableServerSideSorting,
           enableColumnReordering: true,
           enableColumnResizing: true,
           enableRowSelection: false,
+          enableServerSideSorting: enableServerSideSorting,
         }}
         loadingOptions={{
           isLoading: mockLoading,
           loaderText: "Loading, Please wait...",
-          // loadingComponent: <Loader/>,
         }}
         topbarOptions={{
           tableStates,
           leftSideComponent: (
             <TableTabs
-              activeTab={activeTab}
+              activeTab={selectedTab}
               tableStates={tableStates}
-              tabsData={entity_tabs}
+              tabsData={tabsData}
               onClick={(state) => {
-                setActiveTab(state);
+                setSelectedTab(state);
               }}
             />
           ),
           searchValue: searchTerm,
           onSearchChange: (val) => setSearchTerm(val),
+          showFilterToggle: true,
+          filterOptions: {
+            tableStates: tableStates,
+            columnsData: metaQuery.data || [],
+            defaultFilters: detailsQuery.data || [],
+            tableData: tableData,
+            dropdownData: dropdownData || [],
+            onDeleteFilter: handleRemoveFilter,
+            onSaveFilter: handleSaveFilter,
+            onUpdateFilter: handleUpdateFilter,
+          },
         }}
         paginationOptions={{
           showPagination: true,
           paginationPosition: "top",
           paginationView: "compact",
+          totalRows: totalCount,
         }}
         customRenderFn={{
           renderStatus: handleRenderStatus,
           renderAction: handleRenderAction,
         }}
-        // shouldHideColumn={(accessorKey?: string) =>
-        //   accessorKey === "action" && false
-        // }
-        // styleOptions={{
-        //   wrapperStyle: {
-        //     maxHeight: "calc(100vh - 280px)",
-        //   },
-        // }}
       />
     </div>
   );

package/src/assets/svg.tsx

@@ -170,6 +170,36 @@ export const ArrowDownUp = () => (
     />
   </svg>
 );
+export const EditIcon = () => (
+  <svg
+    width="12"
+    height="12"
+    viewBox="0 0 12 12"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M1.33331 10.6663H2.17431L8.99865 3.84201L8.15765 3.00101L1.33331 9.82534V10.6663ZM0.93598 11.6663C0.765202 11.6663 0.622091 11.6086 0.506646 11.493C0.391091 11.3776 0.333313 11.2345 0.333313 11.0637V9.90867C0.333313 9.74612 0.364535 9.59118 0.42698 9.44384C0.489313 9.29651 0.575202 9.16812 0.684646 9.05868L9.12698 0.620174C9.22776 0.528619 9.33904 0.457897 9.46081 0.408008C9.5827 0.358008 9.71048 0.333008 9.84415 0.333008C9.97781 0.333008 10.1073 0.35673 10.2325 0.404175C10.3578 0.451619 10.4688 0.527063 10.5653 0.630507L11.3795 1.45484C11.4829 1.5514 11.5566 1.66251 11.6006 1.78817C11.6446 1.91384 11.6666 2.03951 11.6666 2.16517C11.6666 2.29929 11.6438 2.42723 11.598 2.54901C11.5522 2.6709 11.4794 2.78223 11.3795 2.88301L2.94098 11.315C2.83154 11.4245 2.70315 11.5103 2.55581 11.5727C2.40848 11.6351 2.25354 11.6663 2.09098 11.6663H0.93598ZM8.57081 3.42884L8.15765 3.00101L8.99865 3.84201L8.57081 3.42884Z"
+      fill="#0E0C0B"
+      fill-opacity="0.4"
+    />
+  </svg>
+);
+
+export const DeleteIcon = () => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 10 12"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M1.87183 11.6665C1.54039 11.6665 1.25667 11.5485 1.02067 11.3125C0.784667 11.0765 0.666667 10.7928 0.666667 10.4613V1.99982H0.5C0.358333 1.99982 0.239611 1.95188 0.143833 1.85599C0.0479445 1.7601 0 1.64132 0 1.49966C0 1.35788 0.0479445 1.23916 0.143833 1.14349C0.239611 1.04771 0.358333 0.999823 0.5 0.999823H3C3 0.836601 3.0575 0.69749 3.1725 0.58249C3.28739 0.467601 3.42644 0.410156 3.58967 0.410156H6.41033C6.57356 0.410156 6.71261 0.467601 6.8275 0.58249C6.9425 0.69749 7 0.836601 7 0.999823H9.5C9.64167 0.999823 9.76039 1.04777 9.85617 1.14366C9.95206 1.23955 10 1.35832 10 1.49999C10 1.64177 9.95206 1.76049 9.85617 1.85616C9.76039 1.95193 9.64167 1.99982 9.5 1.99982H9.33333V10.4613C9.33333 10.7928 9.21533 11.0765 8.97933 11.3125C8.74333 11.5485 8.45961 11.6665 8.12817 11.6665H1.87183ZM8.33333 1.99982H1.66667V10.4613C1.66667 10.5212 1.68589 10.5704 1.72433 10.6088C1.76278 10.6473 1.81194 10.6665 1.87183 10.6665H8.12817C8.18806 10.6665 8.23722 10.6473 8.27567 10.6088C8.31411 10.5704 8.33333 10.5212 8.33333 10.4613V1.99982ZM3.7695 9.33316C3.91117 9.33316 4.02989 9.28527 4.12567 9.18949C4.22133 9.0936 4.26917 8.97482 4.26917 8.83316V3.83316C4.26917 3.69149 4.22122 3.57271 4.12533 3.47682C4.02956 3.38104 3.91078 3.33316 3.769 3.33316C3.62733 3.33316 3.50861 3.38104 3.41283 3.47682C3.31717 3.57271 3.26933 3.69149 3.26933 3.83316V8.83316C3.26933 8.97482 3.31722 9.0936 3.413 9.18949C3.50889 9.28527 3.62772 9.33316 3.7695 9.33316ZM6.231 9.33316C6.37267 9.33316 6.49139 9.28527 6.58717 9.18949C6.68283 9.0936 6.73067 8.97482 6.73067 8.83316V3.83316C6.73067 3.69149 6.68278 3.57271 6.587 3.47682C6.49111 3.38104 6.37228 3.33316 6.2305 3.33316C6.08883 3.33316 5.97011 3.38104 5.87433 3.47682C5.77867 3.57271 5.73083 3.69149 5.73083 3.83316V8.83316C5.73083 8.97482 5.77878 9.0936 5.87467 9.18949C5.97044 9.28527 6.08922 9.33316 6.231 9.33316Z"
+      fill="#F63D68"
+    />
+  </svg>
+);
 
 export const CrossSearchIcon = () => (
   <svg
@@ -634,7 +664,7 @@ export const SortingIcon = () => {
   );
 };
 
-export const CustomizationIcon = () => {
+export const FilterationIcon = () => {
   return (
     <svg
       width="20"
@@ -796,7 +826,7 @@ export const DropDownIcon = () => {
   );
 };
 
-export const AddIcon = () => {
+export const AddIcon = ({ ...props }) => {
   return (
     <svg
       width="10"
@@ -804,6 +834,7 @@ export const AddIcon = () => {
       viewBox="0 0 10 10"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      {...props}
     >
       <path
         d="M4.50002 5.50002H1.16669C1.02502 5.50002 0.906298 5.45208 0.81052 5.35619C0.714632 5.2603 0.666687 5.14152 0.666687 4.99985C0.666687 4.85808 0.714632 4.73935 0.81052 4.64369C0.906298 4.54791 1.02502 4.50002 1.16669 4.50002H4.50002V1.16669C4.50002 1.02502 4.54797 0.906298 4.64385 0.81052C4.73974 0.714632 4.85852 0.666687 5.00019 0.666687C5.14197 0.666687 5.26069 0.714632 5.35635 0.81052C5.45213 0.906298 5.50002 1.02502 5.50002 1.16669V4.50002H8.83335C8.97502 4.50002 9.09374 4.54797 9.18952 4.64385C9.28541 4.73974 9.33335 4.85852 9.33335 5.00019C9.33335 5.14197 9.28541 5.26069 9.18952 5.35635C9.09374 5.45213 8.97502 5.50002 8.83335 5.50002H5.50002V8.83335C5.50002 8.97502 5.45208 9.09374 5.35619 9.18952C5.2603 9.28541 5.14152 9.33335 4.99985 9.33335C4.85808 9.33335 4.73935 9.28541 4.64369 9.18952C4.54791 9.09374 4.50002 8.97502 4.50002 8.83335V5.50002Z"

package/src/components/common/confirm-modal/index.tsx

@@ -0,0 +1,200 @@
+import React, { useState } from "react";
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Typography,
+  TextField,
+  Button,
+  IconButton,
+  Box,
+  SxProps,
+} from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import { Theme } from "@emotion/react";
+
+// Types for the component props
+export interface ModalButton {
+  label: string;
+  onClick: (inputValue?: string) => void;
+  variant?: "text" | "outlined" | "contained";
+  color?: "primary" | "secondary" | "error" | "info" | "success" | "warning";
+  disabled?: boolean;
+  sx?: SxProps<Theme>;
+}
+
+export interface InputField {
+  label: string;
+  placeholder?: string;
+  required?: boolean;
+  type?: "text" | "email" | "password" | "number";
+  multiline?: boolean;
+  rows?: number;
+  defaultValue?: string;
+}
+
+export interface ConfirmModalProps {
+  open: boolean;
+  onClose: () => void;
+  title: string;
+  description?: string;
+  buttons: ModalButton[];
+  input?: InputField;
+  maxWidth?: "xs" | "sm" | "md" | "lg" | "xl";
+  fullWidth?: boolean;
+}
+
+const ConfirmModal: React.FC<ConfirmModalProps> = ({
+  open,
+  onClose,
+  title,
+  description,
+  buttons,
+  input,
+  maxWidth = "sm",
+  fullWidth = true,
+}) => {
+  const [inputValue, setInputValue] = useState(input?.defaultValue || "");
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(event.target.value);
+  };
+
+  const handleButtonClick = (button: ModalButton) => {
+    if (input) {
+      button.onClick(inputValue);
+    } else {
+      button.onClick();
+    }
+    setInputValue("");
+  };
+
+  const handleClose = () => {
+    setInputValue(input?.defaultValue || "");
+    onClose();
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onClose={handleClose}
+      maxWidth={maxWidth}
+      fullWidth={fullWidth}
+      PaperProps={{
+        sx: {
+          borderRadius: 2,
+          padding: 1,
+        },
+      }}
+    >
+      <DialogTitle
+        sx={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          // padding: "16px 0px",
+          px: "0px",
+          marginX: "24px",
+          paddingBottom: description ? "18px" : "20px",
+          borderBottom: "1px solid #eeeeee",
+        }}
+      >
+        <Typography variant="h6" component="h2" fontWeight="bold">
+          {title}
+        </Typography>
+        <IconButton
+          onClick={handleClose}
+          size="small"
+          sx={{
+            color: "text.secondary",
+          }}
+        >
+          <CloseIcon />
+        </IconButton>
+      </DialogTitle>
+
+      <DialogContent sx={{ padding: "0 24px 16px 24px", mt: 2 }}>
+        {description && (
+          <Typography
+            variant="body2"
+            color="text.secondary"
+            sx={{ marginBottom: input ? 3 : 0 }}
+          >
+            {description}
+          </Typography>
+        )}
+
+        {input && (
+          <Box sx={{ marginTop: description ? 0 : 2 }}>
+            <Typography
+              variant="body2"
+              component="label"
+              sx={{
+                display: "block",
+                marginBottom: 1,
+                fontWeight: 500,
+                color: "text.primary",
+              }}
+            >
+              {input.label}
+              {input.required && (
+                <Typography component="span" color="error.main">
+                  {" "}
+                  *
+                </Typography>
+              )}
+            </Typography>
+            <TextField
+              fullWidth
+              value={inputValue}
+              onChange={handleInputChange}
+              placeholder={input.placeholder}
+              type={input.type || "text"}
+              multiline={input.multiline}
+              rows={input.rows}
+              variant="outlined"
+              size="small"
+              sx={{
+                "& .MuiOutlinedInput-root": {
+                  maxWidth: 280,
+                  borderRadius: 1,
+                  "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+                    border: "2px solid #7A5AF8",
+                  },
+                },
+              }}
+            />
+          </Box>
+        )}
+      </DialogContent>
+
+      <DialogActions
+        sx={{
+          padding: "16px 24px 24px 24px",
+          gap: 1,
+        }}
+      >
+        {buttons.map((button, index) => (
+          <Button
+            key={index}
+            variant={button.variant || "outlined"}
+            color={button.color || "primary"}
+            sx={button.sx}
+            onClick={() => handleButtonClick(button)}
+            disabled={
+              button.disabled ||
+              (input?.required &&
+                !inputValue.trim() &&
+                button.variant === "contained")
+            }
+          >
+            {button.label}
+          </Button>
+        ))}
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default ConfirmModal;

package/src/components/filter/components/attributes-filter.tsx

@@ -0,0 +1,26 @@
+import { Box } from "@mui/material";
+import { AttributesFilterProps } from "../../../types/filter";
+import SelectAttribute from "./forms/components/Attributes-select";
+
+const AttributesFilter = ({
+  columnsData,
+  tableStates,
+  dropdownData,
+  searchTerm,
+  setSearchTerm,
+}: AttributesFilterProps) => {
+  return (
+    <Box>
+      {/* Render select Attributes */}
+      <SelectAttribute
+        columnsData={columnsData}
+        tableStates={tableStates}
+        dropdownData={dropdownData}
+        searchTerm={searchTerm}
+        setSearchTerm={setSearchTerm}
+      />
+    </Box>
+  );
+};
+
+export default AttributesFilter;