ui changes

src/components/ds/MetricStrip.jsx

@@ -0,0 +1,113 @@
+import * as React from 'react';
+import { ArrowDownRight, ArrowUpRight, Minus } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+/**
+ * MetricStrip — a row of operational figures.
+ *
+ * The Admin surface reports six to eight numbers at once. As individual cards
+ * that becomes a wall of boxes competing with the content below it, so this
+ * presents them as one banded strip: hairline dividers instead of borders, one
+ * shared surface, numbers aligned on a baseline. Dense enough for an operations
+ * console, still readable.
+ *
+ * `items: [{ label, value, delta?, deltaLabel?, invertTrend?, sub?, icon?, tone? }]`
+ *
+ * `invertTrend` exists because up is not always good: time-to-hire rising is
+ * bad, and colouring it green would misinform.
+ */
+
+const TONE = {
+  default: 'text-ink-1',
+  brand: 'text-krow-blue',
+  success: 'text-success',
+  warning: 'text-warning',
+  risk: 'text-destructive',
+};
+
+function Delta({ delta, label, invert }) {
+  if (typeof delta !== 'number') return null;
+
+  const flat = delta === 0;
+  const good = invert ? delta < 0 : delta > 0;
+  const Icon = flat ? Minus : delta > 0 ? ArrowUpRight : ArrowDownRight;
+
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center gap-0.5 text-[11px] font-semibold tabular-nums',
+        flat ? 'text-ink-4' : good ? 'text-success' : 'text-destructive'
+      )}
+    >
+      <Icon className="h-3 w-3" aria-hidden="true" />
+      {flat ? '0%' : `${Math.abs(delta)}%`}
+      {label && <span className="ml-1 font-normal text-ink-4">{label}</span>}
+    </span>
+  );
+}
+
+export function MetricStrip({ items = [], columns, className, loading = false }) {
+  // Column count follows the data by default, so the strip divides evenly
+  // instead of leaving an orphan cell.
+  const count = columns ?? Math.min(items.length, 6);
+  /**
+   * Five and six columns wait for `xl` rather than `lg`.
+   *
+   * The strip lives in the Admin main column, which is narrower than the
+   * viewport whenever the Owliver workspace is open — roughly 400px narrower. A
+   * `lg` breakpoint measures the window and so cheerfully packs six cells into a
+   * 580px column, where every label clips. Two rows of three is the better
+   * answer at that width.
+   */
+  const gridCols = {
+    2: 'sm:grid-cols-2',
+    3: 'sm:grid-cols-3',
+    4: 'grid-cols-2 sm:grid-cols-4',
+    5: 'grid-cols-2 sm:grid-cols-3 xl:grid-cols-5',
+    6: 'grid-cols-2 sm:grid-cols-3 xl:grid-cols-6',
+  }[count] || 'sm:grid-cols-3';
+
+  return (
+    <div
+      className={cn(
+        'grid overflow-hidden rounded-xl border border-border bg-surface',
+        // Hairline dividers rather than gaps: one object, not six.
+        'divide-x divide-y divide-border sm:divide-y-0',
+        gridCols,
+        className
+      )}
+    >
+      {items.map((item) => (
+        <div key={item.label} className="min-w-0 px-4 py-3.5">
+          <div className="flex items-center gap-1.5">
+            {item.icon && <item.icon className="h-3.5 w-3.5 shrink-0 text-ink-4" aria-hidden="true" />}
+            {/* Wraps rather than truncates. A clipped label is worse than a
+                two-line one, and grid rows stretch together so the strip stays
+                even either way. */}
+            <p className="text-[11px] font-medium uppercase leading-tight tracking-wide text-ink-4">
+              {item.label}
+            </p>
+          </div>
+
+          {loading ? (
+            <div className="mt-1.5 h-7 w-16 animate-pulse rounded bg-surface-sunken" />
+          ) : (
+            <div className="mt-1 flex flex-wrap items-baseline gap-x-2 gap-y-0.5">
+              <span
+                className={cn(
+                  'font-heading text-title-lg font-bold tabular-nums leading-none',
+                  TONE[item.tone] || TONE.default
+                )}
+              >
+                {item.value}
+              </span>
+              <Delta delta={item.delta} label={item.deltaLabel} invert={item.invertTrend} />
+            </div>
+          )}
+
+          {item.sub && <p className="mt-1 truncate text-caption text-ink-3">{item.sub}</p>}
+        </div>
+      ))}
+    </div>
+  );
+}