Spaces:
Sleeping
Sleeping
File size: 2,763 Bytes
743409d | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | import { Download, FileText } from 'lucide-react';
import { Button } from './ui/button';
import { AnalysisData } from '../types/analysis';
interface ExportReportProps {
data: AnalysisData;
}
export function ExportReport({ data }: ExportReportProps) {
const generateReport = () => {
const reportContent = `
FINTECH DARK PATTERN DETECTION REPORT
Generated: ${new Date(data.timestamp).toLocaleString()}
=======================================================
EXECUTIVE SUMMARY
-----------------
Trust Score: ${data.overallScore}/100
Risk Level: ${data.riskLevel.toUpperCase()}
Dark Patterns Detected: ${data.darkPatterns.length}
CFPB Compliance: ${data.complianceReport.cfpbAlignment}%
DETECTED DARK PATTERNS
-----------------------
${data.darkPatterns.map((pattern, index) => `
${index + 1}. ${pattern.type} [${pattern.severity.toUpperCase()}]
Description: ${pattern.description}
CFPB Violation: ${pattern.cfpbViolation}
Recommendation: ${pattern.recommendation}
Confidence: ${pattern.confidence}%
Location: (${pattern.location.x}%, ${pattern.location.y}%)
`).join('\n')}
CFPB COMPLIANCE ISSUES
----------------------
${data.complianceReport.issues.map((issue, index) => `${index + 1}. ${issue}`).join('\n')}
RECOMMENDATIONS
---------------
${data.complianceReport.recommendations.map((rec, index) => `${index + 1}. ${rec}`).join('\n')}
=======================================================
This report was generated by the Fintech Dark Pattern Detector
using AI-powered XAI analysis and CFPB compliance heuristics.
`.trim();
// Create and download the report
const blob = new Blob([reportContent], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `dark-pattern-report-${Date.now()}.txt`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
};
const generateJSON = () => {
const jsonContent = JSON.stringify(data, null, 2);
const blob = new Blob([jsonContent], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `dark-pattern-report-${Date.now()}.json`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
};
return (
<div className="flex gap-3">
<Button onClick={generateReport} variant="outline" size="sm">
<FileText className="w-4 h-4 mr-2" />
Export Report (TXT)
</Button>
<Button onClick={generateJSON} variant="outline" size="sm">
<Download className="w-4 h-4 mr-2" />
Export Data (JSON)
</Button>
</div>
);
}
|