Files
asm-dashboard/resources/js/Pages/Home.tsx
2024-11-10 19:06:42 +01:00

86 lines
3.3 KiB
TypeScript

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import {
SecuritySummaryResponseType,
} from '@/types/security-summary';
import { TextSearchIcon } from 'lucide-react';
import {
Table,
TableBody,
TableCaption,
TableCell,
TableFooter,
TableHead,
TableHeader,
TableRow,
} from "@/Components/ui/table"
import {Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle} from "@/Components/ui/card";
export default function Home() {
const [securitySummaryResponse, setSecuritySummaryResponse] = useState<SecuritySummaryResponseType | null>(null);
useEffect(() => {
axios.get<SecuritySummaryResponseType>('/api/v1/security/summary')
.then(response => {
setSecuritySummaryResponse(response.data);
})
.catch(error => {
console.error("Error fetching the report data", error);
});
}, []);
return (
<div className="container mx-auto p-4 space-y-6">
<Card>
<CardHeader>
<CardTitle className="text-3xl">Scan Reports</CardTitle>
<CardDescription>Pick a scan to see the dashboard, you can also navigate trough dashboard using prev and next arrow at the end of each report overview</CardDescription>
</CardHeader>
<CardContent>
<Table>
<TableHeader>
<TableRow>
<TableHead>Domain</TableHead>
<TableHead>UUID</TableHead>
<TableHead>Method</TableHead>
<TableHead>Score</TableHead>
<TableHead></TableHead>
</TableRow>
</TableHeader>
<TableBody>
{securitySummaryResponse?.results.map((data, index) => (
<TableRow key={index}>
<TableCell className="font-medium">
<a href={`/report/${index}/dashboard`}>{data.domain_name}</a>
</TableCell>
<TableCell>{data.idsummary}</TableCell>
<TableCell>{data.creation_date}</TableCell>
<TableCell>{data.risk_score}</TableCell>
<TableCell>
<a href={`/report/${index}/dashboard`}>
<TextSearchIcon className="w-5 h-5"/>
</a>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle className="text-3xl">Upload Password Leak</CardTitle>
<CardDescription></CardDescription>
</CardHeader>
<CardContent>
--todo
</CardContent>
</Card>
</div>
);
};