chore: batch supporting UI, settings schema, templates, and docs updates

admin-spa/src/components/forms/SchemaField.tsx

@@ -7,7 +7,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
 import { Checkbox } from '@/components/ui/checkbox';
 
 export interface FieldSchema {
-  type: 'text' | 'textarea' | 'email' | 'url' | 'number' | 'toggle' | 'checkbox' | 'select';
+  type: 'text' | 'textarea' | 'email' | 'url' | 'number' | 'toggle' | 'checkbox' | 'select' | 'multiselect';
   label: string;
   description?: string;
   placeholder?: string;
@@ -47,8 +47,8 @@ export function SchemaField({ name, schema, value, onChange, error }: SchemaFiel
         return (
           <Input
             type="number"
-            value={value || ''}
-            onChange={(e) => onChange(parseFloat(e.target.value))}
+            value={value ?? ''}
+            onChange={(e) => onChange(e.target.value === '' ? 0 : parseFloat(e.target.value))}
             placeholder={schema.placeholder}
             required={schema.required}
             min={schema.min}
@@ -110,6 +110,35 @@ export function SchemaField({ name, schema, value, onChange, error }: SchemaFiel
           </Select>
         );
 
+      case 'multiselect':
+        const selectedValues = Array.isArray(value) ? value : [];
+        return (
+          <div className="flex flex-wrap gap-2">
+            {schema.options && Object.entries(schema.options).map(([key, label]) => (
+              <label
+                key={key}
+                className={`flex items-center gap-2 px-3 py-2 rounded-lg border cursor-pointer transition-colors ${
+                  selectedValues.includes(key)
+                    ? 'bg-primary/10 border-primary text-primary'
+                    : 'bg-background border-input hover:bg-muted'
+                }`}
+              >
+                <Checkbox
+                  checked={selectedValues.includes(key)}
+                  onCheckedChange={(checked) => {
+                    if (checked) {
+                      onChange([...selectedValues, key]);
+                    } else {
+                      onChange(selectedValues.filter((v: string) => v !== key));
+                    }
+                  }}
+                />
+                <span className="text-sm">{label}</span>
+              </label>
+            ))}
+          </div>
+        );
+
       default:
         return (
           <Input