realtimex-crm 0.1.2

package/src/components/admin/ready.tsx

@@ -0,0 +1,55 @@
+import {
+  ScanFace,
+  BookOpenText,
+  ChevronsLeftRight,
+  Github,
+} from "lucide-react";
+
+/**
+ * Splash screen displayed when no resources are configured yet.
+ *
+ * Provides helpful links to documentation, demo, and GitHub repository.
+ * Automatically shown when the admin app has no Resource children defined.
+ *
+ * @see {@link https://marmelab.com/shadcn-admin-kit/docs/ready/ Ready documentation}
+ */
+export const Ready = () => (
+  <div className="flex flex-col h-screen">
+    <div
+      className="flex-1 flex flex-col text-white text-center justify-center items-center"
+      style={{
+        background:
+          "linear-gradient(135deg, #00023b 0%, #00023b 50%, #313264 100%)",
+      }}
+    >
+      <ScanFace className="w-32 h-32 mb-4" />
+      <h1 className="text-3xl mb-4">Welcome to shadcn-admin-kit</h1>
+      <div className="text-lg opacity-75">
+        Your application is properly configured.
+        <br />
+        Now you can add a &lt;Resource&gt; as child of
+        &lt;Admin&gt;&lt;/Admin&gt;
+      </div>
+    </div>
+    <div className="flex h-[20vh] bg-zinc-100 text-black items-center justify-evenly">
+      <div className="text-xl">
+        <a href="https://marmelab.com/shadcn-admin-kit/docs">
+          <BookOpenText className="inline mr-4 w-10 h-10" />
+          Documentation
+        </a>
+      </div>
+      <div className="text-xl">
+        <a href="http://marmelab.com/shadcn-admin-kit/demo">
+          <ChevronsLeftRight className="inline mr-4 w-10 h-10" />
+          Demo
+        </a>
+      </div>
+      <div className="text-xl">
+        <a href="https://github.com/marmelab/shadcn-admin-kit">
+          <Github className="inline mr-4 w-10 h-10" />
+          GitHub
+        </a>
+      </div>
+    </div>
+  </div>
+);

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

@@ -0,0 +1,132 @@
+import type { ReactNode, ElementType, HTMLAttributes } from "react";
+import { createElement } from "react";
+import type { ExtractRecordPaths, HintedString } from "ra-core";
+import {
+  FieldTitle,
+  useRecordContext,
+  useResourceContext,
+  useTranslate,
+} from "ra-core";
+import { cn } from "@/lib/utils";
+
+import { TextField } from "@/components/admin/text-field";
+
+/**
+ * Displays a labeled field-value pair with flexible rendering options.
+ *
+ * Supports either vertical or inline layout.
+ * It can render children, use a custom field component, or display a TextField by default.
+ * To be used with RecordContext, e.g. inside Show, or inside ArrayField to display array items.
+ *
+ * @see {@link https://marmelab.com/shadcn-admin-kit/docs/recordfield/ RecordField documentation}
+ *
+ * @example
+ * import { NumberField, RecordField, Show } from '@/components/admin';
+ *
+ * const PostShow = () => (
+ *   <Show>
+ *     <div className="flex flex-col gap-4">
+ *       <RecordField source="reference" label="Ref." />
+ *       <RecordField
+ *         label="dimensions"
+ *         render={record => `${record.width}x${record.height}`}
+ *       />
+ *       <RecordField source="price">
+ *         <NumberField source="price" options={
+ *           style: 'currency',
+ *           currency: 'USD',
+ *         }/>
+ *       <RecordField source="status" variant="inline" />
+ *     </div>
+ *   </Show>
+ * );
+ */
+export const RecordField = <
+  RecordType extends Record<string, any> = Record<string, any>,
+>(
+  props: RecordFieldProps<RecordType>,
+) => {
+  const {
+    children,
+    className,
+    empty,
+    field,
+    label,
+    render,
+    resource: _,
+    source,
+    record: recordProp,
+    variant,
+    ...rest
+  } = props;
+  const resource = useResourceContext(props);
+  const record = useRecordContext<RecordType>({ recordProp });
+  const translate = useTranslate();
+
+  if (!source && !label && !render) return null;
+
+  return (
+    <div
+      className={cn(
+        className,
+        "flex",
+        variant === "inline" ? "flex-row" : "flex-col",
+      )}
+      {...rest}
+    >
+      {label !== "" && label !== false ? (
+        <div
+          className={cn(
+            variant === "inline" ? "block min-w-50" : "text-xs",
+            "text-muted-foreground",
+          )}
+        >
+          <FieldTitle
+            label={label}
+            source={source}
+            resource={resource}
+            isRequired={false}
+          />
+        </div>
+      ) : null}
+      {children ? (
+        <span className="flex-1">{children}</span>
+      ) : render ? (
+        record && (
+          <span className="flex-1">
+            {render(record) ||
+              (typeof empty === "string"
+                ? translate(empty, { _: empty })
+                : empty)}
+          </span>
+        )
+      ) : field ? (
+        createElement(field, {
+          source,
+          empty,
+          className: "flex-1",
+        })
+      ) : source ? (
+        <TextField source={source} empty={empty} className="flex-1" />
+      ) : null}
+    </div>
+  );
+};
+
+// FIXME remove custom type when using TypeScript >= 5.4 as it is now native
+type NoInfer<T> = T extends infer U ? U : never;
+
+export interface RecordFieldProps<
+  RecordType extends Record<string, any> = Record<string, any>,
+> extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+  className?: string;
+  empty?: ReactNode;
+  field?: ElementType;
+  label?: ReactNode;
+  render?: (record: RecordType) => React.ReactNode;
+  resource?: string;
+  source?: NoInfer<HintedString<ExtractRecordPaths<RecordType>>>;
+  record?: RecordType;
+  variant?: "default" | "inline";
+}

package/src/components/admin/reference-array-field.tsx

@@ -0,0 +1,152 @@
+import type { ReactElement, ReactNode } from "react";
+import { memo } from "react";
+import type {
+  FilterPayload,
+  ListControllerResult,
+  RaRecord,
+  SortPayload,
+  ExtractRecordPaths,
+  HintedString,
+} from "ra-core";
+import { ReferenceArrayFieldBase, useListContext } from "ra-core";
+import type { UseQueryOptions } from "@tanstack/react-query";
+import { SingleFieldList } from "@/components/admin/single-field-list";
+
+/**
+ * Displays multiple related records by following an array of foreign keys.
+ *
+ * This field fetches related records using an array of IDs and renders them using a child component (SingleFieldList by default).
+ * It supports custom sorting, filtering, and rendering with DataTable or other list components.
+ * To be used with RecordField or DataTable.Col components, or anywhere a RecordContext is available.
+ *
+ * @see {@link https://marmelab.com/shadcn-admin-kit/docs/referencearrayfield/ ReferenceArrayField documentation}
+ *
+ * @example
+ * import { List, DataTable, ReferenceArrayField } from '@/components/admin';
+ *
+ * export const PostList = () => (
+ *   <List>
+ *     <DataTable>
+ *       <DataTable.Col source="id" />
+ *       <DataTable.Col source="title" />
+ *       <DataTable.Col source="tag_ids" label="Tags">
+ *         <ReferenceArrayField reference="tags" source="tag_ids" />
+ *       </DataTable.Col>
+ *       <DataTable.Col>
+ *         <EditButton />
+ *       </DataTable.Col>
+ *     </DataTable>
+ *   </List>
+ * );
+ */
+export const ReferenceArrayField = <
+  RecordType extends RaRecord = RaRecord,
+  ReferenceRecordType extends RaRecord = RaRecord,
+>(
+  props: ReferenceArrayFieldProps<RecordType, ReferenceRecordType>,
+) => {
+  const {
+    filter,
+    page = 1,
+    perPage,
+    reference,
+    resource,
+    sort,
+    source,
+    queryOptions,
+    render,
+    ...rest
+  } = props;
+  return (
+    <ReferenceArrayFieldBase
+      filter={filter}
+      page={page}
+      perPage={perPage}
+      reference={reference}
+      resource={resource}
+      sort={sort}
+      source={source}
+      queryOptions={queryOptions}
+      render={render}
+    >
+      <PureReferenceArrayFieldView {...rest} />
+    </ReferenceArrayFieldBase>
+  );
+};
+export interface ReferenceArrayFieldProps<
+  RecordType extends RaRecord = RaRecord,
+  ReferenceRecordType extends RaRecord = RaRecord,
+> extends ReferenceArrayFieldViewProps {
+  filter?: FilterPayload;
+  page?: number;
+  pagination?: ReactElement;
+  perPage?: number;
+  reference: string;
+  resource?: string;
+  source: NoInfer<HintedString<ExtractRecordPaths<RecordType>>>;
+  sort?: SortPayload;
+  queryOptions?: Omit<
+    UseQueryOptions<ReferenceRecordType[], Error>,
+    "queryFn" | "queryKey"
+  >;
+  render?: (props: ListControllerResult<ReferenceRecordType>) => ReactElement;
+}
+
+export interface ReferenceArrayFieldViewProps {
+  children?: ReactNode;
+  className?: string;
+  empty?: ReactNode;
+  error?: ReactNode;
+  loading?: ReactNode;
+  pagination?: ReactNode;
+}
+
+export const ReferenceArrayFieldView = (
+  props: ReferenceArrayFieldViewProps,
+) => {
+  const {
+    children = defaultChildren,
+    className,
+    empty,
+    error: errorElement,
+    loading,
+    pagination,
+  } = props;
+  const {
+    isPending,
+    error,
+    total,
+    hasPreviousPage,
+    hasNextPage,
+    data,
+    filterValues,
+  } = useListContext();
+
+  return (
+    <div className={className}>
+      {isPending && loading !== false ? (
+        loading
+      ) : error && errorElement !== false ? (
+        errorElement
+      ) : (total === 0 ||
+          (total == null &&
+            hasPreviousPage === false &&
+            hasNextPage === false &&
+            // @ts-expect-error FIXME total may be undefined when using partial pagination but the ListControllerResult type is wrong about it
+            data.length === 0 &&
+            // the user didn't set any filters
+            !Object.keys(filterValues).length)) &&
+        empty !== false ? (
+        empty
+      ) : (
+        <span>
+          {children}
+          {pagination && total !== undefined ? pagination : null}
+        </span>
+      )}
+    </div>
+  );
+};
+
+const defaultChildren = <SingleFieldList />;
+const PureReferenceArrayFieldView = memo(ReferenceArrayFieldView);

package/src/components/admin/reference-array-input.tsx

@@ -0,0 +1,68 @@
+import * as React from "react";
+import type { ReactElement } from "react";
+import type { InputProps, UseReferenceArrayInputParams } from "ra-core";
+import {
+  useReferenceArrayInputController,
+  ResourceContextProvider,
+  ChoicesContextProvider,
+} from "ra-core";
+import { AutocompleteArrayInput } from "@/components/admin/autocomplete-array-input";
+
+/**
+ * Form input for editing arrays of foreign key relationships with autocompletion.
+ *
+ * This component fetches related records from a reference resource and displays them
+ * in a searchable multi-select interface using AutocompleteArrayInput.
+ * Use it to edit one-to-many or many-to-many relationships, where the current record
+ * has an array of foreign keys to another resource.
+ *
+ * @see {@link https://marmelab.com/shadcn-admin-kit/docs/referencearrayinput/ ReferenceArrayInput documentation}
+ *
+ * @example
+ * import { Edit, SimpleForm, TextInput, ReferenceArrayInput } from '@/components/admin';
+ *
+ * const PostEdit = () => (
+ *   <Edit>
+ *     <SimpleForm>
+ *       <TextInput source="title" />
+ *       <ReferenceArrayInput source="tag_ids" reference="tags" />
+ *     </SimpleForm>
+ *   </Edit>
+ * );
+ */
+export const ReferenceArrayInput = (props: ReferenceArrayInputProps) => {
+  const {
+    children = defaultChildren,
+    reference,
+    sort,
+    filter = defaultFilter,
+  } = props;
+  if (React.Children.count(children) !== 1) {
+    throw new Error(
+      "<ReferenceArrayInput> only accepts a single child (like <AutocompleteArrayInput>)",
+    );
+  }
+
+  const controllerProps = useReferenceArrayInputController({
+    ...props,
+    sort,
+    filter,
+  });
+
+  return (
+    <ResourceContextProvider value={reference}>
+      <ChoicesContextProvider value={controllerProps}>
+        {children}
+      </ChoicesContextProvider>
+    </ResourceContextProvider>
+  );
+};
+
+const defaultChildren = <AutocompleteArrayInput />;
+const defaultFilter = {};
+
+export interface ReferenceArrayInputProps
+  extends InputProps,
+    UseReferenceArrayInputParams {
+  children?: ReactElement;
+}

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

@@ -0,0 +1,153 @@
+import type {
+  ExtractRecordPaths,
+  LinkToType,
+  RaRecord,
+  UseReferenceFieldControllerResult,
+} from "ra-core";
+import {
+  ReferenceFieldBase,
+  useFieldValue,
+  useGetRecordRepresentation,
+  useReferenceFieldContext,
+  useTranslate,
+} from "ra-core";
+import type { MouseEvent, ReactNode } from "react";
+import { Link } from "react-router";
+import type { UseQueryOptions } from "@tanstack/react-query";
+
+/**
+ * Displays a field from a related record by following a foreign key relationship.
+ *
+ * This field fetches the related record using the foreign key value and displays it using the record representation.
+ * It supports linking to the related record's show or edit page.
+ * To be used with RecordField or DataTable.Col components, or anywhere a RecordContext is available.
+ *
+ * @see {@link https://marmelab.com/shadcn-admin-kit/docs/referencefield/ ReferenceField documentation}
+ *
+ * @example
+ * import { List, DataTable, ReferenceField } from '@/components/admin';
+ *
+ * const PostList = () => (
+ *   <List>
+ *     <DataTable>
+ *       <DataTable.Col source="title" />
+ *       <DataTable.Col label="Author">
+ *         <ReferenceField source="author_id" reference="authors" link="show" />
+ *       </DataTable.Col>
+ *     </DataTable>
+ *   </List>
+ * );
+ */
+export const ReferenceField = <
+  RecordType extends RaRecord = RaRecord,
+  ReferenceRecordType extends RaRecord = RaRecord,
+>(
+  props: ReferenceFieldProps<RecordType, ReferenceRecordType>,
+) => {
+  const { loading, error, empty, render, ...rest } = props;
+  const id = useFieldValue<RecordType>(props);
+  const translate = useTranslate();
+
+  return id == null ? (
+    typeof empty === "string" ? (
+      <>{empty && translate(empty, { _: empty })}</>
+    ) : (
+      empty
+    )
+  ) : (
+    <ReferenceFieldBase {...rest}>
+      <ReferenceFieldView<ReferenceRecordType>
+        render={render}
+        loading={loading}
+        error={error}
+        {...rest}
+      />
+    </ReferenceFieldBase>
+  );
+};
+
+export interface ReferenceFieldProps<
+  RecordType extends RaRecord = RaRecord,
+  ReferenceRecordType extends RaRecord = RaRecord,
+> extends Partial<ReferenceFieldViewProps<ReferenceRecordType>> {
+  children?: ReactNode;
+  queryOptions?: UseQueryOptions<RaRecord[], Error> & {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    meta?: any;
+  };
+  record?: RecordType;
+  reference: string;
+  translateChoice?: ((record: ReferenceRecordType) => string) | boolean;
+  link?: LinkToType;
+  source: ExtractRecordPaths<RecordType>;
+}
+
+// useful to prevent click bubbling in a datagrid with rowClick
+const stopPropagation = (e: MouseEvent<HTMLAnchorElement>) =>
+  e.stopPropagation();
+
+export const ReferenceFieldView = <
+  ReferenceRecordType extends RaRecord = RaRecord,
+>(
+  props: ReferenceFieldViewProps<ReferenceRecordType>,
+) => {
+  const {
+    children,
+    className,
+    empty,
+    error: errorElement,
+    render,
+    reference,
+    loading,
+  } = props;
+  const referenceFieldContext = useReferenceFieldContext();
+  const { error, link, isPending, referenceRecord } = referenceFieldContext;
+  const getRecordRepresentation = useGetRecordRepresentation(reference);
+  const translate = useTranslate();
+
+  if (error && errorElement !== false) {
+    return errorElement;
+  }
+  if (isPending && loading !== false) {
+    return loading;
+  }
+  if (!referenceRecord && empty !== false) {
+    return typeof empty === "string" ? (
+      <>{empty && translate(empty, { _: empty })}</>
+    ) : (
+      empty
+    );
+  }
+
+  const child = render
+    ? render(referenceFieldContext)
+    : children || <span>{getRecordRepresentation(referenceRecord)}</span>;
+
+  if (link) {
+    return (
+      <div className={className}>
+        <Link to={link} onClick={stopPropagation}>
+          {child}
+        </Link>
+      </div>
+    );
+  }
+
+  return <>{child}</>;
+};
+
+export interface ReferenceFieldViewProps<
+  ReferenceRecordType extends RaRecord = RaRecord,
+> {
+  children?: ReactNode;
+  className?: string;
+  empty?: ReactNode;
+  loading?: ReactNode;
+  render?: (props: UseReferenceFieldControllerResult) => ReactNode;
+  reference: string;
+  source: string;
+  resource?: string;
+  translateChoice?: ((record: ReferenceRecordType) => string) | boolean;
+  resourceLinkPath?: LinkToType;
+  error?: ReactNode;
+}

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

@@ -0,0 +1,46 @@
+import type { ReferenceInputBaseProps } from "ra-core";
+import { ReferenceInputBase } from "ra-core";
+import { AutocompleteInput } from "./autocomplete-input";
+
+/**
+ * Form input for editing foreign key relationships with autocompletion.
+ *
+ * This component fetches related records from a reference resource and displays them in a searchable dropdown using AutocompleteInput.
+ * Use it to edit many-to-one relationships, where the current record has a foreign key to another resource.
+ *
+ * @see {@link https://marmelab.com/shadcn-admin-kit/docs/referenceinput/ ReferenceInput documentation}
+ *
+ * @example
+ * import { Edit, SimpleForm, TextInput, ReferenceInput } from '@/components/admin';
+ *
+ * const ContactEdit = () => (
+ *   <Edit>
+ *     <SimpleForm>
+ *       <TextInput source="first_name" />
+ *       <TextInput source="last_name" />
+ *       <TextInput source="title" />
+ *       <ReferenceInput source="company_id" reference="companies" />
+ *     </SimpleForm>
+ *   </Edit>
+ * );
+ */
+export const ReferenceInput = (props: ReferenceInputProps) => {
+  const { children = defaultChildren, ...rest } = props;
+
+  if (props.validate && process.env.NODE_ENV !== "production") {
+    throw new Error(
+      "<ReferenceInput> does not accept a validate prop. Set the validate prop on the child instead.",
+    );
+  }
+
+  return <ReferenceInputBase {...rest}>{children}</ReferenceInputBase>;
+};
+
+const defaultChildren = <AutocompleteInput />;
+
+export interface ReferenceInputProps extends ReferenceInputBaseProps {
+  /**
+   * Call validate on the child component instead
+   */
+  validate?: never;
+}

package/src/components/admin/reference-many-count.tsx

@@ -0,0 +1,92 @@
+import type { RaRecord, SortPayload } from "ra-core";
+import {
+  useCreatePath,
+  useRecordContext,
+  useReferenceManyFieldController,
+} from "ra-core";
+import { Link } from "react-router";
+
+/**
+ * Displays the count of related records that reference the current record.
+ *
+ * Calls dataProvider.getList() to compute the the number of records in a related resource that have a foreign key pointing to the current record.
+ * It can optionally link to a filtered list of those records.
+ *
+ * @see {@link https://marmelab.com/shadcn-admin-kit/docs/referencemanycount/ ReferenceManyCount documentation}
+ *
+ * @example
+ * import { List, DataTable, ReferenceManyCount } from '@/components/admin';
+ *
+ * const AuthorList = () => (
+ *   <List>
+ *     <DataTable>
+ *       <DataTable.Col source="name" />
+ *       <DataTable.Col label="Number of Books">
+ *         <ReferenceManyCount reference="books" target="author_id" link />
+ *       </DataTable.Col>
+ *     </DataTable>
+ *   </List>
+ * );
+ */
+export const ReferenceManyCount = <RecordType extends RaRecord = RaRecord>(
+  props: ReferenceManyCountProps<RecordType>,
+) => {
+  const {
+    reference,
+    target,
+    filter,
+    sort,
+    link,
+    resource,
+    source = "id",
+  } = props;
+  const record = useRecordContext<RecordType>(props);
+  const createPath = useCreatePath();
+
+  const { isLoading, error, total } =
+    useReferenceManyFieldController<RecordType>({
+      filter,
+      sort,
+      page: 1,
+      perPage: 1,
+      record,
+      reference,
+      resource,
+      source,
+      target,
+    });
+
+  const body = isLoading ? "" : error ? "error" : total;
+
+  return link && record ? (
+    <Link
+      to={{
+        pathname: createPath({ resource: reference, type: "list" }),
+        search: `filter=${JSON.stringify({
+          ...(filter || {}),
+          [target]: record[source],
+        })}`,
+      }}
+      onClick={(e) => e.stopPropagation()}
+    >
+      {body}
+    </Link>
+  ) : (
+    <span>{body}</span>
+  );
+};
+
+export interface ReferenceManyCountProps<
+  RecordType extends RaRecord = RaRecord,
+> {
+  record?: RecordType;
+  reference: string;
+  resource?: string;
+  target: string;
+  source?: string;
+  sort?: SortPayload;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  filter?: any;
+  link?: boolean;
+  timeout?: number;
+}