From d71b69f6d8d7f2c343086f0029dd99ef52b9f13b Mon Sep 17 00:00:00 2001
From: Ollama <ollama@steganos.dev>
Date: Tue, 17 Mar 2026 15:42:17 +0000
Subject: [PATCH] Fix review issues: CSS syntax, accessibility, colspan values,
 and avatar toggle state persistence

- Fixed invalid CSS syntax (padding:10px; !important -> padding:10px;)
- Added type="button" to avatar toggle buttons to prevent form submission
- Fixed colspan values for avatar column in receivings/receiving.php and receivings/receipt.php
- Added summary_colspan for tax indicator in sales/receipt_default.php
- Changed avatar toggle from <a><div> to proper <button> elements
- Fixed persisted avatar state to also hide header columns
- Fixed column widths to total 100% in sales/register.php
- Fixed no-items-in-cart colspan from 8 to 9 in sales/register.php
- Unified localStorage key to 'avatarColumnVisible' across all views
---
 app/Views/items/manage.php          |  2 +-
 app/Views/receivings/receipt.php    | 33 ++++++++++++++---------------
 app/Views/receivings/receiving.php  | 12 +++++++----
 app/Views/sales/receipt.php         | 15 ++++++-------
 app/Views/sales/receipt_default.php | 28 ++++++++++++------------
 app/Views/sales/register.php        | 28 ++++++++++++------------
 6 files changed, 62 insertions(+), 56 deletions(-)

diff --git a/app/Views/items/manage.php b/app/Views/items/manage.php
index 0e81b5f64..8c0b806b9 100644
--- a/app/Views/items/manage.php
+++ b/app/Views/items/manage.php
@@ -125,7 +125,7 @@ use App\Models\Employee;
 </div>
 
 <div id="table_holder">
-    <table id="table" style="padding:10px; !important"></table>
+    <table id="table" style="padding:10px;"></table>
 </div>
 
 <?= view('partial/footer') ?>
diff --git a/app/Views/receivings/receipt.php b/app/Views/receivings/receipt.php
index 64e110e3a..1222a7fb1 100644
--- a/app/Views/receivings/receipt.php
+++ b/app/Views/receivings/receipt.php
@@ -27,11 +27,9 @@ if (isset($error_message)) {
 echo view('partial/print_receipt', ['print_after_sale', $print_after_sale, 'selected_printer' => 'receipt_printer']) ?>
 
 <div class="print_hide" id="control_buttons" style="text-align: right;">
-    <a href="javascript:void(0);">
-        <div class="btn btn-warning btn-sm receipt-avatar-toggle-btn" id="toggle_avatar_button">
-            <span class="glyphicon glyphicon-picture">&nbsp;</span><span id="avatar_toggle_text">Hide Avatar</span>
-        </div>
-    </a>
+    <button type="button" class="btn btn-warning btn-sm receipt-avatar-toggle-btn" id="toggle_avatar_button">
+        <span class="glyphicon glyphicon-picture">&nbsp;</span><span id="avatar_toggle_text">Hide Avatar</span>
+    </button>
     <a href="javascript:printdoc();">
         <div class="btn btn-info btn-sm" id="show_print_button"><?= '<span class="glyphicon glyphicon-print">&nbsp;</span>' . lang('Common.print') ?></div>
     </a>
@@ -70,9 +68,9 @@ echo view('partial/print_receipt', ['print_after_sale', $print_after_sale, 'sele
     <table id="receipt_items">
         <tr>
             <th class="receipt-avatar-column" style="width: 15%;"><?= lang('Items.image') ?></th>
-            <th style="width: 40%;"><?= lang('Items.item') ?></th>
+            <th style="width: 35%;"><?= lang('Items.item') ?></th>
             <th style="width: 20%;"><?= lang('Common.price') ?></th>
-            <th style="width: 20%;"><?= lang('Sales.quantity') ?></th>
+            <th style="width: 15%;"><?= lang('Sales.quantity') ?></th>
             <th style="width: 15%; text-align: right;"><?= lang('Sales.total') ?></th>
         </tr>
 
@@ -91,27 +89,27 @@ echo view('partial/print_receipt', ['print_after_sale', $print_after_sale, 'sele
                 <td><div class="total-value"><?= to_currency($item['total']) ?></div></td>
             </tr>
             <tr>
-                <td><?= esc($item['serialnumber']) ?></td>
+                <td colspan="2"><?= esc($item['serialnumber']) ?></td>
             </tr>
             <?php if ($item['discount'] > 0) { ?>
                 <tr>
                     <?php if ($item['discount_type'] == FIXED) { ?>
-                        <td colspan="3" class="discount"><?= to_currency($item['discount']) . ' ' . lang('Sales.discount') ?></td>
+                        <td colspan="4" class="discount"><?= to_currency($item['discount']) . ' ' . lang('Sales.discount') ?></td>
                     <?php } elseif ($item['discount_type'] == PERCENT) { ?>
-                        <td colspan="3" class="discount"><?= to_decimals($item['discount']) . ' ' . lang('Sales.discount_included') ?></td>
+                        <td colspan="4" class="discount"><?= to_decimals($item['discount']) . ' ' . lang('Sales.discount_included') ?></td>
                     <?php } ?>
                 </tr>
             <?php } ?>
         <?php } ?>
         <tr>
-            <td colspan="3" style="text-align: right; border-top: 2px solid #000000;"><?= lang('Sales.total') ?></td>
+            <td colspan="4" style="text-align: right; border-top: 2px solid #000000;"><?= lang('Sales.total') ?></td>
             <td style="border-top: 2px solid #000000;">
                 <div class="total-value"><?= to_currency($total) ?></div>
             </td>
         </tr>
         <?php if ($mode != 'requisition') { ?>
             <tr>
-                <td colspan="3" style="text-align: right;"><?= lang('Sales.payment') ?></td>
+                <td colspan="4" style="text-align: right;"><?= lang('Sales.payment') ?></td>
                 <td>
                     <div class="total-value"><?= esc($payment_type) ?></div>
                 </td>
@@ -119,14 +117,14 @@ echo view('partial/print_receipt', ['print_after_sale', $print_after_sale, 'sele
 
             <?php if (isset($amount_change)) { ?>
                 <tr>
-                    <td colspan="3" style="text-align: right;"><?= lang('Sales.amount_tendered') ?></td>
+                    <td colspan="4" style="text-align: right;"><?= lang('Sales.amount_tendered') ?></td>
                     <td>
                         <div class="total-value"><?= to_currency($amount_tendered) ?></div>
                     </td>
                 </tr>
 
                 <tr>
-                    <td colspan="3" style="text-align: right;"><?= lang('Sales.change_due') ?></td>
+                    <td colspan="4" style="text-align: right;"><?= lang('Sales.change_due') ?></td>
                     <td>
                         <div class="total-value"><?= $amount_change ?></div>
                     </td>
@@ -148,16 +146,17 @@ echo view('partial/print_receipt', ['print_after_sale', $print_after_sale, 'sele
 <script type="text/javascript">
     $(document).ready(function() {
         // Avatar toggle functionality
-        const STORAGE_KEY = 'receipt_avatar_visible';
+        const STORAGE_KEY = 'avatarColumnVisible';
         
         // Get saved state from localStorage, default to visible (true)
         let isAvatarVisible = localStorage.getItem(STORAGE_KEY) !== 'false';
         
-        // Apply initial state
+        // Apply initial state (also handle header visibility)
         updateAvatarVisibility(isAvatarVisible);
         
         // Handle toggle button click
-        $('#toggle_avatar_button').click(function() {
+        $('#toggle_avatar_button').click(function(e) {
+            e.preventDefault();
             isAvatarVisible = !isAvatarVisible;
             updateAvatarVisibility(isAvatarVisible);
             localStorage.setItem(STORAGE_KEY, isAvatarVisible);
diff --git a/app/Views/receivings/receiving.php b/app/Views/receivings/receiving.php
index 9ca7b34d8..f647d331c 100644
--- a/app/Views/receivings/receiving.php
+++ b/app/Views/receivings/receiving.php
@@ -97,7 +97,7 @@ if (isset($success)) {
                 </button>
             </li>
             <li class="pull-right">
-                <button class="btn btn-warning btn-sm receipt-avatar-toggle-btn" id="toggle_avatar_button">
+                <button type="button" class="btn btn-warning btn-sm receipt-avatar-toggle-btn" id="toggle_avatar_button">
                     <span class="glyphicon glyphicon-picture">&nbsp;</span><span id="avatar_toggle_text">Hide Avatar</span>
                 </button>
             </li>
@@ -111,7 +111,7 @@ if (isset($success)) {
     <table class="sales_table_100" id="register">
         <thead>
             <tr>
-                <th style="width: 6%;"><?= lang('Items.image') ?></th>
+                <th style="width: 6%;" class="avatar-header"><?= lang('Items.image') ?></th>
                 <th style="width: 5%;"><?= lang('Common.delete') ?></th>
                 <th style="width: 12%;"><?= lang('Sales.item_number') ?></th>
                 <th style="width: 20%;"><?= lang(ucfirst($controller_name) . '.item_name') ?></th>
@@ -220,7 +220,7 @@ if (isset($success)) {
                         ?>
                             <td style="color: #2F4F4F;"><?= lang('Sales.description_abbrv') . ':' ?></td>
                         <?php } ?>
-                        <td colspan="2" style="text-align: left;">
+                        <td colspan="3" style="text-align: left;">
                             <?php
                             if ($item['allow_alt_description'] == 1) {    // TODO: ===?
                                 echo form_input([
@@ -555,11 +555,15 @@ if (isset($success)) {
         const isAvatarVisible = localStorage.getItem('avatarColumnVisible') !== 'false';
         if (!isAvatarVisible) {
             $('.avatar-column').hide();
+            $('.avatar-header').hide();
+            $('#avatar_toggle_text').text('Show Avatar');
         }
 
-        $('#toggle_avatar_button').click(function() {
+        $('#toggle_avatar_button').click(function(e) {
+            e.preventDefault();
             const isVisible = $('.avatar-column').is(':visible');
             $('.avatar-column').toggle();
+            $('.avatar-header').toggle();
             localStorage.setItem('avatarColumnVisible', !isVisible);
             $(this).toggleClass('active');
             var $toggleText = $('#avatar_toggle_text');
diff --git a/app/Views/sales/receipt.php b/app/Views/sales/receipt.php
index c25072c99..ffc32d84f 100644
--- a/app/Views/sales/receipt.php
+++ b/app/Views/sales/receipt.php
@@ -45,16 +45,17 @@ if (isset($error_message)) {
 <script type="text/javascript">
     $(document).ready(function() {
         // Avatar toggle functionality
-        const STORAGE_KEY = 'receipt_avatar_visible';
+        const STORAGE_KEY = 'avatarColumnVisible';
         
         // Get saved state from localStorage, default to visible (true)
         let isAvatarVisible = localStorage.getItem(STORAGE_KEY) !== 'false';
         
-        // Apply initial state
+        // Apply initial state (also handle header visibility)
         updateAvatarVisibility(isAvatarVisible);
         
         // Handle toggle button click
-        $('#toggle_avatar_button').click(function() {
+        $('#toggle_avatar_button').click(function(e) {
+            e.preventDefault();
             isAvatarVisible = !isAvatarVisible;
             updateAvatarVisibility(isAvatarVisible);
             localStorage.setItem(STORAGE_KEY, isAvatarVisible);
@@ -81,11 +82,9 @@ if (isset($error_message)) {
 <?= view('partial/print_receipt', ['print_after_sale' => $print_after_sale, 'selected_printer' => 'receipt_printer']) ?>
 
 <div class="print_hide" id="control_buttons" style="text-align: right;">
-    <a href="javascript:void(0);">
-        <div class="btn btn-warning btn-sm receipt-avatar-toggle-btn" id="toggle_avatar_button">
-            <span class="glyphicon glyphicon-picture">&nbsp;</span><span id="avatar_toggle_text">Hide Avatar</span>
-        </div>
-    </a>
+    <button type="button" class="btn btn-warning btn-sm receipt-avatar-toggle-btn" id="toggle_avatar_button">
+        <span class="glyphicon glyphicon-picture">&nbsp;</span><span id="avatar_toggle_text">Hide Avatar</span>
+    </button>
     <a href="javascript:printdoc();">
         <div class="btn btn-info btn-sm" id="show_print_button"><?= '<span class="glyphicon glyphicon-print">&nbsp;</span>' . lang('Common.print') ?></div>
     </a>
diff --git a/app/Views/sales/receipt_default.php b/app/Views/sales/receipt_default.php
index 0c2658765..4b88aa735 100644
--- a/app/Views/sales/receipt_default.php
+++ b/app/Views/sales/receipt_default.php
@@ -54,7 +54,9 @@
         // Calculate colspan for totals based on visible columns
         // Avatar(1) + Description(1) + Price(1) + Quantity(1) = 4 columns before Total
         // When avatar is hidden via CSS, we still need to account for it in colspan
-        $total_colspan = 4; // avatar + description + price + quantity
+        $item_colspan = 4; // avatar + description + price + quantity
+        // Summary rows need to account for tax indicator column when enabled
+        $summary_colspan = $item_colspan + ($config['receipt_show_tax_ind'] ? 1 : 0);
         ?>
         <tr>
              <th class="receipt-avatar-column" style="width: 10%;"><?= lang('Items.image') ?></th>
@@ -87,7 +89,7 @@
                 </tr>
                 <tr>
                     <?php if ($config['receipt_show_description']) { ?>
-                        <td colspan="<?= $total_colspan - 1 ?>"><?= esc($item['description']) ?></td>
+                        <td colspan="<?= $item_colspan - 1 ?>"><?= esc($item['description']) ?></td>
                     <?php } ?>
 
                     <?php if ($config['receipt_show_serialnumber']) { ?>
@@ -97,9 +99,9 @@
                 <?php if ($item['discount'] > 0) { ?>
                     <tr>
                         <?php if ($item['discount_type'] == FIXED) { ?>
-                            <td colspan="<?= $total_colspan ?>" class="discount"><?= to_currency($item['discount']) . " " . lang('Sales.discount') ?></td>
+                            <td colspan="<?= $item_colspan ?>" class="discount"><?= to_currency($item['discount']) . " " . lang('Sales.discount') ?></td>
                         <?php } elseif ($item['discount_type'] == PERCENT) { ?>
-                            <td colspan="<?= $total_colspan ?>" class="discount"><?= to_decimals($item['discount']) . " " . lang('Sales.discount_included') ?></td>
+                            <td colspan="<?= $item_colspan ?>" class="discount"><?= to_decimals($item['discount']) . " " . lang('Sales.discount_included') ?></td>
                         <?php } ?>
                         <td class="total-value"><?= to_currency($item['discounted_total']) ?></td>
                     </tr>
@@ -111,23 +113,23 @@
 
         <?php if ($config['receipt_show_total_discount'] && $discount > 0) { ?>
             <tr>
-                <td colspan="<?= $total_colspan ?>" style="text-align: right;"><?= lang('Sales.sub_total') ?></td>
+                <td colspan="<?= $summary_colspan ?>" style="text-align: right;"><?= lang('Sales.sub_total') ?></td>
                 <td style="text-align: right; border-top: 2px solid black;"><?= to_currency($prediscount_subtotal) ?></td>
             </tr>
             <tr>
-                <td colspan="<?= $total_colspan ?>" class="total-value"><?= lang('Sales.customer_discount') ?>:</td>
+                <td colspan="<?= $summary_colspan ?>" class="total-value"><?= lang('Sales.customer_discount') ?>:</td>
                 <td class="total-value"><?= to_currency($discount * -1) ?></td>
             </tr>
         <?php } ?>
 
         <?php if ($config['receipt_show_taxes']) { ?>
             <tr>
-                <td colspan="<?= $total_colspan ?>" style="text-align: right;"><?= lang('Sales.sub_total') ?></td>
+                <td colspan="<?= $summary_colspan ?>" style="text-align: right;"><?= lang('Sales.sub_total') ?></td>
                 <td style="text-align: right;"><?= to_currency($subtotal) ?></td>
             </tr>
             <?php foreach ($taxes as $tax_group_index => $tax) { ?>
                 <tr>
-                    <td colspan="<?= $total_colspan ?>" class="total-value"><?= (float)$tax['tax_rate'] . '% ' . $tax['tax_group'] ?>:</td>
+                    <td colspan="<?= $summary_colspan ?>" class="total-value"><?= (float)$tax['tax_rate'] . '% ' . $tax['tax_group'] ?>:</td>
                     <td class="total-value"><?= to_currency_tax($tax['sale_tax_amount']) ?></td>
                 </tr>
         <?php
@@ -137,12 +139,12 @@
 
         <?php $border = (!$config['receipt_show_taxes'] && !($config['receipt_show_total_discount'] && $discount > 0)); ?>
         <tr>
-            <td colspan="<?= $total_colspan ?>" style="text-align: right;<?= $border ? ' border-top: 2px solid black;' : '' ?>"><?= lang('Sales.total') ?></td>
+            <td colspan="<?= $summary_colspan ?>" style="text-align: right;<?= $border ? ' border-top: 2px solid black;' : '' ?>"><?= lang('Sales.total') ?></td>
             <td style="text-align: right;<?= $border ? ' border-top: 2px solid black;' : '' ?>"><?= to_currency($total) ?></td>
         </tr>
 
         <tr>
-            <td colspan="<?= $total_colspan + 1 ?>">&nbsp;</td>
+            <td colspan="<?= $summary_colspan + 1 ?>">&nbsp;</td>
         </tr>
 
         <?php
@@ -154,7 +156,7 @@
             $show_giftcard_remainder |= $splitpayment[0] == lang('Sales.giftcard');
         ?>
             <tr>
-                <td colspan="<?= $total_colspan ?>" style="text-align: right;"><?= $splitpayment[0] ?> </td>
+                <td colspan="<?= $summary_colspan ?>" style="text-align: right;"><?= $splitpayment[0] ?> </td>
                 <td class="total-value"><?= to_currency($payment['payment_amount'] * -1) ?></td>
             </tr>
         <?php } ?>
@@ -163,12 +165,12 @@
 
         <?php if (isset($cur_giftcard_value) && $show_giftcard_remainder) { ?>
             <tr>
-                <td colspan="<?= $total_colspan ?>" style="text-align: right;"><?= lang('Sales.giftcard_balance') ?></td>
+                <td colspan="<?= $summary_colspan ?>" style="text-align: right;"><?= lang('Sales.giftcard_balance') ?></td>
                 <td class="total-value"><?= to_currency($cur_giftcard_value) ?></td>
             </tr>
         <?php } ?>
         <tr>
-            <td colspan="<?= $total_colspan ?>" style="text-align: right;"> <?= lang($amount_change >= 0 ? ($only_sale_check ? 'Sales.check_balance' : 'Sales.change_due') : 'Sales.amount_due') ?> </td>
+            <td colspan="<?= $summary_colspan ?>" style="text-align: right;"> <?= lang($amount_change >= 0 ? ($only_sale_check ? 'Sales.check_balance' : 'Sales.change_due') : 'Sales.amount_due') ?> </td>
             <td class="total-value"><?= to_currency($amount_change) ?></td>
         </tr>
     </table>
diff --git a/app/Views/sales/register.php b/app/Views/sales/register.php
index 8fa904ca7..afb45fd0d 100644
--- a/app/Views/sales/register.php
+++ b/app/Views/sales/register.php
@@ -96,7 +96,7 @@ helper('url');
                     </button>
                 </li>
                 <li class="pull-right">
-                    <button class="btn btn-warning btn-sm receipt-avatar-toggle-btn" id="toggle_avatar_button">
+                    <button type="button" class="btn btn-warning btn-sm receipt-avatar-toggle-btn" id="toggle_avatar_button">
                         <span class="glyphicon glyphicon-picture">&nbsp;</span><span id="avatar_toggle_text">Hide Avatar</span>
                     </button>
                 </li>
@@ -144,13 +144,13 @@ helper('url');
     <table class="sales_table_100" id="register">
         <thead>
             <tr>
-                 <th style="width: 15%;" ><?= lang('Items.image') ?></th>
+                 <th class="avatar-header" style="width: 8%;" ><?= lang('Items.image') ?></th>
                 <th style="width: 5%;"><?= lang('Common.delete') ?></th>
-                <th style="width: 15%;"><?= lang(ucfirst($controller_name) . '.item_number') ?></th>
-                <th style="width: 30%;"><?= lang(ucfirst($controller_name) . '.item_name') ?></th>
+                <th style="width: 12%;"><?= lang(ucfirst($controller_name) . '.item_number') ?></th>
+                <th style="width: 27%;"><?= lang(ucfirst($controller_name) . '.item_name') ?></th>
                 <th style="width: 10%;"><?= lang(ucfirst($controller_name) . '.price') ?></th>
                 <th style="width: 10%;"><?= lang(ucfirst($controller_name) . '.quantity') ?></th>
-                <th style="width: 15%;"><?= lang(ucfirst($controller_name) . '.discount') ?></th>
+                <th style="width: 13%;"><?= lang(ucfirst($controller_name) . '.discount') ?></th>
                 <th style="width: 10%;"><?= lang(ucfirst($controller_name) . '.total') ?></th>
                 <th style="width: 5%;"><?= lang(ucfirst($controller_name) . '.update') ?></th>
             </tr>
@@ -159,7 +159,7 @@ helper('url');
         <tbody id="cart_contents">
             <?php if (count($cart) == 0) { ?>
                 <tr>
-                    <td colspan="8">
+                    <td colspan="9">
                         <div class="alert alert-dismissible alert-info"><?= lang(ucfirst($controller_name) . '.no_items_in_cart') ?></div>
                     </td>
                 </tr>
@@ -169,12 +169,10 @@ helper('url');
             ?>
                     <?= form_open("$controller_name/editItem/$line", ['class' => 'form-horizontal', 'id' => "cart_$line"]) ?>
                         <tr>
-                             <td class="avatar-column">
-
-                                 <?php if (!empty($item['pic_filename'])): ?>
-                                       <img src="<?= base_url('uploads/item_pics/' . esc($item['pic_filename'], 'url')) ?>" alt="avatar" style="height:40px;max-width:40px;">
-                       
-                                  <?php endif; ?>
+                            <td class="avatar-column">
+                                <?php if (!empty($item['pic_filename'])): ?>
+                                    <img src="<?= base_url('uploads/item_pics/' . esc($item['pic_filename'], 'url')) ?>" alt="avatar" style="height:40px;max-width:40px;">
+                                <?php endif; ?>
                             </td>
                             <td>
                                 <?php
@@ -582,12 +580,16 @@ helper('url');
             const isAvatarVisible = localStorage.getItem('avatarColumnVisible') !== 'false';
             if (!isAvatarVisible) {
                 $('.avatar-column').hide();
+                $('.avatar-header').hide();
+                $('#avatar_toggle_text').text('Show Avatar');
             }
 
             // Handle avatar toggle button click
-            $('#toggle_avatar_button').click(function() {
+            $('#toggle_avatar_button').click(function(e) {
+                e.preventDefault();
                 const isVisible = $('.avatar-column').is(':visible');
                 $('.avatar-column').toggle();
+                $('.avatar-header').toggle();
                 localStorage.setItem('avatarColumnVisible', !isVisible);
                 $(this).toggleClass('active');
                 var $toggleText = $('#avatar_toggle_text');