opening inventory testing

src/_nav.js

@@ -16,6 +16,7 @@ import {
   cilShare,
   cilSpeedometer,
   cilStar,
+  cilStorage,
 } from '@coreui/icons'
 import { CNavGroup, CNavItem, CNavTitle } from '@coreui/react'
 
@@ -44,12 +45,19 @@ const _nav = [
     to: '/orders-placed',
     icon: <CIcon icon={cilPaperPlane} customClassName="nav-icon" />,
   },
+  {
+    component: CNavItem,
+    name: 'Opening inventory',
+    to: '/stock',
+    icon: <CIcon icon={cilStorage} customClassName="nav-icon" />,
+  },
   {
     component: CNavItem,
     name: 'Announcements',
     to: '/announcements',
     icon: <CIcon icon={cilPaperPlane} customClassName="nav-icon" />,
   },
+
   // {
   //   component: CNavItem,
   //   name: 'Product manual',

src/routes.js

@@ -7,6 +7,7 @@ import ProductManual from './views/pages/productManual/productManual'
 import ViewProductManual from './views/pages/productManual/viewProductManual'
 import { Announcement } from '@mui/icons-material'
 import Announcements from './views/pages/announcements/announcements'
+import StockTable from './views/pages/stock/stockTable'
 
 const Dashboard = React.lazy(() => import('./views/dashboard/Dashboard'))
 const Shop = React.lazy(() => import('./views/shops/Shop'))
@@ -35,6 +36,7 @@ const routes = [
 
   { path: '/cart', name: 'Cart', element: Cart },
   { path: '/announcements', name: 'Announcements', element: Announcements },
+  { path: '/stock', name: 'Stock', element: StockTable },
 ]
 
 export default routes

src/views/pages/stock/stockTable.js

@@ -0,0 +1,149 @@
+import React, { useEffect, useState } from 'react'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Paper,
+  TextField,
+  Button,
+  Typography,
+  TablePagination,
+  Box,
+} from '@mui/material'
+import axios from 'axios'
+import { isAutheticated } from '../../../auth'
+import Axios from '../../../axios'
+import Swal from 'sweetalert2'
+
+function StockTable() {
+  const [stocks, setStocks] = useState([]) // Store stock data
+  const [loading, setLoading] = useState(true) // Loading state
+  const [rowsPerPage, setRowsPerPage] = useState(10)
+  const [page, setPage] = useState(0)
+  const token = isAutheticated()
+
+  // Fetch stock data from the backend
+  const fetchStocks = async () => {
+    try {
+      const response = await Axios.get('/api/rd/stock', {
+        headers: {
+          Authorization: `Bearer ${token}`,
+          'Content-Type': 'application/json',
+        },
+      })
+      setStocks(response.data.stocks || [])
+    } catch (error) {
+      console.error('Error fetching stocks:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  // Handle stock value change and persist across pagination
+  const handleStockChange = (productId, value) => {
+    setStocks((prevStocks) =>
+      prevStocks.map((stock) =>
+        stock.productid === productId
+          ? { ...stock, openingInventory: parseInt(value, 10) || 0 }
+          : stock,
+      ),
+    )
+  }
+  console.log(stocks, 'stocks')
+
+  // Submit updated stock values
+  const handleSubmit = async () => {
+    try {
+      const res = await Axios.put(
+        '/api/rd/stock-update',
+        { products: stocks },
+        {
+          headers: {
+            Authorization: `Bearer ${token}`,
+            'Content-Type': 'application/json',
+          },
+        },
+      )
+      console.log(res)
+
+      Swal.fire('success!', 'Stock updated successfully', 'success')
+    } catch (error) {
+      console.error('Error updating stock:', error)
+      Swal.fire('error!', 'Something went wrong', 'error')
+    }
+  }
+
+  // Pagination handlers
+  const handleChangePage = (event, newPage) => setPage(newPage)
+  const handleChangeRowsPerPage = (event) => {
+    setRowsPerPage(parseInt(event.target.value, 10))
+    setPage(0)
+  }
+
+  // Fetch stocks on component mount
+  useEffect(() => {
+    fetchStocks()
+  }, [])
+
+  return (
+    <Box p={3}>
+      <Typography variant="h5" mb={2}>
+        Product Stock Management
+      </Typography>
+      <TableContainer component={Paper}>
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableCell>Product Name</TableCell>
+              <TableCell>SKU</TableCell>
+              <TableCell>Opening Inventory</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {loading ? (
+              <TableRow>
+                <TableCell colSpan={3} align="center">
+                  <Typography>Loading...</Typography>
+                </TableCell>
+              </TableRow>
+            ) : (
+              stocks.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((stock) => (
+                <TableRow key={stock.productid}>
+                  <TableCell>{stock.name}</TableCell>
+                  <TableCell>{stock.SKU}</TableCell>
+                  <TableCell>
+                    <TextField
+                      type="number"
+                      value={stock.openingInventory}
+                      onChange={(e) => handleStockChange(stock.productid, e.target.value)}
+                      variant="outlined"
+                      size="small"
+                    />
+                  </TableCell>
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+        <TablePagination
+          component="div"
+          count={stocks.length}
+          page={page}
+          onPageChange={handleChangePage}
+          rowsPerPage={rowsPerPage}
+          onRowsPerPageChange={handleChangeRowsPerPage}
+        />
+      </TableContainer>
+      <Box mt={2} display="flex" justifyContent="flex-end">
+        <Button variant="contained" color="primary" onClick={handleSubmit}>
+          Update Stock
+        </Button>
+      </Box>
+    </Box>
+  )
+}
+
+export default StockTable