+ {/* User Search Section */}
+ {!selectedUser ? (
+
+
+
+
+ setSearchQuery(e.target.value)}
+ className="pl-10 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple"
+ />
+ {searchLoading && (
+
+ )}
+
+
+ {/* Search Results */}
+ {searchResults.length > 0 && (
+
+
+ {searchResults.map((user) => (
+
+ ))}
+
+ )}
+
+ {searchQuery && !searchLoading && searchResults.length === 0 && (
+
+ No members found matching "{searchQuery}"
+
+ )}
+
+ ) : (
+ /* Selected User Card */
+
+
+
+
+
+
+
+
+ {selectedUser.first_name} {selectedUser.last_name}
+
+
+ {selectedUser.email}
+
+
+
+
+
+ )}
+
+ {/* Payment Form - Only show when user is selected */}
+ {selectedUser && (
+ <>
+ {/* Plan Selection */}
+
+
+
+ {selectedPlan && (
+
+ {selectedPlan.description || `${selectedPlan.billing_cycle} subscription`}
+
+ )}
+
+
+ {/* Payment Amount */}
+
+
+
setFormData({ ...formData, amount: e.target.value })}
+ className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple"
+ required
+ />
+ {selectedPlan && (
+
+ Minimum: {formatPrice(selectedPlan.minimum_price_cents || selectedPlan.price_cents || 3000)}
+
+ )}
+
+
+ {/* Amount Breakdown */}
+ {breakdown && breakdown.total >= breakdown.base && (
+
+
+
+ Membership Fee:
+ {formatPrice(breakdown.base)}
+
+ {breakdown.donation > 0 && (
+
+
+
+ Additional Donation:
+
+ {formatPrice(breakdown.donation)}
+
+ )}
+
+ Total:
+ {formatPrice(breakdown.total)}
+
+
+ )}
+
+ {/* Payment Date */}
+
+
+
+
+ setFormData({ ...formData, payment_date: e.target.value })}
+ className="pl-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple"
+ required
+ />
+
+
+
+ {/* Payment Method */}
+
+
+
+
+
+ {/* Subscription Period */}
+
+
+
+
+ setUseCustomPeriod(e.target.checked)}
+ className="rounded border-[var(--neutral-800)]"
+ />
+
+
+
+ {useCustomPeriod ? (
+
+ ) : (
+ selectedPlan && (
+
+ {selectedPlan.custom_cycle_enabled ? (
+ <>
+
+ Plan uses custom billing cycle:
+
+ {(() => {
+ const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+ const startMonth = months[(selectedPlan.custom_cycle_start_month || 1) - 1];
+ const endMonth = months[(selectedPlan.custom_cycle_end_month || 12) - 1];
+ return `${startMonth} ${selectedPlan.custom_cycle_start_day} - ${endMonth} ${selectedPlan.custom_cycle_end_day} (recurring annually)`;
+ })()}
+
+
+ Subscription will end on the upcoming cycle end date based on today's date.
+
+
+ ) : (
+
+ Will use plan's billing cycle: {selectedPlan.billing_cycle}
+
+ Starts today, ends {selectedPlan.billing_cycle === 'monthly' ? '30 days' :
+ selectedPlan.billing_cycle === 'quarterly' ? '90 days' :
+ selectedPlan.billing_cycle === 'yearly' ? '1 year' :
+ selectedPlan.billing_cycle === 'lifetime' ? 'lifetime' : '1 year'} from now
+
+ )}
+
+ )
+ )}
+
+
+ {/* Notes */}
+
+
+
{
{/* Dashboard - Standalone */}
{renderNavItem(filteredNavItems.find(item => item.name === 'Dashboard'))}
+ {/* Onboarding Section */}
+ {isOpen && (
+