Intake Router

1"use client";
2 
3import { Upload, X } from "lucide-react";
4 
5import { cn } from "@/lib/utils";
6import { useDropzone, type DropzoneFileItem } from "@/components/ui/dropzone";
7import { FileThumbnail } from "@/components/ui/file-thumbnail";
8 
9import {
10  RejectionRows,
11  type DropzoneExampleProps,
12} from "./dropzone-example-shared";
13 
14export function IntakeRouter({ className }: DropzoneExampleProps) {
15  const dropzone = useDropzone({
16    accept:
17      ".pdf,.doc,.docx,.csv,.xls,.xlsx,.png,.jpg,.jpeg,image/*,application/pdf,text/csv",
18    maxFiles: 12,
19    multiple: true,
20  });
21  const groups = getRoutedFiles(dropzone.files);
22 
23  return (
24    <section
25      {...dropzone.getRootProps({
26        className: cn(
27          "rounded-lg border bg-background p-4 transition-colors",
28          dropzone.isDragging && "border-foreground/40 bg-accent/35",
29          className,
30        ),
31      })}
32    >
33      <input {...dropzone.getInputProps({ className: "hidden" })} />
34      <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
35        <div>
36          <div className="text-sm font-medium">Intake router</div>
37          <div className="text-muted-foreground mt-1 text-xs">
38            One target, derived lanes by file type.
39          </div>
40        </div>
41        <button
42          {...dropzone.getTriggerProps({
43            native: true,
44            className:
45              "inline-flex h-8 cursor-pointer items-center gap-2 rounded-md border bg-background px-3 text-xs font-medium outline-none hover:bg-muted focus-visible:ring-[3px] focus-visible:ring-ring/24",
46          })}
47        >
48          <Upload className="size-3.5" aria-hidden />
49          Add batch
50        </button>
51      </div>
52      <div className="grid gap-3 md:grid-cols-3">
53        <RoutedLane
54          label="Documents"
55          files={groups.documents}
56          onRemove={dropzone.removeFile}
57        />
58        <RoutedLane
59          label="Images"
60          files={groups.images}
61          onRemove={dropzone.removeFile}
62        />
63        <RoutedLane
64          label="Tables"
65          files={groups.tables}
66          onRemove={dropzone.removeFile}
67        />
68      </div>
69      <RejectionRows rejections={dropzone.lastIntake.fileRejections} />
70    </section>
71  );
72}
73 
74function getRoutedFiles(files: DropzoneFileItem[]) {
75  const groups = {
76    documents: [] as DropzoneFileItem[],
77    images: [] as DropzoneFileItem[],
78    tables: [] as DropzoneFileItem[],
79  };
80 
81  for (const item of files) {
82// … truncated