Ignore:
Timestamp:
01/22/26 17:32:29 (6 months ago)
Author:
istevanoska <ilinastevanoska@…>
Branches:
master
Children:
e4c61dd
Parents:
505f39a
Message:

Added history mmanage

File:
1 edited

Legend:

Unmodified
Added
Removed

  • lan-frontend/src/components/TopBar.jsx

    r505f39a rd42aac3  
    11import React, { useEffect, useMemo, useState } from "react";
    2 import logo from "../assets/ChatGPT_Image_Jan_21__2026__01_20_04_PM-removebg-preview (1).png";
     2import logo from "../assets/logo_image.png";
    33
    44export default function TopBar({
    … …  
    1010  me,
    1111  onLoggedOut, // optional callback (App loadMe)
     12
     13  // NEW: process history switch (controlled by App)
     14  saveProcHistory = false,
     15  onToggleProcHistory, // (enabled:boolean) => void
    1216}) {
    1317  const [open, setOpen] = useState(false);
    … …  
    2226  const [error, setError] = useState("");
    2327
     28  const isAdmin = (me?.role || "").toLowerCase() === "admin";
    2429
    2530  // keep in sync ако App праќа selectedEnv prop
    … …  
    146151        .tb-inner{ max-width: 1200px; margin: 0 auto; padding: 14px 18px;
    147152          display: flex; align-items: center; justify-content: space-between; gap: 14px; }
    148         .tb-brand{ display:flex; align-items:center; gap: 12px; min-width: 260px; }
    149         .tb-badge{ width: 44px; height: 44px; border-radius: 14px; display:flex; align-items:center; justify-content:center;
    150           background: radial-gradient(120px 80px at 30% 20%, rgba(96,165,250,0.55), transparent 60%),
    151                       linear-gradient(135deg, rgba(30,64,175,0.75), rgba(15,23,42,0.85));
    152           border: 1px solid rgba(96,165,250,0.25); box-shadow: 0 10px 25px rgba(0,0,0,0.25); }
    153         .tb-title{ margin:0; font-size: 16px; font-weight: 900; letter-spacing: 0.4px; color: rgba(255,255,255,0.95); line-height: 1.2; }
    154         .tb-sub{ margin: 2px 0 0 0; font-size: 12px; color: rgba(191,219,254,0.85); }
    155         .tb-sub span{ color: rgba(96,165,250,0.95); font-weight: 800; }
    156153        .tb-actions{ display:flex; align-items:center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
    157154        .tb-pill{ display:inline-flex; align-items:center; gap: 8px; padding: 8px 12px; border-radius: 999px;
    … …  
    169166          border-color: rgba(147,197,253,0.35); color: rgba(5,12,24,0.95); }
    170167        .tb-btn.primary:hover{ background: linear-gradient(135deg, rgba(59,130,246,0.95), rgba(34,211,238,0.75)); }
     168
     169        .tb-switch{ display:flex; align-items:center; gap:10px; padding: 8px 12px; border-radius: 999px;
     170          background: rgba(15,23,42,0.55); border: 1px solid rgba(96,165,250,0.22);
     171          color: rgba(255,255,255,0.9); font-weight: 800; font-size: 12px; }
     172        .tb-switch .label{ color: rgba(191,219,254,0.9); }
     173        .tb-toggle{ width: 46px; height: 26px; border-radius: 999px; position: relative; border: 1px solid rgba(96,165,250,0.25);
     174          background: rgba(30,41,59,0.65); cursor: pointer; transition: background .12s ease, opacity .12s ease; }
     175        .tb-toggle.disabled{ opacity: .55; cursor: not-allowed; }
     176        .tb-knob{ width: 22px; height: 22px; border-radius: 999px; position: absolute; top: 1px; left: 1px;
     177          background: rgba(226,232,240,0.95); transition: transform .14s ease; box-shadow: 0 6px 14px rgba(0,0,0,0.22); }
     178        .tb-toggle.on{ background: rgba(37,99,235,0.85); border-color: rgba(147,197,253,0.45); }
     179        .tb-toggle.on .tb-knob{ transform: translateX(20px); }
    171180
    172181        .tb-backdrop{ position: fixed; inset: 0; background: rgba(2,6,23,0.72); backdrop-filter: blur(6px);
    … …  
    202211      <div className="tb-wrap">
    203212        <div className="tb-inner">
    204           <div className="tb-brand">
    205             <div className="tb-badge">🛡️</div>
    206             <div>
    207               <h1 className="tb-title">LAN Security Monitor</h1>
    208               <p className="tb-sub">
    209                 Sysmon Edition • <span>{prettyTime}</span>
    210               </p>
    211               {me?.email && (
    212                 <p className="tb-sub" style={{ marginTop: 4, opacity: 0.9 }}>
    213                   Signed in as <span>{me.email}</span>
    214                   {me.role ? ` • ${me.role}` : ""}
    215                 </p>
    216               )}
     213          <div>
     214            <img
     215              src={logo}
     216              alt="NETIntel logo"
     217              className="netintel-logo"
     218              width={150}
     219              style={{ marginTop: 10 }}
     220            />
     221            <div style={{ marginTop: 4, fontSize: 12, color: "rgba(191,219,254,0.8)", fontWeight: 800 }}>
     222              <span style={{ color: "rgba(96,165,250,0.95)" }}>{prettyTime}</span>
     223              {me?.email ? (
     224                <span style={{ marginLeft: 10 }}>
     225                  • {me.email}
     226                  {me?.role ? ` • ${me.role}` : ""}
     227                </span>
     228              ) : null}
    217229            </div>
    218230          </div>
    219           <div>
    220             <img
    221                 src={logo}
    222                 alt="NETIntel logo"
    223                 className="netintel-logo"
    224                 width={150}
    225                 style={{marginTop: 10 }}
    226             />
    227           </div>
    228 
    229 
    230231
    231232          <div className="tb-actions">
    232             <span className="tb-pill">
     233            <span className="tb-pill" title="Selected environment">
    233234              <span className="dot" />
    234235              Env: {selectedEnv}
    235236            </span>
     237
     238            {/* NEW: Save process history switch */}
     239            <div className="tb-switch" title={isAdmin ? "Toggle saving process history for this environment" : "Only admin can change this"}>
     240              <span className="label">Proc history</span>
     241              <div
     242                className={[
     243                  "tb-toggle",
     244                  saveProcHistory ? "on" : "",
     245                  !isAdmin ? "disabled" : "",
     246                ].join(" ")}
     247                role="switch"
     248                aria-checked={saveProcHistory ? "true" : "false"}
     249                tabIndex={0}
     250                onClick={() => {
     251                  if (!isAdmin) return;
     252                  onToggleProcHistory?.(!saveProcHistory);
     253                }}
     254                onKeyDown={(e) => {
     255                  if (!isAdmin) return;
     256                  if (e.key === "Enter" || e.key === " ") {
     257                    e.preventDefault();
     258                    onToggleProcHistory?.(!saveProcHistory);
     259                  }
     260                }}
     261              >
     262                <div className="tb-knob" />
     263              </div>
     264            </div>
     265
    236266            <button className="tb-btn" onClick={onRefresh} disabled={busy}>
    237267              Refresh
    238268            </button>
     269
    239270            <button
    240271              className="tb-btn"
    … …  
    252283              Admin
    253284            </button>
     285
    254286            <button className="tb-btn primary" onClick={onOpenAI}>
    255287              AI Assistant
    … …  
    298330                  <div className="tb-help">
    299331                    Овој env ќе се користи за dashboard филтрирање + token generation.
     332                    <br />
     333                    <b>Proc history</b> switch горе важи за тековниот env.
    300334                  </div>
    301335                </div>
Note: See TracChangeset for help on using the changeset viewer.