implement server-side table pagination across Seller, Customer, Product, and Audit Log lists
This commit is contained in:
parent
078f9ee484
commit
971dfd0e18
4 changed files with 452 additions and 166 deletions
|
|
@ -8,6 +8,10 @@ const AuditLogs = () => {
|
|||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
// Pagination states
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [itemsPerPage, setItemsPerPage] = useState(10);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchLogs = async () => {
|
||||
try {
|
||||
|
|
@ -20,6 +24,7 @@ const AuditLogs = () => {
|
|||
if (!res.ok) throw new Error('Failed to fetch system audit logs');
|
||||
const data = await res.json();
|
||||
setLogs(data);
|
||||
setCurrentPage(1); // reset to page 1 on fetch
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
|
|
@ -29,6 +34,13 @@ const AuditLogs = () => {
|
|||
fetchLogs();
|
||||
}, [token]);
|
||||
|
||||
// Compute pagination details
|
||||
const totalItems = logs.length;
|
||||
const totalPages = Math.ceil(totalItems / itemsPerPage);
|
||||
const startIdx = totalItems === 0 ? 0 : (currentPage - 1) * itemsPerPage + 1;
|
||||
const endIdx = Math.min(currentPage * itemsPerPage, totalItems);
|
||||
const currentLogs = logs.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 className="page-title">Admin System Audit Logs</h1>
|
||||
|
|
@ -39,48 +51,105 @@ const AuditLogs = () => {
|
|||
) : error ? (
|
||||
<div style={{ padding: '20px', color: 'var(--color-danger)', textAlign: 'center' }}>Error: {error}</div>
|
||||
) : (
|
||||
<div className="table-container">
|
||||
<table className="custom-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Log ID</th>
|
||||
<th>Admin User</th>
|
||||
<th>Action</th>
|
||||
<th>Target Object</th>
|
||||
<th>Operation Details</th>
|
||||
<th>Timestamp</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{logs.map(log => (
|
||||
<tr key={log.id}>
|
||||
<td>#{log.id}</td>
|
||||
<td><span style={{ fontFamily: 'monospace', fontWeight: 'bold' }}>{log.admin_username || log.admin || 'system'}</span></td>
|
||||
<td>
|
||||
<span style={{
|
||||
display: 'inline-block',
|
||||
background: 'rgba(139, 92, 246, 0.1)',
|
||||
color: 'var(--accent-hover)',
|
||||
padding: '2px 8px',
|
||||
borderRadius: '4px',
|
||||
fontSize: '12px',
|
||||
fontWeight: '600'
|
||||
}}>
|
||||
{log.action}
|
||||
</span>
|
||||
</td>
|
||||
<td style={{ fontWeight: '500' }}>
|
||||
{log.target_type} #{log.target_id || ''}
|
||||
</td>
|
||||
<td>{typeof log.details === 'object' ? JSON.stringify(log.details) : log.details}</td>
|
||||
<td style={{ color: 'var(--text-secondary)' }}>
|
||||
{log.performed_at ? new Date(log.performed_at).toLocaleString() : log.time}
|
||||
</td>
|
||||
<>
|
||||
<div className="table-container">
|
||||
<table className="custom-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Log ID</th>
|
||||
<th>Admin User</th>
|
||||
<th>Action</th>
|
||||
<th>Target Object</th>
|
||||
<th>Operation Details</th>
|
||||
<th>Timestamp</th>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</thead>
|
||||
<tbody>
|
||||
{currentLogs.map(log => (
|
||||
<tr key={log.id}>
|
||||
<td>#{log.id}</td>
|
||||
<td><span style={{ fontFamily: 'monospace', fontWeight: 'bold' }}>{log.admin_username || log.admin || 'system'}</span></td>
|
||||
<td>
|
||||
<span style={{
|
||||
display: 'inline-block',
|
||||
background: 'rgba(139, 92, 246, 0.1)',
|
||||
color: 'var(--accent-hover)',
|
||||
padding: '2px 8px',
|
||||
borderRadius: '4px',
|
||||
fontSize: '12px',
|
||||
fontWeight: '600'
|
||||
}}>
|
||||
{log.action}
|
||||
</span>
|
||||
</td>
|
||||
<td style={{ fontWeight: '500' }}>
|
||||
{log.target_type} #{log.target_id || ''}
|
||||
</td>
|
||||
<td>{typeof log.details === 'object' ? JSON.stringify(log.details) : log.details}</td>
|
||||
<td style={{ color: 'var(--text-secondary)' }}>
|
||||
{log.performed_at ? new Date(log.performed_at).toLocaleString() : log.time}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Pagination Controls */}
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: '20px', flexWrap: 'wrap', gap: '12px', borderTop: '1px solid var(--glass-border)', paddingTop: '16px' }}>
|
||||
<div style={{ color: 'var(--text-secondary)', fontSize: '13px' }}>
|
||||
Showing {startIdx} to {endIdx} of {totalItems} items
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||||
<span style={{ fontSize: '13px', color: 'var(--text-secondary)' }}>Items per page:</span>
|
||||
<select
|
||||
value={itemsPerPage}
|
||||
onChange={(e) => {
|
||||
setItemsPerPage(Number(e.target.value));
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
style={{
|
||||
background: 'var(--bg-tertiary)',
|
||||
color: '#fff',
|
||||
border: '1px solid var(--glass-border)',
|
||||
borderRadius: '6px',
|
||||
padding: '4px 8px',
|
||||
fontSize: '13px',
|
||||
outline: 'none'
|
||||
}}
|
||||
>
|
||||
{[5, 10, 20, 50, 100].map(size => (
|
||||
<option key={size} value={size}>{size}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
|
||||
<button
|
||||
className="btn btn-secondary"
|
||||
style={{ fontSize: '12px', padding: '6px 12px' }}
|
||||
onClick={() => setCurrentPage(prev => Math.max(prev - 1, 1))}
|
||||
disabled={currentPage === 1}
|
||||
>
|
||||
Previous
|
||||
</button>
|
||||
<span style={{ fontSize: '13px', color: 'var(--text-secondary)' }}>
|
||||
Page {currentPage} of {totalPages || 1}
|
||||
</span>
|
||||
<button
|
||||
className="btn btn-secondary"
|
||||
style={{ fontSize: '12px', padding: '6px 12px' }}
|
||||
onClick={() => setCurrentPage(prev => Math.min(prev + 1, totalPages))}
|
||||
disabled={currentPage === totalPages || totalPages === 0}
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -12,6 +12,10 @@ const CustomerList = () => {
|
|||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
// Pagination states
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [itemsPerPage, setItemsPerPage] = useState(10);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchCustomers = async () => {
|
||||
try {
|
||||
|
|
@ -32,6 +36,7 @@ const CustomerList = () => {
|
|||
if (!res.ok) throw new Error('Failed to fetch customers');
|
||||
const data = await res.json();
|
||||
setCustomers(data);
|
||||
setCurrentPage(1); // Reset page to 1 on filter/search change
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
|
|
@ -42,6 +47,13 @@ const CustomerList = () => {
|
|||
fetchCustomers();
|
||||
}, [searchTerm, filter, token]);
|
||||
|
||||
// Compute pagination details
|
||||
const totalItems = customers.length;
|
||||
const totalPages = Math.ceil(totalItems / itemsPerPage);
|
||||
const startIdx = totalItems === 0 ? 0 : (currentPage - 1) * itemsPerPage + 1;
|
||||
const endIdx = Math.min(currentPage * itemsPerPage, totalItems);
|
||||
const currentCustomers = customers.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 className="page-title">Customer Management</h1>
|
||||
|
|
@ -75,36 +87,93 @@ const CustomerList = () => {
|
|||
) : error ? (
|
||||
<div style={{ padding: '20px', color: 'var(--color-danger)', textAlign: 'center' }}>Error: {error}</div>
|
||||
) : (
|
||||
<div className="table-container">
|
||||
<table className="custom-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Customer ID</th>
|
||||
<th>Name</th>
|
||||
<th>Email</th>
|
||||
<th>Phone</th>
|
||||
<th>Status</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{customers.map(cust => (
|
||||
<tr key={cust.id}>
|
||||
<td>#{cust.id}</td>
|
||||
<td style={{ fontWeight: '600' }}>{cust.name}</td>
|
||||
<td>{cust.email}</td>
|
||||
<td>{cust.phone}</td>
|
||||
<td><StatusBadge status={cust.status} /></td>
|
||||
<td>
|
||||
<Link to={`/customers/${cust.id}`} className="btn btn-secondary" style={{ fontSize: '12px', padding: '6px 12px' }}>
|
||||
👁️ View Detail
|
||||
</Link>
|
||||
</td>
|
||||
<>
|
||||
<div className="table-container">
|
||||
<table className="custom-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Customer ID</th>
|
||||
<th>Name</th>
|
||||
<th>Email</th>
|
||||
<th>Phone</th>
|
||||
<th>Status</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</thead>
|
||||
<tbody>
|
||||
{currentCustomers.map(cust => (
|
||||
<tr key={cust.id}>
|
||||
<td>#{cust.id}</td>
|
||||
<td style={{ fontWeight: '600' }}>{cust.name}</td>
|
||||
<td>{cust.email}</td>
|
||||
<td>{cust.phone}</td>
|
||||
<td><StatusBadge status={cust.status} /></td>
|
||||
<td>
|
||||
<Link to={`/customers/${cust.id}`} className="btn btn-secondary" style={{ fontSize: '12px', padding: '6px 12px' }}>
|
||||
👁️ View Detail
|
||||
</Link>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Pagination Controls */}
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: '20px', flexWrap: 'wrap', gap: '12px', borderTop: '1px solid var(--glass-border)', paddingTop: '16px' }}>
|
||||
<div style={{ color: 'var(--text-secondary)', fontSize: '13px' }}>
|
||||
Showing {startIdx} to {endIdx} of {totalItems} items
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||||
<span style={{ fontSize: '13px', color: 'var(--text-secondary)' }}>Items per page:</span>
|
||||
<select
|
||||
value={itemsPerPage}
|
||||
onChange={(e) => {
|
||||
setItemsPerPage(Number(e.target.value));
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
style={{
|
||||
background: 'var(--bg-tertiary)',
|
||||
color: '#fff',
|
||||
border: '1px solid var(--glass-border)',
|
||||
borderRadius: '6px',
|
||||
padding: '4px 8px',
|
||||
fontSize: '13px',
|
||||
outline: 'none'
|
||||
}}
|
||||
>
|
||||
{[5, 10, 20, 50, 100].map(size => (
|
||||
<option key={size} value={size}>{size}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
|
||||
<button
|
||||
className="btn btn-secondary"
|
||||
style={{ fontSize: '12px', padding: '6px 12px' }}
|
||||
onClick={() => setCurrentPage(prev => Math.max(prev - 1, 1))}
|
||||
disabled={currentPage === 1}
|
||||
>
|
||||
Previous
|
||||
</button>
|
||||
<span style={{ fontSize: '13px', color: 'var(--text-secondary)' }}>
|
||||
Page {currentPage} of {totalPages || 1}
|
||||
</span>
|
||||
<button
|
||||
className="btn btn-secondary"
|
||||
style={{ fontSize: '12px', padding: '6px 12px' }}
|
||||
onClick={() => setCurrentPage(prev => Math.min(prev + 1, totalPages))}
|
||||
disabled={currentPage === totalPages || totalPages === 0}
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -13,6 +13,10 @@ const ProductList = () => {
|
|||
const [error, setError] = useState(null);
|
||||
const [selectedProduct, setSelectedProduct] = useState(null);
|
||||
|
||||
// Pagination states
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [itemsPerPage, setItemsPerPage] = useState(10);
|
||||
|
||||
const fetchProducts = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
|
|
@ -32,6 +36,7 @@ const ProductList = () => {
|
|||
if (!res.ok) throw new Error('Failed to fetch products');
|
||||
const data = await res.json();
|
||||
setProducts(data);
|
||||
setCurrentPage(1); // Reset page to 1 when filters change
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
|
|
@ -83,6 +88,18 @@ const ProductList = () => {
|
|||
(p.supplier_name && p.supplier_name.toLowerCase().includes(searchTerm.toLowerCase()))
|
||||
);
|
||||
|
||||
// Reset page when search term changes
|
||||
useEffect(() => {
|
||||
setCurrentPage(1);
|
||||
}, [searchTerm]);
|
||||
|
||||
// Compute pagination details
|
||||
const totalItems = filteredProducts.length;
|
||||
const totalPages = Math.ceil(totalItems / itemsPerPage);
|
||||
const startIdx = totalItems === 0 ? 0 : (currentPage - 1) * itemsPerPage + 1;
|
||||
const endIdx = Math.min(currentPage * itemsPerPage, totalItems);
|
||||
const currentProducts = filteredProducts.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 className="page-title">Product Review & Management</h1>
|
||||
|
|
@ -142,73 +159,130 @@ const ProductList = () => {
|
|||
) : error ? (
|
||||
<div style={{ padding: '20px', color: 'var(--color-danger)', textAlign: 'center' }}>Error: {error}</div>
|
||||
) : (
|
||||
<div className="table-container">
|
||||
<table className="custom-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Product Title</th>
|
||||
<th>Seller</th>
|
||||
<th>Price</th>
|
||||
<th>Stock</th>
|
||||
<th>Status</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filteredProducts.map(prod => (
|
||||
<tr key={prod.id}>
|
||||
<td>#{prod.id}</td>
|
||||
<td
|
||||
style={{ fontWeight: '600', cursor: 'pointer', color: 'var(--accent-hover)' }}
|
||||
onClick={() => setSelectedProduct(prod)}
|
||||
>
|
||||
{prod.name}
|
||||
</td>
|
||||
<td>{prod.supplier_name || 'N/A'}</td>
|
||||
<td>₹{parseFloat(prod.price).toLocaleString('en-IN')}</td>
|
||||
<td>{prod.stock} items</td>
|
||||
<td><StatusBadge status={prod.status} /></td>
|
||||
<td>
|
||||
<div style={{ display: 'flex', gap: '6px' }}>
|
||||
{(prod.status === 'pending' || prod.status === 'pending_approval') && (
|
||||
<>
|
||||
<button className="btn btn-primary" style={{ fontSize: '11px', padding: '4px 8px' }} onClick={() => handleStatusChange(prod.id, 'approve')}>
|
||||
Approve
|
||||
</button>
|
||||
<button className="btn btn-secondary" style={{ fontSize: '11px', padding: '4px 8px', background: 'rgba(255,255,255,0.05)', color: '#fff', border: '1px solid var(--glass-border)' }} onClick={() => handleStatusChange(prod.id, 'hold')}>
|
||||
Hold
|
||||
</button>
|
||||
<button className="btn btn-danger" style={{ fontSize: '11px', padding: '4px 8px', background: 'var(--color-danger)' }} onClick={() => handleStatusChange(prod.id, 'reject')}>
|
||||
Reject
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
{prod.status === 'approved' && (
|
||||
<>
|
||||
<button className="btn btn-secondary" style={{ fontSize: '11px', padding: '4px 8px' }} onClick={() => handleStatusChange(prod.id, 'hold')}>
|
||||
Hold Item
|
||||
</button>
|
||||
<button className="btn btn-danger" style={{ fontSize: '11px', padding: '4px 8px', background: 'var(--color-danger)' }} onClick={() => handleStatusChange(prod.id, 'reject')}>
|
||||
Reject
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
{(prod.status === 'hold' || prod.status === 'on_hold' || prod.status === 'rejected') && (
|
||||
<button className="btn btn-primary" style={{ fontSize: '11px', padding: '4px 8px' }} onClick={() => handleStatusChange(prod.id, 'approve')}>
|
||||
Activate
|
||||
</button>
|
||||
)}
|
||||
<button className="btn btn-danger" style={{ fontSize: '11px', padding: '4px 8px', background: 'transparent', border: '1px solid var(--color-danger)', color: 'var(--color-danger)' }} onClick={() => handleRemove(prod.id)}>
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
<>
|
||||
<div className="table-container">
|
||||
<table className="custom-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Product Title</th>
|
||||
<th>Seller</th>
|
||||
<th>Price</th>
|
||||
<th>Stock</th>
|
||||
<th>Status</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</thead>
|
||||
<tbody>
|
||||
{currentProducts.map(prod => (
|
||||
<tr key={prod.id}>
|
||||
<td>#{prod.id}</td>
|
||||
<td
|
||||
style={{ fontWeight: '600', cursor: 'pointer', color: 'var(--accent-hover)' }}
|
||||
onClick={() => setSelectedProduct(prod)}
|
||||
>
|
||||
{prod.name}
|
||||
</td>
|
||||
<td>{prod.supplier_name || 'N/A'}</td>
|
||||
<td>₹{parseFloat(prod.price).toLocaleString('en-IN')}</td>
|
||||
<td>{prod.stock} items</td>
|
||||
<td><StatusBadge status={prod.status} /></td>
|
||||
<td>
|
||||
<div style={{ display: 'flex', gap: '6px' }}>
|
||||
{(prod.status === 'pending' || prod.status === 'pending_approval') && (
|
||||
<>
|
||||
<button className="btn btn-primary" style={{ fontSize: '11px', padding: '4px 8px' }} onClick={() => handleStatusChange(prod.id, 'approve')}>
|
||||
Approve
|
||||
</button>
|
||||
<button className="btn btn-secondary" style={{ fontSize: '11px', padding: '4px 8px', background: 'rgba(255,255,255,0.05)', color: '#fff', border: '1px solid var(--glass-border)' }} onClick={() => handleStatusChange(prod.id, 'hold')}>
|
||||
Hold
|
||||
</button>
|
||||
<button className="btn btn-danger" style={{ fontSize: '11px', padding: '4px 8px', background: 'var(--color-danger)' }} onClick={() => handleStatusChange(prod.id, 'reject')}>
|
||||
Reject
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
{prod.status === 'approved' && (
|
||||
<>
|
||||
<button className="btn btn-secondary" style={{ fontSize: '11px', padding: '4px 8px' }} onClick={() => handleStatusChange(prod.id, 'hold')}>
|
||||
Hold Item
|
||||
</button>
|
||||
<button className="btn btn-danger" style={{ fontSize: '11px', padding: '4px 8px', background: 'var(--color-danger)' }} onClick={() => handleStatusChange(prod.id, 'reject')}>
|
||||
Reject
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
{(prod.status === 'hold' || prod.status === 'on_hold' || prod.status === 'rejected') && (
|
||||
<button className="btn btn-primary" style={{ fontSize: '11px', padding: '4px 8px' }} onClick={() => handleStatusChange(prod.id, 'approve')}>
|
||||
Activate
|
||||
</button>
|
||||
)}
|
||||
<button className="btn btn-danger" style={{ fontSize: '11px', padding: '4px 8px', background: 'transparent', border: '1px solid var(--color-danger)', color: 'var(--color-danger)' }} onClick={() => handleRemove(prod.id)}>
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Pagination Controls */}
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: '20px', flexWrap: 'wrap', gap: '12px', borderTop: '1px solid var(--glass-border)', paddingTop: '16px' }}>
|
||||
<div style={{ color: 'var(--text-secondary)', fontSize: '13px' }}>
|
||||
Showing {startIdx} to {endIdx} of {totalItems} items
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||||
<span style={{ fontSize: '13px', color: 'var(--text-secondary)' }}>Items per page:</span>
|
||||
<select
|
||||
value={itemsPerPage}
|
||||
onChange={(e) => {
|
||||
setItemsPerPage(Number(e.target.value));
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
style={{
|
||||
background: 'var(--bg-tertiary)',
|
||||
color: '#fff',
|
||||
border: '1px solid var(--glass-border)',
|
||||
borderRadius: '6px',
|
||||
padding: '4px 8px',
|
||||
fontSize: '13px',
|
||||
outline: 'none'
|
||||
}}
|
||||
>
|
||||
{[5, 10, 20, 50, 100].map(size => (
|
||||
<option key={size} value={size}>{size}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
|
||||
<button
|
||||
className="btn btn-secondary"
|
||||
style={{ fontSize: '12px', padding: '6px 12px' }}
|
||||
onClick={() => setCurrentPage(prev => Math.max(prev - 1, 1))}
|
||||
disabled={currentPage === 1}
|
||||
>
|
||||
Previous
|
||||
</button>
|
||||
<span style={{ fontSize: '13px', color: 'var(--text-secondary)' }}>
|
||||
Page {currentPage} of {totalPages || 1}
|
||||
</span>
|
||||
<button
|
||||
className="btn btn-secondary"
|
||||
style={{ fontSize: '12px', padding: '6px 12px' }}
|
||||
onClick={() => setCurrentPage(prev => Math.min(prev + 1, totalPages))}
|
||||
disabled={currentPage === totalPages || totalPages === 0}
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -12,6 +12,10 @@ const SellerList = () => {
|
|||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
// Pagination states
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [itemsPerPage, setItemsPerPage] = useState(10);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchSellers = async () => {
|
||||
try {
|
||||
|
|
@ -28,6 +32,7 @@ const SellerList = () => {
|
|||
if (!res.ok) throw new Error('Failed to fetch sellers');
|
||||
const data = await res.json();
|
||||
setSellers(data);
|
||||
setCurrentPage(1); // Reset page to 1 when filter changes
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
|
|
@ -44,6 +49,18 @@ const SellerList = () => {
|
|||
return matchesSearch;
|
||||
});
|
||||
|
||||
// Reset page when search term changes
|
||||
useEffect(() => {
|
||||
setCurrentPage(1);
|
||||
}, [searchTerm]);
|
||||
|
||||
// Compute pagination details
|
||||
const totalItems = filteredSellers.length;
|
||||
const totalPages = Math.ceil(totalItems / itemsPerPage);
|
||||
const startIdx = totalItems === 0 ? 0 : (currentPage - 1) * itemsPerPage + 1;
|
||||
const endIdx = Math.min(currentPage * itemsPerPage, totalItems);
|
||||
const currentSellers = filteredSellers.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '24px' }}>
|
||||
|
|
@ -75,40 +92,97 @@ const SellerList = () => {
|
|||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div style={{ padding: '40px', textPlaying: 'center' }}>Loading seller profiles...</div>
|
||||
<div style={{ padding: '40px', textAlign: 'center' }}>Loading seller profiles...</div>
|
||||
) : error ? (
|
||||
<div style={{ padding: '20px', color: 'var(--color-danger)', textAlign: 'center' }}>Error: {error}</div>
|
||||
) : (
|
||||
<div className="table-container">
|
||||
<table className="custom-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Seller Name</th>
|
||||
<th>Email</th>
|
||||
<th>Status</th>
|
||||
<th>Joined Date</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filteredSellers.map((seller) => (
|
||||
<tr key={seller.id}>
|
||||
<td style={{ fontWeight: '600' }}>{seller.name}</td>
|
||||
<td>{seller.email}</td>
|
||||
<td>
|
||||
<StatusBadge status={seller.status} />
|
||||
</td>
|
||||
<td>{seller.joined_at ? new Date(seller.joined_at).toLocaleDateString() : 'N/A'}</td>
|
||||
<td>
|
||||
<Link to={`/sellers/${seller.id}`} className="btn btn-secondary" style={{ fontSize: '12px', padding: '6px 12px' }}>
|
||||
👁️ View Details
|
||||
</Link>
|
||||
</td>
|
||||
<>
|
||||
<div className="table-container">
|
||||
<table className="custom-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Seller Name</th>
|
||||
<th>Email</th>
|
||||
<th>Status</th>
|
||||
<th>Joined Date</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</thead>
|
||||
<tbody>
|
||||
{currentSellers.map((seller) => (
|
||||
<tr key={seller.id}>
|
||||
<td style={{ fontWeight: '600' }}>{seller.name}</td>
|
||||
<td>{seller.email}</td>
|
||||
<td>
|
||||
<StatusBadge status={seller.status} />
|
||||
</td>
|
||||
<td>{seller.joined_at ? new Date(seller.joined_at).toLocaleDateString() : 'N/A'}</td>
|
||||
<td>
|
||||
<Link to={`/sellers/${seller.id}`} className="btn btn-secondary" style={{ fontSize: '12px', padding: '6px 12px' }}>
|
||||
👁️ View Details
|
||||
</Link>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Pagination Controls */}
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: '20px', flexWrap: 'wrap', gap: '12px', borderTop: '1px solid var(--glass-border)', paddingTop: '16px' }}>
|
||||
<div style={{ color: 'var(--text-secondary)', fontSize: '13px' }}>
|
||||
Showing {startIdx} to {endIdx} of {totalItems} items
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||||
<span style={{ fontSize: '13px', color: 'var(--text-secondary)' }}>Items per page:</span>
|
||||
<select
|
||||
value={itemsPerPage}
|
||||
onChange={(e) => {
|
||||
setItemsPerPage(Number(e.target.value));
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
style={{
|
||||
background: 'var(--bg-tertiary)',
|
||||
color: '#fff',
|
||||
border: '1px solid var(--glass-border)',
|
||||
borderRadius: '6px',
|
||||
padding: '4px 8px',
|
||||
fontSize: '13px',
|
||||
outline: 'none'
|
||||
}}
|
||||
>
|
||||
{[5, 10, 20, 50, 100].map(size => (
|
||||
<option key={size} value={size}>{size}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
|
||||
<button
|
||||
className="btn btn-secondary"
|
||||
style={{ fontSize: '12px', padding: '6px 12px' }}
|
||||
onClick={() => setCurrentPage(prev => Math.max(prev - 1, 1))}
|
||||
disabled={currentPage === 1}
|
||||
>
|
||||
Previous
|
||||
</button>
|
||||
<span style={{ fontSize: '13px', color: 'var(--text-secondary)' }}>
|
||||
Page {currentPage} of {totalPages || 1}
|
||||
</span>
|
||||
<button
|
||||
className="btn btn-secondary"
|
||||
style={{ fontSize: '12px', padding: '6px 12px' }}
|
||||
onClick={() => setCurrentPage(prev => Math.min(prev + 1, totalPages))}
|
||||
disabled={currentPage === totalPages || totalPages === 0}
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue