viewing pdf in player moduel dashboard

Author: alexanderchen750

app/player-management/page.js

@@ -65,6 +65,7 @@ export default function PlayerManagement() {
   const [editingReport, setEditingReport] = useState(null)
   const [showEditReportModal, setShowEditReportModal] = useState(false)
   const [editReportPdfFile, setEditReportPdfFile] = useState(null)
+  const [showPdfViewer, setShowPdfViewer] = useState(false)
   const [newReport, setNewReport] = useState({
     firstName: '',
     lastName: '',
@@ -1602,11 +1603,40 @@ export default function PlayerManagement() {
               </div>
             )}
 
-            <button className={styles.assignButton}>
+            <button
+              className={styles.assignButton}
+              onClick={() => setShowPdfViewer(true)}
+              disabled={!selectedReport.pdfUrl}
+            >
               View Scouting Report
             </button>
           </div>
         )}
+
+        {/* PDF Viewer Overlay */}
+        {showPdfViewer && selectedReport?.pdfUrl && (
+          <div className={styles.pdfOverlay}>
+            <div className={styles.pdfViewerContainer}>
+              <div className={styles.pdfViewerHeader}>
+                <span className={styles.pdfViewerTitle}>
+                  {selectedReport.firstName} {selectedReport.lastName} —{' '}
+                  {selectedReport.date}
+                </span>
+                <button
+                  className={styles.pdfViewerClose}
+                  onClick={() => setShowPdfViewer(false)}
+                >
+                  &times;
+                </button>
+              </div>
+              <iframe
+                src={selectedReport.pdfUrl}
+                className={styles.pdfViewerFrame}
+                title="Scouting Report PDF"
+              />
+            </div>
+          </div>
+        )}
       </div>
     </div>
   )

app/styles/PlayerManagement.module.css

@@ -396,3 +396,67 @@
   background-color: #ccc;
   cursor: not-allowed;
 }
+
+/* PDF Viewer Overlay */
+.pdfOverlay {
+  position: fixed;
+  z-index: 2000;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pdfViewerContainer {
+  width: 90%;
+  height: 90%;
+  max-width: 1200px;
+  display: flex;
+  flex-direction: column;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+}
+
+.pdfViewerHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #2c3e50;
+  color: white;
+  padding: 10px 16px;
+  flex-shrink: 0;
+}
+
+.pdfViewerTitle {
+  font-size: 14px;
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.pdfViewerClose {
+  background: none;
+  border: none;
+  color: white;
+  font-size: 24px;
+  cursor: pointer;
+  padding: 0 4px;
+  line-height: 1;
+}
+
+.pdfViewerClose:hover {
+  color: #e74c3c;
+}
+
+.pdfViewerFrame {
+  flex: 1;
+  width: 100%;
+  border: none;
+  background: white;
+}