@tidecloak/ui-framework 0.0.1

package/src/components/pages/base/TemplatesPageBase.tsx

@@ -0,0 +1,761 @@
+import React, { useState } from "react";
+import { FileCode, Pencil, Plus, Trash2, Search, Code, Variable } from "lucide-react";
+import { useAutoRefresh } from "../../../hooks/useAutoRefresh";
+import { RefreshButton } from "../../common/RefreshButton";
+import { LoadingSkeleton } from "../../common/LoadingSkeleton";
+import { EmptyState } from "../../common/EmptyState";
+import { DataTable } from "../../data-table/DataTable";
+import { ConfirmDialog } from "../../dialogs/ConfirmDialog";
+import { defaultComponents } from "../../ui";
+import type { BaseDataItem, ColumnDef, ToastConfig, ParameterDef, FormFieldType } from "../../../types";
+
+export interface TemplateParameter {
+  name: string;
+  type: "string" | "number" | "boolean" | "select";
+  helpText: string;
+  required: boolean;
+  defaultValue?: any;
+  options?: string[];
+}
+
+export interface PolicyTemplateItem extends BaseDataItem {
+  name: string;
+  description: string;
+  csCode: string;
+  parameters: TemplateParameter[];
+  createdBy: string;
+}
+
+export interface TemplateFormData {
+  name: string;
+  description: string;
+  csCode: string;
+  parameters: TemplateParameter[];
+}
+
+export interface TemplatesPageBaseProps<T extends PolicyTemplateItem = PolicyTemplateItem> {
+  /** Page title */
+  title?: string;
+  /** Page description */
+  description?: string;
+  /** Help text shown below description */
+  helpText?: React.ReactNode;
+  /** Data fetcher */
+  fetchData: () => Promise<{ templates: T[] }>;
+  /** Create handler */
+  onCreate: (data: TemplateFormData) => Promise<void>;
+  /** Update handler */
+  onUpdate: (id: string, data: Partial<TemplateFormData>) => Promise<void>;
+  /** Delete handler */
+  onDelete: (id: string) => Promise<void>;
+  /** Check if user can edit templates */
+  canEdit?: boolean;
+  /** Default code for new templates */
+  defaultCode?: string;
+  /** Code editor language */
+  codeLanguage?: string;
+  /** Toast notification handler */
+  toast?: (config: ToastConfig) => void;
+  /** Auto-refresh interval in seconds */
+  refreshInterval?: number;
+  /** Query invalidation handler */
+  invalidateQueries?: (queryKeys: string[]) => void;
+  /** Query keys */
+  queryKeys?: string[];
+  /** Custom column definitions */
+  columns?: ColumnDef<T>[];
+  /** Empty state configuration */
+  emptyState?: {
+    icon?: React.ReactNode;
+    title?: string;
+    description?: string;
+  };
+  /** Custom components */
+  components?: {
+    Card?: React.ComponentType<{ children: React.ReactNode; className?: string }>;
+    CardContent?: React.ComponentType<{ children: React.ReactNode; className?: string }>;
+    Button?: React.ComponentType<any>;
+    Badge?: React.ComponentType<any>;
+    Skeleton?: React.ComponentType<{ className?: string }>;
+    Input?: React.ComponentType<any>;
+    Textarea?: React.ComponentType<any>;
+    Label?: React.ComponentType<any>;
+    Switch?: React.ComponentType<any>;
+    Select?: React.ComponentType<any>;
+    SelectTrigger?: React.ComponentType<any>;
+    SelectValue?: React.ComponentType<any>;
+    SelectContent?: React.ComponentType<any>;
+    SelectItem?: React.ComponentType<any>;
+    // Table components
+    Table?: React.ComponentType<any>;
+    TableHeader?: React.ComponentType<any>;
+    TableBody?: React.ComponentType<any>;
+    TableRow?: React.ComponentType<any>;
+    TableHead?: React.ComponentType<any>;
+    TableCell?: React.ComponentType<any>;
+    // Dialog components
+    Dialog?: React.ComponentType<any>;
+    DialogContent?: React.ComponentType<any>;
+    DialogHeader?: React.ComponentType<any>;
+    DialogTitle?: React.ComponentType<any>;
+    DialogDescription?: React.ComponentType<any>;
+    DialogFooter?: React.ComponentType<any>;
+    // Alert dialog
+    AlertDialog?: React.ComponentType<any>;
+    AlertDialogContent?: React.ComponentType<any>;
+    AlertDialogHeader?: React.ComponentType<any>;
+    AlertDialogTitle?: React.ComponentType<any>;
+    AlertDialogDescription?: React.ComponentType<any>;
+    AlertDialogFooter?: React.ComponentType<any>;
+    AlertDialogAction?: React.ComponentType<any>;
+    AlertDialogCancel?: React.ComponentType<any>;
+    // Code editor
+    CodeEditor?: React.ComponentType<{
+      value: string;
+      onChange: (value: string) => void;
+      language?: string;
+      height?: string;
+    }>;
+  };
+  /** Additional class name */
+  className?: string;
+}
+
+// ============================================================================
+// DEFAULT CODE TEMPLATE
+// ============================================================================
+const DEFAULT_CS_CODE = `using Ork.Forseti.Sdk;
+using System;
+using System.Collections.Generic;
+using System.Text;
+
+/// <summary>
+/// Forseti contract - start here.
+/// </summary>
+public class Contract : IAccessPolicy
+{
+    // These policy parameters are filled in by the policy "params" map.
+    // Marking them Required ensures missing values result in deny/validation failures.
+    [PolicyParam(Required = true, Description = "Role required for SSH access (e.g., ssh:root)")]
+    public string Role { get; set; }
+
+    [PolicyParam(Required = true, Description = "Resource identifier for role checks")]
+    public string Resource { get; set; }
+
+    // Called for every request. Validate the request data payload and return Allow/Deny.
+    // For SSH signing, ctx.Data is the SSHv2 publickey auth "to-be-signed" payload.
+    public PolicyDecision ValidateData(DataContext ctx)
+    {
+        throw new NotImplementedException("Implement SSH challenge validation in ValidateData().");
+    }
+
+    // Called for explicit approvals. Validate that the approvers are allowed to approve this request.
+    public PolicyDecision ValidateApprovers(ApproversContext ctx)
+    {
+        throw new NotImplementedException("Implement approver validation in ValidateApprovers().");
+    }
+
+    // Called for execution. Validate that the executor (caller) is allowed to execute this request.
+    public PolicyDecision ValidateExecutor(ExecutorContext ctx)
+    {
+        throw new NotImplementedException("Implement executor validation in ValidateExecutor().");
+    }
+}`;
+
+const defaultFormData: TemplateFormData = {
+  name: "",
+  description: "",
+  csCode: DEFAULT_CS_CODE,
+  parameters: [],
+};
+
+// ============================================================================
+// MAIN COMPONENT
+// ============================================================================
+
+/**
+ * TemplatesPage - Generic template management page
+ *
+ * @example
+ * ```tsx
+ * <TemplatesPage
+ *   fetchData={api.admin.policyTemplates.list}
+ *   onCreate={api.admin.policyTemplates.create}
+ *   onUpdate={api.admin.policyTemplates.update}
+ *   onDelete={api.admin.policyTemplates.delete}
+ *   canEdit={canManageTemplates()}
+ *   toast={toast}
+ * />
+ * ```
+ */
+export function TemplatesPageBase<T extends PolicyTemplateItem = PolicyTemplateItem>({
+  title = "Policy Templates",
+  description = "Create reusable templates for policies",
+  helpText,
+  fetchData,
+  onCreate,
+  onUpdate,
+  onDelete,
+  canEdit = true,
+  defaultCode = DEFAULT_CS_CODE,
+  codeLanguage = "csharp",
+  toast,
+  refreshInterval = 30,
+  invalidateQueries,
+  queryKeys,
+  columns: customColumns,
+  emptyState,
+  components = {},
+  className,
+}: TemplatesPageBaseProps<T>) {
+  const [templates, setTemplates] = useState<T[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [search, setSearch] = useState("");
+  const [editingTemplate, setEditingTemplate] = useState<T | null>(null);
+  const [creatingTemplate, setCreatingTemplate] = useState(false);
+  const [deletingTemplate, setDeletingTemplate] = useState<T | null>(null);
+  const [formData, setFormData] = useState<TemplateFormData>({
+    ...defaultFormData,
+    csCode: defaultCode,
+  });
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  // Fetch data
+  const loadData = async () => {
+    setIsLoading(true);
+    try {
+      const result = await fetchData();
+      // Handle both array and object with templates property
+      const templateList = Array.isArray(result) ? result : (result.templates || []);
+      setTemplates(templateList as T[]);
+      if (invalidateQueries && queryKeys) {
+        invalidateQueries(queryKeys);
+      }
+    } catch (error) {
+      console.error("Error fetching templates:", error);
+      toast?.({
+        title: "Failed to fetch templates",
+        description: error instanceof Error ? error.message : "Unknown error",
+        variant: "destructive",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const { secondsRemaining, refreshNow } = useAutoRefresh({
+    intervalSeconds: refreshInterval,
+    refresh: loadData,
+    isBlocked: isLoading || isSubmitting,
+  });
+
+  React.useEffect(() => {
+    void loadData();
+  }, []);
+
+  // Handlers
+  const handleEdit = (template: T) => {
+    setEditingTemplate(template);
+    setFormData({
+      name: template.name,
+      description: template.description,
+      csCode: template.csCode,
+      parameters: template.parameters || [],
+    });
+  };
+
+  const handleCreate = () => {
+    setFormData({ ...defaultFormData, csCode: defaultCode });
+    setCreatingTemplate(true);
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!formData.name.trim()) {
+      toast?.({ title: "Template name is required", variant: "destructive" });
+      return;
+    }
+    if (!formData.description.trim()) {
+      toast?.({ title: "Description is required", variant: "destructive" });
+      return;
+    }
+    if (!formData.csCode.trim()) {
+      toast?.({ title: "Contract code is required", variant: "destructive" });
+      return;
+    }
+
+    setIsSubmitting(true);
+    try {
+      if (editingTemplate) {
+        await onUpdate(editingTemplate.id, formData);
+        toast?.({ title: "Template updated successfully" });
+      } else {
+        await onCreate(formData);
+        toast?.({ title: "Template created successfully" });
+      }
+      setCreatingTemplate(false);
+      setEditingTemplate(null);
+      setFormData({ ...defaultFormData, csCode: defaultCode });
+      await loadData();
+    } catch (error) {
+      toast?.({
+        title: editingTemplate ? "Failed to update template" : "Failed to create template",
+        description: error instanceof Error ? error.message : "Unknown error",
+        variant: "destructive",
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleDeleteConfirm = async () => {
+    if (!deletingTemplate) return;
+
+    setIsSubmitting(true);
+    try {
+      await onDelete(deletingTemplate.id);
+      toast?.({ title: "Template deleted successfully" });
+      setDeletingTemplate(null);
+      setEditingTemplate(null);
+      await loadData();
+    } catch (error) {
+      toast?.({
+        title: "Failed to delete template",
+        description: error instanceof Error ? error.message : "Unknown error",
+        variant: "destructive",
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  // Parameter management
+  const addParameter = () => {
+    setFormData({
+      ...formData,
+      parameters: [
+        ...formData.parameters,
+        {
+          name: "",
+          type: "string",
+          helpText: "",
+          required: true,
+          defaultValue: "",
+        },
+      ],
+    });
+  };
+
+  const updateParameter = (index: number, field: keyof TemplateParameter, value: any) => {
+    const updated = [...formData.parameters];
+    updated[index] = { ...updated[index], [field]: value };
+    setFormData({ ...formData, parameters: updated });
+  };
+
+  const removeParameter = (index: number) => {
+    const updated = formData.parameters.filter((_, i) => i !== index);
+    setFormData({ ...formData, parameters: updated });
+  };
+
+  // Filter templates
+  const filteredTemplates = templates.filter(
+    (template) =>
+      template.name.toLowerCase().includes(search.toLowerCase()) ||
+      template.description.toLowerCase().includes(search.toLowerCase())
+  );
+
+  // Components (use defaultComponents from ui if not provided)
+  const Card = components.Card || defaultComponents.Card;
+  const CardContent = components.CardContent || defaultComponents.CardContent;
+  const Button = components.Button || defaultComponents.Button;
+  const Badge = components.Badge || defaultComponents.Badge;
+  const Input = components.Input || defaultComponents.Input;
+  const Textarea = components.Textarea || defaultComponents.Textarea;
+  const Label = components.Label || defaultComponents.Label;
+  const Switch = components.Switch || defaultComponents.Switch;
+  const Select = components.Select || defaultComponents.Select;
+  const SelectTrigger = components.SelectTrigger || defaultComponents.SelectTrigger;
+  const SelectValue = components.SelectValue || defaultComponents.SelectValue;
+  const SelectContent = components.SelectContent || defaultComponents.SelectContent;
+  const SelectItem = components.SelectItem || defaultComponents.SelectItem;
+  const Dialog = components.Dialog || defaultComponents.Dialog;
+  const DialogContent = components.DialogContent || defaultComponents.DialogContent;
+  const DialogHeader = components.DialogHeader || defaultComponents.DialogHeader;
+  const DialogTitle = components.DialogTitle || defaultComponents.DialogTitle;
+  const DialogDescription = components.DialogDescription || defaultComponents.DialogDescription;
+  const DialogFooter = components.DialogFooter || defaultComponents.DialogFooter;
+  const CodeEditor = components.CodeEditor || defaultComponents.CodeEditor;
+
+  const hasSelectComponents = Select && SelectTrigger && SelectValue && SelectContent && SelectItem;
+
+  // Default columns
+  const defaultColumns: ColumnDef<T>[] = [
+    {
+      key: "name",
+      header: "Template Name",
+      cell: (template) => (
+        <div style={{ display: "flex", alignItems: "center", gap: "0.75rem" }}>
+          <div style={{ display: "flex", height: "2.25rem", width: "2.25rem", alignItems: "center", justifyContent: "center", borderRadius: "9999px", backgroundColor: "rgba(59, 130, 246, 0.1)" }}>
+            <Code style={{ height: "1rem", width: "1rem", color: "#3b82f6" }} />
+          </div>
+          <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
+            <p style={{ fontWeight: 500, margin: 0 }}>{template.name}</p>
+            {template.createdBy === "system" && (
+              <Badge variant="secondary" style={{ fontSize: "0.75rem" }}>System</Badge>
+            )}
+          </div>
+        </div>
+      ),
+    },
+    {
+      key: "description",
+      header: "Description",
+      cell: (template) => (
+        <p style={{ fontSize: "0.875rem", color: "#6b7280", margin: 0, overflow: "hidden", textOverflow: "ellipsis", display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical" }}>{template.description}</p>
+      ),
+    },
+    {
+      key: "parameters",
+      header: "Parameters",
+      cell: (template) => (
+        <div style={{ display: "flex", flexWrap: "wrap", gap: "0.25rem" }}>
+          {template.parameters.slice(0, 3).map((param) => (
+            <Badge key={param.name} variant="outline" style={{ fontSize: "0.75rem" }}>{param.name}</Badge>
+          ))}
+          {template.parameters.length > 3 && (
+            <Badge variant="outline" style={{ fontSize: "0.75rem" }}>+{template.parameters.length - 3}</Badge>
+          )}
+          {template.parameters.length === 0 && (
+            <span style={{ fontSize: "0.75rem", color: "#6b7280" }}>None</span>
+          )}
+        </div>
+      ),
+    },
+    {
+      key: "createdBy",
+      header: "Created By",
+      cell: (template) => (
+        <span style={{ fontSize: "0.875rem", color: "#6b7280" }}>{template.createdBy}</span>
+      ),
+    },
+    {
+      key: "actions",
+      header: "Actions",
+      align: "right",
+      cell: (template) => (
+        canEdit && (
+          <div style={{ display: "flex", justifyContent: "flex-end", gap: "0.5rem" }}>
+            <Button size="icon" variant="ghost" onClick={() => handleEdit(template)}>
+              <Pencil style={{ height: "1rem", width: "1rem" }} />
+            </Button>
+            {template.createdBy !== "system" && (
+              <Button size="icon" variant="ghost" onClick={() => setDeletingTemplate(template)}>
+                <Trash2 style={{ height: "1rem", width: "1rem" }} />
+              </Button>
+            )}
+          </div>
+        )
+      ),
+    },
+  ];
+
+  const columns = customColumns || defaultColumns;
+  const isDialogOpen = creatingTemplate || !!editingTemplate;
+
+  return (
+    <div style={{ padding: "1.5rem" }} className={className}>
+      {/* Header */}
+      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "1.5rem", flexWrap: "wrap", gap: "1rem" }}>
+        <div>
+          <h1 style={{ fontSize: "1.5rem", fontWeight: 600, display: "flex", alignItems: "center", gap: "0.5rem", margin: 0 }}>
+            <FileCode style={{ width: "1.5rem", height: "1.5rem" }} />
+            {title}
+          </h1>
+          <p style={{ fontSize: "0.875rem", color: "#6b7280", margin: "0.25rem 0 0" }}>{description}</p>
+          {helpText && <div style={{ fontSize: "0.75rem", color: "#6b7280", marginTop: "0.25rem" }}>{helpText}</div>}
+        </div>
+        <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
+          <RefreshButton
+            onClick={() => void refreshNow()}
+            isRefreshing={isLoading}
+            secondsRemaining={secondsRemaining}
+            title="Refresh now"
+          />
+          {canEdit && (
+            <Button onClick={handleCreate}>
+              <Plus style={{ height: "1rem", width: "1rem", marginRight: "0.5rem" }} />
+              Create Template
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {/* Search & Table */}
+      <Card>
+        <div style={{ padding: "1rem", borderBottom: "1px solid #e5e7eb" }}>
+          <div style={{ position: "relative", maxWidth: "20rem" }}>
+            <Search style={{ position: "absolute", left: "0.75rem", top: "50%", transform: "translateY(-50%)", width: "1rem", height: "1rem", color: "#9ca3af" }} />
+            <Input
+              placeholder="Search templates..."
+              value={search}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearch(e.target.value)}
+              style={{ paddingLeft: "2.25rem" }}
+            />
+          </div>
+        </div>
+        <CardContent style={{ padding: 0 }}>
+          {isLoading && templates.length === 0 ? (
+            <LoadingSkeleton rows={3} type="table" SkeletonComponent={components.Skeleton} />
+          ) : filteredTemplates.length > 0 ? (
+            <DataTable
+              data={filteredTemplates}
+              columns={columns}
+              components={{
+                Table: components.Table,
+                TableHeader: components.TableHeader,
+                TableBody: components.TableBody,
+                TableRow: components.TableRow,
+                TableHead: components.TableHead,
+                TableCell: components.TableCell,
+                Skeleton: components.Skeleton,
+              }}
+            />
+          ) : (
+            <EmptyState
+              icon={emptyState?.icon || <FileCode style={{ height: "3rem", width: "3rem", color: "#6b7280" }} />}
+              title={emptyState?.title || "No templates found"}
+              description={emptyState?.description || (search ? "Try a different search term" : "Create a template to get started")}
+            />
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Create/Edit Dialog */}
+      <Dialog open={isDialogOpen} onOpenChange={(open: boolean) => {
+        if (!open) {
+          setCreatingTemplate(false);
+          setEditingTemplate(null);
+        }
+      }}>
+        <DialogContent style={{ maxWidth: "56rem", maxHeight: "90vh", overflow: "auto" }}>
+          <DialogHeader>
+            <DialogTitle>{editingTemplate ? "Edit Template" : "Create Template"}</DialogTitle>
+            <DialogDescription>
+              {editingTemplate
+                ? "Update the template configuration and contract code"
+                : "Create a reusable policy template with configurable parameters"}
+            </DialogDescription>
+          </DialogHeader>
+          <form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}>
+            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "1rem" }}>
+              <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
+                <Label htmlFor="name">Template Name</Label>
+                <Input
+                  id="name"
+                  value={formData.name}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => setFormData({ ...formData, name: e.target.value })}
+                  placeholder="e.g., SSH Access Policy"
+                  required
+                />
+              </div>
+              <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem", gridColumn: "span 2" }}>
+                <Label htmlFor="description">Description</Label>
+                <Textarea
+                  id="description"
+                  value={formData.description}
+                  onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setFormData({ ...formData, description: e.target.value })}
+                  placeholder="Describe what this template does and when to use it..."
+                  rows={2}
+                  required
+                />
+              </div>
+            </div>
+
+            {/* Code Editor */}
+            <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
+              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+                <Label>Contract Code ({codeLanguage})</Label>
+                <p style={{ fontSize: "0.75rem", color: "#6b7280", margin: 0 }}>
+                  Use <code style={{ backgroundColor: "#f3f4f6", padding: "0 0.25rem", borderRadius: "0.25rem" }}>{"{{PARAM_NAME}}"}</code> for dynamic values
+                </p>
+              </div>
+              <div style={{ border: "1px solid #e5e7eb", borderRadius: "0.375rem", overflow: "hidden" }}>
+                <CodeEditor
+                  value={formData.csCode}
+                  onChange={(value) => setFormData({ ...formData, csCode: value })}
+                  language={codeLanguage}
+                  height="300px"
+                />
+              </div>
+            </div>
+
+            {/* Parameters Section */}
+            <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
+              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+                <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
+                  <Variable style={{ height: "1rem", width: "1rem", color: "#6b7280" }} />
+                  <Label>Template Parameters</Label>
+                </div>
+                <Button type="button" variant="outline" size="sm" onClick={addParameter}>
+                  <Plus style={{ height: "1rem", width: "1rem", marginRight: "0.25rem" }} />
+                  Add Parameter
+                </Button>
+              </div>
+              <p style={{ fontSize: "0.75rem", color: "#6b7280", margin: 0 }}>
+                Define parameters that users will fill in when using this template.
+              </p>
+
+              {formData.parameters.length === 0 ? (
+                <div style={{ border: "1px solid #e5e7eb", borderRadius: "0.375rem", padding: "1rem", textAlign: "center", fontSize: "0.875rem", color: "#6b7280" }}>
+                  No parameters defined. Add parameters to make your template configurable.
+                </div>
+              ) : (
+                <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
+                  {formData.parameters.map((param, index) => (
+                    <div key={index} style={{ border: "1px solid #e5e7eb", borderRadius: "0.375rem", padding: "1rem", display: "flex", flexDirection: "column", gap: "0.75rem" }}>
+                      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+                        <span style={{ fontSize: "0.875rem", fontWeight: 500 }}>Parameter {index + 1}</span>
+                        <Button type="button" variant="ghost" size="sm" onClick={() => removeParameter(index)}>
+                          <Trash2 style={{ height: "1rem", width: "1rem" }} />
+                        </Button>
+                      </div>
+                      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }}>
+                        <div style={{ display: "flex", flexDirection: "column", gap: "0.25rem" }}>
+                          <Label style={{ fontSize: "0.75rem" }}>Name (placeholder)</Label>
+                          <Input
+                            value={param.name}
+                            onChange={(e: React.ChangeEvent<HTMLInputElement>) => updateParameter(index, "name", e.target.value.toUpperCase().replace(/[^A-Z0-9_]/g, "_"))}
+                            placeholder="e.g., APPROVAL_TYPE"
+                            style={{ fontFamily: "monospace", fontSize: "0.875rem" }}
+                          />
+                          <p style={{ fontSize: "0.75rem", color: "#6b7280", margin: 0 }}>
+                            Use in code as: <code>{`{{${param.name || "NAME"}}}`}</code>
+                          </p>
+                        </div>
+                        <div style={{ display: "flex", flexDirection: "column", gap: "0.25rem" }}>
+                          <Label style={{ fontSize: "0.75rem" }}>Type</Label>
+                          {hasSelectComponents ? (
+                            <Select
+                              value={param.type}
+                              onValueChange={(v: string) => updateParameter(index, "type", v)}
+                            >
+                              <SelectTrigger>
+                                <SelectValue />
+                              </SelectTrigger>
+                              <SelectContent>
+                                <SelectItem value="string">Text</SelectItem>
+                                <SelectItem value="number">Number</SelectItem>
+                                <SelectItem value="boolean">Yes/No</SelectItem>
+                                <SelectItem value="select">Select (Dropdown)</SelectItem>
+                              </SelectContent>
+                            </Select>
+                          ) : (
+                            <select
+                              value={param.type}
+                              onChange={(e) => updateParameter(index, "type", e.target.value)}
+                              style={{ display: "flex", height: "2.5rem", width: "100%", borderRadius: "0.375rem", border: "1px solid #d1d5db", backgroundColor: "#fff", padding: "0.5rem 0.75rem", fontSize: "0.875rem" }}
+                            >
+                              <option value="string">Text</option>
+                              <option value="number">Number</option>
+                              <option value="boolean">Yes/No</option>
+                              <option value="select">Select (Dropdown)</option>
+                            </select>
+                          )}
+                        </div>
+                        <div style={{ display: "flex", flexDirection: "column", gap: "0.25rem", gridColumn: "span 2" }}>
+                          <Label style={{ fontSize: "0.75rem" }}>Help Text</Label>
+                          <Input
+                            value={param.helpText}
+                            onChange={(e: React.ChangeEvent<HTMLInputElement>) => updateParameter(index, "helpText", e.target.value)}
+                            placeholder="Explain what this parameter does..."
+                          />
+                        </div>
+                        <div style={{ display: "flex", flexDirection: "column", gap: "0.25rem" }}>
+                          <Label style={{ fontSize: "0.75rem" }}>Default Value</Label>
+                          <Input
+                            value={param.defaultValue?.toString() || ""}
+                            onChange={(e: React.ChangeEvent<HTMLInputElement>) => updateParameter(index, "defaultValue", e.target.value)}
+                            placeholder="Optional default"
+                          />
+                        </div>
+                        <div style={{ display: "flex", alignItems: "center", gap: "0.5rem", paddingTop: "1.25rem" }}>
+                          <Switch
+                            checked={param.required}
+                            onCheckedChange={(v: boolean) => updateParameter(index, "required", v)}
+                          />
+                          <Label style={{ fontSize: "0.75rem" }}>Required</Label>
+                        </div>
+                        {param.type === "select" && (
+                          <div style={{ display: "flex", flexDirection: "column", gap: "0.25rem", gridColumn: "span 2" }}>
+                            <Label style={{ fontSize: "0.75rem" }}>Options (comma-separated)</Label>
+                            <Input
+                              value={param.options?.join(", ") || ""}
+                              onChange={(e: React.ChangeEvent<HTMLInputElement>) => updateParameter(index, "options", e.target.value.split(",").map(s => s.trim()).filter(Boolean))}
+                              placeholder="e.g., option1, option2, option3"
+                            />
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+
+            <DialogFooter style={{ display: "flex", justifyContent: "space-between" }}>
+              {editingTemplate && editingTemplate.createdBy !== "system" && (
+                <Button
+                  type="button"
+                  variant="destructive"
+                  onClick={() => setDeletingTemplate(editingTemplate)}
+                >
+                  <Trash2 style={{ height: "1rem", width: "1rem", marginRight: "0.5rem" }} />
+                  Delete
+                </Button>
+              )}
+              {(!editingTemplate || editingTemplate.createdBy === "system") && <div />}
+              <div style={{ display: "flex", gap: "0.5rem" }}>
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={() => {
+                    setCreatingTemplate(false);
+                    setEditingTemplate(null);
+                  }}
+                >
+                  Cancel
+                </Button>
+                <Button type="submit" disabled={isSubmitting}>
+                  {isSubmitting ? "Saving..." : editingTemplate ? "Save Changes" : "Create Template"}
+                </Button>
+              </div>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </Dialog>
+
+      {/* Delete Confirmation */}
+      <ConfirmDialog
+        open={!!deletingTemplate}
+        onClose={() => setDeletingTemplate(null)}
+        onConfirm={handleDeleteConfirm}
+        title="Delete Template"
+        description={`Are you sure you want to delete "${deletingTemplate?.name}"? This action cannot be undone.`}
+        confirmLabel="Delete"
+        confirmVariant="destructive"
+        isLoading={isSubmitting}
+        components={{
+          AlertDialog: components.AlertDialog,
+          AlertDialogContent: components.AlertDialogContent,
+          AlertDialogHeader: components.AlertDialogHeader,
+          AlertDialogTitle: components.AlertDialogTitle,
+          AlertDialogDescription: components.AlertDialogDescription,
+          AlertDialogFooter: components.AlertDialogFooter,
+          AlertDialogAction: components.AlertDialogAction,
+          AlertDialogCancel: components.AlertDialogCancel,
+        }}
+      />
+    </div>
+  );
+}