feat(presence): dashboard Who's-here panel + /attendance + /me history + nav

Dashboard right column gets a 'Who's here' panel: present members with Host badges + your own Check in / Check in as host / Check out with an optional note (router.refresh after). New /attendance page (all members) lists recent visits with status + duration + notes. /me gains a 'My recent visits' section. Sidebar 'Attendance' link under People.
2026-05-16 22:17:17 -07:00
parent 8a77b1d301
commit c6b3306a71
5 changed files with 264 additions and 4 deletions
@@ -0,0 +1,96 @@
+import { redirect } from 'next/navigation'
+import { createClient } from '@/lib/supabase/server'
+import { PageHeader, PageTitle } from '@/components/ui/page-title'
+import { Badge } from '@/components/ui/badge'
+import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription } from '@/components/ui/empty'
+import { CalendarCheck } from 'lucide-react'
+import { listAttendance } from '@/lib/actions'
+
+export const dynamic = 'force-dynamic'
+
+type Row = {
+  id: string
+  name: string
+  isHost: boolean
+  status: 'present' | 'checked_out' | 'stale'
+  checkedInAt: string
+  checkedOutAt: string | null
+  checkInNote: string | null
+  checkOutNote: string | null
+}
+
+const STATUS: Record<Row['status'], { label: string; cls: string }> = {
+  present: { label: 'Here now', cls: 'text-primary' },
+  checked_out: { label: 'Checked out', cls: 'text-muted-foreground' },
+  stale: { label: 'No checkout', cls: 'text-amber-600' },
+}
+
+function dur(inAt: string, outAt: string | null): string {
+  const end = outAt ? new Date(outAt).getTime() : Date.now()
+  const mins = Math.max(0, Math.round((end - new Date(inAt).getTime()) / 60000))
+  if (mins < 60) return `${mins}m`
+  const h = Math.floor(mins / 60)
+  return `${h}h ${mins % 60}m`
+}
+
+export default async function AttendancePage() {
+  const supabase = await createClient()
+  const { data: { user } } = await supabase.auth.getUser()
+  if (!user) redirect('/login')
+
+  const res = await listAttendance()
+  const rows = ('data' in res ? res.data : []) as Row[]
+
+  return (
+    <>
+      <PageHeader>
+        <PageTitle>Attendance</PageTitle>
+      </PageHeader>
+
+      <div className="p-4 md:p-6">
+        {rows.length === 0 ? (
+          <Empty>
+            <EmptyHeader>
+              <EmptyMedia variant="icon"><CalendarCheck /></EmptyMedia>
+              <EmptyTitle>No visits recorded yet</EmptyTitle>
+              <EmptyDescription>
+                When members check in from the dashboard, their visits appear here.
+              </EmptyDescription>
+            </EmptyHeader>
+          </Empty>
+        ) : (
+          <div className="bg-card rounded border border-border divide-y divide-border">
+            {rows.map(r => {
+              const s = STATUS[r.status]
+              return (
+                <div key={r.id} className="px-4 py-3 flex items-start justify-between gap-4 flex-wrap">
+                  <div className="min-w-0">
+                    <div className="flex items-center gap-2 flex-wrap">
+                      <span className="font-sans text-sm font-medium text-foreground">{r.name}</span>
+                      {r.isHost && <Badge variant="default">Host</Badge>}
+                      <span className={`font-mono text-[10px] ${s.cls}`}>{s.label}</span>
+                    </div>
+                    {(r.checkInNote || r.checkOutNote) && (
+                      <p className="font-mono text-[10px] text-muted-foreground mt-0.5">
+                        {r.checkInNote ? `in: ${r.checkInNote}` : ''}
+                        {r.checkInNote && r.checkOutNote ? ' · ' : ''}
+                        {r.checkOutNote ? `out: ${r.checkOutNote}` : ''}
+                      </p>
+                    )}
+                  </div>
+                  <div className="font-mono text-[10px] text-muted-foreground/80 text-right">
+                    {new Date(r.checkedInAt).toLocaleString()}
+                    <br />
+                    {r.checkedOutAt
+                      ? `${dur(r.checkedInAt, r.checkedOutAt)} visit`
+                      : r.status === 'present' ? `${dur(r.checkedInAt, null)} so far` : 'open'}
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        )}
+      </div>
+    </>
+  )
+}
@@ -4,8 +4,9 @@ import { redirect } from 'next/navigation'
 import type { Tables } from '@/types/database'
 import { PageTitle } from '@/components/ui/page-title'
 import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription } from '@/components/ui/empty'
-import { listSelfEntryDoors } from '@/lib/actions'
+import { listSelfEntryDoors, listPresentNow } from '@/lib/actions'
 import { DoorSelfEntry } from './door-self-entry'
+import { PresencePanel } from './presence-panel'

 function IcoUsers({ className }: { className?: string }) {
  return <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" /></svg>
@@ -158,8 +159,11 @@ export default async function DashboardPage() {
    )
  }

-  const selfEntryRes = await listSelfEntryDoors()
+  const [selfEntryRes, presentRes] = await Promise.all([listSelfEntryDoors(), listPresentNow()])
  const selfEntryDoors = ('data' in selfEntryRes ? selfEntryRes.data : []) as { id: string; name: string }[]
+  const present = ('data' in presentRes ? presentRes.data : []) as {
+    id: string; name: string; isHost: boolean; isMe: boolean; checkedInAt: string; note: string | null
+  }[]

  return (
    <div className="min-h-screen bg-background">
@@ -329,6 +333,8 @@ export default async function DashboardPage() {
          </div>

          <div className="space-y-6">
+            <PresencePanel present={present} />
+
            {selfEntryDoors.length > 0 && (
              <div>
                <p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-3 flex items-center gap-1.5">
@@ -0,0 +1,112 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { toast } from 'sonner'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { checkIn, checkOut } from '@/lib/actions'
+
+type Present = {
+  id: string
+  name: string
+  isHost: boolean
+  isMe: boolean
+  checkedInAt: string
+  note: string | null
+}
+
+export function PresencePanel({ present }: { present: Present[] }) {
+  const router = useRouter()
+  const [busy, setBusy] = useState(false)
+  const [note, setNote] = useState('')
+  const [showNote, setShowNote] = useState(false)
+
+  const me = present.find(p => p.isMe)
+  const amHere = !!me
+  const hostCount = present.filter(p => p.isHost).length
+
+  async function doCheckIn(asHost: boolean) {
+    setBusy(true)
+    const res = await checkIn({ asHost, note: note.trim() || null })
+    setBusy(false)
+    if ('error' in res && res.error) return toast.error(res.error)
+    setNote('')
+    setShowNote(false)
+    toast.success(asHost ? 'Checked in as host' : 'Checked in')
+    router.refresh()
+  }
+
+  async function doCheckOut() {
+    setBusy(true)
+    const res = await checkOut({ note: note.trim() || null })
+    setBusy(false)
+    if ('error' in res && res.error) return toast.error(res.error)
+    setNote('')
+    setShowNote(false)
+    toast.success('Checked out')
+    router.refresh()
+  }
+
+  return (
+    <div>
+      <div className="flex items-center justify-between mb-3">
+        <p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase">
+          Who&apos;s here ({present.length}{hostCount > 0 ? ` · ${hostCount} hosting` : ''})
+        </p>
+      </div>
+
+      <div className="bg-card rounded border border-border">
+        {present.length === 0 ? (
+          <p className="px-4 py-4 font-sans text-xs text-muted-foreground text-center">
+            Nobody is checked in right now.
+          </p>
+        ) : (
+          <ul className="divide-y divide-border">
+            {present.map(p => (
+              <li key={p.id} className="flex items-center justify-between gap-3 px-4 py-2.5">
+                <span className="font-sans text-sm text-foreground truncate">
+                  {p.name}{p.isMe ? ' (you)' : ''}
+                  {p.note && <span className="font-mono text-[10px] text-muted-foreground ml-2">{p.note}</span>}
+                </span>
+                <span className="flex items-center gap-2 shrink-0">
+                  {p.isHost && <Badge variant="default">Host</Badge>}
+                  <span className="font-mono text-[10px] text-muted-foreground/70">
+                    {new Date(p.checkedInAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+                  </span>
+                </span>
+              </li>
+            ))}
+          </ul>
+        )}
+
+        <div className="border-t border-border p-3 space-y-2">
+          {showNote && (
+            <input
+              className="w-full bg-background border border-border text-foreground font-sans text-sm rounded px-3 py-2 focus:outline-none focus:border-primary"
+              placeholder={amHere ? 'Check-out note (optional)' : 'Check-in note (optional)'}
+              maxLength={500}
+              value={note}
+              onChange={e => setNote(e.target.value)}
+            />
+          )}
+          <div className="flex items-center gap-1.5 flex-wrap">
+            {amHere ? (
+              <Button size="sm" disabled={busy} onClick={doCheckOut}>
+                Check out{me?.isHost ? ' (hosting)' : ''}
+              </Button>
+            ) : (
+              <>
+                <Button size="sm" disabled={busy} onClick={() => doCheckIn(false)}>Check in</Button>
+                <Button size="sm" variant="outline" disabled={busy} onClick={() => doCheckIn(true)}>Check in as host</Button>
+              </>
+            )}
+            <Button size="sm" variant="outline" onClick={() => setShowNote(v => !v)}>
+              {showNote ? 'Hide note' : 'Add note'}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
@@ -8,9 +8,10 @@ import {
  type CertStatus,
 } from '@/lib/certifications-logic'
 import { PERMISSIONS, PERMISSION_CODES } from '@/lib/permissions-catalog'
-import { getMyClassSignups, getMyReservations, getMyCards } from '@/lib/actions'
+import { getMyClassSignups, getMyReservations, getMyCards, getMyVisits } from '@/lib/actions'
 import { SIGNUP_STATUS_LABEL, SESSION_STATUS_LABEL } from '@/lib/classes-logic'
 import { RESERVATION_STATUS_LABEL } from '@/lib/equipment-logic'
+import { presenceStatus } from '@/lib/presence-logic'

 export const dynamic = 'force-dynamic'

@@ -107,6 +108,9 @@ export default async function MePage() {
  const cardsRes = await getMyCards()
  type MyCard = { id: string; card_type: string; label: string | null; is_active: boolean; last4: string }
  const myCards: MyCard[] = 'data' in cardsRes ? (cardsRes.data as MyCard[]) : []
+  const visitsRes = await getMyVisits()
+  type MyVisit = { id: string; checked_in_at: string; checked_out_at: string | null; is_host: boolean; check_in_note: string | null; check_out_note: string | null }
+  const myVisits: MyVisit[] = 'data' in visitsRes ? (visitsRes.data as MyVisit[]) : []
  const titleOf = (cs: ClassSignup) => {
    const sess = sessionOf(cs)
    const c = sess ? (Array.isArray(sess.classes) ? sess.classes[0] : sess.classes) : null
@@ -294,6 +298,47 @@ export default async function MePage() {
            Only the last 4 digits are shown. The full card number is never displayed here.
          </p>
        </section>
+
+        <section>
+          <h2 className="font-mono text-[10px] uppercase tracking-widest text-muted-foreground mb-3">
+            My recent visits
+          </h2>
+          {myVisits.length === 0 ? (
+            <p className="font-sans text-sm text-muted-foreground">
+              No visits yet. Check in from the dashboard when you are at the space.
+            </p>
+          ) : (
+            <ul className="divide-y rounded-lg border border-border">
+              {myVisits.map(v => {
+                const st = presenceStatus(v.checked_in_at, v.checked_out_at)
+                return (
+                  <li key={v.id} className="p-4 flex items-start justify-between gap-4">
+                    <div className="min-w-0">
+                      <div className="flex items-center gap-2 flex-wrap">
+                        <span className="font-sans text-sm text-foreground">
+                          {new Date(v.checked_in_at).toLocaleString()}
+                        </span>
+                        {v.is_host && <Badge variant="default">Host</Badge>}
+                        {st === 'present' && <span className="font-mono text-[10px] text-primary">here now</span>}
+                        {st === 'stale' && <span className="font-mono text-[10px] text-amber-600">no checkout</span>}
+                      </div>
+                      {(v.check_in_note || v.check_out_note) && (
+                        <p className="font-mono text-[10px] text-muted-foreground mt-0.5">
+                          {v.check_in_note ? `in: ${v.check_in_note}` : ''}
+                          {v.check_in_note && v.check_out_note ? ' · ' : ''}
+                          {v.check_out_note ? `out: ${v.check_out_note}` : ''}
+                        </p>
+                      )}
+                    </div>
+                    <span className="font-mono text-[10px] text-muted-foreground/80 shrink-0">
+                      {v.checked_out_at ? `out ${new Date(v.checked_out_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}` : 'open'}
+                    </span>
+                  </li>
+                )
+              })}
+            </ul>
+          )}
+        </section>
      </div>
    </>
  )
@@ -15,7 +15,7 @@ import {
  MessageSquare, Users, CreditCard, BookUser, Download, LogOut,
  Vote, ShieldAlert, ScrollText, LineChart, UserCircle, UserSearch,
  MessagesSquare, SlidersHorizontal, ClipboardList, FileText, Award, BadgeCheck, GraduationCap, Hammer,
-  ChevronDown, DoorClosed,
+  ChevronDown, DoorClosed, CalendarCheck,
 } from 'lucide-react'

 interface NavLinkProps {
@@ -182,6 +182,7 @@ export function AppSidebar({ member, roleName, taskBadge = 0, commsBadge = 0, pa

        <NavSection id="people" title="People">
          <NavLink href="/members" label="Members" icon={Users} active={isActive('/members')} onClick={onNav} />
+          <NavLink href="/attendance" label="Attendance" icon={CalendarCheck} active={isActive('/attendance')} onClick={onNav} />
          <NavLink href="/contacts" label="Contacts" icon={BookUser} active={isActive('/contacts')} onClick={onNav} />
          {isAdmin && (
            <NavLink href="/recruitment" label="Recruitment" icon={UserSearch} active={isActive('/recruitment')} onClick={onNav} />