Add member identifiers UI, member detail page, kebab menus
- Member detail page at /members/:id with edit form and identity documents - Expandable identity documents on account members tab - Kebab menu on both members list and account members tab (Edit, View IDs, View Account, Delete) - Identifier form with image upload (base64), ID type select, dates - Wiki article for identity documents
This commit is contained in:
Ryan Moon
176
packages/admin/src/routes/_authenticated/members/$memberId.tsx
Normal file
176
packages/admin/src/routes/_authenticated/members/$memberId.tsx
Normal file
@@ -0,0 +1,176 @@
|
||||
import { createFileRoute, useParams, useNavigate, Link } from '@tanstack/react-router'
|
||||
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 { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Separator } from '@/components/ui/separator'
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
|
||||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
import { ArrowLeft, Plus, Trash2, CreditCard } from 'lucide-react'
|
||||
import { toast } from 'sonner'
|
||||
import type { Member, MemberIdentifier } from '@/types/account'
|
||||
import { useState } from 'react'
|
||||
import { queryOptions } from '@tanstack/react-query'
|
||||
|
||||
function memberDetailOptions(id: string) {
|
||||
return queryOptions({
|
||||
queryKey: ['members', 'detail', id],
|
||||
queryFn: () => api.get<Member>(`/v1/members/${id}`),
|
||||
})
|
||||
}
|
||||
|
||||
export const Route = createFileRoute('/_authenticated/members/$memberId')({
|
||||
component: MemberDetailPage,
|
||||
})
|
||||
|
||||
const ID_TYPE_LABELS: Record<string, string> = {
|
||||
drivers_license: "Driver's License",
|
||||
passport: 'Passport',
|
||||
school_id: 'School ID',
|
||||
}
|
||||
|
||||
function MemberDetailPage() {
|
||||
const { memberId } = useParams({ from: '/_authenticated/members/$memberId' })
|
||||
const navigate = useNavigate()
|
||||
const queryClient = useQueryClient()
|
||||
const [addIdOpen, setAddIdOpen] = useState(false)
|
||||
|
||||
const { data: member, isLoading } = useQuery(memberDetailOptions(memberId))
|
||||
const { data: idsData } = useQuery(identifierListOptions(memberId))
|
||||
|
||||
const updateMutation = useMutation({
|
||||
mutationFn: (data: Record<string, unknown>) => api.patch<Member>(`/v1/members/${memberId}`, data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['members', 'detail', memberId] })
|
||||
toast.success('Member updated')
|
||||
},
|
||||
onError: (err) => toast.error(err instanceof Error ? err.message : 'Update failed'),
|
||||
})
|
||||
|
||||
const createIdMutation = useMutation({
|
||||
mutationFn: (data: Record<string, unknown>) => identifierMutations.create(memberId, data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: identifierKeys.all(memberId) })
|
||||
toast.success('ID added')
|
||||
setAddIdOpen(false)
|
||||
},
|
||||
onError: (err) => toast.error(err.message),
|
||||
})
|
||||
|
||||
const deleteIdMutation = useMutation({
|
||||
mutationFn: identifierMutations.delete,
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: identifierKeys.all(memberId) })
|
||||
toast.success('ID removed')
|
||||
},
|
||||
onError: (err) => toast.error(err.message),
|
||||
})
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<Skeleton className="h-8 w-48" />
|
||||
<Skeleton className="h-64 w-full max-w-lg" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (!member) {
|
||||
return <p className="text-muted-foreground">Member not found</p>
|
||||
}
|
||||
|
||||
const identifiers = idsData?.data ?? []
|
||||
|
||||
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 } })}>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">{member.firstName} {member.lastName}</h1>
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<span>#{member.memberNumber}</span>
|
||||
{member.isMinor && <Badge variant="secondary">Minor</Badge>}
|
||||
<Link
|
||||
to="/accounts/$accountId"
|
||||
params={{ accountId: member.accountId }}
|
||||
className="hover:underline"
|
||||
>
|
||||
View Account
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Details</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<MemberForm
|
||||
accountId={member.accountId}
|
||||
defaultValues={member}
|
||||
onSubmit={(data) => updateMutation.mutate(data)}
|
||||
loading={updateMutation.isPending}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between">
|
||||
<CardTitle className="text-lg">Identity Documents</CardTitle>
|
||||
<Dialog open={addIdOpen} onOpenChange={setAddIdOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button size="sm"><Plus className="mr-2 h-4 w-4" />Add ID</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader><DialogTitle>Add Identity Document</DialogTitle></DialogHeader>
|
||||
<IdentifierForm memberId={memberId} onSubmit={createIdMutation.mutate} loading={createIdMutation.isPending} />
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{identifiers.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground py-4 text-center">No IDs on file</p>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{identifiers.map((id) => (
|
||||
<div key={id.id} className="flex items-start justify-between p-3 rounded-md border">
|
||||
<div className="flex items-start gap-3">
|
||||
<CreditCard className="h-5 w-5 text-muted-foreground mt-0.5" />
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium">{ID_TYPE_LABELS[id.type] ?? id.type}</span>
|
||||
{id.isPrimary && <Badge variant="secondary">Primary</Badge>}
|
||||
</div>
|
||||
<p className="text-sm font-mono text-muted-foreground">{id.value}</p>
|
||||
{id.issuingAuthority && <p className="text-xs text-muted-foreground">{id.issuingAuthority}</p>}
|
||||
<div className="flex gap-4 text-xs text-muted-foreground">
|
||||
{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>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<Button variant="ghost" size="sm" onClick={() => deleteIdMutation.mutate(id.id)}>
|
||||
<Trash2 className="h-4 w-4 text-destructive" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user