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: #f9fff6;
+  background-color: #E9ECFF;
   background-image: url('../src/assets/Image/Pattern.png');
   background-size: cover;
   background-repeat: no-repeat;

src/assets/css/App.css

@@ -37,6 +37,7 @@ body {
   color: #000;
   box-shadow: none;
 }
+
 .btn-primary {
 
   width: 100px;
@@ -108,6 +109,7 @@ body {
   padding: 10px 20px;
   border-radius: 10px;
   display: flex;
+  
   justify-content: space-between;
   box-shadow: 0px 0px 10px rgba(66, 71, 76, 0.08);
   align-items: center;
@@ -122,6 +124,7 @@ body {
   color: #ffffff; /* Active link color */
   background-color: #282e26;
   border-radius: 20px;
+  padding: 10px 15px;
   font-weight: bold; /* Bold text for active link */
 }
 .nav-list {
@@ -142,7 +145,7 @@ body {
 }
 .nav-link {
   font-family: "Manrope";
-  font-size: 18px !important;
+  font-size: 16px !important;
   color: #002300;
   
   text-decoration: none;
@@ -367,7 +370,7 @@ body {
 .row {
   display: flex;
   flex-wrap: wrap;
-  gap: 40px;
+  gap: 20px;
 
 }
 .col-2 {
@@ -494,6 +497,7 @@ body {
 }
 .search-container input {
   width: 100%;
+  color: #000;
   height: 50px;
   background: #f4f4f4;
   border-radius: 50px;
@@ -503,7 +507,7 @@ body {
   box-sizing: border-box;
 }
 .search-container input::placeholder {
-  color: #ffffff;
+  color: #282E26;
 }
 .search-container input:focus {
   outline: none;
@@ -789,7 +793,8 @@ h3 {
 
 
 .table-responsive th {
-  background-color: #f4f4f4;
+  background-color: #282e26;
+  color: white;
 }
 .table-responsives {
   border: 0.5px solid #f4f4f4;
@@ -850,14 +855,18 @@ 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: 5,
+      row: 3,
       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-6"
+            className="form-group col-md-12"
             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 mb-3">
-                            <div className="mb-3 col-md-4">
+                        <div className="col-md-12 row ">
+                            <div className=" col-md-4">
                                 <input
                                     type="date"
                                     className="form-control-borderless"
@@ -245,12 +245,13 @@ function BankDeposit() {
 
 
                             <div
-                                className="col-md-12"
+                                className="col-md-12 mb-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: #f9f9f9;
+    background-color: #ffffff;
     font-weight: bold;
 }
 
 .table td {
-    border-bottom: .5px solid #f4f4f4;
+    border-bottom: 1px solid #EBEAF2;
     text-align: left;
     vertical-align: middle;
 }
@@ -127,8 +127,8 @@
     border-end-start-radius: 24px;
     border-end-end-radius: 24px;
     padding: 10px;
-
-    background-color: #f4f4f4;
+    border-bottom: 2px solid #EBEAF2;
+    background-color: #ffffff;
     justify-content: center;
     align-items: center;
 }
@@ -324,4 +324,3 @@ input[type="color"]:focus,
     box-shadow: none; /* Remove any shadow */
   }
   
-  

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

@@ -763,24 +763,50 @@ const paymentMethodStyles = {
 const getPaymentMethodStyle = (method) => ({
   ...(paymentMethodStyles[method] || { backgroundColor: "#6c757d" }),
   borderRadius: "5px",
+
   padding: "10px 20px",
   color: "#000",
 });
 
 const statusStyles = {
-  All: { backgroundColor: "#4545DB" },
-  // draft: { backgroundColor: '#4545DB7C' },
-  unpaid: { backgroundColor: "#ff2024" },
-  partially_paid: { backgroundColor: "#0c8ce9" },
+  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"
+  },
 };
 
 const getStatusStyle = (status) => ({
-  ...(statusStyles[status] || { backgroundColor: "#198f51" }),
+  ...(statusStyles[status] || { backgroundColor: "#198f51", width: "150px", height: "40px" }), // Default style
   borderRadius: "5px",
-  padding: "10px 20px",
+  padding: "5px 20px",
+  textAlign: "center",
+  display: "flex", // Use flexbox for alignment
+  justifyContent: "center", // Center horizontally
+  alignItems: "center", // Center vertically
   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:"10%"}}>
+            <div className="col-md-12 row" style={{ gap: "15%" }}>
               <div className="mb-3 col-md-2" >
                 <input
                   type="date"
@@ -410,19 +410,21 @@ function PayInvoice() {
                 </select> */}
               </div>
             </div>
-            <div className="mb-3 col-md-12 row">
-              <div className="col-md-2">
+            <div className="mb-3 col-md-12 row mt-3" style={{gap:"70px"}} >
+              <div className="col-md-3">
                 <input
                   name="amount"
                   type="text"
-                  className="form-control-borderless"
+                  className="form-control"
                   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"
@@ -466,12 +468,9 @@ function PayInvoice() {
                   value={grandTotal || ""}
                   readOnly
                   style={{
-      border: 'none', // Remove all borders
-      backgroundColor:'transparent',
-      borderBottom: '1px solid #ACB4AA', // Add only the bottom border
 
-      outline: 'none', // Remove outline
-      padding: '6px 0', // Optional: Add padding to the top and bottom
+                    backgroundColor: '#fafafa',
+
                   }}
                 />
               </div>
@@ -479,17 +478,37 @@ 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: '5px 40px',
+                    padding: '2px 20px', // Same left and right padding
                     width: 'fit-content',
                     borderRadius: '40px',
                   }}
                 >
                   {['cash', 'cheque', 'bank'].map((method) => (
-    <div className="me-3" key={method}>
+                    <div className="" key={method}>
                       <input
                         type="radio"
                         className="form-check-input"
@@ -516,32 +535,15 @@ function PayInvoice() {
                     </div>
                   ))}
                 </div>
-
-
-              <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">
+            <div className="col-md-12 mt-3" >
+
               {formData.pay_method === "cheque" && (
-                <div className="">
-                  <div className="col-md-12 row">
-                    <div className="mb-3 col-md-6">
+                <div className="row "> {/* Use row class for Bootstrap grid */}
+                  <div className="col-md-2 mb-3"> {/* First column for bank select */}
                     <select
                       required
-                        className="form-control-borderless"
+                      className="form-control-borderless" // Keep Bootstrap styles
                       name="bank"
                       value={formData.bank}
                       onChange={handleChange}
@@ -554,7 +556,8 @@ function PayInvoice() {
                       ))}
                     </select>
                   </div>
-                    <div className="mb-3 col-md-6">
+
+                  <div className="col-md-2 mb-3"> {/* Second column for cheque number input */}
                     <input
                       required
                       type="text"
@@ -566,9 +569,17 @@ 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,16 +866,40 @@ const getPaymentMethodStyle = (method) => ({
 });
 
 const statusStyles = {
-  All: { backgroundColor: "#4545DB" },
-  // draft: { backgroundColor: "#4545DB7C" },
-  unpaid: { backgroundColor: "#ff2024" },
-  partially_paid: { backgroundColor: "#0c8ce9" },
+  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"
+  },
 };
 
 const getStatusStyle = (status) => ({
-  ...(statusStyles[status] || { backgroundColor: "#198f51" }),
+  ...(statusStyles[status] || { backgroundColor: "#198f51", width: "150px", height: "40px" }), // Default style
   borderRadius: "5px",
-  padding: "10px 20px",
+  padding: "5px 20px",
+  textAlign: "center",
+  display: "flex", // Use flexbox for alignment
+  justifyContent: "center", // Center horizontally
+  alignItems: "center", // Center vertically
   color: "#fff",
 });
 

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

@@ -811,6 +811,7 @@ export default function Expense() {
                   </h5>
 
                   <svg
+
                     onClick={toggleModal}
                     width="14"
                     height="14"
@@ -951,7 +952,7 @@ export default function Expense() {
                           <div
                             className="input-group-prepend"
                             style={{
-                              background: "#ffffff",
+                              backgroundColor: "#ffffff",
                               height: "100%",
 
                               display: "flex",
@@ -1347,12 +1348,13 @@ export default function Expense() {
                     type="button"
                     className="btn btn-secondary-outline"
                     onClick={toggleModal}
+                    style={{ border: " 1px solid #282e26", borderRadius: '20px' }}
                   >
                     Close
                   </button>
                   <button
                     type="submit"
-                    style={{backgroundColor:'#282E26' ,color:"#fff"}}
+                    style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px' }}
                     className="btn"
                     onClick={handleSubmit}
                   >

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -126,32 +126,44 @@ const PayrollTable = ({
     draft: {
       backgroundColor: "#D1D1EF",
       color: "#fff",
-      borderRadius: "30px",
+      borderRadius: "5px",
       padding: "5px 10px",
+      width: "130px", // Set a fixed width
+      height: "30px", // Set a fixed height
+      fontSize:"14px"
     },
     unpaid: {
       backgroundColor: "#ff2024",
       color: "#fff",
-      borderRadius: "10px",
+      borderRadius: "5px",
       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: "10px",
+      borderRadius: "5px",
       padding: "5px 20px",
       textAlign: 'center',
-      alignItems:'center'
+      alignItems: 'center',
+      width: "130px", // Set a fixed width
+      height: "30px", // Set a fixed height
+      fontSize:"14px"
     },
     partially_paid: {
       backgroundColor: "#0c8ce9",
       color: "#fff",
-      borderRadius: "10px",
+      borderRadius: "5px",
       padding: "5px 20px",
       textAlign: 'center',
-      alignItems:'center'
+      alignItems: 'center',
+      width: "130px", // Set a fixed width
+      height: "30px", // Set a fixed height
+      fontSize:"14px"
     },
   };
   const paymentMethodStyles = {
@@ -250,42 +262,56 @@ const PayrollTable = ({
           </button> */}
         </div>
 
-        <div style={{marginRight:"60%"}}>
+        <div style={{ marginRight: "58%" }}>
           <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",
+            style={{
+              display: "flex",
+              alignItems: "center",
+              backgroundColor: "#FFFFFF",
+              border: "1px solid #DBDBDB",
               borderRadius: "10px",
-            color: "#F4FFEE",
+              // boxSizing: "border-box",
               cursor: "pointer",
+              
+              width: "170px",
+              gap: "10px",
             }}
           >
-          <h6 className="" style={{margin:'10px'}}>Show</h6>
+            <span
+              style={{
+                fontFamily: "'Comfortaa'",
+                fontStyle: "normal",
+                fontWeight: "400",
+                fontSize: "16px",
+                padding: "5px",
+                color: "#000000",
+              }}
+            >
+              Show Rows:
+            </span>
             <select
               name="option"
               id="pageSelect"
               className="selectoptions"
               style={{
-              height: "30px",
-
-              padding: "2px 6px",
-              border: "1px solid #ccc",
                 backgroundColor: "#282E26",
-              color: "#fff",
-              fontSize: "14px",
+                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 first page on change
+                setCurrentPage(1); // Reset to the first page on change
               }}
             >
               <option value={5}>5</option>
@@ -294,10 +320,12 @@ const PayrollTable = ({
               <option value={20}>20</option>
             </select>
           </div>
-</div>
           
           </div>
-      <table className="data-table custom-table rounded-table">
+
+
+      </div>
+      <table className="data-table custom-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="store-container">
+    <div className="" style={{marginTop:"5%"}}>
       <ToastContainer />
-      <p className="setting-title">Manage Departments</p>
-      <div className="create-department-section">
+      {/* <p className="setting-title">Manage Departments</p> */}
+      <div className="department-container">
         <div className="input-container">
           <div className="input-row">
             <input
               type="text"
-              placeholder="New Department"
+              placeholder="Enter Department Name"
               className="input-field"
               value={editDepartmentId ? editDepartmentTitle : newDepartment}
               onChange={(e) => {
@@ -125,14 +125,21 @@ 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="dept-button" onClick={handleSaveDepartment}>
-              {editDepartmentId ? "Update" : " + Add"}
+            <button className="btn cus d-flex align-items-center" onClick={handleSaveDepartment}>
+              {editDepartmentId ? "Update Department" : " + Add Department"}
             </button>
           </div>
         </div>
       </div>
+<div className="store-container"> 
+
 <div className="show-department-section">
   <div className="dept-cards-row">
     {filteredDepartments.length === 0 ? (
@@ -201,6 +208,8 @@ function ManageDepartments() {
   </div>
 </div>
 
+
+</div>
     </div>
   );
 }

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

@@ -179,6 +179,7 @@ const ManageUserTable = ({
         <div className="expense-searchcontainerstart d-flex">
           <div className="search-container">
             <input
+              style={{ height: "50px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }}
               type="text"
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
@@ -276,16 +277,57 @@ const ManageUserTable = ({
             </div>
           )}
         </div>
-        <div className="expense-searchcontainerend d-flex align-items-center">
-          <h3 className="me-2">Show</h3>
+       
+        <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>
             <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 first page on change
+                setCurrentPage(1); // Reset to the first page on change
               }}
             >
               <option value={5}>5</option>
@@ -294,8 +336,12 @@ const ManageUserTable = ({
               <option value={20}>20</option>
             </select>
           </div>
+          
           </div>
-      <table className="data-table custom-table rounded-table">
+
+
+      </div>
+      <table className="data-table custom-table ">
         <thead className="table-header">
           <tr>
             <th scope="col" className="no-column">
@@ -418,7 +464,7 @@ const ManageUserTable = ({
       {showFooter && (
         <nav>
           <ul className="pagination">
-            <li className={`prev-next ${currentPage === 1 ? "disabled" : ""}`}>
+            {/* <li className={`prev-next ${currentPage === 1 ? "disabled" : ""}`}>
               <span
                 style={{
                   fontSize: "24px",
@@ -437,9 +483,9 @@ const ManageUserTable = ({
                 &lt;
               </span>
               &nbsp;
-            </li>
+            </li> */}
             {renderPagination()}
-            <li
+            {/* <li
               className={`prev-next ${
                 currentPage === totalPages ? "disabled" : ""
               }`}
@@ -462,7 +508,7 @@ const ManageUserTable = ({
               >
                 &gt;{" "}
               </span>
-            </li>
+            </li> */}
           </ul>
         </nav>
       )}

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

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

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

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

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

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

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

@@ -167,10 +167,12 @@
 .due-days {
   padding: 20px; /* Adjust as needed */
   margin: 20px auto;
-  background-color: #ffffff;
-  border-radius: 10px;
+  border: 1px solid #EBEAF2;
+  box-shadow: "0px 2px 8px rgba(6, 12, 34, 0.0392157)";
+  border-radius: 40px;
   width: 1600px;
   max-width: 100%;
+  background-color: #ffffff;
 }
 .due-card {
   position: relative;
@@ -262,13 +264,35 @@
   flex-direction: column;
   justify-content: flex-start;
   align-items: flex-start; /* Align items to the start (left) */
-  border-radius: 10px;
+  border-radius: 40px;
   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 */
@@ -284,7 +308,7 @@
   padding: 10px;
   width: 600px;
   height: 40px;
-  background-color: #f6f6f6;
+  background-color: #fff;
   border: 1px solid #f6f6f6;
   border-radius: 5px;
 }
@@ -445,22 +469,25 @@
   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 #f6f6f6;
-  border-radius: 10px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+  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 */
 }
 .dept-info {
   width: 386px;
   height: 50px;
   padding: 10px;
-  background-color: #f6f6f6;
-  border: 1px solid rgba(0, 35, 0, 0.1);
-  border-radius: 4px;
+  background-color: #ffffff;
+  
+  border: none; /* Remove the redundant border */
+
+  border-radius: 10px; /* Rounded corners */
 }
 .create-department-section {
   width: 100%;
@@ -514,31 +541,34 @@ input[type="date"] {
 }
 .data-table {
   width: 100%;
-  border: 1px solid #F4F4F4;
+  border: 2px solid #F4F4F4;
   border-collapse: collapse;
-  border-radius: 20px 20px 0 0;
+  /* border-radius: 20px 20px 0 0; */
   overflow: hidden;
 }
 .table-header th, .table-body td {
-  border: 1px solid #F4F4F4;
+  /* border: 1px solid #F4F4F4; */
   padding: 12px;
   text-align: left;
   padding-left: 20px;
 }
 .table-header th {
-  background-color: #f2f2f2;
-  color: #002300;
+  background-color: #282e26;
+  color: white;
   cursor: pointer; /* Added cursor for sortable columns */
 }
 .table-body td {
   padding-left: 20px;
   color: #002300;
+  background-color: #ffffff;
+  border-bottom: 1px solid #EBEAF2;
+  
 }
 .table-body tr:last-child td {
-  border-bottom: 1px solid #F4F4F4;
+  border-bottom: 1px solid #ffffff;
 }
 .table-body {
-  border-bottom: 1px solid #F4F4F4;
+  border-bottom: 2px solid #EBEAF2;
 }
 .no-column {
   width: 100px;
@@ -568,6 +598,8 @@ input[type="date"] {
   display: flex;
   justify-content: end;
   padding: 10px 0;
+  background-color: #ffffff;
+  
 }
 .pagination .page-item {
   margin: 0 5px;
@@ -575,21 +607,26 @@ input[type="date"] {
 .pagination .page-link {
   padding: 10px;
   border: 1px solid #F4F4F4;
+  /* background-color: #ffffff; */
   background-color: #b6d7a8;
-  border-radius: 50%;
+  border-radius: 30px;
   color: #002300;
   text-decoration: none;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 36px;
-  height: 36px;
+  width: 30px;
+  height: 30px;
+
   transition: background-color 0.3s, color 0.3s;
 }
 .pagination .page-link:hover {
-  background-color: #ffaf32;
+  background-color: red;
 }
 .pagination .page-item.active .page-link {
+  width: 30px;
+    height: 30px;
+    border-radius: 30px;
   background-color: #ffaf32; /* Yellow background */
   color: #002300;
   border-color:#fbfbfbfb;

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

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

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

@@ -7,6 +7,8 @@ import useApi from "../../../../utils/api-manager/Helper/useApi";
 import { toast, ToastContainer } from "react-toastify";
 import PayrollTableWithButton from "./PayrollTableWithButton";
 import Swal from "sweetalert2";
+import employeeIcon from '../../../../assets/Image/employee.png'
+
 
 export default function Payroll() {
   const { user } = useContext(AuthContext);
@@ -378,9 +380,9 @@ export default function Payroll() {
       <div className="p-2">
         <div className="expensecontainer d-flex flex-column pd-2 mb-2">
           <div className="d-flex justify-content-between align-items-center mb-3">
-            <h3 className="mb-1">Manage Payroll</h3>
+            <h3 className="mb-1">Manage Employee</h3>
             <button
-              className="btn btn-primary cus"
+              className="btn cus d-flex align-items-center"
               onClick={() => {
                 // fetchBankData();
                 setModalType('new');
@@ -388,6 +390,11 @@ export default function Payroll() {
               }}
             >
               + Add Employee
+              <img
+                src={employeeIcon}
+                alt="employee Icon"
+                style={{ width: "20px", height: "20px", marginLeft: "8px" }}
+              />
             </button>
           </div>
           <PayrollTableWithButton
@@ -407,69 +414,117 @@ export default function Payroll() {
         </div>
         { }
         {showModal && (
-          <div className="modal-overlay" onClick={closeModal}>
+          <div className="modal" style={{}} onClick={closeModal}>
             <div
               className="modal-container"
               onClick={(e) => e.stopPropagation()}
-              style={{ width: modalType === 'payment' ? '800px' : '700px' }}
+              style={{ width: modalType === 'payment' ? '650px' : '700px', borderRadius: '40px' }}
             >
-              <div className="modal-header" style={{ borderBottom: "1px solid lightgray" }}>
-                <h3>
-                  {modalType === 'new' && "Add Employee"}
-                  {modalType === 'edit' && "Edit Employee"}
-                  {modalType === 'payment' && `Process Payment for ${selectedPayroll?.full_name || ''}`}
+              <div
+                className="modal-header"
+                style={{
+              
+                  display: 'flex',
+                  justifyContent: 'space-between', // Distribute space between items
+                  alignItems: 'center',
+                  border: "none"
+                }}
+              >
+                <div style={{ flex: 1, textAlign: 'center' }}>
+                  <h3 style={{ margin: 0 }}>
+                    {modalType === 'new' && 'Add Employee'}
+                    {modalType === 'edit' && 'Edit Employee'}
+                    {modalType === 'payment' && `Pay Salary For ${selectedPayroll?.full_name || ''}`}
                   </h3>
-                <button className="btn" onClick={closeModal}>X</button>
                 </div>
+                <svg
+                  onClick={closeModal}
+                  width="14"
+                  height="14"
+                  marginLeft="20px"
+                  marginBottom="20px"
+                  viewBox="0 0 14 14"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M1 1L13 13M13 1L1 13"
+                    stroke="black"
+                    stroke-linecap="round"
+                  />
+                </svg>
+              </div>
+
               { }
               {(modalType === 'new' || modalType === 'edit') && (
                 <form onSubmit={handleSubmit}>
                <div className="modal-body ">
-                    <div className="form-group">
-                      <label htmlFor="full_name">Employee Name</label>
+                    <div className="form-group -flex flex-column justify-content-center align-items-center px-5 ">
+                      {/* <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">
-                      <label htmlFor="contact_no">Contact Number</label>
+                    <div className="form-group -flex flex-column justify-content-center align-items-center px-5 ">
+                      {/* <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">
-                      <label htmlFor="email">Email Address</label>
+                    <div className="form-group -flex flex-column justify-content-center align-items-center px-5 ">
+                      {/* <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">
-                    <button type="submit" className="btn btn-primary">
+                  <div className="modal-footer" style={{ border: "none" }}>
+                    <button type="submit" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px', padding: '5px 15px' }}>
                       {modalType === 'edit' ? "Update Employee" : "Add Employee"}
                     </button>
-                    <button type="button" className="btn btn-contained" onClick={closeModal}>
+                    <button type="button" onClick={closeModal} style={{ border: '1px solid #282E26', backgroundColor: "transparent", borderRadius: '20px', padding: '5px 45px' }}>
                       Close
                     </button>
                   </div>
@@ -479,66 +534,74 @@ export default function Payroll() {
               {modalType === 'payment' && (
                 <form onSubmit={handlePaymentSubmit}>
                  <div className="modal-body">
-                  <div className="form-group">
-  <label htmlFor="salary_amount">Amount</label>
-  <div className="input-group">
-    <div className="input-group-prepend">
-      <span className="input-group-text">$</span>
-    </div>
+  <div className="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 */}
       <input
-      type="text" // Keeping text type for more flexible input control
+        type="text"
         className="form-control"
         id="salary_amount"
         name="salary_amount"
+        placeholder="Amount"
         value={paymentData.salary_amount}
         onChange={handlePaymentChange}
         onKeyDown={(e) => {
-        // Prevent negative and positive signs
           if (e.key === "-" || e.key === "+") {
             e.preventDefault();
           }
         }}
+        style={{
+          backgroundColor: "#ffffff",
+          border: "none",
+          borderBottom: "1px solid #9e9e9e", // Set bottom border
+          borderRadius: "0px",
+        }}
         required
         onInput={(e) => {
           let value = e.target.value;
-
-        // Remove all characters except numbers and the decimal point
-        value = value.replace(/[^0-9.]/g, '');
-
-        // Ensure only one decimal point
-        if (value.indexOf('.') !== -1) {
-          const parts = value.split('.');
-          value = parts[0] + '.' + parts[1].substring(0, 2); // Keep only two digits after the decimal
+          value = value.replace(/[^0-9.]/g, "");
+          if (value.indexOf(".") !== -1) {
+            const parts = value.split(".");
+            value = parts[0] + "." + parts[1].substring(0, 2);
           }
-
-        // Update the value on the input element
           e.target.value = value;
-
-        // Call the onChange handler to update the state
           handlePaymentChange(e);
         }}
       />
     </div>
-</div>
 
-
-                    <div className="form-row form-group col-md-6">
-                      <label htmlFor="salary_unit">Salary Unit</label>
+    {/* Salary Unit Select */}
+    <div className="col-md-5 mb-3"> {/* Added margin bottom for spacing */}
       <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 className="form-row form-group col-md-6">
-                      <label htmlFor="start_date">Start Date</label>
+  </div>
+
+
+
+                    <div className="form-group row col-md-12 justify-content-between">
+                      {/* Start Date Input */}
+                      <div className="form-group col-md-5">
+                      
                         <input
                           type="date"
                           className="form-control"
@@ -546,10 +609,18 @@ 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>
-                    <div className="form-row form-group col-md-6">
-                      <label htmlFor="end_date">End Date</label>
+
+                      {/* End Date Input */}
+                      <div className="form-group col-md-5">
+                       
                         <input
                           type="date"
                           className="form-control"
@@ -557,11 +628,24 @@ 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-row form-group col-md-6">
-                      <label htmlFor="total_hour">Total Hours</label>
+                    <div className="form-group row col-md-12 justify-content-between">
+                      {/* Total Hours Input */}
+                      <div className="form-group col-md-5" >
+
                         <input
                           type="number"
                           className="form-control"
@@ -570,37 +654,75 @@ export default function Payroll() {
                           value={paymentData.total_hour}
                           onChange={handlePaymentChange}
                           onInput={(e) => {
-                          // Allow only numbers and a decimal point with two digits after it
-                          e.target.value = e.target.value
-                          
-                            .replace(/[^0-9]/g, '') // Remove non-numeric characters
-                            .slice(0, 3); // Limit input length (10 digits + 1 decimal + 2 decimal places)
+                            // Allow only numbers and limit input to 3 digits
+                            e.target.value = e.target.value.replace(/[^0-9]/g, '').slice(0, 3);
+                          }}
+                          style={{
+                            backgroundColor: "#ffffff",
+                            border: "none",
+                            borderBottom: "1px solid #9e9e9e", // Set bottom border,
+                            borderRadius: "0px",
                           }}
                           required
                         />
                       </div>
-                    <div className="form-group">
-                      <label htmlFor="payment_method">Payment Method</label>
-                      <select
-                        name="payment_method"
-                        id="payment_method"
-                        className="form-control"
-                        value={paymentData.payment_method}
-                        onChange={handlePaymentChange}
+
+                      {/* Payment Method Select */}
+                      <div className="form-group col-md-5">
+                        <div style={{ border: '2px solid #ACB4AA', padding: '5px 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',
+                            }}
                           >
-                        <option value="cash">Cash</option>
-                        <option value="cheque">Bank Transfer</option>
-                      </select>
+                            Cash
+                          </button>
+                          <button
+                            type="button"
+                            className="btn"
+                            onClick={() => handlePaymentChange({ target: { name: "payment_method", value: "cheque" } })}
+                            style={{
+                              backgroundColor: paymentData.payment_method === "cheque" ? "#4a5546" : "transparent",
+                              color: paymentData.payment_method === "cheque" ? "#ffffff" : "#000000",
+                              border: 'none',
+                              padding: '5px 5px',
+                              borderRadius: '20px',
+                              cursor: 'pointer',
+                            }}
+                          >
+                            Bank Transfer
+                          </button>
                         </div>
+                      </div>
+
+
+
+                    </div>
+
                     {paymentData.payment_method === "cheque" && (
-                      <div className="form-group">
-                        <label htmlFor="bank">Bank</label>
+                      <div className="form-group row col-md-12 justify-content-between">
+                        <div className="form-group col-md-5">
+
                           <select
                             name="bank"
                             id="bank"
                             className="form-control"
                             value={paymentData.bank}
                             onChange={handlePaymentChange}
+                            style={{
+                              backgroundColor: "#ffffff",
+                              border: "none",
+                              borderBottom: "1px solid #9e9e9e", // Set bottom border
+                              borderRadius: "0px",
+                            }}
                           >
                             <option value="">Select Bank</option>
                             {bankdata.map((bank) => (
@@ -609,20 +731,29 @@ export default function Payroll() {
                               </option>
                             ))}
                           </select>
-                        <label htmlFor="cheque_no">Cheque Number</label>
+                        </div>
+
+                        <div className="form-group col-md-5">
+
                           <input
                             type="number"
                             className="form-control"
                             id="cheque_no"
+                            placeholder="Cheque No"
                             name="cheque_no"
                             value={paymentData.cheque_no}
                             onChange={handlePaymentChange}
                             required
+                            style={{
+                              backgroundColor: "#ffffff",
+                              border: "none",
+                              borderBottom: "1px solid #9e9e9e", // Set bottom border
+                              borderRadius: "0px",
+                            }}
                           />
                         </div>
-                    )}
-                    <div className="form-row form-group col-md-6">
-                      <label htmlFor="note">Notes</label>
+                        <div className="form-group col-md-5">
+
                           <input
                             type="text"
                             className="form-control"
@@ -630,14 +761,25 @@ 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 className="modal-footer">
-                    <button type="submit" className="btn btn-primary" style={{}}>
+
+
+                    )}
+
+                  </div>
+                  <div className="modal-footer" style={{border:"none"}}>
+                    <button type="submit" className="btn " style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px' }}>
                       Payment
                     </button>
-                    <button type="button" className="btn btn-contained" onClick={closeModal}>
+                    <button type="button" className="btn " onClick={closeModal} style={{ border: " 1px solid #282e26", borderRadius: '20px' }}>
                       Close
                     </button>
                   </div>

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

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

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

@@ -166,6 +166,7 @@ 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"
@@ -262,12 +263,38 @@ const PayrollTableWithButton = ({
             </div>
           )}
         </div>
-        <div className="expense-searchcontainerend d-flex align-items-center">
-          <h3 className="me-2">Show</h3>
+        <div >
+          <div
+            className="expense-search d-flex align-items-center"
+            style={{
+              backgroundColor: "#4A5546",
+              boxShadow: "none",
+              outline: "none",
+              width: "auto",
+              height: "42px",
+
+              padding: "8px 12px",
+              fontSize: "16px",
+              border: "none",
+              borderRadius: "10px",
+              color: "#F4FFEE",
+              cursor: "pointer",
+            }}
+          >
+            <h6 className="" style={{ margin: '10px' }}>Show</h6>
             <select
               name="option"
               id="pageSelect"
               className="selectoptions"
+              style={{
+                height: "30px",
+
+                padding: "2px 6px",
+                border: "1px solid #ccc",
+                backgroundColor: "#282E26",
+                color: "#fff",
+                fontSize: "14px",
+              }}
               value={rowsPerPage}
               onChange={(e) => {
                 setRowsPerPage(Number(e.target.value));
@@ -281,7 +308,9 @@ const PayrollTableWithButton = ({
             </select>
           </div>
         </div>
-      <table className="data-table custom-table rounded-table">
+
+      </div>
+      <table className="data-table custom-table ">
         <thead className="table-header">
           <tr>
             <th scope="col" className="no-column">
@@ -326,12 +355,14 @@ const PayrollTableWithButton = ({
         <tbody className="table-body">
           {sortedDisplayedData.length === 0 ? (
             <tr>
-      <td colSpan={columns.length + (showAction ? 2 : 1)} style={{ textAlign: "center", fontFamily: 'Manrope',
+              <td colSpan={columns.length + (showAction ? 2 : 1)} style={{
+                textAlign: "center", fontFamily: 'Manrope',
                 fontWeight: '600',
                 fontSize: '40px',
                 background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.1) -92.86%, #4545DB 71.43%)',
                 WebkitBackgroundClip: 'text',
-          WebkitTextFillColor: 'transparent', }}>
+                WebkitTextFillColor: 'transparent',
+              }}>
                 No data found
               </td>
             </tr>
@@ -347,7 +378,7 @@ const PayrollTableWithButton = ({
                       <div className={`status ${item[col.field]}`}>{item[col.field]}</div>
                     ) : col.field === "pay_salary" ? (
                       <button
-                      className="btn btn-primary"
+                        style={{ backgroundColor: "#CCF4BB", border: 'none', boxShadow: "4px 4px 4px rgba(0, 0, 0, 0.25)", borderRadius: '4px', fontSize: "16px", alignItems: "center", width: '122px' }}
                         onClick={() => togglePaymentModal(item)} // Pass item to payment modal
                       >
                         Pay Salary
@@ -423,8 +454,7 @@ const PayrollTableWithButton = ({
             </li>
             {renderPagination()}
             <li
-              className={`prev-next ${
-                currentPage === totalPages ? "disabled" : ""
+              className={`prev-next ${currentPage === totalPages ? "disabled" : ""
                 }`}
             >
               &nbsp;

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

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

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

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

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

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

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

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

src/components/common/Header.js

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

src/components/common/header.css

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