082e388799
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>
65 lines
2.8 KiB
TypeScript
65 lines
2.8 KiB
TypeScript
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>
|
|
)
|
|
}
|