Update frontend/src/App.tsx

frontend/src/App.tsx

@@ -350,6 +350,30 @@ export default function App() {
     };
   }, [page, selectedHistoryId]);
 
+  // Clear all history
+  async function onClearHistory() {
+    if (!window.confirm("Are you sure you want to clear all history records? This action cannot be undone.")) {
+      return;
+    }
+    setHistoryError(null);
+    setHistoryLoading(true);
+    try {
+      await clearDb();
+      setHistoryItems([]);
+      setSelectedHistoryId(null);
+      setHistoryDetail(null);
+      setHistoryDetailsOpen(false);
+      setHistorySearch("");
+      setHistoryStatusFilter("");
+      setToast("All history records cleared");
+    } catch (e: any) {
+      setHistoryError(e?.message || String(e));
+      setToast(null);
+    } finally {
+      setHistoryLoading(false);
+    }
+  }
+
   const stepState = useMemo(() => {
     const upload: StepState = stage === "upload" ? "active" : "done";
     // Keep the 3-step bar, but make it unambiguous:
@@ -1556,6 +1580,16 @@ export default function App() {
                     >
                       Export All
                     </button>
+
+                    <button
+                      type="button"
+                      className="rounded-xl border border-rose-500/30 bg-rose-50 px-4 py-2.5 text-sm font-bold text-rose-700 shadow-sm hover:bg-rose-100 disabled:opacity-40"
+                      onClick={onClearHistory}
+                      disabled={historyLoading || historyItems.length === 0}
+                      title="Clear all history records from database"
+                    >
+                      Clear All History
+                    </button>
                   </div>
 
                   <div className="grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-4">