refactor: adopt shared Input/Textarea components across 15 files

Replace 42 raw <input>/<textarea> elements with <Input>/<Textarea>
from components/ui/. Consistent focus states, error handling, and
styling across all form fields.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/components/admin/CreateCategoryModal.tsx

@@ -1,7 +1,8 @@
 import { useState } from 'react'
-import { cn } from '@/lib/utils'
 import { Modal } from '@/components/common/Modal'
 import { Button } from '@/components/ui/Button'
+import { Input } from '@/components/ui/Input'
+import { Textarea } from '@/components/ui/Textarea'
 
 interface CreateCategoryModalProps {
   isOpen: boolean
@@ -93,7 +94,7 @@ export function CreateCategoryModal({
           <label htmlFor="name" className="mb-1 block text-sm font-medium text-foreground">
             Category Name <span className="text-red-400">*</span>
           </label>
-          <input
+          <Input
             id="name"
             type="text"
             value={name}
@@ -102,12 +103,6 @@ export function CreateCategoryModal({
             maxLength={100}
             placeholder="e.g., Network Troubleshooting"
             required
-            className={cn(
-              'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
-              'placeholder:text-muted-foreground',
-              'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
-              'disabled:opacity-50'
-            )}
           />
           <p className="mt-1 text-xs text-muted-foreground">
             {name.length}/100 characters
@@ -118,19 +113,13 @@ export function CreateCategoryModal({
           <label htmlFor="description" className="mb-1 block text-sm font-medium text-foreground">
             Description <span className="text-muted-foreground">(optional)</span>
           </label>
-          <textarea
+          <Textarea
             id="description"
             value={description}
             onChange={(e) => setDescription(e.target.value)}
             disabled={isSaving}
             rows={3}
             placeholder="Brief description of this category..."
-            className={cn(
-              'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
-              'placeholder:text-muted-foreground',
-              'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
-              'disabled:opacity-50'
-            )}
           />
         </div>
       </form>