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,
|
CheckCircle2,
|
||||||
Copy,
|
Copy,
|
||||||
Check,
|
Check,
|
||||||
|
ArrowDownLeft,
|
||||||
|
ArrowUpRight,
|
||||||
|
ArrowLeftRight,
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
import { Button } from "@/shared/components/ui/button";
|
import { Button } from "@/shared/components/ui/button";
|
||||||
import { Badge } from "@/shared/components/ui/badge";
|
import { Badge } from "@/shared/components/ui/badge";
|
||||||
@@ -313,11 +316,8 @@ export function RegistryTable({
|
|||||||
onClick={() => onView(entry)}
|
onClick={() => onView(entry)}
|
||||||
>
|
>
|
||||||
{visibleCols.has("number") && (
|
{visibleCols.has("number") && (
|
||||||
<td className="px-3 py-2 font-mono text-xs whitespace-nowrap">
|
<td className="px-3 py-2 text-xs whitespace-nowrap">
|
||||||
<span className="inline-flex items-center gap-1">
|
<CompactNumber entry={entry} />
|
||||||
{entry.number}
|
|
||||||
<CopyNumberButton entry={entry} />
|
|
||||||
</span>
|
|
||||||
</td>
|
</td>
|
||||||
)}
|
)}
|
||||||
{visibleCols.has("date") && (
|
{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 {
|
function formatDate(iso: string): string {
|
||||||
try {
|
try {
|
||||||
return new Date(iso).toLocaleDateString("ro-RO", {
|
return new Date(iso).toLocaleDateString("ro-RO", {
|
||||||
|
|||||||
Reference in New Issue
Block a user