adserver-dashboard 1.0.0

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

@@ -0,0 +1,198 @@
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { useMutation } from "@tanstack/react-query";
+import { Building2 } from "lucide-react";
+import { insertAgencySchema, COUNTRIES } from "@shared/schema";
+import { Button } from "@/components/ui/button";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+} from "@/components/ui/sheet";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useToast } from "@/hooks/use-toast";
+import { apiRequest, queryClient } from "@/lib/queryClient";
+
+const createAgencySchema = insertAgencySchema.extend({
+  name: z.string().min(1, "Agency name is required"),
+  contactEmail: z.string().email("Please enter a valid email").min(1, "Contact email is required"),
+  country: z.string().min(1, "Country is required"),
+});
+
+type CreateAgencyFormData = z.infer<typeof createAgencySchema>;
+
+interface CreateAgencyDrawerProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onAgencyCreated?: (agencyId: string) => void;
+}
+
+export function CreateAgencyDrawer({ 
+  open, 
+  onOpenChange,
+  onAgencyCreated,
+}: CreateAgencyDrawerProps) {
+  const { toast } = useToast();
+
+  const form = useForm<CreateAgencyFormData>({
+    resolver: zodResolver(createAgencySchema),
+    defaultValues: {
+      name: "",
+      contactEmail: "",
+      country: "",
+      status: "active",
+    },
+  });
+
+  const createAgencyMutation = useMutation({
+    mutationFn: async (data: CreateAgencyFormData) => {
+      const response = await apiRequest("POST", "/api/agencies", data);
+      return response.json();
+    },
+    onSuccess: (data) => {
+      queryClient.invalidateQueries({ queryKey: ["/api/agencies"] });
+      toast({
+        title: "Agency created",
+        description: `${data.name} has been created successfully.`,
+      });
+      form.reset();
+      onOpenChange(false);
+      onAgencyCreated?.(data.id);
+    },
+    onError: (error: Error) => {
+      toast({
+        title: "Error",
+        description: error.message || "Failed to create agency",
+        variant: "destructive",
+      });
+    },
+  });
+
+  const onSubmit = (data: CreateAgencyFormData) => {
+    createAgencyMutation.mutate(data);
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent className="w-[400px] sm:w-[450px] flex flex-col">
+        <SheetHeader className="border-b pb-4">
+          <SheetTitle className="flex items-center gap-2">
+            <Building2 className="h-5 w-5 text-primary" />
+            Create New Agency
+          </SheetTitle>
+          <SheetDescription>
+            Create a minimal agency record. Sales team will be notified to complete onboarding.
+          </SheetDescription>
+        </SheetHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col flex-1">
+            <div className="flex-1 space-y-6 py-6 overflow-y-auto">
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Agency Name *</FormLabel>
+                    <FormControl>
+                      <Input 
+                        placeholder="Enter agency name" 
+                        {...field} 
+                        data-testid="input-agency-name"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="contactEmail"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Contact Email *</FormLabel>
+                    <FormControl>
+                      <Input 
+                        type="email"
+                        placeholder="contact@agency.com" 
+                        {...field} 
+                        data-testid="input-agency-email"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="country"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Country *</FormLabel>
+                    <Select onValueChange={field.onChange} value={field.value}>
+                      <FormControl>
+                        <SelectTrigger data-testid="select-agency-country">
+                          <SelectValue placeholder="Select country" />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        {COUNTRIES.map((country) => (
+                          <SelectItem 
+                            key={country.code} 
+                            value={country.code}
+                            data-testid={`option-country-${country.code.toLowerCase()}`}
+                          >
+                            {country.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <div className="border-t pt-4 flex justify-end gap-3">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => onOpenChange(false)}
+                data-testid="button-cancel-agency"
+              >
+                Cancel
+              </Button>
+              <Button
+                type="submit"
+                disabled={createAgencyMutation.isPending}
+                data-testid="button-create-agency"
+              >
+                {createAgencyMutation.isPending ? "Creating..." : "Create Agency"}
+              </Button>
+            </div>
+          </form>
+        </Form>
+      </SheetContent>
+    </Sheet>
+  );
+}

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

@@ -0,0 +1,275 @@
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { useMutation } from "@tanstack/react-query";
+import { FileText, Upload } from "lucide-react";
+import { insertBrandSchema } from "@shared/schema";
+import { Button } from "@/components/ui/button";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useToast } from "@/hooks/use-toast";
+import { apiRequest, queryClient } from "@/lib/queryClient";
+
+const IAB_CATEGORIES = [
+  "Arts & Entertainment",
+  "Automotive",
+  "Business",
+  "Careers",
+  "Education",
+  "Family & Parenting",
+  "Food & Drink",
+  "Health & Fitness",
+  "Hobbies & Interests",
+  "Home & Garden",
+  "Law, Gov't & Politics",
+  "News",
+  "Personal Finance",
+  "Pets",
+  "Real Estate",
+  "Religion & Spirituality",
+  "Science",
+  "Shopping",
+  "Society",
+  "Sports",
+  "Style & Fashion",
+  "Technology & Computing",
+  "Television",
+  "Travel",
+];
+
+const createBrandSchema = insertBrandSchema.extend({
+  name: z.string().min(1, "Brand name is required"),
+  iabCategory: z.string().min(1, "IAB Category is required"),
+});
+
+type CreateBrandFormData = z.infer<typeof createBrandSchema>;
+
+interface CreateBrandDrawerProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onBrandCreated?: (brandId: string) => void;
+}
+
+export function CreateBrandDrawer({ 
+  open, 
+  onOpenChange,
+  onBrandCreated,
+}: CreateBrandDrawerProps) {
+  const { toast } = useToast();
+  const [logoFileName, setLogoFileName] = useState<string>("");
+
+  const form = useForm<CreateBrandFormData>({
+    resolver: zodResolver(createBrandSchema),
+    defaultValues: {
+      name: "",
+      iabCategory: "",
+      website: "",
+      logoUrl: "",
+    },
+  });
+
+  const createBrandMutation = useMutation({
+    mutationFn: async (data: CreateBrandFormData) => {
+      const response = await apiRequest("POST", "/api/brands", data);
+      return response.json();
+    },
+    onSuccess: (data) => {
+      queryClient.invalidateQueries({ queryKey: ["/api/brands"] });
+      toast({
+        title: "Brand created",
+        description: `${data.name} has been created successfully.`,
+      });
+      form.reset();
+      setLogoFileName("");
+      onOpenChange(false);
+      onBrandCreated?.(data.id);
+    },
+    onError: (error: Error) => {
+      toast({
+        title: "Error",
+        description: error.message || "Failed to create brand",
+        variant: "destructive",
+      });
+    },
+  });
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      if (file.size > 5 * 1024 * 1024) {
+        toast({
+          title: "File too large",
+          description: "Logo file must be less than 5MB",
+          variant: "destructive",
+        });
+        return;
+      }
+      setLogoFileName(file.name);
+    }
+  };
+
+  const onSubmit = (data: CreateBrandFormData) => {
+    createBrandMutation.mutate(data);
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent className="w-[400px] sm:w-[450px] flex flex-col">
+        <SheetHeader className="border-b pb-4">
+          <SheetTitle className="flex items-center gap-2">
+            <FileText className="h-5 w-5 text-primary" />
+            Create New Brand
+          </SheetTitle>
+        </SheetHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col flex-1">
+            <div className="flex-1 space-y-6 py-6 overflow-y-auto">
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Brand Name *</FormLabel>
+                    <FormControl>
+                      <Input 
+                        placeholder="Enter brand name" 
+                        {...field} 
+                        data-testid="input-brand-name"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="iabCategory"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>IAB Category *</FormLabel>
+                    <Select onValueChange={field.onChange} value={field.value}>
+                      <FormControl>
+                        <SelectTrigger data-testid="select-iab-category">
+                          <SelectValue placeholder="Select category" />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        {IAB_CATEGORIES.map((category) => (
+                          <SelectItem 
+                            key={category} 
+                            value={category}
+                            data-testid={`option-category-${category.toLowerCase().replace(/[^a-z0-9]/g, '-')}`}
+                          >
+                            {category}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="website"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Website</FormLabel>
+                    <FormControl>
+                      <Input 
+                        placeholder="https://example.com (optional)" 
+                        value={field.value || ""}
+                        onChange={field.onChange}
+                        onBlur={field.onBlur}
+                        name={field.name}
+                        ref={field.ref}
+                        data-testid="input-brand-website"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <div className="space-y-2">
+                <FormLabel>Brand Logo</FormLabel>
+                <div className="border-2 border-dashed rounded-md p-6 text-center">
+                  <div className="flex flex-col items-center gap-2">
+                    <Upload className="h-8 w-8 text-muted-foreground" />
+                    <p className="text-sm text-muted-foreground">
+                      Upload logo (optional)
+                    </p>
+                    <p className="text-xs text-muted-foreground">
+                      PNG, JPG up to 5MB
+                    </p>
+                    <div className="flex items-center gap-2 mt-2">
+                      <label className="cursor-pointer">
+                        <input
+                          type="file"
+                          accept="image/png,image/jpeg"
+                          className="hidden"
+                          onChange={handleFileChange}
+                          data-testid="input-brand-logo"
+                        />
+                        <Button type="button" variant="outline" size="sm" asChild>
+                          <span>Choose file</span>
+                        </Button>
+                      </label>
+                      <span className="text-sm text-muted-foreground">
+                        {logoFileName || "No file chosen"}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div className="border-t pt-4 flex gap-3">
+              <Button
+                type="button"
+                variant="outline"
+                className="flex-1"
+                onClick={() => onOpenChange(false)}
+                data-testid="button-cancel-brand"
+              >
+                Cancel
+              </Button>
+              <Button
+                type="submit"
+                className="flex-1"
+                disabled={createBrandMutation.isPending}
+                data-testid="button-save-brand"
+              >
+                {createBrandMutation.isPending ? "Creating..." : "Create Brand"}
+              </Button>
+            </div>
+          </form>
+        </Form>
+      </SheetContent>
+    </Sheet>
+  );
+}