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

fix(permissions): align workspace resource actions with role rules

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-04-28 10:02:37 +03:30
parent 9fceef3753
commit b1ad372474
8 changed files with 141 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/api/projects.ts
View File

@@ -1,9 +1,16 @@
import { authFetch } from "./client";
export interface ProjectClient {
id: string;
name: string;
}
import { authFetch } from "./client";
interface AuditUser {
id: string;
first_name?: string;
last_name?: string;
mobile?: string;
}
export interface ProjectClient {
id: string;
name: string;
}
export interface ProjectMemberPayload {
user_id: string;
@@ -33,6 +40,7 @@ export interface Project {
is_archived: boolean;
is_deleted?: boolean;
workspace: string;
created_by?: AuditUser | null;
client: ProjectClient | null;
my_role?: string;
members?: ProjectMembership[];

8
src/api/tags.ts
View File

@@ -1,11 +1,19 @@
import { authFetch } from "./client";
interface AuditUser {
id: string;
first_name?: string;
last_name?: string;
mobile?: string;
}
export interface Tag {
id: string;
workspace: string;
name: string;
color: string;
is_deleted?: boolean;
created_by?: AuditUser | null;
created_at: string;
updated_at: string;
}

15
src/lib/permissions.ts
View File

@@ -163,6 +163,21 @@ export const canProject = ({
return projectRole === "manager" && PROJECT_MANAGER_CAPABILITIES.has(capability);
};
export const canDeleteWorkspaceResource = ({
workspaceRole,
currentUserId,
createdById,
}: {
workspaceRole: WorkspaceRole | null | undefined;
currentUserId?: string | null;
createdById?: string | null;
}) => {
if (!workspaceRole) return false;
if (workspaceRole === "owner") return true;
if (!currentUserId || !createdById) return false;
return currentUserId === createdById;
};
export const canChangeWorkspaceMember = ({
actorRole,
actorUserId,

62
src/pages/Clients.tsx
View File

@@ -1,13 +1,14 @@
import { useEffect, useState } from "react"
import { Plus, Building2, Loader2, Pencil, Trash2 } from "lucide-react"
import { useWorkspace } from "../context/WorkspaceContext"
import { useTranslation } from "../hooks/useTranslation"
import {
CLIENTS_CREATE,
CLIENTS_DELETE,
CLIENTS_EDIT,
canWorkspace,
} from "../lib/permissions"
import { useWorkspace } from "../context/WorkspaceContext"
import { useAppContext } from "../context/AppContext"
import { useTranslation } from "../hooks/useTranslation"
import {
CLIENTS_CREATE,
CLIENTS_EDIT,
canDeleteWorkspaceResource,
canWorkspace,
} from "../lib/permissions"
import { type Client } from "../types/client"
import { getClients } from "../api/clients"
import CreateClientModal from "../components/CreateClientModal"
@@ -18,9 +19,10 @@ 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[]>([])
export default function Clients() {
const { activeWorkspace } = useWorkspace()
const { user } = useAppContext()
const [clients, setClients] = useState<Client[]>([])
const [isLoading, setIsLoading] = useState(true)
// Pagination States
@@ -40,10 +42,9 @@ export default function Clients() {
const { t, lang } = useTranslation()
const isFa = lang === "fa"
const workspaceRole = activeWorkspace?.my_role
const canCreateClient = canWorkspace(workspaceRole, CLIENTS_CREATE)
const canEditClient = canWorkspace(workspaceRole, CLIENTS_EDIT)
const canDeleteClient = canWorkspace(workspaceRole, CLIENTS_DELETE)
const workspaceRole = activeWorkspace?.my_role
const canCreateClient = canWorkspace(workspaceRole, CLIENTS_CREATE)
const canEditClient = canWorkspace(workspaceRole, CLIENTS_EDIT)
const orderingOptions = [
{ value: "-created_at", label: t.ordering?.createdAtDesc || "Newest First" },
@@ -161,8 +162,14 @@ export default function Clients() {
</div>
) : (
<ul className="divide-y divide-slate-200 dark:divide-slate-800">
{clients.map((client) => (
<li key={client.id} className="p-4 hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors flex items-center justify-between gap-4">
{clients.map((client) => {
const canDeleteClient = canDeleteWorkspaceResource({
workspaceRole,
currentUserId: user?.id,
createdById: client.created_by?.id,
})
return (
<li key={client.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">{client.name}</h4>
{client.notes && (
@@ -196,10 +203,11 @@ export default function Clients() {
)}
</div>
)}
</li>
))}
</ul>
)}
</li>
)
})}
</ul>
)}
</div>
</Card>
@@ -231,12 +239,12 @@ export default function Clients() {
/>
)}
{canDeleteClient && (
<DeleteClientModal
isOpen={!!deleteClient}
onClose={() => setDeleteClient(null)}
onSuccess={fetchClientsList}
client={deleteClient}
{!!deleteClient && (
<DeleteClientModal
isOpen={!!deleteClient}
onClose={() => setDeleteClient(null)}
onSuccess={fetchClientsList}
client={deleteClient}
/>
)}
</div>

48
src/pages/Projects.tsx
View File

@@ -1,7 +1,8 @@
import React, { useState, useEffect } from "react";
import { useTranslation } from "../hooks/useTranslation";
import { getProjects, deleteProject, type Project } from "../api/projects";
import { useWorkspace } from "../context/WorkspaceContext";
import { getProjects, deleteProject, type Project } from "../api/projects";
import { useAppContext } from "../context/AppContext";
import { useWorkspace } from "../context/WorkspaceContext";
import { ProjectCreateModal } from "../components/projects/ProjectCreateModal";
import { ProjectEditModal } from "../components/projects/ProjectEditModal";
import { Pagination } from "../components/Pagination";
@@ -14,21 +15,21 @@ 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";
PROJECTS_ARCHIVE,
PROJECTS_CREATE,
PROJECTS_EDIT,
canDeleteWorkspaceResource,
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);
const { t, lang } = useTranslation();
const { user } = useAppContext();
const { activeWorkspace } = useWorkspace();
const workspaceRole = activeWorkspace?.my_role;
const canCreateProject = canWorkspace(workspaceRole, PROJECTS_CREATE);
const canEditProject = canWorkspace(workspaceRole, PROJECTS_EDIT);
const canArchiveProject = canWorkspace(workspaceRole, PROJECTS_ARCHIVE);
const [projects, setProjects] = useState<any[]>([]);
const [loading, setLoading] = useState(false);
@@ -188,9 +189,15 @@ export const Projects: React.FC = () => {
</div>
) : (
<ul className="divide-y divide-slate-200 dark:divide-slate-800">
{projects.map((project) => (
<li
key={project.id}
{projects.map((project) => {
const canDeleteProject = canDeleteWorkspaceResource({
workspaceRole,
currentUserId: user?.id,
createdById: project.created_by?.id,
});
return (
<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">
@@ -232,8 +239,9 @@ export const Projects: React.FC = () => {
)}
</div>
)}
</li>
))}
</li>
);
})}
</ul>
)}
</div>

16
src/pages/Tags.tsx
View File

@@ -3,9 +3,10 @@ import { Edit2, Plus, Tag as TagIcon, Trash2 } from "lucide-react";
import { toast } from "sonner";
import { createTag, deleteTag, getTags, type Tag, updateTag } from "../api/tags";
import { useAppContext } from "../context/AppContext";
import { useWorkspace } from "../context/WorkspaceContext";
import { useTranslation } from "../hooks/useTranslation";
import { TAGS_CREATE, TAGS_DELETE, TAGS_EDIT, canWorkspace } from "../lib/permissions";
import { TAGS_CREATE, TAGS_EDIT, canDeleteWorkspaceResource, canWorkspace } from "../lib/permissions";
import FilterBar from "../components/FilterBar";
import { Modal } from "../components/Modal";
import { Pagination } from "../components/Pagination";
@@ -17,11 +18,11 @@ const DEFAULT_COLOR = "#3B82F6";
export default function Tags() {
const { t } = useTranslation();
const { user } = useAppContext();
const { activeWorkspace } = useWorkspace();
const workspaceRole = activeWorkspace?.my_role;
const canCreateTag = canWorkspace(workspaceRole, TAGS_CREATE);
const canEditTag = canWorkspace(workspaceRole, TAGS_EDIT);
const canDeleteTag = canWorkspace(workspaceRole, TAGS_DELETE);
const [tags, setTags] = useState<Tag[]>([]);
const [isLoading, setIsLoading] = useState(false);
@@ -172,7 +173,13 @@ export default function Tags() {
) : (
<div className="flex flex-col flex-1">
<div className="mb-6 grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
{tags.map((tag) => (
{tags.map((tag) => {
const canDeleteTag = canDeleteWorkspaceResource({
workspaceRole,
currentUserId: user?.id,
createdById: tag.created_by?.id,
});
return (
<Card key={tag.id} className="overflow-hidden shadow-sm dark:border-slate-700 dark:bg-slate-800">
<CardContent className="flex h-full flex-col gap-4 p-5">
<div className="flex items-start justify-between gap-3">
@@ -208,7 +215,8 @@ export default function Tags() {
</div>
</CardContent>
</Card>
))}
);
})}
{tags.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 text-slate-500 dark:text-slate-400">

23
src/pages/WorkspaceEdit.tsx
View File

@@ -285,10 +285,11 @@ export default function EditWorkspace() {
const canManageMembers = canWorkspace(myRole, WORKSPACE_MEMBERS_CHANGE_ROLE);
const isFirstOwner = currentUserId === workspaceOwnerId;
const roleOptions = (allowOwner: boolean) => [
...(allowOwner ? [{ value: "owner", label: t.workspace?.roles?.owner || "Owner" }] : []),
{ value: "admin", label: t.workspace?.roles?.admin || "Admin" },
const isOwner = myRole === "owner";
const roleOptions = (allowOwnerRole: boolean, allowAdminRole: boolean) => [
...(allowOwnerRole ? [{ value: "owner", label: t.workspace?.roles?.owner || "Owner" }] : []),
...(allowAdminRole ? [{ value: "admin", label: t.workspace?.roles?.admin || "Admin" }] : []),
{ value: "member", label: t.workspace?.roles?.member || "Member" },
{ value: "guest", label: t.workspace?.roles?.guest || "Guest" },
];
@@ -386,13 +387,13 @@ export default function EditWorkspace() {
<div className="flex items-center gap-2 w-full sm:w-auto mt-2 sm:mt-0">
<Select
value={newMemberRole}
onChange={(val) => setNewMemberRole(val as any)}
options={[
...roleOptions(isFirstOwner),
value={newMemberRole}
onChange={(val) => setNewMemberRole(val as any)}
options={[
...roleOptions(isFirstOwner, isOwner),
]}
className="flex-1 sm:flex-none"
buttonClassName="w-full sm:w-[110px] px-3 py-1.5 text-sm"
className="flex-1 sm:flex-none"
buttonClassName="w-full sm:w-[110px] px-3 py-1.5 text-sm"
/>
<Button
@@ -456,7 +457,7 @@ export default function EditWorkspace() {
<Select
value={m.role}
onChange={(val) => handleChangeRole(m.id, val)}
options={roleOptions(isFirstOwner)}
options={roleOptions(isFirstOwner, isOwner)}
buttonClassName="w-[110px] px-3 py-1.5 text-sm"
/>
) : (

26
src/types/client.ts
View File

@@ -1,12 +1,20 @@
export interface Client {
id: string;
name: string;
notes: string | null;
workspace: string;
can_delete: boolean;
created_at: string;
updated_at: string;
}
interface AuditUser {
id: string;
first_name?: string;
last_name?: string;
mobile?: string;
}
export interface Client {
id: string;
name: string;
notes: string | null;
workspace: string;
created_by?: AuditUser | null;
can_delete: boolean;
created_at: string;
updated_at: string;
}
export interface PaginatedClientList {
count: number;