From 4b82ea14402cc3f4843324e40727147c821e6a3b Mon Sep 17 00:00:00 2001
From: vickytechkey <vichunice@gmail.com>
Date: Thu, 20 Aug 2026 21:43:40 +0530
Subject: [PATCH] fix: style active dashboard products catalog grid and cards
 with custom CSS

---
 src/App.tsx   |  16 +--
 src/index.css | 314 ++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 322 insertions(+), 8 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index b783ce1..0b270b4 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -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>
diff --git a/src/index.css b/src/index.css
index c5566f3..8a8e474 100644
--- a/src/index.css
+++ b/src/index.css
@@ -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;
+}