rez-table-listing-mui 1.2.12 → 1.2.14

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;

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