Luciano Milani
843 lines
38 KiB
TypeScript
843 lines
38 KiB
TypeScript
import { useEffect, useState } from 'react'
|
|
import { useParams, Link } from 'react-router'
|
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
|
import { useForm, type Resolver } from 'react-hook-form'
|
|
import { zodResolver } from '@hookform/resolvers/zod'
|
|
import { z } from 'zod'
|
|
import { apiFetch, apiFetchBlob } from '@/lib/api'
|
|
import { Badge } from '@/components/ui/badge'
|
|
import { Button } from '@/components/ui/button'
|
|
import { ConfirmActionDialog } from '@/components/ui/confirm-action-dialog'
|
|
import { Input } from '@/components/ui/input'
|
|
import { Label } from '@/components/ui/label'
|
|
import { useTheme } from '@/hooks/useTheme'
|
|
import { WORK_ORDER_STATUS_LABEL, workOrderStatusBadgeClass } from '@/lib/workOrderStatus'
|
|
import type { WorkOrderDetail, CatalogItem, Staff, Client, Vehicle } from '@/lib/types'
|
|
|
|
const CATEGORY_LABEL: Record<string, string> = {
|
|
mao_de_obra: 'Mão de Obra',
|
|
diagnostico: 'Diagnóstico',
|
|
manutencao: 'Manutenção',
|
|
pecas_mecanicas: 'Peças Mecânicas',
|
|
pneus_jantes: 'Pneus / Jantes',
|
|
eletrica: 'Elétrica / Eletrónica',
|
|
fluidos: 'Fluidos / Óleos',
|
|
ar_condicionado: 'Ar Condicionado',
|
|
carrocaria: 'Carroçaria / Pintura',
|
|
consumiveis: 'Consumíveis',
|
|
acessorios: 'Acessórios',
|
|
outro: 'Outro',
|
|
}
|
|
|
|
const TRANSITIONS: Record<string, string[]> = {
|
|
quote: ['open', 'cancelled'],
|
|
open: ['in_progress', 'cancelled'],
|
|
in_progress: ['completed', 'cancelled'],
|
|
completed: ['invoiced', 'cancelled'],
|
|
invoiced: [],
|
|
cancelled: [],
|
|
}
|
|
const ETA_LABEL: Record<number, string> = {
|
|
1: '1 dia',
|
|
2: '2 dias',
|
|
3: '3 dias',
|
|
7: '7 dias',
|
|
15: '15 dias',
|
|
30: '30 dias',
|
|
31: '+ de 30 dias',
|
|
}
|
|
const ETA_OPTIONS = [1, 2, 3, 7, 15, 30, 31]
|
|
const PAYMENT_METHOD_OPTIONS = [
|
|
{ value: 'numerario', label: 'Numerário' },
|
|
{ value: 'multibanco', label: 'Multibanco' },
|
|
{ value: 'transferencia_bancaria', label: 'Transferência Bancária' },
|
|
{ value: 'mb_way', label: 'MB WAY' },
|
|
{ value: 'cartao_debito', label: 'Cartão de Débito' },
|
|
{ value: 'cartao_credito', label: 'Cartão de Crédito' },
|
|
{ value: 'cheque', label: 'Cheque' },
|
|
{ value: 'outro', label: 'Outro' },
|
|
]
|
|
const PAYMENT_METHOD_LABEL: Record<string, string> = Object.fromEntries(PAYMENT_METHOD_OPTIONS.map((o) => [o.value, o.label]))
|
|
|
|
function formatDateSafe(value?: string | null, withTime = false): string {
|
|
if (!value) return '—'
|
|
const d = new Date(value)
|
|
if (Number.isNaN(d.getTime())) return '—'
|
|
return withTime
|
|
? new Intl.DateTimeFormat('pt-PT', { dateStyle: 'short', timeStyle: 'short' }).format(d)
|
|
: new Intl.DateTimeFormat('pt-PT').format(d)
|
|
}
|
|
|
|
const metaSchema = z.object({
|
|
client_id: z.string(),
|
|
vehicle_id: z.string(),
|
|
internal_notes: z.string(),
|
|
client_notes: z.string(),
|
|
eta_days: z.coerce.number().int(),
|
|
real_deadline: z.string(),
|
|
payment_method: z.string(),
|
|
payment_date: z.string(),
|
|
})
|
|
type MetaForm = z.infer<typeof metaSchema>
|
|
|
|
// ─── Item form ────────────────────────────────────────────────────────────────
|
|
|
|
const itemSchema = z.object({
|
|
catalog_item_id: z.string(),
|
|
description: z.string().min(1, 'Descrição obrigatória'),
|
|
change_justification: z.string(),
|
|
qty: z.coerce.number().positive('Quantidade deve ser positiva'),
|
|
unit_price: z.coerce.number().min(0),
|
|
discount_pct: z.coerce.number().min(0).max(100),
|
|
})
|
|
type ItemForm = z.infer<typeof itemSchema>
|
|
const emptyItem: ItemForm = { catalog_item_id: '', description: '', change_justification: '', qty: 1, unit_price: 0, discount_pct: 0 }
|
|
|
|
// ─── Staff hours form ─────────────────────────────────────────────────────────
|
|
|
|
const shSchema = z.object({
|
|
staff_id: z.string().min(1, 'Seleccione um técnico'),
|
|
hours: z.coerce.number().positive('Horas deve ser positivo'),
|
|
cost_per_hour: z.coerce.number().min(0),
|
|
})
|
|
type SHForm = z.infer<typeof shSchema>
|
|
const emptySH: SHForm = { staff_id: '', hours: 1, cost_per_hour: 0 }
|
|
|
|
// ─── Page ─────────────────────────────────────────────────────────────────────
|
|
|
|
export default function WorkOrderDetailPage() {
|
|
const { id } = useParams<{ id: string }>()
|
|
const { theme } = useTheme('ui_theme', 'dark')
|
|
const isLight = theme === 'light'
|
|
const qc = useQueryClient()
|
|
const [showAddItem, setShowAddItem] = useState(false)
|
|
const [showAddStaff, setShowAddStaff] = useState(false)
|
|
const [showMetaEdit, setShowMetaEdit] = useState(false)
|
|
const [confirmAction, setConfirmAction] = useState<null | { type: 'cancel' | 'remove_item' | 'remove_staff'; id?: string }>(null)
|
|
|
|
const { data: detail, isLoading, error: detailError } = useQuery<WorkOrderDetail>({
|
|
queryKey: ['work-order', id],
|
|
queryFn: () => apiFetch<WorkOrderDetail>(`/work-orders/${id}`),
|
|
})
|
|
|
|
const { data: catalogItems = [] } = useQuery<CatalogItem[]>({
|
|
queryKey: ['catalog'],
|
|
queryFn: () => apiFetch<CatalogItem[]>('/catalog'),
|
|
})
|
|
|
|
const { data: staffList = [] } = useQuery<Staff[]>({
|
|
queryKey: ['staff'],
|
|
queryFn: () => apiFetch<Staff[]>('/staff'),
|
|
})
|
|
const { data: invoices = [] } = useQuery<{ id: string; work_order_id: string; type: 'quote' | 'invoice'; issued_at: string }[]>({
|
|
queryKey: ['invoices', 'work-order-detail'],
|
|
queryFn: () => apiFetch('/invoices'),
|
|
})
|
|
const { data: clients = [] } = useQuery<Client[]>({
|
|
queryKey: ['clients'],
|
|
queryFn: () => apiFetch<Client[]>('/clients'),
|
|
})
|
|
const {
|
|
register: regMeta,
|
|
handleSubmit: handleMeta,
|
|
watch: watchMeta,
|
|
reset: resetMeta,
|
|
formState: { errors: metaErrors },
|
|
} = useForm<MetaForm>({
|
|
resolver: zodResolver(metaSchema) as Resolver<MetaForm>,
|
|
defaultValues: {
|
|
client_id: '',
|
|
vehicle_id: '',
|
|
internal_notes: '',
|
|
client_notes: '',
|
|
eta_days: 1,
|
|
real_deadline: '',
|
|
payment_method: '',
|
|
payment_date: '',
|
|
},
|
|
})
|
|
const selectedMetaClient = watchMeta('client_id')
|
|
const { data: vehicles = [] } = useQuery<Vehicle[]>({
|
|
queryKey: ['vehicles', selectedMetaClient || detail?.client_id || '', 'wo-meta'],
|
|
queryFn: () => apiFetch<Vehicle[]>(`/clients/${selectedMetaClient || detail?.client_id}/vehicles`),
|
|
enabled: !!(selectedMetaClient || detail?.client_id),
|
|
})
|
|
|
|
// lookup maps
|
|
const catalogMap = Object.fromEntries(catalogItems.map(c => [c.id, c]))
|
|
const staffMap = Object.fromEntries(staffList.map(s => [s.id, s]))
|
|
|
|
// ── Transitions ──────────────────────────────────────────────────────────────
|
|
|
|
const transition = useMutation({
|
|
mutationFn: (status: string) => {
|
|
if (status === 'invoiced') {
|
|
return apiFetch('/invoices', {
|
|
method: 'POST',
|
|
body: JSON.stringify({ work_order_id: id, type: 'invoice' }),
|
|
})
|
|
}
|
|
return apiFetch(`/work-orders/${id}/transition`, {
|
|
method: 'POST',
|
|
body: JSON.stringify({
|
|
status,
|
|
payment_method: '',
|
|
payment_date: '',
|
|
}),
|
|
})
|
|
},
|
|
onSuccess: () => {
|
|
qc.invalidateQueries({ queryKey: ['work-order', id] })
|
|
qc.invalidateQueries({ queryKey: ['work-orders'] })
|
|
qc.invalidateQueries({ queryKey: ['invoices'] })
|
|
},
|
|
})
|
|
const updateMeta = useMutation({
|
|
mutationFn: (data: MetaForm) =>
|
|
apiFetch(`/work-orders/${id}`, {
|
|
method: 'PUT',
|
|
body: JSON.stringify({
|
|
...data,
|
|
real_deadline: detail?.status === 'quote' ? '' : data.real_deadline,
|
|
payment_method: data.payment_method,
|
|
payment_date: data.payment_date,
|
|
}),
|
|
}),
|
|
onSuccess: () => {
|
|
qc.invalidateQueries({ queryKey: ['work-order', id] })
|
|
qc.invalidateQueries({ queryKey: ['work-orders'] })
|
|
setShowMetaEdit(false)
|
|
},
|
|
})
|
|
|
|
// ── Items ─────────────────────────────────────────────────────────────────────
|
|
|
|
const {
|
|
register: regItem,
|
|
handleSubmit: handleItem,
|
|
setValue: setItemVal,
|
|
reset: resetItem,
|
|
formState: { errors: itemErrors },
|
|
} = useForm<ItemForm>({
|
|
resolver: zodResolver(itemSchema) as Resolver<ItemForm>,
|
|
defaultValues: emptyItem,
|
|
})
|
|
|
|
function onCatalogSelect(e: React.ChangeEvent<HTMLSelectElement>) {
|
|
const cid = e.target.value
|
|
setItemVal('catalog_item_id', cid)
|
|
if (cid) {
|
|
const found = catalogMap[cid]
|
|
if (found) {
|
|
setItemVal('description', found.name)
|
|
setItemVal('unit_price', found.base_price)
|
|
}
|
|
}
|
|
}
|
|
|
|
const addItem = useMutation({
|
|
mutationFn: (data: ItemForm) =>
|
|
apiFetch(`/work-orders/${id}/items`, { method: 'POST', body: JSON.stringify(data) }),
|
|
onSuccess: () => {
|
|
qc.invalidateQueries({ queryKey: ['work-order', id] })
|
|
setShowAddItem(false)
|
|
resetItem(emptyItem)
|
|
},
|
|
})
|
|
|
|
const removeItem = useMutation({
|
|
mutationFn: (itemId: string) =>
|
|
apiFetch(`/work-orders/${id}/items/${itemId}`, { method: 'DELETE' }),
|
|
onSuccess: () => qc.invalidateQueries({ queryKey: ['work-order', id] }),
|
|
})
|
|
|
|
// ── Staff hours ───────────────────────────────────────────────────────────────
|
|
|
|
const {
|
|
register: regSH,
|
|
handleSubmit: handleSH,
|
|
setValue: setSHVal,
|
|
reset: resetSH,
|
|
formState: { errors: shErrors },
|
|
} = useForm<SHForm>({
|
|
resolver: zodResolver(shSchema) as Resolver<SHForm>,
|
|
defaultValues: emptySH,
|
|
})
|
|
|
|
function onStaffSelect(e: React.ChangeEvent<HTMLSelectElement>) {
|
|
const sid = e.target.value
|
|
setSHVal('staff_id', sid)
|
|
if (sid) {
|
|
const found = staffMap[sid]
|
|
if (found) setSHVal('cost_per_hour', found.hourly_rate)
|
|
}
|
|
}
|
|
|
|
const addSH = useMutation({
|
|
mutationFn: (data: SHForm) =>
|
|
apiFetch(`/work-orders/${id}/staff-hours`, { method: 'POST', body: JSON.stringify(data) }),
|
|
onSuccess: () => {
|
|
qc.invalidateQueries({ queryKey: ['work-order', id] })
|
|
setShowAddStaff(false)
|
|
resetSH(emptySH)
|
|
},
|
|
})
|
|
|
|
const removeSH = useMutation({
|
|
mutationFn: (shId: string) =>
|
|
apiFetch(`/work-orders/${id}/staff-hours/${shId}`, { method: 'DELETE' }),
|
|
onSuccess: () => qc.invalidateQueries({ queryKey: ['work-order', id] }),
|
|
})
|
|
|
|
useEffect(() => {
|
|
if (!detail || showMetaEdit) return
|
|
resetMeta({
|
|
client_id: detail.client_id ?? '',
|
|
vehicle_id: detail.vehicle_id ?? '',
|
|
internal_notes: detail.internal_notes ?? '',
|
|
client_notes: detail.client_notes ?? '',
|
|
eta_days: detail.eta_days ?? 1,
|
|
real_deadline: detail.real_deadline ? detail.real_deadline.split('T')[0] : '',
|
|
payment_method: detail.payment_method ?? '',
|
|
payment_date: detail.payment_date ? detail.payment_date.split('T')[0] : '',
|
|
})
|
|
}, [detail, showMetaEdit, resetMeta])
|
|
|
|
// ── Render ────────────────────────────────────────────────────────────────────
|
|
|
|
if (isLoading) return <p className="text-slate-400">A carregar...</p>
|
|
if (detailError) return <p className="text-red-400">Erro ao abrir a ordem: {(detailError as Error).message}</p>
|
|
if (!detail) return <p className="text-slate-400">Ordem não encontrada.</p>
|
|
|
|
const items = Array.isArray(detail.items) ? detail.items : []
|
|
const staffHours = Array.isArray(detail.staff_hours) ? detail.staff_hours : []
|
|
const itemsTotal = items.reduce((s, i) => s + Number(i.total || 0), 0)
|
|
const hoursTotal = staffHours.reduce((s, h) => s + Number(h.total || 0), 0)
|
|
const nextStates = TRANSITIONS[detail.status] ?? []
|
|
const editable = detail.status !== 'invoiced' && detail.status !== 'cancelled'
|
|
const clientName = detail.client_id ? (clients.find((c) => c.id === detail.client_id)?.name ?? '—') : '—'
|
|
const woInvoices = invoices
|
|
.filter((inv) => inv.work_order_id === detail.id)
|
|
.sort((a, b) => new Date(b.issued_at).getTime() - new Date(a.issued_at).getTime())
|
|
const preferredType = detail.status === 'invoiced' ? 'invoice' : 'quote'
|
|
const selectedDoc = woInvoices.find((inv) => inv.type === preferredType) ?? woInvoices[0]
|
|
|
|
async function openWOInvoicePDF() {
|
|
if (!selectedDoc) return
|
|
try {
|
|
const blob = await apiFetchBlob(`/invoices/${selectedDoc.id}/pdf`)
|
|
const url = URL.createObjectURL(blob)
|
|
window.open(url, '_blank', 'noopener,noreferrer')
|
|
setTimeout(() => URL.revokeObjectURL(url), 60_000)
|
|
} catch {
|
|
// transition/update errors already shown elsewhere
|
|
}
|
|
}
|
|
const vehicleName = detail.vehicle_id
|
|
? (() => {
|
|
const v = vehicles.find((it) => it.id === detail.vehicle_id)
|
|
return v ? `${v.plate} — ${v.brand} ${v.model}` : '—'
|
|
})()
|
|
: '—'
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Header */}
|
|
<div className="flex items-center gap-3">
|
|
<Link
|
|
to="/app/work-orders"
|
|
className={`text-sm ${isLight ? 'text-slate-600 hover:text-slate-900' : 'text-slate-400 hover:text-white'}`}
|
|
>
|
|
← Ordens
|
|
</Link>
|
|
<span className={isLight ? 'text-slate-400' : 'text-slate-600'}>/</span>
|
|
<h1 className={`text-2xl font-bold ${isLight ? 'text-slate-900' : 'text-white'}`}>Ordem #{detail.number}</h1>
|
|
<Badge variant="outline" className={workOrderStatusBadgeClass(detail.status)}>
|
|
{WORK_ORDER_STATUS_LABEL[detail.status]}
|
|
</Badge>
|
|
{selectedDoc && (
|
|
<Button size="sm" variant="outline" onClick={openWOInvoicePDF}>
|
|
Ver PDF
|
|
</Button>
|
|
)}
|
|
</div>
|
|
<section className={`rounded-lg border p-4 ${isLight ? 'border-slate-300 bg-white' : 'border-slate-700 bg-slate-900/50'}`}>
|
|
<div className="grid gap-4 lg:grid-cols-3">
|
|
<div className={`lg:col-span-2 rounded-md border p-3 ${isLight ? 'border-slate-300 bg-slate-50' : 'border-slate-800 bg-slate-950/40'}`}>
|
|
<h2 className={`mb-3 text-base font-semibold ${isLight ? 'text-slate-900' : 'text-white'}`}>Dados da OT</h2>
|
|
<div className="grid gap-3 text-sm grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
|
|
<div>
|
|
<p className={isLight ? 'text-slate-500' : 'text-slate-500'}>Cliente</p>
|
|
<p className={isLight ? 'text-slate-800' : 'text-slate-200'}>{clientName}</p>
|
|
</div>
|
|
<div>
|
|
<p className={isLight ? 'text-slate-500' : 'text-slate-500'}>Viatura</p>
|
|
<p className={isLight ? 'text-slate-800' : 'text-slate-200'}>{vehicleName}</p>
|
|
</div>
|
|
<div>
|
|
<p className={isLight ? 'text-slate-500' : 'text-slate-500'}>Criada em</p>
|
|
<p className={isLight ? 'text-slate-800' : 'text-slate-200'}>{formatDateSafe(detail.created_at, true)}</p>
|
|
</div>
|
|
<div>
|
|
<p className={isLight ? 'text-slate-500' : 'text-slate-500'}>Previsão de conclusão</p>
|
|
<p className={isLight ? 'text-slate-800' : 'text-slate-200'}>{ETA_LABEL[detail.eta_days] ?? `${detail.eta_days} dias`}</p>
|
|
</div>
|
|
{detail.status !== 'quote' && (
|
|
<div>
|
|
<p className={isLight ? 'text-slate-500' : 'text-slate-500'}>Prazo real (deadline)</p>
|
|
<p className={isLight ? 'text-slate-800' : 'text-slate-200'}>{formatDateSafe(detail.real_deadline)}</p>
|
|
</div>
|
|
)}
|
|
{(detail.status === 'completed' || detail.status === 'invoiced') && (
|
|
<div>
|
|
<p className={isLight ? 'text-slate-500' : 'text-slate-500'}>Meio de pagamento</p>
|
|
<p className={isLight ? 'text-slate-800' : 'text-slate-200'}>{PAYMENT_METHOD_LABEL[detail.payment_method] ?? '—'}</p>
|
|
</div>
|
|
)}
|
|
{(detail.status === 'completed' || detail.status === 'invoiced') && (
|
|
<div>
|
|
<p className={isLight ? 'text-slate-500' : 'text-slate-500'}>Data de pagamento</p>
|
|
<p className={isLight ? 'text-slate-800' : 'text-slate-200'}>{formatDateSafe(detail.payment_date)}</p>
|
|
</div>
|
|
)}
|
|
<div>
|
|
<p className={isLight ? 'text-slate-500' : 'text-slate-500'}>Observações</p>
|
|
<p className={isLight ? 'text-slate-800' : 'text-slate-200'}>{detail.client_notes || '—'}</p>
|
|
</div>
|
|
<div>
|
|
<p className={isLight ? 'text-slate-500' : 'text-slate-500'}>Notas internas</p>
|
|
<p className={isLight ? 'text-slate-800' : 'text-slate-200'}>{detail.internal_notes || '—'}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className={`rounded-md border p-3 ${isLight ? 'border-slate-300 bg-slate-50' : 'border-slate-800 bg-slate-950/40'}`}>
|
|
<div className="mb-3 flex items-center justify-between">
|
|
<h3 className={`text-base font-semibold ${isLight ? 'text-slate-900' : 'text-white'}`}>Editar Dados da OT</h3>
|
|
{editable && !showMetaEdit && (
|
|
<Button size="sm" onClick={() => setShowMetaEdit(true)}>Editar</Button>
|
|
)}
|
|
</div>
|
|
{!showMetaEdit && editable && (
|
|
<p className={`text-sm ${isLight ? 'text-slate-600' : 'text-slate-400'}`}>Clique em editar para atualizar cliente, viatura, prazos e observações.</p>
|
|
)}
|
|
{!editable && (
|
|
<p className={`text-sm ${isLight ? 'text-slate-600' : 'text-slate-400'}`}>OT faturada/cancelada não permite edição.</p>
|
|
)}
|
|
{editable && showMetaEdit && (
|
|
<form onSubmit={handleMeta((d) => updateMeta.mutate(d))} className="space-y-3">
|
|
<div className="space-y-1">
|
|
<Label>Cliente</Label>
|
|
<select
|
|
{...regMeta('client_id')}
|
|
className={`w-full rounded-md border px-3 py-2 text-sm ${isLight ? 'border-slate-300 bg-white text-slate-900' : 'border-slate-600 bg-slate-900 text-white'}`}
|
|
>
|
|
<option value="">— Sem cliente —</option>
|
|
{clients.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
|
|
</select>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<Label>Viatura</Label>
|
|
<select
|
|
{...regMeta('vehicle_id')}
|
|
className={`w-full rounded-md border px-3 py-2 text-sm ${isLight ? 'border-slate-300 bg-white text-slate-900' : 'border-slate-600 bg-slate-900 text-white'}`}
|
|
>
|
|
<option value="">— Sem viatura —</option>
|
|
{vehicles.map((v) => <option key={v.id} value={v.id}>{v.plate} — {v.brand} {v.model}</option>)}
|
|
</select>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<Label>Previsão de conclusão</Label>
|
|
<select
|
|
{...regMeta('eta_days')}
|
|
className={`w-full rounded-md border px-3 py-2 text-sm ${isLight ? 'border-slate-300 bg-white text-slate-900' : 'border-slate-600 bg-slate-900 text-white'}`}
|
|
>
|
|
{ETA_OPTIONS.map((o) => <option key={o} value={o}>{ETA_LABEL[o]}</option>)}
|
|
</select>
|
|
</div>
|
|
{detail.status !== 'quote' && (
|
|
<div className="space-y-1">
|
|
<Label>Prazo real (deadline)</Label>
|
|
<Input
|
|
type="date"
|
|
{...regMeta('real_deadline')}
|
|
className={isLight ? 'bg-white border-slate-300 text-slate-900' : 'bg-slate-900 border-slate-600 text-white'}
|
|
/>
|
|
</div>
|
|
)}
|
|
{(detail.status === 'completed' || detail.status === 'invoiced') && (
|
|
<div className="space-y-1">
|
|
<Label>Meio de pagamento</Label>
|
|
<select
|
|
{...regMeta('payment_method')}
|
|
className={`w-full rounded-md border px-3 py-2 text-sm ${isLight ? 'border-slate-300 bg-white text-slate-900' : 'border-slate-600 bg-slate-900 text-white'}`}
|
|
>
|
|
<option value="">— Selecionar —</option>
|
|
{PAYMENT_METHOD_OPTIONS.map((m) => <option key={m.value} value={m.value}>{m.label}</option>)}
|
|
</select>
|
|
</div>
|
|
)}
|
|
{(detail.status === 'completed' || detail.status === 'invoiced') && (
|
|
<div className="space-y-1">
|
|
<Label>Data de pagamento</Label>
|
|
<Input
|
|
type="date"
|
|
{...regMeta('payment_date')}
|
|
className={isLight ? 'bg-white border-slate-300 text-slate-900' : 'bg-slate-900 border-slate-600 text-white'}
|
|
/>
|
|
</div>
|
|
)}
|
|
<div className="space-y-1">
|
|
<Label>Observações</Label>
|
|
<Input
|
|
{...regMeta('client_notes')}
|
|
className={isLight ? 'bg-white border-slate-300 text-slate-900' : 'bg-slate-900 border-slate-600 text-white'}
|
|
/>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<Label>Notas internas</Label>
|
|
<Input
|
|
{...regMeta('internal_notes')}
|
|
className={isLight ? 'bg-white border-slate-300 text-slate-900' : 'bg-slate-900 border-slate-600 text-white'}
|
|
/>
|
|
</div>
|
|
{metaErrors.eta_days && <p className="text-red-400 text-sm">{metaErrors.eta_days.message}</p>}
|
|
{updateMeta.error && <p className="text-red-400 text-sm">{(updateMeta.error as Error).message}</p>}
|
|
<div className="flex justify-end gap-2">
|
|
<Button type="button" variant="outline" onClick={() => setShowMetaEdit(false)}>Cancelar</Button>
|
|
<Button type="submit" disabled={updateMeta.isPending}>
|
|
{updateMeta.isPending ? 'A guardar...' : 'Guardar alterações'}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Transitions */}
|
|
{nextStates.length > 0 && (
|
|
<div className="space-y-2">
|
|
<div className="flex gap-2">
|
|
<span className="text-slate-400 text-sm self-center">Transição:</span>
|
|
{nextStates.map((s) => (
|
|
<Button
|
|
key={s}
|
|
size="sm"
|
|
variant={s === 'cancelled' ? 'destructive' : 'default'}
|
|
onClick={() => {
|
|
if (s === 'cancelled') {
|
|
setConfirmAction({ type: 'cancel' })
|
|
return
|
|
}
|
|
transition.mutate(s)
|
|
}}
|
|
disabled={transition.isPending}
|
|
>
|
|
→ {WORK_ORDER_STATUS_LABEL[s as keyof typeof WORK_ORDER_STATUS_LABEL]}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
{transition.error && (
|
|
<p className="text-sm text-red-400">{(transition.error as Error).message}</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* ── Items ─────────────────────────────────────────────────────────────── */}
|
|
<section>
|
|
<div className="flex items-center justify-between mb-3">
|
|
<h2 className="text-lg font-semibold text-white">Itens</h2>
|
|
{editable && (
|
|
<Button size="sm" onClick={() => { resetItem(emptyItem); setShowAddItem(true) }}>
|
|
Adicionar Item
|
|
</Button>
|
|
)}
|
|
</div>
|
|
|
|
{showAddItem && (
|
|
<div className="mb-4 bg-slate-800 rounded-lg border border-slate-700 p-4">
|
|
<form onSubmit={handleItem((d) => addItem.mutate(d))} className="grid grid-cols-3 gap-3">
|
|
<div className="col-span-3 space-y-1">
|
|
<Label>Catálogo (opcional)</Label>
|
|
<select
|
|
{...regItem('catalog_item_id')}
|
|
onChange={onCatalogSelect}
|
|
className="w-full rounded-md border border-slate-600 bg-slate-900 text-white px-3 py-2 text-sm"
|
|
>
|
|
<option value="">— Seleccionar do catálogo —</option>
|
|
{catalogItems.filter(i => i.active).map(i => (
|
|
<option key={i.id} value={i.id}>
|
|
{i.code} — {i.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div className="col-span-3 space-y-1">
|
|
<Label>Descrição *</Label>
|
|
<Input {...regItem('description')} className="bg-slate-900 border-slate-600 text-white" />
|
|
{itemErrors.description && <p className="text-red-400 text-xs">{itemErrors.description.message}</p>}
|
|
</div>
|
|
{detail.status === 'open' && (
|
|
<div className="col-span-3 space-y-1">
|
|
<Label>Justificação da alteração *</Label>
|
|
<Input
|
|
{...regItem('change_justification')}
|
|
placeholder="Ex: Pedido do cliente para incluir peça adicional"
|
|
className="bg-slate-900 border-slate-600 text-white"
|
|
/>
|
|
<p className="text-xs text-slate-500">Obrigatório em Orçamento Aprovado para garantir transparência.</p>
|
|
</div>
|
|
)}
|
|
<div className="space-y-1">
|
|
<Label>Qtd. *</Label>
|
|
<Input type="number" step="0.001" {...regItem('qty')} className="bg-slate-900 border-slate-600 text-white" />
|
|
{itemErrors.qty && <p className="text-red-400 text-xs">{itemErrors.qty.message}</p>}
|
|
</div>
|
|
<div className="space-y-1">
|
|
<Label>Preço Unit. (€)</Label>
|
|
<Input type="number" step="0.01" {...regItem('unit_price')} className="bg-slate-900 border-slate-600 text-white" />
|
|
</div>
|
|
<div className="space-y-1">
|
|
<Label>Desconto (%)</Label>
|
|
<Input type="number" step="0.01" {...regItem('discount_pct')} className="bg-slate-900 border-slate-600 text-white" />
|
|
</div>
|
|
{addItem.error && <p className="col-span-3 text-red-400 text-sm">{(addItem.error as Error).message}</p>}
|
|
<div className="col-span-3 flex gap-2 justify-end">
|
|
<Button type="button" variant="outline" size="sm" onClick={() => setShowAddItem(false)}>Cancelar</Button>
|
|
<Button type="submit" size="sm" disabled={addItem.isPending}>
|
|
{addItem.isPending ? 'A adicionar...' : 'Adicionar'}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
)}
|
|
|
|
{items.length === 0 ? (
|
|
<p className="text-slate-500 text-sm">Sem itens.</p>
|
|
) : (
|
|
<div className="rounded-lg border border-slate-700 overflow-hidden">
|
|
<table className="w-full text-sm">
|
|
<thead className="bg-slate-800">
|
|
<tr>
|
|
<th className="text-left px-4 py-2 text-slate-400 font-medium">Artigo</th>
|
|
<th className="text-right px-4 py-2 text-slate-400 font-medium">Qtd.</th>
|
|
<th className="text-right px-4 py-2 text-slate-400 font-medium">Preço Unit.</th>
|
|
<th className="text-right px-4 py-2 text-slate-400 font-medium">Desc.%</th>
|
|
<th className="text-right px-4 py-2 text-slate-400 font-medium">Total</th>
|
|
<th className="px-4 py-2"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{items.map((item) => {
|
|
const cat = item.catalog_item_id ? catalogMap[item.catalog_item_id] : null
|
|
return (
|
|
<tr key={item.id} className="border-t border-slate-700">
|
|
<td className="px-4 py-2">
|
|
<div className="text-white">{item.description}</div>
|
|
{cat && (
|
|
<div className="text-xs text-slate-500 mt-0.5">
|
|
{CATEGORY_LABEL[cat.category] ?? cat.category}
|
|
</div>
|
|
)}
|
|
{item.change_justification && (
|
|
<div className="text-xs text-amber-300/90 mt-1">
|
|
Justificação: {item.change_justification}
|
|
</div>
|
|
)}
|
|
</td>
|
|
<td className="px-4 py-2 text-slate-300 text-right">{item.qty}</td>
|
|
<td className="px-4 py-2 text-slate-300 text-right">{Number(item.unit_price || 0).toFixed(2)} €</td>
|
|
<td className="px-4 py-2 text-slate-300 text-right">{item.discount_pct}%</td>
|
|
<td className="px-4 py-2 text-white font-medium text-right">{Number(item.total || 0).toFixed(2)} €</td>
|
|
<td className="px-4 py-2 text-right">
|
|
{editable && (
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
className="text-red-400 hover:text-red-300 h-7 px-2"
|
|
onClick={() => setConfirmAction({ type: 'remove_item', id: item.id })}
|
|
disabled={removeItem.isPending}
|
|
>
|
|
✕
|
|
</Button>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
)
|
|
})}
|
|
</tbody>
|
|
<tfoot className="bg-slate-800/50">
|
|
<tr>
|
|
<td colSpan={4} className="px-4 py-2 text-slate-400 text-right font-medium">Subtotal itens</td>
|
|
<td className="px-4 py-2 text-white font-bold text-right">{itemsTotal.toFixed(2)} €</td>
|
|
<td />
|
|
</tr>
|
|
{hoursTotal > 0 && (
|
|
<tr>
|
|
<td colSpan={4} className="px-4 py-2 text-slate-400 text-right font-medium">Mão de obra</td>
|
|
<td className="px-4 py-2 text-white font-bold text-right">{hoursTotal.toFixed(2)} €</td>
|
|
<td />
|
|
</tr>
|
|
)}
|
|
<tr>
|
|
<td colSpan={4} className="px-4 py-2 text-slate-300 text-right font-bold">Total</td>
|
|
<td className="px-4 py-2 text-blue-400 font-bold text-right text-base">
|
|
{(itemsTotal + hoursTotal).toFixed(2)} €
|
|
</td>
|
|
<td />
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</section>
|
|
|
|
{/* ── Staff hours ───────────────────────────────────────────────────────── */}
|
|
<section>
|
|
<div className="flex items-center justify-between mb-3">
|
|
<h2 className="text-lg font-semibold text-white">Técnicos</h2>
|
|
{editable && (
|
|
<Button size="sm" onClick={() => { resetSH(emptySH); setShowAddStaff(true) }}>
|
|
Adicionar Técnico
|
|
</Button>
|
|
)}
|
|
</div>
|
|
|
|
{showAddStaff && (
|
|
<div className="mb-4 bg-slate-800 rounded-lg border border-slate-700 p-4">
|
|
<form onSubmit={handleSH((d) => addSH.mutate(d))} className="grid grid-cols-3 gap-3">
|
|
<div className="col-span-3 space-y-1">
|
|
<Label>Técnico *</Label>
|
|
<select
|
|
{...regSH('staff_id')}
|
|
onChange={onStaffSelect}
|
|
className="w-full rounded-md border border-slate-600 bg-slate-900 text-white px-3 py-2 text-sm"
|
|
>
|
|
<option value="">— Seleccionar técnico —</option>
|
|
{staffList.filter(s => s.active).map(s => (
|
|
<option key={s.id} value={s.id}>
|
|
{s.name} ({s.type === 'internal' ? 'Interno' : 'Externo'})
|
|
</option>
|
|
))}
|
|
</select>
|
|
{shErrors.staff_id && <p className="text-red-400 text-xs">{shErrors.staff_id.message}</p>}
|
|
</div>
|
|
<div className="space-y-1">
|
|
<Label>Horas *</Label>
|
|
<Input type="number" step="0.25" {...regSH('hours')} className="bg-slate-900 border-slate-600 text-white" />
|
|
{shErrors.hours && <p className="text-red-400 text-xs">{shErrors.hours.message}</p>}
|
|
</div>
|
|
<div className="space-y-1">
|
|
<Label>€/hora</Label>
|
|
<Input type="number" step="0.01" {...regSH('cost_per_hour')} className="bg-slate-900 border-slate-600 text-white" />
|
|
</div>
|
|
<div className="flex items-end pb-0.5">
|
|
<p className="text-slate-500 text-xs">Preço preenchido automaticamente<br/>do cadastro do técnico</p>
|
|
</div>
|
|
{addSH.error && <p className="col-span-3 text-red-400 text-sm">{(addSH.error as Error).message}</p>}
|
|
<div className="col-span-3 flex gap-2 justify-end">
|
|
<Button type="button" variant="outline" size="sm" onClick={() => setShowAddStaff(false)}>Cancelar</Button>
|
|
<Button type="submit" size="sm" disabled={addSH.isPending}>
|
|
{addSH.isPending ? 'A adicionar...' : 'Adicionar'}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
)}
|
|
|
|
{staffHours.length === 0 ? (
|
|
<p className="text-slate-500 text-sm">Sem técnicos registados nesta ordem.</p>
|
|
) : (
|
|
<div className="rounded-lg border border-slate-700 overflow-hidden">
|
|
<table className="w-full text-sm">
|
|
<thead className="bg-slate-800">
|
|
<tr>
|
|
<th className="text-left px-4 py-2 text-slate-400 font-medium">Técnico</th>
|
|
<th className="text-right px-4 py-2 text-slate-400 font-medium">Horas</th>
|
|
<th className="text-right px-4 py-2 text-slate-400 font-medium">€/hora</th>
|
|
<th className="text-right px-4 py-2 text-slate-400 font-medium">Total</th>
|
|
<th className="px-4 py-2"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{staffHours.map((sh) => {
|
|
const staff = staffMap[sh.staff_id]
|
|
return (
|
|
<tr key={sh.id} className="border-t border-slate-700">
|
|
<td className="px-4 py-2">
|
|
<div className="text-white">{staff?.name ?? '—'}</div>
|
|
{staff && (
|
|
<div className="text-xs text-slate-500 mt-0.5">
|
|
{staff.type === 'internal' ? 'Interno' : 'Externo'}
|
|
</div>
|
|
)}
|
|
</td>
|
|
<td className="px-4 py-2 text-white text-right">{sh.hours}</td>
|
|
<td className="px-4 py-2 text-slate-300 text-right">{Number(sh.cost_per_hour || 0).toFixed(2)} €</td>
|
|
<td className="px-4 py-2 text-white font-medium text-right">{Number(sh.total || 0).toFixed(2)} €</td>
|
|
<td className="px-4 py-2 text-right">
|
|
{editable && (
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
className="text-red-400 hover:text-red-300 h-7 px-2"
|
|
onClick={() => setConfirmAction({ type: 'remove_staff', id: sh.id })}
|
|
disabled={removeSH.isPending}
|
|
>
|
|
✕
|
|
</Button>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
)
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</section>
|
|
<ConfirmActionDialog
|
|
open={!!confirmAction}
|
|
onOpenChange={(open) => !open && setConfirmAction(null)}
|
|
title={
|
|
confirmAction?.type === 'cancel'
|
|
? 'Cancelar ordem de trabalho'
|
|
: confirmAction?.type === 'remove_item'
|
|
? 'Eliminar item'
|
|
: 'Eliminar técnico'
|
|
}
|
|
description={
|
|
confirmAction?.type === 'cancel'
|
|
? 'A ordem será marcada como cancelada e deixará de ser editável.'
|
|
: confirmAction?.type === 'remove_item'
|
|
? 'Este item será removido da OT.'
|
|
: 'Este registo de horas será removido da OT.'
|
|
}
|
|
confirmLabel={confirmAction?.type === 'cancel' ? 'Cancelar OT' : 'Eliminar'}
|
|
pending={transition.isPending || removeItem.isPending || removeSH.isPending}
|
|
onConfirm={() => {
|
|
if (!confirmAction) return
|
|
if (confirmAction.type === 'cancel') {
|
|
transition.mutate('cancelled', {
|
|
onSettled: () => setConfirmAction(null),
|
|
})
|
|
return
|
|
}
|
|
if (confirmAction.type === 'remove_item' && confirmAction.id) {
|
|
removeItem.mutate(confirmAction.id, {
|
|
onSettled: () => setConfirmAction(null),
|
|
})
|
|
return
|
|
}
|
|
if (confirmAction.type === 'remove_staff' && confirmAction.id) {
|
|
removeSH.mutate(confirmAction.id, {
|
|
onSettled: () => setConfirmAction(null),
|
|
})
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|