Mantine overhaul

frontend/src/tools/Compress-pdf.js

@@ -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>
-  );
-}

frontend/src/tools/Compress.js

@@ -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>
+  );
+}

frontend/src/tools/Merge.js

@@ -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>
+  );
+}

frontend/src/tools/Split.js

@@ -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>
   );
 }