63 lines
2.2 KiB
TypeScript
63 lines
2.2 KiB
TypeScript
import React from 'react';
|
|
import { BrainIcon } from './icons/Icons.tsx';
|
|
import BehaviorSummary from './behavior/BehaviorSummary.tsx';
|
|
import BehaviorTrendChart from './behavior/BehaviorTrendChart.tsx';
|
|
import LiveBehaviorView from './behavior/LiveBehaviorView.tsx';
|
|
import BehaviorAnomalyLog from './behavior/BehaviorAnomalyLog.tsx';
|
|
import { useAppContext } from '../context/AppContext.tsx';
|
|
import AiInsightCard from './shared/AiInsightCard.tsx';
|
|
|
|
const BehaviorAnalysisPage: React.FC = () => {
|
|
const {
|
|
behaviorMetrics: metrics,
|
|
behaviorHistory: history,
|
|
behaviorAnomalies: anomalies,
|
|
apiMode,
|
|
} = useAppContext();
|
|
|
|
return (
|
|
<main className="px-4 sm:px-6 lg:px-8 pb-8">
|
|
<div className="flex items-center mb-6">
|
|
<BrainIcon className="text-3xl text-red-600 mr-4" />
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-gray-800">Dashboard Analisis Perilaku</h1>
|
|
<p className="mt-1 text-gray-600">
|
|
Monitoring kesehatan dan kesejahteraan ayam melalui analisis perilaku AI.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{apiMode === 'DEMO' && (
|
|
<div className="mb-8">
|
|
<AiInsightCard title="AI Insight: Deteksi Dini">
|
|
<p>
|
|
Terdeteksi adanya anomali mobilitas rendah dan isolasi di{' '}
|
|
<strong>Kandang A / Lt 1</strong>. Ini bisa menjadi indikator awal Gumboro. Disarankan
|
|
untuk segera melakukan pemeriksaan fisik oleh dokter hewan.
|
|
</p>
|
|
<button className="text-xs font-semibold text-purple-800 hover:text-purple-900 hover:underline">
|
|
Jadwalkan Kunjungan Dokter →
|
|
</button>
|
|
</AiInsightCard>
|
|
</div>
|
|
)}
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
{/* Left Column: Live View & Anomaly Log */}
|
|
<div className="lg:col-span-2 space-y-8">
|
|
<LiveBehaviorView />
|
|
<BehaviorAnomalyLog anomalies={anomalies} />
|
|
</div>
|
|
|
|
{/* Right Column: Stats and Chart */}
|
|
<div className="space-y-8">
|
|
<BehaviorSummary metrics={metrics} />
|
|
<BehaviorTrendChart data={history} />
|
|
</div>
|
|
</div>
|
|
</main>
|
|
);
|
|
};
|
|
|
|
export default BehaviorAnalysisPage;
|