create-appraise 0.1.0

package/templates/default/src/app/(base)/test-suites/test-suite-form.tsx

@@ -0,0 +1,269 @@
+'use client'
+
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import MultiSelectWithPreview from '@/components/ui/multi-select-with-preview'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { Textarea } from '@/components/ui/textarea'
+import { formOpts, TestSuite } from '@/constants/form-opts/test-suite-form-opts'
+import { toast } from '@/hooks/use-toast'
+import { ActionResponse } from '@/types/form/actionHandler'
+import { Module, TestCase, Tag } from '@prisma/client'
+import { useForm } from '@tanstack/react-form'
+import { Info, Save } from 'lucide-react'
+import { useRouter } from 'next/navigation'
+import { z } from 'zod'
+
+export const TestSuiteForm = ({
+  defaultValues,
+  successTitle,
+  successMessage,
+  id,
+  onSubmitAction,
+  testCases,
+  moduleList,
+  tags,
+}: {
+  defaultValues?: TestSuite
+  successTitle: string
+  successMessage: string
+  id?: string
+  onSubmitAction: (_prev: unknown, value: TestSuite, id?: string) => Promise<ActionResponse>
+  testCases: TestCase[]
+  moduleList: Module[]
+  tags: Tag[]
+}) => {
+  const router = useRouter()
+  const form = useForm({
+    defaultValues: defaultValues ?? formOpts?.defaultValues,
+    validators: formOpts?.validators,
+    onSubmit: async ({ value }) => {
+      const res = await onSubmitAction(undefined, value, id)
+      if (res.status === 200) {
+        toast({
+          title: successTitle,
+          description: successMessage,
+        })
+        router.push('/test-suites')
+      }
+      if (res.status === 400) {
+        toast({
+          title: 'Error',
+          description: res.error,
+          variant: 'destructive',
+        })
+      }
+      if (res.status === 500) {
+        toast({
+          title: 'Error',
+          description: res.error,
+          variant: 'destructive',
+        })
+      }
+    },
+  })
+  return (
+    <div className="flex justify-between gap-20 overflow-x-hidden">
+      <Card className="w-2/3 border-gray-700 bg-gray-500/10">
+        <CardHeader>
+          <CardTitle className="text-xl font-bold text-primary">Test Suite Details</CardTitle>
+          <CardDescription>Enter the details for your test suite</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form
+            onSubmit={e => {
+              e.preventDefault()
+              e.stopPropagation()
+              form.handleSubmit()
+            }}
+          >
+            <form.Field
+              name="name"
+              validators={{
+                onChange: z.string().min(3, { message: 'Name must be at least 3 characters' }),
+              }}
+            >
+              {field => {
+                return (
+                  <div className="mb-6 flex flex-col gap-2">
+                    <Label htmlFor={field.name} className="font-bold">
+                      Name
+                    </Label>
+                    <Input
+                      className="w-full"
+                      id={field.name}
+                      name={field.name}
+                      value={field.state.value}
+                      onChange={e => field.handleChange(e.target.value)}
+                      placeholder="Enter name for your test suite"
+                    />
+                    {field.state.meta.errors.map((error, index) => (
+                      <p key={index} className="text-xs text-pink-500">
+                        {typeof error === 'string' ? error : error?.message || String(error)}
+                      </p>
+                    ))}
+                  </div>
+                )
+              }}
+            </form.Field>
+            <form.Field name="description">
+              {field => {
+                return (
+                  <div className="mb-6 flex flex-col gap-2">
+                    <Label htmlFor={field.name} className="font-bold">
+                      Description
+                    </Label>
+                    <Textarea
+                      className="h-24 w-full bg-background"
+                      id={field.name}
+                      name={field.name}
+                      value={field.state.value}
+                      onChange={e => field.handleChange(e.target.value)}
+                      placeholder="Enter description for your test suite"
+                    />
+                    {field.state.meta.errors.map((error, index) => (
+                      <p key={index} className="text-xs text-pink-500">
+                        {typeof error === 'string' ? error : error?.message || String(error)}
+                      </p>
+                    ))}
+                  </div>
+                )
+              }}
+            </form.Field>
+            <form.Field name="testCases">
+              {field => {
+                const testCasesOptions = testCases.map(testCase => ({
+                  value: testCase.id,
+                  label: testCase.title,
+                }))
+                return (
+                  <div className="mb-6 flex flex-col gap-2">
+                    <Label htmlFor={field.name} className="font-bold">
+                      Test Cases
+                    </Label>
+                    <MultiSelectWithPreview
+                      id={field.name}
+                      className="w-full"
+                      options={testCasesOptions}
+                      onSelectChange={value => {
+                        field.handleChange(value)
+                      }}
+                      defaultSelectedValues={field.state.value}
+                      placeholder="Select test case(s)"
+                      emptyMessage="No test case(s) found"
+                      selectedLabel="Selected test case(s)"
+                      searchPlaceholder="Search test cases..."
+                    />
+                  </div>
+                )
+              }}
+            </form.Field>
+            <form.Field name="moduleId">
+              {field => {
+                return (
+                  <div className="mb-6 flex flex-col gap-2">
+                    <Label htmlFor={field.name} className="font-bold">
+                      Module
+                    </Label>
+                    <Select value={field.state.value} onValueChange={value => field.handleChange(value)}>
+                      <SelectTrigger className="w-full bg-background">
+                        <SelectValue placeholder="Select a module" />
+                      </SelectTrigger>
+                      <SelectContent className="w-full">
+                        {moduleList.map(module => (
+                          <SelectItem key={module.id} value={module.id}>
+                            {module.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                )
+              }}
+            </form.Field>
+            <form.Field name="tagIds">
+              {field => {
+                const tagsOptions = tags.map(tag => ({
+                  value: tag.id,
+                  label: tag.name,
+                }))
+                return (
+                  <div className="mb-6 flex flex-col gap-2">
+                    <Label htmlFor={field.name} className="font-bold">
+                      Tags
+                    </Label>
+                    <MultiSelectWithPreview
+                      id={field.name}
+                      options={tagsOptions}
+                      onSelectChange={value => {
+                        field.handleChange(value)
+                      }}
+                      defaultSelectedValues={field.state.value || []}
+                      placeholder="Select tag(s)"
+                      emptyMessage="No tag(s) found"
+                      selectedLabel="Selected tag(s)"
+                      searchPlaceholder="Search tags..."
+                    />
+                  </div>
+                )
+              }}
+            </form.Field>
+            <form.Subscribe selector={formState => [formState.canSubmit, formState.isSubmitting]}>
+              {([canSubmit, isSubmitting]) => (
+                <Button type="submit" disabled={!canSubmit} className="hover:bg-emerald-500">
+                  <Save className="h-4 w-4" />
+                  <span className="font-bold">{isSubmitting ? '...' : 'Save'}</span>
+                </Button>
+              )}
+            </form.Subscribe>
+          </form>
+        </CardContent>
+      </Card>
+      <div className="lg:w-1/3">
+        <Card className="border-gray-700 bg-gray-500/10">
+          <CardHeader className="mb-2">
+            <CardTitle className="flex items-center gap-2 text-xl text-primary">
+              <Info className="h-5 w-5" />
+              <span className="font-bold">Quick Tips</span>
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-6">
+            <div className="flex items-start gap-4">
+              <span className="flex h-6 w-6 items-center justify-center rounded-full bg-emerald-500/10 text-emerald-500">
+                1
+              </span>
+              <div className="flex flex-col gap-1">
+                <span className="text-base font-bold">Choose a descriptive name</span>
+                <span className="text-sm text-muted-foreground">
+                  Use clear, specific names that indicate the purpose
+                </span>
+              </div>
+            </div>
+            <div className="flex items-start gap-4">
+              <span className="flex h-6 w-6 items-center justify-center rounded-full bg-emerald-500/10 text-emerald-500">
+                2
+              </span>
+              <div className="flex flex-col gap-1">
+                <span className="text-base font-bold">Group related tests</span>
+                <span className="text-sm text-muted-foreground">
+                  Organize tests that validate the same feature together
+                </span>
+              </div>
+            </div>
+            <div className="flex items-start gap-4">
+              <span className="flex h-6 w-6 items-center justify-center rounded-full bg-emerald-500/10 text-emerald-500">
+                3
+              </span>
+              <div className="flex flex-col gap-1">
+                <span className="text-base font-bold">Use meaningful tags</span>
+                <span className="text-sm text-muted-foreground">Tags help filter and categorize effectively</span>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}

package/templates/default/src/app/(base)/test-suites/test-suite-table-columns.tsx

@@ -0,0 +1,97 @@
+'use client'
+
+import { DataTableColumnHeader } from '@/components/ui/data-table-column-header'
+import { TestSuite, Tag, TestCase, Module } from '@prisma/client'
+import { ColumnDef } from '@tanstack/react-table'
+
+import { Checkbox } from '@/components/ui/checkbox'
+import TableActions from '@/components/table/table-actions'
+import { deleteTestSuiteAction } from '@/actions/test-suite/test-suite-actions'
+import { formatDateTime } from '@/lib/utils'
+import { Badge } from '@/components/ui/badge'
+export const testSuiteTableCols: ColumnDef<TestSuite & { tags?: Tag[]; module: Module; 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,
+  },
+  {
+    accessorKey: 'name',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Name" />,
+  },
+  {
+    accessorKey: 'description',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Description" />,
+  },
+  {
+    accessorKey: 'module.name',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Module" />,
+    cell: ({ row }) => {
+      const testSuite = row.original
+      return <Badge variant="outline">{testSuite.module.name}</Badge>
+    },
+  },
+  {
+    accessorKey: 'testCases.length',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Total Test Cases" />,
+    cell: ({ row }) => {
+      const testSuite = row.original
+      return <div>{testSuite.testCases.length}</div>
+    },
+  },
+  {
+    accessorKey: 'tags',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Tags" />,
+    cell: ({ row }) => {
+      const testSuite = row.original
+      const tags = testSuite.tags || []
+      return (
+        <div className="flex flex-wrap gap-1">
+          {tags.length > 0 ? tags.map(tag => <Badge key={tag.id}>{tag.name}</Badge>) : '-'}
+        </div>
+      )
+    },
+  },
+  {
+    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 testSuite = row.original
+      return (
+        <TableActions
+          modifyLink={`/test-suites/modify/${testSuite.id}`}
+          deleteHandler={() => deleteTestSuiteAction([testSuite.id])}
+        />
+      )
+    },
+  },
+]

package/templates/default/src/app/(base)/test-suites/test-suite-table.tsx

@@ -0,0 +1,29 @@
+import { DataTable } from '@/components/ui/data-table'
+import React from 'react'
+import { testSuiteTableCols } from './test-suite-table-columns'
+import { getAllTestSuitesAction, deleteTestSuiteAction } from '@/actions/test-suite/test-suite-actions'
+import { Module, TestCase, TestSuite, Tag } from '@prisma/client'
+
+const TestSuiteTable = async () => {
+  const { data: testSuites, error: testSuitesError } = await getAllTestSuitesAction()
+
+  if (testSuitesError) {
+    return <div>Error: {testSuitesError}</div>
+  }
+
+  return (
+    <>
+      <DataTable
+        columns={testSuiteTableCols}
+        data={testSuites as (TestSuite & { tags?: Tag[]; module: Module; testCases: TestCase[] })[]}
+        filterColumn="name"
+        filterPlaceholder="Filter by name..."
+        createLink="/test-suites/create"
+        modifyLink="/test-suites/modify"
+        deleteAction={deleteTestSuiteAction}
+      />
+    </>
+  )
+}
+
+export default TestSuiteTable

package/templates/default/src/app/(dashboard-components)/app-drawer.tsx

@@ -0,0 +1,187 @@
+'use client'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { AlertCircle, AlertTriangle, Clock, XCircle } from 'lucide-react'
+import { DashboardMetrics } from '@prisma/client'
+import { useRouter } from 'next/navigation'
+
+type AppDrawerItem = {
+  title: string
+  icon: React.ReactNode
+  color: keyof typeof AppDrawerItemColor
+  count: number
+  onClick?: () => void
+}
+
+export const AppDrawerItemColor = {
+  red: {
+    buttonColor: 'bg-red-500/20 hover:bg-red-500/25',
+    iconColor: 'text-red-500',
+    badgeColor: 'bg-red-400 text-red-900',
+  },
+  green: {
+    buttonColor: 'bg-green-500/20 hover:bg-green-500/25',
+    iconColor: 'text-green-500',
+    badgeColor: 'bg-green-400 text-green-800',
+  },
+  yellow: {
+    buttonColor: 'bg-yellow-500/20 hover:bg-yellow-500/25',
+    iconColor: 'text-yellow-500',
+    badgeColor: 'bg-yellow-400 text-yellow-800',
+  },
+  blue: {
+    buttonColor: 'bg-blue-500/20 hover:bg-blue-500/25',
+    iconColor: 'text-blue-500',
+    badgeColor: 'bg-blue-400 text-blue-800',
+  },
+  emerald: {
+    buttonColor: 'bg-emerald-500/20 hover:bg-emerald-500/25',
+    iconColor: 'text-emerald-500',
+    badgeColor: 'bg-emerald-400 text-emerald-800',
+  },
+  indigo: {
+    buttonColor: 'bg-indigo-500/20 hover:bg-indigo-500/25',
+    iconColor: 'text-indigo-500',
+    badgeColor: 'bg-indigo-400 text-indigo-800',
+  },
+  purple: {
+    buttonColor: 'bg-purple-500/20 hover:bg-purple-500/25',
+    iconColor: 'text-purple-500',
+    badgeColor: 'bg-purple-400 text-purple-800',
+  },
+  pink: {
+    buttonColor: 'bg-pink-500/20 hover:bg-pink-500/25',
+    iconColor: 'text-pink-500',
+    badgeColor: 'bg-pink-400 text-pink-800',
+  },
+  rose: {
+    buttonColor: 'bg-rose-500/20 hover:bg-rose-500/25',
+    iconColor: 'text-rose-500',
+    badgeColor: 'bg-rose-400 text-rose-800',
+  },
+  fuchsia: {
+    buttonColor: 'bg-fuchsia-500/20 hover:bg-fuchsia-500/25',
+    iconColor: 'text-fuchsia-500',
+    badgeColor: 'bg-fuchsia-400 text-fuchsia-800',
+  },
+  violet: {
+    buttonColor: 'bg-violet-500/20 hover:bg-violet-500/25',
+    iconColor: 'text-violet-500',
+    badgeColor: 'bg-violet-400 text-violet-800',
+  },
+  sky: {
+    buttonColor: 'bg-sky-500/20 hover:bg-sky-500/25',
+    iconColor: 'text-sky-500',
+    badgeColor: 'bg-sky-400 text-sky-800',
+  },
+  orange: {
+    buttonColor: 'bg-orange-500/20 hover:bg-orange-500/25',
+    iconColor: 'text-orange-500',
+    badgeColor: 'bg-orange-400 text-orange-800',
+  },
+  gray: {
+    buttonColor: 'bg-gray-500/20 hover:bg-gray-500/25',
+    iconColor: 'text-gray-500',
+    badgeColor: 'bg-gray-400 text-gray-800',
+  },
+}
+
+export const AppDrawerItem = ({
+  title,
+  icon,
+  colorKey,
+  count,
+  onClick,
+  isActive,
+}: {
+  title: string
+  icon: React.ReactNode
+  colorKey: keyof typeof AppDrawerItemColor
+  count: number
+  isActive?: boolean
+  onClick?: () => void
+}) => {
+  const color = !isActive ? AppDrawerItemColor.gray : AppDrawerItemColor[colorKey]
+  return (
+    <Button
+      variant="outline"
+      className={`relative flex h-fit w-full flex-col items-center justify-center border-none hover:text-gray-200 ${color.buttonColor} px-2`}
+      onClick={onClick}
+      disabled={!isActive}
+    >
+      <div className={`${color.iconColor} [&_svg]:!h-6 [&_svg]:!w-6`}>{icon}</div>
+      <div className="text-xs font-medium text-gray-200">{title}</div>
+      <div
+        className={`absolute right-[-8px] top-[-8px] flex h-4 w-4 items-center justify-center rounded-full ${color.badgeColor} p-2.5 text-xs`}
+      >
+        {count}
+      </div>
+    </Button>
+  )
+}
+
+export default function AppDrawer({ metrics, title, description }: { metrics: DashboardMetrics | null, title: string, description: string }) {
+  const router = useRouter()
+  const items: AppDrawerItem[] = [
+    {
+      title: 'Failed Runs',
+      icon: <XCircle className="h-4 w-4" />,
+      color: 'orange',
+      count: metrics?.failedRecentRunsCount ?? 0,
+      onClick: () => {
+        router.push('/test-runs?filter=recentFailed')
+      },
+    },
+    {
+      title: 'Failing Tests',
+      icon: <AlertCircle className="h-4 w-4" />,
+      color: 'rose',
+      count: metrics?.repeatedlyFailingTestsCount ?? 0,
+      onClick: () => {
+        router.push('/reports/test-cases?filter=repeatedlyFailing')
+      },
+    },
+    {
+      title: 'Flaky Tests',
+      icon: <AlertTriangle className="h-4 w-4" />,
+      color: 'yellow',
+      count: metrics?.flakyTestsCount ?? 0,
+      onClick: () => {
+        router.push('/reports/test-cases?filter=flaky')
+      },
+    },
+    {
+      title: 'Unexecuted Suites',
+      icon: <Clock className="h-4 w-4" />,
+      color: 'blue',
+      count: metrics?.suitesNotExecutedRecentlyCount ?? 0,
+      onClick: () => {
+        router.push('/reports/test-suites?filter=notExecutedRecently')
+      },
+    },
+  ]
+
+  return (
+    <Card id="container" className="w-fit border-gray-600/10 bg-gray-600/10">
+      <CardHeader id="header">
+        <CardTitle className="text-primary">{title}</CardTitle>
+        <CardDescription>{description}</CardDescription>
+      </CardHeader>
+      <CardContent id="content">
+        <div className="grid grid-cols-2 gap-4 gap-y-6">
+          {items.map(item => (
+            <AppDrawerItem
+              key={item.title}
+              title={item.title}
+              icon={item.icon}
+              colorKey={item.color}
+              count={item.count}
+              onClick={item.onClick}
+              isActive={item.count > 0 ? true : false}
+            />
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

package/templates/default/src/app/(dashboard-components)/data-card-grid.tsx

@@ -0,0 +1,13 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+
+export const DataCardGrid = ({ children }: { children: React.ReactNode }) => {
+    return <Card className="border-gray-600/10 bg-gray-600/10 w-fit">
+        <CardHeader>
+            <CardTitle className="text-primary">States</CardTitle>
+            <CardDescription>Overview of entity states</CardDescription>
+        </CardHeader>
+        <CardContent className="grid grid-cols-2 gap-4">
+            {children}
+        </CardContent>
+    </Card>
+}

package/templates/default/src/app/(dashboard-components)/data-card.tsx

@@ -0,0 +1,27 @@
+'use client'
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardTitle, CardHeader } from "@/components/ui/card";
+import { ExternalLink } from "lucide-react";
+import { useRouter } from "next/navigation";
+export default function DataCard({ title, value, link }: { title: string, value: number, link: string }) {
+    const router = useRouter()
+    return (
+        <Card className="h-fit border-gray-600/10 bg-gray-600/10 min-w-40">
+            <CardHeader className="flex items-center justify-between flex-row p-2">
+                <CardTitle className={`text-xs font-normal ${value > 0 ? 'text-primary' : 'text-gray-400'}`}>{title}</CardTitle>
+                <div className="flex items-center gap-2">
+                    <Button variant="outline" className="text-primary hover:text-primary/80 px-2 py-1 bg-inherit border-gray-600/15 hover:bg-emerald-400/10"
+                        disabled={value === 0}
+                        onClick={() => router.push(link)}
+                        size="sm"
+                    >
+                        <ExternalLink className="h-4 w-4" />
+                    </Button>
+                </div>
+            </CardHeader>
+            <CardContent className="h-full px-2 py-1">
+                <div className={`text-2xl h-full flex items-center font-bold ${value > 0 ? 'text-primary' : 'text-gray-400'}`}>{value}</div>
+            </CardContent>
+        </Card>
+    )
+}

package/templates/default/src/app/(dashboard-components)/execution-health-panel.tsx

@@ -0,0 +1,57 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { ChartConfig } from '@/components/ui/chart'
+import FeatureChart from '../(base)/reports/feature-chart'
+import { TestSuiteExecutionData } from '@/actions/dashboard/dashboard-actions'
+
+const colorMap = {
+    passed: 'oklch(59.6% 0.145 163.225)',
+    failed: 'oklch(59.2% 0.249 0.584)',
+    cancelled: 'oklch(55.4% 0.046 257.417)',
+    unknown: 'oklch(79.5% 0.184 86.047)',
+}
+
+const resultByTestSuiteBarChartConfig = {
+    feature: {
+        label: 'Test Suite',
+    },
+    passed: {
+        label: 'Passed',
+        color: colorMap.passed,
+    },
+    failed: {
+        label: 'Failed',
+        color: colorMap.failed,
+    },
+    cancelled: {
+        label: 'Cancelled',
+        color: colorMap.cancelled,
+    },
+    unknown: {
+        label: 'Unknown',
+        color: colorMap.unknown,
+    },
+} satisfies ChartConfig
+
+interface ExecutionHealthPanelProps {
+    featureData: TestSuiteExecutionData
+}
+
+export const ExecutionHealthPanel = ({ featureData }: ExecutionHealthPanelProps) => {
+    return (
+        <Card className="border-gray-600/10 bg-gray-600/10 w-full h-full">
+            <CardHeader>
+                <CardTitle className="text-primary">Execution Health</CardTitle>
+                <CardDescription>Pass/fail rates by test suite across last 10 test runs</CardDescription>
+            </CardHeader>
+            <CardContent>
+                {featureData.length === 0 ? (
+                    <div className="flex h-[300px] items-center justify-center text-sm text-muted-foreground">
+                        No execution data available. Run some test suites to see execution health metrics.
+                    </div>
+                ) : (
+                    <FeatureChart config={resultByTestSuiteBarChartConfig} data={featureData} />
+                )}
+            </CardContent>
+        </Card>
+    )
+}