Started to work on media upload and organization

backend/api/core/paginated.go

@@ -0,0 +1,8 @@
+package core
+
+type Paginated[T any] struct {
+	Page       int `json:"page"`
+	Limit      int `json:"limit"`
+	TotalPages int `json:"totalPages"`
+	Items      []T `json:"items"`
+}

backend/api/core/schemas.go

@@ -136,6 +136,17 @@ type WebsiteSettings struct {
 	AutoAcceptDemand bool      `bun:"auto_accept_demand,default:false" json:"autoAcceptDemand"`
 }
 
+type Media struct {
+	ID       uuid.UUID `bun:"type:uuid,pk,default:gen_random_uuid()" json:"id"`
+	AuthorID uuid.UUID `bun:"author_id,type:uuid,notnull" json:"authorID"`
+	Author   *User     `bun:"rel:belongs-to,join:author_id=user_id" json:"author,omitempty"`
+	Type     string    `bun:"media_type" json:"type"` // Image, Video, GIF etc. Add support for PDFs?
+	Alt      string    `bun:"media_alt" json:"alt"`
+	Path     string    `bun:"media_path" json:"path"`
+	Size     int64     `bun:"media_size" json:"size"`
+	URL      string    `bun:"-" json:"url"`
+}
+
 func InitDatabase(dsn DSN) (*bun.DB, error) {
 	sqldb := sql.OpenDB(pgdriver.NewConnector(pgdriver.WithDSN(dsn.ToString())))
 	db := bun.NewDB(sqldb, pgdialect.New())
@@ -152,6 +163,7 @@ func InitDatabase(dsn DSN) (*bun.DB, error) {
 	_, err = db.NewCreateTable().Model((*EventToUser)(nil)).IfNotExists().Exec(ctx)
 	_, err = db.NewCreateTable().Model((*Blog)(nil)).IfNotExists().Exec(ctx)
 	_, err = db.NewCreateTable().Model((*WebsiteSettings)(nil)).IfNotExists().Exec(ctx)
+	_, err = db.NewCreateTable().Model((*Media)(nil)).IfNotExists().Exec(ctx)
 	if err != nil {
 		return nil, err
 	}

backend/api/delete_media.go

@@ -0,0 +1,41 @@
+package api
+
+import (
+	"context"
+	"log"
+	"net/http"
+	"os"
+
+	"fr.latosa-escrima/api/core"
+)
+
+func HandleDeleteMedia(w http.ResponseWriter, r *http.Request) {
+	uuid := r.PathValue("media_uuid")
+	var media core.Media
+	res, err := core.DB.NewDelete().
+		Model(&media).
+		Where("id = ?", uuid).
+		Returning("*").
+		Exec(context.Background())
+	if err != nil {
+		core.JSONError{
+			Status:  core.Error,
+			Message: err.Error(),
+		}.Respond(w, http.StatusInternalServerError)
+		return
+	}
+	log.Println(res)
+	err = os.Remove(media.Path)
+	if err != nil {
+		core.JSONError{
+			Status:  core.Error,
+			Message: err.Error(),
+		}.Respond(w, http.StatusInternalServerError)
+		return
+	}
+
+	core.JSONSuccess{
+		Status:  core.Success,
+		Message: "Image successfully deleted.",
+	}.Respond(w, http.StatusOK)
+}

backend/api/get_media.go

@@ -0,0 +1,117 @@
+package api
+
+import (
+	"context"
+	"fmt"
+	"math"
+	"net/http"
+	"strconv"
+
+	"fr.latosa-escrima/api/core"
+	"fr.latosa-escrima/utils"
+)
+
+func HandleGetMedia(w http.ResponseWriter, r *http.Request) {
+	queryParams := r.URL.Query()
+	page, err := strconv.Atoi(queryParams.Get("page"))
+	limit, err := strconv.Atoi(queryParams.Get("limit"))
+	if page < 0 {
+		page = 0
+	}
+	if limit <= 0 {
+		limit = 10
+	}
+	if err != nil {
+		core.JSONError{
+			Status:  core.Error,
+			Message: err.Error(),
+		}.Respond(w, http.StatusBadRequest)
+		return
+	}
+
+	offset := (page - 1) * limit
+
+	total, err := core.DB.NewSelect().
+		Model((*core.Media)(nil)).
+		Count(context.Background())
+
+	totalPages := int(math.Max(1, float64(total/limit)))
+
+	var media []core.Media
+	err = core.DB.NewSelect().
+		Model(&media).
+		Limit(limit).
+		Offset(offset).
+		Scan(context.Background())
+	if err != nil {
+		core.JSONError{
+			Status:  core.Error,
+			Message: err.Error(),
+		}.Respond(w, http.StatusInternalServerError)
+		return
+	}
+	baseURL := utils.GetURL(r)
+	media = utils.Map(media, func(m core.Media) core.Media {
+		m.Author = nil
+		m.URL = fmt.Sprintf("%s%s/file", baseURL, m.ID)
+		return m
+	})
+
+	core.JSONSuccess{
+		Status:  core.Success,
+		Message: "Media successfully retrieved",
+		Data: core.Paginated[core.Media]{
+			Page:       page,
+			Limit:      limit,
+			TotalPages: totalPages,
+			Items:      media,
+		},
+	}.Respond(w, http.StatusOK)
+}
+
+func HandleGetMediaDetails(w http.ResponseWriter, r *http.Request) {
+	uuid := r.PathValue("media_uuid")
+	var media core.Media
+	err := core.DB.NewSelect().
+		Model(&media).
+		Where("id = ?", uuid).
+		Limit(1).
+		Scan(context.Background())
+	if err != nil {
+		core.JSONError{
+			Status:  core.Error,
+			Message: err.Error(),
+		}.Respond(w, http.StatusInternalServerError)
+		return
+	}
+
+	baseURL := utils.GetURL(r)
+	media.URL = fmt.Sprintf("%s/file", baseURL)
+
+	media.Author = nil
+	core.JSONSuccess{
+		Status:  core.Success,
+		Message: "Media retrieved",
+		Data:    media,
+	}.Respond(w, http.StatusOK)
+}
+
+func HandleGetMediaFile(w http.ResponseWriter, r *http.Request) {
+	uuid := r.PathValue("media_uuid")
+	var media core.Media
+	err := core.DB.NewSelect().
+		Model(&media).
+		Where("id = ?", uuid).
+		Limit(1).
+		Scan(context.Background())
+	if err != nil {
+		core.JSONError{
+			Status:  core.Error,
+			Message: err.Error(),
+		}.Respond(w, http.StatusInternalServerError)
+		return
+	}
+
+	http.ServeFile(w, r, media.Path)
+
+}

backend/api/upload_media.go

@@ -1,6 +1,7 @@
 package api
 
 import (
+	"context"
 	"fmt"
 	"io"
 	"net/http"
@@ -9,6 +10,8 @@ import (
 
 	"fr.latosa-escrima/api/core"
 	"fr.latosa-escrima/utils"
+	"github.com/golang-jwt/jwt/v5"
+	"github.com/google/uuid"
 )
 
 func HandleUploadMedia(w http.ResponseWriter, r *http.Request) {
@@ -66,6 +69,49 @@ func HandleUploadMedia(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
+	token, ok := r.Context().Value("token").(*jwt.Token)
+	if !ok {
+		core.JSONError{
+			Status:  core.Error,
+			Message: "Couldn't retrieve your JWT.",
+		}.Respond(w, http.StatusInternalServerError)
+		return
+	}
+
+	claims, ok := token.Claims.(jwt.MapClaims)
+	if !ok {
+		core.JSONError{
+			Status:  core.Error,
+			Message: "Invalid token claims.",
+		}.Respond(w, http.StatusInternalServerError)
+		return
+	}
+
+	id, err := uuid.Parse(claims["user_id"].(string))
+	if err != nil {
+		core.JSONError{
+			Status:  core.Error,
+			Message: err.Error(),
+		}.Respond(w, http.StatusInternalServerError)
+		return
+	}
+	media := &core.Media{
+		AuthorID: id,
+		Type:     fileHeader.Header.Get("Content-Type"),
+		Alt:      "To be implemented",
+		Path:     p,
+		Size:     fileHeader.Size,
+	}
+
+	_, err = core.DB.NewInsert().Model(media).Exec(context.Background())
+	if err != nil {
+		core.JSONError{
+			Status:  core.Error,
+			Message: err.Error(),
+		}.Respond(w, http.StatusInternalServerError)
+		return
+	}
+
 	core.JSONSuccess{
 		Status:  core.Success,
 		Message: "File uploaded successfully.",

backend/main.go

@@ -120,6 +120,29 @@ func main() {
 			Handler:     api.HandleVerifyMedia,
 			Middlewares: []core.Middleware{api.Methods("POST"), api.AuthJWT},
 		},
+		// Paginated media response
+		"/media/": {
+			Handler:     api.HandleGetMedia,
+			Middlewares: []core.Middleware{api.Methods("GET")},
+		},
+		// Unique element
+		"/media/{media_uuid}": {
+			Handler:     api.HandleGetMediaDetails,
+			Middlewares: []core.Middleware{api.Methods("GET")},
+		},
+		// Get the image, video, GIF etc.
+		"/media/{media_uuid}/file": {
+			Handler:     api.HandleGetMediaFile,
+			Middlewares: []core.Middleware{api.Methods("GET")},
+		},
+		// "/media/{media_uuid}/update": {
+		// 	Handler:     api.HandleGetMediaFile,
+		// 	Middlewares: []core.Middleware{api.Methods("PATCH"), api.AuthJWT},
+		// },
+		"/media/{media_uuid}/delete": {
+			Handler:     api.HandleDeleteMedia,
+			Middlewares: []core.Middleware{api.Methods("DELETE"), api.AuthJWT},
+		},
 		"/contact": {
 			Handler:     api.HandleContact,
 			Middlewares: []core.Middleware{api.Methods("POST"), CSRFMiddleware},

backend/utils/get_url.go

@@ -0,0 +1,23 @@
+package utils
+
+import (
+	"fmt"
+	"net/http"
+)
+
+func GetURL(r *http.Request) string {
+	scheme := "http"
+	if r.TLS != nil { // Check if the request is over HTTPS
+		scheme = "https"
+	}
+
+	// Extract the host
+	host := r.Host
+
+	// Get the full request URI (path + query string)
+	fullPath := r.URL.Path
+
+	// Build the full request URL
+	return fmt.Sprintf("%s://%s%s", scheme, host, fullPath)
+}
+

frontend/app/(auth)/dashboard/media/old.tsx

@@ -0,0 +1,30 @@
+"use client";
+import useFileUpload from "@/hooks/use-file-upload";
+import { ChangeEvent } from "react";
+
+const MyComponent = () => {
+	const { progress, isUploading, error, uploadFile, cancelUpload } =
+		useFileUpload();
+
+	const handleFileUpload = (event: ChangeEvent<HTMLInputElement>) => {
+		const file = event.target.files?.[0];
+		if (file) {
+			uploadFile(file, "/media/upload", (response) => {
+				console.log("Upload success:", response);
+			});
+		}
+	};
+
+	return (
+		<div>
+			<input type="file" onChange={handleFileUpload} />
+			{isUploading && <p>Uploading... {progress}%</p>}
+			{error && <p>Error: {error}</p>}
+			<button onClick={cancelUpload} disabled={!isUploading}>
+				Cancel Upload
+			</button>
+		</div>
+	);
+};
+
+export default MyComponent;

frontend/app/(auth)/dashboard/media/page.tsx

@@ -1,30 +1,154 @@
 "use client";
-import useFileUpload from "@/hooks/use-file-upload";
-import { ChangeEvent } from "react";
 
-const MyComponent = () => {
+import { useState } from "react";
+import Image from "next/image";
+import { Plus } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+	Pagination,
+	PaginationContent,
+	PaginationItem,
+	PaginationLink,
+	PaginationNext,
+	PaginationPrevious,
+} from "@/components/ui/pagination";
+import { PhotoDialog } from "@/components/photo-dialog";
+import useFileUpload from "@/hooks/use-file-upload";
+import useMedia from "@/hooks/use-media";
+import Media from "@/interfaces/Media";
+import useApiMutation, { request } from "@/hooks/use-api";
+
+export default function PhotoGallery() {
+	const {
+		data,
+		error: mediaError,
+		isLoading,
+		success,
+		setPage,
+		setLimit,
+		mutate,
+	} = useMedia();
+	console.log(data);
+	const [selectedPhoto, setSelectedPhoto] = useState<Media | null>(null);
+	const [isAddDialogOpen, setIsAddDialogOpen] = useState(false);
 	const { progress, isUploading, error, uploadFile, cancelUpload } =
 		useFileUpload();
 
-	const handleFileUpload = (event: ChangeEvent<HTMLInputElement>) => {
+	const handleAddPhoto = (newPhoto: Omit<Media, "id">, file: File) => {
-		const file = event.target.files?.[0];
-		if (file) {
 		uploadFile(file, "/media/upload", (response) => {
-				console.log("Upload success:", response);
+			mutate();
 		});
+	};
+
+	const handleUpdatePhoto = (updatedPhoto: Omit<Media, "id">) => {
+		if (selectedPhoto) {
 		}
+		setSelectedPhoto(null);
+	};
+
+	const handleDeletePhoto = async (id: Media["id"]) => {
+		try {
+			const res = await request<undefined>(`/media/${id}/delete`, {
+				method: "DELETE",
+				requiresAuth: true,
+			});
+			if (res.status === "Success") mutate();
+		} catch (e) {
+			console.log(e);
+		}
+		setSelectedPhoto(null);
 	};
 
 	return (
-		<div>
+		<div className="container mx-auto px-4 py-8">
-			<input type="file" onChange={handleFileUpload} />
+			<div className="flex justify-between items-center mb-8">
-			{isUploading && <p>Uploading... {progress}%</p>}
+				<h1 className="text-3xl font-bold">Gallerie Photo</h1>
-			{error && <p>Error: {error}</p>}
+				<Button
-			<button onClick={cancelUpload} disabled={!isUploading}>
+					disabled={isLoading}
-				Cancel Upload
+					onClick={() => setIsAddDialogOpen(true)}
-			</button>
+				>
+					<Plus className="mr-2 h-4 w-4" /> Ajouter une photo
+				</Button>
+			</div>
+			<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+				{data?.items.map((photo) => (
+					<div
+						key={photo.id}
+						className="aspect-square overflow-hidden rounded-lg shadow-md cursor-pointer"
+						onClick={() => setSelectedPhoto(photo)}
+					>
+						<Image
+							src={photo.url || "/placeholder.svg"}
+							alt={photo.alt}
+							width={300}
+							height={300}
+							className="w-full h-full object-cover"
+						/>
+					</div>
+				))}
+			</div>
+			<Pagination className="mt-8">
+				<PaginationContent>
+					<PaginationItem>
+						<PaginationPrevious
+							href="#"
+							onClick={(e) => {
+								e.preventDefault();
+								setPage((prev) => Math.max(prev - 1, 1));
+							}}
+							className={
+								data?.page === 1
+									? "pointer-events-none opacity-50"
+									: ""
+							}
+						/>
+					</PaginationItem>
+					{[...Array(data?.totalPages)].map((_, i) => (
+						<PaginationItem key={i + 1}>
+							<PaginationLink
+								href="#"
+								onClick={(e) => {
+									e.preventDefault();
+									setPage(i + 1);
+								}}
+								isActive={data?.page === i + 1}
+							>
+								{i + 1}
+							</PaginationLink>
+						</PaginationItem>
+					))}
+					<PaginationItem>
+						<PaginationNext
+							href="#"
+							onClick={(e) => {
+								e.preventDefault();
+								setPage((prev) =>
+									Math.min(prev + 1, data?.totalPages ?? 1),
+								);
+							}}
+							className={
+								data?.page === data?.totalPages
+									? "pointer-events-none opacity-50"
+									: ""
+							}
+						/>
+					</PaginationItem>
+				</PaginationContent>
+			</Pagination>
+			<PhotoDialog
+				isOpen={!!selectedPhoto}
+				photo={selectedPhoto || undefined}
+				onClose={() =>
+					setSelectedPhoto((p) => (isUploading ? p : null))
+				}
+				onDelete={handleDeletePhoto}
+				onSave={handleUpdatePhoto}
+			/>
+			<PhotoDialog
+				isOpen={isAddDialogOpen}
+				onClose={() => setIsAddDialogOpen(false)}
+				onSave={handleAddPhoto}
+			/>
 		</div>
 	);
-};
+}
-
-export default MyComponent;

frontend/components/photo-dialog.tsx

@@ -0,0 +1,197 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import Image from "next/image";
+import { useDropzone } from "react-dropzone";
+import {
+	Dialog,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+	DialogDescription,
+	DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import Media from "@/interfaces/Media";
+import Link from "next/link";
+
+interface PhotoDialogProps {
+	photo?: Media;
+	isOpen: boolean;
+	onClose: () => void;
+	onDelete?: (id: Media["id"]) => void;
+	onSave: (photo: Omit<Media, "id">, file: File) => void;
+}
+
+export function PhotoDialog({
+	photo,
+	isOpen,
+	onClose,
+	onDelete,
+	onSave,
+}: PhotoDialogProps) {
+	const [file, setFile] = useState<File | null>(null);
+	const [newPhoto, setNewPhoto] = useState<Omit<Media, "id">>({
+		url: "",
+		alt: "",
+		path: "",
+		type: "",
+		size: 0,
+	});
+	const [activeTab, setActiveTab] = useState<string>("url");
+
+	useEffect(() => {
+		setNewPhoto({
+			url: photo?.url ?? "",
+			alt: photo?.alt ?? "",
+			type: photo?.type ?? "",
+			path: photo?.path ?? "",
+			size: photo?.size ?? 0,
+		});
+	}, [photo]);
+
+	const onDrop = useCallback((acceptedFiles: File[]) => {
+		const file = acceptedFiles[0];
+		if (file) {
+			setFile(file);
+			const reader = new FileReader();
+			reader.onload = (e) => {
+				setNewPhoto((prev) => ({
+					...prev,
+					url: e.target?.result as string,
+				}));
+			};
+			reader.readAsDataURL(file);
+		}
+	}, []);
+
+	const { getRootProps, getInputProps, isDragActive } = useDropzone({
+		onDrop,
+		accept: { "image/*": [] },
+	});
+
+	const handleSave = () => {
+		if (file) onSave(newPhoto, file);
+		onClose();
+	};
+
+	const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		const file = e.target.files?.[0];
+		if (file) {
+			setFile(file);
+			const reader = new FileReader();
+			reader.onload = (e) => {
+				setNewPhoto((prev) => ({
+					...prev,
+					url: e.target?.result as string,
+				}));
+			};
+			reader.readAsDataURL(file);
+		}
+	};
+
+	const isAddMode = !photo;
+
+	return (
+		<Dialog open={isOpen} onOpenChange={onClose}>
+			<DialogContent className="max-w-3xl">
+				<DialogHeader>
+					<DialogTitle>
+						{isAddMode
+							? "Ajouter une nouvelle photo"
+							: "Éditer la photo"}
+					</DialogTitle>
+					<DialogDescription>
+						{isAddMode
+							? "Ajouter une nouvelle photo dans la gallerie"
+							: "Mettre à jour les informations"}
+					</DialogDescription>
+				</DialogHeader>
+				<Tabs value={activeTab} onValueChange={setActiveTab}>
+					<TabsList className="grid w-full grid-cols-2">
+						<TabsTrigger value="url">URL</TabsTrigger>
+						<TabsTrigger value="drag">Drag & Drop</TabsTrigger>
+					</TabsList>
+					<TabsContent value="url" className="space-y-4">
+						<div className="w-full space-y-2">
+							<Label htmlFor="photo-src">URL de la photo</Label>
+							<Input
+								id="photo-src"
+								value={newPhoto.url}
+								onChange={(e) =>
+									setNewPhoto({
+										...newPhoto,
+										url: e.target.value,
+									})
+								}
+								placeholder="Enter URL for the image"
+							/>
+						</div>
+					</TabsContent>
+					<TabsContent value="drag" className="space-y-4">
+						<div
+							{...getRootProps()}
+							className="border-2 border-dashed rounded-md p-8 text-center cursor-pointer"
+						>
+							<input {...getInputProps()} />
+							{isDragActive ? (
+								<p>Déposez une image ici...</p>
+							) : (
+								<p>
+									Déposez une image directement ou cliquer
+									pour sélectionner.
+								</p>
+							)}
+						</div>
+					</TabsContent>
+				</Tabs>
+				<div className="mt-4">
+					<Link href={newPhoto.url} target="_blank">
+						<Image
+							src={newPhoto.url || "/placeholder.svg"}
+							alt={newPhoto.alt}
+							width={300}
+							height={300}
+							className="w-full max-h-[300px] object-contain rounded-md"
+						/>
+					</Link>
+				</div>
+				<div className="w-full space-y-2 mt-4">
+					<Label htmlFor="alt-text">Description</Label>
+					<Input
+						id="alt-text"
+						value={newPhoto.alt}
+						onChange={(e) =>
+							setNewPhoto({ ...newPhoto, alt: e.target.value })
+						}
+						placeholder="Entrer une description pour l'image"
+					/>
+				</div>
+				<DialogFooter className="sm:justify-between">
+					{!isAddMode && onDelete && (
+						<Button
+							variant="destructive"
+							onClick={() => onDelete(photo.id)}
+						>
+							Supprimer la photo
+						</Button>
+					)}
+					<div className="flex space-x-2">
+						<Button variant="outline" onClick={onClose}>
+							Annuler
+						</Button>
+						<Button
+							onClick={handleSave}
+							disabled={!newPhoto.url || !newPhoto.alt}
+						>
+							{isAddMode ? "Ajouter" : "Mettre à jour"}
+						</Button>
+					</div>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+}

frontend/components/ui/form.tsx

@@ -1,8 +1,8 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
-import * as LabelPrimitive from "@radix-ui/react-label"
+import * as LabelPrimitive from "@radix-ui/react-label";
-import { Slot } from "@radix-ui/react-slot"
+import { Slot } from "@radix-ui/react-slot";
 import {
 	Controller,
 	ControllerProps,
@@ -10,27 +10,27 @@ import {
 	FieldValues,
 	FormProvider,
 	useFormContext,
-} from "react-hook-form"
+} from "react-hook-form";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-import { Label } from "@/components/ui/label"
+import { Label } from "@/components/ui/label";
 
-const Form = FormProvider
+const Form = FormProvider;
 
 type FormFieldContextValue<
 	TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+	TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 > = {
-  name: TName
+	name: TName;
-}
+};
 
 const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue
+	{} as FormFieldContextValue,
-)
+);
 
 const FormField = <
 	TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+	TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 >({
 	...props
 }: ControllerProps<TFieldValues, TName>) => {
@@ -38,21 +38,21 @@ const FormField = <
 		<FormFieldContext.Provider value={{ name: props.name }}>
 			<Controller {...props} />
 		</FormFieldContext.Provider>
-  )
+	);
-}
+};
 
 const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext)
+	const fieldContext = React.useContext(FormFieldContext);
-  const itemContext = React.useContext(FormItemContext)
+	const itemContext = React.useContext(FormItemContext);
-  const { getFieldState, formState } = useFormContext()
+	const { getFieldState, formState } = useFormContext();
 
-  const fieldState = getFieldState(fieldContext.name, formState)
+	const fieldState = getFieldState(fieldContext.name, formState);
 
 	if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>")
+		throw new Error("useFormField should be used within <FormField>");
 	}
 
-  const { id } = itemContext
+	const { id } = itemContext;
 
 	return {
 		id,
@@ -61,36 +61,36 @@ const useFormField = () => {
 		formDescriptionId: `${id}-form-item-description`,
 		formMessageId: `${id}-form-item-message`,
 		...fieldState,
-  }
+	};
-}
+};
 
 type FormItemContextValue = {
-  id: string
+	id: string;
-}
+};
 
 const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue
+	{} as FormItemContextValue,
-)
+);
 
 const FormItem = React.forwardRef<
 	HTMLDivElement,
 	React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => {
-  const id = React.useId()
+	const id = React.useId();
 
 	return (
 		<FormItemContext.Provider value={{ id }}>
 			<div ref={ref} className={cn("space-y-2", className)} {...props} />
 		</FormItemContext.Provider>
-  )
+	);
-})
+});
-FormItem.displayName = "FormItem"
+FormItem.displayName = "FormItem";
 
 const FormLabel = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
+	React.ComponentRef<typeof LabelPrimitive.Root>,
 	React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
 >(({ className, ...props }, ref) => {
-  const { error, formItemId } = useFormField()
+	const { error, formItemId } = useFormField();
 
 	return (
 		<Label
@@ -99,15 +99,16 @@ const FormLabel = React.forwardRef<
 			htmlFor={formItemId}
 			{...props}
 		/>
-  )
+	);
-})
+});
-FormLabel.displayName = "FormLabel"
+FormLabel.displayName = "FormLabel";
 
 const FormControl = React.forwardRef<
 	React.ElementRef<typeof Slot>,
 	React.ComponentPropsWithoutRef<typeof Slot>
 >(({ ...props }, ref) => {
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+	const { error, formItemId, formDescriptionId, formMessageId } =
+		useFormField();
 
 	return (
 		<Slot
@@ -121,15 +122,15 @@ const FormControl = React.forwardRef<
 			aria-invalid={!!error}
 			{...props}
 		/>
-  )
+	);
-})
+});
-FormControl.displayName = "FormControl"
+FormControl.displayName = "FormControl";
 
 const FormDescription = React.forwardRef<
 	HTMLParagraphElement,
 	React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => {
-  const { formDescriptionId } = useFormField()
+	const { formDescriptionId } = useFormField();
 
 	return (
 		<p
@@ -138,33 +139,36 @@ const FormDescription = React.forwardRef<
 			className={cn("text-[0.8rem] text-muted-foreground", className)}
 			{...props}
 		/>
-  )
+	);
-})
+});
-FormDescription.displayName = "FormDescription"
+FormDescription.displayName = "FormDescription";
 
 const FormMessage = React.forwardRef<
 	HTMLParagraphElement,
 	React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, children, ...props }, ref) => {
-  const { error, formMessageId } = useFormField()
+	const { error, formMessageId } = useFormField();
-  const body = error ? String(error?.message) : children
+	const body = error ? String(error?.message) : children;
 
 	if (!body) {
-    return null
+		return null;
 	}
 
 	return (
 		<p
 			ref={ref}
 			id={formMessageId}
-      className={cn("text-[0.8rem] font-medium text-destructive", className)}
+			className={cn(
+				"text-[0.8rem] font-medium text-destructive",
+				className,
+			)}
 			{...props}
 		>
 			{body}
 		</p>
-  )
+	);
-})
+});
-FormMessage.displayName = "FormMessage"
+FormMessage.displayName = "FormMessage";
 
 export {
 	useFormField,
@@ -175,4 +179,4 @@ export {
 	FormDescription,
 	FormMessage,
 	FormField,
-}
+};

frontend/components/ui/pagination.tsx

@@ -0,0 +1,117 @@
+import * as React from "react";
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { ButtonProps, buttonVariants } from "@/components/ui/button";
+
+const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
+	<nav
+		role="navigation"
+		aria-label="pagination"
+		className={cn("mx-auto flex w-full justify-center", className)}
+		{...props}
+	/>
+);
+Pagination.displayName = "Pagination";
+
+const PaginationContent = React.forwardRef<
+	HTMLUListElement,
+	React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+	<ul
+		ref={ref}
+		className={cn("flex flex-row items-center gap-1", className)}
+		{...props}
+	/>
+));
+PaginationContent.displayName = "PaginationContent";
+
+const PaginationItem = React.forwardRef<
+	HTMLLIElement,
+	React.ComponentProps<"li">
+>(({ className, ...props }, ref) => (
+	<li ref={ref} className={cn("", className)} {...props} />
+));
+PaginationItem.displayName = "PaginationItem";
+
+type PaginationLinkProps = {
+	isActive?: boolean;
+} & Pick<ButtonProps, "size"> &
+	React.ComponentProps<"a">;
+
+const PaginationLink = ({
+	className,
+	isActive,
+	size = "icon",
+	...props
+}: PaginationLinkProps) => (
+	<a
+		aria-current={isActive ? "page" : undefined}
+		className={cn(
+			buttonVariants({
+				variant: isActive ? "outline" : "ghost",
+				size,
+			}),
+			className,
+		)}
+		{...props}
+	/>
+);
+PaginationLink.displayName = "PaginationLink";
+
+const PaginationPrevious = ({
+	className,
+	...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+	<PaginationLink
+		aria-label="Go to previous page"
+		size="default"
+		className={cn("gap-1 pl-2.5", className)}
+		{...props}
+	>
+		<ChevronLeft className="h-4 w-4" />
+		<span>Previous</span>
+	</PaginationLink>
+);
+PaginationPrevious.displayName = "PaginationPrevious";
+
+const PaginationNext = ({
+	className,
+	...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+	<PaginationLink
+		aria-label="Go to next page"
+		size="default"
+		className={cn("gap-1 pr-2.5", className)}
+		{...props}
+	>
+		<span>Next</span>
+		<ChevronRight className="h-4 w-4" />
+	</PaginationLink>
+);
+PaginationNext.displayName = "PaginationNext";
+
+const PaginationEllipsis = ({
+	className,
+	...props
+}: React.ComponentProps<"span">) => (
+	<span
+		aria-hidden
+		className={cn("flex h-9 w-9 items-center justify-center", className)}
+		{...props}
+	>
+		<MoreHorizontal className="h-4 w-4" />
+		<span className="sr-only">More pages</span>
+	</span>
+);
+PaginationEllipsis.displayName = "PaginationEllipsis";
+
+export {
+	Pagination,
+	PaginationContent,
+	PaginationLink,
+	PaginationItem,
+	PaginationPrevious,
+	PaginationNext,
+	PaginationEllipsis,
+};

frontend/components/ui/tabs.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+
+import { cn } from "@/lib/utils";
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+	React.ComponentRef<typeof TabsPrimitive.List>,
+	React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+	<TabsPrimitive.List
+		ref={ref}
+		className={cn(
+			"inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+			className,
+		)}
+		{...props}
+	/>
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+	React.ComponentRef<typeof TabsPrimitive.Trigger>,
+	React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+	<TabsPrimitive.Trigger
+		ref={ref}
+		className={cn(
+			"inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+			className,
+		)}
+		{...props}
+	/>
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+	React.ComponentRef<typeof TabsPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+	<TabsPrimitive.Content
+		ref={ref}
+		className={cn(
+			"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+			className,
+		)}
+		{...props}
+	/>
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

frontend/hooks/use-api.tsx

@@ -10,7 +10,7 @@ export interface ApiResponse<T> {
 	data?: T;
 }
 
-async function request<T>(
+export async function request<T>(
 	url: string,
 	options: {
 		method?: "GET" | "POST" | "PATCH" | "DELETE";
@@ -81,14 +81,14 @@ async function mutationHandler<T, A>(
 }
 
 export function useApi<T>(
-	url: string,
+	endpoint: string,
 	config?: SWRConfiguration,
 	requiresAuth: boolean = true,
 	csrfToken?: boolean,
 ) {
 	const swr = useSWR<ApiResponse<T>>(
-		url,
+		endpoint,
-		() => fetcher(url, requiresAuth, csrfToken),
+		() => fetcher(endpoint, requiresAuth, csrfToken),
 		config,
 	);
 

frontend/hooks/use-media.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { useState } from "react";
+import useApiMutation, { useApi } from "./use-api";
+import IPaginatedResponse from "@/interfaces/IPaginatedResponse";
+import Media from "@/interfaces/Media";
+
+interface MediaResponse {
+	page: number;
+	limit: number;
+	totalPages: number;
+	items: [];
+}
+
+export default function useMedia(_limit: number = 20) {
+	const [page, setPage] = useState(1);
+	const [limit, setLimit] = useState(_limit);
+	const res = useApi<IPaginatedResponse<Media>>(
+		`/media?page=${page}&limit=${limit}`,
+	);
+	return {
+		...res,
+		setPage,
+		setLimit,
+	};
+}

frontend/interfaces/IPaginatedResponse.ts

@@ -0,0 +1,6 @@
+export default interface IPaginatedResponse<T> {
+	page: number;
+	limit: number;
+	totalPages: number;
+	items: T[];
+}

frontend/interfaces/Media.ts

@@ -0,0 +1,8 @@
+export default interface Media {
+	id: string;
+	url: string;
+	path: string;
+	alt: string;
+	size: number;
+	type: string;
+}

frontend/next.config.ts

@@ -14,6 +14,10 @@ const nextConfig: NextConfig = {
 				protocol: "https",
 				hostname: "avatar.vercel.sh",
 			},
+			{
+				protocol: "http",
+				hostname: "localhost",
+			},
 		],
 	},
 	env: {

frontend/package-lock.json

@@ -21,6 +21,7 @@
 				"@radix-ui/react-separator": "^1.1.1",
 				"@radix-ui/react-slot": "^1.1.1",
 				"@radix-ui/react-switch": "^1.1.2",
+				"@radix-ui/react-tabs": "^1.1.2",
 				"@radix-ui/react-tooltip": "^1.1.6",
 				"@schedule-x/events-service": "^2.14.3",
 				"@schedule-x/react": "^2.13.3",
@@ -36,6 +37,7 @@
 				"next-themes": "^0.4.4",
 				"react": "^19.0.0",
 				"react-dom": "^19.0.0",
+				"react-dropzone": "^14.3.5",
 				"react-hook-form": "^7.54.2",
 				"react-icons": "^5.4.0",
 				"swr": "^2.3.0",
@@ -1699,6 +1701,36 @@
 				}
 			}
 		},
+		"node_modules/@radix-ui/react-tabs": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.2.tgz",
+			"integrity": "sha512-9u/tQJMcC2aGq7KXpGivMm1mgq7oRJKXphDwdypPd/j21j/2znamPU8WkXgnhUaTrSFNIt8XhOyCAupg8/GbwQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/primitive": "1.1.1",
+				"@radix-ui/react-context": "1.1.1",
+				"@radix-ui/react-direction": "1.1.0",
+				"@radix-ui/react-id": "1.1.0",
+				"@radix-ui/react-presence": "1.1.2",
+				"@radix-ui/react-primitive": "2.0.1",
+				"@radix-ui/react-roving-focus": "1.1.1",
+				"@radix-ui/react-use-controllable-state": "1.1.0"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@radix-ui/react-tooltip": {
 			"version": "1.1.6",
 			"resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.1.6.tgz",
@@ -2520,6 +2552,15 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/attr-accept": {
+			"version": "2.2.5",
+			"resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.5.tgz",
+			"integrity": "sha512-0bDNnY/u6pPwHDMoF0FieU354oBi0a8rD9FcsLwzcGWbc8KS8KPIi7y+s13OlVY+gMWc/9xEMUgNE6Qm8ZllYQ==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=4"
+			}
+		},
 		"node_modules/available-typed-arrays": {
 			"version": "1.0.7",
 			"resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -3855,6 +3896,18 @@
 				"node": ">=16.0.0"
 			}
 		},
+		"node_modules/file-selector": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/file-selector/-/file-selector-2.1.2.tgz",
+			"integrity": "sha512-QgXo+mXTe8ljeqUFaX3QVHc5osSItJ/Km+xpocx0aSqWGMSCf6qYs/VnzZgS864Pjn5iceMRFigeAV7AfTlaig==",
+			"license": "MIT",
+			"dependencies": {
+				"tslib": "^2.7.0"
+			},
+			"engines": {
+				"node": ">= 12"
+			}
+		},
 		"node_modules/fill-range": {
 			"version": "7.1.1",
 			"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
@@ -4792,7 +4845,6 @@
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
 			"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/js-yaml": {
@@ -4947,7 +4999,6 @@
 			"version": "1.4.0",
 			"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
 			"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"js-tokens": "^3.0.0 || ^4.0.0"
@@ -5746,7 +5797,6 @@
 			"version": "15.8.1",
 			"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
 			"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"loose-envify": "^1.4.0",
@@ -5805,6 +5855,23 @@
 				"react": "^19.0.0"
 			}
 		},
+		"node_modules/react-dropzone": {
+			"version": "14.3.5",
+			"resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.3.5.tgz",
+			"integrity": "sha512-9nDUaEEpqZLOz5v5SUcFA0CjM4vq8YbqO0WRls+EYT7+DvxUdzDPKNCPLqGfj3YL9MsniCLCD4RFA6M95V6KMQ==",
+			"license": "MIT",
+			"dependencies": {
+				"attr-accept": "^2.2.4",
+				"file-selector": "^2.1.0",
+				"prop-types": "^15.8.1"
+			},
+			"engines": {
+				"node": ">= 10.13"
+			},
+			"peerDependencies": {
+				"react": ">= 16.8 || 18.0.0"
+			}
+		},
 		"node_modules/react-hook-form": {
 			"version": "7.54.2",
 			"resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.54.2.tgz",
@@ -5834,7 +5901,6 @@
 			"version": "16.13.1",
 			"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
 			"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/react-remove-scroll": {

frontend/package.json

@@ -22,6 +22,7 @@
 		"@radix-ui/react-separator": "^1.1.1",
 		"@radix-ui/react-slot": "^1.1.1",
 		"@radix-ui/react-switch": "^1.1.2",
+		"@radix-ui/react-tabs": "^1.1.2",
 		"@radix-ui/react-tooltip": "^1.1.6",
 		"@schedule-x/events-service": "^2.14.3",
 		"@schedule-x/react": "^2.13.3",
@@ -37,6 +38,7 @@
 		"next-themes": "^0.4.4",
 		"react": "^19.0.0",
 		"react-dom": "^19.0.0",
+		"react-dropzone": "^14.3.5",
 		"react-hook-form": "^7.54.2",
 		"react-icons": "^5.4.0",
 		"swr": "^2.3.0",

frontend/public/placeholder.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1200" fill="none"><rect width="1200" height="1200" fill="#EAEAEA" rx="3"/><g opacity=".5"><g opacity=".5"><path fill="#FAFAFA" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/></g><path stroke="url(#a)" stroke-width="2.418" d="M0-1.209h553.581" transform="scale(1 -1) rotate(45 1163.11 91.165)"/><path stroke="url(#b)" stroke-width="2.418" d="M404.846 598.671h391.726"/><path stroke="url(#c)" stroke-width="2.418" d="M599.5 795.742V404.017"/><path stroke="url(#d)" stroke-width="2.418" d="m795.717 796.597-391.441-391.44"/><path fill="#fff" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/><g clip-path="url(#e)"><path fill="#666" fill-rule="evenodd" d="M616.426 586.58h-31.434v16.176l3.553-3.554.531-.531h9.068l.074-.074 8.463-8.463h2.565l7.18 7.181V586.58Zm-15.715 14.654 3.698 3.699 1.283 1.282-2.565 2.565-1.282-1.283-5.2-5.199h-6.066l-5.514 5.514-.073.073v2.876a2.418 2.418 0 0 0 2.418 2.418h26.598a2.418 2.418 0 0 0 2.418-2.418v-8.317l-8.463-8.463-7.181 7.181-.071.072Zm-19.347 5.442v4.085a6.045 6.045 0 0 0 6.046 6.045h26.598a6.044 6.044 0 0 0 6.045-6.045v-7.108l1.356-1.355-1.282-1.283-.074-.073v-17.989h-38.689v23.43l-.146.146.146.147Z" clip-rule="evenodd"/></g><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/></g><defs><linearGradient id="a" x1="554.061" x2="-.48" y1=".083" y2=".087" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="796.912" x2="404.507" y1="599.963" y2="599.965" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="c" x1="600.792" x2="600.794" y1="403.677" y2="796.082" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="d" x1="404.85" x2="796.972" y1="403.903" y2="796.02" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><clipPath id="e"><path fill="#fff" d="M581.364 580.535h38.689v38.689h-38.689z"/></clipPath></defs></svg>