EOD.

frontend/src/components/Baseline.jsx

@@ -0,0 +1,80 @@
+import React, { useEffect, useState } from "react";
+import axios from "axios";
+
+const Baseline = () => {
+    const [data, setData] = useState([]);
+
+    useEffect(() => {
+        axios
+            .get("/uploaded/baseline.csv")
+            .then((res) => {
+                const csv = res.data;
+                const lines = csv.trim().split("\n");
+                const headers = lines[0].split(",");
+                const rows = lines.slice(1).map((line) => {
+                    const values = line.split(",");
+                    return headers.reduce((obj, h, i) => {
+                        obj[h.trim()] = values[i].trim();
+                        return obj;
+                    }, {});
+                });
+                setData(rows);
+            })
+            .catch((err) => console.error("Error loading baseline CSV:", err));
+    }, []);
+
+    const countByType = (pattern) =>
+        data.filter((row) => row["Operating System"]?.toLowerCase().includes(pattern)).length;
+
+    return (
+        <div className="p-6 text-white">
+            <h1 className="text-3xl font-bold mb-4">Network Baseline</h1>
+
+            {/* Summary Cards */}
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
+                {[
+                    { label: "Windows", color: "bg-blue-600", pattern: "windows" },
+                    { label: "Linux", color: "bg-green-600", pattern: "ubuntu" },
+                    { label: "Servers", color: "bg-red-600", pattern: "server" },
+                    { label: "Workstations", color: "bg-yellow-500", pattern: "workstation" },
+                ].map(({ label, color, pattern }) => (
+                    <div
+                        key={label}
+                        className={`flex items-center justify-center ${color} rounded-full h-24 w-24 mx-auto shadow-lg`}
+                    >
+                        <div className="text-center">
+                            <div className="text-xl font-bold">{countByType(pattern)}</div>
+                            <div className="text-sm">{label}</div>
+                        </div>
+                    </div>
+                ))}
+            </div>
+
+            {/* Table */}
+            <div className="overflow-x-auto rounded-lg border border-zinc-700">
+                <table className="min-w-full text-left text-sm">
+                    <thead className="bg-zinc-800 text-zinc-300">
+                        <tr>
+                            <th className="p-3">Host Name</th>
+                            <th className="p-3">Operating System</th>
+                            <th className="p-3">IP Address</th>
+                            <th className="p-3">FQDN</th>
+                        </tr>
+                    </thead>
+                    <tbody className="divide-y divide-zinc-700">
+                        {data.map((row, i) => (
+                            <tr key={i} className="hover:bg-zinc-800">
+                                <td className="p-3">{row["Host Name"]}</td>
+                                <td className="p-3">{row["Operating System"]}</td>
+                                <td className="p-3">{row["IP Address"]}</td>
+                                <td className="p-3">{row["Fdqn"]}</td>
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    );
+};
+
+export default Baseline;