" new update"

src/assets/css/App.css

@@ -37,6 +37,7 @@ body {
   color: #000;
   box-shadow: none;
 }
+
 .btn-primary {
 
   width: 100px;
@@ -108,6 +109,7 @@ body {
   padding: 10px 20px;
   border-radius: 10px;
   display: flex;
+  
   justify-content: space-between;
   box-shadow: 0px 0px 10px rgba(66, 71, 76, 0.08);
   align-items: center;
@@ -122,6 +124,7 @@ body {
   color: #ffffff; /* Active link color */
   background-color: #282e26;
   border-radius: 20px;
+  padding: 10px 15px;
   font-weight: bold; /* Bold text for active link */
 }
 .nav-list {
@@ -142,7 +145,7 @@ body {
 }
 .nav-link {
   font-family: "Manrope";
-  font-size: 18px !important;
+  font-size: 16px !important;
   color: #002300;
   
   text-decoration: none;
@@ -494,6 +497,7 @@ body {
 }
 .search-container input {
   width: 100%;
+  color: #000;
   height: 50px;
   background: #f4f4f4;
   border-radius: 50px;
@@ -503,7 +507,7 @@ body {
   box-sizing: border-box;
 }
 .search-container input::placeholder {
-  color: #ffffff;
+  color: #282E26;
 }
 .search-container input:focus {
   outline: none;
@@ -789,7 +793,8 @@ h3 {
 
 
 .table-responsive th {
-  background-color: #f4f4f4;
+  background-color: #282e26;
+  color: white;
 }
 .table-responsives {
   border: 0.5px solid #f4f4f4;
@@ -858,6 +863,7 @@ h5 {
   background-color: white;
   border-radius: 0.5rem;
 }
+
 .modal-header,
 .modal-body,
 .modal-footer {

src/components/Pages/AppPAges/Dashboard/Invoice/Invoice.css

@@ -94,7 +94,7 @@
 
 .input-group .form-control {
     border: none;
-    /* background-color: transparent; */
+    background-color: transparent;
     outline: none;  /* Removes the outline */
 
 }

src/components/Pages/AppPAges/Expense/expense.js

@@ -811,6 +811,7 @@ export default function Expense() {
                   </h5>
 
                   <svg
+
                     onClick={toggleModal}
                     width="14"
                     height="14"
@@ -1119,13 +1120,13 @@ export default function Expense() {
                           </label>
                         ))}
                       </div>
-)}
+                    )}
 
 
 
                     {(formData.pay_method_status === "pay_later" ||
                       formData.pay_method_status === "credit_invoice") && (
-                        <div className="col-md-6 d-flex" style={{ paddingRight: "10px", marginTop:'20px' }}>
+                        <div className="col-md-6 d-flex" style={{ paddingRight: "10px", marginTop: '20px' }}>
                           <select
                             className="form-control col-md-6 me-2"
                             name="days"
@@ -1347,12 +1348,13 @@ export default function Expense() {
                     type="button"
                     className="btn btn-secondary-outline"
                     onClick={toggleModal}
+                    style={{ border: " 1px solid #282e26", borderRadius: '20px' }}
                   >
                     Close
                   </button>
                   <button
                     type="submit"
-                    style={{backgroundColor:'#282E26' ,color:"#fff"}}
+                    style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px' }}
                     className="btn"
                     onClick={handleSubmit}
                   >

src/components/Pages/AppPAges/Gas/GasTypeTable.js

@@ -296,7 +296,7 @@ const GasTypeTable = ({
           </select>
         </div>
       </div>
-      <table className="data-table custom-table rounded-table">
+      <table className="data-table custom-table ">
         <thead className="table-header">
           <tr>
             <th scope="col" className="no-column">

src/components/Pages/AppPAges/Gas/HouseChargeTable.js

@@ -321,7 +321,7 @@ const HouseChargeTable = ({
           </select>
         </div>
       </div>
-      <table className="data-table custom-table rounded-table">
+      <table className="data-table custom-table ">
         <thead className="table-header">
           <tr>
             <th scope="col" className="no-column">

src/components/Pages/AppPAges/Lottery/LotteryInventoryTable.js

@@ -90,7 +90,7 @@ const LotteryInventoryTable = ({
 
   return (
     <div>
-      <table className="data-table custom-table rounded-table">
+      <table className="data-table custom-table ">
         <thead className="table-header">
           <tr>
             {columns.map((col, index) => (

src/components/Pages/AppPAges/Lottery/LotteryReportTable.js

@@ -194,7 +194,7 @@ const LotteryReportTable = ({
       <div className="d-flex mb-3">
         <div className="expense-searchcontainerstart d-flex"></div>
       </div>
-      <table className="data-table custom-table rounded-table">
+      <table className="data-table custom-table ">
         <thead className="table-header">
           <tr>
             <th scope="col" className="no-column">

src/components/Pages/AppPAges/Lottery/LotteryTable.js

@@ -190,7 +190,7 @@ const LotteryTable = ({
           </select>
         </div>
       </div>
-      <table className="data-table custom-table rounded-table">
+      <table className="data-table custom-table ">
         <thead className="table-header">
           <tr>
             {columns.map((col, index) => (

src/components/Pages/AppPAges/Lottery/WeeklyInvoiceTable.js

@@ -335,7 +335,7 @@ const WeeklyInvoiceTable = ({
           </select>
         </div>
       </div>
-      <table className="data-table custom-table rounded-table">
+      <table className="data-table custom-table">
         <thead className="table-header">
           <tr>
             <th scope="col" className="no-column">

src/components/Pages/AppPAges/ManageSettings/DataTable.js

@@ -84,7 +84,7 @@ const DataTable = ({
   };
   return (
     <div className="data-table-container">
-      <table className="data-table custom-table rounded-table">
+      <table className="data-table custom-table ">
         <thead className="table-header">
           <tr>
             <th scope="col" className="no-column">
@@ -180,7 +180,7 @@ const DataTable = ({
       {showFooter && (
         <nav>
           <ul className="pagination">
-            <li className={`prev-next ${currentPage === 1 ? "disabled" : ""}`}>
+            {/* <li className={`prev-next ${currentPage === 1 ? "disabled" : ""}`}>
               <span
 
                 style={{
@@ -196,9 +196,9 @@ const DataTable = ({
                   textAlign: "center"
                 }}
                 onClick={handlePrev}>&lt;</span>&nbsp;
-            </li>
+            </li> */}
             {renderPagination()}
-            <li
+            {/* <li
               className={`prev-next ${currentPage === totalPages ? "disabled" : ""
                 }`}
             >
@@ -219,7 +219,7 @@ const DataTable = ({
                   textAlign: "center"
                 }}
                 onClick={handleNext}>&gt; </span>
-            </li>
+            </li> */}
           </ul>
         </nav>
       )}

src/components/Pages/AppPAges/ManageSettings/DataTables.js

@@ -134,24 +134,24 @@ const PayrollTable = ({
       color: "#fff",
       borderRadius: "10px",
       padding: "5px 20px",
-        textAlign:'center',
-      alignItems:'center'
+      textAlign: 'center',
+      alignItems: 'center'
     },
     paid: {
       backgroundColor: "#198f51",
       color: "#fff",
       borderRadius: "10px",
       padding: "5px 20px",
-      textAlign:'center',
-      alignItems:'center'
+      textAlign: 'center',
+      alignItems: 'center'
     },
     partially_paid: {
       backgroundColor: "#0c8ce9",
       color: "#fff",
       borderRadius: "10px",
       padding: "5px 20px",
-        textAlign:'center',
-      alignItems:'center'
+      textAlign: 'center',
+      alignItems: 'center'
     },
   };
   const paymentMethodStyles = {
@@ -250,7 +250,7 @@ const PayrollTable = ({
           </button> */}
         </div>
 
-        <div style={{marginRight:"60%"}}>
+        <div style={{ marginRight: "60%" }}>
           <div
             className="expense-search d-flex align-items-center"
             style={{
@@ -268,7 +268,7 @@ const PayrollTable = ({
               cursor: "pointer",
             }}
           >
-          <h6 className="" style={{margin:'10px'}}>Show</h6>
+            <h6 className="" style={{ margin: '10px' }}>Show</h6>
             <select
               name="option"
               id="pageSelect"
@@ -294,11 +294,11 @@ const PayrollTable = ({
               <option value={20}>20</option>
             </select>
           </div>
-</div>
+        </div>
 
       </div>
-      <table className="data-table custom-table rounded-table">
-        <thead className="table-header">
+      <table className="data-table custom-table ">
+        <thead className="table-header" >
           <tr>
             {columns.map((col, index) => (
               <th key={index} scope="col" onClick={() => handleSort(col.field)}>

src/components/Pages/AppPAges/ManageSettings/ManageUserTable.js

@@ -179,6 +179,7 @@ const ManageUserTable = ({
         <div className="expense-searchcontainerstart d-flex">
           <div className="search-container">
             <input
+              style={{ height: "50px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }}
               type="text"
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
@@ -276,12 +277,38 @@ const ManageUserTable = ({
             </div>
           )}
         </div>
-        <div className="expense-searchcontainerend d-flex align-items-center">
-          <h3 className="me-2">Show</h3>
+         <div style={{ marginRight: "70%" }}>
+          <div
+            className="expense-search d-flex align-items-center"
+            style={{
+              backgroundColor: "#4A5546",
+              boxShadow: "none",
+              outline: "none",
+              width: "auto",
+              height: "42px",
+
+              padding: "8px 12px",
+              fontSize: "16px",
+              border: "none",
+              borderRadius: "10px",
+              color: "#F4FFEE",
+              cursor: "pointer",
+            }}
+          >
+            <h6 className="" style={{ margin: '10px' }}>Show</h6>
             <select
               name="option"
               id="pageSelect"
               className="selectoptions"
+              style={{
+                height: "30px",
+
+                padding: "2px 6px",
+                border: "1px solid #ccc",
+                backgroundColor: "#282E26",
+                color: "#fff",
+                fontSize: "14px",
+              }}
               value={rowsPerPage}
               onChange={(e) => {
                 setRowsPerPage(Number(e.target.value));
@@ -295,7 +322,9 @@ const ManageUserTable = ({
             </select>
           </div>
         </div>
-      <table className="data-table custom-table rounded-table">
+
+      </div>
+      <table className="data-table custom-table ">
         <thead className="table-header">
           <tr>
             <th scope="col" className="no-column">
@@ -418,7 +447,7 @@ const ManageUserTable = ({
       {showFooter && (
         <nav>
           <ul className="pagination">
-            <li className={`prev-next ${currentPage === 1 ? "disabled" : ""}`}>
+            {/* <li className={`prev-next ${currentPage === 1 ? "disabled" : ""}`}>
               <span
                 style={{
                   fontSize: "24px",
@@ -437,9 +466,9 @@ const ManageUserTable = ({
                 &lt;
               </span>
               &nbsp;
-            </li>
+            </li> */}
             {renderPagination()}
-            <li
+            {/* <li
               className={`prev-next ${
                 currentPage === totalPages ? "disabled" : ""
               }`}
@@ -462,7 +491,7 @@ const ManageUserTable = ({
               >
                 &gt;{" "}
               </span>
-            </li>
+            </li> */}
           </ul>
         </nav>
       )}

src/components/Pages/AppPAges/ManageSettings/ManageUsers.js

@@ -10,6 +10,10 @@ import { toast, ToastContainer } from "react-toastify";
 import CustomSwitch from "./CustomSwitch";
 import ManageUserTable from "./ManageUserTable";
 import Swal from "sweetalert2";
+import userIcon from '../../../../assets/Image/user.png'
+import storeIcon from '../../../../assets/Image/store.png'
+import ownerIcon from '../../../../assets/Image/owner.png'
+
 
 
 function ManageUsers() {
@@ -389,27 +393,67 @@ function ManageUsers() {
       <div className="due-days">
       <div className="header-row">
   <div className="setting-title">Manage Users</div>
-          <div className="btn-position">
+  <div className="btn-position" style={{ display: "flex", gap: "10px" }}> {/* Set up flex with gap */}
     <button
-              className="vendor-add-button"
+      className="btn cus d-flex align-items-center"
       onClick={() => handleShowUserModal()} // Open modal for adding a user
     >
       + Add New User
+      <img
+                src={userIcon}
+                alt="user Icon"
+                style={{ width: "20px", height: "20px", marginLeft: "8px" }}
+              />
     </button>
     <button
-              className="vendor-add-button"
+      style={{
+        backgroundColor: "#4A5546",
+        boxShadow: "none",
+        outline: "none",
+        width: "auto",
+        height: "42px",
+        padding: "8px 12px",
+        fontSize: "16px",
+        border: "none",
+        borderRadius: "10px",
+        color: "#F4FFEE",
+        cursor: "pointer",
+      }}
       onClick={() => handleShowStoreModal()} // Open modal for adding a user
     >
       + Add New Store
+      <img
+                src={storeIcon}
+                alt="store Icon"
+                style={{ width: "20px", height: "20px", marginLeft: "8px" }}
+              />
     </button>
     <button
-              className="vendor-add-button"
+      style={{
+        backgroundColor: "#4A5546",
+        boxShadow: "none",
+        outline: "none",
+        width: "auto",
+        height: "42px",
+        padding: "8px 12px",
+        fontSize: "16px",
+        border: "none",
+        borderRadius: "10px",
+        color: "#F4FFEE",
+        cursor: "pointer",
+      }}
       onClick={() => setAssignOwnerModal(true)} // Open modal for assigning an owner
     >
       + Assign Existing User As Owner
+      <img
+                src={ownerIcon}
+                alt="owner Icon"
+                style={{ width: "20px", height: "20px", marginLeft: "8px" }}
+              />
     </button>
   </div>
-        </div>
+</div>
+
         <ManageUserTable
           data={users}
           columns={columns}

src/components/Pages/AppPAges/ManageSettings/ReusableModal.js

@@ -47,7 +47,7 @@ const ReusableModal = ({
   };
 
   const modalContentStyle = {
-    borderRadius: "15px",
+    borderRadius: "30px",
     overflow: "hidden",
     width: width, // use the width prop
     height: height, // use the height prop
@@ -57,21 +57,32 @@ const ReusableModal = ({
   };
 
   const headerStyle = {
-    backgroundColor: "#F0F0F0",
+    backgroundColor: "#fff",
     borderTopLeftRadius: "15px",
     borderTopRightRadius: "15px",
     height: "55px",
     display: "flex",
+    border:'none',
     justifyContent: "space-between",
     alignItems: "center",
+    padding: "0 16px", // Add padding for space between the content and edges
   };
 
+
   const titleStyle = {
     fontFamily: "'Manrope', sans-serif",
-    fontWeight: "600", // semibold
+    fontWeight: "600",
     fontSize: "20px",
     color: "#002300",
-    margin: 0, // remove default margin
+    margin: 0,
+    textAlign: "center",
+    flex: 1, // Allow the title to take up available space
+  };
+
+
+  const closeButtonStyle = {
+    cursor: "pointer",
+    marginLeft: "auto", // Push the close button to the far right
   };
 
   return (
@@ -88,6 +99,7 @@ const ReusableModal = ({
           <h5 className="modal-title" style={titleStyle}>
             {title}
           </h5>
+          <div style={closeButtonStyle}>
             <svg
               onClick={handleClose}
               width="26"
@@ -104,6 +116,7 @@ const ReusableModal = ({
               />
             </svg>
           </div>
+        </div>
         <div className="modal-body">{children}</div>
       </div>
     </div>

src/components/Pages/AppPAges/ManageSettings/SettingTable.js

@@ -312,7 +312,7 @@ const SettingTable = ({
           </select>
         </div>
       </div>
-      <table className="data-table custom-table rounded-table">
+      <table className="data-table custom-table" style={{borderRadius:"none"}} >
         <thead className="table-header">
           <tr>
             <th scope="col" className="no-column">

src/components/Pages/AppPAges/ManageSettings/Settings.css

@@ -284,7 +284,7 @@
   padding: 10px;
   width: 600px;
   height: 40px;
-  background-color: #f6f6f6;
+  background-color: #fff;
   border: 1px solid #f6f6f6;
   border-radius: 5px;
 }
@@ -516,18 +516,18 @@ input[type="date"] {
   width: 100%;
   border: 1px solid #F4F4F4;
   border-collapse: collapse;
-  border-radius: 20px 20px 0 0;
+  /* border-radius: 20px 20px 0 0; */
   overflow: hidden;
 }
 .table-header th, .table-body td {
-  border: 1px solid #F4F4F4;
+  /* border: 1px solid #F4F4F4; */
   padding: 12px;
   text-align: left;
   padding-left: 20px;
 }
 .table-header th {
-  background-color: #f2f2f2;
-  color: #002300;
+  background-color: #282e26;
+  color: white;
   cursor: pointer; /* Added cursor for sortable columns */
 }
 .table-body td {
@@ -568,6 +568,7 @@ input[type="date"] {
   display: flex;
   justify-content: end;
   padding: 10px 0;
+  
 }
 .pagination .page-item {
   margin: 0 5px;
@@ -576,20 +577,24 @@ input[type="date"] {
   padding: 10px;
   border: 1px solid #F4F4F4;
   background-color: #b6d7a8;
-  border-radius: 50%;
+  border-radius: 30px;
   color: #002300;
   text-decoration: none;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 36px;
-  height: 36px;
+  width: 30px;
+  height: 30px;
+
   transition: background-color 0.3s, color 0.3s;
 }
 .pagination .page-link:hover {
-  background-color: #ffaf32;
+  background-color: red;
 }
 .pagination .page-item.active .page-link {
+  width: 30px;
+    height: 30px;
+    border-radius: 30px;
   background-color: #ffaf32; /* Yellow background */
   color: #002300;
   border-color:#fbfbfbfb;

src/components/Pages/AppPAges/Payroll/Payroll.js

@@ -7,6 +7,8 @@ import useApi from "../../../../utils/api-manager/Helper/useApi";
 import { toast, ToastContainer } from "react-toastify";
 import PayrollTableWithButton from "./PayrollTableWithButton";
 import Swal from "sweetalert2";
+import employeeIcon from '../../../../assets/Image/employee.png'
+
 
 export default function Payroll() {
   const { user } = useContext(AuthContext);
@@ -244,7 +246,7 @@ export default function Payroll() {
       }
 
       closeModal(); // Close the modal after submitting the form
-} catch (error) {
+    } catch (error) {
       console.error("Error submitting form", error);
       if (error.response?.data) {
         // Handle API response errors
@@ -256,7 +258,7 @@ export default function Payroll() {
         // Handle generic errors
         toast.error("Error submitting form: " + error.message);
       }
-}
+    }
   }
 
 
@@ -370,7 +372,7 @@ export default function Payroll() {
       console.error("Error deleting record:", error);
       toast.error("Error deleting record: " + (error.response?.data || error.message));
     }
-};
+  };
 
 
   return (
@@ -378,9 +380,9 @@ export default function Payroll() {
       <div className="p-2">
         <div className="expensecontainer d-flex flex-column pd-2 mb-2">
           <div className="d-flex justify-content-between align-items-center mb-3">
-            <h3 className="mb-1">Manage Payroll</h3>
+            <h3 className="mb-1">Manage Employee</h3>
             <button
-              className="btn btn-primary cus"
+              className="btn cus d-flex align-items-center"
               onClick={() => {
                 // fetchBankData();
                 setModalType('new');
@@ -388,6 +390,11 @@ export default function Payroll() {
               }}
             >
               + Add Employee
+              <img
+                src={employeeIcon}
+                alt="employee Icon"
+                style={{ width: "20px", height: "20px", marginLeft: "8px" }}
+              />
             </button>
           </div>
           <PayrollTableWithButton
@@ -411,16 +418,42 @@ export default function Payroll() {
             <div
               className="modal-container"
               onClick={(e) => e.stopPropagation()}
-              style={{ width: modalType === 'payment' ? '800px' : '700px' }}
+              style={{ width: modalType === 'payment' ? '800px' : '700px', borderRadius: '40px' }}
             >
-              <div className="modal-header" style={{ borderBottom: "1px solid lightgray" }}>
-                <h3>
-                  {modalType === 'new' && "Add Employee"}
-                  {modalType === 'edit' && "Edit Employee"}
-                  {modalType === 'payment' && `Process Payment for ${selectedPayroll?.full_name || ''}`}
+              <div
+                className="modal-header"
+                style={{
+                  display: 'flex',
+                  justifyContent: 'space-between', // Distribute space between items
+                  alignItems: 'center',
+                  border: "none"
+                }}
+              >
+                <div style={{ flex: 1, textAlign: 'center' }}>
+                  <h3 style={{ margin: 0 }}>
+                    {modalType === 'new' && 'Add Employee'}
+                    {modalType === 'edit' && 'Edit Employee'}
+                    {modalType === 'payment' && `Pay Salary For ${selectedPayroll?.full_name || ''}`}
                   </h3>
-                <button className="btn" onClick={closeModal}>X</button>
                 </div>
+                <svg
+                  onClick={closeModal}
+                  width="14"
+                  height="14"
+                  marginLeft="20px"
+                  marginBottom="20px"
+                  viewBox="0 0 14 14"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M1 1L13 13M13 1L1 13"
+                    stroke="black"
+                    stroke-linecap="round"
+                  />
+                </svg>
+              </div>
+
               { }
               {(modalType === 'new' || modalType === 'edit') && (
                 <form onSubmit={handleSubmit}>
@@ -434,6 +467,12 @@ export default function Payroll() {
                         name="full_name"
                         value={formData.full_name}
                         onChange={handleChange}
+                        style={{
+                          backgroundColor: "#ffffff",
+                          border: "none", // Remove all borders
+                          borderBottom: "2px solid #ccc", // Set bottom border
+                          borderRadius: "0px", // Remove border radius 
+                        }}
                         required
                       />
                     </div>
@@ -448,6 +487,12 @@ export default function Payroll() {
                         onChange={handleChange}
                         required
                         maxLength={10}
+                        style={{
+                          backgroundColor: "#ffffff",
+                          border: "none", // Remove all borders
+                          borderBottom: "2px solid #ccc", // Set bottom border
+                          borderRadius: "0px", // Remove border radius 
+                        }}
                       />
 
 
@@ -461,15 +506,21 @@ export default function Payroll() {
                         name="email"
                         value={formData.email}
                         onChange={handleChange}
+                        style={{
+                          backgroundColor: "#ffffff",
+                          border: "none", // Remove all borders
+                          borderBottom: "2px solid #ccc", // Set bottom border
+                          borderRadius: "0px", // Remove border radius 
+                        }}
                         required
                       />
                     </div>
                   </div>
-                  <div className="modal-footer">
-                    <button type="submit" className="btn btn-primary">
+                  <div className="modal-footer" style={{ border: "none" }}>
+                    <button type="submit" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px', padding: '5px 15px' }}>
                       {modalType === 'edit' ? "Update Employee" : "Add Employee"}
                     </button>
-                    <button type="button" className="btn btn-contained" onClick={closeModal}>
+                    <button type="button" onClick={closeModal} style={{ border: '1px solid #282E26', backgroundColor: "transparent", borderRadius: '20px', padding: '5px 45px' }}>
                       Close
                     </button>
                   </div>
@@ -478,66 +529,74 @@ export default function Payroll() {
               { }
               {modalType === 'payment' && (
                 <form onSubmit={handlePaymentSubmit}>
-                  <div className="modal-body">
-                  <div className="form-group">
-  <label htmlFor="salary_amount">Amount</label>
-  <div className="input-group">
-    <div className="input-group-prepend">
-      <span className="input-group-text">$</span>
-    </div>
+                  <div className="modal-body"  >
+                    <div className="form-group row col-md-12">
+                      {/* Salary Amount Input */}
+                      <div className="col-md-5">
                         <input
-      type="text" // Keeping text type for more flexible input control
+                          type="text"
                           className="form-control"
                           id="salary_amount"
                           name="salary_amount"
+                          placeholder="Amount"
                           value={paymentData.salary_amount}
                           onChange={handlePaymentChange}
                           onKeyDown={(e) => {
-        // Prevent negative and positive signs
                             if (e.key === "-" || e.key === "+") {
                               e.preventDefault();
                             }
                           }}
+                          style={{
+                            backgroundColor: "#ffffff",
+                            border: "none",
+                            borderBottom: "2px solid #ccc",
+                            borderRadius: "0px",
+                          }}
                           required
                           onInput={(e) => {
                             let value = e.target.value;
-
-        // Remove all characters except numbers and the decimal point
-        value = value.replace(/[^0-9.]/g, '');
-
-        // Ensure only one decimal point
-        if (value.indexOf('.') !== -1) {
-          const parts = value.split('.');
-          value = parts[0] + '.' + parts[1].substring(0, 2); // Keep only two digits after the decimal
+                            value = value.replace(/[^0-9.]/g, "");
+                            if (value.indexOf(".") !== -1) {
+                              const parts = value.split(".");
+                              value = parts[0] + "." + parts[1].substring(0, 2);
                             }
-
-        // Update the value on the input element
                             e.target.value = value;
-
-        // Call the onChange handler to update the state
                             handlePaymentChange(e);
                           }}
                         />
                       </div>
-</div>
 
-
-                    <div className="form-row form-group col-md-6">
-                      <label htmlFor="salary_unit">Salary Unit</label>
+                      {/* Salary Unit Select */}
+                      <div className="col-md-5">
                         <select
                           className="form-control"
                           name="salary_unit"
                           value={paymentData.salary_unit}
                           onChange={handlePaymentChange}
                           required
+                          style={{
+                            backgroundColor: "#ffffff",
+                            border: "none",
+                            borderBottom: "2px solid #ccc",
+                            borderRadius: "0px",
+                          }}
                         >
+                          <option value="" disabled>
+                            Per Unit
+                          </option>
                           <option value="hourly">Hourly</option>
                           <option value="weekly">Weekly</option>
                           <option value="bi weekly">Bi Weekly</option>
                           <option value="monthly">Monthly</option>
                         </select>
                       </div>
-                    <div className="form-row form-group col-md-6">
+                    </div>
+
+
+
+                    <div className="form-group row col-md-12">
+                      {/* Start Date Input */}
+                      <div className="form-group col-md-5">
                         <label htmlFor="start_date">Start Date</label>
                         <input
                           type="date"
@@ -546,9 +605,17 @@ export default function Payroll() {
                           value={paymentData.start_date}
                           onChange={handlePaymentChange}
                           required
+                          style={{
+                            backgroundColor: "#ffffff",
+                            border: "none",
+                            borderBottom: "2px solid #ccc",
+                            borderRadius: "0px",
+                          }}
                         />
                       </div>
-                    <div className="form-row form-group col-md-6">
+
+                      {/* End Date Input */}
+                      <div className="form-group col-md-5">
                         <label htmlFor="end_date">End Date</label>
                         <input
                           type="date"
@@ -557,11 +624,24 @@ export default function Payroll() {
                           value={paymentData.end_date}
                           onChange={handlePaymentChange}
                           required
+                          style={{
+                            backgroundColor: "#ffffff",
+                            border: "none",
+                            borderBottom: "2px solid #ccc",
+                            borderRadius: "0px",
+                          }}
                         />
                       </div>
+                    </div>
+
+
+
+
                     {/* <ToastContainer /> */}
-                    <div className="form-row form-group col-md-6">
-                      <label htmlFor="total_hour">Total Hours</label>
+                    <div className="form-group row col-md-12">
+                      {/* Total Hours Input */}
+                      <div className="form-group col-md-5">
+
                         <input
                           type="number"
                           className="form-control"
@@ -570,37 +650,75 @@ export default function Payroll() {
                           value={paymentData.total_hour}
                           onChange={handlePaymentChange}
                           onInput={(e) => {
-                          // Allow only numbers and a decimal point with two digits after it
-                          e.target.value = e.target.value
-                          
-                            .replace(/[^0-9]/g, '') // Remove non-numeric characters
-                            .slice(0, 3); // Limit input length (10 digits + 1 decimal + 2 decimal places)
+                            // Allow only numbers and limit input to 3 digits
+                            e.target.value = e.target.value.replace(/[^0-9]/g, '').slice(0, 3);
+                          }}
+                          style={{
+                            backgroundColor: "#ffffff",
+                            border: "none",
+                            borderBottom: "2px solid #ccc",
+                            borderRadius: "0px",
                           }}
                           required
                         />
                       </div>
-                    <div className="form-group">
-                      <label htmlFor="payment_method">Payment Method</label>
-                      <select
-                        name="payment_method"
-                        id="payment_method"
-                        className="form-control"
-                        value={paymentData.payment_method}
-                        onChange={handlePaymentChange}
+
+                      {/* Payment Method Select */}
+                      <div className="form-group col-md-5">
+                        <div style={{ border: '2px solid #ACB4AA', padding: '5px 10px', width: "fit-content", borderRadius: '40px', display: 'flex', gap: '10px' }}>
+                          <button
+                            type="button"
+                            className="btn"
+                            onClick={() => handlePaymentChange({ target: { name: "payment_method", value: "cash" } })}
+                            style={{
+                              backgroundColor: paymentData.payment_method === "cash" ? "#4a5546" : "transparent",
+                              color: paymentData.payment_method === "cash" ? "#ffffff" : "#000000",
+                              border: 'none',
+                              padding: '10px 10px',
+                              borderRadius: '20px',
+                              cursor: 'pointer',
+                            }}
                           >
-                        <option value="cash">Cash</option>
-                        <option value="cheque">Bank Transfer</option>
-                      </select>
+                            Cash
+                          </button>
+                          <button
+                            type="button"
+                            className="btn"
+                            onClick={() => handlePaymentChange({ target: { name: "payment_method", value: "cheque" } })}
+                            style={{
+                              backgroundColor: paymentData.payment_method === "cheque" ? "#4a5546" : "transparent",
+                              color: paymentData.payment_method === "cheque" ? "#ffffff" : "#000000",
+                              border: 'none',
+                              padding: '10px 10px',
+                              borderRadius: '20px',
+                              cursor: 'pointer',
+                            }}
+                          >
+                            Bank Transfer
+                          </button>
                         </div>
+                      </div>
+
+
+
+                    </div>
+
                     {paymentData.payment_method === "cheque" && (
-                      <div className="form-group">
-                        <label htmlFor="bank">Bank</label>
+                      <div className="form-group row col-md-12">
+                        <div className="form-group col-md-5">
+
                           <select
                             name="bank"
                             id="bank"
                             className="form-control"
                             value={paymentData.bank}
                             onChange={handlePaymentChange}
+                            style={{
+                              backgroundColor: "#ffffff",
+                              border: "none",
+                              borderBottom: "2px solid #ccc",
+                              borderRadius: "0px",
+                            }}
                           >
                             <option value="">Select Bank</option>
                             {bankdata.map((bank) => (
@@ -609,20 +727,29 @@ export default function Payroll() {
                               </option>
                             ))}
                           </select>
-                        <label htmlFor="cheque_no">Cheque Number</label>
+                        </div>
+
+                        <div className="form-group col-md-5">
+
                           <input
                             type="number"
                             className="form-control"
                             id="cheque_no"
+                            placeholder="Cheque No"
                             name="cheque_no"
                             value={paymentData.cheque_no}
                             onChange={handlePaymentChange}
                             required
+                            style={{
+                              backgroundColor: "#ffffff",
+                              border: "none",
+                              borderBottom: "2px solid #ccc",
+                              borderRadius: "0px",
+                            }}
                           />
                         </div>
-                    )}
-                    <div className="form-row form-group col-md-6">
-                      <label htmlFor="note">Notes</label>
+                        <div className="form-group col-md-5">
+
                           <input
                             type="text"
                             className="form-control"
@@ -630,14 +757,25 @@ export default function Payroll() {
                             name="note"
                             value={paymentData.note}
                             onChange={handlePaymentChange}
+                            style={{
+                              backgroundColor: "#ffffff",
+                              border: "none",
+                              borderBottom: "2px solid #ccc",
+                              borderRadius: "0px",
+                            }}
                           />
                         </div>
                       </div>
+
+
+                    )}
+
+                  </div>
                   <div className="modal-footer">
-                    <button type="submit" className="btn btn-primary" style={{}}>
+                    <button type="submit" className="btn " style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px' }}>
                       Payment
                     </button>
-                    <button type="button" className="btn btn-contained" onClick={closeModal}>
+                    <button type="button" className="btn " onClick={closeModal} style={{ border: " 1px solid #282e26", borderRadius: '20px' }}>
                       Close
                     </button>
                   </div>

src/components/Pages/AppPAges/Payroll/PayrollTable.js

@@ -16,6 +16,7 @@ const DataTable = ({
     direction: "ascending",
   });
   const [rowsPerPage, setRowsPerPage] = useState(5);
+  const [searchTerm, setSearchTerm] = useState(""); // State for search term
 
   const totalPages = Math.ceil(data.length / rowsPerPage);
 
@@ -32,7 +33,7 @@ const DataTable = ({
   const getDisplayedData = () => {
     const startIndex = (currentPage - 1) * rowsPerPage;
     const endIndex = startIndex + rowsPerPage;
-    return data.slice(startIndex, endIndex);
+    return sortedData.slice(startIndex, endIndex); // Return sorted data
   };
 
   // Sorting the data based on the selected column
@@ -51,8 +52,16 @@ const DataTable = ({
     return dataToSort;
   };
 
+  // Search functionality
+  const filteredData = data.filter(item =>
+    columns.some(col => {
+      const value = item[col.field] ? item[col.field].toString().toLowerCase() : "";
+      return value.includes(searchTerm.toLowerCase());
+    })
+  );
+
+  const sortedData = sortData(filteredData);
   const displayedData = getDisplayedData();
-  const sortedData = sortData(displayedData);
 
   // Pagination
   const handleNext = () => {
@@ -90,7 +99,40 @@ const DataTable = ({
 
   return (
     <div className="data-table-container">
-      <table className="data-table custom-table rounded-table">
+      <div className="search-container" style={{marginBottom:"20px"}}>
+        <input
+          type="text"
+          style={{ width: "300px", height: "50px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }}
+          placeholder="Search..."
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+          className="search-input"
+        />
+         <svg
+              className="search-container-icon"
+              width="22"
+              height="22"
+              viewBox="0 0 22 22"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M10.5416 19.2497C15.3511 19.2497 19.2499 15.3508 19.2499 10.5413C19.2499 5.73186 15.3511 1.83301 10.5416 1.83301C5.73211 1.83301 1.83325 5.73186 1.83325 10.5413C1.83325 15.3508 5.73211 19.2497 10.5416 19.2497Z"
+                stroke="#292D32"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+              <path
+                d="M20.1666 20.1663L18.3333 18.333"
+                stroke="#292D32"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+      </div>
+      <table className="data-table custom-table ">
         <thead className="table-header">
           <tr>
             {columns.map((col, index) => (
@@ -134,17 +176,19 @@ const DataTable = ({
         <tbody className="table-body">
           {sortedData.length === 0 ? (
             <tr>
-              <td colSpan={columns.length + (showAction ? 2 : 1)} style={{ textAlign: "center", fontFamily: 'Manrope',
+              <td colSpan={columns.length + (showAction ? 2 : 1)} style={{
+                textAlign: "center", fontFamily: 'Manrope',
                 fontWeight: '600',
                 fontSize: '40px',
                 background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.1) -92.86%, #4545DB 71.43%)',
                 WebkitBackgroundClip: 'text',
-          WebkitTextFillColor: 'transparent', }}>
+                WebkitTextFillColor: 'transparent',
+              }}>
                 No data found
               </td>
             </tr>
           ) : (
-            sortedData.map((item, index) => (
+            displayedData.map((item, index) => (
               <tr key={item.id || index}>
                 {columns.map((col, colIndex) => (
                   <td key={colIndex}>
@@ -200,55 +244,18 @@ const DataTable = ({
           )}
         </tbody>
       </table>
-
       {showFooter && (
-        <nav>
-          <ul className="pagination">
-            <li className={`prev-next ${currentPage === 1 ? "disabled" : ""}`}>
-              <span
-                style={{
-                  fontSize: "24px",
-                  width: "40px",
-                  height: "40px",
-                  paddingLeft: "10px",
-                  paddingRight: "10px",
-                  borderRadius: "50%",
-                  border: "1px solid #bfbfbfbf",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  display: "flex",
-                  cursor: "pointer",
-                }}
-                onClick={handlePrev}
-              >
-                {"<"}
-                &lt;
-              </span>
-              &nbsp;
-            </li>
+        <div className="pagination">
+          <button onClick={handlePrev} disabled={currentPage === 1}>
+            Previous
+          </button>
+          <ul className="pagination-list">
             {renderPagination()}
-            <li className={`prev-next ${currentPage === totalPages ? "disabled" : ""}`}>
-              <span
-                style={{
-                  fontSize: "24px",
-                  width: "40px",
-                  height: "40px",
-                  paddingLeft: "10px",
-                  paddingRight: "10px",
-                  borderRadius: "50%",
-                  border: "1px solid #bfbfbfbf",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  display: "flex",
-                  cursor: "pointer",
-                }}
-                onClick={handleNext}
-              >
-                {">"}
-              </span>
-            </li>
           </ul>
-        </nav>
+          <button onClick={handleNext} disabled={currentPage === totalPages}>
+            Next
+          </button>
+        </div>
       )}
     </div>
   );

src/components/Pages/AppPAges/Payroll/PayrollTableWithButton.js

@@ -155,17 +155,18 @@ const PayrollTableWithButton = ({
     zIndex: "1",
   };
   // Calculate the total net sales from the data
-//  const totalNetSales = data.reduce((acc, item) => {
-//   const amount = Number(item.total_net_sales) || 0; // Make sure to handle non-numeric values
-//   return acc + amount;
-// }, 0).toFixed(2); //
+  //  const totalNetSales = data.reduce((acc, item) => {
+  //   const amount = Number(item.total_net_sales) || 0; // Make sure to handle non-numeric values
+  //   return acc + amount;
+  // }, 0).toFixed(2); //
   return (
     <div className="data-table-container">
       <div className="d-flex mb-3">
-        <div className="expense-searchcontainerstart d-flex">
-          <div className="search-container">
+        <div className="expense-searchcontainerstart d-flex" >
+          <div className="search-container" >
             <input
               type="text"
+              style={{ width: "300px", height: "50px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }}
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
               placeholder="Search"
@@ -262,12 +263,38 @@ const PayrollTableWithButton = ({
             </div>
           )}
         </div>
-        <div className="expense-searchcontainerend d-flex align-items-center">
-          <h3 className="me-2">Show</h3>
+        <div >
+          <div
+            className="expense-search d-flex align-items-center"
+            style={{
+              backgroundColor: "#4A5546",
+              boxShadow: "none",
+              outline: "none",
+              width: "auto",
+              height: "42px",
+
+              padding: "8px 12px",
+              fontSize: "16px",
+              border: "none",
+              borderRadius: "10px",
+              color: "#F4FFEE",
+              cursor: "pointer",
+            }}
+          >
+            <h6 className="" style={{ margin: '10px' }}>Show</h6>
             <select
               name="option"
               id="pageSelect"
               className="selectoptions"
+              style={{
+                height: "30px",
+
+                padding: "2px 6px",
+                border: "1px solid #ccc",
+                backgroundColor: "#282E26",
+                color: "#fff",
+                fontSize: "14px",
+              }}
               value={rowsPerPage}
               onChange={(e) => {
                 setRowsPerPage(Number(e.target.value));
@@ -281,7 +308,9 @@ const PayrollTableWithButton = ({
             </select>
           </div>
         </div>
-      <table className="data-table custom-table rounded-table">
+
+      </div>
+      <table className="data-table custom-table ">
         <thead className="table-header">
           <tr>
             <th scope="col" className="no-column">
@@ -326,12 +355,14 @@ const PayrollTableWithButton = ({
         <tbody className="table-body">
           {sortedDisplayedData.length === 0 ? (
             <tr>
-      <td colSpan={columns.length + (showAction ? 2 : 1)} style={{ textAlign: "center", fontFamily: 'Manrope',
+              <td colSpan={columns.length + (showAction ? 2 : 1)} style={{
+                textAlign: "center", fontFamily: 'Manrope',
                 fontWeight: '600',
                 fontSize: '40px',
                 background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.1) -92.86%, #4545DB 71.43%)',
                 WebkitBackgroundClip: 'text',
-          WebkitTextFillColor: 'transparent', }}>
+                WebkitTextFillColor: 'transparent',
+              }}>
                 No data found
               </td>
             </tr>
@@ -347,7 +378,7 @@ const PayrollTableWithButton = ({
                       <div className={`status ${item[col.field]}`}>{item[col.field]}</div>
                     ) : col.field === "pay_salary" ? (
                       <button
-                      className="btn btn-primary"
+                        style={{ backgroundColor: "#CCF4BB", border: 'none', boxShadow: "4px 4px 4px rgba(0, 0, 0, 0.25)", borderRadius: '4px', fontSize: "16px", alignItems: "center", width: '122px' }}
                         onClick={() => togglePaymentModal(item)} // Pass item to payment modal
                       >
                         Pay Salary
@@ -395,7 +426,7 @@ const PayrollTableWithButton = ({
               </tr>
             ))
           )}
-</tbody>
+        </tbody>
 
       </table>
       {showFooter && (
@@ -423,8 +454,7 @@ const PayrollTableWithButton = ({
             </li>
             {renderPagination()}
             <li
-              className={`prev-next ${
-                currentPage === totalPages ? "disabled" : ""
+              className={`prev-next ${currentPage === totalPages ? "disabled" : ""
                 }`}
             >
               &nbsp;

src/components/Pages/AppPAges/Purchase/purchase.js

@@ -8,6 +8,9 @@ import { toast, ToastContainer } from "react-toastify";
 import AddDepartmentModal from "../ReusableForm/AddDepartmentModal";
 import AddVendorModal from "../ReusableForm/AddVendorModal";
 import Swal from "sweetalert2";
+import invoiceIcon from '../../../../assets/Image/invoiceIcon.png'
+import vendor from '../../../../assets/Image/vendor.png'
+import department from '../../../../assets/Image/Department.png'
 
 export default function Purchase() {
   const { user } = useContext(AuthContext);
@@ -40,7 +43,7 @@ export default function Purchase() {
   const { Get, Post, Delete, Patch } = useApi();
   const [reloadTotal, setReloadTotal] = useState(false);
   const [filteredDepartments, setFilteredDepartments] = useState([]);
-
+  const [selectedPaymentMethod, setSelectedPaymentMethod] = useState("");
   // Handle checkbox change
 
   const [formData, setFormData] = useState({
@@ -200,6 +203,7 @@ export default function Purchase() {
 
   const handleSpecificPaymentMethodChange = (e) => {
     const value = e.target.value;
+    setSelectedPaymentMethod(value); // Update selected payment method state
     setShowCheckFields(value === "cheque");
     setShowBankFields(value === "bank");
 
@@ -619,12 +623,141 @@ export default function Purchase() {
     <div className="main-container">
       <div className="d-flex p-2">
         <div className="expensecontainer d-flex flex-column pd-2">
-          <div className="d-flex justify-content-between align-items-center mb-3">
-            <h3 className="mb-1">Purchase</h3>
-            <button className="btn btn-primary cus" onClick={toggleModal}>
+          <div className="d-flex align-items-center mb-3" style={{ gap: "10px" }}>
+            <button className="btn cus d-flex align-items-center" onClick={toggleModal}>
               {" "}
               + Add Invoice
+              <img
+                src={invoiceIcon}
+                alt="Invoice Icon"
+                style={{ width: "20px", height: "20px", marginLeft: "8px" }}
+              />
             </button>
+
+            <button style={{
+              backgroundColor: "#4A5546",
+              boxShadow: "none",
+              outline: "none",
+              width: "auto",
+              height: "42px",
+              padding: "8px 12px",
+              fontSize: "16px",
+              border: "none",
+              borderRadius: "10px",
+              color: "#F4FFEE",
+              cursor: "pointer",
+            }}>
+
+              + Add New Vendor
+              <img
+                src={vendor}
+                alt="Invoice Icon"
+                style={{ width: "20px", height: "20px", marginLeft: "8px" }}
+              />
+            </button>
+            <button style={{
+              backgroundColor: "#4A5546",
+              boxShadow: "none",
+              outline: "none",
+              width: "auto",
+              height: "42px",
+              padding: "8px 12px",
+              fontSize: "16px",
+              border: "none",
+              borderRadius: "10px",
+              color: "#F4FFEE",
+              cursor: "pointer",
+            }}
+            >
+              + Add Department
+              <img
+                src={department}
+                alt="Invoice Icon"
+                style={{ width: "20px", height: "20px", marginLeft: "8px" }}
+              />
+            </button>
+
+
+            <div
+              style={{
+                display: "flex",
+                gap: "16px",
+                justifyContent: "center",
+                alignItems: "center",
+                margin: "20px",
+              }}
+            >
+              {/* Invoice due this month */}
+              <div
+                style={{
+                  backgroundColor: "#fff8e6",
+                  border: "1px solid #ffd700",
+                  borderRadius: "8px",
+                  padding: "16px 24px",
+                  display: "flex",
+                  flexDirection: "column",
+                  justifyContent: "center",
+                  alignItems: "flex-start",
+                  width: "300px",
+                  textAlign: "left",
+                }}
+              >
+                <p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
+                  $500
+                </p>
+                <p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
+                  Invoice due this month
+                </p>
+              </div>
+
+              {/* Last 7 days sale */}
+              <div
+                style={{
+                  backgroundColor: "#e6ffee",
+                  border: "1px solid #00b300",
+                  borderRadius: "8px",
+                  padding: "16px 24px",
+                  display: "flex",
+                  flexDirection: "column",
+                  justifyContent: "center",
+                  alignItems: "flex-start",
+                  width: "300px",
+                  textAlign: "left",
+                }}
+              >
+                <p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
+                  $1900
+                </p>
+                <p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
+                  Last 7 days sale
+                </p>
+              </div>
+
+              {/* Expense this month */}
+              <div
+                style={{
+                  backgroundColor: "#ffe6e6",
+                  border: "1px solid #ff4d4d",
+                  borderRadius: "8px",
+                  padding: "16px 24px",
+                  display: "flex",
+                  flexDirection: "column",
+                  justifyContent: "center",
+                  alignItems: "flex-start",
+                  width: "300px",
+                  textAlign: "left",
+                }}
+              >
+                <p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
+                  $0.00
+                </p>
+                <p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
+                  Expense this month
+                </p>
+              </div>
+            </div>
+
+
           </div>
 
           {/* Table Start */}
@@ -695,8 +828,10 @@ export default function Purchase() {
 
                         <input
                           style={{
-                            backgroundColor: "#0023000C",
-                            borderRadius: "10px",
+                            backgroundColor: "#ffffff",
+                            border: "none", // Remove all borders
+                            borderBottom: "2px solid #ccc", // Set bottom border
+                            borderRadius: "0px", // Remove border radius
                             height: "52px",
                           }}
                           type="date"
@@ -714,8 +849,10 @@ export default function Purchase() {
 
                         <input
                           style={{
-                            backgroundColor: "#0023000C",
-                            borderRadius: "10px",
+                            backgroundColor: "#ffffff",
+                            border: "none", // Remove all borders
+                            borderBottom: "2px solid #ccc", // Set bottom border
+                            borderRadius: "0px", // Remove border radius
                             height: "52px",
                           }}
                           type="text"
@@ -733,8 +870,9 @@ export default function Purchase() {
                       <div className="col-md-6" style={{ paddingRight: "10px" }}>
                         <select
                           style={{
-                            backgroundColor: "#0023000C",
-                            borderRadius: "10px",
+                            backgroundColor: "#ffffff",
+                            border: "none", // Remove all borders
+                            borderBottom: "2px solid #ccc", // Set bottom border
                             height: "52px",
                           }}
                           className="form-control"
@@ -771,8 +909,9 @@ export default function Purchase() {
                         <select
                           className="form-control"
                           style={{
-                            backgroundColor: "#0023000C",
-                            borderRadius: "10px",
+                            backgroundColor: "#ffffff",
+                            border: "none", // Remove all borders
+                            borderBottom: "2px solid #ccc", // Set bottom border
                             height: "52px",
                           }}
                           name="vendor_department_service_titles"
@@ -807,17 +946,76 @@ export default function Purchase() {
                       </div>
 
                     </div>
-                    <div className="d-flex col-md-12">
+                    <div className="d-flex col-md-12 mt-2">
+                      <div
+                        className="form-row d-flex col-md-5 p-2 mt-2"
+                        style={{ marginLeft: "10px" }}
+                      >
+                        <div className="input-group col-md-6">
+                          <div
+                            className="input-group-prepend"
+                            style={{
+
+                              background: "#ffffff",
+                              height: "100%",
+
+                              display: "flex",
+                              alignItems: "center",
+                            }}
+                          >
+                            {/* <span className="input-group-text prefixtext"
+                           style={{ border: "none", fontSize: "14px" }}>
+
+                            USD
+                          </span> */}
+                          </div>
+                          <input
+                            required
+                            type="number"
+                            className="form-control sampletext"
+                            placeholder="Amount"
+                            aria-label="Username"
+                            aria-describedby="addon-wrapping"
+                            name={editingInvoiceId ? "pay_amount" : "amount"}
+                            value={
+
+                              editingInvoiceId && formData.pay_amount === undefined
+                                ? formData.remaining_amount
+                                : formData.pay_amount || formData.amount
+                            }
+                            onChange={handleChange}
+                            onInput={(e) => {
+                              // Allow only numbers and a decimal point with two digits after it
+                              e.target.value = e.target.value
+                                .replace(/[^0-9.]/g, '') // Remove non-numeric characters except the decimal point
+                                .replace(/^(\d*\.?\d{0,2}).*/g, '$1') // Allow only two decimal places
+                                .slice(0, 12); // Limit input length (10 digits + 1 decimal + 2 decimal places)
+                            }}
+                          />
+                        </div>
 
                       </div>
                       <div
-                      className="d-flex col-md-12"
-                      style={{ paddingLeft: "5px", paddingTop: "15px" }}
+                        style={{
+                          border: '2px solid #ACB4AA',
+                          padding: '5px 10px',
+                          marginTop: '20px',
+                          width: 'fit-content',
+                          borderRadius: '40px',
+                          display: 'flex', // Use flexbox
+                          gap: '10px', // Add spacing between the options
+                        }}
                       >
-                      <p>Payment Method : </p>
                         <label
                           className="radio-inline"
-                        style={{ paddingLeft: "10px" }}
+                          style={{
+
+
+                            backgroundColor: formData.pay_method_status === "pay_later" ? "#4a5546" : "transparent",
+                            color: formData.pay_method_status === "pay_later" ? "white" : "black",
+                            padding: '5px 10px',
+                            borderRadius: '20px',
+                          }}
                         >
                           <input
                             type="radio"
@@ -825,12 +1023,19 @@ export default function Purchase() {
                             value="pay_later"
                             checked={formData.pay_method_status === "pay_later"}
                             onChange={handlePaymentMethodChange}
+                            style={{ display: 'none' }} // Hide the radio button
                           />{" "}
                           Pay Later
                         </label>
                         <label
                           className="radio-inline"
-                        style={{ paddingLeft: "10px" }}
+                          style={{
+
+                            backgroundColor: formData.pay_method_status === "pay_now" ? "#4a5546" : "transparent",
+                            color: formData.pay_method_status === "pay_now" ? "white" : "black",
+                            padding: '5px 10px',
+                            borderRadius: '20px',
+                          }}
                         >
                           <input
                             type="radio"
@@ -838,76 +1043,107 @@ export default function Purchase() {
                             value="pay_now"
                             checked={formData.pay_method_status === "pay_now"}
                             onChange={handlePaymentMethodChange}
+                            style={{ display: 'none' }} // Hide the radio button
                           />{" "}
                           Pay Now
                         </label>
                         <label
                           className="radio-inline"
-                        style={{ paddingLeft: "10px" }}
+                          style={{
+
+                            backgroundColor: formData.pay_method_status === "credit_invoice" ? "#4a5546" : "transparent",
+                            color: formData.pay_method_status === "credit_invoice" ? "white" : "black",
+                            padding: '5px 10px',
+                            borderRadius: '20px',
+                          }}
                         >
                           <input
                             type="radio"
                             name="pay_method_status"
                             value="credit_invoice"
-                          checked={
-                            formData.pay_method_status === "credit_invoice"
-                          }
+                            checked={formData.pay_method_status === "credit_invoice"}
                             onChange={handlePaymentMethodChange}
+                            style={{ display: 'none' }} // Hide the radio button
                           />{" "}
                           Credit Invoice
                         </label>
                       </div>
+
+                    </div>
+
                     {showPaymentOptions && (
-                      <div className="d-flex col-md-6 mb-3">
-                        <label
-                          className="radio-inline"
-                          style={{ paddingLeft: "10px" }}
+                      <div
+                        className="d-flex col-md-6 mb-3"
+                        style={{
+                          border: "2px solid #ACB4AA",
+                          padding: "5px 10px",
+                          width: "fit-content",
+                          borderRadius: "40px",
+                          display: "flex",
+                          gap: "10px",
+                          marginTop: "20px",
+                        }}
+                      >
+                        <div
+                          className="payment-option"
+                          onClick={() => handleSpecificPaymentMethodChange({ target: { value: "cash" } })}
+                          style={{
+                            padding: '5px 10px',
+                            cursor: "pointer",
+                            borderRadius: "20px",
+                            backgroundColor: selectedPaymentMethod === "cash" ? "#4a5546" : "transparent", // Change background based on selection
+                            color: selectedPaymentMethod === "cash" ? "white" : "black", // Change text color based on selection
+                            textAlign: "center",
+                          }}
                         >
-                          <input
-                            type="radio"
-                            name="specificPaymentMethod"
-                            value="cash"
-                            onChange={handleSpecificPaymentMethodChange}
-                          />{" "}
                           Cash
-                        </label>
-                        <label
-                          className="radio-inline"
-                          style={{ paddingLeft: "10px" }}
+                        </div>
+                        <div
+                          className="payment-option"
+                          onClick={() => handleSpecificPaymentMethodChange({ target: { value: "cheque" } })}
+                          style={{
+                            padding: '5px 10px',
+                            cursor: "pointer",
+                            borderRadius: "20px",
+                            backgroundColor: selectedPaymentMethod === "cheque" ? "#4a5546" : "transparent",
+                            color: selectedPaymentMethod === "cheque" ? "white" : "black",
+                            textAlign: "center",
+                          }}
                         >
-                          <input
-                            type="radio"
-                            name="specificPaymentMethod"
-                            value="cheque"
-                            onChange={handleSpecificPaymentMethodChange}
-                          />{" "}
                           Check
-                        </label>
-                        <label
-                          className="radio-inline"
-                          style={{ paddingLeft: "10px" }}
+                        </div>
+                        <div
+                          className="payment-option"
+                          onClick={() => handleSpecificPaymentMethodChange({ target: { value: "bank" } })}
+                          style={{
+                            padding: '5px 10px',
+                            cursor: "pointer",
+                            borderRadius: "20px",
+                            backgroundColor: selectedPaymentMethod === "bank" ? "#4a5546" : "transparent",
+                            color: selectedPaymentMethod === "bank" ? "white" : "black",
+                            textAlign: "center",
+                          }}
                         >
-                          <input
-                            type="radio"
-                            name="specificPaymentMethod"
-                            value="bank"
-                            onChange={handleSpecificPaymentMethodChange}
-                          />{" "}
                           Bank Card/ACH/EFT
-                        </label>
+                        </div>
                       </div>
                     )}
+
+
                     {showAdditionalFields && (
-                      <div className="d-flex col-md-5 mt-2">
+                      <div className="d-flex col-md-5 mt-2" style={{  marginTop: '20px' }}>
                         <select
                           className="form-control col-md-5 me-2"
                           name="days"
                           value={formData.days || ""}
                           onChange={handleChange}
                           style={{
-                            backgroundColor: "#0023000C",
-                            borderRadius: "10px",
+                            backgroundColor: "#fff",
+                            border: "none", // Remove all borders
+                            borderBottom: "2px solid #ccc", // Set bottom border
+                            borderRadius: "0px", // Remove border radius
                             height: "52px",
+                       
                           }}
                           required
                         >
@@ -920,8 +1156,11 @@ export default function Purchase() {
                         </select>
                         <input
                           style={{
-                            backgroundColor: "#0023000C",
-                            borderRadius: "10px",
+                            backgroundColor: "#fff",
+                            border: "none", // Remove all borders
+                            borderBottom: "2px solid #ccc", // Set bottom border
+                            borderRadius: "0px", // Remove border radius
+                          
                             height: "50px",
                           }}
                           className="form-control d-flex col-md-5"
@@ -938,8 +1177,11 @@ export default function Purchase() {
                         <div className="d-flex col-md-4 mt-2">
                           <select
                             style={{
-                              backgroundColor: "#0023000C",
-                              borderRadius: "10px",
+                              backgroundColor: "#fff",
+                            border: "none", // Remove all borders
+                            borderBottom: "2px solid #ccc", // Set bottom border
+                            borderRadius: "0px", // Remove border radius
+                            height: "52px",
                               height: "52px",
                               marginRight: "10px",
                             }}
@@ -962,8 +1204,11 @@ export default function Purchase() {
                             className="form-control me-2"
                             placeholder="Check Number"
                             style={{
-                              backgroundColor: "#0023000C",
-                              borderRadius: "10px",
+                              backgroundColor: "#fff",
+                            border: "none", // Remove all borders
+                            borderBottom: "2px solid #ccc", // Set bottom border
+                            borderRadius: "0px", // Remove border radius
+                            height: "52px",
                               height: "52px",
                               marginRight: "10px",
                             }}
@@ -978,8 +1223,11 @@ export default function Purchase() {
                         <div className="d-flex col-md-4 mt-2">
                           <input
                             style={{
-                              backgroundColor: "#0023000C",
-                              borderRadius: "10px",
+                              backgroundColor: "#fff",
+                              border: "none", // Remove all borders
+                              borderBottom: "2px solid #ccc", // Set bottom border
+                              borderRadius: "0px", // Remove border radius
+                              height: "52px",
                               height: "52px",
                             }}
                             className="form-control col-md-3"
@@ -994,8 +1242,11 @@ export default function Purchase() {
                         <div className="d-flex col-md-6 mt-2">
                           <select
                             style={{
-                              backgroundColor: "#0023000C",
-                              borderRadius: "10px",
+                              backgroundColor: "#fff",
+                              border: "none", // Remove all borders
+                              borderBottom: "2px solid #ccc", // Set bottom border
+                              borderRadius: "0px", // Remove border radius
+                              height: "52px",
                               height: "52px",
                               marginRight: "10px",
                             }}
@@ -1015,8 +1266,11 @@ export default function Purchase() {
                         <div className="d-flex col-md-6 mt-2">
                           <input
                             style={{
-                              backgroundColor: "#0023000C",
-                              borderRadius: "10px",
+                              backgroundColor: "#fff",
+                              border: "none", // Remove all borders
+                              borderBottom: "2px solid #ccc", // Set bottom border
+                              borderRadius: "0px", // Remove border radius
+                              height: "52px",
                               height: "52px",
                             }}
                             className="form-control col-md-3"
@@ -1047,8 +1301,11 @@ export default function Purchase() {
                       <div
                         className="form-row d-flex col-md-6 p-2 mt-2"
                         style={{
-                          backgroundColor: "#0023000C",
-                          borderRadius: "10px",
+                          backgroundColor: "#fff",
+                            border: "none", // Remove all borders
+                            borderBottom: "2px solid #ccc", // Set bottom border
+                            borderRadius: "0px", // Remove border radius
+                            height: "52px",
                           height: "52px",
                         }}
                       >
@@ -1056,19 +1313,19 @@ export default function Purchase() {
                           <div
                             className="input-group-prepend"
                             style={{
-                              background: "#F5F5F5",
+                              background: "#ffffff",
                               height: "100%",
-                              borderRadius: "10px 0 0 10px",
+
                               display: "flex",
                               alignItems: "center",
                             }}
                           >
-                            <span
+                            {/* <span
                               className="input-group-text prefixtext"
                               style={{ border: "none", fontSize: "14px" }}
                             >
                               USD
-                            </span>
+                            </span> */}
                           </div>
                           <input
                             type="text"
@@ -1089,56 +1346,7 @@ export default function Purchase() {
                         </div>
                       </div>
                     )}
-                    <div
-                      className="form-row d-flex col-md-6 p-2 mt-2"
-                      style={{
-                        backgroundColor: "#0023000C",
-                        borderRadius: "10px",
-                        height: "52px",
-                      }}
-                    >
-                      <div className="input-group col-md-6">
-                        <div
-                          className="input-group-prepend"
-                          style={{
-                            background: "#F5F5F5",
-                            height: "100%",
-                            borderRadius: "10px 0 0 10px",
-                            display: "flex",
-                            alignItems: "center",
-                          }}
-                        >
-                          <span className="input-group-text prefixtext"
-                           style={{ border: "none", fontSize: "14px" }}>
 
-                            USD
-                          </span>
-                        </div>
-                        <input
-                          required
-                          type="number"
-                          className="form-control sampletext"
-                          placeholder="Amount"
-                          aria-label="Username"
-                          aria-describedby="addon-wrapping"
-                          name={editingInvoiceId ? "pay_amount" : "amount"}
-                          value={
-
-                            editingInvoiceId && formData.pay_amount === undefined
-                              ? formData.remaining_amount
-                              : formData.pay_amount || formData.amount
-                          }
-                          onChange={handleChange}
-                          onInput={(e) => {
-                            // Allow only numbers and a decimal point with two digits after it
-                            e.target.value = e.target.value
-                              .replace(/[^0-9.]/g, '') // Remove non-numeric characters except the decimal point
-                              .replace(/^(\d*\.?\d{0,2}).*/g, '$1') // Allow only two decimal places
-                              .slice(0, 12); // Limit input length (10 digits + 1 decimal + 2 decimal places)
-                          }}
-                        />
-                      </div>
-                    </div>
                   </form>
                 </div>
                 <div className="modal-footer" style={{ border: "none" }}>
@@ -1146,13 +1354,15 @@ export default function Purchase() {
                     type="button"
                     className="btn btn-secondary-outline"
                     onClick={toggleModal}
+                    style={{ border: " 1px solid #282e26", borderRadius: '20px' }}
                   >
                     Close
                   </button>
                   <button
                     type="submit"
-                    className="btn btn-primary"
+                    className="btn "
                     onClick={handleSubmit}
+                    style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px' }}
                   >
                     Submit
                   </button>

src/components/Pages/AppPAges/ReusableForm/AddDepartmentModal.js

@@ -37,23 +37,33 @@ const AddDepartmentModal = ({ show, handleClose, onDepartmentAdded }) => {
   };
 
   return (
-    <ReusableModal show={show} handleClose={handleClose} title="Add Department" width="760px" height="175px">
+    <ReusableModal show={show} handleClose={handleClose} title="Add Department" width="760px" height="250px">
       <form onSubmit={handleSave}>
-        <div className="form-group d-flex align-items-center mt-1">
+        <div className="form-group ">
           <input
             type="text"
             className="input-field"
             placeholder="Department Name"
             value={departmentName}
             onChange={(e) => setDepartmentName(e.target.value)}
-            style={{ width: "483px", marginRight: "10px" }}
+            style={{ width: "483px", border: "none", // Remove all borders
+              borderBottom: "2px solid #ccc", // Set bottom border
+              marginBottom: "20px",
+              borderRadius: "0px", // Remove border radius
+               }}
             required
           />
+          </div>
+          <div
+          style={{
+            textAlign: "right", // Align content to the right
+          }}
+        >
           <button
             type="submit"
             style={{
               padding: "6px 8px",
-              backgroundColor: "#4545db",
+              backgroundColor: "#282e26",
               color: "white",
               border: "none",
               borderRadius: "40px",
@@ -61,11 +71,11 @@ const AddDepartmentModal = ({ show, handleClose, onDepartmentAdded }) => {
               width: "103px",
               height: "42px",
               fontSize: "18px",
-              marginLeft: "20px",
             }}
           >
             Submit
           </button>
+      
         </div>
       </form>
     </ReusableModal>

src/components/Pages/AppPAges/ReusableForm/AddExpenseModal.js

@@ -37,23 +37,35 @@ const AddExpenseTypeModal = ({ show, handleClose, onExpenseTypeAdded }) => {
   };
 
   return (
-    <ReusableModal show={show} handleClose={handleClose} title="Add Expense Type" width="760px" height="175px">
+    <ReusableModal show={show} handleClose={handleClose} title="Add Expense Type" width="760px" height="250px">
       <form onSubmit={handleSave}>
-        <div className="form-group d-flex align-items-center">
+        <div className="form-group">
           <input
             type="text"
             className="input-field"
             placeholder="Expense Type"
             value={expenseType}
             onChange={(e) => setExpenseType(e.target.value)}
-            style={{ width: "483px", marginRight: "10px" }}
+            style={{
+              width: "483px",
+              border: "none", // Remove all borders
+              borderBottom: "2px solid #ccc", // Set bottom border
+              marginBottom: "20px",
+              borderRadius: "0px", // Remove border radius
+            }}
             required
           />
+        </div>
+        <div
+          style={{
+            textAlign: "right", // Align content to the right
+          }}
+        >
           <button
             type="submit"
             style={{
               padding: "6px 8px",
-              backgroundColor: "#4545db",
+              backgroundColor: "#282e26",
               color: "white",
               border: "none",
               borderRadius: "40px",
@@ -61,7 +73,6 @@ const AddExpenseTypeModal = ({ show, handleClose, onExpenseTypeAdded }) => {
               width: "103px",
               height: "42px",
               fontSize: "18px",
-              marginLeft: "20px",
             }}
           >
             Submit
@@ -70,6 +81,5 @@ const AddExpenseTypeModal = ({ show, handleClose, onExpenseTypeAdded }) => {
       </form>
     </ReusableModal>
   );
-};
-
+}  
 export default AddExpenseTypeModal;

src/components/Pages/AppPAges/ReusableForm/AddVendorModal.js

@@ -93,7 +93,12 @@ const AddVendorModal = ({ show, handleClose, reloadData }) => {
             placeholder="Vendor Name"
             value={vendorName}
             onChange={(e) => setVendorName(e.target.value)}
-            style={{ width: "400px", marginRight: "10px", height: "44px" }}
+            style={{ width: "400px", marginRight: "10px", height: "44px" ,
+
+              border: "none", // Remove all borders
+              borderBottom: "2px solid #ccc", // Set bottom border
+              borderRadius: "0px", // Remove border radius
+             }}
 
           />
           <select
@@ -104,7 +109,10 @@ const AddVendorModal = ({ show, handleClose, reloadData }) => {
               setVendorDepartments([]); // Reset departments when type changes
               setOpeningBalance("");
             }}
-            style={{ width: "400px", marginRight: "10px", height: "44px" }}
+            style={{ width: "400px", marginRight: "10px", height: "44px" ,  border: "none", // Remove all borders
+              borderBottom: "2px solid #ccc", // Set bottom border
+              borderRadius: "0px", // Remove border radius 
+              }}
 
           >
             <option value="">Vendor Type</option>
@@ -136,7 +144,10 @@ const AddVendorModal = ({ show, handleClose, reloadData }) => {
             <select
               className="input-field"
               onChange={handleDepartmentChange}
-              style={{ width: "400px", marginRight: "10px", height: "44px" }}
+              style={{ width: "400px", marginRight: "10px", height: "44px" ,  border: "none", // Remove all borders
+                borderBottom: "2px solid #ccc", // Set bottom border
+                borderRadius: "0px", // Remove border radius
+                 }}
             >
               <option value="">
                 {vendorType === "purchase"
@@ -159,7 +170,10 @@ const AddVendorModal = ({ show, handleClose, reloadData }) => {
                 placeholder="Opening Balance"
                 value={openingBalance}
                 onChange={(e) => setOpeningBalance(e.target.value)}
-                style={{ width: "400px", marginRight: "10px", height: "44px" }}
+                style={{ width: "400px", marginRight: "10px", height: "44px" ,  border: "none", // Remove all borders
+                  borderBottom: "2px solid #ccc", // Set bottom border
+                  borderRadius: "0px", // Remove border radius
+                   }}
               />
             )}
           </div>
@@ -170,10 +184,10 @@ const AddVendorModal = ({ show, handleClose, reloadData }) => {
             style={{
               marginLeft: "690px",
               padding: "4px 8px",
-              backgroundColor: "#4545db",
+              backgroundColor: "#282e26",
               color: "white",
               border: "none",
-              borderRadius: "40px",
+              borderRadius: "20px",
               cursor: "pointer",
               width: "124px",
               height: "42px",

src/components/common/Header.js

@@ -34,9 +34,14 @@ const Header = () => {
   const settingsRef = useRef(null);
   const lotteryRef = useRef(null);
   const gasRef = useRef(null);
-  const [selectedNav, setSelectedNav] = useState("/");
+  // const [selectedNav, setSelectedNav] = useState("/");
   const { Get, getAPI, Post } = useApi();
 
+
+  const [parentLabel, setParentLabel] = useState("Expense"); // Parent label
+  const [selectedChild, setSelectedChild] = useState(""); // Selected child label
+  const [selectedNav, setSelectedNav] = useState("Expense");
+
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const toggleMobileMenu = () => {
     setIsMobileMenuOpen(!isMobileMenuOpen);
@@ -59,6 +64,18 @@ const Header = () => {
     logOutUser();
   };
 
+
+  const handleChildSelection = (childLabel) => {
+    setSelectedChild(childLabel); // Update the selected child label
+    setExpenseDropdownOpen(false); // Close the dropdown
+  };
+  const toggleDropdown = () => {
+    setExpenseDropdownOpen(!expenseDropdownOpen);
+    if (expenseDropdownOpen) {
+      setSelectedChild(""); // Clear selected child if closing
+    }
+  };
+
   const handleStoreManageClick = async () => {
     setDropdownVisible(!isDropdownVisible);
 
@@ -141,6 +158,8 @@ const Header = () => {
     setLotteryDropdownOpen(false);
     setGasDropdownOpen(false);
     setDropdownVisible(false);
+    setSelectedChild("");
+
   };
 
   useEffect(() => {
@@ -163,17 +182,16 @@ const Header = () => {
             className="navbar-toggler"
             type="button"
             onClick={toggleMobileMenu}
->
-<i className="fas fa-bars"></i>
-</button>
-<div
+          >
+            <i className="fas fa-bars"></i>
+          </button>
+          <div
             className={`collapse navbar-collapse ${isMobileMenuOpen ? 'show' : ''}`}
             id="navbarNav"
->            <ul className="navbar-nav me-auto">
+          >            <ul className="navbar-nav me-auto">
               {userRole === "store owner" && (
                 <li
-            className={`nav-item ${
-              selectedNav === "/owner-dashboard" ? "active" : ""
+                  className={`nav-item ${selectedNav === "/owner-dashboard" ? "active" : ""
                     }`}
                 >
                   <Link
@@ -201,28 +219,80 @@ const Header = () => {
                   Dashboard
                 </Link>
               </li>
+
               <li
-                className={`nav-item ${selectedNav === "#" ? "active" : ""}`}
+                className={`nav-item ${expenseDropdownOpen ? "active" : ""}`}
                 ref={expenseRef}
                 onClick={() => {
-                  closeDropdowns();
                   setExpenseDropdownOpen(!expenseDropdownOpen);
                 }}
+                style={{
+                  display: "flex",
+                  flexDirection: "column", // Ensures child label is displayed below
+                  alignItems: "flex-start", // Align labels to the left
+                  position: "relative",
+                  marginTop: "12px",
+
+
+                }}
               >
+                {/* Parent Label */}
                 <a
                   className="nav-link"
                   href="#"
                   onClick={(e) => e.preventDefault()}
+
                 >
-                  Expense
+                  {parentLabel}
                 </a>
+
+                {/* Selected Child Label Below Parent Label */}
+                {selectedChild && (
+                  <span
+                    style={{
+                      fontSize: "14px",
+                      color: "white",
+                      // borderBottom:'1px solid blue',
+                      backgroundColor: "#282e26",
+                      padding: "0px 20px",
+                      borderRadius: '20px',
+                      fontStyle: "normal",
+                    }}
+                  >
+                    {selectedChild}
+                  </span>
+                )}
+
+                {/* Dropdown Menu */}
                 {expenseDropdownOpen && (
-                  <ul className="nav-menu-drop">
+                  <ul
+                    className="nav-menu-drop"
+                    style={{
+                      listStyle: "none",
+                      padding: "10px",
+                      margin: "0px",
+                      border: "1px solid #ccc",
+                      borderRadius: "4px",
+                      boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
+                      backgroundColor: "#fff",
+                      position: "absolute",
+                      top: "100%", // Ensures dropdown appears below labels
+                      left: "0",
+                      zIndex: 10,
+                      transform: "translateY(20px)", // Moves dropdown below header area
+                    }}
+                  >
                     <li>
                       <Link
                         className="nav-menu-drop-item"
                         to="/expense"
-                        onClick={closeDropdowns}
+                        onClick={() => handleChildSelection("Expense")}
+                        style={{
+                          display: "block",
+                          padding: "8px 12px",
+                          color: "#000",
+                          textDecoration: "none",
+                        }}
                       >
                         Expense
                       </Link>
@@ -231,7 +301,13 @@ const Header = () => {
                       <Link
                         className="nav-menu-drop-item"
                         to="/purchase"
-                        onClick={closeDropdowns}
+                        onClick={() => handleChildSelection("Purchase")}
+                        style={{
+                          display: "block",
+                          padding: "8px 12px",
+                          color: "#000",
+                          textDecoration: "none",
+                        }}
                       >
                         Purchase
                       </Link>
@@ -239,9 +315,9 @@ const Header = () => {
                   </ul>
                 )}
               </li>
+
               <li
-                className={`nav-item ${
-                  selectedNav === "/payroll" ? "active" : ""
+                className={`nav-item ${selectedNav === "/payroll" ? "active" : ""
                   }`}
               >
                 <Link
@@ -257,8 +333,7 @@ const Header = () => {
               </li>
 
               <li
-                className={`nav-item ${
-                  selectedNav === "/reportDateSelection" ? "active" : ""
+                className={`nav-item ${selectedNav === "/reportDateSelection" ? "active" : ""
                   }`}
               >
                 <Link
@@ -272,7 +347,7 @@ const Header = () => {
                   Reports
                 </Link>
               </li>
-              {(userRole === "store owner" || userRole === "store manager") &&(
+              {(userRole === "store owner" || userRole === "store manager") && (
 
                 <li
                   className={`nav-item ${selectedNav === "#" ? "active" : ""}`}
@@ -472,7 +547,7 @@ const Header = () => {
                   </ul>
                 )}
               </li>
-              {userRole === "store owner" &&(
+              {userRole === "store owner" && (
                 <li
                   className={`nav-item ${selectedNav === "#" ? "active" : ""}`}
                   ref={settingsRef}
@@ -557,7 +632,7 @@ const Header = () => {
                     </ul>
                   )}
                 </li>
-)}
+              )}
             </ul>
             <div className="d-flex align-items-center" >
 
@@ -656,7 +731,7 @@ const Header = () => {
             </ul>
           )}
         </div>
-</div>
+      </div>
 
 
 

src/components/common/header.css

@@ -49,6 +49,7 @@
 
   .navbar-nav {
     flex-direction: column;
+    
   }
 
   .nav-menu-drop {