41 lines
2.0 KiB
TypeScript
41 lines
2.0 KiB
TypeScript
'use client';
|
||
|
||
interface Rating { operator: string; totalAircraft: number; activeAircraft: number; maintenanceAircraft: number; rating: number; category: 'best' | 'average' | 'worst'; }
|
||
interface Props { ratings: Rating[]; }
|
||
|
||
const catConfig = {
|
||
best: { title: '🏆 Лучшие по КЛГ', bg: 'bg-green-50', border: 'border-green-200', ratingColor: 'text-green-600' },
|
||
average: { title: '📊 Средние', bg: 'bg-yellow-50', border: 'border-yellow-200', ratingColor: 'text-yellow-600' },
|
||
worst: { title: '⚠️ Требуют внимания', bg: 'bg-red-50', border: 'border-red-200', ratingColor: 'text-red-600' },
|
||
};
|
||
|
||
export default function OperatorRatings({ ratings }: Props) {
|
||
if (!ratings.length) return null;
|
||
|
||
return (
|
||
<section>
|
||
<h3 className="text-lg font-bold mb-3">📈 Рейтинг операторов по КЛГ</h3>
|
||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
|
||
{(['best', 'average', 'worst'] as const).map(cat => {
|
||
const items = ratings.filter(r => r.category === cat);
|
||
const cfg = catConfig[cat];
|
||
return (
|
||
<div key={cat} className={`card p-4 ${cfg.bg} border ${cfg.border}`}>
|
||
<h4 className="text-sm font-bold mb-3">{cfg.title}</h4>
|
||
{items.length > 0 ? items.map((r, i) => (
|
||
<div key={i} className="flex justify-between items-center py-2 border-b border-gray-100 last:border-0">
|
||
<div>
|
||
<div className="text-sm font-medium">{r.operator}</div>
|
||
<div className="text-xs text-gray-500">ВС: {r.totalAircraft} (акт: {r.activeAircraft}, ТО: {r.maintenanceAircraft})</div>
|
||
</div>
|
||
<div className={`text-lg font-bold ${cfg.ratingColor}`}>{r.rating}%</div>
|
||
</div>
|
||
)) : <div className="text-xs text-gray-400 py-2">Нет данных</div>}
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|