├── Backend
    ├── .gitignore
    ├── controller
    │   ├── product.js
    │   ├── purchase.js
    │   ├── purchaseStock.js
    │   ├── sales.js
    │   ├── soldStock.js
    │   └── store.js
    ├── models
    │   ├── index.js
    │   ├── product.js
    │   ├── purchase.js
    │   ├── sales.js
    │   ├── store.js
    │   └── users.js
    ├── package-lock.json
    ├── package.json
    ├── router
    │   ├── product.js
    │   ├── purchase.js
    │   ├── sales.js
    │   └── store.js
    └── server.js
├── Frontend
    ├── .gitignore
    ├── README.md
    ├── README.md~
    ├── package-lock.json
    ├── package.json
    ├── public
    │   ├── favicon.ico
    │   ├── index.html
    │   ├── logo192.png
    │   ├── logo512.png
    │   ├── manifest.json
    │   └── robots.txt
    ├── src
    │   ├── App.css
    │   ├── App.js
    │   ├── App.test.js
    │   ├── AuthContext.js
    │   ├── ProtectedWrapper.js
    │   ├── assets
    │   │   ├── 20943629.eps
    │   │   ├── License free.txt
    │   │   ├── License premium.txt
    │   │   ├── Login.png
    │   │   ├── add-product.png
    │   │   ├── dashboard-icon.png
    │   │   ├── download.png
    │   │   ├── filter-icon.png
    │   │   ├── inventory-icon.png
    │   │   ├── location-icon.png
    │   │   ├── logo.png
    │   │   ├── mi-logo (2).jpg
    │   │   ├── mi-logo.png
    │   │   ├── order-icon.png
    │   │   ├── reports-icon.png
    │   │   ├── search-icon.png
    │   │   ├── signup-img.zip
    │   │   ├── signup.jpg
    │   │   ├── store-image.jpg
    │   │   └── supplier-icon.png
    │   ├── components
    │   │   ├── AddProduct.js
    │   │   ├── AddPurchaseDetails.js
    │   │   ├── AddSale.js
    │   │   ├── AddStore.js
    │   │   ├── Header.js
    │   │   ├── Layout.js
    │   │   ├── SideMenu.js
    │   │   ├── UpdateProduct.js
    │   │   └── UploadImage.js
    │   ├── index.css
    │   ├── index.js
    │   ├── logo.svg
    │   ├── pages
    │   │   ├── Dashboard.js
    │   │   ├── Inventory.js
    │   │   ├── Login.js
    │   │   ├── NoPageFound.js
    │   │   ├── PurchaseDetails.js
    │   │   ├── Register.js
    │   │   ├── Sales.js
    │   │   └── Store.js
    │   ├── reportWebVitals.js
    │   └── setupTests.js
    └── tailwind.config.js
└── README.md


/Backend/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*


--------------------------------------------------------------------------------
/Backend/controller/product.js:
--------------------------------------------------------------------------------
 1 | const Product = require("../models/Product");
 2 | const Purchase = require("../models/purchase");
 3 | const Sales = require("../models/sales");
 4 | 
 5 | // Add Post
 6 | const addProduct = (req, res) => {
 7 |   console.log("req: ", req.body.userId);
 8 |   const addProduct = new Product({
 9 |     userID: req.body.userId,
10 |     name: req.body.name,
11 |     manufacturer: req.body.manufacturer,
12 |     stock: 0,
13 |     description: req.body.description,
14 |   });
15 | 
16 |   addProduct
17 |     .save()
18 |     .then((result) => {
19 |       res.status(200).send(result);
20 |     })
21 |     .catch((err) => {
22 |       res.status(402).send(err);
23 |     });
24 | };
25 | 
26 | // Get All Products
27 | const getAllProducts = async (req, res) => {
28 |   const findAllProducts = await Product.find({
29 |     userID: req.params.userId,
30 |   }).sort({ _id: -1 }); // -1 for descending;
31 |   res.json(findAllProducts);
32 | };
33 | 
34 | // Delete Selected Product
35 | const deleteSelectedProduct = async (req, res) => {
36 |   const deleteProduct = await Product.deleteOne(
37 |     { _id: req.params.id }
38 |   );
39 |   const deletePurchaseProduct = await Purchase.deleteOne(
40 |     { ProductID: req.params.id }
41 |   );
42 | 
43 |   const deleteSaleProduct = await Sales.deleteOne(
44 |     { ProductID: req.params.id }
45 |   );
46 |   res.json({ deleteProduct, deletePurchaseProduct, deleteSaleProduct });
47 | };
48 | 
49 | // Update Selected Product
50 | const updateSelectedProduct = async (req, res) => {
51 |   try {
52 |     const updatedResult = await Product.findByIdAndUpdate(
53 |       { _id: req.body.productID },
54 |       {
55 |         name: req.body.name,
56 |         manufacturer: req.body.manufacturer,
57 |         description: req.body.description,
58 |       },
59 |       { new: true }
60 |     );
61 |     console.log(updatedResult);
62 |     res.json(updatedResult);
63 |   } catch (error) {
64 |     console.log(error);
65 |     res.status(402).send("Error");
66 |   }
67 | };
68 | 
69 | // Search Products
70 | const searchProduct = async (req, res) => {
71 |   const searchTerm = req.query.searchTerm;
72 |   const products = await Product.find({
73 |     name: { $regex: searchTerm, $options: "i" },
74 |   });
75 |   res.json(products);
76 | };
77 | 
78 | module.exports = {
79 |   addProduct,
80 |   getAllProducts,
81 |   deleteSelectedProduct,
82 |   updateSelectedProduct,
83 |   searchProduct,
84 | };
85 | 


--------------------------------------------------------------------------------
/Backend/controller/purchase.js:
--------------------------------------------------------------------------------
 1 | const Purchase = require("../models/purchase");
 2 | const purchaseStock = require("./purchaseStock");
 3 | 
 4 | // Add Purchase Details
 5 | const addPurchase = (req, res) => {
 6 |   const addPurchaseDetails = new Purchase({
 7 |     userID: req.body.userID,
 8 |     ProductID: req.body.productID,
 9 |     QuantityPurchased: req.body.quantityPurchased,
10 |     PurchaseDate: req.body.purchaseDate,
11 |     TotalPurchaseAmount: req.body.totalPurchaseAmount,
12 |   });
13 | 
14 |   addPurchaseDetails
15 |     .save()
16 |     .then((result) => {
17 |       purchaseStock(req.body.productID, req.body.quantityPurchased);
18 |       res.status(200).send(result);
19 |     })
20 |     .catch((err) => {
21 |       res.status(402).send(err);
22 |     });
23 | };
24 | 
25 | // Get All Purchase Data
26 | const getPurchaseData = async (req, res) => {
27 |   const findAllPurchaseData = await Purchase.find({"userID": req.params.userID})
28 |     .sort({ _id: -1 })
29 |     .populate("ProductID"); // -1 for descending order
30 |   res.json(findAllPurchaseData);
31 | };
32 | 
33 | // Get total purchase amount
34 | const getTotalPurchaseAmount = async (req, res) => {
35 |   let totalPurchaseAmount = 0;
36 |   const purchaseData = await Purchase.find({"userID": req.params.userID});
37 |   purchaseData.forEach((purchase) => {
38 |     totalPurchaseAmount += purchase.TotalPurchaseAmount;
39 |   });
40 |   res.json({ totalPurchaseAmount });
41 | };
42 | 
43 | module.exports = { addPurchase, getPurchaseData, getTotalPurchaseAmount };
44 | 


--------------------------------------------------------------------------------
/Backend/controller/purchaseStock.js:
--------------------------------------------------------------------------------
 1 | const Purchase = require("../models/purchase");
 2 | const Product = require("../models/Product");
 3 | 
 4 | const purchaseStock = async (productID, purchaseStockData) => {
 5 |   // Updating Purchase stock
 6 |   try {
 7 |     const myProductData = await Product.findOne({ _id: productID });
 8 |     let myUpdatedStock = parseInt(myProductData.stock) + purchaseStockData;
 9 | 
10 |     const PurchaseStock = await Product.findByIdAndUpdate(
11 |       { _id: productID },
12 |       {
13 |         stock: myUpdatedStock,
14 |       },
15 |       { new: true }
16 |     );
17 |     console.log(PurchaseStock);
18 |   } catch (error) {
19 |     console.error("Error updating Purchase stock ", error);
20 |   }
21 | };
22 | 
23 | module.exports = purchaseStock;
24 | 


--------------------------------------------------------------------------------
/Backend/controller/sales.js:
--------------------------------------------------------------------------------
 1 | const Sales = require("../models/sales");
 2 | const soldStock = require("../controller/soldStock");
 3 | 
 4 | // Add Sales
 5 | const addSales = (req, res) => {
 6 |   const addSale = new Sales({
 7 |     userID: req.body.userID,
 8 |     ProductID: req.body.productID,
 9 |     StoreID: req.body.storeID,
10 |     StockSold: req.body.stockSold,
11 |     SaleDate: req.body.saleDate,
12 |     TotalSaleAmount: req.body.totalSaleAmount,
13 |   });
14 | 
15 |   addSale
16 |     .save()
17 |     .then((result) => {
18 |       soldStock(req.body.productID, req.body.stockSold);
19 |       res.status(200).send(result);
20 |     })
21 |     .catch((err) => {
22 |       res.status(402).send(err);
23 |     });
24 | };
25 | 
26 | // Get All Sales Data
27 | const getSalesData = async (req, res) => {
28 |   const findAllSalesData = await Sales.find({"userID": req.params.userID})
29 |     .sort({ _id: -1 })
30 |     .populate("ProductID")
31 |     .populate("StoreID"); // -1 for descending order
32 |   res.json(findAllSalesData);
33 | };
34 | 
35 | // Get total sales amount
36 | const getTotalSalesAmount = async(req,res) => {
37 |   let totalSaleAmount = 0;
38 |   const salesData = await Sales.find({"userID": req.params.userID});
39 |   salesData.forEach((sale)=>{
40 |     totalSaleAmount += sale.TotalSaleAmount;
41 |   })
42 |   res.json({totalSaleAmount});
43 | 
44 | }
45 | 
46 | const getMonthlySales = async (req, res) => {
47 |   try {
48 |     const sales = await Sales.find();
49 | 
50 |     // Initialize array with 12 zeros
51 |     const salesAmount = [];
52 |     salesAmount.length = 12;
53 |     salesAmount.fill(0)
54 | 
55 |     sales.forEach((sale) => {
56 |       const monthIndex = parseInt(sale.SaleDate.split("-")[1]) - 1;
57 | 
58 |       salesAmount[monthIndex] += sale.TotalSaleAmount;
59 |     });
60 | 
61 |     res.status(200).json({ salesAmount });
62 |   } catch (err) {
63 |     console.error(err);
64 |     res.status(500).json({ error: "Server error" });
65 |   }
66 | };
67 | 
68 | 
69 | 
70 | module.exports = { addSales, getMonthlySales, getSalesData,  getTotalSalesAmount};
71 | 


--------------------------------------------------------------------------------
/Backend/controller/soldStock.js:
--------------------------------------------------------------------------------
 1 | const Sales = require("../models/sales");
 2 | const Product = require("../models/Product");
 3 | 
 4 | 
 5 | const soldStock = async (productID, stockSoldData) => {
 6 | 
 7 |   // Updating sold stock
 8 |   try {
 9 |     
10 |     const myProductData = await Product.findOne({ _id: productID });
11 |     let myUpdatedStock = myProductData.stock - stockSoldData;
12 |     console.log("MY SOLD STOCK: ", myUpdatedStock);
13 | 
14 |     const SoldStock = await Product.findByIdAndUpdate(
15 |       { _id: productID },
16 |       {
17 |         stock: myUpdatedStock,
18 |       },
19 |       { new: true }
20 |     );
21 |     console.log(SoldStock);
22 | 
23 |   } catch (error) {
24 |     console.error("Error updating sold stock ", error);
25 |   }
26 | };
27 | 
28 | module.exports = soldStock;
29 | 


--------------------------------------------------------------------------------
/Backend/controller/store.js:
--------------------------------------------------------------------------------
 1 | const Store = require("../models/store");
 2 | 
 3 | // Add Store
 4 | const addStore = async (req, res) => {
 5 |     console.log(req.body)
 6 |   const addStore = await new Store({
 7 |     userID : req.body.userId,
 8 |     name: req.body.name,
 9 |     category: req.body.category,
10 |     address: req.body.address,
11 |     city: req.body.city,
12 |     image: req.body.image
13 |   });
14 | 
15 |   addStore.save().then((result) => {
16 |       res.status(200).send(result);
17 |     })
18 |     .catch((err) => {
19 |       res.status(402).send(err);
20 |     });
21 | };
22 | 
23 | // Get All Stores
24 | const getAllStores = async (req, res) => {
25 |   const findAllStores = await Store.find({"userID": req.params.userID}).sort({ _id: -1 }); // -1 for descending;
26 |   res.json(findAllStores);
27 | };
28 | 
29 | module.exports = { addStore, getAllStores };
30 | 


--------------------------------------------------------------------------------
/Backend/models/index.js:
--------------------------------------------------------------------------------
 1 | const mongoose = require("mongoose");
 2 | const uri = "mongodb+srv://adminhamza:adminhamza123&@cluster0.pzcviot.mongodb.net/InventoryManagementApp?retryWrites=true&w=majority";
 3 | 
 4 | 
 5 | function main() {
 6 |     mongoose.connect(uri).then(() => {
 7 |         console.log("Succesfull")
 8 |     
 9 |     }).catch((err) => {
10 |         console.log("Error: ", err)
11 |     })
12 | }
13 | 
14 | module.exports = { main };


--------------------------------------------------------------------------------
/Backend/models/product.js:
--------------------------------------------------------------------------------
 1 | const mongoose = require("mongoose");
 2 | 
 3 | const ProductSchema = new mongoose.Schema(
 4 |   {
 5 |     userID: {
 6 |       type: mongoose.Schema.Types.ObjectId,
 7 |       ref: 'users',
 8 |       required: true,
 9 |     },
10 |     name: {
11 |       type: String,
12 |       required: true,
13 |     },
14 |     manufacturer: {
15 |       type: String,
16 |       required: true,
17 |     },
18 |     stock: {
19 |       type: Number,
20 |       required: true,
21 |     },
22 |     description: String,
23 |   },
24 |   { timestamps: true }
25 | );
26 | 
27 | 
28 | const Product = mongoose.model("product", ProductSchema);
29 | module.exports = Product;
30 | 


--------------------------------------------------------------------------------
/Backend/models/purchase.js:
--------------------------------------------------------------------------------
 1 | const mongoose = require("mongoose");
 2 | 
 3 | const PurchaseSchema = new mongoose.Schema(
 4 |   {
 5 |     userID: {
 6 |       type: mongoose.Schema.Types.ObjectId,
 7 |       ref: "users",
 8 |       required: true,
 9 |     },
10 |     ProductID: {
11 |       type: mongoose.Schema.Types.ObjectId,
12 |       ref: "product",
13 |       required: true,
14 |     },
15 |     QuantityPurchased: {
16 |       type: Number,
17 |       required: true,
18 |     },
19 |     PurchaseDate: {
20 |       type: String,
21 |       required: true,
22 |     },
23 |     TotalPurchaseAmount: {
24 |       type: Number,
25 |       required: true,
26 |     },
27 |   },
28 |   { timestamps: true }
29 | );
30 | 
31 | const Purchase = mongoose.model("purchase", PurchaseSchema);
32 | module.exports = Purchase;
33 | 


--------------------------------------------------------------------------------
/Backend/models/sales.js:
--------------------------------------------------------------------------------
 1 | const mongoose = require("mongoose");
 2 | 
 3 | const SaleSchema = new mongoose.Schema(
 4 |   {
 5 |     userID: {
 6 |       type: mongoose.Schema.Types.ObjectId,
 7 |       ref: "users",
 8 |       required: true,
 9 |     },
10 |     ProductID: {
11 |       type: mongoose.Schema.Types.ObjectId,
12 |       ref: "product",
13 |       required: true,
14 |     },
15 |     StoreID: {
16 |       type: mongoose.Schema.Types.ObjectId,
17 |       ref: "store",
18 |       required: true,
19 |     },
20 |     StockSold: {
21 |       type: Number,
22 |       required: true,
23 |     },
24 |     SaleDate: {
25 |       type: String,
26 |       required: true,
27 |     },
28 |     TotalSaleAmount: {
29 |       type: Number,
30 |       required: true,
31 |     },
32 |   },
33 |   { timestamps: true }
34 | );
35 | 
36 | const Sales = mongoose.model("sales", SaleSchema);
37 | module.exports = Sales;
38 | 


--------------------------------------------------------------------------------
/Backend/models/store.js:
--------------------------------------------------------------------------------
 1 | const mongoose = require("mongoose");
 2 | 
 3 | const StoreSchema = new mongoose.Schema(
 4 |   {
 5 |     userID: {
 6 |       type: mongoose.Schema.Types.ObjectId,
 7 |       ref: 'users',
 8 |       required: true,
 9 |     },
10 |     name: {
11 |       type: String,
12 |       required: true,
13 |     },
14 |     category: {
15 |       type: String,
16 |       required: true,
17 |     },
18 |     address: {
19 |       type: String,
20 |       required: true,
21 |     },
22 |     city: {
23 |       type: String,
24 |       required: true,
25 |     },
26 |     image: {
27 |       type: String,
28 |       required: true,
29 |     },
30 |   },
31 |   { timestamps: true }
32 | );
33 | 
34 | const Store = mongoose.model("store", StoreSchema);
35 | module.exports = Store;
36 | 


--------------------------------------------------------------------------------
/Backend/models/users.js:
--------------------------------------------------------------------------------
 1 | const mongoose = require('mongoose');
 2 | 
 3 | const UserSchema = new mongoose.Schema({
 4 |     firstName: 'String',
 5 |     lastName : 'String',
 6 |     email: 'String',
 7 |     password: 'String',
 8 |     phoneNumber: 'Number',
 9 |     imageUrl: 'String',
10 | });
11 | 
12 | const User = mongoose.model("users", UserSchema);
13 | module.exports = User;


--------------------------------------------------------------------------------
/Backend/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "backend",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "server.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1",
 8 |     "serverStart": "nodemon server.js"
 9 |   },
10 |   "author": "",
11 |   "license": "ISC",
12 |   "dependencies": {
13 |     "cors": "^2.8.5",
14 |     "express": "^4.18.2",
15 |     "mongoose": "^7.0.2",
16 |     "multer": "^1.4.5-lts.1",
17 |     "nodemon": "^2.0.21"
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/Backend/router/product.js:
--------------------------------------------------------------------------------
 1 | const express = require("express");
 2 | const app = express();
 3 | const product = require("../controller/product");
 4 | 
 5 | // Add Product
 6 | app.post("/add", product.addProduct);
 7 | 
 8 | // Get All Products
 9 | app.get("/get/:userId", product.getAllProducts);
10 | 
11 | // Delete Selected Product Item
12 | app.get("/delete/:id", product.deleteSelectedProduct);
13 | 
14 | // Update Selected Product
15 | app.post("/update", product.updateSelectedProduct);
16 | 
17 | // Search Product
18 | app.get("/search", product.searchProduct);
19 | 
20 | // http://localhost:4000/api/product/search?searchTerm=fa
21 | 
22 | module.exports = app;
23 | 


--------------------------------------------------------------------------------
/Backend/router/purchase.js:
--------------------------------------------------------------------------------
 1 | const express = require("express");
 2 | const app = express();
 3 | const purchase = require("../controller/purchase");
 4 | 
 5 | // Add Purchase
 6 | app.post("/add", purchase.addPurchase);
 7 | 
 8 | // Get All Purchase Data
 9 | app.get("/get/:userID", purchase.getPurchaseData);
10 | 
11 | app.get("/get/:userID/totalpurchaseamount", purchase.getTotalPurchaseAmount);
12 | 
13 | module.exports = app;
14 | 
15 | // http://localhost:4000/api/purchase/add POST
16 | // http://localhost:4000/api/purchase/get GET
17 | 


--------------------------------------------------------------------------------
/Backend/router/sales.js:
--------------------------------------------------------------------------------
 1 | const express = require("express");
 2 | const app = express();
 3 | const sales = require("../controller/sales");
 4 | 
 5 | // Add Sales
 6 | app.post("/add", sales.addSales);
 7 | 
 8 | // Get All Sales
 9 | app.get("/get/:userID", sales.getSalesData);
10 | app.get("/getmonthly", sales.getMonthlySales);
11 | 
12 | 
13 | app.get("/get/:userID/totalsaleamount", sales.getTotalSalesAmount);
14 | 
15 | module.exports = app;
16 | 
17 | 
18 | 
19 | // http://localhost:4000/api/sales/add POST
20 | // http://localhost:4000/api/sales/get GET
21 | 


--------------------------------------------------------------------------------
/Backend/router/store.js:
--------------------------------------------------------------------------------
 1 | const express = require("express");
 2 | const app = express();
 3 | const store = require("../controller/store");
 4 | 
 5 | // Add Store 
 6 | app.post("/add", store.addStore);
 7 | 
 8 | // Get All Store
 9 | app.get("/get/:userID", store.getAllStores)
10 | 
11 | module.exports = app;
12 | 


--------------------------------------------------------------------------------
/Backend/server.js:
--------------------------------------------------------------------------------
 1 | const express = require("express");
 2 | const { main } = require("./models/index");
 3 | const productRoute = require("./router/product");
 4 | const storeRoute = require("./router/store");
 5 | const purchaseRoute = require("./router/purchase");
 6 | const salesRoute = require("./router/sales");
 7 | const cors = require("cors");
 8 | const User = require("./models/users");
 9 | const Product = require("./models/Product");
10 | 
11 | 
12 | const app = express();
13 | const PORT = 4000;
14 | main();
15 | app.use(express.json());
16 | app.use(cors());
17 | 
18 | // Store API
19 | app.use("/api/store", storeRoute);
20 | 
21 | // Products API
22 | app.use("/api/product", productRoute);
23 | 
24 | // Purchase API
25 | app.use("/api/purchase", purchaseRoute);
26 | 
27 | // Sales API
28 | app.use("/api/sales", salesRoute);
29 | 
30 | // ------------- Signin --------------
31 | let userAuthCheck;
32 | app.post("/api/login", async (req, res) => {
33 |   console.log(req.body);
34 |   // res.send("hi");
35 |   try {
36 |     const user = await User.findOne({
37 |       email: req.body.email,
38 |       password: req.body.password,
39 |     });
40 |     console.log("USER: ", user);
41 |     if (user) {
42 |       res.send(user);
43 |       userAuthCheck = user;
44 |     } else {
45 |       res.status(401).send("Invalid Credentials");
46 |       userAuthCheck = null;
47 |     }
48 |   } catch (error) {
49 |     console.log(error);
50 |     res.send(error);
51 |   }
52 | });
53 | 
54 | // Getting User Details of login user
55 | app.get("/api/login", (req, res) => {
56 |   res.send(userAuthCheck);
57 | });
58 | // ------------------------------------
59 | 
60 | // Registration API
61 | app.post("/api/register", (req, res) => {
62 |   let registerUser = new User({
63 |     firstName: req.body.firstName,
64 |     lastName: req.body.lastName,
65 |     email: req.body.email,
66 |     password: req.body.password,
67 |     phoneNumber: req.body.phoneNumber,
68 |     imageUrl: req.body.imageUrl,
69 |   });
70 | 
71 |   registerUser
72 |     .save()
73 |     .then((result) => {
74 |       res.status(200).send(result);
75 |       alert("Signup Successfull");
76 |     })
77 |     .catch((err) => console.log("Signup: ", err));
78 |   console.log("request: ", req.body);
79 | });
80 | 
81 | 
82 | app.get("/testget", async (req,res)=>{
83 |   const result = await Product.findOne({ _id: '6429979b2e5434138eda1564'})
84 |   res.json(result)
85 | 
86 | })
87 | 
88 | // Here we are listening to the server
89 | app.listen(PORT, () => {
90 |   console.log("I am live again");
91 | });
92 | 


--------------------------------------------------------------------------------
/Frontend/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/Frontend/README.md:
--------------------------------------------------------------------------------
 1 | # Getting Started with Create React App
 2 | 
 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 4 | 
 5 | ## Available Scripts
 6 | 
 7 | In the project directory, you can run:
 8 | 
 9 | ### `npm start`
10 | 
11 | Runs the app in the development mode.\
12 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
13 | 
14 | The page will reload when you make changes.\
15 | You may also see any lint errors in the console.
16 | 
17 | ### `npm test`
18 | 
19 | Launches the test runner in the interactive watch mode.\
20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
21 | 
22 | ### `npm run build`
23 | 
24 | Builds the app for production to the `build` folder.\
25 | It correctly bundles React in production mode and optimizes the build for the best performance.
26 | 
27 | The build is minified and the filenames include the hashes.\
28 | Your app is ready to be deployed!
29 | 
30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
31 | 
32 | ### `npm run eject`
33 | 
34 | **Note: this is a one-way operation. Once you `eject`, you can't go back!**
35 | 
36 | If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
37 | 
38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
39 | 
40 | You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
41 | 
42 | ## Learn More
43 | 
44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
45 | 
46 | To learn React, check out the [React documentation](https://reactjs.org/).
47 | 
48 | ### Code Splitting
49 | 
50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
51 | 
52 | ### Analyzing the Bundle Size
53 | 
54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
55 | 
56 | ### Making a Progressive Web App
57 | 
58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
59 | 
60 | ### Advanced Configuration
61 | 
62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
63 | 
64 | ### Deployment
65 | 
66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
67 | 
68 | ### `npm run build` fails to minify
69 | 
70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
71 | # React-Inventory-Management-System
72 | 


--------------------------------------------------------------------------------
/Frontend/README.md~:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mhamzashaikh/React-Inventory-Management-System/6bfe18edb0fc097653ca0b45d7a9d6ebd0bdac56/Frontend/README.md~


--------------------------------------------------------------------------------
/Frontend/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "inventory-management-app",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@headlessui/react": "^1.7.13",
 7 |     "@heroicons/react": "^2.0.16",
 8 |     "@tailwindcss/forms": "^0.5.3",
 9 |     "@testing-library/jest-dom": "^5.16.5",
10 |     "@testing-library/react": "^13.4.0",
11 |     "@testing-library/user-event": "^13.5.0",
12 |     "apexcharts": "^3.37.2",
13 |     "chart.js": "^4.2.1",
14 |     "react": "^18.2.0",
15 |     "react-apexcharts": "^1.4.0",
16 |     "react-chartjs-2": "^5.2.0",
17 |     "react-dom": "^18.2.0",
18 |     "react-router-dom": "^6.9.0",
19 |     "react-scripts": "5.0.1",
20 |     "web-vitals": "^2.1.4"
21 |   },
22 |   "scripts": {
23 |     "start": "react-scripts start",
24 |     "build": "react-scripts build",
25 |     "test": "react-scripts test",
26 |     "eject": "react-scripts eject"
27 |   },
28 |   "eslintConfig": {
29 |     "extends": [
30 |       "react-app",
31 |       "react-app/jest"
32 |     ]
33 |   },
34 |   "browserslist": {
35 |     "production": [
36 |       ">0.2%",
37 |       "not dead",
38 |       "not op_mini all"
39 |     ],
40 |     "development": [
41 |       "last 1 chrome version",
42 |       "last 1 firefox version",
43 |       "last 1 safari version"
44 |     ]
45 |   },
46 |   "devDependencies": {
47 |     "tailwindcss": "^3.2.7"
48 |   }
49 | }
50 | 


--------------------------------------------------------------------------------
/Frontend/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mhamzashaikh/React-Inventory-Management-System/6bfe18edb0fc097653ca0b45d7a9d6ebd0bdac56/Frontend/public/favicon.ico


--------------------------------------------------------------------------------
/Frontend/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>React App</title>
28 |   </head>
29 |   <body>
30 |     <noscript>You need to enable JavaScript to run this app.</noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/Frontend/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mhamzashaikh/React-Inventory-Management-System/6bfe18edb0fc097653ca0b45d7a9d6ebd0bdac56/Frontend/public/logo192.png


--------------------------------------------------------------------------------
/Frontend/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mhamzashaikh/React-Inventory-Management-System/6bfe18edb0fc097653ca0b45d7a9d6ebd0bdac56/Frontend/public/logo512.png


--------------------------------------------------------------------------------
/Frontend/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/Frontend/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/Frontend/src/App.css:
--------------------------------------------------------------------------------
 1 | .App {
 2 |   text-align: center;
 3 | }
 4 | 
 5 | .App-logo {
 6 |   height: 40vmin;
 7 |   pointer-events: none;
 8 | }
 9 | 
10 | @media (prefers-reduced-motion: no-preference) {
11 |   .App-logo {
12 |     animation: App-logo-spin infinite 20s linear;
13 |   }
14 | }
15 | 
16 | .App-header {
17 |   background-color: #282c34;
18 |   min-height: 100vh;
19 |   display: flex;
20 |   flex-direction: column;
21 |   align-items: center;
22 |   justify-content: center;
23 |   font-size: calc(10px + 2vmin);
24 |   color: white;
25 | }
26 | 
27 | .App-link {
28 |   color: #61dafb;
29 | }
30 | 
31 | @keyframes App-logo-spin {
32 |   from {
33 |     transform: rotate(0deg);
34 |   }
35 |   to {
36 |     transform: rotate(360deg);
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/Frontend/src/App.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Login from "./pages/Login";
 3 | import Register from "./pages/Register";
 4 | import Dashboard from "./pages/Dashboard";
 5 | import "./index.css";
 6 | import { BrowserRouter, Routes, Route } from "react-router-dom";
 7 | import Layout from "./components/Layout";
 8 | import Inventory from "./pages/Inventory";
 9 | import NoPageFound from "./pages/NoPageFound";
10 | import AuthContext from "./AuthContext";
11 | import ProtectedWrapper from "./ProtectedWrapper";
12 | import { useEffect, useState } from "react";
13 | import Store from "./pages/Store";
14 | import Sales from "./pages/Sales";
15 | import PurchaseDetails from "./pages/PurchaseDetails";
16 | 
17 | const App = () => {
18 |   const [user, setUser] = useState("");
19 |   const [loader, setLoader] = useState(true);
20 |   let myLoginUser = JSON.parse(localStorage.getItem("user"));
21 |   // console.log("USER: ",user)
22 | 
23 |   useEffect(() => {
24 |     if (myLoginUser) {
25 |       setUser(myLoginUser._id);
26 |       setLoader(false);
27 |       // console.log("inside effect", myLoginUser)
28 |     } else {
29 |       setUser("");
30 |       setLoader(false);
31 |     }
32 |   }, [myLoginUser]);
33 | 
34 |   const signin = (newUser, callback) => {
35 |     setUser(newUser);
36 |     callback();
37 |   };
38 | 
39 |   const signout = () => {
40 |     setUser(null);
41 |     localStorage.removeItem("user");
42 |   };
43 | 
44 |   let value = { user, signin, signout };
45 | 
46 |   if (loader)
47 |     return (
48 |       <div
49 |         style={{
50 |           flex: 1,
51 |           display: "flex",
52 |           justifyContent: "center",
53 |           alignItems: "center",
54 |         }}
55 |       >
56 |         <h1>LOADING...</h1>
57 |       </div>
58 |     );
59 | 
60 |   return (
61 |     <AuthContext.Provider value={value}>
62 |       <BrowserRouter>
63 |         <Routes>
64 |           <Route path="/login" element={<Login />} />
65 |           <Route path="/register" element={<Register />} />
66 |           <Route
67 |             path="/"
68 |             element={
69 |               <ProtectedWrapper>
70 |                 <Layout />
71 |               </ProtectedWrapper>
72 |             }
73 |           >
74 |             <Route index element={<Dashboard />} />
75 |             <Route path="/inventory" element={<Inventory />} />
76 |             <Route path="/purchase-details" element={<PurchaseDetails />} />
77 |             <Route path="/sales" element={<Sales />} />
78 |             <Route path="/manage-store" element={<Store />} />
79 |           </Route>
80 |           <Route path="*" element={<NoPageFound />} />
81 |         </Routes>
82 |       </BrowserRouter>
83 |     </AuthContext.Provider>
84 |   );
85 | };
86 | 
87 | export default App;
88 | 


--------------------------------------------------------------------------------
/Frontend/src/App.test.js:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/react';
2 | import App from './App';
3 | 
4 | test('renders learn react link', () => {
5 |   render(<App />);
6 |   const linkElement = screen.getByText(/learn react/i);
7 |   expect(linkElement).toBeInTheDocument();
8 | });
9 | 


--------------------------------------------------------------------------------
/Frontend/src/AuthContext.js:
--------------------------------------------------------------------------------
1 | import { createContext } from "react";
2 | 
3 | let AuthContext = createContext(null);
4 | 
5 | export default AuthContext;
6 | 


--------------------------------------------------------------------------------
/Frontend/src/ProtectedWrapper.js:
--------------------------------------------------------------------------------
 1 | import AuthContext from "./AuthContext";
 2 | import { useContext } from "react";
 3 | import { Navigate } from "react-router-dom";
 4 | 
 5 | function ProtectedWrapper(props) {
 6 |   const auth = useContext(AuthContext);
 7 |   // console.log("====================================");
 8 |   // console.log(auth);
 9 |   // console.log("====================================");
10 | 
11 |   if (!auth.user) {
12 |     return <Navigate to="/login" replace />;
13 |   }
14 | 
15 |   return props.children;
16 | }
17 | export default ProtectedWrapper;
18 | 


--------------------------------------------------------------------------------
/Frontend/src/assets/20943629.eps:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mhamzashaikh/React-Inventory-Management-System/6bfe18edb0fc097653ca0b45d7a9d6ebd0bdac56/Frontend/src/assets/20943629.eps


--------------------------------------------------------------------------------
/Frontend/src/assets/License free.txt:
--------------------------------------------------------------------------------
 1 | IMPORTANT NOTICE: This license only applies if you downloaded this content as
 2 | an unsubscribed user. If you are a premium user (ie, you pay a subscription)
 3 | you are bound to the license terms described in the accompanying file
 4 | "License premium.txt".
 5 | 
 6 | ---------------------
 7 | 
 8 | You must attribute the image to its author:
 9 | 
10 | In order to use a content or a part of it, you must attribute it to vectorjuice / Freepik,
11 | so we will be able to continue creating new graphic resources every day.
12 | 
13 | 
14 | How to attribute it?
15 | 
16 | For websites:
17 | 
18 | Please, copy this code on your website to accredit the author:
19 | <a href="http://www.freepik.com">Designed by vectorjuice / Freepik</a>
20 | 
21 | For printing:
22 | 
23 | Paste this text on the final work so the authorship is known.
24 | - For example, in the acknowledgements chapter of a book:
25 | "Designed by vectorjuice / Freepik"
26 | 
27 | 
28 | You are free to use this image:
29 | 
30 | - For both personal and commercial projects and to modify it.
31 | - In a website or presentation template or application or as part of your design.
32 | 
33 | You are not allowed to:
34 | 
35 | - Sub-license, resell or rent it.
36 | - Include it in any online or offline archive or database.
37 | 
38 | The full terms of the license are described in section 7 of the Freepik
39 | terms of use, available online in the following link:
40 | 
41 |   http://www.freepik.com/terms_of_use
42 | 
43 | The terms described in the above link have precedence over the terms described
44 | in the present document. In case of disagreement, the Freepik Terms of Use
45 | will prevail.
46 | 


--------------------------------------------------------------------------------
/Frontend/src/assets/License premium.txt:
--------------------------------------------------------------------------------
 1 | IMPORTANT NOTICE: This license only applies if you downloaded this content as
 2 | a subscribed (or "premium") user. If you are an unsubscribed user (or "free"
 3 | user) you are bound to the license terms described in the accompanying file
 4 | "License free.txt".
 5 | 
 6 | ---------------------
 7 | 
 8 | You can download from your profile in Freepik a personalized license stating
 9 | your right to use this content as a "premium" user:
10 | 
11 |   https://profile.freepik.com/my_downloads
12 | 
13 | You are free to use this image:
14 | 
15 | - For both personal and commercial projects and to modify it.
16 | - In a website or presentation template or application or as part of your design.
17 | 
18 | You are not allowed to:
19 | 
20 | - Sub-license, resell or rent it.
21 | - Include it in any online or offline archive or database.
22 | 
23 | The full terms of the license are described in sections 7 and 8 of the Freepik
24 | terms of use, available online in the following link:
25 | 
26 |   http://www.freepik.com/terms_of_use
27 | 
28 | The terms described in the above link have precedence over the terms described
29 | in the present document. In case of disagreement, the Freepik Terms of Use
30 | will prevail.
31 | 


--------------------------------------------------------------------------------
/Frontend/src/assets/Login.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mhamzashaikh/React-Inventory-Management-System/6bfe18edb0fc097653ca0b45d7a9d6ebd0bdac56/Frontend/src/assets/Login.png


--------------------------------------------------------------------------------
/Frontend/src/assets/add-product.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mhamzashaikh/React-Inventory-Management-System/6bfe18edb0fc097653ca0b45d7a9d6ebd0bdac56/Frontend/src/assets/add-product.png


--------------------------------------------------------------------------------
/Frontend/src/assets/dashboard-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mhamzashaikh/React-Inventory-Management-System/6bfe18edb0fc097653ca0b45d7a9d6ebd0bdac56/Frontend/src/assets/dashboard-icon.png


--------------------------------------------------------------------------------
/Frontend/src/assets/download.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mhamzashaikh/React-Inventory-Management-System/6bfe18edb0fc097653ca0b45d7a9d6ebd0bdac56/Frontend/src/assets/download.png


--------------------------------------------------------------------------------
/Frontend/src/assets/filter-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mhamzashaikh/React-Inventory-Management-System/6bfe18edb0fc097653ca0b45d7a9d6ebd0bdac56/Frontend/src/assets/filter-icon.png


--------------------------------------------------------------------------------
/Frontend/src/assets/inventory-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mhamzashaikh/React-Inventory-Management-System/6bfe18edb0fc097653ca0b45d7a9d6ebd0bdac56/Frontend/src/assets/inventory-icon.png


--------------------------------------------------------------------------------
/Frontend/src/assets/location-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mhamzashaikh/React-Inventory-Management-System/6bfe18edb0fc097653ca0b45d7a9d6ebd0bdac56/Frontend/src/assets/location-icon.png


--------------------------------------------------------------------------------
/Frontend/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mhamzashaikh/React-Inventory-Management-System/6bfe18edb0fc097653ca0b45d7a9d6ebd0bdac56/Frontend/src/assets/logo.png


--------------------------------------------------------------------------------
/Frontend/src/assets/mi-logo (2).jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mhamzashaikh/React-Inventory-Management-System/6bfe18edb0fc097653ca0b45d7a9d6ebd0bdac56/Frontend/src/assets/mi-logo (2).jpg


--------------------------------------------------------------------------------
/Frontend/src/assets/mi-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mhamzashaikh/React-Inventory-Management-System/6bfe18edb0fc097653ca0b45d7a9d6ebd0bdac56/Frontend/src/assets/mi-logo.png


--------------------------------------------------------------------------------
/Frontend/src/assets/order-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mhamzashaikh/React-Inventory-Management-System/6bfe18edb0fc097653ca0b45d7a9d6ebd0bdac56/Frontend/src/assets/order-icon.png


--------------------------------------------------------------------------------
/Frontend/src/assets/reports-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mhamzashaikh/React-Inventory-Management-System/6bfe18edb0fc097653ca0b45d7a9d6ebd0bdac56/Frontend/src/assets/reports-icon.png


--------------------------------------------------------------------------------
/Frontend/src/assets/search-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mhamzashaikh/React-Inventory-Management-System/6bfe18edb0fc097653ca0b45d7a9d6ebd0bdac56/Frontend/src/assets/search-icon.png


--------------------------------------------------------------------------------
/Frontend/src/assets/signup-img.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mhamzashaikh/React-Inventory-Management-System/6bfe18edb0fc097653ca0b45d7a9d6ebd0bdac56/Frontend/src/assets/signup-img.zip


--------------------------------------------------------------------------------
/Frontend/src/assets/signup.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mhamzashaikh/React-Inventory-Management-System/6bfe18edb0fc097653ca0b45d7a9d6ebd0bdac56/Frontend/src/assets/signup.jpg


--------------------------------------------------------------------------------
/Frontend/src/assets/store-image.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mhamzashaikh/React-Inventory-Management-System/6bfe18edb0fc097653ca0b45d7a9d6ebd0bdac56/Frontend/src/assets/store-image.jpg


--------------------------------------------------------------------------------
/Frontend/src/assets/supplier-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mhamzashaikh/React-Inventory-Management-System/6bfe18edb0fc097653ca0b45d7a9d6ebd0bdac56/Frontend/src/assets/supplier-icon.png


--------------------------------------------------------------------------------
/Frontend/src/components/AddProduct.js:
--------------------------------------------------------------------------------
  1 | import { Fragment, useContext, useRef, useState } from "react";
  2 | import { Dialog, Transition } from "@headlessui/react";
  3 | import { PlusIcon } from "@heroicons/react/24/outline";
  4 | import AuthContext from "../AuthContext";
  5 | 
  6 | export default function AddProduct({
  7 |   addProductModalSetting,
  8 |   handlePageUpdate,
  9 | }) {
 10 |   const authContext = useContext(AuthContext);
 11 |   const [product, setProduct] = useState({
 12 |     userId: authContext.user,
 13 |     name: "",
 14 |     manufacturer: "",
 15 |     description: "",
 16 |   });
 17 |   console.log("----",product)
 18 |   const [open, setOpen] = useState(true);
 19 |   const cancelButtonRef = useRef(null);
 20 | 
 21 |   const handleInputChange = (key, value) => {
 22 |     setProduct({ ...product, [key]: value });
 23 |   };
 24 | 
 25 |   const addProduct = () => {
 26 |     fetch("http://localhost:4000/api/product/add", {
 27 |       method: "POST",
 28 |       headers: {
 29 |         "Content-type": "application/json",
 30 |       },
 31 |       body: JSON.stringify(product),
 32 |     })
 33 |       .then((result) => {
 34 |         alert("Product ADDED");
 35 |         handlePageUpdate();
 36 |         addProductModalSetting();
 37 |       })
 38 |       .catch((err) => console.log(err));
 39 |   };
 40 | 
 41 |   return (
 42 |     // Modal
 43 |     <Transition.Root show={open} as={Fragment}>
 44 |       <Dialog
 45 |         as="div"
 46 |         className="relative z-10"
 47 |         initialFocus={cancelButtonRef}
 48 |         onClose={setOpen}
 49 |       >
 50 |         <Transition.Child
 51 |           as={Fragment}
 52 |           enter="ease-out duration-300"
 53 |           enterFrom="opacity-0"
 54 |           enterTo="opacity-100"
 55 |           leave="ease-in duration-200"
 56 |           leaveFrom="opacity-100"
 57 |           leaveTo="opacity-0"
 58 |         >
 59 |           <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
 60 |         </Transition.Child>
 61 | 
 62 |         <div className="fixed inset-0 z-10 overflow-y-auto">
 63 |           <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
 64 |             <Transition.Child
 65 |               as={Fragment}
 66 |               enter="ease-out duration-300"
 67 |               enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
 68 |               enterTo="opacity-100 translate-y-0 sm:scale-100"
 69 |               leave="ease-in duration-200"
 70 |               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
 71 |               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
 72 |             >
 73 |               <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
 74 |                 <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
 75 |                   <div className="sm:flex sm:items-start">
 76 |                     <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
 77 |                       <PlusIcon
 78 |                         className="h-6 w-6 text-blue-400"
 79 |                         aria-hidden="true"
 80 |                       />
 81 |                     </div>
 82 |                     <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left ">
 83 |                       <Dialog.Title
 84 |                         as="h3"
 85 |                         className="text-lg font-semibold leading-6 text-gray-900 "
 86 |                       >
 87 |                         Add Product
 88 |                       </Dialog.Title>
 89 |                       <form action="#">
 90 |                         <div className="grid gap-4 mb-4 sm:grid-cols-2">
 91 |                           <div>
 92 |                             <label
 93 |                               htmlFor="name"
 94 |                               className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
 95 |                             >
 96 |                               Name
 97 |                             </label>
 98 |                             <input
 99 |                               type="text"
100 |                               name="name"
101 |                               id="name"
102 |                               value={product.name}
103 |                               onChange={(e) =>
104 |                                 handleInputChange(e.target.name, e.target.value)
105 |                               }
106 |                               className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
107 |                               placeholder="Ex. Apple iMac 27&ldquo;"
108 |                             />
109 |                           </div>
110 |                           <div>
111 |                             <label
112 |                               htmlFor="manufacturer"
113 |                               className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
114 |                             >
115 |                               Manufacturer
116 |                             </label>
117 |                             <input
118 |                               type="text"
119 |                               name="manufacturer"
120 |                               id="manufacturer"
121 |                               value={product.manufacturer}
122 |                               onChange={(e) =>
123 |                                 handleInputChange(e.target.name, e.target.value)
124 |                               }
125 |                               className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
126 |                               placeholder="Ex. Apple"
127 |                             />
128 |                           </div>
129 |                           {/* <div>
130 |                             <label
131 |                               for="price"
132 |                               className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
133 |                             >
134 |                               Price
135 |                             </label>
136 |                             <input
137 |                               type="number"
138 |                               name="price"
139 |                               id="price"
140 |                               value={product.price}
141 |                               onChange={(e) =>
142 |                                 handleInputChange(e.target.name, e.target.value)
143 |                               }
144 |                               className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
145 |                               placeholder="$299"
146 |                             />
147 |                           </div>
148 |                           <div>
149 |                             <label
150 |                               for="quantity"
151 |                               className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
152 |                             >
153 |                               Quantity
154 |                             </label>
155 |                             <input
156 |                               type="number"
157 |                               name="quantity"
158 |                               id="quantity"
159 |                               value={product.quantity}
160 |                               onChange={(e) =>
161 |                                 handleInputChange(e.target.name, e.target.value)
162 |                               }
163 |                               className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
164 |                               placeholder="0 - 999"
165 |                             />
166 |                           </div> */}
167 | 
168 |                           <div className="sm:col-span-2">
169 |                             <label
170 |                               htmlFor="description"
171 |                               className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
172 |                             >
173 |                               Description
174 |                             </label>
175 |                             <textarea
176 |                               id="description"
177 |                               rows="5"
178 |                               name="description"
179 |                               className="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
180 |                               placeholder="Write a description..."
181 |                               value={product.description}
182 |                               onChange={(e) =>
183 |                                 handleInputChange(e.target.name, e.target.value)
184 |                               }
185 |                             >
186 |                               Standard glass, 3.8GHz 8-core 10th-generation
187 |                               Intel Core i7 processor, Turbo Boost up to 5.0GHz,
188 |                               16GB 2666MHz DDR4 memory, Radeon Pro 5500 XT with
189 |                               8GB of GDDR6 memory, 256GB SSD storage, Gigabit
190 |                               Ethernet, Magic Mouse 2, Magic Keyboard - US
191 |                             </textarea>
192 |                           </div>
193 |                         </div>
194 |                         <div className="flex items-center space-x-4">
195 |                           {/* <button
196 |                             type="submit"
197 |                             className="text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
198 |                           >
199 |                             Update product
200 |                           </button> */}
201 |                           {/* <button
202 |                             type="button"
203 |                             className="text-red-600 inline-flex items-center hover:text-white border border-red-600 hover:bg-red-600 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600 dark:focus:ring-red-900"
204 |                           >
205 |                             <svg
206 |                               className="mr-1 -ml-1 w-5 h-5"
207 |                               fill="currentColor"
208 |                               viewBox="0 0 20 20"
209 |                               xmlns="http://www.w3.org/2000/svg"
210 |                             >
211 |                               <path
212 |                                 fill-rule="evenodd"
213 |                                 d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
214 |                                 clip-rule="evenodd"
215 |                               ></path>
216 |                             </svg>
217 |                             Delete
218 |                           </button> */}
219 |                         </div>
220 |                       </form>
221 |                     </div>
222 |                   </div>
223 |                 </div>
224 |                 <div className="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
225 |                   <button
226 |                     type="button"
227 |                     className="inline-flex w-full justify-center rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 sm:ml-3 sm:w-auto"
228 |                     onClick={addProduct}
229 |                   >
230 |                     Add Product
231 |                   </button>
232 |                   <button
233 |                     type="button"
234 |                     className="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
235 |                     onClick={() => addProductModalSetting()}
236 |                     ref={cancelButtonRef}
237 |                   >
238 |                     Cancel
239 |                   </button>
240 |                 </div>
241 |               </Dialog.Panel>
242 |             </Transition.Child>
243 |           </div>
244 |         </div>
245 |       </Dialog>
246 |     </Transition.Root>
247 |   );
248 | }
249 | 


--------------------------------------------------------------------------------
/Frontend/src/components/AddPurchaseDetails.js:
--------------------------------------------------------------------------------
  1 | import { Fragment, useRef, useState } from "react";
  2 | import { Dialog, Transition } from "@headlessui/react";
  3 | import { PlusIcon } from "@heroicons/react/24/outline";
  4 | 
  5 | export default function AddPurchaseDetails({
  6 |   addSaleModalSetting,
  7 |   products,
  8 |   handlePageUpdate,
  9 |   authContext
 10 | }) {
 11 |   const [purchase, setPurchase] = useState({
 12 |     userID: authContext.user,
 13 |     productID: "",
 14 |     quantityPurchased: "",
 15 |     purchaseDate: "",
 16 |     totalPurchaseAmount: "",
 17 |   });
 18 |   const [open, setOpen] = useState(true);
 19 |   const cancelButtonRef = useRef(null);
 20 | 
 21 |   console.log("PPu: ", purchase);
 22 | 
 23 |   // Handling Input Change for input fields
 24 |   const handleInputChange = (key, value) => {
 25 |     setPurchase({ ...purchase, [key]: value });
 26 |   };
 27 | 
 28 |   // POST Data
 29 |   const addSale = () => {
 30 |     fetch("http://localhost:4000/api/purchase/add", {
 31 |       method: "POST",
 32 |       headers: {
 33 |         "Content-type": "application/json",
 34 |       },
 35 |       body: JSON.stringify(purchase),
 36 |     })
 37 |       .then((result) => {
 38 |         alert("Purchase ADDED");
 39 |         handlePageUpdate();
 40 |         addSaleModalSetting();
 41 |       })
 42 |       .catch((err) => console.log(err));
 43 |   };
 44 | 
 45 |   return (
 46 |     // Modal
 47 |     <Transition.Root show={open} as={Fragment}>
 48 |       <Dialog
 49 |         as="div"
 50 |         className="relative z-10"
 51 |         initialFocus={cancelButtonRef}
 52 |         onClose={setOpen}
 53 |       >
 54 |         <Transition.Child
 55 |           as={Fragment}
 56 |           enter="ease-out duration-300"
 57 |           enterFrom="opacity-0"
 58 |           enterTo="opacity-100"
 59 |           leave="ease-in duration-200"
 60 |           leaveFrom="opacity-100"
 61 |           leaveTo="opacity-0"
 62 |         >
 63 |           <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
 64 |         </Transition.Child>
 65 | 
 66 |         <div className="fixed inset-0 z-10 overflow-y-auto">
 67 |           <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0 ">
 68 |             <Transition.Child
 69 |               as={Fragment}
 70 |               enter="ease-out duration-300"
 71 |               enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
 72 |               enterTo="opacity-100 translate-y-0 sm:scale-100"
 73 |               leave="ease-in duration-200"
 74 |               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
 75 |               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
 76 |             >
 77 |               <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg overflow-y-scroll">
 78 |                 <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
 79 |                   <div className="sm:flex sm:items-start">
 80 |                     <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
 81 |                       <PlusIcon
 82 |                         className="h-6 w-6 text-blue-400"
 83 |                         aria-hidden="true"
 84 |                       />
 85 |                     </div>
 86 |                     <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left ">
 87 |                       <Dialog.Title
 88 |                         as="h3"
 89 |                         className="text-lg  py-4 font-semibold leading-6 text-gray-900 "
 90 |                       >
 91 |                         Purchase Details
 92 |                       </Dialog.Title>
 93 |                       <form action="#">
 94 |                         <div className="grid gap-4 mb-4 sm:grid-cols-2">
 95 |                           <div>
 96 |                             <label
 97 |                               htmlFor="productID"
 98 |                               className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
 99 |                             >
100 |                               Product Name
101 |                             </label>
102 |                             <select
103 |                               id="productID"
104 |                               className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
105 |                               name="productID"
106 |                               onChange={(e) =>
107 |                                 handleInputChange(e.target.name, e.target.value)
108 |                               }
109 |                             >
110 |                               <option selected="">Select Products</option>
111 |                               {products.map((element, index) => {
112 |                                 return (
113 |                                   <option key={element._id} value={element._id}>
114 |                                     {element.name}
115 |                                   </option>
116 |                                 );
117 |                               })}
118 |                             </select>
119 |                           </div>
120 |                           <div>
121 |                             <label
122 |                               htmlFor="quantityPurchased"
123 |                               className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
124 |                             >
125 |                               Quantity Purchased
126 |                             </label>
127 |                             <input
128 |                               type="number"
129 |                               name="quantityPurchased"
130 |                               id="quantityPurchased"
131 |                               value={purchase.quantityPurchased}
132 |                               onChange={(e) =>
133 |                                 handleInputChange(e.target.name, e.target.value)
134 |                               }
135 |                               className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
136 |                               placeholder="0 - 999"
137 |                             />
138 |                           </div>
139 |                           <div>
140 |                             <label
141 |                               htmlFor="totalPurchaseAmount"
142 |                               className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
143 |                             >
144 |                               Total Purchase Amount
145 |                             </label>
146 |                             <input
147 |                               type="number"
148 |                               name="totalPurchaseAmount"
149 |                               id="price"
150 |                               value={purchase.totalPurchaseAmount}
151 |                               onChange={(e) =>
152 |                                 handleInputChange(e.target.name, e.target.value)
153 |                               }
154 |                               className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
155 |                               placeholder="$299"
156 |                             />
157 |                           </div>
158 |                           <div className="h-fit w-fit">
159 |                             {/* <Datepicker
160 |                               onChange={handleChange}
161 |                               show={show}
162 |                               setShow={handleClose}
163 |                             /> */}
164 |                             <label
165 |                               className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
166 |                               htmlFor="purchaseDate"
167 |                             >
168 |                               Purchase Date
169 |                             </label>
170 |                             <input
171 |                               className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
172 |                               type="date"
173 |                               id="purchaseDate"
174 |                               name="purchaseDate"
175 |                               value={purchase.purchaseDate}
176 |                               onChange={(e) =>
177 |                                 handleInputChange(e.target.name, e.target.value)
178 |                               }
179 |                             />
180 |                           </div>
181 |                         </div>
182 |                         <div className="flex items-center space-x-4">
183 |                           {/* <button
184 |                             type="submit"
185 |                             className="text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
186 |                           >
187 |                             Update product
188 |                           </button> */}
189 |                           {/* <button
190 |                             type="button"
191 |                             className="text-red-600 inline-flex items-center hover:text-white border border-red-600 hover:bg-red-600 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600 dark:focus:ring-red-900"
192 |                           >
193 |                             <svg
194 |                               className="mr-1 -ml-1 w-5 h-5"
195 |                               fill="currentColor"
196 |                               viewBox="0 0 20 20"
197 |                               xmlns="http://www.w3.org/2000/svg"
198 |                             >
199 |                               <path
200 |                                 fill-rule="evenodd"
201 |                                 d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
202 |                                 clip-rule="evenodd"
203 |                               ></path>
204 |                             </svg>
205 |                             Delete
206 |                           </button> */}
207 |                         </div>
208 |                       </form>
209 |                     </div>
210 |                   </div>
211 |                 </div>
212 |                 <div className="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
213 |                   <button
214 |                     type="button"
215 |                     className="inline-flex w-full justify-center rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 sm:ml-3 sm:w-auto"
216 |                     onClick={addSale}
217 |                   >
218 |                     Add
219 |                   </button>
220 |                   <button
221 |                     type="button"
222 |                     className="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
223 |                     onClick={() => addSaleModalSetting()}
224 |                     ref={cancelButtonRef}
225 |                   >
226 |                     Cancel
227 |                   </button>
228 |                 </div>
229 |               </Dialog.Panel>
230 |             </Transition.Child>
231 |           </div>
232 |         </div>
233 |       </Dialog>
234 |     </Transition.Root>
235 |   );
236 | }
237 | 


--------------------------------------------------------------------------------
/Frontend/src/components/AddSale.js:
--------------------------------------------------------------------------------
  1 | import { Fragment, useRef, useState } from "react";
  2 | import { Dialog, Transition } from "@headlessui/react";
  3 | import { PlusIcon } from "@heroicons/react/24/outline";
  4 | 
  5 | export default function AddSale({
  6 |   addSaleModalSetting,
  7 |   products,
  8 |   stores,
  9 |   handlePageUpdate,
 10 |   authContext
 11 | }) {
 12 |   const [sale, setSale] = useState({
 13 |     userID: authContext.user,
 14 |     productID: "",
 15 |     storeID: "",
 16 |     stockSold: "",
 17 |     saleDate: "",
 18 |     totalSaleAmount: "",
 19 |   });
 20 |   const [open, setOpen] = useState(true);
 21 |   const cancelButtonRef = useRef(null);
 22 | 
 23 | 
 24 |   // Handling Input Change for input fields
 25 |   const handleInputChange = (key, value) => {
 26 |     setSale({ ...sale, [key]: value });
 27 |   };
 28 | 
 29 |   // POST Data
 30 |   const addSale = () => {
 31 |     fetch("http://localhost:4000/api/sales/add", {
 32 |       method: "POST",
 33 |       headers: {
 34 |         "Content-type": "application/json",
 35 |       },
 36 |       body: JSON.stringify(sale),
 37 |     })
 38 |       .then((result) => {
 39 |         alert("Sale ADDED");
 40 |         handlePageUpdate();
 41 |         addSaleModalSetting();
 42 |       })
 43 |       .catch((err) => console.log(err));
 44 |   };
 45 | 
 46 |   return (
 47 |     // Modal
 48 |     <Transition.Root show={open} as={Fragment}>
 49 |       <Dialog
 50 |         as="div"
 51 |         className="relative z-10"
 52 |         initialFocus={cancelButtonRef}
 53 |         onClose={setOpen}
 54 |       >
 55 |         <Transition.Child
 56 |           as={Fragment}
 57 |           enter="ease-out duration-300"
 58 |           enterFrom="opacity-0"
 59 |           enterTo="opacity-100"
 60 |           leave="ease-in duration-200"
 61 |           leaveFrom="opacity-100"
 62 |           leaveTo="opacity-0"
 63 |         >
 64 |           <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
 65 |         </Transition.Child>
 66 | 
 67 |         <div className="fixed inset-0 z-10 overflow-y-auto">
 68 |           <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0 ">
 69 |             <Transition.Child
 70 |               as={Fragment}
 71 |               enter="ease-out duration-300"
 72 |               enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
 73 |               enterTo="opacity-100 translate-y-0 sm:scale-100"
 74 |               leave="ease-in duration-200"
 75 |               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
 76 |               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
 77 |             >
 78 |               <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg overflow-y-scroll">
 79 |                 <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
 80 |                   <div className="sm:flex sm:items-start">
 81 |                     <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
 82 |                       <PlusIcon
 83 |                         className="h-6 w-6 text-blue-400"
 84 |                         aria-hidden="true"
 85 |                       />
 86 |                     </div>
 87 |                     <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left ">
 88 |                       <Dialog.Title
 89 |                         as="h3"
 90 |                         className="text-lg  py-4 font-semibold leading-6 text-gray-900 "
 91 |                       >
 92 |                         Add Sale
 93 |                       </Dialog.Title>
 94 |                       <form action="#">
 95 |                         <div className="grid gap-4 mb-4 sm:grid-cols-2">
 96 |                           <div>
 97 |                             <label
 98 |                               htmlFor="productID"
 99 |                               className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
100 |                             >
101 |                               Product Name
102 |                             </label>
103 |                             <select
104 |                               id="productID"
105 |                               className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
106 |                               name="productID"
107 |                               onChange={(e) =>
108 |                                 handleInputChange(e.target.name, e.target.value)
109 |                               }
110 |                             >
111 |                               <option selected="">Select Products</option>
112 |                               {products.map((element, index) => {
113 |                                 return (
114 |                                   <option key={element._id} value={element._id}>
115 |                                     {element.name}
116 |                                   </option>
117 |                                 );
118 |                               })}
119 |                             </select>
120 |                           </div>
121 |                           <div>
122 |                             <label
123 |                               htmlFor="stockSold"
124 |                               className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
125 |                             >
126 |                               Stock Sold
127 |                             </label>
128 |                             <input
129 |                               type="number"
130 |                               name="stockSold"
131 |                               id="stockSold"
132 |                               value={sale.stockSold}
133 |                               onChange={(e) =>
134 |                                 handleInputChange(e.target.name, e.target.value)
135 |                               }
136 |                               className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
137 |                               placeholder="0 - 999"
138 |                             />
139 |                           </div>
140 | 
141 |                           <div>
142 |                             <label
143 |                               htmlFor="storeID"
144 |                               className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
145 |                             >
146 |                               Store Name
147 |                             </label>
148 |                             <select
149 |                               id="storeID"
150 |                               className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
151 |                               name="storeID"
152 |                               onChange={(e) =>
153 |                                 handleInputChange(e.target.name, e.target.value)
154 |                               }
155 |                             >
156 |                               <option selected="">Select Store</option>
157 |                               {stores.map((element, index) => {
158 |                                 return (
159 |                                   <option key={element._id} value={element._id}>
160 |                                     {element.name}
161 |                                   </option>
162 |                                 );
163 |                               })}
164 |                             </select>
165 |                           </div>
166 |                           <div>
167 |                             <label
168 |                               htmlFor="totalSaleAmount"
169 |                               className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
170 |                             >
171 |                               Total Sale Amount
172 |                             </label>
173 |                             <input
174 |                               type="number"
175 |                               name="totalSaleAmount"
176 |                               id="price"
177 |                               value={sale.totalSaleAmount}
178 |                               onChange={(e) =>
179 |                                 handleInputChange(e.target.name, e.target.value)
180 |                               }
181 |                               className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
182 |                               placeholder="$299"
183 |                             />
184 |                           </div>
185 |                           <div className="h-fit w-fit">
186 |                             {/* <Datepicker
187 |                               onChange={handleChange}
188 |                               show={show}
189 |                               setShow={handleClose}
190 |                             /> */}
191 |                             <label
192 |                               className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
193 |                               htmlFor="salesDate"
194 |                             >
195 |                               Sales Date
196 |                             </label>
197 |                             <input
198 |                               className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
199 |                               type="date"
200 |                               id="saleDate"
201 |                               name="saleDate"
202 |                               value={sale.saleDate}
203 |                               onChange={(e) =>
204 |                                 handleInputChange(e.target.name, e.target.value)
205 |                               }
206 |                             />
207 |                           </div>
208 |                         </div>
209 |                         <div className="flex items-center space-x-4">
210 |                           {/* <button
211 |                             type="submit"
212 |                             className="text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
213 |                           >
214 |                             Update product
215 |                           </button> */}
216 |                           {/* <button
217 |                             type="button"
218 |                             className="text-red-600 inline-flex items-center hover:text-white border border-red-600 hover:bg-red-600 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600 dark:focus:ring-red-900"
219 |                           >
220 |                             <svg
221 |                               className="mr-1 -ml-1 w-5 h-5"
222 |                               fill="currentColor"
223 |                               viewBox="0 0 20 20"
224 |                               xmlns="http://www.w3.org/2000/svg"
225 |                             >
226 |                               <path
227 |                                 fill-rule="evenodd"
228 |                                 d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
229 |                                 clip-rule="evenodd"
230 |                               ></path>
231 |                             </svg>
232 |                             Delete
233 |                           </button> */}
234 |                         </div>
235 |                       </form>
236 |                     </div>
237 |                   </div>
238 |                 </div>
239 |                 <div className="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
240 |                   <button
241 |                     type="button"
242 |                     className="inline-flex w-full justify-center rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 sm:ml-3 sm:w-auto"
243 |                     onClick={addSale}
244 |                   >
245 |                     Add Sale
246 |                   </button>
247 |                   <button
248 |                     type="button"
249 |                     className="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
250 |                     onClick={() => addSaleModalSetting()}
251 |                     ref={cancelButtonRef}
252 |                   >
253 |                     Cancel
254 |                   </button>
255 |                 </div>
256 |               </Dialog.Panel>
257 |             </Transition.Child>
258 |           </div>
259 |         </div>
260 |       </Dialog>
261 |     </Transition.Root>
262 |   );
263 | }
264 | 


--------------------------------------------------------------------------------
/Frontend/src/components/AddStore.js:
--------------------------------------------------------------------------------
  1 | import { Fragment, useRef, useState, useContext } from "react";
  2 | import { Dialog, Transition } from "@headlessui/react";
  3 | import { PlusIcon } from "@heroicons/react/24/outline";
  4 | import UploadImage from "./UploadImage";
  5 | import AuthContext from "../AuthContext";
  6 | 
  7 | export default function AddStore() {
  8 |   const authContext = useContext(AuthContext);
  9 |   const [form, setForm] = useState({
 10 |     userId: authContext.user,
 11 |     name: "",
 12 |     category: "",
 13 |     address: "",
 14 |     city: "",
 15 |     image: "",
 16 |   });
 17 | 
 18 |   const handleInputChange = (e) => {
 19 |     setForm({ ...form, [e.target.name]: e.target.value });
 20 |   };
 21 | 
 22 |   const [open, setOpen] = useState(true);
 23 |   const cancelButtonRef = useRef(null);
 24 | 
 25 |   const addProduct = () => {
 26 |     fetch("http://localhost:4000/api/store/add", {
 27 |       method: "POST",
 28 |       headers: {
 29 |         "Content-type": "application/json",
 30 |       },
 31 |       body: JSON.stringify(form),
 32 |     })
 33 |       .then((result) => {
 34 |         alert("STORE ADDED");
 35 |         setOpen(false);
 36 |       })
 37 |       .catch((err) => console.log(err));
 38 |   };
 39 | 
 40 |   // Uploading image to cloudinary
 41 |   const uploadImage = async (image) => {
 42 |     const data = new FormData();
 43 |     data.append("file", image);
 44 |     data.append("upload_preset", "inventoryapp");
 45 | 
 46 |     await fetch("https://api.cloudinary.com/v1_1/ddhayhptm/image/upload", {
 47 |       method: "POST",
 48 |       body: data,
 49 |     })
 50 |       .then((res) => res.json())
 51 |       .then((data) => {
 52 |         setForm({ ...form, image: data.url });
 53 |         alert("Store Image Successfully Uploaded");
 54 |       })
 55 |       .catch((error) => console.log(error));
 56 |   };
 57 | 
 58 |   return (
 59 |     // Modal
 60 |     <Transition.Root show={open} as={Fragment}>
 61 |       <Dialog
 62 |         as="div"
 63 |         className="relative z-10"
 64 |         initialFocus={cancelButtonRef}
 65 |         onClose={setOpen}
 66 |       >
 67 |         <Transition.Child
 68 |           as={Fragment}
 69 |           enter="ease-out duration-300"
 70 |           enterFrom="opacity-0"
 71 |           enterTo="opacity-100"
 72 |           leave="ease-in duration-200"
 73 |           leaveFrom="opacity-100"
 74 |           leaveTo="opacity-0"
 75 |         >
 76 |           <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
 77 |         </Transition.Child>
 78 | 
 79 |         <div className="fixed inset-0 z-10 overflow-y-auto">
 80 |           <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
 81 |             <Transition.Child
 82 |               as={Fragment}
 83 |               enter="ease-out duration-300"
 84 |               enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
 85 |               enterTo="opacity-100 translate-y-0 sm:scale-100"
 86 |               leave="ease-in duration-200"
 87 |               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
 88 |               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
 89 |             >
 90 |               <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
 91 |                 <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
 92 |                   <div className="sm:flex sm:items-start">
 93 |                     <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
 94 |                       <PlusIcon
 95 |                         className="h-6 w-6 text-blue-400"
 96 |                         aria-hidden="true"
 97 |                       />
 98 |                     </div>
 99 |                     <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left ">
100 |                       <Dialog.Title
101 |                         as="h3"
102 |                         className="text-lg font-semibold leading-6 text-gray-900 "
103 |                       >
104 |                         Store Information
105 |                       </Dialog.Title>
106 |                       <form action="#">
107 |                         <div className="grid gap-4 mb-4 sm:grid-cols-2">
108 |                           <div>
109 |                             <label
110 |                               htmlFor="name"
111 |                               className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
112 |                             >
113 |                               Name
114 |                             </label>
115 |                             <input
116 |                               type="text"
117 |                               name="name"
118 |                               id="name"
119 |                               value={form.name}
120 |                               onChange={handleInputChange}
121 |                               className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
122 |                               placeholder="Enter Store Name"
123 |                             />
124 |                           </div>
125 |                           <div>
126 |                             <label
127 |                               htmlFor="city"
128 |                               className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
129 |                             >
130 |                               City
131 |                             </label>
132 |                             <input
133 |                               type="text"
134 |                               name="city"
135 |                               id="city"
136 |                               value={form.city}
137 |                               onChange={handleInputChange}
138 |                               className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
139 |                               placeholder="Enter City Name"
140 |                             />
141 |                           </div>
142 |                           <div>
143 |                             <label
144 |                               htmlFor="category"
145 |                               className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
146 |                             >
147 |                               Category
148 |                             </label>
149 |                             <select
150 |                               id="category"
151 |                               className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
152 |                               onChange={(e) =>
153 |                                 setForm({
154 |                                   ...form,
155 |                                   category: e.target.value,
156 |                                 })
157 |                               }
158 |                             >
159 |                               <option selected="" value="Electronics">
160 |                                 Electronics
161 |                               </option>
162 |                               <option value="Groceries">Groceries</option>
163 |                               <option value="Wholesale">WholeSale</option>
164 |                               <option value="SuperMart">SuperMart</option>
165 |                               <option value="Phones">Phones</option>
166 |                             </select>
167 |                           </div>
168 |                           <div className="sm:col-span-2">
169 |                             <label
170 |                               htmlFor="address"
171 |                               className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
172 |                             >
173 |                               Address
174 |                             </label>
175 |                             <textarea
176 |                               id="address"
177 |                               rows="5"
178 |                               name="address"
179 |                               className="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
180 |                               placeholder="Write a address..."
181 |                               value={form.address}
182 |                               onChange={handleInputChange}
183 |                             ></textarea>
184 |                           </div>
185 |                         </div>
186 |                         <div className="flex items-center space-x-4">
187 |                           <div>
188 |                             <UploadImage uploadImage={uploadImage} />
189 |                             {/* <label
190 |                               className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
191 |                               for="small_size"
192 |                             >
193 |                               Upload Store Image
194 |                             </label>
195 |                             <input
196 |                               className="block w-full mb-5 text-xs text-gray-900 border  cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none "
197 |                               id="small_size"
198 |                               type="file"
199 |                             /> */}
200 |                           </div>
201 | 
202 |                           {/* <button
203 |                             type="submit"
204 |                             className="text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
205 |                           >
206 |                             Update product
207 |                           </button> */}
208 |                           {/* <button
209 |                             type="button"
210 |                             className="text-red-600 inline-flex items-center hover:text-white border border-red-600 hover:bg-red-600 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600 dark:focus:ring-red-900"
211 |                           >
212 |                             <svg
213 |                               className="mr-1 -ml-1 w-5 h-5"
214 |                               fill="currentColor"
215 |                               viewBox="0 0 20 20"
216 |                               xmlns="http://www.w3.org/2000/svg"
217 |                             >
218 |                               <path
219 |                                 fill-rule="evenodd"
220 |                                 d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
221 |                                 clip-rule="evenodd"
222 |                               ></path>
223 |                             </svg>
224 |                             Delete
225 |                           </button> */}
226 |                         </div>
227 |                       </form>
228 |                     </div>
229 |                   </div>
230 |                 </div>
231 |                 <div className="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
232 |                   <button
233 |                     type="button"
234 |                     className="inline-flex w-full justify-center rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 sm:ml-3 sm:w-auto"
235 |                     onClick={addProduct}
236 |                   >
237 |                     Add Store
238 |                   </button>
239 |                   <button
240 |                     type="button"
241 |                     className="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
242 |                     onClick={() => setOpen(false)}
243 |                     ref={cancelButtonRef}
244 |                   >
245 |                     Cancel
246 |                   </button>
247 |                 </div>
248 |               </Dialog.Panel>
249 |             </Transition.Child>
250 |           </div>
251 |         </div>
252 |       </Dialog>
253 |     </Transition.Root>
254 |   );
255 | }
256 | 


--------------------------------------------------------------------------------
/Frontend/src/components/Header.js:
--------------------------------------------------------------------------------
  1 | import { Fragment, useContext } from "react";
  2 | import { Disclosure, Menu, Transition } from "@headlessui/react";
  3 | import { Bars3Icon, BellIcon, XMarkIcon } from "@heroicons/react/24/outline";
  4 | import AuthContext from "../AuthContext";
  5 | import { Link } from "react-router-dom";
  6 | 
  7 | const navigation = [
  8 |   { name: "Dashboard", href: "/", current: true },
  9 |   { name: "Inventory", href: "/inventory", current: false },
 10 |   { name: "Purchase Details", href: "/purchase-details", current: false },
 11 |   { name: "Sales", href: "/sales", current: false },
 12 |   { name: "Manage Store", href: "/manage-store", current: false },
 13 | ];
 14 | 
 15 | const userNavigation = [{ name: "Sign out", href: "./login" }];
 16 | 
 17 | function classNames(...classes) {
 18 |   return classes.filter(Boolean).join(" ");
 19 | }
 20 | 
 21 | export default function Header() {
 22 |   const authContext = useContext(AuthContext);
 23 |   const localStorageData = JSON.parse(localStorage.getItem("user"));
 24 |   return (
 25 |     <>
 26 |       <div className="min-h-full">
 27 |         <Disclosure as="nav" className="bg-gray-800">
 28 |           {({ open }) => (
 29 |             <>
 30 |               <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
 31 |                 <div className="flex h-16 items-center justify-between">
 32 |                   <div className="flex items-center">
 33 |                     <div className="flex-shrink-0">
 34 |                       <div className="flex justify-center items-center gap-2">
 35 |                         <img
 36 |                           className="h-8 w-8"
 37 |                           src={require("../assets/logo.png")}
 38 |                           alt="Inventory Management System"
 39 |                         />
 40 |                         <span className="font-bold text-white italic">
 41 |                           Inventory Management
 42 |                         </span>
 43 |                       </div>
 44 |                     </div>
 45 |                   </div>
 46 |                   <div className="hidden md:block">
 47 |                     <div className="ml-4 flex items-center md:ml-6">
 48 |                       <button
 49 |                         type="button"
 50 |                         className="rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"
 51 |                       >
 52 |                         <span className="sr-only">View notifications</span>
 53 |                         <BellIcon className="h-6 w-6" aria-hidden="true" />
 54 |                       </button>
 55 | 
 56 |                       {/* Profile dropdown */}
 57 |                       <Menu as="div" className="relative ml-3">
 58 |                         <div>
 59 |                           <Menu.Button className="flex max-w-xs items-center rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
 60 |                             <span className="sr-only">Open user menu</span>
 61 |                             <img
 62 |                               className="h-8 w-8 rounded-full"
 63 |                               src={localStorageData.imageUrl}
 64 |                               alt="profile"
 65 |                             />
 66 |                           </Menu.Button>
 67 |                         </div>
 68 |                         <Transition
 69 |                           as={Fragment}
 70 |                           enter="transition ease-out duration-100"
 71 |                           enterFrom="transform opacity-0 scale-95"
 72 |                           enterTo="transform opacity-100 scale-100"
 73 |                           leave="transition ease-in duration-75"
 74 |                           leaveFrom="transform opacity-100 scale-100"
 75 |                           leaveTo="transform opacity-0 scale-95"
 76 |                         >
 77 |                           <Menu.Items className="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
 78 |                             {userNavigation.map((item) => (
 79 |                               <Menu.Item key={item.name}>
 80 |                                 {({ active }) => (
 81 |                                   <Link
 82 |                                     to={item.href}
 83 |                                     className={classNames(
 84 |                                       active ? "bg-gray-100" : "",
 85 |                                       "block px-4 py-2 text-sm text-gray-700"
 86 |                                     )}
 87 |                                   >
 88 |                                     <span onClick={() => authContext.signout()}>
 89 |                                       {item.name}{" "}
 90 |                                     </span>
 91 |                                   </Link>
 92 |                                 )}
 93 |                               </Menu.Item>
 94 |                             ))}
 95 |                           </Menu.Items>
 96 |                         </Transition>
 97 |                       </Menu>
 98 |                     </div>
 99 |                   </div>
100 |                   <div className="-mr-2 flex md:hidden">
101 |                     {/* Mobile menu button */}
102 |                     <Disclosure.Button className="inline-flex items-center justify-center rounded-md bg-gray-800 p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
103 |                       <span className="sr-only">Open main menu</span>
104 |                       {open ? (
105 |                         <XMarkIcon
106 |                           className="block h-6 w-6"
107 |                           aria-hidden="true"
108 |                         />
109 |                       ) : (
110 |                         <Bars3Icon
111 |                           className="block h-6 w-6"
112 |                           aria-hidden="true"
113 |                         />
114 |                       )}
115 |                     </Disclosure.Button>
116 |                   </div>
117 |                 </div>
118 |               </div>
119 | 
120 |               <Disclosure.Panel className="md:hidden">
121 |                 <div className="space-y-1 px-2 pb-3 pt-2 sm:px-3">
122 |                   {navigation.map((item) => (
123 |                     <Link to={item.href} key={item.name}>
124 |                       <Disclosure.Button
125 |                         key={item.name}
126 |                         as="a"
127 |                         // href={item.href}
128 |                         className={classNames(
129 |                           item.current
130 |                             ? "bg-gray-900 text-white"
131 |                             : "text-gray-300 hover:bg-gray-700 hover:text-white",
132 |                           "block rounded-md px-3 py-2 text-base font-medium"
133 |                         )}
134 |                         aria-current={item.current ? "page" : undefined}
135 |                       >
136 |                         {item.name}
137 |                       </Disclosure.Button>
138 |                     </Link>
139 |                   ))}
140 |                 </div>
141 |                 <div className="border-t border-gray-700 pt-4 pb-3">
142 |                   <div className="flex items-center px-5">
143 |                     <div className="flex-shrink-0">
144 |                       <img
145 |                         className="h-10 w-10 rounded-full"
146 |                         src={localStorageData.imageUrl}
147 |                         alt="profile"
148 |                       />
149 |                     </div>
150 |                     <div className="ml-3">
151 |                       <div className="text-base font-medium leading-none text-white">
152 |                         {localStorageData.firstName +
153 |                           " " +
154 |                           localStorageData.lastName}
155 |                       </div>
156 |                       <div className="text-sm font-medium leading-none text-gray-400">
157 |                         {localStorageData.email}
158 |                       </div>
159 |                     </div>
160 |                     <button
161 |                       type="button"
162 |                       className="ml-auto flex-shrink-0 rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"
163 |                     >
164 |                       <span className="sr-only">View notifications</span>
165 |                       <BellIcon className="h-6 w-6" aria-hidden="true" />
166 |                     </button>
167 |                   </div>
168 |                   <div className="mt-3 space-y-1 px-2">
169 |                     {userNavigation.map((item) => (
170 |                       <Disclosure.Button
171 |                         key={item.name}
172 |                         as="a"
173 |                         href={item.href}
174 |                         className="block rounded-md px-3 py-2 text-base font-medium text-gray-400 hover:bg-gray-700 hover:text-white"
175 |                       >
176 |                         <span onClick={() => authContext.signout()}>
177 |                           {item.name}{" "}
178 |                         </span>
179 |                       </Disclosure.Button>
180 |                     ))}
181 |                   </div>
182 |                 </div>
183 |               </Disclosure.Panel>
184 |             </>
185 |           )}
186 |         </Disclosure>
187 |       </div>
188 |     </>
189 |   );
190 | }
191 | 


--------------------------------------------------------------------------------
/Frontend/src/components/Layout.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Outlet } from "react-router-dom";
 3 | import Header from "./Header";
 4 | import SideMenu from "./SideMenu";
 5 | 
 6 | function Layout() {
 7 |   return (
 8 |     <>
 9 |       <div className="md:h-16">
10 |         <Header />
11 |       </div>
12 |       <div className="grid grid-cols-12 bg-gray-100 items-baseline">
13 |         <div className="col-span-2 h-screen sticky top-0 hidden lg:flex">
14 |           <SideMenu />
15 |         </div>
16 |         <Outlet />
17 |       </div>
18 |     </>
19 |   );
20 | }
21 | 
22 | export default Layout;
23 | 


--------------------------------------------------------------------------------
/Frontend/src/components/SideMenu.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Link } from "react-router-dom";
 3 | 
 4 | function SideMenu() {
 5 |   const localStorageData = JSON.parse(localStorage.getItem("user"));
 6 | 
 7 |   return (
 8 |     <div className="h-full flex-col justify-between  bg-white hidden lg:flex ">
 9 |       <div className="px-4 py-6">
10 |         <nav aria-label="Main Nav" className="mt-6 flex flex-col space-y-1">
11 |           <Link
12 |             to="/"
13 |             className="flex items-center gap-2 rounded-lg hover:bg-gray-100 px-4 py-2 text-gray-700"
14 |           >
15 |             <img
16 |               alt="dashboard-icon"
17 |               src={require("../assets/dashboard-icon.png")}
18 |             />
19 |             <span className="text-sm font-medium"> Dashboard </span>
20 |           </Link>
21 | 
22 |           <details className="group [&_summary::-webkit-details-marker]:hidden">
23 |             <summary className="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700">
24 |               <Link to="/inventory">
25 |                 <div className="flex items-center gap-2">
26 |                   <img
27 |                     alt="inventory-icon"
28 |                     src={require("../assets/inventory-icon.png")}
29 |                   />
30 |                   <span className="text-sm font-medium"> Inventory </span>
31 |                 </div>
32 |               </Link>
33 |             </summary>
34 |           </details>
35 | 
36 |           <Link
37 |             to="/purchase-details"
38 |             className="flex items-center gap-2 rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
39 |           >
40 |             <img
41 |               alt="purchase-icon"
42 |               src={require("../assets/supplier-icon.png")}
43 |             />
44 |             <span className="text-sm font-medium"> Purchase Details</span>
45 |           </Link>
46 |           <Link
47 |             to="/sales"
48 |             className="flex items-center gap-2 rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
49 |           >
50 |             <img alt="sale-icon" src={require("../assets/supplier-icon.png")} />
51 |             <span className="text-sm font-medium"> Sales</span>
52 |           </Link>
53 | 
54 |           <details className="group [&_summary::-webkit-details-marker]:hidden">
55 |             <summary className="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700">
56 |               <Link to="/manage-store">
57 |                 <div className="flex items-center gap-2">
58 |                   <img
59 |                     alt="store-icon"
60 |                     src={require("../assets/order-icon.png")}
61 |                   />
62 |                   <span className="text-sm font-medium"> Manage Store </span>
63 |                 </div>
64 |               </Link>
65 |             </summary>
66 |           </details>
67 |         </nav>
68 |       </div>
69 | 
70 |       <div className="sticky inset-x-0 bottom-0 border-t border-gray-100">
71 |         <div className="flex items-center gap-2 bg-white p-4 hover:bg-gray-50">
72 |           <img
73 |             alt="Profile"
74 |             src={localStorageData.imageUrl}
75 |             className="h-10 w-10 rounded-full object-cover"
76 |           />
77 | 
78 |           <div>
79 |             <p className="text-xs">
80 |               <strong className="block font-medium">
81 |                 {localStorageData.firstName + " " + localStorageData.lastName}
82 |               </strong>
83 | 
84 |               <span> {localStorageData.email} </span>
85 |             </p>
86 |           </div>
87 |         </div>
88 |       </div>
89 |     </div>
90 |   );
91 | }
92 | 
93 | export default SideMenu;
94 | 


--------------------------------------------------------------------------------
/Frontend/src/components/UpdateProduct.js:
--------------------------------------------------------------------------------
  1 | import { Fragment, useRef, useState } from "react";
  2 | import { Dialog, Transition } from "@headlessui/react";
  3 | import { PlusIcon } from "@heroicons/react/24/outline";
  4 | 
  5 | export default function UpdateProduct({
  6 |   updateProductData,
  7 |   updateModalSetting,
  8 | }) {
  9 |   const { _id, name, manufacturer, description } = updateProductData;
 10 |   const [product, setProduct] = useState({
 11 |     productID: _id,
 12 |     name: name,
 13 |     manufacturer: manufacturer,
 14 |     description: description,
 15 |   });
 16 |   const [open, setOpen] = useState(true);
 17 |   const cancelButtonRef = useRef(null);
 18 | 
 19 |   const handleInputChange = (key, value) => {
 20 |     console.log(key);
 21 |     setProduct({ ...product, [key]: value });
 22 |   };
 23 | 
 24 |   const updateProduct = () => {
 25 |     fetch("http://localhost:4000/api/product/update", {
 26 |       method: "POST",
 27 |       headers: {
 28 |         "Content-type": "application/json",
 29 |       },
 30 |       body: JSON.stringify(product),
 31 |     })
 32 |       .then((result) => {
 33 |         alert("Product Updated");
 34 |         setOpen(false);
 35 |       })
 36 |       .catch((err) => console.log(err));
 37 |   };
 38 | 
 39 |   return (
 40 |     // Modal
 41 |     <Transition.Root show={open} as={Fragment}>
 42 |       <Dialog
 43 |         as="div"
 44 |         className="relative z-10"
 45 |         initialFocus={cancelButtonRef}
 46 |         onClose={setOpen}
 47 |       >
 48 |         <Transition.Child
 49 |           as={Fragment}
 50 |           enter="ease-out duration-300"
 51 |           enterFrom="opacity-0"
 52 |           enterTo="opacity-100"
 53 |           leave="ease-in duration-200"
 54 |           leaveFrom="opacity-100"
 55 |           leaveTo="opacity-0"
 56 |         >
 57 |           <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
 58 |         </Transition.Child>
 59 | 
 60 |         <div className="fixed inset-0 z-10 overflow-y-auto">
 61 |           <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
 62 |             <Transition.Child
 63 |               as={Fragment}
 64 |               enter="ease-out duration-300"
 65 |               enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
 66 |               enterTo="opacity-100 translate-y-0 sm:scale-100"
 67 |               leave="ease-in duration-200"
 68 |               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
 69 |               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
 70 |             >
 71 |               <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
 72 |                 <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
 73 |                   <div className="sm:flex sm:items-start">
 74 |                     <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
 75 |                       <PlusIcon
 76 |                         className="h-6 w-6 text-blue-400"
 77 |                         aria-hidden="true"
 78 |                       />
 79 |                     </div>
 80 |                     <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left ">
 81 |                       <Dialog.Title
 82 |                         as="h3"
 83 |                         className="text-lg font-semibold leading-6 text-gray-900 "
 84 |                       >
 85 |                         Update Product
 86 |                       </Dialog.Title>
 87 |                       <form action="#">
 88 |                         <div className="grid gap-4 mb-4 sm:grid-cols-2">
 89 |                           <div>
 90 |                             <label
 91 |                               htmlFor="name"
 92 |                               className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
 93 |                             >
 94 |                               Name
 95 |                             </label>
 96 |                             <input
 97 |                               type="text"
 98 |                               name="name"
 99 |                               id="name"
100 |                               value={product.name}
101 |                               onChange={(e) =>
102 |                                 handleInputChange(e.target.name, e.target.value)
103 |                               }
104 |                               className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
105 |                               placeholder="Ex. Apple iMac 27&ldquo;"
106 |                             />
107 |                           </div>
108 |                           <div>
109 |                             <label
110 |                               htmlFor="manufacturer"
111 |                               className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
112 |                             >
113 |                               Manufacturer
114 |                             </label>
115 |                             <input
116 |                               type="text"
117 |                               name="manufacturer"
118 |                               id="manufacturer"
119 |                               value={product.manufacturer}
120 |                               onChange={(e) =>
121 |                                 handleInputChange(e.target.name, e.target.value)
122 |                               }
123 |                               className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
124 |                               placeholder="Ex. Apple"
125 |                             />
126 |                           </div>
127 |                           <div className="sm:col-span-2">
128 |                             <label
129 |                               htmlFor="description"
130 |                               className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
131 |                             >
132 |                               Description
133 |                             </label>
134 |                             <textarea
135 |                               id="description"
136 |                               rows="5"
137 |                               name="description"
138 |                               className="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
139 |                               placeholder="Write a description..."
140 |                               value={product.description}
141 |                               onChange={(e) =>
142 |                                 handleInputChange(e.target.name, e.target.value)
143 |                               }
144 |                             >
145 |                               Standard glass, 3.8GHz 8-core 10th-generation
146 |                               Intel Core i7 processor, Turbo Boost up to 5.0GHz,
147 |                               16GB 2666MHz DDR4 memory, Radeon Pro 5500 XT with
148 |                               8GB of GDDR6 memory, 256GB SSD storage, Gigabit
149 |                               Ethernet, Magic Mouse 2, Magic Keyboard - US
150 |                             </textarea>
151 |                           </div>
152 |                         </div>
153 |                         <div className="flex items-center space-x-4">
154 |                           {/* <button
155 |                             type="submit"
156 |                             className="text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
157 |                           >
158 |                             Update product
159 |                           </button> */}
160 |                           {/* <button
161 |                             type="button"
162 |                             className="text-red-600 inline-flex items-center hover:text-white border border-red-600 hover:bg-red-600 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600 dark:focus:ring-red-900"
163 |                           >
164 |                             <svg
165 |                               className="mr-1 -ml-1 w-5 h-5"
166 |                               fill="currentColor"
167 |                               viewBox="0 0 20 20"
168 |                               xmlns="http://www.w3.org/2000/svg"
169 |                             >
170 |                               <path
171 |                                 fill-rule="evenodd"
172 |                                 d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
173 |                                 clip-rule="evenodd"
174 |                               ></path>
175 |                             </svg>
176 |                             Delete
177 |                           </button> */}
178 |                         </div>
179 |                       </form>
180 |                     </div>
181 |                   </div>
182 |                 </div>
183 |                 <div className="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
184 |                   <button
185 |                     type="button"
186 |                     className="inline-flex w-full justify-center rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 sm:ml-3 sm:w-auto"
187 |                     onClick={updateProduct}
188 |                   >
189 |                     Update Product
190 |                   </button>
191 |                   <button
192 |                     type="button"
193 |                     className="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
194 |                     onClick={() => updateModalSetting()}
195 |                     ref={cancelButtonRef}
196 |                   >
197 |                     Cancel
198 |                   </button>
199 |                 </div>
200 |               </Dialog.Panel>
201 |             </Transition.Child>
202 |           </div>
203 |         </div>
204 |       </Dialog>
205 |     </Transition.Root>
206 |   );
207 | }
208 | 


--------------------------------------------------------------------------------
/Frontend/src/components/UploadImage.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | 
 3 | function UploadImage({ uploadImage }) {
 4 |   const [fileName, setFileName] = useState("");
 5 | 
 6 |   const handleFileInputChange = (event) => {
 7 |     setFileName(event.target.files[0]);
 8 |     uploadImage(event.target.files[0]);
 9 |   };
10 | 
11 |   return (
12 |     <div>
13 |       <label
14 |         htmlFor="fileInput"
15 |         className="inline-block rounded-md shadow-sm py-2 px-4 bg-gray-100 text-gray-700 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
16 |       >
17 |         <svg
18 |           className="w-6 h-6 inline-block mr-2"
19 |           viewBox="0 0 24 24"
20 |           fill="none"
21 |           xmlns="http://www.w3.org/2000/svg"
22 |         >
23 |           <path
24 |             d="M3 16V21H21V16H3ZM5 18H19V16H5V18ZM3 6H21V14H3V6ZM5 10H19V8H5V10Z"
25 |             fill="currentColor"
26 |           />
27 |         </svg>
28 |         <span className="inline-block">
29 |           {" "}
30 |           {fileName?.name ? fileName.name : "Choose file"}
31 |         </span>
32 |       </label>
33 |       <input
34 |         type="file"
35 |         id="fileInput"
36 |         className="hidden"
37 |         accept=".png, .jpeg, .jpg"
38 |         required
39 |         onChange={handleFileInputChange}
40 |       />
41 |     </div>
42 |   );
43 | }
44 | 
45 | export default UploadImage;
46 | 


--------------------------------------------------------------------------------
/Frontend/src/index.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | 
 6 | body {
 7 |   margin: 0;
 8 |   padding: 0;
 9 |   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
10 |     "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
11 |     sans-serif;
12 |   -webkit-font-smoothing: antialiased;
13 |   -moz-osx-font-smoothing: grayscale;
14 | }
15 | 
16 | code {
17 |   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
18 |     monospace;
19 | }
20 | 


--------------------------------------------------------------------------------
/Frontend/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom/client';
 3 | import './index.css';
 4 | import App from './App';
 5 | import reportWebVitals from './reportWebVitals';
 6 | 
 7 | const root = ReactDOM.createRoot(document.getElementById('root'));
 8 | root.render(
 9 |   <React.StrictMode>
10 |     <App />
11 |   </React.StrictMode>
12 | );
13 | 
14 | // If you want to start measuring performance in your app, pass a function
15 | // to log results (for example: reportWebVitals(console.log))
16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
17 | reportWebVitals();
18 | 


--------------------------------------------------------------------------------
/Frontend/src/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>


--------------------------------------------------------------------------------
/Frontend/src/pages/Dashboard.js:
--------------------------------------------------------------------------------
  1 | import React, { useContext, useEffect, useState } from "react";
  2 | import Chart from "react-apexcharts";
  3 | import AuthContext from "../AuthContext";
  4 | import { Doughnut } from "react-chartjs-2";
  5 | import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
  6 | 
  7 | ChartJS.register(ArcElement, Tooltip, Legend);
  8 | export const data = {
  9 |   labels: ["Apple", "Knorr", "Shoop", "Green", "Purple", "Orange"],
 10 |   datasets: [
 11 |     {
 12 |       label: "# of Votes",
 13 |       data: [0, 1, 5, 8, 9, 15],
 14 |       backgroundColor: [
 15 |         "rgba(255, 99, 132, 0.2)",
 16 |         "rgba(54, 162, 235, 0.2)",
 17 |         "rgba(255, 206, 86, 0.2)",
 18 |         "rgba(75, 192, 192, 0.2)",
 19 |         "rgba(153, 102, 255, 0.2)",
 20 |         "rgba(255, 159, 64, 0.2)",
 21 |       ],
 22 |       borderColor: [
 23 |         "rgba(255, 99, 132, 1)",
 24 |         "rgba(54, 162, 235, 1)",
 25 |         "rgba(255, 206, 86, 1)",
 26 |         "rgba(75, 192, 192, 1)",
 27 |         "rgba(153, 102, 255, 1)",
 28 |         "rgba(255, 159, 64, 1)",
 29 |       ],
 30 |       borderWidth: 1,
 31 |     },
 32 |   ],
 33 | };
 34 | 
 35 | function Dashboard() {
 36 |   const [saleAmount, setSaleAmount] = useState("");
 37 |   const [purchaseAmount, setPurchaseAmount] = useState("");
 38 |   const [stores, setStores] = useState([]);
 39 |   const [products, setProducts] = useState([]);
 40 | 
 41 |   const [chart, setChart] = useState({
 42 |     options: {
 43 |       chart: {
 44 |         id: "basic-bar",
 45 |       },
 46 |       xaxis: {
 47 |         categories: [
 48 |           "Jan",
 49 |           "Feb",
 50 |           "Mar",
 51 |           "Apr",
 52 |           "May",
 53 |           "Jun",
 54 |           "Jul",
 55 |           "Aug",
 56 |           "Sep",
 57 |           "Oct",
 58 |           "Nov",
 59 |           "Dec",
 60 |         ],
 61 |       },
 62 |     },
 63 |     series: [
 64 |       {
 65 |         name: "series",
 66 |         data: [10, 20, 40, 50, 60, 20, 10, 35, 45, 70, 25, 70],
 67 |       },
 68 |     ],
 69 |   });
 70 | 
 71 |   // Update Chart Data
 72 |   const updateChartData = (salesData) => {
 73 |     setChart({
 74 |       ...chart,
 75 |       series: [
 76 |         {
 77 |           name: "Monthly Sales Amount",
 78 |           data: [...salesData],
 79 |         },
 80 |       ],
 81 |     });
 82 |   };
 83 | 
 84 |   const authContext = useContext(AuthContext);
 85 | 
 86 |   useEffect(() => {
 87 |     fetchTotalSaleAmount();
 88 |     fetchTotalPurchaseAmount();
 89 |     fetchStoresData();
 90 |     fetchProductsData();
 91 |     fetchMonthlySalesData();
 92 |   }, []);
 93 | 
 94 |   // Fetching total sales amount
 95 |   const fetchTotalSaleAmount = () => {
 96 |     fetch(
 97 |       `http://localhost:4000/api/sales/get/${authContext.user}/totalsaleamount`
 98 |     )
 99 |       .then((response) => response.json())
100 |       .then((datas) => setSaleAmount(datas.totalSaleAmount));
101 |   };
102 | 
103 |   // Fetching total purchase amount
104 |   const fetchTotalPurchaseAmount = () => {
105 |     fetch(
106 |       `http://localhost:4000/api/purchase/get/${authContext.user}/totalpurchaseamount`
107 |     )
108 |       .then((response) => response.json())
109 |       .then((datas) => setPurchaseAmount(datas.totalPurchaseAmount));
110 |   };
111 | 
112 |   // Fetching all stores data
113 |   const fetchStoresData = () => {
114 |     fetch(`http://localhost:4000/api/store/get/${authContext.user}`)
115 |       .then((response) => response.json())
116 |       .then((datas) => setStores(datas));
117 |   };
118 | 
119 |   // Fetching Data of All Products
120 |   const fetchProductsData = () => {
121 |     fetch(`http://localhost:4000/api/product/get/${authContext.user}`)
122 |       .then((response) => response.json())
123 |       .then((datas) => setProducts(datas))
124 |       .catch((err) => console.log(err));
125 |   };
126 | 
127 |   // Fetching Monthly Sales
128 |   const fetchMonthlySalesData = () => {
129 |     fetch(`http://localhost:4000/api/sales/getmonthly`)
130 |       .then((response) => response.json())
131 |       .then((datas) => updateChartData(datas.salesAmount))
132 |       .catch((err) => console.log(err));
133 |   };
134 | 
135 |   return (
136 |     <>
137 |       <div className="grid grid-cols-1 col-span-12 lg:col-span-10 gap-6 md:grid-cols-3 lg:grid-cols-4  p-4 ">
138 |         <article className="flex flex-col gap-4 rounded-lg border  border-gray-100 bg-white p-6  ">
139 |           <div className="inline-flex gap-2 self-end rounded bg-green-100 p-1 text-green-600">
140 |             <svg
141 |               xmlns="http://www.w3.org/2000/svg"
142 |               className="h-4 w-4"
143 |               fill="none"
144 |               viewBox="0 0 24 24"
145 |               stroke="currentColor"
146 |             >
147 |               <path
148 |                 strokeLinecap="round"
149 |                 strokeLinejoin="round"
150 |                 strokeWidth="2"
151 |                 d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"
152 |               />
153 |             </svg>
154 | 
155 |             <span className="text-xs font-medium"> 67.81% </span>
156 |           </div>
157 | 
158 |           <div>
159 |             <strong className="block text-sm font-medium text-gray-500">
160 |               Sales
161 |             </strong>
162 | 
163 |             <p>
164 |               <span className="text-2xl font-medium text-gray-900">
165 |                 ${saleAmount}
166 |               </span>
167 | 
168 |               <span className="text-xs text-gray-500"> from $240.94 </span>
169 |             </p>
170 |           </div>
171 |         </article>
172 | 
173 |         <article className="flex flex-col  gap-4 rounded-lg border border-gray-100 bg-white p-6 ">
174 |           <div className="inline-flex gap-2 self-end rounded bg-red-100 p-1 text-red-600">
175 |             <svg
176 |               xmlns="http://www.w3.org/2000/svg"
177 |               className="h-4 w-4"
178 |               fill="none"
179 |               viewBox="0 0 24 24"
180 |               stroke="currentColor"
181 |             >
182 |               <path
183 |                 strokeLinecap="round"
184 |                 strokeLinejoin="round"
185 |                 strokeWidth="2"
186 |                 d="M13 17h8m0 0V9m0 8l-8-8-4 4-6-6"
187 |               />
188 |             </svg>
189 | 
190 |             <span className="text-xs font-medium"> 67.81% </span>
191 |           </div>
192 | 
193 |           <div>
194 |             <strong className="block text-sm font-medium text-gray-500">
195 |               Purchase
196 |             </strong>
197 | 
198 |             <p>
199 |               <span className="text-2xl font-medium text-gray-900">
200 |                 {" "}
201 |                 ${purchaseAmount}{" "}
202 |               </span>
203 | 
204 |               <span className="text-xs text-gray-500"> from $404.32 </span>
205 |             </p>
206 |           </div>
207 |         </article>
208 |         <article className="flex flex-col   gap-4 rounded-lg border border-gray-100 bg-white p-6 ">
209 |           <div className="inline-flex gap-2 self-end rounded bg-red-100 p-1 text-red-600">
210 |             <svg
211 |               xmlns="http://www.w3.org/2000/svg"
212 |               className="h-4 w-4"
213 |               fill="none"
214 |               viewBox="0 0 24 24"
215 |               stroke="currentColor"
216 |             >
217 |               <path
218 |                 strokeLinecap="round"
219 |                 strokeLinejoin="round"
220 |                 strokeWidth="2"
221 |                 d="M13 17h8m0 0V9m0 8l-8-8-4 4-6-6"
222 |               />
223 |             </svg>
224 | 
225 |             <span className="text-xs font-medium"> 67.81% </span>
226 |           </div>
227 | 
228 |           <div>
229 |             <strong className="block text-sm font-medium text-gray-500">
230 |               Total Products
231 |             </strong>
232 | 
233 |             <p>
234 |               <span className="text-2xl font-medium text-gray-900">
235 |                 {" "}
236 |                 {products.length}{" "}
237 |               </span>
238 | 
239 |               {/* <span className="text-xs text-gray-500"> from $404.32 </span> */}
240 |             </p>
241 |           </div>
242 |         </article>
243 |         <article className="flex flex-col   gap-4 rounded-lg border border-gray-100 bg-white p-6 ">
244 |           <div className="inline-flex gap-2 self-end rounded bg-red-100 p-1 text-red-600">
245 |             <svg
246 |               xmlns="http://www.w3.org/2000/svg"
247 |               className="h-4 w-4"
248 |               fill="none"
249 |               viewBox="0 0 24 24"
250 |               stroke="currentColor"
251 |             >
252 |               <path
253 |                 strokeLinecap="round"
254 |                 strokeLinejoin="round"
255 |                 strokeWidth="2"
256 |                 d="M13 17h8m0 0V9m0 8l-8-8-4 4-6-6"
257 |               />
258 |             </svg>
259 | 
260 |             <span className="text-xs font-medium"> 67.81% </span>
261 |           </div>
262 | 
263 |           <div>
264 |             <strong className="block text-sm font-medium text-gray-500">
265 |               Total Stores
266 |             </strong>
267 | 
268 |             <p>
269 |               <span className="text-2xl font-medium text-gray-900">
270 |                 {" "}
271 |                 {stores.length}{" "}
272 |               </span>
273 | 
274 |               {/* <span className="text-xs text-gray-500"> from 0 </span> */}
275 |             </p>
276 |           </div>
277 |         </article>
278 |         <div className="flex justify-around bg-white rounded-lg py-8 col-span-full justify-center">
279 |           <div>
280 |             <Chart
281 |               options={chart.options}
282 |               series={chart.series}
283 |               type="bar"
284 |               width="500"
285 |             />
286 |           </div>
287 |           <div>
288 |             <Doughnut data={data} />
289 |           </div>
290 |         </div>
291 |       </div>
292 |     </>
293 |   );
294 | }
295 | 
296 | export default Dashboard;
297 | 


--------------------------------------------------------------------------------
/Frontend/src/pages/Inventory.js:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect, useContext } from "react";
  2 | import AddProduct from "../components/AddProduct";
  3 | import UpdateProduct from "../components/UpdateProduct";
  4 | import AuthContext from "../AuthContext";
  5 | 
  6 | function Inventory() {
  7 |   const [showProductModal, setShowProductModal] = useState(false);
  8 |   const [showUpdateModal, setShowUpdateModal] = useState(false);
  9 |   const [updateProduct, setUpdateProduct] = useState([]);
 10 |   const [products, setAllProducts] = useState([]);
 11 |   const [searchTerm, setSearchTerm] = useState();
 12 |   const [updatePage, setUpdatePage] = useState(true);
 13 |   const [stores, setAllStores] = useState([]);
 14 | 
 15 |   const authContext = useContext(AuthContext);
 16 |   console.log('====================================');
 17 |   console.log(authContext);
 18 |   console.log('====================================');
 19 | 
 20 |   useEffect(() => {
 21 |     fetchProductsData();
 22 |     fetchSalesData();
 23 |   }, [updatePage]);
 24 | 
 25 |   // Fetching Data of All Products
 26 |   const fetchProductsData = () => {
 27 |     fetch(`http://localhost:4000/api/product/get/${authContext.user}`)
 28 |       .then((response) => response.json())
 29 |       .then((data) => {
 30 |         setAllProducts(data);
 31 |       })
 32 |       .catch((err) => console.log(err));
 33 |   };
 34 | 
 35 |   // Fetching Data of Search Products
 36 |   const fetchSearchData = () => {
 37 |     fetch(`http://localhost:4000/api/product/search?searchTerm=${searchTerm}`)
 38 |       .then((response) => response.json())
 39 |       .then((data) => {
 40 |         setAllProducts(data);
 41 |       })
 42 |       .catch((err) => console.log(err));
 43 |   };
 44 | 
 45 |   // Fetching all stores data
 46 |   const fetchSalesData = () => {
 47 |     fetch(`http://localhost:4000/api/store/get/${authContext.user}`)
 48 |       .then((response) => response.json())
 49 |       .then((data) => {
 50 |         setAllStores(data);
 51 |       });
 52 |   };
 53 | 
 54 |   // Modal for Product ADD
 55 |   const addProductModalSetting = () => {
 56 |     setShowProductModal(!showProductModal);
 57 |   };
 58 | 
 59 |   // Modal for Product UPDATE
 60 |   const updateProductModalSetting = (selectedProductData) => {
 61 |     console.log("Clicked: edit");
 62 |     setUpdateProduct(selectedProductData);
 63 |     setShowUpdateModal(!showUpdateModal);
 64 |   };
 65 | 
 66 | 
 67 |   // Delete item
 68 |   const deleteItem = (id) => {
 69 |     console.log("Product ID: ", id);
 70 |     console.log(`http://localhost:4000/api/product/delete/${id}`);
 71 |     fetch(`http://localhost:4000/api/product/delete/${id}`)
 72 |       .then((response) => response.json())
 73 |       .then((data) => {
 74 |         setUpdatePage(!updatePage);
 75 |       });
 76 |   };
 77 | 
 78 |   // Handle Page Update
 79 |   const handlePageUpdate = () => {
 80 |     setUpdatePage(!updatePage);
 81 |   };
 82 | 
 83 |   // Handle Search Term
 84 |   const handleSearchTerm = (e) => {
 85 |     setSearchTerm(e.target.value);
 86 |     fetchSearchData();
 87 |   };
 88 | 
 89 |   return (
 90 |     <div className="col-span-12 lg:col-span-10  flex justify-center">
 91 |       <div className=" flex flex-col gap-5 w-11/12">
 92 |         <div className="bg-white rounded p-3">
 93 |           <span className="font-semibold px-4">Overall Inventory</span>
 94 |           <div className=" flex flex-col md:flex-row justify-center items-center  ">
 95 |             <div className="flex flex-col p-10  w-full  md:w-3/12  ">
 96 |               <span className="font-semibold text-blue-600 text-base">
 97 |                 Total Products
 98 |               </span>
 99 |               <span className="font-semibold text-gray-600 text-base">
100 |                 {products.length}
101 |               </span>
102 |               <span className="font-thin text-gray-400 text-xs">
103 |                 Last 7 days
104 |               </span>
105 |             </div>
106 |             <div className="flex flex-col gap-3 p-10   w-full  md:w-3/12 sm:border-y-2  md:border-x-2 md:border-y-0">
107 |               <span className="font-semibold text-yellow-600 text-base">
108 |                 Stores
109 |               </span>
110 |               <div className="flex gap-8">
111 |                 <div className="flex flex-col">
112 |                   <span className="font-semibold text-gray-600 text-base">
113 |                     {stores.length}
114 |                   </span>
115 |                   <span className="font-thin text-gray-400 text-xs">
116 |                     Last 7 days
117 |                   </span>
118 |                 </div>
119 |                 <div className="flex flex-col">
120 |                   <span className="font-semibold text-gray-600 text-base">
121 |                     $2000
122 |                   </span>
123 |                   <span className="font-thin text-gray-400 text-xs">
124 |                     Revenue
125 |                   </span>
126 |                 </div>
127 |               </div>
128 |             </div>
129 |             <div className="flex flex-col gap-3 p-10  w-full  md:w-3/12  sm:border-y-2 md:border-x-2 md:border-y-0">
130 |               <span className="font-semibold text-purple-600 text-base">
131 |                 Top Selling
132 |               </span>
133 |               <div className="flex gap-8">
134 |                 <div className="flex flex-col">
135 |                   <span className="font-semibold text-gray-600 text-base">
136 |                     5
137 |                   </span>
138 |                   <span className="font-thin text-gray-400 text-xs">
139 |                     Last 7 days
140 |                   </span>
141 |                 </div>
142 |                 <div className="flex flex-col">
143 |                   <span className="font-semibold text-gray-600 text-base">
144 |                     $1500
145 |                   </span>
146 |                   <span className="font-thin text-gray-400 text-xs">Cost</span>
147 |                 </div>
148 |               </div>
149 |             </div>
150 |             <div className="flex flex-col gap-3 p-10  w-full  md:w-3/12  border-y-2  md:border-x-2 md:border-y-0">
151 |               <span className="font-semibold text-red-600 text-base">
152 |                 Low Stocks
153 |               </span>
154 |               <div className="flex gap-8">
155 |                 <div className="flex flex-col">
156 |                   <span className="font-semibold text-gray-600 text-base">
157 |                     12
158 |                   </span>
159 |                   <span className="font-thin text-gray-400 text-xs">
160 |                     Ordered
161 |                   </span>
162 |                 </div>
163 |                 <div className="flex flex-col">
164 |                   <span className="font-semibold text-gray-600 text-base">
165 |                     2
166 |                   </span>
167 |                   <span className="font-thin text-gray-400 text-xs">
168 |                     Not in Stock
169 |                   </span>
170 |                 </div>
171 |               </div>
172 |             </div>
173 |           </div>
174 |         </div>
175 | 
176 |         {showProductModal && (
177 |           <AddProduct
178 |             addProductModalSetting={addProductModalSetting}
179 |             handlePageUpdate={handlePageUpdate}
180 |           />
181 |         )}
182 |         {showUpdateModal && (
183 |           <UpdateProduct
184 |             updateProductData={updateProduct}
185 |             updateModalSetting={updateProductModalSetting}
186 |           />
187 |         )}
188 | 
189 |         {/* Table  */}
190 |         <div className="overflow-x-auto rounded-lg border bg-white border-gray-200 ">
191 |           <div className="flex justify-between pt-5 pb-3 px-3">
192 |             <div className="flex gap-4 justify-center items-center ">
193 |               <span className="font-bold">Products</span>
194 |               <div className="flex justify-center items-center px-2 border-2 rounded-md ">
195 |                 <img
196 |                   alt="search-icon"
197 |                   className="w-5 h-5"
198 |                   src={require("../assets/search-icon.png")}
199 |                 />
200 |                 <input
201 |                   className="border-none outline-none focus:border-none text-xs"
202 |                   type="text"
203 |                   placeholder="Search here"
204 |                   value={searchTerm}
205 |                   onChange={handleSearchTerm}
206 |                 />
207 |               </div>
208 |             </div>
209 |             <div className="flex gap-4">
210 |               <button
211 |                 className="bg-blue-500 hover:bg-blue-700 text-white font-bold p-2 text-xs  rounded"
212 |                 onClick={addProductModalSetting}
213 |               >
214 |                 {/* <Link to="/inventory/add-product">Add Product</Link> */}
215 |                 Add Product
216 |               </button>
217 |             </div>
218 |           </div>
219 |           <table className="min-w-full divide-y-2 divide-gray-200 text-sm">
220 |             <thead>
221 |               <tr>
222 |                 <th className="whitespace-nowrap px-4 py-2 text-left font-medium text-gray-900">
223 |                   Products
224 |                 </th>
225 |                 <th className="whitespace-nowrap px-4 py-2 text-left font-medium text-gray-900">
226 |                   Manufacturer
227 |                 </th>
228 |                 <th className="whitespace-nowrap px-4 py-2 text-left font-medium text-gray-900">
229 |                   Stock
230 |                 </th>
231 |                 <th className="whitespace-nowrap px-4 py-2 text-left font-medium text-gray-900">
232 |                   Description
233 |                 </th>
234 |                 <th className="whitespace-nowrap px-4 py-2 text-left font-medium text-gray-900">
235 |                   Availibility
236 |                 </th>
237 |                 <th className="whitespace-nowrap px-4 py-2 text-left font-medium text-gray-900">
238 |                   More
239 |                 </th>
240 |               </tr>
241 |             </thead>
242 | 
243 |             <tbody className="divide-y divide-gray-200">
244 |               {products.map((element, index) => {
245 |                 return (
246 |                   <tr key={element._id}>
247 |                     <td className="whitespace-nowrap px-4 py-2  text-gray-900">
248 |                       {element.name}
249 |                     </td>
250 |                     <td className="whitespace-nowrap px-4 py-2 text-gray-700">
251 |                       {element.manufacturer}
252 |                     </td>
253 |                     <td className="whitespace-nowrap px-4 py-2 text-gray-700">
254 |                       {element.stock}
255 |                     </td>
256 |                     <td className="whitespace-nowrap px-4 py-2 text-gray-700">
257 |                       {element.description}
258 |                     </td>
259 |                     <td className="whitespace-nowrap px-4 py-2 text-gray-700">
260 |                       {element.stock > 0 ? "In Stock" : "Not in Stock"}
261 |                     </td>
262 |                     <td className="whitespace-nowrap px-4 py-2 text-gray-700">
263 |                       <span
264 |                         className="text-green-700 cursor-pointer"
265 |                         onClick={() => updateProductModalSetting(element)}
266 |                       >
267 |                         Edit{" "}
268 |                       </span>
269 |                       <span
270 |                         className="text-red-600 px-2 cursor-pointer"
271 |                         onClick={() => deleteItem(element._id)}
272 |                       >
273 |                         Delete
274 |                       </span>
275 |                     </td>
276 |                   </tr>
277 |                 );
278 |               })}
279 |             </tbody>
280 |           </table>
281 |         </div>
282 |       </div>
283 |     </div>
284 |   );
285 | }
286 | 
287 | export default Inventory;
288 | 


--------------------------------------------------------------------------------
/Frontend/src/pages/Login.js:
--------------------------------------------------------------------------------
  1 | // import { LockClosedIcon } from "@heroicons/react/20/solid";
  2 | import { useContext, useState } from "react";
  3 | import { Link, useNavigate } from "react-router-dom";
  4 | import AuthContext from "../AuthContext";
  5 | 
  6 | function Login() {
  7 |   const [form, setForm] = useState({
  8 |     email: "",
  9 |     password: "",
 10 |   });
 11 | 
 12 |   const authContext = useContext(AuthContext);
 13 |   const navigate = useNavigate();
 14 | 
 15 | 
 16 |   const handleInputChange = (e) => {
 17 |     setForm({ ...form, [e.target.name]: e.target.value });
 18 |   };
 19 | 
 20 |   const authCheck = () => {
 21 |     setTimeout(() => {
 22 |       fetch("http://localhost:4000/api/login")
 23 |         .then((response) => response.json())
 24 |         .then((data) => {
 25 |           alert("Successfully Login");
 26 |           localStorage.setItem("user", JSON.stringify(data));
 27 |           authContext.signin(data._id, () => {
 28 |             navigate("/");
 29 |           });
 30 |         })
 31 |         .catch((err) => {
 32 |           alert("Wrong credentials, Try again")
 33 |           console.log(err);
 34 |         });
 35 |     }, 3000);
 36 |   };
 37 | 
 38 |   const loginUser = (e) => {
 39 |     // Cannot send empty data
 40 |     if (form.email === "" || form.password === "") {
 41 |       alert("To login user, enter details to proceed...");
 42 |     } else {
 43 |       fetch("http://localhost:4000/api/login", {
 44 |         method: "POST",
 45 |         headers: {
 46 |           "Content-type": "application/json",
 47 |         },
 48 |         body: JSON.stringify(form),
 49 |       })
 50 |         .then((result) => {
 51 |           console.log("User login", result);
 52 |         })
 53 |         .catch((error) => {
 54 |           console.log("Something went wrong ", error);
 55 |         });
 56 |     }
 57 |     authCheck();
 58 |   };
 59 | 
 60 | 
 61 |   const handleSubmit = (e) => {
 62 |     e.preventDefault();
 63 |   };
 64 | 
 65 |   
 66 |   return (
 67 |     <>
 68 |       <div className="grid grid-cols-1 sm:grid-cols-2 h-screen  items-center place-items-center">
 69 |         <div className="flex justify-center">
 70 |           <img src={require("../assets/signup.jpg")} alt="" />
 71 |         </div>
 72 |         <div className="w-full max-w-md space-y-8 p-10 rounded-lg">
 73 |           <div>
 74 |             <img
 75 |               className="mx-auto h-12 w-auto"
 76 |               src={require("../assets/logo.png")}
 77 |               alt="Your Company"
 78 |             />
 79 |             <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">
 80 |               Signin to your account
 81 |             </h2>
 82 |             <p className="mt-2 text-center text-sm text-gray-600">
 83 |               Or
 84 |               <span
 85 |                 className="font-medium text-indigo-600 hover:text-indigo-500"
 86 |               >
 87 |                 start your 14-day free trial
 88 |               </span>
 89 |             </p>
 90 |           </div>
 91 |           <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
 92 |             {/* <input type="hidden" name="remember" defaultValue="true" /> */}
 93 |             <div className="-space-y-px rounded-md shadow-sm">
 94 |               <div>
 95 |                 <label htmlFor="email-address" className="sr-only">
 96 |                   Email address
 97 |                 </label>
 98 |                 <input
 99 |                   id="email-address"
100 |                   name="email"
101 |                   type="email"
102 |                   autoComplete="email"
103 |                   required
104 |                   className="relative block w-full rounded-t-md border-0 py-1.5 px-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
105 |                   placeholder="Email address"
106 |                   value={form.email}
107 |                   onChange={handleInputChange}
108 |                 />
109 |               </div>
110 |               <div>
111 |                 <label htmlFor="password" className="sr-only">
112 |                   Password
113 |                 </label>
114 |                 <input
115 |                   id="password"
116 |                   name="password"
117 |                   type="password"
118 |                   autoComplete="current-password"
119 |                   required
120 |                   className="relative block w-full rounded-b-md border-0 py-1.5 px-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
121 |                   placeholder="Password"
122 |                   value={form.password}
123 |                   onChange={handleInputChange}
124 |                 />
125 |               </div>
126 |             </div>
127 | 
128 |             <div className="flex items-center justify-between">
129 |               <div className="flex items-center">
130 |                 <input
131 |                   id="remember-me"
132 |                   name="remember-me"
133 |                   type="checkbox"
134 |                   className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"
135 |                 />
136 |                 <label
137 |                   htmlFor="remember-me"
138 |                   className="ml-2 block text-sm text-gray-900"
139 |                 >
140 |                   Remember me
141 |                 </label>
142 |               </div>
143 | 
144 |               <div className="text-sm">
145 |                 <span
146 |                   className="font-medium text-indigo-600 hover:text-indigo-500"
147 |                 >
148 |                   Forgot your password?
149 |                 </span>
150 |               </div>
151 |             </div>
152 | 
153 |             <div>
154 |               <button
155 |                 type="submit"
156 |                 className="group relative flex w-full justify-center rounded-md bg-indigo-600 py-2 px-3 text-sm font-semibold text-white hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
157 |                 onClick={loginUser}
158 |               >
159 |                 <span className="absolute inset-y-0 left-0 flex items-center pl-3">
160 |                   {/* <LockClosedIcon
161 |                     className="h-5 w-5 text-indigo-500 group-hover:text-indigo-400"
162 |                     aria-hidden="true"
163 |                   /> */}
164 |                 </span>
165 |                 Sign in
166 |               </button>
167 |               <p className="mt-2 text-center text-sm text-gray-600">
168 |                 Or{" "}
169 |                 <span
170 |                   className="font-medium text-indigo-600 hover:text-indigo-500"
171 |                 >
172 |                   Don't Have an Account, Please{" "}
173 |                   <Link to="/register"> Register now </Link>
174 |                 </span>
175 |               </p>
176 |             </div>
177 |           </form>
178 |         </div>
179 |       </div>
180 |     </>
181 |   );
182 | }
183 | 
184 | export default Login;
185 | 


--------------------------------------------------------------------------------
/Frontend/src/pages/PurchaseDetails.js:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect, useContext } from "react";
  2 | import AddPurchaseDetails from "../components/AddPurchaseDetails";
  3 | import AuthContext from "../AuthContext";
  4 | 
  5 | function PurchaseDetails() {
  6 |   const [showPurchaseModal, setPurchaseModal] = useState(false);
  7 |   const [purchase, setAllPurchaseData] = useState([]);
  8 |   const [products, setAllProducts] = useState([]);
  9 |   const [updatePage, setUpdatePage] = useState(true);
 10 | 
 11 |   const authContext = useContext(AuthContext);
 12 | 
 13 |   useEffect(() => {
 14 |     fetchPurchaseData();
 15 |     fetchProductsData();
 16 |   }, [updatePage]);
 17 | 
 18 |   // Fetching Data of All Purchase items
 19 |   const fetchPurchaseData = () => {
 20 |     fetch(`http://localhost:4000/api/purchase/get/${authContext.user}`)
 21 |       .then((response) => response.json())
 22 |       .then((data) => {
 23 |         setAllPurchaseData(data);
 24 |       })
 25 |       .catch((err) => console.log(err));
 26 |   };
 27 | 
 28 |   // Fetching Data of All Products
 29 |   const fetchProductsData = () => {
 30 |     fetch(`http://localhost:4000/api/product/get/${authContext.user}`)
 31 |       .then((response) => response.json())
 32 |       .then((data) => {
 33 |         setAllProducts(data);
 34 |       })
 35 |       .catch((err) => console.log(err));
 36 |   };
 37 | 
 38 |   // Modal for Sale Add
 39 |   const addSaleModalSetting = () => {
 40 |     setPurchaseModal(!showPurchaseModal);
 41 |   };
 42 | 
 43 |   
 44 |   // Handle Page Update
 45 |   const handlePageUpdate = () => {
 46 |     setUpdatePage(!updatePage);
 47 |   };
 48 | 
 49 |   return (
 50 |     <div className="col-span-12 lg:col-span-10  flex justify-center">
 51 |       <div className=" flex flex-col gap-5 w-11/12">
 52 |         {showPurchaseModal && (
 53 |           <AddPurchaseDetails
 54 |             addSaleModalSetting={addSaleModalSetting}
 55 |             products={products}
 56 |             handlePageUpdate={handlePageUpdate}
 57 |             authContext = {authContext}
 58 |           />
 59 |         )}
 60 |         {/* Table  */}
 61 |         <div className="overflow-x-auto rounded-lg border bg-white border-gray-200 ">
 62 |           <div className="flex justify-between pt-5 pb-3 px-3">
 63 |             <div className="flex gap-4 justify-center items-center ">
 64 |               <span className="font-bold">Purchase Details</span>
 65 |             </div>
 66 |             <div className="flex gap-4">
 67 |               <button
 68 |                 className="bg-blue-500 hover:bg-blue-700 text-white font-bold p-2 text-xs  rounded"
 69 |                 onClick={addSaleModalSetting}
 70 |               >
 71 |                 {/* <Link to="/inventory/add-product">Add Product</Link> */}
 72 |                 Add Purchase
 73 |               </button>
 74 |             </div>
 75 |           </div>
 76 |           <table className="min-w-full divide-y-2 divide-gray-200 text-sm">
 77 |             <thead>
 78 |               <tr>
 79 |                 <th className="whitespace-nowrap px-4 py-2 text-left font-medium text-gray-900">
 80 |                   Product Name
 81 |                 </th>
 82 |                 <th className="whitespace-nowrap px-4 py-2 text-left font-medium text-gray-900">
 83 |                   Quantity Purchased
 84 |                 </th>
 85 |                 <th className="whitespace-nowrap px-4 py-2 text-left font-medium text-gray-900">
 86 |                   Purchase Date
 87 |                 </th>
 88 |                 <th className="whitespace-nowrap px-4 py-2 text-left font-medium text-gray-900">
 89 |                   Total Purchase Amount
 90 |                 </th>
 91 |               </tr>
 92 |             </thead>
 93 | 
 94 |             <tbody className="divide-y divide-gray-200">
 95 |               {purchase.map((element, index) => {
 96 |                 return (
 97 |                   <tr key={element._id}>
 98 |                     <td className="whitespace-nowrap px-4 py-2  text-gray-900">
 99 |                       {element.ProductID?.name}
100 |                     </td>
101 |                     <td className="whitespace-nowrap px-4 py-2 text-gray-700">
102 |                       {element.QuantityPurchased}
103 |                     </td>
104 |                     <td className="whitespace-nowrap px-4 py-2 text-gray-700">
105 |                       {new Date(element.PurchaseDate).toLocaleDateString() ==
106 |                       new Date().toLocaleDateString()
107 |                         ? "Today"
108 |                         : element.PurchaseDate}
109 |                     </td>
110 |                     <td className="whitespace-nowrap px-4 py-2 text-gray-700">
111 |                       ${element.TotalPurchaseAmount}
112 |                     </td>
113 |                   </tr>
114 |                 );
115 |               })}
116 |             </tbody>
117 |           </table>
118 |         </div>
119 |       </div>
120 |     </div>
121 |   );
122 | }
123 | 
124 | export default PurchaseDetails;
125 | 


--------------------------------------------------------------------------------
/Frontend/src/pages/Register.js:
--------------------------------------------------------------------------------
  1 | import { useState } from "react";
  2 | import { Link, useNavigate } from "react-router-dom";
  3 | import UploadImage from "../components/UploadImage";
  4 | 
  5 | function Register() {
  6 |   const [form, setForm] = useState({
  7 |     firstName: "",
  8 |     lastName: "",
  9 |     email: "",
 10 |     password: "",
 11 |     phoneNumber: "",
 12 |     imageUrl: "",
 13 |   });
 14 | 
 15 |   const navigate = useNavigate();
 16 | 
 17 |   // Handling Input change for registration form.
 18 |   const handleInputChange = (e) => {
 19 |     setForm({ ...form, [e.target.name]: e.target.value });
 20 |   };
 21 | 
 22 |   // Register User
 23 |   const registerUser = () => {
 24 |     fetch("http://localhost:4000/api/register", {
 25 |       method: "POST",
 26 |       headers: {
 27 |         "Content-type": "application/json",
 28 |       },
 29 |       body: JSON.stringify(form),
 30 |     })
 31 |       .then((result) => {
 32 |         alert("Successfully Registered, Now Login with your details");
 33 |         navigate('/login')
 34 |         
 35 |       })
 36 |       .catch((err) => console.log(err));
 37 |   };
 38 |   // ------------------
 39 | 
 40 |   // Uploading image to cloudinary
 41 |   const uploadImage = async (image) => {
 42 |     const data = new FormData();
 43 |     data.append("file", image);
 44 |     data.append("upload_preset", "inventoryapp");
 45 | 
 46 |     await fetch("https://api.cloudinary.com/v1_1/ddhayhptm/image/upload", {
 47 |       method: "POST",
 48 |       body: data,
 49 |     })
 50 |       .then((res) => res.json())
 51 |       .then((data) => {
 52 |         setForm({ ...form, imageUrl: data.url });
 53 |         alert("Image Successfully Uploaded");
 54 |       })
 55 |       .catch((error) => console.log(error));
 56 |   };
 57 | 
 58 | 
 59 |   const handleSubmit = (e) => {
 60 |     e.preventDefault();
 61 |   }
 62 | 
 63 |   return (
 64 |     <>
 65 |       <div className="grid grid-cols-1 sm:grid-cols-2 h-screen  items-center place-items-center">
 66 |         <div className="w-full max-w-md space-y-8  p-10 rounded-lg">
 67 |           <div>
 68 |             <img
 69 |               className="mx-auto h-12 w-auto"
 70 |               src={require("../assets/logo.png")}
 71 |               alt="Your Company"
 72 |             />
 73 |             <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">
 74 |               Register your account
 75 |             </h2>
 76 |           </div>
 77 |           <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
 78 |             {/* <input type="hidden" name="remember" defaultValue="true"  /> */}
 79 |             <div className="flex flex-col gap-4 -space-y-px rounded-md shadow-sm">
 80 |               <div className="flex gap-4">
 81 |                 <input
 82 |                   name="firstName"
 83 |                   type="text"
 84 |                   required
 85 |                   className="relative block w-full rounded-t-md border-0 py-1.5 px-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
 86 |                   placeholder="First Name"
 87 |                   value={form.firstName}
 88 |                   onChange={handleInputChange}
 89 |                 />
 90 |                 <input
 91 |                   name="lastName"
 92 |                   type="text"
 93 |                   required
 94 |                   className="relative block w-full rounded-t-md border-0 py-1.5 px-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
 95 |                   placeholder="Last Name"
 96 |                   value={form.lastName}
 97 |                   onChange={handleInputChange}
 98 |                 />
 99 |               </div>
100 |               <div>
101 |                 <input
102 |                   id="email-address"
103 |                   name="email"
104 |                   type="email"
105 |                   autoComplete="email"
106 |                   required
107 |                   className="relative block w-full rounded-t-md border-0 py-1.5 px-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
108 |                   placeholder="Email address"
109 |                   value={form.email}
110 |                   onChange={handleInputChange}
111 |                 />
112 |               </div>
113 |               <div>
114 |                 <input
115 |                   id="password"
116 |                   name="password"
117 |                   type="password"
118 |                   autoComplete="current-password"
119 |                   required
120 |                   className="relative block w-full rounded-b-md border-0 py-1.5 px-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
121 |                   placeholder="Password"
122 |                   value={form.password}
123 |                   onChange={handleInputChange}
124 |                 />
125 |               </div>
126 |               <div>
127 |                 <input
128 |                   name="phoneNumber"
129 |                   type="number"
130 |                   autoComplete="phoneNumber"
131 |                   required
132 |                   className="relative block w-full rounded-b-md border-0 py-1.5 px-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
133 |                   placeholder="Phone Number"
134 |                   value={form.phoneNumber}
135 |                   onChange={handleInputChange}
136 |                 />
137 |               </div>
138 |               <UploadImage uploadImage={uploadImage} />
139 |             </div>
140 | 
141 |             <div className="flex items-center justify-between">
142 |               <div className="flex items-center">
143 |                 <input
144 |                   id="remember-me"
145 |                   name="remember-me"
146 |                   type="checkbox"
147 |                   className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"
148 |                   checked
149 |                   required
150 |                 />
151 |                 <label
152 |                   htmlFor="remember-me"
153 |                   className="ml-2 block text-sm text-gray-900"
154 |                 >
155 |                   I Agree Terms & Conditons
156 |                 </label>
157 |               </div>
158 | 
159 |               <div className="text-sm">
160 |                 <span
161 |                   className="font-medium text-indigo-600 hover:text-indigo-500"
162 |                 >
163 |                   Forgot your password?
164 |                 </span>
165 |               </div>
166 |             </div>
167 | 
168 |             <div>
169 |               <button
170 |                 type="submit"
171 |                 className="group relative flex w-full justify-center rounded-md bg-indigo-600 py-2 px-3 text-sm font-semibold text-white hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
172 |                 onClick={registerUser}
173 |               >
174 |                 <span className="absolute inset-y-0 left-0 flex items-center pl-3">
175 |                   {/* <LockClosedIcon
176 |                       className="h-5 w-5 text-indigo-500 group-hover:text-indigo-400"
177 |                       aria-hidden="true"
178 |                     /> */}
179 |                 </span>
180 |                 Sign up
181 |               </button>
182 |               <p className="mt-2 text-center text-sm text-gray-600">
183 |                 Or{" "}
184 |                 <span
185 |                   className="font-medium text-indigo-600 hover:text-indigo-500"
186 |                 >
187 |                   Already Have an Account, Please
188 |                   <Link to="/login"> Signin now </Link>
189 |                 </span>
190 |               </p>
191 |             </div>
192 |           </form>
193 |         </div>
194 |         <div className="flex justify-center order-first sm:order-last">
195 |           <img src={require("../assets/Login.png")} alt="" />
196 |         </div>
197 |       </div>
198 |     </>
199 |   );
200 | }
201 | 
202 | export default Register;
203 | 


--------------------------------------------------------------------------------
/Frontend/src/pages/Sales.js:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect, useContext } from "react";
  2 | import AddSale from "../components/AddSale";
  3 | import AuthContext from "../AuthContext";
  4 | 
  5 | function Sales() {
  6 |   const [showSaleModal, setShowSaleModal] = useState(false);
  7 |   const [sales, setAllSalesData] = useState([]);
  8 |   const [products, setAllProducts] = useState([]);
  9 |   const [stores, setAllStores] = useState([]);
 10 |   const [updatePage, setUpdatePage] = useState(true);
 11 | 
 12 |   const authContext = useContext(AuthContext);
 13 | 
 14 |   useEffect(() => {
 15 |     fetchSalesData();
 16 |     fetchProductsData();
 17 |     fetchStoresData();
 18 |   }, [updatePage]);
 19 | 
 20 |   // Fetching Data of All Sales
 21 |   const fetchSalesData = () => {
 22 |     fetch(`http://localhost:4000/api/sales/get/${authContext.user}`)
 23 |       .then((response) => response.json())
 24 |       .then((data) => {
 25 |         setAllSalesData(data);
 26 |       })
 27 |       .catch((err) => console.log(err));
 28 |   };
 29 | 
 30 |   // Fetching Data of All Products
 31 |   const fetchProductsData = () => {
 32 |     fetch(`http://localhost:4000/api/product/get/${authContext.user}`)
 33 |       .then((response) => response.json())
 34 |       .then((data) => {
 35 |         setAllProducts(data);
 36 |       })
 37 |       .catch((err) => console.log(err));
 38 |   };
 39 | 
 40 |   // Fetching Data of All Stores
 41 |   const fetchStoresData = () => {
 42 |     fetch(`http://localhost:4000/api/store/get/${authContext.user}`)
 43 |       .then((response) => response.json())
 44 |       .then((data) => {
 45 |         setAllStores(data);
 46 |       });
 47 |   };
 48 | 
 49 |   // Modal for Sale Add
 50 |   const addSaleModalSetting = () => {
 51 |     setShowSaleModal(!showSaleModal);
 52 |   };
 53 | 
 54 |   // Handle Page Update
 55 |   const handlePageUpdate = () => {
 56 |     setUpdatePage(!updatePage);
 57 |   };
 58 | 
 59 |   return (
 60 |     <div className="col-span-12 lg:col-span-10  flex justify-center">
 61 |       <div className=" flex flex-col gap-5 w-11/12">
 62 |         {showSaleModal && (
 63 |           <AddSale
 64 |             addSaleModalSetting={addSaleModalSetting}
 65 |             products={products}
 66 |             stores={stores}
 67 |             handlePageUpdate={handlePageUpdate}
 68 |             authContext={authContext}
 69 |           />
 70 |         )}
 71 |         {/* Table  */}
 72 |         <div className="overflow-x-auto rounded-lg border bg-white border-gray-200 ">
 73 |           <div className="flex justify-between pt-5 pb-3 px-3">
 74 |             <div className="flex gap-4 justify-center items-center ">
 75 |               <span className="font-bold">Sales</span>
 76 |             </div>
 77 |             <div className="flex gap-4">
 78 |               <button
 79 |                 className="bg-blue-500 hover:bg-blue-700 text-white font-bold p-2 text-xs  rounded"
 80 |                 onClick={addSaleModalSetting}
 81 |               >
 82 |                 {/* <Link to="/inventory/add-product">Add Product</Link> */}
 83 |                 Add Sales
 84 |               </button>
 85 |             </div>
 86 |           </div>
 87 |           <table className="min-w-full divide-y-2 divide-gray-200 text-sm">
 88 |             <thead>
 89 |               <tr>
 90 |                 <th className="whitespace-nowrap px-4 py-2 text-left font-medium text-gray-900">
 91 |                   Product Name
 92 |                 </th>
 93 |                 <th className="whitespace-nowrap px-4 py-2 text-left font-medium text-gray-900">
 94 |                   Store Name
 95 |                 </th>
 96 |                 <th className="whitespace-nowrap px-4 py-2 text-left font-medium text-gray-900">
 97 |                   Stock Sold
 98 |                 </th>
 99 |                 <th className="whitespace-nowrap px-4 py-2 text-left font-medium text-gray-900">
100 |                   Sales Date
101 |                 </th>
102 |                 <th className="whitespace-nowrap px-4 py-2 text-left font-medium text-gray-900">
103 |                   Total Sale Amount
104 |                 </th>
105 |               </tr>
106 |             </thead>
107 | 
108 |             <tbody className="divide-y divide-gray-200">
109 |               {sales.map((element, index) => {
110 |                 return (
111 |                   <tr key={element._id}>
112 |                     <td className="whitespace-nowrap px-4 py-2  text-gray-900">
113 |                       {element.ProductID?.name}
114 |                     </td>
115 |                     <td className="whitespace-nowrap px-4 py-2 text-gray-700">
116 |                       {element.StoreID?.name}
117 |                     </td>
118 |                     <td className="whitespace-nowrap px-4 py-2 text-gray-700">
119 |                       {element.StockSold}
120 |                     </td>
121 |                     <td className="whitespace-nowrap px-4 py-2 text-gray-700">
122 |                       {element.SaleDate}
123 |                     </td>
124 |                     <td className="whitespace-nowrap px-4 py-2 text-gray-700">
125 |                       ${element.TotalSaleAmount}
126 |                     </td>
127 |                   </tr>
128 |                 );
129 |               })}
130 |             </tbody>
131 |           </table>
132 |         </div>
133 |       </div>
134 |     </div>
135 |   );
136 | }
137 | 
138 | export default Sales;
139 | 


--------------------------------------------------------------------------------
/Frontend/src/pages/Store.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect, useContext } from "react";
 2 | import AddStore from "../components/AddStore";
 3 | import AuthContext from "../AuthContext";
 4 | 
 5 | function Store() {
 6 |   const [showModal, setShowModal] = useState(false);
 7 |   const [stores, setAllStores] = useState([]);
 8 | 
 9 |   const authContext = useContext(AuthContext);
10 | 
11 |   useEffect(() => {
12 |     fetchData();
13 |   }, []);
14 | 
15 |   // Fetching all stores data
16 |   const fetchData = () => {
17 |     fetch(`http://localhost:4000/api/store/get/${authContext.user}`)
18 |       .then((response) => response.json())
19 |       .then((data) => {
20 |         setAllStores(data);
21 |       });
22 |   };
23 | 
24 |   const modalSetting = () => {
25 |     setShowModal(!showModal);
26 |   };
27 | 
28 |   return (
29 |     <div className="col-span-12 lg:col-span-10 flex justify-center ">
30 |       <div className=" flex flex-col gap-5 w-11/12 border-2">
31 |         <div className="flex justify-between">
32 |           <span className="font-bold">Manage Store</span>
33 |           <button
34 |             className="bg-blue-500 hover:bg-blue-700 text-white font-bold p-2 text-xs  rounded"
35 |             onClick={modalSetting}
36 |           >
37 |             Add Store
38 |           </button>
39 |         </div>
40 |         {showModal && <AddStore />}
41 |         {stores.map((element, index) => {
42 |           return (
43 |             <div
44 |               className="bg-white w-50 h-fit flex flex-col gap-4 p-4 "
45 |               key={element._id}
46 |             >
47 |               <div>
48 |                 <img
49 |                   alt="store"
50 |                   className="h-60 w-full object-cover"
51 |                   src={element.image}
52 |                 />
53 |               </div>
54 |               <div className="flex flex-col gap-3 justify-between items-start">
55 |                 <span className="font-bold">{element.name}</span>
56 |                 <div className="flex">
57 |                   <img
58 |                     alt="location-icon"
59 |                     className="h-6 w-6"
60 |                     src={require("../assets/location-icon.png")}
61 |                   />
62 |                   <span>{element.address + ", " + element.city}</span>
63 |                 </div>
64 |               </div>
65 |             </div>
66 |           );
67 |         })}
68 |       </div>
69 |     </div>
70 |   );
71 | }
72 | 
73 | export default Store;
74 | 


--------------------------------------------------------------------------------
/Frontend/src/reportWebVitals.js:
--------------------------------------------------------------------------------
 1 | const reportWebVitals = onPerfEntry => {
 2 |   if (onPerfEntry && onPerfEntry instanceof Function) {
 3 |     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
 4 |       getCLS(onPerfEntry);
 5 |       getFID(onPerfEntry);
 6 |       getFCP(onPerfEntry);
 7 |       getLCP(onPerfEntry);
 8 |       getTTFB(onPerfEntry);
 9 |     });
10 |   }
11 | };
12 | 
13 | export default reportWebVitals;
14 | 


--------------------------------------------------------------------------------
/Frontend/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 | 


--------------------------------------------------------------------------------
/Frontend/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   content: [
 4 |     "./src/**/*.{js,jsx,ts,tsx}",
 5 |   ],
 6 |   theme: {
 7 |     extend: {},
 8 |   },
 9 |   plugins: [
10 |     // ...
11 |     require("@tailwindcss/forms"),
12 |   ],
13 | };
14 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # React-Inventory-Management-System
2 | Inventory Management System Built with React JS, Node JS, Express JS, MongoDB and Tailwind CSS.
3 | 
4 | ### Show Some Support!  
5 | [![Buy Me A Coffee](https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png)](https://www.buymeacoffee.com/hamzashaikh)
6 | 
7 | 
8 | # [<span style="color: blue;">View Live Preview from here.</span>](https://inventory-management-rosy.vercel.app)
9 | 


--------------------------------------------------------------------------------