74 lines
3.0 KiB
TypeScript
74 lines
3.0 KiB
TypeScript
import React from 'react';
|
|
import { useAppContext } from '../context/AppContext.tsx';
|
|
import MultiCoopAnalysis from './weight/MultiCoopAnalysis.tsx';
|
|
import { formatWeight } from '../utils/weightUtils';
|
|
|
|
const MultiCoopWeightPage: React.FC = () => {
|
|
const { multiCoopChartData, multiCoopSummaryData, coopNamesForChart } = useAppContext();
|
|
|
|
return (
|
|
<main className="px-4 sm:px-6 lg:px-8 pb-8">
|
|
<div className="flex items-center mb-6">
|
|
<i className="fa-solid fa-balance-scale text-3xl text-red-600 mr-4"></i>
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-gray-800">
|
|
Perbandingan Performa Berat Antar Kandang
|
|
</h1>
|
|
<p className="mt-1 text-gray-600">
|
|
Analisis komparatif tren pertumbuhan untuk optimasi manajemen.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-8">
|
|
<MultiCoopAnalysis
|
|
chartData={multiCoopChartData}
|
|
summaryData={multiCoopSummaryData}
|
|
coopNames={coopNamesForChart}
|
|
/>
|
|
|
|
<div className="bg-white p-6 rounded-xl shadow-sm">
|
|
<h2 className="text-2xl font-bold mb-4">Tabel Rincian Performa</h2>
|
|
<div className="overflow-x-auto">
|
|
<table className="min-w-full text-sm">
|
|
<thead className="bg-gray-100 text-left text-gray-600">
|
|
<tr>
|
|
<th className="p-3 font-semibold">Nama Kandang</th>
|
|
<th className="p-3 font-semibold text-right">Bobot Rata-rata</th>
|
|
<th className="p-3 font-semibold text-right">ADG</th>
|
|
<th className="p-3 font-semibold text-right">Keseragaman</th>
|
|
<th className="p-3 font-semibold text-right">Deviasi dari Target</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-gray-100">
|
|
{multiCoopSummaryData.map((summary) => (
|
|
<tr key={summary.coopId} className="hover:bg-gray-50">
|
|
<td className="p-3 font-semibold text-gray-800">{summary.coopName}</td>
|
|
<td className="p-3 text-gray-800 text-right font-bold">
|
|
{formatWeight(summary.currentWeight)}
|
|
</td>
|
|
<td className="p-3 text-gray-600 text-right">{formatWeight(summary.adg)}</td>
|
|
<td className="p-3 text-gray-600 text-right">
|
|
{summary.uniformity.toFixed(1)}%
|
|
</td>
|
|
<td className="p-3 text-right">
|
|
<span
|
|
className={`px-2 py-1 rounded-full font-bold ${summary.deviation >= 0 ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}
|
|
>
|
|
{summary.deviation >= 0 ? '+' : ''}
|
|
{summary.deviation} g
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
);
|
|
};
|
|
|
|
export default MultiCoopWeightPage;
|