realtimex-crm 0.1.2

package/src/components/admin/locales-menu-button.tsx

@@ -0,0 +1,60 @@
+import { Check } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { cn } from "@/lib/utils";
+import { useLocales, useLocaleState } from "ra-core";
+
+/**
+ * Language switcher button that displays a menu allowing users to select the interface language.
+ *
+ * Automatically renders in the header when multiple locales are configured in the i18nProvider.
+ * User's language selection is persisted using the store.
+ * Returns null if only one language is available.
+ *
+ * @see {@link https://marmelab.com/shadcn-admin-kit/docs/localesmenubutton LocalesMenuButton documentation}
+ * @see {@link https://marmelab.com/ra-core/translationsetup/ i18nProvider setup}
+ */
+export function LocalesMenuButton() {
+  const languages = useLocales();
+  const [locale, setLocale] = useLocaleState();
+
+  const getNameForLocale = (locale: string): string => {
+    const language = languages.find((language) => language.locale === locale);
+    return language ? language.name : "";
+  };
+
+  const changeLocale = (locale: string) => (): void => {
+    setLocale(locale);
+  };
+
+  if (languages.length <= 1) {
+    return null; // No need to render the dropdown if there's only one language
+  }
+  return (
+    <DropdownMenu modal={false}>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon" className="hidden sm:inline-flex">
+          {locale.toUpperCase()}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        {languages.map((language) => (
+          <DropdownMenuItem
+            key={language.locale}
+            onClick={changeLocale(language.locale)}
+          >
+            {getNameForLocale(language.locale)}
+            <Check
+              className={cn("ml-auto", locale !== language.locale && "hidden")}
+            />
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/components/admin/login-page.tsx

@@ -0,0 +1,104 @@
+import { useState } from "react";
+import { Form, required, useLogin, useNotify } from "ra-core";
+import type { SubmitHandler, FieldValues } from "react-hook-form";
+import { Link } from "react-router";
+import { Button } from "@/components/ui/button";
+import { TextInput } from "@/components/admin/text-input";
+import { Notification } from "@/components/admin/notification";
+import { useConfigurationContext } from "@/components/atomic-crm/root/ConfigurationContext.tsx";
+
+/**
+ * Login page displayed when authentication is enabled and the user is not authenticated.
+ *
+ * Automatically shown when an unauthenticated user tries to access a protected route.
+ * Handles login via authProvider.login() and displays error notifications on failure.
+ *
+ * @see {@link https://marmelab.com/shadcn-admin-kit/docs/loginpage LoginPage documentation}
+ * @see {@link https://marmelab.com/shadcn-admin-kit/docs/security Security documentation}
+ */
+export const LoginPage = (props: { redirectTo?: string }) => {
+  const { darkModeLogo, title } = useConfigurationContext();
+  const { redirectTo } = props;
+  const [loading, setLoading] = useState(false);
+  const login = useLogin();
+  const notify = useNotify();
+
+  const handleSubmit: SubmitHandler<FieldValues> = (values) => {
+    setLoading(true);
+    login(values, redirectTo)
+      .then(() => {
+        setLoading(false);
+      })
+      .catch((error) => {
+        setLoading(false);
+        notify(
+          typeof error === "string"
+            ? error
+            : typeof error === "undefined" || !error.message
+              ? "ra.auth.sign_in_error"
+              : error.message,
+          {
+            type: "error",
+            messageArgs: {
+              _:
+                typeof error === "string"
+                  ? error
+                  : error && error.message
+                    ? error.message
+                    : undefined,
+            },
+          },
+        );
+      });
+  };
+
+  return (
+    <div className="min-h-screen flex">
+      <div className="container relative grid flex-col items-center justify-center sm:max-w-none lg:grid-cols-2 lg:px-0">
+        <div className="relative hidden h-full flex-col bg-muted p-10 text-white dark:border-r lg:flex">
+          <div className="absolute inset-0 bg-zinc-900" />
+          <div className="relative z-20 flex items-center text-lg font-medium">
+            <img className="h-6 mr-2" src={darkModeLogo} alt={title} />
+            {title}
+          </div>
+        </div>
+        <div className="lg:p-8">
+          <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
+            <div className="flex flex-col space-y-2 text-center">
+              <h1 className="text-2xl font-semibold tracking-tight">Sign in</h1>
+            </div>
+            <Form className="space-y-8" onSubmit={handleSubmit}>
+              <TextInput
+                label="Email"
+                source="email"
+                type="email"
+                validate={required()}
+              />
+              <TextInput
+                label="Password"
+                source="password"
+                type="password"
+                validate={required()}
+              />
+              <Button
+                type="submit"
+                className="cursor-pointer"
+                disabled={loading}
+              >
+                Sign in
+              </Button>
+            </Form>
+
+            <Link
+              to={"/forgot-password"}
+              className="text-sm text-center hover:underline"
+            >
+              Forgot your password?
+            </Link>
+          </div>
+        </div>
+      </div>
+      <Notification />
+    </div>
+  );
+};

package/src/components/admin/notification.tsx

@@ -0,0 +1,114 @@
+import * as React from "react";
+import { useCallback, useEffect } from "react";
+import type { ToasterProps } from "sonner";
+import { Toaster, toast } from "sonner";
+import { useTheme } from "@/components/admin/theme-provider";
+import {
+  CloseNotificationContext,
+  useNotificationContext,
+  useTakeUndoableMutation,
+  useTranslate,
+} from "ra-core";
+
+/**
+ * Displays notifications triggered with the useNotify hook.
+ *
+ * Supports different notification types (info, success, warning, error) and undoable mutations.
+ * Automatically adapts to the current theme (light/dark).
+ *
+ * @see {@link https://marmelab.com/shadcn-admin-kit/docs/notification Notification documentation}
+ * @see {@link https://marmelab.com/ra-core/usenotify/ useNotify hook}
+ *
+ * @example
+ * // Trigger a notification
+ * import { useNotify } from 'ra-core';
+ *
+ * const NotifyButton = () => {
+ *   const notify = useNotify();
+ *   const handleClick = () => {
+ *     notify('Comment approved', { type: 'success' });
+ *   };
+ *   return <button onClick={handleClick}>Notify</button>;
+ * };
+ */
+export const Notification = (props: ToasterProps) => {
+  const translate = useTranslate();
+  const { notifications, takeNotification } = useNotificationContext();
+  const takeMutation = useTakeUndoableMutation();
+  const { theme } = useTheme();
+
+  useEffect(() => {
+    if (notifications.length) {
+      const notification = takeNotification();
+      if (notification) {
+        const { message, type = "info", notificationOptions } = notification;
+        const { messageArgs, undoable } = notificationOptions || {};
+
+        const beforeunload = (e: BeforeUnloadEvent) => {
+          e.preventDefault();
+          const confirmationMessage = "";
+          e.returnValue = confirmationMessage;
+          return confirmationMessage;
+        };
+
+        if (undoable) {
+          window.addEventListener("beforeunload", beforeunload);
+        }
+
+        const handleExited = () => {
+          if (undoable) {
+            const mutation = takeMutation();
+            if (mutation) {
+              mutation({ isUndo: false });
+            }
+            window.removeEventListener("beforeunload", beforeunload);
+          }
+        };
+
+        const handleUndo = () => {
+          const mutation = takeMutation();
+          if (mutation) {
+            mutation({ isUndo: true });
+          }
+          window.removeEventListener("beforeunload", beforeunload);
+        };
+
+        const finalMessage = message
+          ? typeof message === "string"
+            ? translate(message, messageArgs)
+            : React.isValidElement(message)
+              ? message
+              : undefined
+          : undefined;
+
+        toast[type](finalMessage, {
+          action: undoable
+            ? {
+                label: translate("ra.action.undo"),
+                onClick: handleUndo,
+              }
+            : undefined,
+          onDismiss: handleExited,
+          onAutoClose: handleExited,
+        });
+      }
+    }
+  }, [notifications, takeMutation, takeNotification, translate]);
+
+  const handleRequestClose = useCallback(() => {
+    // Dismiss all toasts
+    toast.dismiss();
+  }, []);
+
+  return (
+    <CloseNotificationContext.Provider value={handleRequestClose}>
+      <Toaster
+        richColors
+        theme={theme}
+        closeButton
+        position="bottom-center"
+        {...props}
+      />
+    </CloseNotificationContext.Provider>
+  );
+};

package/src/components/admin/number-field.tsx

@@ -0,0 +1,84 @@
+import type { HTMLAttributes } from "react";
+import { useFieldValue, useTranslate } from "ra-core";
+import type { FieldProps } from "@/lib/field.type";
+
+/**
+ * Displays a numeric value with locale-specific formatting.
+ *
+ * This field automatically formats numbers according to the user's locale using Intl.NumberFormat.
+ * It supports custom locales and formatting options for currencies, percentages, and more.
+ * To be used with RecordField or DataTable.Col components, or anywhere a RecordContext is available.
+ *
+ * @see {@link https://marmelab.com/shadcn-admin-kit/docs/numberfield/ NumberField documentation}
+ *
+ * @example
+ * import { Show, RecordField, NumberField } from '@/components/admin';
+ *
+ * const ProductShow = () => (
+ *   <Show>
+ *     <div className="flex flex-col gap-4">
+ *       <RecordField source="reference" />
+ *       <RecordField source="price">
+ *         <NumberField source="price" options={{ style: 'currency', currency: 'USD' }} />
+ *       </RecordField>
+ *     </div>
+ *   </Show>
+ * );
+ */
+export const NumberField = <
+  RecordType extends Record<string, any> = Record<string, any>,
+>({
+  defaultValue,
+  source,
+  record,
+  empty,
+  transform = defaultTransform,
+  locales,
+  options,
+  ...rest
+}: NumberFieldProps<RecordType>) => {
+  let value = useFieldValue({ defaultValue, source, record });
+  const translate = useTranslate();
+
+  if (value == null) {
+    if (!empty) {
+      return null;
+    }
+
+    return (
+      <span {...rest}>
+        {typeof empty === "string" ? translate(empty, { _: empty }) : empty}
+      </span>
+    );
+  }
+
+  if (transform) {
+    value = transform(value);
+  }
+
+  return (
+    <span {...rest}>
+      {hasNumberFormat && typeof value === "number"
+        ? value.toLocaleString(locales, options)
+        : value}
+    </span>
+  );
+};
+
+export interface NumberFieldProps<
+  RecordType extends Record<string, any> = Record<string, any>,
+> extends FieldProps<RecordType>,
+    HTMLAttributes<HTMLSpanElement> {
+  locales?: string | string[];
+  options?: object;
+  transform?: (value: any) => number;
+}
+
+const defaultTransform = (value: any) =>
+  value && typeof value === "string" && !isNaN(value as any) ? +value : value;
+
+const hasNumberFormat = !!(
+  typeof Intl === "object" &&
+  Intl &&
+  typeof Intl.NumberFormat === "function"
+);

package/src/components/admin/number-input.tsx

@@ -0,0 +1,124 @@
+import * as React from "react";
+import { useEffect, useState } from "react";
+import type { InputProps } from "ra-core";
+import { FieldTitle, useInput, useResourceContext } from "ra-core";
+import { FormControl, FormField, FormLabel } from "@/components/admin/form";
+import { Input } from "@/components/ui/input";
+import { FormError } from "@/components/admin/form";
+import { InputHelperText } from "@/components/admin/input-helper-text";
+
+/**
+ * Input component for numeric values (integers and floats) with parsing and formatting support.
+ *
+ * Use `<NumberInput>` for prices, quantities, counts, or any numeric field. Manages a local string
+ * state internally so users can type incomplete numbers (e.g. '-' or '0.') before the value is parsed.
+ * Supports min/max constraints and step increments.
+ *
+ * @see {@link https://marmelab.com/shadcn-admin-kit/docs/numberinput/ NumberInput documentation}
+ *
+ * @example
+ * import { Edit, SimpleForm, NumberInput, TextInput } from '@/components/admin';
+ *
+ * const ProductEdit = () => (
+ *   <Edit>
+ *     <SimpleForm>
+ *       <TextInput source="name" />
+ *       <NumberInput source="price" step={0.01} min={0} />
+ *       <NumberInput source="quantity" min={0} />
+ *     </SimpleForm>
+ *   </Edit>
+ * );
+ */
+export const NumberInput = (props: NumberInputProps) => {
+  const {
+    label,
+    source,
+    className,
+    resource: resourceProp,
+    validate: _validateProp,
+    format: _formatProp,
+    parse = convertStringToNumber,
+    onFocus,
+    ...rest
+  } = props;
+  const resource = useResourceContext({ resource: resourceProp });
+
+  const { id, field, isRequired } = useInput(props);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.target.value;
+    const numberValue = parse(value);
+
+    setValue(value);
+    field.onChange(numberValue ?? 0);
+  };
+
+  const [value, setValue] = useState<string | undefined>(
+    field.value?.toString() ?? "",
+  );
+
+  const hasFocus = React.useRef(false);
+
+  const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {
+    onFocus?.(event);
+    hasFocus.current = true;
+  };
+
+  const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
+    field.onBlur?.(event);
+    hasFocus.current = false;
+    setValue(field.value?.toString() ?? "");
+  };
+
+  useEffect(() => {
+    if (!hasFocus.current) {
+      setValue(field.value?.toString() ?? "");
+    }
+  }, [field.value]);
+
+  return (
+    <FormField id={id} className={className} name={field.name}>
+      {label !== false && (
+        <FormLabel>
+          <FieldTitle
+            label={label}
+            source={source}
+            resource={resource}
+            isRequired={isRequired}
+          />
+        </FormLabel>
+      )}
+      <FormControl>
+        <Input
+          {...rest}
+          {...field}
+          type="number"
+          value={value}
+          onChange={handleChange}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+        />
+      </FormControl>
+      <InputHelperText helperText={props.helperText} />
+      <FormError />
+    </FormField>
+  );
+};
+
+export interface NumberInputProps
+  extends InputProps,
+    Omit<
+      React.ComponentProps<"input">,
+      "defaultValue" | "onBlur" | "onChange" | "type"
+    > {
+  parse?: (value: string) => number;
+}
+
+const convertStringToNumber = (value?: string | null) => {
+  if (value == null || value === "") {
+    return null;
+  }
+  const float = parseFloat(value);
+
+  return isNaN(float) ? 0 : float;
+};

package/src/components/admin/radio-button-group-input.tsx

@@ -0,0 +1,184 @@
+import * as React from "react";
+import type { ChoicesProps, InputProps } from "ra-core";
+import { FieldTitle, useChoices, useChoicesContext, useInput } from "ra-core";
+import { cn } from "@/lib/utils";
+import {
+  FormField,
+  FormControl,
+  FormLabel,
+  FormError,
+} from "@/components/admin/form";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Skeleton } from "@/components/ui/skeleton";
+import { InputHelperText } from "@/components/admin/input-helper-text";
+
+/**
+ * Single-select input rendered as a list of radio buttons, arranged vertically or horizontally.
+ *
+ * Use `<RadioButtonGroupInput>` when you have a small set of options (2-5) that users should
+ * see all at once, like status, priority, or category fields. For longer lists, prefer
+ * `<SelectInput>`. Set `row` to `true` for horizontal layout.
+ *
+ * @see {@link https://marmelab.com/shadcn-admin-kit/docs/radiobuttongroupinput/ RadioButtonGroupInput documentation}
+ *
+ * @example
+ * import { Edit, SimpleForm, TextInput, RadioButtonGroupInput } from '@/components/admin';
+ *
+ * const PostEdit = () => (
+ *   <Edit>
+ *     <SimpleForm>
+ *       <TextInput source="title" />
+ *       <RadioButtonGroupInput
+ *         source="category"
+ *         choices={[
+ *           { id: 'tech', name: 'Tech' },
+ *           { id: 'lifestyle', name: 'Lifestyle' },
+ *           { id: 'people', name: 'People' },
+ *         ]}
+ *       />
+ *     </SimpleForm>
+ *   </Edit>
+ * );
+ */
+export const RadioButtonGroupInput = (inProps: RadioButtonGroupInputProps) => {
+  const {
+    choices: choicesProp,
+    isFetching: isFetchingProp,
+    isLoading: isLoadingProp,
+    isPending: isPendingProp,
+    resource: resourceProp,
+    source: sourceProp,
+
+    format,
+    onBlur,
+    onChange,
+    parse,
+    validate,
+    disabled,
+    readOnly,
+
+    optionText,
+    optionValue = "id",
+    translateChoice,
+    disableValue = "disabled",
+
+    className,
+    helperText,
+    label,
+    row,
+    ...rest
+  } = inProps;
+
+  const {
+    allChoices,
+    isPending,
+    error: fetchError,
+    resource,
+    source,
+  } = useChoicesContext({
+    choices: choicesProp,
+    isFetching: isFetchingProp,
+    isLoading: isLoadingProp,
+    isPending: isPendingProp,
+    resource: resourceProp,
+    source: sourceProp,
+  });
+
+  if (source === undefined) {
+    throw new Error(
+      `If you're not wrapping the RadioButtonGroupInput inside a ReferenceArrayInput, you must provide the source prop`,
+    );
+  }
+
+  if (!isPending && !fetchError && allChoices === undefined) {
+    throw new Error(
+      `If you're not wrapping the RadioButtonGroupInput inside a ReferenceArrayInput, you must provide the choices prop`,
+    );
+  }
+
+  const { id, field, isRequired } = useInput({
+    format,
+    onBlur,
+    onChange,
+    parse,
+    resource,
+    source,
+    validate,
+    disabled,
+    readOnly,
+    ...rest,
+  });
+
+  const { getChoiceText, getChoiceValue, getDisableValue } = useChoices({
+    optionText,
+    optionValue,
+    translateChoice,
+    disableValue,
+  });
+
+  if (isPending) {
+    return <Skeleton className="w-full h-9" />;
+  }
+
+  return (
+    <FormField id={id} className={className} name={field.name}>
+      {label && (
+        <FormLabel>
+          <FieldTitle
+            label={label}
+            source={source}
+            resource={resource}
+            isRequired={isRequired}
+          />
+        </FormLabel>
+      )}
+
+      <FormControl>
+        <RadioGroup
+          {...rest}
+          value={field.value || ""}
+          onValueChange={field.onChange}
+          className={cn("flex", row ? "flex-row gap-4" : "flex-col gap-2")}
+          disabled={disabled || readOnly}
+        >
+          {allChoices?.map((choice) => {
+            const value = getChoiceValue(choice);
+            const isDisabled = disabled || readOnly || getDisableValue(choice);
+
+            return (
+              <div key={value} className="flex items-center space-x-2">
+                <RadioGroupItem
+                  value={value}
+                  id={`${id}-${value}`}
+                  disabled={isDisabled}
+                />
+                <Label
+                  htmlFor={`${id}-${value}`}
+                  className={cn(
+                    "text-sm font-normal cursor-pointer",
+                    isDisabled && "opacity-50 cursor-not-allowed",
+                  )}
+                >
+                  {getChoiceText(choice)}
+                </Label>
+              </div>
+            );
+          })}
+        </RadioGroup>
+      </FormControl>
+      <InputHelperText helperText={helperText} />
+      <FormError />
+    </FormField>
+  );
+};
+
+export interface RadioButtonGroupInputProps
+  extends Partial<InputProps>,
+    ChoicesProps,
+    Omit<
+      React.ComponentProps<typeof RadioGroup>,
+      "defaultValue" | "onBlur" | "onChange" | "type"
+    > {
+  row?: boolean;
+}