@voyant-travel/admin 0.111.0

package/dist/components/team-settings-page.js

@@ -0,0 +1,149 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useVoyantReactContext } from "@voyant-travel/react";
+import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Input, Label, } from "@voyant-travel/ui/components";
+import { Skeleton } from "@voyant-travel/ui/components/skeleton";
+import { Copy, Loader2, Mail, Trash2, UserPlus } from "lucide-react";
+import { createContext, useContext, useMemo, useState } from "react";
+import { formatMessage } from "../lib/i18n.js";
+import { useLocale } from "../providers/locale.js";
+import { useOperatorAdminMessages } from "../providers/operator-admin-messages.js";
+const QK = ["admin-invitations"];
+const TeamSettingsPageApiContext = createContext(null);
+function joinUrl(baseUrl, path) {
+    const trimmedBase = baseUrl.endsWith("/") ? baseUrl.slice(0, -1) : baseUrl;
+    const trimmedPath = path.startsWith("/") ? path : `/${path}`;
+    return `${trimmedBase}${trimmedPath}`;
+}
+async function readJson(response) {
+    if (!response.ok) {
+        let body;
+        try {
+            body = await response.json();
+        }
+        catch {
+            body = await response.text().catch(() => undefined);
+        }
+        const message = typeof body === "object" && body !== null && "error" in body
+            ? String(body.error)
+            : `API error: ${response.status} ${response.statusText}`;
+        throw new Error(message);
+    }
+    if (response.status === 204)
+        return undefined;
+    return response.json();
+}
+function createTeamSettingsPageApi(baseUrl, fetcher) {
+    const request = async (path, init = {}) => {
+        const headers = new Headers(init.headers);
+        if (init.body !== undefined && !headers.has("Content-Type")) {
+            headers.set("Content-Type", "application/json");
+        }
+        return readJson(await fetcher(joinUrl(baseUrl, path), { ...init, headers }));
+    };
+    const api = {
+        get: (path) => request(path, { method: "GET" }),
+        post: (path, body) => request(path, {
+            method: "POST",
+            body: body !== undefined ? JSON.stringify(body) : undefined,
+        }),
+        delete: (path) => request(path, { method: "DELETE" }),
+    };
+    return api;
+}
+function useTeamSettingsPageApi() {
+    const api = useContext(TeamSettingsPageApiContext);
+    if (!api)
+        throw new Error("TeamSettingsPage requires a TeamSettingsPageApiContext provider");
+    return api;
+}
+export function TeamSettingsPage({ api: apiProp } = {}) {
+    if (apiProp)
+        return _jsx(TeamSettingsPageContent, { api: apiProp });
+    return _jsx(TeamSettingsPageWithDefaultApi, {});
+}
+function TeamSettingsPageWithDefaultApi() {
+    const { baseUrl, fetcher } = useVoyantReactContext();
+    const api = useMemo(() => createTeamSettingsPageApi(baseUrl, fetcher), [baseUrl, fetcher]);
+    return _jsx(TeamSettingsPageContent, { api: api });
+}
+function TeamSettingsPageContent({ api }) {
+    const messages = useOperatorAdminMessages();
+    const { resolvedLocale } = useLocale();
+    const queryClient = useQueryClient();
+    const invitesQuery = useQuery({
+        queryKey: QK,
+        queryFn: () => api.get("/v1/admin/invitations"),
+    });
+    const revoke = useMutation({
+        mutationFn: (id) => api.delete(`/v1/admin/invitations/${id}`),
+        onSuccess: () => void queryClient.invalidateQueries({ queryKey: QK }),
+    });
+    const invites = invitesQuery.data?.data ?? [];
+    const pending = invites.filter((i) => !i.redeemedAt && new Date(i.expiresAt) > new Date());
+    const spent = invites.filter((i) => i.redeemedAt || new Date(i.expiresAt) <= new Date());
+    return (_jsx(TeamSettingsPageApiContext.Provider, { value: api, children: _jsxs("div", { className: "flex flex-col gap-6 p-6", children: [_jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-semibold tracking-tight", children: messages.team.title }), _jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: messages.team.description })] }), _jsx(InviteMemberDialog, {})] }), _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: messages.team.pendingInvitations }), _jsx(CardDescription, { children: pending.length === 0
+                                        ? messages.team.noOutstandingInvitations
+                                        : formatMessage(pending.length === 1
+                                            ? messages.team.invitationWaitingSingular
+                                            : messages.team.invitationWaitingPlural, { count: pending.length }) })] }), _jsx(CardContent, { children: invitesQuery.isPending ? (_jsx("ul", { className: "flex flex-col divide-y", children: Array.from({ length: 3 }).map((_, i) => (_jsxs("li", { className: "flex items-center gap-4 py-3", children: [_jsx(Skeleton, { className: "h-4 w-4 rounded" }), _jsxs("div", { className: "min-w-0 flex-1 space-y-1.5", children: [_jsx(Skeleton, { className: "h-3.5 w-48" }), _jsx(Skeleton, { className: "h-3 w-40" })] }), _jsx(Skeleton, { className: "h-7 w-20" })] }, i))) })) : pending.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: messages.team.nothingHereYet })) : (_jsx("ul", { className: "flex flex-col divide-y", children: pending.map((invite) => (_jsxs("li", { className: "flex items-center gap-4 py-3", children: [_jsx(Mail, { className: "h-4 w-4 shrink-0 text-muted-foreground" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "truncate text-sm font-medium", children: invite.email }), _jsx("p", { className: "text-xs text-muted-foreground", children: formatMessage(messages.team.expires, {
+                                                        date: new Date(invite.expiresAt).toLocaleString(resolvedLocale),
+                                                    }) })] }), _jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: "text-destructive", onClick: () => {
+                                                if (confirm(formatMessage(messages.team.revokeConfirm, {
+                                                    email: invite.email,
+                                                }))) {
+                                                    revoke.mutate(invite.id);
+                                                }
+                                            }, disabled: revoke.isPending, children: [_jsx(Trash2, { className: "mr-1 h-3.5 w-3.5" }), messages.team.revoke] })] }, invite.id))) })) })] }), spent.length > 0 ? (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: messages.team.history }), _jsx(CardDescription, { children: messages.team.historyDescription })] }), _jsx(CardContent, { children: _jsx("ul", { className: "flex flex-col divide-y text-sm", children: spent.map((invite) => (_jsxs("li", { className: "flex items-center gap-4 py-2.5 text-muted-foreground", children: [_jsx(Mail, { className: "h-4 w-4 shrink-0" }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: invite.email }), _jsx("span", { className: "text-xs", children: invite.redeemedAt
+                                                ? formatMessage(messages.team.redeemed, {
+                                                    date: new Date(invite.redeemedAt).toLocaleDateString(resolvedLocale),
+                                                })
+                                                : formatMessage(messages.team.expired, {
+                                                    date: new Date(invite.expiresAt).toLocaleDateString(resolvedLocale),
+                                                }) })] }, invite.id))) }) })] })) : null] }) }));
+}
+function InviteMemberDialog() {
+    const messages = useOperatorAdminMessages();
+    const api = useTeamSettingsPageApi();
+    const queryClient = useQueryClient();
+    const [open, setOpen] = useState(false);
+    const [email, setEmail] = useState("");
+    const [result, setResult] = useState(null);
+    const [error, setError] = useState(null);
+    const [copied, setCopied] = useState(false);
+    const create = useMutation({
+        mutationFn: () => api.post("/v1/admin/invitations", { email: email.trim() }),
+        onSuccess: (response) => {
+            setResult(response.data);
+            setError(null);
+            void queryClient.invalidateQueries({ queryKey: QK });
+        },
+        onError: (e) => setError(e instanceof Error ? e.message : messages.team.errorCouldNotSendInvitation),
+    });
+    const close = () => {
+        setOpen(false);
+        // Let the dialog close animation finish before resetting state
+        window.setTimeout(() => {
+            setEmail("");
+            setResult(null);
+            setError(null);
+            setCopied(false);
+        }, 200);
+    };
+    const copyLink = async () => {
+        if (!result)
+            return;
+        await navigator.clipboard.writeText(result.acceptUrl);
+        setCopied(true);
+        window.setTimeout(() => setCopied(false), 1500);
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs(Button, { size: "sm", onClick: () => setOpen(true), children: [_jsx(UserPlus, { className: "mr-1 h-4 w-4" }), messages.team.inviteMember] }), _jsx(Dialog, { open: open, onOpenChange: (o) => (o ? setOpen(true) : close()), children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: messages.team.inviteDialogTitle }), _jsx(DialogDescription, { children: messages.team.inviteDialogDescription })] }), result ? (_jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "rounded-md border bg-muted/30 p-3 text-sm", children: _jsxs("p", { children: [formatMessage(messages.team.inviteCreated, {
+                                                email: result.email,
+                                            }), " ", result.emailSent
+                                                ? messages.team.inviteEmailSentSuffix
+                                                : messages.team.inviteManualShareSuffix] }) }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: messages.team.acceptLink }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Input, { value: result.acceptUrl, readOnly: true, className: "font-mono text-xs" }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => void copyLink(), children: [_jsx(Copy, { className: "mr-1 h-3.5 w-3.5" }), copied ? messages.team.copied : messages.team.copy] })] })] }), _jsx(DialogFooter, { children: _jsx(Button, { onClick: close, children: messages.team.done }) })] })) : (_jsxs("form", { className: "space-y-4", onSubmit: (e) => {
+                                e.preventDefault();
+                                create.mutate();
+                            }, children: [error && (_jsx("div", { className: "rounded-md bg-destructive/10 p-3 text-sm text-destructive", children: error })), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "invite-email", children: messages.team.emailLabel }), _jsx(Input, { id: "invite-email", type: "email", value: email, onChange: (e) => setEmail(e.target.value), placeholder: messages.team.emailPlaceholder, required: true, autoComplete: "off", autoFocus: true })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "ghost", onClick: close, children: messages.team.cancel }), _jsxs(Button, { type: "submit", disabled: create.isPending, children: [create.isPending && _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), messages.team.sendInvitation] })] })] }))] }) })] }));
+}

package/dist/dashboard/dashboard-empty-states.d.ts

@@ -0,0 +1,67 @@
+import type { ReactNode } from "react";
+import type { OperatorAdminMessages } from "../providers/operator-admin-messages.js";
+export type DashboardEmptyStateKey = "revenueTrend" | "bookingStatus" | "monthlyBookings" | "upcomingDepartures" | "outstandingInvoices" | "onboarding";
+export interface DashboardEmptyAction {
+    href: string;
+    label: string;
+}
+export interface DashboardEmptyStateConfig {
+    action?: DashboardEmptyAction | null;
+    description?: string | null;
+    icon?: ReactNode;
+    title?: string | null;
+}
+export declare function buildDashboardEmptyStates(messages: OperatorAdminMessages, emptyStates: Partial<Record<DashboardEmptyStateKey, DashboardEmptyStateConfig>>): {
+    revenueTrend: {
+        action: DashboardEmptyAction | null;
+        description: string | null;
+        icon: string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null;
+        title: string | null;
+    };
+    bookingStatus: {
+        action: DashboardEmptyAction | null;
+        description: string | null;
+        icon: string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null;
+        title: string | null;
+    };
+    monthlyBookings: {
+        action: DashboardEmptyAction | null;
+        description: string | null;
+        icon: string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null;
+        title: string | null;
+    };
+    upcomingDepartures: {
+        action: DashboardEmptyAction | null;
+        description: string | null;
+        icon: string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null;
+        title: string | null;
+    };
+    outstandingInvoices: {
+        action: DashboardEmptyAction | null;
+        description: string | null;
+        icon: string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null;
+        title: string | null;
+    };
+    onboarding: {
+        action?: DashboardEmptyAction | null;
+        description: string | null;
+        icon: string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null;
+        title: string | null;
+    };
+};
+export declare function DashboardEmptyState({ compact, emptyState, }: {
+    compact?: boolean;
+    emptyState: DashboardEmptyStateConfig;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function DashboardOnboardingEmptyState({ children, emptyState, }: {
+    children: ReactNode;
+    emptyState: DashboardEmptyStateConfig;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function OnboardingAction({ actionLabel, description, href, icon, title, }: {
+    actionLabel: string;
+    description: string;
+    href: string;
+    icon: ReactNode;
+    title: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=dashboard-empty-states.d.ts.map

package/dist/dashboard/dashboard-empty-states.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashboard-empty-states.d.ts","sourceRoot":"","sources":["../../src/dashboard/dashboard-empty-states.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAA;AAEpF,MAAM,MAAM,sBAAsB,GAC9B,cAAc,GACd,eAAe,GACf,iBAAiB,GACjB,oBAAoB,GACpB,qBAAqB,GACrB,YAAY,CAAA;AAEhB,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,yBAAyB;IACxC,MAAM,CAAC,EAAE,oBAAoB,GAAG,IAAI,CAAA;IACpC,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CACtB;AAED,wBAAgB,yBAAyB,CACvC,QAAQ,EAAE,qBAAqB,EAC/B,WAAW,EAAE,OAAO,CAAC,MAAM,CAAC,sBAAsB,EAAE,yBAAyB,CAAC,CAAC;;gBARtE,oBAAoB,GAAG,IAAI;qBACtB,MAAM,GAAG,IAAI;;eAEnB,MAAM,GAAG,IAAI;;;gBAHZ,oBAAoB,GAAG,IAAI;qBACtB,MAAM,GAAG,IAAI;;eAEnB,MAAM,GAAG,IAAI;;;gBAHZ,oBAAoB,GAAG,IAAI;qBACtB,MAAM,GAAG,IAAI;;eAEnB,MAAM,GAAG,IAAI;;;gBAHZ,oBAAoB,GAAG,IAAI;qBACtB,MAAM,GAAG,IAAI;;eAEnB,MAAM,GAAG,IAAI;;;gBAHZ,oBAAoB,GAAG,IAAI;qBACtB,MAAM,GAAG,IAAI;;eAEnB,MAAM,GAAG,IAAI;;;iBAHZ,oBAAoB,GAAG,IAAI;qBACtB,MAAM,GAAG,IAAI;;eAEnB,MAAM,GAAG,IAAI;;EAqDtB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,OAAe,EACf,UAAU,GACX,EAAE;IACD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,UAAU,EAAE,yBAAyB,CAAA;CACtC,2CAqBA;AAED,wBAAgB,6BAA6B,CAAC,EAC5C,QAAQ,EACR,UAAU,GACX,EAAE;IACD,QAAQ,EAAE,SAAS,CAAA;IACnB,UAAU,EAAE,yBAAyB,CAAA;CACtC,2CAiBA;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,WAAW,EACX,WAAW,EACX,IAAI,EACJ,IAAI,EACJ,KAAK,GACN,EAAE;IACD,WAAW,EAAE,MAAM,CAAA;IACnB,WAAW,EAAE,MAAM,CAAA;IACnB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,SAAS,CAAA;IACf,KAAK,EAAE,MAAM,CAAA;CACd,2CAkBA"}

package/dist/dashboard/dashboard-empty-states.js

@@ -0,0 +1,65 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, CardContent } from "@voyant-travel/ui/components";
+import { buttonVariants } from "@voyant-travel/ui/components/button";
+import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, } from "@voyant-travel/ui/components/empty";
+import { cn } from "@voyant-travel/ui/lib/utils";
+import { BarChart3, CalendarCheck, ClipboardList, DollarSign, FileText, Sparkles, } from "lucide-react";
+export function buildDashboardEmptyStates(messages, emptyStates) {
+    return {
+        revenueTrend: {
+            title: messages.dashboard.revenueTrendEmptyTitle,
+            description: messages.dashboard.revenueTrendEmptyDescription,
+            action: { href: "/bookings", label: messages.dashboard.revenueTrendEmptyAction },
+            icon: _jsx(DollarSign, { className: "size-5" }),
+            ...emptyStates.revenueTrend,
+        },
+        bookingStatus: {
+            title: messages.dashboard.bookingStatusEmptyTitle,
+            description: messages.dashboard.bookingStatusEmptyDescription,
+            action: { href: "/bookings", label: messages.dashboard.bookingStatusEmptyAction },
+            icon: _jsx(ClipboardList, { className: "size-5" }),
+            ...emptyStates.bookingStatus,
+        },
+        monthlyBookings: {
+            title: messages.dashboard.monthlyBookingsEmptyTitle,
+            description: messages.dashboard.monthlyBookingsEmptyDescription,
+            action: { href: "/bookings", label: messages.dashboard.monthlyBookingsEmptyAction },
+            icon: _jsx(BarChart3, { className: "size-5" }),
+            ...emptyStates.monthlyBookings,
+        },
+        upcomingDepartures: {
+            title: messages.dashboard.noUpcomingDepartures,
+            description: messages.dashboard.noUpcomingDeparturesDescription,
+            action: null,
+            icon: _jsx(CalendarCheck, { className: "size-5" }),
+            ...emptyStates.upcomingDepartures,
+        },
+        outstandingInvoices: {
+            title: messages.dashboard.outstandingInvoicesEmptyTitle,
+            description: messages.dashboard.outstandingInvoicesEmptyDescription,
+            action: {
+                href: "/finance",
+                label: messages.dashboard.outstandingInvoicesEmptyAction,
+            },
+            icon: _jsx(FileText, { className: "size-5" }),
+            ...emptyStates.outstandingInvoices,
+        },
+        onboarding: {
+            title: messages.dashboard.onboardingTitle,
+            description: messages.dashboard.onboardingDescription,
+            icon: _jsx(Sparkles, { className: "size-5" }),
+            ...emptyStates.onboarding,
+        },
+    };
+}
+export function DashboardEmptyState({ compact = false, emptyState, }) {
+    const action = emptyState.action ?? null;
+    return (_jsxs(Empty, { className: cn("min-h-[250px] border", compact && "min-h-[180px] p-8"), children: [_jsxs(EmptyHeader, { children: [emptyState.icon ? _jsx(EmptyMedia, { variant: "icon", children: emptyState.icon }) : null, emptyState.title ? _jsx(EmptyTitle, { children: emptyState.title }) : null, emptyState.description ? (_jsx(EmptyDescription, { children: emptyState.description })) : null] }), action ? (_jsx(EmptyContent, { children: _jsx("a", { href: action.href, className: cn(buttonVariants({ size: "sm" })), children: action.label }) })) : null] }));
+}
+export function DashboardOnboardingEmptyState({ children, emptyState, }) {
+    return (_jsx(Card, { children: _jsx(CardContent, { className: "p-6", children: _jsxs(Empty, { className: "border p-6", children: [_jsxs(EmptyHeader, { children: [emptyState.icon ? _jsx(EmptyMedia, { variant: "icon", children: emptyState.icon }) : null, emptyState.title ? _jsx(EmptyTitle, { children: emptyState.title }) : null, emptyState.description ? (_jsx(EmptyDescription, { children: emptyState.description })) : null] }), _jsx("div", { className: "grid w-full gap-3 md:grid-cols-2", children: children })] }) }) }));
+}
+export function OnboardingAction({ actionLabel, description, href, icon, title, }) {
+    return (_jsxs("a", { href: href, className: "flex min-w-0 items-start justify-between gap-4 rounded-lg border bg-background p-4 text-left transition-colors hover:bg-muted/50", children: [_jsxs("span", { className: "flex min-w-0 gap-3", children: [_jsx("span", { className: "mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground", children: icon }), _jsxs("span", { className: "min-w-0 space-y-1", children: [_jsx("span", { className: "block text-sm font-medium", children: title }), _jsx("span", { className: "block text-sm text-muted-foreground", children: description })] })] }), _jsx("span", { className: "shrink-0 text-sm font-medium text-primary", children: actionLabel })] }));
+}

package/dist/dashboard/dashboard-kpi-card.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+export declare function KpiCard({ title, value, description, icon, trend, trendLabel, empty, emptyLabel, isLoading, }: {
+    title: string;
+    value: string;
+    description: string;
+    icon: ReactNode;
+    trend?: number;
+    trendLabel?: string;
+    empty?: boolean;
+    emptyLabel?: string;
+    isLoading?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=dashboard-kpi-card.d.ts.map

package/dist/dashboard/dashboard-kpi-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashboard-kpi-card.d.ts","sourceRoot":"","sources":["../../src/dashboard/dashboard-kpi-card.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,KAAK,EACL,WAAW,EACX,IAAI,EACJ,KAAK,EACL,UAAU,EACV,KAAK,EACL,UAAU,EACV,SAAS,GACV,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,IAAI,EAAE,SAAS,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,2CA0DA"}

package/dist/dashboard/dashboard-kpi-card.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Card, CardContent, CardHeader, CardTitle } from "@voyant-travel/ui/components";
+import { Skeleton } from "@voyant-travel/ui/components/skeleton";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@voyant-travel/ui/components/tooltip";
+import { ArrowDownRight, ArrowUpRight } from "lucide-react";
+export function KpiCard({ title, value, description, icon, trend, trendLabel, empty, emptyLabel, isLoading, }) {
+    const isPositive = (trend ?? 0) >= 0;
+    return (_jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [_jsx(CardTitle, { className: "text-sm font-medium", children: title }), icon] }), _jsx(CardContent, { children: isLoading ? (_jsxs("div", { className: "space-y-2", children: [_jsx(Skeleton, { className: "h-7 w-28" }), _jsx(Skeleton, { className: "h-3 w-40" }), trendLabel ? _jsx(Skeleton, { className: "mt-3 h-5 w-28 rounded-full" }) : null] })) : (_jsxs(_Fragment, { children: [empty ? (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { className: "text-2xl font-semibold tracking-tight text-muted-foreground", "aria-label": emptyLabel ?? description, children: "-" }), _jsx(TooltipContent, { children: emptyLabel ?? description })] }) })) : (_jsx("div", { className: "text-2xl font-semibold tracking-tight", children: value })), _jsx("p", { className: "text-xs text-muted-foreground", children: description }), !empty && trend != null && trendLabel ? (_jsxs("div", { className: "mt-3 flex items-center gap-1 text-xs text-muted-foreground", children: [_jsxs("span", { className: `inline-flex items-center gap-1 rounded-full px-2 py-0.5 ${isPositive
+                                        ? "bg-emerald-500/10 text-emerald-600"
+                                        : "bg-rose-500/10 text-rose-600"}`, children: [isPositive ? (_jsx(ArrowUpRight, { className: "h-3 w-3" })) : (_jsx(ArrowDownRight, { className: "h-3 w-3" })), Math.abs(trend).toFixed(1), "%"] }), _jsx("span", { children: trendLabel })] })) : null] })) })] }));
+}

package/dist/dashboard/dashboard-page.d.ts

@@ -0,0 +1,7 @@
+import { type DashboardEmptyStateConfig, type DashboardEmptyStateKey } from "./dashboard-empty-states.js";
+export type { DashboardEmptyAction, DashboardEmptyStateConfig, DashboardEmptyStateKey, } from "./dashboard-empty-states.js";
+export interface DashboardPageProps {
+    emptyStates?: Partial<Record<DashboardEmptyStateKey, DashboardEmptyStateConfig>>;
+}
+export declare function DashboardPage({ emptyStates }?: DashboardPageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=dashboard-page.d.ts.map

package/dist/dashboard/dashboard-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashboard-page.d.ts","sourceRoot":"","sources":["../../src/dashboard/dashboard-page.tsx"],"names":[],"mappings":"AAsCA,OAAO,EAGL,KAAK,yBAAyB,EAC9B,KAAK,sBAAsB,EAG5B,MAAM,6BAA6B,CAAA;AAoBpC,YAAY,EACV,oBAAoB,EACpB,yBAAyB,EACzB,sBAAsB,GACvB,MAAM,6BAA6B,CAAA;AAEpC,MAAM,WAAW,kBAAkB;IACjC,WAAW,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,sBAAsB,EAAE,yBAAyB,CAAC,CAAC,CAAA;CACjF;AAED,wBAAgB,aAAa,CAAC,EAAE,WAAgB,EAAE,GAAE,kBAAuB,2CAoe1E"}

package/dist/dashboard/dashboard-page.js

@@ -0,0 +1,150 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useQuery } from "@tanstack/react-query";
+import { Link } from "@tanstack/react-router";
+import { useVoyantReactContext } from "@voyant-travel/react";
+import { Badge, Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@voyant-travel/ui/components";
+import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, } from "@voyant-travel/ui/components/chart";
+import { CalendarCheck, CalendarPlus, DollarSign, Package, PackagePlus, Users } from "lucide-react";
+import { Area, AreaChart, Bar, BarChart, CartesianGrid, Cell, Pie, PieChart, XAxis, YAxis, } from "recharts";
+import { AdminWidgetSlotRenderer } from "../components/admin-widget-slot.js";
+import { formatMessage } from "../lib/i18n.js";
+import { useLocale } from "../providers/locale.js";
+import { useOperatorAdminMessages } from "../providers/operator-admin-messages.js";
+import { buildDashboardEmptyStates, DashboardEmptyState, DashboardOnboardingEmptyState, OnboardingAction, } from "./dashboard-empty-states.js";
+import { KpiCard } from "./dashboard-kpi-card.js";
+import { buildMonthSeries, formatCurrency, getDashboardBookingsAggregatesQueryOptions, getDashboardFinanceAggregatesQueryOptions, getDashboardProductsAggregatesQueryOptions, getDashboardSuppliersAggregatesQueryOptions, getStatusColor, pickPrimaryCurrency, } from "./dashboard-query-options.js";
+import { DashboardAreaChartSkeleton, DashboardBarChartSkeleton, DashboardOutstandingInvoicesSkeleton, DashboardPieChartSkeleton, DashboardUpcomingListSkeleton, } from "./dashboard-skeleton.js";
+export function DashboardPage({ emptyStates = {} } = {}) {
+    const client = useVoyantReactContext();
+    const messages = useOperatorAdminMessages();
+    const { resolvedLocale } = useLocale();
+    const { data: bookingsAggregates, isPending: bookingsPending } = useQuery(getDashboardBookingsAggregatesQueryOptions(client));
+    const { data: productsAggregates, isPending: productsPending } = useQuery(getDashboardProductsAggregatesQueryOptions(client));
+    const { data: suppliersAggregates, isPending: suppliersPending } = useQuery(getDashboardSuppliersAggregatesQueryOptions(client));
+    const { data: financeAggregates, isPending: financePending } = useQuery(getDashboardFinanceAggregatesQueryOptions(client));
+    const bookings = bookingsAggregates?.data;
+    const products = productsAggregates?.data;
+    const suppliers = suppliersAggregates?.data;
+    const finance = financeAggregates?.data;
+    const monthSeries = buildMonthSeries();
+    const defaultCurrency = pickPrimaryCurrency(bookings?.monthlyRevenue ?? []);
+    const monthlyRevenue = monthSeries.map((entry) => {
+        const revenue = bookings?.monthlyRevenue
+            .filter((row) => row.yearMonth === entry.yearMonth)
+            .reduce((sum, row) => sum + row.sellAmountCents, 0) ?? 0;
+        const bookingsInMonth = bookings?.monthlyCounts.find((row) => row.yearMonth === entry.yearMonth)?.count ?? 0;
+        return { month: entry.month, revenue: revenue / 100, bookings: bookingsInMonth };
+    });
+    const monthlyBookings = monthSeries.map((entry) => ({
+        month: entry.month,
+        count: bookings?.monthlyCounts.find((row) => row.yearMonth === entry.yearMonth)?.count ?? 0,
+    }));
+    const totalRevenueCents = bookings?.monthlyRevenue
+        .filter((row) => row.currency === defaultCurrency)
+        .reduce((sum, row) => sum + row.sellAmountCents, 0) ?? 0;
+    const confirmedBookings = (bookings?.countsByStatus.find((row) => row.status === "confirmed")?.count ?? 0) +
+        (bookings?.countsByStatus.find((row) => row.status === "in_progress")?.count ?? 0);
+    const totalPax = bookings?.totalPax ?? 0;
+    const activeProducts = products?.active ?? 0;
+    const totalProducts = products?.total ?? 0;
+    const totalSuppliers = suppliers?.total ?? 0;
+    const outstandingInvoiceCount = finance?.outstanding.reduce((sum, row) => sum + row.count, 0) ?? 0;
+    const outstandingPrimaryCurrency = finance?.outstanding[0]?.currency ?? defaultCurrency;
+    const outstandingAmount = finance?.outstanding.find((row) => row.currency === outstandingPrimaryCurrency)
+        ?.balanceDueCents ?? 0;
+    const outstandingTopN = finance?.outstandingTopN ?? [];
+    const currentMonthRevenue = monthlyRevenue[monthlyRevenue.length - 1]?.revenue ?? 0;
+    const prevMonthRevenue = monthlyRevenue[monthlyRevenue.length - 2]?.revenue ?? 0;
+    const revenueTrend = prevMonthRevenue > 0 ? ((currentMonthRevenue - prevMonthRevenue) / prevMonthRevenue) * 100 : 0;
+    const currentMonthBookings = monthlyBookings[monthlyBookings.length - 1]?.count ?? 0;
+    const prevMonthBookings = monthlyBookings[monthlyBookings.length - 2]?.count ?? 0;
+    const bookingTrend = prevMonthBookings > 0
+        ? ((currentMonthBookings - prevMonthBookings) / prevMonthBookings) * 100
+        : 0;
+    const revenueChartConfig = {
+        revenue: { label: messages.dashboard.chartRevenueLabel, color: "hsl(221 83% 53%)" },
+        bookings: { label: messages.dashboard.chartBookingsLabel, color: "hsl(142 71% 45%)" },
+    };
+    const bookingStatusConfig = {
+        confirmed: { label: messages.dashboard.statusConfirmedLabel, color: "hsl(142 71% 45%)" },
+        completed: { label: messages.dashboard.statusCompletedLabel, color: "hsl(221 83% 53%)" },
+        in_progress: { label: messages.dashboard.statusInProgressLabel, color: "hsl(47 96% 53%)" },
+        draft: { label: messages.dashboard.statusDraftLabel, color: "hsl(215 14% 55%)" },
+        cancelled: { label: messages.dashboard.statusCancelledLabel, color: "hsl(0 84% 60%)" },
+    };
+    const monthlyBookingsConfig = {
+        count: { label: messages.dashboard.chartBookingsLabel, color: "hsl(221 83% 53%)" },
+    };
+    const localizedStatusBreakdown = (bookings?.countsByStatus ?? [])
+        .filter((entry) => entry.count > 0)
+        .map((entry) => ({
+        // Keep the raw status key so the chart config (keyed by
+        // `confirmed`/`completed`/...) can resolve the localized label
+        // for both the legend and the tooltip.
+        status: entry.status,
+        count: entry.count,
+        fill: getStatusColor(entry.status),
+    }));
+    const upcoming = bookings?.upcomingDepartures.items ?? [];
+    const hasRevenueData = monthlyRevenue.some((entry) => entry.revenue > 0);
+    const hasMonthlyBookingsData = monthlyBookings.some((entry) => entry.count > 0);
+    const hasBookingStatusData = localizedStatusBreakdown.length > 0;
+    const hasOutstandingInvoices = outstandingInvoiceCount > 0 || outstandingTopN.length > 0;
+    const allAggregatesLoaded = !bookingsPending && !productsPending && !suppliersPending && !financePending;
+    const isBrandNewTenant = allAggregatesLoaded &&
+        (bookings?.total ?? 0) === 0 &&
+        (products?.total ?? 0) === 0 &&
+        (suppliers?.total ?? 0) === 0 &&
+        (finance?.total ?? 0) === 0;
+    const resolvedEmptyStates = buildDashboardEmptyStates(messages, emptyStates);
+    const dashboardMetrics = {
+        totalRevenueCents,
+        confirmedBookings,
+        totalPax,
+        activeProducts,
+        outstandingAmount,
+        outstandingInvoiceCount,
+        defaultCurrency,
+    };
+    const widgetProps = {
+        bookingsAggregates: bookings ?? null,
+        productsAggregates: products ?? null,
+        suppliersAggregates: suppliers ?? null,
+        financeAggregates: finance ?? null,
+        metrics: dashboardMetrics,
+        emptyStates: resolvedEmptyStates,
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-6 p-6", children: [_jsx(AdminWidgetSlotRenderer, { slot: "dashboard.header", props: widgetProps }), isBrandNewTenant ? (_jsxs(_Fragment, { children: [_jsxs(DashboardOnboardingEmptyState, { emptyState: resolvedEmptyStates.onboarding, children: [_jsx(OnboardingAction, { href: "/products", icon: _jsx(PackagePlus, { className: "size-4" }), title: messages.dashboard.onboardingProductsTitle, description: messages.dashboard.onboardingProductsDescription, actionLabel: messages.dashboard.onboardingProductsAction }), _jsx(OnboardingAction, { href: "/suppliers", icon: _jsx(Users, { className: "size-4" }), title: messages.dashboard.onboardingSuppliersTitle, description: messages.dashboard.onboardingSuppliersDescription, actionLabel: messages.dashboard.onboardingSuppliersAction }), _jsx(OnboardingAction, { href: "/contacts", icon: _jsx(Users, { className: "size-4" }), title: messages.dashboard.onboardingCustomersTitle, description: messages.dashboard.onboardingCustomersDescription, actionLabel: messages.dashboard.onboardingCustomersAction }), _jsx(OnboardingAction, { href: "/bookings", icon: _jsx(CalendarPlus, { className: "size-4" }), title: messages.dashboard.onboardingBookingsTitle, description: messages.dashboard.onboardingBookingsDescription, actionLabel: messages.dashboard.onboardingBookingsAction })] }), _jsx(AdminWidgetSlotRenderer, { slot: "dashboard.footer", props: widgetProps })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-4", children: [_jsx(KpiCard, { title: messages.dashboard.totalRevenueTitle, value: formatCurrency(totalRevenueCents, defaultCurrency), description: messages.dashboard.totalRevenueDescription, icon: _jsx(DollarSign, { className: "h-4 w-4 text-muted-foreground" }), trend: revenueTrend, trendLabel: messages.dashboard.trendVsLastMonth, empty: !hasRevenueData, emptyLabel: messages.dashboard.metricUnavailable, isLoading: bookingsPending }), _jsx(KpiCard, { title: messages.dashboard.activeBookingsTitle, value: confirmedBookings.toString(), description: formatMessage(messages.dashboard.activeBookingsDescription, {
+                                    count: bookings?.total ?? 0,
+                                }), icon: _jsx(CalendarCheck, { className: "h-4 w-4 text-muted-foreground" }), trend: bookingTrend, trendLabel: messages.dashboard.trendVsLastMonth, empty: (bookings?.total ?? 0) === 0, emptyLabel: messages.dashboard.metricUnavailable, isLoading: bookingsPending }), _jsx(KpiCard, { title: messages.dashboard.totalTravelersTitle, value: totalPax.toLocaleString(), description: messages.dashboard.totalTravelersDescription, icon: _jsx(Users, { className: "h-4 w-4 text-muted-foreground" }), empty: totalPax === 0 && (bookings?.total ?? 0) === 0, emptyLabel: messages.dashboard.metricUnavailable, isLoading: bookingsPending }), _jsx(KpiCard, { title: messages.dashboard.activeProductsTitle, value: activeProducts.toString(), description: formatMessage(messages.dashboard.activeProductsDescription, {
+                                    products: totalProducts,
+                                    suppliers: totalSuppliers,
+                                }), icon: _jsx(Package, { className: "h-4 w-4 text-muted-foreground" }), empty: activeProducts === 0 && totalProducts === 0, emptyLabel: messages.dashboard.metricUnavailable, isLoading: productsPending || suppliersPending })] }), _jsx(AdminWidgetSlotRenderer, { slot: "dashboard.after-kpis", props: widgetProps }), _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: messages.dashboard.revenueTrendTitle }), _jsx(CardDescription, { children: messages.dashboard.revenueTrendDescription })] }), _jsx(CardContent, { children: bookingsPending ? (_jsx(DashboardAreaChartSkeleton, {})) : !hasRevenueData ? (_jsx(DashboardEmptyState, { emptyState: resolvedEmptyStates.revenueTrend })) : (_jsx(ChartContainer, { config: revenueChartConfig, className: "h-[300px] w-full", children: _jsxs(AreaChart, { data: monthlyRevenue, margin: { top: 10, right: 10, left: 0, bottom: 0 }, children: [_jsx("defs", { children: _jsxs("linearGradient", { id: "fillRevenue", x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "5%", stopColor: "hsl(221 83% 53%)", stopOpacity: 0.3 }), _jsx("stop", { offset: "95%", stopColor: "hsl(221 83% 53%)", stopOpacity: 0 })] }) }), _jsx(CartesianGrid, { vertical: false }), _jsx(XAxis, { dataKey: "month", tickLine: false, axisLine: false, tickMargin: 8 }), _jsx(YAxis, { tickLine: false, axisLine: false, tickMargin: 8, tickFormatter: (value) => `$${(value / 1000).toFixed(0)}k` }), _jsx(ChartTooltip, { content: _jsx(ChartTooltipContent, { formatter: (value) => typeof value === "number"
+                                                        ? formatCurrency(value * 100, defaultCurrency)
+                                                        : String(value) }) }), _jsx(Area, { type: "monotone", dataKey: "revenue", stroke: "hsl(221 83% 53%)", fill: "url(#fillRevenue)", strokeWidth: 2 })] }) })) })] }), _jsxs("div", { className: "grid gap-4 lg:grid-cols-2", children: [_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: messages.dashboard.monthlyBookingsTitle }), _jsx(CardDescription, { children: messages.dashboard.monthlyBookingsDescription })] }), _jsx(CardContent, { children: bookingsPending ? (_jsx(DashboardBarChartSkeleton, {})) : !hasMonthlyBookingsData ? (_jsx(DashboardEmptyState, { emptyState: resolvedEmptyStates.monthlyBookings, compact: true })) : (_jsx(ChartContainer, { config: monthlyBookingsConfig, className: "h-[250px] w-full", children: _jsxs(BarChart, { data: monthlyBookings, margin: { top: 10, right: 10, left: 0, bottom: 0 }, children: [_jsx(CartesianGrid, { vertical: false }), _jsx(XAxis, { dataKey: "month", tickLine: false, axisLine: false, tickMargin: 8 }), _jsx(YAxis, { tickLine: false, axisLine: false, tickMargin: 8, allowDecimals: false }), _jsx(ChartTooltip, { content: _jsx(ChartTooltipContent, {}) }), _jsx(Bar, { dataKey: "count", fill: "hsl(221 83% 53%)", radius: [4, 4, 0, 0] })] }) })) })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: messages.dashboard.bookingStatusTitle }), _jsx(CardDescription, { children: messages.dashboard.bookingStatusDescription })] }), _jsx(CardContent, { children: bookingsPending ? (_jsx(DashboardPieChartSkeleton, {})) : !hasBookingStatusData ? (_jsx(DashboardEmptyState, { emptyState: resolvedEmptyStates.bookingStatus })) : (_jsx(ChartContainer, { config: bookingStatusConfig, className: "mx-auto h-[300px] w-full", children: _jsxs(PieChart, { children: [_jsx(ChartTooltip, { content: _jsx(ChartTooltipContent, { nameKey: "status", hideLabel: true }) }), _jsx(Pie, { data: localizedStatusBreakdown, dataKey: "count", nameKey: "status", cx: "50%", cy: "50%", innerRadius: 60, outerRadius: 100, paddingAngle: 2, children: localizedStatusBreakdown.map((entry) => (_jsx(Cell, { fill: entry.fill }, entry.status))) }), _jsx(ChartLegend, { content: _jsx(ChartLegendContent, { nameKey: "status" }) })] }) })) })] })] }), _jsxs("div", { className: "grid gap-4 lg:grid-cols-2", children: [_jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between", children: [_jsxs("div", { children: [_jsx(CardTitle, { children: messages.dashboard.upcomingDeparturesTitle }), _jsx(CardDescription, { children: messages.dashboard.upcomingDeparturesDescription })] }), _jsx(Link, { to: "/bookings", className: "text-sm text-primary hover:underline", children: messages.dashboard.viewAll })] }), _jsx(CardContent, { children: bookingsPending ? (_jsx(DashboardUpcomingListSkeleton, {})) : upcoming.length === 0 ? (_jsx(DashboardEmptyState, { emptyState: resolvedEmptyStates.upcomingDepartures, compact: true })) : (_jsx("div", { className: "space-y-3", children: upcoming.map((booking) => (_jsxs(Link, { to: "/bookings/$id", params: { id: booking.id }, className: "flex items-center justify-between rounded-lg border p-3 transition-colors hover:bg-muted/50", children: [_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-sm font-medium", children: booking.bookingNumber ?? booking.id.slice(0, 8) }), _jsxs("span", { className: "text-xs text-muted-foreground", children: [booking.startDate
+                                                                        ? new Date(booking.startDate).toLocaleDateString(resolvedLocale, {
+                                                                            month: "short",
+                                                                            day: "numeric",
+                                                                            year: "numeric",
+                                                                        })
+                                                                        : messages.dashboard.noDate, booking.pax
+                                                                        ? ` · ${formatMessage(messages.dashboard.paxCount, {
+                                                                            count: booking.pax,
+                                                                        })}`
+                                                                        : ""] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [booking.sellAmountCents != null && (_jsx("span", { className: "text-sm font-medium tabular-nums", children: formatCurrency(booking.sellAmountCents, booking.sellCurrency ?? defaultCurrency) })), _jsx(Badge, { variant: "outline", className: "capitalize", children: booking.status.replace(/_/g, " ") })] })] }, booking.id))) })) })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: messages.dashboard.outstandingInvoicesTitle }), _jsx(CardDescription, { children: messages.dashboard.outstandingInvoicesDescription })] }), _jsx(CardContent, { children: financePending ? (_jsx(DashboardOutstandingInvoicesSkeleton, {})) : !hasOutstandingInvoices ? (_jsx(DashboardEmptyState, { emptyState: resolvedEmptyStates.outstandingInvoices })) : (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between rounded-lg border border-dashed p-4", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium", children: messages.dashboard.outstandingTotalTitle }), _jsx("p", { className: "text-xs text-muted-foreground", children: formatMessage(messages.dashboard.outstandingInvoicesDue, {
+                                                                        count: outstandingInvoiceCount,
+                                                                    }) })] }), _jsx("p", { className: "text-lg font-semibold", children: formatCurrency(outstandingAmount, outstandingPrimaryCurrency) })] }), outstandingTopN.map((invoice) => (_jsxs("div", { className: "flex items-center justify-between rounded-lg border p-3", children: [_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-sm font-medium", children: invoice.invoiceNumber ?? invoice.id.slice(0, 8) }), _jsx("span", { className: "text-xs text-muted-foreground", children: invoice.dueDate
+                                                                        ? new Date(invoice.dueDate).toLocaleDateString(resolvedLocale, {
+                                                                            month: "short",
+                                                                            day: "numeric",
+                                                                            year: "numeric",
+                                                                        })
+                                                                        : invoice.issueDate
+                                                                            ? new Date(invoice.issueDate).toLocaleDateString(resolvedLocale, {
+                                                                                month: "short",
+                                                                                day: "numeric",
+                                                                                year: "numeric",
+                                                                            })
+                                                                            : messages.dashboard.noIssueDate })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm font-medium", children: formatCurrency(invoice.balanceDueCents, invoice.currency) }), _jsx(Badge, { variant: "secondary", className: "capitalize", children: invoice.status })] })] }, invoice.id)))] })) })] })] }), _jsx(AdminWidgetSlotRenderer, { slot: "dashboard.footer", props: widgetProps })] }))] }));
+}