From d56b68384da9b385eab873ed2432640ebd2584a9 Mon Sep 17 00:00:00 2001 From: abel-otegbola Date: Mon, 29 Jul 2024 16:27:10 +0100 Subject: [PATCH] feat: create integrations settings page --- public/images/platforms/atlassianlogo.svg | 4 + public/images/platforms/drivelogo.svg | 12 ++ public/images/platforms/dropboxlogo.svg | 14 ++ public/images/platforms/jiralogo.svg | 4 + public/images/platforms/notionlogo.svg | 3 + public/images/platforms/onedrivelogo.svg | 6 + public/images/platforms/slacklogo.svg | 10 + public/images/platforms/teamslogo.svg | 9 + public/images/platforms/trellologo.svg | 10 + .../organization/integrations/page.tsx | 192 +++++++++++++++++- .../integrationCard/IntegrationCard.tsx | 75 +++++++ 11 files changed, 336 insertions(+), 3 deletions(-) create mode 100644 public/images/platforms/atlassianlogo.svg create mode 100644 public/images/platforms/drivelogo.svg create mode 100644 public/images/platforms/dropboxlogo.svg create mode 100644 public/images/platforms/jiralogo.svg create mode 100644 public/images/platforms/notionlogo.svg create mode 100644 public/images/platforms/onedrivelogo.svg create mode 100644 public/images/platforms/slacklogo.svg create mode 100644 public/images/platforms/teamslogo.svg create mode 100644 public/images/platforms/trellologo.svg create mode 100644 src/components/common/integrationCard/IntegrationCard.tsx 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 ( +
+
+
+ {heading} +
+ setActive(heading)} /> +
+
+

+ {heading} +

+

{description}

+
+
+ ); +}