payment

payment

payment

// --- Admin Panel for Viewing Payments ---

import React, { useEffect, useState } from 'react';

import axios from 'axios';

function AdminPayments() {

  const [payments, setPayments] = useState([]);

  useEffect(() => {

    axios.get('http://localhost:5000/api/payments')

      .then(res => setPayments(res.data))

      .catch(err => console.error('Error fetching payments', err));

  }, []);

  return (

    <div className="p-4 max-w-4xl mx-auto">

      <h2 className="text-2xl font-bold mb-4">पेमेंट तपशील</h2>

      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">

        {payments.map(payment => (

          <div key={payment._id} className="border p-3 rounded-xl shadow">

            <p><strong>नाव:</strong> {payment.name}</p>

            <p><strong>रक्कम:</strong> ₹{payment.amount}</p>

            <img src={`http://localhost:5000/uploads/${payment.screenshot}`} alt="screenshot" className="w-full h-40 object-cover mt-2 rounded" />

            <p className="text-sm text

React आणि Node.js मध्ये UPI QR पेमेंट + Screenshot अपलोड सिस्टीम तयार केली आहे.

यूजर पेमेंट केल्यावर त्याचं नाव, रक्कम आणि स्क्रीनशॉट सबमिट करू शकतो, आणि admin त्याचं verification करू शकतो.

आता हे Live करायचं असेल तर:

uploads/ फोल्डर backend मध्ये तयार करा

React आणि Express सर्व्हर चालवा (npm start)

QR कोड /public मध्ये टाका (upi_qr_code.png)

आता पुढचं काय करू – Admin panel मध्ये हे पेमेंट्स दिसण्याचं फीचर हवंय का?

// --- Admin Panel for Viewing Payments ---

import React, { useEffect, useState } from 'react';

import axios from 'axios';

function AdminPayments() {

  const [payments, setPayments] = useState([]);

  useEffect(() => {

    axios.get('http://localhost:5000/api/payments')

      .then(res => setPayments(res.data))

      .catch(err => console.error('Error fetching payments', err));

  }, []);

  return (

    <div className="p-4 max-w-4xl mx-auto">

      <h2 className="text-2xl font-bold mb-4">पेमेंट तपशील</h2>

      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">

        {payments.map(payment => (

          <div key={payment._id} className="border p-3 rounded-xl shadow">

            <p><strong>नाव:</strong> {payment.name}</p>

            <p><strong>रक्कम:</strong> ₹{payment.amount}</p>

            <img src={`http://localhost:5000/uploads/${payment.screenshot}`} alt="screenshot" className="w-full h-40 object-cover mt-2 rounded" />

            <p className="text-sm text

React आणि Node.js मध्ये UPI QR पेमेंट + Screenshot अपलोड सिस्टीम तयार केली आहे.

यूजर पेमेंट केल्यावर त्याचं नाव, रक्कम आणि स्क्रीनशॉट सबमिट करू शकतो, आणि admin त्याचं verification करू शकतो.

आता हे Live करायचं असेल तर:

uploads/ फोल्डर backend मध्ये तयार करा

React आणि Express सर्व्हर चालवा (npm start)

QR कोड /public मध्ये टाका (upi_qr_code.png)

आता पुढचं काय करू – Admin panel मध्ये हे पेमेंट्स दिसण्याचं फीचर हवंय का?

// --- Admin Panel for Viewing Payments ---
import React, { useEffect, useState } from 'react';
import axios from 'axios';

function AdminPayments() {
  const [payments, setPayments] = useState([]);

  useEffect(() => {
    axios.get('http://localhost:5000/api/payments')
      .then(res => setPayments(res.data))
      .catch(err => console.error('Error fetching payments', err));
  }, []);

  return (
    

      
पेमेंट तपशील
      

        {payments.map(payment => (
          

            
नाव: {payment.name}
            
रक्कम: ₹{payment.amount}
            
            
{new Date(payment.createdAt).toLocaleString()}
          
        ))}
      
    
  );
}

export default AdminPayments;

// --- Backend GET Route to fetch payments ---
// Add to server/index.js:
app.use('/uploads', express.static('uploads'));

app.get('/api/payments', async (req, res) => {
  const payments = await Payment.find().sort({ createdAt: -1 });
  res.json(payments);
});

Admin Panel मध्ये आता सर्व पेमेंट सबमिशन्स दिसतील – नाव, रक्कम, आणि स्क्रीनशॉटसह.

ज्यावेळी तुम्ही याचा सर्व्हर चालू करता:

• Screenshot uploads/ फोल्डरमध्ये सेव्ह होईल
• http://localhost:5000/uploads/<filename> लिंक React मध्ये वापरली जाते

आता हवं असल्यास:

• पेमेंट Status बदलण्याचा ऑप्शन (Pending/Approved)
• ऑर्डरशी लिंक करणं
• एक्सेलमध्ये एक्सपोर्ट

हे featuresही अ‍ॅड करून देतो. सांगा हवंय का?