ryan/lunarfront-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add paginated users/roles, user status, frontend permissions, profile pictures, identifier file storage

Browse Source 
- Users page: paginated, searchable, sortable with inline roles (no N+1)
- Roles page: paginated, searchable, sortable + /roles/all for dropdowns
- User is_active field with migration, PATCH toggle, auth check (disabled=401)
- Frontend permission checks: auth store loads permissions, sidebar/buttons conditional
- Profile pictures via file storage for users and members, avatar component
- Identifier images use file storage API instead of base64
- Fix TypeScript errors across admin UI
- 64 API tests passing (10 new)
This commit is contained in:
Ryan Moon
2026-03-29 08:16:34 -05:00
parent 92371ff228
commit b9f78639e2
48 changed files with 1689 additions and 643 deletions
Download Patch File Download Diff File Expand all files Collapse all files

240
packages/admin/src/routes/_authenticated/accounts/$accountId/members.tsx
View File

@@ -5,8 +5,11 @@ import { memberListOptions, memberMutations, memberKeys } from '@/api/members'
import { identifierListOptions, identifierMutations, identifierKeys } from '@/api/identifiers'
import { MemberForm } from '@/components/accounts/member-form'
import { IdentifierForm } from '@/components/accounts/identifier-form'
import { usePagination } from '@/hooks/use-pagination'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Input } from '@/components/ui/input'
import { Skeleton } from '@/components/ui/skeleton'
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
import {
DropdownMenu,
@@ -16,11 +19,17 @@ import {
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
import { Plus, Trash2, CreditCard, ChevronDown, ChevronRight, MoreVertical, Pencil } from 'lucide-react'
import { Plus, Trash2, CreditCard, ChevronDown, ChevronRight, ChevronLeft, MoreVertical, Pencil, Search, ArrowUpDown, ArrowUp, ArrowDown } from 'lucide-react'
import { toast } from 'sonner'
import type { Member } from '@/types/account'
export const Route = createFileRoute('/_authenticated/accounts/$accountId/members')({
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: MembersTab,
})
@@ -66,7 +75,7 @@ function MemberIdentifiers({ memberId }: { memberId: string }) {
</DialogTrigger>
<DialogContent>
<DialogHeader><DialogTitle>Add Identity Document</DialogTitle></DialogHeader>
<IdentifierForm memberId={memberId} onSubmit={createMutation.mutate} loading={createMutation.isPending} />
<IdentifierForm memberId={memberId} onSubmit={(data) => createMutation.mutate(data)} loading={createMutation.isPending} />
</DialogContent>
</Dialog>
</div>
@@ -96,7 +105,7 @@ function MemberIdentifiers({ memberId }: { memberId: string }) {
</div>
</div>
<div className="flex items-center gap-1">
{(id.imageFront || id.imageBack) && (
{(id.imageFrontFileId || id.imageBackFileId) && (
<Badge variant="outline" className="text-xs">Has images</Badge>
)}
<Button variant="ghost" size="sm" onClick={() => deleteMutation.mutate(id.id)}>
@@ -111,14 +120,44 @@ function MemberIdentifiers({ memberId }: { memberId: string }) {
)
}
function SortableHeader({ label, sortKey, currentSort, currentOrder, onSort }: {
label: string
sortKey: string
currentSort?: string
currentOrder?: 'asc' | 'desc'
onSort: (sort: string, order: 'asc' | 'desc') => void
}) {
function handleClick() {
if (currentSort === sortKey) {
onSort(sortKey, currentOrder === 'asc' ? 'desc' : 'asc')
} else {
onSort(sortKey, 'asc')
}
}
const Icon = currentSort !== sortKey ? ArrowUpDown
: currentOrder === 'asc' ? ArrowUp : ArrowDown
return (
<TableHead className="cursor-pointer select-none" onClick={handleClick}>
<span className="flex items-center">
{label}
<Icon className={`ml-1 h-3 w-3 ${currentSort !== sortKey ? 'opacity-40' : ''}`} />
</span>
</TableHead>
)
}
function MembersTab() {
const { accountId } = useParams({ from: '/_authenticated/accounts/$accountId/members' })
const navigate = useNavigate()
const queryClient = useQueryClient()
const [dialogOpen, setDialogOpen] = useState(false)
const [expandedMember, setExpandedMember] = useState<string | null>(null)
const { params, setPage, setSearch, setSort } = usePagination()
const [searchInput, setSearchInput] = useState(params.q ?? '')
const { data, isLoading } = useQuery(memberListOptions(accountId, { page: 1, limit: 100, order: 'asc' }))
const { data, isLoading } = useQuery(memberListOptions(accountId, params))
const createMutation = useMutation({
mutationFn: (data: Record<string, unknown>) => memberMutations.create(accountId, data),
@@ -139,7 +178,24 @@ function MembersTab() {
onError: (err) => toast.error(err.message),
})
function handleSearchSubmit(e: React.FormEvent) {
e.preventDefault()
setSearch(searchInput)
}
const members = data?.data ?? []
const totalPages = data?.pagination.totalPages ?? 1
const total = data?.pagination.total ?? 0
if (isLoading) {
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">
@@ -156,89 +212,131 @@ function MembersTab() {
</Dialog>
</div>
{isLoading ? (
<p className="text-muted-foreground">Loading...</p>
) : members.length === 0 ? (
<p className="text-muted-foreground py-8 text-center">No members yet</p>
) : (
<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 members..."
value={searchInput}
onChange={(e) => setSearchInput(e.target.value)}
className="pl-9"
/>
</div>
<Button type="submit" variant="secondary">Search</Button>
</form>
<div className="space-y-4">
<div className="rounded-md border">
<Table>
<TableHeader>
<TableRow>
<TableHead className="w-8"></TableHead>
<TableHead>#</TableHead>
<TableHead>Name</TableHead>
<TableHead>Email</TableHead>
<SortableHeader label="Name" sortKey="last_name" currentSort={params.sort} currentOrder={params.order} onSort={setSort} />
<SortableHeader label="Email" sortKey="email" currentSort={params.sort} currentOrder={params.order} onSort={setSort} />
<TableHead>Phone</TableHead>
<TableHead>Status</TableHead>
<TableHead className="w-12"></TableHead>
</TableRow>
</TableHeader>
<TableBody>
{members.map((m) => (
<>
<TableRow key={m.id}>
<TableCell>
<Button
variant="ghost"
size="sm"
className="h-6 w-6 p-0"
onClick={() => setExpandedMember(expandedMember === m.id ? null : m.id)}
title="Show IDs"
>
{expandedMember === m.id
? <ChevronDown className="h-3 w-3" />
: <ChevronRight className="h-3 w-3" />}
</Button>
</TableCell>
<TableCell className="font-mono text-sm text-muted-foreground">{m.memberNumber ?? '-'}</TableCell>
<TableCell className="font-medium">{m.firstName} {m.lastName}</TableCell>
<TableCell>{m.email ?? '-'}</TableCell>
<TableCell>{m.phone ?? '-'}</TableCell>
<TableCell>
{m.isMinor ? <Badge variant="secondary">Minor</Badge> : <Badge>Adult</Badge>}
</TableCell>
<TableCell>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="sm" className="h-8 w-8 p-0">
<MoreVertical className="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => navigate({
to: '/members/$memberId',
params: { memberId: m.id },
})}>
<Pencil className="mr-2 h-4 w-4" />
Edit
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setExpandedMember(expandedMember === m.id ? null : m.id)}>
<CreditCard className="mr-2 h-4 w-4" />
{expandedMember === m.id ? 'Hide IDs' : 'View IDs'}
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem className="text-destructive" onClick={() => deleteMutation.mutate(m.id)}>
<Trash2 className="mr-2 h-4 w-4" />
Delete
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</TableCell>
</TableRow>
{expandedMember === m.id && (
<TableRow key={`${m.id}-ids`}>
<TableCell colSpan={7} className="p-0">
<MemberIdentifiers memberId={m.id} />
{members.length === 0 ? (
<TableRow>
<TableCell colSpan={7} className="text-center py-8 text-muted-foreground">
No members found
</TableCell>
</TableRow>
) : (
members.map((m) => (
<>
<TableRow key={m.id}>
<TableCell>
<Button
variant="ghost"
size="sm"
className="h-6 w-6 p-0"
onClick={() => setExpandedMember(expandedMember === m.id ? null : m.id)}
title="Show IDs"
>
{expandedMember === m.id
? <ChevronDown className="h-3 w-3" />
: <ChevronRight className="h-3 w-3" />}
</Button>
</TableCell>
<TableCell className="font-mono text-sm text-muted-foreground">{m.memberNumber ?? '-'}</TableCell>
<TableCell className="font-medium">{m.firstName} {m.lastName}</TableCell>
<TableCell>{m.email ?? '-'}</TableCell>
<TableCell>{m.phone ?? '-'}</TableCell>
<TableCell>
{m.isMinor ? <Badge variant="secondary">Minor</Badge> : <Badge>Adult</Badge>}
</TableCell>
<TableCell>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="sm" className="h-8 w-8 p-0">
<MoreVertical className="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => navigate({
to: '/members/$memberId',
params: { memberId: m.id },
})}>
<Pencil className="mr-2 h-4 w-4" />
Edit
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setExpandedMember(expandedMember === m.id ? null : m.id)}>
<CreditCard className="mr-2 h-4 w-4" />
{expandedMember === m.id ? 'Hide IDs' : 'View IDs'}
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem className="text-destructive" onClick={() => deleteMutation.mutate(m.id)}>
<Trash2 className="mr-2 h-4 w-4" />
Delete
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</TableCell>
</TableRow>
)}
</>
))}
{expandedMember === m.id && (
<TableRow key={`${m.id}-ids`}>
<TableCell colSpan={7} className="p-0">
<MemberIdentifiers memberId={m.id} />
</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={params.page <= 1}
onClick={() => setPage(params.page - 1)}
>
<ChevronLeft className="h-4 w-4" />
</Button>
<span>
Page {params.page} of {totalPages}
</span>
<Button
variant="outline"
size="sm"
disabled={params.page >= totalPages}
onClick={() => setPage(params.page + 1)}
>
<ChevronRight className="h-4 w-4" />
</Button>
</div>
</div>
</div>
</div>
)
}

138
packages/admin/src/routes/_authenticated/accounts/$accountId/payment-methods.tsx
View File

@@ -3,14 +3,24 @@ 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 { usePagination } from '@/hooks/use-pagination'
import { DataTable, type Column } from '@/components/shared/data-table'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Input } from '@/components/ui/input'
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 { Plus, Trash2, Star, Search } from 'lucide-react'
import { toast } from 'sonner'
import type { PaymentMethod } from '@/types/account'
export const Route = createFileRoute('/_authenticated/accounts/$accountId/payment-methods')({
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: PaymentMethodsTab,
})
@@ -18,8 +28,10 @@ function PaymentMethodsTab() {
const { accountId } = useParams({ from: '/_authenticated/accounts/$accountId/payment-methods' })
const queryClient = useQueryClient()
const [dialogOpen, setDialogOpen] = useState(false)
const { params, setPage, setSearch, setSort } = usePagination()
const [searchInput, setSearchInput] = useState(params.q ?? '')
const { data, isLoading } = useQuery(paymentMethodListOptions(accountId))
const { data, isLoading } = useQuery(paymentMethodListOptions(accountId, params))
const createMutation = useMutation({
mutationFn: (data: Record<string, unknown>) => paymentMethodMutations.create(accountId, data),
@@ -49,7 +61,56 @@ function PaymentMethodsTab() {
onError: (err) => toast.error(err.message),
})
const methods = data?.data ?? []
function handleSearchSubmit(e: React.FormEvent) {
e.preventDefault()
setSearch(searchInput)
}
const columns: Column<PaymentMethod>[] = [
{
key: 'card_brand',
header: 'Card',
sortable: true,
render: (m) => <span className="font-medium">{m.cardBrand ?? 'Card'} {m.lastFour ? `****${m.lastFour}` : ''}</span>,
},
{
key: 'processor',
header: 'Processor',
sortable: true,
render: (m) => <Badge variant="outline">{m.processor}</Badge>,
},
{
key: 'expires',
header: 'Expires',
render: (m) => <>{m.expMonth && m.expYear ? `${m.expMonth}/${m.expYear}` : '-'}</>,
},
{
key: 'status',
header: 'Status',
render: (m) => (
<div className="flex gap-1">
{m.isDefault && <Badge>Default</Badge>}
{m.requiresUpdate && <Badge variant="destructive">Needs Update</Badge>}
</div>
),
},
{
key: 'actions',
header: 'Actions',
render: (m) => (
<div className="flex gap-1">
{!m.isDefault && (
<Button variant="ghost" size="sm" onClick={(e) => { e.stopPropagation(); setDefaultMutation.mutate(m.id) }}>
<Star className="h-4 w-4" />
</Button>
)}
<Button variant="ghost" size="sm" onClick={(e) => { e.stopPropagation(); deleteMutation.mutate(m.id) }}>
<Trash2 className="h-4 w-4 text-destructive" />
</Button>
</div>
),
},
]
return (
<div className="space-y-4">
@@ -66,52 +127,31 @@ function PaymentMethodsTab() {
</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>
<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 payment methods..."
value={searchInput}
onChange={(e) => setSearchInput(e.target.value)}
className="pl-9"
/>
</div>
)}
<Button type="submit" variant="secondary">Search</Button>
</form>
<DataTable
columns={columns}
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}
/>
</div>
)
}

108
packages/admin/src/routes/_authenticated/accounts/$accountId/processor-links.tsx
View File

@@ -3,14 +3,24 @@ 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 { usePagination } from '@/hooks/use-pagination'
import { DataTable, type Column } from '@/components/shared/data-table'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Input } from '@/components/ui/input'
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 { Plus, Trash2, Search } from 'lucide-react'
import { toast } from 'sonner'
import type { ProcessorLink } from '@/types/account'
export const Route = createFileRoute('/_authenticated/accounts/$accountId/processor-links')({
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: ProcessorLinksTab,
})
@@ -18,8 +28,10 @@ function ProcessorLinksTab() {
const { accountId } = useParams({ from: '/_authenticated/accounts/$accountId/processor-links' })
const queryClient = useQueryClient()
const [dialogOpen, setDialogOpen] = useState(false)
const { params, setPage, setSearch, setSort } = usePagination()
const [searchInput, setSearchInput] = useState(params.q ?? '')
const { data, isLoading } = useQuery(processorLinkListOptions(accountId))
const { data, isLoading } = useQuery(processorLinkListOptions(accountId, params))
const createMutation = useMutation({
mutationFn: (data: Record<string, unknown>) => processorLinkMutations.create(accountId, data),
@@ -40,7 +52,38 @@ function ProcessorLinksTab() {
onError: (err) => toast.error(err.message),
})
const links = data?.data ?? []
function handleSearchSubmit(e: React.FormEvent) {
e.preventDefault()
setSearch(searchInput)
}
const columns: Column<ProcessorLink>[] = [
{
key: 'processor',
header: 'Processor',
sortable: true,
render: (l) => <Badge variant="outline">{l.processor}</Badge>,
},
{
key: 'customer_id',
header: 'Customer ID',
render: (l) => <span className="font-mono text-sm">{l.processorCustomerId}</span>,
},
{
key: 'status',
header: 'Status',
render: (l) => l.isActive ? <Badge>Active</Badge> : <Badge variant="secondary">Inactive</Badge>,
},
{
key: 'actions',
header: 'Actions',
render: (l) => (
<Button variant="ghost" size="sm" onClick={(e) => { e.stopPropagation(); deleteMutation.mutate(l.id) }}>
<Trash2 className="h-4 w-4 text-destructive" />
</Button>
),
},
]
return (
<div className="space-y-4">
@@ -57,40 +100,31 @@ function ProcessorLinksTab() {
</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>
<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 processor links..."
value={searchInput}
onChange={(e) => setSearchInput(e.target.value)}
className="pl-9"
/>
</div>
)}
<Button type="submit" variant="secondary">Search</Button>
</form>
<DataTable
columns={columns}
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}
/>
</div>
)
}

140
packages/admin/src/routes/_authenticated/accounts/$accountId/tax-exemptions.tsx
View File

@@ -3,14 +3,24 @@ 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 { usePagination } from '@/hooks/use-pagination'
import { DataTable, type Column } from '@/components/shared/data-table'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Input } from '@/components/ui/input'
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 { Plus, Check, X, Search } from 'lucide-react'
import { toast } from 'sonner'
import type { TaxExemption } from '@/types/account'
export const Route = createFileRoute('/_authenticated/accounts/$accountId/tax-exemptions')({
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: TaxExemptionsTab,
})
@@ -26,8 +36,10 @@ function TaxExemptionsTab() {
const { accountId } = useParams({ from: '/_authenticated/accounts/$accountId/tax-exemptions' })
const queryClient = useQueryClient()
const [dialogOpen, setDialogOpen] = useState(false)
const { params, setPage, setSearch, setSort } = usePagination()
const [searchInput, setSearchInput] = useState(params.q ?? '')
const { data, isLoading } = useQuery(taxExemptionListOptions(accountId))
const { data, isLoading } = useQuery(taxExemptionListOptions(accountId, params))
const createMutation = useMutation({
mutationFn: (data: Record<string, unknown>) => taxExemptionMutations.create(accountId, data),
@@ -61,7 +73,59 @@ function TaxExemptionsTab() {
onError: (err) => toast.error(err.message),
})
const exemptions = data?.data ?? []
function handleSearchSubmit(e: React.FormEvent) {
e.preventDefault()
setSearch(searchInput)
}
const columns: Column<TaxExemption>[] = [
{
key: 'certificate_number',
header: 'Certificate #',
sortable: true,
render: (e) => <span className="font-medium">{e.certificateNumber}</span>,
},
{
key: 'type',
header: 'Type',
render: (e) => <>{e.certificateType ?? '-'}</>,
},
{
key: 'state',
header: 'State',
render: (e) => <>{e.issuingState ?? '-'}</>,
},
{
key: 'expires_at',
header: 'Expires',
sortable: true,
render: (e) => <>{e.expiresAt ?? '-'}</>,
},
{
key: 'status',
header: 'Status',
sortable: true,
render: (e) => statusBadge(e.status),
},
{
key: 'actions',
header: 'Actions',
render: (e) => (
<div className="flex gap-1">
{e.status === 'pending' && (
<Button variant="ghost" size="sm" onClick={(ev) => { ev.stopPropagation(); approveMutation.mutate(e.id) }}>
<Check className="h-4 w-4 text-green-600" />
</Button>
)}
{e.status === 'approved' && (
<Button variant="ghost" size="sm" onClick={(ev) => { ev.stopPropagation(); revokeMutation.mutate(e.id) }}>
<X className="h-4 w-4 text-destructive" />
</Button>
)}
</div>
),
},
]
return (
<div className="space-y-4">
@@ -78,51 +142,31 @@ function TaxExemptionsTab() {
</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>
<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 tax exemptions..."
value={searchInput}
onChange={(e) => setSearchInput(e.target.value)}
className="pl-9"
/>
</div>
)}
<Button type="submit" variant="secondary">Search</Button>
</form>
<DataTable
columns={columns}
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}
/>
</div>
)
}

12
packages/admin/src/routes/_authenticated/accounts/index.tsx
View File

@@ -8,6 +8,7 @@ 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 { useAuthStore } from '@/stores/auth.store'
import type { Account } from '@/types/account'
export const Route = createFileRoute('/_authenticated/accounts/')({
@@ -23,6 +24,7 @@ export const Route = createFileRoute('/_authenticated/accounts/')({
function AccountsListPage() {
const navigate = useNavigate()
const hasPermission = useAuthStore((s) => s.hasPermission)
const { params, setPage, setSearch, setSort } = usePagination()
const [searchInput, setSearchInput] = useState(params.q ?? '')
@@ -41,10 +43,12 @@ function AccountsListPage() {
<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>
{hasPermission('accounts.edit') && (
<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">

2
packages/admin/src/routes/_authenticated/index.tsx
View File

@@ -2,6 +2,6 @@ import { createFileRoute, redirect } from '@tanstack/react-router'
export const Route = createFileRoute('/_authenticated/')({
beforeLoad: () => {
throw redirect({ to: '/accounts' })
throw redirect({ to: '/accounts', search: {} as any })
},
})

98
packages/admin/src/routes/_authenticated/members/$memberId.tsx
View File

@@ -3,7 +3,7 @@ import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { api } from '@/lib/api-client'
import { identifierListOptions, identifierMutations, identifierKeys } from '@/api/identifiers'
import { MemberForm } from '@/components/accounts/member-form'
import { IdentifierForm } from '@/components/accounts/identifier-form'
import { IdentifierForm, type IdentifierFiles } from '@/components/accounts/identifier-form'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
@@ -12,6 +12,8 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from
import { Skeleton } from '@/components/ui/skeleton'
import { ArrowLeft, Plus, Trash2, CreditCard } from 'lucide-react'
import { toast } from 'sonner'
import { AvatarUpload } from '@/components/shared/avatar-upload'
import { useAuthStore } from '@/stores/auth.store'
import type { Member, MemberIdentifier } from '@/types/account'
import { useState } from 'react'
import { queryOptions } from '@tanstack/react-query'
@@ -27,6 +29,29 @@ export const Route = createFileRoute('/_authenticated/members/$memberId')({
component: MemberDetailPage,
})
function IdentifierImages({ identifierId }: { identifierId: string }) {
const { data } = useQuery({
queryKey: ['files', 'member_identifier', identifierId],
queryFn: () => api.get<{ data: { id: string; path: string; category: string }[] }>('/v1/files', {
entityType: 'member_identifier',
entityId: identifierId,
}),
})
const files = data?.data ?? []
const frontFile = files.find((f) => f.category === 'front')
const backFile = files.find((f) => f.category === 'back')
if (!frontFile && !backFile) return null
return (
<div className="flex gap-2 mt-2">
{frontFile && <img src={`/v1/files/serve/${frontFile.path}`} alt="Front" className="h-20 rounded border object-cover" />}
{backFile && <img src={`/v1/files/serve/${backFile.path}`} alt="Back" className="h-20 rounded border object-cover" />}
</div>
)
}
const ID_TYPE_LABELS: Record<string, string> = {
drivers_license: "Driver's License",
passport: 'Passport',
@@ -39,8 +64,10 @@ function MemberDetailPage() {
const queryClient = useQueryClient()
const [addIdOpen, setAddIdOpen] = useState(false)
const token = useAuthStore((s) => s.token)
const { data: member, isLoading } = useQuery(memberDetailOptions(memberId))
const { data: idsData } = useQuery(identifierListOptions(memberId))
const [createLoading, setCreateLoading] = useState(false)
const updateMutation = useMutation({
mutationFn: (data: Record<string, unknown>) => api.patch<Member>(`/v1/members/${memberId}`, data),
@@ -51,15 +78,52 @@ function MemberDetailPage() {
onError: (err) => toast.error(err instanceof Error ? err.message : 'Update failed'),
})
const createIdMutation = useMutation({
mutationFn: (data: Record<string, unknown>) => identifierMutations.create(memberId, data),
onSuccess: () => {
async function uploadIdFile(identifierId: string, file: File, category: string): Promise<string | null> {
const formData = new FormData()
formData.append('file', file)
formData.append('entityType', 'member_identifier')
formData.append('entityId', identifierId)
formData.append('category', category)
const res = await fetch('/v1/files', {
method: 'POST',
headers: { Authorization: `Bearer ${token}` },
body: formData,
})
if (!res.ok) return null
const data = await res.json()
return data.id
}
async function handleCreateIdentifier(data: Record<string, unknown>, files: IdentifierFiles) {
setCreateLoading(true)
try {
const identifier = await identifierMutations.create(memberId, data)
// Upload images and update identifier with file IDs
const updates: Record<string, unknown> = {}
if (files.front) {
const fileId = await uploadIdFile(identifier.id, files.front, 'front')
if (fileId) updates.imageFrontFileId = fileId
}
if (files.back) {
const fileId = await uploadIdFile(identifier.id, files.back, 'back')
if (fileId) updates.imageBackFileId = fileId
}
if (Object.keys(updates).length > 0) {
await identifierMutations.update(identifier.id, updates)
}
queryClient.invalidateQueries({ queryKey: identifierKeys.all(memberId) })
toast.success('ID added')
setAddIdOpen(false)
},
onError: (err) => toast.error(err.message),
})
} catch (err) {
toast.error(err instanceof Error ? err.message : 'Failed to add ID')
} finally {
setCreateLoading(false)
}
}
const deleteIdMutation = useMutation({
mutationFn: identifierMutations.delete,
@@ -88,7 +152,7 @@ function MemberDetailPage() {
return (
<div className="space-y-6 max-w-2xl">
<div className="flex items-center gap-3">
<Button variant="ghost" size="sm" onClick={() => navigate({ to: '/accounts/$accountId/members', params: { accountId: member.accountId } })}>
<Button variant="ghost" size="sm" onClick={() => navigate({ to: '/accounts/$accountId/members', params: { accountId: member.accountId }, search: {} as any })}>
<ArrowLeft className="h-4 w-4" />
</Button>
<div>
@@ -111,7 +175,14 @@ function MemberDetailPage() {
<CardHeader>
<CardTitle className="text-lg">Details</CardTitle>
</CardHeader>
<CardContent>
<CardContent className="space-y-4">
<div className="flex items-center gap-4">
<AvatarUpload entityType="member" entityId={memberId} size="lg" />
<div>
<p className="font-medium">{member.firstName} {member.lastName}</p>
<p className="text-sm text-muted-foreground">{member.email ?? 'No email'}</p>
</div>
</div>
<MemberForm
accountId={member.accountId}
defaultValues={member}
@@ -130,7 +201,7 @@ function MemberDetailPage() {
</DialogTrigger>
<DialogContent>
<DialogHeader><DialogTitle>Add Identity Document</DialogTitle></DialogHeader>
<IdentifierForm memberId={memberId} onSubmit={createIdMutation.mutate} loading={createIdMutation.isPending} />
<IdentifierForm memberId={memberId} onSubmit={handleCreateIdentifier} loading={createLoading} />
</DialogContent>
</Dialog>
</CardHeader>
@@ -154,11 +225,8 @@ function MemberDetailPage() {
{id.issuedDate && <span>Issued: {id.issuedDate}</span>}
{id.expiresAt && <span>Expires: {id.expiresAt}</span>}
</div>
{(id.imageFront || id.imageBack) && (
<div className="flex gap-2 mt-2">
{id.imageFront && <img src={id.imageFront} alt="Front" className="h-20 rounded border object-cover" />}
{id.imageBack && <img src={id.imageBack} alt="Back" className="h-20 rounded border object-cover" />}
</div>
{(id.imageFrontFileId || id.imageBackFileId) && (
<IdentifierImages identifierId={id.id} />
)}
</div>
</div>

12
packages/admin/src/routes/_authenticated/members/index.tsx
View File

@@ -14,6 +14,7 @@ import {
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { Search, Plus, MoreVertical, Pencil, Users } from 'lucide-react'
import { useAuthStore } from '@/stores/auth.store'
export const Route = createFileRoute('/_authenticated/members/')({
validateSearch: (search: Record<string, unknown>) => ({
@@ -28,6 +29,7 @@ export const Route = createFileRoute('/_authenticated/members/')({
function MembersListPage() {
const navigate = useNavigate()
const hasPermission = useAuthStore((s) => s.hasPermission)
const { params, setPage, setSearch, setSort } = usePagination()
const [searchInput, setSearchInput] = useState(params.q ?? '')
@@ -100,10 +102,12 @@ function MembersListPage() {
<div className="space-y-6">
<div className="flex items-center justify-between">
<h1 className="text-2xl font-bold">Members</h1>
<Button onClick={() => navigate({ to: '/accounts/new' })}>
<Plus className="mr-2 h-4 w-4" />
New Member
</Button>
{hasPermission('accounts.edit') && (
<Button onClick={() => navigate({ to: '/accounts/new' })}>
<Plus className="mr-2 h-4 w-4" />
New Member
</Button>
)}
</div>
<form onSubmit={handleSearchSubmit} className="flex gap-2 max-w-sm">

10
packages/admin/src/routes/_authenticated/profile.tsx
View File

@@ -13,6 +13,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Separator } from '@/components/ui/separator'
import { Sun, Moon, Monitor } from 'lucide-react'
import { toast } from 'sonner'
import { AvatarUpload } from '@/components/shared/avatar-upload'
export const Route = createFileRoute('/_authenticated/profile')({
component: ProfilePage,
@@ -92,6 +93,15 @@ function ProfilePage() {
<CardTitle className="text-lg">Account</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
{profile?.id && (
<div className="flex items-center gap-4">
<AvatarUpload entityType="user" entityId={profile.id} size="lg" />
<div>
<p className="font-medium">{profile.firstName} {profile.lastName}</p>
<p className="text-sm text-muted-foreground">{profile.email}</p>
</div>
</div>
)}
<div className="space-y-2">
<Label>Email</Label>
<Input value={profile?.email ?? ''} disabled className="opacity-60" />

4
packages/admin/src/routes/_authenticated/roles/$roleId.tsx
View File

@@ -100,7 +100,7 @@ function RoleDetailPage() {
return (
<div className="space-y-6 max-w-2xl">
<div className="flex items-center gap-3">
<Button variant="ghost" size="sm" onClick={() => navigate({ to: '/roles' })}>
<Button variant="ghost" size="sm" onClick={() => navigate({ to: '/roles', search: {} as any })}>
<ArrowLeft className="h-4 w-4" />
</Button>
<div>
@@ -177,7 +177,7 @@ function RoleDetailPage() {
<Button onClick={handleSave} disabled={updateMutation.isPending}>
{updateMutation.isPending ? 'Saving...' : 'Save Changes'}
</Button>
<Button variant="secondary" onClick={() => navigate({ to: '/roles' })}>
<Button variant="secondary" onClick={() => navigate({ to: '/roles', search: {} as any })}>
Cancel
</Button>
</div>

182
packages/admin/src/routes/_authenticated/roles/index.tsx
View File

@@ -1,9 +1,12 @@
import { createFileRoute, useNavigate } from '@tanstack/react-router'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { roleListOptions, rbacKeys, rbacMutations } from '@/api/rbac'
import { useState } from 'react'
import { rolePageOptions, rbacKeys, rbacMutations } from '@/api/rbac'
import { usePagination } from '@/hooks/use-pagination'
import { DataTable, type Column } from '@/components/shared/data-table'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
import { Input } from '@/components/ui/input'
import {
DropdownMenu,
DropdownMenuContent,
@@ -11,99 +14,142 @@ import {
DropdownMenuSeparator,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { Plus, MoreVertical, Pencil, Trash2, Shield } from 'lucide-react'
import { Plus, MoreVertical, Pencil, Trash2, Shield, Search } from 'lucide-react'
import { toast } from 'sonner'
import { useAuthStore } from '@/stores/auth.store'
import type { Role } from '@/types/rbac'
export const Route = createFileRoute('/_authenticated/roles/')({
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: RolesListPage,
})
function RolesListPage() {
const navigate = useNavigate()
const queryClient = useQueryClient()
const { data, isLoading } = useQuery(roleListOptions())
const hasPermission = useAuthStore((s) => s.hasPermission)
const { params, setPage, setSearch, setSort } = usePagination()
const [searchInput, setSearchInput] = useState(params.q ?? '')
const { data, isLoading } = useQuery(rolePageOptions(params))
const deleteMutation = useMutation({
mutationFn: rbacMutations.deleteRole,
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: rbacKeys.roles })
queryClient.invalidateQueries({ queryKey: ['roles', 'list'] })
toast.success('Role deleted')
},
onError: (err) => toast.error(err.message),
})
const roles = data?.data ?? []
function handleSearchSubmit(e: React.FormEvent) {
e.preventDefault()
setSearch(searchInput)
}
const roleColumns: Column<Role>[] = [
{
key: 'name',
header: 'Name',
sortable: true,
render: (row) => (
<div className="flex items-center gap-2">
<Shield className="h-4 w-4 text-muted-foreground" />
<span className="font-medium">{row.name}</span>
</div>
),
},
{
key: 'slug',
header: 'Slug',
sortable: true,
render: (row) => <span className="font-mono text-sm text-muted-foreground">{row.slug}</span>,
},
{
key: 'description',
header: 'Description',
render: (row) => <span className="text-sm text-muted-foreground">{row.description ?? '-'}</span>,
},
{
key: 'type',
header: 'Type',
render: (row) =>
row.isSystem ? <Badge variant="secondary">System</Badge> : <Badge>Custom</Badge>,
},
{
key: 'actions',
header: '',
render: (row) => (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="sm" className="h-8 w-8 p-0">
<MoreVertical className="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => navigate({ to: '/roles/$roleId', params: { roleId: row.id } })}>
<Pencil className="mr-2 h-4 w-4" />
Edit Permissions
</DropdownMenuItem>
{!row.isSystem && hasPermission('users.admin') && (
<>
<DropdownMenuSeparator />
<DropdownMenuItem className="text-destructive" onClick={() => deleteMutation.mutate(row.id)}>
<Trash2 className="mr-2 h-4 w-4" />
Delete
</DropdownMenuItem>
</>
)}
</DropdownMenuContent>
</DropdownMenu>
),
},
]
return (
<div className="space-y-6">
<div className="flex items-center justify-between">
<h1 className="text-2xl font-bold">Roles</h1>
<Button onClick={() => navigate({ to: '/roles/new' })}>
<Plus className="mr-2 h-4 w-4" />
New Role
</Button>
{hasPermission('users.admin') && (
<Button onClick={() => navigate({ to: '/roles/new' })}>
<Plus className="mr-2 h-4 w-4" />
New Role
</Button>
)}
</div>
{isLoading ? (
<p className="text-muted-foreground">Loading...</p>
) : roles.length === 0 ? (
<p className="text-muted-foreground py-8 text-center">No roles found</p>
) : (
<div className="rounded-md border">
<Table>
<TableHeader>
<TableRow>
<TableHead>Name</TableHead>
<TableHead>Slug</TableHead>
<TableHead>Description</TableHead>
<TableHead>Type</TableHead>
<TableHead className="w-12"></TableHead>
</TableRow>
</TableHeader>
<TableBody>
{roles.map((role) => (
<TableRow key={role.id}>
<TableCell className="font-medium">
<div className="flex items-center gap-2">
<Shield className="h-4 w-4 text-muted-foreground" />
{role.name}
</div>
</TableCell>
<TableCell className="font-mono text-sm text-muted-foreground">{role.slug}</TableCell>
<TableCell className="text-sm text-muted-foreground">{role.description ?? '-'}</TableCell>
<TableCell>
{role.isSystem ? <Badge variant="secondary">System</Badge> : <Badge>Custom</Badge>}
</TableCell>
<TableCell>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="sm" className="h-8 w-8 p-0">
<MoreVertical className="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => navigate({ to: '/roles/$roleId', params: { roleId: role.id } })}>
<Pencil className="mr-2 h-4 w-4" />
Edit Permissions
</DropdownMenuItem>
{!role.isSystem && (
<>
<DropdownMenuSeparator />
<DropdownMenuItem className="text-destructive" onClick={() => deleteMutation.mutate(role.id)}>
<Trash2 className="mr-2 h-4 w-4" />
Delete
</DropdownMenuItem>
</>
)}
</DropdownMenuContent>
</DropdownMenu>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
<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 roles..."
value={searchInput}
onChange={(e) => setSearchInput(e.target.value)}
className="pl-9"
/>
</div>
)}
<Button type="submit" variant="secondary">Search</Button>
</form>
<DataTable
columns={roleColumns}
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}
/>
</div>
)
}

4
packages/admin/src/routes/_authenticated/roles/new.tsx
View File

@@ -29,7 +29,7 @@ function NewRolePage() {
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: rbacKeys.roles })
toast.success('Role created')
navigate({ to: '/roles' })
navigate({ to: '/roles', search: {} as any })
},
onError: (err) => toast.error(err.message),
})
@@ -153,7 +153,7 @@ function NewRolePage() {
<Button onClick={handleSubmit} disabled={mutation.isPending}>
{mutation.isPending ? 'Creating...' : 'Create Role'}
</Button>
<Button variant="secondary" onClick={() => navigate({ to: '/roles' })}>
<Button variant="secondary" onClick={() => navigate({ to: '/roles', search: {} as any })}>
Cancel
</Button>
</div>

251
packages/admin/src/routes/_authenticated/users.tsx
View File

@@ -1,12 +1,14 @@
import { createFileRoute, useNavigate } from '@tanstack/react-router'
import { createFileRoute } from '@tanstack/react-router'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { useState } from 'react'
import { api } from '@/lib/api-client'
import { roleListOptions, rbacKeys, rbacMutations } from '@/api/rbac'
import { userRolesOptions, type UserRecord } from '@/api/users'
import { userListOptions, userRolesOptions, userKeys, userMutations, type UserRecord } from '@/api/users'
import { roleListOptions, rbacMutations } from '@/api/rbac'
import { usePagination } from '@/hooks/use-pagination'
import { DataTable, type Column } from '@/components/shared/data-table'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
import { Input } from '@/components/ui/input'
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import {
@@ -15,38 +17,21 @@ import {
DropdownMenuItem,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { MoreVertical, Shield, Plus, X, KeyRound } from 'lucide-react'
import { MoreVertical, Shield, Plus, X, KeyRound, Search, UserCheck, UserX } from 'lucide-react'
import { toast } from 'sonner'
import { queryOptions } from '@tanstack/react-query'
function userListOptions() {
return queryOptions({
queryKey: ['users'],
queryFn: () => api.get<{ data: UserRecord[] }>('/v1/users'),
})
}
import { useAuthStore } from '@/stores/auth.store'
export const Route = createFileRoute('/_authenticated/users')({
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: UsersPage,
})
function UserRoleBadges({ userId }: { userId: string }) {
const { data } = useQuery(userRolesOptions(userId))
const roles = data?.data ?? []
if (roles.length === 0) return <span className="text-sm text-muted-foreground">No roles</span>
return (
<div className="flex flex-wrap gap-1">
{roles.map((r) => (
<Badge key={r.id} variant={r.isSystem ? 'secondary' : 'default'} className="text-xs">
{r.name}
</Badge>
))}
</div>
)
}
function ManageRolesDialog({ user, open, onClose }: { user: UserRecord; open: boolean; onClose: () => void }) {
const queryClient = useQueryClient()
const { data: userRolesData } = useQuery(userRolesOptions(user.id))
@@ -61,7 +46,7 @@ function ManageRolesDialog({ user, open, onClose }: { user: UserRecord; open: bo
const assignMutation = useMutation({
mutationFn: (roleId: string) => rbacMutations.assignRole(user.id, roleId),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['users', user.id, 'roles'] })
queryClient.invalidateQueries({ queryKey: ['users'] })
setSelectedRoleId('')
toast.success('Role assigned')
},
@@ -71,7 +56,7 @@ function ManageRolesDialog({ user, open, onClose }: { user: UserRecord; open: bo
const removeMutation = useMutation({
mutationFn: (roleId: string) => rbacMutations.removeRole(user.id, roleId),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['users', user.id, 'roles'] })
queryClient.invalidateQueries({ queryKey: ['users'] })
toast.success('Role removed')
},
onError: (err) => toast.error(err.message),
@@ -135,10 +120,131 @@ function ManageRolesDialog({ user, open, onClose }: { user: UserRecord; open: bo
}
function UsersPage() {
const { data, isLoading } = useQuery(userListOptions())
const queryClient = useQueryClient()
const hasPermission = useAuthStore((s) => s.hasPermission)
const { params, setPage, setSearch, setSort } = usePagination()
const [searchInput, setSearchInput] = useState(params.q ?? '')
const [managingUser, setManagingUser] = useState<UserRecord | null>(null)
const allUsers = data?.data ?? []
const { data, isLoading } = useQuery(userListOptions(params))
const statusMutation = useMutation({
mutationFn: ({ userId, isActive }: { userId: string; isActive: boolean }) =>
userMutations.toggleStatus(userId, isActive),
onSuccess: (_data, vars) => {
queryClient.invalidateQueries({ queryKey: ['users'] })
toast.success(vars.isActive ? 'User enabled' : 'User disabled')
},
onError: (err) => toast.error(err.message),
})
function handleSearchSubmit(e: React.FormEvent) {
e.preventDefault()
setSearch(searchInput)
}
const userColumns: Column<UserRecord>[] = [
{
key: 'name',
header: 'Name',
sortable: true,
render: (row) => (
<span className={`font-medium ${!row.isActive ? 'text-muted-foreground' : ''}`}>
{row.firstName} {row.lastName}
</span>
),
},
{
key: 'email',
header: 'Email',
sortable: true,
render: (row) => <span className={!row.isActive ? 'text-muted-foreground' : ''}>{row.email}</span>,
},
{
key: 'roles',
header: 'Roles',
render: (row) =>
row.roles.length === 0 ? (
<span className="text-sm text-muted-foreground">No roles</span>
) : (
<div className="flex flex-wrap gap-1">
{row.roles.map((r) => (
<Badge key={r.id} variant={r.isSystem ? 'secondary' : 'default'} className="text-xs">
{r.name}
</Badge>
))}
</div>
),
},
{
key: 'status',
header: 'Status',
render: (row) =>
row.isActive ? (
<Badge variant="secondary" className="text-xs">Active</Badge>
) : (
<Badge variant="destructive" className="text-xs">Disabled</Badge>
),
},
{
key: 'created_at',
header: 'Created',
sortable: true,
render: (row) => new Date(row.createdAt).toLocaleDateString(),
},
{
key: 'actions',
header: '',
render: (row) => (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="sm" className="h-8 w-8 p-0">
<MoreVertical className="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
{hasPermission('users.edit') && (
<DropdownMenuItem onClick={() => setManagingUser(row)}>
<Shield className="mr-2 h-4 w-4" />
Manage Roles
</DropdownMenuItem>
)}
{hasPermission('users.admin') && (
<DropdownMenuItem onClick={async () => {
try {
const res = await api.post<{ resetLink: string }>(`/v1/auth/reset-password/${row.id}`, {})
await navigator.clipboard.writeText(res.resetLink)
toast.success('Reset link copied to clipboard')
} catch (err) {
toast.error(err instanceof Error ? err.message : 'Failed to generate link')
}
}}>
<KeyRound className="mr-2 h-4 w-4" />
Reset Password Link
</DropdownMenuItem>
)}
{hasPermission('users.admin') && (
<DropdownMenuItem
onClick={() => statusMutation.mutate({ userId: row.id, isActive: !row.isActive })}
>
{row.isActive ? (
<>
<UserX className="mr-2 h-4 w-4" />
Disable User
</>
) : (
<>
<UserCheck className="mr-2 h-4 w-4" />
Enable User
</>
)}
</DropdownMenuItem>
)}
</DropdownMenuContent>
</DropdownMenu>
),
},
]
return (
<div className="space-y-6">
@@ -148,60 +254,31 @@ function UsersPage() {
<ManageRolesDialog user={managingUser} open={!!managingUser} onClose={() => setManagingUser(null)} />
)}
{isLoading ? (
<p className="text-muted-foreground">Loading...</p>
) : allUsers.length === 0 ? (
<p className="text-muted-foreground py-8 text-center">No users found</p>
) : (
<div className="rounded-md border">
<Table>
<TableHeader>
<TableRow>
<TableHead>Name</TableHead>
<TableHead>Email</TableHead>
<TableHead>Roles</TableHead>
<TableHead className="w-12"></TableHead>
</TableRow>
</TableHeader>
<TableBody>
{allUsers.map((user) => (
<TableRow key={user.id}>
<TableCell className="font-medium">{user.firstName} {user.lastName}</TableCell>
<TableCell>{user.email}</TableCell>
<TableCell><UserRoleBadges userId={user.id} /></TableCell>
<TableCell>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="sm" className="h-8 w-8 p-0">
<MoreVertical className="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => setManagingUser(user)}>
<Shield className="mr-2 h-4 w-4" />
Manage Roles
</DropdownMenuItem>
<DropdownMenuItem onClick={async () => {
try {
const res = await api.post<{ resetLink: string }>(`/v1/auth/reset-password/${user.id}`, {})
await navigator.clipboard.writeText(res.resetLink)
toast.success('Reset link copied to clipboard')
} catch (err) {
toast.error(err instanceof Error ? err.message : 'Failed to generate link')
}
}}>
<KeyRound className="mr-2 h-4 w-4" />
Reset Password Link
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
<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 users..."
value={searchInput}
onChange={(e) => setSearchInput(e.target.value)}
className="pl-9"
/>
</div>
)}
<Button type="submit" variant="secondary">Search</Button>
</form>
<DataTable
columns={userColumns}
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}
/>
</div>
)
}