feat(workspaces): add FilterBar component and search/ordering to Workspaces.tsx

src/api/workspaces.ts

@@ -1,3 +1,4 @@
+// src/api/workspaces.ts
 import { authFetch } from "./client";
 
 export interface Workspace {
@@ -9,8 +10,10 @@ export interface Workspace {
   [key: string]: any;
 }
 
-export const fetchWorkspaces = async (): Promise<Workspace[]> => {
+export const fetchWorkspaces = async (params?: Record<string, string>): Promise<Workspace[]> => {
-  const response = await authFetch("/api/workspaces/");
+  const query = params ? new URLSearchParams(params).toString() : '';
+  const url = `/api/workspaces/${query ? `?${query}` : ''}`;
+  const response = await authFetch(url);
   
   if (!response.ok) {
     throw new Error("Failed to fetch workspaces");
@@ -22,37 +25,26 @@ export const fetchWorkspaces = async (): Promise<Workspace[]> => {
 
 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");
-  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',
-    body: JSON.stringify(payload),
+    body: JSON.stringify(data),
   });
 
   if (!response.ok) {
     const errorData = await response.json();
     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
+    method: 'PATCH',
     body: JSON.stringify(data),
   });
 
@@ -60,7 +52,6 @@ export const updateWorkspace = async (id: string, data: { name?: string; descrip
     const errorData = await response.json();
     throw new Error(errorData.error || JSON.stringify(errorData) || 'Failed to update workspace');
   }
-  
   return await response.json();
 };
 

src/components/FilterBar.tsx

@@ -0,0 +1,44 @@
+// src/components/FilterBar.tsx
+import { Search, ArrowUpDown } from 'lucide-react';
+import { useTranslation } from '../hooks/useTranslation';
+
+interface FilterBarProps {
+  searchQuery: string;
+  setSearchQuery: (val: string) => void;
+  ordering: string;
+  setOrdering: (val: string) => void;
+  orderingOptions: { value: string; label: string }[];
+}
+
+export default function FilterBar({ searchQuery, setSearchQuery, ordering, setOrdering, orderingOptions }: FilterBarProps) {
+  const { t } = useTranslation();
+  
+  return (
+    <div className="flex flex-col sm:flex-row gap-4 mb-6">
+      <div className="relative flex-1">
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-slate-400" />
+        <input
+          type="text"
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          placeholder={t.workspace?.searchPlaceholder || 'Search...'}
+          className="w-full pl-10 pr-4 py-2.5 rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 text-slate-900 dark:text-white outline-none focus:ring-2 focus:ring-blue-500 transition-shadow"
+        />
+      </div>
+      <div className="flex items-center gap-2">
+        <ArrowUpDown className="h-5 w-5 text-slate-400 hidden sm:block" />
+        <select
+          value={ordering}
+          onChange={(e) => setOrdering(e.target.value)}
+          className="w-full sm:w-auto py-2.5 pl-3 pr-8 rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 text-slate-900 dark:text-white outline-none focus:ring-2 focus:ring-blue-500 transition-shadow appearance-none"
+        >
+          {orderingOptions.map((opt) => (
+            <option key={opt.value} value={opt.value}>
+              {opt.label}
+            </option>
+          ))}
+        </select>
+      </div>
+    </div>
+  );
+}

src/locales/en.ts

@@ -130,8 +130,33 @@ export const en = {
     view: "View",
     edit: "Edit",
     delete: "Delete",
-    emptyState: "You are not a member of any workspace."
+    emptyState: "You are not a member of any workspace.",
-  }
+    createTitle: "Create Workspace",
-
+    editTitle: "Edit Workspace",
-
+    detailTitle: "Workspace Details",
+    save: "Save",
+    create: "Create",
+    back: "Back to Workspaces",
+    roleLabel: "Your Role",
+    roles: {
+      owner: "Owner",
+      admin: "Admin",
+      member: "Member",
+      guest: "Guest",
+    },
+    createdSuccess: "Workspace created successfully",
+    updatedSuccess: "Workspace updated successfully",
+    fetchError: "Failed to load workspace data",
+    remove: "Remove",
+    noUsersFound: "No user found",
+    selectRole: "Select Role",
+    add: "Add",
+    orderByUpdatedDesc: "Recently Updated",
+    orderByCreatedDesc: "Newest First",
+    orderByCreatedAsc: "Oldest First",
+    orderByName: "Name (A-Z)",
+    deleteSuccess: "Workspace deleted successfully",
+    deleteTitle: "Delete Workspace",
+    deleteWarning: "To confirm deletion, please type the workspace name:",
+  },
 }

src/locales/fa.ts

@@ -131,8 +131,33 @@ export const fa = {
     view: "مشاهده",
     edit: "ویرایش",
     delete: "حذف",
-    emptyState: "شما در هیچ فضای کاری عضو نیستید."
+    emptyState: "شما در هیچ فضای کاری عضو نیستید.",
+    createTitle: "ایجاد فضای کاری",
+    editTitle: "ویرایش فضای کاری",
+    detailTitle: "جزئیات فضای کاری",
+    save: "ذخیره",
+    create: "ایجاد",
+    back: "بازگشت به فضاهای کاری",
+    roleLabel: "نقش شما",
+    roles: {
+      owner: "مالک",
+      admin: "مدیر",
+      member: "عضو",
+      guest: "مهمان",
+    },
+    createdSuccess: "فضای کاری با موفقیت ایجاد شد",
+    updatedSuccess: "فضای کاری با موفقیت ویرایش شد",
+    fetchError: "خطا در دریافت اطلاعات فضای کاری",
+    remove: "حذف",
+    noUsersFound: "کاربری یافت نشد",
+    selectRole: "انتخاب نقش",
+    add: "افزودن",
+    orderByUpdatedDesc: "آخرین ویرایش",
+    orderByCreatedDesc: "جدیدترین",
+    orderByCreatedAsc: "قدیمی‌ترین",
+    orderByName: "نام (الف تا ی)",
+    deleteSuccess: "فضای کاری با موفقیت حذف شد",
+    deleteTitle: "حذف فضای کاری",
+    deleteWarning: "برای تأیید حذف، لطفاً نام فضای کاری را وارد کنید:",
   },
-
-
 }

src/pages/Workspaces.tsx

@@ -1,49 +1,88 @@
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Plus, Edit2, Trash2, Eye } from 'lucide-react';
+import { toast } from 'sonner';
 import { fetchWorkspaces, deleteWorkspace, type Workspace } from '../api/workspaces';
 import { useAppContext } from '../context/AppContext';
 import { useTranslation } from '../hooks/useTranslation';
+import FilterBar from '../components/FilterBar';
+
+type WorkspaceRole = "owner" | "admin" | "member" | "guest";
+
+const RoleBadge = ({ role }: { role?: WorkspaceRole }) => {
+  const { t } = useTranslation();
+  if (!role) return null;
+  
+  const styles: Record<string, string> = {
+    owner: 'bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-400',
+    admin: 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-400',
+    member: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-400',
+    guest: 'bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-400',
+  };
+
+  return (
+    <span className={`px-2.5 py-1 rounded-full text-xs font-semibold ${styles[role] || styles.guest}`}>
+      {role ? t.workspace?.roles[role] : "-"}
+    </span>
+  );
+};
 
 export default function Workspaces() {
   const [workspaces, setWorkspaces] = useState<Workspace[]>([]);
   const [isLoading, setIsLoading] = useState(true);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [ordering, setOrdering] = useState('-updated_at');
+  
+  const [deleteModal, setDeleteModal] = useState<{isOpen: boolean; workspace: Workspace | null}>({isOpen: false, workspace: null});
+  const [deleteInput, setDeleteInput] = useState('');
+
   const navigate = useNavigate();
   const { user } = useAppContext();
   const { t } = useTranslation();
 
+  const orderingOptions = [
+    { value: '-updated_at', label: t.workspace?.orderByUpdatedDesc || 'Recently Updated' },
+    { value: '-created_at', label: t.workspace?.orderByCreatedDesc || 'Newest First' },
+    { value: 'created_at', label: t.workspace?.orderByCreatedAsc || 'Oldest First' },
+    { value: 'name', label: t.workspace?.orderByName || 'Name (A-Z)' },
+  ];
+
   useEffect(() => {
-    loadWorkspaces();
+    const timer = setTimeout(() => {
-  }, []);
+      loadWorkspaces();
+    }, 400);
+    return () => clearTimeout(timer);
+  }, [searchQuery, ordering]);
 
   const loadWorkspaces = async () => {
     try {
       setIsLoading(true);
-      const data = await fetchWorkspaces();
+      const params: Record<string, string> = {};
+      if (searchQuery) params.search = searchQuery;
+      if (ordering) params.ordering = ordering;
+      
+      const data = await fetchWorkspaces(params);
       setWorkspaces(data);
     } catch (error) {
-      console.error('Error fetching workspaces', error);
+      toast.error(t.workspace?.fetchError || 'Error fetching workspaces');
     } finally {
       setIsLoading(false);
     }
   };
 
-  const handleDelete = async (id: string) => {
+  const confirmDelete = async () => {
-    if (!window.confirm(t.workspace?.confirmDelete)) return;
+    if (!deleteModal.workspace) return;
-    
     try {
-      await deleteWorkspace(id);
+      await deleteWorkspace(deleteModal.workspace.id);
-      setWorkspaces(workspaces.filter((w) => w.id !== id));
+      setWorkspaces(workspaces.filter((w) => w.id !== deleteModal.workspace!.id));
+      toast.success(t.workspace?.deleteSuccess || 'Workspace deleted successfully');
+      setDeleteModal({ isOpen: false, workspace: null });
+      setDeleteInput('');
     } catch (error) {
-      console.error('Error deleting workspace', error);
+      toast.error(t.workspace?.deleteError || 'Failed to delete workspace');
-      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">
@@ -53,71 +92,121 @@ export default function Workspaces() {
         </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"
+          className="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2.5 rounded-xl transition-colors font-medium shadow-sm"
         >
           <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">
+      <FilterBar 
-        {workspaces.map((workspace) => {
+        searchQuery={searchQuery}
-          const isOwner = workspace.owner === user?.id || workspace.my_role === 'owner';
+        setSearchQuery={setSearchQuery}
-          const isAdmin = workspace.my_role === 'admin' || isOwner;
+        ordering={ordering}
+        setOrdering={setOrdering}
+        orderingOptions={orderingOptions}
+      />
 
-          return (
+      {isLoading ? (
-            <div 
+        <div className="p-12 flex justify-center text-slate-500">
-              key={workspace.id} 
+           <div className="animate-pulse">{t.workspace?.loading || 'Loading...'}</div>
-              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>
-            >
+      ) : (
-              <div className="flex-1">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
-                <h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-2">
+          {workspaces.map((workspace) => {
-                  {workspace.name}
+            const isOwner = workspace.owner === user?.id || workspace.my_role === 'owner';
-                </h3>
+            const isAdmin = workspace.my_role === 'admin' || isOwner;
-                <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">
+            return (
-                <button
+              <div 
-                  onClick={() => navigate(`/workspaces/${workspace.id}`)}
+                key={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"
+                className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-2xl p-5 shadow-sm hover:shadow-md transition-shadow flex flex-col"
-                  title={t.workspace?.view}
+              >
-                >
+                <div className="flex-1">
-                  <Eye className="h-4 w-4" />
+                  <div className="flex justify-between items-start mb-3 gap-2">
-                </button>
+                    <h3 className="text-lg font-bold text-slate-900 dark:text-white line-clamp-1">
+                      {workspace.name}
+                    </h3>
+                    <RoleBadge role={workspace.my_role} />
+                  </div>
+                  <p className="text-sm text-slate-500 dark:text-slate-400 line-clamp-2">
+                    {workspace.description || t.workspace?.noDescription}
+                  </p>
+                </div>
 
-                {isAdmin && (
+                <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}/edit`)}
+                    onClick={() => navigate(`/workspaces/${workspace.id}`)}
-                    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"
+                    className="p-2.5 text-slate-500 hover:text-blue-600 dark:hover:text-blue-400 bg-slate-50 dark:bg-slate-800 rounded-xl transition-colors"
-                    title={t.workspace?.edit}
+                    title={t.workspace?.view}
                   >
-                    <Edit2 className="h-4 w-4" />
+                    <Eye className="h-4 w-4" />
                   </button>
-                )}
 
-                {isOwner && (
+                  {isAdmin && (
-                  <button
+                    <button
-                    onClick={() => handleDelete(workspace.id)}
+                      onClick={() => navigate(`/workspaces/${workspace.id}/edit`)}
-                    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"
+                      className="p-2.5 text-slate-500 hover:text-emerald-600 dark:hover:text-emerald-400 bg-slate-50 dark:bg-slate-800 rounded-xl transition-colors"
-                    title={t.workspace?.delete}
+                      title={t.workspace?.edit}
-                  >
+                    >
-                    <Trash2 className="h-4 w-4" />
+                      <Edit2 className="h-4 w-4" />
-                  </button>
+                    </button>
-                )}
+                  )}
+
+                  {isOwner && (
+                    <button
+                      onClick={() => setDeleteModal({ isOpen: true, workspace })}
+                      className="p-2.5 text-slate-500 hover:text-red-600 dark:hover:text-red-400 bg-slate-50 dark:bg-slate-800 rounded-xl transition-colors"
+                      title={t.workspace?.delete}
+                    >
+                      <Trash2 className="h-4 w-4" />
+                    </button>
+                  )}
+                </div>
               </div>
+            );
+          })}
+
+          {workspaces.length === 0 && (
+            <div className="col-span-full py-16 flex flex-col items-center justify-center border-2 border-dashed border-slate-200 dark:border-slate-800 rounded-2xl">
+              <p className="text-slate-500 dark:text-slate-400 font-medium">{t.workspace?.emptyState || 'No workspaces found'}</p>
             </div>
-          );
+          )}
-        })}
+        </div>
+      )}
 
-        {workspaces.length === 0 && (
+      {deleteModal.isOpen && deleteModal.workspace && (
-          <div className="col-span-full py-12 text-center border-2 border-dashed border-slate-200 dark:border-slate-800 rounded-xl">
+        <div className="fixed inset-0 bg-slate-900/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
-            <p className="text-slate-500 dark:text-slate-400">{t.workspace?.emptyState}</p>
+          <div className="bg-white dark:bg-slate-900 rounded-2xl p-6 max-w-md w-full shadow-2xl border border-slate-200 dark:border-slate-800">
+            <h3 className="text-xl font-bold text-red-600 mb-2">{t.workspace?.deleteTitle || 'Delete Workspace'}</h3>
+            <p className="text-slate-600 dark:text-slate-400 mb-5 text-sm leading-relaxed">
+              {t.workspace?.deleteWarning || 'To confirm deletion, please type the workspace name:'} <strong className="text-slate-900 dark:text-white select-all">{deleteModal.workspace.name}</strong>
+            </p>
+            <input
+              type="text"
+              value={deleteInput}
+              onChange={(e) => setDeleteInput(e.target.value)}
+              placeholder={deleteModal.workspace.name}
+              className="w-full border rounded-xl p-3 mb-6 bg-slate-50 dark:bg-slate-800 border-slate-300 dark:border-slate-700 text-slate-900 dark:text-white outline-none focus:ring-2 focus:ring-red-500 transition-shadow"
+            />
+            <div className="flex justify-end gap-3">
+              <button 
+                onClick={() => { setDeleteModal({ isOpen: false, workspace: null }); setDeleteInput(''); }} 
+                className="px-5 py-2.5 bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-300 rounded-xl transition-colors font-semibold"
+              >
+                {t.workspace?.cancel || 'Cancel'}
+              </button>
+              <button 
+                disabled={deleteInput !== deleteModal.workspace.name}
+                onClick={confirmDelete} 
+                className="px-5 py-2.5 bg-red-600 hover:bg-red-700 text-white rounded-xl disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-semibold"
+              >
+                {t.workspace?.delete || 'Delete'}
+              </button>
+            </div>
           </div>
-        )}
+        </div>
-      </div>
+      )}
     </div>
   );
 }