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 ago483 lines · 15.2 KB

1	/** biome-ignore-all lint/performance/noImgElement: Don't wanna use Next's Image tag here */
2	/** biome-ignore-all lint/a11y/useValidAriaRole: The role prop is for user role not aria */
3	/** biome-ignore-all lint/correctness/useImageSize: Hard to handle proper scaling */
4	'use client'
5
6	import { pdf }
7	import {
8	AlertTriangle,
9	ArrowLeft,
10	CheckCircle2,
11	Download,
12	FileText,
13	} from 'lucide-react'
14	import Link from 'next/link
15	import { useRouter }
16	import { useAction }
17	import { useCallback, useState
18	import { toast }
19	import type { InvoiceWithMedia
20	import StatusBadge from '@/components/status-badge
21	import { Button }
22	import { Card, CardContent
23	import { Separator }
24	import {
25	Table,
26	TableBody,
27	TableCell,
28	TableHead,
29	TableHeader,
30	TableRow,
31	} from '@/components/ui/table'
32	import type { statusEnum
33	import type { RouteImpl
34	import ThreadsPanel from '../../requirements/_components/threads-panel
35	import type { Thread
36	import {
37	markInvoicePaidAction,
38	replyToThreadAction,
39	resolveThreadAction,
40	} from '../actions'
41	import type {
42	CustomField,
43	InvoiceItem,
44	InvoicePDFData,
45	LinkedRequirement,
46	} from '../types'
47	import DisputeInvoiceDialog from './dispute-invoice-dialog
48	import InvoicePDF from './invoice-pdf
49	import InvoiceStatusBadge from './status-badge
50
51	function formatAmount(amount:
52	return Number(amount
53	style: 'currency',
54	currency,
55	})
56	}
57
58	function formatDate(date:
59	return new Date
60	month: 'long',
61	day: 'numeric',
62	year: 'numeric',
63	})
64	}
65
66	function CustomFieldsList({ fields
67	if (fields.length
68	return null
69	}
70	return (
71	<div className='space-y-1
72	{fields.map((
73	<div className='flex justify-between text-sm
74	<span className='text-muted-foreground
75	<span>{f.value
76	</div>
77	))}
78	</div>
79	)
80	}
81
82	interface InvoiceClientViewProps {
83	canCreateThread: boolean
84	canMarkPaid: boolean
85	canResolveThread: boolean
86	invoice: InvoiceWithMedia
87	items: InvoiceItem
88	linkedRequirements: LinkedRequirement
89	orgName: string
90	orgSlug: string
91	projectId: string
92	projectName: string
93	projectSlug: string
94	threads: Thread
95	}
96
97	export function InvoiceClientView({
98	projectId,
99	invoice,
100	items,
101	linkedRequirements,
102	canMarkPaid,
103	canCreateThread,
104	canResolveThread,
105	orgSlug,
106	orgName,
107	projectSlug,
108	projectName,
109	threads,
110	}: InvoiceClientViewProps)
111	const router =
112	const backUrl =
113	const [isDownloading,
114	const [disputeOpen,
115
116	const { execute:
117	markInvoicePaidAction,
118	{
119	onSuccess() {
120	toast.success('Invoice marked as paid
121	router.refresh()
122	},
123	onError({ error
124	toast.error(error
125	},
126	}
127	)
128
129	const { execute:
130	replyToThreadAction,
131	{
132	onSuccess() {
133	toast.success('Reply added
134	router.refresh()
135	},
136	onError({ error
137	toast.error(error
138	},
139	}
140	)
141
142	const { execute:
143	onSuccess() {
144	toast.success('Thread resolved
145	router.refresh()
146	},
147	onError({ error
148	toast.error(error
149	},
150	})
151
152	const handleReply =
153	executeReply({ threadId,
154	}
155
156	const handleResolve =
157	executeResolve({ threadId
158	}
159
160	const canDispute =
161	canCreateThread &&
162	(invoice.status ===
163
164	const senderLogoFileId =
165	const senderSignatureFileId =
166	invoice.senderSignatureObject?.id
167
168	const subtotal =
169	const discount =
170	const total =
171
172	const handleDownloadPdf =
173	setIsDownloading(true)
174	try {
175	const pdfData:
176	invoiceNumber: invoice.invoiceNumber
177	issueDate: formatDate(invoice
178	dueDate: invoice.dueDate
179	currency: invoice.currency
180	notes: invoice.notes
181	recipients: [],
182	items,
183	totalAmount: String(total
184	projectName,
185	orgName,
186	orgSlug,
187	projectSlug,
188	senderLogo: senderLogoFileId,
189	senderSignature: senderSignatureFileId,
190	senderName: invoice.senderName
191	senderAddress: invoice.senderAddress
192	senderCustomFields: invoice.senderCustomFields
193	clientName: invoice.clientName
194	clientAddress: invoice.clientAddress
195	clientCustomFields: invoice.clientCustomFields
196	paymentTerms: invoice.paymentTerms
197	terms: invoice.terms
198	linkedRequirements: linkedRequirements.map
199	title: r.title
200	slug: r.slug
201	status: r.status
202	})),
203	discountLabel: invoice.discountLabel
204	discountAmount: invoice.discountAmount
205	}
206	const blob =
207	const url =
208	const a =
209	a.href =
210	a.download =
211	a.click()
212	URL.revokeObjectURL(url
213	} catch {
214	toast.error('Failed to generate PDF
215	} finally {
216	setIsDownloading(false)
217	}
218	}, [
219	invoice,
220	items,
221	linkedRequirements,
222	total,
223	projectName,
224	orgName,
225	orgSlug,
226	projectSlug,
227	senderLogoFileId,
228	senderSignatureFileId,
229	])
230
231	return (
232	<div className='mx-auto w-full max-w-3xl
233	<div className='mb-6 flex items-center justify-between gap-4
234	<Button asChild variant
235	<Link href={
236	<ArrowLeft className='
237	Back
238	</Link>
239	</Button>
240	<div className='flex items-center gap-2
241	<InvoiceStatusBadge role='
242	<Button
243	disabled={isDownloading}
244	onClick={handleDownloadPdf}
245	variant='outline'
246	>
247	<Download className='
248	{isDownloading ? 'Generating...
249	</Button>
250	{canDispute && (
251	<Button onClick={
252	<AlertTriangle className='
253	Dispute
254	</Button>
255	)}
256	{canMarkPaid && invoice
257	<Button
258	loading={isMarkingPaid}
259	onClick={() =>
260	>
261	<CheckCircle2 className='
262	Mark as Paid
263	</Button>
264	)}
265	</div>
266	</div>
267
268	<Card>
269	<CardContent className='
270	<div className='mb-8 flex items-start justify-between
271	<div>
272	{senderLogoFileId && (
273	<img
274	alt='Company logo'
275	className='mb-3 h-12 object-contain'
276	src={`/api/files/${senderLogoFileId
277	/>
278	)}
279	<h1 className='font-semibold text-2xl
280	<p className='mt-1 font-mono text-muted-foreground text-sm
281	{invoice.invoiceNumber}
282	</p>
283	</div>
284	<div className='text-right text-sm
285	<div className='space-y-1
286	<div>
287	<span className='text-muted-foreground
288	{formatDate(invoice.issueDate
289	</div>
290	{invoice.dueDate &&
291	<div>
292	<span className='text-muted-foreground
293	{formatDate(invoice.dueDate
294	</div>
295	)}
296	</div>
297	</div>
298	</div>
299
300	<div className='mb-8 grid gap-8 sm:grid-cols-2
301	<div>
302	<p className='mb-2 font-medium text-muted-foreground text-xs uppercase tracking-wider
303	From
304	</p>
305	{invoice.senderName &&
306	<p className='font-medium
307	)}
308	{invoice.senderAddress &&
309	<p className='text-muted-foreground text-sm
310	{invoice.senderAddress}
311	</p>
312	)}
313	{invoice.senderCustomFields &&
314	<div className='mt-2
315	<CustomFieldsList fields={
316	</div>
317	)}
318	</div>
319	<div>
320	<p className='mb-2 font-medium text-muted-foreground text-xs uppercase tracking-wider
321	Bill To
322	</p>
323	{invoice.clientName &&
324	<p className='font-medium
325	)}
326	{invoice.clientAddress &&
327	<p className='text-muted-foreground text-sm
328	{invoice.clientAddress}
329	</p>
330	)}
331	{invoice.clientCustomFields &&
332	<div className='mt-2
333	<CustomFieldsList fields={
334	</div>
335	)}
336	</div>
337	</div>
338
339	<Separator className='
340
341	<Table>
342	<TableHeader>
343	<TableRow>
344	<TableHead>Description</TableHead
345	<TableHead className='
346	<TableHead className='
347	<TableHead className='
348	</TableRow>
349	</TableHeader>
350	<TableBody>
351	{items.map((
352	<TableRow key={
353	<TableCell className='
354	<TableCell className='
355	{item.quantity}
356	</TableCell>
357	<TableCell className='
358	{formatAmount(item.unitPrice
359	</TableCell>
360	<TableCell className='
361	{formatAmount(item.amount
362	</TableCell>
363	</TableRow>
364	))}
365	</TableBody>
366	</Table>
367
368	<div className='mt-4 flex justify-end
369	<div className='w-64 space-y-2
370	<div className='flex justify-between text-sm
371	<span className='text-muted-foreground
372	<span>{formatAmount(String
373	</div>
374	{invoice.discountLabel &&
375	<div className='flex justify-between text-sm
376	<span className='text-muted-foreground
377	{invoice.discountLabel}
378	</span>
379	<span className='text-destructive
380	-{formatAmount(String(discount
381	</span>
382	</div>
383	)}
384	<Separator />
385	<div className='flex justify-between font-semibold
386	<span>Total</span>
387	<span>{formatAmount(String
388	</div>
389	</div>
390	</div>
391
392	{invoice.paymentTerms &&
393	<div className='mt-8
394	<p className='mb-1 font-medium text-muted-foreground text-xs uppercase tracking-wider
395	Payment Terms
396	</p>
397	<p className='text-sm
398	</div>
399	)}
400
401	{invoice.notes &&
402	<div className='mt-6
403	<p className='mb-1 font-medium text-muted-foreground text-xs uppercase tracking-wider
404	Notes
405	</p>
406	<p className='whitespace-pre-wrap text-sm
407	</div>
408	)}
409
410	{invoice.terms &&
411	<div className='mt-6
412	<p className='mb-1 font-medium text-muted-foreground text-xs uppercase tracking-wider
413	Terms & Conditions
414	</p>
415	<p className='whitespace-pre-wrap text-muted-foreground text-sm
416	{invoice.terms}
417	</p>
418	</div>
419	)}
420
421	{linkedRequirements.length >
422	<div className='mt-6
423	<p className='mb-2 font-medium text-muted-foreground text-xs uppercase tracking-wider
424	Linked Requirements
425	</p>
426	<div className='space-y-1
427	{linkedRequirements.map((
428	<div
429	className='flex items-center gap-2 text-sm'
430	key={req.requirementId
431	>
432	<FileText className='
433	<span>{req.title
434
435	<StatusBadge
436	role='client'
437	status={
438	req.status as
439	}
440	/>
441	</div>
442	))}
443	</div>
444	</div>
445	)}
446
447	{senderSignatureFileId && (
448	<div className='mt-8 border-t pt-6
449	<p className='mb-2 text-muted-foreground text-xs
450	<img
451	alt='Signature'
452	className='h-16 object-contain'
453	src={`/api/files/${senderSignatureFileId
454	/>
455	</div>
456	)}
457	</CardContent>
458	</Card>
459
460	{(invoice.status
461	invoice.status ===
462	threads.length > 0
463	<div className='mt-8
464	<ThreadsPanel
465	entityId={invoice.id
466	isSending={isReplying}
467	onResolve={canResolveThread ?
468	onSubmit={handleReply}
469	orgSlug={orgSlug}
470	projectId={projectId}
471	threads={threads}
472	/>
473	</div>
474	)}
475
476	<DisputeInvoiceDialog
477	invoiceId={invoice.id
478	onOpenChange={setDisputeOpen}
479	open={disputeOpen}
480	/>
481	</div>
482	)
483	}