feat: add Telegram album purchase bot

app/admin/dashboard/page.tsx

@@ -10,7 +10,6 @@ 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,
@@ -19,33 +18,27 @@ export default function AdminDashboard() {
   });
 
   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);
-
+    const loadStats = async () => {
+      const response = await fetch('/api/purchases');
+      if (!response.ok) return;
+      const allPurchases = await response.json() as Purchase[];
+      const totalRevenue = allPurchases
+        .filter((purchase) => purchase.approvalStatus === 'approved')
+        .reduce((total, purchase) => {
+          const ids = purchase.albumIds || [purchase.albumId];
+          return total + albums
+            .filter((album) => ids.includes(album.id))
+            .reduce((subtotal, album) => subtotal + album.price, 0);
+        }, 0);
       setStats({
         totalAlbums: albums.length,
-        totalPurchases: parsedPurchases.length,
+        totalPurchases: allPurchases.length,
         totalRevenue,
-        recentPurchases: parsedPurchases.slice(-5).reverse(),
+        recentPurchases: allPurchases.slice(0, 5),
       });
-    } else {
-      setStats({
-        totalAlbums: albums.length,
-        totalPurchases: 0,
-        totalRevenue: 0,
-        recentPurchases: [],
-      });
-    }
-  }, []);
+    };
+    void loadStats();
+  }, [albums]);
 
   const statCards = [
     {
@@ -124,21 +117,26 @@ export default function AdminDashboard() {
           {stats.recentPurchases.length > 0 ? (
             <div className="space-y-3">
               {stats.recentPurchases.map((purchase) => {
-                const album = albums.find((a) => a.id === purchase.albumId);
+                const ids = purchase.albumIds || [purchase.albumId];
+                const purchaseAlbums = albums.filter((album) => ids.includes(album.id));
                 return (
                   <div
                     key={purchase.transactionId}
                     className="flex items-center justify-between p-4 bg-paper-light border-2 border-paper-brown/30"
                   >
                     <div>
-                      <p className="text-paper-dark font-medium">{album?.title || 'Unknown Album'}</p>
+                      <p className="text-paper-dark font-medium">
+                        {purchaseAlbums.map((album) => album.title).join(', ') || '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-paper-brown font-bold">{formatPrice(album?.price || 0)}</p>
+                      <p className="text-paper-brown font-bold">
+                        {formatPrice(purchaseAlbums.reduce((total, album) => total + album.price, 0))}
+                      </p>
                       <p className="text-xs text-paper-gray font-mono">{purchase.transactionId.slice(0, 12)}...</p>
                     </div>
                   </div>