adserver-dashboard 1.0.0

package/client/src/pages/reports.tsx

@@ -0,0 +1,231 @@
+import { useState } from "react";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  Button,
+  Select,
+  Progress,
+  PageHeader,
+} from "@moving-walls/design-system";
+import {
+  BarChart3,
+  Download,
+  Calendar,
+  TrendingUp,
+  DollarSign,
+  Eye,
+  Target,
+} from "lucide-react";
+import { useTranslation } from "@/lib/i18n";
+import { usePageTitle } from "@/hooks/use-page-title";
+
+const topDeals = [
+  { name: "Holiday Season - Retail Network", revenue: 28500, impressions: "2.4M", fill: 96 },
+  { name: "Brand Awareness - Transit", revenue: 22100, impressions: "1.9M", fill: 92 },
+  { name: "Product Launch - Premium", revenue: 18750, impressions: "1.6M", fill: 88 },
+  { name: "Event Promotion - Airport", revenue: 14200, impressions: "1.2M", fill: 85 },
+  { name: "Local Business - Street", revenue: 9800, impressions: "0.8M", fill: 78 },
+];
+
+const venueTypeData = [
+  { name: "Shopping Malls", value: "4.2M", percentage: 34 },
+  { name: "Transit Hubs", value: "3.1M", percentage: 25 },
+  { name: "Airports", value: "2.5M", percentage: 20 },
+  { name: "Street/Outdoor", value: "1.6M", percentage: 13 },
+  { name: "Other", value: "1.0M", percentage: 8 },
+];
+
+const dealTypeData = [
+  { name: "Traditional", value: "$89,540", percentage: 60, color: "bg-blue-500" },
+  { name: "Programmatic", value: "$44,590", percentage: 30, color: "bg-purple-500" },
+  { name: "Hybrid", value: "$14,100", percentage: 10, color: "bg-emerald-500" },
+];
+
+const dateRangeOptions = [
+  { value: "7d", label: "Last 7 days" },
+  { value: "30d", label: "Last 30 days" },
+  { value: "90d", label: "Last 90 days" },
+  { value: "custom", label: "Custom range" },
+];
+
+export default function Reports() {
+  const { t } = useTranslation(["common"]);
+  usePageTitle("Reports");
+  const [dateRange, setDateRange] = useState("30d");
+
+  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">
+        <div className="flex items-center justify-between px-6 py-4 border-b border-mw-neutral-200">
+          <PageHeader
+            title="Reports"
+            subtitle="Analytics and performance insights"
+          />
+          <div className="flex items-center gap-2">
+            <div className="flex items-center">
+              <Calendar className="h-4 w-4 mr-2 text-muted-foreground" />
+              <Select
+                value={dateRange}
+                onChange={(e) => setDateRange(e.target.value)}
+                options={dateRangeOptions}
+                className="w-36"
+                data-testid="select-date-range"
+              />
+            </div>
+            <Button variant="outline" data-testid="button-export-report">
+              <Download className="h-4 w-4 mr-2" />
+              Export
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-auto px-6 py-6 space-y-6">
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between gap-2 space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium text-muted-foreground">
+                Total Impressions
+              </CardTitle>
+              <div className="flex h-8 w-8 items-center justify-center rounded-md bg-blue-500/10">
+                <Eye className="h-4 w-4 text-blue-500" />
+              </div>
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">12.4M</div>
+              <p className="text-xs text-emerald-500 flex items-center gap-1">
+                <TrendingUp className="h-3 w-3" />
+                +12.5% from last period
+              </p>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between gap-2 space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium text-muted-foreground">
+                Total Revenue
+              </CardTitle>
+              <div className="flex h-8 w-8 items-center justify-center rounded-md bg-emerald-500/10">
+                <DollarSign className="h-4 w-4 text-emerald-500" />
+              </div>
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">$148,230</div>
+              <p className="text-xs text-emerald-500 flex items-center gap-1">
+                <TrendingUp className="h-3 w-3" />
+                +8.2% from last period
+              </p>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between gap-2 space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium text-muted-foreground">
+                Fill Rate
+              </CardTitle>
+              <div className="flex h-8 w-8 items-center justify-center rounded-md bg-purple-500/10">
+                <Target className="h-4 w-4 text-purple-500" />
+              </div>
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">87.3%</div>
+              <p className="text-xs text-emerald-500 flex items-center gap-1">
+                <TrendingUp className="h-3 w-3" />
+                +2.1% from last period
+              </p>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between gap-2 space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium text-muted-foreground">
+                Average CPM
+              </CardTitle>
+              <div className="flex h-8 w-8 items-center justify-center rounded-md bg-amber-500/10">
+                <BarChart3 className="h-4 w-4 text-amber-500" />
+              </div>
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">$11.95</div>
+              <p className="text-xs text-emerald-500 flex items-center gap-1">
+                <TrendingUp className="h-3 w-3" />
+                +5.4% from last period
+              </p>
+            </CardContent>
+          </Card>
+        </div>
+
+        <div className="grid gap-4 lg:grid-cols-2">
+          <Card>
+            <CardHeader>
+              <CardTitle>Impressions by Venue Type</CardTitle>
+              <CardDescription>Distribution of impressions across venue categories</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              {venueTypeData.map((venue) => (
+                <div key={venue.name} className="space-y-2">
+                  <div className="flex items-center justify-between text-sm">
+                    <span>{venue.name}</span>
+                    <span className="font-medium">{venue.value} ({venue.percentage}%)</span>
+                  </div>
+                  <Progress value={venue.percentage} className="h-2" />
+                </div>
+              ))}
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Revenue by Deal Type</CardTitle>
+              <CardDescription>Revenue distribution between traditional and programmatic</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              {dealTypeData.map((deal) => (
+                <div key={deal.name} className="space-y-2">
+                  <div className="flex items-center justify-between text-sm">
+                    <div className="flex items-center gap-2">
+                      <div className={`h-3 w-3 rounded-full ${deal.color}`} />
+                      <span>{deal.name}</span>
+                    </div>
+                    <span className="font-medium">{deal.value} ({deal.percentage}%)</span>
+                  </div>
+                  <Progress value={deal.percentage} className="h-2" />
+                </div>
+              ))}
+            </CardContent>
+          </Card>
+        </div>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Top Performing Deals</CardTitle>
+            <CardDescription>Deals ranked by revenue generated</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-4">
+              {topDeals.map((deal, index) => (
+                <div key={index} className="flex items-center justify-between py-3 border-b last:border-0">
+                  <div className="flex items-center gap-4">
+                    <div className="flex h-8 w-8 items-center justify-center rounded-full bg-muted text-sm font-medium">
+                      {index + 1}
+                    </div>
+                    <div>
+                      <div className="font-medium">{deal.name}</div>
+                      <div className="text-sm text-muted-foreground">{deal.impressions} impressions</div>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-6">
+                    <div className="text-right">
+                      <div className="font-medium">${deal.revenue.toLocaleString()}</div>
+                      <div className="text-sm text-muted-foreground">{deal.fill}% fill rate</div>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}