Add OAth flow for Gmail and update tables and UI

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

@@ -1,4 +1,5 @@
 import React, { useEffect, useMemo, useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
 
 import {
   Box,
@@ -122,6 +123,8 @@ function statusTone(status: string): string {
 export default function JobTable({ refreshToken, pageSize, onPageSizeChange, columns, onColumnsChange, mode = "jobs" }: Props) {
   const theme = useTheme();
   const { toast } = useToast();
+  const location = useLocation();
+  const navigate = useNavigate();
   const [jobs, setJobs] = useState<JobApplication[]>([]);
   const [total, setTotal] = useState(0);
   const [page, setPage] = useState(0);
@@ -167,6 +170,17 @@ export default function JobTable({ refreshToken, pageSize, onPageSizeChange, col
     });
   }, [params, refreshToken, reloadToken]);
 
+  useEffect(() => {
+    const paramsSearch = new URLSearchParams(location.search);
+    const openId = Number(paramsSearch.get("open") || 0);
+    if (!openId || jobs.length === 0) return;
+    const job = jobs.find((j) => j.id === openId);
+    if (!job) return;
+    setDetailsJobId(openId);
+    paramsSearch.delete("open");
+    navigate({ pathname: location.pathname, search: paramsSearch.toString() ? `?${paramsSearch.toString()}` : "" }, { replace: true });
+  }, [jobs, location.pathname, location.search, navigate]);
+
   const requestSort = (key: typeof sortBy) => {
     if (sortBy === key) setSortDir((d) => (d === "asc" ? "desc" : "asc"));
     else {