feat(financials): replace filter cards with compact extensible control bar

components/financials/control-bar.tsx

@@ -0,0 +1,99 @@
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+type ControlButtonVariant = 'primary' | 'ghost' | 'secondary' | 'danger';
+
+export type FinancialControlOption = {
+  value: string;
+  label: string;
+  disabled?: boolean;
+};
+
+export type FinancialControlSection = {
+  id: string;
+  label: string;
+  value: string;
+  options: FinancialControlOption[];
+  onChange: (value: string) => void;
+};
+
+export type FinancialControlAction = {
+  id: string;
+  label: string;
+  onClick: () => void;
+  disabled?: boolean;
+  variant?: ControlButtonVariant;
+};
+
+type FinancialControlBarProps = {
+  title?: string;
+  subtitle?: string;
+  sections: FinancialControlSection[];
+  actions?: FinancialControlAction[];
+  className?: string;
+};
+
+export function FinancialControlBar({
+  title = 'Control Bar',
+  subtitle,
+  sections,
+  actions,
+  className
+}: FinancialControlBarProps) {
+  return (
+    <section className={cn('rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel)] px-4 py-3', className)}>
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div>
+          <h3 className="text-sm font-semibold text-[color:var(--terminal-bright)]">{title}</h3>
+          {subtitle ? (
+            <p className="mt-1 text-xs text-[color:var(--terminal-muted)]">{subtitle}</p>
+          ) : null}
+        </div>
+
+        {actions && actions.length > 0 ? (
+          <div className="flex flex-wrap items-center justify-end gap-2">
+            {actions.map((action) => (
+              <Button
+                key={action.id}
+                type="button"
+                variant={action.variant ?? 'secondary'}
+                disabled={action.disabled}
+                className="px-2 py-1 text-xs"
+                onClick={action.onClick}
+              >
+                {action.label}
+              </Button>
+            ))}
+          </div>
+        ) : null}
+      </div>
+
+      <div className="mt-3 overflow-x-auto">
+        <div className="flex min-w-max flex-wrap gap-2">
+          {sections.map((section) => (
+            <div
+              key={section.id}
+              className="flex items-center gap-2 rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-2 py-1.5"
+            >
+              <span className="text-[10px] uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">{section.label}</span>
+              <div className="flex flex-wrap items-center gap-1">
+                {section.options.map((option) => (
+                  <Button
+                    key={`${section.id}-${option.value}`}
+                    type="button"
+                    variant={option.value === section.value ? 'primary' : 'ghost'}
+                    disabled={option.disabled}
+                    className="px-2 py-1 text-xs"
+                    onClick={() => section.onChange(option.value)}
+                  >
+                    {option.label}
+                  </Button>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}