Availability basic logic

package.json

@@ -27,6 +27,7 @@
     "@tanstack/react-table": "^8.12.0",
     "@twilio/voice-sdk": "^2.10.1",
     "chart.js": "^4.4.1",
+    "axios": "^1.6.5",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "dayjs": "^1.11.10",
@@ -37,6 +38,7 @@
     "react": "^18",
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18",
+    "react-hot-toast": "^2.4.1",
     "tailwind-merge": "^2.2.0",
     "tailwindcss-animate": "^1.0.7",
     "twilio": "^4.20.1",

src/app/api/agent/route.ts

@@ -0,0 +1,58 @@
+
+import {NextResponse, NextRequest} from 'next/server';
+
+interface Activity {
+    sid: string
+}
+
+// export async function POST(
+//     request: Request,
+//     respones: Response
+// ) {
+
+//     const accountSid = process.env.TWILIO_ACCOUNT_SID;
+//     const authToken = process.env.TWILIO_AUTH_TOKEN;
+//     const client = require('twilio')(accountSid, authToken);
+
+
+//     client.taskrouter.v1.workspaces('WSd8100ebc4d3482bc08bd668af5f45c8a')
+//                     .workers('WK1cfbadb8437bf21e5719d5b2358db96d')
+//                     .update({
+//                        activitySid: 'WAd9d119cdf4ac2d6a37c372ea05029717'
+//                      })
+//                     .then((worker: any) => console.log(worker.activityName));
+
+
+
+// }
+
+// import { NextApiRequest, NextApiResponse } from 'next';
+// import twilio from 'twilio';
+
+interface Activity {
+    sid: string;
+}
+
+export async function POST(
+    request: NextRequest,
+    response: NextResponse
+) {
+    const accountSid = process.env.TWILIO_ACCOUNT_SID;
+    const authToken = process.env.TWILIO_AUTH_TOKEN;
+    const client = require('twilio')(accountSid, authToken);
+
+    try {
+        const worker = await client.taskrouter.v1.workspaces('WSd8100ebc4d3482bc08bd668af5f45c8a')
+                                  .workers('WK1cfbadb8437bf21e5719d5b2358db96d')
+                                  .update({
+                                      activitySid: 'WA387cdc981874d6497a7658e6832d20a7'
+                                  });
+
+        console.log(worker.activityName);
+        return NextResponse.json(worker.activityName)
+    } catch (error) {
+        console.error('Failed to update worker:', error);
+
+    }
+}
+

src/components/appbar/AgentStatus.tsx

@@ -4,21 +4,40 @@ import React, {useState} from 'react';
 import {Chip} from "@material-tailwind/react";
 import {Button} from "../ui/button";
 
+import axios from 'axios';
+import toast from 'react-hot-toast';
+
+
 const AgentStatus:React.FC = () => {
 
-    const [isAvailable, setIsAvailable] = useState(false);
+    const [activity, setActivity] = useState('Unavailable')
 
+
     const toggleAvailability = async () => {
-        const newAvailability = !isAvailable;
-        setIsAvailable(newAvailability);
+         const newActivity = activity === 'Unavailable' ? 'Available' : 'Unavailable';
+         setActivity(newActivity);
+
+         //Request to API route
+         try {
+            // Send a request to your API route using axios
+            const response = await axios.post('/api/agent', {
+                newActivity,
+            });
+
+            console.log('Status updated to:', response.data.status);
+        } catch (error) {
+            console.error('Error updating status:', error);
+            // Optionally revert the status change in the UI if the API call fails
+            setActivity(activity);
+        }
     }
 
     return(
         <div className="flex gap-2 justify-center items-center">
             <Button 
                 variant="outline"
                 onClick={toggleAvailability}>
-                {isAvailable? 'Go Unavailable' : 'Go Available'}
+                {activity === 'Available' ? 'Go Offline' : 'Go Available'}
             </Button>
         <div className="flex gap-2 border border-gray-300 p-2 m-4 bg-gray-100 rounded">
 
@@ -27,7 +46,7 @@ const AgentStatus:React.FC = () => {
         <div>Status</div>
 
         <div>
-            {isAvailable? 
+            {activity === 'Available'? 
                 <>
             <Chip
                 variant="ghost"