unzip frontend
This commit is contained in:
@@ -0,0 +1,171 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog"
|
||||
import { Search, MoreHorizontal, Edit, Trash2, AlertTriangle } from "lucide-react"
|
||||
import type { Product } from "@/types/business"
|
||||
|
||||
interface ProductsTableProps {
|
||||
products: Product[]
|
||||
onEdit: (product: Product) => void
|
||||
onDelete: (productId: string) => void
|
||||
}
|
||||
|
||||
export function ProductsTable({ products, onEdit, onDelete }: ProductsTableProps) {
|
||||
const [searchTerm, setSearchTerm] = useState("")
|
||||
const [deleteProduct, setDeleteProduct] = useState<Product | null>(null)
|
||||
|
||||
const filteredProducts = products.filter(
|
||||
(product) =>
|
||||
product.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
product.category.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
product.sku.toLowerCase().includes(searchTerm.toLowerCase()),
|
||||
)
|
||||
|
||||
const getStockStatus = (stock: number, minStock: number) => {
|
||||
if (stock === 0) return { label: "Out of Stock", variant: "destructive" as const }
|
||||
if (stock <= minStock) return { label: "Low Stock", variant: "secondary" as const }
|
||||
return { label: "In Stock", variant: "default" as const }
|
||||
}
|
||||
|
||||
const handleDelete = (product: Product) => {
|
||||
onDelete(product.id)
|
||||
setDeleteProduct(null)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Search */}
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
|
||||
<Input
|
||||
placeholder="Search products by name, category, or SKU..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="pl-10"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Products Table */}
|
||||
<div className="border rounded-lg overflow-hidden">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Product</TableHead>
|
||||
<TableHead>Category</TableHead>
|
||||
<TableHead>SKU</TableHead>
|
||||
<TableHead>Buy Price</TableHead>
|
||||
<TableHead>Sell Price</TableHead>
|
||||
<TableHead>Stock</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead className="w-[50px]"></TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{filteredProducts.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={8} className="text-center py-8 text-muted-foreground">
|
||||
{searchTerm ? "No products found matching your search." : "No products added yet."}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
filteredProducts.map((product) => {
|
||||
const stockStatus = getStockStatus(product.stock, product.minStock)
|
||||
const profitMargin = (((product.sellPrice - product.buyPrice) / product.sellPrice) * 100).toFixed(1)
|
||||
|
||||
return (
|
||||
<TableRow key={product.id}>
|
||||
<TableCell>
|
||||
<div>
|
||||
<p className="font-medium">{product.name}</p>
|
||||
{product.description && (
|
||||
<p className="text-sm text-muted-foreground truncate max-w-[200px]">{product.description}</p>
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>{product.category}</TableCell>
|
||||
<TableCell>
|
||||
<code className="text-xs bg-muted px-2 py-1 rounded">{product.sku || "N/A"}</code>
|
||||
</TableCell>
|
||||
<TableCell>${product.buyPrice.toFixed(2)}</TableCell>
|
||||
<TableCell>
|
||||
<div>
|
||||
<p>${product.sellPrice.toFixed(2)}</p>
|
||||
<p className="text-xs text-muted-foreground">{profitMargin}% margin</p>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-2">
|
||||
{product.stock <= product.minStock && product.stock > 0 && (
|
||||
<AlertTriangle className="h-4 w-4 text-yellow-500" />
|
||||
)}
|
||||
<span className={product.stock === 0 ? "text-red-600" : ""}>{product.stock}</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant={stockStatus.variant}>{stockStatus.label}</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="sm">
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={() => onEdit(product)}>
|
||||
<Edit className="h-4 w-4 mr-2" />
|
||||
Edit
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => setDeleteProduct(product)} className="text-red-600">
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
Delete
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)
|
||||
})
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{/* Delete Confirmation Dialog */}
|
||||
<AlertDialog open={!!deleteProduct} onOpenChange={() => setDeleteProduct(null)}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Delete Product</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
Are you sure you want to delete "{deleteProduct?.name}"? This action cannot be undone.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={() => deleteProduct && handleDelete(deleteProduct)}
|
||||
className="bg-red-600 hover:bg-red-700"
|
||||
>
|
||||
Delete
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user