@m5kdev/web-ui 0.8.0 → 0.8.3

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

@@ -0,0 +1,96 @@
+import { cn } from "../../../lib/utils.mjs";
+import { useSidebar } from "../../../components/ui/sidebar.mjs";
+import { useCallback, useMemo, useState } from "react";
+import { Button, Select, SelectItem } from "@heroui/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Building2 } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { Link as Link$1 } from "react-router";
+import { toast } from "sonner";
+import { authClient } from "@m5kdev/frontend/modules/auth/auth.lib";
+import { useQuery } from "@tanstack/react-query";
+import { useSession } from "@m5kdev/frontend/modules/auth/hooks/useSession";
+//#region src/modules/auth/components/OrganizationSwitcher.tsx
+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 canManageOrganization = useMemo(() => new Set(managerRoles), [managerRoles]).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(() => {
+				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 /* @__PURE__ */ jsx(Button, {
+		as: Link$1,
+		to: canManageOrganization ? managerPath : fallbackPath,
+		variant: "light",
+		size: "sm",
+		isIconOnly: true,
+		"aria-label": t("web-ui:organization.switcher.label"),
+		children: /* @__PURE__ */ jsx(Building2, { className: "h-4 w-4" })
+	});
+	if (isError) return /* @__PURE__ */ jsxs("div", {
+		className: "mb-4 flex flex-col gap-2",
+		children: [/* @__PURE__ */ jsx("p", {
+			className: "text-sm text-destructive",
+			children: error instanceof Error ? error.message : t("web-ui:organization.switcher.failedToLoadOrganizations")
+		}), /* @__PURE__ */ jsx(Button, {
+			size: "sm",
+			variant: "flat",
+			onPress: () => void refetch(),
+			children: t("web-ui:organization.switcher.retry")
+		})]
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: "mb-4",
+		children: /* @__PURE__ */ 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) handleSwitchOrganization(selectedOrganizationId);
+			},
+			classNames: {
+				trigger: cn("min-h-10"),
+				value: cn("text-sm")
+			},
+			children: organizations.map((organization) => /* @__PURE__ */ jsx(SelectItem, { children: organization.name }, organization.id))
+		})
+	});
+}
+//#endregion
+export { OrganizationSwitcher };
+
+//# sourceMappingURL=OrganizationSwitcher.mjs.map

package/dist/src/modules/auth/components/OrganizationSwitcher.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrganizationSwitcher.mjs","names":["Link"],"sources":["../../../../../src/modules/auth/components/OrganizationSwitcher.tsx"],"sourcesContent":["import { Button, Select, SelectItem } from \"@heroui/react\";\r\nimport { authClient } from \"@m5kdev/frontend/modules/auth/auth.lib\";\r\nimport { useSession } from \"@m5kdev/frontend/modules/auth/hooks/useSession\";\r\nimport { useQuery } from \"@tanstack/react-query\";\r\nimport { Building2 } from \"lucide-react\";\r\nimport { useCallback, useMemo, useState } from \"react\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { Link } from \"react-router\";\r\nimport { toast } from \"sonner\";\r\nimport { useSidebar } from \"../../../components/ui/sidebar\";\r\nimport { cn } from \"../../../lib/utils\";\r\n\r\ntype OrganizationOption = {\r\n  id: string;\r\n  name: string;\r\n  slug: string;\r\n};\r\n\r\nexport type OrganizationSwitcherProps = {\r\n  onInvalidateScopedQueries?: () => void | Promise<void>;\r\n  managerRoles?: string[];\r\n  managerPath?: string;\r\n  fallbackPath?: string;\r\n};\r\n\r\nexport function OrganizationSwitcher({\r\n  onInvalidateScopedQueries,\r\n  managerRoles = [\"admin\", \"owner\"],\r\n  managerPath = \"/organization/members\",\r\n  fallbackPath = \"/\",\r\n}: OrganizationSwitcherProps) {\r\n  const { t } = useTranslation();\r\n  const { data: session, registerSession } = useSession();\r\n  const { open } = useSidebar();\r\n  const [isSwitching, setIsSwitching] = useState(false);\r\n  const activeOrganizationId = session?.session.activeOrganizationId ?? null;\r\n  const activeOrganizationRole =\r\n    (session?.session as { activeOrganizationRole?: string } | undefined)?.activeOrganizationRole ??\r\n    \"\";\r\n  const managerRoleSet = useMemo(() => new Set(managerRoles), [managerRoles]);\r\n  const canManageOrganization = managerRoleSet.has(activeOrganizationRole);\r\n\r\n  const {\r\n    data: organizations = [],\r\n    isError,\r\n    error,\r\n    refetch,\r\n  } = useQuery({\r\n    queryKey: [\"auth-organization-list\"],\r\n    queryFn: async () => {\r\n      const { data, error } = await authClient.organization.list();\r\n      if (error) {\r\n        throw new Error(\r\n          error.message ?? t(\"web-ui:organization.switcher.failedToLoadOrganizations\")\r\n        );\r\n      }\r\n      return (data ?? []) as OrganizationOption[];\r\n    },\r\n  });\r\n\r\n  const handleSwitchOrganization = useCallback(\r\n    async (organizationId: string) => {\r\n      if (!organizationId || organizationId === activeOrganizationId || isSwitching) {\r\n        return;\r\n      }\r\n\r\n      try {\r\n        setIsSwitching(true);\r\n        const { error } = await authClient.organization.setActive({ organizationId });\r\n        if (error) {\r\n          throw new Error(\r\n            error.message ?? t(\"web-ui:organization.switcher.failedToSwitchOrganization\")\r\n          );\r\n        }\r\n\r\n        registerSession(() => {\r\n          void onInvalidateScopedQueries?.();\r\n        });\r\n        toast.success(t(\"web-ui:organization.switcher.organizationSwitched\"));\r\n      } catch (error) {\r\n        toast.error(\r\n          error instanceof Error\r\n            ? error.message\r\n            : t(\"web-ui:organization.switcher.failedToSwitchOrganization\")\r\n        );\r\n      } finally {\r\n        setIsSwitching(false);\r\n      }\r\n    },\r\n    [activeOrganizationId, isSwitching, onInvalidateScopedQueries, registerSession, t]\r\n  );\r\n\r\n  if (!open) {\r\n    return (\r\n      <Button\r\n        as={Link}\r\n        to={canManageOrganization ? managerPath : fallbackPath}\r\n        variant=\"light\"\r\n        size=\"sm\"\r\n        isIconOnly\r\n        aria-label={t(\"web-ui:organization.switcher.label\")}\r\n      >\r\n        <Building2 className=\"h-4 w-4\" />\r\n      </Button>\r\n    );\r\n  }\r\n\r\n  if (isError) {\r\n    return (\r\n      <div className=\"mb-4 flex flex-col gap-2\">\r\n        <p className=\"text-sm text-destructive\">\r\n          {error instanceof Error\r\n            ? error.message\r\n            : t(\"web-ui:organization.switcher.failedToLoadOrganizations\")}\r\n        </p>\r\n        <Button size=\"sm\" variant=\"flat\" onPress={() => void refetch()}>\r\n          {t(\"web-ui:organization.switcher.retry\")}\r\n        </Button>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <div className=\"mb-4\">\r\n      <Select\r\n        size=\"sm\"\r\n        label={t(\"web-ui:organization.switcher.label\")}\r\n        selectedKeys={activeOrganizationId ? [activeOrganizationId] : []}\r\n        disallowEmptySelection\r\n        isDisabled={isSwitching || organizations.length === 0}\r\n        onSelectionChange={(keys) => {\r\n          const selectedOrganizationId = Array.from(keys as Set<string>)[0];\r\n          if (selectedOrganizationId) {\r\n            void handleSwitchOrganization(selectedOrganizationId);\r\n          }\r\n        }}\r\n        classNames={{\r\n          trigger: cn(\"min-h-10\"),\r\n          value: cn(\"text-sm\"),\r\n        }}\r\n      >\r\n        {organizations.map((organization) => (\r\n          <SelectItem key={organization.id}>{organization.name}</SelectItem>\r\n        ))}\r\n      </Select>\r\n    </div>\r\n  );\r\n}\r\n"],"mappings":";;;;;;;;;;;;;AAyBA,SAAgB,qBAAqB,EACnC,2BACA,eAAe,CAAC,SAAS,QAAQ,EACjC,cAAc,yBACd,eAAe,OACa;CAC5B,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,EAAE,MAAM,SAAS,oBAAoB,YAAY;CACvD,MAAM,EAAE,SAAS,YAAY;CAC7B,MAAM,CAAC,aAAa,kBAAkB,SAAS,MAAM;CACrD,MAAM,uBAAuB,SAAS,QAAQ,wBAAwB;CACtE,MAAM,0BACH,SAAS,UAA6D,0BACvE;CAEF,MAAM,wBADiB,cAAc,IAAI,IAAI,aAAa,EAAE,CAAC,aAAa,CAAC,CAC9B,IAAI,uBAAuB;CAExE,MAAM,EACJ,MAAM,gBAAgB,EAAE,EACxB,SACA,OACA,YACE,SAAS;EACX,UAAU,CAAC,yBAAyB;EACpC,SAAS,YAAY;GACnB,MAAM,EAAE,MAAM,UAAU,MAAM,WAAW,aAAa,MAAM;AAC5D,OAAI,MACF,OAAM,IAAI,MACR,MAAM,WAAW,EAAE,yDAAyD,CAC7E;AAEH,UAAQ,QAAQ,EAAE;;EAErB,CAAC;CAEF,MAAM,2BAA2B,YAC/B,OAAO,mBAA2B;AAChC,MAAI,CAAC,kBAAkB,mBAAmB,wBAAwB,YAChE;AAGF,MAAI;AACF,kBAAe,KAAK;GACpB,MAAM,EAAE,UAAU,MAAM,WAAW,aAAa,UAAU,EAAE,gBAAgB,CAAC;AAC7E,OAAI,MACF,OAAM,IAAI,MACR,MAAM,WAAW,EAAE,0DAA0D,CAC9E;AAGH,yBAAsB;AACf,iCAA6B;KAClC;AACF,SAAM,QAAQ,EAAE,oDAAoD,CAAC;WAC9D,OAAO;AACd,SAAM,MACJ,iBAAiB,QACb,MAAM,UACN,EAAE,0DAA0D,CACjE;YACO;AACR,kBAAe,MAAM;;IAGzB;EAAC;EAAsB;EAAa;EAA2B;EAAiB;EAAE,CACnF;AAED,KAAI,CAAC,KACH,QACE,oBAAC,QAAD;EACE,IAAIA;EACJ,IAAI,wBAAwB,cAAc;EAC1C,SAAQ;EACR,MAAK;EACL,YAAA;EACA,cAAY,EAAE,qCAAqC;YAEnD,oBAAC,WAAD,EAAW,WAAU,WAAY,CAAA;EAC1B,CAAA;AAIb,KAAI,QACF,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,KAAD;GAAG,WAAU;aACV,iBAAiB,QACd,MAAM,UACN,EAAE,yDAAyD;GAC7D,CAAA,EACJ,oBAAC,QAAD;GAAQ,MAAK;GAAK,SAAQ;GAAO,eAAe,KAAK,SAAS;aAC3D,EAAE,qCAAqC;GACjC,CAAA,CACL;;AAIV,QACE,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,QAAD;GACE,MAAK;GACL,OAAO,EAAE,qCAAqC;GAC9C,cAAc,uBAAuB,CAAC,qBAAqB,GAAG,EAAE;GAChE,wBAAA;GACA,YAAY,eAAe,cAAc,WAAW;GACpD,oBAAoB,SAAS;IAC3B,MAAM,yBAAyB,MAAM,KAAK,KAAoB,CAAC;AAC/D,QAAI,uBACG,0BAAyB,uBAAuB;;GAGzD,YAAY;IACV,SAAS,GAAG,WAAW;IACvB,OAAO,GAAG,UAAU;IACrB;aAEA,cAAc,KAAK,iBAClB,oBAAC,YAAD,EAAA,UAAmC,aAAa,MAAkB,EAAjD,aAAa,GAAoC,CAClE;GACK,CAAA;EACL,CAAA"}

package/dist/src/modules/auth/components/PreferencesEditor.d.mts

@@ -0,0 +1,49 @@
+import { ReactElement } from "react";
+import { z } from "zod";
+
+//#region src/modules/auth/components/PreferencesEditor.d.ts
+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 };
+type PreferenceEditorLabels = {
+  title: string;
+  submit: string;
+  updated: string;
+  updateError: string;
+  loading?: string;
+};
+type PreferenceEditorProps<S extends z.ZodObject<z.ZodRawShape>> = {
+  schema: S;
+  controls: ControlsFor<z.infer<S>>;
+  values: Partial<z.infer<S>>;
+  isLoading: boolean;
+  isPending: boolean;
+  labels: PreferenceEditorLabels;
+  updateValues: (partialValues: Partial<z.infer<S>>, options: UpdatePreferencesOptions) => void;
+};
+declare function PreferencesEditor<S extends z.ZodObject<z.ZodRawShape>>({
+  schema,
+  controls,
+  values,
+  isLoading,
+  isPending,
+  labels,
+  updateValues
+}: PreferenceEditorProps<S>): ReactElement;
+//#endregion
+export { ControlDefinition, ControlsFor, PreferenceEditorLabels, PreferenceEditorProps, PreferencesEditor, UpdatePreferencesOptions };
+//# sourceMappingURL=PreferencesEditor.d.mts.map

package/dist/src/modules/auth/components/PreferencesEditor.mjs

@@ -0,0 +1,85 @@
+import { Button, Form, Input, Select, SelectItem, Switch } from "@heroui/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { toast } from "sonner";
+//#region src/modules/auth/components/PreferencesEditor.tsx
+function PreferencesEditor({ schema, controls, values, isLoading, isPending, labels, updateValues }) {
+	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 === "" ? void 0 : Number(value);
+			}
+		}
+		const result = schema.safeParse(raw);
+		if (result.success) updateValues(result.data, {
+			noOptimisticUpdate: true,
+			onSuccess: () => {
+				toast.success(labels.updated);
+			},
+			onError: () => {
+				toast.error(labels.updateError);
+			}
+		});
+		else console.error(result.error);
+	}
+	const keys = Object.keys(controls);
+	const formKey = keys.map((key) => `${String(key)}:${String(values[key])}`).join("|");
+	if (isLoading) return /* @__PURE__ */ jsx("div", { children: labels.loading ?? "Loading..." });
+	return /* @__PURE__ */ jsxs(Form, {
+		onSubmit: handleSubmit,
+		className: "flex flex-col gap-4 p-6",
+		children: [
+			/* @__PURE__ */ jsx("h1", {
+				className: "text-2xl font-bold",
+				children: labels.title
+			}),
+			keys.map((key) => {
+				const control = controls[key];
+				const value = values[key];
+				switch (control.element) {
+					case "switch": return /* @__PURE__ */ jsx(Switch, {
+						name: String(key),
+						value: "on",
+						defaultSelected: Boolean(value),
+						children: control.label
+					}, String(key));
+					case "select": return /* @__PURE__ */ jsx(Select, {
+						name: String(key),
+						label: control.label,
+						labelPlacement: "outside-top",
+						defaultSelectedKeys: value == null || value === "" ? [] : [String(value)],
+						children: (control.options ?? []).map((option) => /* @__PURE__ */ jsx(SelectItem, { children: option.label }, option.value))
+					}, String(key));
+					case "number": return /* @__PURE__ */ jsx(Input, {
+						name: String(key),
+						type: "number",
+						label: control.label,
+						labelPlacement: "outside-top",
+						defaultValue: value == null ? "" : String(value),
+						min: control.min,
+						max: control.max,
+						step: control.step
+					}, String(key));
+					default: return /* @__PURE__ */ jsx("div", { children: "Invalid control" }, String(key));
+				}
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				type: "submit",
+				color: "success",
+				isLoading: isPending,
+				children: labels.submit
+			})
+		]
+	}, formKey);
+}
+//#endregion
+export { PreferencesEditor };
+
+//# sourceMappingURL=PreferencesEditor.mjs.map

package/dist/src/modules/auth/components/PreferencesEditor.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreferencesEditor.mjs","names":[],"sources":["../../../../../src/modules/auth/components/PreferencesEditor.tsx"],"sourcesContent":["import { Button, Form, Input, Select, SelectItem, Switch } from \"@heroui/react\";\r\nimport type { FormEvent, ReactElement } from \"react\";\r\nimport { toast } from \"sonner\";\r\nimport type { z } from \"zod\";\r\n\r\nexport type UpdatePreferencesOptions = {\r\n  noOptimisticUpdate?: boolean;\r\n  onSuccess?: () => void;\r\n  onError?: (error: unknown) => void;\r\n};\r\n\r\nexport interface ControlDefinition {\r\n  label: string;\r\n  element: \"switch\" | \"select\" | \"number\";\r\n  options?: { label: string; value: string }[];\r\n  min?: number;\r\n  max?: number;\r\n  step?: number;\r\n}\r\n\r\nexport type ControlsFor<Preferences> = {\r\n  [K in keyof Preferences]: ControlDefinition;\r\n};\r\n\r\nexport type PreferenceEditorLabels = {\r\n  title: string;\r\n  submit: string;\r\n  updated: string;\r\n  updateError: string;\r\n  loading?: string;\r\n};\r\n\r\nexport type PreferenceEditorProps<S extends z.ZodObject<z.ZodRawShape>> = {\r\n  schema: S;\r\n  controls: ControlsFor<z.infer<S>>;\r\n  values: Partial<z.infer<S>>;\r\n  isLoading: boolean;\r\n  isPending: boolean;\r\n  labels: PreferenceEditorLabels;\r\n  updateValues: (partialValues: Partial<z.infer<S>>, options: UpdatePreferencesOptions) => void;\r\n};\r\n\r\nexport function PreferencesEditor<S extends z.ZodObject<z.ZodRawShape>>({\r\n  schema,\r\n  controls,\r\n  values,\r\n  isLoading,\r\n  isPending,\r\n  labels,\r\n  updateValues,\r\n}: PreferenceEditorProps<S>): ReactElement {\r\n  function handleSubmit(event: FormEvent<HTMLFormElement>) {\r\n    event.preventDefault();\r\n    const formData = new FormData(event.currentTarget);\r\n\r\n    const keys = Object.keys(controls) as Array<keyof typeof controls>;\r\n    const raw: Record<string, unknown> = {};\r\n    for (const key of keys) {\r\n      const control = controls[key];\r\n      if (control.element === \"switch\") {\r\n        raw[String(key)] = formData.get(String(key)) != null;\r\n      }\r\n      if (control.element === \"select\") {\r\n        raw[String(key)] = formData.get(String(key)) as string;\r\n      }\r\n      if (control.element === \"number\") {\r\n        const value = formData.get(String(key));\r\n        raw[String(key)] = value == null || value === \"\" ? undefined : Number(value);\r\n      }\r\n    }\r\n\r\n    const result = schema.safeParse(raw);\r\n    if (result.success) {\r\n      updateValues(result.data as Partial<z.infer<S>>, {\r\n        noOptimisticUpdate: true,\r\n        onSuccess: () => {\r\n          toast.success(labels.updated);\r\n        },\r\n        onError: () => {\r\n          toast.error(labels.updateError);\r\n        },\r\n      });\r\n    } else {\r\n      // eslint-disable-next-line no-console\r\n      console.error(result.error);\r\n    }\r\n  }\r\n\r\n  const keys = Object.keys(controls) as Array<keyof typeof controls>;\r\n  const formKey = keys\r\n    .map((key) => `${String(key)}:${String(values[key as keyof typeof values])}`)\r\n    .join(\"|\");\r\n\r\n  if (isLoading) {\r\n    return <div>{labels.loading ?? \"Loading...\"}</div>;\r\n  }\r\n\r\n  return (\r\n    <Form key={formKey} onSubmit={handleSubmit} className=\"flex flex-col gap-4 p-6\">\r\n      <h1 className=\"text-2xl font-bold\">{labels.title}</h1>\r\n      {keys.map((key) => {\r\n        const control = controls[key];\r\n        const value = values[key as keyof typeof values];\r\n\r\n        switch (control.element) {\r\n          case \"switch\":\r\n            return (\r\n              <Switch\r\n                key={String(key)}\r\n                name={String(key)}\r\n                value=\"on\"\r\n                defaultSelected={Boolean(value)}\r\n              >\r\n                {control.label}\r\n              </Switch>\r\n            );\r\n          case \"select\":\r\n            return (\r\n              <Select\r\n                key={String(key)}\r\n                name={String(key)}\r\n                label={control.label}\r\n                labelPlacement=\"outside-top\"\r\n                defaultSelectedKeys={value == null || value === \"\" ? [] : [String(value)]}\r\n              >\r\n                {(control.options ?? []).map((option) => (\r\n                  <SelectItem key={option.value}>{option.label}</SelectItem>\r\n                ))}\r\n              </Select>\r\n            );\r\n          case \"number\":\r\n            return (\r\n              <Input\r\n                key={String(key)}\r\n                name={String(key)}\r\n                type=\"number\"\r\n                label={control.label}\r\n                labelPlacement=\"outside-top\"\r\n                defaultValue={value == null ? \"\" : String(value)}\r\n                min={control.min}\r\n                max={control.max}\r\n                step={control.step}\r\n              />\r\n            );\r\n          default:\r\n            return <div key={String(key)}>Invalid control</div>;\r\n        }\r\n      })}\r\n      <Button type=\"submit\" color=\"success\" isLoading={isPending}>\r\n        {labels.submit}\r\n      </Button>\r\n    </Form>\r\n  );\r\n}\r\n"],"mappings":";;;;AA0CA,SAAgB,kBAAwD,EACtE,QACA,UACA,QACA,WACA,WACA,QACA,gBACyC;CACzC,SAAS,aAAa,OAAmC;AACvD,QAAM,gBAAgB;EACtB,MAAM,WAAW,IAAI,SAAS,MAAM,cAAc;EAElD,MAAM,OAAO,OAAO,KAAK,SAAS;EAClC,MAAM,MAA+B,EAAE;AACvC,OAAK,MAAM,OAAO,MAAM;GACtB,MAAM,UAAU,SAAS;AACzB,OAAI,QAAQ,YAAY,SACtB,KAAI,OAAO,IAAI,IAAI,SAAS,IAAI,OAAO,IAAI,CAAC,IAAI;AAElD,OAAI,QAAQ,YAAY,SACtB,KAAI,OAAO,IAAI,IAAI,SAAS,IAAI,OAAO,IAAI,CAAC;AAE9C,OAAI,QAAQ,YAAY,UAAU;IAChC,MAAM,QAAQ,SAAS,IAAI,OAAO,IAAI,CAAC;AACvC,QAAI,OAAO,IAAI,IAAI,SAAS,QAAQ,UAAU,KAAK,KAAA,IAAY,OAAO,MAAM;;;EAIhF,MAAM,SAAS,OAAO,UAAU,IAAI;AACpC,MAAI,OAAO,QACT,cAAa,OAAO,MAA6B;GAC/C,oBAAoB;GACpB,iBAAiB;AACf,UAAM,QAAQ,OAAO,QAAQ;;GAE/B,eAAe;AACb,UAAM,MAAM,OAAO,YAAY;;GAElC,CAAC;MAGF,SAAQ,MAAM,OAAO,MAAM;;CAI/B,MAAM,OAAO,OAAO,KAAK,SAAS;CAClC,MAAM,UAAU,KACb,KAAK,QAAQ,GAAG,OAAO,IAAI,CAAC,GAAG,OAAO,OAAO,KAA4B,GAAG,CAC5E,KAAK,IAAI;AAEZ,KAAI,UACF,QAAO,oBAAC,OAAD,EAAA,UAAM,OAAO,WAAW,cAAmB,CAAA;AAGpD,QACE,qBAAC,MAAD;EAAoB,UAAU;EAAc,WAAU;YAAtD;GACE,oBAAC,MAAD;IAAI,WAAU;cAAsB,OAAO;IAAW,CAAA;GACrD,KAAK,KAAK,QAAQ;IACjB,MAAM,UAAU,SAAS;IACzB,MAAM,QAAQ,OAAO;AAErB,YAAQ,QAAQ,SAAhB;KACE,KAAK,SACH,QACE,oBAAC,QAAD;MAEE,MAAM,OAAO,IAAI;MACjB,OAAM;MACN,iBAAiB,QAAQ,MAAM;gBAE9B,QAAQ;MACF,EANF,OAAO,IAAI,CAMT;KAEb,KAAK,SACH,QACE,oBAAC,QAAD;MAEE,MAAM,OAAO,IAAI;MACjB,OAAO,QAAQ;MACf,gBAAe;MACf,qBAAqB,SAAS,QAAQ,UAAU,KAAK,EAAE,GAAG,CAAC,OAAO,MAAM,CAAC;iBAEvE,QAAQ,WAAW,EAAE,EAAE,KAAK,WAC5B,oBAAC,YAAD,EAAA,UAAgC,OAAO,OAAmB,EAAzC,OAAO,MAAkC,CAC1D;MACK,EATF,OAAO,IAAI,CAST;KAEb,KAAK,SACH,QACE,oBAAC,OAAD;MAEE,MAAM,OAAO,IAAI;MACjB,MAAK;MACL,OAAO,QAAQ;MACf,gBAAe;MACf,cAAc,SAAS,OAAO,KAAK,OAAO,MAAM;MAChD,KAAK,QAAQ;MACb,KAAK,QAAQ;MACb,MAAM,QAAQ;MACd,EATK,OAAO,IAAI,CAShB;KAEN,QACE,QAAO,oBAAC,OAAD,EAAA,UAAuB,mBAAqB,EAAlC,OAAO,IAAI,CAAuB;;KAEvD;GACF,oBAAC,QAAD;IAAQ,MAAK;IAAS,OAAM;IAAU,WAAW;cAC9C,OAAO;IACD,CAAA;GACJ;IArDI,QAqDJ"}

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

@@ -0,0 +1,7 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/modules/auth/components/ProfileRoute.d.ts
+declare function ProfileRoute(): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ProfileRoute };
+//# sourceMappingURL=ProfileRoute.d.mts.map

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

@@ -0,0 +1,85 @@
+import { AvatarUpload } from "../../../components/AvatarUpload.mjs";
+import { Form as Form$1, FormControl, FormField, FormItem, FormLabel, FormMessage } from "../../../components/ui/form.mjs";
+import { Button, Card, CardBody, CardHeader, Input } from "@heroui/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import { useForm } from "react-hook-form";
+import { authClient } from "@m5kdev/frontend/modules/auth/auth.lib";
+import { useSession } from "@m5kdev/frontend/modules/auth/hooks/useSession";
+import { z } from "zod";
+//#region src/modules/auth/components/ProfileRoute.tsx
+z.object({
+	name: z.string().min(2, "Name must be at least 2 characters"),
+	image: z.string().nullable()
+});
+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 /* @__PURE__ */ jsx("div", {
+		className: "container py-10 px-4",
+		children: /* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsxs(CardHeader, {
+			className: "flex flex-col gap-1",
+			children: [/* @__PURE__ */ jsx("p", {
+				className: "text-xl font-semibold",
+				children: t("web-ui:profile.settings.title")
+			}), /* @__PURE__ */ jsx("p", {
+				className: "text-sm text-default-600",
+				children: t("web-ui:profile.settings.description")
+			})]
+		}), /* @__PURE__ */ jsx(CardBody, { children: /* @__PURE__ */ jsx(Form$1, {
+			...form,
+			children: /* @__PURE__ */ jsxs("form", {
+				onSubmit: form.handleSubmit(onSubmit),
+				className: "space-y-6",
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "flex justify-center",
+						children: /* @__PURE__ */ jsx(FormField, {
+							control: form.control,
+							name: "image",
+							render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(AvatarUpload, {
+								currentAvatarUrl: field.value,
+								onUploadComplete: (url) => {
+									console.log(url);
+									field.onChange(url);
+								}
+							}) }), /* @__PURE__ */ jsx(FormMessage, {})] })
+						})
+					}),
+					/* @__PURE__ */ jsx(FormField, {
+						control: form.control,
+						name: "name",
+						render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
+							/* @__PURE__ */ jsx(FormLabel, { children: "Name" }),
+							/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Input, {
+								placeholder: t("web-ui:profile.placeholders.name"),
+								...field
+							}) }),
+							/* @__PURE__ */ jsx(FormMessage, {})
+						] })
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						type: "submit",
+						children: "Save Changes"
+					})
+				]
+			})
+		}) })] })
+	});
+}
+//#endregion
+export { ProfileRoute };
+
+//# sourceMappingURL=ProfileRoute.mjs.map

package/dist/src/modules/auth/components/ProfileRoute.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProfileRoute.mjs","names":["Form"],"sources":["../../../../../src/modules/auth/components/ProfileRoute.tsx"],"sourcesContent":["import { Button, Card, CardBody, CardHeader, Input } from \"@heroui/react\";\r\n\r\nimport { authClient } from \"@m5kdev/frontend/modules/auth/auth.lib\";\r\nimport { useSession } from \"@m5kdev/frontend/modules/auth/hooks/useSession\";\r\nimport { useForm } from \"react-hook-form\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { toast } from \"sonner\";\r\nimport { z } from \"zod\";\r\nimport { AvatarUpload } from \"../../../components/AvatarUpload\";\r\nimport {\r\n  Form,\r\n  FormControl,\r\n  FormField,\r\n  FormItem,\r\n  FormLabel,\r\n  FormMessage,\r\n} from \"../../../components/ui/form\";\r\n\r\nconst profileSchema = z.object({\r\n  name: z.string().min(2, \"Name must be at least 2 characters\"),\r\n  image: z.string().nullable(),\r\n});\r\n\r\ntype ProfileFormValues = z.infer<typeof profileSchema>;\r\n\r\nexport function ProfileRoute() {\r\n  const { t } = useTranslation();\r\n  const { data: session } = useSession();\r\n\r\n  const form = useForm<ProfileFormValues>({\r\n    defaultValues: {\r\n      name: session?.user?.name || \"\",\r\n      image: session?.user?.image || null,\r\n    },\r\n  });\r\n\r\n  function onSubmit(data: ProfileFormValues) {\r\n    authClient\r\n      .updateUser(data)\r\n      .then(() => {\r\n        toast.success(t(\"web-ui:profile.updated\"), {\r\n          description: t(\"web-ui:profile.updateDescription\"),\r\n        });\r\n      })\r\n      .catch(() => {\r\n        toast.error(t(\"web-ui:profile.error\"), {\r\n          description: t(\"web-ui:profile.errorDescription\"),\r\n        });\r\n      });\r\n  }\r\n\r\n  return (\r\n    <div className=\"container py-10 px-4\">\r\n      <Card>\r\n        <CardHeader className=\"flex flex-col gap-1\">\r\n          <p className=\"text-xl font-semibold\">{t(\"web-ui:profile.settings.title\")}</p>\r\n          <p className=\"text-sm text-default-600\">{t(\"web-ui:profile.settings.description\")}</p>\r\n        </CardHeader>\r\n        <CardBody>\r\n          <Form {...form}>\r\n            <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-6\">\r\n              <div className=\"flex justify-center\">\r\n                <FormField\r\n                  control={form.control}\r\n                  name=\"image\"\r\n                  render={({ field }) => (\r\n                    <FormItem>\r\n                      <FormControl>\r\n                        <AvatarUpload\r\n                          currentAvatarUrl={field.value}\r\n                          onUploadComplete={(url) => {\r\n                            console.log(url);\r\n                            field.onChange(url);\r\n                          }}\r\n                        />\r\n                      </FormControl>\r\n                      <FormMessage />\r\n                    </FormItem>\r\n                  )}\r\n                />\r\n              </div>\r\n\r\n              <FormField\r\n                control={form.control}\r\n                name=\"name\"\r\n                render={({ field }) => (\r\n                  <FormItem>\r\n                    <FormLabel>Name</FormLabel>\r\n                    <FormControl>\r\n                      <Input placeholder={t(\"web-ui:profile.placeholders.name\")} {...field} />\r\n                    </FormControl>\r\n                    <FormMessage />\r\n                  </FormItem>\r\n                )}\r\n              />\r\n\r\n              <Button type=\"submit\">Save Changes</Button>\r\n            </form>\r\n          </Form>\r\n        </CardBody>\r\n      </Card>\r\n    </div>\r\n  );\r\n}\r\n"],"mappings":";;;;;;;;;;;AAkBsB,EAAE,OAAO;CAC7B,MAAM,EAAE,QAAQ,CAAC,IAAI,GAAG,qCAAqC;CAC7D,OAAO,EAAE,QAAQ,CAAC,UAAU;CAC7B,CAAC;AAIF,SAAgB,eAAe;CAC7B,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,EAAE,MAAM,YAAY,YAAY;CAEtC,MAAM,OAAO,QAA2B,EACtC,eAAe;EACb,MAAM,SAAS,MAAM,QAAQ;EAC7B,OAAO,SAAS,MAAM,SAAS;EAChC,EACF,CAAC;CAEF,SAAS,SAAS,MAAyB;AACzC,aACG,WAAW,KAAK,CAChB,WAAW;AACV,SAAM,QAAQ,EAAE,yBAAyB,EAAE,EACzC,aAAa,EAAE,mCAAmC,EACnD,CAAC;IACF,CACD,YAAY;AACX,SAAM,MAAM,EAAE,uBAAuB,EAAE,EACrC,aAAa,EAAE,kCAAkC,EAClD,CAAC;IACF;;AAGN,QACE,oBAAC,OAAD;EAAK,WAAU;YACb,qBAAC,MAAD,EAAA,UAAA,CACE,qBAAC,YAAD;GAAY,WAAU;aAAtB,CACE,oBAAC,KAAD;IAAG,WAAU;cAAyB,EAAE,gCAAgC;IAAK,CAAA,EAC7E,oBAAC,KAAD;IAAG,WAAU;cAA4B,EAAE,sCAAsC;IAAK,CAAA,CAC3E;MACb,oBAAC,UAAD,EAAA,UACE,oBAACA,QAAD;GAAM,GAAI;aACR,qBAAC,QAAD;IAAM,UAAU,KAAK,aAAa,SAAS;IAAE,WAAU;cAAvD;KACE,oBAAC,OAAD;MAAK,WAAU;gBACb,oBAAC,WAAD;OACE,SAAS,KAAK;OACd,MAAK;OACL,SAAS,EAAE,YACT,qBAAC,UAAD,EAAA,UAAA,CACE,oBAAC,aAAD,EAAA,UACE,oBAAC,cAAD;QACE,kBAAkB,MAAM;QACxB,mBAAmB,QAAQ;AACzB,iBAAQ,IAAI,IAAI;AAChB,eAAM,SAAS,IAAI;;QAErB,CAAA,EACU,CAAA,EACd,oBAAC,aAAD,EAAe,CAAA,CACN,EAAA,CAAA;OAEb,CAAA;MACE,CAAA;KAEN,oBAAC,WAAD;MACE,SAAS,KAAK;MACd,MAAK;MACL,SAAS,EAAE,YACT,qBAAC,UAAD,EAAA,UAAA;OACE,oBAAC,WAAD,EAAA,UAAW,QAAgB,CAAA;OAC3B,oBAAC,aAAD,EAAA,UACE,oBAAC,OAAD;QAAO,aAAa,EAAE,mCAAmC;QAAE,GAAI;QAAS,CAAA,EAC5D,CAAA;OACd,oBAAC,aAAD,EAAe,CAAA;OACN,EAAA,CAAA;MAEb,CAAA;KAEF,oBAAC,QAAD;MAAQ,MAAK;gBAAS;MAAqB,CAAA;KACtC;;GACF,CAAA,EACE,CAAA,CACN,EAAA,CAAA;EACH,CAAA"}

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

@@ -0,0 +1,45 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/modules/auth/components/RangeNuqsDatePicker.d.ts
+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;
+}
+declare const RangeNuqsDatePicker: ({
+  columnId,
+  endColumnId,
+  dateRangeLabel,
+  quickRangeLabel,
+  translationNamespace,
+  showQuickRange,
+  className
+}: RangeNuqsDatePickerProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { RangeNuqsDatePicker, RangeNuqsDatePickerProps };
+//# sourceMappingURL=RangeNuqsDatePicker.d.mts.map

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

@@ -0,0 +1,239 @@
+import { startTransition, useEffect, useMemo, useState } from "react";
+import { DateRangePicker, Select, SelectItem } from "@heroui/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import { CalendarDate, getLocalTimeZone, today } from "@internationalized/date";
+import { DateTime } from "luxon";
+import { useNuqsQueryParams } from "@m5kdev/frontend/modules/table/hooks/useNuqsQueryParams";
+import { calendarDateToEndOfDayUTC, calendarDateToUTC, dateFilterToRangeValue } from "@m5kdev/web-ui/modules/table/filterTransformers";
+//#region src/modules/auth/components/RangeNuqsDatePicker.tsx
+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;
+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);
+	const dateRange = useMemo(() => {
+		return dateFilterToRangeValue(filters, columnId);
+	}, [filters, columnId]);
+	const [localRange, setLocalRange] = useState(dateRange);
+	useEffect(() => {
+		setLocalRange(dateRange);
+	}, [dateRange]);
+	const quickRangeOptions = useMemo(() => {
+		const todayStart = DateTime.utc().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 });
+		return [
+			{
+				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")
+			}
+		].map((opt) => ({
+			key: opt.key,
+			label: opt.label,
+			range: {
+				start: toCalendarDate(opt.start),
+				end: toCalendarDate(opt.end)
+			}
+		}));
+	}, [
+		t,
+		DateTime.utc().toISODate(),
+		translationNamespace
+	]);
+	useEffect(() => {
+		if (hasInitialized || !setFilters) return;
+		if (dateRange) {
+			setHasInitialized(true);
+			return;
+		}
+		const thisMonthOption = quickRangeOptions.find((opt) => opt.key === "thisMonth");
+		if (thisMonthOption) {
+			setHasInitialized(true);
+			setQuickRange("thisMonth");
+			const startDate = thisMonthOption.range.start;
+			const endDate = thisMonthOption.range.end;
+			setFilters([...filters?.filter((f) => f.columnId !== columnId && f.columnId !== endColumnId) ?? [], {
+				columnId,
+				type: "date",
+				method: "intersect",
+				value: calendarDateToUTC(startDate),
+				valueTo: calendarDateToEndOfDayUTC(endDate),
+				endColumnId
+			}]);
+		}
+	}, [
+		dateRange,
+		columnId,
+		endColumnId,
+		quickRangeOptions,
+		hasInitialized,
+		setFilters
+	]);
+	useEffect(() => {
+		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 (quickRange ? matches.find((m) => m.key === quickRange) : null) return;
+		setQuickRange(([
+			"today",
+			"yesterday",
+			"thisWeek",
+			"lastWeek",
+			"thisMonth",
+			"lastMonth",
+			"last7",
+			"last30"
+		].map((key) => matches.find((m) => m.key === key)).find((m) => Boolean(m)) ?? matches[0])?.key ?? null);
+	}, [
+		dateRange,
+		quickRangeOptions,
+		quickRange,
+		hasInitialized
+	]);
+	const handleDateRangeChange = (range) => {
+		if (!setFilters) return;
+		if (range === null) {
+			const newFilters = filters?.filter((f) => f.columnId !== columnId && f.columnId !== endColumnId) ?? [];
+			startTransition(() => setFilters(newFilters));
+			return;
+		}
+		if (!range.start || !range.end) return;
+		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
+		}];
+		startTransition(() => 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 /* @__PURE__ */ jsxs("div", {
+		className: `flex gap-4 flex-row ${className ?? ""}`,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-2",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-sm text-muted-foreground",
+				children: dateRangeLabel ?? t(`${translationNamespace}:reports.dateRange`, { defaultValue: "Date range" })
+			}), /* @__PURE__ */ jsx(DateRangePicker, {
+				"aria-label": "Date range",
+				value: localRange ?? void 0,
+				onChange: setLocalRange,
+				onBlur: () => {
+					if (localRange !== void 0) handleDateRangeChange(localRange);
+				},
+				className: "w-[300px]",
+				granularity: "day",
+				showMonthAndYearPickers: true,
+				maxValue: today(getLocalTimeZone()),
+				popoverProps: {
+					portalContainer: document.body,
+					disableAnimation: true
+				}
+			})]
+		}), showQuickRange && /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-2",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-sm text-muted-foreground",
+				children: quickRangeLabel ?? t(`${translationNamespace}:reports.quickRange.label`, { defaultValue: "Quick range" })
+			}), /* @__PURE__ */ jsx(Select, {
+				selectedKeys: quickRange ? [quickRange] : [],
+				onChange: (e) => handleQuickRangeChange(e.target.value ?? null),
+				className: "w-[300px]",
+				popoverProps: { portalContainer: document.body },
+				children: quickRangeOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, { children: option.label }, option.key))
+			})]
+		})]
+	});
+};
+//#endregion
+export { RangeNuqsDatePicker };
+
+//# sourceMappingURL=RangeNuqsDatePicker.mjs.map