Add OAth flow for Gmail and update tables and UI

job-tracker-ui/src/components/CompaniesTable.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useMemo, useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
 
 import {
   Box,
@@ -25,6 +26,8 @@ import { useToast } from "../toast";
 
 export default function CompaniesTable() {
   const { toast } = useToast();
+  const location = useLocation();
+  const navigate = useNavigate();
   const [companies, setCompanies] = useState<Company[]>([]);
   const [editOpen, setEditOpen] = useState(false);
   const [editing, setEditing] = useState<Company | null>(null);
@@ -40,6 +43,17 @@ export default function CompaniesTable() {
     api.get<Company[]>("/companies").then((r) => setCompanies(r.data));
   }, []);
 
+  useEffect(() => {
+    const params = new URLSearchParams(location.search);
+    const editId = Number(params.get("edit") || 0);
+    if (!editId || companies.length === 0) return;
+    const company = companies.find((c) => c.id === editId);
+    if (!company) return;
+    openEdit(company);
+    params.delete("edit");
+    navigate({ pathname: location.pathname, search: params.toString() ? `?${params.toString()}` : "" }, { replace: true });
+  }, [companies, location.pathname, location.search, navigate]);
+
   const openEdit = (c: Company) => {
     setEditing(c);
     setRecruiterName(c.recruiterName ?? "");