diff --git a/public/images/platforms/atlassianlogo.svg b/public/images/platforms/atlassianlogo.svg
new file mode 100644
index 000000000..1b3c50761
--- /dev/null
+++ b/public/images/platforms/atlassianlogo.svg
@@ -0,0 +1,4 @@
+
diff --git a/public/images/platforms/drivelogo.svg b/public/images/platforms/drivelogo.svg
new file mode 100644
index 000000000..d273ef1f1
--- /dev/null
+++ b/public/images/platforms/drivelogo.svg
@@ -0,0 +1,12 @@
+
diff --git a/public/images/platforms/dropboxlogo.svg b/public/images/platforms/dropboxlogo.svg
new file mode 100644
index 000000000..98ab3df9a
--- /dev/null
+++ b/public/images/platforms/dropboxlogo.svg
@@ -0,0 +1,14 @@
+
diff --git a/public/images/platforms/jiralogo.svg b/public/images/platforms/jiralogo.svg
new file mode 100644
index 000000000..03745a711
--- /dev/null
+++ b/public/images/platforms/jiralogo.svg
@@ -0,0 +1,4 @@
+
diff --git a/public/images/platforms/notionlogo.svg b/public/images/platforms/notionlogo.svg
new file mode 100644
index 000000000..f3b01c648
--- /dev/null
+++ b/public/images/platforms/notionlogo.svg
@@ -0,0 +1,3 @@
+
diff --git a/public/images/platforms/onedrivelogo.svg b/public/images/platforms/onedrivelogo.svg
new file mode 100644
index 000000000..06c334392
--- /dev/null
+++ b/public/images/platforms/onedrivelogo.svg
@@ -0,0 +1,6 @@
+
diff --git a/public/images/platforms/slacklogo.svg b/public/images/platforms/slacklogo.svg
new file mode 100644
index 000000000..bee7b7f4b
--- /dev/null
+++ b/public/images/platforms/slacklogo.svg
@@ -0,0 +1,10 @@
+
diff --git a/public/images/platforms/teamslogo.svg b/public/images/platforms/teamslogo.svg
new file mode 100644
index 000000000..f3ec65eaa
--- /dev/null
+++ b/public/images/platforms/teamslogo.svg
@@ -0,0 +1,9 @@
+
diff --git a/public/images/platforms/trellologo.svg b/public/images/platforms/trellologo.svg
new file mode 100644
index 000000000..ea6b4c5cf
--- /dev/null
+++ b/public/images/platforms/trellologo.svg
@@ -0,0 +1,10 @@
+
diff --git a/src/app/dashboard/(user-dashboard)/settings/organization/integrations/page.tsx b/src/app/dashboard/(user-dashboard)/settings/organization/integrations/page.tsx
index db4d38750..419034022 100644
--- a/src/app/dashboard/(user-dashboard)/settings/organization/integrations/page.tsx
+++ b/src/app/dashboard/(user-dashboard)/settings/organization/integrations/page.tsx
@@ -1,5 +1,191 @@
-const page = () => {
- return
page
;
+"use client";
+
+import { SearchIcon } from "lucide-react";
+import { useState } from "react";
+
+import { Input } from "~/components/common/input";
+import IntegrationCard from "~/components/common/integrationCard/IntegrationCard";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";
+
+type platform = {
+ id: number;
+ heading: string;
+ logo: string;
+ description: string;
+};
+
+const IntegrationsPage = () => {
+ const [active, setActive] = useState(["Drive", "OneDrive", "Dropbox"]);
+
+ const platformsList: platform[] = [
+ {
+ id: 0,
+ heading: "Drive",
+ logo: "/images/platforms/drivelogo.svg",
+ description:
+ "Store, share and collaborate on documents and files securely",
+ },
+ {
+ id: 1,
+ heading: "OneDrive",
+ logo: "/images/platforms/onedrivelogo.svg",
+ description:
+ "Access, share and manage your files seamlessly across devices",
+ },
+ {
+ id: 2,
+ heading: "Trello",
+ logo: "/images/platforms/trellologo.svg",
+ description:
+ "Organize your project, track tasks and collaborate in a visual way",
+ },
+ {
+ id: 3,
+ heading: "Dropbox",
+ logo: "/images/platforms/dropboxlogo.svg",
+ description:
+ "Securely store, sync, and share all your files and documents",
+ },
+ {
+ id: 5,
+ heading: "Atlassian",
+ logo: "/images/platforms/atlassianlogo.svg",
+ description:
+ "Streamline project planning and manage workflows effectively",
+ },
+ {
+ id: 6,
+ heading: "Jira",
+ logo: "/images/platforms/jiralogo.svg",
+ description:
+ "Track tasks, manage projects, and streamline team collaboration",
+ },
+ {
+ id: 7,
+ heading: "Notion",
+ logo: "/images/platforms/notionlogo.svg",
+ description:
+ "Organize information, collaborate on projects, and create flexible workflows",
+ },
+ {
+ id: 8,
+ heading: "Microsoft teams",
+ logo: "/images/platforms/teamslogo.svg",
+ description:
+ "Enhance team communication, and project management with Microsoft Teams",
+ },
+ {
+ id: 9,
+ heading: "Slack",
+ logo: "/images/platforms/slacklogo.svg",
+ description:
+ "Transform team communication, enhance collaboration, and streamline workflow efficiency",
+ },
+ ];
+
+ const [platforms, setPlatforms] = useState(platformsList);
+
+ const togglePlatform = (platform: string) => {
+ setActive(
+ active.includes(platform)
+ ? active.filter((item: string) => item !== platform)
+ : [...active, platform],
+ );
+ };
+
+ const searchPlatforms = (query: string) => {
+ setPlatforms(
+ platformsList.filter(
+ (item: platform) =>
+ item.heading.toLowerCase().includes(query.toLowerCase()) ||
+ item.description.toLowerCase().includes(query.toLowerCase()),
+ ),
+ );
+ };
+
+ return (
+
+
+
Integration
+
+ Supercharge your workflow and handle repetitive tasks with apps you
+ use everyday
+
+
+
+
+
+
+
+
+ All
+
+ Active
+ Inactive
+
+
+
+
+ searchPlatforms(event.target.value)}
+ />
+
+
+
+
+ {platforms.map((platform: platform) => (
+
+ ))}
+
+
+
+
+ {platforms
+ .filter((item: platform) => active.includes(item.heading))
+ .map((platform: platform) => (
+
+ ))}
+
+
+
+
+ {platforms
+ .filter((item: platform) => !active.includes(item.heading))
+ .map((platform: platform) => (
+
+ ))}
+
+
+
+
+
+ );
};
-export default page;
+export default IntegrationsPage;
diff --git a/src/components/common/integrationCard/IntegrationCard.tsx b/src/components/common/integrationCard/IntegrationCard.tsx
new file mode 100644
index 000000000..3a89f7ea2
--- /dev/null
+++ b/src/components/common/integrationCard/IntegrationCard.tsx
@@ -0,0 +1,75 @@
+"use client";
+
+import Image from "next/image";
+
+import { Switch } from "~/components/ui/switch";
+import { cn } from "~/lib/utils";
+
+type PlatformCardProperties = {
+ /**
+ * Checks if the platform is active or not
+ */
+ active: boolean;
+
+ /**
+ * Checks if the platform is active or not
+ */
+ setActive: (platform: string) => void;
+
+ /**
+ * Displaying the platform name or title.
+ */
+ heading: string;
+
+ /**
+ * Displaying the platform logo or icon.
+ */
+ logo: string;
+ /**
+ * Providing a brief overview of the platform.
+ */
+ description: string;
+ /**
+ * Additional class names for customizing the container style.
+ */
+ containerClassName?: string;
+};
+
+/**
+ * A card component that displays platform details including a heading, logo, description, and a toggle switch.
+ * The toggle switch allows admins to activate or deactivate the platform.
+ *
+ * @param {PlatformCardProps} props - The properties for the component.
+ * @returns The CardPlatform component.
+ */
+
+export default function IntegrationCard({
+ active,
+ setActive,
+ heading,
+ logo,
+ description,
+ containerClassName,
+}: PlatformCardProperties) {
+ return (
+
+
+
+ setActive(heading)} />
+
+
+
+ {heading}
+
+
{description}
+
+
+ );
+}