From b139bcf40c5a0e91be228d6e4599d769fb0c5307 Mon Sep 17 00:00:00 2001
From: sonali <sonali.humbingo@gmail.com>
Date: Tue, 24 Dec 2024 18:33:49 +0530
Subject: [PATCH] " ui change "

---
 public/index.html                             |   2 +-
 src/assets/css/App.css                        |   5 +-
 .../AppPAges/Dashboard/Invoice/AddInvoice.js  |   6 +-
 .../AppPAges/Dashboard/Invoice/BankDeposit.js |   9 +-
 .../AppPAges/Dashboard/Invoice/Invoice.css    |  11 +-
 .../Dashboard/Invoice/InvoiceTable.js         |  38 +-
 .../AppPAges/Dashboard/Invoice/PayInvoice.js  | 369 +++++++++---------
 .../Dashboard/Invoice/PayInvoice_Table.js     |  36 +-
 .../Pages/AppPAges/Expense/expense.js         |   2 +-
 .../AppPAges/ManageSettings/DataTables.js     |  80 ++--
 .../ManageSettings/ManageDepartments.js       |  23 +-
 .../ManageSettings/ManageUserTable.js         |  57 ++-
 .../AppPAges/ManageSettings/ManageUsers.js    | 258 +++++++-----
 .../AppPAges/ManageSettings/Settings.css      |  64 ++-
 .../ManageSettings/StoreInformation.js        |   4 +-
 .../Pages/AppPAges/Payroll/Payroll.js         | 182 ++++-----
 .../Pages/AppPAges/Purchase/purchase.js       |   8 +-
 src/components/common/header.css              |   2 +
 18 files changed, 688 insertions(+), 468 deletions(-)

diff --git a/public/index.html b/public/index.html
index b7751db..110113c 100644
--- a/public/index.html
+++ b/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;
diff --git a/src/assets/css/App.css b/src/assets/css/App.css
index b2db589..473ed62 100644
--- a/src/assets/css/App.css
+++ b/src/assets/css/App.css
@@ -370,7 +370,7 @@ body {
 .row {
   display: flex;
   flex-wrap: wrap;
-  gap: 40px;
+  gap: 20px;
 
 }
 .col-2 {
@@ -855,11 +855,14 @@ h5 {
   left: 0;
   width: 100%;
   height: 100%;
+
+
   background-color: rgba(0, 0, 0, 0.5);
 }
 .modal-container {
   max-width: 768px; /* Updated to 768px */
   margin: 0;
+
   background-color: white;
   border-radius: 0.5rem;
 }
diff --git a/src/components/Pages/AppPAges/Dashboard/Invoice/AddInvoice.js b/src/components/Pages/AppPAges/Dashboard/Invoice/AddInvoice.js
index 7974c61..59b3ba0 100644
--- a/src/components/Pages/AppPAges/Dashboard/Invoice/AddInvoice.js
+++ b/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"
diff --git a/src/components/Pages/AppPAges/Dashboard/Invoice/BankDeposit.js b/src/components/Pages/AppPAges/Dashboard/Invoice/BankDeposit.js
index 801c5af..7d5face 100644
--- a/src/components/Pages/AppPAges/Dashboard/Invoice/BankDeposit.js
+++ b/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
@@ -278,7 +279,7 @@ function BankDeposit() {
                                 </div>
 
                                 <div
-                                    className="form-group "
+                                    className="form-group  "
                                     style={{
                                         display: "flex",
                                         alignItems: "center",
diff --git a/src/components/Pages/AppPAges/Dashboard/Invoice/Invoice.css b/src/components/Pages/AppPAges/Dashboard/Invoice/Invoice.css
index 5c1a50e..f413ba7 100644
--- a/src/components/Pages/AppPAges/Dashboard/Invoice/Invoice.css
+++ b/src/components/Pages/AppPAges/Dashboard/Invoice/Invoice.css
@@ -89,7 +89,7 @@
 .input-group {
     flex-wrap: nowrap;
     border-radius: 50px;
-    background-color: #f4f4f4;
+    /* background-color: #f4f4f4; */
 }
 
 .input-group .form-control {
@@ -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 */
   }
   
-  
\ No newline at end of file
diff --git a/src/components/Pages/AppPAges/Dashboard/Invoice/InvoiceTable.js b/src/components/Pages/AppPAges/Dashboard/Invoice/InvoiceTable.js
index 1c63487..1bee36d 100644
--- a/src/components/Pages/AppPAges/Dashboard/Invoice/InvoiceTable.js
+++ b/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",
diff --git a/src/components/Pages/AppPAges/Dashboard/Invoice/PayInvoice.js b/src/components/Pages/AppPAges/Dashboard/Invoice/PayInvoice.js
index 08d8b96..8ee63ad 100644
--- a/src/components/Pages/AppPAges/Dashboard/Invoice/PayInvoice.js
+++ b/src/components/Pages/AppPAges/Dashboard/Invoice/PayInvoice.js
@@ -19,13 +19,13 @@ function PayInvoice() {
   const navigate = useNavigate();
 
 
-   const [activeButton, setActiveButton] = useState('');
- 
-   const location = useLocation();
- 
-   useEffect(() => {
-     setActiveButton(location.pathname); // Set the active button based on the current location
-   }, [location.pathname]);
+  const [activeButton, setActiveButton] = useState('');
+
+  const location = useLocation();
+
+  useEffect(() => {
+    setActiveButton(location.pathname); // Set the active button based on the current location
+  }, [location.pathname]);
 
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef(null);
@@ -63,7 +63,7 @@ function PayInvoice() {
     bank: "",
   });
 
-  const makeBlank = ()=>{
+  const makeBlank = () => {
     setFormData({
       store_id: user.store,
       invoice_no: "",
@@ -200,14 +200,14 @@ function PayInvoice() {
       setInitialAmount("");
     }
   };
-  
+
   const handleSubmit = async (e) => {
     e.preventDefault();
 
     // Check if the payment method is selected
     if (!formData.pay_method) {
-        toast.error("Please select a payment method before submitting.");
-        return; // Prevent form submission if payment method is not selected
+      toast.error("Please select a payment method before submitting.");
+      return; // Prevent form submission if payment method is not selected
     }
 
     const payAmount = parseFloat(formData.pay_amount);
@@ -218,58 +218,58 @@ function PayInvoice() {
 
 
     if (newRemainingAmount < 0) {
-        toast.error("Payment amount exceeds the remaining amount. Please enter a valid amount.");
-        return; // Prevent form submission if payment exceeds remaining amount
+      toast.error("Payment amount exceeds the remaining amount. Please enter a valid amount.");
+      return; // Prevent form submission if payment exceeds remaining amount
     }
 
     const status = newRemainingAmount <= 0 ? "paid" : "partially_paid"; // If remaining is 0 or less, mark it as 'paid'
     const finalRemainingAmount =
-        newRemainingAmount <= 0 ? "0.00" : newRemainingAmount.toFixed(2); // If fully paid, remaining should be 0
+      newRemainingAmount <= 0 ? "0.00" : newRemainingAmount.toFixed(2); // If fully paid, remaining should be 0
 
     let updatedFormData = {
-        ...formData,
-        remaining_amount: finalRemainingAmount, // Update the remaining amount
-        status: status, // Set the status based on the remaining amount
-        cheque_no: formData.pay_method === "cheque" ? formData.cheque_no : null,
-        bank: formData.pay_method === "bank" ? formData.bank : null,
+      ...formData,
+      remaining_amount: finalRemainingAmount, // Update the remaining amount
+      status: status, // Set the status based on the remaining amount
+      cheque_no: formData.pay_method === "cheque" ? formData.cheque_no : null,
+      bank: formData.pay_method === "bank" ? formData.bank : null,
     };
 
     // Check if the pay_method_status is 'credit_invoice'
     if (updatedFormData.pay_method_status !== "credit_invoice") {
-        updatedFormData = {
-            ...updatedFormData,
-            pay_method_status: "credit_invoice", // Force setting pay_method_status to 'credit_invoice'
-        };
+      updatedFormData = {
+        ...updatedFormData,
+        pay_method_status: "credit_invoice", // Force setting pay_method_status to 'credit_invoice'
+      };
     }
 
     console.log("Submitting:", updatedFormData);
 
     try {
-        if (!updatedFormData.id) {
-            toast.error("No invoice selected. Please select an invoice before submitting.");
-            return;
-        }
+      if (!updatedFormData.id) {
+        toast.error("No invoice selected. Please select an invoice before submitting.");
+        return;
+      }
 
-        const response = await Patch(`invoiceData`, updatedFormData.id, updatedFormData);
+      const response = await Patch(`invoiceData`, updatedFormData.id, updatedFormData);
 
-        if (response && response.status === 200) {
-            console.log("Submission successful:", response.data);
-            toast.success("Invoice payment submitted successfully!");
-            setReloadData(!reloadData);
-            makeBlank();
-            // window.location.reload(); // Reload the page to reflect changes
-        } else {
-          setReloadData(!reloadData);
+      if (response && response.status === 200) {
+        console.log("Submission successful:", response.data);
+        toast.success("Invoice payment submitted successfully!");
+        setReloadData(!reloadData);
+        makeBlank();
+        // window.location.reload(); // Reload the page to reflect changes
+      } else {
+        setReloadData(!reloadData);
 
-            console.error("Failed to submit:", response.data);
-            toast.error(`Error: ${response.data.message || "Failed to update invoice."}`);
-        }
+        console.error("Failed to submit:", response.data);
+        toast.error(`Error: ${response.data.message || "Failed to update invoice."}`);
+      }
     } catch (error) {
       setReloadData(!reloadData);
-        console.error("Error:", error);
-        toast.error(`An unexpected error occurred: ${error.message || "Please try again later."}`);
+      console.error("Error:", error);
+      toast.error(`An unexpected error occurred: ${error.message || "Please try again later."}`);
     }
-};
+  };
 
   const handleCancel = () => {
     navigate("/");
@@ -300,49 +300,49 @@ function PayInvoice() {
 
   return (
     <div className="dashboard-container">
-       <div className="d-flex justify-content-between mb-4">
-      <div className="button-groups">
-        <button
-          className={`btn ${activeButton === '/' ? 'active' : ''}`}
-          onClick={() => handleLinkClick('/')}
-        >
-          Add Invoice
-        </button>
-        <button
-          className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`}
-          onClick={() => handleLinkClick('/payInvoice')}
-        >
-          Pay Invoice
-        </button>
-        <button
-          className={`btn ${activeButton === '/bankDeposit' ? 'active' : ''}`}
-          onClick={() => handleLinkClick('/bankDeposit')}
-        >
-          Bank Deposit
-        </button>
-        <button
-          className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`}
-          onClick={() => handleLinkClick('/atmDeposit')}
-        >
-          ATM Deposit
-        </button>
+      <div className="d-flex justify-content-between mb-4">
+        <div className="button-groups">
+          <button
+            className={`btn ${activeButton === '/' ? 'active' : ''}`}
+            onClick={() => handleLinkClick('/')}
+          >
+            Add Invoice
+          </button>
+          <button
+            className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`}
+            onClick={() => handleLinkClick('/payInvoice')}
+          >
+            Pay Invoice
+          </button>
+          <button
+            className={`btn ${activeButton === '/bankDeposit' ? 'active' : ''}`}
+            onClick={() => handleLinkClick('/bankDeposit')}
+          >
+            Bank Deposit
+          </button>
+          <button
+            className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`}
+            onClick={() => handleLinkClick('/atmDeposit')}
+          >
+            ATM Deposit
+          </button>
+        </div>
       </div>
-    </div>
       <div className="formcontainer">
         <div
           className="container"
           style={{
             backgroundColor: "white",
             boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
-            borderRadius:"40px"
+            borderRadius: "40px"
           }}
         >
           <form onSubmit={handleSubmit}>
             <div className="">
-             
-             
+
+
             </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"
@@ -454,72 +456,33 @@ function PayInvoice() {
                       .slice(0, 7); // Limit input length (10 digits + 1 decimal + 2 decimal places)
                   }}
                 />
-                  
-            
+
+
               </div>
-            
+
               <div className="col-md-3">
-  <input
-    type="text"
-    className="form-control"
-    placeholder="Grand Total"
-    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
-    }}
-  />
-</div>
+                <input
+                  type="text"
+                  className="form-control"
+                  placeholder="Grand Total"
+                  value={grandTotal || ""}
+                  readOnly
+                  style={{
 
-            
-            
-            
-            <div
-  className=" d-flex align-items-center"
-  style={{
-    border: '2px solid #ACB4AA',
-    padding: '5px 40px',
-    width: 'fit-content',
-    borderRadius: '40px',
-  }}
->
-  {['cash', 'cheque', 'bank'].map((method) => (
-    <div className="me-3" key={method}>
-      <input
-        type="radio"
-        className="form-check-input"
-        name="pay_method"
-        value={method}
-        checked={formData.pay_method === method}
-        onChange={handleChange}
-        id={`pay_method_${method}`} // Unique ID for each radio input
-        style={{ display: 'none' }} // Hide the actual radio button
-      />
-      <label
-        className="form-check-label cursor-pointer"
-        htmlFor={`pay_method_${method}`} // Link label to the input
-        onClick={() => handleChange({ target: { name: 'pay_method', value: method } })} // Custom onClick to change the state
-        style={{
-          color: formData.pay_method === method ? 'white' : '#282e26', // Change text color based on active state
-          backgroundColor: formData.pay_method === method ? '#4a5546' : 'transparent', // Change background when active
-          padding: '5px 25px', // Add padding for better appearance
-          borderRadius: '20px', // Optional: Round the corners of the label
-        }}
-      >
-        {method.charAt(0).toUpperCase() + method.slice(1)} {/* Capitalize first letter */}
-      </label>
-    </div>
-  ))}
-</div>
+                    backgroundColor: '#fafafa',
+
+                  }}
+                />
+              </div>
 
 
-              <div className="">
-              {/* <div className="col-md-3 mt-4">
+
+
+
+
+
+            
+                {/* <div className="col-md-3 mt-4">
                 <input
                   name="after_discount"
                   type="text"
@@ -531,44 +494,92 @@ function PayInvoice() {
                 />
               </div> */}
 
-            
+
               </div>
-            </div>
-            <div className="col-md-6">
-              {formData.pay_method === "cheque" && (
-                <div className="">
-                  <div className="col-md-12 row">
-                    <div className="mb-3 col-md-6">
-                      <select
-                        required
-                        className="form-control-borderless"
-                        name="bank"
-                        value={formData.bank}
-                        onChange={handleChange}
-                      >
-                        <option value="">Select Bank</option>
-                        {banks.map((bank) => (
-                          <option key={bank.id} value={bank.id}>
-                            {bank.name}
-                          </option>
-                        ))}
-                      </select>
-                    </div>
-                    <div className="mb-3 col-md-6">
+
+              <div className="md-col-12 ">
+                <div
+                  className="d-flex align-items-center"
+                  style={{
+                    border: '2px solid #ACB4AA',
+                    padding: '2px 20px', // Same left and right padding
+                    width: 'fit-content',
+                    borderRadius: '40px',
+                  }}
+                >
+                  {['cash', 'cheque', 'bank'].map((method) => (
+                    <div className="" key={method}>
                       <input
-                        required
-                        type="text"
-                        className="form-control-borderless"
-                        name="cheque_no"
-                        placeholder="Check Number"
-                        value={formData.cheque_no}
+                        type="radio"
+                        className="form-check-input"
+                        name="pay_method"
+                        value={method}
+                        checked={formData.pay_method === method}
                         onChange={handleChange}
+                        id={`pay_method_${method}`} // Unique ID for each radio input
+                        style={{ display: 'none' }} // Hide the actual radio button
                       />
+                      <label
+                        className="form-check-label cursor-pointer"
+                        htmlFor={`pay_method_${method}`} // Link label to the input
+                        onClick={() => handleChange({ target: { name: 'pay_method', value: method } })} // Custom onClick to change the state
+                        style={{
+                          color: formData.pay_method === method ? 'white' : '#282e26', // Change text color based on active state
+                          backgroundColor: formData.pay_method === method ? '#4a5546' : 'transparent', // Change background when active
+                          padding: '5px 25px', // Add padding for better appearance
+                          borderRadius: '20px', // Optional: Round the corners of the label
+                        }}
+                      >
+                        {method.charAt(0).toUpperCase() + method.slice(1)} {/* Capitalize first letter */}
+                      </label>
                     </div>
+                  ))}
+                </div>
+            </div>
+            <div className="col-md-12 mt-3" >
+
+              {formData.pay_method === "cheque" && (
+                <div className="row "> {/* Use row class for Bootstrap grid */}
+                  <div className="col-md-2 mb-3"> {/* First column for bank select */}
+                    <select
+                      required
+                      className="form-control-borderless" // Keep Bootstrap styles
+                      name="bank"
+                      value={formData.bank}
+                      onChange={handleChange}
+                    >
+                      <option value="">Select Bank</option>
+                      {banks.map((bank) => (
+                        <option key={bank.id} value={bank.id}>
+                          {bank.name}
+                        </option>
+                      ))}
+                    </select>
+                  </div>
+
+                  <div className="col-md-2 mb-3"> {/* Second column for cheque number input */}
+                    <input
+                      required
+                      type="text"
+                      className="form-control-borderless"
+                      name="cheque_no"
+                      placeholder="Check Number"
+                      value={formData.cheque_no}
+                      onChange={handleChange}
+                    />
                   </div>
                 </div>
               )}
 
+
+
+
+
+
+
+
+
+
               {formData.pay_method === "bank" && (
                 <div className="mb-3">
                   <div className="col-md-12 row">
@@ -615,18 +626,18 @@ function PayInvoice() {
               )}
             </div>
             <div className="d-flex justify-content-end">
-                <button
-                  type="button"
-                  className="btn btn-contained me-2"
-                  onClick={handleCancel}
-                  style={{border: " 1px solid #282e26", borderRadius:'20px' }}
-                >
-                  Cancel
-                </button>
-                <button type="submit" className="btn"  style={{color:"white", backgroundColor:'#282e26', borderRadius:'20px'}}> 
-                  Save
-                </button>
-              </div>
+              <button
+                type="button"
+                className="btn btn-contained me-2"
+                onClick={handleCancel}
+                style={{ border: " 1px solid #282e26", borderRadius: '20px' }}
+              >
+                Cancel
+              </button>
+              <button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px' }}>
+                Save
+              </button>
+            </div>
           </form>
         </div>
       </div>
@@ -638,7 +649,7 @@ function PayInvoice() {
         }}
       >
         <TableComponent reloadData={reloadData} onEdit={handleInvoiceSelect} />
-<ToastContainer/>
+        <ToastContainer />
         <AddVendorModal
           show={showModal}
           handleClose={handleClose}
diff --git a/src/components/Pages/AppPAges/Dashboard/Invoice/PayInvoice_Table.js b/src/components/Pages/AppPAges/Dashboard/Invoice/PayInvoice_Table.js
index 6b1797a..21cd7d2 100644
--- a/src/components/Pages/AppPAges/Dashboard/Invoice/PayInvoice_Table.js
+++ b/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",
 });
 
diff --git a/src/components/Pages/AppPAges/Expense/expense.js b/src/components/Pages/AppPAges/Expense/expense.js
index 6bf7dab..39438a0 100644
--- a/src/components/Pages/AppPAges/Expense/expense.js
+++ b/src/components/Pages/AppPAges/Expense/expense.js
@@ -952,7 +952,7 @@ export default function Expense() {
                           <div
                             className="input-group-prepend"
                             style={{
-                              background: "#ffffff",
+                              backgroundColor: "#ffffff",
                               height: "100%",
 
                               display: "flex",
diff --git a/src/components/Pages/AppPAges/ManageSettings/DataTables.js b/src/components/Pages/AppPAges/ManageSettings/DataTables.js
index 5dc8db1..b5bce05 100644
--- a/src/components/Pages/AppPAges/ManageSettings/DataTables.js
+++ b/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",
+              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,7 +320,9 @@ const PayrollTable = ({
               <option value={20}>20</option>
             </select>
           </div>
-        </div>
+          
+          </div>
+
 
       </div>
       <table className="data-table custom-table ">
diff --git a/src/components/Pages/AppPAges/ManageSettings/ManageDepartments.js b/src/components/Pages/AppPAges/ManageSettings/ManageDepartments.js
index 7dcc9c9..4d24561 100644
--- a/src/components/Pages/AppPAges/ManageSettings/ManageDepartments.js
+++ b/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,15 +125,22 @@ 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="show-department-section">
+<div className="store-container"> 
+
+<div className="show-department-section">
   <div className="dept-cards-row">
     {filteredDepartments.length === 0 ? (
       <p
@@ -201,6 +208,8 @@ function ManageDepartments() {
   </div>
 </div>
 
+
+</div>
     </div>
   );
 }
diff --git a/src/components/Pages/AppPAges/ManageSettings/ManageUserTable.js b/src/components/Pages/AppPAges/ManageSettings/ManageUserTable.js
index 5443728..5200059 100644
--- a/src/components/Pages/AppPAges/ManageSettings/ManageUserTable.js
+++ b/src/components/Pages/AppPAges/ManageSettings/ManageUserTable.js
@@ -277,42 +277,57 @@ const ManageUserTable = ({
             </div>
           )}
         </div>
-         <div style={{ marginRight: "70%" }}>
+       
+        <div style={{ marginRight: "69%" }}>
           <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",
+              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>
@@ -321,7 +336,9 @@ const ManageUserTable = ({
               <option value={20}>20</option>
             </select>
           </div>
-        </div>
+          
+          </div>
+
 
       </div>
       <table className="data-table custom-table ">
diff --git a/src/components/Pages/AppPAges/ManageSettings/ManageUsers.js b/src/components/Pages/AppPAges/ManageSettings/ManageUsers.js
index acb5932..58f8f1f 100644
--- a/src/components/Pages/AppPAges/ManageSettings/ManageUsers.js
+++ b/src/components/Pages/AppPAges/ManageSettings/ManageUsers.js
@@ -117,17 +117,17 @@ function ManageUsers() {
       cancelButtonColor: "#3085d6",
       confirmButtonText: "Yes, delete it!",
     });
-  
+
     // Check if the user clicked the confirm button
     if (!result.isConfirmed) return; // Exit if the user cancels
-  
+
     try {
       await Delete("user", id);
       setUsers((prev) => prev.filter((user) => user.id !== id)); // Remove the user from the list
       toast.success("User deleted successfully!");
     } catch (error) {
       console.error("Error deleting user:", error);
-  
+
       // Check if the error response contains the specific message
       if (error.response && error.response.data && error.response.data.detail === "Store owners cannot be deleted.") {
         toast.error("Store owners cannot be deleted.");
@@ -139,22 +139,22 @@ function ManageUsers() {
   const handleSaveUser = async () => {
     const emailRegex = /^[\w.-]+@[a-zA-Z\d.-]+\.[a-zA-Z]{2,}$/; // Email regex without #
     const phoneRegex = /^[0-9]{10}$/; // US phone number regex for exactly 11 digits (starts with '1' for the country code)
-  
+
     // Validate email
     if (!emailRegex.test(email)) {
       toast.error("Please enter a valid email address (no '#' allowed).");
       return;
     }
-  
+
     // Validate phone number
     if (!phoneRegex.test(phoneNumber)) {
       toast.error("Please enter a valid US phone number (11 digits, starts with '1').");
       return;
     }
-  
+
     // Derive role name from roles array
     const roleName = roles.find((r) => String(r.id) === String(role))?.name || "";
-  
+
     const payload = {
       first_name: fullName,
       email: email,
@@ -165,35 +165,35 @@ function ManageUsers() {
       groups: [],
       ms_role_name: roleName, // Derived role name
     };
-  
+
     try {
       if (currentUserId) {
         // Update user
         await Patch("user", currentUserId, payload);
-  
+
         // Update local state
         setUsers((prevUsers) =>
           prevUsers.map((user) =>
             user.id === currentUserId ? { ...user, ...payload } : user
           )
         );
-  
+
         toast.success("User updated successfully!");
       } else {
         // Add new user
         await Post("user", payload);
-  
+
         // Fetch updated users
         const updatedUsers = await Get("user");
         setUsers(updatedUsers.results);
-  
+
         toast.success("User added successfully!");
       }
-  
+
       handleCloseUserModal();
     } catch (error) {
       console.error("Error saving user:", error);
-  
+
       // Check for specific error responses
       if (error.response && error.response.data) {
         if (error.response.data.ms_role === "You cannot change the role of a store owner.") {
@@ -208,23 +208,23 @@ function ManageUsers() {
       }
     }
   };
-  
+
 
   const handleAssignOwnerSubmit = async (e) => {
     e.preventDefault();
-  
+
     try {
       const response = await Post("assignAsOwner", { email: ownerEmail });
-  
+
       // If successful, show success message
       toast.success("User assigned as owner successfully!");
       setOwnerEmail("");  // Clear input
       fetchUsersAndRoles();  // Refresh the users and roles
       handleCloseAssignOwnerModal();  // Close the modal
-  
+
     } catch (error) {
       console.error("Error assigning owner:", error);
-  
+
       // Check if the error contains a specific message
       if (error.response && error.response.data && error.response.data.error === "User with this email does not exist.") {
         toast.error("The email you provided does not exist.");
@@ -233,7 +233,7 @@ function ManageUsers() {
       }
     }
   };
-  
+
 
   const handleSwitchChange = (id) => {
     setStatus((prevStatus) => !prevStatus);
@@ -269,16 +269,16 @@ function ManageUsers() {
     const numericValue = value.replace(/[^0-9]/g, '');
 
     setFormData((prevData) => ({
-        ...prevData,
-        pincode: numericValue,
-        ...(numericValue.trim() === "" && { city: "", state: "", country: "" }),
+      ...prevData,
+      pincode: numericValue,
+      ...(numericValue.trim() === "" && { city: "", state: "", country: "" }),
     }));
 
     // Trigger fetching location details if the length is valid
     if (numericValue.length === 5 || numericValue.length === 6) {
-        fetchLocationDetails(numericValue);
+      fetchLocationDetails(numericValue);
     }
-};
+  };
   // Handle pincode blur
   const handlePincodeBlur = () => {
     const { pincode } = formData;
@@ -391,68 +391,68 @@ function ManageUsers() {
     <>
       <ToastContainer />
       <div className="due-days">
-      <div className="header-row">
-  <div className="setting-title">Manage Users</div>
-  <div className="btn-position" style={{ display: "flex", gap: "10px" }}> {/* Set up flex with gap */}
-    <button
-      className="btn cus d-flex align-items-center"
-      onClick={() => handleShowUserModal()} // Open modal for adding a user
-    >
-      + Add New User
-      <img
+        <div className="header-row">
+          <div className="setting-title">Manage Users</div>
+          <div className="btn-position" style={{ display: "flex", gap: "10px" }}> {/* Set up flex with gap */}
+            <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
-      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
+            </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",
+              }}
+              onClick={() => handleShowStoreModal()} // Open modal for adding a user
+            >
+              + Add New Store
+              <img
                 src={storeIcon}
                 alt="store Icon"
                 style={{ width: "20px", height: "20px", marginLeft: "8px" }}
               />
-    </button>
-    <button
-      style={{
-        backgroundColor: "#4A5546",
-        boxShadow: "none",
-        outline: "none",
-        width: "auto",
-        height: "42px",
-        padding: "8px 12px",
-        fontSize: "16px",
-        border: "none",
-        borderRadius: "10px",
-        color: "#F4FFEE",
-        cursor: "pointer",
-      }}
-      onClick={() => setAssignOwnerModal(true)} // Open modal for assigning an owner
-    >
-      + Assign Existing User As Owner
-      <img
+            </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",
+              }}
+              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>
+            </button>
+          </div>
+        </div>
 
         <ManageUserTable
           data={users}
@@ -469,18 +469,24 @@ 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="d-flex align-items-center mb-3">
+            <div className="form-group d-flex flex-column p-5">
+              <div className="d-flex align-items-center mb-3 ">
                 <input
                   type="text"
                   className="input-field"
                   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"
@@ -488,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) => {
 
@@ -505,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) => (
@@ -537,7 +561,7 @@ function ManageUsers() {
                   style={{
                     marginRight: "40px",
                     padding: "4px 8px",
-                    backgroundColor: "#4545db",
+                    backgroundColor: "#282e26",
                     color: "white",
                     border: "none",
                     borderRadius: "40px",
@@ -565,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 */}
@@ -585,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">
@@ -600,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">
@@ -610,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>
@@ -625,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>
@@ -639,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">
@@ -649,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>
@@ -661,7 +715,7 @@ function ManageUsers() {
                   style={{
                     marginRight: "40px",
                     padding: "4px 8px",
-                    backgroundColor: "#4545db",
+                    backgroundColor: "#282e26",
                     color: "white",
                     border: "none",
                     borderRadius: "40px",
@@ -687,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",
@@ -722,8 +782,6 @@ function ManageUsers() {
                 </button>
               </div>
             </div>
-
-
           </form>
 
         </ReusableModal>
diff --git a/src/components/Pages/AppPAges/ManageSettings/Settings.css b/src/components/Pages/AppPAges/ManageSettings/Settings.css
index 6f94b22..9941608 100644
--- a/src/components/Pages/AppPAges/ManageSettings/Settings.css
+++ b/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 */
@@ -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,7 +541,7 @@ input[type="date"] {
 }
 .data-table {
   width: 100%;
-  border: 1px solid #F4F4F4;
+  border: 2px solid #F4F4F4;
   border-collapse: collapse;
   /* border-radius: 20px 20px 0 0; */
   overflow: hidden;
@@ -533,12 +560,15 @@ input[type="date"] {
 .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,7 @@ input[type="date"] {
   display: flex;
   justify-content: end;
   padding: 10px 0;
+  background-color: #ffffff;
   
 }
 .pagination .page-item {
@@ -576,6 +607,7 @@ input[type="date"] {
 .pagination .page-link {
   padding: 10px;
   border: 1px solid #F4F4F4;
+  /* background-color: #ffffff; */
   background-color: #b6d7a8;
   border-radius: 30px;
   color: #002300;
diff --git a/src/components/Pages/AppPAges/ManageSettings/StoreInformation.js b/src/components/Pages/AppPAges/ManageSettings/StoreInformation.js
index 205be7e..658673f 100644
--- a/src/components/Pages/AppPAges/ManageSettings/StoreInformation.js
+++ b/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) => {
diff --git a/src/components/Pages/AppPAges/Payroll/Payroll.js b/src/components/Pages/AppPAges/Payroll/Payroll.js
index 3d9c2d4..bcc9e43 100644
--- a/src/components/Pages/AppPAges/Payroll/Payroll.js
+++ b/src/components/Pages/AppPAges/Payroll/Payroll.js
@@ -414,15 +414,16 @@ 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', borderRadius: '40px' }}
+              style={{ width: modalType === 'payment' ? '650px' : '700px', borderRadius: '40px' }}
             >
               <div
                 className="modal-header"
                 style={{
+              
                   display: 'flex',
                   justifyContent: 'space-between', // Distribute space between items
                   alignItems: 'center',
@@ -457,31 +458,33 @@ export default function Payroll() {
               { }
               {(modalType === 'new' || modalType === 'edit') && (
                 <form onSubmit={handleSubmit}>
-                  <div className="modal-body">
-                    <div className="form-group">
-                      <label htmlFor="full_name">Employee Name</label>
+               <div className="modal-body ">
+                    <div className="form-group -flex flex-column justify-content-center align-items-center px-5 ">
+                      {/* <label htmlFor="full_name">Employee Name</label> */}
                       <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: "2px solid #ccc", // Set bottom border
+                          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}
@@ -490,26 +493,27 @@ export default function Payroll() {
                         style={{
                           backgroundColor: "#ffffff",
                           border: "none", // Remove all borders
-                          borderBottom: "2px solid #ccc", // Set bottom border
+                          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: "2px solid #ccc", // Set bottom border
+                          borderBottom: "1px solid #9e9e9e", // Set bottom border
                           borderRadius: "0px", // Remove border radius 
                         }}
                         required
@@ -529,75 +533,75 @@ export default function Payroll() {
               { }
               {modalType === 'payment' && (
                 <form onSubmit={handlePaymentSubmit}>
-                  <div className="modal-body"  >
-                    <div className="form-group row col-md-12">
-                      {/* Salary Amount Input */}
-                      <div className="col-md-5">
-                        <input
-                          type="text"
-                          className="form-control"
-                          id="salary_amount"
-                          name="salary_amount"
-                          placeholder="Amount"
-                          value={paymentData.salary_amount}
-                          onChange={handlePaymentChange}
-                          onKeyDown={(e) => {
-                            if (e.key === "-" || e.key === "+") {
-                              e.preventDefault();
-                            }
-                          }}
-                          style={{
-                            backgroundColor: "#ffffff",
-                            border: "none",
-                            borderBottom: "2px solid #ccc",
-                            borderRadius: "0px",
-                          }}
-                          required
-                          onInput={(e) => {
-                            let value = e.target.value;
-                            value = value.replace(/[^0-9.]/g, "");
-                            if (value.indexOf(".") !== -1) {
-                              const parts = value.split(".");
-                              value = parts[0] + "." + parts[1].substring(0, 2);
-                            }
-                            e.target.value = value;
-                            handlePaymentChange(e);
-                          }}
-                        />
-                      </div>
+                 <div className="modal-body">
+  <div className="form-group row col-md-12 justify-content-between"> {/* Added justify-content-between */}
+    {/* Salary Amount Input */}
+    <div className="col-md-5 mb-3"> {/* Added margin bottom for spacing */}
+      <input
+        type="text"
+        className="form-control"
+        id="salary_amount"
+        name="salary_amount"
+        placeholder="Amount"
+        value={paymentData.salary_amount}
+        onChange={handlePaymentChange}
+        onKeyDown={(e) => {
+          if (e.key === "-" || e.key === "+") {
+            e.preventDefault();
+          }
+        }}
+        style={{
+          backgroundColor: "#ffffff",
+          border: "none",
+          borderBottom: "1px solid #9e9e9e", // Set bottom border
+          borderRadius: "0px",
+        }}
+        required
+        onInput={(e) => {
+          let value = e.target.value;
+          value = value.replace(/[^0-9.]/g, "");
+          if (value.indexOf(".") !== -1) {
+            const parts = value.split(".");
+            value = parts[0] + "." + parts[1].substring(0, 2);
+          }
+          e.target.value = value;
+          handlePaymentChange(e);
+        }}
+      />
+    </div>
 
-                      {/* Salary Unit Select */}
-                      <div className="col-md-5">
-                        <select
-                          className="form-control"
-                          name="salary_unit"
-                          value={paymentData.salary_unit}
-                          onChange={handlePaymentChange}
-                          required
-                          style={{
-                            backgroundColor: "#ffffff",
-                            border: "none",
-                            borderBottom: "2px solid #ccc",
-                            borderRadius: "0px",
-                          }}
-                        >
-                          <option value="" disabled>
-                            Per Unit
-                          </option>
-                          <option value="hourly">Hourly</option>
-                          <option value="weekly">Weekly</option>
-                          <option value="bi weekly">Bi Weekly</option>
-                          <option value="monthly">Monthly</option>
-                        </select>
-                      </div>
-                    </div>
+    {/* 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>
 
 
 
-                    <div className="form-group row col-md-12">
+                    <div className="form-group row col-md-12 justify-content-between">
                       {/* Start Date Input */}
                       <div className="form-group col-md-5">
-                        <label htmlFor="start_date">Start Date</label>
+                      
                         <input
                           type="date"
                           className="form-control"
@@ -608,7 +612,7 @@ export default function Payroll() {
                           style={{
                             backgroundColor: "#ffffff",
                             border: "none",
-                            borderBottom: "2px solid #ccc",
+                            borderBottom: "1px solid #9e9e9e", // Set bottom border
                             borderRadius: "0px",
                           }}
                         />
@@ -616,7 +620,7 @@ export default function Payroll() {
 
                       {/* End Date Input */}
                       <div className="form-group col-md-5">
-                        <label htmlFor="end_date">End Date</label>
+                       
                         <input
                           type="date"
                           className="form-control"
@@ -627,7 +631,7 @@ export default function Payroll() {
                           style={{
                             backgroundColor: "#ffffff",
                             border: "none",
-                            borderBottom: "2px solid #ccc",
+                            borderBottom: "1px solid #9e9e9e", // Set bottom border
                             borderRadius: "0px",
                           }}
                         />
@@ -638,9 +642,9 @@ export default function Payroll() {
 
 
                     {/* <ToastContainer /> */}
-                    <div className="form-group row col-md-12">
+                    <div className="form-group row col-md-12 justify-content-between">
                       {/* Total Hours Input */}
-                      <div className="form-group col-md-5">
+                      <div className="form-group col-md-5" >
 
                         <input
                           type="number"
@@ -656,7 +660,7 @@ export default function Payroll() {
                           style={{
                             backgroundColor: "#ffffff",
                             border: "none",
-                            borderBottom: "2px solid #ccc",
+                            borderBottom: "1px solid #9e9e9e", // Set bottom border,
                             borderRadius: "0px",
                           }}
                           required
@@ -665,7 +669,7 @@ export default function Payroll() {
 
                       {/* Payment Method Select */}
                       <div className="form-group col-md-5">
-                        <div style={{ border: '2px solid #ACB4AA', padding: '5px 10px', width: "fit-content", borderRadius: '40px', display: 'flex', gap: '10px' }}>
+                        <div style={{ border: '2px solid #ACB4AA', padding: '5px 5px', width: "fit-content", borderRadius: '40px', display: 'flex',  }}>
                           <button
                             type="button"
                             className="btn"
@@ -674,7 +678,7 @@ export default function Payroll() {
                               backgroundColor: paymentData.payment_method === "cash" ? "#4a5546" : "transparent",
                               color: paymentData.payment_method === "cash" ? "#ffffff" : "#000000",
                               border: 'none',
-                              padding: '10px 10px',
+                              padding: '5px 5px',
                               borderRadius: '20px',
                               cursor: 'pointer',
                             }}
@@ -689,7 +693,7 @@ export default function Payroll() {
                               backgroundColor: paymentData.payment_method === "cheque" ? "#4a5546" : "transparent",
                               color: paymentData.payment_method === "cheque" ? "#ffffff" : "#000000",
                               border: 'none',
-                              padding: '10px 10px',
+                              padding: '5px 5px',
                               borderRadius: '20px',
                               cursor: 'pointer',
                             }}
@@ -704,7 +708,7 @@ export default function Payroll() {
                     </div>
 
                     {paymentData.payment_method === "cheque" && (
-                      <div className="form-group row col-md-12">
+                      <div className="form-group row col-md-12 justify-content-between">
                         <div className="form-group col-md-5">
 
                           <select
@@ -716,7 +720,7 @@ export default function Payroll() {
                             style={{
                               backgroundColor: "#ffffff",
                               border: "none",
-                              borderBottom: "2px solid #ccc",
+                              borderBottom: "1px solid #9e9e9e", // Set bottom border
                               borderRadius: "0px",
                             }}
                           >
@@ -743,7 +747,7 @@ export default function Payroll() {
                             style={{
                               backgroundColor: "#ffffff",
                               border: "none",
-                              borderBottom: "2px solid #ccc",
+                              borderBottom: "1px solid #9e9e9e", // Set bottom border
                               borderRadius: "0px",
                             }}
                           />
@@ -760,7 +764,7 @@ export default function Payroll() {
                             style={{
                               backgroundColor: "#ffffff",
                               border: "none",
-                              borderBottom: "2px solid #ccc",
+                              borderBottom: "1px solid #9e9e9e", // Set bottom border
                               borderRadius: "0px",
                             }}
                           />
@@ -771,7 +775,7 @@ export default function Payroll() {
                     )}
 
                   </div>
-                  <div className="modal-footer">
+                  <div className="modal-footer" style={{border:"none"}}>
                     <button type="submit" className="btn " style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px' }}>
                       Payment
                     </button>
diff --git a/src/components/Pages/AppPAges/Purchase/purchase.js b/src/components/Pages/AppPAges/Purchase/purchase.js
index 0946bdc..27ec36a 100644
--- a/src/components/Pages/AppPAges/Purchase/purchase.js
+++ b/src/components/Pages/AppPAges/Purchase/purchase.js
@@ -949,7 +949,13 @@ export default function Purchase() {
                     <div className="d-flex col-md-12 mt-2">
                       <div
                         className="form-row d-flex col-md-5 p-2 mt-2"
-                        style={{ marginLeft: "10px" }}
+                        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
diff --git a/src/components/common/header.css b/src/components/common/header.css
index 9cef3ae..5a66bb2 100644
--- a/src/components/common/header.css
+++ b/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 {