Initial commit - copied workspace after database cleanup

dashboard/src/components/CustomMediaInfoPanel.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+
+interface CustomMediaInfoPanelProps {
+  name: string;
+  size: number;
+  type: string;
+  dateModified: number;
+  description?: string | null;
+}
+
+const CustomMediaInfoPanel: React.FC<CustomMediaInfoPanelProps> = ({
+  name,
+  size,
+  type,
+  dateModified,
+  description,
+}) => {
+  function formatLocalDate(timestamp: number | undefined | null) {
+    if (!timestamp || isNaN(timestamp)) return '-';
+    const date = new Date(timestamp * 1000);
+    return date.toLocaleString('de-DE');
+  }
+  return (
+    <div
+      style={{
+        padding: 16,
+        border: '1px solid #eee',
+        borderRadius: 8,
+        background: '#fafafa',
+        maxWidth: 400,
+      }}
+    >
+      <h3 style={{ marginBottom: 12 }}>Datei-Eigenschaften</h3>
+      <div>
+        <b>Name:</b> {name || '-'}
+      </div>
+      <div>
+        <b>Typ:</b> {type || '-'}
+      </div>
+      <div>
+        <b>Größe:</b> {typeof size === 'number' && !isNaN(size) ? size + ' Bytes' : '-'}
+      </div>
+      <div>
+        <b>Geändert:</b> {formatLocalDate(dateModified)}
+      </div>
+      <div>
+        <b>Beschreibung:</b>{' '}
+        {description && description !== 'null' ? (
+          description
+        ) : (
+          <span style={{ color: '#888' }}>Keine Beschreibung</span>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default CustomMediaInfoPanel;