feat:export CSV file with all event data

src/components/Events/ImpactSummary.jsx

@@ -6,11 +6,13 @@ import { IoDocumentText } from 'react-icons/io5';
 import { MdPeopleAlt } from 'react-icons/md';
 import Backend from '../../utils/utils';
 import DataCard from './DataCard';
+import { CSVLink } from 'react-csv';
 
 const ImpactSummary = () => {
   const [registered, setRegistered] = useState(0);
   const [checkedIn, setCheckedIn] = useState(0);
   const [total, setTotal] = useState(0);
+  const [eventIdData, setEventIdData] = useState([]);
 
   useEffect(() => {
     getData();
@@ -30,6 +32,31 @@ const ImpactSummary = () => {
     }
   };
 
+  const header = [
+    { key: 'id', label: 'ID' },
+    { key: 'volunteer_name', label: 'VOLUNTEER_NAME' },
+    { key: 'number_in_party', label: 'NUMBER_IN_PARTY' },
+    { key: 'pounds', label: 'POUNDS' },
+    { key: 'ounces', label: 'OUNCES' },
+    { key: 'notes', label: 'NOTES' },
+    { key: 'event_name', label: 'EVENT_NAME' },
+    { key: 'is_checked_in', label: 'IS_CHECKED_IN' },
+    { key: 'image_array', label: 'IMAGE_ARRAY' },
+  ];
+
+  useEffect(() => {
+    const getEventId = async () => {
+      try {
+        const eventIdData = await Backend.get(`/stats/export/data`);
+        setEventIdData(eventIdData.data.data);
+      } catch (err) {
+        console.log(err.message);
+      }
+    };
+
+    getEventId();
+  }, []);
+
   return (
     <Box
       mb="5"
@@ -72,7 +99,13 @@ const ImpactSummary = () => {
       <VStack gap={120}>
         <Box></Box>
         <Button colorScheme={'messenger'} leftIcon={<AiOutlineExport></AiOutlineExport>} size="md">
-          Export Data
+          <CSVLink
+            data={eventIdData.length ? eventIdData : []}
+            filename="./data.csv"
+            headers={header}
+          >
+            Export Data
+          </CSVLink>
         </Button>
       </VStack>
     </Box>