feat: add return classification for archive chart, CARD API integration, compliance charts, systemd services
This commit is contained in:
root
@@ -102,6 +102,13 @@ const CLASSIFICATION_LABELS = {
|
||||
decommissioned: 'decommissioned',
|
||||
};
|
||||
|
||||
const RETURN_CLASSIFICATION_LABELS = {
|
||||
bu_reassignment: 'BU reassigned back',
|
||||
severity_drift: 'severity re-escalated',
|
||||
closed_on_platform: 'reopened on platform',
|
||||
decommissioned: 're-provisioned',
|
||||
};
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Build the summary text from anomaly data
|
||||
// ---------------------------------------------------------------------------
|
||||
@@ -220,6 +227,20 @@ export default function AnomalyBanner() {
|
||||
<span style={DETAIL_COUNT}>{anomaly.returned_count}</span>
|
||||
</div>
|
||||
)}
|
||||
{anomaly.returned_count > 0 && anomaly.return_classification && (
|
||||
<>
|
||||
{Object.entries(RETURN_CLASSIFICATION_LABELS).map(([key, label]) => {
|
||||
const val = (anomaly.return_classification || {})[key] || 0;
|
||||
if (val === 0) return null;
|
||||
return (
|
||||
<div key={`ret-${key}`} style={{ ...DETAIL_ROW, paddingLeft: '0.75rem', fontSize: '0.6rem', color: '#94A3B8' }}>
|
||||
<span>↳ {label}</span>
|
||||
<span style={{ fontWeight: '600', color: '#14B8A6' }}>{val}</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
// ComplianceChartsPanel.js
|
||||
// Tier-1 time-based compliance charts using Recharts.
|
||||
// Charts rendered: Active Findings Over Time, Change per Cycle,
|
||||
// Team Health, MTTR by Team, Persistent Findings, Archer Pipeline.
|
||||
// Team Health, Aging Findings Distribution, Resolution Rate, Archer Pipeline.
|
||||
|
||||
import React, { useState, useEffect, useMemo } from 'react';
|
||||
import {
|
||||
@@ -208,47 +208,68 @@ function TeamTrendChart({ data }) {
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Chart 4 — MTTR by Team (horizontal bar)
|
||||
// Chart 4 — Aging Findings Distribution (vertical stacked bar by age bucket)
|
||||
// ---------------------------------------------------------------------------
|
||||
function MttrChart({ data }) {
|
||||
if (data.length === 0) return <NoData msg="No resolved findings yet — MTTR will appear after items are remediated" />;
|
||||
function AgingChart({ data }) {
|
||||
if (data.length === 0) return <NoData />;
|
||||
const teamKeys = Object.keys(TEAM_COLORS);
|
||||
return (
|
||||
<ResponsiveContainer width="100%" height={Math.max(160, data.length * 44 + 40)}>
|
||||
<BarChart data={data} layout="vertical" margin={{ top: 4, right: 48, bottom: 0, left: 4 }}>
|
||||
<ResponsiveContainer width="100%" height={210}>
|
||||
<BarChart data={data} margin={{ top: 4, right: 12, bottom: 0, left: -12 }}>
|
||||
<CartesianGrid {...GRID_STYLE} />
|
||||
<XAxis type="number" tick={AXIS_STYLE} unit=" d" />
|
||||
<YAxis type="category" dataKey="team" tick={AXIS_STYLE} width={86} />
|
||||
<XAxis dataKey="bucket" tick={AXIS_STYLE} />
|
||||
<YAxis tick={AXIS_STYLE} allowDecimals={false} />
|
||||
<Tooltip content={<DarkTooltip />} />
|
||||
<Bar dataKey="avg_days" name="Avg Days" fill={TEAL} fillOpacity={0.8} radius={[0, 3, 3, 0]}
|
||||
label={{ position: 'right', style: { ...AXIS_STYLE, fill: '#64748B' }, formatter: v => `${v}d` }}
|
||||
/>
|
||||
<Legend wrapperStyle={LEGEND_STYLE} iconSize={8} />
|
||||
{teamKeys.map((team, i) => (
|
||||
<Bar
|
||||
key={team}
|
||||
dataKey={team}
|
||||
name={team}
|
||||
stackId="aging"
|
||||
fill={TEAM_COLORS[team]}
|
||||
fillOpacity={0.85}
|
||||
radius={i === teamKeys.length - 1 ? [2, 2, 0, 0] : [0, 0, 0, 0]}
|
||||
/>
|
||||
))}
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Chart 5 — Most Persistent Findings (horizontal bar by seen_count)
|
||||
// Chart 5 — Resolution Rate per Cycle (line chart, % of findings resolved)
|
||||
// ---------------------------------------------------------------------------
|
||||
function RecurringChart({ data }) {
|
||||
if (data.length === 0) return <NoData />;
|
||||
const top10 = data.slice(0, 10).map(r => ({
|
||||
...r,
|
||||
label: r.metric_id.length > 18 ? r.metric_id.slice(0, 18) + '…' : r.metric_id,
|
||||
}));
|
||||
function ResolutionRateChart({ data }) {
|
||||
const rateData = useMemo(() => {
|
||||
return data
|
||||
.filter(t => t.total_active > 0 || t.resolved_count > 0)
|
||||
.map(t => {
|
||||
const pool = t.total_active + t.resolved_count;
|
||||
return {
|
||||
date: t.date,
|
||||
rate: pool > 0 ? Math.round((t.resolved_count / pool) * 1000) / 10 : 0,
|
||||
resolved: t.resolved_count,
|
||||
active: t.total_active,
|
||||
};
|
||||
});
|
||||
}, [data]);
|
||||
|
||||
if (rateData.length < 2) return <NoData />;
|
||||
return (
|
||||
<ResponsiveContainer width="100%" height={Math.max(160, top10.length * 28 + 40)}>
|
||||
<BarChart data={top10} layout="vertical" margin={{ top: 4, right: 48, bottom: 0, left: 4 }}>
|
||||
<ResponsiveContainer width="100%" height={210}>
|
||||
<LineChart data={rateData} margin={{ top: 4, right: 12, bottom: 0, left: -12 }}>
|
||||
<CartesianGrid {...GRID_STYLE} />
|
||||
<XAxis type="number" tick={AXIS_STYLE} unit=" cycles" allowDecimals={false} />
|
||||
<YAxis type="category" dataKey="label" tick={AXIS_STYLE} width={110} />
|
||||
<Tooltip content={<DarkTooltip />} formatter={(val, name, props) => [
|
||||
`${val} cycles (${props.payload.host_count} host${props.payload.host_count !== 1 ? 's' : ''})`, props.payload.team
|
||||
]} />
|
||||
<Bar dataKey="seen_count" name="Cycles Seen" fill="#F59E0B" fillOpacity={0.85} radius={[0, 3, 3, 0]}
|
||||
label={{ position: 'right', style: { ...AXIS_STYLE, fill: '#64748B' }, formatter: v => `${v}×` }}
|
||||
<XAxis dataKey="date" tick={AXIS_STYLE} />
|
||||
<YAxis tick={AXIS_STYLE} unit="%" domain={[0, 'auto']} />
|
||||
<Tooltip content={<DarkTooltip />} />
|
||||
<Line
|
||||
type="monotone" dataKey="rate" name="Resolution %"
|
||||
stroke="#10B981" strokeWidth={2}
|
||||
dot={{ r: 4, fill: '#10B981', strokeWidth: 0 }}
|
||||
activeDot={{ r: 6 }}
|
||||
/>
|
||||
</BarChart>
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
);
|
||||
}
|
||||
@@ -286,8 +307,7 @@ export default function ComplianceChartsPanel() {
|
||||
const [collapsed, setCollapsed] = useState(false);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [trends, setTrends] = useState([]);
|
||||
const [mttr, setMttr] = useState([]);
|
||||
const [recurring, setRecurring] = useState([]);
|
||||
const [aging, setAging] = useState([]);
|
||||
const [archerRaw, setArcherRaw] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -295,16 +315,14 @@ export default function ComplianceChartsPanel() {
|
||||
const load = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const [tRes, mRes, rRes, aRes] = await Promise.all([
|
||||
const [tRes, mRes, aRes] = await Promise.all([
|
||||
fetch(`${API_BASE}/compliance/trends`, { credentials: 'include' }),
|
||||
fetch(`${API_BASE}/compliance/mttr`, { credentials: 'include' }),
|
||||
fetch(`${API_BASE}/compliance/top-recurring`, { credentials: 'include' }),
|
||||
fetch(`${API_BASE}/archer-tickets/status-trend`, { credentials: 'include' }),
|
||||
]);
|
||||
if (cancelled) return;
|
||||
if (tRes.ok) { const d = await tRes.json(); setTrends(d.trends || []); }
|
||||
if (mRes.ok) { const d = await mRes.json(); setMttr(d.mttr || []); }
|
||||
if (rRes.ok) { const d = await rRes.json(); setRecurring(d.items || []); }
|
||||
if (mRes.ok) { const d = await mRes.json(); setAging(d.aging || []); }
|
||||
if (aRes.ok) { const d = await aRes.json(); setArcherRaw(d.statusTrend || []); }
|
||||
} catch { /* silent — charts will show no-data state */ }
|
||||
finally { if (!cancelled) setLoading(false); }
|
||||
@@ -393,20 +411,20 @@ export default function ComplianceChartsPanel() {
|
||||
<TeamTrendChart data={formattedTrends} />
|
||||
</ChartCard>
|
||||
|
||||
{/* 4. MTTR per team */}
|
||||
{/* 4. Aging Findings Distribution */}
|
||||
<ChartCard
|
||||
title="Mean Time to Resolution"
|
||||
subtitle="Average calendar days between first-seen and resolved, by team"
|
||||
title="Aging Findings Distribution"
|
||||
subtitle="Active findings by age bucket — stacked by team"
|
||||
>
|
||||
<MttrChart data={mttr} />
|
||||
<AgingChart data={aging} />
|
||||
</ChartCard>
|
||||
|
||||
{/* 5. Most persistent / recurring findings */}
|
||||
{/* 5. Resolution Rate per Cycle */}
|
||||
<ChartCard
|
||||
title="Most Persistent Findings"
|
||||
subtitle="Active items with the highest recurrence count (top 10)"
|
||||
title="Resolution Rate"
|
||||
subtitle="Percentage of known findings resolved each cycle — higher is better"
|
||||
>
|
||||
<RecurringChart data={recurring} />
|
||||
<ResolutionRateChart data={formattedTrends} />
|
||||
</ChartCard>
|
||||
|
||||
{/* 6. Archer ticket pipeline */}
|
||||
|
||||
@@ -76,6 +76,7 @@ function ArchiveTooltip({ active, payload, label }) {
|
||||
// Parse classification if present
|
||||
const dataPoint = payload[0]?.payload;
|
||||
const classification = dataPoint?.classification;
|
||||
const returnClassification = dataPoint?.return_classification;
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
@@ -133,6 +134,37 @@ function ArchiveTooltip({ active, payload, label }) {
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{returnClassification && returned > 0 && (returnClassification.bu_reassignment > 0 || returnClassification.severity_drift > 0 || returnClassification.closed_on_platform > 0 || returnClassification.decommissioned > 0) && (
|
||||
<div style={{ borderTop: '1px solid rgba(255,255,255,0.06)', marginTop: '0.35rem', paddingTop: '0.3rem' }}>
|
||||
<div style={{ color: '#475569', fontSize: '0.58rem', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: '0.2rem' }}>
|
||||
Returned because
|
||||
</div>
|
||||
{returnClassification.bu_reassignment > 0 && (
|
||||
<div style={{ color: '#FB923C', fontSize: '0.62rem', display: 'flex', justifyContent: 'space-between', gap: '1rem' }}>
|
||||
<span style={{ opacity: 0.8 }}>BU reassigned back</span>
|
||||
<span>{returnClassification.bu_reassignment}</span>
|
||||
</div>
|
||||
)}
|
||||
{returnClassification.severity_drift > 0 && (
|
||||
<div style={{ color: '#A78BFA', fontSize: '0.62rem', display: 'flex', justifyContent: 'space-between', gap: '1rem' }}>
|
||||
<span style={{ opacity: 0.8 }}>Severity re-escalated</span>
|
||||
<span>{returnClassification.severity_drift}</span>
|
||||
</div>
|
||||
)}
|
||||
{returnClassification.closed_on_platform > 0 && (
|
||||
<div style={{ color: SKY, fontSize: '0.62rem', display: 'flex', justifyContent: 'space-between', gap: '1rem' }}>
|
||||
<span style={{ opacity: 0.8 }}>Reopened on platform</span>
|
||||
<span>{returnClassification.closed_on_platform}</span>
|
||||
</div>
|
||||
)}
|
||||
{returnClassification.decommissioned > 0 && (
|
||||
<div style={{ color: '#94A3B8', fontSize: '0.62rem', display: 'flex', justifyContent: 'space-between', gap: '1rem' }}>
|
||||
<span style={{ opacity: 0.8 }}>Re-provisioned</span>
|
||||
<span>{returnClassification.decommissioned}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -219,10 +251,11 @@ export default function IvantiCountsChart() {
|
||||
archived: anomaly.newly_archived_count || 0,
|
||||
returned: anomaly.returned_count || 0,
|
||||
classification: anomaly.classification || {},
|
||||
return_classification: anomaly.return_classification || {},
|
||||
is_significant: anomaly.is_significant,
|
||||
};
|
||||
}
|
||||
return { date: point.date, archived: 0, returned: 0, classification: {}, is_significant: false };
|
||||
return { date: point.date, archived: 0, returned: 0, classification: {}, return_classification: {}, is_significant: false };
|
||||
});
|
||||
}, [anomalies, chartData]);
|
||||
|
||||
|
||||
@@ -1518,7 +1518,7 @@ function AddToQueuePopover({ finding, anchorRect, queueForm, setQueueForm, onAdd
|
||||
// ---------------------------------------------------------------------------
|
||||
// QueuePanel — fixed slide-out panel showing the user's Ivanti queue
|
||||
// ---------------------------------------------------------------------------
|
||||
function QueuePanel({ open, items, onClose, onUpdate, onDelete, onDeleteMany, onClearCompleted, onCreateFpWorkflow, onRedirectComplete, canWrite, fpSubmissions, onEditSubmission }) {
|
||||
function QueuePanel({ open, items, onClose, onUpdate, onDelete, onDeleteMany, onClearCompleted, onCreateFpWorkflow, onRedirectComplete, canWrite, fpSubmissions, onEditSubmission, cardConfigured, cardTeams, onQueueRefresh }) {
|
||||
const pendingCount = items.filter((i) => i.status === 'pending').length;
|
||||
const completedCount = items.filter((i) => i.status === 'complete').length;
|
||||
|
||||
@@ -1526,6 +1526,24 @@ function QueuePanel({ open, items, onClose, onUpdate, onDelete, onDeleteMany, on
|
||||
const [redirectItem, setRedirectItem] = useState(null);
|
||||
const [redirectSuccess, setRedirectSuccess] = useState(null);
|
||||
|
||||
// CARD action state — tracks which item has an active action form
|
||||
const [cardAction, setCardAction] = useState(null); // { itemId, type: 'confirm'|'decline'|'redirect' }
|
||||
const [cardFormTeam, setCardFormTeam] = useState('');
|
||||
const [cardFormComment, setCardFormComment] = useState('');
|
||||
const [cardFormFromTeam, setCardFormFromTeam] = useState('');
|
||||
const [cardFormToTeam, setCardFormToTeam] = useState('');
|
||||
const [cardActionLoading, setCardActionLoading] = useState(false);
|
||||
const [cardActionError, setCardActionError] = useState(null);
|
||||
|
||||
// CARD Asset Search state
|
||||
const [assetSearchOpen, setAssetSearchOpen] = useState(false);
|
||||
const [assetSearchTeam, setAssetSearchTeam] = useState('');
|
||||
const [assetSearchDisposition, setAssetSearchDisposition] = useState('confirmed');
|
||||
const [assetSearchResults, setAssetSearchResults] = useState(null);
|
||||
const [assetSearchLoading, setAssetSearchLoading] = useState(false);
|
||||
const [assetSearchError, setAssetSearchError] = useState(null);
|
||||
const [assetSearchPage, setAssetSearchPage] = useState(1);
|
||||
|
||||
// Drop any selected IDs that no longer exist in items
|
||||
useEffect(() => {
|
||||
setSelectedIds((prev) => {
|
||||
@@ -1556,6 +1574,110 @@ function QueuePanel({ open, items, onClose, onUpdate, onDelete, onDeleteMany, on
|
||||
setTimeout(() => setRedirectSuccess(null), 3000);
|
||||
};
|
||||
|
||||
// CARD action handlers
|
||||
const openCardAction = (itemId, type) => {
|
||||
setCardAction({ itemId, type });
|
||||
setCardFormTeam('');
|
||||
setCardFormComment('');
|
||||
setCardFormFromTeam('');
|
||||
setCardFormToTeam('');
|
||||
setCardActionError(null);
|
||||
};
|
||||
|
||||
const closeCardAction = () => {
|
||||
setCardAction(null);
|
||||
setCardFormTeam('');
|
||||
setCardFormComment('');
|
||||
setCardFormFromTeam('');
|
||||
setCardFormToTeam('');
|
||||
setCardActionError(null);
|
||||
setCardActionLoading(false);
|
||||
};
|
||||
|
||||
const handleCardConfirmDecline = async (item, actionType) => {
|
||||
if (!cardFormTeam) return;
|
||||
setCardActionLoading(true);
|
||||
setCardActionError(null);
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/card/queue/${item.id}/${actionType}`, {
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
teamName: cardFormTeam,
|
||||
assetId: item.ip_address,
|
||||
comment: cardFormComment || '',
|
||||
}),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (!res.ok) {
|
||||
setCardActionError(data.error || `${actionType} failed.`);
|
||||
setCardActionLoading(false);
|
||||
return;
|
||||
}
|
||||
// Update local state to complete without full refresh
|
||||
onUpdate(item.id, { status: 'complete' });
|
||||
closeCardAction();
|
||||
} catch (err) {
|
||||
setCardActionError(err.message || 'Network error.');
|
||||
setCardActionLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCardRedirect = async (item) => {
|
||||
if (!cardFormFromTeam || !cardFormToTeam) return;
|
||||
setCardActionLoading(true);
|
||||
setCardActionError(null);
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/card/queue/${item.id}/redirect`, {
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
fromTeam: cardFormFromTeam,
|
||||
toTeam: cardFormToTeam,
|
||||
assetId: item.ip_address,
|
||||
}),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (!res.ok) {
|
||||
setCardActionError(data.error || 'Redirect failed.');
|
||||
setCardActionLoading(false);
|
||||
return;
|
||||
}
|
||||
onUpdate(item.id, { status: 'complete' });
|
||||
closeCardAction();
|
||||
} catch (err) {
|
||||
setCardActionError(err.message || 'Network error.');
|
||||
setCardActionLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// CARD Asset Search handler
|
||||
const handleAssetSearch = async (page = 1) => {
|
||||
if (!assetSearchTeam || !assetSearchDisposition) return;
|
||||
setAssetSearchLoading(true);
|
||||
setAssetSearchError(null);
|
||||
setAssetSearchPage(page);
|
||||
try {
|
||||
const res = await fetch(
|
||||
`${API_BASE}/card/teams/${encodeURIComponent(assetSearchTeam)}/assets?disposition=${encodeURIComponent(assetSearchDisposition)}&page_size=50&page=${page}`,
|
||||
{ credentials: 'include' }
|
||||
);
|
||||
const data = await res.json();
|
||||
if (!res.ok) {
|
||||
setAssetSearchError(data.error || 'Search failed.');
|
||||
setAssetSearchLoading(false);
|
||||
return;
|
||||
}
|
||||
setAssetSearchResults(data);
|
||||
} catch (err) {
|
||||
setAssetSearchError(err.message || 'Network error.');
|
||||
} finally {
|
||||
setAssetSearchLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Render a single queue item row
|
||||
const renderQueueItem = (item, { done, selectedIds, toggleSelect, onUpdate, onDelete, setRedirectItem, canWrite }) => {
|
||||
const wfColor = item.workflow_type === 'FP' ? { col: '#F59E0B', rgb: '245,158,11' }
|
||||
@@ -1681,6 +1803,66 @@ function QueuePanel({ open, items, onClose, onUpdate, onDelete, onDeleteMany, on
|
||||
{item.workflow_type}
|
||||
</span>
|
||||
|
||||
{/* CARD action buttons — pending CARD items only */}
|
||||
{item.workflow_type === 'CARD' && item.status === 'pending' && canWrite && (
|
||||
<div style={{ display: 'flex', gap: '0.25rem', flexShrink: 0 }}>
|
||||
<button
|
||||
onClick={() => openCardAction(item.id, 'confirm')}
|
||||
disabled={!cardConfigured || cardActionLoading}
|
||||
title={!cardConfigured ? 'CARD integration not configured' : 'Confirm asset'}
|
||||
style={{
|
||||
background: cardConfigured ? 'rgba(16,185,129,0.1)' : 'transparent',
|
||||
border: `1px solid ${cardConfigured ? 'rgba(16,185,129,0.3)' : 'rgba(255,255,255,0.05)'}`,
|
||||
borderRadius: '0.2rem',
|
||||
padding: '0.15rem 0.3rem',
|
||||
fontFamily: 'monospace', fontSize: '0.55rem', fontWeight: '700',
|
||||
color: cardConfigured ? '#10B981' : '#334155',
|
||||
cursor: cardConfigured ? 'pointer' : 'not-allowed',
|
||||
textTransform: 'uppercase', letterSpacing: '0.04em',
|
||||
transition: 'all 0.12s',
|
||||
}}
|
||||
>
|
||||
Confirm
|
||||
</button>
|
||||
<button
|
||||
onClick={() => openCardAction(item.id, 'decline')}
|
||||
disabled={!cardConfigured || cardActionLoading}
|
||||
title={!cardConfigured ? 'CARD integration not configured' : 'Decline asset'}
|
||||
style={{
|
||||
background: cardConfigured ? 'rgba(239,68,68,0.1)' : 'transparent',
|
||||
border: `1px solid ${cardConfigured ? 'rgba(239,68,68,0.3)' : 'rgba(255,255,255,0.05)'}`,
|
||||
borderRadius: '0.2rem',
|
||||
padding: '0.15rem 0.3rem',
|
||||
fontFamily: 'monospace', fontSize: '0.55rem', fontWeight: '700',
|
||||
color: cardConfigured ? '#EF4444' : '#334155',
|
||||
cursor: cardConfigured ? 'pointer' : 'not-allowed',
|
||||
textTransform: 'uppercase', letterSpacing: '0.04em',
|
||||
transition: 'all 0.12s',
|
||||
}}
|
||||
>
|
||||
Decline
|
||||
</button>
|
||||
<button
|
||||
onClick={() => openCardAction(item.id, 'redirect')}
|
||||
disabled={!cardConfigured || cardActionLoading}
|
||||
title={!cardConfigured ? 'CARD integration not configured' : 'Redirect asset'}
|
||||
style={{
|
||||
background: cardConfigured ? 'rgba(14,165,233,0.1)' : 'transparent',
|
||||
border: `1px solid ${cardConfigured ? 'rgba(14,165,233,0.3)' : 'rgba(255,255,255,0.05)'}`,
|
||||
borderRadius: '0.2rem',
|
||||
padding: '0.15rem 0.3rem',
|
||||
fontFamily: 'monospace', fontSize: '0.55rem', fontWeight: '700',
|
||||
color: cardConfigured ? '#0EA5E9' : '#334155',
|
||||
cursor: cardConfigured ? 'pointer' : 'not-allowed',
|
||||
textTransform: 'uppercase', letterSpacing: '0.04em',
|
||||
transition: 'all 0.12s',
|
||||
}}
|
||||
>
|
||||
Redirect
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Redirect button — completed items only */}
|
||||
{canWrite && done && (
|
||||
<button
|
||||
@@ -1708,6 +1890,228 @@ function QueuePanel({ open, items, onClose, onUpdate, onDelete, onDeleteMany, on
|
||||
);
|
||||
};
|
||||
|
||||
// Render CARD action inline form below a queue item
|
||||
const renderCardActionForm = (item) => {
|
||||
if (!cardAction || cardAction.itemId !== item.id) return null;
|
||||
const { type } = cardAction;
|
||||
|
||||
if (type === 'confirm' || type === 'decline') {
|
||||
const accentColor = type === 'confirm' ? '#10B981' : '#EF4444';
|
||||
const accentRgb = type === 'confirm' ? '16,185,129' : '239,68,68';
|
||||
const canSubmit = !cardActionLoading && cardFormTeam.length > 0;
|
||||
return (
|
||||
<div style={{
|
||||
padding: '0.5rem 0.625rem',
|
||||
marginBottom: '0.25rem',
|
||||
borderRadius: '0.375rem',
|
||||
background: `rgba(${accentRgb},0.04)`,
|
||||
border: `1px solid rgba(${accentRgb},0.15)`,
|
||||
}}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.375rem', marginBottom: '0.375rem' }}>
|
||||
<span style={{ fontFamily: 'monospace', fontSize: '0.62rem', fontWeight: '700', color: accentColor, textTransform: 'uppercase', letterSpacing: '0.08em' }}>
|
||||
{type === 'confirm' ? 'Confirm Asset' : 'Decline Asset'}
|
||||
</span>
|
||||
</div>
|
||||
<select
|
||||
value={cardFormTeam}
|
||||
onChange={(e) => setCardFormTeam(e.target.value)}
|
||||
disabled={cardActionLoading}
|
||||
style={{
|
||||
width: '100%', boxSizing: 'border-box',
|
||||
background: 'rgba(15, 23, 42, 0.6)',
|
||||
border: `1px solid rgba(${accentRgb}, 0.25)`,
|
||||
borderRadius: '0.25rem',
|
||||
padding: '0.35rem 0.5rem',
|
||||
fontFamily: "'JetBrains Mono', monospace", fontSize: '0.7rem',
|
||||
color: '#E2E8F0',
|
||||
outline: 'none',
|
||||
marginBottom: '0.375rem',
|
||||
}}
|
||||
>
|
||||
<option value="">Select team…</option>
|
||||
{cardTeams.map(t => <option key={t} value={t}>{t}</option>)}
|
||||
</select>
|
||||
<input
|
||||
type="text"
|
||||
value={cardFormComment}
|
||||
onChange={(e) => setCardFormComment(e.target.value)}
|
||||
disabled={cardActionLoading}
|
||||
placeholder="Comment (optional)"
|
||||
maxLength={500}
|
||||
style={{
|
||||
width: '100%', boxSizing: 'border-box',
|
||||
background: 'rgba(15, 23, 42, 0.6)',
|
||||
border: `1px solid rgba(${accentRgb}, 0.15)`,
|
||||
borderRadius: '0.25rem',
|
||||
padding: '0.35rem 0.5rem',
|
||||
fontFamily: "'JetBrains Mono', monospace", fontSize: '0.7rem',
|
||||
color: '#E2E8F0',
|
||||
outline: 'none',
|
||||
marginBottom: '0.375rem',
|
||||
}}
|
||||
/>
|
||||
{cardActionError && (
|
||||
<div style={{
|
||||
display: 'flex', alignItems: 'center', gap: '0.375rem',
|
||||
padding: '0.3rem 0.5rem',
|
||||
background: 'rgba(239, 68, 68, 0.1)',
|
||||
border: '1px solid rgba(239, 68, 68, 0.25)',
|
||||
borderRadius: '0.25rem',
|
||||
marginBottom: '0.375rem',
|
||||
}}>
|
||||
<AlertCircle style={{ width: '12px', height: '12px', color: '#EF4444', flexShrink: 0 }} />
|
||||
<span style={{ fontFamily: 'monospace', fontSize: '0.62rem', color: '#FCA5A5' }}>{cardActionError}</span>
|
||||
</div>
|
||||
)}
|
||||
<div style={{ display: 'flex', gap: '0.375rem' }}>
|
||||
<button
|
||||
onClick={() => handleCardConfirmDecline(item, type)}
|
||||
disabled={!canSubmit}
|
||||
style={{
|
||||
flex: 1, padding: '0.3rem',
|
||||
background: canSubmit ? `rgba(${accentRgb},0.12)` : 'transparent',
|
||||
border: `1px solid ${canSubmit ? `rgba(${accentRgb},0.35)` : 'rgba(255,255,255,0.05)'}`,
|
||||
borderRadius: '0.25rem',
|
||||
color: canSubmit ? accentColor : '#334155',
|
||||
fontFamily: 'monospace', fontSize: '0.65rem', fontWeight: '600',
|
||||
cursor: canSubmit ? 'pointer' : 'not-allowed',
|
||||
textTransform: 'uppercase', letterSpacing: '0.04em',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.25rem',
|
||||
}}
|
||||
>
|
||||
{cardActionLoading && <Loader style={{ width: '10px', height: '10px', animation: 'spin 1s linear infinite' }} />}
|
||||
{cardActionLoading ? 'Submitting…' : type === 'confirm' ? 'Confirm' : 'Decline'}
|
||||
</button>
|
||||
<button
|
||||
onClick={closeCardAction}
|
||||
disabled={cardActionLoading}
|
||||
style={{
|
||||
padding: '0.3rem 0.5rem',
|
||||
background: 'transparent',
|
||||
border: '1px solid rgba(255,255,255,0.08)',
|
||||
borderRadius: '0.25rem',
|
||||
color: '#64748B',
|
||||
fontFamily: 'monospace', fontSize: '0.65rem', fontWeight: '600',
|
||||
cursor: 'pointer',
|
||||
textTransform: 'uppercase', letterSpacing: '0.04em',
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (type === 'redirect') {
|
||||
const canSubmit = !cardActionLoading && cardFormFromTeam.length > 0 && cardFormToTeam.length > 0;
|
||||
return (
|
||||
<div style={{
|
||||
padding: '0.5rem 0.625rem',
|
||||
marginBottom: '0.25rem',
|
||||
borderRadius: '0.375rem',
|
||||
background: 'rgba(14,165,233,0.04)',
|
||||
border: '1px solid rgba(14,165,233,0.15)',
|
||||
}}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.375rem', marginBottom: '0.375rem' }}>
|
||||
<span style={{ fontFamily: 'monospace', fontSize: '0.62rem', fontWeight: '700', color: '#0EA5E9', textTransform: 'uppercase', letterSpacing: '0.08em' }}>
|
||||
Redirect Asset
|
||||
</span>
|
||||
</div>
|
||||
<select
|
||||
value={cardFormFromTeam}
|
||||
onChange={(e) => setCardFormFromTeam(e.target.value)}
|
||||
disabled={cardActionLoading}
|
||||
style={{
|
||||
width: '100%', boxSizing: 'border-box',
|
||||
background: 'rgba(15, 23, 42, 0.6)',
|
||||
border: '1px solid rgba(14, 165, 233, 0.25)',
|
||||
borderRadius: '0.25rem',
|
||||
padding: '0.35rem 0.5rem',
|
||||
fontFamily: "'JetBrains Mono', monospace", fontSize: '0.7rem',
|
||||
color: '#E2E8F0',
|
||||
outline: 'none',
|
||||
marginBottom: '0.375rem',
|
||||
}}
|
||||
>
|
||||
<option value="">From team…</option>
|
||||
{cardTeams.map(t => <option key={t} value={t}>{t}</option>)}
|
||||
</select>
|
||||
<select
|
||||
value={cardFormToTeam}
|
||||
onChange={(e) => setCardFormToTeam(e.target.value)}
|
||||
disabled={cardActionLoading}
|
||||
style={{
|
||||
width: '100%', boxSizing: 'border-box',
|
||||
background: 'rgba(15, 23, 42, 0.6)',
|
||||
border: '1px solid rgba(14, 165, 233, 0.25)',
|
||||
borderRadius: '0.25rem',
|
||||
padding: '0.35rem 0.5rem',
|
||||
fontFamily: "'JetBrains Mono', monospace", fontSize: '0.7rem',
|
||||
color: '#E2E8F0',
|
||||
outline: 'none',
|
||||
marginBottom: '0.375rem',
|
||||
}}
|
||||
>
|
||||
<option value="">To team…</option>
|
||||
{cardTeams.map(t => <option key={t} value={t}>{t}</option>)}
|
||||
</select>
|
||||
{cardActionError && (
|
||||
<div style={{
|
||||
display: 'flex', alignItems: 'center', gap: '0.375rem',
|
||||
padding: '0.3rem 0.5rem',
|
||||
background: 'rgba(239, 68, 68, 0.1)',
|
||||
border: '1px solid rgba(239, 68, 68, 0.25)',
|
||||
borderRadius: '0.25rem',
|
||||
marginBottom: '0.375rem',
|
||||
}}>
|
||||
<AlertCircle style={{ width: '12px', height: '12px', color: '#EF4444', flexShrink: 0 }} />
|
||||
<span style={{ fontFamily: 'monospace', fontSize: '0.62rem', color: '#FCA5A5' }}>{cardActionError}</span>
|
||||
</div>
|
||||
)}
|
||||
<div style={{ display: 'flex', gap: '0.375rem' }}>
|
||||
<button
|
||||
onClick={() => handleCardRedirect(item)}
|
||||
disabled={!canSubmit}
|
||||
style={{
|
||||
flex: 1, padding: '0.3rem',
|
||||
background: canSubmit ? 'rgba(14,165,233,0.12)' : 'transparent',
|
||||
border: `1px solid ${canSubmit ? 'rgba(14,165,233,0.35)' : 'rgba(255,255,255,0.05)'}`,
|
||||
borderRadius: '0.25rem',
|
||||
color: canSubmit ? '#0EA5E9' : '#334155',
|
||||
fontFamily: 'monospace', fontSize: '0.65rem', fontWeight: '600',
|
||||
cursor: canSubmit ? 'pointer' : 'not-allowed',
|
||||
textTransform: 'uppercase', letterSpacing: '0.04em',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.25rem',
|
||||
}}
|
||||
>
|
||||
{cardActionLoading && <Loader style={{ width: '10px', height: '10px', animation: 'spin 1s linear infinite' }} />}
|
||||
{cardActionLoading ? 'Redirecting…' : 'Redirect'}
|
||||
</button>
|
||||
<button
|
||||
onClick={closeCardAction}
|
||||
disabled={cardActionLoading}
|
||||
style={{
|
||||
padding: '0.3rem 0.5rem',
|
||||
background: 'transparent',
|
||||
border: '1px solid rgba(255,255,255,0.08)',
|
||||
borderRadius: '0.25rem',
|
||||
color: '#64748B',
|
||||
fontFamily: 'monospace', fontSize: '0.65rem', fontWeight: '600',
|
||||
cursor: 'pointer',
|
||||
textTransform: 'uppercase', letterSpacing: '0.04em',
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
// Inventory items (CARD + GRANITE) are their own top section; everything else groups by vendor
|
||||
const grouped = useMemo(() => {
|
||||
const inventoryItems = items.filter((i) => i.workflow_type === 'CARD' || i.workflow_type === 'GRANITE');
|
||||
@@ -1819,7 +2223,12 @@ function QueuePanel({ open, items, onClose, onUpdate, onDelete, onDeleteMany, on
|
||||
{/* Items — Inventory section renders CARD then GRANITE with optional sub-divider */}
|
||||
{isInventory ? (
|
||||
<>
|
||||
{cardItems.map((item) => renderQueueItem(item, { done: item.status === 'complete', selectedIds, toggleSelect, onUpdate, onDelete, setRedirectItem, canWrite }))}
|
||||
{cardItems.map((item) => (
|
||||
<React.Fragment key={item.id}>
|
||||
{renderQueueItem(item, { done: item.status === 'complete', selectedIds, toggleSelect, onUpdate, onDelete, setRedirectItem, canWrite })}
|
||||
{renderCardActionForm(item)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
{cardItems.length > 0 && graniteItems.length > 0 && (
|
||||
<div style={{
|
||||
height: '1px',
|
||||
@@ -1836,6 +2245,211 @@ function QueuePanel({ open, items, onClose, onUpdate, onDelete, onDeleteMany, on
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* CARD Asset Search section */}
|
||||
{cardConfigured && (
|
||||
<div style={{ padding: '0 1.25rem 0.75rem' }}>
|
||||
<div
|
||||
onClick={() => setAssetSearchOpen(!assetSearchOpen)}
|
||||
style={{
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'space-between',
|
||||
padding: '0.3rem 0', marginBottom: '0.375rem',
|
||||
borderBottom: '1px solid rgba(14,165,233,0.2)',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.375rem' }}>
|
||||
<Database style={{ width: '12px', height: '12px', color: '#0EA5E9' }} />
|
||||
<span style={{ fontFamily: 'monospace', fontSize: '0.68rem', fontWeight: '700', color: '#0EA5E9', textTransform: 'uppercase', letterSpacing: '0.1em' }}>
|
||||
CARD Asset Search
|
||||
</span>
|
||||
</div>
|
||||
{assetSearchOpen
|
||||
? <ChevronUp style={{ width: '14px', height: '14px', color: '#475569' }} />
|
||||
: <ChevronDown style={{ width: '14px', height: '14px', color: '#475569' }} />
|
||||
}
|
||||
</div>
|
||||
|
||||
{assetSearchOpen && (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.375rem' }}>
|
||||
<select
|
||||
value={assetSearchTeam}
|
||||
onChange={(e) => { setAssetSearchTeam(e.target.value); setAssetSearchResults(null); setAssetSearchError(null); }}
|
||||
style={{
|
||||
width: '100%', boxSizing: 'border-box',
|
||||
background: 'rgba(15, 23, 42, 0.6)',
|
||||
border: '1px solid rgba(14, 165, 233, 0.25)',
|
||||
borderRadius: '0.25rem',
|
||||
padding: '0.35rem 0.5rem',
|
||||
fontFamily: "'JetBrains Mono', monospace", fontSize: '0.7rem',
|
||||
color: '#E2E8F0',
|
||||
outline: 'none',
|
||||
}}
|
||||
>
|
||||
<option value="">Select team…</option>
|
||||
{cardTeams.map(t => <option key={t} value={t}>{t}</option>)}
|
||||
</select>
|
||||
<select
|
||||
value={assetSearchDisposition}
|
||||
onChange={(e) => { setAssetSearchDisposition(e.target.value); setAssetSearchResults(null); setAssetSearchError(null); }}
|
||||
style={{
|
||||
width: '100%', boxSizing: 'border-box',
|
||||
background: 'rgba(15, 23, 42, 0.6)',
|
||||
border: '1px solid rgba(14, 165, 233, 0.25)',
|
||||
borderRadius: '0.25rem',
|
||||
padding: '0.35rem 0.5rem',
|
||||
fontFamily: "'JetBrains Mono', monospace", fontSize: '0.7rem',
|
||||
color: '#E2E8F0',
|
||||
outline: 'none',
|
||||
}}
|
||||
>
|
||||
<option value="confirmed">Confirmed</option>
|
||||
<option value="unconfirmed">Unconfirmed</option>
|
||||
<option value="declined">Declined</option>
|
||||
<option value="candidate">Candidate</option>
|
||||
</select>
|
||||
<button
|
||||
onClick={() => handleAssetSearch(1)}
|
||||
disabled={!assetSearchTeam || assetSearchLoading}
|
||||
style={{
|
||||
padding: '0.35rem',
|
||||
background: assetSearchTeam ? 'rgba(14,165,233,0.12)' : 'transparent',
|
||||
border: `1px solid ${assetSearchTeam ? 'rgba(14,165,233,0.35)' : 'rgba(255,255,255,0.05)'}`,
|
||||
borderRadius: '0.25rem',
|
||||
color: assetSearchTeam ? '#0EA5E9' : '#334155',
|
||||
fontFamily: 'monospace', fontSize: '0.68rem', fontWeight: '600',
|
||||
cursor: assetSearchTeam ? 'pointer' : 'not-allowed',
|
||||
textTransform: 'uppercase', letterSpacing: '0.05em',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.375rem',
|
||||
}}
|
||||
>
|
||||
{assetSearchLoading
|
||||
? <Loader style={{ width: '12px', height: '12px', animation: 'spin 1s linear infinite' }} />
|
||||
: <Search style={{ width: '12px', height: '12px' }} />
|
||||
}
|
||||
{assetSearchLoading ? 'Searching…' : 'Search'}
|
||||
</button>
|
||||
|
||||
{/* Error */}
|
||||
{assetSearchError && (
|
||||
<div style={{
|
||||
display: 'flex', alignItems: 'center', gap: '0.375rem',
|
||||
padding: '0.3rem 0.5rem',
|
||||
background: 'rgba(239, 68, 68, 0.1)',
|
||||
border: '1px solid rgba(239, 68, 68, 0.25)',
|
||||
borderRadius: '0.25rem',
|
||||
}}>
|
||||
<AlertCircle style={{ width: '12px', height: '12px', color: '#EF4444', flexShrink: 0 }} />
|
||||
<span style={{ fontFamily: 'monospace', fontSize: '0.62rem', color: '#FCA5A5' }}>{assetSearchError}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Results */}
|
||||
{assetSearchResults && (
|
||||
<div>
|
||||
<div style={{
|
||||
fontFamily: 'monospace', fontSize: '0.62rem', fontWeight: '600',
|
||||
color: '#64748B', textTransform: 'uppercase', letterSpacing: '0.08em',
|
||||
marginBottom: '0.25rem',
|
||||
}}>
|
||||
{assetSearchResults.total != null ? `${assetSearchResults.total} asset${assetSearchResults.total !== 1 ? 's' : ''} found` : 'Results'}
|
||||
</div>
|
||||
|
||||
{/* Results table */}
|
||||
{Array.isArray(assetSearchResults.assets) && assetSearchResults.assets.length > 0 ? (
|
||||
<div style={{
|
||||
maxHeight: '200px', overflowY: 'auto',
|
||||
border: '1px solid rgba(14,165,233,0.12)',
|
||||
borderRadius: '0.25rem',
|
||||
}}>
|
||||
<table style={{
|
||||
width: '100%', borderCollapse: 'collapse',
|
||||
fontFamily: "'JetBrains Mono', monospace", fontSize: '0.62rem',
|
||||
}}>
|
||||
<thead>
|
||||
<tr style={{ background: 'rgba(14,165,233,0.06)' }}>
|
||||
<th style={{ padding: '0.3rem 0.5rem', textAlign: 'left', color: '#94A3B8', fontWeight: '700', textTransform: 'uppercase', letterSpacing: '0.06em', borderBottom: '1px solid rgba(14,165,233,0.12)' }}>
|
||||
Asset ID
|
||||
</th>
|
||||
{assetSearchResults.assets[0] && Object.keys(assetSearchResults.assets[0]).filter(k => k !== 'asset_id' && k !== '_id').slice(0, 3).map(k => (
|
||||
<th key={k} style={{ padding: '0.3rem 0.5rem', textAlign: 'left', color: '#94A3B8', fontWeight: '700', textTransform: 'uppercase', letterSpacing: '0.06em', borderBottom: '1px solid rgba(14,165,233,0.12)' }}>
|
||||
{k.replace(/_/g, ' ')}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{assetSearchResults.assets.map((asset, idx) => {
|
||||
const extraKeys = Object.keys(asset).filter(k => k !== 'asset_id' && k !== '_id').slice(0, 3);
|
||||
return (
|
||||
<tr key={asset.asset_id || asset._id || idx} style={{ borderBottom: '1px solid rgba(255,255,255,0.03)' }}>
|
||||
<td style={{ padding: '0.25rem 0.5rem', color: '#CBD5E1', fontWeight: '600' }}>
|
||||
{asset.asset_id || asset._id || '—'}
|
||||
</td>
|
||||
{extraKeys.map(k => (
|
||||
<td key={k} style={{ padding: '0.25rem 0.5rem', color: '#94A3B8' }}>
|
||||
{typeof asset[k] === 'object' ? JSON.stringify(asset[k]) : String(asset[k] ?? '—')}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ fontFamily: 'monospace', fontSize: '0.65rem', color: '#475569', padding: '0.5rem 0' }}>
|
||||
No assets found.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Pagination */}
|
||||
{assetSearchResults.total != null && assetSearchResults.total > (assetSearchResults.page_size || 50) && (
|
||||
<div style={{
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.5rem',
|
||||
marginTop: '0.375rem',
|
||||
}}>
|
||||
<button
|
||||
onClick={() => handleAssetSearch(assetSearchPage - 1)}
|
||||
disabled={assetSearchPage <= 1 || assetSearchLoading}
|
||||
style={{
|
||||
padding: '0.2rem 0.4rem',
|
||||
background: assetSearchPage > 1 ? 'rgba(14,165,233,0.08)' : 'transparent',
|
||||
border: `1px solid ${assetSearchPage > 1 ? 'rgba(14,165,233,0.25)' : 'rgba(255,255,255,0.05)'}`,
|
||||
borderRadius: '0.2rem',
|
||||
color: assetSearchPage > 1 ? '#0EA5E9' : '#334155',
|
||||
fontFamily: 'monospace', fontSize: '0.6rem', fontWeight: '600',
|
||||
cursor: assetSearchPage > 1 ? 'pointer' : 'not-allowed',
|
||||
}}
|
||||
>
|
||||
← Prev
|
||||
</button>
|
||||
<span style={{ fontFamily: 'monospace', fontSize: '0.6rem', color: '#64748B' }}>
|
||||
Page {assetSearchPage} of {Math.ceil(assetSearchResults.total / (assetSearchResults.page_size || 50))}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => handleAssetSearch(assetSearchPage + 1)}
|
||||
disabled={assetSearchPage >= Math.ceil(assetSearchResults.total / (assetSearchResults.page_size || 50)) || assetSearchLoading}
|
||||
style={{
|
||||
padding: '0.2rem 0.4rem',
|
||||
background: assetSearchPage < Math.ceil(assetSearchResults.total / (assetSearchResults.page_size || 50)) ? 'rgba(14,165,233,0.08)' : 'transparent',
|
||||
border: `1px solid ${assetSearchPage < Math.ceil(assetSearchResults.total / (assetSearchResults.page_size || 50)) ? 'rgba(14,165,233,0.25)' : 'rgba(255,255,255,0.05)'}`,
|
||||
borderRadius: '0.2rem',
|
||||
color: assetSearchPage < Math.ceil(assetSearchResults.total / (assetSearchResults.page_size || 50)) ? '#0EA5E9' : '#334155',
|
||||
fontFamily: 'monospace', fontSize: '0.6rem', fontWeight: '600',
|
||||
cursor: assetSearchPage < Math.ceil(assetSearchResults.total / (assetSearchResults.page_size || 50)) ? 'pointer' : 'not-allowed',
|
||||
}}
|
||||
>
|
||||
Next →
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Submissions section */}
|
||||
{fpSubmissions && fpSubmissions.length > 0 && (
|
||||
<div style={{ padding: '0 1.25rem 0.75rem' }}>
|
||||
@@ -4344,6 +4958,10 @@ export default function VulnerabilityTriagePage({ filterDate, filterEXC }) {
|
||||
const [atlasMetricsLoading, setAtlasMetricsLoading] = useState(false);
|
||||
const [atlasMetricsError, setAtlasMetricsError] = useState(null);
|
||||
|
||||
// CARD API state — session-level caching for teams list
|
||||
const [cardConfigured, setCardConfigured] = useState(false);
|
||||
const [cardTeams, setCardTeams] = useState([]);
|
||||
|
||||
const updateColumns = useCallback((newOrder) => {
|
||||
setColumnOrder(newOrder);
|
||||
saveColumnOrder(newOrder);
|
||||
@@ -4481,6 +5099,31 @@ export default function VulnerabilityTriagePage({ filterDate, filterEXC }) {
|
||||
}
|
||||
}, []);
|
||||
|
||||
// CARD API — fetch status and teams (session-level caching)
|
||||
const cardTeamsFetchedRef = useRef(false);
|
||||
const fetchCardStatus = useCallback(async () => {
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/card/status`, { credentials: 'include' });
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
setCardConfigured(data.configured === true);
|
||||
if (data.configured && !cardTeamsFetchedRef.current) {
|
||||
cardTeamsFetchedRef.current = true;
|
||||
const teamsRes = await fetch(`${API_BASE}/card/teams`, { credentials: 'include' });
|
||||
if (teamsRes.ok) {
|
||||
const teamsData = await teamsRes.json();
|
||||
const teams = Array.isArray(teamsData)
|
||||
? teamsData.map(t => t.card_team_name || t._id).filter(Boolean).sort()
|
||||
: [];
|
||||
setCardTeams(teams);
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('[card-api] Failed to fetch CARD status:', err.message);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const fetchFindings = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
@@ -4523,6 +5166,7 @@ export default function VulnerabilityTriagePage({ filterDate, filterEXC }) {
|
||||
fetchFpSubmissions();
|
||||
fetchAtlasStatus();
|
||||
fetchAtlasMetrics();
|
||||
fetchCardStatus();
|
||||
}, []); // eslint-disable-line
|
||||
|
||||
// Set/clear a single column filter
|
||||
@@ -5658,6 +6302,9 @@ export default function VulnerabilityTriagePage({ filterDate, filterEXC }) {
|
||||
canWrite={canWrite}
|
||||
fpSubmissions={fpSubmissions}
|
||||
onEditSubmission={handleEditSubmission}
|
||||
cardConfigured={cardConfigured}
|
||||
cardTeams={cardTeams}
|
||||
onQueueRefresh={fetchQueue}
|
||||
/>
|
||||
<FpWorkflowModal
|
||||
open={fpModalOpen}
|
||||
|
||||
Reference in New Issue
Block a user