+
+ {/* Back button + title */}
+
router.push("/dashboard")}
+ title="Back"
+ className="p-1 text-gray-500 hover:text-blue-600 transition rounded"
+ >
+
+
+
+
+
+ {pdfTitle}
+
+
+
+
+ {/* Page navigation */}
+
+
goToPage(currentPage - 1)}
+ disabled={currentPage <= 1 || rendering || !isReady}
+ className="p-1 rounded hover:bg-gray-100 disabled:opacity-40 transition"
+ title="Previous page"
+ >
+
+
+
+
+
+ {isReady ? `${currentPage} / ${totalPages}` : "…"}
+
+
goToPage(currentPage + 1)}
+ disabled={currentPage >= totalPages || rendering || !isReady}
+ className="p-1 rounded hover:bg-gray-100 disabled:opacity-40 transition"
+ title="Next page"
+ >
+
+
+
+
+
+
+
+
+ {/* Pan / Draw mode toggle */}
+
+ setViewMode("pan")}
+ className={`text-xs px-2.5 py-1 rounded-md font-medium transition ${
+ mode === "pan" ? "bg-white shadow text-blue-600" : "text-gray-500 hover:text-gray-800"
+ }`}
+ >
+ Pan
+
+ setViewMode("draw")}
+ className={`text-xs px-2.5 py-1 rounded-md font-medium transition ${
+ mode === "draw" ? "bg-white shadow text-blue-600" : "text-gray-500 hover:text-gray-800"
+ }`}
+ >
+ Draw
+
+
+
+ {/* Drawing tools — only shown in Draw mode */}
+ {mode === "draw" && (
+ <>
+
+
+ {/* Tool buttons */}
+
+ {/* Select */}
+
+
+
+
+ {/* Pen */}
+
+
+
+
+ {/* Highlighter */}
+
+
+
+
+ {/* Text */}
+
+
+
+
+
+ {/* Color picker */}
+
setPenColor(e.target.value)}
+ title="Color"
+ className="w-7 h-7 rounded cursor-pointer border border-gray-300 p-0.5 bg-white"
+ />
+
+ {/* Stroke width slider */}
+
setStrokeWidth(Number(e.target.value))}
+ className="w-16 accent-blue-600"
+ title={`Stroke width: ${strokeWidth}`}
+ />
+
+
+
+ {/* Undo */}
+
+
+
+
+
+
+ {/* Clear page */}
+
+
+
+
+
+ >
+ )}
+
+ {/* Save button — far right */}
+
+ {saveNotice && (
+
+ ✓ Saved
+
+ )}
+
+ {saving ? "Saving…" : "Save"}
+
+
+
+