mag/Helpddesk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated design

Browse Source
This commit is contained in:
Mark Gregory
2026-08-25 14:41:15 +01:00
parent 3e6b3bfc79
commit 3c7361023c
18 changed files with 1828 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/themes/backend/assets/css/app.css
+3
View File
@@ -1,7 +1,10 @@
@import 'tailwindcss';
@import '../../../../../vendor/livewire/flux/dist/flux.css';
@import './helpdesk.css';
@source '../../views';
@source '../../views/modules/helpdesk/**/*.blade.php';
@source '../../../../../Modules/Helpdesk/Livewire/**/*.php';
@source '../../../**/*.blade.php';
@source '../../../../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../../../../vendor/livewire/flux-pro/stubs/**/*.blade.php';
resources/themes/backend/assets/css/helpdesk.css
+974
View File
@@ -0,0 +1,974 @@
.hd-helpdesk-surface .hd-btn,
.hd-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
border-radius: .85rem;
padding: .62rem 1.05rem;
font-size: .875rem;
line-height: 1.25rem;
font-weight: 800;
color: #ffffff !important;
text-decoration: none !important;
border: 1px solid rgba(255,255,255,.14);
box-shadow: 0 12px 28px rgba(0,0,0,.22);
transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.hd-helpdesk-surface .hd-btn:hover,
.hd-btn:hover {
transform: translateY(-1px);
box-shadow: 0 16px 34px rgba(0,0,0,.30);
}
.hd-helpdesk-surface .hd-btn-sm,
.hd-btn-sm {
border-radius: .65rem;
padding: .42rem .78rem;
font-size: .8125rem;
}
.hd-helpdesk-surface .hd-btn-blue,
.hd-btn-blue { background: #2563eb !important; }
.hd-helpdesk-surface .hd-btn-blue:hover,
.hd-btn-blue:hover { background: #1d4ed8 !important; }
.hd-helpdesk-surface .hd-btn-green,
.hd-btn-green { background: #16a34a !important; }
.hd-helpdesk-surface .hd-btn-green:hover,
.hd-btn-green:hover { background: #15803d !important; }
.hd-helpdesk-surface .hd-btn-amber,
.hd-btn-amber { background: #f59e0b !important; }
.hd-helpdesk-surface .hd-btn-amber:hover,
.hd-btn-amber:hover { background: #d97706 !important; }
.hd-helpdesk-surface .hd-btn-red,
.hd-btn-red { background: #dc2626 !important; }
.hd-helpdesk-surface .hd-btn-red:hover,
.hd-btn-red:hover { background: #b91c1c !important; }
.hd-helpdesk-surface .hd-btn-violet,
.hd-btn-violet { background: #7c3aed !important; }
.hd-helpdesk-surface .hd-btn-violet:hover,
.hd-btn-violet:hover { background: #6d28d9 !important; }
.hd-helpdesk-surface button[type="submit"],
.hd-helpdesk-surface button[data-flux-button][type="submit"] {
background: #16a34a !important;
color: #ffffff !important;
border-color: rgba(255,255,255,.14) !important;
}
.hd-helpdesk-surface button[wire\:click^="reset"],
.hd-helpdesk-surface button[wire\:target^="reset"] {
background: #f59e0b !important;
color: #ffffff !important;
border-color: rgba(255,255,255,.14) !important;
}
.hd-helpdesk-surface button[wire\:click^="edit"],
.hd-helpdesk-surface button[wire\:target^="edit"] {
background: #2563eb !important;
color: #ffffff !important;
border-color: rgba(255,255,255,.14) !important;
}
.hd-helpdesk-surface button[wire\:click^="delete"],
.hd-helpdesk-surface button[wire\:target^="delete"] {
background: #dc2626 !important;
color: #ffffff !important;
border-color: rgba(255,255,255,.14) !important;
}
.hd-select {
width: 100%;
min-height: 3.35rem;
border-radius: 1rem;
border: 1px solid #3f3f46 !important;
background: #09090b !important;
color: #f4f4f5 !important;
padding: .78rem 3rem .78rem 1rem;
font-weight: 800;
outline: none;
box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 26px rgba(0,0,0,.24);
}
.hd-select:focus {
border-color: #60a5fa !important;
box-shadow: 0 0 0 3px rgba(96,165,250,.38), inset 0 1px 0 rgba(255,255,255,.05);
}
.helpdesk-ticket-form,
.helpdesk-ticket-form * {
-webkit-tap-highlight-color: transparent;
}
.helpdesk-ticket-form input,
.helpdesk-ticket-form textarea,
.helpdesk-ticket-form select,
.helpdesk-ticket-form .select2-container--default .select2-selection--single,
.helpdesk-ticket-form .select2-container--default .select2-selection--multiple,
.helpdesk-ticket-form .select2-container--default .select2-selection__rendered,
.helpdesk-ticket-form .select2-container--default .select2-selection__choice {
background: #09090b !important;
background-color: #09090b !important;
color: #f4f4f5 !important;
border-color: #3f3f46 !important;
caret-color: #f4f4f5 !important;
opacity: 1 !important;
}
.helpdesk-ticket-form input:disabled,
.helpdesk-ticket-form textarea:disabled,
.helpdesk-ticket-form select:disabled,
.helpdesk-ticket-form .select2-container--disabled .select2-selection--single,
.helpdesk-ticket-form .select2-container--disabled .select2-selection--multiple,
.helpdesk-ticket-form [disabled],
.helpdesk-ticket-form [aria-disabled="true"] {
background: #09090b !important;
background-color: #09090b !important;
color: #a1a1aa !important;
opacity: 1 !important;
}
.helpdesk-ticket-form input:-webkit-autofill,
.helpdesk-ticket-form input:-webkit-autofill:hover,
.helpdesk-ticket-form input:-webkit-autofill:focus,
.helpdesk-ticket-form textarea:-webkit-autofill,
.helpdesk-ticket-form textarea:-webkit-autofill:hover,
.helpdesk-ticket-form textarea:-webkit-autofill:focus,
.helpdesk-ticket-form select:-webkit-autofill,
.helpdesk-ticket-form select:-webkit-autofill:hover,
.helpdesk-ticket-form select:-webkit-autofill:focus {
-webkit-text-fill-color: #f4f4f5 !important;
box-shadow: 0 0 0 1000px #09090b inset !important;
transition: background-color 9999s ease-in-out 0s;
}
.hd-helpdesk-surface .hd-btn,
.hd-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
border-radius: .85rem;
padding: .62rem 1.05rem;
font-size: .875rem;
line-height: 1.25rem;
font-weight: 800;
color: #fff !important;
text-decoration: none !important;
border: 1px solid rgba(255,255,255,.14);
box-shadow: 0 12px 28px rgba(0,0,0,.22);
transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.hd-helpdesk-surface .hd-btn:hover,
.hd-btn:hover {
transform: translateY(-1px);
box-shadow: 0 16px 34px rgba(0,0,0,.30);
}
.hd-btn-sm {
border-radius: .65rem;
padding: .42rem .78rem;
font-size: .8125rem;
}
.hd-btn-blue { background: #2563eb !important; }
.hd-btn-blue:hover { background: #1d4ed8 !important; }
.hd-btn-green { background: #16a34a !important; }
.hd-btn-green:hover { background: #15803d !important; }
.hd-btn-amber { background: #f59e0b !important; }
.hd-btn-amber:hover { background: #d97706 !important; }
.hd-btn-red { background: #dc2626 !important; }
.hd-btn-red:hover { background: #b91c1c !important; }
.hd-btn-violet { background: #7c3aed !important; }
.hd-btn-violet:hover { background: #6d28d9 !important; }
.hd-helpdesk-surface button[type="submit"],
.hd-helpdesk-surface button[data-flux-button][type="submit"] {
background: #16a34a !important;
color: #fff !important;
border-color: rgba(255,255,255,.14) !important;
}
.hd-helpdesk-surface button[wire\:click^="reset"],
.hd-helpdesk-surface button[wire\:target^="reset"] {
background: #f59e0b !important;
color: #fff !important;
border-color: rgba(255,255,255,.14) !important;
}
.hd-helpdesk-surface button[wire\:click^="edit"],
.hd-helpdesk-surface button[wire\:target^="edit"] {
background: #2563eb !important;
color: #fff !important;
border-color: rgba(255,255,255,.14) !important;
}
.hd-helpdesk-surface button[wire\:click^="delete"],
.hd-helpdesk-surface button[wire\:target^="delete"] {
background: #dc2626 !important;
color: #fff !important;
border-color: rgba(255,255,255,.14) !important;
}
.hd-select {
width: 100%;
min-height: 3.35rem;
border-radius: 1rem;
border: 1px solid #3f3f46 !important;
background: #09090b !important;
color: #f4f4f5 !important;
padding: .78rem 3rem .78rem 1rem;
font-weight: 800;
outline: none;
box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 26px rgba(0,0,0,.24);
}
.hd-select:focus {
border-color: #60a5fa !important;
box-shadow:
0 0 0 3px rgba(96,165,250,.38),
inset 0 1px 0 rgba(255,255,255,.05);
}
.helpdesk-required-star {
color: #ef4444 !important;
font-weight: 800;
}
.helpdesk-ticket-form,
.helpdesk-ticket-form * {
-webkit-tap-highlight-color: transparent;
}
.helpdesk-ticket-form input,
.helpdesk-ticket-form textarea,
.helpdesk-ticket-form select,
.helpdesk-ticket-form .select2-container--default .select2-selection--single,
.helpdesk-ticket-form .select2-container--default .select2-selection--multiple,
.helpdesk-ticket-form .select2-container--default .select2-selection__rendered,
.helpdesk-ticket-form .select2-container--default .select2-selection__choice {
background: #09090b !important;
color: #f4f4f5 !important;
border-color: #3f3f46 !important;
caret-color: #f4f4f5 !important;
opacity: 1 !important;
}
.helpdesk-ticket-form input:disabled,
.helpdesk-ticket-form textarea:disabled,
.helpdesk-ticket-form select:disabled,
.helpdesk-ticket-form .select2-container--disabled .select2-selection--single,
.helpdesk-ticket-form .select2-container--disabled .select2-selection--multiple {
background: #09090b !important;
color: #a1a1aa !important;
opacity: 1 !important;
}
.helpdesk-ticket-form input:-webkit-autofill,
.helpdesk-ticket-form input:-webkit-autofill:hover,
.helpdesk-ticket-form input:-webkit-autofill:focus,
.helpdesk-ticket-form textarea:-webkit-autofill,
.helpdesk-ticket-form textarea:-webkit-autofill:hover,
.helpdesk-ticket-form textarea:-webkit-autofill:focus,
.helpdesk-ticket-form select:-webkit-autofill,
.helpdesk-ticket-form select:-webkit-autofill:hover,
.helpdesk-ticket-form select:-webkit-autofill:focus {
-webkit-text-fill-color: #f4f4f5 !important;
box-shadow: 0 0 0 1000px #09090b inset !important;
transition: background-color 9999s ease-in-out 0s;
}
.select2-container--default .select2-selection--single {
position: relative;
}
.select2-container--default .select2-selection--single .select2-selection__clear {
position: absolute !important;
top: 50% !important;
right: 2.25rem !important;
transform: translateY(-50%);
color: #f87171 !important;
font-weight: 800 !important;
z-index: 5;
}
/* Select2 base */
.helpdesk-ticket-form .select2-container {
width: 100% !important;
}
.helpdesk-ticket-form .select2-container--default .select2-selection--single,
.helpdesk-ticket-form .select2-container--default .select2-selection--multiple {
min-height: 3.35rem;
border-radius: 1rem;
border: 1px solid #d4d4d8 !important;
background: #ffffff !important;
color: #18181b !important;
box-shadow: 0 10px 22px rgba(24, 24, 27, .08);
}
.helpdesk-ticket-form .select2-container--default .select2-selection--single .select2-selection__rendered {
color: #18181b !important;
line-height: 3.25rem;
padding-left: 1rem;
padding-right: 2.75rem;
font-weight: 700;
}
.helpdesk-ticket-form .select2-container--default .select2-selection--multiple {
align-items: center;
padding: .4rem .65rem;
}
.helpdesk-ticket-form .select2-container--default .select2-selection--multiple .select2-selection__choice {
border: 1px solid #2563eb !important;
border-radius: 9999px !important;
background: #dbeafe !important;
color: #1e3a8a !important;
font-weight: 700;
padding: .2rem .55rem;
}
.helpdesk-ticket-form .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
color: #dc2626 !important;
margin-right: .35rem;
}
.select2-dropdown {
border: 1px solid #d4d4d8 !important;
border-radius: .9rem !important;
background: #ffffff !important;
color: #18181b !important;
overflow: hidden;
box-shadow: 0 18px 42px rgba(24, 24, 27, .18);
}
.select2-search__field {
border: 1px solid #d4d4d8 !important;
border-radius: .7rem !important;
background: #ffffff !important;
color: #18181b !important;
}
.select2-container--default .select2-results__option {
color: #18181b !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background: #2563eb !important;
color: #ffffff !important;
}
.select2-container--default .select2-results__option[aria-selected="true"] {
background: #e0f2fe !important;
color: #075985 !important;
}
/* Dark mode */
.dark .helpdesk-ticket-form .select2-container--default .select2-selection--single,
.dark .helpdesk-ticket-form .select2-container--default .select2-selection--multiple {
border-color: #3f3f46 !important;
background: #09090b !important;
color: #f4f4f5 !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 26px rgba(0,0,0,.24);
}
.dark .helpdesk-ticket-form .select2-container--default .select2-selection--single .select2-selection__rendered {
color: #f4f4f5 !important;
}
.dark .helpdesk-ticket-form .select2-container--default .select2-selection--multiple .select2-selection__choice {
border-color: #60a5fa !important;
background: #1d4ed8 !important;
color: #ffffff !important;
}
.dark .select2-dropdown {
border-color: #3f3f46 !important;
background: #18181b !important;
color: #f4f4f5 !important;
box-shadow: 0 18px 42px rgba(0,0,0,.55);
}
.dark .select2-search__field {
border-color: #3f3f46 !important;
background: #09090b !important;
color: #f4f4f5 !important;
}
.dark .select2-container--default .select2-results__option {
color: #f4f4f5 !important;
}
.dark .select2-container--default .select2-results__option--highlighted[aria-selected] {
background: #2563eb !important;
color: #ffffff !important;
}
.dark .select2-container--default .select2-results__option[aria-selected="true"] {
background: #27272a !important;
color: #ffffff !important;
}
.select2-container--default .select2-results__option {
background: rgb(9 9 11);
color: rgb(244 244 245);
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
background: rgb(37 99 235) !important;
color: rgb(255 255 255) !important;
}
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option--selected {
background: rgb(30 64 175) !important;
color: rgb(255 255 255) !important;
}
.select2-dropdown {
border-color: rgb(63 63 70) !important;
background: rgb(9 9 11) !important;
}
.select2-container--default .select2-selection--single {
border: 1px solid rgb(63 63 70) !important;
background: rgb(9 9 11) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
color: rgb(244 244 245) !important;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
color: rgb(113 113 122) !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
border-color: rgb(161 161 170) transparent transparent transparent !important;
}
.select2-container--default.select2-container--open .select2-selection--single {
border-color: rgb(59 130 246) !important;
box-shadow: 0 0 0 2px rgb(59 130 246 / 0.35);
}
.select2-container--default .select2-selection--multiple {
border: 1px solid rgb(63 63 70) !important;
background: rgb(9 9 11) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
border: 1px solid rgb(59 130 246 / 0.45) !important;
background: rgb(30 64 175 / 0.35) !important;
color: rgb(219 234 254) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
color: rgb(191 219 254) !important;
}
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
border-radius: 0.75rem !important;
}
.select2-dropdown {
overflow: hidden;
border-radius: 0.75rem !important;
}
.select2-container--open .select2-dropdown--below {
margin-top: 0.35rem;
border-radius: 0.75rem !important;
}
.select2-container--open .select2-dropdown--above {
margin-bottom: 0.35rem;
border-radius: 0.75rem !important;
}
.select2-container--default .select2-selection--single {
position: relative;
padding-right: 3.5rem;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
padding-right: 3.5rem;
}
.select2-container--default .select2-selection--single .select2-selection__clear {
position: absolute;
right: 2rem;
top: 50%;
z-index: 3;
margin: 0;
transform: translateY(-50%);
color: rgb(161 161 170);
font-size: 1rem;
line-height: 1;
}
.select2-container--default .select2-selection--single .select2-selection__clear:hover {
color: rgb(248 113 113);
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
right: 0.75rem;
}
.select2-container--default .select2-selection--single {
position: relative !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
padding-left: 0.75rem !important;
padding-right: 4.25rem !important;
}
.select2-container--default .select2-selection--single .select2-selection__clear {
position: absolute !important;
right: 2.35rem !important;
top: 50% !important;
float: none !important;
margin: 0 !important;
transform: translateY(-50%) !important;
}
.select2-container--default .select2-selection--single .select2-selection__clear span {
color: rgb(161 161 170) !important;
font-size: 1.1rem !important;
line-height: 1 !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
right: 0.75rem !important;
}
.select2-container--default .select2-selection--single {
display: flex !important;
align-items: center !important;
position: relative !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
flex: 1 1 auto !important;
width: 100% !important;
padding-right: 4.5rem !important;
}
.select2-container--default .select2-selection--single .select2-selection__clear {
position: absolute !important;
right: 2.25rem !important;
top: 50% !important;
z-index: 20 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 1.25rem !important;
height: 1.25rem !important;
float: none !important;
margin: 0 !important;
padding: 0 !important;
transform: translateY(-50%) !important;
color: rgb(161 161 170) !important;
cursor: pointer !important;
}
.select2-container--default .select2-selection--single .select2-selection__clear:hover {
color: rgb(248 113 113) !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
position: absolute !important;
right: 0.75rem !important;
top: 50% !important;
transform: translateY(-50%) !important;
}
/* Helpdesk Flatpickr date picker */
.flatpickr-calendar {
border: 1px solid rgb(63 63 70);
background: rgb(24 24 27);
color: rgb(244 244 245);
box-shadow: 0 20px 45px rgb(0 0 0 / 0.35);
}
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after {
border-bottom-color: rgb(24 24 27);
border-top-color: rgb(24 24 27);
}
.flatpickr-months,
.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
background: rgb(24 24 27);
color: rgb(244 244 245);
}
.flatpickr-weekday,
span.flatpickr-weekday {
color: rgb(161 161 170);
}
.flatpickr-day {
color: rgb(228 228 231);
}
.flatpickr-day:hover,
.flatpickr-day:focus {
border-color: rgb(59 130 246);
background: rgb(39 39 42);
color: rgb(255 255 255);
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
border-color: rgb(37 99 235);
background: rgb(37 99 235);
color: rgb(255 255 255);
}
.flatpickr-day.today {
border-color: rgb(34 197 94);
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
color: rgb(113 113 122);
}
.hd-helpdesk-surface .hd-btn,
.hd-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
border-radius: .85rem;
padding: .62rem 1.05rem;
font-size: .875rem;
line-height: 1.25rem;
font-weight: 800;
font-size: .95rem;
color: #ffffff !important;
text-decoration: none !important;
border: 1px solid rgba(255,255,255,.14);
box-shadow: 0 12px 28px rgba(0,0,0,.22);
transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.hd-helpdesk-surface .hd-btn:hover,
.hd-btn:hover {
transform: translateY(-1px);
box-shadow: 0 16px 34px rgba(0,0,0,.30);
}
.hd-helpdesk-surface .hd-btn-sm,
.hd-btn-sm {
border-radius: .65rem;
padding: .42rem .78rem;
font-size: .8125rem;
}
.hd-helpdesk-surface .hd-btn-blue,
.hd-btn-blue { background: #2563eb !important; }
.hd-helpdesk-surface .hd-btn-blue:hover,
.hd-btn-blue:hover { background: #1d4ed8 !important; }
.hd-helpdesk-surface .hd-btn-green,
.hd-btn-green { background: #16a34a !important; }
.hd-helpdesk-surface .hd-btn-green:hover,
.hd-btn-green:hover { background: #15803d !important; }
.hd-helpdesk-surface .hd-btn-amber,
.hd-btn-amber { background: #f59e0b !important; }
.hd-helpdesk-surface .hd-btn-amber:hover,
.hd-btn-amber:hover { background: #d97706 !important; }
.hd-helpdesk-surface .hd-btn-red,
.hd-btn-red { background: #dc2626 !important; }
.hd-helpdesk-surface .hd-btn-red:hover,
.hd-btn-red:hover { background: #b91c1c !important; }
.hd-helpdesk-surface .hd-btn-violet,
.hd-btn-violet { background: #7c3aed !important; }
.hd-helpdesk-surface .hd-btn-violet:hover,
.hd-btn-violet:hover { background: #6d28d9 !important; }
.hd-helpdesk-surface button[type="submit"],
.hd-helpdesk-surface button[data-flux-button][type="submit"] {
background: #16a34a !important;
color: #ffffff !important;
border-color: rgba(255,255,255,.14) !important;
}
.hd-helpdesk-surface button[wire\:click^="reset"],
.hd-helpdesk-surface button[wire\:target^="reset"] {
background: #f59e0b !important;
color: #ffffff !important;
border-color: rgba(255,255,255,.14) !important;
}
.hd-helpdesk-surface button[wire\:click^="edit"],
.hd-helpdesk-surface button[wire\:target^="edit"] {
background: #2563eb !important;
color: #ffffff !important;
border-color: rgba(255,255,255,.14) !important;
}
.hd-helpdesk-surface button[wire\:click^="delete"],
.hd-helpdesk-surface button[wire\:target^="delete"] {
background: #dc2626 !important;
color: #ffffff !important;
border-color: rgba(255,255,255,.14) !important;
}
.hd-select-wrap {
position: relative;
width: 100%;
max-width: 18rem;
}
.hd-select-wrap::after {
position: absolute;
top: 50%;
right: 1rem;
width: .55rem;
height: .55rem;
content: "";
pointer-events: none;
border-right: 2px solid #93c5fd;
border-bottom: 2px solid #93c5fd;
transform: translateY(-65%) rotate(45deg);
}
.hd-select {
width: 100%;
min-height: 2.75rem;
appearance: none;
-webkit-appearance: none;
border-radius: .9rem;
border: 1px solid rgba(96, 165, 250, .38) !important;
background: linear-gradient(135deg, #030712 0%, #111827 54%, #0f172a 100%) !important;
color: #f8fafc !important;
padding: .62rem 2.45rem .62rem .9rem;
font-weight: 800;
outline: none;
box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 30px rgba(2,6,23,.38);
}
.hd-select option {
background: #020617 !important;
color: #f8fafc !important;
}
.hd-select:focus {
border-color: #60a5fa !important;
box-shadow: 0 0 0 3px rgba(96,165,250,.38), inset 0 1px 0 rgba(255,255,255,.08), 0 14px 30px rgba(2,6,23,.38);
}
.hd-ticket-board-select-wrap {
position: relative;
max-width: 12.5rem;
}
.hd-ticket-board-select-wrap::after {
position: absolute;
top: 50%;
right: .7rem;
width: .45rem;
height: .45rem;
content: "";
pointer-events: none;
border-right: 2px solid #86efac;
border-bottom: 2px solid #86efac;
transform: translateY(-65%) rotate(45deg);
}
.hd-ticket-board-select {
width: 100%;
min-height: 2.35rem;
appearance: none;
-webkit-appearance: none;
border-radius: .85rem;
border: 1px solid rgba(34,197,94,.35) !important;
background: linear-gradient(135deg, #052e16 0%, #064e3b 100%) !important;
color: #ecfdf5 !important;
padding: .48rem 2rem .48rem .75rem;
font-size: .75rem;
font-weight: 800;
outline: none;
box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 22px rgba(0,0,0,.26);
}
.hd-ticket-board-select option {
background: #052e16 !important;
color: #ecfdf5 !important;
}
.hd-ticket-board-select:focus {
border-color: #86efac !important;
box-shadow: 0 0 0 3px rgba(34,197,94,.28), inset 0 1px 0 rgba(255,255,255,.08);
}
.helpdesk-ticket-form,
.helpdesk-ticket-form * {
-webkit-tap-highlight-color: transparent;
}
.helpdesk-ticket-form input,
.helpdesk-ticket-form textarea,
.helpdesk-ticket-form select,
.helpdesk-ticket-form .select2-container--default .select2-selection--single,
.helpdesk-ticket-form .select2-container--default .select2-selection--multiple,
.helpdesk-ticket-form .select2-container--default .select2-selection__rendered,
.helpdesk-ticket-form .select2-container--default .select2-selection__choice {
background: #09090b !important;
background-color: #09090b !important;
color: #f4f4f5 !important;
border-color: #3f3f46 !important;
caret-color: #f4f4f5 !important;
opacity: 1 !important;
}
.helpdesk-ticket-form input:disabled,
.helpdesk-ticket-form textarea:disabled,
.helpdesk-ticket-form select:disabled,
.helpdesk-ticket-form .select2-container--disabled .select2-selection--single,
.helpdesk-ticket-form .select2-container--disabled .select2-selection--multiple,
.helpdesk-ticket-form [disabled],
.helpdesk-ticket-form [aria-disabled="true"] {
background: #09090b !important;
background-color: #09090b !important;
color: #a1a1aa !important;
opacity: 1 !important;
}
.helpdesk-ticket-form input:-webkit-autofill,
.helpdesk-ticket-form input:-webkit-autofill:hover,
.helpdesk-ticket-form input:-webkit-autofill:focus,
.helpdesk-ticket-form textarea:-webkit-autofill,
.helpdesk-ticket-form textarea:-webkit-autofill:hover,
.helpdesk-ticket-form textarea:-webkit-autofill:focus,
.helpdesk-ticket-form select:-webkit-autofill,
.helpdesk-ticket-form select:-webkit-autofill:hover,
.helpdesk-ticket-form select:-webkit-autofill:focus {
-webkit-text-fill-color: #f4f4f5 !important;
box-shadow: 0 0 0 1000px #09090b inset !important;
transition: background-color 9999s ease-in-out 0s;
}
.hd-helpdesk-surface .hd-btn,
.hd-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
border-radius: .85rem;
padding: .62rem 1.05rem;
font-size: .875rem;
line-height: 1.25rem;
font-weight: 800;
color: #ffffff !important;
text-decoration: none !important;
border: 1px solid rgba(255,255,255,.14);
box-shadow: 0 12px 28px rgba(0,0,0,.22);
transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.hd-helpdesk-surface .hd-btn:hover,
.hd-btn:hover {
transform: translateY(-1px);
box-shadow: 0 16px 34px rgba(0,0,0,.30);
}
.hd-helpdesk-surface .hd-btn-sm,
.hd-btn-sm {
border-radius: .65rem;
padding: .42rem .78rem;
font-size: .8125rem;
}
.hd-helpdesk-surface .hd-btn-blue,
.hd-btn-blue { background: #2563eb !important; }
.hd-helpdesk-surface .hd-btn-blue:hover,
.hd-btn-blue:hover { background: #1d4ed8 !important; }
.hd-helpdesk-surface .hd-btn-green,
.hd-btn-green { background: #16a34a !important; }
.hd-helpdesk-surface .hd-btn-green:hover,
.hd-btn-green:hover { background: #15803d !important; }
.hd-helpdesk-surface .hd-btn-amber,
.hd-btn-amber { background: #f59e0b !important; }
.hd-helpdesk-surface .hd-btn-amber:hover,
.hd-btn-amber:hover { background: #d97706 !important; }
.hd-helpdesk-surface .hd-btn-red,
.hd-btn-red { background: #dc2626 !important; }
.hd-helpdesk-surface .hd-btn-red:hover,
.hd-btn-red:hover { background: #b91c1c !important; }
.hd-helpdesk-surface .hd-btn-violet,
.hd-btn-violet { background: #7c3aed !important; }
.hd-helpdesk-surface .hd-btn-violet:hover,
.hd-btn-violet:hover { background: #6d28d9 !important; }
.hd-helpdesk-surface button[type="submit"],
.hd-helpdesk-surface button[data-flux-button][type="submit"] {
background: #16a34a !important;
color: #ffffff !important;
border-color: rgba(255,255,255,.14) !important;
}
.hd-helpdesk-surface button[wire\:click^="reset"],
.hd-helpdesk-surface button[wire\:target^="reset"] {
background: #f59e0b !important;
color: #ffffff !important;
border-color: rgba(255,255,255,.14) !important;
}
.hd-helpdesk-surface button[wire\:click^="edit"],
.hd-helpdesk-surface button[wire\:target^="edit"] {
background: #2563eb !important;
color: #ffffff !important;
border-color: rgba(255,255,255,.14) !important;
}
.hd-helpdesk-surface button[wire\:click^="delete"],
.hd-helpdesk-surface button[wire\:target^="delete"] {
background: #dc2626 !important;
color: #ffffff !important;
border-color: rgba(255,255,255,.14) !important;
}
.hd-select {
width: 100%;
min-height: 3.35rem;
border-radius: 1rem;
border: 1px solid #3f3f46 !important;
background: #09090b !important;
color: #f4f4f5 !important;
padding: .78rem 3rem .78rem 1rem;
font-weight: 800;
outline: none;
box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 26px rgba(0,0,0,.24);
}
.hd-select:focus {
border-color: #60a5fa !important;
box-shadow: 0 0 0 3px rgba(96,165,250,.38), inset 0 1px 0 rgba(255,255,255,.05);
}
.helpdesk-ticket-form,
.helpdesk-ticket-form * {
-webkit-tap-highlight-color: transparent;
}
.helpdesk-ticket-form input,
.helpdesk-ticket-form textarea,
.helpdesk-ticket-form select,
.helpdesk-ticket-form .select2-container--default .select2-selection--single,
.helpdesk-ticket-form .select2-container--default .select2-selection--multiple,
.helpdesk-ticket-form .select2-container--default .select2-selection__rendered,
.helpdesk-ticket-form .select2-container--default .select2-selection__choice {
background: #09090b !important;
background-color: #09090b !important;
color: #f4f4f5 !important;
border-color: #3f3f46 !important;
caret-color: #f4f4f5 !important;
opacity: 1 !important;
}
.helpdesk-ticket-form input:disabled,
.helpdesk-ticket-form textarea:disabled,
.helpdesk-ticket-form select:disabled,
.helpdesk-ticket-form .select2-container--disabled .select2-selection--single,
.helpdesk-ticket-form .select2-container--disabled .select2-selection--multiple,
.helpdesk-ticket-form [disabled],
.helpdesk-ticket-form [aria-disabled="true"] {
background: #09090b !important;
background-color: #09090b !important;
color: #a1a1aa !important;
opacity: 1 !important;
}
.helpdesk-ticket-form input:-webkit-autofill,
.helpdesk-ticket-form input:-webkit-autofill:hover,
.helpdesk-ticket-form input:-webkit-autofill:focus,
.helpdesk-ticket-form textarea:-webkit-autofill,
.helpdesk-ticket-form textarea:-webkit-autofill:hover,
.helpdesk-ticket-form textarea:-webkit-autofill:focus,
.helpdesk-ticket-form select:-webkit-autofill,
.helpdesk-ticket-form select:-webkit-autofill:hover,
.helpdesk-ticket-form select:-webkit-autofill:focus {
-webkit-text-fill-color: #f4f4f5 !important;
box-shadow: 0 0 0 1000px #09090b inset !important;
transition: background-color 9999s ease-in-out 0s;
}
resources/themes/backend/views/dashboard.blade.php
+2 -17
View File
@@ -1,18 +1,3 @@
<x-layouts::app :title="__('Dashboard')">
<div class="flex h-full w-full flex-1 flex-col gap-4 rounded-xl">
<div class="grid auto-rows-min gap-4 md:grid-cols-3">
<div class="relative aspect-video overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700">
<x-placeholder-pattern class="absolute inset-0 size-full stroke-gray-900/20 dark:stroke-neutral-100/20" />
</div>
<div class="relative aspect-video overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700">
<x-placeholder-pattern class="absolute inset-0 size-full stroke-gray-900/20 dark:stroke-neutral-100/20" />
</div>
<div class="relative aspect-video overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700">
<x-placeholder-pattern class="absolute inset-0 size-full stroke-gray-900/20 dark:stroke-neutral-100/20" />
</div>
</div>
<div class="relative h-full flex-1 overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700">
<x-placeholder-pattern class="absolute inset-0 size-full stroke-gray-900/20 dark:stroke-neutral-100/20" />
</div>
</div>
<x-layouts::app :title="__('Helpdesk Dashboard')">
<livewire:helpdesk.dashboard-widget />
</x-layouts::app>
resources/themes/backend/views/modules/helpdesk/index.blade.php
+3
View File
@@ -0,0 +1,3 @@
<x-layouts::app :title="__('Helpdesk')">
<livewire:helpdesk.dashboard-widget />
</x-layouts::app>
resources/themes/backend/views/modules/helpdesk/livewire/dashboard-widget.blade.php
+124
View File
@@ -0,0 +1,124 @@
<div class="flex w-full flex-1 flex-col gap-6">
<div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
<div>
<flux:heading size="xl">{{ __('Helpdesk') }}</flux:heading>
<flux:text class="mt-1">{{ __('Support operations, workload and recent activity.') }}</flux:text>
</div>
<div class="flex flex-wrap gap-2">
<flux:button :href="route('helpdesk.tickets.index')" variant="ghost" icon="list-bullet" wire:navigate>
{{ __('Tickets') }}
</flux:button>
<flux:button :href="route('helpdesk.kanban')" variant="ghost" icon="view-columns" wire:navigate>
{{ __('Kanban') }}
</flux:button>
<flux:button :href="route('helpdesk.tickets.create')" variant="primary" icon="plus" wire:navigate>
{{ __('New ticket') }}
</flux:button>
</div>
</div>
<div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
<div class="rounded-xl border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
<flux:text>{{ __('Total tickets') }}</flux:text>
<div class="mt-2 text-3xl font-semibold tracking-tight text-zinc-950 dark:text-white">{{ $totalCount }}</div>
<flux:text class="mt-2">{{ __('All tickets visible to you') }}</flux:text>
</div>
<div class="rounded-xl border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
<flux:text>{{ __('Open') }}</flux:text>
<div class="mt-2 text-3xl font-semibold tracking-tight text-zinc-950 dark:text-white">{{ $openCount }}</div>
<flux:text class="mt-2">{{ $openPercent }}% {{ __('of total') }}</flux:text>
</div>
<div class="rounded-xl border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
<flux:text>{{ __('Closed') }}</flux:text>
<div class="mt-2 text-3xl font-semibold tracking-tight text-zinc-950 dark:text-white">{{ $closedCount }}</div>
<flux:text class="mt-2">{{ $closedPercent }}% {{ __('resolved') }}</flux:text>
</div>
<div class="rounded-xl border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
<flux:text>{{ __('High priority') }}</flux:text>
<div class="mt-2 text-3xl font-semibold tracking-tight text-zinc-950 dark:text-white">{{ $criticalCount }}</div>
<flux:text class="mt-2">{{ __('Critical, urgent or high') }}</flux:text>
</div>
</div>
<div class="grid gap-6 xl:grid-cols-3">
<section class="xl:col-span-2 rounded-xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
<div class="flex items-center justify-between border-b border-zinc-200 px-5 py-4 dark:border-zinc-700">
<div>
<flux:heading size="lg">{{ __('Recent tickets') }}</flux:heading>
<flux:text>{{ __('Latest support activity') }}</flux:text>
</div>
<flux:button :href="route('helpdesk.tickets.index')" size="sm" variant="ghost" wire:navigate>
{{ __('View all') }}
</flux:button>
</div>
<div class="divide-y divide-zinc-200 dark:divide-zinc-700">
@forelse ($recentTickets as $ticket)
<a
href="{{ route('helpdesk.tickets.show', $ticket) }}"
wire:navigate
class="flex items-start justify-between gap-4 px-5 py-4 transition hover:bg-zinc-50 dark:hover:bg-zinc-800/60"
>
<div class="min-w-0">
<div class="truncate font-medium text-zinc-950 dark:text-white">
{{ $ticket->reference ?? $ticket->id }} · {{ $ticket->subject ?? __('Untitled ticket') }}
</div>
<div class="mt-1 flex flex-wrap gap-x-3 gap-y-1 text-sm text-zinc-500 dark:text-zinc-400">
@if ($ticket->status)
<span>{{ $ticket->status->name }}</span>
@endif
@if ($ticket->priority)
<span>{{ $ticket->priority->name }}</span>
@endif
@if ($ticket->last_activity_at)
<span>{{ $ticket->last_activity_at->diffForHumans() }}</span>
@endif
</div>
</div>
<flux:icon.chevron-right class="mt-1 size-4 shrink-0 text-zinc-400" />
</a>
@empty
<div class="px-5 py-10 text-center">
<flux:text>{{ __('No tickets yet.') }}</flux:text>
</div>
@endforelse
</div>
</section>
<section class="rounded-xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
<div class="border-b border-zinc-200 px-5 py-4 dark:border-zinc-700">
<flux:heading size="lg">{{ __('Recent Git activity') }}</flux:heading>
<flux:text>{{ __('Commits linked to Helpdesk') }}</flux:text>
</div>
<div class="divide-y divide-zinc-200 dark:divide-zinc-700">
@forelse ($recentCommits as $commit)
<div class="px-5 py-4">
<div class="truncate font-medium text-zinc-950 dark:text-white">
{{ $commit->repository?->name ?? __('Repository') }}
</div>
<div class="mt-1 line-clamp-2 text-sm text-zinc-600 dark:text-zinc-300">
{{ $commit->message ?? __('Commit') }}
</div>
<div class="mt-2 flex flex-wrap gap-x-3 gap-y-1 text-xs text-zinc-500 dark:text-zinc-400">
@if ($commit->sha)
<span>{{ substr($commit->sha, 0, 8) }}</span>
@endif
@if ($commit->committed_at)
<span>{{ $commit->committed_at->diffForHumans() }}</span>
@endif
</div>
</div>
@empty
<div class="px-5 py-10 text-center">
<flux:text>{{ __('No Git activity yet.') }}</flux:text>
</div>
@endforelse
</div>
</section>
</div>
</div>