@m5kdev/web-ui 0.1.2 → 0.1.4

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

@@ -0,0 +1,153 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Card, CardBody, CardHeader, Chip, Input, Spinner, Textarea } from "@heroui/react";
+import { authClient } from "@m5kdev/frontend/modules/auth/auth.lib";
+import { useSession } from "@m5kdev/frontend/modules/auth/hooks/useSession";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+function OrganizationStateCard({ title, message }) {
+    return (_jsx("div", { className: "p-6", children: _jsxs(Card, { children: [_jsx(CardHeader, { className: "text-lg font-semibold", children: title }), _jsx(CardBody, { children: message })] }) }));
+}
+function useOrganizationAccess({ managerRoles, onInvalidateScopedQueries, }) {
+    const { data: session, registerSession } = useSession();
+    const queryClient = useQueryClient();
+    const activeOrganizationId = session?.session.activeOrganizationId ?? "";
+    const activeOrganizationRole = session?.session?.activeOrganizationRole ??
+        "";
+    const managerRoleSet = useMemo(() => new Set(managerRoles ?? ["admin", "owner"]), [managerRoles]);
+    const canManageOrganization = managerRoleSet.has(activeOrganizationRole);
+    const refreshOrganizationQueries = useCallback(async () => {
+        await Promise.allSettled([
+            queryClient.invalidateQueries({ queryKey: ["auth-organization-list"] }),
+            queryClient.invalidateQueries({
+                queryKey: ["auth-organization-details", activeOrganizationId],
+            }),
+            queryClient.invalidateQueries({
+                queryKey: ["auth-organization-members", activeOrganizationId],
+            }),
+            queryClient.invalidateQueries({
+                queryKey: ["auth-organization-invitations", activeOrganizationId],
+            }),
+        ]);
+        registerSession(() => {
+            void onInvalidateScopedQueries?.();
+        });
+    }, [activeOrganizationId, onInvalidateScopedQueries, queryClient, registerSession]);
+    return {
+        activeOrganizationId,
+        activeOrganizationRole,
+        canManageOrganization,
+        refreshOrganizationQueries,
+    };
+}
+function useOrganizationConfig() {
+    const { t } = useTranslation();
+    const translatedLabels = useMemo(() => ({
+        settingsTitle: t("web-ui:organization.settings.title"),
+        settingsDescription: t("web-ui:organization.settings.description"),
+        settingsNoActive: t("web-ui:organization.settings.noActive"),
+        settingsManageOnly: t("web-ui:organization.settings.manageOnly"),
+        formName: t("web-ui:organization.settings.form.name"),
+        formSlug: t("web-ui:organization.settings.form.slug"),
+        formMetadata: t("web-ui:organization.settings.form.metadata"),
+        formMetadataInvalidJson: t("web-ui:organization.settings.form.metadataInvalidJson"),
+        formMetadataInvalid: t("web-ui:organization.settings.form.metadataInvalid"),
+        saveButton: t("web-ui:organization.settings.button.save"),
+        updateSuccess: t("web-ui:organization.settings.updateSuccess"),
+        updateError: t("web-ui:organization.settings.updateError"),
+        loadError: t("web-ui:organization.settings.loadError"),
+    }), [t]);
+    const translatedRoleLabels = useMemo(() => ({
+        member: t("web-ui:organization.roles.member"),
+        admin: t("web-ui:organization.roles.admin"),
+        owner: t("web-ui:organization.roles.owner"),
+    }), [t]);
+    return { resolvedLabels: translatedLabels, resolvedRoleLabels: translatedRoleLabels };
+}
+export function OrganizationSettingsRoute({ managerRoles, onInvalidateScopedQueries, }) {
+    const { resolvedLabels, resolvedRoleLabels } = useOrganizationConfig();
+    const { activeOrganizationId, activeOrganizationRole, canManageOrganization, refreshOrganizationQueries, } = useOrganizationAccess({ managerRoles, onInvalidateScopedQueries });
+    const [organizationName, setOrganizationName] = useState("");
+    const [organizationSlug, setOrganizationSlug] = useState("");
+    const [organizationMetadata, setOrganizationMetadata] = useState("{}");
+    const [isSavingOrganization, setIsSavingOrganization] = useState(false);
+    const organizationQuery = useQuery({
+        queryKey: ["auth-organization-details", activeOrganizationId],
+        enabled: Boolean(activeOrganizationId && canManageOrganization),
+        queryFn: async () => {
+            const { data, error } = await authClient.organization.getFullOrganization({
+                query: {
+                    organizationId: activeOrganizationId,
+                    membersLimit: 200,
+                },
+            });
+            if (error) {
+                throw new Error(error.message ?? resolvedLabels.loadError);
+            }
+            return data;
+        },
+    });
+    useEffect(() => {
+        const organization = organizationQuery.data;
+        if (!organization) {
+            return;
+        }
+        setOrganizationName(organization.name ?? "");
+        setOrganizationSlug(organization.slug ?? "");
+        setOrganizationMetadata(JSON.stringify(organization.metadata ?? {}, null, 2));
+    }, [organizationQuery.data]);
+    const onUpdateOrganization = async () => {
+        if (!canManageOrganization || !activeOrganizationId) {
+            return;
+        }
+        try {
+            setIsSavingOrganization(true);
+            let parsedMetadata;
+            try {
+                parsedMetadata = organizationMetadata.trim()
+                    ? JSON.parse(organizationMetadata)
+                    : {};
+            }
+            catch (parseError) {
+                const message = parseError instanceof SyntaxError
+                    ? resolvedLabels.formMetadataInvalidJson
+                    : parseError instanceof Error
+                        ? parseError.message
+                        : resolvedLabels.formMetadataInvalid;
+                throw new Error(message);
+            }
+            const { error } = await authClient.organization.update({
+                organizationId: activeOrganizationId,
+                data: {
+                    name: organizationName.trim(),
+                    slug: organizationSlug.trim(),
+                    metadata: parsedMetadata,
+                },
+            });
+            if (error) {
+                throw new Error(error.message ?? resolvedLabels.updateError);
+            }
+            await refreshOrganizationQueries();
+            toast.success(resolvedLabels.updateSuccess);
+        }
+        catch (error) {
+            toast.error(error instanceof Error ? error.message : resolvedLabels.updateError);
+        }
+        finally {
+            setIsSavingOrganization(false);
+        }
+    };
+    if (!activeOrganizationId) {
+        return (_jsx(OrganizationStateCard, { title: resolvedLabels.settingsTitle, message: resolvedLabels.settingsNoActive }));
+    }
+    if (!canManageOrganization) {
+        return (_jsx(OrganizationStateCard, { title: resolvedLabels.settingsTitle, message: resolvedLabels.settingsManageOnly }));
+    }
+    if (organizationQuery.isLoading) {
+        return (_jsx("div", { className: "p-6 flex justify-center", children: _jsx(Spinner, {}) }));
+    }
+    return (_jsx("div", { className: "p-6", children: _jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex flex-col", children: [_jsx("h2", { className: "text-xl font-semibold", children: resolvedLabels.settingsTitle }), _jsx("p", { className: "text-sm text-default-500", children: resolvedLabels.settingsDescription })] }), _jsx(Chip, { variant: "flat", color: "primary", children: resolvedRoleLabels[activeOrganizationRole] ??
+                                activeOrganizationRole ??
+                                resolvedRoleLabels.member })] }), _jsxs(CardBody, { className: "grid gap-3", children: [_jsx(Input, { label: resolvedLabels.formName, value: organizationName, onValueChange: setOrganizationName }), _jsx(Input, { label: resolvedLabels.formSlug, value: organizationSlug, onValueChange: setOrganizationSlug }), _jsx(Textarea, { label: resolvedLabels.formMetadata, value: organizationMetadata, onValueChange: setOrganizationMetadata, minRows: 4 }), _jsx("div", { className: "flex justify-end", children: _jsx(Button, { color: "primary", isLoading: isSavingOrganization, onPress: onUpdateOrganization, children: resolvedLabels.saveButton }) })] })] }) }));
+}

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

@@ -0,0 +1,8 @@
+export type OrganizationSwitcherProps = {
+    onInvalidateScopedQueries?: () => void | Promise<void>;
+    managerRoles?: string[];
+    managerPath?: string;
+    fallbackPath?: string;
+};
+export declare function OrganizationSwitcher({ onInvalidateScopedQueries, managerRoles, managerPath, fallbackPath, }: OrganizationSwitcherProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=OrganizationSwitcher.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OrganizationSwitcher.d.ts","sourceRoot":"","sources":["../../../../../src/modules/auth/components/OrganizationSwitcher.tsx"],"names":[],"mappings":"AAkBA,MAAM,MAAM,yBAAyB,GAAG;IACtC,yBAAyB,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACvD,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,wBAAgB,oBAAoB,CAAC,EACnC,yBAAyB,EACzB,YAAiC,EACjC,WAAqC,EACrC,YAAkB,GACnB,EAAE,yBAAyB,2CAqH3B"}

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

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Select, SelectItem } from "@heroui/react";
+import { authClient } from "@m5kdev/frontend/modules/auth/auth.lib";
+import { useSession } from "@m5kdev/frontend/modules/auth/hooks/useSession";
+import { useQuery } from "@tanstack/react-query";
+import { Building2 } from "lucide-react";
+import { useCallback, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router";
+import { toast } from "sonner";
+import { useSidebar } from "#components/ui/sidebar";
+import { cn } from "#utils";
+export function OrganizationSwitcher({ onInvalidateScopedQueries, managerRoles = ["admin", "owner"], managerPath = "/organization/members", fallbackPath = "/", }) {
+    const { t } = useTranslation();
+    const { data: session, registerSession } = useSession();
+    const { open } = useSidebar();
+    const [isSwitching, setIsSwitching] = useState(false);
+    const activeOrganizationId = session?.session.activeOrganizationId ?? null;
+    const activeOrganizationRole = session?.session?.activeOrganizationRole ??
+        "";
+    const managerRoleSet = useMemo(() => new Set(managerRoles), [managerRoles]);
+    const canManageOrganization = managerRoleSet.has(activeOrganizationRole);
+    const { data: organizations = [], isError, error, refetch, } = useQuery({
+        queryKey: ["auth-organization-list"],
+        queryFn: async () => {
+            const { data, error } = await authClient.organization.list();
+            if (error) {
+                throw new Error(error.message ?? t("web-ui:organization.switcher.failedToLoadOrganizations"));
+            }
+            return (data ?? []);
+        },
+    });
+    const handleSwitchOrganization = useCallback(async (organizationId) => {
+        if (!organizationId || organizationId === activeOrganizationId || isSwitching) {
+            return;
+        }
+        try {
+            setIsSwitching(true);
+            const { error } = await authClient.organization.setActive({ organizationId });
+            if (error) {
+                throw new Error(error.message ?? t("web-ui:organization.switcher.failedToSwitchOrganization"));
+            }
+            registerSession(() => {
+                void onInvalidateScopedQueries?.();
+            });
+            toast.success(t("web-ui:organization.switcher.organizationSwitched"));
+        }
+        catch (error) {
+            toast.error(error instanceof Error
+                ? error.message
+                : t("web-ui:organization.switcher.failedToSwitchOrganization"));
+        }
+        finally {
+            setIsSwitching(false);
+        }
+    }, [activeOrganizationId, isSwitching, onInvalidateScopedQueries, registerSession, t]);
+    if (!open) {
+        return (_jsx(Button, { as: Link, to: canManageOrganization ? managerPath : fallbackPath, variant: "light", size: "sm", isIconOnly: true, "aria-label": t("web-ui:organization.switcher.label"), children: _jsx(Building2, { className: "h-4 w-4" }) }));
+    }
+    if (isError) {
+        return (_jsxs("div", { className: "mb-4 flex flex-col gap-2", children: [_jsx("p", { className: "text-sm text-destructive", children: error instanceof Error
+                        ? error.message
+                        : t("web-ui:organization.switcher.failedToLoadOrganizations") }), _jsx(Button, { size: "sm", variant: "flat", onPress: () => void refetch(), children: t("web-ui:organization.switcher.retry") })] }));
+    }
+    return (_jsx("div", { className: "mb-4", children: _jsx(Select, { size: "sm", label: t("web-ui:organization.switcher.label"), selectedKeys: activeOrganizationId ? [activeOrganizationId] : [], disallowEmptySelection: true, isDisabled: isSwitching || organizations.length === 0, onSelectionChange: (keys) => {
+                const selectedOrganizationId = Array.from(keys)[0];
+                if (selectedOrganizationId) {
+                    void handleSwitchOrganization(selectedOrganizationId);
+                }
+            }, classNames: {
+                trigger: cn("min-h-10"),
+                value: cn("text-sm"),
+            }, children: organizations.map((organization) => (_jsx(SelectItem, { children: organization.name }, organization.id))) }) }));
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProfileRoute.d.ts","sourceRoot":"","sources":["../../../../../src/modules/auth/components/ProfileRoute.tsx"],"names":[],"mappings":"AAyBA,wBAAgB,YAAY,4CA8E3B"}

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

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Card, CardBody, CardHeader, Input } from "@heroui/react";
+import { authClient } from "@m5kdev/frontend/modules/auth/auth.lib";
+import { useSession } from "@m5kdev/frontend/modules/auth/hooks/useSession";
+import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import { z } from "zod";
+import { AvatarUpload } from "#components/AvatarUpload";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage, } from "#components/ui/form";
+const profileSchema = z.object({
+    name: z.string().min(2, "Name must be at least 2 characters"),
+    image: z.string().nullable(),
+});
+export function ProfileRoute() {
+    const { t } = useTranslation();
+    const { data: session } = useSession();
+    const form = useForm({
+        defaultValues: {
+            name: session?.user?.name || "",
+            image: session?.user?.image || null,
+        },
+    });
+    function onSubmit(data) {
+        authClient
+            .updateUser(data)
+            .then(() => {
+            toast.success(t("web-ui:profile.updated"), {
+                description: t("web-ui:profile.updateDescription"),
+            });
+        })
+            .catch(() => {
+            toast.error(t("web-ui:profile.error"), {
+                description: t("web-ui:profile.errorDescription"),
+            });
+        });
+    }
+    return (_jsx("div", { className: "container py-10 px-4", children: _jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-col gap-1", children: [_jsx("p", { className: "text-xl font-semibold", children: t("web-ui:profile.settings.title") }), _jsx("p", { className: "text-sm text-default-600", children: t("web-ui:profile.settings.description") })] }), _jsx(CardBody, { children: _jsx(Form, { ...form, children: _jsxs("form", { onSubmit: form.handleSubmit(onSubmit), className: "space-y-6", children: [_jsx("div", { className: "flex justify-center", children: _jsx(FormField, { control: form.control, name: "image", render: ({ field }) => (_jsxs(FormItem, { children: [_jsx(FormControl, { children: _jsx(AvatarUpload, { currentAvatarUrl: field.value, onUploadComplete: (url) => {
+                                                            console.log(url);
+                                                            field.onChange(url);
+                                                        } }) }), _jsx(FormMessage, {})] })) }) }), _jsx(FormField, { control: form.control, name: "name", render: ({ field }) => (_jsxs(FormItem, { children: [_jsx(FormLabel, { children: "Name" }), _jsx(FormControl, { children: _jsx(Input, { placeholder: t("web-ui:profile.placeholders.name"), ...field }) }), _jsx(FormMessage, {})] })) }), _jsx(Button, { type: "submit", children: "Save Changes" })] }) }) })] }) }));
+}

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

@@ -0,0 +1,32 @@
+export interface RangeNuqsDatePickerProps {
+    /**
+     * The column ID to use for the date filter (e.g., "startedAt")
+     */
+    columnId?: string;
+    /**
+     * The end column ID for range filters (e.g., "endedAt")
+     */
+    endColumnId?: string;
+    /**
+     * Label for the date range picker
+     */
+    dateRangeLabel?: string;
+    /**
+     * Label for the quick range selector
+     */
+    quickRangeLabel?: string;
+    /**
+     * Translation namespace for i18n
+     */
+    translationNamespace?: string;
+    /**
+     * Whether to show quick range selector
+     */
+    showQuickRange?: boolean;
+    /**
+     * Custom className for the container
+     */
+    className?: string;
+}
+export declare const RangeNuqsDatePicker: ({ columnId, endColumnId, dateRangeLabel, quickRangeLabel, translationNamespace, showQuickRange, className, }: RangeNuqsDatePickerProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=RangeNuqsDatePicker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RangeNuqsDatePicker.d.ts","sourceRoot":"","sources":["../../../../../src/modules/auth/components/RangeNuqsDatePicker.tsx"],"names":[],"mappings":"AAoCA,MAAM,WAAW,wBAAwB;IACvC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,mBAAmB,GAAI,8GAQjC,wBAAwB,4CAiS1B,CAAC"}

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

@@ -0,0 +1,236 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DateRangePicker, Select, SelectItem, } from "@heroui/react";
+import { CalendarDate, getLocalTimeZone, today } from "@internationalized/date";
+import { useNuqsQueryParams } from "@m5kdev/frontend/modules/table/hooks/useNuqsQueryParams";
+import { calendarDateToEndOfDayUTC, calendarDateToUTC, dateFilterToRangeValue, } from "@m5kdev/web-ui/modules/table/filterTransformers";
+import { DateTime } from "luxon";
+import { useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+const toCalendarDate = (dt) => new CalendarDate(dt.year, dt.month, dt.day);
+const isSameCalendarDate = (a, b) => a.year === b.year && a.month === b.month && a.day === b.day;
+export const RangeNuqsDatePicker = ({ columnId = "startedAt", endColumnId = "endedAt", dateRangeLabel, quickRangeLabel, translationNamespace = "horecaai-app", showQuickRange = true, className, }) => {
+    const { t } = useTranslation();
+    const { filters, setFilters } = useNuqsQueryParams();
+    const [quickRange, setQuickRange] = useState(null);
+    const [hasInitialized, setHasInitialized] = useState(false);
+    // Extract date range from filters using shared helper
+    const dateRange = useMemo(() => {
+        return dateFilterToRangeValue(filters, columnId);
+    }, [filters, columnId]);
+    const todayIso = DateTime.utc().toISODate();
+    const quickRangeOptions = useMemo(() => {
+        const now = DateTime.utc();
+        const todayStart = now.startOf("day");
+        const weekStart = todayStart.startOf("week");
+        const monthStart = todayStart.startOf("month");
+        const lastWeekStart = weekStart.minus({ weeks: 1 });
+        const lastMonthStart = monthStart.minus({ months: 1 });
+        const yearStart = todayStart.startOf("year");
+        const lastYearStart = yearStart.minus({ years: 1 });
+        const options = [
+            {
+                key: "today",
+                label: t(`${translationNamespace}:reports.quickRange.today`, { defaultValue: "Today" }),
+                start: todayStart,
+                end: todayStart,
+            },
+            {
+                key: "yesterday",
+                label: t(`${translationNamespace}:reports.quickRange.yesterday`, {
+                    defaultValue: "Yesterday",
+                }),
+                start: todayStart.minus({ days: 1 }),
+                end: todayStart.minus({ days: 1 }),
+            },
+            {
+                key: "last7",
+                label: t(`${translationNamespace}:reports.quickRange.last7`, {
+                    defaultValue: "Last 7 days",
+                }),
+                start: todayStart.minus({ days: 6 }),
+                end: todayStart,
+            },
+            {
+                key: "last30",
+                label: t(`${translationNamespace}:reports.quickRange.last30`, {
+                    defaultValue: "Last 30 days",
+                }),
+                start: todayStart.minus({ days: 29 }),
+                end: todayStart,
+            },
+            {
+                key: "thisWeek",
+                label: t(`${translationNamespace}:reports.quickRange.thisWeek`, {
+                    defaultValue: "This week",
+                }),
+                start: weekStart,
+                end: todayStart,
+            },
+            {
+                key: "lastWeek",
+                label: t(`${translationNamespace}:reports.quickRange.lastWeek`, {
+                    defaultValue: "Last week",
+                }),
+                start: lastWeekStart,
+                end: lastWeekStart.plus({ days: 6 }),
+            },
+            {
+                key: "thisMonth",
+                label: t(`${translationNamespace}:reports.quickRange.thisMonth`, {
+                    defaultValue: "This month",
+                }),
+                start: monthStart,
+                end: todayStart,
+            },
+            {
+                key: "lastMonth",
+                label: t(`${translationNamespace}:reports.quickRange.lastMonth`, {
+                    defaultValue: "Last month",
+                }),
+                start: lastMonthStart,
+                end: lastMonthStart.endOf("month"),
+            },
+            {
+                key: "thisYear",
+                label: t(`${translationNamespace}:reports.quickRange.thisYear`, {
+                    defaultValue: "This year",
+                }),
+                start: yearStart,
+                end: todayStart,
+            },
+            {
+                key: "lastYear",
+                label: t(`${translationNamespace}:reports.quickRange.lastYear`, {
+                    defaultValue: "Last year",
+                }),
+                start: lastYearStart,
+                end: lastYearStart.endOf("year"),
+            },
+        ];
+        return options.map((opt) => ({
+            key: opt.key,
+            label: opt.label,
+            range: {
+                start: toCalendarDate(opt.start),
+                end: toCalendarDate(opt.end),
+            },
+        }));
+    }, [t, todayIso, translationNamespace]);
+    // Set default to "this month" on initial load if no date range is set
+    useEffect(() => {
+        if (hasInitialized || !setFilters)
+            return;
+        // Check if there's already a valid date range from URL
+        if (dateRange) {
+            setHasInitialized(true);
+            return;
+        }
+        // No date range set, initialize to "this month"
+        const thisMonthOption = quickRangeOptions.find((opt) => opt.key === "thisMonth");
+        if (thisMonthOption) {
+            setHasInitialized(true);
+            setQuickRange("thisMonth");
+            // Set filters directly for "this month" range
+            const startDate = thisMonthOption.range.start;
+            const endDate = thisMonthOption.range.end;
+            const newFilters = [
+                ...(filters?.filter((f) => f.columnId !== columnId && f.columnId !== endColumnId) ?? []),
+                {
+                    columnId,
+                    type: "date",
+                    method: "intersect",
+                    value: calendarDateToUTC(startDate),
+                    valueTo: calendarDateToEndOfDayUTC(endDate),
+                    endColumnId,
+                },
+            ];
+            setFilters(newFilters);
+        }
+    }, [dateRange, columnId, endColumnId, quickRangeOptions, hasInitialized, setFilters]);
+    useEffect(() => {
+        // Don't sync quickRange if we're still initializing
+        if (!hasInitialized)
+            return;
+        if (!dateRange?.start || !dateRange?.end) {
+            setQuickRange(null);
+            return;
+        }
+        const start = dateRange.start;
+        const end = dateRange.end;
+        const matches = quickRangeOptions.filter((option) => isSameCalendarDate(option.range.start, start) && isSameCalendarDate(option.range.end, end));
+        if (matches.length === 0) {
+            setQuickRange(null);
+            return;
+        }
+        // If the current quick range still matches, keep it
+        const currentStillMatches = quickRange ? matches.find((m) => m.key === quickRange) : null;
+        if (currentStillMatches) {
+            return;
+        }
+        // Otherwise pick the highest-priority match to keep intent (week/month over last7 overlap)
+        const priority = [
+            "today",
+            "yesterday",
+            "thisWeek",
+            "lastWeek",
+            "thisMonth",
+            "lastMonth",
+            "last7",
+            "last30",
+        ];
+        const preferred = priority.map((key) => matches.find((m) => m.key === key)).find((m) => Boolean(m)) ??
+            matches[0];
+        setQuickRange(preferred?.key ?? null);
+    }, [dateRange, quickRangeOptions, quickRange, hasInitialized]);
+    // Handle date range changes
+    const handleDateRangeChange = (range) => {
+        if (!setFilters)
+            return;
+        if (!range?.start || !range?.end) {
+            // Remove date filters
+            const newFilters = filters?.filter((f) => f.columnId !== columnId && f.columnId !== endColumnId) ?? [];
+            setFilters(newFilters);
+            return;
+        }
+        // Use intersect to find records where [startedAt, endedAt] overlaps with the selected range
+        // This includes ongoing records (endedAt = NULL) and records that overlap the range
+        const startDate = range.start;
+        const endDate = range.end;
+        const newFilters = [
+            ...(filters?.filter((f) => f.columnId !== columnId && f.columnId !== endColumnId) ?? []),
+            {
+                columnId,
+                type: "date",
+                method: "intersect",
+                value: calendarDateToUTC(startDate),
+                valueTo: calendarDateToEndOfDayUTC(endDate),
+                endColumnId,
+            },
+        ];
+        setFilters(newFilters);
+    };
+    const handleQuickRangeChange = (key) => {
+        if (!key) {
+            setQuickRange(null);
+            return;
+        }
+        const option = quickRangeOptions.find((opt) => opt.key === key);
+        if (!option)
+            return;
+        setQuickRange(key);
+        handleDateRangeChange({
+            start: option.range.start,
+            end: option.range.end,
+        });
+    };
+    return (_jsxs("div", { className: `flex gap-4 flex-row ${className ?? ""}`, children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("span", { className: "text-sm text-muted-foreground", children: dateRangeLabel ??
+                            t(`${translationNamespace}:reports.dateRange`, { defaultValue: "Date range" }) }), _jsx(DateRangePicker, { value: dateRange ?? undefined, onChange: handleDateRangeChange, className: "w-[300px]", granularity: "day", showMonthAndYearPickers: true, maxValue: today(getLocalTimeZone()), popoverProps: {
+                            portalContainer: document.body,
+                            disableAnimation: true,
+                        } })] }), showQuickRange && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("span", { className: "text-sm text-muted-foreground", children: quickRangeLabel ??
+                            t(`${translationNamespace}:reports.quickRange.label`, {
+                                defaultValue: "Quick range",
+                            }) }), _jsx(Select, { selectedKeys: quickRange ? [quickRange] : [], onChange: (e) => handleQuickRangeChange(e.target.value ?? null), className: "w-[300px]", popoverProps: {
+                            portalContainer: document.body,
+                        }, children: quickRangeOptions.map((option) => (_jsx(SelectItem, { children: option.label }, option.key))) })] }))] }));
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ResetPasswordForm.d.ts","sourceRoot":"","sources":["../../../../../src/modules/auth/components/ResetPasswordForm.tsx"],"names":[],"mappings":"AAYA,wBAAgB,iBAAiB,4CA0FhC"}

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

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Card, CardBody, CardHeader, Input } from "@heroui/react";
+import { authClient } from "@m5kdev/frontend/modules/auth/auth.lib";
+import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { Link, useSearchParams } from "react-router";
+import { toast } from "sonner";
+export function ResetPasswordForm() {
+    const { t } = useTranslation();
+    const { register, handleSubmit, setError, formState: { errors }, } = useForm();
+    const [searchParams] = useSearchParams();
+    const token = searchParams.get("token");
+    const onSubmit = (data) => {
+        if (data.password !== data.confirmPassword) {
+            setError("confirmPassword", { message: t("web-ui:auth.resetPassword.passwordMismatch") });
+            return;
+        }
+        if (!token) {
+            throw new Error(t("web-ui:auth.resetPassword.tokenRequired"));
+        }
+        authClient
+            .resetPassword({
+            newPassword: data.password,
+            token,
+        })
+            .then(() => {
+            toast.success(t("web-ui:auth.resetPassword.success"));
+            // Optionally, redirect
+        })
+            .catch(() => {
+            toast.error(t("web-ui:auth.resetPassword.error"));
+        });
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-6", children: [_jsxs(Card, { children: [_jsxs(CardHeader, { className: "text-center flex flex-col gap-1", children: [_jsx("h2", { className: "text-xl font-semibold", children: t("web-ui:auth.resetPassword.title") }), _jsx("p", { className: "text-sm text-default-600", children: t("web-ui:auth.resetPassword.description") })] }), _jsx(CardBody, { className: "gap-6", children: _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.resetPassword.newPassword"), placeholder: t("web-ui:auth.resetPassword.newPassword"), type: "password", variant: "bordered", isRequired: true, ...register("password", {
+                                                required: t("web-ui:auth.resetPassword.passwordRequired"),
+                                            }) }), errors.password && (_jsx("span", { className: "text-red-500 text-xs", children: errors.password.message }))] }), _jsxs("div", { className: "grid gap-2", children: [_jsx(Input, { labelPlacement: "outside", label: t("web-ui:auth.resetPassword.confirmPassword"), placeholder: t("web-ui:auth.resetPassword.confirmPassword"), type: "password", variant: "bordered", isRequired: true, ...register("confirmPassword", {
+                                                required: t("web-ui:auth.resetPassword.confirmPasswordRequired"),
+                                            }) }), errors.confirmPassword && (_jsx("span", { className: "text-red-500 text-xs", children: errors.confirmPassword.message }))] }), _jsx(Button, { type: "submit", className: "w-full", color: "primary", children: t("web-ui:auth.resetPassword.button") })] }) })] }), _jsxs("div", { className: "text-center text-xs text-muted-foreground", children: [t("web-ui:auth.forgotPassword.rememberPassword"), " ", _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/ResetPasswordRoute.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ResetPasswordRoute.d.ts","sourceRoot":"","sources":["../../../../../src/modules/auth/components/ResetPasswordRoute.tsx"],"names":[],"mappings":"AAKA,wBAAgB,kBAAkB,4CAqBjC"}

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, CardBody, CardHeader } from "@heroui/react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router";
+import { ResetPasswordForm } from "#modules/auth/components/ResetPasswordForm";
+export function ResetPasswordRoute() {
+    const { t } = useTranslation();
+    return (_jsxs("div", { className: "flex flex-col gap-6", children: [_jsxs(Card, { children: [_jsxs(CardHeader, { className: "text-center flex flex-col gap-1", children: [_jsx("h2", { className: "text-xl font-semibold", children: t("web-ui:auth.resetPassword.title") }), _jsx("p", { className: "text-sm text-default-600", children: t("web-ui:auth.resetPassword.description") })] }), _jsx(CardBody, { children: _jsx(ResetPasswordForm, {}) })] }), _jsxs("div", { className: "text-center text-xs text-muted-foreground", children: [t("web-ui:auth.forgotPassword.rememberPassword"), " ", _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/SignupFormRoute.d.ts

@@ -0,0 +1,6 @@
+export declare function SignupForm({ code, email, waitlist, }: {
+    code?: string | null;
+    email?: string | null;
+    waitlist?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SignupFormRoute.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SignupFormRoute.d.ts","sourceRoot":"","sources":["../../../../../src/modules/auth/components/SignupFormRoute.tsx"],"names":[],"mappings":"AA+CA,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,KAAK,EACL,QAAQ,GACT,EAAE;IACD,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,2CAqIA"}