bede/tfm_ainventory
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style(frontend): refactor InventoryTable for DESIGN.md compliance

Browse Source 
- Removed 'font-sans' and 'bg-green-500/10'
- Replaced hardcoded surface colors with black-based variants
- Consistent industrial accents for category and item icons
- Used 'text-rose-500' for low stock instead of 'text-warning'
This commit is contained in:
Daniel Bedeleanu
2026-04-25 13:04:07 +03:00
parent 1b789f6907
commit 1816fc2661
1 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/components/InventoryTable.tsx
View File

@@ -53,7 +53,7 @@ export default function InventoryTable({
if (categories.length === 0) { if (categories.length === 0) {
return ( return (
<div className="py-2 lg:py-3 xl:py-40 text-center text-[#888888] font-sans"> <div className="py-2 lg:py-3 xl:py-40 text-center text-[#888888]">
<Package size={48} className="mx-auto mb-4 opacity-10" /> <Package size={48} className="mx-auto mb-4 opacity-10" />
<p className="font-normal">No Results Found</p> <p className="font-normal">No Results Found</p>
</div> </div>
@@ -61,17 +61,17 @@ export default function InventoryTable({
} }
return ( return (
<section className="space-y-4 font-sans"> <section className="space-y-4">
{categories.map(cat => { {categories.map(cat => {
const categoryItems = items.filter(i => i.category === cat); const categoryItems = items.filter(i => i.category === cat);
return ( return (
<div key={cat} className="bg-surface-container border border-border transition-all duration-300"> <div key={cat} className="level-1 transition-all duration-300">
<div <div
className="w-full p-2 md:p-3 flex items-center justify-between hover:bg-surface-bright transition-colors cursor-pointer" className="w-full p-2 md:p-3 flex items-center justify-between hover:bg-black/40 transition-colors cursor-pointer"
onClick={() => onExpandCategory(expandedCategory === cat ? null : cat)} onClick={() => onExpandCategory(expandedCategory === cat ? null : cat)}
> >
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="w-8 h-8 bg-primary/10 flex items-center justify-center text-primary border border-primary/20 transition-colors"> <div className="w-8 h-8 bg-black flex items-center justify-center text-primary border border-primary/20 transition-colors">
<Layers size={16} /> <Layers size={16} />
</div> </div>
<div className="text-left"> <div className="text-left">
@@ -89,7 +89,7 @@ export default function InventoryTable({
e.stopPropagation(); e.stopPropagation();
onEditCategory(cat); onEditCategory(cat);
}} }}
className="p-1.5 hover:bg-surface-bright text-secondary hover:text-primary transition-colors border border-transparent hover:border-border" className="p-1.5 hover:bg-black text-secondary hover:text-primary transition-colors border border-transparent hover:border-border"
> >
<EditIcon size={14} /> <EditIcon size={14} />
</button> </button>
@@ -102,7 +102,7 @@ export default function InventoryTable({
{categoryItems.map(item => ( {categoryItems.map(item => (
<div <div
key={item.id} key={item.id}
className="bg-black/20 p-2 md:p-3 flex items-center justify-between hover:bg-surface-bright/50 transition-colors" className="bg-black/40 p-2 md:p-3 flex items-center justify-between hover:bg-black transition-colors"
> >
<div <div
onClick={() => handleItemClick(item)} onClick={() => handleItemClick(item)}
@@ -124,7 +124,7 @@ export default function InventoryTable({
/> />
</div> </div>
) : ( ) : (
<div className="w-10 h-10 bg-green-500/10 flex items-center justify-center text-green-500 shrink-0 border border-green-500/20"> <div className="w-10 h-10 bg-black flex items-center justify-center text-primary shrink-0 border border-primary/20">
<Package size={14} /> <Package size={14} />
</div> </div>
)} )}
@@ -138,7 +138,7 @@ export default function InventoryTable({
<div className="text-right shrink-0"> <div className="text-right shrink-0">
<span className={cn( <span className={cn(
"text-base font-normal tabular-nums", "text-base font-normal tabular-nums",
item.quantity <= item.min_quantity ? "text-warning" : "text-primary" item.quantity <= item.min_quantity ? "text-rose-500" : "text-primary"
)}> )}>
{item.quantity} {item.quantity}
</span> </span>