"use client" import { useState } from "react" import { motion } from "framer-motion" import { stagger, staggerItem, buttonTap } from "@/lib/animations" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Separator } from "@/components/ui/separator" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Switch } from "@/components/ui/switch" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table" import { Label } from "@/components/ui/label" import { Repeat, PauseCircle, PlayCircle, XCircle, CreditCard } from "lucide-react" type RecurringStatus = "active" | "paused" | "cancelled" interface RecurringPayment { id: string name: string amount: string interval: string nextPayment: string paymentMethod: string status: RecurringStatus } const recurringPayments: RecurringPayment[] = [ { id: "1", name: "Pro Plan Subscription", amount: "MK 51,000", interval: "Monthly", nextPayment: "Jul 10, 2026", paymentMethod: "Visa •••• 4242", status: "active" }, { id: "2", name: "Cloud Storage", amount: "MK 17,000", interval: "Monthly", nextPayment: "Jul 05, 2026", paymentMethod: "Mastercard •••• 1234", status: "active" }, { id: "3", name: "Domain Renewal", amount: "MK 25,500", interval: "Yearly", nextPayment: "Dec 01, 2026", paymentMethod: "Visa •••• 4242", status: "active" }, { id: "4", name: "Newsletter Tool", amount: "MK 32,300", interval: "Monthly", nextPayment: "—", paymentMethod: "Visa •••• 5678", status: "paused" }, { id: "5", name: "Analytics Pro", amount: "MK 83,300", interval: "Monthly", nextPayment: "—", paymentMethod: "Amex •••• 9012", status: "cancelled" }, ] const statusConfig: Record = { active: { variant: "secondary", label: "Active" }, paused: { variant: "outline", label: "Paused" }, cancelled: { variant: "destructive", label: "Cancelled" }, } const intervals = ["Weekly", "Monthly", "Quarterly", "Yearly"] export default function Recurring() { const [scheduleInterval, setScheduleInterval] = useState("Monthly") const [autoPay, setAutoPay] = useState(true) return (

Recurring Payments

Manage your scheduled payments

Payment Schedule Configure your recurring payment settings

Default Interval

Auto-pay enabled

Name Amount Interval Next Payment Status Actions {recurringPayments.map((rp) => ( {rp.name} {rp.amount} {rp.interval} {rp.nextPayment} {statusConfig[rp.status].label}

{rp.status === "active" && ( <> )} {rp.status === "paused" && ( )}

))}

) }

Name	Amount	Interval	Next Payment	Status
Pro Plan Subscription	MK 51,000	Monthly	Jul 10, 2026	Active
Cloud Storage	MK 17,000	Monthly	Jul 05, 2026	Active
Domain Renewal	MK 25,500	Yearly	Dec 01, 2026	Active
Newsletter Tool	MK 32,300	Monthly	—	Paused
Analytics Pro	MK 83,300	Monthly	—	Cancelled

Name	Amount	Interval	Next Payment	Status
Pro Plan Subscription	MK 51,000	Monthly	Jul 10, 2026	Active
Cloud Storage	MK 17,000	Monthly	Jul 05, 2026	Active
Domain Renewal	MK 25,500	Yearly	Dec 01, 2026	Active
Newsletter Tool	MK 32,300	Monthly	—	Paused
Analytics Pro	MK 83,300	Monthly	—	Cancelled