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

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

@@ -1,13 +1,22 @@
 import { useState } from 'react'
-import { createFileRoute, useParams } from '@tanstack/react-router'
+import { createFileRoute, useParams, useNavigate } from '@tanstack/react-router'
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 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 { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
-import { Plus, Trash2 } from 'lucide-react'
+import { Plus, Trash2, CreditCard, ChevronDown, ChevronRight, MoreVertical, Pencil } from 'lucide-react'
 import { toast } from 'sonner'
 import type { Member } from '@/types/account'
 
@@ -15,11 +24,99 @@ export const Route = createFileRoute('/_authenticated/accounts/$accountId/member
   component: MembersTab,
 })
 
+const ID_TYPE_LABELS: Record<string, string> = {
+  drivers_license: "Driver's License",
+  passport: 'Passport',
+  school_id: 'School ID',
+}
+
+function MemberIdentifiers({ memberId }: { memberId: string }) {
+  const queryClient = useQueryClient()
+  const [addOpen, setAddOpen] = useState(false)
+  const { data, isLoading } = useQuery(identifierListOptions(memberId))
+
+  const createMutation = useMutation({
+    mutationFn: (data: Record<string, unknown>) => identifierMutations.create(memberId, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: identifierKeys.all(memberId) })
+      toast.success('ID added')
+      setAddOpen(false)
+    },
+    onError: (err) => toast.error(err.message),
+  })
+
+  const deleteMutation = useMutation({
+    mutationFn: identifierMutations.delete,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: identifierKeys.all(memberId) })
+      toast.success('ID removed')
+    },
+    onError: (err) => toast.error(err.message),
+  })
+
+  const identifiers = data?.data ?? []
+
+  return (
+    <div className="pl-8 pr-4 py-3 bg-muted/30 space-y-3">
+      <div className="flex items-center justify-between">
+        <span className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">Identity Documents</span>
+        <Dialog open={addOpen} onOpenChange={setAddOpen}>
+          <DialogTrigger asChild>
+            <Button variant="ghost" size="sm"><Plus className="mr-1 h-3 w-3" />Add ID</Button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader><DialogTitle>Add Identity Document</DialogTitle></DialogHeader>
+            <IdentifierForm memberId={memberId} onSubmit={createMutation.mutate} loading={createMutation.isPending} />
+          </DialogContent>
+        </Dialog>
+      </div>
+
+      {isLoading ? (
+        <p className="text-sm text-muted-foreground">Loading...</p>
+      ) : identifiers.length === 0 ? (
+        <p className="text-sm text-muted-foreground">No IDs on file</p>
+      ) : (
+        <div className="space-y-2">
+          {identifiers.map((id) => (
+            <div key={id.id} className="flex items-center justify-between p-2 rounded-md border bg-background">
+              <div className="flex items-center gap-3">
+                <CreditCard className="h-4 w-4 text-muted-foreground" />
+                <div>
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm font-medium">{ID_TYPE_LABELS[id.type] ?? id.type}</span>
+                    {id.isPrimary && <Badge variant="secondary">Primary</Badge>}
+                  </div>
+                  <span className="text-xs text-muted-foreground font-mono">{id.value}</span>
+                  {id.issuingAuthority && (
+                    <span className="text-xs text-muted-foreground ml-2">— {id.issuingAuthority}</span>
+                  )}
+                  {id.expiresAt && (
+                    <span className="text-xs text-muted-foreground ml-2">Exp: {id.expiresAt}</span>
+                  )}
+                </div>
+              </div>
+              <div className="flex items-center gap-1">
+                {(id.imageFront || id.imageBack) && (
+                  <Badge variant="outline" className="text-xs">Has images</Badge>
+                )}
+                <Button variant="ghost" size="sm" onClick={() => deleteMutation.mutate(id.id)}>
+                  <Trash2 className="h-3 w-3 text-destructive" />
+                </Button>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
 function MembersTab() {
   const { accountId } = useParams({ from: '/_authenticated/accounts/$accountId/members' })
+  const navigate = useNavigate()
   const queryClient = useQueryClient()
   const [dialogOpen, setDialogOpen] = useState(false)
-  const [editingMember, setEditingMember] = useState<Member | null>(null)
+  const [expandedMember, setExpandedMember] = useState<string | null>(null)
 
   const { data, isLoading } = useQuery(memberListOptions(accountId, { page: 1, limit: 100, order: 'asc' }))
 
@@ -33,16 +130,6 @@ function MembersTab() {
     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: () => {
@@ -69,21 +156,6 @@ function MembersTab() {
         </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 ? (
@@ -93,33 +165,75 @@ function MembersTab() {
           <Table>
             <TableHeader>
               <TableRow>
+                <TableHead className="w-8"></TableHead>
                 <TableHead>#</TableHead>
                 <TableHead>Name</TableHead>
                 <TableHead>Email</TableHead>
                 <TableHead>Phone</TableHead>
                 <TableHead>Status</TableHead>
-                <TableHead className="w-24">Actions</TableHead>
+                <TableHead className="w-12"></TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
               {members.map((m) => (
-                <TableRow key={m.id}>
-                  <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>
-                    <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" />
+                <>
+                  <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>
-                    </div>
-                  </TableCell>
-                </TableRow>
+                    </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>

packages/admin/src/routes/_authenticated/members.tsx

@@ -7,7 +7,13 @@ import { DataTable, type Column } from '@/components/shared/data-table'
 import { Badge } from '@/components/ui/badge'
 import { Input } from '@/components/ui/input'
 import { Button } from '@/components/ui/button'
-import { Search, Plus } from 'lucide-react'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { Search, Plus, MoreVertical, Pencil, Users } from 'lucide-react'
 
 export const Route = createFileRoute('/_authenticated/members')({
   validateSearch: (search: Record<string, unknown>) => ({
@@ -20,41 +26,6 @@ export const Route = createFileRoute('/_authenticated/members')({
   component: MembersListPage,
 })
 
-const memberColumns: Column<MemberWithAccount>[] = [
-  {
-    key: 'memberNumber',
-    header: '#',
-    render: (row) => <span className="font-mono text-sm text-muted-foreground">{row.memberNumber ?? '-'}</span>,
-  },
-  {
-    key: 'last_name',
-    header: 'Name',
-    sortable: true,
-    render: (row) => <span className="font-medium">{row.firstName} {row.lastName}</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: 'accountName',
-    header: 'Account',
-    render: (row) => row.accountName ?? <span className="text-muted-foreground">-</span>,
-  },
-  {
-    key: 'status',
-    header: 'Status',
-    render: (row) => row.isMinor ? <Badge variant="secondary">Minor</Badge> : <Badge>Adult</Badge>,
-  },
-]
-
 function MembersListPage() {
   const navigate = useNavigate()
   const { params, setPage, setSearch, setSort } = usePagination()
@@ -67,9 +38,63 @@ function MembersListPage() {
     setSearch(searchInput)
   }
 
-  function handleRowClick(member: MemberWithAccount) {
-    navigate({ to: '/accounts/$accountId/members', params: { accountId: member.accountId } })
-  }
+  const memberColumns: Column<MemberWithAccount>[] = [
+    {
+      key: 'memberNumber',
+      header: '#',
+      render: (row) => <span className="font-mono text-sm text-muted-foreground">{row.memberNumber ?? '-'}</span>,
+    },
+    {
+      key: 'last_name',
+      header: 'Name',
+      sortable: true,
+      render: (row) => <span className="font-medium">{row.firstName} {row.lastName}</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: 'accountName',
+      header: 'Account',
+      render: (row) => row.accountName ?? <span className="text-muted-foreground">-</span>,
+    },
+    {
+      key: 'status',
+      header: 'Status',
+      render: (row) => row.isMinor ? <Badge variant="secondary">Minor</Badge> : <Badge>Adult</Badge>,
+    },
+    {
+      key: 'actions',
+      header: '',
+      render: (row) => (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="sm" className="h-8 w-8 p-0" onClick={(e) => e.stopPropagation()}>
+              <MoreVertical className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem onClick={() => navigate({ to: '/members/$memberId', params: { memberId: row.id } })}>
+              <Pencil className="mr-2 h-4 w-4" />
+              Edit
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => navigate({ to: '/accounts/$accountId', params: { accountId: row.accountId } })}>
+              <Users className="mr-2 h-4 w-4" />
+              View Account
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      ),
+    },
+  ]
 
   return (
     <div className="space-y-6">
@@ -105,7 +130,7 @@ function MembersListPage() {
         order={params.order}
         onPageChange={setPage}
         onSort={setSort}
-        onRowClick={handleRowClick}
+        onRowClick={(member) => navigate({ to: '/members/$memberId', params: { memberId: member.id } })}
       />
     </div>
   )

packages/admin/src/routes/_authenticated/members/$memberId.tsx

@@ -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>
+  )
+}