keralawaterauthority/pages/bill.js

import Layout from "../components/layout/Layout";
import InvoiceKPI from "../components/widget/InvoiceKPI";
import PaymentAddKPI from "../components/widget/PaymentAddKPI";
import StackedBarChart from "./../components/chart/StackedBarChart";

function Bill() {
    return (
        <>
            <Layout
                headTitle="Payments"
                pageTitle="Payments"
                pageTitleSub={""}
                pageClass={"dashboard"}
                parent={"Home"}
                child={"Payments"}
            >
                <div className="row">
                <div className="col-lg-5">
                        
                        <PaymentAddKPI/>
                       
                     </div>
                    <div className="col-lg-7">

                    <InvoiceKPI num={true}/>
                    </div>

                   

                </div>
                <div className="row">
                    <div className="col-xl-8 col-lg-7">
                        <div
                            id="user-activity"
                            className="card"
                            data-aos="fade-up"
                        >
                            <div className="card-header">
                                <h4 className="card-title">Expenses</h4>
                            </div>

                            <div className="card-body">
                                <div className="tab-content" id="myTabContent">
                                    <StackedBarChart />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="col-xl-4 col-lg-5">
                        <div className="card">
                            <div className="card-header">
                                <h4 className="card-title">Unpaid Bills</h4>
                            </div>
                            <div className="card-body">
                                <div className="unpaid-content">
                                    <ul>
                                        <li>
                                            <p className="mb-0">Service</p>
                                            <h5 className="mb-0">Payoneer</h5>
                                        </li>
                                        <li>
                                            <p className="mb-0">Issued</p>
                                            <h5 className="mb-0">
                                                March 17, 2021
                                            </h5>
                                        </li>
                                        <li>
                                            <p className="mb-0">Payment Due</p>
                                            <h5 className="mb-0">17 Days</h5>
                                        </li>
                                        <li>
                                            <p className="mb-0">Paid</p>
                                            <h5 className="mb-0">0.00</h5>
                                        </li>
                                        <li>
                                            <p className="mb-0">
                                                Amount to pay
                                            </p>
                                            <h5 className="mb-0">₹ 532.69</h5>
                                        </li>
                                        <li>
                                            <p className="mb-0">
                                                Payment Method
                                            </p>
                                            <h5 className="mb-0">Paypal</h5>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </Layout>
        </>
    );
}
export default Bill;