Redesign login UI, add theme toggle, refactor user update

- Redesigned login page with two-panel layout and branding
- Added HexaDistro logo and theme toggle to sidebar/header
- Refactored user update: roles via update endpoint, removed assignRole API/controller
- Extended UpdateUserRequest for username, role, password changes
- UserService.UpdateAsync syncs changes with AuthHex, with rollback
- Stock balances client dedupes by itemId-locationId
- Middleware matcher excludes static assets from auth checks
- Improved localStorage clearing for user context
- Added lucide-react for icons
- Minor UI/code cleanups for consistency and UX

distribution_fe/components/layout/app-sidebar.tsx

@@ -81,11 +81,14 @@ export function AppSidebar() {
     <Sidebar collapsible="icon">
       <SidebarHeader>
         <div className="flex items-center gap-2 px-2 py-1">
-          <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground text-sm font-bold">
-            D
-          </div>
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src="https://hexdive.com/_next/image?url=%2F2.png&w=256&q=75"
+            alt="HexDive"
+            className="h-7 w-auto object-contain shrink-0"
+          />
           <span className="truncate font-semibold text-sidebar-foreground group-data-[collapsible=icon]:hidden">
-            Distribution
+            HexaDistro
           </span>
         </div>
       </SidebarHeader>
@@ -114,11 +117,15 @@ export function AppSidebar() {
           const visibleItems = group.items.filter((item) =>
             canSee(item, permissions),
           )
-          const groupActive = visibleItems.some(
-            (item) =>
+          const groupActive = visibleItems.some((item) => {
+            const hasSiblingUnder = visibleItems.some(
+              s => s.href !== item.href && s.href.startsWith(item.href + '/')
+            )
+            return (
               pathname === item.href ||
-              (item.href !== '/' && pathname.startsWith(item.href)),
-          )
+              (!hasSiblingUnder && item.href !== '/' && pathname.startsWith(item.href + '/'))
+            )
+          })
 
           return (
             <Collapsible
@@ -150,10 +157,14 @@ export function AppSidebar() {
                   <CollapsibleContent>
                     <SidebarMenuSub>
                       {visibleItems.map((item) => {
+                        const hasSiblingUnder = visibleItems.some(
+                          s => s.href !== item.href && s.href.startsWith(item.href + '/')
+                        )
                         const isActive =
                           pathname === item.href ||
-                          (item.href !== '/' &&
-                            pathname.startsWith(item.href))
+                          (!hasSiblingUnder &&
+                            item.href !== '/' &&
+                            pathname.startsWith(item.href + '/'))
                         return (
                           <Tooltip key={item.href}>
                             <SidebarMenuSubItem>

distribution_fe/components/layout/theme-toggle.tsx

@@ -0,0 +1,24 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useTheme } from 'next-themes'
+import { Sun, Moon } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+
+export function ThemeToggle() {
+  const { resolvedTheme, setTheme } = useTheme()
+  const [mounted, setMounted] = useState(false)
+  useEffect(() => setMounted(true), [])
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}
+      className="h-8 w-8 text-muted-foreground hover:text-foreground"
+      aria-label="Toggle theme"
+    >
+      {mounted && (resolvedTheme === 'dark' ? <Sun size={16} /> : <Moon size={16} />)}
+    </Button>
+  )
+}