first commit

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

@@ -0,0 +1,44 @@
+"use client";
+
+import { useState } from "react";
+import { Plus } from "lucide-react";
+import ExpenseModal from "./AddExpenseModal";
+import { IconButtonWithTooltip } from "ikoncomponents";
+import { ProductOfProject } from "@/app/utils/interface/productOfProject";
+
+export default function AddExpenseButton({
+  productIdentifier,
+  productData,
+  setProductData,
+}: {
+  productIdentifier: string;
+  productData: ProductOfProject | undefined;
+  setProductData: React.Dispatch<React.SetStateAction<ProductOfProject | undefined>>;
+}) {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const handleOpenModal = () => setIsModalOpen(true);
+
+  const handleCloseModal = () => setIsModalOpen(false);
+
+  return (
+    <>
+      <div className="flex flex-row items-center justify-end">
+        <IconButtonWithTooltip
+          tooltipContent="Add/Edit Expenses"
+          onClick={handleOpenModal}
+        >
+          <Plus />
+        </IconButtonWithTooltip>
+      </div>
+
+      <ExpenseModal
+        isOpen={isModalOpen}
+        onClose={handleCloseModal}
+        productIdentifier={productIdentifier}
+        productData={productData}
+        setProductData={setProductData}
+      />
+    </>
+  );
+}