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

- 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.

Browse Source
This commit is contained in:
Koncept Kit
2026-01-20 23:52:35 +07:00
parent 57cd18ad9d
commit c79db66739
3 changed files with 503 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

172
src/pages/admin/AdminDonations.js
View File

@@ -28,7 +28,13 @@ import {
Loader2, Loader2,
Download, Download,
FileDown, FileDown,
Calendar Calendar,
ChevronDown,
ChevronUp,
ExternalLink,
Copy,
CreditCard,
Info
} from 'lucide-react'; } from 'lucide-react';
const AdminDonations = () => { const AdminDonations = () => {
@@ -43,6 +49,7 @@ const AdminDonations = () => {
const [statusFilter, setStatusFilter] = useState('all'); const [statusFilter, setStatusFilter] = useState('all');
const [startDate, setStartDate] = useState(''); const [startDate, setStartDate] = useState('');
const [endDate, setEndDate] = useState(''); const [endDate, setEndDate] = useState('');
const [expandedRows, setExpandedRows] = useState(new Set());
useEffect(() => { useEffect(() => {
fetchData(); 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 getStatusBadgeVariant = (status) => {
const variants = { const variants = {
completed: 'default', 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" }}> <th className="px-6 py-4 text-left text-sm font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
Payment Method Payment Method
</th> </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> </tr>
</thead> </thead>
<tbody className="divide-y divide-[var(--neutral-800)]"> <tbody className="divide-y divide-[var(--neutral-800)]">
{filteredDonations.length === 0 ? ( {filteredDonations.length === 0 ? (
<tr> <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"> <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" }}>
@@ -400,8 +431,11 @@ const AdminDonations = () => {
</td> </td>
</tr> </tr>
) : ( ) : (
filteredDonations.map((donation) => ( filteredDonations.map((donation) => {
<tr key={donation.id} className="hover:bg-[var(--lavender-400)] transition-colors"> 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"> <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" }}>
@@ -443,8 +477,136 @@ const AdminDonations = () => {
{donation.payment_method || 'N/A'} {donation.payment_method || 'N/A'}
</p> </p>
</td> </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> </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> </tbody>
</table> </table>

36
src/pages/admin/AdminSettings.js
View File

@@ -342,16 +342,26 @@ export default function AdminSettings() {
</Button> </Button>
</div> </div>
<div className="mt-3 text-xs text-blue-600"> <div className="mt-3 text-xs text-blue-600">
<p className="font-semibold mb-1">Webhook Events:</p> <p className="font-semibold mb-1">Webhook Events to Configure:</p>
<div className="space-y-2"> <div className="space-y-2">
<div> <div>
<p className="font-medium text-blue-700">✅ Currently Handled:</p> <p className="font-medium text-blue-700">✅ Required (Configure in Stripe):</p>
<ul className="list-disc list-inside ml-2"> <ul className="list-disc list-inside ml-2">
<li>checkout.session.completed - Subscription & donation payments</li> <li>checkout.session.completed - Handles subscriptions & donations</li>
</ul> </ul>
</div> </div>
<div className="opacity-80">
<p className="font-medium text-blue-700">🔔 Automatically Triggered:</p>
<ul className="list-disc list-inside ml-2 text-xs">
<li>payment_intent.created</li>
<li>payment_intent.succeeded</li>
<li>charge.succeeded</li>
<li>charge.updated</li>
</ul>
<p className="text-xs italic mt-1">These fire automatically with checkout.session.completed</p>
</div>
<div className="opacity-70"> <div className="opacity-70">
<p className="font-medium text-blue-700">🔄 Coming Soon:</p> <p className="font-medium text-blue-700">🔄 Coming Soon (Recurring Subscriptions):</p>
<ul className="list-disc list-inside ml-2"> <ul className="list-disc list-inside ml-2">
<li>invoice.payment_succeeded</li> <li>invoice.payment_succeeded</li>
<li>invoice.payment_failed</li> <li>invoice.payment_failed</li>
@@ -417,16 +427,26 @@ export default function AdminSettings() {
</Button> </Button>
</div> </div>
<div className="mt-3 text-xs text-blue-600"> <div className="mt-3 text-xs text-blue-600">
<p className="font-semibold mb-1">Webhook Events:</p> <p className="font-semibold mb-1">Webhook Events to Configure:</p>
<div className="space-y-2"> <div className="space-y-2">
<div> <div>
<p className="font-medium text-blue-700">✅ Currently Handled:</p> <p className="font-medium text-blue-700">✅ Required (Configure in Stripe):</p>
<ul className="list-disc list-inside ml-2"> <ul className="list-disc list-inside ml-2">
<li>checkout.session.completed - Subscription & donation payments</li> <li>checkout.session.completed - Handles subscriptions & donations</li>
</ul> </ul>
</div> </div>
<div className="opacity-80">
<p className="font-medium text-blue-700">🔔 Automatically Triggered:</p>
<ul className="list-disc list-inside ml-2 text-xs">
<li>payment_intent.created</li>
<li>payment_intent.succeeded</li>
<li>charge.succeeded</li>
<li>charge.updated</li>
</ul>
<p className="text-xs italic mt-1">These fire automatically with checkout.session.completed</p>
</div>
<div className="opacity-70"> <div className="opacity-70">
<p className="font-medium text-blue-700">🔄 Coming Soon:</p> <p className="font-medium text-blue-700">🔄 Coming Soon (Recurring Subscriptions):</p>
<ul className="list-disc list-inside ml-2"> <ul className="list-disc list-inside ml-2">
<li>invoice.payment_succeeded</li> <li>invoice.payment_succeeded</li>
<li>invoice.payment_failed</li> <li>invoice.payment_failed</li>

215
src/pages/admin/AdminSubscriptions.js
View File

@@ -35,7 +35,11 @@ import {
Download, Download,
FileDown, FileDown,
AlertTriangle, AlertTriangle,
Info Info,
ChevronDown,
ChevronUp,
ExternalLink,
Copy
} from 'lucide-react'; } from 'lucide-react';
import { import {
DropdownMenu, DropdownMenu,
@@ -55,6 +59,7 @@ const AdminSubscriptions = () => {
const [statusFilter, setStatusFilter] = useState('all'); const [statusFilter, setStatusFilter] = useState('all');
const [planFilter, setPlanFilter] = useState('all'); const [planFilter, setPlanFilter] = useState('all');
const [exporting, setExporting] = useState(false); const [exporting, setExporting] = useState(false);
const [expandedRows, setExpandedRows] = useState(new Set());
// Edit subscription dialog state // Edit subscription dialog state
const [editDialogOpen, setEditDialogOpen] = useState(false); const [editDialogOpen, setEditDialogOpen] = useState(false);
@@ -265,6 +270,38 @@ Proceed with activation?`;
}); });
}; };
const formatDateTime = (dateString) => {
if (!dateString) return 'N/A';
return new Date(dateString).toLocaleString('en-US', {
year: 'numeric',
month: 'short',
day: 'numeric',
hour: '2-digit',
minute: '2-digit'
});
};
const toggleRowExpansion = (subscriptionId) => {
setExpandedRows((prev) => {
const newExpanded = new Set(prev);
if (newExpanded.has(subscriptionId)) {
newExpanded.delete(subscriptionId);
} else {
newExpanded.add(subscriptionId);
}
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 getStatusBadgeVariant = (status) => {
const variants = { const variants = {
active: 'default', active: 'default',
@@ -566,6 +603,9 @@ Proceed with activation?`;
<th className="text-right p-4 text-[var(--purple-ink)] font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}> <th className="text-right p-4 text-[var(--purple-ink)] font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
Total Total
</th> </th>
<th className="text-center p-4 text-[var(--purple-ink)] font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
Details
</th>
<th className="text-center p-4 text-[var(--purple-ink)] font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}> <th className="text-center p-4 text-[var(--purple-ink)] font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
Actions Actions
</th> </th>
@@ -573,8 +613,11 @@ Proceed with activation?`;
</thead> </thead>
<tbody> <tbody>
{filteredSubscriptions.length > 0 ? ( {filteredSubscriptions.length > 0 ? (
filteredSubscriptions.map((sub) => ( filteredSubscriptions.map((sub) => {
<tr key={sub.id} className="border-b border-[var(--neutral-800)] hover:bg-[var(--lavender-400)] transition-colors"> const isExpanded = expandedRows.has(sub.id);
return (
<React.Fragment key={sub.id}>
<tr className="border-b border-[var(--neutral-800)] hover:bg-[var(--lavender-400)] transition-colors">
<td className="p-4"> <td className="p-4">
<div className="font-medium text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}> <div className="font-medium text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
{sub.user.first_name} {sub.user.last_name} {sub.user.first_name} {sub.user.last_name}
@@ -611,6 +654,16 @@ Proceed with activation?`;
<td className="p-4 text-right font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}> <td className="p-4 text-right font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
{formatPrice(sub.amount_paid_cents || 0)} {formatPrice(sub.amount_paid_cents || 0)}
</td> </td>
<td className="p-4">
<Button
size="sm"
variant="ghost"
onClick={() => toggleRowExpansion(sub.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>
<td className="p-4"> <td className="p-4">
<div className="flex items-center justify-center gap-2"> <div className="flex items-center justify-center gap-2">
{hasPermission('subscriptions.edit') && ( {hasPermission('subscriptions.edit') && (
@@ -636,10 +689,162 @@ Proceed with activation?`;
</div> </div>
</td> </td>
</tr> </tr>
)) {/* Expandable Details Row */}
{isExpanded && (
<tr className="bg-[var(--lavender-400)]/30">
<td 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">
{/* 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">
{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>
{/* 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">
{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>
</td>
</tr>
)}
</React.Fragment>
);
})
) : ( ) : (
<tr> <tr>
<td colSpan="8" className="p-12 text-center text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}> <td colSpan="9" className="p-12 text-center text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
No subscriptions found No subscriptions found
</td> </td>
</tr> </tr>