balls
This commit is contained in:
NotII
294
app/dashboard/stock/page.tsx
Normal file
294
app/dashboard/stock/page.tsx
Normal file
@@ -0,0 +1,294 @@
|
||||
"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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user