Integrate API

src/app/api/audit-log/calls/route.ts

@@ -3,11 +3,11 @@ import {NextResponse, NextRequest} from 'next/server';
 
 
 interface FetchedCalls {
-    from: string;
-    to: string;
+    id: string;
     direction: string;
-    answeredBy: string;
-    dateCreated: string;
+    from: string | null;
+    to: string | null;
+    timestamp: string;
 }
 
 export async function GET(
@@ -21,14 +21,24 @@ export async function GET(
     console.log('success')
     const calls: any[] = await client.calls.list({limit:20});
     //if want to display all calls, can delete the limit parameter
-    const formattedCalls: FetchedCalls[] = calls.map(call => ({
-        from: call.from,
-        to: call.to,
-        direction: call.direction,
-        answeredBy: call.answeredBy,
-        dateCreated: call.dateCreated
-
-    }))
+    const formattedCalls: FetchedCalls[] = calls.map(call => {
+        const date = new Date(call.dateCreated);
+        const year = date.getUTCFullYear();
+        const month = (date.getUTCMonth() + 1).toString().padStart(2, '0'); // Month is 0-indexed
+        const day = date.getUTCDate().toString().padStart(2, '0');
+        const hours = date.getUTCHours().toString().padStart(2, '0');
+        const minutes = date.getUTCMinutes().toString().padStart(2, '0');
+
+        const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}`;
+
+        return {
+            id: call.sid,
+            from: call.from,
+            to: call.to,
+            direction: call.direction,
+            timestamp: formattedDate // Use the formatted date string
+        };
+    });
 
     console.log(formattedCalls)
     return NextResponse.json(formattedCalls)

src/components/audittable/AuditTable.tsx

@@ -3,17 +3,9 @@
 import React, {useEffect, useState} from 'react';
 import axios from 'axios';
 
-import {Calls, columns} from "./columns";
+import {FetchedCalls, columns} from "./columns";
 import { DataTable } from './DataTable';
 
-interface FetchedCalls {
-    from: string;
-    to: string;
-    direction: string;
-    answeredBy: string;
-    dateCreated: string;
-}
-
 
 const dummyCalls = [
     {
@@ -42,15 +34,16 @@ const dummyCalls = [
 const AuditTable: React.FC = () => {
     const [calls, setCalls] = useState<FetchedCalls[]>([]);
     const [loading, setLoading] = useState(false);
+    const [showCalls, setShowCalls] = useState(true);
 
     useEffect(() => {
         const fetchCalls = async() => {
             setLoading(true);
             try {
                 const response = await axios.get('/api/audit-log/calls');
                 setCalls(response.data);
-                console.log("call retrieved")
-                console.log(calls)
+                // console.log("call retrieved")
+                // console.log(calls)
                 setLoading(false);
             } catch (error) {
                 console.log('error fetching calls', error);
@@ -67,7 +60,7 @@ const AuditTable: React.FC = () => {
 
     return (
     <div  className="container mx-auto py-10">
-      <DataTable columns={columns} data={dummyCalls}></DataTable>
+      <DataTable columns={columns} data={calls}></DataTable>
 
 
     {calls.length === 0 && <p>No calls to display.</p>}

src/components/audittable/columns.tsx

@@ -16,23 +16,15 @@ import {
 
 
 // This type is used to define the shape of our data.
-// You can use a Zod schema here if you want.
-export type Payment = {
-  id: string
-  amount: number
-  status: "pending" | "processing" | "success" | "failed"
-  email: string
-}
-
-export type Calls = {
+export type FetchedCalls = {
     id: string;
     direction: string;
     from: string | null;
     to: string | null;
-    timestamp: Date;  
+    timestamp: string;  
 }
 
-export const columns: ColumnDef<Calls>[] = [
+export const columns: ColumnDef<FetchedCalls>[] = [
     {
         id: "select",
         header: ({ table }) => (