feat: named registers, X/Z reports, daily rollup, fix drawerSessionId

Registers:
- New register table with location association
- CRUD service + API routes (POST/GET/PATCH/DELETE /registers)
- Drawer sessions now link to a register via registerId
- Register ID persisted in localStorage per device

X/Z Reports:
- ReportService with getDrawerReport() (X or Z depending on session state)
- Z report auto-displayed on drawer close in the drawer dialog
- X report (Current Shift Report) button on open drawer view
- Report shows: sales summary, payment breakdown, discounts, cash accountability, adjustments

Daily Rollup:
- ReportService.getDailyReport() aggregates all sessions at a location for a date
- New /reports/daily endpoint with locationId + date params
- Frontend daily report page with date picker, location selector, session breakdown

Critical Fix:
- drawerSessionId is now populated on transactions when completing (was never set before)
- This enables accurate per-drawer reporting and cash accountability

Migration 0044: register table, drawer_session.register_id column

Tests: 14 new (register CRUD, drawer report X/Z, drawerSessionId population, daily rollup, register-drawer link)
Full suite: 367 passed

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
ryan
2026-04-05 02:21:55 +00:00
parent be8cc0ad8b
commit 7d9aeaf188
17 changed files with 1062 additions and 6 deletions

View File

@@ -1,7 +1,7 @@
import { useState } from 'react'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { usePOSStore } from '@/stores/pos.store'
import { posMutations, posKeys, type DrawerSession } from '@/api/pos'
import { posMutations, posKeys, drawerReportOptions, type DrawerSession } from '@/api/pos'
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
@@ -20,7 +20,7 @@ interface POSDrawerDialogProps {
export function POSDrawerDialog({ open, onOpenChange, drawer }: POSDrawerDialogProps) {
const queryClient = useQueryClient()
const { locationId, setDrawerSession } = usePOSStore()
const { locationId, registerId, setDrawerSession } = usePOSStore()
const isOpen = drawer?.status === 'open'
const [openingBalance, setOpeningBalance] = useState('200')
@@ -31,6 +31,15 @@ export function POSDrawerDialog({ open, onOpenChange, drawer }: POSDrawerDialogP
const [adjReason, setAdjReason] = useState('')
const [overrideOpen, setOverrideOpen] = useState(false)
const [pendingAdjustView, setPendingAdjustView] = useState<'cash_in' | 'cash_out' | null>(null)
const [showZReport, setShowZReport] = useState(false)
const [closedDrawerId, setClosedDrawerId] = useState<string | null>(null)
const [showXReport, setShowXReport] = useState(false)
// Z Report data (after close)
const { data: reportData } = useQuery(drawerReportOptions(closedDrawerId))
// X Report data (live, for open drawer)
const { data: xReportData } = useQuery(drawerReportOptions(showXReport ? drawer?.id ?? null : null))
// Fetch adjustments for open drawer
const { data: adjData } = useQuery({
@@ -44,6 +53,7 @@ export function POSDrawerDialog({ open, onOpenChange, drawer }: POSDrawerDialogP
mutationFn: () =>
posMutations.openDrawer({
locationId: locationId ?? undefined,
registerId: registerId ?? undefined,
openingBalance: parseFloat(openingBalance) || 0,
}),
onSuccess: async (session) => {
@@ -69,7 +79,9 @@ export function POSDrawerDialog({ open, onOpenChange, drawer }: POSDrawerDialogP
} else {
toast.warning(`Drawer closed - ${overShort > 0 ? 'over' : 'short'} $${Math.abs(overShort).toFixed(2)}`)
}
onOpenChange(false)
// Show Z report
setClosedDrawerId(session.id)
setShowZReport(true)
await queryClient.invalidateQueries({ queryKey: posKeys.drawer(locationId ?? '') })
},
onError: (err) => toast.error(err.message),
@@ -92,6 +104,45 @@ export function POSDrawerDialog({ open, onOpenChange, drawer }: POSDrawerDialogP
onError: (err) => toast.error(err.message),
})
// Z Report view (shown after drawer close)
if (showZReport && reportData) {
const r = reportData
return (
<>
<Dialog open={open} onOpenChange={(o) => { onOpenChange(o); if (!o) { setShowZReport(false); setClosedDrawerId(null) } }}>
<DialogContent className="max-w-md max-h-[90vh] overflow-y-auto">
<DialogHeader>
<DialogTitle>Z Report Drawer Closed</DialogTitle>
</DialogHeader>
<DrawerReportView report={r} />
<Button variant="outline" className="w-full" onClick={() => { setShowZReport(false); setClosedDrawerId(null); onOpenChange(false) }}>
Done
</Button>
</DialogContent>
</Dialog>
</>
)
}
// X Report view (mid-shift snapshot)
if (showXReport && xReportData) {
return (
<>
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-md max-h-[90vh] overflow-y-auto">
<DialogHeader>
<DialogTitle>X Report Current Shift</DialogTitle>
</DialogHeader>
<DrawerReportView report={xReportData} />
<Button variant="outline" className="w-full" onClick={() => setShowXReport(false)}>
Back
</Button>
</DialogContent>
</Dialog>
</>
)
}
// Adjustment entry view
if (adjustView && isOpen) {
const isCashIn = adjustView === 'cash_in'
@@ -199,6 +250,11 @@ export function POSDrawerDialog({ open, onOpenChange, drawer }: POSDrawerDialogP
</Button>
</div>
{/* X Report button */}
<Button variant="outline" className="w-full h-10 gap-2 text-sm" onClick={() => setShowXReport(true)}>
Current Shift Report
</Button>
{/* Adjustment history */}
{adjustments.length > 0 && (
<>
@@ -293,3 +349,123 @@ export function POSDrawerDialog({ open, onOpenChange, drawer }: POSDrawerDialogP
</>
)
}
// --- Shared report view used by both X and Z reports ---
const PAYMENT_LABELS: Record<string, string> = {
cash: 'Cash',
card_present: 'Card (Present)',
card_keyed: 'Card (Keyed)',
check: 'Check',
account_charge: 'Account',
unknown: 'Other',
}
function DrawerReportView({ report }: { report: any }) {
const { session, sales, payments, discounts, cash, adjustments } = report
return (
<div className="space-y-4 text-sm">
{/* Session info */}
<div className="space-y-1">
{session.register && <div className="flex justify-between"><span className="text-muted-foreground">Register</span><span>{session.register.name}</span></div>}
{session.openedBy && <div className="flex justify-between"><span className="text-muted-foreground">Opened by</span><span>{session.openedBy.firstName} {session.openedBy.lastName}</span></div>}
<div className="flex justify-between"><span className="text-muted-foreground">Opened</span><span>{new Date(session.openedAt).toLocaleString()}</span></div>
{session.closedAt && (
<>
{session.closedBy && <div className="flex justify-between"><span className="text-muted-foreground">Closed by</span><span>{session.closedBy.firstName} {session.closedBy.lastName}</span></div>}
<div className="flex justify-between"><span className="text-muted-foreground">Closed</span><span>{new Date(session.closedAt).toLocaleString()}</span></div>
</>
)}
</div>
<Separator />
{/* Sales */}
<div>
<h4 className="font-semibold text-xs uppercase text-muted-foreground mb-2">Sales</h4>
<div className="space-y-1">
<div className="flex justify-between"><span>Transactions</span><span>{sales.transactionCount}</span></div>
<div className="flex justify-between"><span>Gross Sales</span><span className="tabular-nums">${sales.grossSales.toFixed(2)}</span></div>
{sales.refundTotal > 0 && <div className="flex justify-between text-red-600"><span>Refunds</span><span className="tabular-nums">-${sales.refundTotal.toFixed(2)}</span></div>}
<div className="flex justify-between font-medium"><span>Net Sales</span><span className="tabular-nums">${sales.netSales.toFixed(2)}</span></div>
{sales.voidCount > 0 && <div className="flex justify-between text-muted-foreground"><span>Voided</span><span>{sales.voidCount}</span></div>}
</div>
</div>
<Separator />
{/* Payment breakdown */}
<div>
<h4 className="font-semibold text-xs uppercase text-muted-foreground mb-2">Payments</h4>
<div className="space-y-1">
{Object.entries(payments as Record<string, { count: number; total: number }>).map(([method, data]) => (
<div key={method} className="flex justify-between">
<span>{PAYMENT_LABELS[method] ?? method} ({data.count})</span>
<span className="tabular-nums">${data.total.toFixed(2)}</span>
</div>
))}
{Object.keys(payments).length === 0 && <p className="text-muted-foreground">No payments</p>}
</div>
</div>
{/* Discounts */}
{discounts.count > 0 && (
<>
<Separator />
<div>
<h4 className="font-semibold text-xs uppercase text-muted-foreground mb-2">Discounts</h4>
<div className="flex justify-between"><span>Total ({discounts.count})</span><span className="tabular-nums text-green-600">-${discounts.total.toFixed(2)}</span></div>
</div>
</>
)}
<Separator />
{/* Cash accountability */}
<div>
<h4 className="font-semibold text-xs uppercase text-muted-foreground mb-2">Cash</h4>
<div className="space-y-1">
<div className="flex justify-between"><span>Opening Balance</span><span className="tabular-nums">${cash.openingBalance.toFixed(2)}</span></div>
<div className="flex justify-between"><span>Cash Sales</span><span className="tabular-nums">${cash.cashSales.toFixed(2)}</span></div>
{cash.cashIn > 0 && <div className="flex justify-between text-green-600"><span>Cash In</span><span className="tabular-nums">+${cash.cashIn.toFixed(2)}</span></div>}
{cash.cashOut > 0 && <div className="flex justify-between text-red-600"><span>Cash Out</span><span className="tabular-nums">-${cash.cashOut.toFixed(2)}</span></div>}
<Separator />
<div className="flex justify-between font-medium"><span>Expected</span><span className="tabular-nums">${cash.expectedBalance.toFixed(2)}</span></div>
{cash.actualBalance !== null && (
<>
<div className="flex justify-between"><span>Actual Count</span><span className="tabular-nums">${cash.actualBalance.toFixed(2)}</span></div>
<div className={`flex justify-between font-bold ${cash.overShort === 0 ? 'text-green-600' : 'text-red-600'}`}>
<span>{cash.overShort! >= 0 ? 'Over' : 'Short'}</span>
<span className="tabular-nums">${Math.abs(cash.overShort!).toFixed(2)}</span>
</div>
</>
)}
</div>
</div>
{/* Adjustments */}
{adjustments.length > 0 && (
<>
<Separator />
<div>
<h4 className="font-semibold text-xs uppercase text-muted-foreground mb-2">Adjustments</h4>
<div className="space-y-1">
{adjustments.map((adj: any) => (
<div key={adj.id} className="flex items-center justify-between text-xs">
<div className="flex items-center gap-2">
<Badge variant={adj.type === 'cash_in' ? 'default' : 'destructive'} className="text-[10px]">
{adj.type === 'cash_in' ? 'IN' : 'OUT'}
</Badge>
<span className="text-muted-foreground truncate max-w-[150px]">{adj.reason}</span>
</div>
<span className="tabular-nums">${parseFloat(adj.amount).toFixed(2)}</span>
</div>
))}
</div>
</div>
</>
)}
</div>
)
}