1008 lines
68 KiB
PHP
Executable File
1008 lines
68 KiB
PHP
Executable File
@php
|
|
/**
|
|
* Keep the settings view safe during rolling module upgrades or Livewire navigate
|
|
* hydration where the compiled Blade view may be newer than the loaded component.
|
|
*/
|
|
$companies = collect($companies ?? []);
|
|
$statuses = collect($statuses ?? []);
|
|
$priorities = collect($priorities ?? []);
|
|
$categories = collect($categories ?? []);
|
|
$teams = collect($teams ?? []);
|
|
$projects = collect($projects ?? []);
|
|
$boards = collect($boards ?? []);
|
|
$repositories = collect($repositories ?? []);
|
|
$workflowTemplates = collect($workflowTemplates ?? []);
|
|
$cannedResponses = collect($cannedResponses ?? []);
|
|
$slaPolicies = collect($slaPolicies ?? []);
|
|
$automationRules = collect($automationRules ?? []);
|
|
$checklistTemplates = collect($checklistTemplates ?? []);
|
|
$tags = collect($tags ?? []);
|
|
$products = collect($products ?? []);
|
|
@endphp
|
|
|
|
<div class="hd-helpdesk-surface space-y-4" dusk="helpdesk-settings-manager">
|
|
<div
|
|
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-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>
|
|
|
|
<div class="flex flex-wrap gap-2">
|
|
<a href="{{ route('helpdesk.index') }}" wire:navigate class="hd-btn hd-btn-blue">
|
|
<i class="fa-solid fa-gauge-high" aria-hidden="true"></i>
|
|
<span>Dashboard</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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()],
|
|
'categories' => ['label' => 'Categories', 'count' => $categories->count()],
|
|
'teams' => ['label' => 'Teams', 'count' => $teams->count()],
|
|
'projects' => ['label' => 'Projects', 'count' => $projects->count()],
|
|
'boards' => ['label' => 'Boards', 'count' => $boards->count()],
|
|
'git' => ['label' => 'Git', 'count' => $repositories->count()],
|
|
'workflow' => ['label' => 'Workflow', 'count' => $workflowTemplates->count()],
|
|
'canned' => ['label' => 'Canned', 'count' => $cannedResponses->count()],
|
|
'sla' => ['label' => 'SLA', 'count' => $slaPolicies->count()],
|
|
'automation' => ['label' => 'Rules', 'count' => $automationRules->count()],
|
|
'checklists' => ['label' => 'Checks', 'count' => $checklistTemplates->count()],
|
|
'tags' => ['label' => 'Tags', 'count' => $tags->count()],
|
|
'products' => ['label' => 'Products', 'count' => $products->count()],
|
|
'defaults' => ['label' => 'Defaults', 'count' => 1],
|
|
] as $key => $item)
|
|
@php
|
|
$sectionPalette = match ($key) {
|
|
'statuses' => ['border' => '#38bdf8', 'bg' => 'rgba(14, 165, 233, .22)', 'active' => '#0284c7'],
|
|
'priorities' => ['border' => '#f87171', 'bg' => 'rgba(239, 68, 68, .22)', 'active' => '#dc2626'],
|
|
'categories' => ['border' => '#818cf8', 'bg' => 'rgba(99, 102, 241, .22)', 'active' => '#4f46e5'],
|
|
'teams' => ['border' => '#60a5fa', 'bg' => 'rgba(37, 99, 235, .22)', 'active' => '#2563eb'],
|
|
'projects' => ['border' => '#22d3ee', 'bg' => 'rgba(8, 145, 178, .22)', 'active' => '#0891b2'],
|
|
'boards' => ['border' => '#fbbf24', 'bg' => 'rgba(245, 158, 11, .24)', 'active' => '#f59e0b'],
|
|
'git' => ['border' => '#94a3b8', 'bg' => 'rgba(71, 85, 105, .28)', 'active' => '#475569'],
|
|
'workflow' => ['border' => '#34d399', 'bg' => 'rgba(5, 150, 105, .22)', 'active' => '#059669'],
|
|
'canned' => ['border' => '#2dd4bf', 'bg' => 'rgba(13, 148, 136, .22)', 'active' => '#0d9488'],
|
|
'sla' => ['border' => '#fb923c', 'bg' => 'rgba(234, 88, 12, .22)', 'active' => '#ea580c'],
|
|
'automation' => ['border' => '#c084fc', 'bg' => 'rgba(147, 51, 234, .22)', 'active' => '#9333ea'],
|
|
'checklists' => ['border' => '#a3e635', 'bg' => 'rgba(101, 163, 13, .22)', 'active' => '#65a30d'],
|
|
'tags' => ['border' => '#f472b6', 'bg' => 'rgba(219, 39, 119, .22)', 'active' => '#db2777'],
|
|
'products' => ['border' => '#a78bfa', 'bg' => 'rgba(124, 58, 237, .22)', 'active' => '#7c3aed'],
|
|
'defaults' => ['border' => '#4ade80', 'bg' => 'rgba(22, 163, 74, .22)', 'active' => '#16a34a'],
|
|
default => ['border' => '#71717a', 'bg' => 'rgba(63, 63, 70, .22)', 'active' => '#3f3f46'],
|
|
};
|
|
|
|
$sectionStyle =
|
|
$section === $key
|
|
? 'border-color: ' .
|
|
$sectionPalette['border'] .
|
|
'; background-color: ' .
|
|
$sectionPalette['active'] .
|
|
'; color: #ffffff; box-shadow: 0 16px 36px rgba(0,0,0,.32);'
|
|
: 'border-color: ' .
|
|
$sectionPalette['border'] .
|
|
'; background-color: ' .
|
|
$sectionPalette['bg'] .
|
|
'; color: #ffffff; box-shadow: 0 10px 24px rgba(0,0,0,.20);';
|
|
@endphp
|
|
<a href="{{ route('helpdesk.settings', ['section' => $key]) }}"
|
|
dusk="helpdesk-settings-section-{{ $key }}"
|
|
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-0.5 text-xl font-semibold">{{ $item['count'] }}</div>
|
|
</a>
|
|
@endforeach
|
|
</div>
|
|
|
|
|
|
@if ($section === 'defaults')
|
|
<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-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)
|
|
<option value="{{ $company->id }}">
|
|
{{ $company->name }}{{ $company->is_default_helpdesk_company ?? false ? ' — Default' : '' }}
|
|
</option>
|
|
@endforeach
|
|
</flux:select>
|
|
|
|
<div class="md:col-span-3 flex gap-2">
|
|
<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>
|
|
</form>
|
|
</x-slot:form>
|
|
|
|
<div
|
|
class="rounded-2xl border border-zinc-200 bg-zinc-50 p-4 text-sm text-zinc-700 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-200">
|
|
<p class="font-semibold">Lookup defaults</p>
|
|
<p class="mt-1">Set the default Status, Priority, Category, Team and Project from their own settings
|
|
sections. Only one default per company/global scope is kept for each lookup type.</p>
|
|
</div>
|
|
</x-helpdesk::settings-section>
|
|
@endif
|
|
|
|
@if ($section === 'statuses')
|
|
<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-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-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-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">
|
|
<label for="sonar-input-39c53a1533" class="visually-hidden">sonar input 39c53a1533</label>
|
|
<input type="checkbox" wire:model="statusForm.is_closed" class="rounded border-zinc-600 bg-zinc-950 text-blue-600 focus:ring-blue-500" id="sonar-input-39c53a1533">
|
|
Closed status
|
|
</label>
|
|
<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">
|
|
<label for="sonar-input-ecdb37bbfb" class="visually-hidden">sonar input ecdb37bbfb</label>
|
|
<input type="checkbox" wire:model="statusForm.is_default"
|
|
class="rounded border-zinc-300 bg-zinc-950 text-blue-600 focus:ring-blue-500" id="sonar-input-ecdb37bbfb">
|
|
Default status for new tickets
|
|
</label>
|
|
<div class="flex flex-wrap items-center gap-2 xl:col-span-12">
|
|
<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 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>
|
|
</x-slot:form>
|
|
<x-helpdesk::lookup-table :items="$statuses" edit="editStatus" delete="deleteStatus" />
|
|
</x-helpdesk::settings-section>
|
|
@endif
|
|
|
|
@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-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-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-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">
|
|
<label for="sonar-input-dbeb3e74c7" class="visually-hidden">sonar input dbeb3e74c7</label>
|
|
<input type="checkbox" wire:model="priorityForm.is_default"
|
|
class="rounded border-zinc-300 bg-zinc-950 text-blue-600 focus:ring-blue-500" id="sonar-input-dbeb3e74c7">
|
|
Default for new tickets
|
|
</label>
|
|
<div class="flex flex-wrap items-center gap-2 xl:col-span-12">
|
|
<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 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>
|
|
</x-slot:form>
|
|
<x-helpdesk::lookup-table :items="$priorities" edit="editPriority" delete="deletePriority" />
|
|
</x-helpdesk::settings-section>
|
|
@endif
|
|
|
|
@if ($section === 'categories')
|
|
<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-3 xl:grid-cols-12">
|
|
<div class="xl:col-span-3">
|
|
<flux:select wire:model="categoryForm.company_id" label="Company">
|
|
<option value="">Global</option>
|
|
@foreach ($companies as $company)
|
|
<option value="{{ $company->id }}">{{ $company->name }}</option>
|
|
@endforeach
|
|
</flux:select>
|
|
</div>
|
|
<div class="xl:col-span-3">
|
|
<flux:input wire:model="categoryForm.name" label="Name" />
|
|
</div>
|
|
<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-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-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">
|
|
<label for="sonar-input-994d89012d" class="visually-hidden">sonar input 994d89012d</label>
|
|
<input type="checkbox" wire:model="categoryForm.is_default"
|
|
class="rounded border-zinc-300 bg-zinc-950 text-blue-600 focus:ring-blue-500" id="sonar-input-994d89012d">
|
|
Default category for new tickets
|
|
</label>
|
|
<div class="flex flex-wrap items-center gap-2 xl:col-span-12">
|
|
<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 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>
|
|
</x-slot:form>
|
|
<x-helpdesk::lookup-table :items="$categories" edit="editCategory" delete="deleteCategory" />
|
|
</x-helpdesk::settings-section>
|
|
@endif
|
|
|
|
@if ($section === 'teams')
|
|
<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-3 xl:grid-cols-12">
|
|
<div class="xl:col-span-3">
|
|
<flux:select wire:model="teamForm.company_id" label="Company">
|
|
<option value="">Global</option>
|
|
@foreach ($companies as $company)
|
|
<option value="{{ $company->id }}">{{ $company->name }}</option>
|
|
@endforeach
|
|
</flux:select>
|
|
</div>
|
|
<div class="xl:col-span-3">
|
|
<flux:input wire:model="teamForm.name" label="Name" />
|
|
</div>
|
|
<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-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-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">
|
|
<label for="sonar-input-e96f3a3323" class="visually-hidden">sonar input e96f3a3323</label>
|
|
<input type="checkbox" wire:model="teamForm.is_default"
|
|
class="rounded border-zinc-300 bg-zinc-950 text-blue-600 focus:ring-blue-500" id="sonar-input-e96f3a3323">
|
|
Default team for new tickets
|
|
</label>
|
|
<div class="flex flex-wrap items-center gap-2 xl:col-span-12">
|
|
<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 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>
|
|
</x-slot:form>
|
|
<x-helpdesk::team-table :items="$teams" />
|
|
</x-helpdesk::settings-section>
|
|
@endif
|
|
|
|
@if ($section === 'projects')
|
|
<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-3 xl:grid-cols-12">
|
|
<div class="xl:col-span-2">
|
|
<flux:select wire:model="projectForm.company_id" label="Company">
|
|
<option value="">Global</option>
|
|
@foreach ($companies as $company)
|
|
<option value="{{ $company->id }}">{{ $company->name }}</option>
|
|
@endforeach
|
|
</flux:select>
|
|
</div>
|
|
<div class="xl:col-span-2">
|
|
<flux:select wire:model="projectForm.team_id" label="Team">
|
|
<option value="">No team</option>
|
|
@foreach ($teams as $team)
|
|
<option value="{{ $team->id }}">{{ $team->name }}</option>
|
|
@endforeach
|
|
</flux:select>
|
|
</div>
|
|
<div class="xl:col-span-2">
|
|
<flux:input wire:model="projectForm.title" label="Title" />
|
|
</div>
|
|
<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-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-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">
|
|
<label for="sonar-input-12a008cf80" class="visually-hidden">sonar input 12a008cf80</label>
|
|
<input type="checkbox" wire:model="projectForm.is_default"
|
|
class="rounded border-zinc-300 bg-zinc-950 text-blue-600 focus:ring-blue-500" id="sonar-input-12a008cf80">
|
|
Default project for new tickets
|
|
</label>
|
|
<div class="flex flex-wrap items-center gap-2 xl:col-span-12">
|
|
<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 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>
|
|
</x-slot:form>
|
|
<x-helpdesk::project-table :items="$projects" />
|
|
</x-helpdesk::settings-section>
|
|
@endif
|
|
|
|
|
|
@if ($section === 'boards')
|
|
<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-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" />
|
|
<flux:select wire:model="boardForm.owner_id" label="Owner">
|
|
<option value="">No owner</option>
|
|
@foreach ($boardOwners as $owner)
|
|
<option value="{{ $owner->id }}">{{ $owner->name }}</option>
|
|
@endforeach
|
|
</flux:select>
|
|
<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">
|
|
<label for="sonar-input-ca4f2ae3c4" class="visually-hidden">sonar input ca4f2ae3c4</label>
|
|
<input type="checkbox" wire:model="boardForm.is_default" class="rounded border-zinc-300" id="sonar-input-ca4f2ae3c4">
|
|
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-full">
|
|
<label for="board-columns" 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">
|
|
@foreach ($statuses as $status)
|
|
<label
|
|
class="flex items-center gap-2 rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-700 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-200">
|
|
<label for="sonar-input-d3efdc11be" class="visually-hidden">sonar input d3efdc11be</label>
|
|
<input type="checkbox" wire:model="boardForm.status_ids"
|
|
value="{{ $status->id }}" class="rounded border-zinc-300">
|
|
<span class="inline-flex h-3 w-3 rounded-full"
|
|
style="background-color: {{ \Modules\Helpdesk\Support\Color::css($status->color) }}"></span>
|
|
<span>{{ $status->name }}</span>
|
|
</label>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
<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 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>
|
|
</x-slot:form>
|
|
|
|
<div
|
|
class="overflow-hidden rounded-2xl border border-zinc-200 bg-white dark:border-zinc-700 dark:bg-zinc-900">
|
|
<table class="min-w-full divide-y divide-zinc-200 text-sm dark:divide-zinc-700">
|
|
<caption class="sr-only">Data table</caption>
|
|
<thead
|
|
class="bg-zinc-50 text-left text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:bg-zinc-800 dark:text-zinc-300">
|
|
<tr>
|
|
<th class="px-4 py-3">Board</th>
|
|
<th class="px-4 py-3">Owner</th>
|
|
<th class="px-4 py-3">Columns</th>
|
|
<th class="px-4 py-3">Tickets</th>
|
|
<th class="px-4 py-3">Default</th>
|
|
<th class="px-4 py-3 text-right">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-zinc-100 dark:divide-zinc-800">
|
|
@forelse ($boards as $boardItem)
|
|
<tr>
|
|
<td class="px-4 py-3">
|
|
<div class="font-medium text-zinc-900 dark:text-zinc-100">{{ $boardItem->name }}
|
|
</div>
|
|
<div class="text-xs text-zinc-500">{{ $boardItem->slug }}</div>
|
|
</td>
|
|
<td class="px-4 py-3 text-sm text-zinc-600 dark:text-zinc-300">
|
|
{{ $boardItem->owner?->name ?? 'Unassigned' }}</td>
|
|
<td class="px-4 py-3">
|
|
<div class="flex flex-wrap gap-1">
|
|
@foreach ($boardItem->statuses as $status)
|
|
<span class="rounded-full px-2 py-1 text-xs font-semibold text-white"
|
|
style="background-color: {{ \Modules\Helpdesk\Support\Color::css($status->color) }}">{{ $status->name }}</span>
|
|
@endforeach
|
|
</div>
|
|
</td>
|
|
<td class="px-4 py-3 text-zinc-500">{{ $boardItem->tickets_count ?? 0 }}</td>
|
|
<td class="px-4 py-3">
|
|
<flux:badge color="{{ $boardItem->is_default ? 'emerald' : 'zinc' }}">
|
|
{{ $boardItem->is_default ? 'Default' : 'No' }}</flux:badge>
|
|
</td>
|
|
<td class="px-4 py-3 text-right">
|
|
<flux:button size="sm" variant="primary"
|
|
wire:click="editBoard({{ $boardItem->id }})"
|
|
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="!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>
|
|
<td colspan="6" class="px-4 py-8 text-center text-zinc-500">No Kanban boards yet.
|
|
</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</x-helpdesk::settings-section>
|
|
@endif
|
|
|
|
@if ($section === 'git')
|
|
<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-3 md:grid-cols-6">
|
|
<flux:select wire:model="repositoryForm.company_id" label="Company">
|
|
<option value="">Global</option>
|
|
@foreach ($companies as $company)
|
|
<option value="{{ $company->id }}">{{ $company->name }}</option>
|
|
@endforeach
|
|
</flux:select>
|
|
<flux:select wire:model="repositoryForm.project_id" label="Project">
|
|
<option value="">No project</option>
|
|
@foreach ($projects as $project)
|
|
<option value="{{ $project->id }}">{{ $project->title }}</option>
|
|
@endforeach
|
|
</flux:select>
|
|
<flux:input wire:model="repositoryForm.name" label="Name" />
|
|
<flux:input wire:model="repositoryForm.provider" label="Provider"
|
|
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-full">
|
|
<flux:input wire:model="repositoryForm.remote_url" label="Remote URL"
|
|
placeholder="git@github.com:company/repo.git" />
|
|
</div>
|
|
<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 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>
|
|
</x-slot:form>
|
|
<x-helpdesk::repository-table :items="$repositories" />
|
|
</x-helpdesk::settings-section>
|
|
@endif
|
|
|
|
|
|
@if ($section === 'workflow')
|
|
<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-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>
|
|
<option value="ticket.updated">Ticket updated</option>
|
|
<option value="ticket.commented">Response added</option>
|
|
<option value="ticket.reply_created">Reply added</option>
|
|
<option value="ticket.closed">Ticket closed</option>
|
|
</flux:select>
|
|
<flux:select wire:model="workflowForm.to_role" label="Send to">
|
|
<option value="requester">Requester</option>
|
|
<option value="agent">Assigned agent</option>
|
|
<option value="actor">User making change</option>
|
|
</flux:select>
|
|
<flux:input wire:model="workflowForm.cc" label="CC"
|
|
placeholder="Optional comma-separated emails" />
|
|
<flux:input wire:model="workflowForm.bcc" label="BCC"
|
|
placeholder="Optional comma-separated emails" />
|
|
<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"><label for="sonar-input-d05aecf041" class="visually-hidden">sonar input d05aecf041</label>
|
|
<input
|
|
type="checkbox" wire:model="workflowForm.is_active" class="rounded border-zinc-300" id="sonar-input-d05aecf041">
|
|
Active</label>
|
|
<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-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-full">
|
|
<flux:textarea wire:model="workflowForm.text_body" label="Plain text body" rows="4"
|
|
placeholder="Optional fallback text" />
|
|
</div>
|
|
<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 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>
|
|
</x-slot:form>
|
|
|
|
<div
|
|
class="overflow-hidden rounded-2xl border border-zinc-200 bg-white dark:border-zinc-700 dark:bg-zinc-900">
|
|
<table class="min-w-full divide-y divide-zinc-200 text-sm dark:divide-zinc-700">
|
|
<caption class="sr-only">Data table</caption>
|
|
<thead
|
|
class="bg-zinc-50 text-left text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:bg-zinc-800 dark:text-zinc-300">
|
|
<tr>
|
|
<th class="px-4 py-3">Name</th>
|
|
<th class="px-4 py-3">Event</th>
|
|
<th class="px-4 py-3">Recipient</th>
|
|
<th class="px-4 py-3">Active</th>
|
|
<th class="px-4 py-3 text-right">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-zinc-100 dark:divide-zinc-800">
|
|
@forelse ($workflowTemplates as $template)
|
|
<tr>
|
|
<td class="px-4 py-3 font-medium text-zinc-900 dark:text-zinc-100">
|
|
{{ $template->name }}</td>
|
|
<td class="px-4 py-3 text-zinc-600 dark:text-zinc-300">{{ $template->event }}</td>
|
|
<td class="px-4 py-3 text-zinc-600 dark:text-zinc-300">{{ $template->to_role }}</td>
|
|
<td class="px-4 py-3">
|
|
<flux:badge color="{{ $template->is_active ? 'emerald' : 'zinc' }}">
|
|
{{ $template->is_active ? 'Active' : 'Inactive' }}</flux:badge>
|
|
</td>
|
|
<td class="px-4 py-3 text-right">
|
|
<flux:button size="sm" variant="ghost"
|
|
wire:click="editWorkflowTemplate({{ $template->id }})"
|
|
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="!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>
|
|
<td colspan="5" class="px-4 py-8 text-center text-zinc-500">No workflow messages
|
|
yet.</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</x-helpdesk::settings-section>
|
|
@endif
|
|
|
|
|
|
@if ($section === 'canned')
|
|
<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-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" />
|
|
<flux:select wire:model="cannedForm.category_id" label="Category">
|
|
<option value="">Any category</option>
|
|
@foreach ($categories as $category)
|
|
<option value="{{ $category->id }}">{{ $category->name }}</option>
|
|
@endforeach
|
|
</flux:select>
|
|
<flux:select wire:model="cannedForm.team_id" label="Team">
|
|
<option value="">Any team</option>
|
|
@foreach ($teams as $team)
|
|
<option value="{{ $team->id }}">{{ $team->name }}</option>
|
|
@endforeach
|
|
</flux:select>
|
|
<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"><label for="sonar-input-a305855102" class="visually-hidden">sonar input a305855102</label>
|
|
<input
|
|
type="checkbox" wire:model="cannedForm.is_active" class="rounded border-zinc-300" id="sonar-input-a305855102">
|
|
Active</label>
|
|
<div class="md:col-span-full">
|
|
<flux:input wire:model="cannedForm.subject" label="Optional subject" />
|
|
</div>
|
|
<div class="md:col-span-full">
|
|
<flux:textarea wire:model="cannedForm.body" label="Reply body" rows="6"
|
|
placeholder="Hello @{{ requester.name }}, Your ticket @{{ ticket.reference }} has been reviewed." />
|
|
</div>
|
|
<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 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>
|
|
</x-slot:form>
|
|
<div class="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
|
|
@forelse ($cannedResponses as $response)
|
|
<div class="rounded-2xl border border-zinc-200 bg-white p-4 dark:border-zinc-700 dark:bg-zinc-900">
|
|
<div class="flex items-start justify-between gap-3">
|
|
<div>
|
|
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100">{{ $response->name }}</h3>
|
|
<p class="text-xs text-zinc-500">{{ $response->category?->name ?? 'Any category' }} ·
|
|
{{ $response->team?->name ?? 'Any team' }}</p>
|
|
</div>
|
|
<flux:badge color="{{ $response->is_active ? 'emerald' : 'zinc' }}">
|
|
{{ $response->is_active ? 'Active' : 'Inactive' }}</flux:badge>
|
|
</div>
|
|
<p class="mt-3 line-clamp-3 text-sm text-zinc-600 dark:text-zinc-300">
|
|
{{ strip_tags($response->body) }}</p>
|
|
<div class="mt-4 flex justify-end gap-2">
|
|
<flux:button size="sm" variant="primary"
|
|
wire:click="editCannedResponse({{ $response->id }})"
|
|
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="!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
|
|
class="rounded-2xl border border-dashed border-zinc-300 p-8 text-center text-sm text-zinc-500 dark:border-zinc-700 md:col-span-2 xl:col-span-3">
|
|
No canned responses yet.</div>
|
|
@endforelse
|
|
</div>
|
|
</x-helpdesk::settings-section>
|
|
@endif
|
|
|
|
@if ($section === 'sla')
|
|
<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-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">
|
|
<option value="">Any priority</option>
|
|
@foreach ($priorities as $priority)
|
|
<option value="{{ $priority->id }}">{{ $priority->name }}</option>
|
|
@endforeach
|
|
</flux:select>
|
|
<flux:select wire:model="slaForm.category_id" label="Category">
|
|
<option value="">Any category</option>
|
|
@foreach ($categories as $category)
|
|
<option value="{{ $category->id }}">{{ $category->name }}</option>
|
|
@endforeach
|
|
</flux:select>
|
|
<flux:input wire:model="slaForm.first_response_minutes" label="First response minutes"
|
|
type="number" min="1" />
|
|
<flux:input wire:model="slaForm.resolution_minutes" label="Resolution minutes" type="number"
|
|
min="1" />
|
|
<label class="flex items-center gap-2 text-sm text-zinc-700 dark:text-zinc-200"><label for="sonar-input-fc91c07151" class="visually-hidden">sonar input fc91c07151</label>
|
|
<input
|
|
type="checkbox" wire:model="slaForm.is_default" class="rounded border-zinc-300" id="sonar-input-fc91c07151">
|
|
Default</label>
|
|
<label class="flex items-center gap-2 text-sm text-zinc-700 dark:text-zinc-200"><label for="sonar-input-8ed03e31d9" class="visually-hidden">sonar input 8ed03e31d9</label>
|
|
<input
|
|
type="checkbox" wire:model="slaForm.business_hours_only" class="rounded border-zinc-300" id="sonar-input-8ed03e31d9">
|
|
Business hours</label>
|
|
<label class="flex items-center gap-2 text-sm text-zinc-700 dark:text-zinc-200"><label for="sonar-input-f551debb0e" class="visually-hidden">sonar input f551debb0e</label>
|
|
<input
|
|
type="checkbox" wire:model="slaForm.is_active" class="rounded border-zinc-300" id="sonar-input-f551debb0e">
|
|
Active</label>
|
|
<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 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>
|
|
</x-slot:form>
|
|
<div
|
|
class="overflow-hidden rounded-2xl border border-zinc-200 bg-white dark:border-zinc-700 dark:bg-zinc-900">
|
|
<table class="min-w-full divide-y divide-zinc-200 text-sm dark:divide-zinc-700">
|
|
<caption class="sr-only">Data table</caption>
|
|
<thead class="bg-zinc-50 text-left text-xs font-semibold uppercase text-zinc-500 dark:bg-zinc-800">
|
|
<tr>
|
|
<th class="px-4 py-3">Policy</th>
|
|
<th class="px-4 py-3">Targets</th>
|
|
<th class="px-4 py-3">Applies to</th>
|
|
<th class="px-4 py-3 text-right">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-zinc-100 dark:divide-zinc-800">
|
|
@forelse ($slaPolicies as $policy)
|
|
<tr>
|
|
<td class="px-4 py-3 font-medium">{{ $policy->name }} @if ($policy->is_default)
|
|
<flux:badge color="blue">Default</flux:badge>
|
|
@endif
|
|
</td>
|
|
<td class="px-4 py-3">{{ $policy->first_response_minutes }}m response ·
|
|
{{ $policy->resolution_minutes }}m close</td>
|
|
<td class="px-4 py-3">{{ $policy->priority?->name ?? 'Any priority' }} ·
|
|
{{ $policy->category?->name ?? 'Any category' }}</td>
|
|
<td class="px-4 py-3 text-right">
|
|
<flux:button size="sm" variant="primary"
|
|
wire:click="editSlaPolicy({{ $policy->id }})"
|
|
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="!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>
|
|
<td colspan="6" class="px-4 py-8 text-center text-zinc-500">No SLA policies yet.
|
|
</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</x-helpdesk::settings-section>
|
|
@endif
|
|
|
|
@if ($section === 'automation')
|
|
<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-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"
|
|
min="0" />
|
|
<flux:input wire:model="automationForm.match_sender" label="Sender contains" />
|
|
<flux:input wire:model="automationForm.match_subject" label="Subject contains" />
|
|
<flux:input wire:model="automationForm.match_mailbox" label="Mailbox contains" />
|
|
<flux:select wire:model="automationForm.set_priority_id" label="Set priority">
|
|
<option value="">No change</option>
|
|
@foreach ($priorities as $priority)
|
|
<option value="{{ $priority->id }}">{{ $priority->name }}</option>
|
|
@endforeach
|
|
</flux:select>
|
|
<flux:select wire:model="automationForm.set_category_id" label="Set category">
|
|
<option value="">No change</option>
|
|
@foreach ($categories as $category)
|
|
<option value="{{ $category->id }}">{{ $category->name }}</option>
|
|
@endforeach
|
|
</flux:select>
|
|
<flux:select wire:model="automationForm.set_team_id" label="Set team">
|
|
<option value="">No change</option>
|
|
@foreach ($teams as $team)
|
|
<option value="{{ $team->id }}">{{ $team->name }}</option>
|
|
@endforeach
|
|
</flux:select>
|
|
<flux:select wire:model="automationForm.set_project_id" label="Set project">
|
|
<option value="">No change</option>
|
|
@foreach ($projects as $project)
|
|
<option value="{{ $project->id }}">{{ $project->title }}</option>
|
|
@endforeach
|
|
</flux:select>
|
|
<flux:select wire:model="automationForm.set_status_id" label="Set status">
|
|
<option value="">No change</option>
|
|
@foreach ($statuses as $status)
|
|
<option value="{{ $status->id }}">{{ $status->name }}</option>
|
|
@endforeach
|
|
</flux:select>
|
|
<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"><label for="sonar-input-bdabe054d8" class="visually-hidden">sonar input bdabe054d8</label>
|
|
<input
|
|
type="checkbox" wire:model="automationForm.is_active" class="rounded border-zinc-300" id="sonar-input-bdabe054d8">
|
|
Active</label>
|
|
<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 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>
|
|
</x-slot:form>
|
|
<div class="grid gap-3 md:grid-cols-2">
|
|
@forelse ($automationRules as $rule)
|
|
<div class="rounded-2xl border border-zinc-200 bg-white p-4 dark:border-zinc-700 dark:bg-zinc-900">
|
|
<h3 class="font-semibold">{{ $rule->name }}</h3>
|
|
<p class="mt-1 text-sm text-zinc-500">Sender: {{ $rule->match_sender ?: 'Any' }} · Subject:
|
|
{{ $rule->match_subject ?: 'Any' }}</p>
|
|
<div class="mt-4 flex justify-end gap-2">
|
|
<flux:button size="sm" variant="primary"
|
|
wire:click="editAutomationRule({{ $rule->id }})"
|
|
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="!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
|
|
class="rounded-2xl border border-dashed border-zinc-300 p-8 text-center text-sm text-zinc-500 dark:border-zinc-700 md:col-span-2">
|
|
No automation rules yet.</div>
|
|
@endforelse
|
|
</div>
|
|
</x-helpdesk::settings-section>
|
|
@endif
|
|
|
|
@if ($section === 'checklists')
|
|
<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-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">
|
|
<option value="">Any category</option>
|
|
@foreach ($categories as $category)
|
|
<option value="{{ $category->id }}">{{ $category->name }}</option>
|
|
@endforeach
|
|
</flux:select>
|
|
<flux:select wire:model="checklistTemplateForm.project_id" label="Project">
|
|
<option value="">Any project</option>
|
|
@foreach ($projects as $project)
|
|
<option value="{{ $project->id }}">{{ $project->title }}</option>
|
|
@endforeach
|
|
</flux:select>
|
|
<label class="flex items-end gap-2 pb-2 text-sm"><label for="sonar-input-cc3bd705c8" class="visually-hidden">sonar input cc3bd705c8</label>
|
|
<input type="checkbox"
|
|
wire:model="checklistTemplateForm.is_active" class="rounded border-zinc-300" id="sonar-input-cc3bd705c8">
|
|
Active</label>
|
|
<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-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 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>
|
|
</x-slot:form>
|
|
<div class="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
|
|
@forelse ($checklistTemplates as $template)
|
|
<div class="rounded-2xl border border-zinc-200 bg-white p-4 dark:border-zinc-700 dark:bg-zinc-900">
|
|
<h3 class="font-semibold">{{ $template->name }}</h3>
|
|
<p class="mt-1 text-sm text-zinc-500">{{ count($template->items ?? []) }} items</p>
|
|
<div class="mt-4 flex justify-end gap-2">
|
|
<flux:button size="sm" variant="primary"
|
|
wire:click="editChecklistTemplate({{ $template->id }})"
|
|
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="!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
|
|
class="rounded-2xl border border-dashed border-zinc-300 p-8 text-center text-sm text-zinc-500 dark:border-zinc-700 md:col-span-2 xl:col-span-3">
|
|
No checklist templates yet.</div>
|
|
@endforelse
|
|
</div>
|
|
</x-helpdesk::settings-section>
|
|
@endif
|
|
|
|
@if ($section === 'tags')
|
|
<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-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-12" model="tagForm.color" label="Colour" :options="$colourOptions" />
|
|
<div class="flex flex-wrap items-center gap-2 xl:col-span-12">
|
|
<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 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>
|
|
</x-slot:form>
|
|
<div class="flex flex-wrap gap-3">
|
|
@forelse ($tags as $tag)
|
|
<div
|
|
class="rounded-2xl border border-zinc-200 bg-white px-4 py-3 dark:border-zinc-700 dark:bg-zinc-900">
|
|
<span class="rounded-full px-2 py-1 text-xs font-semibold text-white"
|
|
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="!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="!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
|
|
class="rounded-2xl border border-dashed border-zinc-300 p-8 text-center text-sm text-zinc-500 dark:border-zinc-700">
|
|
No tags yet.</div>
|
|
@endforelse
|
|
</div>
|
|
</x-helpdesk::settings-section>
|
|
@endif
|
|
|
|
@if ($section === 'products')
|
|
<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-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" />
|
|
<flux:input wire:model="productForm.version" label="Version" />
|
|
<flux:input wire:model="productForm.release_channel" label="Release/build" /><label
|
|
class="flex items-end gap-2 pb-2 text-sm"><label for="sonar-input-6a8040737f" class="visually-hidden">sonar input 6a8040737f</label>
|
|
<input type="checkbox"
|
|
wire:model="productForm.is_active" class="rounded border-zinc-300" id="sonar-input-6a8040737f"> Active</label>
|
|
<div class="md:col-span-full">
|
|
<flux:textarea wire:model="productForm.description" label="Description" rows="3" />
|
|
</div>
|
|
<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 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>
|
|
</x-slot:form>
|
|
<div class="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
|
|
@forelse ($products as $product)
|
|
<div class="rounded-2xl border border-zinc-200 bg-white p-4 dark:border-zinc-700 dark:bg-zinc-900">
|
|
<h3 class="font-semibold">{{ $product->name }}</h3>
|
|
<p class="mt-1 text-sm text-zinc-500">{{ ucfirst($product->type) }} ·
|
|
{{ $product->version ?: 'No version' }} · {{ $product->tickets_count }} tickets</p>
|
|
<div class="mt-4 flex justify-end gap-2">
|
|
<flux:button size="sm" variant="primary"
|
|
wire:click="editProduct({{ $product->id }})"
|
|
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="!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
|
|
class="rounded-2xl border border-dashed border-zinc-300 p-8 text-center text-sm text-zinc-500 dark:border-zinc-700 md:col-span-2 xl:col-span-3">
|
|
No products or services yet.</div>
|
|
@endforelse
|
|
</div>
|
|
</x-helpdesk::settings-section>
|
|
@endif
|
|
|
|
</div>
|