import React, { useState, useCallback } from 'react'; import { CheckCircleIcon, XCircleIcon, EyeSlashIcon, ArrowDownTrayIcon, FunnelIcon } from '@heroicons/react/24/outline'; import { apiClient } from '../../../utils/api'; import { toast } from 'react-toastify'; const IssueManagement = ({ issues = [], onIssuesUpdate, auditId }) => { const [selectedIssues, setSelectedIssues] = useState([]); const [isLoading, setIsLoading] = useState(false); const [filterSeverity, setFilterSeverity] = useState('all'); const [filterType, setFilterType] = useState('all'); const [showIgnored, setShowIgnored] = useState(false); const [sortBy, setSortBy] = useState('priority'); // Handle issue selection const handleSelectIssue = (issueId) => { setSelectedIssues(prev => prev.includes(issueId) ? prev.filter(id => id !== issueId) : [...prev, issueId] ); }; // Select all issues const handleSelectAll = () => { if (selectedIssues.length === getFilteredIssues().length) { setSelectedIssues([]); } else { setSelectedIssues(getFilteredIssues().map(issue => issue.id)); } }; // Ignore selected issues const handleIgnoreIssues = async (reason = '') => { if (selectedIssues.length === 0) { toast.warning('Please select issues to ignore'); return; } setIsLoading(true); try { const response = await apiClient.post('/audit/issues/ignore', { issue_ids: selectedIssues, ignore_reason: reason, audit_id: auditId }); if (response.data.success) { toast.success(`${response.data.ignored_count} issues marked as ignored`); setSelectedIssues([]); if (onIssuesUpdate) { onIssuesUpdate(); } } } catch (error) { toast.error('Failed to ignore issues: ' + error.message); } finally { setIsLoading(false); } }; // Restore ignored issues const handleRestoreIssues = async () => { if (selectedIssues.length === 0) { toast.warning('Please select issues to restore'); return; } setIsLoading(true); try { const response = await apiClient.post('/audit/issues/restore', { issue_ids: selectedIssues, audit_id: auditId }); if (response.data.success) { toast.success(`${response.data.restored_count} issues restored`); setSelectedIssues([]); if (onIssuesUpdate) { onIssuesUpdate(); } } } catch (error) { toast.error('Failed to restore issues: ' + error.message); } finally { setIsLoading(false); } }; // Export audit report const handleExport = async (format = 'csv') => { setIsLoading(true); try { const response = await apiClient.get('/audit/export', { params: { format, audit_id: auditId }, responseType: format === 'csv' ? 'blob' : 'json' }); if (format === 'csv') { // Download CSV file const url = window.URL.createObjectURL(new Blob([response.data])); const link = document.createElement('a'); link.href = url; link.setAttribute('download', `audit-report-${new Date().toISOString().split('T')[0]}.csv`); document.body.appendChild(link); link.click(); link.remove(); toast.success('CSV report downloaded'); } else if (format === 'pdf') { // Open PDF URL in new tab if (response.data.pdf_url) { window.open(response.data.pdf_url, '_blank'); toast.success('PDF report is being generated'); } } } catch (error) { toast.error('Failed to export report: ' + error.message); } finally { setIsLoading(false); } }; // Filter and sort issues const getFilteredIssues = useCallback(() => { let filtered = [...issues]; // Filter by ignored status if (!showIgnored) { filtered = filtered.filter(issue => !issue.is_ignored); } // Filter by severity if (filterSeverity !== 'all') { filtered = filtered.filter(issue => issue.severity === filterSeverity); } // Filter by type if (filterType !== 'all') { filtered = filtered.filter(issue => issue.type === filterType); } // Sort issues filtered.sort((a, b) => { switch (sortBy) { case 'priority': return (b.priority_score || 0) - (a.priority_score || 0); case 'severity': const severityOrder = { critical: 5, high: 4, medium: 3, low: 2, warning: 1, notice: 0 }; return severityOrder[b.severity] - severityOrder[a.severity]; case 'type': return a.type.localeCompare(b.type); default: return 0; } }); return filtered; }, [issues, showIgnored, filterSeverity, filterType, sortBy]); // Get unique issue types for filter const issueTypes = [...new Set(issues.map(issue => issue.type))]; // Get severity badge color const getSeverityColor = (severity) => { const colors = { critical: 'pr:bg-red-100 pr:text-red-800', high: 'pr:bg-orange-100 pr:text-orange-800', medium: 'pr:bg-yellow-100 pr:text-yellow-800', low: 'pr:bg-blue-100 pr:text-blue-800', warning: 'pr:bg-gray-100 pr:text-gray-800', notice: 'pr:bg-green-100 pr:text-green-800' }; return colors[severity] || 'pr:bg-gray-100 pr:text-gray-800'; }; const filteredIssues = getFilteredIssues(); return (
{/* Toolbar */}
{/* Filters */}
{/* Actions */}
{selectedIssues.length > 0 && ( <> {selectedIssues.length} selected {!showIgnored && ( )} {showIgnored && ( )} )}
{/* Issues List */}
{filteredIssues.map((issue) => ( ))}
0} onChange={handleSelectAll} className="pr:rounded pr:border-gray-300" /> Severity Issue Type Priority Status Actions
handleSelectIssue(issue.id)} className="pr:rounded pr:border-gray-300" /> {issue.severity}
{issue.title}
{issue.description}
{issue.affected_url && (
URL: {issue.affected_url}
)} 		{issue.type.replace(/_/g, ' ')}
{issue.priority_score || 0}
{issue.is_ignored ? ( Ignored ) : issue.is_fixed ? ( Fixed ) : ( Active )} {issue.fix_available && !issue.is_fixed && !issue.is_ignored && ( )} {issue.how_to_fix && ( )}
{filteredIssues.length === 0 && (
No issues found matching your filters
)}
); }; export default IssueManagement;