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

feat(07.1-frontend-overhaul): refine StatCard and Data Tables

Browse Source 
- Applied #121212 background and #222222 border to StatCards and Tables.
- Tightened internal padding to 8px-12px.
- Enforced 0px border radius and removed shadows.
- Numeric values in StatCards now match label size.
- Caution Orange used for emphasis in StatCards.
- Removed zebra-striping and applied 1px horizontal dividers to Tables.
- Headers updated to Title Case Space Grotesk.
- Complies with AI_RULES.md (no bold, no uppercase).
This commit is contained in:
Daniel Bedeleanu
2026-04-25 12:43:38 +03:00
parent a287bfadca
commit 5393b237de
3 changed files with 120 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
frontend/components/InventoryTable.tsx
View File

@@ -53,57 +53,56 @@ export default function InventoryTable({
if (categories.length === 0) {
return (
<div className="py-2 lg:py-3 xl:py-40 text-center text-secondary">
<div className="py-2 lg:py-3 xl:py-40 text-center text-[#888888] font-sans">
<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>
);
}
return (
<section className="space-y-3">
<section className="space-y-4 font-sans">
{categories.map(cat => {
const categoryItems = items.filter(i => i.category === cat);
return (
<div key={cat} className="bg-surface/50 border border-slate-800/50 rounded-3xl overflow-hidden transition-all duration-300">
<div key={cat} className="bg-surface-container border border-border transition-all duration-300">
<div
className="w-full p-4 md:p-5 lg:p-6 xl:p-8 flex items-center justify-between hover:bg-surface/60 transition-colors cursor-pointer"
className="w-full p-2 md:p-3 flex items-center justify-between hover:bg-surface-bright transition-colors cursor-pointer"
onClick={() => onExpandCategory(expandedCategory === cat ? null : cat)}
>
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-2xl bg-primary/10 flex items-center justify-center text-primary transition-colors">
<Layers size={20} />
<div className="w-8 h-8 bg-primary/10 flex items-center justify-center text-primary border border-primary/20 transition-colors">
<Layers size={16} />
</div>
<div className="text-left">
<h3 className="card-title text-base sm:text-lg lg:text-xl xl:text-2xl lg:text-3xl xl:text-4xl">{cat}</h3>
<p className="card-subtitle tracking-tight">
{categoryItems.length} Item types in stock
<h3 className="text-sm md:text-base font-normal text-foreground">{cat}</h3>
<p className="text-[10px] text-secondary font-normal">
{categoryItems.length} Item Types In Stock
</p>
</div>
</div>
<div className="flex items-center gap-3">
{expandedCategory === cat ? <ChevronDown size={20} className="text-primary" /> : <ChevronRight size={20} className="text-secondary" />}
{expandedCategory === cat ? <ChevronDown size={18} className="text-primary" /> : <ChevronRight size={18} className="text-secondary" />}
{onEditCategory && (
<button
onClick={(e) => {
e.stopPropagation();
onEditCategory(cat);
}}
className="p-2 lg:p-3 xl:p-4 lg:p-5 xl:p-6 lg:p-8 xl:p-10 hover:bg-slate-800 rounded-full text-muted hover:text-primary transition-colors relative z-10"
className="p-1.5 hover:bg-surface-bright text-secondary hover:text-primary transition-colors border border-transparent hover:border-border"
>
<EditIcon size={16} />
<EditIcon size={14} />
</button>
)}
</div>
</div>
{expandedCategory === cat && (
<div className="p-4 lg:p-5 xl:p-6 lg:p-8 xl:p-10 pt-0 space-y-2 animate-in slide-in-from-top-4 duration-300">
<div className="h-px bg-slate-800/50 mb-4 mx-2" />
<div className="divide-y divide-border border-t border-border animate-in slide-in-from-top-2 duration-200">
{categoryItems.map(item => (
<div
key={item.id}
className="bg-background/40 border border-slate-800/50 p-4 rounded-2xl flex items-center justify-between hover:border-primary/40 transition-all active:scale-[0.98]"
className="bg-black/20 p-2 md:p-3 flex items-center justify-between hover:bg-surface-bright/50 transition-colors"
>
<div
onClick={() => handleItemClick(item)}
@@ -115,7 +114,7 @@ export default function InventoryTable({
e.stopPropagation();
setSelectedPhotoItem(item);
}}
className="w-12 h-12 rounded-xl shrink-0 border-2 border-slate-300 overflow-hidden cursor-pointer hover:border-primary transition-colors active:scale-95"
className="w-10 h-10 shrink-0 border border-border overflow-hidden cursor-pointer hover:border-primary transition-colors"
>
<img
src={buildPhotoUrl(backendUrl, item.photo_path || item.image_url || '')}
@@ -125,30 +124,25 @@ export default function InventoryTable({
/>
</div>
) : (
<div className="w-12 h-12 rounded-xl bg-green-500/10 flex items-center justify-center text-green-500 shrink-0">
<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">
<Package size={14} />
</div>
)}
<div className="truncate">
<h4 className="card-title truncate">{item.name}</h4>
{item.photo_path || item.image_url ? (
<p className="card-subtitle mt-0 lowercase opacity-80 text-xs">Tap photo for details</p>
) : (
<>
<p className="card-subtitle mt-0 lowercase opacity-80 truncate">{item.specs}</p>
<p className="card-subtitle mt-0 text-xs">No photo</p>
</>
)}
<h4 className="text-sm font-normal text-foreground truncate">{item.name}</h4>
<p className="text-[10px] text-secondary font-normal truncate">
{item.specs || (item.photo_path || item.image_url ? 'Tap Photo For Details' : 'No Specs')}
</p>
</div>
</div>
<div className="text-right shrink-0">
<span className={cn(
"text-lg font-normal",
item.quantity <= item.min_quantity ? "text-amber-500" : "text-primary"
"text-base font-normal tabular-nums",
item.quantity <= item.min_quantity ? "text-warning" : "text-primary"
)}>
{item.quantity}
</span>
<p className="text-sm text-muted font-normal tracking-tight">Stock</p>
<p className="text-[10px] text-secondary font-normal">Stock</p>
</div>
</div>
))}