valknarandClaude Sonnet 5
c46adf788f
Cards now sit on an animated signature-gradient background and use a translucent, blurred bp-glass surface so it shines through; extended bp-glass to every stat surface on the Stats page and to its tab switcher. Adds a Breadcrumbs component below the header on all app pages. Also: drop the gradient text fill from the wordmark/heading, animate the BrandMark's heart and curve on the dashboard hero instead of a plain pulse ring, recenter the heart/curve artwork in icon.svg and BrandMark, close the mobile nav menu on link click, remove the redundant "back to recordings" button, and match the "Start session"/"Scan for devices" button sizes. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
54 lines
1.8 KiB
TypeScript
54 lines
1.8 KiB
TypeScript
import { Card, CardContent } from "@/components/ui/card";
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
|
|
|
export interface DeviceUsageRow {
|
|
deviceId: number;
|
|
displayName: string | null;
|
|
bleName: string;
|
|
sessionCount: number;
|
|
totalActiveMs: number;
|
|
commandCount: number;
|
|
lastUsedAt: number | null;
|
|
}
|
|
|
|
export function DeviceUsageTable({ devices }: { devices: DeviceUsageRow[] }) {
|
|
if (devices.length === 0) {
|
|
return (
|
|
<Card className="bp-glass">
|
|
<CardContent className="py-6 text-sm text-muted-foreground">No device activity yet.</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Card className="bp-glass">
|
|
<CardContent>
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Device</TableHead>
|
|
<TableHead>Sessions</TableHead>
|
|
<TableHead>Active time</TableHead>
|
|
<TableHead>Commands</TableHead>
|
|
<TableHead>Last used</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{devices.map((d) => (
|
|
<TableRow key={d.deviceId}>
|
|
<TableCell className="font-medium">{d.displayName ?? d.bleName}</TableCell>
|
|
<TableCell className="bp-readout">{d.sessionCount}</TableCell>
|
|
<TableCell className="bp-readout">{(d.totalActiveMs / 60_000).toFixed(1)}m</TableCell>
|
|
<TableCell className="bp-readout">{d.commandCount}</TableCell>
|
|
<TableCell className="bp-readout text-muted-foreground">
|
|
{d.lastUsedAt ? new Date(d.lastUsedAt).toLocaleString() : "Never"}
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|