An executive Command and Control (C2), Network Operations Center (NOC), and Security Operations Center (SOC) dashboard engineered for tactical IT asset management, network link telemetry, and cybersecurity threat monitoring at the 7th Jungle Infantry Battalion (7º BIS), Brazilian Army.
Military IT infrastructure operating in jungle environments requires high reliability, immediate link redundancy tracking, and strict cryptographic key auditing.
This application provides a single-pane-of-glass Heads-Up Display (HUD) for command staff and communications officers. It aggregates telemetry across fiber optics, tactical radio links (RoIP/Harris Falcon III), and satellite connections (Starlink / Gesac) deployed at remote Border Special Outposts (PEFs) in Roraima, Brazil.
- Tactical Readiness Mode Selector: Global state control adjusting operational UI feedback across three defense readiness levels (
DEFENSE NORMAL,TACTICAL ALERT,GLO / JUNGLE OPERATION). - NOC Link Telemetry & Bandwidth Monitor: Real-time dual-axis visual analytics comparing Fiber Optics vs. Satellite throughput (Mbps) against network latency (ms).
- Interactive Topology Connection Diagram: Native SVG-based network mesh map illustrating connections between QG 7º BIS (Boa Vista) and remote Border Special Outposts (PEF Pacaraima, PEF Bonfim, PEF Normandia, Pelotão Surucucu).
- SOC Threat & Intrusion Monitor: Security event tracking for Fortinet border firewalls with immediate IP logical isolation capabilities.
- Cryptographic & Asset Inventory: Full lifecycle management of network hardware with active encryption protocol tracking (Type-1 / AES-256) and hardware utilization metrics.
- N3 Automation Terminal: Interactive execution interface for background Python daemons (mesh pinging, crypto rotation, off-grid backup delta).
- RBAC Audit Log & Multi-Sheet Excel Export: Detailed audit trails and one-click consolidation export (
.xlsx) via SheetJS.
- Core Framework: React 18 (Vite build engine)
- Styling & HUD Design System: Tailwind CSS v3 (Custom Olive-Slate dark palette, glassmorphic HUD cards, tactical crosshair cursor feedback)
- Data Visualization: Recharts (Composed Area, Bar, and Radar Charts)
- Icons & Animations: Lucide React, Framer Motion
- Data Export: SheetJS (
xlsx)
Ensure you have the following installed on your environment:
- Node.js:
v18.0.0or higher - npm:
v9.0.0or higher
-
Clone the repository:
git clone https://github.com/your-username/sistema-analise-operacional-7bis.git
-
Navigate into the project directory:
cd sistema-analise-operacional-7bis -
Install project dependencies:
npm install
-
Start the local development server:
npm run dev
-
Open your browser and navigate to
http://localhost:3000.
┌────────────────────────────────────────────────────────────────────────┐
│ App Shell (src/App.jsx) │
│ - Readiness Level State (NORMAL / SOBREAVISO / GLO) │
│ - Single Source of Truth (mockData.js) & Telemetry Sync Orchestrator │
└───────────────────┬────────────────────────────────────────────────────┘
│
┌────────────────┼──────────────────┬─────────────────┐
▼ ▼ ▼ ▼
┌──────────────┐ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ NOC & BI │ │ Topology Map │ │ Assets Table │ │ SOC Threat │
│ Analytics │ │ SVG Network │ │ & Crypto Key │ │ Intrusion │
│ (Recharts) │ │ Diagram │ │ Inventory │ │ Isolation │
└──────────────┘ └──────────────┘ └──────────────┘ └──────────────┘
The application relies on a modular component architecture centered in src/components/:
Header.jsx: Global readiness level controller and tab switcher.KpiGrid.jsx: Top-level metric cards with month-over-month trend indicators.AnalyticsCharts.jsx: Dual-axis bandwidth/latency area charts and incident stacked bar charts.TacticalMapConnections.jsx: SVG topology mesh connecting HQ to frontier outposts.SocThreatMonitor.jsx: Firewall log audit and interactive IP blocking.AssetsTable.jsx: Searchable asset inventory with crypto status filters.
To compile a minified production bundle:
npm run buildTo preview the production build locally:
npm run previewDistributed under the MIT License. See LICENSE for more information.