feat: unified station mode with POS + repairs desk view
Phase 1: Station shell - /station route replaces /pos (with redirect) - Shared lock screen, activity tracking, auto-lock timer - Permission-gated tab bar (POS | Repairs | Lessons) - POSRegister embedded mode (skip lock/timer/topbar) - Sidebar navigates to /station Phase 2: Repairs station — front desk - Status bar with count badges per status group, clickable filters - Ticket queue panel with search and status filtering - Ticket detail panel with status progress, notes, photos, line items - Full stepped intake form: customer → item → problem/estimate → review - Service template quick-add for line items Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
ryan
@@ -40,20 +40,25 @@ function configOptions(key: string) {
|
||||
})
|
||||
}
|
||||
|
||||
export function POSRegister() {
|
||||
interface POSRegisterProps {
|
||||
embedded?: boolean
|
||||
}
|
||||
|
||||
export function POSRegister({ embedded }: POSRegisterProps = {}) {
|
||||
const { locationId, setLocation, currentTransactionId, setDrawerSession, locked, lock, touchActivity, token } = usePOSStore()
|
||||
|
||||
// Fetch lock timeout from config
|
||||
// Fetch lock timeout from config (standalone only)
|
||||
const { data: lockTimeoutStr } = useQuery({
|
||||
...configOptions('pos_lock_timeout'),
|
||||
enabled: !!token,
|
||||
enabled: !!token && !embedded,
|
||||
})
|
||||
const lockTimeoutMinutes = parseInt(lockTimeoutStr ?? '15') || 15
|
||||
|
||||
// Auto-lock timer
|
||||
// Auto-lock timer (standalone only — station shell handles this when embedded)
|
||||
const timerRef = useRef<ReturnType<typeof setInterval> | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (embedded) return
|
||||
if (locked || lockTimeoutMinutes === 0) {
|
||||
if (timerRef.current) clearInterval(timerRef.current)
|
||||
return
|
||||
@@ -69,26 +74,27 @@ export function POSRegister() {
|
||||
return () => {
|
||||
if (timerRef.current) clearInterval(timerRef.current)
|
||||
}
|
||||
}, [locked, lockTimeoutMinutes, lock])
|
||||
}, [embedded, locked, lockTimeoutMinutes, lock])
|
||||
|
||||
// Track activity on any interaction
|
||||
// Track activity (standalone only)
|
||||
const handleActivity = useCallback(() => {
|
||||
if (!locked) touchActivity()
|
||||
}, [locked, touchActivity])
|
||||
if (!embedded && !locked) touchActivity()
|
||||
}, [embedded, locked, touchActivity])
|
||||
|
||||
// Fetch locations
|
||||
// Fetch locations (standalone only — station shell handles this when embedded)
|
||||
const { data: locationsData } = useQuery({
|
||||
...locationsOptions(),
|
||||
enabled: !!token,
|
||||
enabled: !!token && !embedded,
|
||||
})
|
||||
const locations = locationsData?.data ?? []
|
||||
|
||||
// Auto-select first location
|
||||
// Auto-select first location (standalone only)
|
||||
useEffect(() => {
|
||||
if (embedded) return
|
||||
if (!locationId && locations.length > 0) {
|
||||
setLocation(locations[0].id)
|
||||
}
|
||||
}, [locationId, locations, setLocation])
|
||||
}, [embedded, locationId, locations, setLocation])
|
||||
|
||||
// Fetch current drawer for selected location
|
||||
const { data: drawer } = useQuery({
|
||||
@@ -112,6 +118,20 @@ export function POSRegister() {
|
||||
enabled: !!currentTransactionId && !!token,
|
||||
})
|
||||
|
||||
// Embedded mode: just the content panels, no wrapper/lock/topbar
|
||||
if (embedded) {
|
||||
return (
|
||||
<div className="flex flex-1 h-full min-h-0">
|
||||
<div className="w-[60%] border-r border-border overflow-hidden">
|
||||
<POSItemPanel transaction={transaction ?? null} />
|
||||
</div>
|
||||
<div className="w-[40%] overflow-hidden">
|
||||
<POSCartPanel transaction={transaction ?? null} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="relative flex flex-col h-full"
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
import { GraduationCap } from 'lucide-react'
|
||||
|
||||
interface LessonsStationProps {
|
||||
permissions: string[]
|
||||
}
|
||||
|
||||
export function LessonsStation({ permissions: _permissions }: LessonsStationProps) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-full text-muted-foreground">
|
||||
<div className="text-center space-y-2">
|
||||
<GraduationCap className="h-12 w-12 mx-auto opacity-30" />
|
||||
<p className="text-lg font-medium">Lessons Station</p>
|
||||
<p className="text-sm">Coming soon</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
import { useState } from 'react'
|
||||
import { RepairStatusBar } from './repair-status-bar'
|
||||
import { RepairQueuePanel } from './repair-queue-panel'
|
||||
import { RepairDetailPanel } from './repair-detail-panel'
|
||||
import { RepairIntakeForm } from './repair-intake-form'
|
||||
|
||||
interface RepairDeskViewProps {
|
||||
canEdit: boolean
|
||||
}
|
||||
|
||||
export function RepairDeskView({ canEdit }: RepairDeskViewProps) {
|
||||
const [selectedTicketId, setSelectedTicketId] = useState<string | null>(null)
|
||||
const [intakeMode, setIntakeMode] = useState(false)
|
||||
const [statusFilter, setStatusFilter] = useState<string[] | null>(null)
|
||||
const [activeFilterLabel, setActiveFilterLabel] = useState<string | null>(null)
|
||||
|
||||
function handleFilterChange(statuses: string[] | null) {
|
||||
setStatusFilter(statuses)
|
||||
// Track which group label is active for the status bar highlight
|
||||
if (!statuses) {
|
||||
setActiveFilterLabel(null)
|
||||
} else {
|
||||
// Map statuses back to group label
|
||||
const groups: Record<string, string> = {
|
||||
new: 'New', in_transit: 'New', intake: 'New',
|
||||
diagnosing: 'Diagnosing', pending_approval: 'Diagnosing',
|
||||
approved: 'In Progress', in_progress: 'In Progress', pending_parts: 'In Progress',
|
||||
ready: 'Ready',
|
||||
}
|
||||
setActiveFilterLabel(groups[statuses[0]] ?? null)
|
||||
}
|
||||
}
|
||||
|
||||
if (intakeMode) {
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<RepairIntakeForm
|
||||
onComplete={(ticketId) => {
|
||||
setIntakeMode(false)
|
||||
setSelectedTicketId(ticketId)
|
||||
}}
|
||||
onCancel={() => setIntakeMode(false)}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<RepairStatusBar activeFilter={activeFilterLabel} onFilterChange={handleFilterChange} />
|
||||
<div className="flex flex-1 min-h-0">
|
||||
<div className="w-[35%] border-r border-border overflow-hidden">
|
||||
<RepairQueuePanel
|
||||
selectedTicketId={selectedTicketId}
|
||||
onSelectTicket={setSelectedTicketId}
|
||||
onNewIntake={() => setIntakeMode(true)}
|
||||
statusFilter={statusFilter}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-[65%] overflow-hidden">
|
||||
<RepairDetailPanel ticketId={selectedTicketId} canEdit={canEdit} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,216 @@
|
||||
import { useState } from 'react'
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import {
|
||||
repairTicketDetailOptions, repairTicketKeys, repairTicketMutations,
|
||||
repairLineItemListOptions,
|
||||
} from '@/api/repairs'
|
||||
import { api } from '@/lib/api-client'
|
||||
import { StatusProgress } from '@/components/repairs/status-progress'
|
||||
import { TicketNotes } from '@/components/repairs/ticket-notes'
|
||||
import { TicketPhotos } from '@/components/repairs/ticket-photos'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Separator } from '@/components/ui/separator'
|
||||
import { Mail, ChevronRight, Wrench } from 'lucide-react'
|
||||
import { toast } from 'sonner'
|
||||
|
||||
const STATUS_FLOW = ['new', 'intake', 'diagnosing', 'pending_approval', 'approved', 'in_progress', 'ready', 'picked_up']
|
||||
|
||||
interface RepairDetailPanelProps {
|
||||
ticketId: string | null
|
||||
canEdit: boolean
|
||||
}
|
||||
|
||||
export function RepairDetailPanel({ ticketId, canEdit }: RepairDetailPanelProps) {
|
||||
const queryClient = useQueryClient()
|
||||
const [activeSection, setActiveSection] = useState<'details' | 'notes' | 'photos'>('details')
|
||||
|
||||
const { data: ticket, isLoading } = useQuery({
|
||||
...repairTicketDetailOptions(ticketId ?? ''),
|
||||
enabled: !!ticketId,
|
||||
})
|
||||
|
||||
const { data: lineItemsData } = useQuery({
|
||||
...repairLineItemListOptions(ticketId ?? '', { page: 1, limit: 100, q: undefined, sort: undefined, order: 'asc' }),
|
||||
enabled: !!ticketId,
|
||||
})
|
||||
|
||||
const statusMutation = useMutation({
|
||||
mutationFn: (status: string) => repairTicketMutations.updateStatus(ticketId!, status),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: repairTicketKeys.detail(ticketId!) })
|
||||
queryClient.invalidateQueries({ queryKey: ['repair-tickets', 'station-all'] })
|
||||
toast.success('Status updated')
|
||||
},
|
||||
onError: (err) => toast.error(err.message),
|
||||
})
|
||||
|
||||
const emailEstimateMutation = useMutation({
|
||||
mutationFn: (email: string) => api.post(`/v1/repair-tickets/${ticketId}/email-estimate`, { email }),
|
||||
onSuccess: () => toast.success('Estimate emailed'),
|
||||
onError: (err) => toast.error(err.message),
|
||||
})
|
||||
|
||||
if (!ticketId) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-full text-muted-foreground">
|
||||
<div className="text-center space-y-2">
|
||||
<Wrench className="h-10 w-10 mx-auto opacity-20" />
|
||||
<p className="text-sm">Select a ticket from the queue</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (isLoading || !ticket) {
|
||||
return (
|
||||
<div className="p-4 space-y-4">
|
||||
<div className="h-8 bg-muted animate-pulse rounded" />
|
||||
<div className="h-20 bg-muted animate-pulse rounded" />
|
||||
<div className="h-40 bg-muted animate-pulse rounded" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const lineItems = lineItemsData?.data ?? []
|
||||
const currentIdx = STATUS_FLOW.indexOf(ticket.status)
|
||||
const nextStatus = currentIdx >= 0 && currentIdx < STATUS_FLOW.length - 1 ? STATUS_FLOW[currentIdx + 1] : null
|
||||
const isTerminal = ['picked_up', 'delivered', 'cancelled'].includes(ticket.status)
|
||||
|
||||
function handleStatusClick(status: string) {
|
||||
if (canEdit && !isTerminal) statusMutation.mutate(status)
|
||||
}
|
||||
|
||||
function handleEmailEstimate() {
|
||||
const email = (ticket as any).customerEmail
|
||||
if (email) {
|
||||
emailEstimateMutation.mutate(email)
|
||||
} else {
|
||||
toast.error('No customer email on file')
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full overflow-hidden">
|
||||
{/* Header */}
|
||||
<div className="p-3 border-b border-border shrink-0">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold">#{ticket.ticketNumber}</h3>
|
||||
<p className="text-sm text-muted-foreground">{ticket.customerName}</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" size="sm" className="gap-1.5" onClick={handleEmailEstimate}>
|
||||
<Mail className="h-3.5 w-3.5" />
|
||||
<span className="hidden lg:inline">Email Estimate</span>
|
||||
</Button>
|
||||
{canEdit && nextStatus && !isTerminal && (
|
||||
<Button size="sm" className="gap-1.5" onClick={() => statusMutation.mutate(nextStatus)}>
|
||||
Next <ChevronRight className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<StatusProgress
|
||||
currentStatus={ticket.status}
|
||||
onStatusClick={canEdit && !isTerminal ? handleStatusClick : undefined}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Section toggle */}
|
||||
<div className="flex gap-1 px-3 py-2 border-b border-border shrink-0 bg-muted/30">
|
||||
{(['details', 'notes', 'photos'] as const).map((s) => (
|
||||
<Button
|
||||
key={s}
|
||||
variant={activeSection === s ? 'default' : 'ghost'}
|
||||
size="sm"
|
||||
className="h-7 text-xs capitalize"
|
||||
onClick={() => setActiveSection(s)}
|
||||
>
|
||||
{s}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 overflow-y-auto p-3">
|
||||
{activeSection === 'details' && (
|
||||
<div className="space-y-4">
|
||||
{/* Item info */}
|
||||
<div className="space-y-1">
|
||||
<p className="text-sm"><span className="text-muted-foreground">Item:</span> {ticket.itemDescription ?? 'N/A'}</p>
|
||||
{ticket.serialNumber && <p className="text-sm"><span className="text-muted-foreground">S/N:</span> {ticket.serialNumber}</p>}
|
||||
{ticket.conditionIn && <p className="text-sm"><span className="text-muted-foreground">Condition:</span> {ticket.conditionIn}</p>}
|
||||
{ticket.conditionInNotes && <p className="text-sm text-muted-foreground">{ticket.conditionInNotes}</p>}
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
{/* Problem */}
|
||||
<div>
|
||||
<p className="text-xs font-medium text-muted-foreground mb-1">Problem</p>
|
||||
<p className="text-sm">{ticket.problemDescription}</p>
|
||||
</div>
|
||||
|
||||
{/* Dates */}
|
||||
<div className="flex gap-4">
|
||||
{ticket.promisedDate && (
|
||||
<div>
|
||||
<p className="text-xs text-muted-foreground">Promised</p>
|
||||
<p className="text-sm font-medium">{new Date(ticket.promisedDate).toLocaleDateString()}</p>
|
||||
</div>
|
||||
)}
|
||||
{ticket.estimatedCost && (
|
||||
<div>
|
||||
<p className="text-xs text-muted-foreground">Estimate</p>
|
||||
<p className="text-sm font-medium">${ticket.estimatedCost}</p>
|
||||
</div>
|
||||
)}
|
||||
{ticket.actualCost && (
|
||||
<div>
|
||||
<p className="text-xs text-muted-foreground">Actual</p>
|
||||
<p className="text-sm font-medium">${ticket.actualCost}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Line items */}
|
||||
{lineItems.length > 0 && (
|
||||
<>
|
||||
<Separator />
|
||||
<div>
|
||||
<p className="text-xs font-medium text-muted-foreground mb-2">Line Items</p>
|
||||
<div className="space-y-1">
|
||||
{lineItems.map((item) => (
|
||||
<div key={item.id} className="flex items-center justify-between text-sm py-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="outline" className="text-[10px] h-5">{item.itemType}</Badge>
|
||||
<span>{item.description}</span>
|
||||
</div>
|
||||
<span className="font-medium">${item.totalPrice}</span>
|
||||
</div>
|
||||
))}
|
||||
<Separator />
|
||||
<div className="flex justify-between text-sm font-semibold pt-1">
|
||||
<span>Total</span>
|
||||
<span>${lineItems.reduce((sum, i) => sum + parseFloat(i.totalPrice), 0).toFixed(2)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeSection === 'notes' && ticketId && (
|
||||
<TicketNotes ticketId={ticketId} />
|
||||
)}
|
||||
|
||||
{activeSection === 'photos' && ticketId && (
|
||||
<TicketPhotos ticketId={ticketId} currentStatus={ticket.status} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,392 @@
|
||||
import { useState } from 'react'
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
|
||||
import { api } from '@/lib/api-client'
|
||||
import { repairTicketMutations, repairLineItemMutations, repairServiceTemplateListOptions } from '@/api/repairs'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||||
import { Separator } from '@/components/ui/separator'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { ArrowLeft, ArrowRight, Plus, Trash2, Check, Search } from 'lucide-react'
|
||||
import { toast } from 'sonner'
|
||||
import type { RepairServiceTemplate } from '@/types/repair'
|
||||
import type { PaginatedResponse } from '@lunarfront/shared/schemas'
|
||||
|
||||
interface RepairIntakeFormProps {
|
||||
onComplete: (ticketId: string) => void
|
||||
onCancel: () => void
|
||||
}
|
||||
|
||||
interface LineItemDraft {
|
||||
id: string
|
||||
itemType: string
|
||||
description: string
|
||||
qty: number
|
||||
unitPrice: number
|
||||
}
|
||||
|
||||
const STEPS = ['Customer', 'Item', 'Problem & Estimate', 'Review']
|
||||
const CONDITIONS = [
|
||||
{ value: 'excellent', label: 'Excellent' },
|
||||
{ value: 'good', label: 'Good' },
|
||||
{ value: 'fair', label: 'Fair' },
|
||||
{ value: 'poor', label: 'Poor' },
|
||||
]
|
||||
|
||||
export function RepairIntakeForm({ onComplete, onCancel }: RepairIntakeFormProps) {
|
||||
const queryClient = useQueryClient()
|
||||
const [step, setStep] = useState(0)
|
||||
|
||||
// Customer
|
||||
const [customerName, setCustomerName] = useState('')
|
||||
const [customerPhone, setCustomerPhone] = useState('')
|
||||
const [customerEmail, setCustomerEmail] = useState('')
|
||||
const [accountId, setAccountId] = useState<string | null>(null)
|
||||
|
||||
// Account search
|
||||
const [accountSearch, setAccountSearch] = useState('')
|
||||
const { data: accountResults } = useQuery({
|
||||
queryKey: ['accounts', 'search', accountSearch],
|
||||
queryFn: () => api.get<PaginatedResponse<{ id: string; name: string; email: string | null; phone: string | null }>>('/v1/accounts', { page: 1, limit: 10, q: accountSearch }),
|
||||
enabled: accountSearch.length >= 2,
|
||||
staleTime: 10_000,
|
||||
})
|
||||
|
||||
// Item
|
||||
const [itemDescription, setItemDescription] = useState('')
|
||||
const [serialNumber, setSerialNumber] = useState('')
|
||||
const [conditionIn, setConditionIn] = useState('')
|
||||
const [conditionInNotes, setConditionInNotes] = useState('')
|
||||
|
||||
// Problem & Estimate
|
||||
const [problemDescription, setProblemDescription] = useState('')
|
||||
const [estimatedCost, setEstimatedCost] = useState('')
|
||||
const [promisedDate, setPromisedDate] = useState('')
|
||||
const [lineItems, setLineItems] = useState<LineItemDraft[]>([])
|
||||
|
||||
// Templates for quick-add
|
||||
const { data: templatesData } = useQuery({
|
||||
...repairServiceTemplateListOptions({ page: 1, limit: 100, q: undefined, sort: 'sort_order', order: 'asc' }),
|
||||
})
|
||||
const templates = templatesData?.data ?? []
|
||||
|
||||
function addLineItem(template?: RepairServiceTemplate) {
|
||||
setLineItems([...lineItems, {
|
||||
id: crypto.randomUUID(),
|
||||
itemType: template?.itemType ?? 'labor',
|
||||
description: template?.description ?? template?.name ?? '',
|
||||
qty: 1,
|
||||
unitPrice: parseFloat(template?.defaultPrice ?? '0'),
|
||||
}])
|
||||
}
|
||||
|
||||
function removeLineItem(id: string) {
|
||||
setLineItems(lineItems.filter(i => i.id !== id))
|
||||
}
|
||||
|
||||
function updateLineItem(id: string, field: string, value: string | number) {
|
||||
setLineItems(lineItems.map(i => i.id === id ? { ...i, [field]: value } : i))
|
||||
}
|
||||
|
||||
const lineItemTotal = lineItems.reduce((sum, i) => sum + i.qty * i.unitPrice, 0)
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: async () => {
|
||||
const ticket = await repairTicketMutations.create({
|
||||
customerName,
|
||||
customerPhone: customerPhone || undefined,
|
||||
accountId: accountId || undefined,
|
||||
itemDescription: itemDescription || undefined,
|
||||
serialNumber: serialNumber || undefined,
|
||||
conditionIn: conditionIn || undefined,
|
||||
conditionInNotes: conditionInNotes || undefined,
|
||||
problemDescription,
|
||||
estimatedCost: estimatedCost ? parseFloat(estimatedCost) : undefined,
|
||||
promisedDate: promisedDate || undefined,
|
||||
})
|
||||
|
||||
// Create line items
|
||||
for (const item of lineItems) {
|
||||
await repairLineItemMutations.create(ticket.id, {
|
||||
itemType: item.itemType,
|
||||
description: item.description,
|
||||
qty: item.qty,
|
||||
unitPrice: item.unitPrice,
|
||||
})
|
||||
}
|
||||
|
||||
return ticket
|
||||
},
|
||||
onSuccess: (ticket) => {
|
||||
queryClient.invalidateQueries({ queryKey: ['repair-tickets'] })
|
||||
toast.success(`Ticket #${ticket.ticketNumber} created`)
|
||||
onComplete(ticket.id)
|
||||
},
|
||||
onError: (err) => toast.error(err.message),
|
||||
})
|
||||
|
||||
function selectAccount(acct: { id: string; name: string; email: string | null; phone: string | null }) {
|
||||
setAccountId(acct.id)
|
||||
setCustomerName(acct.name)
|
||||
if (acct.phone) setCustomerPhone(acct.phone)
|
||||
if (acct.email) setCustomerEmail(acct.email)
|
||||
setAccountSearch('')
|
||||
}
|
||||
|
||||
function canProceed() {
|
||||
if (step === 0) return customerName.trim().length > 0
|
||||
if (step === 1) return true
|
||||
if (step === 2) return problemDescription.trim().length > 0
|
||||
return true
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
{/* Step indicator */}
|
||||
<div className="flex items-center gap-2 px-4 py-3 border-b border-border shrink-0">
|
||||
<Button variant="ghost" size="sm" onClick={onCancel}>
|
||||
<ArrowLeft className="h-4 w-4 mr-1" />Cancel
|
||||
</Button>
|
||||
<div className="flex-1" />
|
||||
<div className="flex items-center gap-1">
|
||||
{STEPS.map((s, i) => (
|
||||
<div key={s} className="flex items-center gap-1">
|
||||
<div className={`h-7 px-3 rounded-full text-xs flex items-center font-medium ${
|
||||
i === step ? 'bg-primary text-primary-foreground' :
|
||||
i < step ? 'bg-primary/20 text-primary' : 'bg-muted text-muted-foreground'
|
||||
}`}>
|
||||
{i < step ? <Check className="h-3 w-3" /> : i + 1}
|
||||
<span className="ml-1.5 hidden md:inline">{s}</span>
|
||||
</div>
|
||||
{i < STEPS.length - 1 && <div className="w-4 h-px bg-border" />}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex-1" />
|
||||
</div>
|
||||
|
||||
{/* Step content */}
|
||||
<div className="flex-1 overflow-y-auto p-4 max-w-2xl mx-auto w-full">
|
||||
{step === 0 && (
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold">Customer</h3>
|
||||
<div className="space-y-2">
|
||||
<Label>Search existing accounts</Label>
|
||||
<div className="relative">
|
||||
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Search by name..."
|
||||
value={accountSearch}
|
||||
onChange={(e) => setAccountSearch(e.target.value)}
|
||||
className="pl-9"
|
||||
/>
|
||||
</div>
|
||||
{accountSearch.length >= 2 && accountResults?.data && accountResults.data.length > 0 && (
|
||||
<div className="border rounded-md max-h-40 overflow-y-auto">
|
||||
{accountResults.data.map((acct) => (
|
||||
<button
|
||||
key={acct.id}
|
||||
className="w-full text-left px-3 py-2 text-sm hover:bg-muted transition-colors"
|
||||
onClick={() => selectAccount(acct)}
|
||||
>
|
||||
<span className="font-medium">{acct.name}</span>
|
||||
{acct.phone && <span className="text-muted-foreground ml-2">{acct.phone}</span>}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Separator />
|
||||
<p className="text-sm text-muted-foreground">Or enter walk-in customer info:</p>
|
||||
<div className="space-y-2">
|
||||
<Label>Name *</Label>
|
||||
<Input value={customerName} onChange={(e) => setCustomerName(e.target.value)} placeholder="Customer name" />
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Phone</Label>
|
||||
<Input value={customerPhone} onChange={(e) => setCustomerPhone(e.target.value)} placeholder="555-1234" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Email</Label>
|
||||
<Input type="email" value={customerEmail} onChange={(e) => setCustomerEmail(e.target.value)} placeholder="email@example.com" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{step === 1 && (
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold">Item Details</h3>
|
||||
<div className="space-y-2">
|
||||
<Label>Item Description</Label>
|
||||
<Input value={itemDescription} onChange={(e) => setItemDescription(e.target.value)} placeholder="e.g. Fender Stratocaster, iPhone 15, etc." />
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Serial Number</Label>
|
||||
<Input value={serialNumber} onChange={(e) => setSerialNumber(e.target.value)} placeholder="Optional" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Condition</Label>
|
||||
<Select value={conditionIn} onValueChange={setConditionIn}>
|
||||
<SelectTrigger><SelectValue placeholder="Select condition" /></SelectTrigger>
|
||||
<SelectContent>
|
||||
{CONDITIONS.map(c => <SelectItem key={c.value} value={c.value}>{c.label}</SelectItem>)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Condition Notes</Label>
|
||||
<Textarea value={conditionInNotes} onChange={(e) => setConditionInNotes(e.target.value)} placeholder="Describe any existing damage, scratches, etc." rows={3} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{step === 2 && (
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold">Problem & Estimate</h3>
|
||||
<div className="space-y-2">
|
||||
<Label>Problem Description *</Label>
|
||||
<Textarea value={problemDescription} onChange={(e) => setProblemDescription(e.target.value)} placeholder="Describe what needs to be repaired..." rows={3} />
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Estimated Cost</Label>
|
||||
<Input type="number" step="0.01" value={estimatedCost} onChange={(e) => setEstimatedCost(e.target.value)} placeholder="0.00" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Promised Date</Label>
|
||||
<Input type="date" value={promisedDate} onChange={(e) => setPromisedDate(e.target.value)} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<Label>Line Items</Label>
|
||||
<Button variant="outline" size="sm" onClick={() => addLineItem()}>
|
||||
<Plus className="h-3.5 w-3.5 mr-1" />Add Item
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Template quick-add */}
|
||||
{templates.length > 0 && (
|
||||
<div className="flex gap-1.5 flex-wrap">
|
||||
{templates.slice(0, 10).map(t => (
|
||||
<Button key={t.id} variant="outline" size="sm" className="h-7 text-xs" onClick={() => addLineItem(t)}>
|
||||
{t.name} — ${t.defaultPrice}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{lineItems.map((item) => (
|
||||
<div key={item.id} className="flex items-end gap-2">
|
||||
<div className="w-24 space-y-1">
|
||||
<Label className="text-xs">Type</Label>
|
||||
<Select value={item.itemType} onValueChange={(v) => updateLineItem(item.id, 'itemType', v)}>
|
||||
<SelectTrigger className="h-8 text-xs"><SelectValue /></SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="labor">Labor</SelectItem>
|
||||
<SelectItem value="part">Part</SelectItem>
|
||||
<SelectItem value="flat_rate">Flat Rate</SelectItem>
|
||||
<SelectItem value="misc">Misc</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="flex-1 space-y-1">
|
||||
<Label className="text-xs">Description</Label>
|
||||
<Input className="h-8 text-sm" value={item.description} onChange={(e) => updateLineItem(item.id, 'description', e.target.value)} />
|
||||
</div>
|
||||
<div className="w-16 space-y-1">
|
||||
<Label className="text-xs">Qty</Label>
|
||||
<Input className="h-8 text-sm" type="number" min={1} value={item.qty} onChange={(e) => updateLineItem(item.id, 'qty', parseInt(e.target.value) || 1)} />
|
||||
</div>
|
||||
<div className="w-24 space-y-1">
|
||||
<Label className="text-xs">Price</Label>
|
||||
<Input className="h-8 text-sm" type="number" step="0.01" value={item.unitPrice} onChange={(e) => updateLineItem(item.id, 'unitPrice', parseFloat(e.target.value) || 0)} />
|
||||
</div>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8 shrink-0" onClick={() => removeLineItem(item.id)}>
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{lineItems.length > 0 && (
|
||||
<div className="text-right text-sm font-semibold">
|
||||
Line Item Total: ${lineItemTotal.toFixed(2)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{step === 3 && (
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold">Review</h3>
|
||||
<div className="space-y-3 text-sm">
|
||||
<div>
|
||||
<p className="text-muted-foreground text-xs">Customer</p>
|
||||
<p className="font-medium">{customerName}</p>
|
||||
{customerPhone && <p className="text-muted-foreground">{customerPhone}</p>}
|
||||
</div>
|
||||
{itemDescription && (
|
||||
<div>
|
||||
<p className="text-muted-foreground text-xs">Item</p>
|
||||
<p>{itemDescription}{serialNumber ? ` (S/N: ${serialNumber})` : ''}</p>
|
||||
{conditionIn && <Badge variant="outline" className="text-xs mt-1">{conditionIn}</Badge>}
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<p className="text-muted-foreground text-xs">Problem</p>
|
||||
<p>{problemDescription}</p>
|
||||
</div>
|
||||
{(estimatedCost || promisedDate) && (
|
||||
<div className="flex gap-6">
|
||||
{estimatedCost && <div><p className="text-muted-foreground text-xs">Estimate</p><p className="font-medium">${estimatedCost}</p></div>}
|
||||
{promisedDate && <div><p className="text-muted-foreground text-xs">Promised</p><p>{new Date(promisedDate + 'T00:00:00').toLocaleDateString()}</p></div>}
|
||||
</div>
|
||||
)}
|
||||
{lineItems.length > 0 && (
|
||||
<div>
|
||||
<p className="text-muted-foreground text-xs mb-1">Line Items</p>
|
||||
{lineItems.map(i => (
|
||||
<div key={i.id} className="flex justify-between py-0.5">
|
||||
<span>{i.description} x{i.qty}</span>
|
||||
<span className="font-medium">${(i.qty * i.unitPrice).toFixed(2)}</span>
|
||||
</div>
|
||||
))}
|
||||
<Separator className="my-1" />
|
||||
<div className="flex justify-between font-semibold">
|
||||
<span>Total</span>
|
||||
<span>${lineItemTotal.toFixed(2)}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<div className="flex items-center justify-between p-4 border-t border-border shrink-0">
|
||||
<Button variant="outline" onClick={() => step > 0 ? setStep(step - 1) : onCancel()}>
|
||||
<ArrowLeft className="h-4 w-4 mr-1" />
|
||||
{step === 0 ? 'Cancel' : 'Back'}
|
||||
</Button>
|
||||
{step < STEPS.length - 1 ? (
|
||||
<Button onClick={() => setStep(step + 1)} disabled={!canProceed()}>
|
||||
Next <ArrowRight className="h-4 w-4 ml-1" />
|
||||
</Button>
|
||||
) : (
|
||||
<Button onClick={() => createMutation.mutate()} disabled={createMutation.isPending}>
|
||||
{createMutation.isPending ? 'Creating...' : 'Create Ticket'}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,135 @@
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { api } from '@/lib/api-client'
|
||||
import type { RepairTicket } from '@/types/repair'
|
||||
import type { PaginatedResponse } from '@lunarfront/shared/schemas'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Plus, Search } from 'lucide-react'
|
||||
import { useState } from 'react'
|
||||
|
||||
const STATUS_COLORS: Record<string, string> = {
|
||||
new: 'bg-blue-500/10 text-blue-500',
|
||||
in_transit: 'bg-blue-500/10 text-blue-500',
|
||||
intake: 'bg-blue-500/10 text-blue-500',
|
||||
diagnosing: 'bg-yellow-500/10 text-yellow-500',
|
||||
pending_approval: 'bg-yellow-500/10 text-yellow-500',
|
||||
approved: 'bg-orange-500/10 text-orange-500',
|
||||
in_progress: 'bg-orange-500/10 text-orange-500',
|
||||
pending_parts: 'bg-orange-500/10 text-orange-500',
|
||||
ready: 'bg-green-500/10 text-green-500',
|
||||
picked_up: 'bg-muted text-muted-foreground',
|
||||
delivered: 'bg-muted text-muted-foreground',
|
||||
cancelled: 'bg-destructive/10 text-destructive',
|
||||
}
|
||||
|
||||
const STATUS_LABELS: Record<string, string> = {
|
||||
new: 'New',
|
||||
in_transit: 'In Transit',
|
||||
intake: 'Intake',
|
||||
diagnosing: 'Diagnosing',
|
||||
pending_approval: 'Pending Approval',
|
||||
approved: 'Approved',
|
||||
in_progress: 'In Progress',
|
||||
pending_parts: 'Pending Parts',
|
||||
ready: 'Ready',
|
||||
picked_up: 'Picked Up',
|
||||
delivered: 'Delivered',
|
||||
cancelled: 'Cancelled',
|
||||
}
|
||||
|
||||
interface RepairQueuePanelProps {
|
||||
selectedTicketId: string | null
|
||||
onSelectTicket: (id: string) => void
|
||||
onNewIntake: () => void
|
||||
statusFilter: string[] | null
|
||||
}
|
||||
|
||||
export function RepairQueuePanel({ selectedTicketId, onSelectTicket, onNewIntake, statusFilter }: RepairQueuePanelProps) {
|
||||
const [search, setSearch] = useState('')
|
||||
|
||||
const { data, isLoading } = useQuery({
|
||||
queryKey: ['repair-tickets', 'station-queue', search, statusFilter],
|
||||
queryFn: () => api.get<PaginatedResponse<RepairTicket>>('/v1/repair-tickets', {
|
||||
page: 1,
|
||||
limit: 100,
|
||||
q: search || undefined,
|
||||
sort: 'created_at',
|
||||
order: 'desc',
|
||||
...(statusFilter ? { status: statusFilter.join(',') } : {}),
|
||||
}),
|
||||
staleTime: 30_000,
|
||||
refetchInterval: 30_000,
|
||||
})
|
||||
|
||||
const tickets = data?.data ?? []
|
||||
|
||||
function timeAgo(dateStr: string) {
|
||||
const diff = Date.now() - new Date(dateStr).getTime()
|
||||
const hours = Math.floor(diff / 3600000)
|
||||
if (hours < 1) return 'Just now'
|
||||
if (hours < 24) return `${hours}h ago`
|
||||
const days = Math.floor(hours / 24)
|
||||
return `${days}d ago`
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<div className="p-3 space-y-2 shrink-0">
|
||||
<Button className="w-full h-11 gap-2" onClick={onNewIntake}>
|
||||
<Plus className="h-4 w-4" />
|
||||
New Intake
|
||||
</Button>
|
||||
<div className="relative">
|
||||
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Search tickets..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="pl-9 h-9"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{isLoading ? (
|
||||
<div className="p-3 space-y-2">
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<div key={i} className="h-16 bg-muted animate-pulse rounded-lg" />
|
||||
))}
|
||||
</div>
|
||||
) : tickets.length === 0 ? (
|
||||
<div className="p-6 text-center text-muted-foreground text-sm">
|
||||
No tickets found
|
||||
</div>
|
||||
) : (
|
||||
<div className="px-2 pb-2 space-y-1">
|
||||
{tickets.map((ticket) => (
|
||||
<button
|
||||
key={ticket.id}
|
||||
className={`w-full text-left p-3 rounded-lg transition-colors ${
|
||||
selectedTicketId === ticket.id
|
||||
? 'bg-primary/10 border border-primary/20'
|
||||
: 'hover:bg-muted border border-transparent'
|
||||
}`}
|
||||
onClick={() => onSelectTicket(ticket.id)}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<span className="text-sm font-medium">#{ticket.ticketNumber}</span>
|
||||
<Badge variant="outline" className={`text-[10px] ${STATUS_COLORS[ticket.status] ?? ''}`}>
|
||||
{STATUS_LABELS[ticket.status] ?? ticket.status}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="text-sm text-foreground truncate">{ticket.customerName}</div>
|
||||
<div className="flex items-center justify-between mt-1">
|
||||
<span className="text-xs text-muted-foreground truncate">{ticket.itemDescription ?? 'No item'}</span>
|
||||
<span className="text-xs text-muted-foreground shrink-0 ml-2">{timeAgo(ticket.createdAt)}</span>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { api } from '@/lib/api-client'
|
||||
import type { RepairTicket } from '@/types/repair'
|
||||
import type { PaginatedResponse } from '@lunarfront/shared/schemas'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
|
||||
const STATUS_GROUPS = [
|
||||
{ label: 'New', statuses: ['new', 'in_transit', 'intake'], color: 'bg-blue-500/10 text-blue-500 border-blue-500/20' },
|
||||
{ label: 'Diagnosing', statuses: ['diagnosing', 'pending_approval'], color: 'bg-yellow-500/10 text-yellow-500 border-yellow-500/20' },
|
||||
{ label: 'In Progress', statuses: ['approved', 'in_progress', 'pending_parts'], color: 'bg-orange-500/10 text-orange-500 border-orange-500/20' },
|
||||
{ label: 'Ready', statuses: ['ready'], color: 'bg-green-500/10 text-green-500 border-green-500/20' },
|
||||
]
|
||||
|
||||
interface RepairStatusBarProps {
|
||||
activeFilter: string | null
|
||||
onFilterChange: (statuses: string[] | null) => void
|
||||
}
|
||||
|
||||
export function RepairStatusBar({ activeFilter, onFilterChange }: RepairStatusBarProps) {
|
||||
// Fetch all non-terminal tickets for counts
|
||||
const { data } = useQuery({
|
||||
queryKey: ['repair-tickets', 'station-counts'],
|
||||
queryFn: () => api.get<PaginatedResponse<RepairTicket>>('/v1/repair-tickets', { page: 1, limit: 1, q: undefined, sort: undefined, order: 'asc' }),
|
||||
staleTime: 30_000,
|
||||
})
|
||||
|
||||
// We need per-status counts — fetch a larger list for counting
|
||||
const { data: allData } = useQuery({
|
||||
queryKey: ['repair-tickets', 'station-all'],
|
||||
queryFn: () => api.get<PaginatedResponse<RepairTicket>>('/v1/repair-tickets', { page: 1, limit: 500, q: undefined, sort: undefined, order: 'asc' }),
|
||||
staleTime: 30_000,
|
||||
})
|
||||
|
||||
const tickets = allData?.data ?? []
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-2 px-3 py-2 border-b border-border bg-card/50 shrink-0">
|
||||
<button
|
||||
className={`text-xs px-2 py-1 rounded-md transition-colors ${!activeFilter ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:text-foreground'}`}
|
||||
onClick={() => onFilterChange(null)}
|
||||
>
|
||||
All ({data?.pagination?.total ?? tickets.length})
|
||||
</button>
|
||||
{STATUS_GROUPS.map((group) => {
|
||||
const count = tickets.filter(t => group.statuses.includes(t.status)).length
|
||||
const isActive = activeFilter === group.label
|
||||
return (
|
||||
<button
|
||||
key={group.label}
|
||||
className={`flex items-center gap-1.5 text-xs px-2 py-1 rounded-md transition-colors ${isActive ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:text-foreground'}`}
|
||||
onClick={() => onFilterChange(isActive ? null : group.statuses)}
|
||||
>
|
||||
{group.label}
|
||||
{count > 0 && (
|
||||
<Badge variant="outline" className={`text-[10px] h-4 px-1 ${group.color}`}>
|
||||
{count}
|
||||
</Badge>
|
||||
)}
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
import { RepairDeskView } from './repair-desk-view'
|
||||
|
||||
interface RepairsStationProps {
|
||||
permissions: string[]
|
||||
}
|
||||
|
||||
export function RepairsStation({ permissions }: RepairsStationProps) {
|
||||
const canEdit = permissions.includes('repairs.edit')
|
||||
|
||||
// TODO: Phase 3 — if user only has repairs.view (technician), show RepairTechView instead
|
||||
return <RepairDeskView canEdit={canEdit} />
|
||||
}
|
||||
177
packages/admin/src/components/station/station-shell.tsx
Normal file
177
packages/admin/src/components/station/station-shell.tsx
Normal file
@@ -0,0 +1,177 @@
|
||||
import { useEffect, useRef, useCallback, useState } from 'react'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { queryOptions } from '@tanstack/react-query'
|
||||
import { api } from '@/lib/api-client'
|
||||
import { usePOSStore } from '@/stores/pos.store'
|
||||
import { useStationStore } from '@/stores/station.store'
|
||||
import { moduleListOptions } from '@/api/modules'
|
||||
import { currentDrawerOptions } from '@/api/pos'
|
||||
import { POSRegister } from '@/components/pos/pos-register'
|
||||
import { POSLockScreen } from '@/components/pos/pos-lock-screen'
|
||||
import { StationTopBar } from './station-top-bar'
|
||||
import { RepairsStation } from '@/components/station-repairs/repairs-station'
|
||||
import { LessonsStation } from '@/components/station-lessons/lessons-station'
|
||||
|
||||
interface Location {
|
||||
id: string
|
||||
name: string
|
||||
}
|
||||
|
||||
interface AppConfigEntry {
|
||||
key: string
|
||||
value: string | null
|
||||
}
|
||||
|
||||
function locationsOptions() {
|
||||
return queryOptions({
|
||||
queryKey: ['locations'],
|
||||
queryFn: () => api.get<{ data: Location[] }>('/v1/locations'),
|
||||
})
|
||||
}
|
||||
|
||||
function configOptions(key: string) {
|
||||
return queryOptions({
|
||||
queryKey: ['config', key],
|
||||
queryFn: async (): Promise<string | null> => {
|
||||
try {
|
||||
const entry = await api.get<AppConfigEntry>(`/v1/config/${key}`)
|
||||
return entry.value
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
export function StationShell() {
|
||||
const { locationId, setLocation, locked, lock, touchActivity, token, setDrawerSession } = usePOSStore()
|
||||
const { activeTab, setActiveTab } = useStationStore()
|
||||
|
||||
// Fetch lock timeout from config
|
||||
const { data: lockTimeoutStr } = useQuery({
|
||||
...configOptions('pos_lock_timeout'),
|
||||
enabled: !!token,
|
||||
})
|
||||
const lockTimeoutMinutes = parseInt(lockTimeoutStr ?? '15') || 15
|
||||
|
||||
// Auto-lock timer
|
||||
const timerRef = useRef<ReturnType<typeof setInterval> | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (locked || lockTimeoutMinutes === 0) {
|
||||
if (timerRef.current) clearInterval(timerRef.current)
|
||||
return
|
||||
}
|
||||
|
||||
timerRef.current = setInterval(() => {
|
||||
const { lastActivity, locked: isLocked } = usePOSStore.getState()
|
||||
if (!isLocked && Date.now() - lastActivity > lockTimeoutMinutes * 60_000) {
|
||||
lock()
|
||||
}
|
||||
}, 30_000)
|
||||
|
||||
return () => {
|
||||
if (timerRef.current) clearInterval(timerRef.current)
|
||||
}
|
||||
}, [locked, lockTimeoutMinutes, lock])
|
||||
|
||||
// Track activity
|
||||
const handleActivity = useCallback(() => {
|
||||
if (!locked) touchActivity()
|
||||
}, [locked, touchActivity])
|
||||
|
||||
// Fetch locations
|
||||
const { data: locationsData } = useQuery({
|
||||
...locationsOptions(),
|
||||
enabled: !!token,
|
||||
})
|
||||
const locations = locationsData?.data ?? []
|
||||
|
||||
// Auto-select first location
|
||||
useEffect(() => {
|
||||
if (!locationId && locations.length > 0) {
|
||||
setLocation(locations[0].id)
|
||||
}
|
||||
}, [locationId, locations, setLocation])
|
||||
|
||||
// Fetch enabled modules
|
||||
const { data: modulesData } = useQuery({
|
||||
...moduleListOptions(),
|
||||
enabled: !!token,
|
||||
})
|
||||
const enabledModules = new Set(
|
||||
(modulesData?.data ?? []).filter((m) => m.enabled && m.licensed).map((m) => m.slug),
|
||||
)
|
||||
|
||||
// Fetch permissions for current user
|
||||
const [permissions, setPermissions] = useState<string[]>([])
|
||||
const { data: permData } = useQuery({
|
||||
queryKey: ['me', 'permissions'],
|
||||
queryFn: () => api.get<{ permissions: string[] }>('/v1/me/permissions'),
|
||||
enabled: !!token,
|
||||
})
|
||||
useEffect(() => {
|
||||
if (permData?.permissions) setPermissions(permData.permissions)
|
||||
}, [permData])
|
||||
|
||||
// Auto-select first available tab based on permissions + modules
|
||||
useEffect(() => {
|
||||
if (!token || !permData) return
|
||||
const perms = permData.permissions ?? []
|
||||
const tabs = [
|
||||
{ key: 'pos' as const, perm: 'pos.view', mod: 'pos' },
|
||||
{ key: 'repairs' as const, perm: 'repairs.view', mod: 'repairs' },
|
||||
{ key: 'lessons' as const, perm: 'lessons.view', mod: 'lessons' },
|
||||
]
|
||||
const available = tabs.filter(t => perms.includes(t.perm) && enabledModules.has(t.mod))
|
||||
if (available.length > 0 && !available.find(t => t.key === activeTab)) {
|
||||
setActiveTab(available[0].key)
|
||||
}
|
||||
}, [token, permData, enabledModules, activeTab, setActiveTab])
|
||||
|
||||
// Fetch drawer for POS tab (needed in top bar)
|
||||
const { data: drawer } = useQuery({
|
||||
...currentDrawerOptions(locationId),
|
||||
retry: false,
|
||||
enabled: !!locationId && !!token,
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
if (drawer?.id && drawer.status === 'open') {
|
||||
setDrawerSession(drawer.id)
|
||||
} else {
|
||||
setDrawerSession(null)
|
||||
}
|
||||
}, [drawer, setDrawerSession])
|
||||
|
||||
const hasPermission = (perm: string) => permissions.includes(perm)
|
||||
|
||||
return (
|
||||
<div
|
||||
className="relative flex flex-col h-full"
|
||||
onPointerDown={handleActivity}
|
||||
onKeyDown={handleActivity}
|
||||
>
|
||||
{locked && <POSLockScreen />}
|
||||
<StationTopBar
|
||||
locations={locations}
|
||||
locationId={locationId}
|
||||
onLocationChange={setLocation}
|
||||
drawer={drawer ?? null}
|
||||
permissions={permissions}
|
||||
enabledModules={enabledModules}
|
||||
/>
|
||||
<div className="flex-1 min-h-0 overflow-hidden">
|
||||
{activeTab === 'pos' && enabledModules.has('pos') && hasPermission('pos.view') && (
|
||||
<POSRegister embedded />
|
||||
)}
|
||||
{activeTab === 'repairs' && enabledModules.has('repairs') && hasPermission('repairs.view') && (
|
||||
<RepairsStation permissions={permissions} />
|
||||
)}
|
||||
{activeTab === 'lessons' && enabledModules.has('lessons') && hasPermission('lessons.view') && (
|
||||
<LessonsStation permissions={permissions} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
127
packages/admin/src/components/station/station-top-bar.tsx
Normal file
127
packages/admin/src/components/station/station-top-bar.tsx
Normal file
@@ -0,0 +1,127 @@
|
||||
import { Link } from '@tanstack/react-router'
|
||||
import { usePOSStore } from '@/stores/pos.store'
|
||||
import { useStationStore } from '@/stores/station.store'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||||
import { ArrowLeft, Lock, DollarSign, Receipt, FileText, ShoppingCart, Wrench, GraduationCap } from 'lucide-react'
|
||||
import type { DrawerSession } from '@/api/pos'
|
||||
import { useState } from 'react'
|
||||
import { POSDrawerDialog } from '@/components/pos/pos-drawer-dialog'
|
||||
|
||||
type StationTab = 'pos' | 'repairs' | 'lessons'
|
||||
|
||||
const TAB_CONFIG: { key: StationTab; label: string; icon: typeof ShoppingCart; permission: string; module: string }[] = [
|
||||
{ key: 'pos', label: 'POS', icon: ShoppingCart, permission: 'pos.view', module: 'pos' },
|
||||
{ key: 'repairs', label: 'Repairs', icon: Wrench, permission: 'repairs.view', module: 'repairs' },
|
||||
{ key: 'lessons', label: 'Lessons', icon: GraduationCap, permission: 'lessons.view', module: 'lessons' },
|
||||
]
|
||||
|
||||
interface StationTopBarProps {
|
||||
locations: { id: string; name: string }[]
|
||||
locationId: string | null
|
||||
onLocationChange: (id: string) => void
|
||||
drawer: DrawerSession | null
|
||||
permissions: string[]
|
||||
enabledModules: Set<string>
|
||||
}
|
||||
|
||||
export function StationTopBar({ locations, locationId, onLocationChange, drawer, permissions, enabledModules }: StationTopBarProps) {
|
||||
const cashier = usePOSStore((s) => s.cashier)
|
||||
const lockFn = usePOSStore((s) => s.lock)
|
||||
const receiptFormat = usePOSStore((s) => s.receiptFormat)
|
||||
const setReceiptFormat = usePOSStore((s) => s.setReceiptFormat)
|
||||
const { activeTab, setActiveTab } = useStationStore()
|
||||
const [drawerDialogOpen, setDrawerDialogOpen] = useState(false)
|
||||
|
||||
const drawerOpen = drawer?.status === 'open'
|
||||
const isThermal = receiptFormat === 'thermal'
|
||||
|
||||
const hasPermission = (perm: string) => permissions.includes(perm)
|
||||
const visibleTabs = TAB_CONFIG.filter(t => hasPermission(t.permission) && enabledModules.has(t.module))
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="h-12 border-b border-border bg-card flex items-center px-3 shrink-0 gap-2">
|
||||
{/* Left: back link */}
|
||||
<Link to="/login" className="flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground mr-2">
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
<span className="hidden sm:inline">Admin</span>
|
||||
</Link>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="flex items-center gap-1 bg-muted rounded-lg p-0.5">
|
||||
{visibleTabs.map((tab) => (
|
||||
<Button
|
||||
key={tab.key}
|
||||
variant={activeTab === tab.key ? 'default' : 'ghost'}
|
||||
size="sm"
|
||||
className={`h-8 gap-1.5 text-xs ${activeTab === tab.key ? '' : 'text-muted-foreground hover:text-foreground'}`}
|
||||
onClick={() => setActiveTab(tab.key)}
|
||||
>
|
||||
<tab.icon className="h-3.5 w-3.5" />
|
||||
{tab.label}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Spacer */}
|
||||
<div className="flex-1" />
|
||||
|
||||
{/* Location */}
|
||||
{locations.length > 1 ? (
|
||||
<Select value={locationId ?? ''} onValueChange={onLocationChange}>
|
||||
<SelectTrigger className="h-8 w-40 text-sm">
|
||||
<SelectValue placeholder="Location" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{locations.map((loc) => (
|
||||
<SelectItem key={loc.id} value={loc.id}>{loc.name}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
) : locations.length === 1 ? (
|
||||
<span className="text-sm text-muted-foreground">{locations[0].name}</span>
|
||||
) : null}
|
||||
|
||||
{/* POS-specific controls */}
|
||||
{activeTab === 'pos' && (
|
||||
<>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-8 gap-1.5 text-xs text-muted-foreground"
|
||||
onClick={() => setReceiptFormat(isThermal ? 'full' : 'thermal')}
|
||||
title={isThermal ? 'Thermal' : 'Full Page'}
|
||||
>
|
||||
{isThermal ? <Receipt className="h-3.5 w-3.5" /> : <FileText className="h-3.5 w-3.5" />}
|
||||
</Button>
|
||||
|
||||
<Button variant="ghost" size="sm" className="gap-1.5" onClick={() => setDrawerDialogOpen(true)}>
|
||||
<DollarSign className="h-4 w-4" />
|
||||
{drawerOpen ? (
|
||||
<Badge variant="default" className="text-xs">Open</Badge>
|
||||
) : (
|
||||
<Badge variant="outline" className="text-xs">Closed</Badge>
|
||||
)}
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Cashier + Lock */}
|
||||
{cashier && (
|
||||
<span className="text-sm text-muted-foreground">{cashier.firstName}</span>
|
||||
)}
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8" onClick={lockFn} title="Lock Station">
|
||||
<Lock className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<POSDrawerDialog
|
||||
open={drawerDialogOpen}
|
||||
onOpenChange={setDrawerDialogOpen}
|
||||
drawer={drawer}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user