be8cc0ad8b
Code review fixes: - Wrap createFromRepairTicket() in DB transaction for atomicity - Wrap complete() inventory + status updates in DB transaction - Repair ticket status update now atomic with transaction completion - Add Zod validation on from-repair route body - Fix requiresDiscountOverride: threshold and manual_discount are independent checks - Order discount distributes proportionally across line items (not first-only) - Extract shared receipt calculations into useReceiptData/useBarcode hooks - Add error handling for barcode generation Tests: - Unit: consumable tax category mapping, exempt rate short-circuit - API: ready-for-pickup listing + search, from-repair transaction creation, consumable exclusion from line items, tax rate verification (labor=service, part=goods), duplicate prevention, ticket auto-pickup on payment completion, isConsumable product filter Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
524 lines
20 KiB
TypeScript
524 lines
20 KiB
TypeScript
import { useMutation, useQueryClient } from '@tanstack/react-query'
|
|
import { usePOSStore } from '@/stores/pos.store'
|
|
import { posMutations, posKeys, type Transaction } from '@/api/pos'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Separator } from '@/components/ui/separator'
|
|
import { Input } from '@/components/ui/input'
|
|
import { Label } from '@/components/ui/label'
|
|
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
|
|
import { X, Banknote, CreditCard, FileText, Ban, UserRound, Tag } from 'lucide-react'
|
|
import { toast } from 'sonner'
|
|
import { useState } from 'react'
|
|
import { POSPaymentDialog } from './pos-payment-dialog'
|
|
import { POSCustomerDialog } from './pos-customer-dialog'
|
|
import { ManagerOverrideDialog, requiresOverride, requiresDiscountOverride } from './pos-manager-override'
|
|
import type { TransactionLineItem } from '@/api/pos'
|
|
|
|
interface POSCartPanelProps {
|
|
transaction: Transaction | null
|
|
}
|
|
|
|
export function POSCartPanel({ transaction }: POSCartPanelProps) {
|
|
const queryClient = useQueryClient()
|
|
const { currentTransactionId, setTransaction, accountName, accountPhone, accountEmail } = usePOSStore()
|
|
const [paymentMethod, setPaymentMethod] = useState<string | null>(null)
|
|
const [customerOpen, setCustomerOpen] = useState(false)
|
|
const [overrideOpen, setOverrideOpen] = useState(false)
|
|
const [priceItemId, setPriceItemId] = useState<string | null>(null)
|
|
const [pendingDiscount, setPendingDiscount] = useState<{ lineItemId: string; amount: number; reason: string } | null>(null)
|
|
const [pendingOrderDiscount, setPendingOrderDiscount] = useState<{ amount: number; reason: string } | null>(null)
|
|
const [discountOverrideOpen, setDiscountOverrideOpen] = useState(false)
|
|
const lineItems = transaction?.lineItems ?? []
|
|
|
|
const drawerSessionId = usePOSStore((s) => s.drawerSessionId)
|
|
const drawerOpen = !!drawerSessionId
|
|
|
|
const removeItemMutation = useMutation({
|
|
mutationFn: (lineItemId: string) =>
|
|
posMutations.removeLineItem(currentTransactionId!, lineItemId),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: posKeys.transaction(currentTransactionId!) })
|
|
},
|
|
onError: (err) => toast.error(err.message),
|
|
})
|
|
|
|
const discountMutation = useMutation({
|
|
mutationFn: (data: { lineItemId: string; amount: number; reason: string }) =>
|
|
posMutations.applyDiscount(currentTransactionId!, data),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: posKeys.transaction(currentTransactionId!) })
|
|
setPriceItemId(null)
|
|
toast.success('Price adjusted')
|
|
},
|
|
onError: (err) => toast.error(err.message),
|
|
})
|
|
|
|
const orderDiscountMutation = useMutation({
|
|
mutationFn: async ({ amount, reason }: { amount: number; reason: string }) => {
|
|
// Distribute discount proportionally across all line items
|
|
let remaining = amount
|
|
for (let i = 0; i < lineItems.length; i++) {
|
|
const item = lineItems[i]
|
|
const itemTotal = parseFloat(item.unitPrice) * item.qty
|
|
const isLast = i === lineItems.length - 1
|
|
const share = isLast ? remaining : Math.round((itemTotal / subtotal) * amount * 100) / 100
|
|
remaining -= share
|
|
if (share > 0) {
|
|
await posMutations.applyDiscount(currentTransactionId!, { lineItemId: item.id, amount: share, reason })
|
|
}
|
|
}
|
|
},
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: posKeys.transaction(currentTransactionId!) })
|
|
toast.success('Order discount applied')
|
|
},
|
|
onError: (err) => toast.error(err.message),
|
|
})
|
|
|
|
const voidMutation = useMutation({
|
|
mutationFn: () => posMutations.void(currentTransactionId!),
|
|
onSuccess: () => {
|
|
setTransaction(null)
|
|
toast.success('Transaction voided')
|
|
},
|
|
onError: (err) => toast.error(err.message),
|
|
})
|
|
|
|
const subtotal = parseFloat(transaction?.subtotal ?? '0')
|
|
const discountTotal = parseFloat(transaction?.discountTotal ?? '0')
|
|
const taxTotal = parseFloat(transaction?.taxTotal ?? '0')
|
|
const total = parseFloat(transaction?.total ?? '0')
|
|
const hasItems = lineItems.length > 0
|
|
const isPending = transaction?.status === 'pending'
|
|
|
|
function handlePaymentComplete() {
|
|
setPaymentMethod(null)
|
|
setTransaction(null)
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col h-full bg-card">
|
|
{/* Header */}
|
|
<div className="p-3 border-b border-border">
|
|
<div className="flex items-center justify-between">
|
|
<h2 className="font-semibold text-base">Current Sale</h2>
|
|
{transaction && (
|
|
<span className="text-xs text-muted-foreground font-mono">
|
|
{transaction.transactionNumber}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<button
|
|
onClick={() => setCustomerOpen(true)}
|
|
className="flex items-start gap-1.5 mt-1 text-xs text-muted-foreground hover:text-foreground text-left"
|
|
>
|
|
<UserRound className="h-3 w-3 mt-0.5 shrink-0" />
|
|
{accountName ? (
|
|
<span>
|
|
<span className="font-medium text-foreground">{accountName}</span>
|
|
{(accountPhone || accountEmail) && (
|
|
<span className="block text-[11px]">
|
|
{[accountPhone, accountEmail].filter(Boolean).join(' · ')}
|
|
</span>
|
|
)}
|
|
</span>
|
|
) : (
|
|
<span>Walk-in — tap to add customer</span>
|
|
)}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Line items */}
|
|
<div className="flex-1 overflow-y-auto">
|
|
{lineItems.length === 0 ? (
|
|
<div className="flex items-center justify-center h-full text-muted-foreground text-sm">
|
|
No items yet
|
|
</div>
|
|
) : (
|
|
<div className="divide-y divide-border">
|
|
{lineItems.map((item) => {
|
|
const unitPrice = parseFloat(item.unitPrice)
|
|
const discount = parseFloat(item.discountAmount)
|
|
const hasDiscount = discount > 0
|
|
const listTotal = unitPrice * item.qty
|
|
const discountPct = listTotal > 0 ? Math.round((discount / listTotal) * 100) : 0
|
|
|
|
return (
|
|
<div key={item.id} className="flex items-center gap-2 px-3 py-2.5 group">
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm font-medium truncate">{item.description}</p>
|
|
<div className="text-xs text-muted-foreground flex items-center gap-2">
|
|
<span>{item.qty} x ${unitPrice.toFixed(2)}</span>
|
|
{hasDiscount && (
|
|
<span className="text-green-600">-${discount.toFixed(2)} ({discountPct}%)</span>
|
|
)}
|
|
{parseFloat(item.taxAmount) > 0 && (
|
|
<span>tax ${parseFloat(item.taxAmount).toFixed(2)}</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<span className="text-sm font-medium tabular-nums">
|
|
${parseFloat(item.lineTotal).toFixed(2)}
|
|
</span>
|
|
{isPending && (
|
|
<div className="flex items-center gap-0.5 opacity-0 group-hover:opacity-100 shrink-0">
|
|
<PriceAdjuster
|
|
item={item}
|
|
open={priceItemId === item.id}
|
|
onOpenChange={(o) => setPriceItemId(o ? item.id : null)}
|
|
onApply={(amount, reason) => {
|
|
const pct = listTotal > 0 ? (amount / listTotal) * 100 : 0
|
|
if (requiresDiscountOverride(pct)) {
|
|
setPendingDiscount({ lineItemId: item.id, amount, reason })
|
|
setDiscountOverrideOpen(true)
|
|
} else {
|
|
discountMutation.mutate({ lineItemId: item.id, amount, reason })
|
|
}
|
|
}}
|
|
isPending={discountMutation.isPending}
|
|
/>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-8 w-8"
|
|
onClick={() => removeItemMutation.mutate(item.id)}
|
|
disabled={removeItemMutation.isPending}
|
|
>
|
|
<X className="h-4 w-4 text-destructive" />
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Totals + payment */}
|
|
<div className="shrink-0 border-t border-border">
|
|
<div className="px-3 py-2 space-y-1 text-sm">
|
|
<div className="flex justify-between">
|
|
<span className="text-muted-foreground">Subtotal</span>
|
|
<span className="tabular-nums">${subtotal.toFixed(2)}</span>
|
|
</div>
|
|
{discountTotal > 0 && (
|
|
<div className="flex justify-between text-green-600">
|
|
<span>Discount</span>
|
|
<span className="tabular-nums">-${discountTotal.toFixed(2)}</span>
|
|
</div>
|
|
)}
|
|
<div className="flex justify-between">
|
|
<span className="text-muted-foreground">Tax</span>
|
|
<span className="tabular-nums">${taxTotal.toFixed(2)}</span>
|
|
</div>
|
|
<Separator />
|
|
<div className="flex justify-between text-lg font-bold pt-1">
|
|
<span>Total</span>
|
|
<span className="tabular-nums">${total.toFixed(2)}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Order discount button */}
|
|
{hasItems && isPending && (
|
|
<div className="px-3 pb-1">
|
|
<OrderDiscountButton
|
|
subtotal={subtotal}
|
|
onApply={(amount, reason) => {
|
|
const pct = subtotal > 0 ? (amount / subtotal) * 100 : 0
|
|
if (requiresDiscountOverride(pct)) {
|
|
setPendingOrderDiscount({ amount, reason })
|
|
setDiscountOverrideOpen(true)
|
|
} else {
|
|
orderDiscountMutation.mutate({ amount, reason })
|
|
}
|
|
}}
|
|
isPending={orderDiscountMutation.isPending}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* Payment buttons */}
|
|
<div className="p-3 space-y-2">
|
|
{!drawerOpen && hasItems && (
|
|
<p className="text-xs text-destructive text-center">Open the drawer before accepting payment</p>
|
|
)}
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<Button
|
|
className="h-12 text-sm gap-2"
|
|
disabled={!hasItems || !isPending || !drawerOpen}
|
|
onClick={() => setPaymentMethod('cash')}
|
|
>
|
|
<Banknote className="h-4 w-4" />
|
|
Cash
|
|
</Button>
|
|
<Button
|
|
className="h-12 text-sm gap-2"
|
|
disabled={!hasItems || !isPending || !drawerOpen}
|
|
onClick={() => setPaymentMethod('card_present')}
|
|
>
|
|
<CreditCard className="h-4 w-4" />
|
|
Card
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
className="h-12 text-sm gap-2"
|
|
disabled={!hasItems || !isPending || !drawerOpen}
|
|
onClick={() => setPaymentMethod('check')}
|
|
>
|
|
<FileText className="h-4 w-4" />
|
|
Check
|
|
</Button>
|
|
<Button
|
|
variant="destructive"
|
|
className="h-12 text-sm gap-2"
|
|
disabled={!hasItems || !isPending}
|
|
onClick={() => {
|
|
if (requiresOverride('void_transaction')) {
|
|
setOverrideOpen(true)
|
|
} else {
|
|
voidMutation.mutate()
|
|
}
|
|
}}
|
|
>
|
|
<Ban className="h-4 w-4" />
|
|
Void
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Payment dialog */}
|
|
{paymentMethod && transaction && (
|
|
<POSPaymentDialog
|
|
open={!!paymentMethod}
|
|
onOpenChange={(open) => { if (!open) setPaymentMethod(null) }}
|
|
paymentMethod={paymentMethod}
|
|
transaction={transaction}
|
|
onComplete={handlePaymentComplete}
|
|
/>
|
|
)}
|
|
|
|
{/* Customer dialog */}
|
|
<POSCustomerDialog open={customerOpen} onOpenChange={setCustomerOpen} />
|
|
|
|
{/* Manager override for void */}
|
|
<ManagerOverrideDialog
|
|
open={overrideOpen}
|
|
onOpenChange={setOverrideOpen}
|
|
action="Void transaction"
|
|
onAuthorized={() => voidMutation.mutate()}
|
|
/>
|
|
|
|
{/* Manager override for discount */}
|
|
<ManagerOverrideDialog
|
|
open={discountOverrideOpen}
|
|
onOpenChange={setDiscountOverrideOpen}
|
|
action="Price adjustment"
|
|
onAuthorized={() => {
|
|
if (pendingDiscount) {
|
|
discountMutation.mutate(pendingDiscount)
|
|
setPendingDiscount(null)
|
|
} else if (pendingOrderDiscount) {
|
|
orderDiscountMutation.mutate(pendingOrderDiscount)
|
|
setPendingOrderDiscount(null)
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// --- Order Discount Button ---
|
|
|
|
function OrderDiscountButton({ subtotal, onApply, isPending }: {
|
|
subtotal: number
|
|
onApply: (amount: number, reason: string) => void
|
|
isPending: boolean
|
|
}) {
|
|
const [open, setOpen] = useState(false)
|
|
const [mode, setMode] = useState<AdjustMode>('percent')
|
|
const [value, setValue] = useState('')
|
|
|
|
function calculate() {
|
|
const v = parseFloat(value) || 0
|
|
if (mode === 'amount_off') return Math.min(v, subtotal)
|
|
if (mode === 'set_price') return Math.max(0, subtotal - v)
|
|
return Math.round(subtotal * (v / 100) * 100) / 100
|
|
}
|
|
|
|
const discountAmount = calculate()
|
|
|
|
function handleApply() {
|
|
if (discountAmount <= 0) return
|
|
const reason = mode === 'percent' ? `${parseFloat(value)}% order discount` : mode === 'set_price' ? `Order total set to $${parseFloat(value).toFixed(2)}` : `$${parseFloat(value).toFixed(2)} order discount`
|
|
onApply(discountAmount, reason)
|
|
setValue('')
|
|
setOpen(false)
|
|
}
|
|
|
|
return (
|
|
<Popover open={open} onOpenChange={(o) => { setOpen(o); if (!o) setValue('') }}>
|
|
<PopoverTrigger asChild>
|
|
<Button variant="outline" size="sm" className="w-full gap-2 text-xs h-8">
|
|
<Tag className="h-3 w-3" />Order Discount
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-64 p-3" side="top" align="center">
|
|
<div className="space-y-3">
|
|
<div className="text-xs text-muted-foreground">
|
|
Subtotal: <span className="font-medium text-foreground">${subtotal.toFixed(2)}</span>
|
|
</div>
|
|
<div className="flex rounded-md border overflow-hidden text-xs">
|
|
{([
|
|
{ key: 'percent' as const, label: '% Off' },
|
|
{ key: 'amount_off' as const, label: '$ Off' },
|
|
{ key: 'set_price' as const, label: 'Set Total' },
|
|
]).map((m) => (
|
|
<button
|
|
key={m.key}
|
|
type="button"
|
|
className={`flex-1 py-1.5 transition-colors ${mode === m.key ? 'bg-primary text-primary-foreground' : 'hover:bg-muted'}`}
|
|
onClick={() => { setMode(m.key); setValue('') }}
|
|
>
|
|
{m.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
<Input
|
|
type="number"
|
|
step="0.01"
|
|
min="0"
|
|
placeholder={mode === 'percent' ? 'e.g. 10' : '0.00'}
|
|
value={value}
|
|
onChange={(e) => setValue(e.target.value)}
|
|
className="h-9"
|
|
autoFocus
|
|
onKeyDown={(e) => { if (e.key === 'Enter') handleApply() }}
|
|
/>
|
|
{value && discountAmount > 0 && (
|
|
<div className="text-xs flex justify-between font-medium">
|
|
<span className="text-green-600">-${discountAmount.toFixed(2)}</span>
|
|
<span>New total: ${(subtotal - discountAmount).toFixed(2)}</span>
|
|
</div>
|
|
)}
|
|
<Button size="sm" className="w-full" onClick={handleApply} disabled={isPending || discountAmount <= 0}>
|
|
{isPending ? 'Applying...' : 'Apply Discount'}
|
|
</Button>
|
|
</div>
|
|
</PopoverContent>
|
|
</Popover>
|
|
)
|
|
}
|
|
|
|
// --- Price Adjuster Popover ---
|
|
|
|
type AdjustMode = 'amount_off' | 'set_price' | 'percent'
|
|
|
|
function PriceAdjuster({ item, open, onOpenChange, onApply, isPending }: {
|
|
item: TransactionLineItem
|
|
open: boolean
|
|
onOpenChange: (open: boolean) => void
|
|
onApply: (amount: number, reason: string) => void
|
|
isPending: boolean
|
|
}) {
|
|
const [mode, setMode] = useState<AdjustMode>('percent')
|
|
const [value, setValue] = useState('')
|
|
|
|
const unitPrice = parseFloat(item.unitPrice)
|
|
const listTotal = unitPrice * item.qty
|
|
|
|
function calculate(): { discountAmount: number; salePrice: number; pct: number } {
|
|
const v = parseFloat(value) || 0
|
|
if (mode === 'amount_off') {
|
|
const d = Math.min(v, listTotal)
|
|
return { discountAmount: d, salePrice: listTotal - d, pct: listTotal > 0 ? (d / listTotal) * 100 : 0 }
|
|
}
|
|
if (mode === 'set_price') {
|
|
const d = Math.max(0, listTotal - v)
|
|
return { discountAmount: d, salePrice: v, pct: listTotal > 0 ? (d / listTotal) * 100 : 0 }
|
|
}
|
|
// percent
|
|
const d = Math.round(listTotal * (v / 100) * 100) / 100
|
|
return { discountAmount: d, salePrice: listTotal - d, pct: v }
|
|
}
|
|
|
|
const calc = calculate()
|
|
|
|
function handleApply() {
|
|
if (calc.discountAmount <= 0) return
|
|
const reason = mode === 'percent' ? `${parseFloat(value)}% off` : mode === 'set_price' ? `Price set to $${parseFloat(value).toFixed(2)}` : `$${parseFloat(value).toFixed(2)} off`
|
|
onApply(calc.discountAmount, reason)
|
|
setValue('')
|
|
}
|
|
|
|
return (
|
|
<Popover open={open} onOpenChange={(o) => { onOpenChange(o); if (!o) setValue('') }}>
|
|
<PopoverTrigger asChild>
|
|
<Button variant="ghost" size="icon" className="h-8 w-8">
|
|
<Tag className="h-4 w-4" />
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-64 p-3" side="left" align="start">
|
|
<div className="space-y-3">
|
|
<div className="text-xs text-muted-foreground">
|
|
List: <span className="font-medium text-foreground">${listTotal.toFixed(2)}</span>
|
|
</div>
|
|
|
|
{/* Mode tabs */}
|
|
<div className="flex rounded-md border overflow-hidden text-xs">
|
|
{([
|
|
{ key: 'percent' as const, label: '% Off' },
|
|
{ key: 'amount_off' as const, label: '$ Off' },
|
|
{ key: 'set_price' as const, label: 'Set Price' },
|
|
]).map((m) => (
|
|
<button
|
|
key={m.key}
|
|
type="button"
|
|
className={`flex-1 py-1.5 transition-colors ${mode === m.key ? 'bg-primary text-primary-foreground' : 'hover:bg-muted'}`}
|
|
onClick={() => { setMode(m.key); setValue('') }}
|
|
>
|
|
{m.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
<Input
|
|
type="number"
|
|
step="0.01"
|
|
min="0"
|
|
placeholder={mode === 'percent' ? 'e.g. 10' : '0.00'}
|
|
value={value}
|
|
onChange={(e) => setValue(e.target.value)}
|
|
className="h-9"
|
|
autoFocus
|
|
onKeyDown={(e) => { if (e.key === 'Enter') handleApply() }}
|
|
/>
|
|
|
|
{value && parseFloat(value) > 0 && (
|
|
<div className="text-xs space-y-0.5">
|
|
<div className="flex justify-between">
|
|
<span className="text-muted-foreground">Discount</span>
|
|
<span className="text-green-600">-${calc.discountAmount.toFixed(2)} ({calc.pct.toFixed(0)}%)</span>
|
|
</div>
|
|
<div className="flex justify-between font-medium">
|
|
<span>Sale Price</span>
|
|
<span>${calc.salePrice.toFixed(2)}</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<Button
|
|
size="sm"
|
|
className="w-full"
|
|
onClick={handleApply}
|
|
disabled={isPending || !value || calc.discountAmount <= 0}
|
|
>
|
|
{isPending ? 'Applying...' : 'Apply'}
|
|
</Button>
|
|
</div>
|
|
</PopoverContent>
|
|
</Popover>
|
|
)
|
|
}
|