source: lan-frontend/src/App.jsx@ 2058e5c

import React from "react";
import {useEffect, useMemo, useState} from "react";
import "./styles/theme.css";

import TopBar from "./components/TopBar";
import ComputerCard from "./components/ComputerCard";
import ComputerDetailsModal from "./components/ComputerDetailsModal";
import AIAssistantDrawer from "./components/AIAssistantDrawer";

export default function App() {
    const [stats, setStats] = useState(null);
    const [computers, setComputers] = useState([]);
    const [loading, setLoading] = useState(true);
    const [lastUpdated, setLastUpdated] = useState(null);

    const [query, setQuery] = useState("");
    const [status, setStatus] = useState("");

    const [selectedComputer, setSelectedComputer] = useState(null);
    const [aiOpen, setAiOpen] = useState(false);
    const [aiScope, setAiScope] = useState(null);
    const [selectedEnv, setSelectedEnv] = useState("default");

    async function refresh() {
        try {
            setLoading(true);
            const [s, c] = await Promise.all([
                fetch("/api/stats").then((r) => r.json()),
                fetch("/api/computers", {
                    headers: {"X-Env": selectedEnv},
                }).then((r) => r.json()),
            ]);
            setStats(s);
            setComputers(Array.isArray(c) ? c : []);
            setLastUpdated(new Date().toISOString());
        } catch (e) {
            console.error("refresh error", e);
        } finally {
            setLoading(false);
        }
    }

    useEffect(() => {
        refresh();
    }, [selectedEnv]);

    const filtered = useMemo(() => {
        const q = query.trim().toLowerCase();
        return (computers || [])
            .filter((c) => (status ? c.status === status : true))
            .filter((c) => {
                if (!q) return true;
                const hay = [c.name, c.user, c.ip, c.os, c.status].filter(Boolean).join(" ").toLowerCase();
                return hay.includes(q);
            });
    }, [computers, query, status]);

    return (
        <div className="app-wrap">
            <TopBar
                onOpenAI={() => setAiOpen(true)}
                onRefresh={refresh}
                lastUpdated={lastUpdated}
                onEnvChange={(env) => setSelectedEnv(env)}
                selectedEnv={selectedEnv}
            />

            {/* STATS */}
            <div className="stats-grid">
                <div className="stat-card">
                    <div className="label">Total Computers</div>
                    <div className="value">{computers.length}</div>
                    <div className="sub">Monitored Systems</div>
                </div>

                <div className="stat-card">
                    <div className="label">Sysmon Events (24h)</div>
                    <div className="value">{stats?.total_sysmon_events ?? "—"}</div>
                    <div className="sub">Security Events</div>
                </div>

                <div className="stat-card">
                    <div className="label">Network Connections (24h)</div>
                    <div className="value">{stats?.total_network_connections ?? "—"}</div>
                    <div className="sub">Captured Connections</div>
                </div>
            </div>

            {/* FILTERS */}
            <div className="panel" style={{marginBottom: 14}}>
                <div className="panel-head">
                    <div className="panel-title">Filters</div>
                    <div style={{color: "var(--dim)", fontSize: 12}}>
                        {loading ? "Refreshing…" : `${filtered.length} shown`}
                    </div>
                </div>
                <div className="panel-body">
                    <div className="filters">
                        <input
                            className="input"
                            value={query}
                            onChange={(e) => setQuery(e.target.value)}
                            placeholder="Search by name / user / ip / os…"
                        />

                        <select className="select" value={status} onChange={(e) => setStatus(e.target.value)}>
                            <option value="">All status</option>
                            <option value="online">Online</option>
                            <option value="idle">Idle</option>
                            <option value="offline">Offline</option>
                        </select>

                        <button className="btn primary" onClick={refresh}>Refresh</button>
                    </div>
                </div>
            </div>

            {/* COMPUTERS */}
            <div className="panel">
                <div className="panel-head">
                    <div className="panel-title">Connected Computers</div>
                    <div style={{display: "flex", gap: 10, alignItems: "center"}}>
                        <span className="pill">{filtered.length} computers</span>
                        <button className="btn" onClick={() => {
                            setQuery("");
                            setStatus("");
                        }}>Reset
                        </button>
                    </div>
                </div>
                <div className="panel-body">
                    <div className="computers-grid">
                        {filtered.map((c) => (
                            <ComputerCard
                                key={c.name}
                                c={c}
                                onOpen={(pc) => {
                                    setSelectedComputer(pc);
                                    setAiScope(pc.name);
                                }}
                            />
                        ))}
                        {filtered.length === 0 && (
                            <div style={{color: "var(--dim)"}}>No computers match filter.</div>
                        )}
                    </div>
                </div>
            </div>

            {/* DETAILS MODAL */}
            <ComputerDetailsModal
                open={!!selectedComputer}
                computer={selectedComputer}
                onClose={() => setSelectedComputer(null)}
                onAskAI={(name) => {
                    setAiScope(name);
                    setAiOpen(true);
                }}
            />

            {/* AI DRAWER */}
            <AIAssistantDrawer
                open={aiOpen}
                onClose={() => setAiOpen(false)}
                computers={computers}
                scope={aiScope}
                setScope={setAiScope}
            />
        </div>
    );
}