@acmekit/dashboard 2.13.7 → 2.13.8

package/dist/user-list-OWUR75OP.mjs

@@ -0,0 +1,1116 @@
+import {
+  useFeatureFlag
+} from "./chunk-DQCEH3X2.mjs";
+import {
+  SingleColumnPage
+} from "./chunk-22YYMH6M.mjs";
+import {
+  useExtension
+} from "./chunk-C5P5PL3E.mjs";
+import {
+  useActiveViewConfiguration,
+  useCreateViewConfiguration,
+  useDeleteViewConfiguration,
+  useSetActiveViewConfiguration,
+  useUpdateViewConfiguration,
+  useViewConfigurations
+} from "./chunk-DN3MIYQH.mjs";
+import {
+  useUsers
+} from "./chunk-YRWSG3YM.mjs";
+import {
+  useQueryParams
+} from "./chunk-C76H5USB.mjs";
+import {
+  useDate
+} from "./chunk-DFFLVEZ5.mjs";
+import "./chunk-535OVBXR.mjs";
+import {
+  ActionMenu
+} from "./chunk-S3REQHPQ.mjs";
+import "./chunk-OAHCJFG3.mjs";
+import "./chunk-S4DMV3ZT.mjs";
+import "./chunk-FXYH54JP.mjs";
+import "./chunk-774WSTCC.mjs";
+import "./chunk-DTY37DDZ.mjs";
+import "./chunk-QZ7TP4HQ.mjs";
+
+// src/routes/users/user-list/components/user-list-table/user-list-table.tsx
+import { Container, createDataTableColumnHelper as createDataTableColumnHelper2 } from "@acmekit/ui";
+import { keepPreviousData } from "@tanstack/react-query";
+import { useMemo as useMemo5 } from "react";
+import { useTranslation as useTranslation4 } from "react-i18next";
+import { useNavigate as useNavigate2 } from "react-router-dom";
+import { PencilSquare as PencilSquare3 } from "@acmekit/icons";
+
+// src/components/data-table/data-table.tsx
+import {
+  DataTable as UiDataTable,
+  useDataTable,
+  Heading as Heading2,
+  Text as Text2,
+  Button as Button3
+} from "@acmekit/ui";
+import React4, { useCallback, useMemo as useMemo2 } from "react";
+import { useTranslation } from "react-i18next";
+import { Link, useNavigate, useSearchParams } from "react-router-dom";
+
+// src/components/table/view-selector/view-selector.tsx
+import { useEffect, useState as useState2 } from "react";
+import {
+  Button as Button2,
+  Tooltip,
+  DropdownMenu,
+  usePrompt
+} from "@acmekit/ui";
+import {
+  Eye,
+  Plus,
+  Trash,
+  PencilSquare,
+  Star,
+  CheckCircleSolid,
+  ArrowUturnLeft
+} from "@acmekit/icons";
+
+// src/hooks/use-view-configurations.tsx
+import { useMemo } from "react";
+import { toast } from "@acmekit/ui";
+import { FetchError } from "@acmekit/js-sdk";
+var handleError = (error, message) => {
+  let errorMessage = message;
+  if (!errorMessage) {
+    if (error instanceof FetchError) {
+      errorMessage = error.message;
+    } else if (error.message) {
+      errorMessage = error.message;
+    } else {
+      errorMessage = "An error occurred";
+    }
+  }
+  toast.error(errorMessage);
+};
+var useViewConfigurations2 = (entity) => {
+  const isViewConfigEnabled = useFeatureFlag("view_configurations");
+  const listViews = useViewConfigurations(entity, { limit: 100 }, {
+    enabled: isViewConfigEnabled && !!entity
+  });
+  const activeView = useActiveViewConfiguration(entity, {
+    enabled: isViewConfigEnabled && !!entity
+  });
+  const createView = useCreateViewConfiguration(entity, {
+    onSuccess: () => {
+      toast.success(`View created`);
+    },
+    onError: (error) => {
+      handleError(error, "Failed to create view");
+    }
+  });
+  const setActiveView = useSetActiveViewConfiguration(entity, {
+    onSuccess: () => {
+    },
+    onError: (error) => {
+      handleError(error, "Failed to update active view");
+    }
+  });
+  return useMemo(() => ({
+    isViewConfigEnabled,
+    listViews,
+    activeView,
+    createView,
+    setActiveView,
+    isDefaultViewActive: activeView?.is_default_active ?? true
+  }), [
+    isViewConfigEnabled,
+    listViews,
+    activeView,
+    createView,
+    setActiveView
+  ]);
+};
+var useViewConfiguration = (entity, viewId) => {
+  const updateView = useUpdateViewConfiguration(entity, viewId, {
+    onSuccess: () => {
+      toast.success(`View updated`);
+    },
+    onError: (error) => {
+      handleError(error, "Failed to update view");
+    }
+  });
+  const deleteView = useDeleteViewConfiguration(entity, viewId, {
+    onSuccess: () => {
+      toast.success("View deleted successfully");
+    },
+    onError: (error) => {
+      handleError(error, "Failed to delete view");
+    }
+  });
+  return {
+    updateView,
+    deleteView
+  };
+};
+
+// src/components/table/save-view-dialog/save-view-dialog.tsx
+import { useState } from "react";
+import {
+  Button,
+  Input,
+  Label,
+  Drawer,
+  Heading,
+  Text
+} from "@acmekit/ui";
+import { useForm } from "react-hook-form";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SaveViewDialog = ({
+  entity,
+  currentColumns,
+  currentConfiguration,
+  editingView,
+  onClose,
+  onSaved
+}) => {
+  const { createView } = useViewConfigurations2(entity);
+  const { updateView } = useViewConfiguration(entity, editingView?.id || "");
+  const [isLoading, setIsLoading] = useState(false);
+  const {
+    register,
+    handleSubmit,
+    formState: { errors }
+  } = useForm({
+    defaultValues: {
+      name: editingView?.name || ""
+    }
+  });
+  const onSubmit = async (data) => {
+    if (!data.name.trim()) {
+      return;
+    }
+    setIsLoading(true);
+    try {
+      if (editingView) {
+        const result = await updateView.mutateAsync({
+          name: data.name.trim(),
+          configuration: {
+            visible_columns: currentColumns?.visible || editingView.configuration.visible_columns,
+            column_order: currentColumns?.order || editingView.configuration.column_order,
+            filters: currentConfiguration?.filters || editingView.configuration.filters || {},
+            sorting: currentConfiguration?.sorting || editingView.configuration.sorting || null,
+            search: currentConfiguration?.search || editingView.configuration.search || ""
+          }
+        });
+        onSaved(result.view_configuration);
+      } else {
+        const result = await createView.mutateAsync({
+          name: data.name.trim(),
+          set_active: true,
+          configuration: {
+            visible_columns: currentColumns?.visible || [],
+            column_order: currentColumns?.order || [],
+            filters: currentConfiguration?.filters || {},
+            sorting: currentConfiguration?.sorting || null,
+            search: currentConfiguration?.search || ""
+          }
+        });
+        onSaved(result.view_configuration);
+      }
+    } catch (error) {
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  return /* @__PURE__ */ jsx(Drawer, { open: true, onOpenChange: onClose, children: /* @__PURE__ */ jsxs(Drawer.Content, { className: "flex flex-col", children: [
+    /* @__PURE__ */ jsxs(Drawer.Header, { children: [
+      /* @__PURE__ */ jsx(Drawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: editingView ? "Edit View Name" : "Save as New View" }) }),
+      /* @__PURE__ */ jsx(Drawer.Description, { asChild: true, children: /* @__PURE__ */ jsx(Text, { children: editingView ? "Change the name of your saved view" : "Save your current configuration as a new view" }) })
+    ] }),
+    /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit(onSubmit), className: "flex flex-1 flex-col", children: [
+      /* @__PURE__ */ jsx(Drawer.Body, { className: "flex-1", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-2", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: "name", weight: "plus", children: "View Name" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            ...register("name", {
+              required: "Name is required",
+              validate: (value) => value.trim().length > 0 || "Name cannot be empty"
+            }),
+            type: "text",
+            placeholder: "Enter view name",
+            autoFocus: true
+          }
+        ),
+        errors.name && /* @__PURE__ */ jsx("span", { className: "text-sm text-ui-fg-error", children: errors.name.message })
+      ] }) }),
+      /* @__PURE__ */ jsxs(Drawer.Footer, { children: [
+        /* @__PURE__ */ jsx(Drawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "secondary",
+            size: "small",
+            type: "button",
+            children: "Cancel"
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "primary",
+            size: "small",
+            type: "submit",
+            isLoading,
+            children: editingView ? "Update" : "Save"
+          }
+        )
+      ] })
+    ] })
+  ] }) });
+};
+
+// src/components/table/view-selector/view-selector.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+
+// src/components/table/view-selector/view-pills.tsx
+import { useEffect as useEffect2, useState as useState3 } from "react";
+import {
+  Badge as Badge2,
+  usePrompt as usePrompt2,
+  toast as toast3,
+  DropdownMenu as DropdownMenu2
+} from "@acmekit/ui";
+import {
+  Trash as Trash2,
+  PencilSquare as PencilSquare2,
+  ArrowUturnLeft as ArrowUturnLeft2
+} from "@acmekit/icons";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var ViewPills = ({
+  entity,
+  currentColumns,
+  currentConfiguration
+}) => {
+  const {
+    listViews,
+    activeView,
+    setActiveView,
+    isDefaultViewActive
+  } = useViewConfigurations2(entity);
+  const views = listViews?.view_configurations || [];
+  const [saveDialogOpen, setSaveDialogOpen] = useState3(false);
+  const [editingView, setEditingView] = useState3(null);
+  const [contextMenuOpen, setContextMenuOpen] = useState3(null);
+  const [contextMenuPosition, setContextMenuPosition] = useState3({ x: 0, y: 0 });
+  const [deletingViewId, setDeletingViewId] = useState3(null);
+  const prompt = usePrompt2();
+  const currentActiveView = activeView?.view_configuration || null;
+  const { deleteView } = useViewConfiguration(entity, deletingViewId || "");
+  const handleViewSelect = async (viewId) => {
+    try {
+      if (viewId === null) {
+        await setActiveView.mutateAsync(null);
+        return;
+      }
+      const view = views.find((v) => v.id === viewId);
+      if (view) {
+        await setActiveView.mutateAsync(viewId);
+      }
+    } catch (error) {
+      console.error("Error in handleViewSelect:", error);
+    }
+  };
+  const handleDeleteView = async (view) => {
+    const result = await prompt({
+      title: "Delete view",
+      description: `Are you sure you want to delete "${view.name}"? This action cannot be undone.`,
+      confirmText: "Delete",
+      cancelText: "Cancel"
+    });
+    if (result) {
+      setDeletingViewId(view.id);
+    }
+  };
+  useEffect2(() => {
+    if (deletingViewId && deleteView.mutateAsync) {
+      deleteView.mutateAsync().then(() => {
+        setDeletingViewId(null);
+      }).catch(() => {
+        setDeletingViewId(null);
+      });
+    }
+  }, [deletingViewId, deleteView.mutateAsync]);
+  const handleEditView = (view) => {
+    setEditingView(view);
+    setSaveDialogOpen(true);
+  };
+  const handleResetSystemDefault = async (systemDefaultView2) => {
+    const result = await prompt({
+      title: "Reset system default",
+      description: "This will delete the saved system default and revert to the original code-level defaults. All users will be affected. Are you sure?",
+      confirmText: "Reset",
+      cancelText: "Cancel"
+    });
+    if (result) {
+      setDeletingViewId(systemDefaultView2.id);
+    }
+  };
+  const systemDefaultView = views.find((v) => v.is_system_default);
+  const personalViews = views.filter((v) => !v.is_system_default);
+  const isDefaultActive = isDefaultViewActive;
+  const defaultLabel = "Default";
+  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "relative inline-block", children: [
+        /* @__PURE__ */ jsx3(
+          Badge2,
+          {
+            color: isDefaultActive ? "blue" : "grey",
+            size: "xsmall",
+            className: "cursor-pointer",
+            onClick: () => handleViewSelect(null),
+            onContextMenu: (e) => {
+              e.preventDefault();
+              if (systemDefaultView) {
+                setContextMenuPosition({ x: e.clientX, y: e.clientY });
+                setContextMenuOpen("default");
+              }
+            },
+            children: defaultLabel
+          }
+        ),
+        systemDefaultView && contextMenuOpen === "default" && /* @__PURE__ */ jsxs3(
+          DropdownMenu2,
+          {
+            open: true,
+            onOpenChange: (open) => {
+              if (!open) setContextMenuOpen(null);
+            },
+            children: [
+              /* @__PURE__ */ jsx3(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsx3(
+                "div",
+                {
+                  style: {
+                    position: "fixed",
+                    left: contextMenuPosition.x,
+                    top: contextMenuPosition.y,
+                    width: 0,
+                    height: 0
+                  }
+                }
+              ) }),
+              /* @__PURE__ */ jsx3(DropdownMenu2.Content, { align: "start", sideOffset: 0, children: /* @__PURE__ */ jsxs3(
+                DropdownMenu2.Item,
+                {
+                  onClick: () => {
+                    handleResetSystemDefault(systemDefaultView);
+                    setContextMenuOpen(null);
+                  },
+                  className: "flex items-center gap-x-2",
+                  children: [
+                    /* @__PURE__ */ jsx3(ArrowUturnLeft2, { className: "text-ui-fg-subtle" }),
+                    /* @__PURE__ */ jsx3("span", { children: "Reset to code defaults" })
+                  ]
+                }
+              ) })
+            ]
+          }
+        )
+      ] }),
+      personalViews.length > 0 && /* @__PURE__ */ jsx3("div", { className: "text-ui-fg-muted", children: "|" }),
+      personalViews.map((view) => /* @__PURE__ */ jsxs3("div", { className: "relative inline-block", children: [
+        /* @__PURE__ */ jsx3(
+          Badge2,
+          {
+            color: currentActiveView?.id === view.id ? "blue" : "grey",
+            size: "xsmall",
+            className: "cursor-pointer",
+            onClick: () => handleViewSelect(view.id),
+            onContextMenu: (e) => {
+              e.preventDefault();
+              setContextMenuPosition({ x: e.clientX, y: e.clientY });
+              setContextMenuOpen(view.id);
+            },
+            children: view.name
+          }
+        ),
+        contextMenuOpen === view.id && /* @__PURE__ */ jsxs3(
+          DropdownMenu2,
+          {
+            open: true,
+            onOpenChange: (open) => {
+              if (!open) setContextMenuOpen(null);
+            },
+            children: [
+              /* @__PURE__ */ jsx3(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsx3(
+                "div",
+                {
+                  style: {
+                    position: "fixed",
+                    left: contextMenuPosition.x,
+                    top: contextMenuPosition.y,
+                    width: 0,
+                    height: 0
+                  }
+                }
+              ) }),
+              /* @__PURE__ */ jsxs3(DropdownMenu2.Content, { align: "start", sideOffset: 0, children: [
+                /* @__PURE__ */ jsxs3(
+                  DropdownMenu2.Item,
+                  {
+                    onClick: () => {
+                      handleEditView(view);
+                      setContextMenuOpen(null);
+                    },
+                    className: "flex items-center gap-x-2",
+                    children: [
+                      /* @__PURE__ */ jsx3(PencilSquare2, { className: "text-ui-fg-subtle" }),
+                      /* @__PURE__ */ jsx3("span", { children: "Edit name" })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs3(
+                  DropdownMenu2.Item,
+                  {
+                    onClick: () => {
+                      handleDeleteView(view);
+                      setContextMenuOpen(null);
+                    },
+                    className: "flex items-center gap-x-2 text-ui-fg-error",
+                    children: [
+                      /* @__PURE__ */ jsx3(Trash2, {}),
+                      /* @__PURE__ */ jsx3("span", { children: "Delete" })
+                    ]
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ] }, view.id))
+    ] }),
+    saveDialogOpen && /* @__PURE__ */ jsx3(
+      SaveViewDialog,
+      {
+        entity,
+        currentColumns,
+        currentConfiguration,
+        editingView,
+        onClose: () => {
+          setSaveDialogOpen(false);
+          setEditingView(null);
+        },
+        onSaved: async (newView) => {
+          setSaveDialogOpen(false);
+          setEditingView(null);
+          toast3.success(`View "${newView.name}" saved successfully`);
+        }
+      }
+    )
+  ] });
+};
+
+// src/components/data-table/data-table.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var DataTable = ({
+  data = [],
+  columns,
+  filters,
+  commands,
+  action,
+  actions,
+  actionMenu,
+  getRowId,
+  rowCount = 0,
+  enablePagination = true,
+  enableSearch = true,
+  autoFocusSearch = false,
+  enableFilterMenu,
+  rowHref,
+  heading,
+  headingLevel = "h1",
+  subHeading,
+  prefix,
+  pageSize = 10,
+  emptyState,
+  rowSelection,
+  isLoading = false,
+  layout = "auto",
+  enableColumnVisibility = false,
+  initialColumnVisibility = {},
+  onColumnVisibilityChange,
+  columnOrder,
+  onColumnOrderChange,
+  enableViewSelector = false,
+  entity,
+  currentColumns,
+  filterBarContent
+}) => {
+  const { t } = useTranslation();
+  const isViewConfigEnabled = useFeatureFlag("view_configurations");
+  const effectiveEnableColumnVisibility = isViewConfigEnabled && enableColumnVisibility;
+  const effectiveEnableViewSelector = isViewConfigEnabled && enableViewSelector;
+  const enableFiltering = filters && filters.length > 0;
+  const showFilterMenu = enableFilterMenu !== void 0 ? enableFilterMenu : enableFiltering;
+  const enableCommands = commands && commands.length > 0;
+  const enableSorting = columns.some((column) => column.enableSorting);
+  const [columnVisibility, setColumnVisibility] = React4.useState(initialColumnVisibility);
+  React4.useEffect(() => {
+    const currentKeys = Object.keys(columnVisibility).sort();
+    const newKeys = Object.keys(initialColumnVisibility).sort();
+    const hasChanged = currentKeys.length !== newKeys.length || currentKeys.some((key, index) => key !== newKeys[index]) || Object.entries(initialColumnVisibility).some(
+      ([key, value]) => columnVisibility[key] !== value
+    );
+    if (hasChanged) {
+      setColumnVisibility(initialColumnVisibility);
+    }
+  }, [initialColumnVisibility]);
+  const handleColumnVisibilityChange = React4.useCallback(
+    (visibility) => {
+      setColumnVisibility(visibility);
+      onColumnVisibilityChange?.(visibility);
+    },
+    [onColumnVisibilityChange]
+  );
+  const filterIds = useMemo2(() => filters?.map((f) => f.id) ?? [], [filters]);
+  const prefixedFilterIds = filterIds.map((id) => getQueryParamKey(id, prefix));
+  const { offset, order, q, ...filterParams } = useQueryParams(
+    [
+      ...filterIds,
+      ...enableSorting ? ["order"] : [],
+      ...enableSearch ? ["q"] : [],
+      ...enablePagination ? ["offset"] : []
+    ],
+    prefix
+  );
+  const [_, setSearchParams] = useSearchParams();
+  const search = useMemo2(() => {
+    return q ?? "";
+  }, [q]);
+  const handleSearchChange = (value) => {
+    setSearchParams((prev) => {
+      if (value) {
+        prev.set(getQueryParamKey("q", prefix), value);
+      } else {
+        prev.delete(getQueryParamKey("q", prefix));
+      }
+      return prev;
+    });
+  };
+  const pagination = useMemo2(() => {
+    return offset ? parsePaginationState(offset, pageSize) : { pageIndex: 0, pageSize };
+  }, [offset, pageSize]);
+  const handlePaginationChange = (value) => {
+    setSearchParams((prev) => {
+      if (value.pageIndex === 0) {
+        prev.delete(getQueryParamKey("offset", prefix));
+      } else {
+        prev.set(
+          getQueryParamKey("offset", prefix),
+          transformPaginationState(value).toString()
+        );
+      }
+      return prev;
+    });
+  };
+  const filtering = useMemo2(
+    () => parseFilterState(filterIds, filterParams),
+    [filterIds, filterParams]
+  );
+  const handleFilteringChange = (value) => {
+    setSearchParams((prev) => {
+      Array.from(prev.keys()).forEach((key) => {
+        if (prefixedFilterIds.includes(key)) {
+          const unprefixedKey = prefix ? key.replace(`${prefix}_`, "") : key;
+          if (!(unprefixedKey in value)) {
+            prev.delete(key);
+          }
+        }
+      });
+      Object.entries(value).forEach(([key, filter]) => {
+        const prefixedKey = getQueryParamKey(key, prefix);
+        if (filter !== void 0) {
+          prev.set(prefixedKey, JSON.stringify(filter));
+        } else {
+          prev.delete(prefixedKey);
+        }
+      });
+      return prev;
+    });
+  };
+  const sorting = useMemo2(() => {
+    return order ? parseSortingState(order) : null;
+  }, [order]);
+  const currentConfiguration = useMemo2(
+    () => ({
+      filters: filtering,
+      sorting,
+      search
+    }),
+    [filtering, sorting, search]
+  );
+  const handleSortingChange = (value) => {
+    setSearchParams((prev) => {
+      if (value) {
+        const valueToStore = transformSortingState(value);
+        prev.set(getQueryParamKey("order", prefix), valueToStore);
+      } else {
+        prev.delete(getQueryParamKey("order", prefix));
+      }
+      return prev;
+    });
+  };
+  const { pagination: paginationTranslations, toolbar: toolbarTranslations } = useDataTableTranslations();
+  const navigate = useNavigate();
+  const onRowClick = useCallback(
+    (event, row) => {
+      if (!rowHref) {
+        return;
+      }
+      const href = rowHref(row);
+      const basePath = __BASE__ || "/";
+      const hrefWithBasePath = `${basePath === "/" ? "" : basePath}${href}`;
+      if (event.metaKey || event.ctrlKey || event.button === 1) {
+        window.open(hrefWithBasePath, "_blank", "noreferrer");
+        return;
+      }
+      if (event.shiftKey) {
+        window.open(hrefWithBasePath, void 0, "noreferrer");
+        return;
+      }
+      navigate(href);
+    },
+    [navigate, rowHref]
+  );
+  const instance = useDataTable({
+    data,
+    columns,
+    filters,
+    commands,
+    rowCount,
+    getRowId,
+    onRowClick: rowHref ? onRowClick : void 0,
+    pagination: enablePagination ? {
+      state: pagination,
+      onPaginationChange: handlePaginationChange
+    } : void 0,
+    filtering: enableFiltering ? {
+      state: filtering,
+      onFilteringChange: handleFilteringChange
+    } : void 0,
+    sorting: enableSorting ? {
+      state: sorting,
+      onSortingChange: handleSortingChange
+    } : void 0,
+    search: enableSearch ? {
+      state: search,
+      onSearchChange: handleSearchChange
+    } : void 0,
+    rowSelection,
+    isLoading,
+    columnVisibility: effectiveEnableColumnVisibility ? {
+      state: columnVisibility,
+      onColumnVisibilityChange: handleColumnVisibilityChange
+    } : void 0,
+    columnOrder: effectiveEnableColumnVisibility && columnOrder && onColumnOrderChange ? {
+      state: columnOrder,
+      onColumnOrderChange
+    } : void 0
+  });
+  const shouldRenderHeading = heading || subHeading;
+  return /* @__PURE__ */ jsxs4(
+    UiDataTable,
+    {
+      instance,
+      className: layout === "fill" ? "h-full [&_tr]:last-of-type:!border-b" : void 0,
+      children: [
+        /* @__PURE__ */ jsx4(
+          UiDataTable.Toolbar,
+          {
+            className: "flex flex-col items-start justify-between gap-2 md:flex-row md:items-center",
+            translations: toolbarTranslations,
+            filterBarContent,
+            children: /* @__PURE__ */ jsxs4("div", { className: "flex w-full items-center justify-between gap-2", children: [
+              /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-x-4", children: [
+                shouldRenderHeading && /* @__PURE__ */ jsxs4("div", { children: [
+                  heading && /* @__PURE__ */ jsx4(Heading2, { level: headingLevel, children: heading }),
+                  subHeading && /* @__PURE__ */ jsx4(Text2, { size: "small", className: "text-ui-fg-subtle", children: subHeading })
+                ] }),
+                effectiveEnableViewSelector && entity && /* @__PURE__ */ jsx4(
+                  ViewPills,
+                  {
+                    entity,
+                    currentColumns,
+                    currentConfiguration
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-x-2", children: [
+                showFilterMenu && /* @__PURE__ */ jsx4(UiDataTable.FilterMenu, {}),
+                enableSorting && /* @__PURE__ */ jsx4(UiDataTable.SortingMenu, {}),
+                enableSearch && /* @__PURE__ */ jsx4("div", { className: "w-full md:w-auto", children: /* @__PURE__ */ jsx4(
+                  UiDataTable.Search,
+                  {
+                    placeholder: t("filters.searchLabel"),
+                    autoFocus: autoFocusSearch
+                  }
+                ) }),
+                actionMenu && /* @__PURE__ */ jsx4(ActionMenu, { variant: "primary", ...actionMenu }),
+                actions && actions.length > 0 && /* @__PURE__ */ jsx4(DataTableActions, { actions }),
+                !actions && action && /* @__PURE__ */ jsx4(DataTableAction, { ...action })
+              ] })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx4(UiDataTable.Table, { emptyState }),
+        enablePagination && /* @__PURE__ */ jsx4(UiDataTable.Pagination, { translations: paginationTranslations }),
+        enableCommands && /* @__PURE__ */ jsx4(
+          UiDataTable.CommandBar,
+          {
+            selectedLabel: (count) => `${count} selected`
+          }
+        )
+      ]
+    }
+  );
+};
+function transformSortingState(value) {
+  return value.desc ? `-${value.id}` : value.id;
+}
+function parseSortingState(value) {
+  return value.startsWith("-") ? { id: value.slice(1), desc: true } : { id: value, desc: false };
+}
+function transformPaginationState(value) {
+  return value.pageIndex * value.pageSize;
+}
+function parsePaginationState(value, pageSize) {
+  const offset = parseInt(value);
+  return {
+    pageIndex: Math.floor(offset / pageSize),
+    pageSize
+  };
+}
+function parseFilterState(filterIds, value) {
+  if (!value) {
+    return {};
+  }
+  const filters = {};
+  for (const id of filterIds) {
+    const filterValue = value[id];
+    if (filterValue !== void 0) {
+      filters[id] = JSON.parse(filterValue);
+    }
+  }
+  return filters;
+}
+function getQueryParamKey(key, prefix) {
+  return prefix ? `${prefix}_${key}` : key;
+}
+var useDataTableTranslations = () => {
+  const { t } = useTranslation();
+  const paginationTranslations = {
+    of: t("general.of"),
+    results: t("general.results"),
+    pages: t("general.pages"),
+    prev: t("general.prev"),
+    next: t("general.next")
+  };
+  const toolbarTranslations = {
+    clearAll: t("actions.clearAll"),
+    sort: t("filters.sortLabel"),
+    columns: "Columns"
+  };
+  return {
+    pagination: paginationTranslations,
+    toolbar: toolbarTranslations
+  };
+};
+var DataTableAction = ({
+  label,
+  disabled,
+  ...props
+}) => {
+  const buttonProps = {
+    size: "small",
+    disabled: disabled ?? false,
+    type: "button",
+    variant: "secondary"
+  };
+  if ("to" in props) {
+    return /* @__PURE__ */ jsx4(Button3, { ...buttonProps, asChild: true, children: /* @__PURE__ */ jsx4(Link, { to: props.to, children: label }) });
+  }
+  return /* @__PURE__ */ jsx4(Button3, { ...buttonProps, onClick: props.onClick, children: label });
+};
+var DataTableActions = ({ actions }) => {
+  return /* @__PURE__ */ jsx4("div", { className: "flex items-center gap-x-2", children: actions.map((action, index) => /* @__PURE__ */ jsx4(DataTableAction, { ...action }, index)) });
+};
+
+// src/components/data-table/helpers/general/use-data-table-date-columns.tsx
+import {
+  createDataTableColumnHelper,
+  Tooltip as Tooltip2
+} from "@acmekit/ui";
+import { useMemo as useMemo3 } from "react";
+import { useTranslation as useTranslation2 } from "react-i18next";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var columnHelper = createDataTableColumnHelper();
+var useDataTableDateColumns = () => {
+  const { t } = useTranslation2();
+  const { getFullDate } = useDate();
+  return useMemo3(() => {
+    return [
+      columnHelper.accessor("created_at", {
+        header: t("fields.createdAt"),
+        cell: ({ row }) => {
+          return /* @__PURE__ */ jsx5(
+            Tooltip2,
+            {
+              content: getFullDate({
+                date: row.original.created_at,
+                includeTime: true
+              }),
+              children: /* @__PURE__ */ jsx5("span", { children: getFullDate({ date: row.original.created_at }) })
+            }
+          );
+        },
+        enableSorting: true,
+        sortAscLabel: t("filters.sorting.dateAsc"),
+        sortDescLabel: t("filters.sorting.dateDesc")
+      }),
+      columnHelper.accessor("updated_at", {
+        header: t("fields.updatedAt"),
+        cell: ({ row }) => {
+          return /* @__PURE__ */ jsx5(
+            Tooltip2,
+            {
+              content: getFullDate({
+                date: row.original.updated_at,
+                includeTime: true
+              }),
+              children: /* @__PURE__ */ jsx5("span", { children: getFullDate({ date: row.original.updated_at }) })
+            }
+          );
+        },
+        enableSorting: true,
+        sortAscLabel: t("filters.sorting.dateAsc"),
+        sortDescLabel: t("filters.sorting.dateDesc")
+      })
+    ];
+  }, [t, getFullDate]);
+};
+
+// src/components/data-table/helpers/general/use-data-table-date-filters.tsx
+import { createDataTableFilterHelper } from "@acmekit/ui";
+import { subDays, subMonths } from "date-fns";
+import { useMemo as useMemo4 } from "react";
+import { useTranslation as useTranslation3 } from "react-i18next";
+var filterHelper = createDataTableFilterHelper();
+var useDateFilterOptions = () => {
+  const { t } = useTranslation3();
+  const today = useMemo4(() => {
+    const date = /* @__PURE__ */ new Date();
+    date.setHours(0, 0, 0, 0);
+    return date;
+  }, []);
+  return useMemo4(() => {
+    return [
+      {
+        label: t("filters.date.today"),
+        value: {
+          $gte: today.toISOString()
+        }
+      },
+      {
+        label: t("filters.date.lastSevenDays"),
+        value: {
+          $gte: subDays(today, 7).toISOString()
+          // 7 days ago
+        }
+      },
+      {
+        label: t("filters.date.lastThirtyDays"),
+        value: {
+          $gte: subDays(today, 30).toISOString()
+          // 30 days ago
+        }
+      },
+      {
+        label: t("filters.date.lastNinetyDays"),
+        value: {
+          $gte: subDays(today, 90).toISOString()
+          // 90 days ago
+        }
+      },
+      {
+        label: t("filters.date.lastTwelveMonths"),
+        value: {
+          $gte: subMonths(today, 12).toISOString()
+          // 12 months ago
+        }
+      }
+    ];
+  }, [today, t]);
+};
+var useDataTableDateFilters = (disableRangeOption) => {
+  const { t } = useTranslation3();
+  const { getFullDate } = useDate();
+  const dateFilterOptions = useDateFilterOptions();
+  const rangeOptions = useMemo4(() => {
+    if (disableRangeOption) {
+      return {
+        disableRangeOption: true
+      };
+    }
+    return {
+      rangeOptionStartLabel: t("filters.date.starting"),
+      rangeOptionEndLabel: t("filters.date.ending"),
+      rangeOptionLabel: t("filters.date.custom"),
+      options: dateFilterOptions
+    };
+  }, [disableRangeOption, t, dateFilterOptions]);
+  return useMemo4(() => {
+    return [
+      filterHelper.accessor("created_at", {
+        type: "date",
+        label: t("fields.createdAt"),
+        format: "date",
+        formatDateValue: (date) => getFullDate({ date }),
+        options: dateFilterOptions,
+        ...rangeOptions
+      }),
+      filterHelper.accessor("updated_at", {
+        type: "date",
+        label: t("fields.updatedAt"),
+        format: "date",
+        formatDateValue: (date) => getFullDate({ date }),
+        options: dateFilterOptions,
+        ...rangeOptions
+      })
+    ];
+  }, [t, dateFilterOptions, getFullDate, rangeOptions]);
+};
+
+// src/routes/users/user-list/components/user-list-table/user-list-table.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var PAGE_SIZE = 20;
+var UserListTable = () => {
+  const { q, order, offset } = useQueryParams(["q", "order", "offset"]);
+  const { users, count, isPending, isError, error } = useUsers(
+    {
+      q,
+      order,
+      offset: offset ? parseInt(offset) : 0,
+      limit: PAGE_SIZE
+    },
+    {
+      placeholderData: keepPreviousData
+    }
+  );
+  const columns = useColumns();
+  const filters = useFilters();
+  const { t } = useTranslation4();
+  if (isError) {
+    throw error;
+  }
+  return /* @__PURE__ */ jsx6(Container, { className: "divide-y p-0", children: /* @__PURE__ */ jsx6(
+    DataTable,
+    {
+      data: users,
+      columns,
+      filters,
+      getRowId: (row) => row.id,
+      rowCount: count,
+      pageSize: PAGE_SIZE,
+      heading: t("users.domain"),
+      rowHref: (row) => `${row.id}`,
+      isLoading: isPending,
+      action: {
+        label: t("users.invite"),
+        to: "invite"
+      },
+      emptyState: {
+        empty: {
+          heading: t("users.list.empty.heading"),
+          description: t("users.list.empty.description")
+        },
+        filtered: {
+          heading: t("users.list.filtered.heading"),
+          description: t("users.list.filtered.description")
+        }
+      }
+    }
+  ) });
+};
+var columnHelper2 = createDataTableColumnHelper2();
+var useColumns = () => {
+  const { t } = useTranslation4();
+  const navigate = useNavigate2();
+  const dateColumns = useDataTableDateColumns();
+  return useMemo5(
+    () => [
+      columnHelper2.accessor("email", {
+        header: t("fields.email"),
+        cell: ({ row }) => {
+          return row.original.email;
+        },
+        enableSorting: true,
+        sortAscLabel: t("filters.sorting.alphabeticallyAsc"),
+        sortDescLabel: t("filters.sorting.alphabeticallyDesc")
+      }),
+      columnHelper2.accessor("first_name", {
+        header: t("fields.firstName"),
+        cell: ({ row }) => {
+          return row.original.first_name || "-";
+        },
+        enableSorting: true,
+        sortAscLabel: t("filters.sorting.alphabeticallyAsc"),
+        sortDescLabel: t("filters.sorting.alphabeticallyDesc")
+      }),
+      columnHelper2.accessor("last_name", {
+        header: t("fields.lastName"),
+        cell: ({ row }) => {
+          return row.original.last_name || "-";
+        },
+        enableSorting: true,
+        sortAscLabel: t("filters.sorting.alphabeticallyAsc"),
+        sortDescLabel: t("filters.sorting.alphabeticallyDesc")
+      }),
+      ...dateColumns,
+      columnHelper2.action({
+        actions: [
+          {
+            label: t("actions.edit"),
+            icon: /* @__PURE__ */ jsx6(PencilSquare3, {}),
+            onClick: (ctx) => {
+              navigate(`${ctx.row.original.id}/edit`);
+            }
+          }
+        ]
+      })
+    ],
+    [t, navigate, dateColumns]
+  );
+};
+var useFilters = () => {
+  const dateFilters = useDataTableDateFilters();
+  return useMemo5(() => {
+    return dateFilters;
+  }, [dateFilters]);
+};
+
+// src/routes/users/user-list/user-list.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var UserList = () => {
+  const { getWidgets } = useExtension();
+  return /* @__PURE__ */ jsx7(
+    SingleColumnPage,
+    {
+      widgets: {
+        after: getWidgets("user.list.after"),
+        before: getWidgets("user.list.before")
+      },
+      children: /* @__PURE__ */ jsx7(UserListTable, {})
+    }
+  );
+};
+export {
+  UserList as Component
+};