public/index.html

@@ -29,7 +29,7 @@
   <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> -->
   <style>
      body {
-  background-color: #E9ECFF;
+  background-color: #f9fff6;
   background-image: url('../src/assets/Image/Pattern.png');
   background-size: cover;
   background-repeat: no-repeat;

src/assets/css/App.css

@@ -37,7 +37,6 @@ body {
   color: #000;
   box-shadow: none;
 }
-
 .btn-primary {
 
   width: 100px;
@@ -109,7 +108,6 @@ 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;
@@ -124,7 +122,6 @@ 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 {
@@ -145,7 +142,7 @@ body {
 }
 .nav-link {
   font-family: "Manrope";
-  font-size: 16px !important;
+  font-size: 18px !important;
   color: #002300;
   
   text-decoration: none;
@@ -370,7 +367,7 @@ body {
 .row {
   display: flex;
   flex-wrap: wrap;
-  gap: 20px;
+  gap: 40px;
 
 }
 .col-2 {
@@ -497,7 +494,6 @@ body {
 }
 .search-container input {
   width: 100%;
-  color: #000;
   height: 50px;
   background: #f4f4f4;
   border-radius: 50px;
@@ -507,7 +503,7 @@ body {
   box-sizing: border-box;
 }
 .search-container input::placeholder {
-  color: #282E26;
+  color: #ffffff;
 }
 .search-container input:focus {
   outline: none;
@@ -793,8 +789,7 @@ h3 {
 
 
 .table-responsive th {
-  background-color: #282e26;
-  color: white;
+  background-color: #f4f4f4;
 }
 .table-responsives {
   border: 0.5px solid #f4f4f4;
@@ -855,18 +850,14 @@ h5 {
   left: 0;
   width: 100%;
   height: 100%;
-
-
   background-color: rgba(0, 0, 0, 0.5);
 }
 .modal-container {
   max-width: 768px; /* Updated to 768px */
   margin: 0;
-
   background-color: white;
   border-radius: 0.5rem;
 }
-
 .modal-header,
 .modal-body,
 .modal-footer {

src/components/Pages/AppPAges/Dashboard/Invoice/AddInvoice.js

@@ -320,7 +320,7 @@ function AddInvoice() {
       type: "pay-bank-options",
     },
     {
-      row: 3,
+      row: 5,
       column: "col-md-3",
       label: "Due Days",
       type: "select-dueDays",
@@ -443,7 +443,7 @@ function AddInvoice() {
       case "prefix-input":
         return (
           <div
-            className="form-group col-md-12"
+            className="form-group col-md-6"
             style={{
               display: "flex",
               alignItems: "center",
@@ -781,7 +781,7 @@ function AddInvoice() {
               <div className="row mb-3">
                 <div className="col-md-6">
                   <div className="form-group">
-                  
+                    {/* <label htmlFor="prepaid_amount">Prepaid Tax</label> */}
                     <input
                       type="text"
                       className="form-control-borderless"

src/components/Pages/AppPAges/Dashboard/Invoice/BankDeposit.js

@@ -197,8 +197,8 @@ function BankDeposit() {
 
 
 
-                        <div className="col-md-12 row ">
-                            <div className=" col-md-4">
+                        <div className="col-md-12 row mb-3">
+                            <div className="mb-3 col-md-4">
                                 <input
                                     type="date"
                                     className="form-control-borderless"
@@ -245,13 +245,12 @@ function BankDeposit() {
 
 
                             <div
-                                className="col-md-12 mb-12"
+                                className="col-md-12"
                                 style={{
                                     display: "flex",
                                     alignItems: "center",
                                     justifyContent: "space-between", // Adjust spacing between items
                                     gap: "50px", // Add gap for consistent spacing
-                                    // marginBottom:"30px",
                                 }}
                             >
                                 <div

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

@@ -89,12 +89,12 @@
 .input-group {
     flex-wrap: nowrap;
     border-radius: 50px;
-    /* background-color: #f4f4f4; */
+    background-color: #f4f4f4;
 }
 
 .input-group .form-control {
     border: none;
-    background-color: transparent;
+    /* background-color: transparent; */
     outline: none;  /* Removes the outline */
 
 }
@@ -102,12 +102,12 @@
 .table th {
     justify-content: center;
     height: 60px;
-    background-color: #ffffff;
+    background-color: #f9f9f9;
     font-weight: bold;
 }
 
 .table td {
-    border-bottom: 1px solid #EBEAF2;
+    border-bottom: .5px solid #f4f4f4;
     text-align: left;
     vertical-align: middle;
 }
@@ -127,8 +127,8 @@
     border-end-start-radius: 24px;
     border-end-end-radius: 24px;
     padding: 10px;
-    border-bottom: 2px solid #EBEAF2;
-    background-color: #ffffff;
+
+    background-color: #f4f4f4;
     justify-content: center;
     align-items: center;
 }
@@ -324,3 +324,4 @@ input[type="color"]:focus,
     box-shadow: none; /* Remove any shadow */
   }
   
+  

src/components/Pages/AppPAges/Dashboard/Invoice/InvoiceTable.js

@@ -763,50 +763,24 @@ const paymentMethodStyles = {
 const getPaymentMethodStyle = (method) => ({
   ...(paymentMethodStyles[method] || { backgroundColor: "#6c757d" }),
   borderRadius: "5px",
-
   padding: "10px 20px",
   color: "#000",
 });
 
 const statusStyles = {
-  All: {
-    backgroundColor: "#4545DB",
-    width: "130px", // Set a fixed width
-    height: "30px", // Set a fixed height
-    fontSize:"14px"
-  },
-  paid: {
-    backgroundColor: "#198f51",
-    width: "130px", // Set a fixed width
-    height: "30px", // Set a fixed height
-    fontSize:"14px"
-  },
-  unpaid: {
-    backgroundColor: "#ff2024",
-    width: "130px", // Set a fixed width
-    height: "30px", // Set a fixed height
-    fontSize:"14px"
-  },
-  partially_paid: {
-    backgroundColor: "#0c8ce9",
-    width: "130px", // Set a fixed width
-    height: "30px", // Set a fixed height
-    fontSize:"14px"
-  },
+  All: { backgroundColor: "#4545DB" },
+  // draft: { backgroundColor: '#4545DB7C' },
+  unpaid: { backgroundColor: "#ff2024" },
+  partially_paid: { backgroundColor: "#0c8ce9" },
 };
 
 const getStatusStyle = (status) => ({
-  ...(statusStyles[status] || { backgroundColor: "#198f51", width: "150px", height: "40px" }), // Default style
+  ...(statusStyles[status] || { backgroundColor: "#198f51" }),
   borderRadius: "5px",
-  padding: "5px 20px",
-  textAlign: "center",
-  display: "flex", // Use flexbox for alignment
-  justifyContent: "center", // Center horizontally
-  alignItems: "center", // Center vertically
+  padding: "10px 20px",
   color: "#fff",
 });
 
-
 const getCountClass = (status) => ({
   ...statusStyles[status],
   padding: "10px",

src/components/Pages/AppPAges/Dashboard/Invoice/PayInvoice.js

@@ -342,7 +342,7 @@ function PayInvoice() {
              
              
             </div>
-            <div className="col-md-12 row" style={{ gap: "15%" }}>
+            <div className="col-md-12 row" style={{gap:"10%"}}>
               <div className="mb-3 col-md-2" >
                 <input
                   type="date"
@@ -410,21 +410,19 @@ function PayInvoice() {
                 </select> */}
               </div>
             </div>
-            <div className="mb-3 col-md-12 row mt-3" style={{gap:"70px"}} >
-              <div className="col-md-3">
+            <div className="mb-3 col-md-12 row">
+              <div className="col-md-2">
                 <input
                   name="amount"
                   type="text"
-                  className="form-control"
+                  className="form-control-borderless"
                   value={formData.amount}
                   readOnly
                   placeholder="Amount"
-                  style={{ backgroundColor: "#fafafa" }}
                 />
               </div>
               <div className="col-md-2">
                 <input
-
                   type="text"
                   className="form-control-borderless"
                   name="pay_amount"
@@ -468,9 +466,12 @@ function PayInvoice() {
     value={grandTotal || ""}
     readOnly
     style={{
+      border: 'none', // Remove all borders
+      backgroundColor:'transparent',
+      borderBottom: '1px solid #ACB4AA', // Add only the bottom border
     
-                    backgroundColor: '#fafafa',
-
+      outline: 'none', // Remove outline
+      padding: '6px 0', // Optional: Add padding to the top and bottom
     }}
   />
 </div>
@@ -478,37 +479,17 @@ function PayInvoice() {
             
             
             
-
-
-
-            
-                {/* <div className="col-md-3 mt-4">
-                <input
-                  name="after_discount"
-                  type="text"
-                  maxLength={2}
-                  className="form-control"
-                  value={formData.after_discount || ""}
-                  placeholder="After Discount Amount"
-                  readOnly
-                />
-              </div> */}
-
-
-              </div>
-
-              <div className="md-col-12 ">
             <div
   className=" d-flex align-items-center"
   style={{
     border: '2px solid #ACB4AA',
-                    padding: '2px 20px', // Same left and right padding
+    padding: '5px 40px',
     width: 'fit-content',
     borderRadius: '40px',
   }}
 >
   {['cash', 'cheque', 'bank'].map((method) => (
-                    <div className="" key={method}>
+    <div className="me-3" key={method}>
       <input
         type="radio"
         className="form-check-input"
@@ -535,15 +516,32 @@ function PayInvoice() {
     </div>
   ))}
 </div>
-            </div>
-            <div className="col-md-12 mt-3" >
 
+
+              <div className="">
+              {/* <div className="col-md-3 mt-4">
+                <input
+                  name="after_discount"
+                  type="text"
+                  maxLength={2}
+                  className="form-control"
+                  value={formData.after_discount || ""}
+                  placeholder="After Discount Amount"
+                  readOnly
+                />
+              </div> */}
+
+            
+              </div>
+            </div>
+            <div className="col-md-6">
               {formData.pay_method === "cheque" && (
-                <div className="row "> {/* Use row class for Bootstrap grid */}
-                  <div className="col-md-2 mb-3"> {/* First column for bank select */}
+                <div className="">
+                  <div className="col-md-12 row">
+                    <div className="mb-3 col-md-6">
                       <select
                         required
-                      className="form-control-borderless" // Keep Bootstrap styles
+                        className="form-control-borderless"
                         name="bank"
                         value={formData.bank}
                         onChange={handleChange}
@@ -556,8 +554,7 @@ function PayInvoice() {
                         ))}
                       </select>
                     </div>
-
-                  <div className="col-md-2 mb-3"> {/* Second column for cheque number input */}
+                    <div className="mb-3 col-md-6">
                       <input
                         required
                         type="text"
@@ -569,17 +566,9 @@ function PayInvoice() {
                       />
                     </div>
                   </div>
+                </div>
               )}
 
-
-
-
-
-
-
-
-
-
               {formData.pay_method === "bank" && (
                 <div className="mb-3">
                   <div className="col-md-12 row">

src/components/Pages/AppPAges/Dashboard/Invoice/PayInvoice_Table.js

@@ -866,40 +866,16 @@ const getPaymentMethodStyle = (method) => ({
 });
 
 const statusStyles = {
-  All: {
-    backgroundColor: "#4545DB",
-    width: "130px", // Set a fixed width
-    height: "30px", // Set a fixed height
-    fontSize:"14px"
-  },
-  paid: {
-    backgroundColor: "#198f51",
-    width: "130px", // Set a fixed width
-    height: "30px", // Set a fixed height
-    fontSize:"14px"
-  },
-  unpaid: {
-    backgroundColor: "#ff2024",
-    width: "130px", // Set a fixed width
-    height: "30px", // Set a fixed height
-    fontSize:"14px"
-  },
-  partially_paid: {
-    backgroundColor: "#0c8ce9",
-    width: "130px", // Set a fixed width
-    height: "30px", // Set a fixed height
-    fontSize:"14px"
-  },
+  All: { backgroundColor: "#4545DB" },
+  // draft: { backgroundColor: "#4545DB7C" },
+  unpaid: { backgroundColor: "#ff2024" },
+  partially_paid: { backgroundColor: "#0c8ce9" },
 };
 
 const getStatusStyle = (status) => ({
-  ...(statusStyles[status] || { backgroundColor: "#198f51", width: "150px", height: "40px" }), // Default style
+  ...(statusStyles[status] || { backgroundColor: "#198f51" }),
   borderRadius: "5px",
-  padding: "5px 20px",
-  textAlign: "center",
-  display: "flex", // Use flexbox for alignment
-  justifyContent: "center", // Center horizontally
-  alignItems: "center", // Center vertically
+  padding: "10px 20px",
   color: "#fff",
 });
 

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

@@ -811,7 +811,6 @@ export default function Expense() {
                   </h5>
 
                   <svg
-
                     onClick={toggleModal}
                     width="14"
                     height="14"
@@ -952,7 +951,7 @@ export default function Expense() {
                           <div
                             className="input-group-prepend"
                             style={{
-                              backgroundColor: "#ffffff",
+                              background: "#ffffff",
                               height: "100%",
 
                               display: "flex",
@@ -1348,13 +1347,12 @@ 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={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px' }}
+                    style={{backgroundColor:'#282E26' ,color:"#fff"}}
                     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 ">
+      <table className="data-table custom-table rounded-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 ">
+      <table className="data-table custom-table rounded-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 ">
+      <table className="data-table custom-table rounded-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 ">
+      <table className="data-table custom-table rounded-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 ">
+      <table className="data-table custom-table rounded-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">
+      <table className="data-table custom-table rounded-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 ">
+      <table className="data-table custom-table rounded-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

@@ -126,44 +126,32 @@ const PayrollTable = ({
     draft: {
       backgroundColor: "#D1D1EF",
       color: "#fff",
-      borderRadius: "5px",
+      borderRadius: "30px",
       padding: "5px 10px",
-      width: "130px", // Set a fixed width
-      height: "30px", // Set a fixed height
-      fontSize:"14px"
     },
     unpaid: {
       backgroundColor: "#ff2024",
       color: "#fff",
-      borderRadius: "5px",
+      borderRadius: "10px",
       padding: "5px 20px",
-      width: "130px", // Set a fixed width
-      height: "30px", // Set a fixed height
-      fontSize:"14px",
         textAlign:'center',
       alignItems:'center'
     },
     paid: {
       backgroundColor: "#198f51",
       color: "#fff",
-      borderRadius: "5px",
+      borderRadius: "10px",
       padding: "5px 20px",
       textAlign:'center',
-      alignItems: 'center',
-      width: "130px", // Set a fixed width
-      height: "30px", // Set a fixed height
-      fontSize:"14px"
+      alignItems:'center'
     },
     partially_paid: {
       backgroundColor: "#0c8ce9",
       color: "#fff",
-      borderRadius: "5px",
+      borderRadius: "10px",
       padding: "5px 20px",
         textAlign:'center',
-      alignItems: 'center',
-      width: "130px", // Set a fixed width
-      height: "30px", // Set a fixed height
-      fontSize:"14px"
+      alignItems:'center'
     },
   };
   const paymentMethodStyles = {
@@ -262,56 +250,42 @@ const PayrollTable = ({
           </button> */}
         </div>
 
-        <div style={{ marginRight: "58%" }}>
+        <div style={{marginRight:"60%"}}>
         <div
           className="expense-search d-flex align-items-center"
-        
           style={{
-              display: "flex",
-              alignItems: "center",
-              backgroundColor: "#FFFFFF",
-              border: "1px solid #DBDBDB",
-              borderRadius: "10px",
-              // boxSizing: "border-box",
-              cursor: "pointer",
+            backgroundColor: "#4A5546",
+            boxShadow: "none",
+            outline: "none",
+            width: "auto",
+            height: "42px",
 
-              width: "170px",
-              gap: "10px",
-            }}
-          >
-            <span
-              style={{
-                fontFamily: "'Comfortaa'",
-                fontStyle: "normal",
-                fontWeight: "400",
+            padding: "8px 12px",
             fontSize: "16px",
-                padding: "5px",
-                color: "#000000",
+            border: "none",
+            borderRadius: "10px",
+            color: "#F4FFEE",
+            cursor: "pointer",
           }}
         >
-              Show Rows:
-            </span>
+          <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",
-                borderRadius: "0px 10px 10px 0px",
-                color: "#F4FFEE",
-                fontFamily: "'Comfortaa'",
-                fontStyle: "normal",
-                fontWeight: "700",
-                fontSize: "16px",
-                lineHeight: "18px",
-                padding: "5px 8px",
-                border: "none",
-                cursor: "pointer",
+              color: "#fff",
+              fontSize: "14px",
             }}
             value={rowsPerPage}
             onChange={(e) => {
               setRowsPerPage(Number(e.target.value));
-                setCurrentPage(1); // Reset to the first page on change
+              setCurrentPage(1); // Reset to first page on change
             }}
           >
             <option value={5}>5</option>
@@ -320,12 +294,10 @@ const PayrollTable = ({
             <option value={20}>20</option>
           </select>
         </div>
-          
 </div>
 
-
       </div>
-      <table className="data-table custom-table ">
+      <table className="data-table custom-table rounded-table">
         <thead className="table-header">
           <tr>
             {columns.map((col, index) => (

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

@@ -107,15 +107,15 @@ function ManageDepartments() {
     (dept) => dept.type === "department"
   );
   return (
-    <div className="" style={{marginTop:"5%"}}>
+    <div className="store-container">
       <ToastContainer />
-      {/* <p className="setting-title">Manage Departments</p> */}
-      <div className="department-container">
+      <p className="setting-title">Manage Departments</p>
+      <div className="create-department-section">
         <div className="input-container">
           <div className="input-row">
             <input
               type="text"
-              placeholder="Enter Department Name"
+              placeholder="New Department"
               className="input-field"
               value={editDepartmentId ? editDepartmentTitle : newDepartment}
               onChange={(e) => {
@@ -125,21 +125,14 @@ function ManageDepartments() {
                   setNewDepartment(e.target.value);
                 }
               }}
-              style={{
-                border: "none", // Remove all borders
-                borderBottom: "2px solid #ccc", // Set bottom border
-                borderRadius: "0px", // Remove border radius
-              }}
               required
             />
-            <button className="btn cus d-flex align-items-center" onClick={handleSaveDepartment}>
-              {editDepartmentId ? "Update Department" : " + Add Department"}
+            <button className="dept-button" onClick={handleSaveDepartment}>
+              {editDepartmentId ? "Update" : " + Add"}
             </button>
           </div>
         </div>
       </div>
-<div className="store-container"> 
-
       <div className="show-department-section">
   <div className="dept-cards-row">
     {filteredDepartments.length === 0 ? (
@@ -208,8 +201,6 @@ function ManageDepartments() {
   </div>
 </div>
 
-
-</div>
     </div>
   );
 }

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

@@ -179,7 +179,6 @@ 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)}
@@ -277,57 +276,16 @@ const ManageUserTable = ({
             </div>
           )}
         </div>
-       
-        <div style={{ marginRight: "69%" }}>
-          <div
-            className="expense-search d-flex align-items-center"
-        
-            style={{
-              display: "flex",
-              alignItems: "center",
-              backgroundColor: "#FFFFFF",
-              border: "1px solid #DBDBDB",
-              borderRadius: "10px",
-              // boxSizing: "border-box",
-              cursor: "pointer",
-              
-              width: "170px",
-              gap: "10px",
-            }}
-          >
-            <span
-              style={{
-                fontFamily: "'Comfortaa'",
-                fontStyle: "normal",
-                fontWeight: "400",
-                fontSize: "16px",
-                padding: "5px",
-                color: "#000000",
-              }}
-            >
-              Show Rows:
-            </span>
+        <div className="expense-searchcontainerend d-flex align-items-center">
+          <h3 className="me-2">Show</h3>
           <select
             name="option"
             id="pageSelect"
             className="selectoptions"
-              style={{
-                backgroundColor: "#282E26",
-                borderRadius: "0px 10px 10px 0px",
-                color: "#F4FFEE",
-                fontFamily: "'Comfortaa'",
-                fontStyle: "normal",
-                fontWeight: "700",
-                fontSize: "16px",
-                lineHeight: "18px",
-                padding: "5px 8px",
-                border: "none",
-                cursor: "pointer",
-              }}
             value={rowsPerPage}
             onChange={(e) => {
               setRowsPerPage(Number(e.target.value));
-                setCurrentPage(1); // Reset to the first page on change
+              setCurrentPage(1); // Reset to first page on change
             }}
           >
             <option value={5}>5</option>
@@ -336,12 +294,8 @@ const ManageUserTable = ({
             <option value={20}>20</option>
           </select>
         </div>
-          
       </div>
-
-
-      </div>
-      <table className="data-table custom-table ">
+      <table className="data-table custom-table rounded-table">
         <thead className="table-header">
           <tr>
             <th scope="col" className="no-column">
@@ -464,7 +418,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",
@@ -483,9 +437,9 @@ const ManageUserTable = ({
                 &lt;
               </span>
               &nbsp;
-            </li> */}
+            </li>
             {renderPagination()}
-            {/* <li
+            <li
               className={`prev-next ${
                 currentPage === totalPages ? "disabled" : ""
               }`}
@@ -508,7 +462,7 @@ const ManageUserTable = ({
               >
                 &gt;{" "}
               </span>
-            </li> */}
+            </li>
           </ul>
         </nav>
       )}

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

@@ -10,10 +10,6 @@ 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() {
@@ -393,67 +389,27 @@ function ManageUsers() {
       <div className="due-days">
         <div className="header-row">
           <div className="setting-title">Manage Users</div>
-          <div className="btn-position" style={{ display: "flex", gap: "10px" }}> {/* Set up flex with gap */}
+          <div className="btn-position">
             <button
-              className="btn cus d-flex align-items-center"
+              className="vendor-add-button"
               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
-              style={{
-                backgroundColor: "#4A5546",
-                boxShadow: "none",
-                outline: "none",
-                width: "auto",
-                height: "42px",
-                padding: "8px 12px",
-                fontSize: "16px",
-                border: "none",
-                borderRadius: "10px",
-                color: "#F4FFEE",
-                cursor: "pointer",
-              }}
+              className="vendor-add-button"
               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
-              style={{
-                backgroundColor: "#4A5546",
-                boxShadow: "none",
-                outline: "none",
-                width: "auto",
-                height: "42px",
-                padding: "8px 12px",
-                fontSize: "16px",
-                border: "none",
-                borderRadius: "10px",
-                color: "#F4FFEE",
-                cursor: "pointer",
-              }}
+              className="vendor-add-button"
               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>
-
         <ManageUserTable
           data={users}
           columns={columns}
@@ -469,10 +425,10 @@ function ManageUsers() {
           show={true}
           handleClose={handleCloseUserModal}
           title={currentUserId ? "Edit User" : "Add New User"}
-          width="700px"
+          width="1054px"
         >
           <form>
-            <div className="form-group d-flex flex-column p-5">
+            <div className="form-group d-flex flex-column">
               <div className="d-flex align-items-center mb-3">
                 <input
                   type="text"
@@ -480,13 +436,7 @@ function ManageUsers() {
                   placeholder="Full Name"
                   value={fullName}
                   onChange={(e) => setFullName(e.target.value)}
-                  style={{
-                    width: "483px", marginRight: "10px", backgroundColor: "#ffffff",
-                    border: "none", // Remove all borders
-                    borderBottom: "2px solid #ccc", // Set bottom border
-                    borderRadius: "0px", // Remove border radius
-
-                  }}
+                  style={{ width: "483px", marginRight: "10px" }}
                 />
                 <input
                   type="email"
@@ -494,20 +444,14 @@ function ManageUsers() {
                   placeholder="Email"
                   value={email}
                   onChange={(e) => setEmail(e.target.value)}
-                  style={{
-                    width: "483px", marginRight: "10px", backgroundColor: "#ffffff",
-                    border: "none", // Remove all borders
-                    borderBottom: "2px solid #ccc", // Set bottom border
-                    borderRadius: "0px", // Remove border radius 
-                  }}
-
+                  style={{ width: "483px", marginRight: "10px" }}
                 />
               </div>
               <div className="d-flex align-items-center mb-3">
                 <input
                   type="tel"
                   className="input-field"
-                  placeholder="Phone Number "
+                  placeholder="Phone Number (without country code)"
                   value={phoneNumber}
                   onChange={(e) => {
 
@@ -517,25 +461,13 @@ function ManageUsers() {
                     }
                   }}
                   maxLength={10}
-                  style={{
-                    width: "483px", marginRight: "10px", backgroundColor: "#ffffff",
-                    border: "none", // Remove all borders
-                    borderBottom: "2px solid #ccc", // Set bottom border
-                    borderRadius: "0px", // Remove border radius
-
-                  }}
+                  style={{ width: "483px", marginRight: "10px" }}
                 />
                 <select
                   className="input-field"
                   value={role}
                   onChange={(e) => setRole(e.target.value)}
-                  style={{
-                    width: "483px", marginRight: "10px", backgroundColor: "#ffffff",
-                    border: "none", // Remove all borders
-                    borderBottom: "2px solid #ccc", // Set bottom border
-                    borderRadius: "0px", // Remove border radius
-
-                  }}
+                  style={{ width: "483px", marginRight: "10px" }}
                 >
                   <option value="">Select Role for User</option>
                   {roles.map((r) => (
@@ -561,7 +493,7 @@ function ManageUsers() {
                   style={{
                     marginRight: "40px",
                     padding: "4px 8px",
-                    backgroundColor: "#282e26",
+                    backgroundColor: "#4545db",
                     color: "white",
                     border: "none",
                     borderRadius: "40px",
@@ -589,10 +521,10 @@ function ManageUsers() {
           show={true}
           handleClose={handleCloseStoreModal}
           title={"Add New Store"}
-          width="700px"
+          width="1054px"
         >
           <form>
-            <div className="form-group p-5">
+            <div className="form-group">
               {/* Wrapper for Flexbox */}
               <div className="d-flex flex-wrap">
                 {/* Left Side */}
@@ -609,12 +541,7 @@ function ManageUsers() {
                           store_name: e.target.value,
                         }))
                       }
-                      style={{
-                        width: "100%", marginRight: "10px", backgroundColor: "#ffffff",
-                        border: "none", // Remove all borders
-                        borderBottom: "2px solid #ccc", // Set bottom border
-                        borderRadius: "0px", // Remove border radius 
-                      }}
+                      style={{ width: "100%" }}
                     />
                   </div>
                   <div className="mb-3">
@@ -629,12 +556,7 @@ function ManageUsers() {
                           address_line1: e.target.value,
                         }))
                       }
-                      style={{
-                        width: "100%", marginRight: "10px", backgroundColor: "#ffffff",
-                        border: "none", // Remove all borders
-                        borderBottom: "2px solid #ccc", // Set bottom border
-                        borderRadius: "0px", // Remove border radius 
-                      }}
+                      style={{ width: "100%" }}
                     />
                   </div>
                   <div className="mb-3">
@@ -644,12 +566,7 @@ function ManageUsers() {
                       placeholder="City"
                       value={formData.city}
                       readOnly
-                      style={{
-                        width: "100%", marginRight: "10px", backgroundColor: "#ffffff",
-                        border: "none", // Remove all borders
-                        borderBottom: "2px solid #ccc", // Set bottom border
-                        borderRadius: "0px", // Remove border radius 
-                      }}
+                      style={{ width: "100%" }}
                     />
                   </div>
                 </div>
@@ -664,12 +581,7 @@ function ManageUsers() {
                       value={formData.pincode}
                       onChange={handlePincodeChange}
                       onBlur={handlePincodeBlur}
-                      style={{
-                        width: "100%", marginRight: "10px", backgroundColor: "#ffffff",
-                        border: "none", // Remove all borders
-                        borderBottom: "2px solid #ccc", // Set bottom border
-                        borderRadius: "0px", // Remove border radius 
-                      }}
+                      style={{ width: "100%" }}
                       maxLength={5}
                     />
                   </div>
@@ -683,12 +595,7 @@ function ManageUsers() {
                       placeholder="State"
                       value={formData.state}
                       readOnly
-                      style={{
-                        width: "100%", marginRight: "10px", backgroundColor: "#ffffff",
-                        border: "none", // Remove all borders
-                        borderBottom: "2px solid #ccc", // Set bottom border
-                        borderRadius: "0px", // Remove border radius 
-                      }}
+                      style={{ width: "100%" }}
                     />
                   </div>
                   <div className="mb-3">
@@ -698,12 +605,7 @@ function ManageUsers() {
                       placeholder="Country"
                       value={formData.country}
                       readOnly
-                      style={{
-                        width: "100%", marginRight: "10px", backgroundColor: "#ffffff",
-                        border: "none", // Remove all borders
-                        borderBottom: "2px solid #ccc", // Set bottom border
-                        borderRadius: "0px", // Remove border radius 
-                      }}
+                      style={{ width: "100%" }}
                     />
                   </div>
                 </div>
@@ -715,7 +617,7 @@ function ManageUsers() {
                   style={{
                     marginRight: "40px",
                     padding: "4px 8px",
-                    backgroundColor: "#282e26",
+                    backgroundColor: "#4545db",
                     color: "white",
                     border: "none",
                     borderRadius: "40px",
@@ -741,32 +643,26 @@ function ManageUsers() {
         <ReusableModal
           show={true}
           handleClose={handleCloseAssignOwnerModal}
-          title="Assign Admin as Owner"
+          title="Assign Admin"
           width="600px"
         >
           <form onSubmit={handleAssignOwnerSubmit}>
-            <div className="form-group d-flex flex-column mt-1 p-3 ">
+            <div className="form-group d-flex align-items-center mt-1">
               <input
                 type="email"
                 className="input-field"
                 placeholder="Enter User Email"
                 value={ownerEmail}
                 onChange={(e) => setOwnerEmail(e.target.value)}
-                style={{
-                  width: "483px",
-                  marginBottom: "20px", // Add margin between email and button
-                  backgroundColor: "#ffffff",
-                  border: "none", // Remove all borders
-                  borderBottom: "2px solid #ccc", // Set bottom border
-                  borderRadius: "0px", // Remove border radius  
-                }}
+                style={{ width: "483px", marginRight: "20px" }}
                 required
               />
               <div style={{ display: "flex", justifyContent: "flex-end" }}>
                 <button
                   style={{
+                    marginRight: "40px",
                     padding: "4px 8px",
-                    backgroundColor: "#282e26",
+                    backgroundColor: "#4545db",
                     color: "white",
                     border: "none",
                     borderRadius: "40px",
@@ -782,6 +678,8 @@ function ManageUsers() {
                 </button>
               </div>
             </div>
+
+
           </form>
 
         </ReusableModal>

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

@@ -47,7 +47,7 @@ const ReusableModal = ({
   };
 
   const modalContentStyle = {
-    borderRadius: "30px",
+    borderRadius: "15px",
     overflow: "hidden",
     width: width, // use the width prop
     height: height, // use the height prop
@@ -57,32 +57,21 @@ const ReusableModal = ({
   };
 
   const headerStyle = {
-    backgroundColor: "#fff",
+    backgroundColor: "#F0F0F0",
     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",
+    fontWeight: "600", // semibold
     fontSize: "20px",
     color: "#002300",
-    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
+    margin: 0, // remove default margin
   };
 
   return (
@@ -99,7 +88,6 @@ const ReusableModal = ({
           <h5 className="modal-title" style={titleStyle}>
             {title}
           </h5>
-          <div style={closeButtonStyle}>
           <svg
             onClick={handleClose}
             width="26"
@@ -116,7 +104,6 @@ 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" style={{borderRadius:"none"}} >
+      <table className="data-table custom-table rounded-table">
         <thead className="table-header">
           <tr>
             <th scope="col" className="no-column">

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

@@ -167,12 +167,10 @@
 .due-days {
   padding: 20px; /* Adjust as needed */
   margin: 20px auto;
-  border: 1px solid #EBEAF2;
-  box-shadow: "0px 2px 8px rgba(6, 12, 34, 0.0392157)";
-  border-radius: 40px;
+  background-color: #ffffff;
+  border-radius: 10px;
   width: 1600px;
   max-width: 100%;
-  background-color: #ffffff;
 }
 .due-card {
   position: relative;
@@ -264,35 +262,13 @@
   flex-direction: column;
   justify-content: flex-start;
   align-items: flex-start; /* Align items to the start (left) */
-  border-radius: 40px;
+  border-radius: 10px;
   padding: 30px;
   margin: 20px auto;
   background-color: #ffffff;
   width: 1600px;
   max-width: 100%;
-
 }
-
-
-.department-container {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start; /* Align items to the start (top) */
-  align-items: flex-start; /* Align items to the start (left) */
-  border-radius: 20px;
-  padding: 30px;
-
-  border: none; /* Ensure no border */
-  border-bottom: 2px solid #ccc; /* Set a bottom border */
-  margin: 20px 0; /* Center vertically with top and bottom margins */
-  background-color: #ffffff;
-  width: 850px; /* Set a fixed width */
-  max-width: 100%; /* Ensure it doesn't exceed the screen width */
-  margin-left: 160px; /* Align to the left with 9% margin */
-}
-
-
-
 .setting-title {
   margin-bottom: 10px; /* Space between title and inputs */
   font-size: 24px; /* Adjust as needed */
@@ -308,7 +284,7 @@
   padding: 10px;
   width: 600px;
   height: 40px;
-  background-color: #fff;
+  background-color: #f6f6f6;
   border: 1px solid #f6f6f6;
   border-radius: 5px;
 }
@@ -469,25 +445,22 @@
   gap: 10px; /* Space between cards */ /* space above cards */
 }
 .dept-card {
-  width: 474px; /* Fixed width */
-  height: 70px; /* Fixed height */
+  width: 474px; /* fixed width */
+  height: 70px; /* fixed height */
   padding: 10px;
-  border: 1px solid #EBEAF2; /* Add border color */
-  border-radius: 20px; /* Rounded corners */
-  display: flex; /* Flexbox layout */
-  align-items: center; /* Center items vertically */
-  justify-content: space-between; /* Space items evenly */
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add box shadow */
+  border: 1px solid #f6f6f6;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 .dept-info {
   width: 386px;
   height: 50px;
   padding: 10px;
-  background-color: #ffffff;
-  
-  border: none; /* Remove the redundant border */
-
-  border-radius: 10px; /* Rounded corners */
+  background-color: #f6f6f6;
+  border: 1px solid rgba(0, 35, 0, 0.1);
+  border-radius: 4px;
 }
 .create-department-section {
   width: 100%;
@@ -541,34 +514,31 @@ input[type="date"] {
 }
 .data-table {
   width: 100%;
-  border: 2px solid #F4F4F4;
+  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: #282e26;
-  color: white;
+  background-color: #f2f2f2;
+  color: #002300;
   cursor: pointer; /* Added cursor for sortable columns */
 }
 .table-body td {
   padding-left: 20px;
   color: #002300;
-  background-color: #ffffff;
-  border-bottom: 1px solid #EBEAF2;
-  
 }
 .table-body tr:last-child td {
-  border-bottom: 1px solid #ffffff;
+  border-bottom: 1px solid #F4F4F4;
 }
 .table-body {
-  border-bottom: 2px solid #EBEAF2;
+  border-bottom: 1px solid #F4F4F4;
 }
 .no-column {
   width: 100px;
@@ -598,8 +568,6 @@ input[type="date"] {
   display: flex;
   justify-content: end;
   padding: 10px 0;
-  background-color: #ffffff;
-  
 }
 .pagination .page-item {
   margin: 0 5px;
@@ -607,26 +575,21 @@ input[type="date"] {
 .pagination .page-link {
   padding: 10px;
   border: 1px solid #F4F4F4;
-  /* background-color: #ffffff; */
   background-color: #b6d7a8;
-  border-radius: 30px;
+  border-radius: 50%;
   color: #002300;
   text-decoration: none;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 30px;
-  height: 30px;
-
+  width: 36px;
+  height: 36px;
   transition: background-color 0.3s, color 0.3s;
 }
 .pagination .page-link:hover {
-  background-color: red;
+  background-color: #ffaf32;
 }
 .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/ManageSettings/StoreInformation.js

@@ -336,9 +336,9 @@ function StoreInformation() {
               maxWidth: '300px',
               textAlign: 'center',
               borderRadius: '20px',
-              border: '1px solid #282E26',
+              border: '1px solid #6666ff',
               fontWeight: '800',
-              backgroundColor: plan.is_active ? 'transparent' : '#282E26',
+              backgroundColor: plan.is_active ? 'transparent' : '#6666ff',
               color: plan.is_active ? '#000' : '#fff',
             }}
             onClick={(e) => {

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

@@ -7,8 +7,6 @@ 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);
@@ -380,9 +378,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 Employee</h3>
+            <h3 className="mb-1">Manage Payroll</h3>
             <button
-              className="btn cus d-flex align-items-center"
+              className="btn btn-primary cus"
               onClick={() => {
                 // fetchBankData();
                 setModalType('new');
@@ -390,11 +388,6 @@ export default function Payroll() {
               }}
             >
               + Add Employee
-              <img
-                src={employeeIcon}
-                alt="employee Icon"
-                style={{ width: "20px", height: "20px", marginLeft: "8px" }}
-              />
             </button>
           </div>
           <PayrollTableWithButton
@@ -414,117 +407,69 @@ export default function Payroll() {
         </div>
         { }
         {showModal && (
-          <div className="modal" style={{}} onClick={closeModal}>
+          <div className="modal-overlay" onClick={closeModal}>
             <div
               className="modal-container"
               onClick={(e) => e.stopPropagation()}
-              style={{ width: modalType === 'payment' ? '650px' : '700px', borderRadius: '40px' }}
+              style={{ width: modalType === 'payment' ? '800px' : '700px' }}
             >
-              <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 || ''}`}
+              <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 || ''}`}
                 </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}>
                   <div className="modal-body">
-                    <div className="form-group -flex flex-column justify-content-center align-items-center px-5 ">
-                      {/* <label htmlFor="full_name">Employee Name</label> */}
+                    <div className="form-group">
+                      <label htmlFor="full_name">Employee Name</label>
                       <input
                         type="text"
                         className="form-control"
                         id="full_name"
                         name="full_name"
-                        placeholder="Employee’s Full Name"
                         value={formData.full_name}
                         onChange={handleChange}
-                        style={{
-                          backgroundColor: "#ffffff",
-                          border: "none", // Remove all borders
-                          borderBottom: "1px solid #9e9e9e", // Set bottom border
-                          borderRadius: "0px", // Remove border radius 
-                        }}
                         required
                       />
                     </div>
-                    <div className="form-group -flex flex-column justify-content-center align-items-center px-5 ">
-                      {/* <label htmlFor="contact_no">Contact Number</label> */}
+                    <div className="form-group">
+                      <label htmlFor="contact_no">Contact Number</label>
                       <input
                         type="tel"
                         className="form-control"
                         id="contact_no"
-                        placeholder="Contact Number"
                         name="contact_no"
                         value={formData.contact_no}
                         onChange={handleChange}
                         required
                         maxLength={10}
-                        style={{
-                          backgroundColor: "#ffffff",
-                          border: "none", // Remove all borders
-                          borderBottom: "1px solid #9e9e9e", // Set bottom border
-                          borderRadius: "0px", // Remove border radius 
-                        }}
                       />
 
 
                     </div>
-                    <div className="form-group -flex flex-column justify-content-center align-items-center px-5 ">
-                      {/* <label htmlFor="email">Email Address</label> */}
+                    <div className="form-group">
+                      <label htmlFor="email">Email Address</label>
                       <input
                         type="email"
                         className="form-control"
                         id="email"
                         name="email"
-                        placeholder="Email Address"
                         value={formData.email}
                         onChange={handleChange}
-                        style={{
-                          backgroundColor: "#ffffff",
-                          border: "none", // Remove all borders
-                          borderBottom: "1px solid #9e9e9e", // Set bottom border
-                          borderRadius: "0px", // Remove border radius 
-                        }}
                         required
                       />
                     </div>
                   </div>
-                  <div className="modal-footer" style={{ border: "none" }}>
-                    <button type="submit" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px', padding: '5px 15px' }}>
+                  <div className="modal-footer">
+                    <button type="submit" className="btn btn-primary">
                       {modalType === 'edit' ? "Update Employee" : "Add Employee"}
                     </button>
-                    <button type="button" onClick={closeModal} style={{ border: '1px solid #282E26', backgroundColor: "transparent", borderRadius: '20px', padding: '5px 45px' }}>
+                    <button type="button" className="btn btn-contained" onClick={closeModal}>
                       Close
                     </button>
                   </div>
@@ -534,74 +479,66 @@ export default function Payroll() {
               {modalType === 'payment' && (
                 <form onSubmit={handlePaymentSubmit}>
                   <div className="modal-body">
-  <div className="form-group row col-md-12 justify-content-between"> {/* Added justify-content-between */}
-    {/* Salary Amount Input */}
-    <div className="col-md-5 mb-3"> {/* Added margin bottom for spacing */}
+                  <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>
     <input
-        type="text"
+      type="text" // Keeping text type for more flexible input control
       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: "1px solid #9e9e9e", // Set bottom border
-          borderRadius: "0px",
-        }}
       required
       onInput={(e) => {
         let value = e.target.value;
-          value = value.replace(/[^0-9.]/g, "");
-          if (value.indexOf(".") !== -1) {
-            const parts = value.split(".");
-            value = parts[0] + "." + parts[1].substring(0, 2);
+
+        // 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
         }
+
+        // Update the value on the input element
         e.target.value = value;
+
+        // Call the onChange handler to update the state
         handlePaymentChange(e);
       }}
     />
   </div>
+</div>
 
-    {/* Salary Unit Select */}
-    <div className="col-md-5 mb-3"> {/* Added margin bottom for spacing */}
+
+                    <div className="form-row form-group col-md-6">
+                      <label htmlFor="salary_unit">Salary Unit</label>
                       <select
                         className="form-control"
                         name="salary_unit"
                         value={paymentData.salary_unit}
                         onChange={handlePaymentChange}
                         required
-        style={{
-          backgroundColor: "#ffffff",
-          border: "none",
-          borderBottom: "1px solid #9e9e9e", // Set bottom border
-          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>
-
-
-
-                    <div className="form-group row col-md-12 justify-content-between">
-                      {/* Start Date Input */}
-                      <div className="form-group col-md-5">
-                      
+                    <div className="form-row form-group col-md-6">
+                      <label htmlFor="start_date">Start Date</label>
                       <input
                         type="date"
                         className="form-control"
@@ -609,18 +546,10 @@ export default function Payroll() {
                         value={paymentData.start_date}
                         onChange={handlePaymentChange}
                         required
-                          style={{
-                            backgroundColor: "#ffffff",
-                            border: "none",
-                            borderBottom: "1px solid #9e9e9e", // Set bottom border
-                            borderRadius: "0px",
-                          }}
                       />
                     </div>
-
-                      {/* End Date Input */}
-                      <div className="form-group col-md-5">
-                       
+                    <div className="form-row form-group col-md-6">
+                      <label htmlFor="end_date">End Date</label>
                       <input
                         type="date"
                         className="form-control"
@@ -628,24 +557,11 @@ export default function Payroll() {
                         value={paymentData.end_date}
                         onChange={handlePaymentChange}
                         required
-                          style={{
-                            backgroundColor: "#ffffff",
-                            border: "none",
-                            borderBottom: "1px solid #9e9e9e", // Set bottom border
-                            borderRadius: "0px",
-                          }}
                       />
                     </div>
-                    </div>
-
-
-
-
                     {/* <ToastContainer /> */}
-                    <div className="form-group row col-md-12 justify-content-between">
-                      {/* Total Hours Input */}
-                      <div className="form-group col-md-5" >
-
+                    <div className="form-row form-group col-md-6">
+                      <label htmlFor="total_hour">Total Hours</label>
                       <input
                         type="number"
                         className="form-control"
@@ -654,75 +570,37 @@ export default function Payroll() {
                         value={paymentData.total_hour}
                         onChange={handlePaymentChange}
                         onInput={(e) => {
-                            // 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: "1px solid #9e9e9e", // Set bottom border,
-                            borderRadius: "0px",
+                          // 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)
                         }}
                         required
                       />
                     </div>
-
-                      {/* Payment Method Select */}
-                      <div className="form-group col-md-5">
-                        <div style={{ border: '2px solid #ACB4AA', padding: '5px 5px', width: "fit-content", borderRadius: '40px', display: 'flex',  }}>
-                          <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: '5px 5px',
-                              borderRadius: '20px',
-                              cursor: 'pointer',
-                            }}
+                    <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}
                       >
-                            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: '5px 5px',
-                              borderRadius: '20px',
-                              cursor: 'pointer',
-                            }}
-                          >
-                            Bank Transfer
-                          </button>
+                        <option value="cash">Cash</option>
+                        <option value="cheque">Bank Transfer</option>
+                      </select>
                     </div>
-                      </div>
-
-
-
-                    </div>
-
                     {paymentData.payment_method === "cheque" && (
-                      <div className="form-group row col-md-12 justify-content-between">
-                        <div className="form-group col-md-5">
-
+                      <div className="form-group">
+                        <label htmlFor="bank">Bank</label>
                         <select
                           name="bank"
                           id="bank"
                           className="form-control"
                           value={paymentData.bank}
                           onChange={handlePaymentChange}
-                            style={{
-                              backgroundColor: "#ffffff",
-                              border: "none",
-                              borderBottom: "1px solid #9e9e9e", // Set bottom border
-                              borderRadius: "0px",
-                            }}
                         >
                           <option value="">Select Bank</option>
                           {bankdata.map((bank) => (
@@ -731,29 +609,20 @@ export default function Payroll() {
                             </option>
                           ))}
                         </select>
-                        </div>
-
-                        <div className="form-group col-md-5">
-
+                        <label htmlFor="cheque_no">Cheque Number</label>
                         <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: "1px solid #9e9e9e", // Set bottom border
-                              borderRadius: "0px",
-                            }}
                         />
                       </div>
-                        <div className="form-group col-md-5">
-
+                    )}
+                    <div className="form-row form-group col-md-6">
+                      <label htmlFor="note">Notes</label>
                       <input
                         type="text"
                         className="form-control"
@@ -761,25 +630,14 @@ export default function Payroll() {
                         name="note"
                         value={paymentData.note}
                         onChange={handlePaymentChange}
-                            style={{
-                              backgroundColor: "#ffffff",
-                              border: "none",
-                              borderBottom: "1px solid #9e9e9e", // Set bottom border
-                              borderRadius: "0px",
-                            }}
                       />
                     </div>
                   </div>
-
-
-                    )}
-
-                  </div>
-                  <div className="modal-footer" style={{border:"none"}}>
-                    <button type="submit" className="btn " style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px' }}>
+                  <div className="modal-footer">
+                    <button type="submit" className="btn btn-primary" style={{}}>
                       Payment
                     </button>
-                    <button type="button" className="btn " onClick={closeModal} style={{ border: " 1px solid #282e26", borderRadius: '20px' }}>
+                    <button type="button" className="btn btn-contained" onClick={closeModal}>
                       Close
                     </button>
                   </div>

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

@@ -16,7 +16,6 @@ const DataTable = ({
     direction: "ascending",
   });
   const [rowsPerPage, setRowsPerPage] = useState(5);
-  const [searchTerm, setSearchTerm] = useState(""); // State for search term
 
   const totalPages = Math.ceil(data.length / rowsPerPage);
 
@@ -33,7 +32,7 @@ const DataTable = ({
   const getDisplayedData = () => {
     const startIndex = (currentPage - 1) * rowsPerPage;
     const endIndex = startIndex + rowsPerPage;
-    return sortedData.slice(startIndex, endIndex); // Return sorted data
+    return data.slice(startIndex, endIndex);
   };
 
   // Sorting the data based on the selected column
@@ -52,16 +51,8 @@ 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 = () => {
@@ -99,40 +90,7 @@ const DataTable = ({
 
   return (
     <div className="data-table-container">
-      <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 ">
+      <table className="data-table custom-table rounded-table">
         <thead className="table-header">
           <tr>
             {columns.map((col, index) => (
@@ -176,19 +134,17 @@ 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>
           ) : (
-            displayedData.map((item, index) => (
+            sortedData.map((item, index) => (
               <tr key={item.id || index}>
                 {columns.map((col, colIndex) => (
                   <td key={colIndex}>
@@ -244,18 +200,55 @@ const DataTable = ({
           )}
         </tbody>
       </table>
+
       {showFooter && (
-        <div className="pagination">
-          <button onClick={handlePrev} disabled={currentPage === 1}>
-            Previous
-          </button>
-          <ul className="pagination-list">
+        <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>
             {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>
-          <button onClick={handleNext} disabled={currentPage === totalPages}>
-            Next
-          </button>
-        </div>
+        </nav>
       )}
     </div>
   );

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

@@ -166,7 +166,6 @@ const PayrollTableWithButton = ({
           <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"
@@ -263,38 +262,12 @@ const PayrollTableWithButton = ({
             </div>
           )}
         </div>
-        <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>
+        <div className="expense-searchcontainerend d-flex align-items-center">
+          <h3 className="me-2">Show</h3>
           <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));
@@ -308,9 +281,7 @@ const PayrollTableWithButton = ({
           </select>
         </div>
       </div>
-
-      </div>
-      <table className="data-table custom-table ">
+      <table className="data-table custom-table rounded-table">
         <thead className="table-header">
           <tr>
             <th scope="col" className="no-column">
@@ -355,14 +326,12 @@ 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>
@@ -378,7 +347,7 @@ const PayrollTableWithButton = ({
                     <div className={`status ${item[col.field]}`}>{item[col.field]}</div>
                   ) : col.field === "pay_salary" ? (
                     <button
-                        style={{ backgroundColor: "#CCF4BB", border: 'none', boxShadow: "4px 4px 4px rgba(0, 0, 0, 0.25)", borderRadius: '4px', fontSize: "16px", alignItems: "center", width: '122px' }}
+                      className="btn btn-primary"
                       onClick={() => togglePaymentModal(item)} // Pass item to payment modal
                     >
                       Pay Salary
@@ -454,7 +423,8 @@ 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,9 +8,6 @@ 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);
@@ -43,7 +40,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({
@@ -203,7 +200,6 @@ 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");
 
@@ -623,141 +619,12 @@ 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 align-items-center mb-3" style={{ gap: "10px" }}>
-            <button className="btn cus d-flex align-items-center" onClick={toggleModal}>
+          <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}>
               {" "}
               + 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 */}
@@ -828,10 +695,8 @@ export default function Purchase() {
 
                         <input
                           style={{
-                            backgroundColor: "#ffffff",
-                            border: "none", // Remove all borders
-                            borderBottom: "2px solid #ccc", // Set bottom border
-                            borderRadius: "0px", // Remove border radius
+                            backgroundColor: "#0023000C",
+                            borderRadius: "10px",
                             height: "52px",
                           }}
                           type="date"
@@ -849,10 +714,8 @@ export default function Purchase() {
 
                         <input
                           style={{
-                            backgroundColor: "#ffffff",
-                            border: "none", // Remove all borders
-                            borderBottom: "2px solid #ccc", // Set bottom border
-                            borderRadius: "0px", // Remove border radius
+                            backgroundColor: "#0023000C",
+                            borderRadius: "10px",
                             height: "52px",
                           }}
                           type="text"
@@ -870,9 +733,8 @@ export default function Purchase() {
                       <div className="col-md-6" style={{ paddingRight: "10px" }}>
                         <select
                           style={{
-                            backgroundColor: "#ffffff",
-                            border: "none", // Remove all borders
-                            borderBottom: "2px solid #ccc", // Set bottom border
+                            backgroundColor: "#0023000C",
+                            borderRadius: "10px",
                             height: "52px",
                           }}
                           className="form-control"
@@ -909,9 +771,8 @@ export default function Purchase() {
                         <select
                           className="form-control"
                           style={{
-                            backgroundColor: "#ffffff",
-                            border: "none", // Remove all borders
-                            borderBottom: "2px solid #ccc", // Set bottom border
+                            backgroundColor: "#0023000C",
+                            borderRadius: "10px",
                             height: "52px",
                           }}
                           name="vendor_department_service_titles"
@@ -946,82 +807,17 @@ export default function Purchase() {
                       </div>
 
                     </div>
-                    <div className="d-flex col-md-12 mt-2">
-                      <div
-                        className="form-row d-flex col-md-5 p-2 mt-2"
-                        style={{
-                          backgroundColor: "#ffffff",
-                          border: "none", // Remove all borders
-                          borderBottom: "2px solid #ccc", // Set bottom border
-                          borderRadius: "0px", // Remove border radius
-                          height: "52px",
-                        }}
-                      >
-                        <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 className="d-flex col-md-12">
 
                     </div>
                     <div
-                        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
-                        }}
+                      className="d-flex col-md-12"
+                      style={{ paddingLeft: "5px", paddingTop: "15px" }}
                     >
+                      <p>Payment Method : </p>
                       <label
                         className="radio-inline"
-                          style={{
-
-
-                            backgroundColor: formData.pay_method_status === "pay_later" ? "#4a5546" : "transparent",
-                            color: formData.pay_method_status === "pay_later" ? "white" : "black",
-                            padding: '5px 10px',
-                            borderRadius: '20px',
-                          }}
+                        style={{ paddingLeft: "10px" }}
                       >
                         <input
                           type="radio"
@@ -1029,19 +825,12 @@ 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={{
-
-                            backgroundColor: formData.pay_method_status === "pay_now" ? "#4a5546" : "transparent",
-                            color: formData.pay_method_status === "pay_now" ? "white" : "black",
-                            padding: '5px 10px',
-                            borderRadius: '20px',
-                          }}
+                        style={{ paddingLeft: "10px" }}
                       >
                         <input
                           type="radio"
@@ -1049,107 +838,76 @@ 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={{
-
-                            backgroundColor: formData.pay_method_status === "credit_invoice" ? "#4a5546" : "transparent",
-                            color: formData.pay_method_status === "credit_invoice" ? "white" : "black",
-                            padding: '5px 10px',
-                            borderRadius: '20px',
-                          }}
+                        style={{ paddingLeft: "10px" }}
                       >
                         <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"
-                        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",
-                          }}
+                      <div className="d-flex col-md-6 mb-3">
+                        <label
+                          className="radio-inline"
+                          style={{ paddingLeft: "10px" }}
                         >
+                          <input
+                            type="radio"
+                            name="specificPaymentMethod"
+                            value="cash"
+                            onChange={handleSpecificPaymentMethodChange}
+                          />{" "}
                           Cash
-                        </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",
-                          }}
+                        </label>
+                        <label
+                          className="radio-inline"
+                          style={{ paddingLeft: "10px" }}
                         >
+                          <input
+                            type="radio"
+                            name="specificPaymentMethod"
+                            value="cheque"
+                            onChange={handleSpecificPaymentMethodChange}
+                          />{" "}
                           Check
-                        </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",
-                          }}
+                        </label>
+                        <label
+                          className="radio-inline"
+                          style={{ paddingLeft: "10px" }}
                         >
+                          <input
+                            type="radio"
+                            name="specificPaymentMethod"
+                            value="bank"
+                            onChange={handleSpecificPaymentMethodChange}
+                          />{" "}
                           Bank Card/ACH/EFT
-                        </div>
+                        </label>
                       </div>
                     )}
-
-
                     {showAdditionalFields && (
-                      <div className="d-flex col-md-5 mt-2" style={{  marginTop: '20px' }}>
+                      <div className="d-flex col-md-5 mt-2">
                         <select
                           className="form-control col-md-5 me-2"
                           name="days"
                           value={formData.days || ""}
                           onChange={handleChange}
                           style={{
-                            backgroundColor: "#fff",
-                            border: "none", // Remove all borders
-                            borderBottom: "2px solid #ccc", // Set bottom border
-                            borderRadius: "0px", // Remove border radius
+                            backgroundColor: "#0023000C",
+                            borderRadius: "10px",
                             height: "52px",
-                       
                           }}
                           required
                         >
@@ -1162,11 +920,8 @@ export default function Purchase() {
                         </select>
                         <input
                           style={{
-                            backgroundColor: "#fff",
-                            border: "none", // Remove all borders
-                            borderBottom: "2px solid #ccc", // Set bottom border
-                            borderRadius: "0px", // Remove border radius
-                          
+                            backgroundColor: "#0023000C",
+                            borderRadius: "10px",
                             height: "50px",
                           }}
                           className="form-control d-flex col-md-5"
@@ -1183,11 +938,8 @@ export default function Purchase() {
                         <div className="d-flex col-md-4 mt-2">
                           <select
                             style={{
-                              backgroundColor: "#fff",
-                            border: "none", // Remove all borders
-                            borderBottom: "2px solid #ccc", // Set bottom border
-                            borderRadius: "0px", // Remove border radius
-                            height: "52px",
+                              backgroundColor: "#0023000C",
+                              borderRadius: "10px",
                               height: "52px",
                               marginRight: "10px",
                             }}
@@ -1210,11 +962,8 @@ export default function Purchase() {
                             className="form-control me-2"
                             placeholder="Check Number"
                             style={{
-                              backgroundColor: "#fff",
-                            border: "none", // Remove all borders
-                            borderBottom: "2px solid #ccc", // Set bottom border
-                            borderRadius: "0px", // Remove border radius
-                            height: "52px",
+                              backgroundColor: "#0023000C",
+                              borderRadius: "10px",
                               height: "52px",
                               marginRight: "10px",
                             }}
@@ -1229,11 +978,8 @@ export default function Purchase() {
                         <div className="d-flex col-md-4 mt-2">
                           <input
                             style={{
-                              backgroundColor: "#fff",
-                              border: "none", // Remove all borders
-                              borderBottom: "2px solid #ccc", // Set bottom border
-                              borderRadius: "0px", // Remove border radius
-                              height: "52px",
+                              backgroundColor: "#0023000C",
+                              borderRadius: "10px",
                               height: "52px",
                             }}
                             className="form-control col-md-3"
@@ -1248,11 +994,8 @@ export default function Purchase() {
                         <div className="d-flex col-md-6 mt-2">
                           <select
                             style={{
-                              backgroundColor: "#fff",
-                              border: "none", // Remove all borders
-                              borderBottom: "2px solid #ccc", // Set bottom border
-                              borderRadius: "0px", // Remove border radius
-                              height: "52px",
+                              backgroundColor: "#0023000C",
+                              borderRadius: "10px",
                               height: "52px",
                               marginRight: "10px",
                             }}
@@ -1272,11 +1015,8 @@ export default function Purchase() {
                         <div className="d-flex col-md-6 mt-2">
                           <input
                             style={{
-                              backgroundColor: "#fff",
-                              border: "none", // Remove all borders
-                              borderBottom: "2px solid #ccc", // Set bottom border
-                              borderRadius: "0px", // Remove border radius
-                              height: "52px",
+                              backgroundColor: "#0023000C",
+                              borderRadius: "10px",
                               height: "52px",
                             }}
                             className="form-control col-md-3"
@@ -1307,11 +1047,8 @@ export default function Purchase() {
                       <div
                         className="form-row d-flex col-md-6 p-2 mt-2"
                         style={{
-                          backgroundColor: "#fff",
-                            border: "none", // Remove all borders
-                            borderBottom: "2px solid #ccc", // Set bottom border
-                            borderRadius: "0px", // Remove border radius
-                            height: "52px",
+                          backgroundColor: "#0023000C",
+                          borderRadius: "10px",
                           height: "52px",
                         }}
                       >
@@ -1319,19 +1056,19 @@ export default function Purchase() {
                           <div
                             className="input-group-prepend"
                             style={{
-                              background: "#ffffff",
+                              background: "#F5F5F5",
                               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"
@@ -1352,7 +1089,56 @@ 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" }}>
@@ -1360,15 +1146,13 @@ 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 "
+                    className="btn btn-primary"
                     onClick={handleSubmit}
-                    style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px' }}
                   >
                     Submit
                   </button>

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

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

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

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

src/components/common/Header.js

@@ -34,14 +34,9 @@ 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);
@@ -64,18 +59,6 @@ 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);
 
@@ -158,8 +141,6 @@ const Header = () => {
     setLotteryDropdownOpen(false);
     setGasDropdownOpen(false);
     setDropdownVisible(false);
-    setSelectedChild("");
-
   };
 
   useEffect(() => {
@@ -191,7 +172,8 @@ const Header = () => {
 >            <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
@@ -219,80 +201,28 @@ const Header = () => {
                   Dashboard
                 </Link>
               </li>
-
               <li
-                className={`nav-item ${expenseDropdownOpen ? "active" : ""}`}
+                className={`nav-item ${selectedNav === "#" ? "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()}
-
                 >
-                  {parentLabel}
+                  Expense
                 </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"
-                    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
-                    }}
-                  >
+                  <ul className="nav-menu-drop">
                     <li>
                       <Link
                         className="nav-menu-drop-item"
                         to="/expense"
-                        onClick={() => handleChildSelection("Expense")}
-                        style={{
-                          display: "block",
-                          padding: "8px 12px",
-                          color: "#000",
-                          textDecoration: "none",
-                        }}
+                        onClick={closeDropdowns}
                       >
                         Expense
                       </Link>
@@ -301,13 +231,7 @@ const Header = () => {
                       <Link
                         className="nav-menu-drop-item"
                         to="/purchase"
-                        onClick={() => handleChildSelection("Purchase")}
-                        style={{
-                          display: "block",
-                          padding: "8px 12px",
-                          color: "#000",
-                          textDecoration: "none",
-                        }}
+                        onClick={closeDropdowns}
                       >
                         Purchase
                       </Link>
@@ -315,9 +239,9 @@ const Header = () => {
                   </ul>
                 )}
               </li>
-
               <li
-                className={`nav-item ${selectedNav === "/payroll" ? "active" : ""
+                className={`nav-item ${
+                  selectedNav === "/payroll" ? "active" : ""
                 }`}
               >
                 <Link
@@ -333,7 +257,8 @@ const Header = () => {
               </li>
 
               <li
-                className={`nav-item ${selectedNav === "/reportDateSelection" ? "active" : ""
+                className={`nav-item ${
+                  selectedNav === "/reportDateSelection" ? "active" : ""
                 }`}
               >
                 <Link

src/components/common/header.css

@@ -8,7 +8,6 @@
 
 .navbar {
   padding: 10px 15px;
-  font-family: Comfortaa;
 }
 
 /* Dropdown Styles */
@@ -27,7 +26,6 @@
   padding: 10px 15px;
   display: block;
   transition: background-color 0.2s ease;
-
 }
 
 .nav-menu-drop-item:hover {
@@ -51,7 +49,6 @@
 
   .navbar-nav {
     flex-direction: column;
-    
   }
 
   .nav-menu-drop {