rez-table-listing-mui 1.2.14 → 1.2.16

package/package.json

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

package/src/kanban/components/LeadCard.tsx

@@ -13,7 +13,7 @@ import PhoneOutlinedIcon from "@mui/icons-material/PhoneOutlined";
 import EmailOutlinedIcon from "@mui/icons-material/EmailOutlined";
 import { kanbanStyles } from "../styles/styles";
 
-const LeadCard = ({ lead }: LeadCardProps) => {
+const LeadCard = ({ cardData: lead }: LeadCardProps) => {
   const formatEnquiryDate = (enquiryDate: string | null) => {
     if (!enquiryDate) return "N/A";
     const date = new Date(enquiryDate);

package/src/kanban/hooks/hooks.ts

@@ -3,7 +3,7 @@ import { getKanbanData } from "../services/service";
 
 export const useGetKanbanData = (entity_type: string) => {
   const {
-    data: rawData,
+    data: metaData,
     isPending,
     isLoading,
     error,
@@ -12,5 +12,5 @@ export const useGetKanbanData = (entity_type: string) => {
     queryFn: () => getKanbanData(entity_type),
     enabled: !!entity_type, // Only fetch when workflowId is valid
   });
-  return { rawData, isPending, isLoading, error };
+  return { metaData, isPending, isLoading, error };
 };

package/src/kanban/index.tsx

@@ -6,33 +6,35 @@ import {
   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 { Lane, SubLane, SwimLane } from "./types/types";
 import { COLOR_CONSTANTS } from "./constants/kanban-constants";
 import Loader from "../listing/components/common/loader/loader";
 
 const Kanban = ({
-  rawData,
+  metaData,
+  data,
   isLoading,
   KanbanCardComponent,
+  showSettings,
+  onOpenSettings,
 }: {
-  rawData: any;
+  metaData: any;
+  data: any;
   isLoading?: boolean;
   KanbanCardComponent: React.ComponentType<{
     key: string | number;
-    lead: LeadData;
+    cardData: any;
   }>;
+  showSettings: boolean;
+  onOpenSettings?: () => void;
 }) => {
   const [expandedPanels, setExpandedPanels] = useState<{
     [key: string]: boolean;
@@ -45,9 +47,9 @@ const Kanban = ({
   }>({});
 
   useEffect(() => {
-    if (rawData?.swim_lanes?.length) {
+    if (metaData?.swim_lanes?.length) {
       const initial: { [key: string]: boolean } = {};
-      rawData.swim_lanes.forEach((swim_lane: SwimLane) => {
+      metaData?.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;
@@ -55,7 +57,7 @@ const Kanban = ({
       });
       setSubLaneExpanded(initial);
     }
-  }, [rawData]);
+  }, [metaData]);
 
   const handleAccordionChange =
     (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => {
@@ -73,17 +75,17 @@ const Kanban = ({
   };
 
   const getLeadCount = (laneId: number): number => {
-    if (!rawData?.swim_lanes || !rawData?.data) return 0;
+    if (!metaData?.swim_lanes || !data) return 0;
 
     const seenLeadIds = new Set<number | string>();
     let count = 0;
 
-    rawData.swim_lanes.forEach((swimLane: SwimLane) => {
+    metaData?.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)) {
+          data.forEach((lead: any) => {
+            if (lead?.stage_id === subLane?.id && !seenLeadIds.has(lead?.id)) {
               seenLeadIds.add(lead.id);
               count++;
             }
@@ -103,7 +105,13 @@ const Kanban = ({
           <Box sx={{ width: "100%", bgcolor: "white", overflowX: "auto" }}>
             {/* Header */}
             <Box sx={kanbanStyles.topHeader}>
-              <IconButton sx={kanbanStyles.settingStyle}>
+              <IconButton
+                onClick={onOpenSettings}
+                sx={{
+                  ...kanbanStyles.settingStyle,
+                  visibility: showSettings ? "visible" : "hidden",
+                }}
+              >
                 <SettingsOutlinedIcon />
               </IconButton>
 
@@ -114,7 +122,7 @@ const Kanban = ({
                   flex: 1,
                 }}
               >
-                {rawData?.lanes?.map((lane: Lane, index: number) => (
+                {metaData?.lanes?.map((lane: Lane, index: number) => (
                   <Box
                     className="lane-header"
                     sx={{
@@ -156,7 +164,7 @@ const Kanban = ({
               }}
             >
               {/* Swim Lanes */}
-              {rawData?.swim_lanes?.map((swim_lane: SwimLane) => (
+              {metaData?.swim_lanes?.map((swim_lane: SwimLane) => (
                 <Accordion
                   key={swim_lane.id}
                   expanded={!!expandedPanels[swim_lane.name]}
@@ -189,7 +197,7 @@ const Kanban = ({
                   >
                     {/* Replaced Grid with Flex */}
                     <Box sx={{ ...kanbanStyles.syncingStyle, pl: 7 }}>
-                      {rawData?.lanes?.map((lane: Lane, index: number) => (
+                      {metaData?.lanes?.map((lane: Lane, index: number) => (
                         <Box
                           className="column"
                           sx={{
@@ -211,10 +219,10 @@ const Kanban = ({
                                 <Accordion
                                   key={sub_section.id}
                                   expanded={
-                                    rawData?.data?.filter(
-                                      (lead: LeadData) =>
-                                        lead.sub_lane_id === sub_section.id &&
-                                        lead.lead_status == swim_lane.id
+                                    data?.filter(
+                                      (lead: any) =>
+                                        lead.stage_id === sub_section.id &&
+                                        lead.lead_status_id == swim_lane.id
                                     )?.length === 0
                                       ? false
                                       : subLaneExpanded[subLaneKey] || false
@@ -228,7 +236,7 @@ const Kanban = ({
                                     }`,
                                   }}
                                   // disabled={
-                                  //   rawData?.data?.filter(
+                                  //   metaData?.data?.filter(
                                   //     (lead: LeadData) =>
                                   //       lead.sub_lane_id === sub_section.id &&
                                   //       !usedLeadIds.has(lead.id)
@@ -242,11 +250,12 @@ const Kanban = ({
                                       <ExpandMoreIcon
                                         sx={{
                                           display:
-                                            rawData?.data?.filter(
-                                              (lead: LeadData) =>
-                                                lead.sub_lane_id ===
+                                            data?.filter(
+                                              (lead: any) =>
+                                                lead.stage_id ===
                                                   sub_section.id &&
-                                                lead.lead_status == swim_lane.id
+                                                lead.lead_status_id ==
+                                                  swim_lane.id
                                             )?.length === 0
                                               ? "none"
                                               : "block",
@@ -270,11 +279,10 @@ const Kanban = ({
                                               .darkColor,
                                         }}
                                       >
-                                        {rawData?.data?.filter(
-                                          (lead: LeadData) =>
-                                            lead.sub_lane_id ===
-                                              sub_section.id &&
-                                            lead.lead_status === swim_lane.id
+                                        {data?.filter(
+                                          (lead: any) =>
+                                            lead.stage_id === sub_section.id &&
+                                            lead.lead_status_id === swim_lane.id
                                         )?.length || 0}
                                       </Box>
                                       <Typography
@@ -292,19 +300,20 @@ const Kanban = ({
                                   >
                                     {(() => {
                                       const leadsForThisSubLane =
-                                        rawData?.data?.filter(
-                                          (lead: LeadData) =>
-                                            lead.sub_lane_id ===
-                                              sub_section.id &&
-                                            lead.lead_status == swim_lane.id
+                                        data?.filter(
+                                          (lead: any) =>
+                                            lead.stage_id === sub_section.id &&
+                                            lead.lead_status_id ==
+                                              swim_lane.id &&
+                                            lead.stage_group_id == lane.id
                                         ) || [];
 
                                       return leadsForThisSubLane.map(
-                                        (lead_card: LeadData) =>
+                                        (card: any) =>
                                           (KanbanCardComponent && (
                                             <KanbanCardComponent
-                                              key={lead_card.id}
-                                              lead={lead_card}
+                                              key={card.id}
+                                              cardData={card}
                                             />
                                           )) ||
                                           null

package/src/kanban/services/service.ts

@@ -2,7 +2,7 @@ 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}`);
+    const response = await api.get(`/lead/getlanes?entity_type=${entity_type}`);
     return response.data;
   } catch (error) {
     console.error("Failed to fetch action category:", error);

package/src/kanban/types/types.ts

@@ -1,130 +1,57 @@
 export interface LeadCardProps {
   key: string | number;
-  lead: LeadData;
+  cardData: any;
 }
 
 export interface LeadData {
   id: string | number;
   entity_type: string;
-  name: string | null;
+  name: string;
   status: string;
+  admission_grade: string;
+  status_id: string;
   parent_type: string | null;
   parent_id: string | null;
-  primary_email: string | null;
-  primary_mobile: string | null;
   code: string;
   created_by: string;
-  created_date: string;
-  modified_by: string | null;
-  modified_date: string | null;
-  enterprise_id: number;
-  organization_id: number;
+  created_date: string; // ISO datetime string
+  modified_by: string;
+  modified_date: string; // ISO datetime string
+  enterprise_id: number | string | null;
+  organization_id: number | string | null;
   appcode: string | null;
-  level_id: string;
+  level_id: string | number;
   level_type: string;
-  campus: string | null;
-  first_name: string | null;
-  last_name: string | null;
-  relationship_student: string | null;
-  phone_number: string | null;
-  email: string | null;
-  pin_code: string | null;
-  first_name_std: string | null;
-  last_name_std: string | null;
-  gender: string | null;
-  academic_year: string | null;
-  curr_grade: string | null;
-  source: string | null;
-  stage: string | null;
-  lead_owner: string | null;
-  lead_owner_name: string | null;
-  profile: {
-    signedUrl: string;
-    fileName: string;
-    id: string | number;
-  };
+  lead_owner: string;
+  student_first_name: string;
   lead_source: string | null;
-  school_code: string | null;
-  source_details: string | null;
+  enquiry_date: string; // format: DD-MM-YYYY
   lead_status: string;
+  lead_status_id: string;
   assigned_counselor: string | null;
-  lead_priority: string | null;
-  lead_score: string | null;
-  conversion_probability: string | null;
-  expected_admission_year: string | null;
-  budget_range: string | null;
-  enrollment_timeline: string | null;
-  lead_temperature: string | null;
-  utm_source: string | null;
-  student_first_name: string;
-  student_middle_name: string;
-  student_last_name: string;
-  student_gender: string;
-  student_age: string | null;
-  current_grade: string;
-  admission_grade: string;
-  current_school: string | null;
-  number_input: string | null;
-  current_board: string | null;
-  special_needs: string | null;
-  special_needs_details: string | null;
-  previous_school_reason: string | null;
-  academic_performance: string | null;
-  interested_academic_year: string | null;
-  father_salutation: string | null;
-  father_first_name: string | null;
-  father_last_name: string | null;
-  father_mobile: string | null;
-  father_email: string | null;
-  father_qualification: string | null;
-  father_occupation: string | null;
-  father_designation: string | null;
-  father_company: string | null;
-  father_annual_income: string | null;
-  father_office_address: string | null;
-  mother_salutation: string | null;
-  mother_first_name: string | null;
-  mother_last_name: string | null;
-  mother_email: string | null;
-  mother_mobile: string | null;
-  mother_qualification: string | null;
-  mother_designation: string | null;
-  mother_company: string | null;
-  mother_annual_income: string | null;
-  mother_office_address: string | null;
-  mother_occupation: string | null;
-  how_did_you_hear: string | null;
-  specific_requirements: string | null;
-  parent_questions: string | null;
-  special_requirements: string | null;
-  comments: string | null;
-  lead_reasons: string | null;
-  referral_source: string | null;
-  campaign_code: string | null;
-  DOB: string | null;
-  date: string | null;
-  enquiry_date: string;
-  student_dob: string | null;
-  date_input: string | null;
-  sub_lane_id: number;
+  contact_first_name: string;
+  primary_mobile: string;
+  stage_group_id: number | string;
+  stage_id: number | string;
+  profile_image: string | null;
 }
 
 export interface Lane {
-  id: string;
+  id: string | number;
   name: string;
   color: string | null;
   darkColor: string | null;
 }
 
 export interface SwimLane {
-  id: string;
+  id: string | number;
   name: string;
   sub_lanes: SubLane[];
   count: number | string;
 }
 
 export interface SubLane {
-  id: number;
+  id: number | string;
   name: string;
   color: string;
   lane_id: number | string;

package/src/listing/components/common/index.scss

@@ -6,7 +6,7 @@
   h3 {
     color: var(--grey-900);
     font-size: 2rem;
-    font-family: "Satoshi", sans-serif;
+    font-family: "Satoshi";
     font-weight: 700;
   }
 }

package/src/listing/components/index.scss

@@ -10,8 +10,6 @@
   --grey-900: #414042;
   --filter-width: 24rem;
 
-  font-family: "Satoshi", sans-serif;
-
   // set default styles for all elements
   & * {
     box-sizing: border-box;

package/src/listing/components/table-head-dnd-cell.tsx

@@ -52,11 +52,11 @@ function DraggableTableHeader<T>({
     style?: CSSProperties;
   } = {
     className: "ts__content",
-    style: {
-      justifyContent: getColumnAlignment(
-        (header?.column?.columnDef?.meta as align)?.align
-      ),
-    },
+    // style: {
+    //   justifyContent: getColumnAlignment(
+    //     (header?.column?.columnDef?.meta as align)?.align
+    //   ),
+    // },
   };
 
   // if (header.column.getCanSort()) {

package/src/listing/components/table-head.tsx

@@ -75,11 +75,11 @@ function TableHead<T>({
               style?: CSSProperties;
             } = {
               className: "ts__content",
-              style: {
-                justifyContent: getColumnAlignment(
-                  (header?.column?.columnDef?.meta as align)?.align
-                ),
-              },
+              // style: {
+              //   justifyContent: getColumnAlignment(
+              //     (header?.column?.columnDef?.meta as align)?.align
+              //   ),
+              // },
             };
 
             // if (header.column.getCanSort()) {

package/src/listing/components/table-settings/components/column.tsx

@@ -119,17 +119,13 @@ const ColumnTab = ({ filterSettingStates, columnsData }: ColumnTabProps) => {
 
     if (showList || hideList) {
       const isValidShowList = showList?.length > 0;
-      console.log("inside show list and hide list if", isValidShowList);
 
       if (!isValidShowList) {
-        console.log("not a valid show list");
-
         const hasColumnError = saveButtonError.messages.some(
           (message) => message.type === ERROR_CODE
         );
 
         if (!hasColumnError) {
-          console.log("inside if");
           setSaveButtonError((prev) => ({
             ...prev,
             hasError: true,
@@ -143,7 +139,6 @@ const ColumnTab = ({ filterSettingStates, columnsData }: ColumnTabProps) => {
           }));
         }
       } else {
-        console.log("inside else");
         const hasOtherMessages = saveButtonError?.messages?.some(
           (message) => message.type !== ERROR_CODE
         );