feat: focus operations review queue

vehicle-data-platform/apps/web/src/v2/shared/WorkspaceMetricRail.tsx

@@ -8,15 +8,15 @@ export type WorkspaceMetricRailItem = {
   className?: string;
 };
 
-export function WorkspaceMetricRail({
-  ariaLabel,
-  primary,
-  secondary,
-  className,
-  cardClassName,
-  secondaryClassName,
-  primaryValueClassName
-}: {
+export type WorkspaceQueueMetricRailItem = {
+  label: string;
+  value: ReactNode;
+  note?: ReactNode;
+  tone?: 'neutral' | 'primary' | 'success' | 'warning' | 'danger';
+  emphasis?: 'primary' | 'secondary';
+};
+
+type WorkspaceSummaryMetricRailProps = {
   ariaLabel: string;
   primary: WorkspaceMetricRailItem;
   secondary: WorkspaceMetricRailItem[];
@@ -24,7 +24,47 @@ export function WorkspaceMetricRail({
   cardClassName: string;
   secondaryClassName: string;
   primaryValueClassName?: string;
-}) {
+};
+
+type WorkspaceQueueMetricRailProps = {
+  variant: 'queue';
+  ariaLabel: string;
+  className: string;
+  items: WorkspaceQueueMetricRailItem[];
+  context?: ReactNode;
+};
+
+export function WorkspaceMetricRail(props: WorkspaceSummaryMetricRailProps | WorkspaceQueueMetricRailProps) {
+  if ('items' in props) {
+    return <Card className={`v2-workspace-metric-rail is-queue ${props.className}`} bodyStyle={{ padding: 0 }}>
+      <div className="v2-workspace-metric-list" role="list" aria-label={props.ariaLabel}>
+        {props.items.map((item, index) => {
+          const toneClassName = `is-${item.tone ?? 'neutral'}`;
+          const emphasisClassName = `is-${item.emphasis ?? (index < 2 ? 'primary' : 'secondary')}`;
+          return <span
+            className={toneClassName === emphasisClassName ? toneClassName : `${toneClassName} ${emphasisClassName}`}
+            role="listitem"
+            key={item.label}
+          >
+            <small>{item.label}</small>
+            <strong>{item.value}</strong>
+            {item.note ? <em>{item.note}</em> : null}
+          </span>;
+        })}
+      </div>
+      {props.context ? <div className="v2-workspace-metric-context">{props.context}</div> : null}
+    </Card>;
+  }
+
+  const {
+    ariaLabel,
+    primary,
+    secondary,
+    className,
+    cardClassName,
+    secondaryClassName,
+    primaryValueClassName
+  } = props;
   const cardClass = (item: WorkspaceMetricRailItem, primaryCard = false) => [
     cardClassName,
     primaryCard ? 'is-primary' : '',