Add bulk archive feature for old applications (#88)

* Add one-click bulk archive for old applications

Adds an "Archive old" dropdown button to the dashboard toolbar that lets
users archive all applications older than a selectable threshold (30, 60,
90, or 180 days). Each option shows a live count badge of matching apps.
Includes confirmation dialog before archiving and i18n support (EN/DE).

https://claude.ai/code/session_01XjeBMDALg8J9i3DxWzxrkv

* Fix variable ordering and use onSettled for bulk archive mutation

Move handleBulkArchive below activeApplications declaration to fix
reference-before-definition. Use onSettled instead of onSuccess so
query invalidation runs even if some archive requests fail.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude <noreply@anthropic.com>

Author: 5queezer

components/dashboard.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useTranslations } from "next-intl";
 import { authClient } from "@/lib/auth-client";
 import { ApplicationTable } from "./application-table";
@@ -154,11 +154,33 @@ export function Dashboard({ user, shareUrl, initialStatus, initialSource, initia
     archiveMutation.mutate({ id, archive });
   }
 
+  const bulkArchiveMutation = useMutation({
+    mutationFn: async (ids: string[]) => {
+      await Promise.all(ids.map((id) => archiveApplication(id, true)));
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: ["applications"] });
+    },
+  });
+
   // Filter by archive status
   const activeApplications = applications.filter((a) => !a.archivedAt);
   const archivedApplications = applications.filter((a) => !!a.archivedAt);
   const visibleApplications = showArchived ? archivedApplications : activeApplications;
 
+  function handleBulkArchive(days: number) {
+    const cutoff = new Date();
+    cutoff.setDate(cutoff.getDate() - days);
+    const old = activeApplications.filter((a) => {
+      const d = a.appliedAt ? new Date(a.appliedAt) : new Date(a.createdAt);
+      return d < cutoff;
+    });
+    if (old.length === 0) return;
+    if (confirm(ta("archive_old_confirm", { count: old.length, days }))) {
+      bulkArchiveMutation.mutate(old.map((a) => a.id));
+    }
+  }
+
   const stats = {
     total: activeApplications.length,
     inbound: activeApplications.filter((a) => a.status === "inbound").length,
@@ -433,6 +455,8 @@ export function Dashboard({ user, shareUrl, initialStatus, initialSource, initia
                 )}
               </button>
 
+              {!showArchived && <ArchiveOldDropdown applications={activeApplications} onArchive={handleBulkArchive} isPending={bulkArchiveMutation.isPending} />}
+
               <button
                 onClick={() => exportToCsv(visibleApplications)}
                 title={ta("export_csv")}
@@ -484,6 +508,90 @@ export function Dashboard({ user, shareUrl, initialStatus, initialSource, initia
   );
 }
 
+const ARCHIVE_THRESHOLDS = [30, 60, 90, 180] as const;
+
+function ArchiveOldDropdown({
+  applications,
+  onArchive,
+  isPending,
+}: {
+  applications: Application[];
+  onArchive: (days: number) => void;
+  isPending: boolean;
+}) {
+  const ta = useTranslations("actions");
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  const countForDays = useCallback(
+    (days: number) => {
+      const cutoff = new Date();
+      cutoff.setDate(cutoff.getDate() - days);
+      return applications.filter((a) => {
+        const d = a.appliedAt ? new Date(a.appliedAt) : new Date(a.createdAt);
+        return d < cutoff;
+      }).length;
+    },
+    [applications]
+  );
+
+  useEffect(() => {
+    function handleClickOutside(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    }
+    if (open) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }
+  }, [open]);
+
+  return (
+    <div ref={ref} className="relative w-full sm:w-auto">
+      <button
+        onClick={() => setOpen((v) => !v)}
+        disabled={isPending}
+        className={`flex w-full items-center justify-center gap-1.5 rounded-lg border px-3 py-2 text-sm font-medium transition-colors sm:w-auto ${
+          open
+            ? "border-amber-300 dark:border-amber-600 bg-amber-50 dark:bg-amber-950/30 text-amber-700 dark:text-amber-300"
+            : "border-gray-200 dark:border-gray-600 text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700"
+        } ${isPending ? "opacity-50 cursor-wait" : ""}`}
+      >
+        {isPending ? ta("archive_old_archiving") : ta("archive_old")}
+        <span className="text-xs">{open ? "▲" : "▼"}</span>
+      </button>
+      {open && (
+        <div className="absolute right-0 z-20 mt-1 w-56 rounded-lg border border-gray-200 bg-white shadow-lg dark:border-gray-600 dark:bg-gray-800">
+          {ARCHIVE_THRESHOLDS.map((days) => {
+            const count = countForDays(days);
+            return (
+              <button
+                key={days}
+                onClick={() => {
+                  setOpen(false);
+                  onArchive(days);
+                }}
+                disabled={count === 0}
+                className="flex w-full items-center justify-between px-4 py-2.5 text-sm text-left transition-colors hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-40 disabled:cursor-not-allowed first:rounded-t-lg last:rounded-b-lg"
+              >
+                <span className="text-gray-700 dark:text-gray-200">
+                  {ta("archive_old_option", { days })}
+                </span>
+                {count > 0 && (
+                  <span className="inline-flex h-5 min-w-[1.25rem] items-center justify-center rounded-full bg-amber-100 px-1.5 text-xs font-bold text-amber-700 dark:bg-amber-900/50 dark:text-amber-300">
+                    {count}
+                  </span>
+                )}
+              </button>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
 function StatCard({
   label,
   value,

messages/de.json

@@ -34,7 +34,11 @@
     "unarchive": "Wiederherstellen",
     "show_archive": "Archiv",
     "show_active": "Aktiv",
-    "remote_only": "Nur Remote"
+    "remote_only": "Nur Remote",
+    "archive_old": "Alte archivieren",
+    "archive_old_option": "Älter als {days} Tage",
+    "archive_old_confirm": "{count} Opportunities älter als {days} Tage archivieren?",
+    "archive_old_archiving": "Archiviere..."
   },
   "table": {
     "company": "Kunde",

messages/en.json

@@ -34,7 +34,11 @@
     "unarchive": "Unarchive",
     "show_archive": "Archive",
     "show_active": "Active",
-    "remote_only": "Remote only"
+    "remote_only": "Remote only",
+    "archive_old": "Archive old",
+    "archive_old_option": "Older than {days} days",
+    "archive_old_confirm": "Archive {count} opportunities older than {days} days?",
+    "archive_old_archiving": "Archiving..."
   },
   "table": {
     "company": "Account",