realtimex-crm 0.1.2

package/src/components/admin/count.tsx

@@ -0,0 +1,94 @@
+import type { SortPayload } from "ra-core";
+import {
+  useResourceContext,
+  useGetList,
+  useTimeout,
+  useCreatePath,
+} from "ra-core";
+import { CircleX, LoaderCircle } from "lucide-react";
+
+import { Link } from "react-router";
+
+/**
+ * Fetches and displays the item count for a resource.
+ *
+ * Uses dataProvider.getList() with minimal pagination to fetch the total count.
+ * Displays a loading spinner while fetching and an error icon on failure.
+ * By default, uses the current resource from ResourceContext.
+ *
+ * @see {@link https://marmelab.com/shadcn-admin-kit/docs/count/ Count documentation}
+ *
+ * @example
+ * import { Count } from '@/components/admin';
+ * // Display the number of records in the current resource
+ * <Count />
+ *
+ * @example
+ * // Display the number of posts
+ * <Count resource="posts" />
+ *
+ * @example
+ * // Display the number of published posts with a link
+ * <Count resource="posts" filter={{ is_published: true }} link />
+ */
+export const Count = (props: CountProps) => {
+  const {
+    filter,
+    sort,
+    link,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    resource: resourceFromProps,
+    timeout = 1000,
+    ...rest
+  } = props;
+  const resource = useResourceContext(props);
+  if (!resource) {
+    throw new Error(
+      "The Count component must be used inside a ResourceContext or must be passed a resource prop.",
+    );
+  }
+  const oneSecondHasPassed = useTimeout(timeout);
+  const createPath = useCreatePath();
+
+  const { total, isPending, error } = useGetList(resource, {
+    filter,
+    sort,
+    pagination: { perPage: 1, page: 1 },
+  });
+
+  const body = isPending ? (
+    oneSecondHasPassed ? (
+      <LoaderCircle className="animate-spin" />
+    ) : (
+      ""
+    )
+  ) : error ? (
+    <CircleX color="error" />
+  ) : (
+    total
+  );
+
+  return link ? (
+    <Link
+      to={{
+        pathname: createPath({ resource, type: "list" }),
+        search: filter ? `filter=${JSON.stringify(filter)}` : undefined,
+      }}
+      onClick={(e) => e.stopPropagation()}
+      {...rest}
+    >
+      {body}
+    </Link>
+  ) : (
+    <span {...rest}>{body}</span>
+  );
+};
+
+export interface CountProps {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  filter?: any;
+  sort?: SortPayload;
+  link?: boolean;
+  resource?: string;
+  timeout?: number;
+}

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

@@ -0,0 +1,58 @@
+import React from "react";
+import { buttonVariants } from "@/components/ui/button";
+import { Plus } from "lucide-react";
+import { Translate, useCreatePath, useResourceContext } from "ra-core";
+import { Link } from "react-router";
+
+export type CreateButtonProps = {
+  label?: string;
+  resource?: string;
+};
+
+/**
+ * A button that navigates to the create page for a resource.
+ *
+ * Automatically uses the current resource unless overridden.
+ *
+ * @see {@link https://marmelab.com/shadcn-admin-kit/docs/createbutton/ CreateButton documentation}
+ *
+ * @example
+ * import { CreateButton, List, ExportButton } from '@/components/admin';
+ *
+ * const PostList = () => (
+ *   <List
+ *     actions={<>
+ *       <CreateButton />
+ *       <ExportButton />
+ *     </>}
+ *   >
+ *     ...
+ *   </List>
+ * );
+ */
+export const CreateButton = ({
+  label,
+  resource: targetResource,
+}: CreateButtonProps) => {
+  const resource = useResourceContext();
+  const createPath = useCreatePath();
+  const link = createPath({
+    resource: targetResource ?? resource,
+    type: "create",
+  });
+  return (
+    <Link
+      className={buttonVariants({ variant: "outline" })}
+      to={link}
+      onClick={stopPropagation}
+    >
+      <Plus />
+      <Translate i18nKey={label ?? "ra.action.create"}>
+        {label ?? "Create"}
+      </Translate>
+    </Link>
+  );
+};
+
+// useful to prevent click bubbling in a datagrid with rowClick
+const stopPropagation = (e: React.MouseEvent) => e.stopPropagation();

package/src/components/admin/create.tsx

@@ -0,0 +1,132 @@
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbPage,
+} from "@/components/admin/breadcrumb";
+import type { CreateBaseProps } from "ra-core";
+import {
+  CreateBase,
+  Translate,
+  useCreateContext,
+  useCreatePath,
+  useGetResourceLabel,
+  useHasDashboard,
+  useResourceContext,
+} from "ra-core";
+import type { ReactNode } from "react";
+import { Link } from "react-router";
+import { cn } from "@/lib/utils";
+
+export type CreateProps = CreateViewProps & CreateBaseProps;
+
+/**
+ * A complete create page with breadcrumb, title, and actions.
+ *
+ * Combines data fetching, form context, and UI layout for creating new records. Renders breadcrumb
+ * navigation, page title, and wraps your form components.
+ *
+ * @see {@link https://marmelab.com/shadcn-admin-kit/docs/create/ Create documentation}
+ *
+ * @example
+ * import { Create, SimpleForm, TextInput } from '@/components/admin';
+ *
+ * export const PostCreate = () => (
+ *   <Create>
+ *     <SimpleForm>
+ *       <TextInput source="title" />
+ *       <TextInput source="body" />
+ *     </SimpleForm>
+ *   </Create>
+ * );
+ */
+export const Create = ({
+  actions,
+  children,
+  className,
+  disableBreadcrumb,
+  title,
+  ...rest
+}: CreateProps) => (
+  <CreateBase {...rest}>
+    <CreateView
+      actions={actions}
+      className={className}
+      disableBreadcrumb={disableBreadcrumb}
+      title={title}
+    >
+      {children}
+    </CreateView>
+  </CreateBase>
+);
+
+export type CreateViewProps = {
+  actions?: ReactNode;
+  disableBreadcrumb?: boolean;
+  children: ReactNode;
+  className?: string;
+  title?: ReactNode | string | false;
+};
+
+/**
+ * The view component for Create pages with layout and UI.
+ *
+ * @internal
+ */
+export const CreateView = ({
+  actions,
+  disableBreadcrumb,
+  title,
+  children,
+  className,
+}: CreateViewProps) => {
+  const context = useCreateContext();
+
+  const resource = useResourceContext();
+  if (!resource) {
+    throw new Error(
+      "The CreateView 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 hasDashboard = useHasDashboard();
+
+  return (
+    <>
+      {!disableBreadcrumb && (
+        <Breadcrumb>
+          {hasDashboard && (
+            <BreadcrumbItem>
+              <Link to="/">
+                <Translate i18nKey="ra.page.dashboard">Home</Translate>
+              </Link>
+            </BreadcrumbItem>
+          )}
+          <BreadcrumbItem>
+            <Link to={listLink}>{listLabel}</Link>
+          </BreadcrumbItem>
+          <BreadcrumbPage>
+            <Translate i18nKey="ra.action.create">Create</Translate>
+          </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>
+      <div className="my-2">{children}</div>
+    </>
+  );
+};