81 lines
2.2 KiB
TypeScript
81 lines
2.2 KiB
TypeScript
'use client'
|
|
import { DataTableLayout } from "ikoncomponents";
|
|
import { ColumnDef } from "ikoncomponents";
|
|
import { Button } from "ikoncomponents";
|
|
import { SquarePenIcon } from "lucide-react";
|
|
|
|
interface ExpenseData {
|
|
expenseName: string;
|
|
location: string;
|
|
currency: string;
|
|
cost: number;
|
|
quantity: number;
|
|
description: string;
|
|
totalCost?: number;
|
|
[key: string]: any;
|
|
}
|
|
|
|
export default function ExpenseDataTable({ expenseDetails, onEdit }: { expenseDetails: ExpenseData[]; onEdit: (id: string) => void; }) {
|
|
|
|
const columnsProuductDetails: ColumnDef<ExpenseData>[] = [
|
|
{
|
|
accessorKey: "expenseName",
|
|
header: () => (
|
|
<div style={{ textAlign: 'center' }}>Expense Name</div>
|
|
),
|
|
},
|
|
{
|
|
accessorKey: "location",
|
|
header: () => (
|
|
<div style={{ textAlign: 'center' }}>Location</div>
|
|
),
|
|
},
|
|
{
|
|
accessorKey: "currency",
|
|
header: () => (
|
|
<div style={{ textAlign: 'center' }}>Currency</div>
|
|
),
|
|
},
|
|
{
|
|
accessorKey: "cost",
|
|
header: () => (
|
|
<div style={{ textAlign: 'center' }}>Cost</div>
|
|
),
|
|
},
|
|
{
|
|
accessorKey: "quantity",
|
|
header: () => (
|
|
<div style={{ textAlign: 'center' }}>Quantity</div>
|
|
),
|
|
},
|
|
{
|
|
accessorKey: "totalCost",
|
|
header: () => (
|
|
<div style={{ textAlign: 'center' }}>Total Cost</div>
|
|
),
|
|
},
|
|
{
|
|
header: () => (
|
|
<div style={{ textAlign: 'center' }}>Actions</div>
|
|
),
|
|
cell: (row) => (
|
|
<Button onClick={() => onEdit(row.uuid)}>
|
|
<SquarePenIcon />
|
|
</Button>
|
|
),
|
|
},
|
|
];
|
|
|
|
return (
|
|
<DataTableLayout
|
|
columns={columnsProuductDetails}
|
|
data={expenseDetails}
|
|
extraTools={{
|
|
keyExtractor: (row: ExpenseData) => row.uuid ?? row.expenseName,
|
|
totalPages: 0,
|
|
currentPage: 0,
|
|
}}
|
|
/>
|
|
);
|
|
}
|