test the job upgrade
This commit is contained in:
parent
4057974896
commit
5eb0945a60
1 changed files with 208 additions and 209 deletions
417
src/App.tsx
417
src/App.tsx
|
|
@ -22,7 +22,7 @@ interface Order {
|
|||
quantity: number
|
||||
customer: string
|
||||
total: number
|
||||
status: 'Ready to Ship' | 'Shipped' | 'Delivered' | 'Cancelled'
|
||||
status: 'Ready to Ship test' | 'Shipped' | 'Delivered' | 'Cancelled'
|
||||
carrier: string
|
||||
tracking: string
|
||||
eta: string
|
||||
|
|
@ -42,7 +42,7 @@ interface ReturnRequest {
|
|||
export default function App() {
|
||||
const [currentPage, setCurrentPage] = useState<Page>('home')
|
||||
const [activeTab, setActiveTab] = useState<'login' | 'register'>('login')
|
||||
|
||||
|
||||
// Registration / Onboarding Form States
|
||||
const [email, setEmail] = useState('')
|
||||
const [phone, setPhone] = useState('')
|
||||
|
|
@ -50,7 +50,7 @@ export default function App() {
|
|||
const [gstin, setGstin] = useState('29AAAAA1111A1Z1')
|
||||
const [isGstinVerified, setIsGstinVerified] = useState(true)
|
||||
const [isVerifyingGstin, setIsVerifyingGstin] = useState(false)
|
||||
|
||||
|
||||
// Profile Completion States
|
||||
const [storeName, setStoreName] = useState('My Artisan Handloom')
|
||||
const [storeLogo, setStoreLogo] = useState<string | null>(null)
|
||||
|
|
@ -66,12 +66,12 @@ export default function App() {
|
|||
const [dashTab, setDashTab] = useState<DashboardTab>('overview')
|
||||
const [dateFilter, setDateFilter] = useState<DateFilter>('year')
|
||||
const [customDates, setCustomDates] = useState({ start: '2026-06-01', end: '2026-06-15' })
|
||||
|
||||
|
||||
// Lists
|
||||
const [products, setProducts] = useState<Product[]>(CONFIG.dashboardData.initialProducts)
|
||||
const [orders] = useState<Order[]>(CONFIG.dashboardData.initialOrders as Order[])
|
||||
const [returns, setReturns] = useState<ReturnRequest[]>(CONFIG.dashboardData.initialReturns as ReturnRequest[])
|
||||
|
||||
|
||||
// Forms & Editing
|
||||
const [productForm, setProductForm] = useState({
|
||||
id: '',
|
||||
|
|
@ -83,7 +83,7 @@ export default function App() {
|
|||
image: 'https://images.unsplash.com/photo-1544022613-e87ca75a784a?auto=format&fit=crop&q=80&w=100'
|
||||
})
|
||||
const [isEditingProduct, setIsEditingProduct] = useState(false)
|
||||
|
||||
|
||||
// Payout outstanding states
|
||||
const [wallet, setWallet] = useState({
|
||||
outstanding: 850.00,
|
||||
|
|
@ -142,7 +142,7 @@ export default function App() {
|
|||
}
|
||||
|
||||
// --- Dashboard Logic Actions ---
|
||||
|
||||
|
||||
// Product creation/modification
|
||||
const handleSaveProduct = (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
|
|
@ -181,7 +181,7 @@ export default function App() {
|
|||
if (!e.target.files?.length) return
|
||||
setIsParsingBulk(true)
|
||||
setBulkLog(['Parsing CSV file template...', 'Validating rows against inventory Schema...'])
|
||||
|
||||
|
||||
setTimeout(() => {
|
||||
const parsedProducts: Product[] = [
|
||||
{ id: String(products.length + 1), title: 'Hand-Carved Walnut Bowl', category: 'Kitchenware', price: 65.00, stock: 15, sku: 'BOWL-WAL-12', image: 'https://images.unsplash.com/photo-1610701596007-11502861dcfa?auto=format&fit=crop&q=80&w=100' },
|
||||
|
|
@ -253,25 +253,25 @@ export default function App() {
|
|||
<span className="logo-text">{CONFIG.companyName}</span>
|
||||
</div>
|
||||
<nav className="nav-links">
|
||||
<button
|
||||
<button
|
||||
className={`nav-link ${currentPage === 'home' ? 'active' : ''}`}
|
||||
onClick={() => navigateTo('home')}
|
||||
>
|
||||
Platform
|
||||
</button>
|
||||
<button
|
||||
<button
|
||||
className="nav-link"
|
||||
onClick={() => navigateTo('home')}
|
||||
>
|
||||
Pricing
|
||||
</button>
|
||||
<button
|
||||
<button
|
||||
className={`nav-link ${currentPage === 'about' ? 'active' : ''}`}
|
||||
onClick={() => navigateTo('about')}
|
||||
>
|
||||
Success Stories
|
||||
</button>
|
||||
<button
|
||||
<button
|
||||
className={`nav-link ${currentPage === 'contact' ? 'active' : ''}`}
|
||||
onClick={() => navigateTo('contact')}
|
||||
>
|
||||
|
|
@ -299,7 +299,7 @@ export default function App() {
|
|||
{/* Main Content Area */}
|
||||
{currentPage !== 'dashboard' ? (
|
||||
<main className={`main-content ${currentPage === 'home' ? 'full-width' : ''}`}>
|
||||
|
||||
|
||||
{/* HOMEPAGE VIEW */}
|
||||
{currentPage === 'home' && (
|
||||
<div>
|
||||
|
|
@ -322,10 +322,10 @@ export default function App() {
|
|||
</div>
|
||||
</div>
|
||||
<div className="hero-image-wrapper">
|
||||
<img
|
||||
src={CONFIG.hero.image}
|
||||
alt="Artisans Crafting"
|
||||
className="hero-img"
|
||||
<img
|
||||
src={CONFIG.hero.image}
|
||||
alt="Artisans Crafting"
|
||||
className="hero-img"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -344,10 +344,10 @@ export default function App() {
|
|||
|
||||
<section className="featured-artisan-section">
|
||||
<div className="artisan-card">
|
||||
<img
|
||||
src={CONFIG.featuredArtisan.avatar}
|
||||
alt="Featured Artisan"
|
||||
className="artisan-avatar"
|
||||
<img
|
||||
src={CONFIG.featuredArtisan.avatar}
|
||||
alt="Featured Artisan"
|
||||
className="artisan-avatar"
|
||||
/>
|
||||
<div className="artisan-info">
|
||||
<h4>Featured Artisan</h4>
|
||||
|
|
@ -370,7 +370,7 @@ export default function App() {
|
|||
{CONFIG.about.missionDescription}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="team-section">
|
||||
<h3>Meet Our Leaders</h3>
|
||||
<div className="team-grid">
|
||||
|
|
@ -413,7 +413,7 @@ export default function App() {
|
|||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="contact-info-panel">
|
||||
<div className="info-item">
|
||||
<h4>Address</h4>
|
||||
|
|
@ -427,7 +427,7 @@ export default function App() {
|
|||
<h4>Partner Hotline</h4>
|
||||
<p>{CONFIG.supportPhone}</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="map-placeholder">
|
||||
📍 Interactive Map Preview
|
||||
</div>
|
||||
|
|
@ -439,13 +439,13 @@ export default function App() {
|
|||
{(currentPage === 'login' || currentPage === 'signup') && (
|
||||
<div className="form-card">
|
||||
<div className="tab-container">
|
||||
<button
|
||||
<button
|
||||
className={`tab-btn ${activeTab === 'login' ? 'active' : ''}`}
|
||||
onClick={() => { setActiveTab('login'); navigateTo('login'); }}
|
||||
>
|
||||
Login
|
||||
</button>
|
||||
<button
|
||||
<button
|
||||
className={`tab-btn ${activeTab === 'register' ? 'active' : ''}`}
|
||||
onClick={() => { setActiveTab('register'); navigateTo('signup'); }}
|
||||
>
|
||||
|
|
@ -458,26 +458,26 @@ export default function App() {
|
|||
<h2 className="form-card-title">Supplier Portal Access</h2>
|
||||
<div className="form-group">
|
||||
<label htmlFor="login-email">Business Email</label>
|
||||
<input
|
||||
<input
|
||||
id="login-email"
|
||||
type="email"
|
||||
className="form-control"
|
||||
placeholder="Enter your email"
|
||||
type="email"
|
||||
className="form-control"
|
||||
placeholder="Enter your email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
required
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="login-password">Password</label>
|
||||
<input
|
||||
<input
|
||||
id="login-password"
|
||||
type="password"
|
||||
className="form-control"
|
||||
placeholder="Enter your password"
|
||||
type="password"
|
||||
className="form-control"
|
||||
placeholder="Enter your password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div style={{ textAlign: 'right', marginBottom: '1.5rem' }}>
|
||||
|
|
@ -495,50 +495,50 @@ export default function App() {
|
|||
<h2 className="form-card-title">Create Your Supplier Account</h2>
|
||||
<div className="form-group">
|
||||
<label htmlFor="reg-email">Business Email *</label>
|
||||
<input
|
||||
<input
|
||||
id="reg-email"
|
||||
type="email"
|
||||
className="form-control"
|
||||
placeholder="Enter email address"
|
||||
type="email"
|
||||
className="form-control"
|
||||
placeholder="Enter email address"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
required
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="reg-phone">Mobile Number *</label>
|
||||
<input
|
||||
<input
|
||||
id="reg-phone"
|
||||
type="tel"
|
||||
className="form-control"
|
||||
placeholder="Enter 10-digit number"
|
||||
type="tel"
|
||||
className="form-control"
|
||||
placeholder="Enter 10-digit number"
|
||||
value={phone}
|
||||
onChange={(e) => setPhone(e.target.value)}
|
||||
required
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="reg-pass">Create Password *</label>
|
||||
<input
|
||||
<input
|
||||
id="reg-pass"
|
||||
type="password"
|
||||
className="form-control"
|
||||
placeholder="Minimum 8 characters"
|
||||
type="password"
|
||||
className="form-control"
|
||||
placeholder="Minimum 8 characters"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="reg-gst">GSTIN / Tax ID *</label>
|
||||
<input
|
||||
<input
|
||||
id="reg-gst"
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="Enter GSTIN format"
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="Enter GSTIN format"
|
||||
value={gstin}
|
||||
onChange={(e) => setGstin(e.target.value)}
|
||||
required
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<button type="submit" className="btn btn-primary" style={{ width: '100%', padding: '0.75rem', marginTop: '1rem' }}>
|
||||
|
|
@ -560,18 +560,18 @@ export default function App() {
|
|||
</div>
|
||||
|
||||
<h2 className="form-card-title">Complete Your Supplier Profile</h2>
|
||||
|
||||
|
||||
<form onSubmit={handleProfileSubmit}>
|
||||
<div className="form-group">
|
||||
<label htmlFor="store-name">Store Display Name *</label>
|
||||
<input
|
||||
<input
|
||||
id="store-name"
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="Enter store name"
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="Enter store name"
|
||||
value={storeName}
|
||||
onChange={(e) => setStoreName(e.target.value)}
|
||||
required
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -585,10 +585,10 @@ export default function App() {
|
|||
<span style={{ fontSize: '1.5rem', color: 'var(--text-muted)' }}>🖼️</span>
|
||||
)}
|
||||
</div>
|
||||
<input
|
||||
<input
|
||||
id="store-logo"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
onChange={handleLogoChange}
|
||||
style={{ fontSize: '0.9rem' }}
|
||||
/>
|
||||
|
|
@ -597,11 +597,11 @@ export default function App() {
|
|||
|
||||
<div className="form-group">
|
||||
<label htmlFor="store-bio">About Your Craft / Business *</label>
|
||||
<textarea
|
||||
<textarea
|
||||
id="store-bio"
|
||||
className="form-control"
|
||||
rows={3}
|
||||
placeholder="Describe your craft, materials, and artisan history..."
|
||||
className="form-control"
|
||||
rows={3}
|
||||
placeholder="Describe your craft, materials, and artisan history..."
|
||||
value={businessBio}
|
||||
onChange={(e) => setBusinessBio(e.target.value)}
|
||||
required
|
||||
|
|
@ -611,39 +611,39 @@ export default function App() {
|
|||
<div className="form-group">
|
||||
<label>Business Address for Pickup *</label>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: '0.75rem', marginBottom: '0.75rem' }}>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="Street Address"
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="Street Address"
|
||||
value={address.street}
|
||||
onChange={(e) => setAddress({...address, street: e.target.value})}
|
||||
required
|
||||
onChange={(e) => setAddress({ ...address, street: e.target.value })}
|
||||
required
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="City"
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="City"
|
||||
value={address.city}
|
||||
onChange={(e) => setAddress({...address, city: e.target.value})}
|
||||
required
|
||||
onChange={(e) => setAddress({ ...address, city: e.target.value })}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.75rem' }}>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="State"
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="State"
|
||||
value={address.state}
|
||||
onChange={(e) => setAddress({...address, state: e.target.value})}
|
||||
required
|
||||
onChange={(e) => setAddress({ ...address, state: e.target.value })}
|
||||
required
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="Pincode"
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="Pincode"
|
||||
value={address.pincode}
|
||||
onChange={(e) => setAddress({...address, pincode: e.target.value})}
|
||||
required
|
||||
onChange={(e) => setAddress({ ...address, pincode: e.target.value })}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -651,17 +651,17 @@ export default function App() {
|
|||
<div className="form-group">
|
||||
<label htmlFor="verify-gst">GSTIN *</label>
|
||||
<div style={{ display: 'flex', gap: '0.75rem' }}>
|
||||
<input
|
||||
<input
|
||||
id="verify-gst"
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="Verify GSTIN"
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="Verify GSTIN"
|
||||
value={gstin}
|
||||
onChange={(e) => setGstin(e.target.value)}
|
||||
required
|
||||
required
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
<button
|
||||
type="button"
|
||||
className={`btn ${isGstinVerified ? 'btn-secondary' : 'btn-primary'}`}
|
||||
onClick={handleVerifyGstin}
|
||||
disabled={isVerifyingGstin || isGstinVerified}
|
||||
|
|
@ -681,8 +681,8 @@ export default function App() {
|
|||
<button type="button" className="btn btn-outline-dark" onClick={() => navigateTo('signup')}>
|
||||
Back
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary"
|
||||
style={{ backgroundColor: 'var(--accent)', color: 'var(--primary)' }}
|
||||
>
|
||||
|
|
@ -705,7 +705,7 @@ export default function App() {
|
|||
|
||||
<div style={{ fontSize: '4rem', marginBottom: '1.5rem' }}>🎉</div>
|
||||
<h2 className="form-card-title">Welcome to {CONFIG.companyName}!</h2>
|
||||
|
||||
|
||||
<p style={{ color: 'var(--text-muted)', marginBottom: '2rem', fontSize: '1.05rem' }}>
|
||||
Your registration is under review. We will verify your GSTIN credentials and activate your dashboard access within 24-48 hours.
|
||||
</p>
|
||||
|
|
@ -739,8 +739,8 @@ export default function App() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="btn btn-dark"
|
||||
<button
|
||||
className="btn btn-dark"
|
||||
style={{ marginTop: '2.5rem', width: '100%', padding: '0.8rem' }}
|
||||
onClick={() => navigateTo('dashboard')}
|
||||
>
|
||||
|
|
@ -753,7 +753,7 @@ export default function App() {
|
|||
) : (
|
||||
/* --- FULL SERVICE SUPPLIER ACTIVE DASHBOARD PAGE --- */
|
||||
<div className="dashboard-container">
|
||||
|
||||
|
||||
{/* Sidebar */}
|
||||
<aside className="dashboard-sidebar">
|
||||
<div style={{ marginBottom: '2rem', paddingLeft: '1rem' }}>
|
||||
|
|
@ -762,7 +762,7 @@ export default function App() {
|
|||
</div>
|
||||
<ul className="sidebar-menu">
|
||||
<li>
|
||||
<button
|
||||
<button
|
||||
className={`sidebar-item-btn ${dashTab === 'overview' ? 'active' : ''}`}
|
||||
onClick={() => setDashTab('overview')}
|
||||
>
|
||||
|
|
@ -770,7 +770,7 @@ export default function App() {
|
|||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
<button
|
||||
className={`sidebar-item-btn ${dashTab === 'products' ? 'active' : ''}`}
|
||||
onClick={() => setDashTab('products')}
|
||||
>
|
||||
|
|
@ -778,7 +778,7 @@ export default function App() {
|
|||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
<button
|
||||
className={`sidebar-item-btn ${dashTab === 'orders' ? 'active' : ''}`}
|
||||
onClick={() => setDashTab('orders')}
|
||||
>
|
||||
|
|
@ -786,7 +786,7 @@ export default function App() {
|
|||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
<button
|
||||
className={`sidebar-item-btn ${dashTab === 'returns' ? 'active' : ''}`}
|
||||
onClick={() => setDashTab('returns')}
|
||||
>
|
||||
|
|
@ -794,7 +794,7 @@ export default function App() {
|
|||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
<button
|
||||
className={`sidebar-item-btn ${dashTab === 'wallet' ? 'active' : ''}`}
|
||||
onClick={() => setDashTab('wallet')}
|
||||
>
|
||||
|
|
@ -802,7 +802,7 @@ export default function App() {
|
|||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
<button
|
||||
className={`sidebar-item-btn ${dashTab === 'settings' ? 'active' : ''}`}
|
||||
onClick={() => setDashTab('settings')}
|
||||
>
|
||||
|
|
@ -814,7 +814,7 @@ export default function App() {
|
|||
|
||||
{/* Main Dashboard Space */}
|
||||
<section className="dashboard-main">
|
||||
|
||||
|
||||
{/* OVERVIEW PANEL */}
|
||||
{dashTab === 'overview' && (
|
||||
<div>
|
||||
|
|
@ -832,11 +832,11 @@ export default function App() {
|
|||
<div className="custom-date-panel">
|
||||
<div className="form-group" style={{ margin: 0 }}>
|
||||
<label style={{ fontSize: '0.75rem' }}>Start Date</label>
|
||||
<input type="date" className="form-control" value={customDates.start} onChange={e => setCustomDates({...customDates, start: e.target.value})} />
|
||||
<input type="date" className="form-control" value={customDates.start} onChange={e => setCustomDates({ ...customDates, start: e.target.value })} />
|
||||
</div>
|
||||
<div className="form-group" style={{ margin: 0 }}>
|
||||
<label style={{ fontSize: '0.75rem' }}>End Date</label>
|
||||
<input type="date" className="form-control" value={customDates.end} onChange={e => setCustomDates({...customDates, end: e.target.value})} />
|
||||
<input type="date" className="form-control" value={customDates.end} onChange={e => setCustomDates({ ...customDates, end: e.target.value })} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -867,9 +867,9 @@ export default function App() {
|
|||
</div>
|
||||
<div className="main-bar-chart">
|
||||
{selectedMetrics.chartValues.map((val, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className={`chart-bar-col ${idx === selectedMetrics.chartValues.length - 1 ? 'highlighted' : ''}`}
|
||||
<div
|
||||
key={idx}
|
||||
className={`chart-bar-col ${idx === selectedMetrics.chartValues.length - 1 ? 'highlighted' : ''}`}
|
||||
style={{ height: `${val}%` }}
|
||||
title={`Point ${idx + 1}: ${val}%`}
|
||||
></div>
|
||||
|
|
@ -883,9 +883,9 @@ export default function App() {
|
|||
{dashTab === 'products' && (
|
||||
<div>
|
||||
<h2 className="dashboard-title" style={{ marginBottom: '2rem' }}>Product Listings & Upload</h2>
|
||||
|
||||
|
||||
<div className="tool-split-layout">
|
||||
|
||||
|
||||
{/* Products Grid list */}
|
||||
<div>
|
||||
<h3 style={{ marginBottom: '1rem', color: 'var(--primary)' }}>Active Inventory ({products.length})</h3>
|
||||
|
|
@ -931,7 +931,7 @@ export default function App() {
|
|||
<span>{isParsingBulk ? 'Processing bulk data...' : '📥 Click to select CSV Template file for bulk upload'}</span>
|
||||
<input id="bulk-file-pick" type="file" accept=".csv" onChange={handleBulkUploadSimulate} style={{ display: 'none' }} />
|
||||
</div>
|
||||
|
||||
|
||||
{bulkLog.length > 0 && (
|
||||
<div style={{ backgroundColor: '#f1f5f9', padding: '1rem', borderRadius: '8px', fontFamily: 'monospace', fontSize: '0.85rem' }}>
|
||||
<h4 style={{ marginBottom: '0.5rem' }}>Import log:</h4>
|
||||
|
|
@ -949,57 +949,57 @@ export default function App() {
|
|||
<form onSubmit={handleSaveProduct}>
|
||||
<div className="form-group">
|
||||
<label htmlFor="prod-title">Product Title *</label>
|
||||
<input
|
||||
<input
|
||||
id="prod-title"
|
||||
type="text"
|
||||
className="form-control"
|
||||
value={productForm.title}
|
||||
onChange={e => setProductForm({...productForm, title: e.target.value})}
|
||||
required
|
||||
type="text"
|
||||
className="form-control"
|
||||
value={productForm.title}
|
||||
onChange={e => setProductForm({ ...productForm, title: e.target.value })}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="prod-sku">SKU Code (Auto-generates if empty)</label>
|
||||
<input
|
||||
<input
|
||||
id="prod-sku"
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="e.g. SHAWL-IND-01"
|
||||
value={productForm.sku}
|
||||
onChange={e => setProductForm({...productForm, sku: e.target.value})}
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="e.g. SHAWL-IND-01"
|
||||
value={productForm.sku}
|
||||
onChange={e => setProductForm({ ...productForm, sku: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }} className="form-group">
|
||||
<div>
|
||||
<label htmlFor="prod-price">Price ($) *</label>
|
||||
<input
|
||||
<input
|
||||
id="prod-price"
|
||||
type="number"
|
||||
className="form-control"
|
||||
value={productForm.price || ''}
|
||||
onChange={e => setProductForm({...productForm, price: Number(e.target.value)})}
|
||||
required
|
||||
type="number"
|
||||
className="form-control"
|
||||
value={productForm.price || ''}
|
||||
onChange={e => setProductForm({ ...productForm, price: Number(e.target.value) })}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="prod-stock">Initial Stock *</label>
|
||||
<input
|
||||
<input
|
||||
id="prod-stock"
|
||||
type="number"
|
||||
className="form-control"
|
||||
value={productForm.stock || ''}
|
||||
onChange={e => setProductForm({...productForm, stock: Number(e.target.value)})}
|
||||
required
|
||||
type="number"
|
||||
className="form-control"
|
||||
value={productForm.stock || ''}
|
||||
onChange={e => setProductForm({ ...productForm, stock: Number(e.target.value) })}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="prod-category">Category</label>
|
||||
<select
|
||||
<select
|
||||
id="prod-category"
|
||||
className="form-control"
|
||||
value={productForm.category}
|
||||
onChange={e => setProductForm({...productForm, category: e.target.value})}
|
||||
className="form-control"
|
||||
value={productForm.category}
|
||||
onChange={e => setProductForm({ ...productForm, category: e.target.value })}
|
||||
>
|
||||
<option value="Apparel">Apparel</option>
|
||||
<option value="Home Decor">Home Decor</option>
|
||||
|
|
@ -1008,7 +1008,7 @@ export default function App() {
|
|||
<option value="Linens">Linens</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
|
||||
<div style={{ display: 'flex', gap: '1rem', marginTop: '2rem' }}>
|
||||
{isEditingProduct && (
|
||||
<button type="button" className="btn btn-outline-dark" style={{ flex: 1 }} onClick={() => {
|
||||
|
|
@ -1030,7 +1030,7 @@ export default function App() {
|
|||
{dashTab === 'orders' && (
|
||||
<div>
|
||||
<h2 className="dashboard-title" style={{ marginBottom: '2rem' }}>Active Orders & Payout status</h2>
|
||||
|
||||
|
||||
<div className="dashboard-table-wrapper">
|
||||
<table className="dashboard-table">
|
||||
<thead>
|
||||
|
|
@ -1055,10 +1055,9 @@ export default function App() {
|
|||
<td>{o.customer}</td>
|
||||
<td style={{ fontWeight: 600 }}>${o.total.toFixed(2)}</td>
|
||||
<td>
|
||||
<span className={`badge ${
|
||||
o.status === 'Delivered' ? 'badge-success' :
|
||||
o.status === 'Shipped' ? 'badge-info' : 'badge-warning'
|
||||
}`}>
|
||||
<span className={`badge ${o.status === 'Delivered' ? 'badge-success' :
|
||||
o.status === 'Shipped' ? 'badge-info' : 'badge-warning'
|
||||
}`}>
|
||||
{o.status}
|
||||
</span>
|
||||
</td>
|
||||
|
|
@ -1081,7 +1080,7 @@ export default function App() {
|
|||
{dashTab === 'returns' && (
|
||||
<div>
|
||||
<h2 className="dashboard-title" style={{ marginBottom: '2rem' }}>Returns & Quality Assurance Center</h2>
|
||||
|
||||
|
||||
<h3 style={{ marginBottom: '1rem', color: 'var(--primary)' }}>Items Requested for Return</h3>
|
||||
<div className="dashboard-table-wrapper" style={{ marginBottom: '3rem' }}>
|
||||
<table className="dashboard-table">
|
||||
|
|
@ -1156,7 +1155,7 @@ export default function App() {
|
|||
{dashTab === 'wallet' && (
|
||||
<div>
|
||||
<h2 className="dashboard-title" style={{ marginBottom: '2rem' }}>Wallet & Payout Portal</h2>
|
||||
|
||||
|
||||
<div className="metrics-row">
|
||||
<div className="metric-data-card">
|
||||
<div className="metric-title">Outstanding Ready Balance</div>
|
||||
|
|
@ -1175,14 +1174,14 @@ export default function App() {
|
|||
<form onSubmit={handleWithdrawRequest}>
|
||||
<div className="form-group">
|
||||
<label htmlFor="payout-val">Withdrawal Amount ($) *</label>
|
||||
<input
|
||||
<input
|
||||
id="payout-val"
|
||||
type="number"
|
||||
className="form-control"
|
||||
type="number"
|
||||
className="form-control"
|
||||
placeholder="e.g. 200"
|
||||
value={withdrawAmount}
|
||||
onChange={e => setWithdrawAmount(e.target.value)}
|
||||
required
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<button type="submit" className="btn btn-dark" style={{ width: '100%', marginTop: '1.5rem' }}>
|
||||
|
|
@ -1225,17 +1224,17 @@ export default function App() {
|
|||
{dashTab === 'settings' && (
|
||||
<div className="form-card" style={{ margin: 0, maxWidth: '640px' }}>
|
||||
<h2 className="form-card-title" style={{ textAlign: 'left', marginBottom: '2rem' }}>Store Configurations</h2>
|
||||
|
||||
|
||||
<form onSubmit={e => { e.preventDefault(); alert('Store configurations updated successfully!'); }}>
|
||||
<div className="form-group">
|
||||
<label htmlFor="set-store">Store Display Name *</label>
|
||||
<input
|
||||
<input
|
||||
id="set-store"
|
||||
type="text"
|
||||
className="form-control"
|
||||
value={storeName}
|
||||
onChange={e => setStoreName(e.target.value)}
|
||||
required
|
||||
type="text"
|
||||
className="form-control"
|
||||
value={storeName}
|
||||
onChange={e => setStoreName(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -1249,10 +1248,10 @@ export default function App() {
|
|||
<span style={{ fontSize: '1.5rem', color: 'var(--text-muted)' }}>🖼️</span>
|
||||
)}
|
||||
</div>
|
||||
<input
|
||||
<input
|
||||
id="set-logo"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
onChange={handleLogoChange}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -1260,11 +1259,11 @@ export default function App() {
|
|||
|
||||
<div className="form-group">
|
||||
<label htmlFor="set-bio">About Your Craft / Business</label>
|
||||
<textarea
|
||||
<textarea
|
||||
id="set-bio"
|
||||
className="form-control"
|
||||
rows={3}
|
||||
value={businessBio}
|
||||
className="form-control"
|
||||
rows={3}
|
||||
value={businessBio}
|
||||
onChange={e => setBusinessBio(e.target.value)}
|
||||
></textarea>
|
||||
</div>
|
||||
|
|
@ -1272,52 +1271,52 @@ export default function App() {
|
|||
<div className="form-group">
|
||||
<label>Pickup Location Address *</label>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: '0.75rem', marginBottom: '0.75rem' }}>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="Street Address"
|
||||
value={address.street}
|
||||
onChange={e => setAddress({...address, street: e.target.value})}
|
||||
required
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="Street Address"
|
||||
value={address.street}
|
||||
onChange={e => setAddress({ ...address, street: e.target.value })}
|
||||
required
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="City"
|
||||
value={address.city}
|
||||
onChange={e => setAddress({...address, city: e.target.value})}
|
||||
required
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="City"
|
||||
value={address.city}
|
||||
onChange={e => setAddress({ ...address, city: e.target.value })}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.75rem' }}>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="State"
|
||||
value={address.state}
|
||||
onChange={e => setAddress({...address, state: e.target.value})}
|
||||
required
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="State"
|
||||
value={address.state}
|
||||
onChange={e => setAddress({ ...address, state: e.target.value })}
|
||||
required
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="Pincode"
|
||||
value={address.pincode}
|
||||
onChange={e => setAddress({...address, pincode: e.target.value})}
|
||||
required
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="Pincode"
|
||||
value={address.pincode}
|
||||
onChange={e => setAddress({ ...address, pincode: e.target.value })}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="set-gstin">GSTIN Number</label>
|
||||
<input
|
||||
<input
|
||||
id="set-gstin"
|
||||
type="text"
|
||||
className="form-control"
|
||||
value={gstin}
|
||||
onChange={e => setGstin(e.target.value)}
|
||||
disabled
|
||||
type="text"
|
||||
className="form-control"
|
||||
value={gstin}
|
||||
onChange={e => setGstin(e.target.value)}
|
||||
disabled
|
||||
/>
|
||||
<p style={{ fontSize: '0.85rem', color: 'var(--text-muted)', marginTop: '0.25rem' }}>GSTIN cannot be modified after verification.</p>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue