fix ui

apps/edr-freight-web/backoffice/src/pages/OrgAdminDashboard.tsx

@@ -113,6 +113,8 @@ const OrgAdminDashboard = () => {
 
   // Define stats structure for the dashboard
   const getStats = () => [
+    // One brand hue, stepped depth per tile — identity comes from the icon
+    // and title, so the chips stay cohesive instead of competing hues.
     {
       id: "employees",
       title: t("dashboard.totalEmployees"),
@@ -126,7 +128,7 @@ const OrgAdminDashboard = () => {
           title: t("dashboard.totalUnits"),
           value: report?.unitsCount?.toLocaleString() || "0",
           icon: Building2,
-          color: "from-primary-500 to-primary-600",
+          color: "from-primary-600 to-primary-700",
         }]
       : []),
     {
@@ -134,12 +136,14 @@ const OrgAdminDashboard = () => {
       title: t("dashboard.totalPositions"),
       value: activeReport?.positionsCount?.toLocaleString() || "0",
       icon: FileText,
-      color: "from-purple-500 to-purple-600",
+      color: "from-primary-700 to-primary-800",
     },
   ];
 
   // Use report activities if available, otherwise use static data
 
+  // Brand gradient for all navigation actions; archive alone stays neutral
+  // gray to read as the "dormant" destination. Icons carry the identity.
   const quickActions = [
     {
       id: "user-mgmt",
@@ -147,7 +151,7 @@ const OrgAdminDashboard = () => {
       description: t("dashboard.userManagementDesc"),
       icon: Users,
       action: () => navigate("/user-management/user_management"),
-      color: "bg-gradient-to-r from-primary-500 to-primary-600",
+      color: "bg-gradient-to-r from-primary-500 to-primary-700",
     },
     {
       id: "content-mgmt",
@@ -155,7 +159,7 @@ const OrgAdminDashboard = () => {
       description: t("dashboard.contentManagementDesc"),
       icon: Files,
       action: () => navigate("/user-management/content-management"),
-      color: "bg-gradient-to-r from-purple-500 to-primary-600",
+      color: "bg-gradient-to-r from-primary-500 to-primary-700",
     },
     {
       id: "excel-upload",
@@ -163,7 +167,7 @@ const OrgAdminDashboard = () => {
       description: t("dashboard.excelUploaderDesc"),
       icon: Upload,
       action: () => navigate("/user-management/bulk-upload"),
-      color: "bg-gradient-to-r from-primary-500 to-primary-600",
+      color: "bg-gradient-to-r from-primary-500 to-primary-700",
     },
     {
       id: "position-settings",
@@ -171,7 +175,7 @@ const OrgAdminDashboard = () => {
       description: t("dashboard.positionSettingsDesc"),
       icon: FileText,
       action: () => navigate("/user-management/position-management"),
-      color: "bg-gradient-to-r from-orange-500 to-red-600",
+      color: "bg-gradient-to-r from-primary-500 to-primary-700",
     },
     {
       id: "archive-users",
@@ -187,7 +191,7 @@ const OrgAdminDashboard = () => {
       description: t("dashboard.webManagementDesc"),
       icon: FileText,
       action: () => navigate("/user-management/web-management"),
-      color: "bg-gradient-to-r from-teal-500 to-primary-600",
+      color: "bg-gradient-to-r from-primary-500 to-primary-700",
     },
   ];
 

apps/edr-freight-web/backoffice/src/user-management/AppMenuTabs.tsx

@@ -237,7 +237,9 @@ export const AppMenuTabs = () => {
     // Sticky (not fixed) so it stays in flow: content below never needs a
     // magic offset matching this bar's responsive height. top-16 keeps it
     // pinned just below the fixed 64px <Top> header while scrolling.
-    <div className="sticky top-16 z-30 bg-white dark:bg-gray-900 border-b dark:border-gray-800 overflow-hidden flex flex-col">
+    // shrink-0 is load-bearing: as a flex item with overflow-hidden this bar
+    // would otherwise be flex-squashed to zero height when the page overflows.
+    <div className="sticky top-16 z-30 shrink-0 bg-white dark:bg-gray-900 border-b dark:border-gray-800 overflow-hidden flex flex-col">
       {/* Mobile View - Two separate rows */}
       <div className="md:hidden flex flex-col pt-5 pb-3 px-4 space-y-3 mt-2">
         {/* Primary items row */}