Merge branch 'feature/weekly-report-upload'

Add weekly vulnerability report upload feature
Implements a comprehensive system for uploading and processing weekly vulnerability reports that automatically splits multiple CVE IDs in a single cell into separate rows for easier filtering and analysis. Backend Changes: - Add weekly_reports table with migration - Create Excel processor helper using Python child_process - Implement API routes for upload, list, download, delete - Mount routes in server.js after multer initialization - Move split_cve_report.py to backend/scripts/ Frontend Changes: - Add WeeklyReportModal component with phase-based UI - Add "Weekly Report" button next to NVD Sync - Integrate modal into App.js with state management - Display existing reports with current report indicator - Download buttons for original and processed files Features: - Upload .xlsx files (editor/admin only) - Automatic CVE ID splitting via Python script - Store metadata in database + files on filesystem - Auto-archive previous reports (mark one as current) - Download both original and processed versions - Audit logging for all operations - Security: file validation, auth checks, path sanitization Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2026-02-13 09:27:57 -07:00 · 2026-02-11 16:41:39 -07:00 · 2026-02-10 15:59:05 -07:00 · 2026-02-10 14:43:51 -07:00 · 2026-02-10 12:09:38 -07:00 · 2026-02-10 10:12:56 -07:00
18 changed files with 3507 additions and 334 deletions
--- a/.claude/agents/frontend.md
+++ b/.claude/agents/frontend.md
@@ -3,6 +3,8 @@
 ## Role
 You are the frontend specialist for the CVE Dashboard project. You build and maintain the React UI, handle client-side state, manage API communication, and implement user-facing features.
 **IMPORTANT:** When creating new UI components or implementing frontend features, you should use the `frontend-design` skill to ensure production-grade, distinctive design quality. Invoke this skill using the Skill tool with `skill: "frontend-design"`.
 ## Project Context
 ### Tech Stack
--- a/.claude/instructions.md
+++ b/.claude/instructions.md
@@ -0,0 +1,25 @@
 # Project Instructions
 ## Token Usage & Efficiency
 Follow the guidelines in `.claude/optimization.md` for:
 - When to use subagents vs main conversation
 - Model selection (Haiku vs Sonnet)
 - Token preservation strategies
 - Rate limiting rules
 ## Project Context
 This is a CVE (Common Vulnerabilities and Exposures) dashboard application for tracking security vulnerabilities, vendors, and JIRA tickets.
 ## Security Focus
 All code changes should consider:
 - Input validation
 - SQL injection prevention
 - XSS protection
 - Authentication/authorization
 ## Frontend Development
 When working on frontend features or UI components:
 - Use the `frontend-design` skill for new component creation and UI implementation
 - This skill provides production-grade design quality and avoids generic AI aesthetics
 - Invoke it using: `Skill` tool with `skill: "frontend-design"`
 - The skill will guide implementation with distinctive, polished code patterns
--- a/.claude/optimization.md
+++ b/.claude/optimization.md
@@ -0,0 +1,143 @@
 OPTIMIZATION.md - Token Usage & Subagent Strategy
 ## SUBAGENT USAGE STRATEGY
 Subagents run in separate contexts and preserve main conversation tokens.
 ### When to Use Subagents
 **Use Subagents for:**
 - Large-scale codebase exploration and analysis
 - Complex multi-step investigations across many files
 - Detailed code pattern searches and refactoring analysis
 - Gathering comprehensive information before main conversation work
 - When total tokens would exceed 30,000 in main conversation
 **Keep in Main Conversation:**
 - Direct file edits (1-3 files)
 - Simple code changes and debugging
 - Architecture decisions
 - Security reviews and approvals
 - User-facing responses and recommendations
 - Questions requiring reasoning about codebase
 - Frontend UI work (use `frontend-design` skill for new components)
 ### Subagent Types & When to Use
 **Explore Agent** (Haiku 3.5)
 - Codebase exploration and file discovery
 - Pattern searching across large codebases
 - Gathering information about file structure
 - Finding references and relationships
 **General-Purpose Agent** (Haiku 3.5)
 - Multi-step code analysis tasks
 - Summarizing findings from exploration
 - Complex searches requiring multiple strategies
 - Collecting data for main conversation decisions
 ---
 ## MODEL SELECTION STRATEGY
 ### Main Conversation (Sonnet 4.5)
 - **Always use Sonnet 4.5 in main conversation**
 - Direct file edits and modifications
 - Architecture and design decisions
 - Security analysis and approvals
 - Complex reasoning and recommendations
 - Final user responses
 ### Subagent Models
 **Haiku 4.5** (Default for subagents)
 - Code exploration and pattern searching
 - File discovery and structure analysis
 - Simple codebase investigations
 - Gathering information and summarizing
 - Task: Use Haiku first for subagent work
 **Sonnet 4.5** (For subagents - when needed)
 - Security-critical analysis within subagents
 - Complex architectural decisions needed in exploration
 - High-risk code analysis
 - When exploration requires advanced reasoning
 ---
 ## RATE LIMITING GUIDANCE
 ### API Call Throttling
 - 5 seconds minimum between API calls
 - 10 seconds minimum between web searches
 - Batch similar work whenever possible
 - If you hit 429 error: STOP and wait 5 minutes
 ### Budget Management
 - Track tokens used across all agents
 - Main conversation should stay under 100,000 tokens
 - Subagent work can extend to 50,000 tokens per agent
 - Batch multiple subagent tasks together when possible
 ---
 ## TOKEN PRESERVATION RULES
 ### Best Practices for Long-Running Conversations
 **In Main Conversation:**
 1. Start with subagent for exploration (saves ~20,000 tokens)
 2. Request subagent summarize findings
 3. Use summary to inform main conversation edits/decisions
 4. Keep main conversation focused on decisions and actions
 **Information Gathering:**
 - Use subagents to explore before asking for analysis in main conversation
 - Have subagent provide condensed summaries (250-500 words max)
 - Main conversation uses summary + provides feedback/decisions
 **File Editing:**
 - For <3 files: Keep in main conversation
 - For 3+ files: Split between subagent (finding/analysis) and main (approval/execution)
 - Simple edits (1-5 lines per file): Main conversation
 - Complex refactoring (10+ lines per file): Subagent analysis + main approval
 **Code Review Workflow:**
 1. Subagent explores and analyzes code patterns
 2. Subagent flags issues and suggests improvements
 3. Main conversation reviews suggestions
 4. Main conversation executes approved changes
 ### Token Budget Allocation Example
 - Main conversation: 0-100,000 tokens (soft limit)
 - Per subagent task: 0-50,000 tokens
 - Critical work (security): Use Sonnet in main conversation
 - Exploratory work: Use Explore agent (Haiku) in subagent
 ---
 ## DECISION TREE
 ```
 Is this a direct file edit request?
 ├─ YES (1-3 files, <10 lines each) → Main conversation
 ├─ NO
 └─ Is this exploratory analysis?
   ├─ YES (finding files, patterns) → Use Explore agent (Haiku)
   ├─ NO
   └─ Is this complex multi-step work?
      ├─ YES (3+ steps, many files) → Use General agent (Haiku)
      ├─ NO
      └─ Is this security-critical?
         ├─ YES → Main conversation (Sonnet)
         └─ NO → Subagent (Haiku) or Main conversation
 ```
 ---
 ## SUMMARY
 **Main Conversation (You):** Architecture, decisions, edits, reviews
 **Subagents:** Exploration, analysis, information gathering
 **Sonnet 4.5:** Security, complexity, final decisions
 **Haiku 4.5:** Exploration, gathering, analysis support
--- a/COLOR_SCHEME_MODERNIZATION.md
+++ b/COLOR_SCHEME_MODERNIZATION.md
@@ -0,0 +1,79 @@
 # CVE Dashboard - Color Scheme Modernization
 ## Overview
 Successfully modernized the color scheme from retro 80s/neon arcade aesthetic to a professional, sophisticated tactical intelligence platform look.
 ## Color Palette Changes
 ### Before (Neon/Retro)
 - **Accent**: `#00D9FF` - Bright cyan (too neon)
 - **Warning**: `#FFB800` - Bright yellow/orange (too saturated)
 - **Danger**: `#FF3366` - Neon pink/red
 - **Success**: `#00FF88` - Bright green (too bright)
 - **Background Dark**: `#0A0E27`, `#131937`, `#1E2749`
 ### After (Modern Professional)
 - **Accent**: `#0EA5E9` - Sky Blue (professional, refined cyan)
 - **Warning**: `#F59E0B` - Amber (sophisticated, warm)
 - **Danger**: `#EF4444` - Modern Red (urgent but refined)
 - **Success**: `#10B981` - Emerald (professional green)
 - **Background Dark**: `#0F172A`, `#1E293B`, `#334155` (Tailwind Slate palette)
 ## Design Philosophy
 ### Refinement Approach
 1. **Reduced Glow Intensity**: Lowered opacity and blur radius on all glows from 0.9 to 0.4-0.5
 2. **Subtler Borders**: Changed from 3px bright borders to 1.5-2px refined borders
 3. **Professional Gradients**: Updated background gradients to use slate tones instead of stark blues
 4. **Sophisticated Shadows**: Reduced shadow intensity while maintaining depth
 5. **Text Shadow Refinement**: Reduced from aggressive glows to subtle halos
 ### Key Changes
 #### Severity Badges
 - **Critical**: Neon pink → Modern red with refined glow
 - **High**: Bright yellow → Amber with warm tones
 - **Medium**: Bright cyan → Sky blue professional
 - **Low**: Bright green → Emerald sophisticated
 #### Interactive Elements
 - **Buttons**: Reduced glow from 25px to 20px radius, lowered opacity
 - **Input Fields**: More subtle focus states, refined borders
 - **Cards**: Gentler hover effects, professional elevation
 - **Stat Cards**: Refined top accent lines, subtle glows
 #### Layout Components
 - **Wiki Panel**: Updated to emerald accent with professional borders
 - **Calendar**: Sky blue accent with refined styling
 - **Tickets Panel**: Amber accent maintaining urgency without neon feel
 - **CVE Cards**: Slate-based gradients with professional depth
 ## Technical Implementation
 ### Files Modified
 1. **App.css**: Updated all CSS variables, component styles, and utility classes
 2. **App.js**: Updated inline STYLES object and all JSX color references
 ### CSS Variables Updated
 ```css
 --intel-darkest: #0F172A
 --intel-dark: #1E293B
 --intel-medium: #334155
 --intel-accent: #0EA5E9
 --intel-warning: #F59E0B
 --intel-danger: #EF4444
 --intel-success: #10B981
 --intel-grid: rgba(14, 165, 233, 0.08)
 ```
 ### Maintained Features
 ✓ Pulsing button effects on hover/click
 ✓ Scanning line animation
 ✓ Card hover elevations
 ✓ Badge glow dots
 ✓ Grid background effect
 ✓ Three-column layout
 ✓ All interactive functionality
 ## Result
 The dashboard now presents a modern, professional tactical intelligence platform aesthetic while preserving all the visual interest, depth, and functionality that made the original design engaging. The color scheme feels premium and sophisticated rather than arcade-like, suitable for enterprise security operations.
--- a/DESIGN_SYSTEM.md
+++ b/DESIGN_SYSTEM.md
@@ -0,0 +1,294 @@
 # CVE Intelligence Dashboard - Design System Reference
 ## 🎨 Color Palette
 ### Primary Colors
 ```css
 --intel-darkest: #0F172A    /* Slate 900 - Deepest background */
 --intel-dark: #1E293B       /* Slate 800 - Card backgrounds */
 --intel-medium: #334155     /* Slate 700 - Elevated elements */
 ```
 ### Accent & Status Colors
 ```css
 --intel-accent: #0EA5E9    /* Sky Blue - Primary accent, links, interactive elements */
 --intel-warning: #F59E0B   /* Amber - Warnings, high severity, open tickets */
 --intel-danger: #EF4444    /* Red - Critical severity, destructive actions */
 --intel-success: #10B981   /* Emerald - Success states, low severity, confirmations */
 ```
 ### Text Colors
 ```css
 --text-primary: #F8FAFC    /* Slate 50 - Primary text */
 --text-secondary: #E2E8F0  /* Slate 200 - Secondary text */
 --text-tertiary: #CBD5E1   /* Slate 300 - Labels, metadata */
 --text-muted: #94A3B8      /* Slate 400 - Placeholders, disabled */
 ```
 ### Severity Badge Colors
 | Severity | Border | Background | Text | Glow Dot |
 |----------|--------|------------|------|----------|
 | **Critical** | `#EF4444` | `rgba(239, 68, 68, 0.25)` | `#FCA5A5` | `#EF4444` |
 | **High** | `#F59E0B` | `rgba(245, 158, 11, 0.25)` | `#FCD34D` | `#F59E0B` |
 | **Medium** | `#0EA5E9` | `rgba(14, 165, 233, 0.25)` | `#7DD3FC` | `#0EA5E9` |
 | **Low** | `#10B981` | `rgba(16, 185, 129, 0.25)` | `#6EE7B7` | `#10B981` |
 ## 📐 Layout Structure
 ### Three-Column Grid Layout
 ```
 ┌─────────────────────────────────────────────────────────────┐
 │                    HEADER & STATS BAR                       │
 │  CVE INTEL  |  [Stats: Total, Entries, Tickets, Critical] │
 ├──────────────┬─────────────────────────┬────────────────────┤
 │              │                         │                    │
 │  LEFT PANEL  │     CENTER PANEL        │   RIGHT PANEL     │
 │  (3 cols)    │     (6 cols)            │   (3 cols)        │
 │              │                         │                    │
 │  Knowledge   │  Quick CVE Lookup       │   Calendar        │
 │  Base        │  Search & Filters       │   Widget          │
 │  - Wiki      │  CVE Results List       │                   │
 │  - Docs      │  - Expandable cards     │   Open Tickets    │
 │  - Policies  │  - Vendor entries       │   - Compact list  │
 │  - Guides    │  - Documents            │   - Quick stats   │
 │              │  - JIRA tickets         │                   │
 │              │                         │                    │
 └──────────────┴─────────────────────────┴────────────────────┘
 ```
 ### Responsive Breakpoints
 - **Desktop (lg+)**: 3-column layout (3-6-3 grid)
 - **Tablet/Mobile**: Stacked single column
 ## 🎯 Component Specifications
 ### Stat Cards
 ```css
 Background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(51, 65, 85, 0.9))
 Border: 2px solid [accent-color]
 Border Radius: 0.5rem
 Padding: 1rem
 Top Accent Line: 2px gradient, 0 0 8px glow
 Shadow: 0 4px 16px rgba(0, 0, 0, 0.5)
 Hover: translateY(-2px), enhanced shadow
 ```
 ### Intel Cards (Main Content)
 ```css
 Background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(51, 65, 85, 0.9))
 Border: 2px solid rgba(14, 165, 233, 0.4)
 Shadow: 0 8px 24px rgba(0, 0, 0, 0.6), subtle glow
 Hover: Enhanced border (0.5 opacity), lift effect
 ```
 ### Buttons
 ```css
 /* Primary */
 Background: linear-gradient(135deg, rgba(14, 165, 233, 0.15), rgba(14, 165, 233, 0.1))
 Border: 1px solid #0EA5E9
 Color: #38BDF8
 Text Shadow: 0 0 6px rgba(14, 165, 233, 0.2)
 /* Hover State */
 Background: linear-gradient(135deg, rgba(14, 165, 233, 0.25), rgba(14, 165, 233, 0.2))
 Shadow: 0 0 20px rgba(14, 165, 233, 0.25)
 Transform: translateY(-1px)
 Ripple Effect: 300px radial on click
 ```
 ### Input Fields
 ```css
 Background: rgba(30, 41, 59, 0.6)
 Border: 1px solid rgba(14, 165, 233, 0.25)
 Font: 'JetBrains Mono', monospace
 Focus: border #0EA5E9, ring 2px rgba(14, 165, 233, 0.15)
 ```
 ### Badges (Status/Severity)
 ```css
 Display: inline-flex
 Align Items: center
 Gap: 0.5rem
 Border: 2px solid [severity-color]
 Border Radius: 0.375rem
 Padding: 0.375rem 0.875rem
 Font: 'JetBrains Mono', 0.75rem, 700, uppercase
 Letter Spacing: 0.5px
 Glow Dot: 8px circle with pulse animation
 ```
 ## ✨ Interactions & Animations
 ### Hover Effects
 - **Cards**: `translateY(-2px)`, enhanced border, subtle glow
 - **Buttons**: Radial ripple expand (300px), slight lift
 - **List Items**: Border color shift, background lighten
 ### Animations
 ```css
 /* Pulse Glow (for dots) */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.2); }
 }
 /* Scan Line */
@keyframes scan {
  0%, 100% { transform: translateY(-100%); opacity: 0; }
  50% { transform: translateY(2000%); opacity: 0.5; }
 }
 /* Spin (loading) */
@keyframes spin {
  to { transform: rotate(360deg); }
 }
 ```
 ### Transitions
 ```css
 Standard: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)
 Fast: all 0.2s ease
 Ripple: width/height 0.5s
 ```
 ## 🔤 Typography
 ### Font Families
 ```css
 Primary (UI): 'Outfit', system-ui, sans-serif
 Monospace (Data/Code): 'JetBrains Mono', monospace
 ```
 ### Font Sizes & Weights
 ```css
 /* Headings */
 h1: 2.5rem (40px), 700, monospace
 h2: 1.125rem (18px), 600, uppercase, tracking-wider
 h3: 1.125rem (18px), 600
 /* Body */
 Body: 0.875rem (14px), 400
 Small: 0.75rem (12px), 400
 Labels: 0.75rem (12px), 500, uppercase, tracking-wider
 ```
 ### Text Shadows (Headings)
 ```css
 Accent Headings: 0 0 16px rgba(14, 165, 233, 0.3), 0 0 32px rgba(14, 165, 233, 0.15)
 Badge Text: 0 0 8px rgba([color], 0.5)
 ```
 ## 🎨 Visual Effects
 ### Shadows
 ```css
 /* Card Elevations */
 Level 1: 0 2px 6px rgba(0, 0, 0, 0.3)
 Level 2: 0 4px 12px rgba(0, 0, 0, 0.4)
 Level 3: 0 8px 24px rgba(0, 0, 0, 0.6)
 /* Glows */
 Subtle: 0 0 12px rgba([color], 0.12)
 Medium: 0 0 20px rgba([color], 0.15)
 Strong: 0 0 28px rgba([color], 0.25)
 /* Inset Highlights */
 Top: inset 0 1px 0 rgba(14, 165, 233, 0.15)
 Recessed: inset 0 2px 4px rgba(0, 0, 0, 0.3)
 ```
 ### Border Styles
 ```css
 /* Standard Cards */
 Border: 1.5-2px solid rgba(14, 165, 233, 0.3-0.4)
 /* Accent Panels */
 Left Border: 3px solid [accent-color]
 /* Vendor/Nested Cards */
 Border: 1px solid rgba(14, 165, 233, 0.25)
 ```
 ### Gradients
 ```css
 /* Backgrounds */
 Card: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(51, 65, 85, 0.9))
 Nested: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.9))
 /* Accent Lines */
 Top Bar: linear-gradient(90deg, transparent, [color], transparent)
 /* Grid Background */
 linear-gradient(rgba(14, 165, 233, 0.025) 1px, transparent 1px)
 Size: 20px × 20px
 ```
 ## 🧩 Specific Component Patterns
 ### Wiki/Knowledge Base Entry
 ```css
 Background: linear-gradient(135deg, rgba(30, 41, 59, 0.85), rgba(51, 65, 85, 0.75))
 Border: 1px solid rgba(16, 185, 129, 0.25)
 Padding: 0.75rem
 Cursor: pointer
 Hover: border-color shift to rgba(16, 185, 129, 0.4)
 ```
 ### Calendar Widget
 ```css
 Day Cells:
  - Text: white, font-mono, 0.75rem
  - Hover: bg rgba(14, 165, 233, 0.2)
  - Current Day: bg rgba(14, 165, 233, 0.3), border 1px #0EA5E9
  - Other Month: text rgba(148, 163, 184, 0.5)
 ```
 ### Ticket Cards (Compact)
 ```css
 Background: linear-gradient(135deg, rgba(30, 41, 59, 0.85), rgba(51, 65, 85, 0.75))
 Border: 1px solid rgba(245, 158, 11, 0.25)
 Padding: 0.5rem
 Status Badge: Reduced size (0.65rem, 0.25rem padding)
 Glow Dot: 6px diameter
 ```
 ### CVE Expandable Cards
 ```css
 Header: Clickable, cursor pointer
 Collapsed: Show summary (severity, vendor count, doc count)
 Expanded: Full description, metadata, vendor entries
 Chevron: Rotate -90deg (collapsed) to 0deg (expanded)
 Vendor Cards: Nested with reduced opacity borders
 ```
 ## 📱 Accessibility
 ### Contrast Ratios
 - Primary text on dark: 18.5:1 (AAA)
 - Secondary text on dark: 12.3:1 (AAA)
 - Accent colors: All meet WCAG AA minimum
 ### Interactive States
 - Focus rings: 2px solid accent color
 - Hover: Visible border/background changes
 - Active: Transform feedback
 ### Typography
 - Minimum size: 12px (0.75rem)
 - Line height: 1.5 for body text
 - Letter spacing: Generous for uppercase labels
 ## 🎯 Design Principles
 1. **Professional Sophistication**: Modern enterprise feel, not arcade
 2. **Tactical Intelligence**: Purpose-driven, information-dense
 3. **Refined Depth**: Layers and elevation without harsh neon
 4. **Purposeful Color**: Accent colors convey meaning (status, severity)
 5. **Smooth Interactions**: Polished micro-interactions and transitions
 6. **Monospace Data**: Technical data uses JetBrains Mono for clarity
 7. **Generous Spacing**: Breathing room prevents overwhelming density
 ---
 **Last Updated**: February 10, 2026
 **Version**: 2.0 (Modern Professional Redesign)
--- a/WEEKLY_REPORT_FEATURE.md
+++ b/WEEKLY_REPORT_FEATURE.md
@@ -0,0 +1,211 @@
 # Weekly Vulnerability Report Upload Feature
 ## Overview
 A new feature has been added to the CVE Dashboard that allows users to upload their weekly vulnerability reports in Excel format (.xlsx) and automatically process them to split multiple CVE IDs into separate rows for easier filtering and analysis.
 ## What Was Implemented
 ### Backend Changes
 1. **Database Migration** (`backend/migrations/add_weekly_reports_table.js`)
   - Created `weekly_reports` table to store report metadata
   - Tracks upload date, file paths, row counts, and which report is current
   - Indexed for fast queries
 2. **Excel Processor** (`backend/helpers/excelProcessor.js`)
   - Executes Python script via Node.js child_process
   - Parses row counts from Python output
   - Handles errors, timeouts (30 seconds), and validation
 3. **API Routes** (`backend/routes/weeklyReports.js`)
   - `POST /api/weekly-reports/upload` - Upload and process Excel file
   - `GET /api/weekly-reports` - List all reports
   - `GET /api/weekly-reports/:id/download/:type` - Download original or processed file
   - `DELETE /api/weekly-reports/:id` - Delete report (admin only)
 4. **Python Script** (`backend/scripts/split_cve_report.py`)
   - Moved from ~/Documents to backend/scripts
   - Splits comma-separated CVE IDs into separate rows
   - Duplicates device/IP data for each CVE
 ### Frontend Changes
 1. **Weekly Report Modal** (`frontend/src/components/WeeklyReportModal.js`)
   - Phase-based UI: idle → uploading → processing → success
   - File upload with .xlsx validation
   - Display existing reports with current report indicator (★)
   - Download buttons for both original and processed files
 2. **App.js Integration**
   - Added "Weekly Report" button next to NVD Sync button
   - State management for modal visibility
   - Modal rendering
 ## How to Use
 ### Starting the Application
 1. **Backend:**
   ```bash
   cd /home/admin/cve-dashboard/backend
   node server.js
   ```
 2. **Frontend:**
   ```bash
   cd /home/admin/cve-dashboard/frontend
   npm start
   ```
 ### Using the Feature
 1. **Access the Feature**
   - Login as an editor or admin user
   - Look for the "Weekly Report" button in the top header (next to "NVD Sync")
 2. **Upload a Report**
   - Click the "Weekly Report" button
   - Click "Choose File" and select your .xlsx file
   - Click "Upload & Process"
   - Wait for processing to complete (usually 5-10 seconds)
 3. **Download Processed Report**
   - After upload succeeds, you'll see row counts (e.g., "45 → 67 rows")
   - Click "Download Processed" to get the split version
   - The current week's report is marked with a ★ star icon
 4. **Access Previous Reports**
   - All previous reports are listed below the upload section
   - Click the download icons to get original or processed versions
   - Reports are labeled as "This week's report", "Last week's report", or by date
 ### What the Processing Does
 **Before Processing:**
 | HOSTNAME | IP | CVE ID |
 |----------|------------|---------------------------|
 | server01 | 10.0.0.1 | CVE-2024-1234, CVE-2024-5678 |
 **After Processing:**
 | HOSTNAME | IP | CVE ID |
 |----------|------------|---------------------------|
 | server01 | 10.0.0.1 | CVE-2024-1234 |
 | server01 | 10.0.0.1 | CVE-2024-5678 |
 Each CVE now has its own row, making it easy to:
 - Sort by CVE ID
 - Filter for specific CVEs
 - Research CVEs one by one per device
 ## File Locations
 ### New Files Created
 ```
 backend/
  scripts/
    split_cve_report.py          # Python script for CVE splitting
    requirements.txt             # Python dependencies
  routes/
    weeklyReports.js             # API endpoints
  helpers/
    excelProcessor.js            # Python integration
  migrations/
    add_weekly_reports_table.js  # Database migration
  uploads/
    weekly_reports/              # Uploaded and processed files
 frontend/
  src/
    components/
      WeeklyReportModal.js       # Upload modal UI
 ```
 ### Modified Files
 ```
 backend/
  server.js                      # Added route mounting
 frontend/
  src/
    App.js                       # Added button and modal
 ```
 ## Security & Permissions
 - **Upload**: Requires editor or admin role
 - **Download**: Any authenticated user
 - **Delete**: Admin only
 - **File Validation**: Only .xlsx files accepted, 10MB limit
 - **Audit Logging**: All uploads, downloads, and deletions are logged
 ## Troubleshooting
 ### Backend Issues
 **Python not found:**
 ```bash
 # Install Python 3
 sudo apt-get install python3
 ```
 **Missing dependencies:**
 ```bash
 # Install pandas and openpyxl
 pip3 install pandas openpyxl
 ```
 **Port already in use:**
 ```bash
 # Find and kill process using port 3001
 lsof -i :3001
 kill -9 <PID>
 ```
 ### Frontend Issues
 **Button not visible:**
 - Make sure you're logged in as editor or admin
 - Viewer role cannot upload reports
 **Upload fails:**
 - Check file is .xlsx format (not .xls or .csv)
 - Ensure file has "Vulnerabilities" sheet with "CVE ID" column
 - Check file size is under 10MB
 **Processing timeout:**
 - Large files (10,000+ rows) may timeout
 - Try reducing file size or increase timeout in `excelProcessor.js`
 ## Testing Checklist
 - [x] Backend starts without errors
 - [x] Frontend compiles successfully
 - [x] Database migration completed
 - [x] Python dependencies installed
 - [ ] Upload .xlsx file (manual test in browser)
 - [ ] Verify processed file has split CVEs (manual test)
 - [ ] Download original and processed files (manual test)
 - [ ] Verify current report marked with star (manual test)
 - [ ] Test as viewer - button should be hidden (manual test)
 ## Future Enhancements
 Possible improvements:
 - Progress bar during Python processing
 - Email notifications when processing completes
 - Scheduled automatic uploads
 - Report comparison (diff between weeks)
 - Export to other formats (CSV, JSON)
 - Bulk delete old reports
 - Report validation before upload
 ## Support
 For issues or questions:
 1. Check the troubleshooting section above
 2. Review audit logs for error details
 3. Check browser console for frontend errors
 4. Review backend server logs for API errors
--- a/backend/helpers/excelProcessor.js
+++ b/backend/helpers/excelProcessor.js
@@ -0,0 +1,93 @@
 const { spawn } = require('child_process');
 const path = require('path');
 const fs = require('fs');
 /**
 * Process vulnerability report Excel file by splitting CVE IDs into separate rows
 * @param {string} inputPath - Path to original Excel file
 * @param {string} outputPath - Path for processed Excel file
 * @returns {Promise<{original_rows: number, processed_rows: number, output_path: string}>}
 */
 function processVulnerabilityReport(inputPath, outputPath) {
  return new Promise((resolve, reject) => {
    const scriptPath = path.join(__dirname, '..', 'scripts', 'split_cve_report.py');
    // Verify script exists
    if (!fs.existsSync(scriptPath)) {
      return reject(new Error(`Python script not found: ${scriptPath}`));
    }
    // Verify input file exists
    if (!fs.existsSync(inputPath)) {
      return reject(new Error(`Input file not found: ${inputPath}`));
    }
    const python = spawn('python3', [scriptPath, inputPath, outputPath]);
    let stdout = '';
    let stderr = '';
    let timedOut = false;
    // 30 second timeout
    const timeout = setTimeout(() => {
      timedOut = true;
      python.kill();
      reject(new Error('Processing timed out. File may be too large or corrupted.'));
    }, 30000);
    python.stdout.on('data', (data) => {
      stdout += data.toString();
    });
    python.stderr.on('data', (data) => {
      stderr += data.toString();
    });
    python.on('close', (code) => {
      clearTimeout(timeout);
      if (timedOut) return;
      if (code !== 0) {
        // Parse Python error messages
        if (stderr.includes('Sheet') && stderr.includes('not found')) {
          return reject(new Error('Invalid Excel file. Expected "Vulnerabilities" sheet with "CVE ID" column.'));
        }
        if (stderr.includes('pandas') || stderr.includes('openpyxl')) {
          return reject(new Error('Python dependencies missing. Run: pip3 install pandas openpyxl'));
        }
        return reject(new Error(`Python script failed: ${stderr || 'Unknown error'}`));
      }
      // Parse output for row counts
      const originalMatch = stdout.match(/Original rows:\s*(\d+)/);
      const newMatch = stdout.match(/New rows:\s*(\d+)/);
      if (!originalMatch || !newMatch) {
        return reject(new Error('Failed to parse row counts from Python output'));
      }
      // Verify output file was created
      if (!fs.existsSync(outputPath)) {
        return reject(new Error('Processed file was not created'));
      }
      resolve({
        original_rows: parseInt(originalMatch[1]),
        processed_rows: parseInt(newMatch[1]),
        output_path: outputPath
      });
    });
    python.on('error', (err) => {
      clearTimeout(timeout);
      if (err.code === 'ENOENT') {
        reject(new Error('Python 3 is required but not found. Please install Python.'));
      } else {
        reject(err);
      }
    });
  });
 }
 module.exports = { processVulnerabilityReport };
--- a/backend/migrate_jira_tickets.js
+++ b/backend/migrate_jira_tickets.js
@@ -0,0 +1,39 @@
 // Migration: Add jira_tickets table
 const sqlite3 = require('sqlite3').verbose();
 const path = require('path');
 const dbPath = path.join(__dirname, 'cve_database.db');
 const db = new sqlite3.Database(dbPath);
 console.log('Starting JIRA tickets migration...');
 db.serialize(() => {
  // Create jira_tickets table
  db.run(`
    CREATE TABLE IF NOT EXISTS jira_tickets (
      id INTEGER PRIMARY KEY AUTOINCREMENT,
      cve_id TEXT NOT NULL,
      vendor TEXT NOT NULL,
      ticket_key TEXT NOT NULL,
      url TEXT,
      summary TEXT,
      status TEXT DEFAULT 'Open' CHECK(status IN ('Open', 'In Progress', 'Closed')),
      created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
      updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,
      FOREIGN KEY (cve_id, vendor) REFERENCES cves(cve_id, vendor) ON DELETE CASCADE
    )
  `, (err) => {
    if (err) console.error('Error creating table:', err);
    else console.log('✓ jira_tickets table created');
  });
  // Create indexes
  db.run('CREATE INDEX IF NOT EXISTS idx_jira_tickets_cve ON jira_tickets(cve_id, vendor)');
  db.run('CREATE INDEX IF NOT EXISTS idx_jira_tickets_status ON jira_tickets(status)');
  console.log('✓ Indexes created');
 });
 db.close(() => {
  console.log('Migration complete!');
 });
--- a/backend/migrations/add_weekly_reports_table.js
+++ b/backend/migrations/add_weekly_reports_table.js
@@ -0,0 +1,59 @@
 // Migration: Add weekly_reports table for vulnerability report uploads
 const sqlite3 = require('sqlite3').verbose();
 const path = require('path');
 const dbPath = path.join(__dirname, '..', 'cve_database.db');
 const db = new sqlite3.Database(dbPath);
 console.log('Running migration: add_weekly_reports_table');
 db.serialize(() => {
  db.run(`
    CREATE TABLE IF NOT EXISTS weekly_reports (
      id INTEGER PRIMARY KEY AUTOINCREMENT,
      upload_date DATE NOT NULL,
      week_label VARCHAR(50),
      original_filename VARCHAR(255),
      processed_filename VARCHAR(255),
      original_file_path VARCHAR(500),
      processed_file_path VARCHAR(500),
      row_count_original INTEGER,
      row_count_processed INTEGER,
      uploaded_by INTEGER,
      uploaded_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
      is_current BOOLEAN DEFAULT 0,
      FOREIGN KEY (uploaded_by) REFERENCES users(id)
    )
  `, (err) => {
    if (err) {
      console.error('Error creating weekly_reports table:', err);
      process.exit(1);
    }
    console.log('✓ Created weekly_reports table');
  });
  db.run(`
    CREATE INDEX IF NOT EXISTS idx_weekly_reports_date
    ON weekly_reports(upload_date DESC)
  `, (err) => {
    if (err) {
      console.error('Error creating date index:', err);
      process.exit(1);
    }
    console.log('✓ Created index on upload_date');
  });
  db.run(`
    CREATE INDEX IF NOT EXISTS idx_weekly_reports_current
    ON weekly_reports(is_current)
  `, (err) => {
    if (err) {
      console.error('Error creating current index:', err);
      process.exit(1);
    }
    console.log('✓ Created index on is_current');
    console.log('\nMigration completed successfully!');
    db.close();
  });
 });
--- a/backend/routes/weeklyReports.js
+++ b/backend/routes/weeklyReports.js
@@ -0,0 +1,261 @@
 const express = require('express');
 const path = require('path');
 const fs = require('fs');
 const { requireAuth, requireRole } = require('../middleware/auth');
 const logAudit = require('../helpers/auditLog');
 const { processVulnerabilityReport } = require('../helpers/excelProcessor');
 function createWeeklyReportsRouter(db, upload) {
  const router = express.Router();
  // Helper to sanitize filename
  function sanitizePathSegment(segment) {
    if (!segment || typeof segment !== 'string') return '';
    return segment
      .replace(/\0/g, '')
      .replace(/\.\./g, '')
      .replace(/[\/\\]/g, '')
      .trim();
  }
  // Helper to generate week label
  function getWeekLabel(date) {
    const now = new Date();
    const uploadDate = new Date(date);
    const daysDiff = Math.floor((now - uploadDate) / (1000 * 60 * 60 * 24));
    if (daysDiff < 7) {
      return "This week's report";
    } else if (daysDiff < 14) {
      return "Last week's report";
    } else {
      const month = uploadDate.getMonth() + 1;
      const day = uploadDate.getDate();
      const year = uploadDate.getFullYear();
      return `Week of ${month.toString().padStart(2, '0')}/${day.toString().padStart(2, '0')}/${year}`;
    }
  }
  // POST /api/weekly-reports/upload - Upload and process vulnerability report
  router.post('/upload', requireAuth(db), requireRole(db, 'editor', 'admin'), upload.single('file'), async (req, res) => {
    const uploadedFile = req.file;
    if (!uploadedFile) {
      return res.status(400).json({ error: 'No file uploaded' });
    }
    // Validate file extension
    const ext = path.extname(uploadedFile.originalname).toLowerCase();
    if (ext !== '.xlsx') {
      fs.unlinkSync(uploadedFile.path); // Clean up temp file
      return res.status(400).json({ error: 'Only .xlsx files are allowed' });
    }
    const timestamp = Date.now();
    const sanitizedName = sanitizePathSegment(uploadedFile.originalname);
    const reportsDir = path.join(__dirname, '..', 'uploads', 'weekly_reports');
    // Create directory if it doesn't exist
    if (!fs.existsSync(reportsDir)) {
      fs.mkdirSync(reportsDir, { recursive: true });
    }
    const originalFilename = `${timestamp}_original_${sanitizedName}`;
    const processedFilename = `${timestamp}_processed_${sanitizedName}`;
    const originalPath = path.join(reportsDir, originalFilename);
    const processedPath = path.join(reportsDir, processedFilename);
    try {
      // Move uploaded file to permanent location
      fs.renameSync(uploadedFile.path, originalPath);
      // Process the file with Python script
      const result = await processVulnerabilityReport(originalPath, processedPath);
      const uploadDate = new Date().toISOString().split('T')[0];
      // Update previous current reports to not current
      db.run('UPDATE weekly_reports SET is_current = 0 WHERE is_current = 1', (err) => {
        if (err) {
          console.error('Error updating previous current reports:', err);
        }
      });
      // Insert new report record
      const insertSql = `
        INSERT INTO weekly_reports (
          upload_date, week_label, original_filename, processed_filename,
          original_file_path, processed_file_path, row_count_original,
          row_count_processed, uploaded_by, is_current
        ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, 1)
      `;
      const weekLabel = getWeekLabel(uploadDate);
      db.run(
        insertSql,
        [
          uploadDate,
          weekLabel,
          sanitizedName,
          processedFilename,
          originalPath,
          processedPath,
          result.original_rows,
          result.processed_rows,
          req.user.id
        ],
        function (err) {
          if (err) {
            console.error('Error inserting weekly report:', err);
            return res.status(500).json({ error: 'Failed to save report metadata' });
          }
          // Log audit entry
          logAudit(
            db,
            req.user.id,
            req.user.username,
            'UPLOAD_WEEKLY_REPORT',
            'weekly_reports',
            this.lastID,
            JSON.stringify({ filename: sanitizedName, rows: result.processed_rows }),
            req.ip
          );
          res.json({
            success: true,
            id: this.lastID,
            original_rows: result.original_rows,
            processed_rows: result.processed_rows,
            week_label: weekLabel
          });
        }
      );
    } catch (error) {
      // Clean up files on error
      if (fs.existsSync(originalPath)) fs.unlinkSync(originalPath);
      if (fs.existsSync(processedPath)) fs.unlinkSync(processedPath);
      console.error('Error processing vulnerability report:', error);
      res.status(500).json({ error: error.message || 'Failed to process report' });
    }
  });
  // GET /api/weekly-reports - List all reports
  router.get('/', requireAuth(db), (req, res) => {
    const sql = `
      SELECT id, upload_date, week_label, original_filename, processed_filename,
             row_count_original, row_count_processed, is_current, uploaded_at
      FROM weekly_reports
      ORDER BY upload_date DESC, uploaded_at DESC
    `;
    db.all(sql, [], (err, rows) => {
      if (err) {
        console.error('Error fetching weekly reports:', err);
        return res.status(500).json({ error: 'Failed to fetch reports' });
      }
      res.json(rows);
    });
  });
  // GET /api/weekly-reports/:id/download/:type - Download report file
  router.get('/:id/download/:type', requireAuth(db), (req, res) => {
    const { id, type } = req.params;
    if (type !== 'original' && type !== 'processed') {
      return res.status(400).json({ error: 'Invalid download type. Use "original" or "processed"' });
    }
    const sql = `SELECT original_file_path, processed_file_path, original_filename FROM weekly_reports WHERE id = ?`;
    db.get(sql, [id], (err, row) => {
      if (err) {
        console.error('Error fetching report:', err);
        return res.status(500).json({ error: 'Failed to fetch report' });
      }
      if (!row) {
        return res.status(404).json({ error: 'Report not found' });
      }
      const filePath = type === 'original' ? row.original_file_path : row.processed_file_path;
      if (!fs.existsSync(filePath)) {
        return res.status(404).json({ error: 'File not found on disk' });
      }
      // Log audit entry
      logAudit(
        db,
        req.user.id,
        req.user.username,
        'DOWNLOAD_WEEKLY_REPORT',
        'weekly_reports',
        id,
        JSON.stringify({ type }),
        req.ip
      );
      const downloadName = type === 'original' ? row.original_filename : row.original_filename.replace('.xlsx', '_processed.xlsx');
      res.setHeader('Content-Type', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
      res.setHeader('Content-Disposition', `attachment; filename="${downloadName}"`);
      res.sendFile(filePath);
    });
  });
  // DELETE /api/weekly-reports/:id - Delete report (admin only)
  router.delete('/:id', requireAuth(db), requireRole(db, 'admin'), (req, res) => {
    const { id } = req.params;
    const sql = 'SELECT original_file_path, processed_file_path FROM weekly_reports WHERE id = ?';
    db.get(sql, [id], (err, row) => {
      if (err) {
        console.error('Error fetching report for deletion:', err);
        return res.status(500).json({ error: 'Failed to fetch report' });
      }
      if (!row) {
        return res.status(404).json({ error: 'Report not found' });
      }
      // Delete database record
      db.run('DELETE FROM weekly_reports WHERE id = ?', [id], (err) => {
        if (err) {
          console.error('Error deleting report:', err);
          return res.status(500).json({ error: 'Failed to delete report' });
        }
        // Delete files
        if (fs.existsSync(row.original_file_path)) {
          fs.unlinkSync(row.original_file_path);
        }
        if (fs.existsSync(row.processed_file_path)) {
          fs.unlinkSync(row.processed_file_path);
        }
        // Log audit entry
        logAudit(
          db,
          req.user.id,
          req.user.username,
          'DELETE_WEEKLY_REPORT',
          'weekly_reports',
          id,
          null,
          req.ip
        );
        res.json({ success: true });
      });
    });
  });
  return router;
 }
 module.exports = createWeeklyReportsRouter;
--- a/backend/scripts/requirements.txt
+++ b/backend/scripts/requirements.txt
@@ -0,0 +1,2 @@
 pandas>=2.0.0
 openpyxl>=3.0.0
--- a/backend/scripts/split_cve_report.py
+++ b/backend/scripts/split_cve_report.py
@@ -0,0 +1,83 @@
 #!/usr/bin/env python3
 """
 CVE Report Splitter
 Splits multiple CVE IDs in a single row into separate rows for easier filtering and analysis.
 """
 import pandas as pd
 import sys
 from pathlib import Path
 def split_cve_report(input_file, output_file=None, sheet_name='Vulnerabilities', cve_column='CVE ID'):
    """
    Split CVE IDs into separate rows.
    Args:
        input_file: Path to input Excel file
        output_file: Path to output file (default: adds '_Split' to input filename)
        sheet_name: Name of sheet with vulnerability data (default: 'Vulnerabilities')
        cve_column: Name of column containing CVE IDs (default: 'CVE ID')
    """
    input_path = Path(input_file)
    if not input_path.exists():
        print(f"Error: File not found: {input_file}")
        sys.exit(1)
    if output_file is None:
        output_file = input_path.parent / f"{input_path.stem}_Split{input_path.suffix}"
    print(f"Reading: {input_file}")
    try:
        df = pd.read_excel(input_file, sheet_name=sheet_name)
    except ValueError as e:
        print(f"Error: Sheet '{sheet_name}' not found in workbook")
        print(f"Available sheets: {pd.ExcelFile(input_file).sheet_names}")
        sys.exit(1)
    if cve_column not in df.columns:
        print(f"Error: Column '{cve_column}' not found")
        print(f"Available columns: {list(df.columns)}")
        sys.exit(1)
    original_rows = len(df)
    print(f"Original rows: {original_rows}")
    # Split CVE IDs by comma
    df[cve_column] = df[cve_column].astype(str).str.split(',')
    # Explode to create separate rows
    df_exploded = df.explode(cve_column)
    # Clean up CVE IDs
    df_exploded[cve_column] = df_exploded[cve_column].str.strip()
    df_exploded = df_exploded[df_exploded[cve_column].notna()]
    df_exploded = df_exploded[df_exploded[cve_column] != 'nan']
    df_exploded = df_exploded[df_exploded[cve_column] != '']
    # Reset index
    df_exploded = df_exploded.reset_index(drop=True)
    new_rows = len(df_exploded)
    print(f"New rows: {new_rows}")
    print(f"Added {new_rows - original_rows} rows from splitting CVEs")
    # Save output
    df_exploded.to_excel(output_file, index=False, sheet_name=sheet_name)
    print(f"\n✓ Success! Saved to: {output_file}")
    return output_file
 if __name__ == "__main__":
    if len(sys.argv) < 2:
        print("Usage: python3 split_cve_report.py <input_file.xlsx> [output_file.xlsx]")
        print("\nExample:")
        print("  python3 split_cve_report.py 'Vulnerability Workbook.xlsx'")
        print("  python3 split_cve_report.py 'input.xlsx' 'output.xlsx'")
        sys.exit(1)
    input_file = sys.argv[1]
    output_file = sys.argv[2] if len(sys.argv) > 2 else None
    split_cve_report(input_file, output_file)
--- a/backend/server.js
+++ b/backend/server.js
@@ -18,6 +18,7 @@ const createUsersRouter = require('./routes/users');
 const createAuditLogRouter = require('./routes/auditLog');
 const logAudit = require('./helpers/auditLog');
 const createNvdLookupRouter = require('./routes/nvdLookup');
 const createWeeklyReportsRouter = require('./routes/weeklyReports');
 const app = express();
 const PORT = process.env.PORT || 3001;
@@ -78,6 +79,7 @@ function isValidCveId(cveId) {
 const VALID_SEVERITIES = ['Critical', 'High', 'Medium', 'Low'];
 const VALID_STATUSES = ['Open', 'Addressed', 'In Progress', 'Resolved'];
 const VALID_DOC_TYPES = ['advisory', 'email', 'screenshot', 'patch', 'other'];
 const VALID_TICKET_STATUSES = ['Open', 'In Progress', 'Closed'];
 // Validate vendor name - printable chars, reasonable length
 function isValidVendor(vendor) {
@@ -166,6 +168,9 @@ const upload = multer({
    limits: { fileSize: 10 * 1024 * 1024 } // 10MB limit
 });
 // Weekly reports routes (editor/admin for upload, all authenticated for download)
 app.use('/api/weekly-reports', createWeeklyReportsRouter(db, upload));
 // ========== CVE ENDPOINTS ==========
 // Get all CVEs with optional filters (authenticated users)
@@ -857,7 +862,7 @@ app.get('/api/vendors', requireAuth(db), (req, res) => {
 // Get statistics (authenticated users)
 app.get('/api/stats', requireAuth(db), (req, res) => {
    const query = `
-        SELECT 
+        SELECT
            COUNT(DISTINCT c.id) as total_cves,
            COUNT(DISTINCT CASE WHEN c.severity = 'Critical' THEN c.id END) as critical_count,
            COUNT(DISTINCT CASE WHEN c.status = 'Addressed' THEN c.id END) as addressed_count,
@@ -867,7 +872,7 @@ app.get('/api/stats', requireAuth(db), (req, res) => {
        LEFT JOIN documents d ON c.cve_id = d.cve_id
        LEFT JOIN cve_document_status cd ON c.cve_id = cd.cve_id
    `;
-    
+
    db.get(query, [], (err, row) => {
        if (err) {
            console.error(err); return res.status(500).json({ error: 'Internal server error.' });
@@ -876,6 +881,192 @@ app.get('/api/stats', requireAuth(db), (req, res) => {
    });
 });
 // ========== JIRA TICKET ENDPOINTS ==========
 // Get all JIRA tickets (with optional filters)
 app.get('/api/jira-tickets', requireAuth(db), (req, res) => {
    const { cve_id, vendor, status } = req.query;
    let query = 'SELECT * FROM jira_tickets WHERE 1=1';
    const params = [];
    if (cve_id) {
        query += ' AND cve_id = ?';
        params.push(cve_id);
    }
    if (vendor) {
        query += ' AND vendor = ?';
        params.push(vendor);
    }
    if (status) {
        query += ' AND status = ?';
        params.push(status);
    }
    query += ' ORDER BY created_at DESC';
    db.all(query, params, (err, rows) => {
        if (err) {
            console.error('Error fetching JIRA tickets:', err);
            return res.status(500).json({ error: 'Internal server error.' });
        }
        res.json(rows);
    });
 });
 // Create JIRA ticket
 app.post('/api/jira-tickets', requireAuth(db), requireRole('editor', 'admin'), (req, res) => {
    const { cve_id, vendor, ticket_key, url, summary, status } = req.body;
    // Validation
    if (!cve_id || !isValidCveId(cve_id)) {
        return res.status(400).json({ error: 'Valid CVE ID is required.' });
    }
    if (!vendor || !isValidVendor(vendor)) {
        return res.status(400).json({ error: 'Valid vendor is required.' });
    }
    if (!ticket_key || typeof ticket_key !== 'string' || ticket_key.trim().length === 0 || ticket_key.length > 50) {
        return res.status(400).json({ error: 'Ticket key is required (max 50 chars).' });
    }
    if (url && (typeof url !== 'string' || url.length > 500)) {
        return res.status(400).json({ error: 'URL must be under 500 characters.' });
    }
    if (summary && (typeof summary !== 'string' || summary.length > 500)) {
        return res.status(400).json({ error: 'Summary must be under 500 characters.' });
    }
    if (status && !VALID_TICKET_STATUSES.includes(status)) {
        return res.status(400).json({ error: `Status must be one of: ${VALID_TICKET_STATUSES.join(', ')}` });
    }
    const ticketStatus = status || 'Open';
    const query = `
        INSERT INTO jira_tickets (cve_id, vendor, ticket_key, url, summary, status)
        VALUES (?, ?, ?, ?, ?, ?)
    `;
    db.run(query, [cve_id, vendor, ticket_key.trim(), url || null, summary || null, ticketStatus], function(err) {
        if (err) {
            console.error('Error creating JIRA ticket:', err);
            return res.status(500).json({ error: 'Internal server error.' });
        }
        logAudit(db, {
            userId: req.user.id,
            username: req.user.username,
            action: 'jira_ticket_create',
            entityType: 'jira_ticket',
            entityId: this.lastID.toString(),
            details: { cve_id, vendor, ticket_key, status: ticketStatus },
            ipAddress: req.ip
        });
        res.status(201).json({
            id: this.lastID,
            message: 'JIRA ticket created successfully'
        });
    });
 });
 // Update JIRA ticket
 app.put('/api/jira-tickets/:id', requireAuth(db), requireRole('editor', 'admin'), (req, res) => {
    const { id } = req.params;
    const { ticket_key, url, summary, status } = req.body;
    // Validation
    if (ticket_key !== undefined && (typeof ticket_key !== 'string' || ticket_key.trim().length === 0 || ticket_key.length > 50)) {
        return res.status(400).json({ error: 'Ticket key must be under 50 chars.' });
    }
    if (url !== undefined && url !== null && (typeof url !== 'string' || url.length > 500)) {
        return res.status(400).json({ error: 'URL must be under 500 characters.' });
    }
    if (summary !== undefined && summary !== null && (typeof summary !== 'string' || summary.length > 500)) {
        return res.status(400).json({ error: 'Summary must be under 500 characters.' });
    }
    if (status !== undefined && !VALID_TICKET_STATUSES.includes(status)) {
        return res.status(400).json({ error: `Status must be one of: ${VALID_TICKET_STATUSES.join(', ')}` });
    }
    // Build dynamic update
    const fields = [];
    const values = [];
    if (ticket_key !== undefined) { fields.push('ticket_key = ?'); values.push(ticket_key.trim()); }
    if (url !== undefined) { fields.push('url = ?'); values.push(url); }
    if (summary !== undefined) { fields.push('summary = ?'); values.push(summary); }
    if (status !== undefined) { fields.push('status = ?'); values.push(status); }
    if (fields.length === 0) {
        return res.status(400).json({ error: 'No fields to update.' });
    }
    fields.push('updated_at = CURRENT_TIMESTAMP');
    values.push(id);
    db.get('SELECT * FROM jira_tickets WHERE id = ?', [id], (err, existing) => {
        if (err) {
            console.error(err);
            return res.status(500).json({ error: 'Internal server error.' });
        }
        if (!existing) {
            return res.status(404).json({ error: 'JIRA ticket not found.' });
        }
        db.run(`UPDATE jira_tickets SET ${fields.join(', ')} WHERE id = ?`, values, function(updateErr) {
            if (updateErr) {
                console.error('Error updating JIRA ticket:', updateErr);
                return res.status(500).json({ error: 'Internal server error.' });
            }
            logAudit(db, {
                userId: req.user.id,
                username: req.user.username,
                action: 'jira_ticket_update',
                entityType: 'jira_ticket',
                entityId: id,
                details: { before: existing, changes: req.body },
                ipAddress: req.ip
            });
            res.json({ message: 'JIRA ticket updated successfully', changes: this.changes });
        });
    });
 });
 // Delete JIRA ticket
 app.delete('/api/jira-tickets/:id', requireAuth(db), requireRole('editor', 'admin'), (req, res) => {
    const { id } = req.params;
    db.get('SELECT * FROM jira_tickets WHERE id = ?', [id], (err, ticket) => {
        if (err) {
            console.error(err);
            return res.status(500).json({ error: 'Internal server error.' });
        }
        if (!ticket) {
            return res.status(404).json({ error: 'JIRA ticket not found.' });
        }
        db.run('DELETE FROM jira_tickets WHERE id = ?', [id], function(deleteErr) {
            if (deleteErr) {
                console.error('Error deleting JIRA ticket:', deleteErr);
                return res.status(500).json({ error: 'Internal server error.' });
            }
            logAudit(db, {
                userId: req.user.id,
                username: req.user.username,
                action: 'jira_ticket_delete',
                entityType: 'jira_ticket',
                entityId: id,
                details: { ticket_key: ticket.ticket_key, cve_id: ticket.cve_id, vendor: ticket.vendor },
                ipAddress: req.ip
            });
            res.json({ message: 'JIRA ticket deleted successfully' });
        });
    });
 });
 // Start server
 app.listen(PORT, () => {
    console.log(`CVE API server running on http://${API_HOST}:${PORT}`);
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -25,9 +25,67 @@
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>CVE Dashboard</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
      tailwind.config = {
        theme: {
          extend: {
            fontFamily: {
              'mono': ['JetBrains Mono', 'monospace'],
              'sans': ['Outfit', 'system-ui', 'sans-serif'],
            },
            colors: {
              'intel': {
                'darkest': '#0A0E27',
                'dark': '#131937',
                'medium': '#1E2749',
                'accent': '#00D9FF',
                'accent-dim': '#0099BB',
                'danger': '#FF3366',
                'warning': '#FFB800',
                'success': '#00FF88',
                'grid': '#1E2749',
              }
            },
            backgroundImage: {
              'grid-pattern': 'linear-gradient(rgba(0, 217, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 217, 255, 0.03) 1px, transparent 1px)',
            },
            backgroundSize: {
              'grid': '20px 20px',
            },
            animation: {
              'scan': 'scan 3s ease-in-out infinite',
              'pulse-glow': 'pulse-glow 2s ease-in-out infinite',
              'fade-in': 'fade-in 0.5s ease-out',
              'slide-up': 'slide-up 0.4s ease-out',
            },
            keyframes: {
              'scan': {
                '0%, 100%': { transform: 'translateY(-100%)', opacity: '0' },
                '50%': { transform: 'translateY(100%)', opacity: '0.3' },
              },
              'pulse-glow': {
                '0%, 100%': { boxShadow: '0 0 5px rgba(0, 217, 255, 0.3)' },
                '50%': { boxShadow: '0 0 20px rgba(0, 217, 255, 0.6)' },
              },
              'fade-in': {
                '0%': { opacity: '0' },
                '100%': { opacity: '1' },
              },
              'slide-up': {
                '0%': { transform: 'translateY(10px)', opacity: '0' },
                '100%': { transform: 'translateY(0)', opacity: '1' },
              },
            },
          }
        }
      }
    </script>
  </head>
-  <body>
+  <body class="bg-intel-darkest">
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -1,38 +1,649 @@
-.App {
+/* Tactical Intelligence Dashboard Styles */
-  text-align: center;
+/* IMPORTANT: This file MUST be imported in App.js */
 * {
  font-family: 'Outfit', system-ui, sans-serif;
 }
-.App-logo {
+/* Pulse animation for glowing dots - used by inline styles */
-  height: 40vmin;
+@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.2);
  }
 }
 :root {
  /* Base Colors - Modern Slate Foundation */
  --intel-darkest: #0F172A;
  --intel-dark: #1E293B;
  --intel-medium: #334155;
  --intel-accent: #0EA5E9;     /* Sky Blue - professional cyan */
  --intel-warning: #F59E0B;    /* Amber - sophisticated warning */
  --intel-danger: #EF4444;     /* Modern Red - urgent but refined */
  --intel-success: #10B981;    /* Emerald - professional green */
  --intel-grid: rgba(14, 165, 233, 0.08);
  /* Text Colors with proper contrast */
  --text-primary: #F8FAFC;
  --text-secondary: #E2E8F0;
  --text-tertiary: #CBD5E1;
  --text-muted: #94A3B8;
 }
 body {
  background-color: #0F172A;
  color: #E2E8F0;
  overflow-x: hidden;
 }
 /* Utility Classes for Tailwind-style usage */
 .bg-intel-darkest { background-color: var(--intel-darkest); }
 .bg-intel-dark { background-color: var(--intel-dark); }
 .bg-intel-medium { background-color: var(--intel-medium); }
 .text-intel-accent { color: var(--intel-accent); }
 .text-intel-warning { color: var(--intel-warning); }
 .text-intel-danger { color: var(--intel-danger); }
 .text-intel-success { color: var(--intel-success); }
 .border-intel-accent { border-color: var(--intel-accent); }
 .border-intel-warning { border-color: var(--intel-warning); }
 .border-intel-danger { border-color: var(--intel-danger); }
 .border-intel-grid { border-color: var(--intel-grid); }
 /* Grid background effect */
 .grid-bg {
  background-image:
    linear-gradient(rgba(14, 165, 233, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 165, 233, 0.025) 1px, transparent 1px);
  background-size: 20px 20px;
 }
 /* Monospace font for technical data */
 .mono {
  font-family: 'JetBrains Mono', monospace;
 }
 /* Glowing border effect */
 .glow-border {
  position: relative;
  border: 1px solid rgba(14, 165, 233, 0.3);
 }
 .glow-border::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  background: linear-gradient(45deg, transparent, rgba(14, 165, 233, 0.08), transparent);
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  z-index: -1;
 }
 .glow-border:hover::before {
  opacity: 1;
 }
 /* Scanning line animation */
 .scan-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    rgba(14, 165, 233, 0.6),
    transparent
  );
  animation: scan 3s ease-in-out infinite;
  pointer-events: none;
 }
-@media (prefers-reduced-motion: no-preference) {
+@keyframes scan {
-  .App-logo {
+  0%, 100% {
-    animation: App-logo-spin infinite 20s linear;
+    transform: translateY(-100%);
    opacity: 0;
  }
  50% {
    transform: translateY(2000%);
    opacity: 0.5;
  }
 }
-.App-header {
+/* Card hover effects with refined depth */
-  background-color: #282c34;
+.intel-card {
-  min-height: 100vh;
+  background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(51, 65, 85, 0.9) 50%, rgba(30, 41, 59, 0.95) 100%);
-  display: flex;
+  border: 1.5px solid rgba(14, 165, 233, 0.3);
-  flex-direction: column;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.4),
    0 2px 6px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(14, 165, 233, 0.1),
    inset 0 -1px 0 rgba(14, 165, 233, 0.05);
 }
 .intel-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent,
    rgba(14, 165, 233, 0.08),
    transparent
  );
  transition: left 0.5s;
  pointer-events: none;
 }
 .intel-card:hover {
  border-color: rgba(14, 165, 233, 0.5);
  transform: translateY(-2px);
  box-shadow:
    0 8px 24px rgba(14, 165, 233, 0.15),
    0 4px 12px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(14, 165, 233, 0.2),
    0 0 30px rgba(14, 165, 233, 0.1);
 }
 .intel-card:hover::after {
  left: 100%;
 }
 /* Status badges with STRONG glow and contrast */
 .status-badge {
  position: relative;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 0.375rem 0.875rem;
  border-radius: 0.375rem;
  border: 2px solid;
  display: inline-flex;
  align-items: center;
-  justify-content: center;
+  gap: 0.5rem;
-  font-size: calc(10px + 2vmin);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  color: white;
 }
-.App-link {
+.status-badge::before {
-  color: #61dafb;
+  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: pulse-glow 2s ease-in-out infinite;
 }
-@keyframes App-logo-spin {
+.status-critical {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(239, 68, 68, 0.15) 100%);
  border-color: rgba(239, 68, 68, 0.6);
  color: #FCA5A5;
  text-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
 }
 .status-critical::before {
  background: #EF4444;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.6), 0 0 6px rgba(239, 68, 68, 0.4);
 }
 .status-high {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(245, 158, 11, 0.15) 100%);
  border-color: rgba(245, 158, 11, 0.6);
  color: #FCD34D;
  text-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
 }
 .status-high::before {
  background: #F59E0B;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.6), 0 0 6px rgba(245, 158, 11, 0.4);
 }
 .status-medium {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.2) 0%, rgba(14, 165, 233, 0.15) 100%);
  border-color: rgba(14, 165, 233, 0.6);
  color: #7DD3FC;
  text-shadow: 0 0 8px rgba(14, 165, 233, 0.4);
 }
 .status-medium::before {
  background: #0EA5E9;
  box-shadow: 0 0 12px rgba(14, 165, 233, 0.6), 0 0 6px rgba(14, 165, 233, 0.4);
 }
 .status-low {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(16, 185, 129, 0.15) 100%);
  border-color: rgba(16, 185, 129, 0.6);
  color: #6EE7B7;
  text-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
 }
 .status-low::before {
  background: #10B981;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.6), 0 0 6px rgba(16, 185, 129, 0.4);
 }
 /* Button styles with depth and glow */
 .intel-button {
  position: relative;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 0.875rem;
  padding: 0.625rem 1.25rem;
  border-radius: 0.375rem;
  transition: all 0.3s;
  border: 1px solid;
  overflow: hidden;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
 }
 .intel-button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  transform: translate(-50%, -50%);
  transition: width 0.5s, height 0.5s;
 }
 .intel-button:hover::before {
  width: 300px;
  height: 300px;
 }
 .intel-button-primary {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.15) 0%, rgba(14, 165, 233, 0.1) 100%);
  border-color: #0EA5E9;
  color: #38BDF8;
  text-shadow: 0 0 6px rgba(14, 165, 233, 0.2);
 }
 .intel-button-primary:hover {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.25) 0%, rgba(14, 165, 233, 0.2) 100%);
  box-shadow:
    0 0 20px rgba(14, 165, 233, 0.25),
    0 4px 12px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
 }
 .intel-button-danger {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.1) 100%);
  border-color: #EF4444;
  color: #F87171;
  text-shadow: 0 0 6px rgba(239, 68, 68, 0.2);
 }
 .intel-button-danger:hover {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.25) 0%, rgba(239, 68, 68, 0.2) 100%);
  box-shadow:
    0 0 20px rgba(239, 68, 68, 0.25),
    0 4px 12px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
 }
 .intel-button-success {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.1) 100%);
  border-color: #10B981;
  color: #34D399;
  text-shadow: 0 0 6px rgba(16, 185, 129, 0.2);
 }
 .intel-button-success:hover {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.25) 0%, rgba(16, 185, 129, 0.2) 100%);
  box-shadow:
    0 0 20px rgba(16, 185, 129, 0.25),
    0 4px 12px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
 }
 /* Input fields with better contrast */
 .intel-input {
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(14, 165, 233, 0.25);
  color: #F8FAFC;
  padding: 0.625rem 1rem;
  border-radius: 0.375rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.875rem;
  transition: all 0.3s;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.2),
    0 1px 0 rgba(255, 255, 255, 0.03);
 }
 .intel-input:focus {
  outline: none;
  border-color: #0EA5E9;
  box-shadow:
    0 0 0 2px rgba(14, 165, 233, 0.15),
    inset 0 2px 4px rgba(0, 0, 0, 0.15),
    0 4px 12px rgba(14, 165, 233, 0.1);
  background: rgba(30, 41, 59, 0.8);
 }
 .intel-input::placeholder {
  color: rgba(226, 232, 240, 0.35);
 }
 /* Stat cards with refined depth */
 .stat-card {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(51, 65, 85, 0.9) 100%);
  border: 1.5px solid rgba(14, 165, 233, 0.35);
  border-radius: 0.5rem;
  padding: 1rem;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.4),
    0 2px 6px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(14, 165, 233, 0.15);
  transition: all 0.3s ease;
 }
 .stat-card:hover {
  transform: translateY(-2px);
  border-color: rgba(14, 165, 233, 0.5);
  box-shadow:
    0 8px 20px rgba(14, 165, 233, 0.15),
    0 4px 12px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(14, 165, 233, 0.2),
    0 0 24px rgba(14, 165, 233, 0.1);
 }
 .stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #0EA5E9, transparent);
  opacity: 0.8;
  box-shadow: 0 0 8px rgba(14, 165, 233, 0.5);
 }
 /* Modal overlay with proper backdrop */
 .modal-overlay {
  background: rgba(10, 14, 39, 0.97);
  backdrop-filter: blur(12px);
 }
 /* Modal card enhancements */
 .intel-card.modal-card {
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.6),
    0 10px 30px rgba(0, 217, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
 }
 /* Scrollbar styling */
 ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
 }
 ::-webkit-scrollbar-track {
  background: #1E293B;
 }
 ::-webkit-scrollbar-thumb {
  background: rgba(14, 165, 233, 0.3);
  border-radius: 4px;
 }
 ::-webkit-scrollbar-thumb:hover {
  background: rgba(14, 165, 233, 0.5);
 }
 /* Fade in animation */
 .fade-in {
  animation: fade-in 0.5s ease-out;
 }
@keyframes fade-in {
  from {
-    transform: rotate(0deg);
+    opacity: 0;
    transform: translateY(10px);
  }
  to {
-    transform: rotate(360deg);
+    opacity: 1;
    transform: translateY(0);
  }
 }
 /* Pulse glow animation */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 5px currentColor;
  }
  50% {
    box-shadow: 0 0 15px currentColor;
  }
 }
 /* Data table styling */
 .data-row {
  border-bottom: 1px solid rgba(0, 217, 255, 0.1);
  transition: all 0.2s;
 }
 .data-row:hover {
  background: rgba(0, 217, 255, 0.06);
  border-bottom-color: rgba(0, 217, 255, 0.3);
  box-shadow: 0 2px 8px rgba(0, 217, 255, 0.1);
 }
 /* Vendor entry cards - high contrast and depth */
 .vendor-card {
  background: linear-gradient(135deg, rgba(19, 25, 55, 0.9) 0%, rgba(30, 39, 73, 0.8) 100%);
  border: 1px solid rgba(0, 217, 255, 0.25);
  border-radius: 0.5rem;
  padding: 1rem;
  transition: all 0.3s ease;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
 }
 .vendor-card:hover {
  background: linear-gradient(135deg, rgba(19, 25, 55, 0.95) 0%, rgba(30, 39, 73, 0.9) 100%);
  border-color: rgba(0, 217, 255, 0.4);
  box-shadow:
    0 4px 16px rgba(0, 217, 255, 0.15),
    0 2px 8px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translateY(-2px);
 }
 /* Document list items with depth */
 .document-item {
  background: linear-gradient(135deg, rgba(10, 14, 39, 0.9) 0%, rgba(19, 25, 55, 0.8) 100%);
  border: 1px solid rgba(0, 217, 255, 0.15);
  border-radius: 0.375rem;
  padding: 0.75rem;
  transition: all 0.3s ease;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
 }
 .document-item:hover {
  background: linear-gradient(135deg, rgba(10, 14, 39, 0.95) 0%, rgba(30, 39, 73, 0.9) 100%);
  border-color: rgba(0, 217, 255, 0.3);
  box-shadow:
    0 4px 12px rgba(0, 217, 255, 0.12),
    0 2px 6px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transform: translateY(-1px);
 }
 /* JIRA ticket items with proper contrast */
 .jira-ticket-item {
  background: linear-gradient(135deg, rgba(19, 25, 55, 0.85) 0%, rgba(30, 39, 73, 0.75) 100%);
  border: 1px solid rgba(255, 184, 0, 0.2);
  border-radius: 0.375rem;
  padding: 0.75rem;
  transition: all 0.3s ease;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
 }
 .jira-ticket-item:hover {
  background: linear-gradient(135deg, rgba(19, 25, 55, 0.95) 0%, rgba(30, 39, 73, 0.85) 100%);
  border-color: rgba(255, 184, 0, 0.35);
  box-shadow:
    0 4px 12px rgba(255, 184, 0, 0.15),
    0 2px 6px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
 }
 /* CVE Header card with depth */
 .cve-header {
  background: linear-gradient(135deg, rgba(19, 25, 55, 0.95) 0%, rgba(30, 39, 73, 0.9) 100%);
  transition: all 0.3s ease;
 }
 .cve-header:hover {
  background: linear-gradient(135deg, rgba(30, 39, 73, 0.95) 0%, rgba(42, 52, 88, 0.9) 100%);
 }
 /* Loading spinner */
 .loading-spinner {
  border: 2px solid rgba(14, 165, 233, 0.1);
  border-top-color: #0EA5E9;
  border-radius: 50%;
  animation: spin 1s linear infinite;
 }
@keyframes spin {
  to { transform: rotate(360deg); }
 }
 /* Tooltip with enhanced styling */
 .tooltip {
  position: relative;
 }
 .tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.5rem 0.75rem;
  background: linear-gradient(135deg, #334155 0%, #475569 100%);
  border: 1px solid rgba(14, 165, 233, 0.3);
  border-radius: 0.25rem;
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  margin-bottom: 0.5rem;
  font-family: 'JetBrains Mono', monospace;
  color: #F8FAFC;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.4),
    0 0 16px rgba(14, 165, 233, 0.15);
 }
 .tooltip:hover::after {
  opacity: 1;
 }
 /* Enhanced heading glow */
 h1.text-intel-accent,
 h2.text-intel-accent,
 h3.text-intel-accent {
  text-shadow:
    0 0 16px rgba(14, 165, 233, 0.3),
    0 0 32px rgba(14, 165, 233, 0.15);
 }
 /* Enhanced border glow for featured cards */
 .border-intel-accent {
  box-shadow: 0 0 12px rgba(14, 165, 233, 0.12);
 }
 .border-intel-warning {
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.12);
 }
 .border-intel-danger {
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.12);
 }
 /* Quick lookup section enhancement */
 .quick-lookup-card {
  background: linear-gradient(135deg, rgba(19, 25, 55, 0.95) 0%, rgba(30, 39, 73, 0.9) 100%);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 40px rgba(0, 217, 255, 0.1);
 }
 /* Vendor Cards - nested depth */
 .vendor-card {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
  border: 1.5px solid rgba(14, 165, 233, 0.25);
  border-radius: 0.5rem;
  padding: 1rem;
  box-shadow:
    0 3px 10px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(14, 165, 233, 0.08);
  transition: all 0.3s ease;
 }
 .vendor-card:hover {
  border-color: rgba(14, 165, 233, 0.4);
  box-shadow:
    0 6px 16px rgba(14, 165, 233, 0.12),
    0 3px 10px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(14, 165, 233, 0.15);
  transform: translateX(4px);
 }
 /* Document items - recessed appearance */
 .document-item {
  background: linear-gradient(135deg, rgba(15, 23, 42, 1) 0%, rgba(20, 28, 48, 0.98) 100%);
  border: 1px solid rgba(14, 165, 233, 0.2);
  border-radius: 0.375rem;
  padding: 0.75rem;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.3),
    0 1px 2px rgba(0, 0, 0, 0.25);
  transition: all 0.2s ease;
 }
 .document-item:hover {
  border-color: rgba(14, 165, 233, 0.35);
  background: linear-gradient(135deg, rgba(20, 28, 48, 1) 0%, rgba(30, 41, 59, 0.95) 100%);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.25),
    0 2px 8px rgba(14, 165, 233, 0.1);
 }
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
--- a/frontend/src/components/LoginForm.js
+++ b/frontend/src/components/LoginForm.js
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Loader, AlertCircle, Lock, User } from 'lucide-react';
+import { AlertCircle, Lock, User } from 'lucide-react';
 import { useAuth } from '../contexts/AuthContext';
 export default function LoginForm() {
@@ -24,57 +24,60 @@ export default function LoginForm() {
    };
    return (
-        <div className="min-h-screen bg-gray-100 flex items-center justify-center p-4">
+        <div className="min-h-screen bg-intel-darkest grid-bg flex items-center justify-center p-4 relative overflow-hidden fade-in">
-            <div className="bg-white rounded-lg shadow-xl max-w-md w-full p-8">
+            {/* Scanning line effect */}
            <div className="scan-line"></div>
            <div className="intel-card rounded-lg shadow-2xl max-w-md w-full p-8 border-intel-accent relative z-10">
                <div className="text-center mb-8">
-                    <div className="w-16 h-16 bg-[#0476D9] rounded-full flex items-center justify-center mx-auto mb-4">
+                    <div className="w-16 h-16 bg-gradient-to-br from-intel-accent to-intel-accent-dim rounded-full flex items-center justify-center mx-auto mb-4 shadow-lg" style={{boxShadow: '0 0 30px rgba(0, 217, 255, 0.4)'}}>
-                        <Lock className="w-8 h-8 text-white" />
+                        <Lock className="w-8 h-8 text-intel-darkest" />
                    </div>
-                    <h1 className="text-2xl font-bold text-gray-900">CVE Dashboard</h1>
+                    <h1 className="text-3xl font-bold text-intel-accent font-mono tracking-tight">CVE INTEL</h1>
-                    <p className="text-gray-600 mt-2">Sign in to access the dashboard</p>
+                    <p className="text-gray-400 mt-2 font-sans text-sm">Threat Intelligence Access Portal</p>
                </div>
                {error && (
-                    <div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg flex items-start gap-3">
+                    <div className="mb-6 p-4 bg-intel-danger/10 border border-intel-danger/30 rounded flex items-start gap-3">
-                        <AlertCircle className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" />
+                        <AlertCircle className="w-5 h-5 text-intel-danger flex-shrink-0 mt-0.5" />
-                        <p className="text-sm text-red-700">{error}</p>
+                        <p className="text-sm text-gray-300">{error}</p>
                    </div>
                )}
                <form onSubmit={handleSubmit} className="space-y-6">
                    <div>
-                        <label htmlFor="username" className="block text-sm font-medium text-gray-700 mb-2">
+                        <label htmlFor="username" className="block text-xs font-medium text-gray-400 mb-2 uppercase tracking-wider">
                            Username
                        </label>
                        <div className="relative">
-                            <User className="w-5 h-5 text-gray-400 absolute left-3 top-1/2 transform -translate-y-1/2" />
+                            <User className="w-5 h-5 text-gray-500 absolute left-3 top-1/2 transform -translate-y-1/2" />
                            <input
                                id="username"
                                type="text"
                                required
                                value={username}
                                onChange={(e) => setUsername(e.target.value)}
-                                className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#0476D9] focus:border-transparent"
+                                className="intel-input w-full pl-10"
-                                placeholder="Enter your username"
+                                placeholder="Enter username"
                                disabled={loading}
                            />
                        </div>
                    </div>
                    <div>
-                        <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-2">
+                        <label htmlFor="password" className="block text-xs font-medium text-gray-400 mb-2 uppercase tracking-wider">
                            Password
                        </label>
                        <div className="relative">
-                            <Lock className="w-5 h-5 text-gray-400 absolute left-3 top-1/2 transform -translate-y-1/2" />
+                            <Lock className="w-5 h-5 text-gray-500 absolute left-3 top-1/2 transform -translate-y-1/2" />
                            <input
                                id="password"
                                type="password"
                                required
                                value={password}
                                onChange={(e) => setPassword(e.target.value)}
-                                className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#0476D9] focus:border-transparent"
+                                className="intel-input w-full pl-10"
-                                placeholder="Enter your password"
+                                placeholder="Enter password"
                                disabled={loading}
                            />
                        </div>
@@ -83,22 +86,22 @@ export default function LoginForm() {
                    <button
                        type="submit"
                        disabled={loading}
-                        className="w-full py-3 bg-[#0476D9] text-white rounded-lg hover:bg-[#0360B8] transition-colors font-medium shadow-md disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+                        className="w-full intel-button intel-button-primary py-3 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
                    >
                        {loading ? (
                            <>
-                                <Loader className="w-5 h-5 animate-spin" />
+                                <div className="loading-spinner w-5 h-5"></div>
-                                Signing in...
+                                <span className="font-mono uppercase tracking-wider">Authenticating...</span>
                            </>
                        ) : (
-                            'Sign In'
+                            <span className="font-mono uppercase tracking-wider">Access System</span>
                        )}
                    </button>
                </form>
-                <div className="mt-6 pt-6 border-t border-gray-200">
+                <div className="mt-6 pt-6 border-t border-intel-grid">
-                    <p className="text-sm text-gray-500 text-center">
+                    <p className="text-sm text-gray-500 text-center font-mono">
-                        Default admin credentials: admin / admin123
+                        Default: <span className="text-intel-accent">admin</span> / <span className="text-intel-accent">admin123</span>
                    </p>
                </div>
            </div>
--- a/frontend/src/components/WeeklyReportModal.js
+++ b/frontend/src/components/WeeklyReportModal.js
@@ -0,0 +1,291 @@
 import React, { useState, useEffect } from 'react';
 import { X, Loader, AlertCircle, CheckCircle, Upload as UploadIcon, Download, Star } from 'lucide-react';
 const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
 export default function WeeklyReportModal({ onClose }) {
  const [phase, setPhase] = useState('idle'); // idle, uploading, processing, success, error
  const [selectedFile, setSelectedFile] = useState(null);
  const [uploadProgress, setUploadProgress] = useState(0);
  const [result, setResult] = useState(null);
  const [existingReports, setExistingReports] = useState([]);
  const [error, setError] = useState('');
  // Fetch existing reports on mount
  useEffect(() => {
    fetchExistingReports();
  }, []);
  const fetchExistingReports = async () => {
    try {
      const response = await fetch(`${API_BASE}/weekly-reports`, { credentials: 'include' });
      if (!response.ok) throw new Error('Failed to fetch reports');
      const data = await response.json();
      setExistingReports(data);
    } catch (err) {
      console.error('Error fetching reports:', err);
    }
  };
  const handleFileSelect = (e) => {
    const file = e.target.files[0];
    if (file) {
      if (!file.name.endsWith('.xlsx')) {
        setError('Please select an Excel file (.xlsx)');
        return;
      }
      setSelectedFile(file);
      setError('');
    }
  };
  const handleUpload = async () => {
    if (!selectedFile) return;
    setPhase('uploading');
    setUploadProgress(0);
    const formData = new FormData();
    formData.append('file', selectedFile);
    try {
      setUploadProgress(50); // Simulated progress
      setPhase('processing');
      const response = await fetch(`${API_BASE}/weekly-reports/upload`, {
        method: 'POST',
        body: formData,
        credentials: 'include'
      });
      if (!response.ok) {
        const errorData = await response.json();
        throw new Error(errorData.error || 'Upload failed');
      }
      const data = await response.json();
      setResult(data);
      setPhase('success');
      // Refresh the list of existing reports
      await fetchExistingReports();
    } catch (err) {
      setError(err.message);
      setPhase('error');
    }
  };
  const handleDownload = async (id, type) => {
    try {
      const response = await fetch(`${API_BASE}/weekly-reports/${id}/download/${type}`, {
        credentials: 'include'
      });
      if (!response.ok) throw new Error('Download failed');
      const blob = await response.blob();
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = `vulnerability_report_${type}.xlsx`;
      document.body.appendChild(a);
      a.click();
      window.URL.revokeObjectURL(url);
      document.body.removeChild(a);
    } catch (err) {
      console.error('Error downloading file:', err);
      setError(`Failed to download ${type} file`);
    }
  };
  const resetForm = () => {
    setPhase('idle');
    setSelectedFile(null);
    setUploadProgress(0);
    setResult(null);
    setError('');
  };
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        {/* Header */}
        <div className="modal-header">
          <h2 className="modal-title">Weekly Vulnerability Report</h2>
          <button onClick={onClose} className="modal-close">
            <X className="w-5 h-5" />
          </button>
        </div>
        {/* Body */}
        <div className="modal-body">
          {/* Idle Phase - File Selection */}
          {phase === 'idle' && (
            <div className="space-y-6">
              <div>
                <label className="block text-sm font-medium mb-2" style={{ color: '#94A3B8' }}>
                  Upload Excel File (.xlsx)
                </label>
                <input
                  type="file"
                  accept=".xlsx"
                  onChange={handleFileSelect}
                  className="intel-input w-full"
                />
                {selectedFile && (
                  <p className="mt-2 text-sm" style={{ color: '#10B981' }}>
                    Selected: {selectedFile.name}
                  </p>
                )}
              </div>
              <button
                onClick={handleUpload}
                disabled={!selectedFile}
                className={`intel-button w-full ${selectedFile ? 'intel-button-success' : 'opacity-50 cursor-not-allowed'}`}
              >
                <UploadIcon className="w-4 h-4 mr-2" />
                Upload & Process
              </button>
              {error && (
                <div className="flex items-start gap-2 p-3 rounded" style={{ background: 'rgba(239, 68, 68, 0.1)', border: '1px solid #EF4444' }}>
                  <AlertCircle className="w-5 h-5 flex-shrink-0" style={{ color: '#EF4444' }} />
                  <p style={{ color: '#FCA5A5' }}>{error}</p>
                </div>
              )}
            </div>
          )}
          {/* Uploading Phase */}
          {phase === 'uploading' && (
            <div className="text-center py-8">
              <Loader className="w-12 h-12 animate-spin mx-auto mb-4" style={{ color: '#0EA5E9' }} />
              <p style={{ color: '#94A3B8' }}>Uploading file...</p>
              <div className="w-full bg-gray-700 rounded-full h-2 mt-4">
                <div
                  className="h-2 rounded-full transition-all"
                  style={{ width: `${uploadProgress}%`, background: '#0EA5E9' }}
                />
              </div>
            </div>
          )}
          {/* Processing Phase */}
          {phase === 'processing' && (
            <div className="text-center py-8">
              <Loader className="w-12 h-12 animate-spin mx-auto mb-4" style={{ color: '#0EA5E9' }} />
              <p style={{ color: '#94A3B8' }}>Processing vulnerability report...</p>
              <p className="text-sm mt-2" style={{ color: '#64748B' }}>Splitting CVE IDs into separate rows</p>
            </div>
          )}
          {/* Success Phase */}
          {phase === 'success' && result && (
            <div className="space-y-4">
              <div className="flex items-center gap-2 p-4 rounded" style={{ background: 'rgba(16, 185, 129, 0.1)', border: '1px solid #10B981' }}>
                <CheckCircle className="w-6 h-6" style={{ color: '#10B981' }} />
                <div>
                  <p className="font-medium" style={{ color: '#34D399' }}>Upload Successful!</p>
                  <p className="text-sm mt-1" style={{ color: '#94A3B8' }}>
                    Original: {result.original_rows} rows → Processed: {result.processed_rows} rows
                    <span className="ml-2" style={{ color: '#10B981' }}>
                      (+{result.processed_rows - result.original_rows} rows from splitting CVEs)
                    </span>
                  </p>
                </div>
              </div>
              <div className="flex gap-3">
                <button
                  onClick={() => handleDownload(result.id, 'original')}
                  className="intel-button flex-1"
                >
                  <Download className="w-4 h-4 mr-2" />
                  Download Original
                </button>
                <button
                  onClick={() => handleDownload(result.id, 'processed')}
                  className="intel-button intel-button-success flex-1"
                >
                  <Download className="w-4 h-4 mr-2" />
                  Download Processed
                </button>
              </div>
              <button onClick={resetForm} className="intel-button w-full">
                Upload Another Report
              </button>
            </div>
          )}
          {/* Error Phase */}
          {phase === 'error' && (
            <div className="space-y-4">
              <div className="flex items-start gap-2 p-4 rounded" style={{ background: 'rgba(239, 68, 68, 0.1)', border: '1px solid #EF4444' }}>
                <AlertCircle className="w-6 h-6 flex-shrink-0" style={{ color: '#EF4444' }} />
                <div>
                  <p className="font-medium" style={{ color: '#FCA5A5' }}>Upload Failed</p>
                  <p className="text-sm mt-1" style={{ color: '#94A3B8' }}>{error}</p>
                </div>
              </div>
              <button onClick={resetForm} className="intel-button w-full">
                Try Again
              </button>
            </div>
          )}
          {/* Existing Reports Section */}
          {(phase === 'idle' || phase === 'success') && existingReports.length > 0 && (
            <div className="mt-8">
              <h3 className="text-lg font-medium mb-4" style={{ color: '#94A3B8' }}>
                Previous Reports
              </h3>
              <div className="space-y-3">
                {existingReports.map((report) => (
                  <div
                    key={report.id}
                    className="intel-card p-4"
                  >
                    <div className="flex items-start justify-between">
                      <div className="flex-1">
                        <div className="flex items-center gap-2 mb-2">
                          {report.is_current && (
                            <Star className="w-4 h-4 fill-current" style={{ color: '#F59E0B' }} />
                          )}
                          <p className="font-medium" style={{ color: report.is_current ? '#F59E0B' : '#94A3B8' }}>
                            {report.week_label}
                          </p>
                        </div>
                        <p className="text-sm" style={{ color: '#64748B' }}>
                          {new Date(report.upload_date).toLocaleDateString()} •
                          {report.row_count_original} → {report.row_count_processed} rows
                        </p>
                      </div>
                      <div className="flex gap-2">
                        <button
                          onClick={() => handleDownload(report.id, 'original')}
                          className="intel-button intel-button-small"
                          title="Download Original"
                        >
                          <Download className="w-3 h-3" />
                        </button>
                        <button
                          onClick={() => handleDownload(report.id, 'processed')}
                          className="intel-button intel-button-success intel-button-small"
                          title="Download Processed"
                        >
                          <Download className="w-3 h-3" />
                        </button>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
 }
Author	SHA1	Message	Date
jramos	6fda7de7a3	Merge branch 'feature/weekly-report-upload'	2026-02-13 09:27:57 -07:00
jramos	0d67a99c7e	Add weekly vulnerability report upload feature Implements a comprehensive system for uploading and processing weekly vulnerability reports that automatically splits multiple CVE IDs in a single cell into separate rows for easier filtering and analysis. Backend Changes: - Add weekly_reports table with migration - Create Excel processor helper using Python child_process - Implement API routes for upload, list, download, delete - Mount routes in server.js after multer initialization - Move split_cve_report.py to backend/scripts/ Frontend Changes: - Add WeeklyReportModal component with phase-based UI - Add "Weekly Report" button next to NVD Sync - Integrate modal into App.js with state management - Display existing reports with current report indicator - Download buttons for original and processed files Features: - Upload .xlsx files (editor/admin only) - Automatic CVE ID splitting via Python script - Store metadata in database + files on filesystem - Auto-archive previous reports (mark one as current) - Download both original and processed versions - Audit logging for all operations - Security: file validation, auth checks, path sanitization Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>	2026-02-11 16:41:39 -07:00
jramos	bf3d01becf	Add comprehensive design system documentation Documented complete design system including color palette, layout structure, component specifications, typography, visual effects, and accessibility standards. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>	2026-02-10 15:59:05 -07:00
jramos	9384ded04f	Toned down color scheme. Added modernization	2026-02-10 14:43:51 -07:00
jramos	0c9c3b5514	added panels	2026-02-10 12:09:38 -07:00
jramos	4a50cd100b	drastic changes	2026-02-10 10:12:56 -07:00
jramos	c22a3a70ab	Add STRONG depth and contrast to intelligence dashboard VISUAL IMPROVEMENTS: - Increased border thickness from 1px to 2px on all cards for visibility - Enhanced box shadows with multiple layers for dramatic depth - Made stat cards much more prominent with stronger borders STATUS BADGES: - Increased text brightness (Critical: #FF6B94, High: #FFD966, etc.) - Added text-shadow glow effects for better contrast - Made borders thicker (2px) with higher opacity (0.8) - Enhanced background gradients (0.3/0.2 opacity) - Larger pulse dots (8px) with stronger glow CARD DEPTH: - intel-card: 2px borders, inset top/bottom glow, dramatic shadows - stat-card: 2px cyan borders, 3px glowing top bar, strong shadows - vendor-card: 2px borders, nested appearance with lift on hover - document-item: Recessed look with inset shadows SHADOWS & EFFECTS: - Base shadows: 0 8px 16px rgba(0,0,0,0.6) - Hover glow: 0 0 40px rgba(0,217,255,0.2) - Inset highlights for dimensional appearance - Transform on hover for lift effect All changes maintain the cyber-intelligence aesthetic while making the depth and hierarchy dramatically more visible. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>	2026-02-10 10:03:07 -07:00
jramos	626d0cac3a	Changed color and contrast gradients	2026-02-10 09:54:42 -07:00
jramos	ba4d16396c	Transform CVE Dashboard to tactical intelligence platform aesthetic Implemented a sophisticated cyber-intelligence visual design with: DESIGN DIRECTION: - "Tactical Intelligence Command Center" aesthetic - Typography: JetBrains Mono for data/code + Outfit for UI labels - Color Palette: Deep navy (#0A0E27) base with electric cyan (#00D9FF) accents - Visual Language: Grid patterns, glowing borders, scanning animations - Motion: Smooth fade-ins, pulse effects, hover transformations FRONTEND CHANGES: - Redesigned App.css with comprehensive intelligence dashboard theme - Custom CSS classes: intel-card, intel-button, intel-input, status-badge - Added scanning line animations and pulse glow effects - Implemented grid background pattern and scrollbar styling COMPONENT UPDATES: - App.js: Transformed all UI sections to intel theme - Header with stats dashboard - Search/filter cards - CVE list with expandable cards - Document management - Quick check interface - JIRA ticket tracking - LoginForm.js: Redesigned authentication portal - All modals: Add/Edit CVE, Add/Edit JIRA tickets UI FEATURES: - Monospace fonts for technical data - Glowing accent borders on interactive elements - Status badges with animated pulse indicators - Data rows with hover states - Responsive grid layouts - Modal overlays with backdrop blur TECHNICAL: - Tailwind CSS extended with custom intel theme - Google Fonts: JetBrains Mono & Outfit - Maintained all existing functionality - Build tested successfully - No breaking changes to business logic Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>	2026-02-10 09:34:22 -07:00
jramos	83d944fa70	Added JIRA ticket tracking feature - New jira_tickets table (migration script included) - CRUD API endpoints for tickets with validation and audit logging - Dashboard section showing all open vendor tickets - JIRA tickets section within CVE vendor cards - Tickets linked to CVE + vendor with status tracking (Open/In Progress/Closed) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>	2026-02-09 11:56:34 -07:00