Refactor dynamic group rule builder UI for improved usability.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 705f2157-ef97-4fbd-89e4-8c7f2ecaea90
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/7ed01c5f-a82d-405a-b728-b2e3d127c60c/a287b6d4-b0e2-4481-9e90-30d919a70c4f.jpg

client/src/components/dynamic-groups/rule-editor.tsx

@@ -1,397 +1,547 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect } from 'react';
-import { useQuery, useMutation } from "@tanstack/react-query";
+import { Button } from '@/components/ui/button';
-import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
-import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from '@/components/ui/input';
-import { Input } from "@/components/ui/input";
+import { Label } from '@/components/ui/label';
-import { Label } from "@/components/ui/label";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Textarea } from '@/components/ui/textarea';
-import { Separator } from "@/components/ui/separator";
+import { Switch } from '@/components/ui/switch';
-import { Switch } from "@/components/ui/switch";
+import { Badge } from '@/components/ui/badge';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { Textarea } from "@/components/ui/textarea";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
-import { useToast } from "@/hooks/use-toast";
+import { Separator } from '@/components/ui/separator';
-import { queryClient, apiRequest } from "@/lib/queryClient";
+import { 
-import { Loader2, Plus, Save, Trash, Code, Filter } from "lucide-react";
+  Info, 
-import { Badge } from "@/components/ui/badge";
+  Clock, 
-import { ScrollArea } from "@/components/ui/scroll-area";
+  Settings, 
-import { Checkbox } from "@/components/ui/checkbox";
+  ListFilter, 
-import { useForm, Controller } from "react-hook-form";
+  EyeIcon, 
-import { zodResolver } from "@hookform/resolvers/zod";
+  CalendarDays,
-import { z } from "zod";
+  RefreshCw,
-import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+  AlertTriangle 
-import ConditionBuilder from "./condition-builder";
+} from 'lucide-react';
 
-// Define the schema for rule form
+import { DynamicGroupRule, LdapConnection } from '@shared/schema';
-const ruleFormSchema = z.object({
+import CronJobBuilder, { ScheduleItem } from './cron-job-builder';
-  name: z.string().min(1, "Name is required"),
+import ConditionBuilder from './condition-builder';
-  description: z.string().optional(),
+import { useToast } from '@/hooks/use-toast';
-  targetGroup: z.string().min(1, "Target group is required"),
+import { queryClient, apiRequest } from '@/lib/queryClient';
-  enabled: z.boolean().default(true),
+import { useMutation, useQuery } from '@tanstack/react-query';
-  schedule: z.string().min(1, "Schedule is required"),
-  variablePattern: z.string().optional(),
-  connectionIds: z.array(z.number()).min(1, "At least one connection is required"),
-});
 
-type RuleFormValues = z.infer<typeof ruleFormSchema>;
+export interface Condition {
-
-interface Condition {
-  id: number;
-  type: "condition" | "group";
-  parentId: number | null;
-  operator: string;
-  attribute?: string;
-  value?: string;
-  position: number;
-  children?: Condition[];
-}
-
-interface Connection {
-  id: number;
-  name: string;
-  server: string;
-}
-
-interface DynamicGroupRule {
   id?: number;
-  name: string;
+  ruleId?: number;
-  description: string | null;
+  parentId?: number | null;
-  targetGroup: string;
+  attribute: string;
-  enabled: boolean;
+  operator: string;
-  schedule: string;
+  value: string;
-  variablePattern: string | null;
+  logicalOperator?: string | null;
-  connectionIds: number[];
+  isGroup?: boolean;
-  conditions: Condition[];
 }
 
 interface RuleEditorProps {
-  ruleId?: number;
+  rule?: DynamicGroupRule;
-  onSuccess?: () => void;
+  onSave: (rule: DynamicGroupRule, schedules: ScheduleItem[]) => void;
-  onCancel?: () => void;
+  onCancel: () => void;
 }
 
-export default function RuleEditor({ ruleId, onSuccess, onCancel }: RuleEditorProps) {
+export const RuleEditor: React.FC<RuleEditorProps> = ({ rule, onSave, onCancel }) => {
   const { toast } = useToast();
+  const [activeTab, setActiveTab] = useState('general');
   const [conditions, setConditions] = useState<Condition[]>([]);
-  const [activeTab, setActiveTab] = useState("general");
+  const [schedules, setSchedules] = useState<ScheduleItem[]>([]);
-  const isEditMode = !!ruleId;
+  const [formData, setFormData] = useState({
-
+    name: rule?.name || '',
-  // Fetch connections for dropdown
+    description: rule?.description || '',
-  const { data: connections, isLoading: isLoadingConnections } = useQuery({
+    targetGroup: rule?.targetGroup || '',
-    queryKey: ["/api/ldap-connections"],
+    enabled: rule?.enabled ?? true,
-    retry: false,
+    variablePattern: rule?.variablePattern || '',
+    connections: rule?.connectionIds || []
   });
   
-  // Fetch rule data if editing
+  // Load LDAP connections
-  const { data: ruleData, isLoading: isLoadingRule } = useQuery({
+  const { data: ldapConnections = [] } = useQuery<LdapConnection[]>({
-    queryKey: ["/api/dynamic-group-rules", ruleId],
+    queryKey: ['/api/ldap-connections'],
-    enabled: !!ruleId,
+    staleTime: 60000,
-    retry: false,
   });
 
-  // Form setup
+  // Load conditions for the rule if editing
-  const form = useForm<RuleFormValues>({
+  const { data: conditionsData } = useQuery<Condition[]>({
-    resolver: zodResolver(ruleFormSchema),
+    queryKey: ['/api/dynamic-group-rules', rule?.id, 'conditions'],
-    defaultValues: {
+    enabled: !!rule?.id,
-      name: "",
+    staleTime: 60000,
-      description: "",
-      targetGroup: "",
-      enabled: true,
-      schedule: "0 0 * * *", // Daily at midnight
-      variablePattern: "",
-      connectionIds: [],
-    },
   });
 
-  // Update form when rule data is loaded
+  // Load schedules for the rule if editing
+  const { data: schedulesData } = useQuery<ScheduleItem[]>({
+    queryKey: ['/api/dynamic-group-rules', rule?.id, 'schedules'],
+    enabled: !!rule?.id,
+    staleTime: 60000,
+  });
+
+  // Initialize conditions and schedules when data loads
   useEffect(() => {
-    if (ruleData) {
+    if (conditionsData) {
-      form.reset({
+      setConditions(conditionsData);
-        name: ruleData.name,
-        description: ruleData.description || "",
-        targetGroup: ruleData.targetGroup,
-        enabled: ruleData.enabled,
-        schedule: ruleData.schedule,
-        variablePattern: ruleData.variablePattern || "",
-        connectionIds: ruleData.connections.map((c: any) => c.id),
-      });
-      setConditions(ruleData.conditions || []);
     }
-  }, [ruleData, form]);
+  }, [conditionsData]);
 
-  // Create/Update rule mutation
+  useEffect(() => {
-  const saveMutation = useMutation({
+    if (schedulesData) {
-    mutationFn: async (data: DynamicGroupRule) => {
+      setSchedules(schedulesData);
-      const url = isEditMode 
+    }
-        ? `/api/dynamic-group-rules/${ruleId}` 
+  }, [schedulesData]);
-        : `/api/dynamic-group-rules`;
+
-      const method = isEditMode ? "PUT" : "POST";
+  // Handle form input changes
-      const response = await apiRequest(method, url, data);
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-      return response.json();
+    const { name, value } = e.target;
-    },
+    setFormData(prev => ({ ...prev, [name]: value }));
-    onSuccess: () => {
+  };
+
+  // Handle toggle changes
+  const handleToggleChange = (field: string, value: boolean) => {
+    setFormData(prev => ({ ...prev, [field]: value }));
+  };
+
+  // Handle connection selection
+  const handleConnectionChange = (connectionIds: number[]) => {
+    setFormData(prev => ({ ...prev, connections: connectionIds }));
+  };
+
+  // Handle form submission
+  const handleSubmit = () => {
+    if (!formData.name) {
       toast({
-        title: "Success",
+        title: "Missing Information",
-        description: `Rule ${isEditMode ? "updated" : "created"} successfully`,
+        description: "Please provide a name for the rule",
-        variant: "default",
+        variant: "destructive"
+      });
+      setActiveTab('general');
+      return;
+    }
+
+    if (!formData.targetGroup) {
+      toast({
+        title: "Missing Information",
+        description: "Please specify a target AD group",
+        variant: "destructive"
+      });
+      setActiveTab('general');
+      return;
+    }
+
+    if (formData.connections.length === 0) {
+      toast({
+        title: "Missing Information",
+        description: "Please select at least one LDAP connection",
+        variant: "destructive"
+      });
+      setActiveTab('general');
+      return;
+    }
+
+    if (conditions.length === 0) {
+      toast({
+        title: "Missing Information",
+        description: "Please define at least one condition",
+        variant: "destructive"
+      });
+      setActiveTab('conditions');
+      return;
+    }
+
+    if (schedules.length === 0) {
+      toast({
+        title: "Missing Information", 
+        description: "Please define at least one schedule",
+        variant: "destructive"
+      });
+      setActiveTab('schedules');
+      return;
+    }
+
+    const ruleData: DynamicGroupRule = {
+      id: rule?.id,
+      name: formData.name,
+      description: formData.description || null,
+      targetGroup: formData.targetGroup,
+      enabled: formData.enabled,
+      createdAt: rule?.createdAt || new Date(),
+      updatedAt: new Date(),
+      lastRun: rule?.lastRun || null,
+      lastRunStatus: rule?.lastRunStatus || null,
+      variablePattern: formData.variablePattern || null,
+      connectionIds: formData.connections
+    };
+
+    onSave(ruleData, schedules);
+  };
+
+  // Test the rule
+  const testRuleMutation = useMutation({
+    mutationFn: async () => {
+      const res = await apiRequest('POST', '/api/dynamic-group-rules/test', {
+        rule: {
+          name: formData.name,
+          targetGroup: formData.targetGroup,
+          connectionIds: formData.connections,
+          variablePattern: formData.variablePattern || null
+        },
+        conditions
+      });
+      return await res.json();
+    },
+    onSuccess: (data) => {
+      toast({
+        title: "Test Results",
+        description: `The rule would match ${data.matchCount} objects`,
       });
-      queryClient.invalidateQueries({ queryKey: ["/api/dynamic-group-rules"] });
-      if (onSuccess) onSuccess();
     },
     onError: (error: Error) => {
       toast({
-        title: "Error",
+        title: "Test Failed",
-        description: `Failed to ${isEditMode ? "update" : "create"} rule: ${error.message}`,
+        description: error.message,
-        variant: "destructive",
+        variant: "destructive"
       });
-    },
+    }
   });
 
-  // Handle form submission
+  const handleTest = () => {
-  const onSubmit = (values: RuleFormValues) => {
+    if (formData.connections.length === 0) {
-    const ruleData: DynamicGroupRule = {
+      toast({
-      ...values,
+        title: "Missing Information",
-      conditions,
+        description: "Please select at least one LDAP connection to test",
-    };
+        variant: "destructive"
-    saveMutation.mutate(ruleData);
+      });
-  };
+      return;
+    }
 
-  // Update conditions handler
+    if (conditions.length === 0) {
-  const handleConditionsUpdate = (updatedConditions: Condition[]) => {
+      toast({
-    setConditions(updatedConditions);
+        title: "Missing Information",
-  };
+        description: "Please define at least one condition to test",
+        variant: "destructive"
+      });
+      return;
+    }
 
-  // Loading state
+    testRuleMutation.mutate();
-  const isLoading = isLoadingConnections || (isEditMode && isLoadingRule);
+  };
 
   return (
     <div className="space-y-6">
-      <Tabs value={activeTab} onValueChange={setActiveTab}>
+      <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
-        <TabsList className="grid w-full grid-cols-3">
+        <TabsList className="grid grid-cols-4 md:w-[500px] mb-8">
-          <TabsTrigger value="general">General</TabsTrigger>
+          <TabsTrigger value="general" className="flex items-center gap-2">
-          <TabsTrigger value="conditions">Conditions</TabsTrigger>
+            <Settings className="h-4 w-4" />
-          <TabsTrigger value="preview">Preview</TabsTrigger>
+            <span className="hidden sm:inline">General</span>
+          </TabsTrigger>
+          <TabsTrigger value="conditions" className="flex items-center gap-2">
+            <ListFilter className="h-4 w-4" />
+            <span className="hidden sm:inline">Conditions</span>
+          </TabsTrigger>
+          <TabsTrigger value="schedules" className="flex items-center gap-2">
+            <CalendarDays className="h-4 w-4" />
+            <span className="hidden sm:inline">Schedules</span>
+          </TabsTrigger>
+          <TabsTrigger value="preview" className="flex items-center gap-2">
+            <EyeIcon className="h-4 w-4" />
+            <span className="hidden sm:inline">Preview</span>
+          </TabsTrigger>
         </TabsList>
 
-        <Form {...form}>
+        {/* General Settings Tab */}
-          <form onSubmit={form.handleSubmit(onSubmit)}>
+        <TabsContent value="general" className="space-y-6">
-            <TabsContent value="general" className="space-y-4 mt-4">
+          <Card>
-              {isLoading ? (
+            <CardHeader>
-                <div className="flex items-center justify-center py-10">
+              <CardTitle className="text-xl">Rule Settings</CardTitle>
-                  <Loader2 className="h-8 w-8 animate-spin text-primary" />
+              <CardDescription>Configure the basic settings for your dynamic group rule</CardDescription>
-                </div>
+            </CardHeader>
-              ) : (
+            <CardContent className="space-y-6">
-                <Card>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                  <CardHeader>
+                <div className="space-y-2">
-                    <CardTitle>Rule Configuration</CardTitle>
+                  <Label htmlFor="name">Rule Name <span className="text-destructive">*</span></Label>
-                  </CardHeader>
+                  <Input 
-                  <CardContent className="space-y-4">
+                    id="name" 
-                    {/* Basic rule information */}
+                    name="name" 
-                    <FormField
+                    value={formData.name} 
-                      control={form.control}
+                    onChange={handleInputChange} 
-                      name="name"
+                    placeholder="Enter rule name" 
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormLabel>Rule Name</FormLabel>
-                          <FormControl>
-                            <Input placeholder="Enter rule name" {...field} />
-                          </FormControl>
-                          <FormMessage />
-                        </FormItem>
-                      )}
-                    />
-                    
-                    <FormField
-                      control={form.control}
-                      name="description"
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormLabel>Description</FormLabel>
-                          <FormControl>
-                            <Textarea 
-                              placeholder="Optional description of what this rule does" 
-                              {...field} 
-                              value={field.value || ""}
-                            />
-                          </FormControl>
-                          <FormMessage />
-                        </FormItem>
-                      )}
-                    />
-                    
-                    <FormField
-                      control={form.control}
-                      name="targetGroup"
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormLabel>Target Group (DN)</FormLabel>
-                          <FormControl>
-                            <Input 
-                              placeholder="Distinguished Name of the target group" 
-                              {...field} 
-                            />
-                          </FormControl>
-                          <FormDescription>
-                            Members matching the conditions will be added to this group
-                          </FormDescription>
-                          <FormMessage />
-                        </FormItem>
-                      )}
-                    />
-                    
-                    <FormField
-                      control={form.control}
-                      name="connectionIds"
-                      render={() => (
-                        <FormItem>
-                          <FormLabel>LDAP Connections</FormLabel>
-                          <div className="space-y-2">
-                            {connections && connections.map((connection: Connection) => (
-                              <div key={connection.id} className="flex items-center space-x-2">
-                                <Controller
-                                  control={form.control}
-                                  name="connectionIds"
-                                  render={({ field }) => (
-                                    <Checkbox
-                                      id={`connection-${connection.id}`}
-                                      checked={field.value?.includes(connection.id)}
-                                      onCheckedChange={(checked) => {
-                                        if (checked) {
-                                          const newValue = [...(field.value || []), connection.id];
-                                          field.onChange(newValue);
-                                        } else {
-                                          const newValue = field.value?.filter((id) => id !== connection.id);
-                                          field.onChange(newValue);
-                                        }
-                                      }}
-                                    />
-                                  )}
-                                />
-                                <Label htmlFor={`connection-${connection.id}`}>
-                                  {connection.name} <span className="text-muted-foreground">({connection.server})</span>
-                                </Label>
-                              </div>
-                            ))}
-                          </div>
-                          <FormDescription>
-                            Select the LDAP connections this rule should apply to
-                          </FormDescription>
-                          <FormMessage />
-                        </FormItem>
-                      )}
-                    />
-                    
-                    <Separator />
-                    
-                    <FormField
-                      control={form.control}
-                      name="schedule"
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormLabel>Schedule (Cron Format)</FormLabel>
-                          <FormControl>
-                            <Input {...field} />
-                          </FormControl>
-                          <FormDescription>
-                            When to run this rule (e.g., "0 0 * * *" for daily at midnight)
-                          </FormDescription>
-                          <FormMessage />
-                        </FormItem>
-                      )}
-                    />
-                    
-                    <FormField
-                      control={form.control}
-                      name="variablePattern"
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormLabel>Variable Pattern (Optional)</FormLabel>
-                          <FormControl>
-                            <Input 
-                              placeholder="{{department}}-Users" 
-                              {...field} 
-                              value={field.value || ""}
-                            />
-                          </FormControl>
-                          <FormDescription>
-                            Pattern for dynamic group naming with variable substitution
-                          </FormDescription>
-                          <FormMessage />
-                        </FormItem>
-                      )}
-                    />
-                    
-                    <FormField
-                      control={form.control}
-                      name="enabled"
-                      render={({ field }) => (
-                        <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
-                          <div className="space-y-0.5">
-                            <FormLabel className="text-base">
-                              Enabled
-                            </FormLabel>
-                            <FormDescription>
-                              Enable or disable this rule from running
-                            </FormDescription>
-                          </div>
-                          <FormControl>
-                            <Switch
-                              checked={field.value}
-                              onCheckedChange={field.onChange}
-                            />
-                          </FormControl>
-                        </FormItem>
-                      )}
-                    />
-                  </CardContent>
-                </Card>
-              )}
-            </TabsContent>
-            
-            <TabsContent value="conditions" className="space-y-4 mt-4">
-              <Card>
-                <CardHeader>
-                  <CardTitle>Rule Conditions</CardTitle>
-                </CardHeader>
-                <CardContent>
-                  <ConditionBuilder 
-                    conditions={conditions}
-                    onChange={handleConditionsUpdate}
-                    connections={connections || []}
                   />
-                </CardContent>
+                </div>
-              </Card>
-            </TabsContent>
                 
-            <TabsContent value="preview" className="space-y-4 mt-4">
+                <div className="space-y-2">
-              <Card>
+                  <Label htmlFor="targetGroup">Target AD Group <span className="text-destructive">*</span></Label>
-                <CardHeader>
+                  <Input 
-                  <CardTitle>LDAP Filter Preview</CardTitle>
+                    id="targetGroup" 
-                </CardHeader>
+                    name="targetGroup" 
-                <CardContent>
+                    value={formData.targetGroup} 
-                  <div className="bg-muted rounded-md p-4 font-mono text-sm overflow-x-auto">
+                    onChange={handleInputChange} 
-                    {/* This would show the actual LDAP filter generated from the conditions */}
+                    placeholder="Enter target AD group DN" 
-                    {conditions.length ? (
+                  />
-                      <pre>(&(objectClass=user)(memberOf=CN=Domain Users,CN=Users,DC=example,DC=com))</pre>
+                  <p className="text-xs text-muted-foreground">
+                    Full DN of the group to update (e.g., CN=Marketing,OU=Groups,DC=example,DC=com)
+                  </p>
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="description">Description</Label>
+                <Textarea 
+                  id="description" 
+                  name="description" 
+                  value={formData.description} 
+                  onChange={handleInputChange} 
+                  placeholder="Enter rule description" 
+                  rows={3} 
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label>LDAP Connections <span className="text-destructive">*</span></Label>
+                <div className="border rounded-md p-4 space-y-2">
+                  {ldapConnections.length === 0 ? (
+                    <p className="text-sm text-muted-foreground">No LDAP connections available. Please create one first.</p>
+                  ) : (
+                    <div className="space-y-2">
+                      {ldapConnections.map((connection) => (
+                        <div key={connection.id} className="flex items-center space-x-2">
+                          <Switch 
+                            id={`connection-${connection.id}`}
+                            checked={formData.connections.includes(connection.id)}
+                            onCheckedChange={(checked) => {
+                              if (checked) {
+                                handleConnectionChange([...formData.connections, connection.id]);
+                              } else {
+                                handleConnectionChange(formData.connections.filter(id => id !== connection.id));
+                              }
+                            }}
+                          />
+                          <Label htmlFor={`connection-${connection.id}`}>
+                            {connection.name} ({connection.server})
+                          </Label>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+                <p className="text-xs text-muted-foreground">
+                  Select one or more LDAP connections to search for objects
+                </p>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="variablePattern">Variable Pattern</Label>
+                <Input 
+                  id="variablePattern" 
+                  name="variablePattern" 
+                  value={formData.variablePattern} 
+                  onChange={handleInputChange} 
+                  placeholder="e.g., {attribute} Value" 
+                />
+                <p className="text-xs text-muted-foreground">
+                  Optional pattern for generating variable values in name or description. 
+                  Use {attribute} to insert attribute values.
+                </p>
+              </div>
+
+              <div className="flex items-center space-x-2">
+                <Switch 
+                  id="enabled"
+                  checked={formData.enabled}
+                  onCheckedChange={(checked) => handleToggleChange('enabled', checked)}
+                />
+                <Label htmlFor="enabled">Enable Rule</Label>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        {/* Conditions Tab */}
+        <TabsContent value="conditions" className="space-y-6">
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-xl">Rule Conditions</CardTitle>
+              <CardDescription>
+                Define the conditions that determine which objects will be included in the dynamic group
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <ConditionBuilder 
+                conditions={conditions} 
+                onChange={setConditions}
+                connections={formData.connections}
+              />
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        {/* Schedules Tab */}
+        <TabsContent value="schedules" className="space-y-6">
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-xl">Rule Schedules</CardTitle>
+              <CardDescription>
+                Configure when this rule should run to update the dynamic group membership
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <CronJobBuilder 
+                schedules={schedules}
+                onSchedulesChange={setSchedules}
+                ruleId={rule?.id}
+              />
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        {/* Preview Tab */}
+        <TabsContent value="preview" className="space-y-6">
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-xl">Rule Preview</CardTitle>
+              <CardDescription>
+                Review your dynamic group rule configuration before saving
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div className="space-y-4">
+                  <div>
+                    <h3 className="text-sm font-medium">General Information</h3>
+                    <Separator className="my-2" />
+                    <dl className="space-y-2">
+                      <div className="flex justify-between">
+                        <dt className="text-sm font-medium text-muted-foreground">Name:</dt>
+                        <dd className="text-sm">{formData.name || 'Not set'}</dd>
+                      </div>
+                      <div className="flex justify-between">
+                        <dt className="text-sm font-medium text-muted-foreground">Target Group:</dt>
+                        <dd className="text-sm max-w-[250px] truncate" title={formData.targetGroup}>
+                          {formData.targetGroup || 'Not set'}
+                        </dd>
+                      </div>
+                      <div className="flex justify-between">
+                        <dt className="text-sm font-medium text-muted-foreground">Status:</dt>
+                        <dd className="text-sm">
+                          {formData.enabled ? (
+                            <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200">
+                              Enabled
+                            </Badge>
+                          ) : (
+                            <Badge variant="outline" className="bg-yellow-50 text-yellow-700 border-yellow-200">
+                              Disabled
+                            </Badge>
+                          )}
+                        </dd>
+                      </div>
+                      <div className="flex justify-between">
+                        <dt className="text-sm font-medium text-muted-foreground">Connections:</dt>
+                        <dd className="text-sm">
+                          {formData.connections.length === 0 ? (
+                            <span className="text-destructive">None selected</span>
+                          ) : (
+                            <span>{formData.connections.length} connection(s)</span>
+                          )}
+                        </dd>
+                      </div>
+                      <div className="flex justify-between">
+                        <dt className="text-sm font-medium text-muted-foreground">Variable Pattern:</dt>
+                        <dd className="text-sm">{formData.variablePattern || 'None'}</dd>
+                      </div>
+                    </dl>
+                  </div>
+
+                  <div>
+                    <h3 className="text-sm font-medium">Schedules</h3>
+                    <Separator className="my-2" />
+                    {schedules.length === 0 ? (
+                      <p className="text-sm text-destructive">No schedules defined</p>
                     ) : (
-                      <p className="text-muted-foreground">No conditions defined yet. Add conditions to see the preview.</p>
+                      <ul className="space-y-2">
+                        {schedules.map((schedule, index) => (
+                          <li key={index} className="text-sm flex items-center space-x-2">
+                            <Clock className="h-3 w-3 text-muted-foreground" />
+                            <span>
+                              {schedule.name}: {schedule.description}
+                              {!schedule.enabled && (
+                                <Badge variant="outline" className="ml-2 text-xs">Disabled</Badge>
+                              )}
+                            </span>
+                          </li>
+                        ))}
+                      </ul>
                     )}
                   </div>
-                </CardContent>
+                </div>
-              </Card>
-            </TabsContent>
 
-            <div className="flex justify-end space-x-2 mt-6">
+                <div className="space-y-4">
-              <Button variant="outline" type="button" onClick={onCancel}>
+                  <div>
-                Cancel
+                    <h3 className="text-sm font-medium">Conditions</h3>
-              </Button>
+                    <Separator className="my-2" />
-              <Button type="submit" disabled={saveMutation.isPending}>
+                    {conditions.length === 0 ? (
-                {saveMutation.isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                      <p className="text-sm text-destructive">No conditions defined</p>
-                {isEditMode ? "Update Rule" : "Create Rule"}
+                    ) : (
-              </Button>
+                      <div className="border rounded-md p-3 bg-muted/50">
-            </div>
+                        <p className="text-sm font-mono overflow-auto whitespace-pre-wrap">
-          </form>
+                          {/* Simplified visualization - in a real implementation, you'd want to render the actual LDAP filter */}
-        </Form>
+                          {`(& ${conditions.map((c) => 
+                            c.isGroup 
+                              ? `(${c.logicalOperator === 'AND' ? '&' : '|'} ...)`
+                              : `(${c.attribute} ${c.operator} ${c.value})`
+                          ).join(' ')})`}
+                        </p>
+                      </div>
+                    )}
+                  </div>
+
+                  <div>
+                    <h3 className="text-sm font-medium">Description</h3>
+                    <Separator className="my-2" />
+                    <p className="text-sm">{formData.description || 'No description provided'}</p>
+                  </div>
+
+                  <div className="pt-4">
+                    <Button
+                      variant="outline"
+                      className="w-full"
+                      onClick={handleTest}
+                      disabled={
+                        testRuleMutation.isPending || 
+                        conditions.length === 0 || 
+                        formData.connections.length === 0
+                      }
+                    >
+                      {testRuleMutation.isPending ? (
+                        <>
+                          <RefreshCw className="mr-2 h-4 w-4 animate-spin" />
+                          Testing...
+                        </>
+                      ) : (
+                        <>
+                          <RefreshCw className="mr-2 h-4 w-4" />
+                          Test Rule
+                        </>
+                      )}
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
       </Tabs>
+
+      <div className="flex justify-end space-x-2">
+        <Button variant="outline" onClick={onCancel}>
+          Cancel
+        </Button>
+        <Button onClick={handleSubmit}>
+          {rule ? 'Update Rule' : 'Create Rule'}
+        </Button>
+      </div>
     </div>
   );
-}
+};
+
+export default RuleEditor;