"use client"; import { Bell, Loader2, Settings, X } from "lucide-react"; import { useState } from "react"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Separator } from "@/components/ui/separator"; import { Switch } from "@/components/ui/switch"; import { cn } from "@/lib/utils"; export interface UsageAlert { id: string; name: string; category: string; threshold: number; thresholdType: "percentage" | "absolute"; enabled: boolean; channels: ("email" | "sms" | "in_app")[]; lastTriggered?: Date; triggerCount?: number; } export interface BillingUsageAlertsProps { alerts?: UsageAlert[]; onToggle?: (alertId: string, enabled: boolean) => Promise; onEdit?: (alertId: string) => void; onDelete?: (alertId: string) => Promise; onCreate?: () => void; className?: string; } function formatDate(date: Date): string { const year = date.getFullYear(); const month = date.toLocaleString("en-US", { month: "short" }); const day = date.getDate(); return `${month} ${day}, ${year}`; } function getChannelIcon(channel: string) { switch (channel) { case "email": return "📧"; case "sms": return "💬"; case "in_app": return "🔔"; default: return "🔔"; } } function getChannelLabel(channel: string) { switch (channel) { case "email": return "Email"; case "sms": return "SMS"; case "in_app": return "In-App"; default: return channel; } } export default function BillingUsageAlerts({ alerts = [], onToggle, onEdit, onDelete, onCreate, className, }: BillingUsageAlertsProps) { const [isLoading, setIsLoading] = useState(null); const handleToggle = async (alertId: string, enabled: boolean) => { if (!onToggle) return; setIsLoading(alertId); try { await onToggle(alertId, enabled); } finally { setIsLoading(null); } }; const handleDelete = async (alertId: string) => { if (!onDelete) return; setIsLoading(alertId); try { await onDelete(alertId); } finally { setIsLoading(null); } }; if (alerts.length === 0) { return (

Usage Alerts Get notified when you approach your usage limits

{onCreate && ( )}

No alerts configured

Create alerts to get notified when you approach your usage limits

{onCreate && ( )}

); } return (

Usage Alerts Get notified when you approach your usage limits

{onCreate && ( )}

{alerts.map((alert, idx) => (

{alert.name}

{alert.enabled ? ( Active ) : ( Disabled )}

{alert.category} Alert at{" "} {alert.thresholdType === "percentage" ? `${alert.threshold}%` : alert.threshold.toLocaleString()}

Notify via: {alert.channels.map((channel, channelIdx) => (

{getChannelIcon(channel)} {getChannelLabel(channel)}

))} {alert.lastTriggered && ( <> Last triggered: {formatDate(alert.lastTriggered)} )} {alert.triggerCount !== undefined && alert.triggerCount > 0 && ( <> Triggered {alert.triggerCount} time {alert.triggerCount !== 1 ? "s" : ""} )}

{onToggle && (

{isLoading === alert.id ? ( ) : ( handleToggle(alert.id, checked) } /> )}

)} {onEdit && ( )} {onDelete && ( )}

{idx < alerts.length - 1 && }

))}

); }

API Usage Alert

Storage Limit Alert

Example Usage