realtimex-crm 0.1.2

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

@@ -0,0 +1,239 @@
+import * as React from "react";
+import { useState, useEffect } from "react";
+import type { RaRecord } from "ra-core";
+import {
+  ListBase,
+  getElementsFromRecords,
+  InferredElement,
+  useListContext,
+  usePrevious,
+  useResourceContext,
+} from "ra-core";
+import { useLocation } from "react-router";
+import type { ListProps, ListViewProps } from "@/components/admin/list";
+import { ListView } from "@/components/admin/list";
+import { capitalize, singularize } from "inflection";
+import { DataTable } from "@/components/admin/data-table";
+import { ArrayField } from "@/components/admin/array-field";
+import { BadgeField } from "@/components/admin/badge-field";
+import { ReferenceField } from "@/components/admin/reference-field";
+import { SingleFieldList } from "@/components/admin/single-field-list";
+import { ReferenceArrayField } from "@/components/admin/reference-array-field";
+
+/**
+ * A list page that automatically generates a DataTable from your data.
+ *
+ * Inspects the first record to infer field types and automatically creates appropriate columns.
+ * Useful for rapid prototyping. Logs generated code to console.
+ *
+ * @see {@link https://marmelab.com/shadcn-admin-kit/docs/list/#scaffolding-a-list-page ListGuesser documentation}
+ *
+ * @example
+ * import { Admin, ListGuesser } from '@/components/admin';
+ * import { Resource } from 'ra-core';
+ * import { dataProvider } from './dataProvider';
+ *
+ * const App = () => (
+ *   <Admin dataProvider={dataProvider}>
+ *     // ...
+ *     <Resource name="posts" list={ListGuesser} />
+ *   </Admin>
+ * );
+ */
+export const ListGuesser = <RecordType extends RaRecord = RaRecord>(
+  props: Omit<ListProps, "children"> & { enableLog?: boolean },
+) => {
+  const {
+    debounce,
+    disableAuthentication,
+    disableSyncWithLocation,
+    exporter,
+    filter,
+    filterDefaultValues,
+    perPage,
+    resource,
+    sort,
+    ...rest
+  } = props;
+  // force a rerender of this component when any list parameter changes
+  // otherwise the ListBase won't be rerendered when the sort changes
+  // and the following check won't be performed
+  useLocation();
+  // keep previous data, unless the resource changes
+  const resourceFromContext = useResourceContext(props);
+  const previousResource = usePrevious(resourceFromContext);
+  const keepPreviousData = previousResource === resourceFromContext;
+  return (
+    <ListBase<RecordType>
+      debounce={debounce}
+      disableAuthentication={disableAuthentication}
+      disableSyncWithLocation={disableSyncWithLocation}
+      exporter={exporter}
+      filter={filter}
+      filterDefaultValues={filterDefaultValues}
+      perPage={perPage}
+      resource={resource}
+      queryOptions={{
+        placeholderData: (previousData) =>
+          keepPreviousData ? previousData : undefined,
+      }}
+      sort={sort}
+    >
+      <ListViewGuesser {...rest} />
+    </ListBase>
+  );
+};
+
+const ListViewGuesser = (
+  props: Omit<ListViewProps, "children"> & { enableLog?: boolean },
+) => {
+  const { data } = useListContext();
+  const resource = useResourceContext();
+  const [child, setChild] = useState<React.ReactElement | null>(null);
+  const { enableLog = process.env.NODE_ENV === "development", ...rest } = props;
+
+  useEffect(() => {
+    setChild(null);
+  }, [resource]);
+
+  useEffect(() => {
+    if (data && data.length > 0 && !child) {
+      const inferredElements = getElementsFromRecords(data, listFieldTypes);
+      const inferredChild = new InferredElement(
+        listFieldTypes.table,
+        null,
+        inferredElements,
+      );
+      const inferredChildElement = inferredChild.getElement();
+      const representation = inferredChild.getRepresentation();
+      if (!resource) {
+        throw new Error(
+          "Cannot use <ListGuesser> outside of a ResourceContext",
+        );
+      }
+      if (!inferredChildElement || !representation) {
+        return;
+      }
+
+      setChild(inferredChildElement);
+
+      const components = ["List"]
+        .concat(
+          Array.from(
+            new Set(
+              Array.from(representation.matchAll(/<([^/\s\\.>]+)/g))
+                .map((match) => match[1])
+                .filter((component) => component !== "span"),
+            ),
+          ),
+        )
+        .sort();
+
+      if (enableLog) {
+        // eslint-disable-next-line no-console
+        console.log(
+          `Guessed List:
+
+${components
+  .map(
+    (component) =>
+      `import { ${component} } from "@/components/admin/${kebabCase(
+        component,
+      )}";`,
+  )
+  .join("\n")}
+
+export const ${capitalize(singularize(resource))}List = () => (
+    <List>
+${inferredChild.getRepresentation()}
+    </List>
+);`,
+        );
+      }
+    }
+  }, [data, child, resource, enableLog]);
+
+  return <ListView {...rest}>{child}</ListView>;
+};
+
+const listFieldTypes = {
+  table: {
+    component: (props: any) => {
+      return <DataTable {...props} />;
+    },
+    representation: (
+      _props: any,
+      children: { getRepresentation: () => string }[],
+    ) =>
+      `        <DataTable>
+${children
+  .map((child) => `            ${child.getRepresentation()}`)
+  .join("\n")}
+        </DataTable>`,
+  },
+
+  reference: {
+    component: (props: any) => (
+      <DataTable.Col source={props.source}>
+        <ReferenceField source={props.source} reference={props.reference} />
+      </DataTable.Col>
+    ),
+    representation: (props: any) =>
+      `<DataTable.Col source="${props.source}">
+                <ReferenceField source="${props.source}" reference="${props.reference}" />
+            </DataTable.Col>`,
+  },
+  array: {
+    component: ({ children, ...props }: any) => {
+      const childrenArray = React.Children.toArray(children);
+      return (
+        <DataTable.Col source={props.source}>
+          <ArrayField source={props.source}>
+            <SingleFieldList>
+              <BadgeField
+                source={
+                  childrenArray.length > 0 &&
+                  React.isValidElement(childrenArray[0]) &&
+                  (childrenArray[0].props as any).source
+                }
+              />
+            </SingleFieldList>
+          </ArrayField>
+        </DataTable.Col>
+      );
+    },
+    representation: (props: any, children: any) =>
+      `<DataTable.Col source="${props.source}">
+               <ArrayField source="${props.source}">
+                    <SingleFieldList>
+                        <BadgeField source="${
+                          children.length > 0 && children[0].getProps().source
+                        }" />
+                   </SingleFieldList>
+                </ArrayField>
+            </DataTable.Col>`,
+  },
+  referenceArray: {
+    component: (props: any) => (
+      <DataTable.Col {...props}>
+        <ReferenceArrayField {...props} />
+      </DataTable.Col>
+    ),
+    representation: (props: any) =>
+      `<DataTable.Col source="${props.source}">
+                <ReferenceArrayField source="${props.source}" reference="${props.reference}" />
+            </DataTable.Col>`,
+  },
+  string: {
+    component: DataTable.Col,
+    representation: (props: any) =>
+      `<DataTable.Col 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/list-pagination.tsx

@@ -0,0 +1,247 @@
+import { cn } from "@/lib/utils";
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+} from "@/components/ui/pagination";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { useListPaginationContext, Translate, useTranslate } from "ra-core";
+
+/**
+ * A pagination component with page numbers and rows per page selector.
+ *
+ * Displays pagination controls with previous/next buttons, page numbers with ellipsis for long lists,
+ * and a dropdown to change items per page. Works with List context.
+ *
+ * @see {@link https://marmelab.com/shadcn-admin-kit/docs/listpagination/ ListPagination documentation}
+ *
+ * @example
+ * import { List, ListPagination } from '@/components/admin';
+ *
+ * const PostListPagination = () => (
+ *   <ListPagination rowsPerPageOptions={[5, 10, 25]} />
+ * );
+ *
+ * export const PostList = () => (
+ *   <List pagination={<PostListPagination />}>
+ *     // ...
+ *   </List>
+ * );
+ */
+export const ListPagination = ({
+  rowsPerPageOptions = [5, 10, 25, 50],
+  className,
+}: {
+  rowsPerPageOptions?: number[];
+  className?: string;
+}) => {
+  const translate = useTranslate();
+  const {
+    hasPreviousPage,
+    hasNextPage,
+    page,
+    perPage,
+    setPerPage,
+    total,
+    setPage,
+  } = useListPaginationContext();
+
+  const pageStart = (page - 1) * perPage + 1;
+  const pageEnd = hasNextPage ? page * perPage : total;
+
+  const boundaryCount = 1;
+  const siblingCount = 1;
+  const count = total ? Math.ceil(total / perPage) : 1;
+
+  const range = (start: number, end: number) => {
+    const length = end - start + 1;
+    return Array.from({ length }, (_, i) => start + i);
+  };
+
+  const startPages = range(1, Math.min(boundaryCount, count));
+  const endPages = range(
+    Math.max(count - boundaryCount + 1, boundaryCount + 1),
+    count,
+  );
+
+  const siblingsStart = Math.max(
+    Math.min(
+      // Natural start
+      page - siblingCount,
+      // Lower boundary when page is high
+      count - boundaryCount - siblingCount * 2 - 1,
+    ),
+    // Greater than startPages
+    boundaryCount + 2,
+  );
+
+  const siblingsEnd = Math.min(
+    Math.max(
+      // Natural end
+      page + siblingCount,
+      // Upper boundary when page is low
+      boundaryCount + siblingCount * 2 + 2,
+    ),
+    // Less than endPages
+    count - boundaryCount - 1,
+  );
+
+  const siblingPages = range(siblingsStart, siblingsEnd);
+
+  const pageChangeHandler = (newPage: number) => {
+    return (event: React.MouseEvent<HTMLAnchorElement>) => {
+      event.preventDefault();
+      setPage(newPage);
+    };
+  };
+
+  return (
+    <div
+      className={`flex items-center justify-end space-x-2 gap-4 ${className}`}
+    >
+      <div className="hidden md:flex items-center space-x-2">
+        <p className="text-sm font-medium">
+          <Translate i18nKey="ra.navigation.page_rows_per_page">
+            Rows per page
+          </Translate>
+        </p>
+        <Select
+          value={perPage.toString()}
+          onValueChange={(value) => {
+            setPerPage(Number(value));
+          }}
+        >
+          <SelectTrigger className="h-8 w-[70px]">
+            <SelectValue placeholder={perPage} />
+          </SelectTrigger>
+          <SelectContent side="top">
+            {rowsPerPageOptions.map((pageSize) => (
+              <SelectItem key={pageSize} value={`${pageSize}`}>
+                {pageSize}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+      <div className="text-sm text-muted-foreground">
+        <Translate
+          i18nKey="ra.navigation.page_range_info"
+          options={{
+            offsetBegin: pageStart,
+            offsetEnd: pageEnd,
+            total: total === -1 ? pageEnd : total,
+          }}
+        >
+          {total != null
+            ? `${pageStart}-${pageEnd} of ${total === -1 ? pageEnd : total}`
+            : null}
+        </Translate>
+      </div>
+      <Pagination className="-w-full -mx-auto">
+        <PaginationContent>
+          <PaginationItem>
+            <PaginationLink
+              href="#"
+              onClick={pageChangeHandler(page - 1)}
+              className={cn(
+                "gap-1 px-2.5 sm:pr-2.5",
+                !hasPreviousPage ? "opacity-50 cursor-not-allowed" : "",
+              )}
+              aria-label={translate("ra.navigation.previous", {
+                _: "Previous",
+              })}
+            >
+              <ChevronLeftIcon />
+            </PaginationLink>
+          </PaginationItem>
+          {startPages.map((pageNumber) => (
+            <PaginationItem key={pageNumber}>
+              <PaginationLink
+                href="#"
+                onClick={pageChangeHandler(pageNumber)}
+                isActive={pageNumber === page}
+              >
+                {pageNumber}
+              </PaginationLink>
+            </PaginationItem>
+          ))}
+          {siblingsStart > boundaryCount + 2 ? (
+            <PaginationItem>
+              <PaginationEllipsis />
+            </PaginationItem>
+          ) : boundaryCount + 1 < count - boundaryCount ? (
+            <PaginationItem>
+              <PaginationLink
+                href="#"
+                onClick={pageChangeHandler(boundaryCount + 1)}
+                isActive={boundaryCount + 1 === page}
+              >
+                {boundaryCount + 1}
+              </PaginationLink>
+            </PaginationItem>
+          ) : null}
+          {siblingPages.map((pageNumber) => (
+            <PaginationItem key={pageNumber}>
+              <PaginationLink
+                href="#"
+                onClick={pageChangeHandler(pageNumber)}
+                isActive={pageNumber === page}
+              >
+                {pageNumber}
+              </PaginationLink>
+            </PaginationItem>
+          ))}
+          {siblingsEnd < count - boundaryCount - 1 ? (
+            <PaginationItem>
+              <PaginationEllipsis />
+            </PaginationItem>
+          ) : count - boundaryCount > boundaryCount ? (
+            <PaginationItem>
+              <PaginationLink
+                href="#"
+                onClick={pageChangeHandler(count - boundaryCount)}
+                isActive={count - boundaryCount === page}
+              >
+                {count - boundaryCount}
+              </PaginationLink>
+            </PaginationItem>
+          ) : null}
+          {endPages.map((pageNumber) => (
+            <PaginationItem key={pageNumber}>
+              <PaginationLink
+                href="#"
+                onClick={pageChangeHandler(pageNumber)}
+                isActive={pageNumber === page}
+              >
+                {pageNumber}
+              </PaginationLink>
+            </PaginationItem>
+          ))}
+          <PaginationItem>
+            <PaginationLink
+              href="#"
+              onClick={pageChangeHandler(page + 1)}
+              size="default"
+              className={cn(
+                "gap-1 px-2.5 sm:pr-2.5",
+                !hasNextPage ? "opacity-50 cursor-not-allowed" : "",
+              )}
+              aria-label={translate("ra.navigation.next", { _: "Next" })}
+            >
+              <ChevronRightIcon />
+            </PaginationLink>
+          </PaginationItem>
+        </PaginationContent>
+      </Pagination>
+    </div>
+  );
+};

package/src/components/admin/list.tsx

@@ -0,0 +1,178 @@
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbPage,
+} from "@/components/admin/breadcrumb";
+import type { ListBaseProps, ListControllerResult, RaRecord } from "ra-core";
+import {
+  FilterContext,
+  ListBase,
+  Translate,
+  useGetResourceLabel,
+  useHasDashboard,
+  useResourceContext,
+  useResourceDefinition,
+  useTranslate,
+} from "ra-core";
+import type { ReactElement, ReactNode } from "react";
+import { Link } from "react-router";
+import { cn } from "@/lib/utils";
+import { CreateButton } from "@/components/admin/create-button";
+import { ExportButton } from "@/components/admin/export-button";
+import { ListPagination } from "@/components/admin/list-pagination";
+import { FilterButton, FilterForm } from "@/components/admin/filter-form";
+
+/**
+ * A complete list page with breadcrumb, title, filters, and pagination.
+ *
+ * It fetches a list of records from the data provider (via ra-core hooks),
+ * puts them in a ListContext, renders a default layout (breadcrumb, title,
+ * action buttons, inline filters, pagination), then renders its children
+ * (usually a <DataTable>).
+ *
+ * @see {@link https://marmelab.com/shadcn-admin-kit/docs/list/ List documentation}
+ *
+ * @example
+ * import { DataTable, List } from "@/components/admin";
+ *
+ * export const UserList = () => (
+ *   <List>
+ *     <DataTable>
+ *       <DataTable.Col source="id" />
+ *       <DataTable.Col source="name" />
+ *       <DataTable.Col source="username" />
+ *       <DataTable.Col source="email" />
+ *       <DataTable.Col source="address.street" />
+ *       <DataTable.Col source="phone" />
+ *       <DataTable.Col source="website" />
+ *       <DataTable.Col source="company.name" />
+ *     </DataTable>
+ *   </List>
+ * );
+ */
+export const List = <RecordType extends RaRecord = RaRecord>(
+  props: ListProps<RecordType>,
+) => {
+  const {
+    debounce,
+    disableAuthentication,
+    disableSyncWithLocation,
+    exporter,
+    filter,
+    filterDefaultValues,
+    loading,
+    perPage,
+    queryOptions,
+    resource,
+    sort,
+    storeKey,
+    ...rest
+  } = props;
+
+  return (
+    <ListBase<RecordType>
+      debounce={debounce}
+      disableAuthentication={disableAuthentication}
+      disableSyncWithLocation={disableSyncWithLocation}
+      exporter={exporter}
+      filter={filter}
+      filterDefaultValues={filterDefaultValues}
+      loading={loading}
+      perPage={perPage}
+      queryOptions={queryOptions}
+      resource={resource}
+      sort={sort}
+      storeKey={storeKey}
+    >
+      <ListView<RecordType> {...rest} />
+    </ListBase>
+  );
+};
+
+export interface ListProps<RecordType extends RaRecord = RaRecord>
+  extends ListBaseProps<RecordType>,
+    ListViewProps<RecordType> {}
+
+/**
+ * The view component for List pages with layout and UI.
+ *
+ * @internal
+ */
+export const ListView = <RecordType extends RaRecord = RaRecord>(
+  props: ListViewProps<RecordType>,
+) => {
+  const {
+    disableBreadcrumb,
+    filters,
+    pagination = defaultPagination,
+    title,
+    children,
+    actions,
+  } = props;
+  const translate = useTranslate();
+  const resource = useResourceContext();
+  if (!resource) {
+    throw new Error(
+      "The ListView component must be used within a ResourceContextProvider",
+    );
+  }
+  const getResourceLabel = useGetResourceLabel();
+  const resourceLabel = getResourceLabel(resource, 2);
+  const finalTitle =
+    title !== undefined
+      ? title
+      : translate("ra.page.list", {
+          name: resourceLabel,
+        });
+  const { hasCreate } = useResourceDefinition({ resource });
+  const hasDashboard = useHasDashboard();
+
+  return (
+    <>
+      {!disableBreadcrumb && (
+        <Breadcrumb>
+          {hasDashboard && (
+            <BreadcrumbItem>
+              <Link to="/">
+                <Translate i18nKey="ra.page.dashboard">Home</Translate>
+              </Link>
+            </BreadcrumbItem>
+          )}
+          <BreadcrumbPage>{resourceLabel}</BreadcrumbPage>
+        </Breadcrumb>
+      )}
+
+      <FilterContext.Provider value={filters}>
+        <div className="flex justify-between items-start flex-wrap gap-2 my-2">
+          <h2 className="text-2xl font-bold tracking-tight mb-2">
+            {finalTitle}
+          </h2>
+          {actions ?? (
+            <div className="flex items-center gap-2">
+              {filters && filters.length > 0 ? <FilterButton /> : null}
+              {hasCreate ? <CreateButton /> : null}
+              {<ExportButton />}
+            </div>
+          )}
+        </div>
+        <FilterForm />
+
+        <div className={cn("my-2", props.className)}>{children}</div>
+        {pagination}
+      </FilterContext.Provider>
+    </>
+  );
+};
+
+const defaultPagination = <ListPagination />;
+
+export interface ListViewProps<RecordType extends RaRecord = RaRecord> {
+  children?: ReactNode;
+  disableBreadcrumb?: boolean;
+  render?: (props: ListControllerResult<RecordType, Error>) => ReactNode;
+  actions?: ReactElement | false;
+  filters?: ReactNode[];
+  pagination?: ReactNode;
+  title?: ReactNode | string | false;
+  className?: string;
+}

package/src/components/admin/loading.tsx

@@ -0,0 +1,40 @@
+import { Translate, useTimeout } from "ra-core";
+import { Spinner } from "./spinner";
+
+/**
+ * Loading indicator used for slow element or page loads.
+ *
+ * Displays a spinner and customizable loading messages.
+ * Automatically shown by the default Layout when page loading takes more than 1 second.
+ * Works as a fallback for React Suspense boundaries.
+ *
+ * @see {@link https://marmelab.com/shadcn-admin-kit/docs/loading/ Loading documentation}
+ */
+export const Loading = (props: LoadingProps) => {
+  const {
+    loadingPrimary = "ra.page.loading",
+    loadingSecondary = "ra.message.loading",
+    delay = 1000,
+    ...rest
+  } = props;
+  const oneSecondHasPassed = useTimeout(delay);
+  return oneSecondHasPassed ? (
+    <div className="flex flex-col justify-center items-center h-full" {...rest}>
+      <div className="text-center font-sans color-muted pt-1 pb-1">
+        <Spinner size="large" className="width-9 height-9" />
+        <h5 className="mt-3 text-2xl text-secondary-foreground">
+          <Translate i18nKey={loadingPrimary}>{loadingPrimary}</Translate>
+        </h5>
+        <p className="text-primary">
+          <Translate i18nKey={loadingSecondary}>{loadingSecondary}</Translate>
+        </p>
+      </div>
+    </div>
+  ) : null;
+};
+
+export interface LoadingProps {
+  loadingPrimary?: string;
+  loadingSecondary?: string;
+  delay?: number;
+}