From b11e0646b3893d8a25682f99d2521a0b02deaaac Mon Sep 17 00:00:00 2001
From: Oscar Thomson <oscmog@gmail.com>
Date: Wed, 8 Jul 2026 14:29:50 +0000
Subject: [PATCH 1/2] Changed team settings menu so that pools show the
 clusters that are in them

---
 frontend/app/components/TeamsSettingsPage.jsx | 323 ++++++++++--------
 1 file changed, 175 insertions(+), 148 deletions(-)

diff --git a/frontend/app/components/TeamsSettingsPage.jsx b/frontend/app/components/TeamsSettingsPage.jsx
index 36427ac..c90bb4b 100644
--- a/frontend/app/components/TeamsSettingsPage.jsx
+++ b/frontend/app/components/TeamsSettingsPage.jsx
@@ -7,7 +7,7 @@ import { Listbox, ListboxButton, ListboxOptions, ListboxOption } from '@headless
 import { FaLayerGroup, FaUser, FaUsers } from 'react-icons/fa';
 import { IoIosSettings } from 'react-icons/io';
 
-function timeNumberToInput(value) {
+function timeNumberToInput (value) {
    const numericValue = Number(value);
 
    if (Number.isNaN(numericValue)) return '';
@@ -28,13 +28,7 @@ function timeNumberToInput(value) {
    return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;
 }
 
-function timeInputToInt(value) {
-   const [hours, minutes] = value.split(':').map(Number);
-
-   return hours + minutes / 60;
-}
-
-export default function TeamSettingsPage() {
+export default function TeamSettingsPage () {
    const searchParams = useSearchParams();
    const teamId = searchParams.get('id');
 
@@ -63,22 +57,9 @@ export default function TeamSettingsPage() {
 
    const [allPools, setAllPools] = useState([]);
 
-   const loadAllPools = useCallback(async () => {
-      try {
-         const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/pool`);
-         const data = await res.json();
-
-         setAllPools(data.body ?? []);
-      } catch (err) {
-         console.error('Failed to fetch pools:', err);
-         setAllPools([]);
-      }
-   }, []);
-
    useEffect(() => {
       loadTeam();
-      loadAllPools();
-   }, [loadAllPools, loadTeam]);
+   }, [loadTeam]);
 
    const [selectedUserId, setSelectedUserId] = useState('');
    const [selectedPoolId, setSelectedPoolId] = useState('');
@@ -105,7 +86,7 @@ export default function TeamSettingsPage() {
    }, [getTeamUsers]);
 
    useEffect(() => {
-      async function getUsers() {
+      async function getUsers () {
          const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/people/team/not/${teamId}`);
          const data = await res.json();
          setUsers(data.body);
@@ -132,7 +113,21 @@ export default function TeamSettingsPage() {
    const getTeamPools = useCallback(async () => {
       const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/pool/team/${teamId}`);
       const data = await res.json();
-      setTeamPools(data.body);
+      const pools = data.body ?? [];
+
+      const enrichedPools = await Promise.all(
+         pools.map(async pool => {
+            const clusterRes = await fetch(
+               `${process.env.NEXT_PUBLIC_API_URL}/hpc/pool/${pool.id}`
+            );
+            const clusterData = await clusterRes.json();
+            return {
+               ...pool,
+               clusters: clusterData.body ?? []
+            };
+         })
+      );
+      setTeamPools(enrichedPools);
    }, [teamId]);
 
    useEffect(() => {
@@ -141,11 +136,11 @@ export default function TeamSettingsPage() {
 
    if (!team) {
       return (
-         <main className="flex min-h-screen items-center justify-center bg-gradient-to-br from-slate-900 via-slate-800 to-blue-900 p-6">
-            <div className="rounded-3xl border border-white/10 bg-white/10 p-10 text-center shadow-2xl backdrop-blur-xl">
-               <h1 className="mb-4 text-4xl font-bold text-white">Team not found</h1>
+         <main className='flex min-h-screen items-center justify-center bg-gradient-to-br from-slate-900 via-slate-800 to-blue-900 p-6'>
+            <div className='rounded-3xl border border-white/10 bg-white/10 p-10 text-center shadow-2xl backdrop-blur-xl'>
+               <h1 className='mb-4 text-4xl font-bold text-white'>Team not found</h1>
 
-               <p className="mb-6 text-slate-300">No team exists with ID: {teamId}</p>
+               <p className='mb-6 text-slate-300'>No team exists with ID: {teamId}</p>
             </div>
          </main>
       );
@@ -157,7 +152,7 @@ export default function TeamSettingsPage() {
          return;
       }
 
-      const userToAdd = users.find((user) => user.id === selectedUserId);
+      const userToAdd = users.find(user => user.id === selectedUserId);
       const userTeamId = userToAdd.teamId;
 
       const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/people/team/${userTeamId}`);
@@ -190,7 +185,7 @@ export default function TeamSettingsPage() {
             throw new Error(data.message || 'Failed to add user to team.');
          }
 
-         setUsers((previousUsers) => previousUsers.filter((user) => user.id !== selectedUserId));
+         setUsers(previousUsers => previousUsers.filter(user => user.id !== selectedUserId));
 
          setSelectedUserId('');
          getTeamUsers();
@@ -227,7 +222,7 @@ export default function TeamSettingsPage() {
             throw new Error(data.message || 'Failed to add user to team.');
          }
 
-         setPools((previousPools) => previousPools.filter((pool) => pool.id !== selectedPoolId));
+         setPools(previousPools => previousPools.filter(pool => pool.id !== selectedPoolId));
 
          setSelectedPoolId('');
          getTeamPools();
@@ -241,12 +236,12 @@ export default function TeamSettingsPage() {
       }
    };
 
-   const openRemovePoolConfirmation = (poolId) => {
-      const poolToRemove = teamPools.find((pool) => pool.id === poolId);
+   const openRemovePoolConfirmation = poolId => {
+      const poolToRemove = teamPools.find(pool => pool.id === poolId);
       setPendingRemovalPool(poolToRemove || { id: poolId, name: 'this pool' });
    };
 
-   async function confirmRemovePool() {
+   async function confirmRemovePool () {
       if (!pendingRemovalPool) {
          return;
       }
@@ -271,13 +266,13 @@ export default function TeamSettingsPage() {
             throw new Error(data.message || 'Failed to remove pool from team.');
          }
 
-         const removedPool = teamPools.find((pool) => pool.id === pendingRemovalPool.id);
+         const removedPool = teamPools.find(pool => pool.id === pendingRemovalPool.id);
          if (removedPool) {
-            setPools((previousPools) => [...previousPools, removedPool]);
+            setPools(previousPools => [...previousPools, removedPool]);
          }
 
-         setTeamPools((previousPools) =>
-            previousPools.filter((pool) => pool.id !== pendingRemovalPool.id)
+         setTeamPools(previousPools =>
+            previousPools.filter(pool => pool.id !== pendingRemovalPool.id)
          );
          setPendingRemovalPool(null);
          showStatus('Pool removed from team.');
@@ -327,7 +322,7 @@ export default function TeamSettingsPage() {
             throw new Error(data.message || 'Failed to update settings');
          }
 
-         setTeam((prev) => ({
+         setTeam(prev => ({
             ...prev,
             clusters_per_day: clustersPerDay
          }));
@@ -345,38 +340,38 @@ export default function TeamSettingsPage() {
 
    if (loadingTeams) {
       return (
-         <main className="flex min-h-screen items-center justify-center">
-            <p className="text-white">Loading team...</p>
+         <main className='flex min-h-screen items-center justify-center'>
+            <p className='text-white'>Loading team...</p>
          </main>
       );
    }
 
    if (!team) {
       return (
-         <main className="flex min-h-screen items-center justify-center">
-            <p className="text-white">Team not found: {teamId}</p>
+         <main className='flex min-h-screen items-center justify-center'>
+            <p className='text-white'>Team not found: {teamId}</p>
          </main>
       );
    }
 
    return (
-      <main className="flex min-h-screen items-center justify-center">
-         <div className="absolute h-96 w-96 rounded-full bg-blue-500/20 blur-3xl" />
-
-         <div className="relative z-10 w-full max-w-5xl">
-            <div className="rounded-3xl border border-white/10 bg-white/10 p-10 shadow-2xl backdrop-blur-xl">
-               <div className="mt-8 text-center">
-                  <div className="mb-4 flex justify-center">
-                     <FaUsers className="h-20 w-20 text-amber-300" aria-hidden="true" />
+      <main className='flex min-h-screen items-center justify-center'>
+         <div className='absolute h-96 w-96 rounded-full bg-blue-500/20 blur-3xl' />
+
+         <div className='relative z-10 w-full max-w-5xl'>
+            <div className='rounded-3xl border border-white/10 bg-white/10 p-10 shadow-2xl backdrop-blur-xl'>
+               <div className='mt-8 text-center'>
+                  <div className='mb-4 flex justify-center'>
+                     <FaUsers className='h-20 w-20 text-amber-300' aria-hidden='true' />
                   </div>
 
-                  <h1 className="text-5xl font-bold text-white">{team.name}</h1>
+                  <h1 className='text-5xl font-bold text-white'>{team.name}</h1>
 
-                  <p className="mt-3 text-lg text-slate-300">
+                  <p className='mt-3 text-lg text-slate-300'>
                      Manage users and pools assigned to this team.
                   </p>
 
-                  <p className="mt-2 text-sm text-amber-300">id: {team.id}</p>
+                  <p className='mt-2 text-sm text-amber-300'>id: {team.id}</p>
                </div>
 
                {statusMessage && (
@@ -391,37 +386,37 @@ export default function TeamSettingsPage() {
                   </div>
                )}
 
-               <div className="mt-10 grid gap-6 lg:grid-cols-2">
-                  <div className="rounded-2xl border border-blue-400/20 bg-blue-500/10 p-6">
-                     <FaUser className="mb-3 text-4xl text-blue-300" aria-hidden="true" />
+               <div className='mt-10 grid gap-6 lg:grid-cols-2'>
+                  <div className='rounded-2xl border border-blue-400/20 bg-blue-500/10 p-6'>
+                     <FaUser className='mb-3 text-4xl text-blue-300' aria-hidden='true' />
 
-                     <h2 className="mb-2 text-2xl font-bold text-white">Users</h2>
+                     <h2 className='mb-2 text-2xl font-bold text-white'>Users</h2>
 
-                     <p className="mb-4 text-sm text-slate-300">Add existing users to this team.</p>
+                     <p className='mb-4 text-sm text-slate-300'>Add existing users to this team.</p>
 
-                     <div className="mb-6 flex gap-3">
+                     <div className='mb-6 flex gap-3'>
                         <Listbox
-                           as="div"
+                           as='div'
                            value={selectedUserId}
                            onChange={setSelectedUserId}
-                           className="w-full"
+                           className='w-full'
                         >
-                           <div className="relative">
-                              <ListboxButton className="w-full rounded-xl border border-slate-600 bg-slate-800/80 px-3 py-3 text-left cursor-pointer text-white outline-none transition hover:border-white/20 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30">
-                                 {users.find((user) => user.id === selectedUserId)?.name ||
+                           <div className='relative'>
+                              <ListboxButton className='w-full rounded-xl border border-slate-600 bg-slate-800/80 px-3 py-3 text-left cursor-pointer text-white outline-none transition hover:border-white/20 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30'>
+                                 {users.find(user => user.id === selectedUserId)?.name ||
                                     'Select user'}
 
-                                 <span className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-slate-400">
+                                 <span className='pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-slate-400'>
                                     ▼
                                  </span>
                               </ListboxButton>
 
-                              <ListboxOptions className="absolute z-50 mt-2 max-h-40 w-full overflow-y-auto rounded-xl border border-white/10 bg-slate-900/95 shadow-2xl backdrop-blur-xl">
-                                 {users.map((user) => (
+                              <ListboxOptions className='absolute z-50 mt-2 max-h-40 w-full overflow-y-auto rounded-xl border border-white/10 bg-slate-900/95 shadow-2xl backdrop-blur-xl'>
+                                 {users.map(user => (
                                     <ListboxOption
                                        key={user.id}
                                        value={user.id}
-                                       className="cursor-pointer px-4 py-3 text-white transition data-[active]:bg-blue-500/20 data-[selected]:font-semibold"
+                                       className='cursor-pointer px-4 py-3 text-white transition data-[active]:bg-blue-500/20 data-[selected]:font-semibold'
                                     >
                                        {user.name}
                                     </ListboxOption>
@@ -431,32 +426,32 @@ export default function TeamSettingsPage() {
                         </Listbox>
 
                         <button
-                           type="button"
+                           type='button'
                            onClick={handleAddUser}
-                           className="rounded-xl bg-blue-600 px-5 py-3 cursor-pointer font-semibold text-white transition hover:bg-blue-500"
+                           className='rounded-xl bg-blue-600 px-5 py-3 cursor-pointer font-semibold text-white transition hover:bg-blue-500'
                         >
                            Add
                         </button>
                      </div>
 
-                     <div className="border-t border-white/10 pt-4">
-                        <h3 className="mb-3 text-sm font-semibold uppercase tracking-wide text-slate-300">
+                     <div className='border-t border-white/10 pt-4'>
+                        <h3 className='mb-3 text-sm font-semibold uppercase tracking-wide text-slate-300'>
                            Users in Team
                         </h3>
 
-                        <div className="space-y-2">
+                        <div className='space-y-2'>
                            {teamUsers.length === 0 ? (
-                              <p className="text-sm text-slate-400">No users assigned yet.</p>
+                              <p className='text-sm text-slate-400'>No users assigned yet.</p>
                            ) : (
-                              teamUsers.map((user) => (
+                              teamUsers.map(user => (
                                  <div
                                     key={user.id}
-                                    className="flex items-start justify-between rounded-xl border border-slate-600 bg-slate-800/80 px-4 py-3 text-white"
+                                    className='flex items-start justify-between rounded-xl border border-slate-600 bg-slate-800/80 px-4 py-3 text-white'
                                  >
                                     <div>
-                                       <p className="font-medium text-white">{user.name}</p>
+                                       <p className='font-medium text-white'>{user.name}</p>
 
-                                       <p className="text-xs text-slate-400">{user.id}</p>
+                                       <p className='text-xs text-slate-400'>{user.id}</p>
                                     </div>
                                  </div>
                               ))
@@ -465,38 +460,38 @@ export default function TeamSettingsPage() {
                      </div>
                   </div>
 
-                  <div className="rounded-2xl border border-emerald-400/20 bg-emerald-500/10 p-6">
-                     <FaLayerGroup className="mb-3 text-4xl text-emerald-300" aria-hidden="true" />
+                  <div className='rounded-2xl border border-emerald-400/20 bg-emerald-500/10 p-6'>
+                     <FaLayerGroup className='mb-3 text-4xl text-emerald-300' aria-hidden='true' />
 
-                     <h2 className="mb-2 text-2xl font-bold text-white">Pools</h2>
+                     <h2 className='mb-2 text-2xl font-bold text-white'>Pools</h2>
 
-                     <p className="mb-4 text-sm text-slate-300">
+                     <p className='mb-4 text-sm text-slate-300'>
                         Add existing cluster pools to this team.
                      </p>
 
-                     <div className="mb-6 flex gap-3">
+                     <div className='mb-6 flex gap-3'>
                         <Listbox
-                           as="div"
+                           as='div'
                            value={selectedPoolId}
                            onChange={setSelectedPoolId}
                            className={'w-full'}
                         >
-                           <div className="relative">
-                              <ListboxButton className="w-full rounded-xl border border-slate-600 bg-slate-800/80 px-3 py-3 text-left cursor-pointer text-white outline-none transition hover:border-white/20 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30">
-                                 {pools.find((pool) => pool.id === selectedPoolId)?.name ||
+                           <div className='relative'>
+                              <ListboxButton className='w-full rounded-xl border border-slate-600 bg-slate-800/80 px-3 py-3 text-left cursor-pointer text-white outline-none transition hover:border-white/20 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30'>
+                                 {pools.find(pool => pool.id === selectedPoolId)?.name ||
                                     'Select pool'}
 
-                                 <span className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-slate-400">
+                                 <span className='pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-slate-400'>
                                     ▼
                                  </span>
                               </ListboxButton>
 
-                              <ListboxOptions className="absolute z-50 mt-2 max-h-40 w-full overflow-auto rounded-xl border border-white/10 bg-slate-900/95 shadow-2xl backdrop-blur-xl">
-                                 {pools.map((pool) => (
+                              <ListboxOptions className='absolute z-50 mt-2 max-h-40 w-full overflow-auto rounded-xl border border-white/10 bg-slate-900/95 shadow-2xl backdrop-blur-xl'>
+                                 {pools.map(pool => (
                                     <ListboxOption
                                        key={pool.id}
                                        value={pool.id}
-                                       className="cursor-pointer px-4 py-3 text-white transition data-[active]:bg-blue-500/20 data-[selected]:font-semibold"
+                                       className='cursor-pointer px-4 py-3 text-white transition data-[active]:bg-blue-500/20 data-[selected]:font-semibold'
                                     >
                                        {pool.name}
                                     </ListboxOption>
@@ -506,43 +501,75 @@ export default function TeamSettingsPage() {
                         </Listbox>
 
                         <button
-                           type="button"
+                           type='button'
                            onClick={handleAddPool}
-                           className="rounded-xl bg-emerald-600 px-5 py-3 cursor-pointer font-semibold text-white transition hover:bg-emerald-500"
+                           className='rounded-xl bg-emerald-600 px-5 py-3 cursor-pointer font-semibold text-white transition hover:bg-emerald-500'
                         >
                            Add
                         </button>
                      </div>
 
-                     <div className="border-t border-white/10 pt-4">
-                        <h3 className="mb-3 text-sm font-semibold uppercase tracking-wide text-slate-300">
+                     <div className='border-t border-white/10 pt-4'>
+                        <h3 className='mb-3 text-sm font-semibold uppercase tracking-wide text-slate-300'>
                            Pools in Team
                         </h3>
 
-                        <div className="space-y-2">
+                        <div className='space-y-2'>
                            {teamPools.length === 0 ? (
-                              <p className="text-sm text-slate-400">No pools assigned yet.</p>
+                              <p className='text-sm text-slate-400'>No pools assigned yet.</p>
                            ) : (
-                              teamPools.map((pool) => (
+                              teamPools.map(pool => (
                                  <div
                                     key={pool.id}
-                                    className="flex items-center justify-between rounded-xl border border-slate-600 bg-slate-800/80 px-4 py-3 text-white"
+                                    className='flex items-center justify-between rounded-xl border border-slate-600 bg-slate-800/80 px-4 py-3 text-white'
                                  >
-                                    <Link href={`/pools?id=${pool.id}`} className="flex-1">
-                                       <p className="font-medium text-white transition hover:text-amber-300">
-                                          {pool.name}
-                                       </p>
-
-                                       <p className="text-xs text-slate-400">{pool.id}</p>
-
-                                       <p className="mt-1 text-xs text-cyan-300">
-                                          View pool settings
-                                       </p>
-                                    </Link>
+                                    <div className='relative flex-1'>
+                                       {/* Full card click target */}
+                                       <Link
+                                          href={`/pools?id=${pool.id}`}
+                                          className='absolute inset-0 z-0'
+                                          aria-label={`View ${pool.name}`}
+                                       />
+
+                                       {/* Card content */}
+                                       <div className='relative z-10 pointer-events-none'>
+                                          <p className='font-medium text-white transition hover:text-amber-300'>
+                                             {pool.name}
+                                          </p>
+
+                                          <p className='text-xs text-slate-400'>{pool.id}</p>
+
+                                          {pool.clusters.length > 0 && (
+                                             <div className='mt-3'>
+                                                <p className='mb-2 text-xs font-medium uppercase tracking-wide text-slate-500'>
+                                                   Clusters
+                                                </p>
+
+                                                <div className='flex flex-col gap-2'>
+                                                   {pool.clusters.map(cluster => (
+                                                      <Link
+                                                         key={cluster.id}
+                                                         href={`/clusters?id=${cluster.id}`}
+                                                         className='relative z-20 pointer-events-auto w-fit'
+                                                      >
+                                                         <span className='block rounded-lg bg-slate-700/80 px-2.5 py-1 text-xs text-slate-200 ring-1 ring-slate-600 transition hover:ring-cyan-400/50'>
+                                                            {cluster.name}
+                                                         </span>
+                                                      </Link>
+                                                   ))}
+                                                </div>
+                                             </div>
+                                          )}
+
+                                          <p className='mt-3 text-xs text-cyan-300'>
+                                             View pool settings
+                                          </p>
+                                       </div>
+                                    </div>
                                     <button
-                                       type="button"
+                                       type='button'
                                        onClick={() => openRemovePoolConfirmation(pool.id)}
-                                       className="ml-3 rounded-full border border-red-400/40 bg-red-500/10 px-2.5 py-1 text-sm text-red-200 transition hover:bg-red-500/20"
+                                       className='ml-3 rounded-full border border-red-400/40 bg-red-500/10 px-2.5 py-1 text-sm text-red-200 transition hover:bg-red-500/20'
                                        aria-label={`Remove ${pool.name} from team`}
                                     >
                                        ×
@@ -556,58 +583,58 @@ export default function TeamSettingsPage() {
                </div>
 
                {/* SETTINGS SECTION */}
-               <div className="mt-6 rounded-2xl border border-purple-400/20 bg-purple-500/10 p-6">
-                  <IoIosSettings className="mb-3 text-4xl text-purple-300" aria-hidden="true" />
+               <div className='mt-6 rounded-2xl border border-purple-400/20 bg-purple-500/10 p-6'>
+                  <IoIosSettings className='mb-3 text-4xl text-purple-300' aria-hidden='true' />
 
-                  <h2 className="mb-2 text-2xl font-bold text-white">Settings</h2>
+                  <h2 className='mb-2 text-2xl font-bold text-white'>Settings</h2>
 
-                  <p className="mb-4 text-sm text-slate-300">Team configuration options.</p>
+                  <p className='mb-4 text-sm text-slate-300'>Team configuration options.</p>
 
-                  <div className="flex flex-col gap-3">
-                     <label className="text-sm text-slate-300">Clusters per day</label>
+                  <div className='flex flex-col gap-3'>
+                     <label className='text-sm text-slate-300'>Clusters per day</label>
 
                      <input
-                        type="number"
+                        type='number'
                         value={clustersPerDay}
-                        onChange={(e) => setClustersPerDay(Number(e.target.value))}
+                        onChange={e => setClustersPerDay(Number(e.target.value))}
                         min={1}
-                        className="w-full rounded-xl border border-slate-600 bg-slate-800/80 px-3 py-3 text-white outline-none transition focus:border-purple-500 focus:ring-2 focus:ring-purple-500/30"
+                        className='w-full rounded-xl border border-slate-600 bg-slate-800/80 px-3 py-3 text-white outline-none transition focus:border-purple-500 focus:ring-2 focus:ring-purple-500/30'
                      />
                   </div>
 
-                  <div className="mt-4 flex flex-col gap-3">
-                     <label className="text-sm text-slate-300">
+                  <div className='mt-4 flex flex-col gap-3'>
+                     <label className='text-sm text-slate-300'>
                         <strong>Time window for cluster checks</strong>
                      </label>
 
-                     <div className="flex items-center gap-3">
+                     <div className='flex items-center gap-3'>
                         <input
-                           type="time"
+                           type='time'
                            value={startWindow}
-                           onChange={(event) => setStartWindow(event.target.value)}
-                           aria-label="Check window start time"
-                           className="min-w-0 flex-1 rounded-xl cursor-pointer border border-slate-600 bg-slate-800/80 px-3 py-3 text-white outline-none transition focus:border-purple-500 focus:ring-2 focus:ring-purple-500/30"
+                           onChange={event => setStartWindow(event.target.value)}
+                           aria-label='Check window start time'
+                           className='min-w-0 flex-1 rounded-xl cursor-pointer border border-slate-600 bg-slate-800/80 px-3 py-3 text-white outline-none transition focus:border-purple-500 focus:ring-2 focus:ring-purple-500/30'
                         />
 
-                        <span className="shrink-0 text-sm font-semibold text-slate-300">to</span>
+                        <span className='shrink-0 text-sm font-semibold text-slate-300'>to</span>
 
                         <input
-                           type="time"
+                           type='time'
                            value={endWindow}
-                           onChange={(event) => setEndWindow(event.target.value)}
-                           aria-label="Check window end time"
-                           className="min-w-0 flex-1 cursor-pointer rounded-xl border border-slate-600 bg-slate-800/80 px-3 py-3 text-white outline-none transition focus:border-purple-500 focus:ring-2 focus:ring-purple-500/30"
+                           onChange={event => setEndWindow(event.target.value)}
+                           aria-label='Check window end time'
+                           className='min-w-0 flex-1 cursor-pointer rounded-xl border border-slate-600 bg-slate-800/80 px-3 py-3 text-white outline-none transition focus:border-purple-500 focus:ring-2 focus:ring-purple-500/30'
                         />
                      </div>
                   </div>
 
                   {/* optional future button hook */}
-                  <div className="mt-5 flex justify-end">
+                  <div className='mt-5 flex justify-end'>
                      <button
-                        type="button"
+                        type='button'
                         onClick={handleSaveSettings}
                         disabled={savingSettings}
-                        className="rounded-xl bg-purple-600 px-5 py-3 font-semibold text-white transition hover:bg-purple-500 disabled:opacity-50"
+                        className='rounded-xl bg-purple-600 px-5 py-3 font-semibold text-white transition hover:bg-purple-500 disabled:opacity-50'
                      >
                         {savingSettings ? 'Saving...' : 'Save'}
                      </button>
@@ -617,33 +644,33 @@ export default function TeamSettingsPage() {
          </div>
 
          {pendingRemovalPool && (
-            <div className="fixed inset-0 z-[60] flex items-center justify-center bg-slate-950/70 px-4 backdrop-blur-sm">
-               <div className="w-full max-w-md rounded-3xl border border-red-400/20 bg-slate-900/95 p-6 shadow-2xl">
-                  <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-red-500/10 text-2xl text-red-300">
+            <div className='fixed inset-0 z-[60] flex items-center justify-center bg-slate-950/70 px-4 backdrop-blur-sm'>
+               <div className='w-full max-w-md rounded-3xl border border-red-400/20 bg-slate-900/95 p-6 shadow-2xl'>
+                  <div className='mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-red-500/10 text-2xl text-red-300'>
                      !
                   </div>
 
-                  <h3 className="text-xl font-semibold text-white">Remove pool from team?</h3>
+                  <h3 className='text-xl font-semibold text-white'>Remove pool from team?</h3>
 
-                  <p className="mt-2 text-sm text-slate-300">
+                  <p className='mt-2 text-sm text-slate-300'>
                      This will remove{' '}
-                     <span className="font-semibold text-white">{pendingRemovalPool.name}</span>{' '}
+                     <span className='font-semibold text-white'>{pendingRemovalPool.name}</span>{' '}
                      from this team.
                   </p>
 
-                  <div className="mt-6 flex justify-end gap-3">
+                  <div className='mt-6 flex justify-end gap-3'>
                      <button
-                        type="button"
+                        type='button'
                         onClick={() => setPendingRemovalPool(null)}
-                        className="rounded-xl border border-slate-600 px-4 py-2 text-sm font-medium text-slate-200 transition hover:bg-slate-800"
+                        className='rounded-xl border border-slate-600 px-4 py-2 text-sm font-medium text-slate-200 transition hover:bg-slate-800'
                      >
                         Cancel
                      </button>
 
                      <button
-                        type="button"
+                        type='button'
                         onClick={confirmRemovePool}
-                        className="rounded-xl bg-red-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-red-500"
+                        className='rounded-xl bg-red-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-red-500'
                      >
                         Remove Pool
                      </button>

From 2ac73b8012ab330e386c87c76ea18b08eabcddf9 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 8 Jul 2026 14:40:39 +0000
Subject: [PATCH 2/2] chore: apply formatting

---
 frontend/app/components/TeamsSettingsPage.jsx | 258 +++++++++---------
 1 file changed, 129 insertions(+), 129 deletions(-)

diff --git a/frontend/app/components/TeamsSettingsPage.jsx b/frontend/app/components/TeamsSettingsPage.jsx
index 36008e2..d915089 100644
--- a/frontend/app/components/TeamsSettingsPage.jsx
+++ b/frontend/app/components/TeamsSettingsPage.jsx
@@ -7,7 +7,7 @@ import { Listbox, ListboxButton, ListboxOptions, ListboxOption } from '@headless
 import { FaLayerGroup, FaUser, FaUsers } from 'react-icons/fa';
 import { IoIosSettings } from 'react-icons/io';
 
-function timeNumberToInput (value) {
+function timeNumberToInput(value) {
    const numericValue = Number(value);
 
    if (Number.isNaN(numericValue)) return '';
@@ -28,7 +28,7 @@ function timeNumberToInput (value) {
    return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;
 }
 
-export default function TeamSettingsPage () {
+export default function TeamSettingsPage() {
    const searchParams = useSearchParams();
    const teamId = searchParams.get('id');
 
@@ -84,7 +84,7 @@ export default function TeamSettingsPage () {
    }, [getTeamUsers]);
 
    useEffect(() => {
-      async function getUsers () {
+      async function getUsers() {
          const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/people/team/not/${teamId}`);
          const data = await res.json();
          setUsers(data.body);
@@ -114,7 +114,7 @@ export default function TeamSettingsPage () {
       const pools = data.body ?? [];
 
       const enrichedPools = await Promise.all(
-         pools.map(async pool => {
+         pools.map(async (pool) => {
             const clusterRes = await fetch(
                `${process.env.NEXT_PUBLIC_API_URL}/hpc/pool/${pool.id}`
             );
@@ -134,11 +134,11 @@ export default function TeamSettingsPage () {
 
    if (!team) {
       return (
-         <main className='flex min-h-screen items-center justify-center bg-gradient-to-br from-slate-900 via-slate-800 to-blue-900 p-6'>
-            <div className='rounded-3xl border border-white/10 bg-white/10 p-10 text-center shadow-2xl backdrop-blur-xl'>
-               <h1 className='mb-4 text-4xl font-bold text-white'>Team not found</h1>
+         <main className="flex min-h-screen items-center justify-center bg-gradient-to-br from-slate-900 via-slate-800 to-blue-900 p-6">
+            <div className="rounded-3xl border border-white/10 bg-white/10 p-10 text-center shadow-2xl backdrop-blur-xl">
+               <h1 className="mb-4 text-4xl font-bold text-white">Team not found</h1>
 
-               <p className='mb-6 text-slate-300'>No team exists with ID: {teamId}</p>
+               <p className="mb-6 text-slate-300">No team exists with ID: {teamId}</p>
             </div>
          </main>
       );
@@ -150,7 +150,7 @@ export default function TeamSettingsPage () {
          return;
       }
 
-      const userToAdd = users.find(user => user.id === selectedUserId);
+      const userToAdd = users.find((user) => user.id === selectedUserId);
       const userTeamId = userToAdd.teamId;
 
       const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/people/team/${userTeamId}`);
@@ -183,7 +183,7 @@ export default function TeamSettingsPage () {
             throw new Error(data.message || 'Failed to add user to team.');
          }
 
-         setUsers(previousUsers => previousUsers.filter(user => user.id !== selectedUserId));
+         setUsers((previousUsers) => previousUsers.filter((user) => user.id !== selectedUserId));
 
          setSelectedUserId('');
          getTeamUsers();
@@ -220,7 +220,7 @@ export default function TeamSettingsPage () {
             throw new Error(data.message || 'Failed to add user to team.');
          }
 
-         setPools(previousPools => previousPools.filter(pool => pool.id !== selectedPoolId));
+         setPools((previousPools) => previousPools.filter((pool) => pool.id !== selectedPoolId));
 
          setSelectedPoolId('');
          getTeamPools();
@@ -234,12 +234,12 @@ export default function TeamSettingsPage () {
       }
    };
 
-   const openRemovePoolConfirmation = poolId => {
-      const poolToRemove = teamPools.find(pool => pool.id === poolId);
+   const openRemovePoolConfirmation = (poolId) => {
+      const poolToRemove = teamPools.find((pool) => pool.id === poolId);
       setPendingRemovalPool(poolToRemove || { id: poolId, name: 'this pool' });
    };
 
-   async function confirmRemovePool () {
+   async function confirmRemovePool() {
       if (!pendingRemovalPool) {
          return;
       }
@@ -264,13 +264,13 @@ export default function TeamSettingsPage () {
             throw new Error(data.message || 'Failed to remove pool from team.');
          }
 
-         const removedPool = teamPools.find(pool => pool.id === pendingRemovalPool.id);
+         const removedPool = teamPools.find((pool) => pool.id === pendingRemovalPool.id);
          if (removedPool) {
-            setPools(previousPools => [...previousPools, removedPool]);
+            setPools((previousPools) => [...previousPools, removedPool]);
          }
 
-         setTeamPools(previousPools =>
-            previousPools.filter(pool => pool.id !== pendingRemovalPool.id)
+         setTeamPools((previousPools) =>
+            previousPools.filter((pool) => pool.id !== pendingRemovalPool.id)
          );
          setPendingRemovalPool(null);
          showStatus('Pool removed from team.');
@@ -337,7 +337,7 @@ export default function TeamSettingsPage () {
             throw new Error(data.message || 'Failed to update settings');
          }
 
-         setTeam(prev => ({
+         setTeam((prev) => ({
             ...prev,
             clusters_per_day: clustersPerDay,
             start_window: startWindowInt,
@@ -357,38 +357,38 @@ export default function TeamSettingsPage () {
 
    if (loadingTeams) {
       return (
-         <main className='flex min-h-screen items-center justify-center'>
-            <p className='text-white'>Loading team...</p>
+         <main className="flex min-h-screen items-center justify-center">
+            <p className="text-white">Loading team...</p>
          </main>
       );
    }
 
    if (!team) {
       return (
-         <main className='flex min-h-screen items-center justify-center'>
-            <p className='text-white'>Team not found: {teamId}</p>
+         <main className="flex min-h-screen items-center justify-center">
+            <p className="text-white">Team not found: {teamId}</p>
          </main>
       );
    }
 
    return (
-      <main className='flex min-h-screen items-center justify-center'>
-         <div className='absolute h-96 w-96 rounded-full bg-blue-500/20 blur-3xl' />
-
-         <div className='relative z-10 w-full max-w-5xl'>
-            <div className='rounded-3xl border border-white/10 bg-white/10 p-10 shadow-2xl backdrop-blur-xl'>
-               <div className='mt-8 text-center'>
-                  <div className='mb-4 flex justify-center'>
-                     <FaUsers className='h-20 w-20 text-amber-300' aria-hidden='true' />
+      <main className="flex min-h-screen items-center justify-center">
+         <div className="absolute h-96 w-96 rounded-full bg-blue-500/20 blur-3xl" />
+
+         <div className="relative z-10 w-full max-w-5xl">
+            <div className="rounded-3xl border border-white/10 bg-white/10 p-10 shadow-2xl backdrop-blur-xl">
+               <div className="mt-8 text-center">
+                  <div className="mb-4 flex justify-center">
+                     <FaUsers className="h-20 w-20 text-amber-300" aria-hidden="true" />
                   </div>
 
-                  <h1 className='text-5xl font-bold text-white'>{team.name}</h1>
+                  <h1 className="text-5xl font-bold text-white">{team.name}</h1>
 
-                  <p className='mt-3 text-lg text-slate-300'>
+                  <p className="mt-3 text-lg text-slate-300">
                      Manage users and pools assigned to this team.
                   </p>
 
-                  <p className='mt-2 text-sm text-amber-300'>id: {team.id}</p>
+                  <p className="mt-2 text-sm text-amber-300">id: {team.id}</p>
                </div>
 
                {statusMessage && (
@@ -403,37 +403,37 @@ export default function TeamSettingsPage () {
                   </div>
                )}
 
-               <div className='mt-10 grid gap-6 lg:grid-cols-2'>
-                  <div className='rounded-2xl border border-blue-400/20 bg-blue-500/10 p-6'>
-                     <FaUser className='mb-3 text-4xl text-blue-300' aria-hidden='true' />
+               <div className="mt-10 grid gap-6 lg:grid-cols-2">
+                  <div className="rounded-2xl border border-blue-400/20 bg-blue-500/10 p-6">
+                     <FaUser className="mb-3 text-4xl text-blue-300" aria-hidden="true" />
 
-                     <h2 className='mb-2 text-2xl font-bold text-white'>Users</h2>
+                     <h2 className="mb-2 text-2xl font-bold text-white">Users</h2>
 
-                     <p className='mb-4 text-sm text-slate-300'>Add existing users to this team.</p>
+                     <p className="mb-4 text-sm text-slate-300">Add existing users to this team.</p>
 
-                     <div className='mb-6 flex gap-3'>
+                     <div className="mb-6 flex gap-3">
                         <Listbox
-                           as='div'
+                           as="div"
                            value={selectedUserId}
                            onChange={setSelectedUserId}
-                           className='w-full'
+                           className="w-full"
                         >
-                           <div className='relative'>
-                              <ListboxButton className='w-full rounded-xl border border-slate-600 bg-slate-800/80 px-3 py-3 text-left cursor-pointer text-white outline-none transition hover:border-white/20 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30'>
-                                 {users.find(user => user.id === selectedUserId)?.name ||
+                           <div className="relative">
+                              <ListboxButton className="w-full rounded-xl border border-slate-600 bg-slate-800/80 px-3 py-3 text-left cursor-pointer text-white outline-none transition hover:border-white/20 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30">
+                                 {users.find((user) => user.id === selectedUserId)?.name ||
                                     'Select user'}
 
-                                 <span className='pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-slate-400'>
+                                 <span className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-slate-400">
                                     ▼
                                  </span>
                               </ListboxButton>
 
-                              <ListboxOptions className='absolute z-50 mt-2 max-h-40 w-full overflow-y-auto rounded-xl border border-white/10 bg-slate-900/95 shadow-2xl backdrop-blur-xl'>
-                                 {users.map(user => (
+                              <ListboxOptions className="absolute z-50 mt-2 max-h-40 w-full overflow-y-auto rounded-xl border border-white/10 bg-slate-900/95 shadow-2xl backdrop-blur-xl">
+                                 {users.map((user) => (
                                     <ListboxOption
                                        key={user.id}
                                        value={user.id}
-                                       className='cursor-pointer px-4 py-3 text-white transition data-[active]:bg-blue-500/20 data-[selected]:font-semibold'
+                                       className="cursor-pointer px-4 py-3 text-white transition data-[active]:bg-blue-500/20 data-[selected]:font-semibold"
                                     >
                                        {user.name}
                                     </ListboxOption>
@@ -443,32 +443,32 @@ export default function TeamSettingsPage () {
                         </Listbox>
 
                         <button
-                           type='button'
+                           type="button"
                            onClick={handleAddUser}
-                           className='rounded-xl bg-blue-600 px-5 py-3 cursor-pointer font-semibold text-white transition hover:bg-blue-500'
+                           className="rounded-xl bg-blue-600 px-5 py-3 cursor-pointer font-semibold text-white transition hover:bg-blue-500"
                         >
                            Add
                         </button>
                      </div>
 
-                     <div className='border-t border-white/10 pt-4'>
-                        <h3 className='mb-3 text-sm font-semibold uppercase tracking-wide text-slate-300'>
+                     <div className="border-t border-white/10 pt-4">
+                        <h3 className="mb-3 text-sm font-semibold uppercase tracking-wide text-slate-300">
                            Users in Team
                         </h3>
 
-                        <div className='space-y-2'>
+                        <div className="space-y-2">
                            {teamUsers.length === 0 ? (
-                              <p className='text-sm text-slate-400'>No users assigned yet.</p>
+                              <p className="text-sm text-slate-400">No users assigned yet.</p>
                            ) : (
-                              teamUsers.map(user => (
+                              teamUsers.map((user) => (
                                  <div
                                     key={user.id}
-                                    className='flex items-start justify-between rounded-xl border border-slate-600 bg-slate-800/80 px-4 py-3 text-white'
+                                    className="flex items-start justify-between rounded-xl border border-slate-600 bg-slate-800/80 px-4 py-3 text-white"
                                  >
                                     <div>
-                                       <p className='font-medium text-white'>{user.name}</p>
+                                       <p className="font-medium text-white">{user.name}</p>
 
-                                       <p className='text-xs text-slate-400'>{user.id}</p>
+                                       <p className="text-xs text-slate-400">{user.id}</p>
                                     </div>
                                  </div>
                               ))
@@ -477,38 +477,38 @@ export default function TeamSettingsPage () {
                      </div>
                   </div>
 
-                  <div className='rounded-2xl border border-emerald-400/20 bg-emerald-500/10 p-6'>
-                     <FaLayerGroup className='mb-3 text-4xl text-emerald-300' aria-hidden='true' />
+                  <div className="rounded-2xl border border-emerald-400/20 bg-emerald-500/10 p-6">
+                     <FaLayerGroup className="mb-3 text-4xl text-emerald-300" aria-hidden="true" />
 
-                     <h2 className='mb-2 text-2xl font-bold text-white'>Pools</h2>
+                     <h2 className="mb-2 text-2xl font-bold text-white">Pools</h2>
 
-                     <p className='mb-4 text-sm text-slate-300'>
+                     <p className="mb-4 text-sm text-slate-300">
                         Add existing cluster pools to this team.
                      </p>
 
-                     <div className='mb-6 flex gap-3'>
+                     <div className="mb-6 flex gap-3">
                         <Listbox
-                           as='div'
+                           as="div"
                            value={selectedPoolId}
                            onChange={setSelectedPoolId}
                            className={'w-full'}
                         >
-                           <div className='relative'>
-                              <ListboxButton className='w-full rounded-xl border border-slate-600 bg-slate-800/80 px-3 py-3 text-left cursor-pointer text-white outline-none transition hover:border-white/20 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30'>
-                                 {pools.find(pool => pool.id === selectedPoolId)?.name ||
+                           <div className="relative">
+                              <ListboxButton className="w-full rounded-xl border border-slate-600 bg-slate-800/80 px-3 py-3 text-left cursor-pointer text-white outline-none transition hover:border-white/20 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30">
+                                 {pools.find((pool) => pool.id === selectedPoolId)?.name ||
                                     'Select pool'}
 
-                                 <span className='pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-slate-400'>
+                                 <span className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-slate-400">
                                     ▼
                                  </span>
                               </ListboxButton>
 
-                              <ListboxOptions className='absolute z-50 mt-2 max-h-40 w-full overflow-auto rounded-xl border border-white/10 bg-slate-900/95 shadow-2xl backdrop-blur-xl'>
-                                 {pools.map(pool => (
+                              <ListboxOptions className="absolute z-50 mt-2 max-h-40 w-full overflow-auto rounded-xl border border-white/10 bg-slate-900/95 shadow-2xl backdrop-blur-xl">
+                                 {pools.map((pool) => (
                                     <ListboxOption
                                        key={pool.id}
                                        value={pool.id}
-                                       className='cursor-pointer px-4 py-3 text-white transition data-[active]:bg-blue-500/20 data-[selected]:font-semibold'
+                                       className="cursor-pointer px-4 py-3 text-white transition data-[active]:bg-blue-500/20 data-[selected]:font-semibold"
                                     >
                                        {pool.name}
                                     </ListboxOption>
@@ -518,58 +518,58 @@ export default function TeamSettingsPage () {
                         </Listbox>
 
                         <button
-                           type='button'
+                           type="button"
                            onClick={handleAddPool}
-                           className='rounded-xl bg-emerald-600 px-5 py-3 cursor-pointer font-semibold text-white transition hover:bg-emerald-500'
+                           className="rounded-xl bg-emerald-600 px-5 py-3 cursor-pointer font-semibold text-white transition hover:bg-emerald-500"
                         >
                            Add
                         </button>
                      </div>
 
-                     <div className='border-t border-white/10 pt-4'>
-                        <h3 className='mb-3 text-sm font-semibold uppercase tracking-wide text-slate-300'>
+                     <div className="border-t border-white/10 pt-4">
+                        <h3 className="mb-3 text-sm font-semibold uppercase tracking-wide text-slate-300">
                            Pools in Team
                         </h3>
 
-                        <div className='space-y-2'>
+                        <div className="space-y-2">
                            {teamPools.length === 0 ? (
-                              <p className='text-sm text-slate-400'>No pools assigned yet.</p>
+                              <p className="text-sm text-slate-400">No pools assigned yet.</p>
                            ) : (
-                              teamPools.map(pool => (
+                              teamPools.map((pool) => (
                                  <div
                                     key={pool.id}
-                                    className='flex items-center justify-between rounded-xl border border-slate-600 bg-slate-800/80 px-4 py-3 text-white'
+                                    className="flex items-center justify-between rounded-xl border border-slate-600 bg-slate-800/80 px-4 py-3 text-white"
                                  >
-                                    <div className='relative flex-1'>
+                                    <div className="relative flex-1">
                                        {/* Full card click target */}
                                        <Link
                                           href={`/pools?id=${pool.id}`}
-                                          className='absolute inset-0 z-0'
+                                          className="absolute inset-0 z-0"
                                           aria-label={`View ${pool.name}`}
                                        />
 
                                        {/* Card content */}
-                                       <div className='relative z-10 pointer-events-none'>
-                                          <p className='font-medium text-white transition hover:text-amber-300'>
+                                       <div className="relative z-10 pointer-events-none">
+                                          <p className="font-medium text-white transition hover:text-amber-300">
                                              {pool.name}
                                           </p>
 
-                                          <p className='text-xs text-slate-400'>{pool.id}</p>
+                                          <p className="text-xs text-slate-400">{pool.id}</p>
 
                                           {pool.clusters.length > 0 && (
-                                             <div className='mt-3'>
-                                                <p className='mb-2 text-xs font-medium uppercase tracking-wide text-slate-500'>
+                                             <div className="mt-3">
+                                                <p className="mb-2 text-xs font-medium uppercase tracking-wide text-slate-500">
                                                    Clusters
                                                 </p>
 
-                                                <div className='flex flex-col gap-2'>
-                                                   {pool.clusters.map(cluster => (
+                                                <div className="flex flex-col gap-2">
+                                                   {pool.clusters.map((cluster) => (
                                                       <Link
                                                          key={cluster.id}
                                                          href={`/clusters?id=${cluster.id}`}
-                                                         className='relative z-20 pointer-events-auto w-fit'
+                                                         className="relative z-20 pointer-events-auto w-fit"
                                                       >
-                                                         <span className='block rounded-lg bg-slate-700/80 px-2.5 py-1 text-xs text-slate-200 ring-1 ring-slate-600 transition hover:ring-cyan-400/50'>
+                                                         <span className="block rounded-lg bg-slate-700/80 px-2.5 py-1 text-xs text-slate-200 ring-1 ring-slate-600 transition hover:ring-cyan-400/50">
                                                             {cluster.name}
                                                          </span>
                                                       </Link>
@@ -578,15 +578,15 @@ export default function TeamSettingsPage () {
                                              </div>
                                           )}
 
-                                          <p className='mt-3 text-xs text-cyan-300'>
+                                          <p className="mt-3 text-xs text-cyan-300">
                                              View pool settings
                                           </p>
                                        </div>
                                     </div>
                                     <button
-                                       type='button'
+                                       type="button"
                                        onClick={() => openRemovePoolConfirmation(pool.id)}
-                                       className='ml-3 rounded-full border border-red-400/40 bg-red-500/10 px-2.5 py-1 text-sm text-red-200 transition hover:bg-red-500/20'
+                                       className="ml-3 rounded-full border border-red-400/40 bg-red-500/10 px-2.5 py-1 text-sm text-red-200 transition hover:bg-red-500/20"
                                        aria-label={`Remove ${pool.name} from team`}
                                     >
                                        ✕
@@ -600,58 +600,58 @@ export default function TeamSettingsPage () {
                </div>
 
                {/* SETTINGS SECTION */}
-               <div className='mt-6 rounded-2xl border border-purple-400/20 bg-purple-500/10 p-6'>
-                  <IoIosSettings className='mb-3 text-4xl text-purple-300' aria-hidden='true' />
+               <div className="mt-6 rounded-2xl border border-purple-400/20 bg-purple-500/10 p-6">
+                  <IoIosSettings className="mb-3 text-4xl text-purple-300" aria-hidden="true" />
 
-                  <h2 className='mb-2 text-2xl font-bold text-white'>Settings</h2>
+                  <h2 className="mb-2 text-2xl font-bold text-white">Settings</h2>
 
-                  <p className='mb-4 text-sm text-slate-300'>Team configuration options.</p>
+                  <p className="mb-4 text-sm text-slate-300">Team configuration options.</p>
 
-                  <div className='flex flex-col gap-3'>
-                     <label className='text-sm text-slate-300'>Clusters per day</label>
+                  <div className="flex flex-col gap-3">
+                     <label className="text-sm text-slate-300">Clusters per day</label>
 
                      <input
-                        type='number'
+                        type="number"
                         value={clustersPerDay}
-                        onChange={e => setClustersPerDay(Number(e.target.value))}
+                        onChange={(e) => setClustersPerDay(Number(e.target.value))}
                         min={1}
-                        className='w-full rounded-xl border border-slate-600 bg-slate-800/80 px-3 py-3 text-white outline-none transition focus:border-purple-500 focus:ring-2 focus:ring-purple-500/30'
+                        className="w-full rounded-xl border border-slate-600 bg-slate-800/80 px-3 py-3 text-white outline-none transition focus:border-purple-500 focus:ring-2 focus:ring-purple-500/30"
                      />
                   </div>
 
-                  <div className='mt-4 flex flex-col gap-3'>
-                     <label className='text-sm text-slate-300'>
+                  <div className="mt-4 flex flex-col gap-3">
+                     <label className="text-sm text-slate-300">
                         <strong>Time window for cluster checks</strong>
                      </label>
 
-                     <div className='flex items-center gap-3'>
+                     <div className="flex items-center gap-3">
                         <input
-                           type='time'
+                           type="time"
                            value={startWindow}
-                           onChange={event => setStartWindow(event.target.value)}
-                           aria-label='Check window start time'
-                           className='min-w-0 flex-1 rounded-xl cursor-pointer border border-slate-600 bg-slate-800/80 px-3 py-3 text-white outline-none transition focus:border-purple-500 focus:ring-2 focus:ring-purple-500/30'
+                           onChange={(event) => setStartWindow(event.target.value)}
+                           aria-label="Check window start time"
+                           className="min-w-0 flex-1 rounded-xl cursor-pointer border border-slate-600 bg-slate-800/80 px-3 py-3 text-white outline-none transition focus:border-purple-500 focus:ring-2 focus:ring-purple-500/30"
                         />
 
-                        <span className='shrink-0 text-sm font-semibold text-slate-300'>to</span>
+                        <span className="shrink-0 text-sm font-semibold text-slate-300">to</span>
 
                         <input
-                           type='time'
+                           type="time"
                            value={endWindow}
-                           onChange={event => setEndWindow(event.target.value)}
-                           aria-label='Check window end time'
-                           className='min-w-0 flex-1 cursor-pointer rounded-xl border border-slate-600 bg-slate-800/80 px-3 py-3 text-white outline-none transition focus:border-purple-500 focus:ring-2 focus:ring-purple-500/30'
+                           onChange={(event) => setEndWindow(event.target.value)}
+                           aria-label="Check window end time"
+                           className="min-w-0 flex-1 cursor-pointer rounded-xl border border-slate-600 bg-slate-800/80 px-3 py-3 text-white outline-none transition focus:border-purple-500 focus:ring-2 focus:ring-purple-500/30"
                         />
                      </div>
                   </div>
 
                   {/* optional future button hook */}
-                  <div className='mt-5 flex justify-end'>
+                  <div className="mt-5 flex justify-end">
                      <button
-                        type='button'
+                        type="button"
                         onClick={handleSaveSettings}
                         disabled={savingSettings}
-                        className='rounded-xl bg-purple-600 px-5 py-3 font-semibold text-white transition hover:bg-purple-500 disabled:opacity-50'
+                        className="rounded-xl bg-purple-600 px-5 py-3 font-semibold text-white transition hover:bg-purple-500 disabled:opacity-50"
                      >
                         {savingSettings ? 'Saving...' : 'Save'}
                      </button>
@@ -661,33 +661,33 @@ export default function TeamSettingsPage () {
          </div>
 
          {pendingRemovalPool && (
-            <div className='fixed inset-0 z-[60] flex items-center justify-center bg-slate-950/70 px-4 backdrop-blur-sm'>
-               <div className='w-full max-w-md rounded-3xl border border-red-400/20 bg-slate-900/95 p-6 shadow-2xl'>
-                  <div className='mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-red-500/10 text-2xl text-red-300'>
+            <div className="fixed inset-0 z-[60] flex items-center justify-center bg-slate-950/70 px-4 backdrop-blur-sm">
+               <div className="w-full max-w-md rounded-3xl border border-red-400/20 bg-slate-900/95 p-6 shadow-2xl">
+                  <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-red-500/10 text-2xl text-red-300">
                      !
                   </div>
 
-                  <h3 className='text-xl font-semibold text-white'>Remove pool from team?</h3>
+                  <h3 className="text-xl font-semibold text-white">Remove pool from team?</h3>
 
-                  <p className='mt-2 text-sm text-slate-300'>
+                  <p className="mt-2 text-sm text-slate-300">
                      This will remove{' '}
-                     <span className='font-semibold text-white'>{pendingRemovalPool.name}</span>{' '}
+                     <span className="font-semibold text-white">{pendingRemovalPool.name}</span>{' '}
                      from this team.
                   </p>
 
-                  <div className='mt-6 flex justify-end gap-3'>
+                  <div className="mt-6 flex justify-end gap-3">
                      <button
-                        type='button'
+                        type="button"
                         onClick={() => setPendingRemovalPool(null)}
-                        className='rounded-xl border border-slate-600 px-4 py-2 text-sm font-medium text-slate-200 transition hover:bg-slate-800'
+                        className="rounded-xl border border-slate-600 px-4 py-2 text-sm font-medium text-slate-200 transition hover:bg-slate-800"
                      >
                         Cancel
                      </button>
 
                      <button
-                        type='button'
+                        type="button"
                         onClick={confirmRemovePool}
-                        className='rounded-xl bg-red-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-red-500'
+                        className="rounded-xl bg-red-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-red-500"
                      >
                         Remove Pool
                      </button>