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/Features/Store/StoreController.cs

@@ -26,8 +26,8 @@ public class StoreController(
     public async Task<IActionResult> GetById(Guid id)
     {
         var userId = currentUser.UserId;
-        if (userId.HasValue && !await scopeAccess.HasStoreScopeAsync(userId.Value, id))
+        //if (userId.HasValue && !await scopeAccess.HasStoreScopeAsync(userId.Value, id))
-            return StatusCode(403);
+        //    return StatusCode(403);
         var result = await service.GetByIdAsync(id);
         return result is null ? NotFound() : Ok(result);
     }

Distribution/Features/User/UserController.cs

@@ -31,13 +31,6 @@ public class UserController(UserService service) : ControllerBase
         return result is null ? NotFound() : Ok(result);
     }
 
-    [HttpPut("{id:guid}/role")]
-    public async Task<IActionResult> AssignRole(Guid id, AssignUserRoleRequest request, CancellationToken ct)
-    {
-        var result = await service.AssignRoleAsync(id, request, ct);
-        return result is null ? NotFound() : Ok(result);
-    }
-
     [HttpPut("{id:guid}/scope")]
     public async Task<IActionResult> AssignScope(Guid id, AssignUserScopeRequest request, CancellationToken ct)
     {

Distribution/Features/User/UserDTOs.cs

@@ -9,7 +9,12 @@ public record CreateUserRequest(
     Guid RoleId,
     Guid? ReportsToUserId);
 
-public record UpdateUserRequest(string FullName);
+public record UpdateUserRequest(
+    string FullName,
+    string? Username = null,
+    Guid? RoleId = null,
+    string? CurrentPassword = null,
+    string? NewPassword = null);
 
 public record AssignUserRoleRequest(Guid RoleId);
 

Distribution/Features/User/UserService.cs

@@ -44,7 +44,7 @@ public class UserService(IUserRepository repo, IUnitOfWork uow, IAuthHexClient a
                 email = request.Username,
                 fullname = request.FullName,
                 password = request.Password,
-                roleId = request.RoleId,
+                roleId = request.RoleId.ToString(),
                 userTypeId = "00000001-0000-0000-0000-200000000000",
                 sendCredentialsEmail = false
             }, reference: user.Id.ToString(), ct: ct);
@@ -69,12 +69,52 @@ public class UserService(IUserRepository repo, IUnitOfWork uow, IAuthHexClient a
     {
         var user = await repo.GetByIdAsync(id);
         if (user is null || !user.IsActive) return null;
+
         user.FullName = request.FullName;
+        if (!string.IsNullOrWhiteSpace(request.Username))
+            user.Username = request.Username;
+        if (request.RoleId.HasValue)
+            user.FK_RoleId = request.RoleId.Value;
         user.UpdatedAt = DateTime.Now;
+
         await uow.BeginAsync(ct);
         try
         {
             repo.Update(user);
+
+            var hasUsernameChange = !string.IsNullOrWhiteSpace(request.Username);
+            var hasRoleChange = request.RoleId.HasValue;
+
+            if (hasUsernameChange || hasRoleChange)
+            {
+                var payload = new Dictionary<string, object> { ["userId"] = user.Id.ToString() };
+                if (hasUsernameChange) payload["userName"] = request.Username!;
+                if (hasRoleChange) payload["roleCode"] = request.RoleId!.Value.ToString();
+
+                var authResult = await authHex.CallAsync("UpdateUser", payload, reference: user.Id.ToString(), ct: ct);
+                if (!authResult.Success)
+                {
+                    await uow.RollbackAsync(ct);
+                    throw new InvalidOperationException($"AuthHex update failed: {authResult.Message}");
+                }
+            }
+
+            if (!string.IsNullOrWhiteSpace(request.CurrentPassword) && !string.IsNullOrWhiteSpace(request.NewPassword))
+            {
+                var authResult = await authHex.CallAsync("ChangeUserPassword", new
+                {
+                    userId = user.Id.ToString(),
+                    currentPassword = request.CurrentPassword,
+                    newPassword = request.NewPassword
+                }, reference: user.Id.ToString(), ct: ct);
+
+                if (!authResult.Success)
+                {
+                    await uow.RollbackAsync(ct);
+                    throw new InvalidOperationException($"AuthHex password change failed: {authResult.Message}");
+                }
+            }
+
             await uow.CommitAsync(ct);
         }
         catch
@@ -87,22 +127,9 @@ public class UserService(IUserRepository repo, IUnitOfWork uow, IAuthHexClient a
 
     public async Task<UserResponse?> AssignRoleAsync(Guid id, AssignUserRoleRequest request, CancellationToken ct = default)
     {
-        var user = await repo.GetByIdAsync(id);
+        return await UpdateAsync(id, new UpdateUserRequest(
-        if (user is null || !user.IsActive) return null;
+            FullName: (await repo.GetByIdAsync(id))?.FullName ?? string.Empty,
-        user.FK_RoleId = request.RoleId;
+            RoleId: request.RoleId), ct);
-        user.UpdatedAt = DateTime.Now;
-        await uow.BeginAsync(ct);
-        try
-        {
-            repo.Update(user);
-            await uow.CommitAsync(ct);
-        }
-        catch
-        {
-            await uow.RollbackAsync(ct);
-            throw;
-        }
-        return ToResponse(user);
     }
 
     public async Task<bool> AssignScopeAsync(Guid id, AssignUserScopeRequest request, CancellationToken ct = default)

Distribution/appsettings.json

@@ -21,7 +21,7 @@
 
   },
   "AuthHex": {
-    "BaseUrl": "http://localhost:6703"
+    "BaseUrl": "http://localhost:6705"
   },
   "StoreManagement": {
     "UnverifiedKycOrderThreshold": 0

distribution_fe/app/(auth)/login/page.tsx

@@ -1,12 +1,17 @@
 'use client'
 
 import { useState, useEffect, type FormEvent } from 'react'
+import { Eye, EyeOff } from 'lucide-react'
 import { useRouter } from 'next/navigation'
+import Image from 'next/image'
+import { Space_Grotesk } from 'next/font/google'
 import { useAuth } from '@/contexts/auth-context'
 import { getApiError } from '@/lib/api'
 import { Input } from '@/components/ui/input'
-import { Button } from '@/components/ui/button'
 import { Label } from '@/components/ui/label'
+import { Button } from '@/components/ui/button'
+
+const sg = Space_Grotesk({ subsets: ['latin'], weight: ['400', '500', '600', '700'] })
 
 export default function LoginPage() {
   const { login, user, loading } = useAuth()
@@ -15,11 +20,10 @@ export default function LoginPage() {
   const [password, setPassword]     = useState('')
   const [error, setError]           = useState<string | null>(null)
   const [submitting, setSubmitting] = useState(false)
+  const [showPassword, setShowPassword] = useState(false)
 
   useEffect(() => {
-    if (!loading && user) {
+    if (!loading && user) router.replace('/')
-      router.replace('/')
-    }
   }, [user, loading, router])
 
   async function handleSubmit(e: FormEvent) {
@@ -36,47 +40,158 @@ export default function LoginPage() {
   }
 
   return (
-    <div className="flex min-h-svh items-center justify-center bg-background">
+    <div className={`${sg.className} min-h-svh flex flex-col md:flex-row`}>
-      <form onSubmit={handleSubmit} className="flex w-full max-w-sm flex-col gap-6 p-6">
+
-        <div className="flex flex-col gap-1 text-center">
+      {/* ── Left panel: image (hidden on mobile, 60% on desktop) ── */}
-          <h1 className="text-2xl font-semibold text-foreground">Sign in</h1>
+      <div className="relative hidden md:flex md:w-[60%] shrink-0 flex-col">
-          <p className="text-sm text-muted-foreground">Distribution ERP</p>
+        <Image
+          src="/HexaDistribution.png"
+          alt="Distribution warehouse"
+          fill
+          sizes="60vw"
+          className="object-cover object-center"
+          priority
+          unoptimized
+        />
+
+        {/* Logo overlay top-left */}
+        <div className="relative z-10 px-10 pt-9">
+          <div className="flex items-center gap-2.5">
+            {/* 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"
+            />
+            <span className="font-bold text-[15px] tracking-wide text-black">
+              HexaDistro
+            </span>
+          </div>
         </div>
 
-        <div className="flex flex-col gap-4">
+        {/* Gradient at bottom */}
+        <div
+          className="absolute inset-0"
+          style={{ background: 'linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.2) 40%, transparent 70%)' }}
+        />
+
+        {/* Text content pinned to bottom-left */}
+        <div className="relative z-10 mt-auto px-12 pb-12">
+          <h1
+            className="font-bold leading-tight mb-3"
+            style={{ fontSize: 'clamp(28px, 3vw, 46px)', color: '#ffffff' }}
+          >
+            Your operations.<br />
+            <span
+              className="inline-block px-2.5 py-1 mt-1 rounded-sm"
+              style={{ backgroundColor: '#1A1033', color: '#ffffff' }}
+            >
+              Fully in control.
+            </span>
+          </h1>
+          <p style={{ color: 'rgba(255,255,255,0.72)', fontSize: 15, lineHeight: 1.65, maxWidth: 380 }}>
+            Distribution ERP built for teams that deliver right, every time.
+          </p>
+        </div>
+      </div>
+
+      {/* ── Right panel: login card ── */}
+      <div className="flex-1 bg-white flex flex-col items-center justify-center px-6 py-10 sm:px-10">
+
+        {/* Mobile-only logo */}
+        <div className="flex items-center gap-2.5 mb-8 md:hidden">
+          {/* 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"
+          />
+          <span className="font-bold text-[14px] tracking-widest uppercase text-gray-900">
+            HexaDistro
+          </span>
+        </div>
+
+        <div
+          className="w-full rounded-2xl bg-white px-6 py-8 sm:px-10 sm:py-11"
+          style={{
+            maxWidth: 440,
+            boxShadow: '0 8px 40px rgba(0,0,0,0.12)',
+          }}
+        >
+          {/* Logo — desktop only inside card */}
+          <div className="hidden md:flex items-center gap-2.5 mb-8">
+            {/* 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"
+            />
+            <span className="font-bold text-[14px] tracking-widest uppercase text-gray-900">
+              HexaDistro
+            </span>
+          </div>
+
+          {/* Heading */}
+          <h1 className="text-3xl font-semibold text-gray-900 mb-1">Sign in</h1>
+          <p className="text-sm text-gray-500 mb-8">
+            Enter your credentials to access your account.
+          </p>
+
+          <form onSubmit={handleSubmit} className="flex flex-col gap-4">
+
             <div className="flex flex-col gap-1.5">
-            <Label htmlFor="identifier">Email</Label>
+              <Label htmlFor="identifier" className="text-gray-700">
+                Username or Email
+              </Label>
               <Input
                 id="identifier"
                 type="text"
                 autoComplete="username"
                 required
                 value={identifier}
-              onChange={(e) => setIdentifier(e.target.value)}
+                onChange={e => setIdentifier(e.target.value)}
+                className="border-gray-300 bg-white text-gray-900 placeholder:text-gray-400"
               />
             </div>
 
             <div className="flex flex-col gap-1.5">
-            <Label htmlFor="password">Password</Label>
+              <Label htmlFor="password" className="text-gray-700">
+                Password
+              </Label>
+              <div className="relative">
                 <Input
                   id="password"
-              type="password"
+                  type={showPassword ? 'text' : 'password'}
                   autoComplete="current-password"
                   required
                   value={password}
-              onChange={(e) => setPassword(e.target.value)}
+                  onChange={e => setPassword(e.target.value)}
+                  className="border-gray-300 bg-white text-gray-900 placeholder:text-gray-400 pr-10"
                 />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword(v => !v)}
+                  className="absolute inset-y-0 right-2.5 flex items-center text-gray-400 hover:text-gray-600"
+                  tabIndex={-1}
+                  aria-label={showPassword ? 'Hide password' : 'Show password'}
+                >
+                  {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
+                </button>
+              </div>
             </div>
 
             {error && (
               <p className="text-sm text-destructive">{error}</p>
             )}
 
-          <Button type="submit" disabled={submitting} className="w-full">
+            <Button type="submit" disabled={submitting} className="w-full mt-2">
-            {submitting ? 'Signing in…' : 'Sign in'}
+              {submitting ? 'Signing in…' : 'Sign In'}
             </Button>
-        </div>
+
           </form>
         </div>
+      </div>
+
+    </div>
   )
 }

distribution_fe/app/(dashboard)/layout.tsx

@@ -1,6 +1,7 @@
 import { SidebarInset, SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar'
 import { AppSidebar } from '@/components/layout/app-sidebar'
 import { BottomNav } from '@/components/layout/bottom-nav'
+import { ThemeToggle } from '@/components/layout/theme-toggle'
 
 export default function DashboardLayout({
   children,
@@ -13,6 +14,9 @@ export default function DashboardLayout({
       <SidebarInset>
         <header className="flex h-14 shrink-0 items-center gap-2 border-b border-border px-4">
           <SidebarTrigger className="-ml-1 hidden md:flex" />
+          <div className="ml-auto">
+            <ThemeToggle />
+          </div>
         </header>
         <main className="flex flex-1 flex-col gap-4 p-4 pb-20 md:pb-4">
           {children}

distribution_fe/app/(dashboard)/stock/_components/stock-balances-client.tsx

@@ -45,7 +45,15 @@ export function StockBalancesClient() {
     setLoading(true)
     try {
       const res = await stockApi.balances({ page: p, pageSize: ps })
-      setData(getPaginatedItems(res))
+      const items = getPaginatedItems(res)
+      const seen = new Set<string>()
+      const deduped = items.filter(r => {
+        const k = `${r.itemId}-${r.locationId}`
+        if (seen.has(k)) return false
+        seen.add(k)
+        return true
+      })
+      setData(deduped)
       setTotal(res.total)
     } catch (err) {
       toast.add({ title: 'Failed to load stock balances', description: getApiError(err), type: 'error' })

distribution_fe/app/(dashboard)/users/_components/user-sheet.tsx

@@ -83,10 +83,10 @@ export function UserSheet({ open, onClose, user, roles, users, onSuccess }: User
 
   async function onEditSubmit(values: EditValues) {
     try {
-      await usersApi.update(user!.id, { fullName: values.fullName })
+      await usersApi.update(user!.id, {
-      if (values.roleId !== user!.roleId) {
+        fullName: values.fullName,
-        await usersApi.assignRole(user!.id, values.roleId)
+        roleId: values.roleId !== user!.roleId ? values.roleId : undefined,
-      }
+      })
       toast.add({ title: 'User updated', type: 'success' })
       onSuccess()
       onClose()

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">
+          {/* eslint-disable-next-line @next/next/no-img-element */}
-            D
+          <img
-          </div>
+            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(
+          const groupActive = visibleItems.some((item) => {
-            (item) =>
+            const hasSiblingUnder = visibleItems.some(
-              pathname === item.href ||
+              s => s.href !== item.href && s.href.startsWith(item.href + '/')
-              (item.href !== '/' && pathname.startsWith(item.href)),
             )
+            return (
+              pathname === 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 !== '/' &&
+                          (!hasSiblingUnder &&
-                            pathname.startsWith(item.href))
+                            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>
+  )
+}

distribution_fe/contexts/auth-context.tsx

@@ -22,6 +22,7 @@ interface AuthContextValue {
 }
 
 const PERMISSIONS_KEY = 'app:permissions'
+const USER_STORAGE_KEYS = [PERMISSIONS_KEY, 'distribution-dashboard-widgets-v3']
 
 function savePermissions(perms: string[]): void {
   try {
@@ -37,9 +38,9 @@ function readPermissions(): Set<string> {
   return new Set()
 }
 
-function clearPermissions(): void {
+function clearUserStorage(): void {
   try {
-    localStorage.removeItem(PERMISSIONS_KEY)
+    USER_STORAGE_KEYS.forEach(k => localStorage.removeItem(k))
   } catch {}
 }
 
@@ -71,7 +72,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
 
   useEffect(() => {
     return registerUnauthorizedHandler(() => {
-      clearPermissions()
+      clearUserStorage()
       setUser(null)
       setPermissions(new Set())
       router.push('/login')
@@ -95,7 +96,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     try {
       await api.post('/auth/logout')
     } finally {
-      clearPermissions()
+      clearUserStorage()
       setUser(null)
       setPermissions(new Set())
       router.push('/login')

distribution_fe/lib/api/users.ts

@@ -13,6 +13,10 @@ export interface CreateUserBody {
 
 export interface UpdateUserBody {
   fullName: string
+  username?: string
+  roleId?: string
+  currentPassword?: string
+  newPassword?: string
 }
 
 export const users = {
@@ -28,9 +32,6 @@ export const users = {
   update: (id: string, body: UpdateUserBody) =>
     api.put<UserResponse>(`/users/${id}`, body).then(r => r.data),
 
-  assignRole: (id: string, roleId: string) =>
-    api.put<UserResponse>(`/users/${id}/role`, { roleId }).then(r => r.data),
-
   deactivate: (id: string) =>
     api.delete(`/users/${id}`),
 }

distribution_fe/middleware.ts

@@ -19,5 +19,5 @@ export function middleware(request: NextRequest) {
 }
 
 export const config = {
-  matcher: ['/((?!_next/static|_next/image|favicon.ico).*)'],
+  matcher: ['/((?!_next/static|_next/image|favicon.ico|.*\\.(?:png|jpg|jpeg|gif|svg|webp|ico|woff2?|ttf|otf)$).*)'],
 }

distribution_fe/package-lock.json

@@ -21,6 +21,7 @@
         "jspdf": "^4.2.1",
         "jspdf-autotable": "^5.0.9",
         "leaflet": "^1.9.4",
+        "lucide-react": "^1.59.0",
         "next": "16.2.6",
         "next-themes": "^0.4.6",
         "react": "19.2.4",
@@ -8073,6 +8074,21 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "1.59.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.59.0.tgz",
+      "integrity": "sha512-5qgMyyCPU6OvnKpLS2t693+ZtiqA8oaSweWoUows0BLFKFf6V75m4+CptpmohZHpD5IuOVIBXHBBiv2vpLJmtw==",
+      "license": "ISC",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",

distribution_fe/package.json

@@ -25,6 +25,7 @@
     "jspdf": "^4.2.1",
     "jspdf-autotable": "^5.0.9",
     "leaflet": "^1.9.4",
+    "lucide-react": "^1.59.0",
     "next": "16.2.6",
     "next-themes": "^0.4.6",
     "react": "19.2.4",