rez-table-listing-mui 2.0.13 → 2.0.15

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import {
   Box,
   Select,
@@ -8,7 +8,6 @@ import {
   Checkbox,
   FormControlLabel,
   Grid,
-  Alert,
 } from "@mui/material";
 
 import ListingValues from "../common/listing-values";
@@ -22,127 +21,101 @@ import {
   useSensors,
   DragEndEvent,
 } from "@dnd-kit/core";
-import {
-  QuickTabConfigProps,
-  SettingsQuickTabProps,
-} from "../../../types/filter-settings";
 import { TabsStyles } from "../style";
-import InfoAlert from "../common/info-alert";
 import { craftTableFilterSettingsOptionsProps } from "../../../types/table-options";
-import { LANE_SELECTS } from "../constants";
 
 const Lane = ({
   filterSettingStates,
   columnsData,
   tabsApiData,
   tabsApiDataLoading,
+  selectAttributeData,
+  laneHideListData,
 }: {
   filterSettingStates: craftTableFilterSettingsOptionsProps;
   columnsData: any;
   tabsApiData?: { label: string; value: string }[];
   tabsApiDataLoading?: boolean;
+  selectAttributeData?: { label: string; value: string }[];
+  laneHideListData?: { label: string; value: string }[];
 }) => {
-  const { settingsData, setSettingsData, saveButtonError, setSaveButtonError } =
-    filterSettingStates;
+  const { kanbanSettingsData, setKanbanSettingsData } = filterSettingStates;
 
   const [searchTerm, setSearchTerm] = useState<string>("");
-  const [currentQuickAttribute, setCurrentQuickAttribute] = useState<string>(
-    settingsData?.quick_tab?.attribute || ""
+  const [currentLaneAttribute, setCurrentLaneAttribute] = useState<string>(
+    kanbanSettingsData?.lane?.attribute || ""
   );
 
-  const quickTabStates = settingsData?.quick_tab as any;
+  console.log("selectAttributeData", selectAttributeData);
 
-  // In case there is no quick tab state from API
   useEffect(() => {
     const stateToArray =
-      (quickTabStates && Object.entries(quickTabStates)) || [];
+      (kanbanSettingsData?.lane && Object.entries(kanbanSettingsData?.lane)) ||
+      [];
     const isEmptyState = stateToArray.length ? false : true;
 
     if (isEmptyState) {
-      setSettingsData((prev) => ({
+      setKanbanSettingsData((prev) => ({
         ...prev,
-        quick_tab: {
-          ...prev?.quick_tab,
-          attribute: LANE_SELECTS[0].value,
-          sorting: "asc",
+        lane: {
+          ...prev?.lane,
+          attribute:
+            selectAttributeData
+              ?.filter(
+                (i) => i?.value !== kanbanSettingsData?.swim_lane?.attribute
+              )
+              ?.find((i) => i?.value == "stage_group")?.value || "",
         },
       }));
+    } else {
+      if (
+        kanbanSettingsData?.swim_lane?.attribute ==
+        kanbanSettingsData?.lane?.attribute
+      ) {
+        setKanbanSettingsData((prev) => ({
+          ...prev,
+          swim_lane: {
+            ...prev?.swim_lane,
+            attribute:
+              selectAttributeData
+                ?.filter(
+                  (i) => i?.value !== kanbanSettingsData?.swim_lane?.attribute
+                )
+                ?.find((i) => i?.value == "stage_group")?.value || "",
+            // sorting: "asc",
+          },
+        }));
+      }
     }
-  }, [columnsData]);
+  }, [selectAttributeData]);
 
-  // When user changes attribute
   useEffect(() => {
-    if (currentQuickAttribute === settingsData?.quick_tab?.attribute) return;
+    if (currentLaneAttribute === kanbanSettingsData?.lane?.attribute) return;
 
-    if (tabsApiData?.length) {
-      setSettingsData((prev) => ({
+    if (laneHideListData?.length) {
+      setKanbanSettingsData((prev) => ({
         ...prev,
-        quick_tab: {
-          ...prev?.quick_tab,
-          hide_list: tabsApiData,
+        lane: {
+          ...prev?.lane,
+          hide_list: laneHideListData,
           show_list: [],
         },
       }));
 
-      setCurrentQuickAttribute(settingsData?.quick_tab?.attribute || "");
-    }
-  }, [tabsApiData]);
+      setCurrentLaneAttribute(kanbanSettingsData?.lane?.attribute || "");
+    } else {
+      setKanbanSettingsData((prev) => ({
+        ...prev,
+        lane: {
+          ...prev?.lane,
+          hide_list: [],
+          show_list: [],
+        },
+      }));
 
-  // Validation when user changes show list or hide list
-  useEffect(() => {
-    const showList = quickTabStates?.show_list || [];
-    const hideList = quickTabStates?.hide_list || [];
-
-    if (showList || hideList) {
-      // Check if showList is valid (between 1 and 5 items)
-      const isValidShowList = showList.length > 0 && showList.length <= 5;
-      const ERROR_CODE = "quick_tab_error";
-
-      if (!isValidShowList) {
-        const errorMessage = {
-          type: ERROR_CODE,
-          message:
-            showList.length === 0
-              ? "Quick Lane: Please select at least one item"
-              : "Quick Lane: Please select no more than 5 items",
-        };
-
-        // Check if the error is already present in the messages array
-        const hasQuickTabError = saveButtonError?.messages?.some(
-          (message) => message.type === ERROR_CODE
-        );
-
-        // Update the error state
-
-        // Later we can use this to show error message when we will make error logic more simple
-        // setSaveButtonError((prev) => {
-        //   const otherMessages =
-        //     prev?.messages?.filter((message) => message.type !== ERROR_CODE) ||
-        //     [];
-
-        //   return {
-        //     ...prev,
-        //     hasError: true,
-        //     messages: hasQuickTabError
-        //       ? [...prev?.messages]
-        //       : [...otherMessages, errorMessage],
-        //   };
-        // });
-      } else {
-        const hasOtherMessages = saveButtonError?.messages?.some(
-          (message) => message.type !== ERROR_CODE
-        );
-        // Reset error state if the list is valid
-        // setSaveButtonError((prev) => ({
-        //   ...prev,
-        //   hasError: hasOtherMessages,
-        //   messages:
-        //     prev?.messages?.filter((message) => message.type !== ERROR_CODE) ||
-        //     [],
-        // }));
-      }
+      setCurrentLaneAttribute("");
     }
-  }, [quickTabStates?.hide_list, quickTabStates?.show_list]);
+  }, [laneHideListData]);
 
   const sortingOptions = [
     { label: "A-Z", value: "asc" },
@@ -152,357 +125,331 @@ const Lane = ({
     { label: "Custom", value: "custom" },
   ];
 
-  // Convert show_list/hide_list to FilterValue[] for rendering only
-  const showListValues = (quickTabStates?.show_list || [])?.map((id: any) => ({
-    id,
-    label: id?.charAt(0)?.toUpperCase() + id?.slice(1),
-  }));
-  const hideListValues = (quickTabStates?.hide_list || [])?.map((id: any) => ({
-    id,
-    label: id?.charAt(0)?.toUpperCase() + id?.slice(1),
-  }));
+  const isWorkflowAttribute =
+    kanbanSettingsData?.lane?.attribute === "stage_group" ||
+    kanbanSettingsData?.lane?.attribute === "stage";
+
+  const isSourceAttribute =
+    kanbanSettingsData?.lane?.attribute === "lead_source";
+
+  useEffect(() => {
+    if (isSourceAttribute) {
+      setKanbanSettingsData((prev) => ({
+        ...prev,
+        lane: {
+          ...prev.lane,
+          sorting: prev.lane?.sorting || "asc",
+        },
+      }));
+    }
+  }, [kanbanSettingsData?.lane?.attribute]);
+
+  const displaySortingValue = isWorkflowAttribute
+    ? "workflow_sequence"
+    : kanbanSettingsData?.lane?.sorting;
+
+  const enableDND =
+    isSourceAttribute && kanbanSettingsData?.lane?.sorting === "custom";
+
+  const normalizeTabItem = (item: any) => ({
+    label: item.label,
+    value: item?.value,
+  });
+  const constructHideList = () => {
+    const normalizedTabs = laneHideListData?.map(normalizeTabItem) || [];
+    return normalizedTabs?.filter(
+      (tab) => !showListValues?.some((i) => i?.value === tab?.value)
+    );
+  };
+
+  const showListValues = kanbanSettingsData?.lane?.show_list || [];
+  const hideListValues = constructHideList() || [];
+
+  const filteredListValues = hideListValues.filter((value: any) =>
+    value?.label?.toLowerCase().includes(searchTerm.toLowerCase())
+  );
 
+  /* ===========================================================
+     DND CONFIG
+     =========================================================== */
   const sensors = useSensors(
     useSensor(MouseSensor),
     useSensor(TouchSensor),
     useSensor(KeyboardSensor)
   );
 
-  // Drag and drop logic, update only local state
   const handleDragEnd = (event: DragEndEvent) => {
+    if (!enableDND) return; // protect reorder when drag is disabled
+
     const { active, over } = event;
-    if (!over) {
-      return;
-    }
+    if (!over) return;
+
     const currentContainer = active.data.current?.containerId;
     const overContainer = over.data.current?.containerId;
+
     if (!currentContainer || !overContainer) return;
+
+    let newShowList = [...(kanbanSettingsData?.lane?.show_list ?? [])];
+    let newHideList = [...(kanbanSettingsData?.lane?.hide_list ?? [])];
+
     if (currentContainer === overContainer) {
-      // Reorder within the same list
-      let newShowList = [...(quickTabStates.show_list ?? [])];
-      let newHideList = [...(quickTabStates.hide_list ?? [])];
       if (currentContainer === "list") {
-        const oldIndex = newHideList.indexOf(String(active.id));
-        const newIndex = newHideList.indexOf(String(over.id));
+        const oldIndex = newHideList.findIndex((i) => i.value === active.id);
+        const newIndex = newHideList.findIndex((i) => i.value === over.id);
+
         if (oldIndex !== -1 && newIndex !== -1) {
           const [removed] = newHideList.splice(oldIndex, 1);
           newHideList.splice(newIndex, 0, removed);
         }
       } else {
-        const oldIndex = newShowList.indexOf(String(active.id));
-        const newIndex = newShowList.indexOf(String(over.id));
+        const oldIndex = newShowList.findIndex((i) => i.value === active.id);
+        const newIndex = newShowList.findIndex((i) => i.value === over.id);
+
         if (oldIndex !== -1 && newIndex !== -1) {
           const [removed] = newShowList.splice(oldIndex, 1);
           newShowList.splice(newIndex, 0, removed);
         }
       }
+    }
 
-      setSettingsData((prev) => ({
-        ...prev,
-        quick_tab: {
-          ...prev?.quick_tab,
-          show_list: newShowList,
-          hide_list: newHideList,
-        },
-      }));
-    } else {
-      // Move between lists
-      let newShowList = [...(quickTabStates.show_list ?? [])];
-      let newHideList = [...(quickTabStates.hide_list ?? [])];
-      if (currentContainer === "list" && overContainer === "lanes") {
-        if (newShowList.length >= 5) return; // prevent overflow
-        // Move from hide to show
-
-        const idx = newHideList.indexOf(String(active.id));
+    if (currentContainer !== overContainer) {
+      if (currentContainer === "list" && overContainer === "tabs") {
+        const idx = newHideList.findIndex((i) => i.value === String(active.id));
         if (idx !== -1) {
-          newHideList.splice(idx, 1);
-          newShowList.push(String(active.id));
+          const item = newHideList.splice(idx, 1)[0];
+          newShowList.push(item);
         }
-      } else if (currentContainer === "lanes" && overContainer === "list") {
-        // Move from show to hide
-        const idx = newShowList.indexOf(String(active.id));
+      } else if (currentContainer === "tabs" && overContainer === "list") {
+        const idx = newShowList.findIndex((i) => i.value === String(active.id));
         if (idx !== -1) {
-          newShowList.splice(idx, 1);
-          newHideList.push(String(active.id));
+          const item = newShowList.splice(idx, 1)[0];
+          newHideList.push(item);
         }
       }
-
-      setSettingsData((prev) => ({
-        ...prev,
-        quick_tab: {
-          ...prev?.quick_tab,
-          show_list: newShowList,
-          hide_list: newHideList,
-        },
-      }));
     }
-  };
-
-  const filteredListValues = hideListValues.filter((value: any) =>
-    value?.label?.toLowerCase().includes(searchTerm.toLowerCase())
-  );
-
-  // Show All/Hide All logic (local only)
-  const handleShowAll = () => {
-    const currentShowList = quickTabStates.show_list || [];
-    const currentHideList = quickTabStates.hide_list || [];
-
-    const availableSlots = 5 - currentShowList.length;
-
-    if (availableSlots <= 0) return; // Already at limit
-
-    const limitedHideList = currentHideList.slice(0, availableSlots);
 
-    setSettingsData((prev) => ({
+    setKanbanSettingsData((prev) => ({
       ...prev,
-      quick_tab: {
-        ...prev?.quick_tab,
-        show_list: [...currentShowList, ...limitedHideList],
-        hide_list: currentHideList.filter(
-          (item: string) => !limitedHideList.includes(item)
-        ),
+      lane: {
+        ...prev.lane,
+        show_list: newShowList,
+        hide_list: newHideList,
       },
     }));
   };
 
-  const handleHideAll = () => {
-    setSettingsData((prev) => ({
+  const handleShowAll = () => {
+    setKanbanSettingsData((prev) => ({
       ...prev,
-      quick_tab: {
-        ...prev?.quick_tab,
-        hide_list: [
-          ...(prev?.quick_tab?.hide_list || []),
-          ...(prev?.quick_tab?.show_list || []),
+      lane: {
+        ...prev?.lane,
+        show_list: [
+          ...(prev?.lane?.show_list || []),
+          ...(prev?.lane?.hide_list || []),
         ],
-        show_list: [],
+        hide_list: [],
       },
     }));
   };
 
-  // Checkbox logic (local only)
-  const handleShowSubLaneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setSettingsData((prev) => ({
+  const handleHideAll = () => {
+    setKanbanSettingsData((prev) => ({
       ...prev,
-      quick_tab: {
-        ...prev?.quick_tab,
-        showSubLane: e.target.checked,
+      lane: {
+        ...prev?.lane,
+        hide_list: [
+          ...(prev?.lane?.hide_list || []),
+          ...(prev?.lane?.show_list || []),
+        ],
+        show_list: [],
       },
     }));
   };
 
-  const handleShowColorColumnsChange = (
-    e: React.ChangeEvent<HTMLInputElement>
+  const handleItemToggle = (
+    item: { label: string; value: string },
+    fromContainerId: string
   ) => {
-    setSettingsData((prev) => ({
-      ...prev,
-      quick_tab: {
-        ...prev?.quick_tab,
-        showColorColumns: e.target.checked,
-      },
-    }));
-  };
-
-  const handleItemToggle = (itemId: string, fromContainerId: string) => {
-    const toShowList = [...(quickTabStates.show_list ?? [])];
-    const toHideList = [...(quickTabStates.hide_list ?? [])];
-
-    if (fromContainerId === "list") {
-      if (toShowList.length >= 5) return; // prevent overflow
-      // Move from hide_list to show_list
-      const index = toHideList.indexOf(itemId);
-      if (index > -1) {
-        toHideList.splice(index, 1);
-        toShowList.push(itemId);
-      }
-    } else if (fromContainerId === "lanes") {
-      // Move from show_list to hide_list
-      const index = toShowList.indexOf(itemId);
-      if (index > -1) {
-        toShowList.splice(index, 1);
-        toHideList.push(itemId);
+    setKanbanSettingsData((prev) => {
+      const toShowList = [...(kanbanSettingsData?.lane?.show_list ?? [])];
+      const toHideList = [...(kanbanSettingsData?.lane?.hide_list ?? [])];
+
+      if (fromContainerId === "list") {
+        const index = toHideList.findIndex((i) => i.value == item.value);
+        if (index > -1) {
+          toHideList.splice(index, 1);
+          toShowList.push(item);
+        }
+      } else if (fromContainerId === "tabs") {
+        const index = toShowList.findIndex((i) => i.value == item.value);
+        if (index > -1) {
+          toShowList.splice(index, 1);
+          toHideList.push(item);
+        }
       }
-    }
-
-    setSettingsData((prev) => ({
-      ...prev,
-      quick_tab: {
-        ...prev?.quick_tab,
-        show_list: toShowList,
-        hide_list: toHideList,
-      },
-    }));
+      return {
+        ...prev,
+        lane: {
+          ...prev?.lane,
+          show_list: toShowList,
+          hide_list: toHideList,
+        },
+      };
+    });
   };
 
-  const enableDND = quickTabStates?.sorting === "custom" ? true : false;
+  console.log("kanban", kanbanSettingsData);
 
+  /* ===========================================================
+     RENDER
+     =========================================================== */
   return (
-    <Box
-      sx={{
-        display: "flex",
-        flexDirection: "column",
-        // gap: "0.5rem",
-        height: "100%",
-      }}
-    >
+    <Box sx={{ display: "flex", flexDirection: "column", height: "100%" }}>
       <Typography variant="caption" sx={TabsStyles.mainTabsHeader}>
-        *Quick filter settings will be reflected in vertical lanes
+        **Quick filter settings will be reflected in vertical lanes
       </Typography>
-      <Box>
-        <Grid sx={{ position: "relative" }} container>
-          <Grid size={12}>
-            <Box>
-              <Grid sx={TabsStyles.mainTabDropdown} size={6}>
-                <FormControl sx={TabsStyles.mainTabSelect} size="small">
-                  <Select
-                    value={quickTabStates?.attribute || ""}
-                    onChange={(e) =>
-                      setSettingsData((prev) => ({
-                        ...prev,
-                        quick_tab: {
-                          ...prev?.quick_tab,
-                          attribute: e.target.value,
-                        },
-                      }))
-                    }
-                    displayEmpty
-                    renderValue={(selected) => {
-                      if (!selected) {
-                        return <em>Select Attribute</em>;
-                      }
-                      return selected;
-                    }}
-                  >
-                    {LANE_SELECTS?.map((lane: any) => (
-                      <MenuItem key={lane?.key} value={lane?.value}>
-                        {lane?.value}
-                      </MenuItem>
-                    ))}
-                  </Select>
-                </FormControl>
-                <FormControl
-                  sx={TabsStyles.selectDropdownSeparator}
-                  size="small"
-                >
-                  <Select
-                    value={quickTabStates?.sorting || "asc"}
-                    onChange={(e) =>
-                      setSettingsData((prev) => ({
-                        ...prev,
-                        quick_tab: {
-                          ...prev?.quick_tab,
-                          sorting: e.target.value,
-                        },
-                      }))
-                    }
-                    displayEmpty
-                    renderValue={(selected) => {
-                      if (!selected) {
-                        return <em>Sort by</em>;
-                      }
-                      const option = sortingOptions.find(
-                        (opt) => opt.value === selected
-                      );
-                      return option?.label || selected;
-                    }}
-                  >
-                    {sortingOptions.map((option) => (
-                      <MenuItem key={option?.value} value={option?.value}>
-                        {option?.label}
-                      </MenuItem>
-                    ))}
-                  </Select>
-                </FormControl>
-              </Grid>
-            </Box>
+
+      <Grid sx={{ position: "relative" }} container>
+        {/* Attribute + Sort */}
+        <Grid size={12}>
+          <Grid sx={TabsStyles.mainTabDropdown} size={6}>
+            <FormControl sx={TabsStyles.mainTabSelect} size="small">
+              <Select
+                value={kanbanSettingsData?.lane?.attribute || ""}
+                onChange={(e) =>
+                  setKanbanSettingsData((prev) => ({
+                    ...prev,
+                    lane: {
+                      ...prev?.lane,
+                      attribute: e.target.value,
+                    },
+                  }))
+                }
+              >
+                {selectAttributeData
+                  ?.filter(
+                    (i) => i?.value !== kanbanSettingsData?.swim_lane?.attribute
+                  )
+                  ?.map((lane: any) => (
+                    <MenuItem key={lane?.key} value={lane?.value}>
+                      {lane?.label}
+                    </MenuItem>
+                  ))}
+              </Select>
+            </FormControl>
+
+            <FormControl sx={TabsStyles.selectDropdownSeparator} size="small">
+              <Select
+                value={displaySortingValue || ""}
+                disabled={isWorkflowAttribute}
+                onChange={(e) => {
+                  if (!isWorkflowAttribute) {
+                    const value = e.target.value as
+                      | "asc"
+                      | "dsc"
+                      | "count_asc"
+                      | "count_dsc"
+                      | "custom";
+
+                    setKanbanSettingsData((prev) => ({
+                      ...prev,
+                      lane: {
+                        ...prev?.lane,
+                        sorting: value,
+                      },
+                    }));
+                  }
+                }}
+              >
+                {isWorkflowAttribute && (
+                  <MenuItem value="workflow_sequence">
+                    Workflow Sequence
+                  </MenuItem>
+                )}
+
+                {!isWorkflowAttribute &&
+                  sortingOptions.map((option) => (
+                    <MenuItem key={option.value} value={option.value}>
+                      {option.label}
+                    </MenuItem>
+                  ))}
+              </Select>
+            </FormControl>
           </Grid>
-          <Grid>
-            {/* <Alert
-              severity="info"
-              sx={{
-                fontSize: "12px",
-                color: "#088AB2",
-              }}
-            >
-              Please select at least 1 and at most 5 values to display as lanes.
-            </Alert> */}
+        </Grid>
+
+        {/* LISTING + DRAG */}
+        <DndContext
+          sensors={sensors}
+          collisionDetection={closestCenter}
+          onDragEnd={handleDragEnd}
+        >
+          <Grid sx={{ mt: 2 }} container spacing={2} size={12}>
+            <ListingValues
+              buttonText="Show All"
+              onClick={handleShowAll}
+              headerText="List of Values"
+              filteredValues={filteredListValues}
+              searchTerm={searchTerm}
+              setSearchTerm={setSearchTerm}
+              containerId="list"
+              tabsApiDataLoading={tabsApiDataLoading}
+              onItemToggle={handleItemToggle}
+              enableDragAndDrop={enableDND}
+            />
+
+            <ListingValues
+              buttonText="Hide All"
+              onClick={handleHideAll}
+              headerText="View as Lanes"
+              filteredValues={showListValues}
+              containerId="tabs"
+              onItemToggle={handleItemToggle}
+              enableDragAndDrop={enableDND}
+            />
           </Grid>
-          <DndContext
-            sensors={sensors}
-            collisionDetection={closestCenter}
-            onDragEnd={handleDragEnd}
-          >
-            <Grid sx={{ mt: 2 }} container spacing={2} size={12}>
-              <ListingValues
-                buttonText="Show All"
-                onClick={handleShowAll}
-                headerText="List of Values"
-                filteredValues={filteredListValues}
-                searchTerm={searchTerm}
-                setSearchTerm={setSearchTerm}
-                containerId="list"
-                tabsApiDataLoading={tabsApiDataLoading}
-                onItemToggle={handleItemToggle}
-                enableDragAndDrop={enableDND}
-              />
-              <ListingValues
-                buttonText="Hide All"
-                onClick={handleHideAll}
-                headerText="View as Lanes"
-                filteredValues={showListValues}
-                containerId="lanes"
-                // tabsApiDataLoading={tabsApiDataLoading}
-                onItemToggle={handleItemToggle}
-                enableDragAndDrop={enableDND}
-                AlertComponenet={
-                  <InfoAlert
-                    message="Please select at least 1 and at most 5 values to display as
-                                lanes."
-                    width={"49%"}
-                    position="absolute"
-                    color="#088AB2"
-                    top={10}
-                    zIndex={1}
-                  />
-                }
-              />
-            </Grid>
-          </DndContext>
+        </DndContext>
+
+        {/* SUBLANE CHECKBOX */}
+        {kanbanSettingsData?.lane?.attribute === "stage_group" && (
           <Grid size={12}>
             <Box sx={TabsStyles.checkboxStyle}>
               <FormControlLabel
                 control={
                   <Checkbox
-                    checked={quickTabStates?.showSubLane || false}
-                    onChange={handleShowSubLaneChange}
+                    checked={kanbanSettingsData?.lane?.isSubLane || false}
+                    onChange={(e) =>
+                      setKanbanSettingsData((prev) => ({
+                        ...prev,
+                        lane: {
+                          ...prev?.lane,
+                          isSubLane: e.target.checked,
+                        },
+                      }))
+                    }
                     size="small"
-                    sx={{
-                      "&.Mui-checked": {
-                        color: "#7A5AF8",
-                      },
-                    }}
                   />
                 }
                 label="Show Sublane"
               />
-              <FormControlLabel
-                control={
-                  <Checkbox
-                    checked={quickTabStates?.showColorColumns || false}
-                    onChange={handleShowColorColumnsChange}
-                    size="small"
-                    sx={{
-                      "&.Mui-checked": {
-                        color: "#7A5AF8",
-                      },
-                    }}
-                  />
-                }
-                label="Show Color columns"
-              />
             </Box>
           </Grid>
-        </Grid>
-      </Box>
+        )}
+
+        {/* SUBLANE STAGE SELECT */}
+        {kanbanSettingsData?.lane?.attribute === "stage_group" &&
+          kanbanSettingsData?.lane?.isSubLane && (
+            <Grid size={12}>
+              <Grid sx={TabsStyles.mainTabDropdown} size={6}>
+                <FormControl sx={TabsStyles.mainTabSelect} size="small">
+                  <Select value="Stage">
+                    <MenuItem value="Stage">Stage</MenuItem>
+                  </Select>
+                </FormControl>
+              </Grid>
+            </Grid>
+          )}
+      </Grid>
     </Box>
   );
 };