feat: initial TrustOS platform scaffold
- FastAPI backend: auth, findings, dashboard, attack paths, footprint, AI translator, risk calculator, PDF report generator - Next.js frontend: Vault dashboard, login, findings table, finding detail with AI coach, digital footprint, reports - PostgreSQL data model: tenants, users, assets, findings, risk scores, audit reports, attack paths - Docker Compose + Dockerfiles for all services - Demo seed data: Acme Corp with 6 findings and 90-day risk score history - AI Risk Translator (OpenAI/Anthropic) with plain-English business impact - Role-based access: executive / it_admin / trustos_admin - Scope-lock engine: authorization required before any assessment Stage 1-8 complete: Phase 1 Vault Audit product ready
This commit is contained in:
drjones
168
frontend/src/app/findings/page.tsx
Normal file
168
frontend/src/app/findings/page.tsx
Normal file
@@ -0,0 +1,168 @@
|
||||
"use client";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useAuth } from "@/hooks/useAuth";
|
||||
import { api, type Finding } from "@/lib/api";
|
||||
import Sidebar from "@/components/Sidebar";
|
||||
import Link from "next/link";
|
||||
import { Shield, Filter, ArrowUpDown, CheckCircle2, Clock, AlertCircle } from "lucide-react";
|
||||
|
||||
const SEVERITY_ORDER = ["critical", "high", "medium", "low", "info"];
|
||||
const STATUS_COLORS: Record<string, string> = {
|
||||
open: "vault-badge-critical",
|
||||
in_progress: "vault-badge-medium",
|
||||
resolved: "vault-badge-low",
|
||||
verified: "vault-badge-info",
|
||||
accepted_risk: "vault-badge-info",
|
||||
};
|
||||
const CATEGORY_LABELS: Record<string, string> = {
|
||||
external_exposure: "External Exposure",
|
||||
cloud_posture: "Cloud Posture",
|
||||
credential_exposure: "Credential Exposure",
|
||||
digital_footprint: "Digital Footprint",
|
||||
web_application: "Web Application",
|
||||
network: "Network",
|
||||
identity: "Identity",
|
||||
third_party: "Third Party",
|
||||
compliance: "Compliance",
|
||||
other: "Other",
|
||||
};
|
||||
|
||||
export default function FindingsPage() {
|
||||
const { tenantId, role, ready } = useAuth();
|
||||
const [findings, setFindings] = useState<Finding[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [filterSeverity, setFilterSeverity] = useState("all");
|
||||
const [filterStatus, setFilterStatus] = useState("open");
|
||||
|
||||
useEffect(() => {
|
||||
if (!ready || !tenantId) return;
|
||||
const params = [
|
||||
filterSeverity !== "all" ? `severity=${filterSeverity}` : "",
|
||||
filterStatus !== "all" ? `status=${filterStatus}` : "",
|
||||
].filter(Boolean).join("&");
|
||||
api.findings(tenantId, params)
|
||||
.then(setFindings)
|
||||
.finally(() => setLoading(false));
|
||||
}, [ready, tenantId, filterSeverity, filterStatus]);
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen bg-vault-black">
|
||||
<Sidebar />
|
||||
<main className="ml-64 flex-1 p-8">
|
||||
<div className="mb-6 flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-vault-text flex items-center gap-2">
|
||||
<Shield className="w-6 h-6 text-vault-sapphire" />
|
||||
Findings
|
||||
</h1>
|
||||
<p className="text-vault-muted text-sm mt-0.5">All security findings across your environment</p>
|
||||
</div>
|
||||
<span className="text-vault-muted text-sm">{findings.length} results</span>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<div className="flex gap-3 mb-6 flex-wrap">
|
||||
<div className="flex items-center gap-2">
|
||||
<Filter className="w-4 h-4 text-vault-muted" />
|
||||
<span className="text-vault-muted text-sm">Filter:</span>
|
||||
</div>
|
||||
{["all", "critical", "high", "medium", "low"].map(s => (
|
||||
<button
|
||||
key={s}
|
||||
onClick={() => { setFilterSeverity(s); setLoading(true); }}
|
||||
className={`px-3 py-1 rounded-full text-xs font-semibold border transition-colors ${
|
||||
filterSeverity === s
|
||||
? "bg-vault-sapphire text-white border-vault-sapphire"
|
||||
: "bg-vault-surface border-vault-border text-vault-muted hover:text-vault-text"
|
||||
}`}
|
||||
>
|
||||
{s === "all" ? "All Severities" : s.toUpperCase()}
|
||||
</button>
|
||||
))}
|
||||
<div className="border-l border-vault-border mx-1" />
|
||||
{["all", "open", "in_progress", "resolved", "verified"].map(s => (
|
||||
<button
|
||||
key={s}
|
||||
onClick={() => { setFilterStatus(s); setLoading(true); }}
|
||||
className={`px-3 py-1 rounded-full text-xs font-semibold border transition-colors ${
|
||||
filterStatus === s
|
||||
? "bg-vault-sapphire text-white border-vault-sapphire"
|
||||
: "bg-vault-surface border-vault-border text-vault-muted hover:text-vault-text"
|
||||
}`}
|
||||
>
|
||||
{s === "all" ? "All Statuses" : s.replace("_", " ")}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Findings table */}
|
||||
<div className="vault-card overflow-hidden p-0">
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center h-40">
|
||||
<div className="animate-spin w-6 h-6 border-2 border-vault-sapphire border-t-transparent rounded-full" />
|
||||
</div>
|
||||
) : findings.length === 0 ? (
|
||||
<div className="text-center py-16">
|
||||
<CheckCircle2 className="w-10 h-10 text-emerald-400 mx-auto mb-3" />
|
||||
<p className="text-vault-text font-semibold">No findings match these filters</p>
|
||||
</div>
|
||||
) : (
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b border-vault-border">
|
||||
{["Severity", "Title", "Category", "Status", "Priority", ""].map(h => (
|
||||
<th key={h} className="px-5 py-3 text-left text-xs font-semibold text-vault-muted uppercase tracking-wider">
|
||||
{h}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{findings.map(f => (
|
||||
<tr key={f.id} className="border-b border-vault-border/50 hover:bg-vault-titanium/30 transition-colors">
|
||||
<td className="px-5 py-4">
|
||||
<span className={`vault-badge-${f.severity}`}>{f.severity.toUpperCase()}</span>
|
||||
</td>
|
||||
<td className="px-5 py-4">
|
||||
<p className="text-vault-text text-sm font-medium leading-snug max-w-md">{f.title}</p>
|
||||
{f.ai_summary && (
|
||||
<p className="text-vault-muted text-xs mt-0.5 line-clamp-1">{f.ai_summary}</p>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-5 py-4 text-vault-muted text-xs whitespace-nowrap">
|
||||
{CATEGORY_LABELS[f.category] ?? f.category}
|
||||
</td>
|
||||
<td className="px-5 py-4">
|
||||
<span className={STATUS_COLORS[f.status] ?? "vault-badge-info"}>
|
||||
{f.status.replace("_", " ")}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-5 py-4">
|
||||
{f.ai_fix_priority && (
|
||||
<span className={
|
||||
f.ai_fix_priority === "urgent" ? "text-red-400 text-xs font-semibold" :
|
||||
f.ai_fix_priority === "soon" ? "text-amber-400 text-xs font-semibold" :
|
||||
"text-vault-muted text-xs"
|
||||
}>
|
||||
{f.ai_fix_priority}
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-5 py-4">
|
||||
<Link
|
||||
href={`/findings/${f.id}`}
|
||||
className="text-vault-sapphireLight text-xs hover:underline whitespace-nowrap"
|
||||
>
|
||||
View →
|
||||
</Link>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user