create-appraisejs 0.3.1-alpha.0 → 0.3.1-alpha.1

package/templates/blank/scripts/sync-test-suites.ts

@@ -49,14 +49,14 @@ type DbTestSuiteWithModule = Prisma.TestSuiteGetPayload<{ include: { module: tru
  */
 function extractFeatureLevelTags(parsedFeature: ParsedFeature): string[] {
   const tags: string[] = []
-  
+
   for (const tagLine of parsedFeature.tags) {
     if (tagLine.startsWith('@')) {
       const splitTags = splitTagLine(tagLine)
       tags.push(...splitTags)
     }
   }
-  
+
   return tags
 }
 
@@ -65,17 +65,17 @@ function extractFeatureLevelTags(parsedFeature: ParsedFeature): string[] {
  */
 async function scanTestSuitesFromFilesystem(featuresDir: string): Promise<TestSuiteFromFS[]> {
   const testSuites: TestSuiteFromFS[] = []
-  
+
   console.log('📁 Scanning feature files...')
   const parsedFeatures = await scanFeatureFiles(featuresDir)
   console.log(`   Found ${parsedFeatures.length} feature file(s)`)
-  
+
   for (const parsedFeature of parsedFeatures) {
     try {
       const testSuiteName = extractTestSuiteNameFromFilename(parsedFeature.filePath)
       const modulePath = extractModulePathFromFilePath(parsedFeature.filePath, featuresDir)
       const tags = extractFeatureLevelTags(parsedFeature)
-      
+
       testSuites.push({
         name: testSuiteName,
         description: parsedFeature.featureDescription || null,
@@ -87,7 +87,7 @@ async function scanTestSuitesFromFilesystem(featuresDir: string): Promise<TestSu
       console.error(`   ❌ Error processing feature file '${parsedFeature.filePath}': ${error}`)
     }
   }
-  
+
   return testSuites
 }
 
@@ -97,13 +97,13 @@ async function scanTestSuitesFromFilesystem(featuresDir: string): Promise<TestSu
  */
 async function findTagIdsByExpressions(tagExpressions: string[]): Promise<string[]> {
   const tagIds: string[] = []
-  
+
   for (const tagExpression of tagExpressions) {
     try {
       const tag = await prisma.tag.findFirst({
         where: { tagExpression },
       })
-      
+
       if (tag) {
         tagIds.push(tag.id)
       } else {
@@ -113,7 +113,7 @@ async function findTagIdsByExpressions(tagExpressions: string[]): Promise<string
       console.error(`   ❌ Error finding tag '${tagExpression}': ${error}`)
     }
   }
-  
+
   return tagIds
 }
 
@@ -128,7 +128,10 @@ async function resolveModuleId(modulePath: string) {
   return moduleId
 }
 
-async function findExistingTestSuite(testSuite: TestSuiteFromFS, moduleId: string): Promise<ExistingTestSuite | undefined> {
+async function findExistingTestSuite(
+  testSuite: TestSuiteFromFS,
+  moduleId: string,
+): Promise<ExistingTestSuite | undefined> {
   const existingTestSuites = await prisma.testSuite.findMany({
     where: {
       moduleId,
@@ -150,7 +153,12 @@ function getSortedTagIds(existingTestSuite: ExistingTestSuite, tagIds: string[])
   }
 }
 
-function testSuiteNeedsUpdate(existingTestSuite: ExistingTestSuite, testSuite: TestSuiteFromFS, moduleId: string, tagIds: string[]) {
+function testSuiteNeedsUpdate(
+  existingTestSuite: ExistingTestSuite,
+  testSuite: TestSuiteFromFS,
+  moduleId: string,
+  tagIds: string[],
+) {
   const { currentTagIds, newTagIds } = getSortedTagIds(existingTestSuite, tagIds)
 
   return (
@@ -346,15 +354,12 @@ async function deleteOrphanedTestSuites(fsTestSuiteKeys: Set<string>, result: Sy
 /**
  * Syncs test suites from filesystem to database
  */
-async function syncTestSuitesToDatabase(
-  testSuitesFromFS: TestSuiteFromFS[],
-  result: SyncResult,
-): Promise<void> {
+async function syncTestSuitesToDatabase(testSuitesFromFS: TestSuiteFromFS[], result: SyncResult): Promise<void> {
   console.log('\n✅ Syncing test suites to database...')
-  
+
   // Track test suites from filesystem (by name + modulePath)
   const fsTestSuiteKeys = new Set<string>()
-  
+
   for (const testSuite of testSuitesFromFS) {
     try {
       await syncFilesystemTestSuite(testSuite, fsTestSuiteKeys, result)
@@ -372,69 +377,69 @@ async function syncTestSuitesToDatabase(
  * Generates and displays sync summary
  */
 async function main(): Promise<SyncResult | void> {
-    console.log('🔄 Starting test suites sync...')
-    console.log('This will scan feature files and sync test suites to database.')
-    console.log('Filesystem is the source of truth - test suites in DB but not in FS will be deleted.')
-    console.log('Note: Test cases are not synced by this script (they will be handled separately).\n')
-
-    await ensureAutomationWorkspaceReady()
-    const featuresDir = getAutomationFeaturesDir()
-    
-    // Scan test suites from filesystem
-    const testSuitesFromFS = await scanTestSuitesFromFilesystem(featuresDir)
-    
-    if (testSuitesFromFS.length === 0) {
-      console.log('\n⚠️  No feature files found. Nothing to sync.')
-      return
-    }
-    
-    console.log(`\n📋 Found ${testSuitesFromFS.length} test suite(s) from feature files:`)
-    for (const ts of testSuitesFromFS) {
-      console.log(`   - ${ts.name} (${ts.modulePath})`)
-    }
-    
-    // Initialize result
-    const result: SyncResult = {
-      testSuitesScanned: testSuitesFromFS.length,
-      testSuitesExisting: 0,
-      testSuitesCreated: 0,
-      testSuitesUpdated: 0,
-      testSuitesDeleted: 0,
-      errors: [],
-      createdTestSuites: [],
-      updatedTestSuites: [],
-      deletedTestSuites: [],
-    }
-    
-    // Sync to database
-    await syncTestSuitesToDatabase(testSuitesFromFS, result)
-    
-    printSyncSummary(
-      [
-        { label: '📁 Test suites scanned', value: result.testSuitesScanned },
-        { label: '✅ Test suites existing', value: result.testSuitesExisting },
-        { label: '➕ Test suites created', value: result.testSuitesCreated },
-        { label: '🔄 Test suites updated', value: result.testSuitesUpdated },
-        { label: '🗑️  Test suites deleted', value: result.testSuitesDeleted },
-        { label: '❌ Errors', value: result.errors.length },
-      ],
-      [
-        {
-          title: 'Created test suites',
-          items: result.createdTestSuites.map(ts => `${ts.name} (${ts.modulePath})`),
-        },
-        {
-          title: 'Updated test suites',
-          items: result.updatedTestSuites.map(ts => `${ts.name} (${ts.modulePath})`),
-        },
-        {
-          title: 'Deleted test suites',
-          items: result.deletedTestSuites.map(ts => `${ts.name} (${ts.modulePath})`),
-        },
-        { title: 'Errors', items: result.errors },
-      ],
-    )
-    return result
+  console.log('🔄 Starting test suites sync...')
+  console.log('This will scan feature files and sync test suites to database.')
+  console.log('Filesystem is the source of truth - test suites in DB but not in FS will be deleted.')
+  console.log('Note: Test cases are not synced by this script (they will be handled separately).\n')
+
+  await ensureAutomationWorkspaceReady()
+  const featuresDir = getAutomationFeaturesDir()
+
+  // Scan test suites from filesystem
+  const testSuitesFromFS = await scanTestSuitesFromFilesystem(featuresDir)
+
+  if (testSuitesFromFS.length === 0) {
+    console.log('\n⚠️  No feature files found. Nothing to sync.')
+    return
+  }
+
+  console.log(`\n📋 Found ${testSuitesFromFS.length} test suite(s) from feature files:`)
+  for (const ts of testSuitesFromFS) {
+    console.log(`   - ${ts.name} (${ts.modulePath})`)
+  }
+
+  // Initialize result
+  const result: SyncResult = {
+    testSuitesScanned: testSuitesFromFS.length,
+    testSuitesExisting: 0,
+    testSuitesCreated: 0,
+    testSuitesUpdated: 0,
+    testSuitesDeleted: 0,
+    errors: [],
+    createdTestSuites: [],
+    updatedTestSuites: [],
+    deletedTestSuites: [],
+  }
+
+  // Sync to database
+  await syncTestSuitesToDatabase(testSuitesFromFS, result)
+
+  printSyncSummary(
+    [
+      { label: '📁 Test suites scanned', value: result.testSuitesScanned },
+      { label: '✅ Test suites existing', value: result.testSuitesExisting },
+      { label: '➕ Test suites created', value: result.testSuitesCreated },
+      { label: '🔄 Test suites updated', value: result.testSuitesUpdated },
+      { label: '🗑️  Test suites deleted', value: result.testSuitesDeleted },
+      { label: '❌ Errors', value: result.errors.length },
+    ],
+    [
+      {
+        title: 'Created test suites',
+        items: result.createdTestSuites.map(ts => `${ts.name} (${ts.modulePath})`),
+      },
+      {
+        title: 'Updated test suites',
+        items: result.updatedTestSuites.map(ts => `${ts.name} (${ts.modulePath})`),
+      },
+      {
+        title: 'Deleted test suites',
+        items: result.deletedTestSuites.map(ts => `${ts.name} (${ts.modulePath})`),
+      },
+      { title: 'Errors', items: result.errors },
+    ],
+  )
+  return result
 }
 
 runSyncScript(main)

package/templates/blank/src/actions/server-action-boundary.test.ts

@@ -22,13 +22,7 @@ import {
   listEnvironments,
   updateEnvironment,
 } from '@/services/environment/environment-service'
-import {
-  createTag,
-  deleteTags,
-  getTagByIdOrThrow,
-  listFilterTags,
-  updateTag,
-} from '@/services/tag/tag-service'
+import { createTag, deleteTags, getTagByIdOrThrow, listFilterTags, updateTag } from '@/services/tag/tag-service'
 import {
   checkLocatorGroupNameUnique,
   createLocatorGroup,

package/templates/blank/src/actions/settings/sync-actions.ts

@@ -5,7 +5,9 @@ import { runRequestedSync, type SyncExecutionResult } from '@/lib/sync/sync-exec
 import { getSyncPendingCounts, type SyncPendingCounts } from '@/lib/sync/sync-pending-counts'
 import { isSyncRequestId } from '@/lib/sync/sync-registry'
 
-export async function runSyncAction(requestedScriptId: string): Promise<SyncExecutionResult | InvalidSyncExecutionResult> {
+export async function runSyncAction(
+  requestedScriptId: string,
+): Promise<SyncExecutionResult | InvalidSyncExecutionResult> {
   if (!isSyncRequestId(requestedScriptId)) {
     return {
       requestedScriptId,

package/templates/blank/src/actions/tags/tag-actions.ts

@@ -1,13 +1,7 @@
 'use server'
 
 import { tagSchema } from '@/constants/form-opts/tag-form-opts'
-import {
-  createTag,
-  deleteTags,
-  getTagByIdOrThrow,
-  listFilterTags,
-  updateTag,
-} from '@/services/tag/tag-service'
+import { createTag, deleteTags, getTagByIdOrThrow, listFilterTags, updateTag } from '@/services/tag/tag-service'
 import { ServiceError, serviceErrorToActionResponse, unknownErrorToActionResponse } from '@/services/shared/errors'
 import { ActionResponse } from '@/types/form/actionHandler'
 import { revalidatePath } from 'next/cache'

package/templates/blank/src/actions/template-test-case/template-test-case-actions.ts

@@ -40,7 +40,9 @@ export async function deleteTemplateTestCaseAction(id: string[]): Promise<Action
   }
 }
 
-export async function createTemplateTestCaseAction(value: z.infer<typeof templateTestCaseSchema>): Promise<ActionResponse> {
+export async function createTemplateTestCaseAction(
+  value: z.infer<typeof templateTestCaseSchema>,
+): Promise<ActionResponse> {
   try {
     templateTestCaseSchema.parse(value)
     const newTemplateTestCase = await createTemplateTestCase(value)

package/templates/blank/src/app/(base)/environments/create/page.tsx

@@ -1,28 +1,28 @@
-import { createEnvironmentAction } from '@/actions/environments/environment-actions'
-import EnvironmentForm from '../environment-form'
-import PageHeader from '@/components/typography/page-header'
-import HeaderSubtitle from '@/components/typography/page-header-subtitle'
-import { Metadata } from 'next'
-
-export const metadata: Metadata = {
-  title: 'Appraise | Create Environment',
-  description: 'Create a new environment configuration for your test runs',
-}
-
-const CreateEnvironment = async () => {
-  return (
-    <>
-      <div className="mb-8">
-        <PageHeader>Create Environment</PageHeader>
-        <HeaderSubtitle>Create a new environment configuration for your test runs.</HeaderSubtitle>
-      </div>
-      <EnvironmentForm
-        successTitle="Environment created"
-        successMessage="Environment created successfully"
-        onSubmitAction={createEnvironmentAction}
-      />
-    </>
-  )
-}
-
-export default CreateEnvironment
+import { createEnvironmentAction } from '@/actions/environments/environment-actions'
+import EnvironmentForm from '../environment-form'
+import PageHeader from '@/components/typography/page-header'
+import HeaderSubtitle from '@/components/typography/page-header-subtitle'
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Appraise | Create Environment',
+  description: 'Create a new environment configuration for your test runs',
+}
+
+const CreateEnvironment = async () => {
+  return (
+    <>
+      <div className="mb-8">
+        <PageHeader>Create Environment</PageHeader>
+        <HeaderSubtitle>Create a new environment configuration for your test runs.</HeaderSubtitle>
+      </div>
+      <EnvironmentForm
+        successTitle="Environment created"
+        successMessage="Environment created successfully"
+        onSubmitAction={createEnvironmentAction}
+      />
+    </>
+  )
+}
+
+export default CreateEnvironment

package/templates/blank/src/app/(base)/environments/environment-form.tsx

@@ -10,7 +10,7 @@ import { useForm } from '@tanstack/react-form'
 import { TanStackForm } from '@/lib/form/tanstack-form'
 import { useRouter } from 'next/navigation'
 import { useState } from 'react'
-import { Eye, EyeOff } from 'lucide-react'
+import { Eye, EyeOff, Save } from 'lucide-react'
 import {
   environmentFieldValidators,
   getActionErrorMessage,
@@ -210,7 +210,8 @@ const EnvironmentForm = ({ defaultValues, successTitle, successMessage, id, onSu
       <form.Subscribe selector={formState => [formState.canSubmit, formState.isSubmitting]}>
         {([canSubmit, isSubmitting]) => (
           <Button type="submit" disabled={!canSubmit}>
-            {isSubmitting ? '...' : 'Save'}
+            <Save className="size-4" aria-hidden />
+            <span className="font-bold">{isSubmitting ? '...' : 'Save'}</span>
           </Button>
         )}
       </form.Subscribe>

package/templates/blank/src/app/(base)/environments/environment-helpers.ts

@@ -1,4 +1,7 @@
-import { environmentSchema, type Environment as EnvironmentFormValues } from '@/constants/form-opts/environment-form-opts'
+import {
+  environmentSchema,
+  type Environment as EnvironmentFormValues,
+} from '@/constants/form-opts/environment-form-opts'
 import type { ActionResponse, ActionResponseData } from '@/types/form/actionHandler'
 
 export type EnvironmentTableRow = {

package/templates/blank/src/app/(base)/layout.tsx

@@ -1,10 +1,10 @@
-/**
- * All (base) routes depend on server data (Prisma). Force dynamic rendering
- * so these pages are not statically generated at build time (e.g. in CI where
- * no database is available).
- */
-export const dynamic = 'force-dynamic'
-
-export default function BaseLayout({ children }: { children: React.ReactNode }) {
-  return <>{children}</>
-}
+/**
+ * All (base) routes depend on server data (Prisma). Force dynamic rendering
+ * so these pages are not statically generated at build time (e.g. in CI where
+ * no database is available).
+ */
+export const dynamic = 'force-dynamic'
+
+export default function BaseLayout({ children }: { children: React.ReactNode }) {
+  return <>{children}</>
+}

package/templates/blank/src/app/(base)/locator-groups/locator-group-form.tsx

@@ -3,10 +3,11 @@
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
-import { locatorGroupFormOpts, LocatorGroup } from '@/constants/form-opts/locator-group-form-opts'
+import { locatorGroupFormOpts, locatorGroupSchema, LocatorGroup } from '@/constants/form-opts/locator-group-form-opts'
 import { toast } from '@/hooks/use-toast'
 import { ActionResponse } from '@/types/form/actionHandler'
 import { useForm } from '@tanstack/react-form'
+import { Save } from 'lucide-react'
 import { TanStackForm } from '@/lib/form/tanstack-form'
 import React, { useCallback, useRef } from 'react'
 import { z } from 'zod'
@@ -174,7 +175,7 @@ const LocatorGroupForm = ({
       <form.Field
         name="route"
         validators={{
-          onChange: z.string().optional(),
+          onChange: locatorGroupSchema.shape.route,
         }}
       >
         {field => {
@@ -204,7 +205,8 @@ const LocatorGroupForm = ({
       <form.Subscribe selector={formState => [formState.canSubmit, formState.isSubmitting]}>
         {([canSubmit, isSubmitting]) => (
           <Button type="submit" disabled={!canSubmit}>
-            {isSubmitting ? '...' : 'Save'}
+            <Save className="size-4" aria-hidden />
+            <span className="font-bold">{isSubmitting ? '...' : 'Save'}</span>
           </Button>
         )}
       </form.Subscribe>

package/templates/blank/src/app/(base)/locator-groups/locator-group-table-columns.tsx

@@ -1,77 +1,77 @@
-'use client'
-
-import { DataTableColumnHeader } from '@/components/ui/data-table-column-header'
-import { ColumnDef } from '@tanstack/react-table'
-
-import { Checkbox } from '@/components/ui/checkbox'
-import TableActions from '@/components/table/table-actions'
-import { LocatorGroup, Module } from '@prisma/client'
-import { formatDateTime } from '@/lib/utils'
-import { deleteLocatorGroupAction } from '@/actions/locator-groups/locator-group-actions'
-import { Badge } from '@/components/ui/badge'
-
-export const locatorGroupTableCols: ColumnDef<LocatorGroup & { module: Module }>[] = [
-  {
-    id: 'select',
-    header: ({ table }) => (
-      <Checkbox
-        checked={table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate')}
-        onCheckedChange={value => table.toggleAllPageRowsSelected(!!value)}
-        aria-label="Select all"
-        className="mr-2"
-      />
-    ),
-    cell: ({ row }) => (
-      <Checkbox
-        checked={row.getIsSelected()}
-        onCheckedChange={value => row.toggleSelected(!!value)}
-        aria-label="Select row"
-        className="mr-2"
-      />
-    ),
-    enableSorting: false,
-    enableHiding: false,
-  },
-  {
-    accessorKey: 'name',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Name" />,
-  },
-  {
-    accessorKey: 'module.name',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Module" />,
-    cell: ({ row }) => {
-      const locatorGroup = row.original
-      return <Badge variant="outline">{locatorGroup.module?.name}</Badge>
-    },
-  },
-  {
-    accessorKey: 'route',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Route" />,
-  },
-  {
-    accessorKey: 'createdAt',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Created At" />,
-    cell: ({ row }) => {
-      return formatDateTime(row.original.createdAt)
-    },
-  },
-  {
-    accessorKey: 'updatedAt',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Updated At" />,
-    cell: ({ row }) => {
-      return formatDateTime(row.original.updatedAt)
-    },
-  },
-  {
-    id: 'actions',
-    cell: ({ row }) => {
-      const locatorGroup = row.original
-      return (
-        <TableActions
-          modifyLink={`/locator-groups/modify/${locatorGroup.id}`}
-          deleteHandler={() => deleteLocatorGroupAction([locatorGroup.id])}
-        />
-      )
-    },
-  },
-]
+'use client'
+
+import { DataTableColumnHeader } from '@/components/ui/data-table-column-header'
+import { ColumnDef } from '@tanstack/react-table'
+
+import { Checkbox } from '@/components/ui/checkbox'
+import TableActions from '@/components/table/table-actions'
+import { LocatorGroup, Module } from '@prisma/client'
+import { formatDateTime } from '@/lib/utils'
+import { deleteLocatorGroupAction } from '@/actions/locator-groups/locator-group-actions'
+import { Badge } from '@/components/ui/badge'
+
+export const locatorGroupTableCols: ColumnDef<LocatorGroup & { module: Module }>[] = [
+  {
+    id: 'select',
+    header: ({ table }) => (
+      <Checkbox
+        checked={table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate')}
+        onCheckedChange={value => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+        className="mr-2"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={value => row.toggleSelected(!!value)}
+        aria-label="Select row"
+        className="mr-2"
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: 'name',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Name" />,
+  },
+  {
+    accessorKey: 'module.name',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Module" />,
+    cell: ({ row }) => {
+      const locatorGroup = row.original
+      return <Badge variant="outline">{locatorGroup.module?.name}</Badge>
+    },
+  },
+  {
+    accessorKey: 'route',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Route" />,
+  },
+  {
+    accessorKey: 'createdAt',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Created At" />,
+    cell: ({ row }) => {
+      return formatDateTime(row.original.createdAt)
+    },
+  },
+  {
+    accessorKey: 'updatedAt',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Updated At" />,
+    cell: ({ row }) => {
+      return formatDateTime(row.original.updatedAt)
+    },
+  },
+  {
+    id: 'actions',
+    cell: ({ row }) => {
+      const locatorGroup = row.original
+      return (
+        <TableActions
+          modifyLink={`/locator-groups/modify/${locatorGroup.id}`}
+          deleteHandler={() => deleteLocatorGroupAction([locatorGroup.id])}
+        />
+      )
+    },
+  },
+]

package/templates/blank/src/app/(base)/locator-groups/locator-group-table.tsx

@@ -1,28 +1,28 @@
-import { deleteLocatorGroupAction, getAllLocatorGroupsAction } from '@/actions/locator-groups/locator-group-actions'
-import { DataTable } from '@/components/ui/data-table'
-import { LocatorGroup, Module } from '@prisma/client'
-import { locatorGroupTableCols } from './locator-group-table-columns'
-
-const LocatorGroupTable = async () => {
-  const { data: locatorGroups, error: locatorGroupsError } = await getAllLocatorGroupsAction()
-
-  if (locatorGroupsError) {
-    return <div>Error: {locatorGroupsError}</div>
-  }
-
-  return (
-    <>
-      <DataTable
-        columns={locatorGroupTableCols}
-        data={locatorGroups as (LocatorGroup & { module: Module })[]}
-        filterColumn="name"
-        filterPlaceholder="Filter by name..."
-        createLink="/locator-groups/create"
-        modifyLink="/locator-groups/modify"
-        deleteAction={deleteLocatorGroupAction}
-      />
-    </>
-  )
-}
-
-export default LocatorGroupTable
+import { deleteLocatorGroupAction, getAllLocatorGroupsAction } from '@/actions/locator-groups/locator-group-actions'
+import { DataTable } from '@/components/ui/data-table'
+import { LocatorGroup, Module } from '@prisma/client'
+import { locatorGroupTableCols } from './locator-group-table-columns'
+
+const LocatorGroupTable = async () => {
+  const { data: locatorGroups, error: locatorGroupsError } = await getAllLocatorGroupsAction()
+
+  if (locatorGroupsError) {
+    return <div>Error: {locatorGroupsError}</div>
+  }
+
+  return (
+    <>
+      <DataTable
+        columns={locatorGroupTableCols}
+        data={locatorGroups as (LocatorGroup & { module: Module })[]}
+        filterColumn="name"
+        filterPlaceholder="Filter by name..."
+        createLink="/locator-groups/create"
+        modifyLink="/locator-groups/modify"
+        deleteAction={deleteLocatorGroupAction}
+      />
+    </>
+  )
+}
+
+export default LocatorGroupTable