Skip to content

Commit

Permalink
Run code formatter
Browse files Browse the repository at this point in the history
  • Loading branch information
@WillieCubed
WillieCubed committed Feb 22, 2024
1 parent 96a93e6 commit 080f1af
Show file tree
Hide file tree
Showing 4 changed files with 238 additions and 222 deletions.
116 changes: 58 additions & 58 deletions src/components/appbar/AgentStatus.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
"use client";
pnpm"use client";

import React, { useState } from "react";
import { Chip } from "@material-tailwind/react";
Expand All @@ -8,71 +8,71 @@ import axios from "axios";

//Need to change based on every single diff. Taskrouter workspace
const activities = {
Available: "",
Unavailable: "",
Offline: "",
Available: "",
Unavailable: "",
Offline: "",
};

const AgentStatus: React.FC = () => {
const [activity, setActivity] = useState("Unavailable");
const [activity, setActivity] = useState("Unavailable");

const toggleAvailability = async () => {
const newActivity =
activity === "Unavailable" ? "Available" : "Unavailable";
setActivity(newActivity);
const activitySid = activities[newActivity];
const toggleAvailability = async () => {
const newActivity =
activity === "Unavailable" ? "Available" : "Unavailable";
setActivity(newActivity);
const activitySid = activities[newActivity];

//Request to API route
try {
// Send a request to your API route using axios
const response = await axios.post("/api/agent", {
activitySid,
});
} catch (error) {
console.error("Error updating status:", error);
// If API call fail, make no change
setActivity(activity);
}
};
//Request to API route
try {
// Send a request to your API route using axios
const response = await axios.post("/api/agent", {
activitySid,
});
} catch (error) {
console.error("Error updating status:", error);
// If API call fail, make no change
setActivity(activity);
}
};

return (
<div className="flex gap-2 justify-center items-center">
<Button variant="outline" onClick={toggleAvailability}>
{activity === "Available" ? "Go Offline" : "Go Available"}
</Button>
<div className="flex gap-2 border border-gray-300 p-2 m-4 bg-gray-100 rounded">
<div>Status</div>
return (
<div className="flex gap-2 justify-center items-center">
<Button variant="outline" onClick={toggleAvailability}>
{activity === "Available" ? "Go Offline" : "Go Available"}
</Button>
<div className="flex gap-2 border border-gray-300 p-2 m-4 bg-gray-100 rounded">
<div>Status</div>

<div>
{activity === "Available" ? (
<>
<Chip
variant="ghost"
color="green"
size="sm"
value="Available"
icon={
<span className="mx-auto mt-1 block h-2 w-2 rounded-full bg-green-900 content-['']" />
}
/>
</>
) : (
<>
<Chip
variant="ghost"
color="red"
size="sm"
value="Unavailable"
icon={
<span className="mx-auto mt-1 block h-2 w-2 rounded-full bg-red-900 content-['']" />
}
/>
</>
)}
<div>
{activity === "Available" ? (
<>
<Chip
variant="ghost"
color="green"
size="sm"
value="Available"
icon={
<span className="mx-auto mt-1 block h-2 w-2 rounded-full bg-green-900 content-['']" />
}
/>
</>
) : (
<>
<Chip
variant="ghost"
color="red"
size="sm"
value="Unavailable"
icon={
<span className="mx-auto mt-1 block h-2 w-2 rounded-full bg-red-900 content-['']" />
}
/>
</>
)}
</div>
</div>
</div>
</div>
</div>
);
);
};

export default AgentStatus;
201 changes: 105 additions & 96 deletions src/components/audittable/AuditTable.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,108 +1,117 @@
"use client";

import React, {useEffect, useState, useCallback, TdHTMLAttributes} from 'react';
import axios from 'axios';
import * as XLSX from 'xlsx';
import {Row} from '@tanstack/react-table'


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 React, {
useEffect,
useState,
useCallback,
TdHTMLAttributes,
} from "react";
import axios from "axios";
import * as XLSX from "xlsx";
import { Row } from "@tanstack/react-table";

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[];
}
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 [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])



const handleSelectionChange = useCallback((change: Record<string, boolean>, content: any[]) => {
setSelectedRows(change);
setSelectedContent(content);
console.log(change)
console.log(content)
}, []);


//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>;
}
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]);

const handleSelectionChange = useCallback(
(change: Record<string, boolean>, content: any[]) => {
setSelectedRows(change);
setSelectedContent(content);
console.log(change);
console.log(content);
},
[],
);

//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>;
}

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" onClick={exportSelectedRowsToExcel}>
Export Selected
</Button>
</div>
<Label htmlFor="search">Search</Label>
<Input type="search" id="search" placeholder="Search" />
</div>


<div className="container mx-auto py-10">
<DataTable columns={columns} data={data} onSelectionChange={handleSelectionChange}></DataTable>

</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}
onSelectionChange={handleSelectionChange}
></DataTable>
</div>
</>
);
}
);
};

export default AuditTable;
export default AuditTable;
Loading

0 comments on commit 080f1af

Please sign in to comment.