Merge branch 'develop' into inbound-calls

package.json

@@ -42,7 +42,8 @@
     "tailwind-merge": "^2.2.0",
     "tailwindcss-animate": "^1.0.7",
     "twilio": "^4.20.1",
-    "twilio-taskrouter": "^2.0.1"
+    "twilio-taskrouter": "^2.0.1",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@types/node": "^20",

src/components/audittable/AuditTable.tsx

@@ -1,80 +1,115 @@
 "use client";
 
-import React, {useEffect, useState} from 'react';
-import axios from 'axios';
+import React, {
+  useEffect,
+  useState,
+  useCallback,
+} from "react";
+import axios from "axios";
+import * as XLSX from "xlsx";
 
+import { FetchedCalls, columns } from "./columns";
+import { DataTable } from "./DataTable";
+import { Button } from "../ui/button";
+import { Switch } from "../ui/switch";
+import { Label } from "../ui/label";
+import { Input } from "../ui/input";
 
-import {FetchedCalls, columns} from "./columns";
-import { DataTable } from './DataTable';
-import { Button } from '../ui/button';
-import { Switch } from '../ui/switch';
-import { Label } from '../ui/label';
-import { Input } from '../ui/input';
+interface SelectionChange<TData> {
+  selectionState: Record<string, boolean>;
+  selectedRowsData: TData[];
+}
 
 const AuditTable: React.FC = () => {
-    const [data, setData] = useState([]);
-    const [loading, setLoading] = useState(false);
-    const [showCalls, setShowCalls] = useState(false);
+  const [data, setData] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [showCalls, setShowCalls] = useState(false);
+  const [selectedRows, setSelectedRows] = useState({});
+  const [selectedContent, setSelectedContent] = useState<any[]>([]);
+
+  useEffect(() => {
+    const fetchCalls = async () => {
+      setLoading(true);
+      try {
+        const endpoint = showCalls
+          ? "/api/audit-log/calls"
+          : "/api/audit-log/message";
+        const response = await axios.get(endpoint);
+        setData(response.data);
+        setLoading(false);
+      } catch (error) {
+        console.log("error fetching calls", error);
+        setLoading(false);
+      }
+    };
 
-
+    fetchCalls();
+  }, [showCalls]);
 
-    useEffect(() => {
-        const fetchCalls = async() => {
-            setLoading(true);
-            try {
-                const endpoint = showCalls ? '/api/audit-log/calls' : '/api/audit-log/message'
-                const response = await axios.get(endpoint);
-                setData(response.data);
-                setLoading(false);
-            } catch (error) {
-                console.log('error fetching calls', error);
-                setLoading(false);
-            }
-        }
+  const handleSelectionChange = useCallback(
+    (change: Record<string, boolean>, content: any[]) => {
+      setSelectedRows(change);
+      setSelectedContent(content);
+      console.log(change);
+      console.log(content);
+    },
+    [],
+  );
 
-        fetchCalls();
-    }, [showCalls])
+  //exporting functionalities
+  const exportSelectedRowsToExcel = () => {
+    const workbook = XLSX.utils.book_new();
+    const worksheet = XLSX.utils.json_to_sheet(selectedContent);
+    XLSX.utils.book_append_sheet(workbook, worksheet, "SelectedRows");
+    XLSX.writeFile(workbook, "selected-rows.xlsx");
+  };
 
-    if (loading) {
-        return <div>Loading...</div>;
-    }
+  if (loading) {
+    return <div>Loading...</div>;
+  }
 
-    return (
-        <>
-        <div className="flex space-x-4 mb-8">
-            <div className="flex items-center space-x-2">
-                <Switch id="update-live" />
-                <Label htmlFor="airplane-mode">Update Live</Label>
-            </div>
-            <Button onClick={() => setShowCalls(true)} variant={showCalls? 'default' : 'outline'}>
-                Calls
-            </Button>
-            <Button onClick={() => setShowCalls(false)} variant={showCalls? 'outline' : 'default'}>
-                Messages
-            </Button>
+  return (
+    <>
+      <div className="flex space-x-4 mb-8">
+        <div className="flex items-center space-x-2">
+          <Switch id="update-live" />
+          <Label htmlFor="airplane-mode">Update Live</Label>
         </div>
-        <div className="flex justify-between itms-end">
+        <Button
+          onClick={() => setShowCalls(true)}
+          variant={showCalls ? "default" : "outline"}
+        >
+          Calls
+        </Button>
+        <Button
+          onClick={() => setShowCalls(false)}
+          variant={showCalls ? "outline" : "default"}
+        >
+          Messages
+        </Button>
+      </div>
+      <div className="flex justify-between itms-end">
         <div className="grid w-full max-w-sm items-center gap-1.5">
-            <Label htmlFor="search">Search</Label>
-            <Input type="search" id="search" placeholder='Search' />
-            </div>
-            <div className="flex space-x-4 gap-2 items-end">
-                <Button variant="ghost">
-                    Export All
-                </Button>
-                <Button  variant="default">
-                    Export Selected
-                </Button>
-            </div>
+          <Label htmlFor="search">Search</Label>
+          <Input type="search" id="search" placeholder="Search" />
         </div>
+        <div className="flex space-x-4 gap-2 items-end">
+          <Button variant="ghost">Export All</Button>
+          <Button variant="default" onClick={exportSelectedRowsToExcel}>
+            Export Selected
+          </Button>
+        </div>
+      </div>
 
-
-    <div  className="container mx-auto py-10">
-      <DataTable columns={columns} data={data}></DataTable>
-
-    </div>
+      <div className="container mx-auto py-10">
+        <DataTable
+          columns={columns}
+          data={data}
+          onSelectionChange={handleSelectionChange}
+        ></DataTable>
+      </div>
     </>
-    );
-}
+  );
+};
 
-export default AuditTable;
+export default AuditTable;