@flowselections/dashboard-erp-kwekers 1.0.1

package/dist-lib/components/dashboard/DashboardViewPage.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useParams, useNavigate, Link } from '@tanstack/react-router';
+import { Button } from '@flowselections/core';
+import { Pencil, LayoutGrid } from 'lucide-react';
+import GridLayout from 'react-grid-layout/legacy';
+import { useDashboardPages } from '../../hooks/useDashboardPages';
+import { useDashboardBlocks } from '../../hooks/useDashboardBlocks';
+import { BlockRenderer } from './BlockRenderer';
+import { DashboardSummary } from './DashboardSummary';
+import { AlertHistoryPanel } from './AlertHistoryPanel';
+import { FilterBar, FilterProvider } from './FilterBar';
+import 'react-grid-layout/css/styles.css';
+export function DashboardViewPage() {
+    return (_jsx(FilterProvider, { children: _jsx(DashboardViewInner, {}) }));
+}
+function DashboardViewInner() {
+    const { pages, loading: pagesLoading } = useDashboardPages();
+    const params = useParams({ strict: false });
+    const navigate = useNavigate();
+    const pageId = params.pageId ?? pages[0]?.id ?? null;
+    const page = pages.find(p => p.id === pageId);
+    const { blocks, loading } = useDashboardBlocks(pageId);
+    if (pagesLoading)
+        return _jsx("div", { className: "p-6 text-muted-foreground", children: "Laden\u2026" });
+    if (!page) {
+        return (_jsxs("div", { className: "p-12 text-center", children: [_jsx(LayoutGrid, { className: "w-12 h-12 mx-auto text-muted-foreground/40" }), _jsx("h2", { className: "mt-4 text-lg font-medium", children: "Nog geen dashboard" }), _jsx("p", { className: "text-sm text-muted-foreground mt-1", children: "Maak je eerste dashboard aan via de tabbalk hierboven." })] }));
+    }
+    const layout = blocks.map(b => ({
+        i: b.id,
+        x: b.layout?.x ?? 0,
+        y: b.layout?.y ?? 0,
+        w: b.layout?.w ?? 4,
+        h: b.layout?.h ?? 4,
+        static: true,
+    }));
+    return (_jsxs("div", { className: "p-4", children: [_jsxs("div", { className: "flex items-center justify-between mb-4 px-2", children: [_jsx("h1", { className: "text-xl font-semibold", children: page.name }), _jsx(Button, { asChild: true, size: "sm", children: _jsxs(Link, { to: '/dashboard-erp-kwekers/builder/$pageId', params: { pageId: page.id }, children: [_jsx(Pencil, { className: "w-4 h-4 mr-2" }), " Bewerken"] }) })] }), loading ? (_jsx("div", { className: "text-sm text-muted-foreground px-2", children: "Blokken laden\u2026" })) : blocks.length === 0 ? (_jsxs("div", { className: "p-12 text-center border-2 border-dashed rounded-lg mx-2", children: [_jsx("p", { className: "text-muted-foreground", children: "Dit dashboard is nog leeg." }), _jsxs(Button, { className: "mt-4", onClick: () => navigate({ to: '/dashboard-erp-kwekers/builder/$pageId', params: { pageId: page.id } }), children: [_jsx(Pencil, { className: "w-4 h-4 mr-2" }), " Blokken toevoegen"] })] })) : (_jsxs(_Fragment, { children: [_jsx(FilterBar, {}), _jsx(DashboardSummary, { pageId: page.id, pageName: page.name, blocks: blocks }), _jsx(AlertHistoryPanel, { pageId: page.id }), _jsx(GridLayout, { className: "layout", layout: layout, cols: 12, rowHeight: 60, width: 1200, isDraggable: false, isResizable: false, children: blocks.map(b => (_jsx("div", { children: _jsx(BlockRenderer, { block: b }) }, b.id))) })] }))] }));
+}

package/dist-lib/components/dashboard/FilterBar.d.ts

@@ -0,0 +1,17 @@
+import { type ReactNode } from 'react';
+export interface GlobalFilter {
+    from?: string;
+    to?: string;
+    search?: string;
+}
+interface Ctx {
+    filter: GlobalFilter;
+    setFilter: (f: GlobalFilter) => void;
+}
+export declare function FilterProvider({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useGlobalFilter(): Ctx;
+export declare function FilterBar(): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=FilterBar.d.ts.map

package/dist-lib/components/dashboard/FilterBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterBar.d.ts","sourceRoot":"","sources":["../../../src/components/dashboard/FilterBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKrF,MAAM,WAAW,YAAY;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,GAAG;IACX,MAAM,EAAE,YAAY,CAAC;IACrB,SAAS,EAAE,CAAC,CAAC,EAAE,YAAY,KAAK,IAAI,CAAC;CACtC;AAID,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAInE;AAED,wBAAgB,eAAe,QAE9B;AAED,wBAAgB,SAAS,gCA4GxB"}

package/dist-lib/components/dashboard/FilterBar.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useMemo, useState } from 'react';
+import { Input, Label, Button, Popover, PopoverContent, PopoverTrigger, Separator } from '@flowselections/core';
+import { Filter, X, Calendar, Check } from 'lucide-react';
+import { formatDate } from '../../lib/format';
+const FilterCtx = createContext({ filter: {}, setFilter: () => { } });
+export function FilterProvider({ children }) {
+    const [filter, setFilter] = useState({});
+    const value = useMemo(() => ({ filter, setFilter }), [filter]);
+    return _jsx(FilterCtx.Provider, { value: value, children: children });
+}
+export function useGlobalFilter() {
+    return useContext(FilterCtx);
+}
+export function FilterBar() {
+    const { filter, setFilter } = useGlobalFilter();
+    const active = !!(filter.from || filter.to || filter.search);
+    const presets = [
+        { id: 'today', label: 'Vandaag', days: 0 },
+        { id: '7d', label: 'Laatste 7 dagen', days: 7 },
+        { id: '30d', label: 'Laatste 30 dagen', days: 30 },
+        { id: '90d', label: 'Laatste 90 dagen', days: 90 },
+        { id: '6m', label: 'Laatste 6 maanden', days: 180 },
+        { id: '12m', label: 'Laatste 12 maanden', days: 365 },
+        { id: 'all', label: 'Alle tijd', days: null },
+    ];
+    function applyPreset(days) {
+        if (days === null) {
+            setFilter({ ...filter, from: undefined, to: undefined });
+            return;
+        }
+        const today = new Date();
+        const to = today.toISOString().slice(0, 10);
+        const fromDate = new Date(today.getTime() - days * 86400000);
+        const from = fromDate.toISOString().slice(0, 10);
+        setFilter({ ...filter, from, to });
+    }
+    function activePresetId() {
+        if (!filter.from && !filter.to)
+            return 'all';
+        if (!filter.from || !filter.to)
+            return null;
+        const diff = Math.round((new Date(filter.to).getTime() - new Date(filter.from).getTime()) / 86400000);
+        const today = new Date().toISOString().slice(0, 10);
+        if (filter.to !== today)
+            return null;
+        const match = presets.find((p) => p.days === diff);
+        return match?.id ?? null;
+    }
+    const activeId = activePresetId();
+    const rangeLabel = (() => {
+        if (activeId)
+            return presets.find((p) => p.id === activeId)?.label ?? 'Periode';
+        if (filter.from && filter.to)
+            return `${formatDate(filter.from)} – ${formatDate(filter.to)}`;
+        if (filter.from)
+            return `Vanaf ${formatDate(filter.from)}`;
+        if (filter.to)
+            return `T/m ${formatDate(filter.to)}`;
+        return 'Periode';
+    })();
+    return (_jsxs("div", { className: "flex items-center gap-3 flex-wrap mb-4 mx-2 p-3 rounded-lg border bg-muted/30", children: [_jsxs("div", { className: "flex items-center gap-2 text-sm font-medium text-muted-foreground", children: [_jsx(Filter, { className: "w-4 h-4" }), " Filters"] }), _jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "sm", className: "h-9 gap-2", children: [_jsx(Calendar, { className: "w-4 h-4" }), _jsx("span", { className: "font-medium", children: rangeLabel })] }) }), _jsxs(PopoverContent, { align: "start", className: "w-72 p-2", children: [_jsx("div", { className: "text-xs font-semibold text-muted-foreground px-2 py-1.5", children: "Snelle keuze" }), _jsx("div", { className: "flex flex-col", children: presets.map((p) => {
+                                    const isActive = activeId === p.id;
+                                    return (_jsxs("button", { type: "button", onClick: () => applyPreset(p.days), className: `flex items-center justify-between text-sm rounded-md px-2 py-1.5 hover:bg-accent text-left ${isActive ? 'bg-accent font-medium' : ''}`, children: [_jsx("span", { children: p.label }), isActive && _jsx(Check, { className: "w-3.5 h-3.5" })] }, p.id));
+                                }) }), _jsx(Separator, { className: "my-2" }), _jsx("div", { className: "text-xs font-semibold text-muted-foreground px-2 py-1", children: "Eigen periode" }), _jsxs("div", { className: "grid grid-cols-2 gap-2 px-1 pb-1", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-xs", children: "Van" }), _jsx(Input, { type: "date", value: filter.from ?? '', onChange: (e) => setFilter({ ...filter, from: e.target.value || undefined }), className: "h-8" })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-xs", children: "Tot" }), _jsx(Input, { type: "date", value: filter.to ?? '', onChange: (e) => setFilter({ ...filter, to: e.target.value || undefined }), className: "h-8" })] })] })] })] }), active && (_jsxs(Button, { size: "sm", variant: "ghost", onClick: () => setFilter({}), className: "h-9", children: [_jsx(X, { className: "w-3.5 h-3.5 mr-1" }), " Wissen"] }))] }));
+}

package/dist-lib/components/dashboard/QuickAddDialog.d.ts

@@ -0,0 +1,15 @@
+import type { BlockType, AnyBlockConfig } from './types';
+export interface QuickAddSubmit {
+    type: BlockType;
+    title: string;
+    config: AnyBlockConfig;
+}
+interface Props {
+    open: boolean;
+    onOpenChange: (v: boolean) => void;
+    onAdd: (input: QuickAddSubmit) => Promise<void> | void;
+    onAdvanced?: () => void;
+}
+export declare function QuickAddDialog({ open, onOpenChange, onAdd, onAdvanced }: Props): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=QuickAddDialog.d.ts.map

package/dist-lib/components/dashboard/QuickAddDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuickAddDialog.d.ts","sourceRoot":"","sources":["../../../src/components/dashboard/QuickAddDialog.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAYzD,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,cAAc,CAAC;CACxB;AAED,UAAU,KAAK;IACb,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,KAAK,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IACvD,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE,KAAK,+BAsD9E"}

package/dist-lib/components/dashboard/QuickAddDialog.js

@@ -0,0 +1,168 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, Tabs, TabsContent, TabsList, TabsTrigger, Button, Card, CardContent, Textarea, toast, } from '@flowselections/core';
+import { AlertTriangle, CalendarDays, ClipboardList, Euro, LayoutDashboard, LineChart, List, Loader2, Package, ShoppingCart, Sparkles, TrendingUp, Trophy, Truck, UserPlus, Users, Wallet, Wand2, ArrowRight, ArrowLeft, BarChart3, MessageSquare, } from 'lucide-react';
+import { useServerFn } from '@tanstack/react-start';
+import { proposeBlockConfig } from '../../lib/ai-insights.functions';
+import { useSchema } from '../../hooks/useSchema';
+import { QUICK_BLOCKS, QUICK_CATEGORIES } from '../../lib/quickBlocks';
+const ICONS = {
+    AlertTriangle, CalendarDays, ClipboardList, Euro, LayoutDashboard, LineChart,
+    List, Package, ShoppingCart, Sparkles, TrendingUp, Trophy, Truck, UserPlus,
+    Users, Wallet, Wand2, BarChart3, MessageSquare,
+};
+function Icon({ name, className }) {
+    const C = ICONS[name] ?? Sparkles;
+    return _jsx(C, { className: className });
+}
+export function QuickAddDialog({ open, onOpenChange, onAdd, onAdvanced }) {
+    const [tab, setTab] = useState('kant');
+    async function addQuickBlock(q) {
+        await onAdd({ type: q.type, title: q.title, config: q.config });
+        toast.success(`"${q.label}" toegevoegd`);
+        onOpenChange(false);
+    }
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "max-w-4xl max-h-[85vh] overflow-y-auto", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { className: "text-2xl", children: "Wat wil je weten?" }), _jsx(DialogDescription, { children: "Kies een kant-en-klaar blok, beantwoord een paar vragen, of vraag het de AI." })] }), _jsxs(Tabs, { value: tab, onValueChange: (v) => setTab(v), className: "w-full", children: [_jsxs(TabsList, { className: "grid w-full grid-cols-3", children: [_jsxs(TabsTrigger, { value: "kant", children: [_jsx(Sparkles, { className: "w-4 h-4 mr-2" }), "Kant-en-klaar"] }), _jsxs(TabsTrigger, { value: "wizard", children: [_jsx(Wand2, { className: "w-4 h-4 mr-2" }), "Stap voor stap"] }), _jsxs(TabsTrigger, { value: "ai", children: [_jsx(MessageSquare, { className: "w-4 h-4 mr-2" }), "Vraag het de AI"] })] }), _jsx(TabsContent, { value: "kant", className: "mt-4", children: _jsx(KantEnKlaarTab, { onPick: addQuickBlock }) }), _jsx(TabsContent, { value: "wizard", className: "mt-4", children: _jsx(WizardTab, { onFinish: async (q) => { await addQuickBlock(q); } }) }), _jsx(TabsContent, { value: "ai", className: "mt-4", children: _jsx(AiTab, { onAdd: async (sub) => { await onAdd(sub); onOpenChange(false); } }) })] }), onAdvanced && (_jsxs("div", { className: "pt-3 border-t mt-2 text-xs text-muted-foreground flex items-center justify-between", children: [_jsx("span", { children: "Liever zelf alles instellen?" }), _jsxs(Button, { variant: "ghost", size: "sm", onClick: () => { onOpenChange(false); onAdvanced(); }, children: ["Geavanceerd ", _jsx(ArrowRight, { className: "w-3.5 h-3.5 ml-1" })] })] }))] }) }));
+}
+// ------------------------- Tab 1: Kant-en-klaar -------------------------
+function KantEnKlaarTab({ onPick }) {
+    const [cat, setCat] = useState('verkoop');
+    const items = QUICK_BLOCKS.filter((b) => b.category === cat);
+    return (_jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "flex flex-wrap gap-2", children: QUICK_CATEGORIES.map((c) => (_jsxs(Button, { size: "sm", variant: cat === c.id ? 'default' : 'outline', onClick: () => setCat(c.id), children: [_jsx(Icon, { name: c.icon, className: "w-4 h-4 mr-2" }), c.label] }, c.id))) }), _jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3", children: items.map((q) => (_jsx(Card, { className: "cursor-pointer hover:border-primary hover:shadow-md transition group", onClick: () => onPick(q), children: _jsx(CardContent, { className: "p-4", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "rounded-md bg-primary/10 p-2 text-primary group-hover:bg-primary group-hover:text-primary-foreground transition", children: _jsx(Icon, { name: q.icon, className: "w-5 h-5" }) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "font-medium text-sm", children: q.label }), _jsx("div", { className: "text-xs text-muted-foreground mt-0.5 line-clamp-2", children: q.description })] })] }) }) }, q.id))) })] }));
+}
+const TOPICS = [
+    { id: 'omzet', label: 'Omzet', icon: 'Euro', description: 'Verkoopopbrengsten' },
+    { id: 'orders', label: 'Orders', icon: 'ShoppingCart', description: 'Verkooporders' },
+    { id: 'voorraad', label: 'Voorraad', icon: 'Package', description: 'Producten op voorraad' },
+    { id: 'klanten', label: 'Klanten', icon: 'Users', description: 'Klantgegevens' },
+    { id: 'inkoop', label: 'Inkoop', icon: 'Truck', description: 'Inkooporders en leveranciers' },
+];
+const PERIODS = [
+    { id: 'today', label: 'Vandaag', days: 1 },
+    { id: 'week', label: 'Deze week', days: 7 },
+    { id: 'month', label: 'Deze maand', days: 30 },
+    { id: 'year', label: 'Dit jaar', days: 365 },
+    { id: 'all', label: 'Alle tijd', days: 0 },
+];
+const VIEWS = [
+    { id: 'kpi', label: 'Groot cijfer', icon: 'BarChart3', description: 'Eén belangrijk getal' },
+    { id: 'chart', label: 'Grafiek', icon: 'TrendingUp', description: 'Lijn- of staafgrafiek' },
+    { id: 'table', label: 'Tabel', icon: 'List', description: 'Overzichtelijke lijst' },
+    { id: 'ai_analysis', label: 'AI-inzicht', icon: 'Sparkles', description: 'AI vat de data samen' },
+    { id: 'forecast', label: 'Voorspelling', icon: 'LineChart', description: 'AI-prognose' },
+];
+function WizardTab({ onFinish }) {
+    const [step, setStep] = useState(1);
+    const [topic, setTopic] = useState(null);
+    const [period, setPeriod] = useState(null);
+    const [view, setView] = useState(null);
+    const preview = useMemo(() => {
+        if (!topic || !period || !view)
+            return null;
+        return buildWizardBlock(topic, period, view);
+    }, [topic, period, view]);
+    function reset() { setStep(1); setTopic(null); setPeriod(null); setView(null); }
+    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [_jsx("span", { className: step >= 1 ? 'text-primary font-medium' : '', children: "1. Onderwerp" }), _jsx(ArrowRight, { className: "w-3 h-3" }), _jsx("span", { className: step >= 2 ? 'text-primary font-medium' : '', children: "2. Periode" }), _jsx(ArrowRight, { className: "w-3 h-3" }), _jsx("span", { className: step >= 3 ? 'text-primary font-medium' : '', children: "3. Weergave" }), _jsx(ArrowRight, { className: "w-3 h-3" }), _jsx("span", { className: step >= 4 ? 'text-primary font-medium' : '', children: "4. Klaar" })] }), step === 1 && (_jsx(StepGrid, { title: "Wat wil je weten?", items: TOPICS, selected: topic, onPick: (id) => { setTopic(id); setStep(2); } })), step === 2 && (_jsx(StepGrid, { title: "Over welke periode?", items: PERIODS.map((p) => ({ ...p, icon: 'CalendarDays', description: '' })), selected: period, onPick: (id) => { setPeriod(id); setStep(3); } })), step === 3 && (_jsx(StepGrid, { title: "Hoe wil je dit zien?", items: VIEWS, selected: view, onPick: (id) => { setView(id); setStep(4); } })), step === 4 && preview && (_jsxs("div", { className: "space-y-3", children: [_jsx("div", { className: "text-sm font-medium", children: "Klaar om toe te voegen:" }), _jsx(Card, { children: _jsxs(CardContent, { className: "p-4 flex items-start gap-3", children: [_jsx("div", { className: "rounded-md bg-primary/10 p-2 text-primary", children: _jsx(Icon, { name: preview.icon, className: "w-5 h-5" }) }), _jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "font-medium", children: preview.label }), _jsx("div", { className: "text-xs text-muted-foreground mt-0.5", children: preview.description })] })] }) }), _jsx(Button, { className: "w-full", onClick: async () => { await onFinish(preview); reset(); }, children: "Toevoegen aan dashboard" })] })), _jsxs("div", { className: "flex justify-between pt-2 border-t", children: [_jsxs(Button, { variant: "ghost", size: "sm", onClick: () => setStep(Math.max(1, step - 1)), disabled: step === 1, children: [_jsx(ArrowLeft, { className: "w-4 h-4 mr-1" }), " Terug"] }), _jsx(Button, { variant: "ghost", size: "sm", onClick: reset, children: "Opnieuw beginnen" })] })] }));
+}
+function StepGrid({ title, items, selected, onPick, }) {
+    return (_jsxs("div", { className: "space-y-3", children: [_jsx("div", { className: "text-base font-medium", children: title }), _jsx("div", { className: "grid grid-cols-2 md:grid-cols-3 gap-3", children: items.map((it) => (_jsx(Card, { className: `cursor-pointer hover:border-primary hover:shadow-md transition ${selected === it.id ? 'border-primary ring-2 ring-primary/30' : ''}`, onClick: () => onPick(it.id), children: _jsxs(CardContent, { className: "p-4 flex flex-col items-center text-center gap-2", children: [_jsx("div", { className: "rounded-md bg-primary/10 p-3 text-primary", children: _jsx(Icon, { name: it.icon, className: "w-6 h-6" }) }), _jsx("div", { className: "font-medium text-sm", children: it.label }), it.description && _jsx("div", { className: "text-xs text-muted-foreground line-clamp-2", children: it.description })] }) }, it.id))) })] }));
+}
+function buildWizardBlock(topic, period, view) {
+    const days = PERIODS.find((p) => p.id === period)?.days ?? 0;
+    const periodLabel = PERIODS.find((p) => p.id === period)?.label ?? '';
+    // Mapping topic -> tabel + zinvolle kolommen
+    const map = {
+        omzet: { table: 'order_items', valueColumn: 'unit_price', xColumn: 'created_at', format: 'currency', orderColumns: ['product_name', 'quantity', 'unit_price', 'created_at'], dateColumn: 'created_at' },
+        orders: { table: 'orders', xColumn: 'created_at', orderColumns: ['order_number', 'customer_name', 'status', 'created_at'], dateColumn: 'created_at' },
+        voorraad: { table: 'products', xColumn: 'created_at', orderColumns: ['product', 'quantity', 'sale_price', 'location'], dateColumn: 'created_at' },
+        klanten: { table: 'customers', xColumn: 'created_at', orderColumns: ['company_name', 'city', 'email', 'phone'], dateColumn: 'created_at' },
+        inkoop: { table: 'purchase_orders', xColumn: 'created_at', orderColumns: ['order_number', 'supplier_name', 'status', 'expected_delivery_date'], dateColumn: 'created_at' },
+    };
+    const m = map[topic];
+    const dateFilter = days > 0 ? { column: m.dateColumn, days } : null;
+    const topicLabel = TOPICS.find((t) => t.id === topic)?.label ?? topic;
+    const baseTitle = days > 0 ? `${topicLabel} — ${periodLabel}` : topicLabel;
+    if (view === 'kpi') {
+        const config = m.valueColumn
+            ? { table: m.table, agg: 'sum', column: m.valueColumn, format: m.format ?? 'number', dateFilter }
+            : { table: m.table, agg: 'count', format: 'number', dateFilter };
+        return {
+            id: `wiz-${topic}-${period}-kpi`, category: 'verkoop', icon: 'BarChart3',
+            label: baseTitle, description: 'Eén belangrijk getal',
+            type: 'kpi', title: baseTitle, config,
+        };
+    }
+    if (view === 'chart') {
+        const config = {
+            kind: 'area', table: m.table, xColumn: m.xColumn ?? 'created_at',
+            yColumn: m.valueColumn ?? 'id', agg: m.valueColumn ? 'sum' : 'count',
+            limit: 2000, dateFilter,
+        };
+        return { id: `wiz-${topic}-${period}-chart`, category: 'verkoop', icon: 'TrendingUp',
+            label: `${baseTitle} (grafiek)`, description: 'Verloop over tijd',
+            type: 'chart', title: baseTitle, config };
+    }
+    if (view === 'table') {
+        const config = {
+            table: m.table, columns: m.orderColumns ?? [],
+            orderBy: m.dateColumn, orderDir: 'desc', limit: 25, dateFilter,
+        };
+        return { id: `wiz-${topic}-${period}-table`, category: 'verkoop', icon: 'List',
+            label: `${baseTitle} (lijst)`, description: 'Overzichtelijke tabel',
+            type: 'table', title: baseTitle, config };
+    }
+    if (view === 'ai_analysis') {
+        const config = {
+            table: m.table, columns: [], limit: 100,
+            question: `Wat valt op aan ${topicLabel.toLowerCase()} ${periodLabel.toLowerCase()}? Welke trends en uitschieters zie je?`,
+        };
+        return { id: `wiz-${topic}-${period}-ai`, category: 'verkoop', icon: 'Sparkles',
+            label: `AI-inzicht: ${baseTitle}`, description: 'AI vat de data voor je samen',
+            type: 'ai_analysis', title: `AI-inzicht: ${baseTitle}`, config };
+    }
+    // forecast
+    const config = {
+        table: m.table, xColumn: m.xColumn ?? 'created_at',
+        yColumn: m.valueColumn ?? 'id', agg: m.valueColumn ? 'sum' : 'count',
+        horizon: 6, history: 200,
+    };
+    return { id: `wiz-${topic}-${period}-forecast`, category: 'verkoop', icon: 'LineChart',
+        label: `Voorspelling: ${topicLabel}`, description: 'AI-prognose voor de komende periode',
+        type: 'forecast', title: `Voorspelling: ${topicLabel}`, config };
+}
+// ------------------------- Tab 3: AI -------------------------
+function AiTab({ onAdd }) {
+    const [prompt, setPrompt] = useState('');
+    const [busy, setBusy] = useState(false);
+    const [proposal, setProposal] = useState(null);
+    const propose = useServerFn(proposeBlockConfig);
+    const { tables } = useSchema();
+    async function ask() {
+        if (!prompt.trim())
+            return;
+        setBusy(true);
+        setProposal(null);
+        try {
+            const res = await propose({ data: { prompt, schema: tables } });
+            if (!res?.proposal) {
+                toast.error(res?.note || 'Geen voorstel');
+                return;
+            }
+            const p = res.proposal;
+            setProposal({ type: p.type, title: p.title, config: p.config });
+        }
+        catch (e) {
+            toast.error('Fout: ' + (e?.message ?? 'onbekend'));
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    const examples = [
+        'Laat mijn omzet van deze maand zien',
+        'Welke producten verkopen het best?',
+        'Welke producten zijn bijna uitverkocht?',
+        'Maak een voorspelling van de omzet',
+    ];
+    return (_jsxs("div", { className: "space-y-3", children: [_jsx("div", { className: "text-sm text-muted-foreground", children: "Beschrijf in eigen woorden wat je wilt zien. De AI maakt het juiste blok voor je." }), _jsx(Textarea, { value: prompt, onChange: (e) => setPrompt(e.target.value), placeholder: "bijv. Laat mijn omzet van deze maand zien", rows: 3 }), _jsx("div", { className: "flex flex-wrap gap-2", children: examples.map((ex) => (_jsx(Button, { size: "sm", variant: "outline", onClick: () => setPrompt(ex), children: ex }, ex))) }), _jsx("div", { className: "flex justify-end", children: _jsxs(Button, { onClick: ask, disabled: busy || !prompt.trim(), children: [busy ? _jsx(Loader2, { className: "w-4 h-4 mr-2 animate-spin" }) : _jsx(Sparkles, { className: "w-4 h-4 mr-2" }), "Voorstel maken"] }) }), proposal && (_jsx(Card, { className: "border-primary/40", children: _jsxs(CardContent, { className: "p-4 space-y-3", children: [_jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "rounded-md bg-primary/10 p-2 text-primary", children: _jsx(Sparkles, { className: "w-5 h-5" }) }), _jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "text-xs uppercase tracking-wide text-muted-foreground", children: "Voorstel" }), _jsx("div", { className: "font-medium", children: proposal.title }), _jsxs("div", { className: "text-xs text-muted-foreground mt-1", children: ["Type: ", proposal.type] })] })] }), _jsx(Button, { className: "w-full", onClick: async () => { await onAdd(proposal); }, children: "Toevoegen aan dashboard" })] }) }))] }));
+}

package/dist-lib/components/dashboard/SuggestionBanner.d.ts

@@ -0,0 +1,15 @@
+import type { BlockRow } from './types';
+interface Props {
+    block: BlockRow;
+    onAdd: (input: {
+        type: BlockRow['type'];
+        title: string;
+        config: BlockRow['config'];
+    }) => Promise<void> | void;
+}
+/**
+ * Toont 2-3 slimme vervolg-voorstellen onder een blok in bewerk-modus.
+ */
+export declare function SuggestionBanner({ block, onAdd }: Props): import("react").JSX.Element | null;
+export {};
+//# sourceMappingURL=SuggestionBanner.d.ts.map

package/dist-lib/components/dashboard/SuggestionBanner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SuggestionBanner.d.ts","sourceRoot":"","sources":["../../../src/components/dashboard/SuggestionBanner.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAExC,UAAU,KAAK;IACb,KAAK,EAAE,QAAQ,CAAC;IAChB,KAAK,EAAE,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAA;KAAE,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;CAC/G;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,KAAK,sCA0BvD"}

package/dist-lib/components/dashboard/SuggestionBanner.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Card, CardContent } from '@flowselections/core';
+import { Sparkles, Plus } from 'lucide-react';
+import { getSuggestions } from '../../lib/suggestions';
+/**
+ * Toont 2-3 slimme vervolg-voorstellen onder een blok in bewerk-modus.
+ */
+export function SuggestionBanner({ block, onAdd }) {
+    const suggestions = getSuggestions(block);
+    if (suggestions.length === 0)
+        return null;
+    return (_jsx(Card, { className: "mt-2 border-dashed border-primary/30 bg-primary/5", children: _jsxs(CardContent, { className: "p-2 flex items-center gap-2 flex-wrap", children: [_jsxs("div", { className: "flex items-center gap-1.5 text-xs text-primary font-medium pl-1", children: [_jsx(Sparkles, { className: "w-3.5 h-3.5" }), "Wil je ook?"] }), suggestions.map((s) => (_jsxs(Button, { size: "sm", variant: "outline", className: "h-7 text-xs", onClick: () => onAdd({ type: s.type, title: s.title, config: s.config }), children: [_jsx(Plus, { className: "w-3 h-3 mr-1" }), s.label] }, s.id)))] }) }));
+}

package/dist-lib/components/dashboard/TileGallery.d.ts

@@ -0,0 +1,17 @@
+import type { BlockType, AnyBlockConfig } from './types';
+interface Props {
+    onAdd: (input: {
+        type: BlockType;
+        title: string;
+        config: AnyBlockConfig;
+    }) => Promise<void> | void;
+}
+/**
+ * Galerij van kant-en-klare tegels. Wordt bovenaan de builder getoond zodat
+ * de gebruiker direct ziet wat hij kan toevoegen — één klik = tegel toevoegen.
+ * Bevat ook sjablonen (meerdere tegels in één klik) en de eigen bibliotheek met
+ * opgeslagen blokken.
+ */
+export declare function TileGallery({ onAdd }: Props): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=TileGallery.d.ts.map

package/dist-lib/components/dashboard/TileGallery.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TileGallery.d.ts","sourceRoot":"","sources":["../../../src/components/dashboard/TileGallery.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAuBzD,UAAU,KAAK;IACb,KAAK,EAAE,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,SAAS,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,cAAc,CAAA;KAAE,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;CACpG;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,EAAE,KAAK,+BAwK3C"}

package/dist-lib/components/dashboard/TileGallery.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Button, Card, CardContent, Badge, supabase, toast } from '@flowselections/core';
+import { AlertTriangle, CalendarDays, ClipboardList, Euro, LineChart, List, Package, Plus, ShoppingCart, Sparkles, TrendingUp, Trophy, Truck, UserPlus, Users, Wallet, Boxes, Calculator, Globe, Mail, MapPin, PieChart, TrendingDown, UserCheck, UserMinus, LayoutTemplate, LayoutDashboard, } from 'lucide-react';
+import { QUICK_BLOCKS, QUICK_CATEGORIES } from '../../lib/quickBlocks';
+import { DASHBOARD_TEMPLATES, getTemplateBlocks } from '../../lib/dashboardTemplates';
+const ICONS = {
+    AlertTriangle, CalendarDays, ClipboardList, Euro, LineChart, List, Package,
+    ShoppingCart, Sparkles, TrendingUp, Trophy, Truck, UserPlus, Users, Wallet,
+    Boxes, Calculator, Globe, Mail, MapPin, PieChart, TrendingDown, UserCheck, UserMinus,
+    LayoutTemplate, LayoutDashboard,
+};
+function Icon({ name, className }) {
+    const C = ICONS[name] ?? Sparkles;
+    return _jsx(C, { className: className });
+}
+/**
+ * Galerij van kant-en-klare tegels. Wordt bovenaan de builder getoond zodat
+ * de gebruiker direct ziet wat hij kan toevoegen — één klik = tegel toevoegen.
+ * Bevat ook sjablonen (meerdere tegels in één klik) en de eigen bibliotheek met
+ * opgeslagen blokken.
+ */
+export function TileGallery({ onAdd }) {
+    const [cat, setCat] = useState('verkoop');
+    const [open, setOpen] = useState(true);
+    const [customTemplates, setCustomTemplates] = useState([]);
+    const [bulkBusy, setBulkBusy] = useState(null);
+    useEffect(() => {
+        (async () => {
+            const { data } = await supabase
+                .from('dashboard_block_templates')
+                .select('id,name,description,type,config')
+                .order('name', { ascending: true });
+            setCustomTemplates(Array.isArray(data) ? data : []);
+        })();
+    }, []);
+    const items = cat !== '__templates' && cat !== '__library'
+        ? QUICK_BLOCKS.filter((b) => b.category === cat)
+        : [];
+    async function pick(q) {
+        await onAdd({ type: q.type, title: q.title, config: q.config });
+    }
+    async function applyTemplate(templateId, templateName) {
+        setBulkBusy(templateId);
+        try {
+            const blocks = getTemplateBlocks(templateId);
+            for (const b of blocks) {
+                await onAdd({ type: b.type, title: b.title, config: b.config });
+            }
+            toast.success(`Sjabloon "${templateName}" toegevoegd (${blocks.length} tegels)`);
+        }
+        catch (e) {
+            toast.error('Sjabloon toevoegen mislukt: ' + (e?.message ?? 'onbekend'));
+        }
+        finally {
+            setBulkBusy(null);
+        }
+    }
+    return (_jsx(Card, { className: "mb-4 border-dashed", children: _jsxs(CardContent, { className: "p-4 space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Sparkles, { className: "w-4 h-4 text-primary" }), _jsx("div", { className: "font-medium text-sm", children: "Kant-en-klare tegels" }), _jsx("div", { className: "text-xs text-muted-foreground hidden sm:block", children: "\u2014 klik om toe te voegen" })] }), _jsx(Button, { size: "sm", variant: "ghost", onClick: () => setOpen((v) => !v), children: open ? 'Verbergen' : 'Tonen' })] }), open && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsxs(Button, { size: "sm", variant: cat === '__templates' ? 'default' : 'outline', onClick: () => setCat('__templates'), children: [_jsx(LayoutTemplate, { className: "w-4 h-4 mr-2" }), "Sjablonen"] }), _jsxs(Button, { size: "sm", variant: cat === '__library' ? 'default' : 'outline', onClick: () => setCat('__library'), children: [_jsx(LayoutDashboard, { className: "w-4 h-4 mr-2" }), "Mijn bibliotheek"] }), QUICK_CATEGORIES.map((c) => (_jsxs(Button, { size: "sm", variant: cat === c.id ? 'default' : 'outline', onClick: () => setCat(c.id), children: [_jsx(Icon, { name: c.icon, className: "w-4 h-4 mr-2" }), c.label] }, c.id)))] }), cat === '__templates' && (_jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2", children: DASHBOARD_TEMPLATES.map((t) => (_jsxs("button", { type: "button", disabled: bulkBusy === t.id, onClick: () => applyTemplate(t.id, t.name), className: "group text-left rounded-lg border bg-card hover:border-primary hover:shadow-md transition p-3 flex items-start gap-3 disabled:opacity-50", children: [_jsx("div", { className: "rounded-md bg-primary/10 p-2 text-primary group-hover:bg-primary group-hover:text-primary-foreground transition shrink-0", children: _jsx(Icon, { name: t.icon, className: "w-4 h-4" }) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "font-medium text-sm truncate", children: t.name }), _jsx("div", { className: "text-xs text-muted-foreground line-clamp-2", children: t.description }), _jsxs("div", { className: "text-xs text-muted-foreground mt-1", children: [t.blockIds.length, " tegels"] })] }), _jsx(Plus, { className: "w-4 h-4 text-muted-foreground group-hover:text-primary shrink-0" })] }, t.id))) })), cat === '__library' && (customTemplates.length === 0 ? (_jsx("div", { className: "text-sm text-muted-foreground p-4 text-center border rounded-lg", children: "Nog geen eigen blokken opgeslagen. Sla een blok op als template om hem hier terug te zien." })) : (_jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2", children: customTemplates.map((t) => (_jsxs("button", { type: "button", onClick: () => onAdd({ type: t.type, title: t.name, config: t.config }), className: "group text-left rounded-lg border bg-card hover:border-primary hover:shadow-md transition p-3 flex items-start gap-3", children: [_jsx("div", { className: "rounded-md bg-primary/10 p-2 text-primary group-hover:bg-primary group-hover:text-primary-foreground transition shrink-0", children: _jsx(LayoutDashboard, { className: "w-4 h-4" }) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "font-medium text-sm truncate", children: t.name }), _jsx(Badge, { variant: "outline", className: "text-[10px]", children: t.type })] }), _jsx("div", { className: "text-xs text-muted-foreground line-clamp-2", children: t.description ?? `Template voor ${t.config?.table ?? 'data'}` })] }), _jsx(Plus, { className: "w-4 h-4 text-muted-foreground group-hover:text-primary shrink-0" })] }, t.id))) }))), cat !== '__templates' && cat !== '__library' && (_jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2", children: items.map((q) => (_jsxs("button", { type: "button", onClick: () => pick(q), className: "group text-left rounded-lg border bg-card hover:border-primary hover:shadow-md transition p-3 flex items-start gap-3", children: [_jsx("div", { className: "rounded-md bg-primary/10 p-2 text-primary group-hover:bg-primary group-hover:text-primary-foreground transition shrink-0", children: _jsx(Icon, { name: q.icon, className: "w-4 h-4" }) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "font-medium text-sm truncate", children: q.label }), _jsx("div", { className: "text-xs text-muted-foreground line-clamp-2", children: q.description })] }), _jsx(Plus, { className: "w-4 h-4 text-muted-foreground group-hover:text-primary shrink-0" })] }, q.id))) }))] }))] }) }));
+}

package/dist-lib/components/dashboard/ai/AiChatPanel.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    pageId: string | null;
+}
+export declare function AiChatPanel({ pageId }: Props): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=AiChatPanel.d.ts.map

package/dist-lib/components/dashboard/ai/AiChatPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AiChatPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/dashboard/ai/AiChatPanel.tsx"],"names":[],"mappings":"AAQA,UAAU,KAAK;IACb,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB;AAED,wBAAgB,WAAW,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK,+BA8E5C"}

package/dist-lib/components/dashboard/ai/AiChatPanel.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useChat } from '@ai-sdk/react';
+import { DefaultChatTransport } from 'ai';
+import { Button, Input, toast } from '@flowselections/core';
+import { Sparkles, X, Send, Plus, Loader2 } from 'lucide-react';
+import { useDashboardBlocks } from '../../../hooks/useDashboardBlocks';
+export function AiChatPanel({ pageId }) {
+    const [open, setOpen] = useState(false);
+    const [input, setInput] = useState('');
+    const { create } = useDashboardBlocks(pageId);
+    const transport = new DefaultChatTransport({ api: '/api/chat' });
+    const { messages, sendMessage, status } = useChat({
+        transport,
+        onError: (e) => toast.error('AI fout: ' + e.message),
+    });
+    const busy = status === 'submitted' || status === 'streaming';
+    async function handleSend() {
+        const text = input.trim();
+        if (!text || busy)
+            return;
+        setInput('');
+        await sendMessage({ text });
+    }
+    async function addProposalAsBlock(p) {
+        if (!pageId) {
+            toast.error('Open eerst een dashboardpagina');
+            return;
+        }
+        const block = await create({ type: p.type, title: p.title, config: p.config });
+        if (block)
+            toast.success('Blok toegevoegd');
+    }
+    return (_jsxs(_Fragment, { children: [!open && (_jsx(Button, { onClick: () => setOpen(true), className: "fixed bottom-6 right-6 shadow-lg rounded-full h-14 w-14 p-0 z-50", "aria-label": "AI Assistent", children: _jsx(Sparkles, { className: "w-6 h-6" }) })), open && (_jsxs("div", { className: "fixed bottom-6 right-6 w-[420px] h-[600px] bg-background border rounded-xl shadow-2xl flex flex-col z-50", children: [_jsxs("div", { className: "flex items-center justify-between border-b px-4 py-3", children: [_jsxs("div", { className: "flex items-center gap-2 font-medium", children: [_jsx(Sparkles, { className: "w-4 h-4 text-primary" }), " Dashboard AI"] }), _jsx(Button, { size: "icon", variant: "ghost", onClick: () => setOpen(false), children: _jsx(X, { className: "w-4 h-4" }) })] }), _jsxs("div", { className: "flex-1 overflow-auto px-4 py-3 space-y-3", children: [messages.length === 0 && (_jsxs("div", { className: "text-sm text-muted-foreground", children: ["Vraag bijvoorbeeld: ", _jsx("em", { children: "\"Maak een KPI met het aantal openstaande orders\"" }), " of", _jsx("em", { children: " \"Toon een grafiek van de verkoop per maand\"" }), "."] })), messages.map((m) => (_jsx(MessageView, { m: m, onAdd: addProposalAsBlock }, m.id))), busy && _jsx(Loader2, { className: "w-4 h-4 animate-spin text-muted-foreground" })] }), _jsxs("div", { className: "border-t p-3 flex gap-2", children: [_jsx(Input, { value: input, onChange: (e) => setInput(e.target.value), onKeyDown: (e) => { if (e.key === 'Enter' && !e.shiftKey) {
+                                    e.preventDefault();
+                                    handleSend();
+                                } }, placeholder: "Stel een vraag of beschrijf een blok\u2026", disabled: busy }), _jsx(Button, { onClick: handleSend, disabled: busy || !input.trim(), size: "icon", children: _jsx(Send, { className: "w-4 h-4" }) })] })] }))] }));
+}
+function MessageView({ m, onAdd }) {
+    const isUser = m.role === 'user';
+    return (_jsx("div", { className: `flex ${isUser ? 'justify-end' : 'justify-start'}`, children: _jsx("div", { className: `max-w-[85%] rounded-lg px-3 py-2 text-sm ${isUser ? 'bg-primary text-primary-foreground' : 'bg-muted'}`, children: m.parts.map((part, i) => {
+                if (part.type === 'text')
+                    return _jsx("div", { className: "whitespace-pre-wrap", children: part.text }, i);
+                if (typeof part.type === 'string' && part.type.startsWith('tool-')) {
+                    const name = part.type.replace(/^tool-/, '');
+                    const state = part.state;
+                    if (name === 'propose_block' && (state === 'output-available' || state === 'result')) {
+                        const proposal = part.output?.proposal ?? part.result?.proposal;
+                        if (proposal) {
+                            return (_jsxs("div", { className: "mt-2 p-2 border rounded bg-background text-foreground", children: [_jsx("div", { className: "text-xs text-muted-foreground mb-1", children: "Voorgesteld blok" }), _jsx("div", { className: "font-medium text-sm", children: proposal.title }), _jsx("div", { className: "text-xs text-muted-foreground capitalize", children: proposal.type }), _jsxs(Button, { size: "sm", className: "mt-2", onClick: () => onAdd(proposal), children: [_jsx(Plus, { className: "w-3.5 h-3.5 mr-1" }), " Toevoegen"] })] }, i));
+                        }
+                    }
+                    return (_jsxs("div", { className: "text-xs text-muted-foreground italic mt-1", children: [state === 'output-available' || state === 'result' ? '✓' : '⋯', " ", name] }, i));
+                }
+                return null;
+            }) }) }));
+}

package/dist-lib/components/dashboard/ai/BlockGeneratorDialog.d.ts

@@ -0,0 +1,14 @@
+import type { AnyBlockConfig, BlockType, BlockPermissions } from '../types';
+interface Props {
+    open: boolean;
+    onOpenChange: (v: boolean) => void;
+    onSave: (input: {
+        type: BlockType;
+        title: string;
+        config: AnyBlockConfig;
+        permissions: BlockPermissions;
+    }) => void | Promise<void>;
+}
+export declare function BlockGeneratorDialog({ open, onOpenChange, onSave }: Props): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=BlockGeneratorDialog.d.ts.map

package/dist-lib/components/dashboard/ai/BlockGeneratorDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockGeneratorDialog.d.ts","sourceRoot":"","sources":["../../../../src/components/dashboard/ai/BlockGeneratorDialog.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAY,cAAc,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAEtF,UAAU,KAAK;IACb,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,MAAM,EAAE,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,SAAS,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,cAAc,CAAC;QAAC,WAAW,EAAE,gBAAgB,CAAA;KAAE,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACpI;AAED,wBAAgB,oBAAoB,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,EAAE,EAAE,KAAK,+BAgFzE"}

package/dist-lib/components/dashboard/ai/BlockGeneratorDialog.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, Button, Textarea, toast, } from '@flowselections/core';
+import { Sparkles, Loader2 } from 'lucide-react';
+import { useServerFn } from '@tanstack/react-start';
+import { useSchema } from '../../../hooks/useSchema';
+import { proposeBlockConfig } from '../../../lib/ai-insights.functions';
+import { BlockRenderer } from '../BlockRenderer';
+export function BlockGeneratorDialog({ open, onOpenChange, onSave }) {
+    const { tables } = useSchema();
+    const propose = useServerFn(proposeBlockConfig);
+    const [prompt, setPrompt] = useState('');
+    const [busy, setBusy] = useState(false);
+    const [preview, setPreview] = useState(null);
+    async function generate() {
+        if (!prompt.trim())
+            return;
+        setBusy(true);
+        setPreview(null);
+        try {
+            const res = await propose({ data: { prompt, schema: tables } });
+            if (!res.proposal) {
+                toast.error(res.note || 'Geen voorstel');
+                return;
+            }
+            const p = res.proposal;
+            setPreview({
+                id: 'preview',
+                page_id: 'preview',
+                type: p.type ?? 'kpi',
+                title: p.title ?? 'Nieuw blok',
+                layout: { x: 0, y: 0, w: 6, h: 4 },
+                config: p.config ?? {},
+                filters: null,
+                permissions: { can_view_ai: true, can_edit: true },
+                created_at: new Date().toISOString(),
+                updated_at: new Date().toISOString(),
+            });
+        }
+        catch (e) {
+            toast.error('Fout: ' + (e?.message ?? ''));
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    async function handleSave() {
+        if (!preview)
+            return;
+        await onSave({
+            type: preview.type,
+            title: preview.title ?? '',
+            config: preview.config,
+            permissions: preview.permissions ?? { can_view_ai: true, can_edit: true },
+        });
+        setPreview(null);
+        setPrompt('');
+        onOpenChange(false);
+    }
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "max-w-4xl", children: [_jsx(DialogHeader, { children: _jsxs(DialogTitle, { className: "flex items-center gap-2", children: [_jsx(Sparkles, { className: "w-4 h-4 text-primary" }), " Blok genereren met AI"] }) }), _jsxs("div", { className: "space-y-3", children: [_jsx(Textarea, { value: prompt, onChange: (e) => setPrompt(e.target.value), placeholder: "bijv. Laat een staafgrafiek zien van omzet per maand uit tabel orders", rows: 3 }), _jsx("div", { className: "flex justify-end", children: _jsxs(Button, { onClick: generate, disabled: busy || !prompt.trim(), children: [busy ? _jsx(Loader2, { className: "w-4 h-4 mr-2 animate-spin" }) : _jsx(Sparkles, { className: "w-4 h-4 mr-2" }), "Voorstel maken"] }) }), preview && (_jsx("div", { className: "border rounded-lg p-2 bg-muted/20", style: { height: 320 }, children: _jsx(BlockRenderer, { block: preview }) }))] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), children: "Sluiten" }), _jsx(Button, { onClick: handleSave, disabled: !preview, children: "Opslaan als blok" })] })] }) }));
+}

package/dist-lib/components/dashboard/blocks/AiAnalysisBlock.d.ts

@@ -0,0 +1,5 @@
+import type { BlockRow } from '../types';
+export declare function AiAnalysisBlock({ block }: {
+    block: BlockRow;
+}): import("react").JSX.Element;
+//# sourceMappingURL=AiAnalysisBlock.d.ts.map