phantomknight287/saturn

public

The operating system for your freelance business.

update ui, split settings page into smaller subsections and increase precision of member rates0ca99815 months ago171 lines · 4.9 KB

1	/** biome-ignore-all lint/a11y/useValidAriaRole: the role being passed isn't aria-role but user role */
2	import { useRouter }
3	import { Briefcase, X
4	import { useAction }
5	import { toast }
6	import { Avatar, AvatarFallback
7	import { Button }
8	import {
9	Empty,
10	EmptyDescription,
11	EmptyHeader,
12	EmptyMedia,
13	EmptyTitle,
14	} from '@/components/ui/empty'
15	import {
16	Table,
17	TableBody,
18	TableCell,
19	TableHead,
20	TableHeader,
21	TableRow,
22	} from '@/components/ui/table'
23	import { removeClientAction }
24	import type { PendingInvitation,
25	import InviteDialog from './invite-dialog
26	import PendingInvitationsBlock from './pending-invitations
27
28	export default function StakeholdersSection
29	projectId,
30	orgSlug,
31	projectSlug,
32	organizationId,
33	projectClients,
34	pendingInvitations,
35	canManage,
36	showInviteDialog,
37	onShowInviteDialogChange,
38	}: {
39	projectId: string
40	orgSlug: string
41	projectSlug: string
42	organizationId: string
43	projectClients: ProjectClient
44	pendingInvitations: PendingInvitation
45	canManage: boolean
46	showInviteDialog: boolean
47	onShowInviteDialogChange: (open
48	}) {
49	const router =
50
51	const { execute:
52	onSuccess() {
53	toast.success('Client removed from project
54	router.refresh()
55	},
56	onError({ error
57	toast.error(error
58	},
59	})
60
61	if (
62	projectClients.length === 0
63	pendingInvitations.length === 0
64	!canManage
65	) {
66	return (
67	<Empty>
68	<EmptyHeader>
69	<EmptyMedia variant='
70	<Briefcase />
71	</EmptyMedia>
72	<EmptyTitle>No clients assigned</EmptyTitle
73	<EmptyDescription>
74	No clients have been added to this project yet.
75	</EmptyDescription>
76	</EmptyHeader>
77	</Empty>
78	)
79	}
80
81	return (
82	<>
83	{canManage && (
84	<PendingInvitationsBlock
85	invitations={pendingInvitations}
86	organizationId={organizationId}
87	/>
88	)}
89
90	{projectClients.length ===
91	<Empty>
92	<EmptyHeader>
93	<EmptyMedia variant='
94	<Briefcase />
95	</EmptyMedia>
96	<EmptyTitle>No clients yet</EmptyTitle
97	<EmptyDescription>
98	Invite clients by email to give them visibility into this project.
99	</EmptyDescription>
100	</EmptyHeader>
101	</Empty>
102	) : (
103	<Table>
104	<TableHeader>
105	<TableRow>
106	<TableHead>Client</TableHead
107	<TableHead>Added</TableHead
108	{canManage && <TableHead
109	</TableRow>
110	</TableHeader>
111	<TableBody>
112	{projectClients.map((
113	<TableRow key={
114	<TableCell>
115	<div className='flex items-center gap-3
116	<Avatar className='
117	<AvatarImage alt={
118	<AvatarFallback>
119	{c.userName.substring
120	</AvatarFallback>
121	</Avatar>
122	<div>
123	<div className='font-medium text-sm
124	<div className='text-muted-foreground text-xs
125	{c.userEmail}
126	</div>
127	</div>
128	</div>
129	</TableCell>
130	<TableCell>
131	<span className='text-muted-foreground text-sm
132	{new Date(c
133	month: 'short',
134	day: 'numeric',
135	year: 'numeric',
136	})}
137	</span>
138	</TableCell>
139	{canManage && (
140	<TableCell>
141	<Button
142	onClick={() =>
143	executeRemove({
144	assignmentId: c.assignmentId
145	orgSlug,
146	projectSlug,
147	})
148	}
149	variant='ghost'
150	>
151	<X className='
152	</Button>
153	</TableCell>
154	)}
155	</TableRow>
156	))}
157	</TableBody>
158	</Table>
159	)}
160
161	<InviteDialog
162	label='Client'
163	onOpenChange={onShowInviteDialogChange}
164	open={showInviteDialog}
165	organizationId={organizationId}
166	projectId={projectId}
167	role='client'
168	/>
169	</>
170	)
171	}