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

style(lists): refresh pagination and loading states

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-04-29 02:05:39 +03:30
parent e4b1dcf3c0
commit 5082dab99e
5 changed files with 240 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/pages/Clients.tsx
View File

@@ -1,5 +1,5 @@
import { useEffect, useState } from "react"
import { Plus, Building2, Loader2, Pencil, Trash2 } from "lucide-react"
import { Plus, Building2, Pencil, Trash2 } from "lucide-react"
import { toast } from "sonner"
import { useWorkspace } from "../context/WorkspaceContext"
import { useAppContext } from "../context/AppContext"
@@ -16,6 +16,7 @@ import CreateClientModal from "../components/CreateClientModal"
import EditClientModal from "../components/EditClientModal"
import DeleteClientModal from "../components/DeleteClientModal"
import FilterBar from "../components/FilterBar"
import { ListPageSkeleton } from "../components/ListPageSkeleton"
import { Button } from "../components/ui/button"
import { Card, CardContent, CardTitle } from "../components/ui/card"
import { Pagination } from "../components/Pagination"
@@ -120,7 +121,8 @@ export default function Clients() {
}
return (
<div className="mx-auto max-w-7xl space-y-5 p-4 md:p-6">
<div className="mx-auto flex min-h-full max-w-7xl flex-col p-4 md:p-6">
<div className="flex flex-1 flex-col gap-5">
<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 className="flex items-start justify-between gap-4">
<div>
@@ -155,15 +157,11 @@ export default function Clients() {
</div>
{isLoading ? (
<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 items-center justify-center text-slate-500 dark:text-slate-400">
<Loader2 className="h-8 w-8 animate-spin" />
</div>
</div>
<ListPageSkeleton variant="standard-grid" />
) : (
<div className="space-y-6">
<div className="flex flex-1 flex-col gap-6">
{clients.length === 0 ? (
<div className="rounded-3xl border-2 border-dashed border-slate-200 bg-white p-12 text-center shadow-sm dark:border-slate-800 dark:bg-slate-900">
<div className="flex flex-1 rounded-3xl border-2 border-dashed border-slate-200 bg-white p-12 text-center shadow-sm dark:border-slate-800 dark:bg-slate-900">
<Building2 className="mx-auto mb-3 h-12 w-12 text-slate-300 dark:text-slate-700" />
<h3 className="text-lg font-medium text-slate-900 dark:text-white">{t.clients.noClients}</h3>
<p className="mt-1 text-slate-500 dark:text-slate-400">
@@ -246,6 +244,7 @@ export default function Clients() {
)}
</div>
)}
</div>
{canCreateClient && (
<CreateClientModal

15
src/pages/Projects.tsx
View File

@@ -10,6 +10,7 @@ import { Pagination } from "../components/Pagination";
import { Plus, Archive, Building2, Pencil, Trash2, X } from "lucide-react";
import FilterBar from "../components/FilterBar";
import { ListPageSkeleton } from "../components/ListPageSkeleton";
import { Button } from "../components/ui/button";
import { Card, CardContent, CardTitle } from "../components/ui/card";
import { Modal } from "../components/Modal";
@@ -181,7 +182,8 @@ export const Projects: React.FC = () => {
return (
<div className="mx-auto max-w-7xl space-y-5 p-4 md:p-6">
<div className="mx-auto flex min-h-full max-w-7xl flex-col p-4 md:p-6">
<div className="flex flex-1 flex-col gap-5">
<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 className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
<div>
@@ -285,13 +287,11 @@ export const Projects: React.FC = () => {
</div>
{loading ? (
<div className="rounded-3xl border border-slate-200 bg-white p-12 shadow-sm dark:border-slate-800 dark:bg-slate-900">
<div className="text-center text-slate-500 dark:text-slate-400">{t.projects?.loading || 'Loading...'}</div>
</div>
<ListPageSkeleton variant="standard-grid" />
) : (
<div className="space-y-6">
<div className="flex flex-1 flex-col gap-6">
{projects.length === 0 ? (
<div className="rounded-3xl border-2 border-dashed border-slate-200 bg-white p-12 text-center shadow-sm dark:border-slate-800 dark:bg-slate-900">
<div className="flex flex-1 rounded-3xl border-2 border-dashed border-slate-200 bg-white p-12 text-center shadow-sm dark:border-slate-800 dark:bg-slate-900">
<Building2 className="mx-auto mb-3 h-12 w-12 text-slate-300 dark:text-slate-700" />
<p className="font-medium text-slate-500 dark:text-slate-400">{t.projects?.emptyState || 'No projects found'}</p>
</div>
@@ -380,9 +380,10 @@ export const Projects: React.FC = () => {
/>
</div>
)}
</div>
{/* Modals */}
{canCreateProject && isCreateModalOpen && (
{canCreateProject && isCreateModalOpen && (
<ProjectCreateModal
isOpen={isCreateModalOpen}
onClose={() => setIsCreateModalOpen(false)}

29
src/pages/Workspaces.tsx
View File

@@ -10,8 +10,9 @@ import {
canWorkspace,
type WorkspaceRole,
} from '../lib/permissions';
import FilterBar from '../components/FilterBar';
import { Button } from '../components/ui/button';
import FilterBar from '../components/FilterBar';
import { ListPageSkeleton } from '../components/ListPageSkeleton';
import { Button } from '../components/ui/button';
import { Input } from '../components/ui/input';
import { Card, CardContent, CardTitle } from '../components/ui/card';
import { Pagination } from '../components/Pagination';
@@ -116,7 +117,8 @@ export default function Workspaces() {
};
return (
<div className="mx-auto max-w-7xl space-y-5 p-4 md:p-6">
<div className="mx-auto flex min-h-full max-w-7xl flex-col p-4 md:p-6">
<div className="flex flex-1 flex-col gap-5">
<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 className="flex items-start justify-between gap-4">
<div>
@@ -146,14 +148,10 @@ export default function Workspaces() {
</div>
{isLoading ? (
<div className="rounded-3xl border border-slate-200 bg-white p-12 shadow-sm dark:border-slate-800 dark:bg-slate-900">
<div className="text-center text-slate-500 dark:text-slate-400">
<div className="animate-pulse">{t.workspace?.loading || 'Loading...'}</div>
</div>
</div>
<ListPageSkeleton variant="list" />
) : (
<div className="space-y-6">
<div className="flex flex-col gap-4">
<div className="flex flex-1 flex-col gap-6">
<div className="flex flex-1 flex-col gap-4">
{workspaces.map((workspace) => {
const canDeleteWorkspace = canWorkspace(workspace.my_role, WORKSPACE_DELETE);
const canEditWorkspace = canWorkspace(workspace.my_role, WORKSPACE_EDIT);
@@ -220,7 +218,7 @@ export default function Workspaces() {
})}
{workspaces.length === 0 && (
<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">
<div className="flex flex-1 rounded-3xl border-2 border-dashed border-slate-200 bg-white py-16 shadow-sm dark:border-slate-800 dark:bg-slate-900">
<div className="flex flex-col items-center justify-center">
<p className="text-slate-500 dark:text-slate-400 font-medium">{t.workspace?.emptyState || 'No workspaces found'}</p>
</div>
@@ -237,10 +235,11 @@ export default function Workspaces() {
pageSizeOptions={[10, 20, 50]}
/>
</div>
)}
{deleteModal.workspace && (
<Modal
)}
</div>
{deleteModal.workspace && (
<Modal
isOpen={deleteModal.isOpen}
onClose={() => {
setDeleteModal({ isOpen: false, workspace: null });