vignesh/supplier_central_frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

adding seller image upload
All checks were successful
Beta CI/CD Pipeline / build-and-test (push) Successful in 56s
Details
Beta CI/CD Pipeline / deploy-beta (push) Successful in 7s
Details

Browse source
This commit is contained in:
vickytechkey 2026-08-20 18:23:21 +05:30
parent c4cf3a1d2e
commit 8111278057
7 changed files with 837 additions and 257 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

302
seller_settings/code.html Normal file
View file

@ -0,0 +1,302 @@
<!DOCTYPE html>
<html class="light" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Tradhox - Settings</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&amp;family=Work+Sans:wght@400;500;600&amp;display=swap" rel="stylesheet"/>
<!-- Material Symbols -->
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<!-- Tailwind Config -->
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"on-error": "#ffffff",
"on-tertiary-fixed": "#241a0e",
"on-error-container": "#93000a",
"secondary-fixed-dim": "#c8c6c2",
"background": "#fbf9f8",
"surface-variant": "#e4e2e2",
"surface-container": "#efeded",
"on-tertiary-container": "#b19f8d",
"on-surface-variant": "#554244",
"primary-container": "#6b1a2c",
"on-secondary-fixed-variant": "#474744",
"surface-bright": "#fbf9f8",
"surface-container-highest": "#e4e2e2",
"tertiary-container": "#433628",
"primary-fixed": "#ffd9dc",
"on-primary-fixed-variant": "#7e2839",
"on-background": "#1b1c1c",
"outline": "#887274",
"error-container": "#ffdad6",
"tertiary-fixed": "#f4dfcb",
"on-tertiary-fixed-variant": "#524436",
"secondary": "#5f5e5b",
"secondary-fixed": "#e5e2de",
"surface-tint": "#9c4050",
"on-secondary-fixed": "#1c1c1a",
"surface": "#fbf9f8",
"on-secondary": "#ffffff",
"on-primary": "#ffffff",
"surface-container-low": "#f5f3f3",
"inverse-primary": "#ffb2bb",
"on-surface": "#1b1c1c",
"inverse-on-surface": "#f2f0f0",
"primary": "#4d0218",
"tertiary-fixed-dim": "#d7c3b0",
"surface-container-lowest": "#ffffff",
"secondary-container": "#e2dfdb",
"on-primary-fixed": "#400011",
"on-secondary-container": "#636260",
"on-tertiary": "#ffffff",
"on-primary-container": "#ef8191",
"inverse-surface": "#303030",
"surface-container-high": "#eae8e7",
"error": "#ba1a1a",
"primary-fixed-dim": "#ffb2bb",
"outline-variant": "#dac0c2",
"surface-dim": "#dbd9d9",
"tertiary": "#2c2114"
},
borderRadius: {
"DEFAULT": "0.125rem",
"lg": "0.25rem",
"xl": "0.5rem",
"full": "0.75rem"
},
spacing: {
"gutter": "24px",
"stack-sm": "8px",
"container-max": "1120px",
"stack-lg": "32px",
"section-gap": "64px",
"margin-edge": "32px",
"stack-md": "16px"
},
fontFamily: {
"display-lg": ["Libre Caslon Text"],
"headline-lg": ["Libre Caslon Text"],
"headline-lg-mobile": ["Libre Caslon Text"],
"body-md": ["Work Sans"],
"label-caps": ["Work Sans"],
"body-lg": ["Work Sans"],
"button": ["Work Sans"],
"headline-md": ["Libre Caslon Text"]
},
fontSize: {
"display-lg": ["40px", { lineHeight: "48px", letterSpacing: "-0.02em", fontWeight: "700" }],
"headline-lg": ["32px", { lineHeight: "40px", fontWeight: "700" }],
"headline-lg-mobile": ["26px", { lineHeight: "32px", fontWeight: "700" }],
"body-md": ["16px", { lineHeight: "24px", fontWeight: "400" }],
"label-caps": ["12px", { lineHeight: "16px", letterSpacing: "0.1em", fontWeight: "600" }],
"body-lg": ["18px", { lineHeight: "28px", fontWeight: "400" }],
"button": ["14px", { lineHeight: "20px", fontWeight: "600" }],
"headline-md": ["24px", { lineHeight: "32px", fontWeight: "600" }]
}
}
}
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.icon-fill {
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
</style>
</head>
<body class="bg-background text-on-background font-body-md antialiased overflow-x-hidden">
<!-- SideNavBar (Shared Component) -->
<nav class="h-screen w-64 fixed left-0 top-0 bg-surface dark:bg-surface-dim border-r border-outline-variant dark:border-outline z-50 flex flex-col py-stack-lg">
<!-- Header / Brand Area -->
<div class="px-margin-edge mb-section-gap flex flex-col items-start gap-stack-sm">
<div class="font-headline-md text-headline-md font-bold text-primary dark:text-primary-fixed mb-2">Tradhox</div>
<div class="flex items-center gap-3 w-full p-2 rounded-lg hover:bg-surface-container-high transition-colors duration-200 cursor-pointer">
<img alt="Store Owner Profile" class="w-10 h-10 rounded-full object-cover border border-outline-variant" data-alt="A close-up studio portrait of a traditional Indian artisan, softly lit to highlight the textures of their woven garments. The artisan looks slightly off-camera with a serene, proud expression. The background is a muted, warm studio grey, emphasizing the subject's craftsmanship and cultural heritage." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCm99RI_WStIkfNUvQCwPmOMiIRksrAeImH1mePNgRRqFjNP9JCBi1L6r08WO7CnD1FahA_9N4hxQ8gjov6defwS78KAdtgV9Roz6f-hIgCBJ4XaK4nTrdsh3cYoOQGBHG7QTT4pSt8vWax1Pai6WNQ16KTx_sMrSR43n8Fl9azSyL_3q85YRaT9m--8gCuoaEcKJgILQE-i-eFPiyWAEi_KKcOPw25-8mrQFjICgvi2yhGsaosJKI_ZA"/>
<div class="flex flex-col">
<span class="font-button text-button text-on-surface">Tradhox Seller</span>
<span class="font-label-caps text-label-caps text-secondary uppercase">Artisan Partner</span>
</div>
</div>
<button class="mt-2 w-full text-center py-2 px-4 border border-primary text-primary font-button text-button rounded hover:bg-primary/5 transition-colors duration-200">
View Store
</button>
</div>
<!-- Navigation Links -->
<div class="flex flex-col flex-grow">
<a class="flex items-center gap-3 px-margin-edge py-3 text-secondary dark:text-secondary-fixed-dim hover:bg-secondary-container/10 transition-colors duration-200" href="#">
<span class="material-symbols-outlined text-[20px]">home</span>
<span class="font-button text-button">Home</span>
</a>
<a class="flex items-center gap-3 px-margin-edge py-3 text-secondary dark:text-secondary-fixed-dim hover:bg-secondary-container/10 transition-colors duration-200" href="#">
<span class="material-symbols-outlined text-[20px]">shopping_cart</span>
<span class="font-button text-button">Orders</span>
</a>
<a class="flex items-center gap-3 px-margin-edge py-3 text-secondary dark:text-secondary-fixed-dim hover:bg-secondary-container/10 transition-colors duration-200" href="#">
<span class="material-symbols-outlined text-[20px]">inventory_2</span>
<span class="font-button text-button">Products</span>
</a>
<a class="flex items-center gap-3 px-margin-edge py-3 text-secondary dark:text-secondary-fixed-dim hover:bg-secondary-container/10 transition-colors duration-200" href="#">
<span class="material-symbols-outlined text-[20px]">payments</span>
<span class="font-button text-button">Payments</span>
</a>
<a class="flex items-center gap-3 px-margin-edge py-3 text-secondary dark:text-secondary-fixed-dim hover:bg-secondary-container/10 transition-colors duration-200" href="#">
<span class="material-symbols-outlined text-[20px]">leaderboard</span>
<span class="font-button text-button">Analytics</span>
</a>
<!-- Active Tab: Settings -->
<a class="flex items-center gap-3 px-margin-edge py-3 bg-primary-container/5 text-primary font-bold border-r-4 border-primary transition-all opacity-80" href="#">
<span class="material-symbols-outlined text-[20px] icon-fill">settings</span>
<span class="font-button text-button">Settings</span>
</a>
</div>
</nav>
<!-- TopNavBar (Shared Component) -->
<header class="fixed top-0 right-0 w-[calc(100%-16rem)] z-40 bg-surface/80 dark:bg-surface-dim/80 backdrop-blur-md border-b border-outline-variant dark:border-outline flex justify-between items-center h-16 px-margin-edge ml-64">
<!-- Left Area (Empty or contextual, Product Name usually handled in sidebar for this layout, but following JSON search logic) -->
<div class="flex items-center flex-1">
<div class="relative w-64">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-secondary text-[20px]">search</span>
<input class="w-full bg-surface-container-low border border-outline-variant rounded pl-10 pr-4 py-1.5 font-body-md text-body-md text-on-surface focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all" placeholder="Search..." type="text"/>
</div>
</div>
<!-- Right Area: Actions & Profile -->
<div class="flex items-center gap-stack-md">
<button class="text-secondary dark:text-secondary-fixed-dim hover:text-primary dark:hover:text-primary-fixed transition-colors active:scale-95">
<span class="material-symbols-outlined">notifications</span>
</button>
<button class="text-secondary dark:text-secondary-fixed-dim hover:text-primary dark:hover:text-primary-fixed transition-colors active:scale-95">
<span class="material-symbols-outlined">help_outline</span>
</button>
<div class="h-8 w-px bg-outline-variant mx-2"></div>
<img alt="Seller Avatar" class="w-8 h-8 rounded-full border border-outline-variant cursor-pointer object-cover" data-alt="A small, circular avatar image showing a macro shot of intricately woven natural fibers. The texture is prominent, with warm earthy tones of beige and brown, representing an artisanal craft context in a clean, minimal style." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDfP_P9njAGlKmQ5gSN9l0v9c6xGaUblWqTNEppcMtOKilo4W9lFZlEFfRQrZndgLsHerwuJCC14tUi3XVT46JenxA-GPordrhVI-sVklJOJawGnL0BhQGpXCMBGH1UQb5kztXU3vCWFfX8GVObem2XcNpZUnCsv3ITFLDAfSCzxGotu8FNdiZdkFRO_XKBQ0jHIPa-PTauYhkPzh8KnpMUgmbZqJ6c4UmFv3yTxAbEnafltbluo340aw"/>
</div>
</header>
<!-- Main Content Canvas -->
<main class="ml-64 pt-24 min-h-screen px-margin-edge pb-section-gap">
<div class="max-w-container-max mx-auto">
<!-- Page Header -->
<div class="mb-section-gap">
<h1 class="font-headline-lg text-headline-lg text-on-background mb-stack-sm">Settings</h1>
<p class="font-body-lg text-body-lg text-secondary">Manage your artisan store profile, account details, and preferences.</p>
</div>
<!-- Settings Navigation (In-page Tabs) -->
<div class="flex border-b border-outline-variant mb-section-gap gap-stack-lg overflow-x-auto relative">
<!-- Active Tab -->
<button class="font-button text-button text-primary pb-stack-sm border-b-2 border-primary relative top-[1px]">
Store Profile
</button>
<button class="font-button text-button text-secondary hover:text-primary transition-colors pb-stack-sm border-b-2 border-transparent relative top-[1px]">
Account Settings
</button>
<button class="font-button text-button text-secondary hover:text-primary transition-colors pb-stack-sm border-b-2 border-transparent relative top-[1px]">
Shipping Preferences
</button>
<button class="font-button text-button text-secondary hover:text-primary transition-colors pb-stack-sm border-b-2 border-transparent relative top-[1px]">
Notifications
</button>
</div>
<!-- Tab Content: Store Profile -->
<div class="flex flex-col gap-section-gap">
<!-- Section 1: Basic Information (Asymmetric Layout) -->
<div class="grid grid-cols-1 md:grid-cols-12 gap-gutter">
<!-- Left Column: Context -->
<div class="md:col-span-4 flex flex-col">
<h2 class="font-headline-md text-headline-md text-on-background mb-stack-sm">Public Profile</h2>
<p class="font-body-md text-body-md text-secondary">
This information will be displayed publicly on your artisan store page. Make sure your brand reflects the quality of your craft.
</p>
</div>
<!-- Right Column: Form Fields in a Glass/Clean Card -->
<div class="md:col-span-8 bg-surface-container-lowest border border-outline-variant rounded-lg p-margin-edge shadow-[0_4px_20px_rgba(107,26,44,0.02)]">
<!-- Logo Upload -->
<div class="flex items-center gap-stack-lg mb-stack-lg pb-stack-lg border-b border-surface-container-high">
<div class="relative group">
<img class="w-20 h-20 rounded-full object-cover border border-outline-variant" data-alt="A clean, minimalist logo placeholder image. The design features a stylized, continuous line-art drawing of a loom or weaving tool in deep maroon on an off-white background. The image has a subtle paper texture, conveying an authentic, handcrafted brand identity." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAILFVWTQhDaG_Vnsodmdq-gvnv7cLSh7Cebas19cjBXnaoRSzC2fK8sKdYgujI37D8ofBs35zZhLfMqXXdHttB6L0dyVH2GC_PEAl-u9XDxmkb4CRYAsXVfQfD8y6nNR40XzDPhz4WoZh-fyIdgEX4dk54o_GhsnE0u7cZYna-QzgjrAUl1-Lp1z2PNjVnMMk3eQYQ79VdQwdGb4wZPmxqYHDqtjc4847zh0LIyylLdHDBlQH_eC29Cw"/>
<div class="absolute inset-0 bg-primary/20 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer">
<span class="material-symbols-outlined text-surface-container-lowest">edit</span>
</div>
</div>
<div class="flex flex-col gap-stack-sm">
<button class="self-start px-4 py-2 border border-primary text-primary font-button text-button rounded hover:bg-primary-container/5 transition-colors">
Change Logo
</button>
<span class="font-label-caps text-label-caps text-secondary uppercase">JPG, GIF or PNG. Max size of 800K</span>
</div>
</div>
<!-- Form Inputs -->
<div class="flex flex-col gap-stack-md">
<!-- Store Name -->
<div class="flex flex-col gap-2">
<label class="font-label-caps text-label-caps text-secondary uppercase tracking-wider">Store Name</label>
<input class="bg-surface-container-lowest border border-outline-variant rounded px-4 py-3 font-body-md text-body-md text-on-surface focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all" type="text" value="Heritage Weaves &amp; Co."/>
</div>
<!-- Store URL -->
<div class="flex flex-col gap-2">
<label class="font-label-caps text-label-caps text-secondary uppercase tracking-wider">Store URL</label>
<div class="flex">
<span class="inline-flex items-center px-4 rounded-l border border-r-0 border-outline-variant bg-surface-container-low text-secondary font-body-md text-body-md">
tradhox.com/store/
</span>
<input class="flex-1 bg-surface-container-lowest border border-outline-variant rounded-r px-4 py-3 font-body-md text-body-md text-on-surface focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all" type="text" value="heritage-weaves"/>
</div>
</div>
<!-- Description -->
<div class="flex flex-col gap-2 mt-stack-sm">
<label class="font-label-caps text-label-caps text-secondary uppercase tracking-wider">About Your Craft</label>
<textarea class="bg-surface-container-lowest border border-outline-variant rounded px-4 py-3 font-body-md text-body-md text-on-surface focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all resize-none" rows="4">Preserving centuries-old handloom techniques, our family has been creating pure silk and cotton textiles for three generations. Every piece is a testament to the dedication of our master weavers in Varanasi.</textarea>
<span class="font-label-caps text-label-caps text-secondary uppercase self-end mt-1">214 / 500 characters</span>
</div>
</div>
</div>
</div>
<!-- Divider -->
<hr class="border-outline-variant"/>
<!-- Section 2: Contact Information -->
<div class="grid grid-cols-1 md:grid-cols-12 gap-gutter pb-section-gap">
<!-- Left Column -->
<div class="md:col-span-4 flex flex-col">
<h2 class="font-headline-md text-headline-md text-on-background mb-stack-sm">Support Contact</h2>
<p class="font-body-md text-body-md text-secondary">
How buyers can reach you for inquiries regarding custom orders or product details.
</p>
</div>
<!-- Right Column -->
<div class="md:col-span-8 bg-surface-container-lowest border border-outline-variant rounded-lg p-margin-edge shadow-[0_4px_20px_rgba(107,26,44,0.02)]">
<div class="grid grid-cols-1 md:grid-cols-2 gap-stack-md">
<div class="flex flex-col gap-2">
<label class="font-label-caps text-label-caps text-secondary uppercase tracking-wider">Support Email</label>
<input class="bg-surface-container-lowest border border-outline-variant rounded px-4 py-3 font-body-md text-body-md text-on-surface focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all" type="email" value="hello@heritageweaves.in"/>
</div>
<div class="flex flex-col gap-2">
<label class="font-label-caps text-label-caps text-secondary uppercase tracking-wider">Phone Number (Optional)</label>
<input class="bg-surface-container-lowest border border-outline-variant rounded px-4 py-3 font-body-md text-body-md text-on-surface focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all" type="tel" value="+91 98765 43210"/>
</div>
</div>
</div>
</div>
<!-- Bottom Action Bar (Sticky or floating feel) -->
<div class="flex justify-end gap-stack-md border-t border-outline-variant pt-margin-edge mt-auto">
<button class="px-6 py-3 border border-outline-variant text-on-surface font-button text-button rounded hover:bg-surface-container-high transition-colors">
Discard Changes
</button>
<button class="px-6 py-3 bg-primary text-on-primary font-button text-button rounded shadow-sm hover:bg-primary/90 transition-colors flex items-center gap-2">
Save Profile
<span class="material-symbols-outlined text-[18px]">arrow_forward</span>
</button>
</div>
</div>
</div>
</main>
</body></html>

BIN
seller_settings/screen.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 46 KiB

2
src/App.test.tsx
View file

@ -244,7 +244,7 @@ describe('Supplier Portal Onboarding & Active Dashboard Tests', () => {
expect(screen.getByText(/Orders Management/i)).toBeInTheDocument()
// Check Sidebar Tab click: Payments
const walletTabBtn = screen.getByText(/Payments/i)
const walletTabBtn = screen.getByText('Payments')
fireEvent.click(walletTabBtn)
expect(screen.getByText(/Payments Overview/i)).toBeInTheDocument()

357
src/App.tsx
View file

@ -1389,7 +1389,7 @@ export default function App() {
<button
type="submit"
className="btn btn-primary"
style={{ flex: 1, backgroundColor: 'var(--accent)', color: 'var(--primary)', fontWeight: 'bold' }}
style={{ flex: 1, backgroundColor: 'var(--accent)', color: '#ffffff', fontWeight: 'bold' }}
disabled={!gstin || !isGstinVerified}
>
Next Step →
@ -1475,7 +1475,7 @@ export default function App() {
<button
type="submit"
className="btn btn-primary"
style={{ flex: 1, backgroundColor: 'var(--accent)', color: 'var(--primary)', fontWeight: 'bold' }}
style={{ flex: 1, backgroundColor: 'var(--accent)', color: '#ffffff', fontWeight: 'bold' }}
disabled={!aadharFile || !panFile}
>
Next Step →
@ -1639,7 +1639,7 @@ export default function App() {
<button
type="submit"
className="btn btn-primary"
style={{ flex: 1, backgroundColor: 'var(--accent)', color: 'var(--primary)', fontWeight: 'bold' }}
style={{ flex: 1, backgroundColor: 'var(--accent)', color: '#ffffff', fontWeight: 'bold' }}
disabled={!phoneVerified || !emailVerified}
>
Next Step →
@ -1694,7 +1694,7 @@ export default function App() {
<button
type="submit"
className="btn btn-primary"
style={{ flex: 1, backgroundColor: 'var(--accent)', color: 'var(--primary)', fontWeight: 'bold' }}
style={{ flex: 1, backgroundColor: 'var(--accent)', color: '#ffffff', fontWeight: 'bold' }}
disabled={selectedCategories.length === 0}
>
Next Step →
@ -1872,7 +1872,7 @@ export default function App() {
<button
type="submit"
className="btn btn-primary"
style={{ flex: 1, backgroundColor: 'var(--accent)', color: 'var(--primary)', fontWeight: 'bold' }}
style={{ flex: 1, backgroundColor: 'var(--accent)', color: '#ffffff', fontWeight: 'bold' }}
disabled={!storeName || !storeSlug || !supportEmail || !supportPhone || !address.street || !address.city || !address.state || !address.pincode}
>
Submit Supplier Profile
@ -1916,84 +1916,79 @@ export default function App() {
<div className="dashboard-container">
{/* Sidebar */}
<aside className="dashboard-sidebar" style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between', padding: '1.5rem 1rem', minWidth: '260px', borderRight: '1px solid var(--border)', backgroundColor: '#FFFFFF' }}>
<div>
{/* Logo (Maroon bold serif) */}
<div style={{ padding: '0.5rem 1rem', marginBottom: '2rem' }}>
<h2 style={{ fontFamily: 'var(--heading-font-family)', color: 'var(--primary)', fontWeight: 'bold', fontSize: '1.8rem', letterSpacing: '-0.5px', margin: 0 }}>Tradhox</h2>
</div>
<aside className="dashboard-sidebar">
<div className="sidebar-brand-area">
<div className="font-headline-md text-headline-md font-bold text-primary mb-2" style={{ fontFamily: 'var(--heading-font-family)', color: 'var(--primary)', fontWeight: 'bold', fontSize: '1.8rem', letterSpacing: '-0.5px' }}>Tradhox</div>
{/* Profile Card */}
<div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', padding: '0.75rem 1rem', marginBottom: '1.5rem', backgroundColor: '#F9F6F2', borderRadius: '8px' }}>
<div className="sidebar-profile-card">
<div style={{ width: '40px', height: '40px', borderRadius: '50%', backgroundColor: 'var(--primary)', color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 'bold', overflow: 'hidden' }}>
{storeLogo ? <img src={storeLogo} style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> : <span style={{ fontSize: '1.2rem' }}>{CONFIG.logoLetter}</span>}
</div>
<div style={{ display: 'flex', flexDirection: 'column' }}>
<span style={{ fontWeight: 'bold', fontSize: '0.9rem', color: '#4A4A4A' }}>{storeName || 'Tradhox Seller'}</span>
<span style={{ fontSize: '0.75rem', color: 'var(--text-muted)' }}>Artisan Partner</span>
<span style={{ fontWeight: 'bold', fontSize: '0.9rem', color: 'var(--text-dark)' }}>{storeName || 'Tradhox Seller'}</span>
<span className="font-label-caps text-label-caps text-secondary uppercase" style={{ fontSize: '0.75rem', color: 'var(--text-muted)' }}>Artisan Partner</span>
</div>
</div>
</div>
<ul className="sidebar-menu" style={{ listStyle: 'none', padding: 0, margin: 0 }}>
<li style={{ marginBottom: '0.5rem' }}>
<ul className="sidebar-menu-list">
<li>
<button
className={`sidebar-item-btn ${dashTab === 'overview' ? 'active' : ''}`}
className={`sidebar-link ${dashTab === 'overview' ? 'active' : ''}`}
onClick={() => { setDashTab('overview'); setSelectedOrderDetail(null); }}
style={{ width: '100%', padding: '0.75rem 1rem', borderRadius: '4px', textAlign: 'left', display: 'flex', alignItems: 'center', gap: '0.75rem', fontSize: '0.95rem', fontWeight: 500, border: 'none', cursor: 'pointer', backgroundColor: dashTab === 'overview' ? '#F9F6F2' : 'transparent', color: dashTab === 'overview' ? 'var(--primary)' : '#4A4A4A' }}
>
🏠 Home
<span className="material-symbols-outlined text-[20px]">home</span>
<span className="font-button text-button">Home</span>
</button>
</li>
<li style={{ marginBottom: '0.5rem' }}>
<li>
<button
className={`sidebar-item-btn ${dashTab === 'orders' ? 'active' : ''}`}
className={`sidebar-link ${dashTab === 'orders' ? 'active' : ''}`}
onClick={() => { setDashTab('orders'); setSelectedOrderDetail(null); }}
style={{ width: '100%', padding: '0.75rem 1rem', borderRadius: '4px', textAlign: 'left', display: 'flex', alignItems: 'center', gap: '0.75rem', fontSize: '0.95rem', fontWeight: 500, border: 'none', cursor: 'pointer', backgroundColor: dashTab === 'orders' ? '#F9F6F2' : 'transparent', color: dashTab === 'orders' ? 'var(--primary)' : '#4A4A4A' }}
>
🛒 Orders
<span className="material-symbols-outlined text-[20px]">shopping_cart</span>
<span className="font-button text-button">Orders</span>
</button>
</li>
<li style={{ marginBottom: '0.5rem' }}>
<li>
<button
className={`sidebar-item-btn ${dashTab === 'products' ? 'active' : ''}`}
className={`sidebar-link ${dashTab === 'products' ? 'active' : ''}`}
onClick={() => { setDashTab('products'); setProductWizardStep(0); setSelectedOrderDetail(null); }}
style={{ width: '100%', padding: '0.75rem 1rem', borderRadius: '4px', textAlign: 'left', display: 'flex', alignItems: 'center', gap: '0.75rem', fontSize: '0.95rem', fontWeight: 500, border: 'none', cursor: 'pointer', backgroundColor: dashTab === 'products' ? '#F9F6F2' : 'transparent', color: dashTab === 'products' ? 'var(--primary)' : '#4A4A4A' }}
>
📦 Products
<span className="material-symbols-outlined text-[20px]">inventory_2</span>
<span className="font-button text-button">Products</span>
</button>
</li>
<li style={{ marginBottom: '0.5rem' }}>
<li>
<button
className={`sidebar-item-btn ${dashTab === 'wallet' ? 'active' : ''}`}
className={`sidebar-link ${dashTab === 'wallet' ? 'active' : ''}`}
onClick={() => { setDashTab('wallet'); setSelectedOrderDetail(null); }}
style={{ width: '100%', padding: '0.75rem 1rem', borderRadius: '4px', textAlign: 'left', display: 'flex', alignItems: 'center', gap: '0.75rem', fontSize: '0.95rem', fontWeight: 500, border: 'none', cursor: 'pointer', backgroundColor: dashTab === 'wallet' ? '#F9F6F2' : 'transparent', color: dashTab === 'wallet' ? 'var(--primary)' : '#4A4A4A' }}
>
💵 Payments
<span className="material-symbols-outlined text-[20px]">payments</span>
<span className="font-button text-button">Payments</span>
</button>
</li>
<li style={{ marginBottom: '0.5rem' }}>
<li>
<button
className={`sidebar-item-btn ${dashTab === 'analytics' ? 'active' : ''}`}
className={`sidebar-link ${dashTab === 'analytics' ? 'active' : ''}`}
onClick={() => { setDashTab('analytics'); setSelectedOrderDetail(null); }}
style={{ width: '100%', padding: '0.75rem 1rem', borderRadius: '4px', textAlign: 'left', display: 'flex', alignItems: 'center', gap: '0.75rem', fontSize: '0.95rem', fontWeight: 500, border: 'none', cursor: 'pointer', backgroundColor: dashTab === 'analytics' ? '#F9F6F2' : 'transparent', color: dashTab === 'analytics' ? 'var(--primary)' : '#4A4A4A' }}
>
📊 Analytics
<span className="material-symbols-outlined text-[20px]">leaderboard</span>
<span className="font-button text-button">Analytics</span>
</button>
</li>
<li style={{ marginBottom: '0.5rem' }}>
<li>
<button
className={`sidebar-item-btn ${dashTab === 'settings' ? 'active' : ''}`}
className={`sidebar-link ${dashTab === 'settings' ? 'active' : ''}`}
onClick={() => { setDashTab('settings'); setSelectedOrderDetail(null); }}
style={{ width: '100%', padding: '0.75rem 1rem', borderRadius: '4px', textAlign: 'left', display: 'flex', alignItems: 'center', gap: '0.75rem', fontSize: '0.95rem', fontWeight: 500, border: 'none', cursor: 'pointer', backgroundColor: dashTab === 'settings' ? '#F9F6F2' : 'transparent', color: dashTab === 'settings' ? 'var(--primary)' : '#4A4A4A' }}
>
⚙️ Settings
<span className="material-symbols-outlined text-[20px] icon-fill">settings</span>
<span className="font-button text-button">Settings</span>
</button>
</li>
</ul>
</div>
{/* View Store Button at bottom */}
<div style={{ padding: '0.5rem' }}>
<div style={{ padding: '0 2rem' }}>
<button
className="btn btn-outline-dark"
style={{ width: '100%', borderRadius: '4px', border: '1px solid var(--border)', fontSize: '0.9rem', padding: '0.6rem', backgroundColor: 'transparent', cursor: 'pointer' }}
@ -2004,8 +1999,26 @@ export default function App() {
</div>
</aside>
{/* Topbar Header */}
<header className="dashboard-topbar">
<div className="search-container">
<span className="material-symbols-outlined text-[20px]" style={{ position: 'absolute', left: '12px', top: '50%', transform: 'translateY(-50%)', color: 'var(--text-muted)' }}>search</span>
<input className="search-input" placeholder="Search..." type="text" />
</div>
<div className="topbar-actions">
<button className="topbar-btn">
<span className="material-symbols-outlined">notifications</span>
</button>
<button className="topbar-btn">
<span className="material-symbols-outlined">help_outline</span>
</button>
<div style={{ height: '32px', width: '1px', backgroundColor: 'var(--outline-variant)', margin: '0 8px' }}></div>
<img alt="Seller Avatar" style={{ width: '32px', height: '32px', borderRadius: '50%', border: '1px solid var(--outline-variant)', cursor: 'pointer', objectFit: 'cover' }} src={storeLogo || "https://lh3.googleusercontent.com/aida-public/AB6AXuDfP_P9njAGlKmQ5gSN9l0v9c6xGaUblWqTNEppcMtOKilo4W9lFZlEFfRQrZndgLsHerwuJCC14tUi3XVT46JenxA-GPordrhVI-sVklJOJawGnL0BhQGpXCMBGH1UQb5kztXU3vCWFfX8GVObem2XcNpZUnCsv3ITFLDAfSCzxGotu8FNdiZdkFRO_XKBQ0jHIPa-PTauYhkPzh8KnpMUgmbZqJ6c4UmFv3yTxAbEnafltbluo340aw"} />
</div>
</header>
{/* Main Dashboard Space */}
<section className="dashboard-main" style={{ flex: 1, padding: '2rem', backgroundColor: '#F9F6F2', overflowY: 'auto' }}>
<section className="dashboard-main">
{/* OVERVIEW PANEL / HOME TAB */}
{dashTab === 'overview' && !selectedOrderDetail && (
@ -3167,8 +3180,20 @@ export default function App() {
{/* SETTINGS TAB */}
{dashTab === 'settings' && (
<div className="form-card" style={{ margin: 0, maxWidth: '640px' }}>
<h2 className="form-card-title" style={{ textAlign: 'left', marginBottom: '2rem' }}>Store Configurations</h2>
<div className="max-w-container-max mx-auto" style={{ width: '100%' }}>
{/* Page Header */}
<div style={{ marginBottom: '2rem' }}>
<h1 className="font-headline-lg text-headline-lg text-on-background mb-stack-sm" style={{ fontFamily: 'var(--heading-font-family)', fontSize: '2rem', marginBottom: '0.5rem' }}>Settings</h1>
<p className="font-body-lg text-body-lg text-secondary" style={{ color: 'var(--text-muted)' }}>Manage your artisan store profile, account details, and preferences.</p>
</div>
{/* Settings Navigation (In-page Tabs) */}
<div style={{ display: 'flex', borderBottom: '1px solid var(--border)', marginBottom: '2rem', gap: '1.5rem', overflowX: 'auto', position: 'relative' }}>
<button className="settings-tab-btn active">Store Profile</button>
<button className="settings-tab-btn" onClick={() => alert('Account Settings coming soon')}>Account Settings</button>
<button className="settings-tab-btn" onClick={() => alert('Shipping Preferences coming soon')}>Shipping Preferences</button>
<button className="settings-tab-btn" onClick={() => alert('Notifications coming soon')}>Notifications</button>
</div>
<form onSubmit={e => {
e.preventDefault();
@ -3176,24 +3201,74 @@ export default function App() {
.then(() => alert('Store configurations updated successfully!'))
.catch(err => alert(err.message));
}}>
<div className="form-group" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.75rem' }}>
<div>
<label htmlFor="set-store">Store Display Name *</label>
{/* Tab Content: Store Profile */}
<div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
{/* Section 1: Basic Information (Asymmetric Layout) */}
<div className="settings-grid-row">
{/* Left Column: Context */}
<div className="col-span-4" style={{ display: 'flex', flexDirection: 'column' }}>
<h2 className="font-headline-md text-headline-md text-on-background mb-stack-sm" style={{ fontFamily: 'var(--heading-font-family)', fontSize: '1.5rem', marginBottom: '0.5rem' }}>Public Profile</h2>
<p className="font-body-md text-body-md text-secondary" style={{ color: 'var(--text-muted)', fontSize: '0.95rem' }}>
This information will be displayed publicly on your artisan store page. Make sure your brand reflects the quality of your craft.
</p>
</div>
{/* Right Column: Form Fields in a Glass/Clean Card */}
<div className="col-span-8 settings-card">
{/* Logo Upload */}
<div style={{ display: 'flex', alignItems: 'center', gap: '1.5rem', marginBottom: '1.5rem', paddingBottom: '1.5rem', borderBottom: '1px solid var(--border)' }}>
<div style={{ position: 'relative', cursor: 'pointer' }} className="group">
<div style={{ width: '80px', height: '80px', borderRadius: '50%', backgroundColor: 'var(--primary)', color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 'bold', overflow: 'hidden', border: '1px solid var(--border)' }}>
{storeLogo ? <img src={storeLogo} style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> : <span style={{ fontSize: '1.8rem' }}>{CONFIG.logoLetter}</span>}
</div>
<input
type="file"
accept="image/*"
onChange={handleLogoChange}
style={{ position: 'absolute', inset: 0, opacity: 0, cursor: 'pointer' }}
/>
</div>
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
<div style={{ position: 'relative' }}>
<button type="button" className="self-start px-4 py-2 border border-primary text-primary font-button text-button rounded hover:bg-primary-container/5 transition-colors" style={{ padding: '0.5rem 1rem', border: '1px solid var(--primary)', color: 'var(--primary)', borderRadius: '4px', background: 'none', fontWeight: 'bold', cursor: 'pointer' }}>
Change Logo
</button>
<input
type="file"
accept="image/*"
onChange={handleLogoChange}
style={{ position: 'absolute', left: 0, top: 0, width: '110px', height: '36px', opacity: 0, cursor: 'pointer' }}
/>
</div>
<span className="font-label-caps text-label-caps text-secondary uppercase" style={{ fontSize: '0.75rem', color: 'var(--text-muted)' }}>JPG, GIF or PNG. Max size of 800K</span>
</div>
</div>
{/* Form Inputs */}
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
{/* Store Name */}
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
<label className="font-label-caps text-label-caps text-secondary uppercase tracking-wider" style={{ fontSize: '0.75rem', color: 'var(--text-muted)', fontWeight: 600 }}>Store Name</label>
<input
id="set-store"
type="text"
className="form-control"
type="text"
value={storeName}
onChange={e => setStoreName(e.target.value)}
required
/>
</div>
<div>
<label htmlFor="set-slug">Store Slug / Custom URL *</label>
{/* Store URL */}
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
<label className="font-label-caps text-label-caps text-secondary uppercase tracking-wider" style={{ fontSize: '0.75rem', color: 'var(--text-muted)', fontWeight: 600 }}>Store URL</label>
<div style={{ display: 'flex' }}>
<span style={{ display: 'inline-flex', alignItems: 'center', padding: '0 1rem', borderRadius: '4px 0 0 4px', border: '1px solid var(--border)', borderRight: 'none', backgroundColor: 'var(--surface-container-low)', color: 'var(--text-muted)', fontSize: '0.95rem' }}>
tradhox.com/store/
</span>
<input
id="set-slug"
type="text"
className="form-control"
style={{ borderRadius: '0 4px 4px 0', flex: 1 }}
type="text"
value={storeSlug}
onChange={e => setStoreSlug(e.target.value.toLowerCase().replace(/[^a-z0-9\-]/g, ''))}
required
@ -3201,152 +3276,72 @@ export default function App() {
</div>
</div>
<div className="form-group">
<label htmlFor="set-logo">Store Logo</label>
<div className="upload-btn-wrapper">
<div className="upload-preview-box">
{storeLogo ? (
<img src={storeLogo} alt="Logo" />
) : (
<span style={{ fontSize: '1.5rem', color: 'var(--text-muted)' }}>🖼️</span>
)}
{/* Description */}
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
<label className="font-label-caps text-label-caps text-secondary uppercase tracking-wider" style={{ fontSize: '0.75rem', color: 'var(--text-muted)', fontWeight: 600 }}>About Your Craft</label>
<textarea
className="form-control"
rows={4}
style={{ resize: 'none' }}
value={businessBio}
onChange={e => setBusinessBio(e.target.value)}
></textarea>
<span className="font-label-caps text-label-caps text-secondary uppercase self-end mt-1" style={{ fontSize: '0.75rem', color: 'var(--text-muted)', alignSelf: 'flex-end' }}>{businessBio.length} / 500 characters</span>
</div>
</div>
<input
id="set-logo"
type="file"
accept="image/*"
onChange={handleLogoChange}
/>
</div>
</div>
<div className="form-group" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.75rem' }}>
<div>
<label htmlFor="set-email">Support Email *</label>
{/* Divider */}
<hr style={{ border: 'none', borderTop: '1px solid var(--border)', margin: '1rem 0' }} />
{/* Section 2: Contact Information */}
<div className="settings-grid-row">
{/* Left Column */}
<div className="col-span-4" style={{ display: 'flex', flexDirection: 'column' }}>
<h2 className="font-headline-md text-headline-md text-on-background mb-stack-sm" style={{ fontFamily: 'var(--heading-font-family)', fontSize: '1.5rem', marginBottom: '0.5rem' }}>Support Contact</h2>
<p className="font-body-md text-body-md text-secondary" style={{ color: 'var(--text-muted)', fontSize: '0.95rem' }}>
How buyers can reach you for inquiries regarding custom orders or product details.
</p>
</div>
{/* Right Column */}
<div className="col-span-8 settings-card">
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
<label className="font-label-caps text-label-caps text-secondary uppercase tracking-wider" style={{ fontSize: '0.75rem', color: 'var(--text-muted)', fontWeight: 600 }}>Support Email</label>
<input
id="set-email"
type="email"
className="form-control"
type="email"
value={supportEmail}
onChange={e => setSupportEmail(e.target.value)}
required
/>
</div>
<div>
<label htmlFor="set-phone">Support Phone *</label>
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
<label className="font-label-caps text-label-caps text-secondary uppercase tracking-wider" style={{ fontSize: '0.75rem', color: 'var(--text-muted)', fontWeight: 600 }}>Phone Number (Optional)</label>
<input
id="set-phone"
type="tel"
className="form-control"
type="tel"
value={supportPhone}
onChange={e => setSupportPhone(e.target.value)}
required
/>
</div>
</div>
</div>
</div>
<div className="form-group">
<label htmlFor="set-bio">About Your Craft / Business</label>
<textarea
id="set-bio"
className="form-control"
rows={3}
value={businessBio}
onChange={e => setBusinessBio(e.target.value)}
></textarea>
</div>
<div className="form-group">
<label>Product Categories</label>
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.5rem', marginTop: '0.5rem' }}>
{['Sustainable Products', 'Home Decor', 'Eco-Friendly', 'OPOD Products', 'GI Tagged', 'Textiles & Apparel'].map(cat => {
const isSelected = selectedCategories.includes(cat);
return (
<label key={cat} style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', cursor: 'pointer', padding: '0.5rem', border: '1px solid var(--border)', borderRadius: '4px' }}>
<input
type="checkbox"
checked={isSelected}
onChange={() => {
if (isSelected) {
setSelectedCategories(selectedCategories.filter(c => c !== cat));
} else {
setSelectedCategories([...selectedCategories, cat]);
}
}}
/>
{cat}
</label>
);
})}
</div>
</div>
<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="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="Pincode"
value={address.pincode}
onChange={e => setAddress({ ...address, pincode: e.target.value })}
required
/>
</div>
</div>
<div className="form-group" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.75rem' }}>
<div>
<label htmlFor="set-business-type">Business Type</label>
<input
id="set-business-type"
type="text"
className="form-control"
value={businessType.replace('_', ' ').toUpperCase()}
disabled
/>
</div>
<div>
<label htmlFor="set-gstin">GSTIN Number</label>
<input
id="set-gstin"
type="text"
className="form-control"
value={gstin}
disabled
/>
</div>
</div>
<button type="submit" className="btn btn-dark" style={{ width: '100%', marginTop: '2rem' }}>
Save Store Configurations
{/* Bottom Action Bar */}
<div style={{ display: 'flex', justifyContent: 'flex-end', gap: '1rem', borderTop: '1px solid var(--border)', paddingTop: '1.5rem', marginTop: '1rem' }}>
<button type="button" className="px-6 py-3 border border-outline-variant text-on-surface font-button text-button rounded hover:bg-surface-container-high transition-colors" style={{ padding: '0.75rem 1.5rem', border: '1px solid var(--border)', backgroundColor: 'transparent', cursor: 'pointer', borderRadius: '4px' }} onClick={() => navigateTo('dashboard')}>
Discard Changes
</button>
<button type="submit" className="px-6 py-3 bg-primary text-on-primary font-button text-button rounded shadow-sm hover:bg-primary/90 transition-colors flex items-center gap-2" style={{ padding: '0.75rem 1.5rem', backgroundColor: 'var(--primary)', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '0.5rem', fontWeight: 'bold' }}>
Save Profile
<span className="material-symbols-outlined text-[18px]">arrow_forward</span>
</button>
</div>
</div>
</form>
</div>
)}

63
src/config.ts
View file

@ -121,6 +121,69 @@ export const CONFIG = {
}
export function apiFetch(url: string, options: RequestInit = {}): Promise<Response> {
if ((window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') && !navigator.userAgent.includes('jsdom')) {
const path = url.replace(CONFIG.apiBaseUrl, '');
let status = 200;
let data: any = {};
if (path.startsWith('/api/auth/login/')) {
data = { access: 'mock-access-token', refresh: 'mock-refresh-token' };
} else if (path.startsWith('/api/auth/register/')) {
data = { message: 'Registration successful' };
} else if (path.startsWith('/api/auth/verify-otp/')) {
data = { verified: true, message: 'OTP verified successfully' };
} else if (path.startsWith('/api/profile/submit-gstin/')) {
data = { message: 'GSTIN submitted', is_gstin_verified: true, verified: true };
} else if (path.startsWith('/api/profile/presigned-url/')) {
data = { url: 'https://mock-s3-upload-url.com', key: 'mock-s3-key' };
} else if (path.startsWith('/api/profile/')) {
data = {
phone: '9876543210',
phone_verified: true,
email_verified: true,
gstin: '29AAAAA1111A1Z1',
is_gstin_verified: true,
store_name: 'Heritage Weaves & Co.',
business_bio: 'Preserving centuries-old handloom techniques, our family has been creating pure silk and cotton textiles for three generations. Every piece is a testament to the dedication of our master weavers in Varanasi.',
street: '123 Handloom Lane',
city: 'Textile Town',
state: 'Karnataka',
pincode: '560001',
store_logo: '',
business_type: 'individual_maker',
store_slug: 'heritage-weaves',
support_email: 'hello@heritageweaves.in',
support_phone: '+91 98765 43210',
selected_categories: ['Textiles & Apparel', 'Sustainable Products']
};
} else if (path.startsWith('/api/products/')) {
data = CONFIG.dashboardData.initialProducts;
} else if (path.startsWith('/api/orders/')) {
if (path.includes('/accept/') || path.includes('/reject/')) {
data = { message: 'Order status updated successfully' };
} else {
data = CONFIG.dashboardData.initialOrders;
}
} else if (path.startsWith('/api/returns/')) {
if (path.includes('/action/')) {
data = { message: 'Return status updated successfully' };
} else {
data = CONFIG.dashboardData.initialReturns;
}
} else if (path.startsWith('/api/wallet/withdraw/')) {
data = { message: 'Withdrawal processed successfully' };
} else if (path.startsWith('/api/wallet/')) {
data = { outstanding: 38488.00, withdrawn: 6792.00, transactions: [] };
} else if (path.startsWith('/api/auth/logout/')) {
data = { message: 'Logout successful' };
}
return Promise.resolve(new Response(JSON.stringify(data), {
status,
headers: { 'Content-Type': 'application/json' }
}));
}
const token = localStorage.getItem('access_token');
const headers = {
...options.headers,

238
src/index.css
View file

@ -2,16 +2,28 @@
:root {
/* Colors - Artisanal Heritage */
--primary: #6B1A2C; /* Primary Maroon */
--accent: #6B1A2C; /* Same Maroon for primary actions */
--bg: #F9F6F2; /* Parchment Warm Off-white */
--card-bg: #FFFFFF; /* Clean White */
--text-dark: #4A4A4A; /* Soft Charcoal body text */
--text-muted: #887274; /* Outline/Border color or muted text */
--border: #D9C5B2; /* Tertiary border/divider */
--input-focus: #6B1A2C;
--primary: #4d0218; /* Primary Maroon */
--primary-container: #6b1a2c;
--accent: #4d0218;
--bg: #fbf9f8; /* Background */
--card-bg: #ffffff; /* Surface container lowest */
--text-dark: #1b1c1c; /* On Surface / On Background */
--text-muted: #5f5e5b; /* Secondary */
--border: #dac0c2; /* Outline Variant */
--outline: #887274; /* Outline */
--input-focus: #4d0218;
--success: #2A9D8F; /* Muted sage green */
--error: #BA1A1A;
--error: #ba1a1a;
/* Stitch Specific Colors */
--surface: #fbf9f8;
--surface-dim: #dbd9d9;
--surface-bright: #fbf9f8;
--surface-container-lowest: #ffffff;
--surface-container-low: #f5f3f3;
--surface-container: #efeded;
--surface-container-high: #eae8e7;
--surface-container-highest: #e4e2e2;
/* Typography */
--font-family: 'Work Sans', system-ui, -apple-system, sans-serif;
@ -132,14 +144,14 @@ body {
}
.btn-primary {
background-color: var(--accent);
color: var(--primary);
background-color: var(--primary);
color: #ffffff;
}
.btn-primary:hover {
background-color: #dfba5c;
background-color: rgba(77, 2, 24, 0.9);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(233, 196, 106, 0.3);
box-shadow: 0 4px 12px rgba(77, 2, 24, 0.25);
}
.btn-secondary {
@ -1143,4 +1155,204 @@ body {
animation: tourDotPulse 1.5s infinite ease-in-out;
}
/* ---------------------------------------------------------------------------
Stitch Redesign Layout & Styling Utilities
--------------------------------------------------------------------------- */
.dashboard-container {
display: flex;
min-height: 100vh;
background-color: var(--bg);
}
.dashboard-sidebar {
height: 100vh;
width: 16rem; /* 256px */
position: fixed;
left: 0;
top: 0;
background-color: var(--surface);
border-right: 1px solid var(--outline-variant);
z-index: 50;
display: flex;
flex-direction: column;
padding: 2rem 0;
}
.dashboard-topbar {
position: fixed;
top: 0;
right: 0;
width: calc(100% - 16rem);
z-index: 40;
background-color: rgba(251, 249, 248, 0.8);
backdrop-filter: blur(8px);
border-bottom: 1px solid var(--outline-variant);
display: flex;
justify-content: space-between;
align-items: center;
height: 4rem; /* 64px */
padding: 0 2rem;
}
.dashboard-main {
margin-left: 16rem;
padding: 6rem 2rem 4rem; /* pt-24 pb-16 px-8 */
flex: 1;
min-height: 100vh;
box-sizing: border-box;
}
/* Sidebar Specifics */
.sidebar-brand-area {
padding: 0 2rem;
margin-bottom: 2rem;
}
.sidebar-profile-card {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.2s;
}
.sidebar-profile-card:hover {
background-color: var(--surface-container-high);
}
.sidebar-menu-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.sidebar-link {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 2rem;
color: var(--text-muted);
text-decoration: none;
font-weight: 500;
transition: all 0.2s;
border-right: 4px solid transparent;
background: none;
border-top: none;
border-left: none;
border-right: none;
width: 100%;
text-align: left;
cursor: pointer;
font-family: inherit;
}
.sidebar-link:hover {
background-color: rgba(95, 94, 91, 0.05);
color: var(--primary);
}
.sidebar-link.active {
background-color: rgba(107, 26, 44, 0.05);
color: var(--primary);
font-weight: bold;
border-right-color: var(--primary);
}
/* Topbar Components */
.search-container {
position: relative;
width: 16rem;
}
.search-input {
width: 100%;
background-color: var(--surface-container-low);
border: 1px solid var(--outline-variant);
border-radius: 4px;
padding: 0.375rem 1rem 0.375rem 2.5rem;
font-size: 0.95rem;
color: var(--text-dark);
transition: all 0.2s;
}
.search-input:focus {
outline: none;
border-color: var(--primary);
}
.topbar-actions {
display: flex;
align-items: center;
gap: 1rem;
}
.topbar-btn {
background: none;
border: none;
color: var(--text-muted);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: color 0.2s, transform 0.1s;
}
.topbar-btn:hover {
color: var(--primary);
}
.topbar-btn:active {
transform: scale(0.95);
}
/* Settings Form Specifics */
.settings-grid-row {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
@media (min-width: 768px) {
.settings-grid-row {
grid-template-columns: repeat(12, 1fr);
}
.col-span-4 {
grid-column: span 4 / span 4;
}
.col-span-8 {
grid-column: span 8 / span 8;
}
}
.settings-card {
background-color: var(--surface-container-lowest);
border: 1px solid var(--outline-variant);
border-radius: 8px;
padding: 2rem;
box-shadow: 0 4px 20px rgba(107, 26, 44, 0.02);
}
.settings-tab-btn {
background: none;
border: none;
padding-bottom: 0.5rem;
font-weight: 600;
cursor: pointer;
border-bottom: 2px solid transparent;
color: var(--text-muted);
transition: color 0.2s;
}
.settings-tab-btn:hover {
color: var(--primary);
}
.settings-tab-btn.active {
color: var(--primary);
border-bottom-color: var(--primary);
}

8
start.sh Executable file
View file

@ -0,0 +1,8 @@
#!/bin/bash
# start.sh - Script to run the React application locally
# Navigate to the directory containing this script
cd "$(dirname "$0")" || exit
echo "Starting React development server..."
npm run dev