79 lines
2.3 KiB
TypeScript
79 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import AddExpenseButton from "./addExpenseButton";
|
|
import { DataTableLayout, ColumnDef } from "ikoncomponents";
|
|
import { ProductOfProject } from "@/app/utils/interface/productOfProject";
|
|
|
|
export interface ExpenseData {
|
|
id: string;
|
|
expenseName: string;
|
|
location: string;
|
|
currency: string;
|
|
cost: number;
|
|
quantity: number;
|
|
remarks?: string;
|
|
totalCost?: number;
|
|
}
|
|
|
|
export default function ExpenseMainDataTable({
|
|
productData,
|
|
setProductData,
|
|
}: {
|
|
productData: ProductOfProject | undefined;
|
|
setProductData: React.Dispatch<React.SetStateAction<ProductOfProject | undefined>>;
|
|
}) {
|
|
const [convertedData, setConvertedData] = useState<ExpenseData[]>([]);
|
|
const productIdentifier = productData?.productIdentifier;
|
|
|
|
useEffect(() => {
|
|
if (!productData?.expenseDetails) {
|
|
setConvertedData([]);
|
|
return;
|
|
}
|
|
const expenseArray: ExpenseData[] = Object.entries(productData.expenseDetails).map(
|
|
([id, item]: [string, any]) => ({
|
|
id,
|
|
...item,
|
|
remarks: item.remarks || item.description,
|
|
totalCost: item.totalCost ?? item.cost * item.quantity,
|
|
})
|
|
);
|
|
|
|
setConvertedData(expenseArray);
|
|
}, [productData]);
|
|
|
|
const columnsProductDetails: ColumnDef<ExpenseData>[] = [
|
|
{ accessorKey: "expenseName", header: "Expense Name" },
|
|
{ accessorKey: "location", header: "Location" },
|
|
{ accessorKey: "currency", header: "Currency" },
|
|
{ accessorKey: "cost", header: "Cost" },
|
|
{ accessorKey: "quantity", header: "Quantity" },
|
|
{
|
|
accessorKey: "totalCost",
|
|
header: "Total Cost",
|
|
cell: (row) => (row.totalCost ?? 0).toLocaleString(undefined, { minimumFractionDigits: 2 }),
|
|
},
|
|
{ accessorKey: "remarks", header: "Remarks" },
|
|
];
|
|
|
|
return (
|
|
<DataTableLayout
|
|
columns={columnsProductDetails}
|
|
data={convertedData}
|
|
extraTools={{
|
|
keyExtractor: (row: ExpenseData) => row.id,
|
|
totalPages: 0,
|
|
currentPage: 0,
|
|
actionNode: productIdentifier ? (
|
|
<AddExpenseButton
|
|
key="add-expense-btn"
|
|
productIdentifier={productIdentifier}
|
|
productData={productData}
|
|
setProductData={setProductData}
|
|
/>
|
|
) : undefined,
|
|
}}
|
|
/>
|
|
);
|
|
} |