rez-table-listing-mui 0.0.25 → 0.0.27

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

@@ -0,0 +1,150 @@
+import { useEffect, useState } from "react";
+import {
+  FilterFormComponentProps,
+  FilterMasterStateProps,
+  FilterOperationListProps,
+} from "../../../types/filter";
+import {
+  Box,
+  IconButton,
+  List,
+  ListItem,
+  ListItemText,
+  Typography,
+} from "@mui/material";
+import CustomSearch from "./search";
+import { DeleteIcon } from "../../../assets/svg";
+import SavedFilterEditComponent from "./saved-edit-filter";
+
+const SavedFilter = ({
+  columnsData,
+  dropdownData,
+  tableStates,
+  selectedFilters,
+  setSelectedFilters,
+  editMode,
+  setEditMode,
+  setDeleteFilterModalOpen,
+  setSavedFilterModalOpen,
+  tabValue,
+}: FilterFormComponentProps) => {
+  const { setFilterMaster, setFilterToDelete } = tableStates;
+  const [searchTerm, setSearchTerm] = useState<string>("");
+
+  // reset savedFilterEditValue when component unmounts
+  useEffect(() => {
+    return () => {
+      setFilterMaster(
+        (prev) =>
+          ({
+            ...prev,
+            saved_filters: {
+              ...prev?.attributes,
+              selectedId: "",
+              selectedName: "",
+            },
+          } as FilterMasterStateProps)
+      );
+
+      setSelectedFilters([]);
+      setEditMode && setEditMode(false);
+    };
+  }, []);
+
+  const handleListItemClick = (filter: FilterOperationListProps) => {
+    setFilterMaster(
+      (prev) =>
+        ({
+          ...prev,
+          saved_filters: {
+            ...prev?.attributes,
+            selectedId: filter.value,
+            selectedName: filter.label,
+          },
+          activeFilterTabIndex: tabValue,
+        } as FilterMasterStateProps)
+    );
+
+    setEditMode && setEditMode(true);
+    setFilterToDelete(filter);
+  };
+
+  const renderList = () => (
+    <>
+      <CustomSearch value={searchTerm} onChange={setSearchTerm} />
+
+      {columnsData.saved_filter.length === 0 ? (
+        <Typography sx={{ mt: 2 }}>No saved filters yet.</Typography>
+      ) : (
+        <List
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            gap: 1,
+            mt: 2,
+          }}
+        >
+          {columnsData.saved_filter
+            .filter((filter) =>
+              filter.label?.toLowerCase().includes(searchTerm.toLowerCase())
+            )
+            .map((filter) => (
+              <ListItem
+                key={filter.value}
+                sx={{
+                  cursor: "pointer",
+                  border: "1px solid #ccc",
+                  borderRadius: "8px",
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                }}
+                onClick={() => handleListItemClick(filter)}
+              >
+                <ListItemText primary={filter.label} />
+
+                <Box onClick={(e) => e.stopPropagation()}>
+                  <IconButton
+                    size="small"
+                    onClick={() => {
+                      setFilterToDelete(filter); // Store the filter to delete
+
+                      setDeleteFilterModalOpen &&
+                        setDeleteFilterModalOpen(true); // Open the delete confirmation modal
+                    }}
+                  >
+                    <DeleteIcon />
+                  </IconButton>
+                </Box>
+              </ListItem>
+            ))}
+        </List>
+      )}
+    </>
+  );
+
+  return (
+    <Box>
+      {/* Render search input and list */}
+      {!editMode && renderList()}
+
+      {editMode ? (
+        <SavedFilterEditComponent
+          columnsData={columnsData}
+          dropdownData={dropdownData}
+          tableStates={tableStates}
+          selectedFilters={selectedFilters}
+          setSelectedFilters={setSelectedFilters}
+          editMode={editMode}
+          setEditMode={setEditMode}
+          searchTerm={searchTerm}
+          setSearchTerm={setSearchTerm}
+          setSavedFilterModalOpen={setSavedFilterModalOpen}
+          setDeleteFilterModalOpen={setDeleteFilterModalOpen}
+        />
+      ) : null}
+    </Box>
+  );
+};
+
+export default SavedFilter;

package/src/components/filter/components/search/index.tsx

@@ -0,0 +1,56 @@
+import React, { useState } from "react";
+import { TextField, InputAdornment } from "@mui/material";
+import SearchIcon from "@mui/icons-material/Search";
+
+interface SearchInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+}
+
+const CustomSearch = ({
+  value = "",
+  onChange,
+  placeholder = "Search...",
+}: SearchInputProps) => {
+  const [search, setSearch] = useState(value);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = e.target.value;
+    setSearch(val);
+    onChange?.(val);
+  };
+
+  return (
+    <TextField
+      fullWidth
+      size="small"
+      value={search}
+      onChange={handleChange}
+      placeholder={placeholder}
+      InputProps={{
+        startAdornment: (
+          <InputAdornment position="start">
+            <SearchIcon sx={{ color: "#888888", fontSize: "20px" }} />
+          </InputAdornment>
+        ),
+      }}
+      sx={{
+        mt: 2,
+        "& .MuiOutlinedInput-root": {
+          borderRadius: "6px",
+          fontSize: "14px",
+          bgcolor: "#fafafa",
+          "& fieldset": {
+            borderColor: "#c1c1c1",
+          },
+          "&.Mui-focused fieldset": {
+            borderColor: "#7A5AF8",
+          },
+        },
+      }}
+    />
+  );
+};
+
+export default CustomSearch;

package/src/components/filter/components/tabs/custom-tab-panel.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+import Box from "@mui/material/Box";
+
+interface TabPanelProps {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+}
+
+const CustomTabPanel = ({
+  children,
+  value,
+  index,
+  ...other
+}: TabPanelProps) => {
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      aria-labelledby={`simple-tab-${index}`}
+      {...other}
+    >
+      {value === index && <Box sx={{ p: 3 }}>{children}</Box>}
+    </div>
+  );
+};
+
+export default CustomTabPanel;

package/src/components/filter/components/tabs/index.tsx

@@ -0,0 +1,85 @@
+import React, { useState } from "react";
+import { Tabs, Tab, TabsProps, Box } from "@mui/material";
+import { CheckBox, CrossBox } from "../../../../assets/svg";
+
+export interface TabItem {
+  label: string;
+}
+
+interface StyledTabsProps extends TabsProps {
+  tabItems: TabItem[];
+  activeFilterIndex: number;
+}
+
+const CustomTabs = ({
+  value,
+  onChange,
+  tabItems,
+  activeFilterIndex = -1,
+  ...tabsProps
+}: StyledTabsProps) => {
+  const [hoveredTab, setHoveredTab] = useState<number | null>(null);
+
+  const handleCrossClick = (idx: number) => (e: React.MouseEvent) => {
+    e.stopPropagation();
+  };
+
+  return (
+    <Tabs
+      value={value}
+      onChange={onChange}
+      variant="fullWidth"
+      sx={{
+        px: "12px",
+        borderBottom: `1px solid #ccc`,
+        "& .MuiTabs-indicator": {
+          backgroundColor: "black",
+        },
+      }}
+      {...tabsProps}
+    >
+      {tabItems.map((tab, idx) => {
+        const isActive = activeFilterIndex === idx;
+        const isHovered = hoveredTab === idx;
+
+        return (
+          <Tab
+            key={idx}
+            label={
+              <Box sx={{ display: "flex", alignItems: "center", gap: 0.5 }}>
+                <span>{tab.label}</span>
+                {isActive && (
+                  <Box
+                    onMouseEnter={() => setHoveredTab(idx)}
+                    onMouseLeave={() => setHoveredTab(null)}
+                    sx={{
+                      display: "flex",
+                      alignItems: "center",
+                      cursor: isHovered ? "pointer" : "default",
+                    }}
+                    onClick={isHovered ? handleCrossClick(idx) : undefined}
+                  >
+                    {isHovered ? <CrossBox /> : <CheckBox />}
+                  </Box>
+                )}
+              </Box>
+            }
+            sx={{
+              fontSize: "14px",
+              textTransform: "capitalize",
+              color: "#888888",
+              fontWeight: "normal",
+              whiteSpace: "nowrap",
+              "&.Mui-selected": {
+                color: "black",
+                fontWeight: "bold",
+              },
+            }}
+          />
+        );
+      })}
+    </Tabs>
+  );
+};
+
+export default CustomTabs;

package/src/components/filter/index.tsx

@@ -0,0 +1,261 @@
+import React, { useEffect, useState } from "react";
+import { Box, Drawer, IconButton, Typography } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import { FilterDrawerProps, UpdatedFilterStateProps } from "../../types/filter";
+
+import ConfirmModal, { InputField } from "../common/confirm-modal";
+import CustomTabPanel from "./components/tabs/custom-tab-panel";
+import CustomTabs, { TabItem } from "./components/tabs/index";
+import MainFilter from "./components/main-filter";
+import SavedFilter from "./components/saved-filter";
+import AttributesFilter from "./components/attributes-filter";
+
+const FilterDrawer = ({
+  open,
+  onClose,
+  columnsData,
+  tableStates,
+  onDeleteFilter,
+  onSaveFilter,
+  onUpdateFilter,
+  dropdownData,
+}: FilterDrawerProps) => {
+  const [tabValue, setTabValue] = useState(0);
+  const [editMode, setEditMode] = useState(false);
+  const [selectedFilters, setSelectedFilters] = useState<
+    UpdatedFilterStateProps[]
+  >([]);
+
+  // remove this
+  const [saveFilterModalOpen, setSaveFilterModalOpen] = useState(false);
+  const [deleteFilterModalOpen, setDeleteFilterModalOpen] = useState(false);
+
+  const [searchTerm, setSearchTerm] = useState<string>("");
+
+  const { filters, filterToDelete, filterMaster } = tableStates;
+
+  const filterNameInput: InputField = {
+    label: "Filter Name",
+    placeholder: 'e.g., "Website Leads - This Week"',
+    required: true,
+    type: "text",
+  };
+
+  useEffect(() => {
+    if (!columnsData || !columnsData.column_list) {
+      setSelectedFilters([]);
+      return;
+    }
+
+    const updated = filters?.map((filter) => {
+      const matchingColumn = columnsData.column_list.find(
+        (column) => column.attribute_key === filter.filter_attribute
+      );
+      const matchingDropdownList =
+        columnsData.operation_list[matchingColumn?.data_type || "text"];
+
+      return {
+        ...filter,
+        id: matchingColumn?.id ?? "",
+        name: matchingColumn?.name,
+        data_type: matchingColumn?.data_type,
+        dropdown_list: matchingDropdownList,
+      };
+    });
+
+    setSelectedFilters(updated || []);
+  }, [filters, columnsData, tabValue]);
+
+  const handleTabChange = (event: React.SyntheticEvent, newValue: number) => {
+    setTabValue(newValue);
+    if (newValue !== 1) {
+      setEditMode(false);
+      setSelectedFilters([]);
+    }
+  };
+
+  //FOR TABS
+  const tabItems: TabItem[] = [
+    { label: "Filter" },
+    { label: "Saved Filter" },
+    { label: "Attributes" },
+  ];
+
+  return (
+    <Drawer
+      anchor="right"
+      open={open}
+      onClose={onClose}
+      ModalProps={{
+        keepMounted: true,
+      }}
+      sx={{
+        "& .MuiPaper-root": {
+          overflowY: "auto",
+        },
+      }}
+    >
+      <Box sx={{ width: "400px" }}>
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            bgcolor: "#EEEEEE",
+            height: "50px",
+            px: 2,
+            borderBottom: "1px solid #ccc",
+            mx: "auto",
+          }}
+        >
+          <Typography variant="h6" fontWeight="bold" fontSize="18px">
+            Filter
+          </Typography>
+          <IconButton
+            onClick={(e) => {
+              e.stopPropagation();
+              onClose && onClose();
+            }}
+            aria-label="close"
+          >
+            <CloseIcon fontSize="small" />
+          </IconButton>
+        </Box>
+
+        <CustomTabs
+          value={tabValue}
+          onChange={handleTabChange}
+          tabItems={tabItems}
+          activeFilterIndex={filterMaster?.activeFilterTabIndex ?? 0}
+        />
+
+        <Box>
+          <CustomTabPanel value={tabValue} index={0}>
+            {tabValue === 0 && (
+              <MainFilter
+                columnsData={columnsData}
+                tableStates={tableStates}
+                selectedFilters={selectedFilters}
+                setSelectedFilters={setSelectedFilters}
+                setSavedFilterModalOpen={setSaveFilterModalOpen}
+                dropdownData={dropdownData}
+              />
+            )}
+          </CustomTabPanel>
+
+          <CustomTabPanel value={tabValue} index={1}>
+            {tabValue === 1 && (
+              <SavedFilter
+                columnsData={columnsData}
+                tableStates={tableStates}
+                selectedFilters={selectedFilters}
+                setSelectedFilters={setSelectedFilters}
+                editMode={editMode}
+                setEditMode={setEditMode}
+                setDeleteFilterModalOpen={setDeleteFilterModalOpen}
+                setSavedFilterModalOpen={setSaveFilterModalOpen}
+                dropdownData={dropdownData}
+                tabValue={tabValue}
+              />
+            )}
+          </CustomTabPanel>
+
+          <CustomTabPanel value={tabValue} index={2}>
+            {tabValue === 2 && (
+              <AttributesFilter
+                columnsData={columnsData}
+                tableStates={tableStates}
+                dropdownData={dropdownData}
+                searchTerm={searchTerm}
+                setSearchTerm={setSearchTerm}
+                tabValue={tabValue}
+              />
+            )}
+          </CustomTabPanel>
+        </Box>
+
+        <ConfirmModal
+          open={saveFilterModalOpen}
+          onClose={() => setSaveFilterModalOpen(false)}
+          title={editMode ? "Replace Existing Filter ?" : "Save Filter"}
+          description={
+            editMode
+              ? "You already have a filter applied. Applying a new filter will replace the current one. Do you want to continue?"
+              : "Give a name to this filter so you can easily reuse it later."
+          }
+          buttons={[
+            {
+              label: "Cancel",
+              onClick: () => {
+                setSaveFilterModalOpen(false);
+              },
+              variant: "outlined",
+              color: "primary",
+              sx: {
+                color: "#7A5AF8",
+                border: `1px solid #7A5AF8`,
+              },
+            },
+            {
+              label: editMode ? "Replace Filter" : "Save",
+              onClick: (inputValue) => {
+                if (editMode) {
+                  onUpdateFilter && onUpdateFilter(inputValue || "");
+                  setSaveFilterModalOpen(false);
+                  setEditMode(false);
+                  return;
+                }
+
+                onSaveFilter && onSaveFilter(inputValue || "");
+                setSaveFilterModalOpen(false);
+
+                setTabValue(1);
+              },
+              variant: "contained",
+              color: "primary",
+              sx: {
+                color: "white",
+                backgroundColor: editMode ? "#7A5AF8" : "#7A5AF8",
+              },
+            },
+          ]}
+          input={editMode ? undefined : filterNameInput}
+        />
+
+        <ConfirmModal
+          open={deleteFilterModalOpen}
+          onClose={() => setDeleteFilterModalOpen(false)}
+          title="Delete Saved Filter?"
+          description={`You're about to delete the saved filter: "${
+            filterToDelete?.label || "[Filter Name]"
+          }". This action cannot be undone. Are you sure you want to continue?`}
+          buttons={[
+            {
+              label: "Cancel",
+              onClick: () => {
+                setDeleteFilterModalOpen(false);
+              },
+              variant: "outlined",
+              color: "primary",
+              sx: { color: "#7A5AF8", border: `1px solid #7A5AF8` },
+            },
+            {
+              label: "Delete",
+              onClick: () => {
+                onDeleteFilter && onDeleteFilter();
+
+                setDeleteFilterModalOpen(false);
+                setEditMode && setEditMode(false);
+              },
+              variant: "contained",
+              sx: { color: "white", backgroundColor: "#f63d68" },
+            },
+          ]}
+          maxWidth="xs"
+        />
+      </Box>
+    </Drawer>
+  );
+};
+
+export default FilterDrawer;

package/src/components/index-table.tsx

@@ -32,8 +32,6 @@ function TableWrapper<T>({
   loadingOptions = { isLoading: false },
   customRenderFn = {},
   // styleOptions,
-  // searchValue, // 👈 ADD
-  // onSearchChange, // 👈 ADD
   shouldHideColumn,
 }: CraftTableProps<T>) {
   if (!Array.isArray(data)) {
@@ -118,13 +116,11 @@ function TableWrapper<T>({
   const craftTopbarOptions: TopbarOptionsProps = {
     showColumnToggle: true,
     showCompactTableToggle: true,
-    showFullscreenToggle: true,
     showChangeLayoutToggle: true,
     viewMoreToggle: true,
-    showAddNewButton: true,
     showSearch: true,
-    showFilter: true,
-    showCustomizationToggle: true,
+    showSortingToggle: true,
+    showFilterToggle: true,
     tableStates,
 
     // Add other conditions above topbarOptions
@@ -262,6 +258,7 @@ function TableWrapper<T>({
               topbarOptions={craftTopbarOptions}
               isCompactTable={isCompactTable}
               setIsCompactTable={setIsCompactTable}
+              isFullscreen={isFullscreen}
               fullscreenToggle={handleFullscreenToggle}
               paginationComponent={
                 craftPaginationOptions?.showPagination === true &&

package/src/components/index.scss

@@ -31,6 +31,10 @@
     overflow-x: auto;
     max-height: calc(100vh - 110px);
 
+    &.is-fullscreen {
+      max-height: calc(100vh - 56px);
+    }
+
     .ts__table.ts--striped > .ts__body > .ts__body__tr:nth-of-type(odd) {
       background-color: var(--grey-200);
     }

package/src/components/login/index.tsx

@@ -0,0 +1,49 @@
+import { useState } from "react";
+import axios from "axios";
+import Button from "@mui/material/Button";
+
+const LoginButton = () => {
+  const [loading, setLoading] = useState(false);
+
+  const handleLogin = async () => {
+    setLoading(true);
+    try {
+      const response = await axios.post(
+        "http://13.200.182.92:9091/api/auth/login",
+        {
+          email_id: "admin@rezolut.in",
+          password: "Admin@123",
+        }
+      );
+
+      const token = response.data.accessToken;
+
+      if (token) {
+        localStorage.setItem("authToken", token);
+        alert("Login successful");
+        window.location.reload(); // reload app to re-trigger axios with token
+      } else {
+        alert("Token not found in response.");
+      }
+    } catch (error) {
+      console.error("Login failed:", error);
+      alert("Login failed. Check console for details.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Button
+      onClick={handleLogin}
+      disabled={loading}
+      variant="outlined"
+      size="small"
+      color="primary"
+    >
+      {loading ? "Logging in..." : "Login"}
+    </Button>
+  );
+};
+
+export default LoginButton;

package/src/components/table-body.tsx

@@ -97,12 +97,14 @@ function TableBody<T>({
       return (
         <React.Fragment key={row.id}>
           {renderedRow}
-          <tr>
-            {/* <td colSpan={table.getAllLeafColumns().length}>//commented out to remove extra line on opening of nested row
+          {NestedComponent && (
+            <tr>
+              {/* <td colSpan={table.getAllLeafColumns().length}>//commented out to remove extra line on opening of 
               {NestedComponent && <NestedComponent {...{ row }} />}
             </td> */}
-            {NestedComponent && <NestedComponent {...{ row }} />}
-          </tr>
+              {<NestedComponent {...{ row }} />}
+            </tr>
+          )}
         </React.Fragment>
       );
     } else {