Dashboard Card - Copy this React, Mui Component to your project

<div className="row mx 5 mt 5 mb 5 profit card"> <div className="col md 12 main card"> <div className="card box text center mb 3 text white fw bold fs 5"> <span>Rs. {data?.totalSales}/ </span> <br /> <span>{totalSalesInWords} Only</span> <p>Total Sales</p> </div> </div> <div className="col md 4"> <div className="card box wrap sub card"> <div className="card box text center mb 3 text white"> <span>Rs. {data?.unpaidEarning}/ </span> <p>Unpaid Earnings</p> </div> <div className="card box text center mb 3 text white"> <span>Rs. {data?.intransit_profit}/ </span> <p>Profit In Transit</p> </div> </div> </div> <div className="col md 8"> <div className="summray wrapper text white"> <div className="row"> <div className="col md 4 sub card"> <div className="card box text center mb 3"> <span>Rs. {data?.earning}/ </span> <p>Total Earning</p> </div> </div> <div className="col md 4 sub card"> <div className="card box text center mb 3"> <span>{data?.order_count}</span> <p>Total Orders</p> </div> </div> <div className="col md 4 sub card"> <div className="card box text center mb 3"> <span>{data?.delivered_return_count}</span> <p>Delivered/Return</p> </div> </div> <div className="col md 4 sub card"> <div className="card box text center mb 3"> <span>{data?.trax_delivered_return_count}</span> <p>Trax: Delivered/Return</p> </div> </div> <div className="col md 4 sub card"> <div className="card box text center mb 3"> <span>{data?.leopard_delivered_return_count}</span> <p>Leopard: Delivered/Return</p> </div> </div> <div className="col md 4"> <div className="card box text center mb 3" id="filter rcp"> <span>{data?.rcp_count}</span> <p>RCP</p> </div> </div> </div> </div> </div> </div> improve above design dont use use MUI use scss