refactor: extract InventoryTable component
This commit is contained in:
@@ -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 */}
|
||||
|
||||
133
frontend/components/InventoryTable.tsx
Normal file
133
frontend/components/InventoryTable.tsx
Normal file
@@ -0,0 +1,133 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Item } from '@/lib/db';
|
||||
import { ChevronRight, ChevronDown, Layers, Package } from 'lucide-react';
|
||||
import { clsx, type ClassValue } from 'clsx';
|
||||
import { twMerge } from 'tailwind-merge';
|
||||
|
||||
function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
|
||||
interface InventoryTableProps {
|
||||
items: Item[];
|
||||
categories: string[];
|
||||
expandedCategory: string | null;
|
||||
onExpandCategory: (category: string | null) => void;
|
||||
onItemClick: (item: Item) => void;
|
||||
onEditCategory?: (category: string) => void;
|
||||
categoriesList?: any[];
|
||||
}
|
||||
|
||||
export default function InventoryTable({
|
||||
items,
|
||||
categories,
|
||||
expandedCategory,
|
||||
onExpandCategory,
|
||||
onItemClick,
|
||||
onEditCategory,
|
||||
categoriesList = []
|
||||
}: InventoryTableProps) {
|
||||
if (categories.length === 0) {
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="space-y-3">
|
||||
{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
|
||||
className="w-full p-4 md:p-5 flex items-center justify-between hover:bg-surface/60 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>
|
||||
<div className="text-left">
|
||||
<h3 className="card-title text-base sm:text-lg">{cat}</h3>
|
||||
<p className="card-subtitle tracking-tight">
|
||||
{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" />}
|
||||
{onEditCategory && (
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onEditCategory(cat);
|
||||
}}
|
||||
className="p-2 hover:bg-slate-800 rounded-full text-muted hover:text-primary transition-colors relative z-10"
|
||||
>
|
||||
<EditIcon 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" />
|
||||
{categoryItems.map(item => (
|
||||
<div
|
||||
key={item.id}
|
||||
onClick={() => onItemClick(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>
|
||||
);
|
||||
})}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
// EditIcon component (lucide-react equivalent)
|
||||
function EditIcon({ size = 24 }: { size?: number }) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user