audrix/dashboard-cpsp-executive
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adjust panel iot page to match dashboard-cpsp page

Browse Source
This commit is contained in:
Alberto-Audrix committed 2026-10-05 15:10:53 +07:00
1 parent b5ee6b87f0
commit 04678ef773
2 files changed
+143 -33
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

components/IotPanelPage.tsx
+115 -33
View File
@@ -12,7 +12,14 @@ import { api, errorMessage } from '../services/apiClient.ts';
import type { Flock, PanelIoT } from '../types/api.ts';
import { useFarm } from '../context/FarmContext.tsx';
import { Banner, EmptyFarm, PageHeader, Spinner } from './ui/Feedback.tsx';
import { cycleDayForDate, formatDateId, formatDateRange, formatNumber } from '../utils/format.ts';
import {
cycleDayForDate,
formatDateId,
formatDateRange,
formatNumber,
resolveCycleBoundDate,
todayIso,
} from '../utils/format.ts';
import {
getTempStandardByDay,
getWaterStandardByDay,
@@ -53,7 +60,11 @@ type DaySummary = {
minExp: number;
maxExp: number;
humidity: number;
minHumidity: number;
maxHumidity: number;
windSpeed: number;
minWind: number;
maxWind: number;
waterTotal: number;
};
@@ -126,11 +137,19 @@ const IotPanelPage: React.FC<{ onSettings: () => void }> = ({ onSettings }) => {
if (cancelled) return;
const sortedDates = [...dateList].sort();
setDates(sortedDates);
setSelectedDate((previous) =>
previous && sortedDates.includes(previous)
const cycleMin = selectedCycle.start_date;
const cycleMax = resolveCycleBoundDate(selectedCycle);
const fallbackDate =
todayIso() > cycleMax ? cycleMax : todayIso() < cycleMin ? cycleMin : todayIso();
setSelectedDate((previous) => {
if (sortedDates.length > 0) {
return previous && sortedDates.includes(previous)
? previous
: (sortedDates[sortedDates.length - 1] ?? '')
);
: (sortedDates[sortedDates.length - 1] ?? fallbackDate);
}
if (previous && previous >= cycleMin && previous <= cycleMax) return previous;
return fallbackDate;
});
} catch (err) {
if (!cancelled) setError(errorMessage(err));
} finally {
@@ -191,7 +210,11 @@ const IotPanelPage: React.FC<{ onSettings: () => void }> = ({ onSettings }) => {
minExp: min('experience_temperature'),
maxExp: max('experience_temperature'),
humidity: last.humidity,
minHumidity: min('humidity'),
maxHumidity: max('humidity'),
windSpeed: last.wind_speed,
minWind: min('wind_speed'),
maxWind: max('wind_speed'),
waterTotal: last.water_total,
};
}, [dayRows]);
@@ -243,8 +266,19 @@ const IotPanelPage: React.FC<{ onSettings: () => void }> = ({ onSettings }) => {
suhu_max_C: summary?.maxTemp ?? null,
experience_suhu_min_C: summary?.minExp ?? null,
experience_suhu_max_C: summary?.maxExp ?? null,
kelembapan_min_persen: summary?.minHumidity ?? null,
kelembapan_max_persen: summary?.maxHumidity ?? null,
kecepatan_angin_min_mPerDetik: summary?.minWind ?? null,
kecepatan_angin_max_mPerDetik: summary?.maxWind ?? null,
waktu_data: selectedDate || null,
});
}, [selectedKandang, selectedCycle, dayAge, summary]);
}, [selectedKandang, selectedCycle, summary, dayAge, selectedDate]);
const datePickerMin = selectedCycle?.start_date ?? undefined;
// IoT panel is real-time — not subject to the publish cutoff that
// resolveCycleBoundDate() applies via soft_end_date → visible_through_date().
// Closed cycles use end_date; open cycles go up to today.
const datePickerMax = selectedCycle?.end_date ?? todayIso();
if (!selectedCycle) return <EmptyFarm onSettings={onSettings} />;
@@ -261,9 +295,9 @@ const IotPanelPage: React.FC<{ onSettings: () => void }> = ({ onSettings }) => {
setSelectedFlockId(event.target.value ? Number(event.target.value) : null)
}
className="rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-700"
aria-label="Pilih flock"
aria-label="Pilih lantai"
>
{flocks.length === 0 && <option value="">Tidak ada flock</option>}
{flocks.length === 0 && <option value="">Tidak ada lantai</option>}
{flocks.map((flock) => (
<option key={flock.id} value={flock.id}>
{flock.flock_name}
@@ -275,6 +309,32 @@ const IotPanelPage: React.FC<{ onSettings: () => void }> = ({ onSettings }) => {
{error && <Banner kind="error">{error}</Banner>}
{selectedFlockId == null ? (
<div className={cardClass}>
<p className="py-8 text-center text-slate-400">
Pilih lantai untuk melihat data panel IoT.
</p>
</div>
) : (
<div className="flex flex-wrap items-center justify-between gap-2 rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-600">
<span className="inline-flex items-center gap-2">
<i className="fa-regular fa-calendar" />
<label htmlFor="iot-date-picker" className="text-slate-500">
Tanggal:
</label>
<input
id="iot-date-picker"
type="date"
value={selectedDate}
min={datePickerMin}
max={datePickerMax}
onChange={(event) => setSelectedDate(event.target.value)}
className="rounded-lg border border-slate-300 bg-white px-2 py-1.5 text-sm text-slate-700 focus:ring-2 focus:ring-red-500 focus:border-red-500"
/>
</span>
</div>
)}
{selectedKandang && insightContext ? (
<PageAiInsight
topic="iot_panel"
@@ -318,38 +378,19 @@ const IotPanelPage: React.FC<{ onSettings: () => void }> = ({ onSettings }) => {
/>
) : (
<section>
<h2 className="text-lg font-bold text-gray-800 mb-3">
<i className="fa-solid fa-brain text-red-600 mr-2" />
<h2 className="mb-3 text-lg font-bold text-gray-800">
<i className="fa-solid fa-brain mr-2 text-red-600" />
AI Insight Panel IoT
</h2>
<Banner>Pilih kandang untuk melihat AI Insight.</Banner>
</section>
)}
{loading && dayRows.length === 0 ? (
{selectedFlockId != null &&
(loading && dayRows.length === 0 ? (
<Spinner />
) : summary ? (
<>
<div className="flex flex-wrap items-center justify-between gap-2 rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-600">
<span className="inline-flex items-center gap-2">
<i className="fa-regular fa-calendar" />
<label htmlFor="iot-date-picker" className="text-slate-500">
Tanggal:
</label>
<input
id="iot-date-picker"
type="date"
value={selectedDate}
min={dates[0] ?? undefined}
max={dates[dates.length - 1] ?? undefined}
onChange={(event) => setSelectedDate(event.target.value)}
className="rounded-lg border border-slate-300 bg-white px-2 py-1.5 text-sm text-slate-700 focus:ring-2 focus:ring-red-500 focus:border-red-500"
/>
</span>
<span className="text-xs">{summary.count} pembacaan</span>
</div>
<section className="grid gap-3 xl:grid-cols-[1.25fr_2.35fr]">
<div className="space-y-3">
<article className={cardClass}>
@@ -418,7 +459,7 @@ const IotPanelPage: React.FC<{ onSettings: () => void }> = ({ onSettings }) => {
color: 'text-slate-500',
},
{
label: 'Flock',
label: 'Lantai',
value:
flocks.find((flock) => flock.id === selectedFlockId)?.flock_name ?? 'N/A',
icon: 'fa-warehouse',
@@ -530,9 +571,50 @@ const IotPanelPage: React.FC<{ onSettings: () => void }> = ({ onSettings }) => {
) : (
<div className={cardClass}>
<p className="py-8 text-center text-slate-400">
Belum ada data panel IoT untuk flock ini.
{dates.length === 0
? 'Belum ada data panel IoT untuk lantai ini. Refresh halaman setelah data tersedia.'
: `Belum ada data panel IoT untuk ${selectedDate ? formatDateId(selectedDate) : 'tanggal ini'}.`}
</p>
</div>
))}
{selectedFlockId != null && dayRows.length > 0 && (
<article className={cardClass}>
<h2 className="mb-3 font-semibold text-slate-800">
<i className="fa-solid fa-table mr-2 text-slate-400" />
Data Histori Panel IoT · {formatDateId(selectedDate)}
</h2>
<div className="overflow-x-auto">
<table className="min-w-full text-sm">
<thead className="bg-slate-50 text-slate-600">
<tr>
<th className="px-4 py-3 text-left font-semibold">Waktu</th>
<th className="px-4 py-3 text-right font-semibold">Suhu Rata-rata</th>
<th className="px-4 py-3 text-right font-semibold">Experience Suhu</th>
<th className="px-4 py-3 text-right font-semibold">Kelembapan</th>
<th className="px-4 py-3 text-right font-semibold">Angin</th>
<th className="px-4 py-3 text-right font-semibold">Air Total</th>
</tr>
</thead>
<tbody>
{dayRows.map((row) => (
<tr key={row.id} className="border-t border-slate-100">
<td className="px-4 py-2">{formatTime(row.timestamp)}</td>
<td className="px-4 py-2 text-right">
{formatNumber(row.average_temperature)} °C
</td>
<td className="px-4 py-2 text-right">
{formatNumber(row.experience_temperature)} °C
</td>
<td className="px-4 py-2 text-right">{formatNumber(row.humidity)} %</td>
<td className="px-4 py-2 text-right">{formatNumber(row.wind_speed)} m/s</td>
<td className="px-4 py-2 text-right">{formatNumber(row.water_total)} L</td>
</tr>
))}
</tbody>
</table>
</div>
</article>
)}
{selectedChartKey &&
utils/format.ts
+28
View File
@@ -57,6 +57,34 @@ export function inclusiveDayCount(startIso: string, endIso: string): number {
return Math.max(1, cycleDayForDate(startIso, endIso) + 1);
}
/** Inclusive upper date for open cycles (null end_date) without producing NaN day math. */
export function resolveCycleBoundDate(cycle: {
start_date: string;
end_date?: string | null;
soft_end_date?: string | null;
visible_through_date?: string | null;
total_days?: number;
}): string {
if (cycle.end_date) return cycle.end_date;
if (cycle.soft_end_date) return cycle.soft_end_date;
if (cycle.visible_through_date) return cycle.visible_through_date;
if (cycle.total_days != null && cycle.total_days > 0) {
return addDaysIso(cycle.start_date, Math.max(cycle.total_days - 1, 0));
}
return todayIso();
}
/** 0-based last day index from start → bound date (safe when end_date is null). */
export function cycleLastDayIndex(cycle: {
start_date: string;
end_date?: string | null;
soft_end_date?: string | null;
visible_through_date?: string | null;
total_days?: number;
}): number {
return cycleDayForDate(cycle.start_date, resolveCycleBoundDate(cycle));
}
export type CycleStatusUi = 'active' | 'pending_close' | 'closed';
export function resolveCycleStatus(cycle: {