129 lines
4.4 KiB
TypeScript
129 lines
4.4 KiB
TypeScript
import { PiDotsThreeOutlineVerticalFill } from "react-icons/pi";
|
|
import { FaCheck, FaDatabase } from "react-icons/fa";
|
|
|
|
import AddAccountModal from "../accounts/AddAccountModal";
|
|
import { Bounce, toast } from "react-toastify";
|
|
import api from "../../config/api";
|
|
import { useState } from "react";
|
|
|
|
const Templates = () => {
|
|
const [openMenuId, setOpenMenuId] = useState<string | null>(null);
|
|
|
|
|
|
const handleAction = async (accountId: string, action: 'accept' | 'reject') => {
|
|
try {
|
|
let response = await api.post(`/api/accounts/${accountId}/accept/invite`)
|
|
console.log(response)
|
|
if (response.data.status === 202) {
|
|
toast.success("Login Successful", {
|
|
position: "top-center",
|
|
autoClose: 5000,
|
|
hideProgressBar: false,
|
|
closeOnClick: false,
|
|
pauseOnHover: true,
|
|
draggable: true,
|
|
progress: undefined,
|
|
theme: "light",
|
|
transition: Bounce,
|
|
});
|
|
}
|
|
} catch (error) {
|
|
console.error('Error posting data:', error);
|
|
} finally {
|
|
setOpenMenuId(null); // close menu
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
|
|
<div className="overflow-x-auto py-2">
|
|
<table className="min-w-full text-sm border border-gray-200 rounded bg-white shadow-sm">
|
|
<thead className="bg-gray-100 text-gray-700 uppercase text-xs tracking-wider">
|
|
<tr>
|
|
<th className="px-4 py-3 w-12"></th>
|
|
<th className="px-4 py-3 text-left">Name</th>
|
|
<th className="px-4 py-3 text-center">Owner</th>
|
|
<th className="px-4 py-3 text-center">Created Date</th>
|
|
<th className="px-4 py-3 text-center">Last Change</th>
|
|
<th className="px-4 py-3 text-center"></th>
|
|
<th className="px-4 py-3 text-center"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-gray-200">
|
|
|
|
|
|
<tr
|
|
className="hover:bg-gray-50 cursor-pointer"
|
|
>
|
|
<td className="px-4 py-3">
|
|
<div className="w-5 h-5 rounded border border-slate-300 flex justify-center items-center">
|
|
{/* {selectedTransactions.includes(tx.id) && (
|
|
<FaCheck className="text-purple-600 text-sm" />
|
|
)} */}
|
|
</div>
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
<div className="flex items-center gap-2">
|
|
<span>{"test"}</span>
|
|
</div>
|
|
</td>
|
|
<td className="px-4 py-3 text-center">{"1"}</td>
|
|
<td className="px-4 py-3 text-center">
|
|
<span className={`px-2 py-0.5 rounded-xl text-xs font-medium`}>
|
|
{"role"}
|
|
</span>
|
|
</td>
|
|
<td className="px-4 py-3 text-center">
|
|
<span className={`px-2 py-0.5 rounded-xl text-xs font-medium`}>
|
|
{"text"}
|
|
</span>
|
|
</td>
|
|
|
|
<td>
|
|
|
|
</td>
|
|
|
|
<td className="px-4 py-3 text-center relative">
|
|
<button
|
|
|
|
className="mx-auto"
|
|
aria-label="Actions menu"
|
|
>
|
|
<PiDotsThreeOutlineVerticalFill className="text-lg text-slate-300 hover:text-black" />
|
|
</button>
|
|
|
|
{/* Dropdown menu */}
|
|
{/* {openMenuId === "1" && (
|
|
<div
|
|
className="absolute right-13 top-6 mt-1 w-18 bg-white border text-[13px] font-bold border-gray-300 rounded-md shadow-lg z-10"
|
|
onClick={(e) => e.stopPropagation()} // prevent row click closing
|
|
>
|
|
<button
|
|
className="w-full px-3 py-1 text-left text-green-700 hover:bg-green-100 rounded-t-md cursor-pointer"
|
|
onClick={() => handleAction(1, 'accept')}
|
|
>
|
|
Accept
|
|
</button>
|
|
<button
|
|
className="w-full px-3 py-1 text-left text-red-700 hover:bg-red-100 rounded-b-md cursor-pointer"
|
|
onClick={() => handleAction(1, 'reject')}
|
|
>
|
|
Reject
|
|
</button>
|
|
</div>
|
|
)} */}
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Templates;
|