Merge branch 'dev' into freight/nati-2

apps/edr-freight-web/backoffice/src/components/contracts/LogoUpload.tsx

@@ -0,0 +1,172 @@
+import { useRef, useState } from "react";
+import { Box, Button, Group, Image, Paper, Stack, Text } from "@mantine/core";
+import { ImageIcon, RefreshCw, X } from "lucide-react";
+
+const MAX_LOGO_MB = 10;
+
+export interface LogoUploadProps {
+  /** Logo image as a data URL, or null when none is attached yet. */
+  value: string | null;
+  onChange: (dataUrl: string | null) => void;
+  label?: string;
+  description?: string;
+}
+
+/**
+ * Company logo picker — reads the picked image straight into a data URL,
+ * same transport as {@link StampUpload}. Kept as its own component (not a
+ * generalized image-upload) matching how stamp/teeter are already separate
+ * files here despite the near-identical shape.
+ */
+export function LogoUpload({
+  value,
+  onChange,
+  label = "Company logo",
+  description = "Attach the official company logo.",
+}: LogoUploadProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [dragging, setDragging] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [fileName, setFileName] = useState<string | null>(null);
+
+  const readFile = (file: File | undefined | null) => {
+    if (!file) return;
+    if (!file.type.startsWith("image/")) {
+      setError("The logo must be an image file (PNG or JPG).");
+      return;
+    }
+    if (file.size > MAX_LOGO_MB * 1024 * 1024) {
+      setError(`The logo image must be under ${MAX_LOGO_MB} MB.`);
+      return;
+    }
+    const reader = new FileReader();
+    reader.onload = () => {
+      setError(null);
+      setFileName(file.name);
+      onChange(typeof reader.result === "string" ? reader.result : null);
+    };
+    reader.onerror = () => setError("Could not read that file. Try another.");
+    reader.readAsDataURL(file);
+  };
+
+  const openPicker = () => inputRef.current?.click();
+
+  const clear = () => {
+    setFileName(null);
+    setError(null);
+    onChange(null);
+    if (inputRef.current) inputRef.current.value = "";
+  };
+
+  return (
+    <Stack gap={6}>
+      <Text size="sm" fw={500}>
+        {label}
+      </Text>
+
+      <input
+        ref={inputRef}
+        type="file"
+        accept="image/png,image/jpeg,image/webp"
+        hidden
+        onChange={(e) => readFile(e.currentTarget.files?.[0])}
+      />
+
+      {value ? (
+        <Paper withBorder radius="md" p="sm">
+          <Group gap="md" wrap="nowrap" align="center">
+            <Box
+              style={{
+                background:
+                  "repeating-conic-gradient(var(--mantine-color-gray-1) 0% 25%, transparent 0% 50%) 50% / 14px 14px",
+                borderRadius: 8,
+                flexShrink: 0,
+                padding: 6,
+              }}
+            >
+              <Image
+                src={value}
+                alt="Company logo"
+                fit="contain"
+                h={92}
+                w={92}
+              />
+            </Box>
+            <Stack gap={4} style={{ flex: 1, minWidth: 0 }}>
+              <Text size="sm" fw={500} truncate>
+                {fileName ?? "Logo attached"}
+              </Text>
+              <Text size="xs" c="dimmed">
+                Shown in the header of every generated document.
+              </Text>
+              <Group gap="xs" mt={2}>
+                <Button
+                  size="compact-xs"
+                  variant="light"
+                  color="edr-green"
+                  leftSection={<RefreshCw size={13} />}
+                  onClick={openPicker}
+                >
+                  Replace
+                </Button>
+                <Button
+                  size="compact-xs"
+                  variant="subtle"
+                  color="red"
+                  leftSection={<X size={13} />}
+                  onClick={clear}
+                >
+                  Remove
+                </Button>
+              </Group>
+            </Stack>
+          </Group>
+        </Paper>
+      ) : (
+        <Paper
+          withBorder
+          radius="md"
+          p="lg"
+          onClick={openPicker}
+          onDragOver={(e) => {
+            e.preventDefault();
+            setDragging(true);
+          }}
+          onDragLeave={() => setDragging(false)}
+          onDrop={(e) => {
+            e.preventDefault();
+            setDragging(false);
+            readFile(e.dataTransfer.files?.[0]);
+          }}
+          style={{
+            borderColor: dragging
+              ? "var(--mantine-color-edr-green-6)"
+              : undefined,
+            borderStyle: "dashed",
+            backgroundColor: dragging
+              ? "var(--mantine-color-edr-green-0)"
+              : undefined,
+            cursor: "pointer",
+          }}
+        >
+          <Stack gap={6} align="center">
+            <ImageIcon size={26} color="var(--mantine-color-edr-green-6)" />
+            <Text size="sm" fw={500}>
+              Upload company logo
+            </Text>
+            <Text size="xs" c="dimmed" ta="center">
+              {description} Drop an image here or click to browse — PNG or JPG,
+              up to {MAX_LOGO_MB} MB.
+            </Text>
+          </Stack>
+        </Paper>
+      )}
+
+      {error && (
+        <Text size="xs" c="red.7">
+          {error}
+        </Text>
+      )}
+    </Stack>
+  );
+}