File management groundwork

frontend/package-lock.json

@@ -11,6 +11,7 @@
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.0",
         "@mantine/core": "^8.0.1",
+        "@mantine/dropzone": "^8.0.1",
         "@mantine/hooks": "^8.0.1",
         "@mui/icons-material": "^7.1.0",
         "@mui/material": "^7.1.0",
@@ -19,6 +20,7 @@
         "@testing-library/react": "^16.3.0",
         "@testing-library/user-event": "^13.5.0",
         "axios": "^1.9.0",
+        "pdfjs-dist": "^3.11.174",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
         "react-router-dom": "^7.6.0",
@@ -3204,6 +3206,21 @@
         "react-dom": "^18.x || ^19.x"
       }
     },
+    "node_modules/@mantine/dropzone": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/@mantine/dropzone/-/dropzone-8.0.1.tgz",
+      "integrity": "sha512-8PH5yrtA/ebCIwjs0m4J9qOvEyS/P4XmNlHrw0E389/qq64Ol7+/ZH7Xtiq64IaY8kvsMW1XHaV0c+bdYrijiA==",
+      "license": "MIT",
+      "dependencies": {
+        "react-dropzone": "14.3.8"
+      },
+      "peerDependencies": {
+        "@mantine/core": "8.0.1",
+        "@mantine/hooks": "8.0.1",
+        "react": "^18.x || ^19.x",
+        "react-dom": "^18.x || ^19.x"
+      }
+    },
     "node_modules/@mantine/hooks": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-8.0.1.tgz",
@@ -3213,6 +3230,27 @@
         "react": "^18.x || ^19.x"
       }
     },
+    "node_modules/@mapbox/node-pre-gyp": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.11.tgz",
+      "integrity": "sha512-Yhlar6v9WQgUp/He7BdgzOz8lqMQ8sU+jkCq7Wx8Myc5YFJLbEe7lgui/V7G1qB1DJykHSGwreceSaD60Y0PUQ==",
+      "license": "BSD-3-Clause",
+      "optional": true,
+      "dependencies": {
+        "detect-libc": "^2.0.0",
+        "https-proxy-agent": "^5.0.0",
+        "make-dir": "^3.1.0",
+        "node-fetch": "^2.6.7",
+        "nopt": "^5.0.0",
+        "npmlog": "^5.0.1",
+        "rimraf": "^3.0.2",
+        "semver": "^7.3.5",
+        "tar": "^6.1.11"
+      },
+      "bin": {
+        "node-pre-gyp": "bin/node-pre-gyp"
+      }
+    },
     "node_modules/@mui/core-downloads-tracker": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-7.1.0.tgz",
@@ -4844,6 +4882,13 @@
       "deprecated": "Use your platform's native atob() and btoa() methods instead",
       "license": "BSD-3-Clause"
     },
+    "node_modules/abbrev": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
+      "license": "ISC",
+      "optional": true
+    },
     "node_modules/accepts": {
       "version": "1.3.8",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
@@ -5110,6 +5155,28 @@
         "node": ">= 8"
       }
     },
+    "node_modules/aproba": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz",
+      "integrity": "sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==",
+      "license": "ISC",
+      "optional": true
+    },
+    "node_modules/are-we-there-yet": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-2.0.0.tgz",
+      "integrity": "sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==",
+      "deprecated": "This package is no longer supported.",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "delegates": "^1.0.0",
+        "readable-stream": "^3.6.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/arg": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
@@ -5363,6 +5430,15 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/attr-accept": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.5.tgz",
+      "integrity": "sha512-0bDNnY/u6pPwHDMoF0FieU354oBi0a8rD9FcsLwzcGWbc8KS8KPIi7y+s13OlVY+gMWc/9xEMUgNE6Qm8ZllYQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.21",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz",
@@ -6035,6 +6111,22 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/canvas": {
+      "version": "2.11.2",
+      "resolved": "https://registry.npmjs.org/canvas/-/canvas-2.11.2.tgz",
+      "integrity": "sha512-ItanGBMrmRV7Py2Z+Xhs7cT+FNt5K0vPL4p9EZ/UX/Mu7hFbkxSjKF2KVtPwX7UYWp7dRKnrTvReflgrItJbdw==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@mapbox/node-pre-gyp": "^1.0.0",
+        "nan": "^2.17.0",
+        "simple-get": "^3.0.3"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/case-sensitive-paths-webpack-plugin": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz",
@@ -6111,6 +6203,16 @@
         "node": ">= 6"
       }
     },
+    "node_modules/chownr": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
+      "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
+      "license": "ISC",
+      "optional": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/chrome-trace-event": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz",
@@ -6301,6 +6403,16 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "license": "MIT"
     },
+    "node_modules/color-support": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
+      "integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==",
+      "license": "ISC",
+      "optional": true,
+      "bin": {
+        "color-support": "bin.js"
+      }
+    },
     "node_modules/colord": {
       "version": "2.9.3",
       "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
@@ -6415,6 +6527,13 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/console-control-strings": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
+      "integrity": "sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==",
+      "license": "ISC",
+      "optional": true
+    },
     "node_modules/content-disposition": {
       "version": "0.5.4",
       "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
@@ -7012,6 +7131,19 @@
       "integrity": "sha512-8vDa8Qxvr/+d94hSh5P3IJwI5t8/c0KsMp+g8bNw9cY2icONa5aPfvKeieW1WlG0WQYwwhJ7mjui2xtiePQSXw==",
       "license": "MIT"
     },
+    "node_modules/decompress-response": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-4.2.1.tgz",
+      "integrity": "sha512-jOSne2qbyE+/r8G1VU+G/82LBs2Fs4LAsTiLSHOCOMZQl2OKZ6i8i4IyHemTe+/yIXOtTcRQMzPcgyhoFlqPkw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "mimic-response": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/dedent": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz",
@@ -7097,6 +7229,13 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/delegates": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
+      "integrity": "sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@@ -7135,6 +7274,16 @@
         "npm": "1.2.8000 || >= 1.4.16"
       }
     },
+    "node_modules/detect-libc": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
+      "integrity": "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/detect-newline": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz",
@@ -8655,6 +8804,18 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/file-selector": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-2.1.2.tgz",
+      "integrity": "sha512-QgXo+mXTe8ljeqUFaX3QVHc5osSItJ/Km+xpocx0aSqWGMSCf6qYs/VnzZgS864Pjn5iceMRFigeAV7AfTlaig==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.7.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/filelist": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz",
@@ -9015,6 +9176,39 @@
         "node": ">=12"
       }
     },
+    "node_modules/fs-minipass": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
+      "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "minipass": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/fs-minipass/node_modules/minipass": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/fs-minipass/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "license": "ISC",
+      "optional": true
+    },
     "node_modules/fs-monkey": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/fs-monkey/-/fs-monkey-1.0.6.tgz",
@@ -9079,6 +9273,28 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/gauge": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/gauge/-/gauge-3.0.2.tgz",
+      "integrity": "sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==",
+      "deprecated": "This package is no longer supported.",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "aproba": "^1.0.3 || ^2.0.0",
+        "color-support": "^1.1.2",
+        "console-control-strings": "^1.0.0",
+        "has-unicode": "^2.0.1",
+        "object-assign": "^4.1.1",
+        "signal-exit": "^3.0.0",
+        "string-width": "^4.2.3",
+        "strip-ansi": "^6.0.1",
+        "wide-align": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -9435,6 +9651,13 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/has-unicode": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
+      "integrity": "sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==",
+      "license": "ISC",
+      "optional": true
+    },
     "node_modules/hasown": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
@@ -12028,6 +12251,19 @@
         "node": ">=6"
       }
     },
+    "node_modules/mimic-response": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-2.1.0.tgz",
+      "integrity": "sha512-wXqjST+SLt7R009ySCglWBCFpjUygmCIfD790/kVbiGmUgfYGuB14PiTd5DwVxSV4NcYHjzMkoj5LjQZwTQLEA==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/min-indent": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
@@ -12093,6 +12329,40 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/minizlib": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz",
+      "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "minipass": "^3.0.0",
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/minizlib/node_modules/minipass": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/minizlib/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "license": "ISC",
+      "optional": true
+    },
     "node_modules/mkdirp": {
       "version": "0.5.6",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
@@ -12135,6 +12405,13 @@
         "thenify-all": "^1.0.0"
       }
     },
+    "node_modules/nan": {
+      "version": "2.22.2",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.22.2.tgz",
+      "integrity": "sha512-DANghxFkS1plDdRsX0X9pm0Z6SJNN6gBdtXfanwoZ8hooC5gosGFSBGRYHUVPz1asKA/kMRqDRdHrluZ61SpBQ==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/nanoid": {
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
@@ -12190,6 +12467,52 @@
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/node-fetch": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
+      "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      },
+      "peerDependencies": {
+        "encoding": "^0.1.0"
+      },
+      "peerDependenciesMeta": {
+        "encoding": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/node-fetch/node_modules/tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/node-fetch/node_modules/webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
+      "license": "BSD-2-Clause",
+      "optional": true
+    },
+    "node_modules/node-fetch/node_modules/whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      }
+    },
     "node_modules/node-forge": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
@@ -12211,6 +12534,22 @@
       "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==",
       "license": "MIT"
     },
+    "node_modules/nopt": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz",
+      "integrity": "sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "abbrev": "1"
+      },
+      "bin": {
+        "nopt": "bin/nopt.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -12253,6 +12592,20 @@
         "node": ">=8"
       }
     },
+    "node_modules/npmlog": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-5.0.1.tgz",
+      "integrity": "sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==",
+      "deprecated": "This package is no longer supported.",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "are-we-there-yet": "^2.0.0",
+        "console-control-strings": "^1.1.0",
+        "gauge": "^3.0.0",
+        "set-blocking": "^2.0.0"
+      }
+    },
     "node_modules/nth-check": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
@@ -12708,6 +13061,29 @@
         "node": ">=8"
       }
     },
+    "node_modules/path2d-polyfill": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/path2d-polyfill/-/path2d-polyfill-2.0.1.tgz",
+      "integrity": "sha512-ad/3bsalbbWhmBo0D6FZ4RNMwsLsPpL6gnvhuSaU5Vm7b06Kr5ubSltQQ0T7YKsiJQO+g22zJ4dJKNTXIyOXtA==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pdfjs-dist": {
+      "version": "3.11.174",
+      "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-3.11.174.tgz",
+      "integrity": "sha512-TdTZPf1trZ8/UFu5Cx/GXB7GZM30LT+wWUNfsi6Bq8ePLnb+woNKtDymI2mxZYBpMbonNFqKmiz684DIfnd8dA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "canvas": "^2.11.2",
+        "path2d-polyfill": "^2.0.1"
+      }
+    },
     "node_modules/performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
@@ -14802,6 +15178,23 @@
         "react": "^19.1.0"
       }
     },
+    "node_modules/react-dropzone": {
+      "version": "14.3.8",
+      "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.3.8.tgz",
+      "integrity": "sha512-sBgODnq+lcA4P296DY4wacOZz3JFpD99fp+hb//iBO2HHnyeZU3FwWyXJ6salNpqQdsZrgMrotuko/BdJMV8Ug==",
+      "license": "MIT",
+      "dependencies": {
+        "attr-accept": "^2.2.4",
+        "file-selector": "^2.1.0",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">= 10.13"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8 || 18.0.0"
+      }
+    },
     "node_modules/react-error-overlay": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.1.0.tgz",
@@ -15882,6 +16275,13 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
+      "license": "ISC",
+      "optional": true
+    },
     "node_modules/set-cookie-parser": {
       "version": "2.7.1",
       "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
@@ -16051,6 +16451,39 @@
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
       "license": "ISC"
     },
+    "node_modules/simple-concat": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz",
+      "integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/simple-get": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-3.1.1.tgz",
+      "integrity": "sha512-CQ5LTKGfCpvE1K0n2us+kuMPbk/q0EKl82s4aheV9oXjFEz6W/Y7oQFVJuU6QG77hRT4Ghb5RURteF5vnWjupA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "decompress-response": "^4.2.0",
+        "once": "^1.3.1",
+        "simple-concat": "^1.0.0"
+      }
+    },
     "node_modules/sisteransi": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
@@ -16994,6 +17427,54 @@
         "node": ">=6"
       }
     },
+    "node_modules/tar": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-6.2.1.tgz",
+      "integrity": "sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "chownr": "^2.0.0",
+        "fs-minipass": "^2.0.0",
+        "minipass": "^5.0.0",
+        "minizlib": "^2.1.1",
+        "mkdirp": "^1.0.3",
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/tar/node_modules/minipass": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz",
+      "integrity": "sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==",
+      "license": "ISC",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/tar/node_modules/mkdirp": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+      "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
+      "license": "MIT",
+      "optional": true,
+      "bin": {
+        "mkdirp": "bin/cmd.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/tar/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "license": "ISC",
+      "optional": true
+    },
     "node_modules/temp-dir": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-2.0.0.tgz",
@@ -18277,6 +18758,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/wide-align": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz",
+      "integrity": "sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "string-width": "^1.0.2 || 2 || 3 || 4"
+      }
+    },
     "node_modules/word-wrap": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",

frontend/package.json

@@ -7,6 +7,7 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@mantine/core": "^8.0.1",
+    "@mantine/dropzone": "^8.0.1",
     "@mantine/hooks": "^8.0.1",
     "@mui/icons-material": "^7.1.0",
     "@mui/material": "^7.1.0",
@@ -15,6 +16,7 @@
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.9.0",
+    "pdfjs-dist": "^3.11.174",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-router-dom": "^7.6.0",

frontend/src/components/FileManager.js

@@ -1,8 +1,111 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
+import { Card, Group, Text, Stack, Image, Badge, Button, Box, Flex } from "@mantine/core";
+import { Dropzone, MIME_TYPES } from "@mantine/dropzone";
+import { GlobalWorkerOptions, getDocument, version as pdfjsVersion } from "pdfjs-dist";
+GlobalWorkerOptions.workerSrc = `${process.env.PUBLIC_URL}/pdf.worker.js`;
 
-export default function FileManager({ files, setFiles, allowMultiple = true }) {
+function getFileDate(file) {
-  const handleFileUpload = (e) => {
+  if (file.lastModified) {
-    const uploadedFiles = Array.from(e.target.files);
+    return new Date(file.lastModified).toLocaleString();
+  }
+  return "Unknown";
+}
+
+function getFileSize(file) {
+  if (!file.size) return "Unknown";
+  if (file.size < 1024) return `${file.size} B`;
+  if (file.size < 1024 * 1024) return `${(file.size / 1024).toFixed(1)} KB`;
+  return `${(file.size / (1024 * 1024)).toFixed(2)} MB`;
+}
+
+function usePdfThumbnail(file) {
+  const [thumb, setThumb] = useState(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    async function generate() {
+      if (!file) return;
+      try {
+        const arrayBuffer = await file.arrayBuffer();
+        const pdf = await getDocument({ data: arrayBuffer }).promise;
+        const page = await pdf.getPage(1);
+        const viewport = page.getViewport({ scale: 0.5 });
+        const canvas = document.createElement("canvas");
+        canvas.width = viewport.width;
+        canvas.height = viewport.height;
+        const context = canvas.getContext("2d");
+        await page.render({ canvasContext: context, viewport }).promise;
+        if (!cancelled) setThumb(canvas.toDataURL());
+      } catch {
+        if (!cancelled) setThumb(null);
+      }
+    }
+    generate();
+    return () => { cancelled = true; };
+  }, [file]);
+
+  return thumb;
+}
+
+function FileCard({ file, onRemove, onDoubleClick }) {
+  const thumb = usePdfThumbnail(file);
+
+  return (
+    <Card
+      shadow="xs"
+      radius="md"
+      withBorder
+      p="xs"
+      style={{ width: 225, minWidth: 180, maxWidth: 260, cursor: onDoubleClick ? "pointer" : undefined }}
+      onDoubleClick={onDoubleClick}
+    >
+      <Stack spacing={6} align="center">
+        <Box
+          style={{
+            border: "2px solid #e0e0e0",
+            borderRadius: 8,
+            width: 90,
+            height: 120,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            margin: "0 auto",
+            background: "#fafbfc",
+          }}
+        >
+          {thumb ? (
+            <Image src={thumb} alt="PDF thumbnail" height={110} width={80} fit="contain" radius="sm" />
+          ) : (
+            <Image src="/images/pdf-placeholder.svg" alt="PDF" height={60} width={60} fit="contain" radius="sm" withPlaceholder />
+          )}
+        </Box>
+        <Text weight={500} size="sm" lineClamp={1} align="center">
+          {file.name}
+        </Text>
+        <Group spacing="xs" position="center">
+          <Badge color="gray" variant="light" size="sm">
+            {getFileSize(file)}
+          </Badge>
+          <Badge color="blue" variant="light" size="sm">
+            {getFileDate(file)}
+          </Badge>
+        </Group>
+        <Button
+          color="red"
+          size="xs"
+          variant="light"
+          onClick={onRemove}
+          mt={4}
+        >
+          Remove
+        </Button>
+      </Stack>
+    </Card>
+  );
+}
+
+export default function FileManager({ files = [], setFiles, allowMultiple = true, setPdfFile, setCurrentView }) {
+  const handleDrop = (uploadedFiles) => {
     setFiles((prevFiles) => (allowMultiple ? [...prevFiles, ...uploadedFiles] : uploadedFiles));
   };
 
@@ -11,27 +114,59 @@ export default function FileManager({ files, setFiles, allowMultiple = true }) {
   };
 
   return (
-    <div className="space-y-4 w-full max-w-3xl">
+    <div style={{ width: "100%", margin: "0 auto" }}>
-      <input
+      <Dropzone
-        type="file"
+        onDrop={handleDrop}
-        accept="application/pdf"
+        accept={[MIME_TYPES.pdf]}
         multiple={allowMultiple}
-        onChange={handleFileUpload}
+        maxSize={20 * 1024 * 1024}
-        className="block"
+        style={{
-      />
+          marginBottom: 16,
-      <ul className="list-disc pl-5 text-sm">
+          border: "2px dashed rgb(202, 202, 202)",
-        {files.map((file, index) => (
+          background: "#f8fafc",
-          <li key={index} className="flex justify-between items-center">
+          borderRadius: 8,
-            {file.name}
+          minHeight: 120,
-            <button
+          display: "flex",
-              onClick={() => handleRemoveFile(index)}
+          alignItems: "center",
-              className="text-red-600 hover:underline text-xs"
+          justifyContent: "center",
-            >
+        }}
-              Remove
+      >
-            </button>
+        <Group position="center" spacing="xl" style={{ pointerEvents: "none" }}>
-          </li>
+          <Text size="md">
-        ))}
+            Drag PDF files here or click to select
-      </ul>
+          </Text>
+        </Group>
+      </Dropzone>
+      {files.length === 0 ? (
+        <Text c="dimmed" align="center">
+          No files uploaded yet.
+        </Text>
+      ) : (
+        <Box>
+          <Flex
+            wrap="wrap"
+            gap="lg"
+            justify="flex-start"
+            style={{ width: "fit-content", margin: "0 auto" }}
+          >
+            {files.map((file, idx) => (
+              <FileCard
+                key={file.name + idx}
+                file={file}
+                onRemove={() => handleRemoveFile(idx)}
+                onDoubleClick={() => {
+                  const fileObj = file.file || file; // handle wrapped or raw File
+                  setPdfFile && setPdfFile({
+                    file: fileObj,
+                    url: URL.createObjectURL(fileObj),
+                  });
+                  setCurrentView && setCurrentView("viewer");
+                }}
+              />
+            ))}
+          </Flex>
+        </Box>
+      )}
     </div>
   );
 }

frontend/src/components/Viewer.js

@@ -1,27 +1,112 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
+import { Paper, Stack, Text, ScrollArea, Loader, Center, Button, Group } from "@mantine/core";
+import { getDocument, GlobalWorkerOptions, version as pdfjsVersion } from "pdfjs-dist";
+
+GlobalWorkerOptions.workerSrc = `${process.env.PUBLIC_URL}/pdf.worker.js`;
 
 export default function Viewer({ pdfFile, setPdfFile }) {
-  return pdfFile ? (
+  const [numPages, setNumPages] = useState(0);
-    <iframe
+  const [pageImages, setPageImages] = useState([]);
-      src={pdfFile.url}
+  const [loading, setLoading] = useState(false);
-      title="PDF Viewer"
+
-      className="w-full h-full border-none"
+  useEffect(() => {
-    />
+    let cancelled = false;
-  ) : (
+    async function renderPages() {
-    <label className="cursor-pointer text-blue-600 underline">
+      if (!pdfFile || !pdfFile.url) {
-      Click to upload a PDF
+        setNumPages(0);
-      <input
+        setPageImages([]);
-        type="file"
+        return;
-        accept="application/pdf"
+      }
-        onChange={(e) => {
+      setLoading(true);
-          const file = e.target.files[0];
+      try {
-          if (file && file.type === "application/pdf") {
+        const pdf = await getDocument(pdfFile.url).promise;
-            const fileUrl = URL.createObjectURL(file);
+        setNumPages(pdf.numPages);
-            setPdfFile({ file, url: fileUrl });
+        const images = [];
-          }
+        for (let i = 1; i <= pdf.numPages; i++) {
-        }}
+          const page = await pdf.getPage(i);
-        className="hidden"
+          const viewport = page.getViewport({ scale: 1.2 });
-      />
+          const canvas = document.createElement("canvas");
-    </label>
+          canvas.width = viewport.width;
+          canvas.height = viewport.height;
+          const ctx = canvas.getContext("2d");
+          await page.render({ canvasContext: ctx, viewport }).promise;
+          images.push(canvas.toDataURL());
+        }
+        if (!cancelled) setPageImages(images);
+      } catch {
+        if (!cancelled) setPageImages([]);
+      }
+      if (!cancelled) setLoading(false);
+    }
+    renderPages();
+    return () => { cancelled = true; };
+  }, [pdfFile]);
+
+  return (
+    <Paper shadow="xs" radius="md" p="md" style={{ height: "100%", minHeight: 400, display: "flex", flexDirection: "column" }}>
+      {!pdfFile ? (
+        <Center style={{ flex: 1 }}>
+          <Stack align="center">
+            <Text color="dimmed">No PDF loaded. Click to upload a PDF.</Text>
+            <Button
+              component="label"
+              variant="outline"
+              color="blue"
+            >
+              Choose PDF
+              <input
+                type="file"
+                accept="application/pdf"
+                hidden
+                onChange={(e) => {
+                  const file = e.target.files[0];
+                  if (file && file.type === "application/pdf") {
+                    const fileUrl = URL.createObjectURL(file);
+                    setPdfFile({ file, url: fileUrl });
+                  }
+                }}
+              />
+            </Button>
+          </Stack>
+        </Center>
+      ) : loading ? (
+        <Center style={{ flex: 1 }}>
+          <Loader size="lg" />
+        </Center>
+      ) : (
+        <ScrollArea style={{ flex: 1, height: "100%" }}>
+          <Stack spacing="xl" align="center">
+            {pageImages.length === 0 && (
+              <Text color="dimmed">No pages to display.</Text>
+            )}
+            {pageImages.map((img, idx) => (
+              <img
+                key={idx}
+                src={img}
+                alt={`Page ${idx + 1}`}
+                style={{
+                  width: "100%",
+                  maxWidth: 700,
+                  boxShadow: "0 2px 8px rgba(0,0,0,0.08)",
+                  borderRadius: 8,
+                  background: "#fff"
+                }}
+              />
+            ))}
+          </Stack>
+        </ScrollArea>
+      )}
+      {pdfFile && (
+        <Group position="right" mt="md">
+          <Button
+            variant="light"
+            color="red"
+            onClick={() => setPdfFile(null)}
+          >
+            Close PDF
+          </Button>
+        </Group>
+      )}
+    </Paper>
   );
 }

frontend/src/pages/HomePage.js

@@ -66,6 +66,12 @@ export default function HomePage() {
           borderRight: "1px solid #e9ecef",
           minHeight: "100vh",
           padding: 16,
+          position: "fixed",
+          left: 0,
+          top: 0,
+          bottom: 0,
+          zIndex: 100,
+          overflowY: "auto",
         }}
       >
         <Text size="lg" weight={500} mb="md">
@@ -94,12 +100,15 @@ export default function HomePage() {
       {/* Middle: Main View (Viewer, Editor, Manager) */}
       <Box
         style={{
-          flex: 1,
+          width: "calc(100vw - 220px - 380px)",
-          minWidth: 0,
+          marginLeft: 220,
+          marginRight: 380,
           padding: 24,
           background: "#fff",
-          minHeight: "100vh",
           position: "relative",
+          minHeight: "100vh",
+          height: "100vh",
+          overflowY: "auto",
         }}
       >
         <Center>
@@ -126,32 +135,37 @@ export default function HomePage() {
           </Paper>
         </Center>
         <Box>
-          {currentView === "viewer" && (
+          {(currentView === "viewer" || currentView === "pageEditor") && !pdfFile ? (
+            <FileManager
+              files={files}
+              setFiles={setFiles}
+              setPdfFile={setPdfFile}
+              setCurrentView={setCurrentView}
+            />
+          ) : currentView === "viewer" ? (
             <Viewer
-              file={pdfFile}
+              pdfFile={pdfFile}
-              setFile={setPdfFile}
+              setPDFFile={setPdfFile}
               downloadUrl={downloadUrl}
               setDownloadUrl={setDownloadUrl}
             />
-          )}
+          ) : currentView === "pageEditor" ? (
-          {currentView === "pageEditor" && (
             <PageEditor
               file={pdfFile}
               setFile={setPdfFile}
               downloadUrl={downloadUrl}
               setDownloadUrl={setDownloadUrl}
             />
-          )}
+          ) : (
-          {currentView === "fileManager" && (
             <FileManager
               files={files}
               setFiles={setFiles}
               setPdfFile={setPdfFile}
+              setCurrentView={setCurrentView}
             />
           )}
         </Box>
       </Box>
-
       {/* Right: Tool Interaction */}
       <Box
         style={{
@@ -160,10 +174,17 @@ export default function HomePage() {
           borderLeft: "1px solid #e9ecef",
           minHeight: "100vh",
           padding: 24,
+          gap: 16,
+          position: "fixed",
+          right: 0,
+          top: 0,
+          bottom: 0,
+          zIndex: 100,
+          overflowY: "auto",
         }}
       >
         {selectedTool && selectedTool.component && (
-          <Paper p="md" radius="md" shadow="xs">
+          <>
             {React.createElement(selectedTool.component, {
               file: pdfFile,
               setPdfFile,
@@ -172,7 +193,7 @@ export default function HomePage() {
               downloadUrl,
               setDownloadUrl,
             })}
-          </Paper>
+            </>
         )}
       </Box>
     </Group>

frontend/src/tools/Split.js

@@ -89,7 +89,7 @@ export default function SplitPdfPanel({ file, downloadUrl, setDownloadUrl }) {
   return (
     <form onSubmit={handleSubmit} >
       <h3 className="font-semibold">Split PDF</h3>
-
+      <Stack spacing="sm" mb={16}>
       <Select
         label="Split Mode"
         value={mode}
@@ -111,7 +111,7 @@ export default function SplitPdfPanel({ file, downloadUrl, setDownloadUrl }) {
       )}
 
       {mode === "bySections" && (
-        <Stack spacing="sm">
+        <Stack spacing="sm" gap={16}>
           <TextInput
             label="Horizontal Divisions"
             type="number"
@@ -137,7 +137,7 @@ export default function SplitPdfPanel({ file, downloadUrl, setDownloadUrl }) {
       )}
 
       {mode === "bySizeOrCount" && (
-        <Stack spacing="sm">
+        <Stack spacing="sm" gap={16}>
           <Select
             label="Split Type"
             value={splitType}
@@ -202,6 +202,7 @@ export default function SplitPdfPanel({ file, downloadUrl, setDownloadUrl }) {
           Download Split PDF
         </Button>
       )}
+      </Stack>
     </form>
   );
 }