Spaces:
Sleeping
Sleeping
File size: 4,407 Bytes
0e13326 | 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 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 | import { InterpretationReport } from '@/lib/types'
import BenchmarkTable from './BenchmarkTable'
interface ReportViewProps {
report: InterpretationReport
}
const strengthStyles: Record<string, string> = {
strong: 'bg-green-100 text-green-800',
moderate: 'bg-yellow-100 text-yellow-800',
weak: 'bg-red-100 text-red-800',
}
const strengthLabels: Record<string, string> = {
strong: 'Strong',
moderate: 'Moderate',
weak: 'Weak',
}
export default function ReportView({ report }: ReportViewProps) {
const today = new Date().toLocaleDateString('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric',
})
return (
<div className="space-y-8">
{/* Header */}
<div className="no-break border-b border-gray-200 pb-6">
<h1 className="text-3xl font-bold text-gray-900">DevOps Performance Report</h1>
<p className="mt-1 text-sm text-gray-500">{today}</p>
</div>
{/* Delivery Profile */}
<section className="no-break">
<h2 className="text-xl font-semibold text-gray-800 mb-3">Delivery Profile</h2>
<p className="text-gray-700 leading-relaxed">{report.deliveryProfile}</p>
</section>
{/* Benchmark Alignment */}
<section className="no-break">
<h2 className="text-xl font-semibold text-gray-800 mb-3">Benchmark Alignment</h2>
<BenchmarkTable alignment={report.benchmarkAlignment} />
</section>
{/* Leadership Summary */}
<section className="no-break">
<h2 className="text-xl font-semibold text-gray-800 mb-3">Leadership Summary</h2>
<div className="rounded-lg border border-gray-200 bg-gray-50 p-5 space-y-4">
<div className="flex flex-wrap gap-4">
<div className="flex items-center gap-2">
<span className="text-sm font-medium text-gray-600">Delivery Speed:</span>
<span
className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold ${strengthStyles[report.leadershipSummary.deliverySpeed] ?? ''}`}
>
{strengthLabels[report.leadershipSummary.deliverySpeed] ?? report.leadershipSummary.deliverySpeed}
</span>
</div>
<div className="flex items-center gap-2">
<span className="text-sm font-medium text-gray-600">Reliability:</span>
<span
className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold ${strengthStyles[report.leadershipSummary.reliability] ?? ''}`}
>
{strengthLabels[report.leadershipSummary.reliability] ?? report.leadershipSummary.reliability}
</span>
</div>
</div>
<div>
<span className="text-sm font-medium text-gray-600">Focus Area: </span>
<span className="text-sm text-gray-800">{report.leadershipSummary.focusArea}</span>
</div>
</div>
</section>
{/* Likely Bottlenecks */}
<section className="no-break">
<h2 className="text-xl font-semibold text-gray-800 mb-3">Likely Bottlenecks</h2>
<ul className="space-y-2">
{report.likelyBottlenecks.map((bottleneck) => (
<li key={bottleneck} className="flex items-start gap-2 text-gray-700">
<span className="mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-indigo-500" />
{bottleneck}
</li>
))}
</ul>
</section>
{/* Improvements */}
<section className="no-break">
<h2 className="text-xl font-semibold text-gray-800 mb-3">Recommended Improvements</h2>
<ol className="space-y-4">
{[...report.improvements]
.sort((a, b) => a.priority - b.priority)
.map((improvement) => (
<li key={improvement.priority} className="flex gap-4">
<span className="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full bg-indigo-100 text-sm font-bold text-indigo-700">
{improvement.priority}
</span>
<div>
<p className="font-semibold text-gray-900">{improvement.action}</p>
<p className="mt-0.5 text-sm text-gray-600">{improvement.rationale}</p>
</div>
</li>
))}
</ol>
</section>
</div>
)
}
|