feat(workspaces): add workspace management page

src/App.tsx

@@ -7,6 +7,7 @@ import { WorkspaceProvider } from "./context/WorkspaceContext"
 import Auth from "./pages/Auth"
 import Profile from "./pages/Profile"
 import Terms from "./pages/Terms"
+import Workspaces from "./pages/Workspaces"
 
 const MainLayout = () => {
   return (
@@ -32,6 +33,7 @@ function App() {
               
               <Route element={<MainLayout />}>
                 <Route path="/profile" element={<Profile />} />
+                <Route path="/workspaces" element={<Workspaces />} />
               </Route>
             </Routes>
           </WorkspaceProvider>

src/api/workspaces.ts

@@ -1,42 +1,75 @@
-import { authFetch } from "./client"
+import { authFetch } from "./client";
 
 export interface Workspace {
-  id: string
-  name: string
-  [key: string]: any
+  id: string;
+  name: string;
+  description?: string;
+  owner?: string;
+  my_role?: 'owner' | 'admin' | 'member' | 'guest';
+  [key: string]: any;
 }
 
 export const fetchWorkspaces = async (): Promise<Workspace[]> => {
-  const response = await authFetch("/api/workspaces/")
+  const response = await authFetch("/api/workspaces/");
   
   if (!response.ok) {
-    throw new Error("Failed to fetch workspaces")
+    throw new Error("Failed to fetch workspaces");
   }
   
-  const data = await response.json()
-  // Handles paginated responses if the API returns { count, next, previous, results: [...] }
-  return data.results || data
-}
+  const data = await response.json();
+  return data.results || data;
+};
 
-export const createWorkspace = async (data: { name: string; description: string; members?: any[] }) => {
-  // 1. Only send name and description to the workspaces endpoint
+export const getWorkspace = async (id: string): Promise<Workspace> => {
+  const response = await authFetch(`/api/workspaces/${id}/`);
+  
+  if (!response.ok) {
+    throw new Error("Failed to fetch workspace details");
+  }
+  
+  return await response.json();
+};
+
+export const createWorkspace = async (data: { name: string; description: string; members?: any[] }): Promise<Workspace> => {
   const payload = {
     name: data.name,
     description: data.description,
+    members: data.members, 
   };
 
   const response = await authFetch('/api/workspaces/', {
     method: 'POST',
-    headers: {
-      'Content-Type': 'application/json', // CRITICAL for DRF to parse the string correctly
-    },
     body: JSON.stringify(payload),
   });
 
   if (!response.ok) {
     const errorData = await response.json();
-    throw new Error(errorData.error || 'Failed to create workspace');
+    throw new Error(errorData.error || JSON.stringify(errorData) || 'Failed to create workspace');
+  }
+  
+  return await response.json();
+};
+
+export const updateWorkspace = async (id: string, data: { name?: string; description?: string }): Promise<Workspace> => {
+  const response = await authFetch(`/api/workspaces/${id}/`, {
+    method: 'PATCH', // Using PATCH as defined in API docs for partial updates
+    body: JSON.stringify(data),
+  });
+
+  if (!response.ok) {
+    const errorData = await response.json();
+    throw new Error(errorData.error || JSON.stringify(errorData) || 'Failed to update workspace');
+  }
+  
+  return await response.json();
+};
+
+export const deleteWorkspace = async (id: string): Promise<void> => {
+  const response = await authFetch(`/api/workspaces/${id}/`, {
+    method: 'DELETE',
+  });
+
+  if (!response.ok) {
+    throw new Error('Failed to delete workspace');
   }
-  const newWorkspace = await response.json();
-  return newWorkspace;
 };

src/components/WorkspaceSelector.tsx

@@ -1,13 +1,15 @@
 import React, { useState, useRef, useEffect } from "react";
 import { useWorkspace } from "../context/WorkspaceContext";
 import { useTranslation } from "../hooks/useTranslation";
-import { Check, ChevronDown, Plus, Briefcase } from "lucide-react";
+import { Check, ChevronDown, Plus, Briefcase, Settings } from "lucide-react";
 import { CreateWorkspaceModal } from "./CreateWorkspaceModal"; // Adjust path if needed
+import { useNavigate } from "react-router-dom";
 
 export const WorkspaceSelector: React.FC = () => {
   const [isOpen, setIsOpen] = useState(false);
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
+  const navigate = useNavigate()
   
   const { workspaces, activeWorkspace, setActiveWorkspace, addWorkspace } = useWorkspace();
   const { t, lang } = useTranslation();
@@ -34,7 +36,7 @@ export const WorkspaceSelector: React.FC = () => {
       <button
         type="button"
         onClick={() => setIsOpen(!isOpen)}
-        className="flex items-center gap-2 px-3 py-2 text-sm font-medium text-slate-700 dark:text-slate-200 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
+        className="flex items-center gap-2 px-3 py-2 text-base font-medium text-slate-700 dark:text-slate-200 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
       >
         <div className="w-6 h-6 flex items-center justify-center bg-blue-100 dark:bg-blue-900/50 text-blue-600 dark:text-blue-400 rounded-md">
           {activeWorkspace?.name?.charAt(0) || <Briefcase className="w-4 h-4" />}
@@ -93,6 +95,16 @@ export const WorkspaceSelector: React.FC = () => {
             <Plus className="w-4 h-4" />
             {t.workspace?.createNew || "Create New Workspace"}
           </button>
+          <button
+            onClick={() => {
+              setIsOpen(false);
+              navigate('/workspaces');
+            }}
+            className="flex w-full items-center gap-3 px-4 py-2.5 text-sm font-medium text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
+          >
+            <Settings className="h-4 w-4" />
+            { t.workspace?.manage || "Manage Workspaces" }
+          </button>
         </div>
       )}
 

src/context/AppContext.tsx

@@ -1,5 +1,4 @@
-// src/context/AppContext.tsx
-import { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+import { createContext, useContext, useState, useEffect, type ReactNode } from 'react';
 import { api } from '../api';
 
 interface User {

src/index.css

@@ -19,7 +19,6 @@
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
 }
 
-/* Automatically apply Vazirmatn font when language is Persian */
 :lang(fa) {
   font-family: "Vazirmatn", system-ui, Avenir, Helvetica, Arial, sans-serif;
 }

src/locales/en.ts

@@ -104,8 +104,9 @@ export const en = {
   darkMode: "Dark Mode",
 
   workspace: {
-    title: "Workspaces",
+    title: "Workspace Management",
     createNew: "Create New Workspace",
+    manage: "Manage Workspaces",
     nameLabel: "Workspace Name",
     namePlaceholder: "Enter workspace name",
     descriptionLabel: "Description",
@@ -121,7 +122,16 @@ export const en = {
     creating: "Creating...",
     submit: "Create",
     cancel: "Cancel",
-  },
+    loading: "Loading...",
+    confirmDelete: "Are you sure you want to delete this workspace?",
+    deleteError: "Error deleting workspace",
+    subtitle: "Manage your workspaces",
+    noDescription: "No description",
+    view: "View",
+    edit: "Edit",
+    delete: "Delete",
+    emptyState: "You are not a member of any workspace."
+  }
 
 
 }

src/locales/fa.ts

@@ -105,8 +105,9 @@ export const fa = {
   darkMode: "حالت تاریک",
 
   workspace: {
-    title: "فضاهای کاری",
+    title: "مدیریت فضاهای کاری",
     createNew: "ایجاد فضای کاری جدید",
+    manage: "مدیریت فضاهای کاری",
     nameLabel: "نام فضای کاری",
     namePlaceholder: "نام فضای کاری را وارد کنید",
     descriptionLabel: "توضیحات",
@@ -122,6 +123,15 @@ export const fa = {
     creating: "در حال ایجاد...",
     submit: "ایجاد",
     cancel: "انصراف",
+    loading: "در حال بارگذاری...",
+    confirmDelete: "آیا از حذف این فضای کاری اطمینان دارید؟",
+    deleteError: "خطا در حذف فضای کاری",
+    subtitle: "فضاهای کاری خود را مدیریت کنید",
+    noDescription: "بدون توضیحات",
+    view: "مشاهده",
+    edit: "ویرایش",
+    delete: "حذف",
+    emptyState: "شما در هیچ فضای کاری عضو نیستید."
   },
 
 

src/main.tsx

@@ -1,10 +1,13 @@
-import React from "react"
-import ReactDOM from "react-dom/client"
-import App from "./App.tsx"
-import "./index.css"
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import { AppProvider } from './context/AppContext';
+import './index.css';
 
-ReactDOM.createRoot(document.getElementById("root")!).render(
+ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
+    <AppProvider>
       <App />
+    </AppProvider>
   </React.StrictMode>
-)
+);

src/pages/Workspaces.tsx

@@ -0,0 +1,123 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Plus, Edit2, Trash2, Eye } from 'lucide-react';
+import { fetchWorkspaces, deleteWorkspace, type Workspace } from '../api/workspaces';
+import { useAppContext } from '../context/AppContext';
+import { useTranslation } from '../hooks/useTranslation';
+
+export default function Workspaces() {
+  const [workspaces, setWorkspaces] = useState<Workspace[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const navigate = useNavigate();
+  const { user } = useAppContext();
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    loadWorkspaces();
+  }, []);
+
+  const loadWorkspaces = async () => {
+    try {
+      setIsLoading(true);
+      const data = await fetchWorkspaces();
+      setWorkspaces(data);
+    } catch (error) {
+      console.error('Error fetching workspaces', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleDelete = async (id: string) => {
+    if (!window.confirm(t.workspace?.confirmDelete)) return;
+    
+    try {
+      await deleteWorkspace(id);
+      setWorkspaces(workspaces.filter((w) => w.id !== id));
+    } catch (error) {
+      console.error('Error deleting workspace', error);
+      alert(t.workspace?.deleteError);
+    }
+  };
+
+  if (isLoading) {
+    return <div className="p-8 text-center text-slate-500">{t.workspace?.loading}</div>;
+  }
+
+  return (
+    <div className="max-w-5xl mx-auto p-6">
+      <div className="flex justify-between items-center mb-8">
+        <div>
+          <h1 className="text-2xl font-bold text-slate-900 dark:text-white">{t.workspace?.title}</h1>
+          <p className="text-slate-500 dark:text-slate-400 mt-1">{t.workspace?.subtitle}</p>
+        </div>
+        <button
+          onClick={() => navigate('/workspaces/create')}
+          className="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-colors font-medium"
+        >
+          <Plus className="h-5 w-5" />
+          {t.workspace?.createNew}
+        </button>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {workspaces.map((workspace) => {
+          const isOwner = workspace.owner === user?.id || workspace.my_role === 'owner';
+          const isAdmin = workspace.my_role === 'admin' || isOwner;
+
+          return (
+            <div 
+              key={workspace.id} 
+              className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-xl p-5 shadow-sm flex flex-col"
+            >
+              <div className="flex-1">
+                <h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-2">
+                  {workspace.name}
+                </h3>
+                <p className="text-sm text-slate-500 dark:text-slate-400 line-clamp-2">
+                  {workspace.description || t.workspace?.noDescription}
+                </p>
+              </div>
+
+              <div className="mt-6 flex items-center justify-end gap-2 border-t border-slate-100 dark:border-slate-800 pt-4">
+                <button
+                  onClick={() => navigate(`/workspaces/${workspace.id}`)}
+                  className="p-2 text-slate-500 hover:text-blue-600 dark:hover:text-blue-400 bg-slate-50 dark:bg-slate-800 rounded-lg transition-colors"
+                  title={t.workspace?.view}
+                >
+                  <Eye className="h-4 w-4" />
+                </button>
+
+                {isAdmin && (
+                  <button
+                    onClick={() => navigate(`/workspaces/${workspace.id}/edit`)}
+                    className="p-2 text-slate-500 hover:text-emerald-600 dark:hover:text-emerald-400 bg-slate-50 dark:bg-slate-800 rounded-lg transition-colors"
+                    title={t.workspace?.edit}
+                  >
+                    <Edit2 className="h-4 w-4" />
+                  </button>
+                )}
+
+                {isOwner && (
+                  <button
+                    onClick={() => handleDelete(workspace.id)}
+                    className="p-2 text-slate-500 hover:text-red-600 dark:hover:text-red-400 bg-slate-50 dark:bg-slate-800 rounded-lg transition-colors"
+                    title={t.workspace?.delete}
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </button>
+                )}
+              </div>
+            </div>
+          );
+        })}
+
+        {workspaces.length === 0 && (
+          <div className="col-span-full py-12 text-center border-2 border-dashed border-slate-200 dark:border-slate-800 rounded-xl">
+            <p className="text-slate-500 dark:text-slate-400">{t.workspace?.emptyState}</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}