Merge pull request 'Feature#791_ViewExpense : View Expense Detailas from calling expense details api' (#286) from Feature#791_ViewExpense into Feature_Expense

Reviewed-on: #286 merged
2025-07-23 12:11:18 +00:00 · 2025-07-23 12:11:18 +00:00 · 209e1341de
commit 209e1341de
parent fa9736b620 ab737a80d4
6 changed files with 248 additions and 87 deletions
--- a/src/components/Expenses/ExpenseList.jsx
+++ b/src/components/Expenses/ExpenseList.jsx
@ -190,7 +190,7 @@ const ExpenseList = () => {
                       <span
                        className="cursor-pointer"
                        onClick={() =>
-                          setViewExpense({ expenseId: expense, view: true })
+                          setViewExpense({ expenseId:expense.id, view: true })
                        }
                      >
                        <i className="bx bx-show text-primary "></i>
--- a/src/components/Expenses/PreviewDocument.jsx
+++ b/src/components/Expenses/PreviewDocument.jsx
@ -0,0 +1,28 @@
+import { useState } from 'react';
+
+const PreviewDocument = ({ imageUrl }) => {
+  const [loading, setLoading] = useState(true);
+
+  return (
+    <div className="d-flex justify-content-center align-items-center" style={{ minHeight: "50vh" }}>
+      {loading && (
+        <div className="text-secondary text-center mb-2">
+          Loading...
+        </div>
+      )}
+      <img
+        src={imageUrl}
+        alt="Full View"
+        className="img-fluid"
+        style={{
+          maxHeight: "100vh",
+          objectFit: "contain",
+          display: loading ? "none" : "block",
+        }}
+        onLoad={() => setLoading(false)}
+      />
+    </div>
+  );
+};
+
+export default PreviewDocument;
--- a/src/components/Expenses/ViewExpense.jsx
+++ b/src/components/Expenses/ViewExpense.jsx
@ -1,11 +1,16 @@
-import React from "react";
-import { useActionOnExpense } from "../../hooks/useExpense";
+import React, { useState } from "react";
+import { useActionOnExpense, useExpense } from "../../hooks/useExpense";
 import { formatUTCToLocalTime } from "../../utils/dateUtils";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { ActionSchema } from "./ExpenseSchema";
+import { useExpenseContext } from "../../pages/Expense/ExpensePage";

 const ViewExpense = ({ ExpenseId }) => {
+  const { data, isLoading, isError, error } = useExpense(ExpenseId);
+  const [imageLoaded, setImageLoaded] = useState({});
+  const { setDocumentView } = useExpenseContext();
+
  const {
    register,
    handleSubmit,
@ -31,6 +36,20 @@ const ViewExpense = ({ ExpenseId }) => {
    MakeAction(Payload);
  };

+  if (isLoading) {
+    return (
+      <div
+        className="d-flex justify-content-center align-items-center"
+        style={{ minHeight: "300px" }}
+      >
+        <div className="fs-5 text-muted">Loading...</div>
+      </div>
+    );
+  }
+  const handleImageLoad = (id) => {
+    setImageLoaded((prev) => ({ ...prev, [id]: true }));
+  };
+
  return (
    <form className="container px-3" onSubmit={handleSubmit(onSubmit)}>
      <div className="row mb-3">
@ -40,100 +59,175 @@ const ViewExpense = ({ ExpenseId }) => {
        </div>

        {/* Expense Info Rows */}
-        <div className="col-12 col-md-4 mb-3">
+        <div className="col-12 col-sm-6 col-md-4 mb-3">
          <div className="d-flex">
-            <label className="form-label me-2 mb-0 fw-semibold">Transaction Date :</label>
-            <div className="text-muted">{formatUTCToLocalTime(ExpenseId.transactionDate)}</div>
-          </div>
-        </div>
-
-        <div className="col-12 col-md-4 mb-3">
-          <div className="d-flex">
-            <label className="form-label me-2 mb-0 fw-semibold">Expense Type :</label>
-            <div className="text-muted">{ExpenseId.expensesType.name}</div>
-          </div>
-        </div>
-
-        <div className="col-12 col-md-4 mb-3">
-          <div className="d-flex">
-            <label className="form-label me-2 mb-0 fw-semibold">Supplier :</label>
-            <div className="text-muted">{ExpenseId.supplerName}</div>
-          </div>
-        </div>
-
-        <div className="col-12 col-md-4 mb-3">
-          <div className="d-flex">
-            <label className="form-label me-2 mb-0 fw-semibold">Amount :</label>
-            <div className="text-muted">₹ {ExpenseId.amount}</div>
-          </div>
-        </div>
-
-        <div className="col-12 col-md-4 mb-3">
-          <div className="d-flex">
-            <label className="form-label me-2 mb-0 fw-semibold">Payment Mode :</label>
-            <div className="text-muted">{ExpenseId.paymentMode.name}</div>
-          </div>
-        </div>
-
-        <div className="col-12 col-md-4 mb-3">
-          <div className="d-flex">
-            <label className="form-label me-2 mb-0 fw-semibold">Paid By :</label>
+            <label className="form-label me-2 mb-0 fw-semibold">
+              Transaction Date :
+            </label>
            <div className="text-muted">
-              {ExpenseId.paidBy.firstName} {ExpenseId.paidBy.lastName}
+              {formatUTCToLocalTime(data.transactionDate)}
            </div>
          </div>
        </div>

-        <div className="col-12 col-md-4 mb-3">
+        <div className="col-12  col-sm-6 col-md-4 mb-3">
+          <div className="d-flex">
+            <label className="form-label me-2 mb-0 fw-semibold">
+              Expense Type :
+            </label>
+            <div className="text-muted">{data.expensesType.name}</div>
+          </div>
+        </div>
+
+        <div className="col-12  col-sm-6 col-md-4 mb-3">
+          <div className="d-flex">
+            <label className="form-label me-2 mb-0 fw-semibold">
+              Supplier :
+            </label>
+            <div className="text-muted">{data.supplerName}</div>
+          </div>
+        </div>
+
+        <div className="col-12  col-sm-6 col-md-4 mb-3">
+          <div className="d-flex">
+            <label className="form-label me-2 mb-0 fw-semibold">Amount :</label>
+            <div className="text-muted">₹ {data.amount}</div>
+          </div>
+        </div>
+
+        <div className="col-12  col-sm-6 col-md-4 mb-3">
+          <div className="d-flex">
+            <label className="form-label me-2 mb-0 fw-semibold">
+              Payment Mode :
+            </label>
+            <div className="text-muted">{data.paymentMode.name}</div>
+          </div>
+        </div>
+
+        <div className="col-12  col-sm-6 col-md-4 mb-3">
+          <div className="d-flex">
+            <label className="form-label me-2 mb-0 fw-semibold">
+              Paid By :
+            </label>
+            <div className="text-muted">
+              {data.paidBy.firstName} {data.paidBy.lastName}
+            </div>
+          </div>
+        </div>
+
+        <div className="col-12  col-sm-6 col-md-4 mb-3">
          <div className="d-flex align-items-center">
            <label className="form-label me-2 mb-0 fw-semibold">Status :</label>
-            <span className="badge" style={{ backgroundColor: ExpenseId.status.color }}>
-              {ExpenseId.status.displayName}
+            <span
+              className="badge"
+              style={{ backgroundColor: data.status.color }}
+            >
+              {data.status.displayName}
            </span>
          </div>
        </div>

-        <div className="col-12 col-md-4 mb-3">
+        <div className="col-12  col-sm-6 col-md-4 mb-3">
          <div className="d-flex">
-            <label className="form-label me-2 mb-0 fw-semibold">Pre-Approved :</label>
-            <div className="text-muted">{ExpenseId.preApproved ? "Yes" : "No"}</div>
+            <label className="form-label me-2 mb-0 fw-semibold">
+              Pre-Approved :
+            </label>
+            <div className="text-muted">{data.preApproved ? "Yes" : "No"}</div>
          </div>
        </div>

-        <div className="col-12 col-md-4 mb-3">
+        <div className="col-12  col-sm-6 col-md-4 mb-3">
          <div className="d-flex">
-            <label className="form-label me-2 mb-0 fw-semibold">Project :</label>
-            <div className="text-muted text-start">{ExpenseId.project.name}</div>
+            <label className="form-label me-2 mb-0 fw-semibold">
+              Project :
+            </label>
+            <div className="text-muted text-start">{data.project.name}</div>
          </div>
        </div>

-        <div className="col-12 col-md-4 mb-3">
+        <div className="col-12  col-sm-6 col-md-4 mb-3">
          <div className="d-flex">
-            <label className="form-label me-2 mb-0 fw-semibold">Created By :</label>
+            <label className="form-label me-2 mb-0 fw-semibold">
+              Created By :
+            </label>
            <div className="text-muted">
-              {ExpenseId.createdBy.firstName} {ExpenseId.createdBy.lastName}
+              {data.createdBy.firstName} {data.createdBy.lastName}
            </div>
          </div>
        </div>

-        <div className="col-12 col-md-4 mb-3">
+        <div className="col-12  col-sm-6 col-md-4 mb-3">
          <div className="d-flex">
-            <label className="form-label me-2 mb-0 fw-semibold">Created At :</label>
-            <div className="text-muted">{formatUTCToLocalTime(ExpenseId.createdAt, true)}</div>
+            <label className="form-label me-2 mb-0 fw-semibold">
+              Created At :
+            </label>
+            <div className="text-muted">
+              {formatUTCToLocalTime(data.createdAt, true)}
+            </div>
          </div>
        </div>
      </div>

      <div className="text-start">
        <label className="form-label me-2 mb-0 fw-semibold">Description:</label>
-        <div className="text-muted">
-          Local travel reimbursement for delivery of materials to client site via City Taxi Service
-        </div>
+        <div className="text-muted">{data.description}</div>
+      </div>
+      <div className="col-12 my-2 text-start ">
+        <label className="form-label me-2 mb-0 fw-semibold">
+          Attachement :
+        </label>
+        {data.documents?.map((doc) => (
+          <a
+            className="list-group-item list-group-item-action d-flex align-items-center"
+            key={doc.id}
+          >
+            <div
+              className="rounded me-3 d-flex align-items-center justify-content-center"
+              style={{ height: "50px", width: "80px", position: "relative" }}
+            >
+              {doc.contentType === "application/pdf" ? (
+                <i className="bx bxs-file-pdf"></i>
+              ) : (
+                <>
+                  {!imageLoaded[doc.id] && (
+                    <div className="position-absolute text-secondary">
+                      Loading...
+                    </div>
+                  )}
+
+                  <img
+                    src={doc.thumbPreSignedUrl}
+                    alt={doc.fileName}
+                    className="img-fluid rounded"
+                    style={{
+                      maxHeight: "100%",
+                      maxWidth: "100%",
+                      objectFit: "cover",
+                      opacity: imageLoaded[doc.id] ? 1 : 0,
+                      transition: "opacity 0.3s ease-in-out",
+                    }}
+                    onLoad={() => handleImageLoad(doc.id)}
+                    onClick={() =>
+                      setDocumentView({ IsOpen: true, Image: doc.preSignedUrl })
+                    }
+                  />
+                </>
+              )}
+            </div>
+
+            <div className="w-100">
+              <p className="mb-0">{doc.fileName}</p>
+              <div className="d">
+                <i className="bx bx-cloud-download cursor-pointer"></i>
+              </div>
+            </div>
+          </a>
+        ))}
      </div>

      <hr className="divider my-1" />

-      {Array.isArray(ExpenseId.nextStatus) && ExpenseId.nextStatus.length > 0 && (
+      {Array.isArray(data.nextStatus) && data.nextStatus.length > 0 && (
        <div className="col-12 mb-3 text-start">
          <label className="form-label me-2 mb-0 fw-semibold">Comment:</label>
          <textarea
@ -148,7 +242,7 @@ const ViewExpense = ({ ExpenseId }) => {
          <input type="hidden" {...register("selectedStatus")} />

          <div className="d-flex flex-wrap gap-2 my-2">
-            {ExpenseId.nextStatus.map((status, index) => (
+            {data.nextStatus.map((status, index) => (
              <button
                key={index}
                type="button"
--- a/src/components/common/GlobalModel.jsx
+++ b/src/components/common/GlobalModel.jsx
@ -68,6 +68,21 @@ useEffect(() => {
      backgroundColor: 'rgba(0,0,0,0.3)',
    };

+const getPositionClass = (type) => {
+  switch (type) {
+    case 'top':
+      return 'mt-3';
+    case 'bottom':
+      return 'mt-auto mb-0 d-flex flex-column';
+    case 'left':
+      return 'position-absolute top-50 start-0 translate-middle-y me-auto';
+    case 'right':
+      return 'position-absolute top-50 end-0 translate-middle-y ms-auto';
+    case 'center':
+    default:
+      return 'modal-dialog-centered';
+  }
+};

  return (
    <div
@ -80,7 +95,7 @@ useEffect(() => {
      {...dataAttributesProps}
      style={backdropStyle}
    >
-      <div className={`modal-dialog ${dialogClass} ${modalSizeClass } mx-sm-auto mx-1`} role={role} >
+      <div   className={`modal-dialog ${modalSizeClass} ${getPositionClass(modalType)} ${dialogClass} mx-sm-auto mx-1`} role={role}>
        <div className="modal-content">
          <div className="modal-header p-0">
            {/* Close button inside the modal header */}
--- a/src/hooks/useExpense.js
+++ b/src/hooks/useExpense.js
@ -6,7 +6,7 @@ import { queryClient } from "../layouts/AuthLayout";
 // -------------------Query------------------------------------------------------
 export const useExpenseList = (pageSize, pageNumber, filter) => {
  return useQuery({
-    queryKey: ["expenses", pageNumber, pageSize, filter],
+    queryKey: ["Expenses", pageNumber, pageSize, filter],
    queryFn: async () =>
      await ExpenseRepository.GetExpenseList(pageSize, pageNumber, filter).then(
        (res) => res.data
@ -16,12 +16,18 @@ export const useExpenseList = (pageSize, pageNumber, filter) => {
 };

 export const useExpense = (ExpenseId) => {
+
+   console.log("ExpenseId:", ExpenseId, "Enabled:", ExpenseId !== undefined && ExpenseId !== null);
  return useQuery({
    queryKey: ["Expense", ExpenseId],
-    queryFn: async () => await ExpenseRepository.GetExpenseDetails(ExpenseId),
+    queryFn: async () => await ExpenseRepository.GetExpenseDetails(ExpenseId).then(
+        (res) => res.data
+      ),
+    enabled: !!ExpenseId, 
  });
 };

+
 // ---------------------------Mutation---------------------------------------------

 export const useCreateExpnse = (onSuccessCallBack) => {
--- a/src/pages/Expense/ExpensePage.jsx
+++ b/src/pages/Expense/ExpensePage.jsx
@ -5,6 +5,7 @@ import CreateExpense from "../../components/Expenses/CreateExpense";
 import ViewExpense from "../../components/Expenses/ViewExpense";
 import Breadcrumb from "../../components/common/Breadcrumb";
 import GlobalModel from "../../components/common/GlobalModel";
+import PreviewDocument from "../../components/Expenses/PreviewDocument";

 export const ExpenseContext = createContext();
 export const useExpenseContext = () => useContext(ExpenseContext);
@ -15,9 +16,14 @@ const ExpensePage = () => {
    expenseId: null,
    view: false,
  });
+  const [ViewDocument, setDocumentView] = useState({
+    IsOpen: false,
+    Image: null,
+  });

  const contextValue = {
    setViewExpense,
+    setDocumentView,
  };

  return (
@ -52,7 +58,7 @@ const ExpensePage = () => {
                  data-bs-custom-class="tooltip"
                  title="Add New Expense"
                  className={`p-1 me-2 bg-primary rounded-circle `}
-                    onClick={() => setNewExpense(true)}
+                  onClick={() => setNewExpense(true)}
                >
                  <i className="bx bx-plus fs-4 text-white"></i>
                </button>
@ -63,30 +69,42 @@ const ExpensePage = () => {

        <ExpenseList />

-         {isNewExpense && (
-             <GlobalModel
-          isOpen={isNewExpense}
-          size="lg"
-          closeModal={() => setNewExpense(false)}
-        >
-          <CreateExpense closeModal={() => setNewExpense(false)} />
-        </GlobalModel>
-         )}
-      
+        {isNewExpense && (
+          <GlobalModel
+            isOpen={isNewExpense}
+            size="lg"
+            closeModal={() => setNewExpense(false)}
+          >
+            <CreateExpense closeModal={() => setNewExpense(false)} />
+          </GlobalModel>
+        )}

+        {viewExpense.view && (
+          <GlobalModel
+            isOpen={viewExpense.view}
+            size="lg"
+            modalType="top"
+            closeModal={() =>
+              setViewExpense({
+                expenseId: null,
+                view: false,
+              })
+            }
+          >
+            <ViewExpense ExpenseId={viewExpense.expenseId} />
+          </GlobalModel>
+        )}

-        {viewExpense.view && (<GlobalModel
-          isOpen={viewExpense.view}
-          size="lg"
-          closeModal={() =>
-            setViewExpense({
-              expenseId: null,
-              view: false,
-            })
-          }
-        >
-          <ViewExpense ExpenseId={viewExpense.expenseId}/>
-        </GlobalModel>) }
+        {ViewDocument.IsOpen && (
+          <GlobalModel
+            size="lg"
+            m
+            isOpen={ViewDocument.IsOpen}
+            closeModal={() => setDocumentView({ IsOpen: false, Image: null })}
+          >
+            <PreviewDocument imageUrl={ViewDocument.Image} />
+          </GlobalModel>
+        )}
      </div>
    </ExpenseContext.Provider>
  );