added backend-mgmt for dataset/dataset_entry and utterances, this includes upload and also displaying of the dataset on the admin pages

.gitignore

@@ -40,3 +40,5 @@ yarn-error.log*
 next-env.d.ts
 
 *.db
+tmp
+public/datasets

drizzle.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from "drizzle-kit";
+
+export default defineConfig({
+  schema: "./src/lib/model/*",
+  dialect: "sqlite",
+  dbCredentials: {
+    url: "./sqlite_data.db"
+  }
+});

next.config.ts

@@ -2,6 +2,11 @@ import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
   /* config options here */
+  experimental: {
+    serverActions: {
+      bodySizeLimit: '10000mb'
+    }
+  },
 };
 
 export default nextConfig;

package.json

@@ -5,13 +5,19 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start"
+    "start": "next start",
+    "db:push": "drizzle-kit push",
+    "auth:push": "auth migrate"
   },
   "dependencies": {
+    "@libsql/client": "^0.17.0",
     "@tailwindcss/postcss": "^4.2.1",
+    "auth": "^1.5.3",
     "better-auth": "^1.4.19",
     "better-auth-localization": "^2.3.1",
     "better-sqlite3": "^12.6.2",
+    "drizzle-orm": "^0.45.1",
+    "extract-zip": "^2.0.1",
     "next": "16.1.6",
     "postcss": "^8.5.6",
     "tailwindcss": "^4.2.1"
@@ -20,6 +26,7 @@
     "@types/better-sqlite3": "^7.6.13",
     "@types/node": "^20",
     "@types/react": "^19",
+    "drizzle-kit": "^0.31.9",
     "typescript": "^5"
   }
 }

src/app/actions/datasets.ts

@@ -0,0 +1,46 @@
+'use server';
+
+import db from '@/lib/db';
+import { dataset } from '@/lib/model/dataset';
+import { eq } from 'drizzle-orm';
+import { revalidatePath } from 'next/cache';
+
+export async function createDataset({ name }: { name: string }) {
+  if (!name || !name.trim()) {
+    throw new Error('Dataset name is required');
+  }
+
+  try {
+    const result = await db.insert(dataset).values({ name: name.trim() });
+    revalidatePath('/admin');
+    return result;
+  } catch (error) {
+    console.error('Error creating dataset:', error);
+    throw new Error('Failed to create dataset');
+  }
+}
+
+export async function updateDataset(
+  id: number,
+  updates: { name?: string }
+) {
+  if (updates.name !== undefined && !updates.name.trim()) {
+    throw new Error('Dataset name cannot be empty');
+  }
+
+  try {
+    const result = await db
+      .update(dataset)
+      .set({
+        name: updates.name?.trim(),
+        updatedAt: new Date(),
+      })
+      .where(eq(dataset.id, id));
+    revalidatePath(`/admin/datasets/${id}`);
+    revalidatePath('/admin');
+    return result;
+  } catch (error) {
+    console.error('Error updating dataset:', error);
+    throw new Error('Failed to update dataset');
+  }
+}

src/app/actions/get-dataset-entries.ts

@@ -0,0 +1,70 @@
+'use server';
+
+import db from '@/lib/db';
+import { dataset_entry } from '@/lib/model/dataset_entry';
+import { count, eq, and, like } from 'drizzle-orm';
+
+const ENTRIES_PER_PAGE = 20;
+
+interface FilterParams {
+  speakerId?: string;
+  modelName?: string;
+  dialect?: string;
+  iteration?: number;
+  utteranceId?: string;
+}
+
+export async function getDatasetEntries(
+  datasetId: number,
+  page: number = 1,
+  filters?: FilterParams
+) {
+  const offset = (page - 1) * ENTRIES_PER_PAGE;
+
+  // Build where conditions
+  const conditions = [eq(dataset_entry.datasetId, datasetId)];
+
+  if (filters?.speakerId) {
+    conditions.push(like(dataset_entry.speakerId, `%${filters.speakerId}%`));
+  }
+
+  if (filters?.modelName) {
+    conditions.push(like(dataset_entry.modelName, `%${filters.modelName}%`));
+  }
+
+  if (filters?.dialect) {
+    conditions.push(like(dataset_entry.dialect, `%${filters.dialect}%`));
+  }
+
+  if (filters?.iteration !== undefined) {
+    conditions.push(eq(dataset_entry.iteration, filters.iteration));
+  }
+
+  if (filters?.utteranceId) {
+    conditions.push(eq(dataset_entry.utteranceId, filters.utteranceId));
+  }
+
+  const whereClause = and(...conditions);
+
+  const entries = await db
+    .select()
+    .from(dataset_entry)
+    .where(whereClause)
+    .limit(ENTRIES_PER_PAGE)
+    .offset(offset);
+
+  const totalResult = await db
+    .select({ count: count() })
+    .from(dataset_entry)
+    .where(whereClause);
+
+  const total = totalResult[0]?.count || 0;
+  const hasMore = offset + ENTRIES_PER_PAGE < total;
+
+  return {
+    entries,
+    hasMore,
+    total,
+    page,
+  };
+}

src/app/actions/get-filter-options.ts

@@ -0,0 +1,27 @@
+'use server';
+
+import db from '@/lib/db';
+import { dataset_entry } from '@/lib/model/dataset_entry';
+import { eq } from 'drizzle-orm';
+
+export async function getFilterOptions(datasetId: number) {
+  const entries = await db
+    .select()
+    .from(dataset_entry)
+    .where(eq(dataset_entry.datasetId, datasetId));
+
+  // Extract unique values for each filter
+  const speakerIds = [...new Set(entries.map(e => e.speakerId))].sort();
+  const modelNames = [...new Set(entries.map(e => e.modelName))].sort();
+  const dialects = [...new Set(entries.map(e => e.dialect))].sort();
+  const iterations = [...new Set(entries.map(e => e.iteration))].sort((a, b) => a - b);
+  const utteranceIds = [...new Set(entries.map(e => e.utteranceId).filter(Boolean))].sort();
+
+  return {
+    speakerIds,
+    modelNames,
+    dialects,
+    iterations,
+    utteranceIds,
+  };
+}

src/app/actions/remove-dataset-entries.ts

@@ -0,0 +1,34 @@
+'use server';
+
+import db from '@/lib/db';
+import { dataset_entry } from '@/lib/model/dataset_entry';
+import { eq } from 'drizzle-orm';
+import { revalidatePath } from 'next/cache';
+import { rm } from 'fs/promises';
+import { join } from 'path';
+import { existsSync } from 'fs';
+
+export async function removeAllDatasetEntries(datasetId: number) {
+  try {
+    // Delete all entries from database
+    await db.delete(dataset_entry).where(eq(dataset_entry.datasetId, datasetId));
+
+    // Delete dataset files from public folder
+    const datasetDir = join(process.cwd(), 'public', 'datasets', datasetId.toString());
+    if (existsSync(datasetDir)) {
+      await rm(datasetDir, { recursive: true, force: true });
+    }
+
+    revalidatePath(`/admin/datasets/${datasetId}`);
+
+    return {
+      success: true,
+      message: 'All dataset entries have been removed',
+    };
+  } catch (error) {
+    console.error('Error removing dataset entries:', error);
+    throw new Error(
+      error instanceof Error ? error.message : 'Failed to remove dataset entries'
+    );
+  }
+}

src/app/actions/upload-utterances.ts

@@ -0,0 +1,119 @@
+'use server';
+
+import db from '@/lib/db';
+import { dataset_utterance } from '@/lib/model/utterance';
+import { eq, and } from 'drizzle-orm';
+import { revalidatePath } from 'next/cache';
+
+export async function uploadDatasetUtterances(
+  datasetId: number,
+  formData: FormData
+) {
+  const file = formData.get('file') as File;
+
+  if (!file) {
+    throw new Error('No file provided');
+  }
+
+  if (!file.name.endsWith('.csv')) {
+    throw new Error('File must be a CSV file');
+  }
+
+  try {
+    const csvContent = await file.text();
+    const lines = csvContent.split('\n').filter((line) => line.trim());
+
+    if (lines.length < 2) {
+      throw new Error('CSV is empty or invalid');
+    }
+
+    // Parse CSV header
+    const headers = lines[0].split(',').map((h) => h.trim());
+
+    if (!headers.includes('id') || !headers.includes('text')) {
+      throw new Error('CSV must have "id" and "text" columns');
+    }
+
+    // Get indices of id and text columns
+    const idIndex = headers.indexOf('id');
+    const textIndex = headers.indexOf('text');
+
+    // Parse utterances
+    const utterances: typeof dataset_utterance.$inferInsert[] = [];
+
+    for (let i = 1; i < lines.length; i++) {
+      // Handle CSV parsing with quotes
+      const line = lines[i];
+      const parts: string[] = [];
+      let current = '';
+      let inQuotes = false;
+
+      for (let j = 0; j < line.length; j++) {
+        const char = line[j];
+        const nextChar = line[j + 1];
+
+        if (char === '"') {
+          if (inQuotes && nextChar === '"') {
+            current += '"';
+            j++; // Skip next quote
+          } else {
+            inQuotes = !inQuotes;
+          }
+        } else if (char === ',' && !inQuotes) {
+          parts.push(current.trim());
+          current = '';
+        } else {
+          current += char;
+        }
+      }
+      parts.push(current.trim());
+
+      if (parts.length > Math.max(idIndex, textIndex)) {
+        const id = parts[idIndex]?.trim();
+        const text = parts[textIndex]?.trim();
+
+        if (id && text) {
+          utterances.push({
+            datasetId,
+            id,
+            text,
+          });
+        }
+      }
+    }
+
+    if (utterances.length === 0) {
+      throw new Error('No valid utterances found in CSV');
+    }
+
+    // Check for existing utterances to avoid duplicates
+    const existingUtterances = await db
+      .select({ id: dataset_utterance.id })
+      .from(dataset_utterance)
+      .where(eq(dataset_utterance.datasetId, datasetId));
+
+    const existingIds = new Set(existingUtterances.map((u) => u.id));
+
+    // Filter out duplicates
+    const newUtterances = utterances.filter((u) => !existingIds.has(u.id));
+
+    if (newUtterances.length === 0) {
+      throw new Error('All utterances already exist in the dataset');
+    }
+
+    // Insert new utterances into database
+    await db.insert(dataset_utterance).values(newUtterances);
+
+    revalidatePath(`/admin/datasets/${datasetId}`);
+
+    return {
+      success: true,
+      utterancesCreated: newUtterances.length,
+    };
+  } catch (error) {
+    console.error('Error uploading utterances:', error);
+    throw new Error(
+      error instanceof Error ? error.message : 'Failed to upload utterances'
+    );
+  }
+}

src/app/actions/upload.ts

@@ -0,0 +1,157 @@
+'use server';
+
+import db from '@/lib/db';
+import { dataset_entry } from '@/lib/model/dataset_entry';
+import { dataset_utterance } from '@/lib/model/utterance';
+import { revalidatePath } from 'next/cache';
+import { eq } from 'drizzle-orm';
+import { writeFile, mkdir, readFile, rm, readdir } from 'fs/promises';
+import { join } from 'path';
+import { existsSync } from 'fs';
+import extract from 'extract-zip';
+
+interface DatasetEntryInput {
+  id: string;
+  audio_file: string;
+  duration_ms: string;
+  utt_id: string;
+  speaker: string;
+  model: string;
+  dialect: string;
+  iteration: string;
+}
+
+export async function uploadDatasetEntries(
+  datasetId: number,
+  formData: FormData
+) {
+  const file = formData.get('file') as File;
+
+  if (!file) {
+    throw new Error('No file provided');
+  }
+
+  if (!file.name.endsWith('.zip')) {
+    throw new Error('File must be a ZIP archive');
+  }
+
+  const tempDir = join(process.cwd(), 'tmp', `upload-${Date.now()}`);
+  const datasetDir = join(process.cwd(), 'public', 'datasets', datasetId.toString());
+
+  try {
+    // Create temp directory
+    await mkdir(tempDir, { recursive: true });
+
+    // Save uploaded file to temp location
+    const tempZipPath = join(tempDir, file.name);
+    const arrayBuffer = await file.arrayBuffer();
+    const buffer = Buffer.from(arrayBuffer);
+    await writeFile(tempZipPath, buffer);
+
+    // Extract ZIP file
+    await extract( tempZipPath, { dir: tempDir } );
+
+    // Read metadata.csv
+    const metadataPath = join(tempDir, 'metadata.csv');
+    if (!existsSync(metadataPath)) {
+      throw new Error('metadata.csv not found in ZIP');
+    }
+
+    const metadataContent = await readFile(metadataPath, 'utf-8');
+    const lines = metadataContent.split('\n').filter(line => line.trim());
+
+    if (lines.length < 2) {
+      throw new Error('metadata.csv is empty or invalid');
+    }
+
+    // Parse CSV header
+    const headers = lines[0].split(',').map(h => h.trim());
+
+    // Create dataset directory
+    await mkdir(datasetDir, { recursive: true });
+
+    // Parse and insert entries
+    const entries: typeof dataset_entry.$inferInsert[] = [];
+
+    for (let i = 1; i < lines.length; i++) {
+      const values = lines[i].split(',').map(v => v.trim());
+
+      if (values.length !== headers.length) {
+        continue; // Skip malformed lines
+      }
+
+      const row: Record<string, string> = {};
+      headers.forEach((header, index) => {
+        row[header] = values[index];
+      });
+
+      const audioFile = row.audio_file as string;
+      // Try different path separators and remove /output prefix
+      const relativePath = audioFile.replace(/\\/g, '/').replace(/^output\//, '');
+      const audioPath = join(tempDir, relativePath);
+
+      if (existsSync(audioPath)) {
+        // Copy audio file to dataset directory with external ID as filename
+        const audioBuffer = await readFile(audioPath);
+        const fileExtension = audioFile.substring(audioFile.lastIndexOf('.'));
+        const destPath = join(datasetDir, `${row.id}${fileExtension}`);
+
+        await writeFile(destPath, audioBuffer);
+
+        entries.push({
+          datasetId,
+          externalId: row.id,
+          speakerId: row.speaker,
+          modelName: row.model,
+          fileName: relativePath,
+          utteranceId: row.utt_id || undefined,
+          dialect: row.dialect,
+          iteration: parseInt(row.iteration, 10),
+        });
+      }
+    }
+
+    if (entries.length === 0) {
+      throw new Error('No valid entries found in metadata.csv');
+    }
+
+    // Check for existing entries to avoid duplicates
+    const existingEntries = await db
+      .select({ externalId: dataset_entry.externalId })
+      .from(dataset_entry)
+      .where(eq(dataset_entry.datasetId, datasetId));
+
+    const existingExternalIds = new Set(existingEntries.map(e => e.externalId));
+
+    // Filter out duplicates
+    const newEntries = entries.filter(entry => !existingExternalIds.has(entry.externalId));
+
+    if (newEntries.length === 0) {
+      throw new Error('All entries already exist in the dataset');
+    }
+
+    // Insert new entries into database
+    await db.insert(dataset_entry).values(newEntries);
+
+    revalidatePath(`/admin/datasets/${datasetId}`);
+
+    return {
+      success: true,
+      entriesCreated: entries.length,
+    };
+  } catch (error) {
+    console.error('Error uploading dataset entries:', error);
+    throw new Error(
+      error instanceof Error ? error.message : 'Failed to upload dataset entries'
+    );
+  } finally {
+    // Clean up temp directory
+    try {
+      if (existsSync(tempDir)) {
+        await rm(tempDir, { recursive: true, force: true });
+      }
+    } catch (cleanupError) {
+      console.error('Error cleaning up temp directory:', cleanupError);
+    }
+  }
+}

src/app/admin/datasets/[id]/entries/[entryId]/page.tsx

@@ -0,0 +1,135 @@
+import Link from 'next/link';
+import db from '@/lib/db';
+import { dataset_entry } from '@/lib/model/dataset_entry';
+import { dataset_utterance } from '@/lib/model/utterance';
+import { eq } from 'drizzle-orm';
+import AudioPlayer from '@/components/AudioPlayer';
+
+interface DatasetEntryPageProps {
+  params: {
+    id: string;
+    entryId: string;
+  };
+}
+
+export default async function DatasetEntryPage({ params }: DatasetEntryPageProps) {
+  const { id: datasetId, entryId } = await params;
+  const datasetIdNum = parseInt(datasetId, 10);
+  const entryIdNum = parseInt(entryId, 10);
+
+  const entries = await db
+    .select()
+    .from(dataset_entry)
+    .where(eq(dataset_entry.id, entryIdNum));
+
+  if (entries.length === 0 || entries[0].datasetId !== datasetIdNum) {
+    return (
+      <div className="min-h-screen">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+          <Link
+            href={`/admin/datasets/${datasetId}`}
+            className="text-blue-500 hover:text-blue-600 mb-6 inline-block"
+          >
+            ← Back to Dataset
+          </Link>
+          <div className="bg-white rounded-lg shadow p-6">
+            <p className="text-gray-600">Dataset entry not found</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const entry = entries[0];
+
+  // Fetch utterance if utteranceId is present
+  let utterance = null;
+  if (entry.utteranceId) {
+    const utterances = await db
+      .select()
+      .from(dataset_utterance)
+      .where(eq(dataset_utterance.id, entry.utteranceId));
+    
+    utterance = utterances.length > 0 ? utterances[0] : null;
+  }
+
+  return (
+    <div>
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <Link
+          href={`/admin/datasets/${datasetId}`}
+          className="text-blue-500 hover:text-blue-600 mb-6 inline-block"
+        >
+          ← Back to Dataset
+        </Link>
+
+        <div className="bg-white rounded-lg shadow p-6">
+          <h1 className="text-3xl font-bold mb-6">Dataset Entry Details</h1>
+
+          <div className="grid grid-cols-2 gap-6">
+            <div className="bg-white border border-gray-200 p-4 rounded-lg">
+              <p className="text-sm text-gray-600 mb-1">Entry ID</p>
+              <p className="text-lg font-semibold">{entry.id}</p>
+            </div>
+
+            <div className="bg-white border border-gray-200 p-4 rounded-lg">
+              <p className="text-sm text-gray-600 mb-1">External ID</p>
+              <p className="text-lg font-semibold">{entry.externalId}</p>
+            </div>
+
+            <div className="bg-white border border-gray-200 p-4 rounded-lg">
+              <p className="text-sm text-gray-600 mb-1">Speaker ID</p>
+              <p className="text-lg font-semibold">{entry.speakerId}</p>
+            </div>
+
+            <div className="bg-white border border-gray-200 p-4 rounded-lg">
+              <p className="text-sm text-gray-600 mb-1">Model Name</p>
+              <p className="text-lg font-semibold">{entry.modelName}</p>
+            </div>
+
+            <div className="bg-white border border-gray-200 p-4 rounded-lg">
+              <p className="text-sm text-gray-600 mb-1">Dialect</p>
+              <p className="text-lg font-semibold">{entry.dialect}</p>
+            </div>
+
+            <div className="bg-white border border-gray-200 p-4 rounded-lg">
+              <p className="text-sm text-gray-600 mb-1">Iteration</p>
+              <p className="text-lg font-semibold">{entry.iteration}</p>
+            </div>
+
+            <div className="col-span-2 bg-white border border-gray-200 p-4 rounded-lg">
+              <p className="text-sm text-gray-600 mb-1">File Name</p>
+              <p className="text-lg font-semibold break-all">{entry.fileName}</p>
+            </div>
+
+            <div className="col-span-2 bg-white border border-gray-200 p-4 rounded-lg">
+              <p className="text-sm text-gray-600 mb-3">Audio Player</p>
+              <AudioPlayer datasetId={datasetIdNum} fileName={entry.fileName} externalId={entry.externalId} />
+            </div>
+
+            {utterance && (
+              <div className="col-span-2 bg-blue-50 p-4 rounded-lg border border-blue-200">
+                <p className="text-sm font-semibold text-gray-700 mb-2">Utterance {entry.utteranceId}</p>
+                <p className="text-lg text-gray-800 leading-relaxed">{utterance.text}</p>
+              </div>
+            )}
+
+            <div className="bg-white border border-gray-200 p-4 rounded-lg">
+              <p className="text-sm text-gray-600 mb-1">Created</p>
+              <p className="text-lg font-semibold">
+                {new Date(entry.createdAt).toLocaleDateString()}
+              </p>
+            </div>
+
+            <div className="bg-white border border-gray-200 p-4 rounded-lg">
+              <p className="text-sm text-gray-600 mb-1">Last Updated</p>
+              <p className="text-lg font-semibold">
+                {new Date(entry.updatedAt).toLocaleDateString()}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/admin/datasets/[id]/page.tsx

@@ -0,0 +1,68 @@
+import Link from 'next/link';
+import db from '@/lib/db';
+import { dataset } from '@/lib/model/dataset';
+import { eq } from 'drizzle-orm';
+import EditableDatasetHeader from '@/components/EditableDatasetHeader';
+import DatasetEntriesList from '@/components/DatasetEntriesList';
+import UploadDatasetEntriesModal from '@/components/UploadDatasetEntriesModal';
+import UploadUtterancesModal from '@/components/UploadUtterancesModal';
+import RemoveAllEntriesButton from '@/components/RemoveAllEntriesButton';
+
+interface DatasetPageProps {
+  params: {
+    id: string;
+  };
+}
+
+export default async function DatasetPage({ params }: DatasetPageProps) {
+  const {id} = await params;
+  const datasetId = parseInt(id, 10);
+
+  const datasets = await db
+    .select()
+    .from(dataset)
+    .where(eq(dataset.id, datasetId));
+
+  if (datasets.length === 0) {
+    return (
+      <div className="min-h-screen">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+          <Link
+            href="/admin"
+            className="text-blue-500 hover:text-blue-600 mb-6 inline-block"
+          >
+            ← Back to Admin
+          </Link>
+          <div className="bg-white rounded-lg shadow p-6">
+            <p className="text-gray-600">Dataset not found</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const ds = datasets[0];
+
+  return (
+    <div>
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <Link
+          href="/admin"
+          className="text-blue-500 hover:text-blue-600 mb-6 inline-block"
+        >
+          ← Back to Admin
+        </Link>
+
+        <EditableDatasetHeader dataset={ds} />
+
+        <div className="flex gap-3 mb-6">
+          <UploadDatasetEntriesModal datasetId={datasetId} />
+          <UploadUtterancesModal datasetId={datasetId} />
+          <RemoveAllEntriesButton datasetId={datasetId} />
+        </div>
+
+        <DatasetEntriesList datasetId={datasetId} />
+      </div>
+    </div>
+  );
+}

src/app/admin/page.tsx

@@ -1,12 +1,22 @@
-import AuthRedirect from "@/components/AuthRedirect";
+import DatasetsList from "@/components/DatasetsList";
+import CreateDatasetModal from "@/components/CreateDatasetModal";
+import { auth } from "@/lib/auth";
+import { headers } from "next/headers";
+import { redirect } from "next/navigation";
 
-export default function AdminPage() {
+export default async function AdminPage() {
+    const session = await auth.api.getSession({
+        headers: await headers()
+    })
+
+    if(!session) {
+        redirect("/user/sign-in")
+    }
 
   return (
-    <div>
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        <AuthRedirect />
+        <CreateDatasetModal />
-        <h1>Admin Dashboard</h1>
+        <DatasetsList />
-        <p>Welcome to the admin dashboard. Here you can manage the application.</p>
     </div>
   );
 }

src/app/api/route.ts

@@ -1,5 +0,0 @@
-import { NextResponse } from "next/server";
-
-export async function GET() {
-  return NextResponse.json({ message: "Hello world!" });
-}

src/app/layout.tsx

@@ -1,6 +1,7 @@
 import './globals.css';
 import { Header } from '@/components/Header';
 import { Footer } from '@/components/Footer';
+import { AudioProvider } from '@/components/AudioProvider';
 
 export default function RootLayout({
   children,
@@ -10,11 +11,13 @@ export default function RootLayout({
   return (
     <html>
       <body className="flex flex-col min-h-screen">
+        <AudioProvider>
           <Header />
           <main className="flex-grow mt-4 mb-4 mr-8 ml-8">
             {children}
           </main>
           <Footer />
+        </AudioProvider>
       </body>
     </html>
   )

src/components/AudioPlayer.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+import { useAudio } from './AudioProvider';
+
+interface AudioPlayerProps {
+  fileName: string;
+  datasetId: number;
+  externalId?: string;
+}
+
+export default function AudioPlayer({ fileName, datasetId, externalId }: AudioPlayerProps) {
+  const [isPlaying, setIsPlaying] = useState(false);
+  const audioRef = useRef<HTMLAudioElement>(null);
+  const { currentAudioId, setCurrentAudio } = useAudio();
+  const audioId = `${datasetId}-${externalId}`;
+
+  // Extract file extension from original fileName and construct URL using externalId
+  const fileExtension = fileName.substring(fileName.lastIndexOf('.'));
+  const audioPath = `/datasets/${datasetId}/${externalId}${fileExtension}`;
+
+  // Stop playing if another audio started
+  useEffect(() => {
+    if (currentAudioId !== audioId && audioRef.current && isPlaying) {
+      audioRef.current.pause();
+      audioRef.current.currentTime = 0;
+      setIsPlaying(false);
+    }
+  }, [currentAudioId, audioId, isPlaying]);
+
+  const handlePlay = () => {
+    if (audioRef.current) {
+      setCurrentAudio(audioId);
+      audioRef.current.currentTime = 0;
+      audioRef.current.play();
+      setIsPlaying(true);
+    }
+  };
+
+  const handleStop = () => {
+    if (audioRef.current) {
+      audioRef.current.pause();
+      audioRef.current.currentTime = 0;
+      setCurrentAudio(null);
+      setIsPlaying(false);
+    }
+  };
+
+  const handlePlaybackEnd = () => {
+    setIsPlaying(false);
+    setCurrentAudio(null);
+  };
+
+  return (
+    <div className="flex items-center gap-2">
+      <audio
+        ref={audioRef}
+        src={audioPath}
+        onEnded={handlePlaybackEnd}
+      />
+      <button
+        onClick={isPlaying ? handleStop : handlePlay}
+        className={`inline-flex items-center justify-center w-8 h-8 rounded-full transition-colors ${
+          isPlaying
+            ? 'bg-red-500 hover:bg-red-600 text-white'
+            : 'bg-blue-500 hover:bg-blue-600 text-white'
+        }`}
+        title={isPlaying ? 'Stop' : 'Play'}
+      >
+        {isPlaying ? (
+          <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+            <rect x="6" y="4" width="2" height="12" />
+            <rect x="12" y="4" width="2" height="12" />
+          </svg>
+        ) : (
+          <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+            <path d="M6.3 2.841A1.5 1.5 0 004 4.11v11.78a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z" />
+          </svg>
+        )}
+      </button>
+    </div>
+  );
+}

src/components/AudioProvider.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import React, { createContext, useContext, useState, ReactNode } from 'react';
+
+interface AudioContextType {
+  currentAudioId: string | null;
+  setCurrentAudio: (id: string | null) => void;
+}
+
+const AudioContext = createContext<AudioContextType | undefined>(undefined);
+
+export function AudioProvider({ children }: { children: ReactNode }) {
+  const [currentAudioId, setCurrentAudioId] = useState<string | null>(null);
+
+  return (
+    <AudioContext.Provider value={{ currentAudioId, setCurrentAudio: setCurrentAudioId }}>
+      {children}
+    </AudioContext.Provider>
+  );
+}
+
+export function useAudio() {
+  const context = useContext(AudioContext);
+  if (context === undefined) {
+    throw new Error('useAudio must be used within AudioProvider');
+  }
+  return context;
+}

src/components/AuthRedirect.tsx

@@ -1,16 +0,0 @@
-"use client";
-import { authClient } from "@/lib/auth-client";
-import { redirect } from "next/navigation";
-import { useEffect } from "react";
-
-export default function AuthRedirect() {
-    const { data: session, isPending: loading } = authClient.useSession();
-
-    useEffect(() => {
-        if (!loading && !session) {
-            redirect("/user/sign-in");
-        }
-    }, [loading, session]);
-
-    return <div></div>
-}

src/components/CreateDatasetForm.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import { useState } from 'react';
+import { createDataset } from '@/app/actions/datasets';
+
+export default function CreateDatasetForm() {
+  const [name, setName] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError(null);
+    setSuccess(false);
+
+    if (!name.trim()) {
+      setError('Dataset name is required');
+      return;
+    }
+
+    setLoading(true);
+    try {
+      await createDataset({ name: name.trim() });
+      setName('');
+      setSuccess(true);
+      setTimeout(() => setSuccess(false), 3000);
+      // Refresh the page to show the new dataset
+      window.location.reload();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to create dataset');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="mt-8 mb-8">
+      <h2 className="text-2xl font-bold mb-4">Create New Dataset</h2>
+      <form onSubmit={handleSubmit} className="border border-gray-300 rounded-lg p-6 bg-white shadow-sm max-w-md">
+        <div className="mb-4">
+          <label htmlFor="name" className="block text-sm font-medium mb-2">
+            Dataset Name
+          </label>
+          <input
+            id="name"
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            placeholder="Enter dataset name"
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+            disabled={loading}
+          />
+        </div>
+
+        {error && (
+          <div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">
+            {error}
+          </div>
+        )}
+
+        {success && (
+          <div className="mb-4 p-3 bg-green-100 border border-green-400 text-green-700 rounded">
+            Dataset created successfully!
+          </div>
+        )}
+
+        <button
+          type="submit"
+          disabled={loading}
+          className="w-full px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
+        >
+          {loading ? 'Creating...' : 'Create Dataset'}
+        </button>
+      </form>
+    </div>
+  );
+}

src/components/CreateDatasetModal.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import { useState } from 'react';
+import { createDataset } from '@/app/actions/datasets';
+import Modal from '@/components/Modal';
+
+export default function CreateDatasetModal() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [name, setName] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError(null);
+    setSuccess(false);
+
+    if (!name.trim()) {
+      setError('Dataset name is required');
+      return;
+    }
+
+    setLoading(true);
+    try {
+      await createDataset({ name: name.trim() });
+      setName('');
+      setSuccess(true);
+      setTimeout(() => {
+        setSuccess(false);
+        setIsOpen(false);
+        // Refresh the page to show the new dataset
+        window.location.reload();
+      }, 1500);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to create dataset');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  function handleClose() {
+    if (!loading) {
+      setIsOpen(false);
+      setName('');
+      setError(null);
+      setSuccess(false);
+    }
+  }
+
+  return (
+    <>
+      <button
+        onClick={() => setIsOpen(true)}
+        className="mb-6 px-4 py-2 bg-green-500 text-white rounded-md hover:bg-green-600 transition-colors"
+      >
+        + Create New Dataset
+      </button>
+
+      <Modal
+        isOpen={isOpen}
+        onClose={handleClose}
+        title="Create New Dataset"
+        actions={[
+          {
+            label: 'Cancel',
+            onClick: handleClose,
+            variant: 'secondary',
+            disabled: loading,
+          },
+          {
+            label: loading ? 'Creating...' : 'Create',
+            onClick: (e) => {
+              const form = document.getElementById('datasetForm') as HTMLFormElement;
+              form?.dispatchEvent(new Event('submit', { bubbles: true }));
+            },
+            variant: 'primary',
+            disabled: loading,
+          },
+        ]}
+      >
+        <form id="datasetForm" onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label htmlFor="name" className="block text-sm font-medium mb-2">
+              Dataset Name
+            </label>
+            <input
+              id="name"
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="Enter dataset name"
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+              disabled={loading}
+              autoFocus
+            />
+          </div>
+
+          {error && (
+            <div className="p-3 bg-red-100 border border-red-400 text-red-700 rounded text-sm">
+              {error}
+            </div>
+          )}
+
+          {success && (
+            <div className="p-3 bg-green-100 border border-green-400 text-green-700 rounded text-sm">
+              Dataset created successfully!
+            </div>
+          )}
+        </form>
+      </Modal>
+    </>
+  );
+}

src/components/DatasetEntriesList.tsx

@@ -0,0 +1,429 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import Link from 'next/link';
+import AudioPlayer from './AudioPlayer';
+import { getDatasetEntries } from '@/app/actions/get-dataset-entries';
+import { getFilterOptions } from '@/app/actions/get-filter-options';
+
+interface DatasetEntriesListProps {
+  datasetId: number;
+}
+
+interface DatasetEntry {
+  id: number;
+  datasetId: number;
+  externalId: string;
+  speakerId: string;
+  modelName: string;
+  fileName: string;
+  utteranceId: string | null;
+  dialect: string;
+  iteration: number;
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+interface FilterOptions {
+  speakerIds: string[];
+  modelNames: string[];
+  dialects: string[];
+  iterations: number[];
+  utteranceIds: string[];
+}
+
+export default function DatasetEntriesList({
+  datasetId,
+}: DatasetEntriesListProps) {
+  const [entries, setEntries] = useState<DatasetEntry[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [hasMore, setHasMore] = useState(true);
+  const [page, setPage] = useState(1);
+  const [total, setTotal] = useState(0);
+
+  // Filter states
+  const [filters, setFilters] = useState({
+    speakerId: '',
+    modelName: '',
+    dialect: '',
+    iteration: '',
+    utteranceId: '',
+  });
+
+  // Filter options
+  const [filterOptions, setFilterOptions] = useState<FilterOptions>({
+    speakerIds: [],
+    modelNames: [],
+    dialects: [],
+    iterations: [],
+    utteranceIds: [],
+  });
+
+  // Load filter options on mount
+  useEffect(() => {
+    async function loadFilterOptions() {
+      try {
+        const options = await getFilterOptions(datasetId);
+        setFilterOptions(options);
+      } catch (error) {
+        console.error('Error loading filter options:', error);
+      }
+    }
+    loadFilterOptions();
+  }, [datasetId]);
+
+  useEffect(() => {
+    setPage(1);
+    loadEntries(1);
+  }, [filters]);
+
+  async function loadEntries(pageNum: number = page) {
+    setLoading(true);
+    try {
+      const filterParams = {
+        speakerId: filters.speakerId || undefined,
+        modelName: filters.modelName || undefined,
+        dialect: filters.dialect || undefined,
+        iteration: filters.iteration ? parseInt(filters.iteration, 10) : undefined,
+        utteranceId: filters.utteranceId || undefined,
+      };
+
+      const result = await getDatasetEntries(datasetId, pageNum, filterParams);
+      if (pageNum === 1) {
+        setEntries(result.entries);
+      } else {
+        setEntries((prev) => [...prev, ...result.entries]);
+      }
+      setHasMore(result.hasMore);
+      setTotal(result.total);
+      setPage(pageNum);
+    } catch (error) {
+      console.error('Error loading entries:', error);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleLoadMore() {
+    setLoading(true);
+    try {
+      const filterParams = {
+        speakerId: filters.speakerId || undefined,
+        modelName: filters.modelName || undefined,
+        dialect: filters.dialect || undefined,
+        iteration: filters.iteration ? parseInt(filters.iteration, 10) : undefined,
+        utteranceId: filters.utteranceId || undefined,
+      };
+
+      const result = await getDatasetEntries(datasetId, page + 1, filterParams);
+      setEntries((prev) => [...prev, ...result.entries]);
+      setHasMore(result.hasMore);
+      setTotal(result.total);
+      setPage(page + 1);
+    } catch (error) {
+      console.error('Error loading more entries:', error);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  function handleFilterChange(field: string, value: string) {
+    setFilters((prev) => ({
+      ...prev,
+      [field]: value,
+    }));
+  }
+
+  function handleClearFilters() {
+    setFilters({
+      speakerId: '',
+      modelName: '',
+      dialect: '',
+      iteration: '',
+      utteranceId: '',
+    });
+  }
+
+  if (entries.length === 0 && !loading) {
+    return (
+      <div className="bg-white rounded-lg shadow p-6">
+        <h2 className="text-2xl font-bold mb-6">Dataset Entries</h2>
+
+        {/* Filter Section */}
+        <div className="mb-6 p-4 bg-gray-50 rounded-lg border border-gray-200">
+          <div className="flex items-center justify-between mb-4">
+            <h3 className="text-lg font-semibold text-gray-700">Filters</h3>
+            <button
+              onClick={handleClearFilters}
+              className="text-sm text-blue-500 hover:text-blue-600"
+            >
+              Clear all
+            </button>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              Speaker ID
+            </label>
+            <select
+              value={filters.speakerId}
+              onChange={(e) => handleFilterChange('speakerId', e.target.value)}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+            >
+              <option value="">All speakers</option>
+              {filterOptions.speakerIds.map((id) => (
+                <option key={id} value={id}>
+                  {id}
+                </option>
+              ))}
+            </select>
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              Model Name
+            </label>
+            <select
+              value={filters.modelName}
+              onChange={(e) => handleFilterChange('modelName', e.target.value)}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+            >
+              <option value="">All models</option>
+              {filterOptions.modelNames.map((name) => (
+                <option key={name} value={name}>
+                  {name}
+                </option>
+              ))}
+            </select>
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              Dialect
+            </label>
+            <select
+              value={filters.dialect}
+              onChange={(e) => handleFilterChange('dialect', e.target.value)}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+            >
+              <option value="">All dialects</option>
+              {filterOptions.dialects.map((dialect) => (
+                <option key={dialect} value={dialect}>
+                  {dialect}
+                </option>
+              ))}
+            </select>
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              Iteration
+            </label>
+            <select
+              value={filters.iteration}
+              onChange={(e) => handleFilterChange('iteration', e.target.value)}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+            >
+              <option value="">All iterations</option>
+              {filterOptions.iterations.map((iter) => (
+                <option key={iter} value={iter.toString()}>
+                  {iter}
+                </option>
+              ))}
+            </select>
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              Utterance ID
+            </label>
+            <select
+              value={filters.utteranceId}
+              onChange={(e) => handleFilterChange('utteranceId', e.target.value)}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+            >
+              <option value="">All utterances</option>
+              {filterOptions.utteranceIds.map((id) => (
+                <option key={id} value={id}>
+                  {id}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+        </div>
+
+        <p className="text-gray-500">No entries found for this dataset.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-white rounded-lg shadow p-6">
+      <h2 className="text-2xl font-bold mb-6">Dataset Entries</h2>
+
+      {/* Filter Section */}
+      <div className="mb-6 p-4 bg-gray-50 rounded-lg border border-gray-200">
+        <div className="flex items-center justify-between mb-4">
+          <h3 className="text-lg font-semibold text-gray-700">Filters</h3>
+          <button
+            onClick={handleClearFilters}
+            className="text-sm text-blue-500 hover:text-blue-600"
+          >
+            Clear all
+          </button>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              Speaker ID
+            </label>
+            <select
+              value={filters.speakerId}
+              onChange={(e) => handleFilterChange('speakerId', e.target.value)}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+            >
+              <option value="">All speakers</option>
+              {filterOptions.speakerIds.map((id) => (
+                <option key={id} value={id}>
+                  {id}
+                </option>
+              ))}
+            </select>
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              Model Name
+            </label>
+            <select
+              value={filters.modelName}
+              onChange={(e) => handleFilterChange('modelName', e.target.value)}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+            >
+              <option value="">All models</option>
+              {filterOptions.modelNames.map((name) => (
+                <option key={name} value={name}>
+                  {name}
+                </option>
+              ))}
+            </select>
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              Dialect
+            </label>
+            <select
+              value={filters.dialect}
+              onChange={(e) => handleFilterChange('dialect', e.target.value)}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+            >
+              <option value="">All dialects</option>
+              {filterOptions.dialects.map((dialect) => (
+                <option key={dialect} value={dialect}>
+                  {dialect}
+                </option>
+              ))}
+            </select>
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              Iteration
+            </label>
+            <select
+              value={filters.iteration}
+              onChange={(e) => handleFilterChange('iteration', e.target.value)}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+            >
+              <option value="">All iterations</option>
+              {filterOptions.iterations.map((iter) => (
+                <option key={iter} value={iter.toString()}>
+                  {iter}
+                </option>
+              ))}
+            </select>
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              Utterance ID
+            </label>
+            <select
+              value={filters.utteranceId}
+              onChange={(e) => handleFilterChange('utteranceId', e.target.value)}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+            >
+              <option value="">All utterances</option>
+              {filterOptions.utteranceIds.map((id) => (
+                <option key={id} value={id}>
+                  {id}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+      </div>
+
+      {/* Results info */}
+      <div className="mb-4 text-sm text-gray-600">
+        Found {total} {total === 1 ? 'entry' : 'entries'}
+      </div>
+
+      {/* Table */}
+      <div className="overflow-x-auto">
+        <table className="w-full">
+          <thead>
+            <tr className="border-b border-gray-200">
+              <th className="text-left py-3 px-4 font-semibold text-gray-700">Play</th>
+              <th className="text-left py-3 px-4 font-semibold text-gray-700">External ID</th>
+              <th className="text-left py-3 px-4 font-semibold text-gray-700">Speaker ID</th>
+              <th className="text-left py-3 px-4 font-semibold text-gray-700">Model Name</th>
+              <th className="text-left py-3 px-4 font-semibold text-gray-700">Dialect</th>
+              <th className="text-left py-3 px-4 font-semibold text-gray-700">Utterance ID</th>
+              <th className="text-left py-3 px-4 font-semibold text-gray-700">File Name</th>
+              <th className="text-left py-3 px-4 font-semibold text-gray-700">Iteration</th>
+            </tr>
+          </thead>
+          <tbody>
+            {entries.map((entry) => (
+              <tr key={entry.id} className="hover:bg-blue-50 transition-colors border-b border-gray-200">
+                <td className="py-3 px-4">
+                  <AudioPlayer datasetId={datasetId} fileName={entry.fileName} externalId={entry.externalId} />
+                </td>
+                <td className="py-3 px-4">
+                  <Link
+                    href={`/admin/datasets/${datasetId}/entries/${entry.id}`}
+                    className="text-blue-500 hover:text-blue-600"
+                  >
+                    {entry.externalId}
+                  </Link>
+                </td>
+                <td className="py-3 px-4">{entry.speakerId}</td>
+                <td className="py-3 px-4">{entry.modelName}</td>
+                <td className="py-3 px-4">{entry.dialect}</td>
+                <td className="py-3 px-4">{entry.utteranceId || '-'}</td>
+                <td className="py-3 px-4 truncate">{entry.fileName}</td>
+                <td className="py-3 px-4">{entry.iteration}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      {hasMore && (
+        <div className="mt-6 flex items-center justify-center gap-4">
+          <button
+            onClick={handleLoadMore}
+            disabled={loading}
+            className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
+          >
+            {loading ? 'Loading...' : 'Load More'}
+          </button>
+          <span className="text-sm text-gray-600">
+            Showing {entries.length} of {total} entries
+          </span>
+        </div>
+      )}
+
+      {!hasMore && entries.length > 0 && (
+        <div className="mt-6 text-center text-sm text-gray-600">
+          All {total} entries loaded
+        </div>
+      )}
+    </div>
+  );
+}

src/components/DatasetsList.tsx

@@ -0,0 +1,36 @@
+'use server';
+
+import db from '@/lib/db';
+import { dataset } from '@/lib/model/dataset';
+import Link from 'next/link';
+
+export default async function DatasetsList() {
+  const datasets = await db.select().from(dataset).orderBy(dataset.createdAt);
+
+  return (
+    <div className="mt-8">
+      <h2 className="text-2xl font-bold mb-4">Datasets</h2>
+      {datasets.length === 0 ? (
+        <p className="text-gray-500">No datasets found.</p>
+      ) : (
+        <div className="grid gap-4">
+          {datasets.map((ds) => (
+            <Link
+              key={ds.id}
+              href={`/admin/datasets/${ds.id}`}
+              className="border border-gray-300 rounded-lg p-4 bg-white shadow-sm hover:shadow-md transition-shadow block cursor-pointer"
+            >
+              <h3 className="text-lg font-semibold">{ds.name}</h3>
+              <p className="text-sm text-gray-600 mt-2">
+                ID: {ds.id}
+              </p>
+              <p className="text-sm text-gray-500 mt-1">
+                Created: {new Date(ds.createdAt).toLocaleDateString()}
+              </p>
+            </Link>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

src/components/EditableDatasetHeader.tsx

@@ -0,0 +1,116 @@
+'use client';
+
+import { useState } from 'react';
+import { updateDataset } from '@/app/actions/datasets';
+import { Dataset } from '@/lib/model/dataset';
+
+interface EditableDatasetHeaderProps {
+  dataset: Dataset;
+}
+
+export default function EditableDatasetHeader({
+  dataset,
+}: EditableDatasetHeaderProps) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [name, setName] = useState(dataset.name);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleSave() {
+    if (!name.trim()) {
+      setError('Dataset name cannot be empty');
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      await updateDataset(dataset.id, { name: name.trim() });
+      setIsEditing(false);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to update dataset');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  function handleCancel() {
+    setName(dataset.name);
+    setError(null);
+    setIsEditing(false);
+  }
+
+  return (
+    <div className="bg-white rounded-lg shadow p-6 mb-6">
+      {isEditing ? (
+        <div>
+          <label htmlFor="name" className="block text-sm font-medium mb-2">
+            Dataset Name
+          </label>
+          <input
+            id="name"
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 mb-4"
+            disabled={loading}
+          />
+
+          {error && (
+            <div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded text-sm">
+              {error}
+            </div>
+          )}
+
+          <div className="flex gap-2">
+            <button
+              onClick={handleSave}
+              disabled={loading}
+              className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
+            >
+              {loading ? 'Saving...' : 'Save'}
+            </button>
+            <button
+              onClick={handleCancel}
+              disabled={loading}
+              className="px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-50 disabled:bg-gray-100 disabled:cursor-not-allowed transition-colors"
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+      ) : (
+        <div>
+          <div className="flex justify-between items-start mb-4">
+            <h1 className="text-3xl font-bold">{dataset.name}</h1>
+            <button
+              onClick={() => setIsEditing(true)}
+              className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors"
+            >
+              Edit
+            </button>
+          </div>
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <p className="text-sm text-gray-600">Dataset ID</p>
+              <p className="text-lg font-semibold">{dataset.id}</p>
+            </div>
+            <div>
+              <p className="text-sm text-gray-600">Created</p>
+              <p className="text-lg font-semibold">
+                {new Date(dataset.createdAt).toLocaleDateString()}
+              </p>
+            </div>
+            <div>
+              <p className="text-sm text-gray-600">Last Updated</p>
+              <p className="text-lg font-semibold">
+                {new Date(dataset.updatedAt).toLocaleDateString()}
+              </p>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/components/Modal.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import { ReactNode } from 'react';
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  children: ReactNode;
+  actions?: {
+    label: string;
+    onClick: () => void;
+    variant?: 'primary' | 'secondary';
+    disabled?: boolean;
+  }[];
+}
+
+export default function Modal({
+  isOpen,
+  onClose,
+  title,
+  children,
+  actions = [],
+}: ModalProps) {
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-white rounded-lg shadow-lg max-w-md w-full mx-4">
+        <div className="flex justify-between items-center p-6 border-b border-gray-200">
+          <h2 className="text-xl font-bold">{title}</h2>
+          <button
+            onClick={onClose}
+            className="text-gray-500 hover:text-gray-700"
+          >
+            ✕
+          </button>
+        </div>
+
+        <div className="p-6">
+          {children}
+        </div>
+
+        {actions.length > 0 && (
+          <div className="flex gap-2 px-6 pb-6">
+            {actions.map((action) => (
+              <button
+                key={action.label}
+                onClick={action.onClick}
+                disabled={action.disabled}
+                className={`flex-1 px-4 py-2 rounded-md transition-colors ${
+                  action.variant === 'primary'
+                    ? 'bg-blue-500 text-white hover:bg-blue-600 disabled:bg-gray-400'
+                    : 'border border-gray-300 hover:bg-gray-50 disabled:bg-gray-100'
+                } disabled:cursor-not-allowed`}
+              >
+                {action.label}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

src/components/RemoveAllEntriesButton.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+import { useState } from 'react';
+import { removeAllDatasetEntries } from '@/app/actions/remove-dataset-entries';
+
+interface RemoveAllEntriesButtonProps {
+  datasetId: number;
+}
+
+export default function RemoveAllEntriesButton({ datasetId }: RemoveAllEntriesButtonProps) {
+  const [isConfirming, setIsConfirming] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleConfirm() {
+    setLoading(true);
+    setError(null);
+
+    try {
+      await removeAllDatasetEntries(datasetId);
+      setIsConfirming(false);
+      // Show success message and reload
+      setTimeout(() => {
+        window.location.reload();
+      }, 1000);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to remove entries';
+      setError(message);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  if (isConfirming) {
+    return (
+      <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+        <div className="bg-white rounded-lg shadow-lg p-6 max-w-sm">
+          <h3 className="text-lg font-semibold text-gray-900 mb-2">
+            Remove all entries?
+          </h3>
+          <p className="text-gray-600 mb-4">
+            This will permanently delete all dataset entries and their files. This action cannot be undone.
+          </p>
+
+          {error && (
+            <div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded text-sm">
+              {error}
+            </div>
+          )}
+
+          <div className="flex gap-3">
+            <button
+              onClick={() => {
+                setIsConfirming(false);
+                setError(null);
+              }}
+              disabled={loading}
+              className="flex-1 px-4 py-2 bg-gray-300 text-gray-800 rounded-md hover:bg-gray-400 disabled:bg-gray-300 disabled:cursor-not-allowed transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={handleConfirm}
+              disabled={loading}
+              className="flex-1 px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 disabled:bg-red-400 disabled:cursor-not-allowed transition-colors"
+            >
+              {loading ? 'Deleting...' : 'Delete All'}
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <button
+      onClick={() => setIsConfirming(true)}
+      className="px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 transition-colors"
+    >
+      🗑️ Remove All Entries
+    </button>
+  );
+}

src/components/UploadDatasetEntriesModal.tsx

@@ -0,0 +1,177 @@
+'use client';
+
+import { useState } from 'react';
+import { uploadDatasetEntries } from '@/app/actions/upload';
+import Modal from '@/components/Modal';
+
+interface UploadDatasetEntriesModalProps {
+  datasetId: number;
+}
+
+export default function UploadDatasetEntriesModal({
+  datasetId,
+}: UploadDatasetEntriesModalProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [file, setFile] = useState<File | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
+  const [entriesCreated, setEntriesCreated] = useState(0);
+  const [status, setStatus] = useState<string>('');
+  const [isDragging, setIsDragging] = useState(false);
+
+  function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
+    const selectedFile = e.target.files?.[0];
+    if (selectedFile) {
+      setFile(selectedFile);
+      setError(null);
+    }
+  }
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError(null);
+    setSuccess(false);
+
+    if (!file) {
+      setError('Please select a ZIP file');
+      return;
+    }
+
+    setLoading(true);
+    setStatus('Preparing upload...');
+    
+    try {
+      const formData = new FormData();
+      formData.append('file', file);
+
+      const result = await uploadDatasetEntries(datasetId, formData);
+
+      setSuccess(true);
+      setEntriesCreated(result.entriesCreated);
+      setStatus(`Successfully created ${result.entriesCreated} entries!`);
+      setFile(null);
+
+      setTimeout(() => {
+        setSuccess(false);
+        setIsOpen(false);
+        setStatus('');
+        window.location.reload();
+      }, 2500);
+    } catch (err) {
+      const errorMsg =
+        err instanceof Error ? err.message : 'Failed to upload dataset entries';
+      setError(errorMsg);
+      setStatus('');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  function handleClose() {
+    if (!loading) {
+      setIsOpen(false);
+      setFile(null);
+      setError(null);
+      setSuccess(false);
+      setStatus('');
+    }
+  }
+
+  return (
+    <>
+      <button
+        onClick={() => setIsOpen(true)}
+        className="mb-6 px-4 py-2 bg-green-500 text-white rounded-md hover:bg-green-600 transition-colors"
+      >
+        + Upload Entries
+      </button>
+
+      <Modal
+        isOpen={isOpen}
+        onClose={handleClose}
+        title="Upload Dataset Entries"
+        actions={[
+          {
+            label: 'Cancel',
+            onClick: handleClose,
+            variant: 'secondary',
+            disabled: loading,
+          },
+          {
+            label: loading ? 'Uploading...' : 'Upload',
+            onClick: () => {
+              const form = document.getElementById(
+                'uploadForm'
+              ) as HTMLFormElement;
+              form?.dispatchEvent(new Event('submit', { bubbles: true }));
+            },
+            variant: 'primary',
+            disabled: loading || !file,
+          },
+        ]}
+      >
+        <form id="uploadForm" onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label htmlFor="file" className="block text-sm font-medium mb-2">
+              ZIP File
+            </label>
+            <div className="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center">
+              <input
+                id="file"
+                type="file"
+                accept=".zip"
+                onChange={handleFileChange}
+                disabled={loading}
+                className="hidden"
+              />
+              <label htmlFor="file" className="cursor-pointer block">
+                {file ? (
+                  <div>
+                    <p className="text-sm font-medium text-blue-600">
+                      {file.name}
+                    </p>
+                    <p className="text-xs text-gray-500 mt-1">
+                      {(file.size / 1024 / 1024).toFixed(2)} MB
+                    </p>
+                  </div>
+                ) : (
+                  <div>
+                    <p className="text-sm font-medium text-gray-700">
+                      Click to select or drag and drop
+                    </p>
+                    <p className="text-xs text-gray-500 mt-1">ZIP file only</p>
+                  </div>
+                )}
+              </label>
+            </div>
+          </div>
+
+          <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 text-sm text-blue-800">
+            <p className="font-semibold mb-2">ZIP file should contain:</p>
+            <ul className="list-disc list-inside space-y-1 text-xs">
+              <li>
+                <code className="bg-blue-100 px-1 rounded">metadata.csv</code>{' '}
+                with columns: id, audio_file, duration_ms, utt_id, speaker,
+                model, dialect, iteration
+              </li>
+              <li>Audio files (.wav) referenced in metadata.csv</li>
+            </ul>
+          </div>
+
+          {error && (
+            <div className="p-3 bg-red-100 border border-red-400 text-red-700 rounded text-sm">
+              {error}
+            </div>
+          )}
+
+          {success && (
+            <div className="p-3 bg-green-100 border border-green-400 text-green-700 rounded text-sm">
+              {status}
+            </div>
+          )}
+        </form>
+      </Modal>
+    </>
+  );
+}

src/components/UploadUtterancesModal.tsx

@@ -0,0 +1,215 @@
+'use client';
+
+import { useState } from 'react';
+import { uploadDatasetUtterances } from '@/app/actions/upload-utterances';
+import Modal from '@/components/Modal';
+
+interface UploadUtterancesModalProps {
+  datasetId: number;
+}
+
+export default function UploadUtterancesModal({
+  datasetId,
+}: UploadUtterancesModalProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [file, setFile] = useState<File | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
+  const [utterancesCreated, setUtterancesCreated] = useState(0);
+  const [status, setStatus] = useState<string>('');
+  const [isDragging, setIsDragging] = useState(false);
+
+  function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
+    const selectedFile = e.target.files?.[0];
+    if (selectedFile) {
+      setFile(selectedFile);
+      setError(null);
+    }
+  }
+
+  function handleDragOver(e: React.DragEvent<HTMLDivElement>) {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(true);
+  }
+
+  function handleDragLeave(e: React.DragEvent<HTMLDivElement>) {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+  }
+
+  function handleDrop(e: React.DragEvent<HTMLDivElement>) {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+
+    const droppedFiles = e.dataTransfer.files;
+    if (droppedFiles.length > 0) {
+      const droppedFile = droppedFiles[0];
+      if (droppedFile.name.endsWith('.csv')) {
+        setFile(droppedFile);
+        setError(null);
+      } else {
+        setError('Please upload a CSV file');
+      }
+    }
+  }
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError(null);
+    setSuccess(false);
+
+    if (!file) {
+      setError('Please select a CSV file');
+      return;
+    }
+
+    setLoading(true);
+    setStatus('Preparing upload...');
+
+    try {
+      const formData = new FormData();
+      formData.append('file', file);
+
+      const result = await uploadDatasetUtterances(datasetId, formData);
+
+      setSuccess(true);
+      setUtterancesCreated(result.utterancesCreated);
+      setStatus(`Successfully created ${result.utterancesCreated} utterances!`);
+      setFile(null);
+
+      setTimeout(() => {
+        setSuccess(false);
+        setIsOpen(false);
+        setStatus('');
+        window.location.reload();
+      }, 2500);
+    } catch (err) {
+      const errorMsg =
+        err instanceof Error ? err.message : 'Failed to upload utterances';
+      setError(errorMsg);
+      setStatus('');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  function handleClose() {
+    if (!loading) {
+      setIsOpen(false);
+      setFile(null);
+      setError(null);
+      setSuccess(false);
+      setStatus('');
+    }
+  }
+
+  return (
+    <>
+      <button
+        onClick={() => setIsOpen(true)}
+        className="px-4 py-2 bg-purple-500 text-white rounded-md hover:bg-purple-600 transition-colors"
+      >
+        📝 Upload Utterances
+      </button>
+
+      <Modal
+        isOpen={isOpen}
+        onClose={handleClose}
+        title="Upload Utterances CSV"
+        actions={[
+          {
+            label: 'Cancel',
+            onClick: handleClose,
+            variant: 'secondary',
+            disabled: loading,
+          },
+          {
+            label: loading ? 'Uploading...' : 'Upload',
+            onClick: () => {
+              const form = document.getElementById(
+                'uploadUtterancesForm'
+              ) as HTMLFormElement;
+              form?.dispatchEvent(new Event('submit', { bubbles: true }));
+            },
+            variant: 'primary',
+            disabled: loading || !file,
+          },
+        ]}
+      >
+        <form id="uploadUtterancesForm" onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label htmlFor="utterances-file" className="block text-sm font-medium mb-2">
+              CSV File
+            </label>
+            <div
+              className={`border-2 border-dashed rounded-lg p-6 text-center transition-colors ${
+                isDragging ? 'border-blue-400 bg-blue-50' : 'border-gray-300'
+              }`}
+              onDragOver={handleDragOver}
+              onDragLeave={handleDragLeave}
+              onDrop={handleDrop}
+            >
+              <input
+                id="utterances-file"
+                type="file"
+                accept=".csv"
+                onChange={handleFileChange}
+                disabled={loading}
+                className="hidden"
+              />
+              <label htmlFor="utterances-file" className="cursor-pointer block">
+                {file ? (
+                  <div>
+                    <p className="text-sm font-medium text-blue-600">
+                      {file.name}
+                    </p>
+                    <p className="text-xs text-gray-500 mt-1">
+                      {(file.size / 1024).toFixed(2)} KB
+                    </p>
+                  </div>
+                ) : (
+                  <div>
+                    <p className="text-sm font-medium text-gray-700">
+                      Click to select or drag and drop
+                    </p>
+                    <p className="text-xs text-gray-500 mt-1">CSV file only</p>
+                  </div>
+                )}
+              </label>
+            </div>
+          </div>
+
+          <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 text-sm text-blue-800">
+            <p className="font-semibold mb-2">CSV file should contain:</p>
+            <ul className="list-disc list-inside space-y-1 text-xs">
+              <li>
+                <code className="bg-blue-100 px-1 rounded">id</code> column with
+                utterance IDs (e.g., utt_001)
+              </li>
+              <li>
+                <code className="bg-blue-100 px-1 rounded">text</code> column with the
+                utterance text
+              </li>
+            </ul>
+          </div>
+
+          {error && (
+            <div className="p-3 bg-red-100 border border-red-400 text-red-700 rounded text-sm">
+              {error}
+            </div>
+          )}
+
+          {success && (
+            <div className="p-3 bg-green-100 border border-green-400 text-green-700 rounded text-sm">
+              {status}
+            </div>
+          )}
+        </form>
+      </Modal>
+    </>
+  );
+}

src/lib/db.ts

@@ -0,0 +1,6 @@
+import { drizzle } from 'drizzle-orm/better-sqlite3';
+import Database from 'better-sqlite3';
+
+const sqlite = new Database('sqlite_data.db');
+const db = drizzle({ client: sqlite });
+export default db;

src/lib/model/dataset.ts

@@ -0,0 +1,23 @@
+import { sqliteTable, text, integer, real } from 'drizzle-orm/sqlite-core';
+import { relations } from 'drizzle-orm';
+import { dataset_entry } from './dataset_entry';
+
+// Define the dataset table schema
+export const dataset = sqliteTable('dataset', {
+  id: integer('id').primaryKey({ autoIncrement: true }),
+  name: text('name').notNull(),
+  createdAt: integer('created_at', { mode: 'timestamp' })
+    .notNull()
+    .default(new Date()),
+  updatedAt: integer('updated_at', { mode: 'timestamp' })
+    .notNull()
+    .default(new Date())
+});
+
+export const datasetRelations = relations(dataset, ({ many }) => ({
+  entries: many(dataset_entry)
+}));
+
+// Create a type for dataset records based on the schema
+export type Dataset = typeof dataset.$inferSelect;
+export type NewDataset = typeof dataset.$inferInsert;

src/lib/model/dataset_entry.ts

@@ -0,0 +1,40 @@
+import { sqliteTable, text, integer, real } from 'drizzle-orm/sqlite-core';
+import { relations } from 'drizzle-orm';
+import { dataset } from './dataset';
+import { dataset_utterance } from './utterance';
+
+// Define the dataset table schema
+export const dataset_entry = sqliteTable('dataset_entry', {
+  id: integer('id').primaryKey({ autoIncrement: true }),
+  externalId: text('external_id').notNull(),
+  speakerId: text('speaker_id').notNull(),
+  modelName: text('model_name').notNull(),
+  datasetId: integer('dataset_id')
+    .notNull()
+    .references(() => dataset.id),
+  utteranceId: text('utterance_id').references(() => dataset_utterance.id),
+  fileName: text('file_name').notNull(),
+  dialect: text('dialect').notNull(),
+  iteration: integer('iteration').notNull(),
+  createdAt: integer('created_at', { mode: 'timestamp' })
+    .notNull()
+    .default(new Date()),
+  updatedAt: integer('updated_at', { mode: 'timestamp' })
+    .notNull()
+    .default(new Date())
+});
+
+export const dataset_entryRelations = relations(dataset_entry, ({ one }) => ({
+  dataset: one(dataset, {
+    fields: [dataset_entry.datasetId],
+    references: [dataset.id]
+  }),
+  utterance: one(dataset_utterance, {
+    fields: [dataset_entry.utteranceId],
+    references: [dataset_utterance.id]
+  })
+}));
+
+// Create a type for dataset records based on the schema
+export type DatasetEntry = typeof dataset_entry.$inferSelect;
+export type NewDatasetEntry = typeof dataset_entry.$inferInsert;

src/lib/model/index.ts

@@ -0,0 +1,3 @@
+export * from "./dataset";
+export * from "./dataset_entry";
+export * from "./utterance";

src/lib/model/utterance.ts

@@ -0,0 +1,29 @@
+import { sqliteTable, text, integer } from 'drizzle-orm/sqlite-core';
+import { relations } from 'drizzle-orm';
+import { dataset } from './dataset';
+
+// Define the dataset_utterance table schema
+export const dataset_utterance = sqliteTable('dataset_utterance', {
+  id: text('id').primaryKey(),
+  datasetId: integer('dataset_id')
+    .notNull()
+    .references(() => dataset.id),
+  text: text('text').notNull(),
+  createdAt: integer('created_at', { mode: 'timestamp' })
+    .notNull()
+    .default(new Date()),
+  updatedAt: integer('updated_at', { mode: 'timestamp' })
+    .notNull()
+    .default(new Date()),
+});
+
+export const dataset_utteranceRelations = relations(dataset_utterance, ({ one }) => ({
+  dataset: one(dataset, {
+    fields: [dataset_utterance.datasetId],
+    references: [dataset.id],
+  }),
+}));
+
+// Create types for dataset_utterance records based on the schema
+export type DatasetUtterance = typeof dataset_utterance.$inferSelect;
+export type NewDatasetUtterance = typeof dataset_utterance.$inferInsert;