create-appraise 0.1.0

package/templates/default/src/components/navigation/entity-search-command.tsx

@@ -0,0 +1,116 @@
+'use client'
+
+import * as React from 'react'
+import { useEffect, useState, useMemo } from 'react'
+import { CommandGroup, CommandItem } from '../ui/command'
+import { ActionResponse } from '@/types/form/actionHandler'
+
+export interface EntitySearchCommandProps<T extends { id: string }> {
+  searchQuery: string
+  entityName: string
+  fetchAction: () => Promise<ActionResponse>
+  searchKey: keyof T
+  icon?: React.ReactNode
+  onSelect?: (entity: T) => void
+}
+
+export function EntitySearchCommand<T extends { id: string }>({
+  searchQuery,
+  entityName,
+  fetchAction,
+  searchKey,
+  icon,
+  onSelect,
+}: EntitySearchCommandProps<T>) {
+  const [entities, setEntities] = useState<T[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    let isMounted = true
+
+    const fetchEntities = async () => {
+      setIsLoading(true)
+      setError(null)
+      try {
+        const result = await fetchAction()
+        if (isMounted) {
+          if (result.status === 200 && result.data) {
+            setEntities(result.data as T[])
+          } else {
+            setError(result.error || 'Failed to fetch entities')
+          }
+          setIsLoading(false)
+        }
+      } catch (err) {
+        if (isMounted) {
+          setError(err instanceof Error ? err.message : 'An error occurred')
+          setIsLoading(false)
+        }
+      }
+    }
+
+    fetchEntities()
+
+    return () => {
+      isMounted = false
+    }
+  }, [fetchAction])
+
+  const filteredEntities = useMemo(() => {
+    if (!searchQuery.trim()) {
+      return entities
+    }
+
+    const query = searchQuery.toLowerCase()
+    return entities.filter(entity => {
+      const value = entity[searchKey]
+      if (typeof value === 'string') {
+        return value.toLowerCase().includes(query)
+      }
+      return false
+    })
+  }, [entities, searchQuery, searchKey])
+
+  if (isLoading) {
+    return (
+      <CommandGroup heading={`Searching ${entityName}...`}>
+        <CommandItem disabled>Loading...</CommandItem>
+      </CommandGroup>
+    )
+  }
+
+  if (error) {
+    return (
+      <CommandGroup heading="Error">
+        <CommandItem disabled className="text-destructive">
+          {error}
+        </CommandItem>
+      </CommandGroup>
+    )
+  }
+
+  if (filteredEntities.length === 0) {
+    return <></>
+  }
+
+  return (
+    <CommandGroup heading={`${entityName} Results`}>
+      {filteredEntities.map(entity => {
+        const displayValue = entity[searchKey]
+        return (
+          <CommandItem
+            key={entity.id}
+            value={typeof displayValue === 'string' ? displayValue : entity.id}
+            onSelect={() => {
+              onSelect?.(entity)
+            }}
+          >
+            {icon}
+            <span>{typeof displayValue === 'string' ? displayValue : entity.id}</span>
+          </CommandItem>
+        )
+      })}
+    </CommandGroup>
+  )
+}

package/templates/default/src/components/navigation/nav-card.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { Card, CardContent } from '../ui/card'
+import Link from 'next/link'
+
+const NavCard = ({
+  data,
+  href,
+  icon,
+}: {
+  data: { title: string; description: string }
+  href: string
+  icon: React.ReactNode
+}) => {
+  return (
+    <Link href={href} className="w-full">
+      <Card className="h-24 w-full border-none outline-none transition-colors hover:bg-accent hover:text-accent-foreground">
+        <CardContent className="flex h-full w-full items-center gap-3 p-4">
+          <div className="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-md text-accent-foreground">
+            {icon}
+          </div>
+          <div className="flex min-w-0 flex-1 flex-col justify-center">
+            <span className="truncate text-sm font-medium">{data.title}</span>
+            <span className="line-clamp-2 text-xs text-muted-foreground">{data.description}</span>
+          </div>
+        </CardContent>
+      </Card>
+    </Link>
+  )
+}
+
+export default NavCard

package/templates/default/src/components/navigation/nav-command.tsx

@@ -0,0 +1,508 @@
+'use client'
+
+import {
+  Blocks,
+  Code,
+  Command,
+  Component,
+  FileCheck,
+  Group,
+  LayoutDashboard,
+  LayoutTemplate,
+  ListChecks,
+  Plus,
+  Puzzle,
+  Server,
+  Tag,
+  TestTubeDiagonal,
+  TestTubes,
+} from 'lucide-react'
+import { Button } from '../ui/button'
+import { cn } from '@/lib/utils'
+import { useEffect, useState } from 'react'
+import { CommandEmpty, CommandList, CommandGroup, CommandItem, CommandDialog } from '../ui/command'
+import { DialogDescription, DialogTitle } from '../ui/dialog'
+import Link from 'next/link'
+import { useRouter } from 'next/navigation'
+import { CommandChainInput } from './command-chain-input'
+import { EntitySearchCommand } from './entity-search-command'
+import { getAllTestSuitesAction } from '@/actions/test-suite/test-suite-actions'
+import { TestSuite, TestCase, TemplateStep, TestRun, TemplateTestCase } from '@prisma/client'
+import { getAllTestCasesAction } from '@/actions/test-case/test-case-actions'
+import { getAllTemplateStepsAction } from '@/actions/template-step/template-step-actions'
+import { getAllTestRunsAction } from '@/actions/test-run/test-run-actions'
+import { getAllTemplateTestCasesAction } from '@/actions/template-test-case/template-test-case-actions'
+
+type CommandMode =
+  | null
+  | 'search-test-suite'
+  | 'search-test-case'
+  | 'search-template-step'
+  | 'search-test-run'
+  | 'search-template-test-case'
+
+const commandModeToPlaceholder = {
+  'search-test-suite': 'Search Test Suite by Name...',
+  'search-test-case': 'Search Test Case by Title...',
+  'search-template-step': 'Search Template Step by Name...',
+  'search-test-run': 'Search Test Run by Name...',
+  'search-template-test-case': 'Search Template Test Case by Name...',
+}
+
+export default function NavCommand({ className }: { className?: string }) {
+  const router = useRouter()
+
+  const [open, setOpen] = useState(false)
+  const [commandMode, setCommandMode] = useState<CommandMode>(null)
+  const [searchQuery, setSearchQuery] = useState('')
+  const [isMac, setIsMac] = useState(false)
+
+  // Detect platform only after mount to avoid hydration mismatch (server has no navigator)
+  useEffect(() => {
+    queueMicrotask(() => setIsMac(navigator.userAgent.toLowerCase().includes('mac')))
+  }, [])
+
+  useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault()
+        setOpen(open => !open)
+      }
+    }
+    document.addEventListener('keydown', down)
+    return () => document.removeEventListener('keydown', down)
+  }, [])
+
+  // Reset command mode and search query when dialog closes (defer setState to avoid sync setState in effect)
+  useEffect(() => {
+    if (!open) {
+      queueMicrotask(() => {
+        setCommandMode(null)
+        setSearchQuery('')
+      })
+    }
+  }, [open])
+
+  const handleTestSuiteSelect = (testSuite: TestSuite) => {
+    router.push(`/test-suites/modify/${testSuite.id}`)
+    setOpen(false)
+  }
+  const handleTestCaseSelect = (testCase: TestCase) => {
+    router.push(`/test-cases/modify/${testCase.id}`)
+    setOpen(false)
+  }
+  const handleTemplateStepSelect = (templateStep: TemplateStep) => {
+    router.push(`/template-steps/modify/${templateStep.id}`)
+    setOpen(false)
+  }
+  const handleTestRunSelect = (testRun: TestRun) => {
+    router.push(`/test-runs/${testRun.id}`)
+    setOpen(false)
+  }
+  const handleTemplateTestCaseSelect = (templateTestCase: TemplateTestCase) => {
+    router.push(`/template-test-cases/modify/${templateTestCase.id}`)
+    setOpen(false)
+  }
+
+  const getBadgeConfig = () => {
+    if (commandMode === 'search-test-suite') {
+      return {
+        label: 'Search Test Suite',
+        onClose: () => {
+          setCommandMode(null)
+          setSearchQuery('')
+        },
+      }
+    }
+    if (commandMode === 'search-test-case') {
+      return {
+        label: 'Search Test Case',
+        onClose: () => {
+          setCommandMode(null)
+          setSearchQuery('')
+        },
+      }
+    }
+    if (commandMode === 'search-template-step') {
+      return {
+        label: 'Search Template Step',
+        onClose: () => {
+          setCommandMode(null)
+          setSearchQuery('')
+        },
+      }
+    }
+    if (commandMode === 'search-test-run') {
+      return {
+        label: 'Search Test Run',
+        onClose: () => {
+          setCommandMode(null)
+          setSearchQuery('')
+        },
+      }
+    }
+    if (commandMode === 'search-template-test-case') {
+      return {
+        label: 'Search Template Test Case',
+        onClose: () => {
+          setCommandMode(null)
+          setSearchQuery('')
+        },
+      }
+    }
+    return undefined
+  }
+
+  return (
+    <>
+      <Button
+        variant="outline"
+        className={cn('hover:bg-accent-foreground/10 flex w-1/5 justify-between px-4 hover:text-primary', className)}
+        onClick={() => setOpen(true)}
+      >
+        <span>Open Command Palette</span>
+        <div className="flex items-center gap-1 text-xs text-muted-foreground">
+          <kbd className="rounded-md bg-muted px-1 text-xs text-gray-400">
+            {isMac ? <Command className="h-2 w-2 text-gray-400" /> : 'Ctrl'}
+          </kbd>
+          <Plus className="h-2 w-2 text-gray-400" />
+          <kbd className="rounded-md bg-muted px-1 text-xs text-gray-400">K</kbd>
+        </div>
+      </Button>
+      <CommandDialog open={open} onOpenChange={setOpen} shouldFilter={!commandMode}>
+        <DialogTitle className="sr-only">Command Palette</DialogTitle>
+        <DialogDescription className="sr-only">Search for a command or navigate to a page</DialogDescription>
+        <CommandChainInput
+          placeholder={commandMode ? commandModeToPlaceholder[commandMode] : 'Type a command or search...'}
+          badge={getBadgeConfig()}
+          value={searchQuery}
+          onValueChange={setSearchQuery}
+        />
+        <CommandList>
+          <CommandEmpty>No results found.</CommandEmpty>
+          {commandMode === 'search-test-suite' ? (
+            <EntitySearchCommand
+              searchQuery={searchQuery}
+              entityName="Test Suite"
+              fetchAction={getAllTestSuitesAction}
+              searchKey="name"
+              icon={<TestTubes className="h-4 w-4" />}
+              onSelect={handleTestSuiteSelect}
+            />
+          ) : commandMode === 'search-test-case' ? (
+            <EntitySearchCommand
+              searchQuery={searchQuery}
+              entityName="Test Case"
+              fetchAction={getAllTestCasesAction}
+              searchKey="title"
+              icon={<TestTubeDiagonal className="h-4 w-4" />}
+              onSelect={handleTestCaseSelect}
+            />
+          ) : commandMode === 'search-template-step' ? (
+            <EntitySearchCommand
+              searchQuery={searchQuery}
+              entityName="Template Step"
+              fetchAction={getAllTemplateStepsAction}
+              searchKey="name"
+              icon={<LayoutTemplate className="h-4 w-4" />}
+              onSelect={handleTemplateStepSelect}
+            />
+          ) : commandMode === 'search-test-run' ? (
+            <EntitySearchCommand
+              searchQuery={searchQuery}
+              entityName="Test Run"
+              fetchAction={getAllTestRunsAction}
+              searchKey="name"
+              icon={<ListChecks className="h-4 w-4" />}
+              onSelect={handleTestRunSelect}
+            />
+          ) : commandMode === 'search-template-test-case' ? (
+            <EntitySearchCommand
+              searchQuery={searchQuery}
+              entityName="Template Test Case"
+              fetchAction={getAllTemplateTestCasesAction}
+              searchKey="name"
+              icon={<Blocks className="h-4 w-4" />}
+              onSelect={handleTemplateTestCaseSelect}
+            />
+          ) : (
+            <>
+              <CommandGroup heading="Overview">
+                <CommandItem
+                  asChild
+                  onSelect={() => {
+                    setOpen(false)
+                    router.push('/')
+                  }}
+                >
+                  <Link href="/" onClick={() => setOpen(false)}>
+                    <LayoutDashboard className="h-4 w-4" />
+                    Dashboard
+                  </Link>
+                </CommandItem>
+              </CommandGroup>
+              <CommandGroup heading="Automate">
+                <CommandItem
+                  asChild
+                  onSelect={() => {
+                    setOpen(false)
+                    router.push('/test-suites')
+                  }}
+                >
+                  <Link href="/test-suites" onClick={() => setOpen(false)}>
+                    <TestTubes className="h-4 w-4" />
+                    Test Suites
+                  </Link>
+                </CommandItem>
+
+                <CommandItem
+                  asChild
+                  onSelect={() => {
+                    setOpen(false)
+                    router.push('/test-cases')
+                  }}
+                >
+                  <Link href="/test-cases" onClick={() => setOpen(false)}>
+                    <TestTubeDiagonal className="h-4 w-4" />
+                    Test Cases
+                  </Link>
+                </CommandItem>
+                <CommandItem
+                  asChild
+                  onSelect={() => {
+                    setOpen(false)
+                    router.push('/test-runs')
+                  }}
+                >
+                  <Link href="/test-runs" onClick={() => setOpen(false)}>
+                    <ListChecks className="h-4 w-4" />
+                    Test Runs
+                  </Link>
+                </CommandItem>
+                <CommandItem
+                  asChild
+                  onSelect={() => {
+                    setOpen(false)
+                    router.push('/reports')
+                  }}
+                >
+                  <Link href="/reports" onClick={() => setOpen(false)}>
+                    <FileCheck className="h-4 w-4" />
+                    Reports
+                  </Link>
+                </CommandItem>
+                <CommandItem
+                  asChild
+                  onSelect={() => {
+                    setOpen(false)
+                    router.push('/test-runs/create')
+                  }}
+                >
+                  <Link href="/test-runs/create" onClick={() => setOpen(false)}>
+                    <ListChecks className="h-4 w-4" />
+                    Create Test Run
+                  </Link>
+                </CommandItem>
+                <CommandItem
+                  asChild
+                  onSelect={() => {
+                    setOpen(false)
+                    router.push('/test-suites/create')
+                  }}
+                >
+                  <Link href="/test-suites/create" onClick={() => setOpen(false)}>
+                    <TestTubes className="h-4 w-4" />
+                    Create Test Suite
+                  </Link>
+                </CommandItem>
+                <CommandItem
+                  asChild
+                  onSelect={() => {
+                    setOpen(false)
+                    router.push('/test-cases/create')
+                  }}
+                >
+                  <Link href="/test-cases/create" onClick={() => setOpen(false)}>
+                    <TestTubeDiagonal className="h-4 w-4" />
+                    Create Test Case
+                  </Link>
+                </CommandItem>
+              </CommandGroup>
+              <CommandGroup heading="Template">
+                <CommandItem
+                  asChild
+                  onSelect={() => {
+                    setOpen(false)
+                    router.push('/template-steps')
+                  }}
+                >
+                  <Link href="/template-steps" onClick={() => setOpen(false)}>
+                    <LayoutTemplate className="h-4 w-4" />
+                    Template Steps
+                  </Link>
+                </CommandItem>
+                <CommandItem
+                  asChild
+                  onSelect={() => {
+                    setOpen(false)
+                    router.push('/template-step-groups')
+                  }}
+                >
+                  <Link href="/template-step-groups" onClick={() => setOpen(false)}>
+                    <Component className="h-4 w-4" />
+                    Template Step Groups
+                  </Link>
+                </CommandItem>
+                <CommandItem
+                  asChild
+                  onSelect={() => {
+                    setOpen(false)
+                    router.push('/template-test-cases')
+                  }}
+                >
+                  <Link href="/template-test-cases" onClick={() => setOpen(false)}>
+                    <Blocks className="h-4 w-4" />
+                    Template Test Cases
+                  </Link>
+                </CommandItem>
+                <CommandItem
+                  asChild
+                  onSelect={() => {
+                    setOpen(false)
+                    router.push('/template-steps/create')
+                  }}
+                >
+                  <Link href="/template-steps/create" onClick={() => setOpen(false)}>
+                    <LayoutTemplate className="h-4 w-4" />
+                    Create Template Step
+                  </Link>
+                </CommandItem>
+                <CommandItem
+                  asChild
+                  onSelect={() => {
+                    setOpen(false)
+                    router.push('/template-test-cases/create')
+                  }}
+                >
+                  <Link href="/template-test-cases/create" onClick={() => setOpen(false)}>
+                    <Blocks className="h-4 w-4" />
+                    Create Template Test Case
+                  </Link>
+                </CommandItem>
+              </CommandGroup>
+              <CommandGroup heading="Configuration">
+                <CommandItem
+                  asChild
+                  onSelect={() => {
+                    setOpen(false)
+                    router.push('/locators')
+                  }}
+                >
+                  <Link href="/locators" onClick={() => setOpen(false)}>
+                    <Code className="h-4 w-4" />
+                    Locators
+                  </Link>
+                </CommandItem>
+                <CommandItem
+                  asChild
+                  onSelect={() => {
+                    setOpen(false)
+                    router.push('/locator-groups')
+                  }}
+                >
+                  <Link href="/locator-groups" onClick={() => setOpen(false)}>
+                    <Group className="h-4 w-4" />
+                    Locator Groups
+                  </Link>
+                </CommandItem>
+                <CommandItem
+                  asChild
+                  onSelect={() => {
+                    setOpen(false)
+                    router.push('/modules')
+                  }}
+                >
+                  <Link href="/modules" onClick={() => setOpen(false)}>
+                    <Puzzle className="h-4 w-4" />
+                    Modules
+                  </Link>
+                </CommandItem>
+                <CommandItem
+                  asChild
+                  onSelect={() => {
+                    setOpen(false)
+                    router.push('/environments')
+                  }}
+                >
+                  <Link href="/environments" onClick={() => setOpen(false)}>
+                    <Server className="h-4 w-4" />
+                    Environments
+                  </Link>
+                </CommandItem>
+                <CommandItem
+                  asChild
+                  onSelect={() => {
+                    setOpen(false)
+                    router.push('/tags')
+                  }}
+                >
+                  <Link href="/tags" onClick={() => setOpen(false)}>
+                    <Tag className="h-4 w-4" />
+                    Tags
+                  </Link>
+                </CommandItem>
+              </CommandGroup>
+              <CommandGroup heading="Search">
+                <CommandItem
+                  onSelect={() => {
+                    setCommandMode('search-test-case')
+                    setSearchQuery('')
+                  }}
+                >
+                  <TestTubeDiagonal className="h-4 w-4" />
+                  Search Test Cases
+                </CommandItem>
+                <CommandItem
+                  onSelect={() => {
+                    setCommandMode('search-test-suite')
+                    setSearchQuery('')
+                  }}
+                >
+                  <TestTubes className="h-4 w-4" />
+                  Search Test Suites
+                </CommandItem>
+                <CommandItem
+                  onSelect={() => {
+                    setCommandMode('search-template-step')
+                    setSearchQuery('')
+                  }}
+                >
+                  <LayoutTemplate className="h-4 w-4" />
+                  Search Template Steps
+                </CommandItem>
+                <CommandItem
+                  onSelect={() => {
+                    setCommandMode('search-test-run')
+                    setSearchQuery('')
+                  }}
+                >
+                  <ListChecks className="h-4 w-4" />
+                  Search Test Runs
+                </CommandItem>
+                <CommandItem
+                  onSelect={() => {
+                    setCommandMode('search-template-test-case')
+                    setSearchQuery('')
+                  }}
+                >
+                  <Blocks className="h-4 w-4" />
+                  Search Template Test Cases
+                </CommandItem>
+              </CommandGroup>
+            </>
+          )}
+        </CommandList>
+      </CommandDialog>
+    </>
+  )
+}