adserver-dashboard 1.0.0

package/Influence-MW-AdServer-12-02-2026/client/src/components/vendor-stores-modal.tsx

@@ -0,0 +1,336 @@
+import { useState, useMemo } from "react";
+import { Search, Filter } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Badge } from "@/components/ui/badge";
+
+interface VendorStore {
+  id: string;
+  name: string;
+  location: string;
+  longitude: number;
+  latitude: number;
+  type: string;
+  category: string;
+  brandId: string;
+}
+
+const MOCK_STORES: VendorStore[] = [
+  {
+    id: "001",
+    name: "Burger King 1",
+    location: "Kuala Lumpur",
+    longitude: 101.30698,
+    latitude: 1.15483,
+    type: "GVM A",
+    category: "Restaurant",
+    brandId: "brand-1",
+  },
+  {
+    id: "002",
+    name: "Burger King 2",
+    location: "Bukit Bintang",
+    longitude: 101.71278,
+    latitude: 3.14719,
+    type: "GVM B",
+    category: "Restaurant",
+    brandId: "brand-1",
+  },
+  {
+    id: "003",
+    name: "Burger King 3",
+    location: "Petaling Jaya",
+    longitude: 101.60683,
+    latitude: 3.10726,
+    type: "POI",
+    category: "Restaurant",
+    brandId: "brand-1",
+  },
+  {
+    id: "004",
+    name: "Burger King 4",
+    location: "Shah Alam",
+    longitude: 101.53281,
+    latitude: 3.07113,
+    type: "Store",
+    category: "Restaurant",
+    brandId: "brand-1",
+  },
+  {
+    id: "005",
+    name: "Burger King 5",
+    location: "Subang Jaya",
+    longitude: 101.58528,
+    latitude: 3.04384,
+    type: "Location",
+    category: "Restaurant",
+    brandId: "brand-1",
+  },
+  {
+    id: "006",
+    name: "Burger King 6",
+    location: "Ampang",
+    longitude: 101.76082,
+    latitude: 3.15268,
+    type: "GVM A",
+    category: "Restaurant",
+    brandId: "brand-1",
+  },
+  {
+    id: "007",
+    name: "Burger King 7",
+    location: "Cheras",
+    longitude: 101.74917,
+    latitude: 3.10544,
+    type: "GVM B",
+    category: "Restaurant",
+    brandId: "brand-1",
+  },
+  {
+    id: "008",
+    name: "Burger King 8",
+    location: "Bangsar",
+    longitude: 101.67098,
+    latitude: 3.12899,
+    type: "POI",
+    category: "Restaurant",
+    brandId: "brand-1",
+  },
+  {
+    id: "009",
+    name: "McDonald's 1",
+    location: "Mid Valley",
+    longitude: 101.68133,
+    latitude: 3.12583,
+    type: "GVM A",
+    category: "Restaurant",
+    brandId: "brand-2",
+  },
+  {
+    id: "010",
+    name: "McDonald's 2",
+    location: "Pavilion KL",
+    longitude: 101.68069,
+    latitude: 3.1578,
+    type: "GVM B",
+    category: "Restaurant",
+    brandId: "brand-2",
+  },
+  {
+    id: "011",
+    name: "McDonald's 3",
+    location: "One Utama",
+    longitude: 101.65094,
+    latitude: 3.17224,
+    type: "POI",
+    category: "Restaurant",
+    brandId: "brand-2",
+  },
+  {
+    id: "012",
+    name: "McDonald's 4",
+    location: "IOI City Mall",
+    longitude: 101.55902,
+    latitude: 2.80968,
+    type: "Store",
+    category: "Restaurant",
+    brandId: "brand-2",
+  },
+];
+
+interface VendorStoresModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  brandId: string | null;
+  brandName?: string;
+  selectedStoreIds: string[];
+  onSave: (storeIds: string[]) => void;
+}
+
+export function VendorStoresModal({
+  open,
+  onOpenChange,
+  brandId,
+  brandName,
+  selectedStoreIds,
+  onSave,
+}: VendorStoresModalProps) {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [localSelectedIds, setLocalSelectedIds] = useState<string[]>(selectedStoreIds);
+
+  const filteredStores = useMemo(() => {
+    let stores = MOCK_STORES;
+    
+    if (brandId) {
+      stores = stores.filter((store) => store.brandId === brandId);
+    }
+    
+    if (searchQuery) {
+      const query = searchQuery.toLowerCase();
+      stores = stores.filter(
+        (store) =>
+          store.name.toLowerCase().includes(query) ||
+          store.location.toLowerCase().includes(query) ||
+          store.id.includes(query)
+      );
+    }
+    
+    return stores;
+  }, [searchQuery, brandId]);
+
+  const handleSelectAll = (checked: boolean) => {
+    if (checked) {
+      setLocalSelectedIds(filteredStores.map((store) => store.id));
+    } else {
+      setLocalSelectedIds([]);
+    }
+  };
+
+  const handleSelectStore = (storeId: string, checked: boolean) => {
+    if (checked) {
+      setLocalSelectedIds([...localSelectedIds, storeId]);
+    } else {
+      setLocalSelectedIds(localSelectedIds.filter((id) => id !== storeId));
+    }
+  };
+
+  const handleSave = () => {
+    onSave(localSelectedIds);
+    onOpenChange(false);
+  };
+
+  const handleCancel = () => {
+    setLocalSelectedIds(selectedStoreIds);
+    onOpenChange(false);
+  };
+
+  const allSelected =
+    filteredStores.length > 0 &&
+    filteredStores.every((store) => localSelectedIds.includes(store.id));
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-4xl max-h-[80vh] flex flex-col">
+        <DialogHeader>
+          <DialogTitle data-testid="text-modal-title">Add Vendor Stores</DialogTitle>
+        </DialogHeader>
+
+        <div className="flex items-center gap-4 py-4">
+          <div className="relative flex-1">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+            <Input
+              placeholder="Search Vendor Stores"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="pl-9"
+              data-testid="input-search-stores"
+            />
+          </div>
+          <Button variant="outline" size="icon" data-testid="button-filter">
+            <Filter className="h-4 w-4" />
+          </Button>
+          {brandName && (
+            <Badge variant="secondary" data-testid="badge-brand">
+              {brandName}
+            </Badge>
+          )}
+        </div>
+
+        <div className="flex-1 overflow-auto border rounded-md">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="w-12">
+                  <Checkbox
+                    checked={allSelected}
+                    onCheckedChange={handleSelectAll}
+                    data-testid="checkbox-select-all"
+                  />
+                </TableHead>
+                <TableHead className="w-16">Image</TableHead>
+                <TableHead className="w-16">ID</TableHead>
+                <TableHead>Store Name</TableHead>
+                <TableHead>Geo Coordinates</TableHead>
+                <TableHead>Type</TableHead>
+                <TableHead>Category</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {filteredStores.map((store) => (
+                <TableRow key={store.id} data-testid={`row-store-${store.id}`}>
+                  <TableCell>
+                    <Checkbox
+                      checked={localSelectedIds.includes(store.id)}
+                      onCheckedChange={(checked) =>
+                        handleSelectStore(store.id, checked as boolean)
+                      }
+                      data-testid={`checkbox-store-${store.id}`}
+                    />
+                  </TableCell>
+                  <TableCell>
+                    <div className="w-10 h-10 bg-muted rounded flex items-center justify-center">
+                      <span className="text-xs text-muted-foreground">IMG</span>
+                    </div>
+                  </TableCell>
+                  <TableCell className="font-medium">{store.id}</TableCell>
+                  <TableCell>
+                    <div className="flex flex-col">
+                      <span className="font-medium">{store.name}</span>
+                      <span className="text-sm text-muted-foreground">
+                        {store.location}
+                      </span>
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex flex-col text-sm">
+                      <span>{store.longitude.toFixed(5)} /</span>
+                      <span>{store.latitude.toFixed(5)}</span>
+                    </div>
+                  </TableCell>
+                  <TableCell>{store.type}</TableCell>
+                  <TableCell>{store.category}</TableCell>
+                </TableRow>
+              ))}
+              {filteredStores.length === 0 && (
+                <TableRow>
+                  <TableCell colSpan={7} className="text-center py-8 text-muted-foreground">
+                    No stores found
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </div>
+
+        <div className="text-sm text-muted-foreground pt-2">
+          {localSelectedIds.length} store(s) selected
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={handleCancel} data-testid="button-cancel-modal">
+            Cancel
+          </Button>
+          <Button onClick={handleSave} data-testid="button-save-modal">
+            Save
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,359 @@
+import { useState, useMemo, useEffect } from "react";
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetFooter } from "@/components/ui/sheet";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Search, ChevronRight, ChevronDown, X, Building2 } from "lucide-react";
+import { VENUE_TAXONOMY, VenueTaxonomyCategory, VenueType, flattenVenueTaxonomy } from "@/lib/venue-taxonomy";
+
+interface VenueTypeDrawerProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  selectedVenues: string[];
+  onApply: (venues: string[]) => void;
+}
+
+export function VenueTypeDrawer({ open, onOpenChange, selectedVenues, onApply }: VenueTypeDrawerProps) {
+  const [search, setSearch] = useState("");
+  const [selected, setSelected] = useState<Set<string>>(new Set(selectedVenues));
+  const [expandedCategories, setExpandedCategories] = useState<Set<string>>(new Set());
+  const [expandedChildren, setExpandedChildren] = useState<Set<string>>(new Set());
+
+  useEffect(() => {
+    if (open) {
+      setSelected(new Set(selectedVenues));
+    }
+  }, [open, selectedVenues]);
+
+  const flatVenues = useMemo(() => flattenVenueTaxonomy(), []);
+
+  const filteredVenues = useMemo(() => {
+    if (!search) return null;
+    const lowerSearch = search.toLowerCase();
+    return flatVenues.filter(v => 
+      v.name.toLowerCase().includes(lowerSearch) ||
+      v.path.toLowerCase().includes(lowerSearch)
+    );
+  }, [search, flatVenues]);
+
+  const toggleCategory = (categoryId: string) => {
+    setExpandedCategories(prev => {
+      const next = new Set(prev);
+      if (next.has(categoryId)) {
+        next.delete(categoryId);
+      } else {
+        next.add(categoryId);
+      }
+      return next;
+    });
+  };
+
+  const toggleChild = (childId: string) => {
+    setExpandedChildren(prev => {
+      const next = new Set(prev);
+      if (next.has(childId)) {
+        next.delete(childId);
+      } else {
+        next.add(childId);
+      }
+      return next;
+    });
+  };
+
+  const toggleVenue = (venueId: string) => {
+    setSelected(prev => {
+      const next = new Set(prev);
+      if (next.has(venueId)) {
+        next.delete(venueId);
+      } else {
+        next.add(venueId);
+      }
+      return next;
+    });
+  };
+
+  const selectAllInCategory = (category: VenueTaxonomyCategory) => {
+    const allIds = getAllIdsInCategory(category);
+    setSelected(prev => {
+      const next = new Set(prev);
+      allIds.forEach(id => next.add(id));
+      return next;
+    });
+  };
+
+  const deselectAllInCategory = (category: VenueTaxonomyCategory) => {
+    const allIds = getAllIdsInCategory(category);
+    setSelected(prev => {
+      const next = new Set(prev);
+      allIds.forEach(id => next.delete(id));
+      return next;
+    });
+  };
+
+  const getAllIdsInCategory = (category: VenueTaxonomyCategory): string[] => {
+    const ids: string[] = [category.id];
+    category.children.forEach(child => {
+      ids.push(child.id);
+      if (child.children) {
+        child.children.forEach(grandchild => {
+          ids.push(grandchild.id);
+          if (grandchild.children) {
+            grandchild.children.forEach(ggc => ids.push(ggc.id));
+          }
+        });
+      }
+    });
+    return ids;
+  };
+
+  const getCategorySelectionCount = (category: VenueTaxonomyCategory): number => {
+    const allIds = getAllIdsInCategory(category);
+    return allIds.filter(id => selected.has(id)).length;
+  };
+
+  const handleApply = () => {
+    onApply(Array.from(selected));
+    onOpenChange(false);
+  };
+
+  const handleCancel = () => {
+    setSelected(new Set(selectedVenues));
+    onOpenChange(false);
+  };
+
+  const removeSelected = (id: string) => {
+    setSelected(prev => {
+      const next = new Set(prev);
+      next.delete(id);
+      return next;
+    });
+  };
+
+  const getVenueName = (id: string): string => {
+    const venue = flatVenues.find(v => v.id === id);
+    return venue?.name || id;
+  };
+
+  const getTierBadge = (tier: number) => {
+    const colors: Record<number, string> = {
+      1: "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200",
+      2: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200",
+      3: "bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200",
+      4: "bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200",
+    };
+    return (
+      <span className={`text-[10px] px-1.5 py-0.5 rounded ${colors[tier]}`}>
+        T{tier}
+      </span>
+    );
+  };
+
+  const renderVenueItem = (venue: VenueType, tier: number, parentPath: string = "") => {
+    const hasChildren = venue.children && venue.children.length > 0;
+    const isExpanded = expandedChildren.has(venue.id);
+    const fullPath = parentPath ? `${parentPath} > ${venue.name}` : venue.name;
+
+    return (
+      <div key={venue.id}>
+        <div 
+          className="flex items-center gap-2 py-2 px-2 hover:bg-muted/50 rounded-md"
+          style={{ paddingLeft: `${(tier - 1) * 16 + 8}px` }}
+        >
+          {hasChildren ? (
+            <button 
+              onClick={() => toggleChild(venue.id)}
+              className="p-0.5 hover:bg-muted rounded"
+              data-testid={`button-toggle-${venue.id}`}
+            >
+              {isExpanded ? (
+                <ChevronDown className="h-4 w-4 text-muted-foreground" />
+              ) : (
+                <ChevronRight className="h-4 w-4 text-muted-foreground" />
+              )}
+            </button>
+          ) : (
+            <div className="w-5" />
+          )}
+          <Checkbox
+            checked={selected.has(venue.id)}
+            onCheckedChange={() => toggleVenue(venue.id)}
+            data-testid={`checkbox-venue-${venue.id}`}
+          />
+          <span className="text-sm flex-1">{venue.name}</span>
+          {getTierBadge(tier)}
+        </div>
+        {hasChildren && isExpanded && venue.children?.map(child => 
+          renderVenueItem(child, tier + 1, fullPath)
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent className="w-full sm:max-w-lg flex flex-col">
+        <SheetHeader>
+          <SheetTitle className="flex items-center gap-2">
+            <Building2 className="h-5 w-5" />
+            Venue Type Selection
+          </SheetTitle>
+          <p className="text-sm text-muted-foreground">
+            Select venue types based on OpenOOH/IAB taxonomy
+          </p>
+        </SheetHeader>
+
+        <div className="flex-1 flex flex-col gap-4 overflow-hidden py-4">
+          {/* Search */}
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+            <Input
+              placeholder="Search venue types..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              className="pl-9"
+              data-testid="input-venue-search"
+            />
+          </div>
+
+          {/* Selected venues badges */}
+          {selected.size > 0 && (
+            <div className="flex flex-wrap gap-1.5 max-h-20 overflow-y-auto">
+              {Array.from(selected).slice(0, 10).map(id => (
+                <Badge key={id} variant="secondary" className="gap-1">
+                  {getVenueName(id)}
+                  <button onClick={() => removeSelected(id)}>
+                    <X className="h-3 w-3" />
+                  </button>
+                </Badge>
+              ))}
+              {selected.size > 10 && (
+                <Badge variant="outline">+{selected.size - 10} more</Badge>
+              )}
+            </div>
+          )}
+
+          {/* Taxonomy tree or search results */}
+          <ScrollArea className="flex-1 border rounded-md">
+            <div className="p-2">
+              {filteredVenues ? (
+                // Search results view
+                <div className="space-y-1">
+                  {filteredVenues.length === 0 ? (
+                    <p className="text-sm text-muted-foreground text-center py-4">
+                      No venues found for "{search}"
+                    </p>
+                  ) : (
+                    filteredVenues.map(venue => (
+                      <div 
+                        key={venue.id}
+                        className="flex items-center gap-2 py-2 px-2 hover:bg-muted/50 rounded-md"
+                      >
+                        <Checkbox
+                          checked={selected.has(venue.id)}
+                          onCheckedChange={() => toggleVenue(venue.id)}
+                          data-testid={`checkbox-search-${venue.id}`}
+                        />
+                        <div className="flex-1">
+                          <div className="text-sm">{venue.name}</div>
+                          <div className="text-xs text-muted-foreground">{venue.path}</div>
+                        </div>
+                        {getTierBadge(venue.tier)}
+                      </div>
+                    ))
+                  )}
+                </div>
+              ) : (
+                // Hierarchical tree view
+                <div className="space-y-1">
+                  {VENUE_TAXONOMY.map(category => {
+                    const isExpanded = expandedCategories.has(category.id);
+                    const selectionCount = getCategorySelectionCount(category);
+                    const totalCount = getAllIdsInCategory(category).length;
+
+                    return (
+                      <div key={category.id} className="border-b last:border-0 pb-2 mb-2">
+                        <div className="flex items-center gap-2 py-2 px-2 hover:bg-muted/50 rounded-md">
+                          <button 
+                            onClick={() => toggleCategory(category.id)}
+                            className="p-0.5 hover:bg-muted rounded"
+                            data-testid={`button-toggle-category-${category.id}`}
+                          >
+                            {isExpanded ? (
+                              <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                            ) : (
+                              <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                            )}
+                          </button>
+                          <Checkbox
+                            checked={selected.has(category.id)}
+                            onCheckedChange={() => toggleVenue(category.id)}
+                            data-testid={`checkbox-category-${category.id}`}
+                          />
+                          <div className="flex-1">
+                            <div className="text-sm font-medium">{category.name}</div>
+                            <div className="text-xs text-muted-foreground">{category.description}</div>
+                          </div>
+                          {getTierBadge(1)}
+                          {selectionCount > 0 && (
+                            <Badge variant="secondary" className="text-xs">
+                              {selectionCount}/{totalCount}
+                            </Badge>
+                          )}
+                        </div>
+
+                        {/* Quick select buttons */}
+                        {isExpanded && (
+                          <div className="flex gap-2 px-8 py-1">
+                            <Button 
+                              variant="ghost" 
+                              size="sm" 
+                              className="h-6 text-xs"
+                              onClick={() => selectAllInCategory(category)}
+                              data-testid={`button-select-all-${category.id}`}
+                            >
+                              Select All
+                            </Button>
+                            <Button 
+                              variant="ghost" 
+                              size="sm" 
+                              className="h-6 text-xs"
+                              onClick={() => deselectAllInCategory(category)}
+                              data-testid={`button-deselect-all-${category.id}`}
+                            >
+                              Deselect All
+                            </Button>
+                          </div>
+                        )}
+
+                        {/* Children */}
+                        {isExpanded && category.children.map(child => 
+                          renderVenueItem(child, 2, category.name)
+                        )}
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+          </ScrollArea>
+        </div>
+
+        <SheetFooter className="flex-row gap-2 sm:justify-between border-t pt-4">
+          <div className="text-sm text-muted-foreground">
+            {selected.size} venue type{selected.size !== 1 ? 's' : ''} selected
+          </div>
+          <div className="flex gap-2">
+            <Button variant="outline" onClick={handleCancel} data-testid="button-venue-cancel">
+              Cancel
+            </Button>
+            <Button onClick={handleApply} data-testid="button-venue-apply">
+              Apply Selection
+            </Button>
+          </div>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}