coupon table

src/components/MyCoupons/MyCoupons.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import Layout from "../Partials/Layout";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
-import CouponTable from "../MyWallet/WalletComponent/CouponTable";
+import CouponTable from "./CouponTable";
 import usersService from '../../services/UsersService'
 
 export default function MyCoupons() {
@@ -33,10 +33,24 @@ export default function MyCoupons() {
         <>
             <Layout>
                 <div className="my-wallet-wrapper w-full mb-10">
-                              <div className='w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin'>
+                    {/* heading */}
+                    <div className="sm:flex justify-between items-center mb-6">
+                        <div className="mb-5 sm:mb-0">
+                            <h1 className="text-26 font-bold   text-dark-gray dark:text-white">
+
+                                Coupons
+
+                            </h1>
+                        </div>
+
+                        <div className="slider-btns flex space-x-4">
+
+                        </div>
+                    </div>
+                    <div className='w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin'>
 
                     {/* COUPON SECTION */}
-                    <div className="lg:w-3/4 w-full mb-10 lg:mb-0">
+                    <div className="lg:w-4/4 w-full mb-10 lg:mb-0">
                         <div className="wallet w-full  md:p-8 p-4 h-full max-h-[500px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
                             <h2 className='text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Coupons</h2>
                             {couponHistory.loading ?