esdras/sistema-de-chamados
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui: ajustes de layout em automações e checklist

Browse source 
- Reorganiza header da página de automações (título/descrição em cima, filtros embaixo)
- Aumenta espaçamento da badge "quando" na tabela
- Ajusta largura do input de checklist nos tickets para melhor distribuição

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
esdrasrenan 2025-12-13 22:22:42 -03:00
parent e0fcd5bf7c
commit 06388b3688
2 changed files with 43 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

32
src/components/automations/automations-manager.tsx
View file

@ -11,7 +11,7 @@ import { useAuth } from "@/lib/auth-client"
import { DEFAULT_TENANT_ID } from "@/lib/constants"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Dialog, DialogTrigger } from "@/components/ui/dialog"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Input } from "@/components/ui/input"
@ -152,21 +152,23 @@ export function AutomationsManager() {
return (
<Card className="border-slate-200">
<CardHeader>
<CardHeader className="space-y-4">
<div>
<CardTitle className="text-lg font-semibold text-neutral-900">Automações</CardTitle>
<CardDescription className="text-neutral-600">
Crie gatilhos para executar ações automáticas.
<CardDescription className="mt-1 text-neutral-600">
Crie gatilhos para executar ações automáticas nos tickets.
</CardDescription>
<CardAction>
</div>
<div className="flex flex-col items-stretch gap-2 sm:flex-row sm:items-center sm:justify-between">
<div className="flex flex-col items-stretch gap-2 sm:flex-row sm:items-center">
<Input
value={queryText}
onChange={(e) => setQueryText(e.target.value)}
placeholder="Buscar automação..."
className="h-8 w-full text-sm sm:w-64"
className="h-8 w-full text-sm sm:w-56"
/>
<Select value={triggerFilter} onValueChange={setTriggerFilter}>
<SelectTrigger size="sm" className="w-full sm:w-52">
<SelectTrigger size="sm" className="w-full sm:w-48">
<span className="truncate">
<span className="text-neutral-500">Quando:</span> <SelectValue />
</span>
@ -182,7 +184,7 @@ export function AutomationsManager() {
</SelectContent>
</Select>
<Select value={statusFilter} onValueChange={setStatusFilter}>
<SelectTrigger size="sm" className="w-full sm:w-44">
<SelectTrigger size="sm" className="w-full sm:w-40">
<span className="truncate">
<span className="text-neutral-500">Ativação:</span> <SelectValue />
</span>
@ -193,6 +195,7 @@ export function AutomationsManager() {
<SelectItem value="inactive">Inativas</SelectItem>
</SelectContent>
</Select>
</div>
<Dialog open={editorOpen} onOpenChange={setEditorOpen}>
<DialogTrigger asChild>
<Button size="sm" onClick={handleNew} className="gap-2">
@ -206,7 +209,6 @@ export function AutomationsManager() {
/>
</Dialog>
</div>
</CardAction>
</CardHeader>
<CardContent>
<Dialog
@ -240,11 +242,11 @@ export function AutomationsManager() {
<div className="rounded-3xl border border-slate-200 bg-white/90 shadow-sm overflow-hidden">
<Table className="w-full table-fixed">
<colgroup>
<col style={{ width: "22%" }} />
<col style={{ width: "15%" }} />
<col style={{ width: "20%" }} />
<col style={{ width: "18%" }} />
<col style={{ width: "10%" }} />
<col style={{ width: "7%" }} />
<col style={{ width: "11%" }} />
<col style={{ width: "10%" }} />
<col style={{ width: "14%" }} />
<col style={{ width: "14%" }} />
<col style={{ width: "7%" }} />
@ -285,13 +287,13 @@ export function AutomationsManager() {
<TableCell className="text-center font-semibold text-neutral-900 truncate" title={row.name}>
{row.name}
</TableCell>
<TableCell className="text-center">
<TableCell className="text-center px-2">
<div className="flex items-center justify-center gap-2">
<Badge variant="secondary" className="rounded-full max-w-full truncate">
<Badge variant="secondary" className="rounded-full px-3 max-w-full truncate">
{triggerLabel(row.trigger)}
</Badge>
{row.timing === "DELAYED" && row.delayMs ? (
<Badge variant="outline" className="rounded-full">
<Badge variant="outline" className="rounded-full px-2.5">
+{Math.round(row.delayMs / 60000)}m
</Badge>
) : null}

6
src/components/tickets/ticket-checklist-card.tsx
View file

@ -428,12 +428,12 @@ export function TicketChecklistCard({
)}
{canEdit && !isResolved ? (
<div className="flex flex-col gap-2 rounded-xl border border-slate-200 bg-slate-50 p-3 sm:flex-row sm:items-center">
<div className="flex flex-col gap-2 rounded-xl border border-slate-200 bg-slate-50 p-3 sm:flex-row sm:items-center sm:justify-between">
<Input
value={newText}
onChange={(e) => setNewText(e.target.value)}
placeholder="Adicionar item do checklist..."
className="h-8 flex-1 bg-white"
className="h-8 w-full bg-white sm:max-w-md"
onKeyDown={(e) => {
if (e.key === "Enter") {
e.preventDefault()
@ -441,6 +441,7 @@ export function TicketChecklistCard({
}
}}
/>
<div className="flex items-center gap-4">
<label className="flex h-8 items-center gap-2 text-sm text-neutral-700">
<Checkbox checked={newRequired} onCheckedChange={(checked) => setNewRequired(Boolean(checked))} />
Obrigatório
@ -450,6 +451,7 @@ export function TicketChecklistCard({
Adicionar
</Button>
</div>
</div>
) : null}
</CardContent>
</Card>