FIX_CLIENT_LOGO_PREVIEW_AND_CLIENT_DEPOSIT_VIEW_ALIGNMENT : RV

This commit is contained in:
VENKATESHWARAN 2024-03-29 10:18:24 +05:30
parent 91975c9be0
commit 58aec88033
5 changed files with 306 additions and 317 deletions

View File

@ -172,7 +172,7 @@ input:checked + .slider:before {
<i class="text">( Image dimensions 100 x 100 pixels and size of 200KB. )</i> <i class="text">( Image dimensions 100 x 100 pixels and size of 200KB. )</i>
</div> </div>
<div class="form-group col-md-6 float-right" style="position: relative;top: 20px;"> <div class="form-group col-md-6 float-right" style="position: relative;top: 20px;">
<img src="<?= isset($client['client_logo']) && !empty($client['client_logo']) ? base_url() . "public/uploads/logo/" . $client['client_logo'] : 'http://ssl.gstatic.com/accounts/ui/avatar_2x.png' ?>" width="100" height="100" id="uploadPreview" class="avatar img-circle img-thumbnail" alt="avatar"/> <img src="<?= isset($client['client_logo']) && !empty($client['client_logo']) ? base_url() . "public/uploads/logo/" . $client['client_logo'] : base_url()."public/assets/images/avatar_2x.png" ?>" width="100" height="100" id="uploadPreview" class="avatar img-circle img-thumbnail" alt="avatar"/>
</div> </div>
</div> </div>
@ -364,37 +364,33 @@ input:checked + .slider:before {
return false; return false;
} }
function PreviewImage() { function PreviewImage() {
var file = document.getElementById("client_logo").files[0]; console.log('function called');
var fileInput = document.getElementById("client_logo");
var file = fileInput.files[0];
if (file) { if (file) {
if (file.size <= 200 * 1024) { // 200kb in bytes var allowedExtensions = ["jpg", "jpeg", "png"];
var oFReader = new FileReader(); var fileExtension = file.name.split('.').pop().toLowerCase();
oFReader.readAsDataURL(file);
oFReader.onload = function (oFREvent) { if (!allowedExtensions.includes(fileExtension) || file.size > 200 * 1024) {
document.getElementById("uploadPreview").src = oFREvent.target.result; fileInput.value = ""; // Clear the file input
document.getElementById("uploadPreview").src = "http://ssl.gstatic.com/accounts/ui/avatar_2x.png"; // Remove the preview image
} else {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (event) {
document.getElementById("uploadPreview").src = event.target.result;
}; };
} }
} }
}; }
// function validateFile(input) {
// const file = input.files[0];
// const allowedExtensions = ["jpg", "jpeg", "png"];
// const fileExtension = file.name.split(".").pop().toLowerCase();
// if (!allowedExtensions.includes(fileExtension)) {
// toastr.warning('Only JPG, JPEG, PNG files are allowed.', 'Invalid file type.');
// document.getElementById("uploadPreview").src = "http://ssl.gstatic.com/accounts/ui/avatar_2x.png";
// input.value = "";
// return;
// }
// }
function validateFile(input) { function validateFile(input) {
const file = input.files[0]; const file = input.files[0];
const allowedExtensions = ["jpg", "jpeg", "png"]; const allowedExtensions = ["jpg", "jpeg", "png"];
const fileExtension = file.name.split(".").pop().toLowerCase(); const fileExtension = file.name.split(".").pop().toLowerCase();
@ -402,19 +398,16 @@ input:checked + .slider:before {
// Check if the file extension is allowed // Check if the file extension is allowed
if (!allowedExtensions.includes(fileExtension)) { if (!allowedExtensions.includes(fileExtension)) {
toastr.warning('Only JPG, JPEG, PNG files are allowed.', 'Invalid file type.'); toastr.warning('Only JPG, JPEG, PNG files are allowed.', 'Invalid file type.');
document.getElementById("uploadPreview").src = "";
$("#uploadPreview").attr("src", "http://ssl.gstatic.com/accounts/ui/avatar_2x.png"); $("#uploadPreview").attr("src", "http://ssl.gstatic.com/accounts/ui/avatar_2x.png");
// input.value = ""; input.value = "";
// return;
} }
// Check file size // Check file size
const fileSize = file.size / 1024; // in KB const fileSize = file.size / 1024; // in KB
if (fileSize > 200) { if (fileSize > 200) {
toastr.warning('Maximum file size allowed is 200KB.', 'File size exceeds limit.'); toastr.warning('Maximum file size allowed is 200KB.', 'File size exceeds limit.');
$("#uploadPreview").attr("src", "http://ssl.gstatic.com/accounts/ui/avatar_2x.png"); $("#uploadPreview").attr("src", "http://ssl.gstatic.com/accounts/ui/avatar_2x.png");
// input.value = "";
// return;
} }
// Check image dimensions // Check image dimensions
@ -423,8 +416,6 @@ input:checked + .slider:before {
if (this.width !== 100 || this.height !== 100) { if (this.width !== 100 || this.height !== 100) {
toastr.warning('Image dimensions should be 100x100 pixels.', 'Invalid image dimensions.'); toastr.warning('Image dimensions should be 100x100 pixels.', 'Invalid image dimensions.');
$("#uploadPreview").attr("src", "http://ssl.gstatic.com/accounts/ui/avatar_2x.png"); $("#uploadPreview").attr("src", "http://ssl.gstatic.com/accounts/ui/avatar_2x.png");
// input.value = "";
// return;
} }
// If both size and dimensions are valid, you can proceed with your logic here // If both size and dimensions are valid, you can proceed with your logic here
// For example, you can display the image // For example, you can display the image

View File

@ -5,7 +5,8 @@
<div class="row" style="margin-bottom:1rem;"> <div class="row" style="margin-bottom:1rem;">
<div class="col-6" style="align-self: center;"> <div class="col-6" style="align-self: center;">
<h4 class="header-title" style="position: relative;">Client Deposit - <?php echo $clientName[0]['client_name'];?></h4> <h4 class="header-title" style="position: relative;">Client Deposit -
<?php echo $clientName[0]['client_name'];?></h4>
</div> </div>
<!-- <div class="col-6" style="text-align: right; position: relative;top: 53px;"> <!-- <div class="col-6" style="text-align: right; position: relative;top: 53px;">
@ -27,16 +28,12 @@
<tr> <tr>
<?php foreach ($clientData as $value): ?> <?php foreach ($clientData as $value): ?>
<td> <td>
<?php echo $value->insurer_name;?> <?php echo $value->insurer_name;?>
</td> </td>
<td> <td>
<?php <?php
$insurerId = $value->insurer_id; $insurerId = $value->insurer_id;
// Check if the balance information exists for the insurer // Check if the balance information exists for the insurer
if (isset($balances[$insurerId])) { if (isset($balances[$insurerId])) {
$balance = $balances[$insurerId]->balance; $balance = $balances[$insurerId]->balance;
@ -48,10 +45,11 @@
</td> </td>
<td> <td>
<a class="dropdown-item" href="<?= base_url("client/view_deposit/{$value->insurer_id}?client_id={$value->client_id}"); ?>"> <a class="dropdown-item"
href="<?= base_url("client/view_deposit/{$value->insurer_id}?client_id={$value->client_id}"); ?>">
<i class="mdi mdi-eye mr-2 text-muted font-18 vertical-middle"></i>View Deposit <i class="mdi mdi-eye mr-2 text-muted font-18 vertical-middle"></i>View Deposit
</a> </a>
</td> </td>
</tr> </tr>
@ -67,13 +65,11 @@
<!-- end row --> <!-- end row -->
<script> <script>
$(document).ready(function() {
$(document).ready(function(){
$('#tickets-table').DataTable({ $('#tickets-table').DataTable({
dom: "<'row'<'col-sm-0'f><'col-sm-9 text-right'B>>" , dom: "<'row'<'col-sm-0'f><'col-sm-9 text-right'B>>",
buttons: [ buttons: [{
{
extend: 'csv', extend: 'csv',
text: 'CSV', text: 'CSV',
title: 'Client_Deposit', title: 'Client_Deposit',
@ -81,8 +77,7 @@
exportOptions: { exportOptions: {
columns: ':not(:last-child)' columns: ':not(:last-child)'
}, },
} }],
],
language: { language: {
@ -92,6 +87,5 @@
}); });
}) })
</script> </script>

View File

@ -206,12 +206,12 @@
/* color: #02a8b5 !important; */ /* color: #02a8b5 !important; */
font-size: 12px; font-size: 12px;
} }
.form-group { /* .form-group {
/* margin-bottom: -0.2rem !important; */ margin-bottom: -0.2rem !important;
} }
.form-row{ .form-row{
/* width: 84%; */ width: 84%;
} } */
</style> </style>

View File

@ -1,55 +1,63 @@
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<div class="text-center"> <div class="text-center">
<div class="row"> <div class="row">
<div class="col-md-6 col-xl-5"> <div class="col-md-6 col-xl-5">
<div class="py-1"> <div class="py-1">
<i class="font-24"></i> <i class="font-24"></i>
<h4 >Deposit Summary Of <?php echo $clientData->short_name?></h4> <h4>Deposit Summary Of <?php echo $clientData->short_name?></h4>
</div> </div>
</div> </div>
<div class="col-md-8 col-xl-7"> <div class="col-md-6 col-xl-5">
<div class="py-1"> <div class="py-1">
<i class=" font-24"></i> <i class=" font-24"></i>
<h4><?php echo $insurerName->name; ?></h4> <h4><?php echo $insurerName->name; ?></h4>
</div> </div>
</div> </div>
</div> </div>
<div class="row mt-3 text-center"> <div class="row mt-3 text-center">
<div class="col-3"> <div class="col-3">
<p class="text-muted font-15 mb-1 text-truncate">Deposits</p> <p class="text-muted font-15 mb-1 text-truncate">Deposits</p>
<h4 style="font-size: 26px;"><i class="fe-arrow-up text-success mr-1"></i><?php echo $deposiamount->total_credit?></h4> <h4 style="font-size: 26px;"><i
class="fe-arrow-up text-success mr-1"></i><?php echo $deposiamount->total_credit?>
</h4>
</div> </div>
<div class="col-3"> <div class="col-3">
<p class="text-muted font-15 mb-1 text-truncate">Consumed</p> <p class="text-muted font-15 mb-1 text-truncate">Consumed</p>
<h4 style="font-size: 26px;"><i class="fe-arrow-down text-danger mr-1"></i><?php echo $deposiamount->total_withdraw?></h4> <h4 style="font-size: 26px;"><i
class="fe-arrow-down text-danger mr-1"></i><?php echo $deposiamount->total_withdraw?>
</h4>
</div> </div>
<div class="col-3"> <div class="col-3">
<p class="text-muted font-15 mb-1 text-truncate">Refund</p> <p class="text-muted font-15 mb-1 text-truncate">Refund</p>
<h4 style="font-size: 26px;"><i class="fe-arrow-up text-success mr-1"></i><?php echo $deposiamount->total_refund?></h4> <h4 style="font-size: 26px;"><i
class="fe-arrow-up text-success mr-1"></i><?php echo $deposiamount->total_refund?>
</h4>
</div> </div>
<div class="col-3"> <div class="col-3">
<p class="text-muted font-15 mb-1 text-truncate">Current Balance</p> <p class="text-muted font-15 mb-1 text-truncate">Current Balance</p>
<h4 style="font-size: 26px;"><i class="fe-credit-card text-sucess mr-1"></i><?php echo $deposiamount->balance?></h4> <h4 style="font-size: 26px;"><i
</div> class="fe-credit-card text-sucess mr-1"></i><?php echo $deposiamount->balance?>
</div> </h4>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- start page title --> <!-- start page title -->
<div class="row"> <!-- <div class="row">
<div class="col-12"> <div class="col-12">
<div class="page-title-box page-title-box-alt"> <div class="page-title-box page-title-box-alt">
<h4 class="page-title"></h4> <h4 class="page-title"></h4>
@ -57,25 +65,25 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div> -->
<!-- end page title --> <!-- end page title -->
<div class="row" id="List-page"> <div class="row" id="List-page">
<div class="col-12"> <div class="col-12">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<div class="row" style="margin-bottom:1rem;"> <div class="row" style="margin-bottom:1rem;">
<div class="col-6" style="align-self: center;"> <div class="col-6" style="align-self: center;">
<h4 class="header-title" style="position: relative;">Transaction Details</h4> <h4 class="header-title" style="position: relative;">Transaction Details</h4>
</div> </div>
<div class="col-6" style="text-align: right; position: relative;top: 51px; <div class="col-6" style="text-align: right; position: relative;top: 53px;">
right: 31px;"> <button type="button" id="btnAdd" class="btn btn-primary waves-effect waves-light"
<button type="button" id="btnAdd" class="btn btn-primary waves-effect waves-light" data-toggle="modal" data-target="#addTransactionModal">New</button> data-toggle="modal" data-target="#addTransactionModal">New</button>
</div>
</div> </div>
</div> <table class="table table-sm table-hover m-0 table-centered dt-responsive nowrap w-100" cellspacing="0"
<table class="table table-sm table-hover m-0 table-centered dt-responsive nowrap w-100" cellspacing="0" id="tickets-table"> id="tickets-table">
<thead class="bg-light"> <thead class="bg-light">
<tr> <tr>
@ -94,17 +102,13 @@
<?php foreach($depositdata as $row) { ?> <?php foreach($depositdata as $row) { ?>
<tr id="<?php echo $row->id;?>"> <tr id="<?php echo $row->id;?>">
<td class=""><?php echo date('d-m-y h:i A', strtotime($row->created_at)); ?></td> <td class=""><?php echo date('d-m-y h:i A', strtotime($row->created_at)); ?></td>
<td><?php echo $row->username; ?></td> <td><?php echo $row->username; ?></td>
<td><?php echo $row->description; ?></td> <td><?php echo $row->description; ?></td>
<td><?php echo isset($subTypeOptions[$row->sub_type]) ? $subTypeOptions[$row->sub_type] : ''; ?></td> <td><?php echo isset($subTypeOptions[$row->sub_type]) ? $subTypeOptions[$row->sub_type] : ''; ?>
</td>
<td><?php echo ($row->transaction_type == 'Credit') ? $row->amount : ''; ?></td> <td><?php echo ($row->transaction_type == 'Credit') ? $row->amount : ''; ?></td>
<td><?php echo ($row->transaction_type == 'Debit') ? $row->amount : ''; ?></td> <td><?php echo ($row->transaction_type == 'Debit') ? $row->amount : ''; ?></td>
<td><?php echo $row->balance; ?></td> <td><?php echo $row->balance; ?></td>
</tr> </tr>
<?php } ?> <?php } ?>
</tbody> </tbody>
@ -114,13 +118,14 @@
</div> </div>
</div> </div>
<!-- end col --> <!-- end col -->
</div> </div>
</div> </div>
<!-- Add this modal markup at the end of your HTML body --> <!-- Add this modal markup at the end of your HTML body -->
<!-- Button to trigger modal --> <!-- Button to trigger modal -->
<!-- Add this modal markup at the end of your HTML body --> <!-- Add this modal markup at the end of your HTML body -->
<div class="modal fade" id="addTransactionModal" tabindex="-1" role="dialog" aria-labelledby="addTransactionModalLabel" aria-hidden="true"> <div class="modal fade" id="addTransactionModal" tabindex="-1" role="dialog" aria-labelledby="addTransactionModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
@ -135,11 +140,13 @@
<div class="form-group"> <div class="form-group">
<label for="transactionMode" class="control-label">Transaction Mode</label> <label for="transactionMode" class="control-label">Transaction Mode</label>
<div class="form-check"> <div class="form-check">
<input class="form-check-input" type="radio" name="transactionMode" id="addMode" value="add" checked> <input class="form-check-input" type="radio" name="transactionMode" id="addMode"
value="add" checked>
<label class="form-check-label" for="addMode">Deposit</label> <label class="form-check-label" for="addMode">Deposit</label>
</div> </div>
<div class="form-check"> <div class="form-check">
<input class="form-check-input" type="radio" name="transactionMode" id="adjustmentMode" value="adjustment"> <input class="form-check-input" type="radio" name="transactionMode" id="adjustmentMode"
value="adjustment">
<label class="form-check-label" for="adjustmentMode">Adjustment</label> <label class="form-check-label" for="adjustmentMode">Adjustment</label>
</div> </div>
</div> </div>
@ -167,15 +174,16 @@
<div class="col-md-12"> <div class="col-md-12">
<div class="form-group no-margin"> <div class="form-group no-margin">
<label for="description" class="control-label">Description</label> <label for="description" class="control-label">Description</label>
<textarea class="form-control" id="description" placeholder="Write something about the transaction"></textarea> <textarea class="form-control" id="description"
placeholder="Write something about the transaction"></textarea>
</div> </div>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="subType" class="control-label"style="display: none;">Transaction Sub Type</label> <label for="subType" class="control-label" style="display: none;">Transaction Sub Type</label>
<select class="form-control" id="subType" name="sub_type"style="display: none;"> <select class="form-control" id="subType" name="sub_type" style="display: none;">
<option value="Deposit"hidden>Deposit</option> <option value="Deposit" hidden>Deposit</option>
<option value="Adjustment"hidden>Adjustment</option> <option value="Adjustment" hidden>Adjustment</option>
<!-- Add more options as needed --> <!-- Add more options as needed -->
</select> </select>
</div> </div>
@ -189,33 +197,29 @@
</div> </div>
</div> </div>
<script> <script>
$(document).ready(function () { $(document).ready(function() {
$('input[name="transactionMode"]').change(function () { $('input[name="transactionMode"]').change(function() {
if ($(this).val() === 'adjustment') { if ($(this).val() === 'adjustment') {
$('#transactionTypeRow').show(); $('#transactionTypeRow').show();
} else { } else {
$('#transactionTypeRow').hide(); $('#transactionTypeRow').hide();
} }
}); });
}); });
</script> </script>
<script> <script>
$(document).ready(function() {
$(document).ready(function () {
$('#tickets-table').DataTable({ $('#tickets-table').DataTable({
dom: "<'row'<'col-sm-0'f><'col-sm-9 text-right'B>>" , dom: "<'row'<'col-sm-0'f><'col-sm-9 text-right'B>>",
buttons: [ buttons: [{
{
extend: 'csv', extend: 'csv',
text: 'CSV', text: 'CSV',
title: 'TransactionDetails', title: 'TransactionDetails',
exportOptions: { exportOptions: {
columns: '' columns: ''
} }
} }],
],
language: { language: {
@ -225,14 +229,14 @@ $(document).ready(function () {
}); });
}); });
</script> </script>
<!-- Include jQuery library (if not already included) --> <!-- Include jQuery library (if not already included) -->
<script> <script>
$(document).ready(function () { $(document).ready(function() {
// Event listener for radio buttons // Event listener for radio buttons
$('input[name="transactionMode"]').change(function () { $('input[name="transactionMode"]').change(function() {
if ($(this).val() === 'add') { if ($(this).val() === 'add') {
// Set the hidden input value to 'Deposit' when 'Deposit' radio button is selected // Set the hidden input value to 'Deposit' when 'Deposit' radio button is selected
$('#subType').val('Deposit'); $('#subType').val('Deposit');
@ -242,20 +246,21 @@ $(document).ready(function () {
} }
}); });
$('#saveTransactionBtn').on('click', function () { $('#saveTransactionBtn').on('click', function() {
// Collect data from modal fields // Collect data from modal fields
var amount = $('#amount').val(); var amount = $('#amount').val();
var description = $('#description').val(); var description = $('#description').val();
var clientId = '<?php echo $clientData->id; ?>'; var clientId = '<?php echo $clientData->id; ?>';
var insurerId = '<?php echo $insurerName->id; ?>'; var insurerId = '<?php echo $insurerName->id; ?>';
var transactionType; var transactionType;
if ($('#addMode').is(':checked')) { if ($('#addMode').is(':checked')) {
transactionType = 'Credit'; // Assuming 'Credit' is the default when the 'Deposit' radio button is selected transactionType =
} else if ($('#adjustmentMode').is(':checked') && $('#transactionTypeRow').is(':visible')) { 'Credit'; // Assuming 'Credit' is the default when the 'Deposit' radio button is selected
} else if ($('#adjustmentMode').is(':checked') && $('#transactionTypeRow').is(':visible')) {
transactionType = $('#transactionType').val(); transactionType = $('#transactionType').val();
} else { } else {
transactionType = ''; // You might want to handle this case based on your requirements transactionType = ''; // You might want to handle this case based on your requirements
} }
// Fetch sub_type_id based on the selected sub_type // Fetch sub_type_id based on the selected sub_type
var subTypeOptions = { var subTypeOptions = {
@ -287,18 +292,17 @@ if ($('#addMode').is(':checked')) {
client_id: clientId, client_id: clientId,
insurer_id: insurerId insurer_id: insurerId
}, },
success: function (response) { success: function(response) {
// Handle success response // Handle success response
console.log("Transaction saved successfully"); console.log("Transaction saved successfully");
// Reload the page or perform other actions as needed // Reload the page or perform other actions as needed
location.reload(); location.reload();
}, },
error: function (error) { error: function(error) {
// Handle error response // Handle error response
console.error(error); console.error(error);
} }
}); });
}); });
}); });
</script> </script>

Binary file not shown.

After

Width:  |  Height:  |  Size: 626 B