From e10bb10c203c6b7a16683a365a2550732517ec6c Mon Sep 17 00:00:00 2001
From: "pramod.mahajan" <pramod.mahajan@marcoaiot.com>
Date: Mon, 8 Dec 2025 14:10:00 +0530
Subject: [PATCH 1/4] display properly each document

---
 src/components/Expenses/PreviewDocument.jsx | 210 ++++++++++----------
 src/utils/constants.jsx                     |  13 ++
 2 files changed, 117 insertions(+), 106 deletions(-)

diff --git a/src/components/Expenses/PreviewDocument.jsx b/src/components/Expenses/PreviewDocument.jsx
index e819cd44..f35d6ef2 100644
--- a/src/components/Expenses/PreviewDocument.jsx
+++ b/src/components/Expenses/PreviewDocument.jsx
@@ -1,5 +1,6 @@
 import { error } from "pdf-lib";
 import { useState, useRef, useEffect } from "react";
+import { iframeDocuments } from "../../utils/constants";
 
 const PreviewDocument = ({ files = [] }) => {
   const images = Array.isArray(files) ? files : [files];
@@ -19,7 +20,9 @@ const PreviewDocument = ({ files = [] }) => {
   const currentFile = images[index];
   const fileUrl = currentFile?.preSignedUrl;
 
-  const isPDF = fileUrl?.toLowerCase().endsWith(".pdf");
+  const isDocumentType = iframeDocuments.includes(
+    currentFile?.contentType.toLowerCase()
+  );
 
   useEffect(() => {
     setRotation(0);
@@ -28,8 +31,10 @@ const PreviewDocument = ({ files = [] }) => {
     setLoading(true);
   }, [index]);
 
-  const zoomIn = () => !isPDF && setScale((prev) => Math.min(prev + 0.2, MAX_ZOOM));
-  const zoomOut = () => !isPDF && setScale((prev) => Math.max(prev - 0.2, MIN_ZOOM));
+  const zoomIn = () =>
+    !isDocumentType && setScale((prev) => Math.min(prev + 0.2, MAX_ZOOM));
+  const zoomOut = () =>
+    !isDocumentType && setScale((prev) => Math.max(prev - 0.2, MIN_ZOOM));
 
   const resetAll = () => {
     setRotation(0);
@@ -46,7 +51,7 @@ const PreviewDocument = ({ files = [] }) => {
   };
 
   const handleMouseDown = (e) => {
-    if (isPDF) return;
+    if (isDocumentType) return;
     setDragging(true);
     startPos.current = {
       x: e.clientX - position.x,
@@ -55,7 +60,7 @@ const PreviewDocument = ({ files = [] }) => {
   };
 
   const handleMouseMove = (e) => {
-    if (!dragging || isPDF) return;
+    if (!dragging || isDocumentType) return;
 
     setPosition({
       x: e.clientX - startPos.current.x,
@@ -65,114 +70,107 @@ const PreviewDocument = ({ files = [] }) => {
 
   const handleMouseUp = () => setDragging(false);
 
-  const handleDoubleClick = () => !isPDF && resetAll();
+  const handleDoubleClick = () => !isDocumentType && resetAll();
 
   return (
-    <>
-      {/* Controls */}
-      <div className="d-flex justify-content-start align-items-center mb-2">
-        <div className="d-flex gap-3">
-          {!isPDF && (
-            <>
-              <i
-                className="bx bx-rotate-right cursor-pointer fs-4"
-                onClick={() => setRotation((prev) => prev + 90)}
-                title="Rotate"
-              />
-              <i
-                className="bx bx-zoom-in cursor-pointer fs-4"
-                onClick={zoomIn}
-                title="Zoom In"
-              />
-              <i
-                className="bx bx-zoom-out cursor-pointer fs-4"
-                onClick={zoomOut}
-                title="Zoom Out"
-              />
-              <i
-                className="bx bx-reset cursor-pointer fs-4"
-                onClick={resetAll}
-                title="Reset"
-              />
-            </>
-          )}
-        </div>
-      </div>
+<>
+  {/* Controls */}
+  <div className="d-flex justify-content-start align-items-center mb-2">
+    <div className="d-flex gap-3">
+      {!isDocumentType && (
+        <>
+          <i
+            className="bx bx-rotate-right cursor-pointer fs-4"
+            onClick={() => setRotation((prev) => prev + 90)}
+            title="Rotate"
+          />
+          <i
+            className="bx bx-zoom-in cursor-pointer fs-4"
+            onClick={zoomIn}
+            title="Zoom In"
+          />
+          <i
+            className="bx bx-zoom-out cursor-pointer fs-4"
+            onClick={zoomOut}
+            title="Zoom Out"
+          />
+          <i
+            className="bx bx-reset cursor-pointer fs-4"
+            onClick={resetAll}
+            title="Reset"
+          />
+        </>
+      )}
+    </div>
+  </div>
 
-      <div
-        onMouseDown={handleMouseDown}
-        onMouseMove={handleMouseMove}
-        onMouseUp={handleMouseUp}
-        onMouseLeave={handleMouseUp}
-        onDoubleClick={handleDoubleClick}
-        className="position-relative d-flex justify-content-center align-items-center bg-light-secondary overflow-hidden"
+  <div
+    onMouseDown={handleMouseDown}
+    onMouseMove={handleMouseMove}
+    onMouseUp={handleMouseUp}
+    onMouseLeave={handleMouseUp}
+    onDoubleClick={handleDoubleClick}
+    className="position-relative d-flex justify-content-center align-items-center bg-light-secondary overflow-hidden"
+    style={{
+      minHeight: "70vh",
+      userSelect: "none",
+      borderRadius: "10px",
+    }}
+  >
+    {loading && <div className="text-secondary">Loading...</div>}
+
+    {isDocumentType ? (
+      <iframe
+        src={fileUrl}
+        title="Document Preview"
         style={{
-          minHeight: "70vh",
-          
-          userSelect: "none",
-          borderRadius: "10px",
+          width: "100%",
+          height: "70vh",
+          border: "none",
         }}
-      >
-        {loading && <div className="text-secondary">Loading...</div>}
+        onLoad={() => setLoading(false)}
+      />
+    ) : (
+      <img
+        src={fileUrl}
+        alt="Preview"
+        draggable="false"
+        style={{
+          maxHeight: "60vh",
+          display: loading ? "none" : "block",
+          transform: `
+            translate(${position.x}px, ${position.y}px)
+            scale(${scale})
+            rotate(${rotation}deg)
+          `,
+          transition: dragging ? "none" : "transform 0.2s ease",
+          cursor: dragging ? "grabbing" : "grab",
+        }}
+        onLoad={() => setLoading(false)}
+      />
+    )}
+  </div>
 
-        {/* PDF VIEW */}
-        {isPDF ? (
-          <iframe
-            src={"./Expenses.pdf"}
-            title="PDF Preview"
-            style={{
-              width: "100%",
-              height: "70vh",
-              border: "none",
-            }}
-            onLoad={() => setLoading(false)}
-            onError={(error)=>{
-              console.log(error)
-            }}
-          />
-        ) : (
-          /* IMAGE VIEW */
-          <img
-            src={fileUrl}
-            alt="Preview"
-            draggable="false"
-            style={{
-              maxHeight: "60vh",
-              display: loading ? "none" : "block",
-              transform: `
-                translate(${position.x}px, ${position.y}px)
-                scale(${scale})
-                rotate(${rotation}deg)
-              `,
-              transition: dragging ? "none" : "transform 0.2s ease",
-              cursor: dragging ? "grabbing" : "grab",
-            }}
-            onLoad={() => setLoading(false)}
-          />
-        )}
-      </div>
+  <div className="d-flex justify-content-between mt-2">
+    <div className="text-muted small">
+      Scroll = change file | Double click = reset (images only)
+    </div>
+    <div className="d-flex align-items-center gap-2">
+      <i
+        className="bx bx-chevron-left cursor-pointer fs-4"
+        onClick={prevImage}
+      />
+      <span>
+        {index + 1} / {images.length}
+      </span>
+      <i
+        className="bx bx-chevron-right cursor-pointer fs-4"
+        onClick={nextImage}
+      />
+    </div>
+  </div>
+</>
 
-
-
-      <div className="d-flex justify-content-between">
-        <div className="text-center text-muted mt-2 small">
-          Scroll = change file | Double click = reset (images only)
-        </div>
-        <div className="d-flex align-items-center gap-2">
-          <i
-            className="bx bx-chevron-left cursor-pointer fs-4"
-            onClick={prevImage}
-          />
-          <span>
-            {index + 1} / {images.length}
-          </span>
-          <i
-            className="bx bx-chevron-right cursor-pointer fs-4"
-            onClick={nextImage}
-          />
-        </div>
-      </div>
-    </>
   );
 };
 
diff --git a/src/utils/constants.jsx b/src/utils/constants.jsx
index b3231405..fa766551 100644
--- a/src/utils/constants.jsx
+++ b/src/utils/constants.jsx
@@ -7,6 +7,19 @@ export const DURATION_TIME = 10; // minutes
 export const ITEMS_PER_PAGE = 20;
 export const OTP_EXPIRY_SECONDS = 300; // OTP time
 
+export const iframeDocuments = [
+  "application/pdf",
+  "application/msword",
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+  "application/vnd.ms-excel",
+  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+  "application/mspowerpoint",
+  "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+  "text/plain",
+  "application/rtf",
+  "text/csv",
+];
+
 export const MANAGE_MASTER = "588a8824-f924-4955-82d8-fc51956cf323";
 
 export const VIEW_MASTER = "5ffbafe0-7ab0-48b1-bb50-c1bf76b65f9d";

From 8e49d4dc8b9e63aa7a515423a0da8d0748db9ffd Mon Sep 17 00:00:00 2001
From: "pramod.mahajan" <pramod.mahajan@marcoaiot.com>
Date: Mon, 8 Dec 2025 16:24:03 +0530
Subject: [PATCH 2/4] added new class for pageView heigt

---
 public/assets/css/core-extend.css | 983 ++++++++++++++++++++++--------
 1 file changed, 726 insertions(+), 257 deletions(-)

diff --git a/public/assets/css/core-extend.css b/public/assets/css/core-extend.css
index 3a8406cb..05e4266a 100644
--- a/public/assets/css/core-extend.css
+++ b/public/assets/css/core-extend.css
@@ -1,7 +1,7 @@
 :root,
 [data-bs-theme="light"] {
   --bs-nav-link-font-size: 0.7375rem;
-  --bg-border-color :#f8f6f6
+  --bg-border-color: #f8f6f6;
 }
 .offcanvas.offcanvas-wide {
   width: 700px !important; /* adjust as needed */
@@ -13,8 +13,8 @@
 }
 .form-control-md {
   min-height: calc(1.6em + 0.65rem + calc(var(--bs-border-width) * 2));
-  padding: 0.18rem 0.60rem;
-  font-size: 0.875rem;  /* ~14px */
+  padding: 0.18rem 0.6rem;
+  font-size: 0.875rem; /* ~14px */
   border-radius: var(--bs-border-radius);
 }
 
@@ -24,11 +24,10 @@
   margin-inline-end: 0.75rem;
 }
 
-
 /* ===========================% Background_Colors %========================================================== */
 .bg-light-primary {
   background-color: color-mix(in srgb, var(--bs-primary) 10.4%, transparent);
-  border:var(--bs-primary-border-subtle)
+  border: var(--bs-primary-border-subtle);
 }
 .bg-light-secondary {
   background-color: color-mix(in srgb, var(--bs-secondary) 10.4%, transparent);
@@ -51,22 +50,22 @@
   padding: 0.5rem var(--bs-card-cap-padding-x);
 }
 .table_header_border {
- border-bottom:2px solid var(--bs-table-border-color) ;
+  border-bottom: 2px solid var(--bs-table-border-color);
 }
 .text-gary-80 {
-color:var(--bs-gray-500)
+  color: var(--bs-gray-500);
 }
 
-.text-royalblue{
-color: #1796e3;
+.text-royalblue {
+  color: #1796e3;
 }
 
 .text-md {
-font-size: 2rem;
+  font-size: 2rem;
 }
 
 .text-md-b {
-font-weight: normal;
+  font-weight: normal;
 }
 .stepper-container {
   position: relative;
@@ -162,311 +161,781 @@ font-weight: normal;
   }
 }
 
-
-
-.text-xxs { font-size: 0.55rem; }       /* 8px */
-.text-xs { font-size: 0.75rem; }       /* 12px */
-.text-sm { font-size: 0.875rem; }      /* 14px */
-.text-base { font-size: 1rem; }        /* 16px */
-.text-lg { font-size: 1.125rem; }      /* 18px */
-.text-xl { font-size: 1.25rem; }       /* 20px */
-.text-2xl { font-size: 1.5rem; }       /* 24px */
-.text-3xl { font-size: 1.875rem; }     /* 30px */
-.text-4xl { font-size: 2.25rem; }      /* 36px */
-.text-5xl { font-size: 3rem; }         /* 48px */
-.text-6xl { font-size: 3.75rem; }      /* 60px */
-.text-7xl { font-size: 4.5rem; }       /* 72px */
-.text-8xl { font-size: 6rem; }         /* 96px */
-.text-9xl { font-size: 8rem; }         /* 128px */
-
+.text-xxs {
+  font-size: 0.55rem;
+} /* 8px */
+.text-xs {
+  font-size: 0.75rem;
+} /* 12px */
+.text-sm {
+  font-size: 0.875rem;
+} /* 14px */
+.text-base {
+  font-size: 1rem;
+} /* 16px */
+.text-lg {
+  font-size: 1.125rem;
+} /* 18px */
+.text-xl {
+  font-size: 1.25rem;
+} /* 20px */
+.text-2xl {
+  font-size: 1.5rem;
+} /* 24px */
+.text-3xl {
+  font-size: 1.875rem;
+} /* 30px */
+.text-4xl {
+  font-size: 2.25rem;
+} /* 36px */
+.text-5xl {
+  font-size: 3rem;
+} /* 48px */
+.text-6xl {
+  font-size: 3.75rem;
+} /* 60px */
+.text-7xl {
+  font-size: 4.5rem;
+} /* 72px */
+.text-8xl {
+  font-size: 6rem;
+} /* 96px */
+.text-9xl {
+  font-size: 8rem;
+} /* 128px */
 
 /*  */
 
-.w-0     { width: 0px; }
-.w-px    { width: 1px; }
-.w-1     { width: 0.25rem; }  /* 4px */
-.w-2     { width: 0.5rem; }   /* 8px */
-.w-3     { width: 0.75rem; }  /* 12px */
-.w-4     { width: 1rem; }     /* 16px */
-.w-5     { width: 1.25rem; }  /* 20px */
-.w-6     { width: 1.5rem; }   /* 24px */
-.w-8     { width: 2rem; }     /* 32px */
-.w-10    { width: 2.5rem; }   /* 40px */
-.w-12    { width: 3rem; }     /* 48px */
-.w-16    { width: 4rem; }     /* 64px */
-.w-20    { width: 5rem; }     /* 80px */
-.w-24    { width: 6rem; }     /* 96px */
-.w-32    { width: 8rem; }     /* 128px */
-.w-40    { width: 10rem; }    /* 160px */
-.w-48    { width: 12rem; }    /* 192px */
-.w-56    { width: 14rem; }    /* 224px */
-.w-64    { width: 16rem; }    /* 256px */
-.w-auto  { width: auto; }
-.w-full  { width: 100%; }
-.w-screen{ width: 100vw; }
-.w-min   { width: min-content; }
-.w-max   { width: max-content; }
+.w-0 {
+  width: 0px;
+}
+.w-px {
+  width: 1px;
+}
+.w-1 {
+  width: 0.25rem;
+} /* 4px */
+.w-2 {
+  width: 0.5rem;
+} /* 8px */
+.w-3 {
+  width: 0.75rem;
+} /* 12px */
+.w-4 {
+  width: 1rem;
+} /* 16px */
+.w-5 {
+  width: 1.25rem;
+} /* 20px */
+.w-6 {
+  width: 1.5rem;
+} /* 24px */
+.w-8 {
+  width: 2rem;
+} /* 32px */
+.w-10 {
+  width: 2.5rem;
+} /* 40px */
+.w-12 {
+  width: 3rem;
+} /* 48px */
+.w-16 {
+  width: 4rem;
+} /* 64px */
+.w-20 {
+  width: 5rem;
+} /* 80px */
+.w-24 {
+  width: 6rem;
+} /* 96px */
+.w-32 {
+  width: 8rem;
+} /* 128px */
+.w-40 {
+  width: 10rem;
+} /* 160px */
+.w-48 {
+  width: 12rem;
+} /* 192px */
+.w-56 {
+  width: 14rem;
+} /* 224px */
+.w-64 {
+  width: 16rem;
+} /* 256px */
+.w-auto {
+  width: auto;
+}
+.w-full {
+  width: 100%;
+}
+.w-screen {
+  width: 100vw;
+}
+.w-min {
+  width: min-content;
+}
+.w-max {
+  width: max-content;
+}
 
-
-
-.h-0     { height: 0px; }
-.h-px    { height: 1px; }
-.h-1     { height: 0.25rem; }  /* 4px */
-.h-2     { height: 0.5rem; }   /* 8px */
-.h-3     { height: 0.75rem; }  /* 12px */
-.h-4     { height: 1rem; }     /* 16px */
-.h-5     { height: 1.25rem; }  /* 20px */
-.h-6     { height: 1.5rem; }   /* 24px */
-.h-8     { height: 2rem; }     /* 32px */
-.h-10    { height: 2.5rem; }   /* 40px */
-.h-12    { height: 3rem; }     /* 48px */
-.h-16    { height: 4rem; }     /* 64px */
-.h-20    { height: 5rem; }     /* 80px */
-.h-24    { height: 6rem; }     /* 96px */
-.h-32    { height: 8rem; }     /* 128px */
-.h-40    { height: 10rem; }    /* 160px */
-.h-48    { height: 12rem; }    /* 192px */
-.h-56    { height: 14rem; }    /* 224px */
-.h-64    { height: 16rem; }    /* 256px */
-.h-auto  { height: auto; }
-.h-full  { height: 100%; }
-.h-screen{ height: 100vh; }
-.h-min   { height: min-content; }
-.h-max   { height: max-content; }
+.h-0 {
+  height: 0px;
+}
+.h-px {
+  height: 1px;
+}
+.h-1 {
+  height: 0.25rem;
+} /* 4px */
+.h-2 {
+  height: 0.5rem;
+} /* 8px */
+.h-3 {
+  height: 0.75rem;
+} /* 12px */
+.h-4 {
+  height: 1rem;
+} /* 16px */
+.h-5 {
+  height: 1.25rem;
+} /* 20px */
+.h-6 {
+  height: 1.5rem;
+} /* 24px */
+.h-8 {
+  height: 2rem;
+} /* 32px */
+.h-10 {
+  height: 2.5rem;
+} /* 40px */
+.h-12 {
+  height: 3rem;
+} /* 48px */
+.h-16 {
+  height: 4rem;
+} /* 64px */
+.h-20 {
+  height: 5rem;
+} /* 80px */
+.h-24 {
+  height: 6rem;
+} /* 96px */
+.h-32 {
+  height: 8rem;
+} /* 128px */
+.h-40 {
+  height: 10rem;
+} /* 160px */
+.h-48 {
+  height: 12rem;
+} /* 192px */
+.h-56 {
+  height: 14rem;
+} /* 224px */
+.h-64 {
+  height: 16rem;
+} /* 256px */
+.h-auto {
+  height: auto;
+}
+.h-full {
+  height: 100%;
+}
+.h-screen {
+  height: 100vh;
+}
+.h-min {
+  height: min-content;
+}
+.h-max {
+  height: max-content;
+}
 
 .vh-50 {
   height: 50vh !important;
 }
 
-
-
 /* ==========================
    Base Font Sizes (mobile first)
    ========================== */
-.text-xxs { font-size: 0.55rem; }   /* 8px */
-.text-xs  { font-size: 0.75rem; }   /* 12px */
-.text-sm  { font-size: 0.875rem; }  /* 14px */
-.text-base{ font-size: 1rem; }      /* 16px */
-.text-lg  { font-size: 1.125rem; }  /* 18px */
-.text-xl  { font-size: 1.25rem; }   /* 20px */
-.text-2xl { font-size: 1.5rem; }    /* 24px */
-.text-3xl { font-size: 1.875rem; }  /* 30px */
-.text-4xl { font-size: 2.25rem; }   /* 36px */
-.text-5xl { font-size: 3rem; }      /* 48px */
-.text-6xl { font-size: 3.75rem; }   /* 60px */
-.text-7xl { font-size: 4.5rem; }    /* 72px */
-.text-8xl { font-size: 6rem; }      /* 96px */
-.text-9xl { font-size: 8rem; }      /* 128px */
+.text-xxs {
+  font-size: 0.55rem;
+} /* 8px */
+.text-xs {
+  font-size: 0.75rem;
+} /* 12px */
+.text-sm {
+  font-size: 0.875rem;
+} /* 14px */
+.text-base {
+  font-size: 1rem;
+} /* 16px */
+.text-lg {
+  font-size: 1.125rem;
+} /* 18px */
+.text-xl {
+  font-size: 1.25rem;
+} /* 20px */
+.text-2xl {
+  font-size: 1.5rem;
+} /* 24px */
+.text-3xl {
+  font-size: 1.875rem;
+} /* 30px */
+.text-4xl {
+  font-size: 2.25rem;
+} /* 36px */
+.text-5xl {
+  font-size: 3rem;
+} /* 48px */
+.text-6xl {
+  font-size: 3.75rem;
+} /* 60px */
+.text-7xl {
+  font-size: 4.5rem;
+} /* 72px */
+.text-8xl {
+  font-size: 6rem;
+} /* 96px */
+.text-9xl {
+  font-size: 8rem;
+} /* 128px */
 
 /* ==========================
    Base Heights
    ========================== */
-.h-0     { height: 0; }
-.h-px    { height: 1px; }
-.h-1     { height: 0.25rem; }  /* 4px */
-.h-2     { height: 0.5rem; }   /* 8px */
-.h-3     { height: 0.75rem; }  /* 12px */
-.h-4     { height: 1rem; }     /* 16px */
-.h-5     { height: 1.25rem; }  /* 20px */
-.h-6     { height: 1.5rem; }   /* 24px */
-.h-8     { height: 2rem; }     /* 32px */
-.h-10    { height: 2.5rem; }   /* 40px */
-.h-12    { height: 3rem; }     /* 48px */
-.h-16    { height: 4rem; }     /* 64px */
-.h-20    { height: 5rem; }     /* 80px */
-.h-24    { height: 6rem; }     /* 96px */
-.h-32    { height: 8rem; }     /* 128px */
-.h-40    { height: 10rem; }    /* 160px */
-.h-48    { height: 12rem; }    /* 192px */
-.h-56    { height: 14rem; }    /* 224px */
-.h-64    { height: 16rem; }    /* 256px */
-.h-70    { height: 20rem; }    /* 256px */
-.h-74    { max-height: 35rem; }    /* 256px */
-.h-full  { height: 100%; }
+.h-0 {
+  height: 0;
+}
+.h-px {
+  height: 1px;
+}
+.h-1 {
+  height: 0.25rem;
+} /* 4px */
+.h-2 {
+  height: 0.5rem;
+} /* 8px */
+.h-3 {
+  height: 0.75rem;
+} /* 12px */
+.h-4 {
+  height: 1rem;
+} /* 16px */
+.h-5 {
+  height: 1.25rem;
+} /* 20px */
+.h-6 {
+  height: 1.5rem;
+} /* 24px */
+.h-8 {
+  height: 2rem;
+} /* 32px */
+.h-10 {
+  height: 2.5rem;
+} /* 40px */
+.h-12 {
+  height: 3rem;
+} /* 48px */
+.h-16 {
+  height: 4rem;
+} /* 64px */
+.h-20 {
+  height: 5rem;
+} /* 80px */
+.h-24 {
+  height: 6rem;
+} /* 96px */
+.h-32 {
+  height: 8rem;
+} /* 128px */
+.h-40 {
+  height: 10rem;
+} /* 160px */
+.h-48 {
+  height: 12rem;
+} /* 192px */
+.h-56 {
+  height: 14rem;
+} /* 224px */
+.h-64 {
+  height: 16rem;
+} /* 256px */
+.h-70 {
+  height: 20rem;
+} /* 256px */
+.h-74 {
+  max-height: 35rem;
+} /* 256px */
+.h-full {
+  height: 100%;
+}
 
-.h-screen{ height: 100vh; }
+.h-screen {
+  height: 100vh;
+}
 
 /* ==========================
    Base Widths
    ========================== */
-.w-0     { width: 0; }
-.w-px    { width: 1px; }
-.w-1     { width: 0.25rem; }
-.w-2     { width: 0.5rem; }
-.w-3     { width: 0.75rem; }
-.w-4     { width: 1rem; }
-.w-5     { width: 1.25rem; }
-.w-6     { width: 1.5rem; }
-.w-8     { width: 2rem; }
-.w-10    { width: 2.5rem; }
-.w-12    { width: 3rem; }
-.w-16    { width: 4rem; }
-.w-20    { width: 5rem; }
-.w-24    { width: 6rem; }
-.w-32    { width: 8rem; }
-.w-40    { width: 10rem; }
-.w-48    { width: 12rem; }
-.w-56    { width: 14rem; }
-.w-64    { width: 16rem; }
-.w-full  { width: 100%; }
-.w-screen{ width: 100vw; }
+.w-0 {
+  width: 0;
+}
+.w-px {
+  width: 1px;
+}
+.w-1 {
+  width: 0.25rem;
+}
+.w-2 {
+  width: 0.5rem;
+}
+.w-3 {
+  width: 0.75rem;
+}
+.w-4 {
+  width: 1rem;
+}
+.w-5 {
+  width: 1.25rem;
+}
+.w-6 {
+  width: 1.5rem;
+}
+.w-8 {
+  width: 2rem;
+}
+.w-10 {
+  width: 2.5rem;
+}
+.w-12 {
+  width: 3rem;
+}
+.w-16 {
+  width: 4rem;
+}
+.w-20 {
+  width: 5rem;
+}
+.w-24 {
+  width: 6rem;
+}
+.w-32 {
+  width: 8rem;
+}
+.w-40 {
+  width: 10rem;
+}
+.w-48 {
+  width: 12rem;
+}
+.w-56 {
+  width: 14rem;
+}
+.w-64 {
+  width: 16rem;
+}
+.w-full {
+  width: 100%;
+}
+.w-screen {
+  width: 100vw;
+}
 
 /* ==========================
    Responsive Variants
    ========================== */
-@media (min-width: 576px) { /* sm */
+@media (min-width: 576px) {
+  /* sm */
   /* Font */
-  .text-xxs-sm { font-size: 0.55rem; }
-  .text-xs-sm  { font-size: 0.75rem; }
-  .text-sm-sm  { font-size: 0.875rem; }
-  .text-base-sm{ font-size: 1rem; }
-  .text-lg-sm  { font-size: 1.125rem; }
-  .text-xl-sm  { font-size: 1.25rem; }
-  .text-2xl-sm{ font-size: 1.5rem; }
+  .text-xxs-sm {
+    font-size: 0.55rem;
+  }
+  .text-xs-sm {
+    font-size: 0.75rem;
+  }
+  .text-sm-sm {
+    font-size: 0.875rem;
+  }
+  .text-base-sm {
+    font-size: 1rem;
+  }
+  .text-lg-sm {
+    font-size: 1.125rem;
+  }
+  .text-xl-sm {
+    font-size: 1.25rem;
+  }
+  .text-2xl-sm {
+    font-size: 1.5rem;
+  }
 
   /* Height */
-  .h-1-sm{ height: 0.25rem; }
-  .h-2-sm{ height: 0.5rem; }
-  .h-3-sm{ height: 0.75rem; }
-  .h-4-sm{ height: 1rem; }
-  .h-5-sm{ height: 1.25rem; }
-  .h-6-sm{ height: 1.5rem; }
-  .h-8-sm{ height: 2rem; }
-  .h-10-sm{ height: 2.5rem; }
+  .h-1-sm {
+    height: 0.25rem;
+  }
+  .h-2-sm {
+    height: 0.5rem;
+  }
+  .h-3-sm {
+    height: 0.75rem;
+  }
+  .h-4-sm {
+    height: 1rem;
+  }
+  .h-5-sm {
+    height: 1.25rem;
+  }
+  .h-6-sm {
+    height: 1.5rem;
+  }
+  .h-8-sm {
+    height: 2rem;
+  }
+  .h-10-sm {
+    height: 2.5rem;
+  }
 
   /* Width */
-  .w-1-sm{ width: 0.25rem; }
-  .w-2-sm{ width: 0.5rem; }
-  .w-3-sm{ width: 0.75rem; }
-  .w-4-sm{ width: 1rem; }
-  .w-5-sm{ width: 1.25rem; }
-  .w-6-sm{ width: 1.5rem; }
-  .w-8-sm{ width: 2rem; }
-  .w-10-sm{ width: 2.5rem; }
+  .w-1-sm {
+    width: 0.25rem;
+  }
+  .w-2-sm {
+    width: 0.5rem;
+  }
+  .w-3-sm {
+    width: 0.75rem;
+  }
+  .w-4-sm {
+    width: 1rem;
+  }
+  .w-5-sm {
+    width: 1.25rem;
+  }
+  .w-6-sm {
+    width: 1.5rem;
+  }
+  .w-8-sm {
+    width: 2rem;
+  }
+  .w-10-sm {
+    width: 2.5rem;
+  }
 }
 
-@media (min-width: 768px) { /* md */
+@media (min-width: 768px) {
+  /* md */
   /* Font */
-  .text-xxs-md { font-size: 0.55rem; }
-  .text-xs-md  { font-size: 0.75rem; }
-  .text-sm-md  { font-size: 0.875rem; }
-  .text-base-md{ font-size: 1rem; }
-  .text-lg-md  { font-size: 1.125rem; }
-  .text-xl-md  { font-size: 1.25rem; }
-  .text-2xl-md{ font-size: 1.5rem; }
+  .text-xxs-md {
+    font-size: 0.55rem;
+  }
+  .text-xs-md {
+    font-size: 0.75rem;
+  }
+  .text-sm-md {
+    font-size: 0.875rem;
+  }
+  .text-base-md {
+    font-size: 1rem;
+  }
+  .text-lg-md {
+    font-size: 1.125rem;
+  }
+  .text-xl-md {
+    font-size: 1.25rem;
+  }
+  .text-2xl-md {
+    font-size: 1.5rem;
+  }
 
   /* Height */
-  .h-1-md{ height: 0.25rem; }
-  .h-2-md{ height: 0.5rem; }
-  .h-3-md{ height: 0.75rem; }
-  .h-4-md{ height: 1rem; }
-  .h-5-md{ height: 1.25rem; }
-  .h-6-md{ height: 1.5rem; }
-  .h-8-md{ height: 2rem; }
-  .h-10-md{ height: 2.5rem; }
+  .h-1-md {
+    height: 0.25rem;
+  }
+  .h-2-md {
+    height: 0.5rem;
+  }
+  .h-3-md {
+    height: 0.75rem;
+  }
+  .h-4-md {
+    height: 1rem;
+  }
+  .h-5-md {
+    height: 1.25rem;
+  }
+  .h-6-md {
+    height: 1.5rem;
+  }
+  .h-8-md {
+    height: 2rem;
+  }
+  .h-10-md {
+    height: 2.5rem;
+  }
 
   /* Width */
-  .w-1-md{ width: 0.25rem; }
-  .w-2-md{ width: 0.5rem; }
-  .w-3-md{ width: 0.75rem; }
-  .w-4-md{ width: 1rem; }
-  .w-5-md{ width: 1.25rem; }
-  .w-6-md{ width: 1.5rem; }
-  .w-8-md{ width: 2rem; }
-  .w-10-md{ width: 2.5rem; }
+  .w-1-md {
+    width: 0.25rem;
+  }
+  .w-2-md {
+    width: 0.5rem;
+  }
+  .w-3-md {
+    width: 0.75rem;
+  }
+  .w-4-md {
+    width: 1rem;
+  }
+  .w-5-md {
+    width: 1.25rem;
+  }
+  .w-6-md {
+    width: 1.5rem;
+  }
+  .w-8-md {
+    width: 2rem;
+  }
+  .w-10-md {
+    width: 2.5rem;
+  }
 }
 
-@media (min-width: 992px) { /* lg */
+@media (min-width: 992px) {
+  /* lg */
   /* Font */
-  .text-xxs-lg { font-size: 0.55rem; }
-  .text-xs-lg  { font-size: 0.75rem; }
-  .text-sm-lg  { font-size: 0.875rem; }
-  .text-base-lg{ font-size: 1rem; }
-  .text-lg-lg  { font-size: 1.125rem; }
-  .text-xl-lg  { font-size: 1.25rem; }
-  .text-2xl-lg{ font-size: 1.5rem; }
+  .text-xxs-lg {
+    font-size: 0.55rem;
+  }
+  .text-xs-lg {
+    font-size: 0.75rem;
+  }
+  .text-sm-lg {
+    font-size: 0.875rem;
+  }
+  .text-base-lg {
+    font-size: 1rem;
+  }
+  .text-lg-lg {
+    font-size: 1.125rem;
+  }
+  .text-xl-lg {
+    font-size: 1.25rem;
+  }
+  .text-2xl-lg {
+    font-size: 1.5rem;
+  }
 
   /* Height */
-  .h-1-lg{ height: 0.25rem; }
-  .h-2-lg{ height: 0.5rem; }
-  .h-3-lg{ height: 0.75rem; }
-  .h-4-lg{ height: 1rem; }
-  .h-5-lg{ height: 1.25rem; }
-  .h-6-lg{ height: 1.5rem; }
-  .h-8-lg{ height: 2rem; }
-  .h-10-lg{ height: 2.5rem; }
+  .h-1-lg {
+    height: 0.25rem;
+  }
+  .h-2-lg {
+    height: 0.5rem;
+  }
+  .h-3-lg {
+    height: 0.75rem;
+  }
+  .h-4-lg {
+    height: 1rem;
+  }
+  .h-5-lg {
+    height: 1.25rem;
+  }
+  .h-6-lg {
+    height: 1.5rem;
+  }
+  .h-8-lg {
+    height: 2rem;
+  }
+  .h-10-lg {
+    height: 2.5rem;
+  }
 
   /* Width */
-  .w-1-lg{ width: 0.25rem; }
-  .w-2-lg{ width: 0.5rem; }
-  .w-3-lg{ width: 0.75rem; }
-  .w-4-lg{ width: 1rem; }
-  .w-5-lg{ width: 1.25rem; }
-  .w-6-lg{ width: 1.5rem; }
-  .w-8-lg{ width: 2rem; }
-  .w-10-lg{ width: 2.5rem; }
+  .w-1-lg {
+    width: 0.25rem;
+  }
+  .w-2-lg {
+    width: 0.5rem;
+  }
+  .w-3-lg {
+    width: 0.75rem;
+  }
+  .w-4-lg {
+    width: 1rem;
+  }
+  .w-5-lg {
+    width: 1.25rem;
+  }
+  .w-6-lg {
+    width: 1.5rem;
+  }
+  .w-8-lg {
+    width: 2rem;
+  }
+  .w-10-lg {
+    width: 2.5rem;
+  }
 }
 
-@media (min-width: 1200px) { /* xl */
+@media (min-width: 1200px) {
+  /* xl */
   /* Font */
-  .text-xxs-xl { font-size: 0.55rem; }
-  .text-xs-xl  { font-size: 0.75rem; }
-  .text-sm-xl  { font-size: 0.875rem; }
-  .text-base-xl{ font-size: 1rem; }
-  .text-lg-xl  { font-size: 1.125rem; }
-  .text-xl-xl  { font-size: 1.25rem; }
-  .text-2xl-xl{ font-size: 1.5rem; }
+  .text-xxs-xl {
+    font-size: 0.55rem;
+  }
+  .text-xs-xl {
+    font-size: 0.75rem;
+  }
+  .text-sm-xl {
+    font-size: 0.875rem;
+  }
+  .text-base-xl {
+    font-size: 1rem;
+  }
+  .text-lg-xl {
+    font-size: 1.125rem;
+  }
+  .text-xl-xl {
+    font-size: 1.25rem;
+  }
+  .text-2xl-xl {
+    font-size: 1.5rem;
+  }
 
   /* Height */
-  .h-1-xl{ height: 0.25rem; }
-  .h-2-xl{ height: 0.5rem; }
-  .h-3-xl{ height: 0.75rem; }
-  .h-4-xl{ height: 1rem; }
-  .h-5-xl{ height: 1.25rem; }
-  .h-6-xl{ height: 1.5rem; }
-  .h-8-xl{ height: 2rem; }
-  .h-10-xl{ height: 2.5rem; }
+  .h-1-xl {
+    height: 0.25rem;
+  }
+  .h-2-xl {
+    height: 0.5rem;
+  }
+  .h-3-xl {
+    height: 0.75rem;
+  }
+  .h-4-xl {
+    height: 1rem;
+  }
+  .h-5-xl {
+    height: 1.25rem;
+  }
+  .h-6-xl {
+    height: 1.5rem;
+  }
+  .h-8-xl {
+    height: 2rem;
+  }
+  .h-10-xl {
+    height: 2.5rem;
+  }
 
   /* Width */
-  .w-1-xl{ width: 0.25rem; }
-  .w-2-xl{ width: 0.5rem; }
-  .w-3-xl{ width: 0.75rem; }
-  .w-4-xl{ width: 1rem; }
-  .w-5-xl{ width: 1.25rem; }
-  .w-6-xl{ width: 1.5rem; }
-  .w-8-xl{ width: 2rem; }
-  .w-10-xl{ width: 2.5rem; }
+  .w-1-xl {
+    width: 0.25rem;
+  }
+  .w-2-xl {
+    width: 0.5rem;
+  }
+  .w-3-xl {
+    width: 0.75rem;
+  }
+  .w-4-xl {
+    width: 1rem;
+  }
+  .w-5-xl {
+    width: 1.25rem;
+  }
+  .w-6-xl {
+    width: 1.5rem;
+  }
+  .w-8-xl {
+    width: 2rem;
+  }
+  .w-10-xl {
+    width: 2.5rem;
+  }
 }
 
-
 /* ------------------------Text------------------------- */
 @media (min-width: 576px) {
-  .fs-sm-1 { font-size: calc(1.3rem + 1.6vw) !important; }
-  .fs-sm-2 { font-size: calc(1.2rem + 1.2vw) !important; }
-  .fs-sm-3 { font-size: calc(1.1rem + 0.8vw) !important; }
-  .fs-sm-4 { font-size: calc(1rem + 0.5vw) !important; }
-  .fs-sm-5 { font-size: 1.05rem !important; }
-  .fs-sm-6 { font-size: 0.9rem !important; }
+  .fs-sm-1 {
+    font-size: calc(1.3rem + 1.6vw) !important;
+  }
+  .fs-sm-2 {
+    font-size: calc(1.2rem + 1.2vw) !important;
+  }
+  .fs-sm-3 {
+    font-size: calc(1.1rem + 0.8vw) !important;
+  }
+  .fs-sm-4 {
+    font-size: calc(1rem + 0.5vw) !important;
+  }
+  .fs-sm-5 {
+    font-size: 1.05rem !important;
+  }
+  .fs-sm-6 {
+    font-size: 0.9rem !important;
+  }
 
-  .fs-sm-tiny   { font-size: 72% !important; }
-  .fs-sm-big    { font-size: 115% !important; }
-  .fs-sm-large  { font-size: 155% !important; }
-  .fs-sm-xlarge { font-size: 175% !important; }
-  .fs-sm-xxlarge { font-size: calc(1.6rem + 3.5vw) !important; }
+  .fs-sm-tiny {
+    font-size: 72% !important;
+  }
+  .fs-sm-big {
+    font-size: 115% !important;
+  }
+  .fs-sm-large {
+    font-size: 155% !important;
+  }
+  .fs-sm-xlarge {
+    font-size: 175% !important;
+  }
+  .fs-sm-xxlarge {
+    font-size: calc(1.6rem + 3.5vw) !important;
+  }
 }
 
 /* 💻 Medium devices (≥768px) */
 @media (min-width: 768px) {
-  .fs-md-1 { font-size: calc(1.4125rem + 1.95vw) !important; }
-  .fs-md-2 { font-size: calc(1.3625rem + 1.35vw) !important; }
-  .fs-md-3 { font-size: calc(1.3rem + 0.6vw) !important; }
-  .fs-md-4 { font-size: calc(1.275rem + 0.3vw) !important; }
-  .fs-md-5 { font-size: 1.125rem !important; }
-  .fs-md-6 { font-size: 0.9375rem !important; }
+  .fs-md-1 {
+    font-size: calc(1.4125rem + 1.95vw) !important;
+  }
+  .fs-md-2 {
+    font-size: calc(1.3625rem + 1.35vw) !important;
+  }
+  .fs-md-3 {
+    font-size: calc(1.3rem + 0.6vw) !important;
+  }
+  .fs-md-4 {
+    font-size: calc(1.275rem + 0.3vw) !important;
+  }
+  .fs-md-5 {
+    font-size: 1.125rem !important;
+  }
+  .fs-md-6 {
+    font-size: 0.9375rem !important;
+  }
 
-  .fs-md-tiny   { font-size: 70% !important; }
-  .fs-md-big    { font-size: 112% !important; }
-  .fs-md-large  { font-size: 150% !important; }
-  .fs-md-xlarge { font-size: 170% !important; }
-  .fs-md-xxlarge { font-size: calc(1.725rem + 5.7vw) !important; }
+  .fs-md-tiny {
+    font-size: 70% !important;
+  }
+  .fs-md-big {
+    font-size: 112% !important;
+  }
+  .fs-md-large {
+    font-size: 150% !important;
+  }
+  .fs-md-xlarge {
+    font-size: 170% !important;
+  }
+  .fs-md-xxlarge {
+    font-size: calc(1.725rem + 5.7vw) !important;
+  }
+}
+
+.viewPage {
+  height: calc(100vh - 80px);
+  overflow-y: auto;
+  overflow-x: hidden;
 }

From 3a1aac8834ae96ca2ed98b4989865176314aa126 Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Mon, 8 Dec 2025 18:13:17 +0530
Subject: [PATCH 3/4] Updation at Projects Completion Status when nothing is
 zero nothing is show.

---
 src/components/Charts/HorizontalBarChart.jsx  |  7 ++++++-
 .../Dashboard/ProjectCompletionChart.jsx      | 19 +++++++++++--------
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/components/Charts/HorizontalBarChart.jsx b/src/components/Charts/HorizontalBarChart.jsx
index c28778fc..99a924f0 100644
--- a/src/components/Charts/HorizontalBarChart.jsx
+++ b/src/components/Charts/HorizontalBarChart.jsx
@@ -42,7 +42,12 @@ const HorizontalBarChart = ({
     categories.length === seriesData.length;
 
   if (!hasValidData) {
-    return <div className="text-center text-gray-500">No data to display</div>;
+    return <div
+      className="d-flex justify-content-center align-items-center text-muted"
+      style={{ height: "300px" }}
+    >
+      No data found
+    </div>
   }
   // Combine seriesData and categories, then sort in descending order
   const combined = seriesData.map((value, index) => ({
diff --git a/src/components/Dashboard/ProjectCompletionChart.jsx b/src/components/Dashboard/ProjectCompletionChart.jsx
index f1f63936..3b0ac27f 100644
--- a/src/components/Dashboard/ProjectCompletionChart.jsx
+++ b/src/components/Dashboard/ProjectCompletionChart.jsx
@@ -12,14 +12,17 @@ const ProjectCompletionChart = () => {
     isError,
     error,
   } = useProjectCompletionStatus();
-  const projectNames = projects?.map((p) => p.name) || [];
-  const projectProgress =
-    projects?.map((p) => {
-      const completed = p.completedWork || 0;
-      const planned = p.plannedWork || 1;
-      const percent = planned ? (completed / planned) * 100 : 0;
-      return Math.min(Math.round(percent), 100);
-    }) || [];
+  const filteredProjects = projects?.filter((p) => p.completedWork > 0) || [];
+
+  const projectNames = filteredProjects.map((p) => p.name);
+  
+  const projectProgress = filteredProjects.map((p) => {
+  const completed = p.completedWork || 0;
+  const planned = p.plannedWork || 1;
+  const percent = planned ? (completed / planned) * 100 : 0;
+  return Math.min(parseFloat(percent.toFixed(2)), 100); // limit to 2 decimals
+});
+
 
   return (
     <div className="card h-100">

From 4a47b1d0fa56a48fb95ffe969a8aeb151a49ea57 Mon Sep 17 00:00:00 2001
From: "pramod.mahajan" <pramod.mahajan@marcoaiot.com>
Date: Tue, 9 Dec 2025 14:26:18 +0530
Subject: [PATCH 4/4] removed console and added none option for groupping for
 Expense list

---
 src/components/Dashboard/Dashboard.jsx        |   1 -
 .../Expenses/ExpenseFilterPanel.jsx           | 541 +++++++++---------
 src/components/Expenses/ExpenseList.jsx       | 205 ++++---
 src/components/Tenant/OrganizationInfo.jsx    |   1 -
 src/components/common/Error.jsx               |   1 -
 src/hooks/useDocument.js                      |   2 -
 src/pages/Expense/ExpensePage.jsx             |   2 +-
 7 files changed, 398 insertions(+), 355 deletions(-)

diff --git a/src/components/Dashboard/Dashboard.jsx b/src/components/Dashboard/Dashboard.jsx
index dbedb169..534fb43f 100644
--- a/src/components/Dashboard/Dashboard.jsx
+++ b/src/components/Dashboard/Dashboard.jsx
@@ -37,7 +37,6 @@ const Dashboard = () => {
   const canSelfAttendance = useHasUserPermission(SELF_ATTENDANCE);
 
   const { data,isLoading,isError } = useGetCollectionOverview();
-  console.log("data-->", data);
   return (
     <div className="container-fluid mt-5">
       <div className="row gy-4">
diff --git a/src/components/Expenses/ExpenseFilterPanel.jsx b/src/components/Expenses/ExpenseFilterPanel.jsx
index 61583902..88dc7ccd 100644
--- a/src/components/Expenses/ExpenseFilterPanel.jsx
+++ b/src/components/Expenses/ExpenseFilterPanel.jsx
@@ -1,4 +1,10 @@
-import React, { forwardRef, useEffect, useImperativeHandle, useState, useMemo } from "react";
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useState,
+  useMemo,
+} from "react";
 import { FormProvider, useForm, Controller } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { defaultFilter, SearchSchema } from "./ExpenseSchema";
@@ -15,282 +21,291 @@ import { useExpenseFilter } from "../../hooks/useExpense";
 import { ExpenseFilterSkeleton } from "./ExpenseSkeleton";
 import { useLocation, useNavigate, useParams } from "react-router-dom";
 
-const ExpenseFilterPanel = forwardRef(({ onApply, handleGroupBy, setFilterdata }, ref) => {
-  const { status } = useParams();
-  const navigate = useNavigate();
-  const selectedProjectId = useSelector(
-    (store) => store.localVariables.projectId
-  );
-  const { data, isLoading, isError, error, isFetching, isFetched } =
-    useExpenseFilter();
+const ExpenseFilterPanel = forwardRef(
+  ({ onApply, handleGroupBy, setFilterdata }, ref) => {
+    const { status } = useParams();
+    const navigate = useNavigate();
+    const selectedProjectId = useSelector(
+      (store) => store.localVariables.projectId
+    );
+    const { data, isLoading, isError, error, isFetching, isFetched } =
+      useExpenseFilter();
 
-  const groupByList = useMemo(() => {
-    return [
-      { id: "transactionDate", name: "Transaction Date" },
-      { id: "status", name: "Status" },
-      { id: "submittedBy", name: "Submitted By" },
-      { id: "project", name: "Project" },
-      { id: "paymentMode", name: "Payment Mode" },
-      { id: "expenseCategory", name: "Expense Category" },
-      { id: "createdAt", name: "Submitted Date" },
-    ].sort((a, b) => a.name.localeCompare(b.name));
-  }, []);
+    const groupByList = useMemo(() => {
+      return [
+        { id: "none", name: "None" },
+        { id: "transactionDate", name: "Transaction Date" },
+        { id: "status", name: "Status" },
+        { id: "submittedBy", name: "Submitted By" },
+        { id: "project", name: "Project" },
+        { id: "paymentMode", name: "Payment Mode" },
+        { id: "expenseCategory", name: "Expense Category" },
+        { id: "createdAt", name: "Submitted Date" },
+      ].sort((a, b) => a.name.localeCompare(b.name));
+    }, []);
 
-  const [selectedGroup, setSelectedGroup] = useState(groupByList[6]);
-  const [resetKey, setResetKey] = useState(0);
+    const [selectedGroup, setSelectedGroup] = useState(groupByList[0]);
+    const [resetKey, setResetKey] = useState(0);
 
-  const dynamicDefaultFilter = useMemo(() => {
-    return {
-      ...defaultFilter,
-      statusIds: status ? [status] : defaultFilter.statusIds || [],
-      projectIds: defaultFilter.projectIds || [],
-      createdByIds: defaultFilter.createdByIds || [],
-      paidById: defaultFilter.paidById || [],
-      expenseCategoryIds: defaultFilter.expenseCategoryIds || [],
-      isTransactionDate: defaultFilter.isTransactionDate ?? true,
-      startDate: defaultFilter.startDate,
-      endDate: defaultFilter.endDate,
-    };
-  }, [status, selectedProjectId]);
-
-  const methods = useForm({
-    resolver: zodResolver(SearchSchema),
-    defaultValues: dynamicDefaultFilter,
-  });
-
-  const { control, handleSubmit, reset, setValue, watch } = methods;
-  const isTransactionDate = watch("isTransactionDate");
-
-  const closePanel = () => {
-    document.querySelector(".offcanvas.show .btn-close")?.click();
-  };
-
-  // Change here
-  useEffect(() => {
-    if (data && setFilterdata) {
-      setFilterdata(data);
-    }
-  }, [data, setFilterdata]);
-
-  const handleGroupChange = (e) => {
-    const group = groupByList.find((g) => g.id === e.target.value);
-    if (group) setSelectedGroup(group);
-  };
-
-  useImperativeHandle(ref, () => ({
-    resetFieldValue: (name, value) => {
-      // Reset specific field
-      if (value !== undefined) {
-        setValue(name, value);
-      } else {
-        reset({ ...methods.getValues(), [name]: defaultFilter[name] });
-      }
-    },
-    getValues: methods.getValues, // optional, to read current filter state
-  }));
-
-  const onSubmit = (formData) => {
-    onApply({
-      ...formData,
-      startDate: moment.utc(formData.startDate, "DD-MM-YYYY").toISOString(),
-      endDate: moment.utc(formData.endDate, "DD-MM-YYYY").toISOString(),
-    });
-    handleGroupBy(selectedGroup.id);
-    // closePanel();
-  };
-
-  const onClear = () => {
-    reset(defaultFilter);
-    setResetKey((prev) => prev + 1);
-    setSelectedGroup(groupByList[0]);
-    onApply(defaultFilter);
-    handleGroupBy(groupByList[0].id);
-    // closePanel();
-    if (status) {
-      navigate("/expenses", { replace: true });
-    }
-  };
-
-  const location = useLocation();
-  useEffect(() => {
-    closePanel();
-  }, [location]);
-
-  const [appliedStatusId, setAppliedStatusId] = useState(null);
-
-  useEffect(() => {
-    if (!status || !data) return;
-
-    if (status !== appliedStatusId) {
-      const filterWithStatus = {
-        ...dynamicDefaultFilter,
-        projectIds: selectedProjectId ? [selectedProjectId] : dynamicDefaultFilter.projectIds || [],
-        startDate: dynamicDefaultFilter.startDate
-          ? moment.utc(dynamicDefaultFilter.startDate, "DD-MM-YYYY").toISOString()
-          : undefined,
-        endDate: dynamicDefaultFilter.endDate
-          ? moment.utc(dynamicDefaultFilter.endDate, "DD-MM-YYYY").toISOString()
-          : undefined,
+    const dynamicDefaultFilter = useMemo(() => {
+      return {
+        ...defaultFilter,
+        statusIds: status ? [status] : defaultFilter.statusIds || [],
+        projectIds: defaultFilter.projectIds || [],
+        createdByIds: defaultFilter.createdByIds || [],
+        paidById: defaultFilter.paidById || [],
+        expenseCategoryIds: defaultFilter.expenseCategoryIds || [],
+        isTransactionDate: defaultFilter.isTransactionDate ?? true,
+        startDate: defaultFilter.startDate,
+        endDate: defaultFilter.endDate,
       };
+    }, [status, selectedProjectId]);
 
-      onApply(filterWithStatus);
+    const methods = useForm({
+      resolver: zodResolver(SearchSchema),
+      defaultValues: dynamicDefaultFilter,
+    });
+
+    const { control, handleSubmit, reset, setValue, watch } = methods;
+    const isTransactionDate = watch("isTransactionDate");
+
+    const closePanel = () => {
+      document.querySelector(".offcanvas.show .btn-close")?.click();
+    };
+
+    // Change here
+    useEffect(() => {
+      if (data && setFilterdata) {
+        setFilterdata(data);
+      }
+    }, [data, setFilterdata]);
+
+    const handleGroupChange = (e) => {
+      const group = groupByList.find((g) => g.id === e.target.value);
+      if (group) setSelectedGroup(group);
+    };
+
+    useImperativeHandle(ref, () => ({
+      resetFieldValue: (name, value) => {
+        // Reset specific field
+        if (value !== undefined) {
+          setValue(name, value);
+        } else {
+          reset({ ...methods.getValues(), [name]: defaultFilter[name] });
+        }
+      },
+      getValues: methods.getValues, // optional, to read current filter state
+    }));
+
+    const onSubmit = (formData) => {
+      onApply({
+        ...formData,
+        startDate: moment.utc(formData.startDate, "DD-MM-YYYY").toISOString(),
+        endDate: moment.utc(formData.endDate, "DD-MM-YYYY").toISOString(),
+      });
       handleGroupBy(selectedGroup.id);
-      setAppliedStatusId(status);
-    }
-  }, [
-    status,
-    data,
-    dynamicDefaultFilter,
-    onApply,
-    handleGroupBy,
-    selectedGroup.id,
-    appliedStatusId,
-    selectedProjectId, 
-  ]);
+      // closePanel();
+    };
 
-  if (isLoading || isFetching) return <ExpenseFilterSkeleton />;
-  if (isError && isFetched)
-    return <div>Something went wrong Here- {error.message} </div>;
+    const onClear = () => {
+      reset(defaultFilter);
+      setResetKey((prev) => prev + 1);
+      setSelectedGroup(groupByList[0]);
+      onApply(defaultFilter);
+      handleGroupBy(groupByList[0].id);
+      // closePanel();
+      if (status) {
+        navigate("/expenses", { replace: true });
+      }
+    };
 
+    const location = useLocation();
+    useEffect(() => {
+      closePanel();
+    }, [location]);
 
+    const [appliedStatusId, setAppliedStatusId] = useState(null);
 
-  return (
-    <>
-      <FormProvider {...methods}>
-        <form onSubmit={handleSubmit(onSubmit)} className="p-2 text-start">
-          <div className="mb-3 w-100">
-            <div className="d-flex align-items-center mb-2">
-              <label className="form-label me-2">Filter By:</label>
-              <div className="d-inline-flex border rounded-pill mb-1 overflow-hidden shadow-none">
-                <button
-                  type="button"
-                  className={`btn px-2 py-1 rounded-0 text-tiny ${isTransactionDate ? "active btn-primary text-white" : ""
+    useEffect(() => {
+      if (!status || !data) return;
+
+      if (status !== appliedStatusId) {
+        const filterWithStatus = {
+          ...dynamicDefaultFilter,
+          projectIds: selectedProjectId
+            ? [selectedProjectId]
+            : dynamicDefaultFilter.projectIds || [],
+          startDate: dynamicDefaultFilter.startDate
+            ? moment
+                .utc(dynamicDefaultFilter.startDate, "DD-MM-YYYY")
+                .toISOString()
+            : undefined,
+          endDate: dynamicDefaultFilter.endDate
+            ? moment
+                .utc(dynamicDefaultFilter.endDate, "DD-MM-YYYY")
+                .toISOString()
+            : undefined,
+        };
+
+        onApply(filterWithStatus);
+        handleGroupBy(selectedGroup.id);
+        setAppliedStatusId(status);
+      }
+    }, [
+      status,
+      data,
+      dynamicDefaultFilter,
+      onApply,
+      handleGroupBy,
+      selectedGroup.id,
+      appliedStatusId,
+      selectedProjectId,
+    ]);
+
+    if (isLoading || isFetching) return <ExpenseFilterSkeleton />;
+    if (isError && isFetched)
+      return <div>Something went wrong Here- {error.message} </div>;
+
+    return (
+      <>
+        <FormProvider {...methods}>
+          <form onSubmit={handleSubmit(onSubmit)} className="p-2 text-start">
+            <div className="mb-3 w-100">
+              <div className="d-flex align-items-center mb-2">
+                <label className="form-label me-2">Filter By:</label>
+                <div className="d-inline-flex border rounded-pill mb-1 overflow-hidden shadow-none">
+                  <button
+                    type="button"
+                    className={`btn px-2 py-1 rounded-0 text-tiny ${
+                      isTransactionDate ? "active btn-primary text-white" : ""
                     }`}
-                  onClick={() => setValue("isTransactionDate", true)}
-                >
-                  Transaction Date
-                </button>
-                <button
-                  type="button"
-                  className={`btn px-2 py-1 rounded-0 text-tiny ${!isTransactionDate ? "active btn-primary text-white" : ""
+                    onClick={() => setValue("isTransactionDate", true)}
+                  >
+                    Transaction Date
+                  </button>
+                  <button
+                    type="button"
+                    className={`btn px-2 py-1 rounded-0 text-tiny ${
+                      !isTransactionDate ? "active btn-primary text-white" : ""
                     }`}
-                  onClick={() => setValue("isTransactionDate", false)}
-                >
-                  Submitted Date
-                </button>
+                    onClick={() => setValue("isTransactionDate", false)}
+                  >
+                    Submitted Date
+                  </button>
+                </div>
+              </div>
+              <DateRangePicker1
+                placeholder="DD-MM-YYYY To DD-MM-YYYY"
+                startField="startDate"
+                endField="endDate"
+                resetSignal={resetKey}
+                defaultRange={false}
+                maxDate={new Date()}
+                className="w-100"
+              />
+            </div>
+
+            <div className="row g-2">
+              <SelectMultiple
+                name="projectIds"
+                label="Projects :"
+                options={data.projects}
+                labelKey="name"
+                valueKey="id"
+              />
+              <SelectMultiple
+                name="createdByIds"
+                label="Submitted By :"
+                options={data.createdBy}
+                labelKey={(item) => item.name}
+                valueKey="id"
+              />
+              <SelectMultiple
+                name="paidById"
+                label="Paid By :"
+                options={data.paidBy}
+                labelKey={(item) => item.name}
+                valueKey="id"
+              />
+              <SelectMultiple
+                name="expenseCategoryIds"
+                label="Category :"
+                options={data.expenseCategory}
+                labelKey={(item) => item.name}
+                valueKey="id"
+              />
+
+              <div className="mb-3">
+                <label className="form-label">Status :</label>
+                <div className="row flex-wrap">
+                  {data?.status
+                    ?.slice()
+                    .sort((a, b) => a.name.localeCompare(b.name))
+                    .map((status) => (
+                      <div className="col-6" key={status.id}>
+                        <Controller
+                          control={control}
+                          name="statusIds"
+                          render={({ field: { value = [], onChange } }) => (
+                            <div className="d-flex align-items-center me-3 mb-2">
+                              <input
+                                type="checkbox"
+                                className="form-check-input"
+                                value={status.id}
+                                checked={value.includes(status.id)}
+                                onChange={(e) => {
+                                  const checked = e.target.checked;
+                                  onChange(
+                                    checked
+                                      ? [...value, status.id]
+                                      : value.filter((v) => v !== status.id)
+                                  );
+                                }}
+                              />
+                              <label className="ms-2 mb-0">{status.name}</label>
+                            </div>
+                          )}
+                        />
+                      </div>
+                    ))}
+                </div>
               </div>
             </div>
-            <DateRangePicker1
-              placeholder="DD-MM-YYYY To DD-MM-YYYY"
-              startField="startDate"
-              endField="endDate"
-              resetSignal={resetKey}
-              defaultRange={false}
-              maxDate={new Date()}
-              className="w-100"
-            />
-          </div>
-
-          <div className="row g-2">
-            <SelectMultiple
-              name="projectIds"
-              label="Projects :"
-              options={data.projects}
-              labelKey="name"
-              valueKey="id"
-            />
-            <SelectMultiple
-              name="createdByIds"
-              label="Submitted By :"
-              options={data.createdBy}
-              labelKey={(item) => item.name}
-              valueKey="id"
-            />
-            <SelectMultiple
-              name="paidById"
-              label="Paid By :"
-              options={data.paidBy}
-              labelKey={(item) => item.name}
-              valueKey="id"
-            />
-            <SelectMultiple
-              name="expenseCategoryIds"
-              label="Category :"
-              options={data.expenseCategory}
-              labelKey={(item) => item.name}
-              valueKey="id"
-            />
-
-            <div className="mb-3">
-              <label className="form-label">Status :</label>
-              <div className="row flex-wrap">
-                {data?.status
-                  ?.slice()
-                  .sort((a, b) => a.name.localeCompare(b.name))
-                  .map((status) => (
-                    <div className="col-6" key={status.id}>
-                      <Controller
-                        control={control}
-                        name="statusIds"
-                        render={({ field: { value = [], onChange } }) => (
-                          <div className="d-flex align-items-center me-3 mb-2">
-                            <input
-                              type="checkbox"
-                              className="form-check-input"
-                              value={status.id}
-                              checked={value.includes(status.id)}
-                              onChange={(e) => {
-                                const checked = e.target.checked;
-                                onChange(
-                                  checked
-                                    ? [...value, status.id]
-                                    : value.filter((v) => v !== status.id)
-                                );
-                              }}
-                            />
-                            <label className="ms-2 mb-0">{status.name}</label>
-                          </div>
-                        )}
-                      />
-                    </div>
-                  ))}
-              </div>
+            <div className="mb-2 text-start ">
+              <label htmlFor="groupBySelect" className="form-label">
+                Group By :
+              </label>
+              <select
+                id="groupBySelect"
+                className="form-select form-select-sm"
+                value={selectedGroup?.id || "none"}
+                onChange={handleGroupChange}
+              >
+                {groupByList.map((group) => (
+                  <option key={group.id} value={group.id}>
+                    {group.name}
+                  </option>
+                ))}
+              </select>
             </div>
-          </div>
-          <div className="mb-2 text-start ">
-            <label htmlFor="groupBySelect" className="form-label">
-              Group By :
-            </label>
-            <select
-              id="groupBySelect"
-              className="form-select form-select-sm"
-              value={selectedGroup?.id || ""}
-              onChange={handleGroupChange}
-            >
-              {groupByList.map((group) => (
-                <option key={group.id} value={group.id}>
-                  {group.name}
-                </option>
-              ))}
-            </select>
-          </div>
 
-          <div className="d-flex justify-content-end py-3 gap-2">
-            <button
-              type="button"
-              className="btn btn-label-secondary btn-sm"
-              onClick={onClear}
-            >
-              Clear
-            </button>
-            <button type="submit" className="btn btn-primary btn-sm">
-              Apply
-            </button>
-          </div>
-        </form>
-      </FormProvider>
-    </>
-  );
-});
+            <div className="d-flex justify-content-end py-3 gap-2">
+              <button
+                type="button"
+                className="btn btn-label-secondary btn-sm"
+                onClick={onClear}
+              >
+                Clear
+              </button>
+              <button type="submit" className="btn btn-primary btn-sm">
+                Apply
+              </button>
+            </div>
+          </form>
+        </FormProvider>
+      </>
+    );
+  }
+);
 
-export default ExpenseFilterPanel;
\ No newline at end of file
+export default ExpenseFilterPanel;
diff --git a/src/components/Expenses/ExpenseList.jsx b/src/components/Expenses/ExpenseList.jsx
index c1bf72f0..b274b4ce 100644
--- a/src/components/Expenses/ExpenseList.jsx
+++ b/src/components/Expenses/ExpenseList.jsx
@@ -23,8 +23,15 @@ import { useSelector } from "react-redux";
 import ExpenseFilterChips from "./ExpenseFilterChips";
 import { defaultFilter } from "./ExpenseSchema";
 import { useNavigate } from "react-router-dom";
+import { displayName } from "react-quill";
 
-const ExpenseList = ({ filters, groupBy = "transactionDate", searchText, tableRef, onDataFiltered }) => {
+const ExpenseList = ({
+  filters,
+  groupBy,
+  searchText,
+  tableRef,
+  onDataFiltered,
+}) => {
   const [deletingId, setDeletingId] = useState(null);
   const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const {
@@ -46,7 +53,7 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText, tableRe
     filters,
     debouncedSearch
   );
-  
+
   useEffect(() => {
     if (onDataFiltered) {
       onDataFiltered(data?.data ?? []);
@@ -76,55 +83,65 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText, tableRe
     }
   };
 
-  const groupByField = (items, field) => {
-    return items.reduce((acc, item) => {
-      let key;
-      let displayField;
-
-      switch (field) {
-        case "transactionDate":
-          key = formatUTCToLocalTime(item?.transactionDate);
-          displayField = "Transaction Date";
-          break;
-        case "status":
-          key = item?.status?.displayName || "Unknown";
-          displayField = "Status";
-          break;
-        case "submittedBy":
-          key = `${item?.createdBy?.firstName ?? ""} ${item.createdBy?.lastName ?? ""
-            }`.trim();
-          displayField = "Submitted By";
-          break;
-        case "project":
-          key = item?.project?.name || "Unknown Project";
-          displayField = "Project";
-          break;
-        case "paymentMode":
-          key = item?.paymentMode?.name || "Unknown Mode";
-          displayField = "Payment Mode";
-          break;
-        case "expenseCategory":
-          key = item?.expenseCategory?.name || "Unknown Type";
-          displayField = "Expense Category";
-          break;
-        case "createdAt":
-          key = item?.createdAt?.split("T")[0] || "Unknown Date";
-          displayField = "Created Date";
-          break;
-        default:
-          key = "Others";
-          displayField = "Others";
+const groupByField = (items, field) => {
+  if (!field || field === "none") {
+    return {
+      All: {
+        key: "All",
+        displayField: "All",
+        items: items || []
       }
+    };
+  }
 
-      const groupKey = `${field}_${key}`; // unique key for object property
-      if (!acc[groupKey]) {
-        acc[groupKey] = { key, displayField, items: [] };
-      }
+  return items.reduce((acc, item) => {
+    let key;
+    let displayField;
+
+    switch (field) {
+      case "transactionDate":
+        key = formatUTCToLocalTime(item?.transactionDate);
+        displayField = "Transaction Date";
+        break;
+      case "status":
+        key = item?.status?.displayName || "Unknown";
+        displayField = "Status";
+        break;
+      case "submittedBy":
+        key = `${item?.createdBy?.firstName ?? ""} ${item?.createdBy?.lastName ?? ""}`.trim();
+        displayField = "Submitted By";
+        break;
+      case "project":
+        key = item?.project?.name || "Unknown Project";
+        displayField = "Project";
+        break;
+      case "paymentMode":
+        key = item?.paymentMode?.name || "Unknown Mode";
+        displayField = "Payment Mode";
+        break;
+      case "expenseCategory":
+        key = item?.expenseCategory?.name || "Unknown Type";
+        displayField = "Expense Category";
+        break;
+      case "createdAt":
+        key = item?.createdAt?.split("T")[0] || "Unknown Date";
+        displayField = "Created Date";
+        break;
+      default:
+        key = "Others";
+        displayField = "Others";
+    }
+
+    const groupKey = `${field}_${key}`;
+    if (!acc[groupKey]) {
+      acc[groupKey] = { key, displayField, items: [] };
+    }
+
+    acc[groupKey].items.push(item);
+    return acc;
+  }, {});
+};
 
-      acc[groupKey].items.push(item);
-      return acc;
-    }, {});
-  };
 
   const expenseColumns = [
     {
@@ -150,8 +167,9 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText, tableRe
       label: "Submitted By",
       align: "text-start",
       getValue: (e) =>
-        `${e.createdBy?.firstName ?? ""} ${e.createdBy?.lastName ?? ""
-          }`.trim() || "N/A",
+        `${e.createdBy?.firstName ?? ""} ${
+          e.createdBy?.lastName ?? ""
+        }`.trim() || "N/A",
       customRender: (e) => (
         <div
           className="d-flex align-items-center cursor-pointer"
@@ -164,8 +182,9 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText, tableRe
             lastName={e.createdBy?.lastName}
           />
           <span className="text-truncate">
-            {`${e.createdBy?.firstName ?? ""} ${e.createdBy?.lastName ?? ""
-              }`.trim() || "N/A"}
+            {`${e.createdBy?.firstName ?? ""} ${
+              e.createdBy?.lastName ?? ""
+            }`.trim() || "N/A"}
           </span>
         </div>
       ),
@@ -197,8 +216,9 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText, tableRe
       align: "text-center",
       getValue: (e) => (
         <span
-          className={`badge bg-label-${getColorNameFromHex(e?.status?.color) || "secondary"
-            }`}
+          className={`badge bg-label-${
+            getColorNameFromHex(e?.status?.color) || "secondary"
+          }`}
         >
           {e.status?.name || "Unknown"}
         </span>
@@ -218,12 +238,18 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText, tableRe
     return <ExpenseTableSkeleton headers={headers} />;
   if (isError) return <div>{error?.message}</div>;
 
-  const grouped = groupBy
-    ? groupByField(data?.data ?? [], groupBy)
-    : { All: data?.data ?? [] };
+const isNoGrouping = !groupBy || groupBy === "none";
+const grouped = isNoGrouping
+  ? { All: { key: "All", displayField: "All", items: data?.data ?? [] } }
+  : groupByField(data?.data ?? [], groupBy);
+
+
+
+
   const IsGroupedByDate = [
+    {key:"none",displayField:"None"},
     { key: "transactionDate", displayField: "Transaction Date" },
-    { key: "createdAt", displayField: "created Date" },
+    { key: "createdAt", displayField: "created Date", },
   ]?.includes(groupBy);
 
   const canEditExpense = (expense) => {
@@ -264,7 +290,8 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText, tableRe
           groupBy={groupBy}
         />
         <div
-          className="card-datatable table-responsive" ref={tableRef}
+          className="card-datatable table-responsive"
+          ref={tableRef}
           id="horizontal-example"
         >
           <div className="dataTables_wrapper no-footer px-2 ">
@@ -292,21 +319,23 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText, tableRe
                 {Object.keys(grouped).length > 0 ? (
                   Object.values(grouped).map(({ key, displayField, items }) => (
                     <React.Fragment key={key}>
-                      <tr className="tr-group text-dark">
-                        <td colSpan={8} className="text-start">
-                          <div className="d-flex align-items-center px-2">
-                            {" "}
-                            <small className="fs-6 py-1">
-                              {displayField} :{" "}
-                            </small>{" "}
-                            <small className="fs-6  ms-3">
-                              {IsGroupedByDate
-                                ? formatUTCToLocalTime(key)
-                                : key}
-                            </small>
-                          </div>
-                        </td>
-                      </tr>
+                      {!isNoGrouping && (
+                        <tr className="tr-group text-dark">
+                          <td colSpan={8} className="text-start">
+                            <div className="d-flex align-items-center px-2">
+                              {" "}
+                              <small className="fs-6 py-1">
+                                {displayField} :{" "}
+                              </small>{" "}
+                              <small className="fs-6  ms-3">
+                                {IsGroupedByDate
+                                  ? formatUTCToLocalTime(key)
+                                  : key}
+                              </small>
+                            </div>
+                          </td>
+                        </tr>
+                      )}
                       {items?.map((expense) => (
                         <tr key={expense.id}>
                           {expenseColumns.map(
@@ -314,22 +343,26 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText, tableRe
                               (col.isAlwaysVisible || groupBy !== col.key) && (
                                 <td
                                   key={col.key}
-                                  className={`d-table-cell ml-2  ${col.align ?? ""
-                                    } `}
+                                  className={`d-table-cell ml-2  ${
+                                    col.align ?? ""
+                                  } `}
                                 >
                                   <div
-                                    className={`d-flex px-2 ${col.key === "status"
-                                      ? "justify-content-center"
-                                      : ""
-                                      }
-                                 ${col.key === "amount"
-                                        ? "justify-content-end"
-                                        : ""
-                                      }
-                                 ${col.key === "submitted"
+                                    className={`d-flex px-2 ${
+                                      col.key === "status"
                                         ? "justify-content-center"
                                         : ""
-                                      }
+                                    }
+                                 ${
+                                   col.key === "amount"
+                                     ? "justify-content-end"
+                                     : ""
+                                 }
+                                 ${
+                                   col.key === "submitted"
+                                     ? "justify-content-center"
+                                     : ""
+                                 }
                                  `}
                                   >
                                     {col.customRender
diff --git a/src/components/Tenant/OrganizationInfo.jsx b/src/components/Tenant/OrganizationInfo.jsx
index 7bbf26b2..aef24325 100644
--- a/src/components/Tenant/OrganizationInfo.jsx
+++ b/src/components/Tenant/OrganizationInfo.jsx
@@ -57,7 +57,6 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
       // onNext();
       const tenantPayload = { ...data, onBoardingDate: moment.utc(data.onBoardingDate, "DD-MM-YYYY").toISOString() }
       // CreateTenant(tenantPayload);
-      console.log(tenantPayload)
     }
   };
 
diff --git a/src/components/common/Error.jsx b/src/components/common/Error.jsx
index 1e44947f..6ac47e4f 100644
--- a/src/components/common/Error.jsx
+++ b/src/components/common/Error.jsx
@@ -1,7 +1,6 @@
 import React from 'react'
 
 const Error = ({error,close}) => {
-  console.log(error)
   return (
       <div className="container text-center py-5">
       <h1 className="display-4 fw-bold text-danger">{error.statusCode || error?.response?.status
diff --git a/src/hooks/useDocument.js b/src/hooks/useDocument.js
index 5569d878..00b44ff4 100644
--- a/src/hooks/useDocument.js
+++ b/src/hooks/useDocument.js
@@ -124,7 +124,6 @@ export const useUploadDocument = (onSuccessCallBack) => {
       if (onSuccessCallBack) onSuccessCallBack();
     },
     onError: (error) => {
-      console.log(error);
       showToast(
         error.response.data.message ||
           "Something went wrong please try again !",
@@ -145,7 +144,6 @@ export const useUpdateDocument = (onSuccessCallBack) => {
       if (onSuccessCallBack) onSuccessCallBack();
     },
     onError: (error) => {
-      console.log(error);
       showToast(
         error.response.data.message ||
           "Something went wrong please try again !",
diff --git a/src/pages/Expense/ExpensePage.jsx b/src/pages/Expense/ExpensePage.jsx
index 0a9b1661..7a37fd34 100644
--- a/src/pages/Expense/ExpensePage.jsx
+++ b/src/pages/Expense/ExpensePage.jsx
@@ -50,7 +50,7 @@ const ExpensePage = () => {
   );
 
   const [filters, setFilters] = useState(defaultFilter);
-  const [groupBy, setGroupBy] = useState("transactionDate");
+  const [groupBy, setGroupBy] = useState("none");
   const [searchText, setSearchText] = useState("");
   const filterPanelRef = useRef();
   const [ManageExpenseModal, setManageExpenseModal] = useState({