Untitled
raw download clone
JSX
views 9
,
size 11325 b
import React, { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { Link } from 'react-router-dom'
import { fetchTransaction } from '../actions/transactionAction'
import { signout, userDetails } from '../actions/userAction'
import { formatDate } from '../utils/Dateformat'
import { formatMoney } from '../utils/FormatMoney'

export const DashboardScreen = () => {
    const dispatch = useDispatch()


    useEffect(() => {

        dispatch(fetchTransaction())

    }, [dispatch])


    const { userInfo } = useSelector(state => state.userSignin)
    const { userData } = useSelector(state => state.userDetails)
    const { transactions, loading } = useSelector(state => state.transactionsList)


    const logoutHandler = () => {
        dispatch(signout())
    }


    return (
        < div className="page-content footer-clear" >
            {/* Page Title*/}
            < div className="pt-3" >
                <div className="page-title d-flex">
                    <div className="align-self-center me-auto">
                        <p className="color-highlight header-date" />
                        <h1>Welcome</h1>
                        <span className="font-16"> {userInfo?.firstname} {userInfo?.lastname}</span>
                    </div>
                    <div className="align-self-center ms-auto">
                        <Link to="#" data-bs-toggle="offcanvas" data-bs-target="#menu-notifications" className="icon gradient-blue color-white shadow-bg shadow-bg-xs rounded-m">
                            <i className="bi bi-bell-fill font-17" />
                            <em className="badge bg-red-dark color-white scale-box">3</em>
                        </Link>
                        <Link to="#" data-bs-toggle="dropdown" className="icon gradient-blue shadow-bg shadow-bg-s rounded-m">
                            <img src={userInfo?.passport_photogragh ? userInfo?.passport_photogragh : '/profile'} width={45} height={45} className="rounded-m" alt="img" />
                        </Link>
                        {/* Page Title Dropdown Menu*/}
                        <div className="dropdown-menu">
                            <div className="card card-style shadow-m mt-1 me-1">
                                <div className="list-group list-custom list-group-s list-group-flush rounded-xs px-3 py-1">
                                    <Link to="page-wallet.html" className="list-group-item">
                                        <i className="has-bg gradient-green shadow-bg shadow-bg-xs color-white rounded-xs bi bi-credit-card" />
                                        <strong className="font-13">Wallet</strong>
                                    </Link>
                                    <Link to="page-activity.html" className="list-group-item">
                                        <i className="has-bg gradient-blue shadow-bg shadow-bg-xs color-white rounded-xs bi bi-graph-up" />
                                        <strong className="font-13">Activity</strong>
                                    </Link>
                                    <Link to="page-profile.html" className="list-group-item">
                                        <i className="has-bg gradient-yellow shadow-bg shadow-bg-xs color-white rounded-xs bi bi-person-circle" />
                                        <strong className="font-13">Account</strong>
                                    </Link>
                                    <Link to="#" onClick={logoutHandler} className="list-group-item">
                                        <i className="has-bg gradient-red shadow-bg shadow-bg-xs color-white rounded-xs bi bi-power" />
                                        <strong className="font-13">Log Out</strong>
                                    </Link>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div >

            < div  >
                <div className="d-flex justify-content-between ">

                    <div className="card rounded-l card-style gradient-green  p-2 w-50">
                        <div className="d-flex justify-content-between  my-4" >



                            <div className="align-self-center">
                                <i className="bi bi-wallet color-white font-40" />

                            </div>

                            <div className="align-self-center">
                                <div className="font-20 text-white fw-bolder">₦{formatMoney(userData?.customdetails.wallet_balance, 2, ".", ",")}</div>
                                <div className="font-12 text-white fw-bold">Balance</div>

                            </div>


                        </div>


                    </div>

                    <div className="card rounded-l card-style gradient-blue  p-2 w-50">
                        <div className="d-flex justify-content-between  my-4" >



                            <div className="align-self-center">
                                <i className="bi bi-gift color-white font-40" />

                            </div>

                            <div className="align-self-center">
                                <div className="font-20 text-white fw-bolder">₦{formatMoney(userData?.customdetails.bonus_balance, 2, ".", ",")}</div>
                                <div className="font-12 text-white fw-bold">Bonus</div>

                            </div>


                        </div>


                    </div>
                </div>
            </div >

            {/* Quick Actions */}
            <div className="content py-2">
                <div className="d-flex text-center">
                    <div className="me-auto">
                        <Link to="/buydata" className="icon icon-xxl rounded-m bg-theme shadow-m"><i className="font-28 color-green-dark bi bi-wifi" /></Link>
                        <h6 className="font-13 opacity-80 font-500 mb-0 pt-2">Buy data</h6>
                    </div>
                    <div className="m-auto">
                        <Link to="#" className="icon icon-xxl rounded-m bg-theme shadow-m"><i className="font-28 color-red-dark bi bi-phone" /></Link>
                        <h6 className="font-13 opacity-80 font-500 mb-0 pt-2">Buy Airtime</h6>
                    </div>
                    <div className="m-auto">
                        <Link to="/billpayments" className="icon icon-xxl rounded-m bg-theme shadow-m"><i className="font-28 color-blue-dark bi bi-wallet" /></Link>
                        <h6 className="font-13 opacity-80 font-500 mb-0 pt-2">Pay Bills</h6>
                    </div>
                    <div className="ms-auto">
                        <Link to="/more" className="icon icon-xxl rounded-m bg-theme shadow-m"><i className="font-28 color-brown-dark bi-filter-circle" /></Link>
                        <h6 className="font-13 opacity-80 font-500 mb-0 pt-2">More</h6>
                    </div>


                </div>
            </div>

            {/* Recent Activity Title*/}
            < div className="content   px-1" >
                <div className="d-flex">
                    <div className="align-self-center">
                        <h3 className="font-16 mb-2">Recent Transactions</h3>
                    </div>
                    {transactions?.results.length > 0 && <div className="align-self-center ms-auto">
                        <Link to="/transactions" className="font-12 pt-1">View All</Link>
                    </div>}
                </div>
            </div >
            {/* Recent Activity Cards*/}
            < div className="card card-style" >
                <div className="content">
                    {loading ? <> <i className="fas fa-circle-notch fa-spin"></i> fetching transaction list... </> : transactions?.results.length > 0 ? transactions?.results.slice(0, 5).map(transaction => <div key={transaction.reference}> <Link to={`/transaction/${transaction.reference}`} className="d-flex py-1">
                        <div className="align-self-center">
                            <img className=" rounded-s" src={transaction.service_logo} alt="" height="45px" width="45px"></img>
                        </div>
                        <div className="align-self-center ps-1">
                            <h5 className="pt-1 mb-n1">{transaction.service}</h5>
                            <p className="mb-0 font-11 opacity-50">{formatDate(transaction.created_date).toLocaleString('en-US', { hour: 'numeric', hour12: true })} <span className="copyright-year" /></p>
                        </div>
                        <div className="align-self-center ms-auto text-end">
                            {transaction.transaction_type === "DEBIT" ? <h4 className="pt-1 mb-n1 color-red-dark">- ₦{transaction.amount_paid}</h4> : <h4 className="pt-1 mb-n1 color-green-dark" > + ₦{transaction.amount_paid}</h4>}

                            <p className="mb-0 font-12 opacity-60 fw-bolder">{transaction.description}</p>
                        </div>
                    </Link> <div className="divider my-2 opacity-50" /> </div>) : <center><h1>Transaction is empty</h1> <img src="https://cdn3.iconfinder.com/data/icons/shopping-and-ecommerce-29/90/empty_cart-512.png" height="120px" alt="" /></center>}


                </div>
            </div >
            {/* Account Activity Title*/}
            < div className="content my-0 mt-n2 px-1" >
                <div className="d-flex">
                    <div className="align-self-center">
                        <h3 className="font-16 mb-2">Notification</h3>
                    </div>
                    <div className="align-self-center ms-auto">
                        <Link to="page-activity.html" className="font-12 pt-1">View All</Link>
                    </div>
                </div>
            </div >
            {/*Account  Notification*/}

            <div className="card card-style bg-fade-blue border border-fade-blue alert alert-dismissible show fade p-0 mb-3">
                <div className="content my-3">
                    <div className="d-flex">
                        <div className="align-self-center no-click">
                            <i className="fa fa-bell font-33 color-blue-dark d-block" />
                        </div>
                        <div className="align-self-center no-click">
                            <h2 className=" ps-2 pb-1 pt-4">New notification</h2>
                            <p className="color-grey-dark mb-0 font-500 font-14 ps-2  line-height-s">
                                Kindly provide the information requested below about your business for our review and verification. Your account will be verified once requested information is completely provided and verified.
                            </p>
                        </div>
                    </div>
                </div>
            </div>





        </div >
    )
}
close fullscreen
Login or Register to edit or fork this paste. It's free.