This commit is contained in:
2026-01-12 20:37:38 -06:00
parent 7694532d53
commit 9c2d516f9d
74 changed files with 1842 additions and 1842 deletions

View File

@@ -277,7 +277,7 @@ Proceed with activation?`;
if (loading) {
return (
<div className="flex items-center justify-center min-h-screen">
<Loader2 className="h-12 w-12 animate-spin text-var(--purple-lavender)" />
<Loader2 className="h-12 w-12 animate-spin text-[var(--purple-lavender)]" />
</div>
);
}
@@ -286,93 +286,93 @@ Proceed with activation?`;
<div className="space-y-8">
{/* Header */}
<div>
<h1 className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
<h1 className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
Subscription Management
</h1>
<p className="text-var(--purple-lavender) mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-[var(--purple-lavender)] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
View and manage all member subscriptions
</p>
</div>
{/* Stats Cards */}
<div className="grid md:grid-cols-4 gap-6">
<Card className="p-6 bg-background rounded-2xl border-2 border-var(--neutral-800)">
<Card className="p-6 bg-background rounded-2xl border-2 border-[var(--neutral-800)]">
<div className="flex items-center justify-between">
<div>
<p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Total Subscriptions
</p>
<p className="text-3xl font-bold text-var(--purple-ink) mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
<p className="text-3xl font-bold text-[var(--purple-ink)] mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
{stats.total || 0}
</p>
</div>
<div className="p-3 bg-var(--neutral-800)/20 rounded-full">
<CreditCard className="h-6 w-6 text-var(--purple-lavender)" />
<div className="p-3 bg-[var(--neutral-800)]/20 rounded-full">
<CreditCard className="h-6 w-6 text-[var(--purple-lavender)]" />
</div>
</div>
</Card>
<Card className="p-6 bg-background rounded-2xl border-2 border-var(--neutral-800)">
<Card className="p-6 bg-background rounded-2xl border-2 border-[var(--neutral-800)]">
<div className="flex items-center justify-between">
<div>
<p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Active Members
</p>
<p className="text-3xl font-bold text-var(--green-light) mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
<p className="text-3xl font-bold text-[var(--green-light)] mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
{stats.active || 0}
</p>
</div>
<div className="p-3 bg-var(--green-light)/10 rounded-full">
<TrendingUp className="h-6 w-6 text-var(--green-light)" />
<div className="p-3 bg-[var(--green-light)]/10 rounded-full">
<TrendingUp className="h-6 w-6 text-[var(--green-light)]" />
</div>
</div>
</Card>
<Card className="p-6 bg-background rounded-2xl border-2 border-var(--neutral-800)">
<Card className="p-6 bg-background rounded-2xl border-2 border-[var(--neutral-800)]">
<div className="flex items-center justify-between">
<div>
<p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Total Revenue
</p>
<p className="text-3xl font-bold text-var(--purple-ink) mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
<p className="text-3xl font-bold text-[var(--purple-ink)] mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
{formatPrice(stats.total_revenue || 0)}
</p>
</div>
<div className="p-3 bg-var(--neutral-800)/20 rounded-full">
<DollarSign className="h-6 w-6 text-var(--purple-lavender)" />
<div className="p-3 bg-[var(--neutral-800)]/20 rounded-full">
<DollarSign className="h-6 w-6 text-[var(--purple-lavender)]" />
</div>
</div>
</Card>
<Card className="p-6 bg-background rounded-2xl border-2 border-var(--neutral-800)">
<Card className="p-6 bg-background rounded-2xl border-2 border-[var(--neutral-800)]">
<div className="flex items-center justify-between">
<div>
<p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Total Donations
</p>
<p className="text-3xl font-bold text-var(--orange-light) mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
<p className="text-3xl font-bold text-[var(--orange-light)] mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
{formatPrice(stats.total_donations || 0)}
</p>
</div>
<div className="p-3 bg-var(--orange-light)/10 rounded-full">
<Heart className="h-6 w-6 text-var(--orange-light)" />
<div className="p-3 bg-[var(--orange-light)]/10 rounded-full">
<Heart className="h-6 w-6 text-[var(--orange-light)]" />
</div>
</div>
</Card>
</div>
{/* Search & Filter Bar */}
<Card className="p-6 bg-background rounded-2xl border-2 border-var(--neutral-800)">
<Card className="p-6 bg-background rounded-2xl border-2 border-[var(--neutral-800)]">
<div className="grid md:grid-cols-3 gap-4">
{/* Search */}
<div className="md:col-span-1">
<div className="relative">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-var(--purple-lavender)" />
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-[var(--purple-lavender)]" />
<Input
placeholder="Search by name or email..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="pl-10 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
className="pl-10 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
/>
</div>
</div>
@@ -380,7 +380,7 @@ Proceed with activation?`;
{/* Status Filter */}
<div>
<Select value={statusFilter} onValueChange={setStatusFilter}>
<SelectTrigger className="rounded-xl border-2 border-var(--neutral-800)">
<SelectTrigger className="rounded-xl border-2 border-[var(--neutral-800)]">
<SelectValue placeholder="All Statuses" />
</SelectTrigger>
<SelectContent>
@@ -395,7 +395,7 @@ Proceed with activation?`;
{/* Plan Filter */}
<div>
<Select value={planFilter} onValueChange={setPlanFilter}>
<SelectTrigger className="rounded-xl border-2 border-var(--neutral-800)">
<SelectTrigger className="rounded-xl border-2 border-[var(--neutral-800)]">
<SelectValue placeholder="All Plans" />
</SelectTrigger>
<SelectContent>
@@ -409,7 +409,7 @@ Proceed with activation?`;
</div>
<div className="mt-4 flex items-center justify-between">
<div className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<div className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Showing {filteredSubscriptions.length} of {subscriptions.length} subscriptions
</div>
@@ -419,26 +419,26 @@ Proceed with activation?`;
<DropdownMenuTrigger asChild>
<Button
disabled={exporting}
className="bg-var(--green-light) text-white hover:bg-var(--green-soft) rounded-full px-6 py-2 flex items-center gap-2"
className="bg-[var(--green-light)] text-white hover:bg-[var(--green-soft)] rounded-full px-6 py-2 flex items-center gap-2"
>
<Download className="h-4 w-4" />
{exporting ? 'Exporting...' : 'Export'}
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-56 bg-background rounded-xl border-2 border-var(--neutral-800) shadow-lg">
<DropdownMenuContent align="end" className="w-56 bg-background rounded-xl border-2 border-[var(--neutral-800)] shadow-lg">
<DropdownMenuItem
onClick={() => handleExport('all')}
className="cursor-pointer hover:bg-var(--lavender-300) rounded-lg p-3"
className="cursor-pointer hover:bg-[var(--lavender-300)] rounded-lg p-3"
>
<FileDown className="h-4 w-4 mr-2 text-var(--purple-lavender)" />
<span className="text-var(--purple-ink)">Export All Subscriptions</span>
<FileDown className="h-4 w-4 mr-2 text-[var(--purple-lavender)]" />
<span className="text-[var(--purple-ink)]">Export All Subscriptions</span>
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => handleExport('current')}
className="cursor-pointer hover:bg-var(--lavender-300) rounded-lg p-3"
className="cursor-pointer hover:bg-[var(--lavender-300)] rounded-lg p-3"
>
<FileDown className="h-4 w-4 mr-2 text-var(--purple-lavender)" />
<span className="text-var(--purple-ink)">Export Current View</span>
<FileDown className="h-4 w-4 mr-2 text-[var(--purple-lavender)]" />
<span className="text-[var(--purple-ink)]">Export Current View</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
@@ -447,20 +447,20 @@ Proceed with activation?`;
</Card>
{/* Subscriptions Table */}
<Card className="bg-background rounded-2xl border-2 border-var(--neutral-800) overflow-hidden">
<Card className="bg-background rounded-2xl border-2 border-[var(--neutral-800)] overflow-hidden">
{/* Mobile Card View */}
<div className="md:hidden p-4 space-y-4">
{filteredSubscriptions.length > 0 ? (
filteredSubscriptions.map((sub) => (
<Card key={sub.id} className="p-4 border border-var(--neutral-800) bg-var(--lavender-400)/30">
<Card key={sub.id} className="p-4 border border-[var(--neutral-800)] bg-[var(--lavender-400)]/30">
<div className="space-y-3">
{/* Member Info */}
<div className="flex justify-between items-start border-b border-var(--neutral-800) pb-3">
<div className="flex justify-between items-start border-b border-[var(--neutral-800)] pb-3">
<div className="flex-1">
<p className="font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
<p className="font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
{sub.user.first_name} {sub.user.last_name}
</p>
<p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{sub.user.email}
</p>
</div>
@@ -470,13 +470,13 @@ Proceed with activation?`;
{/* Plan & Period */}
<div className="grid grid-cols-2 gap-3 text-sm">
<div>
<p className="text-xs text-var(--purple-lavender) mb-1">Plan</p>
<p className="font-medium text-var(--purple-ink)">{sub.plan.name}</p>
<p className="text-xs text-var(--purple-lavender)">{sub.plan.billing_cycle}</p>
<p className="text-xs text-[var(--purple-lavender)] mb-1">Plan</p>
<p className="font-medium text-[var(--purple-ink)]">{sub.plan.name}</p>
<p className="text-xs text-[var(--purple-lavender)]">{sub.plan.billing_cycle}</p>
</div>
<div>
<p className="text-xs text-var(--purple-lavender) mb-1">Period</p>
<p className="text-var(--purple-ink)">
<p className="text-xs text-[var(--purple-lavender)] mb-1">Period</p>
<p className="text-[var(--purple-ink)]">
{new Date(sub.current_period_start).toLocaleDateString()} -
{new Date(sub.current_period_end).toLocaleDateString()}
</p>
@@ -486,20 +486,20 @@ Proceed with activation?`;
{/* Pricing */}
<div className="grid grid-cols-3 gap-2 text-sm bg-background/50 p-3 rounded">
<div>
<p className="text-xs text-var(--purple-lavender) mb-1">Base Fee</p>
<p className="font-medium text-var(--purple-ink)">
<p className="text-xs text-[var(--purple-lavender)] mb-1">Base Fee</p>
<p className="font-medium text-[var(--purple-ink)]">
${(sub.base_fee_cents / 100).toFixed(2)}
</p>
</div>
<div>
<p className="text-xs text-var(--purple-lavender) mb-1">Donation</p>
<p className="font-medium text-var(--purple-ink)">
<p className="text-xs text-[var(--purple-lavender)] mb-1">Donation</p>
<p className="font-medium text-[var(--purple-ink)]">
${(sub.donation_cents / 100).toFixed(2)}
</p>
</div>
<div>
<p className="text-xs text-var(--purple-lavender) mb-1">Total</p>
<p className="font-semibold text-var(--purple-ink)">
<p className="text-xs text-[var(--purple-lavender)] mb-1">Total</p>
<p className="font-semibold text-[var(--purple-ink)]">
${(sub.total_cents / 100).toFixed(2)}
</p>
</div>
@@ -512,7 +512,7 @@ Proceed with activation?`;
size="sm"
variant="outline"
onClick={() => handleEdit(sub)}
className="flex-1 text-var(--purple-lavender) hover:bg-var(--neutral-800)"
className="flex-1 text-[var(--purple-lavender)] hover:bg-[var(--neutral-800)]"
>
<Edit className="h-4 w-4 mr-2" />
Edit
@@ -534,7 +534,7 @@ Proceed with activation?`;
</Card>
))
) : (
<div className="p-12 text-center text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<div className="p-12 text-center text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
No subscriptions found
</div>
)}
@@ -544,29 +544,29 @@ Proceed with activation?`;
<div className="hidden md:block overflow-x-auto">
<table className="w-full">
<thead>
<tr className="bg-var(--neutral-800)/20 border-b border-var(--neutral-800)">
<th className="text-left p-4 text-var(--purple-ink) font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
<tr className="bg-[var(--neutral-800)]/20 border-b border-[var(--neutral-800)]">
<th className="text-left p-4 text-[var(--purple-ink)] font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
Member
</th>
<th className="text-left p-4 text-var(--purple-ink) font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
<th className="text-left p-4 text-[var(--purple-ink)] font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
Plan
</th>
<th className="text-left p-4 text-var(--purple-ink) font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
<th className="text-left p-4 text-[var(--purple-ink)] font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
Status
</th>
<th className="text-left p-4 text-var(--purple-ink) font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
<th className="text-left p-4 text-[var(--purple-ink)] font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
Period
</th>
<th className="text-right p-4 text-var(--purple-ink) font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
<th className="text-right p-4 text-[var(--purple-ink)] font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
Base Fee
</th>
<th className="text-right p-4 text-var(--purple-ink) font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
<th className="text-right p-4 text-[var(--purple-ink)] font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
Donation
</th>
<th className="text-right p-4 text-var(--purple-ink) font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
<th className="text-right p-4 text-[var(--purple-ink)] font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
Total
</th>
<th className="text-center p-4 text-var(--purple-ink) font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
<th className="text-center p-4 text-[var(--purple-ink)] font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
Actions
</th>
</tr>
@@ -574,20 +574,20 @@ Proceed with activation?`;
<tbody>
{filteredSubscriptions.length > 0 ? (
filteredSubscriptions.map((sub) => (
<tr key={sub.id} className="border-b border-var(--neutral-800) hover:bg-var(--lavender-400) transition-colors">
<tr key={sub.id} className="border-b border-[var(--neutral-800)] hover:bg-[var(--lavender-400)] transition-colors">
<td className="p-4">
<div className="font-medium text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
<div className="font-medium text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
{sub.user.first_name} {sub.user.last_name}
</div>
<div className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<div className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{sub.user.email}
</div>
</td>
<td className="p-4">
<div className="text-var(--purple-ink)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<div className="text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{sub.plan.name}
</div>
<div className="text-xs text-var(--purple-lavender)">
<div className="text-xs text-[var(--purple-lavender)]">
{sub.plan.billing_cycle}
</div>
</td>
@@ -597,18 +597,18 @@ Proceed with activation?`;
</Badge>
</td>
<td className="p-4">
<div className="text-sm text-var(--purple-ink)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<div className="text-sm text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<div>{formatDate(sub.start_date)}</div>
<div className="text-xs text-var(--purple-lavender)">to {formatDate(sub.end_date)}</div>
<div className="text-xs text-[var(--purple-lavender)]">to {formatDate(sub.end_date)}</div>
</div>
</td>
<td className="p-4 text-right text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
<td className="p-4 text-right text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
{formatPrice(sub.base_subscription_cents || 0)}
</td>
<td className="p-4 text-right text-var(--orange-light)" style={{ fontFamily: "'Inter', sans-serif" }}>
<td className="p-4 text-right text-[var(--orange-light)]" style={{ fontFamily: "'Inter', sans-serif" }}>
{formatPrice(sub.donation_cents || 0)}
</td>
<td className="p-4 text-right font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
<td className="p-4 text-right font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
{formatPrice(sub.amount_paid_cents || 0)}
</td>
<td className="p-4">
@@ -618,7 +618,7 @@ Proceed with activation?`;
size="sm"
variant="outline"
onClick={() => handleEdit(sub)}
className="text-var(--purple-lavender) hover:bg-var(--neutral-800)"
className="text-[var(--purple-lavender)] hover:bg-[var(--neutral-800)]"
>
<Edit className="h-4 w-4" />
</Button>
@@ -639,7 +639,7 @@ Proceed with activation?`;
))
) : (
<tr>
<td colSpan="8" className="p-12 text-center text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<td colSpan="8" className="p-12 text-center text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
No subscriptions found
</td>
</tr>
@@ -653,10 +653,10 @@ Proceed with activation?`;
<Dialog open={editDialogOpen} onOpenChange={setEditDialogOpen}>
<DialogContent className="sm:max-w-[500px] bg-background rounded-2xl">
<DialogHeader>
<DialogTitle className="text-2xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
<DialogTitle className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
Edit Subscription
</DialogTitle>
<DialogDescription className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<DialogDescription className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Update subscription status or end date for {selectedSubscription?.user.first_name} {selectedSubscription?.user.last_name}
</DialogDescription>
</DialogHeader>
@@ -664,14 +664,14 @@ Proceed with activation?`;
<div className="space-y-6 py-4">
{/* Status */}
<div className="space-y-2">
<Label htmlFor="status" className="text-var(--purple-ink) font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
<Label htmlFor="status" className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
Status
</Label>
<Select
value={editFormData.status}
onValueChange={(value) => setEditFormData({ ...editFormData, status: value })}
>
<SelectTrigger className="rounded-xl border-2 border-var(--neutral-800)">
<SelectTrigger className="rounded-xl border-2 border-[var(--neutral-800)]">
<SelectValue placeholder="Select status" />
</SelectTrigger>
<SelectContent>
@@ -736,17 +736,17 @@ Proceed with activation?`;
{/* End Date */}
<div className="space-y-2">
<Label htmlFor="end_date" className="text-var(--purple-ink) font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
<Label htmlFor="end_date" className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
End Date
</Label>
<div className="relative">
<Calendar className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-var(--purple-lavender)" />
<Calendar className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-[var(--purple-lavender)]" />
<Input
id="end_date"
type="date"
value={editFormData.end_date}
onChange={(e) => setEditFormData({ ...editFormData, end_date: e.target.value })}
className="pl-12 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
className="pl-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
/>
</div>
</div>
@@ -757,7 +757,7 @@ Proceed with activation?`;
type="button"
variant="outline"
onClick={() => setEditDialogOpen(false)}
className="rounded-full border-2 border-var(--neutral-800)"
className="rounded-full border-2 border-[var(--neutral-800)]"
disabled={isUpdating}
>
Cancel
@@ -766,7 +766,7 @@ Proceed with activation?`;
type="button"
onClick={handleSaveSubscription}
disabled={isUpdating}
className="bg-var(--green-light) text-white hover:bg-var(--green-mint) rounded-full"
className="bg-[var(--green-light)] text-white hover:bg-[var(--green-mint)] rounded-full"
>
{isUpdating ? (
<>