Qlockify/qlockify-frontend-deployment
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(projects): remove project member management ui

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-04-28 19:35:23 +03:30
parent 8bd0e908a1
commit 3efa04094d
9 changed files with 361 additions and 1361 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/api/logs.ts
View File

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

76
src/api/projects.ts
View File

@@ -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> & {
workspace: string;
name: string;
members?: ProjectMemberPayload[];
}
data: Partial<ProjectPayload> & { workspace: string; name: string }
) => {
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 }));
};

1
src/components/logs/LogsFeed.tsx
View File

@@ -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",

1
src/components/logs/LogsFilterBar.tsx
View File

@@ -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" },

42
src/lib/permissions.ts
View File

@@ -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,

1
src/locales/en.ts
View File

@@ -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",

1
src/locales/fa.ts
View File

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

543
src/pages/ProjectCreate.tsx
View File

@@ -1,37 +1,17 @@
import { useState, useEffect, useCallback, useRef } from "react";
import { useNavigate, useBlocker } from "react-router-dom";
import {
Users,
Briefcase,
Trash2,
Search,
Loader2,
} from "lucide-react";
import { useEffect, useState } from "react";
import { useBlocker, useNavigate } from "react-router-dom";
import { Briefcase, Loader2 } from "lucide-react";
import { toast } from "sonner";
import { createProject } from "../api/projects";
import { getClients } from "../api/clients";
import { fetchWorkspaceMemberships } from "../api/workspaces";
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 { createProject } from "../api/projects";
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 { Modal } from "../components/Modal";
type ProjectRole = "manager" | "member";
interface LocalMember {
localId: string;
user: any;
role: ProjectRole;
isCreator?: boolean;
}
import { useWorkspace } from "../context/WorkspaceContext";
import { useTranslation } from "../hooks/useTranslation";
import { PROJECTS_CREATE, canWorkspace } from "../lib/permissions";
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[]>([]);
// 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 [clientsList, setClientsList] = useState<{ id: string; name: string }[]>([]);
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) {
const workspaceId = activeWorkspace.id;
if (!activeWorkspace?.id) return;
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 || []);
const res = await fetchWorkspaceMemberships({
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.");
} catch {
toast.error(t.projects?.clientFetchError || "Failed to load clients.");
} finally {
setIsLoadingData(false);
}
};
loadInitialData();
}
}, [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))
);
};
void loadInitialData();
}, [activeWorkspace?.id, t.projects?.clientFetchError]);
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
@@ -311,20 +84,14 @@ export default function ProjectCreate() {
try {
setIsSaving(true);
const membersPayload = members
.filter((m) => !m.isCreator)
.map((m) => ({ user_id: m.user.id, role: m.role }));
const projectPayload: any = {
const newProject = await createProject({
workspace: activeWorkspace.id,
name,
description,
color,
workspace: activeWorkspace.id,
members: membersPayload,
};
if (client) projectPayload.client = client;
const newProject = await createProject(projectPayload);
client: client || null,
is_archived: false,
});
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
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 (!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">
<h1 className="text-2xl font-bold text-slate-800 dark:text-slate-200 mb-6 shrink-0">
<div className="absolute inset-0 overflow-y-auto bg-slate-50 p-4 dark:bg-slate-900 sm:p-6">
<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="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 id="create-project-form" onSubmit={handleSubmit} className="flex flex-col h-full p-6">
<div className="flex-1 space-y-6">
<div className="rounded-3xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
<form onSubmit={handleSubmit} className="space-y-6 p-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">
{COLORS.map((c) => (
<div className="mt-2 flex flex-wrap gap-2">
{COLORS.map((paletteColor) => (
<button
key={c}
key={paletteColor}
type="button"
onClick={() => setColor(c)}
className={`w-5 h-5 rounded-full transition-all duration-150 shrink-0 ${
color === c
? "ring-2 ring-offset-2 ring-offset-white dark:ring-offset-slate-800 ring-blue-500 scale-110 shadow-md"
: "hover:scale-110 shadow-sm"
onClick={() => setColor(paletteColor)}
className={`h-5 w-5 shrink-0 rounded-full transition-all duration-150 ${
color === paletteColor
? "scale-110 ring-2 ring-blue-500 ring-offset-2 ring-offset-white shadow-md dark:ring-offset-slate-900"
: "shadow-sm hover:scale-110"
}`}
style={{ backgroundColor: c }}
aria-label={`Select color ${c}`}
style={{ backgroundColor: paletteColor }}
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">
{t.projects?.descriptionLabel || "Description (Optional)"}
<label className="mb-2 block text-slate-700 dark:text-slate-300">
{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>
);
}

518
src/pages/ProjectEdit.tsx
View File

@@ -1,37 +1,17 @@
import { useState, useEffect, useCallback, useRef } from "react";
import { useNavigate, useParams, useBlocker } from "react-router-dom";
import {
Users,
Briefcase,
Trash2,
Search,
Loader2,
} from "lucide-react";
import { useEffect, useState } from "react";
import { useBlocker, useNavigate, useParams } from "react-router-dom";
import { Briefcase, 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 { 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 { getProject, updateProject } from "../api/projects";
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 { Modal } from "../components/Modal";
type ProjectRole = "manager" | "member";
interface LocalMember {
localId: string;
user: any;
role: ProjectRole;
isCreator?: boolean;
}
import { useWorkspace } from "../context/WorkspaceContext";
import { useTranslation } from "../hooks/useTranslation";
import { PROJECTS_EDIT, canWorkspace } from "../lib/permissions";
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 [workspaceMembers, setWorkspaceMembers] = useState<any[]>([]);
const [offset, setOffset] = useState(0);
const [hasMore, setHasMore] = useState(true);
const [isLoadingMore, setIsLoadingMore] = useState(false);
const [clientsList, setClientsList] = useState<{ id: string; name: string }[]>([]);
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);
setClientsList(clientsRes.results || []);
const [clientsRes, projectRes] = await Promise.all([
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 || "");
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) {
} catch {
toast.error("Failed to load project data.");
navigate("/projects");
} finally {
@@ -152,144 +80,8 @@ export default function ProjectEdit() {
}
};
loadInitialData();
}
}, [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))
);
};
void loadInitialData();
}, [activeWorkspace?.id, id, navigate]);
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 projectPayload: any = {
const updatedProject = await updateProject(id, {
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">
<h1 className="text-2xl font-bold text-slate-800 dark:text-slate-200 mb-6 shrink-0">
<div className="absolute inset-0 overflow-y-auto bg-slate-50 p-4 dark:bg-slate-900 sm:p-6">
<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="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 id="edit-project-form" onSubmit={handleSubmit} className="flex flex-col h-full p-6">
<div className="flex-1 space-y-6">
<div className="rounded-3xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
<form onSubmit={handleSubmit} className="space-y-6 p-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">
{COLORS.map((c) => (
<div className="mt-2 flex flex-wrap gap-2">
{COLORS.map((paletteColor) => (
<button
key={c}
key={paletteColor}
type="button"
onClick={() => setColor(c)}
className={`w-5 h-5 rounded-full transition-all duration-150 shrink-0 ${
color === c
? "ring-2 ring-offset-2 ring-offset-white dark:ring-offset-slate-800 ring-blue-500 scale-110 shadow-md"
: "hover:scale-110 shadow-sm"
onClick={() => setColor(paletteColor)}
className={`h-5 w-5 shrink-0 rounded-full transition-all duration-150 ${
color === paletteColor
? "scale-110 ring-2 ring-blue-500 ring-offset-2 ring-offset-white shadow-md dark:ring-offset-slate-900"
: "shadow-sm hover:scale-110"
}`}
style={{ backgroundColor: c }}
aria-label={`Select color ${c}`}
style={{ backgroundColor: paletteColor }}
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">
{t.projects?.descriptionLabel || "Description (Optional)"}
<label className="mb-2 block text-slate-700 dark:text-slate-300">
{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" />}
{t.save || "Save Changes"}
{isSaving ? <Loader2 className="me-2 h-4 w-4 animate-spin" /> : null}
{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>
);
}