74 lines
2.4 KiB
TypeScript
74 lines
2.4 KiB
TypeScript
"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;
|
|
|
|
|