realtimex-crm 0.1.2

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

@@ -0,0 +1,296 @@
+import * as React from "react";
+import { useCallback } from "react";
+import { Check, ChevronsUpDown } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  FormControl,
+  FormError,
+  FormField,
+  FormLabel,
+} from "@/components/admin/form";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import type { ChoicesProps, InputProps } from "ra-core";
+import {
+  useChoices,
+  useChoicesContext,
+  useGetRecordRepresentation,
+  useInput,
+  useTranslate,
+  FieldTitle,
+  useEvent,
+} from "ra-core";
+import { InputHelperText } from "./input-helper-text";
+import {
+  SupportCreateSuggestionOptions,
+  useSupportCreateSuggestion,
+} from "@/hooks/useSupportCreateSuggestion";
+
+/**
+ * Form control that lets users choose a value from a list using a dropdown with autocompletion.
+ *
+ * This input allows editing scalar values with a searchable dropdown interface. It supports creating
+ * new choices on the fly and works seamlessly inside ReferenceInput for editing foreign key relationships.
+ *
+ * @see {@link https://marmelab.com/shadcn-admin-kit/docs/autocompleteinput/ AutocompleteInput documentation}
+ *
+ * @example
+ * import {
+ *   Create,
+ *   SimpleForm,
+ *   AutocompleteInput,
+ *   ReferenceInput,
+ * } from '@/components/admin';
+ *
+ * const PostCreate = () => (
+ *   <Create>
+ *     <SimpleForm>
+ *       <AutocompleteInput
+ *         source="category"
+ *         choices={[
+ *           { id: 'tech', name: 'Tech' },
+ *           { id: 'lifestyle', name: 'Lifestyle' },
+ *           { id: 'people', name: 'People' },
+ *         ]}
+ *       />
+ *       <ReferenceInput label="Author" source="author_id" reference="authors">
+ *         <AutocompleteInput />
+ *       </ReferenceInput>
+ *     </SimpleForm>
+ *   </Create>
+ * );
+ */
+export const AutocompleteInput = (
+  props: Omit<InputProps, "source"> &
+    Omit<SupportCreateSuggestionOptions, "handleChange" | "filter"> &
+    Partial<Pick<InputProps, "source">> &
+    ChoicesProps & {
+      className?: string;
+      disableValue?: string;
+      filterToQuery?: (searchText: string) => any;
+      translateChoice?: boolean;
+      placeholder?: string;
+      inputText?:
+        | React.ReactNode
+        | ((option: any | undefined) => React.ReactNode);
+    },
+) => {
+  const {
+    filterToQuery = DefaultFilterToQuery,
+    inputText,
+    create,
+    createValue,
+    createLabel,
+    createHintValue,
+    createItemLabel,
+    onCreate,
+    optionText,
+  } = props;
+  const {
+    allChoices = [],
+    source,
+    resource,
+    isFromReference,
+    setFilters,
+  } = useChoicesContext(props);
+  const { id, field, isRequired } = useInput({ ...props, source });
+  const translate = useTranslate();
+  const { placeholder = translate("ra.action.search", { _: "Search..." }) } =
+    props;
+
+  const getRecordRepresentation = useGetRecordRepresentation(resource);
+  const { getChoiceText, getChoiceValue } = useChoices({
+    optionText:
+      props.optionText ?? (isFromReference ? getRecordRepresentation : "name"),
+    optionValue: props.optionValue ?? "id",
+    disableValue: props.disableValue,
+    translateChoice: props.translateChoice ?? !isFromReference,
+  });
+
+  const [filterValue, setFilterValue] = React.useState("");
+
+  const [open, setOpen] = React.useState(false);
+  const selectedChoice = allChoices.find(
+    (choice) => getChoiceValue(choice) === field.value,
+  );
+
+  const getInputText = useCallback(
+    (selectedChoice: any) => {
+      if (typeof inputText === "function") {
+        return inputText(selectedChoice);
+      }
+      if (inputText !== undefined) {
+        return inputText;
+      }
+      return getChoiceText(selectedChoice);
+    },
+    [inputText, getChoiceText],
+  );
+
+  const handleOpenChange = useEvent((isOpen: boolean) => {
+    setOpen(isOpen);
+    // Reset the filter when the popover is closed
+    if (!isOpen) {
+      setFilters(filterToQuery(""));
+    }
+  });
+
+  const handleChange = useCallback(
+    (choice: any) => {
+      if (field.value === getChoiceValue(choice) && !isRequired) {
+        field.onChange("");
+        setFilterValue("");
+        if (isFromReference) {
+          setFilters(filterToQuery(""));
+        }
+        setOpen(false);
+        return;
+      }
+      field.onChange(getChoiceValue(choice));
+      setOpen(false);
+    },
+    [
+      field.value,
+      field.onChange,
+      getChoiceValue,
+      isRequired,
+      setFilterValue,
+      isFromReference,
+      setFilters,
+      filterToQuery,
+      setOpen,
+    ],
+  );
+
+  const {
+    getCreateItem,
+    handleChange: handleChangeWithCreateSupport,
+    createElement,
+    getOptionDisabled,
+  } = useSupportCreateSuggestion({
+    create,
+    createLabel,
+    createValue,
+    createHintValue,
+    createItemLabel,
+    onCreate,
+    handleChange,
+    optionText,
+    filter: filterValue,
+  });
+
+  const createItem =
+    (create || onCreate) && (filterValue !== "" || createLabel)
+      ? getCreateItem(filterValue)
+      : null;
+  let finalChoices = allChoices;
+  if (createItem) {
+    finalChoices = [...finalChoices, createItem];
+  }
+
+  return (
+    <>
+      <FormField className={props.className} id={id} name={source}>
+        {props.label !== false && (
+          <FormLabel>
+            <FieldTitle
+              label={props.label}
+              source={props.source ?? source}
+              resource={resource}
+              isRequired={isRequired}
+            />
+          </FormLabel>
+        )}
+        <FormControl>
+          <Popover open={open} onOpenChange={handleOpenChange}>
+            <PopoverTrigger asChild>
+              <Button
+                variant="outline"
+                role="combobox"
+                aria-expanded={open}
+                className="w-full justify-between h-auto py-1.75 font-normal"
+              >
+                {selectedChoice ? (
+                  getInputText(selectedChoice)
+                ) : (
+                  <span className="text-muted-foreground">{placeholder}</span>
+                )}
+                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-full p-0">
+              {/* We handle the filtering ourselves */}
+              <Command shouldFilter={!isFromReference}>
+                <CommandInput
+                  placeholder="Search..."
+                  value={filterValue}
+                  onValueChange={(filter) => {
+                    setFilterValue(filter);
+                    // We don't want the ChoicesContext to filter the choices if the input
+                    // is not from a reference as it would also filter out the selected values
+                    if (isFromReference) {
+                      setFilters(filterToQuery(filter));
+                    }
+                  }}
+                />
+                <CommandList>
+                  <CommandEmpty>No matching item found.</CommandEmpty>
+                  <CommandGroup>
+                    {finalChoices.map((choice) => {
+                      const isCreateItem =
+                        !!createItem && choice?.id === createItem.id;
+                      const disabled = getOptionDisabled(choice);
+
+                      return (
+                        <CommandItem
+                          key={getChoiceValue(choice)}
+                          value={
+                            isCreateItem
+                              ? // if it's the create option, include the filter value so it is shown in the command input
+                                // characters before and after the filter value are required
+                                // to show the option when the filter value starts or ends with a space
+                                `?${filterValue}?`
+                              : getChoiceValue(choice)
+                          }
+                          onSelect={() => handleChangeWithCreateSupport(choice)}
+                          disabled={disabled}
+                        >
+                          <Check
+                            className={cn(
+                              "mr-2 h-4 w-4",
+                              field.value === getChoiceValue(choice)
+                                ? "opacity-100"
+                                : "opacity-0",
+                            )}
+                          />
+                          {getChoiceText(isCreateItem ? createItem : choice)}
+                        </CommandItem>
+                      );
+                    })}
+                  </CommandGroup>
+                </CommandList>
+              </Command>
+            </PopoverContent>
+          </Popover>
+        </FormControl>
+        <InputHelperText helperText={props.helperText} />
+        <FormError />
+      </FormField>
+      {createElement}
+    </>
+  );
+};
+
+const DefaultFilterToQuery = (searchText: string) => ({ q: searchText });

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

@@ -0,0 +1,65 @@
+import * as React from "react";
+import type { RaRecord } from "ra-core";
+import { useFieldValue, useTranslate } from "ra-core";
+import { Badge } from "@/components/ui/badge";
+import type { FieldProps } from "@/lib/field.type";
+
+type BadgeProps = React.ComponentProps<typeof Badge>;
+
+/**
+ * Displays a text value inside a styled badge component.
+ *
+ * This field wraps values in a Badge UI component with customizable variants (default, outline, secondary, destructive).
+ * Use it to highlight status values, tags, or categorical information.
+ * To be used with RecordField or DataTable.Col components, or anywhere a RecordContext is available.
+ *
+ * @see {@link https://marmelab.com/shadcn-admin-kit/docs/badgefield/ BadgeField documentation}
+ * @see {@link https://ui.shadcn.com/docs/components/badge Badge documentation}
+ *
+ * @example
+ * import {
+ *   List,
+ *   DataTable,
+ *   BadgeField,
+ * } from '@/components/admin';
+ *
+ * const OrderList = () => (
+ *   <List>
+ *     <DataTable>
+ *       <DataTable.Col source="id" />
+ *       <DataTable.Col>
+ *         <BadgeField source="status" variant="outline" />
+ *       </DataTable.Col>
+ *     </DataTable>
+ *   </List>
+ * );
+ */
+export const BadgeField = <RecordType extends RaRecord = RaRecord>({
+  defaultValue,
+  source,
+  record,
+  empty,
+  variant = "outline",
+  ...rest
+}: BadgeFieldProps<RecordType>) => {
+  const value = useFieldValue({ defaultValue, source, record });
+  const translate = useTranslate();
+
+  if (value == null) {
+    return empty && typeof empty === "string"
+      ? translate(empty, { _: empty })
+      : empty;
+  }
+
+  return (
+    <Badge variant={variant} {...rest}>
+      {typeof value !== "string" ? value.toString() : value}
+    </Badge>
+  );
+};
+
+export interface BadgeFieldProps<RecordType extends RaRecord = RaRecord>
+  extends FieldProps<RecordType>,
+    BadgeProps {
+  variant?: "default" | "outline" | "secondary" | "destructive";
+}

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

@@ -0,0 +1,116 @@
+import React, { useCallback } from "react";
+import { Switch } from "@/components/ui/switch";
+import { FormError, FormField, FormLabel } from "@/components/admin/form";
+import { useInput, FieldTitle } from "ra-core";
+import { InputHelperText } from "./input-helper-text";
+
+/**
+ * Toggle switch for boolean (true/false) values.
+ *
+ * Use `<BooleanInput>` for binary settings like "is published", "is active", or feature flags.
+ * Leverages shadcn's Switch component for a native-looking toggle. Note: this input doesn't
+ * support `null` values—use `<SelectInput>` for nullable booleans.
+ *
+ * @see {@link https://marmelab.com/shadcn-admin-kit/docs/booleaninput/ BooleanInput documentation}
+ * @see {@link https://ui.shadcn.com/docs/components/switch Switch documentation}
+ *
+ * @example
+ * import {
+ *   Edit,
+ *   SimpleForm,
+ *   BooleanInput,
+ *   TextInput,
+ * } from '@/components/admin';
+ *
+ * const PostEdit = () => (
+ *   <Edit>
+ *     <SimpleForm>
+ *       <TextInput source="title" />
+ *       <BooleanInput source="is_published" />
+ *       <BooleanInput source="allow_comments" />
+ *     </SimpleForm>
+ *   </Edit>
+ * );
+ */
+export const BooleanInput = (props: BooleanInputProps) => {
+  const {
+    className,
+    defaultValue = false,
+    format,
+    label,
+    helperText,
+    onBlur,
+    onChange,
+    onFocus,
+    readOnly,
+    disabled,
+    parse,
+    resource,
+    source,
+    validate,
+    ...rest
+  } = props;
+  const { id, field, isRequired } = useInput({
+    defaultValue,
+    format,
+    parse,
+    resource,
+    source,
+    onBlur,
+    onChange,
+    type: "checkbox",
+    validate,
+    disabled,
+    readOnly,
+    ...rest,
+  });
+
+  const handleChange = useCallback(
+    (checked: boolean) => {
+      field.onChange(checked);
+      // Ensure field is considered as touched
+      field.onBlur();
+    },
+    [field],
+  );
+
+  return (
+    <FormField className={className} id={id} name={field.name}>
+      <div className="flex items-center space-x-2">
+        <Switch
+          id={id}
+          checked={Boolean(field.value)}
+          onFocus={onFocus}
+          onCheckedChange={handleChange}
+        />
+        <FormLabel htmlFor={id}>
+          <FieldTitle
+            label={label}
+            source={source}
+            resource={resource}
+            isRequired={isRequired}
+          />
+        </FormLabel>
+      </div>
+      <InputHelperText helperText={helperText} />
+      <FormError />
+    </FormField>
+  );
+};
+
+export interface BooleanInputProps {
+  className?: string;
+  defaultValue?: boolean;
+  format?: (value: any) => any;
+  helperText?: React.ReactNode;
+  label?: React.ReactNode;
+  onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
+  onChange?: (value: any) => void;
+  onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
+  readOnly?: boolean;
+  disabled?: boolean;
+  parse?: (value: any) => any;
+  resource?: string;
+  source: string;
+  validate?: any;
+}

package/src/components/admin/breadcrumb.tsx

@@ -0,0 +1,135 @@
+import * as React from "react";
+import { createPortal } from "react-dom";
+import { Separator } from "@/components/ui/separator";
+import {
+  Breadcrumb as BaseBreadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbPage,
+  BreadcrumbList,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import { Button } from "@/components/ui/button";
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer";
+import { useIsMobile } from "@/hooks/use-mobile";
+import { Translate } from "ra-core";
+
+/**
+ * A breadcrumb navigation component with mobile drawer support.
+ *
+ * Renders breadcrumb navigation in the app header via portal. On mobile, shows a drawer with
+ * ellipsis for long breadcrumb trails. Use Breadcrumb.Item and Breadcrumb.PageItem as children.
+ *
+ * CRUD pages already include a Breadcrumb by default; set `disableBreadcrumb` to hide the
+ * breadcrumb and/or provide your own.
+ *
+ * @see {@link https://marmelab.com/shadcn-admin-kit/docs/breadcrumb/ Breadcrumb documentation}
+ * @see {@link https://ui.shadcn.com/docs/components/breadcrumb Breadcrumb UI documentation}
+ *
+ * @example
+ * import { Edit, Breadcrumb, SimpleForm } from "@/components/admin";
+ * import { RecordRepresentation } from 'ra-core';
+ * import { Link } from "react-router";
+ *
+ * const PostEdit = () => (
+ *   <Edit disableBreadcrumb>
+ *     <Breadcrumb>
+ *       <Breadcrumb.Item><Link to="/">Home</Link></Breadcrumb.Item>
+ *       <Breadcrumb.Item><Link to="/posts">Articles</Link></Breadcrumb.Item>
+ *       <Breadcrumb.PageItem>
+ *         Edit Article "<RecordRepresentation />"
+ *       </Breadcrumb.Item>
+ *     </Breadcrumb>
+ *     <SimpleForm>
+ *       ...
+ *     </SimpleForm>
+ *   </Edit>
+ * );
+ */
+export const Breadcrumb = ({ children, ref }: BreadcrumbProps) => {
+  const breadcrumbPortal = document.getElementById("breadcrumb");
+  const isMobile = useIsMobile();
+  const [open, setOpen] = React.useState(false);
+  if (!breadcrumbPortal) return null;
+  return createPortal(
+    <>
+      <Separator
+        decorative
+        orientation="vertical"
+        className="data-[orientation=vertical]:h-4 mr-4"
+      />
+      <BaseBreadcrumb ref={ref}>
+        <BreadcrumbList>
+          {isMobile && React.Children.count(children) > 2 ? (
+            <React.Fragment>
+              <BreadcrumbItem>
+                <Drawer open={open} onOpenChange={setOpen}>
+                  <DrawerTrigger aria-label="Toggle Menu">
+                    <BreadcrumbEllipsis className="h-4 w-4" />
+                  </DrawerTrigger>
+                  <DrawerContent>
+                    <DrawerHeader className="text-left">
+                      <DrawerTitle>
+                        <Translate i18nKey="ra.navigation.breadcrumb_drawer_title">
+                          Navigate to
+                        </Translate>
+                      </DrawerTitle>
+                      <DrawerDescription>
+                        <Translate i18nKey="ra.navigation.breadcrumb_drawer_instructions">
+                          Select a page to navigate to.
+                        </Translate>
+                      </DrawerDescription>
+                    </DrawerHeader>
+                    <ol className="grid gap-1 px-4">
+                      {React.Children.toArray(children)
+                        .slice(0, -1)
+                        .map((item) => item)}
+                    </ol>
+                    <DrawerFooter className="pt-4">
+                      <DrawerClose asChild>
+                        <Button variant="outline">
+                          <Translate i18nKey="ra.action.close">Close</Translate>
+                        </Button>
+                      </DrawerClose>
+                    </DrawerFooter>
+                  </DrawerContent>
+                </Drawer>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator />
+              {React.Children.toArray(children).slice(-1)}
+            </React.Fragment>
+          ) : (
+            React.Children.map(
+              children,
+              (child, index) =>
+                child && (
+                  <React.Fragment key={index}>
+                    {child}
+                    {index < React.Children.count(children) - 1 ? (
+                      <BreadcrumbSeparator />
+                    ) : null}
+                  </React.Fragment>
+                ),
+            )
+          )}
+        </BreadcrumbList>
+      </BaseBreadcrumb>
+    </>,
+    breadcrumbPortal,
+  );
+};
+Breadcrumb.Item = BreadcrumbItem;
+Breadcrumb.PageItem = BreadcrumbPage;
+
+export { BreadcrumbItem, BreadcrumbPage };
+
+export type BreadcrumbProps = React.ComponentProps<"nav">;

package/src/components/admin/bulk-actions-toolbar.tsx

@@ -0,0 +1,83 @@
+import type { ReactNode } from "react";
+import { useListContext, Translate } from "ra-core";
+import { Card } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { BulkDeleteButton } from "@/components/admin/bulk-delete-button";
+import { X } from "lucide-react";
+import { BulkExportButton } from "./bulk-export-button";
+
+/**
+ * Default children for BulkActionsToolbar. Renders BulkExportButton and BulkDeleteButton.
+ *
+ * @internal
+ */
+export function BulkActionsToolbarChildren() {
+  return (
+    <>
+      <BulkExportButton />
+      <BulkDeleteButton />
+    </>
+  );
+}
+
+/**
+ * A sticky toolbar that appears when rows are selected in a DataTable.
+ *
+ * Shows the number of selected rows and provides bulk action buttons. Automatically hidden
+ * when no rows are selected. Positioned at the bottom center of the screen.
+ *
+ * @see {@link https://marmelab.com/shadcn-admin-kit/docs/bulkactionstoolbar/ BulkActionsToolbar documentation}
+ *
+ * @example
+ * import { BulkActionsToolbar, BulkDeleteButton } from '@/components/admin';
+ *
+ * const CustomBulkToolbar = () => (
+ *     <BulkActionsToolbar>
+ *         <BulkDeleteButton />
+ *     </BulkActionsToolbar>
+ * );
+ *
+ * const PostList = () => (
+ *   <List>
+ *     <DataTable bulkActionsToolbar={<CustomBulkToolbar />}>
+ *       ...
+ *     </DataTable>
+ *   </List>
+ * );
+ */
+export const BulkActionsToolbar = ({
+  children = <BulkActionsToolbarChildren />,
+}: {
+  children?: ReactNode;
+}) => {
+  const { selectedIds, onUnselectItems } = useListContext();
+  if (!selectedIds?.length) {
+    return null;
+  }
+  const handleUnselectAll = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onUnselectItems();
+  };
+  return (
+    <Card className="flex flex-col gap-2 md:gap-6 md:flex-row items-stretch sm:items-center p-2 px-4 w-[90%] sm:w-fit mx-auto fixed bottom-2 left-0 right-0 z-10 bg-zinc-100 dark:bg-zinc-900">
+      <div className="flex items-center gap-2">
+        <Button
+          variant="ghost"
+          className="has-[>svg]:px-0"
+          onClick={handleUnselectAll}
+        >
+          <X />
+        </Button>
+        <span className="text-sm text-muted-foreground">
+          <Translate
+            i18nKey="ra.action.bulk_actions"
+            options={{ smart_count: selectedIds.length }}
+          >
+            {selectedIds.length} rows selected
+          </Translate>
+        </span>
+      </div>
+      {children}
+    </Card>
+  );
+};