create-appraisejs 0.1.10-alpha.8 → 0.2.0-alpha.1

package/templates/default/src/app/(base)/reports/report-metric-card.tsx

@@ -1,16 +1,78 @@
-import { Card, CardTitle, CardContent, CardHeader } from '@/components/ui/card'
-
-const ReportMetricCard = ({ title, value }: { title: string; value: string }) => {
-  return (
-    <Card className="min-w-60 shadow-none dark:border-none">
-      <CardHeader>
-        <CardTitle className="text-lg font-normal text-gray-400">{title}</CardTitle>
-      </CardHeader>
-      <CardContent>
-        <div className="text-2xl font-bold text-primary">{value}</div>
-      </CardContent>
-    </Card>
-  )
-}
-
-export default ReportMetricCard
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { cn } from '@/lib/utils'
+
+const metricStyles: Record<
+  string,
+  {
+    card: string
+    glow: string
+    dot: string
+    value: string
+  }
+> = {
+  'Total Tests': {
+    card: 'bg-gradient-to-br from-card via-card to-primary/5',
+    glow: 'bg-primary/20',
+    dot: 'bg-primary',
+    value: 'text-primary',
+  },
+  Passed: {
+    card: 'bg-gradient-to-br from-card via-card to-primary/10',
+    glow: 'bg-primary/25',
+    dot: 'bg-green-500',
+    value: 'text-green-500',
+  },
+  Failed: {
+    card: 'bg-gradient-to-br from-card via-card to-destructive/10',
+    glow: 'bg-destructive/20',
+    dot: 'bg-destructive',
+    value: 'text-destructive',
+  },
+  Untested: {
+    card: 'bg-gradient-to-br from-card via-card to-secondary/70',
+    glow: 'bg-muted-foreground/15',
+    dot: 'bg-muted-foreground',
+    value: 'text-foreground',
+  },
+}
+
+const ReportMetricCard = ({ title, value }: { title: string; value: string }) => {
+  const styles = metricStyles[title] ?? {
+    card: 'bg-gradient-to-br from-card to-muted/40',
+    glow: 'bg-primary/15',
+    dot: 'bg-primary',
+    value: 'text-foreground',
+  }
+
+  return (
+    <Card
+      className={cn(
+        'group relative min-w-0 overflow-hidden rounded-2xl shadow-sm transition-colors bg-transparent border-gray-500/10',
+        styles.card,
+      )}
+    >
+      <div
+        className={cn(
+          'pointer-events-none absolute -right-10 -top-10 h-28 w-28 rounded-full blur-3xl transition-opacity group-hover:opacity-90',
+          styles.glow,
+        )}
+      />
+      <div className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white/70 to-transparent dark:via-white/20" />
+
+      <CardHeader className="space-y-3 p-5 pb-3">
+        <div className="flex items-center gap-3">
+          <span className={cn('h-2.5 w-2.5 rounded-full shadow-sm', styles.dot)} />
+          <CardTitle className="text-sm font-medium tracking-[0.18em] text-muted-foreground uppercase">
+            {title}
+          </CardTitle>
+        </div>
+      </CardHeader>
+
+      <CardContent className="p-5 pt-0">
+        <div className={cn('text-4xl font-bold tracking-tight sm:text-[2.75rem]', styles.value)}>{value}</div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default ReportMetricCard

package/templates/default/src/app/(base)/reports/report-table-columns.tsx

@@ -1,189 +1,189 @@
-'use client'
-
-import { DataTableColumnHeader } from '@/components/ui/data-table-column-header'
-import {
-  Report,
-  Tag,
-  ReportTestCase,
-  TestRun,
-  TestRunTestCase,
-  TestCase,
-  TestRunStatus,
-  TestRunResult,
-  Environment,
-  TagType,
-} from '@prisma/client'
-import { ColumnDef } from '@tanstack/react-table'
-
-import { Badge } from '@/components/ui/badge'
-import { Button } from '@/components/ui/button'
-import { CheckCircle, Clock, XCircle, Eye } from 'lucide-react'
-import Link from 'next/link'
-
-type ReportWithRelations = Report & {
-  testRun: TestRun & {
-    environment: Environment
-    tags: Tag[]
-  }
-  testCases: (ReportTestCase & {
-    testRunTestCase: TestRunTestCase & {
-      testCase: TestCase & { tags?: Tag[] }
-    }
-  })[]
-}
-
-const formatDuration = (startDate: Date, endDate: Date | null) => {
-  if (!endDate) return '-'
-  const diffInMs = endDate.getTime() - startDate.getTime()
-  const totalSeconds = Math.floor(diffInMs / 1000)
-  const hours = Math.floor(totalSeconds / 3600)
-  const minutes = Math.floor((totalSeconds % 3600) / 60)
-  const seconds = totalSeconds % 60
-
-  return `${String(hours).padStart(2, '0')}h ${String(minutes).padStart(2, '0')}m ${String(seconds).padStart(2, '0')}s`
-}
-
-const testRunStatusToBadge = (status: TestRunStatus) => {
-  switch (status) {
-    case TestRunStatus.COMPLETED:
-      return (
-        <Badge className="bg-primary">
-          <CheckCircle className="mr-1 h-4 w-4" />
-          Completed
-        </Badge>
-      )
-    case TestRunStatus.CANCELLED:
-      return (
-        <Badge className="bg-pink-500 text-white">
-          <XCircle className="mr-1 h-4 w-4" />
-          Cancelled
-        </Badge>
-      )
-    default:
-      return (
-        <Badge className="bg-gray-500 text-white">
-          <Clock className="mr-1 h-4 w-4" />
-          Unknown
-        </Badge>
-      )
-  }
-}
-
-const testRunResultToBadge = (result: TestRunResult) => {
-  switch (result) {
-    case TestRunResult.PASSED:
-      return (
-        <Badge className="bg-primary">
-          <CheckCircle className="mr-1 h-4 w-4" />
-          Passed
-        </Badge>
-      )
-    case TestRunResult.FAILED:
-      return (
-        <Badge className="bg-pink-500 text-white">
-          <XCircle className="mr-1 h-4 w-4" />
-          Failed
-        </Badge>
-      )
-    case TestRunResult.CANCELLED:
-      return (
-        <Badge className="bg-gray-500 text-white">
-          <XCircle className="mr-1 h-4 w-4" />
-          Cancelled
-        </Badge>
-      )
-    default:
-      return (
-        <Badge className="bg-gray-500 text-white">
-          <Clock className="mr-1 h-4 w-4" />
-          Unknown
-        </Badge>
-      )
-  }
-}
-
-export const reportTableCols: ColumnDef<ReportWithRelations>[] = [
-  {
-    id: 'testRunName',
-    accessorFn: row => row.testRun.name || '',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Test Run Name" />,
-    cell: ({ row }) => {
-      return <div className="font-medium">{row.original.testRun.name}</div>
-    },
-  },
-  {
-    id: 'testRunStatus',
-    accessorFn: row => row.testRun.status || '',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Test Run Status" />,
-    cell: ({ row }) => {
-      return testRunStatusToBadge(row.original.testRun.status)
-    },
-  },
-  {
-    id: 'tags',
-    accessorFn: row => {
-      const tags = row.testRun.tags || []
-      return tags.map(tag => tag.name).join(' ')
-    },
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Tags" />,
-    cell: ({ row }) => {
-      const tags = row.original.testRun.tags.filter(tag => tag.type === TagType.FILTER) || []
-      return (
-        <div className="flex flex-wrap gap-1">
-          {tags.length > 0 ? tags.map(tag => <Badge key={tag.id}>{tag.name}</Badge>) : '-'}
-        </div>
-      )
-    },
-  },
-  {
-    id: 'environment',
-    accessorFn: row => row.testRun.environment?.name || '',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Environment" />,
-    cell: ({ row }) => {
-      return <div>{row.original.testRun.environment.name}</div>
-    },
-  },
-  {
-    id: 'duration',
-    accessorFn: row => {
-      const testRun = row.testRun
-      if (!testRun.completedAt) return 0
-      return testRun.completedAt.getTime() - testRun.startedAt.getTime()
-    },
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Duration" />,
-    cell: ({ row }) => {
-      const testRun = row.original.testRun
-      return <div>{formatDuration(testRun.startedAt, testRun.completedAt)}</div>
-    },
-  },
-  {
-    id: 'totalTestCases',
-    accessorFn: row => row.testCases.length,
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Total Test Cases Executed" />,
-    cell: ({ row }) => {
-      return <div>{row.original.testCases.length}</div>
-    },
-  },
-  {
-    id: 'testRunResult',
-    accessorFn: row => row.testRun.result || '',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Test Run Result" />,
-    cell: ({ row }) => {
-      return testRunResultToBadge(row.original.testRun.result)
-    },
-  },
-  {
-    id: 'actions',
-    cell: ({ row }) => {
-      const report = row.original
-      return (
-        <Link href={`/reports/${report.id}`}>
-          <Button variant="outline" size="sm" className="flex items-center gap-2">
-            <Eye className="h-4 w-4" />
-            View
-          </Button>
-        </Link>
-      )
-    },
-  },
-]
+'use client'
+
+import { DataTableColumnHeader } from '@/components/ui/data-table-column-header'
+import {
+  Report,
+  Tag,
+  ReportTestCase,
+  TestRun,
+  TestRunTestCase,
+  TestCase,
+  TestRunStatus,
+  TestRunResult,
+  Environment,
+  TagType,
+} from '@prisma/client'
+import { ColumnDef } from '@tanstack/react-table'
+
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { CheckCircle, Clock, XCircle, Eye } from 'lucide-react'
+import Link from 'next/link'
+
+type ReportWithRelations = Report & {
+  testRun: TestRun & {
+    environment: Environment
+    tags: Tag[]
+  }
+  testCases: (ReportTestCase & {
+    testRunTestCase: TestRunTestCase & {
+      testCase: TestCase & { tags?: Tag[] }
+    }
+  })[]
+}
+
+const formatDuration = (startDate: Date, endDate: Date | null) => {
+  if (!endDate) return '-'
+  const diffInMs = endDate.getTime() - startDate.getTime()
+  const totalSeconds = Math.floor(diffInMs / 1000)
+  const hours = Math.floor(totalSeconds / 3600)
+  const minutes = Math.floor((totalSeconds % 3600) / 60)
+  const seconds = totalSeconds % 60
+
+  return `${String(hours).padStart(2, '0')}h ${String(minutes).padStart(2, '0')}m ${String(seconds).padStart(2, '0')}s`
+}
+
+const testRunStatusToBadge = (status: TestRunStatus) => {
+  switch (status) {
+    case TestRunStatus.COMPLETED:
+      return (
+        <Badge className="bg-primary">
+          <CheckCircle className="mr-1 h-4 w-4" />
+          Completed
+        </Badge>
+      )
+    case TestRunStatus.CANCELLED:
+      return (
+        <Badge className="bg-pink-500 text-white">
+          <XCircle className="mr-1 h-4 w-4" />
+          Cancelled
+        </Badge>
+      )
+    default:
+      return (
+        <Badge className="bg-gray-500 text-white">
+          <Clock className="mr-1 h-4 w-4" />
+          Unknown
+        </Badge>
+      )
+  }
+}
+
+const testRunResultToBadge = (result: TestRunResult) => {
+  switch (result) {
+    case TestRunResult.PASSED:
+      return (
+        <Badge className="bg-primary">
+          <CheckCircle className="mr-1 h-4 w-4" />
+          Passed
+        </Badge>
+      )
+    case TestRunResult.FAILED:
+      return (
+        <Badge className="bg-pink-500 text-white">
+          <XCircle className="mr-1 h-4 w-4" />
+          Failed
+        </Badge>
+      )
+    case TestRunResult.CANCELLED:
+      return (
+        <Badge className="bg-gray-500 text-white">
+          <XCircle className="mr-1 h-4 w-4" />
+          Cancelled
+        </Badge>
+      )
+    default:
+      return (
+        <Badge className="bg-gray-500 text-white">
+          <Clock className="mr-1 h-4 w-4" />
+          Unknown
+        </Badge>
+      )
+  }
+}
+
+export const reportTableCols: ColumnDef<ReportWithRelations>[] = [
+  {
+    id: 'testRunName',
+    accessorFn: row => row.testRun.name || '',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Test Run Name" />,
+    cell: ({ row }) => {
+      return <div className="font-medium">{row.original.testRun.name}</div>
+    },
+  },
+  {
+    id: 'testRunStatus',
+    accessorFn: row => row.testRun.status || '',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Test Run Status" />,
+    cell: ({ row }) => {
+      return testRunStatusToBadge(row.original.testRun.status)
+    },
+  },
+  {
+    id: 'tags',
+    accessorFn: row => {
+      const tags = row.testRun.tags || []
+      return tags.map(tag => tag.name).join(' ')
+    },
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Tags" />,
+    cell: ({ row }) => {
+      const tags = row.original.testRun.tags.filter(tag => tag.type === TagType.FILTER) || []
+      return (
+        <div className="flex flex-wrap gap-1">
+          {tags.length > 0 ? tags.map(tag => <Badge key={tag.id}>{tag.name}</Badge>) : '-'}
+        </div>
+      )
+    },
+  },
+  {
+    id: 'environment',
+    accessorFn: row => row.testRun.environment?.name || '',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Environment" />,
+    cell: ({ row }) => {
+      return <div>{row.original.testRun.environment.name}</div>
+    },
+  },
+  {
+    id: 'duration',
+    accessorFn: row => {
+      const testRun = row.testRun
+      if (!testRun.completedAt) return 0
+      return testRun.completedAt.getTime() - testRun.startedAt.getTime()
+    },
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Duration" />,
+    cell: ({ row }) => {
+      const testRun = row.original.testRun
+      return <div>{formatDuration(testRun.startedAt, testRun.completedAt)}</div>
+    },
+  },
+  {
+    id: 'totalTestCases',
+    accessorFn: row => row.testCases.length,
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Total Test Cases Executed" />,
+    cell: ({ row }) => {
+      return <div>{row.original.testCases.length}</div>
+    },
+  },
+  {
+    id: 'testRunResult',
+    accessorFn: row => row.testRun.result || '',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Test Run Result" />,
+    cell: ({ row }) => {
+      return testRunResultToBadge(row.original.testRun.result)
+    },
+  },
+  {
+    id: 'actions',
+    cell: ({ row }) => {
+      const report = row.original
+      return (
+        <Link href={`/reports/${report.id}`}>
+          <Button variant="outline" size="sm" className="flex items-center gap-2">
+            <Eye className="h-4 w-4" />
+            View
+          </Button>
+        </Link>
+      )
+    },
+  },
+]

package/templates/default/src/app/(base)/reports/report-table.tsx

@@ -1,72 +1,72 @@
-import { DataTable } from '@/components/ui/data-table'
-import { reportTableCols } from './report-table-columns'
-import { getAllReportsAction } from '@/actions/reports/report-actions'
-import { Prisma } from '@prisma/client'
-
-type ReportWithRelations = Prisma.ReportGetPayload<{
-  include: {
-    testRun: {
-      include: {
-        environment: true
-        tags: true
-      }
-    }
-    testCases: {
-      include: {
-        testRunTestCase: {
-          include: {
-            testCase: {
-              include: {
-                tags: true
-              }
-            }
-          }
-        }
-        reportScenario: {
-          include: {
-            reportFeature: true
-          }
-        }
-      }
-    }
-  }
-}>
-
-const ReportTable = async () => {
-  const { data: reports, error: reportsError } = await getAllReportsAction()
-
-  if (reportsError) {
-    return <div>Error: {reportsError}</div>
-  }
-
-  // Type guard to validate the data structure
-  const isValidReportData = (data: unknown): data is ReportWithRelations[] => {
-    if (!Array.isArray(data)) return false
-    return data.every(
-      item =>
-        item &&
-        typeof item === 'object' &&
-        'id' in item &&
-        'testRun' in item &&
-        'testCases' in item &&
-        Array.isArray(item.testCases),
-    )
-  }
-
-  if (!reports || !isValidReportData(reports)) {
-    return <div>Error: Invalid report data format</div>
-  }
-
-  return (
-    <>
-      <DataTable
-        columns={reportTableCols}
-        data={reports}
-        filterColumn="testRunName"
-        filterPlaceholder="Filter by test run name..."
-      />
-    </>
-  )
-}
-
-export default ReportTable
+import { DataTable } from '@/components/ui/data-table'
+import { reportTableCols } from './report-table-columns'
+import { getAllReportsAction } from '@/actions/reports/report-actions'
+import { Prisma } from '@prisma/client'
+
+type ReportWithRelations = Prisma.ReportGetPayload<{
+  include: {
+    testRun: {
+      include: {
+        environment: true
+        tags: true
+      }
+    }
+    testCases: {
+      include: {
+        testRunTestCase: {
+          include: {
+            testCase: {
+              include: {
+                tags: true
+              }
+            }
+          }
+        }
+        reportScenario: {
+          include: {
+            reportFeature: true
+          }
+        }
+      }
+    }
+  }
+}>
+
+const ReportTable = async () => {
+  const { data: reports, error: reportsError } = await getAllReportsAction()
+
+  if (reportsError) {
+    return <div>Error: {reportsError}</div>
+  }
+
+  // Type guard to validate the data structure
+  const isValidReportData = (data: unknown): data is ReportWithRelations[] => {
+    if (!Array.isArray(data)) return false
+    return data.every(
+      item =>
+        item &&
+        typeof item === 'object' &&
+        'id' in item &&
+        'testRun' in item &&
+        'testCases' in item &&
+        Array.isArray(item.testCases),
+    )
+  }
+
+  if (!reports || !isValidReportData(reports)) {
+    return <div>Error: Invalid report data format</div>
+  }
+
+  return (
+    <>
+      <DataTable
+        columns={reportTableCols}
+        data={reports}
+        filterColumn="testRunName"
+        filterPlaceholder="Filter by test run name..."
+      />
+    </>
+  )
+}
+
+export default ReportTable

package/templates/default/src/app/(base)/reports/report-view-table-columns.tsx

@@ -5,6 +5,7 @@ import {
   ReportTestCase,
   TestRunTestCase,
   TestCase,
+  TestSuite,
   Tag,
   ReportScenario,
   StepStatus,
@@ -18,6 +19,7 @@ import { CheckCircle, XCircle, Clock } from 'lucide-react'
 type ReportTestCaseWithRelations = ReportTestCase & {
   testRunTestCase: TestRunTestCase & {
     testCase: TestCase & { tags?: Tag[] }
+    testSuite: TestSuite | null
   }
   reportScenario:
     | (ReportScenario & {
@@ -91,7 +93,16 @@ export const reportViewTableCols: ColumnDef<ReportTestCaseWithRelations>[] = [
     accessorFn: row => row.testRunTestCase.testCase.title || '',
     header: ({ column }) => <DataTableColumnHeader column={column} title="Test Case Title" />,
     cell: ({ row }) => {
-      return <div className="font-medium">{row.original.testRunTestCase.testCase.title}</div>
+      return (
+        <div>
+          <div className="font-medium">{row.original.testRunTestCase.testCase.title}</div>
+          {row.original.testRunTestCase.testSuite && (
+            <div className="mt-1 text-xs text-muted-foreground">
+              Suite: {row.original.testRunTestCase.testSuite.name}
+            </div>
+          )}
+        </div>
+      )
     },
   },
   {

package/templates/default/src/app/(base)/reports/report-view-table.tsx

@@ -31,6 +31,7 @@ type ReportDetailWithRelations = Prisma.ReportGetPayload<{
                 tags: true
               }
             }
+            testSuite: true
           }
         }
         reportScenario: {