main: vibe coded app to feel like paper

Signed-off-by: nfel <nfilsaraee@gmail.com>

app/admin/dashboard/page.tsx

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