adding seller image upload
This commit is contained in:
parent
c4cf3a1d2e
commit
8111278057
7 changed files with 837 additions and 257 deletions
302
seller_settings/code.html
Normal file
302
seller_settings/code.html
Normal 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&family=Work+Sans:wght@400;500;600&display=swap" rel="stylesheet"/>
|
||||||
|
<!-- Material Symbols -->
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&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 & 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
BIN
seller_settings/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
|
|
@ -244,7 +244,7 @@ describe('Supplier Portal Onboarding & Active Dashboard Tests', () => {
|
||||||
expect(screen.getByText(/Orders Management/i)).toBeInTheDocument()
|
expect(screen.getByText(/Orders Management/i)).toBeInTheDocument()
|
||||||
|
|
||||||
// Check Sidebar Tab click: Payments
|
// Check Sidebar Tab click: Payments
|
||||||
const walletTabBtn = screen.getByText(/Payments/i)
|
const walletTabBtn = screen.getByText('Payments')
|
||||||
fireEvent.click(walletTabBtn)
|
fireEvent.click(walletTabBtn)
|
||||||
|
|
||||||
expect(screen.getByText(/Payments Overview/i)).toBeInTheDocument()
|
expect(screen.getByText(/Payments Overview/i)).toBeInTheDocument()
|
||||||
|
|
|
||||||
479
src/App.tsx
479
src/App.tsx
|
|
@ -1389,7 +1389,7 @@ export default function App() {
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
className="btn btn-primary"
|
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}
|
disabled={!gstin || !isGstinVerified}
|
||||||
>
|
>
|
||||||
Next Step →
|
Next Step →
|
||||||
|
|
@ -1475,7 +1475,7 @@ export default function App() {
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
className="btn btn-primary"
|
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}
|
disabled={!aadharFile || !panFile}
|
||||||
>
|
>
|
||||||
Next Step →
|
Next Step →
|
||||||
|
|
@ -1639,7 +1639,7 @@ export default function App() {
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
className="btn btn-primary"
|
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}
|
disabled={!phoneVerified || !emailVerified}
|
||||||
>
|
>
|
||||||
Next Step →
|
Next Step →
|
||||||
|
|
@ -1694,7 +1694,7 @@ export default function App() {
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
className="btn btn-primary"
|
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}
|
disabled={selectedCategories.length === 0}
|
||||||
>
|
>
|
||||||
Next Step →
|
Next Step →
|
||||||
|
|
@ -1872,7 +1872,7 @@ export default function App() {
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
className="btn btn-primary"
|
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}
|
disabled={!storeName || !storeSlug || !supportEmail || !supportPhone || !address.street || !address.city || !address.state || !address.pincode}
|
||||||
>
|
>
|
||||||
Submit Supplier Profile
|
Submit Supplier Profile
|
||||||
|
|
@ -1916,84 +1916,79 @@ export default function App() {
|
||||||
<div className="dashboard-container">
|
<div className="dashboard-container">
|
||||||
|
|
||||||
{/* Sidebar */}
|
{/* 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' }}>
|
<aside className="dashboard-sidebar">
|
||||||
<div>
|
<div className="sidebar-brand-area">
|
||||||
{/* Logo (Maroon bold serif) */}
|
<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>
|
||||||
<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>
|
|
||||||
|
|
||||||
{/* Profile Card */}
|
<div className="sidebar-profile-card">
|
||||||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', padding: '0.75rem 1rem', marginBottom: '1.5rem', backgroundColor: '#F9F6F2', borderRadius: '8px' }}>
|
|
||||||
<div style={{ width: '40px', height: '40px', borderRadius: '50%', backgroundColor: 'var(--primary)', color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 'bold', overflow: 'hidden' }}>
|
<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>}
|
{storeLogo ? <img src={storeLogo} style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> : <span style={{ fontSize: '1.2rem' }}>{CONFIG.logoLetter}</span>}
|
||||||
</div>
|
</div>
|
||||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||||
<span style={{ fontWeight: 'bold', fontSize: '0.9rem', color: '#4A4A4A' }}>{storeName || 'Tradhox Seller'}</span>
|
<span style={{ fontWeight: 'bold', fontSize: '0.9rem', color: 'var(--text-dark)' }}>{storeName || 'Tradhox Seller'}</span>
|
||||||
<span style={{ fontSize: '0.75rem', color: 'var(--text-muted)' }}>Artisan Partner</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>
|
</div>
|
||||||
|
|
||||||
<ul className="sidebar-menu" style={{ listStyle: 'none', padding: 0, margin: 0 }}>
|
|
||||||
<li style={{ marginBottom: '0.5rem' }}>
|
|
||||||
<button
|
|
||||||
className={`sidebar-item-btn ${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
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
<li style={{ marginBottom: '0.5rem' }}>
|
|
||||||
<button
|
|
||||||
className={`sidebar-item-btn ${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
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
<li style={{ marginBottom: '0.5rem' }}>
|
|
||||||
<button
|
|
||||||
className={`sidebar-item-btn ${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
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
<li style={{ marginBottom: '0.5rem' }}>
|
|
||||||
<button
|
|
||||||
className={`sidebar-item-btn ${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
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
<li style={{ marginBottom: '0.5rem' }}>
|
|
||||||
<button
|
|
||||||
className={`sidebar-item-btn ${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
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
<li style={{ marginBottom: '0.5rem' }}>
|
|
||||||
<button
|
|
||||||
className={`sidebar-item-btn ${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
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* View Store Button at bottom */}
|
<ul className="sidebar-menu-list">
|
||||||
<div style={{ padding: '0.5rem' }}>
|
<li>
|
||||||
|
<button
|
||||||
|
className={`sidebar-link ${dashTab === 'overview' ? 'active' : ''}`}
|
||||||
|
onClick={() => { setDashTab('overview'); setSelectedOrderDetail(null); }}
|
||||||
|
>
|
||||||
|
<span className="material-symbols-outlined text-[20px]">home</span>
|
||||||
|
<span className="font-button text-button">Home</span>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<button
|
||||||
|
className={`sidebar-link ${dashTab === 'orders' ? 'active' : ''}`}
|
||||||
|
onClick={() => { setDashTab('orders'); setSelectedOrderDetail(null); }}
|
||||||
|
>
|
||||||
|
<span className="material-symbols-outlined text-[20px]">shopping_cart</span>
|
||||||
|
<span className="font-button text-button">Orders</span>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<button
|
||||||
|
className={`sidebar-link ${dashTab === 'products' ? 'active' : ''}`}
|
||||||
|
onClick={() => { setDashTab('products'); setProductWizardStep(0); setSelectedOrderDetail(null); }}
|
||||||
|
>
|
||||||
|
<span className="material-symbols-outlined text-[20px]">inventory_2</span>
|
||||||
|
<span className="font-button text-button">Products</span>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<button
|
||||||
|
className={`sidebar-link ${dashTab === 'wallet' ? 'active' : ''}`}
|
||||||
|
onClick={() => { setDashTab('wallet'); setSelectedOrderDetail(null); }}
|
||||||
|
>
|
||||||
|
<span className="material-symbols-outlined text-[20px]">payments</span>
|
||||||
|
<span className="font-button text-button">Payments</span>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<button
|
||||||
|
className={`sidebar-link ${dashTab === 'analytics' ? 'active' : ''}`}
|
||||||
|
onClick={() => { setDashTab('analytics'); setSelectedOrderDetail(null); }}
|
||||||
|
>
|
||||||
|
<span className="material-symbols-outlined text-[20px]">leaderboard</span>
|
||||||
|
<span className="font-button text-button">Analytics</span>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<button
|
||||||
|
className={`sidebar-link ${dashTab === 'settings' ? 'active' : ''}`}
|
||||||
|
onClick={() => { setDashTab('settings'); setSelectedOrderDetail(null); }}
|
||||||
|
>
|
||||||
|
<span className="material-symbols-outlined text-[20px] icon-fill">settings</span>
|
||||||
|
<span className="font-button text-button">Settings</span>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div style={{ padding: '0 2rem' }}>
|
||||||
<button
|
<button
|
||||||
className="btn btn-outline-dark"
|
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' }}
|
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>
|
</div>
|
||||||
</aside>
|
</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 */}
|
{/* Main Dashboard Space */}
|
||||||
<section className="dashboard-main" style={{ flex: 1, padding: '2rem', backgroundColor: '#F9F6F2', overflowY: 'auto' }}>
|
<section className="dashboard-main">
|
||||||
|
|
||||||
{/* OVERVIEW PANEL / HOME TAB */}
|
{/* OVERVIEW PANEL / HOME TAB */}
|
||||||
{dashTab === 'overview' && !selectedOrderDetail && (
|
{dashTab === 'overview' && !selectedOrderDetail && (
|
||||||
|
|
@ -3167,8 +3180,20 @@ export default function App() {
|
||||||
|
|
||||||
{/* SETTINGS TAB */}
|
{/* SETTINGS TAB */}
|
||||||
{dashTab === 'settings' && (
|
{dashTab === 'settings' && (
|
||||||
<div className="form-card" style={{ margin: 0, maxWidth: '640px' }}>
|
<div className="max-w-container-max mx-auto" style={{ width: '100%' }}>
|
||||||
<h2 className="form-card-title" style={{ textAlign: 'left', marginBottom: '2rem' }}>Store Configurations</h2>
|
{/* 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 => {
|
<form onSubmit={e => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
@ -3176,177 +3201,147 @@ export default function App() {
|
||||||
.then(() => alert('Store configurations updated successfully!'))
|
.then(() => alert('Store configurations updated successfully!'))
|
||||||
.catch(err => alert(err.message));
|
.catch(err => alert(err.message));
|
||||||
}}>
|
}}>
|
||||||
<div className="form-group" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.75rem' }}>
|
{/* Tab Content: Store Profile */}
|
||||||
<div>
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
|
||||||
<label htmlFor="set-store">Store Display Name *</label>
|
{/* Section 1: Basic Information (Asymmetric Layout) */}
|
||||||
<input
|
<div className="settings-grid-row">
|
||||||
id="set-store"
|
{/* Left Column: Context */}
|
||||||
type="text"
|
<div className="col-span-4" style={{ display: 'flex', flexDirection: 'column' }}>
|
||||||
className="form-control"
|
<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>
|
||||||
value={storeName}
|
<p className="font-body-md text-body-md text-secondary" style={{ color: 'var(--text-muted)', fontSize: '0.95rem' }}>
|
||||||
onChange={e => setStoreName(e.target.value)}
|
This information will be displayed publicly on your artisan store page. Make sure your brand reflects the quality of your craft.
|
||||||
required
|
</p>
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label htmlFor="set-slug">Store Slug / Custom URL *</label>
|
|
||||||
<input
|
|
||||||
id="set-slug"
|
|
||||||
type="text"
|
|
||||||
className="form-control"
|
|
||||||
value={storeSlug}
|
|
||||||
onChange={e => setStoreSlug(e.target.value.toLowerCase().replace(/[^a-z0-9\-]/g, ''))}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</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>
|
|
||||||
)}
|
|
||||||
</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' }}>
|
{/* Right Column: Form Fields in a Glass/Clean Card */}
|
||||||
<div>
|
<div className="col-span-8 settings-card">
|
||||||
<label htmlFor="set-email">Support Email *</label>
|
{/* Logo Upload */}
|
||||||
<input
|
<div style={{ display: 'flex', alignItems: 'center', gap: '1.5rem', marginBottom: '1.5rem', paddingBottom: '1.5rem', borderBottom: '1px solid var(--border)' }}>
|
||||||
id="set-email"
|
<div style={{ position: 'relative', cursor: 'pointer' }} className="group">
|
||||||
type="email"
|
<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)' }}>
|
||||||
className="form-control"
|
{storeLogo ? <img src={storeLogo} style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> : <span style={{ fontSize: '1.8rem' }}>{CONFIG.logoLetter}</span>}
|
||||||
value={supportEmail}
|
</div>
|
||||||
onChange={e => setSupportEmail(e.target.value)}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label htmlFor="set-phone">Support Phone *</label>
|
|
||||||
<input
|
|
||||||
id="set-phone"
|
|
||||||
type="tel"
|
|
||||||
className="form-control"
|
|
||||||
value={supportPhone}
|
|
||||||
onChange={e => setSupportPhone(e.target.value)}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</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
|
<input
|
||||||
type="checkbox"
|
type="file"
|
||||||
checked={isSelected}
|
accept="image/*"
|
||||||
onChange={() => {
|
onChange={handleLogoChange}
|
||||||
if (isSelected) {
|
style={{ position: 'absolute', inset: 0, opacity: 0, cursor: 'pointer' }}
|
||||||
setSelectedCategories(selectedCategories.filter(c => c !== cat));
|
|
||||||
} else {
|
|
||||||
setSelectedCategories([...selectedCategories, cat]);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
{cat}
|
</div>
|
||||||
</label>
|
<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
|
||||||
|
className="form-control"
|
||||||
|
type="text"
|
||||||
|
value={storeName}
|
||||||
|
onChange={e => setStoreName(e.target.value)}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 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
|
||||||
|
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
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 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
|
||||||
|
className="form-control"
|
||||||
|
type="email"
|
||||||
|
value={supportEmail}
|
||||||
|
onChange={e => setSupportEmail(e.target.value)}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<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
|
||||||
|
className="form-control"
|
||||||
|
type="tel"
|
||||||
|
value={supportPhone}
|
||||||
|
onChange={e => setSupportPhone(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 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>
|
||||||
</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
|
|
||||||
</button>
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
|
|
@ -121,6 +121,69 @@ export const CONFIG = {
|
||||||
}
|
}
|
||||||
|
|
||||||
export function apiFetch(url: string, options: RequestInit = {}): Promise<Response> {
|
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 token = localStorage.getItem('access_token');
|
||||||
const headers = {
|
const headers = {
|
||||||
...options.headers,
|
...options.headers,
|
||||||
|
|
|
||||||
240
src/index.css
240
src/index.css
|
|
@ -2,16 +2,28 @@
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
/* Colors - Artisanal Heritage */
|
/* Colors - Artisanal Heritage */
|
||||||
--primary: #6B1A2C; /* Primary Maroon */
|
--primary: #4d0218; /* Primary Maroon */
|
||||||
--accent: #6B1A2C; /* Same Maroon for primary actions */
|
--primary-container: #6b1a2c;
|
||||||
--bg: #F9F6F2; /* Parchment Warm Off-white */
|
--accent: #4d0218;
|
||||||
--card-bg: #FFFFFF; /* Clean White */
|
--bg: #fbf9f8; /* Background */
|
||||||
--text-dark: #4A4A4A; /* Soft Charcoal body text */
|
--card-bg: #ffffff; /* Surface container lowest */
|
||||||
--text-muted: #887274; /* Outline/Border color or muted text */
|
--text-dark: #1b1c1c; /* On Surface / On Background */
|
||||||
--border: #D9C5B2; /* Tertiary border/divider */
|
--text-muted: #5f5e5b; /* Secondary */
|
||||||
--input-focus: #6B1A2C;
|
--border: #dac0c2; /* Outline Variant */
|
||||||
--success: #2A9D8F; /* Muted sage green */
|
--outline: #887274; /* Outline */
|
||||||
--error: #BA1A1A;
|
--input-focus: #4d0218;
|
||||||
|
--success: #2A9D8F; /* Muted sage green */
|
||||||
|
--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 */
|
/* Typography */
|
||||||
--font-family: 'Work Sans', system-ui, -apple-system, sans-serif;
|
--font-family: 'Work Sans', system-ui, -apple-system, sans-serif;
|
||||||
|
|
@ -132,14 +144,14 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-primary {
|
.btn-primary {
|
||||||
background-color: var(--accent);
|
background-color: var(--primary);
|
||||||
color: var(--primary);
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-primary:hover {
|
.btn-primary:hover {
|
||||||
background-color: #dfba5c;
|
background-color: rgba(77, 2, 24, 0.9);
|
||||||
transform: translateY(-2px);
|
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 {
|
.btn-secondary {
|
||||||
|
|
@ -1143,4 +1155,204 @@ body {
|
||||||
animation: tourDotPulse 1.5s infinite ease-in-out;
|
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
8
start.sh
Executable 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
|
||||||
Loading…
Reference in a new issue