refactor(projects): remove project member management ui

src/api/logs.ts

@@ -5,7 +5,6 @@ export type WorkspaceLogSection =
   | "workspace_members"
   | "clients"
   | "projects"
-  | "project_members"
   | "tags"
   | "time_entries"
   | "rates"

src/api/projects.ts

@@ -12,26 +12,6 @@ export interface ProjectClient {
   name: string;
 }
 
-export interface ProjectMemberPayload {
-  user_id: string;
-  role: "manager" | "member" | string;
-}
-
-export interface ProjectMembership {
-  id: string;
-  project: string;
-  user: string;
-  user_details: {
-    id: string;
-    first_name: string;
-    last_name: string;
-    phone_number: string;
-    avatar?: string;
-  };
-  role: "manager" | "member" | string;
-  is_active: boolean;
-}
-
 export interface Project {
   id: string;
   name: string;
@@ -42,8 +22,6 @@ export interface Project {
   workspace: string;
   created_by?: AuditUser | null;
   client: ProjectClient | null;
-  my_role?: string;
-  members?: ProjectMembership[];
 }
 
 export interface ProjectPayload {
@@ -85,11 +63,7 @@ export const getProject = async (id: string) => {
 };
 
 export const createProject = async (
-  data: Partial<ProjectPayload> & { 
+  data: Partial<ProjectPayload> & { workspace: string; name: string }
-    workspace: string; 
-    name: string; 
-    members?: ProjectMemberPayload[];
-  }
 ) => {
   const response = await authFetch("/api/projects/", {
     method: "POST",
@@ -105,7 +79,7 @@ export const createProject = async (
 
 export const updateProject = async (
   id: string,
-  data: Partial<ProjectPayload> & { members?: ProjectMemberPayload[] }
+  data: Partial<ProjectPayload>
 ) => {
   const response = await authFetch(`/api/projects/${id}/`, {
     method: "PATCH",
@@ -144,49 +118,3 @@ export const toggleArchiveProject = async (id: string) => {
   }
   return response.json();
 };
-
-
-export const getProjectMemberships = async (projectId: string) => {
-  const response = await authFetch(`/api/memberships/?project=${projectId}`);
-  if (!response.ok) throw new Error("Failed to fetch project memberships");
-  return response.json();
-};
-
-export const addProjectMembership = async (projectId: string, userId: string, role: string) => {
-  const response = await authFetch(`/api/memberships/`, {
-    method: "POST",
-    body: JSON.stringify({ project_id: projectId, user_id: userId, role }),
-  });
-
-  if (!response.ok) {
-    const errorData = await response.json().catch(() => null);
-    throw new Error(errorData?.detail || errorData?.message || "Failed to add project member");
-  }
-  return response.json();
-};
-
-export const updateProjectMembership = async (membershipId: string, role: string, isActive: boolean = true) => {
-  const response = await authFetch(`/api/memberships/${membershipId}/`, {
-    method: "PATCH",
-    body: JSON.stringify({ role, is_active: isActive }),
-  });
-
-  if (!response.ok) {
-    const errorData = await response.json().catch(() => null);
-    throw new Error(errorData?.detail || errorData?.message || "Failed to update project member");
-  }
-  return response.json();
-};
-
-export const removeProjectMembership = async (membershipId: string) => {
-  const response = await authFetch(`/api/memberships/${membershipId}/`, {
-    method: "DELETE",
-  });
-
-  if (!response.ok) {
-    const errorData = await response.json().catch(() => null);
-    throw new Error(errorData?.detail || errorData?.message || "Failed to remove member");
-  }
-  if (response.status === 204) return { success: true };
-  return response.json().catch(() => ({ success: true }));
-};

src/components/logs/LogsFeed.tsx

@@ -21,7 +21,6 @@ const sectionBadgeStyles: Record<string, string> = {
   workspace_members: "bg-violet-100 text-violet-700 dark:bg-violet-900/30 dark:text-violet-300",
   clients: "bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300",
   projects: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300",
-  project_members: "bg-cyan-100 text-cyan-700 dark:bg-cyan-900/30 dark:text-cyan-300",
   tags: "bg-pink-100 text-pink-700 dark:bg-pink-900/30 dark:text-pink-300",
   time_entries: "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300",
   rates: "bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300",

src/components/logs/LogsFilterBar.tsx

@@ -78,7 +78,6 @@ export function LogsFilterBar({
               { value: "workspace_members", label: t.logs?.sections?.workspace_members || "Workspace members" },
               { value: "clients", label: t.logs?.sections?.clients || "Clients" },
               { value: "projects", label: t.logs?.sections?.projects || "Projects" },
-              { value: "project_members", label: t.logs?.sections?.project_members || "Project members" },
               { value: "tags", label: t.logs?.sections?.tags || "Tags" },
               { value: "time_entries", label: t.logs?.sections?.time_entries || "Time entries" },
               { value: "rates", label: t.logs?.sections?.rates || "Rates" },

src/lib/permissions.ts

@@ -1,5 +1,4 @@
 export type WorkspaceRole = "owner" | "admin" | "member" | "guest";
-export type ProjectRole = "manager" | "member" | string;
 
 export const WORKSPACE_VIEW = "workspace.view";
 export const WORKSPACE_EDIT = "workspace.edit";
@@ -22,10 +21,6 @@ export const PROJECTS_CREATE = "projects.create";
 export const PROJECTS_EDIT = "projects.edit";
 export const PROJECTS_DELETE = "projects.delete";
 export const PROJECTS_ARCHIVE = "projects.archive";
-export const PROJECT_MEMBERS_VIEW = "project_members.view";
-export const PROJECT_MEMBERS_ADD = "project_members.add";
-export const PROJECT_MEMBERS_REMOVE = "project_members.remove";
-export const PROJECT_MEMBERS_CHANGE_ROLE = "project_members.change_role";
 export const TIME_ENTRIES_VIEW_OWN = "time_entries.view_own";
 export const TIME_ENTRIES_MANAGE_OWN = "time_entries.manage_own";
 
@@ -51,10 +46,6 @@ export type WorkspaceCapability =
   | typeof PROJECTS_EDIT
   | typeof PROJECTS_DELETE
   | typeof PROJECTS_ARCHIVE
-  | typeof PROJECT_MEMBERS_VIEW
-  | typeof PROJECT_MEMBERS_ADD
-  | typeof PROJECT_MEMBERS_REMOVE
-  | typeof PROJECT_MEMBERS_CHANGE_ROLE
   | typeof TIME_ENTRIES_VIEW_OWN
   | typeof TIME_ENTRIES_MANAGE_OWN;
 
@@ -81,10 +72,6 @@ const CAPABILITIES_BY_ROLE: Record<WorkspaceRole, Set<WorkspaceCapability>> = {
     PROJECTS_EDIT,
     PROJECTS_DELETE,
     PROJECTS_ARCHIVE,
-    PROJECT_MEMBERS_VIEW,
-    PROJECT_MEMBERS_ADD,
-    PROJECT_MEMBERS_REMOVE,
-    PROJECT_MEMBERS_CHANGE_ROLE,
     TIME_ENTRIES_VIEW_OWN,
     TIME_ENTRIES_MANAGE_OWN,
   ]),
@@ -109,10 +96,6 @@ const CAPABILITIES_BY_ROLE: Record<WorkspaceRole, Set<WorkspaceCapability>> = {
     PROJECTS_EDIT,
     PROJECTS_DELETE,
     PROJECTS_ARCHIVE,
-    PROJECT_MEMBERS_VIEW,
-    PROJECT_MEMBERS_ADD,
-    PROJECT_MEMBERS_REMOVE,
-    PROJECT_MEMBERS_CHANGE_ROLE,
     TIME_ENTRIES_VIEW_OWN,
     TIME_ENTRIES_MANAGE_OWN,
   ]),
@@ -134,15 +117,6 @@ const CAPABILITIES_BY_ROLE: Record<WorkspaceRole, Set<WorkspaceCapability>> = {
   ]),
 };
 
-const PROJECT_MANAGER_CAPABILITIES = new Set<WorkspaceCapability>([
-  PROJECTS_EDIT,
-  PROJECTS_ARCHIVE,
-  PROJECT_MEMBERS_VIEW,
-  PROJECT_MEMBERS_ADD,
-  PROJECT_MEMBERS_REMOVE,
-  PROJECT_MEMBERS_CHANGE_ROLE,
-]);
-
 export const canWorkspace = (
   role: WorkspaceRole | null | undefined,
   capability: WorkspaceCapability,
@@ -151,22 +125,6 @@ export const canWorkspace = (
   return CAPABILITIES_BY_ROLE[role]?.has(capability) ?? false;
 };
 
-export const canProject = ({
-  workspaceRole,
-  projectRole,
-  capability,
-}: {
-  workspaceRole: WorkspaceRole | null | undefined;
-  projectRole?: ProjectRole | null;
-  capability: WorkspaceCapability;
-}) => {
-  if (canWorkspace(workspaceRole, capability)) return true;
-  if (workspaceRole === "member" || workspaceRole === "guest" || !workspaceRole) {
-    return false;
-  }
-  return projectRole === "manager" && PROJECT_MANAGER_CAPABILITIES.has(capability);
-};
-
 export const canDeleteWorkspaceResource = ({
   workspaceRole,
   currentUserId,

src/locales/en.ts

@@ -543,7 +543,6 @@ export const en = {
       workspace_members: "Workspace members",
       clients: "Clients",
       projects: "Projects",
-      project_members: "Project members",
       tags: "Tags",
       time_entries: "Time entries",
       rates: "Rates",

src/locales/fa.ts

@@ -538,7 +538,6 @@ export const fa = {
       workspace_members: "اعضای ورک‌اسپیس",
       clients: "مشتری‌ها",
       projects: "پروژه‌ها",
-      project_members: "اعضای پروژه",
       tags: "تگ‌ها",
       time_entries: "ورودی‌های زمان",
       rates: "نرخ‌ها",

src/pages/ProjectCreate.tsx

@@ -1,37 +1,17 @@
-import { useState, useEffect, useCallback, useRef } from "react";
+import { useEffect, useState } from "react";
-import { useNavigate, useBlocker } from "react-router-dom";
+import { useBlocker, useNavigate } from "react-router-dom";
-import {
+import { Briefcase, Loader2 } from "lucide-react";
-  Users,
-  Briefcase,
-  Trash2,
-  Search,
-  Loader2,
-} from "lucide-react";
 import { toast } from "sonner";
 
-import { createProject } from "../api/projects";
 import { getClients } from "../api/clients";
-import { fetchWorkspaceMemberships } from "../api/workspaces";
+import { createProject } from "../api/projects";
-import { searchUserByExactMobile, type SearchedUser } from "../api/users";
-import { useAppContext } from "../context/AppContext";
-import { useWorkspace } from "../context/WorkspaceContext";
-import { useTranslation } from "../hooks/useTranslation";
-import { PROJECTS_CREATE, canWorkspace } from "../lib/permissions";
 import { Button } from "../components/ui/button";
 import { Input } from "../components/ui/input";
 import { Select } from "../components/ui/Select";
 import { TextAreaInput } from "../components/ui/TextAreaInput";
-import { InfiniteScroll } from "../components/InfiniteScroll";
+import { useWorkspace } from "../context/WorkspaceContext";
-import { Modal } from "../components/Modal";
+import { useTranslation } from "../hooks/useTranslation";
-
+import { PROJECTS_CREATE, canWorkspace } from "../lib/permissions";
-type ProjectRole = "manager" | "member";
-
-interface LocalMember {
-  localId: string;
-  user: any;
-  role: ProjectRole;
-  isCreator?: boolean;
-}
 
 const COLORS = [
   "#3B82F6",
@@ -44,54 +24,21 @@ const COLORS = [
   "#64748B",
 ];
 
-const toEnglishDigits = (str: string) => {
-  if (!str) return "";
-  return str
-    .replace(/[۰-۹]/g, (d) => "۰۱۲۳۴۵۶۷۸۹".indexOf(d).toString())
-    .replace(/[٠-٩]/g, (d) => "٠١٢٣٤٥٦٧٨٩".indexOf(d).toString());
-};
-
-const LIMIT = 10;
-
 export default function ProjectCreate() {
   const navigate = useNavigate();
   const { t } = useTranslation();
-  const { user } = useAppContext();
   const { activeWorkspace } = useWorkspace();
-  const currentUserId = user?.id || "";
   const canCreateProject = canWorkspace(activeWorkspace?.my_role, PROJECTS_CREATE);
 
-  // Project Detail States
   const [name, setName] = useState("");
   const [description, setDescription] = useState("");
   const [color, setColor] = useState(COLORS[0]);
   const [client, setClient] = useState("");
-  const [clientsList, setClientsList] = useState<any[]>([]);
+  const [clientsList, setClientsList] = useState<{ id: string; name: string }[]>([]);
-
-  // Workspace List & Pagination States
-  const [workspaceMembers, setWorkspaceMembers] = useState<any[]>([]);
-  const [offset, setOffset] = useState(0);
-  const [hasMore, setHasMore] = useState(true);
-  const [isLoadingMore, setIsLoadingMore] = useState(false);
   const [isLoadingData, setIsLoadingData] = useState(true);
-  
-  // Member Management States
-  const [members, setMembers] = useState<LocalMember[]>([]);
-  const [searchQuery, setSearchQuery] = useState("");
-  const [addAllMembers, setAddAllMembers] = useState(false);
-  const [isAddingAll, setIsAddingAll] = useState(false);
-
-  // External Search States
-  const [searchResult, setSearchResult] = useState<SearchedUser | null>(null);
-  const [isSearching, setIsSearching] = useState(false);
-  const [searchError, setSearchError] = useState(false);
-  const searchTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
   const [isSaving, setIsSaving] = useState(false);
-  const [memberIdToDelete, setMemberIdToDelete] = useState<string | null>(null);
-  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
 
-  const hasUnsavedChanges = name.trim() !== "" || description.trim() !== "" || members.length > 1;
+  const hasUnsavedChanges = name.trim() !== "" || description.trim() !== "" || client !== "" || color !== COLORS[0];
 
   useEffect(() => {
     if (activeWorkspace && !canCreateProject) {
@@ -107,203 +54,29 @@ export default function ProjectCreate() {
     return false;
   });
 
-  // EXACT same pagination structure as EditWorkspace.tsx
   useEffect(() => {
-    if (activeWorkspace?.id) {
+    if (!activeWorkspace?.id) return;
-      const workspaceId = activeWorkspace.id;
 
     setName("");
     setDescription("");
     setColor(COLORS[0]);
     setClient("");
     setClientsList([]);
-      setWorkspaceMembers([]);
-      setSearchQuery("");
-      setSearchResult(null);
-      setSearchError(false);
-      setAddAllMembers(false);
-      
-      // Reset pagination state
-      setOffset(0);
-      setHasMore(true);
     setIsLoadingData(true);
 
-      if (user?.id) {
-        setMembers([{ localId: user.id, user: user, role: "manager", isCreator: true }]);
-      } else {
-        setMembers([]);
-      }
-
     const loadInitialData = async () => {
       try {
-          const clientsRes = await getClients(workspaceId);
+        const clientsRes = await getClients(activeWorkspace.id);
         setClientsList(clientsRes.results || []);
-          
+      } catch {
-          const res = await fetchWorkspaceMemberships({
+        toast.error(t.projects?.clientFetchError || "Failed to load clients.");
-            workspace: workspaceId,
-            limit: LIMIT,
-            offset: 0,
-          });
-          const results = res.results || (Array.isArray(res) ? res : []);
-          
-          setWorkspaceMembers(results);
-          setOffset(LIMIT);
-          setHasMore(res.next ? true : results.length >= LIMIT);
-        } catch (err) {
-          console.error("Failed to fetch initial data", err);
-          toast.error("Failed to load initial data.");
       } finally {
         setIsLoadingData(false);
       }
     };
 
-      loadInitialData();
+    void loadInitialData();
-    }
+  }, [activeWorkspace?.id, t.projects?.clientFetchError]);
-  }, [activeWorkspace?.id, user?.id]);
-
-  // EXACT same LoadMore logic and deduplication as EditWorkspace.tsx
-  const loadMoreMembers = useCallback(async () => {
-    if (isLoadingMore || !hasMore || !activeWorkspace?.id) return;
-    try {
-      setIsLoadingMore(true);
-      
-      const res = await fetchWorkspaceMemberships({ 
-        workspace: activeWorkspace.id, 
-        limit: LIMIT, 
-        offset: offset 
-      });
-      const results = res.results || (Array.isArray(res) ? res : []);
-      
-      setWorkspaceMembers((prev) => {
-        // Safe deduplication to avoid React key warnings breaking the DOM observer
-        const existingIds = new Set(prev.map(m => m.id));
-        const newItems = results.filter((item: any) => !existingIds.has(item.id));
-        return [...prev, ...newItems];
-      });
-      
-      setOffset(prev => prev + LIMIT);
-      setHasMore(res.next ? true : results.length >= LIMIT);
-      
-    } catch (error) {
-      console.error("Failed to load more members", error);
-    } finally {
-      setIsLoadingMore(false);
-    }
-  }, [activeWorkspace?.id, isLoadingMore, hasMore, offset]);
-
-  // Unified Search Logic
-  useEffect(() => {
-    if (searchTimeoutRef.current) clearTimeout(searchTimeoutRef.current);
-    const cleanQuery = toEnglishDigits(searchQuery.trim());
-    setSearchError(false);
-
-    if (cleanQuery.length >= 10 && /^\d+$/.test(cleanQuery)) {
-      searchTimeoutRef.current = setTimeout(async () => {
-        setIsSearching(true);
-        try {
-          const foundUser = await searchUserByExactMobile(cleanQuery);
-          if (foundUser && foundUser.id) {
-            if (foundUser.id === currentUserId) {
-              setSearchResult(null);
-            } else {
-              setSearchResult(foundUser);
-              setSearchError(false);
-            }
-          } else {
-            setSearchResult(null);
-            setSearchError(true);
-          }
-        } catch (error) {
-          setSearchResult(null);
-          setSearchError(true);
-        } finally {
-          setIsSearching(false);
-        }
-      }, 500);
-    } else {
-      setSearchResult(null);
-    }
-    return () => {
-      if (searchTimeoutRef.current) clearTimeout(searchTimeoutRef.current);
-    };
-  }, [searchQuery, currentUserId]);
-
-  const handleAddMember = (userToAdd: any) => {
-    if (members.some((m) => m.user.id === userToAdd.id)) return;
-    const newMember: LocalMember = {
-      localId: Math.random().toString(36).substr(2, 9),
-      user: userToAdd,
-      role: "member",
-    };
-    setMembers((prev) => [newMember, ...prev]);
-    setSearchQuery("");
-    setSearchResult(null);
-  };
-
-  const handleToggleAddAllMembers = async () => {
-    if (addAllMembers) {
-      setMembers((prev) => prev.filter(m => m.isCreator || m.role === "manager"));
-      setAddAllMembers(false);
-    } else {
-      if (!activeWorkspace?.id) return;
-      setIsAddingAll(true);
-      try {
-        let currentOffset = 0;
-        let continueFetching = true;
-        const allWsMembers: any[] = [];
-
-        while (continueFetching) {
-          const res = await fetchWorkspaceMemberships({
-            workspace: activeWorkspace.id,
-            limit: 50,
-            offset: currentOffset,
-          });
-          const fetchedResults = res.results || (Array.isArray(res) ? res : []);
-          allWsMembers.push(...fetchedResults);
-          if (res.next) {
-            currentOffset += 50;
-          } else {
-            continueFetching = false;
-          }
-        }
-
-        const newMembersToAdd = allWsMembers
-          .map((wm) => wm.user)
-          .filter((u) => u && u.id !== currentUserId && !members.some((m) => m.user.id === u.id));
-
-        const localMembers: LocalMember[] = newMembersToAdd.map((u) => ({
-          localId: Math.random().toString(36).substr(2, 9),
-          user: u,
-          role: "member",
-        }));
-
-        setMembers((prev) => [...prev, ...localMembers]);
-        setAddAllMembers(true);
-      } catch (error) {
-        toast.error("Could not add all workspace members.");
-      } finally {
-        setIsAddingAll(false);
-      }
-    }
-  };
-
-  const openDeleteModal = (userId: string) => {
-    setMemberIdToDelete(userId);
-    setIsDeleteDialogOpen(true);
-  };
-
-  const handleDeleteMember = () => {
-    if (!memberIdToDelete) return;
-    setMembers(members.filter((m) => m.user.id !== memberIdToDelete));
-    setIsDeleteDialogOpen(false);
-    setMemberIdToDelete(null);
-  };
-
-  const handleChangeRole = (userId: string, newRole: string) => {
-    setMembers(
-      members.map((m) => (m.user.id === userId ? { ...m, role: newRole as ProjectRole } : m))
-    );
-  };
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -311,20 +84,14 @@ export default function ProjectCreate() {
 
     try {
       setIsSaving(true);
-      const membersPayload = members
+      const newProject = await createProject({
-        .filter((m) => !m.isCreator)
+        workspace: activeWorkspace.id,
-        .map((m) => ({ user_id: m.user.id, role: m.role }));
-
-      const projectPayload: any = {
         name,
         description,
         color,
-        workspace: activeWorkspace.id,
+        client: client || null,
-        members: membersPayload,
+        is_archived: false,
-      };
+      });
-      if (client) projectPayload.client = client;
-
-      const newProject = await createProject(projectPayload);
 
       window.dispatchEvent(new CustomEvent("project_created", { detail: newProject }));
       toast.success(t.projects?.createSuccess || "Project created successfully.");
@@ -336,48 +103,20 @@ export default function ProjectCreate() {
     }
   };
 
-  // Prepare unified display list
+  if (!activeWorkspace) return null;
-  const filteredWorkspaceMembers = workspaceMembers.filter((m) => {
-    const q = searchQuery.trim().toLowerCase();
-    if (!q) return true;
-    const fullName = `${m.user.first_name || ""} ${m.user.last_name || ""}`.toLowerCase();
-    const phone = toEnglishDigits(m.user.mobile || "");
-    return fullName.includes(q) || phone.includes(toEnglishDigits(q));
-  });
-
-  const workspaceMemberUserIds = new Set(filteredWorkspaceMembers.map((m) => m.user.id));
-
-  const externalAddedMembers = members.filter((m) => {
-    if (workspaceMemberUserIds.has(m.user.id)) return false;
-    const q = searchQuery.trim().toLowerCase();
-    if (!q) return true;
-    const fullName = `${m.user.first_name || ""} ${m.user.last_name || ""}`.toLowerCase();
-    const phone = toEnglishDigits(m.user.mobile || "");
-    return fullName.includes(q) || phone.includes(toEnglishDigits(q));
-  });
-
-  const displayList = [
-    ...externalAddedMembers.map((m) => ({ listId: m.localId, user: m.user })),
-    ...filteredWorkspaceMembers.map((m) => ({ listId: m.id || m.user.id, user: m.user }))
-  ];
-
-  if (!activeWorkspace) {
-    return null;
-  }
 
   return (
-    <div className="absolute inset-0 flex flex-col p-4 sm:p-6 bg-slate-50 dark:bg-slate-900 overflow-hidden">
+    <div className="absolute inset-0 overflow-y-auto bg-slate-50 p-4 dark:bg-slate-900 sm:p-6">
-      <h1 className="text-2xl font-bold text-slate-800 dark:text-slate-200 mb-6 shrink-0">
+      <div className="mx-auto max-w-3xl">
+        <h1 className="mb-6 text-2xl font-bold text-slate-800 dark:text-slate-200">
           {t.projects?.createNew || "Create New Project"}
         </h1>
 
-      <div className="flex flex-col lg:flex-row gap-4 sm:gap-6 flex-1 min-h-0">
+        <div className="rounded-3xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
-        <div className="w-full lg:w-1/3 lg:max-w-md bg-white dark:bg-slate-900 rounded-lg shadow-sm border border-slate-200 dark:border-slate-800 overflow-y-auto">
+          <form onSubmit={handleSubmit} className="space-y-6 p-6">
-          <form id="create-project-form" onSubmit={handleSubmit} className="flex flex-col h-full p-6">
-            <div className="flex-1 space-y-6">
             <div className="flex flex-col gap-3">
               <div className="flex items-center gap-4">
-                  <div className="h-10 w-10 rounded-lg shrink-0 shadow-sm" style={{ backgroundColor: color }} />
+                <div className="h-10 w-10 shrink-0 rounded-lg shadow-sm" style={{ backgroundColor: color }} />
                 <Input
                   value={name}
                   onChange={(e) => setName(e.target.value)}
@@ -385,26 +124,26 @@ export default function ProjectCreate() {
                   required
                 />
               </div>
-                <div className="flex flex-wrap gap-2 mt-2">
+              <div className="mt-2 flex flex-wrap gap-2">
-                  {COLORS.map((c) => (
+                {COLORS.map((paletteColor) => (
                   <button
-                      key={c}
+                    key={paletteColor}
                     type="button"
-                      onClick={() => setColor(c)}
+                    onClick={() => setColor(paletteColor)}
-                      className={`w-5 h-5 rounded-full transition-all duration-150 shrink-0 ${
+                    className={`h-5 w-5 shrink-0 rounded-full transition-all duration-150 ${
-                        color === c
+                      color === paletteColor
-                          ? "ring-2 ring-offset-2 ring-offset-white dark:ring-offset-slate-800 ring-blue-500 scale-110 shadow-md"
+                        ? "scale-110 ring-2 ring-blue-500 ring-offset-2 ring-offset-white shadow-md dark:ring-offset-slate-900"
-                          : "hover:scale-110 shadow-sm"
+                        : "shadow-sm hover:scale-110"
                     }`}
-                      style={{ backgroundColor: c }}
+                    style={{ backgroundColor: paletteColor }}
-                      aria-label={`Select color ${c}`}
+                    aria-label={`Select color ${paletteColor}`}
                   />
                 ))}
               </div>
             </div>
 
             <div>
-                <label className="text-slate-700 dark:text-slate-300 mb-2 flex items-center gap-2">
+              <label className="mb-2 flex items-center gap-2 text-slate-700 dark:text-slate-300">
                 <Briefcase size={16} />
                 {t.projects?.client || "Client"}
               </label>
@@ -413,230 +152,38 @@ export default function ProjectCreate() {
                 onChange={setClient}
                 options={[
                   { value: "", label: t.projects?.noClient || "No Client" },
-                    ...clientsList.map((c) => ({ value: c.id, label: c.name })),
+                  ...clientsList.map((item) => ({ value: item.id, label: item.name })),
                 ]}
+                isLoading={isLoadingData}
                 className="w-full"
                 buttonClassName="w-full"
               />
             </div>
 
             <div>
-                <label className="block text-slate-700 dark:text-slate-300 mb-2">
+              <label className="mb-2 block text-slate-700 dark:text-slate-300">
-                  {t.projects?.descriptionLabel || "Description (Optional)"}
+                {t.projects?.descriptionLabel || "Description"}
               </label>
               <TextAreaInput
                 value={description}
                 onChange={(e) => setDescription(e.target.value)}
                 placeholder={t.projects?.descriptionPlaceholder || "Add more details..."}
-                  rows={4}
+                rows={5}
               />
             </div>
-            </div>
 
-            <div className="mt-8 pt-4 border-t border-slate-200 dark:border-slate-700 flex justify-end gap-3 shrink-0">
+            <div className="flex justify-end gap-3 border-t border-slate-200 pt-4 dark:border-slate-700">
               <Button variant="ghost" type="button" onClick={() => navigate("/projects")}>
                 {t.cancel || "Cancel"}
               </Button>
               <Button type="submit" disabled={isSaving || !name.trim()}>
-                {isSaving && <Loader2 className="me-2 h-4 w-4 animate-spin" />}
+                {isSaving ? <Loader2 className="me-2 h-4 w-4 animate-spin" /> : null}
                 {t.create || "Create"}
               </Button>
             </div>
           </form>
         </div>
-
-        <div className="w-full lg:w-2/3 flex flex-col min-h-0 bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-800 shadow-sm rounded-lg border">
-          <div className="p-4 border-b border-slate-200 dark:border-slate-700 shrink-0 space-y-4">
-            <div className="flex items-center justify-between">
-              <h3 className="font-semibold text-slate-800 dark:text-slate-200 flex items-center gap-2">
-                <Users size={18} />
-                {t.projects?.projectMembers || "Project Members"}
-              </h3>
-              <Button
-                type="button"
-                variant={addAllMembers ? "destructive" : "outline"}
-                disabled={isAddingAll || isLoadingData}
-                onClick={handleToggleAddAllMembers}
-              >
-                {isAddingAll && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-                {addAllMembers 
-                  ? (t.projects?.removeAllWorkspaceMembers || "Remove All") 
-                  : (t.projects?.addAllWorkspaceMembers || "Add All")}
-              </Button>
       </div>
-            
-            <div className="relative">
-              <Search className="absolute inset-s-3 top-1/2 -translate-y-1/2 text-slate-400" size={18} />
-              <Input
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-                placeholder={t.projects?.searchWorkspaceMembers || "Search by name or enter mobile number..."}
-                className="ps-10"
-              />
-              {isSearching && (
-                <Loader2 className="animate-spin absolute inset-e-3 top-1/2 -translate-y-1/2 text-slate-400" size={18} />
-              )}
-            </div>
-
-            {searchError && (
-              <p className="text-xs text-red-500 dark:text-red-400 mt-2">
-                {t.projects?.userNotFound || "No user found with this mobile number."}
-              </p>
-            )}
-
-            {searchResult && !searchError && (
-              <div className="p-3 border border-blue-200 dark:border-blue-900 bg-blue-50 dark:bg-blue-900/20 rounded-md flex items-center justify-between mt-2">
-                <div className="flex items-center gap-3">
-                  {searchResult.profile_picture ? (
-                    <img 
-                        src={searchResult.profile_picture} 
-                        alt={searchResult.first_name} 
-                        className="w-10 h-10 rounded-full object-cover shadow-sm" 
-                    />
-                  ) : (
-                    <div className="w-10 h-10 rounded-full bg-blue-200 dark:bg-blue-900/50 flex items-center justify-center text-blue-700 dark:text-blue-300 font-bold text-sm shadow-sm flex-shrink-0">
-                        {searchResult.first_name?.[0] || "U"}
-                    </div>
-                  )}
-                  <div className="flex flex-col">
-                    <span className="text-sm font-semibold text-slate-800 dark:text-slate-200">
-                      {searchResult.first_name} {searchResult.last_name}
-                    </span>
-                    <span className="text-xs text-slate-500 dark:text-slate-400">
-                      {searchResult.mobile}
-                    </span>
-                  </div>
-                </div>
-                <Button
-                  type="button"
-                  variant="default"
-                  size="sm"
-                  disabled={members.some((m) => m.user.id === searchResult.id)}
-                  onClick={() => handleAddMember(searchResult)}
-                >
-                  {members.some((m) => m.user.id === searchResult.id)
-                    ? (t.projects?.alreadyInProject || "Already Added")
-                    : (t.projects?.addToProject || "Add to Project")}
-                </Button>
-              </div>
-            )}
-          </div>
-          
-          <div className="flex-1 overflow-y-auto p-2">
-            {isLoadingData ? (
-              <div className="p-4 text-sm text-slate-500 flex justify-center items-center gap-2">
-                <Loader2 className="h-5 w-5 animate-spin" />
-                {t.loading || "Loading..."}
-              </div>
-            ) : (
-              <InfiniteScroll
-                onLoadMore={loadMoreMembers}
-                hasMore={hasMore && searchQuery.trim().length === 0} 
-                isLoading={isLoadingMore}
-              >
-                {displayList.length === 0 ? (
-                  <div className="p-4 text-sm text-slate-500 text-center">
-                    {t.projects?.noWorkspaceMembers || "No members found."}
-                  </div>
-                ) : (
-                  <ul className="divide-y divide-slate-100 dark:divide-slate-700/50">
-                    {displayList.map((item) => {
-                      const addedMemberData = members.find((mm) => mm.user.id === item.user.id);
-                      const isAdded = !!addedMemberData;
-
-                      return (
-                        <li key={item.listId} className="flex flex-col sm:flex-row sm:items-center justify-between p-3 gap-3 hover:bg-slate-50 dark:hover:bg-slate-700/30 transition-colors rounded-lg">
-                          <div className="flex items-center gap-3">
-                            {item.user.profile_picture ? (
-                              <img 
-                                src={item.user.profile_picture} 
-                                alt={item.user.first_name} 
-                                className="w-9 h-9 rounded-full object-cover shadow-sm" 
-                              />
-                            ) : (
-                              <div className="w-9 h-9 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center text-blue-700 dark:text-blue-300 font-bold text-sm shadow-sm flex-shrink-0">
-                                {item.user.first_name?.[0] || "U"}
-                              </div>
-                            )}
-                            <div className="flex flex-col">
-                              <span className="text-sm font-semibold text-slate-800 dark:text-slate-200 flex items-center gap-2">
-                                {item.user.first_name} {item.user.last_name}
-                                {addedMemberData?.isCreator && (
-                                  <span className="text-[10px] bg-slate-200 dark:bg-slate-600 px-2 py-0.5 rounded-full text-slate-600 dark:text-slate-300 font-bold">
-                                    {t.projects?.creator || "Creator"}
-                                  </span>
-                                )}
-                              </span>
-                              <span className="text-xs text-slate-500 dark:text-slate-400">
-                                {item.user.mobile}
-                              </span>
-                            </div>
-                          </div>
-
-                          <div>
-                            {isAdded ? (
-                              <div className="flex items-center gap-2">
-                                {!addedMemberData.isCreator && (
-                                  <Select
-                                    value={addedMemberData.role}
-                                    onChange={(val) => handleChangeRole(item.user.id, val)}
-                                    options={[
-                                      { value: "member", label: t.projects?.roles?.member || "Member" },
-                                      { value: "manager", label: t.projects?.roles?.manager || "Manager" },
-                                    ]}
-                                    buttonClassName="text-xs h-8 w-28"
-                                  />
-                                )}
-                                {!addedMemberData.isCreator && (
-                                  <Button
-                                    type="button"
-                                    variant="ghost"
-                                    size="icon"
-                                    className="h-8 w-8 shrink-0 text-slate-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-950"
-                                    onClick={() => openDeleteModal(item.user.id)}
-                                  >
-                                    <Trash2 size={16} />
-                                  </Button>
-                                )}
-                              </div>
-                            ) : (
-                              <Button
-                                type="button"
-                                variant="secondary"
-                                onClick={() => handleAddMember(item.user)}
-                              >
-                                {t.projects?.addToProject || "Add to Project"}
-                              </Button>
-                            )}
-                          </div>
-                        </li>
-                      );
-                    })}
-                  </ul>
-                )}
-              </InfiniteScroll>
-            )}
-          </div>
-        </div>
-      </div>
-
-      <Modal
-        isOpen={isDeleteDialogOpen}
-        onClose={() => setIsDeleteDialogOpen(false)}
-        title={t.projects?.confirmDeleteTitle || "Remove Member"}
-        description={
-          t.projects?.confirmDeleteDesc || "Are you sure you want to remove this member from the project?"
-        }
-      >
-        <div className="flex justify-end gap-3 mt-6">
-          <Button variant="outline" onClick={() => setIsDeleteDialogOpen(false)}>
-            {t.cancel || "Cancel"}
-          </Button>
-          <Button variant="destructive" onClick={handleDeleteMember}>
-            {t.remove || "Remove"}
-          </Button>
-        </div>
-      </Modal>
     </div>
   );
 }

src/pages/ProjectEdit.tsx

@@ -1,37 +1,17 @@
-import { useState, useEffect, useCallback, useRef } from "react";
+import { useEffect, useState } from "react";
-import { useNavigate, useParams, useBlocker } from "react-router-dom";
+import { useBlocker, useNavigate, useParams } from "react-router-dom";
-import {
+import { Briefcase, Loader2 } from "lucide-react";
-  Users,
-  Briefcase,
-  Trash2,
-  Search,
-  Loader2,
-} from "lucide-react";
 import { toast } from "sonner";
 
-import { getProject, updateProject } from "../api/projects";
 import { getClients } from "../api/clients";
-import { fetchWorkspaceMemberships } from "../api/workspaces";
+import { getProject, updateProject } from "../api/projects";
-import { searchUserByExactMobile, type SearchedUser } from "../api/users";
-import { useAppContext } from "../context/AppContext";
-import { useWorkspace } from "../context/WorkspaceContext";
-import { useTranslation } from "../hooks/useTranslation";
-import { PROJECTS_EDIT, canWorkspace } from "../lib/permissions";
 import { Button } from "../components/ui/button";
 import { Input } from "../components/ui/input";
 import { Select } from "../components/ui/Select";
 import { TextAreaInput } from "../components/ui/TextAreaInput";
-import { InfiniteScroll } from "../components/InfiniteScroll";
+import { useWorkspace } from "../context/WorkspaceContext";
-import { Modal } from "../components/Modal";
+import { useTranslation } from "../hooks/useTranslation";
-
+import { PROJECTS_EDIT, canWorkspace } from "../lib/permissions";
-type ProjectRole = "manager" | "member";
-
-interface LocalMember {
-  localId: string;
-  user: any;
-  role: ProjectRole;
-  isCreator?: boolean;
-}
 
 const COLORS = [
   "#3B82F6",
@@ -44,50 +24,21 @@ const COLORS = [
   "#64748B",
 ];
 
-const toEnglishDigits = (str: string) => {
-  if (!str) return "";
-  return str
-    .replace(/[۰-۹]/g, (d) => "۰۱۲۳۴۵۶۷۸۹".indexOf(d).toString())
-    .replace(/[٠-٩]/g, (d) => "٠١٢٣٤٥٦٧٨٩".indexOf(d).toString());
-};
-
-const LIMIT = 10;
-
 export default function ProjectEdit() {
   const navigate = useNavigate();
   const { id } = useParams<{ id: string }>();
   const { t } = useTranslation();
-  const { user } = useAppContext();
   const { activeWorkspace } = useWorkspace();
-  const currentUserId = user?.id || "";
   const canEditProject = canWorkspace(activeWorkspace?.my_role, PROJECTS_EDIT);
 
   const [name, setName] = useState("");
   const [description, setDescription] = useState("");
   const [color, setColor] = useState(COLORS[0]);
   const [client, setClient] = useState("");
-  const [clientsList, setClientsList] = useState<any[]>([]);
+  const [clientsList, setClientsList] = useState<{ id: string; name: string }[]>([]);
-
-  const [workspaceMembers, setWorkspaceMembers] = useState<any[]>([]);
-  const [offset, setOffset] = useState(0);
-  const [hasMore, setHasMore] = useState(true);
-  const [isLoadingMore, setIsLoadingMore] = useState(false);
   const [isLoadingData, setIsLoadingData] = useState(true);
   const [isProjectLoading, setIsProjectLoading] = useState(true);
-  
-  const [members, setMembers] = useState<LocalMember[]>([]);
-  const [searchQuery, setSearchQuery] = useState("");
-  const [addAllMembers, setAddAllMembers] = useState(false);
-  const [isAddingAll, setIsAddingAll] = useState(false);
-
-  const [searchResult, setSearchResult] = useState<SearchedUser | null>(null);
-  const [isSearching, setIsSearching] = useState(false);
-  const [searchError, setSearchError] = useState(false);
-  const searchTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
   const [isSaving, setIsSaving] = useState(false);
-  const [memberIdToDelete, setMemberIdToDelete] = useState<string | null>(null);
-  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
 
   const hasUnsavedChanges = name.trim() !== "";
 
@@ -106,44 +57,21 @@ export default function ProjectEdit() {
   });
 
   useEffect(() => {
-    if (activeWorkspace?.id && id) {
+    if (!activeWorkspace?.id || !id) return;
+
     const loadInitialData = async () => {
       try {
-          const clientsRes = await getClients(activeWorkspace.id);
+        const [clientsRes, projectRes] = await Promise.all([
-          setClientsList(clientsRes.results || []);
+          getClients(activeWorkspace.id),
+          getProject(id),
+        ]);
 
-          const projectRes = await getProject(id);
+        setClientsList(clientsRes.results || []);
         setName(projectRes.name || "");
         setDescription(projectRes.description || "");
         setColor(projectRes.color || COLORS[0]);
         setClient(projectRes.client?.id || projectRes.client || "");
-
+      } catch {
-          if (projectRes.members) {
-            const mappedMembers = projectRes.members.map((m: any) => ({
-              localId: m.id,
-              user: {
-                id: m.user_details?.id || m.user,
-                first_name: m.user_details?.first_name || "",
-                last_name: m.user_details?.last_name || "",
-                mobile: m.user_details?.phone_number || "",
-                profile_picture: m.user_details?.avatar || "",
-              },
-              role: m.role as ProjectRole,
-              isCreator: m.user === currentUserId && m.role === "manager", 
-            }));
-            setMembers(mappedMembers);
-          }
-          const res = await fetchWorkspaceMemberships({
-            workspace: activeWorkspace.id,
-            limit: LIMIT,
-            offset: 0,
-          });
-          const results = res.results || (Array.isArray(res) ? res : []);
-          
-          setWorkspaceMembers(results);
-          setOffset(LIMIT);
-          setHasMore(res.next ? true : results.length >= LIMIT);
-        } catch (err) {
         toast.error("Failed to load project data.");
         navigate("/projects");
       } finally {
@@ -152,144 +80,8 @@ export default function ProjectEdit() {
       }
     };
 
-      loadInitialData();
+    void loadInitialData();
-    }
+  }, [activeWorkspace?.id, id, navigate]);
-  }, [activeWorkspace?.id, id, currentUserId, navigate]);
-
-  const loadMoreMembers = useCallback(async () => {
-    if (isLoadingMore || !hasMore || !activeWorkspace?.id) return;
-    try {
-      setIsLoadingMore(true);
-      const res = await fetchWorkspaceMemberships({ 
-        workspace: activeWorkspace.id, 
-        limit: LIMIT, 
-        offset: offset 
-      });
-      const results = res.results || (Array.isArray(res) ? res : []);
-      
-      setWorkspaceMembers((prev) => {
-        const existingIds = new Set(prev.map(m => m.id));
-        const newItems = results.filter((item: any) => !existingIds.has(item.id));
-        return [...prev, ...newItems];
-      });
-      
-      setOffset(prev => prev + LIMIT);
-      setHasMore(res.next ? true : results.length >= LIMIT);
-    } catch (error) {
-      console.error("Failed to load more members", error);
-    } finally {
-      setIsLoadingMore(false);
-    }
-  }, [activeWorkspace?.id, isLoadingMore, hasMore, offset]);
-
-  useEffect(() => {
-    if (searchTimeoutRef.current) clearTimeout(searchTimeoutRef.current);
-    const cleanQuery = toEnglishDigits(searchQuery.trim());
-    setSearchError(false);
-
-    if (cleanQuery.length >= 10 && /^\d+$/.test(cleanQuery)) {
-      searchTimeoutRef.current = setTimeout(async () => {
-        setIsSearching(true);
-        try {
-          const foundUser = await searchUserByExactMobile(cleanQuery);
-          if (foundUser && foundUser.id) {
-            setSearchResult(foundUser);
-            setSearchError(false);
-          } else {
-            setSearchResult(null);
-            setSearchError(true);
-          }
-        } catch (error) {
-          setSearchResult(null);
-          setSearchError(true);
-        } finally {
-          setIsSearching(false);
-        }
-      }, 500);
-    } else {
-      setSearchResult(null);
-    }
-    return () => {
-      if (searchTimeoutRef.current) clearTimeout(searchTimeoutRef.current);
-    };
-  }, [searchQuery]);
-
-  const handleAddMember = (userToAdd: any) => {
-    if (members.some((m) => m.user.id === userToAdd.id)) return;
-    const newMember: LocalMember = {
-      localId: Math.random().toString(36).substr(2, 9),
-      user: userToAdd,
-      role: "member",
-    };
-    setMembers((prev) => [newMember, ...prev]);
-    setSearchQuery("");
-    setSearchResult(null);
-  };
-
-  const handleToggleAddAllMembers = async () => {
-    if (addAllMembers) {
-      setMembers((prev) => prev.filter(m => m.isCreator || m.role === "manager"));
-      setAddAllMembers(false);
-    } else {
-      if (!activeWorkspace?.id) return;
-      setIsAddingAll(true);
-      try {
-        let currentOffset = 0;
-        let continueFetching = true;
-        const allWsMembers: any[] = [];
-
-        while (continueFetching) {
-          const res = await fetchWorkspaceMemberships({
-            workspace: activeWorkspace.id,
-            limit: 50,
-            offset: currentOffset,
-          });
-          const fetchedResults = res.results || (Array.isArray(res) ? res : []);
-          allWsMembers.push(...fetchedResults);
-          if (res.next) {
-            currentOffset += 50;
-          } else {
-            continueFetching = false;
-          }
-        }
-
-        const newMembersToAdd = allWsMembers
-          .map((wm) => wm.user)
-          .filter((u) => u && !members.some((m) => m.user.id === u.id));
-
-        const localMembers: LocalMember[] = newMembersToAdd.map((u) => ({
-          localId: Math.random().toString(36).substr(2, 9),
-          user: u,
-          role: "member",
-        }));
-
-        setMembers((prev) => [...prev, ...localMembers]);
-        setAddAllMembers(true);
-      } catch (error) {
-        toast.error("Could not add all workspace members.");
-      } finally {
-        setIsAddingAll(false);
-      }
-    }
-  };
-
-  const openDeleteModal = (userId: string) => {
-    setMemberIdToDelete(userId);
-    setIsDeleteDialogOpen(true);
-  };
-
-  const handleDeleteMember = () => {
-    if (!memberIdToDelete) return;
-    setMembers(members.filter((m) => m.user.id !== memberIdToDelete));
-    setIsDeleteDialogOpen(false);
-    setMemberIdToDelete(null);
-  };
-
-  const handleChangeRole = (userId: string, newRole: string) => {
-    setMembers(
-      members.map((m) => (m.user.id === userId ? { ...m, role: newRole as ProjectRole } : m))
-    );
-  };
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -297,18 +89,12 @@ export default function ProjectEdit() {
 
     try {
       setIsSaving(true);
-      const membersPayload = members.map((m) => ({ user_id: m.user.id, role: m.role }));
+      const updatedProject = await updateProject(id, {
-
-      const projectPayload: any = {
         name,
         description,
         color,
-        workspace: activeWorkspace.id,
-        members: membersPayload,
         client: client || null,
-      };
+      });
-
-      const updatedProject = await updateProject(id, projectPayload);
 
       window.dispatchEvent(new CustomEvent("project_updated", { detail: updatedProject }));
       toast.success(t.projects?.updateSuccess || "Project updated successfully.");
@@ -320,30 +106,6 @@ export default function ProjectEdit() {
     }
   };
 
-  const filteredWorkspaceMembers = workspaceMembers.filter((m) => {
-    const q = searchQuery.trim().toLowerCase();
-    if (!q) return true;
-    const fullName = `${m.user.first_name || ""} ${m.user.last_name || ""}`.toLowerCase();
-    const phone = toEnglishDigits(m.user.mobile || "");
-    return fullName.includes(q) || phone.includes(toEnglishDigits(q));
-  });
-
-  const workspaceMemberUserIds = new Set(filteredWorkspaceMembers.map((m) => m.user.id));
-
-  const externalAddedMembers = members.filter((m) => {
-    if (workspaceMemberUserIds.has(m.user.id)) return false;
-    const q = searchQuery.trim().toLowerCase();
-    if (!q) return true;
-    const fullName = `${m.user.first_name || ""} ${m.user.last_name || ""}`.toLowerCase();
-    const phone = toEnglishDigits(m.user.mobile || "");
-    return fullName.includes(q) || phone.includes(toEnglishDigits(q));
-  });
-
-  const displayList = [
-    ...externalAddedMembers.map((m) => ({ listId: m.localId, user: m.user })),
-    ...filteredWorkspaceMembers.map((m) => ({ listId: m.id || m.user.id, user: m.user }))
-  ];
-
   if (!activeWorkspace) return null;
 
   if (isProjectLoading) {
@@ -355,18 +117,17 @@ export default function ProjectEdit() {
   }
 
   return (
-    <div className="absolute inset-0 flex flex-col p-4 sm:p-6 bg-slate-50 dark:bg-slate-900 overflow-hidden">
+    <div className="absolute inset-0 overflow-y-auto bg-slate-50 p-4 dark:bg-slate-900 sm:p-6">
-      <h1 className="text-2xl font-bold text-slate-800 dark:text-slate-200 mb-6 shrink-0">
+      <div className="mx-auto max-w-3xl">
+        <h1 className="mb-6 text-2xl font-bold text-slate-800 dark:text-slate-200">
           {t.projects?.edit || "Edit Project"}
         </h1>
 
-      <div className="flex flex-col lg:flex-row gap-4 sm:gap-6 flex-1 min-h-0">
+        <div className="rounded-3xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
-        <div className="w-full lg:w-1/3 lg:max-w-md bg-white dark:bg-slate-900 rounded-lg shadow-sm border border-slate-200 dark:border-slate-800 overflow-y-auto">
+          <form onSubmit={handleSubmit} className="space-y-6 p-6">
-          <form id="edit-project-form" onSubmit={handleSubmit} className="flex flex-col h-full p-6">
-            <div className="flex-1 space-y-6">
             <div className="flex flex-col gap-3">
               <div className="flex items-center gap-4">
-                  <div className="h-10 w-10 rounded-lg shrink-0 shadow-sm" style={{ backgroundColor: color }} />
+                <div className="h-10 w-10 shrink-0 rounded-lg shadow-sm" style={{ backgroundColor: color }} />
                 <Input
                   value={name}
                   onChange={(e) => setName(e.target.value)}
@@ -374,26 +135,26 @@ export default function ProjectEdit() {
                   required
                 />
               </div>
-                <div className="flex flex-wrap gap-2 mt-2">
+              <div className="mt-2 flex flex-wrap gap-2">
-                  {COLORS.map((c) => (
+                {COLORS.map((paletteColor) => (
                   <button
-                      key={c}
+                    key={paletteColor}
                     type="button"
-                      onClick={() => setColor(c)}
+                    onClick={() => setColor(paletteColor)}
-                      className={`w-5 h-5 rounded-full transition-all duration-150 shrink-0 ${
+                    className={`h-5 w-5 shrink-0 rounded-full transition-all duration-150 ${
-                        color === c
+                      color === paletteColor
-                          ? "ring-2 ring-offset-2 ring-offset-white dark:ring-offset-slate-800 ring-blue-500 scale-110 shadow-md"
+                        ? "scale-110 ring-2 ring-blue-500 ring-offset-2 ring-offset-white shadow-md dark:ring-offset-slate-900"
-                          : "hover:scale-110 shadow-sm"
+                        : "shadow-sm hover:scale-110"
                     }`}
-                      style={{ backgroundColor: c }}
+                    style={{ backgroundColor: paletteColor }}
-                      aria-label={`Select color ${c}`}
+                    aria-label={`Select color ${paletteColor}`}
                   />
                 ))}
               </div>
             </div>
 
             <div>
-                <label className="text-slate-700 dark:text-slate-300 mb-2 flex items-center gap-2">
+              <label className="mb-2 flex items-center gap-2 text-slate-700 dark:text-slate-300">
                 <Briefcase size={16} />
                 {t.projects?.client || "Client"}
               </label>
@@ -402,227 +163,38 @@ export default function ProjectEdit() {
                 onChange={setClient}
                 options={[
                   { value: "", label: t.projects?.noClient || "No Client" },
-                    ...clientsList.map((c) => ({ value: c.id, label: c.name })),
+                  ...clientsList.map((item) => ({ value: item.id, label: item.name })),
                 ]}
+                isLoading={isLoadingData}
                 className="w-full"
                 buttonClassName="w-full"
               />
             </div>
 
             <div>
-                <label className="block text-slate-700 dark:text-slate-300 mb-2">
+              <label className="mb-2 block text-slate-700 dark:text-slate-300">
-                  {t.projects?.descriptionLabel || "Description (Optional)"}
+                {t.projects?.descriptionLabel || "Description"}
               </label>
               <TextAreaInput
                 value={description}
                 onChange={(e) => setDescription(e.target.value)}
                 placeholder={t.projects?.descriptionPlaceholder || "Add more details..."}
-                  rows={4}
+                rows={5}
               />
             </div>
-            </div>
 
-            <div className="mt-8 pt-4 border-t border-slate-200 dark:border-slate-700 flex justify-end gap-3 shrink-0">
+            <div className="flex justify-end gap-3 border-t border-slate-200 pt-4 dark:border-slate-700">
               <Button variant="ghost" type="button" onClick={() => navigate("/projects")}>
                 {t.cancel || "Cancel"}
               </Button>
               <Button type="submit" disabled={isSaving || !name.trim()}>
-                {isSaving && <Loader2 className="me-2 h-4 w-4 animate-spin" />}
+                {isSaving ? <Loader2 className="me-2 h-4 w-4 animate-spin" /> : null}
-                {t.save || "Save Changes"}
+                {t.save || "Save"}
               </Button>
             </div>
           </form>
         </div>
-
-        <div className="w-full lg:w-2/3 flex flex-col min-h-0 bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-800 shadow-sm rounded-lg border">
-          <div className="p-4 border-b border-slate-200 dark:border-slate-700 shrink-0 space-y-4">
-            <div className="flex items-center justify-between">
-              <h3 className="font-semibold text-slate-800 dark:text-slate-200 flex items-center gap-2">
-                <Users size={18} />
-                {t.projects?.projectMembers || "Project Members"}
-              </h3>
-              <Button
-                type="button"
-                variant={addAllMembers ? "destructive" : "outline"}
-                disabled={isAddingAll || isLoadingData}
-                onClick={handleToggleAddAllMembers}
-              >
-                {isAddingAll && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-                {addAllMembers 
-                  ? (t.projects?.removeAllWorkspaceMembers || "Remove All") 
-                  : (t.projects?.addAllWorkspaceMembers || "Add All")}
-              </Button>
       </div>
-            
-            <div className="relative">
-              <Search className="absolute inset-s-3 top-1/2 -translate-y-1/2 text-slate-400" size={18} />
-              <Input
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-                placeholder={t.projects?.searchWorkspaceMembers || "Search by name or enter mobile number..."}
-                className="ps-10"
-              />
-              {isSearching && (
-                <Loader2 className="animate-spin absolute inset-e-3 top-1/2 -translate-y-1/2 text-slate-400" size={18} />
-              )}
-            </div>
-
-            {searchError && (
-              <p className="text-xs text-red-500 dark:text-red-400 mt-2">
-                {t.projects?.userNotFound || "No user found with this mobile number."}
-              </p>
-            )}
-
-            {searchResult && !searchError && (
-              <div className="p-3 border border-blue-200 dark:border-blue-900 bg-blue-50 dark:bg-blue-900/20 rounded-md flex items-center justify-between mt-2">
-                <div className="flex items-center gap-3">
-                  {searchResult.profile_picture ? (
-                    <img 
-                        src={searchResult.profile_picture} 
-                        alt={searchResult.first_name} 
-                        className="w-10 h-10 rounded-full object-cover shadow-sm" 
-                    />
-                  ) : (
-                    <div className="w-10 h-10 rounded-full bg-blue-200 dark:bg-blue-900/50 flex items-center justify-center text-blue-700 dark:text-blue-300 font-bold text-sm shadow-sm flex-shrink-0">
-                        {searchResult.first_name?.[0] || "U"}
-                    </div>
-                  )}
-                  <div className="flex flex-col">
-                    <span className="text-sm font-semibold text-slate-800 dark:text-slate-200">
-                      {searchResult.first_name} {searchResult.last_name}
-                    </span>
-                    <span className="text-xs text-slate-500 dark:text-slate-400">
-                      {searchResult.mobile}
-                    </span>
-                  </div>
-                </div>
-                <Button
-                  type="button"
-                  variant="default"
-                  size="sm"
-                  disabled={members.some((m) => m.user.id === searchResult.id)}
-                  onClick={() => handleAddMember(searchResult)}
-                >
-                  {members.some((m) => m.user.id === searchResult.id)
-                    ? (t.projects?.alreadyInProject || "Already Added")
-                    : (t.projects?.addToProject || "Add to Project")}
-                </Button>
-              </div>
-            )}
-          </div>
-          
-          <div className="flex-1 overflow-y-auto p-2">
-            {isLoadingData ? (
-              <div className="p-4 text-sm text-slate-500 flex justify-center items-center gap-2">
-                <Loader2 className="h-5 w-5 animate-spin" />
-                {t.loading || "Loading..."}
-              </div>
-            ) : (
-              <InfiniteScroll
-                onLoadMore={loadMoreMembers}
-                hasMore={hasMore && searchQuery.trim().length === 0} 
-                isLoading={isLoadingMore}
-              >
-                {displayList.length === 0 ? (
-                  <div className="p-4 text-sm text-slate-500 text-center">
-                    {t.projects?.noWorkspaceMembers || "No members found."}
-                  </div>
-                ) : (
-                  <ul className="divide-y divide-slate-100 dark:divide-slate-700/50">
-                    {displayList.map((item) => {
-                      const addedMemberData = members.find((mm) => mm.user.id === item.user.id);
-                      const isAdded = !!addedMemberData;
-
-                      return (
-                        <li key={item.listId} className="flex flex-col sm:flex-row sm:items-center justify-between p-3 gap-3 hover:bg-slate-50 dark:hover:bg-slate-700/30 transition-colors rounded-lg">
-                          <div className="flex items-center gap-3">
-                            {item.user.profile_picture ? (
-                              <img 
-                                src={item.user.profile_picture} 
-                                alt={item.user.first_name} 
-                                className="w-9 h-9 rounded-full object-cover shadow-sm" 
-                              />
-                            ) : (
-                              <div className="w-9 h-9 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center text-blue-700 dark:text-blue-300 font-bold text-sm shadow-sm flex-shrink-0">
-                                {item.user.first_name?.[0] || "U"}
-                              </div>
-                            )}
-                            <div className="flex flex-col">
-                              <span className="text-sm font-semibold text-slate-800 dark:text-slate-200 flex items-center gap-2">
-                                {item.user.first_name} {item.user.last_name}
-                                {addedMemberData?.isCreator && (
-                                  <span className="text-[10px] bg-slate-200 dark:bg-slate-600 px-2 py-0.5 rounded-full text-slate-600 dark:text-slate-300 font-bold">
-                                    {t.projects?.creator || "Creator"}
-                                  </span>
-                                )}
-                              </span>
-                              <span className="text-xs text-slate-500 dark:text-slate-400">
-                                {item.user.mobile}
-                              </span>
-                            </div>
-                          </div>
-
-                          <div>
-                            {isAdded ? (
-                              <div className="flex items-center gap-2">
-                                <Select
-                                  value={addedMemberData.role}
-                                  onChange={(val) => handleChangeRole(item.user.id, val)}
-                                  options={[
-                                    { value: "member", label: t.projects?.roles?.member || "Member" },
-                                    { value: "manager", label: t.projects?.roles?.manager || "Manager" },
-                                  ]}
-                                  buttonClassName="text-xs h-8 w-28"
-                                />
-                                <Button
-                                  type="button"
-                                  variant="ghost"
-                                  size="icon"
-                                  className="h-8 w-8 shrink-0 text-slate-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-950"
-                                  onClick={() => openDeleteModal(item.user.id)}
-                                >
-                                  <Trash2 size={16} />
-                                </Button>
-                              </div>
-                            ) : (
-                              <Button
-                                type="button"
-                                variant="secondary"
-                                onClick={() => handleAddMember(item.user)}
-                              >
-                                {t.projects?.addToProject || "Add to Project"}
-                              </Button>
-                            )}
-                          </div>
-                        </li>
-                      );
-                    })}
-                  </ul>
-                )}
-              </InfiniteScroll>
-            )}
-          </div>
-
-        </div>
-      </div>
-
-      <Modal
-        isOpen={isDeleteDialogOpen}
-        onClose={() => setIsDeleteDialogOpen(false)}
-        title={t.projects?.confirmDeleteTitle || "Remove Member"}
-        description={
-          t.projects?.confirmDeleteDesc || "Are you sure you want to remove this member from the project?"
-        }
-      >
-        <div className="flex justify-end gap-3 mt-6">
-          <Button variant="outline" onClick={() => setIsDeleteDialogOpen(false)}>
-            {t.cancel || "Cancel"}
-          </Button>
-          <Button variant="destructive" onClick={handleDeleteMember}>
-            {t.remove || "Remove"}
-          </Button>
-        </div>
-      </Modal>
     </div>
   );
 }