+
+ )}
+
+ {loading ? (
+
+
+ ) : (
+ Loading...
+
+
+ )}
+
+ setShowUploadModal(true)} />
+ setSelectedImage(null)}
+ onSave={handleSaveImage}
+ onDelete={handleDeleteImage}
+ />
+ )}
+
+ {showUploadModal && (
+ setShowUploadModal(false)}
+ onUpload={handleUpload}
+ />
+ )}
+
+ );
+}
+
+export default App;
+
+// import { useState, useEffect } from 'react';
+// import Navbar from './components/Navbar';
+// import Sidebar from './components/Sidebar';
+// import SearchBar from './components/SearchBar';
+// import ImageGrid from './components/ImageGrid';
+// import ImageModal from './components/ImageModal';
+// import UploadModal from './components/UploadModal';
+// import { api } from './api-mock';
+// import type { Image } from './types';
+
+// function App() {
+// const [images, setImages] = useState
+
+
+
+
+ {selectedImage && (
+
+// setShowUploadModal(true)}
+// />
+// setSelectedImage(null)}
+// onSave={handleSaveImage}
+// onDelete={handleDeleteImage}
+// />
+// )}
+
+// {showUploadModal && (
+// setShowUploadModal(false)}
+// onUpload={handleUpload}
+// />
+// )}
+//
+// );
+// }
+
+// export default App;
\ No newline at end of file
diff --git a/webpage/src/api-mock.ts b/webpage/src/api-mock.ts
new file mode 100644
index 0000000..67e0b93
--- /dev/null
+++ b/webpage/src/api-mock.ts
@@ -0,0 +1,141 @@
+import type { Image } from './types';
+import fakeDb from './assets/tests/fakedb.json';
+
+export const ALIASES_PER_PAGE = 5;
+
+class MockApiService {
+ private images: Image[] = [];
+ private nextId: number = 18;
+
+ constructor() {
+ // Load initial data from fakedb.json
+ this.images = JSON.parse(JSON.stringify(fakeDb.images));
+ }
+
+ // Helper to simulate network delay
+ private delay(ms: number = 300): Promise
+//
+//
+//
+
+// {selectedImage && (
+//
+//
+// ) : (
+// Loading...
+//
+ {filteredGroups.map(([alias, imgs]) => (
+
+ );
+}
+
+// import type { Image } from '../types';
+
+// interface ImageGridProps {
+// images: Image[];
+// onImageClick: (image: Image) => void;
+// }
+
+// export default function ImageGrid({ images, onImageClick }: ImageGridProps) {
+// // Group images by alias
+// const groupedImages = images.reduce((acc, image) => {
+// if (image.aliases.length === 0) {
+// if (!acc['__no_alias__']) acc['__no_alias__'] = [];
+// acc['__no_alias__'].push(image);
+// } else {
+// image.aliases.forEach((alias) => {
+// if (!acc[alias]) acc[alias] = [];
+// acc[alias].push(image);
+// });
+// }
+// return acc;
+// }, {} as Record
+
+ ))}
+ {filteredGroups.length === 0 && (
+ + {alias === '__no_alias__' ? 'Images without aliases' : `Alias: ${alias}`} +
+
+ {imgs.map((image) => (
+
+ ))}
+
+
+ No images found
+
+ )}
+
+// {Object.entries(groupedImages).map(([alias, imgs]) => (
+//
+// );
+// }
\ No newline at end of file
diff --git a/webpage/src/components/ImageModal.tsx b/webpage/src/components/ImageModal.tsx
new file mode 100644
index 0000000..983e3a1
--- /dev/null
+++ b/webpage/src/components/ImageModal.tsx
@@ -0,0 +1,191 @@
+import { useState, useEffect } from 'react';
+import type { Image } from '../types';
+
+interface ImageModalProps {
+ image: Image;
+ onClose: () => void;
+ onSave: (imageId: string, aliases: string[]) => Promise
+//
+// ))}
+// {Object.keys(groupedImages).length === 0 && (
+// +// {alias === '__no_alias__' ? 'Images without aliases' : `Alias: ${alias}`} +//
+//
+// {imgs.map((image) => (
+//
+// ))}
+//
+//
+// No images found
+//
+// )}
+//
+
+ );
+}
\ No newline at end of file
diff --git a/webpage/src/components/Navbar.tsx b/webpage/src/components/Navbar.tsx
new file mode 100644
index 0000000..6e05c4a
--- /dev/null
+++ b/webpage/src/components/Navbar.tsx
@@ -0,0 +1,27 @@
+import { useState } from 'react';
+
+interface NavbarProps {
+ onUploadClick: () => void;
+}
+
+export default function Navbar({
+ onUploadClick,
+}: NavbarProps) {
+ return (
+
+ );
+}
\ No newline at end of file
diff --git a/webpage/src/components/Pagination.tsx b/webpage/src/components/Pagination.tsx
new file mode 100644
index 0000000..24892b4
--- /dev/null
+++ b/webpage/src/components/Pagination.tsx
@@ -0,0 +1,33 @@
+interface PaginationProps {
+ currentPage: number;
+ totalPages: number;
+ onPageChange: (page: number) => void;
+}
+
+export default function Pagination({
+ currentPage,
+ totalPages,
+ onPageChange,
+}: PaginationProps) {
+ return (
+ e.stopPropagation()}
+ >
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+ + Uploaded Time:{' '} + {new Date(image.uploaded_at).toLocaleString()} +
++ Uploaded By:{' '} + {image.uploaded_user_id} +
+
+
+ + Aliases of this image: +
+
+ {aliases.map((alias) => (
+
+
+ {(
+
+ )}
+
+
+ ))}
+ {(
+
+
+ setNewAlias(e.target.value)}
+ onKeyPress={(e) => e.key === 'Enter' && handleAddAlias()}
+ className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+ />
+
+ )}
+
+
+
+ {(
+
+ )}
+
+
+
+ {(
+
+ )}
+
+
+
+
+ Page {currentPage} of {totalPages}
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/webpage/src/components/SearchBar.tsx b/webpage/src/components/SearchBar.tsx
new file mode 100644
index 0000000..5461adf
--- /dev/null
+++ b/webpage/src/components/SearchBar.tsx
@@ -0,0 +1,33 @@
+interface SearchBarProps {
+ value: string;
+ onChange: (value: string) => void;
+}
+
+export default function SearchBar({ value, onChange }: SearchBarProps) {
+ return (
+
+
+ );
+}
\ No newline at end of file
diff --git a/webpage/src/components/Sidebar.tsx b/webpage/src/components/Sidebar.tsx
new file mode 100644
index 0000000..9e3e1a7
--- /dev/null
+++ b/webpage/src/components/Sidebar.tsx
@@ -0,0 +1,86 @@
+interface SidebarProps {
+ aliases: string[];
+ currentPage: number;
+ totalPages: number;
+}
+
+export default function Sidebar({
+ aliases,
+ currentPage,
+ totalPages,
+}: SidebarProps) {
+ return (
+
+ );
+}
+
+// interface SidebarProps {
+// aliases: string[];
+// selectedAlias: string | null;
+// onAliasClick: (alias: string | null) => void;
+// }
+
+// export default function Sidebar({
+// aliases,
+// selectedAlias,
+// onAliasClick,
+// }: SidebarProps) {
+// return (
+//
+// );
+// }
\ No newline at end of file
diff --git a/webpage/src/components/UploadModal.tsx b/webpage/src/components/UploadModal.tsx
new file mode 100644
index 0000000..7513e95
--- /dev/null
+++ b/webpage/src/components/UploadModal.tsx
@@ -0,0 +1,245 @@
+import { useState } from 'react';
+
+interface UploadModalProps {
+ onClose: () => void;
+ onUpload: (file: File, aliases: string[]) => Promise
+ onChange(e.target.value)}
+ className="w-full px-4 py-3 pl-11 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+ />
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/webpage/src/index.css b/webpage/src/index.css
new file mode 100644
index 0000000..0289c6d
--- /dev/null
+++ b/webpage/src/index.css
@@ -0,0 +1,4 @@
+/* File: webpage/src/index.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
\ No newline at end of file
diff --git a/webpage/src/main.tsx b/webpage/src/main.tsx
new file mode 100644
index 0000000..bef5202
--- /dev/null
+++ b/webpage/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+ e.stopPropagation()}
+ >
+
+
+
+ + Upload Image +
+ +
+ {preview ? (
+
+
+
+ 
+
+
+ ) : (
+ <>
+
+ + Drag your image here or click to browse +
+ + e.target.files && handleFileChange(e.target.files[0]) + } + className="hidden" + id="file-upload" + /> + + + )} +
+
+
+ + Aliases of this image: +
+
+ {aliases.map((alias) => (
+
+
+
+
+
+ ))}
+
+
+ setNewAlias(e.target.value)}
+ onKeyPress={(e) => e.key === 'Enter' && handleAddAlias()}
+ className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+ />
+
+
+
+
+
+