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/albums/page.tsx
+2 -1
View File
@@ -5,6 +5,7 @@ import { motion } from 'framer-motion';
import { FaEdit, FaTrash, FaPlus } from 'react-icons/fa';
import { useAlbums } from '@/lib/AlbumsContext';
import { Album } from '@/lib/types';
import { formatPrice } from '@/lib/utils';
import AdminLayout from '@/components/AdminLayout';
import AddAlbumModal from '@/components/AddAlbumModal';
import EditAlbumModal from '@/components/EditAlbumModal';
@@ -110,7 +111,7 @@ export default function AdminAlbumsPage() {
</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>
<span className="text-accent-orange font-bold">{formatPrice(album.price)}</span>
</div>
</div>
app/admin/dashboard/page.tsx
+25 -24
View File
@@ -5,6 +5,7 @@ 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 { formatPrice } from '@/lib/utils';
import AdminLayout from '@/components/AdminLayout';
export default function AdminDashboard() {
@@ -51,29 +52,29 @@ export default function AdminDashboard() {
icon: FaMusic,
label: 'Total Albums',
value: stats.totalAlbums,
color: 'from-accent-cyan to-accent-cyan/80',
iconBg: 'bg-accent-cyan/20',
color: 'bg-paper-brown',
iconBg: 'bg-paper-brown/20',
},
{
icon: FaShoppingCart,
label: 'Total Purchases',
value: stats.totalPurchases,
color: 'from-accent-orange to-accent-orange/80',
iconBg: 'bg-accent-orange/20',
color: 'bg-paper-dark',
iconBg: 'bg-paper-dark/20',
},
{
icon: FaDollarSign,
label: 'Total Revenue',
value: `$${stats.totalRevenue.toFixed(2)}`,
color: 'from-green-500 to-green-600',
iconBg: 'bg-green-500/20',
value: formatPrice(stats.totalRevenue),
color: 'bg-paper-gray',
iconBg: 'bg-paper-gray/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',
color: 'bg-paper-brown',
iconBg: 'bg-paper-brown/30',
},
];
@@ -82,8 +83,8 @@ export default function AdminDashboard() {
<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>
<h1 className="text-3xl font-bold text-paper-dark mb-2 border-b-4 border-paper-dark inline-block pb-1">Dashboard</h1>
<p className="text-paper-gray mt-4">Overview of your music store</p>
</div>
{/* Stats Grid */}
@@ -96,15 +97,15 @@ export default function AdminDashboard() {
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"
className="paper-card p-6 border-2 border-paper-brown shadow-paper"
>
<div className="flex items-center gap-4">
<div className={`p-3 ${stat.iconBg} rounded-lg`}>
<Icon className="text-2xl text-white" />
<div className={`p-3 ${stat.iconBg} border-2 border-paper-brown`}>
<Icon className="text-2xl text-paper-dark" />
</div>
<div>
<p className="text-sm text-gray-400">{stat.label}</p>
<p className="text-2xl font-bold text-white">{stat.value}</p>
<p className="text-sm text-paper-gray">{stat.label}</p>
<p className="text-2xl font-bold text-paper-dark">{stat.value}</p>
</div>
</div>
</motion.div>
@@ -117,9 +118,9 @@ export default function AdminDashboard() {
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"
className="paper-card p-6 border-2 border-paper-brown shadow-paper"
>
<h2 className="text-xl font-bold text-white mb-4">Recent Purchases</h2>
<h2 className="text-xl font-bold text-paper-dark mb-4 border-b-2 border-paper-dark pb-2">Recent Purchases</h2>
{stats.recentPurchases.length > 0 ? (
<div className="space-y-3">
{stats.recentPurchases.map((purchase) => {
@@ -127,25 +128,25 @@ export default function AdminDashboard() {
return (
<div
key={purchase.transactionId}
className="flex items-center justify-between p-4 bg-white/5 rounded-lg"
className="flex items-center justify-between p-4 bg-paper-light border-2 border-paper-brown/30"
>
<div>
<p className="text-white font-medium">{album?.title || 'Unknown Album'}</p>
<p className="text-sm text-gray-400">
<p className="text-paper-dark font-medium">{album?.title || 'Unknown Album'}</p>
<p className="text-sm text-paper-gray">
{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>
<p className="text-paper-brown font-bold">{formatPrice(album?.price || 0)}</p>
<p className="text-xs text-paper-gray font-mono">{purchase.transactionId.slice(0, 12)}...</p>
</div>
</div>
);
})}
</div>
) : (
<p className="text-gray-400 text-center py-8">No purchases yet</p>
<p className="text-paper-gray text-center py-8">No purchases yet</p>
)}
</motion.div>
</div>
app/admin/page.tsx
+16 -16
View File
@@ -26,28 +26,28 @@ export default function AdminLoginPage() {
};
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">
<div className="min-h-screen flex items-center justify-center p-4 bg-paper-light">
<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">
<div className="paper-card p-8 border-2 border-paper-dark shadow-paper-lg">
{/* 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 className="inline-block p-4 bg-paper-brown/20 border-2 border-paper-brown mb-4">
<FaLock className="text-4xl text-paper-brown" />
</div>
<h1 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-accent-cyan to-accent-orange mb-2">
<h1 className="text-3xl font-bold text-paper-dark mb-2 border-b-4 border-paper-dark inline-block pb-1">
Admin Panel
</h1>
<p className="text-gray-400">Sign in to manage your music store</p>
<p className="text-paper-gray mt-4">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">
<label className="block text-sm font-medium text-paper-dark mb-2">
<FaUser className="inline mr-2" />
Username
</label>
@@ -56,13 +56,13 @@ export default function AdminLoginPage() {
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"
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"
required
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-300 mb-2">
<label className="block text-sm font-medium text-paper-dark mb-2">
<FaLock className="inline mr-2" />
Password
</label>
@@ -71,7 +71,7 @@ export default function AdminLoginPage() {
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"
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"
required
/>
</div>
@@ -80,7 +80,7 @@ export default function AdminLoginPage() {
<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"
className="p-3 bg-red-100 border-2 border-red-400 text-red-700 text-sm"
>
{error}
</motion.div>
@@ -88,18 +88,18 @@ export default function AdminLoginPage() {
<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"
className="w-full py-3 bg-paper-brown hover:bg-paper-dark border-2 border-paper-dark font-semibold text-paper-light transition-all shadow-paper-lg"
>
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">
<div className="mt-6 p-4 bg-paper-brown/10 border-2 border-paper-brown">
<p className="text-xs text-paper-dark text-center">
Demo Credentials:<br />
<span className="text-accent-cyan">Username: admin</span><br />
<span className="text-accent-cyan">Password: admin123</span>
<span className="text-paper-brown font-semibold">Username: admin</span><br />
<span className="text-paper-brown font-semibold">Password: admin123</span>
</p>
</div>
</div>
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>