@m5kdev/web-ui 0.1.4 → 0.2.0

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

@@ -1,365 +0,0 @@
-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

@@ -1,103 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,189 +0,0 @@
-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>
-  );
-}