Billing Settings

1"use client";
2 
3import { Button } from "@/components/ui/button";
4import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
5import { Switch } from "@/components/ui/switch";
6import { Badge } from "@/components/ui/badge";
7import {
8  DropdownMenu,
9  DropdownMenuContent,
10  DropdownMenuItem,
11  DropdownMenuTrigger,
12} from "@/components/ui/dropdown-menu";
13import { ChevronDown, CreditCard, Plus } from "lucide-react";
14 
15const tabs = [
16  { id: "general", label: "General" },
17  { id: "payment", label: "Payment" },
18  { id: "invoices", label: "Invoices" },
19  { id: "limits", label: "Limits" },
20];
21 
22interface CardInfo {
23  id: string;
24  last4: string;
25  brand: string;
26  expiry: string;
27  primary?: boolean;
28}
29 
30interface BillingSettingsProps {
31  activeTab: string;
32  onTabChange: (tab: string) => void;
33 
34  emailNotifications: boolean;
35  onEmailNotificationsChange: (value: boolean) => void;
36 
37  usageAlerts: boolean;
38  onUsageAlertsChange: (value: boolean) => void;
39 
40  invoiceReminders: boolean;
41  onInvoiceRemindersChange: (value: boolean) => void;
42 
43  cards: CardInfo[];
44  onAddCard: () => void;
45 
46  invoiceFormat: "PDF" | "HTML";
47  onInvoiceFormatChange: (format: "PDF" | "HTML") => void;
48  onEditBillingAddress: () => void;
49 
50  overageProtection: boolean;
51  onOverageProtectionChange: (value: boolean) => void;
52 
53  usageLimitAlerts: boolean;
54  onUsageLimitAlertsChange: (value: boolean) => void;
55  className?: string;
56}
57 
58interface SettingItemProps {
59  title: string;
60  description: string;
61  checked: boolean;
62  onCheckedChange: (checked: boolean) => void;
63}
64 
65function SettingItem({
66  title,
67  description,
68  checked,
69  onCheckedChange,
70}: SettingItemProps) {
71  const switchId = `switch-${title.toLowerCase().replace(/\s+/g, "-")}`;
72 
73  return (
74    <div className="flex items-center justify-between gap-4 py-4">
75      <div className="min-w-0 flex-1 space-y-0.5">
76        <label
77          htmlFor={switchId}
78          className="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
79        >
80          {title}
81        </label>
82        <p className="text-muted-foreground text-sm">{description}</p>
83      </div>
84      <Switch
85        id={switchId}
86        checked={checked}
87        onCheckedChange={onCheckedChange}
88        className="shrink-0"
89      />
90    </div>
91  );
92}
93 
94interface TabNavigationProps {
95  activeTab: string;
96  onTabChange: (tab: string) => void;
97}
98 
99function TabNavigation({ activeTab, onTabChange }: TabNavigationProps) {
100  return (
101// … truncated