@m5kdev/web-ui 0.1.0

package/src/modules/auth/components/RangeNuqsDatePicker.tsx

@@ -0,0 +1,365 @@
+import {
+  DateRangePicker,
+  type DateValue,
+  type RangeValue,
+  Select,
+  SelectItem,
+} from "@heroui/react";
+import { CalendarDate, getLocalTimeZone, today } from "@internationalized/date";
+import type { QueryFilters } from "@m5kdev/commons/modules/schemas/query.schema";
+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";
+
+type QuickRangeKey =
+  | "today"
+  | "yesterday"
+  | "last7"
+  | "last30"
+  | "thisWeek"
+  | "lastWeek"
+  | "thisMonth"
+  | "lastMonth"
+  | "thisYear"
+  | "lastYear";
+
+const toCalendarDate = (dt: DateTime): CalendarDate => new CalendarDate(dt.year, dt.month, dt.day);
+
+const isSameCalendarDate = (a: CalendarDate, b: CalendarDate) =>
+  a.year === b.year && a.month === b.month && a.day === b.day;
+
+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 const RangeNuqsDatePicker = ({
+  columnId = "startedAt",
+  endColumnId = "endedAt",
+  dateRangeLabel,
+  quickRangeLabel,
+  translationNamespace = "horecaai-app",
+  showQuickRange = true,
+  className,
+}: RangeNuqsDatePickerProps) => {
+  const { t } = useTranslation();
+  const { filters, setFilters } = useNuqsQueryParams();
+
+  const [quickRange, setQuickRange] = useState<QuickRangeKey | null>(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: QuickRangeKey; label: string; start: DateTime; end: DateTime }[] = [
+      {
+        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: QueryFilters = [
+        ...(filters?.filter((f) => f.columnId !== columnId && f.columnId !== endColumnId) ?? []),
+        {
+          columnId,
+          type: "date" as const,
+          method: "intersect" as const,
+          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 as unknown as CalendarDate;
+    const end = dateRange.end as unknown as CalendarDate;
+
+    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: QuickRangeKey[] = [
+      "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: RangeValue<DateValue> | null) => {
+    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 as unknown as CalendarDate;
+    const endDate = range.end as unknown as CalendarDate;
+
+    const newFilters: QueryFilters = [
+      ...(filters?.filter((f) => f.columnId !== columnId && f.columnId !== endColumnId) ?? []),
+      {
+        columnId,
+        type: "date" as const,
+        method: "intersect" as const,
+        value: calendarDateToUTC(startDate),
+        valueTo: calendarDateToEndOfDayUTC(endDate),
+        endColumnId,
+      },
+    ];
+
+    setFilters(newFilters);
+  };
+
+  const handleQuickRangeChange = (key: QuickRangeKey | null) => {
+    if (!key) {
+      setQuickRange(null);
+      return;
+    }
+
+    const option = quickRangeOptions.find((opt) => opt.key === key);
+    if (!option) return;
+
+    setQuickRange(key);
+    handleDateRangeChange({
+      start: option.range.start as unknown as DateValue,
+      end: option.range.end as unknown as DateValue,
+    });
+  };
+
+  return (
+    <div className={`flex gap-4 flex-row ${className ?? ""}`}>
+      <div className="flex flex-col gap-2">
+        <span className="text-sm text-muted-foreground">
+          {dateRangeLabel ??
+            t(`${translationNamespace}:reports.dateRange`, { defaultValue: "Date range" })}
+        </span>
+        <DateRangePicker
+          value={(dateRange as any) ?? undefined}
+          onChange={handleDateRangeChange}
+          className="w-[300px]"
+          granularity="day"
+          showMonthAndYearPickers
+          maxValue={today(getLocalTimeZone()) as unknown as DateValue}
+          popoverProps={{
+            portalContainer: document.body,
+            disableAnimation: true,
+          }}
+        />
+      </div>
+      {showQuickRange && (
+        <div className="flex flex-col gap-2">
+          <span className="text-sm text-muted-foreground">
+            {quickRangeLabel ??
+              t(`${translationNamespace}:reports.quickRange.label`, {
+                defaultValue: "Quick range",
+              })}
+          </span>
+          <Select
+            selectedKeys={quickRange ? [quickRange] : []}
+            onChange={(e) => handleQuickRangeChange((e.target.value as QuickRangeKey) ?? null)}
+            className="w-[300px]"
+            popoverProps={{
+              portalContainer: document.body,
+            }}
+          >
+            {quickRangeOptions.map((option) => (
+              <SelectItem key={option.key}>{option.label}</SelectItem>
+            ))}
+          </Select>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/modules/auth/components/ResetPasswordForm.tsx

@@ -0,0 +1,103 @@
+import { Button, Card, CardBody, CardHeader, Input } from "@heroui/react";
+import { authClient } from "@m5kdev/frontend/modules/auth/auth.lib";
+import { type SubmitHandler, useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { Link, useSearchParams } from "react-router";
+import { toast } from "sonner";
+
+type Inputs = {
+  password: string;
+  confirmPassword: string;
+};
+
+export function ResetPasswordForm() {
+  const { t } = useTranslation();
+  const {
+    register,
+    handleSubmit,
+    setError,
+    formState: { errors },
+  } = useForm<Inputs>();
+  const [searchParams] = useSearchParams();
+  const token = searchParams.get("token");
+
+  const onSubmit: SubmitHandler<Inputs> = (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 (
+    <div className="flex flex-col gap-6">
+      <Card>
+        <CardHeader className="text-center flex flex-col gap-1">
+          <h2 className="text-xl font-semibold">{t("web-ui:auth.resetPassword.title")}</h2>
+          <p className="text-sm text-default-600">{t("web-ui:auth.resetPassword.description")}</p>
+        </CardHeader>
+        <CardBody className="gap-6">
+          <form onSubmit={handleSubmit(onSubmit)} className="grid gap-6">
+            <div className="grid gap-2">
+              <Input
+                labelPlacement="outside"
+                label={t("web-ui:auth.resetPassword.newPassword")}
+                placeholder={t("web-ui:auth.resetPassword.newPassword")}
+                type="password"
+                variant="bordered"
+                isRequired
+                {...register("password", {
+                  required: t("web-ui:auth.resetPassword.passwordRequired"),
+                })}
+              />
+              {errors.password && (
+                <span className="text-red-500 text-xs">{errors.password.message}</span>
+              )}
+            </div>
+            <div className="grid gap-2">
+              <Input
+                labelPlacement="outside"
+                label={t("web-ui:auth.resetPassword.confirmPassword")}
+                placeholder={t("web-ui:auth.resetPassword.confirmPassword")}
+                type="password"
+                variant="bordered"
+                isRequired
+                {...register("confirmPassword", {
+                  required: t("web-ui:auth.resetPassword.confirmPasswordRequired"),
+                })}
+              />
+              {errors.confirmPassword && (
+                <span className="text-red-500 text-xs">{errors.confirmPassword.message}</span>
+              )}
+            </div>
+            <Button type="submit" className="w-full" color="primary">
+              {t("web-ui:auth.resetPassword.button")}
+            </Button>
+          </form>
+        </CardBody>
+      </Card>
+      <div className="text-center text-xs text-muted-foreground">
+        {t("web-ui:auth.forgotPassword.rememberPassword")}{" "}
+        <Link to="/login" className="underline underline-offset-4 hover:text-primary">
+          {t("web-ui:auth.login.button")}
+        </Link>
+      </div>
+    </div>
+  );
+}

package/src/modules/auth/components/ResetPasswordRoute.tsx

@@ -0,0 +1,27 @@
+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 (
+    <div className="flex flex-col gap-6">
+      <Card>
+        <CardHeader className="text-center flex flex-col gap-1">
+          <h2 className="text-xl font-semibold">{t("web-ui:auth.resetPassword.title")}</h2>
+          <p className="text-sm text-default-600">{t("web-ui:auth.resetPassword.description")}</p>
+        </CardHeader>
+        <CardBody>
+          <ResetPasswordForm />
+        </CardBody>
+      </Card>
+      <div className="text-center text-xs text-muted-foreground">
+        {t("web-ui:auth.forgotPassword.rememberPassword")}{" "}
+        <Link to="/login" className="underline underline-offset-4 hover:text-primary">
+          {t("web-ui:auth.login.button")}
+        </Link>
+      </div>
+    </div>
+  );
+}

package/src/modules/auth/components/SignupFormRoute.tsx

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