feat(web): add user ID and name to transaction details for better tracking

apps/csms/src/routes/transactions.ts

@@ -2,6 +2,7 @@ import { Hono } from "hono";
 import { and, desc, eq, isNull, isNotNull, sql } from "drizzle-orm";
 import { useDrizzle } from "@/lib/db.js";
 import { transaction, chargePoint, connector, idTag } from "@/db/schema.js";
+import { user } from "@/db/auth-schema.js";
 import { ocppConnections } from "@/ocpp/handler.js";
 import { OCPP_MESSAGE_TYPE } from "@/ocpp/types.js";
 import type { HonoEnv } from "@/types/hono.ts";
@@ -47,10 +48,14 @@ app.get("/", async (c) => {
       transaction,
       chargePointIdentifier: chargePoint.chargePointIdentifier,
       connectorNumber: connector.connectorId,
+      idTagUserId: idTag.userId,
+      idTagUserName: user.name,
     })
     .from(transaction)
     .leftJoin(chargePoint, eq(transaction.chargePointId, chargePoint.id))
     .leftJoin(connector, eq(transaction.connectorId, connector.id))
+    .leftJoin(idTag, eq(transaction.idTag, idTag.idTag))
+    .leftJoin(user, eq(idTag.userId, user.id))
     .where(whereClause)
     .orderBy(desc(transaction.startTimestamp))
     .limit(limit)
@@ -61,6 +66,8 @@ app.get("/", async (c) => {
       ...r.transaction,
       chargePointIdentifier: r.chargePointIdentifier,
       connectorNumber: r.connectorNumber,
+      idTagUserId: r.idTagUserId,
+      idTagUserName: r.idTagUserName,
       energyWh:
         r.transaction.stopMeterValue != null
           ? r.transaction.stopMeterValue - r.transaction.startMeterValue

apps/web/app/dashboard/page.tsx

@@ -130,10 +130,22 @@ function RecentTransactions({ txns }: { txns: Transaction[] }) {
                   <span className="ml-1 text-xs text-muted">#{tx.connectorNumber}</span>
                 )}
               </p>
-              <p className="text-xs text-muted">{tx.idTag}</p>
+              <p className="text-xs text-muted">
+                {tx.idTag}
+                {tx.idTagUserId && (
+                  <>
+                    <span className="mx-1">·</span>
+                    {tx.idTagUserName ?? tx.idTagUserId}
+                    <span className="ml-1 opacity-50">({tx.idTagUserId.slice(0, 8)})</span>
+                  </>
+                )}
+              </p>
             </div>
             <div className="shrink-0 text-right">
-              <p className="text-sm font-medium tabular-nums text-foreground">{kwh}</p>
+              <p className="text-sm font-medium tabular-nums text-foreground">
+                {kwh}
+                <span className="text-xs"> kWh</span>
+              </p>
               <p className="text-xs text-muted">{amount}</p>
             </div>
             <div className="w-16 shrink-0 text-right">

apps/web/lib/api.ts

@@ -101,6 +101,8 @@ export type Transaction = {
   connectorNumber: number | null;
   idTag: string;
   idTagStatus: string | null;
+  idTagUserId: string | null;
+  idTagUserName: string | null;
   startTimestamp: string;
   stopTimestamp: string | null;
   startMeterValue: number | null;