adserver-dashboard 1.0.0

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

@@ -0,0 +1,652 @@
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { Separator } from "@/components/ui/separator";
+import { PageHeader } from "@/components/page-header";
+import { Settings as SettingsIcon, Bell, Shield, Globe, Palette, Save, Workflow, Languages, Package, ListFilter, Sparkles, Target, TrendingUp, Sliders } from "lucide-react";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { useToast } from "@/hooks/use-toast";
+
+export default function Settings() {
+  const { toast } = useToast();
+
+  const handleSave = () => {
+    toast({
+      title: "Settings saved",
+      description: "Your settings have been updated successfully.",
+    });
+  };
+
+  return (
+    <div className="flex flex-col gap-6 p-6">
+      <PageHeader
+        title="Settings"
+        description="Configure your ad server preferences"
+      />
+
+      <div className="grid gap-6">
+        <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="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" data-testid="input-company-name" />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="timezone">Timezone</Label>
+                <Select defaultValue="utc">
+                  <SelectTrigger data-testid="select-timezone">
+                    <SelectValue placeholder="Select timezone" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="utc">UTC</SelectItem>
+                    <SelectItem value="est">Eastern Time (EST)</SelectItem>
+                    <SelectItem value="pst">Pacific Time (PST)</SelectItem>
+                    <SelectItem value="cet">Central European Time (CET)</SelectItem>
+                    <SelectItem value="ist">India Standard Time (IST)</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">
+                  <SelectTrigger data-testid="select-currency">
+                    <SelectValue placeholder="Select currency" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="usd">USD ($)</SelectItem>
+                    <SelectItem value="eur">EUR (€)</SelectItem>
+                    <SelectItem value="gbp">GBP (£)</SelectItem>
+                    <SelectItem value="inr">INR (₹)</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="date-format">Date Format</Label>
+                <Select defaultValue="mdy">
+                  <SelectTrigger data-testid="select-date-format">
+                    <SelectValue placeholder="Select format" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="mdy">MM/DD/YYYY</SelectItem>
+                    <SelectItem value="dmy">DD/MM/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="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 data-testid="switch-deal-alerts" />
+            </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 data-testid="switch-screen-alerts" />
+            </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 data-testid="switch-daily-reports" />
+            </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 data-testid="switch-integration-alerts" />
+            </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="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">
+                  <SelectTrigger data-testid="select-default-allocation">
+                    <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">
+                  <SelectTrigger data-testid="select-pacing">
+                    <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 data-testid="switch-programmatic-fallback" />
+            </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="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">
+                  <SelectTrigger data-testid="select-forecast-goal-type">
+                    <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">
+                  <SelectTrigger data-testid="select-forecast-confidence">
+                    <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" data-testid="input-budget-buffer" />
+                <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">
+                  <SelectTrigger data-testid="select-forecast-refresh">
+                    <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 data-testid="switch-historical-forecast" />
+            </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="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">
+                  <SelectTrigger data-testid="select-optimization-mode">
+                    <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">
+                  <SelectTrigger data-testid="select-reoptimize-frequency">
+                    <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 data-testid="switch-auto-optimize" />
+            </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 data-testid="switch-ab-testing" />
+            </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 data-testid="switch-optimization-insights" />
+            </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="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-4 sm:grid-cols-2">
+              <div className="space-y-2">
+                <div className="flex items-center justify-between">
+                  <Label htmlFor="weight-measure-fit">Measure Fit</Label>
+                  <span className="text-sm text-muted-foreground">15%</span>
+                </div>
+                <Input id="weight-measure-fit" type="range" min="0" max="30" defaultValue="15" className="w-full" data-testid="input-weight-measure-fit" />
+              </div>
+              <div className="space-y-2">
+                <div className="flex items-center justify-between">
+                  <Label htmlFor="weight-geo-fit">Geo Fit</Label>
+                  <span className="text-sm text-muted-foreground">15%</span>
+                </div>
+                <Input id="weight-geo-fit" type="range" min="0" max="30" defaultValue="15" className="w-full" data-testid="input-weight-geo-fit" />
+              </div>
+            </div>
+            <div className="grid gap-4 sm:grid-cols-2">
+              <div className="space-y-2">
+                <div className="flex items-center justify-between">
+                  <Label htmlFor="weight-availability">Availability</Label>
+                  <span className="text-sm text-muted-foreground">15%</span>
+                </div>
+                <Input id="weight-availability" type="range" min="0" max="30" defaultValue="15" className="w-full" data-testid="input-weight-availability" />
+              </div>
+              <div className="space-y-2">
+                <div className="flex items-center justify-between">
+                  <Label htmlFor="weight-budget-fit">Budget Fit</Label>
+                  <span className="text-sm text-muted-foreground">10%</span>
+                </div>
+                <Input id="weight-budget-fit" type="range" min="0" max="30" defaultValue="10" className="w-full" data-testid="input-weight-budget-fit" />
+              </div>
+            </div>
+            <div className="grid gap-4 sm:grid-cols-2">
+              <div className="space-y-2">
+                <div className="flex items-center justify-between">
+                  <Label htmlFor="weight-audience-fit">Audience Fit</Label>
+                  <span className="text-sm text-muted-foreground">15%</span>
+                </div>
+                <Input id="weight-audience-fit" type="range" min="0" max="30" defaultValue="15" className="w-full" data-testid="input-weight-audience-fit" />
+              </div>
+              <div className="space-y-2">
+                <div className="flex items-center justify-between">
+                  <Label htmlFor="weight-brand-fit">Brand Fit</Label>
+                  <span className="text-sm text-muted-foreground">10%</span>
+                </div>
+                <Input id="weight-brand-fit" type="range" min="0" max="30" defaultValue="10" className="w-full" data-testid="input-weight-brand-fit" />
+              </div>
+            </div>
+            <div className="grid gap-4 sm:grid-cols-2">
+              <div className="space-y-2">
+                <div className="flex items-center justify-between">
+                  <Label htmlFor="weight-quality-fit">Quality Fit</Label>
+                  <span className="text-sm text-muted-foreground">10%</span>
+                </div>
+                <Input id="weight-quality-fit" type="range" min="0" max="30" defaultValue="10" className="w-full" data-testid="input-weight-quality-fit" />
+              </div>
+              <div className="space-y-2">
+                <div className="flex items-center justify-between">
+                  <Label htmlFor="weight-time-fit">Time Fit</Label>
+                  <span className="text-sm text-muted-foreground">10%</span>
+                </div>
+                <Input id="weight-time-fit" type="range" min="0" max="30" defaultValue="10" className="w-full" data-testid="input-weight-time-fit" />
+              </div>
+            </div>
+            <Button variant="outline" size="sm" className="mt-2" data-testid="button-reset-weights">
+              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="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 data-testid="switch-creative-approval" />
+            </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 data-testid="switch-two-tier-approval" />
+            </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 data-testid="switch-auto-accept" />
+            </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 data-testid="switch-deal-locking" />
+            </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="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" data-testid="input-term-deal" />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="term-line-item">Line Item</Label>
+                <Input id="term-line-item" defaultValue="Line Item" data-testid="input-term-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" data-testid="input-term-creative" />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="term-inventory">Inventory</Label>
+                <Input id="term-inventory" defaultValue="Inventory" data-testid="input-term-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" data-testid="input-term-advertiser" />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="term-campaign">Campaign</Label>
+                <Input id="term-campaign" defaultValue="Campaign" data-testid="input-term-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="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">
+                  <SelectTrigger data-testid="select-theme-mode">
+                    <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" data-testid="input-primary-color" />
+                  <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" data-testid="input-logo-url" />
+            </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 data-testid="switch-compact-mode" />
+            </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="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 data-testid="switch-inventory-whitelist" />
+            </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"
+                data-testid="input-whitelist-ids"
+              />
+              <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 data-testid="switch-exclude-adult" />
+            </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="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"
+                  data-testid="input-api-endpoint"
+                />
+                <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" data-testid="input-rate-limit" />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="timeout">Request Timeout (ms)</Label>
+                <Input id="timeout" type="number" defaultValue="5000" data-testid="input-timeout" />
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <div className="flex justify-end">
+          <Button onClick={handleSave} data-testid="button-save-settings">
+            <Save className="h-4 w-4 mr-2" />
+            Save Changes
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}