@voyant-travel/operations-react 0.0.0

package/dist/availability/components/availability-slot-detail-financials.js

@@ -0,0 +1,92 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge, Card, CardContent, cn } from "@voyant-travel/ui/components";
+export function KpiStrip({ slot, rollup, formatCurrency, i18nLabels, }) {
+    const paxValue = slot.unlimited ? "∞" : `${slot.remainingPax ?? 0} / ${slot.initialPax ?? 0}`;
+    const renderAmount = (pick) => {
+        if (rollup.entries.length === 0 || !rollup.primaryCurrency) {
+            return i18nLabels.noValue;
+        }
+        const primary = rollup.entries.find((entry) => entry.currency === rollup.primaryCurrency);
+        return primary
+            ? formatCurrency(pick(primary) / 100, primary.currency)
+            : formatCurrency(0, rollup.primaryCurrency);
+    };
+    const renderHint = (pick) => {
+        if (rollup.entries.length <= 1)
+            return undefined;
+        const others = rollup.entries.filter((entry) => entry.currency !== rollup.primaryCurrency);
+        if (others.length === 0)
+            return i18nLabels.mixedHint;
+        return `+ ${others.map((entry) => formatCurrency(pick(entry) / 100, entry.currency)).join(" · ")}`;
+    };
+    const primary = rollup.primaryCurrency
+        ? rollup.entries.find((entry) => entry.currency === rollup.primaryCurrency)
+        : null;
+    const paidPercent = primary && primary.sellCents > 0
+        ? Math.round((primary.paidCents / primary.sellCents) * 100)
+        : null;
+    const outstandingPercent = paidPercent != null ? Math.max(0, 100 - paidPercent) : null;
+    return (_jsxs("div", { className: "grid grid-cols-2 gap-4 sm:grid-cols-4", children: [_jsx(StatCard, { label: i18nLabels.pax, children: paxValue }), _jsx(StatCard, { label: i18nLabels.total, hint: renderHint((t) => t.sellCents), children: renderAmount((t) => t.sellCents) }), _jsx(StatCard, { label: i18nLabels.paid, hint: renderHint((t) => t.paidCents), badge: paidPercent != null ? renderPercentBadge(paidPercent, paidBadgeClass) : null, children: renderAmount((t) => t.paidCents) }), _jsx(StatCard, { label: i18nLabels.outstanding, hint: renderHint((t) => t.outstandingCents), badge: outstandingPercent != null
+                    ? renderPercentBadge(outstandingPercent, outstandingBadgeClass)
+                    : null, children: renderAmount((t) => t.outstandingCents) })] }));
+}
+function StatCard({ label, children, hint, badge, }) {
+    return (_jsx(Card, { children: _jsxs(CardContent, { className: "flex flex-col gap-1", children: [_jsx("div", { className: "text-xs font-medium text-muted-foreground", children: label }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("div", { className: "text-xl font-semibold tabular-nums leading-none", children: children }), badge] }), hint ? _jsx("div", { className: "text-xs text-muted-foreground", children: hint }) : null] }) }));
+}
+function renderPercentBadge(percent, classFor) {
+    return (_jsxs(Badge, { variant: "outline", className: cn("border-transparent", classFor(percent)), children: [percent, "%"] }));
+}
+function paidBadgeClass(percent) {
+    if (percent <= 0)
+        return "bg-red-500/10 text-red-600 dark:text-red-400";
+    if (percent >= 100)
+        return "bg-green-500/10 text-green-600 dark:text-green-400";
+    return "bg-yellow-500/10 text-yellow-700 dark:text-yellow-400";
+}
+function outstandingBadgeClass(percent) {
+    if (percent <= 0)
+        return "bg-green-500/10 text-green-600 dark:text-green-400";
+    if (percent >= 100)
+        return "bg-red-500/10 text-red-600 dark:text-red-400";
+    return "bg-yellow-500/10 text-yellow-700 dark:text-yellow-400";
+}
+const FINANCIAL_BOOKING_STATUSES = new Set([
+    "on_hold",
+    "awaiting_payment",
+    "confirmed",
+    "in_progress",
+    "completed",
+]);
+export function aggregateSlotFinancials(bookings, productCurrency) {
+    const byCurrency = new Map();
+    for (const booking of bookings) {
+        if (!FINANCIAL_BOOKING_STATUSES.has(booking.status))
+            continue;
+        const currency = booking.sellCurrency;
+        if (!currency)
+            continue;
+        const sell = booking.sellAmountCents ?? 0;
+        const paid = booking.paidAmountCents ?? 0;
+        if (sell <= 0 && paid <= 0)
+            continue;
+        const entry = byCurrency.get(currency) ?? {
+            currency,
+            sellCents: 0,
+            paidCents: 0,
+            outstandingCents: 0,
+        };
+        entry.sellCents += sell;
+        entry.paidCents += paid;
+        byCurrency.set(currency, entry);
+    }
+    for (const entry of byCurrency.values()) {
+        entry.outstandingCents = Math.max(0, entry.sellCents - entry.paidCents);
+    }
+    const entries = [...byCurrency.values()].sort((left, right) => right.sellCents - left.sellCents);
+    const primaryCurrency = (productCurrency && byCurrency.has(productCurrency) ? productCurrency : null) ??
+        entries[0]?.currency ??
+        productCurrency ??
+        null;
+    return { primaryCurrency, entries };
+}

package/dist/availability/components/availability-slot-detail-meta.d.ts

@@ -0,0 +1,38 @@
+import { type AvailabilitySlotDetail } from "../index.js";
+export declare function MetaTab({ slot, productName, statusLabel, onOpenProduct, onOpenStartTime, i18n: msg, }: {
+    slot: AvailabilitySlotDetail;
+    productName: string | null;
+    statusLabel: string;
+    onOpenProduct?: (productId: string) => void;
+    onOpenStartTime?: (startTimeId: string) => void;
+    i18n: {
+        title: string;
+        slotIdLabel: string;
+        ruleLabel: string;
+        startTimeLabel: string;
+        endsAtLabel: string;
+        createdLabel: string;
+        updatedLabel: string;
+        productLabel: string;
+        statusLabel: string;
+        timezoneLabel: string;
+        noValue: string;
+        format: (value: string | Date) => string;
+    };
+}): import("react/jsx-runtime").JSX.Element;
+export declare function formatSlotDateRange(slot: {
+    dateLocal: string;
+    startsAt: string;
+    endsAt: string | null;
+    timezone: string;
+}): string;
+export declare function computeSlotNightsLabel(slot: {
+    nights: number | null;
+    days: number | null;
+}, labels: {
+    nightSingular: string;
+    nightsPlural: string;
+    daySingular: string;
+    daysPlural: string;
+}): string | null;
+//# sourceMappingURL=availability-slot-detail-meta.d.ts.map

package/dist/availability/components/availability-slot-detail-meta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"availability-slot-detail-meta.d.ts","sourceRoot":"","sources":["../../../src/availability/components/availability-slot-detail-meta.tsx"],"names":[],"mappings":"AAKA,OAAO,EACL,KAAK,sBAAsB,EAI5B,MAAM,aAAa,CAAA;AAGpB,wBAAgB,OAAO,CAAC,EACtB,IAAI,EACJ,WAAW,EACX,WAAW,EACX,aAAa,EACb,eAAe,EACf,IAAI,EAAE,GAAG,GACV,EAAE;IACD,IAAI,EAAE,sBAAsB,CAAA;IAC5B,WAAW,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,WAAW,EAAE,MAAM,CAAA;IACnB,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;IAC3C,eAAe,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/C,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM,CAAA;QACb,WAAW,EAAE,MAAM,CAAA;QACnB,SAAS,EAAE,MAAM,CAAA;QACjB,cAAc,EAAE,MAAM,CAAA;QACtB,WAAW,EAAE,MAAM,CAAA;QACnB,YAAY,EAAE,MAAM,CAAA;QACpB,YAAY,EAAE,MAAM,CAAA;QACpB,YAAY,EAAE,MAAM,CAAA;QACpB,WAAW,EAAE,MAAM,CAAA;QACnB,aAAa,EAAE,MAAM,CAAA;QACrB,OAAO,EAAE,MAAM,CAAA;QACf,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,MAAM,CAAA;KACzC,CAAA;CACF,2CAyFA;AAED,wBAAgB,mBAAmB,CAAC,IAAI,EAAE;IACxC,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,QAAQ,EAAE,MAAM,CAAA;CACjB,GAAG,MAAM,CAIT;AAMD,wBAAgB,sBAAsB,CACpC,IAAI,EAAE;IAAE,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,EACpD,MAAM,EAAE;IACN,aAAa,EAAE,MAAM,CAAA;IACrB,YAAY,EAAE,MAAM,CAAA;IACpB,WAAW,EAAE,MAAM,CAAA;IACnB,UAAU,EAAE,MAAM,CAAA;CACnB,GACA,MAAM,GAAG,IAAI,CAYf"}

package/dist/availability/components/availability-slot-detail-meta.js

@@ -0,0 +1,68 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge, Button } from "@voyant-travel/ui/components";
+import { Info } from "lucide-react";
+import { slotLocalEnd, slotLocalStart, slotStatusTone, } from "../index.js";
+import { slotStatusToneClass } from "./slot-status-tone.js";
+export function MetaTab({ slot, productName, statusLabel, onOpenProduct, onOpenStartTime, i18n: msg, }) {
+    const rows = [
+        {
+            label: msg.slotIdLabel,
+            value: _jsx("span", { className: "font-mono text-xs", children: slot.id }),
+        },
+        {
+            label: msg.productLabel,
+            value: slot.productId && onOpenProduct ? (_jsx(Button, { variant: "link", className: "h-auto p-0 text-right", onClick: () => onOpenProduct(slot.productId), children: productName ?? slot.productId })) : ((productName ??
+                slot.productId ?? _jsx("span", { className: "text-muted-foreground", children: msg.noValue }))),
+        },
+        {
+            label: msg.statusLabel,
+            value: (_jsx(Badge, { variant: "outline", className: slotStatusToneClass[slotStatusTone[slot.status]], children: statusLabel })),
+        },
+        {
+            label: msg.timezoneLabel,
+            value: _jsx(Badge, { variant: "outline", children: slot.timezone }),
+        },
+        {
+            label: msg.endsAtLabel,
+            value: slot.endsAt ? (formatSlotLocalDateTime(slotLocalEnd(slot) ?? slotLocalStart(slot))) : (_jsx("span", { className: "text-muted-foreground", children: msg.noValue })),
+        },
+    ];
+    if (slot.availabilityRuleId) {
+        rows.push({
+            label: msg.ruleLabel,
+            value: _jsx("span", { className: "font-mono text-xs", children: slot.availabilityRuleId }),
+        });
+    }
+    if (slot.startTimeId) {
+        rows.push({
+            label: msg.startTimeLabel,
+            value: onOpenStartTime ? (_jsx(Button, { variant: "link", className: "h-auto p-0 text-right font-mono text-xs", onClick: () => onOpenStartTime(slot.startTimeId ?? ""), children: slot.startTimeId })) : (_jsx("span", { className: "font-mono text-xs", children: slot.startTimeId })),
+        });
+    }
+    rows.push({ label: msg.createdLabel, value: msg.format(slot.createdAt) });
+    rows.push({ label: msg.updatedLabel, value: msg.format(slot.updatedAt) });
+    return (_jsxs("div", { "data-slot": "slot-metadata", className: "flex flex-col gap-3", children: [_jsxs("h2", { className: "flex items-center gap-2 text-base font-semibold", children: [_jsx(Info, { className: "h-4 w-4 text-muted-foreground", "aria-hidden": "true" }), msg.title] }), _jsx("div", { className: "overflow-hidden rounded-md border bg-background", children: _jsx("dl", { className: "divide-y", children: rows.map((row) => (_jsxs("div", { className: "flex items-center justify-between gap-4 px-4 py-3 text-sm", children: [_jsx("dt", { className: "text-muted-foreground", children: row.label }), _jsx("dd", { className: "text-right", children: row.value })] }, row.label))) }) })] }));
+}
+export function formatSlotDateRange(slot) {
+    const start = formatSlotLocalDateTime(slotLocalStart(slot));
+    if (!slot.endsAt)
+        return start;
+    return `${start} → ${formatSlotLocalDateTime(slotLocalEnd(slot) ?? slotLocalStart(slot))}`;
+}
+function formatSlotLocalDateTime(value) {
+    return `${value.date} ${value.time}`;
+}
+export function computeSlotNightsLabel(slot, labels) {
+    if (slot.nights && slot.nights > 0) {
+        return slot.nights === 1
+            ? labels.nightSingular
+            : labels.nightsPlural.replace("{count}", String(slot.nights));
+    }
+    if (slot.days && slot.days > 0) {
+        return slot.days === 1
+            ? labels.daySingular
+            : labels.daysPlural.replace("{count}", String(slot.days));
+    }
+    return null;
+}