andika/membership-fe
3
1
Fork 1
Code Issues 17 Pull Requests Actions Packages Projects Releases Wiki Activity

fix typo

Browse Source
This commit is contained in:
kayela
2026-01-12 20:37:38 -06:00
parent 7694532d53
commit 9c2d516f9d
74 changed files with 1842 additions and 1842 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/pages/admin/AdminPlans.js
View File

@@ -131,17 +131,17 @@ const AdminPlans = () => {
<div className="mb-8">
<div className="flex justify-between items-start mb-4">
<div>
<h1 className="text-4xl md:text-5xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
<h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Subscription Plans
</h1>
<p className="text-lg text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Manage membership plans and pricing.
</p>
</div>
{hasPermission('subscriptions.plans') && (
<Button
onClick={handleCreatePlan}
className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full px-6"
className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full px-6"
>
<Plus className="h-4 w-4 mr-2" />
Create Plan
@@ -152,27 +152,27 @@ const AdminPlans = () => {
{/* Stats */}
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 mb-8">
<Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800)">
<p className="text-sm text-var(--purple-lavender) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Plans</p>
<p className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
<Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
<p className="text-sm text-[var(--purple-lavender)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Plans</p>
<p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
{plans.length}
</p>
</Card>
<Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800)">
<p className="text-sm text-var(--purple-lavender) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Active Plans</p>
<p className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
<Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
<p className="text-sm text-[var(--purple-lavender)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Active Plans</p>
<p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
{plans.filter(p => p.active).length}
</p>
</Card>
<Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800)">
<p className="text-sm text-var(--purple-lavender) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Subscribers</p>
<p className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
<Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
<p className="text-sm text-[var(--purple-lavender)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Subscribers</p>
<p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
{plans.reduce((sum, p) => sum + (p.subscriber_count || 0), 0)}
</p>
</Card>
<Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800)">
<p className="text-sm text-var(--purple-lavender) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Revenue (Annual Est.)</p>
<p className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
<Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
<p className="text-sm text-[var(--purple-lavender)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Revenue (Annual Est.)</p>
<p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
{formatPrice(
plans.reduce((sum, p) => {
const annualPrice = p.billing_cycle === 'yearly'
@@ -186,19 +186,19 @@ const AdminPlans = () => {
</div>
{/* Filters */}
<Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800) mb-8">
<Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)] mb-8">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="relative">
<Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-var(--purple-lavender)" />
<Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-[var(--purple-lavender)]" />
<Input
placeholder="Search plans..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="pl-12 h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
className="pl-12 h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
/>
</div>
<Select value={activeFilter} onValueChange={setActiveFilter}>
<SelectTrigger className="h-14 rounded-xl border-2 border-var(--neutral-800)">
<SelectTrigger className="h-14 rounded-xl border-2 border-[var(--neutral-800)]">
<SelectValue placeholder="Filter by status" />
</SelectTrigger>
<SelectContent>
@@ -213,7 +213,7 @@ const AdminPlans = () => {
{/* Plans Grid */}
{loading ? (
<div className="text-center py-20">
<p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading plans...</p>
<p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading plans...</p>
</div>
) : filteredPlans.length > 0 ? (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
@@ -221,7 +221,7 @@ const AdminPlans = () => {
<Card
key={plan.id}
className={`p-6 bg-background rounded-2xl border-2 transition-all hover:shadow-lg ${plan.active
? 'border-var(--neutral-800) hover:border-var(--purple-lavender)'
? 'border-[var(--neutral-800)] hover:border-[var(--purple-lavender)]'
: 'border-gray-400 opacity-60'
}`}
>
@@ -229,38 +229,38 @@ const AdminPlans = () => {
<div className="flex flex-wrap gap-2 mb-4">
<Badge
className={`${plan.active
? 'bg-var(--green-light) text-white'
? 'bg-[var(--green-light)] text-white'
: 'bg-gray-400 text-white'
}`}
>
{plan.active ? 'Active' : 'Inactive'}
</Badge>
{plan.subscriber_count > 0 && (
<Badge className="bg-var(--neutral-800) text-var(--purple-ink)">
<Badge className="bg-[var(--neutral-800)] text-[var(--purple-ink)]">
<Users className="h-3 w-3 mr-1" />
{plan.subscriber_count}
</Badge>
)}
{plan.custom_cycle_enabled && (
<Badge className="bg-var(--purple-lavender) text-white">
<Badge className="bg-[var(--purple-lavender)] text-white">
Custom Dates
</Badge>
)}
{plan.allow_donation && (
<Badge className="bg-var(--orange-light) text-white">
<Badge className="bg-[var(--orange-light)] text-white">
Donations Enabled
</Badge>
)}
</div>
{/* Plan Name */}
<h3 className="text-2xl font-semibold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
<h3 className="text-2xl font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
{plan.name}
</h3>
{/* Description */}
{plan.description && (
<p className="text-sm text-var(--purple-lavender) mb-4 line-clamp-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-sm text-[var(--purple-lavender)] mb-4 line-clamp-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{plan.description}
</p>
)}
@@ -268,20 +268,20 @@ const AdminPlans = () => {
{/* Price */}
<div className="mb-4">
<div className="flex items-baseline gap-2">
<div className="text-3xl font-bold text-var(--orange-light)" style={{ fontFamily: "'Inter', sans-serif" }}>
<div className="text-3xl font-bold text-[var(--orange-light)]" style={{ fontFamily: "'Inter', sans-serif" }}>
{formatPrice(plan.minimum_price_cents || plan.price_cents)}
</div>
{plan.suggested_price_cents && plan.suggested_price_cents > plan.minimum_price_cents && (
<div className="text-lg text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<div className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
(Suggested: {formatPrice(plan.suggested_price_cents)})
</div>
)}
</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" }}>
{getBillingCycleLabel(plan.billing_cycle)}
</p>
{plan.custom_cycle_enabled && (
<p className="text-xs text-var(--purple-lavender) font-mono mt-1">
<p className="text-xs text-[var(--purple-lavender)] font-mono mt-1">
{formatCustomCycleDates(plan)}
</p>
)}
@@ -289,12 +289,12 @@ const AdminPlans = () => {
{/* Actions */}
{hasPermission('subscriptions.plans') && (
<div className="flex flex-col sm:flex-row gap-2 pt-4 border-t border-var(--neutral-800)">
<div className="flex flex-col sm:flex-row gap-2 pt-4 border-t border-[var(--neutral-800)]">
<Button
onClick={() => handleEditPlan(plan)}
variant="outline"
size="sm"
className="flex-1 border-var(--purple-lavender) text-var(--purple-lavender) hover:bg-var(--purple-lavender) hover:text-white rounded-full"
className="flex-1 border-[var(--purple-lavender)] text-[var(--purple-lavender)] hover:bg-[var(--purple-lavender)] hover:text-white rounded-full"
>
<Edit className="h-4 w-4 mr-1" />
Edit
@@ -314,7 +314,7 @@ const AdminPlans = () => {
{/* Warning for plans with subscribers */}
{plan.subscriber_count > 0 && (
<p className="text-xs text-var(--purple-lavender) mt-2 text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-xs text-[var(--purple-lavender)] mt-2 text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Cannot delete plan with active subscribers
</p>
)}
@@ -323,11 +323,11 @@ const AdminPlans = () => {
</div>
) : (
<div className="text-center py-20">
<CreditCard className="h-20 w-20 text-var(--neutral-800) mx-auto mb-6" />
<h3 className="text-2xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
<CreditCard className="h-20 w-20 text-[var(--neutral-800)] mx-auto mb-6" />
<h3 className="text-2xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
No Plans Found
</h3>
<p className="text-var(--purple-lavender) mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-[var(--purple-lavender)] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{searchQuery || activeFilter !== 'all'
? 'Try adjusting your filters'
: 'Create your first subscription plan to get started'}
@@ -335,7 +335,7 @@ const AdminPlans = () => {
{!searchQuery && activeFilter === 'all' && hasPermission('subscriptions.plans') && (
<Button
onClick={handleCreatePlan}
className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full px-8"
className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full px-8"
>
<Plus className="h-4 w-4 mr-2" />
Create First Plan
@@ -356,10 +356,10 @@ const AdminPlans = () => {
{deleteDialogOpen && (
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
<Card className="p-6 sm:p-8 bg-background rounded-2xl max-w-md w-full">
<h2 className="text-xl sm:text-2xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
<h2 className="text-xl sm:text-2xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Delete Plan
</h2>
<p className="text-sm sm:text-base text-var(--purple-lavender) mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-sm sm:text-base text-[var(--purple-lavender)] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Are you sure you want to delete "{planToDelete?.name}"? This action
will deactivate the plan and it won't be available for new subscriptions.
</p>