UI fixes

src/Components/InvoiceRow/InvoiceRow.jsx

@@ -5,6 +5,7 @@ import { ReactComponent as CopyIcon } from '../../assets/copy-icon.svg';
 import { ReactComponent as PreviewIcon } from '../../assets/preview-icon.svg';
 import { ReactComponent as DownloadIcon } from '../../assets/download-icon.svg';
 import { ReactComponent as DelIcon } from '../../assets/delete-icon.svg';
+import { ReactComponent as EyeIcon } from '../../assets/eye.svg';
 import { useMoralis } from 'react-moralis';
 import { useEffect, useState } from 'react';
 import moment from "moment";
@@ -72,7 +73,7 @@ const InvoiceRow = ({invoice, account, contract, page}) => {
                 <td><StatusIcon invoice={invoice}/></td>
                 <td>
                   <CopyIcon className='action-icon' />
-                  <PreviewIcon className='action-icon' onClick={()=>handleRedirect(invoice.invoiceID)}/>
+                  <EyeIcon className='action-icon' onClick={()=>handleRedirect(invoice.invoiceID)}/>
                   <DownloadIcon className='action-icon' />
                   <DelIcon className='action-icon' />
                 </td>

src/Components/Navbar/navbar.css

@@ -31,8 +31,8 @@
     justify-content: space-between;
     width: 100%;
     align-items: center;
-    padding-left: 45px;
-    padding-right: 80px;
+    padding-left: 30px;
+    padding-right: 30px;
 }
 
 .search-container {

src/Components/ProfileDetails/ProfileDetails.jsx

@@ -6,7 +6,7 @@ import { useMoralis, useMoralisQuery } from "react-moralis";
 import "./profiledetails.css";
 import { useEffect, useState } from "react";
 import { useDispatch } from "react-redux";
-import GifImage from "../../assets/loader.png";
+import GifImage from "../../assets/moralis.gif";
 import { addUser, checkIfUserExists } from "../../utils/dbQueries";
 
 const ProfileDetails = ({closeModal, account}) => {
@@ -137,7 +137,7 @@ const ProfileDetails = ({closeModal, account}) => {
         ) : (
         <Modal>
             <div className="moralis-modal">
-                <div className="text-center mb-5"><img src={GifImage} alt={"Gif Loader"} /></div>
+                <div className="text-center mb-5 "><img className="moralis-gif" src={GifImage} alt={"Gif Loader"} /></div>
                 <div><span className="weight-600 font-20 line-30" >Connecting To Moralis...</span></div>
                 <div className="text-center"><span className="font-12 ">(Please Sign Transaction)</span></div>   
             </div>

src/Components/ProfileDetails/profiledetails.css

@@ -73,4 +73,8 @@
 .moralis-modal{
     width: 418px;
     padding: 39px 85px;
+}
+
+.moralis-gif{
+    width:300px;
 }

src/Components/Sidebar/Sidebar.jsx

@@ -55,7 +55,7 @@ const Sidebar = () => {
                             <span className="nav-link-text">Invoices</span>
                             <span className="nav-link-icon"> <DownIcon /> </span>
                         </div>
-                        <div className="nav-link-items">
+                        <div className="nav-link-items drop-items ">
                             <NavLink className="drop-down-link" to={'/create'} ref={createButton}>
                                 New Invoice
                             </NavLink>

src/Components/Sidebar/sidebar.css

@@ -94,8 +94,13 @@
     /* identical to box height */
     color: #4D4D4D;
     text-decoration: none;
+
 }
 
+.drop-items{
+    width:83%;
+    margin-left: auto;
+}
 .drop-down-link.active {
     font-weight: 700;
     font-size: 12px;

src/Components/overview/Overview.js

@@ -4,7 +4,8 @@ import DocsIcon from '../../assets/docs.svg'
 import Metrics from './metrics/Metrics'
 import './overview.css'
 
-const Overview = ({account}) =>{
+const Overview = ({account,invoiceStats}) =>{
+    console.log("inv stats",invoiceStats)
 
     return(
         <div className='w-h'>
@@ -17,10 +18,10 @@ const Overview = ({account}) =>{
                 </div>
             </div>
             <div className='metrics-container display-flex-row'>
-                <Metrics docsIcon={DocsIcon} text={'Clients'} qty={account}/>
-                <Metrics docsIcon={DocsIcon} text={'INVOICES'} qty={account}/>
-                <Metrics docsIcon={DocsIcon} text={'INVOICES'} qty={account}/>
-                <Metrics docsIcon={DocsIcon} text={'INVOICES'} qty={account}/>
+                <Metrics docsIcon={DocsIcon} text={'Clients'} qty={invoiceStats.clients}/>
+                <Metrics docsIcon={DocsIcon} text={'INVOICES'} qty={invoiceStats.invoices}/>
+                <Metrics docsIcon={DocsIcon} text={'PAID'} qty={invoiceStats.paid}/>
+                <Metrics docsIcon={DocsIcon} text={'PENDING'} qty={invoiceStats.pending}/>
             </div>
         </div>
     )

src/Components/overview/metrics/Metrics.js

@@ -7,7 +7,7 @@ const Metrics = ({docsIcon, text, qty}) =>{
                 <img src={docsIcon} alt='document icon'/>
             </div>
             <p className='text'>{text}</p>
-            <p className='qty'>{qty ? 12 : 0}</p>
+            <p className='qty'>{qty ? qty : 0}</p>
         </div>
     )
 }

src/Pages/CreateInvoice/CreateInvoice.jsx

@@ -15,6 +15,7 @@ import PlusIcon from "../../assets/plus.svg";
 import AddTokenModal from '../../Components/AddTokenModal/AddTokenModal';
 import { useMoralis } from 'react-moralis';
 import { addInvoice } from '../../utils/dbQueries'
+import { ethers } from 'ethers';
 
 const CreateInvoice = ({contract, account}) => {
     const { chainId, isSupported } = useSelector((state) => state.network);
@@ -30,6 +31,7 @@ const CreateInvoice = ({contract, account}) => {
     const [customerAddress, setCustomerAddress] = useState("");
     const [dueDate, setDueDate] = useState("");
     const [notes, setNotes] = useState("");
+    const [nextInvoiceID,setNextInvoiceID] = useState("1");
 
     const [rows, setRows] = useState([{
         item: "",
@@ -64,6 +66,17 @@ const CreateInvoice = ({contract, account}) => {
         setSelectedToken({...item})
     }
 
+    useEffect(()=>{
+        const getNextInvoiceId=async()=>{
+            const nextInvoiceId = await contract.methods.getNextInvoiceID().call()
+
+            setNextInvoiceID(nextInvoiceId)
+        }
+        if(isSupported && contract._address!==ethers.constants.AddressZero ){
+           getNextInvoiceId()
+        }
+    },[isSupported,contract])
+
     useEffect(()=>{
         if(assets.length)
         setToken({...selectedToken.currencies[0]})
@@ -306,7 +319,7 @@ const CreateInvoice = ({contract, account}) => {
                 </div>
                 <div className="right-details flex flex-col gap-10">
                     <div>
-                        <span>issue #1</span>
+                        <span>issue #{nextInvoiceID}</span>
                     </div>
                     <div>
                         <span>Issued date: {dateString}</span>

src/Pages/CreateInvoice/createinvoice.css

@@ -173,7 +173,7 @@ input, textarea {
 .vat {
     position: absolute;
     bottom: 15px;
-    right: 15px;
+    right: 40px;
     font-size: 16px;
     line-height: 24px;
 }
@@ -198,7 +198,7 @@ input, textarea {
 
 .items-table {
     width: 100%;
-    border-spacing: 15px;
+    /* border-spacing: 15px; */
 }
 
 .items-table th {
@@ -207,10 +207,16 @@ input, textarea {
     line-height: 21px;
 }
 
+.items-table tbody tr td{
+    /* line-height: 100px; */
+    padding-top: 20px;
+    padding-left: 0px;
+}
+
 .items-table input {
     height: 50px;
     font-size: 16px;
-    width: 100%;
+    width: 85%;
 }
 
 .items-table td{

src/Pages/Dashboard/Dashboard.jsx

@@ -16,6 +16,7 @@ const Dashboard = ({ invoices, account, contract }) => {
   const navigate = useNavigate();
   const web3 = initWeb3();
   const [accountInvoices, setAccountInvoices] = useState([]);
+  const [invoiceStats,setInvoiceStats] = useState({clients:0,invoices:0,paid:0,pending:0});
 
   const filterAccountInvoices = () => {
     return invoices.filter((invoice) => {
@@ -61,8 +62,31 @@ const Dashboard = ({ invoices, account, contract }) => {
         }
       };
 
+      const getClients=(invoices)=>{
+        const res=[]
+        invoices.map(invoice=>{
+          res.push(invoice.receiver)
+        })
+
+        return [...new Set(res)]
+
+      }
+
+      const getPaidInvoices=(invoices)=>{
+        return invoices.filter(invoice=>invoice.isPaid===true)
+      }
+      const getPendingInvoices=(invoices)=>{
+        return invoices.filter(invoice=>invoice.isPaid===false && invoice.isCancelled===false)
+      }
+
       const setInvoices = async () => {
         const parsedInvoice = await parseInvoices(filteredInvoices);
+        console.log(parsedInvoice,"parsed")
+        const clients = getClients(parsedInvoice).length
+        const invoices = parsedInvoice.length
+        const paid = getPaidInvoices(parsedInvoice).length;
+        const pending = getPendingInvoices(parsedInvoice).length;
+        setInvoiceStats({clients,invoices,paid,pending});
         setAccountInvoices(parsedInvoice);
       };
 
@@ -75,7 +99,7 @@ const Dashboard = ({ invoices, account, contract }) => {
       <WelcomeHello account={account} />
       <div className="display-flex-row gap">
         <div className="width">
-          <Overview account={account} />
+          <Overview account={account} invoiceStats={invoiceStats} />
           <span className="block">Recent Transactions</span>
           {account ? (
             <div className="page-content content">

src/Pages/ManageInvoice/ManageInvoice.jsx

@@ -16,6 +16,8 @@ import InvoiceRow from '../../Components/InvoiceRow/InvoiceRow';
 
 const ManageInvoice = ({invoices, account,contract}) => {
 
+  const navigate = useNavigate();
+
     const web3 = initWeb3();
     const [accountInvoices, setAccountInvoices] = useState([]);
 
@@ -81,7 +83,7 @@ const ManageInvoice = ({invoices, account,contract}) => {
                 </div>
                 <Button 
                     Icon={PlusIcon} 
-                    text={"Create Invoice"} 
+                    text={"Create Invoice"} clickHandler={()=>navigate("/create")}
                 />
             </div>
             <div className="page-content content m-t-b">