realtimex-crm 0.1.2

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

@@ -0,0 +1,132 @@
+import type { ReactNode } from "react";
+import type {
+  RaRecord,
+  UseReferenceManyFieldControllerParams,
+  ListControllerResult,
+} from "ra-core";
+import { ReferenceManyFieldBase, useListContext } from "ra-core";
+
+/**
+ * Displays multiple related records that reference the current record via a foreign key.
+ *
+ * This field fetches records from a related resource where the foreign key points to the current record.
+ * It provides a ListContext to its children, enabling list rendering with DataTable or custom components.
+ *
+ * @see {@link https://marmelab.com/shadcn-admin-kit/docs/referencemanyfield/ ReferenceManyField documentation}
+ *
+ * @example
+ * import { Show, ReferenceManyField, DataTable, DateField, RecordField } from '@/components/admin';
+ *
+ * const AuthorShow = () => (
+ *   <Show>
+ *     <div className="flex flex-col gap-4">
+ *       <RecordField source="first_name" />
+ *       <RecordField source="last_name" />
+ *       <RecordField label="Books">
+ *         <ReferenceManyField reference="books" target="author_id" label="Books">
+ *           <DataTable>
+ *             <DataTable.Col source="title" />
+ *             <DataTable.Col source="published_at" field={DateField} />
+ *           </DataTable>
+ *         </ReferenceManyField>
+ *       </RecordField>
+ *     </div>
+ *   </Show>
+ * );
+ */
+export const ReferenceManyField = <
+  RecordType extends RaRecord = RaRecord,
+  ReferenceRecordType extends RaRecord = RaRecord,
+>(
+  props: ReferenceManyFieldProps<RecordType, ReferenceRecordType>,
+) => {
+  const { children, empty, error, loading, pagination, render, ...rest } =
+    props;
+
+  return (
+    <ReferenceManyFieldBase {...rest}>
+      <ReferenceManyFieldView<ReferenceRecordType>
+        empty={empty}
+        error={error}
+        loading={loading}
+        pagination={pagination}
+        render={render}
+      >
+        {children}
+      </ReferenceManyFieldView>
+    </ReferenceManyFieldBase>
+  );
+};
+
+export interface ReferenceManyFieldProps<
+  RecordType extends RaRecord = RaRecord,
+  ReferenceRecordType extends RaRecord = RaRecord,
+> extends UseReferenceManyFieldControllerParams<
+      RecordType,
+      ReferenceRecordType
+    >,
+    ReferenceManyFieldViewProps<ReferenceRecordType> {}
+
+const ReferenceManyFieldView = <
+  ReferenceRecordType extends RaRecord = RaRecord,
+>(
+  props: ReferenceManyFieldViewProps<ReferenceRecordType>,
+) => {
+  const {
+    children,
+    empty,
+    error: errorElement,
+    loading,
+    pagination,
+    render,
+  } = props;
+  const listContext = useListContext();
+  const {
+    isPending,
+    error,
+    total,
+    hasPreviousPage,
+    hasNextPage,
+    data,
+    filterValues,
+  } = listContext;
+
+  if (isPending && loading !== false) {
+    return loading;
+  }
+  if (error && errorElement !== false) {
+    return errorElement;
+  }
+  if (
+    (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
+  ) {
+    return empty;
+  }
+
+  return (
+    <>
+      {render && render(listContext)}
+      {children}
+      {pagination}
+    </>
+  );
+};
+
+export interface ReferenceManyFieldViewProps<
+  ReferenceRecordType extends RaRecord = RaRecord,
+> {
+  children?: ReactNode;
+  empty?: ReactNode;
+  error?: ReactNode;
+  loading?: ReactNode;
+  pagination?: ReactNode;
+  render?: (props: ListControllerResult<ReferenceRecordType>) => ReactNode;
+}

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

@@ -0,0 +1,31 @@
+import { useRefresh, useLoading } from "ra-core";
+import { Button } from "@/components/ui/button";
+import { LoaderCircle, RotateCw } from "lucide-react";
+
+/**
+ * A button that refreshes the current view's data.
+ *
+ * When clicked, reloads data from the server. Shows a spinner animation during loading.
+ * Included in the default top app bar. Hidden on small screens.
+ *
+ * @see {@link https://marmelab.com/shadcn-admin-kit/docs/refreshbutton/ RefreshButton documentation}
+ */
+export const RefreshButton = () => {
+  const refresh = useRefresh();
+  const loading = useLoading();
+
+  const handleRefresh = () => {
+    refresh();
+  };
+
+  return (
+    <Button
+      onClick={handleRefresh}
+      variant="ghost"
+      size="icon"
+      className="hidden sm:inline-flex"
+    >
+      {loading ? <LoaderCircle className="animate-spin" /> : <RotateCw />}
+    </Button>
+  );
+};

package/src/components/admin/saved-queries.tsx

@@ -0,0 +1,174 @@
+import { useListContext, useTranslate } from "ra-core";
+import type { ChangeEvent, FormEvent, ReactElement } from "react";
+import { useState } from "react";
+import isEqual from "lodash/isEqual";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  extractValidSavedQueries,
+  useSavedQueries,
+} from "@/hooks/saved-queries";
+
+/**
+ * Dialog for saving the current list view query (filters, sort, pagination) as a named saved query.
+ *
+ * Used by FilterButton in the List view.
+ *
+ * @internal
+ */
+export const AddSavedQueryDialog = ({
+  open,
+  onClose,
+}: AddSavedQueryDialogProps): ReactElement => {
+  const translate = useTranslate();
+  const { resource, filterValues, displayedFilters, sort, perPage } =
+    useListContext();
+
+  const [savedQueries, setSavedQueries] = useSavedQueries(resource);
+
+  // input state
+  const [queryName, setQueryName] = useState("");
+  const handleQueryNameChange = (
+    event: ChangeEvent<HTMLInputElement>,
+  ): void => {
+    setQueryName(event.target.value);
+  };
+
+  const handleFormSubmit = (e: FormEvent<HTMLFormElement>): void => {
+    e.preventDefault();
+    addQuery();
+  };
+
+  const addQuery = (): void => {
+    const newSavedQuery = {
+      label: queryName,
+      value: {
+        filter: filterValues,
+        sort,
+        perPage,
+        displayedFilters,
+      },
+    };
+    const newSavedQueries = extractValidSavedQueries(savedQueries);
+    setSavedQueries(newSavedQueries.concat(newSavedQuery));
+    setQueryName("");
+    onClose();
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>
+            {translate("ra.saved_queries.new_dialog_title", {
+              _: "Save current query as",
+            })}
+          </DialogTitle>
+        </DialogHeader>
+        <form onSubmit={handleFormSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="name">
+              {translate("ra.saved_queries.query_name", {
+                _: "Query name",
+              })}
+            </Label>
+            <Input
+              id="name"
+              value={queryName}
+              onChange={handleQueryNameChange}
+              autoFocus
+            />
+          </div>
+        </form>
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose}>
+            {translate("ra.action.cancel")}
+          </Button>
+          <Button onClick={addQuery}>{translate("ra.action.save")}</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export interface AddSavedQueryDialogProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+/**
+ * Dialog for removing a saved query from the user's list.
+ *
+ * @internal
+ */
+export const RemoveSavedQueryDialog = ({
+  open,
+  onClose,
+}: RemoveSavedQueryDialogProps): ReactElement => {
+  const translate = useTranslate();
+  const { resource, filterValues, sort, perPage, displayedFilters } =
+    useListContext();
+
+  const [savedQueries, setSavedQueries] = useSavedQueries(resource);
+
+  const removeQuery = (): void => {
+    const savedQueryToRemove = {
+      filter: filterValues,
+      sort,
+      perPage,
+      displayedFilters,
+    };
+
+    const newSavedQueries = extractValidSavedQueries(savedQueries);
+    const index = newSavedQueries.findIndex((savedFilter) =>
+      isEqual(savedFilter.value, savedQueryToRemove),
+    );
+    setSavedQueries([
+      ...newSavedQueries.slice(0, index),
+      ...newSavedQueries.slice(index + 1),
+    ]);
+    onClose();
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            {translate("ra.saved_queries.remove_dialog_title", {
+              _: "Remove saved query?",
+            })}
+          </DialogTitle>
+          <DialogDescription>
+            {translate("ra.saved_queries.remove_message", {
+              _: "Are you sure you want to remove that item from your list of saved queries?",
+            })}
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose}>
+            {translate("ra.action.cancel")}
+          </Button>
+          <Button onClick={removeQuery} autoFocus>
+            {translate("ra.action.confirm")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export interface RemoveSavedQueryDialogProps {
+  open: boolean;
+  onClose: () => void;
+}

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

@@ -0,0 +1,57 @@
+import { useTranslate } from "ra-core";
+import { Search } from "lucide-react";
+import type { TextInputProps } from "@/components/admin/text-input";
+import { TextInput } from "@/components/admin/text-input";
+import { cn } from "@/lib/utils";
+
+/**
+ * Text input with a search icon, designed for filter forms without a label.
+ *
+ * It automatically uses the 'q' source for full-text search by default.
+ *
+ * @see {@link https://marmelab.com/shadcn-admin-kit/docs/searchinput/ SearchInput documentation}
+ *
+ * @example
+ * import { List, DataTable, SearchInput } from '@/components/admin';
+ *
+ * const postListFilters = [
+ *   <SearchInput source="q" alwaysOn />,
+ * ];
+ *
+ * const PostList = () => (
+ *   <List filters={postListFilters}>
+ *     <DataTable>
+ *       <DataTable.Col source="title" />
+ *       <DataTable.Col source="author" />
+ *       <DataTable.Col source="published_at" />
+ *     </DataTable>
+ *   </List>
+ * );
+ */
+export const SearchInput = (inProps: SearchInputProps) => {
+  const { label, className, ...rest } = inProps;
+
+  const translate = useTranslate();
+
+  if (label) {
+    throw new Error(
+      "<SearchInput> isn't designed to be used with a label prop. Use <TextInput> if you need a label.",
+    );
+  }
+
+  return (
+    <div className="flex flex-grow relative mt-auto">
+      <TextInput
+        label={false}
+        helperText={false}
+        placeholder={translate("ra.action.search")}
+        className={cn("flex-grow", className)}
+        inputClassName="pr-8"
+        {...rest}
+      />
+      <Search className="absolute right-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
+    </div>
+  );
+};
+
+export type SearchInputProps = TextInputProps;

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

@@ -0,0 +1,111 @@
+import type { HTMLAttributes } from "react";
+import type { ChoicesProps } from "ra-core";
+import { useChoices, useFieldValue, useTranslate } from "ra-core";
+
+import type { FieldProps } from "@/lib/field.type";
+import { genericMemo } from "@/lib/genericMemo";
+
+/**
+ * Displays a value from an enumeration by mapping it to a human-readable label.
+ *
+ * Supports custom optionText and optionValue properties, and automatic translation of choice labels.
+ * To be used with RecordField or DataTable.Col components, or anywhere a RecordContext is available.
+ *
+ * @see {@link https://marmelab.com/shadcn-admin-kit/docs/selectfield/ SelectField documentation}
+ *
+ * @example
+ * import { List, DataTable, SelectField } from '@/components/admin';
+ *
+ * const choices = [{ id: 'M', name: 'Male' }, { id: 'F', name: 'Female' }];
+ *
+ * const UserList = () => (
+ *   <List>
+ *     <DataTable>
+ *       <DataTable.Col source="name" />
+ *       <DataTable.Col>
+ *         <SelectField source="gender" choices={choices} />
+ *       </DataTable.Col>
+ *     </DataTable>
+ *   </List>
+ * );
+ *
+ * The current choice is translated by default, so you can use translation identifiers as choices:
+ * @example
+ * const choices = [
+ *    { id: 'M', name: 'myroot.gender.male' },
+ *    { id: 'F', name: 'myroot.gender.female' },
+ * ];
+ *
+ * However, in some cases (e.g. inside a `<ReferenceField>`), you may not want
+ * the choice to be translated. In that case, set the `translateChoice` prop to false.
+ * @example
+ * <SelectField source="gender" choices={choices} translateChoice={false}/>
+ *
+ * **Tip**: <ReferenceField> sets `translateChoice` to false by default.
+ */
+const SelectFieldImpl = <
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  RecordType extends Record<string, any> = Record<string, any>,
+>(
+  props: SelectFieldProps<RecordType>,
+) => {
+  const {
+    className,
+    empty,
+    choices,
+    defaultValue,
+    source,
+    record,
+    optionValue = "id",
+    optionText = "name",
+    translateChoice = true,
+    ...rest
+  } = props;
+  const value = useFieldValue({ defaultValue, source, record });
+
+  const { getChoiceText, getChoiceValue } = useChoices({
+    optionText,
+    optionValue,
+    translateChoice,
+  });
+  const translate = useTranslate();
+
+  const choice = choices
+    ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      choices.find((choice: any) => getChoiceValue(choice) === value)
+    : null;
+
+  if (!choice) {
+    if (!empty) {
+      return null;
+    }
+
+    return (
+      <span className={className} {...rest}>
+        {typeof empty === "string" ? translate(empty, { _: empty }) : empty}
+      </span>
+    );
+  }
+
+  const choiceText = getChoiceText(choice);
+
+  return (
+    <span className={className} {...rest}>
+      {choiceText}
+    </span>
+  );
+};
+
+SelectFieldImpl.displayName = "SelectFieldImpl";
+
+export const SelectField = genericMemo(SelectFieldImpl);
+
+export interface SelectFieldProps<
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  RecordType extends Record<string, any> = Record<string, any>,
+> extends Omit<
+      ChoicesProps,
+      "disableValue" | "createValue" | "createHintValue"
+    >,
+    FieldProps<RecordType>,
+    HTMLAttributes<HTMLSpanElement> {}