@@ -30,11 +30,63 @@ const assistanceRoles = {
3030 { id : 'traffic' , name : 'Traffic Management' , icon : '🚦' , desc : 'Coordination of road safety and major transit routes.' } ,
3131 { id : 'response' , name : 'Specialized Response' , icon : '🚨' , desc : 'Elite units for counter-terrorism and high-risk interventions.' }
3232 ]
33+ } ,
34+ opsec : {
35+ title : 'Operational Security' ,
36+ icon : '🔐' ,
37+ description : 'Cloud, IoT, and AI-driven security operations for modern infrastructure.' ,
38+ tools : [
39+ { id : 'cloud_guard' , name : 'Cloud Guard' , icon : '☁️' , desc : 'AI scanner for leaked credentials and sensitive cloud data.' } ,
40+ { id : 'iot_shield' , name : 'IoT Shield' , icon : '🌐' , desc : 'Real-time anomaly detection for industrial IoT networks.' } ,
41+ { id : 'opsec_analyzer' , name : 'OpSec Analyzer' , icon : '🕵️' , desc : 'AI-driven analysis of operational logs for procedural threats.' }
42+ ]
3343 }
3444} ;
3545
3646export default function OfficialAssistance ( ) {
3747 const [ activeRole , setActiveRole ] = useState ( 'police' ) ;
48+ const [ analysisResult , setAnalysisResult ] = useState ( null ) ;
49+ const [ loading , setLoading ] = useState ( false ) ;
50+
51+ const handleLaunch = async ( toolId , toolName ) => {
52+ if ( ! [ 'cloud_guard' , 'iot_shield' , 'opsec_analyzer' ] . includes ( toolId ) ) {
53+ alert ( `Launching ${ toolName } ... (Simulation mode)` ) ;
54+ return ;
55+ }
56+
57+ setLoading ( true ) ;
58+ setAnalysisResult ( null ) ;
59+
60+ try {
61+ let endpoint = '' ;
62+ let body = { } ;
63+
64+ if ( toolId === 'cloud_guard' ) {
65+ endpoint = '/analyze/cloud' ;
66+ body = { content : "Sample content with simulated AWS key: AKIA1234567890ABCDEF and Google API Key: AIzaSyA12345678901234567890123456789012" } ;
67+ } else if ( toolId === 'iot_shield' ) {
68+ endpoint = '/analyze/iot' ;
69+ body = { device_data : { voltage : 2.6 , temperature : 82 , rssi : - 95 } } ;
70+ } else if ( toolId === 'opsec_analyzer' ) {
71+ endpoint = '/analyze/opsec' ;
72+ body = { logs : [ "unauthorized access attempt" , "nmap scan detected" , "large outbound transfer" , "sudo usage" ] } ;
73+ }
74+
75+ const response = await fetch ( endpoint , {
76+ method : 'POST' ,
77+ headers : { 'Content-Type' : 'application/json' } ,
78+ body : JSON . stringify ( body )
79+ } ) ;
80+
81+ const data = await response . json ( ) ;
82+ setAnalysisResult ( { title : toolName , data } ) ;
83+ } catch ( error ) {
84+ console . error ( "Error launching tool:" , error ) ;
85+ alert ( "Failed to connect to security backend. Make sure the Flask server is running." ) ;
86+ } finally {
87+ setLoading ( false ) ;
88+ }
89+ } ;
3890
3991 return (
4092 < div className = "assistance-container" >
@@ -63,10 +115,24 @@ export default function OfficialAssistance() {
63115 < h3 > { tool . name } </ h3 >
64116 < p > { tool . desc } </ p >
65117 </ div >
66- < button className = "action-btn" onClick = { ( ) => alert ( `Launching ${ tool . name } ...` ) } > Launch</ button >
118+ < button
119+ className = "action-btn"
120+ onClick = { ( ) => handleLaunch ( tool . id , tool . name ) }
121+ disabled = { loading }
122+ >
123+ { loading ? 'Processing...' : 'Launch' }
124+ </ button >
67125 </ div >
68126 ) ) }
69127 </ div >
128+
129+ { analysisResult && (
130+ < div className = "analysis-result" >
131+ < h3 > { analysisResult . title } - AI Analysis Output</ h3 >
132+ < pre > { JSON . stringify ( analysisResult . data , null , 2 ) } </ pre >
133+ < button className = "close-result" onClick = { ( ) => setAnalysisResult ( null ) } > Close Results</ button >
134+ </ div >
135+ ) }
70136 </ div >
71137
72138 < style jsx > { `
@@ -150,6 +216,35 @@ export default function OfficialAssistance() {
150216 font-weight: bold;
151217 cursor: pointer;
152218 }
219+ .action-btn:disabled {
220+ background: #555;
221+ cursor: not-allowed;
222+ }
223+ .analysis-result {
224+ margin-top: 30px;
225+ background: #1e2127;
226+ padding: 20px;
227+ border-radius: 8px;
228+ border: 1px solid #61dafb;
229+ }
230+ .analysis-result pre {
231+ background: #000;
232+ padding: 15px;
233+ border-radius: 5px;
234+ overflow-x: auto;
235+ color: #00ff00;
236+ font-family: 'Courier New', Courier, monospace;
237+ font-size: 0.85rem;
238+ }
239+ .close-result {
240+ background: transparent;
241+ color: #61dafb;
242+ border: 1px solid #61dafb;
243+ padding: 5px 15px;
244+ border-radius: 4px;
245+ cursor: pointer;
246+ margin-top: 10px;
247+ }
153248 ` } </ style >
154249 </ div >
155250 ) ;
0 commit comments