@flowselections/floriday-authenticatie-module 1.0.16 → 1.0.18

package/dist-lib/components/floriday/FlorydayConnectionPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FlorydayConnectionPage.d.ts","sourceRoot":"","sources":["../../../src/components/floriday/FlorydayConnectionPage.tsx"],"names":[],"mappings":"AAEA,wBAAgB,sBAAsB,4CAYrC"}
+{"version":3,"file":"FlorydayConnectionPage.d.ts","sourceRoot":"","sources":["../../../src/components/floriday/FlorydayConnectionPage.tsx"],"names":[],"mappings":"AAGA,wBAAgB,sBAAsB,4CAarC"}

package/dist-lib/components/floriday/FlorydayConnectionPage.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FlorydaySettingsCard } from "../settings/FlorydaySettingsCard";
+import { FloricodeSettingsCard } from "../settings/FloricodeSettingsCard";
 export function FlorydayConnectionPage() {
-    return (_jsxs("main", { className: "p-6 max-w-4xl mx-auto space-y-6", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-bold", children: "Floriday koppeling" }), _jsx("p", { className: "text-sm text-muted-foreground mt-1", children: "Verbind je Floriday-account om automatisch gegevens uit te wisselen met het platform." })] }), _jsx(FlorydaySettingsCard, {})] }));
+    return (_jsxs("main", { className: "p-6 max-w-4xl mx-auto space-y-6", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-bold", children: "Floriday koppeling" }), _jsx("p", { className: "text-sm text-muted-foreground mt-1", children: "Verbind je Floriday-account om automatisch gegevens uit te wisselen met het platform." })] }), _jsx(FlorydaySettingsCard, {}), _jsx(FloricodeSettingsCard, {})] }));
 }

package/dist-lib/components/settings/FloricodeSettingsCard.d.ts

@@ -0,0 +1,2 @@
+export declare function FloricodeSettingsCard(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FloricodeSettingsCard.d.ts.map

package/dist-lib/components/settings/FloricodeSettingsCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloricodeSettingsCard.d.ts","sourceRoot":"","sources":["../../../src/components/settings/FloricodeSettingsCard.tsx"],"names":[],"mappings":"AAuDA,wBAAgB,qBAAqB,4CA4EpC"}

package/dist-lib/components/settings/FloricodeSettingsCard.js

@@ -0,0 +1,235 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { ChevronDown } from "lucide-react";
+import { useServerFn } from "@tanstack/react-start";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { Card, Button, Input, Label, Badge, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, toast, } from "@flowselections/core";
+import { getFloricodeSettings, saveFloricodeCredentials, clearFloricodeCredentials, testFloricodeConnection, getFloricodeSyncStatus, triggerFloricodeResourceSync, resetFloricodeResourceCursor, } from "../../lib/floricode.functions";
+const floricodeLogo = "/flowselections-assets/floriday-authenticatie/floricode-logo.png";
+function formatDate(iso) {
+    if (!iso)
+        return "—";
+    try {
+        return new Date(iso).toLocaleString("nl-NL", { dateStyle: "short", timeStyle: "short" });
+    }
+    catch {
+        return iso;
+    }
+}
+function timeAgo(iso) {
+    if (!iso)
+        return "Nog nooit";
+    const diff = Date.now() - new Date(iso).getTime();
+    if (Number.isNaN(diff))
+        return "—";
+    const min = Math.floor(diff / 60000);
+    if (min < 1)
+        return "Zojuist";
+    if (min < 60)
+        return `${min} min geleden`;
+    const hr = Math.floor(min / 60);
+    if (hr < 24)
+        return `${hr} uur geleden`;
+    const days = Math.floor(hr / 24);
+    return `${days} dag${days === 1 ? "" : "en"} geleden`;
+}
+export function FloricodeSettingsCard() {
+    const [open, setOpen] = useState(false);
+    const getSettings = useServerFn(getFloricodeSettings);
+    const { data: settings } = useQuery({
+        queryKey: ["floricode-settings"],
+        queryFn: () => getSettings(),
+    });
+    const configured = Boolean(settings?.isConfigured);
+    const connected = configured && settings?.lastTokenTestOk !== false;
+    return (_jsxs(Card, { className: "overflow-hidden border-border/60", children: [_jsxs("button", { type: "button", onClick: () => setOpen((o) => !o), className: "w-full flex items-center gap-3 px-5 py-4 text-left hover:bg-muted/40 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset", "aria-expanded": open, children: [_jsx("div", { className: "h-9 w-9 rounded-lg bg-muted/60 flex items-center justify-center shrink-0 overflow-hidden", children: _jsx("img", { src: floricodeLogo, alt: "Floricode", className: "h-6 w-6 object-contain", onError: (e) => {
+                                e.currentTarget.style.display = "none";
+                                const parent = e.currentTarget.parentElement;
+                                if (parent && !parent.querySelector("[data-fallback]")) {
+                                    const span = document.createElement("span");
+                                    span.textContent = "Fc";
+                                    span.dataset.fallback = "1";
+                                    span.className = "text-xs font-semibold text-muted-foreground";
+                                    parent.appendChild(span);
+                                }
+                            } }) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("h3", { className: "font-semibold text-sm truncate", children: "Floricode koppeling" }), _jsxs("div", { className: "flex items-center gap-2 flex-wrap mt-1", children: [_jsx(Badge, { variant: configured ? "default" : "secondary", className: "text-[10px] tracking-wide", children: configured ? "Ingesteld" : "Niet ingesteld" }), _jsx(StatusIndicator, { connected: connected, configured: configured })] }), _jsx("p", { className: "text-xs text-muted-foreground mt-1 truncate", children: "Verbind je Floricode-account om automatisch gegevens uit te wisselen met het platform." })] }), _jsx(ChevronDown, { className: `h-4 w-4 text-muted-foreground shrink-0 transition-transform ${open ? "rotate-180" : ""}` })] }), open && (_jsxs("div", { className: "border-t border-border/60 px-5 py-5 space-y-6 bg-muted/20", children: [_jsx(CredentialsBlock, { settings: settings }), _jsx(TestBlock, { settings: settings }), _jsx(SyncBlock, { configured: configured }), _jsx("div", { className: "pt-2 border-t border-border/60", children: _jsx("a", { href: "https://developer.floricode.com/", target: "_blank", rel: "noopener noreferrer", className: "text-xs text-primary hover:underline inline-flex items-center gap-1", children: "Waar vind ik mijn Floricode-inloggegevens?" }) })] }))] }));
+}
+function StatusIndicator({ connected, configured }) {
+    const label = !configured ? "Nog niet gekoppeld" : connected ? "Verbonden" : "Fout";
+    const color = !configured ? "bg-muted-foreground/40" : connected ? "bg-emerald-500" : "bg-red-500";
+    return (_jsxs("span", { className: "inline-flex items-center gap-1.5 text-xs text-muted-foreground", children: [_jsx("span", { "aria-label": label, className: `h-2 w-2 rounded-full ${color}` }), label] }));
+}
+function StepBlock({ number, title, description, children, }) {
+    return (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "h-6 w-6 rounded-full bg-primary text-primary-foreground text-xs font-semibold flex items-center justify-center shrink-0", children: number }), _jsx("h4", { className: "font-medium text-sm", children: title })] }), description && _jsx("p", { className: "text-xs text-muted-foreground pl-8", children: description }), _jsx("div", { className: "pl-8", children: children })] }));
+}
+function CredentialsBlock({ settings }) {
+    const qc = useQueryClient();
+    const saveCreds = useServerFn(saveFloricodeCredentials);
+    const clearCreds = useServerFn(clearFloricodeCredentials);
+    const [clientId, setClientId] = useState("");
+    const [clientSecret, setClientSecret] = useState("");
+    const configured = Boolean(settings?.isConfigured);
+    const saveMut = useMutation({
+        mutationFn: () => saveCreds({
+            data: {
+                clientId: clientId || settings?.clientId || "",
+                clientSecret,
+            },
+        }),
+        onSuccess: () => {
+            toast.success("Floricode-inloggegevens opgeslagen");
+            setClientId("");
+            setClientSecret("");
+            qc.invalidateQueries({ queryKey: ["floricode-settings"] });
+        },
+        onError: (e) => toast.error(String(e?.message ?? e)),
+    });
+    const clearMut = useMutation({
+        mutationFn: () => clearCreds(),
+        onSuccess: () => {
+            toast.success("Floricode-koppeling verwijderd");
+            qc.invalidateQueries({ queryKey: ["floricode-settings"] });
+            qc.invalidateQueries({ queryKey: ["floricode-sync-status"] });
+        },
+        onError: (e) => toast.error(String(e?.message ?? e)),
+    });
+    return (_jsx(StepBlock, { number: 1, title: "Vul verbindingsgegevens in", children: _jsxs("div", { className: "rounded-lg border border-border/60 bg-card p-4 space-y-4", children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [_jsx("h4", { className: "font-medium text-sm", children: "Verbindingsgegevens" }), configured ? (_jsx(Badge, { variant: "default", className: "text-[10px]", children: "Actief" })) : (_jsx(Badge, { variant: "secondary", className: "text-[10px]", children: "Nog niet gekoppeld" }))] }), configured && (_jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "sm", disabled: clearMut.isPending, children: "Verwijderen" }) }), _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Koppeling verwijderen?" }), _jsx(AlertDialogDescription, { children: "Hiermee worden de opgeslagen Floricode-inloggegevens permanent verwijderd. Andere koppelingen die hiervan afhankelijk zijn werken daarna niet meer totdat je opnieuw verbinding maakt." })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Annuleren" }), _jsx(AlertDialogAction, { onClick: () => clearMut.mutate(), children: "Verwijderen" })] })] })] }))] }), _jsxs("div", { className: "grid gap-4", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: "floricode-client-id", className: "text-xs", children: "Client ID" }), _jsx(Input, { id: "floricode-client-id", value: clientId, onChange: (e) => setClientId(e.target.value), placeholder: configured ? settings?.clientId ?? "••••••••" : "Floricode Client ID", className: configured ? "font-mono placeholder:font-mono placeholder:text-foreground/60" : undefined, autoComplete: "off" }), _jsx("p", { className: "text-[11px] text-muted-foreground", children: "Te vinden in je Floricode API-instellingen." }), configured && (_jsx("p", { className: "text-[11px] text-muted-foreground", children: "Laat leeg als je deze waarde niet wilt wijzigen." }))] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: "floricode-client-secret", className: "text-xs", children: "Client Secret" }), _jsx(Input, { id: "floricode-client-secret", type: "password", value: clientSecret, onChange: (e) => setClientSecret(e.target.value), placeholder: configured
+                                        ? settings?.secretLast4
+                                            ? `••••••••${settings.secretLast4}`
+                                            : "••••••••"
+                                        : "Floricode Client Secret", className: configured ? "placeholder:text-foreground/60" : undefined, autoComplete: "off" }), _jsx("p", { className: "text-[11px] text-muted-foreground", children: "Houd deze sleutel priv\u00E9." }), configured && (_jsx("p", { className: "text-[11px] text-muted-foreground", children: "Laat leeg als je deze waarde niet wilt wijzigen." }))] })] }), _jsx("div", { children: _jsx(Button, { size: "sm", onClick: () => saveMut.mutate(), disabled: saveMut.isPending ||
+                            (!clientSecret.trim() && !clientId.trim()), children: saveMut.isPending
+                            ? "Opslaan…"
+                            : configured
+                                ? "Wijzigingen opslaan"
+                                : "Koppeling opslaan" }) })] }) }));
+}
+function TestBlock({ settings }) {
+    const qc = useQueryClient();
+    const testConn = useServerFn(testFloricodeConnection);
+    const configured = Boolean(settings?.isConfigured);
+    const testMut = useMutation({
+        mutationFn: () => testConn(),
+        onSuccess: (r) => {
+            if (r?.ok)
+                toast.success("Verbinding met Floricode geslaagd");
+            else
+                toast.error(`Verbinding mislukt: ${r?.error ?? "onbekend"}`);
+            qc.invalidateQueries({ queryKey: ["floricode-settings"] });
+        },
+        onError: (e) => toast.error(String(e?.message ?? e)),
+    });
+    return (_jsx(StepBlock, { number: 2, title: "Test de verbinding", description: "Controleer of je gegevens correct zijn en of de koppeling werkt.", children: _jsxs("div", { className: "space-y-2", children: [_jsx(Button, { variant: "outline", size: "sm", onClick: () => testMut.mutate(), disabled: !configured || testMut.isPending, children: testMut.isPending ? "Testen…" : "Verbinding testen" }), settings?.lastTokenTestAt && (_jsxs("p", { className: "text-[11px] text-muted-foreground", children: ["Laatste test: ", formatDate(settings.lastTokenTestAt), " \u2014", " ", settings.lastTokenTestOk
+                            ? "geslaagd"
+                            : `mislukt: ${settings.lastTokenTestError ?? "onbekend"}`] }))] }) }));
+}
+function classifyRow(row) {
+    const msg = String(row.errorMessage ?? "");
+    const notAvailable = /404|niet beschikbaar|niet geautoriseerd|401|403/.test(msg);
+    const stale = row.lastSyncAt
+        ? Date.now() - new Date(row.lastSyncAt).getTime() > 30 * 60000
+        : false;
+    if (row.status === "error" && notAvailable) {
+        return {
+            key: "unavailable",
+            label: "Niet beschikbaar",
+            tone: "text-amber-700 bg-amber-50 border-amber-200",
+            dot: "bg-amber-500",
+        };
+    }
+    if (row.status === "error") {
+        return {
+            key: "error",
+            label: "Fout",
+            tone: "text-red-700 bg-red-50 border-red-200",
+            dot: "bg-red-500",
+        };
+    }
+    if (row.status === "running" && stale) {
+        return {
+            key: "hanging",
+            label: "Hangt",
+            tone: "text-orange-700 bg-orange-50 border-orange-200",
+            dot: "bg-orange-500 animate-pulse",
+        };
+    }
+    if (row.status === "running") {
+        return {
+            key: "running",
+            label: "Bezig",
+            tone: "text-blue-700 bg-blue-50 border-blue-200",
+            dot: "bg-blue-500 animate-pulse",
+        };
+    }
+    if (row.status === "ok") {
+        return {
+            key: "ok",
+            label: "Actueel",
+            tone: "text-emerald-700 bg-emerald-50 border-emerald-200",
+            dot: "bg-emerald-500",
+        };
+    }
+    return {
+        key: "pending",
+        label: row.status ?? "In wachtrij",
+        tone: "text-muted-foreground bg-muted/60 border-border/60",
+        dot: "bg-muted-foreground/50",
+    };
+}
+const STATUS_ORDER = {
+    error: 0,
+    hanging: 1,
+    running: 2,
+    pending: 3,
+    unavailable: 4,
+    ok: 5,
+};
+function SyncBlock({ configured }) {
+    const qc = useQueryClient();
+    const getStatus = useServerFn(getFloricodeSyncStatus);
+    const syncOne = useServerFn(triggerFloricodeResourceSync);
+    const resetOne = useServerFn(resetFloricodeResourceCursor);
+    const { data: rows = [] } = useQuery({
+        queryKey: ["floricode-sync-status"],
+        queryFn: () => getStatus(),
+        refetchInterval: 10000,
+        refetchIntervalInBackground: true,
+    });
+    const syncMut = useMutation({
+        mutationFn: (resource) => syncOne({ data: { resource } }),
+        onSuccess: (r) => {
+            toast.success(r?.skipped
+                ? String(r?.message ?? `${r?.resource}: overgeslagen`)
+                : `${r?.resource}: ${r?.upserted ?? 0} rijen bijgewerkt`);
+            qc.invalidateQueries({ queryKey: ["floricode-sync-status"] });
+        },
+        onError: (e) => toast.error(String(e?.message ?? e)),
+    });
+    const resetMut = useMutation({
+        mutationFn: (resource) => resetOne({ data: { resource } }),
+        onSuccess: (r) => {
+            toast.success(`${r?.resource}: volledige scan wordt opnieuw opgestart`);
+            qc.invalidateQueries({ queryKey: ["floricode-sync-status"] });
+        },
+        onError: (e) => toast.error(String(e?.message ?? e)),
+    });
+    const classified = rows
+        .map((r) => ({ row: r, meta: classifyRow(r) }))
+        .sort((a, b) => {
+        const d = (STATUS_ORDER[a.meta.key] ?? 9) - (STATUS_ORDER[b.meta.key] ?? 9);
+        return d !== 0 ? d : a.row.resource.localeCompare(b.row.resource);
+    });
+    return (_jsx(StepBlock, { number: 3, title: "Gegevens up-to-date houden", description: "We halen je Floricode-gegevens automatisch op en bewaren ze in je werkomgeving. Zo werkt alles effici\u00EBnt & snel.", children: _jsxs("div", { className: "space-y-3", children: [classified.length === 0 && (_jsx("p", { className: "text-xs text-muted-foreground", children: "Nog geen synchronisatiegegevens beschikbaar." })), classified.map(({ row, meta }) => {
+                    const hasProblem = meta.key === "error" ||
+                        meta.key === "unavailable" ||
+                        meta.key === "hanging";
+                    return (_jsxs("div", { className: "rounded-lg border border-border/60 bg-card p-4", children: [_jsxs("div", { className: "grid grid-cols-[minmax(0,1fr)_auto] items-start gap-3 sm:flex sm:items-center sm:justify-between", children: [_jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [_jsx("h5", { className: "font-medium text-sm truncate", children: row.resource }), hasProblem && (_jsxs("span", { className: `inline-flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-[10px] font-medium ${meta.tone}`, children: [_jsx("span", { className: `h-1.5 w-1.5 rounded-full ${meta.dot}` }), meta.label] }))] }), _jsx("p", { className: "text-[11px] text-muted-foreground mt-0.5", children: "Wordt automatisch bijgewerkt op de achtergrond." })] }), _jsx(Button, { variant: "outline", size: "sm", className: "shrink-0", disabled: !configured || syncMut.isPending, onClick: () => syncMut.mutate(row.resource), children: syncMut.isPending && syncMut.variables === row.resource
+                                            ? "Bezig…"
+                                            : "Nu bijwerken" })] }), _jsxs("div", { className: "mt-3 grid grid-cols-1 sm:grid-cols-2 gap-2", children: [_jsx(MetricTile, { label: "Laatst bijgewerkt", value: timeAgo(row.lastSyncAt) }), _jsx(MetricTile, { label: "Aantal records", value: (row.rowCount ?? 0).toLocaleString("nl-NL") })] }), hasProblem && (_jsxs("div", { className: "mt-3 flex items-center justify-between gap-3 flex-wrap", children: [row.errorMessage ? (_jsx("p", { className: `text-[11px] break-words ${meta.key === "unavailable"
+                                            ? "text-amber-700"
+                                            : "text-red-700"}`, children: row.errorMessage })) : (_jsx("span", {})), _jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "sm", className: "text-xs", disabled: !configured || resetMut.isPending, children: "Opnieuw beginnen" }) }), _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Volledige scan opnieuw uitvoeren?" }), _jsx(AlertDialogDescription, { children: "We beginnen de synchronisatie helemaal opnieuw. Bestaande gegevens blijven zichtbaar en worden ververst zodra ze binnen zijn." })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Annuleren" }), _jsx(AlertDialogAction, { onClick: () => resetMut.mutate(row.resource), children: "Opnieuw beginnen" })] })] })] })] }))] }, row.resource));
+                })] }) }));
+}
+function MetricTile({ label, value, sub }) {
+    return (_jsxs("div", { className: "rounded-md bg-muted/50 px-3 py-2 min-w-0", children: [_jsx("p", { className: "text-[10px] uppercase tracking-wide text-muted-foreground truncate", children: label }), _jsx("p", { className: "text-sm font-semibold mt-0.5 truncate", title: value, children: value }), sub && (_jsx("p", { className: "text-[10px] text-muted-foreground mt-0.5 truncate", title: sub, children: sub }))] }));
+}

package/dist-lib/components/settings/FlorydaySettingsCard.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
-const florydayLogo = "/flowselections-assets/Floriday Authenticatie/floriday-logo.png";
+const florydayLogo = "/flowselections-assets/floriday-authenticatie/floriday-logo.png";
 import { ChevronDown } from "lucide-react";
 import { useServerFn } from "@tanstack/react-start";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";

package/dist-lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAGvD,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AACtF,cAAc,0BAA0B,CAAC;AACzC,cAAc,+BAA+B,CAAC;AAE9C,eAAO,MAAM,2BAA2B,EAAE,UAczC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAIvD,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AACtF,cAAc,0BAA0B,CAAC;AACzC,cAAc,+BAA+B,CAAC;AAE9C,eAAO,MAAM,2BAA2B,EAAE,UAezC,CAAC"}

package/dist-lib/index.js

@@ -1,5 +1,6 @@
 import { Plug } from "lucide-react";
 import { FlorydaySettingsCard } from "./components/settings/FlorydaySettingsCard";
+import { FloricodeSettingsCard } from "./components/settings/FloricodeSettingsCard";
 export * from './_core-safelist';
 export { FlorydayConnectionPage } from './components/floriday/FlorydayConnectionPage';
 export * from './lib/floriday.functions';
@@ -15,5 +16,6 @@ export const floridayAuthenticatieModule = {
     },
     settingsCards: [
         { component: FlorydaySettingsCard, order: 10 },
+        { component: FloricodeSettingsCard, order: 20 },
     ],
 };