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

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>
+  );
+}