rez-table-listing-mui 1.2.13 → 1.2.14

package/src/kanban/constants/kanban-constants.ts

@@ -0,0 +1,249 @@
+export const rawData = {
+  lanes: [
+    { id: 1, name: "Enquiry", color: "#fff0f3", darkColor: "#fea3b4" },
+    { id: 2, name: "Qualified Lead", color: "#fffbed", darkColor: "#fde272" },
+    { id: 3, name: "Application", color: "#ebf9fc", darkColor: "#67e3f9" },
+    { id: 4, name: "Admission", color: "#edf9f3", darkColor: "#73e2a3" },
+    { id: 5, name: "Documents", color: "#edf9f3", darkColor: "#73e2a3" },
+    { id: 6, name: "Admission", color: "#edf9f3", darkColor: "#73e2a3" },
+  ],
+  swim_lanes: [
+    {
+      id: 12,
+      name: "Active",
+      sub_lanes: [
+        {
+          id: 1,
+          name: "Lead Assignment",
+          color: "red",
+          lane_id: 1,
+          expanded: true,
+        },
+        {
+          id: 2,
+          name: "Initial Outreach",
+          color: "green",
+          lane_id: 1,
+          expanded: true,
+        },
+        {
+          id: 3,
+          name: "Lead Assessment",
+          color: "yellow",
+          lane_id: 2,
+          expanded: true,
+        },
+        {
+          id: 4,
+          name: "Campus Visit",
+          color: "#FFE885",
+          lane_id: 2,
+          expanded: true,
+        },
+        {
+          id: 5,
+          name: "Application Collection",
+          color: "#90E0F3",
+          lane_id: 3,
+          expanded: true,
+        },
+        {
+          id: 6,
+          name: "Student Assessment",
+          color: "#90E0F3",
+          lane_id: 3,
+          expanded: true,
+        },
+        {
+          id: 7,
+          name: "Fee Collection",
+          color: "#90EE90",
+          lane_id: 4,
+          expanded: true,
+        },
+        {
+          id: 8,
+          name: "System Integration",
+          color: "#90EE90",
+          lane_id: 4,
+          expanded: true,
+        },
+      ],
+    },
+    {
+      id: 13,
+      name: "Dormant",
+      sub_lanes: [],
+    },
+    {
+      id: 14,
+      name: "Disqualify",
+      sub_lanes: [],
+    },
+    {
+      id: 15,
+      name: "Lost",
+      sub_lanes: [],
+    },
+  ],
+  data: [
+    // Lead Assignment
+    {
+      id: 1,
+      name: "Aditi Sharma",
+      sub_lane_id: 1,
+      email: "aditisharma@gmail.com",
+      phone: "+91 9846213495",
+      status: "Active",
+      progress: 0,
+      days: "10 Days",
+      reference_id: "INQ2024XY",
+      priority: null,
+      lost: false,
+    },
+    {
+      id: 2,
+      name: "Aditi Sharma",
+      sub_lane_id: 1,
+      email: "aditisharma@gmail.com",
+      phone: "+91 9846213495",
+      status: "Active",
+      progress: 0,
+      days: "10 Days",
+      reference_id: "INQ2024XY",
+      priority: null,
+      lost: false,
+    },
+    // Initial Outreach
+    {
+      id: 3,
+      name: "Rashmi Desai",
+      sub_lane_id: 2,
+      email: "aditisharma@gmail.com",
+      phone: "+91 9765874320",
+      status: "Active",
+      progress: 0,
+      days: "10 Days",
+      reference_id: "INQ2024XY",
+      priority: null,
+      lost: false,
+    },
+    // Lead Assessment
+    {
+      id: 4,
+      name: "Aditi Sharma",
+      sub_lane_id: 3,
+      email: "aditisharma@gmail.com",
+      phone: "+91 9846213495",
+      status: "Active",
+      progress: 0,
+      days: "10 Days",
+      reference_id: "INQ2024XY",
+      priority: null,
+      lost: false,
+    },
+    // Campus Visit
+    {
+      id: 5,
+      name: "Aditi Sharma",
+      sub_lane_id: 4,
+      email: "aditisharma@gmail.com",
+      phone: "+91 9846213495",
+      status: "Lost",
+      progress: 0,
+      days: "10 Days",
+      reference_id: "2DQ2024XY",
+      priority: null,
+      lost: true,
+    },
+    {
+      id: 6,
+      name: "Aditi Sharma",
+      sub_lane_id: 4,
+      email: "aditisharma@gmail.com",
+      phone: "+91 9846213495",
+      status: "Active",
+      progress: 0,
+      days: "10 Days",
+      reference_id: "INQ2024XY",
+      priority: null,
+      lost: false,
+    },
+    // Application Collection
+    {
+      id: 7,
+      name: "Aditi Sharma",
+      sub_lane_id: 5,
+      email: "aditisharma@gmail.com",
+      phone: "+91 9452013495",
+      status: "Active",
+      progress: 0,
+      days: "10 Days",
+      reference_id: "INQ2024XY",
+      priority: null,
+      lost: false,
+    },
+    {
+      id: 8,
+      name: "Aditi Sharma",
+      sub_lane_id: 5,
+      email: "aditisharma@gmail.com",
+      phone: "+91 9452013495",
+      status: "Active",
+      progress: 0,
+      days: "10 Days",
+      reference_id: "INQ2024XY",
+      priority: null,
+      lost: false,
+    },
+    // Student Assessment
+    {
+      id: 9,
+      name: "Aditi Sharma",
+      sub_lane_id: 6,
+      email: "aditisharma@gmail.com",
+      phone: "+91 9452013495",
+      status: "Active",
+      progress: 0,
+      days: "10 Days",
+      reference_id: "INQ2024XY",
+      priority: null,
+      lost: false,
+    },
+    // Fee Collection
+    {
+      id: 10,
+      name: "Aditi Sharma",
+      sub_lane_id: 7,
+      email: "aditisharma@gmail.com",
+      phone: "+91 9846015495",
+      status: "Active",
+      progress: 0,
+      days: "You",
+      reference_id: "INQ2024XY",
+      priority: "High",
+      lost: false,
+    },
+    // System Integration
+    {
+      id: 11,
+      name: "Aditi Sharma",
+      sub_lane_id: 8,
+      email: "aditisharma@gmail.com",
+      phone: "+91 9846015495",
+      status: "Lost",
+      progress: 0,
+      days: "You",
+      reference_id: "INQ2024XY",
+      priority: "Low",
+      lost: true,
+    },
+  ],
+};
+
+export const COLOR_CONSTANTS = [
+  { color: "#fff0f3", darkColor: "#fea3b4" },
+  { color: "#fffbed", darkColor: "#fde272" },
+  { color: "#ebf9fc", darkColor: "#67e3f9" },
+  { color: "#edf9f3", darkColor: "#73e2a3" },
+];

package/src/kanban/hooks/hooks.ts

@@ -0,0 +1,16 @@
+import { useQuery } from "@tanstack/react-query";
+import { getKanbanData } from "../services/service";
+
+export const useGetKanbanData = (entity_type: string) => {
+  const {
+    data: rawData,
+    isPending,
+    isLoading,
+    error,
+  } = useQuery({
+    queryKey: ["stageGroupsOptions", entity_type],
+    queryFn: () => getKanbanData(entity_type),
+    enabled: !!entity_type, // Only fetch when workflowId is valid
+  });
+  return { rawData, isPending, isLoading, error };
+};

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;
+  }
+};