main: second iter

Signed-off-by: nfel <nfilsaraee@gmail.com>
2025-12-27 22:41:36 +03:30
parent 8a7842e263
commit 9a7e627329
33 changed files with 4865 additions and 81 deletions
@@ -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>
+  );
+}