diff --git a/backend/controllers/Admin/AcustomerController.js b/backend/controllers/Admin/AcustomerController.js
index 98b51c2a..a30bf995 100644
--- a/backend/controllers/Admin/AcustomerController.js
+++ b/backend/controllers/Admin/AcustomerController.js
@@ -11,6 +11,8 @@ export const getAllUsers = async (req, res) => {
     }
 }
 
+
+
 // Fetch single user by ID
 export const getUserById = async (req, res) => {
     try {
@@ -24,6 +26,7 @@ export const getUserById = async (req, res) => {
     }
 }
 
+
 // Update user by ID
 export const updateUserById = async (req, res) => {
     const {
@@ -96,3 +99,12 @@ export const validateUserPassword = async (req, res) => {
         res.status(500).json({ message: 'Error validating password', error })
     }
 }
+
+export const getUserCount = async (req, res) => {
+    try {
+        const count = await User.countDocuments()
+        res.status(200).json({ count })
+    } catch (error) {
+        res.status(500).json({ error: 'Error fetching user count' })
+    }
+}
\ No newline at end of file
diff --git a/backend/controllers/Admin/Afarmer.js b/backend/controllers/Admin/Afarmer.js
new file mode 100644
index 00000000..b30aff6c
--- /dev/null
+++ b/backend/controllers/Admin/Afarmer.js
@@ -0,0 +1,20 @@
+
+import Farmer from '../../models/farmerModel'
+import mongoose from 'mongoose'
+export const getFarmersCount = async (req, res) => {
+    try {
+        const count = await Farmer.countDocuments()
+        res.status(200).json({ count })
+    } catch (error) {
+        res.status(500).json({ error: 'Error fetching staff count' })
+    }
+}
+
+export const getAllFarmers = async (req, res) => {
+    try {
+        const farmer = await Farmer.find({}) // Change sorting to firstName
+        res.status(200).json(farmer)
+    } catch (error) {
+        res.status(500).json({ message: error.message })
+    }
+}
\ No newline at end of file
diff --git a/backend/controllers/DLDriverController.js b/backend/controllers/DLDriverController.js
index 9d2ed507..1461d761 100644
--- a/backend/controllers/DLDriverController.js
+++ b/backend/controllers/DLDriverController.js
@@ -378,3 +378,4 @@ export {
     verifyPassword,
     getAllDrivers,
 }
+
diff --git a/backend/controllers/couponController.js b/backend/controllers/couponController.js
index 11e8efca..dc23fe85 100644
--- a/backend/controllers/couponController.js
+++ b/backend/controllers/couponController.js
@@ -90,3 +90,11 @@ export const deleteCoupon = async (req, res) => {
         res.status(500).json({ message: error.message })
     }
 }
+export const getCouponCount = async (req, res) => {
+    try {
+        const count = await Coupon.countDocuments()
+        res.status(200).json({ count })
+    } catch (error) {
+        res.status(500).json({ error: 'Error fetching coupon count' })
+    }
+}
diff --git a/backend/controllers/farmerController.js b/backend/controllers/farmerController.js
index eaf92913..36dfa4d5 100644
--- a/backend/controllers/farmerController.js
+++ b/backend/controllers/farmerController.js
@@ -285,3 +285,20 @@ export {
     deleteFarmerAccount,
     getFarmerById,
 }
+export const getAllFarmers = async (req, res) => {
+    try {
+        const farmer = await Farmer.find({}) // Change sorting to firstName
+        res.status(200).json(farmer)
+    } catch (error) {
+        res.status(500).json({ message: error.message })
+    }
+}
+
+export const getFarmersCount = async (req, res) => {
+    try {
+        const count = await Farmer.countDocuments()
+        res.status(200).json({ count })
+    } catch (error) {
+        res.status(500).json({ error: 'Error fetching staff count' })
+    }
+}
\ No newline at end of file
diff --git a/backend/routes/Admin/AfarmerRoute.js b/backend/routes/Admin/AfarmerRoute.js
new file mode 100644
index 00000000..0a08cb23
--- /dev/null
+++ b/backend/routes/Admin/AfarmerRoute.js
@@ -0,0 +1,12 @@
+import express from 'express'
+import {
+    getFarmersCount,
+getAllFarmers,
+} from '../../controllers/Admin/Afarmer'
+
+const router = express.Router()
+
+router.get('/', getAllFarmers)
+router.post('/count', getFarmersCount)
+
+export default router
\ No newline at end of file
diff --git a/backend/routes/Admin/AuserRoute.js b/backend/routes/Admin/AuserRoute.js
index bafa6d31..bbcc635a 100644
--- a/backend/routes/Admin/AuserRoute.js
+++ b/backend/routes/Admin/AuserRoute.js
@@ -5,10 +5,13 @@ import {
     updateUserById,
     deleteUserById,
     validateUserPassword,
+    getUserCount
 } from '../../controllers/Admin/AcustomerController.js'
 
 const router = express.Router()
 
+router.get('/count',getUserCount)
+
 // Get all users
 router.get('/', getAllUsers)
 
diff --git a/backend/routes/couponRouter.js b/backend/routes/couponRouter.js
index 1303fd35..52f53b26 100644
--- a/backend/routes/couponRouter.js
+++ b/backend/routes/couponRouter.js
@@ -1,5 +1,6 @@
 import express from 'express'
 import {
+    getCouponCount,
     createCoupon,
     validCoupon,
     getAllCoupons,
@@ -10,6 +11,7 @@ import {
 
 const couponRouter = express.Router()
 
+couponRouter.get('/count', getCouponCount)
 couponRouter.post('/valid-coupon', validCoupon)
 couponRouter.post('/', createCoupon)
 couponRouter.get('/', getAllCoupons)
diff --git a/backend/routes/farmerRoute.js b/backend/routes/farmerRoute.js
index 3aed03d8..860c3ade 100644
--- a/backend/routes/farmerRoute.js
+++ b/backend/routes/farmerRoute.js
@@ -7,6 +7,8 @@ import {
     logoutFarmer,
     deleteFarmerAccount,
     getFarmerById,
+    getAllFarmers,
+    getFarmersCount,
 } from '../controllers/farmerController.js'
 import { protect } from '../middlewares/farmerauthMiddleware.js'
 
@@ -15,6 +17,9 @@ const router = express.Router()
 // Register a new farmer
 router.post('/register', registerFarmer)
 
+router.get('/',getAllFarmers)
+router.get('/count',getFarmersCount)
+
 // Authenticate farmer and get token
 router.post('/login', authFarmer)
 
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index fff3cad0..f44de65e 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -50,6 +50,7 @@ import AddStaff from './Pages/Admin/AaddStaff'
 import UpdateStaff from './Pages/Admin/AupdateStaff'
 import AddCoupon from './Pages/Admin/AaddCoupons'
 import UpdateCoupon from './Pages/Admin/AupdateCoupon'
+import AdminLayout from './Layouts/Alayout'
 import AdminLogin from './Components/Admin/admnlogins'
 
 // Farmer Pages
@@ -174,7 +175,8 @@ const router = createBrowserRouter(
             </Route>
 
             {/* Admin Routes */}
-            <Route path="/">
+            <Route path="/" element={<AdminLayout/>}>
+            
                 <Route path="/AdminDashboard" element={<AdminDashboard />} />
 
                 {/* Staff */}
diff --git a/frontend/src/Components/Admin/Aheader.jsx b/frontend/src/Components/Admin/Aheader.jsx
new file mode 100644
index 00000000..4f45e93b
--- /dev/null
+++ b/frontend/src/Components/Admin/Aheader.jsx
@@ -0,0 +1,29 @@
+import { Link } from 'react-router-dom'
+import logo from '../../assets/Logo.png'
+const Header = () => {
+    return (
+        <div>
+            <div className="flex items-center justify-between py-6 mx-auto border-b max-w-7xl">
+                <div>
+                    <Link to="/">
+                        <img src={logo} alt="Logo" width={160} height={160} />
+                    </Link>
+                </div>
+
+                <div className="flex items-center gap-4 text-sm">
+                    <div className="flex items-center gap-4">
+                        <h1>Welcome to FarmCart🌱 </h1>
+                        <Link
+                            to="/help"
+                            className="text-black hover:text-[#99DD05] cursor-pointer hover:underline text-sm"
+                        >
+                            Help & Support
+                        </Link>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default Header
diff --git a/frontend/src/Components/Admin/AsideBar.jsx b/frontend/src/Components/Admin/AsideBar.jsx
index c0e1021b..3d9d45cc 100644
--- a/frontend/src/Components/Admin/AsideBar.jsx
+++ b/frontend/src/Components/Admin/AsideBar.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
-import { FaHome, FaUsers, FaStore, FaCog, FaSignOutAlt } from 'react-icons/fa'
+import { FaHome, FaUsers, FaUserAlt, FaTags, FaChartLine, FaSignOutAlt } from 'react-icons/fa'
 
 const AdminSidebar = () => {
     return (
@@ -13,7 +13,7 @@ const AdminSidebar = () => {
                             className="flex items-center px-4 py-2 text-gray-700 hover:bg-green-500 hover:text-white rounded text-left"
                         >
                             <FaHome className="w-5 h-5 mr-3" />
-                            <span>Home</span>
+                            <span>Dashboard</span>
                         </Link>
                     </li>
                     <li>
@@ -30,17 +30,17 @@ const AdminSidebar = () => {
                             to="/users"
                             className="flex items-center px-4 py-2 text-gray-700 hover:bg-green-500 hover:text-white rounded text-left"
                         >
-                            <FaStore className="w-5 h-5 mr-3" />
+                            <FaUserAlt className="w-5 h-5 mr-3" />
                             <span>Users</span>
                         </Link>
                     </li>
                     <li>
                         <Link
-                            to="/coupens"
+                            to="/coupons"
                             className="flex items-center px-4 py-2 text-gray-700 hover:bg-green-500 hover:text-white rounded text-left"
                         >
-                            <FaCog className="w-5 h-5 mr-3" />
-                            <span>Coupens</span>
+                            <FaTags className="w-5 h-5 mr-3" />
+                            <span>Coupons</span>
                         </Link>
                     </li>
                     <li>
@@ -48,10 +48,19 @@ const AdminSidebar = () => {
                             to="/finance"
                             className="flex items-center px-4 py-2 text-gray-700 hover:bg-green-500 hover:text-white rounded text-left"
                         >
-                            <FaSignOutAlt className="w-5 h-5 mr-3" />
+                            <FaChartLine className="w-5 h-5 mr-3" />
                             <span>Finance</span>
                         </Link>
                     </li>
+                    <li>
+                        <Link
+                            to="/logout"
+                            className="flex items-center px-4 py-2 text-gray-700 hover:bg-green-500 hover:text-white rounded text-left"
+                        >
+                            <FaSignOutAlt className="w-5 h-5 mr-3" />
+                            <span>Logout</span>
+                        </Link>
+                    </li>
                 </ul>
             </nav>
         </div>
diff --git a/frontend/src/Components/Admin/DailyOrdersChart.jsx b/frontend/src/Components/Admin/DailyOrdersChart.jsx
index 1430ed7e..c2faf27f 100644
--- a/frontend/src/Components/Admin/DailyOrdersChart.jsx
+++ b/frontend/src/Components/Admin/DailyOrdersChart.jsx
@@ -102,27 +102,28 @@ const DailyOrdersChart = () => {
             }
         }
     }
-
-    return (
-        <div className="max-w-4xl mx-auto p-6 bg-white shadow-md rounded-lg mt-8">
-            <h2 className="text-2xl font-bold text-green-600 mb-6">
-                Daily Orders
-            </h2>
-            {chartData.labels ? (
-                <>
-                    <Line data={chartData} ref={chartRef} id="bidStatus" />
-                    <button
-                        onClick={downloadChart}
-                        className="mt-6 px-4 py-2 bg-green-500 text-white font-semibold rounded hover:bg-green-600"
-                    >
-                        Download Chart as PNG
-                    </button>
-                </>
-            ) : (
-                <p>Loading chart...</p>
-            )}
-        </div>
-    )
-}
-
-export default DailyOrdersChart
+  };
+
+  return (
+    <div className="max-w-4xl mx-auto p-6 bg-white shadow-md rounded-lg mt-8">
+      <h2 className="text-2xl font-bold text-black mb-6">Daily Orders</h2>
+      {chartData.labels ? (
+        <>
+          <Line data={chartData} ref={chartRef} id="bidStatus" />
+          <button
+  onClick={downloadChart}
+  className="mt-6 px-6 py-2 ml-0 border-2 rounded-full border-[#99DD05] text-grey font-semibold flex items-center gap-2 hover:bg-[#f5fce6] hover:text-black transition-all"
+>
+  Download Chart as PNG
+</button>
+ 
+
+        </>
+      ) : (
+        <p>Loading chart...</p>
+      )}
+    </div>
+  );
+};
+
+export default DailyOrdersChart;
diff --git a/frontend/src/Layouts/Alayout.jsx b/frontend/src/Layouts/Alayout.jsx
new file mode 100644
index 00000000..fdd9553f
--- /dev/null
+++ b/frontend/src/Layouts/Alayout.jsx
@@ -0,0 +1,21 @@
+import { Outlet } from 'react-router-dom'
+import Footer from '../Components/Home/FooterDashboard'
+import Header from '../Components/Admin/Aheader'
+
+function AdminLayout() {
+    return (
+        <>
+            <div className="sticky top-0 bg-white shadow-md bg-opacity-70 backdrop-blur-md z-50">
+                <Header />
+                
+            </div>
+
+            <Outlet />
+            <div className="sticky top-0 bg-white shadow-md bg-opacity-70 backdrop-blur-md z-50">
+                <Footer />
+            </div>
+        </>
+    )
+}
+
+export default AdminLayout
diff --git a/frontend/src/Pages/Admin/Acoupons.jsx b/frontend/src/Pages/Admin/Acoupons.jsx
index 6df6dc84..a9d02e80 100644
--- a/frontend/src/Pages/Admin/Acoupons.jsx
+++ b/frontend/src/Pages/Admin/Acoupons.jsx
@@ -20,6 +20,10 @@ import { FaRegEye } from 'react-icons/fa'
 import { MdDeleteSweep } from 'react-icons/md'
 import Loading from '../../Components/Loading.jsx'
 import Swal from 'sweetalert2'
+import jsPDF from 'jspdf'
+import 'jspdf-autotable'
+import logo from '../../assets/logo.PNG';
+import { FaDownload } from 'react-icons/fa';
 
 const Acoupon = () => {
     const [coupons, setCoupons] = useState([])
@@ -97,6 +101,83 @@ const Acoupon = () => {
         }
     }
 
+    const generateCouponPDF = () => {
+        const doc = new jsPDF();
+        const img = new Image();
+    
+        // Check if the logo is defined correctly
+        img.src = logo;
+    
+        // Ensure the image loads before adding it to the PDF
+        img.onload = () => {
+            // Add the logo after it's loaded
+            doc.addImage(img, 'PNG', 20, 35, 30, 5);
+    
+            // Add title below the logo
+            doc.setFontSize(15);
+            doc.text('Coupon List', 105, 40, null, null, 'center');
+    
+            // Prepare the table data
+            const tableColumn = ['Id', 'Coupon Code', 'Discount', 'Expiry Date'];
+            const tableRows = [];
+    
+            filteredCoupons.forEach((coupon, index) => {
+                const couponData = [
+                    index + 1,
+                    coupon.couponCode,
+                    `${coupon.discount}%`, // Assuming discount is a percentage
+                    coupon.expiryDate.split('T')[0], // Assuming expiryDate is in ISO format
+                ];
+                tableRows.push(couponData);
+            });
+    
+            // Add table to PDF
+            doc.autoTable({
+                head: [tableColumn],
+                body: tableRows,
+                startY: 50, // Positioning the table after the logo and title
+                styles: {
+                    fontSize: 9, // Adjust the table font size as needed
+                }
+            });
+    
+            // Save the generated PDF
+            doc.save('coupon-list.pdf');
+        };
+    
+        // If the logo image doesn't load or isn't available, you can skip adding it:
+        img.onerror = () => {
+            doc.setFontSize(15);
+            doc.text('Coupon List', 105, 40, null, null, 'center');
+    
+            const tableColumn = ['Id', 'Coupon Code', 'Discount', 'Expiry Date'];
+            const tableRows = [];
+    
+            filteredCoupons.forEach((coupon, index) => {
+                const couponData = [
+                    index + 1,
+                    coupon.couponCode,
+                    `${coupon.discount}%`,
+                    coupon.expiryDate.split('T')[0],
+                ];
+                tableRows.push(couponData);
+            });
+    
+            doc.autoTable({
+                head: [tableColumn],
+                body: tableRows,
+                startY: 50,
+                styles: {
+                    fontSize: 9,
+                }
+            });
+    
+            doc.save('coupon-list.pdf');
+        };
+    };
+    
+    
+
     const handleAddNewCoupon = () => {
         navigate('/addcoupons') // Adjust to your route for adding coupons
     }
@@ -121,25 +202,20 @@ const Acoupon = () => {
                 </aside>
 
                 <main className="flex-1 ml-60 p-24 pt-8 overflow-y-auto">
-                    <div className="flex justify-between items-center mb-8">
-                        <h3 className="text-lg font-semibold text-gray-800">
-                            Coupons
+                    <div className="flex justify-center items-center mb-8">
+                        <h3 className="text-2xl font-semibold text-gray-800">
+                            COUPON
                         </h3>
-                        <button
-                            onClick={handleAddNewCoupon}
-                            className="bg-green-500 text-white hover:bg-green-600 font-semibold py-2 px-4 rounded text-center"
-                        >
-                            Add New Coupon
-                        </button>
                     </div>
                     <div className="w-96 mb-6">
-                        <Input
-                            isClearable
-                            radius="full"
-                            placeholder="Search coupons..."
-                            onChange={(e) => setSearch(e.target.value)}
-                        />
-                    </div>
+    <Input
+        isClearable
+        radius="full"
+        placeholder="Search staff..."
+        onChange={(e) => setSearch(e.target.value)}
+        className="rounded-full border-[#99DD05] border-2 focus:border-[#99DD05] focus:ring-[#99DD05] placeholder-green-500" // Add custom classes here
+    />
+</div>
 
                     <Table
                         aria-label="Coupons Table"
@@ -226,6 +302,22 @@ const Acoupon = () => {
                             ))}
                         </TableBody>
                     </Table>
+                    <div className="mt-8 flex justify-end space-x-4">
+                    <button
+        onClick={handleAddNewCoupon}
+        className="max-w-5xl px-5 py-3 border-2 rounded-full border-[#99DD05] flex items-center gap-3 hover:bg-[#f5fce6] hover:cursor-pointer transition-transform transform hover:scale-105"
+    >
+        Add Coupon
+    </button>
+    <button
+        onClick={generateCouponPDF}
+        className="max-w-5xl px-5 py-3 border-2 rounded-full border-[#99DD05] flex items-center gap-3 hover:bg-[#f5fce6] hover:cursor-pointer transition-transform transform hover:scale-105"
+    >
+        <FaDownload size={20} />
+        Download
+    </button>
+</div>
+
 
                     {/* Add modal for confirmation if required */}
                 </main>
diff --git a/frontend/src/Pages/Admin/Adashboard.jsx b/frontend/src/Pages/Admin/Adashboard.jsx
index 5be7eaec..e0b2a22f 100644
--- a/frontend/src/Pages/Admin/Adashboard.jsx
+++ b/frontend/src/Pages/Admin/Adashboard.jsx
@@ -3,13 +3,17 @@ import axios from '../../axios.jsx'
 import Sidebar from '../../Components/Admin/AsideBar.jsx'
 import Loading from '../../Components/Loading.jsx'
 import DailyOrdersChart from '../../Components/Admin/DailyOrdersChart.jsx'
+import { FaUsers, FaUserTie, FaTags, FaTruck, FaStore, FaDollarSign } from 'react-icons/fa';
+
 
 const Dashboard = () => {
     const [customerCount, setCustomerCount] = useState(0)
+    const [farmercount, setFarmerCount] = useState(0)
+    const [driverCount, setDriverCount] = useState(0)
     const [staffCount, setStaffCount] = useState(0)
     const [totalRevenue, setTotalRevenue] = useState(0) // Assuming you have revenue data
     const [loading, setLoading] = useState(true)
-
+    const [couponCount, setCouponCount] = useState(0)
     // Fetch dashboard data
     useEffect(() => {
         const fetchData = async () => {
@@ -23,7 +27,18 @@ const Dashboard = () => {
                 // Fetch staff count
                 const staffResponse = await axios.get('/staff/count')
                 setStaffCount(staffResponse.data.count)
+                //fetch coupon count
+                const couponResponse = await axios.get('/coupon/count')
+                setCouponCount(couponResponse.data.count)
+
+                const customerResponse = await axios.get('/customers/count')
+                setCustomerCount(customerResponse.data.count)
 
+                const farmerResponse = await axios.get('/farmers/count')
+                setFarmerCount(farmerResponse.data.count)
+
+                const driverResponse = await axios.get('/drivers/count')
+                setDriverCount(driverResponse.data.count)
                 // Assuming there's an endpoint for total revenue (adjust or remove if unnecessary)
                 const revenueResponse = await axios.get('/revenue/total')
                 setTotalRevenue(revenueResponse.data.total)
@@ -53,20 +68,74 @@ const Dashboard = () => {
                 </aside>
 
                 <main className="flex-1 ml-60 p-24 pt-8 overflow-y-auto">
-                    <div className="flex justify-between items-center mb-8">
-                        <h3 className="text-lg font-semibold text-gray-800">
-                            Dashboard
+                    <div className="flex justify-center items-center mb-8">
+                        <h3 className="text-lg font-semibold text-gray-800 text-center">
+                          DASHBOARD
                         </h3>
                     </div>
 
                     <div className="grid grid-cols-3 gap-8 mb-6">
-                        {/*       <Card title="Total Customers" count={customerCount} /> */}
-                        <Card title="Total Staff" count={staffCount} />
-                        <Card
-                            title="Total Revenue"
-                            count={`$${totalRevenue.toFixed(2)}`}
-                        />
-                    </div>
+    {/* Total Staff */}
+    <Card
+        title={
+            <>
+                <FaUserTie className="inline-block mr-2" /> Total Staff
+            </>
+        }
+        count={staffCount}
+    />
+
+    {/* Total Coupon */}
+    <Card
+        title={
+            <>
+                <FaTags className="inline-block mr-2" /> Total Coupon
+            </>
+        }
+        count={couponCount}
+    />
+
+    {/* Total Customers */}
+    <Card
+        title={
+            <>
+                <FaUsers className="inline-block mr-2" /> Total Customers
+            </>
+        }
+        count={customerCount}
+    />
+
+    {/* Total Drivers */}
+    <Card
+        title={
+            <>
+                <FaTruck className="inline-block mr-2" /> Total Drivers
+            </>
+        }
+        count={driverCount}
+    />
+
+    {/* Total Farmers */}
+    <Card
+        title={
+            <>
+                <FaStore className="inline-block mr-2" /> Total Farmers
+            </>
+        }
+        count={farmercount}
+    />
+
+    {/* Total Revenue */}
+    <Card
+        title={
+            <>
+                <FaDollarSign className="inline-block mr-2" /> Total Revenue
+            </>
+        }
+        count={`$${totalRevenue.toFixed(2)}`}
+    />
+</div>
+
 
                     {/* Additional dashboard content can be added here */}
                     <DailyOrdersChart />
@@ -79,13 +148,14 @@ const Dashboard = () => {
 // Card component to display each metric
 const Card = ({ title, count }) => {
     return (
-        <div className="bg-white p-6 shadow-md rounded-lg text-center">
+        <div className="bg-white p-6 shadow-md rounded-lg text-center border-2 border-green-500 hover:bg-lime-100 transition-colors duration-300">
             <h2 className="text-lg font-semibold mb-2 text-gray-700">
                 {title}
             </h2>
             <p className="text-3xl font-bold text-green-500">{count}</p>
         </div>
-    )
+    );
 }
 
+
 export default Dashboard
diff --git a/frontend/src/Pages/Admin/Afinance.jsx b/frontend/src/Pages/Admin/Afinance.jsx
index 6b111430..d0730228 100644
--- a/frontend/src/Pages/Admin/Afinance.jsx
+++ b/frontend/src/Pages/Admin/Afinance.jsx
@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from 'react'
-import axios from '../../axios.jsx'
-import Sidebar from '../../Components/Admin/AsideBar.jsx' // Make sure to update the path if necessary
-import { useNavigate, Link } from 'react-router-dom'
+import axios from '../../axios'
+import Sidebar from '../../Components/Admin/AsideBar.jsx'
+import { useNavigate } from 'react-router-dom'
 import { useDisclosure } from '@nextui-org/react'
 import {
     Input,
@@ -13,11 +13,291 @@ import {
     TableHeader,
     TableRow,
     Tooltip,
+    Button,
 } from '@nextui-org/react'
 import { FaRegEye } from 'react-icons/fa'
 import { MdDeleteSweep } from 'react-icons/md'
+import Loading from '../../Components/Loading'
+import Swal from 'sweetalert2'
+import jsPDF from 'jspdf'
+import 'jspdf-autotable'
+import logo from '../../assets/logo.PNG';
+import { FaDownload } from 'react-icons/fa';
+
+
 const Finance = () => {
-    return <div>finance</div>
+    const [staffMembers, setStaffMembers] = useState([])
+    const [loading, setLoading] = useState(true)
+    const [refetch, setRefetch] = useState(false)
+    const [page, setPage] = useState(1)
+    const [search, setSearch] = useState('')
+
+    const rowsPerPage = 4
+    const navigate = useNavigate()
+
+    // Fetch staff members
+    useEffect(() => {
+        const fetchStaffMembers = async () => {
+            setLoading(true)
+            try {
+                const { data } = await axios.get('/staff')
+                setStaffMembers(data)
+            } catch (error) {
+                console.error('Error fetching staff members:', error)
+            } finally {
+                setLoading(false)
+            }
+        }
+
+        fetchStaffMembers()
+    }, [refetch])
+
+    // Search functionality
+    const filteredStaff = useMemo(() => {
+        return staffMembers.filter((member) =>
+            `${member.firstName} ${member.lastName}`
+                .toLowerCase()
+                .includes(search.toLowerCase())
+        )
+    }, [search, staffMembers])
+
+    // Pagination
+    const items = useMemo(() => {
+        const start = (page - 1) * rowsPerPage
+        const end = start + rowsPerPage
+        return filteredStaff.slice(start, end)
+    }, [page, filteredStaff])
+
+    const pages = Math.ceil(filteredStaff.length / rowsPerPage)
+
+    const handleDeleteStaff = async (staffId) => {
+        const result = await Swal.fire({
+            title: 'Are you sure?',
+            text: 'Do you really want to delete this staff member? This process cannot be undone.',
+            icon: 'warning',
+            showCancelButton: true,
+            confirmButtonText: 'Yes',
+            cancelButtonText: 'Cancel',
+        })
+
+        if (result.isConfirmed) {
+            try {
+                await axios.delete(`/staff/${staffId}`)
+                Swal.fire(
+                    'Deleted!',
+                    'Staff member has been deleted.',
+                    'success'
+                )
+                setRefetch((prev) => !prev)
+            } catch (error) {
+                console.error('Error deleting staff:', error)
+                Swal.fire(
+                    'Error!',
+                    'There was an error deleting the staff member.',
+                    'error'
+                )
+            }
+        }
+    }
+
+    const handleAddNewStaff = () => {
+        navigate('/AddStaff')
+    }
+
+    const handleEditStaff = (memberId) => {
+        navigate(`/updatestaff/${memberId}`)
+    }
+
+    // PDF Generation
+    const generatePDF = () => {
+        const doc = new jsPDF()
+        const img = new Image();
+        img.src = logo;
+        // Add logo
+        doc.addImage(img, 'PNG', 20, 35, 30, 5); // Adjust the X, Y, width, and height as needed // Adjust x, y, width, height as needed
+
+        // Add title below the logo
+        doc.setFontSize(15)
+        doc.text('Staff List', 105, 40, null, null, 'center') // Centered below logo
+
+        // Prepare the table data
+        const tableColumn = ['Id', 'Full Name','NIC','Email','Birth Day','Address','Role']
+        const tableRows = []
+
+        filteredStaff.forEach((member, index) => {
+            const memberData = [
+                index + 1,
+                `${member.firstName} ${member.lastName}`,
+                member.nic,
+                member.email,
+                member.birthday.split('T')[0],
+                `${member.Address.home} ${member.Address.street} ${member.Address.city}`,
+                member.role
+                
+            ]
+            tableRows.push(memberData)
+        })
+
+        // Add table to PDF
+        doc.autoTable({
+            head: [tableColumn],
+            body: tableRows,
+            startY: 50, // Positioning the table after the logo and title
+            styles: {
+                fontSize: 9 // Adjust this value to make the table content smaller
+            }
+        })
+
+        doc.save('staff-list.pdf')
+    }
+
+    if (loading) {
+        return (
+            <div className="flex flex-1 min-h-screen justify-center items-center">
+                <Loading />
+            </div>
+        )
+    }
+
+  
+    return (
+        <div className="flex flex-col min-h-screen bg-gray-50">
+            <div className="flex flex-1 mt-16">
+                <aside className="fixed top-0 left-0 bottom-0 w-64 bg-gray-50 shadow-md pl-8 pt-16 mt-16">
+                    <Sidebar />
+                </aside>
+
+                <main className="flex-1 ml-60 p-24 pt-8 overflow-y-auto">
+                <div className="flex justify-center mb-8">
+                    <h3 className="text-2xl font-semibold text-gray-800">
+                         STAFF
+                    </h3>
+                </div>
+
+                <div className="w-96 mb-6">
+    <Input
+        isClearable
+        radius="full"
+        placeholder="Search staff..."
+        onChange={(e) => setSearch(e.target.value)}
+        className="rounded-full border-[#99DD05] border-2 focus:border-[#99DD05] focus:ring-[#99DD05] placeholder-green-500" // Add custom classes here
+    />
+</div>
+
+
+                    <Table
+                        aria-label="Staff Members Table"
+                        bottomContent={
+                            <div className="flex w-full justify-center">
+                                <Pagination
+                                    isCompact
+                                    showControls
+                                    showShadow
+                                    color="primary"
+                                    page={page}
+                                    total={pages}
+                                    onChange={(page) => setPage(page)}
+                                />
+                            </div>
+                        }
+                    >
+                        <TableHeader>
+                            <TableColumn>Id</TableColumn>
+                            <TableColumn>Full Name</TableColumn>
+                            <TableColumn>NIC</TableColumn>
+                            <TableColumn>Email</TableColumn>
+                            <TableColumn>Birthday</TableColumn>
+                            <TableColumn>Address</TableColumn>
+                            <TableColumn>Role</TableColumn>
+                            <TableColumn>Action</TableColumn>
+
+                            
+                        </TableHeader>
+                        <TableBody>
+                            {items.map((member, index) => (
+                                <TableRow
+                                    key={member._id}
+                                    className="border-b-1"
+                                >
+                                    <TableCell>{index + 1}</TableCell>
+                                    <TableCell>{`${member.firstName} ${member.lastName}`}</TableCell>
+                                    <TableCell>{member.nic}</TableCell>
+                                    <TableCell>{member.email}</TableCell>
+                                    <TableCell>{member.birthday.split('T')[0]}</TableCell>
+                                    <TableCell>{`${member.Address.home} ${member.Address.street} ${member.Address.city}`}</TableCell>
+                                    <TableCell>{member.role}</TableCell>
+                                    <TableCell className="flex gap-6 justify-center items-center h-16">
+                                        <Tooltip
+                                            color="secondary"
+                                            content="More details"
+                                        >
+                                            <span className="text-lg text-blue-700 cursor-pointer active:opacity-50">
+                                                <FaRegEye
+                                                    onClick={() => {
+                                                        // Open the modal for more details if implemented
+                                                    }}
+                                                />
+                                            </span>
+                                        </Tooltip>
+                                        <Tooltip
+                                            color="warning"
+                                            content="Edit staff"
+                                        >
+                                            <span className="text-lg text-warning cursor-pointer active:opacity-50">
+                                                <Button
+                                                    onClick={() =>
+                                                        handleEditStaff(
+                                                            member._id
+                                                        )
+                                                    }
+                                                >
+                                                    Edit
+                                                </Button>
+                                            </span>
+                                        </Tooltip>
+                                        <Tooltip
+                                            color="danger"
+                                            content="Delete staff"
+                                        >
+                                            <span className="text-lg text-danger cursor-pointer active:opacity-50">
+                                                <MdDeleteSweep
+                                                    onClick={() => {
+                                                        handleDeleteStaff(
+                                                            member._id
+                                                        )
+                                                    }}
+                                                />
+                                            </span>
+                                        </Tooltip>
+                                    </TableCell>
+                                </TableRow>
+                            ))}
+                        </TableBody>
+                    </Table>
+                    <div className="flex justify-end space-x-4 mt-5">
+                    <button
+        onClick={handleAddNewStaff}
+        className="max-w-5xl px-5 py-3 border-2 rounded-full border-[#99DD05] flex items-center gap-3 hover:bg-[#f5fce6] hover:cursor-pointer transition-transform transform hover:scale-105"
+    >
+        Add New Staff
+    </button>
+    <button
+        onClick={generatePDF}
+        className="max-w-5xl px-5 py-3 border-2 rounded-full border-[#99DD05] flex items-center gap-3 hover:bg-[#f5fce6] hover:cursor-pointer transition-transform transform hover:scale-105"
+    >
+        <FaDownload size={20} />
+        Export Staff list
+    </button>
+
+</div>
+
+
+
+                </main>
+            </div>
+        </div>
+    )
 }
 
 export default Finance
+
diff --git a/frontend/src/Pages/Admin/Astaff.jsx b/frontend/src/Pages/Admin/Astaff.jsx
index 454399c2..29909e11 100644
--- a/frontend/src/Pages/Admin/Astaff.jsx
+++ b/frontend/src/Pages/Admin/Astaff.jsx
@@ -19,6 +19,12 @@ import { FaRegEye } from 'react-icons/fa'
 import { MdDeleteSweep } from 'react-icons/md'
 import Loading from '../../Components/Loading'
 import Swal from 'sweetalert2'
+import jsPDF from 'jspdf'
+import 'jspdf-autotable'
+import logo from '../../assets/logo.PNG';
+import { FaDownload } from 'react-icons/fa';
+import Header from '../../Components/Admin/Aheader.jsx'
+
 
 const Staff = () => {
     const [staffMembers, setStaffMembers] = useState([])
@@ -27,7 +33,7 @@ const Staff = () => {
     const [page, setPage] = useState(1)
     const [search, setSearch] = useState('')
 
-    const rowsPerPage = 5
+    const rowsPerPage = 4
     const navigate = useNavigate()
 
     // Fetch staff members
@@ -103,6 +109,49 @@ const Staff = () => {
         navigate(`/updatestaff/${memberId}`)
     }
 
+    // PDF Generation
+    const generatePDF = () => {
+        const doc = new jsPDF()
+        const img = new Image();
+        img.src = logo;
+        // Add logo
+        doc.addImage(img, 'PNG', 20, 35, 30, 5); // Adjust the X, Y, width, and height as needed // Adjust x, y, width, height as needed
+
+        // Add title below the logo
+        doc.setFontSize(15)
+        doc.text('Staff List', 105, 40, null, null, 'center') // Centered below logo
+
+        // Prepare the table data
+        const tableColumn = ['Id', 'Full Name','NIC','Email','Birth Day','Address','Role']
+        const tableRows = []
+
+        filteredStaff.forEach((member, index) => {
+            const memberData = [
+                index + 1,
+                `${member.firstName} ${member.lastName}`,
+                member.nic,
+                member.email,
+                member.birthday.split('T')[0],
+                `${member.Address.home} ${member.Address.street} ${member.Address.city}`,
+                member.role
+                
+            ]
+            tableRows.push(memberData)
+        })
+
+        // Add table to PDF
+        doc.autoTable({
+            head: [tableColumn],
+            body: tableRows,
+            startY: 50, // Positioning the table after the logo and title
+            styles: {
+                fontSize: 9 // Adjust this value to make the table content smaller
+            }
+        })
+
+        doc.save('staff-list.pdf')
+    }
+
     if (loading) {
         return (
             <div className="flex flex-1 min-h-screen justify-center items-center">
@@ -111,6 +160,7 @@ const Staff = () => {
         )
     }
 
+  
     return (
         <div className="flex flex-col min-h-screen bg-gray-50">
             <div className="flex flex-1 mt-16">
@@ -119,25 +169,22 @@ const Staff = () => {
                 </aside>
 
                 <main className="flex-1 ml-60 p-24 pt-8 overflow-y-auto">
-                    <div className="flex justify-between items-center mb-8">
-                        <h3 className="text-lg font-semibold text-gray-800">
-                            Staff Members
-                        </h3>
-                        <button
-                            onClick={handleAddNewStaff}
-                            className="bg-green-500 text-white hover:bg-green-600 font-semibold py-2 px-4 rounded text-center"
-                        >
-                            Add New Staff
-                        </button>
-                    </div>
-                    <div className="w-96 mb-6">
-                        <Input
-                            isClearable
-                            radius="full"
-                            placeholder="Search staff..."
-                            onChange={(e) => setSearch(e.target.value)}
-                        />
-                    </div>
+                <div className="flex justify-center mb-8">
+                    <h3 className="text-2xl font-semibold text-gray-800">
+                         STAFF
+                    </h3>
+                </div>
+
+                <div className="w-96 mb-6">
+    <Input
+        isClearable
+        radius="full"
+        placeholder="Search staff..."
+        onChange={(e) => setSearch(e.target.value)}
+        className="rounded-full border-[#99DD05] border-2 focus:border-[#99DD05] focus:ring-[#99DD05] placeholder-green-500" // Add custom classes here
+    />
+</div>
+
 
                     <Table
                         aria-label="Staff Members Table"
@@ -158,9 +205,14 @@ const Staff = () => {
                         <TableHeader>
                             <TableColumn>Id</TableColumn>
                             <TableColumn>Full Name</TableColumn>
+                            <TableColumn>NIC</TableColumn>
                             <TableColumn>Email</TableColumn>
+                            <TableColumn>Birthday</TableColumn>
+                            <TableColumn>Address</TableColumn>
                             <TableColumn>Role</TableColumn>
                             <TableColumn>Action</TableColumn>
+
+                            
                         </TableHeader>
                         <TableBody>
                             {items.map((member, index) => (
@@ -170,7 +222,10 @@ const Staff = () => {
                                 >
                                     <TableCell>{index + 1}</TableCell>
                                     <TableCell>{`${member.firstName} ${member.lastName}`}</TableCell>
+                                    <TableCell>{member.nic}</TableCell>
                                     <TableCell>{member.email}</TableCell>
+                                    <TableCell>{member.birthday.split('T')[0]}</TableCell>
+                                    <TableCell>{`${member.Address.home} ${member.Address.street} ${member.Address.city}`}</TableCell>
                                     <TableCell>{member.role}</TableCell>
                                     <TableCell className="flex gap-6 justify-center items-center h-16">
                                         <Tooltip
@@ -220,8 +275,25 @@ const Staff = () => {
                             ))}
                         </TableBody>
                     </Table>
+                    <div className="flex justify-end space-x-4 mt-5">
+                    <button
+        onClick={handleAddNewStaff}
+        className="max-w-5xl px-5 py-3 border-2 rounded-full border-[#99DD05] flex items-center gap-3 hover:bg-[#f5fce6] hover:cursor-pointer transition-transform transform hover:scale-105"
+    >
+        Add New Staff
+    </button>
+    <button
+        onClick={generatePDF}
+        className="max-w-5xl px-5 py-3 border-2 rounded-full border-[#99DD05] flex items-center gap-3 hover:bg-[#f5fce6] hover:cursor-pointer transition-transform transform hover:scale-105"
+    >
+        <FaDownload size={20} />
+        Export Staff list
+    </button>
+
+</div>
+
+
 
-                    {/* Add modal for confirmation if required */}
                 </main>
             </div>
         </div>
diff --git a/frontend/src/Pages/Admin/Ausers.jsx b/frontend/src/Pages/Admin/Ausers.jsx
index 9eb10448..d7f8627e 100644
--- a/frontend/src/Pages/Admin/Ausers.jsx
+++ b/frontend/src/Pages/Admin/Ausers.jsx
@@ -1,6 +1,8 @@
 import { useEffect, useState, useMemo } from 'react'
 import axios from '../../axios'
 import Sidebar from '../../Components/Admin/AsideBar'
+import { FaRegEye } from 'react-icons/fa'
+import { MdDeleteSweep } from 'react-icons/md'
 import { useNavigate } from 'react-router-dom'
 import {
     Input,
@@ -16,6 +18,11 @@ import {
 } from '@nextui-org/react'
 import Swal from 'sweetalert2'
 
+import jsPDF from 'jspdf'
+import 'jspdf-autotable'
+import logo from '../../assets/logo.PNG';
+import { FaDownload } from 'react-icons/fa';
+
 const CustomerList = () => {
     const [customers, setCustomers] = useState([])
     const [loading, setLoading] = useState(true)
@@ -43,8 +50,10 @@ const CustomerList = () => {
 
     // Search functionality
     const filteredCustomers = useMemo(() => {
-        return customers.filter(
-            (customer) => customer.firstname || customer.lastname
+        return customers.filter((customer) =>
+            `${customer.firstname} ${customer.lastname}`
+                .toLowerCase()
+                .includes(search.toLowerCase())
         )
     }, [search, customers])
 
@@ -87,68 +96,155 @@ const CustomerList = () => {
         navigate(`/updateCustomer/${customerId}`)
     }
 
+    const generateCustomerPDF = () => {
+        const doc = new jsPDF();
+        const img = new Image();
+        img.src = logo; // Assuming you have the logo stored or imported as "logo"
+        
+        // Add logo to PDF
+        doc.addImage(img, 'PNG', 20, 35, 30, 5); // Adjust position (x, y, width, height) as needed
+        
+        // Add title below the logo
+        doc.setFontSize(15);
+        doc.text('Customer List', 105, 40, null, null, 'center'); // Centered below logo
+    
+        // Prepare the table data
+        const tableColumn = ['Id', 'First Name', 'Last Name', 'Email', 'Membership', 'Contact Number'];
+        const tableRows = [];
+    
+        // Loop through filtered customer data and format it for the table
+        filteredCustomers.forEach((customer, index) => {
+            const customerData = [
+                index + 1,
+                customer.firstname,
+                customer.lastname,
+                customer.email,
+                customer.membershipType, // Assuming membershipType exists in customer data
+                customer.contactNumber // Assuming contactNumber exists in customer data
+            ];
+            tableRows.push(customerData);
+        });
+    
+        // Add table to PDF
+        doc.autoTable({
+            head: [tableColumn],
+            body: tableRows,
+            startY: 50, // Positioning the table after the logo and title
+            styles: {
+                fontSize: 9 // Adjust this value to make the table content smaller
+            }
+        });
+    
+        // Save the PDF
+        doc.save('customer-list.pdf');
+    };
+    
+
     if (loading) {
-        return <div>Loading...</div>
+        return (
+            <div className="flex flex-1 min-h-screen justify-center items-center">
+                <span>Loading...</span>
+            </div>
+        )
     }
 
     return (
-        <div className="flex min-h-screen bg-gray-50">
-            <aside className="fixed top-0 left-0 bottom-0 w-64 bg-gray-50 shadow-md pl-8 pt-16 mt-16">
-                <Sidebar />
-            </aside>
-            <main className="flex-1 ml-64 p-24 pt-8">
-                <div className="flex justify-between items-center mb-8">
-                    <h3 className="text-lg font-semibold">Customers</h3>
-                    <Input
-                        isClearable
-                        placeholder="Search customers..."
-                        onChange={(e) => setSearch(e.target.value)}
-                    />
-                </div>
-                <Table aria-label="Customers Table">
-                    <TableHeader>
-                        <TableColumn>Id</TableColumn>
-                        <TableColumn>First Name</TableColumn>
-                        <TableColumn>Last Name</TableColumn>
-                        <TableColumn>Email</TableColumn>
-                        <TableColumn>Action</TableColumn>
-                    </TableHeader>
-                    <TableBody>
-                        {items.map((customer, index) => (
-                            <TableRow key={customer._id}>
-                                <TableCell>{index + 1}</TableCell>
-                                <TableCell>{customer.firstname}</TableCell>
-                                <TableCell>{customer.lastname}</TableCell>
-                                <TableCell>{customer.email}</TableCell>
-                                <TableCell>
-                                    <Button
-                                        onClick={() =>
-                                            handleEditCustomer(customer._id)
-                                        }
-                                    >
-                                        Edit
-                                    </Button>
-                                    <Button
-                                        color="danger"
-                                        onClick={() =>
-                                            handleDeleteCustomer(customer._id)
-                                        }
-                                    >
-                                        Delete
-                                    </Button>
-                                </TableCell>
-                            </TableRow>
-                        ))}
-                    </TableBody>
-                </Table>
-                <Pagination
-                    isCompact
-                    showControls
-                    page={page}
-                    total={pages}
-                    onChange={(page) => setPage(page)}
-                />
-            </main>
+        <div className="flex flex-col min-h-screen bg-gray-50">
+            <div className="flex flex-1 mt-16">
+                <aside className="fixed top-0 left-0 bottom-0 w-64 bg-gray-50 shadow-md pl-8 pt-16 mt-16">
+                    <Sidebar />
+                </aside>
+
+                <main className="flex-1 ml-60 p-24 pt-8 overflow-y-auto">
+                    <div className="flex justify-center mb-8">
+                        <h3 className="text-2xl font-semibold text-gray-800">
+                            CUSTOMERS
+                        </h3>
+                    </div>
+
+                    <div className="w-96 mb-6">
+                        <Input
+                            isClearable
+                            radius="full"
+                            placeholder="Search customers..."
+                            onChange={(e) => setSearch(e.target.value)}
+                            className="rounded-full border-[#99DD05] border-2 focus:border-[#99DD05] focus:ring-[#99DD05] placeholder-green-500"
+                        />
+                    </div>
+
+                    <Table
+                        aria-label="Customers Table"
+                        bottomContent={
+                            <div className="flex w-full justify-center">
+                                <Pagination
+                                    isCompact
+                                    showControls
+                                    showShadow
+                                    color="primary"
+                                    page={page}
+                                    total={pages}
+                                    onChange={(page) => setPage(page)}
+                                />
+                            </div>
+                        }
+                    >
+                        <TableHeader>
+                            <TableColumn>Id</TableColumn>
+                            <TableColumn>First Name</TableColumn>
+                            <TableColumn>Last Name</TableColumn>
+                            <TableColumn>Email</TableColumn>
+                            <TableColumn>Action</TableColumn>
+                        </TableHeader>
+                        <TableBody>
+                            {items.map((customer, index) => (
+                                <TableRow key={customer._id}>
+                                    <TableCell>{index + 1}</TableCell>
+                                    <TableCell>{customer.firstname}</TableCell>
+                                    <TableCell>{customer.lastname}</TableCell>
+                                    <TableCell>{customer.email}</TableCell>
+                                    <TableCell className="flex gap-6 justify-center items-center h-16">
+                                        <Tooltip
+                                            color="warning"
+                                            content="Edit customer"
+                                        >
+                                        </Tooltip>
+                                        <Tooltip
+                                            color="danger"
+                                            content="Delete customer"
+                                        >
+                                            <span className="text-lg text-danger cursor-pointer active:opacity-50">
+                                                <MdDeleteSweep
+                                                    onClick={() => {
+                                                        handleDeleteCustomer(
+                                                            member._id
+                                                        )
+                                                    }}
+                                                />
+                                            </span>
+                                        </Tooltip>
+                                    </TableCell>
+                                </TableRow>
+                            ))}
+                        </TableBody>
+                    </Table>
+
+                    <div className="flex justify-end space-x-4 mt-5">
+                        <button
+                            onClick={() => navigate('/addCustomer')}
+                            className="max-w-5xl px-5 py-3 border-2 rounded-full border-[#99DD05] flex items-center gap-3 hover:bg-[#f5fce6] hover:cursor-pointer transition-transform transform hover:scale-105"
+                        >
+                            Add New Customer
+                        </button>
+                        <button
+        onClick={generateCustomerPDF}
+        className="max-w-5xl px-5 py-3 border-2 rounded-full border-[#99DD05] flex items-center gap-3 hover:bg-[#f5fce6] hover:cursor-pointer transition-transform transform hover:scale-105"
+    >
+        <FaDownload size={20} />
+        Export Staff list
+    </button>
+                    </div>
+                </main>
+            </div>
         </div>
     )
 }