{/* Stats */} `${n}%`, }, { title: 'Sent Last 7d', value: stats.sent_last_7d, icon: TrendingUp }, ] satisfies StatCard[] } />

{/* Volume Chart */} Notification Volume (14d) Notifications sent per day {volume_chart.length === 0 ? ( ) : ( }> )} {/* By Type */} By Type Notifications grouped by type {stats.by_type.length === 0 ? ( ) : ( }> )}

{/* Broadcast Form */} Send Broadcast Notification Notify a segment of users. Rate limited to 1 broadcast per hour.

Title form.setData('title', e.target.value)} placeholder="Notification title" required /> {form.errors.title &&

{form.errors.title}

}

Body

form.setData('body', e.target.value)}
                  placeholder="Notification body text"
                  rows={3}
                  required
                />
                {form.errors.body && <p className="text-sm text-destructive">{form.errors.body}</p>}
              </div>
              <div className="flex gap-4">
                <div className="space-y-2 flex-1">
                  <Label>Type</Label>
                  <Select value={form.data.type} onValueChange={(v) => form.setData('type', v)}>
                    <SelectTrigger><SelectValue /></SelectTrigger>
                    <SelectContent>
                      <SelectItem value="info">Info</SelectItem>
                      <SelectItem value="success">Success</SelectItem>
                      <SelectItem value="warning">Warning</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2 flex-1">
                  <Label>Segment</Label>
                  <Select value={form.data.segment} onValueChange={(v) => form.setData('segment', v)}>
                    <SelectTrigger><SelectValue /></SelectTrigger>
                    <SelectContent>
                      <SelectItem value="all">All Users</SelectItem>
                      <SelectItem value="active">Active (last 30 days)</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>
              <LoadingButton type="submit" loading={form.processing} className="w-full">
                Send Broadcast
              </LoadingButton>
            </form>
          </CardContent>
        </Card>

{/* Recent Notifications */}
        <Card>
          <CardHeader>
            <CardTitle>Recent Notifications</CardTitle>
            <CardDescription>Latest notifications sent to users</CardDescription>
          </CardHeader>
          <CardContent className="p-0">
            {recent_notifications.length === 0 ? (
              <EmptyState
                icon={Bell}
                title="No notifications yet"
                description="Recent notifications will appear here."
                size="sm"
                animated={false}
              />
            ) : (
              <div className="overflow-x-auto">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>User</TableHead>
                      <TableHead>Type</TableHead>
                      <TableHead>Status</TableHead>
                      <TableHead>Sent</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {recent_notifications.map((n, i) => (
                      <TableRow key={`${n.user_id}-${n.created_at}-${i}`}>
                        <TableCell>
                          <Link href={`/admin/users/${n.user_id}`} className="font-medium hover:underline">
                            {n.user_name}
                          </Link>
                          <div className="text-xs text-muted-foreground">{n.user_email}</div>
                        </TableCell>
                        <TableCell className="text-sm text-muted-foreground">{n.type}</TableCell>
                        <TableCell>
                          {n.read_at ? (
                            <Badge variant="secondary">Read</Badge>
                          ) : (
                            <Badge variant="outline">Unread</Badge>
                          )}
                        </TableCell>
                        <TableCell className="text-sm text-muted-foreground">
                          {formatRelativeTime(n.created_at)}
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>
            )}
          </CardContent>
        </Card>
      </div>
    </AdminLayout>
  );
}