53 lines
1.9 KiB
TypeScript
53 lines
1.9 KiB
TypeScript
import React from 'react';
|
|
import { NetworkIcon } from './icons/Icons';
|
|
import { useAppContext } from '../context/AppContext';
|
|
import NetworkStats from './network/NetworkStats';
|
|
import BandwidthChart from './network/BandwidthChart';
|
|
import NetworkDeviceDashboard from './network/NetworkDeviceDashboard';
|
|
import AiInsightCard from './shared/AiInsightCard.tsx';
|
|
|
|
const NetworkManagementPage: React.FC = () => {
|
|
const { networkDevices, bandwidthHistory, getNetworkDeviceLocationName, apiMode } =
|
|
useAppContext();
|
|
|
|
return (
|
|
<main className="px-4 sm:px-6 lg:px-8 pb-8">
|
|
<div className="flex items-center mb-6">
|
|
<NetworkIcon className="text-3xl text-red-600 mr-4" />
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-gray-800">Dashboard Manajemen Jaringan</h1>
|
|
<p className="mt-1 text-gray-600">
|
|
Monitor kesehatan dan performa infrastruktur jaringan peternakan Anda.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-8">
|
|
{apiMode === 'DEMO' && (
|
|
<AiInsightCard title="AI Insight: Optimasi Jaringan">
|
|
<p>
|
|
Latensi tinggi terdeteksi pada <strong>AP Lantai 2 - Kandang A</strong>. Hal ini dapat
|
|
mempengaruhi pengiriman data real-time dari kamera. Kemungkinan terjadi interferensi
|
|
sinyal. Pertimbangkan untuk memindahkan AP atau mengganti channel WiFi.
|
|
</p>
|
|
</AiInsightCard>
|
|
)}
|
|
<NetworkStats devices={networkDevices} />
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
<div className="lg:col-span-2">
|
|
<NetworkDeviceDashboard
|
|
devices={networkDevices}
|
|
getLocationName={getNetworkDeviceLocationName}
|
|
/>
|
|
</div>
|
|
<div className="lg:col-span-1">
|
|
<BandwidthChart data={bandwidthHistory} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
);
|
|
};
|
|
|
|
export default NetworkManagementPage;
|