first commit
This commit is contained in:
Alberto-Audrix committed
commit
b54624be96
226 files changed
+108840
No files matched your search
@@ -0,0 +1,208 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { errorMessage } from '../services/apiClient.ts';
|
||||
import type { View } from '../types/common.ts';
|
||||
import { useFarm } from '../context/FarmContext.tsx';
|
||||
import { Banner, EmptyFarm, PageHeader, Spinner } from './ui/Feedback.tsx';
|
||||
import { formatDateRange, formatRatio } from '../utils/format.ts';
|
||||
import {
|
||||
loadKandangRanking,
|
||||
type KandangRankingRow,
|
||||
} from '../utils/kandangRanking.ts';
|
||||
|
||||
type ScopeMode = 'selected' | 'all';
|
||||
|
||||
type Props = {
|
||||
setView: (view: View) => void;
|
||||
};
|
||||
|
||||
const MONTH_OPTIONS = Array.from({ length: 12 }, (_, i) => i + 1);
|
||||
|
||||
const formatMetric = (value: number | null): string =>
|
||||
value == null ? 'N/A' : formatRatio(value, 3);
|
||||
|
||||
const KandangRankingPage: React.FC<Props> = ({ setView }) => {
|
||||
const {
|
||||
sites,
|
||||
selectedSite,
|
||||
selectedSiteId,
|
||||
setSelectedSiteId,
|
||||
setSelectedKandangId,
|
||||
setSelectedCycleId,
|
||||
} = useFarm();
|
||||
|
||||
const [scope, setScope] = useState<ScopeMode>('selected');
|
||||
const [months, setMonths] = useState(3);
|
||||
const [rows, setRows] = useState<KandangRankingRow[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const needsSite = scope === 'selected' && selectedSiteId == null;
|
||||
|
||||
useEffect(() => {
|
||||
if (needsSite) {
|
||||
setRows([]);
|
||||
setError(null);
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const targetSites =
|
||||
scope === 'all' ? sites : selectedSite ? [selectedSite] : [];
|
||||
if (targetSites.length === 0) {
|
||||
setRows([]);
|
||||
return;
|
||||
}
|
||||
|
||||
let cancelled = false;
|
||||
(async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const next = await loadKandangRanking({ sites: targetSites, months });
|
||||
if (!cancelled) setRows(next);
|
||||
} catch (err) {
|
||||
if (!cancelled) {
|
||||
setError(errorMessage(err));
|
||||
setRows([]);
|
||||
}
|
||||
} finally {
|
||||
if (!cancelled) setLoading(false);
|
||||
}
|
||||
})();
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [scope, months, sites, selectedSite, selectedSiteId, needsSite]);
|
||||
|
||||
const openEef = (row: KandangRankingRow) => {
|
||||
setSelectedSiteId(row.siteId);
|
||||
setSelectedKandangId(row.kandangId);
|
||||
setSelectedCycleId(row.cycleId);
|
||||
setView('eefDashboard');
|
||||
};
|
||||
|
||||
if (needsSite) {
|
||||
return (
|
||||
<div>
|
||||
<PageHeader
|
||||
title="Peringkat Kandang"
|
||||
subtitle="Peringkat siklus tertutup berdasarkan EEF"
|
||||
/>
|
||||
<EmptyFarm onSettings={() => setView('kandangSettings')} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const showSiteColumn = scope === 'all';
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4 mb-4">
|
||||
<PageHeader
|
||||
title="Peringkat Kandang"
|
||||
subtitle={
|
||||
scope === 'all'
|
||||
? 'Semua site · siklus tertutup berdasarkan EEF'
|
||||
: `${selectedSite?.site_name ?? 'Site'} · siklus tertutup berdasarkan EEF`
|
||||
}
|
||||
/>
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<div className="inline-flex rounded-lg border border-gray-200 bg-white p-1">
|
||||
<button
|
||||
type="button"
|
||||
className={`px-3 py-1.5 text-xs font-semibold rounded-md ${
|
||||
scope === 'selected'
|
||||
? 'bg-red-600 text-white'
|
||||
: 'text-gray-600 hover:bg-gray-50'
|
||||
}`}
|
||||
onClick={() => setScope('selected')}
|
||||
>
|
||||
Site terpilih
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`px-3 py-1.5 text-xs font-semibold rounded-md ${
|
||||
scope === 'all'
|
||||
? 'bg-red-600 text-white'
|
||||
: 'text-gray-600 hover:bg-gray-50'
|
||||
}`}
|
||||
onClick={() => setScope('all')}
|
||||
>
|
||||
Semua site
|
||||
</button>
|
||||
</div>
|
||||
<label className="flex items-center gap-2 text-sm text-gray-600">
|
||||
<span className="font-semibold">Rentang</span>
|
||||
<select
|
||||
className="rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm font-semibold text-gray-800"
|
||||
value={months}
|
||||
onChange={(e) => setMonths(Number(e.target.value))}
|
||||
>
|
||||
{MONTH_OPTIONS.map((m) => (
|
||||
<option key={m} value={m}>
|
||||
{m} bulan
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="mb-4">
|
||||
<Banner kind="error">{error}</Banner>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{loading ? (
|
||||
<Spinner />
|
||||
) : rows.length === 0 ? (
|
||||
<Banner>Tidak ada siklus tertutup dalam rentang ini.</Banner>
|
||||
) : (
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-x-auto">
|
||||
<table className="min-w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-gray-100 text-left text-xs uppercase tracking-wide text-gray-500">
|
||||
<th className="px-4 py-3 font-semibold">Rank</th>
|
||||
{showSiteColumn && <th className="px-4 py-3 font-semibold">Site</th>}
|
||||
<th className="px-4 py-3 font-semibold">Kandang</th>
|
||||
<th className="px-4 py-3 font-semibold">Periode</th>
|
||||
<th className="px-4 py-3 font-semibold">Hari</th>
|
||||
<th className="px-4 py-3 font-semibold">EEF</th>
|
||||
<th className="px-4 py-3 font-semibold">FCR</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rows.map((row) => (
|
||||
<tr
|
||||
key={`${row.cycleId}-${row.kandangId}`}
|
||||
className="border-b border-gray-50 hover:bg-gray-50 cursor-pointer"
|
||||
onClick={() => openEef(row)}
|
||||
>
|
||||
<td className="px-4 py-3 font-semibold text-gray-800">
|
||||
{row.rank > 0 ? row.rank : '—'}
|
||||
</td>
|
||||
{showSiteColumn && (
|
||||
<td className="px-4 py-3 text-gray-700">{row.siteName}</td>
|
||||
)}
|
||||
<td className="px-4 py-3 font-medium text-gray-800">{row.kandangName}</td>
|
||||
<td className="px-4 py-3 text-gray-600">
|
||||
{formatDateRange(row.startDate, row.endDate)}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-gray-600">{row.totalDays || '—'}</td>
|
||||
<td className="px-4 py-3 font-semibold text-gray-900">
|
||||
{formatMetric(row.eef)}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-gray-600">{formatMetric(row.fcr)}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default KandangRankingPage;
|
||||
Reference in new issue
Block a user