feat: add storage management features including user storage quota and usage tracking

- Updated database schema to include `storage_quota_bytes` and `plan` for users.
- Implemented storage usage calculations in `storageRepo` and added tests for storage functionality.
- Created `StorageManager` component to display and manage user storage.
- Enhanced user settings to show storage details and warnings for high usage.
- Added translations for new storage-related strings in English and Dutch.
- Updated styles for storage overview and details in CSS.

frontend/src/components/Workspace.tsx

@@ -8,12 +8,14 @@ import type { Exam } from '../types'
 import MyExams from './MyExams'
 import MyResults from './MyResults'
 import Settings from './Settings'
+import StorageManager from './StorageManager'
 
-type TabKey = 'exams' | 'results' | 'settings'
+type TabKey = 'exams' | 'results' | 'storage' | 'settings'
 
 const TAB_KEYS: { key: TabKey; labelKey: string; icon: string }[] = [
   { key: 'exams', labelKey: 'workspace.myExams', icon: '◇' },
   { key: 'results', labelKey: 'workspace.results', icon: '✦' },
+  { key: 'storage', labelKey: 'workspace.storage', icon: '◉' },
   { key: 'settings', labelKey: 'workspace.settings', icon: '⚙' },
 ]
 
@@ -84,6 +86,7 @@ export default function Workspace({ onLoadExam }: Props) {
       <main className="workspace-main">
         {activeTab === 'exams' && <MyExams onLoadExam={onLoadExam} />}
         {activeTab === 'results' && <MyResults onLoadExam={onLoadExam} />}
+        {activeTab === 'storage' && <StorageManager />}
         {activeTab === 'settings' && <Settings />}
       </main>
     </div>