import React, { useMemo, useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Badge } from "@/components/ui/badge";
import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer, CartesianGrid } from "recharts";
import { TrendingUp, CalendarClock, Download, PlusCircle } from "lucide-react";
import { motion } from "framer-motion";
// --- Helper functions ---
function formatEuro(value) {
if (value === null || value === undefined || value === "") return "–";
try {
return new Intl.NumberFormat("nl-BE", { style: "currency", currency: "EUR", maximumFractionDigits: 0 }).format(Number(value));
} catch {
return value;
}
}
function weekLabel(d) {
const dt = new Date(d);
if (isNaN(dt)) return "";
const onejan = new Date(dt.getFullYear(), 0, 1);
const millis = dt - onejan + (onejan.getTimezoneOffset() - dt.getTimezoneOffset()) * 60000;
const week = Math.ceil(((millis / 86400000) + onejan.getDay() + 1) / 7);
return `W${String(week).padStart(2, "0")} ${dt.getFullYear()}`;
}
function sentimentColor(s) {
switch ((s || "").toLowerCase()) {
case "positief":
return "bg-green-600";
case "negatief":
return "bg-red-600";
case "stabiel":
case "neutraal":
return "bg-gray-600";
default:
return "bg-gray-500";
}
}
// --- Demo seed data (would come from DB in production) ---
const seed = [
{ date: "2025-06-30", week: "W27 2025", avgPrice: 110, sentiment: "stabiel" },
{ date: "2025-07-07", week: "W28 2025", avgPrice: 113, sentiment: "positief" },
{ date: "2025-07-14", week: "W29 2025", avgPrice: 111, sentiment: "stabiel" },
{ date: "2025-07-21", week: "W30 2025", avgPrice: 108, sentiment: "negatief" },
{ date: "2025-07-28", week: "W31 2025", avgPrice: 109, sentiment: "stabiel" },
{ date: "2025-08-04", week: "W32 2025", avgPrice: 112, sentiment: "positief" },
];
export default function BelgapomLanding() {
const [rows, setRows] = useState(seed);
const latest = useMemo(() => rows[rows.length - 1], [rows]);
// Derived chart data
const chartData = useMemo(() => rows.map(r => ({ name: r.week, value: r.avgPrice })), [rows]);
function handleAdd(e) {
e.preventDefault();
const form = new FormData(e.currentTarget);
const date = form.get("date");
const avg = Number(form.get("avg"));
const sentiment = form.get("sentiment");
const notes = form.get("notes");
if (!date || !avg || !sentiment) {
alert("Vul datum, gemiddelde prijs en marktstemming in.");
return;
}
const wk = weekLabel(date);
const next = { date, week: wk, avgPrice: avg, sentiment, notes };
setRows(prev => [...prev, next]);
e.currentTarget.reset();
}
function handlePrint() {
window.print();
}
return (
{/* Header */}
{/* Main */}
{/* Left: KPI + Chart */}
{latest?.sentiment || "–"}
`${v} €`} />
formatEuro(v)} />
{/* Right: Admin form */}
{/* Footer */}
{/* Print styles */}
);
}
Belgapom Notering
Wekelijkse gemiddelde prijs vrije aardappelen
{formatEuro(latest?.avgPrice)}
{latest?.week || "–"}
{latest?.date || "–"}
Historiek gemiddelde prijs
Nieuwe week toevoegen
⚠️ Demo: data wordt nu enkel in het geheugen bewaard. In productie koppelen we dit aan een database en login.
