Update page.tsx

app/dashboard/stock/page.tsx

@@ -26,9 +26,15 @@ import {
 } from "@/components/ui/alert-dialog";
 import { Product } from "@/models/products";
 import { Package, RefreshCw, ChevronDown, CheckSquare, XSquare } from "lucide-react";
-import { fetchProductData, updateProductStock, saveProductData } from "@/lib/api";
+import { clientFetch } from "@/lib/api";
 import { toast } from "sonner";
 
+interface StockData {
+  currentStock: number;
+  stockTracking: boolean;
+  lowStockThreshold?: number;
+}
+
 export default function StockManagementPage() {
   const router = useRouter();
   const [products, setProducts] = useState<Product[]>([]);
@@ -53,8 +59,8 @@ export default function StockManagementPage() {
 
     const fetchDataAsync = async () => {
       try {
-        const apiUrl = `${process.env.NEXT_PUBLIC_API_URL}/products`;
+        const response = await clientFetch<Product[]>('api/products');
-        const fetchedProducts = await fetchProductData(apiUrl, authToken);
+        const fetchedProducts = response || [];
         setProducts(fetchedProducts);
         
         // Initialize stock values
@@ -85,28 +91,23 @@ export default function StockManagementPage() {
 
   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(
+      const stockData: StockData = {
-        product._id,
+        currentStock: newStockValue,
-        {
+        stockTracking: product.stockTracking || false,
-          currentStock: newStockValue,
+        lowStockThreshold: product.lowStockThreshold
-          stockTracking: product.stockTracking
+      };
+
+      await clientFetch(`api/stock/${product._id}`, {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json'
         },
-        authToken
+        body: JSON.stringify(stockData)
-      );
+      });
 
       // Update local products state
       setProducts(products.map(p => {
@@ -140,44 +141,26 @@ export default function StockManagementPage() {
 
   const handleToggleStockTracking = 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 apiUrl = `${process.env.NEXT_PUBLIC_API_URL}/products/${product._id}`;
-      
       // Toggle the stock tracking status
       const newTrackingStatus = !product.stockTracking;
       
       // For enabling tracking, we need to ensure there's a stock value
-      const stockData = {
+      const stockData: StockData = {
         stockTracking: newTrackingStatus,
         currentStock: product.currentStock || 0,
         lowStockThreshold: product.lowStockThreshold || 10,
       };
       
-      // Update product with new tracking status
+      // Update stock tracking status
-      await saveProductData(
+      await clientFetch(`api/stock/${product._id}`, {
-        apiUrl,
+        method: 'PUT',
-        stockData,
+        headers: {
-        authToken,
+          'Content-Type': 'application/json'
-        "PUT"
+        },
-      );
+        body: JSON.stringify(stockData)
-      
+      });
-      // Also update stock API to ensure consistency
-      await updateProductStock(
-        product._id,
-        stockData,
-        authToken
-      );
 
       // Update local state
       setProducts(products.map(p => {
@@ -200,340 +183,228 @@ export default function StockManagementPage() {
   };
 
   const handleBulkAction = async (action: 'enable' | 'disable') => {
-    if (selectedProducts.length === 0) {
-      toast.error("No products selected");
-      return;
-    }
-
     setBulkAction(action);
     setIsConfirmDialogOpen(true);
   };
 
   const executeBulkAction = async () => {
-    const authToken = document.cookie
+    if (!bulkAction) return;
-      .split("; ")
-      .find((row) => row.startsWith("Authorization="))
-      ?.split("=")[1];
-
-    if (!authToken || !bulkAction) {
-      setIsConfirmDialogOpen(false);
-      return;
-    }
-
-    setLoading(true);
 
     try {
-      const isEnabling = bulkAction === 'enable';
+      const productsToUpdate = products.filter(p => selectedProducts.includes(p._id || ''));
-      const updatePromises = selectedProducts.map(async (productId) => {
+      
-        const product = products.find(p => p._id === productId);
+      await Promise.all(productsToUpdate.map(async (product) => {
-        if (!product) return null;
+        if (!product._id) return;
 
-        const apiUrl = `${process.env.NEXT_PUBLIC_API_URL}/products/${productId}`;
+        const stockData: StockData = {
-        
+          stockTracking: bulkAction === 'enable',
-        const stockData = {
-          stockTracking: isEnabling,
           currentStock: product.currentStock || 0,
           lowStockThreshold: product.lowStockThreshold || 10,
         };
-        
-        // Update product with new tracking status
-        await saveProductData(
-          apiUrl,
-          stockData,
-          authToken,
-          "PUT"
-        );
-        
-        // Also update stock API to ensure consistency
-        await updateProductStock(
-          productId,
-          stockData,
-          authToken
-        );
 
-        return productId;
+        await clientFetch(`api/stock/${product._id}`, {
-      });
+          method: 'PUT',
-
+          headers: {
-      await Promise.all(updatePromises);
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify(stockData)
+        });
+      }));
 
       // Update local state
       setProducts(products.map(p => {
-        if (selectedProducts.includes(p._id as string)) {
+        if (selectedProducts.includes(p._id || '')) {
           return {
             ...p,
-            stockTracking: isEnabling,
+            stockTracking: bulkAction === 'enable',
           };
         }
         return p;
       }));
 
       setSelectedProducts([]);
-      toast.success(`Stock tracking ${isEnabling ? 'enabled' : 'disabled'} for ${selectedProducts.length} products`);
+      toast.success(`Stock tracking ${bulkAction}d for selected products`);
     } catch (error) {
       console.error(`Error ${bulkAction}ing stock tracking:`, error);
       toast.error(`Failed to ${bulkAction} stock tracking`);
-    } finally {
-      setLoading(false);
-      setIsConfirmDialogOpen(false);
     }
+
+    setIsConfirmDialogOpen(false);
+    setBulkAction(null);
   };
 
   const toggleSelectProduct = (productId: string) => {
     setSelectedProducts(prev => 
-      prev.includes(productId) 
+      prev.includes(productId)
-        ? prev.filter(id => id !== productId) 
+        ? prev.filter(id => id !== productId)
         : [...prev, productId]
     );
   };
 
   const toggleSelectAll = () => {
-    if (selectedProducts.length === filteredProducts.length) {
+    setSelectedProducts(prev => 
-      setSelectedProducts([]);
+      prev.length === products.length
-    } else {
+        ? []
-      setSelectedProducts(filteredProducts.map(p => p._id as string));
+        : products.map(p => p._id || '')
-    }
+    );
   };
 
   const getStockStatus = (product: Product) => {
-    if (!product.stockTracking) return "Not Tracked";
+    if (!product.stockTracking) return 'Not tracked';
-    
+    if (product.currentStock === undefined) return 'Unknown';
-    if (!product.currentStock || product.currentStock <= 0) {
+    if (product.currentStock <= 0) return 'Out of stock';
-      return "Out of Stock";
+    if (product.lowStockThreshold && product.currentStock <= product.lowStockThreshold) return 'Low stock';
-    } else if (product.lowStockThreshold && product.currentStock <= product.lowStockThreshold) {
+    return 'In stock';
-      return "Low Stock";
-    } else {
-      return "In Stock";
-    }
   };
 
   const filteredProducts = products.filter(product => {
-    const matchesSearch = 
+    if (!searchTerm) return true;
-      !searchTerm || 
-      product.name.toLowerCase().includes(searchTerm.toLowerCase());
     
-    return matchesSearch;
+    const searchLower = searchTerm.toLowerCase();
+    return (
+      product.name.toLowerCase().includes(searchLower) ||
+      product.description.toLowerCase().includes(searchLower) ||
+      getStockStatus(product).toLowerCase().includes(searchLower)
+    );
   });
 
-  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="space-y-4">
-        <div className="flex justify-between items-center mb-8">
+        <div className="flex items-center justify-between">
-          <h1 className="text-2xl font-bold">Stock Management</h1>
+          <h1 className="text-2xl font-semibold">Stock Management</h1>
-          <div className="flex space-x-3">
+          <div className="flex items-center gap-3">
-            <Button onClick={() => router.push("/dashboard/products")}>
+            <Input
-              <Package className="mr-2 h-4 w-4" />
+              type="search"
-              Manage Products
+              placeholder="Search products..."
-            </Button>
+              className="w-64"
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+            />
+            {selectedProducts.length > 0 && (
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="outline" className="gap-2">
+                    <Package className="h-4 w-4" />
+                    Bulk Actions
+                    <ChevronDown className="h-4 w-4" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  <DropdownMenuItem onClick={() => handleBulkAction('enable')}>
+                    <CheckSquare className="h-4 w-4 mr-2" />
+                    Enable Stock Tracking
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => handleBulkAction('disable')}>
+                    <XSquare className="h-4 w-4 mr-2" />
+                    Disable Stock Tracking
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            )}
           </div>
         </div>
 
-        <div className="grid grid-cols-5 gap-4 mb-8">
+        <div className="rounded-md border">
-          <div className="bg-background rounded-lg border border-border p-4">
+          <Table>
-            <div className="text-3xl font-bold">{statsData.total}</div>
+            <TableHeader>
-            <div className="text-sm text-muted-foreground">Total Products</div>
+              <TableRow>
-          </div>
+                <TableHead className="w-12">
-          
+                  <input
-          <div className="bg-background rounded-lg border border-border p-4">
+                    type="checkbox"
-            <div className="text-3xl font-bold text-green-500">{statsData.inStock}</div>
+                    checked={selectedProducts.length === products.length}
-            <div className="text-sm text-muted-foreground">In Stock</div>
+                    onChange={toggleSelectAll}
-          </div>
+                    className="rounded border-gray-300"
-          
+                  />
-          <div className="bg-background rounded-lg border border-border p-4">
+                </TableHead>
-            <div className="text-3xl font-bold text-amber-500">{statsData.lowStock}</div>
+                <TableHead>Product</TableHead>
-            <div className="text-sm text-muted-foreground">Low Stock</div>
+                <TableHead>Stock Status</TableHead>
-          </div>
+                <TableHead>Current Stock</TableHead>
-          
+                <TableHead>Track Stock</TableHead>
-          <div className="bg-background rounded-lg border border-border p-4">
+                <TableHead className="text-right">Actions</TableHead>
-            <div className="text-3xl font-bold text-red-500">{statsData.outOfStock}</div>
+              </TableRow>
-            <div className="text-sm text-muted-foreground">Out of Stock</div>
+            </TableHeader>
-          </div>
+            <TableBody>
-          
+              {loading ? (
-          <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">
-            <div className="flex items-center gap-3">
-              <h2 className="text-xl font-semibold">Inventory List</h2>
-              {selectedProducts.length > 0 && (
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button variant="outline" size="sm" className="ml-2">
-                      Bulk Actions <ChevronDown className="ml-2 h-4 w-4" />
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent>
-                    <DropdownMenuItem onClick={() => handleBulkAction('enable')}>
-                      <CheckSquare className="mr-2 h-4 w-4" />
-                      Enable Tracking
-                    </DropdownMenuItem>
-                    <DropdownMenuItem onClick={() => handleBulkAction('disable')}>
-                      <XSquare className="mr-2 h-4 w-4" />
-                      Disable Tracking
-                    </DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              )}
-            </div>
-            <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 className="w-[30px]">
+                  <TableCell colSpan={6} className="text-center py-8">
-                    <input 
+                    <RefreshCw className="h-6 w-6 animate-spin inline-block" />
-                      type="checkbox" 
+                    <span className="ml-2">Loading products...</span>
-                      className="h-4 w-4 rounded border-gray-300"
+                  </TableCell>
-                      checked={selectedProducts.length > 0 && selectedProducts.length === filteredProducts.length}
-                      onChange={toggleSelectAll}
-                    />
-                  </TableHead>
-                  <TableHead>Product</TableHead>
-                  <TableHead>Unit</TableHead>
-                  <TableHead>Status</TableHead>
-                  <TableHead>Current Stock</TableHead>
-                  <TableHead>Low Stock Threshold</TableHead>
-                  <TableHead>Track Stock</TableHead>
-                  <TableHead className="text-right">Actions</TableHead>
                 </TableRow>
-              </TableHeader>
+              ) : filteredProducts.length === 0 ? (
-              <TableBody>
+                <TableRow>
-                {loading ? (
+                  <TableCell colSpan={6} className="text-center py-8">
-                  <TableRow>
+                    No products found
-                    <TableCell colSpan={8} className="h-24 text-center">
+                  </TableCell>
-                      Loading...
+                </TableRow>
+              ) : (
+                filteredProducts.map((product) => (
+                  <TableRow key={product._id}>
+                    <TableCell>
+                      <input
+                        type="checkbox"
+                        checked={selectedProducts.includes(product._id || '')}
+                        onChange={() => toggleSelectProduct(product._id || '')}
+                        className="rounded border-gray-300"
+                      />
                     </TableCell>
-                  </TableRow>
+                    <TableCell>{product.name}</TableCell>
-                ) : filteredProducts.length > 0 ? (
+                    <TableCell>{getStockStatus(product)}</TableCell>
-                  filteredProducts.map((product) => (
+                    <TableCell>
-                    <TableRow key={product._id}>
+                      {editingStock[product._id || ''] ? (
-                      <TableCell>
+                        <div className="flex items-center gap-2">
-                        <input 
-                          type="checkbox"
-                          className="h-4 w-4 rounded border-gray-300"
-                          checked={selectedProducts.includes(product._id as string)}
-                          onChange={() => toggleSelectProduct(product._id as string)}
-                        />
-                      </TableCell>
-                      <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"
+                            value={stockValues[product._id || ''] || 0}
-                            step={product.unitType === "gr" ? "0.1" : "1"}
+                            onChange={(e) => handleStockChange(product._id || '', parseInt(e.target.value) || 0)}
-                            value={stockValues[product._id as string]}
+                            className="w-24"
-                            onChange={(e) => handleStockChange(product._id as string, parseFloat(e.target.value))}
-                            className="max-w-[100px]"
                           />
-                        ) : (
+                          <Button size="sm" onClick={() => handleSaveStock(product)}>Save</Button>
-                          product.stockTracking ? 
+                        </div>
-                            `${product.currentStock || 0} ${product.unitType}` : 
+                      ) : (
-                            "N/A"
+                        <span>{product.currentStock || 0}</span>
-                        )}
+                      )}
-                      </TableCell>
+                    </TableCell>
-                      <TableCell>
+                    <TableCell>
-                        {product.stockTracking ? 
+                      <Switch
-                          `${product.lowStockThreshold || 0} ${product.unitType}` : 
+                        checked={product.stockTracking || false}
-                          "N/A"}
+                        onCheckedChange={() => handleToggleStockTracking(product)}
-                      </TableCell>
+                      />
-                      <TableCell>
+                    </TableCell>
-                        <Switch
+                    <TableCell className="text-right">
-                          checked={product.stockTracking === true}
+                      {!editingStock[product._id || ''] && (
-                          onCheckedChange={() => handleToggleStockTracking(product)}
+                        <Button
-                        />
+                          variant="outline"
-                      </TableCell>
+                          size="sm"
-                      <TableCell className="text-right">
+                          onClick={() => handleEditStock(product._id || '')}
-                        {product.stockTracking && (
+                        >
-                          editingStock[product._id as string] ? (
+                          Edit Stock
-                            <Button 
+                        </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={8} className="h-24 text-center">
-                      No products found.
                     </TableCell>
                   </TableRow>
-                )}
+                ))
-              </TableBody>
+              )}
-            </Table>
+            </TableBody>
-          </div>
+          </Table>
         </div>
-
-        <AlertDialog open={isConfirmDialogOpen} onOpenChange={setIsConfirmDialogOpen}>
-          <AlertDialogContent>
-            <AlertDialogHeader>
-              <AlertDialogTitle>
-                {bulkAction === 'enable' ? 'Enable' : 'Disable'} Stock Tracking
-              </AlertDialogTitle>
-              <AlertDialogDescription>
-                Are you sure you want to {bulkAction === 'enable' ? 'enable' : 'disable'} stock tracking for {selectedProducts.length} selected products?
-                {bulkAction === 'disable' && ' This will remove any stock tracking for these products.'}
-                {bulkAction === 'enable' && ' This will enable stock tracking with initial values.'}
-              </AlertDialogDescription>
-            </AlertDialogHeader>
-            <AlertDialogFooter>
-              <AlertDialogCancel>Cancel</AlertDialogCancel>
-              <AlertDialogAction onClick={executeBulkAction}>
-                Confirm
-              </AlertDialogAction>
-            </AlertDialogFooter>
-          </AlertDialogContent>
-        </AlertDialog>
       </div>
+
+      <AlertDialog open={isConfirmDialogOpen} onOpenChange={setIsConfirmDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Confirm Bulk Action</AlertDialogTitle>
+            <AlertDialogDescription>
+              Are you sure you want to {bulkAction} stock tracking for {selectedProducts.length} selected products?
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel onClick={() => setBulkAction(null)}>Cancel</AlertDialogCancel>
+            <AlertDialogAction onClick={executeBulkAction}>Continue</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </Layout>
   );
 }