feat: RBAC controlling

apps/csms/src/routes/charge-points.ts

@@ -2,14 +2,20 @@ import { Hono } from "hono";
 import { desc, eq, sql } from "drizzle-orm";
 import { useDrizzle } from "@/lib/db.js";
 import { chargePoint, connector } from "@/db/schema.js";
+import type { HonoEnv } from "@/types/hono.ts";
 
-const app = new Hono();
+const app = new Hono<HonoEnv>();
 
 /** GET /api/charge-points  —  list all charge points with connectors */
 app.get("/", async (c) => {
   const db = useDrizzle();
+  const isAdmin = c.get("user")?.role === "admin";
 
-  const cps = await db.select().from(chargePoint).orderBy(desc(chargePoint.createdAt));
+  const cps = await db
+    .select()
+    .from(chargePoint)
+    .where(isAdmin ? undefined : eq(chargePoint.registrationStatus, "Accepted"))
+    .orderBy(desc(chargePoint.createdAt));
 
   // Attach connectors (connectorId > 0 only, excludes the main-controller row)
   const connectors = cps.length
@@ -37,6 +43,7 @@ app.get("/", async (c) => {
 
 /** POST /api/charge-points  —  manually pre-register a charge point */
 app.post("/", async (c) => {
+  if (c.get("user")?.role !== "admin") return c.json({ error: "Forbidden" }, 403);
   const db = useDrizzle();
   const body = await c.req.json<{
     chargePointIdentifier: string;
@@ -88,6 +95,7 @@ app.get("/:id", async (c) => {
 
 /** PATCH /api/charge-points/:id  —  update charge point fields */
 app.patch("/:id", async (c) => {
+  if (c.get("user")?.role !== "admin") return c.json({ error: "Forbidden" }, 403);
   const db = useDrizzle();
   const id = c.req.param("id");
   const body = await c.req.json<{
@@ -134,6 +142,7 @@ app.patch("/:id", async (c) => {
 
 /** DELETE /api/charge-points/:id  —  delete a charge point (cascades to connectors, transactions, meter values) */
 app.delete("/:id", async (c) => {
+  if (c.get("user")?.role !== "admin") return c.json({ error: "Forbidden" }, 403);
   const db = useDrizzle();
   const id = c.req.param("id");
 

apps/csms/src/routes/id-tags.ts

@@ -4,8 +4,9 @@ import { useDrizzle } from "@/lib/db.js";
 import { idTag } from "@/db/schema.js";
 import { zValidator } from "@hono/zod-validator";
 import { z } from "zod";
+import type { HonoEnv } from "@/types/hono.ts";
 
-const app = new Hono();
+const app = new Hono<HonoEnv>();
 
 const idTagSchema = z.object({
   idTag: z.string().min(1).max(20),
@@ -18,9 +19,32 @@ const idTagSchema = z.object({
 
 const idTagUpdateSchema = idTagSchema.partial().omit({ idTag: true });
 
+/** Generate an 8-character OCPP-compatible idTag (0-9 + A-F uppercase) */
+function generateIdTag(): string {
+  const chars = "0123456789ABCDEF";
+  let result = "";
+  for (let i = 0; i < 8; i++) {
+    result += chars[Math.floor(Math.random() * chars.length)];
+  }
+  return result;
+}
+
 /** GET /api/id-tags */
 app.get("/", async (c) => {
   const db = useDrizzle();
+  const currentUser = c.get("user");
+  if (!currentUser) return c.json({ error: "Unauthorized" }, 401);
+
+  // Non-admin users only see their own cards
+  if (currentUser.role !== "admin") {
+    const tags = await db
+      .select()
+      .from(idTag)
+      .where(eq(idTag.userId, currentUser.id))
+      .orderBy(desc(idTag.createdAt));
+    return c.json(tags);
+  }
+
   const tags = await db.select().from(idTag).orderBy(desc(idTag.createdAt));
   return c.json(tags);
 });
@@ -34,31 +58,69 @@ app.get("/:id", async (c) => {
   return c.json(tag);
 });
 
-/** POST /api/id-tags */
+/** POST /api/id-tags  —  admin only, create arbitrary card */
-app.post("/", zValidator("json", idTagSchema), async (c) => {
+app.post("/", async (c) => {
+  if (c.get("user")?.role !== "admin") return c.json({ error: "Forbidden" }, 403);
   const db = useDrizzle();
-  const body = c.req.valid("json");
+  const body = await c.req.json().catch(() => {});
+  const parsed = idTagSchema.safeParse(body);
+  if (!parsed.success) return c.json({ error: parsed.error.issues }, 400);
   const [created] = await db
     .insert(idTag)
     .values({
-      ...body,
+      ...parsed.data,
-      expiryDate: body.expiryDate ? new Date(body.expiryDate) : null,
+      expiryDate: parsed.data.expiryDate ? new Date(parsed.data.expiryDate) : null,
     })
     .returning();
   return c.json(created, 201);
 });
 
-/** PATCH /api/id-tags/:id */
+/** POST /api/id-tags/claim  —  user claims a new card assigned to themselves */
-app.patch("/:id", zValidator("json", idTagUpdateSchema), async (c) => {
+app.post("/claim", async (c) => {
+  const currentUser = c.get("user");
+  if (!currentUser) return c.json({ error: "Unauthorized" }, 401);
+
+  const db = useDrizzle();
+
+  // Retry up to 5 times in case of collision
+  for (let attempt = 0; attempt < 5; attempt++) {
+    const newTag = generateIdTag();
+    const existing = await db
+      .select({ idTag: idTag.idTag })
+      .from(idTag)
+      .where(eq(idTag.idTag, newTag))
+      .limit(1);
+    if (existing.length > 0) continue;
+
+    const [created] = await db
+      .insert(idTag)
+      .values({
+        idTag: newTag,
+        status: "Accepted",
+        userId: currentUser.id,
+        balance: 0,
+      })
+      .returning();
+    return c.json(created, 201);
+  }
+
+  return c.json({ error: "Failed to generate unique idTag, please retry" }, 500);
+});
+
+/** PATCH /api/id-tags/:id  —  admin only */
+app.patch("/:id", async (c) => {
+  if (c.get("user")?.role !== "admin") return c.json({ error: "Forbidden" }, 403);
   const db = useDrizzle();
   const tagId = c.req.param("id");
-  const body = c.req.valid("json");
+  const body = await c.req.json().catch(() => {});
+  const parsed = idTagUpdateSchema.safeParse(body);
+  if (!parsed.success) return c.json({ error: parsed.error.issues }, 400);
 
   const [updated] = await db
     .update(idTag)
     .set({
-      ...body,
+      ...parsed.data,
-      expiryDate: body.expiryDate ? new Date(body.expiryDate) : undefined,
+      expiryDate: parsed.data.expiryDate ? new Date(parsed.data.expiryDate) : undefined,
       updatedAt: new Date(),
     })
     .where(eq(idTag.idTag, tagId))
@@ -68,8 +130,9 @@ app.patch("/:id", zValidator("json", idTagUpdateSchema), async (c) => {
   return c.json(updated);
 });
 
-/** DELETE /api/id-tags/:id */
+/** DELETE /api/id-tags/:id  —  admin only */
 app.delete("/:id", async (c) => {
+  if (c.get("user")?.role !== "admin") return c.json({ error: "Forbidden" }, 403);
   const db = useDrizzle();
   const tagId = c.req.param("id");
 

apps/csms/src/routes/stats.ts

@@ -1,44 +1,81 @@
 import { Hono } from "hono";
-import { isNull, sql } from "drizzle-orm";
+import { eq, isNull, sql } from "drizzle-orm";
 import { useDrizzle } from "@/lib/db.js";
 import { chargePoint, transaction, idTag } from "@/db/schema.js";
+import type { HonoEnv } from "@/types/hono.ts";
 
-const app = new Hono();
+const app = new Hono<HonoEnv>();
 
 app.get("/", async (c) => {
   const db = useDrizzle();
+  const currentUser = c.get("user");
+  const isAdmin = currentUser?.role === "admin";
 
-  const [totalChargePoints, onlineChargePoints, activeTransactions, totalIdTags, todayEnergy] =
+  if (isAdmin) {
-    await Promise.all([
+    const [totalChargePoints, onlineChargePoints, activeTransactions, totalIdTags, todayEnergy] =
-      // Total charge points
+      await Promise.all([
-      db.select({ count: sql<number>`count(*)::int` }).from(chargePoint),
+        db.select({ count: sql<number>`count(*)::int` }).from(chargePoint),
-      // Online charge points (received heartbeat in last 2×heartbeat interval, default 120s)
+        db
-      db
+          .select({ count: sql<number>`count(*)::int` })
-        .select({ count: sql<number>`count(*)::int` })
+          .from(chargePoint)
-        .from(chargePoint)
+          .where(sql`${chargePoint.lastHeartbeatAt} > now() - interval '120 seconds'`),
-        .where(sql`${chargePoint.lastHeartbeatAt} > now() - interval '120 seconds'`),
+        db
-      // Active (in-progress) transactions
+          .select({ count: sql<number>`count(*)::int` })
-      db
+          .from(transaction)
-        .select({ count: sql<number>`count(*)::int` })
+          .where(isNull(transaction.stopTimestamp)),
-        .from(transaction)
+        db.select({ count: sql<number>`count(*)::int` }).from(idTag),
-        .where(isNull(transaction.stopTimestamp)),
+        db
-      // Total id tags
+          .select({
-      db.select({ count: sql<number>`count(*)::int` }).from(idTag),
+            total: sql<number>`coalesce(sum(${transaction.stopMeterValue} - ${transaction.startMeterValue}), 0)::int`,
-      // Energy dispensed today (sum of stopMeterValue - startMeterValue for transactions ending today)
+          })
-      db
+          .from(transaction)
-        .select({
+          .where(sql`${transaction.stopTimestamp} >= date_trunc('day', now())`),
-          total: sql<number>`coalesce(sum(${transaction.stopMeterValue} - ${transaction.startMeterValue}), 0)::int`,
+      ]);
-        })
+
-        .from(transaction)
+    return c.json({
-        .where(sql`${transaction.stopTimestamp} >= date_trunc('day', now())`),
+      totalChargePoints: totalChargePoints[0].count,
-    ]);
+      onlineChargePoints: onlineChargePoints[0].count,
+      activeTransactions: activeTransactions[0].count,
+      totalIdTags: totalIdTags[0].count,
+      todayEnergyWh: todayEnergy[0].total,
+    });
+  }
+
+  // User-scoped stats
+  if (!currentUser) return c.json({ error: "Unauthorized" }, 401);
+
+  const userId = currentUser.id;
+
+  const [userIdTags, totalBalance, activeCount, totalTxCount] = await Promise.all([
+    // Cards belonging to this user
+    db
+      .select({ count: sql<number>`count(*)::int` })
+      .from(idTag)
+      .where(eq(idTag.userId, userId)),
+    // Sum of balances
+    db
+      .select({ total: sql<number>`coalesce(sum(${idTag.balance}), 0)::int` })
+      .from(idTag)
+      .where(eq(idTag.userId, userId)),
+    // Active transactions for user's cards
+    db
+      .select({ count: sql<number>`count(*)::int` })
+      .from(transaction)
+      .innerJoin(idTag, eq(transaction.idTag, idTag.idTag))
+      .where(sql`${isNull(transaction.stopTimestamp)} and ${idTag.userId} = ${userId}`),
+    // Total transactions for user's cards
+    db
+      .select({ count: sql<number>`count(*)::int` })
+      .from(transaction)
+      .innerJoin(idTag, eq(transaction.idTag, idTag.idTag))
+      .where(eq(idTag.userId, userId)),
+  ]);
 
   return c.json({
-    totalChargePoints: totalChargePoints[0].count,
+    totalIdTags: userIdTags[0].count,
-    onlineChargePoints: onlineChargePoints[0].count,
+    totalBalance: totalBalance[0].total,
-    activeTransactions: activeTransactions[0].count,
+    activeTransactions: activeCount[0].count,
-    totalIdTags: totalIdTags[0].count,
+    totalTransactions: totalTxCount[0].count,
-    todayEnergyWh: todayEnergy[0].total,
   });
 });
 

apps/csms/src/routes/transactions.ts

@@ -4,10 +4,11 @@ import { useDrizzle } from "@/lib/db.js";
 import { transaction, chargePoint, connector, idTag } from "@/db/schema.js";
 import { ocppConnections } from "@/ocpp/handler.js";
 import { OCPP_MESSAGE_TYPE } from "@/ocpp/types.js";
+import type { HonoEnv } from "@/types/hono.ts";
 
-const app = new Hono();
+const app = new Hono<HonoEnv>();
 
-/** GET /api/transactions?page=1&limit=20&status=active|completed */
+/** GET /api/transactions?page=1&limit=20&status=active|completed&chargePointId=... */
 app.get("/", async (c) => {
   const page = Math.max(1, Number(c.req.query("page") ?? 1));
   const limit = Math.min(100, Math.max(1, Number(c.req.query("limit") ?? 20)));
@@ -16,6 +17,8 @@ app.get("/", async (c) => {
   const offset = (page - 1) * limit;
 
   const db = useDrizzle();
+  const currentUser = c.get("user");
+  const isAdmin = currentUser?.role === "admin";
 
   const statusCondition =
     status === "active"
@@ -24,11 +27,15 @@ app.get("/", async (c) => {
         ? isNotNull(transaction.stopTimestamp)
         : undefined;
 
-  const whereClause = chargePointId
+  // For non-admin users, restrict to transactions matching their id-tags
-    ? statusCondition
+  const userCondition =
-      ? and(statusCondition, eq(transaction.chargePointId, chargePointId))
+    !isAdmin && currentUser
-      : eq(transaction.chargePointId, chargePointId)
+      ? sql`${transaction.idTag} in (select id_tag from id_tag where user_id = ${currentUser.id})`
-    : statusCondition;
+      : undefined;
+
+  const cpCondition = chargePointId ? eq(transaction.chargePointId, chargePointId) : undefined;
+
+  const whereClause = and(statusCondition, userCondition, cpCondition);
 
   const [{ total }] = await db
     .select({ total: sql<number>`count(*)::int` })
@@ -174,6 +181,7 @@ app.post("/:id/stop", async (c) => {
 
 /** DELETE /api/transactions/:id  —  delete a transaction record */
 app.delete("/:id", async (c) => {
+  if (c.get("user")?.role !== "admin") return c.json({ error: "Forbidden" }, 403);
   const db = useDrizzle();
   const id = Number(c.req.param("id"));
 

apps/web/app/dashboard/charge-points/[id]/page.tsx

@@ -17,6 +17,7 @@ import {
 } from "@heroui/react";
 import { ArrowLeft, Pencil, PlugConnection } from "@gravity-ui/icons";
 import { api, type ChargePointDetail, type PaginatedTransactions } from "@/lib/api";
+import { useSession } from "@/lib/auth-client";
 
 // ── Status maps ────────────────────────────────────────────────────────────
 
@@ -182,6 +183,9 @@ export default function ChargePointDetailPage({ params }: { params: Promise<{ id
     cp?.lastHeartbeatAt != null &&
     Date.now() - new Date(cp.lastHeartbeatAt).getTime() < (cp.heartbeatInterval ?? 60) * 3 * 1000;
 
+  const { data: sessionData } = useSession();
+  const isAdmin = sessionData?.user?.role === "admin";
+
   // ── Render: loading / not found ──────────────────────────────────────────
 
   if (loading) {
@@ -249,15 +253,18 @@ export default function ChargePointDetailPage({ params }: { params: Promise<{ id
             </p>
           )}
         </div>
-        <Button size="sm" variant="secondary" onPress={openEdit}>
+        {isAdmin && (
-          <Pencil className="size-4" />
+          <Button size="sm" variant="secondary" onPress={openEdit}>
-          编辑
+            <Pencil className="size-4" />
-        </Button>
+            编辑
+          </Button>
+        )}
       </div>
 
       {/* Info grid */}
       <div className="grid gap-4 md:grid-cols-2">
-        {/* Device info */}
+        {/* Device info — admin only */}
+        {isAdmin && (
         <div className="rounded-xl border border-border bg-surface p-4">
           <h2 className="mb-3 text-sm font-semibold text-foreground">设备信息</h2>
           <dl className="divide-y divide-border">
@@ -280,8 +287,10 @@ export default function ChargePointDetailPage({ params }: { params: Promise<{ id
             ))}
           </dl>
         </div>
+        )}
 
-        {/* Operation info */}
+        {/* Operation info — admin only */}
+        {isAdmin && (
         <div className="rounded-xl border border-border bg-surface p-4">
           <h2 className="mb-3 text-sm font-semibold text-foreground">运行配置</h2>
           <dl className="divide-y divide-border">
@@ -354,6 +363,38 @@ export default function ChargePointDetailPage({ params }: { params: Promise<{ id
             </div>
           </dl>
         </div>
+        )}
+
+        {/* Fee info — user only */}
+        {!isAdmin && (
+          <div className="rounded-xl border border-border bg-surface p-4">
+            <h2 className="mb-3 text-sm font-semibold text-foreground">电价信息</h2>
+            <dl className="divide-y divide-border">
+              <div className="flex items-center justify-between gap-4 py-2">
+                <dt className="shrink-0 text-sm text-muted">单位电价</dt>
+                <dd className="text-sm text-foreground">
+                  {cp.feePerKwh > 0 ? (
+                    <span>
+                      <span className="font-semibold">¥{(cp.feePerKwh / 100).toFixed(2)}</span>
+                      <span className="ml-1 text-xs text-muted">/kWh</span>
+                    </span>
+                  ) : (
+                    <span className="text-success font-medium">免费</span>
+                  )}
+                </dd>
+              </div>
+              <div className="flex items-center justify-between gap-4 py-2">
+                <dt className="shrink-0 text-sm text-muted">充电桥状态</dt>
+                <dd>
+                  <div className="flex items-center gap-1.5">
+                    <span className={`size-2 rounded-full ${isOnline ? "bg-success animate-pulse" : "bg-muted"}`} />
+                    <span className="text-sm text-foreground">{isOnline ? "在线" : "离线"}</span>
+                  </div>
+                </dd>
+              </div>
+            </dl>
+          </div>
+        )}
       </div>
 
       {/* Connectors */}
@@ -506,91 +547,93 @@ export default function ChargePointDetailPage({ params }: { params: Promise<{ id
       </div>
 
       {/* Edit modal */}
-      <Modal
+      {isAdmin && (
-        isOpen={editOpen}
+        <Modal
-        onOpenChange={(open) => {
+          isOpen={editOpen}
-          if (!editBusy) setEditOpen(open);
+          onOpenChange={(open) => {
-        }}
+            if (!editBusy) setEditOpen(open);
-      >
+          }}
-        <Modal.Backdrop>
+        >
-          <Modal.Container scroll="outside">
+          <Modal.Backdrop>
-            <Modal.Dialog className="sm:max-w-md">
+            <Modal.Container scroll="outside">
-              <Modal.CloseTrigger />
+              <Modal.Dialog className="sm:max-w-md">
-              <Modal.Header>
+                <Modal.CloseTrigger />
-                <Modal.Heading>编辑充电桩</Modal.Heading>
+                <Modal.Header>
-              </Modal.Header>
+                  <Modal.Heading>编辑充电桩</Modal.Heading>
-              <Modal.Body className="space-y-3">
+                </Modal.Header>
-                <div className="grid grid-cols-2 gap-3">
+                <Modal.Body className="space-y-3">
-                  <TextField fullWidth>
+                  <div className="grid grid-cols-2 gap-3">
-                    <Label className="text-sm font-medium">品牌</Label>
+                    <TextField fullWidth>
-                    <Input
+                      <Label className="text-sm font-medium">品牌</Label>
-                      placeholder="Unknown"
+                      <Input
-                      value={editForm.chargePointVendor}
+                        placeholder="Unknown"
-                      onChange={(e) =>
+                        value={editForm.chargePointVendor}
-                        setEditForm((f) => ({ ...f, chargePointVendor: e.target.value }))
+                        onChange={(e) =>
+                          setEditForm((f) => ({ ...f, chargePointVendor: e.target.value }))
+                        }
+                      />
+                    </TextField>
+                    <TextField fullWidth>
+                      <Label className="text-sm font-medium">型号</Label>
+                      <Input
+                        placeholder="Unknown"
+                        value={editForm.chargePointModel}
+                        onChange={(e) =>
+                          setEditForm((f) => ({ ...f, chargePointModel: e.target.value }))
+                        }
+                      />
+                    </TextField>
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm font-medium">注册状态</Label>
+                    <Select
+                      fullWidth
+                      selectedKey={editForm.registrationStatus}
+                      onSelectionChange={(key) =>
+                        setEditForm((f) => ({
+                          ...f,
+                          registrationStatus: String(key) as EditForm["registrationStatus"],
+                        }))
                       }
+                    >
+                      <Select.Trigger>
+                        <Select.Value />
+                        <Select.Indicator />
+                      </Select.Trigger>
+                      <Select.Popover>
+                        <ListBox>
+                          <ListBox.Item id="Accepted">Accepted</ListBox.Item>
+                          <ListBox.Item id="Pending">Pending</ListBox.Item>
+                          <ListBox.Item id="Rejected">Rejected</ListBox.Item>
+                        </ListBox>
+                      </Select.Popover>
+                    </Select>
+                  </div>
+                  <TextField fullWidth>
+                    <Label className="text-sm font-medium">电价（分/kWh）</Label>
+                    <Input
+                      type="number"
+                      min="0"
+                      step="1"
+                      placeholder="0"
+                      value={editForm.feePerKwh}
+                      onChange={(e) => setEditForm((f) => ({ ...f, feePerKwh: e.target.value }))}
                     />
                   </TextField>
-                  <TextField fullWidth>
+                </Modal.Body>
-                    <Label className="text-sm font-medium">型号</Label>
+                <Modal.Footer className="flex justify-end gap-2">
-                    <Input
+                  <Button variant="ghost" onPress={() => setEditOpen(false)}>
-                      placeholder="Unknown"
+                    取消
-                      value={editForm.chargePointModel}
+                  </Button>
-                      onChange={(e) =>
+                  <Button isDisabled={editBusy} onPress={handleEditSubmit}>
-                        setEditForm((f) => ({ ...f, chargePointModel: e.target.value }))
+                    {editBusy ? <Spinner size="sm" /> : "保存"}
-                      }
+                  </Button>
-                    />
+                </Modal.Footer>
-                  </TextField>
+              </Modal.Dialog>
-                </div>
+            </Modal.Container>
-                <div className="space-y-1.5">
+          </Modal.Backdrop>
-                  <Label className="text-sm font-medium">注册状态</Label>
+        </Modal>
-                  <Select
+      )}
-                    fullWidth
-                    selectedKey={editForm.registrationStatus}
-                    onSelectionChange={(key) =>
-                      setEditForm((f) => ({
-                        ...f,
-                        registrationStatus: String(key) as EditForm["registrationStatus"],
-                      }))
-                    }
-                  >
-                    <Select.Trigger>
-                      <Select.Value />
-                      <Select.Indicator />
-                    </Select.Trigger>
-                    <Select.Popover>
-                      <ListBox>
-                        <ListBox.Item id="Accepted">Accepted</ListBox.Item>
-                        <ListBox.Item id="Pending">Pending</ListBox.Item>
-                        <ListBox.Item id="Rejected">Rejected</ListBox.Item>
-                      </ListBox>
-                    </Select.Popover>
-                  </Select>
-                </div>
-                <TextField fullWidth>
-                  <Label className="text-sm font-medium">电价（分/kWh）</Label>
-                  <Input
-                    type="number"
-                    min="0"
-                    step="1"
-                    placeholder="0"
-                    value={editForm.feePerKwh}
-                    onChange={(e) => setEditForm((f) => ({ ...f, feePerKwh: e.target.value }))}
-                  />
-                </TextField>
-              </Modal.Body>
-              <Modal.Footer className="flex justify-end gap-2">
-                <Button variant="ghost" onPress={() => setEditOpen(false)}>
-                  取消
-                </Button>
-                <Button isDisabled={editBusy} onPress={handleEditSubmit}>
-                  {editBusy ? <Spinner size="sm" /> : "保存"}
-                </Button>
-              </Modal.Footer>
-            </Modal.Dialog>
-          </Modal.Container>
-        </Modal.Backdrop>
-      </Modal>
     </div>
   );
 }

apps/web/app/dashboard/charge-points/page.tsx

@@ -1,11 +1,22 @@
 "use client";
 
 import { useCallback, useEffect, useRef, useState } from "react";
-import { Button, Chip, Input, Label, ListBox, Modal, Select, Spinner, Table, TextField } from "@heroui/react";
+import {
+  Button,
+  Chip,
+  Input,
+  Label,
+  ListBox,
+  Modal,
+  Select,
+  Spinner,
+  Table,
+  TextField,
+} from "@heroui/react";
 import { Plus, Pencil, PlugConnection, TrashBin } from "@gravity-ui/icons";
 import Link from "next/link";
 import { api, type ChargePoint } from "@/lib/api";
-
+import { useSession } from "@/lib/auth-client";
 
 const statusLabelMap: Record<string, string> = {
   Available: "空闲中",
@@ -109,7 +120,9 @@ export default function ChargePointsPage() {
           feePerKwh: fee,
         });
         setChargePoints((prev) =>
-          prev.map((cp) => (cp.id === formTarget.id ? { ...updated, connectors: cp.connectors } : cp)),
+          prev.map((cp) =>
+            cp.id === formTarget.id ? { ...updated, connectors: cp.connectors } : cp,
+          ),
         );
       } else {
         // Create
@@ -142,6 +155,9 @@ export default function ChargePointsPage() {
 
   const isEdit = formTarget !== null;
 
+  const { data: sessionData } = useSession();
+  const isAdmin = sessionData?.user?.role === "admin";
+
   return (
     <div className="space-y-4">
       <div className="flex flex-wrap items-start justify-between gap-3">
@@ -149,114 +165,134 @@ export default function ChargePointsPage() {
           <h1 className="text-xl font-semibold text-foreground">充电桩管理</h1>
           <p className="mt-0.5 text-sm text-muted">共 {chargePoints.length} 台设备</p>
         </div>
-        <Button size="sm" variant="secondary" onPress={openCreate}>
+        {isAdmin && (
-          <Plus className="size-4" />
+          <Button size="sm" variant="secondary" onPress={openCreate}>
-          新建充电桩
+            <Plus className="size-4" />
-        </Button>
+            新建充电桩
+          </Button>
+        )}
       </div>
 
-      {/* Create / Edit modal */}
+      {/* Create / Edit modal — admin only */}
-      <Modal isOpen={formOpen} onOpenChange={(open) => { if (!formBusy) setFormOpen(open); }}>
+      {isAdmin && (
-        <Modal.Backdrop>
+        <>
-          <Modal.Container scroll="outside">
+          <Modal
-            <Modal.Dialog className="sm:max-w-md">
+            isOpen={formOpen}
-              <Modal.CloseTrigger />
+            onOpenChange={(open) => {
-              <Modal.Header>
+              if (!formBusy) setFormOpen(open);
-                <Modal.Heading>{isEdit ? "编辑充电桩" : "新建充电桩"}</Modal.Heading>
+            }}
-              </Modal.Header>
+          >
-              <Modal.Body className="space-y-3">
+            <Modal.Backdrop>
-                <TextField fullWidth isRequired isReadOnly={isEdit}>
+              <Modal.Container scroll="outside">
-                  <Label className="text-sm font-medium">标识符</Label>
+                <Modal.Dialog className="sm:max-w-md">
-                  <Input
+                  <Modal.CloseTrigger />
-                    placeholder="CP001"
+                  <Modal.Header>
-                    value={formData.chargePointIdentifier}
+                    <Modal.Heading>{isEdit ? "编辑充电桩" : "新建充电桩"}</Modal.Heading>
-                    onChange={(e) => setFormData((f) => ({ ...f, chargePointIdentifier: e.target.value }))}
+                  </Modal.Header>
-                  />
+                  <Modal.Body className="space-y-3">
-                </TextField>
+                    <TextField fullWidth isRequired isReadOnly={isEdit}>
-                <div className="grid grid-cols-2 gap-3">
+                      <Label className="text-sm font-medium">标识符</Label>
-                  <TextField fullWidth>
+                      <Input
-                    <Label className="text-sm font-medium">品牌</Label>
+                        placeholder="CP001"
-                    <Input
+                        value={formData.chargePointIdentifier}
-                      placeholder="ABB"
+                        onChange={(e) =>
-                      value={formData.chargePointVendor}
+                          setFormData((f) => ({ ...f, chargePointIdentifier: e.target.value }))
-                      onChange={(e) => setFormData((f) => ({ ...f, chargePointVendor: e.target.value }))}
+                        }
-                    />
+                      />
-                  </TextField>
+                    </TextField>
-                  <TextField fullWidth>
+                    <div className="grid grid-cols-2 gap-3">
-                    <Label className="text-sm font-medium">型号</Label>
+                      <TextField fullWidth>
-                    <Input
+                        <Label className="text-sm font-medium">品牌</Label>
-                      placeholder="Terra AC"
+                        <Input
-                      value={formData.chargePointModel}
+                          placeholder="ABB"
-                      onChange={(e) => setFormData((f) => ({ ...f, chargePointModel: e.target.value }))}
+                          value={formData.chargePointVendor}
-                    />
+                          onChange={(e) =>
-                  </TextField>
+                            setFormData((f) => ({ ...f, chargePointVendor: e.target.value }))
-                </div>
+                          }
-                <div className="space-y-1.5">
+                        />
-                  <Label className="text-sm font-medium">注册状态</Label>
+                      </TextField>
-                  <Select
+                      <TextField fullWidth>
-                    fullWidth
+                        <Label className="text-sm font-medium">型号</Label>
-                    selectedKey={formData.registrationStatus}
+                        <Input
-                    onSelectionChange={(key) =>
+                          placeholder="Terra AC"
-                      setFormData((f) => ({ ...f, registrationStatus: String(key) as FormData["registrationStatus"] }))
+                          value={formData.chargePointModel}
-                    }
+                          onChange={(e) =>
-                  >
+                            setFormData((f) => ({ ...f, chargePointModel: e.target.value }))
-                    <Select.Trigger>
+                          }
-                      <Select.Value />
+                        />
-                      <Select.Indicator />
+                      </TextField>
-                    </Select.Trigger>
+                    </div>
-                    <Select.Popover>
+                    <div className="space-y-1.5">
-                      <ListBox>
+                      <Label className="text-sm font-medium">注册状态</Label>
-                        <ListBox.Item id="Accepted">Accepted</ListBox.Item>
+                      <Select
-                        <ListBox.Item id="Pending">Pending</ListBox.Item>
+                        fullWidth
-                        <ListBox.Item id="Rejected">Rejected</ListBox.Item>
+                        selectedKey={formData.registrationStatus}
-                      </ListBox>
+                        onSelectionChange={(key) =>
-                    </Select.Popover>
+                          setFormData((f) => ({
-                  </Select>
+                            ...f,
-                </div>
+                            registrationStatus: String(key) as FormData["registrationStatus"],
-                <TextField fullWidth>
+                          }))
-                  <Label className="text-sm font-medium">电价（分/kWh）</Label>
+                        }
-                  <Input
+                      >
-                    type="number"
+                        <Select.Trigger>
-                    min="0"
+                          <Select.Value />
-                    step="1"
+                          <Select.Indicator />
-                    placeholder="0"
+                        </Select.Trigger>
-                    value={formData.feePerKwh}
+                        <Select.Popover>
-                    onChange={(e) => setFormData((f) => ({ ...f, feePerKwh: e.target.value }))}
+                          <ListBox>
-                  />
+                            <ListBox.Item id="Accepted">Accepted</ListBox.Item>
-                </TextField>
+                            <ListBox.Item id="Pending">Pending</ListBox.Item>
-                {!isEdit && (
+                            <ListBox.Item id="Rejected">Rejected</ListBox.Item>
-                  <p className="text-xs text-muted">
+                          </ListBox>
-                    手动创建的充电桩默认注册状态为 Pending，需手动改为 Accepted 后才可正常充电。
+                        </Select.Popover>
-                  </p>
+                      </Select>
-                )}
+                    </div>
-              </Modal.Body>
+                    <TextField fullWidth>
-              <Modal.Footer className="flex justify-end gap-2">
+                      <Label className="text-sm font-medium">电价（分/kWh）</Label>
-                <Button variant="ghost" onPress={() => setFormOpen(false)}>
+                      <Input
-                  取消
+                        type="number"
-                </Button>
+                        min="0"
-                <Button
+                        step="1"
-                  isDisabled={formBusy || !formData.chargePointIdentifier.trim()}
+                        placeholder="0"
-                  onPress={handleSubmit}
+                        value={formData.feePerKwh}
-                >
+                        onChange={(e) => setFormData((f) => ({ ...f, feePerKwh: e.target.value }))}
-                  {formBusy ? <Spinner size="sm" /> : isEdit ? "保存" : "创建"}
+                      />
-                </Button>
+                    </TextField>
-              </Modal.Footer>
+                    {!isEdit && (
-            </Modal.Dialog>
+                      <p className="text-xs text-muted">
-          </Modal.Container>
+                        手动创建的充电桩默认注册状态为 Pending，需手动改为 Accepted 后才可正常充电。
-        </Modal.Backdrop>
+                      </p>
-      </Modal>
+                    )}
+                  </Modal.Body>
+                  <Modal.Footer className="flex justify-end gap-2">
+                    <Button variant="ghost" onPress={() => setFormOpen(false)}>
+                      取消
+                    </Button>
+                    <Button
+                      isDisabled={formBusy || !formData.chargePointIdentifier.trim()}
+                      onPress={handleSubmit}
+                    >
+                      {formBusy ? <Spinner size="sm" /> : isEdit ? "保存" : "创建"}
+                    </Button>
+                  </Modal.Footer>
+                </Modal.Dialog>
+              </Modal.Container>
+            </Modal.Backdrop>
+          </Modal>
+        </>
+      )}
 
       <Table>
         <Table.ScrollContainer>
           <Table.Content aria-label="充电桩列表" className="min-w-200">
             <Table.Header>
               <Table.Column isRowHeader>标识符</Table.Column>
-              <Table.Column>品牌 / 型号</Table.Column>
+              {isAdmin && <Table.Column>品牌 / 型号</Table.Column>}
-              <Table.Column>注册状态</Table.Column>
+              {isAdmin && <Table.Column>注册状态</Table.Column>}
               <Table.Column>电价（分/kWh）</Table.Column>
               <Table.Column>最后心跳</Table.Column>
               <Table.Column>接口状态</Table.Column>
-              <Table.Column>{""}</Table.Column>
+              {isAdmin && <Table.Column>{""}</Table.Column>}
             </Table.Header>
             <Table.Body>
               {chargePoints.length === 0 && (
@@ -264,12 +300,12 @@ export default function ChargePointsPage() {
                   <Table.Cell>
                     <span className="text-muted text-sm">暂无设备</span>
                   </Table.Cell>
+                  {isAdmin && <Table.Cell>{""}</Table.Cell>}
+                  {isAdmin && <Table.Cell>{""}</Table.Cell>}
                   <Table.Cell>{""}</Table.Cell>
                   <Table.Cell>{""}</Table.Cell>
                   <Table.Cell>{""}</Table.Cell>
-                  <Table.Cell>{""}</Table.Cell>
+                  {isAdmin && <Table.Cell>{""}</Table.Cell>}
-                  <Table.Cell>{""}</Table.Cell>
-                  <Table.Cell>{""}</Table.Cell>
                 </Table.Row>
               )}
               {chargePoints.map((cp) => (
@@ -282,22 +318,26 @@ export default function ChargePointsPage() {
                       {cp.chargePointIdentifier}
                     </Link>
                   </Table.Cell>
-                  <Table.Cell>
+                  {isAdmin && (
-                    {cp.chargePointVendor && cp.chargePointModel ? (
+                    <Table.Cell>
-                      `${cp.chargePointVendor} / ${cp.chargePointModel}`
+                      {cp.chargePointVendor && cp.chargePointModel ? (
-                    ) : (
+                        `${cp.chargePointVendor} / ${cp.chargePointModel}`
-                      <span className="text-muted">—</span>
+                      ) : (
-                    )}
+                        <span className="text-muted">—</span>
-                  </Table.Cell>
+                      )}
-                  <Table.Cell>
+                    </Table.Cell>
-                    <Chip
+                  )}
-                      color={registrationColorMap[cp.registrationStatus] ?? "warning"}
+                  {isAdmin && (
-                      size="sm"
+                    <Table.Cell>
-                      variant="soft"
+                      <Chip
-                    >
+                        color={registrationColorMap[cp.registrationStatus] ?? "warning"}
-                      {cp.registrationStatus}
+                        size="sm"
-                    </Chip>
+                        variant="soft"
-                  </Table.Cell>
+                      >
+                        {cp.registrationStatus}
+                      </Chip>
+                    </Table.Cell>
+                  )}
                   <Table.Cell className="tabular-nums">
                     {cp.feePerKwh > 0 ? (
                       <span>
@@ -322,78 +362,87 @@ export default function ChargePointsPage() {
                       {cp.connectors.length === 0 ? (
                         <span className="text-muted text-sm">—</span>
                       ) : (
-                        [...cp.connectors].sort((a, b) => a.connectorId - b.connectorId).map((conn) => (
+                        [...cp.connectors]
-                          <div
+                          .sort((a, b) => a.connectorId - b.connectorId)
-                            key={conn.id}
+                          .map((conn) => (
-                            className="flex items-center gap-1.5 rounded-lg border border-border bg-surface-secondary px-2 py-1"
+                            <div
-                          >
+                              key={conn.id}
-                            <PlugConnection className="size-3 shrink-0 text-muted" />
+                              className="flex items-center gap-1.5 rounded-lg border border-border bg-surface-secondary px-2 py-1"
-                            <span className="text-xs font-medium tabular-nums text-muted">
+                            >
-                              #{conn.connectorId}
+                              <PlugConnection className="size-3 shrink-0 text-muted" />
-                            </span>
+                              <span className="text-xs font-medium tabular-nums text-muted">
-                            <span className="h-3 w-px bg-border" />
+                                #{conn.connectorId}
-                            <span
+                              </span>
-                              className={`size-1.5 shrink-0 rounded-full ${
+                              <span className="h-3 w-px bg-border" />
-                                statusDotClass[conn.status] ?? "bg-warning"
+                              <span
-                              }`}
+                                className={`size-1.5 shrink-0 rounded-full ${
-                            />
+                                  statusDotClass[conn.status] ?? "bg-warning"
-                            <span className="text-xs text-foreground text-nowrap">
+                                }`}
-                              {statusLabelMap[conn.status] ?? conn.status}
+                              />
-                            </span>
+                              <span className="text-xs text-foreground text-nowrap">
-                          </div>
+                                {statusLabelMap[conn.status] ?? conn.status}
-                        ))
+                              </span>
+                            </div>
+                          ))
                       )}
                     </div>
                   </Table.Cell>
-                  <Table.Cell>
+                  {isAdmin && (
-                    <div className="flex items-center gap-1">
+                    <Table.Cell>
-                      <Button isIconOnly size="sm" variant="tertiary" onPress={() => openEdit(cp)}>
+                      <div className="flex items-center gap-1">
-                        <Pencil className="size-4" />
-                      </Button>
-                      <Modal>
                         <Button
                           isIconOnly
                           size="sm"
-                          variant="danger-soft"
+                          variant="tertiary"
-                          onPress={() => setDeleteTarget(cp)}
+                          onPress={() => openEdit(cp)}
                         >
-                          <TrashBin className="size-4" />
+                          <Pencil className="size-4" />
                         </Button>
-                        <Modal.Backdrop>
+                        <Modal>
-                          <Modal.Container scroll="outside">
+                          <Button
-                            <Modal.Dialog className="sm:max-w-96">
+                            isIconOnly
-                              <Modal.CloseTrigger />
+                            size="sm"
-                              <Modal.Header>
+                            variant="danger-soft"
-                                <Modal.Heading>确认删除充电桩</Modal.Heading>
+                            onPress={() => setDeleteTarget(cp)}
-                              </Modal.Header>
+                          >
-                              <Modal.Body>
+                            <TrashBin className="size-4" />
-                                <p className="text-sm text-muted">
+                          </Button>
-                                  将删除充电桩{" "}
+                          <Modal.Backdrop>
-                                  <span className="font-mono font-medium text-foreground">
+                            <Modal.Container scroll="outside">
-                                    {cp.chargePointIdentifier}
+                              <Modal.Dialog className="sm:max-w-96">
-                                  </span>
+                                <Modal.CloseTrigger />
-                                  及其所有连接器和充电记录，此操作不可恢复。
+                                <Modal.Header>
-                                </p>
+                                  <Modal.Heading>确认删除充电桩</Modal.Heading>
-                              </Modal.Body>
+                                </Modal.Header>
-                              <Modal.Footer className="flex justify-end gap-2">
+                                <Modal.Body>
-                                <Button slot="close" variant="ghost">
+                                  <p className="text-sm text-muted">
-                                  取消
+                                    将删除充电桩{" "}
-                                </Button>
+                                    <span className="font-mono font-medium text-foreground">
-                                <Button
+                                      {cp.chargePointIdentifier}
-                                  slot="close"
+                                    </span>
-                                  variant="danger"
+                                    及其所有连接器和充电记录，此操作不可恢复。
-                                  isDisabled={deleting}
+                                  </p>
-                                  onPress={handleDelete}
+                                </Modal.Body>
-                                >
+                                <Modal.Footer className="flex justify-end gap-2">
-                                  {deleting ? <Spinner size="sm" /> : "确认删除"}
+                                  <Button slot="close" variant="ghost">
-                                </Button>
+                                    取消
-                              </Modal.Footer>
+                                  </Button>
-                            </Modal.Dialog>
+                                  <Button
-                          </Modal.Container>
+                                    slot="close"
-                        </Modal.Backdrop>
+                                    variant="danger"
-                      </Modal>
+                                    isDisabled={deleting}
-                    </div>
+                                    onPress={handleDelete}
-                  </Table.Cell>
+                                  >
+                                    {deleting ? <Spinner size="sm" /> : "确认删除"}
+                                  </Button>
+                                </Modal.Footer>
+                              </Modal.Dialog>
+                            </Modal.Container>
+                          </Modal.Backdrop>
+                        </Modal>
+                      </div>
+                    </Table.Cell>
+                  )}
                 </Table.Row>
               ))}
             </Table.Body>
@@ -403,4 +452,3 @@ export default function ChargePointsPage() {
     </div>
   );
 }
-

apps/web/app/dashboard/id-tags/page.tsx

@@ -23,6 +23,7 @@ import {
 import { parseDate } from "@internationalized/date";
 import { Pencil, Plus, TrashBin } from "@gravity-ui/icons";
 import { api, type IdTag, type UserRow } from "@/lib/api";
+import { useSession } from "@/lib/auth-client";
 
 const statusColorMap: Record<string, "success" | "danger" | "warning"> = {
   Accepted: "success",
@@ -245,6 +246,8 @@ function TagFormBody({
 }
 
 export default function IdTagsPage() {
+  const { data: sessionData } = useSession();
+  const isAdmin = sessionData?.user?.role === "admin";
   const [tags, setTags] = useState<IdTag[]>([]);
   const [users, setUsers] = useState<UserRow[]>([]);
   const [loading, setLoading] = useState(true);
@@ -252,6 +255,17 @@ export default function IdTagsPage() {
   const [form, setForm] = useState<FormState>(emptyForm);
   const [saving, setSaving] = useState(false);
   const [deletingTag, setDeletingTag] = useState<string | null>(null);
+  const [claiming, setClaiming] = useState(false);
+
+  const handleClaim = async () => {
+    setClaiming(true);
+    try {
+      await api.idTags.claim();
+      await load();
+    } finally {
+      setClaiming(false);
+    }
+  };
 
   const load = async () => {
     setLoading(true);
@@ -332,11 +346,12 @@ export default function IdTagsPage() {
           <h1 className="text-xl font-semibold text-foreground">储值卡管理</h1>
           <p className="mt-0.5 text-sm text-muted">共 {tags.length} 张</p>
         </div>
-        <Modal>
+        {isAdmin ? (
-          <Button size="sm" variant="secondary" onPress={openCreate}>
+          <Modal>
-            <Plus className="size-4" />
+            <Button size="sm" variant="secondary" onPress={openCreate}>
-            新增储值卡
+              <Plus className="size-4" />
-          </Button>
+              新增储值卡
+            </Button>
           <Modal.Backdrop>
             <Modal.Container scroll="outside">
               <Modal.Dialog className="sm:max-w-105">
@@ -359,6 +374,12 @@ export default function IdTagsPage() {
             </Modal.Container>
           </Modal.Backdrop>
         </Modal>
+        ) : (
+          <Button size="sm" variant="secondary" isDisabled={claiming} onPress={handleClaim}>
+            <Plus className="size-4" />
+            {claiming ? <Spinner size="sm" /> : "申领储值卡"}
+          </Button>
+        )}
       </div>
 
       <Table>
@@ -368,11 +389,11 @@ export default function IdTagsPage() {
               <Table.Column isRowHeader>卡号</Table.Column>
               <Table.Column>状态</Table.Column>
               <Table.Column>余额</Table.Column>
-              <Table.Column>关联用户</Table.Column>
+              {isAdmin && <Table.Column>关联用户</Table.Column>}
               <Table.Column>有效期</Table.Column>
               <Table.Column>父卡号</Table.Column>
               <Table.Column>创建时间</Table.Column>
-              <Table.Column className="text-end">操作</Table.Column>
+              {isAdmin && <Table.Column className="text-end">操作</Table.Column>}
             </Table.Header>
             <Table.Body
               renderEmptyState={() => (
@@ -396,6 +417,7 @@ export default function IdTagsPage() {
                       </Chip>
                     </Table.Cell>
                     <Table.Cell className="font-mono">¥{fenToYuan(tag.balance)}</Table.Cell>
+                    {isAdmin && (
                     <Table.Cell className="text-sm">
                       {owner ? (
                         <span title={owner.email}>
@@ -405,6 +427,7 @@ export default function IdTagsPage() {
                         <span className="text-muted">—</span>
                       )}
                     </Table.Cell>
+                    )}
                     <Table.Cell>
                       {tag.expiryDate ? (
                         new Date(tag.expiryDate).toLocaleDateString("zh-CN")
@@ -418,6 +441,7 @@ export default function IdTagsPage() {
                     <Table.Cell className="text-sm">
                       {new Date(tag.createdAt).toLocaleString("zh-CN")}
                     </Table.Cell>
+                    {isAdmin && (
                     <Table.Cell>
                       <div className="flex justify-end gap-1">
                         {/* Edit button */}
@@ -506,6 +530,7 @@ export default function IdTagsPage() {
                         </Modal>
                       </div>
                     </Table.Cell>
+                    )}
                   </Table.Row>
                 );
               })}

apps/web/app/dashboard/page.tsx

@@ -1,8 +1,10 @@
-import { Card } from "@heroui/react";
+"use client";
-import { Thunderbolt, PlugConnection, CreditCard, ChartColumn } from "@gravity-ui/icons";
-import { api } from "@/lib/api";
 
-export const dynamic = "force-dynamic";
+import { useEffect, useState } from "react";
+import { Card } from "@heroui/react";
+import { Thunderbolt, PlugConnection, CreditCard, ChartColumn, TagDollar } from "@gravity-ui/icons";
+import { useSession } from "@/lib/auth-client";
+import { api, type Stats, type UserStats } from "@/lib/api";
 
 type CardColor = "accent" | "success" | "warning" | "default";
 
@@ -55,42 +57,134 @@ function StatCard({
   );
 }
 
-export default async function DashboardPage() {
+export default function DashboardPage() {
-  const stats = await api.stats.get().catch(() => null);
+  const { data: sessionData, isPending } = useSession();
+  const isAdmin = sessionData?.user?.role === "admin";
 
-  const todayKwh = stats ? (stats.todayEnergyWh / 1000).toFixed(1) : "—";
+  const [adminStats, setAdminStats] = useState<Stats | null>(null);
-  const offlineCount = (stats?.totalChargePoints ?? 0) - (stats?.onlineChargePoints ?? 0);
+  const [userStats, setUserStats] = useState<UserStats | null>(null);
+
+  useEffect(() => {
+    if (isPending) return;
+    api.stats
+      .get()
+      .then((data) => {
+        if ("todayEnergyWh" in data) {
+          setAdminStats(data);
+          return;
+        }
+        setUserStats(data);
+      })
+      .catch(() => {});
+  }, [isPending, isAdmin]);
+
+  if (isPending) {
+    return (
+      <div className="space-y-6">
+        <div>
+          <h1 className="text-xl font-semibold text-foreground">概览</h1>
+          <p className="mt-0.5 text-sm text-muted">加载中…</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (isAdmin) {
+    const stats = adminStats;
+    const todayKwh = stats ? (stats.todayEnergyWh / 1000).toFixed(1) : "—";
+    const offlineCount = (stats?.totalChargePoints ?? 0) - (stats?.onlineChargePoints ?? 0);
+
+    return (
+      <div className="space-y-6">
+        <div>
+          <h1 className="text-xl font-semibold text-foreground">概览</h1>
+          <p className="mt-0.5 text-sm text-muted">实时运营状态</p>
+        </div>
+
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-5">
+          <StatCard
+            title="充电桩总数"
+            value={stats?.totalChargePoints ?? "—"}
+            icon={PlugConnection}
+            color="accent"
+            footer={
+              <>
+                <StatusDot color="success" />
+                <span className="font-medium text-success">
+                  {stats?.onlineChargePoints ?? 0} 在线
+                </span>
+                <span className="text-border">·</span>
+                <span>{offlineCount} 离线</span>
+              </>
+            }
+          />
+          <StatCard
+            title="在线充电桩"
+            value={stats?.onlineChargePoints ?? "—"}
+            icon={PlugConnection}
+            color="success"
+            footer={<span>最近 2 分钟有心跳</span>}
+          />
+          <StatCard
+            title="进行中充电"
+            value={stats?.activeTransactions ?? "—"}
+            icon={Thunderbolt}
+            color={stats?.activeTransactions ? "warning" : "default"}
+            footer={
+              <>
+                <StatusDot color={stats?.activeTransactions ? "success" : "muted"} />
+                <span className={stats?.activeTransactions ? "font-medium text-success" : ""}>
+                  {stats?.activeTransactions ? "活跃中" : "当前空闲"}
+                </span>
+              </>
+            }
+          />
+          <StatCard
+            title="储值卡总数"
+            value={stats?.totalIdTags ?? "—"}
+            icon={CreditCard}
+            color="default"
+            footer={<span>已注册卡片总量</span>}
+          />
+          <StatCard
+            title="今日充电量"
+            value={`${todayKwh} kWh`}
+            icon={ChartColumn}
+            color="accent"
+            footer={<span>当日 00:00 起累计</span>}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  // User view
+  const stats = userStats;
+  const totalYuan = stats ? (stats.totalBalance / 100).toFixed(2) : "—";
 
   return (
     <div className="space-y-6">
       <div>
         <h1 className="text-xl font-semibold text-foreground">概览</h1>
-        <p className="mt-0.5 text-sm text-muted">实时运营状态</p>
+        <p className="mt-0.5 text-sm text-muted">
+          {sessionData?.user?.name ?? sessionData?.user?.email} 的账户概览
+        </p>
       </div>
 
-      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-5">
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
         <StatCard
-          title="充电桩总数"
+          title="我的储值卡"
-          value={stats?.totalChargePoints ?? "—"}
+          value={stats?.totalIdTags ?? "—"}
-          icon={PlugConnection}
+          icon={CreditCard}
           color="accent"
-          footer={
+          footer={<span>已绑定的储值卡数量</span>}
-            <>
-              <StatusDot color="success" />
-              <span className="font-medium text-success">
-                {stats?.onlineChargePoints ?? 0} 在线
-              </span>
-              <span className="text-border">·</span>
-              <span>{offlineCount} 离线</span>
-            </>
-          }
         />
         <StatCard
-          title="在线充电桩"
+          title="账户总余额"
-          value={stats?.onlineChargePoints ?? "—"}
+          value={`¥${totalYuan}`}
-          icon={PlugConnection}
+          icon={TagDollar}
           color="success"
-          footer={<span>最近 2 分钟有心跳</span>}
+          footer={<span>所有储值卡余额合计</span>}
         />
         <StatCard
           title="进行中充电"
@@ -101,24 +195,17 @@ export default async function DashboardPage() {
             <>
               <StatusDot color={stats?.activeTransactions ? "success" : "muted"} />
               <span className={stats?.activeTransactions ? "font-medium text-success" : ""}>
-                {stats?.activeTransactions ? "活跃中" : "当前空闲"}
+                {stats?.activeTransactions ? "充电中" : "当前空闲"}
               </span>
             </>
           }
         />
         <StatCard
-          title="储值卡总数"
+          title="累计充电次数"
-          value={stats?.totalIdTags ?? "—"}
+          value={stats?.totalTransactions ?? "—"}
-          icon={CreditCard}
-          color="default"
-          footer={<span>已注册卡片总量</span>}
-        />
-        <StatCard
-          title="今日充电量"
-          value={`${todayKwh} kWh`}
           icon={ChartColumn}
-          color="accent"
+          color="default"
-          footer={<span>当日 00:00 起累计</span>}
+          footer={<span>历史总交易笔数</span>}
         />
       </div>
     </div>

apps/web/app/dashboard/transactions/page.tsx

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useState } from "react";
 import { Button, Chip, Modal, Pagination, Spinner, Table } from "@heroui/react";
 import { TrashBin } from "@gravity-ui/icons";
 import { api, type PaginatedTransactions } from "@/lib/api";
+import { useSession } from "@/lib/auth-client";
 
 const LIMIT = 15;
 
@@ -18,6 +19,8 @@ function formatDuration(start: string, stop: string | null): string {
 }
 
 export default function TransactionsPage() {
+  const { data: sessionData } = useSession();
+  const isAdmin = sessionData?.user?.role === "admin";
   const [data, setData] = useState<PaginatedTransactions | null>(null);
   const [page, setPage] = useState(1);
   const [status, setStatus] = useState<"all" | "active" | "completed">("all");
@@ -201,6 +204,7 @@ export default function TransactionsPage() {
                           </Modal.Backdrop>
                         </Modal>
                       )}
+                      {isAdmin && (
                       <Modal>
                         <Button
                           isIconOnly
@@ -248,6 +252,7 @@ export default function TransactionsPage() {
                           </Modal.Container>
                         </Modal.Backdrop>
                       </Modal>
+                      )}
                     </div>
                   </Table.Cell>
                 </Table.Row>

apps/web/components/sidebar.tsx

@@ -5,16 +5,17 @@ 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'
+import { useSession } from '@/lib/auth-client'
 
 const navItems = [
-  { href: '/dashboard', label: '概览', icon: Thunderbolt, exact: true },
+  { href: '/dashboard', label: '概览', icon: Thunderbolt, exact: true, adminOnly: false },
-  { href: '/dashboard/charge-points', label: '充电桩', icon: PlugConnection },
+  { href: '/dashboard/charge-points', label: '充电桩', icon: PlugConnection, adminOnly: false },
-  { href: '/dashboard/transactions', label: '充电记录', icon: ListCheck },
+  { href: '/dashboard/transactions', label: '充电记录', icon: ListCheck, adminOnly: false },
-  { href: '/dashboard/id-tags', label: '储值卡', icon: CreditCard },
+  { href: '/dashboard/id-tags', label: '储值卡', icon: CreditCard, adminOnly: false },
-  { href: '/dashboard/users', label: '用户管理', icon: Person },
+  { href: '/dashboard/users', label: '用户管理', icon: Person, adminOnly: true },
 ]
 
-function NavContent({ pathname, onNavigate }: { pathname: string; onNavigate?: () => void }) {
+function NavContent({ pathname, isAdmin, onNavigate }: { pathname: string; isAdmin: boolean; onNavigate?: () => void }) {
   return (
     <>
       {/* Logo */}
@@ -32,7 +33,7 @@ function NavContent({ pathname, onNavigate }: { pathname: string; onNavigate?: (
         <p className="mb-1 px-2 text-[11px] font-semibold uppercase tracking-widest text-muted">
           管理
         </p>
-        {navItems.map((item) => {
+        {navItems.filter((item) => !item.adminOnly || isAdmin).map((item) => {
           const isActive = item.exact
             ? pathname === item.href
             : pathname === item.href || pathname.startsWith(item.href + '/')
@@ -68,6 +69,8 @@ function NavContent({ pathname, onNavigate }: { pathname: string; onNavigate?: (
 export default function Sidebar() {
   const pathname = usePathname()
   const [open, setOpen] = useState(false)
+  const { data: sessionData } = useSession()
+  const isAdmin = sessionData?.user?.role === "admin"
 
   return (
     <>
@@ -112,12 +115,12 @@ export default function Sidebar() {
         >
           <Xmark className="size-4" />
         </button>
-        <NavContent pathname={pathname} onNavigate={() => setOpen(false)} />
+        <NavContent pathname={pathname} isAdmin={isAdmin} 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} />
+        <NavContent pathname={pathname} isAdmin={isAdmin} />
       </aside>
     </>
   )

apps/web/lib/api.ts

@@ -26,6 +26,13 @@ export type Stats = {
   todayEnergyWh: number;
 };
 
+export type UserStats = {
+  totalIdTags: number;
+  totalBalance: number;
+  activeTransactions: number;
+  totalTransactions: number;
+};
+
 export type ConnectorSummary = {
   id: string;
   connectorId: number;
@@ -128,7 +135,7 @@ export type PaginatedTransactions = {
 
 export const api = {
   stats: {
-    get: () => apiFetch<Stats>("/api/stats"),
+    get: () => apiFetch<Stats | UserStats>("/api/stats"),
   },
   chargePoints: {
     list: () => apiFetch<ChargePoint[]>("/api/charge-points"),
@@ -178,6 +185,7 @@ export const api = {
   idTags: {
     list: () => apiFetch<IdTag[]>("/api/id-tags"),
     get: (idTag: string) => apiFetch<IdTag>(`/api/id-tags/${idTag}`),
+    claim: () => apiFetch<IdTag>("/api/id-tags/claim", { method: "POST" }),
     create: (data: {
       idTag: string;
       status?: string;