Feature/invfrontend

Project-Glan/backend/controllers/InvoiceController.js

@@ -45,7 +45,7 @@ const setInv = asyncHandler(async(req,res) =>{
     }
         )}else{
         res.status(400)
-        throw new Error("Invalid user data")
+        throw new ErrorEvent("Invalid user data")
     }
 
      res.status(200).json({message :"New invoice created"});

Project-Glan/frontend/src/App.js

@@ -11,6 +11,9 @@ import Store from "./redux/Store";
 import ItemDashboard from "./pages/ItemDashboard";
 import AddItem from "./pages/AddItem";
 import UpdateItem from "./pages/UpdateItem";
+import AddInv from "./pages/AddInv";
+import UpdateInv from "./pages/UpdateInv";
+import InListing from "./pages/InListing";
 
 function App() {
   return (
@@ -26,6 +29,9 @@ function App() {
             <Route path="/ItemDashboard" element={<ItemDashboard />} />
             <Route path="/AddItem" element={<AddItem />} />
             <Route path="/UpdateItem/:code" element={<UpdateItem />} />
+            <Route path='/invoice' element={<InListing />} />
+            <Route path='/invoice/add' element={<AddInv />}></Route>
+            <Route path='/invoice/edit/:code' element={<UpdateInv />}></Route>
           </Routes>
         </Router>
         <ToastContainer />

Project-Glan/frontend/src/pages/AddInv.jsx

@@ -0,0 +1,102 @@
+import { useState } from "react";
+import { useDispatch } from "react-redux";
+import { Link, useNavigate } from "react-router-dom";
+import { FunctionAddInvoice } from "../redux/actions/InvoiceAction";
+//import Header_bar from "../components/Header_bar/Header_bar.css";
+//import "../pages/Content.css"
+
+function AddInv() {
+    const [inCode, iCodechange] = useState('');
+    const [iName, iNamechange] = useState('');
+    const [Qty, Qtychange] = useState('');
+    const [unitP, unitPchange] = useState('');
+    const [itDis, itDischange] = useState('');
+    const [Tot, Totchange] = useState('');
+    const [subTot, subTotchange] = useState('');
+    const [inDis, inDischange] = useState('');
+    const [netTot, netTotchange] = useState('');
+    const [crDate, CrDatechange] = useState('');
+
+    const dispatch = useDispatch();
+    const navigate = useNavigate();
+
+
+
+    const handlesubmit = (e) => {
+        e.preventDefault();
+        const invoiceobj = { inCode, iName, Qty, unitP, itDis, Tot, subTot, inDis, netTot, crDate }
+        dispatch(FunctionAddInvoice(invoiceobj));
+        navigate('/invoice');
+
+    }
+
+    return (
+        <div>
+
+            <div>
+                <h1>Add Invoice</h1>
+            </div>
+            <form onSubmit={handlesubmit} >
+                <div>
+                    <lable>
+                        Invoice Code:
+                        <input type="text" name="iCode" value={inCode} onChange={e => iCodechange(e.target.value)}></input>
+                    </lable>
+
+                    <lable>
+                        Invoice Name:
+                        <input type="text" name="iName" value={iName} onChange={e => iNamechange(e.target.value)}></input>
+                    </lable>
+
+                    <lable>
+                        Quantity:
+                        <input type="text" name="Qty" value={Qty} onChange={e => Qtychange(e.target.value)}></input>
+                    </lable>
+
+                    <lable>
+                        Unit Price:
+                        <input type="text" name="unitP" value={unitP} onChange={e => unitPchange(e.target.value)}></input>
+                    </lable>
+
+                    <lable>
+                        Item Discount:
+                        <input type="text" name="itDis" value={itDis} onChange={e => itDischange(e.target.value)}></input>
+                    </lable>
+
+                    <lable>
+                        Total:
+                        <input type="text" name="Tot" value={Tot} onChange={e => Totchange(e.target.value)}></input>
+                    </lable>
+
+                    <lable>
+                        Sub Total:
+                        <input type="text" name="subTot" value={subTot} onChange={e => subTotchange(e.target.value)} ></input>
+                    </lable>
+
+                    <lable>
+                        Invoice Discount:
+                        <input type="text" name="inDis" value={inDis} onChange={e => inDischange(e.target.value)}></input>
+                    </lable>
+
+                    <lable>
+                        Net Total:
+                        <input type="text" name="netTot" value={netTot} onChange={e => netTotchange(e.target.value)}></input>
+                    </lable>
+
+                    <lable>
+                        Create Date:
+                        <input type="text" name="CrDate" value={crDate} onChange={e => CrDatechange(e.target.value)}></input>
+                    </lable>
+                </div>
+                <div>
+                    <button type="submit">Submit</button>
+                    <Link to={'/invoice'}>Back</Link>
+                </div>
+            </form>
+
+        </div>
+
+    )
+}
+
+export default AddInv

Project-Glan/frontend/src/pages/InListing.jsx

@@ -0,0 +1,85 @@
+import { useEffect } from 'react';
+import { FetchInvoiceList, Removeinvoice } from '../redux/actions/InvoiceAction'
+import { connect } from 'react-redux'
+import { Link } from 'react-router-dom';
+//import "../components/Header_bar/Header_bar.css"
+
+function InListing(props) {
+    useEffect(() => {
+        props.loadinvoice();
+    }, [])
+    const handledelete = (code) => {
+        if (window.confirm("Do you want to remove?")) {
+            props.removeInvoice(code);
+            props.loadinvoice();
+        }
+    }
+    return(
+
+        props.invoice.loading ? <div><h2>Loading....</h2></div> :
+            props.invoice.errmessage ? <div><h2>{props.invoice.errmessage}</h2></div> :
+              <div>
+                    <Link to={'/invoice/add'}>Add Invoice</Link>
+                    <table>
+                        <thead>
+                            <tr>
+                                <th>Id</th>
+                                <th>Invoice Code</th>
+                                <th>Invoice Name</th>
+                                <th>Quantity</th>
+                                <th>Unit Price</th>
+                                <th>Item Discount</th>
+                                <th>Total</th>
+                                <th>Sub Total</th>
+                                <th>Invoice Discount</th>
+                                <th>Net Total</th>
+                                <th>Create Date</th>
+                                <th>Action</th>
+
+
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {
+                                props.invoice.invoicelist && props.invoice.invoicelist.map(item =>
+                                    <tr key={item._id}>
+                                        <td>{item._id}</td>
+                                        <td>{item.inCode}</td>
+                                        <td>{item.iName}</td>
+                                        <td>{item.Qty}</td>
+                                        <td>{item.unitP}</td>
+                                        <td>{item.itDis}</td>
+                                        <td>{item.Tot}</td>
+                                        <td>{item.subTot}</td>
+                                        <td>{item.inDis}</td>
+                                        <td>{item.netTot}</td>
+                                        <td>{item.crDate}</td>
+
+                                        <td>
+                                            <Link to={'/invoice/edit/' + item._id}>Edit</Link>
+                                            <button onClick={() => { handledelete(item._id) }}>Delete</button>
+
+                                        </td>
+
+                                    </tr>
+                                )
+                            }
+                        </tbody>
+                    </table>
+                    </div>
+
+    )
+}
+const mapStateToProps = (state) => {
+    return {
+        invoice: state.invoice
+    }
+}
+const mapDispatchToProps = (dispatch) => {
+    return {
+        loadinvoice: () => dispatch(FetchInvoiceList()),
+        removeInvoice: (code) => dispatch(Removeinvoice(code))
+    }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(InListing);

Project-Glan/frontend/src/pages/UpdateInv.jsx

@@ -0,0 +1,126 @@
+import React, { useEffect, useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux';
+import { Link, useNavigate, useParams } from 'react-router-dom';
+import { FetchInvoiceObj } from '../redux/actions/InvoiceAction';
+import { FunctionUpdateInvoice } from '../redux/actions/InvoiceAction';
+
+function UpdateInv() {
+  const [_id, idchange] = useState(0);
+  const [inCode, InCodechange] = useState('');
+  const [iName, InNamechange] = useState('');
+  const [Qty, Qtychange] = useState('');
+  const [unitP, UnPricechange] = useState('');
+  const [itDis, ItDischange] = useState('');
+  const [Tot, Totchange] = useState('');
+  const [subTot, SubTotchange] = useState('');
+  const [inDis, InDischange] = useState('');
+  const [netTot, NetTotchange] = useState('');
+  const [crDate, CrDatechange] = useState('');
+
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+  const { code } = useParams();
+
+  const invoiceobj = useSelector((state) => state.invoice.invoiceobj)
+
+  const handlesubmit = (e) => {
+    e.preventDefault();
+  const invoiceobj = { _id, inCode, iName, unitP,itDis, Tot, subTot, inDis,netTot,crDate  }
+    dispatch(FunctionUpdateInvoice(invoiceobj, _id));
+    navigate('/invoice');
+
+  }
+  useEffect(() => {
+    dispatch(FetchInvoiceObj(code))
+  }, [])
+
+  useEffect(() => {
+    if (invoiceobj) {
+      idchange(invoiceobj._id);
+      InCodechange(invoiceobj.inCode);
+      InNamechange(invoiceobj.iName);
+      Qtychange(invoiceobj.Qty);
+      UnPricechange(invoiceobj.unitP);
+      ItDischange(invoiceobj.itDis);
+      Totchange(invoiceobj.Tot);
+      SubTotchange(invoiceobj.Tot);
+      InDischange(invoiceobj.subTot);
+      NetTotchange(invoiceobj.inDis);
+      CrDatechange(invoiceobj.inDis);
+    }
+  }, [invoiceobj])
+
+  return (
+    <div>
+      <div>
+        <h1>Update Invoice</h1>
+      </div>
+      <form onSubmit={handlesubmit} >
+        <div>
+
+          <lable>
+            Id:
+            <input type="text" name="id" value={_id || ''} disabled="disabled" ></input>
+          </lable><br />
+
+          <lable>
+            Invoice Code:
+            <input type="text" name="InCode" value={inCode || ''} onChange={e => InCodechange(e.target.value)}></input>
+          </lable><br />
+
+          <lable>
+            Invoice Name:
+            <input type="text" name="InName" value={iName || ''} onChange={e => InNamechange(e.target.value)}></input>
+          </lable><br />
+
+          <lable>
+            Quantity:
+            <input type="text" name="Qty" value={Qty || ''} onChange={e => Qtychange(e.target.value)}></input>
+          </lable><br />
+          <lable>
+            Unit Price:
+            <input type="text" name="UnPrice" value={ unitP|| ''} onChange={e => UnPricechange(e.target.value)}></input>
+          </lable><br />
+
+          <lable>
+            Item Discount:
+            <input type="text" name="ItDis" value={itDis || ''} onChange={e => ItDischange(e.target.value)}></input>
+          </lable><br />
+
+          <lable>
+            Total:
+            <input type="text" name="Tot" value={Tot || ''} onChange={e => Totchange(e.target.value)}></input>
+          </lable><br />
+
+          <lable>
+            Sub Total:
+            <input type="text" name="SubTot" value={subTot || ''} onChange={e => SubTotchange(e.target.value)} ></input>
+          </lable><br />
+
+          <lable>
+            Invoice Discount:
+            <input type="text" name="InDis" value={inDis || ''} onChange={e => InDischange(e.target.value)}></input>
+          </lable><br />
+
+          <lable>
+            Net Total:
+            <input type="text" name="NetTot" value={netTot || ''} onChange={e => NetTotchange(e.target.value)}></input>
+          </lable><br />
+
+          <lable>
+            Create Date:
+            <input type="text" name="CrDate" value={crDate || ''} onChange={e => CrDatechange(e.target.value)}></input>
+          </lable><br />
+        </div>
+        <div>
+          <button type="submit">Submit</button>
+          <Link to={'/invoice'}>Back</Link>
+        </div>
+      </form>
+
+    </div>
+
+  )
+}
+
+export default UpdateInv

Project-Glan/frontend/src/redux/Store.js

@@ -1,10 +1,11 @@
 import { configureStore, combineReducers } from "@reduxjs/toolkit";
 import TaskReducer from "./reducers/taskReducers";
 import ItemReducer from "./reducers/itemReducers";
+import InvoiceReducer from "./reducers/invoiceReducers";
 import thunk from "redux-thunk";
 import logger from "redux-logger";
 
-const rootreducer = combineReducers({ task: TaskReducer, item: ItemReducer });
+const rootreducer = combineReducers({ task: TaskReducer, Item: ItemReducer ,invoice: InvoiceReducer});
 const Store = configureStore({
   reducer: rootreducer,
   middleware: [thunk, logger],