ui design for schedule

apps/edr-freight-web/backoffice/src/components/layout/FreightSidebar.tsx

@@ -1,15 +1,16 @@
 import {
   type MouseEvent,
+  type ReactNode,
   useCallback,
   useEffect,
   useMemo,
   useState,
 } from "react";
-import { ChevronDown, ChevronRight, Train } from "lucide-react";
-import { Stack, Group, Text, Box, UnstyledButton, NavLink } from "@mantine/core";
+import { ChevronDown, Train } from "lucide-react";
+import { Box, Stack, Text } from "@mantine/core";
 
 import type { SidebarItem, SidebarSection } from "./types";
-import { freightBrand } from "@/theme/freight-brand";
+import "./FreightSidebar.css";
 
 export interface FreightSidebarProps {
   sections: SidebarSection[];
@@ -105,7 +106,7 @@ const FreightSidebar = ({
     children: SidebarItem[],
     depth: number,
     parentKey: string,
-  ) =>
+  ): ReactNode =>
     children.map((child) => {
       const key = sidebarItemKey(child, parentKey);
       const isGroup = Boolean(child.children?.length) && !child.href;
@@ -115,87 +116,50 @@ const FreightSidebar = ({
         const groupActive = branchContainsActive(child.children!);
 
         return (
-          <Stack key={key} gap={4}>
-            <UnstyledButton
+          <div key={key}>
+            <button
+              type="button"
+              className="fsb-group"
+              data-active={groupActive}
               onClick={() => toggleExpanded(key)}
-              style={{
-                background: groupActive ? freightBrand.mutedBg : "transparent",
-                padding: "8px 12px",
-                borderRadius: "8px",
-                width: "100%",
-                cursor: "pointer",
-              }}
             >
-              <Group justify="space-between">
-                <Text size="xs" fw={600} style={{ color: groupActive ? freightBrand.primary : undefined }} c={groupActive ? undefined : "dimmed"} tt="uppercase">
-                  {child.label}
-                </Text>
-                <ChevronDown
-                  size={14}
-                  style={{
-                    transform: isOpen ? "rotate(0deg)" : "rotate(-90deg)",
-                    transition: "transform 0.2s",
-                    color: groupActive ? freightBrand.primary : "var(--mantine-color-gray-5)",
-                  }}
-                />
-              </Group>
-            </UnstyledButton>
+              <span className="fsb-group-label">{child.label}</span>
+              <ChevronDown
+                size={13}
+                className="fsb-chevron"
+                style={{
+                  transform: isOpen ? "rotate(0deg)" : "rotate(-90deg)",
+                  color: groupActive ? "#15803d" : undefined,
+                }}
+              />
+            </button>
             {isOpen && (
-              <Stack gap={2} style={{ paddingLeft: "12px", borderLeft: `2px solid ${freightBrand.mutedBorder}` }}>
+              <div className="fsb-branch">
                 {renderNavBranch(child.children!, depth + 1, key)}
-              </Stack>
+              </div>
             )}
-          </Stack>
+          </div>
         );
       }
 
       if (!child.href) return null;
 
-      const childHref = child.href.toLowerCase();
-      const childActiveHref = isHrefActive(childHref);
+      const childActive = isHrefActive(child.href);
 
       return (
-        <NavLink
+        <a
           key={key}
-          component="a"
           href={child.href}
-          onClick={(e) => navigateTo(e as any, child.href!)}
-          label={child.label}
-          active={childActiveHref}
-          color="green"
-          style={{
-            borderRadius: "8px",
-            cursor: "pointer",
-            fontSize: "14px",
-          }}
-          rightSection={<ChevronRight size={16} />}
-        />
+          className="fsb-child"
+          data-active={childActive}
+          onClick={(e) => navigateTo(e, child.href!)}
+        >
+          <span className="fsb-dot" />
+          <span className="fsb-item-label">{child.label}</span>
+        </a>
       );
     });
 
-  const renderIconWell = (icon: React.ReactNode, active: boolean) => {
-    if (!icon) return null;
-    return (
-      <Box
-        style={{
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          width: "30px",
-          height: "30px",
-          borderRadius: "8px",
-          flexShrink: 0,
-          background: active ? freightBrand.gradient : "var(--mantine-color-gray-1)",
-          color: active ? "white" : "var(--mantine-color-gray-6)",
-          boxShadow: active ? freightBrand.shadowSm : "none",
-          transition: "all 0.2s ease",
-        }}
-      >
-        {icon}
-      </Box>
-    );
-  };
-
   const renderTopLevelItem = (item: SidebarItem) => {
     if (!item.href) return null;
 
@@ -207,132 +171,92 @@ const FreightSidebar = ({
     const isCurrentItem = hasChildren
       ? activePath === itemHref
       : isHrefActive(itemHref);
-    const isSectionActive = childActive && !isCurrentItem;
-    const isActive = isCurrentItem || isSectionActive;
+    const isActive = isCurrentItem || childActive;
     const isOpen = expanded[item.href] ?? false;
-    const leafActive = isCurrentItem && !hasChildren;
 
     return (
-      <Stack key={item.href} gap={0}>
-        <NavLink
-          component="a"
+      <Box key={item.href}>
+        <a
           href={item.href}
-          onClick={(e) => navigateTo(e as any, item.href!)}
-          label={item.label}
-          leftSection={renderIconWell(item.icon, isActive)}
-          active={leafActive}
-          color="green"
-          variant="light"
-          style={{
-            borderRadius: "10px",
-            cursor: "pointer",
-            fontSize: "14px",
-            fontWeight: 500,
-            padding: "8px 10px",
-          }}
-          rightSection={
-            hasChildren ? (
-              <ChevronDown
-                size={16}
-                style={{
-                  transform: isOpen ? "rotate(0deg)" : "rotate(-90deg)",
-                  transition: "transform 0.2s",
-                }}
-                onClick={(e) => {
-                  e.preventDefault();
-                  toggleExpanded(item.href!);
-                }}
-              />
-            ) : (
-              <ChevronRight size={16} />
-            )
-          }
-        />
+          className="fsb-item"
+          data-active={isActive}
+          onClick={(e) => navigateTo(e, item.href!)}
+        >
+          {item.icon && <span className="fsb-icon">{item.icon}</span>}
+          <span className="fsb-item-label">{item.label}</span>
+          {hasChildren && (
+            <ChevronDown
+              size={16}
+              className="fsb-chevron"
+              style={{
+                transform: isOpen ? "rotate(0deg)" : "rotate(-90deg)",
+              }}
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                toggleExpanded(item.href!);
+              }}
+            />
+          )}
+        </a>
 
         {hasChildren && isOpen && (
-          <Stack gap={4} style={{ paddingLeft: "16px", borderLeft: `2px solid ${freightBrand.mutedBorder}` }}>
+          <div className="fsb-branch">
             {renderNavBranch(item.children!, 0, item.href)}
-          </Stack>
+          </div>
         )}
-      </Stack>
+      </Box>
     );
   };
 
   return (
-    <Box
-      component="aside"
-      style={{
-        height: "100%",
-        maxHeight: "100%",
-        width: "280px",
-        flexShrink: 0,
-        borderRadius: "12px",
-        border: "1px solid var(--mantine-color-gray-2)",
-        background: "white",
-        boxShadow: "0 1px 3px rgba(0, 0, 0, 0.05)",
-        display: "flex",
-        flexDirection: "column",
-        overflow: "hidden",
-      }}
-    >
-      <Group
-        gap={12}
-        px="lg"
-        py="md"
-        style={{
-          borderBottom: "1px solid var(--mantine-color-gray-2)",
-          flexShrink: 0,
-          height: "80px",
-        }}
-        wrap="nowrap"
-      >
-        <Box
-          style={{
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            width: "44px",
-            height: "44px",
-            borderRadius: "12px",
-            background: freightBrand.gradient,
-            boxShadow: freightBrand.shadow,
-            flexShrink: 0,
-          }}
-        >
-          <Train size={24} color="white" strokeWidth={2} />
-        </Box>
-        <Stack gap={0} style={{ minWidth: 0 }}>
-          <Text size="md" fw={700} style={{ letterSpacing: "-0.3px", lineHeight: 1.2 }}>
+    <Box component="aside" className="fsb-aside">
+      <div className="fsb-brand">
+        <div className="fsb-logo">
+          <Train size={23} color="white" strokeWidth={2.1} />
+        </div>
+        <Stack gap={1} style={{ minWidth: 0, position: "relative", zIndex: 1 }}>
+          <Text
+            size="md"
+            fw={700}
+            style={{ letterSpacing: "-0.3px", lineHeight: 1.2, color: "#0f172a" }}
+          >
             EDR Freight
           </Text>
-          <Text size="xs" c="dimmed" fw={500} style={{ letterSpacing: "0.3px" }}>
-            Backoffice
+          <Text
+            size="xs"
+            fw={600}
+            style={{ letterSpacing: "0.4px", color: "#94a3b8" }}
+          >
+            Backoffice Console
           </Text>
         </Stack>
-      </Group>
+      </div>
 
-      <Stack
-        component="nav"
-        gap="lg"
-        p="md"
-        style={{
-          flex: 1,
-          minHeight: 0,
-          overflowY: "auto",
-          overscrollBehavior: "contain",
-        }}
-      >
+      <nav className="fsb-nav">
         {sections.map((section) => (
-          <Stack key={section.title} gap={8}>
-            <Text size="xs" fw={600} c="dimmed" tt="uppercase" style={{ letterSpacing: "0.5px", paddingLeft: "8px" }}>
-              {section.title}
-            </Text>
-            <Stack gap={2}>
+          <div key={section.title}>
+            <div className="fsb-section-label">{section.title}</div>
+            <Stack gap={3}>
               {section.items.map((item) => renderTopLevelItem(item))}
             </Stack>
-          </Stack>
+          </div>
         ))}
-      </Stack>
+      </nav>
+
+      <div className="fsb-footer">
+        <div className="fsb-status">
+          <span className="fsb-pulse" />
+          <Stack gap={0} style={{ minWidth: 0 }}>
+            <Text size="xs" fw={600} style={{ color: "#166534", lineHeight: 1.3 }}>
+              All systems operational
+            </Text>
+            <Text size="10px" style={{ color: "#94a3b8", lineHeight: 1.3 }}>
+              EDR Platform · v1.0
+            </Text>
+          </Stack>
+        </div>
+      </div>
     </Box>
   );
 };