#172 Export CSV for trainee details (#288)

Author: Jadowacu1

package.json

@@ -125,6 +125,7 @@
     "pusher": "^5.2.0",
     "pusher-js": "^8.4.0-rc2",
     "quill": "^2.0.2",
+    "react-csv": "^2.2.2",
     "react-datepicker": "^4.8.0",
     "react-hook-form": "^7.45.4",
     "react-hot-toast": "^2.4.1",

src/components/TraineeDetail/decisionSection.tsx

@@ -1,5 +1,9 @@
-import React from "react";
+import React, { useState } from "react";
 import { DownloadPdf } from "../../utils/DownloadPdf";
+import { TiExportOutline } from "react-icons/ti";
+import { AiFillCaretDown } from "react-icons/ai";
+import { CSVLink } from "react-csv"; // Import CSVLink
+import { Link } from "lucide-react";
 
 interface TraineeDetails {
   interview_decision: string;
@@ -8,6 +12,19 @@ interface TraineeDetails {
     lastName: string;
     firstName: string;
   };
+  gender: string;
+  Address: string;
+  phone: string;
+  field_of_study: string;
+  education_level: string;
+  province: string;
+  district: string;
+  sector: string;
+  isEmployed: boolean;
+  haveLaptop: boolean;
+  isStudent: boolean;
+  Hackerrank_score: any;
+  english_score: any;
 }
 
 interface DecisionButtonProps {
@@ -46,8 +63,65 @@ const DecisionButton: React.FC<DecisionButtonProps> = ({ decision }) => {
   );
 };
 
+
+const createCSVData = (traineeDetails: TraineeDetails) => {
+  const { interview_decision, trainee_id, gender, Address, phone, field_of_study, education_level, province, district, sector, isEmployed, haveLaptop, isStudent, Hackerrank_score, english_score } = traineeDetails;
+  const { email, firstName, lastName } = trainee_id;
+
+
+  console.log(phone)
+  return [
+    [
+      "First Name",
+      "Last Name",
+      "Email",
+      "Gender",
+      "Address",
+      "Phone",
+      "Field of Study",
+      "Education Level",
+      "Province",
+      "District",
+      "Sector",
+      "Is Employed",
+      "Have Laptop",
+      "Is Student",
+      "Hackerrank Score",
+      "English Score",
+      "Interview Decision",
+    ],
+    [
+      firstName,
+      lastName,
+      email,
+      gender,
+      Address,
+      phone,
+      field_of_study,
+      education_level,
+      province,
+      district,
+      sector,
+      isEmployed ? "Yes" : "No", 
+      haveLaptop ? "Yes" : "No", 
+      isStudent ? "Yes" : "No",   
+      Hackerrank_score ?? "N/A",
+      english_score ?? "N/A",  
+      interview_decision ?? "N/A",
+    ],
+  ];
+};
+
+
 const DecisionSection: React.FC<{ traineeDetails: TraineeDetails }> = ({ traineeDetails }) => {
   const { interview_decision, trainee_id } = traineeDetails;
+  const [open, setOpen] = useState<boolean>(false);
+
+  const handleDropDown = (state: boolean) => {
+    setOpen(!state);
+  };
+
+  const csvData = createCSVData(traineeDetails); 
 
   return (
     <div className="w-full py-7 flex flex-col mx-16 bg-slate-200 rounded-xl shadow-md overflow-hidden md:max-w-2xl lg:flex lg:max-w-3xl dark:bg-[#192432] dark:text-white">
@@ -57,10 +131,26 @@ const DecisionSection: React.FC<{ traineeDetails: TraineeDetails }> = ({ trainee
       <div className="h-16 flex pl-6 items-center gap-5">
         <DecisionButton decision={interview_decision} />
         <button
-          onClick={() => DownloadPdf()}
-          className="btn-Aprov h-11 bg-blue-700 hover:bg-blue-600 dark:hover:bg-blue-600 text-white font-bold py-2 px-2 rounded dark:bg-blue-700"
+          onClick={(e) => handleDropDown(open)}
+          className="bg-[#56C870] hover:bg-[#1f544cef] text-white font-bold py-2 px-4 rounded mr-16"
         >
-          Download PDF
+          <TiExportOutline className="float-left m-1" />
+          Export
+          <AiFillCaretDown className="float-right m-1" />
+          {open && (
+            <ul className="font-light text-sm text-white m-1 flex flex-col">
+              <button className="hover:bg-[#215a51ef]" onClick={() => DownloadPdf()}>
+                PDF
+              </button>
+              <CSVLink
+                data={csvData} 
+                filename={"trainee-info.csv"} 
+                className="hover:bg-[#215a51ef]"
+              >
+                CSV
+              </CSVLink>
+            </ul>
+          )}
         </button>
         <button className="btn-Aprov h-11 bg-blue-500 hover:bg-blue-600 dark:hover:bg-blue-600 text-white font-bold py-2 px-8 rounded dark:bg-blue-500">
           <a
@@ -76,4 +166,4 @@ const DecisionSection: React.FC<{ traineeDetails: TraineeDetails }> = ({ trainee
   );
 };
 
-export default DecisionSection;
+export default DecisionSection;