Files
asm-dashboard/resources/js/Components/Dashboard/Overview/OverviewNetworkAssetsCard.tsx
2024-11-10 19:06:42 +01:00

27 lines
1.1 KiB
TypeScript

import {SecuritySummaryReportResultType} from "@/types/security-summary";
import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "@/Components/ui/card";
import {Globe} from "lucide-react";
import React from "react";
export default function OverviewNetworkAssetsCard({ reportData }: { reportData: SecuritySummaryReportResultType }) {
return (
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Globe className="w-5 h-5"/>
Network Assets
</CardTitle>
<CardDescription>Total assets and IP addresses</CardDescription>
</CardHeader>
<CardContent>
<div className="text-3xl font-bold">{reportData.n_asset}</div>
<div className="flex justify-between text-xs text-muted-foreground mt-1">
<span>IPv4: {reportData.unique_ipv4}</span>
<span>IPv6: {reportData.unique_ipv6}</span>
</div>
</CardContent>
</Card>
)
}