realtimex-crm 0.1.2

package/src/components/admin/single-field-list.tsx

@@ -0,0 +1,67 @@
+import {
+  RecordContextProvider,
+  RecordRepresentation,
+  useListContext,
+} from "ra-core";
+import { Badge } from "@/components/ui/badge";
+
+/**
+ * Renders a horizontal list of records from a ListContext, displaying each as a badge.
+ *
+ * This component is used inside ArrayField, ReferenceArrayField, or ReferenceManyField to display
+ * records in a compact inline format. By default, it renders each record with its record representation.
+ *
+ * @see {@link https://marmelab.com/shadcn-admin-kit/docs/singlefieldlist/ SingleFieldList documentation}
+ *
+ * @example
+ * import {
+ *     Show,
+ *     RecordField,
+ *     TextField,
+ *     ReferenceArrayField,
+ *     SingleFieldList,
+ * } from '@/components/admin';
+ *
+ * const PostShow = () => (
+ *     <Show>
+ *       <div className="flex flex-col gap-4">
+ *         <RecordField source="title" />
+ *         <RecordField label="Tags">
+ *           <ReferenceArrayField reference="tags" source="tag_ids">
+ *             <SingleFieldList>
+ *               <TextField source="name" />
+ *             </SingleFieldList>
+ *           </ReferenceArrayField>
+ *         </RecordField>
+ *       </div>
+ *     </Show>
+ * );
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const SingleFieldList = <RecordType = any,>({
+  children,
+  render,
+  className,
+}: {
+  children?: React.ReactNode;
+  render?: (record: RecordType, index: number) => React.ReactNode;
+  className?: string;
+}) => {
+  const { data } = useListContext();
+
+  return (
+    <div className={`flex gap-2 ${className}`}>
+      {data?.map((record, index) => (
+        <RecordContextProvider key={index} value={record}>
+          {render ? render(record, index) : children || <DefaultChildren />}
+        </RecordContextProvider>
+      ))}
+    </div>
+  );
+};
+
+const DefaultChildren = () => (
+  <Badge variant="outline">
+    <RecordRepresentation />
+  </Badge>
+);

package/src/components/admin/sort-button.tsx

@@ -0,0 +1,152 @@
+import * as React from "react";
+import { memo } from "react";
+import { ArrowUpDown, ChevronDown } from "lucide-react";
+import {
+  shallowEqual,
+  useListSortContext,
+  useTranslate,
+  useTranslateLabel,
+} from "ra-core";
+import { useIsMobile } from "@/hooks/use-mobile";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+type ButtonProps = React.ComponentProps<typeof Button>;
+
+/**
+ * A button that opens a dropdown menu to change list sorting.
+ *
+ * Displays current sort field and order, and toggles between ASC and DESC when clicking the same field again.
+ *
+ * @see {@link https://marmelab.com/shadcn-admin-kit/docs/sortbutton/ SortButton documentation}
+ *
+ * @example
+ * import { SortButton } from '@/components/admin';
+ *
+ * const PostList = () => (
+ *   <List render={({ data }) => (
+ *     <div>
+ *       <SortButton fields={["title", "published_at"]} />
+ *       <ul>
+ *         {data.map(post => (
+ *           <li key={post.id}>{post.title}</li>
+ *         ))}
+ *       </ul>
+ *     </div>
+ *   )}>
+ * );
+ */
+const SortButtonComponent = (props: SortButtonProps) => {
+  const {
+    fields,
+    label = "ra.sort.sort_by",
+    icon = defaultIcon,
+    resource: resourceProp,
+    ...rest
+  } = props;
+  const { resource: resourceFromContext, sort, setSort } = useListSortContext();
+  const resource = resourceProp || resourceFromContext;
+  const translate = useTranslate();
+  const translateLabel = useTranslateLabel();
+  const isMobile = useIsMobile();
+  const [open, setOpen] = React.useState(false);
+
+  const handleChangeSort = (field: string) => {
+    setSort({
+      field,
+      order: field === sort.field ? inverseOrder(sort.order) : "ASC",
+    });
+    setOpen(false);
+  };
+
+  const fieldLabel = translateLabel({
+    resource,
+    source: sort.field,
+  });
+  const buttonLabel = translate(label, {
+    field: fieldLabel,
+    field_lower_first:
+      typeof fieldLabel === "string"
+        ? fieldLabel.charAt(0).toLowerCase() + fieldLabel.slice(1)
+        : undefined,
+    order: translate(`ra.sort.${sort.order}`),
+    _: label,
+  });
+
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen}>
+      {isMobile ? (
+        <TooltipProvider>
+          <Tooltip>
+            <DropdownMenuTrigger asChild>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="outline"
+                  size="icon"
+                  aria-label={buttonLabel}
+                  {...rest}
+                >
+                  {icon}
+                </Button>
+              </TooltipTrigger>
+            </DropdownMenuTrigger>
+            <TooltipContent>
+              <p>{buttonLabel}</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      ) : (
+        <DropdownMenuTrigger asChild>
+          <Button variant="outline" size="sm" className="h-9" {...rest}>
+            {icon}
+            <span className="ml-2">{buttonLabel}</span>
+            <ChevronDown className="ml-2 h-4 w-4" />
+          </Button>
+        </DropdownMenuTrigger>
+      )}
+      <DropdownMenuContent align="start">
+        {fields.map((field) => (
+          <DropdownMenuItem key={field} onClick={() => handleChangeSort(field)}>
+            {translateLabel({
+              resource,
+              source: field,
+            })}{" "}
+            {translate(
+              `ra.sort.${
+                sort.field === field ? inverseOrder(sort.order) : "ASC"
+              }`,
+            )}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+const defaultIcon = <ArrowUpDown className="h-4 w-4" />;
+
+const inverseOrder = (sort: string) => (sort === "ASC" ? "DESC" : "ASC");
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const arePropsEqual = (prevProps: any, nextProps: any) =>
+  shallowEqual(prevProps.fields, nextProps.fields);
+
+export interface SortButtonProps extends ButtonProps {
+  fields: string[];
+  icon?: React.ReactNode;
+  label?: string;
+  resource?: string;
+}
+
+export const SortButton = memo(SortButtonComponent, arePropsEqual);

package/src/components/admin/spinner.tsx

@@ -0,0 +1,46 @@
+import { cn } from "@/lib/utils";
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
+import { Loader2 } from "lucide-react";
+
+const spinnerVariants = cva("flex-col items-center justify-center", {
+  variants: {
+    show: {
+      true: "flex",
+      false: "hidden",
+    },
+  },
+  defaultVariants: {
+    show: true,
+  },
+});
+
+const loaderVariants = cva("animate-spin text-primary", {
+  variants: {
+    size: {
+      small: "size-6",
+      medium: "size-8",
+      large: "size-12",
+    },
+  },
+  defaultVariants: {
+    size: "medium",
+  },
+});
+
+interface SpinnerContentProps
+  extends VariantProps<typeof spinnerVariants>,
+    VariantProps<typeof loaderVariants> {
+  className?: string;
+}
+
+/**
+ * Animated spinner component for loading states.
+ */
+export function Spinner({ size, show, className }: SpinnerContentProps) {
+  return (
+    <span className={spinnerVariants({ show })}>
+      <Loader2 className={cn(loaderVariants({ size }), className)} />
+    </span>
+  );
+}

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

@@ -0,0 +1,60 @@
+import type { HTMLAttributes } from "react";
+import { useFieldValue, useTranslate } from "ra-core";
+import type { FieldProps } from "@/lib/field.type";
+
+/**
+ * Displays a text value from a record field inside a span element.
+ *
+ * This is the default field component used in DataTable columns and RecordField components.
+ *
+ * @see {@link https://marmelab.com/shadcn-admin-kit/docs/textfield/ TextField documentation}
+ *
+ * @example
+ * import { List, DataTable, TextField } from '@/components/admin';
+ *
+ * export const UserList = () => (
+ *   <List>
+ *     <DataTable>
+ *       <DataTable.Col source="id" />
+ *       <DataTable.Col>
+ *         <TextField source="name" empty="resources.users.fields.name.empty" />
+ *       </DataTable.Col>
+ *     </DataTable>
+ *   </List>
+ * );
+ */
+export const TextField = <
+  RecordType extends Record<string, any> = Record<string, any>,
+>({
+  defaultValue,
+  source,
+  record,
+  empty,
+  ...rest
+}: TextFieldProps<RecordType>) => {
+  const 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>
+    );
+  }
+
+  return (
+    <span {...rest}>
+      {typeof value !== "string" ? value.toString() : value}
+    </span>
+  );
+};
+
+export interface TextFieldProps<
+  RecordType extends Record<string, any> = Record<string, any>,
+> extends FieldProps<RecordType>,
+    HTMLAttributes<HTMLSpanElement> {}

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

@@ -0,0 +1,77 @@
+import type { InputProps } from "ra-core";
+import { useInput, useResourceContext, FieldTitle } from "ra-core";
+import {
+  FormControl,
+  FormError,
+  FormField,
+  FormLabel,
+} from "@/components/admin/form";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { InputHelperText } from "@/components/admin/input-helper-text";
+
+export type TextInputProps = InputProps & {
+  multiline?: boolean;
+  inputClassName?: string;
+} & React.ComponentProps<"textarea"> &
+  React.ComponentProps<"input">;
+
+/**
+ * Single-line or multiline text input for string values.
+ *
+ * Use `<TextInput>` for short text fields like titles or names. Set `multiline` to `true`
+ * for longer content like descriptions or comments. Wraps shadcn's `<Input>` or `<Textarea>`
+ * component depending on the `multiline` prop.
+ *
+ * @see {@link https://marmelab.com/shadcn-admin-kit/docs/textinput/ TextInput documentation}
+ *
+ * @example
+ * import { Edit, SimpleForm, TextInput } from '@/components/admin';
+ *
+ * const PostEdit = () => (
+ *   <Edit>
+ *     <SimpleForm>
+ *       <TextInput source="title" />
+ *       <TextInput source="description" multiline rows={4} />
+ *     </SimpleForm>
+ *   </Edit>
+ * );
+ */
+export const TextInput = (props: TextInputProps) => {
+  const resource = useResourceContext(props);
+  const {
+    label,
+    source,
+    multiline,
+    className,
+    inputClassName,
+    validate: _validateProp,
+    format: _formatProp,
+    ...rest
+  } = props;
+  const { id, field, isRequired } = useInput(props);
+
+  return (
+    <FormField id={id} className={className} name={field.name}>
+      {label !== false && (
+        <FormLabel>
+          <FieldTitle
+            label={label}
+            source={source}
+            resource={resource}
+            isRequired={isRequired}
+          />
+        </FormLabel>
+      )}
+      <FormControl>
+        {multiline ? (
+          <Textarea {...rest} {...field} className={inputClassName} />
+        ) : (
+          <Input {...rest} {...field} className={inputClassName} />
+        )}
+      </FormControl>
+      <InputHelperText helperText={props.helperText} />
+      <FormError />
+    </FormField>
+  );
+};

package/src/components/admin/theme-mode-toggle.tsx

@@ -0,0 +1,48 @@
+import { Check, Moon, Sun } 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 { useTheme } from "@/components/admin/theme-provider";
+
+/**
+ * Toggle button that lets users switch between light, dark, and system UI themes.
+ *
+ * User's selection is persisted using the store.
+ * Automatically included in the default Layout component header.
+ *
+ * @see {@link https://marmelab.com/shadcn-admin-kit/docs/thememodetoggle ThemeModeToggle documentation}
+ */
+export function ThemeModeToggle() {
+  const { theme, setTheme } = useTheme();
+
+  return (
+    <DropdownMenu modal={false}>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon" className="hidden sm:inline-flex">
+          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          Light
+          <Check className={cn("ml-auto", theme !== "light" && "hidden")} />
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          Dark
+          <Check className={cn("ml-auto", theme !== "dark" && "hidden")} />
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          System
+          <Check className={cn("ml-auto", theme !== "system" && "hidden")} />
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/components/admin/theme-provider.tsx

@@ -0,0 +1,74 @@
+import { createContext, useContext, useEffect } from "react";
+import { useStore } from "ra-core";
+
+type Theme = "dark" | "light" | "system";
+
+type ThemeProviderProps = {
+  children: React.ReactNode;
+  defaultTheme?: Theme;
+  storageKey?: string;
+};
+
+type ThemeProviderState = {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+};
+
+const initialState: ThemeProviderState = {
+  theme: "system",
+  setTheme: () => null,
+};
+
+const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
+
+/**
+ * Theme provider that enables light, dark, and system theme modes.
+ *
+ * @internal
+ */
+export function ThemeProvider({
+  children,
+  defaultTheme = "system",
+  storageKey = "theme",
+  ...props
+}: ThemeProviderProps) {
+  const [theme, setTheme] = useStore<Theme>(storageKey, defaultTheme);
+
+  useEffect(() => {
+    const root = window.document.documentElement;
+
+    root.classList.remove("light", "dark");
+
+    if (theme === "system") {
+      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
+        .matches
+        ? "dark"
+        : "light";
+
+      root.classList.add(systemTheme);
+      return;
+    }
+
+    root.classList.add(theme);
+  }, [theme]);
+
+  const value = {
+    theme,
+    setTheme,
+  };
+
+  return (
+    <ThemeProviderContext.Provider {...props} value={value}>
+      {children}
+    </ThemeProviderContext.Provider>
+  );
+}
+
+export const useTheme = () => {
+  const context = useContext(ThemeProviderContext);
+
+  if (context === undefined)
+    throw new Error("useTheme must be used within a ThemeProvider");
+
+  return context;
+};

package/src/components/admin/toggle-filter-button.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { useListContext, useTranslate } from "ra-core";
+import matches from "lodash/matches";
+import pickBy from "lodash/pickBy";
+import { CircleX } from "lucide-react";
+
+/**
+ * A button that toggles a specific filter value on/off.
+ *
+ * Renders a button that applies or removes a filter when clicked. Shows a close icon when the
+ * filter is active. Useful for quick filter presets like status or category.
+ *
+ * @see {@link https://marmelab.com/shadcn-admin-kit/docs/togglefilterbutton/ ToggleFilterButton documentation}
+ *
+ * @example
+ * import { ToggleFilterButton } from '@/components/admin';
+ *
+ * const PostFilters = () => (
+ *   <div className="flex flex-row gap-2">
+ *     <ToggleFilterButton label="Published" value={{ status: 'published' }} />
+ *     <ToggleFilterButton label="Draft" value={{ status: 'draft' }} />
+ *   </div>
+ * );
+ */
+export const ToggleFilterButton = ({
+  label,
+  size = "sm",
+  value,
+  className,
+}: {
+  label: React.ReactElement | string;
+  value: any;
+  className?: string;
+  size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+}) => {
+  const { filterValues, setFilters } = useListContext();
+  const translate = useTranslate();
+  const isSelected = getIsSelected(value, filterValues);
+  const handleClick = () => setFilters(toggleFilter(value, filterValues));
+  return (
+    <Button
+      variant={isSelected ? "secondary" : "ghost"}
+      onClick={handleClick}
+      className={cn(
+        "cursor-pointer",
+        "flex flex-row items-center justify-between gap-2 px-2.5 w-full",
+        className,
+      )}
+      size={size}
+    >
+      {typeof label === "string" ? translate(label, { _: label }) : label}
+      {isSelected && <CircleX className="opacity-50" />}
+    </Button>
+  );
+};
+
+const toggleFilter = (value: any, filters: any) => {
+  const isSelected = matches(
+    pickBy(value, (val) => typeof val !== "undefined"),
+  )(filters);
+
+  if (isSelected) {
+    const keysToRemove = Object.keys(value);
+    return Object.keys(filters).reduce(
+      (acc, key) =>
+        keysToRemove.includes(key) ? acc : { ...acc, [key]: filters[key] },
+      {},
+    );
+  }
+
+  return { ...filters, ...value };
+};
+
+const getIsSelected = (value: any, filters: any) =>
+  matches(pickBy(value, (val) => typeof val !== "undefined"))(filters);

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

@@ -0,0 +1,83 @@
+import { useFieldValue, useTranslate } from "ra-core";
+import type { AnchorHTMLAttributes } from "react";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+import { genericMemo } from "@/lib/genericMemo";
+import { FieldProps } from "@/lib/field.type";
+
+/**
+ * Displays a URL as a clickable hyperlink.
+ *
+ * Click events are prevented from bubbling up, making it safe to use in DataTable rows with rowClick.
+ *
+ * @see {@link https://marmelab.com/shadcn-admin-kit/docs/urlfield/ UrlField documentation}
+ *
+ * @example
+ * import { List, DataTable, UrlField } from '@/components/admin';
+ *
+ * const WebsiteList = () => (
+ *   <List>
+ *     <DataTable>
+ *       <DataTable.Col source="id" />
+ *       <DataTable.Col source="website">
+ *         <UrlField source="website" empty="No website available" />
+ *       </DataTable.Col>
+ *     </DataTable>
+ *   </List>
+ * );
+ */
+const UrlFieldImpl = <
+  //eslint-disable-next-line @typescript-eslint/no-explicit-any
+  RecordType extends Record<string, any> = Record<string, any>,
+>(
+  inProps: UrlFieldProps<RecordType>,
+) => {
+  const {
+    empty,
+    className,
+    defaultValue,
+    source,
+    record,
+    resource: _,
+    ...rest
+  } = inProps;
+  const value = useFieldValue({ defaultValue, source, record });
+  const translate = useTranslate();
+
+  if (value == null) {
+    if (!empty) {
+      return null;
+    }
+
+    return (
+      <span className={className} {...rest}>
+        {typeof empty === "string" ? translate(empty, { _: empty }) : empty}
+      </span>
+    );
+  }
+
+  return (
+    <a
+      className={cn("underline hover:no-underline", className)}
+      href={value}
+      onClick={stopPropagation}
+      {...rest}
+    >
+      {value}
+    </a>
+  );
+};
+UrlFieldImpl.displayName = "UrlFieldImpl";
+
+export const UrlField = genericMemo(UrlFieldImpl);
+
+export interface UrlFieldProps<
+  //eslint-disable-next-line @typescript-eslint/no-explicit-any
+  RecordType extends Record<string, any> = Record<string, any>,
+> extends FieldProps<RecordType>,
+    AnchorHTMLAttributes<HTMLAnchorElement> {}
+
+// useful to prevent click bubbling in a DataTable with rowClick
+const stopPropagation = (e: React.MouseEvent<HTMLAnchorElement>) =>
+  e.stopPropagation();