set padding horizontically for Emp table

src/components/Expenses/ExpenseFilterPanel.jsx

@@ -20,7 +20,8 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
   const selectedProjectId = useSelector((store) => store.localVariables.projectId);
   const { data, isLoading,isError,error,isFetching , isFetched} = useExpenseFilter();
 
-  const groupByList = useMemo(() => [
+const groupByList = useMemo(() => {
+  return [
     { id: "transactionDate", name: "Transaction Date" },
     { id: "status", name: "Status" },
     { id: "submittedBy", name: "Submitted By" },
@@ -28,7 +29,9 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
     { id: "paymentMode", name: "Payment Mode" },
     { id: "expensesType", name: "Expense Type" },
     { id: "createdAt", name: "Submitted Date" }
-  ], []);
+  ].sort((a, b) => a.name.localeCompare(b.name));
+}, []);
+
 
   const [selectedGroup, setSelectedGroup] = useState(groupByList[0]);
   const [resetKey, setResetKey] = useState(0);

src/components/Expenses/ExpenseSchema.js

@@ -25,6 +25,7 @@ export const ExpenseSchema = (expenseTypes) => {
       description: z.string().min(1, { message: "Description is required" }),
       location: z.string().min(1, { message: "Location is required" }),
       supplerName: z.string().min(1, { message: "Supplier name is required" }),
+      gstNumber :z.string().optional(),
       amount: z.coerce
         .number({
           invalid_type_error: "Amount is required and must be a number",
@@ -91,6 +92,7 @@ export const defaultExpense = {
   supplerName: "",
   amount: "",
   noOfPersons: "",
+  gstNumber:"",
   billAttachments: [],
 };
 

src/components/Expenses/ExpenseStatusLogs.jsx

@@ -20,7 +20,7 @@ const ExpenseStatusLogs = ({ data }) => {
         {logsToShow.map((log, index) => (
           <div
             key={log.id}
-            className="col-12 d-flex align-items-start mb-2"
+            className="col-12 d-flex align-items-start mb-1"
           >
             <Avatar
               size="xs"

src/components/Expenses/ManageExpense.jsx

@@ -156,6 +156,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
         supplerName: data.supplerName || "",
         amount: data.amount || "",
         noOfPersons: data.noOfPersons || "",
+        gstNumber:data.gstNumber || "",
         billAttachments: data.documents
           ? data.documents.map((doc) => ({
               fileName: doc.fileName,
@@ -409,10 +410,27 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
               </small>
             )}
           </div>
+              <div className="col-md-6">
+            <label htmlFor="statusId" className="form-label ">
+             GST Number
+            </label>
+            <input
+              type="text"
+              id="gstNumber"
+              className="form-control form-control-sm"
+              min="1"
+              {...register("gstNumber")}
+            />
+            {errors.gstNumber && (
+              <small className="danger-text">
+                {errors.gstNumber.message}
+              </small>
+            )}
+          </div>
 
           {ExpenseType?.noOfPersonsRequired && (
-            <div className="col-md-6">
-              <label>No. of Persons</label>
+            <div className="col-md-6 mt-2">
+              <label className="form-label ">No. of Persons</label>
               <input
                 type="number"
                 id="noOfPersons"
@@ -431,7 +449,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
 
         <div className="row my-2">
           <div className="col-md-12">
-            <label htmlFor="description">Description</label>
+            <label htmlFor="description" className="form-label ">Description</label>
             <textarea
               id="description"
               className="form-control form-control-sm"

src/components/Expenses/ViewExpense.jsx

@@ -183,14 +183,15 @@ const ViewExpense = ({ ExpenseId }) => {
               className="form-label me-2 mb-0 fw-semibold text-start"
               style={{ minWidth: "130px" }}
             >
-              Paid By :
+              GST Number :
             </label>
             <div className="text-muted">
-              {data?.paidBy?.firstName} {data?.paidBy?.lastName}
+              {data?.gstNumber}
             </div>
           </div>
         </div>
        
+
         {/* Row 4 */}
         <div className="col-md-6 mb-3">
           <div className="d-flex">
@@ -272,6 +273,19 @@ const ViewExpense = ({ ExpenseId }) => {
             </div>
           </div>
         )}
+         <div className="col-md-6 mb-3">
+          <div className="d-flex">
+            <label
+              className="form-label me-2 mb-0 fw-semibold text-start"
+              style={{ minWidth: "130px" }}
+            >
+              Paid By :
+            </label>
+            <div className="text-muted">
+              {data?.paidBy?.firstName} {data?.paidBy?.lastName}
+            </div>
+          </div>
+        </div>
       </div>
 
       <div className="col-12 text-start">
@@ -349,7 +363,7 @@ const ViewExpense = ({ ExpenseId }) => {
           )}
         </div>
       )}
-     <hr className="divider my-1 py-3 divider-primary"  />
+     <hr className="divider my-1  divider-primary"  />
 
       {Array.isArray(data?.nextStatus) && data.nextStatus.length > 0 && (
         <>

src/pages/employee/EmployeeList.jsx

@@ -295,12 +295,12 @@ const EmployeeList = () => {
 
         {ViewTeamMember ? (
           // <div className="row">
-            <div className="card p-1">
+            <div className="card px-0 px-sm-4">
               <div className="card-datatable table-responsive pt-2">
                 <div
                   id="DataTables_Table_0_wrapper"
-                  className="dataTables_wrapper dt-bootstrap5 no-footer"
-                  style={{ width: "98%" }}
+                  className="dataTables_wrapper no-footer px-2 "
+               
                 >
                   <div className="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-3">
                     {/* Switches: All Employees + Inactive */}
@@ -581,7 +581,7 @@ const EmployeeList = () => {
                             <td className="text-start  d-none  d-sm-table-cell">
                               {item.email ? (
                                 <span className="text-truncate">
-                                  <i className="bx bxs-envelope text-primary me-2"></i>
+                                  <i className="bx bxs-envelope text-primary text-truncate me-2"></i>
                                   {item.email}
                                 </span>
                               ) : (