fix file uplaod

apps/edr-freight-web/backoffice/src/pages/fleet/DriverDetailPage.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { useParams, useNavigate } from "react-router-dom";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import {
@@ -8,7 +8,6 @@ import {
   Card,
   Center,
   Container,
-  FileButton,
   Group,
   Loader,
   SimpleGrid,
@@ -19,6 +18,8 @@ import {
   Timeline,
   Title,
 } from "@mantine/core";
+import { SmartFileInput } from "@edr/ui-common";
+import type { IFileUploadSetting } from "@edr/types/freight";
 import {
   ArrowLeft,
   Download,
@@ -69,10 +70,44 @@ const fmtSize = (bytes: number) => {
   return kb < 1024 ? `${kb.toFixed(0)} KB` : `${(kb / 1024).toFixed(1)} MB`;
 };
 
+// Field key the synthesized driver-docs upload setting is keyed on.
+const DRIVER_DOCS_KEY = "driver_docs";
+/** Single-field upload setting so driver docs reuse the shared SmartFileInput
+ *  dropzone (same UX as customer-onboarding document uploads). */
+const DRIVER_DOCS_SETTING: IFileUploadSetting = {
+  id: "driver-docs-setting",
+  createdAt: "",
+  updatedAt: "",
+  deletedAt: null,
+  code: "driver_docs",
+  label: "Driver documents",
+  description: null,
+  entity: "other",
+  fields: [
+    {
+      id: "driver-docs-field",
+      createdAt: "",
+      updatedAt: "",
+      deletedAt: null,
+      settingId: "driver-docs-setting",
+      fileKey: DRIVER_DOCS_KEY,
+      fileLabel: "Upload driver document(s)",
+      helpText: "License, national ID, contracts, training certificates, etc.",
+      isRequired: false,
+      isMultiple: true,
+      maxFiles: 20,
+      allowedExtensions: ["pdf", "png", "jpg", "jpeg", "doc", "docx"],
+      maxSizeMb: 10,
+      order: 1,
+    },
+  ],
+};
+
 /** Driver documents upload + view area (files stored under code "driver_docs"). */
 const DriverDocuments = ({ driverId }: { driverId: string }) => {
   const { toast } = useToast();
   const qc = useQueryClient();
+  const [selected, setSelected] = useState<File[]>([]);
 
   const { data: docs = [], isLoading } = useQuery({
     queryKey: ["driver", driverId, "documents"],
@@ -109,17 +144,32 @@ const DriverDocuments = ({ driverId }: { driverId: string }) => {
 
   return (
     <Card withBorder padding="lg" radius="md">
-      <Group justify="space-between" mb="md">
-        <Text fw={600} size="sm">Documents ({docs.length})</Text>
-        <FileButton multiple onChange={(files) => files.length && uploadMutation.mutate(files)}>
-          {(props) => (
-            <Button {...props} size="xs" leftSection={<Upload size={14} />} loading={uploadMutation.isPending}>
-              Upload
-            </Button>
-          )}
-        </FileButton>
-      </Group>
+      <Stack gap="md" mb="lg">
+        <Text fw={600} size="sm">Upload documents</Text>
+        <SmartFileInput
+          file={DRIVER_DOCS_SETTING}
+          value={{ [DRIVER_DOCS_KEY]: selected }}
+          onChange={(v) => {
+            const next = v[DRIVER_DOCS_KEY];
+            setSelected(Array.isArray(next) ? next : next ? [next] : []);
+          }}
+        />
+        <Group justify="flex-end">
+          <Button
+            size="xs"
+            leftSection={<Upload size={14} />}
+            loading={uploadMutation.isPending}
+            disabled={selected.length === 0}
+            onClick={() =>
+              uploadMutation.mutate(selected, { onSuccess: () => setSelected([]) })
+            }
+          >
+            Upload {selected.length > 0 ? `(${selected.length})` : ""}
+          </Button>
+        </Group>
+      </Stack>
 
+      <Text fw={600} size="sm" mb="sm">Uploaded documents ({docs.length})</Text>
       {isLoading ? (
         <Loading />
       ) : docs.length === 0 ? (