Conversation
There was a problem hiding this comment.
🟡 Changes recommended
There are confirmed functional/lint issues (unused imports/vars, missing CSS class definitions for Reports UI, and websocket error handling blocking reconnect) that should be addressed before approval.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Pull request overview
This PR is primarily a UI/UX refresh and layout refactor across SecureNet UI pages (dashboard, alerts, analysis, reports, auth, settings, etc.), alongside a few interaction/navigation improvements and minor realtime/utility component updates.
Changes:
- Standardizes page/container layouts (many pages now use
padding: 0and new grid-based rows/cards) and updates card/charts styling. - Enhances navigation and interactions (dashboard KPI click-throughs, landing “Get Started” navigation, notifications expand/collapse, topbar dropdown behavior).
- Refactors/extends UI components (Card styles, AnimatedCounter formatting, Chart components, and websocket cleanup logic).
File summaries
| File | Description |
|---|---|
| securenet-ui/src/styles/pages/simulation.css | Adjusts simulation page padding and adds user training grid row/card styles. |
| securenet-ui/src/styles/pages/signup.css | Adds new landscape signup card layout, form grid, and high-visibility input styling. |
| securenet-ui/src/styles/pages/settings.css | Refactors settings layout into a compact 3-column responsive grid and tightens spacing. |
| securenet-ui/src/styles/pages/reports.css | Introduces new reports page container, row layout, and report history card/list styling. |
| securenet-ui/src/styles/pages/profile.css | Adds new multi-row profile layout and card/grid styling for user profile pages. |
| securenet-ui/src/styles/pages/notifications.css | Converts notifications lists to a 3-column grid and adds expandable details styling. |
| securenet-ui/src/styles/pages/logs.css | Removes page padding and adds a scoped logs UI layout (.logs-*) with controls/KPIs/table. |
| securenet-ui/src/styles/pages/login.css | Adds login logo and selection footer styles. |
| securenet-ui/src/styles/pages/integrations.css | Removes page padding and adds user integrations grid row layout styles. |
| securenet-ui/src/styles/pages/dashboard.css | Replaces prior dashboard page styling with new “db-*” layout system and card styles. |
| securenet-ui/src/styles/pages/analysis.css | Adds scoped attack analysis layout styles (.aa-*) and some AI layout fallbacks. |
| securenet-ui/src/styles/pages/alerts.css | Refactors alerts page into new container + compact bar + 3-column alert grid styles. |
| securenet-ui/src/styles/pages/ai.css | Splits AI Insights styling into its own page stylesheet (separate from analysis). |
| securenet-ui/src/styles/pages/admin.css | Removes admin page padding to align with new container layout approach. |
| securenet-ui/src/pages/Signup.jsx | Updates signup UI to a 2-panel landscape layout with icons and improved validation messages. |
| securenet-ui/src/pages/ResetPassword.jsx | Replaces emoji password toggle with “Show/Hide” text. |
| securenet-ui/src/pages/Reports.jsx | Refactors reports page layout into rows/cards, adds report history expand/collapse UI. |
| securenet-ui/src/pages/Login.jsx | Adds logo to login selection view and a signup CTA footer. |
| securenet-ui/src/pages/Landing.jsx | Adds programmatic navigation for “Get Started” and replaces feature icons with text tags. |
| securenet-ui/src/pages/Dashboard.jsx | Refactors dashboard layout classes, adds navigation click-throughs, and improves WS cleanup. |
| securenet-ui/src/pages/AttackAnalysis.jsx | Adds explicit import of analysis stylesheet. |
| securenet-ui/src/pages/AIInsights.jsx | Switches AI Insights styling import from analysis.css to ai.css. |
| securenet-ui/src/layouts/DashboardLayout.css | Changes layout padding/margins and makes content a flex child for full-height layouts. |
| securenet-ui/src/hooks/useRealtimeAlerts.js | Improves websocket cleanup / reconnect guarding to reduce updates after unmount. |
| securenet-ui/src/components/ui/Card.css | Replaces prior glass/cyber card styling with a cleaner high-contrast card system. |
| securenet-ui/src/components/ui/AnimatedCounter.jsx | Speeds animation, adds numeric formatting, and removes “animating” class toggling. |
| securenet-ui/src/components/transitions/PageTransition.css | Removes glitch overlay animation styling. |
| securenet-ui/src/components/simulation/UserSimulation.jsx | Refactors user simulations UI into new grid rows/cards and improves badge styling. |
| securenet-ui/src/components/simulation/AdminSimulation.jsx | Updates admin simulation badges to use richer style objects instead of plain colors. |
| securenet-ui/src/components/security/ThreatIntelligence.jsx | Makes Threat Intelligence card clickable to open Attack Analysis. |
| securenet-ui/src/components/security/QuickActions.jsx | Removes emoji prefixes from action labels. |
| securenet-ui/src/components/security/IncidentPanel.jsx | Adds toasts and navigation to Alerts from incident response actions. |
| securenet-ui/src/components/security/AttackTimeline.jsx | Makes timeline clickable, adds “latest event” summary, and adds CTA button to Alerts. |
| securenet-ui/src/components/profile/AdminProfile.jsx | Major admin profile UI refresh with toasts, icons, and new row-based layout. |
| securenet-ui/src/components/notifications/UserView.jsx | Converts notifications to expandable 3-column cards with lucide icons. |
| securenet-ui/src/components/effects/ScanLine.css | Disables scan line effect via display: none !important. |
| securenet-ui/src/components/debug/OrgDebug.jsx | Replaces emoji checklist with [PASS] text markers. |
| securenet-ui/src/components/dashboard/UserView.jsx | Fixes/updates import paths to Card/Charts/AnimatedCounter under new structure. |
| securenet-ui/src/components/dashboard/Topbar.jsx | Refactors dropdown behavior (hover + close-on-route-change) and adds logo image. |
| securenet-ui/src/components/dashboard/Topbar.css | Refactors navbar layout to flex, adds logo image styling, modernizes dropdown styles. |
| securenet-ui/src/components/dashboard/Sidebar.jsx | Replaces emoji icons with SVGs, adds lucide close icon, adds sidebar logo image. |
| securenet-ui/src/components/dashboard/Sidebar.css | Adds styles for the new sidebar logo image. |
| securenet-ui/src/components/dashboard/AdminView.jsx | Updates import paths to Card/Charts/AnimatedCounter and dashboard stylesheet path. |
| securenet-ui/src/components/common/ProtectedRoute.jsx | Adds proper loading gate and redirects unauthenticated users to /login with replace. |
| securenet-ui/src/components/common/Navbar.jsx | Replaces navbar text logo with logo image. |
| securenet-ui/src/components/common/Navbar.css | Adds logo image styling and aligns navbar logo container. |
| securenet-ui/src/components/common/AdminBanner.css | Changes admin banner from fixed to relative, adjusts sizing and removes pulse animation. |
| securenet-ui/src/components/Charts/PieChart.jsx | Adds Doughnut support, data normalization, and improved legend/tooltip styling. |
| securenet-ui/src/components/Charts/PieChart.css | Simplifies pie chart wrapper styles and ensures canvas sizing responsiveness. |
| securenet-ui/src/components/Charts/LineChart.jsx | Adds flexible input formats, dual-series support, filler, and improved axis/tooltip styling. |
| securenet-ui/src/components/Charts/LineChart.css | Simplifies wrapper and ensures canvas fits container. |
| securenet-ui/src/components/analysis/UserView.jsx | Refactors user attack analysis layout into .aa-* carded header/charts/table structure. |
| securenet-ui/src/components/analysis/UserAIInsights.jsx | Updates imports to new Charts paths and switches stylesheet to ai.css. |
| securenet-ui/src/components/analysis/AdminAIInsights.jsx | Switches stylesheet to ai.css and adjusts KPI formatting and layout sections. |
| securenet-ui/index.html | Updates favicon to logo.jpg and sets page title to “SecureNet IDS”. |
Review details
- Files reviewed: 64/71 changed files
- Comments generated: 6
- Review effort level: Lite
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
58
to
+64
| ws.onclose = () => { | ||
| reconnectTimeout = setTimeout(connectWs, 3000); | ||
| if (!isDisposed) { | ||
| reconnectTimeout = setTimeout(connectWs, 3000); | ||
| } | ||
| }; | ||
|
|
||
| ws.onerror = () => { | ||
| ws.close(); | ||
| }; | ||
| ws.onerror = () => {}; |
Comment on lines
319
to
325
| <button | ||
| onClick={generateReport} | ||
| className="px-3 py-1.5 text-xs font-semibold rounded-lg bg-slate-800 text-cyan-400 hover:bg-slate-700 transition-colors border border-slate-700" | ||
| className="range-btn" | ||
| style={{ fontSize: '11px', padding: '4px 10px' }} | ||
| > | ||
| Download Again | ||
| </button> |
Comment on lines
+65
to
69
| .reports-list { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 8px; | ||
| gap: 12px; | ||
| } |
Comment on lines
1
to
+13
| import React from 'react'; | ||
| import { useNavigate } from 'react-router-dom'; | ||
| import { useAuth } from '../context/AuthContext'; | ||
| import MainLayout from '../layouts/MainLayout'; | ||
| import '../styles/pages/landing.css'; | ||
|
|
||
| const Landing = () => { | ||
| const { user } = useAuth(); | ||
| const navigate = useNavigate(); | ||
|
|
||
| const handleGetStarted = () => { | ||
| navigate('/login'); | ||
| }; |
Comment on lines
1
to
13
| import React, { useState } from 'react'; | ||
| import { toast } from 'react-hot-toast'; | ||
| import Card from '../components/ui/Card'; | ||
| import { useAuth } from '../context/AuthContext'; | ||
| import '../styles/pages/reports.css'; | ||
|
|
||
| /** | ||
| * Enterprise Reports Page | ||
| * High-performance security report generation and compliance data exports. | ||
| */ | ||
| const Reports = () => { | ||
| const { user } = useAuth(); | ||
| const [reportType, setReportType] = useState('executive_summary'); |
| @@ -1,5 +1,6 @@ | |||
| import React, { useState, useEffect } from 'react'; | |||
| import { useNavigate } from 'react-router-dom'; | |||
| import { ShieldCheck, Eye, EyeOff, CheckCircle2, Lock, User, Mail, Building, UserCheck } from 'lucide-react'; | |||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.