refactor(lists): align client and project page controls
This commit is contained in:
@@ -9,26 +9,26 @@ import { Plus, Archive, Trash2, Pencil } from "lucide-react";
|
||||
|
||||
import FilterBar from "../components/FilterBar";
|
||||
import { Button } from "../components/ui/button";
|
||||
import { Card } from "../components/ui/card";
|
||||
import { Card } from "../components/ui/card";
|
||||
import { Modal } from "../components/Modal";
|
||||
import { toast } from "sonner";
|
||||
import { Input } from "../components/ui/input";
|
||||
import {
|
||||
PROJECTS_ARCHIVE,
|
||||
PROJECTS_CREATE,
|
||||
PROJECTS_DELETE,
|
||||
PROJECTS_EDIT,
|
||||
canWorkspace,
|
||||
} from "../lib/permissions";
|
||||
import { toast } from "sonner";
|
||||
import { Input } from "../components/ui/input";
|
||||
import {
|
||||
PROJECTS_ARCHIVE,
|
||||
PROJECTS_CREATE,
|
||||
PROJECTS_DELETE,
|
||||
PROJECTS_EDIT,
|
||||
canWorkspace,
|
||||
} from "../lib/permissions";
|
||||
|
||||
export const Projects: React.FC = () => {
|
||||
const { t, lang } = useTranslation();
|
||||
const { activeWorkspace } = useWorkspace();
|
||||
const workspaceRole = activeWorkspace?.my_role;
|
||||
const canCreateProject = canWorkspace(workspaceRole, PROJECTS_CREATE);
|
||||
const canEditProject = canWorkspace(workspaceRole, PROJECTS_EDIT);
|
||||
const canDeleteProject = canWorkspace(workspaceRole, PROJECTS_DELETE);
|
||||
const canArchiveProject = canWorkspace(workspaceRole, PROJECTS_ARCHIVE);
|
||||
export const Projects: React.FC = () => {
|
||||
const { t, lang } = useTranslation();
|
||||
const { activeWorkspace } = useWorkspace();
|
||||
const workspaceRole = activeWorkspace?.my_role;
|
||||
const canCreateProject = canWorkspace(workspaceRole, PROJECTS_CREATE);
|
||||
const canEditProject = canWorkspace(workspaceRole, PROJECTS_EDIT);
|
||||
const canDeleteProject = canWorkspace(workspaceRole, PROJECTS_DELETE);
|
||||
const canArchiveProject = canWorkspace(workspaceRole, PROJECTS_ARCHIVE);
|
||||
|
||||
const [projects, setProjects] = useState<any[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
@@ -100,7 +100,7 @@ export const Projects: React.FC = () => {
|
||||
setProjectToDelete(project);
|
||||
};
|
||||
|
||||
const confirmDelete = async () => {
|
||||
const confirmDelete = async () => {
|
||||
if (!deleteModal.project) return;
|
||||
try {
|
||||
const deletedId = deleteModal.project.id;
|
||||
@@ -118,20 +118,20 @@ export const Projects: React.FC = () => {
|
||||
} catch (error) {
|
||||
toast.error(t.projects?.deleteError || 'Failed to delete project');
|
||||
}
|
||||
};
|
||||
|
||||
const formatDate = (dateStr: string | undefined) => {
|
||||
if (!dateStr) return "-"
|
||||
try {
|
||||
const date = new Date(dateStr)
|
||||
return new Intl.DateTimeFormat(lang === "fa" ? "fa-IR" : "en-US", {
|
||||
dateStyle: "long",
|
||||
timeZone: "Asia/Tehran",
|
||||
}).format(date)
|
||||
} catch {
|
||||
return dateStr
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const formatDate = (dateStr: string | undefined) => {
|
||||
if (!dateStr) return "-"
|
||||
try {
|
||||
const date = new Date(dateStr)
|
||||
return new Intl.DateTimeFormat(lang === "fa" ? "fa-IR" : "en-US", {
|
||||
dateStyle: "long",
|
||||
timeZone: "Asia/Tehran",
|
||||
}).format(date)
|
||||
} catch {
|
||||
return dateStr
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
@@ -142,26 +142,26 @@ export const Projects: React.FC = () => {
|
||||
<p className="text-slate-500 dark:text-slate-400 mt-1">{t.projects?.description(activeWorkspace?.name || "-") || 'Manage your projects'}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 w-full sm:w-auto">
|
||||
{canArchiveProject && (
|
||||
<Button
|
||||
variant={isArchived ? "default" : "secondary"}
|
||||
onClick={() => setIsArchived(!isArchived)}
|
||||
className="gap-2 shadow-sm flex-1 sm:flex-none"
|
||||
>
|
||||
<Archive className="h-4 w-4" />
|
||||
{isArchived ? (t.projects?.active || 'Active Projects') : (t.projects?.archived || 'Archived Projects')}
|
||||
</Button>
|
||||
)}
|
||||
{canCreateProject && (
|
||||
<Button
|
||||
onClick={() => setIsCreateModalOpen(true)}
|
||||
size="icon"
|
||||
className="shadow-sm"
|
||||
title={t.projects?.createNew || 'Create New'}
|
||||
>
|
||||
<Plus className="h-5 w-5" />
|
||||
</Button>
|
||||
)}
|
||||
{canArchiveProject && (
|
||||
<Button
|
||||
variant={isArchived ? "default" : "secondary"}
|
||||
onClick={() => setIsArchived(!isArchived)}
|
||||
className="gap-2 shadow-sm flex-1 sm:flex-none"
|
||||
>
|
||||
<Archive className="h-4 w-4" />
|
||||
{isArchived ? (t.projects?.active || 'Active Projects') : (t.projects?.archived || 'Archived Projects')}
|
||||
</Button>
|
||||
)}
|
||||
{canCreateProject && (
|
||||
<Button
|
||||
onClick={() => setIsCreateModalOpen(true)}
|
||||
size="icon"
|
||||
className="shadow-sm"
|
||||
title={t.projects?.createNew || 'Create New'}
|
||||
>
|
||||
<Plus className="h-5 w-5" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -174,76 +174,73 @@ export const Projects: React.FC = () => {
|
||||
searchPlaceholder={t.projects?.searchPlaceholder || 'Search projects...'}
|
||||
/>
|
||||
|
||||
{loading ? (
|
||||
<div className="p-12 flex justify-center text-slate-500">
|
||||
<div className="animate-pulse">{t.projects?.loading || 'Loading...'}</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col flex-1">
|
||||
<Card className="overflow-hidden dark:bg-slate-800 dark:border-slate-700 mb-6">
|
||||
<div className="p-0">
|
||||
{projects.length === 0 ? (
|
||||
<div className="py-16 flex flex-col items-center justify-center">
|
||||
<p className="text-slate-500 dark:text-slate-400 font-medium">{t.projects?.emptyState || 'No projects found'}</p>
|
||||
</div>
|
||||
) : (
|
||||
<ul className="divide-y divide-slate-200 dark:divide-slate-800">
|
||||
{projects.map((project) => (
|
||||
<li
|
||||
key={project.id}
|
||||
className="p-4 hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors flex items-center justify-between gap-4"
|
||||
>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h4 className="font-medium text-slate-900 dark:text-white truncate">{project.name}</h4>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400 mt-1 truncate">
|
||||
{project.client ? `${t.projects?.client || "Client"}: ${project.client.name}` : t.projects?.noClient || "No client"}
|
||||
</p>
|
||||
{project.description && (
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400 mt-1 truncate">
|
||||
{project.description}
|
||||
</p>
|
||||
)}
|
||||
<div className="text-[11px] text-slate-400 mt-3 font-medium">
|
||||
{(t.projects as any)?.addedOn || "Added on"}: {formatDate(project.created_at)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{(canEditProject || canDeleteProject) && (
|
||||
<div className="flex items-center gap-1 shrink-0">
|
||||
{canEditProject && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setEditingProject(project)}
|
||||
className="h-8 w-8 text-slate-400 hover:text-blue-600 hover:bg-blue-50 dark:hover:text-blue-400 dark:hover:bg-blue-900/20"
|
||||
title={t.actions?.edit || "Edit"}
|
||||
>
|
||||
<Pencil className="w-4 h-4" />
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{canDeleteProject && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setDeleteModal({ isOpen: true, project })}
|
||||
className="h-8 w-8 text-slate-400 hover:text-red-600 hover:bg-red-50 dark:hover:text-red-400 dark:hover:bg-red-900/20"
|
||||
title={t.actions?.delete || "Delete"}
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Pagination
|
||||
currentPage={currentPage}
|
||||
{loading ? (
|
||||
<div className="p-12 flex justify-center text-slate-500">
|
||||
<div className="animate-pulse">{t.projects?.loading || 'Loading...'}</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col flex-1">
|
||||
<Card className="overflow-hidden dark:bg-slate-800 dark:border-slate-700 mb-6">
|
||||
<div className="p-0">
|
||||
{projects.length === 0 ? (
|
||||
<div className="py-16 flex flex-col items-center justify-center">
|
||||
<p className="text-slate-500 dark:text-slate-400 font-medium">{t.projects?.emptyState || 'No projects found'}</p>
|
||||
</div>
|
||||
) : (
|
||||
<ul className="divide-y divide-slate-200 dark:divide-slate-800">
|
||||
{projects.map((project) => (
|
||||
<li
|
||||
key={project.id}
|
||||
className="p-4 hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors flex items-center justify-between gap-4"
|
||||
>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h4 className="font-medium text-slate-900 dark:text-white truncate">{project.name}</h4>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400 mt-1 truncate">
|
||||
{project.client ? `${t.projects?.client || "Client"}: ${project.client.name}` : t.projects?.noClient || "No client"}
|
||||
</p>
|
||||
{project.description && (
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400 mt-1 truncate">
|
||||
{project.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{(canEditProject || canDeleteProject) && (
|
||||
<div className="flex items-center gap-1 shrink-0">
|
||||
{canEditProject && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setEditingProject(project)}
|
||||
className="h-8 w-8 text-slate-400 hover:text-blue-600 hover:bg-blue-50 dark:hover:text-blue-400 dark:hover:bg-blue-900/20"
|
||||
title={t.actions?.edit || "Edit"}
|
||||
>
|
||||
<Pencil className="w-4 h-4" />
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{canDeleteProject && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setDeleteModal({ isOpen: true, project })}
|
||||
className="h-8 w-8 text-slate-400 hover:text-red-600 hover:bg-red-50 dark:hover:text-red-400 dark:hover:bg-red-900/20"
|
||||
title={t.actions?.delete || "Delete"}
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Pagination
|
||||
currentPage={currentPage}
|
||||
totalCount={totalItems}
|
||||
limit={limit}
|
||||
onPageChange={setCurrentPage}
|
||||
@@ -254,15 +251,15 @@ export const Projects: React.FC = () => {
|
||||
)}
|
||||
|
||||
{/* Modals */}
|
||||
{canCreateProject && isCreateModalOpen && (
|
||||
<ProjectCreateModal
|
||||
isOpen={isCreateModalOpen}
|
||||
onClose={() => setIsCreateModalOpen(false)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{canEditProject && editingProject && (
|
||||
<ProjectEditModal
|
||||
{canCreateProject && isCreateModalOpen && (
|
||||
<ProjectCreateModal
|
||||
isOpen={isCreateModalOpen}
|
||||
onClose={() => setIsCreateModalOpen(false)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{canEditProject && editingProject && (
|
||||
<ProjectEditModal
|
||||
project={editingProject}
|
||||
isOpen={!!editingProject}
|
||||
onClose={() => setEditingProject(null)}
|
||||
|
||||
Reference in New Issue
Block a user