| 1 | 'use client' |
| 2 | |
| 3 | import { useRouter } from '@bprogress/next/app' |
| 4 | import { zodResolver } |
| 5 | import { Save } |
| 6 | import { useAction } |
| 7 | import { useId, useState |
| 8 | import { Controller, useForm |
| 9 | import { toast } |
| 10 | import type { z |
| 11 | import { Button } |
| 12 | import { |
| 13 | Card, |
| 14 | CardContent, |
| 15 | CardDescription, |
| 16 | CardFooter, |
| 17 | CardHeader, |
| 18 | CardTitle, |
| 19 | } from '@/components/ui/card' |
| 20 | import { Checkbox } |
| 21 | import { |
| 22 | Field, |
| 23 | FieldDescription, |
| 24 | FieldError, |
| 25 | FieldLabel, |
| 26 | } from '@/components/ui/field' |
| 27 | import { RateInput } |
| 28 | import { |
| 29 | Select, |
| 30 | SelectContent, |
| 31 | SelectItem, |
| 32 | SelectTrigger, |
| 33 | SelectValue, |
| 34 | } from '@/components/ui/select' |
| 35 | import { billingFrequencyEnum } |
| 36 | import { updateTimesheetDefaultsAction } |
| 37 | import { |
| 38 | type BillingFrequency, |
| 39 | type TimesheetDuration, |
| 40 | updateTimesheetDefaultsSchema, |
| 41 | } from '../common' |
| 42 | |
| 43 | // Use the schema's input type — the schema has a `.transform`, so `z.infer` |
| 44 | // would give the post-transform shape with billing fields already resolved. |
| 45 | type FormValues |
| 46 | |
| 47 | export function TimesheetDefaultsCard({ |
| 48 | organizationId, |
| 49 | defaultPayRate, |
| 50 | defaultPayCurrency, |
| 51 | defaultPayFrequency, |
| 52 | defaultBillingRate, |
| 53 | defaultBillingCurrency, |
| 54 | defaultBillingFrequency, |
| 55 | defaultTimesheetDuration, |
| 56 | }: { |
| 57 | organizationId: string |
| 58 | defaultPayRate: number |
| 59 | defaultPayCurrency: string |
| 60 | defaultPayFrequency: BillingFrequency |
| 61 | defaultBillingRate: number |
| 62 | defaultBillingCurrency: string |
| 63 | defaultBillingFrequency: BillingFrequency |
| 64 | defaultTimesheetDuration: TimesheetDuration |
| 65 | }) { |
| 66 | const router = |
| 67 | |
| 68 | const form = |
| 69 | resolver: zodResolver(updateTimesheetDefaultsSchema |
| 70 | defaultValues: { |
| 71 | organizationId, |
| 72 | defaultPayRate, |
| 73 | defaultPayCurrency, |
| 74 | defaultPayFrequency: defaultPayFrequency ?? |
| 75 | defaultBillingRate: defaultBillingRate ?? |
| 76 | defaultBillingCurrency, |
| 77 | defaultBillingFrequency: defaultBillingFrequency ?? |
| 78 | defaultTimesheetDuration, |
| 79 | }, |
| 80 | }) |
| 81 | |
| 82 | // Billing is optional: when unset, clients are billed at the pay rate. |
| 83 | const [billSameAsPay, |
| 84 | const billSameAsPayId = |
| 85 | |
| 86 | function handleBillSameAsPayChange(checked |
| 87 | setBillSameAsPay(checked) |
| 88 | if (checked) { |
| 89 | // Clear billing so it resolves to the pay rate. |
| 90 | form.setValue('defaultBillingRate |
| 91 | form.setValue('defaultBillingCurrency |
| 92 | form.setValue('defaultBillingFrequency |
| 93 | } else { |
| 94 | // Seed the billing fields from the current pay values. |
| 95 | form.setValue('defaultBillingRate |
| 96 | shouldDirty: true, |
| 97 | }) |
| 98 | form.setValue( |
| 99 | 'defaultBillingCurrency', |
| 100 | form.getValues('defaultPayCurrency |
| 101 | { shouldDirty: true } |
| 102 | ) |
| 103 | form.setValue( |
| 104 | 'defaultBillingFrequency', |
| 105 | form.getValues('defaultPayFrequency |
| 106 | { shouldDirty: true } |
| 107 | ) |
| 108 | } |
| 109 | } |
| 110 | |
| 111 | const { execute, |
| 112 | onSuccess() { |
| 113 | toast.success('Timesheet defaults updated |
| 114 | router.refresh() |
| 115 | }, |
| 116 | onError({ error |
| 117 | toast.error(error |
| 118 | }, |
| 119 | }) |
| 120 | |
| 121 | return ( |
| 122 | <Card> |
| 123 | <CardHeader> |
| 124 | <CardTitle>Timesheet Defaults</CardTitle |
| 125 | <CardDescription> |
| 126 | These are defaults applied to new members. You can override the rate |
| 127 | for an individual member from the rates dialog on the timesheets page. |
| 128 | </CardDescription> |
| 129 | </CardHeader> |
| 130 | <form onSubmit={form |
| 131 | <CardContent className=' |
| 132 | <div className='space-y-3 |
| 133 | <p className='font-medium text-sm |
| 134 | <Controller |
| 135 | control={form.control |
| 136 | name='defaultPayRate' |
| 137 | render={({ field |
| 138 | <Field className=' |
| 139 | <RateInput |
| 140 | currency={form.watch |
| 141 | frequencies={billingFrequencyEnum.enumValues |
| 142 | frequency={form.watch |
| 143 | invalid={fieldState.invalid |
| 144 | name='payCurrency' |
| 145 | onCurrencyChange={(v) |
| 146 | form.setValue('defaultPayCurrency |
| 147 | shouldDirty: true, |
| 148 | }) |
| 149 | } |
| 150 | onFrequencyChange={(v) |
| 151 | form.setValue( |
| 152 | 'defaultPayFrequency', |
| 153 | v as BillingFrequency |
| 154 | { shouldDirty: true } |
| 155 | ) |
| 156 | } |
| 157 | onValueChange={field.onChange |
| 158 | value={field.value |
| 159 | /> |
| 160 | {fieldState.invalid && |
| 161 | <FieldError errors={ |
| 162 | )} |
| 163 | </Field> |
| 164 | )} |
| 165 | /> |
| 166 | </div> |
| 167 | |
| 168 | <div className='space-y-3 |
| 169 | <label |
| 170 | className='flex items-center gap-2 font-medium text-sm' |
| 171 | htmlFor={billSameAsPayId} |
| 172 | > |
| 173 | <Checkbox |
| 174 | checked={billSameAsPay} |
| 175 | id={billSameAsPayId} |
| 176 | onCheckedChange={(c) |
| 177 | /> |
| 178 | Bill clients at the same rate members are paid |
| 179 | </label> |
| 180 | |
| 181 | {!billSameAsPay && ( |
| 182 | <div className='space-y-3 |
| 183 | <p className='font-medium text-sm |
| 184 | Billing (what clients are charged) |
| 185 | </p> |
| 186 | <Controller |
| 187 | control={form.control |
| 188 | name='defaultBillingRate' |
| 189 | render={({ field |
| 190 | <Field className=' |
| 191 | <div> |
| 192 | <RateInput |
| 193 | allowEmpty |
| 194 | currency={form.watch |
| 195 | frequencies={billingFrequencyEnum.enumValues |
| 196 | frequency={ |
| 197 | form.watch('defaultBillingFrequency |
| 198 | } |
| 199 | invalid={fieldState.invalid |
| 200 | name='billingCurrency' |
| 201 | onCurrencyChange={(v) |
| 202 | form.setValue('defaultBillingCurrency |
| 203 | shouldDirty: true, |
| 204 | }) |
| 205 | } |
| 206 | onFrequencyChange={(v) |
| 207 | form.setValue( |
| 208 | 'defaultBillingFrequency', |
| 209 | v as BillingFrequency |
| 210 | { shouldDirty: true } |
| 211 | ) |
| 212 | } |
| 213 | onValueChange={field.onChange |
| 214 | value={field.value |
| 215 | /> |
| 216 | </div> |
| 217 | {fieldState.invalid && |
| 218 | <FieldError errors={ |
| 219 | )} |
| 220 | </Field> |
| 221 | )} |
| 222 | /> |
| 223 | </div> |
| 224 | )} |
| 225 | </div> |
| 226 | <Controller |
| 227 | control={form.control |
| 228 | name='defaultTimesheetDuration' |
| 229 | render={({ field |
| 230 | <Field className=' |
| 231 | <FieldLabel>Default Duration</FieldLabel |
| 232 | <Select onValueChange={ |
| 233 | <SelectTrigger className=' |
| 234 | <SelectValue placeholder=' |
| 235 | </SelectTrigger> |
| 236 | <SelectContent> |
| 237 | <SelectItem value=' |
| 238 | <SelectItem value=' |
| 239 | <SelectItem value=' |
| 240 | </SelectContent> |
| 241 | </Select> |
| 242 | <FieldDescription> |
| 243 | The default time period for new timesheets |
| 244 | </FieldDescription> |
| 245 | {fieldState.invalid && |
| 246 | <FieldError errors={ |
| 247 | )} |
| 248 | </Field> |
| 249 | )} |
| 250 | /> |
| 251 | </CardContent> |
| 252 | <CardFooter> |
| 253 | <Button |
| 254 | className='mt-4' |
| 255 | disabled={!form. |
| 256 | loading={isPending} |
| 257 | type='submit' |
| 258 | > |
| 259 | <Save className=' |
| 260 | Save Defaults |
| 261 | </Button> |
| 262 | </CardFooter> |
| 263 | </form> |
| 264 | </Card> |
| 265 | ) |
| 266 | } |