rez-table-listing-mui 1.2.13 → 1.2.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rez-table-listing-mui",
-  "version": "1.2.13",
+  "version": "1.2.14",
   "type": "module",
   "description": "A rez table listing component built on TanStack Table",
   "main": "dist/index.js",

package/src/App.tsx

@@ -1,424 +1,66 @@
-import { useEffect, useMemo, useState } from "react";
-import { useCraftTable } from "./libs/hooks/useCraftTable";
-import { TableTabs } from "./components/tabs";
-import { useDefaultColumns } from "./libs/hooks/useDefaultColumns";
-import TableWrapper from "./components/index-table";
-import { entityTableMetaMaster } from "./libs/utils/apiColumn";
-import {
-  useCommonDropdownAPI,
-  useDeleteFilterAPI,
-  useEntityTableAPI,
-  useSavedFilterAPI,
-  useGetSettingsDataAPI,
-  useSettingsDropDownAPI,
-  useUpdateFilterAPI,
-  useSaveSettingsDataAPI,
-} from "./libs/hooks/useEntityTableAPI";
-import {
-  useDetailsQueryAPI,
-  useFetchData,
-} from "./libs/hooks/useEntityTableHooks";
-import LoginButton from "./components/login";
-import { CraftTableFilter } from ".";
-import { useCraftTableFilterSettings } from "./libs/hooks/useCraftTableFilterSettings";
-import { QuickFilterSettings } from "./components/table-settings";
-import { SettingsDataProps } from "./types/filter-settings";
-import { FilterMasterStateProps } from "./types/filter";
-import { ColumnDef } from "@tanstack/react-table";
-import { ENTITY_TYPE } from "./libs/utils/common";
-import { makeData, Person } from "./libs/utils/make-hierar-data";
+import { useState } from "react";
+import LoginButton from "./listing/components/login";
+import ListingView from "./view/ListingView";
+import KanbanView from "./view/KanbanView";
 
 function App() {
-  // const [mockLoading, setMockLoading] = useState<boolean>(true);
-  // const [jsonData] = useState<any[]>([]);
-  const [columns, setColumns] = useState<any[]>([]);
-  const [searchTerm, setSearchTerm] = useState("");
-  const [data, setData] = useState<Person[]>(() => makeData(200, 3, 2));
-
-  const [selectedTab, setSelectedTab] = useState("All");
-
-  const tableStates = useCraftTable();
-  const filterSettingStates = useCraftTableFilterSettings();
-
-  const { filters, setFilters, filterMaster, setFilterMaster, filterToDelete } =
-    tableStates;
-
-  const { showListViewSettings, setShowListViewSettings, setSettingsData } =
-    filterSettingStates;
-
-  const { defaultColumns } = useDefaultColumns();
-
-  const { metaQuery } = useFetchData(ENTITY_TYPE);
-  const { detailsQuery } = useDetailsQueryAPI(
-    filterMaster?.saved_filters?.selectedId
-      ? filterMaster?.saved_filters?.selectedId
-      : metaQuery?.data?.default_filter?.value
-  );
-
-  const { savedMutation } = useSavedFilterAPI(); //API CALL FOR SAVED FILTER
-  const { deleteMutation } = useDeleteFilterAPI(); //API FOR DELETING FILTER
-  const { updateMutation } = useUpdateFilterAPI(); //API FOR UPDATE FILTER
-  const { saveSettingsDataMutation } = useSaveSettingsDataAPI(ENTITY_TYPE);
-  const { dropdownData } = useCommonDropdownAPI(metaQuery.data);
-  const { settingsTabDropdownData, settingsTabDropdownPending } =
-    useSettingsDropDownAPI({
-      entity_type: ENTITY_TYPE,
-      column: filterSettingStates?.quickTabStates?.attribute,
-      sort_by: filterSettingStates?.quickTabStates?.sorting,
-    });
-
-  const { getSettingsAPIData } = useGetSettingsDataAPI(ENTITY_TYPE);
-
-  useEffect(() => {
-    // setTimeout(() => {
-    //   setMockLoading(false);
-    // }, 1000);
-
-    const fetchMeta = async () => {
-      try {
-        const { res: allColumns } = await entityTableMetaMaster(ENTITY_TYPE);
-
-        const savedColumnSettings = filterSettingStates.settingsData?.column;
-
-        const getOrderedColumns = (
-          showList: { value: string }[],
-          filteredColumns: any[]
-        ) => {
-          // Build ordered columns using showList and filteredColumns
-          return showList
-            ?.map((showItem) => {
-              return filteredColumns.find(
-                (col) => col?.accessorKey === showItem?.value
-              );
-            })
-            ?.filter((col): col is ColumnDef<any> => col !== undefined); // Ensure non-undefined columns are returned
-        };
-
-        if (
-          savedColumnSettings &&
-          !savedColumnSettings.isDefault &&
-          savedColumnSettings.tabs
-        ) {
-          // Tab-wise view: find the active tab and use its show_list
-          const activeTabSettings = savedColumnSettings.tabs.find(
-            (tab) => tab.tab_name.toLowerCase() === selectedTab.toLowerCase()
-          );
-
-          if (activeTabSettings?.show_list) {
-            const visibleColumns = new Set(
-              activeTabSettings.show_list.map((c) => c.value)
-            );
-
-            // First, filter columns based on visibleColumns
-            const filteredColumns = allColumns.filter((col: any) =>
-              visibleColumns.has(col?.accessorKey)
-            );
-            setColumns(
-              getOrderedColumns(activeTabSettings.show_list, filteredColumns)
-            );
-          } else {
-            // Fallback if no specific settings for the active tab are found
-            setColumns(allColumns);
-          }
-        } else if (savedColumnSettings && savedColumnSettings.show_list) {
-          // Default view: use the main show_list
-          const visibleColumns = new Set(
-            savedColumnSettings.show_list.map((c) => c.value)
-          );
-          const filtered = allColumns.filter((col: any) =>
-            visibleColumns.has(col?.accessorKey)
-          );
-
-          setColumns(
-            getOrderedColumns(savedColumnSettings.show_list, filtered)
-          );
-        } else {
-          // No settings found, use all columns
-          setColumns(allColumns);
-        }
-      } catch (error) {
-        console.error("Failed to fetch metadata:", error);
-      }
-    };
-
-    fetchMeta();
-  }, [selectedTab]);
-
-  useEffect(() => {
-    setFilters(detailsQuery.data ?? []);
-  }, [detailsQuery.data]);
-
-  useEffect(() => {
-    setSettingsData(getSettingsAPIData?.layout_json);
-  }, [getSettingsAPIData]);
-
-  //For server side sorting
-  const enableServerSideSorting = true;
-
-  const { tableData } = useEntityTableAPI({
-    page: 0,
-    size: 50,
-    entity_type: ENTITY_TYPE,
-    tabs: {
-      columnName:
-        getSettingsAPIData?.layout_json?.quick_tab?.attribute || "status",
-      sortBy: getSettingsAPIData?.layout_json?.quick_tab?.sorting || "ASC",
-      value:
-        selectedTab.toLowerCase() === "all" ? "" : selectedTab.toLowerCase(),
-    },
-    quickFilter: tableStates.filters,
-    sortby: [
-      {
-        sortColum: "name",
-        sortType: "ASC",
-      },
-    ],
-    attributeFilter: [],
-  });
-
-  const newData = useMemo(
-    () => tableData?.entity_list || [],
-    [tableData?.entity_list]
+  const [currentView, setCurrentView] = useState<"listing" | "kanban">(
+    "listing"
   );
-  const tabsData = tableData?.entity_tabs;
 
-  // Auto-switch tab if the selected tab is removed
-  useEffect(() => {
-    if (
-      tabsData &&
-      tabsData.length > 0 &&
-      !tabsData.some(
-        (tab) => tab.tab_value?.toLowerCase() === selectedTab.toLowerCase()
-      )
-    ) {
-      // Try to select 'ALL' if it exists
-      const allTab = tabsData.find(
-        (tab) => tab.tab_value?.toLowerCase() === "all"
-      );
-      if (allTab) {
-        setSelectedTab(allTab.tab_value || "All");
-      } else {
-        setSelectedTab(tabsData[0].tab_value || "All");
-      }
+  const renderView = () => {
+    switch (currentView) {
+      case "listing":
+        return <ListingView />;
+      case "kanban":
+        return <KanbanView />;
+      default:
+        return <ListingView />;
     }
-  }, [tabsData, selectedTab]);
-
-  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();
-    return (
-      <div
-        style={{
-          backgroundColor: "#F0F0F0",
-          color: "#757575",
-          textTransform: "capitalize",
-          fontSize: "0.75rem",
-          fontWeight: 500,
-          borderRadius: "4px",
-          padding: "4px",
-          width: "fit-content",
-        }}
-      >
-        {statusValue}
-      </div>
-    );
   };
 
-  const handleRenderAction = ({ row }: any) => {
-    return <button onClick={() => alert(JSON.stringify(row))}>Edit</button>;
+  const containedBtn = {
+    padding: "6px 14px",
+    marginRight: "8px",
+    borderRadius: "4px",
+    border: "none",
+    backgroundColor: "#1976d2",
+    color: "#fff",
+    cursor: "pointer",
   };
 
-  const filteredData = useMemo(() => {
-    if (!searchTerm) return newData;
-
-    return newData.filter((row: any) =>
-      Object.values(row)
-        .join(" ")
-        .toLowerCase()
-        .includes(searchTerm.toLowerCase())
-    );
-  }, [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,
-    }));
-
-    const payload = {
-      name,
-      is_default: false,
-      mapped_entity_type: ENTITY_TYPE, // For that entity type
-      status: "ACTIVE",
-      entity_type: "SFM", // FIXED entity type
-      filterDetails: quickFilter,
-    };
-    const entity_type = "SFM";
-    savedMutation.mutate(
-      { entity_type, payload },
-      {
-        onSuccess: (response) => {
-          const newFilterId = response?.id;
-          if (newFilterId) {
-            setFilterMaster(
-              (prev) =>
-                ({
-                  ...prev,
-                  saved_filters: {
-                    ...prev?.saved_filters,
-                    selectedId: newFilterId.toString(),
-                    selectedName: name,
-                  },
-                  activeFilterTabIndex: 1,
-                } as FilterMasterStateProps)
-            );
-          }
-        },
-      }
-    );
-  };
-
-  // API to handle removing or deleting a filter
-  const handleRemoveFilter = () => {
-    const payload = {
-      name: filterToDelete?.label,
-      id: filterToDelete?.value,
-      is_default: false,
-      mapped_entity_type: ENTITY_TYPE,
-      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,
-    }));
-
-    const payload = {
-      name: filterMaster?.saved_filters?.selectedName, // Name of the filter
-      is_default: false,
-      id: filterMaster?.saved_filters?.selectedId,
-      mapped_entity_type: ENTITY_TYPE,
-      status: "ACTIVE",
-      entity_type: "SFM",
-      filterDetails: quickFilter,
-    };
-    const entity_type = "SFM";
-    updateMutation.mutate({ entity_type, payload });
-  };
-
-  const handleSaveSettingsData = (settingsData: SettingsDataProps) => {
-    const payload = {
-      entity_type: "LAP",
-      mapped_entity_type: ENTITY_TYPE,
-      layout_json: settingsData,
-    };
-
-    saveSettingsDataMutation.mutate({ payload });
+  const outlinedBtn = {
+    padding: "6px 14px",
+    marginRight: "8px",
+    borderRadius: "4px",
+    border: "1px solid #1976d2",
+    backgroundColor: "transparent",
+    color: "#1976d2",
+    cursor: "pointer",
   };
 
   return (
     <div className="app_wrapper">
       <LoginButton />
 
-      <TableWrapper
-        // data={filteredData}
-        data={data}
-        columns={defaultColumns}
-        // columns={columns && columns.length > 0 ? columns : defaultColumns}
-        tableStates={tableStates}
-        featureOptions={{
-          striped: true,
-          compactTable: false,
-          enableSorting: !enableServerSideSorting,
-          enableColumnReordering: true,
-          enableColumnResizing: true,
-          enableRowSelection: false,
-          enableServerSideSorting: enableServerSideSorting,
-        }}
-        // loadingOptions={{
-        //   isLoading: isTableDataPending || detailsQuery.isPending,
-        //   // loaderText: "Loading, Please wait...",
-        // }}
-        paginationOptions={{
-          showPagination: true,
-          paginationPosition: "top",
-          paginationView: "compact",
-          totalRows: totalCount,
-        }}
-        customRenderFn={{
-          renderStatus: handleRenderStatus,
-          renderAction: handleRenderAction,
-        }}
-        // emptyListComponent={<div>No data found</div>}
-        filterOptions={{
-          show: tableStates?.showTableFilter,
-          component: (
-            <CraftTableFilter
-              tableStates={tableStates}
-              onClose={() => tableStates.setShowTableFilter(false)}
-              onUpdateFilter={handleUpdateFilter}
-              columnsData={metaQuery.data || {}}
-              dropdownData={dropdownData || []}
-              onDeleteFilter={handleRemoveFilter}
-              onSaveFilter={handleSaveFilter}
-            />
-          ),
-        }}
-        topbarOptions={{
-          tableStates,
-          leftSideComponent: (
-            <>
-              <TableTabs
-                columns={columns}
-                settingsOptions={{
-                  showIcon: true,
-                  onClick: () => setShowListViewSettings(!showListViewSettings),
-                }}
-                activeTab={selectedTab}
-                tableStates={tableStates}
-                tabsData={tabsData}
-                onClick={(state) => {
-                  setSelectedTab(state);
-                }}
-              />
+      {/* View Switch Buttons */}
+      <div style={{ marginBottom: "1rem", marginTop: "4px" }}>
+        <button
+          style={currentView === "listing" ? containedBtn : outlinedBtn}
+          onClick={() => setCurrentView("listing")}
+        >
+          Listing View
+        </button>
+        <button
+          style={currentView === "kanban" ? containedBtn : outlinedBtn}
+          onClick={() => setCurrentView("kanban")}
+        >
+          Kanban View
+        </button>
+      </div>
 
-              <QuickFilterSettings
-                filterSettingStates={filterSettingStates}
-                onClose={() => setShowListViewSettings(false)}
-                columnsData={metaQuery.data || {}}
-                columnsDataLoading={metaQuery.isPending}
-                tabsApiData={settingsTabDropdownData || []}
-                tabsApiDataLoading={settingsTabDropdownPending}
-                onSaveSettingsData={handleSaveSettingsData}
-              />
-            </>
-          ),
-          searchValue: searchTerm,
-          onSearchChange: (val) => setSearchTerm(val),
-          showFilterToggle: true,
-          onFilterButtonClick: () =>
-            tableStates.setShowTableFilter(!tableStates.showTableFilter),
-        }}
-      />
+      {/* Conditional Content */}
+      {renderView()}
     </div>
   );
 }

package/src/index.ts

@@ -1,10 +1,11 @@
-export { default as TableWrapper } from "./components/index-table";
-export { useCraftTable } from "./libs/hooks/useCraftTable";
-export { useCraftTableFilterSettings } from "./libs/hooks/useCraftTableFilterSettings";
-export { TableTabs as CraftTableTabs } from "./components/tabs";
-export { TableFilter as CraftTableFilter } from "./components/filter";
-export { QuickFilterSettings as CraftTableSettings } from "./components/table-settings";
-export { TableSearch as CraftTableSearch } from "./components/search";
+export { default as TableWrapper } from "./listing/components/index-table";
+export { useCraftTable } from "./listing/libs/hooks/useCraftTable";
+export { useCraftTableFilterSettings } from "./listing/libs/hooks/useCraftTableFilterSettings";
+export { TableTabs as CraftTableTabs } from "./listing/components/tabs";
+export { TableFilter as CraftTableFilter } from "./listing/components/filter";
+export { QuickFilterSettings as CraftTableSettings } from "./listing/components/table-settings";
+export { TableSearch as CraftTableSearch } from "./listing/components/search";
+export { default as KanbanWrapper } from "./kanban";
 
-export * from "./types/table";
-export * from "./types/table-options";
+export * from "./listing/types/table";
+export * from "./listing/types/table-options";

package/src/kanban/components/LeadCard.tsx

@@ -0,0 +1,130 @@
+import {
+  Avatar,
+  Box,
+  Card,
+  CardContent,
+  Typography,
+  Tooltip,
+  IconButton,
+} from "@mui/material";
+import { LeadCardProps } from "../types/types";
+import { CalendarIcon } from "@mui/x-date-pickers";
+import PhoneOutlinedIcon from "@mui/icons-material/PhoneOutlined";
+import EmailOutlinedIcon from "@mui/icons-material/EmailOutlined";
+import { kanbanStyles } from "../styles/styles";
+
+const LeadCard = ({ lead }: LeadCardProps) => {
+  const formatEnquiryDate = (enquiryDate: string | null) => {
+    if (!enquiryDate) return "N/A";
+    const date = new Date(enquiryDate);
+    return date.toLocaleDateString("en-GB", {
+      day: "numeric",
+      month: "short",
+    });
+  };
+
+  const displayName =
+    `${lead.student_first_name || ""} ${lead.student_last_name || ""}`.trim() ||
+    "Unknown";
+
+  // Handle email click to open mailto
+  const handleEmailClick = () => {
+    if (lead.primary_email) {
+      window.open(
+        `https://mail.google.com/mail/?view=cm&to=${lead.primary_email}`,
+        "_blank"
+      );
+    }
+  };
+
+  return (
+    <Card sx={kanbanStyles.cardContainer}>
+      <CardContent sx={kanbanStyles.cardContent}>
+        {/* Code */}
+        <Typography
+          // onClick={() => dispatch(openNavigationTab(lead))}
+          sx={kanbanStyles.codeStyle}
+        >
+          {lead.code}
+        </Typography>
+
+        {/* Name + icons */}
+        <Box sx={kanbanStyles.nameIconContainer}>
+          <Typography variant="body1" sx={kanbanStyles.leadName}>
+            {displayName}
+          </Typography>
+
+          <Box sx={{ display: "flex", gap: 1 }}>
+            {/* Phone Icon with Tooltip */}
+            <Tooltip
+              title={lead.primary_mobile || "No phone number available"}
+              arrow
+            >
+              <IconButton
+                className="icon-button"
+                size="small"
+                disabled={!lead.primary_mobile}
+                sx={{
+                  p: 0.5,
+                  "&:hover": {
+                    backgroundColor: "rgba(0, 0, 0, 0.04)",
+                  },
+                }}
+              >
+                <PhoneOutlinedIcon sx={kanbanStyles.iconStyle} />
+              </IconButton>
+            </Tooltip>
+
+            {/* Email Icon with Tooltip and Click Handler */}
+            <Tooltip title={lead.primary_email || "No email available"} arrow>
+              <IconButton
+                size="small"
+                onClick={handleEmailClick}
+                disabled={!lead.primary_email}
+                sx={{
+                  p: 0.5,
+                  cursor: lead.primary_email ? "pointer" : "default",
+                  "&:hover": {
+                    backgroundColor: "rgba(0, 0, 0, 0.04)",
+                  },
+                }}
+              >
+                <EmailOutlinedIcon sx={kanbanStyles.iconStyle} />
+              </IconButton>
+            </Tooltip>
+          </Box>
+        </Box>
+
+        {/* Avatar + owner + date */}
+        <Box
+          sx={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            // mt: 1,
+          }}
+        >
+          <Box sx={{ display: "flex", alignItems: "center" }}>
+            <Avatar
+              src={lead?.profile?.signedUrl}
+              sx={kanbanStyles.cardAvatar}
+            ></Avatar>
+            <Typography sx={kanbanStyles.leadOwnerStyle}>
+              {lead.lead_owner_name || "N/A"}
+            </Typography>
+          </Box>
+          <Box
+            sx={{ display: "flex", alignItems: "center", whiteSpace: "nowrap" }}
+          >
+            <CalendarIcon sx={kanbanStyles.calendarIcon} />
+            <Typography variant="body2" sx={kanbanStyles.dateStyle}>
+              {formatEnquiryDate(lead.enquiry_date)}
+            </Typography>
+          </Box>
+        </Box>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default LeadCard;