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

refactor: extract InventoryTable component

Browse Source
This commit is contained in:
Daniel Bedeleanu
2026-04-19 14:55:53 +03:00
parent cf0a886b78
commit 1797a617ab
2 changed files with 151 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
frontend/app/inventory/page.tsx
View File

@@ -6,12 +6,11 @@ import { inventoryApi } from '@/lib/api';
import PageShell from '@/components/PageShell';
import Scanner from '@/components/Scanner';
import StatCard from '@/components/StatCard';
import InventoryTable from '@/components/InventoryTable';
import { useInventoryFilter } from '@/hooks/useInventoryFilter';
import { toast } from 'react-hot-toast';
import {
Package,
ChevronRight,
ChevronDown,
BarChart3,
Layers,
Plus,
@@ -303,85 +302,23 @@ export default function InventoryPage() {
</div>
</div>
{/* Categorized List (Accordion) */}
<section className="space-y-3">
{filteredCategories.map(cat => (
<div key={cat} className="bg-surface/50 border border-slate-800/50 rounded-3xl overflow-hidden transition-all duration-300">
<div
className="w-full p-4 md:p-5 flex items-center justify-between hover:bg-surface/60 transition-colors cursor-pointer"
onClick={() => setExpandedCategory(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>
<div className="text-left">
<h3 className="card-title text-base sm:text-lg">{cat}</h3>
<p className="card-subtitle tracking-tight">
{inventory.filter(i => i.category === cat).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" />}
<button
onClick={(e) => {
e.stopPropagation();
const categoryObj = categoriesList.find(c => c.name === cat);
if (categoryObj) {
setEditingCategory(categoryObj);
setCatEditedName(categoryObj.name);
setCatEditedDesc(categoryObj.description || '');
}
}}
className="p-2 hover:bg-slate-800 rounded-full text-muted hover:text-primary transition-colors relative z-10"
>
<Edit2 size={16} />
</button>
</div>
</div>
{expandedCategory === cat && (
<div className="p-4 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" />
{getFilteredItems(cat).map(item => (
<div
key={item.id}
onClick={() => setSelectedItem(item)}
className="bg-background/40 border border-slate-800/50 p-4 rounded-2xl flex items-center justify-between hover:border-primary/40 cursor-pointer transition-all active:scale-[0.98]"
>
<div className="flex items-center gap-3 flex-1 min-w-0 pr-4">
<div className="w-8 h-8 rounded-xl bg-green-500/10 flex items-center justify-center text-green-500 shrink-0">
<Package size={14} />
</div>
<div className="truncate">
<h4 className="card-title truncate">{item.name}</h4>
<p className="card-subtitle mt-0 lowercase opacity-80 truncate">{item.specs}</p>
</div>
</div>
<div className="text-right shrink-0">
<span className={cn(
"text-lg font-black",
item.quantity <= item.min_quantity ? "text-amber-500" : "text-primary"
)}>
{item.quantity}
</span>
<p className="text-sm text-muted font-bold tracking-tight">Stock</p>
</div>
</div>
))}
</div>
)}
</div>
))}
{filteredCategories.length === 0 && (
<div className="py-20 text-center text-secondary">
<Package size={48} className="mx-auto mb-4 opacity-10" />
<p className="font-medium">No results found</p>
</div>
)}
</section>
{/* Inventory Table */}
<InventoryTable
items={inventory}
categories={filteredCategories}
expandedCategory={expandedCategory}
onExpandCategory={setExpandedCategory}
onItemClick={setSelectedItem}
onEditCategory={(cat) => {
const categoryObj = categoriesList.find(c => c.name === cat);
if (categoryObj) {
setEditingCategory(categoryObj);
setCatEditedName(categoryObj.name);
setCatEditedDesc(categoryObj.description || '');
}
}}
categoriesList={categoriesList}
/>
</div>
{/* Stock Adjustment / Edit Item Overlay */}