feat: add workspace management features with modals for create, edit, and delete

Author: dmcg310

frontend/package-lock.json

@@ -13,6 +13,7 @@
     "axios": "^1.13.4",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "react-icons": "^5.5.0",
     "react-router-dom": "^7.13.0"
   },
   "devDependencies": {

frontend/package.json

@@ -3,6 +3,7 @@ import {AuthProvider, useAuth} from './context/AuthContext.tsx';
 import LoginPage from './pages/LoginPage';
 import RegisterPage from './pages/RegisterPage';
 import DashboardPage from './pages/DashboardPage';
+import WorkspacePage from "./pages/WorkspacePage.tsx";
 import {ReactNode} from 'react';
 
 interface RouteGuardProps {
@@ -45,6 +46,7 @@ function AppRoutes() {
             <Route path="/login" element={<PublicRoute><LoginPage/></PublicRoute>}/>
             <Route path="/register" element={<PublicRoute><RegisterPage/></PublicRoute>}/>
             <Route path="/dashboard" element={<ProtectedRoute><DashboardPage/></ProtectedRoute>}/>
+            <Route path="/workspace/:workspaceId" element={<ProtectedRoute><WorkspacePage/></ProtectedRoute>}/>
             <Route path="/" element={<Navigate to="/dashboard"/>}/>
         </Routes>
     );

frontend/src/App.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import Modal from './Modal';
+
+interface DeleteConfirmModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onConfirm: () => void;
+    title: string;
+    message: string;
+    loading?: boolean;
+}
+
+const DeleteConfirmModal: React.FC<DeleteConfirmModalProps> = ({
+                                                                   isOpen,
+                                                                   onClose,
+                                                                   onConfirm,
+                                                                   title,
+                                                                   message,
+                                                                   loading = false
+                                                               }) => {
+    return (
+        <Modal isOpen={isOpen} onClose={onClose} title={title}>
+            <div className="space-y-4">
+                <p className="text-neutral-600">{message}</p>
+                <div className="flex justify-end gap-3 pt-4">
+                    <button
+                        onClick={onClose}
+                        disabled={loading}
+                        className="px-4 py-2 text-md font-medium text-neutral-700 hover:bg-neutral-100 rounded-lg transition-colors disabled:opacity-50 cursor-pointer"
+                    >
+                        Cancel
+                    </button>
+                    <button
+                        onClick={onConfirm}
+                        disabled={loading}
+                        className="px-4 py-2 text-md font-medium text-white bg-error-600 hover:bg-error-700 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"
+                    >
+                        {loading ? 'Deleting...' : 'Delete'}
+                    </button>
+                </div>
+            </div>
+        </Modal>
+    );
+};
+
+export default DeleteConfirmModal;

frontend/src/components/common/DeleteConfirmModal.tsx

@@ -0,0 +1,58 @@
+import React, {ReactNode, useEffect} from 'react';
+import {IoClose} from "react-icons/io5";
+
+interface ModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title: string;
+    children: ReactNode;
+}
+
+const Modal: React.FC<ModalProps> = ({isOpen, onClose, title, children}) => {
+    useEffect(() => {
+        const handleEscape = (e: KeyboardEvent) => {
+            if (e.key === 'Escape') {
+                onClose();
+            }
+        };
+
+        if (isOpen) {
+            document.addEventListener('keydown', handleEscape);
+            document.body.style.overflow = 'hidden';
+        }
+
+        return () => {
+            document.removeEventListener('keydown', handleEscape);
+            document.body.style.overflow = 'unset';
+        };
+    }, [isOpen, onClose]);
+
+    if (!isOpen) {
+        return null;
+    }
+
+    return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center">
+            <div
+                className="absolute inset-0 bg-neutral-900/50"
+                onClick={onClose}
+            />
+            <div className="relative bg-white rounded-xl shadow-lg max-w-md w-full mx-4 max-h-[90vh] overflow-y-auto">
+                <div className="flex items-center justify-between px-6 py-4 border-b border-neutral-200">
+                    <h2 className="text-lg font-semibold text-neutral-900">{title}</h2>
+                    <button
+                        onClick={onClose}
+                        className="text-neutral-400 hover:text-neutral-600 transition-colors cursor-pointer"
+                    >
+                        <IoClose size={30}/>
+                    </button>
+                </div>
+                <div className="p-6">
+                    {children}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Modal;

frontend/src/components/common/Modal.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import type {Workspace} from '@/types';
+import {FaEdit, FaFolder, FaUser} from "react-icons/fa";
+import {MdDeleteForever} from "react-icons/md";
+
+interface WorkspaceCardProps {
+    workspace: Workspace;
+    onClick: () => void;
+    onEdit: () => void;
+    onDelete: () => void;
+}
+
+const WorkspaceCard: React.FC<WorkspaceCardProps> = ({workspace, onClick, onEdit, onDelete}) => {
+    return (
+        <div
+            className="bg-white rounded-xl shadow-sm border border-neutral-200 p-6 hover:shadow-md hover:border-primary-200 transition-all cursor-pointer group"
+            onClick={onClick}
+        >
+            <div className="flex justify-between items-start mb-3">
+                <h3 className="text-lg font-semibold text-neutral-900 group-hover:text-primary-600 transition-colors">
+                    {workspace.name}
+                </h3>
+                <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                    <button
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            onEdit();
+                        }}
+                        className="p-1.5 text-neutral-400 hover:text-primary-600 hover:bg-primary-50 rounded-lg transition-colors cursor-pointer"
+                        title="Edit workspace"
+                    >
+                        <FaEdit size={20}/>
+                    </button>
+                    <button
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            onDelete();
+                        }}
+                        className="p-1.5 text-neutral-400 hover:text-error-600 hover:bg-error-50 rounded-lg transition-colors cursor-pointer"
+                        title="Delete workspace"
+                    >
+                        <MdDeleteForever size={20}/>
+                    </button>
+                </div>
+            </div>
+
+            {workspace.description && (
+                <p className="text-md text-neutral-600 mb-4 line-clamp-2">
+                    {workspace.description}
+                </p>
+            )}
+
+            <div className="flex items-center gap-4 text-sm text-neutral-500">
+                <div className="flex items-center gap-1.5">
+                    <FaFolder size={15}/>
+                    <span>{workspace.folderCount} folders</span>
+                </div>
+                <div className="flex items-center gap-1.5">
+                    <FaUser size={15}/>
+                    <span>{workspace.memberCount} members</span>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default WorkspaceCard;

frontend/src/components/workspace/WorkspaceCard.tsx

@@ -0,0 +1,110 @@
+import React, {useEffect, useState} from 'react';
+import type {Workspace, WorkspaceRequest} from '@/types';
+
+interface WorkspaceFormProps {
+    workspace?: Workspace | null;
+    onSubmit: (data: WorkspaceRequest) => Promise<void>;
+    onCancel: () => void;
+    loading?: boolean;
+}
+
+const WorkspaceForm: React.FC<WorkspaceFormProps> = ({workspace, onSubmit, onCancel, loading = false}) => {
+    const [name, setName] = useState('');
+    const [description, setDescription] = useState('');
+    const [error, setError] = useState('');
+
+    useEffect(() => {
+        if (workspace) {
+            setName(workspace.name);
+            setDescription(workspace.description || '');
+        } else {
+            setName('');
+            setDescription('');
+        }
+    }, [workspace]);
+
+    const handleSubmit = async (e: React.SubmitEvent) => {
+        e.preventDefault();
+
+        setError('');
+
+        if (!name.trim()) {
+            setError('Name is required');
+            return;
+        }
+
+        try {
+            await onSubmit({
+                name: name.trim(),
+                description: description.trim() || undefined
+            });
+        } catch (err: unknown) {
+            if (err && typeof err === 'object' && 'response' in err) {
+                const axiosError = err as { response?: { data?: { message?: string } } };
+                setError(axiosError.response?.data?.message || 'An error occurred');
+            } else {
+                setError('An error occurred');
+            }
+        }
+    };
+
+    return (
+        <form onSubmit={handleSubmit} className="space-y-4">
+            {error && (
+                <div className="bg-error-50 text-error-700 px-4 py-3 rounded-lg text-md">
+                    {error}
+                </div>
+            )}
+
+            <div>
+                <label htmlFor="name" className="block text-md font-medium text-neutral-700 mb-2">
+                    Name
+                </label>
+                <input
+                    id="name"
+                    type="text"
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                    className="w-full px-4 py-2 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none transition-colors"
+                    placeholder="My API Project"
+                    required
+                    autoFocus
+                />
+            </div>
+
+            <div>
+                <label htmlFor="description" className="block text-md font-medium text-neutral-700 mb-2">
+                    Description
+                </label>
+                <textarea
+                    id="description"
+                    value={description}
+                    onChange={(e) => setDescription(e.target.value)}
+                    rows={3}
+                    className="w-full px-4 py-2 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none transition-colors resize-none"
+                    placeholder="Optional description for this workspace..."
+                />
+            </div>
+
+            <div className="flex justify-end gap-3 pt-4">
+                <button
+                    type="button"
+                    onClick={onCancel}
+                    disabled={loading}
+                    className="px-4 py-2 text-md font-medium text-neutral-700 hover:bg-neutral-100 rounded-lg transition-colors disabled:opacity-50 cursor-pointer"
+                >
+                    Cancel
+                </button>
+                <button
+                    type="submit"
+                    disabled={loading}
+                    className="px-4 py-2 text-md font-medium text-white bg-primary-600 hover:bg-primary-700 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"
+                >
+                    {loading ? 'Saving...' : workspace ? 'Update' : 'Create'}
+                </button>
+            </div>
+        </form>
+    );
+};
+
+export default WorkspaceForm;