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>
|
||||
);
|
||||
|
||||
@@ -1,66 +1,103 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import { AlertTriangle } from 'lucide-react';
|
||||
import { Panel } from '@/components/ui/panel';
|
||||
import type { NormalizationMetadata } from '@/lib/types';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { AlertTriangle } from "lucide-react";
|
||||
import type { NormalizationMetadata } from "@/lib/types";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
type NormalizationSummaryProps = {
|
||||
normalization: NormalizationMetadata;
|
||||
};
|
||||
|
||||
function SummaryCard(props: {
|
||||
function SummaryField(props: {
|
||||
label: string;
|
||||
value: string;
|
||||
tone?: 'default' | 'warning';
|
||||
tone?: "default" | "warning";
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'data-surface px-3 py-3',
|
||||
props.tone === 'warning' && 'border-[#7f6250] bg-[linear-gradient(180deg,rgba(80,58,41,0.92),rgba(38,27,21,0.78))]'
|
||||
"py-2",
|
||||
props.tone === "warning" && "border-l-2 border-[#7f6250] pl-3",
|
||||
)}
|
||||
>
|
||||
<p className="panel-heading text-[10px] uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">{props.label}</p>
|
||||
<p className="mt-1 text-sm font-semibold text-[color:var(--terminal-bright)]">{props.value}</p>
|
||||
<p className="text-[10px] uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">
|
||||
{props.label}
|
||||
</p>
|
||||
<p
|
||||
className={cn(
|
||||
"text-sm font-semibold",
|
||||
props.tone === "warning"
|
||||
? "text-[#ffd7bf]"
|
||||
: "text-[color:var(--terminal-bright)]",
|
||||
)}
|
||||
>
|
||||
{props.value}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function NormalizationSummary({ normalization }: NormalizationSummaryProps) {
|
||||
export function NormalizationSummary({
|
||||
normalization,
|
||||
}: NormalizationSummaryProps) {
|
||||
const hasMaterialUnmapped = normalization.materialUnmappedRowCount > 0;
|
||||
const hasWarnings = normalization.warnings.length > 0;
|
||||
|
||||
return (
|
||||
<Panel
|
||||
title="Normalization Summary"
|
||||
subtitle="Pack, parser, and residual mapping health for the compact statement surface."
|
||||
variant="surface"
|
||||
>
|
||||
<div className="grid gap-3 md:grid-cols-2 xl:grid-cols-8">
|
||||
<SummaryCard label="Pack" value={normalization.fiscalPack ?? 'unknown'} />
|
||||
<SummaryCard label="Regime" value={normalization.regime} />
|
||||
<SummaryCard label="Parser" value={`${normalization.parserEngine} ${normalization.parserVersion}`} />
|
||||
<SummaryCard label="Surface Rows" value={String(normalization.surfaceRowCount)} />
|
||||
<SummaryCard label="Detail Rows" value={String(normalization.detailRowCount)} />
|
||||
<SummaryCard label="KPI Rows" value={String(normalization.kpiRowCount)} />
|
||||
<SummaryCard label="Unmapped Rows" value={String(normalization.unmappedRowCount)} />
|
||||
<SummaryCard
|
||||
<section className="border-t border-[color:var(--line-weak)] pt-4">
|
||||
<header className="mb-3">
|
||||
<h3 className="text-sm font-semibold text-[color:var(--terminal-bright)]">
|
||||
Normalization Summary
|
||||
</h3>
|
||||
<p className="text-xs text-[color:var(--terminal-muted)]">
|
||||
Pack, parser, and residual mapping health for the compact statement
|
||||
surface.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<div className="grid gap-x-6 gap-y-1 md:grid-cols-4 xl:grid-cols-8">
|
||||
<SummaryField
|
||||
label="Pack"
|
||||
value={normalization.fiscalPack ?? "unknown"}
|
||||
/>
|
||||
<SummaryField label="Regime" value={normalization.regime} />
|
||||
<SummaryField
|
||||
label="Parser"
|
||||
value={`${normalization.parserEngine} ${normalization.parserVersion}`}
|
||||
/>
|
||||
<SummaryField
|
||||
label="Surface Rows"
|
||||
value={String(normalization.surfaceRowCount)}
|
||||
/>
|
||||
<SummaryField
|
||||
label="Detail Rows"
|
||||
value={String(normalization.detailRowCount)}
|
||||
/>
|
||||
<SummaryField
|
||||
label="KPI Rows"
|
||||
value={String(normalization.kpiRowCount)}
|
||||
/>
|
||||
<SummaryField
|
||||
label="Unmapped Rows"
|
||||
value={String(normalization.unmappedRowCount)}
|
||||
/>
|
||||
<SummaryField
|
||||
label="Material Unmapped"
|
||||
value={String(normalization.materialUnmappedRowCount)}
|
||||
tone={hasMaterialUnmapped ? 'warning' : 'default'}
|
||||
tone={hasMaterialUnmapped ? "warning" : "default"}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{hasWarnings ? (
|
||||
<div className="mt-3 rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-3">
|
||||
<p className="panel-heading text-[10px] uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">
|
||||
<div className="mt-3 border-t border-[color:var(--line-weak)] pt-3">
|
||||
<p className="text-[10px] uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">
|
||||
Parser Warnings
|
||||
</p>
|
||||
<div className="mt-2 flex flex-wrap gap-2">
|
||||
{normalization.warnings.map((warning) => (
|
||||
<span
|
||||
key={warning}
|
||||
className="rounded-full border border-[color:var(--line-weak)] bg-[rgba(88,102,122,0.16)] px-3 py-1 text-xs text-[color:var(--terminal-bright)]"
|
||||
className="rounded border border-[color:var(--line-weak)] bg-[rgba(88,102,122,0.16)] px-2 py-0.5 text-xs text-[color:var(--terminal-bright)]"
|
||||
>
|
||||
{warning}
|
||||
</span>
|
||||
@@ -68,12 +105,17 @@ export function NormalizationSummary({ normalization }: NormalizationSummaryProp
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{hasMaterialUnmapped ? (
|
||||
<div className="mt-3 flex items-start gap-2 rounded-xl border border-[#7f6250] bg-[rgba(91,66,46,0.18)] px-3 py-3 text-sm text-[#f5d5c0]">
|
||||
<div className="mt-3 flex items-start gap-2 border-l-2 border-[#7f6250] pl-3 text-sm text-[#f5d5c0]">
|
||||
<AlertTriangle className="mt-0.5 size-4 shrink-0" />
|
||||
<p>Material unmapped rows were detected for this filing set. Use the inspector and detail rows before relying on cross-company comparisons.</p>
|
||||
<p>
|
||||
Material unmapped rows were detected for this filing set. Use the
|
||||
inspector and detail rows before relying on cross-company
|
||||
comparisons.
|
||||
</p>
|
||||
</div>
|
||||
) : null}
|
||||
</Panel>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,86 +1,145 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import { Panel } from '@/components/ui/panel';
|
||||
import type {
|
||||
DetailFinancialRow,
|
||||
DimensionBreakdownRow,
|
||||
FinancialStatementPeriod,
|
||||
FinancialSurfaceKind,
|
||||
SurfaceFinancialRow
|
||||
} from '@/lib/types';
|
||||
import type { ResolvedStatementSelection } from '@/lib/financials/statement-view-model';
|
||||
SurfaceFinancialRow,
|
||||
} from "@/lib/types";
|
||||
import type { ResolvedStatementSelection } from "@/lib/financials/statement-view-model";
|
||||
|
||||
type StatementRowInspectorProps = {
|
||||
selection: ResolvedStatementSelection | null;
|
||||
dimensionRows: DimensionBreakdownRow[];
|
||||
periods: FinancialStatementPeriod[];
|
||||
surfaceKind: Extract<FinancialSurfaceKind, 'income_statement' | 'balance_sheet' | 'cash_flow_statement'>;
|
||||
renderValue: (row: SurfaceFinancialRow | DetailFinancialRow, periodId: string, previousPeriodId: string | null) => string;
|
||||
renderDimensionValue: (value: number | null, rowKey: string, unit: SurfaceFinancialRow['unit']) => string;
|
||||
surfaceKind: Extract<
|
||||
FinancialSurfaceKind,
|
||||
"income_statement" | "balance_sheet" | "cash_flow_statement"
|
||||
>;
|
||||
renderValue: (
|
||||
row: SurfaceFinancialRow | DetailFinancialRow,
|
||||
periodId: string,
|
||||
previousPeriodId: string | null,
|
||||
) => string;
|
||||
renderDimensionValue: (
|
||||
value: number | null,
|
||||
rowKey: string,
|
||||
unit: SurfaceFinancialRow["unit"],
|
||||
) => string;
|
||||
};
|
||||
|
||||
function InspectorCard(props: {
|
||||
label: string;
|
||||
value: string;
|
||||
}) {
|
||||
function InspectorField(props: { label: string; value: string }) {
|
||||
return (
|
||||
<div className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2">
|
||||
<p className="text-[color:var(--terminal-muted)]">{props.label}</p>
|
||||
<p className="font-semibold text-[color:var(--terminal-bright)]">{props.value}</p>
|
||||
<div className="py-1.5">
|
||||
<p className="text-[10px] uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">
|
||||
{props.label}
|
||||
</p>
|
||||
<p className="text-sm font-medium text-[color:var(--terminal-bright)]">
|
||||
{props.value}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function renderList(values: string[] | null | undefined) {
|
||||
return (values ?? []).length > 0 ? (values ?? []).join(', ') : 'n/a';
|
||||
return (values ?? []).length > 0 ? (values ?? []).join(", ") : "n/a";
|
||||
}
|
||||
|
||||
export function StatementRowInspector(props: StatementRowInspectorProps) {
|
||||
const selection = props.selection;
|
||||
const parentSurfaceLabel = selection?.kind === 'detail'
|
||||
? selection.parentSurfaceRow?.label ?? (selection.row.parentSurfaceKey === 'unmapped' ? 'Unmapped / Residual' : selection.row.parentSurfaceKey)
|
||||
: null;
|
||||
const parentSurfaceLabel =
|
||||
selection?.kind === "detail"
|
||||
? (selection.parentSurfaceRow?.label ??
|
||||
(selection.row.parentSurfaceKey === "unmapped"
|
||||
? "Unmapped / Residual"
|
||||
: selection.row.parentSurfaceKey))
|
||||
: null;
|
||||
|
||||
return (
|
||||
<Panel
|
||||
title="Row Details"
|
||||
subtitle="Inspect compact-surface resolution, raw drill-down rows, and dimensional evidence."
|
||||
variant="surface"
|
||||
>
|
||||
<section className="border-t border-[color:var(--line-weak)] pt-4">
|
||||
<header className="mb-3">
|
||||
<h3 className="text-sm font-semibold text-[color:var(--terminal-bright)]">
|
||||
Row Details
|
||||
</h3>
|
||||
<p className="text-xs text-[color:var(--terminal-muted)]">
|
||||
Inspect compact-surface resolution, raw drill-down rows, and
|
||||
dimensional evidence.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
{!selection ? (
|
||||
<p className="text-sm text-[color:var(--terminal-muted)]">Select a compact surface row or raw detail row to inspect details.</p>
|
||||
) : selection.kind === 'surface' ? (
|
||||
<p className="text-sm text-[color:var(--terminal-muted)]">
|
||||
Select a compact surface row or raw detail row to inspect details.
|
||||
</p>
|
||||
) : selection.kind === "surface" ? (
|
||||
<div className="space-y-4 text-sm">
|
||||
<div className="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-4">
|
||||
<InspectorCard label="Label" value={selection.row.label} />
|
||||
<InspectorCard label="Key" value={selection.row.key} />
|
||||
<InspectorCard label="Resolution" value={selection.row.resolutionMethod ?? 'direct'} />
|
||||
<InspectorCard label="Confidence" value={selection.row.confidence ?? 'high'} />
|
||||
<div className="grid grid-cols-2 gap-x-6 gap-y-1 md:grid-cols-4">
|
||||
<InspectorField label="Label" value={selection.row.label} />
|
||||
<InspectorField label="Key" value={selection.row.key} />
|
||||
<InspectorField
|
||||
label="Resolution"
|
||||
value={selection.row.resolutionMethod ?? "direct"}
|
||||
/>
|
||||
<InspectorField
|
||||
label="Confidence"
|
||||
value={selection.row.confidence ?? "high"}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-3 md:grid-cols-2">
|
||||
<InspectorCard label="Source Row Keys" value={renderList(selection.row.sourceRowKeys)} />
|
||||
<InspectorCard label="Source Concepts" value={renderList(selection.row.sourceConcepts)} />
|
||||
<div className="grid grid-cols-2 gap-x-6 gap-y-1">
|
||||
<InspectorField
|
||||
label="Source Row Keys"
|
||||
value={renderList(selection.row.sourceRowKeys)}
|
||||
/>
|
||||
<InspectorField
|
||||
label="Source Concepts"
|
||||
value={renderList(selection.row.sourceConcepts)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-3 md:grid-cols-2">
|
||||
<InspectorCard label="Source Fact IDs" value={(selection.row.sourceFactIds ?? []).length > 0 ? (selection.row.sourceFactIds ?? []).join(', ') : 'n/a'} />
|
||||
<InspectorCard label="Warning Codes" value={renderList(selection.row.warningCodes ?? [])} />
|
||||
<div className="grid grid-cols-2 gap-x-6 gap-y-1">
|
||||
<InspectorField
|
||||
label="Source Fact IDs"
|
||||
value={
|
||||
(selection.row.sourceFactIds ?? []).length > 0
|
||||
? (selection.row.sourceFactIds ?? []).join(", ")
|
||||
: "n/a"
|
||||
}
|
||||
/>
|
||||
<InspectorField
|
||||
label="Warning Codes"
|
||||
value={renderList(selection.row.warningCodes ?? [])}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-3 md:grid-cols-2">
|
||||
<InspectorCard label="Child Surface Rows" value={selection.childSurfaceRows.length > 0 ? selection.childSurfaceRows.map((row) => row.label).join(', ') : 'None'} />
|
||||
<InspectorCard label="Raw Detail Rows" value={String(selection.detailRows.length)} />
|
||||
<div className="grid grid-cols-2 gap-x-6 gap-y-1">
|
||||
<InspectorField
|
||||
label="Child Surface Rows"
|
||||
value={
|
||||
selection.childSurfaceRows.length > 0
|
||||
? selection.childSurfaceRows
|
||||
.map((row) => row.label)
|
||||
.join(", ")
|
||||
: "None"
|
||||
}
|
||||
/>
|
||||
<InspectorField
|
||||
label="Raw Detail Rows"
|
||||
value={String(selection.detailRows.length)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{selection.detailRows.length > 0 ? (
|
||||
<div className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-3">
|
||||
<p className="text-[color:var(--terminal-muted)]">Raw Detail Labels</p>
|
||||
<div className="border-t border-[color:var(--line-weak)] pt-3">
|
||||
<p className="text-[10px] uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">
|
||||
Raw Detail Labels
|
||||
</p>
|
||||
<div className="mt-2 flex flex-wrap gap-2">
|
||||
{selection.detailRows.map((row) => (
|
||||
<span
|
||||
key={`${selection.row.key}-${row.key}`}
|
||||
className="rounded-full border border-[color:var(--line-weak)] bg-[rgba(88,102,122,0.16)] px-3 py-1 text-xs text-[color:var(--terminal-bright)]"
|
||||
className="rounded border border-[color:var(--line-weak)] bg-[rgba(88,102,122,0.16)] px-2 py-0.5 text-xs text-[color:var(--terminal-bright)]"
|
||||
>
|
||||
{row.label}
|
||||
</span>
|
||||
@@ -91,8 +150,106 @@ export function StatementRowInspector(props: StatementRowInspectorProps) {
|
||||
|
||||
{selection.row.hasDimensions ? (
|
||||
props.dimensionRows.length === 0 ? (
|
||||
<p className="text-sm text-[color:var(--terminal-muted)]">No dimensional facts were returned for the selected compact row.</p>
|
||||
<p className="text-sm text-[color:var(--terminal-muted)]">
|
||||
No dimensional facts were returned for the selected compact row.
|
||||
</p>
|
||||
) : (
|
||||
<div className="border-t border-[color:var(--line-weak)] pt-3">
|
||||
<div className="data-table-wrap">
|
||||
<table className="data-table min-w-[760px]">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Period</th>
|
||||
<th>Axis</th>
|
||||
<th>Member</th>
|
||||
<th>Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{props.dimensionRows.map((row, index) => (
|
||||
<tr
|
||||
key={`${selection.row.key}-${row.periodId}-${row.axis}-${row.member}-${index}`}
|
||||
>
|
||||
<td>
|
||||
{props.periods.find(
|
||||
(period) => period.id === row.periodId,
|
||||
)?.periodLabel ?? row.periodId}
|
||||
</td>
|
||||
<td>{row.axis}</td>
|
||||
<td>{row.member}</td>
|
||||
<td>
|
||||
{props.renderDimensionValue(
|
||||
row.value,
|
||||
selection.row.key,
|
||||
selection.row.unit,
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<p className="text-sm text-[color:var(--terminal-muted)]">
|
||||
No dimensional drill-down is available for this compact surface
|
||||
row.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4 text-sm">
|
||||
<div className="grid grid-cols-2 gap-x-6 gap-y-1 md:grid-cols-4">
|
||||
<InspectorField label="Label" value={selection.row.label} />
|
||||
<InspectorField label="Key" value={selection.row.key} />
|
||||
<InspectorField
|
||||
label="Parent Surface"
|
||||
value={parentSurfaceLabel ?? selection.row.parentSurfaceKey}
|
||||
/>
|
||||
<InspectorField
|
||||
label="Residual"
|
||||
value={selection.row.residualFlag ? "Yes" : "No"}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-x-6 gap-y-1">
|
||||
<InspectorField
|
||||
label="Concept Key"
|
||||
value={selection.row.conceptKey}
|
||||
/>
|
||||
<InspectorField label="QName" value={selection.row.qname} />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-x-6 gap-y-1">
|
||||
<InspectorField
|
||||
label="Local Name"
|
||||
value={selection.row.localName}
|
||||
/>
|
||||
<InspectorField
|
||||
label="Source Fact IDs"
|
||||
value={
|
||||
(selection.row.sourceFactIds ?? []).length > 0
|
||||
? (selection.row.sourceFactIds ?? []).join(", ")
|
||||
: "n/a"
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-[color:var(--line-weak)] pt-3">
|
||||
<InspectorField
|
||||
label="Dimensions Summary"
|
||||
value={renderList(selection.row.dimensionsSummary)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{props.dimensionRows.length === 0 ? (
|
||||
<p className="text-sm text-[color:var(--terminal-muted)]">
|
||||
No dimensional facts were returned for the selected raw detail
|
||||
row.
|
||||
</p>
|
||||
) : (
|
||||
<div className="border-t border-[color:var(--line-weak)] pt-3">
|
||||
<div className="data-table-wrap">
|
||||
<table className="data-table min-w-[760px]">
|
||||
<thead>
|
||||
@@ -105,73 +262,34 @@ export function StatementRowInspector(props: StatementRowInspectorProps) {
|
||||
</thead>
|
||||
<tbody>
|
||||
{props.dimensionRows.map((row, index) => (
|
||||
<tr key={`${selection.row.key}-${row.periodId}-${row.axis}-${row.member}-${index}`}>
|
||||
<td>{props.periods.find((period) => period.id === row.periodId)?.periodLabel ?? row.periodId}</td>
|
||||
<tr
|
||||
key={`${selection.row.parentSurfaceKey}-${selection.row.key}-${row.periodId}-${index}`}
|
||||
>
|
||||
<td>
|
||||
{props.periods.find(
|
||||
(period) => period.id === row.periodId,
|
||||
)?.periodLabel ?? row.periodId}
|
||||
</td>
|
||||
<td>{row.axis}</td>
|
||||
<td>{row.member}</td>
|
||||
<td>{props.renderDimensionValue(row.value, selection.row.key, selection.row.unit)}</td>
|
||||
<td>
|
||||
{props.renderDimensionValue(
|
||||
row.value,
|
||||
selection.row.key,
|
||||
props.surfaceKind === "balance_sheet"
|
||||
? "currency"
|
||||
: "currency",
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<p className="text-sm text-[color:var(--terminal-muted)]">No dimensional drill-down is available for this compact surface row.</p>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4 text-sm">
|
||||
<div className="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-4">
|
||||
<InspectorCard label="Label" value={selection.row.label} />
|
||||
<InspectorCard label="Key" value={selection.row.key} />
|
||||
<InspectorCard label="Parent Surface" value={parentSurfaceLabel ?? selection.row.parentSurfaceKey} />
|
||||
<InspectorCard label="Residual" value={selection.row.residualFlag ? 'Yes' : 'No'} />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-3 md:grid-cols-2">
|
||||
<InspectorCard label="Concept Key" value={selection.row.conceptKey} />
|
||||
<InspectorCard label="QName" value={selection.row.qname} />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-3 md:grid-cols-2">
|
||||
<InspectorCard label="Local Name" value={selection.row.localName} />
|
||||
<InspectorCard label="Source Fact IDs" value={(selection.row.sourceFactIds ?? []).length > 0 ? (selection.row.sourceFactIds ?? []).join(', ') : 'n/a'} />
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2">
|
||||
<p className="text-[color:var(--terminal-muted)]">Dimensions Summary</p>
|
||||
<p className="font-semibold text-[color:var(--terminal-bright)]">{renderList(selection.row.dimensionsSummary)}</p>
|
||||
</div>
|
||||
|
||||
{props.dimensionRows.length === 0 ? (
|
||||
<p className="text-sm text-[color:var(--terminal-muted)]">No dimensional facts were returned for the selected raw detail row.</p>
|
||||
) : (
|
||||
<div className="data-table-wrap">
|
||||
<table className="data-table min-w-[760px]">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Period</th>
|
||||
<th>Axis</th>
|
||||
<th>Member</th>
|
||||
<th>Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{props.dimensionRows.map((row, index) => (
|
||||
<tr key={`${selection.row.parentSurfaceKey}-${selection.row.key}-${row.periodId}-${index}`}>
|
||||
<td>{props.periods.find((period) => period.id === row.periodId)?.periodLabel ?? row.periodId}</td>
|
||||
<td>{row.axis}</td>
|
||||
<td>{row.member}</td>
|
||||
<td>{props.renderDimensionValue(row.value, selection.row.key, props.surfaceKind === 'balance_sheet' ? 'currency' : 'currency')}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</Panel>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user