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>