first commit

frontend/app/main/planning/projects/[projectIdentifier]/component/scheduleTab/index.tsx

@@ -0,0 +1,74 @@
+"use client";
+import { useState } from "react";
+import { Button } from "ikoncomponents";
+import { Plus, Edit } from "lucide-react";
+import ScheduleGanttShowComponent from "./schedule_show_gantt_component";
+import ScheduleFormComponent from "./schedule_form_component/schedule_form_definition";
+
+interface ScheduleTabProps {
+  projectIdentifier: string;
+}
+
+function ScheduleTab({ projectIdentifier }: ScheduleTabProps) {
+  const [isModalOpen, setModalOpen] = useState(false);
+  const [isUpdateMode, setIsUpdateMode] = useState(false);
+  const [selectedTaskId, setSelectedTaskId] = useState<number | null>(null);
+  const [refreshKey, setRefreshKey] = useState(0);
+
+  const toggleModal = () => {
+    setModalOpen((prev) => !prev);
+    if (!isModalOpen) {
+      setIsUpdateMode(false);
+      setSelectedTaskId(null);
+    }
+  };
+
+  const handleFormClose = () => {
+    setModalOpen(false);
+    setIsUpdateMode(false);
+    setSelectedTaskId(null);
+    setRefreshKey((prev) => prev + 1);
+  };
+
+  const handleTaskSelect = (taskId: number) => {
+    setSelectedTaskId(taskId);
+    setIsUpdateMode(true);
+    setModalOpen(true);
+  };
+
+  return (
+    <div className="grid grid-cols-[minmax(0,1fr)] w-full overflow-hidden px-2">
+      {/* Button bar */}
+      <div className="flex justify-end gap-2 mb-4 shrink-0">
+        <Button onClick={toggleModal} className="shrink-0">
+          <Plus className="mr-2 h-4 w-4" />
+          Add Schedule
+        </Button>
+
+        {selectedTaskId !== null && (
+          <Button onClick={() => handleTaskSelect(selectedTaskId)} className="shrink-0">
+            <Edit className="mr-2 h-4 w-4" />
+            Update Schedule
+          </Button>
+        )}
+      </div>
+
+      <ScheduleFormComponent
+        isOpen={isModalOpen}
+        onClose={handleFormClose}
+        projectIdentifier={projectIdentifier}
+        editTaskId={isUpdateMode ? selectedTaskId : undefined}
+      />
+
+      <div className="w-full min-w-0 overflow-hidden">
+        <ScheduleGanttShowComponent
+          key={refreshKey}
+          projectIdentifier={projectIdentifier}
+          onTaskSelect={handleTaskSelect}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default ScheduleTab;