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

package/templates/starter/src/app/(base)/reports/test-suites/test-suites-metric-table-columns.tsx

@@ -1,79 +1,80 @@
-'use client'
-
-import { DataTableColumnHeader } from '@/components/ui/data-table-column-header'
-import { ColumnDef } from '@tanstack/react-table'
-import TableActions from '@/components/table/table-actions'
-import { Tag, TestCase, TestSuite, TestSuiteMetrics } from '@prisma/client'
-import { formatDateTime } from '@/lib/utils'
-import { Checkbox } from '@/components/ui/checkbox'
-import { deleteTestSuiteAction } from '@/actions/test-suite/test-suite-actions'
-
-export const testSuitesMetricTableCols: ColumnDef<TestSuiteMetrics & { testSuite: TestSuite & { tags: Tag[]; testCases: TestCase[] } }>[] =
-  [
-    {
-      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,
-    },
-    {
-      id: 'testSuite.name',
-      accessorKey: 'testSuite.name',
-      header: ({ column }) => <DataTableColumnHeader column={column} title="Test Suite Name" />,
-      cell: ({ row }) => {
-        const testSuite = row.original.testSuite
-        return <div>{testSuite.name}</div>
-      },
-    },
-    {
-      accessorKey: 'testSuite.description',
-      header: ({ column }) => <DataTableColumnHeader column={column} title="Test Suite Description" />,
-      cell: ({ row }) => {
-        const testSuite = row.original.testSuite
-        return <div>{testSuite.description}</div>
-      },
-    },
-    {
-      accessorKey: 'testSuite.testCases.length',
-      header: ({ column }) => <DataTableColumnHeader column={column} title="Total Test Cases" />,
-      cell: ({ row }) => {
-        const testSuite = row.original.testSuite
-        return <div>{testSuite.testCases.length}</div>
-      },
-    },
-    {
-      accessorKey: 'lastExecutedAt',
-      header: ({ column }) => <DataTableColumnHeader column={column} title="Last Executed At" />,
-      cell: ({ row }) => {
-        const testSuiteMetrics = row.original
-        return <div>{formatDateTime(testSuiteMetrics.lastExecutedAt)}</div>
-      },
-    },
-    {
-      id: 'actions',
-      cell: ({ row }) => {
-        const testSuite = row.original.testSuite
-        return (
-          <TableActions
-            modifyLink={`/test-suites/modify/${testSuite.id}`}
-            deleteHandler={() => deleteTestSuiteAction([testSuite.id])}
-          />
-        )
-      },
-    },
-  ]
+'use client'
+
+import { DataTableColumnHeader } from '@/components/ui/data-table-column-header'
+import { ColumnDef } from '@tanstack/react-table'
+import TableActions from '@/components/table/table-actions'
+import { Tag, TestCase, TestSuite, TestSuiteMetrics } from '@prisma/client'
+import { formatDateTime } from '@/lib/utils'
+import { Checkbox } from '@/components/ui/checkbox'
+import { deleteTestSuiteAction } from '@/actions/test-suite/test-suite-actions'
+
+export const testSuitesMetricTableCols: ColumnDef<
+  TestSuiteMetrics & { testSuite: TestSuite & { tags: Tag[]; testCases: TestCase[] } }
+>[] = [
+  {
+    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,
+  },
+  {
+    id: 'testSuite.name',
+    accessorKey: 'testSuite.name',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Test Suite Name" />,
+    cell: ({ row }) => {
+      const testSuite = row.original.testSuite
+      return <div>{testSuite.name}</div>
+    },
+  },
+  {
+    accessorKey: 'testSuite.description',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Test Suite Description" />,
+    cell: ({ row }) => {
+      const testSuite = row.original.testSuite
+      return <div>{testSuite.description}</div>
+    },
+  },
+  {
+    accessorKey: 'testSuite.testCases.length',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Total Test Cases" />,
+    cell: ({ row }) => {
+      const testSuite = row.original.testSuite
+      return <div>{testSuite.testCases.length}</div>
+    },
+  },
+  {
+    accessorKey: 'lastExecutedAt',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Last Executed At" />,
+    cell: ({ row }) => {
+      const testSuiteMetrics = row.original
+      return <div>{formatDateTime(testSuiteMetrics.lastExecutedAt)}</div>
+    },
+  },
+  {
+    id: 'actions',
+    cell: ({ row }) => {
+      const testSuite = row.original.testSuite
+      return (
+        <TableActions
+          modifyLink={`/test-suites/modify/${testSuite.id}`}
+          deleteHandler={() => deleteTestSuiteAction([testSuite.id])}
+        />
+      )
+    },
+  },
+]

package/templates/starter/src/app/(base)/reports/test-suites/test-suites-metric-table.tsx

@@ -1,27 +1,29 @@
-import { deleteTestSuiteAction } from '@/actions/test-suite/test-suite-actions'
-import { DataTable } from '@/components/ui/data-table'
-import { TestCase, Tag, TestSuiteMetrics, TestSuite } from '@prisma/client'
-import { getAllTestSuiteMetricsAction } from '@/actions/reports/report-actions'
-import { testSuitesMetricTableCols } from './test-suites-metric-table-columns'
-
-const TestSuitesMetricTable = async ({ filter }: { filter: 'notExecutedRecently' }) => {
-  const { data: testSuiteMetrics, error: testSuiteMetricsError } = await getAllTestSuiteMetricsAction(filter)
-
-  if (testSuiteMetricsError) {
-    return <div>Error: {testSuiteMetricsError}</div>
-  }
-
-  return (
-    <>
-      <DataTable
-        columns={testSuitesMetricTableCols}
-        data={testSuiteMetrics as (TestSuiteMetrics & { testSuite: TestSuite & { tags: Tag[]; testCases: TestCase[] } })[]}
-        filterColumn="testSuite.name"
-        filterPlaceholder="Filter by name..."
-        deleteAction={deleteTestSuiteAction}
-      />
-    </>
-  )
-}
-
-export default TestSuitesMetricTable
+import { deleteTestSuiteAction } from '@/actions/test-suite/test-suite-actions'
+import { DataTable } from '@/components/ui/data-table'
+import { TestCase, Tag, TestSuiteMetrics, TestSuite } from '@prisma/client'
+import { getAllTestSuiteMetricsAction } from '@/actions/reports/report-actions'
+import { testSuitesMetricTableCols } from './test-suites-metric-table-columns'
+
+const TestSuitesMetricTable = async ({ filter }: { filter: 'notExecutedRecently' }) => {
+  const { data: testSuiteMetrics, error: testSuiteMetricsError } = await getAllTestSuiteMetricsAction(filter)
+
+  if (testSuiteMetricsError) {
+    return <div>Error: {testSuiteMetricsError}</div>
+  }
+
+  return (
+    <>
+      <DataTable
+        columns={testSuitesMetricTableCols}
+        data={
+          testSuiteMetrics as (TestSuiteMetrics & { testSuite: TestSuite & { tags: Tag[]; testCases: TestCase[] } })[]
+        }
+        filterColumn="testSuite.name"
+        filterPlaceholder="Filter by name..."
+        deleteAction={deleteTestSuiteAction}
+      />
+    </>
+  )
+}
+
+export default TestSuitesMetricTable

package/templates/starter/src/app/(base)/settings/settings-sync-panel-helpers.test.tsx

@@ -2,11 +2,7 @@
 
 import { describe, expect, it } from 'vitest'
 
-import {
-  formatExecutionSummary,
-  formatFailureSummary,
-  formatExecutionOrder,
-} from './settings-sync-panel-helpers'
+import { formatExecutionSummary, formatFailureSummary, formatExecutionOrder } from './settings-sync-panel-helpers'
 
 describe('settings-sync-panel helpers', () => {
   it('formats the sync-all execution summary', () => {
@@ -35,6 +31,8 @@ describe('settings-sync-panel helpers', () => {
   })
 
   it('formats the requested execution order labels', () => {
-    expect(formatExecutionOrder('sync-test-cases')).toBe('Modules -> Tags -> Test Suites -> Template Step Groups -> Template Steps -> Test Cases')
+    expect(formatExecutionOrder('sync-test-cases')).toBe(
+      'Modules -> Tags -> Test Suites -> Template Step Groups -> Template Steps -> Test Cases',
+    )
   })
 })

package/templates/starter/src/app/(base)/settings/settings-sync-panel.tsx

@@ -1,8 +1,6 @@
 'use client'
 
-import {
-  RefreshCw,
-} from 'lucide-react'
+import { RefreshCw } from 'lucide-react'
 import { AppDrawerItemColor } from '@/app/(dashboard-components)/app-drawer'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
@@ -14,11 +12,7 @@ import {
   syncScriptDefinitions,
 } from '@/lib/sync/sync-registry'
 import type { SyncPendingCounts } from '@/lib/sync/sync-pending-counts'
-import {
-  getSyncTooltipCopy,
-  syncPanelInfo,
-  syncPresentation,
-} from './settings-sync-panel-helpers'
+import { getSyncTooltipCopy, syncPanelInfo, syncPresentation } from './settings-sync-panel-helpers'
 import { useSettingsSync } from './use-settings-sync'
 
 function SyncRow({
@@ -66,16 +60,22 @@ function SyncRow({
       </TooltipTrigger>
       <TooltipContent className="max-w-xs">
         <p>{definition.description}</p>
-        <p className="mt-1 text-primary-foreground/80">{getSyncTooltipCopy(definition.id)}</p>
+        <p className="text-primary-foreground/80 mt-1">{getSyncTooltipCopy(definition.id)}</p>
       </TooltipContent>
     </Tooltip>
   )
 }
 
 export function SettingsSyncPanel({ pendingCounts }: { pendingCounts: SyncPendingCounts }) {
-  const { activeRequestId, isRunning, pendingCounts: currentPendingCounts, runSync } = useSettingsSync({
+  const {
+    activeRequestId,
+    isRunning,
+    pendingCounts: currentPendingCounts,
+    runSync,
+  } = useSettingsSync({
     initialPendingCounts: pendingCounts,
   })
+  const syncAllColor = AppDrawerItemColor.emerald
 
   return (
     <TooltipProvider>
@@ -85,13 +85,9 @@ export function SettingsSyncPanel({ pendingCounts }: { pendingCounts: SyncPendin
             <CardTitle className="text-primary">Sync</CardTitle>
             <Tooltip>
               <TooltipTrigger asChild>
-                <span className="cursor-help text-muted-foreground">
-                  {syncPanelInfo.helpIcon}
-                </span>
+                <span className="cursor-help text-muted-foreground">{syncPanelInfo.helpIcon}</span>
               </TooltipTrigger>
-              <TooltipContent className="max-w-xs">
-                Runs all sync targets with prerequisites.
-              </TooltipContent>
+              <TooltipContent className="max-w-xs">Runs all sync targets with prerequisites.</TooltipContent>
             </Tooltip>
           </div>
         </CardHeader>
@@ -99,27 +95,30 @@ export function SettingsSyncPanel({ pendingCounts }: { pendingCounts: SyncPendin
           <Tooltip>
             <TooltipTrigger asChild>
               <Button
+                variant="outline"
                 disabled={isRunning}
                 aria-label="Sync All"
                 onClick={() => runSync(SYNC_ALL_REQUEST_ID)}
-                className="inline-flex h-24 w-44 flex-none flex-col items-start justify-start whitespace-normal rounded-2xl border-none bg-emerald-500/10 px-3 py-2.5 text-left text-emerald-950 hover:bg-emerald-500/20 hover:text-emerald-950"
+                className={`inline-flex h-24 w-44 flex-none flex-col items-start justify-start whitespace-normal rounded-2xl border-none px-3 py-2.5 text-left hover:text-foreground ${syncAllColor.buttonColor}`}
               >
                 <div className="flex w-full items-center justify-between gap-3">
-                  <div className="text-emerald-500 [&_svg]:!h-5 [&_svg]:!w-5">
+                  <div className={`${syncAllColor.iconColor} shrink-0 [&_svg]:!h-5 [&_svg]:!w-5`}>
                     {activeRequestId === SYNC_ALL_REQUEST_ID ? <RefreshCw className="animate-spin" /> : <RefreshCw />}
                   </div>
                   {currentPendingCounts[SYNC_ALL_REQUEST_ID] > 0 ? (
-                    <div className="rounded-full bg-emerald-400 px-2 py-1 text-[10px] font-semibold text-emerald-900">
+                    <div
+                      className={`flex min-w-7 shrink-0 items-center justify-center rounded-full px-2 py-1 text-[10px] font-semibold ${syncAllColor.badgeColor}`}
+                    >
                       {currentPendingCounts[SYNC_ALL_REQUEST_ID]}
                     </div>
                   ) : null}
                 </div>
-                <p className="mt-3 text-xs font-medium leading-4">Sync All</p>
+                <div className="mt-3 min-w-0">
+                  <p className="break-words text-xs font-medium leading-4 text-foreground">Sync All</p>
+                </div>
               </Button>
             </TooltipTrigger>
-            <TooltipContent className="max-w-xs">
-              {getSyncTooltipCopy(SYNC_ALL_REQUEST_ID)}
-            </TooltipContent>
+            <TooltipContent className="max-w-xs">{getSyncTooltipCopy(SYNC_ALL_REQUEST_ID)}</TooltipContent>
           </Tooltip>
           <div className="flex flex-wrap items-start gap-4">
             {syncScriptDefinitions.map(definition => (

package/templates/starter/src/app/(base)/tags/tag-form.test.tsx

@@ -34,11 +34,7 @@ describe('TagForm', () => {
     })
 
     render(
-      <TagForm
-        successTitle="Tag created"
-        successMessage="Tag created successfully"
-        onSubmitAction={onSubmitAction}
-      />,
+      <TagForm successTitle="Tag created" successMessage="Tag created successfully" onSubmitAction={onSubmitAction} />,
     )
 
     await user.type(screen.getByLabelText('Name'), 'Smoke')
@@ -105,11 +101,7 @@ describe('TagForm', () => {
     const onSubmitAction = vi.fn()
 
     render(
-      <TagForm
-        successTitle="Tag created"
-        successMessage="Tag created successfully"
-        onSubmitAction={onSubmitAction}
-      />,
+      <TagForm successTitle="Tag created" successMessage="Tag created successfully" onSubmitAction={onSubmitAction} />,
     )
 
     await user.type(screen.getByLabelText('Name'), 'Smoke')

package/templates/starter/src/app/(base)/tags/tag-form.tsx

@@ -10,6 +10,7 @@ import { getActionErrorMessage, getCreatedTag, tagFieldValidators, type TagFormS
 
 import type { Tag as PrismaTag } from '@prisma/client'
 import { useForm } from '@tanstack/react-form'
+import { Save } from 'lucide-react'
 import { useRouter } from 'next/navigation'
 import { TanStackForm } from '@/lib/form/tanstack-form'
 
@@ -119,7 +120,7 @@ const TagForm = ({
       >
         {field => {
           return (
-            <div className="mb-4 flex w-full flex-col gap-2">
+            <div className="mb-4 flex w-full flex-col gap-2 lg:w-1/2">
               <Label htmlFor={field.name}>Name</Label>
               <Input id={field.name} value={field.state.value} onChange={e => field.handleChange(e.target.value)} />
               <TagFieldErrors errors={field.state.meta.errors} isTouched={field.state.meta.isTouched} />
@@ -135,7 +136,7 @@ const TagForm = ({
       >
         {field => {
           return (
-            <div className="mb-4 flex w-full flex-col gap-2">
+            <div className="mb-4 flex w-full flex-col gap-2 lg:w-1/2">
               <Label htmlFor={field.name}>Tag Expression</Label>
               <Input
                 id={field.name}
@@ -151,7 +152,8 @@ const TagForm = ({
       <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/starter/src/app/(base)/tags/tag-table-columns.tsx

@@ -1,63 +1,63 @@
-'use client'
-
-import { DataTableColumnHeader } from '@/components/ui/data-table-column-header'
-import { Tag } from '@prisma/client'
-import { ColumnDef } from '@tanstack/react-table'
-
-import { Checkbox } from '@/components/ui/checkbox'
-import TableActions from '@/components/table/table-actions'
-import { deleteTagAction } from '@/actions/tags/tag-actions'
-import { formatDateTime } from '@/lib/utils'
-
-export const tagTableCols: ColumnDef<Tag>[] = [
-  {
-    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: 'tagExpression',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Tag Expression" />,
-  },
-  {
-    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 tag = row.original
-      return <TableActions modifyLink={`/tags/modify/${tag.id}`} deleteHandler={() => deleteTagAction([tag.id])} />
-    },
-  },
-]
+'use client'
+
+import { DataTableColumnHeader } from '@/components/ui/data-table-column-header'
+import { Tag } from '@prisma/client'
+import { ColumnDef } from '@tanstack/react-table'
+
+import { Checkbox } from '@/components/ui/checkbox'
+import TableActions from '@/components/table/table-actions'
+import { deleteTagAction } from '@/actions/tags/tag-actions'
+import { formatDateTime } from '@/lib/utils'
+
+export const tagTableCols: ColumnDef<Tag>[] = [
+  {
+    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: 'tagExpression',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Tag Expression" />,
+  },
+  {
+    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 tag = row.original
+      return <TableActions modifyLink={`/tags/modify/${tag.id}`} deleteHandler={() => deleteTagAction([tag.id])} />
+    },
+  },
+]

package/templates/starter/src/app/(base)/tags/tag-table.tsx

@@ -1,29 +1,29 @@
-import { DataTable } from '@/components/ui/data-table'
-import { deleteTagAction, getAllTagsAction } from '@/actions/tags/tag-actions'
-import { Tag } from '@prisma/client'
-import React from 'react'
-import { tagTableCols } from './tag-table-columns'
-
-const TagTable = async () => {
-  const { data: tags, error: tagsError } = await getAllTagsAction()
-
-  if (tagsError) {
-    return <div>Error: {tagsError}</div>
-  }
-
-  return (
-    <>
-      <DataTable
-        columns={tagTableCols}
-        data={tags as Tag[]}
-        filterColumn="name"
-        filterPlaceholder="Filter by name..."
-        createLink="/tags/create"
-        modifyLink="/tags/modify"
-        deleteAction={deleteTagAction}
-      />
-    </>
-  )
-}
-
-export default TagTable
+import { DataTable } from '@/components/ui/data-table'
+import { deleteTagAction, getAllTagsAction } from '@/actions/tags/tag-actions'
+import { Tag } from '@prisma/client'
+import React from 'react'
+import { tagTableCols } from './tag-table-columns'
+
+const TagTable = async () => {
+  const { data: tags, error: tagsError } = await getAllTagsAction()
+
+  if (tagsError) {
+    return <div>Error: {tagsError}</div>
+  }
+
+  return (
+    <>
+      <DataTable
+        columns={tagTableCols}
+        data={tags as Tag[]}
+        filterColumn="name"
+        filterPlaceholder="Filter by name..."
+        createLink="/tags/create"
+        modifyLink="/tags/modify"
+        deleteAction={deleteTagAction}
+      />
+    </>
+  )
+}
+
+export default TagTable

package/templates/starter/src/app/(base)/template-step-groups/create/page.tsx

@@ -1,28 +1,28 @@
-import { createTemplateStepGroupAction } from '@/actions/template-step-group/template-step-group-actions'
-import { TemplateStepGroupForm } from '../template-step-group-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 Template Step Group',
-  description: 'Create a new template step group to organize related template steps',
-}
-
-const CreateTemplateStepGroup = async () => {
-  return (
-    <>
-      <div className="mb-8">
-        <PageHeader>Create Template Step Group</PageHeader>
-        <HeaderSubtitle>Create a new template step group to organize related template steps</HeaderSubtitle>
-      </div>
-      <TemplateStepGroupForm
-        successTitle="Group created"
-        successMessage="Template step group created successfully"
-        onSubmitAction={createTemplateStepGroupAction}
-      />
-    </>
-  )
-}
-
-export default CreateTemplateStepGroup
+import { createTemplateStepGroupAction } from '@/actions/template-step-group/template-step-group-actions'
+import { TemplateStepGroupForm } from '../template-step-group-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 Template Step Group',
+  description: 'Create a new template step group to organize related template steps',
+}
+
+const CreateTemplateStepGroup = async () => {
+  return (
+    <>
+      <div className="mb-8">
+        <PageHeader>Create Template Step Group</PageHeader>
+        <HeaderSubtitle>Create a new template step group to organize related template steps</HeaderSubtitle>
+      </div>
+      <TemplateStepGroupForm
+        successTitle="Group created"
+        successMessage="Template step group created successfully"
+        onSubmitAction={createTemplateStepGroupAction}
+      />
+    </>
+  )
+}
+
+export default CreateTemplateStepGroup