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

feat(permissions): gate workspace resources by role

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-04-25 18:48:49 +03:30
parent c8c689e693
commit 7f0e00f09d
11 changed files with 511 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/projects/ProjectCreateModal.tsx
View File

@@ -3,11 +3,12 @@ import { useTranslation } from "../../hooks/useTranslation";
import { Modal } from "../Modal";
import { createProject } from "../../api/projects";
import { getClients } from "../../api/clients";
import { useWorkspace } from "../../context/WorkspaceContext";
import { Select } from "../ui/Select";
import { Input } from "../ui/input";
import { TextAreaInput } from "../ui/TextAreaInput";
import { toast } from "sonner";
import { useWorkspace } from "../../context/WorkspaceContext";
import { Select } from "../ui/Select";
import { Input } from "../ui/input";
import { TextAreaInput } from "../ui/TextAreaInput";
import { toast } from "sonner";
import { PROJECTS_CREATE, canWorkspace } from "../../lib/permissions";
interface ProjectCreateModalProps {
isOpen: boolean;
@@ -15,8 +16,9 @@ interface ProjectCreateModalProps {
}
export const ProjectCreateModal: React.FC<ProjectCreateModalProps> = ({ isOpen, onClose }) => {
const { t } = useTranslation();
const { activeWorkspace } = useWorkspace();
const { t } = useTranslation();
const { activeWorkspace } = useWorkspace();
const canCreateProject = canWorkspace(activeWorkspace?.my_role, PROJECTS_CREATE);
const [loading, setLoading] = useState(false);
const [clients, setClients] = useState<any[]>([]);
const [formData, setFormData] = useState({
@@ -61,7 +63,7 @@ export const ProjectCreateModal: React.FC<ProjectCreateModalProps> = ({ isOpen,
}
};
const footer = (
const footer = (
<>
<button onClick={onClose} type="button" className="px-4 py-2 text-sm font-medium text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 dark:bg-slate-800 dark:text-slate-300 dark:border-slate-600 dark:hover:bg-slate-700">
{t.actions?.cancel || "Cancel"}
@@ -70,7 +72,9 @@ export const ProjectCreateModal: React.FC<ProjectCreateModalProps> = ({ isOpen,
{loading ? "..." : t.projects?.create}
</button>
</>
);
);
if (!canCreateProject) return null;
return (
<Modal isOpen={isOpen} onClose={onClose} title={t.projects?.createProject} footer={footer}>

53
src/components/projects/ProjectEditModal.tsx
View File

@@ -5,10 +5,11 @@ import { updateProject, toggleArchiveProject } from "../../api/projects";
import { getClients } from "../../api/clients";
import { useWorkspace } from "../../context/WorkspaceContext";
import { Archive, RefreshCcw } from "lucide-react";
import { Select } from "../ui/Select";
import { Input } from "../ui/input";
import { TextAreaInput } from "../ui/TextAreaInput";
import { toast } from "sonner";
import { Select } from "../ui/Select";
import { Input } from "../ui/input";
import { TextAreaInput } from "../ui/TextAreaInput";
import { toast } from "sonner";
import { PROJECTS_ARCHIVE, PROJECTS_EDIT, canWorkspace } from "../../lib/permissions";
interface ProjectEditModalProps {
isOpen: boolean;
@@ -17,8 +18,10 @@ interface ProjectEditModalProps {
}
export const ProjectEditModal: React.FC<ProjectEditModalProps> = ({ isOpen, onClose, project }) => {
const { t } = useTranslation();
const { activeWorkspace } = useWorkspace();
const { t } = useTranslation();
const { activeWorkspace } = useWorkspace();
const canEditProject = canWorkspace(activeWorkspace?.my_role, PROJECTS_EDIT);
const canArchiveProject = canWorkspace(activeWorkspace?.my_role, PROJECTS_ARCHIVE);
const [loading, setLoading] = useState(false);
const [clients, setClients] = useState<any[]>([]);
const [formData, setFormData] = useState({
@@ -86,21 +89,25 @@ export const ProjectEditModal: React.FC<ProjectEditModalProps> = ({ isOpen, onCl
}
};
const footer = (
<div className="flex justify-between w-full">
<button
onClick={handleArchiveToggle}
type="button"
disabled={loading}
className={`flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg border ${
project?.is_archived
? "text-green-600 border-green-600 hover:bg-green-50"
: "text-amber-600 border-amber-600 hover:bg-amber-50"
}`}
>
{project?.is_archived ? <RefreshCcw size={16} /> : <Archive size={16} />}
{project?.is_archived ? t.projects.restore : t.projects.archive}
</button>
const footer = (
<div className="flex justify-between w-full">
{canArchiveProject ? (
<button
onClick={handleArchiveToggle}
type="button"
disabled={loading}
className={`flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg border ${
project?.is_archived
? "text-green-600 border-green-600 hover:bg-green-50"
: "text-amber-600 border-amber-600 hover:bg-amber-50"
}`}
>
{project?.is_archived ? <RefreshCcw size={16} /> : <Archive size={16} />}
{project?.is_archived ? t.projects.restore : t.projects.archive}
</button>
) : (
<div />
)}
<div className="flex gap-2">
<button onClick={onClose} type="button" className="px-4 py-2 text-sm font-medium text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 dark:bg-slate-800 dark:text-slate-300 dark:border-slate-600">
@@ -111,7 +118,9 @@ export const ProjectEditModal: React.FC<ProjectEditModalProps> = ({ isOpen, onCl
</button>
</div>
</div>
);
);
if (!canEditProject) return null;
return (
<Modal isOpen={isOpen} onClose={onClose} title={t.projects.editProject} footer={footer}>