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

feat(improvement): add pagination to endpoints and pages + sync navbar when data changes

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-03-13 10:30:27 +08:00
parent a9ebbf6a4a
commit 56404792c6
14 changed files with 543 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/pages/Clients.tsx
View File

@@ -10,12 +10,18 @@ import DeleteClientModal from "../components/DeleteClientModal"
import FilterBar from "../components/FilterBar"
import { Button } from "../components/ui/button"
import { Card } from "../components/ui/card"
import { Pagination } from "../components/Pagination"
export default function Clients() {
const { activeWorkspace } = useWorkspace()
const [clients, setClients] = useState<Client[]>([])
const [isLoading, setIsLoading] = useState(true)
// Pagination States
const [currentPage, setCurrentPage] = useState(1)
const [totalItems, setTotalItems] = useState(0)
const [limit, setLimit] = useState(10)
// Filter States
const [searchQuery, setSearchQuery] = useState("")
const [debouncedSearch, setDebouncedSearch] = useState("")
@@ -37,6 +43,11 @@ export default function Clients() {
{ value: "-updated_at", label: isFa ? "اخیراً بروزرسانی شده" : "Recently Updated" },
]
// بازگشت به صفحه اول در صورت تغییر فیلتر یا جستجو
useEffect(() => {
setCurrentPage(1)
}, [debouncedSearch, ordering])
// Debounce search input to avoid spamming the API
useEffect(() => {
const handler = setTimeout(() => {
@@ -53,8 +64,14 @@ export default function Clients() {
setIsLoading(true)
try {
const data: any = await getClients(activeWorkspace.id, debouncedSearch, ordering)
setClients(data?.results || (Array.isArray(data) ? data : []))
const offset = (currentPage - 1) * limit
const data: any = await getClients(activeWorkspace.id, debouncedSearch, ordering, limit, offset)
const items = data?.results || (Array.isArray(data) ? data : [])
const count = data?.count !== undefined ? data.count : items.length
setClients(items)
setTotalItems(count)
} catch (error) {
console.error(t.clients.errors.fetchFailed, error)
setClients([])
@@ -76,10 +93,9 @@ export default function Clients() {
}
}
// Refetch when workspace, debounced search, or ordering changes
useEffect(() => {
fetchClientsList()
}, [activeWorkspace?.id, debouncedSearch, ordering])
}, [activeWorkspace?.id, debouncedSearch, ordering, currentPage, limit])
if (!activeWorkspace) {
return (
@@ -90,7 +106,7 @@ export default function Clients() {
}
return (
<div className="p-6 max-w-6xl mx-auto min-h-[calc(100vh-73px)]">
<div className="flex flex-col p-6 max-w-6xl mx-auto min-h-[calc(100vh-73px)]">
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-8">
<div>
<h1 className="text-2xl font-bold text-slate-900 dark:text-white">{t.clients.title}</h1>
@@ -114,7 +130,7 @@ export default function Clients() {
searchPlaceholder={t.clients.searchPlaceholder}
/>
<Card className="overflow-hidden dark:bg-slate-900 dark:border-slate-800">
<Card className="overflow-hidden dark:bg-slate-900 dark:border-slate-800 mb-6">
<div className="p-0">
{isLoading ? (
<div className="flex justify-center items-center p-12 text-slate-500">
@@ -169,6 +185,16 @@ export default function Clients() {
</div>
</Card>
{!isLoading && clients.length > 0 && (
<Pagination
currentPage={currentPage}
totalCount={totalItems}
limit={limit}
onPageChange={setCurrentPage}
onLimitChange={setLimit}
/>
)}
<CreateClientModal
isOpen={isCreateModalOpen}
onClose={() => setIsCreateModalOpen(false)}

5
src/pages/Profile.tsx
View File

@@ -114,6 +114,8 @@ export default function Profile() {
const updatedUser = await updateUserProfile(payload)
setUser(prev => prev ? { ...prev, ...updatedUser } : updatedUser)
setIsEditing(false)
window.dispatchEvent(new CustomEvent('profile_updated', { detail: updatedUser }));
toast.success(t.profile.toasts.successEdit)
} catch (error) {
toast.error(t.profile.toasts.error)
@@ -131,6 +133,8 @@ export default function Profile() {
setUser(prev => prev ? { ...prev, profile_picture: response.profile_picture } : response)
setIsPicModalOpen(false)
setSelectedFile(null)
window.dispatchEvent(new CustomEvent('profile_updated', { detail: { profile_picture: response.profile_picture || null } }));
toast.success(t.profile.toasts.successImage)
} catch (error) {
toast.error(t.profile.toasts.error)
@@ -146,6 +150,7 @@ export default function Profile() {
const response = await removeProfilePicture()
setUser(prev => prev ? { ...prev, profile_picture: response.profile_picture || null } : response)
setIsPicModalOpen(false)
window.dispatchEvent(new CustomEvent('profile_updated', { detail: { profile_picture: response.profile_picture || null } }));
toast.success(t.profile.toasts.successRemoveImage)
} catch (error) {
toast.error(t.profile.toasts.error)

6
src/pages/WorkspaceCreate.tsx
View File

@@ -101,9 +101,13 @@ export default function WorkspaceCreate() {
description,
members: members.map(m => ({ user_id: m.user.id, role: m.role }))
};
const newWorkspace = await createWorkspace({ name, description });
await createWorkspace(payload);
window.dispatchEvent(new CustomEvent('workspace_created', {
detail: newWorkspace
}));
toast.success(t.workspace?.toast?.successCreate || "Workspace created successfully.");
navigate('/workspaces');
} catch (error) {
toast.error(t.workspace?.toast?.errorCreate || "Failed to create workspace.");

157
src/pages/WorkspaceEdit.tsx
View File

@@ -15,12 +15,15 @@ import {
import { searchUserByExactMobile, type SearchedUser } from '../api/users';
import { useAppContext } from '../context/AppContext';
import { Button } from '../components/ui/button';
import { InfiniteScroll } from '../components/infiniteScroll';
const toEnglishDigits = (str: string) => {
return str.replace(/[۰-۹]/g, (d) => '۰۱۲۳۴۵۶۷۸۹'.indexOf(d).toString())
.replace(/[٠-٩]/g, (d) => '٠١٢٣٤٥٦٧٨٩'.indexOf(d).toString());
};
const LIMIT = 10;
export default function EditWorkspace() {
const navigate = useNavigate();
const { id } = useParams<{ id: string }>();
@@ -52,6 +55,11 @@ export default function EditWorkspace() {
const [isSearching, setIsSearching] = useState(false);
const [newMemberRole, setNewMemberRole] = useState<'owner' | 'admin' | 'member' | 'guest'>('member');
// Pagination States
const [offset, setOffset] = useState(0);
const [hasMore, setHasMore] = useState(true);
const [isLoadingMembers, setIsLoadingMembers] = useState(false);
// Modal State
const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
const [memberIdToDelete, setMemberIdToDelete] = useState<string | null>(null);
@@ -71,8 +79,12 @@ export default function EditWorkspace() {
setMyRole(workspaceData.my_role || 'member');
setWorkspaceOwnerId(workspaceData.owner || '');
const membersData = await fetchWorkspaceMemberships(id!);
setMembers(membersData);
const membersData = await fetchWorkspaceMemberships({ workspace: id!, limit: LIMIT, offset: 0 });
const results = membersData.results || (Array.isArray(membersData) ? membersData : []);
setMembers(results);
setOffset(LIMIT);
setHasMore(!!membersData.next);
} catch (error) {
toast.error(t.workspace?.toast?.errorLoad || "Failed to load workspace data.");
navigate('/workspaces');
@@ -81,6 +93,23 @@ export default function EditWorkspace() {
}
};
const loadMoreMembers = async () => {
if (isLoadingMembers || !hasMore || !id) return;
try {
setIsLoadingMembers(true);
const membersData = await fetchWorkspaceMemberships({ workspace: id, limit: LIMIT, offset });
const results = membersData.results || [];
setMembers((prev) => [...prev, ...results]);
setOffset((prev) => prev + LIMIT);
setHasMore(!!membersData.next);
} catch (error) {
console.error("Failed to load more members", error);
} finally {
setIsLoadingMembers(false);
}
};
useEffect(() => {
if (searchTimeoutRef.current) clearTimeout(searchTimeoutRef.current);
const cleanQuery = toEnglishDigits(searchQuery.trim());
@@ -116,8 +145,14 @@ export default function EditWorkspace() {
if (!name.trim() || !id) return;
try {
setIsSaving(true);
await updateWorkspace(id, { name, description });
toast.success(t.workspace?.toast?.successUpdate || "Workspace updated successfully.");
window.dispatchEvent(new CustomEvent('workspace_edited', {
detail: { id, name, description }
}));
navigate('/workspaces');
} catch (error) {
toast.error(t.workspace?.toast?.errorUpdate || "Failed to update workspace.");
@@ -134,7 +169,7 @@ export default function EditWorkspace() {
user: searchResult.id,
role: newMemberRole
});
setMembers([...members, newMembership]);
setMembers([newMembership, ...members]);
toast.success(t.workspace?.toast?.successAdd || "Member added successfully.");
setSearchQuery('');
setSearchResult(null);
@@ -297,64 +332,72 @@ export default function EditWorkspace() {
)}
<div className="space-y-3">
{members.map((m) => {
const isThisMemberTheFirstOwner = m.user?.id === workspaceOwnerId;
const canChangeThisUserRole = canManageMembers && !isThisMemberTheFirstOwner && (isFirstOwner || m.role !== 'owner');
<InfiniteScroll
onLoadMore={loadMoreMembers}
hasMore={hasMore}
isLoading={isLoadingMembers}
className="space-y-3"
loader={<div className="py-4 text-center text-sm text-slate-500 dark:text-slate-400">{t.workspace?.loading || "Loading more members..."}</div>}
>
{members.map((m) => {
const isThisMemberTheFirstOwner = m.user?.id === workspaceOwnerId;
const canChangeThisUserRole = canManageMembers && !isThisMemberTheFirstOwner && (isFirstOwner || m.role !== 'owner');
return (
<div key={m.id} className="flex flex-col sm:flex-row sm:items-center justify-between p-3 border border-slate-200 dark:border-slate-800 rounded-lg gap-3">
<div className="flex items-center gap-3">
{m.user?.profile_picture ? (
<img src={m.user?.profile_picture} alt={m.user?.first_name} className="w-10 h-10 rounded-full object-cover" />
) : (
<div className="w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-600 dark:text-slate-400 font-bold text-sm">
{m.user?.name?.[0] || m.user?.first_name?.[0] || "U"}
return (
<div key={m.id} className="flex flex-col sm:flex-row sm:items-center justify-between p-3 border border-slate-200 dark:border-slate-800 rounded-lg gap-3">
<div className="flex items-center gap-3">
{m.user?.profile_picture ? (
<img src={m.user?.profile_picture} alt={m.user?.first_name} className="w-10 h-10 rounded-full object-cover" />
) : (
<div className="w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-600 dark:text-slate-400 font-bold text-sm">
{m.user?.name?.[0] || m.user?.first_name?.[0] || "U"}
</div>
)}
<div>
<p className="text-sm font-medium text-slate-900 dark:text-slate-100">
{m.user?.name || `${m.user?.first_name || ''} ${m.user?.last_name || ''}`.trim() || 'Unknown'}
</p>
<p className="text-xs text-slate-500">{toPersianNum(m.user?.mobile)}</p>
</div>
)}
<div>
<p className="text-sm font-medium text-slate-900 dark:text-slate-100">
{m.user?.name || `${m.user?.first_name || ''} ${m.user?.last_name || ''}`.trim() || 'Unknown'}
</p>
<p className="text-xs text-slate-500">{toPersianNum(m.user?.mobile)}</p>
</div>
<div className="flex items-center gap-3 self-end sm:self-auto">
{canChangeThisUserRole ? (
<select
value={m.role}
onChange={(e) => handleChangeRole(m.id, e.target.value)}
className="text-sm bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-md px-2 py-1 outline-none focus:ring-2 focus:ring-blue-500 text-slate-700 dark:text-slate-300"
>
{isFirstOwner && <option value="owner">{t.workspace?.roles?.owner || "Owner"}</option>}
<option value="admin">{t.workspace?.roles?.admin || "Admin"}</option>
<option value="member">{t.workspace?.roles?.member || "Member"}</option>
<option value="guest">{t.workspace?.roles?.guest || "Guest"}</option>
</select>
) : (
<span className="text-xs px-2 py-1 bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 rounded-md capitalize flex items-center gap-1">
{m.role === 'owner' && <Shield className="w-3 h-3" />}
{m.role ? t.workspace?.roles?.[m.role] || m.role : "-"}
</span>
)}
{canManageMembers && !isThisMemberTheFirstOwner && (isFirstOwner || m.role !== 'owner') && (
<Button
type="button"
variant="ghost"
size="icon"
onClick={() => openDeleteModal(m.id)}
className="h-8 w-8 text-slate-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10"
title={t.workspace?.removeMemberTitle || "Remove member"}
>
<Trash2 className="w-4 h-4" />
</Button>
)}
</div>
</div>
<div className="flex items-center gap-3 self-end sm:self-auto">
{canChangeThisUserRole ? (
<select
value={m.role}
onChange={(e) => handleChangeRole(m.id, e.target.value)}
className="text-sm bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-md px-2 py-1 outline-none focus:ring-2 focus:ring-blue-500 text-slate-700 dark:text-slate-300"
>
{isFirstOwner && <option value="owner">{t.workspace?.roles?.owner || "Owner"}</option>}
<option value="admin">{t.workspace?.roles?.admin || "Admin"}</option>
<option value="member">{t.workspace?.roles?.member || "Member"}</option>
<option value="guest">{t.workspace?.roles?.guest || "Guest"}</option>
</select>
) : (
<span className="text-xs px-2 py-1 bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 rounded-md capitalize flex items-center gap-1">
{m.role === 'owner' && <Shield className="w-3 h-3" />}
{m.role ? t.workspace?.roles?.[m.role] || m.role : "-"}
</span>
)}
{canManageMembers && !isThisMemberTheFirstOwner && (isFirstOwner || m.role !== 'owner') && (
<Button
type="button"
variant="ghost"
size="icon"
onClick={() => openDeleteModal(m.id)}
className="h-8 w-8 text-slate-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10"
title={t.workspace?.removeMemberTitle || "Remove member"}
>
<Trash2 className="w-4 h-4" />
</Button>
)}
</div>
</div>
);
})}
{members.length === 0 && (
);
})}
</InfiniteScroll>
{members.length === 0 && !isLoadingMembers && (
<p className="text-sm text-center text-slate-500 py-4">
{t.workspace?.noMembers || "No members found."}
</p>

177
src/pages/Workspaces.tsx
View File

@@ -7,6 +7,7 @@ import { useAppContext } from '../context/AppContext';
import { useTranslation } from '../hooks/useTranslation';
import FilterBar from '../components/FilterBar';
import { Button } from '../components/ui/button';
import { Pagination } from '../components/Pagination';
type WorkspaceRole = "owner" | "admin" | "member" | "guest";
@@ -33,6 +34,11 @@ export default function Workspaces() {
const [isLoading, setIsLoading] = useState(true);
const [searchQuery, setSearchQuery] = useState('');
const [ordering, setOrdering] = useState('-updated_at');
// تنظیمات پاژینیشن
const [currentPage, setCurrentPage] = useState(1);
const [totalItems, setTotalItems] = useState(0);
const [limit, setLimit] = useState(9);
const [deleteModal, setDeleteModal] = useState<{isOpen: boolean; workspace: Workspace | null}>({isOpen: false, workspace: null});
const [deleteInput, setDeleteInput] = useState('');
@@ -48,22 +54,37 @@ export default function Workspaces() {
{ value: 'name', label: t.workspace?.orderByName || 'Name (A-Z)' },
];
// وقتی جستجو یا ترتیب تغییر کرد، به صفحه اول برگرد
useEffect(() => {
setCurrentPage(1);
}, [searchQuery, ordering]);
useEffect(() => {
const timer = setTimeout(() => {
loadWorkspaces();
}, 400);
return () => clearTimeout(timer);
}, [searchQuery, ordering]);
}, [searchQuery, ordering, currentPage, limit]);
const loadWorkspaces = async () => {
try {
setIsLoading(true);
const params: Record<string, string> = {};
const params: Record<string, string | number> = {
limit: limit,
offset: (currentPage - 1) * limit,
};
if (searchQuery) params.search = searchQuery;
if (ordering) params.ordering = ordering;
const data = await fetchWorkspaces(params);
setWorkspaces(data);
const data = await fetchWorkspaces(params as any);
// استخراج هوشمند نتایج و تعداد کل
const items = Array.isArray(data) ? data : (data?.results || []);
const count = !Array.isArray(data) && data?.count !== undefined ? data.count : items.length;
setWorkspaces(items);
setTotalItems(count);
} catch (error) {
toast.error(t.workspace?.fetchError || 'Error fetching workspaces');
} finally {
@@ -71,11 +92,19 @@ export default function Workspaces() {
}
};
const confirmDelete = async () => {
const confirmDelete = async () => {
if (!deleteModal.workspace) return;
try {
await deleteWorkspace(deleteModal.workspace.id);
setWorkspaces(workspaces.filter((w) => w.id !== deleteModal.workspace!.id));
const deletedId = deleteModal.workspace.id;
await deleteWorkspace(deletedId);
loadWorkspaces();
// ارسال سیگنال به کل اپلیکیشن برای آپدیت نوار ناوبری
window.dispatchEvent(new CustomEvent('workspace_deleted', {
detail: { id: deletedId }
}));
toast.success(t.workspace?.deleteSuccess || 'Workspace deleted successfully');
setDeleteModal({ isOpen: false, workspace: null });
setDeleteInput('');
@@ -85,18 +114,18 @@ export default function Workspaces() {
};
return (
<div className="max-w-5xl mx-auto p-6">
<div className="flex flex-col p-6 max-w-6xl mx-auto min-h-[calc(100vh-73px)]">
<div className="flex justify-between items-center mb-8">
<div>
<h1 className="text-2xl font-bold text-slate-900 dark:text-white">{t.workspace?.title}</h1>
<p className="text-slate-500 dark:text-slate-400 mt-1">{t.workspace?.subtitle}</p>
<h1 className="text-2xl font-bold text-slate-900 dark:text-white">{t.workspace?.title || 'Workspaces'}</h1>
<p className="text-slate-500 dark:text-slate-400 mt-1">{t.workspace?.subtitle || 'Manage your workspaces'}</p>
</div>
<Button
onClick={() => navigate('/workspaces/create')}
className="gap-2 rounded-xl shadow-sm"
>
<Plus className="h-5 w-5" />
{t.workspace?.createNew}
{t.workspace?.createNew || 'Create New'}
</Button>
</div>
@@ -106,7 +135,7 @@ export default function Workspaces() {
ordering={ordering}
setOrdering={setOrdering}
orderingOptions={orderingOptions}
searchPlaceholder={t.workspace?.searchPlaceholder}
searchPlaceholder={t.workspace?.searchPlaceholder || 'Search...'}
/>
{isLoading ? (
@@ -114,79 +143,91 @@ export default function Workspaces() {
<div className="animate-pulse">{t.workspace?.loading || 'Loading...'}</div>
</div>
) : (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
{workspaces.map((workspace) => {
const isOwner = workspace.owner === user?.id || workspace.my_role === 'owner';
const isAdmin = workspace.my_role === 'admin' || isOwner;
<>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
{workspaces.map((workspace) => {
const isOwner = workspace.owner === user?.id || workspace.my_role === 'owner';
const isAdmin = workspace.my_role === 'admin' || isOwner;
return (
<div
key={workspace.id}
className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-2xl p-5 shadow-sm hover:shadow-md transition-shadow flex flex-col"
>
<div className="flex-1">
<div className="flex justify-between items-start mb-3 gap-2">
<h3 className="text-lg font-bold text-slate-900 dark:text-white line-clamp-1">
{workspace.name}
</h3>
<RoleBadge role={workspace.my_role} />
return (
<div
key={workspace.id}
className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-2xl p-5 shadow-sm hover:shadow-md transition-shadow flex flex-col"
>
<div className="flex-1">
<div className="flex justify-between items-start mb-3 gap-2">
<h3 className="text-lg font-bold text-slate-900 dark:text-white line-clamp-1">
{workspace.name}
</h3>
<RoleBadge role={workspace.my_role} />
</div>
<p className="text-sm text-slate-500 dark:text-slate-400 line-clamp-2">
{workspace.description || t.workspace?.noDescription || 'No description'}
</p>
</div>
<p className="text-sm text-slate-500 dark:text-slate-400 line-clamp-2">
{workspace.description || t.workspace?.noDescription}
</p>
</div>
<div className="mt-6 flex items-center justify-end gap-2 border-t border-slate-100 dark:border-slate-800 pt-4">
<Button
variant="secondary"
size="icon"
onClick={() => navigate(`/workspaces/${workspace.id}`)}
className="rounded-xl hover:text-blue-600 dark:hover:text-blue-400"
title={t.workspace?.view}
>
<Eye className="h-4 w-4" />
</Button>
{isAdmin && (
<div className="mt-6 flex items-center justify-end gap-2 border-t border-slate-100 dark:border-slate-800 pt-4">
<Button
variant="secondary"
size="icon"
onClick={() => navigate(`/workspaces/${workspace.id}/edit`)}
className="rounded-xl hover:text-emerald-600 dark:hover:text-emerald-400"
title={t.workspace?.edit}
onClick={() => navigate(`/workspaces/${workspace.id}`)}
className="rounded-xl hover:text-blue-600 dark:hover:text-blue-400"
title={t.workspace?.view || 'View'}
>
<Edit2 className="h-4 w-4" />
<Eye className="h-4 w-4" />
</Button>
)}
{isOwner && (
<Button
variant="secondary"
size="icon"
onClick={() => setDeleteModal({ isOpen: true, workspace })}
className="rounded-xl hover:text-red-600 dark:hover:text-red-400"
title={t.workspace?.delete}
>
<Trash2 className="h-4 w-4" />
</Button>
)}
{isAdmin && (
<Button
variant="secondary"
size="icon"
onClick={() => navigate(`/workspaces/${workspace.id}/edit`)}
className="rounded-xl hover:text-emerald-600 dark:hover:text-emerald-400"
title={t.workspace?.edit || 'Edit'}
>
<Edit2 className="h-4 w-4" />
</Button>
)}
{isOwner && (
<Button
variant="secondary"
size="icon"
onClick={() => setDeleteModal({ isOpen: true, workspace })}
className="rounded-xl hover:text-red-600 dark:hover:text-red-400"
title={t.workspace?.delete || 'Delete'}
>
<Trash2 className="h-4 w-4" />
</Button>
)}
</div>
</div>
);
})}
{workspaces.length === 0 && (
<div className="col-span-full py-16 flex flex-col items-center justify-center border-2 border-dashed border-slate-200 dark:border-slate-800 rounded-2xl">
<p className="text-slate-500 dark:text-slate-400 font-medium">{t.workspace?.emptyState || 'No workspaces found'}</p>
</div>
);
})}
)}
</div>
{workspaces.length === 0 && (
<div className="col-span-full py-16 flex flex-col items-center justify-center border-2 border-dashed border-slate-200 dark:border-slate-800 rounded-2xl">
<p className="text-slate-500 dark:text-slate-400 font-medium">{t.workspace?.emptyState || 'No workspaces found'}</p>
</div>
)}
</div>
<Pagination
currentPage={currentPage}
totalCount={totalItems}
limit={limit}
onPageChange={setCurrentPage}
onLimitChange={setLimit}
pageSizeOptions={[9, 12, 24]} // Custom options for Workspaces
/>
</>
)}
{/* Delete Modal */}
{deleteModal.isOpen && deleteModal.workspace && (
<div className="fixed inset-0 bg-slate-900/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
<div className="bg-white dark:bg-slate-900 rounded-2xl p-6 max-w-md w-full shadow-2xl border border-slate-200 dark:border-slate-800">
<h3 className="text-xl font-bold text-red-600 mb-2">{t.workspace?.deleteTitle || 'Delete Workspace'}</h3>
<h3 className="text-xl font-bold text-slate-900 dark:text-white mb-2">{t.workspace?.deleteTitle || 'Delete Workspace'}</h3>
<p className="text-slate-600 dark:text-slate-400 mb-5 text-sm leading-relaxed">
{t.workspace?.deleteWarning || 'To confirm deletion, please type the workspace name:'} <strong className="text-slate-900 dark:text-white select-all">{deleteModal.workspace.name}</strong>
</p>