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

package/templates/default/src/app/(base)/locator-groups/modify/[id]/page.tsx

@@ -1,46 +1,46 @@
-import { getLocatorGroupByIdAction } from '@/actions/locator-groups/locator-group-actions'
-import { LocatorGroup, Module } from '@prisma/client'
-import React from 'react'
-import LocatorGroupForm from '../../locator-group-form'
-import { updateLocatorGroupAction } from '@/actions/locator-groups/locator-group-actions'
-import { getAllModulesAction } from '@/actions/modules/module-actions'
-import { Metadata } from 'next'
-
-export const metadata: Metadata = {
-  title: 'Appraise | Modify Locator Group',
-  description: 'Update locator group configuration',
-}
-
-const ModifyLocator = async ({ params }: { params: Promise<{ id: string }> }) => {
-  const { id } = await params
-  const { data, error } = await getLocatorGroupByIdAction(id)
-
-  if (error) {
-    return <div>Error: {error}</div>
-  }
-
-  const locatorGroup = data as LocatorGroup
-
-  const { data: moduleList, error: moduleListError } = await getAllModulesAction()
-
-  if (moduleListError) {
-    return <div>Error: {moduleListError}</div>
-  }
-
-  return (
-    <LocatorGroupForm
-      defaultValues={{
-        name: locatorGroup.name ?? '',
-        moduleId: locatorGroup.moduleId ?? '',
-        route: locatorGroup.route ?? '',
-      }}
-      successTitle="Locator Group updated"
-      successMessage="Locator Group updated successfully"
-      onSubmitAction={updateLocatorGroupAction}
-      id={id}
-      moduleList={moduleList as Module[]}
-    />
-  )
-}
-
-export default ModifyLocator
+import { getLocatorGroupByIdAction } from '@/actions/locator-groups/locator-group-actions'
+import { LocatorGroup, Module } from '@prisma/client'
+import React from 'react'
+import LocatorGroupForm from '../../locator-group-form'
+import { updateLocatorGroupAction } from '@/actions/locator-groups/locator-group-actions'
+import { getAllModulesAction } from '@/actions/modules/module-actions'
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Appraise | Modify Locator Group',
+  description: 'Update locator group configuration',
+}
+
+const ModifyLocator = async ({ params }: { params: Promise<{ id: string }> }) => {
+  const { id } = await params
+  const { data, error } = await getLocatorGroupByIdAction(id)
+
+  if (error) {
+    return <div>Error: {error}</div>
+  }
+
+  const locatorGroup = data as LocatorGroup
+
+  const { data: moduleList, error: moduleListError } = await getAllModulesAction()
+
+  if (moduleListError) {
+    return <div>Error: {moduleListError}</div>
+  }
+
+  return (
+    <LocatorGroupForm
+      defaultValues={{
+        name: locatorGroup.name ?? '',
+        moduleId: locatorGroup.moduleId ?? '',
+        route: locatorGroup.route ?? '',
+      }}
+      successTitle="Locator Group updated"
+      successMessage="Locator Group updated successfully"
+      onSubmitAction={updateLocatorGroupAction}
+      id={id}
+      moduleList={moduleList as Module[]}
+    />
+  )
+}
+
+export default ModifyLocator

package/templates/default/src/app/(base)/locator-groups/page.tsx

@@ -1,7 +1,7 @@
 import PageHeader from '@/components/typography/page-header'
 import HeaderSubtitle from '@/components/typography/page-header-subtitle'
 import React from 'react'
-import { Group } from 'lucide-react'
+import { Group, Plus } from 'lucide-react'
 import LocatorGroupTable from './locator-group-table'
 import { Suspense } from 'react'
 import DataTableSkeleton from '@/components/loading-skeleton/data-table/data-table-skeleton'
@@ -9,6 +9,8 @@ import { getAllLocatorGroupsAction } from '@/actions/locator-groups/locator-grou
 import EmptyState from '@/components/data-state/empty-state'
 import { LocatorGroup } from '@prisma/client'
 import { Metadata } from 'next'
+import { Button } from '@/components/ui/button'
+import Link from 'next/link'
 
 export const metadata: Metadata = {
   title: 'Appraise | Locator Groups',
@@ -41,13 +43,23 @@ const LocatorGroups = async () => {
   return (
     <>
       <div className="mb-8">
-        <PageHeader>
-          <span className="flex items-center">
-            <Group className="mr-2 h-8 w-8" />
-            Locator Groups
-          </span>
-        </PageHeader>
-        <HeaderSubtitle>Organize locators for better maintainability and reusability</HeaderSubtitle>
+        <div className="flex items-center justify-between">
+          <div>
+            <PageHeader>
+              <span className="flex items-center">
+                <Group className="mr-2 h-8 w-8" />
+                Locator Groups
+              </span>
+            </PageHeader>
+            <HeaderSubtitle>Organize locators for better maintainability and reusability</HeaderSubtitle>
+          </div>
+          <Button variant="outline" asChild>
+            <Link href="/locators/create">
+              <Plus className="mr-2 h-4 w-4" />
+              Create Locator
+            </Link>
+          </Button>
+        </div>
       </div>
       <Suspense fallback={<DataTableSkeleton />}>
         <LocatorGroupTable />

package/templates/default/src/app/(base)/locators/create/create-locator-workspace.tsx

@@ -0,0 +1,542 @@
+'use client'
+
+import {
+  getLocatorPickerSessionAction,
+  savePickedLocatorAction,
+  startLocatorPickerSessionAction,
+} from '@/actions/locator-picker/locator-picker-actions'
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
+import { Badge } from '@/components/ui/badge'
+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 { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { Separator } from '@/components/ui/separator'
+import { Textarea } from '@/components/ui/textarea'
+import { toast } from '@/hooks/use-toast'
+import { inferGroupSuggestion, normalizeRoute, suggestLocatorName } from '@/lib/locator-picker/suggestions'
+import type { LocatorPickerSession } from '@/types/locator-picker'
+import type { Environment, LocatorGroup, Module } from '@prisma/client'
+import { ExternalLink, Loader2, Save, Target } from 'lucide-react'
+import { useRouter } from 'next/navigation'
+import { useEffect, useRef, useState } from 'react'
+
+interface CreateLocatorWorkspaceProps {
+  environments: Environment[]
+  locatorGroups: LocatorGroup[]
+  modules: Module[]
+  mode?: 'create' | 'modify'
+  locatorId?: string
+  initialValues?: {
+    locatorName?: string
+    selector?: string
+    resolutionMode?: 'existing' | 'create'
+    existingLocatorGroupId?: string
+    newLocatorGroupName?: string
+    route?: string
+    moduleId?: string
+  }
+}
+
+function statusTone(status: LocatorPickerSession['status']) {
+  switch (status) {
+    case 'picked':
+      return 'default'
+    case 'saving':
+      return 'secondary'
+    case 'closed':
+      return 'outline'
+    case 'error':
+      return 'destructive'
+    case 'ready':
+      return 'secondary'
+    case 'starting':
+    default:
+      return 'secondary'
+  }
+}
+
+function formatStatus(status: LocatorPickerSession['status']) {
+  if (status === 'picked') {
+    return 'Picked'
+  }
+
+  return status.charAt(0).toUpperCase() + status.slice(1)
+}
+
+export default function CreateLocatorWorkspace({
+  environments,
+  locatorGroups,
+  modules,
+  mode = 'create',
+  locatorId,
+  initialValues,
+}: CreateLocatorWorkspaceProps) {
+  const router = useRouter()
+  const isModifyMode = mode === 'modify'
+  const [sourceType, setSourceType] = useState<'environment' | 'url'>(environments.length > 0 ? 'environment' : 'url')
+  const [environmentId, setEnvironmentId] = useState(environments[0]?.id ?? '')
+  const [url, setUrl] = useState('')
+  const [session, setSession] = useState<LocatorPickerSession | null>(null)
+  const [isStarting, setIsStarting] = useState(false)
+  const [isSaving, setIsSaving] = useState(false)
+  const payloadSignatureRef = useRef('')
+
+  const [locatorName, setLocatorName] = useState(initialValues?.locatorName ?? '')
+  const [selector, setSelector] = useState(initialValues?.selector ?? '')
+  const [resolutionMode, setResolutionMode] = useState<'existing' | 'create'>(initialValues?.resolutionMode ?? 'existing')
+  const [existingLocatorGroupId, setExistingLocatorGroupId] = useState(initialValues?.existingLocatorGroupId ?? '')
+  const [newLocatorGroupName, setNewLocatorGroupName] = useState(initialValues?.newLocatorGroupName ?? '')
+  const [route, setRoute] = useState(normalizeRoute(initialValues?.route ?? '/'))
+  const [moduleId, setModuleId] = useState(initialValues?.moduleId ?? '')
+  const [lastAutoLocatorName, setLastAutoLocatorName] = useState(initialValues?.locatorName ?? '')
+  const [lastAutoSelector, setLastAutoSelector] = useState(initialValues?.selector ?? '')
+  const [lastAutoExistingGroupId, setLastAutoExistingGroupId] = useState(initialValues?.existingLocatorGroupId ?? '')
+  const [lastAutoGroupName, setLastAutoGroupName] = useState(initialValues?.newLocatorGroupName ?? '')
+  const [lastAutoRoute, setLastAutoRoute] = useState(normalizeRoute(initialValues?.route ?? '/'))
+  const [lastAutoModuleId, setLastAutoModuleId] = useState(initialValues?.moduleId ?? '')
+
+  const loadSession = async (sessionId: string, silent = false) => {
+    const response = await getLocatorPickerSessionAction(sessionId)
+    if (response.status === 200) {
+      setSession(response.data as LocatorPickerSession)
+    } else if (!silent) {
+      toast({
+        title: 'Unable to refresh the picker session',
+        description: response.error,
+        variant: 'destructive',
+      })
+    }
+  }
+
+  useEffect(() => {
+    if (!session?.sessionId || session.status === 'closed' || !session.companionPid) {
+      return
+    }
+
+    const intervalId = window.setInterval(() => {
+      void loadSession(session.sessionId, true)
+    }, 1500)
+
+    return () => window.clearInterval(intervalId)
+  }, [session?.companionPid, session?.sessionId, session?.status])
+
+  useEffect(() => {
+    const pickedLocator = session?.pickedLocator
+    if (!pickedLocator) {
+      return
+    }
+
+    const nextPayloadSignature = `${session?.updatedAt}:${pickedLocator.currentUrl}:${pickedLocator.selector}`
+    if (nextPayloadSignature === payloadSignatureRef.current) {
+      return
+    }
+
+    payloadSignatureRef.current = nextPayloadSignature
+    const timeoutId = window.setTimeout(() => {
+      if (selector === '' || selector === lastAutoSelector) {
+        setSelector(pickedLocator.selector)
+        setLastAutoSelector(pickedLocator.selector)
+      }
+
+      const suggestedName = suggestLocatorName(pickedLocator)
+      if (suggestedName && (locatorName === '' || locatorName === lastAutoLocatorName)) {
+        setLocatorName(suggestedName)
+        setLastAutoLocatorName(suggestedName)
+      }
+
+      const suggestion = inferGroupSuggestion(pickedLocator.pathname, pickedLocator.pageTitle, locatorGroups, modules)
+
+      if (route === '/' || route === '' || route === lastAutoRoute) {
+        setRoute(suggestion.route)
+        setLastAutoRoute(suggestion.route)
+      }
+
+      if (suggestion.mode === 'existing') {
+        setResolutionMode(currentMode => (currentMode === 'create' ? 'existing' : currentMode))
+
+        const nextExistingGroupId = suggestion.existingLocatorGroupId ?? ''
+        if (existingLocatorGroupId === '' || existingLocatorGroupId === lastAutoExistingGroupId) {
+          setExistingLocatorGroupId(nextExistingGroupId)
+          setLastAutoExistingGroupId(nextExistingGroupId)
+        }
+      } else {
+        if (
+          resolutionMode === 'create' ||
+          existingLocatorGroupId === '' ||
+          existingLocatorGroupId === lastAutoExistingGroupId
+        ) {
+          setResolutionMode('create')
+        }
+
+        if (newLocatorGroupName === '' || newLocatorGroupName === lastAutoGroupName) {
+          setNewLocatorGroupName(suggestion.suggestedGroupName)
+          setLastAutoGroupName(suggestion.suggestedGroupName)
+        }
+
+        if (moduleId === '' || moduleId === lastAutoModuleId) {
+          const nextModuleId = suggestion.suggestedModuleId ?? ''
+          setModuleId(nextModuleId)
+          setLastAutoModuleId(nextModuleId)
+        }
+      }
+    }, 0)
+
+    return () => window.clearTimeout(timeoutId)
+  }, [
+    existingLocatorGroupId,
+    lastAutoExistingGroupId,
+    lastAutoGroupName,
+    lastAutoLocatorName,
+    lastAutoModuleId,
+    lastAutoRoute,
+    lastAutoSelector,
+    locatorGroups,
+    locatorName,
+    moduleId,
+    modules,
+    newLocatorGroupName,
+    resolutionMode,
+    route,
+    selector,
+    session,
+  ])
+
+  const handleStart = async () => {
+    setIsStarting(true)
+    const response = await startLocatorPickerSessionAction({
+      environmentId: sourceType === 'environment' ? environmentId : undefined,
+      url: sourceType === 'url' ? url : undefined,
+    })
+    setIsStarting(false)
+
+    if (response.status !== 200 || !response.data) {
+      toast({
+        title: 'Unable to launch Chromium',
+        description: response.error,
+        variant: 'destructive',
+      })
+      return
+    }
+
+    setSession(response.data as LocatorPickerSession)
+    payloadSignatureRef.current = ''
+    setLastAutoLocatorName(locatorName)
+    setLastAutoSelector(selector)
+    setLastAutoExistingGroupId(existingLocatorGroupId)
+    setLastAutoGroupName(newLocatorGroupName)
+    setLastAutoRoute(route)
+    setLastAutoModuleId(moduleId)
+
+    toast({
+      title: 'Chromium launched',
+      description: 'Use the in-browser Appraise picker panel to start picking, click one element, then confirm Use selector.',
+    })
+  }
+
+  const handleSave = async () => {
+    setIsSaving(true)
+
+    const response = await savePickedLocatorAction({
+      locatorId,
+      sessionId: session?.sessionId,
+      locatorName,
+      selector,
+      resolutionMode,
+      existingLocatorGroupId: resolutionMode === 'existing' ? existingLocatorGroupId : undefined,
+      newLocatorGroupName: resolutionMode === 'create' ? newLocatorGroupName : undefined,
+      route: resolutionMode === 'create' ? route : undefined,
+      moduleId: resolutionMode === 'create' ? moduleId : undefined,
+    })
+
+    setIsSaving(false)
+
+    if (response.status === 200) {
+      toast({
+        title: isModifyMode ? 'Locator updated' : 'Locator saved',
+        description: response.message,
+      })
+      router.push('/locators')
+      router.refresh()
+      return
+    }
+
+    toast({
+      title: 'Unable to save locator',
+      description: response.error,
+      variant: 'destructive',
+    })
+  }
+
+  const canSave =
+    locatorName.trim() !== '' &&
+    selector.trim() !== '' &&
+    ((resolutionMode === 'existing' && existingLocatorGroupId !== '') ||
+      (resolutionMode === 'create' && newLocatorGroupName.trim() !== '' && moduleId !== ''))
+
+  return (
+    <div className="space-y-6">
+      <div className="grid gap-6 xl:grid-cols-[minmax(0,24rem)_minmax(0,1fr)]">
+        <Card>
+          <CardHeader>
+            <CardTitle>Launch Chromium Picker</CardTitle>
+            <CardDescription>
+              Start a Chromium window from an environment or direct URL. The companion injects its own floating picker
+              panel into that browser, so no extension is required. Use this to repick the selector while editing or to
+              capture a new one from scratch.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-5">
+            <RadioGroup
+              value={sourceType}
+              onValueChange={value => setSourceType(value as 'environment' | 'url')}
+              className="grid gap-3"
+            >
+              <label className="flex items-center gap-3 rounded-lg border p-3">
+                <RadioGroupItem value="environment" id="source-environment" disabled={environments.length === 0} />
+                <div>
+                  <div className="font-medium">Saved environment</div>
+                  <div className="text-sm text-muted-foreground">Launch from an existing base URL.</div>
+                </div>
+              </label>
+              <label className="flex items-center gap-3 rounded-lg border p-3">
+                <RadioGroupItem value="url" id="source-url" />
+                <div>
+                  <div className="font-medium">Direct URL</div>
+                  <div className="text-sm text-muted-foreground">Open any reachable page directly in Chromium.</div>
+                </div>
+              </label>
+            </RadioGroup>
+
+            {sourceType === 'environment' ? (
+              <div className="space-y-2">
+                <Label>Environment</Label>
+                <Select value={environmentId} onValueChange={setEnvironmentId}>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select an environment" />
+                  </SelectTrigger>
+                  <SelectContent isEmpty={environments.length === 0}>
+                    {environments.map(environment => (
+                      <SelectItem key={environment.id} value={environment.id}>
+                        {environment.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            ) : (
+              <div className="space-y-2">
+                <Label htmlFor="picker-url">URL</Label>
+                <Input
+                  id="picker-url"
+                  value={url}
+                  onChange={event => setUrl(event.target.value)}
+                  placeholder="https://example.com/login"
+                />
+              </div>
+            )}
+
+            <Button
+              type="button"
+              onClick={handleStart}
+              disabled={isStarting || (sourceType === 'environment' ? environmentId === '' : url.trim() === '')}
+              className="w-full"
+            >
+              {isStarting ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Target className="mr-2 h-4 w-4" />}
+              Launch Chromium
+            </Button>
+
+            <Alert>
+              <AlertTitle>Inside Chromium</AlertTitle>
+              <AlertDescription>
+                Use the Appraise picker panel in the page itself: start picking, hover to inspect, click one element,
+                then confirm Use selector. The final selector returns here automatically.
+              </AlertDescription>
+            </Alert>
+
+            {session ? (
+              <>
+                <Separator />
+                <div className="space-y-4">
+                  <div className="flex items-center justify-between gap-3">
+                    <div>
+                      <div className="text-sm font-medium">Session</div>
+                      <div className="text-xs text-muted-foreground">
+                        {session.launchSource.environmentName ?? session.launchSource.url}
+                      </div>
+                      {session.companionPid ? (
+                        <div className="text-[11px] text-muted-foreground">PID {session.companionPid}</div>
+                      ) : null}
+                    </div>
+                    <Badge variant={statusTone(session.status)}>{formatStatus(session.status)}</Badge>
+                  </div>
+
+                  <div className="space-y-2 text-sm">
+                    <div className="font-medium">Current page</div>
+                    <div className="break-all text-muted-foreground">{session.currentUrl || session.launchSource.url}</div>
+                    <div className="text-muted-foreground">{session.pageTitle || 'Waiting for page metadata'}</div>
+                  </div>
+
+                  {session.error ? (
+                    <Alert variant="destructive">
+                      <AlertTitle>Picker error</AlertTitle>
+                      <AlertDescription>{session.error}</AlertDescription>
+                    </Alert>
+                  ) : null}
+                </div>
+              </>
+            ) : null}
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>{isModifyMode ? 'Update Locator' : 'Finalize Locator'}</CardTitle>
+            <CardDescription>
+              Manual selector entry still works. When a picker result arrives, Appraise fills in the selector and route
+              defaults for you.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-5">
+            {session?.pickedLocator ? (
+              <div className="rounded-lg border bg-muted/30 p-4">
+                <div className="mb-2 flex items-center gap-2 text-sm font-medium">
+                  <ExternalLink className="h-4 w-4" />
+                  Picked from page
+                </div>
+                <div className="space-y-2 text-sm text-muted-foreground">
+                  <div className="break-all">{session.pickedLocator.selector}</div>
+                  <div>
+                    {session.pickedLocator.tagName}
+                    {session.pickedLocator.accessibleName ? ` • ${session.pickedLocator.accessibleName}` : ''}
+                  </div>
+                  <div className="break-all">{session.pickedLocator.currentUrl}</div>
+                </div>
+              </div>
+            ) : (
+              <Alert>
+                <AlertTitle>Waiting for a picked selector</AlertTitle>
+                <AlertDescription>
+                  You can keep working manually below, or launch Chromium and pick one live element to populate these
+                  fields.
+                </AlertDescription>
+              </Alert>
+            )}
+
+            <div className="grid gap-5 lg:grid-cols-2">
+              <div className="space-y-2">
+                <Label htmlFor="locator-name">Locator Name</Label>
+                <Input
+                  id="locator-name"
+                  value={locatorName}
+                  onChange={event => setLocatorName(event.target.value)}
+                  placeholder="Enter locator name"
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label>Group Resolution</Label>
+                <RadioGroup
+                  value={resolutionMode}
+                  onValueChange={value => setResolutionMode(value as 'existing' | 'create')}
+                  className="grid gap-3"
+                >
+                  <label className="flex items-center gap-3 rounded-lg border p-3">
+                    <RadioGroupItem value="existing" id="group-existing" />
+                    <div>
+                      <div className="font-medium">Use existing group</div>
+                      <div className="text-sm text-muted-foreground">Attach the locator to a saved route group.</div>
+                    </div>
+                  </label>
+                  <label className="flex items-center gap-3 rounded-lg border p-3">
+                    <RadioGroupItem value="create" id="group-create" />
+                    <div>
+                      <div className="font-medium">Create new group</div>
+                      <div className="text-sm text-muted-foreground">Create and sync a new locator group on save.</div>
+                    </div>
+                  </label>
+                </RadioGroup>
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="locator-selector">Selector</Label>
+              <Textarea
+                id="locator-selector"
+                value={selector}
+                onChange={event => setSelector(event.target.value)}
+                placeholder="Playwright selector or XPath"
+                className="min-h-28"
+              />
+            </div>
+
+            {resolutionMode === 'existing' ? (
+              <div className="space-y-2">
+                <Label>Locator Group</Label>
+                <Select value={existingLocatorGroupId} onValueChange={setExistingLocatorGroupId}>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select a locator group" />
+                  </SelectTrigger>
+                  <SelectContent isEmpty={locatorGroups.length === 0}>
+                    {locatorGroups.map(locatorGroup => (
+                      <SelectItem key={locatorGroup.id} value={locatorGroup.id}>
+                        {locatorGroup.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            ) : (
+              <div className="grid gap-5 lg:grid-cols-3">
+                <div className="space-y-2">
+                  <Label htmlFor="new-group-name">Locator Group Name</Label>
+                  <Input
+                    id="new-group-name"
+                    value={newLocatorGroupName}
+                    onChange={event => setNewLocatorGroupName(event.target.value)}
+                    placeholder="Enter group name"
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="new-group-route">Route</Label>
+                  <Input
+                    id="new-group-route"
+                    value={route}
+                    onChange={event => setRoute(normalizeRoute(event.target.value))}
+                    placeholder="/account/settings"
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <Label>Module</Label>
+                  <Select value={moduleId} onValueChange={setModuleId}>
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select a module" />
+                    </SelectTrigger>
+                    <SelectContent isEmpty={modules.length === 0}>
+                      {modules.map(module => (
+                        <SelectItem key={module.id} value={module.id}>
+                          {module.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+            )}
+
+            <div className="flex justify-end">
+              <Button type="button" onClick={handleSave} disabled={!canSave || isSaving}>
+                {isSaving ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Save className="mr-2 h-4 w-4" />}
+                {isModifyMode ? 'Update Locator' : 'Save Locator'}
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}