create-appraisejs 0.3.0 → 0.3.1-alpha.0

package/templates/blank/src/app/(base)/locators/modify/[id]/page.tsx

@@ -55,7 +55,7 @@ const ModifyLocator = async ({ params }: { params: Promise<{ id: string }> }) =>
       <div className="mb-8">
         <PageHeader>
           <span className="flex items-center">
-            <Crosshair className="mr-2 h-8 w-8" />
+            <Crosshair className="mr-2 size-8" />
             Modify Locator
           </span>
         </PageHeader>

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

@@ -27,7 +27,7 @@ const Locators = async () => {
     return (
       <div className="flex min-h-[calc(100vh-20rem)] items-center justify-center">
         <EmptyState
-          icon={<Code className="h-8 w-8" />}
+          icon={<Code className="size-8" />}
           title="No locators found"
           description="Get started by creating a locator to identify elements on your pages"
           createRoute="/locators/create"
@@ -43,13 +43,11 @@ const Locators = async () => {
         <div>
           <PageHeader>
             <span className="flex items-center">
-              <Code className="mr-2 h-8 w-8" />
+              <Code className="mr-2 size-8" />
               Locators
             </span>
           </PageHeader>
-          <HeaderSubtitle>
-            Locators are the elements that are used to identify the elements on the page
-          </HeaderSubtitle>
+          <HeaderSubtitle>Locators are the elements that are used to identify the elements on the page</HeaderSubtitle>
         </div>
       </div>
       <Suspense fallback={<DataTableSkeleton />}>

package/templates/blank/src/app/(base)/locators/picker/page.tsx

@@ -1,5 +1,11 @@
+import type { Metadata } from 'next'
 import { redirect } from 'next/navigation'
 
+export const metadata: Metadata = {
+  title: 'Appraise | Locator Picker',
+  description: 'Opens the locator workspace to pick or create locators.',
+}
+
 const LocatorPickerPage = () => {
   redirect('/locators/create')
 }

package/templates/blank/src/app/(base)/locators/sync-locators-button.tsx

@@ -2,66 +2,25 @@
 
 import { Button } from '@/components/ui/button'
 import { RefreshCw } from 'lucide-react'
-import { useState } from 'react'
-import { syncLocatorsFromFilesAction } from '@/actions/locator/locator-actions'
-import { toast } from '@/hooks/use-toast'
+import { useTransition } from 'react'
 import { useRouter } from 'next/navigation'
 
-export function SyncLocatorsButton() {
-  const [isLoading, setIsLoading] = useState(false)
-  const router = useRouter()
-
-  const handleSync = async () => {
-    setIsLoading(true)
-    try {
-      const result = await syncLocatorsFromFilesAction()
-
-      if (result.status === 200 && result.data) {
-        const { locatorsCreated, locatorsMergedToFile, conflicts, errors } = result.data as {
-          locatorsCreated: number
-          locatorsMergedToFile: number
-          conflicts: number
-          errors: string[]
-        }
+import { runLocatorFileSync } from './locator-file-sync'
 
-        if (errors.length > 0) {
-          toast({
-            variant: 'destructive',
-            title: 'Sync completed with errors',
-            description: `Created ${locatorsCreated} locators, merged ${locatorsMergedToFile} into files, ${conflicts} conflicts detected. ${errors.length} error(s) occurred.`,
-          })
-        } else {
-          toast({
-            title: 'Sync completed successfully',
-            description: `Created ${locatorsCreated} locators, merged ${locatorsMergedToFile} into files, ${conflicts} conflicts detected.`,
-          })
-        }
+export function SyncLocatorsButton() {
+  const [isPending, startTransition] = useTransition()
+  const { refresh } = useRouter()
 
-        // Refresh the page to show updated data
-        router.refresh()
-      } else {
-        toast({
-          variant: 'destructive',
-          title: 'Sync failed',
-          description: result.error || 'An error occurred during sync',
-        })
-      }
-    } catch (error) {
-      toast({
-        variant: 'destructive',
-        title: 'Sync failed',
-        description: `An error occurred: ${error}`,
-      })
-    } finally {
-      setIsLoading(false)
-    }
+  const handleSync = () => {
+    startTransition(() => {
+      void runLocatorFileSync(refresh)
+    })
   }
 
   return (
-    <Button onClick={handleSync} disabled={isLoading} variant="outline">
-      <RefreshCw className={`h-4 w-4 ${isLoading ? 'animate-spin' : ''}`} />
-      {isLoading ? 'Syncing...' : 'Sync Locators'}
+    <Button onClick={handleSync} disabled={isPending} variant="outline">
+      <RefreshCw className={`size-4 ${isPending ? 'animate-spin' : ''}`} />
+      {isPending ? 'Syncing...' : 'Sync Locators'}
     </Button>
   )
 }
-

package/templates/blank/src/app/(base)/modules/modify/[id]/page.tsx

@@ -10,12 +10,13 @@ export const metadata: Metadata = {
 
 const ModifyModule = async ({ params }: { params: Promise<{ id: string }> }) => {
   const { id } = await params
-  const { data: moduleToBeEditedData, error: moduleToBeEditedError } = await getModuleByIdAction(id)
-
-  const { data: modulesData, error: modulesError } = await getAllModulesAction()
+  if (!id?.trim()) {
+    return <div>Error: Invalid module id.</div>
+  }
 
-  if (moduleToBeEditedError || modulesError) {
-    return <div>Error: {moduleToBeEditedError || modulesError}</div>
+  const { data: moduleToBeEditedData, error: moduleToBeEditedError } = await getModuleByIdAction(id)
+  if (moduleToBeEditedError) {
+    return <div>Error: {moduleToBeEditedError}</div>
   }
 
   const [moduleData] = getModuleTableRows([moduleToBeEditedData])
@@ -23,6 +24,11 @@ const ModifyModule = async ({ params }: { params: Promise<{ id: string }> }) =>
     return <div>Error: Module data is unavailable.</div>
   }
 
+  const { data: modulesData, error: modulesError } = await getAllModulesAction()
+  if (modulesError) {
+    return <div>Error: {modulesError}</div>
+  }
+
   const parentOptions = getModuleParentOptions(getModuleTableRows(modulesData), moduleData.id)
 
   return (

package/templates/blank/src/app/(base)/modules/module-form-helpers.ts

@@ -0,0 +1,12 @@
+import { moduleSchema, type Module as ModuleFormValues } from '@/constants/form-opts/module-form-opts'
+import type { ActionResponse } from '@/types/form/actionHandler'
+
+export type ModuleFormSubmitAction = (_prev: unknown, value: ModuleFormValues, id?: string) => Promise<ActionResponse>
+
+export const moduleFieldValidators = {
+  name: moduleSchema.shape.name,
+}
+
+export function getActionErrorMessage(response: ActionResponse) {
+  return response.error || response.message || 'Unable to save module.'
+}

package/templates/blank/src/app/(base)/modules/module-form.tsx

@@ -5,9 +5,10 @@ import ErrorMessage from '@/components/form/error-message'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
-import { formOpts, type Module, ROOT_MODULE_UUID } from '@/constants/form-opts/module-form-opts'
+import { moduleFormOpts, type Module, ROOT_MODULE_UUID } from '@/constants/form-opts/module-form-opts'
 import { toast } from '@/hooks/use-toast'
 import { useForm } from '@tanstack/react-form'
+import { TanStackForm } from '@/lib/form/tanstack-form'
 import { useRouter } from 'next/navigation'
 import {
   getActionErrorMessage,
@@ -30,6 +31,8 @@ type ModuleFieldErrorsProps = {
   isTouched: boolean
 }
 
+const EMPTY_PARENT_OPTIONS: ModuleParentOption[] = []
+
 function getErrorMessage(error: unknown) {
   if (typeof error === 'string') {
     return error
@@ -49,8 +52,8 @@ function ModuleFieldErrors({ errors, isTouched }: ModuleFieldErrorsProps) {
 
   return (
     <div className="flex flex-col gap-1" aria-live="polite">
-      {errors.map((error, index) => (
-        <ErrorMessage key={`${String(error)}-${index}`} message={getErrorMessage(error)} visible={true} />
+      {errors.map(error => (
+        <ErrorMessage key={getErrorMessage(error)} message={getErrorMessage(error)} visible={true} />
       ))}
     </div>
   )
@@ -60,14 +63,14 @@ const ModuleForm = ({
   defaultValues,
   successTitle,
   successMessage,
-  parentOptions = [],
+  parentOptions = EMPTY_PARENT_OPTIONS,
   id,
   onSubmitAction,
 }: ModuleFormProps) => {
-  const router = useRouter()
+  const { push } = useRouter()
   const form = useForm({
-    defaultValues: defaultValues ?? formOpts.defaultValues,
-    validators: formOpts.validators,
+    defaultValues: defaultValues ?? moduleFormOpts.defaultValues,
+    validators: moduleFormOpts.validators,
     onSubmit: async ({ value }) => {
       const res = await onSubmitAction(undefined, value, id)
       if (res.status === 200) {
@@ -75,7 +78,7 @@ const ModuleForm = ({
           title: successTitle,
           description: successMessage,
         })
-        router.push('/modules')
+        push('/modules')
       }
       if (res.status === 400) {
         toast({
@@ -94,13 +97,7 @@ const ModuleForm = ({
     },
   })
   return (
-    <form
-      onSubmit={e => {
-        e.preventDefault()
-        e.stopPropagation()
-        form.handleSubmit()
-      }}
-    >
+    <TanStackForm onSubmit={() => form.handleSubmit()}>
       <form.Field
         name="name"
         validators={{
@@ -125,9 +122,7 @@ const ModuleForm = ({
               <Select value={field.state.value || ROOT_MODULE_UUID} onValueChange={value => field.handleChange(value)}>
                 <SelectTrigger id={field.name}>
                   <SelectValue
-                    placeholder={
-                      parentOptions.length === 0 ? 'No parent modules available' : 'Select a parent or Root'
-                    }
+                    placeholder={parentOptions.length === 0 ? 'No parent modules available' : 'Select a parent or Root'}
                   />
                 </SelectTrigger>
                 <SelectContent>
@@ -152,7 +147,7 @@ const ModuleForm = ({
           </Button>
         )}
       </form.Subscribe>
-    </form>
+    </TanStackForm>
   )
 }
 

package/templates/blank/src/app/(base)/modules/module-helpers.test.ts

@@ -0,0 +1,48 @@
+import { describe, expect, it } from 'vitest'
+
+import {
+  getActionErrorMessage,
+  getModuleFormParentId,
+  getModuleParentOptions,
+  getModuleTableRows,
+} from './module-helpers'
+
+const moduleRow = {
+  id: 'module-1',
+  name: 'Payments',
+  parentId: null,
+  parent: null,
+  createdAt: new Date('2026-01-01T00:00:00.000Z'),
+  updatedAt: new Date('2026-01-02T00:00:00.000Z'),
+}
+
+describe('module helpers', () => {
+  it('filters action data to valid module table rows', () => {
+    expect(getModuleTableRows([moduleRow, { id: 'bad-row', name: 'Missing dates' }])).toEqual([moduleRow])
+    expect(getModuleTableRows(undefined)).toEqual([])
+  })
+
+  it('builds selectable parent options and excludes the edited module', () => {
+    expect(
+      getModuleParentOptions(
+        [
+          moduleRow,
+          {
+            ...moduleRow,
+            id: 'module-2',
+            name: 'Checkout',
+          },
+        ],
+        'module-1',
+      ),
+    ).toEqual([{ id: 'module-2', name: 'Checkout' }])
+  })
+
+  it('falls back to the root module parent id and formats action errors', () => {
+    expect(getModuleFormParentId(null)).toBe('00000000-0000-0000-0000-000000000000')
+    expect(getModuleFormParentId('module-1')).toBe('module-1')
+    expect(getActionErrorMessage({ error: 'Nope' })).toBe('Nope')
+    expect(getActionErrorMessage({ message: 'Try again' })).toBe('Try again')
+    expect(getActionErrorMessage({})).toBe('Unable to save module.')
+  })
+})

package/templates/blank/src/app/(base)/modules/module-helpers.ts

@@ -1,64 +1,4 @@
-import { ROOT_MODULE_UUID, moduleSchema, type Module as ModuleFormValues } from '@/constants/form-opts/module-form-opts'
-import type { ModuleWithParent } from '@/services/module/module-service'
-import type { ActionResponse, ActionResponseData } from '@/types/form/actionHandler'
-
-export type ModuleTableRow = ModuleWithParent
-
-export type ModuleParentOption = {
-  id: string
-  name: string
-}
-
-export type ModuleFormSubmitAction = (
-  _prev: unknown,
-  value: ModuleFormValues,
-  id?: string,
-) => Promise<ActionResponse>
-
-export const moduleFieldValidators = {
-  name: moduleSchema.shape.name,
-}
-
-export function getActionErrorMessage(response: ActionResponse) {
-  return response.error || response.message || 'Unable to save module.'
-}
-
-export function getModuleParentOptions(modules: ModuleTableRow[], excludedId?: string): ModuleParentOption[] {
-  return modules
-    .filter(module => module.id !== excludedId)
-    .map(module => ({
-      id: module.id,
-      name: module.name,
-    }))
-}
-
-export function getModuleFormParentId(parentId: string | null | undefined) {
-  return parentId ?? ROOT_MODULE_UUID
-}
-
-function isModuleParent(value: unknown): value is ModuleTableRow['parent'] {
-  return value === null || (typeof value === 'object' && value !== null && 'name' in value && typeof value.name === 'string')
-}
-
-function isModuleTableRow(value: unknown): value is ModuleTableRow {
-  return (
-    typeof value === 'object' &&
-    value !== null &&
-    'id' in value &&
-    typeof value.id === 'string' &&
-    'name' in value &&
-    typeof value.name === 'string' &&
-    'parentId' in value &&
-    (typeof value.parentId === 'string' || value.parentId === null) &&
-    'createdAt' in value &&
-    value.createdAt instanceof Date &&
-    'updatedAt' in value &&
-    value.updatedAt instanceof Date &&
-    'parent' in value &&
-    isModuleParent(value.parent)
-  )
-}
-
-export function getModuleTableRows(data: ActionResponseData | undefined): ModuleTableRow[] {
-  return Array.isArray(data) ? data.filter(isModuleTableRow) : []
-}
+export { getActionErrorMessage, moduleFieldValidators, type ModuleFormSubmitAction } from './module-form-helpers'
+export { getModuleFormParentId, getModuleParentOptions } from './module-parent-helpers'
+export { getModuleTableRows } from './module-row-helpers'
+export type { ModuleParentOption, ModuleTableRow } from './module-types'

package/templates/blank/src/app/(base)/modules/module-parent-helpers.ts

@@ -0,0 +1,16 @@
+import { ROOT_MODULE_UUID } from '@/constants/form-opts/module-form-opts'
+
+import type { ModuleParentOption, ModuleTableRow } from './module-types'
+
+export function getModuleParentOptions(modules: ModuleTableRow[], excludedId?: string): ModuleParentOption[] {
+  return modules
+    .filter(module => module.id !== excludedId)
+    .map(module => ({
+      id: module.id,
+      name: module.name,
+    }))
+}
+
+export function getModuleFormParentId(parentId: string | null | undefined) {
+  return parentId ?? ROOT_MODULE_UUID
+}

package/templates/blank/src/app/(base)/modules/module-row-helpers.ts

@@ -0,0 +1,32 @@
+import type { ActionResponseData } from '@/types/form/actionHandler'
+
+import type { ModuleTableRow } from './module-types'
+
+function isModuleParent(value: unknown): value is ModuleTableRow['parent'] {
+  return (
+    value === null || (typeof value === 'object' && value !== null && 'name' in value && typeof value.name === 'string')
+  )
+}
+
+function isModuleTableRow(value: unknown): value is ModuleTableRow {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'id' in value &&
+    typeof value.id === 'string' &&
+    'name' in value &&
+    typeof value.name === 'string' &&
+    'parentId' in value &&
+    (typeof value.parentId === 'string' || value.parentId === null) &&
+    'createdAt' in value &&
+    value.createdAt instanceof Date &&
+    'updatedAt' in value &&
+    value.updatedAt instanceof Date &&
+    'parent' in value &&
+    isModuleParent(value.parent)
+  )
+}
+
+export function getModuleTableRows(data: ActionResponseData | undefined): ModuleTableRow[] {
+  return Array.isArray(data) ? data.filter(isModuleTableRow) : []
+}

package/templates/blank/src/app/(base)/modules/module-types.ts

@@ -0,0 +1,8 @@
+import type { ModuleWithParent } from '@/services/module/module-service'
+
+export type ModuleTableRow = ModuleWithParent
+
+export type ModuleParentOption = {
+  id: string
+  name: string
+}

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

@@ -28,7 +28,7 @@ const Modules = async () => {
     return (
       <div className="flex min-h-[calc(100vh-20rem)] items-center justify-center">
         <EmptyState
-          icon={<Code className="h-8 w-8" />}
+          icon={<Code className="size-8" />}
           title="No modules found"
           description="Get started by creating a module to organize your application components"
           createRoute="/modules/create"
@@ -43,7 +43,7 @@ const Modules = async () => {
       <div className="mb-8">
         <PageHeader>
           <span className="flex items-center">
-            <Code className="mr-2 h-8 w-8" />
+            <Code className="mr-2 size-8" />
             Modules
           </span>
         </PageHeader>

package/templates/blank/src/app/(base)/reports/[id]/page.tsx

@@ -7,9 +7,7 @@ import { Metadata } from 'next'
 import ReportMetricCard from '../report-metric-card'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
-import OverviewChart from '../overview-chart'
-import FeatureChart from '../feature-chart'
-import DurationChart from '../duration-chart'
+import { DurationChart, FeatureChart, OverviewChart } from '../report-charts'
 import ReportViewTable from '../report-view-table'
 import { getReportByIdAction } from '@/actions/reports/report-actions'
 import { notFound } from 'next/navigation'
@@ -41,7 +39,7 @@ const testRunResultToBadge = (result: TestRunResult) => {
           variant="outline"
           className="flex items-center gap-2 rounded-xl border-green-700 bg-green-700/10 py-1 text-sm text-green-500"
         >
-          <CheckCircle className="h-4 w-4" />
+          <CheckCircle className="size-4" />
           PASSED
         </Badge>
       )
@@ -51,7 +49,7 @@ const testRunResultToBadge = (result: TestRunResult) => {
           variant="outline"
           className="flex items-center gap-2 rounded-xl border-red-700 bg-red-700/10 py-1 text-sm text-red-500"
         >
-          <XCircle className="h-4 w-4" />
+          <XCircle className="size-4" />
           FAILED
         </Badge>
       )
@@ -59,9 +57,9 @@ const testRunResultToBadge = (result: TestRunResult) => {
       return (
         <Badge
           variant="outline"
-          className="flex items-center gap-2 rounded-xl border-gray-700 bg-gray-700/35 py-1 text-sm text-gray-300"
+          className="flex items-center gap-2 rounded-xl border-zinc-700 bg-zinc-700/35 py-1 text-sm text-zinc-300"
         >
-          <XCircle className="h-4 w-4" />
+          <XCircle className="size-4" />
           CANCELLED
         </Badge>
       )
@@ -69,9 +67,9 @@ const testRunResultToBadge = (result: TestRunResult) => {
       return (
         <Badge
           variant="outline"
-          className="flex items-center gap-2 rounded-xl border-gray-700 bg-gray-700/10 py-1 text-sm text-gray-500"
+          className="flex items-center gap-2 rounded-xl border-zinc-700 bg-zinc-700/10 py-1 text-sm text-zinc-500"
         >
-          <Clock className="h-4 w-4" />
+          <Clock className="size-4" />
           UNKNOWN
         </Badge>
       )
@@ -114,7 +112,7 @@ const browserEngineToBadge = (browserEngine: BrowserEngine) => {
       return (
         <Badge
           variant="outline"
-          className="flex items-center gap-2 rounded-xl border-gray-700 bg-gray-700/10 py-1 text-sm text-gray-500"
+          className="flex items-center gap-2 rounded-xl border-zinc-700 bg-zinc-700/10 py-1 text-sm text-zinc-500"
         >
           Unknown
         </Badge>
@@ -130,7 +128,7 @@ const testRunStatusToBadge = (status: TestRunStatus) => {
           variant="outline"
           className="flex items-center gap-2 rounded-xl border-green-700 bg-green-700/10 py-1 text-sm text-green-500"
         >
-          <CheckCircle className="h-4 w-4" />
+          <CheckCircle className="size-4" />
           Completed
         </Badge>
       )
@@ -138,9 +136,9 @@ const testRunStatusToBadge = (status: TestRunStatus) => {
       return (
         <Badge
           variant="outline"
-          className="flex items-center gap-2 rounded-xl border-gray-700 bg-gray-700/10 py-1 text-sm text-gray-500"
+          className="flex items-center gap-2 rounded-xl border-zinc-700 bg-zinc-700/10 py-1 text-sm text-zinc-500"
         >
-          <XCircle className="h-4 w-4" />
+          <XCircle className="size-4" />
           Cancelled
         </Badge>
       )
@@ -148,9 +146,9 @@ const testRunStatusToBadge = (status: TestRunStatus) => {
       return (
         <Badge
           variant="outline"
-          className="flex items-center gap-2 rounded-xl border-gray-700 bg-gray-700/10 py-1 text-sm text-gray-500"
+          className="flex items-center gap-2 rounded-xl border-zinc-700 bg-zinc-700/10 py-1 text-sm text-zinc-500"
         >
-          <Clock className="h-4 w-4" />
+          <Clock className="size-4" />
           Unknown
         </Badge>
       )
@@ -180,11 +178,8 @@ const ViewReport = async ({ params }: { params: Promise<{ id: string }> }) => {
 
   return (
     <>
-
       <div>
-        <div className="w-fit mb-2">
-          {testRunResultToBadge(testRun.result)}
-        </div>
+        <div className="mb-2 w-fit">{testRunResultToBadge(testRun.result)}</div>
         <PageHeader className="mb-2 text-4xl">
           <div>
             <span>Test Run Report: </span>
@@ -193,14 +188,14 @@ const ViewReport = async ({ params }: { params: Promise<{ id: string }> }) => {
         </PageHeader>
         <div className="flex gap-2">
           {testRun.completedAt && (
-            <div className="flex items-center gap-1 text-sm text-gray-400">
-              <Calendar className="h-4 w-4" />
+            <div className="flex items-center gap-1 text-sm text-zinc-400">
+              <Calendar className="size-4" />
               {formatDateTime(testRun.completedAt)}
             </div>
           )}
           {testRun.completedAt && testRun.startedAt && (
-            <div className="flex items-center gap-1 text-sm text-gray-400">
-              <Clock className="h-4 w-4" />
+            <div className="flex items-center gap-1 text-sm text-zinc-400">
+              <Clock className="size-4" />
               {formatDuration(testRun.startedAt, testRun.completedAt)}
             </div>
           )}
@@ -214,14 +209,14 @@ const ViewReport = async ({ params }: { params: Promise<{ id: string }> }) => {
       </div>
       <Separator className="my-4 bg-muted" />
       <div className="flex gap-6">
-        <Card className="flex h-[420px] min-w-0 flex-1 flex-col shadow-none bg-gray-500/10 border-none">
+        <Card className="flex h-[420px] min-w-0 flex-1 flex-col border-none bg-zinc-500/10 shadow-none">
           <CardHeader className="flex-shrink-0">
             <div className="flex items-center gap-2">
-              <Info className="h-6 w-6" />
+              <Info className="size-6" />
               <CardTitle className="text-lg font-semibold">Configuration</CardTitle>
             </div>
           </CardHeader>
-          <CardContent className="flex flex-1 flex-col gap-6 overflow-y-auto overflow-x-hidden text-gray-200">
+          <CardContent className="flex flex-1 flex-col gap-6 overflow-y-auto overflow-x-hidden text-zinc-200">
             <div className="flex items-center justify-between gap-2 text-sm">
               <span>Environment Name</span>
               <span className="font-medium">{testRun.environment.name}</span>
@@ -248,16 +243,16 @@ const ViewReport = async ({ params }: { params: Promise<{ id: string }> }) => {
             </div>
           </CardContent>
         </Card>
-        <Card className="flex h-[420px] min-w-0 flex-1 flex-col shadow-none bg-gray-500/10 border-none">
-          <CardHeader className="flex-shrink-0 ">
+        <Card className="flex h-[420px] min-w-0 flex-1 flex-col border-none bg-zinc-500/10 shadow-none">
+          <CardHeader className="flex-shrink-0">
             <div className="flex items-center gap-2">
-              <ChartLine className="h-6 w-6" />
+              <ChartLine className="size-6" />
               <CardTitle className="text-lg font-semibold">Visualizations</CardTitle>
             </div>
           </CardHeader>
           <CardContent className="flex flex-1 flex-col overflow-hidden">
             <Tabs defaultValue="overview" className="flex min-w-0 flex-1 flex-col overflow-hidden">
-              <TabsList className="flex-shrink-0 bg-gray-500/15 w-fit mx-auto p-2">
+              <TabsList className="mx-auto w-fit flex-shrink-0 bg-zinc-500/15 p-2">
                 <TabsTrigger value="overview">Overview</TabsTrigger>
                 <TabsTrigger value="feature">Feature</TabsTrigger>
                 <TabsTrigger value="duration">Duration</TabsTrigger>