adserver-dashboard 1.0.0

package/client/src/pages/settings.tsx

@@ -0,0 +1,760 @@
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@moving-walls/design-system";
+import { Button } from "@moving-walls/design-system";
+import { Input } from "@moving-walls/design-system";
+import { Label } from "@moving-walls/design-system";
+import { Switch } from "@moving-walls/design-system";
+import { Separator } from "@moving-walls/design-system";
+import { Slider } from "@moving-walls/design-system";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@moving-walls/design-system";
+import { Textarea } from "@moving-walls/design-system";
+import { Settings as SettingsIcon, Bell, Shield, Globe, Palette, Save, Workflow, Languages, Package, ListFilter, Sparkles, Target, TrendingUp, Sliders } from "lucide-react";
+import { usePageTitle } from "@/hooks/use-page-title";
+import { useToast } from "@/hooks/use-toast";
+import { useState } from "react";
+
+export default function SettingsPage() {
+  usePageTitle("Settings");
+  const { toast } = useToast();
+
+  const [weights, setWeights] = useState({
+    measureFit: 15,
+    geoFit: 15,
+    availability: 15,
+    budgetFit: 10,
+    audienceFit: 15,
+    brandFit: 10,
+    qualityFit: 10,
+    timeFit: 10,
+  });
+
+  const handleSave = () => {
+    toast({
+      title: "Settings saved",
+      description: "Your settings have been updated successfully.",
+    });
+  };
+
+  const updateWeight = (key: keyof typeof weights, value: number[]) => {
+    setWeights(prev => ({ ...prev, [key]: value[0] }));
+  };
+
+  return (
+    <div className="h-[calc(100vh-72px)] w-full flex flex-col bg-mw-neutral-50 dark:bg-mw-neutral-900 overflow-hidden">
+      <div className="flex-shrink-0 px-6 py-4 border-b border-mw-neutral-200 bg-white dark:bg-mw-neutral-800">
+        <h1 className="text-xl font-semibold text-mw-neutral-900 dark:text-white">Settings</h1>
+        <p className="text-sm text-mw-neutral-500 dark:text-mw-neutral-400">Configure your ad server preferences</p>
+      </div>
+      <div className="flex-1 overflow-auto px-6 py-6">
+        <div className="grid gap-6 max-w-4xl">
+
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <SettingsIcon className="h-5 w-5" />
+                General Settings
+              </CardTitle>
+              <CardDescription>Basic configuration for your ad server</CardDescription>
+            </CardHeader>
+            <CardContent className="pt-0 space-y-6">
+              <div className="grid gap-4 sm:grid-cols-2">
+                <div className="space-y-2">
+                  <Label htmlFor="company-name">Company Name</Label>
+                  <Input id="company-name" defaultValue="Influence Media" />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="timezone">Timezone</Label>
+                  <Select 
+                    defaultValue="utc"
+                    options={[
+                      { value: "utc-8", label: "UTC-8" },
+                      { value: "utc+0", label: "UTC+0" },
+                      { value: "utc+5:30", label: "UTC+5:30" },
+                      { value: "utc+8", label: "UTC+8" },
+                      { value: "utc+9", label: "UTC+9" },
+                    ]}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select timezone" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="utc-8">UTC-8</SelectItem>
+                      <SelectItem value="utc+0">UTC+0</SelectItem>
+                      <SelectItem value="utc+5:30">UTC+5:30</SelectItem>
+                      <SelectItem value="utc+8">UTC+8</SelectItem>
+                      <SelectItem value="utc+9">UTC+9</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+              <div className="grid gap-4 sm:grid-cols-2">
+                <div className="space-y-2">
+                  <Label htmlFor="currency">Default Currency</Label>
+                  <Select 
+                    defaultValue="usd"
+                    options={[
+                      { value: "usd", label: "USD" },
+                      { value: "myr", label: "MYR" },
+                      { value: "sgd", label: "SGD" },
+                      { value: "thb", label: "THB" },
+                      { value: "jpy", label: "JPY" },
+                    ]}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select currency" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="usd">USD</SelectItem>
+                      <SelectItem value="myr">MYR</SelectItem>
+                      <SelectItem value="sgd">SGD</SelectItem>
+                      <SelectItem value="thb">THB</SelectItem>
+                      <SelectItem value="jpy">JPY</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="date-format">Date Format</Label>
+                  <Select 
+                    defaultValue="mdy"
+                    options={[
+                      { value: "dmy", label: "DD/MM/YYYY" },
+                      { value: "mdy", label: "MM/DD/YYYY" },
+                      { value: "ymd", label: "YYYY-MM-DD" },
+                    ]}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select format" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="dmy">DD/MM/YYYY</SelectItem>
+                      <SelectItem value="mdy">MM/DD/YYYY</SelectItem>
+                      <SelectItem value="ymd">YYYY-MM-DD</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Bell className="h-5 w-5" />
+                Notifications
+              </CardTitle>
+              <CardDescription>Configure alert and notification preferences</CardDescription>
+            </CardHeader>
+            <CardContent className="pt-0 space-y-4">
+              <div className="flex items-center justify-between">
+                <div className="space-y-0.5">
+                  <Label>Deal Alerts</Label>
+                  <p className="text-sm text-muted-foreground">
+                    Get notified when deals reach budget thresholds
+                  </p>
+                </div>
+                <Switch defaultChecked />
+              </div>
+              <Separator />
+              <div className="flex items-center justify-between">
+                <div className="space-y-0.5">
+                  <Label>Screen Status Updates</Label>
+                  <p className="text-sm text-muted-foreground">
+                    Alert when screens go offline or require maintenance
+                  </p>
+                </div>
+                <Switch defaultChecked />
+              </div>
+              <Separator />
+              <div className="flex items-center justify-between">
+                <div className="space-y-0.5">
+                  <Label>Daily Performance Reports</Label>
+                  <p className="text-sm text-muted-foreground">
+                    Receive daily email summaries of deal performance
+                  </p>
+                </div>
+                <Switch />
+              </div>
+              <Separator />
+              <div className="flex items-center justify-between">
+                <div className="space-y-0.5">
+                  <Label>Integration Status</Label>
+                  <p className="text-sm text-muted-foreground">
+                    Notify when SSP/DSP integrations have connectivity issues
+                  </p>
+                </div>
+                <Switch defaultChecked />
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Shield className="h-5 w-5" />
+                Traffic Control
+              </CardTitle>
+              <CardDescription>Default settings for traffic allocation and delivery</CardDescription>
+            </CardHeader>
+            <CardContent className="pt-0 space-y-6">
+              <div className="grid gap-4 sm:grid-cols-2">
+                <div className="space-y-2">
+                  <Label htmlFor="default-allocation">Default Traffic Allocation</Label>
+                  <Select 
+                    defaultValue="100"
+                    options={[
+                      { value: "25", label: "25%" },
+                      { value: "50", label: "50%" },
+                      { value: "75", label: "75%" },
+                      { value: "100", label: "100%" },
+                    ]}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select percentage" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="25">25%</SelectItem>
+                      <SelectItem value="50">50%</SelectItem>
+                      <SelectItem value="75">75%</SelectItem>
+                      <SelectItem value="100">100%</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="delivery-pacing">Delivery Pacing</Label>
+                  <Select 
+                    defaultValue="even"
+                    options={[
+                      { value: "even", label: "Even" },
+                      { value: "asap", label: "ASAP" },
+                      { value: "frontloaded", label: "Frontloaded" },
+                    ]}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select pacing" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="even">Even (Spread evenly)</SelectItem>
+                      <SelectItem value="asap">ASAP (As fast as possible)</SelectItem>
+                      <SelectItem value="frontloaded">Frontloaded (Heavy at start)</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+              <div className="flex items-center justify-between">
+                <div className="space-y-0.5">
+                  <Label>Enable Programmatic Fallback</Label>
+                  <p className="text-sm text-muted-foreground">
+                    Fill unfilled inventory with programmatic demand
+                  </p>
+                </div>
+                <Switch defaultChecked />
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Target className="h-5 w-5" />
+                Forecasting Defaults
+              </CardTitle>
+              <CardDescription>Configure default settings for line item forecasting</CardDescription>
+            </CardHeader>
+            <CardContent className="pt-0 space-y-6">
+              <div className="grid gap-4 sm:grid-cols-2">
+                <div className="space-y-2">
+                  <Label htmlFor="forecast-goal-type">Default Goal Type</Label>
+                  <Select 
+                    defaultValue="impressions"
+                    options={[
+                      { value: "impressions", label: "Impressions" },
+                      { value: "reach", label: "Reach" },
+                      { value: "sov", label: "Share of Voice" },
+                      { value: "ad-plays", label: "Ad Plays" },
+                      { value: "carbon", label: "Carbon Emission" },
+                    ]}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select goal type" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="impressions">Impressions</SelectItem>
+                      <SelectItem value="reach">Reach</SelectItem>
+                      <SelectItem value="sov">Share of Voice</SelectItem>
+                      <SelectItem value="ad-plays">Ad Plays</SelectItem>
+                      <SelectItem value="carbon">Carbon Emission</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="forecast-confidence">Confidence Level</Label>
+                  <Select 
+                    defaultValue="medium"
+                    options={[
+                      { value: "low", label: "Low 70%" },
+                      { value: "medium", label: "Medium 85%" },
+                      { value: "high", label: "High 95%" },
+                    ]}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select confidence" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="low">Low (70%)</SelectItem>
+                      <SelectItem value="medium">Medium (85%)</SelectItem>
+                      <SelectItem value="high">High (95%)</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+              <div className="grid gap-4 sm:grid-cols-2">
+                <div className="space-y-2">
+                  <Label htmlFor="default-budget-buffer">Budget Buffer (%)</Label>
+                  <Input id="default-budget-buffer" type="number" defaultValue="10" />
+                  <p className="text-xs text-muted-foreground">
+                    Extra budget allowance for forecast variance
+                  </p>
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="forecast-refresh-interval">Forecast Refresh Interval</Label>
+                  <Select 
+                    defaultValue="daily"
+                    options={[
+                      { value: "realtime", label: "Real-time" },
+                      { value: "hourly", label: "Hourly" },
+                      { value: "daily", label: "Daily" },
+                      { value: "weekly", label: "Weekly" },
+                    ]}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select interval" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="realtime">Real-time</SelectItem>
+                      <SelectItem value="hourly">Hourly</SelectItem>
+                      <SelectItem value="daily">Daily</SelectItem>
+                      <SelectItem value="weekly">Weekly</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+              <div className="flex items-center justify-between">
+                <div className="space-y-0.5">
+                  <Label>Include Historical Performance</Label>
+                  <p className="text-sm text-muted-foreground">
+                    Use historical data to improve forecast accuracy
+                  </p>
+                </div>
+                <Switch defaultChecked />
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <TrendingUp className="h-5 w-5" />
+                Optimization Preferences
+              </CardTitle>
+              <CardDescription>Configure AI-powered optimization behavior</CardDescription>
+            </CardHeader>
+            <CardContent className="pt-0 space-y-6">
+              <div className="grid gap-4 sm:grid-cols-2">
+                <div className="space-y-2">
+                  <Label htmlFor="optimization-mode">Optimization Mode</Label>
+                  <Select 
+                    defaultValue="balanced"
+                    options={[
+                      { value: "aggressive", label: "Aggressive" },
+                      { value: "balanced", label: "Balanced" },
+                      { value: "conservative", label: "Conservative" },
+                    ]}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select mode" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="aggressive">Aggressive (Maximize performance)</SelectItem>
+                      <SelectItem value="balanced">Balanced (Performance + stability)</SelectItem>
+                      <SelectItem value="conservative">Conservative (Minimal changes)</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="reoptimize-frequency">Re-optimization Frequency</Label>
+                  <Select 
+                    defaultValue="weekly"
+                    options={[
+                      { value: "never", label: "Never" },
+                      { value: "daily", label: "Daily" },
+                      { value: "weekly", label: "Weekly" },
+                      { value: "monthly", label: "Monthly" },
+                    ]}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select frequency" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="never">Never (Manual only)</SelectItem>
+                      <SelectItem value="daily">Daily</SelectItem>
+                      <SelectItem value="weekly">Weekly</SelectItem>
+                      <SelectItem value="monthly">Monthly</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+              <div className="flex items-center justify-between">
+                <div className="space-y-0.5">
+                  <Label>Auto-Optimize New Line Items</Label>
+                  <p className="text-sm text-muted-foreground">
+                    Automatically apply AI recommendations to new line items
+                  </p>
+                </div>
+                <Switch defaultChecked />
+              </div>
+              <Separator />
+              <div className="flex items-center justify-between">
+                <div className="space-y-0.5">
+                  <Label>Enable A/B Testing</Label>
+                  <p className="text-sm text-muted-foreground">
+                    Allow AI to run A/B tests on inventory selection
+                  </p>
+                </div>
+                <Switch />
+              </div>
+              <Separator />
+              <div className="flex items-center justify-between">
+                <div className="space-y-0.5">
+                  <Label>Show Optimization Insights</Label>
+                  <p className="text-sm text-muted-foreground">
+                    Display AI reasoning and recommendations in the UI
+                  </p>
+                </div>
+                <Switch defaultChecked />
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Sliders className="h-5 w-5" />
+                Recommendation Weights
+              </CardTitle>
+              <CardDescription>Adjust the importance of each factor in AI recommendations</CardDescription>
+            </CardHeader>
+            <CardContent className="pt-0 space-y-4">
+              <p className="text-sm text-muted-foreground">
+                Configure how the 8-factor scoring system weights each component. Values should sum to 100%.
+              </p>
+              <div className="grid gap-6 sm:grid-cols-2">
+                <div className="space-y-3">
+                  <div className="flex items-center justify-between">
+                    <Label htmlFor="weight-measure-fit">Measure Fit</Label>
+                    <span className="text-sm text-muted-foreground">{weights.measureFit}%</span>
+                  </div>
+                  <Slider value={[weights.measureFit]} min={0} max={30} step={1} onValueChange={(v) => updateWeight('measureFit', v)} />
+                </div>
+                <div className="space-y-3">
+                  <div className="flex items-center justify-between">
+                    <Label htmlFor="weight-geo-fit">Geo Fit</Label>
+                    <span className="text-sm text-muted-foreground">{weights.geoFit}%</span>
+                  </div>
+                  <Slider value={[weights.geoFit]} min={0} max={30} step={1} onValueChange={(v) => updateWeight('geoFit', v)} />
+                </div>
+                <div className="space-y-3">
+                  <div className="flex items-center justify-between">
+                    <Label htmlFor="weight-availability">Availability</Label>
+                    <span className="text-sm text-muted-foreground">{weights.availability}%</span>
+                  </div>
+                  <Slider value={[weights.availability]} min={0} max={30} step={1} onValueChange={(v) => updateWeight('availability', v)} />
+                </div>
+                <div className="space-y-3">
+                  <div className="flex items-center justify-between">
+                    <Label htmlFor="weight-budget-fit">Budget Fit</Label>
+                    <span className="text-sm text-muted-foreground">{weights.budgetFit}%</span>
+                  </div>
+                  <Slider value={[weights.budgetFit]} min={0} max={30} step={1} onValueChange={(v) => updateWeight('budgetFit', v)} />
+                </div>
+                <div className="space-y-3">
+                  <div className="flex items-center justify-between">
+                    <Label htmlFor="weight-audience-fit">Audience Fit</Label>
+                    <span className="text-sm text-muted-foreground">{weights.audienceFit}%</span>
+                  </div>
+                  <Slider value={[weights.audienceFit]} min={0} max={30} step={1} onValueChange={(v) => updateWeight('audienceFit', v)} />
+                </div>
+                <div className="space-y-3">
+                  <div className="flex items-center justify-between">
+                    <Label htmlFor="weight-brand-fit">Brand Fit</Label>
+                    <span className="text-sm text-muted-foreground">{weights.brandFit}%</span>
+                  </div>
+                  <Slider value={[weights.brandFit]} min={0} max={30} step={1} onValueChange={(v) => updateWeight('brandFit', v)} />
+                </div>
+                <div className="space-y-3">
+                  <div className="flex items-center justify-between">
+                    <Label htmlFor="weight-quality-fit">Quality Fit</Label>
+                    <span className="text-sm text-muted-foreground">{weights.qualityFit}%</span>
+                  </div>
+                  <Slider value={[weights.qualityFit]} min={0} max={30} step={1} onValueChange={(v) => updateWeight('qualityFit', v)} />
+                </div>
+                <div className="space-y-3">
+                  <div className="flex items-center justify-between">
+                    <Label htmlFor="weight-time-fit">Time Fit</Label>
+                    <span className="text-sm text-muted-foreground">{weights.timeFit}%</span>
+                  </div>
+                  <Slider value={[weights.timeFit]} min={0} max={30} step={1} onValueChange={(v) => updateWeight('timeFit', v)} />
+                </div>
+              </div>
+              <Button
+                variant="outline"
+                size="sm"
+                className="mt-2"
+                onClick={() => setWeights({
+                  measureFit: 15, geoFit: 15, availability: 15, budgetFit: 10,
+                  audienceFit: 15, brandFit: 10, qualityFit: 10, timeFit: 10,
+                })}
+              >
+                Reset to Defaults
+              </Button>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Workflow className="h-5 w-5" />
+                Workflow Settings
+              </CardTitle>
+              <CardDescription>Configure approval workflows and automation</CardDescription>
+            </CardHeader>
+            <CardContent className="pt-0 space-y-4">
+              <div className="flex items-center justify-between">
+                <div className="space-y-0.5">
+                  <Label>Require Creative Approval</Label>
+                  <p className="text-sm text-muted-foreground">
+                    All creatives must be approved before going live
+                  </p>
+                </div>
+                <Switch defaultChecked />
+              </div>
+              <Separator />
+              <div className="flex items-center justify-between">
+                <div className="space-y-0.5">
+                  <Label>Two-Tier Creative Approval</Label>
+                  <p className="text-sm text-muted-foreground">
+                    Enable Tier 2 (Media Owner) approval after Tier 1 (Content Hub)
+                  </p>
+                </div>
+                <Switch defaultChecked />
+              </div>
+              <Separator />
+              <div className="flex items-center justify-between">
+                <div className="space-y-0.5">
+                  <Label>Auto-Accept Deals</Label>
+                  <p className="text-sm text-muted-foreground">
+                    Automatically accept deals from trusted partners
+                  </p>
+                </div>
+                <Switch />
+              </div>
+              <Separator />
+              <div className="flex items-center justify-between">
+                <div className="space-y-0.5">
+                  <Label>Deal Locking</Label>
+                  <p className="text-sm text-muted-foreground">
+                    Lock deals after acceptance to prevent modifications
+                  </p>
+                </div>
+                <Switch defaultChecked />
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Languages className="h-5 w-5" />
+                Terminology
+              </CardTitle>
+              <CardDescription>Customize labels and terminology used throughout the platform</CardDescription>
+            </CardHeader>
+            <CardContent className="pt-0 space-y-4">
+              <div className="grid gap-4 sm:grid-cols-2">
+                <div className="space-y-2">
+                  <Label htmlFor="term-deal">Deal</Label>
+                  <Input id="term-deal" defaultValue="Deal" />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="term-line-item">Line Item</Label>
+                  <Input id="term-line-item" defaultValue="Line Item" />
+                </div>
+              </div>
+              <div className="grid gap-4 sm:grid-cols-2">
+                <div className="space-y-2">
+                  <Label htmlFor="term-creative">Creative</Label>
+                  <Input id="term-creative" defaultValue="Creative" />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="term-inventory">Inventory</Label>
+                  <Input id="term-inventory" defaultValue="Inventory" />
+                </div>
+              </div>
+              <div className="grid gap-4 sm:grid-cols-2">
+                <div className="space-y-2">
+                  <Label htmlFor="term-advertiser">Advertiser</Label>
+                  <Input id="term-advertiser" defaultValue="Advertiser" />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="term-campaign">Campaign</Label>
+                  <Input id="term-campaign" defaultValue="Campaign" />
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Palette className="h-5 w-5" />
+                Themes & Branding
+              </CardTitle>
+              <CardDescription>Customize the look and feel of your platform</CardDescription>
+            </CardHeader>
+            <CardContent className="pt-0 space-y-4">
+              <div className="grid gap-4 sm:grid-cols-2">
+                <div className="space-y-2">
+                  <Label htmlFor="theme-mode">Theme Mode</Label>
+                  <Select 
+                    defaultValue="light"
+                    options={[
+                      { value: "light", label: "Light" },
+                      { value: "dark", label: "Dark" },
+                      { value: "system", label: "System" },
+                    ]}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select theme" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="light">Light</SelectItem>
+                      <SelectItem value="dark">Dark</SelectItem>
+                      <SelectItem value="system">System</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="primary-color">Primary Color</Label>
+                  <div className="flex gap-2">
+                    <Input id="primary-color" type="color" defaultValue="#3B82F6" className="w-14 h-9 p-1" />
+                    <Input defaultValue="#3B82F6" className="flex-1 font-mono" readOnly />
+                  </div>
+                </div>
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="logo-url">Logo URL</Label>
+                <Input id="logo-url" placeholder="https://example.com/logo.png" />
+              </div>
+              <div className="flex items-center justify-between">
+                <div className="space-y-0.5">
+                  <Label>Compact Mode</Label>
+                  <p className="text-sm text-muted-foreground">
+                    Use a more compact UI with smaller spacing
+                  </p>
+                </div>
+                <Switch />
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <ListFilter className="h-5 w-5" />
+                Inventory Whitelisting
+              </CardTitle>
+              <CardDescription>Control which inventory is available for deals</CardDescription>
+            </CardHeader>
+            <CardContent className="pt-0 space-y-4">
+              <div className="flex items-center justify-between">
+                <div className="space-y-0.5">
+                  <Label>Enable Inventory Whitelisting</Label>
+                  <p className="text-sm text-muted-foreground">
+                    Only show whitelisted inventory to advertisers and agencies
+                  </p>
+                </div>
+                <Switch />
+              </div>
+              <Separator />
+              <div className="space-y-2">
+                <Label htmlFor="whitelist-ids">Whitelisted Inventory IDs</Label>
+                <Textarea
+                  id="whitelist-ids"
+                  placeholder="Enter inventory IDs separated by commas or new lines"
+                  className="min-h-[100px] font-mono text-sm"
+                />
+                <p className="text-xs text-muted-foreground">
+                  Leave empty to allow all inventory. Enter specific IDs to restrict availability.
+                </p>
+              </div>
+              <div className="flex items-center justify-between">
+                <div className="space-y-0.5">
+                  <Label>Exclude Adult Content Venues</Label>
+                  <p className="text-sm text-muted-foreground">
+                    Automatically exclude venues with adult content classification
+                  </p>
+                </div>
+                <Switch defaultChecked />
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Globe className="h-5 w-5" />
+                API Settings
+              </CardTitle>
+              <CardDescription>Configure API access and rate limits</CardDescription>
+            </CardHeader>
+            <CardContent className="pt-0 space-y-4">
+              <div className="space-y-2">
+                <Label>API Endpoint</Label>
+                <div className="flex items-center gap-2">
+                  <Input
+                    value="https://api.influence.io/v1"
+                    readOnly
+                    className="font-mono text-sm"
+                  />
+                  <Button variant="outline" size="sm">Copy</Button>
+                </div>
+              </div>
+              <div className="grid gap-4 sm:grid-cols-2">
+                <div className="space-y-2">
+                  <Label htmlFor="rate-limit">Rate Limit (requests/min)</Label>
+                  <Input id="rate-limit" type="number" defaultValue="1000" />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="timeout">Request Timeout (ms)</Label>
+                  <Input id="timeout" type="number" defaultValue="5000" />
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <div className="flex justify-end pb-6">
+            <Button onClick={handleSave}>
+              <Save className="h-4 w-4 mr-2" />
+              Save Changes
+            </Button>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  );
+}