'use client';

import { AggregateBinWeightsChart } from './components/AggregateBinWeightsChart';
import { LossByDefectChart } from './components/LossByDefectChart';
import { LossByProcessorChart } from './components/LossByProcessorChart';
import { LossByFarmChart } from './components/LossByFarmChart';
import { CategorizedLossByOperatorChart } from './components/CategorizedLossByOperatorChart';

import styles from './page.module.scss';
import Link from 'next/link';

export default function Page() {
    return (
        <main className={styles.page}>
            <header className={styles.header}>
                <h1>LPD+S Dashboard</h1>
                <Link href="/dashboard/bins"><button>Bin Contents &gt;</button></Link> 
            </header>
            <div className={styles.panels}>
                <div className={styles.fullPanel}>
                    <AggregateBinWeightsChart />
                </div>
                <div className={styles.panel}>
                    <LossByDefectChart />
                </div>
                <div className={styles.panel}>
                    <CategorizedLossByOperatorChart />
                </div>
                <div className={styles.panel}>
                    <LossByProcessorChart />
                </div>
                <div className={styles.panel}>
                    <LossByFarmChart />
                </div>
            </div>
        </main>
    );
}