rez-table-listing-mui 1.2.13 → 1.2.14

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

package/src/kanban/types/types.ts

@@ -0,0 +1,132 @@
+export interface LeadCardProps {
+  key: string | number;
+  lead: LeadData;
+}
+
+export interface LeadData {
+  id: string | number;
+  entity_type: string;
+  name: string | null;
+  status: 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;
+  appcode: string | null;
+  level_id: string;
+  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_source: string | null;
+  school_code: string | null;
+  source_details: string | null;
+  lead_status: 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;
+}
+
+export interface Lane {
+  id: string;
+  name: string;
+  color: string | null;
+  darkColor: string | null;
+}
+
+export interface SwimLane {
+  id: string;
+  name: string;
+  sub_lanes: SubLane[];
+  count: number | string;
+}
+
+export interface SubLane {
+  id: number;
+  name: string;
+  color: string;
+  lane_id: number | string;
+  expanded: boolean;
+}

package/src/{components → listing/components}/column-visibility-modal/column-list-item.tsx

@@ -4,7 +4,7 @@ import {
   DragandDrogIcon,
   VisibilityIcon,
   VisibilityOffIcon,
-} from "../../assets/svg";
+} from "../../../assets/svg";
 import { CSS } from "@dnd-kit/utilities";
 import { camelCaseToTitle } from "../../types/common";
 

package/src/{components → listing/components}/column-visibility-modal/index.tsx

@@ -18,7 +18,7 @@ import { Popover, IconButton, Typography, Box } from "@mui/material";
 import { Table } from "@tanstack/react-table";
 import DraggableColumn from "./column-list-item";
 import "./index.scss";
-import { CloseIcon } from "../../assets/svg";
+import { CloseIcon } from "../../../assets/svg";
 
 interface ColumnToggleProps<T> {
   anchorEl: HTMLElement | null;

package/src/{components → listing/components}/filter/components/forms/components/Filter-criteria.tsx

@@ -8,7 +8,7 @@ import {
   ListItemText,
 } from "@mui/material";
 import { useRef } from "react";
-import { AddIcon } from "../../../../../assets/svg";
+import { AddIcon } from "../../../../../../assets/svg";
 import {
   FilterColumnsDataProps,
   FilterColumnsListProps,

package/src/{components → listing/components}/filter/components/forms/index.tsx

@@ -6,7 +6,7 @@ import {
   TextField,
   Typography,
 } from "@mui/material";
-import { CloseIcon, DeleteIcon } from "../../../../assets/svg";
+import { CloseIcon, DeleteIcon } from "../../../../../assets/svg";
 import {
   FilterColumnsDataProps,
   FilterDropdownDataProps,

package/src/{components → listing/components}/filter/components/saved-filter.tsx

@@ -13,10 +13,10 @@ import {
   Typography,
 } from "@mui/material";
 import CustomSearch from "./search";
-import { DeleteIcon, EditIcon } from "../../../assets/svg";
+import { DeleteIcon, EditIcon } from "../../../../assets/svg";
 import SavedFilterEditComponent from "./saved-edit-filter";
 import { filterStyles } from "../style";
-import { CheckBox } from "../../../assets/svg";
+import { CheckBox } from "../../../../assets/svg";
 
 const SavedFilter = ({
   columnsData,

package/src/{components → listing/components}/filter/components/search/index.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { TextField, InputAdornment, IconButton } from "@mui/material";
 import SearchIcon from "@mui/icons-material/Search";
-import { CloseIcon } from "../../../../assets/svg";
+import { CloseIcon } from "../../../../../assets/svg";
 
 interface SearchInputProps {
   value: string;

package/src/{components → listing/components}/filter/components/tabs/index.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { Tabs, Tab, TabsProps, Box } from "@mui/material";
-import { CheckBox, CrossBox } from "../../../../assets/svg";
+import { CheckBox, CrossBox } from "../../../../../assets/svg";
 
 export interface TabItem {
   label: string;

package/src/{components → listing/components}/index-table.tsx

@@ -15,7 +15,7 @@ import {
   TopbarOptionsProps,
 } from "../types/table";
 import { CraftTableFeatureProps } from "../types/table-options";
-import { LoaderAnimation } from "../assets/svg";
+import { LoaderAnimation } from "../../assets/svg";
 import Topbar from "./topbar";
 import DefaultPagination from "./pagination/default";
 import TableDND from "./table-dnd";

package/src/{components → listing/components}/pagination/default/index.tsx

@@ -4,7 +4,7 @@ import {
   TableLastPageIcon,
   // TableNextPageIcon,
   // TablePreviousPageIcon,
-} from "../../../assets/svg";
+} from "../../../../assets/svg";
 import TablePreviousPageIcon from "@mui/icons-material/NavigateBeforeRounded";
 import TableNextPageIcon from "@mui/icons-material/NavigateNextRounded";
 import "./index.scss";

package/src/{components → listing/components}/search/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect, useCallback } from "react";
-import { SearchIcon } from "../../assets/svg";
+import { SearchIcon } from "../../../assets/svg";
 import useOutsideClick from "../../libs/hooks/useOutsideClick";
 import { customDebounce } from "../../libs/utils/debounce";
 import { Box, IconButton, InputAdornment, TextField } from "@mui/material";

package/src/{components → listing/components}/sorting-modal.tsx/index.tsx

@@ -23,7 +23,7 @@ import {
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
 import SortableItem from "./sorting-item";
-import { AddIcon, CloseIcon } from "../../assets/svg";
+import { AddIcon, CloseIcon } from "../../../assets/svg";
 
 interface SortItem {
   id: string;

package/src/{components → listing/components}/sorting-modal.tsx/sorting-item.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
-import { DragHandleIcon } from "../../assets/svg";
+import { DragHandleIcon } from "../../../assets/svg";
 
 const SortableItem = ({
   id,

package/src/{components → listing/components}/table-change-layout.tsx

@@ -7,7 +7,7 @@ import {
   ListIcon,
   TableIcon,
   TimeLineIcon,
-} from "../assets/svg";
+} from "../../assets/svg";
 import { Box, Typography, ButtonBase, Grid, IconButton } from "@mui/material";
 
 interface LayoutSelectorProps {

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

@@ -2,7 +2,7 @@ import { flexRender } from "@tanstack/react-table";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSSProperties, useState } from "react";
 import { CSS } from "@dnd-kit/utilities";
-import { DownArrow, DragHandleIcon, UpArrow } from "../assets/svg";
+import { DownArrow, DragHandleIcon, UpArrow } from "../../assets/svg";
 import {
   getColumnAlignment,
   getColumnPinningStyles,
@@ -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/{components → listing/components}/table-head-pin.tsx

@@ -1,4 +1,4 @@
-import { IconPinOffOutline } from "../assets/svg";
+import { IconPinOffOutline } from "../../assets/svg";
 import { TableHeaderProps } from "../types/table";
 
 function TableHeadPin<T>({ header }: TableHeaderProps<T>) {

package/src/{components → listing/components}/table-head-popover.tsx

@@ -13,7 +13,7 @@ import {
   HideIcon,
   IconPinOffOutline,
   IconPinOutline,
-} from "../assets/svg";
+} from "../../assets/svg";
 import { CraftTableOptionsProps } from "../types/table-options";
 
 type Props<T> = {

package/src/{components → listing/components}/table-head.tsx

@@ -3,7 +3,7 @@ import {
   CraftTableFeatureProps,
   CraftTableOptionsProps,
 } from "../types/table-options";
-import { DownArrow, UpArrow } from "../assets/svg";
+import { DownArrow, UpArrow } from "../../assets/svg";
 import { CSSProperties, useState } from "react";
 import {
   getColumnAlignment,
@@ -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/{components → listing/components}/table-settings/common/listing-values.tsx

@@ -15,7 +15,7 @@ import { useDroppable } from "@dnd-kit/core";
 import DraggableListItem from "./draggable-listitem.tsx";
 import { listingValuesStyles } from "../style.ts";
 import Loader from "../../common/loader/loader.tsx";
-import { ClosedEyeIcon, EyeIcon } from "../../../assets/svg.tsx";
+import { ClosedEyeIcon, EyeIcon } from "../../../../assets/svg.tsx";
 import InfoAlert from "./info-alert.tsx";
 import React from "react";
 ``;

package/src/{components → listing/components}/table-settings/components/sorting.tsx

@@ -28,7 +28,7 @@ import {
   SortableContext,
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
-import { AddIcon, CloseIcon } from "../../../assets/svg";
+import { AddIcon, CloseIcon } from "../../../../assets/svg";
 
 const Sorting = ({
   filterSettingStates,

package/src/{components → listing/components}/tabs/index.tsx

@@ -5,7 +5,7 @@ import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined";
 import { settingsOptionsProps } from "../../types/table";
 import { tableTabsStyles } from "./styles";
 import { useMemo } from "react";
-import { SettingIcon } from "../../assets/svg";
+import { SettingIcon } from "../../../assets/svg";
 
 interface TabDataProps {
   tab_value: string | null;

package/src/{components → listing/components}/topbar/index.tsx

@@ -4,16 +4,16 @@ import {
   SortingIcon,
   FilterationIcon,
   HideColumnIcon,
-} from "../../assets/svg";
+} from "../../../assets/svg.tsx";
 import { Popover } from "@mui/material";
-import LayoutSelector from "../table-change-layout";
-import useOutsideClick from "../../libs/hooks/useOutsideClick";
+import LayoutSelector from "../table-change-layout.tsx";
+import useOutsideClick from "../../libs/hooks/useOutsideClick.tsx";
 import { Table } from "@tanstack/react-table";
-import { TopbarOptionsProps } from "../../types/table";
+import { TopbarOptionsProps } from "../../types/table.ts";
 import "./index.scss";
-import ViewMore from "../viewmore";
-import { useFullscreenPopoverContainer } from "../../libs/hooks/useFullScreen";
-import SortPopover from "../sorting-modal.tsx";
+import ViewMore from "../viewmore/index.tsx";
+import { useFullscreenPopoverContainer } from "../../libs/hooks/useFullScreen.tsx";
+import SortPopover from "../sorting-modal.tsx/index.tsx";
 import ColumnToggle from "../column-visibility-modal/index.tsx";
 import { CraftTableOptionsProps } from "../../types/table-options.ts";
 import { TableSearch } from "../search/index.tsx";

package/src/{components → listing/components}/viewmore/index.tsx

@@ -8,7 +8,7 @@ import {
   IconButton,
   Switch as MUISwitch,
 } from "@mui/material";
-import { CloseIcon, ViewMoreIcon } from "../../assets/svg";
+import { CloseIcon, ViewMoreIcon } from "../../../assets/svg";
 import { useFullscreenPopoverContainer } from "../../libs/hooks/useFullScreen";
 import { CraftTableOptionsProps } from "../../types/table-options";
 

package/src/{libs → listing/libs}/hooks/useDefaultColumns.tsx

@@ -97,6 +97,7 @@ export const useDefaultColumns = () => {
           label: "Status",
           type: "custom",
           propName: "renderStatus",
+          align: "right",
         },
       },
       {

package/src/{libs → listing/libs}/utils/common.ts

@@ -77,7 +77,7 @@ export function customDebounce<T extends (...args: any[]) => any>(
 }
 
 //ENTITY TYPE
-const ENVIRONMENT = "uat";
+const ENVIRONMENT = "crm_dev";
 export const ENTITY_TYPE = "UPR";
 
 const environments = {