Untitled
unknown
plain_text
15 days ago
10 kB
4
Indexable
import React from 'react'; import { AppSidebar } from "@/components/app-sidebar"; import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, } from "@/components/ui/breadcrumb"; import { Separator } from "@/components/ui/separator"; import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"; import { useMetrics } from '@/hooks/useMetrics'; import { useTranslation, type SupportedLanguages } from "@/utils/translations"; import { useSettings } from "@/hooks/useSettings"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Tabs, TabsContent, TabsList, TabsTrigger, } from "@/components/ui/tabs"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { formatDistanceToNow } from 'date-fns'; import { ArrowUpCircle, ArrowDownCircle, Activity, BarChart3, AlarmClock } from 'lucide-react'; export default function BinStatisticsPage() { const { metrics, loading, error, helpers } = useMetrics(); const { settings } = useSettings(); const { t } = useTranslation((settings?.language as SupportedLanguages) || "EN"); if (loading) { return ( <SidebarProvider> <AppSidebar /> <SidebarInset> <div>Loading...</div> </SidebarInset> </SidebarProvider> ); } if (error || !metrics) { return ( <SidebarProvider> <AppSidebar /> <SidebarInset> <div>Error loading metrics data</div> </SidebarInset> </SidebarProvider> ); } // Get active bins and their current status const activeBins = helpers?.getActiveBinIds() || []; const predictions = helpers?.getLatestPredictions() || {}; const emptyingStats = helpers?.getProactiveEmptyingStats() || []; // Calculate some overview statistics const totalEmptyings = Object.values(metrics.basic_metrics.bin_emptying_counts).reduce((a, b) => a + b, 0); const averageFillLevel = Object.values(predictions).reduce((acc, pred) => acc + pred.current_level, 0) / Object.values(predictions).length; return ( <SidebarProvider> <AppSidebar /> <SidebarInset> {/* Header */} <header className="flex shrink-0 items-center gap-2 border-b px-4 py-6"> <SidebarTrigger className="-ml-1" /> <Separator orientation="vertical" className="mr-2 h-4" /> <Breadcrumb> <BreadcrumbList> <BreadcrumbItem> <BreadcrumbLink href="/">{t("navigation.home")}</BreadcrumbLink> </BreadcrumbItem> <BreadcrumbItem> <BreadcrumbLink href="/bins">Bin Management</BreadcrumbLink> </BreadcrumbItem> </BreadcrumbList> </Breadcrumb> </header> {/* Main Content */} <main className="p-4 space-y-6"> {/* Overview Section */} <Card> <CardHeader> <CardTitle>System Overview</CardTitle> <CardDescription>Current status and key metrics</CardDescription> </CardHeader> <CardContent> <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4"> <Card> <CardContent className="pt-6"> <div className="flex items-center justify-between space-x-4"> <div className="flex items-center space-x-4"> <Activity className="h-6 w-6 text-muted-foreground" /> <div> <p className="text-sm font-medium">Active Bins</p> <p className="text-2xl font-bold">{activeBins.length}</p> </div> </div> </div> </CardContent> </Card> <Card> <CardContent className="pt-6"> <div className="flex items-center justify-between space-x-4"> <div className="flex items-center space-x-4"> <BarChart3 className="h-6 w-6 text-muted-foreground" /> <div> <p className="text-sm font-medium">Average Fill Level</p> <p className="text-2xl font-bold">{averageFillLevel.toFixed(1)}%</p> </div> </div> </div> </CardContent> </Card> <Card> <CardContent className="pt-6"> <div className="flex items-center justify-between space-x-4"> <div className="flex items-center space-x-4"> <AlarmClock className="h-6 w-6 text-muted-foreground" /> <div> <p className="text-sm font-medium">Total Emptyings</p> <p className="text-2xl font-bold">{totalEmptyings}</p> </div> </div> </div> </CardContent> </Card> <Card> <CardContent className="pt-6"> <div className="flex items-center justify-between space-x-4"> <div className="flex items-center space-x-4"> <ArrowUpCircle className="h-6 w-6 text-muted-foreground" /> <div> <p className="text-sm font-medium">Proactive Emptyings</p> <p className="text-2xl font-bold">{metrics.proactive_emptying.count}</p> </div> </div> </div> </CardContent> </Card> </div> {/* Detailed Status */} <div className="mt-6"> <h3 className="font-medium mb-4">Current Bin Status</h3> <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3"> {activeBins.map(binId => { const prediction = predictions[binId]; if (!prediction) return null; const timeUntilFull = new Date(prediction.predicted_full_time).getTime() - new Date().getTime(); const isNearFull = prediction.current_level > 80; return ( <Card key={binId} className={isNearFull ? 'border-orange-500' : ''}> <CardContent className="pt-6"> <div className="space-y-2"> <p className="text-sm font-medium">Bin {binId}</p> <div className="flex justify-between text-sm"> <span>Current Level:</span> <span className={isNearFull ? 'text-orange-500 font-medium' : ''}> {prediction.current_level.toFixed(1)}% </span> </div> <div className="flex justify-between text-sm"> <span>Fill Rate:</span> <span>{prediction.fill_rate.toFixed(2)}%/hour</span> </div> <div className="flex justify-between text-sm"> <span>Time Until Full:</span> <span>{formatDistanceToNow(new Date(prediction.predicted_full_time))}</span> </div> </div> </CardContent> </Card> ); })} </div> </div> </CardContent> </Card> {/* Charts Section */} <Tabs defaultValue="historical" className="space-y-4"> <TabsList> <TabsTrigger value="historical">Historical Data</TabsTrigger> <TabsTrigger value="predictions">Fill Predictions</TabsTrigger> <TabsTrigger value="proactive">Proactive Emptying</TabsTrigger> </TabsList> <TabsContent value="historical" className="space-y-4"> {/* Historical Data Chart will go here */} <Card> <CardHeader> <CardTitle>Fill Level History</CardTitle> <CardDescription>Historical fill levels and emptying events</CardDescription> </CardHeader> <CardContent> <div className="h-[400px]"> {/* Historical Chart Component will be added here */} </div> </CardContent> </Card> </TabsContent> <TabsContent value="predictions" className="space-y-4"> {/* Predictions Chart will go here */} <Card> <CardHeader> <CardTitle>Fill Level Predictions</CardTitle> <CardDescription>Current and predicted fill levels</CardDescription> </CardHeader> <CardContent> <div className="h-[400px]"> {/* Predictions Chart Component will be added here */} </div> </CardContent> </Card> </TabsContent> <TabsContent value="proactive" className="space-y-4"> {/* Proactive Emptying Chart will go here */} <Card> <CardHeader> <CardTitle>Proactive Emptying Statistics</CardTitle> <CardDescription>Analysis of emptying events by fill level</CardDescription> </CardHeader> <CardContent> <div className="h-[400px]"> {/* Proactive Emptying Chart Component will be added here */} </div> </CardContent> </Card> </TabsContent> </Tabs> </main> </SidebarInset> </SidebarProvider> ); }
Editor is loading...
Leave a Comment