Compare commits
1 Commits
theme-prov
...
a1c68eedc2
| Author | SHA1 | Date | |
|---|---|---|---|
| a1c68eedc2 |
@@ -1,576 +0,0 @@
|
|||||||
import React, { useState, useEffect } from 'react';
|
|
||||||
import api from '../utils/api';
|
|
||||||
import {
|
|
||||||
Dialog,
|
|
||||||
DialogContent,
|
|
||||||
DialogDescription,
|
|
||||||
DialogFooter,
|
|
||||||
DialogHeader,
|
|
||||||
DialogTitle,
|
|
||||||
} from './ui/dialog';
|
|
||||||
import { Button } from './ui/button';
|
|
||||||
import { Input } from './ui/input';
|
|
||||||
import { Label } from './ui/label';
|
|
||||||
import { Textarea } from './ui/textarea';
|
|
||||||
import {
|
|
||||||
Select,
|
|
||||||
SelectContent,
|
|
||||||
SelectItem,
|
|
||||||
SelectTrigger,
|
|
||||||
SelectValue,
|
|
||||||
} from './ui/select';
|
|
||||||
import { Card } from './ui/card';
|
|
||||||
import { toast } from 'sonner';
|
|
||||||
import { Loader2, Repeat, Search, Calendar, Heart, X, User } from 'lucide-react';
|
|
||||||
|
|
||||||
const CreateSubscriptionDialog = ({ open, onOpenChange, onSuccess }) => {
|
|
||||||
// Search state
|
|
||||||
const [searchQuery, setSearchQuery] = useState('');
|
|
||||||
const [searchResults, setSearchResults] = useState([]);
|
|
||||||
const [selectedUser, setSelectedUser] = useState(null);
|
|
||||||
const [searchLoading, setSearchLoading] = useState(false);
|
|
||||||
const [allUsers, setAllUsers] = useState([]);
|
|
||||||
|
|
||||||
// Plan state
|
|
||||||
const [plans, setPlans] = useState([]);
|
|
||||||
const [selectedPlan, setSelectedPlan] = useState(null);
|
|
||||||
const [useCustomPeriod, setUseCustomPeriod] = useState(false);
|
|
||||||
|
|
||||||
// Form state
|
|
||||||
const [formData, setFormData] = useState({
|
|
||||||
plan_id: '',
|
|
||||||
amount: '',
|
|
||||||
payment_date: new Date().toISOString().split('T')[0],
|
|
||||||
payment_method: 'cash',
|
|
||||||
custom_period_start: new Date().toISOString().split('T')[0],
|
|
||||||
custom_period_end: '',
|
|
||||||
notes: ''
|
|
||||||
});
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
|
|
||||||
// Fetch users and plans when dialog opens
|
|
||||||
useEffect(() => {
|
|
||||||
const fetchData = async () => {
|
|
||||||
if (!open) return;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const [usersResponse, plansResponse] = await Promise.all([
|
|
||||||
api.get('/admin/users'),
|
|
||||||
api.get('/admin/subscriptions/plans')
|
|
||||||
]);
|
|
||||||
setAllUsers(usersResponse.data);
|
|
||||||
setPlans(plansResponse.data.filter(p => p.active));
|
|
||||||
} catch (error) {
|
|
||||||
toast.error('Failed to load data');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
fetchData();
|
|
||||||
}, [open]);
|
|
||||||
|
|
||||||
// Filter users based on search query
|
|
||||||
useEffect(() => {
|
|
||||||
if (!searchQuery.trim()) {
|
|
||||||
setSearchResults([]);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setSearchLoading(true);
|
|
||||||
const query = searchQuery.toLowerCase();
|
|
||||||
const filtered = allUsers.filter(user =>
|
|
||||||
user.first_name?.toLowerCase().includes(query) ||
|
|
||||||
user.last_name?.toLowerCase().includes(query) ||
|
|
||||||
user.email?.toLowerCase().includes(query)
|
|
||||||
).slice(0, 10); // Limit to 10 results
|
|
||||||
|
|
||||||
setSearchResults(filtered);
|
|
||||||
setSearchLoading(false);
|
|
||||||
}, [searchQuery, allUsers]);
|
|
||||||
|
|
||||||
// Update amount when plan changes
|
|
||||||
useEffect(() => {
|
|
||||||
if (selectedPlan && !formData.amount) {
|
|
||||||
const suggestedAmount = (selectedPlan.suggested_price_cents || selectedPlan.minimum_price_cents || selectedPlan.price_cents) / 100;
|
|
||||||
setFormData(prev => ({
|
|
||||||
...prev,
|
|
||||||
amount: suggestedAmount.toFixed(2)
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
}, [selectedPlan]);
|
|
||||||
|
|
||||||
// Calculate donation breakdown
|
|
||||||
const getAmountBreakdown = () => {
|
|
||||||
if (!selectedPlan || !formData.amount) return null;
|
|
||||||
|
|
||||||
const totalCents = Math.round(parseFloat(formData.amount) * 100);
|
|
||||||
const minimumCents = selectedPlan.minimum_price_cents || selectedPlan.price_cents || 3000;
|
|
||||||
const donationCents = Math.max(0, totalCents - minimumCents);
|
|
||||||
|
|
||||||
return {
|
|
||||||
total: totalCents,
|
|
||||||
base: minimumCents,
|
|
||||||
donation: donationCents
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
const formatPrice = (cents) => {
|
|
||||||
return `$${(cents / 100).toFixed(2)}`;
|
|
||||||
};
|
|
||||||
|
|
||||||
const breakdown = getAmountBreakdown();
|
|
||||||
|
|
||||||
const handleSelectUser = (user) => {
|
|
||||||
setSelectedUser(user);
|
|
||||||
setSearchQuery('');
|
|
||||||
setSearchResults([]);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleClearUser = () => {
|
|
||||||
setSelectedUser(null);
|
|
||||||
setFormData({
|
|
||||||
plan_id: '',
|
|
||||||
amount: '',
|
|
||||||
payment_date: new Date().toISOString().split('T')[0],
|
|
||||||
payment_method: 'cash',
|
|
||||||
custom_period_start: new Date().toISOString().split('T')[0],
|
|
||||||
custom_period_end: '',
|
|
||||||
notes: ''
|
|
||||||
});
|
|
||||||
setSelectedPlan(null);
|
|
||||||
setUseCustomPeriod(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSubmit = async (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
if (!selectedUser) {
|
|
||||||
toast.error('Please select a user');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!formData.plan_id) {
|
|
||||||
toast.error('Please select a subscription plan');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!formData.amount || parseFloat(formData.amount) <= 0) {
|
|
||||||
toast.error('Please enter a valid payment amount');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Validate minimum amount
|
|
||||||
const amountCents = Math.round(parseFloat(formData.amount) * 100);
|
|
||||||
const minimumCents = selectedPlan.minimum_price_cents || selectedPlan.price_cents || 3000;
|
|
||||||
if (amountCents < minimumCents) {
|
|
||||||
toast.error(`Amount must be at least ${formatPrice(minimumCents)}`);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (useCustomPeriod && (!formData.custom_period_start || !formData.custom_period_end)) {
|
|
||||||
toast.error('Please specify both start and end dates for custom period');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setLoading(true);
|
|
||||||
|
|
||||||
try {
|
|
||||||
const payload = {
|
|
||||||
plan_id: formData.plan_id,
|
|
||||||
amount_cents: amountCents,
|
|
||||||
payment_date: new Date(formData.payment_date).toISOString(),
|
|
||||||
payment_method: formData.payment_method,
|
|
||||||
override_plan_dates: useCustomPeriod,
|
|
||||||
notes: formData.notes || null
|
|
||||||
};
|
|
||||||
|
|
||||||
if (useCustomPeriod) {
|
|
||||||
payload.custom_period_start = new Date(formData.custom_period_start).toISOString();
|
|
||||||
payload.custom_period_end = new Date(formData.custom_period_end).toISOString();
|
|
||||||
}
|
|
||||||
|
|
||||||
await api.post(`/admin/users/${selectedUser.id}/activate-payment`, payload);
|
|
||||||
toast.success(`Subscription created for ${selectedUser.first_name} ${selectedUser.last_name}!`);
|
|
||||||
|
|
||||||
// Reset form
|
|
||||||
handleClearUser();
|
|
||||||
onOpenChange(false);
|
|
||||||
if (onSuccess) onSuccess();
|
|
||||||
} catch (error) {
|
|
||||||
const errorMessage = error.response?.data?.detail || 'Failed to create subscription';
|
|
||||||
toast.error(errorMessage);
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleClose = () => {
|
|
||||||
handleClearUser();
|
|
||||||
setSearchQuery('');
|
|
||||||
setSearchResults([]);
|
|
||||||
onOpenChange(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Dialog open={open} onOpenChange={handleClose}>
|
|
||||||
<DialogContent className="sm:max-w-[700px] rounded-2xl max-h-[90vh] overflow-y-auto scrollbar-dashboard">
|
|
||||||
<DialogHeader>
|
|
||||||
<DialogTitle className="text-2xl text-[var(--purple-ink)] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
||||||
<Repeat className="h-6 w-6" />
|
|
||||||
Create Subscription
|
|
||||||
</DialogTitle>
|
|
||||||
<DialogDescription className="text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
||||||
Search for an existing member and create a subscription with manual payment processing.
|
|
||||||
</DialogDescription>
|
|
||||||
</DialogHeader>
|
|
||||||
|
|
||||||
<form onSubmit={handleSubmit}>
|
|
||||||
<div className="grid gap-6 py-4">
|
|
||||||
{/* User Search Section */}
|
|
||||||
{!selectedUser ? (
|
|
||||||
<div className="space-y-3">
|
|
||||||
<Label className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
||||||
Search Member
|
|
||||||
</Label>
|
|
||||||
<div className="relative">
|
|
||||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-brand-purple" />
|
|
||||||
<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-brand-purple"
|
|
||||||
/>
|
|
||||||
{searchLoading && (
|
|
||||||
<Loader2 className="absolute right-3 top-1/2 transform -translate-y-1/2 h-4 w-4 animate-spin text-brand-purple" />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Search Results */}
|
|
||||||
{searchResults.length > 0 && (
|
|
||||||
<Card className="border-2 border-[var(--neutral-800)] rounded-xl overflow-hidden">
|
|
||||||
<div className="max-h-60 overflow-y-auto">
|
|
||||||
{searchResults.map((user) => (
|
|
||||||
<button
|
|
||||||
key={user.id}
|
|
||||||
type="button"
|
|
||||||
onClick={() => handleSelectUser(user)}
|
|
||||||
className="w-full p-3 text-left hover:bg-[var(--lavender-400)] transition-colors border-b border-[var(--neutral-800)] last:border-b-0"
|
|
||||||
>
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<div className="h-10 w-10 rounded-full bg-[var(--neutral-800)]/20 flex items-center justify-center">
|
|
||||||
<User className="h-5 w-5 text-brand-purple" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p className="font-medium text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
||||||
{user.first_name} {user.last_name}
|
|
||||||
</p>
|
|
||||||
<p className="text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
||||||
{user.email}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{searchQuery && !searchLoading && searchResults.length === 0 && (
|
|
||||||
<p className="text-sm text-brand-purple text-center py-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
||||||
No members found matching "{searchQuery}"
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
/* Selected User Card */
|
|
||||||
<Card className="p-4 bg-[var(--lavender-400)] border-2 border-[var(--neutral-800)] rounded-xl">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<div className="h-12 w-12 rounded-full bg-[var(--neutral-800)]/20 flex items-center justify-center">
|
|
||||||
<User className="h-6 w-6 text-brand-purple" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p className="font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
||||||
{selectedUser.first_name} {selectedUser.last_name}
|
|
||||||
</p>
|
|
||||||
<p className="text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
||||||
{selectedUser.email}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
onClick={handleClearUser}
|
|
||||||
className="text-brand-purple hover:bg-[var(--neutral-800)]/20"
|
|
||||||
>
|
|
||||||
<X className="h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Payment Form - Only show when user is selected */}
|
|
||||||
{selectedUser && (
|
|
||||||
<>
|
|
||||||
{/* Plan Selection */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="plan_id" className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
||||||
Subscription Plan
|
|
||||||
</Label>
|
|
||||||
<Select
|
|
||||||
value={formData.plan_id}
|
|
||||||
onValueChange={(value) => {
|
|
||||||
const plan = plans.find(p => p.id === value);
|
|
||||||
setSelectedPlan(plan);
|
|
||||||
const suggestedAmount = plan ? (plan.suggested_price_cents || plan.minimum_price_cents || plan.price_cents) / 100 : '';
|
|
||||||
setFormData({
|
|
||||||
...formData,
|
|
||||||
plan_id: value,
|
|
||||||
amount: suggestedAmount ? suggestedAmount.toFixed(2) : ''
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<SelectTrigger className="rounded-xl border-2 border-[var(--neutral-800)]">
|
|
||||||
<SelectValue placeholder="Select subscription plan" />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
{plans.map(plan => {
|
|
||||||
const minPrice = (plan.minimum_price_cents || plan.price_cents) / 100;
|
|
||||||
const sugPrice = plan.suggested_price_cents ? (plan.suggested_price_cents / 100) : null;
|
|
||||||
return (
|
|
||||||
<SelectItem key={plan.id} value={plan.id}>
|
|
||||||
{plan.name} - ${minPrice.toFixed(2)}{sugPrice && sugPrice > minPrice ? ` (Suggested: $${sugPrice.toFixed(2)})` : ''}/{plan.billing_cycle}
|
|
||||||
</SelectItem>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
{selectedPlan && (
|
|
||||||
<p className="text-xs text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
||||||
{selectedPlan.description || `${selectedPlan.billing_cycle} subscription`}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Payment Amount */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="amount" className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
||||||
Payment Amount ($)
|
|
||||||
</Label>
|
|
||||||
<Input
|
|
||||||
id="amount"
|
|
||||||
type="number"
|
|
||||||
step="0.01"
|
|
||||||
min="0"
|
|
||||||
placeholder="Enter amount"
|
|
||||||
value={formData.amount}
|
|
||||||
onChange={(e) => setFormData({ ...formData, amount: e.target.value })}
|
|
||||||
className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
{selectedPlan && (
|
|
||||||
<p className="text-xs text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
||||||
Minimum: {formatPrice(selectedPlan.minimum_price_cents || selectedPlan.price_cents || 3000)}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Amount Breakdown */}
|
|
||||||
{breakdown && breakdown.total >= breakdown.base && (
|
|
||||||
<Card className="p-4 bg-[var(--lavender-400)] border border-[var(--neutral-800)]">
|
|
||||||
<div className="space-y-2 text-sm" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
||||||
<div className="flex justify-between text-[var(--purple-ink)]">
|
|
||||||
<span>Membership Fee:</span>
|
|
||||||
<span className="font-semibold">{formatPrice(breakdown.base)}</span>
|
|
||||||
</div>
|
|
||||||
{breakdown.donation > 0 && (
|
|
||||||
<div className="flex justify-between text-[var(--orange-light)]">
|
|
||||||
<span className="flex items-center gap-1">
|
|
||||||
<Heart className="h-4 w-4" />
|
|
||||||
Additional Donation:
|
|
||||||
</span>
|
|
||||||
<span className="font-semibold">{formatPrice(breakdown.donation)}</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div className="flex justify-between text-[var(--purple-ink)] font-bold text-base pt-2 border-t border-[var(--neutral-800)]">
|
|
||||||
<span>Total:</span>
|
|
||||||
<span>{formatPrice(breakdown.total)}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Payment Date */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="payment_date" className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
||||||
Payment Date
|
|
||||||
</Label>
|
|
||||||
<div className="relative">
|
|
||||||
<Calendar className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-brand-purple" />
|
|
||||||
<Input
|
|
||||||
id="payment_date"
|
|
||||||
type="date"
|
|
||||||
value={formData.payment_date}
|
|
||||||
onChange={(e) => setFormData({ ...formData, payment_date: e.target.value })}
|
|
||||||
className="pl-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Payment Method */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="payment_method" className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
||||||
Payment Method
|
|
||||||
</Label>
|
|
||||||
<Select
|
|
||||||
value={formData.payment_method}
|
|
||||||
onValueChange={(value) => setFormData({ ...formData, payment_method: value })}
|
|
||||||
>
|
|
||||||
<SelectTrigger className="rounded-xl border-2 border-[var(--neutral-800)]">
|
|
||||||
<SelectValue placeholder="Select payment method" />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
<SelectItem value="cash">Cash</SelectItem>
|
|
||||||
<SelectItem value="bank_transfer">Bank Transfer</SelectItem>
|
|
||||||
<SelectItem value="check">Check</SelectItem>
|
|
||||||
<SelectItem value="other">Other</SelectItem>
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Subscription Period */}
|
|
||||||
<div className="space-y-3">
|
|
||||||
<Label className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
||||||
Subscription Period
|
|
||||||
</Label>
|
|
||||||
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
id="use_custom_period"
|
|
||||||
checked={useCustomPeriod}
|
|
||||||
onChange={(e) => setUseCustomPeriod(e.target.checked)}
|
|
||||||
className="rounded border-[var(--neutral-800)]"
|
|
||||||
/>
|
|
||||||
<Label htmlFor="use_custom_period" className="text-sm text-brand-purple font-normal cursor-pointer" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
||||||
Use custom dates instead of plan's billing cycle
|
|
||||||
</Label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{useCustomPeriod ? (
|
|
||||||
<div className="grid grid-cols-2 gap-4">
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="custom_period_start" className="text-sm text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
||||||
Start Date
|
|
||||||
</Label>
|
|
||||||
<Input
|
|
||||||
id="custom_period_start"
|
|
||||||
type="date"
|
|
||||||
value={formData.custom_period_start}
|
|
||||||
onChange={(e) => setFormData({ ...formData, custom_period_start: e.target.value })}
|
|
||||||
className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple"
|
|
||||||
required={useCustomPeriod}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="custom_period_end" className="text-sm text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
||||||
End Date
|
|
||||||
</Label>
|
|
||||||
<Input
|
|
||||||
id="custom_period_end"
|
|
||||||
type="date"
|
|
||||||
value={formData.custom_period_end}
|
|
||||||
onChange={(e) => setFormData({ ...formData, custom_period_end: e.target.value })}
|
|
||||||
className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple"
|
|
||||||
required={useCustomPeriod}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
selectedPlan && (
|
|
||||||
<div className="text-sm text-brand-purple bg-[var(--lavender-300)] p-3 rounded-lg space-y-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
||||||
{selectedPlan.custom_cycle_enabled ? (
|
|
||||||
<>
|
|
||||||
<p>
|
|
||||||
<span className="font-medium text-[var(--purple-ink)]">Plan uses custom billing cycle:</span>
|
|
||||||
<br />
|
|
||||||
{(() => {
|
|
||||||
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)`;
|
|
||||||
})()}
|
|
||||||
</p>
|
|
||||||
<p className="text-xs">
|
|
||||||
Subscription will end on the upcoming cycle end date based on today's date.
|
|
||||||
</p>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<p>
|
|
||||||
Will use plan's billing cycle: <span className="font-medium">{selectedPlan.billing_cycle}</span>
|
|
||||||
<br />
|
|
||||||
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
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Notes */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="notes" className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
||||||
Notes (Optional)
|
|
||||||
</Label>
|
|
||||||
<Textarea
|
|
||||||
id="notes"
|
|
||||||
placeholder="Additional notes about the payment..."
|
|
||||||
value={formData.notes}
|
|
||||||
onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
|
|
||||||
className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple min-h-[100px]"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<DialogFooter>
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="outline"
|
|
||||||
onClick={handleClose}
|
|
||||||
className="rounded-xl"
|
|
||||||
disabled={loading}
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
type="submit"
|
|
||||||
className="rounded-xl bg-[var(--green-light)] hover:bg-[var(--green-fern)] text-white"
|
|
||||||
disabled={loading || !selectedUser}
|
|
||||||
>
|
|
||||||
{loading ? (
|
|
||||||
<>
|
|
||||||
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
|
|
||||||
Creating...
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<Repeat className="h-4 w-4 mr-2" />
|
|
||||||
Create Subscription
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</Button>
|
|
||||||
</DialogFooter>
|
|
||||||
</form>
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default CreateSubscriptionDialog;
|
|
||||||
@@ -1,281 +0,0 @@
|
|||||||
import React, { useState, useEffect } from 'react';
|
|
||||||
import api from '../utils/api';
|
|
||||||
import {
|
|
||||||
Dialog,
|
|
||||||
DialogContent,
|
|
||||||
DialogDescription,
|
|
||||||
DialogFooter,
|
|
||||||
DialogHeader,
|
|
||||||
DialogTitle,
|
|
||||||
} from './ui/dialog';
|
|
||||||
import { Button } from './ui/button';
|
|
||||||
import { Input } from './ui/input';
|
|
||||||
import { Label } from './ui/label';
|
|
||||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
|
|
||||||
import { toast } from 'sonner';
|
|
||||||
import { Loader2, Mail, Copy, Check } from 'lucide-react';
|
|
||||||
|
|
||||||
const InviteMemberDialog = ({ open, onOpenChange, onSuccess }) => {
|
|
||||||
const [formData, setFormData] = useState({
|
|
||||||
email: '',
|
|
||||||
first_name: '',
|
|
||||||
last_name: '',
|
|
||||||
phone: '',
|
|
||||||
role: 'admin'
|
|
||||||
});
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
const [errors, setErrors] = useState({});
|
|
||||||
const [invitationUrl, setInvitationUrl] = useState(null);
|
|
||||||
const [copied, setCopied] = useState(false);
|
|
||||||
const [roles, setRoles] = useState([]);
|
|
||||||
const [loadingRoles, setLoadingRoles] = useState(false);
|
|
||||||
|
|
||||||
// Fetch roles when dialog opens
|
|
||||||
useEffect(() => {
|
|
||||||
if (open) {
|
|
||||||
fetchRoles();
|
|
||||||
}
|
|
||||||
}, [open]);
|
|
||||||
|
|
||||||
const fetchRoles = async () => {
|
|
||||||
setLoadingRoles(true);
|
|
||||||
try {
|
|
||||||
// New endpoint returns roles based on user's permission level
|
|
||||||
// Superadmin: all roles
|
|
||||||
// Admin: admin, finance, and non-elevated custom roles
|
|
||||||
const response = await api.get('/admin/roles/assignable');
|
|
||||||
setRoles(response.data);
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to fetch assignable roles:', error);
|
|
||||||
toast.error('Failed to load roles. Please try again.');
|
|
||||||
} finally {
|
|
||||||
setLoadingRoles(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleChange = (field, value) => {
|
|
||||||
setFormData(prev => ({ ...prev, [field]: value }));
|
|
||||||
// Clear error when user starts typing
|
|
||||||
if (errors[field]) {
|
|
||||||
setErrors(prev => ({ ...prev, [field]: null }));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const validate = () => {
|
|
||||||
const newErrors = {};
|
|
||||||
|
|
||||||
if (!formData.email) {
|
|
||||||
newErrors.email = 'Email is required';
|
|
||||||
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
|
|
||||||
newErrors.email = 'Invalid email format';
|
|
||||||
}
|
|
||||||
|
|
||||||
setErrors(newErrors);
|
|
||||||
return Object.keys(newErrors).length === 0;
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSubmit = async (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
if (!validate()) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setLoading(true);
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await api.post('/admin/users/invite', formData);
|
|
||||||
toast.success('Invitation sent successfully');
|
|
||||||
|
|
||||||
// Show invitation URL
|
|
||||||
setInvitationUrl(response.data.invitation_url);
|
|
||||||
|
|
||||||
// Don't close dialog yet - show invitation URL first
|
|
||||||
if (onSuccess) onSuccess();
|
|
||||||
} catch (error) {
|
|
||||||
const errorMessage = error.response?.data?.detail || 'Failed to send invitation';
|
|
||||||
toast.error(errorMessage);
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const copyToClipboard = () => {
|
|
||||||
navigator.clipboard.writeText(invitationUrl);
|
|
||||||
setCopied(true);
|
|
||||||
toast.success('Invitation link copied to clipboard');
|
|
||||||
setTimeout(() => setCopied(false), 2000);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleClose = () => {
|
|
||||||
// Reset form
|
|
||||||
setFormData({
|
|
||||||
email: '',
|
|
||||||
first_name: '',
|
|
||||||
last_name: '',
|
|
||||||
phone: '',
|
|
||||||
role: 'admin'
|
|
||||||
});
|
|
||||||
setInvitationUrl(null);
|
|
||||||
setCopied(false);
|
|
||||||
onOpenChange(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Dialog open={open} onOpenChange={handleClose}>
|
|
||||||
<DialogContent className="sm:max-w-[600px] rounded-2xl overflow-y-auto max-h-[90vh]">
|
|
||||||
<DialogHeader>
|
|
||||||
<DialogTitle className="text-2xl text-[var(--purple-ink)] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
||||||
<Mail className="h-6 w-6" />
|
|
||||||
{invitationUrl ? 'Invitation Sent' : 'Invite Member'}
|
|
||||||
</DialogTitle>
|
|
||||||
<DialogDescription className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
||||||
{invitationUrl
|
|
||||||
? 'The invitation has been sent via email. You can also copy the link below.'
|
|
||||||
: 'Send an email invitation to join as member. They will set their own password.'}
|
|
||||||
</DialogDescription>
|
|
||||||
</DialogHeader>
|
|
||||||
|
|
||||||
{invitationUrl ? (
|
|
||||||
// Show invitation URL after successful send
|
|
||||||
<div className="py-4">
|
|
||||||
<Label className="text-[var(--purple-ink)] mb-2 block">Invitation Link (expires in 7 days)</Label>
|
|
||||||
<div className="flex gap-2">
|
|
||||||
<Input
|
|
||||||
value={invitationUrl}
|
|
||||||
readOnly
|
|
||||||
className="rounded-xl border-2 border-[var(--neutral-800)] bg-gray-50"
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
onClick={copyToClipboard}
|
|
||||||
className="rounded-xl bg-brand-purple hover:bg-[var(--purple-ink)] text-white flex-shrink-0"
|
|
||||||
>
|
|
||||||
{copied ? (
|
|
||||||
<>
|
|
||||||
<Check className="h-4 w-4 mr-2" />
|
|
||||||
Copied
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<Copy className="h-4 w-4 mr-2" />
|
|
||||||
Copy
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
// Show invitation form
|
|
||||||
<form onSubmit={handleSubmit}>
|
|
||||||
<div className="grid gap-6 py-4">
|
|
||||||
{/* Email */}
|
|
||||||
<div className="grid gap-2">
|
|
||||||
<Label htmlFor="email" className="text-[var(--purple-ink)]">
|
|
||||||
Email <span className="text-red-500">*</span>
|
|
||||||
</Label>
|
|
||||||
<Input
|
|
||||||
id="email"
|
|
||||||
type="email"
|
|
||||||
value={formData.email}
|
|
||||||
onChange={(e) => handleChange('email', e.target.value)}
|
|
||||||
className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
|
|
||||||
placeholder="member@example.com"
|
|
||||||
/>
|
|
||||||
{errors.email && (
|
|
||||||
<p className="text-sm text-red-500">{errors.email}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* First Name (Optional) */}
|
|
||||||
<div className="grid gap-2">
|
|
||||||
<Label htmlFor="first_name" className="text-[var(--purple-ink)]">
|
|
||||||
First Name <span className="text-gray-400">(Optional)</span>
|
|
||||||
</Label>
|
|
||||||
<Input
|
|
||||||
id="first_name"
|
|
||||||
value={formData.first_name}
|
|
||||||
onChange={(e) => handleChange('first_name', e.target.value)}
|
|
||||||
className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
|
|
||||||
placeholder="Jane"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Last Name (Optional) */}
|
|
||||||
<div className="grid gap-2">
|
|
||||||
<Label htmlFor="last_name" className="text-[var(--purple-ink)]">
|
|
||||||
Last Name <span className="text-gray-400">(Optional)</span>
|
|
||||||
</Label>
|
|
||||||
<Input
|
|
||||||
id="last_name"
|
|
||||||
value={formData.last_name}
|
|
||||||
onChange={(e) => handleChange('last_name', e.target.value)}
|
|
||||||
className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
|
|
||||||
placeholder="Doe"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Phone (Optional) */}
|
|
||||||
<div className="grid gap-2">
|
|
||||||
<Label htmlFor="phone" className="text-[var(--purple-ink)]">
|
|
||||||
Phone <span className="text-gray-400">(Optional)</span>
|
|
||||||
</Label>
|
|
||||||
<Input
|
|
||||||
id="phone"
|
|
||||||
type="tel"
|
|
||||||
value={formData.phone}
|
|
||||||
onChange={(e) => handleChange('phone', e.target.value)}
|
|
||||||
className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
|
|
||||||
placeholder="(555) 123-4567"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<DialogFooter>
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="outline"
|
|
||||||
onClick={handleClose}
|
|
||||||
className="rounded-xl"
|
|
||||||
disabled={loading}
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
type="submit"
|
|
||||||
className="rounded-xl bg-[var(--green-light)] hover:bg-[var(--green-fern)] text-white"
|
|
||||||
disabled={loading}
|
|
||||||
>
|
|
||||||
{loading ? (
|
|
||||||
<>
|
|
||||||
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
|
|
||||||
Sending...
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<Mail className="h-4 w-4 mr-2" />
|
|
||||||
Send Invitation
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</Button>
|
|
||||||
</DialogFooter>
|
|
||||||
</form>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{invitationUrl && (
|
|
||||||
<DialogFooter>
|
|
||||||
<Button
|
|
||||||
onClick={handleClose}
|
|
||||||
className="rounded-xl bg-[var(--green-light)] hover:bg-[var(--green-fern)] text-white"
|
|
||||||
>
|
|
||||||
Done
|
|
||||||
</Button>
|
|
||||||
</DialogFooter>
|
|
||||||
)}
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default InviteMemberDialog;
|
|
||||||
@@ -6,6 +6,7 @@ const STATUS_BADGE_CONFIG = {
|
|||||||
//status-based badges
|
//status-based badges
|
||||||
pending_email: { label: 'Pending Email', variant: 'orange2' },
|
pending_email: { label: 'Pending Email', variant: 'orange2' },
|
||||||
pending_validation: { label: 'Pending Validation', variant: 'gray' },
|
pending_validation: { label: 'Pending Validation', variant: 'gray' },
|
||||||
|
pre_validated: { label: 'Pre-Validated', variant: 'green' },
|
||||||
payment_pending: { label: 'Payment Pending', variant: 'orange' },
|
payment_pending: { label: 'Payment Pending', variant: 'orange' },
|
||||||
active: { label: 'Active', variant: 'green' },
|
active: { label: 'Active', variant: 'green' },
|
||||||
inactive: { label: 'Inactive', variant: 'gray2' },
|
inactive: { label: 'Inactive', variant: 'gray2' },
|
||||||
@@ -22,12 +23,7 @@ const STATUS_BADGE_CONFIG = {
|
|||||||
admin: { label: 'Admin', variant: 'purple' },
|
admin: { label: 'Admin', variant: 'purple' },
|
||||||
moderator: { label: 'Moderator', variant: 'bg-[var(--neutral-800)] text-[var(--purple-ink)]' },
|
moderator: { label: 'Moderator', variant: 'bg-[var(--neutral-800)] text-[var(--purple-ink)]' },
|
||||||
staff: { label: 'Staff', variant: 'gray' },
|
staff: { label: 'Staff', variant: 'gray' },
|
||||||
media: { label: 'Media', variant: 'gray2' },
|
media: { label: 'Media', variant: 'gray2' }
|
||||||
|
|
||||||
//donation badges
|
|
||||||
pending: { label: 'Payment Pending', variant: 'orange' },
|
|
||||||
completed: { label: 'Completed', variant: 'green' },
|
|
||||||
failed: { label: 'Failed', className: 'bg-red-100 text-red-700' }
|
|
||||||
};
|
};
|
||||||
|
|
||||||
//todo: make shield icon dynamic based on status
|
//todo: make shield icon dynamic based on status
|
||||||
|
|||||||
@@ -1,539 +0,0 @@
|
|||||||
import React, { useEffect, useRef, useState } from 'react';
|
|
||||||
import {
|
|
||||||
Dialog,
|
|
||||||
DialogContent,
|
|
||||||
DialogDescription,
|
|
||||||
DialogFooter,
|
|
||||||
DialogHeader,
|
|
||||||
DialogTitle,
|
|
||||||
} from './ui/dialog';
|
|
||||||
import { Button } from './ui/button';
|
|
||||||
import { Card } from './ui/card';
|
|
||||||
import { Checkbox } from './ui/checkbox';
|
|
||||||
import { Input } from './ui/input';
|
|
||||||
import { Label } from './ui/label';
|
|
||||||
import { Textarea } from './ui/textarea';
|
|
||||||
import { User, Mail, Phone, Calendar, UserCheck, Clock, FileText } from 'lucide-react';
|
|
||||||
import StatusBadge from './StatusBadge';
|
|
||||||
import api from '../utils/api';
|
|
||||||
import { toast } from 'sonner';
|
|
||||||
|
|
||||||
const ViewRegistrationDialog = ({ open, onOpenChange, user }) => {
|
|
||||||
if (!user) return null;
|
|
||||||
|
|
||||||
const [formData, setFormData] = useState(null);
|
|
||||||
const [isSaving, setIsSaving] = useState(false);
|
|
||||||
const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
|
|
||||||
const autoSaveTimeoutRef = useRef(null);
|
|
||||||
const pendingSaveRef = useRef(false);
|
|
||||||
|
|
||||||
const leadSourceOptions = [
|
|
||||||
'Current member',
|
|
||||||
'Friend',
|
|
||||||
'OutSmart Magazine',
|
|
||||||
'Search engine (Google etc.)',
|
|
||||||
"I've known about LOAF for a long time",
|
|
||||||
'Other'
|
|
||||||
];
|
|
||||||
|
|
||||||
const volunteerOptions = [
|
|
||||||
'Welcoming new members at events',
|
|
||||||
'Sending out birthday cards',
|
|
||||||
'Care Team Calls',
|
|
||||||
'Sharing ideas for events',
|
|
||||||
'Researching grants',
|
|
||||||
'Applying for grants',
|
|
||||||
'Assisting with TeatherLOAFers',
|
|
||||||
'Assisting with ActiveLOAFers',
|
|
||||||
'Assisting with weekday Lunch Bunch',
|
|
||||||
'Uploading Photos to the Website',
|
|
||||||
'Assisting with eNewsletter',
|
|
||||||
'Other administrative task'
|
|
||||||
];
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!open || !user) return;
|
|
||||||
const nextFormData = {
|
|
||||||
lead_sources: Array.isArray(user.lead_sources) ? user.lead_sources : [],
|
|
||||||
partner_first_name: user.partner_first_name || '',
|
|
||||||
partner_last_name: user.partner_last_name || '',
|
|
||||||
partner_is_member: Boolean(user.partner_is_member),
|
|
||||||
partner_plan_to_become_member: Boolean(user.partner_plan_to_become_member),
|
|
||||||
newsletter_publish_name: Boolean(user.newsletter_publish_name),
|
|
||||||
newsletter_publish_photo: Boolean(user.newsletter_publish_photo),
|
|
||||||
newsletter_publish_birthday: Boolean(user.newsletter_publish_birthday),
|
|
||||||
newsletter_publish_none: Boolean(user.newsletter_publish_none),
|
|
||||||
referred_by_member_name: user.referred_by_member_name || '',
|
|
||||||
volunteer_interests: Array.isArray(user.volunteer_interests) ? user.volunteer_interests : [],
|
|
||||||
scholarship_requested: Boolean(user.scholarship_requested),
|
|
||||||
scholarship_reason: user.scholarship_reason || ''
|
|
||||||
};
|
|
||||||
setFormData(nextFormData);
|
|
||||||
setHasUnsavedChanges(false);
|
|
||||||
}, [open, user]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
return () => {
|
|
||||||
if (autoSaveTimeoutRef.current) {
|
|
||||||
clearTimeout(autoSaveTimeoutRef.current);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const formatDate = (dateString) => {
|
|
||||||
if (!dateString) return '—';
|
|
||||||
return new Date(dateString).toLocaleDateString('en-US', {
|
|
||||||
year: 'numeric',
|
|
||||||
month: 'long',
|
|
||||||
day: 'numeric',
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const formatDateTime = (dateString) => {
|
|
||||||
if (!dateString) return '—';
|
|
||||||
return new Date(dateString).toLocaleString('en-US', {
|
|
||||||
year: 'numeric',
|
|
||||||
month: 'long',
|
|
||||||
day: 'numeric',
|
|
||||||
hour: '2-digit',
|
|
||||||
minute: '2-digit',
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const formatPhoneNumber = (phone) => {
|
|
||||||
if (!phone) return '—';
|
|
||||||
const cleaned = phone.replace(/\D/g, '');
|
|
||||||
if (cleaned.length === 10) {
|
|
||||||
return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3, 6)}-${cleaned.slice(6)}`;
|
|
||||||
}
|
|
||||||
return phone;
|
|
||||||
};
|
|
||||||
|
|
||||||
const saveProfile = async (showToast = true) => {
|
|
||||||
if (!formData) return;
|
|
||||||
if (isSaving) {
|
|
||||||
pendingSaveRef.current = true;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setIsSaving(true);
|
|
||||||
try {
|
|
||||||
await api.put('/users/profile', {
|
|
||||||
lead_sources: formData.lead_sources,
|
|
||||||
partner_first_name: formData.partner_first_name,
|
|
||||||
partner_last_name: formData.partner_last_name,
|
|
||||||
partner_is_member: formData.partner_is_member,
|
|
||||||
partner_plan_to_become_member: formData.partner_plan_to_become_member,
|
|
||||||
newsletter_publish_name: formData.newsletter_publish_name,
|
|
||||||
newsletter_publish_photo: formData.newsletter_publish_photo,
|
|
||||||
newsletter_publish_birthday: formData.newsletter_publish_birthday,
|
|
||||||
newsletter_publish_none: formData.newsletter_publish_none,
|
|
||||||
referred_by_member_name: formData.referred_by_member_name,
|
|
||||||
volunteer_interests: formData.volunteer_interests,
|
|
||||||
scholarship_requested: formData.scholarship_requested,
|
|
||||||
scholarship_reason: formData.scholarship_reason
|
|
||||||
});
|
|
||||||
setHasUnsavedChanges(false);
|
|
||||||
if (showToast) {
|
|
||||||
toast.success('Registration details saved');
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
if (showToast) {
|
|
||||||
toast.error(error.response?.data?.detail || 'Failed to save registration details');
|
|
||||||
}
|
|
||||||
} finally {
|
|
||||||
setIsSaving(false);
|
|
||||||
if (pendingSaveRef.current) {
|
|
||||||
pendingSaveRef.current = false;
|
|
||||||
saveProfile(showToast);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const scheduleAutoSave = () => {
|
|
||||||
setHasUnsavedChanges(true);
|
|
||||||
if (autoSaveTimeoutRef.current) {
|
|
||||||
clearTimeout(autoSaveTimeoutRef.current);
|
|
||||||
}
|
|
||||||
autoSaveTimeoutRef.current = setTimeout(() => {
|
|
||||||
saveProfile(false);
|
|
||||||
}, 800);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleInputChange = (e) => {
|
|
||||||
const { name, value } = e.target;
|
|
||||||
setFormData(prev => {
|
|
||||||
const next = { ...prev, [name]: value };
|
|
||||||
return next;
|
|
||||||
});
|
|
||||||
scheduleAutoSave();
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleCheckboxChange = (name, checked) => {
|
|
||||||
setFormData(prev => ({ ...prev, [name]: checked }));
|
|
||||||
scheduleAutoSave();
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleLeadSourceChange = (source) => {
|
|
||||||
setFormData(prev => {
|
|
||||||
const sources = prev.lead_sources.includes(source)
|
|
||||||
? prev.lead_sources.filter((item) => item !== source)
|
|
||||||
: [...prev.lead_sources, source];
|
|
||||||
return { ...prev, lead_sources: sources };
|
|
||||||
});
|
|
||||||
scheduleAutoSave();
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleVolunteerChange = (option) => {
|
|
||||||
setFormData(prev => {
|
|
||||||
const interests = prev.volunteer_interests.includes(option)
|
|
||||||
? prev.volunteer_interests.filter((item) => item !== option)
|
|
||||||
: [...prev.volunteer_interests, option];
|
|
||||||
return { ...prev, volunteer_interests: interests };
|
|
||||||
});
|
|
||||||
scheduleAutoSave();
|
|
||||||
};
|
|
||||||
|
|
||||||
const InfoRow = ({ icon: Icon, label, value }) => (
|
|
||||||
<div className="flex items-start gap-3 py-3 border-b border-[var(--neutral-800)] last:border-b-0">
|
|
||||||
<div className="h-10 w-10 rounded-lg bg-[var(--lavender-400)] flex items-center justify-center flex-shrink-0">
|
|
||||||
<Icon className="h-5 w-5 text-brand-purple" />
|
|
||||||
</div>
|
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
<p className="text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
||||||
{label}
|
|
||||||
</p>
|
|
||||||
<p className="font-medium text-[var(--purple-ink)] break-words" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
||||||
{value || '—'}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
||||||
<DialogContent className="sm:max-w-[600px] rounded-2xl max-h-[90vh] overflow-y-auto scrollbar-dashboard">
|
|
||||||
<DialogHeader>
|
|
||||||
<DialogTitle className="text-2xl text-[var(--purple-ink)] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
||||||
<FileText className="h-6 w-6" />
|
|
||||||
Registration Details
|
|
||||||
</DialogTitle>
|
|
||||||
<DialogDescription className="text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
||||||
View the registration information for this member application.
|
|
||||||
</DialogDescription>
|
|
||||||
</DialogHeader>
|
|
||||||
|
|
||||||
<div className="py-4 space-y-4">
|
|
||||||
{/* User Header Card */}
|
|
||||||
<Card className="p-4 bg-[var(--lavender-400)] border-2 border-[var(--neutral-800)] rounded-xl">
|
|
||||||
<div className="flex items-center gap-4">
|
|
||||||
<div className="h-16 w-16 rounded-full bg-[var(--neutral-800)]/20 flex items-center justify-center">
|
|
||||||
<User className="h-8 w-8 text-brand-purple" />
|
|
||||||
</div>
|
|
||||||
<div className="flex-1">
|
|
||||||
<p className="text-xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
||||||
{user.first_name} {user.last_name}
|
|
||||||
</p>
|
|
||||||
<p className="text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
||||||
{user.email}
|
|
||||||
</p>
|
|
||||||
<div className="mt-2">
|
|
||||||
<StatusBadge status={user.status} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* Contact Information */}
|
|
||||||
<Card className="p-4 border border-[var(--neutral-800)] rounded-xl">
|
|
||||||
<h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
||||||
Contact Information
|
|
||||||
</h3>
|
|
||||||
<InfoRow icon={Mail} label="Email Address" value={user.email} />
|
|
||||||
<InfoRow icon={Phone} label="Phone Number" value={formatPhoneNumber(user.phone)} />
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* Registration Details */}
|
|
||||||
<Card className="p-4 border border-[var(--neutral-800)] rounded-xl">
|
|
||||||
<h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
||||||
Registration Details
|
|
||||||
</h3>
|
|
||||||
<InfoRow icon={Calendar} label="Registration Date" value={formatDate(user.created_at)} />
|
|
||||||
<InfoRow icon={UserCheck} label="Referred By" value={formData?.referred_by_member_name} />
|
|
||||||
<InfoRow icon={Clock} label="Email Verification Expires" value={formatDateTime(user.email_verification_expires_at)} />
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{formData && (
|
|
||||||
<>
|
|
||||||
{/* How Did You Hear About Us */}
|
|
||||||
<Card className="p-4 border border-[var(--neutral-800)] rounded-xl">
|
|
||||||
<h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
||||||
How Did You Hear About Us? *
|
|
||||||
</h3>
|
|
||||||
<div className="space-y-3">
|
|
||||||
{leadSourceOptions.map((source) => (
|
|
||||||
<div key={source} className="flex items-center space-x-2">
|
|
||||||
<Checkbox
|
|
||||||
id={`lead_${source}`}
|
|
||||||
checked={formData.lead_sources.includes(source)}
|
|
||||||
onCheckedChange={() => handleLeadSourceChange(source)}
|
|
||||||
/>
|
|
||||||
<Label htmlFor={`lead_${source}`} className="text-base cursor-pointer">
|
|
||||||
{source}
|
|
||||||
</Label>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* Partner Information */}
|
|
||||||
<Card className="p-4 border border-[var(--neutral-800)] rounded-xl">
|
|
||||||
<h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
||||||
Partner Information (Optional)
|
|
||||||
</h3>
|
|
||||||
<div className="grid md:grid-cols-2 gap-4 mb-4">
|
|
||||||
<div>
|
|
||||||
<Label htmlFor="partner_first_name">Partner First Name</Label>
|
|
||||||
<Input
|
|
||||||
id="partner_first_name"
|
|
||||||
name="partner_first_name"
|
|
||||||
value={formData.partner_first_name}
|
|
||||||
onChange={handleInputChange}
|
|
||||||
className="h-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Label htmlFor="partner_last_name">Partner Last Name</Label>
|
|
||||||
<Input
|
|
||||||
id="partner_last_name"
|
|
||||||
name="partner_last_name"
|
|
||||||
value={formData.partner_last_name}
|
|
||||||
onChange={handleInputChange}
|
|
||||||
className="h-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-3">
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<Checkbox
|
|
||||||
id="partner_is_member"
|
|
||||||
checked={formData.partner_is_member}
|
|
||||||
onCheckedChange={(checked) => handleCheckboxChange('partner_is_member', checked)}
|
|
||||||
/>
|
|
||||||
<Label htmlFor="partner_is_member" className="text-base cursor-pointer">
|
|
||||||
Is your partner already a member?
|
|
||||||
</Label>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<Checkbox
|
|
||||||
id="partner_plan_to_become_member"
|
|
||||||
checked={formData.partner_plan_to_become_member}
|
|
||||||
onCheckedChange={(checked) => handleCheckboxChange('partner_plan_to_become_member', checked)}
|
|
||||||
/>
|
|
||||||
<Label htmlFor="partner_plan_to_become_member" className="text-base cursor-pointer">
|
|
||||||
Does your partner plan to become a member?
|
|
||||||
</Label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* Newsletter Preferences */}
|
|
||||||
<Card className="p-4 border border-[var(--neutral-800)] rounded-xl">
|
|
||||||
<h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
||||||
Newsletter Publication Preferences *
|
|
||||||
</h3>
|
|
||||||
<p className="text-brand-purple mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
||||||
Please check what information may be published in LOAF Newsletter
|
|
||||||
</p>
|
|
||||||
<div className="space-y-3">
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<Checkbox
|
|
||||||
id="newsletter_publish_name"
|
|
||||||
checked={formData.newsletter_publish_name}
|
|
||||||
onCheckedChange={(checked) => handleCheckboxChange('newsletter_publish_name', checked)}
|
|
||||||
/>
|
|
||||||
<Label htmlFor="newsletter_publish_name" className="text-base cursor-pointer">
|
|
||||||
Name
|
|
||||||
</Label>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<Checkbox
|
|
||||||
id="newsletter_publish_photo"
|
|
||||||
checked={formData.newsletter_publish_photo}
|
|
||||||
onCheckedChange={(checked) => handleCheckboxChange('newsletter_publish_photo', checked)}
|
|
||||||
/>
|
|
||||||
<Label htmlFor="newsletter_publish_photo" className="text-base cursor-pointer">
|
|
||||||
Photo (added later in profile)
|
|
||||||
</Label>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<Checkbox
|
|
||||||
id="newsletter_publish_birthday"
|
|
||||||
checked={formData.newsletter_publish_birthday}
|
|
||||||
onCheckedChange={(checked) => handleCheckboxChange('newsletter_publish_birthday', checked)}
|
|
||||||
/>
|
|
||||||
<Label htmlFor="newsletter_publish_birthday" className="text-base cursor-pointer">
|
|
||||||
Birthday
|
|
||||||
</Label>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<Checkbox
|
|
||||||
id="newsletter_publish_none"
|
|
||||||
checked={formData.newsletter_publish_none}
|
|
||||||
onCheckedChange={(checked) => handleCheckboxChange('newsletter_publish_none', checked)}
|
|
||||||
/>
|
|
||||||
<Label htmlFor="newsletter_publish_none" className="text-base cursor-pointer">
|
|
||||||
Do not publish any of my information
|
|
||||||
</Label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* Referral */}
|
|
||||||
<Card className="p-4 border border-[var(--neutral-800)] rounded-xl">
|
|
||||||
<h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
||||||
Referral
|
|
||||||
</h3>
|
|
||||||
<div>
|
|
||||||
<Label htmlFor="referred_by_member_name">Name of a LOAF Member who already knows you</Label>
|
|
||||||
<Input
|
|
||||||
id="referred_by_member_name"
|
|
||||||
name="referred_by_member_name"
|
|
||||||
value={formData.referred_by_member_name}
|
|
||||||
onChange={handleInputChange}
|
|
||||||
placeholder="Enter member name or email"
|
|
||||||
className="h-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple"
|
|
||||||
/>
|
|
||||||
<p className="text-sm text-brand-purple mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
||||||
If referred by a current member, you may skip the event attendance requirement.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* Volunteer Interests */}
|
|
||||||
<Card className="p-4 border border-[var(--neutral-800)] rounded-xl">
|
|
||||||
<h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
||||||
Volunteer Interests (Optional)
|
|
||||||
</h3>
|
|
||||||
<p className="text-brand-purple mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
||||||
I may at some time be interested in volunteering with LOAF in the following ways (training is provided)
|
|
||||||
</p>
|
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
|
||||||
{volunteerOptions.map((option) => (
|
|
||||||
<div key={option} className="flex items-center space-x-2">
|
|
||||||
<Checkbox
|
|
||||||
id={`volunteer_${option}`}
|
|
||||||
checked={formData.volunteer_interests.includes(option)}
|
|
||||||
onCheckedChange={() => handleVolunteerChange(option)}
|
|
||||||
/>
|
|
||||||
<Label htmlFor={`volunteer_${option}`} className="text-base cursor-pointer">
|
|
||||||
{option}
|
|
||||||
</Label>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* Scholarship Request */}
|
|
||||||
<Card className="p-4 border border-[var(--neutral-800)] rounded-xl">
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<Checkbox
|
|
||||||
id="scholarship_requested"
|
|
||||||
checked={formData.scholarship_requested}
|
|
||||||
onCheckedChange={(checked) => handleCheckboxChange('scholarship_requested', checked)}
|
|
||||||
/>
|
|
||||||
<Label htmlFor="scholarship_requested" className="text-base cursor-pointer font-semibold">
|
|
||||||
I am requesting for scholarship
|
|
||||||
</Label>
|
|
||||||
</div>
|
|
||||||
<p className="text-sm text-brand-purple mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
||||||
Scholarship information is kept confidential
|
|
||||||
</p>
|
|
||||||
{formData.scholarship_requested && (
|
|
||||||
<div className="mt-4">
|
|
||||||
<Label htmlFor="scholarship_reason">Please explain your situation *</Label>
|
|
||||||
<Textarea
|
|
||||||
id="scholarship_reason"
|
|
||||||
name="scholarship_reason"
|
|
||||||
value={formData.scholarship_reason}
|
|
||||||
onChange={handleInputChange}
|
|
||||||
placeholder="Tell us why you're requesting a scholarship..."
|
|
||||||
rows={4}
|
|
||||||
className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</Card>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Additional Information (if available) */}
|
|
||||||
{(user.address || user.city || user.state || user.zip_code) && (
|
|
||||||
<Card className="p-4 border border-[var(--neutral-800)] rounded-xl">
|
|
||||||
<h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
||||||
Address
|
|
||||||
</h3>
|
|
||||||
<div className="text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
||||||
{user.address && <p>{user.address}</p>}
|
|
||||||
{(user.city || user.state || user.zip_code) && (
|
|
||||||
<p>
|
|
||||||
{[user.city, user.state, user.zip_code].filter(Boolean).join(', ')}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Notes (if available) */}
|
|
||||||
{user.notes && (
|
|
||||||
<Card className="p-4 border border-[var(--neutral-800)] rounded-xl">
|
|
||||||
<h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
||||||
Notes
|
|
||||||
</h3>
|
|
||||||
<p className="text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
||||||
{user.notes}
|
|
||||||
</p>
|
|
||||||
</Card>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Rejection Reason (if rejected) */}
|
|
||||||
{user.status === 'rejected' && user.rejection_reason && (
|
|
||||||
<Card className="p-4 border border-red-300 bg-red-50 dark:bg-red-500/10 rounded-xl">
|
|
||||||
<h3 className="text-lg font-semibold text-red-600 mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
||||||
Rejection Reason
|
|
||||||
</h3>
|
|
||||||
<p className="text-red-600" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
||||||
{user.rejection_reason}
|
|
||||||
</p>
|
|
||||||
</Card>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<DialogFooter>
|
|
||||||
<div className="flex-1 text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
||||||
{isSaving && 'Saving changes...'}
|
|
||||||
{!isSaving && hasUnsavedChanges && 'Unsaved changes'}
|
|
||||||
{!isSaving && !hasUnsavedChanges && 'All changes saved'}
|
|
||||||
</div>
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
onClick={() => saveProfile(true)}
|
|
||||||
disabled={!hasUnsavedChanges || isSaving}
|
|
||||||
className="rounded-xl border-2 border-[var(--neutral-800)] bg-white text-[var(--purple-ink)] hover:bg-[var(--lavender-300)]"
|
|
||||||
>
|
|
||||||
Save All
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
onClick={() => onOpenChange(false)}
|
|
||||||
className="rounded-xl bg-[var(--purple-ink)] hover:bg-[var(--purple-ink)]/90 text-white"
|
|
||||||
>
|
|
||||||
Close
|
|
||||||
</Button>
|
|
||||||
</DialogFooter>
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ViewRegistrationDialog;
|
|
||||||
@@ -1,347 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { Button } from '../ui/button';
|
|
||||||
import StatusBadge from '../StatusBadge';
|
|
||||||
import {
|
|
||||||
ChevronDown,
|
|
||||||
ChevronUp,
|
|
||||||
Edit,
|
|
||||||
XCircle,
|
|
||||||
CreditCard,
|
|
||||||
Info,
|
|
||||||
ExternalLink,
|
|
||||||
Copy
|
|
||||||
} from 'lucide-react';
|
|
||||||
|
|
||||||
const HEADER_CELLS = [
|
|
||||||
{ label: 'Member', align: 'text-left' },
|
|
||||||
{ label: 'Plan', align: 'text-left' },
|
|
||||||
{ label: 'Status', align: 'text-left' },
|
|
||||||
{ label: 'Period', align: 'text-left' },
|
|
||||||
{ label: 'Base Fee', align: 'text-right' },
|
|
||||||
{ label: 'Donation', align: 'text-right' },
|
|
||||||
{ label: 'Total', align: 'text-right' },
|
|
||||||
{ label: 'Details', align: 'text-center' },
|
|
||||||
{ label: 'Actions', align: 'text-center' }
|
|
||||||
];
|
|
||||||
|
|
||||||
const HeaderCell = ({ align, children }) => (
|
|
||||||
<th
|
|
||||||
className={`p-4 text-[var(--purple-ink)] font-semibold ${align}`}
|
|
||||||
style={{ fontFamily: "'Inter', sans-serif" }}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</th>
|
|
||||||
);
|
|
||||||
|
|
||||||
const TableCell = ({ align = 'text-left', className = '', style, children, ...props }) => (
|
|
||||||
<td
|
|
||||||
className={`p-4 ${align} ${className}`.trim()}
|
|
||||||
style={style}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</td>
|
|
||||||
);
|
|
||||||
|
|
||||||
|
|
||||||
const SubscriptionRow = ({
|
|
||||||
sub,
|
|
||||||
isExpanded,
|
|
||||||
onToggle,
|
|
||||||
onEdit,
|
|
||||||
onCancel,
|
|
||||||
hasPermission,
|
|
||||||
formatDate,
|
|
||||||
formatDateTime,
|
|
||||||
formatPrice,
|
|
||||||
copyToClipboard
|
|
||||||
}) => (
|
|
||||||
<>
|
|
||||||
<tr className="border-b border-[var(--neutral-800)] hover:bg-[var(--lavender-400)] transition-colors">
|
|
||||||
<TableCell>
|
|
||||||
<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-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
||||||
{sub.user.email}
|
|
||||||
</div>
|
|
||||||
</TableCell>
|
|
||||||
<TableCell>
|
|
||||||
<div className="text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
||||||
{sub.plan.name}
|
|
||||||
</div>
|
|
||||||
<div className="text-xs text-brand-purple ">
|
|
||||||
{sub.plan.billing_cycle}
|
|
||||||
</div>
|
|
||||||
</TableCell>
|
|
||||||
<TableCell>
|
|
||||||
<StatusBadge status={sub.status} />
|
|
||||||
</TableCell>
|
|
||||||
<TableCell>
|
|
||||||
<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-brand-purple ">to {formatDate(sub.end_date)}</div>
|
|
||||||
</div>
|
|
||||||
</TableCell>
|
|
||||||
<TableCell
|
|
||||||
align="text-right"
|
|
||||||
className="text-[var(--purple-ink)]"
|
|
||||||
style={{ fontFamily: "'Inter', sans-serif" }}
|
|
||||||
>
|
|
||||||
{formatPrice(sub.base_subscription_cents || 0)}
|
|
||||||
</TableCell>
|
|
||||||
<TableCell
|
|
||||||
align="text-right"
|
|
||||||
className="text-[var(--orange-light)]"
|
|
||||||
style={{ fontFamily: "'Inter', sans-serif" }}
|
|
||||||
>
|
|
||||||
{formatPrice(sub.donation_cents || 0)}
|
|
||||||
</TableCell>
|
|
||||||
<TableCell
|
|
||||||
align="text-right"
|
|
||||||
className="font-semibold text-[var(--purple-ink)]"
|
|
||||||
style={{ fontFamily: "'Inter', sans-serif" }}
|
|
||||||
>
|
|
||||||
{formatPrice(sub.amount_paid_cents || 0)}
|
|
||||||
</TableCell>
|
|
||||||
<TableCell>
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
variant="ghost"
|
|
||||||
onClick={onToggle}
|
|
||||||
className="text-brand-purple hover:bg-[var(--neutral-800)]"
|
|
||||||
>
|
|
||||||
{isExpanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
|
|
||||||
</Button>
|
|
||||||
</TableCell>
|
|
||||||
<TableCell>
|
|
||||||
<div className="flex items-center justify-center gap-2">
|
|
||||||
{hasPermission('subscriptions.edit') && (
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
variant="outline"
|
|
||||||
onClick={() => onEdit(sub)}
|
|
||||||
className="text-brand-purple hover:bg-[var(--neutral-800)]"
|
|
||||||
>
|
|
||||||
<Edit className="h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
{sub.status === 'active' && hasPermission('subscriptions.cancel') && (
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
variant="outline-destructive"
|
|
||||||
onClick={() => onCancel(sub.id)}
|
|
||||||
>
|
|
||||||
<XCircle className="h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</TableCell>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
{isExpanded && (
|
|
||||||
<tr className="bg-[var(--lavender-400)]/30">
|
|
||||||
<TableCell colSpan={9} className="p-6">
|
|
||||||
<div className="space-y-4">
|
|
||||||
<h4 className="font-semibold text-[var(--purple-ink)] text-lg mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
||||||
Transaction Details
|
|
||||||
</h4>
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
||||||
<div className="space-y-3">
|
|
||||||
<h5 className="font-medium text-[var(--purple-ink)] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
||||||
<CreditCard className="h-4 w-4" />
|
|
||||||
Payment Information
|
|
||||||
</h5>
|
|
||||||
<div className="space-y-2 text-sm">
|
|
||||||
{sub.payment_completed_at && (
|
|
||||||
<div className="flex justify-between">
|
|
||||||
<span className="text-brand-purple ">Payment Date:</span>
|
|
||||||
<span className="text-[var(--purple-ink)] font-medium">{formatDateTime(sub.payment_completed_at)}</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{sub.payment_method && (
|
|
||||||
<div className="flex justify-between">
|
|
||||||
<span className="text-brand-purple ">Payment Method:</span>
|
|
||||||
<span className="text-[var(--purple-ink)] font-medium capitalize">{sub.payment_method}</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{sub.card_brand && sub.card_last4 && (
|
|
||||||
<div className="flex justify-between">
|
|
||||||
<span className="text-brand-purple ">Card:</span>
|
|
||||||
<span className="text-[var(--purple-ink)] font-medium">{sub.card_brand} ****{sub.card_last4}</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-3">
|
|
||||||
<h5 className="font-medium text-[var(--purple-ink)] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
||||||
<Info className="h-4 w-4" />
|
|
||||||
Stripe Transaction IDs
|
|
||||||
</h5>
|
|
||||||
<div className="space-y-2 text-sm">
|
|
||||||
{sub.stripe_payment_intent_id && (
|
|
||||||
<div className="flex items-center justify-between gap-2">
|
|
||||||
<span className="text-brand-purple ">Payment Intent:</span>
|
|
||||||
<div className="flex items-center gap-1">
|
|
||||||
<code className="text-xs bg-[var(--neutral-800)]/30 px-2 py-1 rounded text-[var(--purple-ink)]">
|
|
||||||
{sub.stripe_payment_intent_id.substring(0, 20)}...
|
|
||||||
</code>
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
variant="ghost"
|
|
||||||
onClick={() => copyToClipboard(sub.stripe_payment_intent_id, 'Payment Intent ID')}
|
|
||||||
>
|
|
||||||
<Copy className="h-3 w-3" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{sub.stripe_charge_id && (
|
|
||||||
<div className="flex items-center justify-between gap-2">
|
|
||||||
<span className="text-brand-purple ">Charge ID:</span>
|
|
||||||
<div className="flex items-center gap-1">
|
|
||||||
<code className="text-xs bg-[var(--neutral-800)]/30 px-2 py-1 rounded text-[var(--purple-ink)]">
|
|
||||||
{sub.stripe_charge_id.substring(0, 20)}...
|
|
||||||
</code>
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
variant="ghost"
|
|
||||||
onClick={() => copyToClipboard(sub.stripe_charge_id, 'Charge ID')}
|
|
||||||
>
|
|
||||||
<Copy className="h-3 w-3" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{sub.stripe_subscription_id && (
|
|
||||||
<div className="flex items-center justify-between gap-2">
|
|
||||||
<span className="text-brand-purple ">Subscription ID:</span>
|
|
||||||
<div className="flex items-center gap-1">
|
|
||||||
<code className="text-xs bg-[var(--neutral-800)]/30 px-2 py-1 rounded text-[var(--purple-ink)]">
|
|
||||||
{sub.stripe_subscription_id.substring(0, 20)}...
|
|
||||||
</code>
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
variant="ghost"
|
|
||||||
onClick={() => copyToClipboard(sub.stripe_subscription_id, 'Subscription ID')}
|
|
||||||
>
|
|
||||||
<Copy className="h-3 w-3" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{sub.stripe_invoice_id && (
|
|
||||||
<div className="flex items-center justify-between gap-2">
|
|
||||||
<span className="text-brand-purple ">Invoice ID:</span>
|
|
||||||
<div className="flex items-center gap-1">
|
|
||||||
<code className="text-xs bg-[var(--neutral-800)]/30 px-2 py-1 rounded text-[var(--purple-ink)]">
|
|
||||||
{sub.stripe_invoice_id.substring(0, 20)}...
|
|
||||||
</code>
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
variant="ghost"
|
|
||||||
onClick={() => copyToClipboard(sub.stripe_invoice_id, 'Invoice ID')}
|
|
||||||
>
|
|
||||||
<Copy className="h-3 w-3" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{sub.stripe_customer_id && (
|
|
||||||
<div className="flex items-center justify-between gap-2">
|
|
||||||
<span className="text-brand-purple ">Customer ID:</span>
|
|
||||||
<div className="flex items-center gap-1">
|
|
||||||
<code className="text-xs bg-[var(--neutral-800)]/30 px-2 py-1 rounded text-[var(--purple-ink)]">
|
|
||||||
{sub.stripe_customer_id.substring(0, 20)}...
|
|
||||||
</code>
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
variant="ghost"
|
|
||||||
onClick={() => copyToClipboard(sub.stripe_customer_id, 'Customer ID')}
|
|
||||||
>
|
|
||||||
<Copy className="h-3 w-3" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{sub.stripe_receipt_url && (
|
|
||||||
<div className="flex items-center justify-between gap-2">
|
|
||||||
<span className="text-brand-purple ">Receipt:</span>
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
variant="outline"
|
|
||||||
onClick={() => window.open(sub.stripe_receipt_url, '_blank')}
|
|
||||||
className="text-brand-purple hover:bg-[var(--neutral-800)]"
|
|
||||||
>
|
|
||||||
<ExternalLink className="h-3 w-3 mr-1" />
|
|
||||||
View Receipt
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</TableCell>
|
|
||||||
</tr>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
|
|
||||||
const SubscriptionsTable = ({
|
|
||||||
subscriptions,
|
|
||||||
expandedRows,
|
|
||||||
onToggleRowExpansion,
|
|
||||||
onEdit,
|
|
||||||
onCancel,
|
|
||||||
hasPermission,
|
|
||||||
formatDate,
|
|
||||||
formatDateTime,
|
|
||||||
formatPrice,
|
|
||||||
copyToClipboard
|
|
||||||
}) => (
|
|
||||||
<table className="w-full">
|
|
||||||
<thead>
|
|
||||||
<tr className="bg-[var(--neutral-800)]/20 border-b border-[var(--neutral-800)]">
|
|
||||||
{HEADER_CELLS.map((cell) => (
|
|
||||||
<HeaderCell key={cell.label} align={cell.align}>
|
|
||||||
{cell.label}
|
|
||||||
</HeaderCell>
|
|
||||||
))}
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{subscriptions.length > 0 ? (
|
|
||||||
subscriptions.map((sub) => (
|
|
||||||
<SubscriptionRow
|
|
||||||
key={sub.id}
|
|
||||||
sub={sub}
|
|
||||||
isExpanded={expandedRows.has(sub.id)}
|
|
||||||
onToggle={() => onToggleRowExpansion(sub.id)}
|
|
||||||
onEdit={onEdit}
|
|
||||||
onCancel={onCancel}
|
|
||||||
hasPermission={hasPermission}
|
|
||||||
formatDate={formatDate}
|
|
||||||
formatDateTime={formatDateTime}
|
|
||||||
formatPrice={formatPrice}
|
|
||||||
copyToClipboard={copyToClipboard}
|
|
||||||
/>
|
|
||||||
))
|
|
||||||
) : (
|
|
||||||
<tr>
|
|
||||||
<TableCell
|
|
||||||
align="text-center"
|
|
||||||
className="p-12 text-brand-purple "
|
|
||||||
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
|
||||||
colSpan={9}
|
|
||||||
>
|
|
||||||
No subscriptions found
|
|
||||||
</TableCell>
|
|
||||||
</tr>
|
|
||||||
)}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
);
|
|
||||||
|
|
||||||
export default SubscriptionsTable;
|
|
||||||
@@ -83,16 +83,16 @@ const SelectItem = React.forwardRef(({ className, children, ...props }, ref) =>
|
|||||||
<SelectPrimitive.Item
|
<SelectPrimitive.Item
|
||||||
ref={ref}
|
ref={ref}
|
||||||
className={cn(
|
className={cn(
|
||||||
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:text-white focus:text-white",
|
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
{...props}>
|
{...props}>
|
||||||
<span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center ">
|
<span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||||
<SelectPrimitive.ItemIndicator>
|
<SelectPrimitive.ItemIndicator>
|
||||||
<Check className="h-4 w-4" />
|
<Check className="h-4 w-4" />
|
||||||
</SelectPrimitive.ItemIndicator>
|
</SelectPrimitive.ItemIndicator>
|
||||||
</span>
|
</span>
|
||||||
<SelectPrimitive.ItemText className="">{children}</SelectPrimitive.ItemText>
|
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
|
||||||
</SelectPrimitive.Item>
|
</SelectPrimitive.Item>
|
||||||
))
|
))
|
||||||
SelectItem.displayName = SelectPrimitive.Item.displayName
|
SelectItem.displayName = SelectPrimitive.Item.displayName
|
||||||
|
|||||||
@@ -1,91 +1,78 @@
|
|||||||
import * as React from "react";
|
import * as React from "react"
|
||||||
|
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
const Table = React.forwardRef(({ className, ...props }, ref) => (
|
const Table = React.forwardRef(({ className, ...props }, ref) => (
|
||||||
<div className="relative w-full overflow-auto">
|
<div className="relative w-full overflow-auto">
|
||||||
<table ref={ref} className={cn("w-full", className)} {...props} />
|
<table
|
||||||
|
ref={ref}
|
||||||
|
className={cn("w-full caption-bottom text-sm", className)}
|
||||||
|
{...props} />
|
||||||
</div>
|
</div>
|
||||||
));
|
))
|
||||||
Table.displayName = "Table";
|
Table.displayName = "Table"
|
||||||
|
|
||||||
const TableHeader = React.forwardRef(({ className, ...props }, ref) => (
|
const TableHeader = React.forwardRef(({ className, ...props }, ref) => (
|
||||||
<thead
|
<thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
|
||||||
ref={ref}
|
))
|
||||||
className={cn(
|
TableHeader.displayName = "TableHeader"
|
||||||
"bg-[var(--lavender-300)] border-b border-[var(--neutral-800)]",
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
));
|
|
||||||
TableHeader.displayName = "TableHeader";
|
|
||||||
|
|
||||||
const TableBody = React.forwardRef(({ className, ...props }, ref) => (
|
const TableBody = React.forwardRef(({ className, ...props }, ref) => (
|
||||||
<tbody
|
<tbody
|
||||||
ref={ref}
|
ref={ref}
|
||||||
className={cn("[&_tr:last-child]:border-0", className)}
|
className={cn("[&_tr:last-child]:border-0", className)}
|
||||||
{...props}
|
{...props} />
|
||||||
/>
|
))
|
||||||
));
|
TableBody.displayName = "TableBody"
|
||||||
TableBody.displayName = "TableBody";
|
|
||||||
|
|
||||||
const TableFooter = React.forwardRef(({ className, ...props }, ref) => (
|
const TableFooter = React.forwardRef(({ className, ...props }, ref) => (
|
||||||
<tfoot
|
<tfoot
|
||||||
ref={ref}
|
ref={ref}
|
||||||
className={cn(
|
className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)}
|
||||||
"border-t border-[var(--neutral-800)] font-medium [&>tr]:last:border-b-0",
|
{...props} />
|
||||||
className,
|
))
|
||||||
)}
|
TableFooter.displayName = "TableFooter"
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
));
|
|
||||||
TableFooter.displayName = "TableFooter";
|
|
||||||
|
|
||||||
const TableRow = React.forwardRef(({ className, ...props }, ref) => (
|
const TableRow = React.forwardRef(({ className, ...props }, ref) => (
|
||||||
<tr
|
<tr
|
||||||
ref={ref}
|
ref={ref}
|
||||||
className={cn(
|
className={cn(
|
||||||
"border-b border-[var(--neutral-800)] transition-colors hover:bg-[var(--lavender-400)]",
|
"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
|
||||||
className,
|
className
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props} />
|
||||||
/>
|
))
|
||||||
));
|
TableRow.displayName = "TableRow"
|
||||||
TableRow.displayName = "TableRow";
|
|
||||||
|
|
||||||
const TableHead = React.forwardRef(({ className, ...props }, ref) => (
|
const TableHead = React.forwardRef(({ className, ...props }, ref) => (
|
||||||
<th
|
<th
|
||||||
ref={ref}
|
ref={ref}
|
||||||
className={cn(
|
className={cn(
|
||||||
"p-4 text-left align-middle font-semibold text-[var(--purple-ink)] [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
|
"h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
|
||||||
className,
|
className
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props} />
|
||||||
/>
|
))
|
||||||
));
|
TableHead.displayName = "TableHead"
|
||||||
TableHead.displayName = "TableHead";
|
|
||||||
|
|
||||||
const TableCell = React.forwardRef(({ className, ...props }, ref) => (
|
const TableCell = React.forwardRef(({ className, ...props }, ref) => (
|
||||||
<td
|
<td
|
||||||
ref={ref}
|
ref={ref}
|
||||||
className={cn(
|
className={cn(
|
||||||
"p-4 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] ",
|
"p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
|
||||||
className,
|
className
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props} />
|
||||||
/>
|
))
|
||||||
));
|
TableCell.displayName = "TableCell"
|
||||||
TableCell.displayName = "TableCell";
|
|
||||||
|
|
||||||
const TableCaption = React.forwardRef(({ className, ...props }, ref) => (
|
const TableCaption = React.forwardRef(({ className, ...props }, ref) => (
|
||||||
<caption
|
<caption
|
||||||
ref={ref}
|
ref={ref}
|
||||||
className={cn("mt-4 text-sm text-muted-foreground", className)}
|
className={cn("mt-4 text-sm text-muted-foreground", className)}
|
||||||
{...props}
|
{...props} />
|
||||||
/>
|
))
|
||||||
));
|
TableCaption.displayName = "TableCaption"
|
||||||
TableCaption.displayName = "TableCaption";
|
|
||||||
|
|
||||||
export {
|
export {
|
||||||
Table,
|
Table,
|
||||||
@@ -96,4 +83,4 @@ export {
|
|||||||
TableRow,
|
TableRow,
|
||||||
TableCell,
|
TableCell,
|
||||||
TableCaption,
|
TableCaption,
|
||||||
};
|
}
|
||||||
|
|||||||
1041
src/pages/Profile.js
1041
src/pages/Profile.js
File diff suppressed because it is too large
Load Diff
@@ -3,7 +3,6 @@ import { useAuth } from '../../context/AuthContext';
|
|||||||
import { Card } from '../../components/ui/card';
|
import { Card } from '../../components/ui/card';
|
||||||
import { Button } from '../../components/ui/button';
|
import { Button } from '../../components/ui/button';
|
||||||
import { Input } from '../../components/ui/input';
|
import { Input } from '../../components/ui/input';
|
||||||
import StatusBadge from '@/components/StatusBadge';
|
|
||||||
import {
|
import {
|
||||||
Select,
|
Select,
|
||||||
SelectContent,
|
SelectContent,
|
||||||
@@ -18,14 +17,6 @@ import {
|
|||||||
DropdownMenuTrigger,
|
DropdownMenuTrigger,
|
||||||
} from '../../components/ui/dropdown-menu';
|
} from '../../components/ui/dropdown-menu';
|
||||||
import { Badge } from '../../components/ui/badge';
|
import { Badge } from '../../components/ui/badge';
|
||||||
import {
|
|
||||||
Table,
|
|
||||||
TableBody,
|
|
||||||
TableCell,
|
|
||||||
TableHead,
|
|
||||||
TableHeader,
|
|
||||||
TableRow,
|
|
||||||
} from '../../components/ui/table';
|
|
||||||
import api from '../../utils/api';
|
import api from '../../utils/api';
|
||||||
import { toast } from 'sonner';
|
import { toast } from 'sonner';
|
||||||
import {
|
import {
|
||||||
@@ -193,8 +184,15 @@ const AdminDonations = () => {
|
|||||||
toast.error('Failed to copy to clipboard');
|
toast.error('Failed to copy to clipboard');
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
/*
|
|
||||||
*/
|
const getStatusBadgeVariant = (status) => {
|
||||||
|
const variants = {
|
||||||
|
completed: 'default',
|
||||||
|
pending: 'secondary',
|
||||||
|
failed: 'destructive'
|
||||||
|
};
|
||||||
|
return variants[status] || 'outline';
|
||||||
|
};
|
||||||
|
|
||||||
const getTypeBadgeColor = (type) => {
|
const getTypeBadgeColor = (type) => {
|
||||||
return type === 'member' ? 'bg-[var(--green-light)]' : 'bg-brand-purple ';
|
return type === 'member' ? 'bg-[var(--green-light)]' : 'bg-brand-purple ';
|
||||||
@@ -394,37 +392,51 @@ const AdminDonations = () => {
|
|||||||
{/* Donations Table */}
|
{/* Donations 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">
|
||||||
<div className="overflow-x-auto">
|
<div className="overflow-x-auto">
|
||||||
<Table>
|
<table className="w-full">
|
||||||
<TableHeader>
|
<thead className="bg-[var(--lavender-300)] border-b-2 border-[var(--neutral-800)]">
|
||||||
<TableRow>
|
<tr>
|
||||||
<TableHead>Donor</TableHead>
|
<th className="px-6 py-4 text-left text-sm font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||||
<TableHead>Type</TableHead>
|
Donor
|
||||||
<TableHead>Amount</TableHead>
|
</th>
|
||||||
<TableHead>Status</TableHead>
|
<th className="px-6 py-4 text-left text-sm font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||||
<TableHead>Date</TableHead>
|
Type
|
||||||
<TableHead>Payment Method</TableHead>
|
</th>
|
||||||
<TableHead className="text-center">Details</TableHead>
|
<th className="px-6 py-4 text-left text-sm font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||||
</TableRow>
|
Amount
|
||||||
</TableHeader>
|
</th>
|
||||||
<TableBody>
|
<th className="px-6 py-4 text-left text-sm font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||||
|
Status
|
||||||
|
</th>
|
||||||
|
<th className="px-6 py-4 text-left text-sm font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||||
|
Date
|
||||||
|
</th>
|
||||||
|
<th className="px-6 py-4 text-left text-sm font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||||
|
Payment Method
|
||||||
|
</th>
|
||||||
|
<th className="px-6 py-4 text-center text-sm font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||||
|
Details
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody className="divide-y divide-[var(--neutral-800)]">
|
||||||
{filteredDonations.length === 0 ? (
|
{filteredDonations.length === 0 ? (
|
||||||
<TableRow>
|
<tr>
|
||||||
<TableCell colSpan={7} className="p-12 text-center">
|
<td colSpan="7" className="px-6 py-12 text-center">
|
||||||
<div className="flex flex-col items-center gap-3">
|
<div className="flex flex-col items-center gap-3">
|
||||||
<Heart className="h-12 w-12 text-[var(--neutral-800)]" />
|
<Heart className="h-12 w-12 text-[var(--neutral-800)]" />
|
||||||
<p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
<p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||||
{donations.length === 0 ? 'No donations yet' : 'No donations match your filters'}
|
{donations.length === 0 ? 'No donations yet' : 'No donations match your filters'}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</TableCell>
|
</td>
|
||||||
</TableRow>
|
</tr>
|
||||||
) : (
|
) : (
|
||||||
filteredDonations.map((donation) => {
|
filteredDonations.map((donation) => {
|
||||||
const isExpanded = expandedRows.has(donation.id);
|
const isExpanded = expandedRows.has(donation.id);
|
||||||
return (
|
return (
|
||||||
<React.Fragment key={donation.id}>
|
<React.Fragment key={donation.id}>
|
||||||
<TableRow>
|
<tr className="hover:bg-[var(--lavender-400)] transition-colors">
|
||||||
<TableCell>
|
<td className="px-6 py-4">
|
||||||
<div>
|
<div>
|
||||||
<p className="font-medium text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
<p className="font-medium text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||||
{donation.donor_name || 'Anonymous'}
|
{donation.donor_name || 'Anonymous'}
|
||||||
@@ -433,37 +445,39 @@ const AdminDonations = () => {
|
|||||||
{donation.donor_email || 'No email'}
|
{donation.donor_email || 'No email'}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</TableCell>
|
</td>
|
||||||
<TableCell>
|
<td className="px-6 py-4">
|
||||||
<Badge
|
<Badge
|
||||||
className={`${getTypeBadgeColor(donation.donation_type)} text-white border-none px-3 py-1`}
|
className={`${getTypeBadgeColor(donation.donation_type)} text-white border-none rounded-full px-3 py-1`}
|
||||||
style={{ fontFamily: "'Inter', sans-serif" }}
|
style={{ fontFamily: "'Inter', sans-serif" }}
|
||||||
>
|
>
|
||||||
{donation.donation_type === 'member' ? 'Member' : 'Public'}
|
{donation.donation_type === 'member' ? 'Member' : 'Public'}
|
||||||
</Badge>
|
</Badge>
|
||||||
</TableCell>
|
</td>
|
||||||
<TableCell>
|
<td className="px-6 py-4">
|
||||||
<p className="font-semibold text-[var(--purple-ink)] text-lg" style={{ fontFamily: "'Inter', sans-serif" }}>
|
<p className="font-semibold text-[var(--purple-ink)] text-lg" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||||
{donation.amount}
|
{donation.amount}
|
||||||
</p>
|
</p>
|
||||||
</TableCell>
|
</td>
|
||||||
<TableCell>
|
<td className="px-6 py-4">
|
||||||
<StatusBadge status={donation.status} />
|
<Badge variant={getStatusBadgeVariant(donation.status)} className="rounded-full">
|
||||||
</TableCell>
|
{donation.status.charAt(0).toUpperCase() + donation.status.slice(1)}
|
||||||
<TableCell>
|
</Badge>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4">
|
||||||
<div className="flex items-center gap-2 text-brand-purple ">
|
<div className="flex items-center gap-2 text-brand-purple ">
|
||||||
<Calendar className="h-4 w-4" />
|
<Calendar className="h-4 w-4" />
|
||||||
<span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
<span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||||
{formatDate(donation.created_at)}
|
{formatDate(donation.created_at)}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</TableCell>
|
</td>
|
||||||
<TableCell>
|
<td className="px-6 py-4">
|
||||||
<p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif capitalize" }}>
|
<p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||||
{donation.payment_method || 'N/A'}
|
{donation.payment_method || 'N/A'}
|
||||||
</p>
|
</p>
|
||||||
</TableCell>
|
</td>
|
||||||
<TableCell className="text-center">
|
<td className="px-6 py-4 text-center">
|
||||||
<Button
|
<Button
|
||||||
size="sm"
|
size="sm"
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
@@ -472,11 +486,12 @@ const AdminDonations = () => {
|
|||||||
>
|
>
|
||||||
{isExpanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
|
{isExpanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
|
||||||
</Button>
|
</Button>
|
||||||
</TableCell>
|
</td>
|
||||||
</TableRow>
|
</tr>
|
||||||
|
{/* Expandable Details Row */}
|
||||||
{isExpanded && (
|
{isExpanded && (
|
||||||
<TableRow className="bg-[var(--lavender-400)]/30">
|
<tr className="bg-[var(--lavender-400)]/30">
|
||||||
<TableCell colSpan={7} className="p-6">
|
<td colSpan="7" className="px-6 py-6">
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<h4 className="font-semibold text-[var(--purple-ink)] text-lg mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
|
<h4 className="font-semibold text-[var(--purple-ink)] text-lg mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||||
Transaction Details
|
Transaction Details
|
||||||
@@ -586,15 +601,15 @@ const AdminDonations = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</TableCell>
|
</td>
|
||||||
</TableRow>
|
</tr>
|
||||||
)}
|
)}
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
);
|
);
|
||||||
})
|
})
|
||||||
)}
|
)}
|
||||||
</TableBody>
|
</tbody>
|
||||||
</Table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
|
|||||||
@@ -17,7 +17,7 @@ import { Users, Search, User, CreditCard, Eye, CheckCircle, Calendar, AlertCircl
|
|||||||
import PaymentActivationDialog from '../../components/PaymentActivationDialog';
|
import PaymentActivationDialog from '../../components/PaymentActivationDialog';
|
||||||
import ConfirmationDialog from '../../components/ConfirmationDialog';
|
import ConfirmationDialog from '../../components/ConfirmationDialog';
|
||||||
import CreateMemberDialog from '../../components/CreateMemberDialog';
|
import CreateMemberDialog from '../../components/CreateMemberDialog';
|
||||||
import InviteMemberDialog from '../../components/InviteMemberDialog';
|
import InviteStaffDialog from '../../components/InviteStaffDialog';
|
||||||
import WordPressImportWizard from '../../components/WordPressImportWizard';
|
import WordPressImportWizard from '../../components/WordPressImportWizard';
|
||||||
import StatusBadge from '../../components/StatusBadge';
|
import StatusBadge from '../../components/StatusBadge';
|
||||||
import { StatCard } from '@/components/StatCard';
|
import { StatCard } from '@/components/StatCard';
|
||||||
@@ -323,9 +323,11 @@ const AdminMembers = () => {
|
|||||||
<SelectItem value="active">Active</SelectItem>
|
<SelectItem value="active">Active</SelectItem>
|
||||||
<SelectItem value="payment_pending">Payment Pending</SelectItem>
|
<SelectItem value="payment_pending">Payment Pending</SelectItem>
|
||||||
<SelectItem value="pending_validation">Pending Validation</SelectItem>
|
<SelectItem value="pending_validation">Pending Validation</SelectItem>
|
||||||
|
<SelectItem value="pre_validated">Pre-Validated</SelectItem>
|
||||||
<SelectItem value="inactive">Inactive</SelectItem>
|
<SelectItem value="inactive">Inactive</SelectItem>
|
||||||
<SelectItem value="canceled">Canceled</SelectItem>
|
<SelectItem value="canceled">Canceled</SelectItem>
|
||||||
<SelectItem value="expired">Expired</SelectItem>
|
<SelectItem value="expired">Expired</SelectItem>
|
||||||
|
<SelectItem value="abandoned">Abandoned</SelectItem>
|
||||||
</SelectContent>
|
</SelectContent>
|
||||||
</Select>
|
</Select>
|
||||||
</div>
|
</div>
|
||||||
@@ -521,7 +523,7 @@ const AdminMembers = () => {
|
|||||||
onSuccess={refetch}
|
onSuccess={refetch}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<InviteMemberDialog
|
<InviteStaffDialog
|
||||||
open={inviteDialogOpen}
|
open={inviteDialogOpen}
|
||||||
onOpenChange={setInviteDialogOpen}
|
onOpenChange={setInviteDialogOpen}
|
||||||
onSuccess={refetch}
|
onSuccess={refetch}
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
|
|||||||
import { useAuth } from '../../context/AuthContext';
|
import { useAuth } from '../../context/AuthContext';
|
||||||
import api from '../../utils/api';
|
import api from '../../utils/api';
|
||||||
import { Card } from '../../components/ui/card';
|
import { Card } from '../../components/ui/card';
|
||||||
|
import { Button } from '../../components/ui/button';
|
||||||
import { Input } from '../../components/ui/input';
|
import { Input } from '../../components/ui/input';
|
||||||
import {
|
import {
|
||||||
Select,
|
Select,
|
||||||
@@ -18,12 +19,6 @@ import {
|
|||||||
TableRow,
|
TableRow,
|
||||||
TableCell,
|
TableCell,
|
||||||
} from '../../components/ui/table';
|
} from '../../components/ui/table';
|
||||||
import {
|
|
||||||
Tooltip,
|
|
||||||
TooltipContent,
|
|
||||||
TooltipProvider,
|
|
||||||
TooltipTrigger,
|
|
||||||
} from '../../components/ui/tooltip';
|
|
||||||
import {
|
import {
|
||||||
Pagination,
|
Pagination,
|
||||||
PaginationContent,
|
PaginationContent,
|
||||||
@@ -34,14 +29,12 @@ import {
|
|||||||
PaginationEllipsis,
|
PaginationEllipsis,
|
||||||
} from '../../components/ui/pagination';
|
} from '../../components/ui/pagination';
|
||||||
import { toast } from 'sonner';
|
import { toast } from 'sonner';
|
||||||
import { CheckCircle, Clock, Search, ArrowUp, ArrowDown, X, FileText, XCircle } from 'lucide-react';
|
import { CheckCircle, Clock, Search, ArrowUp, ArrowDown, X, XCircle } from 'lucide-react';
|
||||||
import PaymentActivationDialog from '../../components/PaymentActivationDialog';
|
import PaymentActivationDialog from '../../components/PaymentActivationDialog';
|
||||||
import ConfirmationDialog from '../../components/ConfirmationDialog';
|
import ConfirmationDialog from '../../components/ConfirmationDialog';
|
||||||
import RejectionDialog from '../../components/RejectionDialog';
|
import RejectionDialog from '../../components/RejectionDialog';
|
||||||
import StatusBadge from '@/components/StatusBadge';
|
import StatusBadge from '@/components/StatusBadge';
|
||||||
import { StatCard } from '@/components/StatCard';
|
import { StatCard } from '@/components/StatCard';
|
||||||
import { Button } from '@/components/ui/button';
|
|
||||||
import ViewRegistrationDialog from '@/components/ViewRegistrationDialog';
|
|
||||||
|
|
||||||
const AdminValidations = () => {
|
const AdminValidations = () => {
|
||||||
const { hasPermission } = useAuth();
|
const { hasPermission } = useAuth();
|
||||||
@@ -55,8 +48,6 @@ const AdminValidations = () => {
|
|||||||
const [pendingAction, setPendingAction] = useState(null);
|
const [pendingAction, setPendingAction] = useState(null);
|
||||||
const [rejectionDialogOpen, setRejectionDialogOpen] = useState(false);
|
const [rejectionDialogOpen, setRejectionDialogOpen] = useState(false);
|
||||||
const [userToReject, setUserToReject] = useState(null);
|
const [userToReject, setUserToReject] = useState(null);
|
||||||
const [viewRegistrationDialogOpen, setViewRegistrationDialogOpen] = useState(false);
|
|
||||||
const [selectedUserForView, setSelectedUserForView] = useState(null);
|
|
||||||
|
|
||||||
// Filtering state
|
// Filtering state
|
||||||
const [searchQuery, setSearchQuery] = useState('');
|
const [searchQuery, setSearchQuery] = useState('');
|
||||||
@@ -70,9 +61,6 @@ const AdminValidations = () => {
|
|||||||
const [sortBy, setSortBy] = useState('created_at');
|
const [sortBy, setSortBy] = useState('created_at');
|
||||||
const [sortOrder, setSortOrder] = useState('desc');
|
const [sortOrder, setSortOrder] = useState('desc');
|
||||||
|
|
||||||
// Resend email state
|
|
||||||
const [resendLoading, setResendLoading] = useState(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
fetchPendingUsers();
|
fetchPendingUsers();
|
||||||
}, []);
|
}, []);
|
||||||
@@ -248,24 +236,6 @@ const AdminValidations = () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleRegistrationDialog = (user) => {
|
|
||||||
setSelectedUserForView(user);
|
|
||||||
setViewRegistrationDialogOpen(true);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Resend Email Handler
|
|
||||||
const handleResendVerification = async (user) => {
|
|
||||||
setResendLoading(user.id);
|
|
||||||
try {
|
|
||||||
await api.post(`/admin/users/${user.id}/resend-verification`);
|
|
||||||
toast.success(`Verification email sent to ${user.email}`);
|
|
||||||
fetchPendingUsers();
|
|
||||||
} catch (error) {
|
|
||||||
toast.error(error.response?.data?.detail || 'Failed to send verification email');
|
|
||||||
} finally {
|
|
||||||
setResendLoading(null);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
const handleSort = (column) => {
|
const handleSort = (column) => {
|
||||||
@@ -291,37 +261,6 @@ const AdminValidations = () => {
|
|||||||
<ArrowDown className="h-4 w-4 inline ml-1" />;
|
<ArrowDown className="h-4 w-4 inline ml-1" />;
|
||||||
};
|
};
|
||||||
|
|
||||||
const formatPhoneNumber = (phone) => {
|
|
||||||
if (!phone) return '-';
|
|
||||||
const cleaned = phone.replace(/\D/g, '');
|
|
||||||
if (cleaned.length === 10) {
|
|
||||||
return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3, 6)} - ${cleaned.slice(6)}`;
|
|
||||||
}
|
|
||||||
return phone;
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleActionSelect = (user, action) => {
|
|
||||||
switch (action) {
|
|
||||||
case 'validate':
|
|
||||||
handleValidateRequest(user);
|
|
||||||
break;
|
|
||||||
case 'bypass_validate':
|
|
||||||
handleBypassAndValidateRequest(user);
|
|
||||||
break;
|
|
||||||
case 'resend_email':
|
|
||||||
handleResendVerification(user);
|
|
||||||
break;
|
|
||||||
case 'activate_payment':
|
|
||||||
handleActivatePayment(user);
|
|
||||||
break;
|
|
||||||
case 'reactivate':
|
|
||||||
handleReactivateUser(user);
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
@@ -340,7 +279,7 @@ const AdminValidations = () => {
|
|||||||
<div className=' text-2xl text-[var(--purple-ink)] pb-8 font-semibold'>
|
<div className=' text-2xl text-[var(--purple-ink)] pb-8 font-semibold'>
|
||||||
Quick Overview
|
Quick Overview
|
||||||
</div>
|
</div>
|
||||||
<div className="grid grid-cols-2 md:grid-cols-5 gap-4">
|
<div className="grid grid-cols-2 md:grid-cols-6 gap-4">
|
||||||
<StatCard
|
<StatCard
|
||||||
title="Total Pending"
|
title="Total Pending"
|
||||||
value={loading ? '-' : pendingUsers.length}
|
value={loading ? '-' : pendingUsers.length}
|
||||||
@@ -365,6 +304,14 @@ const AdminValidations = () => {
|
|||||||
dataTestId="stat-pending-validation"
|
dataTestId="stat-pending-validation"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
<StatCard
|
||||||
|
title="Pre-Validated"
|
||||||
|
value={loading ? '-' : pendingUsers.filter(u => u.status === 'pre_validated').length}
|
||||||
|
icon={CheckCircle}
|
||||||
|
iconBgClass="text-brand-purple"
|
||||||
|
dataTestId="stat-pre-validated"
|
||||||
|
/>
|
||||||
|
|
||||||
<StatCard
|
<StatCard
|
||||||
title="Payment Pending"
|
title="Payment Pending"
|
||||||
value={loading ? '-' : pendingUsers.filter(u => u.status === 'payment_pending').length}
|
value={loading ? '-' : pendingUsers.filter(u => u.status === 'payment_pending').length}
|
||||||
@@ -402,12 +349,13 @@ const AdminValidations = () => {
|
|||||||
<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" />
|
<SelectValue placeholder="Filter by status" />
|
||||||
</SelectTrigger>
|
</SelectTrigger>
|
||||||
<SelectContent className="">
|
<SelectContent>
|
||||||
<SelectItem value="all">All Statuses</SelectItem>
|
<SelectItem value="all">All Statuses</SelectItem>
|
||||||
<SelectItem value="pending_email" >Awaiting Email</SelectItem>
|
<SelectItem value="pending_email">Awaiting Email</SelectItem>
|
||||||
<SelectItem value="pending_validation" >Pending Validation</SelectItem>
|
<SelectItem value="pending_validation">Pending Validation</SelectItem>
|
||||||
<SelectItem value="payment_pending" >Payment Pending</SelectItem>
|
<SelectItem value="pre_validated">Pre-Validated</SelectItem>
|
||||||
<SelectItem value="rejected" >Rejected</SelectItem>
|
<SelectItem value="payment_pending">Payment Pending</SelectItem>
|
||||||
|
<SelectItem value="rejected">Rejected</SelectItem>
|
||||||
</SelectContent>
|
</SelectContent>
|
||||||
</Select>
|
</Select>
|
||||||
</div>
|
</div>
|
||||||
@@ -423,13 +371,14 @@ const AdminValidations = () => {
|
|||||||
<Card className="bg-background rounded-2xl border border-[var(--neutral-800)] overflow-hidden">
|
<Card className="bg-background rounded-2xl border border-[var(--neutral-800)] overflow-hidden">
|
||||||
<Table>
|
<Table>
|
||||||
<TableHeader>
|
<TableHeader>
|
||||||
<TableRow className="text-md">
|
<TableRow>
|
||||||
<TableHead
|
<TableHead
|
||||||
className="cursor-pointer hover:bg-[var(--neutral-800)]/20"
|
className="cursor-pointer hover:bg-[var(--neutral-800)]/20"
|
||||||
onClick={() => handleSort('first_name')}
|
onClick={() => handleSort('first_name')}
|
||||||
>
|
>
|
||||||
Member {renderSortIcon('first_name')}
|
Name {renderSortIcon('first_name')}
|
||||||
</TableHead>
|
</TableHead>
|
||||||
|
<TableHead>Email</TableHead>
|
||||||
<TableHead>Phone</TableHead>
|
<TableHead>Phone</TableHead>
|
||||||
<TableHead
|
<TableHead
|
||||||
className="cursor-pointer hover:bg-[var(--neutral-800)]/20"
|
className="cursor-pointer hover:bg-[var(--neutral-800)]/20"
|
||||||
@@ -443,13 +392,6 @@ const AdminValidations = () => {
|
|||||||
>
|
>
|
||||||
Registered {renderSortIcon('created_at')}
|
Registered {renderSortIcon('created_at')}
|
||||||
</TableHead>
|
</TableHead>
|
||||||
<TableHead
|
|
||||||
className="cursor-pointer hover:bg-[var(--neutral-800)]/20"
|
|
||||||
onClick={() => handleSort('email_verification_expires_at')}
|
|
||||||
>
|
|
||||||
{/* TODO: change ' ' */}
|
|
||||||
Validation Expiry {renderSortIcon('email_verification_expires_at')}
|
|
||||||
</TableHead>
|
|
||||||
<TableHead>Referred By</TableHead>
|
<TableHead>Referred By</TableHead>
|
||||||
<TableHead>Actions</TableHead>
|
<TableHead>Actions</TableHead>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
@@ -457,116 +399,105 @@ const AdminValidations = () => {
|
|||||||
<TableBody>
|
<TableBody>
|
||||||
{paginatedUsers.map((user) => (
|
{paginatedUsers.map((user) => (
|
||||||
<TableRow key={user.id}>
|
<TableRow key={user.id}>
|
||||||
<TableCell className=" ">
|
<TableCell className="font-medium">
|
||||||
<div className='font-semibold'>
|
{user.first_name} {user.last_name}
|
||||||
|
|
||||||
{user.first_name} {user.last_name}
|
|
||||||
</div>
|
|
||||||
<div className='text-brand-purple'>
|
|
||||||
{user.email}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</TableCell>
|
</TableCell>
|
||||||
<TableCell>{formatPhoneNumber(user.phone)}</TableCell>
|
<TableCell>{user.email}</TableCell>
|
||||||
|
<TableCell>{user.phone}</TableCell>
|
||||||
<TableCell><StatusBadge status={user.status} /></TableCell>
|
<TableCell><StatusBadge status={user.status} /></TableCell>
|
||||||
<TableCell>
|
<TableCell>
|
||||||
{new Date(user.created_at).toLocaleDateString()}
|
{new Date(user.created_at).toLocaleDateString()}
|
||||||
</TableCell>
|
</TableCell>
|
||||||
<TableCell>
|
|
||||||
{user.email_verification_expires_at
|
|
||||||
? new Date(user.email_verification_expires_at).toLocaleString()
|
|
||||||
: '—'}
|
|
||||||
</TableCell>
|
|
||||||
<TableCell>
|
<TableCell>
|
||||||
{user.referred_by_member_name || '-'}
|
{user.referred_by_member_name || '-'}
|
||||||
</TableCell>
|
</TableCell>
|
||||||
<TableCell>
|
<TableCell>
|
||||||
<div className='flex gap-2 justify-between'>
|
<div className="flex gap-2">
|
||||||
|
{user.status === 'rejected' ? (
|
||||||
<Select
|
<Button
|
||||||
value=""
|
onClick={() => handleReactivateUser(user)}
|
||||||
onValueChange={(action) => handleActionSelect(user, action)}
|
disabled={actionLoading === user.id}
|
||||||
disabled={actionLoading === user.id || resendLoading === user.id}
|
size="sm"
|
||||||
>
|
className="bg-[var(--green-light)] text-white hover:bg-[var(--green-mint)]"
|
||||||
<SelectTrigger className="w-[100px] h-9 border-[var(--neutral-800)]">
|
>
|
||||||
<SelectValue placeholder={actionLoading === user.id || resendLoading === user.id ? 'Processing...' : 'Action'} />
|
{actionLoading === user.id ? 'Reactivating...' : 'Reactivate'}
|
||||||
</SelectTrigger>
|
</Button>
|
||||||
<SelectContent>
|
) : user.status === 'pending_email' ? (
|
||||||
{user.status === 'rejected' ? (
|
<>
|
||||||
<SelectItem value="reactivate">Reactivate</SelectItem>
|
{hasPermission('users.approve') && (
|
||||||
) : user.status === 'pending_email' ? (
|
|
||||||
<>
|
|
||||||
{hasPermission('users.approve') && (
|
|
||||||
<SelectItem value="bypass_validate">Bypass & Validate</SelectItem>
|
|
||||||
)}
|
|
||||||
{hasPermission('users.approve') && (
|
|
||||||
<SelectItem value="resend_email">Resend Email</SelectItem>
|
|
||||||
)}
|
|
||||||
{/* {hasPermission('users.approve') && (
|
|
||||||
<SelectItem value="reject">Reject</SelectItem>
|
|
||||||
)} */}
|
|
||||||
</>
|
|
||||||
) : user.status === 'payment_pending' ? (
|
|
||||||
<>
|
|
||||||
{hasPermission('subscriptions.activate') && (
|
|
||||||
<SelectItem value="activate_payment">Activate Payment</SelectItem>
|
|
||||||
)}
|
|
||||||
{/* {hasPermission('users.approve') && (
|
|
||||||
<SelectItem value="reject">Reject</SelectItem>
|
|
||||||
)} */}
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
{hasPermission('users.approve') && (
|
|
||||||
<SelectItem value="validate">Validate</SelectItem>
|
|
||||||
)}
|
|
||||||
{/* {hasPermission('users.approve') && (
|
|
||||||
<SelectItem value="reject">Reject</SelectItem>
|
|
||||||
)} */}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
<TooltipProvider>
|
|
||||||
{/* view registration */}
|
|
||||||
<Tooltip>
|
|
||||||
<TooltipTrigger asChild>
|
|
||||||
<Button
|
<Button
|
||||||
onClick={() => handleRegistrationDialog(user)}
|
onClick={() => handleBypassAndValidateRequest(user)}
|
||||||
|
disabled={actionLoading === user.id}
|
||||||
|
size="sm"
|
||||||
|
className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background"
|
||||||
|
>
|
||||||
|
{actionLoading === user.id ? 'Validating...' : 'Bypass & Validate'}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
{hasPermission('users.approve') && (
|
||||||
|
<Button
|
||||||
|
onClick={() => handleRejectUser(user)}
|
||||||
disabled={actionLoading === user.id}
|
disabled={actionLoading === user.id}
|
||||||
size="sm"
|
size="sm"
|
||||||
variant="outline"
|
variant="outline"
|
||||||
className="border-2 border-primary text-primary hover:bg-red-50 dark:hover:bg-red-500/10"
|
className="border-2 border-red-500 text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10"
|
||||||
>
|
>
|
||||||
<FileText className="size-4" />
|
<X className="h-4 w-4 mr-1" />
|
||||||
|
Reject
|
||||||
</Button>
|
</Button>
|
||||||
</TooltipTrigger>
|
)}
|
||||||
<TooltipContent>
|
</>
|
||||||
View registration
|
) : user.status === 'payment_pending' ? (
|
||||||
</TooltipContent>
|
<>
|
||||||
</Tooltip>
|
{hasPermission('subscriptions.activate') && (
|
||||||
|
<Button
|
||||||
{/* reject */}
|
onClick={() => handleActivatePayment(user)}
|
||||||
{hasPermission('users.approve') && (
|
size="sm"
|
||||||
<Tooltip>
|
className="btn-light-lavender"
|
||||||
<TooltipTrigger asChild>
|
>
|
||||||
<Button
|
<CheckCircle className="h-4 w-4 mr-1" />
|
||||||
onClick={() => handleRejectUser(user)}
|
Activate Payment
|
||||||
disabled={actionLoading === user.id}
|
</Button>
|
||||||
size="sm"
|
)}
|
||||||
variant="outline"
|
{hasPermission('users.approve') && (
|
||||||
className="border-2 mr-2 border-red-500 text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10"
|
<Button
|
||||||
>
|
onClick={() => handleRejectUser(user)}
|
||||||
X
|
disabled={actionLoading === user.id}
|
||||||
</Button>
|
size="sm"
|
||||||
</TooltipTrigger>
|
variant="outline"
|
||||||
<TooltipContent>
|
className="border-2 border-red-500 text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10"
|
||||||
Reject user
|
>
|
||||||
</TooltipContent>
|
<X className="h-4 w-4 mr-1" />
|
||||||
</Tooltip>
|
Reject
|
||||||
)}
|
</Button>
|
||||||
</TooltipProvider>
|
)}
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
{hasPermission('users.approve') && (
|
||||||
|
<Button
|
||||||
|
onClick={() => handleValidateRequest(user)}
|
||||||
|
disabled={actionLoading === user.id}
|
||||||
|
size="sm"
|
||||||
|
className="bg-[var(--green-light)] text-white hover:bg-[var(--green-mint)]"
|
||||||
|
>
|
||||||
|
{actionLoading === user.id ? 'Validating...' : 'Validate'}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
{hasPermission('users.approve') && (
|
||||||
|
<Button
|
||||||
|
onClick={() => handleRejectUser(user)}
|
||||||
|
disabled={actionLoading === user.id}
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
className="border-2 border-red-500 text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10"
|
||||||
|
>
|
||||||
|
<X className="h-4 w-4 mr-1" />
|
||||||
|
Reject
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</TableCell>
|
</TableCell>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
@@ -691,13 +622,6 @@ const AdminValidations = () => {
|
|||||||
user={userToReject}
|
user={userToReject}
|
||||||
loading={actionLoading !== null}
|
loading={actionLoading !== null}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* View Registration Dialog */}
|
|
||||||
<ViewRegistrationDialog
|
|
||||||
open={viewRegistrationDialogOpen}
|
|
||||||
onOpenChange={setViewRegistrationDialogOpen}
|
|
||||||
user={selectedUserForView}
|
|
||||||
/>
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -2,6 +2,32 @@
|
|||||||
|
|
||||||
@layer base {
|
@layer base {
|
||||||
:root {
|
:root {
|
||||||
|
--background: 0 0% 100%;
|
||||||
|
--foreground: 280 47% 27%;
|
||||||
|
--card: 0 0% 100%;
|
||||||
|
--card-foreground: 280 47% 27%;
|
||||||
|
--popover: 0 0% 100%;
|
||||||
|
--popover-foreground: 280 47% 27%;
|
||||||
|
--primary: 280 47% 27%;
|
||||||
|
--primary-foreground: 0 0% 100%;
|
||||||
|
--secondary: 268 33% 89%;
|
||||||
|
--secondary-foreground: 280 47% 27%;
|
||||||
|
--muted: 268 43% 95%;
|
||||||
|
--muted-foreground: 268 35% 47%;
|
||||||
|
--accent: var(--brand-orange);
|
||||||
|
--accent-foreground: 280 47% 27%;
|
||||||
|
--destructive: 0 84.2% 60.2%;
|
||||||
|
--destructive-foreground: 0 0% 98%;
|
||||||
|
--border: 268 33% 89%;
|
||||||
|
--input: 268 33% 89%;
|
||||||
|
--ring: 268 35% 47%;
|
||||||
|
--chart-1: 268 36% 46%;
|
||||||
|
--chart-2: 17 100% 73%;
|
||||||
|
--chart-3: 268 33% 89%;
|
||||||
|
--chart-4: 280 44% 29%;
|
||||||
|
--chart-5: 268 35% 47%;
|
||||||
|
--radius: 0.5rem;
|
||||||
|
|
||||||
/* =========================
|
/* =========================
|
||||||
Brand Colors
|
Brand Colors
|
||||||
========================= */
|
========================= */
|
||||||
@@ -21,7 +47,7 @@
|
|||||||
|
|
||||||
/*
|
/*
|
||||||
==========================
|
==========================
|
||||||
Social Media Colors
|
Color Patch
|
||||||
==========================
|
==========================
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@@ -29,50 +55,6 @@
|
|||||||
--blue-facebook: #1877f2;
|
--blue-facebook: #1877f2;
|
||||||
--blue-twitter: #1da1f2;
|
--blue-twitter: #1da1f2;
|
||||||
--red-instagram: #e4405f;
|
--red-instagram: #e4405f;
|
||||||
|
|
||||||
/* =========================
|
|
||||||
Theme Colors
|
|
||||||
========================= */
|
|
||||||
--background: 0 0% 100%;
|
|
||||||
--foreground: 280 47% 27%;
|
|
||||||
|
|
||||||
--card: 0 0% 100%;
|
|
||||||
--card-foreground: 280 47% 27%;
|
|
||||||
|
|
||||||
--popover: 0 0% 100%;
|
|
||||||
--popover-foreground: 280 47% 27%;
|
|
||||||
|
|
||||||
--primary: 280 47% 27%;
|
|
||||||
--primary-foreground: 0 0% 100%;
|
|
||||||
|
|
||||||
--secondary: var(--brand-lavender);
|
|
||||||
--secondary-foreground: 280 47% 27%;
|
|
||||||
|
|
||||||
--muted: 268 43% 95%;
|
|
||||||
--muted-foreground: 268 35% 47%;
|
|
||||||
|
|
||||||
--accent: var(--brand-orange);
|
|
||||||
--accent-foreground: 280 47% 27%;
|
|
||||||
|
|
||||||
--destructive: 0 84.2% 60.2%;
|
|
||||||
--destructive-foreground: 0 0% 98%;
|
|
||||||
|
|
||||||
--success: 147 23% 46%;
|
|
||||||
--success-foreground: 0 0% 98%;
|
|
||||||
|
|
||||||
--warning: var(--brand-orange);
|
|
||||||
--warning-foreground: 0 0% 10%;
|
|
||||||
|
|
||||||
--border: 268 33% 89%;
|
|
||||||
--input: 268 33% 89%;
|
|
||||||
--ring: 268 35% 47%;
|
|
||||||
--chart-1: 268 36% 46%;
|
|
||||||
--chart-2: 17 100% 73%;
|
|
||||||
--chart-3: 268 33% 89%;
|
|
||||||
--chart-4: 280 44% 29%;
|
|
||||||
--chart-5: 268 35% 47%;
|
|
||||||
--radius: 0.5rem;
|
|
||||||
|
|
||||||
--purple-ink: #422268;
|
--purple-ink: #422268;
|
||||||
--purple-ink-2: #422268;
|
--purple-ink-2: #422268;
|
||||||
--purple-deep: #48286e;
|
--purple-deep: #48286e;
|
||||||
|
|||||||
@@ -49,10 +49,6 @@ module.exports = {
|
|||||||
DEFAULT: 'hsl(var(--success))',
|
DEFAULT: 'hsl(var(--success))',
|
||||||
foreground: 'hsl(var(--success-foreground))'
|
foreground: 'hsl(var(--success-foreground))'
|
||||||
},
|
},
|
||||||
warning: {
|
|
||||||
DEFAULT: 'hsl(var(--warning))',
|
|
||||||
foreground: 'hsl(var(--warning-foreground))'
|
|
||||||
},
|
|
||||||
border: 'hsl(var(--border))',
|
border: 'hsl(var(--border))',
|
||||||
input: 'hsl(var(--input))',
|
input: 'hsl(var(--input))',
|
||||||
ring: 'hsl(var(--ring))',
|
ring: 'hsl(var(--ring))',
|
||||||
|
|||||||
Reference in New Issue
Block a user