main: add many things to app :)

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

app/page.tsx

@@ -19,14 +19,30 @@ export default function Home() {
   const [latestPurchase, setLatestPurchase] = useState<Purchase | null>(null);
   const [cartOpen, setCartOpen] = useState(false);
 
-  // Load purchases from localStorage on mount
+  // Load purchases from localStorage and API on mount
   useEffect(() => {
     const savedPurchases = localStorage.getItem('purchases');
     if (savedPurchases) {
       const parsedPurchases = JSON.parse(savedPurchases);
       setPurchases(parsedPurchases);
-      setPurchasedAlbums(parsedPurchases.map((p: Purchase) => p.albumId));
     }
+
+    // Fetch approved purchases from API
+    const fetchPurchases = async () => {
+      try {
+        const response = await fetch('/api/purchases');
+        if (response.ok) {
+          const apiPurchases = await response.json();
+          // Only include approved purchases for determining access
+          const approvedPurchases = apiPurchases.filter((p: Purchase) => p.approvalStatus === 'approved');
+          setPurchasedAlbums(approvedPurchases.map((p: Purchase) => p.albumId));
+        }
+      } catch (error) {
+        console.error('Error fetching purchases:', error);
+      }
+    };
+
+    fetchPurchases();
   }, []);
 
   const handlePlayAlbum = (album: Album) => {
@@ -42,11 +58,12 @@ export default function Home() {
       albumId,
       transactionId,
       purchaseDate: new Date(),
+      approvalStatus: 'pending',
     };
 
     const updatedPurchases = [...purchases, purchase];
     setPurchases(updatedPurchases);
-    setPurchasedAlbums([...purchasedAlbums, albumId]);
+    // Don't add to purchasedAlbums yet - wait for approval
     setLatestPurchase(purchase);
 
     // Save to localStorage