feat(opendock): added delete button in the article tab

ref #23

frontend/src/routes/transportation/opendock/index.tsx

@@ -1,13 +1,18 @@
 import { useSuspenseQuery } from "@tanstack/react-query";
 import { createFileRoute, redirect } from "@tanstack/react-router";
 import { createColumnHelper } from "@tanstack/react-table";
-import { Suspense } from "react";
+import { Suspense, useState } from "react";
 import { authClient } from "../../../lib/auth-client";
 import { getArticleLinks } from "../../../lib/queries/getArticleLinks";
 import LstTable from "../../../lib/tableStuff/LstTable";
 import SearchableHeader from "../../../lib/tableStuff/SearchableHeader";
 import SkellyTable from "../../../lib/tableStuff/SkellyTable";
 import NewArticleLink from "./-components/NewArticleLink";
+import { api } from "../../../lib/apiHelper";
+import { toast } from "sonner";
+import { Button } from "../../../components/ui/button";
+import { Spinner } from "../../../components/ui/spinner";
+import { Trash } from "lucide-react";
 
 export const Route = createFileRoute("/transportation/opendock/")({
 	beforeLoad: async ({ location }) => {
@@ -91,6 +96,75 @@ const ArticleLinkTable = () => {
 			filterFn: "includesString",
 			cell: (i) => i.getValue(),
 		}),
+		columnHelper.accessor("deleteUser", {
+					header: ({ column }) => (
+						<SearchableHeader
+							column={column}
+							title="Delete User"
+							searchable={false}
+						/>
+					),
+					filterFn: "includesString",
+					cell: (i) => {
+						// biome-ignore lint: just removing the lint for now to get this going will maybe fix later
+						const [activeToggle, setActiveToggle] = useState(false);
+		
+						const onTrigger = async () => {
+							setActiveToggle(true);
+		
+							try {
+								const res = await api.delete(
+									`/opendock/articleCheck/${i.row.original.id}`,
+		
+									{
+										withCredentials: true,
+										timeout: 5000,
+										validateStatus: () => true,
+									},
+								);
+		
+								if (res.data.success) {
+									toast.success(`AV: ${i.row.original.av} was deleted.`);
+									refetch();
+									setActiveToggle(false);
+								}
+		
+								if (!res.data.success) {
+									toast.error(
+										`AV: ${i.row.original.av} encountered an error when trying to delete: ${res.data.message}`,
+									);
+									refetch();
+									setActiveToggle(false);
+								}
+							} catch (error) {
+								setActiveToggle(false);
+								console.error(error);
+							}
+						};
+		
+						return (
+							<div>
+								<div className="flex items-center space-x-2">
+									<Button
+										variant="destructive"
+										disabled={activeToggle}
+										onClick={onTrigger}
+									>
+										{activeToggle ? (
+											<span>
+												<Spinner />
+											</span>
+										) : (
+											<span>
+												<Trash />
+											</span>
+										)}
+									</Button>
+								</div>
+							</div>
+						);
+					},
+				}),
 	];
 	return (
 		<div>