294 lines
11 KiB
TypeScript
294 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import Layout from "@/components/layout/layout";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "@/components/ui/table";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Product } from "@/models/products";
|
|
import { Package, RefreshCw } from "lucide-react";
|
|
import { fetchProductData, updateProductStock } from "@/lib/productData";
|
|
import { toast } from "sonner";
|
|
|
|
export default function StockManagementPage() {
|
|
const router = useRouter();
|
|
const [products, setProducts] = useState<Product[]>([]);
|
|
const [loading, setLoading] = useState<boolean>(true);
|
|
const [editingStock, setEditingStock] = useState<Record<string, boolean>>({});
|
|
const [stockValues, setStockValues] = useState<Record<string, number>>({});
|
|
const [searchTerm, setSearchTerm] = useState<string>("");
|
|
|
|
useEffect(() => {
|
|
const authToken = document.cookie
|
|
.split("; ")
|
|
.find((row) => row.startsWith("Authorization="))
|
|
?.split("=")[1];
|
|
|
|
if (!authToken) {
|
|
router.push("/login");
|
|
return;
|
|
}
|
|
|
|
const fetchDataAsync = async () => {
|
|
try {
|
|
const fetchedProducts = await fetchProductData("/api/products", authToken);
|
|
setProducts(fetchedProducts);
|
|
|
|
// Initialize stock values
|
|
const initialStockValues: Record<string, number> = {};
|
|
fetchedProducts.forEach((product: Product) => {
|
|
if (product._id) {
|
|
initialStockValues[product._id] = product.currentStock || 0;
|
|
}
|
|
});
|
|
setStockValues(initialStockValues);
|
|
|
|
setLoading(false);
|
|
} catch (error) {
|
|
console.error("Error fetching products:", error);
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchDataAsync();
|
|
}, [router]);
|
|
|
|
const handleEditStock = (productId: string) => {
|
|
setEditingStock({
|
|
...editingStock,
|
|
[productId]: true,
|
|
});
|
|
};
|
|
|
|
const handleSaveStock = async (product: Product) => {
|
|
if (!product._id) return;
|
|
|
|
const authToken = document.cookie
|
|
.split("; ")
|
|
.find((row) => row.startsWith("Authorization="))
|
|
?.split("=")[1];
|
|
|
|
if (!authToken) {
|
|
router.push("/login");
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const newStockValue = stockValues[product._id] || 0;
|
|
|
|
await updateProductStock(
|
|
product._id,
|
|
{
|
|
currentStock: newStockValue,
|
|
stockTracking: product.stockTracking
|
|
},
|
|
authToken
|
|
);
|
|
|
|
// Update local products state
|
|
setProducts(products.map(p => {
|
|
if (p._id === product._id) {
|
|
return {
|
|
...p,
|
|
currentStock: newStockValue
|
|
};
|
|
}
|
|
return p;
|
|
}));
|
|
|
|
setEditingStock({
|
|
...editingStock,
|
|
[product._id]: false,
|
|
});
|
|
|
|
toast.success("Stock updated successfully");
|
|
} catch (error) {
|
|
console.error("Error updating stock:", error);
|
|
toast.error("Failed to update stock");
|
|
}
|
|
};
|
|
|
|
const handleStockChange = (productId: string, value: number) => {
|
|
setStockValues({
|
|
...stockValues,
|
|
[productId]: value,
|
|
});
|
|
};
|
|
|
|
const getStockStatus = (product: Product) => {
|
|
if (!product.stockTracking) return "Not Tracked";
|
|
|
|
if (!product.currentStock || product.currentStock <= 0) {
|
|
return "Out of Stock";
|
|
} else if (product.lowStockThreshold && product.currentStock <= product.lowStockThreshold) {
|
|
return "Low Stock";
|
|
} else {
|
|
return "In Stock";
|
|
}
|
|
};
|
|
|
|
const filteredProducts = products.filter(product => {
|
|
const matchesSearch =
|
|
!searchTerm ||
|
|
product.name.toLowerCase().includes(searchTerm.toLowerCase());
|
|
|
|
return matchesSearch;
|
|
});
|
|
|
|
const statsData = {
|
|
total: products.length,
|
|
inStock: products.filter(p => p.stockTracking && p.currentStock && p.currentStock > 0 && (!p.lowStockThreshold || p.currentStock > p.lowStockThreshold)).length,
|
|
lowStock: products.filter(p => p.stockTracking && p.lowStockThreshold && p.currentStock && p.currentStock <= p.lowStockThreshold && p.currentStock > 0).length,
|
|
outOfStock: products.filter(p => p.stockTracking && (!p.currentStock || p.currentStock <= 0)).length,
|
|
notTracked: products.filter(p => p.stockTracking === false).length
|
|
};
|
|
|
|
return (
|
|
<Layout>
|
|
<div className="container mx-auto">
|
|
<div className="flex justify-between items-center mb-8">
|
|
<h1 className="text-2xl font-bold">Stock Management</h1>
|
|
<Button onClick={() => router.push("/dashboard/products")}>
|
|
<Package className="mr-2 h-4 w-4" />
|
|
Manage Products
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-5 gap-4 mb-8">
|
|
<div className="bg-background rounded-lg border border-border p-4">
|
|
<div className="text-3xl font-bold">{statsData.total}</div>
|
|
<div className="text-sm text-muted-foreground">Total Products</div>
|
|
</div>
|
|
|
|
<div className="bg-background rounded-lg border border-border p-4">
|
|
<div className="text-3xl font-bold text-green-500">{statsData.inStock}</div>
|
|
<div className="text-sm text-muted-foreground">In Stock</div>
|
|
</div>
|
|
|
|
<div className="bg-background rounded-lg border border-border p-4">
|
|
<div className="text-3xl font-bold text-amber-500">{statsData.lowStock}</div>
|
|
<div className="text-sm text-muted-foreground">Low Stock</div>
|
|
</div>
|
|
|
|
<div className="bg-background rounded-lg border border-border p-4">
|
|
<div className="text-3xl font-bold text-red-500">{statsData.outOfStock}</div>
|
|
<div className="text-sm text-muted-foreground">Out of Stock</div>
|
|
</div>
|
|
|
|
<div className="bg-background rounded-lg border border-border p-4">
|
|
<div className="text-3xl font-bold text-gray-500">{statsData.notTracked}</div>
|
|
<div className="text-sm text-muted-foreground">Not Tracked</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-background rounded-lg border border-border">
|
|
<div className="p-4 border-b border-border flex justify-between items-center">
|
|
<h2 className="text-xl font-semibold">Inventory List</h2>
|
|
<div className="flex items-center gap-2">
|
|
<Input
|
|
placeholder="Search products..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
className="w-64"
|
|
/>
|
|
<Button
|
|
variant="outline"
|
|
size="icon"
|
|
onClick={() => setSearchTerm("")}
|
|
>
|
|
<RefreshCw className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="overflow-x-auto">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Product</TableHead>
|
|
<TableHead>Unit</TableHead>
|
|
<TableHead>Status</TableHead>
|
|
<TableHead>Current Stock</TableHead>
|
|
<TableHead>Low Stock Threshold</TableHead>
|
|
<TableHead className="text-right">Actions</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{loading ? (
|
|
<TableRow>
|
|
<TableCell colSpan={6} className="h-24 text-center">
|
|
Loading...
|
|
</TableCell>
|
|
</TableRow>
|
|
) : filteredProducts.length > 0 ? (
|
|
filteredProducts.map((product) => (
|
|
<TableRow key={product._id}>
|
|
<TableCell className="font-medium">{product.name}</TableCell>
|
|
<TableCell>{product.unitType}</TableCell>
|
|
<TableCell className={
|
|
product.stockTracking === false ? "text-gray-500" :
|
|
!product.currentStock || product.currentStock <= 0 ? "text-red-500" :
|
|
product.lowStockThreshold && product.currentStock <= product.lowStockThreshold ? "text-amber-500" :
|
|
"text-green-500"
|
|
}>
|
|
{getStockStatus(product)}
|
|
</TableCell>
|
|
<TableCell>
|
|
{editingStock[product._id as string] ? (
|
|
<Input
|
|
type="number"
|
|
min="0"
|
|
step={product.unitType === "gr" ? "0.1" : "1"}
|
|
value={stockValues[product._id as string]}
|
|
onChange={(e) => handleStockChange(product._id as string, parseFloat(e.target.value))}
|
|
className="max-w-[100px]"
|
|
/>
|
|
) : (
|
|
product.stockTracking ?
|
|
`${product.currentStock || 0} ${product.unitType}` :
|
|
"N/A"
|
|
)}
|
|
</TableCell>
|
|
<TableCell>
|
|
{product.stockTracking ?
|
|
`${product.lowStockThreshold || 0} ${product.unitType}` :
|
|
"N/A"}
|
|
</TableCell>
|
|
<TableCell className="text-right">
|
|
{product.stockTracking && (
|
|
editingStock[product._id as string] ? (
|
|
<Button
|
|
size="sm"
|
|
onClick={() => handleSaveStock(product)}
|
|
>
|
|
Save
|
|
</Button>
|
|
) : (
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => handleEditStock(product._id as string)}
|
|
>
|
|
Update Stock
|
|
</Button>
|
|
)
|
|
)}
|
|
</TableCell>
|
|
</TableRow>
|
|
))
|
|
) : (
|
|
<TableRow>
|
|
<TableCell colSpan={6} className="h-24 text-center">
|
|
No products found.
|
|
</TableCell>
|
|
</TableRow>
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Layout>
|
|
);
|
|
}
|