refactor: reorganize Financials toolbar and flatten UI
- Group toolbar controls by function (Statement, Period, Mode, Scale) - Move Trend Chart above Matrix, hidden by default - Add chart toggle to toolbar actions - Flatten all sections: remove card styling, use subtle dividers - Update StatementRowInspector and NormalizationSummary with flat layout
This commit is contained in:
@@ -1,10 +1,18 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import { memo, useMemo, useCallback, useRef, useEffect, useState } from 'react';
|
||||
import { Download, Search } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { cn } from '@/lib/utils';
|
||||
import {
|
||||
Fragment,
|
||||
memo,
|
||||
useMemo,
|
||||
useCallback,
|
||||
useRef,
|
||||
useEffect,
|
||||
useState,
|
||||
} from "react";
|
||||
import { Download, Search, BarChart3 } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export type FinancialControlOption = {
|
||||
value: string;
|
||||
@@ -24,10 +32,11 @@ export type FinancialsToolbarProps = {
|
||||
searchValue: string;
|
||||
onSearchChange: (value: string) => void;
|
||||
onExport?: () => void;
|
||||
showChart?: boolean;
|
||||
onToggleChart?: () => void;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
// Debounce hook
|
||||
function useDebounce<T>(value: T, delay: number): T {
|
||||
const [debouncedValue, setDebouncedValue] = useState<T>(value);
|
||||
|
||||
@@ -44,76 +53,185 @@ function useDebounce<T>(value: T, delay: number): T {
|
||||
return debouncedValue;
|
||||
}
|
||||
|
||||
function ControlGroup({
|
||||
children,
|
||||
showDivider = false,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
showDivider?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex items-center gap-1.5">
|
||||
{showDivider && <div className="mr-1.5 h-5 w-px bg-[var(--line-weak)]" />}
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function FinancialsToolbarComponent({
|
||||
sections,
|
||||
searchValue,
|
||||
onSearchChange,
|
||||
onExport,
|
||||
className
|
||||
showChart = false,
|
||||
onToggleChart,
|
||||
className,
|
||||
}: FinancialsToolbarProps) {
|
||||
const [localSearch, setLocalSearch] = useState(searchValue);
|
||||
const debouncedSearch = useDebounce(localSearch, 300);
|
||||
|
||||
// Sync debounced search to parent
|
||||
useEffect(() => {
|
||||
onSearchChange(debouncedSearch);
|
||||
}, [debouncedSearch, onSearchChange]);
|
||||
|
||||
// Sync parent search to local (if changed externally)
|
||||
useEffect(() => {
|
||||
setLocalSearch(searchValue);
|
||||
}, [searchValue]);
|
||||
|
||||
const groupedSections = useMemo(() => {
|
||||
const statementKeys = ["surface"];
|
||||
const periodKeys = ["cadence"];
|
||||
const modeKeys = ["display"];
|
||||
const scaleKeys = ["scale"];
|
||||
|
||||
return {
|
||||
statement: sections.filter((s) => statementKeys.includes(s.key)),
|
||||
period: sections.filter((s) => periodKeys.includes(s.key)),
|
||||
mode: sections.filter((s) => modeKeys.includes(s.key)),
|
||||
scale: sections.filter((s) => scaleKeys.includes(s.key)),
|
||||
};
|
||||
}, [sections]);
|
||||
|
||||
return (
|
||||
<div className={cn('flex flex-wrap items-center gap-2 pb-3 mb-3 border-b border-[var(--line-weak)]', className)}>
|
||||
{/* Control sections */}
|
||||
<div className="flex flex-wrap items-center gap-1.5">
|
||||
{sections.map((section) => (
|
||||
<div key={section.key} className="flex items-center gap-1">
|
||||
{section.options.map((option) => {
|
||||
const isActive = section.value === option.value;
|
||||
return (
|
||||
<Button
|
||||
key={`${section.key}-${option.value}`}
|
||||
variant={isActive ? 'secondary' : 'ghost'}
|
||||
size="compact"
|
||||
onClick={() => section.onChange(option.value)}
|
||||
className="text-xs"
|
||||
>
|
||||
{option.label}
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className={cn("flex flex-col gap-2", className)}>
|
||||
<div className="flex flex-wrap items-center gap-y-2">
|
||||
<ControlGroup>
|
||||
{groupedSections.statement.map((section) => (
|
||||
<Fragment key={section.key}>
|
||||
{section.options.map((option) => {
|
||||
const isActive = section.value === option.value;
|
||||
return (
|
||||
<Button
|
||||
key={`${section.key}-${option.value}`}
|
||||
variant={isActive ? "secondary" : "ghost"}
|
||||
size="compact"
|
||||
onClick={() => section.onChange(option.value)}
|
||||
className="text-xs"
|
||||
>
|
||||
{option.label}
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</Fragment>
|
||||
))}
|
||||
</ControlGroup>
|
||||
|
||||
{/* Spacer */}
|
||||
<div className="flex-1" />
|
||||
<ControlGroup showDivider>
|
||||
{groupedSections.period.map((section) => (
|
||||
<Fragment key={section.key}>
|
||||
{section.options.map((option) => {
|
||||
const isActive = section.value === option.value;
|
||||
return (
|
||||
<Button
|
||||
key={`${section.key}-${option.value}`}
|
||||
variant={isActive ? "secondary" : "ghost"}
|
||||
size="compact"
|
||||
onClick={() => section.onChange(option.value)}
|
||||
className="text-xs"
|
||||
>
|
||||
{option.label}
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</Fragment>
|
||||
))}
|
||||
</ControlGroup>
|
||||
|
||||
{/* Search and actions */}
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-2 top-1/2 h-3 w-3 -translate-y-1/2 text-[var(--terminal-muted)]" />
|
||||
<Input
|
||||
placeholder="Search metrics..."
|
||||
value={localSearch}
|
||||
onChange={(e) => setLocalSearch(e.target.value)}
|
||||
inputSize="compact"
|
||||
className="w-48 pl-7"
|
||||
/>
|
||||
</div>
|
||||
{onExport && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="compact"
|
||||
onClick={onExport}
|
||||
className="gap-1.5"
|
||||
>
|
||||
<Download className="h-3.5 w-3.5" />
|
||||
Export
|
||||
</Button>
|
||||
{groupedSections.mode.length > 0 && (
|
||||
<ControlGroup showDivider>
|
||||
{groupedSections.mode.map((section) => (
|
||||
<Fragment key={section.key}>
|
||||
{section.options.map((option) => {
|
||||
const isActive = section.value === option.value;
|
||||
return (
|
||||
<Button
|
||||
key={`${section.key}-${option.value}`}
|
||||
variant={isActive ? "secondary" : "ghost"}
|
||||
size="compact"
|
||||
onClick={() => section.onChange(option.value)}
|
||||
className="text-xs"
|
||||
>
|
||||
{option.label}
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</Fragment>
|
||||
))}
|
||||
</ControlGroup>
|
||||
)}
|
||||
|
||||
<ControlGroup showDivider>
|
||||
{groupedSections.scale.map((section) => (
|
||||
<Fragment key={section.key}>
|
||||
{section.options.map((option) => {
|
||||
const isActive = section.value === option.value;
|
||||
return (
|
||||
<Button
|
||||
key={`${section.key}-${option.value}`}
|
||||
variant={isActive ? "secondary" : "ghost"}
|
||||
size="compact"
|
||||
onClick={() => section.onChange(option.value)}
|
||||
className="text-xs"
|
||||
>
|
||||
{option.label}
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</Fragment>
|
||||
))}
|
||||
</ControlGroup>
|
||||
|
||||
<div className="flex-1" />
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-2 top-1/2 h-3 w-3 -translate-y-1/2 text-[var(--terminal-muted)]" />
|
||||
<Input
|
||||
placeholder="Search metrics..."
|
||||
value={localSearch}
|
||||
onChange={(e) => setLocalSearch(e.target.value)}
|
||||
inputSize="compact"
|
||||
className="w-40 pl-7"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{onToggleChart && (
|
||||
<Button
|
||||
variant={showChart ? "secondary" : "ghost"}
|
||||
size="compact"
|
||||
onClick={onToggleChart}
|
||||
className="gap-1.5"
|
||||
aria-pressed={showChart}
|
||||
>
|
||||
<BarChart3 className="h-3.5 w-3.5" />
|
||||
<span className="hidden sm:inline">
|
||||
{showChart ? "Hide" : "Show"} Chart
|
||||
</span>
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{onExport && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="compact"
|
||||
onClick={onExport}
|
||||
className="gap-1.5"
|
||||
>
|
||||
<Download className="h-3.5 w-3.5" />
|
||||
Export
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user