CHANGE_UI Fixes

This commit is contained in:
venba-Inspriron-3558 2025-08-25 17:14:53 +05:30
parent 356a379890
commit 424bf7c395
4 changed files with 451 additions and 176 deletions

View File

@ -525,59 +525,144 @@ rgba(226, 103, 40, 0.5) (transparent)
rgba(0, 153, 158, 0.5) (transparent)
*/
.btn-app-primary {
.app-field-grey {
background-color: #ECECEC !important;
}
.app-font-family {
font-family: 'Poppins', sans-serif !important;
}
.app-title { font-size: 18px; }
.app-heading { font-size: 16px; }
.app-subtitle { font-size: 14px; }
.app-text { font-size: 12px; }
.title-text {
font-weight: 500;
font-style: normal;
font-size: 30px;
line-height: 1;
letter-spacing: 0;
}
.sub-title-text {
font-weight: 500;
font-style: normal;
font-size: 18px;
line-height: 1;
letter-spacing: 0;
}
.app-text-left {
text-align: left !important; }
.app-text-right {
text-align: right !important; }
.app-text-center {
text-align: center !important; }
.app-text-white {
color: #ffffff !important; }
.app-text-black {
color: #000000 !important; }
.app-text-grey {
color: #5D5D5D !important; }
.app-text-primary {
color: #00999E !important; }
.app-text-secondary {
color: #E26728 !important; }
.app-text-success {
color: #1abc9c !important; }
a.app-text-primary:hover, a.app-text-primary:focus {
color: rgba(0, 153, 158, 0.5); !important; }
a.app-text-secondary:hover, a.app-text-secondary:focus {
color: rgba(226, 103, 40, 0.5) !important; }
a.app-text-success:hover, a.app-text-success:focus {
color: #117964 !important; }
.app-btn-primary {
color: #fff !important;
background-color: #00999E;
border-color: #00999E; }
.btn-app-primary:hover {
.app-btn-primary:hover {
color: #fff !important;
background-color: #007A7E;
border-color: #006C70; }
.btn-app-primary:focus, .btn-app-primary.focus {
.app-btn-primary:focus, .app-btn-primary.focus {
color: #fff !important;
background-color: #007A7E;
border-color: #006C70;
box-shadow: 0 0 0 0.15rem rgba(0, 153, 158, 0.5); }
.btn-app-primary.disabled, .btn-app-primary:disabled {
.app-btn-primary.disabled, .app-btn-primary:disabled {
color: #fff !important;
background-color: #00999E;
border-color: #00999E; }
.btn-app-primary:not(:disabled):not(.disabled):active, .btn-app-primary:not(:disabled):not(.disabled).active,
.show > .btn-app-primary.dropdown-toggle {
.app-btn-primary:not(:disabled):not(.disabled):active, .app-btn-primary:not(:disabled):not(.disabled).active,
.show > .app-btn-primary.dropdown-toggle {
color: #fff !important;
background-color: #006C70;
border-color: #005D61; }
.btn-app-primary:not(:disabled):not(.disabled):active:focus, .btn-app-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-app-primary.dropdown-toggle:focus {
.app-btn-primary:not(:disabled):not(.disabled):active:focus, .app-btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .app-btn-primary.dropdown-toggle:focus {
box-shadow: 0 0 0 0.15rem rgba(0, 153, 158, 0.5); }
.btn-app-ternary {
.app-btn-secondary {
color: #fff !important;
background-color: #E26728;
border-color: #E26728; }
.btn-app-ternary:hover {
.app-btn-secondary:hover {
color: #fff !important;
background-color: #B8521F;
border-color: #9C461B; }
.btn-app-ternary:focus, .btn-app-ternary.focus {
.app-btn-secondary:focus, .app-btn-secondary.focus {
color: #fff !important;
background-color: #B8521F;
background-color: #E26728;
border-color: #9C461B;
box-shadow: 0 0 0 0.15rem rgba(226, 103, 40, 0.5); }
.btn-app-ternary.disabled, .btn-app-ternary:disabled {
.app-btn-secondary.disabled, .app-btn-secondary:disabled {
color: #fff !important;
background-color: #E26728;
border-color: #E26728; }
.btn-app-ternary:not(:disabled):not(.disabled):active, .btn-app-ternary:not(:disabled):not(.disabled).active,
.show > .btn-app-ternary.dropdown-toggle {
.app-btn-secondary:not(:disabled):not(.disabled):active, .app-btn-secondary:not(:disabled):not(.disabled).active,
.show > .app-btn-secondary.dropdown-toggle {
color: #fff !important;
background-color: #9C461B;
border-color: #803A16; }
.btn-app-ternary:not(:disabled):not(.disabled):active:focus, .btn-app-ternary:not(:disabled):not(.disabled).active:focus,
.show > .btn-app-ternary.dropdown-toggle:focus {
.app-btn-secondary:not(:disabled):not(.disabled):active:focus, .app-btn-secondary:not(:disabled):not(.disabled).active:focus,
.show > .app-btn-secondary.dropdown-toggle:focus {
box-shadow: 0 0 0 0.15rem rgba(226, 103, 40, 0.5); }
.btn-border-radius{ border-radius: 10px !important; }
.app-btn-border-radius{ border-radius: 10px !important; }
.app-badge-primary {
color: #ffffff;
background-color: #00999E; }
a.app-badge-primary:hover, a.app-badge-primary:focus {
color: #ffffff;
background-color: #007A7E; }
a.app-badge-primary:focus, a.app-badge-primary.focus {
outline: 0;
box-shadow: 0 0 0 0.15rem rgba(0, 153, 158, 0.5); }
.app-badge-secondary {
color: #ffffff;
background-color: #E26728; }
a.app-badge-secondary:hover, a.app-badge-secondary:focus {
color: #ffffff;
background-color: #B8521F; }
a.app-badge-secondary:focus, a.app-badge-secondary.focus {
outline: 0;
box-shadow: 0 0 0 0.15rem rgba(226, 103, 40, 0.5); }
@ -750,9 +835,9 @@ rgba(0, 153, 158, 0.5) (transparent)
<li>
<a href="<?= base_url('/ticket/claim-upload') ?>">Claim Dump Upload</a>
</li>
<li>
<!-- <li>
<a href="<?= base_url('/ticketList?return_type=web') ?>">Ticket List</a>
</li>
</li> -->
</ul>
</div>
</li>
@ -772,7 +857,7 @@ rgba(0, 153, 158, 0.5) (transparent)
<?php if (in_array(get_role_id(), [1,2,3,5]) || in_array(CLAIMS_TEAM_ID, user_team())) { ?>
<li>
<a id="tickets" href="<?= base_url('/ticketList?return_type=web') ?>" class="waves-effect img-inactive-not-working">
<img src="<?= base_url() . "public"; ?>/assets/images/user_manual_sb.png" alt="Logo" height="20">
<img src="<?= base_url() . "public"; ?>/assets/images/ticket.png" alt="Logo" height="20">
<span>Tickets</span>
</a>
</li>

View File

@ -73,8 +73,8 @@ tbody tr td:last-child {
/* Optional: control first column width */
.table th:nth-child(1),
.table td:nth-child(1) {
max-width: 200px !important;
min-width: 100px !important;
max-width: 50px !important;
min-width: 50px !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
@ -104,6 +104,14 @@ tbody tr td:last-child {
text-align: right;
}
.text-custom {
font-weight: 400;
font-style: normal;
font-size: 11px;
line-height: 1.44;
letter-spacing: -0.02em;
}
</style>
<style>
/* .table th:nth-child(1),
@ -116,10 +124,119 @@ tbody tr td:last-child {
} */
td .text-muted {
font-size: 0.85em; /* smaller than default */
color: #6c757d !important; /* Bootstrap muted grey */
.text-custom-black{
color: #000000 !important;
}
.text-custom-grey{
font-size: 0.85em;
color: #6c757d !important;
}
table.dataTable td.wrap {
white-space: normal !important;
word-break: break-word;
}
table thead th {
text-align: center;
vertical-align: middle;
}
.btn-custom {
font-weight: 500;
font-style: normal;
font-size: 12px;
line-height: 1;
letter-spacing: 0;
text-align: center;
}
.table-custom th {
font-family: 'Poppins', sans-serif !important;
font-weight: 700;
font-style: normal;
font-size: 13px;
line-height: 1.44;
letter-spacing: -0.02em;
text-align: center;
color: #000;
padding: 10px 12px;
}
/* Remove borders from all pagination buttons */
/* Pagination (p) */
.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate .paginate_button:active,
.dataTables_wrapper .dataTables_paginate .paginate_button:focus,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
padding: 2px 6px !important;
font-size: 12px !important;
background: transparent !important;
border-radius: 13px !important;
border: none !important;
}
.dataTables_wrapper .dataTables_paginate .page-item.previous .page-link,
.dataTables_wrapper .dataTables_paginate .page-item.next .page-link {
/* box-shadow: 0 0 0 0.15rem rgba(0,153,158,0.5) !important;
background: rgba(0,153,158,0.8) !important;*/
border-radius: 13px !important;
background-color: #F5FFFF;
border: none !important;
box-shadow: 0 0 0 0.15rem #F5FFFF;
}
/* Active page number */
.dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
color: #fff !important;
border-radius: 13px !important;
}
/* Inactive (not active) page numbers */
.dataTables_wrapper .dataTables_paginate .page-item:not(.active) .page-link {
border: 1px solid #fff !important;
border-radius: 13px !important;
}
/* Info text (i) */
.dataTables_info {
font-size: 12px;
}
.form-control {
background-color: #ECECEC !important;
border: 1px solid #ccc; /* optional */
color: #000; /* keep text readable */
}
.form-control:focus {
background-color: #ECECEC !important; /* keep same color on focus */
box-shadow: none; /* remove blue glow */
}
/* Select2 box */
.select2-container .select2-selection--single {
background-color: #ECECEC !important;
border: 1px solid #ccc !important;
height: 38px !important;
}
/* Text inside */
.select2-container .select2-selection__rendered {
color: #000 !important;
line-height: 36px !important;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
background-color: #ECECEC !important;
}
</style>
@ -128,14 +245,13 @@ td .text-muted {
<div class="col-12">
<div class="card">
<div class="card-body maincard">
<div class="row" style="padding-bottom: 10px;" >
<div class="row">
<div class="col-6" style="align-self: center;">
<h4 style="position: relative;">Ticket List </h4>
<p class="title-text app-font-family" style="position: relative;">Tickets </p>
</div>
</div>
<div class="table-responsive">
<table id="scroll-horizontal-datatable" class="table w-100 nowrap">
<div>
<table id="scroll-horizontal-datatable" class="table w-100 nowrap text-custom-black text-custom app-font-family">
<thead>
<tr>
<th>Ticket No</th>
@ -154,28 +270,35 @@ td .text-muted {
<?php foreach($ticket_data as $index => $row){ ?>
<tr data-id="<?= $row['thz_id']; ?>" style="cursor: pointer;">
<td><?php echo $row['thz_id']; ?></td>
<td>
<td class="app-text-right"><?php echo $row['thz_id']; ?></td>
<td class="app-text-left">
<?php echo $row['name']; ?>
<span class="text-muted"><?php if (!empty($row['empcode'])): echo '('.$row['empcode'].')'; endif; ?></span><br>
<span class="text-muted"><?php if (!empty($row['mobile'])): echo $row['mobile']; endif; ?></span>
<span class="text-custom-grey"><?php if (!empty($row['empcode'])): echo '('.$row['empcode'].')'; endif; ?></span><br>
<span class="text-custom-grey"><?php if (!empty($row['mobile'])): echo $row['mobile']; endif; ?></span>
</td>
<td><?php echo (!empty($row['policy_no']) && strtolower($row['policy_no']) !== 'null')
<td class="app-text-center"><?php echo (!empty($row['policy_no']) && strtolower($row['policy_no']) !== 'null')
? $row['policy_no']
: 'N/A'; ?>
</td>
<td><?php echo $row['ticket_type']; ?></td>
<td><?php echo $row['subject']; ?></td>
<td><?php echo $row['status']; ?></td>
<td><?php echo $row['assignee_name']; ?></td>
<td>
<td class="app-text-center"><?php echo $row['ticket_type'] ? $row['ticket_type'] : '-'; ?></td>
<td class="app-text-center wrap" title="<?php echo htmlspecialchars($row['subject']); ?>">
<?php
$subject = $row['subject'] ? $row['subject'] : 'N/A';
echo (strlen($subject) > 50)
? htmlspecialchars(substr($subject, 0, 50)) . "..."
: htmlspecialchars($subject);
?>
</td>
<td class="app-text-center"><?php echo $row['status'] ? $row['status'] : '-' ; ?></td>
<td class="app-text-left"><?php echo $row['assignee_name'] ? $row['assignee_name'] : '-'; ?></td>
<td class="app-text-left">
<?php if (!empty($row['created_at'])):
$cdt = new DateTime($row['created_at']);
echo $cdt->format('d/m/Y') . "<br><span class='time'>" . $cdt->format('h:i a') . "</span>";
endif;
?>
</td>
<td>
<td class="app-text-left">
<?php if (!empty($row['updated_at'])):
$udt = new DateTime($row['updated_at']);
echo $udt->format('d/m/Y') . "<br><span class='time'>" . $udt->format('h:i a') . "</span>";
@ -207,15 +330,15 @@ td .text-muted {
<!-- first row -->
<div class="d-flex w-100 justify-content-between align-items-center">
<h4 class="modal-title mb-0" id="modalLabel">New Ticket</h4>
<h4 class="modal-title app-font-family mb-0" id="modalLabel">New Ticket</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<!-- second row -->
<div class="form-row mt-3 w-100">
<div class="form-group col-md-6">
<div class="form-group col-md-6 app-font-family">
<label for="client_id">Client</label>
<select class="form-control" id="client_id" name="client_id">
<select class="form-control app-field-grey" id="client_id" name="client_id">
<option value="">Select Client</option>
<?php if(isset($client_list)) { ?>
<?php foreach ($client_list as $c) { ?>
@ -225,22 +348,21 @@ td .text-muted {
</select>
</div>
<div class="form-group col-md-5">
<div class="form-group col-md-5 app-font-family">
<label for="mobile">Mobile<span class="text-danger">*</span></label>
<input type="text" class="form-control" id="mobile"
name="mobile" placeholder="Enter Mobile"
pattern="^[0-9]{10}$" required
<input type="text" class="form-control app-field-grey" id="mobile" placeholder="Enter Mobile Number"
name="mobile"
pattern="^[0-9]{10}$" required maxlength="10"
title="Please enter a valid 10-digit mobile number">
</div>
<div class="form-group col-md-1" style="padding:27.5px 0 0 0;">
<button type="button" class="btn btn-primary" style="padding: 0 10px !important; border-radius:13px;" onclick="getAutoFetchDetails()"><i class="mdi mdi-cached" style="font-size:24px; color:#fff !important;"></i></button>
<div class="form-group col-md-1" style="padding:32.5px 0 0 18px;">
<button type="button" class="btn-custom app-btn-primary app-font-family" style="padding: 0 10px !important; border-radius:13px;" onclick="getAutoFetchDetails()"><i class="mdi mdi-cached app-text-white" style="font-size:24px;"></i></button>
</div>
</div>
</div>
<div class="modal-body" style="padding-top: 15px !important;
padding-bottom: 10px !important;">
<div class="modal-body" style="padding: 15px !important;">
<div class="form-row">
<input type="hidden" id="thz_id" name="thz_id">
<input type="hidden" id="return_type" name="return_type">
@ -248,12 +370,12 @@ td .text-muted {
<input type="hidden" id="policy_id" name="policy_id">
<input type="hidden" id="created_by" name="created_by" value="<?= get_session_userid(); ?>">
<div class="form-group col-md-4">
<div class="form-group col-md-4 app-font-family">
<label for="name">Name<span class="text-danger">*</span></label>
<input type="text" class="form-control" id="name" name="name" placeholder="Enter Name" required>
</div>
<div class="form-group col-md-4">
<div class="form-group col-md-4 app-font-family">
<label for="email">Email Id<span class="text-danger">*</span></label>
<input type="email" class="form-control" id="email"
name="email" placeholder="Enter Email"
@ -262,13 +384,13 @@ td .text-muted {
title="Please enter a valid email address">
</div>
<div class="form-group col-md-4">
<div class="form-group col-md-4 app-font-family">
<label for="empcode">Employee code</label>
<input type="text" class="form-control" id="empcode" name="empcode" placeholder="Enter Employee code">
</div>
<div class="form-group col-md-4">
<div class="form-group col-md-4 app-font-family">
<label for="ticket_type">Ticket Type<span class="text-danger">*</span></label>
<select class="form-control" id="ticket_type" name="ticket_type" required onchange="hideandshowpolicy()">
<option value="">Select Ticket Type</option>
@ -277,7 +399,7 @@ td .text-muted {
</select>
</div>
<div class="form-group col-md-4" id="policy_container">
<div class="form-group col-md-4 app-font-family" id="policy_container">
<label for="policy_no">Policy Number</label>
<select class="form-control" id="policy_no" name="policy_no" onchange="changevalue()">
<option value="" selected data-id="">Select Policy</option>
@ -312,12 +434,12 @@ td .text-muted {
</div>
<?php } ?>
<div class="form-group col-md-12">
<div class="form-group col-md-12 app-font-family">
<label for="subject">Subject<span class="text-danger">*</span></label>
<input type="text" class="form-control" id="subject" name="subject" placeholder="Enter Subject" required>
</div>
<div class="form-group col-md-12">
<div class="form-group col-md-12 app-font-family">
<label for="message">Message<span class="text-danger">*</span></label>
<!-- <input type="text" class="form-control" id="message" name="message" placeholder="Enter Message"> -->
<textarea class="form-control" id="message" name="message" placeholder="Enter Message" rows="4" required></textarea>
@ -326,8 +448,8 @@ td .text-muted {
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary btn-border-radius mr-2 text-white" onclick="resetTicket()">Reset</button>
<button type="button" class="btn btn-ternary btn-border-radius" onclick="submitTicket()">Save</button>
<button type="button" class="btn app-btn-primary app-btn-border-radius mr-2 app-text-white" onclick="resetTicket()">Reset</button>
<button type="button" class="btn app-btn-secondary app-btn-border-radius" onclick="submitTicket()">Save</button>
</div>
</form>
</div>
@ -359,7 +481,7 @@ td .text-muted {
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-ternary btn-border-radius" onclick="updateAssignTo()">Save</button>
<button type="button" class="btn-custom app-btn-secondary app-btn-border-radius app-font-family" onclick="updateAssignTo()">Save</button>
</div>
</div>
</div>
@ -392,25 +514,39 @@ td .text-muted {
var name = document.getElementById('name').value.trim();
var mobile = document.getElementById('mobile').value.trim();
var email = document.getElementById('email').value.trim();
var message = document.getElementById('message').value.trim();
var subject = document.getElementById('subject').value.trim();
var ticketType = document.getElementById('ticket_type').value.trim();
// Validation checks
if (name === "" || mobile === "" || email === "" || ticketType === "") {
toastr.warning('Please fill all required fields.', 'warning');
toastr.warning('Please fill all required fields.', 'Warning');
form.classList.add('was-validated');
return;
}
if (message.length > 1500) {
toastr.error('Message cannot exceed 1500 characters', 'Warning');
form.classList.add('was-validated');
return;
}
if (subject.length > 150) {
toastr.error('Subject cannot exceed 150 characters', 'Warning');
form.classList.add('was-validated');
return;
}
var mobilePattern = /^[0-9]{10}$/;
if (!mobilePattern.test(mobile)) {
toastr.warning('Please enter a valid 10-digit mobile number.', 'warning');
toastr.warning('Please enter a valid 10-digit mobile number.', 'Warning');
document.getElementById('mobile').focus();
return;
}
var emailPattern = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;
if (!emailPattern.test(email)) {
toastr.warning('Please enter a valid email address.', 'warning');
toastr.warning('Please enter a valid email address.', 'Warning');
document.getElementById('email').focus();
return;
}
@ -427,16 +563,16 @@ td .text-muted {
dataType: 'json',
success: function(response) {
if (response.status === "success") {
toastr.success(response.message, 'success');
toastr.success(response.message, 'Success');
$('#ticketModal').modal('hide');
form.reset();
window.location.href = "<?= base_url('ticketList?return_type=web') ?>";
} else {
toastr.error(response.message, 'error');
toastr.error(response.message, 'Error');
}
},
error: function(xhr) {
toastr.error("Something went wrong!", 'error');
toastr.error("Something went wrong!", 'Error');
console.error(xhr.responseText);
}
});
@ -462,18 +598,18 @@ td .text-muted {
policySelect.innerHTML = '<option value="" data-id="">Select Policy</option>';
if (client_id === "") {
toastr.warning('Please Select Client.', 'warning');
toastr.warning('Please Select Client.', 'Warning');
return;
}
if (mobile === "") {
toastr.warning('Please Enter a mobile number.', 'warning');
toastr.warning('Please Enter a mobile number.', 'Warning');
return;
}
var mobilePattern = /^[0-9]{10}$/;
if (!mobilePattern.test(mobile)) {
toastr.warning('Please enter a valid 10-digit mobile number.', 'warning');
toastr.warning('Please enter a valid 10-digit mobile number.', 'Warning');
document.getElementById('mobile').focus();
return;
}
@ -489,7 +625,7 @@ td .text-muted {
let policies = response.data.policy_details;
document.getElementById('name').value = client.name || "";
document.getElementById('email').value = client.email_personal || "";
document.getElementById('email').value = client.email_corporate || "";
document.getElementById('empcode').value = client.emp_code || "";
document.getElementById('branch_id').value = client.branch_id || "";
@ -508,11 +644,11 @@ td .text-muted {
document.getElementById('policy_id').value = policies[0].id;
}
} else {
toastr.warning(response.message || "No details found.", 'warning');
toastr.warning(response.message || "No details found.", 'Warning');
}
},
error: function(xhr) {
toastr.error("Something went wrong!", 'error');
toastr.error("Something went wrong!", 'Error');
console.error(xhr.responseText);
}
});
@ -578,17 +714,16 @@ $(document).ready(function() {
"<'row'<'col-sm-5'i><'col-sm-7'p>>",
buttons: [
{
text: '<i class="mdi mdi-plus"></i> Create New Ticket',
className: 'btn btn-primary btn-border-radius text-white mr-2',
attr: { style: "color:#fff !important;" },
text: '<i class="mdi mdi-plus app-text-white" ></i><span class="app-text-white"> Create New Ticket </span>',
className: 'btn app-btn-primary app-btn-border-radius app-text-white mr-2',
action: function(e, dt, node, config) {
openTicket();
}
},
{
extend: 'collection',
text: ' Export <i class="mdi mdi-menu-down"></i>',
className: 'btn btn-ternary btn-border-radius text-white',
text: '<span class="app-text-white"> Export </span><i class="mdi mdi-menu-down app-text-white"></i>',
className: 'btn app-btn-secondary app-btn-border-radius app-text-white',
buttons: [
{
extend: 'csv',
@ -607,8 +742,12 @@ $(document).ready(function() {
}
],
language: {
search: "_INPUT_",
searchPlaceholder: "Search..."
search: "_INPUT_",
searchPlaceholder: "Search...",
paginate: {
previous: "",
next: ""
}
},
paging: true,
pageLength: 25,
@ -644,10 +783,10 @@ function removeticket(input, ticket_id) {
console.log('Data fetched successfully:', response);
if (response.status === true) {
toastr.success(response.message, 'SUCCESS');
toastr.success(response.message, 'Success');
window.location.reload();
} else {
toastr.warning(response.message, 'WARNING');
toastr.warning(response.message, 'Warning');
}
}, function(xhr, status, error) {
console.error('Error fetching data:', error);

View File

@ -47,11 +47,26 @@
.card-scroll{
overflow-y:auto;
height:440px;
min-height:380px;
max-height:380px;
}
.recard-scroll{
overflow-y:auto;
height:350px;
min-height:295px;
max-height:295px;
}
.edit-icon {
font-size: 17px; /* keep fixed size */
color: #555 !important;
cursor: pointer;
transition: transform 0.2s, color 0.2s; /* smooth hover effect */
display: inline-block; /* important for transform */
}
.edit-icon:hover {
color: #00999E !important;
transform: scale(1.5);
}
.maincard{
@ -86,6 +101,37 @@ hr{
}
.related-ticket-card {
margin-bottom: 6px;
}
.related-ticket-card .card-body {
border-radius: 15px;
padding: 6px 15px !important;
}
.related-ticket-card h5,
.related-ticket-card p,
.related-ticket-card small {
margin: 0 !important;
}
</style>
<style>
/* Select2 box */
.select2-container .select2-selection--single {
background-color: #ECECEC !important;
border: 1px solid #ccc !important;
height: 38px !important;
}
/* Text inside */
.select2-container .select2-selection__rendered {
color: #000 !important;
line-height: 36px !important;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
background-color: #ECECEC !important;
}
</style>
@ -103,7 +149,7 @@ hr{
<span onclick="history.back()" style="cursor: pointer;">
<i class="mdi mdi-chevron-left" style="font-size: 43px;"></i>
</span>
Ticket ID-<?= $master[0]['thz_id']; ?>
<span class="title-text app-font-family">Ticket ID-<?= $master[0]['thz_id']; ?></span>
</h4>
</div>
@ -114,39 +160,40 @@ hr{
<div class="col-4" id="notes-body-left">
<div class="card master-card" style="background:#F5FFFF;">
<div class="card-header d-flex justify-content-between align-items-center" style="background:none; border:none;">
<h5 class="mb-0">Details</h5>
<a href="javascript:void(0);"
onclick="openEditTicket()">
<i class="mdi mdi-pencil"
title="Edit"
style="font-size:15px; color:#555; cursor:pointer; transition:0.2s;"
onmouseover="this.style.color='#02a8b5'; this.style.fontSize='17px';"
onmouseout="this.style.color='#555'; this.style.fontSize='15px';">
</i>
<p class="sub-title-text app-font-family mb-0">Details</p>
<a href="javascript:void(0);" onclick="openEditTicket()">
<i class="mdi mdi-pencil edit-icon" title="Edit"></i>
<!-- <i class="mdi mdi-pencil"
title="Edit"
style="font-size:15px; color:#555; cursor:pointer; transition:0.2s;"
onmouseover="this.style.color='#02a8b5'; this.style.fontSize='17px';"
onmouseout="this.style.color='#555'; this.style.fontSize='15px';">
</i> -->
</a>
</div>
<div class="card-body card-scroll" style="padding-left: 27px !important; background:#F5FFFF;">
<div class="card-body card-scroll sub-title-text app-font-family" style="padding:0 27px !important; background:#F5FFFF;">
<div class="row mb-2 ml-o">
<div class="col-5">Ticket ID</div>
<div class="col-7 text-end"><?= $master[0]['thz_id'];?></div>
<div class="col-5 app-subtitle app-text-grey">Ticket ID</div>
<div class="col-7 app-text app-text-black text-end"><?= $master[0]['thz_id'];?></div>
</div>
<div class="row mb-2">
<div class="col-5">Name</div>
<div class="col-7 text-end"><?= $master[0]['name'];?></div>
<div class="col-5 app-subtitle app-text-grey">Name</div>
<div class="col-7 app-text app-text-black text-end"><?= $master[0]['name'];?></div>
</div>
<div class="row mb-2">
<div class="col-5">Mobile</div>
<div class="col-7 text-end"><?= $master[0]['mobile'];?></div>
<div class="col-5 app-subtitle app-text-grey">Mobile</div>
<div class="col-7 app-text app-text-black text-end"><?= $master[0]['mobile'];?></div>
</div>
<div class="row mb-2">
<div class="col-5">Policy Number</div>
<div class="col-7 text-end">
<div class="col-5 app-subtitle app-text-grey">Policy Number</div>
<div class="col-7 app-text text-end">
<?= (!empty($master[0]['policy_no']) && strtolower($master[0]['policy_no']) !== 'null')
? '<u class="text-warning">
? '<u class="app-text-black">
<a href="javascript:void(0);"
class="text-warning"
class="app-text-black"
data-toggle="modal"
data-target="#PolicyModal"
title="Click to view Policy Terms"
data-id="'.$master[0]['policy_id'].'">'
.$master[0]['policy_no'].'
</a>
@ -155,33 +202,34 @@ hr{
</div>
</div>
<div class="row mb-2">
<div class="col-5">Assigned To</div>
<div class="col-7 text-end"><?= $master[0]['assignee_name'];?></div>
<div class="col-5 app-subtitle app-text-grey">Assigned To</div>
<div class="col-7 app-text app-text-black text-end"><?= $master[0]['assignee_name'];?></div>
</div>
<div class="row mb-2">
<div class="col-5">Status</div>
<div class="col-7 text-end"><?= $master[0]['status'];?></div>
<div class="col-5 app-subtitle app-text-grey">Status</div>
<div class="col-7 app-text app-text-black text-end"><?= $master[0]['status'];?></div>
</div>
<div class="row mb-2">
<div class="col-5">Ticket Type</div>
<div class="col-7 text-end"><?= $master[0]['ticket_type'];?></div>
<div class="col-5 app-subtitle app-text-grey">Ticket Type</div>
<div class="col-7 app-text app-text-black text-end"><?= $master[0]['ticket_type'];?></div>
</div>
<div class="row mb-2">
<div class="col-5">Subject</div>
<div class="col-7 text-end"><?= $master[0]['subject'];?></div>
<div class="col-5 app-subtitle app-text-grey">Subject</div>
<div class="col-7 app-text app-text-black text-end"><?= $master[0]['subject'];?></div>
</div>
<div class="row mb-2">
<div class="col-5">Message</div>
<div class="col-7 text-end"><?= $master[0]['message'];?></div>
<div class="col-5 app-subtitle app-text-grey">Message</div>
<div class="col-7 app-text app-text-black text-end"><?= $master[0]['message'];?></div>
</div>
<div class="row mb-2">
<div class="col-5">Related Tickets</div>
<div class="col-7 text-end">
<div class="col-5 app-subtitle app-text-grey">Related Tickets</div>
<div class="col-7 app-text text-end">
<u class="text-warning">
<a href="javascript:void(0);"
class="text-warning"
data-toggle="modal"
data-target="#relatedTicketModal"
title="<?= empty($master[0]['created_by']) ? 'No related tickets' : 'Click to view related tickets'; ?>"
data-id="<?= $master[0]['created_by']; ?>">
View
</a>
@ -200,41 +248,40 @@ hr{
<!-- Conversation Card -->
<div class="card mb-3 conversation-card">
<div class="card-header border-0 p-2 ">
<h5 class="mb-2" style="font-size:15px;">Conversation</h5>
<hr>
<div class="card-header d-flex justify-content-between align-items-center" style="background:none; border:none; padding-bottom: 0px;">
<p class="sub-title-text app-font-family" >Conversation</p>
</div>
<div class="card-body pt-0 recard-scroll" style="padding-left: 15px !important;">
<div class="card-body recard-scroll" style="padding:0 27px !important; margin:0 !important; background:#F5FFFF;">
<?php if(!empty($notes)): ?>
<?php foreach($notes as $i => $conv): ?>
<!-- Top Row: Message + Badge -->
<div class="d-flex justify-content-between align-items-start mb-2">
<div class="flex-grow-1 text-break">
<span class="mb-1 mr-4"><?= $conv['notes'] ?></span>
</div>
<?php if (!empty($conv['notes_type']) && $conv['notes_type'] === "Internal"): ?>
<div>
<span class="badge" style="background-color:#E26828 ;color: white!important;"><?= $conv['notes_type'] ?></span>
<div style="border:none; padding: 0px; margin: 0px;">
<hr/>
<!-- Top Row: Message + Badge -->
<div class="d-flex justify-content-between align-items-start app-text app-text-black">
<p class="mb-1 ml-0 mr-0 "><?= $conv['notes'] ?></p>
<!-- <?php if(!empty($conv['notes_by'])): ?>
<span class="badge bg-warning text-dark"><?= $conv['notes_by'] ?></span>
<?php endif; ?> -->
<?php if (!empty($conv['notes_type']) && $conv['notes_type'] === "Internal"): ?>
<span class="badge app-badge-secondary app-text-white" style="font-size:10px;"><?= $conv['notes_type'] ?></span>
<?php endif; ?>
</div>
<?php endif; ?>
<!-- Bottom Row: Name + Date -->
<div class="d-flex justify-content-between small text-muted" style="padding-top: 5px;">
<span><i class="mdi mdi-account"></i> <?= $conv['name'] ?></span>
<span style="font-size:9px;"><?= date("j F Y h:i a", strtotime($conv['created_at'])) ?></span>
</div>
<!-- <?php echo $i < count($notes)-1 ? '<hr/>' : ''; ?> -->
</div>
<!-- Bottom Row: Name + Date -->
<div class="d-flex justify-content-between small text-muted mb-1">
<span><i class="mdi mdi-account"></i> <?= $conv['name'] ?></span>
<span><?= date("j F Y h:i a", strtotime($conv['created_at'])) ?></span>
</div>
<?php echo $i < count($notes)-1 ? '<hr>' : ''; ?>
<?php endforeach; ?>
<?php else: ?>
<div class="d-flex justify-content-center align-items-center" style="height: 100%;">
<p class="text-center"><i>No Data Found</i></p>
<div class="d-flex justify-content-center align-items-center"
style="height: 45vh; width:100%;">
<p class="text-center"><i>No Data Found</i></p>
</div>
<?php endif; ?>
</div>
@ -266,12 +313,12 @@ hr{
</div>
</div>
<div class="modal fade" id="EditModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal fade app-text-black" id="EditModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<form id="ticketForm">
<div class="modal-header">
<h4 class="modal-title" id="EditModalLabel">Update</h4>
<h4 class="modal-title title-text app-font-family" id="EditModalLabel">Update</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
@ -281,7 +328,7 @@ hr{
<input type="hidden" id="updated_by" name="updated_by" value="<?= get_session_userid(); ?>">
<div class="form-group col-md-12">
<label for="ticket_type">Ticket Type<span class="text-danger">*</span></label>
<label for="ticket_type" class="sub-title-text app-font-family">Ticket Type<span class="text-danger">*</span></label>
<select class="form-control" id="ticket_type" name="ticket_type" required>
<option value="">Select Ticket Type</option>
<option value="Sales">Sales</option>
@ -291,7 +338,7 @@ hr{
<div class="form-group col-md-12">
<label for="status">Status</label>
<label for="status" class="sub-title-text app-font-family">Status</label>
<select class="form-control" id="status" name="status">
<option value="">Select Status</option>
<option value="Open">Open</option>
@ -305,7 +352,7 @@ hr{
// 2,3,4 dropdown data'va varannum but dropdown hide pannanum -->
<?php if(in_array(get_role_id(), [1,5]) ) { ?>
<div class="form-group col-md-12">
<label for="assign_to">Assign To</label>
<label for="assign_to" class="sub-title-text app-font-family">Assign To</label>
<select class="form-control" id="assign_to" name="assign_to">
<option value="">Select Assign To</option>
<?php if(isset($assignee)) { ?>
@ -321,7 +368,7 @@ hr{
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-app-ternary btn-border-radius" onclick="submitTicket()">Save</button>
<button type="button" class="btn app-btn-secondary app-btn-border-radius" onclick="submitTicket()">Save</button>
</div>
</form>
</div>
@ -333,37 +380,40 @@ hr{
<div class="modal-content" style="border-radius:15px;">
<div class="modal-header" style="border-bottom-width:0;">
<h4 class="modal-title">Related Tickets</h4>
<h4 class="modal-title title-text app-font-family">Related Tickets</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body card-scroll" style="padding-top:5px!important;">
<?php if( !isset($related_tickets) || empty($related_tickets) ) { ?>
<div class="d-flex justify-content-center align-items-center">
<div>
<p> No Related Tickets Found </p>
</div>
</div>
<?php } ?>
<?php foreach($related_tickets as $j => $rt): ?>
<div class="card related-ticket-card mb-3" data-related-ticket-id="<?=$rt['thz_id']?>">
<div class="card-body" style="border-radius: 20px; padding:27px !important;">
<div class="d-flex justify-content-between align-items-start">
<h5 class="mb-1"><?php echo '# '.$rt['thz_id']." / ".$rt['ticket_type']; ?></h5>
<small>
<?php if (!empty($rt['created_at'])):
<?php if(!empty($related_tickets)): foreach($related_tickets as $j => $rt): ?>
<div class="card related-ticket-card app-font-family app-text"
style="cursor: pointer;"
onclick="window.location='<?= base_url().'ticketConversationList?return_type=web&thz_id='.$rt['thz_id'] ?>'">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center" style="margin-bottom: 10px !important;">
<h5 class="app-font-family app-text"><?php echo '# '.$rt['thz_id']." / ".$rt['ticket_type']; ?></h5>
<small classs="app-font-family" style="font-size:7px;">
<?php if (!empty($rt['created_at'])):
$cdt = new DateTime($rt['created_at']);
echo $cdt->format('d/m/Y') . "<span class='time'> " . $cdt->format('h:i a') . "</span>";
endif;
?></small>
endif; ?>
</small>
</div>
<p class="mb-2"><?php echo $rt['subject']; ?></p>
<small><span style="color: green !important;">Status: </span><?php echo $rt['status']; ?></small>
<p class="mt-1 app-font-family"
style="font-size:9px; font-weight:400; margin:4px;">
<?= $rt['subject'] ? $rt['subject'] : "&nbsp;"; ?>
</p>
<small class="app-font-family" style="font-size:7px;"><span style="color: green !important; font-weight: 500;">Status: </span><?php echo $rt['status']; ?></small>
</div>
</div>
<?php endforeach; ?>
<?php endforeach;
else: ?>
<div class="d-flex justify-content-center align-items-center"
style="height: 50vh; width:100%;">
<p class="text-center"><i>No Data Found</i></p>
</div>
<?php endif; ?>
</div>
</div>
@ -375,7 +425,7 @@ hr{
<div class="modal-content" style="border-radius:15px;">
<div class="modal-header" style="border-bottom-width:0;">
<h4 class="modal-title">Policy Terms</h4>
<h4 class="modal-title title-text app-font-family">Policy Terms</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
@ -383,8 +433,9 @@ hr{
<?php if(!empty($policy_terms)):
echo $policy_terms;
else: ?>
<div class="d-flex justify-content-center align-items-center" style="height: 100%;">
<p class="text-center"><i>No Data Found</i></p>
<div class="d-flex justify-content-center align-items-center"
style="height: 50vh; width:100%;">
<p class="text-center"><i>No Data Found</i></p>
</div>
<?php endif; ?>
</div>

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB