diff --git a/src/app/dashboard/(admin)/admin/(settings)/settings/organization/export.ts b/src/app/dashboard/(admin)/admin/(settings)/settings/organization/export.ts new file mode 100644 index 000000000..61e485676 --- /dev/null +++ b/src/app/dashboard/(admin)/admin/(settings)/settings/organization/export.ts @@ -0,0 +1,31 @@ +import axios from "axios"; + +const apiUrl = process.env.API_URL; +export const exportMembersEndpoint = async (format: string = "csv") => { + try { + const response = await axios.get( + `${apiUrl}/api/v1/organisation/members/export`, + { + params: { + format: format, + }, + }, + ); + return { + success: true, + format: format, + response: response, + }; + } catch (error: unknown) { + if (axios.isAxiosError(error)) { + return { + error: true, + message: error.response?.data?.message || error?.message, + }; + } + return { + error: true, + message: "An unknown error occurred", + }; + } +}; diff --git a/src/app/dashboard/(admin)/admin/(settings)/settings/organization/members/page.tsx b/src/app/dashboard/(admin)/admin/(settings)/settings/organization/members/page.tsx index 439fcbe1e..be3a54d02 100644 --- a/src/app/dashboard/(admin)/admin/(settings)/settings/organization/members/page.tsx +++ b/src/app/dashboard/(admin)/admin/(settings)/settings/organization/members/page.tsx @@ -1,11 +1,13 @@ "use client"; +import { AxiosResponse } from "axios"; import { EllipsisIcon } from "lucide-react"; import { useState } from "react"; import CustomButton from "~/components/common/common-button/common-button"; import { Input } from "~/components/common/input"; import InviteMemberModal from "~/components/common/modals/invite-member"; +import LoadingSpinner from "~/components/miscellaneous/loading-spinner"; import { Select, SelectContent, @@ -16,6 +18,7 @@ import { SelectValue, } from "~/components/ui/select"; import { useToast } from "~/components/ui/use-toast"; +import { exportMembersEndpoint } from "../export"; type Member = { avatar?: string; @@ -67,6 +70,8 @@ const activeMembers: number = memberData.length; const Members = () => { const [isModalOpen, setIsModalOpen] = useState(false); + const [exporting, setExporting] = useState(false); + const [text, setText] = useState("Export CSV"); const { toast } = useToast(); const handleCopy = () => { @@ -84,6 +89,54 @@ const Members = () => { const handleModalClose = () => { setIsModalOpen(false); }; + + const exportMembers = async () => { + setExporting(true); + setText("Exporting..."); + + const result = await exportMembersEndpoint(); + + if (result.success) { + toast({ + title: "Success", + description: result.message || "Exported Successfully", + variant: "destructive", + }); + downloadDocument(result); + } + + if (result.error) { + toast({ + title: "Error", + description: result.message, + variant: "destructive", + }); + setExporting(false); + setText("Export CSV"); + } + }; + + const downloadDocument = (result: { + success?: boolean; + format: string; + response: AxiosResponse; + error?: undefined; + message?: undefined; + }) => { + setText("Downloading..."); + + const link = document.createElement("a"); + + link.href = URL.createObjectURL(result.response.data); + link.download = `org_members.${result.format}`; + document.body.append(link); + link.click(); + link.remove(); + + setText("Export CSV"); + setExporting(false); + }; + return (
@@ -200,7 +253,21 @@ const Members = () => { Export a CSV with information of all members of your team

- Export CSV + { + exportMembers(); + }} + > + {exporting ? ( + + {text}{" "} + + + ) : ( + {text} + )} +