@m5kdev/web-ui 0.1.3 → 0.1.5

package/dist/src/modules/auth/components/UserPreferences.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Form, Input, Select, SelectItem, Switch } from "@heroui/react";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+export function UserPreferences({ schema, controls, preferences, isLoading, isPending, updatePreferences, }) {
+    const { t } = useTranslation("web-ui");
+    function handleSubmit(event) {
+        event.preventDefault();
+        const formData = new FormData(event.currentTarget);
+        const keys = Object.keys(controls);
+        const raw = {};
+        for (const key of keys) {
+            const control = controls[key];
+            if (control.element === "switch") {
+                raw[String(key)] = formData.get(String(key)) != null;
+            }
+            if (control.element === "select") {
+                raw[String(key)] = formData.get(String(key));
+            }
+            if (control.element === "number") {
+                const value = formData.get(String(key));
+                raw[String(key)] = value == null || value === "" ? undefined : Number(value);
+            }
+        }
+        const result = schema.safeParse(raw);
+        if (result.success) {
+            updatePreferences(result.data, {
+                noOptimisticUpdate: true,
+                onSuccess: () => {
+                    toast.success("Preferences updated");
+                },
+                onError: () => {
+                    toast.error("Failed to update preferences");
+                },
+            });
+        }
+        else {
+            // eslint-disable-next-line no-console
+            console.error(result.error);
+        }
+    }
+    const keys = Object.keys(controls);
+    if (isLoading) {
+        // FIXME: Add a loading state
+        return _jsx("div", { children: "Loading..." });
+    }
+    return (_jsxs(Form, { onSubmit: handleSubmit, className: "p-6 flex flex-col gap-4", children: [_jsx("h1", { className: "text-2xl font-bold", children: t("web-ui:preferences.title") }), keys.map((key) => {
+                const control = controls[key];
+                switch (control.element) {
+                    case "switch":
+                        return (_jsx(Switch, { name: String(key), value: "on", defaultSelected: Boolean(preferences[key]), children: control.label }, String(key)));
+                    case "select":
+                        return (_jsx(Select, { name: String(key), label: control.label, labelPlacement: "outside-top", defaultSelectedKeys: [String(preferences[key])], children: (control.options ?? []).map((option) => (_jsx(SelectItem, { children: option.label }, option.value))) }, String(key)));
+                    case "number":
+                        return (_jsx(Input, { name: String(key), type: "number", label: control.label, labelPlacement: "outside-top", defaultValue: String(preferences[key] ?? ""), min: control.min, max: control.max, step: control.step }, String(key)));
+                    default:
+                        return _jsx("div", { children: "Invalid control" }, String(key));
+                }
+            }), _jsx(Button, { type: "submit", color: "success", isLoading: isPending, children: t("web-ui:preferences.submit") })] }));
+}

package/dist/src/modules/auth/components/WaitlistCard.d.ts

@@ -0,0 +1,6 @@
+import type { UseBackendTRPC } from "#types";
+interface WaitlistCardProps {
+    useTRPC: UseBackendTRPC;
+}
+export declare function WaitlistCard({ useTRPC }: WaitlistCardProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/modules/auth/components/WaitlistCard.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Alert, Button, Card, CardBody, CardHeader, Input } from "@heroui/react";
+import { useMutation } from "@tanstack/react-query";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+export function WaitlistCard({ useTRPC }) {
+    const { t } = useTranslation();
+    const trpc = useTRPC();
+    const [email, setEmail] = useState("");
+    const [joined, setJoined] = useState(false);
+    const { mutate } = useMutation(trpc.auth.joinWaitlist.mutationOptions());
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        mutate({ email }, {
+            onSuccess: () => {
+                setJoined(true);
+            },
+            onError: (error) => {
+                toast.error(error instanceof Error
+                    ? error.message
+                    : t("web-ui:auth.waitlist.error", {
+                        defaultValue: "Failed to join waitlist. Please try again.",
+                    }));
+            },
+        });
+    };
+    if (joined) {
+        return (_jsx(Card, { children: _jsx(CardBody, { className: "pt-6", children: _jsx(Alert, { color: "success", variant: "faded", title: t("web-ui:auth.waitlist.success") }) }) }));
+    }
+    return (_jsxs(Card, { children: [_jsxs(CardHeader, { className: "text-center flex flex-col gap-1", children: [_jsx("p", { className: "text-xl font-semibold", children: t("web-ui:auth.waitlist.title") }), _jsx("p", { className: "text-sm text-default-600", children: t("web-ui:auth.waitlist.description") })] }), _jsx(CardBody, { children: _jsxs("form", { onSubmit: handleSubmit, className: "grid gap-6", children: [_jsx("div", { className: "grid gap-2", children: _jsx(Input, { type: "email", label: t("web-ui:auth.waitlist.email"), labelPlacement: "outside", placeholder: t("web-ui:auth.waitlist.placeholder.email"), isRequired: true, variant: "bordered", value: email, onChange: (e) => setEmail(e.target.value) }) }), _jsx(Button, { type: "submit", color: "primary", children: t("web-ui:auth.waitlist.button") })] }) })] }));
+}

package/dist/src/modules/auth/components/WaitlistCodeValidation.d.ts

@@ -0,0 +1,7 @@
+import type { UseBackendTRPC } from "#types";
+interface WaitlistCodeValidationProps {
+    useTRPC: UseBackendTRPC;
+    code: string;
+}
+export declare function WaitlistCodeValidation({ useTRPC, code }: WaitlistCodeValidationProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/src/modules/auth/components/WaitlistCodeValidation.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Alert } from "@heroui/react";
+import { useQuery } from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
+export function WaitlistCodeValidation({ useTRPC, code }) {
+    const { t } = useTranslation();
+    const trpc = useTRPC();
+    const { data, isLoading, error } = useQuery(trpc.auth.validateWaitlistCode.queryOptions({ code }));
+    const status = data?.status;
+    const className = "p-1";
+    if (isLoading) {
+        return (_jsx(Alert, { className: className, color: "default", variant: "faded", title: t("web-ui:auth.waitlist.validatingCode", {
+                defaultValue: "Validating the invitation code...",
+            }) }));
+    }
+    if (error) {
+        return (_jsx(Alert, { className: className, color: "danger", variant: "faded", title: t("web-ui:auth.waitlist.codeError", {
+                defaultValue: "An error occurred while validating the invitation code.",
+            }) }));
+    }
+    if (status === "VALID") {
+        return (_jsx(Alert, { className: className, color: "success", variant: "faded", title: t("web-ui:auth.waitlist.codeValid", {
+                defaultValue: "Invitation code is valid. You can proceed.",
+            }) }));
+    }
+    if (status) {
+        let message = t("web-ui:auth.waitlist.invalidCode", {
+            defaultValue: "Invalid invitation code.",
+        });
+        if (status === "EXPIRED") {
+            message = t("web-ui:auth.waitlist.expiredCode", {
+                defaultValue: "Invitation code has expired.",
+            });
+        }
+        else if (status === "NOT_FOUND") {
+            message = t("web-ui:auth.waitlist.codeNotFound", {
+                defaultValue: "Invitation code not found.",
+            });
+        }
+        return _jsx(Alert, { className: className, color: "danger", variant: "faded", title: message });
+    }
+    return null;
+}

package/dist/src/modules/billing/components/BillingBetaPage.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+interface BillingBetaPageProps {
+    appName: string;
+    className?: string;
+    footer?: ReactNode;
+}
+export declare function BillingBetaPage({ appName, className, footer }: BillingBetaPageProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/modules/billing/components/BillingBetaPage.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Bell, CheckCircle2, Clock3, Sparkles } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { Badge } from "#components/ui/badge";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "#components/ui/card";
+import { Separator } from "#components/ui/separator";
+import { cn } from "#utils";
+export function BillingBetaPage({ appName, className, footer }) {
+    const { t } = useTranslation("web-ui");
+    return (_jsxs("div", { className: cn("mx-auto max-w-5xl px-4 py-12 md:py-16", className), children: [_jsxs("div", { className: "flex flex-col items-center text-center gap-4", children: [_jsx(Badge, { variant: "secondary", className: "uppercase tracking-wide", children: t("billing.beta.badge") }), _jsxs("div", { className: "space-y-3", children: [_jsx("h1", { className: "text-3xl md:text-4xl font-semibold tracking-tight", children: t("billing.title") }), _jsx("p", { className: "text-muted-foreground max-w-2xl", children: t("billing.subtitle", { appName }) })] })] }), _jsx(Separator, { className: "my-8" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6", children: [_jsxs(Card, { children: [_jsxs(CardHeader, { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center gap-2 text-green-600 dark:text-green-500", children: [_jsx(Sparkles, { className: "h-5 w-5 shrink-0" }), _jsx(CardTitle, { children: t("billing.card.free.title") })] }), _jsx(CardDescription, { children: t("billing.card.free.description") })] }), _jsxs(CardContent, { children: [_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "text-4xl font-bold tracking-tight", children: t("billing.card.free.price") }), _jsx("span", { className: "text-muted-foreground", children: t("billing.card.free.priceSuffix") })] }), _jsxs("ul", { className: "mt-4 space-y-2 text-sm", children: [_jsxs("li", { className: "flex items-center gap-2", children: [_jsx(CheckCircle2, { className: "h-4 w-4 shrink-0 text-green-600" }), " ", t("billing.card.free.feature.fullAccess")] }), _jsxs("li", { className: "flex items-center gap-2", children: [_jsx(CheckCircle2, { className: "h-4 w-4 shrink-0 text-green-600" }), " ", t("billing.card.free.feature.noCard")] }), _jsxs("li", { className: "flex items-center gap-2", children: [_jsx(CheckCircle2, { className: "h-4 w-4 shrink-0 text-green-600" }), " ", t("billing.card.free.feature.riskFree")] })] })] })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center gap-2 text-blue-600 dark:text-blue-500", children: [_jsx(Clock3, { className: "h-5 w-5 shrink-0" }), _jsx(CardTitle, { children: t("billing.card.progress.title") })] }), _jsx(CardDescription, { children: t("billing.card.progress.description") })] }), _jsx(CardContent, { children: _jsxs("ul", { className: "space-y-2 text-sm", children: [_jsxs("li", { className: "flex items-center gap-2", children: [_jsx(CheckCircle2, { className: "h-4 w-4 shrink-0 text-blue-600" }), " ", t("billing.card.progress.feature.transparentPlans")] }), _jsxs("li", { className: "flex items-center gap-2", children: [_jsx(CheckCircle2, { className: "h-4 w-4 shrink-0 text-blue-600" }), " ", t("billing.card.progress.feature.fairValue")] }), _jsxs("li", { className: "flex items-center gap-2", children: [_jsx(CheckCircle2, { className: "h-4 w-4 shrink-0 text-blue-600" }), " ", t("billing.card.progress.feature.simpleBilling")] })] }) })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center gap-2 text-amber-600 dark:text-amber-500", children: [_jsx(Bell, { className: "h-5 w-5 shrink-0" }), _jsx(CardTitle, { children: t("billing.card.notice.title") })] }), _jsx(CardDescription, { children: t("billing.card.notice.description") })] }), _jsx(CardContent, { children: _jsxs("ul", { className: "space-y-2 text-sm", children: [_jsxs("li", { className: "flex items-center gap-2", children: [_jsx(CheckCircle2, { className: "h-4 w-4 shrink-0 text-amber-600" }), " ", t("billing.card.notice.feature.timeToDecide")] }), _jsxs("li", { className: "flex items-center gap-2", children: [_jsx(CheckCircle2, { className: "h-4 w-4 shrink-0 text-amber-600" }), " ", t("billing.card.notice.feature.safeData")] }), _jsxs("li", { className: "flex items-center gap-2", children: [_jsx(CheckCircle2, { className: "h-4 w-4 shrink-0 text-amber-600" }), " ", t("billing.card.notice.feature.autoFreeTier")] })] }) })] })] }), footer] }));
+}

package/dist/src/modules/billing/components/BillingInvoicePage.d.ts

@@ -0,0 +1,7 @@
+import type { UseBackendTRPC } from "#types";
+interface BillingInvoicePageProps {
+    useTRPC: UseBackendTRPC;
+    serverUrl: string;
+}
+export declare function BillingInvoicePage({ useTRPC, serverUrl }: BillingInvoicePageProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/modules/billing/components/BillingInvoicePage.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Card, CardBody, CardHeader, Chip, Link, Spinner, Table, TableBody, TableCell, TableColumn, TableHeader, TableRow, } from "@heroui/react";
+import { useSubscription } from "@m5kdev/frontend/modules/billing/hooks/useSubscription";
+import { useQuery } from "@tanstack/react-query";
+import { AlertCircle, CheckCircle2, ExternalLink } from "lucide-react";
+export function BillingInvoicePage({ useTRPC, serverUrl }) {
+    const trpc = useTRPC();
+    const { data: invoices, isLoading } = useQuery(trpc.billing.listInvoices.queryOptions());
+    const { data: activeSubscription, isLoading: isLoadingSubscriptions } = useSubscription();
+    const formatCurrency = (amount, currency) => {
+        return new Intl.NumberFormat("en-US", {
+            style: "currency",
+            currency: currency.toUpperCase(),
+        }).format(amount / 100);
+    };
+    const formatDate = (timestamp) => {
+        const date = timestamp instanceof Date ? timestamp : new Date(timestamp * 1000);
+        return date.toLocaleDateString(undefined, {
+            year: "numeric",
+            month: "long",
+            day: "numeric",
+        });
+    };
+    const cancelAt = activeSubscription?.cancelAt || activeSubscription?.cancelAtPeriodEnd;
+    return (_jsxs("div", { className: "container mx-auto p-10 space-y-8", children: [_jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-col items-start gap-1 px-6 pt-6", children: [_jsx("h1", { className: "text-xl font-bold", children: "Active Subscription" }), _jsx("p", { className: "text-small text-default-500", children: "Manage your active subscription." })] }), _jsx(CardBody, { className: "px-6 pb-6", children: isLoadingSubscriptions ? (_jsx("div", { className: "flex justify-center py-8", children: _jsx(Spinner, {}) })) : !activeSubscription ? (_jsxs("div", { className: "flex flex-col items-center justify-center py-8 text-center gap-4", children: [_jsx("div", { className: "p-4 rounded-full bg-default-100", children: _jsx(AlertCircle, { className: "w-8 h-8 text-default-500" }) }), _jsxs("div", { children: [_jsx("p", { className: "text-lg font-medium", children: "No active subscription" }), _jsx("p", { className: "text-small text-default-500", children: "You are currently on the free tier. Upgrade to access premium features." })] }), _jsx(Button, { as: Link, href: "/pricing", color: "primary", children: "View Plans" })] })) : (_jsx("div", { className: "space-y-6", children: _jsxs("div", { className: "flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 p-4 rounded-lg bg-default-50 border border-default-200", children: [_jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("h3", { className: "text-lg font-semibold capitalize", children: activeSubscription.plan || "Premium Plan" }), _jsx(Chip, { color: cancelAt
+                                                            ? "danger"
+                                                            : activeSubscription.status === "active"
+                                                                ? "success"
+                                                                : "warning", variant: "flat", size: "sm", startContent: _jsx(CheckCircle2, { className: "w-3 h-3 ml-1" }), children: cancelAt ? "Cancelled" : activeSubscription.status })] }), _jsxs("p", { className: "text-small text-default-500 flex items-center gap-2", children: [cancelAt ? "Your subscription will end on " : "Next billing date: ", _jsx("span", { className: "font-medium text-foreground", children: activeSubscription.periodEnd
+                                                            ? formatDate(activeSubscription.periodEnd)
+                                                            : "N/A" }), _jsx("span", { className: "text-small text-default-500", children: `(${activeSubscription.interval === "month" ? "Monthly" : "Annually"})` })] })] }), _jsx("div", { className: "flex gap-3", children: _jsx(Button, { variant: "bordered", as: "a", href: `${serverUrl}/stripe/portal`, children: "Manage Subscription" }) })] }) })) })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-col items-start gap-1 px-6 pt-6", children: [_jsx("h1", { className: "text-xl font-bold", children: "Invoices" }), _jsx("p", { className: "text-small text-default-500", children: "View your invoice history and download past invoices." })] }), _jsx(CardBody, { className: "px-6 pb-6", children: isLoading ? (_jsx("div", { className: "flex justify-center py-8", children: _jsx(Spinner, {}) })) : (_jsxs(Table, { "aria-label": "Invoices table", removeWrapper: true, children: [_jsxs(TableHeader, { children: [_jsx(TableColumn, { children: "Date" }), _jsx(TableColumn, { children: "Amount" }), _jsx(TableColumn, { children: "Status" }), _jsx(TableColumn, { align: "end", children: "Action" })] }), _jsx(TableBody, { emptyContent: "No invoices found.", children: (invoices || []).map((invoice) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: formatDate(invoice.created) }), _jsx(TableCell, { children: formatCurrency(invoice.total, invoice.currency) }), _jsx(TableCell, { children: _jsx(Chip, { color: invoice.status === "paid" ? "success" : "default", variant: "flat", size: "sm", children: invoice.status }) }), _jsx(TableCell, { className: "text-right", children: invoice.hosted_invoice_url && (_jsx(Button, { as: Link, href: invoice.hosted_invoice_url, target: "_blank", rel: "noopener noreferrer", variant: "light", size: "sm", endContent: _jsx(ExternalLink, { className: "h-4 w-4" }), children: "View" })) })] }, invoice.id))) })] })) })] })] }));
+}

package/dist/src/modules/billing/components/BillingPlanSelect.d.ts

@@ -0,0 +1,6 @@
+import type { StripePlan } from "@m5kdev/commons/modules/billing/billing.types";
+interface BillingPlanSelectProps {
+    plans: StripePlan[];
+}
+export declare function BillingPlanSelect({ plans }: BillingPlanSelectProps): import("react/jsx-runtime").JSX.Element | "Multiple plans selection not implemented yet";
+export {};

package/dist/src/modules/billing/components/BillingPlanSelect.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BillingSinglePlanSelect } from "#modules/billing/components/BillingSinglePlanSelect";
+export function BillingPlanSelect({ plans }) {
+    if (plans.length === 1) {
+        return _jsx(BillingSinglePlanSelect, { plan: plans[0] });
+    }
+    return "Multiple plans selection not implemented yet";
+}

package/dist/src/modules/billing/components/BillingRouter.d.ts

@@ -0,0 +1,9 @@
+import type { StripePlan } from "@m5kdev/commons/modules/billing/billing.types";
+import type { UseBackendTRPC } from "#types";
+interface BillingRouterProps {
+    useTRPC?: UseBackendTRPC;
+    serverUrl: string;
+    plans: StripePlan[];
+}
+export declare function BillingRouter({ useTRPC, serverUrl }: BillingRouterProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/src/modules/billing/components/BillingRouter.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Route } from "react-router";
+import { BillingInvoicePage } from "#modules/billing/components/BillingInvoicePage";
+export function BillingRouter({ useTRPC, serverUrl }) {
+    if (!useTRPC)
+        return null;
+    return (_jsx(Route, { path: "billing", children: _jsx(Route, { index: true, element: _jsx(BillingInvoicePage, { useTRPC: useTRPC, serverUrl: serverUrl }) }) }));
+}

package/dist/src/modules/billing/components/BillingSinglePlanSelect.d.ts

@@ -0,0 +1,8 @@
+import type { StripePlan } from "@m5kdev/commons/modules/billing/billing.types";
+export interface BillingSinglePlanSelectProps {
+    plan: StripePlan;
+    features?: string[];
+    /** URL for the Terms of Service link. Override for your app's legal page. */
+    termsOfServiceUrl?: string;
+}
+export declare function BillingSinglePlanSelect({ plan, termsOfServiceUrl, features, }: BillingSinglePlanSelectProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/modules/billing/components/BillingSinglePlanSelect.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@heroui/react";
+import { authClient } from "@m5kdev/frontend/modules/auth/auth.lib";
+import { Check, LogOut } from "lucide-react";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Link, useNavigate } from "react-router";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "#components/ui/card";
+import { Tabs, TabsList, TabsTrigger } from "#components/ui/tabs";
+import { cn } from "#utils";
+export function BillingSinglePlanSelect({ plan, termsOfServiceUrl, features = [
+    "Unlimited access to all features",
+    "Priority support",
+    "Early access to new features",
+    "Secure data storage",
+    "Cancel anytime",
+], }) {
+    const { t } = useTranslation("web-ui");
+    const navigate = useNavigate();
+    const [billingInterval, setBillingInterval] = useState("annually");
+    const handleLogout = async () => {
+        await authClient.signOut();
+        navigate("/login");
+    };
+    const isAnnual = billingInterval === "annually";
+    const currentPriceId = isAnnual ? plan.annualDiscountPriceId : plan.priceId;
+    // Fallback if no annual price ID exists
+    const hasAnnualOption = !!plan.annualDiscountPriceId;
+    const priceUnitAmount = plan.priceUnitAmount ?? Number.NaN;
+    const annualPriceUnitAmount = plan.annualPriceUnitAmount ?? Number.NaN;
+    const priceDisplay = {
+        monthly: {
+            amount: `$${priceUnitAmount / 100}`,
+            label: "/ month",
+        },
+        annually: {
+            amount: `$${annualPriceUnitAmount / 100 / 12}`,
+            originalAmount: `$${priceUnitAmount / 100}`,
+            label: "/ month, billed annually",
+            discountLabel: plan.annualPriceUnitAmount
+                ? `Save ${Math.floor(((priceUnitAmount - annualPriceUnitAmount / 12) / priceUnitAmount) * 100).toFixed(0)}%`
+                : "",
+        },
+    };
+    return (_jsxs("div", { className: "w-full max-w-3xl mx-auto px-4 py-8", children: [_jsxs("div", { className: "flex flex-col items-center gap-8", children: [_jsxs("div", { className: "text-center space-y-2", children: [_jsx("h2", { className: "text-3xl font-bold tracking-tight sm:text-4xl", children: t("billing.plans.title", "Simple, transparent pricing") }), _jsx("p", { className: "text-muted-foreground text-lg", children: t("billing.plans.subtitle", "Choose the plan that's right for you") })] }), hasAnnualOption && (_jsx(Tabs, { defaultValue: "annually", value: billingInterval, onValueChange: (v) => setBillingInterval(v), className: "w-full max-w-xs", children: _jsxs(TabsList, { className: "grid w-full grid-cols-2", children: [_jsx(TabsTrigger, { value: "monthly", children: "Monthly" }), _jsxs(TabsTrigger, { value: "annually", className: "relative", children: ["Annually", priceDisplay.annually.discountLabel && (_jsx("span", { className: "absolute -top-3 -right-3 px-1.5 py-0.5 rounded-full bg-green-500 text-[10px] text-white font-medium transform rotate-12", children: priceDisplay.annually.discountLabel }))] })] }) })), _jsxs(Card, { className: cn("w-full max-w-md border-2 border-primary"), children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { className: "flex justify-between items-start", children: _jsx("span", { className: "text-xl font-bold", children: plan.name }) }), _jsx(CardDescription, { children: isAnnual ? "Perfect for long-term commitment" : "Flexible monthly billing" })] }), _jsxs(CardContent, { className: "space-y-6", children: [_jsxs("div", { className: "flex items-baseline gap-1", children: [_jsx("span", { className: "text-4xl font-bold", children: isAnnual ? priceDisplay.annually.amount : priceDisplay.monthly.amount }), _jsx("span", { className: "text-muted-foreground", children: isAnnual ? priceDisplay.annually.label : priceDisplay.monthly.label })] }), isAnnual && priceDisplay.annually.originalAmount && (_jsxs("p", { className: "text-sm text-green-500 line-through", children: [" ", priceDisplay.annually.originalAmount, " / month"] })), _jsx("div", { className: "space-y-3", children: features.map((feature) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "h-5 w-5 rounded-full bg-primary/10 flex items-center justify-center shrink-0", children: _jsx(Check, { className: "h-3 w-3 text-primary" }) }), _jsx("span", { className: "text-sm text-muted-foreground", children: feature })] }, feature))) })] }), _jsx(CardFooter, { children: _jsx(Button, { className: "w-full", color: "primary", size: "lg", as: "a", href: `${import.meta.env.VITE_SERVER_URL}/stripe/checkout/${currentPriceId}`, children: isAnnual ? "Subscribe Annually" : "Subscribe Monthly" }) })] }), _jsxs("div", { className: "text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-primary", children: [_jsx("a", { href: termsOfServiceUrl, rel: "noopener noreferrer", target: "_blank", children: t("common.termsOfService", "Terms of Service") }), " ", t("common.and", "and"), " ", _jsx(Link, { to: "/privacy", children: t("common.privacyPolicy", "Privacy Policy") })] })] }), _jsx("div", { className: "fixed bottom-4 left-4", children: _jsxs(Button, { variant: "light", onPress: handleLogout, className: "gap-2", children: [_jsx(LogOut, { className: "h-4 w-4" }), t("sidebar.user.logout", "Log out")] }) })] }));
+}

package/dist/src/modules/table/components/ColumnOrderAndVisibility.d.ts

@@ -0,0 +1,10 @@
+import type { ColumnOrderState, VisibilityState } from "@tanstack/react-table";
+import type { ColumnItem } from "./table.types";
+interface ColumnOrderAndVisibilityProps {
+    layout: ColumnItem[];
+    onChangeOrder: (order: ColumnOrderState) => void;
+    onChangeVisibility: (visibility: VisibilityState) => void;
+    onClose: () => void;
+}
+export declare const ColumnOrderAndVisibility: ({ layout, onChangeOrder, onChangeVisibility, onClose, }: ColumnOrderAndVisibilityProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/modules/table/components/ColumnOrderAndVisibility.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
+import { arrayMove, SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy, } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { EyeIcon, EyeOffIcon, GripVertical } from "lucide-react";
+import { useCallback, useState } from "react";
+import { Button } from "#components/ui/button";
+const ColumnOrderAndVisibilityItem = ({ column, onChangeVisibilityState, }) => {
+    const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
+        id: column.id,
+    });
+    return (_jsxs("div", { ref: setNodeRef, style: { transform: CSS.Transform.toString(transform), transition }, className: "flex justify-between items-center gap-2", children: [column.label, _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { ...attributes, ...listeners, className: "cursor-grab active:cursor-grabbing touch-none", children: _jsx(GripVertical, { className: "h-4 w-4" }) }), _jsx(Button, { variant: "ghost", size: "icon", onClick: () => onChangeVisibilityState(String(column.id)), children: column.visibility ? _jsx(EyeIcon, { className: "h-4 w-4" }) : _jsx(EyeOffIcon, { className: "h-4 w-4" }) })] })] }));
+};
+export const ColumnOrderAndVisibility = ({ layout, onChangeOrder, onChangeVisibility, onClose, }) => {
+    const [activeLayout, setActiveLayout] = useState([...layout]);
+    const onChangeVisibilityState = useCallback((columnId) => {
+        setActiveLayout((prev) => {
+            const index = prev.findIndex((c) => c.id === columnId);
+            if (index !== -1) {
+                const newLayout = [...prev];
+                newLayout[index] = { ...prev[index], visibility: !prev[index].visibility };
+                return newLayout;
+            }
+            return prev;
+        });
+    }, []);
+    const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
+        coordinateGetter: sortableKeyboardCoordinates,
+    }));
+    const onSubmit = useCallback(() => {
+        onChangeOrder(activeLayout.map((column) => column.id));
+        onChangeVisibility(Object.fromEntries(activeLayout.map((column) => [column.id, column.visibility])));
+        onClose();
+    }, [activeLayout, onChangeOrder, onChangeVisibility, onClose]);
+    return (_jsxs("div", { className: "flex flex-col gap-2 p-1 min-w-[200px]", children: [_jsx(DndContext, { onDragEnd: ({ active, over }) => {
+                    if (over && active.id !== over?.id) {
+                        const activeIndex = activeLayout.findIndex(({ id }) => id === active.id);
+                        const overIndex = activeLayout.findIndex(({ id }) => id === over.id);
+                        setActiveLayout(arrayMove(activeLayout, activeIndex, overIndex));
+                    }
+                }, sensors: sensors, children: _jsx(SortableContext, { items: activeLayout.map((column) => column.id), strategy: verticalListSortingStrategy, children: activeLayout.map((column) => (_jsx(ColumnOrderAndVisibilityItem, { column: column, onChangeVisibilityState: onChangeVisibilityState }, column.id))) }) }), _jsx(Button, { onClick: onSubmit, children: "Apply" })] }));
+};

package/dist/src/modules/table/components/NuqsTable.d.ts

@@ -0,0 +1,23 @@
+import type { FilterMethods } from "@m5kdev/commons/modules/table/filter.types";
+import type { TableParams } from "@m5kdev/frontend/modules/table/hooks/useNuqsTable";
+import type { ColumnDef } from "@tanstack/react-table";
+import type { ColumnDataType } from "./table.types";
+export type NuqsTableColumn<T> = ColumnDef<T> & {
+    visible?: boolean;
+    type?: ColumnDataType;
+    options?: {
+        label: string;
+        value: string;
+    }[];
+    endColumnId?: string;
+};
+type NuqsTableParams<T> = {
+    data: T[];
+    total?: number;
+    columns: NuqsTableColumn<T>[];
+    tableProps: TableParams;
+    singleFilter?: boolean;
+    filterMethods?: Partial<FilterMethods>;
+};
+export declare const NuqsTable: <T>({ data, total, columns, tableProps, singleFilter, filterMethods, }: NuqsTableParams<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/modules/table/components/NuqsTable.js

@@ -0,0 +1,198 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Checkbox, Popover, PopoverContent, PopoverTrigger } from "@heroui/react";
+import { flexRender, getCoreRowModel, getPaginationRowModel, useReactTable, } from "@tanstack/react-table";
+import { ChevronDown, ChevronUp } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { Button } from "#components/ui/button";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "#components/ui/table";
+import { ColumnOrderAndVisibility } from "./ColumnOrderAndVisibility";
+import { TableFiltering } from "./TableFiltering";
+import { TablePagination } from "./TablePagination";
+function getStorageKey(columnIds) {
+    const sortedIds = [...columnIds].sort().join(",");
+    return `table-column-layout-${sortedIds}`;
+}
+function loadLayoutFromStorage(columnIds) {
+    if (typeof window === "undefined")
+        return null;
+    try {
+        const key = getStorageKey(columnIds);
+        const stored = localStorage.getItem(key);
+        if (!stored)
+            return null;
+        const parsed = JSON.parse(stored);
+        return parsed;
+    }
+    catch {
+        return null;
+    }
+}
+function saveLayoutToStorage(columnIds, order, visibility) {
+    if (typeof window === "undefined")
+        return;
+    try {
+        const key = getStorageKey(columnIds);
+        localStorage.setItem(key, JSON.stringify({ order, visibility }));
+    }
+    catch {
+        // Ignore storage errors
+    }
+}
+function applyOrder(prev, nextOrder) {
+    const byId = new Map(prev.map((i) => [i.id, i]));
+    const ordered = nextOrder.map((id) => byId.get(id)).filter(Boolean);
+    // append any newly added columns (if any appear later)
+    for (const item of prev)
+        if (!nextOrder.includes(item.id))
+            ordered.push(item);
+    return ordered;
+}
+function applyVisibility(prev, visibility) {
+    return prev.map((column) => ({
+        ...column,
+        visibility: visibility[String(column.id)] ?? column.visibility,
+    }));
+}
+export const NuqsTable = ({ data, total, columns, tableProps, singleFilter = false, filterMethods, }) => {
+    const columnIds = useMemo(() => columns.map((col) => String(col.id)), [columns]);
+    console.log("data", data);
+    // const columnsWithId = useMemo(() => {
+    //   const idColumn: NuqsTableColumn<T> = {
+    //     id: "__row_id",
+    //     accessorKey: "id",
+    //     header: "",
+    //     enableSorting: false,
+    //     enableHiding: false,
+    //     visible: false,
+    //   };
+    //   return [idColumn, ...columns];
+    // }, [columns]);
+    const initialLayout = useMemo(() => {
+        const defaultLayout = columns.map((column) => ({
+            id: String(column.id),
+            label: column.header,
+            visibility: column.visible !== undefined ? column.visible : true,
+            options: column.options ?? [],
+            type: column.type ?? undefined,
+        }));
+        const saved = loadLayoutFromStorage(columnIds);
+        if (!saved)
+            return defaultLayout;
+        // Merge saved layout with default layout
+        const savedById = new Map();
+        saved.order.forEach((id, index) => {
+            savedById.set(id, { order: index, visibility: saved.visibility[id] ?? true });
+        });
+        const merged = [];
+        const processedIds = new Set();
+        // Add columns in saved order
+        saved.order.forEach((id) => {
+            const defaultCol = defaultLayout.find((col) => col.id === id);
+            if (defaultCol) {
+                merged.push({
+                    ...defaultCol,
+                    visibility: saved.visibility[id] ?? defaultCol.visibility,
+                });
+                processedIds.add(id);
+            }
+        });
+        // Add any new columns that weren't in saved layout
+        defaultLayout.forEach((col) => {
+            if (!processedIds.has(col.id)) {
+                merged.push(col);
+            }
+        });
+        return merged;
+    }, [columns, columnIds]);
+    const [layout, setLayout] = useState(initialLayout);
+    // Sync layout when columns change
+    useEffect(() => {
+        setLayout(initialLayout);
+    }, [initialLayout]);
+    // Save to localStorage whenever layout changes
+    useEffect(() => {
+        const order = layout.map((col) => col.id);
+        const visibility = Object.fromEntries(layout.map((col) => [col.id, col.visibility]));
+        saveLayoutToStorage(columnIds, order, visibility);
+    }, [layout, columnIds]);
+    const columnOrder = useMemo(() => layout.map((column) => column.id), [layout]);
+    const columnVisibility = useMemo(() => Object.fromEntries(layout.map((column) => [column.id, column.visibility])), [layout]);
+    const { limit = 10, page = 1, sorting, setSorting, setPagination, pagination, rowSelection, setRowSelection, setFilters, filters, } = tableProps;
+    // Redirect back if we're on an empty page (past the last page)
+    useEffect(() => {
+        if (data.length === 0 && page > 1 && total !== undefined) {
+            setPagination?.({ pageIndex: page - 2, pageSize: limit });
+        }
+    }, [data.length, page, limit, total, setPagination]);
+    // Calculate pageCount from total if available, otherwise use heuristic
+    const pageCount = total !== undefined
+        ? Math.ceil(total / limit) || 1
+        : data.length === limit
+            ? page + 1
+            : Math.max(page, Math.ceil(data.length / limit));
+    const table = useReactTable({
+        data,
+        columns,
+        getRowId: (row) => String(row.id),
+        manualSorting: true,
+        manualPagination: true,
+        state: { pagination, sorting, rowSelection, columnOrder, columnVisibility },
+        pageCount,
+        manualFiltering: true,
+        onSortingChange: setSorting,
+        onPaginationChange: setPagination,
+        onRowSelectionChange: setRowSelection,
+        getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        onColumnOrderChange: (updater) => {
+            setLayout((prev) => applyOrder(prev, typeof updater === "function" ? updater(prev.map((i) => i.id)) : updater));
+        },
+        onColumnVisibilityChange: (updater) => {
+            setLayout((prev) => applyVisibility(prev, typeof updater === "function"
+                ? updater(Object.fromEntries(prev.map((i) => [i.id, i.visibility])))
+                : updater));
+        },
+    });
+    const onChangeOrder = (order) => {
+        setLayout((prev) => applyOrder(prev, order));
+    };
+    const onChangeVisibility = (visibility) => {
+        setLayout((prev) => applyVisibility(prev, visibility));
+    };
+    const onFiltersChange = (filters) => {
+        setFilters?.(filters);
+    };
+    const filterableColumns = useMemo(() => {
+        const baseColumns = columns
+            .filter((column) => Boolean(column.type))
+            .map((column) => ({
+            id: String(column.id),
+            label: String(column.header),
+            type: column.type,
+            options: column.options ?? [],
+            endColumnId: column.endColumnId,
+            periodStartColumnId: null,
+            periodEndColumnId: null,
+        }));
+        // Add Period pseudo-columns for date columns with endColumnId
+        const periodColumns = columns
+            .filter((column) => column.type === "date" && column.endColumnId)
+            .map((column) => ({
+            id: `${String(column.id)}__period`,
+            label: "Period",
+            type: "date",
+            options: [],
+            endColumnId: null,
+            periodStartColumnId: String(column.id),
+            periodEndColumnId: column.endColumnId,
+        }));
+        return [...baseColumns, ...periodColumns];
+    }, [columns]);
+    const [isFiltersOpen, setIsFiltersOpen] = useState(false);
+    const [isColumnsOpen, setIsColumnsOpen] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex w-full items-center gap-2 justify-end", children: [_jsxs(Popover, { placement: "bottom", isOpen: isFiltersOpen, onOpenChange: setIsFiltersOpen, portalContainer: document.body, children: [_jsx(PopoverTrigger, { children: _jsx(Button, { variant: "outline", size: "sm", children: _jsxs("div", { className: "flex items-center gap-2", children: ["Filters", _jsx(ChevronDown, { className: "h-4 w-4" })] }) }) }), _jsx(PopoverContent, { children: _jsx(TableFiltering, { columns: filterableColumns, onFiltersChange: onFiltersChange, filters: filters ?? [], onClose: () => setIsFiltersOpen(false), singleFilter: singleFilter, filterMethods: filterMethods }) })] }), _jsxs(Popover, { placement: "bottom", isOpen: isColumnsOpen, onOpenChange: setIsColumnsOpen, portalContainer: document.body, children: [_jsx(PopoverTrigger, { children: _jsx(Button, { variant: "outline", size: "sm", children: _jsxs("div", { className: "flex items-center gap-2", children: ["Columns", _jsx(ChevronDown, { className: "h-4 w-4" })] }) }) }), _jsx(PopoverContent, { children: _jsx(ColumnOrderAndVisibility, { layout: layout, onChangeOrder: onChangeOrder, onChangeVisibility: onChangeVisibility, onClose: () => setIsColumnsOpen(false) }) })] })] }), _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: _jsx(Checkbox, { isSelected: table.getIsAllRowsSelected(), onValueChange: (checked) => {
+                                            table.toggleAllRowsSelected(checked);
+                                        } }) }), table.getHeaderGroups()[0].headers.map((header) => (_jsxs(TableHead, { onClick: header.column.getCanSort() ? header.column.getToggleSortingHandler() : undefined, children: [flexRender(header.column.columnDef.header, header.getContext()), header.column.getCanSort() && (_jsxs(_Fragment, { children: [header.column.getIsSorted() === "asc" && (_jsx(ChevronUp, { className: "h-4 w-4 inline ml-1" })), header.column.getIsSorted() === "desc" && (_jsx(ChevronDown, { className: "h-4 w-4 inline ml-1" }))] }))] }, header.id)))] }) }), _jsx(TableBody, { children: table.getRowModel().rows.map((row) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Checkbox, { isSelected: row.getIsSelected(), onValueChange: (checked) => {
+                                            row.toggleSelected(checked);
+                                        } }) }), row.getVisibleCells().map((cell) => (_jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)))] }, row.id))) })] }), _jsx(TablePagination, { pageCount: pageCount, page: page, limit: limit, setPagination: setPagination })] }));
+};