adding upload options
Some checks failed
Beta CI/CD Pipeline / build-and-test (push) Failing after 45s
Beta CI/CD Pipeline / deploy-beta (push) Has been skipped

This commit is contained in:
vickytechkey 2026-08-23 18:09:38 +05:30
parent 60d6586f77
commit d1efa596c8
2 changed files with 27 additions and 13 deletions

View file

@ -64,11 +64,11 @@ export default function AddProductTab() {
<div className="columns">
<div className="column is-6">
<div className="field mb-4">
<label className="label has-text-grey-dark">Price (USD)</label>
<label className="label has-text-grey-dark">Price (INR)</label>
<div className="control has-icons-left">
<input className="input" type="number" placeholder="0.00" step="0.01" required />
<span className="icon is-small is-left">
<span className="material-symbols-outlined">attach_money</span>
<span className="material-symbols-outlined">currency_rupee</span>
</span>
</div>
</div>

View file

@ -9,7 +9,10 @@ export default function ProductsTab() {
handleBulkUploadSubmit,
isParsingBulk,
bulkLog,
uploadDocument
uploadDocument,
products,
handleEditClick,
handleDeleteProduct
} = useSeller();
const [showBulkUploadModal, setShowBulkUploadModal] = useState(false);
@ -39,31 +42,42 @@ export default function ProductsTab() {
</div>
<div className="columns is-multiline">
{[1, 2, 3, 4].map(item => (
<div className="column is-3" key={item}>
{products.map((item: any) => (
<div className="column is-3" key={item.id}>
<div className="card" style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
<div className="card-image">
<figure className="image is-4by3 has-background-light">
<div className="is-flex is-align-items-center is-justify-content-center" style={{ height: '100%' }}>
<span className="material-symbols-outlined has-text-grey-light is-size-1">image</span>
</div>
{item.image ? (
<img src={item.image} alt={item.title} style={{ objectFit: 'cover', height: '100%', width: '100%' }} />
) : (
<div className="is-flex is-align-items-center is-justify-content-center" style={{ height: '100%' }}>
<span className="material-symbols-outlined has-text-grey-light is-size-1">image</span>
</div>
)}
</figure>
</div>
<div className="card-content is-flex-grow-1">
<p className="title is-6 mb-2">Handwoven Silk Scarf</p>
<p className="subtitle is-6 has-text-primary has-text-weight-bold">$85.00</p>
<p className="title is-6 mb-2">{item.title}</p>
<p className="subtitle is-6 has-text-primary has-text-weight-bold">{Number(item.price).toFixed(2)}</p>
<div className="is-flex is-align-items-center is-size-7 has-text-grey">
<span className="icon is-small mr-1"><span className="material-symbols-outlined is-size-7">inventory</span></span>
<span>12 in stock</span>
<span>{item.stock} in stock</span>
</div>
</div>
<footer className="card-footer">
<a href="#" className="card-footer-item has-text-grey">Edit</a>
<a href="#" className="card-footer-item has-text-danger">Delete</a>
<a href="#" className="card-footer-item has-text-grey" onClick={(e) => { e.preventDefault(); handleEditClick(item); setDashTab('add-product'); }}>Edit</a>
<a href="#" className="card-footer-item has-text-danger" onClick={(e) => { e.preventDefault(); handleDeleteProduct(item.id); }}>Delete</a>
</footer>
</div>
</div>
))}
{products.length === 0 && (
<div className="column is-12">
<div className="notification is-light has-text-centered py-6">
<p>No products available yet. Click "Add Product" or "Bulk Upload" to get started.</p>
</div>
</div>
)}
</div>
<div className={`modal ${showBulkUploadModal ? 'is-active' : ''}`}>