nfel/podzahr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

main: vibe coded app to feel like paper

Browse Source 
Signed-off-by: nfel <nfilsaraee@gmail.com>
This commit is contained in:
nfel
2025-12-30 00:00:16 +03:30
parent acbaebb947
commit 91c149e92e
27 changed files with 901 additions and 8696 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/admin/purchases/page.tsx
+24 -23
View File
@@ -5,6 +5,7 @@ import { motion } from 'framer-motion';
import { FaDownload, FaSearch } 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() {
@@ -42,7 +43,7 @@ export default function AdminPurchasesPage() {
date.toLocaleTimeString(),
purchase.transactionId,
album?.title || 'Unknown',
`$${album?.price || 0}`,
formatPrice(album?.price || 0),
];
});
@@ -64,16 +65,16 @@ export default function AdminPurchasesPage() {
{/* 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
<h1 className="text-3xl font-bold text-paper-dark mb-2 border-b-4 border-paper-dark inline-block pb-1">Purchase History</h1>
<p className="text-paper-gray mt-4">
{purchases.length} total purchases • {formatPrice(totalRevenue)} 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"
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
@@ -83,13 +84,13 @@ export default function AdminPurchasesPage() {
{/* Search */}
<div className="mb-6">
<div className="relative">
<FaSearch className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400" />
<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 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"
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>
@@ -98,18 +99,18 @@ export default function AdminPurchasesPage() {
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
className="glass-effect rounded-xl border border-white/10 overflow-hidden"
className="paper-card border-2 border-paper-brown shadow-paper overflow-hidden"
>
{filteredPurchases.length > 0 ? (
<div className="overflow-x-auto">
<table className="w-full">
<thead className="bg-white/5 border-b border-white/10">
<thead className="bg-paper-brown/20 border-b-2 border-paper-brown">
<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>
<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">Album</th>
<th className="text-left p-4 text-sm font-semibold text-paper-dark">Genre</th>
<th className="text-right p-4 text-sm font-semibold text-paper-dark">Price</th>
</tr>
</thead>
<tbody>
@@ -123,24 +124,24 @@ export default function AdminPurchasesPage() {
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"
className="border-b border-paper-brown/30 hover:bg-paper-sand/50 transition-colors"
>
<td className="p-4 text-white">
<td className="p-4 text-paper-dark">
<div className="text-sm">{date.toLocaleDateString()}</div>
<div className="text-xs text-gray-500">{date.toLocaleTimeString()}</div>
<div className="text-xs text-paper-gray">{date.toLocaleTimeString()}</div>
</td>
<td className="p-4">
<code className="text-xs text-accent-cyan bg-accent-cyan/10 px-2 py-1 rounded">
<code className="text-xs text-paper-brown bg-paper-brown/10 px-2 py-1 border border-paper-brown">
{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>
<div className="text-paper-dark font-medium">{album?.title || 'Unknown'}</div>
<div className="text-xs text-paper-gray">{album?.songs.length} tracks</div>
</td>
<td className="p-4 text-gray-400 text-sm">{album?.genre}</td>
<td className="p-4 text-paper-gray text-sm">{album?.genre}</td>
<td className="p-4 text-right">
<span className="text-accent-orange font-bold">${album?.price || 0}</span>
<span className="text-paper-brown font-bold">{formatPrice(album?.price || 0)}</span>
</td>
</motion.tr>
);
@@ -150,7 +151,7 @@ export default function AdminPurchasesPage() {
</div>
) : (
<div className="p-12 text-center">
<p className="text-gray-400">
<p className="text-paper-gray">
{searchTerm ? 'No purchases found matching your search' : 'No purchases yet'}
</p>
</div>