feat: Phase 1 foundation - incident components, storage, and migrations

2026-07-10 10:48:56 +08:00
parent 28957f1e0f
commit 8a9758c8a6
10 changed files with 2619 additions and 8 deletions
@@ -0,0 +1,115 @@
+'use client'
+
+import { useRef, useState } from 'react'
+import type { EvidenceStage } from '@/lib/supabase/storage'
+
+const ACCEPTED = [
+  'image/jpeg', 'image/png', 'image/heic', 'image/webp',
+  'video/mp4', 'video/quicktime',
+  'application/pdf',
+  'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+].join(',')
+
+const MAX_SIZE = {
+  'video/mp4': 200 * 1024 * 1024,
+  'video/quicktime': 200 * 1024 * 1024,
+  default: 10 * 1024 * 1024,
+}
+
+interface Props {
+  stage: EvidenceStage
+  onFilesChange: (files: File[]) => void
+  disabled?: boolean
+}
+
+export function FileUpload({ stage, onFilesChange, disabled = false }: Props) {
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [files, setFiles] = useState<File[]>([])
+  const [errors, setErrors] = useState<string[]>([])
+  const [dragging, setDragging] = useState(false)
+
+  function validate(incoming: File[]): { valid: File[]; errs: string[] } {
+    const valid: File[] = []
+    const errs: string[] = []
+    for (const f of incoming) {
+      const limit = MAX_SIZE[f.type as keyof typeof MAX_SIZE] ?? MAX_SIZE.default
+      if (f.size > limit) {
+        errs.push(`${f.name}: exceeds ${limit / 1024 / 1024}MB limit`)
+      } else {
+        valid.push(f)
+      }
+    }
+    return { valid, errs }
+  }
+
+  function addFiles(incoming: File[]) {
+    const { valid, errs } = validate(incoming)
+    const next = [...files, ...valid]
+    setFiles(next)
+    setErrors(errs)
+    onFilesChange(next)
+  }
+
+  function remove(index: number) {
+    const next = files.filter((_, i) => i !== index)
+    setFiles(next)
+    onFilesChange(next)
+  }
+
+  return (
+    <div className="space-y-2">
+      <div
+        className={`border-2 border-dashed rounded-lg p-6 text-center cursor-pointer transition-colors
+          ${dragging ? 'border-blue-500 bg-blue-50' : 'border-gray-300 hover:border-gray-400'}
+          ${disabled ? 'opacity-50 pointer-events-none' : ''}`}
+        onClick={() => inputRef.current?.click()}
+        onDragOver={e => { e.preventDefault(); setDragging(true) }}
+        onDragLeave={() => setDragging(false)}
+        onDrop={e => {
+          e.preventDefault()
+          setDragging(false)
+          addFiles(Array.from(e.dataTransfer.files))
+        }}
+      >
+        <p className="text-sm text-gray-600">
+          Tap to add photos / videos / documents
+        </p>
+        <p className="text-xs text-gray-400 mt-1">
+          Photos/docs up to 10MB · Videos up to 200MB
+        </p>
+      </div>
+
+      <input
+        ref={inputRef}
+        type="file"
+        multiple
+        accept={ACCEPTED}
+        className="hidden"
+        onChange={e => addFiles(Array.from(e.target.files ?? []))}
+        disabled={disabled}
+      />
+
+      {errors.map((err, i) => (
+        <p key={i} className="text-sm text-red-600">{err}</p>
+      ))}
+
+      {files.length > 0 && (
+        <ul className="space-y-1">
+          {files.map((f, i) => (
+            <li key={i} className="flex items-center justify-between bg-gray-50 rounded px-3 py-2 text-sm">
+              <span className="truncate max-w-xs">{f.name}</span>
+              <button
+                type="button"
+                onClick={() => remove(i)}
+                className="ml-2 text-red-500 hover:text-red-700 text-xs"
+                disabled={disabled}
+              >
+                Remove
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}