Merge branch 'dev_environment' of gitlab.com:brandx/bxt-app into dev_environment

src/bin/BinYards.tsx

@@ -57,7 +57,7 @@ const parentTab = {
     marginTop: "4px",
     marginLeft: "4px",
     animationDuration: "10s",
-    background: "rgba(150, 150, 150, 0)",
+    // background: "rgba(150, 150, 150, 0)",
 
     borderRadius: "-5px",
     borderTopLeftRadius: "6px",
@@ -100,7 +100,7 @@ const useStyles = makeStyles((theme: Theme) => {
       minWidth: theme.spacing(8),
       left: 0,
       height: "100%",
-      background: theme.palette.background.paper
+      // background: theme.palette.background.paper
     },
     searchTabExpanded: {
       ...parentTab,
@@ -108,22 +108,25 @@ const useStyles = makeStyles((theme: Theme) => {
       minWidth: theme.spacing(30),
       left: 0,
       height: "100%",
-      background: theme.palette.background.paper
+      // background: theme.palette.background.paper
     },
     tab: {
       ...parentTab,
+      color: theme.palette.text.primary
     },
     smallTab: {
       ...parentTab,
       width: theme.spacing(8),
       minWidth: theme.spacing(8),
-      background: theme.palette.background.paper
+      // background: theme.palette.background.paper
     },
     selectedTab: {
       borderRadius: "-5px",
       borderTopLeftRadius: "6px",
       borderTopRightRadius: "6px",
       background: theme.palette.background.default,
+          // "linear-gradient(rgba(150, 150, 150, 0.3)," 
+          // + theme.palette.background.default + " 80%)"
       "&:hover": {
         background:
           "linear-gradient(rgba(150, 150, 150, 0.3)," + theme.palette.background.default + " 80%)"
@@ -139,11 +142,11 @@ const useStyles = makeStyles((theme: Theme) => {
       width: 36,
       height: 36,
       borderRadius: "18px",
-      background: "rgba(0,0,0,0)",
+      // background: "rgba(0,0,0,0)",
-      "&:hover": {
+      // "&:hover": {
-        background:
+      //   background:
-          "radial-gradient(closest-side, rgba(150, 150, 150, 0.5) 50%, rgba(150, 150, 150, 0.5))"
+      //     "radial-gradient(closest-side, rgba(150, 150, 150, 0.5) 50%, rgba(150, 150, 150, 0.5))"
-      }
+      // }
     },
     tabText: {
       position: "absolute",
@@ -678,6 +681,7 @@ export default function BinYard(props: Props) {
       <DraggableTabs
         variant="scrollable"
         scrollButtons="auto"
+        sx={{ background: theme.palette.background.paper }}
         value={tab}
         TabIndicatorProps={{ style: { background: "rgba(0,0,0,0)" } }}
         onChange={(_, newValue) => {
@@ -759,7 +763,6 @@ export default function BinYard(props: Props) {
             <Tab
               classes={{ root: classes.tab, selected: classes.selectedTab }}
               key={index}
-              draggable
               sx={{ 
                 textAlign: "left",
               }}
@@ -789,7 +792,6 @@ export default function BinYard(props: Props) {
             />
           </Tooltip>
         ))}
-        
         {/* {grainBags.length > 0 && (
           <Tab
             classes={{ root: classes.smallTab, selected: classes.selectedTab }}

src/common/DraggableTabs.tsx

@@ -1,5 +1,5 @@
-import { Tab, Tabs, TabsProps } from "@mui/material";
+import { Tabs, TabsProps } from "@mui/material";
-import React from "react";
+import React, { useEffect, useState, useRef } from "react";
 
 interface DraggableTabsProps extends TabsProps {
   children: React.ReactNode;
@@ -8,9 +8,19 @@ interface DraggableTabsProps extends TabsProps {
 }
 
 export default function DraggableTabs(props: DraggableTabsProps) {
-  const { startNode, endNode, children, ...tabsProps } = props
+  const { startNode, endNode, children, ...tabsProps } = props;
+
+  const initialChildren = React.Children.toArray(children);
+  const [tabOrder, setTabOrder] = useState<number[]>([]);
+  const [hoveredIndex, setHoveredIndex] = useState<number>(-1); // Track hovered tab
+  const tabRefs = useRef<(HTMLDivElement | null)[]>([]); // Refs for each tab
+
+  useEffect(() => {
+    const newOrder = initialChildren.map((_, index) => index);
+    setTabOrder(newOrder);
+    tabRefs.current = new Array(newOrder.length).fill(null); // Initialize refs
+  }, [initialChildren.length]);
 
-  // Helper function to flatten nodes and assign keys
   const flattenNodes = (nodes: React.ReactNode, prefix: string) =>
     React.Children.toArray(nodes).flatMap((node, nodeIndex) => {
       if (React.isValidElement(node) && (node.type as any) === React.Fragment) {
@@ -25,34 +35,61 @@ export default function DraggableTabs(props: DraggableTabsProps) {
         : node;
     });
 
-  // Process startTabs
   const startTabs = flattenNodes(startNode, "start");
-
-  // Process endTabs
   const endTabs = flattenNodes(endNode, "end");
 
-  const enhancedChildren = React.Children.map(children, (child) => {
+  const handleDragStart = (e: React.DragEvent<HTMLDivElement>, index: number) => {
-    if (React.isValidElement(child) && child.type === Tab) {
+    e.dataTransfer.setData("text/plain", index.toString());
-      if (child.props.draggable === undefined || child.props.draggable === true) {
+    e.dataTransfer.effectAllowed = "move";
-        return React.cloneElement(child, {
+  };
-          ...child.props,
+
-          draggable: true,
+  const handleDragOver = (e: React.DragEvent<HTMLDivElement>, index: number) => {
-          // onDragStart: (e: React.DragEvent<HTMLDivElement>) => handleDragStart(e, index),
+    e.preventDefault();
-          onDragOver: (e: React.DragEvent<HTMLDivElement>) => e.preventDefault(),
+    e.dataTransfer.dropEffect = "move";
-          // onDrop: (e: React.DragEvent<HTMLDivElement>) => handleDrop(e, index),
+    setHoveredIndex(index); // Update hovered index
-        });
+  };
+
+  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    const draggedIndex = Number(e.dataTransfer.getData("text/plain"));
+    const dropIndex = hoveredIndex; // Use the last hovered index
+
+    if (dropIndex === -1) {
+      console.log("Drop skipped: no valid drop target");
+      return;
     }
+
+    if (draggedIndex !== dropIndex && draggedIndex >= 0 && dropIndex >= 0 && draggedIndex < tabOrder.length && dropIndex < tabOrder.length) {
+      const newOrder = [...tabOrder];
+      const [draggedItem] = newOrder.splice(draggedIndex, 1);
+      newOrder.splice(dropIndex, 0, draggedItem);
+      setTabOrder(newOrder);
+    } else {
+      console.log("Drop skipped: invalid indices or same position");
+    }
+    setHoveredIndex(-1); // Reset hovered index
+  };
+
+  const enhancedChildren = React.Children.map(initialChildren, (child, originalIndex) => {
+    if (React.isValidElement(child)) {
+      const currentIndex = tabOrder.indexOf(originalIndex);
+      return (
+        <div
+          ref={(el) => (tabRefs.current[currentIndex] = el)} // Assign ref to each tab
+          draggable
+          onDragStart={(e) => handleDragStart(e, currentIndex)}
+          onDragOver={(e) => handleDragOver(e, currentIndex)}
+          onDrop={handleDrop} // Handle drop on individual tabs
+        >
+          {React.cloneElement(child)}
+        </div>
+      );
     }
-    // Return non-Tab children unchanged
     return child;
   }) || [];
 
-  // Combine all tabs into a single array
+  const orderedChildren = tabOrder.map((index) => enhancedChildren[index]);
-  const allTabs = [...startTabs, ...enhancedChildren, ...endTabs];
+  const allTabs = [...startTabs, ...orderedChildren, ...endTabs];
 
-  return (
+  return <Tabs {...tabsProps}>{allTabs}</Tabs>;
-    <Tabs {...tabsProps}>
-      {allTabs}
-    </Tabs>
-  )
 }

src/pages/Bins.tsx

@@ -18,6 +18,7 @@ import {
   ImageList,
   ImageListItem,
   InputLabel,
+  lighten,
   ListItemIcon,
   ListItemText,
   Menu,
@@ -83,6 +84,8 @@ import BinYards from "bin/BinYards";
 // import { useHistory } from "react-router";
 
 const useStyles = makeStyles((theme: Theme) => {
+  const themeType = getThemeType();
+  const accordionBg = themeType === "light" ? theme.palette.background.paper : darken(theme.palette.background.paper, 0.2)
   return ({
     "@keyframes pulsate": {
       to: {
@@ -116,7 +119,7 @@ const useStyles = makeStyles((theme: Theme) => {
       }
     },
     accordion: {
-      background: darken(theme.palette.background.paper, 0.4)
+      background: accordionBg
     }
   });
 });

src/theme/theme.ts

@@ -13,8 +13,8 @@ export function CreateTheme(themeType: "light" | "dark"): Theme {
 
 function generateBackgroundShades(themeType: "light" | "dark") {
   if(themeType==="light") return ({
-    default: "#f2f2f2",
+    default: "#e9e9e9",
-    paper: "#fafafa"
+    paper: "#fafafa",
   })
 
   return {
@@ -28,7 +28,7 @@ function options(themeType: "light" | "dark"): ThemeOptions {
   const signature = getSignatureColour();
   const accent = getSignatureAccentColour();
   const highlight = themeType === "light" ? "black" : "white";
-  const bg = generateBackgroundShades(themeType)
+  const bg = generateBackgroundShades(themeType);
   return {
     cssVariables: true,
     zIndex: {
@@ -285,5 +285,5 @@ function options(themeType: "light" | "dark"): ThemeOptions {
       //   },
       // },
     }
-  } as ThemeOptions;
+  } as unknown as ThemeOptions;
 }