@@ -0,0 +1,184 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { FaEdit, FaTrash, FaPlus } from 'react-icons/fa';
|
||||
import { useAlbums } from '@/lib/AlbumsContext';
|
||||
import { Album } from '@/lib/types';
|
||||
import AdminLayout from '@/components/AdminLayout';
|
||||
import AddAlbumModal from '@/components/AddAlbumModal';
|
||||
import EditAlbumModal from '@/components/EditAlbumModal';
|
||||
import DeleteConfirmationModal from '@/components/DeleteConfirmationModal';
|
||||
|
||||
export default function AdminAlbumsPage() {
|
||||
const { albums, addAlbum, updateAlbum, deleteAlbum } = useAlbums();
|
||||
const [showAddModal, setShowAddModal] = useState(false);
|
||||
const [showEditModal, setShowEditModal] = useState(false);
|
||||
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
||||
const [selectedAlbum, setSelectedAlbum] = useState<Album | null>(null);
|
||||
|
||||
const handleAddAlbum = async (album: Album) => {
|
||||
try {
|
||||
await addAlbum(album);
|
||||
setShowAddModal(false);
|
||||
} catch (error) {
|
||||
console.error('Error adding album:', error);
|
||||
alert('Failed to add album');
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditAlbum = async (albumId: string, album: Album) => {
|
||||
try {
|
||||
await updateAlbum(albumId, album);
|
||||
setShowEditModal(false);
|
||||
setSelectedAlbum(null);
|
||||
} catch (error) {
|
||||
console.error('Error updating album:', error);
|
||||
alert('Failed to update album');
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteAlbum = async () => {
|
||||
if (selectedAlbum) {
|
||||
try {
|
||||
await deleteAlbum(selectedAlbum.id);
|
||||
setShowDeleteModal(false);
|
||||
setSelectedAlbum(null);
|
||||
} catch (error) {
|
||||
console.error('Error deleting album:', error);
|
||||
alert('Failed to delete album');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const openEditModal = (album: Album) => {
|
||||
setSelectedAlbum(album);
|
||||
setShowEditModal(true);
|
||||
};
|
||||
|
||||
const openDeleteModal = (album: Album) => {
|
||||
setSelectedAlbum(album);
|
||||
setShowDeleteModal(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<AdminLayout>
|
||||
<div className="p-8">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-white mb-2">Album Management</h1>
|
||||
<p className="text-gray-400">Manage your music catalog • {albums.length} albums</p>
|
||||
</div>
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
onClick={() => setShowAddModal(true)}
|
||||
className="px-6 py-3 bg-gradient-to-r from-accent-cyan to-accent-cyan/80 hover:from-accent-cyan/90 hover:to-accent-cyan/70 rounded-lg font-semibold text-white transition-all glow-cyan flex items-center gap-2"
|
||||
>
|
||||
<FaPlus />
|
||||
Add New Album
|
||||
</motion.button>
|
||||
</div>
|
||||
|
||||
{/* Albums Grid */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{albums.map((album, index) => (
|
||||
<motion.div
|
||||
key={album.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: index * 0.1 }}
|
||||
className="glass-effect rounded-xl p-6 border border-white/10"
|
||||
>
|
||||
<div className="flex gap-4">
|
||||
{/* Album Cover */}
|
||||
<div className="w-24 h-24 rounded-lg bg-gradient-to-br from-accent-cyan/20 to-accent-orange/20 flex items-center justify-center flex-shrink-0">
|
||||
<span className="text-xs text-white/50 font-bold text-center px-2">
|
||||
{album.title}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Album Info */}
|
||||
<div className="flex-1">
|
||||
<h3 className="text-xl font-bold text-white mb-1">{album.title}</h3>
|
||||
<p className="text-sm text-gray-400 mb-2">
|
||||
{album.year} • {album.genre}
|
||||
</p>
|
||||
<p className="text-sm text-gray-500 mb-3 line-clamp-2">
|
||||
{album.description}
|
||||
</p>
|
||||
<div className="flex items-center gap-4 text-sm text-gray-400">
|
||||
<span>{album.songs.length} tracks</span>
|
||||
<span className="text-accent-orange font-bold">${album.price}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex flex-col gap-2">
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.1 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
onClick={() => openEditModal(album)}
|
||||
className="p-2 bg-accent-cyan/20 hover:bg-accent-cyan/30 rounded-lg text-accent-cyan transition-colors"
|
||||
aria-label="Edit album"
|
||||
>
|
||||
<FaEdit />
|
||||
</motion.button>
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.1 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
onClick={() => openDeleteModal(album)}
|
||||
className="p-2 bg-red-500/20 hover:bg-red-500/30 rounded-lg text-red-400 transition-colors"
|
||||
aria-label="Delete album"
|
||||
>
|
||||
<FaTrash />
|
||||
</motion.button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Track List */}
|
||||
<div className="mt-4 pt-4 border-t border-white/10">
|
||||
<p className="text-sm font-semibold text-gray-400 mb-2">Tracks:</p>
|
||||
<div className="space-y-1">
|
||||
{album.songs.slice(0, 3).map((song, idx) => (
|
||||
<div key={song.id} className="flex justify-between text-sm">
|
||||
<span className="text-gray-300">
|
||||
{idx + 1}. {song.title}
|
||||
</span>
|
||||
<span className="text-gray-500 font-mono">{song.duration}</span>
|
||||
</div>
|
||||
))}
|
||||
{album.songs.length > 3 && (
|
||||
<p className="text-xs text-gray-500">+{album.songs.length - 3} more tracks</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Modals */}
|
||||
<AddAlbumModal show={showAddModal} onClose={() => setShowAddModal(false)} onAdd={handleAddAlbum} />
|
||||
<EditAlbumModal
|
||||
show={showEditModal}
|
||||
album={selectedAlbum}
|
||||
onClose={() => {
|
||||
setShowEditModal(false);
|
||||
setSelectedAlbum(null);
|
||||
}}
|
||||
onUpdate={handleEditAlbum}
|
||||
/>
|
||||
<DeleteConfirmationModal
|
||||
show={showDeleteModal}
|
||||
album={selectedAlbum}
|
||||
onClose={() => {
|
||||
setShowDeleteModal(false);
|
||||
setSelectedAlbum(null);
|
||||
}}
|
||||
onConfirm={handleDeleteAlbum}
|
||||
/>
|
||||
</div>
|
||||
</AdminLayout>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,154 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { FaMusic, FaShoppingCart, FaDollarSign, FaUsers } from 'react-icons/fa';
|
||||
import { useAlbums } from '@/lib/AlbumsContext';
|
||||
import { Purchase } from '@/lib/types';
|
||||
import AdminLayout from '@/components/AdminLayout';
|
||||
|
||||
export default function AdminDashboard() {
|
||||
const { albums } = useAlbums();
|
||||
const [purchases, setPurchases] = useState<Purchase[]>([]);
|
||||
const [stats, setStats] = useState({
|
||||
totalAlbums: 0,
|
||||
totalPurchases: 0,
|
||||
totalRevenue: 0,
|
||||
recentPurchases: [] as Purchase[],
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
// Load purchases from localStorage
|
||||
const savedPurchases = localStorage.getItem('purchases');
|
||||
if (savedPurchases) {
|
||||
const parsedPurchases = JSON.parse(savedPurchases);
|
||||
setPurchases(parsedPurchases);
|
||||
|
||||
// Calculate stats
|
||||
const totalRevenue = parsedPurchases.reduce((total: number, purchase: Purchase) => {
|
||||
const album = albums.find((a) => a.id === purchase.albumId);
|
||||
return total + (album?.price || 0);
|
||||
}, 0);
|
||||
|
||||
setStats({
|
||||
totalAlbums: albums.length,
|
||||
totalPurchases: parsedPurchases.length,
|
||||
totalRevenue,
|
||||
recentPurchases: parsedPurchases.slice(-5).reverse(),
|
||||
});
|
||||
} else {
|
||||
setStats({
|
||||
totalAlbums: albums.length,
|
||||
totalPurchases: 0,
|
||||
totalRevenue: 0,
|
||||
recentPurchases: [],
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
|
||||
const statCards = [
|
||||
{
|
||||
icon: FaMusic,
|
||||
label: 'Total Albums',
|
||||
value: stats.totalAlbums,
|
||||
color: 'from-accent-cyan to-accent-cyan/80',
|
||||
iconBg: 'bg-accent-cyan/20',
|
||||
},
|
||||
{
|
||||
icon: FaShoppingCart,
|
||||
label: 'Total Purchases',
|
||||
value: stats.totalPurchases,
|
||||
color: 'from-accent-orange to-accent-orange/80',
|
||||
iconBg: 'bg-accent-orange/20',
|
||||
},
|
||||
{
|
||||
icon: FaDollarSign,
|
||||
label: 'Total Revenue',
|
||||
value: `$${stats.totalRevenue.toFixed(2)}`,
|
||||
color: 'from-green-500 to-green-600',
|
||||
iconBg: 'bg-green-500/20',
|
||||
},
|
||||
{
|
||||
icon: FaUsers,
|
||||
label: 'Active Users',
|
||||
value: stats.totalPurchases > 0 ? Math.ceil(stats.totalPurchases / 2) : 0,
|
||||
color: 'from-purple-500 to-purple-600',
|
||||
iconBg: 'bg-purple-500/20',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<AdminLayout>
|
||||
<div className="p-8">
|
||||
{/* Header */}
|
||||
<div className="mb-8">
|
||||
<h1 className="text-3xl font-bold text-white mb-2">Dashboard</h1>
|
||||
<p className="text-gray-400">Overview of your music store</p>
|
||||
</div>
|
||||
|
||||
{/* Stats Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
||||
{statCards.map((stat, index) => {
|
||||
const Icon = stat.icon;
|
||||
return (
|
||||
<motion.div
|
||||
key={stat.label}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: index * 0.1 }}
|
||||
className="glass-effect rounded-xl p-6 border border-white/10"
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className={`p-3 ${stat.iconBg} rounded-lg`}>
|
||||
<Icon className="text-2xl text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-400">{stat.label}</p>
|
||||
<p className="text-2xl font-bold text-white">{stat.value}</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Recent Purchases */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.4 }}
|
||||
className="glass-effect rounded-xl p-6 border border-white/10"
|
||||
>
|
||||
<h2 className="text-xl font-bold text-white mb-4">Recent Purchases</h2>
|
||||
{stats.recentPurchases.length > 0 ? (
|
||||
<div className="space-y-3">
|
||||
{stats.recentPurchases.map((purchase) => {
|
||||
const album = albums.find((a) => a.id === purchase.albumId);
|
||||
return (
|
||||
<div
|
||||
key={purchase.transactionId}
|
||||
className="flex items-center justify-between p-4 bg-white/5 rounded-lg"
|
||||
>
|
||||
<div>
|
||||
<p className="text-white font-medium">{album?.title || 'Unknown Album'}</p>
|
||||
<p className="text-sm text-gray-400">
|
||||
{new Date(purchase.purchaseDate).toLocaleDateString()} at{' '}
|
||||
{new Date(purchase.purchaseDate).toLocaleTimeString()}
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-accent-orange font-bold">${album?.price || 0}</p>
|
||||
<p className="text-xs text-gray-500 font-mono">{purchase.transactionId.slice(0, 12)}...</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-gray-400 text-center py-8">No purchases yet</p>
|
||||
)}
|
||||
</motion.div>
|
||||
</div>
|
||||
</AdminLayout>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,109 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { motion } from 'framer-motion';
|
||||
import { FaLock, FaUser } from 'react-icons/fa';
|
||||
import { useAdmin } from '@/lib/AdminContext';
|
||||
|
||||
export default function AdminLoginPage() {
|
||||
const [username, setUsername] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const { login } = useAdmin();
|
||||
const router = useRouter();
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError('');
|
||||
|
||||
const success = login(username, password);
|
||||
if (success) {
|
||||
router.push('/admin/dashboard');
|
||||
} else {
|
||||
setError('Invalid credentials. Try admin / admin123');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-primary-900 via-primary-800 to-primary-900">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="w-full max-w-md"
|
||||
>
|
||||
<div className="glass-effect rounded-2xl p-8 border border-white/10">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-8">
|
||||
<div className="inline-block p-4 bg-accent-cyan/20 rounded-full mb-4">
|
||||
<FaLock className="text-4xl text-accent-cyan" />
|
||||
</div>
|
||||
<h1 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-accent-cyan to-accent-orange mb-2">
|
||||
Admin Panel
|
||||
</h1>
|
||||
<p className="text-gray-400">Sign in to manage your music store</p>
|
||||
</div>
|
||||
|
||||
{/* Login Form */}
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||||
<FaUser className="inline mr-2" />
|
||||
Username
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
placeholder="admin"
|
||||
className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-lg focus:border-accent-cyan focus:outline-none focus:ring-2 focus:ring-accent-cyan/50 text-white placeholder-gray-500"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||||
<FaLock className="inline mr-2" />
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="••••••••"
|
||||
className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-lg focus:border-accent-cyan focus:outline-none focus:ring-2 focus:ring-accent-cyan/50 text-white placeholder-gray-500"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="p-3 bg-red-500/20 border border-red-500/50 rounded-lg text-red-300 text-sm"
|
||||
>
|
||||
{error}
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full py-3 bg-gradient-to-r from-accent-cyan to-accent-cyan/80 hover:from-accent-cyan/90 hover:to-accent-cyan/70 rounded-lg font-semibold text-white transition-all glow-cyan"
|
||||
>
|
||||
Sign In
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{/* Demo Credentials */}
|
||||
<div className="mt-6 p-4 bg-white/5 rounded-lg">
|
||||
<p className="text-xs text-gray-400 text-center">
|
||||
Demo Credentials:<br />
|
||||
<span className="text-accent-cyan">Username: admin</span><br />
|
||||
<span className="text-accent-cyan">Password: admin123</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,162 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { FaDownload, FaSearch } from 'react-icons/fa';
|
||||
import { useAlbums } from '@/lib/AlbumsContext';
|
||||
import { Purchase } from '@/lib/types';
|
||||
import AdminLayout from '@/components/AdminLayout';
|
||||
|
||||
export default function AdminPurchasesPage() {
|
||||
const { albums } = useAlbums();
|
||||
const [purchases, setPurchases] = useState<Purchase[]>([]);
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
const savedPurchases = localStorage.getItem('purchases');
|
||||
if (savedPurchases) {
|
||||
setPurchases(JSON.parse(savedPurchases).reverse());
|
||||
}
|
||||
}, []);
|
||||
|
||||
const filteredPurchases = purchases.filter((purchase) => {
|
||||
const album = albums.find((a) => a.id === purchase.albumId);
|
||||
return (
|
||||
album?.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
purchase.transactionId.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
);
|
||||
});
|
||||
|
||||
const totalRevenue = purchases.reduce((total, purchase) => {
|
||||
const album = albums.find((a) => a.id === purchase.albumId);
|
||||
return total + (album?.price || 0);
|
||||
}, 0);
|
||||
|
||||
const exportToCSV = () => {
|
||||
const headers = ['Date', 'Time', 'Transaction ID', 'Album', 'Price'];
|
||||
const rows = purchases.map((purchase) => {
|
||||
const album = albums.find((a) => a.id === purchase.albumId);
|
||||
const date = new Date(purchase.purchaseDate);
|
||||
return [
|
||||
date.toLocaleDateString(),
|
||||
date.toLocaleTimeString(),
|
||||
purchase.transactionId,
|
||||
album?.title || 'Unknown',
|
||||
`$${album?.price || 0}`,
|
||||
];
|
||||
});
|
||||
|
||||
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);
|
||||
};
|
||||
|
||||
return (
|
||||
<AdminLayout>
|
||||
<div className="p-8">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-white mb-2">Purchase History</h1>
|
||||
<p className="text-gray-400">
|
||||
{purchases.length} total purchases • ${totalRevenue.toFixed(2)} revenue
|
||||
</p>
|
||||
</div>
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
onClick={exportToCSV}
|
||||
className="px-6 py-3 bg-gradient-to-r from-accent-orange to-accent-orange/80 hover:from-accent-orange/90 hover:to-accent-orange/70 rounded-lg font-semibold text-white transition-all glow-orange flex items-center gap-2"
|
||||
>
|
||||
<FaDownload />
|
||||
Export CSV
|
||||
</motion.button>
|
||||
</div>
|
||||
|
||||
{/* Search */}
|
||||
<div className="mb-6">
|
||||
<div className="relative">
|
||||
<FaSearch className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400" />
|
||||
<input
|
||||
type="text"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
placeholder="Search by album name or transaction ID..."
|
||||
className="w-full pl-12 pr-4 py-3 bg-white/5 border border-white/10 rounded-lg focus:border-accent-cyan focus:outline-none focus:ring-2 focus:ring-accent-cyan/50 text-white placeholder-gray-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Purchases Table */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="glass-effect rounded-xl border border-white/10 overflow-hidden"
|
||||
>
|
||||
{filteredPurchases.length > 0 ? (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead className="bg-white/5 border-b border-white/10">
|
||||
<tr>
|
||||
<th className="text-left p-4 text-sm font-semibold text-gray-400">Date & Time</th>
|
||||
<th className="text-left p-4 text-sm font-semibold text-gray-400">Transaction ID</th>
|
||||
<th className="text-left p-4 text-sm font-semibold text-gray-400">Album</th>
|
||||
<th className="text-left p-4 text-sm font-semibold text-gray-400">Genre</th>
|
||||
<th className="text-right p-4 text-sm font-semibold text-gray-400">Price</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filteredPurchases.map((purchase, index) => {
|
||||
const album = albums.find((a) => a.id === purchase.albumId);
|
||||
const date = new Date(purchase.purchaseDate);
|
||||
|
||||
return (
|
||||
<motion.tr
|
||||
key={purchase.transactionId}
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: index * 0.05 }}
|
||||
className="border-b border-white/5 hover:bg-white/5 transition-colors"
|
||||
>
|
||||
<td className="p-4 text-white">
|
||||
<div className="text-sm">{date.toLocaleDateString()}</div>
|
||||
<div className="text-xs text-gray-500">{date.toLocaleTimeString()}</div>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<code className="text-xs text-accent-cyan bg-accent-cyan/10 px-2 py-1 rounded">
|
||||
{purchase.transactionId}
|
||||
</code>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<div className="text-white font-medium">{album?.title || 'Unknown'}</div>
|
||||
<div className="text-xs text-gray-500">{album?.songs.length} tracks</div>
|
||||
</td>
|
||||
<td className="p-4 text-gray-400 text-sm">{album?.genre}</td>
|
||||
<td className="p-4 text-right">
|
||||
<span className="text-accent-orange font-bold">${album?.price || 0}</span>
|
||||
</td>
|
||||
</motion.tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-12 text-center">
|
||||
<p className="text-gray-400">
|
||||
{searchTerm ? 'No purchases found matching your search' : 'No purchases yet'}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
</div>
|
||||
</AdminLayout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user