538 lines
25 KiB
TypeScript
538 lines
25 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import { FaDownload, FaSearch, FaCheck, FaTimes, FaClock, FaTelegramPlane, FaSave } from 'react-icons/fa';
|
|
import { useAlbums } from '@/lib/AlbumsContext';
|
|
import { Purchase } from '@/lib/types';
|
|
import { formatPrice } from '@/lib/utils';
|
|
import AdminLayout from '@/components/AdminLayout';
|
|
|
|
export default function AdminPurchasesPage() {
|
|
const { albums } = useAlbums();
|
|
const [purchases, setPurchases] = useState<Purchase[]>([]);
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [filterStatus, setFilterStatus] = useState<'all' | 'pending' | 'approved' | 'rejected'>('all');
|
|
const [loading, setLoading] = useState(false);
|
|
const [telegramIds, setTelegramIds] = useState('');
|
|
const [telegramBaseUrl, setTelegramBaseUrl] = useState('https://api.telegram.org');
|
|
const [telegramBotToken, setTelegramBotToken] = useState('');
|
|
const [telegramGreeting, setTelegramGreeting] = useState('Welcome! Choose albums from the catalog below.');
|
|
const [telegramCardNumber, setTelegramCardNumber] = useState('');
|
|
const [telegramCardHolder, setTelegramCardHolder] = useState('');
|
|
const [telegramConfigured, setTelegramConfigured] = useState(false);
|
|
const [telegramWebhookSecretConfigured, setTelegramWebhookSecretConfigured] = useState(false);
|
|
const [telegramSaving, setTelegramSaving] = useState(false);
|
|
const [telegramRegistering, setTelegramRegistering] = useState(false);
|
|
const [telegramMessage, setTelegramMessage] = useState('');
|
|
|
|
const fetchPurchases = async (showLoading = true) => {
|
|
if (showLoading) setLoading(true);
|
|
try {
|
|
const response = await fetch('/api/purchases');
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
setPurchases(data.reverse());
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching purchases:', error);
|
|
} finally {
|
|
if (showLoading) setLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchPurchases();
|
|
const refreshTimer = window.setInterval(() => fetchPurchases(false), 10_000);
|
|
fetch('/api/telegram/settings')
|
|
.then(async (response) => {
|
|
if (!response.ok) throw new Error('Failed to load Telegram settings');
|
|
return response.json();
|
|
})
|
|
.then((data) => {
|
|
setTelegramIds(data.approvers.map((item: { userId: string }) => item.userId).join(', '));
|
|
setTelegramBaseUrl(data.baseUrl || 'https://api.telegram.org');
|
|
setTelegramGreeting(data.greetingText || 'Welcome! Choose albums from the catalog below.');
|
|
setTelegramCardNumber(data.cardNumber || '');
|
|
setTelegramCardHolder(data.cardHolderName || '');
|
|
setTelegramConfigured(Boolean(data.botConfigured));
|
|
setTelegramWebhookSecretConfigured(Boolean(data.webhookSecretConfigured));
|
|
})
|
|
.catch((error) => {
|
|
console.error('Error fetching Telegram settings:', error);
|
|
setTelegramMessage('Could not load Telegram settings.');
|
|
});
|
|
return () => window.clearInterval(refreshTimer);
|
|
}, []);
|
|
|
|
const saveTelegramSettings = async () => {
|
|
const ids = telegramIds
|
|
.split(/[\s,]+/)
|
|
.map((id) => id.trim())
|
|
.filter(Boolean);
|
|
|
|
if (ids.some((id) => !/^\d+$/.test(id))) {
|
|
setTelegramMessage('Telegram user IDs must contain digits only.');
|
|
return;
|
|
}
|
|
|
|
setTelegramSaving(true);
|
|
setTelegramMessage('');
|
|
try {
|
|
const response = await fetch('/api/telegram/settings', {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
approvers: ids.map((userId) => ({ userId })),
|
|
baseUrl: telegramBaseUrl,
|
|
greetingText: telegramGreeting,
|
|
cardNumber: telegramCardNumber,
|
|
cardHolderName: telegramCardHolder,
|
|
...(telegramBotToken.trim() ? { botToken: telegramBotToken.trim() } : {}),
|
|
}),
|
|
});
|
|
const data = await response.json();
|
|
if (!response.ok) throw new Error(data.error || 'Failed to save Telegram approvers');
|
|
setTelegramIds(data.approvers.map((item: { userId: string }) => item.userId).join(', '));
|
|
setTelegramBaseUrl(data.baseUrl);
|
|
setTelegramGreeting(data.greetingText);
|
|
setTelegramCardNumber(data.cardNumber);
|
|
setTelegramCardHolder(data.cardHolderName);
|
|
setTelegramBotToken('');
|
|
setTelegramConfigured(Boolean(data.botConfigured));
|
|
setTelegramWebhookSecretConfigured(Boolean(data.webhookSecretConfigured));
|
|
setTelegramMessage('Telegram settings saved.');
|
|
} catch (error) {
|
|
setTelegramMessage(error instanceof Error ? error.message : 'Failed to save Telegram approvers.');
|
|
} finally {
|
|
setTelegramSaving(false);
|
|
}
|
|
};
|
|
|
|
const registerTelegramWebhook = async () => {
|
|
setTelegramRegistering(true);
|
|
setTelegramMessage('');
|
|
try {
|
|
const response = await fetch('/api/telegram/settings', { method: 'POST' });
|
|
const data = await response.json();
|
|
if (!response.ok) throw new Error(data.error || 'Failed to register Telegram webhook');
|
|
setTelegramMessage(data.message);
|
|
} catch (error) {
|
|
setTelegramMessage(error instanceof Error ? error.message : 'Failed to register Telegram webhook.');
|
|
} finally {
|
|
setTelegramRegistering(false);
|
|
}
|
|
};
|
|
|
|
const handleApprove = async (purchaseId: number) => {
|
|
try {
|
|
const response = await fetch(`/api/purchases/${purchaseId}/approve`, {
|
|
method: 'PATCH',
|
|
});
|
|
if (response.ok) {
|
|
fetchPurchases();
|
|
}
|
|
} catch (error) {
|
|
console.error('Error approving purchase:', error);
|
|
alert('Failed to approve purchase');
|
|
}
|
|
};
|
|
|
|
const handleReject = async (purchaseId: number) => {
|
|
try {
|
|
const response = await fetch(`/api/purchases/${purchaseId}/reject`, {
|
|
method: 'PATCH',
|
|
});
|
|
if (response.ok) {
|
|
fetchPurchases();
|
|
}
|
|
} catch (error) {
|
|
console.error('Error rejecting purchase:', error);
|
|
alert('Failed to reject purchase');
|
|
}
|
|
};
|
|
|
|
const filteredPurchases = purchases.filter((purchase) => {
|
|
const purchaseAlbumIds = purchase.albumIds || [purchase.albumId];
|
|
const purchaseAlbums = albums.filter((album) => purchaseAlbumIds.includes(album.id));
|
|
const matchesSearch =
|
|
purchaseAlbums.some((album) => album.title.toLowerCase().includes(searchTerm.toLowerCase())) ||
|
|
purchase.transactionId.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
purchase.customerName?.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
purchase.email?.toLowerCase().includes(searchTerm.toLowerCase());
|
|
|
|
const matchesStatus = filterStatus === 'all' || purchase.approvalStatus === filterStatus;
|
|
|
|
return matchesSearch && matchesStatus;
|
|
});
|
|
|
|
const pendingPurchases = purchases.filter(p => p.approvalStatus === 'pending');
|
|
const approvedPurchases = purchases.filter(p => p.approvalStatus === 'approved');
|
|
|
|
const totalRevenue = approvedPurchases.reduce((total, purchase) => {
|
|
const purchaseAlbumIds = purchase.albumIds || [purchase.albumId];
|
|
return total + albums
|
|
.filter((album) => purchaseAlbumIds.includes(album.id))
|
|
.reduce((subtotal, album) => subtotal + album.price, 0);
|
|
}, 0);
|
|
|
|
const exportToCSV = () => {
|
|
const headers = ['Date', 'Time', 'Transaction ID', 'Album', 'Price', 'Customer', 'Email', 'Phone', 'Status', 'Payment Method'];
|
|
const rows = purchases.map((purchase) => {
|
|
const purchaseAlbumIds = purchase.albumIds || [purchase.albumId];
|
|
const purchaseAlbums = albums.filter((album) => purchaseAlbumIds.includes(album.id));
|
|
const date = new Date(purchase.purchaseDate);
|
|
return [
|
|
date.toLocaleDateString(),
|
|
date.toLocaleTimeString(),
|
|
purchase.transactionId,
|
|
purchaseAlbums.map((album) => album.title).join(' + ') || 'Unknown',
|
|
purchaseAlbums.reduce((total, album) => total + album.price, 0),
|
|
purchase.customerName || '',
|
|
purchase.email || '',
|
|
purchase.phoneNumber || '',
|
|
purchase.approvalStatus || 'pending',
|
|
purchase.paymentMethod || 'card-to-card',
|
|
];
|
|
});
|
|
|
|
const csvContent = [headers, ...rows].map((row) => row.join(',')).join('\n');
|
|
const blob = new Blob([csvContent], { type: 'text/csv' });
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = `purchases-${new Date().toISOString().split('T')[0]}.csv`;
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
document.body.removeChild(a);
|
|
URL.revokeObjectURL(url);
|
|
};
|
|
|
|
const getStatusBadge = (status?: string) => {
|
|
const statusLower = (status || 'pending').toLowerCase();
|
|
if (statusLower === 'approved') {
|
|
return (
|
|
<span className="px-2 py-1 bg-green-100 border border-green-400 text-green-700 text-xs font-semibold">
|
|
Approved
|
|
</span>
|
|
);
|
|
} else if (statusLower === 'rejected') {
|
|
return (
|
|
<span className="px-2 py-1 bg-red-100 border border-red-400 text-red-700 text-xs font-semibold">
|
|
Rejected
|
|
</span>
|
|
);
|
|
} else {
|
|
return (
|
|
<span className="px-2 py-1 bg-orange-100 border border-orange-400 text-orange-700 text-xs font-semibold flex items-center gap-1">
|
|
<FaClock className="text-xs" /> Pending
|
|
</span>
|
|
);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<AdminLayout>
|
|
<div className="p-8">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between mb-8">
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-paper-dark mb-2 border-b-4 border-paper-dark inline-block pb-1">
|
|
Purchase Management
|
|
</h1>
|
|
<p className="text-paper-gray mt-4">
|
|
{purchases.length} total • {pendingPurchases.length} pending • {formatPrice(totalRevenue)} revenue
|
|
</p>
|
|
</div>
|
|
<motion.button
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
onClick={exportToCSV}
|
|
className="px-6 py-3 bg-paper-brown hover:bg-paper-dark border-2 border-paper-dark font-semibold text-paper-light transition-all shadow-paper-lg flex items-center gap-2"
|
|
>
|
|
<FaDownload />
|
|
Export CSV
|
|
</motion.button>
|
|
</div>
|
|
|
|
<div className="paper-card p-5 mb-6">
|
|
<div className="space-y-4">
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<FaTelegramPlane className="text-paper-brown" />
|
|
<label htmlFor="telegram-approvers" className="font-semibold text-paper-dark">
|
|
Telegram purchase approvers
|
|
</label>
|
|
<span className={`text-xs px-2 py-1 border ${
|
|
telegramConfigured
|
|
? 'bg-green-100 border-green-400 text-green-700'
|
|
: 'bg-orange-100 border-orange-400 text-orange-700'
|
|
}`}>
|
|
{telegramConfigured ? 'Bot configured' : 'Bot token missing'}
|
|
</span>
|
|
</div>
|
|
<div className="grid md:grid-cols-2 gap-4 mb-4">
|
|
<div>
|
|
<label htmlFor="telegram-base-url" className="block text-sm font-medium text-paper-dark mb-1">
|
|
Telegram API base URL
|
|
</label>
|
|
<input
|
|
id="telegram-base-url"
|
|
type="url"
|
|
value={telegramBaseUrl}
|
|
onChange={(event) => setTelegramBaseUrl(event.target.value)}
|
|
placeholder="https://api.telegram.org"
|
|
className="w-full px-4 py-3 bg-paper-light border-2 border-paper-brown focus:border-paper-dark focus:outline-none text-paper-dark placeholder-paper-gray shadow-paper"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="telegram-bot-token" className="block text-sm font-medium text-paper-dark mb-1">
|
|
Bot token
|
|
</label>
|
|
<input
|
|
id="telegram-bot-token"
|
|
type="password"
|
|
value={telegramBotToken}
|
|
onChange={(event) => setTelegramBotToken(event.target.value)}
|
|
placeholder={telegramConfigured ? 'Saved — leave blank to keep it' : 'Paste the BotFather token'}
|
|
autoComplete="new-password"
|
|
className="w-full px-4 py-3 bg-paper-light border-2 border-paper-brown focus:border-paper-dark focus:outline-none text-paper-dark placeholder-paper-gray shadow-paper"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="mb-4">
|
|
<label htmlFor="telegram-greeting" className="block text-sm font-medium text-paper-dark mb-1">
|
|
Greeting message
|
|
</label>
|
|
<textarea
|
|
id="telegram-greeting"
|
|
value={telegramGreeting}
|
|
onChange={(event) => setTelegramGreeting(event.target.value)}
|
|
rows={3}
|
|
className="w-full px-4 py-3 bg-paper-light border-2 border-paper-brown focus:border-paper-dark focus:outline-none text-paper-dark placeholder-paper-gray shadow-paper"
|
|
/>
|
|
</div>
|
|
<div className="grid md:grid-cols-2 gap-4 mb-4">
|
|
<div>
|
|
<label htmlFor="telegram-card-number" className="block text-sm font-medium text-paper-dark mb-1">
|
|
Payment card number
|
|
</label>
|
|
<input
|
|
id="telegram-card-number"
|
|
type="text"
|
|
value={telegramCardNumber}
|
|
onChange={(event) => setTelegramCardNumber(event.target.value)}
|
|
placeholder="6037 9975 1234 5678"
|
|
className="w-full px-4 py-3 bg-paper-light border-2 border-paper-brown focus:border-paper-dark focus:outline-none text-paper-dark placeholder-paper-gray shadow-paper"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="telegram-card-holder" className="block text-sm font-medium text-paper-dark mb-1">
|
|
Cardholder name
|
|
</label>
|
|
<input
|
|
id="telegram-card-holder"
|
|
type="text"
|
|
value={telegramCardHolder}
|
|
onChange={(event) => setTelegramCardHolder(event.target.value)}
|
|
placeholder="Account holder name"
|
|
className="w-full px-4 py-3 bg-paper-light border-2 border-paper-brown focus:border-paper-dark focus:outline-none text-paper-dark placeholder-paper-gray shadow-paper"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<label htmlFor="telegram-approvers" className="block text-sm font-medium text-paper-dark mb-1">
|
|
Authorized Telegram user IDs
|
|
</label>
|
|
<input
|
|
id="telegram-approvers"
|
|
type="text"
|
|
value={telegramIds}
|
|
onChange={(event) => setTelegramIds(event.target.value)}
|
|
placeholder="123456789, 987654321"
|
|
className="w-full px-4 py-3 bg-paper-light border-2 border-paper-brown focus:border-paper-dark focus:outline-none text-paper-dark placeholder-paper-gray shadow-paper"
|
|
/>
|
|
<p className="text-xs text-paper-gray mt-2">
|
|
Comma-separated Telegram user IDs. A user can send /id to the bot to find their ID.
|
|
</p>
|
|
{!telegramWebhookSecretConfigured && (
|
|
<p className="text-xs text-orange-700 mt-2">
|
|
TELEGRAM_WEBHOOK_SECRET must be set on the server before registering the webhook.
|
|
</p>
|
|
)}
|
|
{telegramMessage && <p className="text-sm text-paper-dark mt-2">{telegramMessage}</p>}
|
|
</div>
|
|
<div className="flex flex-wrap gap-3">
|
|
<button
|
|
onClick={saveTelegramSettings}
|
|
disabled={telegramSaving}
|
|
className="px-5 py-3 bg-paper-brown hover:bg-paper-dark border-2 border-paper-dark text-paper-light font-semibold disabled:opacity-50 flex items-center justify-center gap-2"
|
|
>
|
|
<FaSave />
|
|
{telegramSaving ? 'Saving...' : 'Save Telegram settings'}
|
|
</button>
|
|
<button
|
|
onClick={registerTelegramWebhook}
|
|
disabled={telegramRegistering || !telegramConfigured || !telegramWebhookSecretConfigured}
|
|
className="px-5 py-3 bg-paper-light hover:bg-paper-sand border-2 border-paper-brown text-paper-dark font-semibold disabled:opacity-50 flex items-center justify-center gap-2"
|
|
>
|
|
<FaTelegramPlane />
|
|
{telegramRegistering ? 'Registering...' : 'Register webhook'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Filters */}
|
|
<div className="mb-6 space-y-4">
|
|
<div className="flex gap-2">
|
|
{(['all', 'pending', 'approved', 'rejected'] as const).map((status) => (
|
|
<button
|
|
key={status}
|
|
onClick={() => setFilterStatus(status)}
|
|
className={`px-4 py-2 border-2 font-medium transition-all ${
|
|
filterStatus === status
|
|
? 'bg-paper-brown text-paper-light border-paper-dark'
|
|
: 'bg-paper-light text-paper-dark border-paper-brown hover:bg-paper-sand'
|
|
}`}
|
|
>
|
|
{status.charAt(0).toUpperCase() + status.slice(1)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
<div className="relative">
|
|
<FaSearch className="absolute left-4 top-1/2 -translate-y-1/2 text-paper-gray" />
|
|
<input
|
|
type="text"
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
placeholder="Search by album, transaction ID, customer name, or email..."
|
|
className="w-full pl-12 pr-4 py-3 bg-paper-light border-2 border-paper-brown focus:border-paper-dark focus:outline-none text-paper-dark placeholder-paper-gray shadow-paper"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Purchases Table */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
className="paper-card border-2 border-paper-brown shadow-paper overflow-hidden"
|
|
>
|
|
{loading ? (
|
|
<div className="p-12 text-center">
|
|
<p className="text-paper-gray">Loading purchases...</p>
|
|
</div>
|
|
) : filteredPurchases.length > 0 ? (
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead className="bg-paper-brown/20 border-b-2 border-paper-brown">
|
|
<tr>
|
|
<th className="text-left p-4 text-sm font-semibold text-paper-dark">Date & Time</th>
|
|
<th className="text-left p-4 text-sm font-semibold text-paper-dark">Transaction ID</th>
|
|
<th className="text-left p-4 text-sm font-semibold text-paper-dark">Customer</th>
|
|
<th className="text-left p-4 text-sm font-semibold text-paper-dark">Album</th>
|
|
<th className="text-center p-4 text-sm font-semibold text-paper-dark">Payment</th>
|
|
<th className="text-center p-4 text-sm font-semibold text-paper-dark">Status</th>
|
|
<th className="text-right p-4 text-sm font-semibold text-paper-dark">Price</th>
|
|
<th className="text-center p-4 text-sm font-semibold text-paper-dark">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{filteredPurchases.map((purchase, index) => {
|
|
const purchaseAlbumIds = purchase.albumIds || [purchase.albumId];
|
|
const purchaseAlbums = albums.filter((album) => purchaseAlbumIds.includes(album.id));
|
|
const date = new Date(purchase.purchaseDate);
|
|
|
|
return (
|
|
<motion.tr
|
|
key={purchase.id || purchase.transactionId}
|
|
initial={{ opacity: 0, x: -20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ delay: index * 0.05 }}
|
|
className="border-b border-paper-brown/30 hover:bg-paper-sand/50 transition-colors"
|
|
>
|
|
<td className="p-4 text-paper-dark">
|
|
<div className="text-sm">{date.toLocaleDateString()}</div>
|
|
<div className="text-xs text-paper-gray">{date.toLocaleTimeString()}</div>
|
|
</td>
|
|
<td className="p-4">
|
|
<code className="text-xs text-paper-brown bg-paper-brown/10 px-2 py-1 border border-paper-brown">
|
|
{purchase.transactionId}
|
|
</code>
|
|
{purchase.txReceipt && (
|
|
<div className="text-xs text-paper-gray mt-1">
|
|
Receipt: {purchase.txReceipt}
|
|
</div>
|
|
)}
|
|
</td>
|
|
<td className="p-4">
|
|
<div className="text-sm text-paper-dark">{purchase.customerName || 'N/A'}</div>
|
|
<div className="text-xs text-paper-gray">{purchase.email}</div>
|
|
<div className="text-xs text-paper-gray">{purchase.phoneNumber}</div>
|
|
</td>
|
|
<td className="p-4">
|
|
<div className="text-paper-dark font-medium">
|
|
{purchaseAlbums.map((album) => album.title).join(', ') || 'Unknown'}
|
|
</div>
|
|
<div className="text-xs text-paper-gray">
|
|
{purchaseAlbums.length} album{purchaseAlbums.length === 1 ? '' : 's'} • {' '}
|
|
{purchaseAlbums.reduce((total, album) => total + album.songs.length, 0)} tracks
|
|
</div>
|
|
</td>
|
|
<td className="p-4 text-center">
|
|
<span className="text-xs text-paper-brown bg-paper-brown/10 px-2 py-1 border border-paper-brown">
|
|
{purchase.paymentMethod === 'ipg' ? 'IPG' : 'Card-to-Card'}
|
|
</span>
|
|
</td>
|
|
<td className="p-4 text-center">
|
|
{getStatusBadge(purchase.approvalStatus)}
|
|
{purchase.reviewedByTelegramId && (
|
|
<div className="text-xs text-paper-gray mt-1">
|
|
Telegram: {purchase.reviewedByTelegramId}
|
|
</div>
|
|
)}
|
|
</td>
|
|
<td className="p-4 text-right">
|
|
<span className="text-paper-brown font-bold">
|
|
{formatPrice(purchaseAlbums.reduce((total, album) => total + album.price, 0))}
|
|
</span>
|
|
</td>
|
|
<td className="p-4">
|
|
{purchase.approvalStatus === 'pending' && (
|
|
<div className="flex gap-2 justify-center">
|
|
<button
|
|
onClick={() => purchase.id && handleApprove(purchase.id)}
|
|
className="p-2 bg-green-100 hover:bg-green-200 border-2 border-green-400 text-green-700 transition-colors"
|
|
title="Approve"
|
|
>
|
|
<FaCheck />
|
|
</button>
|
|
<button
|
|
onClick={() => purchase.id && handleReject(purchase.id)}
|
|
className="p-2 bg-red-100 hover:bg-red-200 border-2 border-red-400 text-red-700 transition-colors"
|
|
title="Reject"
|
|
>
|
|
<FaTimes />
|
|
</button>
|
|
</div>
|
|
)}
|
|
</td>
|
|
</motion.tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
) : (
|
|
<div className="p-12 text-center">
|
|
<p className="text-paper-gray">
|
|
{searchTerm || filterStatus !== 'all' ? 'No purchases found matching your filters' : 'No purchases yet'}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</motion.div>
|
|
</div>
|
|
</AdminLayout>
|
|
);
|
|
}
|