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
37
packages/admin/src/api/accounts.ts
Normal file
37
packages/admin/src/api/accounts.ts
Normal file
@@ -0,0 +1,37 @@
|
||||
import { queryOptions } from '@tanstack/react-query'
|
||||
import { api } from '@/lib/api-client'
|
||||
import type { Account } from '@/types/account'
|
||||
import type { PaginatedResponse, PaginationInput } from '@forte/shared/schemas'
|
||||
|
||||
export const accountKeys = {
|
||||
all: ['accounts'] as const,
|
||||
lists: () => [...accountKeys.all, 'list'] as const,
|
||||
list: (params: PaginationInput) => [...accountKeys.all, 'list', params] as const,
|
||||
details: () => [...accountKeys.all, 'detail'] as const,
|
||||
detail: (id: string) => [...accountKeys.all, 'detail', id] as const,
|
||||
}
|
||||
|
||||
export function accountListOptions(params: PaginationInput) {
|
||||
return queryOptions({
|
||||
queryKey: accountKeys.list(params),
|
||||
queryFn: () => api.get<PaginatedResponse<Account>>('/v1/accounts', params),
|
||||
})
|
||||
}
|
||||
|
||||
export function accountDetailOptions(id: string) {
|
||||
return queryOptions({
|
||||
queryKey: accountKeys.detail(id),
|
||||
queryFn: () => api.get<Account>(`/v1/accounts/${id}`),
|
||||
})
|
||||
}
|
||||
|
||||
export const accountMutations = {
|
||||
create: (data: Record<string, unknown>) =>
|
||||
api.post<Account>('/v1/accounts', data),
|
||||
|
||||
update: (id: string, data: Record<string, unknown>) =>
|
||||
api.patch<Account>(`/v1/accounts/${id}`, data),
|
||||
|
||||
delete: (id: string) =>
|
||||
api.del<Account>(`/v1/accounts/${id}`),
|
||||
}
|
||||
27
packages/admin/src/api/members.ts
Normal file
27
packages/admin/src/api/members.ts
Normal file
@@ -0,0 +1,27 @@
|
||||
import { queryOptions } from '@tanstack/react-query'
|
||||
import { api } from '@/lib/api-client'
|
||||
import type { Member } from '@/types/account'
|
||||
import type { PaginatedResponse, PaginationInput } from '@forte/shared/schemas'
|
||||
|
||||
export const memberKeys = {
|
||||
all: (accountId: string) => ['accounts', accountId, 'members'] as const,
|
||||
list: (accountId: string, params: PaginationInput) => [...memberKeys.all(accountId), params] as const,
|
||||
}
|
||||
|
||||
export function memberListOptions(accountId: string, params: PaginationInput) {
|
||||
return queryOptions({
|
||||
queryKey: memberKeys.list(accountId, params),
|
||||
queryFn: () => api.get<PaginatedResponse<Member>>(`/v1/accounts/${accountId}/members`, params),
|
||||
})
|
||||
}
|
||||
|
||||
export const memberMutations = {
|
||||
create: (accountId: string, data: Record<string, unknown>) =>
|
||||
api.post<Member>(`/v1/accounts/${accountId}/members`, data),
|
||||
|
||||
update: (id: string, data: Record<string, unknown>) =>
|
||||
api.patch<Member>(`/v1/members/${id}`, data),
|
||||
|
||||
delete: (id: string) =>
|
||||
api.del<Member>(`/v1/members/${id}`),
|
||||
}
|
||||
25
packages/admin/src/api/payment-methods.ts
Normal file
25
packages/admin/src/api/payment-methods.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import { queryOptions } from '@tanstack/react-query'
|
||||
import { api } from '@/lib/api-client'
|
||||
import type { PaymentMethod } from '@/types/account'
|
||||
|
||||
export const paymentMethodKeys = {
|
||||
all: (accountId: string) => ['accounts', accountId, 'payment-methods'] as const,
|
||||
}
|
||||
|
||||
export function paymentMethodListOptions(accountId: string) {
|
||||
return queryOptions({
|
||||
queryKey: paymentMethodKeys.all(accountId),
|
||||
queryFn: () => api.get<{ data: PaymentMethod[] }>(`/v1/accounts/${accountId}/payment-methods`),
|
||||
})
|
||||
}
|
||||
|
||||
export const paymentMethodMutations = {
|
||||
create: (accountId: string, data: Record<string, unknown>) =>
|
||||
api.post<PaymentMethod>(`/v1/accounts/${accountId}/payment-methods`, data),
|
||||
|
||||
update: (id: string, data: Record<string, unknown>) =>
|
||||
api.patch<PaymentMethod>(`/v1/payment-methods/${id}`, data),
|
||||
|
||||
delete: (id: string) =>
|
||||
api.del<PaymentMethod>(`/v1/payment-methods/${id}`),
|
||||
}
|
||||
25
packages/admin/src/api/processor-links.ts
Normal file
25
packages/admin/src/api/processor-links.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import { queryOptions } from '@tanstack/react-query'
|
||||
import { api } from '@/lib/api-client'
|
||||
import type { ProcessorLink } from '@/types/account'
|
||||
|
||||
export const processorLinkKeys = {
|
||||
all: (accountId: string) => ['accounts', accountId, 'processor-links'] as const,
|
||||
}
|
||||
|
||||
export function processorLinkListOptions(accountId: string) {
|
||||
return queryOptions({
|
||||
queryKey: processorLinkKeys.all(accountId),
|
||||
queryFn: () => api.get<{ data: ProcessorLink[] }>(`/v1/accounts/${accountId}/processor-links`),
|
||||
})
|
||||
}
|
||||
|
||||
export const processorLinkMutations = {
|
||||
create: (accountId: string, data: Record<string, unknown>) =>
|
||||
api.post<ProcessorLink>(`/v1/accounts/${accountId}/processor-links`, data),
|
||||
|
||||
update: (id: string, data: Record<string, unknown>) =>
|
||||
api.patch<ProcessorLink>(`/v1/processor-links/${id}`, data),
|
||||
|
||||
delete: (id: string) =>
|
||||
api.del<ProcessorLink>(`/v1/processor-links/${id}`),
|
||||
}
|
||||
28
packages/admin/src/api/tax-exemptions.ts
Normal file
28
packages/admin/src/api/tax-exemptions.ts
Normal file
@@ -0,0 +1,28 @@
|
||||
import { queryOptions } from '@tanstack/react-query'
|
||||
import { api } from '@/lib/api-client'
|
||||
import type { TaxExemption } from '@/types/account'
|
||||
|
||||
export const taxExemptionKeys = {
|
||||
all: (accountId: string) => ['accounts', accountId, 'tax-exemptions'] as const,
|
||||
}
|
||||
|
||||
export function taxExemptionListOptions(accountId: string) {
|
||||
return queryOptions({
|
||||
queryKey: taxExemptionKeys.all(accountId),
|
||||
queryFn: () => api.get<{ data: TaxExemption[] }>(`/v1/accounts/${accountId}/tax-exemptions`),
|
||||
})
|
||||
}
|
||||
|
||||
export const taxExemptionMutations = {
|
||||
create: (accountId: string, data: Record<string, unknown>) =>
|
||||
api.post<TaxExemption>(`/v1/accounts/${accountId}/tax-exemptions`, data),
|
||||
|
||||
update: (id: string, data: Record<string, unknown>) =>
|
||||
api.patch<TaxExemption>(`/v1/tax-exemptions/${id}`, data),
|
||||
|
||||
approve: (id: string) =>
|
||||
api.post<TaxExemption>(`/v1/tax-exemptions/${id}/approve`, {}),
|
||||
|
||||
revoke: (id: string, reason: string) =>
|
||||
api.post<TaxExemption>(`/v1/tax-exemptions/${id}/revoke`, { reason }),
|
||||
}
|
||||
96
packages/admin/src/components/accounts/account-form.tsx
Normal file
96
packages/admin/src/components/accounts/account-form.tsx
Normal file
@@ -0,0 +1,96 @@
|
||||
import { useForm } from 'react-hook-form'
|
||||
import { zodResolver } from '@hookform/resolvers/zod'
|
||||
import { AccountCreateSchema } from '@forte/shared/schemas'
|
||||
import type { AccountCreateInput } 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'
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||||
import type { Account } from '@/types/account'
|
||||
|
||||
interface AccountFormProps {
|
||||
defaultValues?: Partial<Account>
|
||||
onSubmit: (data: AccountCreateInput) => void
|
||||
loading?: boolean
|
||||
}
|
||||
|
||||
export function AccountForm({ defaultValues, onSubmit, loading }: AccountFormProps) {
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
setValue,
|
||||
watch,
|
||||
formState: { errors },
|
||||
} = useForm<AccountCreateInput>({
|
||||
resolver: zodResolver(AccountCreateSchema),
|
||||
defaultValues: {
|
||||
name: defaultValues?.name ?? '',
|
||||
email: defaultValues?.email ?? undefined,
|
||||
phone: defaultValues?.phone ?? undefined,
|
||||
billingMode: defaultValues?.billingMode ?? 'consolidated',
|
||||
notes: defaultValues?.notes ?? undefined,
|
||||
address: defaultValues?.address ?? undefined,
|
||||
},
|
||||
})
|
||||
|
||||
const billingMode = watch('billingMode')
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4 max-w-lg">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">Name *</Label>
|
||||
<Input id="name" {...register('name')} />
|
||||
{errors.name && <p className="text-sm text-destructive">{errors.name.message}</p>}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input id="email" type="email" {...register('email')} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="phone">Phone</Label>
|
||||
<Input id="phone" {...register('phone')} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>Billing Mode</Label>
|
||||
<Select
|
||||
value={billingMode}
|
||||
onValueChange={(v) => setValue('billingMode', v as 'consolidated' | 'split')}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="consolidated">Consolidated</SelectItem>
|
||||
<SelectItem value="split">Split</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>Address</Label>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<Input placeholder="Street" {...register('address.street')} className="col-span-2" />
|
||||
<Input placeholder="City" {...register('address.city')} />
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<Input placeholder="State" {...register('address.state')} />
|
||||
<Input placeholder="ZIP" {...register('address.zip')} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="notes">Notes</Label>
|
||||
<Textarea id="notes" {...register('notes')} />
|
||||
</div>
|
||||
|
||||
<Button type="submit" disabled={loading}>
|
||||
{loading ? 'Saving...' : defaultValues ? 'Update Account' : 'Create Account'}
|
||||
</Button>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
42
packages/admin/src/components/accounts/account-table.tsx
Normal file
42
packages/admin/src/components/accounts/account-table.tsx
Normal file
@@ -0,0 +1,42 @@
|
||||
import type { Column } from '@/components/shared/data-table'
|
||||
import type { Account } from '@/types/account'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
|
||||
export const accountColumns: Column<Account>[] = [
|
||||
{
|
||||
key: 'name',
|
||||
header: 'Name',
|
||||
sortable: true,
|
||||
render: (row) => <span className="font-medium">{row.name}</span>,
|
||||
},
|
||||
{
|
||||
key: 'email',
|
||||
header: 'Email',
|
||||
sortable: true,
|
||||
render: (row) => row.email ?? <span className="text-muted-foreground">-</span>,
|
||||
},
|
||||
{
|
||||
key: 'phone',
|
||||
header: 'Phone',
|
||||
render: (row) => row.phone ?? <span className="text-muted-foreground">-</span>,
|
||||
},
|
||||
{
|
||||
key: 'account_number',
|
||||
header: 'Account #',
|
||||
sortable: true,
|
||||
render: (row) => row.accountNumber ?? <span className="text-muted-foreground">-</span>,
|
||||
},
|
||||
{
|
||||
key: 'billingMode',
|
||||
header: 'Billing',
|
||||
render: (row) => (
|
||||
<Badge variant="secondary">{row.billingMode}</Badge>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'created_at',
|
||||
header: 'Created',
|
||||
sortable: true,
|
||||
render: (row) => new Date(row.createdAt).toLocaleDateString(),
|
||||
},
|
||||
]
|
||||
74
packages/admin/src/components/accounts/member-form.tsx
Normal file
74
packages/admin/src/components/accounts/member-form.tsx
Normal file
@@ -0,0 +1,74 @@
|
||||
import { useForm } from 'react-hook-form'
|
||||
import { zodResolver } from '@hookform/resolvers/zod'
|
||||
import { MemberCreateSchema } from '@forte/shared/schemas'
|
||||
import type { MemberCreateInput } 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'
|
||||
import type { Member } from '@/types/account'
|
||||
|
||||
interface MemberFormProps {
|
||||
accountId: string
|
||||
defaultValues?: Partial<Member>
|
||||
onSubmit: (data: Record<string, unknown>) => void
|
||||
loading?: boolean
|
||||
}
|
||||
|
||||
export function MemberForm({ accountId, defaultValues, onSubmit, loading }: MemberFormProps) {
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
} = useForm<MemberCreateInput>({
|
||||
resolver: zodResolver(MemberCreateSchema),
|
||||
defaultValues: {
|
||||
accountId,
|
||||
firstName: defaultValues?.firstName ?? '',
|
||||
lastName: defaultValues?.lastName ?? '',
|
||||
dateOfBirth: defaultValues?.dateOfBirth ?? undefined,
|
||||
email: defaultValues?.email ?? undefined,
|
||||
phone: defaultValues?.phone ?? undefined,
|
||||
notes: defaultValues?.notes ?? undefined,
|
||||
},
|
||||
})
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
|
||||
<input type="hidden" {...register('accountId')} />
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="firstName">First Name *</Label>
|
||||
<Input id="firstName" {...register('firstName')} />
|
||||
{errors.firstName && <p className="text-sm text-destructive">{errors.firstName.message}</p>}
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="lastName">Last Name *</Label>
|
||||
<Input id="lastName" {...register('lastName')} />
|
||||
{errors.lastName && <p className="text-sm text-destructive">{errors.lastName.message}</p>}
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="dateOfBirth">Date of Birth</Label>
|
||||
<Input id="dateOfBirth" type="date" {...register('dateOfBirth')} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="memberEmail">Email</Label>
|
||||
<Input id="memberEmail" type="email" {...register('email')} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="memberPhone">Phone</Label>
|
||||
<Input id="memberPhone" {...register('phone')} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="memberNotes">Notes</Label>
|
||||
<Textarea id="memberNotes" {...register('notes')} />
|
||||
</div>
|
||||
<Button type="submit" disabled={loading}>
|
||||
{loading ? 'Saving...' : defaultValues ? 'Update Member' : 'Add Member'}
|
||||
</Button>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
import { useForm } from 'react-hook-form'
|
||||
import { zodResolver } from '@hookform/resolvers/zod'
|
||||
import { PaymentMethodCreateSchema } from '@forte/shared/schemas'
|
||||
import type { PaymentMethodCreateInput } from '@forte/shared/schemas'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||||
|
||||
interface PaymentMethodFormProps {
|
||||
accountId: string
|
||||
onSubmit: (data: Record<string, unknown>) => void
|
||||
loading?: boolean
|
||||
}
|
||||
|
||||
export function PaymentMethodForm({ accountId, onSubmit, loading }: PaymentMethodFormProps) {
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
setValue,
|
||||
watch,
|
||||
formState: { errors },
|
||||
} = useForm<PaymentMethodCreateInput>({
|
||||
resolver: zodResolver(PaymentMethodCreateSchema),
|
||||
defaultValues: {
|
||||
accountId,
|
||||
processor: 'stripe',
|
||||
processorPaymentMethodId: '',
|
||||
isDefault: false,
|
||||
},
|
||||
})
|
||||
|
||||
const processor = watch('processor')
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Processor</Label>
|
||||
<Select
|
||||
value={processor}
|
||||
onValueChange={(v) => setValue('processor', v as 'stripe' | 'global_payments')}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="stripe">Stripe</SelectItem>
|
||||
<SelectItem value="global_payments">Global Payments</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="pmId">Payment Method ID *</Label>
|
||||
<Input id="pmId" {...register('processorPaymentMethodId')} placeholder="pm_..." />
|
||||
{errors.processorPaymentMethodId && (
|
||||
<p className="text-sm text-destructive">{errors.processorPaymentMethodId.message}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="cardBrand">Card Brand</Label>
|
||||
<Input id="cardBrand" {...register('cardBrand')} placeholder="visa" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="lastFour">Last Four</Label>
|
||||
<Input id="lastFour" {...register('lastFour')} placeholder="4242" maxLength={4} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="expMonth">Exp Month</Label>
|
||||
<Input id="expMonth" type="number" {...register('expMonth', { valueAsNumber: true })} min={1} max={12} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="expYear">Exp Year</Label>
|
||||
<Input id="expYear" type="number" {...register('expYear', { valueAsNumber: true })} min={2024} max={2100} />
|
||||
</div>
|
||||
</div>
|
||||
<Button type="submit" disabled={loading}>
|
||||
{loading ? 'Saving...' : 'Add Payment Method'}
|
||||
</Button>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
import { useForm } from 'react-hook-form'
|
||||
import { zodResolver } from '@hookform/resolvers/zod'
|
||||
import { ProcessorLinkCreateSchema } from '@forte/shared/schemas'
|
||||
import type { ProcessorLinkCreateInput } from '@forte/shared/schemas'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||||
|
||||
interface ProcessorLinkFormProps {
|
||||
accountId: string
|
||||
onSubmit: (data: Record<string, unknown>) => void
|
||||
loading?: boolean
|
||||
}
|
||||
|
||||
export function ProcessorLinkForm({ accountId, onSubmit, loading }: ProcessorLinkFormProps) {
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
setValue,
|
||||
watch,
|
||||
formState: { errors },
|
||||
} = useForm<ProcessorLinkCreateInput>({
|
||||
resolver: zodResolver(ProcessorLinkCreateSchema),
|
||||
defaultValues: {
|
||||
accountId,
|
||||
processor: 'stripe',
|
||||
processorCustomerId: '',
|
||||
},
|
||||
})
|
||||
|
||||
const processor = watch('processor')
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Processor</Label>
|
||||
<Select
|
||||
value={processor}
|
||||
onValueChange={(v) => setValue('processor', v as 'stripe' | 'global_payments')}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="stripe">Stripe</SelectItem>
|
||||
<SelectItem value="global_payments">Global Payments</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="customerId">Customer ID *</Label>
|
||||
<Input id="customerId" {...register('processorCustomerId')} placeholder="cus_..." />
|
||||
{errors.processorCustomerId && (
|
||||
<p className="text-sm text-destructive">{errors.processorCustomerId.message}</p>
|
||||
)}
|
||||
</div>
|
||||
<Button type="submit" disabled={loading}>
|
||||
{loading ? 'Saving...' : 'Add Processor Link'}
|
||||
</Button>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
143
packages/admin/src/components/shared/data-table.tsx
Normal file
143
packages/admin/src/components/shared/data-table.tsx
Normal file
@@ -0,0 +1,143 @@
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from '@/components/ui/table'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
import { ChevronLeft, ChevronRight, ArrowUpDown, ArrowUp, ArrowDown } from 'lucide-react'
|
||||
|
||||
export interface Column<T> {
|
||||
key: string
|
||||
header: string
|
||||
sortable?: boolean
|
||||
render: (row: T) => React.ReactNode
|
||||
}
|
||||
|
||||
interface DataTableProps<T> {
|
||||
columns: Column<T>[]
|
||||
data: T[]
|
||||
loading?: boolean
|
||||
page: number
|
||||
totalPages: number
|
||||
total: number
|
||||
sort?: string
|
||||
order?: 'asc' | 'desc'
|
||||
onPageChange: (page: number) => void
|
||||
onSort?: (sort: string, order: 'asc' | 'desc') => void
|
||||
onRowClick?: (row: T) => void
|
||||
}
|
||||
|
||||
export function DataTable<T>({
|
||||
columns,
|
||||
data,
|
||||
loading,
|
||||
page,
|
||||
totalPages,
|
||||
total,
|
||||
sort,
|
||||
order,
|
||||
onPageChange,
|
||||
onSort,
|
||||
onRowClick,
|
||||
}: DataTableProps<T>) {
|
||||
function handleSort(key: string) {
|
||||
if (!onSort) return
|
||||
if (sort === key) {
|
||||
onSort(key, order === 'asc' ? 'desc' : 'asc')
|
||||
} else {
|
||||
onSort(key, 'asc')
|
||||
}
|
||||
}
|
||||
|
||||
function SortIcon({ columnKey }: { columnKey: string }) {
|
||||
if (sort !== columnKey) return <ArrowUpDown className="ml-1 h-3 w-3 opacity-40" />
|
||||
return order === 'asc'
|
||||
? <ArrowUp className="ml-1 h-3 w-3" />
|
||||
: <ArrowDown className="ml-1 h-3 w-3" />
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<Skeleton key={i} className="h-12 w-full" />
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-md border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
{columns.map((col) => (
|
||||
<TableHead
|
||||
key={col.key}
|
||||
className={col.sortable ? 'cursor-pointer select-none' : ''}
|
||||
onClick={() => col.sortable && handleSort(col.key)}
|
||||
>
|
||||
<span className="flex items-center">
|
||||
{col.header}
|
||||
{col.sortable && <SortIcon columnKey={col.key} />}
|
||||
</span>
|
||||
</TableHead>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{data.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={columns.length} className="text-center py-8 text-muted-foreground">
|
||||
No results found
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
data.map((row, i) => (
|
||||
<TableRow
|
||||
key={i}
|
||||
className={onRowClick ? 'cursor-pointer' : ''}
|
||||
onClick={() => onRowClick?.(row)}
|
||||
>
|
||||
{columns.map((col) => (
|
||||
<TableCell key={col.key}>{col.render(row)}</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between text-sm text-muted-foreground">
|
||||
<span>{total} total</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={page <= 1}
|
||||
onClick={() => onPageChange(page - 1)}
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
<span>
|
||||
Page {page} of {totalPages}
|
||||
</span>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={page >= totalPages}
|
||||
onClick={() => onPageChange(page + 1)}
|
||||
>
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
43
packages/admin/src/hooks/use-pagination.ts
Normal file
43
packages/admin/src/hooks/use-pagination.ts
Normal file
@@ -0,0 +1,43 @@
|
||||
import { useNavigate, useSearch } from '@tanstack/react-router'
|
||||
import type { PaginationInput } from '@forte/shared/schemas'
|
||||
|
||||
interface PaginationSearch {
|
||||
page?: number
|
||||
limit?: number
|
||||
q?: string
|
||||
sort?: string
|
||||
order?: 'asc' | 'desc'
|
||||
}
|
||||
|
||||
export function usePagination() {
|
||||
const search = useSearch({ strict: false }) as PaginationSearch
|
||||
const navigate = useNavigate()
|
||||
|
||||
const params: PaginationInput = {
|
||||
page: search.page ?? 1,
|
||||
limit: search.limit ?? 25,
|
||||
q: search.q,
|
||||
sort: search.sort,
|
||||
order: search.order ?? 'asc',
|
||||
}
|
||||
|
||||
function setParams(updates: Partial<PaginationSearch>) {
|
||||
navigate({
|
||||
search: (prev: PaginationSearch) => ({
|
||||
...prev,
|
||||
...updates,
|
||||
// Reset to page 1 when search or sort changes
|
||||
page: updates.q !== undefined || updates.sort !== undefined ? 1 : (updates.page ?? prev.page),
|
||||
}),
|
||||
replace: true,
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
...params,
|
||||
setPage: (page: number) => setParams({ page }),
|
||||
setSearch: (q: string) => setParams({ q: q || undefined }),
|
||||
setSort: (sort: string, order: 'asc' | 'desc') => setParams({ sort, order }),
|
||||
params,
|
||||
}
|
||||
}
|
||||
@@ -13,6 +13,13 @@ import { Route as LoginRouteImport } from './routes/login'
|
||||
import { Route as AuthenticatedRouteImport } from './routes/_authenticated'
|
||||
import { Route as AuthenticatedIndexRouteImport } from './routes/_authenticated/index'
|
||||
import { Route as AuthenticatedAccountsIndexRouteImport } from './routes/_authenticated/accounts/index'
|
||||
import { Route as AuthenticatedAccountsNewRouteImport } from './routes/_authenticated/accounts/new'
|
||||
import { Route as AuthenticatedAccountsAccountIdRouteImport } from './routes/_authenticated/accounts/$accountId'
|
||||
import { Route as AuthenticatedAccountsAccountIdIndexRouteImport } from './routes/_authenticated/accounts/$accountId/index'
|
||||
import { Route as AuthenticatedAccountsAccountIdTaxExemptionsRouteImport } from './routes/_authenticated/accounts/$accountId/tax-exemptions'
|
||||
import { Route as AuthenticatedAccountsAccountIdProcessorLinksRouteImport } from './routes/_authenticated/accounts/$accountId/processor-links'
|
||||
import { Route as AuthenticatedAccountsAccountIdPaymentMethodsRouteImport } from './routes/_authenticated/accounts/$accountId/payment-methods'
|
||||
import { Route as AuthenticatedAccountsAccountIdMembersRouteImport } from './routes/_authenticated/accounts/$accountId/members'
|
||||
|
||||
const LoginRoute = LoginRouteImport.update({
|
||||
id: '/login',
|
||||
@@ -34,35 +41,123 @@ const AuthenticatedAccountsIndexRoute =
|
||||
path: '/accounts/',
|
||||
getParentRoute: () => AuthenticatedRoute,
|
||||
} as any)
|
||||
const AuthenticatedAccountsNewRoute =
|
||||
AuthenticatedAccountsNewRouteImport.update({
|
||||
id: '/accounts/new',
|
||||
path: '/accounts/new',
|
||||
getParentRoute: () => AuthenticatedRoute,
|
||||
} as any)
|
||||
const AuthenticatedAccountsAccountIdRoute =
|
||||
AuthenticatedAccountsAccountIdRouteImport.update({
|
||||
id: '/accounts/$accountId',
|
||||
path: '/accounts/$accountId',
|
||||
getParentRoute: () => AuthenticatedRoute,
|
||||
} as any)
|
||||
const AuthenticatedAccountsAccountIdIndexRoute =
|
||||
AuthenticatedAccountsAccountIdIndexRouteImport.update({
|
||||
id: '/',
|
||||
path: '/',
|
||||
getParentRoute: () => AuthenticatedAccountsAccountIdRoute,
|
||||
} as any)
|
||||
const AuthenticatedAccountsAccountIdTaxExemptionsRoute =
|
||||
AuthenticatedAccountsAccountIdTaxExemptionsRouteImport.update({
|
||||
id: '/tax-exemptions',
|
||||
path: '/tax-exemptions',
|
||||
getParentRoute: () => AuthenticatedAccountsAccountIdRoute,
|
||||
} as any)
|
||||
const AuthenticatedAccountsAccountIdProcessorLinksRoute =
|
||||
AuthenticatedAccountsAccountIdProcessorLinksRouteImport.update({
|
||||
id: '/processor-links',
|
||||
path: '/processor-links',
|
||||
getParentRoute: () => AuthenticatedAccountsAccountIdRoute,
|
||||
} as any)
|
||||
const AuthenticatedAccountsAccountIdPaymentMethodsRoute =
|
||||
AuthenticatedAccountsAccountIdPaymentMethodsRouteImport.update({
|
||||
id: '/payment-methods',
|
||||
path: '/payment-methods',
|
||||
getParentRoute: () => AuthenticatedAccountsAccountIdRoute,
|
||||
} as any)
|
||||
const AuthenticatedAccountsAccountIdMembersRoute =
|
||||
AuthenticatedAccountsAccountIdMembersRouteImport.update({
|
||||
id: '/members',
|
||||
path: '/members',
|
||||
getParentRoute: () => AuthenticatedAccountsAccountIdRoute,
|
||||
} as any)
|
||||
|
||||
export interface FileRoutesByFullPath {
|
||||
'/': typeof AuthenticatedIndexRoute
|
||||
'/login': typeof LoginRoute
|
||||
'/accounts/$accountId': typeof AuthenticatedAccountsAccountIdRouteWithChildren
|
||||
'/accounts/new': typeof AuthenticatedAccountsNewRoute
|
||||
'/accounts/': typeof AuthenticatedAccountsIndexRoute
|
||||
'/accounts/$accountId/members': typeof AuthenticatedAccountsAccountIdMembersRoute
|
||||
'/accounts/$accountId/payment-methods': typeof AuthenticatedAccountsAccountIdPaymentMethodsRoute
|
||||
'/accounts/$accountId/processor-links': typeof AuthenticatedAccountsAccountIdProcessorLinksRoute
|
||||
'/accounts/$accountId/tax-exemptions': typeof AuthenticatedAccountsAccountIdTaxExemptionsRoute
|
||||
'/accounts/$accountId/': typeof AuthenticatedAccountsAccountIdIndexRoute
|
||||
}
|
||||
export interface FileRoutesByTo {
|
||||
'/login': typeof LoginRoute
|
||||
'/': typeof AuthenticatedIndexRoute
|
||||
'/accounts/new': typeof AuthenticatedAccountsNewRoute
|
||||
'/accounts': typeof AuthenticatedAccountsIndexRoute
|
||||
'/accounts/$accountId/members': typeof AuthenticatedAccountsAccountIdMembersRoute
|
||||
'/accounts/$accountId/payment-methods': typeof AuthenticatedAccountsAccountIdPaymentMethodsRoute
|
||||
'/accounts/$accountId/processor-links': typeof AuthenticatedAccountsAccountIdProcessorLinksRoute
|
||||
'/accounts/$accountId/tax-exemptions': typeof AuthenticatedAccountsAccountIdTaxExemptionsRoute
|
||||
'/accounts/$accountId': typeof AuthenticatedAccountsAccountIdIndexRoute
|
||||
}
|
||||
export interface FileRoutesById {
|
||||
__root__: typeof rootRouteImport
|
||||
'/_authenticated': typeof AuthenticatedRouteWithChildren
|
||||
'/login': typeof LoginRoute
|
||||
'/_authenticated/': typeof AuthenticatedIndexRoute
|
||||
'/_authenticated/accounts/$accountId': typeof AuthenticatedAccountsAccountIdRouteWithChildren
|
||||
'/_authenticated/accounts/new': typeof AuthenticatedAccountsNewRoute
|
||||
'/_authenticated/accounts/': typeof AuthenticatedAccountsIndexRoute
|
||||
'/_authenticated/accounts/$accountId/members': typeof AuthenticatedAccountsAccountIdMembersRoute
|
||||
'/_authenticated/accounts/$accountId/payment-methods': typeof AuthenticatedAccountsAccountIdPaymentMethodsRoute
|
||||
'/_authenticated/accounts/$accountId/processor-links': typeof AuthenticatedAccountsAccountIdProcessorLinksRoute
|
||||
'/_authenticated/accounts/$accountId/tax-exemptions': typeof AuthenticatedAccountsAccountIdTaxExemptionsRoute
|
||||
'/_authenticated/accounts/$accountId/': typeof AuthenticatedAccountsAccountIdIndexRoute
|
||||
}
|
||||
export interface FileRouteTypes {
|
||||
fileRoutesByFullPath: FileRoutesByFullPath
|
||||
fullPaths: '/' | '/login' | '/accounts/'
|
||||
fullPaths:
|
||||
| '/'
|
||||
| '/login'
|
||||
| '/accounts/$accountId'
|
||||
| '/accounts/new'
|
||||
| '/accounts/'
|
||||
| '/accounts/$accountId/members'
|
||||
| '/accounts/$accountId/payment-methods'
|
||||
| '/accounts/$accountId/processor-links'
|
||||
| '/accounts/$accountId/tax-exemptions'
|
||||
| '/accounts/$accountId/'
|
||||
fileRoutesByTo: FileRoutesByTo
|
||||
to: '/login' | '/' | '/accounts'
|
||||
to:
|
||||
| '/login'
|
||||
| '/'
|
||||
| '/accounts/new'
|
||||
| '/accounts'
|
||||
| '/accounts/$accountId/members'
|
||||
| '/accounts/$accountId/payment-methods'
|
||||
| '/accounts/$accountId/processor-links'
|
||||
| '/accounts/$accountId/tax-exemptions'
|
||||
| '/accounts/$accountId'
|
||||
id:
|
||||
| '__root__'
|
||||
| '/_authenticated'
|
||||
| '/login'
|
||||
| '/_authenticated/'
|
||||
| '/_authenticated/accounts/$accountId'
|
||||
| '/_authenticated/accounts/new'
|
||||
| '/_authenticated/accounts/'
|
||||
| '/_authenticated/accounts/$accountId/members'
|
||||
| '/_authenticated/accounts/$accountId/payment-methods'
|
||||
| '/_authenticated/accounts/$accountId/processor-links'
|
||||
| '/_authenticated/accounts/$accountId/tax-exemptions'
|
||||
| '/_authenticated/accounts/$accountId/'
|
||||
fileRoutesById: FileRoutesById
|
||||
}
|
||||
export interface RootRouteChildren {
|
||||
@@ -100,16 +195,97 @@ declare module '@tanstack/react-router' {
|
||||
preLoaderRoute: typeof AuthenticatedAccountsIndexRouteImport
|
||||
parentRoute: typeof AuthenticatedRoute
|
||||
}
|
||||
'/_authenticated/accounts/new': {
|
||||
id: '/_authenticated/accounts/new'
|
||||
path: '/accounts/new'
|
||||
fullPath: '/accounts/new'
|
||||
preLoaderRoute: typeof AuthenticatedAccountsNewRouteImport
|
||||
parentRoute: typeof AuthenticatedRoute
|
||||
}
|
||||
'/_authenticated/accounts/$accountId': {
|
||||
id: '/_authenticated/accounts/$accountId'
|
||||
path: '/accounts/$accountId'
|
||||
fullPath: '/accounts/$accountId'
|
||||
preLoaderRoute: typeof AuthenticatedAccountsAccountIdRouteImport
|
||||
parentRoute: typeof AuthenticatedRoute
|
||||
}
|
||||
'/_authenticated/accounts/$accountId/': {
|
||||
id: '/_authenticated/accounts/$accountId/'
|
||||
path: '/'
|
||||
fullPath: '/accounts/$accountId/'
|
||||
preLoaderRoute: typeof AuthenticatedAccountsAccountIdIndexRouteImport
|
||||
parentRoute: typeof AuthenticatedAccountsAccountIdRoute
|
||||
}
|
||||
'/_authenticated/accounts/$accountId/tax-exemptions': {
|
||||
id: '/_authenticated/accounts/$accountId/tax-exemptions'
|
||||
path: '/tax-exemptions'
|
||||
fullPath: '/accounts/$accountId/tax-exemptions'
|
||||
preLoaderRoute: typeof AuthenticatedAccountsAccountIdTaxExemptionsRouteImport
|
||||
parentRoute: typeof AuthenticatedAccountsAccountIdRoute
|
||||
}
|
||||
'/_authenticated/accounts/$accountId/processor-links': {
|
||||
id: '/_authenticated/accounts/$accountId/processor-links'
|
||||
path: '/processor-links'
|
||||
fullPath: '/accounts/$accountId/processor-links'
|
||||
preLoaderRoute: typeof AuthenticatedAccountsAccountIdProcessorLinksRouteImport
|
||||
parentRoute: typeof AuthenticatedAccountsAccountIdRoute
|
||||
}
|
||||
'/_authenticated/accounts/$accountId/payment-methods': {
|
||||
id: '/_authenticated/accounts/$accountId/payment-methods'
|
||||
path: '/payment-methods'
|
||||
fullPath: '/accounts/$accountId/payment-methods'
|
||||
preLoaderRoute: typeof AuthenticatedAccountsAccountIdPaymentMethodsRouteImport
|
||||
parentRoute: typeof AuthenticatedAccountsAccountIdRoute
|
||||
}
|
||||
'/_authenticated/accounts/$accountId/members': {
|
||||
id: '/_authenticated/accounts/$accountId/members'
|
||||
path: '/members'
|
||||
fullPath: '/accounts/$accountId/members'
|
||||
preLoaderRoute: typeof AuthenticatedAccountsAccountIdMembersRouteImport
|
||||
parentRoute: typeof AuthenticatedAccountsAccountIdRoute
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
interface AuthenticatedAccountsAccountIdRouteChildren {
|
||||
AuthenticatedAccountsAccountIdMembersRoute: typeof AuthenticatedAccountsAccountIdMembersRoute
|
||||
AuthenticatedAccountsAccountIdPaymentMethodsRoute: typeof AuthenticatedAccountsAccountIdPaymentMethodsRoute
|
||||
AuthenticatedAccountsAccountIdProcessorLinksRoute: typeof AuthenticatedAccountsAccountIdProcessorLinksRoute
|
||||
AuthenticatedAccountsAccountIdTaxExemptionsRoute: typeof AuthenticatedAccountsAccountIdTaxExemptionsRoute
|
||||
AuthenticatedAccountsAccountIdIndexRoute: typeof AuthenticatedAccountsAccountIdIndexRoute
|
||||
}
|
||||
|
||||
const AuthenticatedAccountsAccountIdRouteChildren: AuthenticatedAccountsAccountIdRouteChildren =
|
||||
{
|
||||
AuthenticatedAccountsAccountIdMembersRoute:
|
||||
AuthenticatedAccountsAccountIdMembersRoute,
|
||||
AuthenticatedAccountsAccountIdPaymentMethodsRoute:
|
||||
AuthenticatedAccountsAccountIdPaymentMethodsRoute,
|
||||
AuthenticatedAccountsAccountIdProcessorLinksRoute:
|
||||
AuthenticatedAccountsAccountIdProcessorLinksRoute,
|
||||
AuthenticatedAccountsAccountIdTaxExemptionsRoute:
|
||||
AuthenticatedAccountsAccountIdTaxExemptionsRoute,
|
||||
AuthenticatedAccountsAccountIdIndexRoute:
|
||||
AuthenticatedAccountsAccountIdIndexRoute,
|
||||
}
|
||||
|
||||
const AuthenticatedAccountsAccountIdRouteWithChildren =
|
||||
AuthenticatedAccountsAccountIdRoute._addFileChildren(
|
||||
AuthenticatedAccountsAccountIdRouteChildren,
|
||||
)
|
||||
|
||||
interface AuthenticatedRouteChildren {
|
||||
AuthenticatedIndexRoute: typeof AuthenticatedIndexRoute
|
||||
AuthenticatedAccountsAccountIdRoute: typeof AuthenticatedAccountsAccountIdRouteWithChildren
|
||||
AuthenticatedAccountsNewRoute: typeof AuthenticatedAccountsNewRoute
|
||||
AuthenticatedAccountsIndexRoute: typeof AuthenticatedAccountsIndexRoute
|
||||
}
|
||||
|
||||
const AuthenticatedRouteChildren: AuthenticatedRouteChildren = {
|
||||
AuthenticatedIndexRoute: AuthenticatedIndexRoute,
|
||||
AuthenticatedAccountsAccountIdRoute:
|
||||
AuthenticatedAccountsAccountIdRouteWithChildren,
|
||||
AuthenticatedAccountsNewRoute: AuthenticatedAccountsNewRoute,
|
||||
AuthenticatedAccountsIndexRoute: AuthenticatedAccountsIndexRoute,
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,71 @@
|
||||
import { createFileRoute, Outlet, Link, useParams } from '@tanstack/react-router'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { accountDetailOptions } from '@/api/accounts'
|
||||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
export const Route = createFileRoute('/_authenticated/accounts/$accountId')({
|
||||
component: AccountDetailLayout,
|
||||
})
|
||||
|
||||
const tabs = [
|
||||
{ label: 'Overview', to: '/accounts/$accountId' },
|
||||
{ label: 'Members', to: '/accounts/$accountId/members' },
|
||||
{ label: 'Payment Methods', to: '/accounts/$accountId/payment-methods' },
|
||||
{ label: 'Tax Exemptions', to: '/accounts/$accountId/tax-exemptions' },
|
||||
{ label: 'Processor Links', to: '/accounts/$accountId/processor-links' },
|
||||
] as const
|
||||
|
||||
function AccountDetailLayout() {
|
||||
const { accountId } = useParams({ from: '/_authenticated/accounts/$accountId' })
|
||||
const { data: account, isLoading } = useQuery(accountDetailOptions(accountId))
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<Skeleton className="h-8 w-64" />
|
||||
<Skeleton className="h-4 w-96" />
|
||||
<Skeleton className="h-10 w-full" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (!account) {
|
||||
return <p className="text-muted-foreground">Account not found</p>
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<div className="flex items-center gap-3">
|
||||
<h1 className="text-2xl font-bold">{account.name}</h1>
|
||||
<Badge variant="secondary">{account.billingMode}</Badge>
|
||||
</div>
|
||||
{account.email && <p className="text-muted-foreground">{account.email}</p>}
|
||||
</div>
|
||||
|
||||
<nav className="flex gap-1 border-b">
|
||||
{tabs.map((tab) => (
|
||||
<Link
|
||||
key={tab.to}
|
||||
to={tab.to}
|
||||
params={{ accountId }}
|
||||
activeOptions={{ exact: tab.to === '/accounts/$accountId' }}
|
||||
className={cn(
|
||||
'px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors',
|
||||
'text-muted-foreground border-transparent hover:text-foreground hover:border-border',
|
||||
)}
|
||||
activeProps={{
|
||||
className: 'text-foreground border-primary',
|
||||
}}
|
||||
>
|
||||
{tab.label}
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<Outlet />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import { createFileRoute, useParams } from '@tanstack/react-router'
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import { accountDetailOptions, accountMutations, accountKeys } from '@/api/accounts'
|
||||
import { AccountForm } from '@/components/accounts/account-form'
|
||||
import { toast } from 'sonner'
|
||||
|
||||
export const Route = createFileRoute('/_authenticated/accounts/$accountId/')({
|
||||
component: AccountOverviewPage,
|
||||
})
|
||||
|
||||
function AccountOverviewPage() {
|
||||
const { accountId } = useParams({ from: '/_authenticated/accounts/$accountId/' })
|
||||
const queryClient = useQueryClient()
|
||||
const { data: account } = useQuery(accountDetailOptions(accountId))
|
||||
|
||||
const mutation = useMutation({
|
||||
mutationFn: (data: Record<string, unknown>) => accountMutations.update(accountId, data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: accountKeys.detail(accountId) })
|
||||
toast.success('Account updated')
|
||||
},
|
||||
onError: (err) => {
|
||||
toast.error(err.message)
|
||||
},
|
||||
})
|
||||
|
||||
if (!account) return null
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-lg font-semibold">Edit Account</h2>
|
||||
<AccountForm
|
||||
defaultValues={account}
|
||||
onSubmit={mutation.mutate}
|
||||
loading={mutation.isPending}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,128 @@
|
||||
import { useState } from 'react'
|
||||
import { createFileRoute, useParams } from '@tanstack/react-router'
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import { memberListOptions, memberMutations, memberKeys } from '@/api/members'
|
||||
import { MemberForm } from '@/components/accounts/member-form'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
|
||||
import { Plus, Trash2 } from 'lucide-react'
|
||||
import { toast } from 'sonner'
|
||||
import type { Member } from '@/types/account'
|
||||
|
||||
export const Route = createFileRoute('/_authenticated/accounts/$accountId/members')({
|
||||
component: MembersTab,
|
||||
})
|
||||
|
||||
function MembersTab() {
|
||||
const { accountId } = useParams({ from: '/_authenticated/accounts/$accountId/members' })
|
||||
const queryClient = useQueryClient()
|
||||
const [dialogOpen, setDialogOpen] = useState(false)
|
||||
const [editingMember, setEditingMember] = useState<Member | null>(null)
|
||||
|
||||
const { data, isLoading } = useQuery(memberListOptions(accountId, { page: 1, limit: 100, order: 'asc' }))
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: (data: Record<string, unknown>) => memberMutations.create(accountId, data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: memberKeys.all(accountId) })
|
||||
toast.success('Member added')
|
||||
setDialogOpen(false)
|
||||
},
|
||||
onError: (err) => toast.error(err.message),
|
||||
})
|
||||
|
||||
const updateMutation = useMutation({
|
||||
mutationFn: (data: Record<string, unknown>) => memberMutations.update(editingMember!.id, data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: memberKeys.all(accountId) })
|
||||
toast.success('Member updated')
|
||||
setEditingMember(null)
|
||||
},
|
||||
onError: (err) => toast.error(err.message),
|
||||
})
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: memberMutations.delete,
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: memberKeys.all(accountId) })
|
||||
toast.success('Member removed')
|
||||
},
|
||||
onError: (err) => toast.error(err.message),
|
||||
})
|
||||
|
||||
const members = data?.data ?? []
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-lg font-semibold">Members</h2>
|
||||
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button size="sm"><Plus className="mr-2 h-4 w-4" />Add Member</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader><DialogTitle>Add Member</DialogTitle></DialogHeader>
|
||||
<MemberForm accountId={accountId} onSubmit={createMutation.mutate} loading={createMutation.isPending} />
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
|
||||
{/* Edit dialog */}
|
||||
<Dialog open={!!editingMember} onOpenChange={(open) => !open && setEditingMember(null)}>
|
||||
<DialogContent>
|
||||
<DialogHeader><DialogTitle>Edit Member</DialogTitle></DialogHeader>
|
||||
{editingMember && (
|
||||
<MemberForm
|
||||
accountId={accountId}
|
||||
defaultValues={editingMember}
|
||||
onSubmit={updateMutation.mutate}
|
||||
loading={updateMutation.isPending}
|
||||
/>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{isLoading ? (
|
||||
<p className="text-muted-foreground">Loading...</p>
|
||||
) : members.length === 0 ? (
|
||||
<p className="text-muted-foreground py-8 text-center">No members yet</p>
|
||||
) : (
|
||||
<div className="rounded-md border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead>Email</TableHead>
|
||||
<TableHead>Date of Birth</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead className="w-24">Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{members.map((m) => (
|
||||
<TableRow key={m.id}>
|
||||
<TableCell className="font-medium">{m.firstName} {m.lastName}</TableCell>
|
||||
<TableCell>{m.email ?? '-'}</TableCell>
|
||||
<TableCell>{m.dateOfBirth ?? '-'}</TableCell>
|
||||
<TableCell>
|
||||
{m.isMinor ? <Badge variant="secondary">Minor</Badge> : <Badge>Adult</Badge>}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex gap-1">
|
||||
<Button variant="ghost" size="sm" onClick={() => setEditingMember(m)}>Edit</Button>
|
||||
<Button variant="ghost" size="sm" onClick={() => deleteMutation.mutate(m.id)}>
|
||||
<Trash2 className="h-4 w-4 text-destructive" />
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,117 @@
|
||||
import { useState } from 'react'
|
||||
import { createFileRoute, useParams } from '@tanstack/react-router'
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import { paymentMethodListOptions, paymentMethodMutations, paymentMethodKeys } from '@/api/payment-methods'
|
||||
import { PaymentMethodForm } from '@/components/accounts/payment-method-form'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
|
||||
import { Plus, Trash2, Star } from 'lucide-react'
|
||||
import { toast } from 'sonner'
|
||||
|
||||
export const Route = createFileRoute('/_authenticated/accounts/$accountId/payment-methods')({
|
||||
component: PaymentMethodsTab,
|
||||
})
|
||||
|
||||
function PaymentMethodsTab() {
|
||||
const { accountId } = useParams({ from: '/_authenticated/accounts/$accountId/payment-methods' })
|
||||
const queryClient = useQueryClient()
|
||||
const [dialogOpen, setDialogOpen] = useState(false)
|
||||
|
||||
const { data, isLoading } = useQuery(paymentMethodListOptions(accountId))
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: (data: Record<string, unknown>) => paymentMethodMutations.create(accountId, data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: paymentMethodKeys.all(accountId) })
|
||||
toast.success('Payment method added')
|
||||
setDialogOpen(false)
|
||||
},
|
||||
onError: (err) => toast.error(err.message),
|
||||
})
|
||||
|
||||
const setDefaultMutation = useMutation({
|
||||
mutationFn: (id: string) => paymentMethodMutations.update(id, { isDefault: true }),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: paymentMethodKeys.all(accountId) })
|
||||
toast.success('Default payment method updated')
|
||||
},
|
||||
onError: (err) => toast.error(err.message),
|
||||
})
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: paymentMethodMutations.delete,
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: paymentMethodKeys.all(accountId) })
|
||||
toast.success('Payment method removed')
|
||||
},
|
||||
onError: (err) => toast.error(err.message),
|
||||
})
|
||||
|
||||
const methods = data?.data ?? []
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-lg font-semibold">Payment Methods</h2>
|
||||
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button size="sm"><Plus className="mr-2 h-4 w-4" />Add Method</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader><DialogTitle>Add Payment Method</DialogTitle></DialogHeader>
|
||||
<PaymentMethodForm accountId={accountId} onSubmit={createMutation.mutate} loading={createMutation.isPending} />
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<p className="text-muted-foreground">Loading...</p>
|
||||
) : methods.length === 0 ? (
|
||||
<p className="text-muted-foreground py-8 text-center">No payment methods</p>
|
||||
) : (
|
||||
<div className="rounded-md border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Card</TableHead>
|
||||
<TableHead>Processor</TableHead>
|
||||
<TableHead>Expires</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead className="w-32">Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{methods.map((m) => (
|
||||
<TableRow key={m.id}>
|
||||
<TableCell className="font-medium">
|
||||
{m.cardBrand ?? 'Card'} {m.lastFour ? `****${m.lastFour}` : ''}
|
||||
</TableCell>
|
||||
<TableCell><Badge variant="outline">{m.processor}</Badge></TableCell>
|
||||
<TableCell>{m.expMonth && m.expYear ? `${m.expMonth}/${m.expYear}` : '-'}</TableCell>
|
||||
<TableCell>
|
||||
{m.isDefault && <Badge>Default</Badge>}
|
||||
{m.requiresUpdate && <Badge variant="destructive">Needs Update</Badge>}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex gap-1">
|
||||
{!m.isDefault && (
|
||||
<Button variant="ghost" size="sm" onClick={() => setDefaultMutation.mutate(m.id)}>
|
||||
<Star className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
<Button variant="ghost" size="sm" onClick={() => deleteMutation.mutate(m.id)}>
|
||||
<Trash2 className="h-4 w-4 text-destructive" />
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
import { useState } from 'react'
|
||||
import { createFileRoute, useParams } from '@tanstack/react-router'
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import { processorLinkListOptions, processorLinkMutations, processorLinkKeys } from '@/api/processor-links'
|
||||
import { ProcessorLinkForm } from '@/components/accounts/processor-link-form'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
|
||||
import { Plus, Trash2 } from 'lucide-react'
|
||||
import { toast } from 'sonner'
|
||||
|
||||
export const Route = createFileRoute('/_authenticated/accounts/$accountId/processor-links')({
|
||||
component: ProcessorLinksTab,
|
||||
})
|
||||
|
||||
function ProcessorLinksTab() {
|
||||
const { accountId } = useParams({ from: '/_authenticated/accounts/$accountId/processor-links' })
|
||||
const queryClient = useQueryClient()
|
||||
const [dialogOpen, setDialogOpen] = useState(false)
|
||||
|
||||
const { data, isLoading } = useQuery(processorLinkListOptions(accountId))
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: (data: Record<string, unknown>) => processorLinkMutations.create(accountId, data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: processorLinkKeys.all(accountId) })
|
||||
toast.success('Processor link added')
|
||||
setDialogOpen(false)
|
||||
},
|
||||
onError: (err) => toast.error(err.message),
|
||||
})
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: processorLinkMutations.delete,
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: processorLinkKeys.all(accountId) })
|
||||
toast.success('Processor link removed')
|
||||
},
|
||||
onError: (err) => toast.error(err.message),
|
||||
})
|
||||
|
||||
const links = data?.data ?? []
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-lg font-semibold">Processor Links</h2>
|
||||
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button size="sm"><Plus className="mr-2 h-4 w-4" />Add Link</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader><DialogTitle>Add Processor Link</DialogTitle></DialogHeader>
|
||||
<ProcessorLinkForm accountId={accountId} onSubmit={createMutation.mutate} loading={createMutation.isPending} />
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<p className="text-muted-foreground">Loading...</p>
|
||||
) : links.length === 0 ? (
|
||||
<p className="text-muted-foreground py-8 text-center">No processor links</p>
|
||||
) : (
|
||||
<div className="rounded-md border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Processor</TableHead>
|
||||
<TableHead>Customer ID</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead className="w-24">Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{links.map((l) => (
|
||||
<TableRow key={l.id}>
|
||||
<TableCell><Badge variant="outline">{l.processor}</Badge></TableCell>
|
||||
<TableCell className="font-mono text-sm">{l.processorCustomerId}</TableCell>
|
||||
<TableCell>
|
||||
{l.isActive ? <Badge>Active</Badge> : <Badge variant="secondary">Inactive</Badge>}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Button variant="ghost" size="sm" onClick={() => deleteMutation.mutate(l.id)}>
|
||||
<Trash2 className="h-4 w-4 text-destructive" />
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,128 @@
|
||||
import { useState } from 'react'
|
||||
import { createFileRoute, useParams } from '@tanstack/react-router'
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import { taxExemptionListOptions, taxExemptionMutations, taxExemptionKeys } from '@/api/tax-exemptions'
|
||||
import { TaxExemptionForm } from '@/components/accounts/tax-exemption-form'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
|
||||
import { Plus, Check, X } from 'lucide-react'
|
||||
import { toast } from 'sonner'
|
||||
|
||||
export const Route = createFileRoute('/_authenticated/accounts/$accountId/tax-exemptions')({
|
||||
component: TaxExemptionsTab,
|
||||
})
|
||||
|
||||
function statusBadge(status: string) {
|
||||
switch (status) {
|
||||
case 'approved': return <Badge className="bg-green-600">Approved</Badge>
|
||||
case 'pending': return <Badge variant="secondary">Pending</Badge>
|
||||
default: return <Badge variant="outline">None</Badge>
|
||||
}
|
||||
}
|
||||
|
||||
function TaxExemptionsTab() {
|
||||
const { accountId } = useParams({ from: '/_authenticated/accounts/$accountId/tax-exemptions' })
|
||||
const queryClient = useQueryClient()
|
||||
const [dialogOpen, setDialogOpen] = useState(false)
|
||||
|
||||
const { data, isLoading } = useQuery(taxExemptionListOptions(accountId))
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: (data: Record<string, unknown>) => taxExemptionMutations.create(accountId, data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: taxExemptionKeys.all(accountId) })
|
||||
toast.success('Tax exemption added')
|
||||
setDialogOpen(false)
|
||||
},
|
||||
onError: (err) => toast.error(err.message),
|
||||
})
|
||||
|
||||
const approveMutation = useMutation({
|
||||
mutationFn: taxExemptionMutations.approve,
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: taxExemptionKeys.all(accountId) })
|
||||
toast.success('Tax exemption approved')
|
||||
},
|
||||
onError: (err) => toast.error(err.message),
|
||||
})
|
||||
|
||||
const revokeMutation = useMutation({
|
||||
mutationFn: (id: string) => {
|
||||
const reason = window.prompt('Reason for revoking this exemption:')
|
||||
if (!reason) throw new Error('Reason is required')
|
||||
return taxExemptionMutations.revoke(id, reason)
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: taxExemptionKeys.all(accountId) })
|
||||
toast.success('Tax exemption revoked')
|
||||
},
|
||||
onError: (err) => toast.error(err.message),
|
||||
})
|
||||
|
||||
const exemptions = data?.data ?? []
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-lg font-semibold">Tax Exemptions</h2>
|
||||
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button size="sm"><Plus className="mr-2 h-4 w-4" />Add Exemption</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader><DialogTitle>Add Tax Exemption</DialogTitle></DialogHeader>
|
||||
<TaxExemptionForm accountId={accountId} onSubmit={createMutation.mutate} loading={createMutation.isPending} />
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<p className="text-muted-foreground">Loading...</p>
|
||||
) : exemptions.length === 0 ? (
|
||||
<p className="text-muted-foreground py-8 text-center">No tax exemptions</p>
|
||||
) : (
|
||||
<div className="rounded-md border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Certificate #</TableHead>
|
||||
<TableHead>Type</TableHead>
|
||||
<TableHead>State</TableHead>
|
||||
<TableHead>Expires</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead className="w-32">Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{exemptions.map((e) => (
|
||||
<TableRow key={e.id}>
|
||||
<TableCell className="font-medium">{e.certificateNumber}</TableCell>
|
||||
<TableCell>{e.certificateType ?? '-'}</TableCell>
|
||||
<TableCell>{e.issuingState ?? '-'}</TableCell>
|
||||
<TableCell>{e.expiresAt ?? '-'}</TableCell>
|
||||
<TableCell>{statusBadge(e.status)}</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex gap-1">
|
||||
{e.status === 'pending' && (
|
||||
<Button variant="ghost" size="sm" onClick={() => approveMutation.mutate(e.id)}>
|
||||
<Check className="h-4 w-4 text-green-600" />
|
||||
</Button>
|
||||
)}
|
||||
{e.status === 'approved' && (
|
||||
<Button variant="ghost" size="sm" onClick={() => revokeMutation.mutate(e.id)}>
|
||||
<X className="h-4 w-4 text-destructive" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,14 +1,78 @@
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
import { createFileRoute, useNavigate } from '@tanstack/react-router'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { useState } from 'react'
|
||||
import { accountListOptions } from '@/api/accounts'
|
||||
import { usePagination } from '@/hooks/use-pagination'
|
||||
import { DataTable } from '@/components/shared/data-table'
|
||||
import { accountColumns } from '@/components/accounts/account-table'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Plus, Search } from 'lucide-react'
|
||||
import type { Account } from '@/types/account'
|
||||
|
||||
export const Route = createFileRoute('/_authenticated/accounts/')({
|
||||
validateSearch: (search: Record<string, unknown>) => ({
|
||||
page: Number(search.page) || 1,
|
||||
limit: Number(search.limit) || 25,
|
||||
q: (search.q as string) || undefined,
|
||||
sort: (search.sort as string) || undefined,
|
||||
order: (search.order as 'asc' | 'desc') || 'asc',
|
||||
}),
|
||||
component: AccountsListPage,
|
||||
})
|
||||
|
||||
function AccountsListPage() {
|
||||
const navigate = useNavigate()
|
||||
const { params, setPage, setSearch, setSort } = usePagination()
|
||||
const [searchInput, setSearchInput] = useState(params.q ?? '')
|
||||
|
||||
const { data, isLoading } = useQuery(accountListOptions(params))
|
||||
|
||||
function handleSearchSubmit(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
setSearch(searchInput)
|
||||
}
|
||||
|
||||
function handleRowClick(account: Account) {
|
||||
navigate({ to: '/accounts/$accountId', params: { accountId: account.id } })
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">Accounts</h1>
|
||||
<p className="text-muted-foreground mt-2">Account list — coming next phase</p>
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-2xl font-bold">Accounts</h1>
|
||||
<Button onClick={() => navigate({ to: '/accounts/new' })}>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
New Account
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSearchSubmit} className="flex gap-2 max-w-sm">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Search accounts..."
|
||||
value={searchInput}
|
||||
onChange={(e) => setSearchInput(e.target.value)}
|
||||
className="pl-9"
|
||||
/>
|
||||
</div>
|
||||
<Button type="submit" variant="secondary">Search</Button>
|
||||
</form>
|
||||
|
||||
<DataTable
|
||||
columns={accountColumns}
|
||||
data={data?.data ?? []}
|
||||
loading={isLoading}
|
||||
page={params.page}
|
||||
totalPages={data?.pagination.totalPages ?? 1}
|
||||
total={data?.pagination.total ?? 0}
|
||||
sort={params.sort}
|
||||
order={params.order}
|
||||
onPageChange={setPage}
|
||||
onSort={setSort}
|
||||
onRowClick={handleRowClick}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
33
packages/admin/src/routes/_authenticated/accounts/new.tsx
Normal file
33
packages/admin/src/routes/_authenticated/accounts/new.tsx
Normal file
@@ -0,0 +1,33 @@
|
||||
import { createFileRoute, useNavigate } from '@tanstack/react-router'
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import { accountMutations, accountKeys } from '@/api/accounts'
|
||||
import { AccountForm } from '@/components/accounts/account-form'
|
||||
import { toast } from 'sonner'
|
||||
|
||||
export const Route = createFileRoute('/_authenticated/accounts/new')({
|
||||
component: NewAccountPage,
|
||||
})
|
||||
|
||||
function NewAccountPage() {
|
||||
const navigate = useNavigate()
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
const mutation = useMutation({
|
||||
mutationFn: accountMutations.create,
|
||||
onSuccess: (account) => {
|
||||
queryClient.invalidateQueries({ queryKey: accountKeys.lists() })
|
||||
toast.success('Account created')
|
||||
navigate({ to: '/accounts/$accountId', params: { accountId: account.id } })
|
||||
},
|
||||
onError: (err) => {
|
||||
toast.error(err.message)
|
||||
},
|
||||
})
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<h1 className="text-2xl font-bold">New Account</h1>
|
||||
<AccountForm onSubmit={mutation.mutate} loading={mutation.isPending} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
82
packages/admin/src/types/account.ts
Normal file
82
packages/admin/src/types/account.ts
Normal file
@@ -0,0 +1,82 @@
|
||||
export interface Account {
|
||||
id: string
|
||||
companyId: string
|
||||
accountNumber: string | null
|
||||
name: string
|
||||
email: string | null
|
||||
phone: string | null
|
||||
address: {
|
||||
street?: string
|
||||
city?: string
|
||||
state?: string
|
||||
zip?: string
|
||||
} | null
|
||||
billingMode: 'consolidated' | 'split'
|
||||
notes: string | null
|
||||
isActive: boolean
|
||||
legacyId: string | null
|
||||
legacySource: string | null
|
||||
migratedAt: string | null
|
||||
createdAt: string
|
||||
updatedAt: string
|
||||
}
|
||||
|
||||
export interface Member {
|
||||
id: string
|
||||
accountId: string
|
||||
companyId: string
|
||||
firstName: string
|
||||
lastName: string
|
||||
dateOfBirth: string | null
|
||||
isMinor: boolean
|
||||
email: string | null
|
||||
phone: string | null
|
||||
notes: string | null
|
||||
legacyId: string | null
|
||||
createdAt: string
|
||||
updatedAt: string
|
||||
}
|
||||
|
||||
export interface ProcessorLink {
|
||||
id: string
|
||||
accountId: string
|
||||
companyId: string
|
||||
processor: 'stripe' | 'global_payments'
|
||||
processorCustomerId: string
|
||||
isActive: boolean
|
||||
createdAt: string
|
||||
}
|
||||
|
||||
export interface PaymentMethod {
|
||||
id: string
|
||||
accountId: string
|
||||
companyId: string
|
||||
processor: 'stripe' | 'global_payments'
|
||||
processorPaymentMethodId: string
|
||||
cardBrand: string | null
|
||||
lastFour: string | null
|
||||
expMonth: number | null
|
||||
expYear: number | null
|
||||
isDefault: boolean
|
||||
requiresUpdate: boolean
|
||||
createdAt: string
|
||||
}
|
||||
|
||||
export interface TaxExemption {
|
||||
id: string
|
||||
accountId: string
|
||||
companyId: string
|
||||
status: 'none' | 'pending' | 'approved'
|
||||
certificateNumber: string
|
||||
certificateType: string | null
|
||||
issuingState: string | null
|
||||
expiresAt: string | null
|
||||
approvedBy: string | null
|
||||
approvedAt: string | null
|
||||
revokedBy: string | null
|
||||
revokedAt: string | null
|
||||
revokedReason: string | null
|
||||
notes: string | null
|
||||
createdAt: string
|
||||
updatedAt: string
|
||||
}
|
||||
Reference in New Issue
Block a user