out new baseline

This commit is contained in:
Mark Gregory
2026-06-24 15:15:15 +01:00
parent a26129a383
commit e4b7b8120c
11 changed files with 271 additions and 258 deletions
@@ -20,16 +20,16 @@
$products = collect($products ?? []);
@endphp
<div class="hd-helpdesk-surface space-y-6" dusk="helpdesk-settings-manager">
<div class="hd-helpdesk-surface space-y-4" dusk="helpdesk-settings-manager">
<div
class="overflow-hidden rounded-3xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
<div class="bg-gradient-to-br from-slate-950 via-slate-900 to-blue-950 px-6 py-7 text-white">
<div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
class="overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
<div class="bg-gradient-to-br from-slate-950 via-slate-900 to-blue-950 px-5 py-5 text-white">
<div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
<div>
<p class="text-xs font-semibold uppercase tracking-[0.28em] text-blue-200">Helpdesk administration
</p>
<h1 class="mt-2 text-3xl font-semibold tracking-tight">Support configuration</h1>
<p class="mt-2 max-w-3xl text-sm text-blue-100/90">Manage lookup data, workflow messages, canned
<h1 class="mt-2 text-2xl font-semibold tracking-tight">Support configuration</h1>
<p class="mt-1 max-w-3xl text-sm text-blue-100/90">Manage lookup data, workflow messages, canned
responses, SLA policies, automation rules, checklists, tags and product/service linkage.</p>
</div>
@@ -42,7 +42,7 @@
</div>
</div>
</div>
<div class="grid gap-3 md:grid-cols-4 xl:grid-cols-7">
<div class="grid gap-2 md:grid-cols-4 xl:grid-cols-7">
@foreach ([
'statuses' => ['label' => 'Statuses', 'count' => $statuses->count()],
'priorities' => ['label' => 'Priorities', 'count' => $priorities->count()],
@@ -95,10 +95,10 @@
@endphp
<a href="{{ route('helpdesk.settings', ['section' => $key]) }}"
dusk="helpdesk-settings-section-{{ $key }}"
class="rounded-2xl border px-4 py-3 text-left shadow-sm transition hover:-translate-y-0.5"
class="rounded-xl border px-3 py-2 text-left shadow-sm transition hover:-translate-y-0.5"
style="{{ $sectionStyle }}">
<div class="text-xs font-semibold uppercase tracking-wide opacity-70">{{ $item['label'] }}</div>
<div class="mt-1 text-2xl font-semibold">{{ $item['count'] }}</div>
<div class="mt-0.5 text-xl font-semibold">{{ $item['count'] }}</div>
</a>
@endforeach
</div>
@@ -108,7 +108,7 @@
<x-helpdesk::settings-section title="Ticket defaults"
description="Choose the company default used when a new Helpdesk ticket is created. Lookup defaults are configured on the Statuses, Priorities, Categories, Teams and Projects sections.">
<x-slot:form>
<form class="grid gap-4 md:grid-cols-3">
<form class="grid gap-3 md:grid-cols-3">
<flux:select wire:model="default_helpdesk_company_id" label="Default company">
<option value="">No default company</option>
@foreach ($companies as $company)
@@ -119,8 +119,8 @@
</flux:select>
<div class="md:col-span-3 flex gap-2">
<flux:button type="button" wire:click="saveDefaultHelpdeskCompany" variant="primary"
class="!bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">
<flux:button size="sm" type="button" wire:click="saveDefaultHelpdeskCompany" variant="primary"
class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">
Save default company
</flux:button>
</div>
@@ -140,32 +140,32 @@
<x-helpdesk::settings-section title="Statuses"
description="Control workflow stages and mark which statuses close tickets.">
<x-slot:form>
<form wire:submit.prevent="saveStatus" class="grid gap-5 xl:grid-cols-12">
<form wire:submit.prevent="saveStatus" class="grid gap-3 xl:grid-cols-12">
<div class="xl:col-span-3">
<flux:input wire:model="statusForm.name" label="Name" />
</div>
<div class="xl:col-span-3">
<flux:input wire:model="statusForm.slug" label="Slug" placeholder="auto-generated" />
</div>
<x-helpdesk::colour-select class="xl:col-span-4" model="statusForm.color" label="Badge colour" :options="$colourOptions" />
<x-helpdesk::colour-select class="xl:col-span-12" model="statusForm.color" label="Badge colour" :options="$colourOptions" />
<div class="xl:col-span-2">
<flux:input wire:model="statusForm.sort_order" label="Sort" type="number" min="0" />
</div>
<label class="flex min-h-12 items-center gap-3 rounded-xl border border-zinc-200 bg-white/70 px-4 py-3 text-sm font-semibold text-zinc-700 shadow-sm dark:border-zinc-700 dark:bg-zinc-950/50 dark:text-zinc-200 xl:col-span-3">
<label class="flex min-h-9 items-center gap-2 rounded-lg border border-zinc-200 bg-white px-3 py-2 text-xs font-semibold text-zinc-700 shadow-sm dark:border-zinc-700 dark:bg-zinc-950/60 dark:text-zinc-200 xl:col-span-3">
<input type="checkbox" wire:model="statusForm.is_closed" class="rounded border-zinc-600 bg-zinc-950 text-blue-600 focus:ring-blue-500">
Closed status
</label>
<label class="flex min-h-12 items-center gap-3 rounded-xl border border-zinc-200 bg-white/70 px-4 py-3 text-sm font-semibold text-zinc-700 shadow-sm dark:border-zinc-700 dark:bg-zinc-950/50 dark:text-zinc-200 xl:col-span-4">
<label class="flex min-h-9 items-center gap-2 rounded-lg border border-zinc-200 bg-white px-3 py-2 text-xs font-semibold text-zinc-700 shadow-sm dark:border-zinc-700 dark:bg-zinc-950/60 dark:text-zinc-200 xl:col-span-4">
<input type="checkbox" wire:model="statusForm.is_default"
class="rounded border-zinc-300 bg-zinc-950 text-blue-600 focus:ring-blue-500">
Default status for new tickets
</label>
<div class="flex flex-wrap items-center gap-2 xl:col-span-12">
<flux:button type="submit" variant="primary"
class="!bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">Save status
<flux:button size="sm" type="submit" variant="primary"
class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">Save status
</flux:button>
<flux:button type="button" wire:click="resetStatusForm" variant="ghost"
class="!bg-amber-500 !text-white hover:!bg-amber-600 focus:!ring-amber-300/60">Reset
<flux:button size="sm" type="button" wire:click="resetStatusForm" variant="ghost"
class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-amber-500 !text-white hover:!bg-amber-600 focus:!ring-amber-300/60">Reset
</flux:button>
</div>
</form>
@@ -177,28 +177,28 @@
@if ($section === 'priorities')
<x-helpdesk::settings-section title="Priorities" description="Define ticket urgency levels and display order.">
<x-slot:form>
<form wire:submit.prevent="savePriority" class="grid gap-5 xl:grid-cols-12">
<form wire:submit.prevent="savePriority" class="grid gap-3 xl:grid-cols-12">
<div class="xl:col-span-3">
<flux:input wire:model="priorityForm.name" label="Name" />
</div>
<div class="xl:col-span-3">
<flux:input wire:model="priorityForm.slug" label="Slug" placeholder="auto-generated" />
</div>
<x-helpdesk::colour-select class="xl:col-span-4" model="priorityForm.color" label="Badge colour" :options="$colourOptions" />
<x-helpdesk::colour-select class="xl:col-span-12" model="priorityForm.color" label="Badge colour" :options="$colourOptions" />
<div class="xl:col-span-2">
<flux:input wire:model="priorityForm.sort_order" label="Sort" type="number" min="0" />
</div>
<label class="flex min-h-12 items-center gap-3 rounded-xl border border-zinc-200 bg-white/70 px-4 py-3 text-sm font-semibold text-zinc-700 shadow-sm dark:border-zinc-700 dark:bg-zinc-950/50 dark:text-zinc-200 xl:col-span-4">
<label class="flex min-h-9 items-center gap-2 rounded-lg border border-zinc-200 bg-white px-3 py-2 text-xs font-semibold text-zinc-700 shadow-sm dark:border-zinc-700 dark:bg-zinc-950/60 dark:text-zinc-200 xl:col-span-4">
<input type="checkbox" wire:model="priorityForm.is_default"
class="rounded border-zinc-300 bg-zinc-950 text-blue-600 focus:ring-blue-500">
Default for new tickets
</label>
<div class="flex flex-wrap items-center gap-2 xl:col-span-12">
<flux:button type="submit" variant="primary"
class="!bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">Save priority
<flux:button size="sm" type="submit" variant="primary"
class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">Save priority
</flux:button>
<flux:button type="button" wire:click="resetPriorityForm" variant="ghost"
class="!bg-amber-500 !text-white hover:!bg-amber-600 focus:!ring-amber-300/60">Reset
<flux:button size="sm" type="button" wire:click="resetPriorityForm" variant="ghost"
class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-amber-500 !text-white hover:!bg-amber-600 focus:!ring-amber-300/60">Reset
</flux:button>
</div>
</form>
@@ -211,7 +211,7 @@
<x-helpdesk::settings-section title="Categories"
description="Group tickets by support area, optionally per company.">
<x-slot:form>
<form wire:submit.prevent="saveCategory" class="grid gap-5 xl:grid-cols-12">
<form wire:submit.prevent="saveCategory" class="grid gap-3 xl:grid-cols-12">
<div class="xl:col-span-3">
<flux:select wire:model="categoryForm.company_id" label="Company">
<option value="">Global</option>
@@ -226,21 +226,21 @@
<div class="xl:col-span-3">
<flux:input wire:model="categoryForm.slug" label="Slug" placeholder="auto-generated" />
</div>
<x-helpdesk::colour-select class="xl:col-span-3" model="categoryForm.color" label="Badge colour" :options="$colourOptions" />
<x-helpdesk::colour-select class="xl:col-span-12" model="categoryForm.color" label="Badge colour" :options="$colourOptions" />
<div class="xl:col-span-12">
<flux:textarea wire:model="categoryForm.description" label="Description" rows="3" />
</div>
<label class="flex min-h-12 items-center gap-3 rounded-xl border border-zinc-200 bg-white/70 px-4 py-3 text-sm font-semibold text-zinc-700 shadow-sm dark:border-zinc-700 dark:bg-zinc-950/50 dark:text-zinc-200 xl:col-span-4">
<label class="flex min-h-9 items-center gap-2 rounded-lg border border-zinc-200 bg-white px-3 py-2 text-xs font-semibold text-zinc-700 shadow-sm dark:border-zinc-700 dark:bg-zinc-950/60 dark:text-zinc-200 xl:col-span-4">
<input type="checkbox" wire:model="categoryForm.is_default"
class="rounded border-zinc-300 bg-zinc-950 text-blue-600 focus:ring-blue-500">
Default category for new tickets
</label>
<div class="flex flex-wrap items-center gap-2 xl:col-span-12">
<flux:button type="submit" variant="primary"
class="!bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">Save
<flux:button size="sm" type="submit" variant="primary"
class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">Save
category</flux:button>
<flux:button type="button" wire:click="resetCategoryForm" variant="ghost"
class="!bg-amber-500 !text-white hover:!bg-amber-600 focus:!ring-amber-300/60">Reset
<flux:button size="sm" type="button" wire:click="resetCategoryForm" variant="ghost"
class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-amber-500 !text-white hover:!bg-amber-600 focus:!ring-amber-300/60">Reset
</flux:button>
</div>
</form>
@@ -253,7 +253,7 @@
<x-helpdesk::settings-section title="Teams"
description="Create support teams under each company and assign projects to them.">
<x-slot:form>
<form wire:submit.prevent="saveTeam" class="grid gap-5 xl:grid-cols-12">
<form wire:submit.prevent="saveTeam" class="grid gap-3 xl:grid-cols-12">
<div class="xl:col-span-3">
<flux:select wire:model="teamForm.company_id" label="Company">
<option value="">Global</option>
@@ -268,21 +268,21 @@
<div class="xl:col-span-3">
<flux:input wire:model="teamForm.slug" label="Slug" placeholder="auto-generated" />
</div>
<x-helpdesk::colour-select class="xl:col-span-3" model="teamForm.color" label="Badge colour" :options="$colourOptions" />
<x-helpdesk::colour-select class="xl:col-span-12" model="teamForm.color" label="Badge colour" :options="$colourOptions" />
<div class="xl:col-span-12">
<flux:textarea wire:model="teamForm.description" label="Description" rows="3" />
</div>
<label class="flex min-h-12 items-center gap-3 rounded-xl border border-zinc-200 bg-white/70 px-4 py-3 text-sm font-semibold text-zinc-700 shadow-sm dark:border-zinc-700 dark:bg-zinc-950/50 dark:text-zinc-200 xl:col-span-4">
<label class="flex min-h-9 items-center gap-2 rounded-lg border border-zinc-200 bg-white px-3 py-2 text-xs font-semibold text-zinc-700 shadow-sm dark:border-zinc-700 dark:bg-zinc-950/60 dark:text-zinc-200 xl:col-span-4">
<input type="checkbox" wire:model="teamForm.is_default"
class="rounded border-zinc-300 bg-zinc-950 text-blue-600 focus:ring-blue-500">
Default team for new tickets
</label>
<div class="flex flex-wrap items-center gap-2 xl:col-span-12">
<flux:button type="submit" variant="primary"
class="!bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">Save team
<flux:button size="sm" type="submit" variant="primary"
class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">Save team
</flux:button>
<flux:button type="button" wire:click="resetTeamForm" variant="ghost"
class="!bg-amber-500 !text-white hover:!bg-amber-600 focus:!ring-amber-300/60">Reset
<flux:button size="sm" type="button" wire:click="resetTeamForm" variant="ghost"
class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-amber-500 !text-white hover:!bg-amber-600 focus:!ring-amber-300/60">Reset
</flux:button>
</div>
</form>
@@ -295,7 +295,7 @@
<x-helpdesk::settings-section title="Projects"
description="Create company projects and optionally assign them to support teams.">
<x-slot:form>
<form wire:submit.prevent="saveProject" class="grid gap-5 xl:grid-cols-12">
<form wire:submit.prevent="saveProject" class="grid gap-3 xl:grid-cols-12">
<div class="xl:col-span-2">
<flux:select wire:model="projectForm.company_id" label="Company">
<option value="">Global</option>
@@ -318,21 +318,21 @@
<div class="xl:col-span-2">
<flux:input wire:model="projectForm.slug" label="Slug" placeholder="auto-generated" />
</div>
<x-helpdesk::colour-select class="xl:col-span-4" model="projectForm.color" label="Badge colour" :options="$colourOptions" />
<x-helpdesk::colour-select class="xl:col-span-12" model="projectForm.color" label="Badge colour" :options="$colourOptions" />
<div class="xl:col-span-12">
<flux:textarea wire:model="projectForm.description" label="Description" rows="3" />
</div>
<label class="flex min-h-12 items-center gap-3 rounded-xl border border-zinc-200 bg-white/70 px-4 py-3 text-sm font-semibold text-zinc-700 shadow-sm dark:border-zinc-700 dark:bg-zinc-950/50 dark:text-zinc-200 xl:col-span-4">
<label class="flex min-h-9 items-center gap-2 rounded-lg border border-zinc-200 bg-white px-3 py-2 text-xs font-semibold text-zinc-700 shadow-sm dark:border-zinc-700 dark:bg-zinc-950/60 dark:text-zinc-200 xl:col-span-4">
<input type="checkbox" wire:model="projectForm.is_default"
class="rounded border-zinc-300 bg-zinc-950 text-blue-600 focus:ring-blue-500">
Default project for new tickets
</label>
<div class="flex flex-wrap items-center gap-2 xl:col-span-12">
<flux:button type="submit" variant="primary"
class="!bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">Save project
<flux:button size="sm" type="submit" variant="primary"
class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">Save project
</flux:button>
<flux:button type="button" wire:click="resetProjectForm" variant="ghost"
class="!bg-amber-500 !text-white hover:!bg-amber-600 focus:!ring-amber-300/60">Reset
<flux:button size="sm" type="button" wire:click="resetProjectForm" variant="ghost"
class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-amber-500 !text-white hover:!bg-amber-600 focus:!ring-amber-300/60">Reset
</flux:button>
</div>
</form>
@@ -346,7 +346,7 @@
<x-helpdesk::settings-section title="Kanban Boards"
description="Create configurable workflow boards and choose which statuses appear as draggable columns.">
<x-slot:form>
<form wire:submit.prevent="saveBoard" class="grid gap-4 md:grid-cols-7">
<form wire:submit.prevent="saveBoard" class="grid gap-3 md:grid-cols-7">
<flux:input wire:model="boardForm.name" label="Name" />
<flux:input wire:model="boardForm.slug" label="Slug" placeholder="auto-generated" />
<flux:input wire:model="boardForm.sort_order" label="Sort" type="number" min="0" />
@@ -356,14 +356,14 @@
<option value="{{ $owner->id }}">{{ $owner->name }}</option>
@endforeach
</flux:select>
<label class="flex items-end gap-2 pb-2 text-sm text-zinc-700 dark:text-zinc-200">
<label class="flex min-h-9 items-center gap-2 rounded-lg border border-zinc-200 bg-white px-3 py-2 text-xs font-semibold text-zinc-700 shadow-sm dark:border-zinc-700 dark:bg-zinc-950/60 dark:text-zinc-200">
<input type="checkbox" wire:model="boardForm.is_default" class="rounded border-zinc-300">
Default board
</label>
<div class="md:col-span-2">
<flux:textarea wire:model="boardForm.description" label="Description" rows="2" />
</div>
<div class="md:col-span-7">
<div class="md:col-span-full">
<label class="mb-2 block text-sm font-medium text-zinc-700 dark:text-zinc-200">Board
columns</label>
<div class="grid gap-2 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
@@ -379,12 +379,12 @@
@endforeach
</div>
</div>
<div class="md:col-span-7 flex gap-2">
<flux:button type="submit" variant="primary"
class="!bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">Save board
<div class="md:col-span-full flex gap-2">
<flux:button size="sm" type="submit" variant="primary"
class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">Save board
</flux:button>
<flux:button type="button" wire:click="resetBoardForm" variant="ghost"
class="!bg-amber-500 !text-white hover:!bg-amber-600 focus:!ring-amber-300/60">Reset
<flux:button size="sm" type="button" wire:click="resetBoardForm" variant="ghost"
class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-amber-500 !text-white hover:!bg-amber-600 focus:!ring-amber-300/60">Reset
</flux:button>
</div>
</form>
@@ -430,12 +430,12 @@
<td class="px-4 py-3 text-right">
<flux:button size="sm" variant="primary"
wire:click="editBoard({{ $boardItem->id }})"
class="!bg-blue-600 !text-white hover:!bg-blue-700 focus:!ring-blue-400/60">
class="!h-8 !rounded-lg !px-2.5 !text-xs !font-semibold !bg-blue-600 !text-white hover:!bg-blue-700 focus:!ring-blue-400/60">
Edit</flux:button>
<flux:button size="sm" variant="danger"
wire:click="deleteBoard({{ $boardItem->id }})"
wire:confirm="Delete this board?"
class="!bg-red-600 !text-white hover:!bg-red-700 focus:!ring-red-400/60">Delete
class="!h-8 !rounded-lg !px-2.5 !text-xs !font-semibold !bg-red-600 !text-white hover:!bg-red-700 focus:!ring-red-400/60">Delete
</flux:button>
</td>
</tr>
@@ -455,7 +455,7 @@
<x-helpdesk::settings-section title="Git repositories"
description="Configure repositories that can be linked to projects and tickets. Commits can then be stored against tickets for traceability.">
<x-slot:form>
<form wire:submit.prevent="saveRepository" class="grid gap-4 md:grid-cols-6">
<form wire:submit.prevent="saveRepository" class="grid gap-3 md:grid-cols-6">
<flux:select wire:model="repositoryForm.company_id" label="Company">
<option value="">Global</option>
@foreach ($companies as $company)
@@ -473,16 +473,16 @@
placeholder="git, github, gitlab" />
<flux:input wire:model="repositoryForm.default_branch" label="Default branch" />
<flux:input wire:model="repositoryForm.webhook_secret" label="Webhook secret" />
<div class="md:col-span-7">
<div class="md:col-span-full">
<flux:input wire:model="repositoryForm.remote_url" label="Remote URL"
placeholder="git@github.com:company/repo.git" />
</div>
<div class="md:col-span-7 flex gap-2">
<flux:button type="submit" variant="primary"
class="!bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">Save
<div class="md:col-span-full flex gap-2">
<flux:button size="sm" type="submit" variant="primary"
class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">Save
repository</flux:button>
<flux:button type="button" wire:click="resetRepositoryForm" variant="ghost"
class="!bg-amber-500 !text-white hover:!bg-amber-600 focus:!ring-amber-300/60">Reset
<flux:button size="sm" type="button" wire:click="resetRepositoryForm" variant="ghost"
class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-amber-500 !text-white hover:!bg-amber-600 focus:!ring-amber-300/60">Reset
</flux:button>
</div>
</form>
@@ -496,7 +496,7 @@
<x-helpdesk::settings-section title="Workflow messages"
description="Define the professional email messages sent when tickets are raised, updated, replied to and closed.">
<x-slot:form>
<form wire:submit.prevent="saveWorkflowTemplate" class="grid gap-4 md:grid-cols-6">
<form wire:submit.prevent="saveWorkflowTemplate" class="grid gap-3 md:grid-cols-6">
<flux:input wire:model="workflowForm.name" label="Name" />
<flux:select wire:model="workflowForm.event" label="Event">
<option value="ticket.created">Ticket raised</option>
@@ -514,27 +514,27 @@
placeholder="Optional comma-separated emails" />
<flux:input wire:model="workflowForm.bcc" label="BCC"
placeholder="Optional comma-separated emails" />
<label class="flex items-end gap-2 pb-2 text-sm text-zinc-700 dark:text-zinc-200"><input
<label class="flex min-h-9 items-center gap-2 rounded-lg border border-zinc-200 bg-white px-3 py-2 text-xs font-semibold text-zinc-700 shadow-sm dark:border-zinc-700 dark:bg-zinc-950/60 dark:text-zinc-200"><input
type="checkbox" wire:model="workflowForm.is_active" class="rounded border-zinc-300">
Active</label>
<div class="md:col-span-7">
<div class="md:col-span-full">
<flux:input wire:model="workflowForm.subject" label="Subject"
placeholder="Ticket @{{ ticket.reference }} has been raised" />
</div>
<div class="md:col-span-7">
<div class="md:col-span-full">
<flux:textarea wire:model="workflowForm.html_body" label="HTML email body" rows="8"
placeholder="Use tokens like @{{ ticket.reference }}, @{{ ticket.subject }}, @{{ ticket.status }}, @{{ requester.name }}, @{{ ticket.url }}" />
</div>
<div class="md:col-span-7">
<div class="md:col-span-full">
<flux:textarea wire:model="workflowForm.text_body" label="Plain text body" rows="4"
placeholder="Optional fallback text" />
</div>
<div class="md:col-span-7 flex gap-2">
<flux:button type="submit" variant="primary"
class="!bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">Save
<div class="md:col-span-full flex gap-2">
<flux:button size="sm" type="submit" variant="primary"
class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">Save
workflow message</flux:button>
<flux:button type="button" wire:click="resetWorkflowTemplateForm" variant="ghost"
class="!bg-amber-500 !text-white hover:!bg-amber-600 focus:!ring-amber-300/60">Reset
<flux:button size="sm" type="button" wire:click="resetWorkflowTemplateForm" variant="ghost"
class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-amber-500 !text-white hover:!bg-amber-600 focus:!ring-amber-300/60">Reset
</flux:button>
</div>
</form>
@@ -567,12 +567,12 @@
<td class="px-4 py-3 text-right">
<flux:button size="sm" variant="ghost"
wire:click="editWorkflowTemplate({{ $template->id }})"
class="!bg-blue-600 !text-white hover:!bg-blue-700 focus:!ring-blue-400/60">
class="!h-8 !rounded-lg !px-2.5 !text-xs !font-semibold !bg-blue-600 !text-white hover:!bg-blue-700 focus:!ring-blue-400/60">
Edit</flux:button>
<flux:button size="sm" variant="danger"
wire:click="deleteWorkflowTemplate({{ $template->id }})"
wire:confirm="Delete this workflow message?"
class="!bg-red-600 !text-white hover:!bg-red-700 focus:!ring-red-400/60">Delete
class="!h-8 !rounded-lg !px-2.5 !text-xs !font-semibold !bg-red-600 !text-white hover:!bg-red-700 focus:!ring-red-400/60">Delete
</flux:button>
</td>
</tr>
@@ -593,7 +593,7 @@
<x-helpdesk::settings-section title="Canned responses"
description="Save professional reusable replies with macro tokens for ticket, requester, agent, status and URL values.">
<x-slot:form>
<form wire:submit.prevent="saveCannedResponse" class="grid gap-4 md:grid-cols-6">
<form wire:submit.prevent="saveCannedResponse" class="grid gap-3 md:grid-cols-6">
<flux:input wire:model="cannedForm.name" label="Name" />
<flux:input wire:model="cannedForm.slug" label="Slug" placeholder="auto-generated" />
<flux:input wire:model="cannedForm.sort_order" label="Sort" type="number" min="0" />
@@ -609,22 +609,22 @@
<option value="{{ $team->id }}">{{ $team->name }}</option>
@endforeach
</flux:select>
<label class="flex items-end gap-2 pb-2 text-sm text-zinc-700 dark:text-zinc-200"><input
<label class="flex min-h-9 items-center gap-2 rounded-lg border border-zinc-200 bg-white px-3 py-2 text-xs font-semibold text-zinc-700 shadow-sm dark:border-zinc-700 dark:bg-zinc-950/60 dark:text-zinc-200"><input
type="checkbox" wire:model="cannedForm.is_active" class="rounded border-zinc-300">
Active</label>
<div class="md:col-span-7">
<div class="md:col-span-full">
<flux:input wire:model="cannedForm.subject" label="Optional subject" />
</div>
<div class="md:col-span-7">
<div class="md:col-span-full">
<flux:textarea wire:model="cannedForm.body" label="Reply body" rows="6"
placeholder="Hello @{{ requester.name }},&#10;&#10;Your ticket @{{ ticket.reference }} has been reviewed." />
</div>
<div class="md:col-span-7 flex gap-2">
<flux:button type="submit" variant="primary"
class="!bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">Save canned
<div class="md:col-span-full flex gap-2">
<flux:button size="sm" type="submit" variant="primary"
class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">Save canned
response</flux:button>
<flux:button type="button" wire:click="resetCannedResponseForm" variant="ghost"
class="!bg-amber-500 !text-white hover:!bg-amber-600 focus:!ring-amber-300/60">Reset
<flux:button size="sm" type="button" wire:click="resetCannedResponseForm" variant="ghost"
class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-amber-500 !text-white hover:!bg-amber-600 focus:!ring-amber-300/60">Reset
</flux:button>
</div>
</form>
@@ -646,12 +646,12 @@
<div class="mt-4 flex justify-end gap-2">
<flux:button size="sm" variant="primary"
wire:click="editCannedResponse({{ $response->id }})"
class="!bg-blue-600 !text-white hover:!bg-blue-700 focus:!ring-blue-400/60">Edit
class="!h-8 !rounded-lg !px-2.5 !text-xs !font-semibold !bg-blue-600 !text-white hover:!bg-blue-700 focus:!ring-blue-400/60">Edit
</flux:button>
<flux:button size="sm" variant="danger"
wire:click="deleteCannedResponse({{ $response->id }})"
wire:confirm="Delete this canned response?"
class="!bg-red-600 !text-white hover:!bg-red-700 focus:!ring-red-400/60">Delete
class="!h-8 !rounded-lg !px-2.5 !text-xs !font-semibold !bg-red-600 !text-white hover:!bg-red-700 focus:!ring-red-400/60">Delete
</flux:button>
</div>
</div>
@@ -668,7 +668,7 @@
<x-helpdesk::settings-section title="SLA policies"
description="Define first response and resolution targets used for breach indicators, reporting and ticket cards.">
<x-slot:form>
<form wire:submit.prevent="saveSlaPolicy" class="grid gap-4 md:grid-cols-6">
<form wire:submit.prevent="saveSlaPolicy" class="grid gap-3 md:grid-cols-6">
<flux:input wire:model="slaForm.name" label="Name" />
<flux:input wire:model="slaForm.slug" label="Slug" placeholder="auto-generated" />
<flux:select wire:model="slaForm.priority_id" label="Priority">
@@ -696,12 +696,12 @@
<label class="flex items-center gap-2 text-sm text-zinc-700 dark:text-zinc-200"><input
type="checkbox" wire:model="slaForm.is_active" class="rounded border-zinc-300">
Active</label>
<div class="md:col-span-7 flex gap-2">
<flux:button type="submit" variant="primary"
class="!bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">Save SLA
<div class="md:col-span-full flex gap-2">
<flux:button size="sm" type="submit" variant="primary"
class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">Save SLA
policy</flux:button>
<flux:button type="button" wire:click="resetSlaPolicyForm" variant="ghost"
class="!bg-amber-500 !text-white hover:!bg-amber-600 focus:!ring-amber-300/60">Reset
<flux:button size="sm" type="button" wire:click="resetSlaPolicyForm" variant="ghost"
class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-amber-500 !text-white hover:!bg-amber-600 focus:!ring-amber-300/60">Reset
</flux:button>
</div>
</form>
@@ -731,12 +731,12 @@
<td class="px-4 py-3 text-right">
<flux:button size="sm" variant="primary"
wire:click="editSlaPolicy({{ $policy->id }})"
class="!bg-blue-600 !text-white hover:!bg-blue-700 focus:!ring-blue-400/60">
class="!h-8 !rounded-lg !px-2.5 !text-xs !font-semibold !bg-blue-600 !text-white hover:!bg-blue-700 focus:!ring-blue-400/60">
Edit</flux:button>
<flux:button size="sm" variant="danger"
wire:click="deleteSlaPolicy({{ $policy->id }})"
wire:confirm="Delete this SLA policy?"
class="!bg-red-600 !text-white hover:!bg-red-700 focus:!ring-red-400/60">Delete
class="!h-8 !rounded-lg !px-2.5 !text-xs !font-semibold !bg-red-600 !text-white hover:!bg-red-700 focus:!ring-red-400/60">Delete
</flux:button>
</td>
</tr>@empty<tr>
@@ -754,7 +754,7 @@
<x-helpdesk::settings-section title="Email automation rules"
description="Match incoming support messages and automatically assign priority, category, team, project, agent and status.">
<x-slot:form>
<form wire:submit.prevent="saveAutomationRule" class="grid gap-4 md:grid-cols-6">
<form wire:submit.prevent="saveAutomationRule" class="grid gap-3 md:grid-cols-6">
<flux:input wire:model="automationForm.name" label="Name" />
<flux:input wire:model="automationForm.slug" label="Slug" placeholder="auto-generated" />
<flux:input wire:model="automationForm.sort_order" label="Sort" type="number"
@@ -792,15 +792,15 @@
<option value="{{ $status->id }}">{{ $status->name }}</option>
@endforeach
</flux:select>
<label class="flex items-end gap-2 pb-2 text-sm text-zinc-700 dark:text-zinc-200"><input
<label class="flex min-h-9 items-center gap-2 rounded-lg border border-zinc-200 bg-white px-3 py-2 text-xs font-semibold text-zinc-700 shadow-sm dark:border-zinc-700 dark:bg-zinc-950/60 dark:text-zinc-200"><input
type="checkbox" wire:model="automationForm.is_active" class="rounded border-zinc-300">
Active</label>
<div class="md:col-span-7 flex gap-2">
<flux:button type="submit" variant="primary"
class="!bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">Save
<div class="md:col-span-full flex gap-2">
<flux:button size="sm" type="submit" variant="primary"
class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">Save
automation rule</flux:button>
<flux:button type="button" wire:click="resetAutomationRuleForm" variant="ghost"
class="!bg-amber-500 !text-white hover:!bg-amber-600 focus:!ring-amber-300/60">Reset
<flux:button size="sm" type="button" wire:click="resetAutomationRuleForm" variant="ghost"
class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-amber-500 !text-white hover:!bg-amber-600 focus:!ring-amber-300/60">Reset
</flux:button>
</div>
</form>
@@ -814,12 +814,12 @@
<div class="mt-4 flex justify-end gap-2">
<flux:button size="sm" variant="primary"
wire:click="editAutomationRule({{ $rule->id }})"
class="!bg-blue-600 !text-white hover:!bg-blue-700 focus:!ring-blue-400/60">Edit
class="!h-8 !rounded-lg !px-2.5 !text-xs !font-semibold !bg-blue-600 !text-white hover:!bg-blue-700 focus:!ring-blue-400/60">Edit
</flux:button>
<flux:button size="sm" variant="danger"
wire:click="deleteAutomationRule({{ $rule->id }})"
wire:confirm="Delete this rule?"
class="!bg-red-600 !text-white hover:!bg-red-700 focus:!ring-red-400/60">Delete
class="!h-8 !rounded-lg !px-2.5 !text-xs !font-semibold !bg-red-600 !text-white hover:!bg-red-700 focus:!ring-red-400/60">Delete
</flux:button>
</div>
</div>@empty<div
@@ -834,7 +834,7 @@
<x-helpdesk::settings-section title="Checklist templates"
description="Apply repeatable checklist items by category or project and show completion progress on tickets and Kanban cards.">
<x-slot:form>
<form wire:submit.prevent="saveChecklistTemplate" class="grid gap-4 md:grid-cols-6">
<form wire:submit.prevent="saveChecklistTemplate" class="grid gap-3 md:grid-cols-6">
<flux:input wire:model="checklistTemplateForm.name" label="Name" />
<flux:input wire:model="checklistTemplateForm.slug" label="Slug" />
<flux:select wire:model="checklistTemplateForm.category_id" label="Category">
@@ -852,16 +852,16 @@
<label class="flex items-end gap-2 pb-2 text-sm"><input type="checkbox"
wire:model="checklistTemplateForm.is_active" class="rounded border-zinc-300">
Active</label>
<div class="md:col-span-7">
<div class="md:col-span-full">
<flux:textarea wire:model="checklistTemplateForm.items_text"
label="Checklist items, one per line" rows="6" />
</div>
<div class="md:col-span-7 flex gap-2">
<flux:button type="submit" variant="primary"
class="!bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">Save
<div class="md:col-span-full flex gap-2">
<flux:button size="sm" type="submit" variant="primary"
class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">Save
checklist</flux:button>
<flux:button type="button" wire:click="resetChecklistTemplateForm" variant="ghost"
class="!bg-amber-500 !text-white hover:!bg-amber-600 focus:!ring-amber-300/60">Reset
<flux:button size="sm" type="button" wire:click="resetChecklistTemplateForm" variant="ghost"
class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-amber-500 !text-white hover:!bg-amber-600 focus:!ring-amber-300/60">Reset
</flux:button>
</div>
</form>
@@ -874,12 +874,12 @@
<div class="mt-4 flex justify-end gap-2">
<flux:button size="sm" variant="primary"
wire:click="editChecklistTemplate({{ $template->id }})"
class="!bg-blue-600 !text-white hover:!bg-blue-700 focus:!ring-blue-400/60">Edit
class="!h-8 !rounded-lg !px-2.5 !text-xs !font-semibold !bg-blue-600 !text-white hover:!bg-blue-700 focus:!ring-blue-400/60">Edit
</flux:button>
<flux:button size="sm" variant="danger"
wire:click="deleteChecklistTemplate({{ $template->id }})"
wire:confirm="Delete this checklist?"
class="!bg-red-600 !text-white hover:!bg-red-700 focus:!ring-red-400/60">Delete
class="!h-8 !rounded-lg !px-2.5 !text-xs !font-semibold !bg-red-600 !text-white hover:!bg-red-700 focus:!ring-red-400/60">Delete
</flux:button>
</div>
</div>@empty<div
@@ -894,20 +894,20 @@
<x-helpdesk::settings-section title="Ticket tags"
description="Maintain visible ticket labels for search, triage and Kanban card context.">
<x-slot:form>
<form wire:submit.prevent="saveTag" class="grid gap-5 xl:grid-cols-12">
<form wire:submit.prevent="saveTag" class="grid gap-3 xl:grid-cols-12">
<div class="xl:col-span-4">
<flux:input wire:model="tagForm.name" label="Name" />
</div>
<div class="xl:col-span-4">
<flux:input wire:model="tagForm.slug" label="Slug" />
</div>
<x-helpdesk::colour-select class="xl:col-span-4" model="tagForm.color" label="Colour" :options="$colourOptions" />
<x-helpdesk::colour-select class="xl:col-span-12" model="tagForm.color" label="Colour" :options="$colourOptions" />
<div class="flex flex-wrap items-center gap-2 xl:col-span-12">
<flux:button type="submit" variant="primary"
class="!bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">Save tag
<flux:button size="sm" type="submit" variant="primary"
class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">Save tag
</flux:button>
<flux:button type="button" wire:click="resetTagForm" variant="ghost"
class="!bg-amber-500 !text-white hover:!bg-amber-600 focus:!ring-amber-300/60">Reset
<flux:button size="sm" type="button" wire:click="resetTagForm" variant="ghost"
class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-amber-500 !text-white hover:!bg-amber-600 focus:!ring-amber-300/60">Reset
</flux:button>
</div>
</form>
@@ -920,11 +920,11 @@
style="background-color: {{ \Modules\Helpdesk\Support\Color::css($tag->color) }}">{{ $tag->name }}</span>
<div class="mt-3 flex gap-2">
<flux:button size="sm" variant="primary" wire:click="editTag({{ $tag->id }})"
class="!bg-blue-600 !text-white hover:!bg-blue-700 focus:!ring-blue-400/60">Edit
class="!h-8 !rounded-lg !px-2.5 !text-xs !font-semibold !bg-blue-600 !text-white hover:!bg-blue-700 focus:!ring-blue-400/60">Edit
</flux:button>
<flux:button size="sm" variant="danger" wire:click="deleteTag({{ $tag->id }})"
wire:confirm="Delete this tag?"
class="!bg-red-600 !text-white hover:!bg-red-700 focus:!ring-red-400/60">Delete
class="!h-8 !rounded-lg !px-2.5 !text-xs !font-semibold !bg-red-600 !text-white hover:!bg-red-700 focus:!ring-red-400/60">Delete
</flux:button>
</div>
</div>@empty<div
@@ -939,7 +939,7 @@
<x-helpdesk::settings-section title="Products and services"
description="Link tickets to products, services, releases or builds and report support cost/time by product.">
<x-slot:form>
<form wire:submit.prevent="saveProduct" class="grid gap-4 md:grid-cols-6">
<form wire:submit.prevent="saveProduct" class="grid gap-3 md:grid-cols-6">
<flux:input wire:model="productForm.name" label="Name" />
<flux:input wire:model="productForm.slug" label="Slug" />
<flux:input wire:model="productForm.type" label="Type" />
@@ -947,15 +947,15 @@
<flux:input wire:model="productForm.release_channel" label="Release/build" /><label
class="flex items-end gap-2 pb-2 text-sm"><input type="checkbox"
wire:model="productForm.is_active" class="rounded border-zinc-300"> Active</label>
<div class="md:col-span-7">
<div class="md:col-span-full">
<flux:textarea wire:model="productForm.description" label="Description" rows="3" />
</div>
<div class="md:col-span-7 flex gap-2">
<flux:button type="submit" variant="primary"
class="!bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">Save
<div class="md:col-span-full flex gap-2">
<flux:button size="sm" type="submit" variant="primary"
class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">Save
product/service</flux:button>
<flux:button type="button" wire:click="resetProductForm" variant="ghost"
class="!bg-amber-500 !text-white hover:!bg-amber-600 focus:!ring-amber-300/60">Reset
<flux:button size="sm" type="button" wire:click="resetProductForm" variant="ghost"
class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-amber-500 !text-white hover:!bg-amber-600 focus:!ring-amber-300/60">Reset
</flux:button>
</div>
</form>
@@ -969,12 +969,12 @@
<div class="mt-4 flex justify-end gap-2">
<flux:button size="sm" variant="primary"
wire:click="editProduct({{ $product->id }})"
class="!bg-blue-600 !text-white hover:!bg-blue-700 focus:!ring-blue-400/60">Edit
class="!h-8 !rounded-lg !px-2.5 !text-xs !font-semibold !bg-blue-600 !text-white hover:!bg-blue-700 focus:!ring-blue-400/60">Edit
</flux:button>
<flux:button size="sm" variant="danger"
wire:click="deleteProduct({{ $product->id }})"
wire:confirm="Delete this product/service?"
class="!bg-red-600 !text-white hover:!bg-red-700 focus:!ring-red-400/60">Delete
class="!h-8 !rounded-lg !px-2.5 !text-xs !font-semibold !bg-red-600 !text-white hover:!bg-red-700 focus:!ring-red-400/60">Delete
</flux:button>
</div>
</div>@empty<div