Removed mantine libraries; Removed mandatory authentication

client/src/pages/PrintReport.tsx

@@ -1,10 +1,10 @@
 import { useEffect, useState } from "react"
 import createReport, { listCommands } from 'docx-templates'
-import { Dropzone, IMAGE_MIME_TYPE } from '@mantine/dropzone'
-import { IconFileTypeDocx, IconPlus, IconUpload, IconX } from "@tabler/icons-react"
+import { IconPlus, IconX } from "@tabler/icons-react"
 import { CommandSummary } from "docx-templates/lib/types"
 import { Control, Controller, FieldValues, SubmitHandler, useFieldArray, useForm, UseFormRegister } from "react-hook-form"
-import { Button, Field, Input, Text } from "@fluentui/react-components"
+import { Button, Field, Input, Text, tokens, useId } from "@fluentui/react-components"
+import { ArrowUploadRegular } from "@fluentui/react-icons"
 
 const xslTemplate = `<?xml version="1.0" encoding="utf-8"?>
 <xsl:stylesheet version="1.0" xmlns="urn:schemas-microsoft-com:office:spreadsheet" xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
@@ -1062,6 +1062,8 @@ const FormLoop = ({
   )
 }
 
+const IMAGE_MIME_TYPE = ["image/png", "image/jpeg", "image/jpg", "image/webp"];
+
 const renderCommand = (
   control: Control<FieldValues, any>,
   register: UseFormRegister<FieldValues>,
@@ -1080,50 +1082,72 @@ const renderCommand = (
   }
 
   if (command.type === 'IMAGE') {
+    const inputId = useId("file-input");
+
     return (
       <div style={{ display: 'flex', flexDirection: 'column' }}>
         <Text size={200} weight="semibold">{command.code}</Text>
         <Controller
-          key={key}
           name={name}
           control={control}
-          render={({ field: { onChange } }) => (
-            <Dropzone
-              accept={IMAGE_MIME_TYPE}
-              maxSize={5 * 1024 ** 2}
-              onReject={(files) => console.log('rejected files', files)}
-              onDrop={(files) => {
-                console.log(files[0])
-                files[0].arrayBuffer().then(res => {
-                  onChange({
-                    width: 6,
-                    height: 6,
-                    data: new Uint8Array(res),
-                    extension: files[0]?.path?.match(/\.[^.]+$/)?.[0] || ""
-                  })
-                })
-              }}
-              maxFiles={1}
-            >
-              <div style={{ display: 'flex', justifyContent: 'center', gap: '2rem', minHeight: '220px', pointerEvents: 'none' }}>
-                <Dropzone.Accept>
-                  <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
-                </Dropzone.Accept>
-                <Dropzone.Reject>
-                  <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
-                </Dropzone.Reject>
-                <Dropzone.Idle>
-                  <IconFileTypeDocx size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
-                </Dropzone.Idle>
+          render={({ field: { onChange } }) => {
+            const handleFiles = (files: FileList | null) => {
+              if (!files || files.length === 0) return;
+              const file = files[0];
+              if (!IMAGE_MIME_TYPE.includes(file.type)) {
+                console.log("Rejected file:", file);
+                return;
+              }
 
-                <div>
-                  <Text size={300}>
-                    Перетащите файлы сюда или нажмите, чтобы выбрать их
-                  </Text>
-                </div>
+              file.arrayBuffer().then((res) => {
+                onChange({
+                  width: 6,
+                  height: 6,
+                  data: new Uint8Array(res),
+                  extension: file.name.match(/\.[^.]+$/)?.[0] || "",
+                });
+              });
+            };
+
+            const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
+              e.preventDefault();
+              handleFiles(e.dataTransfer.files);
+            };
+
+            return (
+              <div
+                onDragOver={(e) => e.preventDefault()}
+                onDrop={handleDrop}
+                style={{
+                  border: `2px dashed ${tokens.colorNeutralStroke1}`,
+                  borderRadius: tokens.borderRadiusLarge,
+                  minHeight: "220px",
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  gap: "1rem",
+                  padding: "1rem",
+                  textAlign: "center",
+                  cursor: "pointer",
+                }}
+                onClick={() => document.getElementById(inputId)?.click()}
+              >
+                <input
+                  id={inputId}
+                  type="file"
+                  accept={IMAGE_MIME_TYPE.join(",")}
+                  style={{ display: "none" }}
+                  onChange={(e) => handleFiles(e.target.files)}
+                />
+
+                <ArrowUploadRegular fontSize={40} color={tokens.colorBrandForeground1} />
+                <Text size={300}>
+                  Перетащите изображение сюда или нажмите, чтобы выбрать
+                </Text>
               </div>
-            </Dropzone>
-          )}
+            );
+          }}
         />
       </div>
     )