Improve clarity and appearance of sales history details

Update the styling of the 'categorie' column in the SalesHistory component to use a more visually distinct and informative badge, and adjust text sizes for better readability across product details in the sales history view.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: a388004f-01c5-42b1-b1d1-f18daf8bdd0c
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/0715008c-7244-40f4-befc-26c014852236/a388004f-01c5-42b1-b1d1-f18daf8bdd0c/pSitqax
This commit is contained in:
michaelschal committed 2025-08-06 11:24:12 +00:00
1 parent 01c005adea
commit a6b0719ebf
2 files changed
+59 -393

No files matched your search

+21 -17
View File
@@ -558,7 +558,7 @@ export default function SalesHistory({ canDelete = false }: SalesHistoryProps) {
{sale.products && sale.products.length > 0 ? (
<div className="space-y-1">
{sale.products.map((product, index) => (
<div key={index} className="text-xs">
<div key={index} className="text-sm leading-relaxed">
{product.typeArticle}
</div>
))}
@@ -567,26 +567,30 @@ export default function SalesHistory({ canDelete = false }: SalesHistoryProps) {
<span className="text-gray-400">-</span>
)}
</td>
<td>
{sale.products && sale.products.length > 0 ? (
<div className="space-y-1">
{sale.products.map((product, index) => (
<span key={index} className={`modern-badge block ${
product.categorie === 'F3' || product.categorie === 'F4' ? 'badge-destructive' : 'badge-secondary'
}`}>
{product.categorie}
</span>
))}
</div>
) : (
<span className="text-gray-400">-</span>
)}
</td>
<td className="text-center">
{sale.products && sale.products.length > 0 ? (
<div className="space-y-1">
{sale.products.map((product, index) => (
<div key={index} className="text-xs">
<div key={index} className="text-sm font-medium">
<span className={`inline-block px-2 py-1 rounded text-xs font-semibold ${
product.categorie === 'F3' || product.categorie === 'F4'
? 'bg-red-100 text-red-800'
: 'bg-blue-100 text-blue-800'
}`}>
{product.categorie}
</span>
</div>
))}
</div>
) : (
<span className="text-gray-400">-</span>
)}
</td>
<td className="text-center">
{sale.products && sale.products.length > 0 ? (
<div className="space-y-1">
{sale.products.map((product, index) => (
<div key={index} className="text-sm font-medium leading-relaxed">
{product.quantite}
</div>
))}