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
@@ -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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user