phantomknight287/saturn

public

The operating system for your freelance business.

members are not assigned org wide rate when they joinef548497 months ago167 lines · 5.2 KB

1	'use client'
2
3	import { Send } from 'lucide-react'
4	import type { ReactNode
5	import { useState }
6	import type { ProjectClient
7	import { Avatar, AvatarFallback
8	import { Button }
9	import { Checkbox }
10	import {
11	Dialog,
12	DialogContent,
13	DialogDescription,
14	DialogHeader,
15	DialogTitle,
16	} from '@/components/ui/dialog'
17
18	interface SendToClientDialogProps {
19	/** Extra form fields rendered above the client list */
20	children?: ReactNode
21	clients: ProjectClient
22	/** Dialog description shown below the title */
23	description: string
24	/** Empty state message when no clients are available */
25	emptyMessage?: string
26	onOpenChange: (open
27	/** Called with the selected member IDs when the user confirms */
28	onSend: (clientMemberIds
29	open: boolean
30	/** Label for the send button, e.g. "client" or "stakeholder" — used as "Send to N {recipientLabel}s" */
31	recipientLabel?: string
32	/** Additional disable condition for the send button */
33	sendDisabled?: boolean
34	/** Dialog title, e.g. "Send Proposal" or "Send for Sign" */
35	title: string
36	}
37
38	export default function SendToClientDialog
39	open,
40	onOpenChange,
41	clients,
42	title,
43	description,
44	recipientLabel = 'client'
45	emptyMessage = 'No clients assigned to this project. Add clients from the Team page first.'
46	onSend,
47	children,
48	sendDisabled = false,
49	}: SendToClientDialogProps)
50	const [selectedIds,
51	const [isPending,
52
53	const toggleClient =
54	setSelectedIds((prev)
55	const next =
56	if (next.has
57	next.delete(memberId
58	} else {
59	next.add(memberId
60	}
61	return next
62	})
63	}
64
65	const toggleAll =
66	if (selectedIds.size
67	setSelectedIds(new Set
68	} else {
69	setSelectedIds(new Set
70	}
71	}
72
73	const handleSend =
74	if (selectedIds.size
75	return
76	}
77	setIsPending(true)
78	try {
79	await onSend(Array
80	setSelectedIds(new Set
81	} finally {
82	setIsPending(false)
83	}
84	}
85
86	return (
87	<Dialog onOpenChange={
88	<DialogContent className='
89	<DialogHeader>
90	<DialogTitle>{title}
91	<DialogDescription>{description}
92	</DialogHeader>
93
94	{children}
95
96	{clients.length ===
97	<p className='py-4 text-center text-muted-foreground text-sm
98	{emptyMessage}
99	</p>
100	) : (
101	<div className='space-y-4
102	<div className='flex items-center gap-2 border-b pb-2
103	<Checkbox
104	checked={selectedIds.size
105	onCheckedChange={toggleAll}
106	/>
107	<label
108	className='cursor-pointer font-medium text-sm'
109	htmlFor='select-all'
110	>
111	Select all ({clients.length})
112	</label>
113	</div>
114
115	<div className='max-h-60 space-y-1 overflow-y-auto
116	{clients.map((
117	<label
118	className='flex cursor-pointer items-center gap-3 rounded-lg px-2 py-2 hover:bg-muted/50'
119	htmlFor={`client-${client
120	key={client.memberId
121	>
122	<Checkbox
123	checked={selectedIds.has
124	id={`client-${client
125	onCheckedChange={() =>
126	/>
127	<Avatar className='
128	<AvatarImage
129	alt={client.userName
130	src={client.userImage
131	/>
132	<AvatarFallback className='
133	{client.userName.substring
134	</AvatarFallback>
135	</Avatar>
136	<div className='min-w-0 flex-1
137	<div className='truncate font-medium text-sm
138	{client.userName}
139	</div>
140	<div className='truncate text-muted-foreground text-xs
141	{client.userEmail}
142	</div>
143	</div>
144	</label>
145	))}
146	</div>
147
148	<div className='flex justify-end gap-2 pt-2
149	<Button onClick={
150	Cancel
151	</Button>
152	<Button
153	disabled={selectedIds.size
154	loading={isPending}
155	onClick={handleSend}
156	>
157	<Send className='
158	Send to {selectedIds.size \|\|
159	{selectedIds.size !==
160	</Button>
161	</div>
162	</div>
163	)}
164	</DialogContent>
165	</Dialog>
166	)
167	}