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

style(workspaces): align workspaces page with report layout

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-04-29 00:56:03 +03:30
parent d57f0b05e3
commit 8868b7d1cc
1 changed files with 59 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
src/pages/Workspaces.tsx
View File

@@ -115,42 +115,48 @@ export default function Workspaces() {
} }
}; };
return ( return (
<div className="flex flex-col p-6 min-h-[calc(100vh-73px)] bg-slate-50 dark:bg-slate-900"> <div className="mx-auto max-w-7xl space-y-5 p-4 md:p-6">
<div className="flex justify-between items-center mb-8"> <div className="rounded-3xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900 sm:p-6">
<div> <div className="flex items-start justify-between gap-4">
<h1 className="text-2xl font-bold text-slate-900 dark:text-white">{t.workspace?.title || 'Workspaces'}</h1> <div>
<p className="text-slate-500 dark:text-slate-400 mt-1">{t.workspace?.subtitle || 'Manage your workspaces'}</p> <h1 className="text-2xl font-bold text-slate-900 dark:text-white">{t.workspace?.title || 'Workspaces'}</h1>
</div> <p className="mt-1 text-sm text-slate-500 dark:text-slate-400">{t.workspace?.subtitle || 'Manage your workspaces'}</p>
<Button </div>
onClick={() => navigate('/workspaces/create')} <Button
size="icon" onClick={() => navigate('/workspaces/create')}
className="shadow-sm" size="icon"
title={t.workspace?.createNew || 'Create New'} className="shrink-0 shadow-sm"
> title={t.workspace?.createNew || 'Create New'}
<Plus className="h-5 w-5" /> >
</Button> <Plus className="h-5 w-5" />
</div> </Button>
</div>
<FilterBar </div>
searchQuery={searchQuery}
setSearchQuery={setSearchQuery} <div className="rounded-3xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-800 dark:bg-slate-900 sm:p-5">
ordering={ordering} <FilterBar
setOrdering={setOrdering} searchQuery={searchQuery}
orderingOptions={orderingOptions} setSearchQuery={setSearchQuery}
searchPlaceholder={t.workspace?.searchPlaceholder || 'Search...'} ordering={ordering}
/> setOrdering={setOrdering}
orderingOptions={orderingOptions}
{isLoading ? ( searchPlaceholder={t.workspace?.searchPlaceholder || 'Search...'}
<div className="p-12 flex justify-center text-slate-500"> />
<div className="animate-pulse">{t.workspace?.loading || 'Loading...'}</div> </div>
</div>
) : ( {isLoading ? (
<div className="flex flex-col flex-1"> <div className="rounded-3xl border border-slate-200 bg-white p-12 shadow-sm dark:border-slate-800 dark:bg-slate-900">
<div className="flex flex-col gap-4 mb-6"> <div className="text-center text-slate-500 dark:text-slate-400">
{workspaces.map((workspace) => { <div className="animate-pulse">{t.workspace?.loading || 'Loading...'}</div>
const canDeleteWorkspace = canWorkspace(workspace.my_role, WORKSPACE_DELETE); </div>
const canEditWorkspace = canWorkspace(workspace.my_role, WORKSPACE_EDIT); </div>
) : (
<div className="space-y-6">
<div className="flex flex-col gap-4">
{workspaces.map((workspace) => {
const canDeleteWorkspace = canWorkspace(workspace.my_role, WORKSPACE_DELETE);
const canEditWorkspace = canWorkspace(workspace.my_role, WORKSPACE_EDIT);
return ( return (
<Card key={workspace.id} className="flex flex-col text-slate-800 dark:text-slate-100 dark:bg-slate-800 dark:border-slate-700 shadow-sm"> <Card key={workspace.id} className="flex flex-col text-slate-800 dark:text-slate-100 dark:bg-slate-800 dark:border-slate-700 shadow-sm">
@@ -211,24 +217,26 @@ export default function Workspaces() {
</CardContent> </CardContent>
</Card> </Card>
); );
})} })}
{workspaces.length === 0 && ( {workspaces.length === 0 && (
<div className="py-16 flex flex-col items-center justify-center border-2 border-dashed border-slate-200 dark:border-slate-800 rounded-2xl"> <div className="rounded-3xl border-2 border-dashed border-slate-200 bg-white py-16 shadow-sm dark:border-slate-800 dark:bg-slate-900">
<p className="text-slate-500 dark:text-slate-400 font-medium">{t.workspace?.emptyState || 'No workspaces found'}</p> <div className="flex flex-col items-center justify-center">
</div> <p className="text-slate-500 dark:text-slate-400 font-medium">{t.workspace?.emptyState || 'No workspaces found'}</p>
)} </div>
</div> </div>
)}
<Pagination </div>
<Pagination
currentPage={currentPage} currentPage={currentPage}
totalCount={totalItems} totalCount={totalItems}
limit={limit} limit={limit}
onPageChange={setCurrentPage} onPageChange={setCurrentPage}
onLimitChange={setLimit} onLimitChange={setLimit}
pageSizeOptions={[10, 20, 50]} pageSizeOptions={[10, 20, 50]}
/> />
</div> </div>
)} )}
{deleteModal.workspace && ( {deleteModal.workspace && (