ui: compact registry numbers with company badge + direction icon
Replace full "BTG-0042/2026" with compact [B] ↓ 0042/2026 format: - Colored company badge (B=blue, US=violet, SDT=green, G=gray) - Direction arrow icon (↓ green=intrat, ↑ orange=iesit, ↔ gray=intern) - Plain number without prefix Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -14,6 +14,9 @@ import {
|
||||
CheckCircle2,
|
||||
Copy,
|
||||
Check,
|
||||
ArrowDownLeft,
|
||||
ArrowUpRight,
|
||||
ArrowLeftRight,
|
||||
} from "lucide-react";
|
||||
import { Button } from "@/shared/components/ui/button";
|
||||
import { Badge } from "@/shared/components/ui/badge";
|
||||
@@ -313,11 +316,8 @@ export function RegistryTable({
|
||||
onClick={() => onView(entry)}
|
||||
>
|
||||
{visibleCols.has("number") && (
|
||||
<td className="px-3 py-2 font-mono text-xs whitespace-nowrap">
|
||||
<span className="inline-flex items-center gap-1">
|
||||
{entry.number}
|
||||
<CopyNumberButton entry={entry} />
|
||||
</span>
|
||||
<td className="px-3 py-2 text-xs whitespace-nowrap">
|
||||
<CompactNumber entry={entry} />
|
||||
</td>
|
||||
)}
|
||||
{visibleCols.has("date") && (
|
||||
@@ -552,6 +552,51 @@ function CopyNumberButton({ entry }: { entry: RegistryEntry }) {
|
||||
);
|
||||
}
|
||||
|
||||
// ── Company badge colors ──
|
||||
const COMPANY_BADGE: Record<string, { label: string; className: string }> = {
|
||||
beletage: { label: "B", className: "bg-blue-600 text-white" },
|
||||
"urban-switch": { label: "US", className: "bg-violet-600 text-white" },
|
||||
"studii-de-teren": { label: "SDT", className: "bg-emerald-600 text-white" },
|
||||
group: { label: "G", className: "bg-zinc-500 text-white" },
|
||||
};
|
||||
|
||||
function CompactNumber({ entry }: { entry: RegistryEntry }) {
|
||||
// Extract plain number with leading zeros: "BTG-0042/2026" → "0042/2026"
|
||||
const plain = (entry.number ?? "").replace(/^[A-Z]+-/, "");
|
||||
const badge = COMPANY_BADGE[entry.company ?? ""] ?? { label: "B", className: "bg-blue-600 text-white" };
|
||||
|
||||
// Direction icon
|
||||
const DirIcon =
|
||||
entry.direction === "intrat"
|
||||
? ArrowDownLeft
|
||||
: entry.direction === "iesit"
|
||||
? ArrowUpRight
|
||||
: ArrowLeftRight;
|
||||
const dirColor =
|
||||
entry.direction === "intrat"
|
||||
? "text-green-600"
|
||||
: entry.direction === "iesit"
|
||||
? "text-orange-500"
|
||||
: "text-muted-foreground";
|
||||
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<span
|
||||
className={cn(
|
||||
"inline-flex items-center justify-center rounded text-[9px] font-bold leading-none px-1 py-0.5 shrink-0",
|
||||
badge.className,
|
||||
)}
|
||||
title={entry.company ?? ""}
|
||||
>
|
||||
{badge.label}
|
||||
</span>
|
||||
<DirIcon className={cn("h-3 w-3 shrink-0", dirColor)} />
|
||||
<span className="font-mono">{plain}</span>
|
||||
<CopyNumberButton entry={entry} />
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function formatDate(iso: string): string {
|
||||
try {
|
||||
return new Date(iso).toLocaleDateString("ro-RO", {
|
||||
|
||||
Reference in New Issue
Block a user