Index: lan-frontend/src/components/NetIntelViz.jsx
===================================================================
--- lan-frontend/src/components/NetIntelViz.jsx	(revision a762898ecd37a452c782821d4c2c4955c6ed2521)
+++ lan-frontend/src/components/NetIntelViz.jsx	(revision a762898ecd37a452c782821d4c2c4955c6ed2521)
@@ -0,0 +1,653 @@
+import React, { useEffect, useMemo, useState } from "react";
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+  CartesianGrid,
+} from "recharts";
+
+const VIZ = {
+  STATS: "stats",
+  COMPUTERS: "computers",
+  COMPUTER_DETAILS: "computer_details",
+  NET_GRAPH: "net_graph",
+};
+
+function fmtTs(ts) {
+  if (!ts) return "";
+  return String(ts).replace("T", " ").replace("Z", "");
+}
+
+async function fetchJson(url, { method = "GET", headers = {}, body } = {}) {
+  const res = await fetch(url, {
+    method,
+    credentials: "include",
+    headers: {
+      "Content-Type": "application/json",
+      ...headers,
+    },
+    body: body ? JSON.stringify(body) : undefined,
+  });
+
+  const text = await res.text();
+  let data;
+  try {
+    data = text ? JSON.parse(text) : null;
+  } catch {
+    data = { raw: text };
+  }
+  if (!res.ok) {
+    const msg = data?.error || data?.message || res.statusText;
+    throw new Error(msg);
+  }
+  return data;
+}
+
+/** ✅ Use existing theme.css look: panel / btn / select / input / pill */
+function Panel({ title, right, children, subtitle }) {
+  return (
+    <div className="panel" style={{ marginBottom: 14 }}>
+      <div className="panel-head">
+        <div>
+          <div className="panel-title">{title}</div>
+          {subtitle ? (
+            <div style={{ color: "var(--dim)", fontSize: 12, marginTop: 4 }}>{subtitle}</div>
+          ) : null}
+        </div>
+        {right}
+      </div>
+      <div className="panel-body">{children}</div>
+    </div>
+  );
+}
+
+function Select({ label, value, onChange, options, disabled }) {
+  return (
+    <label style={{ display: "grid", gap: 6 }}>
+      <div style={{ fontSize: 12, color: "var(--dim)" }}>{label}</div>
+      <select
+        className="select"
+        value={value}
+        disabled={disabled}
+        onChange={(e) => onChange(e.target.value)}
+      >
+        {options.map((o) => (
+          <option key={o.value} value={o.value}>
+            {o.label}
+          </option>
+        ))}
+      </select>
+    </label>
+  );
+}
+
+function Pill({ children }) {
+  return <span className="pill">{children}</span>;
+}
+
+function Table({ columns, rows, emptyText = "Нема податоци." }) {
+  return (
+    <div style={{ overflow: "auto" }}>
+      <table className="table">
+        <thead>
+          <tr>
+            {columns.map((c) => (
+              <th key={c.key}>{c.title}</th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {rows.length === 0 ? (
+            <tr>
+              <td colSpan={columns.length} style={{ color: "var(--dim)", padding: 12 }}>
+                {emptyText}
+              </td>
+            </tr>
+          ) : (
+            rows.map((r, idx) => (
+              <tr key={idx}>
+                {columns.map((c) => (
+                  <td key={c.key}>{c.render ? c.render(r) : String(r[c.key] ?? "")}</td>
+                ))}
+              </tr>
+            ))
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export default function NetIntelViz({ baseUrl = "" }) {
+  const [loading, setLoading] = useState(false);
+  const [err, setErr] = useState("");
+
+  const [me, setMe] = useState(null);
+  const [envs, setEnvs] = useState(["default"]);
+  const [env, setEnv] = useState("default");
+
+  const [viz, setViz] = useState(VIZ.NET_GRAPH);
+
+  const [stats, setStats] = useState(null);
+  const [computers, setComputers] = useState([]);
+  const [computerName, setComputerName] = useState("");
+  const [computerDetails, setComputerDetails] = useState(null);
+
+  const [sinceHours, setSinceHours] = useState("24");
+  const [graph, setGraph] = useState(null);
+
+  const api = useMemo(() => (baseUrl || "").replace(/\/+$/, ""), [baseUrl]);
+
+  const envOptions = useMemo(() => {
+    const uniq = [...new Set(envs)];
+    return uniq.map((e) => ({ value: e, label: e }));
+  }, [envs]);
+
+  const computerOptions = useMemo(() => {
+    const opts = computers.map((c) => ({ value: c.name, label: c.name }));
+    return [{ value: "", label: "all" }, ...opts];
+  }, [computers]);
+
+  const vizOptions = [
+    { value: VIZ.STATS, label: "Stats (24h)" },
+    { value: VIZ.COMPUTERS, label: "Computers" },
+    { value: VIZ.COMPUTER_DETAILS, label: "Computer details" },
+    { value: VIZ.NET_GRAPH, label: "Network graph" },
+  ];
+
+  async function loadMe() {
+    const data = await fetchJson(`${api}/api/me`);
+    setMe(data?.user || null);
+  }
+
+  async function loadEnvs() {
+    try {
+      const data = await fetchJson(`${api}/api/admin/environments`);
+      const list = data?.environments?.length ? data.environments : ["default"];
+      setEnvs(list);
+      if (!list.includes(env)) setEnv(list[0] || "default");
+    } catch {
+      setEnvs(["default"]);
+      setEnv("default");
+    }
+  }
+
+  async function loadStats(selectedEnv) {
+    const data = await fetchJson(`${api}/api/stats`, {
+      headers: { "X-Env": selectedEnv || env || "default" },
+    });
+    setStats(data);
+  }
+
+  async function loadComputers(selectedEnv) {
+    const data = await fetchJson(`${api}/api/computers`, {
+      headers: { "X-Env": selectedEnv || env || "default" },
+    });
+    setComputers(Array.isArray(data) ? data : []);
+  }
+
+  async function loadComputerDetails(name) {
+    if (!name) {
+      setComputerDetails(null);
+      return;
+    }
+    const data = await fetchJson(`${api}/api/computer/${encodeURIComponent(name)}`, {
+      headers: { "X-Env": env || "default" },
+    });
+    setComputerDetails(data);
+  }
+
+  async function loadNetGraph() {
+    const qs = new URLSearchParams();
+    qs.set("env", env || "default");
+    qs.set("since_hours", String(parseInt(sinceHours || "24", 10) || 24));
+    if (computerName) qs.set("computer", computerName);
+
+    const data = await fetchJson(`${api}/api/graph/net?${qs.toString()}`, {
+      headers: { "X-Env": env || "default" },
+    });
+    setGraph(data);
+  }
+  function MiniBipartiteGraph({ nodes = [], edges = [] }) {
+  const comps = nodes.filter((n) => (n.subTitle || "").toLowerCase().includes("computer"));
+  const ips = nodes.filter((n) => (n.subTitle || "").toLowerCase().includes("remote"));
+
+  const width = 1100;
+  const height = 520;
+  const pad = 40;
+
+  const compPos = comps.map((n, i) => ({
+    ...n,
+    x: pad,
+    y: pad + (i * (height - 2 * pad)) / Math.max(1, comps.length - 1),
+  }));
+
+  const ipPos = ips.map((n, i) => ({
+    ...n,
+    x: width - pad,
+    y: pad + (i * (height - 2 * pad)) / Math.max(1, ips.length - 1),
+  }));
+
+  const pos = new Map();
+  [...compPos, ...ipPos].forEach((n) => pos.set(n.id, n));
+
+  const shownEdges = edges.slice(0, 120);
+
+  return (
+    <div style={{ overflow: "auto" }}>
+      <svg width={width} height={height} style={{ borderRadius: 16, background: "rgba(255,255,255,0.03)" }}>
+        {shownEdges.map((e, idx) => {
+          const s = pos.get(e.source);
+          const t = pos.get(e.target);
+          if (!s || !t) return null;
+          const v = Number(e.mainStat || 1);
+          const strokeWidth = Math.max(1, Math.min(6, Math.log2(v + 1)));
+          return (
+            <line
+              key={idx}
+              x1={s.x}
+              y1={s.y}
+              x2={t.x}
+              y2={t.y}
+              stroke="rgba(120,180,255,0.25)"
+              strokeWidth={strokeWidth}
+            />
+          );
+        })}
+
+        {compPos.map((n) => (
+          <g key={n.id}>
+            <circle cx={n.x} cy={n.y} r={6} fill="rgba(255,255,255,0.9)" />
+            <text x={n.x + 12} y={n.y + 4} fontSize="11" fill="rgba(255,255,255,0.85)">
+              {n.title}
+            </text>
+          </g>
+        ))}
+
+        {ipPos.map((n) => (
+          <g key={n.id}>
+            <circle cx={n.x} cy={n.y} r={6} fill="rgba(80,160,255,0.95)" />
+            <text x={n.x - 12} y={n.y + 4} textAnchor="end" fontSize="11" fill="rgba(255,255,255,0.85)">
+              {n.title}
+            </text>
+          </g>
+        ))}
+      </svg>
+
+      <div style={{ color: "var(--dim)", fontSize: 12, marginTop: 10 }}>
+        Tip: ако има премногу линии, намали Hours или избери конкретен Computer.
+      </div>
+    </div>
+  );
+}
+
+
+  async function refreshAll(nextViz = viz, nextEnv = env) {
+    setErr("");
+    setLoading(true);
+    try {
+      if (nextViz === VIZ.STATS) {
+        await loadStats(nextEnv);
+      } else if (nextViz === VIZ.COMPUTERS) {
+        await loadComputers(nextEnv);
+      } else if (nextViz === VIZ.COMPUTER_DETAILS) {
+        await loadComputers(nextEnv);
+        if (computerName) await loadComputerDetails(computerName);
+      } else if (nextViz === VIZ.NET_GRAPH) {
+        await loadComputers(nextEnv);
+        await loadNetGraph();
+      }
+    } catch (e) {
+      setErr(e.message || "Грешка при вчитување.");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    (async () => {
+      setLoading(true);
+      setErr("");
+      try {
+        await loadMe();
+        await loadEnvs();
+        await refreshAll(VIZ.NET_GRAPH, env);
+      } catch (e) {
+        setErr(e.message || "Неуспешно поврзување.");
+      } finally {
+        setLoading(false);
+      }
+    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [api]);
+
+  const historySeries = useMemo(() => {
+    const hist = computerDetails?.history || [];
+    const rows = [...hist].reverse().slice(-80);
+    return rows.map((r) => ({
+      t: fmtTs(r.timestamp),
+      cpu: Number(r.cpu_usage ?? 0),
+      ram: Number(r.ram_usage ?? 0),
+      disk: Number(r.disk_usage ?? 0),
+      sent: Number(r.network_sent_mb ?? 0),
+      recv: Number(r.network_recv_mb ?? 0),
+    }));
+  }, [computerDetails]);
+
+  const nodes = graph?.nodes || [];
+  const edges = graph?.edges || [];
+  const meta = graph?.meta || {};
+
+  return (
+    <div>
+      {/* HEADER / CONTROLS */}
+      <Panel
+        title="Visualizations"
+        subtitle={me ? `Logged: ${me.email} • tenant: ${me.tenant_id} • role: ${me.role}` : "Not logged"}
+        right={
+          <div style={{ display: "flex", gap: 10, alignItems: "end", flexWrap: "wrap" }}>
+            <Select
+              label="Env"
+              value={env}
+              disabled={loading}
+              onChange={(v) => {
+                setEnv(v);
+                refreshAll(viz, v);
+              }}
+              options={envOptions}
+            />
+
+            <Select
+              label="View"
+              value={viz}
+              disabled={loading}
+              onChange={(v) => {
+                setViz(v);
+                refreshAll(v, env);
+              }}
+              options={vizOptions}
+            />
+
+            {(viz === VIZ.COMPUTER_DETAILS || viz === VIZ.NET_GRAPH) && (
+              <Select
+                label="Computer"
+                value={computerName}
+                disabled={loading}
+                onChange={(v) => {
+                  setComputerName(v);
+                  if (viz === VIZ.COMPUTER_DETAILS) loadComputerDetails(v).catch((e) => setErr(e.message));
+                  if (viz === VIZ.NET_GRAPH) loadNetGraph().catch((e) => setErr(e.message));
+                }}
+                options={computerOptions}
+              />
+            )}
+
+            {viz === VIZ.NET_GRAPH && (
+              <Select
+                label="Hours"
+                value={sinceHours}
+                disabled={loading}
+                onChange={(v) => setSinceHours(v)}
+                options={[
+                  { value: "1", label: "1" },
+                  { value: "6", label: "6" },
+                  { value: "12", label: "12" },
+                  { value: "24", label: "24" },
+                  { value: "48", label: "48" },
+                  { value: "72", label: "72" },
+                ]}
+              />
+            )}
+
+            <button className="btn primary" disabled={loading} onClick={() => refreshAll(viz, env)}>
+              {loading ? "Loading…" : "Refresh"}
+            </button>
+          </div>
+        }
+      >
+        {err ? (
+          <div style={{ color: "#ffb4b4", background: "rgba(255,0,0,0.08)", padding: 10, borderRadius: 12 }}>
+            {err}
+          </div>
+        ) : (
+          <div style={{ color: "var(--dim)", fontSize: 12 }}>
+            Избери “View” за да смениш што се прикажува.
+          </div>
+        )}
+      </Panel>
+      <Panel title="Graph (SVG)" subtitle="Computers left, IPs right, lines = connections">
+  <MiniBipartiteGraph nodes={nodes} edges={edges} />
+</Panel>
+
+
+      {/* STATS */}
+      {viz === VIZ.STATS && (
+        <Panel title="Stats (24h)" subtitle="From /api/stats">
+          <div className="stats-grid" style={{ marginTop: 0 }}>
+            <div className="stat-card">
+              <div className="label">Sysmon Events</div>
+              <div className="value">{stats?.total_sysmon_events ?? "—"}</div>
+              <div className="sub">Last 24 hours</div>
+            </div>
+            <div className="stat-card">
+              <div className="label">Network Connections</div>
+              <div className="value">{stats?.total_network_connections ?? "—"}</div>
+              <div className="sub">Last 24 hours</div>
+            </div>
+            <div className="stat-card">
+              <div className="label">Server Time</div>
+              <div className="value" style={{ fontSize: 18 }}>
+                {fmtTs(stats?.server_time) || "—"}
+              </div>
+              <div className="sub">Now</div>
+            </div>
+          </div>
+        </Panel>
+      )}
+
+      {/* COMPUTERS */}
+      {viz === VIZ.COMPUTERS && (
+        <Panel title="Computers" subtitle="From /api/computers">
+          <Table
+            columns={[
+              { key: "name", title: "Name" },
+              { key: "user", title: "User" },
+              { key: "ip", title: "IP" },
+              { key: "os", title: "OS" },
+              { key: "status", title: "Status" },
+              { key: "avg_cpu", title: "Avg CPU" },
+              { key: "avg_ram", title: "Avg RAM" },
+              { key: "recent_logs", title: "Logs(24h)" },
+              { key: "recent_sysmon", title: "Sysmon(24h)" },
+              { key: "last_seen", title: "Last seen", render: (r) => fmtTs(r.last_seen) },
+            ]}
+            rows={computers}
+            emptyText="No computers for this env."
+          />
+        </Panel>
+      )}
+
+      {/* COMPUTER DETAILS */}
+      {viz === VIZ.COMPUTER_DETAILS && (
+        <>
+          <Panel
+            title="Computer details"
+            subtitle="From /api/computer/<name>"
+            right={
+              <button
+                className="btn"
+                disabled={loading || !computerName}
+                onClick={() => loadComputerDetails(computerName).catch((e) => setErr(e.message))}
+              >
+                Reload
+              </button>
+            }
+          >
+            {!computerName ? (
+              <div style={{ color: "var(--dim)" }}>Select a computer.</div>
+            ) : !computerDetails ? (
+              <div style={{ color: "var(--dim)" }}>Loading…</div>
+            ) : (
+              <div className="stats-grid" style={{ marginTop: 0 }}>
+                <div className="stat-card">
+                  <div className="label">Name</div>
+                  <div className="value">{computerDetails.computer?.name}</div>
+                  <div className="sub">{computerDetails.computer?.ip} • {computerDetails.computer?.os}</div>
+                </div>
+                <div className="stat-card">
+                  <div className="label">User</div>
+                  <div className="value">{computerDetails.computer?.user || "—"}</div>
+                  <div className="sub">
+                    {fmtTs(computerDetails.computer?.first_seen)} → {fmtTs(computerDetails.computer?.last_seen)}
+                  </div>
+                </div>
+                <div className="stat-card">
+                  <div className="label">Total logs</div>
+                  <div className="value">{computerDetails.computer?.total_logs ?? "—"}</div>
+                  <div className="sub">Env: {computerDetails.computer?.env_name || env}</div>
+                </div>
+              </div>
+            )}
+          </Panel>
+
+          <Panel title="Performance charts" subtitle="Last ~80 history rows">
+            {historySeries.length === 0 ? (
+              <div style={{ color: "var(--dim)" }}>No history data.</div>
+            ) : (
+              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
+                <div style={{ height: 280 }}>
+                  <div style={{ marginBottom: 8, color: "var(--dim)", fontSize: 12 }}>CPU / RAM / Disk</div>
+                  <ResponsiveContainer width="100%" height="100%">
+                    <LineChart data={historySeries}>
+                      <CartesianGrid strokeDasharray="3 3" />
+                      <XAxis dataKey="t" hide />
+                      <YAxis />
+                      <Tooltip />
+                      <Legend />
+                      <Line type="monotone" dataKey="cpu" dot={false} />
+                      <Line type="monotone" dataKey="ram" dot={false} />
+                      <Line type="monotone" dataKey="disk" dot={false} />
+                    </LineChart>
+                  </ResponsiveContainer>
+                </div>
+
+                <div style={{ height: 280 }}>
+                  <div style={{ marginBottom: 8, color: "var(--dim)", fontSize: 12 }}>Network MB sent/recv</div>
+                  <ResponsiveContainer width="100%" height="100%">
+                    <LineChart data={historySeries}>
+                      <CartesianGrid strokeDasharray="3 3" />
+                      <XAxis dataKey="t" hide />
+                      <YAxis />
+                      <Tooltip />
+                      <Legend />
+                      <Line type="monotone" dataKey="sent" dot={false} />
+                      <Line type="monotone" dataKey="recv" dot={false} />
+                    </LineChart>
+                  </ResponsiveContainer>
+                </div>
+              </div>
+            )}
+          </Panel>
+
+          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
+            <Panel title="Processes (current)" subtitle="computer_processes_current (limit 200)">
+              <Table
+                columns={[
+                  { key: "pid", title: "PID" },
+                  { key: "name", title: "Name" },
+                  { key: "username", title: "User" },
+                  { key: "cpu_percent", title: "CPU%" },
+                  { key: "memory_mb", title: "MemMB" },
+                  { key: "timestamp", title: "Time", render: (r) => fmtTs(r.timestamp) },
+                ]}
+                rows={computerDetails?.recent_processes || []}
+              />
+            </Panel>
+
+            <Panel title="Sysmon events" subtitle="sysmon_events (limit 200)">
+              <Table
+                columns={[
+                  { key: "event_id", title: "Event" },
+                  { key: "event_type", title: "Type" },
+                  {
+                    key: "message",
+                    title: "Message",
+                    render: (r) =>
+                      (r.message || "").slice(0, 70) + ((r.message || "").length > 70 ? "…" : ""),
+                  },
+                  { key: "timestamp", title: "Time", render: (r) => fmtTs(r.timestamp) },
+                ]}
+                rows={computerDetails?.sysmon_events || []}
+              />
+            </Panel>
+          </div>
+
+          <Panel title="Network connections" subtitle="network_connections (limit 100)">
+            <Table
+              columns={[
+                { key: "pid", title: "PID" },
+                { key: "process_name", title: "Process" },
+                { key: "local_address", title: "Local" },
+                { key: "remote_address", title: "Remote" },
+                { key: "status", title: "Status" },
+                { key: "timestamp", title: "Time", render: (r) => fmtTs(r.timestamp) },
+              ]}
+              rows={computerDetails?.network_connections || []}
+            />
+          </Panel>
+        </>
+      )}
+
+      {/* NET GRAPH */}
+      {viz === VIZ.NET_GRAPH && (
+        <>
+          <Panel
+            title="Network graph (computer → remote IP)"
+            subtitle="From /api/graph/net"
+            right={
+              <button className="btn" disabled={loading} onClick={() => loadNetGraph().catch((e) => setErr(e.message))}>
+                Reload graph
+              </button>
+            }
+          >
+            <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
+              <Pill>env: {meta?.env || env}</Pill>
+              <Pill>hours: {meta?.since_hours ?? sinceHours}</Pill>
+              <Pill>computer: {meta?.computer || "all"}</Pill>
+              <Pill>nodes: {nodes.length}</Pill>
+              <Pill>edges: {edges.length}</Pill>
+            </div>
+          </Panel>
+
+          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
+            <Panel title="Top edges" subtitle="Each row = number of connections">
+              <Table
+                columns={[
+                  { key: "source", title: "Source" },
+                  { key: "target", title: "Target" },
+                  { key: "mainStat", title: "Count" },
+                ]}
+                rows={edges.slice(0, 80)}
+                emptyText="No edges (maybe no traffic in that period)."
+              />
+            </Panel>
+
+            <Panel title="Nodes" subtitle="Computers + remote IP">
+              <Table
+                columns={[
+                  { key: "title", title: "Title" },
+                  { key: "subTitle", title: "Type" },
+                ]}
+                rows={nodes.slice(0, 120)}
+              />
+            </Panel>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
Index: lan-frontend/src/components/SideMenu.jsx
===================================================================
--- lan-frontend/src/components/SideMenu.jsx	(revision a762898ecd37a452c782821d4c2c4955c6ed2521)
+++ lan-frontend/src/components/SideMenu.jsx	(revision a762898ecd37a452c782821d4c2c4955c6ed2521)
@@ -0,0 +1,101 @@
+import React, {useEffect, useRef, useState} from "react";
+
+function Item({active, icon, label, onClick, collapsed}) {
+    return (
+        <button
+            onClick={onClick}
+            className={`side-item ${active ? "active" : ""}`}
+            title={label}
+            type="button"
+        >
+            <span className="side-icon">{icon}</span>
+            {!collapsed && <span className="side-label">{label}</span>}
+        </button>
+    );
+}
+
+export default function SideMenu({activeView, setActiveView}) {
+    const [open, setOpen] = useState(false);
+    const rootRef = useRef(null);
+
+    // close on click outside (ако е open преку click)
+    useEffect(() => {
+        function onDocClick(e) {
+            if (!open) return;
+            if (!rootRef.current) return;
+            if (!rootRef.current.contains(e.target)) setOpen(false);
+        }
+
+        document.addEventListener("mousedown", onDocClick);
+        return () => document.removeEventListener("mousedown", onDocClick);
+    }, [open]);
+
+    const collapsed = !open;
+
+    return (
+        <aside
+            ref={rootRef}
+            className={`side ${open ? "open" : "collapsed"}`}
+            onMouseEnter={() => setOpen(true)}   // hover open
+            onMouseLeave={() => setOpen(false)}  // hover close
+        >
+            {/* мал “handle” што се гледа секогаш */}
+            <button
+                className="side-handle"
+                type="button"
+                onClick={() => setOpen((v) => !v)}  // click toggle (ако не сакаш click, избриши ова)
+                aria-label="Toggle menu"
+                title="Menu"
+            >
+                {open ? "◀" : "▶"}
+            </button>
+
+            <div className="side-inner">
+                <div className="side-brand">
+                    <div className="side-brand-dot"/>
+                    {!collapsed && (
+                        <div className="side-brand-text">
+                            <div className="side-brand-title">netIntel</div>
+                            <div className="side-brand-sub">tenant dashboard</div>
+                        </div>
+                    )}
+                </div>
+
+
+                <div className="side-section">
+                    {/*<div className="side-section-title">MAIN</div>*/}
+
+                    <Item
+                        collapsed={collapsed}
+                        active={activeView === "dashboard"}
+                        icon="🖥️"
+                        label="Dashboard"
+                        onClick={() => setActiveView("dashboard")}
+                    />
+
+                    <Item
+                        collapsed={collapsed}
+                        active={activeView === "visualizations"}
+                        icon="📈"
+                        label="Visualizations"
+                        onClick={() => setActiveView("visualizations")}
+                    />
+
+                    <Item
+                        collapsed={collapsed}
+                        active={activeView === "account"}
+                        icon="👤"
+                        label="Account"
+                        onClick={() => setActiveView("account")}
+                    />
+                </div>
+
+                {!collapsed && (
+                    <div className="side-footer">
+                        <div className="side-footer-hint">Tip: користи Visualizations за графови</div>
+                    </div>
+                )}
+            </div>
+        </aside>
+    );
+}