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 ago167 lines · 5.1 KB

1	'use client'
2
3	import { useRouter } from '@bprogress/next/app'
4	import { zodResolver }
5	import { Save }
6	import { useAction }
7	import { Controller, useForm
8	import { toast }
9	import type { z
10	import { Button }
11	import {
12	Card,
13	CardContent,
14	CardDescription,
15	CardFooter,
16	CardHeader,
17	CardTitle,
18	} from '@/components/ui/card'
19	import { CurrencySelect }
20	import {
21	Field,
22	FieldDescription,
23	FieldError,
24	FieldLabel,
25	} from '@/components/ui/field'
26	import { Input }
27	import {
28	Select,
29	SelectContent,
30	SelectItem,
31	SelectTrigger,
32	SelectValue,
33	} from '@/components/ui/select'
34	import { updateTimesheetDefaultsAction }
35	import {
36	type TimesheetDuration,
37	updateTimesheetDefaultsSchema,
38	} from '../common'
39
40	type FormValues
41
42	export function TimesheetDefaultsCard({
43	organizationId,
44	defaultMemberRate,
45	defaultCurrency,
46	defaultTimesheetDuration,
47	}: {
48	organizationId: string
49	defaultMemberRate: number
50	defaultCurrency: string
51	defaultTimesheetDuration: TimesheetDuration
52	}) {
53	const router =
54
55	const form =
56	resolver: zodResolver(updateTimesheetDefaultsSchema
57	defaultValues: {
58	organizationId,
59	defaultMemberRate,
60	defaultCurrency,
61	defaultTimesheetDuration,
62	},
63	})
64
65	const { execute,
66	onSuccess() {
67	toast.success('Timesheet defaults updated
68	router.refresh()
69	},
70	onError({ error
71	toast.error(error
72	},
73	})
74
75	return (
76	<Card>
77	<CardHeader>
78	<CardTitle>Timesheet Defaults</CardTitle
79	<CardDescription>
80	Set the default hourly rate and currency for new members. These can be
81	overridden per project.
82	</CardDescription>
83	</CardHeader>
84	<form onSubmit={form
85	<CardContent>
86	<div className='grid grid-cols-2 gap-4
87	<Controller
88	control={form.control
89	name='defaultCurrency'
90	render={({ field
91	<Field className='
92	<FieldLabel>Default Currency</FieldLabel
93	<CurrencySelect
94	name='currency'
95	onValueChange={field.onChange
96	value={field.value
97	/>
98	{fieldState.invalid &&
99	<FieldError errors={
100	)}
101	</Field>
102	)}
103	/>
104	<Controller
105	control={form.control
106	name='defaultMemberRate'
107	render={({ field
108	<Field className='
109	<FieldLabel>Default Hourly Rate</FieldLabel
110	<Input
111	min={0}
112	onChange={(e)
113	field.onChange(Math
114	}
115	placeholder='0.00'
116	step={0.01}
117	type='number'
118	value={field.value
119	/>
120	{fieldState.invalid &&
121	<FieldError errors={
122	)}
123	</Field>
124	)}
125	/>
126	</div>
127	<Controller
128	control={form.control
129	name='defaultTimesheetDuration'
130	render={({ field
131	<Field className='
132	<FieldLabel>Default Duration</FieldLabel
133	<Select onValueChange={
134	<SelectTrigger className='
135	<SelectValue placeholder='
136	</SelectTrigger>
137	<SelectContent>
138	<SelectItem value='
139	<SelectItem value='
140	<SelectItem value='
141	</SelectContent>
142	</Select>
143	<FieldDescription>
144	The default time period for new timesheets
145	</FieldDescription>
146	{fieldState.invalid &&
147	<FieldError errors={
148	)}
149	</Field>
150	)}
151	/>
152	</CardContent>
153	<CardFooter>
154	<Button
155	className='mt-4'
156	disabled={!form.
157	loading={isPending}
158	type='submit'
159	>
160	<Save className='
161	Save Defaults
162	</Button>
163	</CardFooter>
164	</form>
165	</Card>
166	)
167	}