adserver-dashboard 1.0.0

package/Influence-MW-AdServer-12-02-2026/client/src/components/data-table.tsx

@@ -0,0 +1,158 @@
+import { ArrowUp, ArrowDown } from "lucide-react";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Skeleton } from "@/components/ui/skeleton";
+import { cn } from "@/lib/utils";
+
+interface Column<T> {
+  key: keyof T | string;
+  header: string;
+  className?: string;
+  sortable?: boolean;
+  render?: (item: T) => React.ReactNode;
+}
+
+interface DataTableProps<T> {
+  columns: Column<T>[];
+  data: T[];
+  isLoading?: boolean;
+  emptyMessage?: string;
+  onRowClick?: (item: T) => void;
+  className?: string;
+  sortKey?: string;
+  sortOrder?: "asc" | "desc";
+  onSort?: (key: string) => void;
+}
+
+export function DataTable<T extends { id: string }>({
+  columns,
+  data,
+  isLoading = false,
+  emptyMessage = "No data available",
+  onRowClick,
+  className,
+  sortKey,
+  sortOrder,
+  onSort,
+}: DataTableProps<T>) {
+  const renderHeader = (column: Column<T>) => {
+    const isSortable = column.sortable !== false && onSort;
+    const isSorted = sortKey === String(column.key);
+
+    if (isSortable) {
+      return (
+        <TableHead
+          key={String(column.key)}
+          className={cn(
+            column.className,
+            "cursor-pointer hover:bg-muted/50 select-none"
+          )}
+          onClick={() => onSort(String(column.key))}
+          data-testid={`sort-header-${String(column.key)}`}
+        >
+          <div className="flex items-center gap-1">
+            {column.header}
+            {isSorted && (
+              sortOrder === "asc" ? (
+                <ArrowUp className="h-4 w-4" />
+              ) : (
+                <ArrowDown className="h-4 w-4" />
+              )
+            )}
+          </div>
+        </TableHead>
+      );
+    }
+
+    return (
+      <TableHead key={String(column.key)} className={column.className}>
+        {column.header}
+      </TableHead>
+    );
+  };
+
+  if (isLoading) {
+    return (
+      <div className={cn("rounded-md border", className)}>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              {columns.map((column) => renderHeader(column))}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {[...Array(5)].map((_, i) => (
+              <TableRow key={i}>
+                {columns.map((column) => (
+                  <TableCell key={String(column.key)}>
+                    <Skeleton className="h-4 w-full" />
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+    );
+  }
+
+  if (data.length === 0) {
+    return (
+      <div className={cn("rounded-md border", className)}>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              {columns.map((column) => renderHeader(column))}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            <TableRow>
+              <TableCell
+                colSpan={columns.length}
+                className="h-32 text-center text-muted-foreground"
+              >
+                {emptyMessage}
+              </TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("rounded-md border", className)}>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            {columns.map((column) => renderHeader(column))}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {data.map((item) => (
+            <TableRow
+              key={item.id}
+              onClick={() => onRowClick?.(item)}
+              className={cn(onRowClick && "cursor-pointer hover-elevate")}
+              data-testid={`row-${item.id}`}
+            >
+              {columns.map((column) => (
+                <TableCell key={String(column.key)} className={column.className}>
+                  {column.render
+                    ? column.render(item)
+                    : String((item as Record<string, unknown>)[column.key as string] ?? "")}
+                </TableCell>
+              ))}
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}

package/Influence-MW-AdServer-12-02-2026/client/src/components/filter-drawer.tsx

@@ -0,0 +1,356 @@
+import { useState, useMemo } from "react";
+import { CalendarIcon, Check, ChevronDown, X } from "lucide-react";
+import { format } from "date-fns";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetFooter,
+} from "@/components/ui/sheet";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Calendar } from "@/components/ui/calendar";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import { Badge } from "@/components/ui/badge";
+import { SearchableCombobox, ComboboxOption } from "@/components/searchable-combobox";
+import { cn } from "@/lib/utils";
+
+export interface MultiSelectOption {
+  value: string;
+  label: string;
+}
+
+export interface FilterField {
+  key: string;
+  label: string;
+  type: "text" | "multi-select" | "combobox" | "date-range" | "number-range";
+  options?: MultiSelectOption[];
+  comboboxOptions?: ComboboxOption[];
+  placeholder?: string;
+  minPlaceholder?: string;
+  maxPlaceholder?: string;
+}
+
+export interface FilterValues {
+  [key: string]: string | string[] | { start?: Date; end?: Date } | { min?: number; max?: number };
+}
+
+interface FilterDrawerProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  fields: FilterField[];
+  values: FilterValues;
+  onChange: (values: FilterValues) => void;
+  onApply: () => void;
+  onClear: () => void;
+  title?: string;
+}
+
+export function FilterDrawer({
+  open,
+  onOpenChange,
+  fields,
+  values,
+  onChange,
+  onApply,
+  onClear,
+  title = "Filters",
+}: FilterDrawerProps) {
+  const [localValues, setLocalValues] = useState<FilterValues>(values);
+
+  const handleFieldChange = (key: string, value: FilterValues[string]) => {
+    setLocalValues((prev) => ({ ...prev, [key]: value }));
+  };
+
+  const handleApply = () => {
+    onChange(localValues);
+    onApply();
+  };
+
+  const handleClear = () => {
+    const clearedValues: FilterValues = {};
+    fields.forEach((field) => {
+      switch (field.type) {
+        case "text":
+        case "combobox":
+          clearedValues[field.key] = "";
+          break;
+        case "multi-select":
+          clearedValues[field.key] = [];
+          break;
+        case "date-range":
+          clearedValues[field.key] = { start: undefined, end: undefined };
+          break;
+        case "number-range":
+          clearedValues[field.key] = { min: undefined, max: undefined };
+          break;
+      }
+    });
+    setLocalValues(clearedValues);
+    onChange(clearedValues);
+    onClear();
+  };
+
+  const handleMultiSelectChange = (key: string, optionValue: string, checked: boolean) => {
+    const current = (localValues[key] as string[]) || [];
+    const updated = checked
+      ? [...current, optionValue]
+      : current.filter((v) => v !== optionValue);
+    handleFieldChange(key, updated);
+  };
+
+  const handleDateChange = (key: string, type: "start" | "end", date: Date | undefined) => {
+    const current = (localValues[key] as { start?: Date; end?: Date }) || {};
+    handleFieldChange(key, { ...current, [type]: date });
+  };
+
+  const handleNumberChange = (key: string, type: "min" | "max", value: string) => {
+    const current = (localValues[key] as { min?: number; max?: number }) || {};
+    const numValue = value === "" ? undefined : parseFloat(value);
+    handleFieldChange(key, { ...current, [type]: numValue });
+  };
+
+  const renderField = (field: FilterField) => {
+    switch (field.type) {
+      case "text":
+        return (
+          <Input
+            value={(localValues[field.key] as string) || ""}
+            onChange={(e) => handleFieldChange(field.key, e.target.value)}
+            placeholder={field.placeholder}
+            data-testid={`filter-input-${field.key}`}
+          />
+        );
+
+      case "multi-select":
+        const selectedValues = (localValues[field.key] as string[]) || [];
+        const options = field.options || [];
+        return (
+          <div className="flex flex-col gap-2">
+            <Popover>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  role="combobox"
+                  className="justify-between font-normal"
+                  data-testid={`filter-multiselect-${field.key}`}
+                >
+                  {selectedValues.length === 0 ? (
+                    <span className="text-muted-foreground">Select {field.label.toLowerCase()}...</span>
+                  ) : (
+                    <span>{selectedValues.length} selected</span>
+                  )}
+                  <ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="w-[280px] p-0" align="start">
+                <Command>
+                  <CommandInput placeholder={`Search ${field.label.toLowerCase()}...`} />
+                  <CommandList>
+                    <CommandEmpty>No results found.</CommandEmpty>
+                    <CommandGroup>
+                      {options.map((option) => (
+                        <CommandItem
+                          key={option.value}
+                          value={option.label}
+                          onSelect={() => {
+                            const isSelected = selectedValues.includes(option.value);
+                            handleMultiSelectChange(field.key, option.value, !isSelected);
+                          }}
+                          data-testid={`filter-option-${field.key}-${option.value}`}
+                        >
+                          <div className={cn(
+                            "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
+                            selectedValues.includes(option.value)
+                              ? "bg-primary text-primary-foreground"
+                              : "opacity-50"
+                          )}>
+                            {selectedValues.includes(option.value) && (
+                              <Check className="h-3 w-3" />
+                            )}
+                          </div>
+                          <span>{option.label}</span>
+                        </CommandItem>
+                      ))}
+                    </CommandGroup>
+                  </CommandList>
+                </Command>
+              </PopoverContent>
+            </Popover>
+            {selectedValues.length > 0 && (
+              <div className="flex flex-wrap gap-1">
+                {selectedValues.map((value) => {
+                  const option = options.find((o) => o.value === value);
+                  return (
+                    <Badge
+                      key={value}
+                      variant="secondary"
+                      className="text-xs"
+                    >
+                      {option?.label || value}
+                      <button
+                        type="button"
+                        className="ml-1 rounded-full outline-none ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2"
+                        onClick={() => handleMultiSelectChange(field.key, value, false)}
+                        data-testid={`filter-remove-${field.key}-${value}`}
+                      >
+                        <X className="h-3 w-3" />
+                      </button>
+                    </Badge>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+        );
+
+      case "combobox":
+        return (
+          <SearchableCombobox
+            options={field.comboboxOptions || []}
+            value={(localValues[field.key] as string) || ""}
+            onValueChange={(value) => handleFieldChange(field.key, value)}
+            placeholder={field.placeholder || "Select..."}
+            data-testid={`filter-combobox-${field.key}`}
+          />
+        );
+
+      case "date-range":
+        const dateValue = (localValues[field.key] as { start?: Date; end?: Date }) || {};
+        return (
+          <div className="flex flex-col gap-2">
+            <div className="flex items-center gap-2">
+              <span className="text-sm text-muted-foreground w-12">From:</span>
+              <Popover>
+                <PopoverTrigger asChild>
+                  <Button
+                    variant="outline"
+                    className={cn(
+                      "flex-1 justify-start text-left font-normal",
+                      !dateValue.start && "text-muted-foreground"
+                    )}
+                    data-testid={`filter-date-start-${field.key}`}
+                  >
+                    <CalendarIcon className="mr-2 h-4 w-4" />
+                    {dateValue.start ? format(dateValue.start, "PPP") : "Pick a date"}
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent className="w-auto p-0" align="start">
+                  <Calendar
+                    mode="single"
+                    selected={dateValue.start}
+                    onSelect={(date) => handleDateChange(field.key, "start", date)}
+                  />
+                </PopoverContent>
+              </Popover>
+            </div>
+            <div className="flex items-center gap-2">
+              <span className="text-sm text-muted-foreground w-12">To:</span>
+              <Popover>
+                <PopoverTrigger asChild>
+                  <Button
+                    variant="outline"
+                    className={cn(
+                      "flex-1 justify-start text-left font-normal",
+                      !dateValue.end && "text-muted-foreground"
+                    )}
+                    data-testid={`filter-date-end-${field.key}`}
+                  >
+                    <CalendarIcon className="mr-2 h-4 w-4" />
+                    {dateValue.end ? format(dateValue.end, "PPP") : "Pick a date"}
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent className="w-auto p-0" align="start">
+                  <Calendar
+                    mode="single"
+                    selected={dateValue.end}
+                    onSelect={(date) => handleDateChange(field.key, "end", date)}
+                  />
+                </PopoverContent>
+              </Popover>
+            </div>
+          </div>
+        );
+
+      case "number-range":
+        const numberValue = (localValues[field.key] as { min?: number; max?: number }) || {};
+        return (
+          <div className="flex items-center gap-2">
+            <Input
+              type="number"
+              value={numberValue.min ?? ""}
+              onChange={(e) => handleNumberChange(field.key, "min", e.target.value)}
+              placeholder={field.minPlaceholder || "Min"}
+              className="flex-1"
+              data-testid={`filter-number-min-${field.key}`}
+            />
+            <span className="text-muted-foreground">-</span>
+            <Input
+              type="number"
+              value={numberValue.max ?? ""}
+              onChange={(e) => handleNumberChange(field.key, "max", e.target.value)}
+              placeholder={field.maxPlaceholder || "Max"}
+              className="flex-1"
+              data-testid={`filter-number-max-${field.key}`}
+            />
+          </div>
+        );
+
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent side="right" className="flex flex-col">
+        <SheetHeader>
+          <SheetTitle>{title}</SheetTitle>
+        </SheetHeader>
+
+        <div className="flex-1 overflow-y-auto py-4">
+          <div className="flex flex-col gap-6">
+            {fields.map((field) => (
+              <div key={field.key} className="flex flex-col gap-2">
+                <Label className="font-medium">{field.label}</Label>
+                {renderField(field)}
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <SheetFooter className="flex-row gap-2 pt-4 border-t">
+          <Button
+            variant="outline"
+            onClick={handleClear}
+            className="flex-1"
+            data-testid="button-clear-filters"
+          >
+            Clear
+          </Button>
+          <Button
+            onClick={handleApply}
+            className="flex-1"
+            data-testid="button-apply-filters"
+          >
+            Apply
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

package/Influence-MW-AdServer-12-02-2026/client/src/components/form-insights-panel.tsx

@@ -0,0 +1,82 @@
+import { Info, Lightbulb } from "lucide-react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+
+interface InsightItem {
+  text: string;
+}
+
+export interface SectionInsights {
+  section: string;
+  insights: InsightItem[];
+  tips: InsightItem[];
+}
+
+interface FormInsightsPanelProps {
+  insights: InsightItem[];
+  tips: InsightItem[];
+  currentSection?: string;
+  sectionInsights?: SectionInsights[];
+}
+
+export function FormInsightsPanel({ 
+  insights, 
+  tips, 
+  currentSection,
+  sectionInsights 
+}: FormInsightsPanelProps) {
+  const activeSectionData = sectionInsights?.find(s => s.section === currentSection);
+  
+  const displayInsights = activeSectionData?.insights || insights;
+  const displayTips = activeSectionData?.tips || tips;
+  
+  return (
+    <div className="space-y-4" data-testid="panel-form-insights">
+      {currentSection && (
+        <div className="flex items-center gap-2">
+          <Badge variant="outline" className="text-xs">
+            {currentSection}
+          </Badge>
+        </div>
+      )}
+      
+      <Card>
+        <CardHeader className="pb-3">
+          <CardTitle className="text-sm font-medium flex items-center gap-2" data-testid="title-form-insights">
+            <Info className="h-4 w-4 text-blue-500" />
+            Form Insights
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="pt-0">
+          <ul className="space-y-2 text-sm text-muted-foreground">
+            {displayInsights.map((insight, index) => (
+              <li key={index} className="flex items-start gap-2" data-testid={`text-form-insight-${index}`}>
+                <span className="text-blue-500 mt-1">•</span>
+                <span>{insight.text}</span>
+              </li>
+            ))}
+          </ul>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader className="pb-3">
+          <CardTitle className="text-sm font-medium flex items-center gap-2" data-testid="title-quick-tips">
+            <Lightbulb className="h-4 w-4 text-amber-500" />
+            Quick Tips
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="pt-0">
+          <ul className="space-y-2 text-sm text-muted-foreground">
+            {displayTips.map((tip, index) => (
+              <li key={index} className="flex items-start gap-2" data-testid={`text-form-tip-${index}`}>
+                <span className="text-amber-500 mt-1">•</span>
+                <span>{tip.text}</span>
+              </li>
+            ))}
+          </ul>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}