adserver-dashboard 1.0.0

package/Influence-MW-AdServer-12-02-2026/client/src/pages/signal-form.tsx

@@ -0,0 +1,1117 @@
+import { useState, useEffect } from "react";
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { useRoute, useLocation, Link } from "wouter";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import {
+  Users,
+  Footprints,
+  Search,
+  Cloud,
+  Plus,
+  Trash2,
+  Lightbulb,
+  Pencil,
+  Loader2,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useToast } from "@/hooks/use-toast";
+import { apiRequest, queryClient } from "@/lib/queryClient";
+import type { Signal, SignalRule, Brand } from "@shared/schema";
+import { SIGNAL_TYPES } from "@shared/schema";
+import { SignalVisualization } from "@/components/signal-visualizations";
+import { VendorStoresModal } from "@/components/vendor-stores-modal";
+
+const signalFormSchema = z.object({
+  name: z.string().min(1, "Signal name is required"),
+  signalType: z.string().min(1, "Please select a signal type"),
+  status: z.enum(["active", "inactive"]).default("active"),
+});
+
+type SignalFormData = z.infer<typeof signalFormSchema>;
+
+interface RuleData {
+  id: string;
+  name: string;
+  conditionType: string;
+  parameters: Record<string, unknown>;
+  isNew?: boolean;
+  isSaved?: boolean;
+}
+
+const WEATHER_CONDITIONS = [
+  { value: "temperature_above", label: "Temperature Above" },
+  { value: "temperature_below", label: "Temperature Below" },
+  { value: "weather_condition", label: "Weather Condition" },
+];
+
+const WEATHER_CONDITIONS_OPTIONS = [
+  { value: "sunny", label: "Sunny" },
+  { value: "cloudy", label: "Cloudy" },
+  { value: "rainy", label: "Rainy" },
+  { value: "stormy", label: "Stormy" },
+  { value: "snowy", label: "Snowy" },
+];
+
+const AUDIENCE_SEGMENTS = [
+  { value: "high_intent", label: "High Intent Shoppers" },
+  { value: "frequent_visitors", label: "Frequent Visitors" },
+  { value: "new_customers", label: "New Customers" },
+  { value: "loyalty_members", label: "Loyalty Members" },
+];
+
+const SEARCH_TREND_TYPES = [
+  { value: "trending_up", label: "Trending Up" },
+  { value: "trending_down", label: "Trending Down" },
+  { value: "above_threshold", label: "Above Threshold" },
+  { value: "below_threshold", label: "Below Threshold" },
+];
+
+const FOOTFALL_TIPS = {
+  title: "Footfall Signal - Location-Based Automation",
+  tips: "Footfall signals automatically activate your line items based on real-time visitor density at physical locations. Use this to reach audiences when foot traffic matches your campaign goals - whether targeting busy shopping periods or quieter times for specific messaging.",
+  examples: [
+    "Retail promotion: Activate ads when your store's foot traffic drops below 30% to drive more visitors during slow periods.",
+    "Competitor targeting: Show your ads near competitor locations when their foot traffic exceeds 70% to capture overflow audiences.",
+    "Peak hours: Target high-traffic periods (above 80%) at transit hubs for maximum brand exposure during rush hours.",
+  ],
+};
+
+const WEATHER_TIPS = {
+  title: "Weather Signal - Condition-Based Automation",
+  tips: "Weather signals trigger your line items automatically when specific weather conditions occur in your target locations. This enables highly relevant, contextual advertising that resonates with how people feel and behave during different weather patterns.",
+  examples: [
+    "Hot weather (above 28C): Promote cold beverages, ice cream, or air conditioning services when temperatures rise.",
+    "Rainy conditions: Advertise delivery services, indoor entertainment, or rain gear when precipitation is detected.",
+    "Cold weather (below 10C): Highlight warm drinks, heating solutions, or cozy indoor dining options.",
+  ],
+};
+
+const AUDIENCES_TIPS = {
+  title: "Audience Signal - Segment-Based Automation",
+  tips: "Audience signals activate line items when specific customer segments are detected in your target areas. Leverage first-party and third-party audience data to reach the right people at the right moment with personalized messaging.",
+  examples: [
+    "High-intent shoppers: Activate promotional ads when purchase-ready consumers are detected near your retail locations.",
+    "Loyalty members: Trigger exclusive offers when your loyalty program members are in proximity to your stores.",
+    "Demographic targeting: Show relevant content when your target age group or income bracket is prevalent in an area.",
+  ],
+};
+
+const SEARCH_TIPS = {
+  title: "Search Signal - Trend-Based Automation",
+  tips: "Search signals monitor keyword trends and automatically activate your line items when search interest spikes for relevant terms. Stay ahead of demand by responding in real-time to what people are actively searching for online.",
+  examples: [
+    "Brand momentum: Trigger brand awareness ads when searches for your company name increase by 25% or more.",
+    "Category trends: Activate product campaigns when searches for your product category are trending upward.",
+    "Competitive response: Show your ads when competitor brand searches decline, capturing audience attention during their weak moments.",
+  ],
+};
+
+function getTipsForType(type: string | undefined) {
+  switch (type) {
+    case "footfall":
+      return FOOTFALL_TIPS;
+    case "weather":
+      return WEATHER_TIPS;
+    case "audiences":
+      return AUDIENCES_TIPS;
+    case "search":
+      return SEARCH_TIPS;
+    default:
+      return null;
+  }
+}
+
+interface FootfallRuleFormProps {
+  rule: RuleData;
+  onUpdate: (rule: RuleData) => void;
+  onSave: (rule: RuleData) => void;
+  onDelete: (id: string) => void;
+  index: number;
+  brands: Brand[];
+}
+
+function FootfallRuleForm({ rule, onUpdate, onSave, onDelete, index, brands }: FootfallRuleFormProps) {
+  const [vendorStoresModalOpen, setVendorStoresModalOpen] = useState(false);
+  
+  const params = rule.parameters as {
+    brandId?: string;
+    storeIds?: string[];
+    ruleType?: string;
+    minBusy?: number;
+    maxBusy?: number;
+  };
+
+  const selectedBrand = brands.find(b => b.id === params.brandId);
+
+  const handleSaveStores = (storeIds: string[]) => {
+    onUpdate({
+      ...rule,
+      parameters: { ...params, storeIds },
+    });
+  };
+
+  return (
+    <Card className={cn(
+      "border-l-4",
+      rule.isSaved ? "border-l-green-500" : "border-l-primary"
+    )}>
+      <CardContent className="pt-4">
+        <div className="flex items-center justify-between mb-4">
+          <div className="flex items-center gap-2">
+            <h4 className="font-semibold">Rule {index + 1}</h4>
+            {rule.isSaved && (
+              <Badge variant="secondary" className="text-xs bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400">
+                Saved
+              </Badge>
+            )}
+          </div>
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            onClick={() => onDelete(rule.id)}
+            data-testid={`button-delete-rule-${index}`}
+          >
+            <Trash2 className="h-4 w-4 text-destructive" />
+          </Button>
+        </div>
+
+        <div className="space-y-4">
+          <div>
+            <label className="text-sm font-medium">Brand</label>
+            <Select
+              value={params.brandId || ""}
+              onValueChange={(value) =>
+                onUpdate({
+                  ...rule,
+                  parameters: { ...params, brandId: value, storeIds: [] },
+                })
+              }
+            >
+              <SelectTrigger data-testid={`select-brand-${index}`}>
+                <SelectValue placeholder="Select your brand" />
+              </SelectTrigger>
+              <SelectContent>
+                {brands.map((brand) => (
+                  <SelectItem key={brand.id} value={brand.id}>
+                    {brand.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            {selectedBrand?.iabCategory && (
+              <p className="text-xs text-muted-foreground mt-1">
+                Category: {selectedBrand.iabCategory}
+              </p>
+            )}
+          </div>
+
+          <div>
+            <label className="text-sm font-medium">Vendor Stores</label>
+            <div className="flex items-center gap-2 mt-1">
+              <span className="text-sm text-muted-foreground">
+                {params.storeIds?.length || 0} Vendor Stores are selected
+              </span>
+              <Button
+                type="button"
+                variant="ghost"
+                className="text-primary p-0 h-auto"
+                onClick={() => setVendorStoresModalOpen(true)}
+                data-testid={`button-add-stores-${index}`}
+              >
+                <Pencil className="h-3 w-3 mr-1" />
+                {params.storeIds?.length ? "EDIT STORES" : "+ ADD STORES"}
+              </Button>
+            </div>
+            <VendorStoresModal
+              open={vendorStoresModalOpen}
+              onOpenChange={setVendorStoresModalOpen}
+              brandId={params.brandId || null}
+              brandName={selectedBrand?.name}
+              selectedStoreIds={params.storeIds || []}
+              onSave={handleSaveStores}
+            />
+          </div>
+
+          <div>
+            <label className="text-sm font-medium">Rule Type</label>
+            <Select
+              value={params.ruleType || "threshold"}
+              onValueChange={(value) =>
+                onUpdate({
+                  ...rule,
+                  parameters: { ...params, ruleType: value },
+                })
+              }
+            >
+              <SelectTrigger data-testid={`select-rule-type-${index}`}>
+                <SelectValue placeholder="Select rule type" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="threshold">Set your threshold</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="text-sm font-medium">Min Busy %</label>
+              <Input
+                type="number"
+                min={0}
+                max={100}
+                value={params.minBusy ?? 0}
+                onChange={(e) =>
+                  onUpdate({
+                    ...rule,
+                    parameters: { ...params, minBusy: parseInt(e.target.value) || 0 },
+                  })
+                }
+                data-testid={`input-min-busy-${index}`}
+              />
+            </div>
+            <div>
+              <label className="text-sm font-medium">Max Busy %</label>
+              <Input
+                type="number"
+                min={0}
+                max={100}
+                value={params.maxBusy ?? 100}
+                onChange={(e) =>
+                  onUpdate({
+                    ...rule,
+                    parameters: { ...params, maxBusy: parseInt(e.target.value) || 0 },
+                  })
+                }
+                data-testid={`input-max-busy-${index}`}
+              />
+            </div>
+          </div>
+
+          <div className="flex justify-end">
+            <Button
+              type="button"
+              variant="ghost"
+              className="text-primary"
+              onClick={() => onSave(rule)}
+              data-testid={`button-save-rule-${index}`}
+            >
+              Save
+            </Button>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+interface WeatherRuleFormProps {
+  rule: RuleData;
+  onUpdate: (rule: RuleData) => void;
+  onSave: (rule: RuleData) => void;
+  onDelete: (id: string) => void;
+  index: number;
+}
+
+function WeatherRuleForm({ rule, onUpdate, onSave, onDelete, index }: WeatherRuleFormProps) {
+  const params = rule.parameters as {
+    location?: string;
+    condition?: string;
+    value?: number | string;
+  };
+
+  const isWeatherCondition = params.condition === "weather_condition";
+
+  return (
+    <Card className={cn(
+      "border-l-4",
+      rule.isSaved ? "border-l-green-500" : "border-l-primary"
+    )}>
+      <CardContent className="pt-4">
+        <div className="flex items-center justify-between mb-4">
+          <div className="flex items-center gap-2">
+            <h4 className="font-semibold">Rule {index + 1}</h4>
+            {rule.isSaved && (
+              <Badge variant="secondary" className="text-xs bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400">
+                Saved
+              </Badge>
+            )}
+          </div>
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            onClick={() => onDelete(rule.id)}
+            data-testid={`button-delete-rule-${index}`}
+          >
+            <Trash2 className="h-4 w-4 text-destructive" />
+          </Button>
+        </div>
+
+        <div className="space-y-4">
+          <div>
+            <label className="text-sm font-medium">Location</label>
+            <Input
+              placeholder="Enter location"
+              value={params.location || ""}
+              onChange={(e) =>
+                onUpdate({
+                  ...rule,
+                  parameters: { ...params, location: e.target.value },
+                })
+              }
+              data-testid={`input-location-${index}`}
+            />
+          </div>
+
+          <div>
+            <label className="text-sm font-medium">Condition</label>
+            <Select
+              value={params.condition || ""}
+              onValueChange={(value) =>
+                onUpdate({
+                  ...rule,
+                  parameters: { ...params, condition: value, value: undefined },
+                })
+              }
+            >
+              <SelectTrigger data-testid={`select-condition-${index}`}>
+                <SelectValue placeholder="Select condition" />
+              </SelectTrigger>
+              <SelectContent>
+                {WEATHER_CONDITIONS.map((cond) => (
+                  <SelectItem key={cond.value} value={cond.value}>
+                    {cond.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div>
+            <label className="text-sm font-medium">Value</label>
+            {isWeatherCondition ? (
+              <Select
+                value={(params.value as string) || ""}
+                onValueChange={(value) =>
+                  onUpdate({
+                    ...rule,
+                    parameters: { ...params, value },
+                  })
+                }
+              >
+                <SelectTrigger data-testid={`select-weather-value-${index}`}>
+                  <SelectValue placeholder="Select weather condition" />
+                </SelectTrigger>
+                <SelectContent>
+                  {WEATHER_CONDITIONS_OPTIONS.map((opt) => (
+                    <SelectItem key={opt.value} value={opt.value}>
+                      {opt.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            ) : (
+              <Input
+                type="number"
+                placeholder="Temperature (°C)"
+                value={params.value ?? ""}
+                onChange={(e) =>
+                  onUpdate({
+                    ...rule,
+                    parameters: { ...params, value: parseInt(e.target.value) || 0 },
+                  })
+                }
+                data-testid={`input-value-${index}`}
+              />
+            )}
+          </div>
+
+          <div className="flex justify-end">
+            <Button
+              type="button"
+              variant="ghost"
+              className="text-primary"
+              onClick={() => onSave(rule)}
+              data-testid={`button-save-rule-${index}`}
+            >
+              Save
+            </Button>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+interface AudiencesRuleFormProps {
+  rule: RuleData;
+  onUpdate: (rule: RuleData) => void;
+  onSave: (rule: RuleData) => void;
+  onDelete: (id: string) => void;
+  index: number;
+}
+
+function AudiencesRuleForm({ rule, onUpdate, onSave, onDelete, index }: AudiencesRuleFormProps) {
+  const params = rule.parameters as {
+    segment?: string;
+    minThreshold?: number;
+    maxThreshold?: number;
+  };
+
+  return (
+    <Card className={cn(
+      "border-l-4",
+      rule.isSaved ? "border-l-green-500" : "border-l-primary"
+    )}>
+      <CardContent className="pt-4">
+        <div className="flex items-center justify-between mb-4">
+          <div className="flex items-center gap-2">
+            <h4 className="font-semibold">Rule {index + 1}</h4>
+            {rule.isSaved && (
+              <Badge variant="secondary" className="text-xs bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400">
+                Saved
+              </Badge>
+            )}
+          </div>
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            onClick={() => onDelete(rule.id)}
+            data-testid={`button-delete-rule-${index}`}
+          >
+            <Trash2 className="h-4 w-4 text-destructive" />
+          </Button>
+        </div>
+
+        <div className="space-y-4">
+          <div>
+            <label className="text-sm font-medium">Audience Segment</label>
+            <Select
+              value={params.segment || ""}
+              onValueChange={(value) =>
+                onUpdate({
+                  ...rule,
+                  parameters: { ...params, segment: value },
+                })
+              }
+            >
+              <SelectTrigger data-testid={`select-segment-${index}`}>
+                <SelectValue placeholder="Select audience segment" />
+              </SelectTrigger>
+              <SelectContent>
+                {AUDIENCE_SEGMENTS.map((seg) => (
+                  <SelectItem key={seg.value} value={seg.value}>
+                    {seg.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="text-sm font-medium">Min Threshold %</label>
+              <Input
+                type="number"
+                min={0}
+                max={100}
+                value={params.minThreshold ?? 0}
+                onChange={(e) =>
+                  onUpdate({
+                    ...rule,
+                    parameters: { ...params, minThreshold: parseInt(e.target.value) || 0 },
+                  })
+                }
+                data-testid={`input-min-threshold-${index}`}
+              />
+            </div>
+            <div>
+              <label className="text-sm font-medium">Max Threshold %</label>
+              <Input
+                type="number"
+                min={0}
+                max={100}
+                value={params.maxThreshold ?? 100}
+                onChange={(e) =>
+                  onUpdate({
+                    ...rule,
+                    parameters: { ...params, maxThreshold: parseInt(e.target.value) || 0 },
+                  })
+                }
+                data-testid={`input-max-threshold-${index}`}
+              />
+            </div>
+          </div>
+
+          <div className="flex justify-end">
+            <Button
+              type="button"
+              variant="ghost"
+              className="text-primary"
+              onClick={() => onSave(rule)}
+              data-testid={`button-save-rule-${index}`}
+            >
+              Save
+            </Button>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+interface SearchRuleFormProps {
+  rule: RuleData;
+  onUpdate: (rule: RuleData) => void;
+  onSave: (rule: RuleData) => void;
+  onDelete: (id: string) => void;
+  index: number;
+}
+
+function SearchRuleForm({ rule, onUpdate, onSave, onDelete, index }: SearchRuleFormProps) {
+  const params = rule.parameters as {
+    keyword?: string;
+    trendType?: string;
+    threshold?: number;
+  };
+
+  return (
+    <Card className={cn(
+      "border-l-4",
+      rule.isSaved ? "border-l-green-500" : "border-l-primary"
+    )}>
+      <CardContent className="pt-4">
+        <div className="flex items-center justify-between mb-4">
+          <div className="flex items-center gap-2">
+            <h4 className="font-semibold">Rule {index + 1}</h4>
+            {rule.isSaved && (
+              <Badge variant="secondary" className="text-xs bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400">
+                Saved
+              </Badge>
+            )}
+          </div>
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            onClick={() => onDelete(rule.id)}
+            data-testid={`button-delete-rule-${index}`}
+          >
+            <Trash2 className="h-4 w-4 text-destructive" />
+          </Button>
+        </div>
+
+        <div className="space-y-4">
+          <div>
+            <label className="text-sm font-medium">Keyword</label>
+            <Input
+              placeholder="Enter search keyword"
+              value={params.keyword || ""}
+              onChange={(e) =>
+                onUpdate({
+                  ...rule,
+                  parameters: { ...params, keyword: e.target.value },
+                })
+              }
+              data-testid={`input-keyword-${index}`}
+            />
+          </div>
+
+          <div>
+            <label className="text-sm font-medium">Trend Type</label>
+            <Select
+              value={params.trendType || ""}
+              onValueChange={(value) =>
+                onUpdate({
+                  ...rule,
+                  parameters: { ...params, trendType: value },
+                })
+              }
+            >
+              <SelectTrigger data-testid={`select-trend-type-${index}`}>
+                <SelectValue placeholder="Select trend type" />
+              </SelectTrigger>
+              <SelectContent>
+                {SEARCH_TREND_TYPES.map((trend) => (
+                  <SelectItem key={trend.value} value={trend.value}>
+                    {trend.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div>
+            <label className="text-sm font-medium">Threshold %</label>
+            <Input
+              type="number"
+              min={0}
+              max={100}
+              value={params.threshold ?? 0}
+              onChange={(e) =>
+                onUpdate({
+                  ...rule,
+                  parameters: { ...params, threshold: parseInt(e.target.value) || 0 },
+                })
+              }
+              data-testid={`input-threshold-${index}`}
+            />
+          </div>
+
+          <div className="flex justify-end">
+            <Button
+              type="button"
+              variant="ghost"
+              className="text-primary"
+              onClick={() => onSave(rule)}
+              data-testid={`button-save-rule-${index}`}
+            >
+              Save
+            </Button>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+export default function SignalForm() {
+  const [, setLocation] = useLocation();
+  const [matchCreate] = useRoute("/signals/create");
+  const [matchEdit, editParams] = useRoute("/signals/:id/edit");
+  const { toast } = useToast();
+
+  const isEditing = Boolean(matchEdit);
+  const signalId = editParams?.id;
+
+  const [rules, setRules] = useState<RuleData[]>([]);
+
+  const { data: existingSignal, isLoading: signalLoading } = useQuery<Signal>({
+    queryKey: ["/api/signals", signalId],
+    enabled: isEditing && Boolean(signalId),
+  });
+
+  const { data: existingRules = [] } = useQuery<SignalRule[]>({
+    queryKey: ["/api/signals", signalId, "rules"],
+    enabled: isEditing && Boolean(signalId),
+  });
+
+  const { data: brands = [] } = useQuery<Brand[]>({
+    queryKey: ["/api/brands"],
+  });
+
+  const form = useForm<SignalFormData>({
+    resolver: zodResolver(signalFormSchema),
+    defaultValues: {
+      name: "",
+      signalType: "",
+      status: "active",
+    },
+  });
+
+  const watchedType = form.watch("signalType");
+
+  useEffect(() => {
+    if (existingSignal) {
+      form.reset({
+        name: existingSignal.name,
+        signalType: existingSignal.signalType,
+        status: existingSignal.status as "active" | "inactive",
+      });
+    }
+  }, [existingSignal, form]);
+
+  useEffect(() => {
+    if (existingRules.length > 0) {
+      setRules(
+        existingRules.map((r) => ({
+          id: r.id,
+          name: r.name,
+          conditionType: r.conditionType,
+          parameters: (r.parameters as Record<string, unknown>) || {},
+          isSaved: true,
+        }))
+      );
+    }
+  }, [existingRules]);
+
+  const createSignalMutation = useMutation({
+    mutationFn: async (data: SignalFormData) => {
+      const response = await apiRequest("POST", "/api/signals", data);
+      return response.json();
+    },
+    onSuccess: async (signal: Signal) => {
+      for (const rule of rules) {
+        await apiRequest("POST", `/api/signals/${signal.id}/rules`, {
+          name: rule.name,
+          conditionType: rule.conditionType,
+          parameters: rule.parameters,
+        });
+      }
+      queryClient.invalidateQueries({ queryKey: ["/api/signals"] });
+      toast({ title: "Signal created successfully" });
+      setLocation("/signals");
+    },
+    onError: () => {
+      toast({ title: "Failed to create signal", variant: "destructive" });
+    },
+  });
+
+  const updateSignalMutation = useMutation({
+    mutationFn: async (data: SignalFormData) => {
+      const response = await apiRequest("PATCH", `/api/signals/${signalId}`, data);
+      return response.json();
+    },
+    onSuccess: async () => {
+      for (const rule of rules) {
+        if (rule.isNew) {
+          await apiRequest("POST", `/api/signals/${signalId}/rules`, {
+            name: rule.name,
+            conditionType: rule.conditionType,
+            parameters: rule.parameters,
+          });
+        } else {
+          await apiRequest("PATCH", `/api/signals/${signalId}/rules/${rule.id}`, {
+            name: rule.name,
+            conditionType: rule.conditionType,
+            parameters: rule.parameters,
+          });
+        }
+      }
+      queryClient.invalidateQueries({ queryKey: ["/api/signals"] });
+      queryClient.invalidateQueries({ queryKey: ["/api/signals", signalId] });
+      toast({ title: "Signal updated successfully" });
+      setLocation("/signals");
+    },
+    onError: () => {
+      toast({ title: "Failed to update signal", variant: "destructive" });
+    },
+  });
+
+  const onSubmit = (data: SignalFormData) => {
+    if (isEditing) {
+      updateSignalMutation.mutate(data);
+    } else {
+      createSignalMutation.mutate(data);
+    }
+  };
+
+  const addRule = () => {
+    const newRule: RuleData = {
+      id: `temp-${Date.now()}`,
+      name: `Rule ${rules.length + 1}`,
+      conditionType: watchedType,
+      parameters: {},
+      isNew: true,
+    };
+    setRules([...rules, newRule]);
+  };
+
+  const updateRule = (updatedRule: RuleData) => {
+    setRules(rules.map((r) => (r.id === updatedRule.id ? updatedRule : r)));
+  };
+
+  const saveRule = (rule: RuleData) => {
+    setRules(rules.map((r) => (r.id === rule.id ? { ...rule, isSaved: true } : r)));
+    toast({ title: `Rule saved` });
+  };
+
+  const deleteRule = async (ruleId: string) => {
+    const rule = rules.find((r) => r.id === ruleId);
+    if (rule && !rule.isNew && isEditing) {
+      try {
+        await apiRequest("DELETE", `/api/signals/${signalId}/rules/${ruleId}`);
+      } catch {
+        toast({ title: "Failed to delete rule", variant: "destructive" });
+        return;
+      }
+    }
+    setRules(rules.filter((r) => r.id !== ruleId));
+    toast({ title: "Rule deleted" });
+  };
+
+  const tips = getTipsForType(watchedType);
+  const isPending = createSignalMutation.isPending || updateSignalMutation.isPending;
+
+  if (isEditing && signalLoading) {
+    return (
+      <div className="flex items-center justify-center h-screen">
+        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-screen">
+      <header className="sticky top-0 z-10 bg-background border-b px-6 py-4">
+        <div className="flex items-center justify-between">
+          <h1 className="text-xl font-semibold" data-testid="text-page-title">
+            {isEditing ? "Edit Signal" : "New Signal"}
+          </h1>
+          <div className="flex items-center gap-4">
+            <FormField
+              control={form.control}
+              name="status"
+              render={({ field }) => (
+                <Select value={field.value} onValueChange={field.onChange}>
+                  <SelectTrigger className="w-32" data-testid="select-status">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="active">Active</SelectItem>
+                    <SelectItem value="inactive">Inactive</SelectItem>
+                  </SelectContent>
+                </Select>
+              )}
+            />
+            <Link href="/signals">
+              <Button variant="outline" className="text-destructive border-destructive hover:bg-destructive/10" data-testid="button-cancel">
+                Cancel
+              </Button>
+            </Link>
+          </div>
+        </div>
+        <p className="text-sm text-muted-foreground mt-1">
+          You can add multiple rules to activate the signal. If any of the rules is true, the signal activates the associated line item automatically.
+        </p>
+      </header>
+
+      <div className="flex-1 overflow-y-auto">
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} id="signal-form" className="grid grid-cols-1 lg:grid-cols-2 gap-6 p-6">
+            <div className="space-y-6">
+              <Card>
+                <CardHeader>
+                  <CardTitle>Signal Details</CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <FormField
+                    control={form.control}
+                    name="name"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Signal Name</FormLabel>
+                        <FormControl>
+                          <Input
+                            placeholder="Enter a descriptive name for this signal"
+                            {...field}
+                            data-testid="input-signal-name"
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name="signalType"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Signal Type</FormLabel>
+                        <Select 
+                          value={field.value} 
+                          onValueChange={(value) => {
+                            field.onChange(value);
+                            if (watchedType !== value) {
+                              setRules([]);
+                            }
+                          }}
+                        >
+                          <SelectTrigger data-testid="select-signal-type">
+                            <SelectValue placeholder="Select signal type" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {SIGNAL_TYPES.map((type) => (
+                              <SelectItem key={type.value} value={type.value}>
+                                {type.label}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </CardContent>
+              </Card>
+
+              <Card>
+                <CardHeader>
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <CardTitle>Rules</CardTitle>
+                      <p className="text-sm text-muted-foreground mt-1">
+                        Configure when this signal activates
+                      </p>
+                    </div>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      onClick={addRule}
+                      disabled={!watchedType}
+                      data-testid="button-add-rule"
+                    >
+                      <Plus className="h-4 w-4 mr-2" />
+                      Add Rule
+                    </Button>
+                  </div>
+                </CardHeader>
+                <CardContent>
+                  {rules.length === 0 ? (
+                    <div className="border-2 border-dashed rounded-lg p-8 text-center">
+                      <div className="mx-auto w-12 h-12 rounded-full bg-muted flex items-center justify-center mb-3">
+                        <Plus className="h-6 w-6 text-muted-foreground" />
+                      </div>
+                      <p className="font-medium mb-1">No rules configured</p>
+                      <p className="text-sm text-muted-foreground mb-4">
+                        Add rules to define when this signal should activate
+                      </p>
+                      <Button
+                        type="button"
+                        variant="outline"
+                        onClick={addRule}
+                        disabled={!watchedType}
+                        data-testid="button-add-first-rule"
+                      >
+                        Add Your First Rule
+                      </Button>
+                    </div>
+                  ) : (
+                    <div className="space-y-4">
+                      {rules.map((rule, index) => {
+                        switch (watchedType) {
+                          case "footfall":
+                            return (
+                              <FootfallRuleForm
+                                key={rule.id}
+                                rule={rule}
+                                onUpdate={updateRule}
+                                onSave={saveRule}
+                                onDelete={deleteRule}
+                                index={index}
+                                brands={brands}
+                              />
+                            );
+                          case "weather":
+                            return (
+                              <WeatherRuleForm
+                                key={rule.id}
+                                rule={rule}
+                                onUpdate={updateRule}
+                                onSave={saveRule}
+                                onDelete={deleteRule}
+                                index={index}
+                              />
+                            );
+                          case "audiences":
+                            return (
+                              <AudiencesRuleForm
+                                key={rule.id}
+                                rule={rule}
+                                onUpdate={updateRule}
+                                onSave={saveRule}
+                                onDelete={deleteRule}
+                                index={index}
+                              />
+                            );
+                          case "search":
+                            return (
+                              <SearchRuleForm
+                                key={rule.id}
+                                rule={rule}
+                                onUpdate={updateRule}
+                                onSave={saveRule}
+                                onDelete={deleteRule}
+                                index={index}
+                              />
+                            );
+                          default:
+                            return null;
+                        }
+                      })}
+                    </div>
+                  )}
+                </CardContent>
+              </Card>
+            </div>
+
+            <div className="space-y-4">
+              {watchedType && rules.length > 0 && (
+                <Card>
+                  <CardContent className="p-6">
+                    <SignalVisualization type={watchedType} rules={rules} />
+                  </CardContent>
+                </Card>
+              )}
+              <Card>
+                <CardContent className="p-6">
+                  <div className="flex items-start gap-3">
+                    <div className="p-2 rounded-full bg-yellow-100 dark:bg-yellow-900/30">
+                      <Lightbulb className="h-5 w-5 text-yellow-600 dark:text-yellow-500" />
+                    </div>
+                    <div className="space-y-3">
+                      <p className="font-medium">
+                        {tips?.title || "Select signal type and add rules to view forecasting."}
+                      </p>
+                      {tips && (
+                        <>
+                          <p className="text-sm text-muted-foreground">{tips.tips}</p>
+                          <div className="text-sm text-muted-foreground">
+                            <p className="font-medium mb-2">Example:</p>
+                            <ol className="list-decimal list-inside space-y-1">
+                              {tips.examples.map((example, i) => (
+                                <li key={i}>{example}</li>
+                              ))}
+                            </ol>
+                          </div>
+                        </>
+                      )}
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            </div>
+          </form>
+        </Form>
+      </div>
+
+      <footer className="sticky bottom-0 z-10 bg-background border-t px-6 py-4">
+        <div className="flex items-center justify-between gap-4">
+          <Link href="/signals">
+            <Button type="button" variant="ghost" data-testid="button-back">
+              Back
+            </Button>
+          </Link>
+          <Button type="submit" form="signal-form" disabled={isPending} data-testid="button-save">
+            {isPending && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
+            Save
+          </Button>
+        </div>
+      </footer>
+    </div>
+  );
+}