307 lines
10 KiB
JavaScript
307 lines
10 KiB
JavaScript
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 />;
|
|
|
|
return (
|
|
|
|
<form className="container px-3">
|
|
<div className="col-12 mb-1">
|
|
<h5 className="fw-semibold m-0">Recurring Payment Details</h5>
|
|
</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 |