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

fix: style active dashboard products catalog grid and cards with custom CSS

Browse source
This commit is contained in:
vickytechkey 2026-08-20 21:43:40 +05:30
parent aecaa89913
commit 4b82ea1440
2 changed files with 322 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/App.tsx
View file

@ -2172,13 +2172,13 @@ export default function App() {
<div className="animate-fadeIn">
{productWizardStep === 0 ? (
<div className="space-y-6">
<div className="flex justify-between items-center">
<div className="products-header">
<div>
<h2 className="font-caslon text-3xl font-bold text-primary">Products</h2>
<p className="text-secondary text-sm">Manage your listings, catalog collections, and stock values.</p>
</div>
<button
className="bg-primary text-white px-6 py-2.5 rounded text-sm font-semibold hover:bg-primary/95 transition-colors flex items-center gap-2"
className="button is-primary"
onClick={() => {
setProductFormDetails({
id: '',
@ -2207,7 +2207,7 @@ export default function App() {
</div>
{/* Filters */}
<div className="flex gap-4">
<div className="filters-row">
<select className="bg-white border border-[#D9C5B2] rounded px-4 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
<option>All Categories</option>
<option>Textiles & Apparel</option>
@ -2223,7 +2223,7 @@ export default function App() {
</div>
{/* Products Cards Grid */}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<div className="products-grid">
{products.map(p => {
const isOut = p.stock === 0;
const isLow = p.stock > 0 && p.stock <= 5;
@ -2622,7 +2622,7 @@ export default function App() {
<div className="animate-fadeIn">
{!selectedOrderDetail ? (
<div className="space-y-6">
<div className="flex justify-between items-center">
<div className="products-header">
<div>
<h2 className="font-caslon text-3xl font-bold text-primary">Orders Management</h2>
<p className="text-secondary text-sm font-medium">Review and process purchase tickets placed by global customers.</p>
@ -2701,7 +2701,7 @@ export default function App() {
<span className="material-symbols-outlined text-sm">arrow_back</span> Back to Orders queue
</button>
<div className="flex justify-between items-center">
<div className="products-header">
<div>
<h2 className="font-caslon text-3xl font-bold text-primary">Order #{selectedOrderDetail.id}</h2>
<p className="text-xs text-secondary">Registered on {selectedOrderDetail.date} at 10:45 AM</p>
@ -2920,7 +2920,7 @@ export default function App() {
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{/* Simulated bar chart */}
<div className="lg:col-span-2 bg-white border border-[#D9C5B2] rounded-xl p-6 shadow-diffused space-y-4">
<div className="flex justify-between items-center">
<div className="products-header">
<h4 className="font-semibold text-primary">Sales Over Time</h4>
<select className="border border-[#D9C5B2] rounded px-2 py-1 text-xs bg-white focus:outline-none">
<option>Last 7 Days</option>
@ -3058,7 +3058,7 @@ export default function App() {
<footer className="border-t border-[#D9C5B2] bg-white py-6 text-center text-xs text-secondary mt-auto">
<div className="max-w-7xl mx-auto px-8 flex justify-between items-center">
<span>© {new Date().getFullYear()} {CONFIG.companyName}. All rights reserved.</span>
<div className="flex gap-4">
<div className="filters-row">
<a href="#about" className="hover:underline">About</a>
<a href="#terms" className="hover:underline">Terms</a>
<a href="#privacy" className="hover:underline">Privacy</a>

314
src/index.css
View file

@ -1620,3 +1620,317 @@ aside.menu {
justify-content: center;
padding: 0.25rem;
}
/* Products Tab Styling */
.products-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
}
.filters-row {
display: flex;
gap: 1rem;
margin-bottom: 2rem;
}
.filters-row select {
background-color: #ffffff;
border: 1px solid var(--border);
border-radius: 4px;
padding: 0.5rem 1rem;
font-size: 0.875rem;
outline: none;
}
.products-grid {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
width: 100%;
}
.product-card {
width: calc(33.333% - 1rem);
background-color: #ffffff;
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.01);
box-sizing: border-box;
}
@media (max-width: 1024px) {
.product-card {
width: calc(50% - 0.75rem);
}
}
@media (max-width: 600px) {
.product-card {
width: 100%;
}
}
.product-image-container {
position: relative;
aspect-ratio: 16/9;
background-color: var(--surface-container-low);
overflow: hidden;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.product-image-container img {
width: 100%;
height: 100%;
object-fit: cover;
}
.stock-badge {
position: absolute;
top: 0.75rem;
right: 0.75rem;
padding: 0.25rem 0.5rem;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 600;
border: 1px solid transparent;
}
.stock-badge.in-stock {
background-color: #e6f4ea;
color: #137333;
border-color: #ceead6;
}
.stock-badge.low-stock {
background-color: #fef7e0;
color: #b06000;
border-color: #feebc8;
}
.stock-badge.out-of-stock {
background-color: #fce8e6;
color: #c5221f;
border-color: #fad2cf;
}
.product-card-body {
padding: 1.25rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.product-category-badges {
display: flex;
gap: 0.5rem;
align-items: center;
}
.category-tag {
font-size: 0.625rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
background-color: var(--surface-container);
color: var(--text-muted);
padding: 0.25rem 0.5rem;
border-radius: 4px;
}
.gi-tag {
font-size: 0.625rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
background-color: rgba(107, 26, 44, 0.1);
color: var(--primary-container);
padding: 0.25rem 0.5rem;
border-radius: 4px;
}
.product-card-footer {
padding: 1rem 1.25rem;
border-top: 1px solid rgba(0, 0, 0, 0.05);
display: flex;
gap: 0.75rem;
}
.btn-edit {
flex-grow: 1;
border: 1px solid var(--border);
background-color: transparent;
padding: 0.5rem;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
color: var(--text-dark);
transition: background-color 0.2s;
}
.btn-edit:hover {
background-color: var(--surface-container-low);
}
.btn-delete {
border: 1px solid #fad2cf;
background-color: transparent;
color: #c5221f;
padding: 0.5rem;
border-radius: 4px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.2s;
}
.btn-delete:hover {
background-color: #fce8e6;
}
/* Products Tab Styling */
.products-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
}
.filters-row {
display: flex;
gap: 1rem;
margin-bottom: 2rem;
}
.filters-row select {
background-color: #ffffff;
border: 1px solid var(--border);
border-radius: 4px;
padding: 0.5rem 1rem;
font-size: 0.875rem;
outline: none;
}
.products-grid {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
width: 100%;
}
.product-card {
width: calc(33.333% - 1rem);
background-color: #ffffff;
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.01);
box-sizing: border-box;
}
@media (max-width: 1024px) {
.product-card {
width: calc(50% - 0.75rem);
}
}
@media (max-width: 600px) {
.product-card {
width: 100%;
}
}
.product-image-container {
position: relative;
aspect-ratio: 16/9;
background-color: var(--surface-container-low);
overflow: hidden;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.product-image-container img {
width: 100%;
height: 100%;
object-fit: cover;
}
.stock-badge {
position: absolute;
top: 0.75rem;
right: 0.75rem;
padding: 0.25rem 0.5rem;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 600;
border: 1px solid transparent;
}
.stock-badge.in-stock {
background-color: #e6f4ea;
color: #137333;
border-color: #ceead6;
}
.stock-badge.low-stock {
background-color: #fef7e0;
color: #b06000;
border-color: #feebc8;
}
.stock-badge.out-of-stock {
background-color: #fce8e6;
color: #c5221f;
border-color: #fad2cf;
}
.product-card-body {
padding: 1.25rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.product-category-badges {
display: flex;
gap: 0.5rem;
align-items: center;
}
.category-tag {
font-size: 0.625rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
background-color: var(--surface-container);
color: var(--text-muted);
padding: 0.25rem 0.5rem;
border-radius: 4px;
}
.gi-tag {
font-size: 0.625rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
background-color: rgba(107, 26, 44, 0.1);
color: var(--primary-container);
padding: 0.25rem 0.5rem;
border-radius: 4px;
}
.product-card-footer {
padding: 1rem 1.25rem;
border-top: 1px solid rgba(0, 0, 0, 0.05);
display: flex;
gap: 0.75rem;
}
.btn-edit {
flex-grow: 1;
border: 1px solid var(--border);
background-color: transparent;
padding: 0.5rem;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
color: var(--text-dark);
transition: background-color 0.2s;
}
.btn-edit:hover {
background-color: var(--surface-container-low);
}
.btn-delete {
border: 1px solid #fad2cf;
background-color: transparent;
color: #c5221f;
padding: 0.5rem;
border-radius: 4px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.2s;
}
.btn-delete:hover {
background-color: #fce8e6;
}