adding scheduler

src/pages/CompaniesPage.tsx

@@ -26,6 +26,7 @@ export function CompaniesPage({ backendPreference }: CompaniesPageProps) {
   const [employeeNamesByCompany, setEmployeeNamesByCompany] = useState<EmployeeNamesByCompany>({});
   const [users, setUsers] = useState<Employee[]>([]);
   const [companyName, setCompanyName] = useState("");
+  const [companyToDelete, setCompanyToDelete] = useState<Company | null>(null);
   const [selectedCompany, setSelectedCompany] = useState<Company | null>(null);
   const [selectedEmployeeId, setSelectedEmployeeId] = useState("");
   const [error, setError] = useState("");
@@ -107,18 +108,17 @@ export function CompaniesPage({ backendPreference }: CompaniesPageProps) {
     }
   }
 
-  async function handleDeleteCompany(company: Company) {
-    const shouldDelete = window.confirm(`Delete ${company.name}?`);
-
-    if (!shouldDelete) {
+  async function handleDeleteCompany() {
+    if (!companyToDelete) {
       return;
     }
 
-    setDeletingCompanyId(company.id);
+    setDeletingCompanyId(companyToDelete.id);
     setError("");
 
     try {
-      await deleteCompany(backendPreference, company.id);
+      await deleteCompany(backendPreference, companyToDelete.id);
+      setCompanyToDelete(null);
       await loadCompanies();
     } catch (deleteError) {
       setError(deleteError instanceof Error ? deleteError.message : "Unable to delete company");
@@ -151,7 +151,7 @@ export function CompaniesPage({ backendPreference }: CompaniesPageProps) {
               <button
                 className={styles.deleteButton}
                 disabled={deletingCompanyId === company.id}
-                onClick={() => void handleDeleteCompany(company)}
+                onClick={() => setCompanyToDelete(company)}
                 type="button"
                 aria-label={`Delete ${company.name}`}
               >
@@ -196,31 +196,75 @@ export function CompaniesPage({ backendPreference }: CompaniesPageProps) {
         </Modal>
       ) : null}
 
-      {selectedCompany ? (
-        <Modal
-          title={`Add users to ${selectedCompany.name}`}
-          onClose={() => setSelectedCompany(null)}
-        >
-          <form className={styles.form} onSubmit={handleAssignEmployee}>
-            <label>
-              Existing user
-              <select
-                value={selectedEmployeeId}
-                onChange={(event) => setSelectedEmployeeId(event.target.value)}
-                required
+      {selectedCompany
+        ? (() => {
+            const assignedNames = new Set(employeeNamesByCompany[selectedCompany.id] ?? []);
+            const availableUsers = users.filter(
+              (user) => !assignedNames.has(`${user.name} ${user.last_name}`),
+            );
+
+            return (
+              <Modal
+                title={`Add users to ${selectedCompany.name}`}
+                onClose={() => setSelectedCompany(null)}
               >
-                <option value="">Select a user</option>
-                {users.map((user) => (
-                  <option key={user.id} value={user.id}>
-                    {user.name} {user.last_name}
-                  </option>
-                ))}
-              </select>
-            </label>
-            <button className={styles.primaryButton} disabled={isSaving} type="submit">
-              {isSaving ? "Saving..." : "Assign user"}
-            </button>
-          </form>
+                <form className={styles.form} onSubmit={handleAssignEmployee}>
+                  {availableUsers.length === 0 ? (
+                    <p className={styles.muted}>All users are in a company</p>
+                  ) : (
+                    <label>
+                      Existing user
+                      <select
+                        value={selectedEmployeeId}
+                        onChange={(event) => setSelectedEmployeeId(event.target.value)}
+                        required
+                      >
+                        <option value="">Select a user</option>
+                        {availableUsers.map((user) => (
+                          <option key={user.id} value={user.id}>
+                            {user.name} {user.last_name}
+                          </option>
+                        ))}
+                      </select>
+                    </label>
+                  )}
+                  <button
+                    className={styles.primaryButton}
+                    disabled={isSaving || availableUsers.length === 0}
+                    type="submit"
+                  >
+                    {isSaving ? "Saving..." : "Assign user"}
+                  </button>
+                </form>
+              </Modal>
+            );
+          })()
+        : null}
+
+      {companyToDelete ? (
+        <Modal title="Delete company" onClose={() => setCompanyToDelete(null)}>
+          <div className={styles.confirmation}>
+            <p>
+              Delete <strong>{companyToDelete.name}</strong>? This action cannot be undone.
+            </p>
+            <div className={styles.confirmationActions}>
+              <button
+                className={styles.secondaryButton}
+                onClick={() => setCompanyToDelete(null)}
+                type="button"
+              >
+                Cancel
+              </button>
+              <button
+                className={styles.dangerButton}
+                disabled={deletingCompanyId === companyToDelete.id}
+                onClick={() => void handleDeleteCompany()}
+                type="button"
+              >
+                {deletingCompanyId === companyToDelete.id ? "Deleting..." : "Delete company"}
+              </button>
+            </div>
+          </div>
         </Modal>
       ) : null}
     </>