<div className="max-h-20 overflow-y-auto space-y-1">
                        {importResult.errors.slice(0, 3).map((error, index) => (

                      <div className="max-h-32 overflow-y-auto space-y-1">
                        {importResult.errors.map((error, index) => (

                        {importResult.errors.length > 3 && (
                          <p className="text-xs text-gray-500">...and {importResult.errors.length - 3} more</p>
                        )}

[ ] add check for duplicate hashes in file import

[X] add check for duplicate hashes in file import, was ok as it was, first gets inserted.

  4. Extract Common Utilities
  Current Issue: Repeated validation and query patterns
  - Create: utils/validation.ts for common validations (nanoid, email, etc.)
  - Create: utils/queryHelpers.ts for shared database patterns
  - Effort: 1-2 developer days
  - Impact: DRY principle, reduced bugs
  7. Documentation Improvements
  - Standardize JSDoc format across all files
  - Complete documentation for ebird.ts stub
  - Add request/response schemas
  8. Code Quality Enhancements
  - Consider implementing OpenAPI/Swagger documentation

Thats great, thanks. Now, when I click on a cluster with no files we need to be able to import files into the    │
│   cluster. This is quite complicated so we need to first formulate a plan.                                         │
│   Adding files requires the following tables be updated: file, moth_metadata, file_dataset                         │
│   we need to add all the .WAV or .wav files in a given folder opened using the file system access api.             │
│   file:                                                                                                            │
│   id nanoid(21)                                                                                                    │
│   path (path of folder so user can find the files again)                                                           │
│   we need to make an xxh64 hash of the audio using a reproducible method so we can always recognise the file, I    │
│   will supply example code.                                                                                        │
│   we need to record location_id and cluster_id from component props                                                │
│   we need to grab metadata if present. If the file was recorded by an audio moth we need to parse the metadata,    │
│   including time                                                                                                   │
│   if no metadata present we need to parse the filenames using the cluster:timezone_id to get a datestamp.          │
│   we need to use suncalc to calculate moon phase and if the file is recoded during solar or civil night            │
│   moth_metadata:                                                                                                   │
│   parsed from file metadata if recorded by an audio moth (will supply example code)                                │
│   file_dataset:                                                                                                    │
│   junction table to associate files and datasets, should be updated                                                │
│   Lets break this task up:                                                                                         │
│   First, lets create a new dialog to open and display files in a folder using the file system access api