@@ -40,11 +40,66 @@ const assistanceRoles = {
4040 { id : 'anti_stealing' , name : 'Anti-Stealing Guard' , icon : '🔒' , desc : 'Detect and prevent bandwidth or data theft from mobile networks.' } ,
4141 { id : 'signal_integrity' , name : 'Signal Integrity' , icon : '📶' , desc : 'Monitor network signal strength and detect interference or spoofing.' }
4242 ]
43+ } ,
44+ operational_security : {
45+ title : 'Operational Security' ,
46+ icon : '🕵️' ,
47+ description : 'AI-driven security auditing for cloud, IoT, and operational logs.' ,
48+ tools : [
49+ { id : 'cloud_audit' , name : 'Cloud Security Audit' , icon : '☁️' , desc : 'Scan cloud configurations for misconfigurations and exposure.' } ,
50+ { id : 'iot_telemetry' , name : 'IoT Telemetry Analysis' , icon : '📡' , desc : 'Real-time analysis of IoT device telemetry for anomalies.' } ,
51+ { id : 'opsec_scanner' , name : 'OpSec Log Scanner' , icon : '📜' , desc : 'Audit operational logs for sensitive data leaks and security threats.' }
52+ ]
4353 }
4454} ;
4555
4656export default function OfficialAssistance ( ) {
4757 const [ activeRole , setActiveRole ] = useState ( 'police' ) ;
58+ const [ result , setResult ] = useState ( null ) ;
59+ const [ loading , setLoading ] = useState ( false ) ;
60+
61+ const handleLaunch = async ( tool ) => {
62+ let endpoint = '' ;
63+ let payload = { } ;
64+
65+ if ( tool . id === 'cloud_audit' ) {
66+ endpoint = '/analyze/cloud' ;
67+ const config = prompt ( "Enter cloud configuration to audit:" ) ;
68+ if ( ! config ) return ;
69+ payload = { config } ;
70+ } else if ( tool . id === 'iot_telemetry' ) {
71+ endpoint = '/analyze/iot' ;
72+ const voltage = prompt ( "Enter IoT voltage (V):" , "3.3" ) ;
73+ const temperature = prompt ( "Enter IoT temperature (°C):" , "25" ) ;
74+ if ( voltage === null || temperature === null ) return ;
75+ payload = { voltage : parseFloat ( voltage ) , temperature : parseFloat ( temperature ) } ;
76+ } else if ( tool . id === 'opsec_scanner' ) {
77+ endpoint = '/analyze/opsec' ;
78+ const logs = prompt ( "Enter operational logs to scan:" ) ;
79+ if ( ! logs ) return ;
80+ payload = { logs } ;
81+ } else {
82+ alert ( `Launching ${ tool . name } ... (Simulated)` ) ;
83+ return ;
84+ }
85+
86+ setLoading ( true ) ;
87+ setResult ( null ) ;
88+ try {
89+ const response = await fetch ( endpoint , {
90+ method : 'POST' ,
91+ headers : { 'Content-Type' : 'application/json' } ,
92+ body : JSON . stringify ( payload )
93+ } ) ;
94+ const data = await response . json ( ) ;
95+ setResult ( { tool : tool . name , data } ) ;
96+ } catch ( error ) {
97+ console . error ( "Error launching tool:" , error ) ;
98+ alert ( "Failed to connect to the analysis backend." ) ;
99+ } finally {
100+ setLoading ( false ) ;
101+ }
102+ } ;
48103
49104 return (
50105 < div className = "assistance-container" >
@@ -65,6 +120,23 @@ export default function OfficialAssistance() {
65120 < h2 > { assistanceRoles [ activeRole ] . title } </ h2 >
66121 < p className = "role-description" > { assistanceRoles [ activeRole ] . description } </ p >
67122
123+ { loading && < div className = "loading-overlay" > Analyzing...</ div > }
124+
125+ { result && (
126+ < div className = "analysis-result-box" >
127+ < h3 > { result . tool } Results</ h3 >
128+ < div className = { `status-badge ${ result . data . status } ` } >
129+ Status: { result . data . status }
130+ </ div >
131+ < ul >
132+ { result . data . findings . map ( ( finding , idx ) => (
133+ < li key = { idx } > { finding } </ li >
134+ ) ) }
135+ </ ul >
136+ < button className = "close-btn" onClick = { ( ) => setResult ( null ) } > Close</ button >
137+ </ div >
138+ ) }
139+
68140 < div className = "tool-list" >
69141 { assistanceRoles [ activeRole ] . tools . map ( ( tool ) => (
70142 < div key = { tool . id } className = "assistance-tool-card" >
@@ -73,7 +145,7 @@ export default function OfficialAssistance() {
73145 < h3 > { tool . name } </ h3 >
74146 < p > { tool . desc } </ p >
75147 </ div >
76- < button className = "action-btn" onClick = { ( ) => alert ( `Launching ${ tool . name } ...` ) } > Launch</ button >
148+ < button className = "action-btn" onClick = { ( ) => handleLaunch ( tool ) } > Launch</ button >
77149 </ div >
78150 ) ) }
79151 </ div >
@@ -160,6 +232,37 @@ export default function OfficialAssistance() {
160232 font-weight: bold;
161233 cursor: pointer;
162234 }
235+ .analysis-result-box {
236+ background: #1e2127;
237+ border: 1px solid #61dafb;
238+ padding: 20px;
239+ border-radius: 10px;
240+ margin-bottom: 30px;
241+ }
242+ .status-badge {
243+ display: inline-block;
244+ padding: 5px 10px;
245+ border-radius: 4px;
246+ font-weight: bold;
247+ margin-bottom: 10px;
248+ }
249+ .status-badge.SECURE, .status-badge.STABLE, .status-badge.CLEAR { background: #4caf50; }
250+ .status-badge.RISK_DETECTED, .status-badge.ANOMALY, .status-badge.THREAT_DETECTED { background: #f44336; }
251+ .loading-overlay {
252+ padding: 20px;
253+ text-align: center;
254+ color: #61dafb;
255+ font-weight: bold;
256+ }
257+ .close-btn {
258+ background: #555;
259+ color: white;
260+ border: none;
261+ padding: 5px 15px;
262+ border-radius: 4px;
263+ cursor: pointer;
264+ margin-top: 10px;
265+ }
163266 ` } </ style >
164267 </ div >
165268 ) ;
0 commit comments