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 ago193 lines · 5.7 KB

1	'use client'
2
3	import { useRouter } from '@bprogress/next/app'
4	import { Users, X
5	import { useAction }
6	import { toast }
7	import { Avatar, AvatarFallback
8	import { Badge }
9	import { Button }
10	import {
11	Empty,
12	EmptyDescription,
13	EmptyHeader,
14	EmptyMedia,
15	EmptyTitle,
16	} from '@/components/ui/empty'
17	import {
18	Select,
19	SelectContent,
20	SelectItem,
21	SelectTrigger,
22	SelectValue,
23	} from '@/components/ui/select'
24	import {
25	Table,
26	TableBody,
27	TableCell,
28	TableHead,
29	TableHeader,
30	TableRow,
31	} from '@/components/ui/table'
32	import { changeOrgMemberRoleAction, removeOrgMemberAction
33	import type { OrgMember,
34	import InviteDialog from './invite-dialog
35	import PendingInvitationsBlock from './pending-invitations-block
36
37	export default function MembersSection
38	organizationId,
39	members,
40	invitations,
41	canManage,
42	currentMemberId,
43	showInviteDialog,
44	onShowInviteDialogChange,
45	defaultMemberRate,
46	defaultCurrency,
47	}: {
48	organizationId: string
49	orgSlug: string
50	members: OrgMember
51	invitations: PendingInvitation
52	canManage: boolean
53	currentMemberId: string
54	showInviteDialog: boolean
55	onShowInviteDialogChange: (open
56	defaultMemberRate: number
57	defaultCurrency: string
58	}) {
59	const router =
60
61	const { execute:
62	onSuccess() {
63	toast.success('Member removed from workspace
64	router.refresh()
65	},
66	onError({ error
67	toast.error(error
68	},
69	})
70
71	const { execute:
72	onSuccess() {
73	toast.success('Role updated
74	router.refresh()
75	},
76	onError({ error
77	toast.error(error
78	},
79	})
80
81	if (members.length
82	return (
83	<Empty>
84	<EmptyHeader>
85	<EmptyMedia variant='
86	<Users />
87	</EmptyMedia>
88	<EmptyTitle>No members yet</EmptyTitle
89	<EmptyDescription>
90	Invite members to your workspace to start collaborating.
91	</EmptyDescription>
92	</EmptyHeader>
93	</Empty>
94	)
95	}
96
97	return (
98	<>
99	{canManage && <PendingInvitationsBlock
100
101	<Table>
102	<TableHeader>
103	<TableRow>
104	<TableHead>Member</TableHead
105	<TableHead>Role</TableHead
106	{canManage && <TableHead
107	</TableRow>
108	</TableHeader>
109	<TableBody>
110	{members.map((
111	const isSelf =
112	const isOwner =
113
114	return (
115	<TableRow key={
116	<TableCell>
117	<div className='flex items-center gap-3
118	<Avatar className='
119	<AvatarImage alt={
120	<AvatarFallback>
121	{m.userName.substring
122	</AvatarFallback>
123	</Avatar>
124	<div>
125	<div className='flex items-center gap-1.5
126	<span className='font-medium text-sm
127	{m.userName}
128	</span>
129	{isSelf && (
130	<Badge className='
131	You
132	</Badge>
133	)}
134	</div>
135	<div className='text-muted-foreground text-xs
136	{m.userEmail}
137	</div>
138	</div>
139	</div>
140	</TableCell>
141	<TableCell>
142	{canManage && !isSelf
143	<Select
144	onValueChange={(v)
145	executeChangeRole({
146	memberId: m.memberId
147	role: v as
148	})
149	}
150	value={m.role
151	>
152	<SelectTrigger className='
153	<SelectValue />
154	</SelectTrigger>
155	<SelectContent>
156	<SelectItem value='
157	<SelectItem value='
158	</SelectContent>
159	</Select>
160	) : (
161	<Badge className='
162	{m.role}
163	</Badge>
164	)}
165	</TableCell>
166	{canManage && (
167	<TableCell>
168	{!(isSelf \|\|
169	<Button
170	onClick={() =>
171	variant='ghost'
172	>
173	<X className='
174	</Button>
175	)}
176	</TableCell>
177	)}
178	</TableRow>
179	)
180	})}
181	</TableBody>
182	</Table>
183
184	<InviteDialog
185	defaultCurrency={defaultCurrency}
186	defaultMemberRate={defaultMemberRate}
187	onOpenChange={onShowInviteDialogChange}
188	open={showInviteDialog}
189	organizationId={organizationId}
190	/>
191	</>
192	)
193	}