added viewer for pdf type document

This commit is contained in:
pramod mahajan 2025-07-28 12:42:48 +05:30
parent bc2900b573
commit 325a6a5442

View File

@ -1,5 +1,9 @@
import React, { useState, useMemo } from "react"; import React, { useState, useMemo } from "react";
import { useActionOnExpense, useExpense, useHasAnyPermission } from "../../hooks/useExpense"; import {
useActionOnExpense,
useExpense,
useHasAnyPermission,
} from "../../hooks/useExpense";
import { formatUTCToLocalTime } from "../../utils/dateUtils"; import { formatUTCToLocalTime } from "../../utils/dateUtils";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
@ -11,12 +15,14 @@ import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import { REVIEW_EXPENSE } from "../../utils/constants"; import { REVIEW_EXPENSE } from "../../utils/constants";
import { useProfile } from "../../hooks/useProfile"; import { useProfile } from "../../hooks/useProfile";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
const ViewExpense = ({ ExpenseId }) => { const ViewExpense = ({ ExpenseId }) => {
const { data, isLoading, isError, error } = useExpense(ExpenseId); const { data, isLoading, isError, error } = useExpense(ExpenseId);
const IsReview = useHasUserPermission(REVIEW_EXPENSE); const IsReview = useHasUserPermission(REVIEW_EXPENSE);
const [imageLoaded, setImageLoaded] = useState({}); const [imageLoaded, setImageLoaded] = useState({});
const { setDocumentView } = useExpenseContext(); const { setDocumentView } = useExpenseContext();
const navigate = useNavigate();
const { const {
register, register,
handleSubmit, handleSubmit,
@ -30,27 +36,24 @@ const ViewExpense = ({ ExpenseId }) => {
selectedStatus: "", selectedStatus: "",
}, },
}); });
const userPermissions = useSelector(
(state) => state?.globalVariables?.loginUser?.featurePermissions || []
);
const userPermissions = useSelector(
(state) => state?.globalVariables?.loginUser?.featurePermissions || []
);
const nextStatusWithPermission = useMemo(() => { const nextStatusWithPermission = useMemo(() => {
if (!Array.isArray(data?.nextStatus)) return []; if (!Array.isArray(data?.nextStatus)) return [];
return data.nextStatus.filter((status) => { return data.nextStatus.filter((status) => {
const permissionIds = Array.isArray(status?.permissionIds) const permissionIds = Array.isArray(status?.permissionIds)
? status.permissionIds ? status.permissionIds
: []; : [];
if (permissionIds.length === 0) return true;
return permissionIds.some((id) => userPermissions.includes(id));
});
}, [data, userPermissions]);
if (permissionIds.length === 0) return true;
return permissionIds.some((id) => userPermissions.includes(id));
});
}, [data, userPermissions]);
const { mutate: MakeAction } = useActionOnExpense(() => reset()); const { mutate: MakeAction } = useActionOnExpense(() => reset());
@ -253,41 +256,40 @@ const nextStatusWithPermission = useMemo(() => {
<hr className="divider my-1" /> <hr className="divider my-1" />
{Array.isArray(data?.nextStatus) && data.nextStatus.length > 0 && ( {Array.isArray(data?.nextStatus) && data.nextStatus.length > 0 && (
<div className="col-12 mb-3 text-start"> <div className="col-12 mb-3 text-start">
<label className="form-label me-2 mb-0 fw-semibold">Comment:</label> <label className="form-label me-2 mb-0 fw-semibold">Comment:</label>
<textarea <textarea
className="form-control form-control-sm" className="form-control form-control-sm"
{...register("comment")} {...register("comment")}
rows="2" rows="2"
/> />
{errors.comment && ( {errors.comment && (
<small className="danger-text">{errors.comment.message}</small> <small className="danger-text">{errors.comment.message}</small>
)} )}
<input type="hidden" {...register("selectedStatus")} /> <input type="hidden" {...register("selectedStatus")} />
{nextStatusWithPermission?.length > 0 && (
<div className="text-center flex-wrap gap-2 my-2">
{nextStatusWithPermission?.map((status, index) => (
<button
key={status.id || index}
type="button"
onClick={() => {
setValue("selectedStatus", status.id);
handleSubmit(onSubmit)();
}}
className="btn btn-primary btn-sm cursor-pointer mx-2 border-0"
>
{status.displayName || status.name}
</button>
))}
</div>
)}
</div>
)}
{nextStatusWithPermission?.length > 0 && (
<div className="text-center flex-wrap gap-2 my-2">
{nextStatusWithPermission?.map((status, index) => (
<button
key={status.id || index}
type="button"
onClick={() => {
setValue("selectedStatus", status.id);
handleSubmit(onSubmit)();
}}
className="btn btn-primary btn-sm cursor-pointer mx-2 border-0"
>
{status.displayName || status.name}
</button>
))}
</div>
)}
</div>
)}
</form> </form>
); );
}; };