betterstart-cli 0.0.12 → 0.0.14

package/dist/assets/adapters/next/templates/init/pages/audit-log/audit-log-page.tsx

@@ -0,0 +1,14 @@
+import { requireRole, UserRole } from '@admin/auth/middleware'
+import * as React from 'react'
+import { AuditLogPageContent } from './audit-log-page-content'
+import { AuditLogPageSkeleton } from './audit-log-page-skeleton'
+
+export default async function AuditLogPage() {
+  await requireRole([UserRole.ADMIN])
+
+  return (
+    <React.Suspense fallback={<AuditLogPageSkeleton />}>
+      <AuditLogPageContent />
+    </React.Suspense>
+  )
+}

package/dist/assets/adapters/next/templates/init/pages/users/users-page-content.tsx

@@ -1,12 +1,83 @@
 'use client'
 
+import { EntityFiltersBar, type FilterDef } from '@admin/components/shared/entity-filters-bar'
 import { PageHeader } from '@admin/components/shared/page-header'
+import { UserRole } from '@admin/types/auth'
+import { useIsFetching } from '@tanstack/react-query'
+import { parseAsInteger, parseAsString, useQueryState, useQueryStates } from 'nuqs'
 import React from 'react'
 import { columns } from './columns'
 import { CreateUserDialog } from './create-user-dialog'
 import { UsersTable } from './users-table'
 
 export function UsersPageContent() {
+  const isSearchFetching = useIsFetching({ queryKey: ['users'] }) > 0
+  const [search, setSearch] = useQueryState('q', parseAsString.withDefault(''))
+  const [, setPageIndex] = useQueryState('page', parseAsInteger.withDefault(0))
+  const [{ role, status }, setFilters] = useQueryStates({
+    role: parseAsString.withDefault(''),
+    status: parseAsString.withDefault('')
+  })
+  const activeFilterCount = [search, role, status].filter(Boolean).length
+  const filters = [
+    {
+      key: 'status',
+      label: 'Status',
+      type: 'select',
+      value: status,
+      options: [
+        { label: 'Verified', value: 'verified' },
+        { label: 'Unverified', value: 'unverified' }
+      ]
+    },
+    {
+      key: 'role',
+      label: 'Role',
+      type: 'select',
+      value: role,
+      options: [
+        { label: 'Admin', value: UserRole.ADMIN },
+        { label: 'Editor', value: UserRole.EDITOR },
+        { label: 'Member', value: UserRole.MEMBER }
+      ]
+    }
+  ] satisfies FilterDef[]
+
+  const handleSearch = React.useCallback(
+    (value: string | null) => {
+      React.startTransition(() => {
+        void setPageIndex(0)
+        void setSearch(value)
+      })
+    },
+    [setSearch, setPageIndex]
+  )
+
+  const handleFilterChange = React.useCallback(
+    (updates: Record<string, string | null>) => {
+      const nextFilters: { role?: string | null; status?: string | null } = {}
+      if ('role' in updates) nextFilters.role = updates.role
+      if ('status' in updates) nextFilters.status = updates.status
+
+      React.startTransition(() => {
+        void setPageIndex(0)
+        void setFilters(nextFilters)
+      })
+    },
+    [setFilters, setPageIndex]
+  )
+
+  const handleClearAll = React.useCallback(() => {
+    React.startTransition(() => {
+      void setPageIndex(0)
+      void setSearch(null)
+      void setFilters({
+        role: null,
+        status: null
+      })
+    })
+  }, [setFilters, setSearch, setPageIndex])
+
   return (
     <React.Fragment>
       <PageHeader
@@ -17,8 +88,18 @@ export function UsersPageContent() {
           </div>
         }
       />
-      <main className="space-y-4 pt-4 pb-6 px-4">
-        <UsersTable columns={columns} />
+      <EntityFiltersBar
+        filters={filters}
+        activeFilterCount={activeFilterCount}
+        onFilterChange={handleFilterChange}
+        onClearAll={handleClearAll}
+        search={search}
+        searchPlaceholder="Search users..."
+        isPending={isSearchFetching}
+        onSearch={handleSearch}
+      />
+      <main className="space-y-4 px-4 pb-4 flex-1">
+        <UsersTable columns={columns} search={search} status={status} role={role} />
       </main>
     </React.Fragment>
   )

package/dist/assets/adapters/next/templates/init/pages/users/users-table.tsx

@@ -1,64 +1,102 @@
 'use client'
 
 import { authClient } from '@admin/auth/client'
+import {
+  DataGrid,
+  DataGridBody,
+  DataGridCell,
+  DataGridHead,
+  DataGridHeader,
+  DataGridRow
+} from '@admin/components/shared/data-table/data-grid'
 import { DataTablePagination } from '@admin/components/shared/data-table/data-table-pagination'
 import { Card, CardContent } from '@admin/components/ui/card'
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow
-} from '@admin/components/ui/table'
 import { useTableUtils } from '@admin/hooks/use-table-utils'
 import { useUsers } from '@admin/hooks/use-users'
 import type { User } from '@admin/types/auth'
 import { cn } from '@admin/utils/shared/cn'
-import {
-  type ColumnDef,
-  type ColumnFiltersState,
-  flexRender,
-  getCoreRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  type SortingState,
-  useReactTable
-} from '@tanstack/react-table'
+import { getUsersPage } from '@admin/utils/user/user'
+import { type ColumnDef, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table'
 import { GripVertical } from 'lucide-react'
-import { parseAsInteger, useQueryState } from 'nuqs'
+import { parseAsInteger, parseAsString, useQueryStates } from 'nuqs'
 import * as React from 'react'
 
-interface UsersTableProps<TValue> {
+interface UsersTableProps<TValue> extends React.HTMLAttributes<HTMLDivElement> {
   columns: ColumnDef<User, TValue>[]
+  role?: string
+  search?: string
+  status?: string
 }
 
-export function UsersTable<TValue>({ columns }: UsersTableProps<TValue>) {
+export function UsersTable<TValue>({
+  columns,
+  role,
+  search,
+  status,
+  className
+}: UsersTableProps<TValue>) {
+  const defaultPageSize = 20
   const { data: session } = authClient.useSession()
   const { data, error, isPending } = useUsers()
-  const [sorting, setSorting] = React.useState<SortingState>([])
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([])
-  const [pageIndex, setPageIndex] = useQueryState('page', parseAsInteger.withDefault(0))
-  const [pageSize, setPageSize] = useQueryState('size', parseAsInteger.withDefault(20))
-  const effectivePageSize = pageSize === -1 ? Number.MAX_SAFE_INTEGER : pageSize
+  const [{ dir: sortDir, page: pageIndex, size: pageSize, sort: sortField }, setTableQuery] =
+    useQueryStates({
+      dir: parseAsString.withDefault(''),
+      page: parseAsInteger.withDefault(0),
+      size: parseAsInteger.withDefault(defaultPageSize),
+      sort: parseAsString.withDefault('')
+    })
+  const safePageIndex = Number.isFinite(pageIndex) && pageIndex > 0 ? pageIndex : 0
+  const safePageSize =
+    pageSize === -1 || (Number.isFinite(pageSize) && pageSize > 0) ? pageSize : defaultPageSize
+  const tablePage = React.useMemo(
+    () =>
+      getUsersPage(data?.users ?? [], {
+        pageIndex: safePageIndex,
+        pageSize: safePageSize,
+        role,
+        search,
+        sortDir: sortDir === 'desc' ? 'desc' : sortDir === 'asc' ? 'asc' : undefined,
+        sortField: sortField || undefined,
+        status
+      }),
+    [data?.users, role, safePageIndex, safePageSize, search, sortDir, sortField, status]
+  )
+  const tableData = tablePage.users
+  const totalRows = tablePage.total
+  const effectivePageSize = safePageSize === -1 ? totalRows : safePageSize
+  const pageCount = effectivePageSize > 0 ? Math.ceil(totalRows / effectivePageSize) : 1
+  const shouldShowPagination = totalRows > defaultPageSize
   const {
     columnSizing,
     handleColumnSizingChange,
     handlePaginationChange,
+    handleSortingChange,
     hoveredColumnId,
     registerTable,
     resetColumnSizingToContainer,
+    sorting,
     setHoveredColumnId,
     tableContainerRef
   } = useTableUtils<User>({
-    pageIndex,
+    pageIndex: safePageIndex,
     pageSize: effectivePageSize,
-    setPageIndex
+    setPageIndex: (nextPageIndex) => setTableQuery({ page: nextPageIndex }),
+    setSortingParams: ({
+      pageIndex: nextPageIndex,
+      sortDir: nextSortDir,
+      sortField: nextSortField
+    }) =>
+      setTableQuery({
+        dir: nextSortDir,
+        page: nextPageIndex,
+        sort: nextSortField
+      }),
+    sortDir,
+    sortField
   })
 
   const table = useReactTable({
-    data: data?.users ?? [],
+    data: tableData,
     columns,
     columnResizeMode: 'onChange',
     defaultColumn: {
@@ -66,11 +104,11 @@ export function UsersTable<TValue>({ columns }: UsersTableProps<TValue>) {
       size: 220
     },
     getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    onSortingChange: setSorting,
-    getSortedRowModel: getSortedRowModel(),
-    onColumnFiltersChange: setColumnFilters,
-    getFilteredRowModel: getFilteredRowModel(),
+    manualPagination: true,
+    manualSorting: true,
+    pageCount,
+    rowCount: totalRows,
+    onSortingChange: handleSortingChange,
     onColumnSizingChange: handleColumnSizingChange,
     onPaginationChange: handlePaginationChange,
     meta: {
@@ -86,33 +124,31 @@ export function UsersTable<TValue>({ columns }: UsersTableProps<TValue>) {
     },
     state: {
       sorting,
-      columnFilters,
       columnSizing,
       pagination: {
-        pageIndex,
+        pageIndex: safePageIndex,
         pageSize: effectivePageSize
       }
     }
   })
   registerTable(table)
+  const gridTemplateColumns = table
+    .getVisibleLeafColumns()
+    .map((column) => `${column.getSize()}px`)
+    .join(' ')
 
   return (
-    <div className="flex min-h-[calc(100svh-184px)] flex-col gap-6 pt-px pb-2">
+    <div className={cn('flex flex-col gap-6 pt-px pb-2 h-full', className)}>
       <Card className="min-h-0 flex-1 p-0">
         <CardContent ref={tableContainerRef} className="flex min-h-0 flex-1 flex-col p-0">
-          <Table
+          <DataGrid
             containerClassName="min-h-0 flex-1"
-            className="table-fixed"
+            gridTemplateColumns={gridTemplateColumns}
             style={{ width: table.getTotalSize() }}
           >
-            <colgroup>
-              {table.getVisibleLeafColumns().map((column) => (
-                <col key={column.id} style={{ width: column.getSize() }} />
-              ))}
-            </colgroup>
-            <TableHeader>
+            <DataGridHeader>
               {table.getHeaderGroups().map((headerGroup) => (
-                <TableRow key={headerGroup.id}>
+                <DataGridRow key={headerGroup.id}>
                   {headerGroup.headers.map((header, headerIndex) => {
                     const resizeLabel =
                       typeof header.column.columnDef.header === 'string'
@@ -122,7 +158,7 @@ export function UsersTable<TValue>({ columns }: UsersTableProps<TValue>) {
                     const canResizeColumn =
                       header.column.getCanResize() && nextHeader?.column.getCanResize() === true
                     return (
-                      <TableHead
+                      <DataGridHead
                         key={header.id}
                         className="group/resize-header relative overflow-hidden"
                         data-column-id={header.column.id}
@@ -132,7 +168,6 @@ export function UsersTable<TValue>({ columns }: UsersTableProps<TValue>) {
                             current === header.column.id ? null : current
                           )
                         }
-                        style={{ width: header.getSize() }}
                       >
                         {header.isPlaceholder
                           ? null
@@ -159,30 +194,36 @@ export function UsersTable<TValue>({ columns }: UsersTableProps<TValue>) {
                             />
                           </button>
                         ) : null}
-                      </TableHead>
+                      </DataGridHead>
                     )
                   })}
-                </TableRow>
+                </DataGridRow>
               ))}
-            </TableHeader>
-            <TableBody>
+            </DataGridHeader>
+            <DataGridBody>
               {isPending ? (
-                <TableRow>
-                  <TableCell colSpan={columns.length} className="h-24 text-center">
+                <DataGridRow>
+                  <DataGridCell
+                    className="flex h-24 items-center justify-center text-center"
+                    style={{ gridColumn: '1 / -1' }}
+                  >
                     <div className="text-muted-foreground">Loading users...</div>
-                  </TableCell>
-                </TableRow>
+                  </DataGridCell>
+                </DataGridRow>
               ) : error ? (
-                <TableRow>
-                  <TableCell colSpan={columns.length} className="h-24 text-center">
+                <DataGridRow>
+                  <DataGridCell
+                    className="flex h-24 items-center justify-center text-center"
+                    style={{ gridColumn: '1 / -1' }}
+                  >
                     <div className="text-destructive">Error: {error.message}</div>
-                  </TableCell>
-                </TableRow>
+                  </DataGridCell>
+                </DataGridRow>
               ) : table.getRowModel().rows?.length ? (
                 table.getRowModel().rows.map((row) => (
-                  <TableRow key={row.id}>
+                  <DataGridRow key={row.id} className="hover:bg-muted/50">
                     {row.getVisibleCells().map((cell) => (
-                      <TableCell
+                      <DataGridCell
                         key={cell.id}
                         data-column-id={cell.column.id}
                         onMouseEnter={() => setHoveredColumnId(cell.column.id)}
@@ -191,31 +232,38 @@ export function UsersTable<TValue>({ columns }: UsersTableProps<TValue>) {
                             current === cell.column.id ? null : current
                           )
                         }
-                        style={{ width: cell.column.getSize() }}
                       >
                         {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                      </TableCell>
+                      </DataGridCell>
                     ))}
-                  </TableRow>
+                  </DataGridRow>
                 ))
               ) : (
-                <TableRow>
-                  <TableCell colSpan={columns.length} className="h-24 text-center">
+                <DataGridRow>
+                  <DataGridCell
+                    className="flex h-24 items-center justify-center text-center"
+                    style={{ gridColumn: '1 / -1' }}
+                  >
                     No users found.
-                  </TableCell>
-                </TableRow>
+                  </DataGridCell>
+                </DataGridRow>
               )}
-            </TableBody>
-          </Table>
+            </DataGridBody>
+          </DataGrid>
         </CardContent>
       </Card>
 
-      <DataTablePagination
-        table={table}
-        paginationMode="uncontrolled"
-        pageSize={pageSize}
-        setPageSize={setPageSize}
-      />
+      {shouldShowPagination ? (
+        <DataTablePagination
+          table={table}
+          paginationMode="controlled"
+          pageSize={safePageSize}
+          pageIndex={safePageIndex}
+          pageCount={pageCount}
+          setPageIndex={(nextPageIndex) => setTableQuery({ page: nextPageIndex })}
+          setPageSize={(nextPageSize) => setTableQuery({ page: 0, size: nextPageSize })}
+        />
+      ) : null}
     </div>
   )
 }

package/dist/assets/adapters/next/templates/init/utils/audit/audit.ts

@@ -0,0 +1,54 @@
+const REDACTED_FIELD_PATTERNS = [/password/i, /token/i, /secret/i, /key/i]
+const SYSTEM_FIELD_NAMES = new Set([
+  'id',
+  'createdAt',
+  'updatedAt',
+  'createdBy',
+  'updatedBy',
+  'createdByUser',
+  'updatedByUser'
+])
+
+function shouldTrackField(fieldName: string): boolean {
+  if (SYSTEM_FIELD_NAMES.has(fieldName)) return false
+  return !REDACTED_FIELD_PATTERNS.some((pattern) => pattern.test(fieldName))
+}
+
+function normalizeComparableValue(value: unknown): string {
+  if (value instanceof Date) return value.toISOString()
+  if (Array.isArray(value)) {
+    return JSON.stringify(value.map((item) => normalizeComparableValue(item)))
+  }
+  if (value && typeof value === 'object') {
+    const entries = Object.entries(value as Record<string, unknown>)
+      .sort(([a], [b]) => a.localeCompare(b))
+      .map(([key, item]) => [key, normalizeComparableValue(item)])
+    return JSON.stringify(entries)
+  }
+
+  return JSON.stringify(value ?? null)
+}
+
+export function getTouchedFieldNames(input: Record<string, unknown> | null | undefined): string[] {
+  if (!input) return []
+
+  return Object.keys(input)
+    .filter(shouldTrackField)
+    .sort((a, b) => a.localeCompare(b))
+}
+
+export function getChangedFieldNames(
+  previous: Record<string, unknown> | null | undefined,
+  next: Record<string, unknown> | null | undefined
+): string[] {
+  if (!next) return []
+
+  return Object.keys(next)
+    .filter(shouldTrackField)
+    .filter((fieldName) => {
+      const previousValue = previous?.[fieldName]
+      const nextValue = next[fieldName]
+      return normalizeComparableValue(previousValue) !== normalizeComparableValue(nextValue)
+    })
+    .sort((a, b) => a.localeCompare(b))
+}

package/dist/assets/adapters/next/templates/init/utils/editor/tiptap.ts

@@ -12,7 +12,6 @@ import {
   type TableRect
 } from '@tiptap/pm/tables'
 import { type Editor, findParentNodeClosestToPos, type NodeWithPos } from '@tiptap/react'
-import type { CSSProperties } from 'react'
 import {
   type ContentEditorInlineMathDelimiter,
   type ContentEditorMathKind,
@@ -146,29 +145,6 @@ export function runSlashCommand(
   return command.run(editor)
 }
 
-export function getSlashMenuStyle(rect: DOMRect): CSSProperties {
-  const margin = 8
-  const menuWidth = 288
-  const menuMaxHeight = 320
-
-  if (typeof window === 'undefined') {
-    return {
-      left: rect.left,
-      position: 'fixed',
-      top: rect.bottom + margin
-    }
-  }
-
-  const maxLeft = Math.max(margin, window.innerWidth - menuWidth - margin)
-  const maxTop = Math.max(margin, window.innerHeight - menuMaxHeight - margin)
-
-  return {
-    left: Math.min(Math.max(margin, rect.left), maxLeft),
-    position: 'fixed',
-    top: Math.min(Math.max(margin, rect.bottom + margin), maxTop)
-  }
-}
-
 function isContentEditorTableAlignment(value: unknown): value is ContentEditorTableAlignment {
   return value === 'left' || value === 'center' || value === 'right'
 }
@@ -662,8 +638,6 @@ export function findNodePosition(props: {
     let foundNode: PMNode | null = null
 
     editor.state.doc.descendants((currentNode, pos) => {
-      // TODO: Needed?
-      // if (currentNode.type && currentNode.type.name === node!.type.name) {
       if (currentNode === node) {
         foundPos = pos
         foundNode = currentNode
@@ -808,13 +782,14 @@ export function isAllowedUri(uri: string | undefined, protocols?: ProtocolConfig
 
   return (
     !uri ||
-    uri.replace(ATTR_WHITESPACE, '').match(
-      new RegExp(
-        // eslint-disable-next-line no-useless-escape
-        `^(?:(?:${allowedProtocols.join('|')}):|[^a-z]|[a-z0-9+.-]+(?:[^a-z+.-:]|$))`,
-        'i'
+    uri
+      .replace(ATTR_WHITESPACE, '')
+      .match(
+        new RegExp(
+          `^(?:(?:${allowedProtocols.join('|')}):|[^a-z]|[a-z0-9+.-]+(?:[^a-z+.-:]|$))`,
+          'i'
+        )
       )
-    )
   )
 }
 

package/dist/assets/adapters/next/templates/init/utils/form/list-field.ts

@@ -0,0 +1,17 @@
+export function cloneDefaultValue(value: unknown): unknown {
+  if (Array.isArray(value)) return value.map(cloneDefaultValue)
+
+  if (value && typeof value === 'object') {
+    const clonedEntries = Object.entries(value as Record<string, unknown>).map(
+      ([key, childValue]) => [key, cloneDefaultValue(childValue)] as const
+    )
+    return Object.fromEntries(clonedEntries)
+  }
+
+  return value
+}
+
+export function createListItemKey(): string {
+  const randomKey = Math.random().toString(36).slice(2)
+  return globalThis.crypto?.randomUUID?.() ?? randomKey
+}

package/dist/assets/adapters/next/templates/init/utils/user/user.ts

@@ -1,3 +1,17 @@
+import type { User, UsersPage } from '@admin/types/auth'
+
+interface GetUsersPageOptions {
+  pageIndex: number
+  pageSize: number
+  role?: string
+  search?: string
+  sortDir?: 'asc' | 'desc'
+  sortField?: string
+  status?: string
+}
+
+const USER_SORT_FIELDS = new Set(['createdAt', 'email', 'emailVerified', 'role'])
+
 export function getUserInitials(nameOrEmail: string): string {
   const parts = nameOrEmail.includes('@')
     ? nameOrEmail.split('@')[0].split(/[._-]/)
@@ -9,3 +23,59 @@ export function getUserInitials(nameOrEmail: string): string {
     .map((part) => part[0].toUpperCase())
     .join('')
 }
+
+function normalizeUserFilterValue(value: string | null | undefined): string {
+  return (value ?? '').trim().toLowerCase()
+}
+
+function getUserSortValue(user: User, sortField: string): number | string {
+  if (sortField === 'createdAt') return Date.parse(user.createdAt)
+  if (sortField === 'emailVerified') return user.emailVerified ? 1 : 0
+  if (sortField === 'role') return user.role.toLowerCase()
+  return user.email.toLowerCase()
+}
+
+function compareUserSortValues(a: number | string, b: number | string): number {
+  if (typeof a === 'number' && typeof b === 'number') return a - b
+  return String(a).localeCompare(String(b))
+}
+
+export function getUsersPage(users: User[], options: GetUsersPageOptions): UsersPage {
+  const search = normalizeUserFilterValue(options.search)
+  const role = normalizeUserFilterValue(options.role)
+  const status = normalizeUserFilterValue(options.status)
+  const sortField =
+    options.sortField && USER_SORT_FIELDS.has(options.sortField) ? options.sortField : ''
+  const sortDirection = options.sortDir === 'desc' ? -1 : 1
+  const filteredUsers = users.filter((user) => {
+    const matchesSearch =
+      !search ||
+      user.email.toLowerCase().includes(search) ||
+      user.name.toLowerCase().includes(search)
+    const matchesRole = !role || user.role.toLowerCase() === role
+    const matchesStatus =
+      !status ||
+      (status === 'verified' && user.emailVerified) ||
+      (status === 'unverified' && !user.emailVerified)
+
+    return matchesSearch && matchesRole && matchesStatus
+  })
+
+  if (sortField) {
+    filteredUsers.sort((a, b) => {
+      const comparison = compareUserSortValues(
+        getUserSortValue(a, sortField),
+        getUserSortValue(b, sortField)
+      )
+
+      return comparison * sortDirection
+    })
+  }
+
+  const total = filteredUsers.length
+  const pageSize = options.pageSize === -1 ? total : Math.max(options.pageSize, 1)
+  const start = Math.max(options.pageIndex, 0) * pageSize
+  const pageUsers = pageSize > 0 ? filteredUsers.slice(start, start + pageSize) : filteredUsers
+
+  return { users: pageUsers, total }
+}

package/dist/assets/shared-assets/react-admin/custom/content-editor/horizontal-rule-button.tsx

@@ -16,7 +16,7 @@ export function HorizontalRuleButton({ editor }: { editor: Editor | null }) {
       title="Divider"
       onClick={() => editor?.chain().focus().setHorizontalRule().run()}
     >
-      <Minus className="tiptap-button-icon" />
+      <Minus />
     </Button>
   )
 }