added padding

src/components/Expenses/ExpenseList.jsx

@@ -202,7 +202,7 @@ const canDetetExpense = (expense)=>{
         </div>
       )}
 
-      <div className="card">
+      <div className="card px-0 px-sm-4">
         <div
           className="card-datatable table-responsive "
           id="horizontal-example"

src/hooks/useExpense.js

@@ -3,8 +3,10 @@ import ExpenseRepository from "../repositories/ExpsenseRepository";
 import showToast from "../services/toastService";
 import { queryClient } from "../layouts/AuthLayout";
 import { useSelector } from "react-redux";
+import moment from "moment";
 
 // -------------------Query------------------------------------------------------
+
 const cleanFilter = (filter) => {
   const cleaned = { ...filter };
 
@@ -14,12 +16,19 @@ const cleanFilter = (filter) => {
     }
   });
 
-  if (!cleaned.startDate) delete cleaned.startDate;
-  if (!cleaned.endDate) delete cleaned.endDate;
+  // moment.utc() to get consistent UTC ISO strings
+  if (!cleaned.startDate) {
+    cleaned.startDate = moment.utc().subtract(7, "days").startOf("day").toISOString();
+  }
+
+  if (!cleaned.endDate) {
+    cleaned.endDate = moment.utc().startOf("day").toISOString();
+  }
 
   return cleaned;
 };
 
+
 export const useExpenseList = (
   pageSize,
   pageNumber,

src/pages/Expense/ExpensePage.jsx

@@ -109,10 +109,10 @@ const ExpensePage = () => {
 
         {(IsViewAll || IsViewSelf) ? (
           <>
-            <div className="card my-1">
+            <div className="card my-3 px-sm-4 px-0">
               <div className="card-body py-2 px-3">
                 <div className="row align-items-center">
-                  <div className="col-sm-6 col-md-4">
+                  <div className="col-6 ">
                     <div className="d-flex align-items-center">
 
                       <input
@@ -126,11 +126,11 @@ const ExpensePage = () => {
                     </div>
                   </div>
 
-                  <div className="col-sm-6 col-md-8 text-end mt-2 mt-sm-0">
+                  <div className="col-6  text-end mt-2 mt-sm-0">
                     {IsCreatedAble && (
                       <button
                         type="button"
-                        className="p-1 me-2 bg-primary rounded-circle"
+                        className="p-1 me-1 m-sm-0  bg-primary rounded-circle"
                         title="Add New Expense"
                         onClick={() => setManageExpenseModal({ IsOpen: true, expenseId: null })}
                       >

src/utils/dateUtils.jsx

@@ -71,8 +71,8 @@ export  const formatNumber = (num) => {
 
 export const formatUTCToLocalTime = (datetime, timeRequired = false) => {
   return timeRequired
-    ? moment.utc(datetime).local().format("DD MMMM YYYY hh:mm A")
-    : moment.utc(datetime).local().format("DD MMMM YYYY");
+    ? moment.utc(datetime).local().format("DD MMM YYYY hh:mm A")
+    : moment.utc(datetime).local().format("DD MMM YYYY");
 };
 
 export  const getCompletionPercentage = (completedWork, plannedWork)=> {