Add accounts UI with list, create, edit, detail tabs for all sub-entities

Accounts list with paginated table, search, sort. Account detail page with
tabs for members, payment methods, tax exemptions, and processor links.
All sub-entities have create/edit dialogs and delete actions. Forms use
shared Zod schemas via react-hook-form.
This commit is contained in:
Ryan Moon
2026-03-28 07:45:52 -05:00
parent e734ef4606
commit 9abdf6c050
23 changed files with 1688 additions and 6 deletions

View File

@@ -0,0 +1,61 @@
import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { TaxExemptionCreateSchema } from '@forte/shared/schemas'
import type { TaxExemptionCreateInput } from '@forte/shared/schemas'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Textarea } from '@/components/ui/textarea'
interface TaxExemptionFormProps {
accountId: string
onSubmit: (data: Record<string, unknown>) => void
loading?: boolean
}
export function TaxExemptionForm({ accountId, onSubmit, loading }: TaxExemptionFormProps) {
const {
register,
handleSubmit,
formState: { errors },
} = useForm<TaxExemptionCreateInput>({
resolver: zodResolver(TaxExemptionCreateSchema),
defaultValues: {
accountId,
certificateNumber: '',
},
})
return (
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
<div className="space-y-2">
<Label htmlFor="certNumber">Certificate Number *</Label>
<Input id="certNumber" {...register('certificateNumber')} />
{errors.certificateNumber && (
<p className="text-sm text-destructive">{errors.certificateNumber.message}</p>
)}
</div>
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<Label htmlFor="certType">Certificate Type</Label>
<Input id="certType" {...register('certificateType')} placeholder="resale" />
</div>
<div className="space-y-2">
<Label htmlFor="issuingState">Issuing State</Label>
<Input id="issuingState" {...register('issuingState')} placeholder="TX" maxLength={2} />
</div>
</div>
<div className="space-y-2">
<Label htmlFor="expiresAt">Expires</Label>
<Input id="expiresAt" type="date" {...register('expiresAt')} />
</div>
<div className="space-y-2">
<Label htmlFor="exemptNotes">Notes</Label>
<Textarea id="exemptNotes" {...register('notes')} />
</div>
<Button type="submit" disabled={loading}>
{loading ? 'Saving...' : 'Add Tax Exemption'}
</Button>
</form>
)
}