feat(dashboard): add transactions and users management pages with CRUD functionality

feat(auth): implement login page and authentication middleware
feat(sidebar): create sidebar component with user info and navigation links
feat(api): establish API client for interacting with backend services

apps/web/components/sidebar-footer.tsx

@@ -0,0 +1,48 @@
+'use client'
+
+import { useRouter } from 'next/navigation'
+import { ArrowRightFromSquare, PersonFill } from '@gravity-ui/icons'
+import { signOut, useSession } from '@/lib/auth-client'
+
+export default function SidebarFooter() {
+  const router = useRouter()
+  const { data: session } = useSession()
+
+  const handleSignOut = async () => {
+    await signOut({ fetchOptions: { credentials: 'include' } })
+    router.push('/login')
+    router.refresh()
+  }
+
+  return (
+    <div className="border-t border-border p-3">
+      {/* User info */}
+      {session?.user && (
+        <div className="mb-2 flex items-center gap-2.5 rounded-lg px-2 py-1.5">
+          <div className="flex size-7 shrink-0 items-center justify-center rounded-full bg-accent-soft">
+            <PersonFill className="size-3.5 text-accent" />
+          </div>
+          <div className="min-w-0 flex-1">
+            <p className="truncate text-sm font-medium leading-tight text-foreground">
+              {session.user.name || session.user.email}
+            </p>
+            <p className="truncate text-xs leading-tight text-muted capitalize">
+              {session.user.role ?? 'user'}
+            </p>
+          </div>
+        </div>
+      )}
+
+      <button
+        type="button"
+        className="flex w-full items-center gap-2.5 rounded-lg px-2 py-1.5 text-sm text-muted transition-colors hover:bg-surface-tertiary hover:text-foreground"
+        onClick={handleSignOut}
+      >
+        <ArrowRightFromSquare className="size-4 shrink-0" />
+        <span>退出登录</span>
+      </button>
+
+      <p className="mt-2 px-2 text-[11px] text-muted/60">OCPP 1.6-J • v0.1.0</p>
+    </div>
+  )
+}

apps/web/components/sidebar.tsx

@@ -0,0 +1,124 @@
+'use client'
+
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { useState } from 'react'
+import { CreditCard, ListCheck, Person, PlugConnection, Thunderbolt, Xmark, Bars } from '@gravity-ui/icons'
+import SidebarFooter from '@/components/sidebar-footer'
+
+const navItems = [
+  { href: '/dashboard', label: '概览', icon: Thunderbolt, exact: true },
+  { href: '/dashboard/charge-points', label: '充电桩', icon: PlugConnection },
+  { href: '/dashboard/transactions', label: '充电记录', icon: ListCheck },
+  { href: '/dashboard/id-tags', label: '储值卡', icon: CreditCard },
+  { href: '/dashboard/users', label: '用户管理', icon: Person },
+]
+
+function NavContent({ pathname, onNavigate }: { pathname: string; onNavigate?: () => void }) {
+  return (
+    <>
+      {/* Logo */}
+      <div className="flex h-14 shrink-0 items-center gap-2.5 border-b border-border px-5">
+        <div className="flex size-7 items-center justify-center rounded-lg bg-accent">
+          <Thunderbolt className="size-4 text-accent-foreground" />
+        </div>
+        <div>
+          <span className="text-sm font-semibold tracking-tight text-foreground">Helios EVCS</span>
+        </div>
+      </div>
+
+      {/* Navigation */}
+      <nav className="flex flex-1 flex-col gap-0.5 overflow-y-auto p-3">
+        <p className="mb-1 px-2 text-[11px] font-semibold uppercase tracking-widest text-muted">
+          管理
+        </p>
+        {navItems.map((item) => {
+          const isActive = item.exact
+            ? pathname === item.href
+            : pathname === item.href || pathname.startsWith(item.href + '/')
+          const Icon = item.icon
+          return (
+            <Link
+              key={item.href}
+              href={item.href}
+              onClick={onNavigate}
+              className={[
+                'flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
+                isActive
+                  ? 'bg-accent/10 text-accent'
+                  : 'text-muted hover:bg-surface-tertiary hover:text-foreground',
+              ].join(' ')}
+            >
+              <Icon className="size-4 shrink-0" />
+              <span>{item.label}</span>
+              {isActive && (
+                <span className="ml-auto h-1.5 w-1.5 rounded-full bg-accent" />
+              )}
+            </Link>
+          )
+        })}
+      </nav>
+
+      {/* Footer */}
+      <SidebarFooter />
+    </>
+  )
+}
+
+export default function Sidebar() {
+  const pathname = usePathname()
+  const [open, setOpen] = useState(false)
+
+  return (
+    <>
+      {/* Mobile top bar */}
+      <div className="fixed inset-x-0 top-0 z-30 flex h-14 items-center gap-3 border-b border-border bg-surface-secondary px-4 lg:hidden">
+        <button
+          type="button"
+          className="flex size-8 items-center justify-center rounded-lg text-muted transition-colors hover:bg-surface-tertiary hover:text-foreground"
+          onClick={() => setOpen(true)}
+          aria-label="打开菜单"
+        >
+          <Bars className="size-5" />
+        </button>
+        <div className="flex items-center gap-2">
+          <div className="flex size-6 items-center justify-center rounded-md bg-accent">
+            <Thunderbolt className="size-3.5 text-accent-foreground" />
+          </div>
+          <span className="text-sm font-semibold">Helios EVCS</span>
+        </div>
+      </div>
+
+      {/* Mobile drawer overlay */}
+      {open && (
+        <div
+          className="fixed inset-0 z-40 bg-black/50 lg:hidden"
+          onClick={() => setOpen(false)}
+        />
+      )}
+
+      {/* Mobile drawer */}
+      <aside
+        className={[
+          'fixed inset-y-0 left-0 z-50 flex w-64 flex-col border-r border-border bg-surface-secondary transition-transform duration-300 lg:hidden',
+          open ? 'translate-x-0' : '-translate-x-full',
+        ].join(' ')}
+      >
+        <button
+          type="button"
+          className="absolute right-3 top-3 flex size-8 items-center justify-center rounded-lg text-muted transition-colors hover:bg-surface-tertiary hover:text-foreground"
+          onClick={() => setOpen(false)}
+          aria-label="关闭菜单"
+        >
+          <Xmark className="size-4" />
+        </button>
+        <NavContent pathname={pathname} onNavigate={() => setOpen(false)} />
+      </aside>
+
+      {/* Desktop sidebar */}
+      <aside className="hidden w-60 shrink-0 flex-col border-r border-border bg-surface-secondary lg:flex">
+        <NavContent pathname={pathname} />
+      </aside>
+    </>
+  )
+}