Untitled

"use client"
import { AppSidebar } from "@/components/app-sidebar"
import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"
import { useTranslation, type SupportedLanguages } from "@/utils/translations"
import { useSettings } from "@/hooks/useSettings"
import { EstimateFillLevelChart } from "@/components/estimate-fill-level-chart"
import { ProactiveEmptyingChart } from "@/components/proactive_emptying_stats"
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
import { Separator } from "@/components/ui/separator"
import { OverviewCards } from "@/components/overview-cards"
import { HistoricalFillChart } from "@/components/historical-fill-level"

export default function Page() {
  const { settings } = useSettings()
  const { t } = useTranslation((settings?.language as SupportedLanguages) || "EN")
  
  return (
    <SidebarProvider>
      <div className="flex min-h-screen w-full">
        <AppSidebar />
        <div className="flex-1">
          <header className="flex h-14 shrink-0 items-center gap-2 border-b px-4">
            <SidebarTrigger />
            <Separator orientation="vertical" className="mx-2 h-4" />
            <Breadcrumb>
              <BreadcrumbList>
                <BreadcrumbItem className="hidden sm:block">
                  <BreadcrumbLink href="/">{t('navigation.home')}</BreadcrumbLink>
                </BreadcrumbItem>
                <BreadcrumbSeparator className="hidden sm:block" />
                <BreadcrumbItem>
                  <BreadcrumbPage>{t('navigation.bins')}</BreadcrumbPage>
                </BreadcrumbItem>
              </BreadcrumbList>
            </Breadcrumb>
          </header>
          
          <main className="flex-1 space-y-4 p-4">
            <div className="grid gap-4">
              <OverviewCards />
              
              <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
                <div className="w-full">
                  <HistoricalFillChart />
                </div>
                <div className="w-full">
                  <ProactiveEmptyingChart />
                </div>
              </div>
              
              <div className="w-full">
                <EstimateFillLevelChart />
              </div>
            </div>
          </main>
        </div>
      </div>
    </SidebarProvider>
  )
}