rez-table-listing-mui 1.2.12 → 1.2.14

package/src/kanban/index.tsx

@@ -0,0 +1,331 @@
+import React, { useEffect, useState } from "react";
+import {
+  Box,
+  Typography,
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
+  IconButton,
+  Badge,
+} from "@mui/material";
+import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined";
+import {
+  Add,
+  ExpandMore as ExpandMoreIcon,
+  Settings as SettingsIcon,
+} from "@mui/icons-material";
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import { useGetKanbanData } from "./hooks/hooks";
+import { kanbanStyles } from "./styles/styles";
+import LeadCard from "./components/LeadCard";
+import { Lane, LeadData, SubLane, SwimLane } from "./types/types";
+import { COLOR_CONSTANTS } from "./constants/kanban-constants";
+import Loader from "../listing/components/common/loader/loader";
+
+const Kanban = ({
+  rawData,
+  isLoading,
+  KanbanCardComponent,
+}: {
+  rawData: any;
+  isLoading?: boolean;
+  KanbanCardComponent: React.ComponentType<{
+    key: string | number;
+    lead: LeadData;
+  }>;
+}) => {
+  const [expandedPanels, setExpandedPanels] = useState<{
+    [key: string]: boolean;
+  }>({
+    Active: true,
+  });
+
+  const [subLaneExpanded, setSubLaneExpanded] = useState<{
+    [key: string]: boolean;
+  }>({});
+
+  useEffect(() => {
+    if (rawData?.swim_lanes?.length) {
+      const initial: { [key: string]: boolean } = {};
+      rawData.swim_lanes.forEach((swim_lane: SwimLane) => {
+        swim_lane?.sub_lanes?.forEach((sub_lane) => {
+          const key = `${swim_lane.id}-${sub_lane.lane_id}-${sub_lane.id}`;
+          initial[key] = sub_lane.expanded || false;
+        });
+      });
+      setSubLaneExpanded(initial);
+    }
+  }, [rawData]);
+
+  const handleAccordionChange =
+    (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => {
+      setExpandedPanels((prev) => ({
+        ...prev,
+        [panel]: isExpanded,
+      }));
+    };
+
+  const toggleSubLane = (subLaneId: number | string) => {
+    setSubLaneExpanded((prev) => ({
+      ...prev,
+      [subLaneId]: !prev[subLaneId],
+    }));
+  };
+
+  const getLeadCount = (laneId: number): number => {
+    if (!rawData?.swim_lanes || !rawData?.data) return 0;
+
+    const seenLeadIds = new Set<number | string>();
+    let count = 0;
+
+    rawData.swim_lanes.forEach((swimLane: SwimLane) => {
+      swimLane.sub_lanes
+        ?.filter((subLane) => subLane.lane_id === laneId)
+        ?.forEach((subLane) => {
+          rawData.data.forEach((lead: LeadData) => {
+            if (lead.sub_lane_id === subLane.id && !seenLeadIds.has(lead.id)) {
+              seenLeadIds.add(lead.id);
+              count++;
+            }
+          });
+        });
+    });
+
+    return count;
+  };
+
+  return (
+    <>
+      {isLoading ? (
+        <Loader />
+      ) : (
+        <Box>
+          <Box sx={{ width: "100%", bgcolor: "white", overflowX: "auto" }}>
+            {/* Header */}
+            <Box sx={kanbanStyles.topHeader}>
+              <IconButton sx={kanbanStyles.settingStyle}>
+                <SettingsOutlinedIcon />
+              </IconButton>
+
+              {/* Lane Headers - Replaced Grid with Flex */}
+              <Box
+                sx={{
+                  ...kanbanStyles.syncingStyle,
+                  flex: 1,
+                }}
+              >
+                {rawData?.lanes?.map((lane: Lane, index: number) => (
+                  <Box
+                    className="lane-header"
+                    sx={{
+                      ...kanbanStyles.laneHeader,
+
+                      bgcolor: lane.color || COLOR_CONSTANTS[index % 4].color,
+                    }}
+                    key={lane.id}
+                  >
+                    <Box
+                      sx={{
+                        ...kanbanStyles.badge,
+
+                        bgcolor:
+                          lane.darkColor ||
+                          COLOR_CONSTANTS[index % 4].darkColor,
+                      }}
+                    >
+                      {getLeadCount(Number(lane.id))}
+                    </Box>
+
+                    <Typography variant="h6" fontWeight="bold" sx={{ px: 2 }}>
+                      {lane.name}
+                    </Typography>
+                  </Box>
+                ))}
+              </Box>
+            </Box>
+
+            {/* Content */}
+            <Box
+              className="kanban-content"
+              id="kanban-content"
+              sx={{
+                maxHeight: "calc(100vh - 186px)",
+                // minWidth: "100%",
+
+                width: "fit-content",
+              }}
+            >
+              {/* Swim Lanes */}
+              {rawData?.swim_lanes?.map((swim_lane: SwimLane) => (
+                <Accordion
+                  key={swim_lane.id}
+                  expanded={!!expandedPanels[swim_lane.name]}
+                  onChange={handleAccordionChange(swim_lane.name)}
+                  sx={kanbanStyles.swimLaneAccordionStyle}
+                  // disabled={getSwimLaneCount(swim_lane.id) === 0 ? true : false}
+                >
+                  <AccordionSummary
+                    disabled={swim_lane?.sub_lanes?.length > 0 ? false : true}
+                    expandIcon={
+                      <ArrowDropDownIcon
+                        sx={{
+                          color: "black",
+                        }}
+                      />
+                    }
+                    sx={kanbanStyles.swimlaneWrapperStyle}
+                  >
+                    <Typography
+                      variant="body1"
+                      fontWeight="medium"
+                      sx={{ ml: 1.5 }}
+                    >
+                      {swim_lane.name} ({swim_lane?.count})
+                    </Typography>
+                  </AccordionSummary>
+
+                  <AccordionDetails
+                    sx={{ pl: "16px", pr: "8px", width: "fit-content", py: 0 }}
+                  >
+                    {/* Replaced Grid with Flex */}
+                    <Box sx={{ ...kanbanStyles.syncingStyle, pl: 7 }}>
+                      {rawData?.lanes?.map((lane: Lane, index: number) => (
+                        <Box
+                          className="column"
+                          sx={{
+                            ...kanbanStyles.columnStyle,
+                            bgcolor:
+                              lane.color || COLOR_CONSTANTS[index % 4].color,
+                          }}
+                          key={lane.id}
+                        >
+                          {/* Sub-lanes for this lane */}
+                          {swim_lane?.sub_lanes
+                            ?.filter(
+                              (sub_lane: SubLane) =>
+                                sub_lane.lane_id.toString() === lane.id
+                            )
+                            ?.map((sub_section: SubLane) => {
+                              const subLaneKey = `${swim_lane.id}-${lane.id}-${sub_section.id}`;
+                              return (
+                                <Accordion
+                                  key={sub_section.id}
+                                  expanded={
+                                    rawData?.data?.filter(
+                                      (lead: LeadData) =>
+                                        lead.sub_lane_id === sub_section.id &&
+                                        lead.lead_status == swim_lane.id
+                                    )?.length === 0
+                                      ? false
+                                      : subLaneExpanded[subLaneKey] || false
+                                  }
+                                  onChange={() => toggleSubLane(subLaneKey)}
+                                  sx={{
+                                    ...kanbanStyles.stageStyle,
+                                    borderLeft: `4px solid ${
+                                      lane.darkColor ||
+                                      COLOR_CONSTANTS[index % 4].darkColor
+                                    }`,
+                                  }}
+                                  // disabled={
+                                  //   rawData?.data?.filter(
+                                  //     (lead: LeadData) =>
+                                  //       lead.sub_lane_id === sub_section.id &&
+                                  //       !usedLeadIds.has(lead.id)
+                                  //   )?.length === 0
+                                  //     ? true
+                                  //     : false
+                                  // }
+                                >
+                                  <AccordionSummary
+                                    expandIcon={
+                                      <ExpandMoreIcon
+                                        sx={{
+                                          display:
+                                            rawData?.data?.filter(
+                                              (lead: LeadData) =>
+                                                lead.sub_lane_id ===
+                                                  sub_section.id &&
+                                                lead.lead_status == swim_lane.id
+                                            )?.length === 0
+                                              ? "none"
+                                              : "block",
+                                        }}
+                                      />
+                                    }
+                                    sx={kanbanStyles.subSectionAccordion}
+                                  >
+                                    <Box
+                                      sx={
+                                        kanbanStyles.subSectionHeaderContainer
+                                      }
+                                    >
+                                      <Box
+                                        className="sub-section-count"
+                                        sx={{
+                                          ...kanbanStyles.subSectionCountContainer,
+                                          bgcolor:
+                                            lane.darkColor ||
+                                            COLOR_CONSTANTS[index % 4]
+                                              .darkColor,
+                                        }}
+                                      >
+                                        {rawData?.data?.filter(
+                                          (lead: LeadData) =>
+                                            lead.sub_lane_id ===
+                                              sub_section.id &&
+                                            lead.lead_status === swim_lane.id
+                                        )?.length || 0}
+                                      </Box>
+                                      <Typography
+                                        fontWeight="700"
+                                        color="#555354"
+                                        fontSize="12px"
+                                      >
+                                        {sub_section.name}
+                                      </Typography>
+                                    </Box>
+                                  </AccordionSummary>
+
+                                  <AccordionDetails
+                                    sx={kanbanStyles.cardsContainer}
+                                  >
+                                    {(() => {
+                                      const leadsForThisSubLane =
+                                        rawData?.data?.filter(
+                                          (lead: LeadData) =>
+                                            lead.sub_lane_id ===
+                                              sub_section.id &&
+                                            lead.lead_status == swim_lane.id
+                                        ) || [];
+
+                                      return leadsForThisSubLane.map(
+                                        (lead_card: LeadData) =>
+                                          (KanbanCardComponent && (
+                                            <KanbanCardComponent
+                                              key={lead_card.id}
+                                              lead={lead_card}
+                                            />
+                                          )) ||
+                                          null
+                                      );
+                                    })()}
+                                  </AccordionDetails>
+                                </Accordion>
+                              );
+                            })}
+                        </Box>
+                      ))}
+                    </Box>
+                  </AccordionDetails>
+                </Accordion>
+              ))}
+            </Box>
+          </Box>
+        </Box>
+      )}
+    </>
+  );
+};
+
+export default Kanban;

package/src/kanban/services/service.ts

@@ -0,0 +1,11 @@
+import { api } from "../../listing/libs/utils/common";
+
+export const getKanbanData = async (entity_type: string) => {
+  try {
+    const response = await api.get(`/lead/getleads?entity_type=${entity_type}`);
+    return response.data;
+  } catch (error) {
+    console.error("Failed to fetch action category:", error);
+    throw error;
+  }
+};

package/src/kanban/styles/styles.tsx

@@ -0,0 +1,256 @@
+import { Theme } from "@emotion/react";
+import { SxProps } from "@mui/material";
+
+interface KanbanStyles {
+  syncingStyle: SxProps<Theme>;
+  topHeader: SxProps<Theme>;
+  laneHeader: SxProps<Theme>;
+  badge: SxProps<Theme>;
+  swimlaneWrapperStyle: SxProps<Theme>;
+  columnStyle: SxProps<Theme>;
+  stageStyle: SxProps<Theme>;
+  stageBadge: SxProps<Theme>;
+  cardContainer: SxProps<Theme>;
+  cardContent: SxProps<Theme>;
+  cardHeaderStyle: SxProps<Theme>;
+  cardAvatar: SxProps<Theme>;
+  statusStyle: SxProps<Theme>;
+  codeStyle: SxProps<Theme>;
+  nameIconContainer: SxProps<Theme>;
+  leadName: SxProps<Theme>;
+  iconStyle: SxProps<Theme>;
+  leadOwnerStyle: SxProps<Theme>;
+  calendarIcon: SxProps<Theme>;
+  dateStyle: SxProps<Theme>;
+  subSectionAccordion: SxProps<Theme>;
+  subSectionCountContainer: SxProps<Theme>;
+  cardsContainer: SxProps<Theme>;
+  settingStyle: SxProps<Theme>;
+  swimLaneAccordionStyle: SxProps<Theme>;
+  subSectionHeaderContainer: SxProps<Theme>;
+}
+
+export const kanbanStyles: KanbanStyles = {
+  syncingStyle: {
+    display: "flex",
+    flexDirection: "row",
+    gap: "8px",
+    width: "100%",
+  },
+  topHeader: {
+    display: "flex",
+    alignItems: "center",
+    gap: 1,
+    px: 1,
+    pt: 2,
+    bgcolor: "white",
+    width: "fit-content",
+    position: "sticky", // Add sticky positioning
+    top: 0, // Stick to the top of the viewport
+    right: 0,
+    zIndex: 1100, // Ensure it stays above other content
+  },
+  laneHeader: {
+    flex: 1, // Equal width distribution
+    minWidth: "263px",
+    maxWidth: "263px",
+    display: "flex",
+    fontWeight: 700,
+    fontSize: "16px",
+    borderRadius: "6px",
+    alignItems: "center",
+    justifyContent: "center",
+    py: "8px",
+    px: "12px",
+    position: "relative",
+  },
+  badge: {
+    position: "absolute",
+    top: "-12px",
+    left: "8px",
+    px: 1,
+    color: "white",
+    borderRadius: "8px",
+  },
+  swimlaneWrapperStyle: {
+    flexDirection: "row-reverse",
+    bgcolor: "white",
+    minHeight: 44, // overall height
+    px: 2,
+    py: 0, // remove vertical padding
+    "&.Mui-expanded": {
+      minHeight: 44,
+    },
+    "& .MuiAccordionSummary-content": {
+      margin: "8px 0", // reduced vertical spacing
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "flex-start",
+      gap: 5,
+      "&.Mui-expanded": {
+        margin: "8px 0", // maintain same margin when expanded
+      },
+    },
+    "& .MuiAccordionSummary-expandIconWrapper": {
+      mr: 0, // reduce gap between icon and content
+    },
+  },
+  columnStyle: {
+    flex: 1, // Equal width distribution
+    p: "12px",
+    // px: "2px",
+    minHeight: "500px",
+    // borderRight: "1px solid #e0e0e0",
+
+    borderRadius: "6px",
+    minWidth: "263px",
+    maxWidth: "263px",
+  },
+  stageStyle: {
+    mb: 2,
+    bgcolor: "#f9fafb",
+    borderTopLeftRadius: "8px !important",
+    borderBottomLeftRadius: "8px !important",
+    borderTopRightRadius: "8px !important",
+    // borderRadius: 2,
+    overflow: "hidden",
+    boxShadow: "none",
+    "&:before": { display: "none" }, // remove default divider line
+  },
+  stageBadge: {
+    "& .MuiBadge-badge": {
+      color: "black",
+      fontWeight: "bold",
+      fontSize: "0.75rem",
+    },
+  },
+  cardContainer: {
+    borderRadius: 2,
+    bgcolor: "#fff",
+    position: "relative",
+
+    boxShadow:
+      "0px 1.36px 2.72px rgba(23, 23, 23, 0.06), 0px 2.72px 5.44px rgba(23, 23, 23, 0.1)",
+    border: "none", // explicitly remove border
+  },
+  cardContent: {
+    p: "12px !important",
+    display: "flex",
+    flexDirection: "column",
+    gap: "4px",
+  },
+  cardHeaderStyle: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "flex-start",
+    // mb: 1,
+  },
+  cardAvatar: {
+    width: "18px",
+    height: "18px",
+    fontSize: "12px",
+    fontWeight: 600,
+    bgcolor: "#e5e7eb",
+    color: "#374151",
+    mr: 1,
+  },
+  statusStyle: {
+    height: 20,
+    fontSize: "0.6875rem",
+
+    fontWeight: 500,
+  },
+  codeStyle: {
+    fontSize: "12px",
+    color: "#6b7280",
+    fontWeight: 500,
+    mb: 0.5,
+    cursor: "pointer",
+  },
+  nameIconContainer: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "flex-start",
+    borderBottom: "1px solid #e5e7eb",
+    pb: 2,
+  },
+  leadName: {
+    fontSize: "15px",
+    fontWeight: 500,
+    color: "#1f2937",
+    lineHeight: 1.3,
+  },
+  iconStyle: {
+    color: "#6b7280",
+    bgcolor: "#f3f4f6",
+    borderRadius: "50%",
+    width: "20px",
+    height: "20px",
+    p: 0.6,
+  },
+  leadOwnerStyle: {
+    fontSize: "12px",
+    color: "#374151",
+    fontWeight: 500,
+  },
+  calendarIcon: {
+    width: "14px",
+    height: "14px",
+    color: "#7b7a79",
+    mr: 0.5,
+  },
+  dateStyle: {
+    fontSize: "12px",
+    color: "#7b7a79",
+
+    fontWeight: 500,
+  },
+  subSectionAccordion: {
+    height: "52px", // fixed height
+    minHeight: "52px", // prevent auto-expansion
+    "&.Mui-expanded": {
+      minHeight: "52px", // fix expanded state height
+      height: "52px",
+    },
+    border: "1px solid #e2e8f0",
+    borderTopRightRadius: "8px",
+    px: 2,
+  },
+  subSectionCountContainer: {
+    // px: 1,
+    color: "white",
+    height: "26px",
+    width: "26px !important",
+    fontSize: "10px",
+    fontWeight: "bold",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "50%",
+  },
+  cardsContainer: {
+    px: 1,
+    gap: "12px",
+    display: "flex",
+    flexDirection: "column",
+    p: "8px",
+  },
+  settingStyle: {
+    bgcolor: "#f8fafc",
+    width: "56px",
+    height: "41px",
+    borderRadius: "6px",
+    border: "1px solid #e2e8f0",
+  },
+  swimLaneAccordionStyle: {
+    mb: 1,
+    "&:before": { display: "none" },
+    py: 0,
+    boxShadow: "none",
+  },
+  subSectionHeaderContainer: {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+  },
+};