- Details Column - Expandable chevron button for each row- Expandable Transaction Details - Click chevron to show/hide details- Payment Information Section:- Stripe Transaction IDs Section- Copy to Clipboard - One-click copy for all transaction IDs- Update Stripe webhook event permission on Stripe Config page.
This commit is contained in:
Koncept Kit
@@ -28,7 +28,13 @@ import {
|
||||
Loader2,
|
||||
Download,
|
||||
FileDown,
|
||||
Calendar
|
||||
Calendar,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
ExternalLink,
|
||||
Copy,
|
||||
CreditCard,
|
||||
Info
|
||||
} from 'lucide-react';
|
||||
|
||||
const AdminDonations = () => {
|
||||
@@ -43,6 +49,7 @@ const AdminDonations = () => {
|
||||
const [statusFilter, setStatusFilter] = useState('all');
|
||||
const [startDate, setStartDate] = useState('');
|
||||
const [endDate, setEndDate] = useState('');
|
||||
const [expandedRows, setExpandedRows] = useState(new Set());
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
@@ -157,6 +164,27 @@ const AdminDonations = () => {
|
||||
});
|
||||
};
|
||||
|
||||
const toggleRowExpansion = (donationId) => {
|
||||
setExpandedRows((prev) => {
|
||||
const newExpanded = new Set(prev);
|
||||
if (newExpanded.has(donationId)) {
|
||||
newExpanded.delete(donationId);
|
||||
} else {
|
||||
newExpanded.add(donationId);
|
||||
}
|
||||
return newExpanded;
|
||||
});
|
||||
};
|
||||
|
||||
const copyToClipboard = async (text, label) => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(text);
|
||||
toast.success(`${label} copied to clipboard`);
|
||||
} catch (error) {
|
||||
toast.error('Failed to copy to clipboard');
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusBadgeVariant = (status) => {
|
||||
const variants = {
|
||||
completed: 'default',
|
||||
@@ -385,12 +413,15 @@ const AdminDonations = () => {
|
||||
<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 ? (
|
||||
<tr>
|
||||
<td colSpan="6" className="px-6 py-12 text-center">
|
||||
<td colSpan="7" className="px-6 py-12 text-center">
|
||||
<div className="flex flex-col items-center gap-3">
|
||||
<Heart className="h-12 w-12 text-[var(--neutral-800)]" />
|
||||
<p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
@@ -400,51 +431,182 @@ const AdminDonations = () => {
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
filteredDonations.map((donation) => (
|
||||
<tr key={donation.id} className="hover:bg-[var(--lavender-400)] transition-colors">
|
||||
<td className="px-6 py-4">
|
||||
<div>
|
||||
<p className="font-medium text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
{donation.donor_name || 'Anonymous'}
|
||||
</p>
|
||||
<p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
{donation.donor_email || 'No email'}
|
||||
</p>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<Badge
|
||||
className={`${getTypeBadgeColor(donation.donation_type)} text-white border-none rounded-full px-3 py-1`}
|
||||
style={{ fontFamily: "'Inter', sans-serif" }}
|
||||
>
|
||||
{donation.donation_type === 'member' ? 'Member' : 'Public'}
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<p className="font-semibold text-[var(--purple-ink)] text-lg" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
{donation.amount}
|
||||
</p>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<Badge variant={getStatusBadgeVariant(donation.status)} className="rounded-full">
|
||||
{donation.status.charAt(0).toUpperCase() + donation.status.slice(1)}
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<div className="flex items-center gap-2 text-brand-purple ">
|
||||
<Calendar className="h-4 w-4" />
|
||||
<span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
{formatDate(donation.created_at)}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
{donation.payment_method || 'N/A'}
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
filteredDonations.map((donation) => {
|
||||
const isExpanded = expandedRows.has(donation.id);
|
||||
return (
|
||||
<React.Fragment key={donation.id}>
|
||||
<tr className="hover:bg-[var(--lavender-400)] transition-colors">
|
||||
<td className="px-6 py-4">
|
||||
<div>
|
||||
<p className="font-medium text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
{donation.donor_name || 'Anonymous'}
|
||||
</p>
|
||||
<p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
{donation.donor_email || 'No email'}
|
||||
</p>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<Badge
|
||||
className={`${getTypeBadgeColor(donation.donation_type)} text-white border-none rounded-full px-3 py-1`}
|
||||
style={{ fontFamily: "'Inter', sans-serif" }}
|
||||
>
|
||||
{donation.donation_type === 'member' ? 'Member' : 'Public'}
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<p className="font-semibold text-[var(--purple-ink)] text-lg" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
{donation.amount}
|
||||
</p>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<Badge variant={getStatusBadgeVariant(donation.status)} className="rounded-full">
|
||||
{donation.status.charAt(0).toUpperCase() + donation.status.slice(1)}
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<div className="flex items-center gap-2 text-brand-purple ">
|
||||
<Calendar className="h-4 w-4" />
|
||||
<span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
{formatDate(donation.created_at)}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
{donation.payment_method || 'N/A'}
|
||||
</p>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-center">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => toggleRowExpansion(donation.id)}
|
||||
className="text-brand-purple hover:bg-[var(--neutral-800)]"
|
||||
>
|
||||
{isExpanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
{/* Expandable Details Row */}
|
||||
{isExpanded && (
|
||||
<tr className="bg-[var(--lavender-400)]/30">
|
||||
<td colSpan="7" className="px-6 py-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">
|
||||
{/* Payment Information */}
|
||||
<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">
|
||||
{donation.payment_completed_at && (
|
||||
<div className="flex justify-between">
|
||||
<span className="text-brand-purple ">Payment Date:</span>
|
||||
<span className="text-[var(--purple-ink)] font-medium">{formatDate(donation.payment_completed_at)}</span>
|
||||
</div>
|
||||
)}
|
||||
{donation.payment_method && (
|
||||
<div className="flex justify-between">
|
||||
<span className="text-brand-purple ">Payment Method:</span>
|
||||
<span className="text-[var(--purple-ink)] font-medium capitalize">{donation.payment_method}</span>
|
||||
</div>
|
||||
)}
|
||||
{donation.card_brand && donation.card_last4 && (
|
||||
<div className="flex justify-between">
|
||||
<span className="text-brand-purple ">Card:</span>
|
||||
<span className="text-[var(--purple-ink)] font-medium">{donation.card_brand} ****{donation.card_last4}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stripe Transaction IDs */}
|
||||
<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">
|
||||
{donation.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)]">
|
||||
{donation.stripe_payment_intent_id.substring(0, 20)}...
|
||||
</code>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => copyToClipboard(donation.stripe_payment_intent_id, 'Payment Intent ID')}
|
||||
>
|
||||
<Copy className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{donation.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)]">
|
||||
{donation.stripe_charge_id.substring(0, 20)}...
|
||||
</code>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => copyToClipboard(donation.stripe_charge_id, 'Charge ID')}
|
||||
>
|
||||
<Copy className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{donation.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)]">
|
||||
{donation.stripe_customer_id.substring(0, 20)}...
|
||||
</code>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => copyToClipboard(donation.stripe_customer_id, 'Customer ID')}
|
||||
>
|
||||
<Copy className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{donation.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(donation.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>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</React.Fragment>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
Reference in New Issue
Block a user