Logan CusanoandClaude Opus 5.5
bf206334e3
UI_REDESIGN chunk 4 was never finished: 39 app/component files still used raw Tailwind greys, kept readable in light mode only by the !important override sheet. In dark mode text-gray-600 is ~2.3:1 on surface, and the light override maps it to #94a3b8 (~2.6:1 on white) — unreadable in both. Mechanical mapping (886 classes): gray-100/200 -> ink, 300/400 -> ink-2, 500/600/700 -> ink-muted, bg 950/900/800 -> page/surface/raised, border 800 -> line, 700/600 -> line-strong, plus hover/divide/placeholder. Alpha suffixes kept (tokens are color-mix, so /60 works). bg-gray-700, text-white and marketing pages left alone. text-[9px] -> text-[10px]. Frontend unverified: no Node on the authoring box (#207). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
70 lines
2.6 KiB
TypeScript
70 lines
2.6 KiB
TypeScript
import Link from "next/link";
|
|
import { StatusBadge } from "@/components/StatusBadge";
|
|
import type { NodeRecord, SystemRecord } from "@/lib/types";
|
|
|
|
interface Props {
|
|
node: NodeRecord;
|
|
system?: SystemRecord;
|
|
/**
|
|
* When false, the card renders without its `/nodes/[id]` Link wrapper so a
|
|
* parent click handler can take the interaction (pending nodes open the
|
|
* config modal instead of navigating). Defaults to true.
|
|
*/
|
|
linkToDetail?: boolean;
|
|
}
|
|
|
|
export function NodeCard({ node, system, linkToDetail = true }: Props) {
|
|
const lastSeen = node.last_seen
|
|
? new Date(node.last_seen).toLocaleTimeString()
|
|
: "never";
|
|
|
|
const body = (
|
|
<div className="bg-surface border border-line rounded-lg p-4 hover:border-line-strong transition-colors cursor-pointer">
|
|
<div className="flex items-start justify-between mb-3">
|
|
<div>
|
|
<p className="font-mono font-semibold text-white">{node.name}</p>
|
|
<p className="text-xs text-ink-muted font-mono">{node.node_id}</p>
|
|
</div>
|
|
<StatusBadge status={node.status} />
|
|
</div>
|
|
<div className="space-y-1 text-xs font-mono text-ink-2">
|
|
<div className="flex justify-between">
|
|
<span>System</span>
|
|
<span className="text-ink-2">{system?.name ?? "Unassigned"}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span>Location</span>
|
|
<span className="text-ink-2">
|
|
{node.lat != null && node.lon != null
|
|
? `${node.lat.toFixed(4)}, ${node.lon.toFixed(4)}`
|
|
: "Unknown"}
|
|
</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span>Last seen</span>
|
|
<span className="text-ink-2">{lastSeen}</span>
|
|
</div>
|
|
</div>
|
|
{!node.configured && (
|
|
<div className="mt-3 text-xs text-indigo-400 font-mono border-t border-line pt-2">
|
|
⚠ Needs configuration
|
|
</div>
|
|
)}
|
|
{node.is_overridden && (
|
|
<div className="mt-3 text-xs text-yellow-500 font-mono border-t border-line pt-2 flex justify-between">
|
|
<span>⚠ Local Override</span>
|
|
{node.override_timeout_at ? (
|
|
<span className="text-ink-muted">
|
|
Resets: {new Date(node.override_timeout_at).toLocaleTimeString()}
|
|
</span>
|
|
) : (
|
|
<span className="text-ink-muted">Permanent</span>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
|
|
return linkToDetail ? <Link href={`/nodes/${node.node_id}`}>{body}</Link> : body;
|
|
}
|