TSX rewrite and query strings initial set up

frontend/src/tools/Compress.tsx

@@ -1,21 +1,31 @@
 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);
+export interface CompressProps {
+  files?: File[];
+  setDownloadUrl?: (url: string) => void;
+  setLoading?: (loading: boolean) => void;
+}
+
+const CompressPdfPanel: React.FC<CompressProps> = ({
+  files = [],
+  setDownloadUrl,
+  setLoading,
+}) => {
+  const [selected, setSelected] = useState<boolean[]>(files.map(() => false));
+  const [compressionLevel, setCompressionLevel] = useState<number>(5);
+  const [grayscale, setGrayscale] = useState<boolean>(false);
+  const [removeMetadata, setRemoveMetadata] = useState<boolean>(false);
+  const [expectedSize, setExpectedSize] = useState<string>("");
+  const [aggressive, setAggressive] = useState<boolean>(false);
+  const [localLoading, setLocalLoading] = useState<boolean>(false);
 
   // Update selection state if files prop changes
   React.useEffect(() => {
     setSelected(files.map(() => false));
   }, [files]);
 
-  const handleCheckbox = idx => {
+  const handleCheckbox = (idx: number) => {
     setSelected(sel => sel.map((v, i) => (i === idx ? !v : v)));
   };
 
@@ -27,10 +37,10 @@ export default function CompressPdfPanel({ files = [], setDownloadUrl, setLoadin
 
     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);
+    formData.append("compressionLevel", compressionLevel.toString());
+    formData.append("grayscale", grayscale.toString());
+    formData.append("removeMetadata", removeMetadata.toString());
+    formData.append("aggressive", aggressive.toString());
     if (expectedSize) formData.append("expectedSize", expectedSize);
 
     try {
@@ -39,7 +49,7 @@ export default function CompressPdfPanel({ files = [], setDownloadUrl, setLoadin
         body: formData,
       });
       const blob = await res.blob();
-      setDownloadUrl(URL.createObjectURL(blob));
+      setDownloadUrl?.(URL.createObjectURL(blob));
     } finally {
       setLocalLoading(false);
       setLoading?.(false);
@@ -49,9 +59,9 @@ export default function CompressPdfPanel({ files = [], setDownloadUrl, setLoadin
   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>}
+        <Text fw={500} mb={4}>Select files to compress:</Text>
+        <Stack gap={4}>
+          {files.length === 0 && <Text c="dimmed" size="sm">No files loaded.</Text>}
           {files.map((file, idx) => (
             <Checkbox
               key={file.name + idx}
@@ -61,7 +71,7 @@ export default function CompressPdfPanel({ files = [], setDownloadUrl, setLoadin
             />
           ))}
         </Stack>
-        <Stack spacing={4} mb={14}>
+        <Stack gap={4} mb={14}>
           <Text size="sm" style={{ minWidth: 140 }}>Compression Level</Text>
           <Slider
             min={1}
@@ -76,7 +86,7 @@ export default function CompressPdfPanel({ files = [], setDownloadUrl, setLoadin
             ]}
             style={{ flex: 1 }}
           />
-        </Stack >
+        </Stack>
         <Checkbox
           label="Convert images to grayscale"
           checked={grayscale}
@@ -110,4 +120,6 @@ export default function CompressPdfPanel({ files = [], setDownloadUrl, setLoadin
       </Stack>
     </Paper>
   );
-}
+};
+
+export default CompressPdfPanel;

frontend/src/tools/Merge.js

@@ -1,101 +0,0 @@
-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/Merge.tsx

@@ -0,0 +1,112 @@
+import React, { useState, useEffect } from "react";
+import { Paper, Button, Checkbox, Stack, Text, Group, Loader, Alert } from "@mantine/core";
+
+export interface MergePdfPanelProps {
+  files: File[];
+  setDownloadUrl: (url: string) => void;
+}
+
+const MergePdfPanel: React.FC<MergePdfPanelProps> = ({ files, setDownloadUrl }) => {
+  const [selectedFiles, setSelectedFiles] = useState<boolean[]>([]);
+  const [downloadUrl, setLocalDownloadUrl] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+  useEffect(() => {
+    setSelectedFiles(files.map(() => true));
+  }, [files]);
+
+  const handleMerge = async () => {
+    const filesToMerge = files.filter((_, index) => selectedFiles[index]);
+    if (filesToMerge.length < 2) {
+      setErrorMessage("Please select at least two PDFs to merge.");
+      return;
+    }
+
+    const formData = new FormData();
+    filesToMerge.forEach((file) => formData.append("fileInput", file));
+
+    setIsLoading(true);
+    setErrorMessage(null);
+
+    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 url = URL.createObjectURL(blob);
+      setDownloadUrl(url);
+      setLocalDownloadUrl(url);
+    } catch (error: any) {
+      setErrorMessage(error.message || "Unknown error occurred.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleCheckboxChange = (index: number) => {
+    setSelectedFiles((prev) =>
+      prev.map((selected, i) => (i === index ? !selected : selected))
+    );
+  };
+
+  const selectedCount = selectedFiles.filter(Boolean).length;
+
+  return (
+    <Paper shadow="xs" radius="md" p="md" withBorder>
+      <Stack>
+        <Text fw={500} size="lg">Merge PDFs</Text>
+        <Stack gap={4}>
+          {files.map((file, index) => (
+            <Group key={index} gap="xs">
+              <Checkbox
+                checked={selectedFiles[index] || false}
+                onChange={() => handleCheckboxChange(index)}
+              />
+              <Text size="sm">{file.name}</Text>
+            </Group>
+          ))}
+        </Stack>
+        {selectedCount < 2 && (
+          <Text size="sm" c="red">
+            Please select at least two PDFs to merge.
+          </Text>
+        )}
+        <Button
+          onClick={handleMerge}
+          loading={isLoading}
+          disabled={selectedCount < 2 || isLoading}
+          mt="md"
+        >
+          Merge PDFs
+        </Button>
+        {errorMessage && (
+          <Alert color="red" mt="sm">
+            {errorMessage}
+          </Alert>
+        )}
+        {downloadUrl && (
+          <Button
+            component="a"
+            href={downloadUrl}
+            download="merged.pdf"
+            color="green"
+            variant="light"
+            mt="md"
+          >
+            Download Merged PDF
+          </Button>
+        )}
+      </Stack>
+    </Paper>
+  );
+};
+
+export default MergePdfPanel;

frontend/src/tools/Split.js

@@ -1,208 +0,0 @@
-import React, { useState } from "react";
-import axios from "axios";
-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();
-    if (!file) {
-      setStatus("Please upload a PDF first.");
-      return;
-    }
-
-    const formData = new FormData();
-    formData.append("fileInput", file.file);
-
-    let endpoint = "";
-
-    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 blob = new Blob([response.data], { type: "application/zip" });
-      const url = window.URL.createObjectURL(blob);
-      setDownloadUrl(url);
-      setStatus("Download ready.");
-    } 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} >
-      <h3 className="font-semibold">Split PDF</h3>
-      <Stack spacing="sm" mb={16}>
-      <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" && (
-        <TextInput
-          label="Pages"
-          placeholder="e.g. 1,3,5-10"
-          value={pageNumbers}
-          onChange={(e) => setPageNumbers(e.target.value)}
-        />
-      )}
-
-      {mode === "bySections" && (
-        <Stack spacing="sm" gap={16}>
-          <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" && (
-        <Stack spacing="sm" gap={16}>
-          <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" && (
-        <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" loading={isLoading} fullWidth>
-        {isLoading ? "Processing..." : "Split PDF"}
-      </Button>
-
-      {status && <p className="text-xs text-gray-600">{status}</p>}
-
-      {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>
-      )}
-      </Stack>
-    </form>
-  );
-}

frontend/src/tools/Split.tsx

@@ -0,0 +1,232 @@
+import React, { useState } from "react";
+import axios from "axios";
+import {
+  Button,
+  Select,
+  TextInput,
+  Checkbox,
+  Notification,
+  Stack,
+} from "@mantine/core";
+import DownloadIcon from "@mui/icons-material/Download";
+
+export interface SplitPdfPanelProps {
+  file: { file: File; url: string } | null;
+  downloadUrl?: string | null;
+  setDownloadUrl: (url: string | null) => void;
+  params: {
+    mode: string;
+    pages: string;
+    hDiv: string;
+    vDiv: string;
+    merge: boolean;
+    splitType: string;
+    splitValue: string;
+    bookmarkLevel: string;
+    includeMetadata: boolean;
+    allowDuplicates: boolean;
+  };
+  updateParams: (newParams: Partial<SplitPdfPanelProps['params']>) => void;
+}
+
+const SplitPdfPanel: React.FC<SplitPdfPanelProps> = ({
+  file,
+  downloadUrl,
+  setDownloadUrl,
+  params,
+  updateParams,
+}) => {
+  const [status, setStatus] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+  const {
+    mode, pages, hDiv, vDiv, merge,
+    splitType, splitValue, bookmarkLevel,
+    includeMetadata, allowDuplicates
+  } = params;
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!file) {
+      setStatus("Please upload a PDF first.");
+      return;
+    }
+
+    const formData = new FormData();
+    formData.append("fileInput", file.file);
+
+    let endpoint = "";
+
+    switch (mode) {
+      case "byPages":
+        formData.append("pageNumbers", pages);
+        endpoint = "/api/v1/general/split-pages";
+        break;
+      case "bySections":
+        formData.append("horizontalDivisions", hDiv);
+        formData.append("verticalDivisions", vDiv);
+        formData.append("merge", merge.toString());
+        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.toString());
+        formData.append("allowDuplicates", allowDuplicates.toString());
+        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 blob = new Blob([response.data], { type: "application/zip" });
+      const url = window.URL.createObjectURL(blob);
+      setDownloadUrl(url);
+      setStatus("Download ready.");
+    } catch (error: any) {
+      console.error(error);
+      setErrorMessage(
+        error.response?.data || "An error occurred while splitting the PDF."
+      );
+      setStatus("Split failed.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <Stack gap="sm" mb={16}>
+        <Select
+          label="Split Mode"
+          value={mode}
+          onChange={(v) => v && updateParams({ mode: v })}
+          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" && (
+          <TextInput
+            label="Pages"
+            placeholder="e.g. 1,3,5-10"
+            value={pages}
+            onChange={(e) => updateParams({ pages: e.target.value })}
+          />
+        )}
+
+        {mode === "bySections" && (
+          <Stack gap="sm">
+            <TextInput
+              label="Horizontal Divisions"
+              type="number"
+              min="0"
+              max="300"
+              value={hDiv}
+              onChange={(e) => updateParams({ hDiv: e.target.value })}
+            />
+            <TextInput
+              label="Vertical Divisions"
+              type="number"
+              min="0"
+              max="300"
+              value={vDiv}
+              onChange={(e) => updateParams({ vDiv: e.target.value })}
+            />
+            <Checkbox
+              label="Merge sections into one PDF"
+              checked={merge}
+              onChange={(e) => updateParams({ merge: e.currentTarget.checked })}
+            />
+          </Stack>
+        )}
+
+        {mode === "bySizeOrCount" && (
+          <Stack gap="sm">
+            <Select
+              label="Split Type"
+              value={splitType}
+              onChange={(v) => v && updateParams({ splitType: v })}
+              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) => updateParams({ splitValue: e.target.value })}
+            />
+          </Stack>
+        )}
+
+        {mode === "byChapters" && (
+          <Stack gap="sm">
+            <TextInput
+              label="Bookmark Level"
+              type="number"
+              value={bookmarkLevel}
+              onChange={(e) => updateParams({ bookmarkLevel: e.target.value })}
+            />
+            <Checkbox
+              label="Include Metadata"
+              checked={includeMetadata}
+              onChange={(e) => updateParams({ includeMetadata: e.currentTarget.checked })}
+            />
+            <Checkbox
+              label="Allow Duplicate Bookmarks"
+              checked={allowDuplicates}
+              onChange={(e) => updateParams({ allowDuplicates: e.currentTarget.checked })}
+            />
+          </Stack>
+        )}
+
+        <Button type="submit" loading={isLoading} fullWidth>
+          {isLoading ? "Processing..." : "Split PDF"}
+        </Button>
+
+        {status && <p className="text-xs text-gray-600">{status}</p>}
+
+        {errorMessage && (
+          <Notification color="red" title="Error" onClose={() => setErrorMessage(null)}>
+            {errorMessage}
+          </Notification>
+        )}
+
+        {status === "Download ready." && downloadUrl && (
+          <Button
+            component="a"
+            href={downloadUrl}
+            download="split_output.zip"
+            leftSection={<DownloadIcon />}
+            color="green"
+            fullWidth
+          >
+            Download Split PDF
+          </Button>
+        )}
+      </Stack>
+    </form>
+  );
+};
+
+export default SplitPdfPanel;