first commit

frontend/app/main/configuration/integration/components/IntegrationMainPage.tsx

@@ -0,0 +1,73 @@
+"use client"
+
+import { Plus, Database } from "lucide-react";
+import AddIntegrationModal from "./AddIntegrationModal";
+import IntegrationTable from "./IntegratinTable";
+import { useState } from "react";
+
+function IntegrationMainPage() {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  return (
+    <div className="p-6 space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-semibold text-gray-500">
+            External Integrations
+          </h1>
+          <p className="text-sm text-gray-500 mt-1">
+            Connect to external systems like HRMS, CRM, and ERP
+          </p>
+        </div>
+
+        <button
+          className="flex items-center gap-2 bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium"
+          onClick={() => setIsModalOpen(true)}
+        >
+          <Plus size={16} />
+          Add Integration
+        </button>
+      </div>
+      <div className="border border-dashed border-gray-300 rounded-lg p-12 flex flex-col items-center justify-center text-center">
+        <div className="w-14 h-14 flex items-center justify-center rounded-full bg-gray-100 mb-4">
+          <Database className="text-gray-500" size={28} />
+        </div>
+
+        <h2 className="text-lg font-semibold text-gray-500">
+          No integrations yet
+        </h2>
+
+        <p className="text-sm text-gray-500 mt-2 max-w-md">
+          Connect your external systems to sync data with your project
+          management platform.
+        </p>
+
+        <button
+          className="mt-6 flex items-center gap-2 bg-indigo-600 hover:bg-indigo-700 text-white px-5 py-2.5 rounded-md text-sm font-medium"
+          onClick={() => setIsModalOpen(true)}
+        >
+          <Plus size={16} />
+          Add Your First Integration
+        </button>
+      </div>
+      {/* {isModalOpen && <AddIntegrationModal onClose={() => setIsModalOpen(false)} onSubmit={() => {
+              setIsModalOpen(false);
+              console.log("Integration created");
+          } } open={false} />} */}
+      <IntegrationTable />
+      {isModalOpen && (
+        <AddIntegrationModal
+          open={isModalOpen}
+          onClose={() => setIsModalOpen(false)}
+          onSubmit={(data) => {
+            console.log("Received in parent:", data);
+          }}
+        />
+      )}{" "}
+    </div>
+  );
+}
+
+export default IntegrationMainPage;
+
+