@m5kdev/web-ui 0.1.3 → 0.1.4

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

@@ -0,0 +1,106 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Alert, Button, Input } from "@heroui/react";
+import { authClient } from "@m5kdev/frontend/modules/auth/auth.lib";
+import { useSession } from "@m5kdev/frontend/modules/auth/hooks/useSession";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router";
+import { toast } from "sonner";
+function getEmailProviderUrl(email) {
+    const domain = email.split("@")[1]?.toLowerCase();
+    if (!domain)
+        return null;
+    const EMAIL_URLS = {
+        GMAIL: "https://mail.google.com/mail/u/0/#inbox",
+        OUTLOOK: "https://outlook.live.com/mail/0/inbox",
+        YAHOO: "https://mail.yahoo.com",
+        ICLOUD: "https://www.icloud.com/mail",
+        PROTON: "https://mail.proton.me",
+    };
+    const domainMap = {
+        "gmail.com": EMAIL_URLS.GMAIL,
+        "googlemail.com": EMAIL_URLS.GMAIL,
+        "outlook.com": EMAIL_URLS.OUTLOOK,
+        "hotmail.com": EMAIL_URLS.OUTLOOK,
+        "live.com": EMAIL_URLS.OUTLOOK,
+        "msn.com": EMAIL_URLS.OUTLOOK,
+        "yahoo.com": EMAIL_URLS.YAHOO,
+        "yahoo.co.uk": EMAIL_URLS.YAHOO,
+        "yahoo.fr": EMAIL_URLS.YAHOO,
+        "ymail.com": EMAIL_URLS.YAHOO,
+        "icloud.com": EMAIL_URLS.ICLOUD,
+        "me.com": EMAIL_URLS.ICLOUD,
+        "mac.com": EMAIL_URLS.ICLOUD,
+        "protonmail.com": EMAIL_URLS.PROTON,
+        "proton.me": EMAIL_URLS.PROTON,
+    };
+    return domainMap[domain] || null;
+}
+export function SignupForm({ code, email, waitlist, }) {
+    const { t } = useTranslation();
+    const [status, setStatus] = useState("start");
+    const [userEmail, setUserEmail] = useState(email || "");
+    const { registerSession } = useSession();
+    const navigate = useNavigate();
+    const { register, handleSubmit, formState: { errors }, } = useForm();
+    const onSubmit = (data) => {
+        console.log(data);
+        setStatus("busy");
+        setUserEmail(data.email);
+        authClient.signUp
+            .email({
+            name: data.email,
+            email: data.email,
+            password: data.password,
+        }, {
+            headers: {
+                "Waitlist-Invitation-Code": code || "",
+            },
+        })
+            .then((result) => {
+            console.log(result);
+            if (result.error) {
+                toast.error(t("web-ui:auth.errors.invitationCodeInvalid"));
+                setStatus("start");
+                return;
+            }
+            if (waitlist) {
+                authClient.signIn
+                    .email({
+                    email: data.email,
+                    password: data.password,
+                })
+                    .then((res) => {
+                    console.log(res);
+                    if (res.data?.user) {
+                        registerSession(() => {
+                            navigate("/");
+                        });
+                    }
+                    else if (res.error) {
+                        toast.error(t("web-ui:auth.errors.authentication"), {
+                            description: res.error.message,
+                        });
+                    }
+                })
+                    .catch((error) => {
+                    toast.error(t("web-ui:auth.errors.server"), {
+                        description: error.message,
+                    });
+                });
+            }
+            else
+                setStatus("done");
+        })
+            .catch((error) => {
+            toast.error(error.message);
+            setStatus("start");
+        });
+    };
+    if (status === "done") {
+        const emailProviderUrl = userEmail ? getEmailProviderUrl(userEmail) : null;
+        return (_jsx(Alert, { color: "primary", variant: "faded", title: t("web-ui:auth.signup.verificationEmailSent.title"), children: _jsxs("div", { className: "mt-2", children: [t("web-ui:auth.signup.verificationEmailSent.description"), emailProviderUrl && (_jsx("div", { className: "mt-3", children: _jsx("a", { href: emailProviderUrl, target: "_blank", rel: "noopener noreferrer", className: "font-medium underline underline-offset-4 hover:opacity-80 transition-opacity", children: t("web-ui:auth.signup.verificationEmailSent.openEmail") }) }))] }) }));
+    }
+    return (_jsxs("form", { onSubmit: handleSubmit(onSubmit), className: "grid gap-6", children: [_jsxs("div", { className: "grid gap-2", children: [_jsx(Input, { labelPlacement: "outside", label: t("web-ui:auth.login.email"), type: "email", placeholder: t("web-ui:auth.login.placeholder.email"), variant: "bordered", isRequired: true, isDisabled: !!email, defaultValue: email ?? "", ...register("email", { required: true }) }), errors.email && (_jsx("span", { className: "text-red-500 text-xs", children: t("web-ui:auth.signup.emailRequired") }))] }), _jsxs("div", { className: "grid gap-2", children: [_jsx(Input, { labelPlacement: "outside", label: t("web-ui:auth.login.password"), placeholder: t("web-ui:auth.login.password"), type: "password", variant: "bordered", isRequired: true, ...register("password", { required: true }) }), errors.password && (_jsx("span", { className: "text-red-500 text-xs", children: t("web-ui:auth.signup.passwordRequired") }))] }), _jsx(Button, { type: "submit", className: "w-full", color: "primary", isDisabled: status === "busy", children: status === "busy" ? t("web-ui:auth.signup.signingUp") : t("web-ui:auth.signup.button") })] }));
+}

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

@@ -0,0 +1,8 @@
+import type { UseBackendTRPC } from "#types";
+interface SignupRouteProps {
+    providers?: string[];
+    useTRPC?: UseBackendTRPC;
+}
+export declare function SignupRoute({ providers, useTRPC }: SignupRouteProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SignupRoute.d.ts.map

package/dist/src/modules/auth/components/SignupRoute.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignupRoute.d.ts","sourceRoot":"","sources":["../../../../../src/modules/auth/components/SignupRoute.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAK7C,UAAU,gBAAgB;IACxB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,OAAO,CAAC,EAAE,cAAc,CAAC;CAC1B;AAED,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,gBAAgB,2CAqCnE"}

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, CardBody, CardHeader } from "@heroui/react";
+import { useQueryState } from "nuqs";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router";
+import { SignupForm } from "#modules/auth/components/SignupFormRoute";
+import { AuthProviders } from "./AuthProviders";
+import { WaitlistCard } from "./WaitlistCard";
+import { WaitlistCodeValidation } from "./WaitlistCodeValidation";
+export function SignupRoute({ providers, useTRPC }) {
+    const { t } = useTranslation();
+    const [code] = useQueryState("code");
+    const [email] = useQueryState("email");
+    const hasWaitlist = !!useTRPC;
+    return (_jsxs("div", { className: "flex flex-col gap-6", children: [hasWaitlist && !code ? (_jsx(WaitlistCard, { useTRPC: useTRPC })) : (_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.signup.createAccount") }), _jsx("p", { className: "text-sm text-default-600", children: t("web-ui:auth.signup.description") })] }), _jsx(CardBody, { children: _jsxs("div", { className: "grid gap-6", children: [hasWaitlist && code && useTRPC && (_jsx(WaitlistCodeValidation, { code: code, useTRPC: useTRPC })), _jsx(AuthProviders, { providers: providers, code: code, requestSignUp: true }), _jsx(SignupForm, { code: code, email: email, waitlist: hasWaitlist })] }) })] })), _jsxs("div", { className: "text-center text-xs text-muted-foreground", children: [t("web-ui:auth.signup.alreadyHaveAccount"), " ", _jsx(Link, { to: "/login", className: "underline underline-offset-4 hover:text-primary", children: t("web-ui:auth.login.button") })] })] }));
+}

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

@@ -0,0 +1,31 @@
+import type { ReactElement } from "react";
+import type { z } from "zod";
+type UpdatePreferencesOptions = {
+    noOptimisticUpdate?: boolean;
+    onSuccess?: () => void;
+    onError?: (error: unknown) => void;
+};
+interface ControlDefinition {
+    label: string;
+    element: "switch" | "select" | "number";
+    options?: {
+        label: string;
+        value: string;
+    }[];
+    min?: number;
+    max?: number;
+    step?: number;
+}
+type ControlsFor<Preferences> = {
+    [K in keyof Preferences]: ControlDefinition;
+};
+export declare function UserPreferences<S extends z.ZodObject<z.ZodRawShape>>({ schema, controls, preferences, isLoading, isPending, updatePreferences, }: {
+    schema: S;
+    controls: ControlsFor<z.infer<S>>;
+    preferences: z.infer<S>;
+    isLoading: boolean;
+    isPending: boolean;
+    updatePreferences: (partialPreferences: Partial<z.infer<S>>, options: UpdatePreferencesOptions) => void;
+}): ReactElement;
+export {};
+//# sourceMappingURL=UserPreferences.d.ts.map

package/dist/src/modules/auth/components/UserPreferences.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserPreferences.d.ts","sourceRoot":"","sources":["../../../../../src/modules/auth/components/UserPreferences.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAa,YAAY,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,KAAK,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAE7B,KAAK,wBAAwB,GAAG;IAC9B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACpC,CAAC;AAEF,UAAU,iBAAiB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;IACxC,OAAO,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC7C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,KAAK,WAAW,CAAC,WAAW,IAAI;KAC7B,CAAC,IAAI,MAAM,WAAW,GAAG,iBAAiB;CAC5C,CAAC;AAEF,wBAAgB,eAAe,CAAC,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,EAAE,EACpE,MAAM,EACN,QAAQ,EACR,WAAW,EACX,SAAS,EACT,SAAS,EACT,iBAAiB,GAClB,EAAE;IACD,MAAM,EAAE,CAAC,CAAC;IACV,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;IAClC,WAAW,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,CACjB,kBAAkB,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EACvC,OAAO,EAAE,wBAAwB,KAC9B,IAAI,CAAC;CACX,GAAG,YAAY,CAqGf"}

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,7 @@
+import type { UseBackendTRPC } from "#types";
+interface WaitlistCardProps {
+    useTRPC: UseBackendTRPC;
+}
+export declare function WaitlistCard({ useTRPC }: WaitlistCardProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=WaitlistCard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"WaitlistCard.d.ts","sourceRoot":"","sources":["../../../../../src/modules/auth/components/WaitlistCard.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAE7C,UAAU,iBAAiB;IACzB,OAAO,EAAE,cAAc,CAAC;CACzB;AAED,wBAAgB,YAAY,CAAC,EAAE,OAAO,EAAE,EAAE,iBAAiB,2CAkE1D"}

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,8 @@
+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 {};
+//# sourceMappingURL=WaitlistCodeValidation.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"WaitlistCodeValidation.d.ts","sourceRoot":"","sources":["../../../../../src/modules/auth/components/WaitlistCodeValidation.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAE7C,UAAU,2BAA2B;IACnC,OAAO,EAAE,cAAc,CAAC;IACxB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,sBAAsB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,2BAA2B,kDAoEpF"}

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,9 @@
+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 {};
+//# sourceMappingURL=BillingBetaPage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BillingBetaPage.d.ts","sourceRoot":"","sources":["../../../../../src/modules/billing/components/BillingBetaPage.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC,UAAU,oBAAoB;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,wBAAgB,eAAe,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,oBAAoB,2CA6GnF"}

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,8 @@
+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 {};
+//# sourceMappingURL=BillingInvoicePage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BillingInvoicePage.d.ts","sourceRoot":"","sources":["../../../../../src/modules/billing/components/BillingInvoicePage.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAE7C,UAAU,uBAAuB;IAC/B,OAAO,EAAE,cAAc,CAAC;IACxB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,uBAAuB,2CAyJjF"}

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,7 @@
+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 {};
+//# sourceMappingURL=BillingPlanSelect.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BillingPlanSelect.d.ts","sourceRoot":"","sources":["../../../../../src/modules/billing/components/BillingPlanSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,+CAA+C,CAAC;AAGhF,UAAU,sBAAsB;IAC9B,KAAK,EAAE,UAAU,EAAE,CAAC;CACrB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,KAAK,EAAE,EAAE,sBAAsB,4FAMlE"}

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,10 @@
+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 {};
+//# sourceMappingURL=BillingRouter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BillingRouter.d.ts","sourceRoot":"","sources":["../../../../../src/modules/billing/components/BillingRouter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,+CAA+C,CAAC;AAGhF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAE7C,UAAU,kBAAkB;IAC1B,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,UAAU,EAAE,CAAC;CACrB;AAED,wBAAgB,aAAa,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,kBAAkB,kDAQvE"}

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,9 @@
+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;
+//# sourceMappingURL=BillingSinglePlanSelect.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BillingSinglePlanSelect.d.ts","sourceRoot":"","sources":["../../../../../src/modules/billing/components/BillingSinglePlanSelect.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,+CAA+C,CAAC;AAiBhF,MAAM,WAAW,4BAA4B;IAC3C,IAAI,EAAE,UAAU,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,6EAA6E;IAC7E,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,wBAAgB,uBAAuB,CAAC,EACtC,IAAI,EACJ,iBAAiB,EACjB,QAMC,GACF,EAAE,4BAA4B,2CAwI9B"}

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,11 @@
+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 {};
+//# sourceMappingURL=ColumnOrderAndVisibility.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnOrderAndVisibility.d.ts","sourceRoot":"","sources":["../../../../../src/modules/table/components/ColumnOrderAndVisibility.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAE/E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAyChD,UAAU,6BAA6B;IACrC,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,aAAa,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACjD,kBAAkB,EAAE,CAAC,UAAU,EAAE,eAAe,KAAK,IAAI,CAAC;IAC1D,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,wBAAwB,GAAI,yDAKtC,6BAA6B,4CA2D/B,CAAC"}

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" })] }));
+};