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 ago151 lines · 4.8 KB

1	'use client'
2
3	import { Briefcase, Plus, UserPlus, Users, UsersRound } from 'lucide-react'
4	import { useState }
5
6	import { Badge }
7	import { Button }
8	import { Tabs, TabsContent
9	import MembersSection from './_components/members-section
10	import StakeholdersSection from './_components/stakeholders-section
11	import TeamsSection from './_components/teams-section
12	import type { TeamPageClientProps
13
14	type Tab
15
16	export function TeamPageClient({
17	projectId,
18	orgSlug,
19	projectSlug,
20	organizationId,
21	projectMembers,
22	projectClients,
23	projectTeams,
24	orgTeams,
25	orgMembers,
26	pendingInvitations,
27	canManage,
28	defaultMemberRate,
29	defaultCurrency,
30	}: TeamPageClientProps)
31	const [activeTab,
32	const [showInviteDialog,
33	const [showAssignTeamDialog,
34
35	const memberInvitations =
36	(i) =>
37	)
38	const clientInvitations =
39	(i) =>
40	)
41
42	const assignedTeamIds =
43	const hasAvailableTeams =
44
45	return (
46	<div className='w-full
47	<div className='mb-6 flex items-center justify-between
48	<h1 className='font-semibold text-2xl
49	{canManage && (
50	<>
51	{activeTab === 'members
52	<Button onClick={
53	<UserPlus className='
54	Invite Member
55	</Button>
56	)}
57	{activeTab === 'teams
58	<Button
59	disabled={!hasAvailableTeams}
60	onClick={() =>
61	>
62	<Plus className='
63	Assign Team
64	</Button>
65	)}
66	{activeTab === 'clients
67	<Button onClick={
68	<UserPlus className='
69	Invite Client
70	</Button>
71	)}
72	</>
73	)}
74	</div>
75
76	<Tabs
77	onValueChange={(v)
78	setActiveTab(v as
79	setShowInviteDialog(false)
80	}}
81	value={activeTab}
82	>
83	<TabsList>
84	<TabsTrigger className='
85	<Users className='
86	Members
87	<Badge className='
88	{projectMembers.length}
89	</Badge>
90	</TabsTrigger>
91	<TabsTrigger className='
92	<UsersRound className='
93	Teams
94	<Badge className='
95	{projectTeams.length}
96	</Badge>
97	</TabsTrigger>
98	<TabsTrigger className='
99	<Briefcase className='
100	Clients
101	<Badge className='
102	{projectClients.length}
103	</Badge>
104	</TabsTrigger>
105	</TabsList>
106
107	<TabsContent value='
108	<MembersSection
109	canManage={canManage}
110	defaultCurrency={defaultCurrency}
111	defaultMemberRate={defaultMemberRate}
112	onShowInviteDialogChange={setShowInviteDialog}
113	organizationId={organizationId}
114	orgMembers={orgMembers}
115	orgSlug={orgSlug}
116	pendingInvitations={memberInvitations}
117	projectId={projectId}
118	projectMembers={projectMembers}
119	projectSlug={projectSlug}
120	showInviteDialog={showInviteDialog}
121	/>
122	</TabsContent>
123	<TabsContent value='
124	<TeamsSection
125	canManage={canManage}
126	onShowAddDialogChange={setShowAssignTeamDialog}
127	orgSlug={orgSlug}
128	orgTeams={orgTeams}
129	projectId={projectId}
130	projectSlug={projectSlug}
131	projectTeams={projectTeams}
132	showAddDialog={showAssignTeamDialog}
133	/>
134	</TabsContent>
135	<TabsContent value='
136	<StakeholdersSection
137	canManage={canManage}
138	onShowInviteDialogChange={setShowInviteDialog}
139	organizationId={organizationId}
140	orgSlug={orgSlug}
141	pendingInvitations={clientInvitations}
142	projectClients={projectClients}
143	projectId={projectId}
144	projectSlug={projectSlug}
145	showInviteDialog={showInviteDialog}
146	/>
147	</TabsContent>
148	</Tabs>
149	</div>
150	)
151	}