82 lines
3.2 KiB
TypeScript
82 lines
3.2 KiB
TypeScript
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
|
import { Edit, Trash } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Product } from "@/models/products";
|
|
|
|
interface ProductTableProps {
|
|
products: Product[];
|
|
loading: boolean;
|
|
onEdit: (product: Product) => void;
|
|
onDelete: (productId: string) => void; // Added onDelete prop
|
|
getCategoryNameById: (categoryId: string) => string;
|
|
}
|
|
|
|
const ProductTable = ({
|
|
products,
|
|
loading,
|
|
onEdit,
|
|
onDelete,
|
|
getCategoryNameById
|
|
}: ProductTableProps) => {
|
|
|
|
const sortedProducts = [...products].sort((a, b) => {
|
|
const categoryNameA = getCategoryNameById(a.category);
|
|
const categoryNameB = getCategoryNameById(b.category);
|
|
return categoryNameA.localeCompare(categoryNameB);
|
|
});
|
|
return (
|
|
<div className="rounded-lg border dark:border-zinc-700 shadow-sm overflow-hidden">
|
|
<Table className="relative">
|
|
<TableHeader className="bg-gray-50 dark:bg-zinc-800/50">
|
|
<TableRow className="hover:bg-transparent">
|
|
<TableHead className="w-[200px]">Product</TableHead>
|
|
<TableHead className="text-center">Category</TableHead>
|
|
<TableHead className="text-center">Unit</TableHead>
|
|
<TableHead className="text-right">Actions</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{loading ? (
|
|
Array.from({ length: 1 }).map((_, index) => (
|
|
<TableRow key={index}>
|
|
<TableCell>Loading...</TableCell>
|
|
<TableCell>Loading...</TableCell>
|
|
<TableCell>Loading...</TableCell>
|
|
<TableCell>Loading...</TableCell>
|
|
</TableRow>
|
|
))
|
|
) : sortedProducts.length > 0 ? (
|
|
sortedProducts.map((product) => (
|
|
<TableRow key={product._id} className="transition-colors hover:bg-gray-50 dark:hover:bg-zinc-800/70">
|
|
<TableCell className="font-medium">{product.name}</TableCell>
|
|
<TableCell className="text-center">
|
|
{getCategoryNameById(product.category)} {/* Display category name */}
|
|
</TableCell>
|
|
<TableCell className="text-center uppercase text-sm">{product.unitType}</TableCell>
|
|
<TableCell className="text-right">
|
|
<div className="flex justify-end space-x-2">
|
|
<Button size="sm" variant="ghost" onClick={() => onEdit(product)}>
|
|
<Edit className="h-4 w-4" />
|
|
</Button>
|
|
<Button size="sm" variant="ghost" className="text-red-600 hover:text-red-700 dark:text-red-400" onClick={() => onDelete(product._id ?? "")}>
|
|
<Trash className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
))
|
|
) : (
|
|
<TableRow>
|
|
<TableCell colSpan={4} className="h-24 text-center">
|
|
No products found.
|
|
</TableCell>
|
|
</TableRow>
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ProductTable;
|