Align admin tables with ticket styling and add board view
This commit is contained in:
Esdras Renan
parent
63cf9f9d45
commit
a319aa0eff
8 changed files with 783 additions and 447 deletions
|
|
@ -39,6 +39,7 @@ import {
|
|||
toServerTimestamp,
|
||||
type SessionStartOrigin,
|
||||
} from "./ticket-timer.utils"
|
||||
import { SearchableCombobox, type SearchableComboboxOption } from "@/components/ui/searchable-combobox"
|
||||
|
||||
interface TicketHeaderProps {
|
||||
ticket: TicketWithDetails
|
||||
|
|
@ -109,7 +110,6 @@ type CustomerOption = {
|
|||
avatarUrl: string | null
|
||||
}
|
||||
|
||||
const ALL_COMPANIES_VALUE = "__all__"
|
||||
const NO_COMPANY_VALUE = "__no_company__"
|
||||
const NO_REQUESTER_VALUE = "__no_requester__"
|
||||
|
||||
|
|
@ -250,7 +250,7 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
|
|||
const [closeOpen, setCloseOpen] = useState(false)
|
||||
const [assigneeChangeReason, setAssigneeChangeReason] = useState("")
|
||||
const [assigneeReasonError, setAssigneeReasonError] = useState<string | null>(null)
|
||||
const [companySelection, setCompanySelection] = useState<string>(ALL_COMPANIES_VALUE)
|
||||
const [companySelection, setCompanySelection] = useState<string>(NO_COMPANY_VALUE)
|
||||
const [requesterSelection, setRequesterSelection] = useState<string | null>(ticket.requester.id)
|
||||
const [requesterError, setRequesterError] = useState<string | null>(null)
|
||||
const [customersInitialized, setCustomersInitialized] = useState(false)
|
||||
|
|
@ -278,32 +278,47 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
|
|||
if (ticket.company?.id) return String(ticket.company.id)
|
||||
return NO_COMPANY_VALUE
|
||||
}, [currentRequesterRecord, ticket.company?.id])
|
||||
const companyOptions = useMemo(() => {
|
||||
const map = new Map<string, { id: string; name: string; isAvulso?: boolean }>()
|
||||
const companyMeta = useMemo(() => {
|
||||
const map = new Map<string, { name: string; isAvulso?: boolean; keywords: string[] }>()
|
||||
companies.forEach((company) => {
|
||||
map.set(company.id, { id: company.id, name: company.name, isAvulso: false })
|
||||
const trimmedName = company.name.trim()
|
||||
const slugFallback = company.slug?.trim()
|
||||
const label =
|
||||
trimmedName.length > 0
|
||||
? trimmedName
|
||||
: slugFallback && slugFallback.length > 0
|
||||
? slugFallback
|
||||
: `Empresa ${company.id.slice(0, 8)}`
|
||||
const keywords = slugFallback ? [slugFallback] : []
|
||||
map.set(company.id, { name: label, isAvulso: false, keywords })
|
||||
})
|
||||
customers.forEach((customer) => {
|
||||
if (customer.companyId && !map.has(customer.companyId)) {
|
||||
const trimmedName = customer.companyName?.trim() ?? ""
|
||||
const label =
|
||||
trimmedName.length > 0 ? trimmedName : `Empresa ${customer.companyId.slice(0, 8)}`
|
||||
map.set(customer.companyId, {
|
||||
id: customer.companyId,
|
||||
name: customer.companyName ?? "Empresa sem nome",
|
||||
name: label,
|
||||
isAvulso: customer.companyIsAvulso,
|
||||
keywords: [],
|
||||
})
|
||||
}
|
||||
})
|
||||
const includeNoCompany = customers.some((customer) => !customer.companyId)
|
||||
const result: Array<{ id: string; name: string; isAvulso?: boolean }> = [
|
||||
{ id: ALL_COMPANIES_VALUE, name: "Todas as empresas" },
|
||||
]
|
||||
if (includeNoCompany) {
|
||||
result.push({ id: NO_COMPANY_VALUE, name: "Sem empresa" })
|
||||
}
|
||||
const sorted = Array.from(map.values()).sort((a, b) => a.name.localeCompare(b.name, "pt-BR"))
|
||||
return [...result, ...sorted]
|
||||
return map
|
||||
}, [companies, customers])
|
||||
|
||||
const companyComboboxOptions = useMemo<SearchableComboboxOption[]>(() => {
|
||||
const entries = Array.from(companyMeta.entries())
|
||||
.map(([id, meta]) => ({
|
||||
value: id,
|
||||
label: meta.name,
|
||||
keywords: meta.keywords,
|
||||
}))
|
||||
.sort((a, b) => a.label.localeCompare(b.label, "pt-BR"))
|
||||
return [{ value: NO_COMPANY_VALUE, label: "Sem empresa", keywords: ["sem empresa", "nenhuma"] }, ...entries]
|
||||
}, [companyMeta])
|
||||
|
||||
const filteredCustomers = useMemo(() => {
|
||||
if (companySelection === ALL_COMPANIES_VALUE) return customers
|
||||
if (companySelection === NO_COMPANY_VALUE) {
|
||||
return customers.filter((customer) => !customer.companyId)
|
||||
}
|
||||
|
|
@ -312,6 +327,9 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
|
|||
const assigneeDirty = useMemo(() => assigneeSelection !== currentAssigneeId, [assigneeSelection, currentAssigneeId])
|
||||
const requesterDirty = useMemo(() => requesterSelection !== ticket.requester.id, [requesterSelection, ticket.requester.id])
|
||||
const formDirty = dirty || categoryDirty || queueDirty || assigneeDirty || requesterDirty
|
||||
const assigneeReasonRequired = assigneeDirty && !isManager
|
||||
const assigneeReasonValid = !assigneeReasonRequired || assigneeChangeReason.trim().length >= 5
|
||||
const saveDisabled = !formDirty || saving || !assigneeReasonValid
|
||||
const companyLabel = useMemo(() => {
|
||||
if (ticket.company?.name) return ticket.company.name
|
||||
if (isAvulso) return "Cliente avulso"
|
||||
|
|
@ -1238,23 +1256,35 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
|
|||
<div className="flex flex-col gap-1">
|
||||
<span className={sectionLabelClass}>Empresa</span>
|
||||
{editing && !isManager ? (
|
||||
<Select
|
||||
<SearchableCombobox
|
||||
value={companySelection}
|
||||
onValueChange={(value) => {
|
||||
setCompanySelection(value)
|
||||
setCompanySelection(value ?? NO_COMPANY_VALUE)
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className={selectTriggerClass}>
|
||||
<SelectValue placeholder="Selecionar" />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="max-h-64 rounded-lg border border-slate-200 bg-white text-neutral-800 shadow-sm">
|
||||
{companyOptions.map((option) => (
|
||||
<SelectItem key={option.id} value={option.id}>
|
||||
{option.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
options={companyComboboxOptions}
|
||||
placeholder="Selecionar empresa"
|
||||
disabled={isManager}
|
||||
renderValue={(option) =>
|
||||
option ? (
|
||||
<span className="truncate">{option.label}</span>
|
||||
) : (
|
||||
<span className="text-muted-foreground">Selecionar empresa</span>
|
||||
)
|
||||
}
|
||||
renderOption={(option) => {
|
||||
const meta = companyMeta.get(option.value)
|
||||
return (
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<span className="font-medium text-foreground">{option.label}</span>
|
||||
{meta?.isAvulso ? (
|
||||
<Badge variant="outline" className="rounded-full px-2 py-0.5 text-[10px] uppercase tracking-wide">
|
||||
Avulsa
|
||||
</Badge>
|
||||
) : null}
|
||||
</div>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<span className={sectionValueClass}>{companyLabel}</span>
|
||||
)}
|
||||
|
|
@ -1350,6 +1380,8 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
|
|||
</p>
|
||||
{assigneeReasonError ? (
|
||||
<p className="text-xs font-semibold text-rose-600">{assigneeReasonError}</p>
|
||||
) : assigneeReasonRequired && assigneeChangeReason.trim().length < 5 ? (
|
||||
<p className="text-xs font-semibold text-rose-600">Descreva o motivo com pelo menos 5 caracteres.</p>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
|
|
@ -1381,7 +1413,7 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
|
|||
<Button variant="ghost" size="sm" className="text-sm font-semibold text-neutral-700" onClick={handleCancel}>
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button size="sm" className={startButtonClass} onClick={handleSave} disabled={!formDirty || saving}>
|
||||
<Button size="sm" className={startButtonClass} onClick={handleSave} disabled={saveDisabled}>
|
||||
Salvar
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue