first commit

frontend/app/main/planning/projects/[projectIdentifier]/component/expenseTab/expenseDataTable.tsx

@@ -0,0 +1,80 @@
+'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,
+            }}
+        />
+    );
+}