realtimex-crm 0.1.2

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

@@ -0,0 +1,113 @@
+import * as React from "react";
+import { Trash } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { humanize, singularize } from "inflection";
+import type { UseDeleteOptions, RedirectionSideEffect } from "ra-core";
+import {
+  useDeleteWithUndoController,
+  useGetRecordRepresentation,
+  useResourceTranslation,
+  useRecordContext,
+  useResourceContext,
+  useTranslate,
+} from "ra-core";
+
+export type DeleteButtonProps = {
+  label?: string;
+  size?: "default" | "sm" | "lg" | "icon";
+  onClick?: React.ReactEventHandler<HTMLButtonElement>;
+  mutationOptions?: UseDeleteOptions;
+  redirect?: RedirectionSideEffect;
+  resource?: string;
+  successMessage?: string;
+  className?: string;
+  variant?:
+    | "default"
+    | "destructive"
+    | "outline"
+    | "secondary"
+    | "ghost"
+    | "link";
+};
+
+/**
+ * A button that deletes a record with undo capability.
+ *
+ * Renders a destructive button that deletes the current record and shows an undo notification.
+ * Automatically redirects after deletion and works with the RecordContext.
+ *
+ * @see {@link https://marmelab.com/shadcn-admin-kit/docs/deletebutton/ DeleteButton documentation}
+ *
+ * @example
+ * import { DeleteButton, Edit } from '@/components/admin';
+ *
+ * const PostEdit = () => (
+ *     <Edit actions={<DeleteButton />}>
+ *         ...
+ *     </Edit>
+ * );
+ */
+export const DeleteButton = (props: DeleteButtonProps) => {
+  const {
+    label: labelProp,
+    onClick,
+    size,
+    mutationOptions,
+    redirect = "list",
+    successMessage,
+    variant = "outline",
+    className = "cursor-pointer hover:bg-destructive/10! text-destructive! border-destructive! focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
+  } = props;
+  const record = useRecordContext(props);
+  const resource = useResourceContext(props);
+
+  const { isPending, handleDelete } = useDeleteWithUndoController({
+    record,
+    resource,
+    redirect,
+    onClick,
+    mutationOptions,
+    successMessage,
+  });
+  const translate = useTranslate();
+  const getRecordRepresentation = useGetRecordRepresentation(resource);
+  let recordRepresentation = getRecordRepresentation(record);
+  const resourceName = translate(`resources.${resource}.forcedCaseName`, {
+    smart_count: 1,
+    _: humanize(
+      translate(`resources.${resource}.name`, {
+        smart_count: 1,
+        _: resource ? singularize(resource) : undefined,
+      }),
+      true,
+    ),
+  });
+  // We don't support React elements for this
+  if (React.isValidElement(recordRepresentation)) {
+    recordRepresentation = `#${record?.id}`;
+  }
+  const label = useResourceTranslation({
+    resourceI18nKey: `resources.${resource}.action.delete`,
+    baseI18nKey: "ra.action.delete",
+    options: {
+      name: resourceName,
+      recordRepresentation,
+    },
+    userText: labelProp,
+  });
+
+  return (
+    <Button
+      variant={variant}
+      type="button"
+      onClick={handleDelete}
+      disabled={isPending}
+      aria-label={typeof label === "string" ? label : undefined}
+      size={size}
+      className={className}
+    >
+      <Trash />
+      {label}
+    </Button>
+  );
+};

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

@@ -0,0 +1,64 @@
+import React from "react";
+import { buttonVariants } from "@/components/ui/button";
+import { Pencil } from "lucide-react";
+import type { RaRecord } from "ra-core";
+import {
+  useCreatePath,
+  useRecordContext,
+  useResourceContext,
+  Translate,
+} from "ra-core";
+import { Link } from "react-router";
+
+export type EditButtonProps = {
+  record?: RaRecord;
+  resource?: string;
+  label?: string;
+};
+
+/**
+ * A button that navigates to the edit page for a record.
+ *
+ * Works within RecordContext to automatically get the record ID.
+ *
+ * @see {@link https://marmelab.com/shadcn-admin-kit/docs/editbutton/ EditButton documentation}
+ *
+ * @example
+ * import { DataTable, EditButton } from '@/components/admin';
+ *
+ * const PostList = () => (
+ *   <DataTable>
+ *     <DataTable.Col source="title" />
+ *     <DataTable.Col source="author" />
+ *     <DataTable.Col source="published_at" />
+ *     <DataTable.Col>
+ *       <EditButton />
+ *     </DataTable.Col>
+ *   </DataTable>
+ * );
+ */
+export const EditButton = (props: EditButtonProps) => {
+  const resource = useResourceContext(props);
+  const record = useRecordContext(props);
+  const createPath = useCreatePath();
+  const link = createPath({
+    resource,
+    type: "edit",
+    id: record?.id,
+  });
+  return (
+    <Link
+      className={buttonVariants({ variant: "outline" })}
+      to={link}
+      onClick={stopPropagation}
+    >
+      <Pencil />
+      <Translate i18nKey={props.label ?? "ra.action.edit"}>
+        {props.label ?? "Edit"}
+      </Translate>
+    </Link>
+  );
+};
+
+// useful to prevent click bubbling in a datagrid with rowClick
+const stopPropagation = (e: React.MouseEvent) => e.stopPropagation();

package/src/components/admin/edit-guesser.tsx

@@ -0,0 +1,157 @@
+import type { ReactNode } from "react";
+import { useEffect, useState } from "react";
+import type { InferredTypeMap } from "ra-core";
+import {
+  EditBase,
+  InferredElement,
+  useResourceContext,
+  useEditContext,
+  getElementsFromRecords,
+} from "ra-core";
+import { capitalize, singularize } from "inflection";
+import { EditView } from "@/components/admin/edit";
+import { SimpleForm } from "@/components/admin/simple-form";
+import { TextInput } from "@/components/admin/text-input";
+import { BooleanInput } from "@/components/admin/boolean-input";
+import { ReferenceInput } from "@/components/admin/reference-input";
+import { AutocompleteInput } from "@/components/admin/autocomplete-input";
+import { ReferenceArrayInput } from "@/components/admin/reference-array-input";
+
+/**
+ * An edit page that automatically generates a form from your data.
+ *
+ * Inspects the record to infer field types and automatically creates appropriate inputs.
+ * Useful for rapid prototyping. Logs generated code to console.
+ *
+ * @see {@link https://marmelab.com/shadcn-admin-kit/docs/edit/#scaffolding-an-edit-page EditGuesser documentation}
+ *
+ * @example
+ * import { Admin, EditGuesser } from '@/components/admin';
+ * import { Resource } from 'ra-core';
+ * import dataProvider from './dataProvider';
+ *
+ * const App = () => (
+ *   <Admin dataProvider={dataProvider}>
+ *     ...
+ *     <Resource name="customers" edit={EditGuesser} />
+ *   </Admin>
+ * );
+ */
+export const EditGuesser = (props: { enableLog?: boolean }) => {
+  return (
+    <EditBase>
+      <EditViewGuesser {...props} />
+    </EditBase>
+  );
+};
+
+const EditViewGuesser = (props: { enableLog?: boolean }) => {
+  const resource = useResourceContext();
+
+  if (!resource) {
+    throw new Error(`Cannot use <EditGuesser> outside of a ResourceContext`);
+  }
+
+  const { record } = useEditContext();
+  const [child, setChild] = useState<ReactNode>(null);
+  const { enableLog = process.env.NODE_ENV === "development", ...rest } = props;
+
+  useEffect(() => {
+    setChild(null);
+  }, [resource]);
+
+  useEffect(() => {
+    if (record && !child) {
+      const inferredElements = getElementsFromRecords([record], editFieldTypes);
+      const inferredChild = new InferredElement(
+        editFieldTypes.form,
+        null,
+        inferredElements,
+      );
+      setChild(inferredChild.getElement());
+
+      if (!enableLog) return;
+
+      const representation = inferredChild.getRepresentation();
+
+      const components = ["Edit"]
+        .concat(
+          Array.from(
+            new Set(
+              Array.from(representation.matchAll(/<([^/\s>]+)/g))
+                .map((match) => match[1])
+                .filter((component) => component !== "span"),
+            ),
+          ),
+        )
+        .sort();
+
+      // eslint-disable-next-line no-console
+      console.log(
+        `Guessed Edit:
+
+${components
+  .map(
+    (component) =>
+      `import { ${component} } from "@/components/admin/${kebabCase(
+        component,
+      )}";`,
+  )
+  .join("\n")}
+
+export const ${capitalize(singularize(resource))}Edit = () => (
+    <Edit>
+${representation}
+    </Edit>
+);`,
+      );
+    }
+  }, [record, child, resource, enableLog]);
+
+  return <EditView {...rest}>{child}</EditView>;
+};
+
+const editFieldTypes: InferredTypeMap = {
+  form: {
+    component: (props: any) => <SimpleForm {...props} />,
+    representation: (
+      _props: any,
+      children: { getRepresentation: () => string }[],
+    ) => `        <SimpleForm>
+${children
+  .map((child) => `            ${child.getRepresentation()}`)
+  .join("\n")}
+        </SimpleForm>`,
+  },
+  reference: {
+    component: (props: any) => (
+      <ReferenceInput source={props.source} reference={props.reference}>
+        <AutocompleteInput />
+      </ReferenceInput>
+    ),
+    representation: (props: any) =>
+      `<ReferenceInput source="${props.source}" reference="${props.reference}">
+                  <AutocompleteInput />
+              </ReferenceInput>`,
+  },
+  referenceArray: {
+    component: (props: any) => <ReferenceArrayInput {...props} />,
+    representation: (props: any) =>
+      `<ReferenceArrayInput source="${props.source}" reference="${props.reference}" />`,
+  },
+  boolean: {
+    component: (props: any) => <BooleanInput {...props} />,
+    representation: (props: any) => `<BooleanInput source="${props.source}" />`,
+  },
+  string: {
+    component: (props: any) => <TextInput {...props} />,
+    representation: (props: any) => `<TextInput source="${props.source}" />`,
+  },
+};
+
+const kebabCase = (name: string) => {
+  return name
+    .replace(/([a-z])([A-Z])/g, "$1-$2")
+    .replace(/([A-Z])([A-Z][a-z])/g, "$1-$2")
+    .toLowerCase();
+};

package/src/components/admin/edit.tsx

@@ -0,0 +1,152 @@
+import type { EditBaseProps } from "ra-core";
+import {
+  EditBase,
+  Translate,
+  useCreatePath,
+  useEditContext,
+  useGetRecordRepresentation,
+  useGetResourceLabel,
+  useHasDashboard,
+  useResourceContext,
+  useResourceDefinition,
+} from "ra-core";
+import type { ReactNode } from "react";
+import { Link } from "react-router";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbPage,
+} from "@/components/admin/breadcrumb";
+import { cn } from "@/lib/utils";
+import { ShowButton } from "@/components/admin/show-button";
+import { DeleteButton } from "./delete-button";
+
+export interface EditProps extends EditViewProps, EditBaseProps {}
+
+/**
+ * A complete edit page with breadcrumb, title, and default actions.
+ *
+ * Combines data fetching, form context, and UI layout for editing records. Renders breadcrumb,
+ * page title, Show and Delete buttons, and wraps your form components.
+ *
+ * @see {@link https://marmelab.com/shadcn-admin-kit/docs/edit/ Edit documentation}
+ *
+ * @example
+ * import { Edit, SimpleForm, BooleanInput, TextInput } from "@/components/admin";
+ * import { required } from 'ra-core';
+ *
+ * export const CustomerEdit = () => (
+ *   <Edit>
+ *     <SimpleForm>
+ *       <TextInput source="first_name" validate={required()} />
+ *       <TextInput source="last_name" validate={required()} />
+ *       <TextInput source="email" validate={required()} />
+ *       <BooleanInput source="has_ordered" />
+ *       <TextInput multiline source="notes" />
+ *     </SimpleForm>
+ *   </Edit>
+ * );
+ */
+export const Edit = ({
+  actions,
+  children,
+  className,
+  disableBreadcrumb,
+  title,
+  ...rest
+}: EditProps) => (
+  <EditBase {...rest}>
+    <EditView
+      actions={actions}
+      className={className}
+      disableBreadcrumb={disableBreadcrumb}
+      title={title}
+    >
+      {children}
+    </EditView>
+  </EditBase>
+);
+
+export interface EditViewProps {
+  disableBreadcrumb?: boolean;
+  title?: ReactNode | string | false;
+  actions?: ReactNode;
+  children?: ReactNode;
+  className?: string;
+}
+
+/**
+ * The view component for Edit pages with layout and UI.
+ *
+ * @internal
+ */
+export const EditView = ({
+  disableBreadcrumb,
+  title,
+  actions,
+  className,
+  children,
+}: EditViewProps) => {
+  const context = useEditContext();
+
+  const resource = useResourceContext();
+  if (!resource) {
+    throw new Error(
+      "The EditView component must be used within a ResourceContextProvider",
+    );
+  }
+  const getResourceLabel = useGetResourceLabel();
+  const listLabel = getResourceLabel(resource, 2);
+  const createPath = useCreatePath();
+  const listLink = createPath({
+    resource,
+    type: "list",
+  });
+
+  const getRecordRepresentation = useGetRecordRepresentation(resource);
+  const recordRepresentation = getRecordRepresentation(context.record);
+
+  const { hasShow } = useResourceDefinition({ resource });
+  const hasDashboard = useHasDashboard();
+
+  if (context.isLoading || !context.record) {
+    return null;
+  }
+
+  return (
+    <>
+      {!disableBreadcrumb && (
+        <Breadcrumb>
+          {hasDashboard && (
+            <BreadcrumbItem>
+              <Link to="/">
+                <Translate i18nKey="ra.page.dashboard">Home</Translate>
+              </Link>
+            </BreadcrumbItem>
+          )}
+          <BreadcrumbItem>
+            <Link to={listLink}>{listLabel}</Link>
+          </BreadcrumbItem>
+          <BreadcrumbPage>{recordRepresentation}</BreadcrumbPage>
+        </Breadcrumb>
+      )}
+      <div
+        className={cn(
+          "flex justify-between items-start flex-wrap gap-2 my-2",
+          className,
+        )}
+      >
+        <h2 className="text-2xl font-bold tracking-tight">
+          {title !== undefined ? title : context.defaultTitle}
+        </h2>
+        {actions ?? (
+          <div className="flex justify-end items-center gap-2">
+            {hasShow ? <ShowButton /> : null}
+            <DeleteButton />
+          </div>
+        )}
+      </div>
+      <div className="my-2">{children}</div>
+    </>
+  );
+};

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

@@ -0,0 +1,74 @@
+import { useFieldValue, useTranslate } from "ra-core";
+import type { AnchorHTMLAttributes } from "react";
+import React from "react";
+
+import { cn } from "@/lib/utils";
+import { genericMemo } from "@/lib/genericMemo";
+import type { FieldProps } from "@/lib/field.type";
+
+const EmailFieldImpl = <
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  RecordType extends Record<string, any> = Record<string, any>,
+>(
+  inProps: EmailFieldProps<RecordType>,
+) => {
+  const { className, empty, defaultValue, source, record, ...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={`mailto:${value}`}
+      onClick={stopPropagation}
+      {...rest}
+    >
+      {value}
+    </a>
+  );
+};
+EmailFieldImpl.displayName = "EmailFieldImpl";
+
+/**
+ * Displays an email address as a clickable mailto link.
+ *
+ * Click events are prevented from bubbling up, making it safe to use in DataTable rows with rowClick.
+ * To be used with RecordField or DataTable.Col components, or anywhere a RecordContext is available.
+ *
+ * @see {@link https://marmelab.com/shadcn-admin-kit/docs/emailfield/ EmailField documentation}
+ *
+ * @example
+ * import { List, DataTable, EmailField } from '@/components/admin';
+ *
+ * const UserList = () => (
+ *   <List>
+ *     <DataTable>
+ *       <DataTable.Col source="name" />
+ *       <DataTable.Col source="email" field={EmailField} />
+ *     </DataTable>
+ *   </List>
+ * );
+ */
+export const EmailField = genericMemo(EmailFieldImpl);
+
+export interface EmailFieldProps<
+  // 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();

package/src/components/admin/error.tsx

@@ -0,0 +1,111 @@
+import type { FallbackProps } from "react-error-boundary";
+import { useResetErrorBoundaryOnLocationChange, Translate } from "ra-core";
+import { CircleAlert, History } from "lucide-react";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Button } from "@/components/ui/button";
+import type { HtmlHTMLAttributes, ErrorInfo } from "react";
+
+/**
+ * App-wide error component for displaying error boundaries.
+ *
+ * Displays the error message and a back button.
+ * In development mode, also shows the component stack trace in an expandable accordion.
+ *
+ * @see {@link https://marmelab.com/shadcn-admin-kit/docs/error Error documentation}
+ */
+export const Error = (props: InternalErrorProps & {}) => {
+  const { error, errorInfo, resetErrorBoundary, ...rest } = props;
+
+  useResetErrorBoundaryOnLocationChange(resetErrorBoundary);
+
+  return (
+    <div className="flex flex-col items-center md:p-16 gap-5" {...rest}>
+      <h1 className="flex items-center text-3xl mt-5 mb-5 gap-3" role="alert">
+        <CircleAlert className="w-2em h-2em" />
+        <Translate i18nKey="ra.page.error" />
+      </h1>
+      <div>
+        <Translate i18nKey="ra.message.error" />
+      </div>
+      {process.env.NODE_ENV !== "production" && (
+        <>
+          <Accordion
+            type="multiple"
+            className="mt-1 p-2 bg-secondary w-full lg:w-150"
+          >
+            <AccordionItem value="error">
+              <AccordionTrigger className="py-2">
+                <Translate i18nKey={error.message}>{error.message}</Translate>
+              </AccordionTrigger>
+              <AccordionContent className="whitespace-pre-wrap pt-1">
+                <pre className="text-xls">{errorInfo?.componentStack}</pre>
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
+
+          <p className="text-center ">
+            Need help with this error? Try the following:
+          </p>
+          <div>
+            <ul className="list-disc">
+              <li>
+                Check the{" "}
+                <a
+                  className="text-primary underline-offset-4 hover:underline"
+                  href="https://marmelab.com/shadcn-admin-kit/docs"
+                >
+                  shadcn-admin-kit documentation
+                </a>
+              </li>
+              <li>
+                Search on{" "}
+                <a
+                  className="text-primary underline-offset-4 hover:underline"
+                  href="https://stackoverflow.com/questions/tagged/shadcn-admin-kit"
+                >
+                  StackOverflow
+                </a>{" "}
+                for community answers
+              </li>
+              <li>
+                Get help from the core team via{" "}
+                <a
+                  className="text-primary underline-offset-4 hover:underline"
+                  href="https://marmelab.com/shadcn-admin-kit/"
+                >
+                  Shadcn Enterprise Edition
+                </a>
+              </li>
+            </ul>
+          </div>
+        </>
+      )}
+      <div className="mt-8">
+        <Button onClick={goBack}>
+          <History />
+          <Translate i18nKey="ra.action.back" />
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+interface InternalErrorProps
+  extends Omit<HtmlHTMLAttributes<HTMLDivElement>, "title">,
+    FallbackProps {
+  className?: string;
+  errorInfo?: ErrorInfo;
+}
+
+export interface ErrorProps extends Pick<FallbackProps, "error"> {
+  errorInfo?: ErrorInfo;
+}
+
+function goBack() {
+  window.history.go(-1);
+}