Creating Recurring Expense Details form.
This commit is contained in:
parent
72e5cf0bbe
commit
da32f9c8ff
@ -1,14 +1,307 @@
|
||||
import React from 'react'
|
||||
import { useRecurringExpenseDetail } from '../../hooks/useExpense';
|
||||
import { formatUTCToLocalTime } from '../../utils/dateUtils';
|
||||
import { formatFigure, getColorNameFromHex } from '../../utils/appUtils';
|
||||
import Avatar from '../common/Avatar';
|
||||
import { FREQUENCY_FOR_RECURRING } from '../../utils/constants';
|
||||
import { ExpenseDetailsSkeleton } from '../Expenses/ExpenseSkeleton';
|
||||
|
||||
const ViewRecurringExpense = ({ RecurringId }) => {
|
||||
const { data, isLoading, isError, error, isFetching } = useRecurringExpenseDetail(RecurringId);
|
||||
|
||||
const statusColorMap = {
|
||||
"da462422-13b2-45cc-a175-910a225f6fc8": "primary", // Active
|
||||
"306856fb-5655-42eb-bf8b-808bb5e84725": "success", // Completed
|
||||
"3ec864d2-8bf5-42fb-ba70-5090301dd816": "danger", // De-Activated
|
||||
"8bfc9346-e092-4a80-acbf-515ae1ef6868": "warning", // Paused
|
||||
};
|
||||
if (isLoading) return <ExpenseDetailsSkeleton />;
|
||||
|
||||
const ViewRecurringExpense = () => {
|
||||
return (
|
||||
<div>
|
||||
<h5>Detail Recurring</h5>
|
||||
<div className='d-flex justify-content-center align-items-center'>
|
||||
<p>Under the Working!</p>
|
||||
|
||||
<form className="container px-3">
|
||||
<div className="col-12 mb-1">
|
||||
<h5 className="fw-semibold m-0">Recurring Payment Details</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row mb-1">
|
||||
{/* <div className="col-12 col-lg-7 col-xl-8 mb-3"> */}
|
||||
<div className="row">
|
||||
|
||||
{/* Row 1 Recurring Id and Status */}
|
||||
|
||||
<div className="col-12 d-flex justify-content-between text-start fw-semibold my-2 mb-4">
|
||||
<span>{data?.recurringPaymentUID}</span>
|
||||
<span
|
||||
className={`badge bg-label-${statusColorMap[data?.status?.id] || "secondary"}`}
|
||||
>
|
||||
{data?.status?.name || "N/A"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Row 2 Category*/}
|
||||
|
||||
<div className="col-md-6 mb-6">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
Expense Category :
|
||||
</label>
|
||||
<div className="text-muted">{data?.expenseCategory?.name || "N/A"}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
{/* Row 3 Amount and Project */}
|
||||
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
Amount :
|
||||
</label>
|
||||
<div className="text-muted">
|
||||
{data?.amount != null
|
||||
? `${data?.currency?.symbol ?? "¥"} ${Number(data.amount).toFixed(2)} ${data?.currency?.currencyCode ?? "CN"}`
|
||||
: "N/A"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-md-6 mb-6">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
Project :
|
||||
</label>
|
||||
<div className="text-muted">{data?.project?.name || "N/A"}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Row 4 Created At and Title*/}
|
||||
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
Created At :
|
||||
</label>
|
||||
{/* <div className="text-muted">
|
||||
{formatUTCToLocalTime(data?.createdAt, true)}
|
||||
</div> */}
|
||||
|
||||
<div className="text-muted">
|
||||
{data?.createdAt
|
||||
? formatUTCToLocalTime(data.createdAt, true)
|
||||
: "N/A"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-md-6 mb-6">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
Title :
|
||||
</label>
|
||||
<div className="text-muted">{data?.title || "N/A"}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Row 5 Payee and Notify*/}
|
||||
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
Payee :
|
||||
</label>
|
||||
<div className="text-muted">{data?.payee || "N/A"}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-md-6 mb-6">
|
||||
<div className="d-flex align-items-start">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
Notify To :
|
||||
</label>
|
||||
|
||||
<div className="text-muted" style={{ textAlign: "left" }}>
|
||||
{data?.notifyTo?.length > 0
|
||||
? data.notifyTo.map((user, index) => (
|
||||
<span key={user.id}>
|
||||
{user.email}
|
||||
{index < data.notifyTo.length - 1 && ", "}
|
||||
</span>
|
||||
))
|
||||
: "N/A"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Row 6 Strike Date*/}
|
||||
|
||||
<div className="col-md-6 mb-6">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
Strike Date :
|
||||
</label>
|
||||
{/* <div className="text-muted">
|
||||
{formatUTCToLocalTime(data?.strikeDate)}
|
||||
</div> */}
|
||||
<div className="text-muted">
|
||||
{data?.strikeDate
|
||||
? formatUTCToLocalTime(data.strikeDate, true)
|
||||
: "N/A"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Row 7 Frequency and Buffer Days*/}
|
||||
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
Frequency :
|
||||
</label>
|
||||
<div className="text-muted flex-grow-1 text-start">
|
||||
{data?.frequency !== undefined
|
||||
? FREQUENCY_FOR_RECURRING[data.frequency]
|
||||
: "N/A"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-md-6 mb-6">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
Payment Buffer Days :
|
||||
</label>
|
||||
<div className="text-muted">{data?.paymentBufferDays || "N/A"}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Row 8 Updated At and Number of Iteration*/}
|
||||
|
||||
<div className="col-md-6 mb-6">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
Updated At :
|
||||
</label>
|
||||
<div className="text-muted">
|
||||
{data?.updatedAt
|
||||
? formatUTCToLocalTime(data.updatedAt, true)
|
||||
: "N/A"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
Number of Iteration :
|
||||
</label>
|
||||
<div className="text-muted">{data?.numberOfIteration || "N/A"}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Row 9 Created By and Updated By*/}
|
||||
|
||||
<div className="col-md-6 text-start mb-6">
|
||||
<div className="d-flex align-items-center">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold"
|
||||
style={{ minWidth: "125px" }}
|
||||
>
|
||||
Created By :
|
||||
</label>
|
||||
<Avatar
|
||||
size="xs"
|
||||
classAvatar="m-0 me-1"
|
||||
firstName={data?.createdBy?.firstName}
|
||||
lastName={data?.createdBy?.lastName}
|
||||
/>
|
||||
<span className="text-muted">
|
||||
{`${data?.createdBy?.firstName ?? ""} ${data?.createdBy?.lastName ?? ""}`.trim() || "N/A"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6 text-start mb-3">
|
||||
<div className="d-flex align-items-center">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold"
|
||||
style={{ minWidth: "125px" }}
|
||||
>
|
||||
Updated By :
|
||||
</label>
|
||||
|
||||
{data?.updatedBy ? (
|
||||
<>
|
||||
<Avatar
|
||||
size="xs"
|
||||
classAvatar="m-0 me-1"
|
||||
firstName={data.updatedBy.firstName}
|
||||
lastName={data.updatedBy.lastName}
|
||||
/>
|
||||
<span className="text-muted">
|
||||
{`${data.updatedBy.firstName ?? ""} ${data.updatedBy.lastName ?? ""}`.trim() || "N/A"}
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<span className="text-muted">N/A</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Row 10 Description */}
|
||||
|
||||
<div className="col-12 text-start mb-5 d-flex">
|
||||
<label
|
||||
className="fw-semibold form-label mb-0"
|
||||
style={{ minWidth: "140px", whiteSpace: "nowrap" }}
|
||||
>
|
||||
Description :
|
||||
</label>
|
||||
<div className="text-muted flex-grow-1" style={{ whiteSpace: "pre-wrap" }}>
|
||||
{data?.description || "N/A"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* </div> */}
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
|
||||
export default ViewRecurringExpense
|
||||
export default ViewRecurringExpense
|
||||
@ -500,13 +500,13 @@ export const useRecurringExpenseList = (
|
||||
});
|
||||
};
|
||||
|
||||
export const useRecurringExpenseDetail =(RequestId)=>{
|
||||
export const useRecurringExpenseDetail =(RecurringId)=>{
|
||||
return useQuery({
|
||||
queryKey:['recurringExpense',RequestId],
|
||||
queryKey:['recurringExpense',RecurringId],
|
||||
queryFn:async()=>{
|
||||
const resp = await ExpenseRepository.GetRecurringExpense(RequestId);
|
||||
const resp = await ExpenseRepository.GetRecurringExpense(RecurringId);
|
||||
return resp.data;
|
||||
},
|
||||
enabled:!!RequestId
|
||||
enabled:!!RecurringId
|
||||
})
|
||||
}
|
||||
|
||||
@ -151,22 +151,12 @@ const RecurringExpensePage = () => {
|
||||
closeModal={() =>
|
||||
setViewRecurring({ IsOpen: null, recurringId: null })
|
||||
}
|
||||
recurringId={viewRecurring.recurringId}
|
||||
RecurringId={viewRecurring.recurringId}
|
||||
/>
|
||||
<ViewRecurringExpense />
|
||||
<ViewRecurringExpense RecurringId={viewRecurring.recurringId} />
|
||||
</GlobalModel>
|
||||
)}
|
||||
|
||||
{/* {ViewRequest.view && (
|
||||
<GlobalModel
|
||||
isOpen
|
||||
size="xl"
|
||||
modalType="top"
|
||||
closeModal={() => setVieRequest({ requestId: null, view: false })}
|
||||
>
|
||||
<ViewPaymentRequest requestId={ViewRequest?.requestId}/>
|
||||
</GlobalModel>
|
||||
)} */}
|
||||
|
||||
</div>
|
||||
</RecurringExpenseContext.Provider>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user