From 0488eb9febabdc33290a0abe6cb4a030e78bfb84 Mon Sep 17 00:00:00 2001 From: vickytechkey Date: Sat, 15 Aug 2026 19:54:23 +0530 Subject: [PATCH] Remove mock data and replace with real-time fetch requests for sellers and customers --- src/pages/customers/CustomerDetail.jsx | 183 +++++++++++++++---------- src/pages/customers/CustomerList.jsx | 114 +++++++++------ src/pages/sellers/SellerDetail.jsx | 167 +++++++++++----------- src/pages/sellers/SellerList.jsx | 109 +++++++++------ 4 files changed, 328 insertions(+), 245 deletions(-) diff --git a/src/pages/customers/CustomerDetail.jsx b/src/pages/customers/CustomerDetail.jsx index e9079cb..ab37c0c 100644 --- a/src/pages/customers/CustomerDetail.jsx +++ b/src/pages/customers/CustomerDetail.jsx @@ -1,27 +1,58 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import { useParams, Link, useNavigate } from 'react-router-dom'; import StatusBadge from '../../components/StatusBadge'; +import { API_BASE_URL } from '../../config'; +import { useAuth } from '../../context/AuthContext'; const CustomerDetail = () => { const { id } = useParams(); + const { token } = useAuth(); const navigate = useNavigate(); - const [customer, setCustomer] = useState({ - id: id, - name: 'Amit Kumar', - email: 'amit@gmail.com', - phone: '+91 99887 76655', - status: 'active', - registered: '2026-03-04', - address: 'Flat 301, Silver Heights, Sector 15, Gurgaon, Haryana - 122001', - orders: [ - { id: 'ORD88761', date: '2026-08-10', total: '₹2,499', paymentStatus: 'completed', trackingStatus: 'delivered', txId: 'TXN_PHPE_88761234' }, - { id: 'ORD88120', date: '2026-08-01', total: '₹1,150', paymentStatus: 'completed', trackingStatus: 'returned', txId: 'TXN_PHPE_88120456' } - ] - }); + const [customer, setCustomer] = useState(null); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); - const handleStatusChange = (newStatus) => { - setCustomer({ ...customer, status: newStatus }); - alert(`Customer account status changed to ${newStatus}`); + const fetchCustomerData = async () => { + try { + setLoading(true); + const res = await fetch(`${API_BASE_URL}/customers/${id}/`, { + headers: { 'Authorization': `Bearer ${token}` } + }); + if (!res.ok) throw new Error('Failed to fetch customer detail'); + const data = await res.json(); + + // Fallback: If Django database doesn't have orders relationship, initialize empty array + if (!data.orders) { + data.orders = []; + } + setCustomer(data); + } catch (err) { + setError(err.message); + } finally { + setLoading(false); + } + }; + + useEffect(() => { + fetchCustomerData(); + }, [id, token]); + + const handleAction = async (actionPath, payload = {}) => { + try { + const res = await fetch(`${API_BASE_URL}/customers/${id}/${actionPath}/`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'Authorization': `Bearer ${token}` + }, + body: JSON.stringify(payload) + }); + if (!res.ok) throw new Error(`Operation failed`); + alert(`Customer status updated!`); + fetchCustomerData(); // reload + } catch (err) { + alert(`Error: ${err.message}`); + } }; const handleCheckPaymentStatus = (orderId, txnId) => { @@ -36,6 +67,10 @@ const CustomerDetail = () => { navigate(`/orders/return?orderId=${orderId}&address=${encodeURIComponent(customer.address)}`); }; + if (loading) return
Loading customer details...
; + if (error) return
Error: {error}
; + if (!customer) return
Customer profile not found.
; + return (
@@ -45,18 +80,18 @@ const CustomerDetail = () => {

{customer.name}

-

Customer ID: #{customer.id} • Registered: {customer.registered}

+

Customer ID: #{customer.id}

{customer.status === 'active' ? ( - + ) : ( - + )} {customer.status !== 'banned' && ( - + )} - +
@@ -85,58 +120,60 @@ const CustomerDetail = () => {

Order History & Logs

-
- - - - - - - - - - - - - {customer.orders.map(order => ( - - - - - - - + {customer.orders && customer.orders.length > 0 ? ( +
+
Order IDDateTotalPaymentDeliveryActions
{order.id}{order.date}{order.total} -
- - - {order.trackingStatus === 'delivered' && ( - - )} -
-
+ + + + + + + - ))} - -
Order IDTotalPaymentDeliveryActions
-
+ + + {customer.orders.map(order => ( + + #{order.id} + ₹{order.amount} + + + +
+ + + {order.delivery_status === 'delivered' && ( + + )} +
+ + + ))} + + +
+ ) : ( +

No order history logs found for this user.

+ )}
diff --git a/src/pages/customers/CustomerList.jsx b/src/pages/customers/CustomerList.jsx index c30b8a3..ebd8340 100644 --- a/src/pages/customers/CustomerList.jsx +++ b/src/pages/customers/CustomerList.jsx @@ -1,22 +1,42 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import { Link } from 'react-router-dom'; import StatusBadge from '../../components/StatusBadge'; +import { API_BASE_URL } from '../../config'; +import { useAuth } from '../../context/AuthContext'; const CustomerList = () => { + const { token } = useAuth(); const [searchTerm, setSearchTerm] = useState(''); - - const [customers] = useState([ - { id: 1001, name: 'Amit Kumar', email: 'amit@gmail.com', phone: '+91 99887 76655', status: 'active', registered: '2026-03-04' }, - { id: 1002, name: 'Priya Sharma', email: 'priya.s@yahoo.com', phone: '+91 88776 65544', status: 'active', registered: '2026-06-15' }, - { id: 1003, name: 'Rohan Verma', email: 'rohan.v@outlook.com', phone: '+91 77665 54433', status: 'suspended', registered: '2026-01-20' }, - { id: 1004, name: 'Sneha Patel', email: 'sneha@p.co.in', phone: '+91 66554 43322', status: 'banned', registered: '2026-07-02' }, - ]); + const [customers, setCustomers] = useState([]); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); - const filteredCustomers = customers.filter(cust => - cust.name.toLowerCase().includes(searchTerm.toLowerCase()) || - cust.email.toLowerCase().includes(searchTerm.toLowerCase()) || - cust.phone.includes(searchTerm) - ); + useEffect(() => { + const fetchCustomers = async () => { + try { + setLoading(true); + // Include search query parameter if any + const url = searchTerm + ? `${API_BASE_URL}/customers/?search=${encodeURIComponent(searchTerm)}` + : `${API_BASE_URL}/customers/`; + + const res = await fetch(url, { + headers: { + 'Authorization': `Bearer ${token}` + } + }); + if (!res.ok) throw new Error('Failed to fetch customers'); + const data = await res.json(); + setCustomers(data); + } catch (err) { + setError(err.message); + } finally { + setLoading(false); + } + }; + + fetchCustomers(); + }, [searchTerm, token]); return (
@@ -27,44 +47,48 @@ const CustomerList = () => { setSearchTerm(e.target.value)} />
-
- - - - - - - - - - - - - - {filteredCustomers.map(cust => ( - - - - - - - - + {loading ? ( +
Loading customer profiles...
+ ) : error ? ( +
Error: {error}
+ ) : ( +
+
Customer IDNameEmailPhoneStatusRegisteredActions
#{cust.id}{cust.name}{cust.email}{cust.phone}{cust.registered} - - 👁️ View Detail - -
+ + + + + + + + - ))} - -
Customer IDNameEmailPhoneStatusActions
-
+ + + {customers.map(cust => ( + + #{cust.id} + {cust.name} + {cust.email} + {cust.phone} + + + + 👁️ View Detail + + + + ))} + + + + )} ); diff --git a/src/pages/sellers/SellerDetail.jsx b/src/pages/sellers/SellerDetail.jsx index 9d37b73..4e4cfda 100644 --- a/src/pages/sellers/SellerDetail.jsx +++ b/src/pages/sellers/SellerDetail.jsx @@ -1,42 +1,80 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import { useParams, Link } from 'react-router-dom'; import StatusBadge from '../../components/StatusBadge'; import DocumentViewer from '../../components/DocumentViewer'; +import { API_BASE_URL } from '../../config'; +import { useAuth } from '../../context/AuthContext'; const SellerDetail = () => { const { id } = useParams(); + const { token } = useAuth(); const [activeTab, setActiveTab] = useState('profile'); - const [seller, setSeller] = useState({ - id: id, - name: 'ElectroHub Retailers', - email: 'sales@electrohub.in', - phone: '+91 98765 43210', - status: 'pending_approval', - joined: '2026-08-14', - address: '404, Tech Park, Block C, Bangalore, India', - gstin: '29AAAAA1111A1Z1', - pan: 'ABCDE1234F', - walletBalance: '₹0.00', - documents: [ - { type: 'Aadhar Card', filename: 'aadhar_back_front.pdf' }, - { type: 'PAN Card', filename: 'pan_card_copy.jpg' }, - { type: 'GSTIN Certificate', filename: 'gst_cert_2026.pdf' } - ], - products: [ - { id: 101, name: 'Ultra Wireless Headset 5.0', price: '₹2,499', stock: 45, status: 'pending_approval' }, - { id: 102, name: 'ElectroHub Mechanical Keyboard', price: '₹4,999', stock: 12, status: 'approved' } - ] - }); + const [seller, setSeller] = useState(null); + const [documents, setDocuments] = useState([]); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); - const handleStatusChange = (newStatus) => { - setSeller({ ...seller, status: newStatus }); - alert(`Seller status successfully updated to ${newStatus}`); + const fetchSellerData = async () => { + try { + setLoading(true); + // Fetch profile + const profileRes = await fetch(`${API_BASE_URL}/sellers/${id}/`, { + headers: { 'Authorization': `Bearer ${token}` } + }); + if (!profileRes.ok) throw new Error('Failed to load seller profile'); + const profileData = await profileRes.json(); + + // Fetch documents + try { + const docRes = await fetch(`${API_BASE_URL}/sellers/${id}/documents/`, { + headers: { 'Authorization': `Bearer ${token}` } + }); + if (docRes.ok) { + const docData = await docRes.json(); + setDocuments(docData); + } + } catch (docErr) { + console.warn("Failed to load documents", docErr); + } + + setSeller(profileData); + } catch (err) { + setError(err.message); + } finally { + setLoading(false); + } + }; + + useEffect(() => { + fetchSellerData(); + }, [id, token]); + + const handleAction = async (actionPath, payload = {}) => { + try { + const res = await fetch(`${API_BASE_URL}/sellers/${id}/${actionPath}/`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'Authorization': `Bearer ${token}` + }, + body: JSON.stringify(payload) + }); + if (!res.ok) throw new Error(`Operation failed`); + alert(`Action successfully performed!`); + fetchSellerData(); // reload status + } catch (err) { + alert(`Error: ${err.message}`); + } }; const handleResetPassword = () => { - alert('Password reset link triggered and sent via WhatsApp Cloud API successfully.'); + handleAction('reset-password'); }; + if (loading) return
Loading seller details...
; + if (error) return
Error: {error}
; + if (!seller) return
Seller profile not found.
; + return (
@@ -46,34 +84,40 @@ const SellerDetail = () => {

{seller.name}

-

Seller ID: {seller.id} • Joined: {seller.joined}

+

Seller ID: {seller.id} • Joined: {seller.joined_at ? new Date(seller.joined_at).toLocaleDateString() : 'N/A'}

{seller.status === 'pending_approval' && ( <> - - + + )} {seller.status === 'approved' && ( - + )} {seller.status === 'suspended' && ( <> - - + + )} - {seller.status === 'banned' && ( - - )}
{/* Tabs */}
- {['profile', 'documents', 'products', 'wallet'].map((tab) => ( + {['profile', 'documents'].map((tab) => ( -
-

Payout Transactions

-

No withdrawal payouts processed yet.

-
+ )}
); diff --git a/src/pages/sellers/SellerList.jsx b/src/pages/sellers/SellerList.jsx index 9006f1d..5bdd6d4 100644 --- a/src/pages/sellers/SellerList.jsx +++ b/src/pages/sellers/SellerList.jsx @@ -1,24 +1,47 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import { Link } from 'react-router-dom'; import StatusBadge from '../../components/StatusBadge'; +import { API_BASE_URL } from '../../config'; +import { useAuth } from '../../context/AuthContext'; const SellerList = () => { + const { token } = useAuth(); const [filter, setFilter] = useState('all'); const [searchTerm, setSearchTerm] = useState(''); + const [sellers, setSellers] = useState([]); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); - const [sellers] = useState([ - { id: 1, name: 'Siva Garments', email: 'siva@garments.com', status: 'approved', joined: '2026-05-12', revenue: '₹3,45,000' }, - { id: 2, name: 'ElectroHub Retailers', email: 'sales@electrohub.in', status: 'pending_approval', joined: '2026-08-14', revenue: '₹0' }, - { id: 3, name: 'A1 Spices Ltd', email: 'info@a1spices.com', status: 'suspended', joined: '2026-02-10', revenue: '₹1,20,000' }, - { id: 4, name: 'Apex Footwear', email: 'apex@footwear.com', status: 'approved', joined: '2026-06-01', revenue: '₹5,10,000' }, - { id: 5, name: 'Trendy Decors', email: 'decor@trendy.com', status: 'banned', joined: '2026-04-18', revenue: '₹85,000' }, - ]); + useEffect(() => { + const fetchSellers = async () => { + try { + setLoading(true); + const url = filter === 'all' + ? `${API_BASE_URL}/sellers/` + : `${API_BASE_URL}/sellers/?status=${filter}`; + + const res = await fetch(url, { + headers: { + 'Authorization': `Bearer ${token}` + } + }); + if (!res.ok) throw new Error('Failed to fetch sellers'); + const data = await res.json(); + setSellers(data); + } catch (err) { + setError(err.message); + } finally { + setLoading(false); + } + }; + + fetchSellers(); + }, [filter, token]); const filteredSellers = sellers.filter(seller => { - const matchesStatus = filter === 'all' || seller.status === filter; const matchesSearch = seller.name.toLowerCase().includes(searchTerm.toLowerCase()) || seller.email.toLowerCase().includes(searchTerm.toLowerCase()); - return matchesStatus && matchesSearch; + return matchesSearch; }); return ( @@ -51,38 +74,42 @@ const SellerList = () => { -
- - - - - - - - - - - - - {filteredSellers.map((seller) => ( - - - - - - - + {loading ? ( +
Loading seller profiles...
+ ) : error ? ( +
Error: {error}
+ ) : ( +
+
Seller NameEmailStatusJoined DateTotal SalesActions
{seller.name}{seller.email} - - {seller.joined}{seller.revenue} - - 👁️ View Details - -
+ + + + + + + - ))} - -
Seller NameEmailStatusJoined DateActions
-
+ + + {filteredSellers.map((seller) => ( + + {seller.name} + {seller.email} + + + + {seller.joined_at ? new Date(seller.joined_at).toLocaleDateString() : 'N/A'} + + + 👁️ View Details + + + + ))} + + + + )} );