Merge branch 'main' of https://github.com/NotII/ember-market-frontend

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
@@ -86,27 +92,22 @@ 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
+        stockTracking: product.stockTracking || false,
+        lowStockThreshold: product.lowStockThreshold
+      };
+
+      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 => {
@@ -141,43 +142,25 @@ 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,82 +183,54 @@ 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);
-        if (!product) return null;
       
-        const apiUrl = `${process.env.NEXT_PUBLIC_API_URL}/products/${productId}`;
+      await Promise.all(productsToUpdate.map(async (product) => {
+        if (!product._id) return;
 
-        const stockData = {
+        const stockData: StockData = {
-          stockTracking: isEnabling,
+          stockTracking: bulkAction === 'enable',
           currentStock: product.currentStock || 0,
           lowStockThreshold: product.lowStockThreshold || 10,
         };
 
-        // Update product with new tracking status
+        await clientFetch(`api/stock/${product._id}`, {
-        await saveProductData(
+          method: 'PUT',
-          apiUrl,
+          headers: {
-          stockData,
+            'Content-Type': 'application/json'
-          authToken,
+          },
-          "PUT"
+          body: JSON.stringify(stockData)
-        );
-        
-        // Also update stock API to ensure consistency
-        await updateProductStock(
-          productId,
-          stockData,
-          authToken
-        );
-
-        return productId;
         });
-
+      }));
-      await Promise.all(updatePromises);
 
       // 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) => {
@@ -287,139 +242,84 @@ export default function StockManagementPage() {
   };
 
   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">
-            <Button onClick={() => router.push("/dashboard/products")}>
-              <Package className="mr-2 h-4 w-4" />
-              Manage Products
-            </Button>
-          </div>
-        </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">
           <div className="flex items-center gap-3">
-              <h2 className="text-xl font-semibold">Inventory List</h2>
+            <Input
+              type="search"
+              placeholder="Search products..."
+              className="w-64"
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+            />
             {selectedProducts.length > 0 && (
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
-                    <Button variant="outline" size="sm" className="ml-2">
+                  <Button variant="outline" className="gap-2">
-                      Bulk Actions <ChevronDown className="ml-2 h-4 w-4" />
+                    <Package className="h-4 w-4" />
+                    Bulk Actions
+                    <ChevronDown className="h-4 w-4" />
                   </Button>
                 </DropdownMenuTrigger>
-                  <DropdownMenuContent>
+                <DropdownMenuContent align="end">
                   <DropdownMenuItem onClick={() => handleBulkAction('enable')}>
-                      <CheckSquare className="mr-2 h-4 w-4" />
+                    <CheckSquare className="h-4 w-4 mr-2" />
-                      Enable Tracking
+                    Enable Stock Tracking
                   </DropdownMenuItem>
                   <DropdownMenuItem onClick={() => handleBulkAction('disable')}>
-                      <XSquare className="mr-2 h-4 w-4" />
+                    <XSquare className="h-4 w-4 mr-2" />
-                      Disable Tracking
+                    Disable Stock 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">
+        <div className="rounded-md border">
           <Table>
             <TableHeader>
               <TableRow>
-                  <TableHead className="w-[30px]">
+                <TableHead className="w-12">
                   <input
                     type="checkbox"
-                      className="h-4 w-4 rounded border-gray-300"
+                    checked={selectedProducts.length === products.length}
-                      checked={selectedProducts.length > 0 && selectedProducts.length === filteredProducts.length}
                     onChange={toggleSelectAll}
+                    className="rounded border-gray-300"
                   />
                 </TableHead>
                 <TableHead>Product</TableHead>
-                  <TableHead>Unit</TableHead>
+                <TableHead>Stock Status</TableHead>
-                  <TableHead>Status</TableHead>
                 <TableHead>Current Stock</TableHead>
-                  <TableHead>Low Stock Threshold</TableHead>
                 <TableHead>Track Stock</TableHead>
                 <TableHead className="text-right">Actions</TableHead>
               </TableRow>
@@ -427,86 +327,64 @@ export default function StockManagementPage() {
             <TableBody>
               {loading ? (
                 <TableRow>
-                    <TableCell colSpan={8} className="h-24 text-center">
+                  <TableCell colSpan={6} className="text-center py-8">
-                      Loading...
+                    <RefreshCw className="h-6 w-6 animate-spin inline-block" />
+                    <span className="ml-2">Loading products...</span>
                   </TableCell>
                 </TableRow>
-                ) : filteredProducts.length > 0 ? (
+              ) : filteredProducts.length === 0 ? (
+                <TableRow>
+                  <TableCell colSpan={6} className="text-center py-8">
+                    No products found
+                  </TableCell>
+                </TableRow>
+              ) : (
                 filteredProducts.map((product) => (
                   <TableRow key={product._id}>
                     <TableCell>
                       <input
                         type="checkbox"
-                          className="h-4 w-4 rounded border-gray-300"
+                        checked={selectedProducts.includes(product._id || '')}
-                          checked={selectedProducts.includes(product._id as string)}
+                        onChange={() => toggleSelectProduct(product._id || '')}
-                          onChange={() => toggleSelectProduct(product._id as string)}
+                        className="rounded border-gray-300"
                       />
                     </TableCell>
-                      <TableCell className="font-medium">{product.name}</TableCell>
+                    <TableCell>{product.name}</TableCell>
-                      <TableCell>{product.unitType}</TableCell>
+                    <TableCell>{getStockStatus(product)}</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] ? (
+                      {editingStock[product._id || ''] ? (
+                        <div className="flex items-center gap-2">
                           <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>
+                        </div>
                       ) : (
-                          product.stockTracking ? 
+                        <span>{product.currentStock || 0}</span>
-                            `${product.currentStock || 0} ${product.unitType}` : 
-                            "N/A"
                       )}
                     </TableCell>
-                      <TableCell>
-                        {product.stockTracking ? 
-                          `${product.lowStockThreshold || 0} ${product.unitType}` : 
-                          "N/A"}
-                      </TableCell>
                     <TableCell>
                       <Switch
-                          checked={product.stockTracking === true}
+                        checked={product.stockTracking || false}
                         onCheckedChange={() => handleToggleStockTracking(product)}
                       />
                     </TableCell>
                     <TableCell className="text-right">
-                        {product.stockTracking && (
+                      {!editingStock[product._id || ''] && (
-                          editingStock[product._id as string] ? (
-                            <Button 
-                              size="sm" 
-                              onClick={() => handleSaveStock(product)}
-                            >
-                              Save
-                            </Button>
-                          ) : (
                         <Button
                           variant="outline"
                           size="sm"
-                              onClick={() => handleEditStock(product._id as string)}
+                          onClick={() => handleEditStock(product._id || '')}
                         >
-                              Update Stock
+                          Edit Stock
                         </Button>
-                          )
                       )}
                     </TableCell>
                   </TableRow>
                 ))
-                ) : (
-                  <TableRow>
-                    <TableCell colSpan={8} className="h-24 text-center">
-                      No products found.
-                    </TableCell>
-                  </TableRow>
               )}
             </TableBody>
           </Table>
@@ -516,24 +394,17 @@ export default function StockManagementPage() {
       <AlertDialog open={isConfirmDialogOpen} onOpenChange={setIsConfirmDialogOpen}>
         <AlertDialogContent>
           <AlertDialogHeader>
-              <AlertDialogTitle>
+            <AlertDialogTitle>Confirm Bulk Action</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?
+              Are you sure you want to {bulkAction} 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>
+            <AlertDialogCancel onClick={() => setBulkAction(null)}>Cancel</AlertDialogCancel>
-              <AlertDialogAction onClick={executeBulkAction}>
+            <AlertDialogAction onClick={executeBulkAction}>Continue</AlertDialogAction>
-                Confirm
-              </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
-      </div>
     </Layout>
   );
 }