@m5kdev/web-ui 0.8.6 → 0.8.8

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

@@ -0,0 +1,87 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../../../../_virtual/_rolldown/runtime.js");
+let _heroui_react = require("@heroui/react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let sonner = require("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: () => {
+				sonner.toast.success(labels.updated);
+			},
+			onError: () => {
+				sonner.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__ */ (0, react_jsx_runtime.jsx)("div", { children: labels.loading ?? "Loading..." });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_heroui_react.Form, {
+		onSubmit: handleSubmit,
+		className: "flex flex-col gap-4 p-6",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(_heroui_react.Switch, {
+						name: String(key),
+						value: "on",
+						defaultSelected: Boolean(value),
+						children: control.label
+					}, String(key));
+					case "select": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_react.Select, {
+						name: String(key),
+						label: control.label,
+						labelPlacement: "outside-top",
+						defaultSelectedKeys: value == null || value === "" ? [] : [String(value)],
+						children: (control.options ?? []).map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_react.SelectItem, { children: option.label }, option.value))
+					}, String(key));
+					case "number": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_react.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__ */ (0, react_jsx_runtime.jsx)("div", { children: "Invalid control" }, String(key));
+				}
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_react.Button, {
+				type: "submit",
+				color: "success",
+				isLoading: isPending,
+				children: labels.submit
+			})
+		]
+	}, formKey);
+}
+//#endregion
+exports.PreferencesEditor = PreferencesEditor;
+
+//# sourceMappingURL=PreferencesEditor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PreferencesEditor.js","names":["Form","Switch","Select","SelectItem","Input","Button"],"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":"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"}

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

@@ -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.ts.map

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

@@ -0,0 +1,87 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../../../../_virtual/_rolldown/runtime.js");
+const require_src_components_AvatarUpload = require("../../../components/AvatarUpload.js");
+const require_src_components_ui_form = require("../../../components/ui/form.js");
+let _heroui_react = require("@heroui/react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_i18next = require("react-i18next");
+let sonner = require("sonner");
+let react_hook_form = require("react-hook-form");
+let _m5kdev_frontend_modules_auth_auth_lib = require("@m5kdev/frontend/modules/auth/auth.lib");
+let _m5kdev_frontend_modules_auth_hooks_useSession = require("@m5kdev/frontend/modules/auth/hooks/useSession");
+let zod = require("zod");
+//#region src/modules/auth/components/ProfileRoute.tsx
+zod.z.object({
+	name: zod.z.string().min(2, "Name must be at least 2 characters"),
+	image: zod.z.string().nullable()
+});
+function ProfileRoute() {
+	const { t } = (0, react_i18next.useTranslation)();
+	const { data: session } = (0, _m5kdev_frontend_modules_auth_hooks_useSession.useSession)();
+	const form = (0, react_hook_form.useForm)({ defaultValues: {
+		name: session?.user?.name || "",
+		image: session?.user?.image || null
+	} });
+	function onSubmit(data) {
+		_m5kdev_frontend_modules_auth_auth_lib.authClient.updateUser(data).then(() => {
+			sonner.toast.success(t("web-ui:profile.updated"), { description: t("web-ui:profile.updateDescription") });
+		}).catch(() => {
+			sonner.toast.error(t("web-ui:profile.error"), { description: t("web-ui:profile.errorDescription") });
+		});
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "container py-10 px-4",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_heroui_react.Card, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_heroui_react.CardHeader, {
+			className: "flex flex-col gap-1",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "text-xl font-semibold",
+				children: t("web-ui:profile.settings.title")
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "text-sm text-default-600",
+				children: t("web-ui:profile.settings.description")
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_react.CardBody, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src_components_ui_form.Form, {
+			...form,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
+				onSubmit: form.handleSubmit(onSubmit),
+				className: "space-y-6",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "flex justify-center",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src_components_ui_form.FormField, {
+							control: form.control,
+							name: "image",
+							render: ({ field }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src_components_ui_form.FormItem, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src_components_ui_form.FormControl, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src_components_AvatarUpload.AvatarUpload, {
+								currentAvatarUrl: field.value,
+								onUploadComplete: (url) => {
+									console.log(url);
+									field.onChange(url);
+								}
+							}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src_components_ui_form.FormMessage, {})] })
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src_components_ui_form.FormField, {
+						control: form.control,
+						name: "name",
+						render: ({ field }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src_components_ui_form.FormItem, { children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src_components_ui_form.FormLabel, { children: "Name" }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src_components_ui_form.FormControl, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_react.Input, {
+								placeholder: t("web-ui:profile.placeholders.name"),
+								...field
+							}) }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src_components_ui_form.FormMessage, {})
+						] })
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_react.Button, {
+						type: "submit",
+						children: "Save Changes"
+					})
+				]
+			})
+		}) })] })
+	});
+}
+//#endregion
+exports.ProfileRoute = ProfileRoute;
+
+//# sourceMappingURL=ProfileRoute.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProfileRoute.js","names":["z","Card","CardHeader","CardBody","Form","FormField","FormItem","FormControl","AvatarUpload","FormMessage","FormLabel","Input","Button"],"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":";;;;;;;;;;;;;AAkBsBA,IAAAA,EAAE,OAAO;CAC7B,MAAMA,IAAAA,EAAE,QAAQ,CAAC,IAAI,GAAG,qCAAqC;CAC7D,OAAOA,IAAAA,EAAE,QAAQ,CAAC,UAAU;CAC7B,CAAC;AAIF,SAAgB,eAAe;CAC7B,MAAM,EAAE,OAAA,GAAA,cAAA,iBAAsB;CAC9B,MAAM,EAAE,MAAM,aAAA,GAAA,+CAAA,aAAwB;CAEtC,MAAM,QAAA,GAAA,gBAAA,SAAkC,EACtC,eAAe;EACb,MAAM,SAAS,MAAM,QAAQ;EAC7B,OAAO,SAAS,MAAM,SAAS;EAChC,EACF,CAAC;CAEF,SAAS,SAAS,MAAyB;AACzC,yCAAA,WACG,WAAW,KAAK,CAChB,WAAW;AACV,UAAA,MAAM,QAAQ,EAAE,yBAAyB,EAAE,EACzC,aAAa,EAAE,mCAAmC,EACnD,CAAC;IACF,CACD,YAAY;AACX,UAAA,MAAM,MAAM,EAAE,uBAAuB,EAAE,EACrC,aAAa,EAAE,kCAAkC,EAClD,CAAC;IACF;;AAGN,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,WAAU;YACb,iBAAA,GAAA,kBAAA,MAACC,cAAAA,MAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,MAACC,cAAAA,YAAD;GAAY,WAAU;aAAtB,CACE,iBAAA,GAAA,kBAAA,KAAC,KAAD;IAAG,WAAU;cAAyB,EAAE,gCAAgC;IAAK,CAAA,EAC7E,iBAAA,GAAA,kBAAA,KAAC,KAAD;IAAG,WAAU;cAA4B,EAAE,sCAAsC;IAAK,CAAA,CAC3E;MACb,iBAAA,GAAA,kBAAA,KAACC,cAAAA,UAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAACC,+BAAAA,MAAD;GAAM,GAAI;aACR,iBAAA,GAAA,kBAAA,MAAC,QAAD;IAAM,UAAU,KAAK,aAAa,SAAS;IAAE,WAAU;cAAvD;KACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;MAAK,WAAU;gBACb,iBAAA,GAAA,kBAAA,KAACC,+BAAAA,WAAD;OACE,SAAS,KAAK;OACd,MAAK;OACL,SAAS,EAAE,YACT,iBAAA,GAAA,kBAAA,MAACC,+BAAAA,UAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAACC,+BAAAA,aAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAACC,oCAAAA,cAAD;QACE,kBAAkB,MAAM;QACxB,mBAAmB,QAAQ;AACzB,iBAAQ,IAAI,IAAI;AAChB,eAAM,SAAS,IAAI;;QAErB,CAAA,EACU,CAAA,EACd,iBAAA,GAAA,kBAAA,KAACC,+BAAAA,aAAD,EAAe,CAAA,CACN,EAAA,CAAA;OAEb,CAAA;MACE,CAAA;KAEN,iBAAA,GAAA,kBAAA,KAACJ,+BAAAA,WAAD;MACE,SAAS,KAAK;MACd,MAAK;MACL,SAAS,EAAE,YACT,iBAAA,GAAA,kBAAA,MAACC,+BAAAA,UAAD,EAAA,UAAA;OACE,iBAAA,GAAA,kBAAA,KAACI,+BAAAA,WAAD,EAAA,UAAW,QAAgB,CAAA;OAC3B,iBAAA,GAAA,kBAAA,KAACH,+BAAAA,aAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAACI,cAAAA,OAAD;QAAO,aAAa,EAAE,mCAAmC;QAAE,GAAI;QAAS,CAAA,EAC5D,CAAA;OACd,iBAAA,GAAA,kBAAA,KAACF,+BAAAA,aAAD,EAAe,CAAA;OACN,EAAA,CAAA;MAEb,CAAA;KAEF,iBAAA,GAAA,kBAAA,KAACG,cAAAA,QAAD;MAAQ,MAAK;gBAAS;MAAqB,CAAA;KACtC;;GACF,CAAA,EACE,CAAA,CACN,EAAA,CAAA;EACH,CAAA"}

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

@@ -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.ts.map

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

@@ -0,0 +1,241 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../../../../_virtual/_rolldown/runtime.js");
+let react = require("react");
+let _heroui_react = require("@heroui/react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_i18next = require("react-i18next");
+let _internationalized_date = require("@internationalized/date");
+let luxon = require("luxon");
+let _m5kdev_frontend_modules_table_hooks_useNuqsQueryParams = require("@m5kdev/frontend/modules/table/hooks/useNuqsQueryParams");
+let _m5kdev_web_ui_modules_table_filterTransformers = require("@m5kdev/web-ui/modules/table/filterTransformers");
+//#region src/modules/auth/components/RangeNuqsDatePicker.tsx
+const toCalendarDate = (dt) => new _internationalized_date.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 } = (0, react_i18next.useTranslation)();
+	const { filters, setFilters } = (0, _m5kdev_frontend_modules_table_hooks_useNuqsQueryParams.useNuqsQueryParams)();
+	const [quickRange, setQuickRange] = (0, react.useState)(null);
+	const [hasInitialized, setHasInitialized] = (0, react.useState)(false);
+	const dateRange = (0, react.useMemo)(() => {
+		return (0, _m5kdev_web_ui_modules_table_filterTransformers.dateFilterToRangeValue)(filters, columnId);
+	}, [filters, columnId]);
+	const [localRange, setLocalRange] = (0, react.useState)(dateRange);
+	(0, react.useEffect)(() => {
+		setLocalRange(dateRange);
+	}, [dateRange]);
+	const quickRangeOptions = (0, react.useMemo)(() => {
+		const todayStart = luxon.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,
+		luxon.DateTime.utc().toISODate(),
+		translationNamespace
+	]);
+	(0, react.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: (0, _m5kdev_web_ui_modules_table_filterTransformers.calendarDateToUTC)(startDate),
+				valueTo: (0, _m5kdev_web_ui_modules_table_filterTransformers.calendarDateToEndOfDayUTC)(endDate),
+				endColumnId
+			}]);
+		}
+	}, [
+		dateRange,
+		columnId,
+		endColumnId,
+		quickRangeOptions,
+		hasInitialized,
+		setFilters
+	]);
+	(0, react.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) ?? [];
+			(0, react.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: (0, _m5kdev_web_ui_modules_table_filterTransformers.calendarDateToUTC)(startDate),
+			valueTo: (0, _m5kdev_web_ui_modules_table_filterTransformers.calendarDateToEndOfDayUTC)(endDate),
+			endColumnId
+		}];
+		(0, react.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: `flex gap-4 flex-row ${className ?? ""}`,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex flex-col gap-2",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-sm text-muted-foreground",
+				children: dateRangeLabel ?? t(`${translationNamespace}:reports.dateRange`, { defaultValue: "Date range" })
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_react.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: (0, _internationalized_date.today)((0, _internationalized_date.getLocalTimeZone)()),
+				popoverProps: {
+					portalContainer: document.body,
+					disableAnimation: true
+				}
+			})]
+		}), showQuickRange && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex flex-col gap-2",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-sm text-muted-foreground",
+				children: quickRangeLabel ?? t(`${translationNamespace}:reports.quickRange.label`, { defaultValue: "Quick range" })
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_react.Select, {
+				selectedKeys: quickRange ? [quickRange] : [],
+				onChange: (e) => handleQuickRangeChange(e.target.value ?? null),
+				className: "w-[300px]",
+				popoverProps: { portalContainer: document.body },
+				children: quickRangeOptions.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_react.SelectItem, { children: option.label }, option.key))
+			})]
+		})]
+	});
+};
+//#endregion
+exports.RangeNuqsDatePicker = RangeNuqsDatePicker;
+
+//# sourceMappingURL=RangeNuqsDatePicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RangeNuqsDatePicker.js","names":["CalendarDate","DateTime","DateRangePicker","Select","SelectItem"],"sources":["../../../../../src/modules/auth/components/RangeNuqsDatePicker.tsx"],"sourcesContent":["import {\r\n  DateRangePicker,\r\n  type DateValue,\r\n  type RangeValue,\r\n  Select,\r\n  SelectItem,\r\n} from \"@heroui/react\";\r\nimport { CalendarDate, getLocalTimeZone, today } from \"@internationalized/date\";\r\nimport type { QueryFilters } from \"@m5kdev/commons/modules/schemas/query.schema\";\r\nimport { useNuqsQueryParams } from \"@m5kdev/frontend/modules/table/hooks/useNuqsQueryParams\";\r\nimport {\r\n  calendarDateToEndOfDayUTC,\r\n  calendarDateToUTC,\r\n  dateFilterToRangeValue,\r\n} from \"@m5kdev/web-ui/modules/table/filterTransformers\";\r\nimport { DateTime } from \"luxon\";\r\nimport { startTransition, useEffect, useMemo, useState } from \"react\";\r\nimport { useTranslation } from \"react-i18next\";\r\n\r\ntype QuickRangeKey =\r\n  | \"today\"\r\n  | \"yesterday\"\r\n  | \"last7\"\r\n  | \"last30\"\r\n  | \"thisWeek\"\r\n  | \"lastWeek\"\r\n  | \"thisMonth\"\r\n  | \"lastMonth\"\r\n  | \"thisYear\"\r\n  | \"lastYear\";\r\n\r\nconst toCalendarDate = (dt: DateTime): CalendarDate => new CalendarDate(dt.year, dt.month, dt.day);\r\n\r\nconst isSameCalendarDate = (a: CalendarDate, b: CalendarDate) =>\r\n  a.year === b.year && a.month === b.month && a.day === b.day;\r\n\r\nexport interface RangeNuqsDatePickerProps {\r\n  /**\r\n   * The column ID to use for the date filter (e.g., \"startedAt\")\r\n   */\r\n  columnId?: string;\r\n  /**\r\n   * The end column ID for range filters (e.g., \"endedAt\")\r\n   */\r\n  endColumnId?: string;\r\n  /**\r\n   * Label for the date range picker\r\n   */\r\n  dateRangeLabel?: string;\r\n  /**\r\n   * Label for the quick range selector\r\n   */\r\n  quickRangeLabel?: string;\r\n  /**\r\n   * Translation namespace for i18n\r\n   */\r\n  translationNamespace?: string;\r\n  /**\r\n   * Whether to show quick range selector\r\n   */\r\n  showQuickRange?: boolean;\r\n  /**\r\n   * Custom className for the container\r\n   */\r\n  className?: string;\r\n}\r\n\r\nexport const RangeNuqsDatePicker = ({\r\n  columnId = \"startedAt\",\r\n  endColumnId = \"endedAt\",\r\n  dateRangeLabel,\r\n  quickRangeLabel,\r\n  translationNamespace = \"horecaai-app\",\r\n  showQuickRange = true,\r\n  className,\r\n}: RangeNuqsDatePickerProps) => {\r\n  const { t } = useTranslation();\r\n  const { filters, setFilters } = useNuqsQueryParams();\r\n\r\n  const [quickRange, setQuickRange] = useState<QuickRangeKey | null>(null);\r\n  const [hasInitialized, setHasInitialized] = useState(false);\r\n\r\n  // Extract date range from filters using shared helper\r\n  const dateRange = useMemo(() => {\r\n    return dateFilterToRangeValue(filters, columnId);\r\n  }, [filters, columnId]);\r\n\r\n  const [localRange, setLocalRange] = useState<RangeValue<DateValue> | null | undefined>(dateRange);\r\n\r\n  useEffect(() => {\r\n    setLocalRange(dateRange);\r\n  }, [dateRange]);\r\n\r\n  const todayIso = DateTime.utc().toISODate();\r\n\r\n  const quickRangeOptions = useMemo(() => {\r\n    const now = DateTime.utc();\r\n    const todayStart = now.startOf(\"day\");\r\n    const weekStart = todayStart.startOf(\"week\");\r\n    const monthStart = todayStart.startOf(\"month\");\r\n    const lastWeekStart = weekStart.minus({ weeks: 1 });\r\n    const lastMonthStart = monthStart.minus({ months: 1 });\r\n    const yearStart = todayStart.startOf(\"year\");\r\n    const lastYearStart = yearStart.minus({ years: 1 });\r\n\r\n    const options: { key: QuickRangeKey; label: string; start: DateTime; end: DateTime }[] = [\r\n      {\r\n        key: \"today\",\r\n        label: t(`${translationNamespace}:reports.quickRange.today`, { defaultValue: \"Today\" }),\r\n        start: todayStart,\r\n        end: todayStart,\r\n      },\r\n      {\r\n        key: \"yesterday\",\r\n        label: t(`${translationNamespace}:reports.quickRange.yesterday`, {\r\n          defaultValue: \"Yesterday\",\r\n        }),\r\n        start: todayStart.minus({ days: 1 }),\r\n        end: todayStart.minus({ days: 1 }),\r\n      },\r\n      {\r\n        key: \"last7\",\r\n        label: t(`${translationNamespace}:reports.quickRange.last7`, {\r\n          defaultValue: \"Last 7 days\",\r\n        }),\r\n        start: todayStart.minus({ days: 6 }),\r\n        end: todayStart,\r\n      },\r\n      {\r\n        key: \"last30\",\r\n        label: t(`${translationNamespace}:reports.quickRange.last30`, {\r\n          defaultValue: \"Last 30 days\",\r\n        }),\r\n        start: todayStart.minus({ days: 29 }),\r\n        end: todayStart,\r\n      },\r\n      {\r\n        key: \"thisWeek\",\r\n        label: t(`${translationNamespace}:reports.quickRange.thisWeek`, {\r\n          defaultValue: \"This week\",\r\n        }),\r\n        start: weekStart,\r\n        end: todayStart,\r\n      },\r\n      {\r\n        key: \"lastWeek\",\r\n        label: t(`${translationNamespace}:reports.quickRange.lastWeek`, {\r\n          defaultValue: \"Last week\",\r\n        }),\r\n        start: lastWeekStart,\r\n        end: lastWeekStart.plus({ days: 6 }),\r\n      },\r\n      {\r\n        key: \"thisMonth\",\r\n        label: t(`${translationNamespace}:reports.quickRange.thisMonth`, {\r\n          defaultValue: \"This month\",\r\n        }),\r\n        start: monthStart,\r\n        end: todayStart,\r\n      },\r\n      {\r\n        key: \"lastMonth\",\r\n        label: t(`${translationNamespace}:reports.quickRange.lastMonth`, {\r\n          defaultValue: \"Last month\",\r\n        }),\r\n        start: lastMonthStart,\r\n        end: lastMonthStart.endOf(\"month\"),\r\n      },\r\n      {\r\n        key: \"thisYear\",\r\n        label: t(`${translationNamespace}:reports.quickRange.thisYear`, {\r\n          defaultValue: \"This year\",\r\n        }),\r\n        start: yearStart,\r\n        end: todayStart,\r\n      },\r\n      {\r\n        key: \"lastYear\",\r\n        label: t(`${translationNamespace}:reports.quickRange.lastYear`, {\r\n          defaultValue: \"Last year\",\r\n        }),\r\n        start: lastYearStart,\r\n        end: lastYearStart.endOf(\"year\"),\r\n      },\r\n    ];\r\n\r\n    return options.map((opt) => ({\r\n      key: opt.key,\r\n      label: opt.label,\r\n      range: {\r\n        start: toCalendarDate(opt.start),\r\n        end: toCalendarDate(opt.end),\r\n      },\r\n    }));\r\n  }, [t, todayIso, translationNamespace]);\r\n\r\n  // Set default to \"this month\" on initial load if no date range is set\r\n  useEffect(() => {\r\n    if (hasInitialized || !setFilters) return;\r\n\r\n    // Check if there's already a valid date range from URL\r\n    if (dateRange) {\r\n      setHasInitialized(true);\r\n      return;\r\n    }\r\n\r\n    // No date range set, initialize to \"this month\"\r\n    const thisMonthOption = quickRangeOptions.find((opt) => opt.key === \"thisMonth\");\r\n    if (thisMonthOption) {\r\n      setHasInitialized(true);\r\n      setQuickRange(\"thisMonth\");\r\n\r\n      // Set filters directly for \"this month\" range\r\n      const startDate = thisMonthOption.range.start;\r\n      const endDate = thisMonthOption.range.end;\r\n\r\n      const newFilters: QueryFilters = [\r\n        ...(filters?.filter((f) => f.columnId !== columnId && f.columnId !== endColumnId) ?? []),\r\n        {\r\n          columnId,\r\n          type: \"date\" as const,\r\n          method: \"intersect\" as const,\r\n          value: calendarDateToUTC(startDate),\r\n          valueTo: calendarDateToEndOfDayUTC(endDate),\r\n          endColumnId,\r\n        },\r\n      ];\r\n\r\n      setFilters(newFilters);\r\n    }\r\n  }, [dateRange, columnId, endColumnId, quickRangeOptions, hasInitialized, setFilters]);\r\n\r\n  useEffect(() => {\r\n    // Don't sync quickRange if we're still initializing\r\n    if (!hasInitialized) return;\r\n\r\n    if (!dateRange?.start || !dateRange?.end) {\r\n      setQuickRange(null);\r\n      return;\r\n    }\r\n\r\n    const start = dateRange.start as unknown as CalendarDate;\r\n    const end = dateRange.end as unknown as CalendarDate;\r\n\r\n    const matches = quickRangeOptions.filter(\r\n      (option) =>\r\n        isSameCalendarDate(option.range.start, start) && isSameCalendarDate(option.range.end, end)\r\n    );\r\n\r\n    if (matches.length === 0) {\r\n      setQuickRange(null);\r\n      return;\r\n    }\r\n\r\n    // If the current quick range still matches, keep it\r\n    const currentStillMatches = quickRange ? matches.find((m) => m.key === quickRange) : null;\r\n    if (currentStillMatches) {\r\n      return;\r\n    }\r\n\r\n    // Otherwise pick the highest-priority match to keep intent (week/month over last7 overlap)\r\n    const priority: QuickRangeKey[] = [\r\n      \"today\",\r\n      \"yesterday\",\r\n      \"thisWeek\",\r\n      \"lastWeek\",\r\n      \"thisMonth\",\r\n      \"lastMonth\",\r\n      \"last7\",\r\n      \"last30\",\r\n    ];\r\n    const preferred =\r\n      priority.map((key) => matches.find((m) => m.key === key)).find((m) => Boolean(m)) ??\r\n      matches[0];\r\n\r\n    setQuickRange(preferred?.key ?? null);\r\n  }, [dateRange, quickRangeOptions, quickRange, hasInitialized]);\r\n\r\n  // Handle date range changes\r\n  const handleDateRangeChange = (range: RangeValue<DateValue> | null) => {\r\n    if (!setFilters) return;\r\n\r\n    if (range === null) {\r\n      // Explicit clear — remove date filters\r\n      const newFilters =\r\n        filters?.filter((f) => f.columnId !== columnId && f.columnId !== endColumnId) ?? [];\r\n      startTransition(() => setFilters(newFilters));\r\n      return;\r\n    }\r\n\r\n    // Incomplete range (e.g. only start selected mid-calendar-selection) — keep current filters\r\n    if (!range.start || !range.end) return;\r\n\r\n    // Use intersect to find records where [startedAt, endedAt] overlaps with the selected range\r\n    // This includes ongoing records (endedAt = NULL) and records that overlap the range\r\n    const startDate = range.start as unknown as CalendarDate;\r\n    const endDate = range.end as unknown as CalendarDate;\r\n\r\n    const newFilters: QueryFilters = [\r\n      ...(filters?.filter((f) => f.columnId !== columnId && f.columnId !== endColumnId) ?? []),\r\n      {\r\n        columnId,\r\n        type: \"date\" as const,\r\n        method: \"intersect\" as const,\r\n        value: calendarDateToUTC(startDate),\r\n        valueTo: calendarDateToEndOfDayUTC(endDate),\r\n        endColumnId,\r\n      },\r\n    ];\r\n\r\n    startTransition(() => setFilters(newFilters));\r\n  };\r\n\r\n  const handleQuickRangeChange = (key: QuickRangeKey | null) => {\r\n    if (!key) {\r\n      setQuickRange(null);\r\n      return;\r\n    }\r\n\r\n    const option = quickRangeOptions.find((opt) => opt.key === key);\r\n    if (!option) return;\r\n\r\n    setQuickRange(key);\r\n    handleDateRangeChange({\r\n      start: option.range.start as unknown as DateValue,\r\n      end: option.range.end as unknown as DateValue,\r\n    });\r\n  };\r\n\r\n  return (\r\n    <div className={`flex gap-4 flex-row ${className ?? \"\"}`}>\r\n      <div className=\"flex flex-col gap-2\">\r\n        <span className=\"text-sm text-muted-foreground\">\r\n          {dateRangeLabel ??\r\n            t(`${translationNamespace}:reports.dateRange`, { defaultValue: \"Date range\" })}\r\n        </span>\r\n        <DateRangePicker\r\n          aria-label=\"Date range\"\r\n          value={(localRange as any) ?? undefined}\r\n          onChange={setLocalRange}\r\n          onBlur={() => {\r\n            if (localRange !== undefined) {\r\n              handleDateRangeChange(localRange);\r\n            }\r\n          }}\r\n          className=\"w-[300px]\"\r\n          granularity=\"day\"\r\n          showMonthAndYearPickers\r\n          maxValue={today(getLocalTimeZone()) as unknown as DateValue}\r\n          popoverProps={{\r\n            portalContainer: document.body,\r\n            disableAnimation: true,\r\n          }}\r\n        />\r\n      </div>\r\n      {showQuickRange && (\r\n        <div className=\"flex flex-col gap-2\">\r\n          <span className=\"text-sm text-muted-foreground\">\r\n            {quickRangeLabel ??\r\n              t(`${translationNamespace}:reports.quickRange.label`, {\r\n                defaultValue: \"Quick range\",\r\n              })}\r\n          </span>\r\n          <Select\r\n            selectedKeys={quickRange ? [quickRange] : []}\r\n            onChange={(e) => handleQuickRangeChange((e.target.value as QuickRangeKey) ?? null)}\r\n            className=\"w-[300px]\"\r\n            popoverProps={{\r\n              portalContainer: document.body,\r\n            }}\r\n          >\r\n            {quickRangeOptions.map((option) => (\r\n              <SelectItem key={option.key}>{option.label}</SelectItem>\r\n            ))}\r\n          </Select>\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n"],"mappings":"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"}

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

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

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

@@ -0,0 +1,103 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../../../../_virtual/_rolldown/runtime.js");
+let _heroui_react = require("@heroui/react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_i18next = require("react-i18next");
+let react_router = require("react-router");
+let sonner = require("sonner");
+let react_hook_form = require("react-hook-form");
+let _m5kdev_frontend_modules_auth_auth_lib = require("@m5kdev/frontend/modules/auth/auth.lib");
+//#region src/modules/auth/components/ResetPasswordForm.tsx
+function ResetPasswordForm() {
+	const { t } = (0, react_i18next.useTranslation)();
+	const { register, handleSubmit, setError, formState: { errors } } = (0, react_hook_form.useForm)();
+	const [searchParams] = (0, react_router.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"));
+		_m5kdev_frontend_modules_auth_auth_lib.authClient.resetPassword({
+			newPassword: data.password,
+			token
+		}).then(() => {
+			sonner.toast.success(t("web-ui:auth.resetPassword.success"));
+		}).catch(() => {
+			sonner.toast.error(t("web-ui:auth.resetPassword.error"));
+		});
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col gap-6",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_heroui_react.Card, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_heroui_react.CardHeader, {
+			className: "text-center flex flex-col gap-1",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+				className: "text-xl font-semibold",
+				children: t("web-ui:auth.resetPassword.title")
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "text-sm text-default-600",
+				children: t("web-ui:auth.resetPassword.description")
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_react.CardBody, {
+			className: "gap-6",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
+				onSubmit: handleSubmit(onSubmit),
+				className: "grid gap-6",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "grid gap-2",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_react.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 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-red-500 text-xs",
+							children: errors.password.message
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "grid gap-2",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_react.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 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-red-500 text-xs",
+							children: errors.confirmPassword.message
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_react.Button, {
+						type: "submit",
+						className: "w-full",
+						color: "primary",
+						children: t("web-ui:auth.resetPassword.button")
+					})
+				]
+			})
+		})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "text-center text-xs text-muted-foreground",
+			children: [
+				t("web-ui:auth.forgotPassword.rememberPassword"),
+				" ",
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_router.Link, {
+					to: "/login",
+					className: "underline underline-offset-4 hover:text-primary",
+					children: t("web-ui:auth.login.button")
+				})
+			]
+		})]
+	});
+}
+//#endregion
+exports.ResetPasswordForm = ResetPasswordForm;
+
+//# sourceMappingURL=ResetPasswordForm.js.map