mirror of
https://github.com/Frooodle/Stirling-PDF.git
synced 2026-02-17 13:52:14 +01:00
Mantine overhaul
This commit is contained in:
Reece Browne
@@ -1,16 +1,31 @@
|
||||
import React from "react";
|
||||
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import { BrowserRouter, Routes, Route } from 'react-router-dom';
|
||||
import { ColorSchemeScript, MantineProvider } from '@mantine/core';
|
||||
import './index.css';
|
||||
import HomePage from './pages/HomePage';
|
||||
import SplitPdfPanel from './tools/Split';
|
||||
import reportWebVitals from './reportWebVitals';
|
||||
|
||||
import HomePage from "./pages/HomePage";
|
||||
|
||||
function App() {
|
||||
export default function App() {
|
||||
return (
|
||||
<Router>
|
||||
<Routes>
|
||||
<Route path="/" element={<HomePage />} />
|
||||
</Routes>
|
||||
</Router>
|
||||
<Routes>
|
||||
<Route path="/" element={<HomePage />} />
|
||||
<Route path="/split" element={<SplitPdfPanel />} />
|
||||
</Routes>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<ColorSchemeScript />
|
||||
<MantineProvider withGlobalStyles withNormalizeCSS>
|
||||
<BrowserRouter>
|
||||
<App />
|
||||
</BrowserRouter>
|
||||
</MantineProvider>
|
||||
</React.StrictMode>
|
||||
);
|
||||
|
||||
reportWebVitals();
|
||||
|
||||
37
frontend/src/components/FileManager.js
Normal file
37
frontend/src/components/FileManager.js
Normal file
@@ -0,0 +1,37 @@
|
||||
import React from "react";
|
||||
|
||||
export default function FileManager({ files, setFiles, allowMultiple = true }) {
|
||||
const handleFileUpload = (e) => {
|
||||
const uploadedFiles = Array.from(e.target.files);
|
||||
setFiles((prevFiles) => (allowMultiple ? [...prevFiles, ...uploadedFiles] : uploadedFiles));
|
||||
};
|
||||
|
||||
const handleRemoveFile = (index) => {
|
||||
setFiles((prevFiles) => prevFiles.filter((_, i) => i !== index));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4 w-full max-w-3xl">
|
||||
<input
|
||||
type="file"
|
||||
accept="application/pdf"
|
||||
multiple={allowMultiple}
|
||||
onChange={handleFileUpload}
|
||||
className="block"
|
||||
/>
|
||||
<ul className="list-disc pl-5 text-sm">
|
||||
{files.map((file, index) => (
|
||||
<li key={index} className="flex justify-between items-center">
|
||||
{file.name}
|
||||
<button
|
||||
onClick={() => handleRemoveFile(index)}
|
||||
className="text-red-600 hover:underline text-xs"
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
9
frontend/src/components/PageEditor.js
Normal file
9
frontend/src/components/PageEditor.js
Normal file
@@ -0,0 +1,9 @@
|
||||
import React from "react";
|
||||
|
||||
export default function PageEditor({ pdfFile }) {
|
||||
return (
|
||||
<div className="w-full h-full flex items-center justify-center">
|
||||
<p className="text-gray-500">Page Editor is under construction.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
27
frontend/src/components/Viewer.js
Normal file
27
frontend/src/components/Viewer.js
Normal file
@@ -0,0 +1,27 @@
|
||||
import React from "react";
|
||||
|
||||
export default function Viewer({ pdfFile, setPdfFile }) {
|
||||
return pdfFile ? (
|
||||
<iframe
|
||||
src={pdfFile.url}
|
||||
title="PDF Viewer"
|
||||
className="w-full h-full border-none"
|
||||
/>
|
||||
) : (
|
||||
<label className="cursor-pointer text-blue-600 underline">
|
||||
Click to upload a PDF
|
||||
<input
|
||||
type="file"
|
||||
accept="application/pdf"
|
||||
onChange={(e) => {
|
||||
const file = e.target.files[0];
|
||||
if (file && file.type === "application/pdf") {
|
||||
const fileUrl = URL.createObjectURL(file);
|
||||
setPdfFile({ file, url: fileUrl });
|
||||
}
|
||||
}}
|
||||
className="hidden"
|
||||
/>
|
||||
</label>
|
||||
);
|
||||
}
|
||||
@@ -1,17 +1,22 @@
|
||||
import '@mantine/core/styles.css';
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import { ColorSchemeScript, MantineProvider, mantineHtmlProps } from '@mantine/core';
|
||||
import { BrowserRouter } from 'react-router-dom';
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
import reportWebVitals from './reportWebVitals';
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
const root = ReactDOM.createRoot(document.getElementById('root')); // Finds the root DOM element
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
<ColorSchemeScript />
|
||||
<MantineProvider withGlobalStyles withNormalizeCSS>
|
||||
<BrowserRouter>
|
||||
<App />
|
||||
</BrowserRouter>
|
||||
</MantineProvider>
|
||||
</React.StrictMode>
|
||||
);
|
||||
|
||||
// If you want to start measuring performance in your app, pass a function
|
||||
// to log results (for example: reportWebVitals(console.log))
|
||||
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
|
||||
reportWebVitals();
|
||||
|
||||
362
frontend/src/output.css
Normal file
362
frontend/src/output.css
Normal file
@@ -0,0 +1,362 @@
|
||||
*, ::before, ::after {
|
||||
--tw-border-spacing-x: 0;
|
||||
--tw-border-spacing-y: 0;
|
||||
--tw-translate-x: 0;
|
||||
--tw-translate-y: 0;
|
||||
--tw-rotate: 0;
|
||||
--tw-skew-x: 0;
|
||||
--tw-skew-y: 0;
|
||||
--tw-scale-x: 1;
|
||||
--tw-scale-y: 1;
|
||||
--tw-pan-x: ;
|
||||
--tw-pan-y: ;
|
||||
--tw-pinch-zoom: ;
|
||||
--tw-scroll-snap-strictness: proximity;
|
||||
--tw-gradient-from-position: ;
|
||||
--tw-gradient-via-position: ;
|
||||
--tw-gradient-to-position: ;
|
||||
--tw-ordinal: ;
|
||||
--tw-slashed-zero: ;
|
||||
--tw-numeric-figure: ;
|
||||
--tw-numeric-spacing: ;
|
||||
--tw-numeric-fraction: ;
|
||||
--tw-ring-inset: ;
|
||||
--tw-ring-offset-width: 0px;
|
||||
--tw-ring-offset-color: #fff;
|
||||
--tw-ring-color: rgb(59 130 246 / 0.5);
|
||||
--tw-ring-offset-shadow: 0 0 #0000;
|
||||
--tw-ring-shadow: 0 0 #0000;
|
||||
--tw-shadow: 0 0 #0000;
|
||||
--tw-shadow-colored: 0 0 #0000;
|
||||
--tw-blur: ;
|
||||
--tw-brightness: ;
|
||||
--tw-contrast: ;
|
||||
--tw-grayscale: ;
|
||||
--tw-hue-rotate: ;
|
||||
--tw-invert: ;
|
||||
--tw-saturate: ;
|
||||
--tw-sepia: ;
|
||||
--tw-drop-shadow: ;
|
||||
--tw-backdrop-blur: ;
|
||||
--tw-backdrop-brightness: ;
|
||||
--tw-backdrop-contrast: ;
|
||||
--tw-backdrop-grayscale: ;
|
||||
--tw-backdrop-hue-rotate: ;
|
||||
--tw-backdrop-invert: ;
|
||||
--tw-backdrop-opacity: ;
|
||||
--tw-backdrop-saturate: ;
|
||||
--tw-backdrop-sepia: ;
|
||||
--tw-contain-size: ;
|
||||
--tw-contain-layout: ;
|
||||
--tw-contain-paint: ;
|
||||
--tw-contain-style:
|
||||
}
|
||||
::backdrop {
|
||||
--tw-border-spacing-x: 0;
|
||||
--tw-border-spacing-y: 0;
|
||||
--tw-translate-x: 0;
|
||||
--tw-translate-y: 0;
|
||||
--tw-rotate: 0;
|
||||
--tw-skew-x: 0;
|
||||
--tw-skew-y: 0;
|
||||
--tw-scale-x: 1;
|
||||
--tw-scale-y: 1;
|
||||
--tw-pan-x: ;
|
||||
--tw-pan-y: ;
|
||||
--tw-pinch-zoom: ;
|
||||
--tw-scroll-snap-strictness: proximity;
|
||||
--tw-gradient-from-position: ;
|
||||
--tw-gradient-via-position: ;
|
||||
--tw-gradient-to-position: ;
|
||||
--tw-ordinal: ;
|
||||
--tw-slashed-zero: ;
|
||||
--tw-numeric-figure: ;
|
||||
--tw-numeric-spacing: ;
|
||||
--tw-numeric-fraction: ;
|
||||
--tw-ring-inset: ;
|
||||
--tw-ring-offset-width: 0px;
|
||||
--tw-ring-offset-color: #fff;
|
||||
--tw-ring-color: rgb(59 130 246 / 0.5);
|
||||
--tw-ring-offset-shadow: 0 0 #0000;
|
||||
--tw-ring-shadow: 0 0 #0000;
|
||||
--tw-shadow: 0 0 #0000;
|
||||
--tw-shadow-colored: 0 0 #0000;
|
||||
--tw-blur: ;
|
||||
--tw-brightness: ;
|
||||
--tw-contrast: ;
|
||||
--tw-grayscale: ;
|
||||
--tw-hue-rotate: ;
|
||||
--tw-invert: ;
|
||||
--tw-saturate: ;
|
||||
--tw-sepia: ;
|
||||
--tw-drop-shadow: ;
|
||||
--tw-backdrop-blur: ;
|
||||
--tw-backdrop-brightness: ;
|
||||
--tw-backdrop-contrast: ;
|
||||
--tw-backdrop-grayscale: ;
|
||||
--tw-backdrop-hue-rotate: ;
|
||||
--tw-backdrop-invert: ;
|
||||
--tw-backdrop-opacity: ;
|
||||
--tw-backdrop-saturate: ;
|
||||
--tw-backdrop-sepia: ;
|
||||
--tw-contain-size: ;
|
||||
--tw-contain-layout: ;
|
||||
--tw-contain-paint: ;
|
||||
--tw-contain-style:
|
||||
}
|
||||
.mb-3 {
|
||||
margin-bottom: 0.75rem
|
||||
}
|
||||
.mb-4 {
|
||||
margin-bottom: 1rem
|
||||
}
|
||||
.mr-2 {
|
||||
margin-right: 0.5rem
|
||||
}
|
||||
.mt-2 {
|
||||
margin-top: 0.5rem
|
||||
}
|
||||
.mt-4 {
|
||||
margin-top: 1rem
|
||||
}
|
||||
.block {
|
||||
display: block
|
||||
}
|
||||
.flex {
|
||||
display: flex
|
||||
}
|
||||
.hidden {
|
||||
display: none
|
||||
}
|
||||
.h-6 {
|
||||
height: 1.5rem
|
||||
}
|
||||
.h-full {
|
||||
height: 100%
|
||||
}
|
||||
.h-screen {
|
||||
height: 100vh
|
||||
}
|
||||
.w-6 {
|
||||
width: 1.5rem
|
||||
}
|
||||
.w-64 {
|
||||
width: 16rem
|
||||
}
|
||||
.w-72 {
|
||||
width: 18rem
|
||||
}
|
||||
.w-full {
|
||||
width: 100%
|
||||
}
|
||||
.max-w-3xl {
|
||||
max-width: 48rem
|
||||
}
|
||||
.flex-1 {
|
||||
flex: 1 1 0%
|
||||
}
|
||||
.cursor-pointer {
|
||||
cursor: pointer
|
||||
}
|
||||
.list-disc {
|
||||
list-style-type: disc
|
||||
}
|
||||
.flex-col {
|
||||
flex-direction: column
|
||||
}
|
||||
.items-center {
|
||||
align-items: center
|
||||
}
|
||||
.justify-center {
|
||||
justify-content: center
|
||||
}
|
||||
.justify-between {
|
||||
justify-content: space-between
|
||||
}
|
||||
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-x-reverse: 0;
|
||||
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
|
||||
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))
|
||||
}
|
||||
.space-x-3 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-x-reverse: 0;
|
||||
margin-right: calc(0.75rem * var(--tw-space-x-reverse));
|
||||
margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)))
|
||||
}
|
||||
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-y-reverse: 0;
|
||||
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
|
||||
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse))
|
||||
}
|
||||
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-y-reverse: 0;
|
||||
margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
|
||||
margin-bottom: calc(0.75rem * var(--tw-space-y-reverse))
|
||||
}
|
||||
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-y-reverse: 0;
|
||||
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
|
||||
margin-bottom: calc(1rem * var(--tw-space-y-reverse))
|
||||
}
|
||||
.overflow-hidden {
|
||||
overflow: hidden
|
||||
}
|
||||
.overflow-y-auto {
|
||||
overflow-y: auto
|
||||
}
|
||||
.rounded {
|
||||
border-radius: 0.25rem
|
||||
}
|
||||
.rounded-md {
|
||||
border-radius: 0.375rem
|
||||
}
|
||||
.border {
|
||||
border-width: 1px
|
||||
}
|
||||
.border-b {
|
||||
border-bottom-width: 1px
|
||||
}
|
||||
.border-l {
|
||||
border-left-width: 1px
|
||||
}
|
||||
.border-r {
|
||||
border-right-width: 1px
|
||||
}
|
||||
.border-none {
|
||||
border-style: none
|
||||
}
|
||||
.bg-blue-600 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1))
|
||||
}
|
||||
.bg-gray-100 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1))
|
||||
}
|
||||
.bg-gray-50 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1))
|
||||
}
|
||||
.bg-green-600 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1))
|
||||
}
|
||||
.bg-white {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
|
||||
}
|
||||
.p-2 {
|
||||
padding: 0.5rem
|
||||
}
|
||||
.p-4 {
|
||||
padding: 1rem
|
||||
}
|
||||
.px-2 {
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem
|
||||
}
|
||||
.px-4 {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem
|
||||
}
|
||||
.py-1 {
|
||||
padding-top: 0.25rem;
|
||||
padding-bottom: 0.25rem
|
||||
}
|
||||
.py-2 {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem
|
||||
}
|
||||
.pl-5 {
|
||||
padding-left: 1.25rem
|
||||
}
|
||||
.text-left {
|
||||
text-align: left
|
||||
}
|
||||
.text-center {
|
||||
text-align: center
|
||||
}
|
||||
.text-lg {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.75rem
|
||||
}
|
||||
.text-sm {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem
|
||||
}
|
||||
.text-xl {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.75rem
|
||||
}
|
||||
.text-xs {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem
|
||||
}
|
||||
.font-medium {
|
||||
font-weight: 500
|
||||
}
|
||||
.font-semibold {
|
||||
font-weight: 600
|
||||
}
|
||||
.leading-none {
|
||||
line-height: 1
|
||||
}
|
||||
.text-blue-600 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(37 99 235 / var(--tw-text-opacity, 1))
|
||||
}
|
||||
.text-gray-500 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(107 114 128 / var(--tw-text-opacity, 1))
|
||||
}
|
||||
.text-gray-600 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(75 85 99 / var(--tw-text-opacity, 1))
|
||||
}
|
||||
.text-red-500 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(239 68 68 / var(--tw-text-opacity, 1))
|
||||
}
|
||||
.text-red-600 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(220 38 38 / var(--tw-text-opacity, 1))
|
||||
}
|
||||
.text-white {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1))
|
||||
}
|
||||
.underline {
|
||||
text-decoration-line: underline
|
||||
}
|
||||
.shadow {
|
||||
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
|
||||
}
|
||||
.shadow-sm {
|
||||
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
|
||||
}
|
||||
.grayscale {
|
||||
--tw-grayscale: grayscale(100%);
|
||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
|
||||
}
|
||||
.filter {
|
||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
|
||||
}
|
||||
.hover\:bg-blue-700:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1))
|
||||
}
|
||||
.hover\:bg-gray-200:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1))
|
||||
}
|
||||
.hover\:bg-green-700:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1))
|
||||
}
|
||||
.hover\:underline:hover {
|
||||
text-decoration-line: underline
|
||||
}
|
||||
@@ -1,230 +1,180 @@
|
||||
import React, { useState } from "react";
|
||||
import ConstructionIcon from '@mui/icons-material/Construction';
|
||||
import AddToPhotosIcon from '@mui/icons-material/AddToPhotos';
|
||||
import ContentCutIcon from '@mui/icons-material/ContentCut';
|
||||
import RotateRightIcon from '@mui/icons-material/RotateRight';
|
||||
import CropIcon from '@mui/icons-material/Crop';
|
||||
import FormatListBulletedIcon from '@mui/icons-material/FormatListBulleted';
|
||||
import DeleteIcon from '@mui/icons-material/Delete';
|
||||
import DashboardIcon from '@mui/icons-material/Dashboard';
|
||||
import FullscreenIcon from '@mui/icons-material/Fullscreen';
|
||||
import FileUploadIcon from '@mui/icons-material/FileUpload';
|
||||
import LooksOneIcon from '@mui/icons-material/LooksOne';
|
||||
import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
|
||||
import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
|
||||
import LinkIcon from '@mui/icons-material/Link';
|
||||
import CodeIcon from '@mui/icons-material/Code';
|
||||
import TableChartIcon from '@mui/icons-material/TableChart';
|
||||
import IntegrationInstructionsIcon from '@mui/icons-material/IntegrationInstructions';
|
||||
import LockIcon from '@mui/icons-material/Lock';
|
||||
import LockOpenIcon from '@mui/icons-material/LockOpen';
|
||||
import EditNoteIcon from '@mui/icons-material/EditNote';
|
||||
import WorkspacePremiumIcon from '@mui/icons-material/WorkspacePremium';
|
||||
import VerifiedIcon from '@mui/icons-material/Verified';
|
||||
import RemoveModeratorIcon from '@mui/icons-material/RemoveModerator';
|
||||
import SanitizerIcon from '@mui/icons-material/Sanitizer';
|
||||
import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
|
||||
import DrawIcon from '@mui/icons-material/Draw';
|
||||
import ApprovalIcon from '@mui/icons-material/Approval';
|
||||
import WaterDropIcon from '@mui/icons-material/WaterDrop';
|
||||
import MenuBookIcon from '@mui/icons-material/MenuBook';
|
||||
import AddPhotoAlternateIcon from '@mui/icons-material/AddPhotoAlternate';
|
||||
import AssignmentIcon from '@mui/icons-material/Assignment';
|
||||
import CollectionsIcon from '@mui/icons-material/Collections';
|
||||
import LayersClearIcon from '@mui/icons-material/LayersClear';
|
||||
import ScannerIcon from '@mui/icons-material/Scanner';
|
||||
import NoteAltIcon from '@mui/icons-material/NoteAlt';
|
||||
import CompareIcon from '@mui/icons-material/Compare';
|
||||
import InfoIcon from '@mui/icons-material/Info';
|
||||
import HighlightOffIcon from '@mui/icons-material/HighlightOff';
|
||||
import InvertColorsIcon from '@mui/icons-material/InvertColors';
|
||||
import AccountTreeIcon from '@mui/icons-material/AccountTree';
|
||||
import PaletteIcon from '@mui/icons-material/Palette';
|
||||
import ZoomInMapIcon from '@mui/icons-material/ZoomInMap';
|
||||
import BuildIcon from '@mui/icons-material/Build';
|
||||
import DriveFileRenameOutlineIcon from '@mui/icons-material/DriveFileRenameOutline';
|
||||
import JavascriptIcon from '@mui/icons-material/Javascript';
|
||||
import SegmentIcon from '@mui/icons-material/Segment';
|
||||
import LayersIcon from '@mui/icons-material/Layers';
|
||||
import GridOnIcon from '@mui/icons-material/GridOn';
|
||||
import AutoStoriesIcon from '@mui/icons-material/AutoStories';
|
||||
import Icon from '@mui/material/Icon';
|
||||
import AddToPhotosIcon from "@mui/icons-material/AddToPhotos";
|
||||
import ContentCutIcon from "@mui/icons-material/ContentCut";
|
||||
import ZoomInMapIcon from "@mui/icons-material/ZoomInMap";
|
||||
import InsertDriveFileIcon from "@mui/icons-material/InsertDriveFile";
|
||||
import VisibilityIcon from "@mui/icons-material/Visibility";
|
||||
import EditNoteIcon from "@mui/icons-material/EditNote";
|
||||
import { Group, SegmentedControl, Paper, Center, Stack, Button, Text, Box } from "@mantine/core";
|
||||
|
||||
import FileManager from "../components/FileManager";
|
||||
import SplitPdfPanel from "../tools/Split";
|
||||
import CompressPdfPanel from "../tools/Compress-pdf";
|
||||
import CompressPdfPanel from "../tools/Compress";
|
||||
import MergePdfPanel from "../tools/Merge";
|
||||
import PageEditor from "../components/PageEditor";
|
||||
import Viewer from "../components/Viewer";
|
||||
|
||||
const toolRegistry = {
|
||||
"split-pdf": { icon: <PictureAsPdfIcon />, name: "Split PDF", component: SplitPdfPanel },
|
||||
"compress-pdf": { icon: <ZoomInMapIcon />, name: "Compress PDF", component: CompressPdfPanel }
|
||||
split: { icon: <ContentCutIcon />, name: "Split PDF", component: SplitPdfPanel, view: "viewer" },
|
||||
compress: { icon: <ZoomInMapIcon />, name: "Compress PDF", component: CompressPdfPanel, view: "viewer" },
|
||||
merge: { icon: <AddToPhotosIcon />, name: "Merge PDFs", component: MergePdfPanel, view: "fileManager" },
|
||||
};
|
||||
|
||||
const tools = Object.entries(toolRegistry).map(([id, { icon, name }]) => ({ id, icon, name }));
|
||||
|
||||
// Example tool panels
|
||||
function ToolPanel({ selectedTool }) {
|
||||
if (!selectedTool) {
|
||||
return (
|
||||
<div className="p-2 border rounded bg-white shadow-sm">
|
||||
<p className="text-sm">Select a tool to begin interacting with the PDF.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className="p-2 border rounded bg-white shadow-sm">
|
||||
<h3 className="font-semibold text-sm mb-2">{selectedTool.name}</h3>
|
||||
<p className="text-xs text-gray-600">This is the panel for {selectedTool.name}.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function HomePage() {
|
||||
const tools = [
|
||||
{ id: "multi-tool", icon: <ConstructionIcon />, name: "Multi-Tool" },
|
||||
{ id: "merge-pdfs", icon: <AddToPhotosIcon />, name: "Merge PDFs" },
|
||||
{ id: "split-pdf", icon: <ContentCutIcon />, name: "Split PDF" },
|
||||
{ id: "rotate-pdf", icon: <RotateRightIcon />, name: "Rotate Pages" },
|
||||
{ id: "crop", icon: <CropIcon />, name: "Crop PDF" },
|
||||
{ id: "pdf-organizer", icon: <FormatListBulletedIcon />, name: "PDF Organizer" },
|
||||
{ id: "remove-pages", icon: <DeleteIcon />, name: "Remove Pages" },
|
||||
{ id: "multi-page-layout", icon: <DashboardIcon />, name: "Page Layout" },
|
||||
{ id: "scale-pages", icon: <FullscreenIcon />, name: "Scale Pages" },
|
||||
{ id: "extract-page", icon: <FileUploadIcon />, name: "Extract Page" },
|
||||
{ id: "pdf-to-single-page", icon: <LooksOneIcon />, name: "PDF to Single Page" },
|
||||
{ id: "img-to-pdf", icon: <PictureAsPdfIcon />, name: "Image to PDF" },
|
||||
{ id: "file-to-pdf", icon: <InsertDriveFileIcon />, name: "File to PDF" },
|
||||
{ id: "url-to-pdf", icon: <LinkIcon />, name: "URL to PDF" },
|
||||
{ id: "html-to-pdf", icon: <CodeIcon />, name: "HTML to PDF" },
|
||||
{ id: "markdown-to-pdf", icon: <IntegrationInstructionsIcon />, name: "Markdown to PDF" },
|
||||
{ id: "pdf-to-img", icon: <CollectionsIcon />, name: "PDF to Image" },
|
||||
{ id: "pdf-to-pdfa", icon: <PictureAsPdfIcon />, name: "PDF to PDF/A" },
|
||||
{ id: "pdf-to-word", icon: <InsertDriveFileIcon />, name: "PDF to Word" },
|
||||
{ id: "pdf-to-presentation", icon: <DashboardIcon />, name: "PDF to Presentation" },
|
||||
{ id: "pdf-to-text", icon: <AssignmentIcon />, name: "PDF to Text" },
|
||||
{ id: "pdf-to-html", icon: <CodeIcon />, name: "PDF to HTML" },
|
||||
{ id: "pdf-to-xml", icon: <CodeIcon />, name: "PDF to XML" },
|
||||
{ id: "pdf-to-csv", icon: <TableChartIcon />, name: "PDF to CSV" },
|
||||
{ id: "pdf-to-markdown", icon: <IntegrationInstructionsIcon />, name: "PDF to Markdown" },
|
||||
{ id: "add-password", icon: <LockIcon />, name: "Add Password" },
|
||||
{ id: "remove-password", icon: <LockOpenIcon />, name: "Remove Password" },
|
||||
{ id: "change-permissions", icon: <LockIcon />, name: "Change Permissions" },
|
||||
{ id: "sign", icon: <EditNoteIcon />, name: "Sign PDF" },
|
||||
{ id: "cert-sign", icon: <WorkspacePremiumIcon />, name: "Certify Signature" },
|
||||
{ id: "validate-signature", icon: <VerifiedIcon />, name: "Validate Signature" },
|
||||
{ id: "remove-cert-sign", icon: <RemoveModeratorIcon />, name: "Remove Cert Signature" },
|
||||
{ id: "sanitize-pdf", icon: <SanitizerIcon />, name: "Sanitize PDF" },
|
||||
{ id: "auto-redact", icon: <VisibilityOffIcon />, name: "Auto Redact" },
|
||||
{ id: "redact", icon: <DrawIcon />, name: "Manual Redact" },
|
||||
{ id: "stamp", icon: <ApprovalIcon />, name: "Add Stamp" },
|
||||
{ id: "add-watermark", icon: <WaterDropIcon />, name: "Add Watermark" },
|
||||
{ id: "view-pdf", icon: <MenuBookIcon />, name: "View PDF" },
|
||||
{ id: "add-page-numbers", icon: <LooksOneIcon />, name: "Add Page Numbers" },
|
||||
{ id: "add-image", icon: <AddPhotoAlternateIcon />, name: "Add Image" },
|
||||
{ id: "change-metadata", icon: <AssignmentIcon />, name: "Change Metadata" },
|
||||
{ id: "ocr-pdf", icon: <LayersIcon />, name: "OCR PDF" },
|
||||
{ id: "extract-images", icon: <CollectionsIcon />, name: "Extract Images" },
|
||||
{ id: "flatten", icon: <LayersClearIcon />, name: "Flatten PDF" },
|
||||
{ id: "remove-blanks", icon: <ScannerIcon />, name: "Remove Blank Pages" },
|
||||
{ id: "remove-annotations", icon: <NoteAltIcon />, name: "Remove Annotations" },
|
||||
{ id: "compare", icon: <CompareIcon />, name: "Compare PDFs" },
|
||||
{ id: "get-info-on-pdf", icon: <InfoIcon />, name: "PDF Info" },
|
||||
{ id: "remove-image-pdf", icon: <HighlightOffIcon />, name: "Remove Images from PDF" },
|
||||
{ id: "replace-and-invert-color-pdf", icon: <InvertColorsIcon />, name: "Invert Colors" },
|
||||
{ id: "unlock-pdf-forms", icon: <LayersIcon />, name: "Unlock PDF Forms" },
|
||||
{ id: "pipeline", icon: <AccountTreeIcon />, name: "Pipeline" },
|
||||
{ id: "adjust-contrast", icon: <PaletteIcon />, name: "Adjust Contrast" },
|
||||
{ id: "compress-pdf", icon: <ZoomInMapIcon />, name: "Compress PDF" },
|
||||
{ id: "extract-image-scans", icon: <ScannerIcon />, name: "Extract Image Scans" },
|
||||
{ id: "repair", icon: <BuildIcon />, name: "Repair PDF" },
|
||||
{ id: "auto-rename", icon: <DriveFileRenameOutlineIcon />, name: "Auto Rename" },
|
||||
{ id: "show-javascript", icon: <JavascriptIcon />, name: "Show JavaScript" },
|
||||
{ id: "overlay-pdf", icon: <LayersIcon />, name: "Overlay PDF" },
|
||||
|
||||
const VIEW_OPTIONS = [
|
||||
{
|
||||
label: (
|
||||
<Group gap={4}>
|
||||
<VisibilityIcon fontSize="small" />
|
||||
</Group>
|
||||
),
|
||||
value: "viewer",
|
||||
},
|
||||
{
|
||||
label: (
|
||||
<Group gap={4}>
|
||||
<EditNoteIcon fontSize="small" />
|
||||
</Group>
|
||||
),
|
||||
value: "pageEditor",
|
||||
},
|
||||
{
|
||||
label: (
|
||||
<Group gap={4}>
|
||||
<InsertDriveFileIcon fontSize="small" />
|
||||
</Group>
|
||||
),
|
||||
value: "fileManager",
|
||||
},
|
||||
];
|
||||
|
||||
const [selectedTool, setSelectedTool] = useState(null);
|
||||
const [search, setSearch] = useState("");
|
||||
const [pdfFile, setPdfFile] = useState(null);
|
||||
const SelectedComponent = selectedTool ? toolRegistry[selectedTool.id]?.component : null;
|
||||
const [downloadUrl, setDownloadUrl] = useState(null);
|
||||
export default function HomePage() {
|
||||
const [selectedToolKey, setSelectedToolKey] = useState("split");
|
||||
const [currentView, setCurrentView] = useState("viewer");
|
||||
const [pdfFile, setPdfFile] = useState(null);
|
||||
const [files, setFiles] = useState([]);
|
||||
const [downloadUrl, setDownloadUrl] = useState(null);
|
||||
|
||||
const filteredTools = tools.filter(tool =>
|
||||
tool.name.toLowerCase().includes(search.toLowerCase())
|
||||
);
|
||||
const selectedTool = toolRegistry[selectedToolKey];
|
||||
|
||||
function handleFileUpload(e) {
|
||||
const file = e.target.files[0];
|
||||
if (file && file.type === "application/pdf") {
|
||||
const fileUrl = URL.createObjectURL(file);
|
||||
setPdfFile({ file, url: fileUrl });
|
||||
}
|
||||
}
|
||||
|
||||
return ( <div className="flex h-screen overflow-hidden">
|
||||
{/* Left Sidebar */}
|
||||
<div className="w-64 bg-gray-100 p-4 flex flex-col space-y-2 overflow-y-auto border-r">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search tools..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="mb-3 px-2 py-1 border rounded text-sm"
|
||||
/>
|
||||
{filteredTools.map(tool => (
|
||||
<button
|
||||
key={tool.id}
|
||||
title={tool.name}
|
||||
onClick={() => setSelectedTool(tool)}
|
||||
className="flex items-center space-x-3 p-2 hover:bg-gray-200 rounded text-left"
|
||||
return (
|
||||
<Group align="flex-start" spacing={0} style={{ minHeight: "100vh" }}>
|
||||
{/* Left: Tool Picker */}
|
||||
<Box
|
||||
style={{
|
||||
width: 220,
|
||||
background: "#f8f9fa",
|
||||
borderRight: "1px solid #e9ecef",
|
||||
minHeight: "100vh",
|
||||
padding: 16,
|
||||
}}
|
||||
>
|
||||
<div className="text-xl leading-none flex items-center justify-center h-6 w-6">
|
||||
{tool.icon}
|
||||
</div>
|
||||
<span className="text-sm font-medium">{tool.name}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<Text size="lg" weight={500} mb="md">
|
||||
Tools
|
||||
</Text>
|
||||
<Stack spacing="sm">
|
||||
{Object.entries(toolRegistry).map(([id, { icon, name }]) => (
|
||||
<Button
|
||||
key={id}
|
||||
variant={selectedToolKey === id ? "filled" : "subtle"}
|
||||
leftIcon={icon}
|
||||
onClick={() => {
|
||||
setSelectedToolKey(id);
|
||||
if (toolRegistry[id].view) setCurrentView(toolRegistry[id].view);
|
||||
}}
|
||||
fullWidth
|
||||
size="md"
|
||||
radius="md"
|
||||
>
|
||||
{name}
|
||||
</Button>
|
||||
))}
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
{/* Central PDF Viewer Area */}
|
||||
<div className="flex-1 bg-white flex items-center justify-center overflow-hidden">
|
||||
<div className="w-full h-full max-w-5xl max-h-[95vh] border rounded shadow-md bg-gray-50 flex items-center justify-center">
|
||||
{!pdfFile ? (
|
||||
<label className="cursor-pointer text-blue-600 underline">
|
||||
Click to upload a PDF
|
||||
<input
|
||||
type="file"
|
||||
accept="application/pdf"
|
||||
onChange={handleFileUpload}
|
||||
className="hidden"
|
||||
/>
|
||||
</label>
|
||||
) : (
|
||||
<iframe
|
||||
src={pdfFile.url}
|
||||
title="PDF Viewer"
|
||||
className="w-full h-full border-none"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{/* Middle: Main View (Viewer, Editor, Manager) */}
|
||||
<Box
|
||||
style={{
|
||||
flex: 1,
|
||||
minWidth: 0,
|
||||
padding: 24,
|
||||
background: "#fff",
|
||||
minHeight: "100vh",
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
<Center>
|
||||
<Paper
|
||||
radius="xl"
|
||||
shadow="sm"
|
||||
p={4}
|
||||
style={{
|
||||
display: "inline-block",
|
||||
marginTop: 8,
|
||||
marginBottom: 24,
|
||||
background: "#f8f9fa",
|
||||
zIndex: 10,
|
||||
}}
|
||||
>
|
||||
<SegmentedControl
|
||||
data={VIEW_OPTIONS}
|
||||
value={currentView}
|
||||
onChange={setCurrentView}
|
||||
color="blue"
|
||||
radius="xl"
|
||||
size="md"
|
||||
/>
|
||||
</Paper>
|
||||
</Center>
|
||||
<Box>
|
||||
{currentView === "viewer" && (
|
||||
<Viewer
|
||||
file={pdfFile}
|
||||
setFile={setPdfFile}
|
||||
downloadUrl={downloadUrl}
|
||||
setDownloadUrl={setDownloadUrl}
|
||||
/>
|
||||
)}
|
||||
{currentView === "pageEditor" && (
|
||||
<PageEditor
|
||||
file={pdfFile}
|
||||
setFile={setPdfFile}
|
||||
downloadUrl={downloadUrl}
|
||||
setDownloadUrl={setDownloadUrl}
|
||||
/>
|
||||
)}
|
||||
{currentView === "fileManager" && (
|
||||
<FileManager
|
||||
files={files}
|
||||
setFiles={setFiles}
|
||||
setPdfFile={setPdfFile}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Right Sidebar: Tool Interactions */}
|
||||
<div className="w-72 bg-gray-50 p-4 border-l overflow-y-auto">
|
||||
<h2 className="text-lg font-semibold mb-4">Tool Panel</h2>
|
||||
<div className="space-y-3">
|
||||
{SelectedComponent ? (
|
||||
<SelectedComponent file={pdfFile} downloadUrl setDownloadUrl />
|
||||
) : selectedTool ? (
|
||||
<div className="p-2 border rounded bg-white shadow-sm">
|
||||
<h3 className="font-semibold text-sm mb-2">{selectedTool.name}</h3>
|
||||
<p className="text-xs text-gray-600">This is the panel for {selectedTool.name}.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-2 border rounded bg-white shadow-sm">
|
||||
<p className="text-sm">Select a tool to begin interacting with the PDF.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
{/* Right: Tool Interaction */}
|
||||
<Box
|
||||
style={{
|
||||
width: 380,
|
||||
background: "#f8f9fa",
|
||||
borderLeft: "1px solid #e9ecef",
|
||||
minHeight: "100vh",
|
||||
padding: 24,
|
||||
}}
|
||||
>
|
||||
{selectedTool && selectedTool.component && (
|
||||
<Paper p="md" radius="md" shadow="xs">
|
||||
{React.createElement(selectedTool.component, {
|
||||
file: pdfFile,
|
||||
setPdfFile,
|
||||
files,
|
||||
setFiles,
|
||||
downloadUrl,
|
||||
setDownloadUrl,
|
||||
})}
|
||||
</Paper>
|
||||
)}
|
||||
</Box>
|
||||
</Group>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,91 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
import axios from "axios";
|
||||
|
||||
export default function CompressPdfPanel({file}) {
|
||||
const [optimizeLevel, setOptimizeLevel] = useState("5");
|
||||
const [grayscale, setGrayscale] = useState(false);
|
||||
const [expectedOutputSize, setExpectedOutputSize] = useState("");
|
||||
const [status, setStatus] = useState("");
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!file) {
|
||||
setStatus("Please select a file.");
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("fileInput", file.file);
|
||||
formData.append("optimizeLevel", optimizeLevel);
|
||||
formData.append("grayscale", grayscale);
|
||||
if (expectedOutputSize) {
|
||||
formData.append("expectedOutputSize", expectedOutputSize);
|
||||
}
|
||||
|
||||
setStatus("Compressing...");
|
||||
|
||||
try {
|
||||
const response = await axios.post("/api/v1/misc/compress-pdf", formData, {
|
||||
responseType: "blob",
|
||||
});
|
||||
|
||||
const url = window.URL.createObjectURL(new Blob([response.data]));
|
||||
const link = document.createElement("a");
|
||||
link.href = url;
|
||||
link.setAttribute("download", "compressed.pdf");
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
|
||||
setStatus("Download ready!");
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
setStatus("Failed to compress PDF.");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-4 text-sm">
|
||||
|
||||
<div>
|
||||
<label className="block font-medium">Compression Level (1-9)</label>
|
||||
<select
|
||||
value={optimizeLevel}
|
||||
onChange={(e) => setOptimizeLevel(e.target.value)}
|
||||
className="w-full border px-2 py-1 rounded"
|
||||
>
|
||||
{[...Array(9)].map((_, i) => (
|
||||
<option key={i + 1} value={i + 1}>{i + 1}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="grayscale"
|
||||
checked={grayscale}
|
||||
onChange={(e) => setGrayscale(e.target.checked)}
|
||||
className="mr-2"
|
||||
/>
|
||||
<label htmlFor="grayscale">Convert images to grayscale</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block font-medium">Expected Output Size (e.g. 2MB)</label>
|
||||
<input
|
||||
type="text"
|
||||
value={expectedOutputSize}
|
||||
onChange={(e) => setExpectedOutputSize(e.target.value)}
|
||||
className="w-full border px-2 py-1 rounded"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button type="submit" className="bg-blue-600 text-white px-4 py-2 rounded">
|
||||
Compress PDF
|
||||
</button>
|
||||
|
||||
{status && <p className="text-xs text-gray-600 mt-2">{status}</p>}
|
||||
</form>
|
||||
);
|
||||
}
|
||||
113
frontend/src/tools/Compress.js
Normal file
113
frontend/src/tools/Compress.js
Normal file
@@ -0,0 +1,113 @@
|
||||
import React, { useState } from "react";
|
||||
import { Stack, Slider, Group, Text, Button, Checkbox, TextInput, Paper } from "@mantine/core";
|
||||
|
||||
export default function CompressPdfPanel({ files = [], setDownloadUrl, setLoading }) {
|
||||
const [selected, setSelected] = useState(files.map(() => false));
|
||||
const [compressionLevel, setCompressionLevel] = useState(5); // 1-9, default 5
|
||||
const [grayscale, setGrayscale] = useState(false);
|
||||
const [removeMetadata, setRemoveMetadata] = useState(false);
|
||||
const [expectedSize, setExpectedSize] = useState("");
|
||||
const [aggressive, setAggressive] = useState(false);
|
||||
const [localLoading, setLocalLoading] = useState(false);
|
||||
|
||||
// Update selection state if files prop changes
|
||||
React.useEffect(() => {
|
||||
setSelected(files.map(() => false));
|
||||
}, [files]);
|
||||
|
||||
const handleCheckbox = idx => {
|
||||
setSelected(sel => sel.map((v, i) => (i === idx ? !v : v)));
|
||||
};
|
||||
|
||||
const handleCompress = async () => {
|
||||
const selectedFiles = files.filter((_, i) => selected[i]);
|
||||
if (selectedFiles.length === 0) return;
|
||||
setLocalLoading(true);
|
||||
setLoading?.(true);
|
||||
|
||||
const formData = new FormData();
|
||||
selectedFiles.forEach(file => formData.append("fileInput", file));
|
||||
formData.append("compressionLevel", compressionLevel);
|
||||
formData.append("grayscale", grayscale);
|
||||
formData.append("removeMetadata", removeMetadata);
|
||||
formData.append("aggressive", aggressive);
|
||||
if (expectedSize) formData.append("expectedSize", expectedSize);
|
||||
|
||||
try {
|
||||
const res = await fetch("/api/v1/general/compress-pdf", {
|
||||
method: "POST",
|
||||
body: formData,
|
||||
});
|
||||
const blob = await res.blob();
|
||||
setDownloadUrl(URL.createObjectURL(blob));
|
||||
} finally {
|
||||
setLocalLoading(false);
|
||||
setLoading?.(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Paper shadow="xs" p="md" radius="md" withBorder>
|
||||
<Stack>
|
||||
<Text weight={500} mb={4}>Select files to compress:</Text>
|
||||
<Stack spacing={4}>
|
||||
{files.length === 0 && <Text color="dimmed" size="sm">No files loaded.</Text>}
|
||||
{files.map((file, idx) => (
|
||||
<Checkbox
|
||||
key={file.name + idx}
|
||||
label={file.name}
|
||||
checked={selected[idx] || false}
|
||||
onChange={() => handleCheckbox(idx)}
|
||||
/>
|
||||
))}
|
||||
</Stack>
|
||||
<Stack spacing={4} mb={14}>
|
||||
<Text size="sm" style={{ minWidth: 140 }}>Compression Level</Text>
|
||||
<Slider
|
||||
min={1}
|
||||
max={9}
|
||||
step={1}
|
||||
value={compressionLevel}
|
||||
onChange={setCompressionLevel}
|
||||
marks={[
|
||||
{ value: 1, label: "1" },
|
||||
{ value: 5, label: "5" },
|
||||
{ value: 9, label: "9" },
|
||||
]}
|
||||
style={{ flex: 1 }}
|
||||
/>
|
||||
</Stack >
|
||||
<Checkbox
|
||||
label="Convert images to grayscale"
|
||||
checked={grayscale}
|
||||
onChange={e => setGrayscale(e.currentTarget.checked)}
|
||||
/>
|
||||
<Checkbox
|
||||
label="Remove PDF metadata"
|
||||
checked={removeMetadata}
|
||||
onChange={e => setRemoveMetadata(e.currentTarget.checked)}
|
||||
/>
|
||||
<Checkbox
|
||||
label="Aggressive compression (may reduce quality)"
|
||||
checked={aggressive}
|
||||
onChange={e => setAggressive(e.currentTarget.checked)}
|
||||
/>
|
||||
<TextInput
|
||||
label="Expected output size (e.g. 2MB, 500KB)"
|
||||
placeholder="Optional"
|
||||
value={expectedSize}
|
||||
onChange={e => setExpectedSize(e.currentTarget.value)}
|
||||
/>
|
||||
<Button
|
||||
onClick={handleCompress}
|
||||
loading={localLoading}
|
||||
disabled={selected.every(v => !v)}
|
||||
fullWidth
|
||||
mt="md"
|
||||
>
|
||||
Compress Selected PDF{selected.filter(Boolean).length > 1 ? "s" : ""}
|
||||
</Button>
|
||||
</Stack>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
101
frontend/src/tools/Merge.js
Normal file
101
frontend/src/tools/Merge.js
Normal file
@@ -0,0 +1,101 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
|
||||
export default function MergePdfPanel({ files, setDownloadUrl }) {
|
||||
const [selectedFiles, setSelectedFiles] = useState([]);
|
||||
const [downloadUrl, setLocalDownloadUrl] = useState(null); // Local state for download URL
|
||||
const [isLoading, setIsLoading] = useState(false); // Loading state
|
||||
const [errorMessage, setErrorMessage] = useState(null); // Error message state
|
||||
|
||||
// Sync selectedFiles with files whenever files change
|
||||
useEffect(() => {
|
||||
setSelectedFiles(files.map(() => true)); // Select all files by default
|
||||
}, [files]);
|
||||
|
||||
const handleMerge = async () => {
|
||||
const filesToMerge = files.filter((_, index) => selectedFiles[index]);
|
||||
|
||||
if (filesToMerge.length < 2) {
|
||||
alert("Please select at least two PDFs to merge.");
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = new FormData();
|
||||
filesToMerge.forEach((file) => formData.append("fileInput", file)); // Use "fileInput" as the key
|
||||
|
||||
setIsLoading(true); // Start loading
|
||||
setErrorMessage(null); // Clear previous errors
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/v1/general/merge-pdfs", {
|
||||
method: "POST",
|
||||
body: formData,
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorText = await response.text();
|
||||
throw new Error(`Failed to merge PDFs: ${errorText}`);
|
||||
}
|
||||
|
||||
const blob = await response.blob();
|
||||
const downloadUrl = URL.createObjectURL(blob);
|
||||
setDownloadUrl(downloadUrl); // Pass to parent component
|
||||
setLocalDownloadUrl(downloadUrl); // Store locally for download button
|
||||
} catch (error) {
|
||||
console.error("Error merging PDFs:", error);
|
||||
setErrorMessage(error.message); // Set error message
|
||||
} finally {
|
||||
setIsLoading(false); // Stop loading
|
||||
}
|
||||
};
|
||||
|
||||
const handleCheckboxChange = (index) => {
|
||||
setSelectedFiles((prevSelectedFiles) =>
|
||||
prevSelectedFiles.map((selected, i) => (i === index ? !selected : selected))
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<h3 className="font-semibold text-lg">Merge PDFs</h3>
|
||||
<ul className="list-disc pl-5 text-sm">
|
||||
{files.map((file, index) => (
|
||||
<li key={index} className="flex items-center space-x-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedFiles[index]}
|
||||
onChange={() => handleCheckboxChange(index)}
|
||||
className="form-checkbox"
|
||||
/>
|
||||
<span>{file.name}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
{files.filter((_, index) => selectedFiles[index]).length < 2 && (
|
||||
<p className="text-sm text-red-500">
|
||||
Please select at least two PDFs to merge.
|
||||
</p>
|
||||
)}
|
||||
<button
|
||||
onClick={handleMerge}
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
|
||||
disabled={files.filter((_, index) => selectedFiles[index]).length < 2 || isLoading}
|
||||
>
|
||||
{isLoading ? "Merging..." : "Merge PDFs"}
|
||||
</button>
|
||||
{errorMessage && (
|
||||
<p className="text-sm text-red-500 mt-2">
|
||||
{errorMessage}
|
||||
</p>
|
||||
)}
|
||||
{downloadUrl && (
|
||||
<a
|
||||
href={downloadUrl}
|
||||
download="merged.pdf"
|
||||
className="block mt-4 px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 text-center"
|
||||
>
|
||||
Download Merged PDF
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,10 +1,33 @@
|
||||
import React, { useState } from "react";
|
||||
import axios from "axios";
|
||||
import DownloadIcon from '@mui/icons-material/Download';
|
||||
import {
|
||||
Button,
|
||||
Select,
|
||||
TextInput,
|
||||
Checkbox,
|
||||
Notification,
|
||||
Stack,
|
||||
} from "@mantine/core";
|
||||
import DownloadIcon from "@mui/icons-material/Download";
|
||||
|
||||
export default function SplitPdfPanel({ file, downloadUrl, setDownloadUrl }) {
|
||||
const [mode, setMode] = useState("byPages");
|
||||
const [pageNumbers, setPageNumbers] = useState("");
|
||||
|
||||
const [horizontalDivisions, setHorizontalDivisions] = useState("0");
|
||||
const [verticalDivisions, setVerticalDivisions] = useState("1");
|
||||
const [mergeSections, setMergeSections] = useState(false);
|
||||
|
||||
const [splitType, setSplitType] = useState("size");
|
||||
const [splitValue, setSplitValue] = useState("");
|
||||
|
||||
const [bookmarkLevel, setBookmarkLevel] = useState("0");
|
||||
const [includeMetadata, setIncludeMetadata] = useState(false);
|
||||
const [allowDuplicates, setAllowDuplicates] = useState(false);
|
||||
|
||||
const [status, setStatus] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [errorMessage, setErrorMessage] = useState(null);
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
@@ -17,175 +40,168 @@ export default function SplitPdfPanel({ file, downloadUrl, setDownloadUrl }) {
|
||||
formData.append("fileInput", file.file);
|
||||
|
||||
let endpoint = "";
|
||||
if (mode === "byPages") {
|
||||
const pageNumbers = document.getElementById("pagesInput").value;
|
||||
formData.append("pageNumbers", pageNumbers);
|
||||
endpoint = "/api/v1/general/split-pages";
|
||||
} else if (mode === "bySections") {
|
||||
const horizontal = document.getElementById("horizontalDivisions").value;
|
||||
const vertical = document.getElementById("verticalDivisions").value;
|
||||
const merge = document.getElementById("merge").checked;
|
||||
formData.append("horizontalDivisions", horizontal);
|
||||
formData.append("verticalDivisions", vertical);
|
||||
formData.append("merge", merge);
|
||||
endpoint = "/api/v1/general/split-pdf-by-sections";
|
||||
} else if (mode === "bySizeOrCount") {
|
||||
const splitType = document.getElementById("splitType").value;
|
||||
const splitValue = document.getElementById("splitValue").value;
|
||||
formData.append("splitType", splitType === "size" ? 0 : splitType === "pages" ? 1 : 2);
|
||||
formData.append("splitValue", splitValue);
|
||||
endpoint = "/api/v1/general/split-by-size-or-count";
|
||||
} else if (mode === "byChapters") {
|
||||
const bookmarkLevel = document.getElementById("bookmarkLevel").value;
|
||||
const includeMetadata = document.getElementById("includeMetadata").checked;
|
||||
const allowDuplicates = document.getElementById("allowDuplicates").checked;
|
||||
formData.append("bookmarkLevel", bookmarkLevel);
|
||||
formData.append("includeMetadata", includeMetadata);
|
||||
formData.append("allowDuplicates", allowDuplicates);
|
||||
endpoint = "/api/v1/general/split-pdf-by-chapters";
|
||||
|
||||
switch (mode) {
|
||||
case "byPages":
|
||||
formData.append("pageNumbers", pageNumbers);
|
||||
endpoint = "/api/v1/general/split-pages";
|
||||
break;
|
||||
case "bySections":
|
||||
formData.append("horizontalDivisions", horizontalDivisions);
|
||||
formData.append("verticalDivisions", verticalDivisions);
|
||||
formData.append("merge", mergeSections);
|
||||
endpoint = "/api/v1/general/split-pdf-by-sections";
|
||||
break;
|
||||
case "bySizeOrCount":
|
||||
formData.append("splitType", splitType === "size" ? 0 : splitType === "pages" ? 1 : 2);
|
||||
formData.append("splitValue", splitValue);
|
||||
endpoint = "/api/v1/general/split-by-size-or-count";
|
||||
break;
|
||||
case "byChapters":
|
||||
formData.append("bookmarkLevel", bookmarkLevel);
|
||||
formData.append("includeMetadata", includeMetadata);
|
||||
formData.append("allowDuplicates", allowDuplicates);
|
||||
endpoint = "/api/v1/general/split-pdf-by-chapters";
|
||||
break;
|
||||
default:
|
||||
return;
|
||||
}
|
||||
|
||||
setStatus("Processing split...");
|
||||
setIsLoading(true);
|
||||
setErrorMessage(null);
|
||||
|
||||
try {
|
||||
const response = await axios.post(endpoint, formData, { responseType: "blob" });
|
||||
const link = document.createElement("a");
|
||||
link.href = url;
|
||||
link.setAttribute("download", "split_output.zip");
|
||||
document.body.appendChild(link);
|
||||
const blob = new Blob([response.data], { type: "application/zip" });
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
setDownloadUrl(url);
|
||||
setStatus("Download ready.");
|
||||
} catch (error) {
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
setErrorMessage(error.response?.data || "An error occurred while splitting the PDF.");
|
||||
setStatus("Split failed.");
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="p-2 border rounded bg-white shadow-sm space-y-4 text-sm">
|
||||
<form onSubmit={handleSubmit} >
|
||||
<h3 className="font-semibold">Split PDF</h3>
|
||||
|
||||
<div>
|
||||
<label className="block mb-1 font-medium">Split Mode</label>
|
||||
<select
|
||||
value={mode}
|
||||
onChange={(e) => setMode(e.target.value)}
|
||||
className="w-full border px-2 py-1 rounded"
|
||||
>
|
||||
<option value="byPages">Split by Pages (e.g. 1,3,5-10)</option>
|
||||
<option value="bySections">Split by Grid Sections</option>
|
||||
<option value="bySizeOrCount">Split by Size or Count</option>
|
||||
<option value="byChapters">Split by Chapters</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<Select
|
||||
label="Split Mode"
|
||||
value={mode}
|
||||
onChange={setMode}
|
||||
data={[
|
||||
{ value: "byPages", label: "Split by Pages (e.g. 1,3,5-10)" },
|
||||
{ value: "bySections", label: "Split by Grid Sections" },
|
||||
{ value: "bySizeOrCount", label: "Split by Size or Count" },
|
||||
{ value: "byChapters", label: "Split by Chapters" },
|
||||
]}
|
||||
/>
|
||||
{mode === "byPages" && (
|
||||
<div>
|
||||
<label className="block font-medium mb-1">Pages</label>
|
||||
<input
|
||||
type="text"
|
||||
id="pagesInput"
|
||||
className="w-full border px-2 py-1 rounded"
|
||||
placeholder="e.g. 1,3,5-10"
|
||||
/>
|
||||
</div>
|
||||
<TextInput
|
||||
label="Pages"
|
||||
placeholder="e.g. 1,3,5-10"
|
||||
value={pageNumbers}
|
||||
onChange={(e) => setPageNumbers(e.target.value)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{mode === "bySections" && (
|
||||
<div className="space-y-2">
|
||||
<div>
|
||||
<label className="block font-medium mb-1">Horizontal Divisions</label>
|
||||
<input
|
||||
type="number"
|
||||
id="horizontalDivisions"
|
||||
className="w-full border px-2 py-1 rounded"
|
||||
min="0"
|
||||
max="300"
|
||||
defaultValue="0"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block font-medium mb-1">Vertical Divisions</label>
|
||||
<input
|
||||
type="number"
|
||||
id="verticalDivisions"
|
||||
className="w-full border px-2 py-1 rounded"
|
||||
min="0"
|
||||
max="300"
|
||||
defaultValue="1"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<input type="checkbox" id="merge" />
|
||||
<label htmlFor="merge">Merge sections into one PDF</label>
|
||||
</div>
|
||||
</div>
|
||||
<Stack spacing="sm">
|
||||
<TextInput
|
||||
label="Horizontal Divisions"
|
||||
type="number"
|
||||
min="0"
|
||||
max="300"
|
||||
value={horizontalDivisions}
|
||||
onChange={(e) => setHorizontalDivisions(e.target.value)}
|
||||
/>
|
||||
<TextInput
|
||||
label="Vertical Divisions"
|
||||
type="number"
|
||||
min="0"
|
||||
max="300"
|
||||
value={verticalDivisions}
|
||||
onChange={(e) => setVerticalDivisions(e.target.value)}
|
||||
/>
|
||||
<Checkbox
|
||||
label="Merge sections into one PDF"
|
||||
checked={mergeSections}
|
||||
onChange={(e) => setMergeSections(e.currentTarget.checked)}
|
||||
/>
|
||||
</Stack>
|
||||
)}
|
||||
|
||||
{mode === "bySizeOrCount" && (
|
||||
<div className="space-y-2">
|
||||
<div>
|
||||
<label className="block font-medium mb-1">Split Type</label>
|
||||
<select id="splitType" className="w-full border px-2 py-1 rounded">
|
||||
<option value="size">By Size</option>
|
||||
<option value="pages">By Page Count</option>
|
||||
<option value="docs">By Document Count</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block font-medium mb-1">Split Value</label>
|
||||
<input
|
||||
type="text"
|
||||
id="splitValue"
|
||||
className="w-full border px-2 py-1 rounded"
|
||||
placeholder="e.g. 10MB or 5 pages"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Stack spacing="sm">
|
||||
<Select
|
||||
label="Split Type"
|
||||
value={splitType}
|
||||
onChange={setSplitType}
|
||||
data={[
|
||||
{ value: "size", label: "By Size" },
|
||||
{ value: "pages", label: "By Page Count" },
|
||||
{ value: "docs", label: "By Document Count" },
|
||||
]}
|
||||
/>
|
||||
<TextInput
|
||||
label="Split Value"
|
||||
placeholder="e.g. 10MB or 5 pages"
|
||||
value={splitValue}
|
||||
onChange={(e) => setSplitValue(e.target.value)}
|
||||
/>
|
||||
</Stack>
|
||||
)}
|
||||
|
||||
{mode === "byChapters" && (
|
||||
<div className="space-y-2">
|
||||
<div>
|
||||
<label className="block font-medium mb-1">Bookmark Level</label>
|
||||
<input
|
||||
type="number"
|
||||
id="bookmarkLevel"
|
||||
className="w-full border px-2 py-1 rounded"
|
||||
defaultValue="0"
|
||||
min="0"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<input type="checkbox" id="includeMetadata" />
|
||||
<label htmlFor="includeMetadata">Include Metadata</label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<input type="checkbox" id="allowDuplicates" />
|
||||
<label htmlFor="allowDuplicates">Allow Duplicate Bookmarks</label>
|
||||
</div>
|
||||
</div>
|
||||
<Stack spacing="sm">
|
||||
<TextInput
|
||||
label="Bookmark Level"
|
||||
type="number"
|
||||
value={bookmarkLevel}
|
||||
onChange={(e) => setBookmarkLevel(e.target.value)}
|
||||
/>
|
||||
<Checkbox
|
||||
label="Include Metadata"
|
||||
checked={includeMetadata}
|
||||
onChange={(e) => setIncludeMetadata(e.currentTarget.checked)}
|
||||
/>
|
||||
<Checkbox
|
||||
label="Allow Duplicate Bookmarks"
|
||||
checked={allowDuplicates}
|
||||
onChange={(e) => setAllowDuplicates(e.currentTarget.checked)}
|
||||
/>
|
||||
</Stack>
|
||||
)}
|
||||
|
||||
<button type="submit" className="bg-blue-600 text-white px-4 py-2 rounded mt-2">
|
||||
Split PDF
|
||||
</button>
|
||||
<Button type="submit" loading={isLoading} fullWidth>
|
||||
{isLoading ? "Processing..." : "Split PDF"}
|
||||
</Button>
|
||||
|
||||
{status && <p className="text-xs text-gray-600">{status}</p>}
|
||||
|
||||
{status === "Download ready." && downloadUrl && (
|
||||
<a
|
||||
href={downloadUrl}
|
||||
download="split_output.zip"
|
||||
className="inline-flex items-center bg-green-600 text-white px-4 py-2 rounded shadow hover:bg-green-700 transition mt-2"
|
||||
>
|
||||
<DownloadIcon className="mr-2" />
|
||||
Download Split PDF
|
||||
</a>
|
||||
)}
|
||||
{errorMessage && (
|
||||
<Notification color="red" title="Error" onClose={() => setErrorMessage(null)}>
|
||||
{errorMessage}
|
||||
</Notification>
|
||||
)}
|
||||
|
||||
{status === "Download ready." && downloadUrl && (
|
||||
<Button
|
||||
component="a"
|
||||
href={downloadUrl}
|
||||
download="split_output.zip"
|
||||
leftIcon={<DownloadIcon />}
|
||||
color="green"
|
||||
fullWidth
|
||||
>
|
||||
Download Split PDF
|
||||
</Button>
|
||||
)}
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user