mirror of
https://github.com/Studio-Saelix/sencho.git
synced 2026-08-06 17:08:10 +00:00
Anso
d6ce60d280
* fix: address review feedback on motion, fleet band, and snapshots - Reduced motion now also skips the animate-ui overlay open/close animations (dialog, sheet, popover, dropdown-menu) via a shared useReducedTransition that zeroes the transition when reduced motion is active; MotionConfig alone only neutralized transform/layout, leaving the opacity/blur fade. - Fleet tab band: flatten the list's own pill band so the tabs sit in a single full-width band instead of a nested second band. - Fleet Overview: label the node-update button "Node Update"; the add-node button becomes a ChartNetwork icon that opens Settings > Nodes (outline style, matching the node-update button) instead of the add-node modal. - Blueprint deployments empty state: drive the serif headings from the theme heading-style token so Calm drops the italic. - Snapshots: move the per-stack Restore onto the stack header row (right side), matching the ghost action style. * feat: standardize the tab band on Security and add a tab hover state - Apply the Fleet full-width tab band to the Security page (single band, the list's pill background flattened so the tabs sit directly in it). - Add a hover highlight to tabs so the band reads as interactive, not flat; the active tab is unaffected. * fix: drive reduced-motion transitions from the app setting, not the OS query useReducedTransition called framer-motion's useReducedMotion(), which only reflects the OS prefers-reduced-motion media query and ignores our MotionConfig / appearance toggle, so dialogs kept animating with the setting on. Read the app's useReducedMotion selector instead. Verified: with the setting on, the dialog opacity snaps 0->1 in one frame; with it off, it ramps over the spring. * feat: standardize stack-detail body text to text-xs and add a log expand toggle - Bump the anatomy panel body text (rows, field values, warnings) and the structured log lines from 10/11/12px to text-xs (12px), leaving the uppercase kicker labels and the log level/source badges as-is. - Add an expand control next to the log download button that collapses the Command Center so the logs pane fills the left column; toggles back to restore.
439 lines
20 KiB
TypeScript
439 lines
20 KiB
TypeScript
import { useCallback, useEffect, useState, type ReactNode } from 'react';
|
|
import {
|
|
LayoutDashboard, Boxes, FileWarning, KeyRound, BookCheck, EyeOff, History as HistoryIcon, Wrench, Info,
|
|
} from 'lucide-react';
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger, TabsHighlight, TabsHighlightItem } from '@/components/ui/tabs';
|
|
import { PageMasthead, type MastheadTone } from '@/components/ui/PageMasthead';
|
|
import { CapabilityGate } from '@/components/CapabilityGate';
|
|
import { deriveMasthead, SCANNER_DETECTIONS_NOTE } from './security/securityMasthead';
|
|
import { springs } from '@/lib/motion';
|
|
import { apiFetch } from '@/lib/api';
|
|
import { formatTimeAgo } from '@/lib/relativeTime';
|
|
import { useAuth } from '@/context/AuthContext';
|
|
import { useNodes } from '@/context/NodeContext';
|
|
import { useImageScan } from '@/hooks/useImageScan';
|
|
import { useIsMobile } from '@/hooks/use-is-mobile';
|
|
import { Masthead, type Tone } from './mobile/mobile-ui';
|
|
import { SecurityMobileTabs, type SecurityMobileTab } from './security/SecurityMobile';
|
|
import type { SecurityTab } from '@/lib/events';
|
|
import type { ImageFilterValue } from '@/lib/severityStyles';
|
|
import type { SecurityOverview, ScanSummary, ScanDetailTab, SecurityRiskTrendPoint, ExploitIntelFinding, FleetRole } from '@/types/security';
|
|
import { VulnerabilityScanSheet } from './VulnerabilityScanSheet';
|
|
import { SuppressionsPanel } from './settings/SuppressionsPanel';
|
|
import { MisconfigAckPanel } from './settings/MisconfigAckPanel';
|
|
import { OverviewTab } from './security/OverviewTab';
|
|
import { reasonImageFilter } from './security/postureNavigation';
|
|
import { ImagesTab } from './security/ImagesTab';
|
|
import { FindingsTab } from './security/FindingsTab';
|
|
import { ScanPolicyManager } from './security/ScanPolicyManager';
|
|
import { ScannerSetupTab } from './security/ScannerSetupTab';
|
|
import { HistoryTab } from './security/HistoryTab';
|
|
|
|
/** A /security/image-summaries 200 body must be a map of scan summaries. An
|
|
* unexpected shape is treated as an error, never as a benign "no findings". An
|
|
* empty object is valid (a node with no scans yet). */
|
|
function isScanSummaryMap(v: unknown): v is Record<string, ScanSummary> {
|
|
if (!v || typeof v !== 'object' || Array.isArray(v)) return false;
|
|
return Object.values(v).every(
|
|
(s) =>
|
|
!!s && typeof s === 'object'
|
|
&& typeof (s as ScanSummary).image_ref === 'string'
|
|
&& typeof (s as ScanSummary).scan_id === 'number',
|
|
);
|
|
}
|
|
|
|
interface SecurityViewProps {
|
|
activeTab: SecurityTab;
|
|
onTabChange: (tab: SecurityTab) => void;
|
|
/** Notifications + more-menu cluster for the mobile masthead right slot.
|
|
* Passed only on the bespoke phone surface; absent on desktop. */
|
|
headerActions?: ReactNode;
|
|
}
|
|
|
|
// Maps the masthead tone (shared with the desktop PageMasthead) onto the mobile
|
|
// masthead's dot tone, state-word color, and whether the dot pulses. Idle reads
|
|
// as an amber caution (the mobile dot has no neutral grey).
|
|
type StateWordClass = 'text-destructive' | 'text-warning' | 'text-stat-value' | 'text-stat-title';
|
|
const MOBILE_MASTHEAD_TONE: Record<MastheadTone, { dot: Tone; word: StateWordClass; pulse: boolean }> = {
|
|
error: { dot: 'destructive', word: 'text-destructive', pulse: true },
|
|
warn: { dot: 'warning', word: 'text-warning', pulse: true },
|
|
live: { dot: 'brand', word: 'text-stat-value', pulse: false },
|
|
idle: { dot: 'warning', word: 'text-stat-title', pulse: false },
|
|
};
|
|
|
|
export function SecurityView({ activeTab, onTabChange, headerActions }: SecurityViewProps) {
|
|
const { isAdmin } = useAuth();
|
|
const { activeNode } = useNodes();
|
|
const isMobile = useIsMobile();
|
|
const isRemote = activeNode?.type === 'remote';
|
|
|
|
const [overview, setOverview] = useState<SecurityOverview | null>(null);
|
|
// 'unsupported' = the node has no overview endpoint (e.g. an older remote, 404);
|
|
// 'failed' = a genuine error (5xx, network, malformed body) that must not read as benign.
|
|
const [overviewLoadError, setOverviewLoadError] = useState<'unsupported' | 'failed' | null>(null);
|
|
const [summaries, setSummaries] = useState<Record<string, ScanSummary>>({});
|
|
const [summariesLoading, setSummariesLoading] = useState(true);
|
|
const [summariesError, setSummariesError] = useState(false);
|
|
const [trend, setTrend] = useState<SecurityRiskTrendPoint[]>([]);
|
|
const [exploitIntel, setExploitIntel] = useState<ExploitIntelFinding[]>([]);
|
|
// True when the exploit-intel query hit its row cap: the list shows the
|
|
// highest-risk findings but not every one, so the UI discloses it.
|
|
const [exploitTruncated, setExploitTruncated] = useState(false);
|
|
const [isReplica, setIsReplica] = useState(false);
|
|
// Bumped after a node-wide scan completes to refetch the active node's posture.
|
|
const [reloadToken, setReloadToken] = useState(0);
|
|
|
|
const [inspectScanId, setInspectScanId] = useState<number | null>(null);
|
|
const [inspectInitialTab, setInspectInitialTab] = useState<ScanDetailTab | undefined>(undefined);
|
|
// Filter to preselect on the Images tab when arriving from an overview link
|
|
// (e.g. "fixable findings"). Null leaves the Images tab on its own default.
|
|
const [imagesFilter, setImagesFilter] = useState<ImageFilterValue | null>(null);
|
|
|
|
// Navigate between security tabs, optionally preselecting an Images filter so
|
|
// an overview action link lands on exactly the affected images.
|
|
const handleNavigate = useCallback((tab: SecurityTab, filter?: ImageFilterValue) => {
|
|
if (tab === 'images' && filter) setImagesFilter(filter);
|
|
onTabChange(tab);
|
|
}, [onTabChange]);
|
|
|
|
const onInspect = useCallback((scanId: number, initialTab?: ScanDetailTab) => {
|
|
setInspectInitialTab(initialTab);
|
|
setInspectScanId(scanId);
|
|
}, []);
|
|
|
|
// Scanner readiness gates the Images Actions column; an admin on a node whose
|
|
// scanner is available can trigger scans inline.
|
|
const canScan = isAdmin && !!overview?.scanner.available;
|
|
const { scanningRef, scanImage } = useImageScan({
|
|
onComplete: (scanId) => onInspect(scanId, 'vulns'),
|
|
onSummaries: setSummaries,
|
|
});
|
|
|
|
// Active-node scoped data: overview rollup + image summaries follow x-node-id.
|
|
// A failed fetch (5xx, network, malformed body) must surface as an error, never
|
|
// as a benign "clean / no findings" view, which for a security surface is the
|
|
// most dangerous misread. A 404 on /overview is the one benign case (an older
|
|
// remote node that lacks the endpoint).
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
(async () => {
|
|
setSummariesLoading(true);
|
|
setOverviewLoadError(null);
|
|
setSummariesError(false);
|
|
// The trend chart is non-critical: isolate its fetch entirely (transport
|
|
// failure included, not just a non-OK/malformed body) so it can never
|
|
// poison the overview/summaries error state. It degrades to an empty chart
|
|
// with its own "no history" message.
|
|
const trendPromise: Promise<SecurityRiskTrendPoint[]> = apiFetch('/security/overview/trend')
|
|
.then((r) => (r.ok ? r.json() : []))
|
|
.then((t) => (Array.isArray(t) ? t : []))
|
|
.catch(() => []);
|
|
// Exploit-intel powers two overview charts; isolate it like the trend so a
|
|
// failure (or an older node without the endpoint) degrades to empty panels.
|
|
const exploitIntelPromise: Promise<{ items: ExploitIntelFinding[]; truncated: boolean }> = apiFetch('/security/overview/exploit-intel')
|
|
.then((r) => (r.ok ? r.json() : { items: [], truncated: false }))
|
|
.then((b) => ({
|
|
items: b && Array.isArray(b.items) ? b.items : [],
|
|
truncated: b?.truncated === true,
|
|
}))
|
|
.catch(() => ({ items: [], truncated: false }));
|
|
try {
|
|
const [overviewRes, summariesRes] = await Promise.all([
|
|
apiFetch('/security/overview'),
|
|
apiFetch('/security/image-summaries'),
|
|
]);
|
|
if (cancelled) return;
|
|
if (overviewRes.ok) {
|
|
setOverview(await overviewRes.json());
|
|
} else {
|
|
setOverview(null);
|
|
setOverviewLoadError(overviewRes.status === 404 ? 'unsupported' : 'failed');
|
|
if (overviewRes.status !== 404) {
|
|
console.warn('[Security] overview request failed:', overviewRes.status);
|
|
}
|
|
}
|
|
if (summariesRes.ok) {
|
|
const body = await summariesRes.json();
|
|
if (isScanSummaryMap(body)) {
|
|
setSummaries(body);
|
|
} else {
|
|
// A 200 with an unexpected shape must not read as "no findings".
|
|
setSummaries({});
|
|
setSummariesError(true);
|
|
console.warn('[Security] image-summaries returned an unexpected shape');
|
|
}
|
|
} else {
|
|
setSummaries({});
|
|
setSummariesError(true);
|
|
console.warn('[Security] image-summaries request failed:', summariesRes.status);
|
|
}
|
|
} catch (err) {
|
|
if (cancelled) return;
|
|
console.warn('[Security] failed to load security data:', err);
|
|
setOverview(null);
|
|
setOverviewLoadError('failed');
|
|
setSummaries({});
|
|
setSummariesError(true);
|
|
} finally {
|
|
if (!cancelled) setSummariesLoading(false);
|
|
}
|
|
const [trendData, intelData] = await Promise.all([trendPromise, exploitIntelPromise]);
|
|
if (!cancelled) {
|
|
setTrend(trendData);
|
|
setExploitIntel(intelData.items);
|
|
setExploitTruncated(intelData.truncated);
|
|
}
|
|
})();
|
|
return () => { cancelled = true; };
|
|
}, [activeNode?.id, reloadToken]);
|
|
|
|
// Governance panels (suppressions/acks) are control-governed; probe the local
|
|
// fleet role so a replica renders them read-only, mirroring Settings.
|
|
useEffect(() => {
|
|
if (isRemote) return;
|
|
let cancelled = false;
|
|
(async () => {
|
|
try {
|
|
const res = await apiFetch('/fleet/role', { localOnly: true });
|
|
if (!res.ok || cancelled) return;
|
|
const data = await res.json();
|
|
if (!cancelled && (data?.role === 'control' || data?.role === 'replica')) {
|
|
setIsReplica((data.role as FleetRole) === 'replica');
|
|
}
|
|
} catch {
|
|
// Treat as control on probe failure (read-only gate is best-effort).
|
|
}
|
|
})();
|
|
return () => { cancelled = true; };
|
|
}, [isRemote, activeNode?.id]);
|
|
|
|
const { state, tone } = deriveMasthead(overview, overviewLoadError !== null);
|
|
const pulsing = tone === 'live' && !!overview?.scanner.available;
|
|
|
|
// The mobile tab strip mirrors the desktop tab IA, so every section stays
|
|
// reachable by scroll.
|
|
const mobileTabs: SecurityMobileTab[] = [
|
|
{ value: 'overview', label: 'Overview' },
|
|
{ value: 'images', label: 'Images' },
|
|
{ value: 'compose', label: 'Compose risks' },
|
|
{ value: 'secrets', label: 'Secrets' },
|
|
{ value: 'policies', label: 'Policies' },
|
|
{ value: 'suppressions', label: 'Suppressions' },
|
|
{ value: 'history', label: 'History' },
|
|
{ value: 'scanner', label: 'Scanner setup' },
|
|
];
|
|
|
|
// The scanner-detections disclaimer rides as an info affordance next to the
|
|
// scanned-images count rather than a standing caption below the masthead.
|
|
// When posture is Action needed, the subtitle leads with the action count and
|
|
// top blocker labels so the operator sees "why red" without opening the page.
|
|
const blockers = overview?.postureReasons?.filter((r) => r.severity === 'blocker') ?? [];
|
|
const actionSummary = overview?.posture === 'Action needed' && blockers.length > 0
|
|
? `${blockers.length} action${blockers.length === 1 ? '' : 's'}: ${blockers.slice(0, 2).map((r) => r.label.toLowerCase()).join(', ')} · `
|
|
: null;
|
|
const subtitle = overview ? (
|
|
<span className="inline-flex items-center gap-1.5">
|
|
{actionSummary ? <span>{actionSummary}</span> : null}
|
|
<span>
|
|
{overview.scannedImages} {overview.scannedImages === 1 ? 'image' : 'images'} scanned · scanner {overview.scanner.available ? 'ready' : 'not installed'}
|
|
</span>
|
|
<span
|
|
className="inline-flex shrink-0 cursor-help text-stat-subtitle/70 hover:text-stat-subtitle"
|
|
title={SCANNER_DETECTIONS_NOTE}
|
|
aria-label={SCANNER_DETECTIONS_NOTE}
|
|
>
|
|
<Info className="h-3 w-3" strokeWidth={1.5} aria-hidden="true" />
|
|
</span>
|
|
</span>
|
|
) : undefined;
|
|
|
|
// The tab panels are identical on desktop and mobile; only the masthead and
|
|
// the tab strip differ, so the panels are shared between both layouts.
|
|
const tabPanels = (
|
|
<>
|
|
<TabsContent value="overview">
|
|
<OverviewTab
|
|
overview={overview}
|
|
loadError={overviewLoadError}
|
|
trend={trend}
|
|
exploitIntel={exploitIntel}
|
|
exploitTruncated={exploitTruncated}
|
|
onNavigate={handleNavigate}
|
|
onInspect={onInspect}
|
|
canScan={canScan}
|
|
onScanComplete={() => setReloadToken((t) => t + 1)}
|
|
/>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="images">
|
|
<CapabilityGate capability="vulnerability-scanning" featureName="Vulnerability scanning">
|
|
<ImagesTab
|
|
summaries={summaries}
|
|
loading={summariesLoading}
|
|
error={summariesError}
|
|
onInspect={onInspect}
|
|
canScan={canScan}
|
|
scanningRef={scanningRef}
|
|
onScan={scanImage}
|
|
initialFilter={imagesFilter ?? undefined}
|
|
/>
|
|
</CapabilityGate>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="compose">
|
|
<CapabilityGate capability="vulnerability-scanning" featureName="Vulnerability scanning">
|
|
<FindingsTab kind="misconfig" summaries={summaries} loading={summariesLoading} error={summariesError} onInspect={onInspect} />
|
|
</CapabilityGate>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="secrets">
|
|
<CapabilityGate capability="vulnerability-scanning" featureName="Vulnerability scanning">
|
|
<FindingsTab kind="secret" summaries={summaries} loading={summariesLoading} error={summariesError} onInspect={onInspect} />
|
|
</CapabilityGate>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="policies">
|
|
<ScanPolicyManager />
|
|
</TabsContent>
|
|
|
|
<TabsContent value="suppressions">
|
|
{isRemote ? (
|
|
<div className="flex items-start gap-2 rounded-lg border border-card-border bg-muted/30 px-4 py-3">
|
|
<Info className="w-4 h-4 text-muted-foreground shrink-0 mt-0.5" strokeWidth={1.5} aria-hidden="true" />
|
|
<div className="text-sm">
|
|
<div className="font-medium">Managed on the local instance</div>
|
|
<p className="text-xs text-muted-foreground mt-0.5">
|
|
Suppressions and acknowledgements are managed on the local Sencho instance. Switch to the local node to view them.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-6">
|
|
<SuppressionsPanel isReplica={isReplica} />
|
|
<MisconfigAckPanel isReplica={isReplica} />
|
|
</div>
|
|
)}
|
|
</TabsContent>
|
|
|
|
<TabsContent value="history">
|
|
<CapabilityGate capability="vulnerability-scanning" featureName="Vulnerability scanning">
|
|
<HistoryTab onInspect={onInspect} />
|
|
</CapabilityGate>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="scanner">
|
|
<ScannerSetupTab />
|
|
</TabsContent>
|
|
</>
|
|
);
|
|
|
|
const scanSheet = (
|
|
<VulnerabilityScanSheet
|
|
scanId={inspectScanId}
|
|
initialTab={inspectInitialTab}
|
|
onClose={() => setInspectScanId(null)}
|
|
canGenerateSbom={isAdmin}
|
|
canExportSarif={isAdmin}
|
|
canCompare
|
|
canManageSuppressions={isAdmin}
|
|
/>
|
|
);
|
|
|
|
// Mobile: a bespoke masthead-led screen (no TopBar). The masthead leads with
|
|
// the notifications + more-menu cluster in its right slot, the tab strip is a
|
|
// horizontal scroller, and the active panel scrolls below.
|
|
if (isMobile) {
|
|
const mobileTone = MOBILE_MASTHEAD_TONE[tone];
|
|
return (
|
|
<div className="flex h-full min-h-0 flex-col">
|
|
<Masthead
|
|
kicker="security"
|
|
state={state}
|
|
stateTone={mobileTone.dot}
|
|
stateClassName={mobileTone.word}
|
|
live={mobileTone.pulse}
|
|
meta={subtitle}
|
|
right={headerActions}
|
|
/>
|
|
<SecurityMobileTabs tabs={mobileTabs} active={activeTab} onSelect={onTabChange} />
|
|
<div className="flex-1 min-h-0 overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden p-4">
|
|
<Tabs value={activeTab} onValueChange={(v) => onTabChange(v as SecurityTab)}>
|
|
{tabPanels}
|
|
</Tabs>
|
|
</div>
|
|
{scanSheet}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="h-full overflow-auto p-6">
|
|
<PageMasthead
|
|
state={state}
|
|
tone={tone}
|
|
pulsing={pulsing}
|
|
size="hero"
|
|
className="rounded-lg mb-4"
|
|
subtitle={subtitle}
|
|
metadata={overview ? [
|
|
{ label: 'CRITICAL', value: String(overview.critical), tone: overview.critical > 0 ? 'error' : 'value' },
|
|
{ label: 'HIGH', value: String(overview.high), tone: overview.high > 0 ? 'warn' : 'value' },
|
|
{ label: 'LAST SCAN', value: overview.lastSuccessfulScanAt ? formatTimeAgo(overview.lastSuccessfulScanAt) : 'never', tone: 'subtitle' },
|
|
] : undefined}
|
|
>
|
|
{overview?.posture === 'Action needed' && overview.primaryAction ? (
|
|
<button
|
|
type="button"
|
|
onClick={() => handleNavigate(
|
|
overview.primaryAction!.targetTab,
|
|
reasonImageFilter(overview.primaryAction!.kind),
|
|
)}
|
|
className="text-xs font-medium text-brand hover:underline whitespace-nowrap"
|
|
>
|
|
{overview.primaryAction.label} →
|
|
</button>
|
|
) : null}
|
|
</PageMasthead>
|
|
|
|
<Tabs value={activeTab} onValueChange={(v) => onTabChange(v as SecurityTab)}>
|
|
{/* Standard full-width tab band (matches Fleet): the list's own pill band
|
|
is flattened so the tabs sit directly in this single band. */}
|
|
<div className="flex items-center gap-3 mb-4 flex-wrap rounded-lg border border-card-border bg-card/40 px-2.5 py-1.5">
|
|
<TabsList className="border-transparent bg-transparent max-md:w-full max-md:overflow-x-auto max-md:[scrollbar-width:none]">
|
|
<TabsHighlight className="rounded-md bg-glass-highlight" transition={springs.snappy}>
|
|
<TabsHighlightItem value="overview">
|
|
<TabsTrigger value="overview"><LayoutDashboard className="w-4 h-4 mr-1.5" />Overview</TabsTrigger>
|
|
</TabsHighlightItem>
|
|
<TabsHighlightItem value="images">
|
|
<TabsTrigger value="images"><Boxes className="w-4 h-4 mr-1.5" />Images</TabsTrigger>
|
|
</TabsHighlightItem>
|
|
<TabsHighlightItem value="compose">
|
|
<TabsTrigger value="compose"><FileWarning className="w-4 h-4 mr-1.5" />Compose risks</TabsTrigger>
|
|
</TabsHighlightItem>
|
|
<TabsHighlightItem value="secrets">
|
|
<TabsTrigger value="secrets"><KeyRound className="w-4 h-4 mr-1.5" />Secrets</TabsTrigger>
|
|
</TabsHighlightItem>
|
|
<span aria-hidden className="self-center mx-1 h-4 w-px bg-border" />
|
|
<TabsHighlightItem value="policies">
|
|
<TabsTrigger value="policies"><BookCheck className="w-4 h-4 mr-1.5" />Policies</TabsTrigger>
|
|
</TabsHighlightItem>
|
|
<TabsHighlightItem value="suppressions">
|
|
<TabsTrigger value="suppressions"><EyeOff className="w-4 h-4 mr-1.5" />Suppressions</TabsTrigger>
|
|
</TabsHighlightItem>
|
|
<TabsHighlightItem value="history">
|
|
<TabsTrigger value="history"><HistoryIcon className="w-4 h-4 mr-1.5" />History</TabsTrigger>
|
|
</TabsHighlightItem>
|
|
<TabsHighlightItem value="scanner">
|
|
<TabsTrigger value="scanner"><Wrench className="w-4 h-4 mr-1.5" />Scanner setup</TabsTrigger>
|
|
</TabsHighlightItem>
|
|
</TabsHighlight>
|
|
</TabsList>
|
|
</div>
|
|
{tabPanels}
|
|
</Tabs>
|
|
|
|
{scanSheet}
|
|
</div>
|
|
);
|
|
}
|