Bootstrap 5 WIP

- work in progress build of conversion from bootstrap 3 to 5

.env.example

@@ -16,6 +16,9 @@ CI_ENVIRONMENT = production
 # Configure with comma-separated list of domains/subdomains:
 #   app.allowedHostnames = 'yourdomain.com,www.yourdomain.com'
 #
+# Or via environment variable (useful for Docker/Compose):
+#   ALLOWED_HOSTNAMES=yourdomain.com,www.yourdomain.com
+#
 # For local development:
 #   app.allowedHostnames = 'localhost'
 #

.github/workflows/build-release.yml

@@ -123,6 +123,7 @@ jobs:
             .
             !.git
             !node_modules
+          include-hidden-files: true
           retention-days: 1
 
   docker:

CHANGELOG.md

@@ -1,5 +1,4 @@
-[unreleased]: https://github.com/opensourcepos/opensourcepos/compare/3.4.0...HEAD
-[3.4.2]: https://github.com/opensourcepos/opensourcepos/compare/3.4.1...3.4.2
+[unreleased]: https://github.com/opensourcepos/opensourcepos/compare/3.4.1...HEAD
 [3.4.1]: https://github.com/opensourcepos/opensourcepos/compare/3.4.0...3.4.1
 [3.4.0]: https://github.com/opensourcepos/opensourcepos/compare/3.3.9...3.4.0
 [3.3.9]: https://github.com/opensourcepos/opensourcepos/compare/3.3.8...3.3.9
@@ -34,10 +33,36 @@ All notable changes to this project will be documented in this file.
 
 ## [Unreleased]
 
-## [3.4.0] - 2025-02-06
+## [3.4.1] - 2025-06-05
+- Feature: PSR-12 Compliant Indentation by @objecttothis in ([#4196](https://github.com/opensourcepos/opensourcepos/pull/4196))
+- Add .env to dist zip by @jekkos in ([#4199](https://github.com/opensourcepos/opensourcepos/pull/4199))
+- Add CI4 coding standards linter ([#3708](https://github.com/opensourcepos/opensourcepos/issues/3708)) by @jekkos in ([#4198](https://github.com/opensourcepos/opensourcepos/pull/4198))
+- Bump canvg from 3.0.10 to 3.0.11 by @dependabot in ([#4189](https://github.com/opensourcepos/opensourcepos/pull/4189))
+- Bump jspdf and jspdf-autotable by @dependabot in ([#4190](https://github.com/opensourcepos/opensourcepos/pull/4190))
+- Feature bump ci to 4.6.0 by @objecttothis in ([#4197](https://github.com/opensourcepos/opensourcepos/pull/4197))
+- Add Kurdish language option to UI by @BudsieBuds in ([#4210](https://github.com/opensourcepos/opensourcepos/pull/4210))
+- Convert language ku to ckb by @BudsieBuds in ([#4211](https://github.com/opensourcepos/opensourcepos/pull/4211))
+- Fix PHP 8.4 errors by @BudsieBuds in ([#4215](https://github.com/opensourcepos/opensourcepos/pull/4215))
+- Add default bootstrap to themes by @BudsieBuds in ([#4219](https://github.com/opensourcepos/opensourcepos/pull/4219))
+- Update language names by @BudsieBuds in ([#4218](https://github.com/opensourcepos/opensourcepos/pull/4218))
+- Update install docs by @BudsieBuds in ([#4217](https://github.com/opensourcepos/opensourcepos/pull/4217))
+- Convert menu icons to SVG by @BudsieBuds in ([#4220](https://github.com/opensourcepos/opensourcepos/pull/4220))
+- Enhance license handling by @BudsieBuds in ([#4223](https://github.com/opensourcepos/opensourcepos/pull/4223))
+- Fix datetime rendering ([#4226](https://github.com/opensourcepos/opensourcepos/issues/4226)) by @jekkos in ([#4227](https://github.com/opensourcepos/opensourcepos/pull/4227))
+- Fix datetime rendering by @jekkos in ([#4228](https://github.com/opensourcepos/opensourcepos/pull/4228))
+- Fix null error when sending by email a receipt of a sale that has no invoice by @diego-ramos in ([#4229](https://github.com/opensourcepos/opensourcepos/pull/4229))
+- Update Receivings.php to save form. by @odiea in ([#4231](https://github.com/opensourcepos/opensourcepos/pull/4231))
+- Update Cashups.php for ajax cashup total to work. by @odiea in ([#4238](https://github.com/opensourcepos/opensourcepos/pull/4238))
+- Coding style updates for PSR-12 compliance & improved readability by @BudsieBuds in ([#4204](https://github.com/opensourcepos/opensourcepos/pull/4204))
+- Fix Codeigniter disallowed characters error with payment types that have accents by @diego-ramos in ([#4232](https://github.com/opensourcepos/opensourcepos/pull/4232))
+- Fixed broken escape string for success & warning messages by @Franchovy in ([#4253](https://github.com/opensourcepos/opensourcepos/pull/4253))
+- Bugfix constraint migration fix by @objecttothis in ([#4230](https://github.com/opensourcepos/opensourcepos/pull/4230))
+- Fix item number lookup in sales/receivings ([#4212](https://github.com/opensourcepos/opensourcepos/issues/4212)) by @jekkos in ([#4250](https://github.com/opensourcepos/opensourcepos/pull/4250))
+
+## [3.4.0] - 2025-03-23
 
 - Translation updates (Spanish, Indonesian, Swedish, Urdu, Chinese, Thai, French, Dutch)
-- PHP 8.x support
+- PHP `8.x` support
 - Security fixes (XSS, SQLi)
 - Migration to Gulp as buildsystem
 - Decimal validation fix

CODE_OF_CONDUCT.md

@@ -1,98 +1,85 @@
-Contributor Covenant Code of Conduct
-Our Pledge
-We as members, contributors, and leaders pledge to make participation in our
-community a harassment-free experience for everyone, regardless of age, body
-size, visible or invisible disability, ethnicity, sex characteristics, gender
-identity and expression, level of experience, education, socio-economic status,
-nationality, personal appearance, race, caste, color, religion, or sexual
-identity and orientation.
-We pledge to act and interact in ways that contribute to an open, welcoming,
-diverse, inclusive, and healthy community.
-Our Standards
-Examples of behavior that contributes to a positive environment for our
-community include:
+[comment]: # (Contributor Covenant 2.1 - from https://www.contributor-covenant.org/version/2/1/code_of_conduct/code_of_conduct.md)
+
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our community a harassment-free experience for everyone, regardless of age, body size, visible or invisible disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, caste, color, religion, or sexual identity and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our community include:
 
 * Demonstrating empathy and kindness toward other people
 * Being respectful of differing opinions, viewpoints, and experiences
 * Giving and gracefully accepting constructive feedback
-* Accepting responsibility and apologizing to those affected by our mistakes,
-and learning from the experience
-* Focusing on what is best not just for us as individuals, but for the overall
-community
+* Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience
+* Focusing on what is best not just for us as individuals, but for the overall community
 
 Examples of unacceptable behavior include:
 
-* The use of sexualized language or imagery, and sexual attention or advances of
-any kind
+* The use of sexualized language or imagery, and sexual attention or advances of any kind
 * Trolling, insulting or derogatory comments, and personal or political attacks
 * Public or private harassment
-* Publishing others’ private information, such as a physical or email address,
-without their explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
-professional setting
+* Publishing others' private information, such as a physical or email address, without their explicit permission
+* Other conduct which could reasonably be considered inappropriate in a professional setting
 
-Enforcement Responsibilities
-Community leaders are responsible for clarifying and enforcing our standards of
-acceptable behavior and will take appropriate and fair corrective action in
-response to any behavior that they deem inappropriate, threatening, offensive,
-or harmful.
-Community leaders have the right and responsibility to remove, edit, or reject
-comments, commits, code, wiki edits, issues, and other contributions that are
-not aligned to this Code of Conduct, and will communicate reasons for moderation
-decisions when appropriate.
-Scope
-This Code of Conduct applies within all community spaces, and also applies when
-an individual is officially representing the community in public spaces.
-Examples of representing our community include using an official email address,
-posting via an official social media account, or acting as an appointed
-representative at an online or offline event.
-Enforcement
-Instances of abusive, harassing, or otherwise unacceptable behavior may be
-reported to the community leaders responsible for enforcement at
-[INSERT CONTACT METHOD].
-All complaints will be reviewed and investigated promptly and fairly.
-All community leaders are obligated to respect the privacy and security of the
-reporter of any incident.
-Enforcement Guidelines
-Community leaders will follow these Community Impact Guidelines in determining
-the consequences for any action they deem in violation of this Code of Conduct:
-1. Correction
-Community Impact: Use of inappropriate language or other behavior deemed
-unprofessional or unwelcome in the community.
-Consequence: A private, written warning from community leaders, providing
-clarity around the nature of the violation and an explanation of why the
-behavior was inappropriate. A public apology may be requested.
-2. Warning
-Community Impact: A violation through a single incident or series of
-actions.
-Consequence: A warning with consequences for continued behavior. No
-interaction with the people involved, including unsolicited interaction with
-those enforcing the Code of Conduct, for a specified period of time. This
-includes avoiding interactions in community spaces as well as external channels
-like social media. Violating these terms may lead to a temporary or permanent
-ban.
-3. Temporary Ban
-Community Impact: A serious violation of community standards, including
-sustained inappropriate behavior.
-Consequence: A temporary ban from any sort of interaction or public
-communication with the community for a specified period of time. No public or
-private interaction with the people involved, including unsolicited interaction
-with those enforcing the Code of Conduct, is allowed during this period.
-Violating these terms may lead to a permanent ban.
-4. Permanent Ban
-Community Impact: Demonstrating a pattern of violation of community
-standards, including sustained inappropriate behavior, harassment of an
-individual, or aggression toward or disparagement of classes of individuals.
-Consequence: A permanent ban from any sort of public interaction within the
-community.
-Attribution
-This Code of Conduct is adapted from the Contributor Covenant,
-version 2.1, available at
-https://www.contributor-covenant.org/version/2/1/code_of_conduct.html.
-Community Impact Guidelines were inspired by
-Mozilla’s code of conduct enforcement ladder.
-For answers to common questions about this code of conduct, see the FAQ at
-https://www.contributor-covenant.org/faq. Translations are available at
-https://www.contributor-covenant.org/translations.
+## Enforcement Responsibilities
 
+Community leaders are responsible for clarifying and enforcing our standards of acceptable behavior and will take appropriate and fair corrective action in response to any behavior that they deem inappropriate, threatening, offensive, or harmful.
 
+Community leaders have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, and will communicate reasons for moderation decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when an individual is officially representing the community in public spaces. Examples of representing our community include using an official e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be reported to the community leaders responsible for enforcement at [INSERT CONTACT METHOD]. All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing clarity around the nature of the violation and an explanation of why the behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series of actions.
+
+**Consequence**: A warning with consequences for continued behavior. No interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, for a specified period of time. This includes avoiding interactions in community spaces as well as external channels like social media. Violating these terms may lead to a temporary or permanent ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public communication with the community for a specified period of time. No public or private interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, is allowed during this period. Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community standards, including sustained inappropriate behavior, harassment of an individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within the community.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 2.1, available at [https://www.contributor-covenant.org/version/2/1/code_of_conduct.html][v2.1].
+
+Community Impact Guidelines were inspired by [Mozilla's code of conduct enforcement ladder][Mozilla CoC].
+
+For answers to common questions about this code of conduct, see the FAQ at [https://www.contributor-covenant.org/faq][FAQ]. Translations are available at [https://www.contributor-covenant.org/translations][translations].
+
+[homepage]: https://www.contributor-covenant.org
+[v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html
+[Mozilla CoC]: https://github.com/mozilla/diversity
+[FAQ]: https://www.contributor-covenant.org/faq
+[translations]: https://www.contributor-covenant.org/translations

Dockerfile

@@ -13,7 +13,8 @@ RUN echo "date.timezone = \"\${PHP_TIMEZONE}\"" > /usr/local/etc/php/conf.d/time
 
 WORKDIR /app
 COPY --chown=www-data:www-data . /app
-RUN chmod 770 /app/writable/uploads /app/writable/logs /app/writable/cache \
+RUN chmod 750 /app/writable/logs /app/writable/uploads /app/writable/cache /app/public/uploads /app/public/uploads/item_pics \
+    && chmod 640 /app/writable/uploads/importCustomers.csv \
     && ln -s /app/*[^public] /var/www \
     && rm -rf /var/www/html \
     && ln -nsf /app/public /var/www/html

README.md

@@ -1,6 +1,10 @@
 <p align="center"><img src="https://raw.githubusercontent.com/opensourcepos/opensourcepos/master/branding/emblem.svg" alt="Open Source Point of Sale Logo" width="auto" height="200"></p>
 <h3 align="center">Open Source Point of Sale</h3>
 
+## ☢️ Bootstrap 5 conversion WIP
+
+This is a heavily under-construction build converting OSPOS from Bootstrap 3 to Bootstrap 5. Please do not use!
+
 <p align="center">
   <a href="#-introduction">Introduction</a> · <a href="#-live-demo">Demo</a> · <a href="#-installation">Installation</a> · 
   <a href="#-contributing">Contributing</a> · <a href="#-reporting-bugs">Bugs</a> · <a href="#-faq">FAQ</a> · 
@@ -106,7 +110,7 @@ NOTE: If you're running non-release code, please make sure you always run the la
 
 ## 🏃 Keep the Machine Running
 
-If you like our project, please consider buying us a coffee through the button below so we can keep adding features.
+If you like our project, please consider buying us a coffee through the button below so we can keep adding features. Please star the project if you like it!
 
 [![Donate](https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=MUN6AEG7NY6H8)\
 Or refer to the [FUNDING.yml](.github/FUNDING.yml) file.

app/Config/App.php

@@ -58,9 +58,9 @@ class App extends BaseConfig
      * Allowed Hostnames in the Site URL other than the hostname in the baseURL.
      * If you want to accept multiple Hostnames, set this.
      *
-     * E.g.,
-     * When your site URL ($baseURL) is 'http://example.com/', and your site
-     * also accepts 'http://media.example.com/' and 'http://accounts.example.com/':
+     * Or via environment variable (useful for Docker/Compose):
+     *   ALLOWED_HOSTNAMES=example.com,www.example.com
+     * 
      *     ['media.example.com', 'accounts.example.com']
      *
      * @var list<string>
@@ -286,7 +286,11 @@ class App extends BaseConfig
 
         // Solution for CodeIgniter 4 limitation: arrays cannot be set from .env
         // See: https://github.com/codeigniter4/CodeIgniter4/issues/7311
-        $envAllowedHostnames = getenv('app.allowedHostnames');
+        // Support both: app.allowedHostnames (from .env) and ALLOWED_HOSTNAMES (from environment/Docker)
+        $envAllowedHostnames = getenv('ALLOWED_HOSTNAMES');
+        if ($envAllowedHostnames === false || trim($envAllowedHostnames) === '') {
+            $envAllowedHostnames = getenv('app.allowedHostnames');
+        }
         if ($envAllowedHostnames !== false && trim($envAllowedHostnames) !== '') {
             $this->allowedHostnames = array_values(array_filter(
                 array_map('trim', explode(',', $envAllowedHostnames)),
@@ -327,7 +331,7 @@ class App extends BaseConfig
             $errorMessage =
                 'Security: allowedHostnames is not configured. ' .
                 'Host header injection protection is disabled. ' .
-                'Set app.allowedHostnames in your .env file. ' .
+                'Set app.allowedHostnames in your .env file or ALLOWED_HOSTNAMES environment variable. ' .
                 'Example: app.allowedHostnames = "example.com,www.example.com" ' .
                 'Received Host: ' . $httpHost;
 

app/Config/Mimes.php

@@ -486,10 +486,9 @@ class Mimes
     /**
      * Attempts to determine the best mime type for the given file extension.
      *
-     * @param string $extension
-     * @return array|string|null The mime type found, or none if unable to determine.
+     * @return string|null The mime type found, or none if unable to determine.
      */
-    public static function guessTypeFromExtension(string $extension): array|string|null
+    public static function guessTypeFromExtension(string $extension)
     {
         $extension = trim(strtolower($extension), '. ');
 
@@ -507,7 +506,7 @@ class Mimes
      *
      * @return string|null The extension determined, or null if unable to match.
      */
-    public static function guessExtensionFromType(string $type, ?string $proposedExtension = null): ?string
+    public static function guessExtensionFromType(string $type, ?string $proposedExtension = null)
     {
         $type = trim(strtolower($type), '. ');
 
@@ -523,7 +522,7 @@ class Mimes
         }
 
         // Reverse check the mime type list if no extension was proposed.
-        // This search is order-sensitive!
+        // This search is order sensitive!
         foreach (static::$mimes as $ext => $types) {
             if (in_array($type, (array) $types, true)) {
                 return $ext;

app/Config/OSPOS.php

@@ -5,7 +5,6 @@ namespace Config;
 use App\Models\Appconfig;
 use CodeIgniter\Cache\CacheInterface;
 use CodeIgniter\Config\BaseConfig;
-use CodeIgniter\Database\Exceptions\DatabaseException;
 
 /**
  * This class holds the configuration options stored from the database so that on launch those settings can be cached
@@ -41,13 +40,16 @@ class OSPOS extends BaseConfig
                     $this->settings[$app_config->key] = $app_config->value;
                 }
                 $this->cache->save('settings', encode_array($this->settings));
-            } catch (DatabaseException $e) {
+            } catch (\Exception $e) {
                 // Database table doesn't exist yet (migrations haven't run)
-                // Return empty settings to allow migration page to display
+                // or database connection failed. Return empty settings to
+                // allow migration page to display. Catches mysqli_sql_exception
+                // which is not a subclass of DatabaseException.
                 $this->settings = [
                     'language' => 'english',
                     'language_code' => 'en',
-                    'company' => 'Home'
+                    'company' => 'Home',
+                    'barcode_type' => 'Code39'
                 ];
             }
         }

app/Config/Session.php

@@ -3,7 +3,6 @@
 namespace Config;
 
 use CodeIgniter\Config\BaseConfig;
-use CodeIgniter\Database\Exceptions\DatabaseException;
 use CodeIgniter\Session\Handlers\BaseHandler;
 use CodeIgniter\Session\Handlers\DatabaseHandler;
 use CodeIgniter\Session\Handlers\FileHandler;
@@ -139,7 +138,11 @@ class Session extends BaseConfig
                     $this->driver = FileHandler::class;
                     $this->savePath = WRITEPATH . 'session';
                 }
-            } catch (DatabaseException $e) {
+            } catch (\Exception $e) {
+                // Database not available yet (e.g. fresh install before migrations).
+                // Fall back to file-based sessions so the login/migration page
+                // can still be served. Catches mysqli_sql_exception which is
+                // not a subclass of DatabaseException but is a RuntimeException.
                 $this->driver = FileHandler::class;
                 $this->savePath = WRITEPATH . 'session';
             }

app/Controllers/BaseController.php

@@ -28,12 +28,9 @@ abstract class BaseController extends Controller
     // protected $session;
 
     /**
-     * @param RequestInterface $request
-     * @param ResponseInterface $response
-     * @param LoggerInterface $logger
      * @return void
      */
-    public function initController(RequestInterface $request, ResponseInterface $response, LoggerInterface $logger): void
+    public function initController(RequestInterface $request, ResponseInterface $response, LoggerInterface $logger)
     {
         // Load here all helpers you want to be available in your controllers that extend BaseController.
         // Caution: Do not put the this below the parent::initController() call below.

app/Controllers/Config.php

@@ -82,7 +82,7 @@ class Config extends Secure_Controller
         $npmDev = false;
         $license = [];
 
-        $license[$i]['title'] = 'Open Source Point Of Sale ' . config('App')->application_version;
+        $license[$i]['title'] = 'Open Source Point of Sale ' . config('App')->application_version;
 
         if (file_exists('license/LICENSE')) {
             $license[$i]['text'] = file_get_contents('license/LICENSE', false, null, 0, 3000);
@@ -221,6 +221,7 @@ class Config extends Secure_Controller
      */
     public function getIndex(): string
     {
+        $data['config'] = $this->config;
         $data['stock_locations'] = $this->stock_location->get_all()->getResultArray();
         $data['dinner_tables'] = $this->dinner_table->get_all()->getResultArray();
         $data['customer_rewards'] = $this->customer_rewards->get_all()->getResultArray();
@@ -231,6 +232,8 @@ class Config extends Secure_Controller
         $data['line_sequence_options'] = $this->sale_lib->get_line_sequence_options();
         $data['register_mode_options'] = $this->sale_lib->get_register_mode_options();
         $data['invoice_type_options'] = $this->sale_lib->get_invoice_type_options();
+        $data['keyboardShortcutOptions'] = $this->sale_lib->getKeyShortcutsOptions();
+        $data['keyboardShortcuts'] = $this->sale_lib->getKeyShortcuts();
         $data['rounding_options'] = rounding_mode::get_rounding_options();
         $data['tax_code_options'] = $this->tax_lib->get_tax_code_options();
         $data['tax_category_options'] = $this->tax_lib->get_tax_category_options();
@@ -368,8 +371,6 @@ class Config extends Secure_Controller
     public function postSaveGeneral(): ResponseInterface
     {
         $batchSaveData = [
-            'theme'                             => $this->request->getPost('theme'),
-            'login_form'                        => $this->request->getPost('login_form'),
             'default_sales_discount_type'       => $this->request->getPost('default_sales_discount_type') != null,
             'default_sales_discount'            => parse_decimals($this->request->getPost('default_sales_discount')),
             'default_receivings_discount_type'  => $this->request->getPost('default_receivings_discount_type') != null,
@@ -377,8 +378,6 @@ class Config extends Secure_Controller
             'enforce_privacy'                   => $this->request->getPost('enforce_privacy') != null,
             'receiving_calculate_average_price' => $this->request->getPost('receiving_calculate_average_price') != null,
             'lines_per_page'                    => $this->request->getPost('lines_per_page', FILTER_SANITIZE_NUMBER_INT),
-            'notify_horizontal_position'        => $this->request->getPost('notify_horizontal_position'),
-            'notify_vertical_position'          => $this->request->getPost('notify_vertical_position'),
             'image_max_width'                   => $this->request->getPost('image_max_width', FILTER_SANITIZE_NUMBER_INT),
             'image_max_height'                  => $this->request->getPost('image_max_height', FILTER_SANITIZE_NUMBER_INT),
             'image_max_size'                    => $this->request->getPost('image_max_size', FILTER_SANITIZE_NUMBER_INT),
@@ -398,6 +397,9 @@ class Config extends Secure_Controller
 
         $this->module->set_show_office_group($this->request->getPost('show_office_group') != null);
 
+        $this->db->transStart();
+
+        $attributeSuccess = true;
         if ($batchSaveData['category_dropdown']) {
             $definitionData['definition_name'] = 'ospos_category';
             $definitionData['definition_flags'] = 0;
@@ -405,12 +407,36 @@ class Config extends Secure_Controller
             $definitionData['definition_id'] = CATEGORY_DEFINITION_ID;
             $definitionData['deleted'] = 0;
 
-            $this->attribute->saveDefinition($definitionData, CATEGORY_DEFINITION_ID);
+            $attributeSuccess = $this->attribute->saveDefinition($definitionData, CATEGORY_DEFINITION_ID);
         } elseif ($batchSaveData['category_dropdown'] == NO_DEFINITION_ID) {
-            $this->attribute->deleteDefinition(CATEGORY_DEFINITION_ID);
+            $attributeSuccess = $this->attribute->deleteDefinition(CATEGORY_DEFINITION_ID);
         }
 
-        $success = $this->appconfig->batch_save($batchSaveData);
+        $success = $attributeSuccess && $this->appconfig->batch_save($batchSaveData);
+
+        $this->db->transComplete();
+
+        $success = $success && $this->db->transStatus();
+
+        return $this->response->setJSON(['success' => $success, 'message' => lang('Config.saved_' . ($success ? '' : 'un') . 'successfully')]);
+    }
+
+    /**
+     * Saves Appearance configuration. Used in app/Views/configs/appearance_config.php
+     */
+    public function postSaveAppearance(): ResponseInterface
+    {
+        $batch_save_data = [
+            'theme'                      => $this->request->getPost('theme'),
+            'login_form'                 => $this->request->getPost('login_form'),
+            'notify_horizontal_position' => $this->request->getPost('notify_horizontal_position'),
+            'notify_vertical_position'   => $this->request->getPost('notify_vertical_position'),
+            'color_mode'                 => $this->request->getPost('color_mode'),
+            'config_menu_position'       => $this->request->getPost('config_menu_position'),
+            'responsive_design'          => $this->request->getPost('responsive_design') != null
+        ];
+
+        $success = $this->appconfig->batch_save($batch_save_data);
 
         return $this->response->setJSON(['success' => $success, 'message' => lang('Config.saved_' . ($success ? '' : 'un') . 'successfully')]);
     }
@@ -423,32 +449,35 @@ class Config extends Secure_Controller
      */
     public function postCheckNumberLocale(): ResponseInterface
     {
-        $number_locale = $this->request->getPost('number_locale');
-        $save_number_locale = $this->request->getPost('save_number_locale');
+        $numberLocale = $this->request->getPost('number_locale');
+        $saveNumberLocale = $this->request->getPost('save_number_locale');
+        $postedCurrencySymbol = $this->request->getPost('currency_symbol');
+        $postedCurrencyCode = $this->request->getPost('currency_code');
 
-        $fmt = new NumberFormatter($number_locale, NumberFormatter::CURRENCY);
-        if ($number_locale != $save_number_locale) {
-            $currency_symbol = $fmt->getSymbol(NumberFormatter::CURRENCY_SYMBOL);
-            $currency_code = $fmt->getTextAttribute(NumberFormatter::CURRENCY_CODE);
-            $save_number_locale = $number_locale;
-        } else {
-            $currency_symbol = empty($this->request->getPost('currency_symbol')) ? $fmt->getSymbol(NumberFormatter::CURRENCY_SYMBOL) : $this->request->getPost('currency_symbol');
-            $currency_code = empty($this->request->getPost('currency_code')) ? $fmt->getTextAttribute(NumberFormatter::CURRENCY_CODE) : $this->request->getPost('currency_code');
+        $fmt = new NumberFormatter($numberLocale, NumberFormatter::CURRENCY);
+
+        // Use posted values if provided, otherwise fall back to locale defaults
+        $currencySymbol = $postedCurrencySymbol !== '' ? $postedCurrencySymbol : $fmt->getSymbol(NumberFormatter::CURRENCY_SYMBOL);
+        $currencyCode = $postedCurrencyCode !== '' ? $postedCurrencyCode : $fmt->getTextAttribute(NumberFormatter::CURRENCY_CODE);
+
+        // Update saved locale if it changed
+        if ($numberLocale !== $saveNumberLocale) {
+            $saveNumberLocale = $numberLocale;
         }
 
         if ($this->request->getPost('thousands_separator') == 'false') {
             $fmt->setTextAttribute(NumberFormatter::GROUPING_SEPARATOR_SYMBOL, '');
         }
 
-        $fmt->setSymbol(NumberFormatter::CURRENCY_SYMBOL, $currency_symbol);
-        $number_local_example = $fmt->format(1234567890.12300);
+        $fmt->setSymbol(NumberFormatter::CURRENCY_SYMBOL, $currencySymbol);
+        $numberLocaleExample = $fmt->format(1234567890.12300);
 
         return $this->response->setJSON([
-            'success'               => $number_local_example != false,
-            'save_number_locale'    => $save_number_locale,
-            'number_locale_example' => $number_local_example,
-            'currency_symbol'       => $currency_symbol,
-            'currency_code'         => $currency_code,
+            'success'               => $numberLocaleExample != false,
+            'save_number_locale'    => $saveNumberLocale,
+            'number_locale_example' => $numberLocaleExample,
+            'currency_symbol'       => $currencySymbol,
+            'currency_code'         => $currencyCode,
         ]);
     }
 
@@ -468,6 +497,7 @@ class Config extends Secure_Controller
             'currency_code'         => $this->request->getPost('currency_code'),
             'language_code'         => $exploded[0],
             'language'              => $exploded[1],
+            'rtl_language'          => $this->request->getPost('rtl_language') != null,
             'timezone'              => $this->request->getPost('timezone'),
             'dateformat'            => $this->request->getPost('dateformat'),
             'timeformat'            => $this->request->getPost('timeformat'),
@@ -936,6 +966,44 @@ class Config extends Secure_Controller
         return $this->response->setJSON(['success' => $success, 'message' => lang('Config.saved_' . ($success ? '' : 'un') . 'successfully')]);
     }
 
+    /**
+     * Saves keyboard shortcut bindings.
+     *
+     * @return ResponseInterface
+     * @noinspection PhpUnused
+     */
+    public function postSaveShortcuts(): ResponseInterface
+    {
+        $allowedShortcuts = array_keys($this->sale_lib->getKeyShortcutsOptions());
+        $currentShortcuts = $this->sale_lib->getKeyShortcuts();
+        $batchSaveData = [];
+
+        foreach ($currentShortcuts as $name => $shortcut) {
+            $postedValue = trim((string)$this->request->getPost('key_' . $name));
+
+            if (!in_array($postedValue, $allowedShortcuts, true)) {
+                $postedValue = $shortcut['value'];
+            }
+
+            $batchSaveData['key_' . $name] = $postedValue;
+        }
+
+        $duplicateValues = array_filter(array_count_values($batchSaveData), static fn(int $count): bool => $count > 1);
+        if (!empty($duplicateValues)) {
+            return $this->response->setJSON([
+                'success' => false,
+                'message' => lang('Config.shortcuts_duplicate_bindings')
+            ]);
+        }
+
+        $success = $this->appconfig->batch_save($batchSaveData);
+
+        return $this->response->setJSON([
+            'success' => $success,
+            'message' => lang('Config.saved_' . ($success ? '' : 'un') . 'successfully')
+        ]);
+    }
+
     /**
      * Saves invoice configuration. Used in app/Views/configs/invoice_config.php.
      *

app/Controllers/Expenses.php

@@ -91,7 +91,7 @@ class Expenses extends Secure_Controller
      */
     public function getView(int $expense_id = NEW_ENTRY): string
     {
-        $data = [];
+        $data = [];    // TODO: Duplicated code
 
         $data['expenses_info'] = $this->expense->get_info($expense_id);
         $expense_id = $data['expenses_info']->expense_id;

app/Controllers/Home.php

@@ -43,7 +43,7 @@ class Home extends Secure_Controller
     public function getChangePassword(int $employeeId = NEW_ENTRY): ResponseInterface|string
     {
         $loggedInEmployee = $this->employee->get_logged_in_employee_info();
-        $currentPersonId = $loggedInEmployee->person_id;
+        $currentPersonId = (int) $loggedInEmployee->person_id;
 
         $employeeId = $employeeId === NEW_ENTRY ? $currentPersonId : $employeeId;
 
@@ -68,10 +68,11 @@ class Home extends Secure_Controller
     public function postSave(int $employeeId = NEW_ENTRY): ResponseInterface
     {
         $currentUser = $this->employee->get_logged_in_employee_info();
+        $currentPersonId = (int) $currentUser->person_id;
 
-        $employeeId = $employeeId === NEW_ENTRY ? $currentUser->person_id : $employeeId;
+        $employeeId = $employeeId === NEW_ENTRY ? $currentPersonId : $employeeId;
 
-        if (!$this->employee->isAdmin($currentUser->person_id) && $employeeId !== $currentUser->person_id) {
+        if (!$this->employee->isAdmin($currentPersonId) && $employeeId !== $currentPersonId) {
             return $this->response->setStatusCode(403)->setJSON([
                 'success' => false,
                 'message' => lang('Employees.unauthorized_modify')

app/Controllers/Receivings.php

@@ -11,7 +11,6 @@ use App\Models\Item_kit;
 use App\Models\Receiving;
 use App\Models\Stock_location;
 use App\Models\Supplier;
-use App\Traits\Controller\Shared;
 use CodeIgniter\HTTP\ResponseInterface;
 use Config\OSPOS;
 use Config\Services;
@@ -19,7 +18,6 @@ use ReflectionException;
 
 class Receivings extends Secure_Controller
 {
-    use Shared;
     private Receiving_lib $receiving_lib;
     private Token_lib $token_lib;
     private Barcode_lib $barcode_lib;
@@ -210,7 +208,7 @@ class Receivings extends Secure_Controller
         $quantity = parse_quantity($this->request->getPost('quantity'));
         $raw_receiving_quantity = parse_quantity($this->request->getPost('receiving_quantity'));
 
-        $description = $this->request->getPost('description', FILTER_SANITIZE_FULL_SPECIAL_CHARS);
+        $description = $this->request->getPost('description', FILTER_SANITIZE_FULL_SPECIAL_CHARS);    // TODO: Duplicated code
         $serialnumber = $this->request->getPost('serialnumber', FILTER_SANITIZE_FULL_SPECIAL_CHARS) ?? '';
         $discount_type = $this->request->getPost('discount_type', FILTER_SANITIZE_NUMBER_INT);
         $discount = $discount_type
@@ -427,10 +425,19 @@ class Receivings extends Secure_Controller
         $employee_info = $this->employee->get_info($receiving_info['employee_id']);
         $data['employee'] = $employee_info->first_name . ' ' . $employee_info->last_name;
 
-        $supplier_id = $this->receiving_lib->get_supplier();
+        $supplier_id = $this->receiving_lib->get_supplier();    // TODO: Duplicated code
         if ($supplier_id != -1) {
             $supplier_info = $this->supplier->get_info($supplier_id);
-            $this->buildSupplierInfo($supplier_info, $data);
+            $data['supplier'] = $supplier_info->company_name;
+            $data['first_name'] = $supplier_info->first_name;
+            $data['last_name'] = $supplier_info->last_name;
+            $data['supplier_email'] = $supplier_info->email;
+            $data['supplier_address'] = $supplier_info->address_1;
+            if (!empty($supplier_info->zip) or !empty($supplier_info->city)) {
+                $data['supplier_location'] = $supplier_info->zip . ' ' . $supplier_info->city;
+            } else {
+                $data['supplier_location'] = '';
+            }
         }
 
         $data['print_after_sale'] = false;
@@ -467,9 +474,18 @@ class Receivings extends Secure_Controller
 
         $supplier_id = $this->receiving_lib->get_supplier();
 
-        if ($supplier_id != -1) {
+        if ($supplier_id != -1) {    // TODO: Duplicated Code... replace -1 with a constant
             $supplier_info = $this->supplier->get_info($supplier_id);
-            $this->buildSupplierInfo($supplier_info, $data);
+            $data['supplier'] = $supplier_info->company_name;
+            $data['first_name'] = $supplier_info->first_name;
+            $data['last_name'] = $supplier_info->last_name;
+            $data['supplier_email'] = $supplier_info->email;
+            $data['supplier_address'] = $supplier_info->address_1;
+            if (!empty($supplier_info->zip) or !empty($supplier_info->city)) {
+                $data['supplier_location'] = $supplier_info->zip . ' ' . $supplier_info->city;
+            } else {
+                $data['supplier_location'] = '';
+            }
         }
 
         $data['print_after_sale'] = $this->receiving_lib->is_print_after_sale();

app/Controllers/Reports.php

@@ -128,8 +128,8 @@ class Reports extends Secure_Controller
      * @param string $location_id
      * @return string
      */
-    public function summary_sales(string $start_date, string $end_date, string $sale_type, string $location_id = 'all'): string
-    {
+    public function summary_sales(string $start_date, string $end_date, string $sale_type, string $location_id = 'all'): string    // TODO: Perhaps these need to be passed as an array?  Too many parameters in the signature.
+    {   // TODO: Duplicated code
         $this->clearCache();
 
         $inputs = [
@@ -176,7 +176,7 @@ class Reports extends Secure_Controller
      * @return string
      */
     public function summary_categories(string $start_date, string $end_date, string $sale_type, string $location_id = 'all'): string
-    {
+    {   // TODO: Duplicated code
         $this->clearCache();
 
         $inputs = [
@@ -493,7 +493,7 @@ class Reports extends Secure_Controller
      * @return string
      */
     public function summary_sales_taxes(string $start_date, string $end_date, string $sale_type, string $location_id = 'all'): string
-    {
+    {   // TODO: Duplicated code
         $this->clearCache();
 
         $inputs = [
@@ -1308,9 +1308,9 @@ class Reports extends Secure_Controller
                 'comment'       => $row['comment'],
                 'edit'          => anchor(
                     'sales/edit/' . $row['sale_id'],
-                    '<span class="glyphicon glyphicon-edit"></span>',
+                    '<i class="bi bi-pencil-square"></i>',
                     [
-                        'class'           => 'modal-dlg print_hide',
+                        'class'           => 'modal-launch print_hide',
                         $button_key       => $button_label,
                         'data-btn-submit' => lang('Common.submit'),
                         'title'           => lang('Sales.update')
@@ -1435,9 +1435,9 @@ class Reports extends Secure_Controller
                 'comment'       => $row['comment'],
                 'edit'          => anchor(
                     'sales/edit/' . $row['sale_id'],
-                    '<span class="glyphicon glyphicon-edit"></span>',
+                    '<i class="bi bi-pencil-square"></i>',
                     [
-                        'class'           => 'modal-dlg print_hide',
+                        'class'           => 'modal-launch print_hide',
                         $button_key       => $button_label,
                         'data-btn-submit' => lang('Common.submit'),
                         'title'           => lang('Sales.update')
@@ -1567,9 +1567,9 @@ class Reports extends Secure_Controller
                 'comment'       => $row['comment'],
                 'edit'          => anchor(
                     'sales/edit/' . $row['sale_id'],
-                    '<span class="glyphicon glyphicon-edit"></span>',
+                    '<i class="bi bi-pencil-square"></i>',
                     [
-                        'class'           => 'modal-dlg print_hide',
+                        'class'           => 'modal-launch print_hide',
                         $button_key       => $button_label,
                         'data-btn-submit' => lang('Common.submit'),
                         'title'           => lang('Sales.update')
@@ -1655,9 +1655,9 @@ class Reports extends Secure_Controller
             'comment'       => $report_data['comment'],
             'edit'          => anchor(
                 'sales/edit/' . $report_data['sale_id'],
-                '<span class="glyphicon glyphicon-edit"></span>',
+                '<i class="bi bi-pencil-square"></i>',
                 [
-                    'class'           => 'modal-dlg print_hide',
+                    'class'           => 'modal-launch print_hide',
                     $button_key       => $button_label,
                     'data-btn-submit' => lang('Common.submit'),
                     'title'           => lang('Sales.update')
@@ -1831,9 +1831,9 @@ class Reports extends Secure_Controller
                 'comment'       => $row['comment'],
                 'edit'          => anchor(
                     'sales/edit/' . $row['sale_id'],
-                    '<span class="glyphicon glyphicon-edit"></span>',
+                    '<i class="bi bi-pencil-square"></i>',
                     [
-                        'class'           => 'modal-dlg print_hide',
+                        'class'           => 'modal-launch print_hide',
                         $button_key       => $button_label,
                         'data-btn-submit' => lang('Common.submit'),
                         'title'           => lang('Sales.update')
@@ -1911,9 +1911,9 @@ class Reports extends Secure_Controller
             'comment'        => $report_data['comment'],
             'edit'           => anchor(
                 'receivings/edit/' . $report_data['receiving_id'],
-                '<span class="glyphicon glyphicon-edit"></span>',
+                '<i class="bi bi-pencil-square"></i>',
                 [
-                    'class'           => 'modal-dlg print_hide',
+                    'class'           => 'modal-launch print_hide',
                     'data-btn-submit' => lang('Common.submit'),
                     'data-btn-delete' => lang('Common.delete'),
                     'title'           => lang('Receivings.update')
@@ -1971,9 +1971,9 @@ class Reports extends Secure_Controller
                 'comment'        => $row['comment'],
                 'edit'           => anchor(
                     'receivings/edit/' . $row['receiving_id'],
-                    '<span class="glyphicon glyphicon-edit"></span>',
+                    '<i class="bi bi-pencil-square"></i>',
                     [
-                        'class'           => 'modal-dlg print_hide',
+                        'class'           => 'modal-launch print_hide',
                         'data-btn-delete' => lang('Common.delete'),
                         'data-btn-submit' => lang('Common.submit'),
                         'title'           => lang('Receivings.update')

app/Controllers/Sales.php

@@ -20,7 +20,6 @@ use App\Models\Stock_location;
 use App\Models\Tokens\Token_invoice_count;
 use App\Models\Tokens\Token_customer;
 use App\Models\Tokens\Token_invoice_sequence;
-use App\Traits\Controller\Shared;
 use CodeIgniter\HTTP\ResponseInterface;
 use Config\Services;
 use Config\OSPOS;
@@ -29,7 +28,6 @@ use stdClass;
 
 class Sales extends Secure_Controller
 {
-    use Shared;
     protected $helpers = ['file'];
     private Barcode_lib $barcode_lib;
     private Email_lib $email_lib;
@@ -733,7 +731,7 @@ class Sales extends Secure_Controller
             $data["customer_comments"] = $customer_info->comments;
             $data['tax_id'] = $customer_info->tax_id;
         }
-        $tax_details = $this->tax_lib->get_taxes($data['cart']);
+        $tax_details = $this->tax_lib->get_taxes($data['cart']);    // TODO: Duplicated code
         $data['taxes'] = $tax_details[0];
         $data['discount'] = $this->sale_lib->get_discount();
         $data['payments'] = $this->sale_lib->get_payments();
@@ -745,7 +743,7 @@ class Sales extends Secure_Controller
         $data['payments_total'] = $totals['payment_total'];
         $data['payments_cover_total'] = $totals['payments_cover_total'];
         $data['cash_rounding'] = $this->session->get('cash_rounding');
-        $data['cash_mode'] = $this->session->get('cash_mode');
+        $data['cash_mode'] = $this->session->get('cash_mode');    // TODO: Duplicated code
         $data['prediscount_subtotal'] = $totals['prediscount_subtotal'];
         $data['cash_total'] = $totals['cash_total'];
         $data['non_cash_total'] = $totals['total'];
@@ -939,7 +937,10 @@ class Sales extends Secure_Controller
                 new Token_customer((array)$sale_data)
             ];
             $text = $this->token_lib->render($text, $tokens);
-            $sale_data['mimetype'] = mime_content_type(FCPATH . 'uploads/' . $this->config['company_logo']);
+            $sale_data['mimetype'] = $this->email_lib->getLogoMimeType();
+
+            // Build img_tag for email views that need it (receipt_email.php)
+            $sale_data['img_tag'] = $this->email_lib->buildLogoImgTag();
 
             // Generate email attachment: invoice in PDF format
             $view = Services::renderer();
@@ -976,13 +977,7 @@ class Sales extends Secure_Controller
 
         if (!empty($sale_data['customer_email'])) {
             $sale_data['barcode'] = $this->barcode_lib->generate_receipt_barcode($sale_data['sale_id']);
-            $sale_data['img_tag'] = '';
-
-            $logo_path = FCPATH . 'uploads/' . $this->config['company_logo'];
-            if (!empty($this->config['company_logo']) && file_exists($logo_path)) {
-                $logo_data = base64_encode(file_get_contents($logo_path));
-                $sale_data['img_tag'] = '<img id="image" src="data:image/png;base64,' . $logo_data . '" alt="company_logo">';
-            }
+            $sale_data['img_tag'] = $this->email_lib->buildLogoImgTag();
 
             $to = $sale_data['customer_email'];
             $subject = lang('Sales.receipt');
@@ -1100,7 +1095,7 @@ class Sales extends Secure_Controller
         $data['subtotal'] = $totals['subtotal'];
         $data['payments_total'] = $totals['payment_total'];
         $data['payments_cover_total'] = $totals['payments_cover_total'];
-        $data['cash_mode'] = $this->session->get('cash_mode');.
+        $data['cash_mode'] = $this->session->get('cash_mode');    // TODO: Duplicated code.
         $data['prediscount_subtotal'] = $totals['prediscount_subtotal'];
         $data['cash_total'] = $totals['cash_total'];
         $data['non_cash_total'] = $totals['total'];
@@ -1128,15 +1123,35 @@ class Sales extends Secure_Controller
         $data['quote_number'] = $sale_info['quote_number'];
         $data['sale_status'] = $sale_info['sale_status'];
 
-        $data['company_info'] = $this->buildCompanyInfo();
+        $data['company_info'] = implode("\n", [$this->config['address'], $this->config['phone']]);    // TODO: Duplicated code.
+
+        if ($this->config['account_number']) {
+            $data['company_info'] .= "\n" . lang('Sales.account_number') . ": " . $this->config['account_number'];
+        }
+        if ($this->config['tax_id'] != '') {
+            $data['company_info'] .= "\n" . lang('Sales.tax_id') . ": " . $this->config['tax_id'];
+        }
 
         $data['barcode'] = $this->barcode_lib->generate_receipt_barcode($data['sale_id']);
         $data['print_after_sale'] = false;
         $data['price_work_orders'] = false;
 
-        $modeData = $this->getSaleModeLabel($this->sale_lib->get_mode());
-        $data['mode_label'] = $modeData['mode_label'];
-        $data['customer_required'] = $modeData['customer_required'];
+        if ($this->sale_lib->get_mode() == 'sale_invoice') {    // TODO: Duplicated code.
+            $data['mode_label'] = lang('Sales.invoice');
+            $data['customer_required'] = lang('Sales.customer_required');
+        } elseif ($this->sale_lib->get_mode() == 'sale_quote') {
+            $data['mode_label'] = lang('Sales.quote');
+            $data['customer_required'] = lang('Sales.customer_required');
+        } elseif ($this->sale_lib->get_mode() == 'sale_work_order') {
+            $data['mode_label'] = lang('Sales.work_order');
+            $data['customer_required'] = lang('Sales.customer_required');
+        } elseif ($this->sale_lib->get_mode() == 'return') {
+            $data['mode_label'] = lang('Sales.return');
+            $data['customer_required'] = lang('Sales.customer_optional');
+        } else {
+            $data['mode_label'] = lang('Sales.receipt');
+            $data['customer_required'] = lang('Sales.customer_optional');
+        }
 
         $invoice_type = $this->config['invoice_type'];
         if (!Sale_lib::isValidInvoiceType($invoice_type)) {
@@ -1174,7 +1189,7 @@ class Sales extends Secure_Controller
         $data['stock_locations'] = $this->stock_location->get_allowed_locations('sales');
         $data['stock_location'] = $this->sale_lib->get_sale_location();
         $data['tax_exclusive_subtotal'] = $this->sale_lib->get_subtotal(true, true);
-        $tax_details = $this->tax_lib->get_taxes($data['cart']);.
+        $tax_details = $this->tax_lib->get_taxes($data['cart']);    // TODO: Duplicated code.
         $data['taxes'] = $tax_details[0];
         $data['discount'] = $this->sale_lib->get_discount();
         $data['payments'] = $this->sale_lib->get_payments();
@@ -1192,7 +1207,7 @@ class Sales extends Secure_Controller
         // cash_mode indicates whether this sale is going to be processed using cash_rounding
         $cash_mode = $this->session->get('cash_mode');
         $data['cash_mode'] = $cash_mode;
-        $data['prediscount_subtotal'] = $totals['prediscount_subtotal'];.
+        $data['prediscount_subtotal'] = $totals['prediscount_subtotal'];    // TODO: Duplicated code.
         $data['cash_total'] = $totals['cash_total'];
         $data['non_cash_total'] = $totals['total'];
         $data['cash_amount_due'] = $totals['cash_amount_due'];
@@ -1238,10 +1253,25 @@ class Sales extends Secure_Controller
 
         $data['quote_number'] = $this->sale_lib->get_quote_number();
         $data['work_order_number'] = $this->sale_lib->get_work_order_number();
+        $data['keyboardShortcuts'] = $this->sale_lib->getKeyShortcuts();
 
-        $modeData = $this->getSaleModeLabel($this->sale_lib->get_mode());
-        $data['mode_label'] = $modeData['mode_label'];
-        $data['customer_required'] = $modeData['customer_required'];
+        // TODO: the if/else set below should be converted to a switch
+        if ($this->sale_lib->get_mode() == 'sale_invoice') {    // TODO: Duplicated code.
+            $data['mode_label'] = lang('Sales.invoice');
+            $data['customer_required'] = lang('Sales.customer_required');
+        } elseif ($this->sale_lib->get_mode() == 'sale_quote') {
+            $data['mode_label'] = lang('Sales.quote');
+            $data['customer_required'] = lang('Sales.customer_required');
+        } elseif ($this->sale_lib->get_mode() == 'sale_work_order') {
+            $data['mode_label'] = lang('Sales.work_order');
+            $data['customer_required'] = lang('Sales.customer_required');
+        } elseif ($this->sale_lib->get_mode() == 'return') {
+            $data['mode_label'] = lang('Sales.return');
+            $data['customer_required'] = lang('Sales.customer_optional');
+        } else {
+            $data['mode_label'] = lang('Sales.receipt');
+            $data['customer_required'] = lang('Sales.customer_optional');
+        }
 
         return view("sales/register", $data);
     }
@@ -1612,7 +1642,9 @@ class Sales extends Secure_Controller
      */
     public function getSalesKeyboardHelp(): string
     {
-        return view('sales/help');
+        return view('sales/help', [
+            'keyboardShortcuts' => $this->sale_lib->getKeyShortcuts()
+        ]);
     }
 
     /**

app/Controllers/Taxes.php

@@ -8,14 +8,12 @@ use App\Models\Tax;
 use App\Models\Tax_category;
 use App\Models\Tax_code;
 use App\Models\Tax_jurisdiction;
-use App\Traits\Controller\Shared;
 use CodeIgniter\HTTP\ResponseInterface;
 use Config\OSPOS;
 use Config\Services;
 
 class Taxes extends Secure_Controller
 {
-    use Shared;
     private array $config;
     private Tax_lib $tax_lib;
     private Tax $tax;
@@ -142,26 +140,44 @@ class Taxes extends Secure_Controller
     {
         $tax_code_info = $this->tax->get_info($tax_code);
 
-        $default_tax_category_id = 1; // Tax category id is always the default tax category    // TODO: This variable is not used anywhere in the code
-        $default_tax_category = $this->tax->get_tax_category($default_tax_category_id);    // TODO: This variable is not used anywhere in the code
+        $default_tax_category_id = 1; // Tax category id is always the default tax category    // TODO: Replace 1 with constant
+        $default_tax_category = $this->tax->get_tax_category($default_tax_category_id);    // TODO: this variable is never used in the code.
 
         $tax_rate_info = $this->tax->get_rate_info($tax_code, $default_tax_category_id);
 
-        $data['rounding_options'] = Rounding_mode::get_rounding_options();
-        $data['html_rounding_options'] = $this->get_html_rounding_options();
-
         if ($this->config['tax_included']) {
             $data['default_tax_type'] = Tax_lib::TAX_TYPE_INCLUDED;
         } else {
             $data['default_tax_type'] = Tax_lib::TAX_TYPE_EXCLUDED;
         }
 
-        if ($tax_code == NEW_ENTRY) {
-            $taxData = $this->initDefaultTaxCodeData();
-            $data = array_merge($data, $taxData);
+        $data['rounding_options'] = Rounding_mode::get_rounding_options();
+        $data['html_rounding_options'] = $this->get_html_rounding_options();
+
+        if ($tax_code == NEW_ENTRY) {   // TODO: Duplicated code
+            $data['tax_code'] = '';
+            $data['tax_code_name'] = '';
+            $data['tax_code_type'] = '0';
+            $data['city'] = '';
+            $data['state'] = '';
+            $data['tax_rate'] = '0.0000';
+            $data['rate_tax_code'] = '';
+            $data['rate_tax_category_id'] = 1;
+            $data['tax_category'] = '';
+            $data['add_tax_category'] = '';
+            $data['rounding_code'] = '0';
         } else {
-            $taxData = $this->buildTaxCodeData($tax_code_info, $tax_rate_info);
-            $data = array_merge($data, $taxData);
+            $data['tax_code'] = $tax_code;
+            $data['tax_code_name'] = $tax_code_info->tax_code_name;
+            $data['tax_code_type'] = $tax_code_info->tax_code_type;
+            $data['city'] = $tax_code_info->city;
+            $data['state'] = $tax_code_info->state;
+            $data['rate_tax_code'] = $tax_code_info->rate_tax_code;
+            $data['rate_tax_category_id'] = $tax_code_info->rate_tax_category_id;
+            $data['tax_category'] = $tax_code_info->tax_category;
+            $data['add_tax_category'] = '';
+            $data['tax_rate'] = $tax_rate_info->tax_rate;
+            $data['rounding_code'] = $tax_rate_info->rounding_code;
         }
 
         $tax_rates = [];
@@ -284,7 +300,7 @@ class Taxes extends Secure_Controller
      */
     public function getView_tax_jurisdictions(int $tax_code = NEW_ENTRY): string // TODO: This appears to be called no where in the code.
     {
-        $tax_code_info = $this->tax->get_info($tax_code);
+        $tax_code_info = $this->tax->get_info($tax_code);    // TODO: Duplicated code
 
         $default_tax_category_id = 1; // Tax category id is always the default tax category
         $default_tax_category = $this->tax->get_tax_category($default_tax_category_id);    // TODO: This variable is not used anywhere in the code

app/Database/Dockerfile

@@ -1,5 +1,5 @@
 FROM alpine:3.14
-MAINTAINER jekkos
+LABEL maintainer="jekkos"
 
 ADD database.sql /docker-entrypoint-initdb.d/database.sql
 VOLUME /docker-entrypoint-initdb.d

app/Database/Migrations/20170502221506_sales_tax_data.php

@@ -4,15 +4,16 @@ namespace App\Database\Migrations;
 
 use App\Libraries\Tax_lib;
 use App\Models\Appconfig;
-use App\Traits\Database\SalesTaxMigration;
 use CodeIgniter\Database\Migration;
 use CodeIgniter\Database\ResultInterface;
 
+/**
+ * @property tax_lib tax_lib
+ * @property appconfig appconfig
+ */
 class Migration_Sales_Tax_Data extends Migration
 {
-    use SalesTaxMigration;
-    
-    public const ROUND_UP = 5;
+    public const ROUND_UP = 5;    // TODO: These need to be moved to constants.php
     public const ROUND_DOWN = 6;
     public const HALF_FIVE = 7;
     public const YES = '1';
@@ -326,18 +327,79 @@ class Migration_Sales_Tax_Data extends Migration
         }
     }
 
-    public function clean(string $string): string
+    /**
+     * @param string $string
+     * @return string
+     */
+    public function clean(string $string): string    // TODO: $string is not a good name for this variable
     {
-        return $this->cleanIdentifier($string);
+        $string = str_replace(' ', '-', $string); // Replaces all spaces with hyphens.
+
+        return preg_replace('/[^A-Za-z0-9\-]/', '', $string); // Removes special chars.
     }
 
+    /**
+     * @param array $sales_taxes
+     * @return void
+     */
     public function apply_invoice_taxing(array &$sales_taxes): void
     {
-        $this->applyInvoiceTaxing($sales_taxes);
+        if (!empty($sales_taxes)) {    // TODO: Duplicated code
+            $sort = [];
+
+            foreach ($sales_taxes as $key => $value) {
+                $sort['print_sequence'][$key] = $value['print_sequence'];
+            }
+
+            array_multisort($sort['print_sequence'], SORT_ASC, $sales_taxes);
+        }
+
+        $decimals = totals_decimals();
+
+        foreach ($sales_taxes as $row_number => $sales_tax) {
+            $sales_taxes[$row_number]['sale_tax_amount'] = $this->get_sales_tax_for_amount($sales_tax['sale_tax_basis'], $sales_tax['tax_rate'], $sales_tax['rounding_code'], $decimals);
+        }
     }
 
+    /**
+     * @param array $sales_taxes
+     * @return void
+     */
     public function round_sales_taxes(array &$sales_taxes): void
     {
-        $this->roundSalesTaxes($sales_taxes, self::ROUND_UP, self::ROUND_DOWN, self::HALF_FIVE);
+        if (!empty($sales_taxes)) {
+            $sort = [];
+            foreach ($sales_taxes as $k => $v) {
+                $sort['print_sequence'][$k] = $v['print_sequence'];
+            }
+            array_multisort($sort['print_sequence'], SORT_ASC, $sales_taxes);
+        }
+
+        $decimals = totals_decimals();
+
+        foreach ($sales_taxes as $row_number => $sales_tax) {
+            $sale_tax_amount = (float)$sales_tax['sale_tax_amount'];
+            $rounding_code = $sales_tax['rounding_code'];
+            $rounded_sale_tax_amount = $sale_tax_amount;
+
+            if (
+                $rounding_code == PHP_ROUND_HALF_UP
+                || $rounding_code == PHP_ROUND_HALF_DOWN
+                || $rounding_code == PHP_ROUND_HALF_EVEN
+                || $rounding_code == PHP_ROUND_HALF_ODD
+            ) {
+                $rounded_sale_tax_amount = round($sale_tax_amount, $decimals, $rounding_code);
+            } elseif ($rounding_code == Migration_Sales_Tax_Data::ROUND_UP) {
+                $fig = (int) str_pad('1', $decimals, '0');
+                $rounded_sale_tax_amount = (ceil($sale_tax_amount * $fig) / $fig);
+            } elseif ($rounding_code == Migration_Sales_Tax_Data::ROUND_DOWN) {
+                $fig = (int) str_pad('1', $decimals, '0');
+                $rounded_sale_tax_amount = (floor($sale_tax_amount * $fig) / $fig);
+            } elseif ($rounding_code == Migration_Sales_Tax_Data::HALF_FIVE) {
+                $rounded_sale_tax_amount = round($sale_tax_amount / 5) * 5;
+            }
+
+            $sales_taxes[$row_number]['sale_tax_amount'] = $rounded_sale_tax_amount;
+        }
     }
 }

app/Database/Migrations/20200202000000_taxamount.php

@@ -2,22 +2,25 @@
 
 namespace App\Database\Migrations;
 
-use App\Traits\Database\SalesTaxMigration;
 use CodeIgniter\Database\Migration;
 use App\Libraries\Tax_lib;
 use App\Models\Appconfig;
 use CodeIgniter\Database\ResultInterface;
 
+/**
+ *
+ *
+ * @property appconfig appconfig
+ * @property tax_lib tax_lib
+ */
 class Migration_TaxAmount extends Migration
 {
-    use SalesTaxMigration;
-    
     public const ROUND_UP = 5;
     public const ROUND_DOWN = 6;
     public const HALF_FIVE = 7;
     public const YES = '1';
     public const VAT_TAX = '0';
-    public const SALES_TAX = '1';
+    public const SALES_TAX = '1';    // TODO: It appears that this constant is never used
     private Appconfig $appconfig;
 
     public function __construct()
@@ -302,18 +305,79 @@ class Migration_TaxAmount extends Migration
         }
     }
 
-    public function clean(string $string): string
+    /**
+     * @param string $string
+     * @return string
+     */
+    public function clean(string $string): string    // TODO: This can probably go into the migration helper as it's used it more than one migration. Also, $string needs to be refactored to a different name.
     {
-        return $this->cleanIdentifier($string);
+        $string = str_replace(' ', '-', $string); // Replaces all spaces with hyphens.
+
+        return preg_replace('/[^A-Za-z0-9\-]/', '', $string); // Removes special chars.
     }
 
+    /**
+     * @param array $sales_taxes
+     * @return void
+     */
     public function apply_invoice_taxing(array &$sales_taxes): void
     {
-        $this->applyInvoiceTaxing($sales_taxes);
+        if (!empty($sales_taxes)) {    // TODO: Duplicated code
+            $sort = [];
+            foreach ($sales_taxes as $k => $v) {
+                $sort['print_sequence'][$k] = $v['print_sequence'];
+            }
+            array_multisort($sort['print_sequence'], SORT_ASC, $sales_taxes);
+        }
+
+        $decimals = totals_decimals();
+
+        foreach ($sales_taxes as $row_number => $sales_tax) {
+            $sales_taxes[$row_number]['sale_tax_amount'] = $this->get_sales_tax_for_amount($sales_tax['sale_tax_basis'], $sales_tax['tax_rate'], $sales_tax['rounding_code'], $decimals);
+        }
     }
 
+    /**
+     * @param array $sales_taxes
+     * @return void
+     */
     public function round_sales_taxes(array &$sales_taxes): void
     {
-        $this->roundSalesTaxes($sales_taxes, self::ROUND_UP, self::ROUND_DOWN, self::HALF_FIVE);
+        if (!empty($sales_taxes)) {
+            $sort = [];
+
+            foreach ($sales_taxes as $k => $v) {
+                $sort['print_sequence'][$k] = $v['print_sequence'];
+            }
+
+            array_multisort($sort['print_sequence'], SORT_ASC, $sales_taxes);
+        }
+
+        $decimals = totals_decimals();
+
+        foreach ($sales_taxes as $row_number => $sales_tax) {
+            $sale_tax_amount = (float)$sales_tax['sale_tax_amount'];
+            $rounding_code = $sales_tax['rounding_code'];
+            $rounded_sale_tax_amount = $sale_tax_amount;
+
+            if (
+                $rounding_code == PHP_ROUND_HALF_UP    // TODO: This block of if/elseif statements can be converted to a switch.
+                || $rounding_code == PHP_ROUND_HALF_DOWN
+                || $rounding_code == PHP_ROUND_HALF_EVEN
+                || $rounding_code == PHP_ROUND_HALF_ODD
+            ) {
+                $rounded_sale_tax_amount = round($sale_tax_amount, $decimals, $rounding_code);
+            } elseif ($rounding_code == Migration_TaxAmount::ROUND_UP) {
+                $fig = (int) str_pad('1', $decimals, '0');
+                $rounded_sale_tax_amount = (ceil($sale_tax_amount * $fig) / $fig);
+            } elseif ($rounding_code == Migration_TaxAmount::ROUND_DOWN) {
+                $fig = (int) str_pad('1', $decimals, '0');
+                $rounded_sale_tax_amount = (floor($sale_tax_amount * $fig) / $fig);
+            } elseif ($rounding_code == Migration_TaxAmount::HALF_FIVE) {
+                $rounded_sale_tax_amount = round($sale_tax_amount / 5) * 5;
+            }
+
+            $sales_taxes[$row_number]['sale_tax_amount'] = $rounded_sale_tax_amount;
+        }
     }
 }

app/Database/Migrations/20260506000000_AddShortcutKeys.php

@@ -0,0 +1,46 @@
+<?php
+
+namespace App\Database\Migrations;
+
+use CodeIgniter\Database\Migration;
+
+class AddShortcutKeys extends Migration
+{
+    public function up(): void
+    {
+        $shortcutValues = [
+            ['key' => 'key_cancel', 'value' => '27 | ESC'],
+            ['key' => 'key_items', 'value' => '49 | ALT + 1'],
+            ['key' => 'key_customers', 'value' => '50 | ALT + 2'],
+            ['key' => 'key_suspend', 'value' => '51 | ALT + 3'],
+            ['key' => 'key_suspended', 'value' => '52 | ALT + 4'],
+            ['key' => 'key_amount', 'value' => '53 | ALT + 5'],
+            ['key' => 'key_payment', 'value' => '54 | ALT + 6'],
+            ['key' => 'key_complete', 'value' => '55 | ALT + 7'],
+            ['key' => 'key_finish', 'value' => '56 | ALT + 8'],
+            ['key' => 'key_help', 'value' => '57 | ALT + 9'],
+        ];
+
+        $this->db->table('app_config')->ignore(true)->insertBatch($shortcutValues);
+    }
+
+    public function down(): void
+    {
+        $shortcutKeys = [
+            'key_cancel',
+            'key_items',
+            'key_customers',
+            'key_suspend',
+            'key_suspended',
+            'key_amount',
+            'key_payment',
+            'key_complete',
+            'key_finish',
+            'key_help',
+        ];
+
+        $this->db->table('app_config')
+            ->whereIn('key', $shortcutKeys)
+            ->delete();
+    }
+}

app/Database/Migrations/sqlscripts/initial_schema.sql

@@ -79,10 +79,14 @@ INSERT INTO `ospos_app_config` (`key`, `value`) VALUES
     ('smtp_timeout', '5'),
     ('smtp_crypto', 'ssl'),
     ('receipt_template', 'receipt_default'),
-    ('theme', 'flatly'),
+    ('theme', 'bootstrap'),
     ('statistics', '1'),
     ('language', 'english'),
-    ('language_code', 'en');
+    ('language_code', 'en'),
+    ('rtl_language', '0'),
+    ('color_mode', 'light'),
+    ('config_menu_position', 'start'),
+    ('responsive_design', '1');
 
 
 -- --------------------------------------------------------

app/Helpers/locale_helper.php

@@ -22,7 +22,7 @@ function current_language_code(bool $load_system_language = false): string
         }
     }
 
-    return $config->language_code ?? DEFAULT_LANGUAGE_CODE;
+    return $config['language_code'] ?? DEFAULT_LANGUAGE_CODE;
 }
 
 /**
@@ -43,7 +43,7 @@ function current_language(bool $load_system_language = false): string
         }
     }
 
-    return $config->language ?? DEFAULT_LANGUAGE_CODE;
+    return $config['language'] ?? DEFAULT_LANGUAGE;
 }
 
 /**

app/Helpers/tabular_helper.php

@@ -118,21 +118,21 @@ function get_sale_data_row(object $sale): array
             ? '-'
             : anchor(
                 "$controller/invoice/$sale->sale_id",
-                '<span class="glyphicon glyphicon-list-alt"></span>',
+                '<i class="bi bi-file-text"></i>',
                 ['title' => lang('Sales.show_invoice')]
             );
     }
 
     $row['receipt'] = anchor(
         "$controller/receipt/$sale->sale_id",
-        '<span class="glyphicon glyphicon-usd"></span>',
+        '<i class="bi bi-receipt"></i>',
         ['title' => lang('Sales.show_receipt')]
     );
     $row['edit'] = anchor(
         "$controller/edit/$sale->sale_id",
-        '<span class="glyphicon glyphicon-edit"></span>',
+        '<i class="bi bi-pencil-square"></i>',
         [
-            'class'           => 'modal-dlg print_hide',
+            'class'           => 'modal-launch print_hide',
             'data-btn-delete' => lang('Common.delete'),
             'data-btn-submit' => lang('Common.submit'),
             'title'           => lang(ucfirst($controller) . ".update")
@@ -232,18 +232,18 @@ function get_person_data_row(object $person): array
             ? ''
             : anchor(
                 "Messages/view/$person->person_id",
-                '<span class="glyphicon glyphicon-phone"></span>',
+                '<i class="bi bi-telephone"></i>',
                 [
-                    'class'           => 'modal-dlg',
+                    'class'           => 'modal-launch',
                     'data-btn-submit' => lang('Common.submit'),
                     'title'           => lang('Messages.sms_send')
                 ]
             ),
         'edit'             => anchor(
             "$controller/view/$person->person_id",
-            '<span class="glyphicon glyphicon-edit"></span>',
+            '<i class="bi bi-pencil-square"></i>',
             [
-                'class'           => 'modal-dlg',
+                'class'           => 'modal-launch',
                 'data-btn-submit' => lang('Common.submit'),
                 'title'           => lang(ucfirst($controller) . '.update')    // TODO: String interpolation
             ]
@@ -299,18 +299,18 @@ function get_customer_data_row(object $person, object $stats): array
             ? ''
             : anchor(
                 "Messages/view/$person->person_id",
-                '<span class="glyphicon glyphicon-phone"></span>',
+                '<i class="bi bi-telephone"></i>',
                 [
-                    'class'           => 'modal-dlg',
+                    'class'           => 'modal-launch',
                     'data-btn-submit' => lang('Common.submit'),
                     'title'           => lang('Messages.sms_send')
                 ]
             ),
         'edit'             => anchor(
             "$controller/view/$person->person_id",
-            '<span class="glyphicon glyphicon-edit"></span>',
+            '<i class="bi bi-pencil-square"></i>',
             [
-                'class'           => 'modal-dlg',
+                'class'           => 'modal-launch',
                 'data-btn-submit' => lang('Common.submit'),
                 'title'           => lang(ucfirst($controller) . ".update")
             ]
@@ -369,18 +369,18 @@ function get_supplier_data_row(object $supplier): array
             ? ''
             : anchor(
                 "Messages/view/$supplier->person_id",
-                '<span class="glyphicon glyphicon-phone"></span>',
+                '<i class="bi bi-telephone"></i>',
                 [
-                    'class'           => "modal-dlg",
+                    'class'           => "modal-launch",
                     'data-btn-submit' => lang('Common.submit'),
                     'title'           => lang('Messages.sms_send')
                 ]
             ),
         'edit'             => anchor(
             "$controller/view/$supplier->person_id",
-            '<span class="glyphicon glyphicon-edit"></span>',
+            '<i class="bi bi-pencil-square"></i>',
             [
-                'class'           => "modal-dlg",
+                'class'           => "modal-launch",
                 'data-btn-submit' => lang('Common.submit'),
                 'title'           => lang(ucfirst($controller) . ".update")
             ]
@@ -498,26 +498,26 @@ function get_item_data_row(object $item): array
     $icons = [
         'inventory' => anchor(
             "$controller/inventory/$item->item_id",
-            '<span class="glyphicon glyphicon-pushpin"></span>',
+            '<i class="bi bi-box"></i>',
             [
-                'class'           => 'modal-dlg',
+                'class'           => 'modal-launch',
                 'data-btn-submit' => lang('Common.submit'),
                 'title'           => lang(ucfirst($controller) . ".count")
             ]
         ),
         'stock'     => anchor(
             "$controller/countDetails/$item->item_id",
-            '<span class="glyphicon glyphicon-list-alt"></span>',
+            '<i class="bi bi-info-square"></i>',
             [
-                'class' => 'modal-dlg',
+                'class' => 'modal-launch',
                 'title' => lang(ucfirst($controller) . ".details_count")
             ]
         ),
         'edit'      => anchor(
             "$controller/view/$item->item_id",
-            '<span class="glyphicon glyphicon-edit"></span>',
+            '<i class="bi bi-pencil-square"></i>',
             [
-                'class'           => 'modal-dlg',
+                'class'           => 'modal-launch',
                 'data-btn-submit' => lang('Common.submit'),
                 'title'           => lang(ucfirst($controller) . ".update")
             ]
@@ -561,9 +561,9 @@ function get_giftcard_data_row(object $giftcard): array
         'value'           => to_currency($giftcard->value),
         'edit'            => anchor(
             "$controller/view/$giftcard->giftcard_id",
-            '<span class="glyphicon glyphicon-edit"></span>',
+            '<i class="bi bi-pencil-square"></i>',
             [
-                'class'           => 'modal-dlg',
+                'class'           => 'modal-launch',
                 'data-btn-submit' => lang('Common.submit'),
                 'title'           => lang(ucfirst($controller) . ".update")
             ]
@@ -607,9 +607,9 @@ function get_item_kit_data_row(object $item_kit): array
         'total_unit_price' => to_currency($item_kit->total_unit_price),
         'edit'             => anchor(
             "$controller/view/$item_kit->item_kit_id",
-            '<span class="glyphicon glyphicon-edit"></span>',
+            '<i class="bi bi-pencil-square"></i>',
             [
-                'class'           => 'modal-dlg',
+                'class'           => 'modal-launch',
                 'data-btn-submit' => lang('Common.submit'),
                 'title'           => lang(ucfirst($controller) . ".update")
             ]
@@ -715,9 +715,9 @@ function get_attribute_definition_data_row(object $attribute_row): array
         'definition_flags' => $definition_flags,
         'edit'             => anchor(
             "$controller/view/$attribute_row->definition_id",
-            '<span class="glyphicon glyphicon-edit"></span>',
+            '<i class="bi bi-pencil-square"></i>',
             [
-                'class'           => 'modal-dlg',
+                'class'           => 'modal-launch',
                 'data-btn-submit' => lang('Common.submit'),
                 'title'           => lang(ucfirst($controller) . ".update")
             ]
@@ -755,9 +755,9 @@ function get_expense_category_data_row(object $expense_category): array
         'category_description' => $expense_category->category_description,
         'edit'                 => anchor(
             "$controller/view/$expense_category->expense_category_id",
-            '<span class="glyphicon glyphicon-edit"></span>',
+            '<i class="bi bi-pencil-square"></i>',
             [
-                'class'           => 'modal-dlg',
+                'class'           => 'modal-launch',
                 'data-btn-submit' => lang('Common.submit'),
                 'title'           => lang(ucfirst($controller) . ".update")
             ]
@@ -809,9 +809,9 @@ function get_expenses_data_row(object $expense): array
         'created_by'        => $expense->first_name . ' ' . $expense->last_name,
         'edit'              => anchor(
             "$controller/view/$expense->expense_id",
-            '<span class="glyphicon glyphicon-edit"></span>',
+            '<i class="bi bi-pencil-square"></i>',
             [
-                'class'           => 'modal-dlg',
+                'class'           => 'modal-launch',
                 'data-btn-submit' => lang('Common.submit'),
                 'title'           => lang(ucfirst($controller) . ".update")
             ]
@@ -904,16 +904,16 @@ function get_cash_up_data_row(object $cash_up): array
         'close_date'           => to_datetime(strtotime($cash_up->close_date)),
         'close_employee_id'    => $cash_up->close_first_name . ' ' . $cash_up->close_last_name,
         'closed_amount_cash'   => to_currency($cash_up->closed_amount_cash),
-        'note'                 => $cash_up->note ? '<span class="glyphicon glyphicon-ok"></span>' : '<span class="glyphicon glyphicon-remove"></span>',
+        'note'                 => $cash_up->note ? '<i class="bi bi-check-lg"></i>' : '<i class="bi bi-x-lg"></i>',
         'closed_amount_due'    => to_currency($cash_up->closed_amount_due),
         'closed_amount_card'   => to_currency($cash_up->closed_amount_card),
         'closed_amount_check'  => to_currency($cash_up->closed_amount_check),
         'closed_amount_total'  => to_currency($cash_up->closed_amount_total),
         'edit'                 => anchor(
             "$controller/view/$cash_up->cashup_id",
-            '<span class="glyphicon glyphicon-edit"></span>',
+            '<i class="bi bi-pencil-square"></i>',
             [
-                'class'           => 'modal-dlg',
+                'class'           => 'modal-launch',
                 'data-btn-submit' => lang('Common.submit'),
                 'title'           => lang(ucfirst($controller) . ".update")
             ]

app/Helpers/tax_helper.php

@@ -36,9 +36,9 @@ function get_tax_code_data_row($tax_code_row): array
         'state'         => $tax_code_row->state,
         'edit'          => anchor(
             "$controller_name/view_tax_codes/$tax_code_row->tax_code",
-            '<span class="glyphicon glyphicon-edit"></span>',
+            '<i class="bi bi-pencil-square"></i>',
             [
-                'class'           => 'modal-dlg',
+                'class'           => 'modal-launch',
                 'data-btn-submit' => lang('Common.submit'),
                 'title'           => lang(ucfirst($controller_name) . ".update_tax_codes")
             ]
@@ -74,9 +74,9 @@ function get_tax_categories_data_row($tax_categories_row): array
         'tax_group_sequence' => $tax_categories_row->tax_group_sequence,
         'edit'               => anchor(
             "$controller_name/view/$tax_categories_row->tax_category_id",
-            '<span class="glyphicon glyphicon-edit"></span>',
+            '<i class="bi bi-pencil-square"></i>',
             [
-                'class'           => 'modal-dlg',
+                'class'           => 'modal-launch',
                 'data-btn-submit' => lang('Common.submit'),
                 'title'           => lang(ucfirst($controller_name) . ".update")
             ]
@@ -111,9 +111,9 @@ function get_tax_jurisdictions_data_row($tax_jurisdiction_row): array
         'reporting_authority' => $tax_jurisdiction_row->reporting_authority,
         'edit'                => anchor(
             "$controller_name/view/$tax_jurisdiction_row->jurisdiction_id",
-            '<span class="glyphicon glyphicon-edit"></span>',
+            '<i class="bi bi-pencil-square"></i>',
             [
-                'class'           => 'modal-dlg',
+                'class'           => 'modal-launch',
                 'data-btn-submit' => lang('Common.submit'),
                 'title'           => lang(ucfirst($controller_name) . ".update")
             ]
@@ -156,9 +156,9 @@ function get_tax_rates_data_row($tax_rates_row): array
         'rounding_code_name' => Rounding_mode::get_rounding_code_name($tax_rates_row->tax_rounding_code),
         'edit'               => anchor(
             "$controller_name/view/$tax_rates_row->tax_rate_id",
-            '<span class="glyphicon glyphicon-edit"></span>',
+            '<i class="bi bi-pencil-square"></i>',
             [
-                'class'           => 'modal-dlg',
+                'class'           => 'modal-launch',
                 'data-btn-submit' => lang('Common.submit'),
                 'title'           => lang(ucfirst($controller_name) . ".update")
             ]

app/Language/en/Config.php

@@ -302,6 +302,10 @@ return [
     "suggestions_layout"                        => "Search Suggestions Layout",
     "suggestions_second_column"                 => "Column 2",
     "suggestions_third_column"                  => "Column 3",
+    "shortcuts"                                 => "Shortcuts",
+    "shortcuts_configuration"                   => "Sales Keyboard Shortcut Configuration",
+    "shortcuts_duplicate_bindings"              => "Shortcut bindings must be unique.",
+    "shortcuts_save_error"                       => "Unable to save shortcut settings.",
     "system_conf"                               => "Setup & Conf",
     "system_info"                               => "System Info",
     "table"                                     => "Table",

app/Language/es-ES/Items.php

@@ -26,7 +26,7 @@ return [
     "cost_price_required"                => "Precio al Por Mayor es un campo requerido.",
     "count"                              => "Actualizar Inventario",
     "csv_import_failed"                  => "Falló la importación de Hoja de Cálculo",
-    "csv_import_invalid_location"        => "Ubicación(es) de stock inválida(s) encontrada(s): {0}. Solo ubicaciones de stock válidas son permitidas.",
+    "csv_import_invalid_location"        => "Se encontraron ubicaciones de stock no válidas: {0}. Solo se permiten ubicaciones de stock válidas.",
     "csv_import_nodata_wrongformat"      => "El archivo subido no tiene datos o el formato es incorrecto.",
     "csv_import_partially_failed"        => "Hubo {0} falla(s) en la importación de producto(s) en la(s) línea(s): {1}. Ninguna fila ha sido importada.",
     "csv_import_success"                 => "Se importaron los articulos exitosamente.",

app/Language/ka/Calendar.php

@@ -38,7 +38,7 @@ return [
     "february"  => "",
     "march"     => "",
     "april"     => "",
-    "mayl"      => "",
+    "may"       => "",
     "june"      => "",
     "july"      => "",
     "august"    => "",
@@ -46,4 +46,4 @@ return [
     "october"   => "",
     "november"  => "",
     "december"  => "",
-];
+];

app/Language/lo/Calendar.php

@@ -38,7 +38,7 @@ return [
     "february"  => "",
     "march"     => "",
     "april"     => "",
-    "mayl"      => "",
+    "may"       => "",
     "june"      => "",
     "july"      => "",
     "august"    => "",
@@ -46,4 +46,4 @@ return [
     "october"   => "",
     "november"  => "",
     "december"  => "",
-];
+];

app/Language/ml/Calendar.php

@@ -38,7 +38,7 @@ return [
     "february"  => "ഫെബ്രുവരി",
     "march"     => "മാർച്ച്",
     "april"     => "ഏപ്രിൽ",
-    "mayl"      => "മേയ്",
+    "may"       => "മേയ്",
     "june"      => "ജൂൺ",
     "july"      => "ജൂലൈ",
     "august"    => "ആഗസ്റ്റ്",
@@ -46,4 +46,4 @@ return [
     "october"   => "ഒക്ടോബർ",
     "november"  => "നവംബർ",
     "december"  => "ഡിസംബർ",
-];
+];

app/Language/nb/Calendar.php

@@ -38,7 +38,7 @@ return [
     "february"  => "Februar",
     "march"     => "Mars",
     "april"     => "April",
-    "mayl"      => "Mai",
+    "may"       => "Mai",
     "june"      => "Juni",
     "july"      => "Juli",
     "august"    => "August",
@@ -46,4 +46,4 @@ return [
     "october"   => "Oktober",
     "november"  => "November",
     "december"  => "Desember",
-];
+];

app/Language/th/Bootstrap_tables.php

@@ -1,12 +1,12 @@
 <?php
 
 return [
-    "all"                  => "ทั้งหมด",
-    "columns"              => "คอลัมน์",
-    "hide_show_pagination" => "ซ่อน/แสดง รายการหน้า",
-    "loading"              => "กำลังดำเนินการ รอสักครู่",
-    "page_from_to"         => "แสดง {0} ถึง {1} จาก {2} รายการ",
-    "refresh"              => "Refresh ข้อมูล",
-    "rows_per_page"        => "{0} รายการ/หน้า",
-    "toggle"               => "ซ่อน/แสดง",
+    'all' => "ทั้งหมด",
+    'columns' => "คอลัมน์",
+    'hide_show_pagination' => "ซ่อน/แสดง รายการหน้า",
+    'loading' => "กำลังดำเนินการ รอสักครู่ ...",
+    'page_from_to' => "แสดง {0} ถึง {1} จาก {2} รายการ",
+    'refresh' => "Refresh ข้อมูล",
+    'rows_per_page' => "{0} รายการ/หน้า",
+    'toggle' => "ซ่อน/แสดง",
 ];

app/Language/th/Login.php

@@ -9,7 +9,9 @@ return [
     "login"                         => "ลงชื่อเข้าใช้",
     "logout"                        => "ออกจากระบบ",
     "migration_needed"              => "การย้ายฐานข้อมูลไปยัง {0} จะเริ่มต้นหลังจากเข้าสู่ระบบ",
-    "migration_required"            => "",
+    "migration_required" => "จําเป็นต้องมีการปรับปรุงฐานข้อมูล",
+    "migration_auth_message" => "ผู้ดูแลระบบจำเป็นต้องมีสิทธิ์ในการปรับปรุงฐานข้อมูลเวอร์ชั่น {0} กรุณาเข้าระบบเพื่อดำเนินการต่อ",
+    "migration_complete_redirect" => "ทำการปรับปรุงฐานข้อมูลเรียบร้อย กำลังดำเนินการไปหน้าเข้าสู่ระบบ ...",
     "migration_auth_message"        => "",
     "migration_initializing"        => "",
     "migration_running"             => "",
@@ -17,7 +19,6 @@ return [
     "migration_complete_login"      => "",
     "migration_failed"              => "",
     "migration_error_connection"    => "",
-    "migration_complete_redirect"   => "",
     "password"                      => "รหัสผ่าน",
     "required_username"             => "จำเป็นต้องระบุชื่อผู้ใช้งาน",
     "username"                      => "ชื่อผู้ใช้",

app/Language/th/Sales.php

@@ -1,232 +1,232 @@
 <?php
 
 return [
-    "customers_available_points"       => "คะแนนที่มี",
-    "rewards_package"                  => "คะแนนสะสม",
-    "rewards_remaining_balance"        => "คะแนนสะสมคงเหลือ ",
-    "account_number"                   => "บัญชี #",
-    "add_payment"                      => "เพิ่มบิล",
-    "amount_due"                       => "ยอดค้างชำระ",
-    "amount_tendered"                  => "ชำระเข้ามา",
-    "authorized_signature"             => "ลายเซ็นผู้มีอำนาจ",
-    "cancel_sale"                      => "ยกเลิกการขาย",
-    "cash"                             => "เงินสด",
-    "cash_1"                           => "",
-    "cash_2"                           => "",
-    "cash_3"                           => "",
-    "cash_4"                           => "",
-    "cash_adjustment"                  => "การปรับเงินสดขาย",
-    "cash_deposit"                     => "ฝากเงินสด",
-    "cash_filter"                      => "เงินสด",
-    "change_due"                       => "เงินทอน",
-    "change_price"                     => "เปลี่ยนราคาขาย",
-    "check"                            => "โอนเงิน/พร้อมเพย์/เช็ค",
-    "check_balance"                    => "เช็คยอดคงเหลือ",
-    "check_filter"                     => "ตรวจสอบ",
-    "close"                            => "",
-    "comment"                          => "หมายเหตุ",
-    "comments"                         => "หมายเหตุ",
-    "company_name"                     => "",
-    "complete"                         => "",
-    "complete_sale"                    => "จบการขาย",
-    "confirm_cancel_sale"              => "แน่ใจหรือไม่ที่จะล้างการขายนี้? ทุกรายการจะถูกลบทั้งหมด",
-    "confirm_delete"                   => "โปรดยืนยันการลบรายการขายที่เลือกไว้ ?",
-    "confirm_restore"                  => "คุณแน่ใจหรือไม่ว่าต้องการยกเลิกการขายที่เลือกไว้?",
-    "credit"                           => "เครดิตการ์ด",
-    "credit_deposit"                   => "เงินฝากเครดิต",
-    "credit_filter"                    => "บัตรเครติด",
-    "current_table"                    => "",
-    "customer"                         => "ลูกค้า",
-    "customer_address"                 => "Customer Address",
-    "customer_discount"                => "ส่วนลด",
-    "customer_email"                   => "Customer Email",
-    "customer_location"                => "Customer Location",
-    "customer_mailchimp_status"        => "สถานะของระบบส่งเมล์เมล์ชิม",
-    "customer_optional"                => "(ต้องระบุวันที่ชำระเงิน)",
-    "customer_required"                => "(ต้องระบุ)",
-    "customer_total"                   => "Total",
-    "customer_total_spent"             => "",
-    "daily_sales"                      => "",
-    "date"                             => "วันที่ขาย",
-    "date_range"                       => "ระหว่างวันที่",
-    "date_required"                    => "กรุณากรอกวันที่ให้ถูกต้อง",
-    "date_type"                        => "กรุณากรอกข้อมูลในช่องวันที่",
-    "debit"                            => "บัตรประชารัฐ/เดบิตการ์ด",
-    "debit_filter"                     => "",
-    "delete"                           => "อนุญาตให้ลบ",
-    "delete_confirmation"              => "แน่ใจหรือไม่ที่จะลบรายการขายนี้, ลบแล้วไม่สามารถเรียกกลับคืนใด้",
-    "delete_entire_sale"               => "ลบการขายทั้งหมด",
-    "delete_successful"                => "คุณลบการขายสำเร็จ",
-    "delete_unsuccessful"              => "คุณลบการขายไม่สำเร็จ",
-    "description_abbrv"                => "รายละเอียด",
-    "discard"                          => "ยกเลิก",
-    "discard_quote"                    => "",
-    "discount"                         => "ส่วนลด %",
-    "discount_included"                => "% ส่วนลด",
-    "discount_short"                   => "%",
-    "due"                              => "วันครบกำหนด",
-    "due_filter"                       => "วันที่ครบกำหนด",
-    "edit"                             => "แก้ไข",
-    "edit_item"                        => "แก้ไขสินค้า",
-    "edit_sale"                        => "แก้ไขการขาย",
-    "email_receipt"                    => "อีเมลบิล",
-    "employee"                         => "พนักงาน",
-    "entry"                            => "การนำเข้า",
-    "error_editing_item"               => "แก้ไขสินค้าล้มเหลว",
-    "negative_price_invalid"           => "",
-    "negative_quantity_invalid"        => "",
-    "negative_discount_invalid"        => "",
-    "discount_percent_exceeds_100"     => "",
-    "discount_exceeds_item_total"      => "",
-    "negative_total_invalid"           => "",
-    "find_or_scan_item"                => "ค้นหาสินค้า",
-    "find_or_scan_item_or_receipt"     => "ค้นหา หรือ แสกนรายการ หรือ ใบเสร็จ",
-    "giftcard"                         => "บัตรของขวัญ",
-    "giftcard_balance"                 => "ยอดคงเหลือบัตรของขวัญ",
-    "giftcard_filter"                  => "",
-    "giftcard_number"                  => "เลขที่บัตรของขวัญ",
-    "group_by_category"                => "กลุ่มตามหมวดหมู่",
-    "group_by_type"                    => "กลุ่มตามประเภท",
-    "hsn"                              => "HSN",
-    "id"                               => "เลขที่ขาย",
-    "include_prices"                   => "รวมในราคา?",
-    "invoice"                          => "ใบแจ้งหนี้",
-    "invoice_confirm"                  => "ใบแจ้งหนี้นี้จะถูกส่งไปที่",
-    "invoice_enable"                   => "เลขที่ใบแจ้งหนี้",
-    "invoice_filter"                   => "ใบแจ้งหนี้",
-    "invoice_no_email"                 => "ลูกค้ารายนี้ไม่มีที่อยู่อีเมล",
-    "invoice_number"                   => "เลขใบแจ้งหนี้ #",
-    "invoice_number_duplicate"         => "ใบแจ้งหนี้หมายเลข {0} จะต้องไม่ซ้ำกัน",
-    "invoice_sent"                     => "ส่งใบแจ้งหนี้ไปที่",
-    "invoice_total"                    => "ยอดรวมในใบแจ้งหนี้",
-    "invoice_type_custom_invoice"      => "ใบแจ้งหนี้ที่กำหนดเอง (custom_invoice.php)",
-    "invoice_type_custom_tax_invoice"  => "ใบกำกับภาษีที่กำหนดเอง (custom_tax_invoice.php)",
-    "invoice_type_invoice"             => "ใบแจ้งหนี้ (invoice.php)",
-    "invoice_type_tax_invoice"         => "ใบกำกับภาษี (tax_invoice.php)",
-    "invoice_unsent"                   => "ไม่สามารถส่งใบแจ้งหนี้ถึง",
-    "invoice_update"                   => "คำนวณใหม่",
-    "item_insufficient_of_stock"       => "จำนวนสินค้าไม่เพียงพอ",
-    "item_name"                        => "ชื่อสินค้า",
-    "item_number"                      => "สินค้า #",
-    "item_out_of_stock"                => "สินค้าจำหน่ายหมด",
-    "key_browser"                      => "ความช่วยเหลือ",
-    "key_cancel"                       => "ยกเลิกใบเสนอราคา/ใบแจ้งหนี้ /ใบการขาย นี้",
-    "key_customer_search"              => "ค้นหาลูกค้า",
-    "key_finish_quote"                 => "จบใบเสนอราคา/ใบแจ้งหนี้โดยไม่ต้องชำระเงิน",
-    "key_finish_sale"                  => "เพิ่มการชำระเงินและใบแจ้งหนี้ /ใบรายการขาย",
-    "key_full"                         => "เปิดแบบเต็มหน้าจอ",
-    "key_function"                     => "ฟังก์ชั่น",
-    "key_help"                         => "คำสั่งลัดงานขาย",
-    "key_help_modal"                   => "เปิดหน้าต่างคำสั่งลัดงานขาย",
-    "key_in"                           => "ขยายเข้า",
-    "key_item_search"                  => "ค้นหารายการขาย",
-    "key_out"                          => "ขยายออก",
-    "key_payment"                      => "เพิ่มการชำระเงิน",
-    "key_print"                        => "พิมพ์หน้านี้",
-    "key_restore"                      => "คืนการแสดงผลแบบดั้งเดิม/ขยาย",
-    "key_search"                       => "ค้นหาตารางรายงาน",
-    "key_suspend"                      => "พักรายการขายปัจจุบัน",
-    "key_suspended"                    => "แสดงรายการขายที่พักไว้",
-    "key_system"                       => "ทางลัดระบบ",
-    "key_tendered"                     => "แก้ไขจำนวนเงินรับมา",
-    "key_title"                        => "ทางลัดคียบอร์ดงานขาย",
-    "mc"                               => "",
-    "mode"                             => "รูปแบบการลงทะเบียน",
-    "must_enter_numeric"               => "จำนวนที่ถุกประมูลต้องใส่ข้อมุลที่เปนตัวเลข",
-    "must_enter_numeric_giftcard"      => "เลขที่บัตรของขวัญ ต้องใส่ตัวเลขเท่านั้น",
-    "new_customer"                     => "ลูกค้าใหม่",
-    "new_item"                         => "สินค้าใหม่",
-    "no_description"                   => "ไม่ระบุรายละเอียด",
-    "no_filter"                        => "ทั้งหมด",
-    "no_items_in_cart"                 => "ไม่พบสินค้าในตระกร้า",
-    "no_sales_to_display"              => "ไม่มีการขายที่จะแสดง",
-    "none_selected"                    => "คุณยังไม่ได้เลือกการขายที่จะลบ",
-    "nontaxed_ind"                     => " . ",
-    "not_authorized"                   => "การกระทำนี้ไม่ได้รับอนุญาต",
-    "one_or_multiple"                  => "การขาย",
-    "payment"                          => "รูปแบบชำระเงิน",
-    "payment_amount"                   => "จำนวน",
-    "payment_not_cover_total"          => "จำนวนเงินที่ชำระต้องมากกว่าหรือเท่ากับยอดรวม",
-    "payment_type"                     => "ชำระโดย",
-    "payments"                         => "",
-    "payments_total"                   => "ยอดชำระแล้ว",
-    "price"                            => "ราคา",
-    "print_after_sale"                 => "พิมพ์บิลหลังการขาย",
-    "quantity"                         => "จำนวน",
-    "quantity_less_than_reorder_level" => "คำเตือน ถ้าจำนวนของไม่เพียงพอกับความต้องการหรือไม่ตรงกับยอดในบันชี ก็สามารถทำการขายได้ แต่ต้องเชคปริมานสินค้าคงคลัง",
-    "quantity_less_than_zero"          => "คำเตือน: ถ้าจำนวนของไม่เพียงพอกับความต้องการหรือไม่ตรงกับยอดในบัญชี ก็สามารถทำการขายได้ แต่ต้องตรวจสอบปริมาญสินค้าคงคลังก่อน",
-    "quantity_of_items"                => "ปริมาณของ {0} รายการ",
-    "quote"                            => "ใบเสนอราคา",
-    "quote_number"                     => "หมายเลขอ้างอิง",
-    "quote_number_duplicate"           => "หมายเลขอ้างอิงต้องไม่ซ้ำกัน",
-    "quote_sent"                       => "ส่งการอ้างอิงถึง",
-    "quote_unsent"                     => "ส่งการอ้างอิงถึงผิดพลาด",
-    "receipt"                          => "บิลขาย",
-    "receipt_no_email"                 => "ลูกค้านี้ไม่มีที่อยู่อีเมล์",
-    "receipt_number"                   => "จุดขาย#",
-    "receipt_sent"                     => "ส่งใบเสร็จไปที่",
-    "receipt_unsent"                   => "ไม่สามารถส่งใบเสร็จไปที่",
-    "refund"                           => "ประเภทการยกเลิกการขาย",
-    "register"                         => "ลงทะเบียนขาย",
-    "remove_customer"                  => "ลบลูกค้า",
-    "remove_discount"                  => "",
-    "return"                           => "คืน",
-    "rewards"                          => "คะแนนสะสม",
-    "rewards_balance"                  => "คะแนนสะสมคงเหลือ",
-    "sale"                             => "ขาย",
-    "sale_by_invoice"                  => "การขายโดยใบแจ้งหนี้",
-    "sale_for_customer"                => "ลูกค้า:",
-    "sale_time"                        => "เวลา",
-    "sales_tax"                        => "ภาษีการขาย",
-    "sales_total"                      => "",
-    "select_customer"                  => "เลือกลูกค้า (Optional)",
-    "send_invoice"                     => "ส่งใบแจ้งหนี้",
-    "send_quote"                       => "ส่งใบเสนอราคา",
-    "send_receipt"                     => "ส่งใบเสร็จ",
-    "send_work_order"                  => "ส่งคำสั่งงาน",
-    "serial"                           => "หมายเลขซีเรียล",
-    "service_charge"                   => "",
-    "show_due"                         => "",
-    "show_invoice"                     => "ใบแจ้งหนี้",
-    "show_receipt"                     => "ใบเสร็จ",
-    "start_typing_customer_name"       => "เริ่มต้นพิมพ์ชื่อลูกค้า...",
-    "start_typing_item_name"           => "เริ่มต้นพิมพ์ชื่อสินค้า หรือ สแกนบาร์โค๊ด...",
-    "stock"                            => "คลังสินค้า",
-    "stock_location"                   => "ที่เก็บ",
-    "sub_total"                        => "ยอดรวมย่อย",
-    "successfully_deleted"             => "ลบการขายสมยูรณ์",
-    "successfully_restored"            => "คุณกู้คืนสำเร็จแล้ว",
-    "successfully_suspended_sale"      => "การขายของคุณถูกระงับเรียบร้อย",
-    "successfully_updated"             => "อัพเดทการขายสมบูรณ์",
-    "suspend_sale"                     => "พักรายการ",
-    "suspended_doc_id"                 => "รหัสเอกสาร",
-    "suspended_sale_id"                => "รหัสการขายที่ถูกพัก",
-    "suspended_sales"                  => "การขายที่พักไว้",
-    "table"                            => "โต๊ะ",
-    "takings"                          => "การขายประจำวัน",
-    "tax"                              => "ภาษี",
-    "tax_id"                           => "รหัสภาษี",
-    "tax_invoice"                      => "ใบกำกับภาษี",
-    "tax_percent"                      => "ภาษี %",
-    "taxed_ind"                        => "ภ",
-    "total"                            => "ยอดรวม",
-    "total_tax_exclusive"              => "ยอดไม่รวมภาษี",
-    "transaction_failed"               => "การดำเนินการขายล้มเหลว",
-    "unable_to_add_item"               => "เพิ่มรายการไปยังการขายล้มเหลว",
-    "unsuccessfully_deleted"           => "ลบการขายไม่สำเร็จ",
-    "unsuccessfully_restored"          => "การคืนค่ารายการขายล้มเหลว",
-    "unsuccessfully_suspended_sale"    => "การขายของคุณถูกระงับเรียบร้อย",
-    "unsuccessfully_updated"           => "อัพเดทการขายไม่สมบูรณ์",
-    "unsuspend"                        => "ยกเลิกการระงับ",
-    "unsuspend_and_delete"             => "ยกเลิกการระงับ และ ลบ",
-    "update"                           => "แก้ไข",
-    "upi"                              => "ยูพีไอ",
-    "visa"                             => "",
-    "wholesale"                        => "",
-    "work_order"                       => "คำสั่งงาน",
-    "work_order_number"                => "หมายเลขคำสั่งงาน",
-    "work_order_number_duplicate"      => "หมายเลขคำสั่งงานต้องไม่ซ้ำกัน",
-    "work_order_sent"                  => "คำสั่งงานส่งถึง",
-    "work_order_unsent"                => "ส่งคำสั่งงานล้มเหลว",
-    "selected_customer"                => "ลูกค้าที่เลือก",
+    'customers_available_points' => "คะแนนที่มี",
+    'rewards_package' => "คะแนนสะสม",
+    'rewards_remaining_balance' => "คะแนนสะสมคงเหลือ ",
+    'account_number' => "บัญชี #",
+    'add_payment' => "เพิ่มบิล",
+    'amount_due' => "ยอดค้างชำระ",
+    'amount_tendered' => "ชำระเข้ามา",
+    'authorized_signature' => "ลายเซ็นผู้มีอำนาจ",
+    'cancel_sale' => "ยกเลิกการขาย",
+    'cash' => "เงินสด",
+    'cash_1' => "",
+    'cash_2' => "",
+    'cash_3' => "",
+    'cash_4' => "",
+    'cash_adjustment' => "การปรับเงินสดขาย",
+    'cash_deposit' => "ฝากเงินสด",
+    'cash_filter' => "เงินสด",
+    'change_due' => "เงินทอน",
+    'change_price' => "เปลี่ยนราคาขาย",
+    'check' => "โอนเงิน/พร้อมเพย์/เช็ค",
+    'check_balance' => "เช็คยอดคงเหลือ",
+    'check_filter' => "ตรวจสอบ",
+    'close' => "",
+    'comment' => "หมายเหตุ",
+    'comments' => "หมายเหตุ",
+    'company_name' => "",
+    'complete' => "",
+    'complete_sale' => "จบการขาย",
+    'confirm_cancel_sale' => "แน่ใจหรือไม่ที่จะล้างการขายนี้? ทุกรายการจะถูกลบทั้งหมด",
+    'confirm_delete' => "โปรดยืนยันการลบรายการขายที่เลือกไว้ ?",
+    'confirm_restore' => "คุณแน่ใจหรือไม่ว่าต้องการยกเลิกการขายที่เลือกไว้?",
+    'credit' => "เครดิตการ์ด",
+    'credit_deposit' => "เงินฝากเครดิต",
+    'credit_filter' => "บัตรเครติด",
+    'current_table' => "",
+    'customer' => "ลูกค้า",
+    'customer_address' => "Customer Address",
+    'customer_discount' => "ส่วนลด",
+    'customer_email' => "Customer Email",
+    'customer_location' => "Customer Location",
+    'customer_mailchimp_status' => "สถานะของระบบส่งเมล์เมล์ชิม",
+    'customer_optional' => "(ต้องระบุวันที่ชำระเงิน)",
+    'customer_required' => "(ต้องระบุ)",
+    'customer_total' => "Total",
+    'customer_total_spent' => "",
+    'daily_sales' => "",
+    'date' => "วันที่ขาย",
+    'date_range' => "ระหว่างวันที่",
+    'date_required' => "กรุณากรอกวันที่ให้ถูกต้อง",
+    'date_type' => "กรุณากรอกข้อมูลในช่องวันที่",
+    'debit' => "บัตรประชารัฐ/เดบิตการ์ด",
+    'debit_filter' => "",
+    'delete' => "อนุญาตให้ลบ",
+    'delete_confirmation' => "แน่ใจหรือไม่ที่จะลบรายการขายนี้, ลบแล้วไม่สามารถเรียกกลับคืนใด้",
+    'delete_entire_sale' => "ลบการขายทั้งหมด",
+    'delete_successful' => "คุณลบการขายสำเร็จ",
+    'delete_unsuccessful' => "คุณลบการขายไม่สำเร็จ",
+    'description_abbrv' => "รายละเอียด",
+    'discard' => "ยกเลิก",
+    'discard_quote' => "",
+    'discount' => "ส่วนลด %",
+    'discount_included' => "% ส่วนลด",
+    'discount_short' => "%",
+    'due' => "วันครบกำหนด",
+    'due_filter' => "วันที่ครบกำหนด",
+    'edit' => "แก้ไข",
+    'edit_item' => "แก้ไขสินค้า",
+    'edit_sale' => "แก้ไขการขาย",
+    'email_receipt' => "อีเมลบิล",
+    'employee' => "พนักงาน",
+    'entry' => "การนำเข้า",
+    'error_editing_item' => "แก้ไขสินค้าล้มเหลว",
+    'negative_price_invalid' => "ราคาไม่สามารถเป็นค่าติดลบได้",
+    'negative_quantity_invalid' => "จำนวนไม่สามารถเป็นค่าติดลบได้",
+    'negative_discount_invalid' => "ส่วนลดไม่สามารถเป็นค่าติดลบได้",
+    'discount_percent_exceeds_100' => "ส่วนลดเปอร์เซ็นต์มีค่าได้ไม่เกิน 100%",
+    'discount_exceeds_item_total' => "ส่วนลดต้องไม่เกินจำนวนรายการขายทั้งหมด",
+    'negative_total_invalid' => "",
+    'find_or_scan_item' => "ค้นหาสินค้า",
+    'find_or_scan_item_or_receipt' => "ค้นหา หรือ แสกนรายการ หรือ ใบเสร็จ",
+    'giftcard' => "บัตรของขวัญ",
+    'giftcard_balance' => "ยอดคงเหลือบัตรของขวัญ",
+    'giftcard_filter' => "",
+    'giftcard_number' => "เลขที่บัตรของขวัญ",
+    'group_by_category' => "กลุ่มตามหมวดหมู่",
+    'group_by_type' => "กลุ่มตามประเภท",
+    'hsn' => "HSN",
+    'id' => "เลขที่ขาย",
+    'include_prices' => "รวมในราคา?",
+    'invoice' => "ใบแจ้งหนี้",
+    'invoice_confirm' => "ใบแจ้งหนี้นี้จะถูกส่งไปที่",
+    'invoice_enable' => "เลขที่ใบแจ้งหนี้",
+    'invoice_filter' => "ใบแจ้งหนี้",
+    'invoice_no_email' => "ลูกค้ารายนี้ไม่มีที่อยู่อีเมล",
+    'invoice_number' => "เลขใบแจ้งหนี้ #",
+    'invoice_number_duplicate' => "ใบแจ้งหนี้หมายเลข {0} จะต้องไม่ซ้ำกัน",
+    'invoice_sent' => "ส่งใบแจ้งหนี้ไปที่",
+    'invoice_total' => "ยอดรวมในใบแจ้งหนี้",
+    'invoice_type_custom_invoice' => "ใบแจ้งหนี้ที่กำหนดเอง (custom_invoice.php)",
+    'invoice_type_custom_tax_invoice' => "ใบกำกับภาษีที่กำหนดเอง (custom_tax_invoice.php)",
+    'invoice_type_invoice' => "ใบแจ้งหนี้ (invoice.php)",
+    'invoice_type_tax_invoice' => "ใบกำกับภาษี (tax_invoice.php)",
+    'invoice_unsent' => "ไม่สามารถส่งใบแจ้งหนี้ถึง",
+    'invoice_update' => "คำนวณใหม่",
+    'item_insufficient_of_stock' => "จำนวนสินค้าไม่เพียงพอ",
+    'item_name' => "ชื่อสินค้า",
+    'item_number' => "สินค้า #",
+    'item_out_of_stock' => "สินค้าจำหน่ายหมด",
+    'key_browser' => "ความช่วยเหลือ",
+    'key_cancel' => "ยกเลิกใบเสนอราคา/ใบแจ้งหนี้ /ใบการขาย นี้",
+    'key_customer_search' => "ค้นหาลูกค้า",
+    'key_finish_quote' => "จบใบเสนอราคา/ใบแจ้งหนี้โดยไม่ต้องชำระเงิน",
+    'key_finish_sale' => "เพิ่มการชำระเงินและใบแจ้งหนี้ /ใบรายการขาย",
+    'key_full' => "เปิดแบบเต็มหน้าจอ",
+    'key_function' => "ฟังก์ชั่น",
+    'key_help' => "คำสั่งลัดงานขาย",
+    'key_help_modal' => "เปิดหน้าต่างคำสั่งลัดงานขาย",
+    'key_in' => "ขยายเข้า",
+    'key_item_search' => "ค้นหารายการขาย",
+    'key_out' => "ขยายออก",
+    'key_payment' => "เพิ่มการชำระเงิน",
+    'key_print' => "พิมพ์หน้านี้",
+    'key_restore' => "คืนการแสดงผลแบบดั้งเดิม/ขยาย",
+    'key_search' => "ค้นหาตารางรายงาน",
+    'key_suspend' => "พักรายการขายปัจจุบัน",
+    'key_suspended' => "แสดงรายการขายที่พักไว้",
+    'key_system' => "ทางลัดระบบ",
+    'key_tendered' => "แก้ไขจำนวนเงินรับมา",
+    'key_title' => "ทางลัดคียบอร์ดงานขาย",
+    'mc' => "",
+    'mode' => "รูปแบบการลงทะเบียน",
+    'must_enter_numeric' => "จำนวนที่ถุกประมูลต้องใส่ข้อมุลที่เปนตัวเลข",
+    'must_enter_numeric_giftcard' => "เลขที่บัตรของขวัญ ต้องใส่ตัวเลขเท่านั้น",
+    'new_customer' => "ลูกค้าใหม่",
+    'new_item' => "สินค้าใหม่",
+    'no_description' => "ไม่ระบุรายละเอียด",
+    'no_filter' => "ทั้งหมด",
+    'no_items_in_cart' => "ไม่พบสินค้าในตระกร้า",
+    'no_sales_to_display' => "ไม่มีการขายที่จะแสดง",
+    'none_selected' => "คุณยังไม่ได้เลือกการขายที่จะลบ",
+    'nontaxed_ind' => " . ",
+    'not_authorized' => "การกระทำนี้ไม่ได้รับอนุญาต",
+    'one_or_multiple' => "การขาย",
+    'payment' => "รูปแบบชำระเงิน",
+    'payment_amount' => "จำนวน",
+    'payment_not_cover_total' => "จำนวนเงินที่ชำระต้องมากกว่าหรือเท่ากับยอดรวม",
+    'payment_type' => "ชำระโดย",
+    'payments' => "",
+    'payments_total' => "ยอดชำระแล้ว",
+    'price' => "ราคา",
+    'print_after_sale' => "พิมพ์บิลหลังการขาย",
+    'quantity' => "จำนวน",
+    'quantity_less_than_reorder_level' => "คำเตือน ถ้าจำนวนของไม่เพียงพอกับความต้องการหรือไม่ตรงกับยอดในบันชี ก็สามารถทำการขายได้ แต่ต้องเชคปริมานสินค้าคงคลัง",
+    'quantity_less_than_zero' => "คำเตือน: ถ้าจำนวนของไม่เพียงพอกับความต้องการหรือไม่ตรงกับยอดในบัญชี ก็สามารถทำการขายได้ แต่ต้องตรวจสอบปริมาญสินค้าคงคลังก่อน",
+    'quantity_of_items' => "ปริมาณของ {0} รายการ",
+    'quote' => "ใบเสนอราคา",
+    'quote_number' => "หมายเลขอ้างอิง",
+    'quote_number_duplicate' => "หมายเลขอ้างอิงต้องไม่ซ้ำกัน",
+    'quote_sent' => "ส่งการอ้างอิงถึง",
+    'quote_unsent' => "ส่งการอ้างอิงถึงผิดพลาด",
+    'receipt' => "บิลขาย",
+    'receipt_no_email' => "ลูกค้านี้ไม่มีที่อยู่อีเมล์",
+    'receipt_number' => "จุดขาย#",
+    'receipt_sent' => "ส่งใบเสร็จไปที่",
+    'receipt_unsent' => "ไม่สามารถส่งใบเสร็จไปที่",
+    'refund' => "ประเภทการยกเลิกการขาย",
+    'register' => "ลงทะเบียนขาย",
+    'remove_customer' => "ลบลูกค้า",
+    'remove_discount' => "",
+    'return' => "คืน",
+    'rewards' => "คะแนนสะสม",
+    'rewards_balance' => "คะแนนสะสมคงเหลือ",
+    'sale' => "ขาย",
+    'sale_by_invoice' => "การขายโดยใบแจ้งหนี้",
+    'sale_for_customer' => "ลูกค้า:",
+    'sale_time' => "เวลา",
+    'sales_tax' => "ภาษีการขาย",
+    'sales_total' => "",
+    'select_customer' => "เลือกลูกค้า (Optional)",
+    'send_invoice' => "ส่งใบแจ้งหนี้",
+    'send_quote' => "ส่งใบเสนอราคา",
+    'send_receipt' => "ส่งใบเสร็จ",
+    'send_work_order' => "ส่งคำสั่งงาน",
+    'serial' => "หมายเลขซีเรียล",
+    'service_charge' => "",
+    'show_due' => "",
+    'show_invoice' => "ใบแจ้งหนี้",
+    'show_receipt' => "ใบเสร็จ",
+    'start_typing_customer_name' => "เริ่มต้นพิมพ์ชื่อลูกค้า...",
+    'start_typing_item_name' => "เริ่มต้นพิมพ์ชื่อสินค้า หรือ สแกนบาร์โค๊ด...",
+    'stock' => "คลังสินค้า",
+    'stock_location' => "ที่เก็บ",
+    'sub_total' => "ยอดรวมย่อย",
+    'successfully_deleted' => "ลบการขายสมยูรณ์",
+    'successfully_restored' => "คุณกู้คืนสำเร็จแล้ว",
+    'successfully_suspended_sale' => "การขายของคุณถูกระงับเรียบร้อย",
+    'successfully_updated' => "อัพเดทการขายสมบูรณ์",
+    'suspend_sale' => "พักรายการ",
+    'suspended_doc_id' => "รหัสเอกสาร",
+    'suspended_sale_id' => "รหัสการขายที่ถูกพัก",
+    'suspended_sales' => "การขายที่พักไว้",
+    'table' => "โต๊ะ",
+    'takings' => "การขายประจำวัน",
+    'tax' => "ภาษี",
+    'tax_id' => "รหัสภาษี",
+    'tax_invoice' => "ใบกำกับภาษี",
+    'tax_percent' => "ภาษี %",
+    'taxed_ind' => "ภ",
+    'total' => "ยอดรวม",
+    'total_tax_exclusive' => "ยอดไม่รวมภาษี",
+    'transaction_failed' => "การดำเนินการขายล้มเหลว",
+    'unable_to_add_item' => "เพิ่มรายการไปยังการขายล้มเหลว",
+    'unsuccessfully_deleted' => "ลบการขายไม่สำเร็จ",
+    'unsuccessfully_restored' => "การคืนค่ารายการขายล้มเหลว",
+    'unsuccessfully_suspended_sale' => "การขายของคุณถูกระงับเรียบร้อย",
+    'unsuccessfully_updated' => "อัพเดทการขายไม่สมบูรณ์",
+    'unsuspend' => "ยกเลิกการระงับ",
+    'unsuspend_and_delete' => "ยกเลิกการระงับ และ ลบ",
+    'update' => "แก้ไข",
+    'upi' => "ยูพีไอ",
+    'visa' => "",
+    'wholesale' => "",
+    'work_order' => "คำสั่งงาน",
+    'work_order_number' => "หมายเลขคำสั่งงาน",
+    'work_order_number_duplicate' => "หมายเลขคำสั่งงานต้องไม่ซ้ำกัน",
+    'work_order_sent' => "คำสั่งงานส่งถึง",
+    'work_order_unsent' => "ส่งคำสั่งงานล้มเหลว",
+    'selected_customer' => "ลูกค้าที่เลือก",
 ];

app/Libraries/Email_lib.php

@@ -82,4 +82,40 @@ class Email_lib
 
         return $result;
     }
+
+    /**
+     * Gets the mime type of the company logo file.
+     *
+     * @return string Mime type or empty string if logo doesn't exist
+     */
+    public function getLogoMimeType(): string
+    {
+        $logo_path = FCPATH . 'uploads/' . $this->config['company_logo'];
+
+        if (!empty($this->config['company_logo']) && file_exists($logo_path)) {
+            $mimeType = mime_content_type($logo_path);
+            return $mimeType !== false ? $mimeType : '';
+        }
+
+        return '';
+    }
+
+    /**
+     * Builds an img tag for the company logo to use in email templates.
+     *
+     * @return string HTML img tag with base64-encoded logo, or empty string if no logo
+     */
+    public function buildLogoImgTag(): string
+    {
+        $mimeType = $this->getLogoMimeType();
+
+        if ($mimeType === '') {
+            return '';
+        }
+
+        $logo_path = FCPATH . 'uploads/' . $this->config['company_logo'];
+        $logo_data = base64_encode(file_get_contents($logo_path));
+
+        return '<img id="image" src="data:' . $mimeType . ';base64,' . $logo_data . '" alt="company_logo">';
+    }
 }

app/Libraries/MY_Migration.php

@@ -2,7 +2,6 @@
 
 namespace App\Libraries;
 
-use CodeIgniter\Database\Exceptions\DatabaseException;
 use CodeIgniter\Database\MigrationRunner;
 use Config\Database;
 use stdClass;
@@ -44,7 +43,9 @@ class MY_Migration extends MigrationRunner
                 $result = $builder->get()->getRow();
                 return $result ? $result->version : 0;
             }
-        } catch (DatabaseException $e) {
+        } catch (\Exception $e) {
+            // Database not available yet (e.g. fresh install before schema).
+            // Catches mysqli_sql_exception which is not a DatabaseException.
             return 0;
         }
 
@@ -76,8 +77,9 @@ class MY_Migration extends MigrationRunner
                 $result = $builder->get()->getRow();
                 return $result ? $result->version : false;
             }
-        } catch (DatabaseException $e) {
-            // Database doesn't exist yet or connection failed
+        } catch (\Exception $e) {
+            // Database not available yet (e.g. fresh install before schema).
+            // Catches mysqli_sql_exception which is not a DatabaseException.
         }
 
         return false;

app/Libraries/Sale_lib.php

@@ -23,6 +23,19 @@ use ReflectionException;
  */
 class Sale_lib
 {
+    private const KEY_SHORTCUT_DEFAULTS = [
+        'cancel'    => ['value' => '27 | ESC', 'code' => 27, 'label' => 'ESC'],
+        'items'     => ['value' => '49 | ALT + 1', 'code' => 49, 'label' => 'ALT + 1'],
+        'customers' => ['value' => '50 | ALT + 2', 'code' => 50, 'label' => 'ALT + 2'],
+        'suspend'   => ['value' => '51 | ALT + 3', 'code' => 51, 'label' => 'ALT + 3'],
+        'suspended' => ['value' => '52 | ALT + 4', 'code' => 52, 'label' => 'ALT + 4'],
+        'amount'    => ['value' => '53 | ALT + 5', 'code' => 53, 'label' => 'ALT + 5'],
+        'payment'   => ['value' => '54 | ALT + 6', 'code' => 54, 'label' => 'ALT + 6'],
+        'complete'  => ['value' => '55 | ALT + 7', 'code' => 55, 'label' => 'ALT + 7'],
+        'finish'    => ['value' => '56 | ALT + 8', 'code' => 56, 'label' => 'ALT + 8'],
+        'help'      => ['value' => '57 | ALT + 9', 'code' => 57, 'label' => 'ALT + 9'],
+    ];
+
     private Attribute $attribute;
     private Customer $customer;
     private Dinner_table $dinner_table;
@@ -105,6 +118,44 @@ class Sale_lib
         return $invoice_types;
     }
 
+    /**
+     * Returns the available keyboard shortcut choices for the configuration screen.
+     *
+     * @return array<string, string>
+     */
+    public function getKeyShortcutsOptions(): array
+    {
+        $keyShortcuts = [];
+
+        foreach (self::KEY_SHORTCUT_DEFAULTS as $shortcut) {
+            $keyShortcuts[$shortcut['value']] = $shortcut['label'];
+        }
+
+        return $keyShortcuts;
+    }
+
+    /**
+     * Returns parsed shortcut bindings from app_config with sensible defaults.
+     *
+     * @return array<string, array{value:string,code:int,label:string}>
+     */
+    public function getKeyShortcuts(): array
+    {
+        $keyboardShortcuts = [];
+
+        foreach (self::KEY_SHORTCUT_DEFAULTS as $name => $default) {
+            $value = $this->config["key_$name"] ?? $default['value'];
+            $parts = array_map('trim', explode('|', $value, 2));
+            $keyboardShortcuts[$name] = [
+                'value' => $value,
+                'code'  => (int)($parts[0] ?? $default['code']),
+                'label' => $parts[1] ?? $default['label']
+            ];
+        }
+
+        return $keyboardShortcuts;
+    }
+
     public static function isValidInvoiceType(string $invoice_type): bool
     {
         return in_array($invoice_type, self::ALLOWED_INVOICE_TYPES, true);

app/Models/Attribute.php

@@ -472,7 +472,7 @@ class Attribute extends Model
             }
         } elseif ($from_type === DROPDOWN) {
             if (in_array($to_type, [TEXT, CHECKBOX], true)) {
-                if ($to_type === CHECKBOX) {
+                if ($to_type === CHECKBOX) {    // TODO: Duplicated code.
                     $checkbox_attribute_values = $this->checkbox_attribute_values($definition_id);
 
                     $this->db->transStart();

app/Models/Customer.php

@@ -423,7 +423,7 @@ class Customer extends Person
         $builder->orLike('phone_number', $search);
         $builder->orLike('account_number', $search);
         $builder->orLike('company_name', $search);
-        $builder->orLike('CONCAT(first_name, " ", last_name)', $search);
+        $builder->orLike('CONCAT(first_name, " ", last_name)', $search);    // TODO: Duplicated code.
         $builder->groupEnd();
         $builder->where('deleted', 0);
 

app/Models/Item.php

@@ -65,8 +65,10 @@ class Item extends Model
     public function exists(string $item_id, bool $ignore_deleted = false, bool $deleted = false): bool
     {
         $builder = $this->db->table('items');
+        $builder->groupStart();
         $builder->where('item_id', $item_id);
         $builder->orWhere('item_number', $item_id);
+        $builder->groupEnd();
 
         if (!$ignore_deleted) {
             $builder->where('deleted', $deleted);
@@ -389,9 +391,10 @@ class Item extends Model
     public function get_item_id(string $item_number, bool $ignore_deleted = false, bool $deleted = false): bool|int
     {
         $builder = $this->db->table('items');
-        $builder->join('suppliers', 'suppliers.person_id = items.supplier_id', 'left');
+        $builder->groupStart();
         $builder->where('item_number', $item_number);
         $builder->orWhere('item_id', $item_number);
+        $builder->groupEnd();
 
         if (!$ignore_deleted) {
             $builder->where('items.deleted', $deleted);

app/Models/Module.php

@@ -116,7 +116,7 @@ class Module extends Model
     public function get_allowed_office_modules(int $person_id): ResultInterface
     {
         $menus = ['office', 'both'];
-        $builder = $this->db->table('modules');
+        $builder = $this->db->table('modules');    // TODO: Duplicated code
         $builder->join('permissions', 'permissions.permission_id = modules.module_id');
         $builder->join('grants', 'permissions.permission_id = grants.permission_id');
         $builder->where('person_id', $person_id);

app/Models/Reports/Detailed_sales.php

@@ -3,21 +3,32 @@
 namespace App\Models\Reports;
 
 use App\Models\Sale;
-use App\Traits\Models\Reports\SaleTypeFilter;
 
+/**
+ *
+ *
+ * @property sale sale
+ *
+ */
 class Detailed_sales extends Report
 {
-    use SaleTypeFilter;
-
+    /**
+     * @param array $inputs
+     * @return void
+     */
     public function create(array $inputs): void
     {
+        // Create our temp tables to work with the data in our report
         $sale = model(Sale::class);
         $sale->create_temp_table($inputs);
     }
 
+    /**
+     * @return array
+     */
     public function getDataColumns(): array
     {
-        return [
+        return [    // TODO: Duplicated code
             'summary' => [
                 ['id'            => lang('Reports.sale_id')],
                 ['type_code'     => lang('Reports.code_type')],
@@ -108,11 +119,47 @@ class Detailed_sales extends Report
             MAX(payment_type) AS payment_type,
             MAX(comment) AS comment');
 
-        if ($inputs['location_id'] != 'all') {
+        if ($inputs['location_id'] != 'all') {    // TODO: Duplicated code
             $builder->where('item_location', $inputs['location_id']);
         }
 
-        $this->applySaleTypeFilter($builder, $inputs['sale_type'], false);
+        switch ($inputs['sale_type']) {
+            case 'complete':
+                $builder->where('sale_status', COMPLETED);
+                $builder->groupStart();
+                $builder->where('sale_type', SALE_TYPE_POS);
+                $builder->orWhere('sale_type', SALE_TYPE_INVOICE);
+                $builder->orWhere('sale_type', SALE_TYPE_RETURN);
+                $builder->groupEnd();
+                break;
+
+            case 'sales':
+                $builder->where('sale_status', COMPLETED);
+                $builder->groupStart();
+                $builder->where('sale_type', SALE_TYPE_POS);
+                $builder->orWhere('sale_type', SALE_TYPE_INVOICE);
+                $builder->groupEnd();
+                break;
+
+            case 'quotes':
+                $builder->where('sale_status', SUSPENDED);
+                $builder->where('sale_type', SALE_TYPE_QUOTE);
+                break;
+
+            case 'work_orders':
+                $builder->where('sale_status', SUSPENDED);
+                $builder->where('sale_type', SALE_TYPE_WORK_ORDER);
+                break;
+
+            case 'canceled':
+                $builder->where('sale_status', CANCELED);
+                break;
+
+            case 'returns':
+                $builder->where('sale_status', COMPLETED);
+                $builder->where('sale_type', SALE_TYPE_RETURN);
+                break;
+        }
 
         $builder->groupBy('sale_id');
         $builder->orderBy('MAX(sale_time)');
@@ -162,16 +209,56 @@ class Detailed_sales extends Report
         return $data;
     }
 
+    /**
+     * @param array $inputs
+     * @return array
+     */
     public function getSummaryData(array $inputs): array
     {
         $builder = $this->db->table('sales_items_temp');
         $builder->select('SUM(subtotal) AS subtotal, SUM(tax) AS tax, SUM(total) AS total, SUM(cost) AS cost, SUM(profit) AS profit');
 
-        if ($inputs['location_id'] != 'all') {
+        if ($inputs['location_id'] != 'all') {    // TODO: Duplicated code
             $builder->where('item_location', $inputs['location_id']);
         }
 
-        $this->applySaleTypeFilter($builder, $inputs['sale_type'], false);
+        switch ($inputs['sale_type']) {
+            case 'complete':
+                $builder->where('sale_status', COMPLETED);
+                $builder->groupStart();
+                $builder->where('sale_type', SALE_TYPE_POS);
+                $builder->orWhere('sale_type', SALE_TYPE_INVOICE);
+                $builder->orWhere('sale_type', SALE_TYPE_RETURN);
+                $builder->groupEnd();
+                break;
+
+            case 'sales':
+                $builder->where('sale_status', COMPLETED);
+                $builder->groupStart();
+                $builder->where('sale_type', SALE_TYPE_POS);
+                $builder->orWhere('sale_type', SALE_TYPE_INVOICE);
+                $builder->groupEnd();
+                break;
+
+            case 'quotes':
+                $builder->where('sale_status', SUSPENDED);
+                $builder->where('sale_type', SALE_TYPE_QUOTE);
+                break;
+
+            case 'work_orders':
+                $builder->where('sale_status', SUSPENDED);
+                $builder->where('sale_type', SALE_TYPE_WORK_ORDER);
+                break;
+
+            case 'canceled':
+                $builder->where('sale_status', CANCELED);
+                break;
+
+            case 'returns':
+                $builder->where('sale_status', COMPLETED);
+                $builder->where('sale_type', SALE_TYPE_RETURN);
+                break;
+        }
 
         return $builder->get()->getRowArray();
     }

app/Models/Reports/Specific_customer.php

@@ -93,7 +93,7 @@ class Specific_customer extends Report
             MAX(payment_type) AS payment_type,
             MAX(comment) AS comment');
 
-        $builder->where('customer_id', $inputs['customer_id']);
+        $builder->where('customer_id', $inputs['customer_id']);    // TODO: Duplicated code
 
         if ($inputs['payment_type'] == 'invoices') {
             $builder->where('sale_type', SALE_TYPE_INVOICE);
@@ -139,7 +139,7 @@ class Specific_customer extends Report
                 break;
         }
 
-        $builder->groupBy('sale_id');
+        $builder->groupBy('sale_id');    // TODO: Duplicated code
         $builder->orderBy('MAX(sale_time)');
 
         $data = [];

app/Models/Reports/Specific_discount.php

@@ -27,7 +27,7 @@ class Specific_discount extends Report
      * @return array
      */
     public function getDataColumns(): array
-    {
+    {    // TODO: Duplicated code
         return [
             'summary' => [
                 ['id'            => lang('Reports.sale_id')],
@@ -95,7 +95,7 @@ class Specific_discount extends Report
             MAX(payment_type) AS payment_type,
             MAX(comment) AS comment');
 
-        $builder->where('discount >=', $inputs['discount']);
+        $builder->where('discount >=', $inputs['discount']);    // TODO: Duplicated code
         $builder->where('discount_type', $inputs['discount_type']);
 
         switch ($inputs['sale_type']) {
@@ -136,7 +136,7 @@ class Specific_discount extends Report
                 break;
         }
 
-        $builder->groupBy('sale_id');
+        $builder->groupBy('sale_id');    // TODO: Duplicated code
         $builder->orderBy('MAX(sale_time)');
 
         $data = [];
@@ -168,7 +168,7 @@ class Specific_discount extends Report
         $builder = $this->db->table('sales_items_temp');
         $builder->select('SUM(subtotal) AS subtotal, SUM(tax) AS tax, SUM(total) AS total, SUM(cost) AS cost, SUM(profit) AS profit');
 
-        $builder->where('discount >=', $inputs['discount']);
+        $builder->where('discount >=', $inputs['discount']);    // TODO: Duplicated code
         $builder->where('discount_type', $inputs['discount_type']);
 
         // TODO: this needs to be converted to a switch statement

app/Models/Reports/Specific_employee.php

@@ -93,7 +93,7 @@ class Specific_employee extends Report
             MAX(payment_type) AS payment_type,
             MAX(comment) AS comment');
 
-        $builder->where('employee_id', $inputs['employee_id']);
+        $builder->where('employee_id', $inputs['employee_id']);    // TODO: Duplicated code
 
         switch ($inputs['sale_type']) {
             case 'complete':
@@ -164,7 +164,7 @@ class Specific_employee extends Report
     {
         $builder = $this->db->table('sales_items_temp');
         $builder->select('SUM(subtotal) AS subtotal, SUM(tax) AS tax, SUM(total) AS total, SUM(cost) AS cost, SUM(profit) AS profit');
-        $builder->where('employee_id', $inputs['employee_id']);
+        $builder->where('employee_id', $inputs['employee_id']);    // TODO: Duplicated code
 
         // TODO: this needs to be converted to a switch statement
         if ($inputs['sale_type'] == 'complete') {

app/Models/Reports/Specific_supplier.php

@@ -77,7 +77,7 @@ class Specific_supplier extends Report
             MAX(discount_type) AS discount_type,
             MAX(discount) AS discount');
 
-        $builder->where('supplier_id', $inputs['supplier_id']);
+        $builder->where('supplier_id', $inputs['supplier_id']);    // TODO: Duplicated code
 
         switch ($inputs['sale_type']) {
             case 'complete':

app/Models/Reports/Summary_expenses_categories.php

@@ -2,14 +2,14 @@
 
 namespace App\Models\Reports;
 
-use App\Traits\Models\Reports\ReportDateFilter;
 use Config\OSPOS;
 
 class Summary_expenses_categories extends Summary_report
 {
-    use ReportDateFilter;
-
-    protected function _get_data_columns(): array
+    /**
+     * @return array[]
+     */
+    protected function _get_data_columns(): array    // TODO: Hungarian notation
     {
         return [
             ['category_name'    => lang('Reports.expenses_category')],
@@ -19,47 +19,6 @@ class Summary_expenses_categories extends Summary_report
         ];
     }
 
-    public function getData(array $inputs): array
-    {
-        $config = config(OSPOS::class)->settings;
-
-        $builder = $this->db->table('expenses AS expenses');
-        $builder->select('expense_categories.category_name AS category_name, COUNT(expenses.expense_id) AS count, SUM(expenses.amount) AS total_amount, SUM(expenses.tax_amount) AS total_tax_amount');
-        $builder->join('expense_categories AS expense_categories', 'expense_categories.expense_category_id = expenses.expense_category_id', 'LEFT');
-
-        if (empty($config['date_or_time_format'])) {
-            $builder->where('DATE(expenses.date) BETWEEN ' . $this->db->escape($inputs['start_date']) . ' AND ' . $this->db->escape($inputs['end_date']));
-        } else {
-            $builder->where('expenses.date BETWEEN ' . $this->db->escape(rawurldecode($inputs['start_date'])) . ' AND ' . $this->db->escape(rawurldecode($inputs['end_date'])));
-        }
-
-        $builder->where('expenses.deleted', 0);
-
-        $builder->groupBy('expense_categories.category_name');
-        $builder->orderBy('expense_categories.category_name');
-
-        return $builder->get()->getResultArray();
-    }
-
-    public function getSummaryData(array $inputs): array
-    {
-        $config = config(OSPOS::class)->settings;
-
-        $builder = $this->db->table('expenses AS expenses');
-        $builder->select('SUM(expenses.amount) AS expenses_total_amount, SUM(expenses.tax_amount) AS expenses_total_tax_amount');
-
-        if (empty($config['date_or_time_format'])) {
-            $builder->where('DATE(expenses.date) BETWEEN ' . $this->db->escape($inputs['start_date']) . ' AND ' . $this->db->escape($inputs['end_date']));
-        } else {
-            $builder->where('expenses.date BETWEEN ' . $this->db->escape(rawurldecode($inputs['start_date'])) . ' AND ' . $this->db->escape(rawurldecode($inputs['end_date']));
-        }
-
-        $builder->where('expenses.deleted', 0);
-
-        return $builder->get()->getRowArray();
-    }
-}
-
     /**
      * @param array $inputs
      * @return array
@@ -72,7 +31,8 @@ class Summary_expenses_categories extends Summary_report
         $builder->select('expense_categories.category_name AS category_name, COUNT(expenses.expense_id) AS count, SUM(expenses.amount) AS total_amount, SUM(expenses.tax_amount) AS total_tax_amount');
         $builder->join('expense_categories AS expense_categories', 'expense_categories.expense_category_id = expenses.expense_category_id', 'LEFT');
 
-        if (empty($config['date_or_time_format'])) {
+        // TODO: convert this to ternary notation
+        if (empty($config['date_or_time_format'])) {    // TODO: Duplicated code
             $builder->where('DATE(expenses.date) BETWEEN ' . $this->db->escape($inputs['start_date']) . ' AND ' . $this->db->escape($inputs['end_date']));
         } else {
             $builder->where('expenses.date BETWEEN ' . $this->db->escape(rawurldecode($inputs['start_date'])) . ' AND ' . $this->db->escape(rawurldecode($inputs['end_date'])));
@@ -86,6 +46,10 @@ class Summary_expenses_categories extends Summary_report
         return $builder->get()->getResultArray();
     }
 
+    /**
+     * @param array $inputs
+     * @return array
+     */
     public function getSummaryData(array $inputs): array
     {
         $config = config(OSPOS::class)->settings;
@@ -93,7 +57,7 @@ class Summary_expenses_categories extends Summary_report
         $builder = $this->db->table('expenses AS expenses');
         $builder->select('SUM(expenses.amount) AS expenses_total_amount, SUM(expenses.tax_amount) AS expenses_total_tax_amount');
 
-        if (empty($config['date_or_time_format'])) {
+        if (empty($config['date_or_time_format'])) {    // TODO: Duplicated code
             $builder->where('DATE(expenses.date) BETWEEN ' . $this->db->escape($inputs['start_date']) . ' AND ' . $this->db->escape($inputs['end_date']));
         } else {
             $builder->where('expenses.date BETWEEN ' . $this->db->escape(rawurldecode($inputs['start_date'])) . ' AND ' . $this->db->escape(rawurldecode($inputs['end_date'])));

app/Models/Reports/Summary_payments.php

@@ -2,14 +2,14 @@
 
 namespace App\Models\Reports;
 
-use App\Traits\Models\Reports\ReportDateFilter;
 use Config\OSPOS;
 
 class Summary_payments extends Summary_report
 {
-    use ReportDateFilter;
-
-    protected function _get_data_columns(): array
+    /**
+     * @return array[]
+     */
+    protected function _get_data_columns(): array    // TODO: Hungarian notation
     {
         return [
             ['trans_group'    => lang('Reports.trans_group')],
@@ -22,9 +22,13 @@ class Summary_payments extends Summary_report
         ];
     }
 
+    /**
+     * @param array $inputs
+     * @return array
+     */
     public function getData(array $inputs): array
     {
-        $cash_payment = lang('Sales.cash');
+        $cash_payment = lang('Sales.cash');    // TODO: This is never used.  Should it be?
         $config = config(OSPOS::class)->settings;
 
         $separator[] = [
@@ -37,7 +41,14 @@ class Summary_payments extends Summary_report
             'trans_due'      => ''
         ];
 
-        $where = $this->buildDateWhereClause($inputs);
+        $where = '';    // TODO: Duplicated code
+
+        // TODO: this needs to be converted to ternary notation
+        if (empty($config['date_or_time_format'])) {
+            $where .= 'DATE(sale_time) BETWEEN ' . $this->db->escape($inputs['start_date']) . ' AND ' . $this->db->escape($inputs['end_date']);
+        } else {
+            $where .= 'sale_time BETWEEN ' . $this->db->escape(rawurldecode($inputs['start_date'])) . ' AND ' . $this->db->escape(rawurldecode($inputs['end_date']));
+        }
 
         $this->create_summary_payments_temp_tables($where);
 

app/Models/Reports/Summary_report.php

@@ -2,20 +2,25 @@
 
 namespace App\Models\Reports;
 
-use App\Traits\Models\Reports\ReportDateFilter;
-use App\Traits\Models\Reports\SaleTypeFilter;
-use CodeIgniter\Database\BaseBuilder;
 use Config\OSPOS;
+use CodeIgniter\Database\BaseBuilder;
 
 abstract class Summary_report extends Report
 {
-    use ReportDateFilter;
-    use SaleTypeFilter;
-
-    private function __common_select(array $inputs, &$builder): void
+    /**
+     * Private interface implementing the core basic functionality for all reports
+     */
+    private function __common_select(array $inputs, &$builder): void    // TODO: Hungarian notation
     {
         $config = config(OSPOS::class)->settings;
-        $where = $this->buildDateWhereClause($inputs);
+        // TODO: convert to using QueryBuilder. Use App/Models/Reports/Summary_taxes.php getData() as a reference template
+        $where = '';    // TODO: Duplicated code
+
+        if (empty($config['date_or_time_format'])) {
+            $where .= 'DATE(sale_time) BETWEEN ' . $this->db->escape($inputs['start_date']) . ' AND ' . $this->db->escape($inputs['end_date']);
+        } else {
+            $where .= 'sale_time BETWEEN ' . $this->db->escape(rawurldecode($inputs['start_date'])) . ' AND ' . $this->db->escape(rawurldecode($inputs['end_date']));
+        }
 
         $decimals = totals_decimals();
 
@@ -105,16 +110,48 @@ abstract class Summary_report extends Report
     {
         $config = config(OSPOS::class)->settings;
 
-        $this->applyDateFilter($builder, $inputs);
+        // TODO: Probably going to need to rework these since you can't reference $builder without it's instantiation.
+        if (empty($config['date_or_time_format'])) {    // TODO: Duplicated code
+            $builder->where('DATE(sales.sale_time) BETWEEN ' . $this->db->escape($inputs['start_date']) . ' AND ' . $this->db->escape($inputs['end_date']));
+        } else {
+            $builder->where('sales.sale_time BETWEEN ' . $this->db->escape(rawurldecode($inputs['start_date'])) . ' AND ' . $this->db->escape(rawurldecode($inputs['end_date'])));
+        }
 
         if ($inputs['location_id'] != 'all') {
             $builder->where('sales_items.item_location', $inputs['location_id']);
         }
 
-        $this->applySaleTypeFilter($builder, $inputs['sale_type']);
+        if ($inputs['sale_type'] == 'complete') {
+            $builder->where('sales.sale_status', COMPLETED);
+            $builder->groupStart();
+            $builder->where('sales.sale_type', SALE_TYPE_POS);
+            $builder->orWhere('sales.sale_type', SALE_TYPE_INVOICE);
+            $builder->orWhere('sales.sale_type', SALE_TYPE_RETURN);
+            $builder->groupEnd();
+        } elseif ($inputs['sale_type'] == 'sales') {
+            $builder->where('sales.sale_status', COMPLETED);
+            $builder->groupStart();
+            $builder->where('sales.sale_type', SALE_TYPE_POS);
+            $builder->orWhere('sales.sale_type', SALE_TYPE_INVOICE);
+            $builder->groupEnd();
+        } elseif ($inputs['sale_type'] == 'quotes') {
+            $builder->where('sales.sale_status', SUSPENDED);
+            $builder->where('sales.sale_type', SALE_TYPE_QUOTE);
+        } elseif ($inputs['sale_type'] == 'work_orders') {
+            $builder->where('sales.sale_status', SUSPENDED);
+            $builder->where('sales.sale_type', SALE_TYPE_WORK_ORDER);
+        } elseif ($inputs['sale_type'] == 'canceled') {
+            $builder->where('sales.sale_status', CANCELED);
+        } elseif ($inputs['sale_type'] == 'returns') {
+            $builder->where('sales.sale_status', COMPLETED);
+            $builder->where('sales.sale_type', SALE_TYPE_RETURN);
+        }
     }
 
-    abstract protected function _get_data_columns(): array;
+    /**
+     * Protected class interface implemented by derived classes where required
+     */
+    abstract protected function _get_data_columns(): array;    // TODO: hungarian notation
 
     /**
      * @param array $inputs

app/Models/Reports/Summary_sales_taxes.php

@@ -2,13 +2,10 @@
 
 namespace App\Models\Reports;
 
-use App\Traits\Models\Reports\ReportDateFilter;
 use Config\OSPOS;
 
 class Summary_sales_taxes extends Summary_report
 {
-    use ReportDateFilter;
-
     private array $config;
 
     public function __construct()
@@ -17,7 +14,10 @@ class Summary_sales_taxes extends Summary_report
         $this->config = config(OSPOS::class)->settings;
     }
 
-    protected function _get_data_columns(): array
+    /**
+     * @return array[]
+     */
+    protected function _get_data_columns(): array    // TODO: hungarian notation
     {
         return [
             ['reporting_authority' => lang('Reports.authority')],
@@ -28,16 +28,35 @@ class Summary_sales_taxes extends Summary_report
         ];
     }
 
-    protected function _where(array $inputs, object &$builder): void
+    /**
+     * @param array $inputs
+     * @param object $builder
+     * @return void
+     */
+    protected function _where(array $inputs, object &$builder): void    // TODO: hungarian notation
     {
         $builder->where('sales.sale_status', COMPLETED);
-        $this->applyDateFilter($builder, $inputs, 'sales', 'sale_time');
+
+        if (empty($this->config['date_or_time_format'])) {    // TODO: Duplicated code
+            $builder->where('DATE(sales.sale_time) BETWEEN ' . $this->db->escape($inputs['start_date']) . ' AND ' . $this->db->escape($inputs['end_date']));
+        } else {
+            $builder->where('sales.sale_time BETWEEN ' . $this->db->escape(rawurldecode($inputs['start_date'])) . ' AND ' . $this->db->escape(rawurldecode($inputs['end_date'])));
+        }
     }
 
+    /**
+     * @param array $inputs
+     * @return array
+     */
     public function getData(array $inputs): array
     {
         $builder = $this->db->table('sales_taxes');
-        $this->applyDateFilter($builder, $inputs, 'sales_taxes', 'sale_time');
+
+        if (empty($this->config['date_or_time_format'])) {
+            $builder->where('DATE(sale_time) BETWEEN ' . $inputs['start_date'] . ' AND ' . $inputs['end_date']);
+        } else {
+            $builder->where('sale_time BETWEEN ' . $this->db->escape(rawurldecode($inputs['start_date'])) . ' AND ' . $this->db->escape(rawurldecode($inputs['end_date'])));
+        }
 
         $builder->select('reporting_authority, jurisdiction_name, tax_category, tax_rate, SUM(sale_tax_amount) AS tax');
         $builder->join('sales', 'sales_taxes.sale_id = sales.sale_id', 'left');

app/Traits/Controller/Shared.php

@@ -1,130 +0,0 @@
-<?php
-
-namespace App\Traits\Controller;
-
-use Config\OSPOS;
-
-/**
- * Shared trait for common controller functionality
- */
-trait Shared
-{
-    /**
-     * Build supplier info array for views
-     * 
-     * @param object $supplier_info Supplier info object
-     * @param array $data Data array to populate
-     * @return void
-     */
-    protected function buildSupplierInfo(object $supplier_info, array &$data): void
-    {
-        $data['supplier'] = $supplier_info->company_name;
-        $data['first_name'] = $supplier_info->first_name;
-        $data['last_name'] = $supplier_info->last_name;
-        $data['supplier_email'] = $supplier_info->email;
-        $data['supplier_address'] = $supplier_info->address_1;
-        if (!empty($supplier_info->zip) || !empty($supplier_info->city)) {
-            $data['supplier_location'] = $supplier_info->zip . ' ' . $supplier_info->city;
-        } else {
-            $data['supplier_location'] = '';
-        }
-    }
-
-    /**
-     * Get mode label and customer required text based on sale mode
-     * 
-     * @param string $mode The sale mode
-     * @return array{mode_label: string, customer_required: string}
-     */
-    protected function getSaleModeLabel(string $mode): array
-    {
-        return match ($mode) {
-            'sale_invoice' => [
-                'mode_label' => lang('Sales.invoice'),
-                'customer_required' => lang('Sales.customer_required')
-            ],
-            'sale_quote' => [
-                'mode_label' => lang('Sales.quote'),
-                'customer_required' => lang('Sales.customer_required')
-            ],
-            'sale_work_order' => [
-                'mode_label' => lang('Sales.work_order'),
-                'customer_required' => lang('Sales.customer_required')
-            ],
-            'return' => [
-                'mode_label' => lang('Sales.return'),
-                'customer_required' => lang('Sales.customer_optional')
-            ],
-            default => [
-                'mode_label' => lang('Sales.receipt'),
-                'customer_required' => lang('Sales.customer_optional')
-            ]
-        };
-    }
-
-    /**
-     * Build company info string from config
-     * 
-     * @return string
-     */
-    protected function buildCompanyInfo(): string
-    {
-        $config = config(OSPOS::class)->settings;
-        $company_info = implode("\n", [$config['address'], $config['phone']]);
-
-        if (!empty($config['account_number'])) {
-            $company_info .= "\n" . lang('Sales.account_number') . ": " . $config['account_number'];
-        }
-        if (!empty($config['tax_id'])) {
-            $company_info .= "\n" . lang('Sales.tax_id') . ": " . $config['tax_id'];
-        }
-
-        return $company_info;
-    }
-
-    /**
-     * Initialize default tax code data for new entry
-     * 
-     * @return array
-     */
-    protected function initDefaultTaxCodeData(): array
-    {
-        return [
-            'tax_code' => '',
-            'tax_code_name' => '',
-            'tax_code_type' => '0',
-            'city' => '',
-            'state' => '',
-            'tax_rate' => '0.0000',
-            'rate_tax_code' => '',
-            'rate_tax_category_id' => 1,
-            'tax_category' => '',
-            'add_tax_category' => '',
-            'rounding_code' => '0'
-        ];
-    }
-
-    /**
-     * Populate tax code data from existing tax code info
-     * 
-     * @param object $tax_code_info Tax code info object
-     * @param object $tax_rate_info Tax rate info object
-     * @return array
-     */
-    protected function buildTaxCodeData(object $tax_code_info, object $tax_rate_info): array
-    {
-        return [
-            'tax_code' => $tax_code_info->tax_code,
-            'tax_code_name' => $tax_code_info->tax_code_name,
-            'tax_code_type' => $tax_code_info->tax_code_type,
-            'city' => $tax_code_info->city,
-            'state' => $tax_code_info->state,
-            'rate_tax_code' => $tax_code_info->rate_tax_code,
-            'rate_tax_category_id' => $tax_code_info->rate_tax_category_id,
-            'tax_category' => $tax_code_info->tax_category,
-            'add_tax_category' => '',
-            'tax_rate' => $tax_rate_info->tax_rate,
-            'rounding_code' => $tax_rate_info->rounding_code
-        ];
-    }
-}

app/Traits/Database/SalesTaxMigration.php

@@ -1,72 +0,0 @@
-<?php
-
-namespace App\Traits\Database;
-
-trait SalesTaxMigration
-{
-    protected function cleanIdentifier(string $string): string
-    {
-        $string = str_replace(' ', '-', $string);
-        return preg_replace('/[^A-Za-z0-9\-]/', '', $string);
-    }
-
-    protected function applyInvoiceTaxing(array &$salesTaxes): void
-    {
-        if (!empty($salesTaxes)) {
-            $sort = [];
-            foreach ($salesTaxes as $k => $v) {
-                $sort['print_sequence'][$k] = $v['print_sequence'];
-            }
-            array_multisort($sort['print_sequence'], SORT_ASC, $salesTaxes);
-        }
-
-        $decimals = totals_decimals();
-
-        foreach ($salesTaxes as $rowNumber => $salesTax) {
-            $salesTaxes[$rowNumber]['sale_tax_amount'] = $this->getSalesTaxForAmount(
-                $salesTax['sale_tax_basis'],
-                $salesTax['tax_rate'],
-                $salesTax['rounding_code'],
-                $decimals
-            );
-        }
-    }
-
-    protected function roundSalesTaxes(array &$salesTaxes, int $halfUp = 1, int $roundUp = 5, int $roundDown = 6, int $halfFive = 7): void
-    {
-        if (!empty($salesTaxes)) {
-            $sort = [];
-            foreach ($salesTaxes as $k => $v) {
-                $sort['print_sequence'][$k] = $v['print_sequence'];
-            }
-            array_multisort($sort['print_sequence'], SORT_ASC, $salesTaxes);
-        }
-
-        $decimals = totals_decimals();
-
-        foreach ($salesTaxes as $rowNumber => $salesTax) {
-            $saleTaxAmount = (float)$salesTax['sale_tax_amount'];
-            $roundingCode = $salesTax['rounding_code'];
-            $roundedSaleTaxAmount = $saleTaxAmount;
-
-            if (
-                $roundingCode == PHP_ROUND_HALF_UP
-                || $roundingCode == PHP_ROUND_HALF_DOWN
-                || $roundingCode == PHP_ROUND_HALF_EVEN
-                || $roundingCode == PHP_ROUND_HALF_ODD
-            ) {
-                $roundedSaleTaxAmount = round($saleTaxAmount, $decimals, $roundingCode);
-            } elseif ($roundingCode == $roundUp) {
-                $fig = (int) str_pad('1', $decimals, '0');
-                $roundedSaleTaxAmount = (ceil($saleTaxAmount * $fig) / $fig);
-            } elseif ($roundingCode == $roundDown) {
-                $fig = (int) str_pad('1', $decimals, '0');
-                $roundedSaleTaxAmount = (floor($saleTaxAmount * $fig) / $fig);
-            } elseif ($roundingCode == $halfFive) {
-                $roundedSaleTaxAmount = round($saleTaxAmount / 5) * 5;
-            }
-
-            $salesTaxes[$rowNumber]['sale_tax_amount'] = $roundedSaleTaxAmount;
-        }
-    }
-}

app/Traits/Models/Reports/ReportDateFilter.php

@@ -1,30 +0,0 @@
-<?php
-
-namespace App\Traits\Models\Reports;
-
-use CodeIgniter\Database\BaseBuilder;
-use Config\OSPOS;
-
-trait ReportDateFilter
-{
-    protected function buildDateWhereClause(array $inputs, string $dateColumn = 'sale_time'): string
-    {
-        $config = config(OSPOS::class)->settings;
-        
-        if (empty($config['date_or_time_format'])) {
-            return "DATE({$dateColumn}) BETWEEN " . $this->db->escape($inputs['start_date']) . ' AND ' . $this->db->escape($inputs['end_date']);
-        }
-        return "{$dateColumn} BETWEEN " . $this->db->escape(rawurldecode($inputs['start_date'])) . ' AND ' . $this->db->escape(rawurldecode($inputs['end_date']));
-    }
-
-    protected function applyDateFilter(BaseBuilder $builder, array $inputs, string $tablePrefix = 'sales', string $column = 'sale_time'): void
-    {
-        $config = config(OSPOS::class)->settings;
-        
-        if (empty($config['date_or_time_format'])) {
-            $builder->where("DATE({$tablePrefix}.{$column}) BETWEEN " . $this->db->escape($inputs['start_date']) . ' AND ' . $this->db->escape($inputs['end_date']));
-        } else {
-            $builder->where("{$tablePrefix}.{$column} BETWEEN " . $this->db->escape(rawurldecode($inputs['start_date'])) . ' AND ' . $this->db->escape(rawurldecode($inputs['end_date'])));
-        }
-    }
-}

app/Traits/Models/Reports/SaleTypeFilter.php

@@ -1,39 +0,0 @@
-<?php
-
-namespace App\Traits\Models\Reports;
-
-use CodeIgniter\Database\BaseBuilder;
-
-trait SaleTypeFilter
-{
-    protected function applySaleTypeFilter(BaseBuilder $builder, string $saleType, bool $usePrefix = true): void
-    {
-        $prefix = $usePrefix ? 'sales.' : '';
-        
-        if ($saleType === 'complete') {
-            $builder->where("{$prefix}sale_status", COMPLETED);
-            $builder->groupStart();
-            $builder->where("{$prefix}sale_type", SALE_TYPE_POS);
-            $builder->orWhere("{$prefix}sale_type", SALE_TYPE_INVOICE);
-            $builder->orWhere("{$prefix}sale_type", SALE_TYPE_RETURN);
-            $builder->groupEnd();
-        } elseif ($saleType === 'sales') {
-            $builder->where("{$prefix}sale_status", COMPLETED);
-            $builder->groupStart();
-            $builder->where("{$prefix}sale_type", SALE_TYPE_POS);
-            $builder->orWhere("{$prefix}sale_type", SALE_TYPE_INVOICE);
-            $builder->groupEnd();
-        } elseif ($saleType === 'quotes') {
-            $builder->where("{$prefix}sale_status", SUSPENDED);
-            $builder->where("{$prefix}sale_type", SALE_TYPE_QUOTE);
-        } elseif ($saleType === 'work_orders') {
-            $builder->where("{$prefix}sale_status", SUSPENDED);
-            $builder->where("{$prefix}sale_type", SALE_TYPE_WORK_ORDER);
-        } elseif ($saleType === 'canceled') {
-            $builder->where("{$prefix}sale_status", CANCELED);
-        } elseif ($saleType === 'returns') {
-            $builder->where("{$prefix}sale_status", COMPLETED);
-            $builder->where("{$prefix}sale_type", SALE_TYPE_RETURN);
-        }
-    }
-}

app/Views/attributes/form.php

@@ -10,93 +10,75 @@
  */
 ?>
 
-<div id="required_fields_message"><?= lang('Common.fields_required_message') ?></div>
-<ul id="error_message_box" class="error_message_box"></ul>
+<?= form_open("attributes/saveDefinition/$definition_id", ['id' => 'attribute_form']) ?>
 
-<?= form_open("attributes/saveDefinition/$definition_id", ['id' => 'attribute_form', 'class' => 'form-horizontal']) ?>
-    <fieldset id="attribute_basic_info">
+    <ul id="error_message_box" class="alert alert-warning d-none"></ul>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Attributes.definition_name'), 'definition_name', ['class' => 'required control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <?= form_input([
-                    'name'  => 'definition_name',
-                    'id'    => 'definition_name',
-                    'class' => 'form-control input-sm',
-                    'value' => esc($definition_info->definition_name)
-                ]) ?>
-            </div>
+    <label for="definition_name" class="form-label"><?= lang('Attributes.definition_name'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="definition_name-icon"><i class="bi bi-star"></i></span>
+        <input type="text" class="form-control" name="definition_name" id="definition_name" aria-describedby="definition_name-icon" value="<?= esc($definition_info->definition_name); ?>">
+    </div>
+
+    <label for="definition_type" class="form-label"><?= lang('Attributes.definition_type'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="definition_type-icon"><i class="bi bi-list"></i></span>
+        <select class="form-select" name="definition_type" id="definition_type" aria-describedby="definition_type-icon">
+            <?php foreach (DEFINITION_TYPES as $key => $label): ?>
+                <option value="<?= $key ?>" <?= ($key === array_search($definition_info->definition_type, DEFINITION_TYPES)) ? 'selected' : '' ?>>
+                    <?= $label ?>
+                </option>
+            <?php endforeach; ?>
+        </select>
+    </div>
+
+    <label for="definition_group" class="form-label"><?= lang('Attributes.definition_group'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="definition_group-icon"><i class="bi bi-collection"></i></span>
+        <select class="form-select" name="definition_group" id="definition_group" aria-describedby="definition_group-icon" <?= empty($definition_group) ? 'disabled' : '' ?>>
+            <?php foreach ($definition_group as $key => $label): ?>
+                <option value="<?= $key ?>" <?= ($key == $definition_info->definition_fk) ? 'selected' : '' ?>>
+                    <?= $label ?>
+                </option>
+            <?php endforeach; ?>
+        </select>
+    </div>
+
+    <div class="toggle-hide d-none">
+        <label for="definition_flags" class="form-label"><?= lang('Attributes.definition_flags'); ?></label>
+        <div class="input-group mb-3">
+            <span class="input-group-text" id="definition_flags-icon"><i class="bi bi-eyeglasses"></i></span>
+            <select class="form-select" name="definition_flags[]" id="definition_flags" aria-describedby="definition_flags-icon" multiple>
+                <?php foreach ($definition_flags as $key => $label): ?>
+                    <option value="<?= $key ?>" <?= in_array($key, array_keys($selected_definition_flags)) ? 'selected' : '' ?>>
+                        <?= $label ?>
+                    </option>
+                <?php endforeach; ?>
+            </select>
         </div>
+    </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Attributes.definition_type'), 'definition_type', ['class' => 'required control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <?= form_dropdown('definition_type', DEFINITION_TYPES, array_search($definition_info->definition_type, DEFINITION_TYPES), 'id="definition_type" class="form-control"') ?>
-            </div>
+    <div class="toggle-hide d-none">
+        <label for="definition_unit" class="form-label"><?= lang('Attributes.definition_unit'); ?></label>
+        <div class="input-group mb-3">
+            <span class="input-group-text" id="definition_unit-icon"><i class="bi bi-flask"></i></span>
+            <input type="text" class="form-control" name="definition_unit" id="definition_unit" aria-describedby="definition_unit-icon" value="<?= esc($definition_info->definition_unit); ?>">
         </div>
+    </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Attributes.definition_group'), 'definition_group', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <?= form_dropdown(
-                    'definition_group',
-                    $definition_group,
-                    $definition_info->definition_fk,
-                    'id="definition_group" class="form-control" ' . (empty($definition_group) ? 'disabled="disabled"' : '')
-                ) ?>
-            </div>
+    <div class="toggle-hide d-none">
+        <label for="definition_value" class="form-label"><?= lang('Attributes.definition_values'); ?></label>
+        <div class="input-group mb-3">
+            <span class="input-group-text" id="definition_value-icon"><i class="bi bi-list"></i></span>
+            <input type="text" class="form-control" name="definition_value" id="definition_value" aria-describedby="definition_value-icon">
+            <button type="button" class="btn btn-outline-secondary" id="add_attribute_value"><i class="bi bi-plus-circle"></i></button>
         </div>
+    </div>
 
-        <div class="form-group form-group-sm hidden">
-            <?= form_label(lang('Attributes.definition_flags'), 'definition_flags', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <div class="input-group">
-                    <?= form_multiselect('definition_flags[]', $definition_flags, array_keys($selected_definition_flags), [
-                        'id'                        => 'definition_flags',
-                        'class'                     => 'selectpicker show-menu-arrow',
-                        'data-none-selected-text'   => lang('Common.none_selected_text'),
-                        'data-selected-text-format' => 'count > 1',
-                        'data-style'                => 'btn-default btn-sm',
-                        'data-width'                => 'fit'
-                    ]) ?>
-                </div>
-            </div>
-        </div>
+    <div class="toggle-hide d-none">
+        <ul class="list-group" id="definition_list_group"></ul>
+    </div>
 
-        <div class="form-group form-group-sm hidden">
-            <?= form_label(lang('Attributes.definition_unit'), 'definition_units', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <div class="input-group">
-                    <?= form_input([
-                        'name'  => 'definition_unit',
-                        'value' => esc($definition_info->definition_unit),
-                        'class' => 'form-control input-sm',
-                        'id'    => 'definition_unit'
-                    ]) ?>
-                </div>
-            </div>
-        </div>
-
-        <div class="form-group form-group-sm hidden">
-            <?= form_label(lang('Attributes.definition_values'), 'definition_value', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <div class="input-group">
-                    <?= form_input(['name' => 'definition_value', 'class' => 'form-control input-sm', 'id' => 'definition_value']) ?>
-                    <span id="add_attribute_value" class="input-group-addon input-sm btn btn-default">
-                        <span class="glyphicon glyphicon-plus-sign"></span>
-                    </span>
-                </div>
-            </div>
-        </div>
-
-        <div class="form-group form-group-sm hidden">
-            <?= form_label('&nbsp;', 'definition_list_group', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <ul id="definition_list_group" class="list-group"></ul>
-            </div>
-        </div>
-
-    </fieldset>
 <?= form_close() ?>
 
 <script type="text/javascript">
@@ -125,8 +107,8 @@
             if (definition_id == -1) {
                 $('#definition_name').prop("disabled", true);
                 $('#definition_type').prop("disabled", true);
-                $('#definition_group').parents('.form-group').toggleClass("hidden", true);
-                $('#definition_flags').parents('.form-group').toggleClass('hidden', true);
+                $('#definition_group').parents('.toggle-hide').toggleClass("d-none", true);
+                $('#definition_flags').parents('.toggle-hide').toggleClass("d-none", true);
             }
         }
         disable_category_dropdown();
@@ -137,21 +119,23 @@
             var is_no_group = $('#definition_type').val() !== '0';
             var is_category_dropdown = definition_id == -1;
 
-            $('#definition_value, #definition_list_group').parents('.form-group').toggleClass('hidden', is_dropdown);
-            $('#definition_unit').parents('.form-group').toggleClass('hidden', is_decimal);
+            $('#definition_value, #definition_list_group').parents('.toggle-hide').toggleClass('d-none', is_dropdown);
+            $('#definition_unit').parents('.toggle-hide').toggleClass('d-none', is_decimal);
 
             // Appropriately show definition flags if not category_dropdown
             if (definition_id != -1) {
-                $('#definition_flags').parents('.form-group').toggleClass('hidden', !is_no_group);
+                $('#definition_flags').parents('.toggle-hide').toggleClass('d-none', !is_no_group);
             }
         };
 
         $('#definition_type').change(show_hide_fields);
         show_hide_fields();
 
-        $('.selectpicker').each(function() {
-            var $selectpicker = $(this);
-            $.fn.selectpicker.call($selectpicker, $selectpicker.data());
+        new TomSelect('#definition_flags', {
+            plugins: ['checkbox_options', 'remove_button'],
+            placeholder: '<?= lang('Common.none_selected_text') ?>',
+            hidePlaceholder: true,
+            closeAfterSelect: false,
         });
 
         var remove_attribute_value = function() {
@@ -192,7 +176,7 @@
                 }
             }
 
-            $('#definition_list_group').append('<li class="list-group-item">' + DOMPurify.sanitize(value) + '<a href="javascript:void(0);"><span class="glyphicon glyphicon-trash pull-right"></span></a></li>')
+            $('#definition_list_group').append('<li class="list-group-item list-group-item-action d-flex justify-content-between">' + DOMPurify.sanitize(value) + '<a href="javascript:void(0);"><span class="text-danger"><i class="bi bi-trash"></i></span></a></li>')
                 .find(':last-child a').click(remove_attribute_value);
             $('#definition_value').val('');
         };

app/Views/attributes/item.php

@@ -7,96 +7,98 @@
  */
 ?>
 
-<div class="form-group form-group-sm">
-    <?= form_label(lang('Attributes.definition_name'), 'definition_name_label', ['class' => 'control-label col-xs-3']) ?>
-    <div class="col-xs-8">
-        <?= form_dropdown([
-            'name'     => 'definition_name',
-            'options'  => $definition_names,
-            'selected' => -1,
-            'class'    => 'form-control',
-            'id'       => 'definition_name'
-        ]) ?>
-    </div>
+<label for="definition_name" class="form-label"><?= lang('Attributes.definition_name'); ?></label>
+<div class="input-group mb-3">
+    <span class="input-group-text"><i class="bi bi-star"></i></span>
+    <select class="form-select" name="definition_name" id="definition_name">
+        <option value="-1" selected></option>
+        <?php foreach ($definition_names as $key => $value): ?>
+            <option value="<?= $key ?>"><?= $value ?></option>
+        <?php endforeach; ?>
+    </select>
 </div>
 
 <?php foreach ($definition_values as $definition_id => $definition_value) { ?>
 
-    <div class="form-group form-group-sm">
-        <?= form_label(esc($definition_value['definition_name']), esc($definition_value['definition_name']), ['class' => 'control-label col-xs-3']) ?>
-        <div class="col-xs-8">
-            <div class="input-group">
-                <?php
-                echo form_hidden("attribute_ids[$definition_id]", strval($definition_value['attribute_id']));
-                $attribute_value = $definition_value['attribute_value'];
+<span class="attribute_added">
+    <?php
+    $attribute_value = $definition_value['attribute_value'];
 
-                switch ($definition_value['definition_type']) {
-                    case DATE:
-                        $value = (empty($attribute_value) || empty($attribute_value->attribute_date)) ? NOW : strtotime($attribute_value->attribute_date);
-                        echo form_input([
-                            'name'               => "attribute_links[$definition_id]",
-                            'value'              => to_date($value),
-                            'class'              => 'form-control input-sm datetime',
-                            'data-definition-id' => $definition_id,
-                            'readonly'           => 'true'
-                        ]);
-                        break;
-                    case DROPDOWN:
-                        $selected_value = $definition_value['selected_value'];
-                        echo form_dropdown([
-                            'name'               => "attribute_links[$definition_id]",
-                            'options'            => $definition_value['values'],
-                            'selected'           => $selected_value,
-                            'class'              => 'form-control',
-                            'data-definition-id' => $definition_id
-                        ]);
-                        break;
-                    case TEXT:
-                        $value = (empty($attribute_value) || empty($attribute_value->attribute_value)) ? $definition_value['selected_value'] : $attribute_value->attribute_value;
-                        echo form_input([
-                            'name'               => "attribute_links[$definition_id]",
-                            'value'              => esc($value),
-                            'class'              => 'form-control valid_chars',
-                            'data-definition-id' => $definition_id
-                        ]);
-                        break;
-                    case DECIMAL:
-                        $value = (empty($attribute_value) || empty($attribute_value->attribute_decimal)) ? $definition_value['selected_value'] : $attribute_value->attribute_decimal;
-                        echo form_input([
-                            'name'               => "attribute_links[$definition_id]",
-                            'value'              => to_decimals((float)$value),
-                            'class'              => 'form-control valid_chars',
-                            'data-definition-id' => $definition_id
-                        ]);
-                        break;
-                    case CHECKBOX:
-                        $value = (empty($attribute_value) || empty($attribute_value->attribute_value)) ? $definition_value['selected_value'] : $attribute_value->attribute_value;
+    switch ($definition_value['definition_type']) {
 
-                        // Sends 0 if the box is unchecked instead of not sending anything.
-                        echo form_input([
-                            'type'               => 'hidden',
-                            'name'               => "attribute_links[$definition_id]",
-                            'id'                 => "attribute_links[$definition_id]",
-                            'value'              => 0,
-                            'data-definition-id' => $definition_id
-                        ]);
-                        echo form_checkbox([
-                            'name'               => "attribute_links[$definition_id]",
-                            'id'                 => "attribute_links[$definition_id]",
-                            'value'              => 1,
-                            'checked'            => $value == 1,
-                            'class'              => 'checkbox-inline',
-                            'data-definition-id' => $definition_id
-                        ]);
-                        break;
-                }
-                ?>
-                <span class="input-group-addon input-sm btn btn-default remove_attribute_btn">
-                    <span class="glyphicon glyphicon-trash"></span>
-                </span>
+        case DATE:
+            $value = (empty($attribute_value) || empty($attribute_value->attribute_date)) ? NOW : strtotime($attribute_value->attribute_date);
+            ?>
+            <label for="attribute_links[<?= $definition_id ?>]" class="form-label"><?= esc($definition_value['definition_name']) ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text" id="attribute_links[<?= $definition_id ?>]-icon"><i class="bi bi-calendar2"></i></span>
+                <input type="hidden" name="attribute_ids[<?= $definition_id ?>]" value="<?= strval($definition_value['attribute_id']) ?>">
+                <input type="text" class="form-select datetime" name="attribute_links[<?= $definition_id ?>]" id="attribute_links[<?= $definition_id ?>]" aria-describedby="attribute_links[<?= $definition_id ?>]-icon" value="<?= to_date($value) ?>"  data-definition-id="<?= $definition_id ?>" readonly>
+                <button type="button" class="btn btn-outline-danger remove_attribute_btn"><i class="bi bi-trash"></i></button>
             </div>
-        </div>
-    </div>
+            <?php
+            break;
+
+        case DROPDOWN:
+            $selected_value = $definition_value['selected_value'];
+            ?>
+            <label for="attribute_links[<?= $definition_id ?>]" class="form-label"><?= esc($definition_value['definition_name']) ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text" id="attribute_links[<?= $definition_id ?>]-icon"><i class="bi bi-menu-down"></i></span>
+                <input type="hidden" name="attribute_ids[<?= $definition_id ?>]" value="<?= strval($definition_value['attribute_id']) ?>">
+                <select class="form-select" name="attribute_links[<?= $definition_id ?>]" id="attribute_links[<?= $definition_id ?>]" data-definition-id="<?= $definition_id ?>">
+                    <?php foreach ($definition_value['values'] as $key => $val): ?>
+                        <option value="<?= $key ?>" <?= $selected_value == $key ? 'selected' : '' ?>><?= $val ?></option>
+                    <?php endforeach; ?>
+                </select>
+                <button type="button" class="btn btn-outline-danger remove_attribute_btn"><i class="bi bi-trash"></i></button>
+            </div>
+            <?php
+            break;
+
+        case TEXT:
+            $value = (empty($attribute_value) || empty($attribute_value->attribute_value)) ? $definition_value['selected_value'] : $attribute_value->attribute_value;
+            ?>
+            <label for="attribute_links[<?= $definition_id ?>]" class="form-label"><?= esc($definition_value['definition_name']) ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text" id="attribute_links[<?= $definition_id ?>]-icon"><i class="bi bi-type"></i></span>
+                <input type="hidden" name="attribute_ids[<?= $definition_id ?>]" value="<?= strval($definition_value['attribute_id']) ?>">
+                <input type="text" name="attribute_links[<?= $definition_id ?>]" id="attribute_links[<?= $definition_id ?>]" value="<?= esc($value) ?>" class="form-control valid_chars" data-definition-id="<?= $definition_id ?>">
+                <button type="button" class="btn btn-outline-danger remove_attribute_btn"><i class="bi bi-trash"></i></button>
+            </div>
+            <?php
+            break;
+
+        case DECIMAL:
+            $value = (empty($attribute_value) || empty($attribute_value->attribute_decimal)) ? $definition_value['selected_value'] : $attribute_value->attribute_decimal;
+            ?>
+            <label for="attribute_links[<?= $definition_id ?>]" class="form-label"><?= esc($definition_value['definition_name']) ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text" id="attribute_links[<?= $definition_id ?>]-icon"><i class="bi bi-dot"></i></span>
+                <input type="hidden" name="attribute_ids[<?= $definition_id ?>]" value="<?= strval($definition_value['attribute_id']) ?>">
+                <input type="text" name="attribute_links[<?= $definition_id ?>]" id="attribute_links[<?= $definition_id ?>]" value="<?= to_decimals((float)$value) ?>" class="form-control valid_chars" data-definition-id="<?= $definition_id ?>">
+                <button type="button" class="btn btn-outline-danger remove_attribute_btn"><i class="bi bi-trash"></i></button>
+            </div>
+            <?php
+            break;
+
+        case CHECKBOX:
+            $value = (empty($attribute_value) || empty($attribute_value->attribute_value)) ? $definition_value['selected_value'] : $attribute_value->attribute_value;
+            ?>
+            <div class="d-flex justify-content-between">
+                <div class="form-check form-check-inline mb-3">
+                    <input type="hidden" name="attribute_ids[<?= $definition_id ?>]" value="<?= strval($definition_value['attribute_id']) ?>">
+                    <input type="hidden" name="attribute_links_h1[<?= $definition_id ?>]" id="attribute_links_h1<?= $definition_id ?>" value="0" data-definition-id="<?= $definition_id ?>">
+                    <input type="checkbox" class="form-check-input" name="attribute_links[<?= $definition_id ?>]" id="attribute_links[<?= $definition_id ?>]" value="1" <?= $value == 1 ? 'checked' : '' ?> data-definition-id="<?= $definition_id ?>">
+                    <label class="form-check-label" for="attribute_links[<?= $definition_id ?>]"><?= esc($definition_value['definition_name']) ?></label>
+                </div>
+                <button type="button" class="btn btn-outline-danger remove_attribute_btn"><i class="bi bi-trash"></i></button>
+            </div>
+            <?php
+            break;
+    }
+    ?>
+</span>
 
 <?php } ?>
 
@@ -106,7 +108,7 @@
 
         var enable_delete = function() {
             $('.remove_attribute_btn').click(function() {
-                $(this).parents('.form-group').remove();
+                $(this).parents('.attribute_added').remove();
             });
         };
 
@@ -134,13 +136,13 @@
             $("[name*='attribute_links'").each(function() {
                 var definition_id = $(this).data('definition-id');
                 var element = $(this);
-                
+
                 // For checkboxes, use the visible checkbox, not the hidden input
                 if (element.attr('type') === 'hidden' && element.siblings('input[type="checkbox"]').length > 0) {
                     // Skip hidden inputs that have a corresponding checkbox
                     return;
                 }
-                
+
                 // For checkboxes, get the checked state
                 if (element.attr('type') === 'checkbox') {
                     result[definition_id] = element.prop('checked') ? '1' : '0';

app/Views/attributes/manage.php

@@ -8,6 +8,11 @@
 
 <?= view('partial/header') ?>
 
+<?php
+$title_info['config_title'] = 'Attributes';
+echo view('configs/config_header', $title_info);
+?>
+
 <script type="text/javascript">
     $(document).ready(function() {
         <?= view('partial/bootstrap_tables_locale') ?>
@@ -21,16 +26,16 @@
     });
 </script>
 
-<div id="title_bar" class="btn-toolbar print_hide">
-    <button class="btn btn-info btn-sm pull-right modal-dlg" data-btn-submit="<?= lang('Common.submit') ?>" data-href="<?= esc("$controller_name/view") ?>" title="<?= lang(ucfirst($controller_name) . ".new") ?>">
-        <span class="glyphicon glyphicon-star">&nbsp;</span><?= lang(ucfirst($controller_name) . ".new") ?>
+<div class="d-flex gap-2 justify-content-end d-print-none">
+    <button type="button" class="btn btn-primary modal-launch" data-btn-submit="<?= lang('Common.submit') ?>" data-href="<?= esc("$controller_name/view") ?>" title="<?= lang(ucfirst($controller_name) . ".new") ?>">
+        <i class="bi bi-star me-2"></i><?= lang(ucfirst($controller_name) . ".new") ?>
     </button>
 </div>
 
 <div id="toolbar">
-    <div class="pull-left form-inline" role="toolbar">
-        <button id="delete" class="btn btn-default btn-sm print_hide">
-            <span class="glyphicon glyphicon-trash">&nbsp;</span><?= lang('Common.delete') ?>
+    <div class="d-flex gap-2">
+        <button type="button" class="btn btn-secondary d-print-none" id="delete">
+            <i class="bi bi-trash"></i><span class="d-none d-sm-inline ms-2"><?= lang('Common.delete') ?></span>
         </button>
     </div>
 </div>

app/Views/barcodes/barcode_sheet.php

@@ -11,31 +11,34 @@ $barcode_lib = new Barcode_lib();
 
 <!doctype html>
 <html lang="<?= current_language_code() ?>">
-    <head>
-        <meta charset="utf-8">
-        <title><?= lang('Items.generate_barcodes') ?></title>
-        <link rel="stylesheet" href="<?= base_url() ?>css/barcode_font.css">
-        <style>
-            .barcode svg {
-                height: <?= $barcode_config['barcode_height'] ?>px;
-                width: <?= $barcode_config['barcode_width'] ?>px;
-            }
-        </style>
-    </head>
-    <body class=<?= 'font_' . $barcode_lib->get_font_name($barcode_config['barcode_font']) ?> style="font-size: <?= $barcode_config['barcode_font_size'] ?>px;">
-        <table style="border-spacing: <?= $barcode_config['barcode_page_cellspacing'] ?>; width: <?= $barcode_config['barcode_page_width'] ?>%;">
-            <tr>
-                <?php
-                    $count = 0;
-                    foreach ($items as $item) {
-                        if ($count % $barcode_config['barcode_num_in_row'] == 0 && $count != 0) {
-                            echo '</tr><tr>';
-                        }
-                        echo '<td>' . $barcode_lib->display_barcode($item, $barcode_config) . '</td>';
-                        $count++;
+
+<head>
+    <meta charset="utf-8">
+    <title><?= esc(lang('Items.generate_barcodes')) ?></title>
+    <link rel="stylesheet" href="<?= esc(base_url('css/barcode_font.css'), 'url') ?>">
+    <style>
+        .barcode svg {
+            height: <?= (int) $barcode_config['barcode_height'] ?>px;
+            width: <?= (int) $barcode_config['barcode_width'] ?>px;
+        }
+    </style>
+</head>
+
+<body class="<?= esc('font_' . $barcode_lib->get_font_name($barcode_config['barcode_font']), 'attr') ?>" style="font-size: <?= (int) $barcode_config['barcode_font_size'] ?>px;">
+    <table style="border-spacing: <?= (int) $barcode_config['barcode_page_cellspacing'] ?>px; width: <?= (int) $barcode_config['barcode_page_width'] ?>%;">
+        <tr>
+            <?php
+                $count = 0;
+                foreach ($items as $item) {
+                    if ($count % $barcode_config['barcode_num_in_row'] == 0 && $count != 0) {
+                        echo '</tr><tr>';
                     }
-                ?>
-            </tr>
-        </table>
-    </body>
+                    echo '<td>' . $barcode_lib->display_barcode($item, $barcode_config) . '</td>';
+                    $count++;
+                }
+            ?>
+        </tr>
+    </table>
+</body>
+
 </html>

app/Views/cashups/form.php

@@ -23,7 +23,7 @@
             <div class="col-xs-6">
                 <div class="input-group">
                     <span class="input-group-addon input-sm">
-                        <span class="glyphicon glyphicon-calendar"></span>
+                        <i class="bi bi-calendar2-check"></i>
                     </span>
                     <?= form_input([
                         'name'  => 'open_date',
@@ -87,7 +87,7 @@
             <div class="col-xs-6">
                 <div class="input-group">
                     <span class="input-group-addon input-sm">
-                        <span class="glyphicon glyphicon-calendar"></span>
+                        <i class="bi bi-calendar2-x"></i>
                     </span>
                     <?= form_input([
                         'name'  => 'close_date',

app/Views/cashups/manage.php

@@ -12,6 +12,11 @@
 
 <?= view('partial/header') ?>
 
+<?php
+$title_info['config_title'] = 'Cashups';
+echo view('configs/config_header', $title_info);
+?>
+
 <script type="text/javascript">
     $(document).ready(function() {
         // Load the preset datarange picker
@@ -46,29 +51,36 @@
 
 <?= view('partial/print_receipt', ['print_after_sale' => false, 'selected_printer' => 'takings_printer']) ?>
 
-<div id="title_bar" class="print_hide btn-toolbar">
-    <button onclick="printdoc()" class="btn btn-info btn-sm pull-right">
-        <span class="glyphicon glyphicon-print">&nbsp;</span><?= lang('Common.print') ?>
+<div id="title_bar" class="d-flex gap-2 justify-content-end d-print-none">
+    <button type="button" class="btn btn-primary modal-launch" data-btn-submit="<?= lang('Common.submit') ?>" data-href="<?= "$controller_name/view" ?>" title="<?= lang(ucfirst($controller_name) . ".new") ?>">
+        <i class="bi bi-journal-check me-2"></i><?= lang(esc(ucfirst($controller_name)) . '.new')    // TODO: String Interpolation ?>
     </button>
-    <button class="btn btn-info btn-sm pull-right modal-dlg" data-btn-submit="<?= lang('Common.submit') ?>" data-href="<?= "$controller_name/view" ?>" title="<?= lang(ucfirst($controller_name) . ".new") ?>">
-        <span class="glyphicon glyphicon-tags">&nbsp;</span><?= lang(esc(ucfirst($controller_name)) . '.new')    // TODO: String Interpolation ?>
+    <button type="button" class="btn btn-primary" onclick="window.print()" title="<?= lang('Common.print') ?>">
+        <i class="bi bi-printer me-2"></i><?= lang('Common.print') ?>
     </button>
 </div>
 
 <div id="toolbar">
-    <div class="pull-left form-inline" role="toolbar">
-        <button id="delete" class="btn btn-default btn-sm print_hide">
-            <span class="glyphicon glyphicon-trash">&nbsp;</span><?= lang('Common.delete') ?>
+    <div class="d-flex gap-2">
+        <button type="button" id="delete" class="btn btn-secondary d-print-none">
+            <i class="bi bi-trash"></i><span class="d-none d-sm-inline ms-2"><?= lang('Common.delete') ?></span>
         </button>
-        <?= form_input(['name' => 'daterangepicker', 'class' => 'form-control input-sm', 'id' => 'daterangepicker']) ?>
-        <?= form_multiselect('filters[]', $filters, $selected_filters ?? [], [
-            'id'                        => 'filters',
-            'data-none-selected-text'   => lang('Common.none_selected_text'),
-            'class'                     => 'selectpicker show-menu-arrow',
-            'data-selected-text-format' => 'count > 1',
-            'data-style'                => 'btn-default btn-sm',
-            'data-width'                => 'fit'
-        ]) ?>
+
+        <div class="input-group w-auto">
+            <span class="input-group-text" id="daterangepicker-icon"><i class="bi bi-calendar2-range"></i></span>
+            <input type="text" class="form-select" name="daterangepicker" id="daterangepicker" aria-describedby="daterangepicker-icon">
+        </div>
+
+        <div class="input-group w-auto">
+            <span class="input-group-text" id="filters-icon"><i class="bi bi-funnel"></i></span>
+            <select class="form-select" name="filters[]" id="filters" aria-describedby="filters-icon" multiple>
+                <?php foreach ($filters as $key => $label): ?>
+                    <option value="<?= $key ?>" <?= in_array($key, $selected_filters ?? []) ? 'selected' : '' ?>>
+                        <?= esc($label) ?>
+                    </option>
+                <?php endforeach; ?>
+            </select>
+        </div>
     </div>
 </div>
 
@@ -77,3 +89,15 @@
 </div>
 
 <?= view('partial/footer') ?>
+
+<script type="text/javascript">
+    new TomSelect('#filters', {
+        plugins: ['checkbox_options', 'remove_button'],
+        placeholder: '<?= lang('Common.none_selected_text') ?>',
+        hidePlaceholder: true,
+        closeAfterSelect: false,
+        onChange: function() {
+            $('#table').bootstrapTable('refresh');
+        }
+    });
+</script>

app/Views/configs/appearance_config.php

@@ -0,0 +1,124 @@
+<?php
+/**
+ *
+ */
+
+$beta = '<sup><span class="badge bg-secondary">BETA</span></sup>';
+?>
+
+<?= form_open('config/saveAppearance/', ['id' => 'appearance_config_form']) ?>
+
+    <?php
+    $title_info['config_title'] = 'Appearance';
+    echo view('configs/config_header', $title_info);
+    ?>
+
+    <ul id="error_message_box" class="appearance_error_message_box alert alert-warning d-none"></ul>
+
+    <div class="row">
+        <div class="col-12 col-lg-6">
+            <label for="theme-change" class="form-label"><?= lang('Config.theme'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-binoculars"></i></span>
+                <select class="form-select" name="theme" id="theme-change">
+                    <?php foreach ($themes as $value => $display): ?>
+                        <option value="<?= $value ?>" <?= $config['theme'] == $value ? 'selected' : '' ?>><?= $display ?></option>
+                    <?php endforeach; ?>
+                </select>
+            </div>
+        </div>
+
+        <div class="col-12 col-lg-6">
+            <label for="login_form" class="form-label"><?= lang('Config.login_form'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-view-stacked"></i></span>
+                <select class="form-select" name="login_form" id="login_form">
+                    <option value="floating_labels" <?= $config['login_form'] == 'floating_labels' ? 'selected' : '' ?>><?= lang('Config.floating_labels') ?></option>
+                    <option value="input_groups" <?= $config['login_form'] == 'input_groups' ? 'selected' : '' ?>><?= lang('Config.input_groups') ?></option>
+                </select>
+            </div>
+        </div>
+
+        <div class="col-12 col-lg-6">
+            <label for="color_mode" class="form-label">Color Mode <?= $beta; ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text" id="color-mode-icon"><i class="bi bi-palette"></i></span>
+                <select class="form-select" id="color_mode" name="color_mode" aria-describedby="color-mode-icon">
+                    <option value="light" <?= $config['color_mode'] == 'light' ? 'selected' : '' ?>>Light</option>
+                    <option value="dark" <?= $config['color_mode'] == 'dark' ? 'selected' : '' ?>>Dark</option>
+                </select>
+            </div>
+        </div>
+
+        <div class="col-12 col-lg-6">
+            <label for="notify_position" class="form-label"><?= lang('Config.notify_alignment'); ?></label>
+            <div class="row" id="notify_position">
+                <div class="col-6 mb-3">
+                    <div class="input-group">
+                        <span class="input-group-text"><i class="bi bi-arrow-down-up"></i></span>
+                        <select class="form-select" name="notify_vertical_position">
+                            <option value="top" <?= $config['notify_vertical_position'] == 'top' ? 'selected' : '' ?>><?= lang('Config.top') ?></option>
+                            <option value="bottom" <?= $config['notify_vertical_position'] == 'bottom' ? 'selected' : '' ?>><?= lang('Config.bottom') ?></option>
+                        </select>
+                    </div>
+                </div>
+                <div class="col-6 mb-3">
+                    <div class="input-group">
+                        <span class="input-group-text"><i class="bi bi-arrow-left-right"></i></span>
+                        <select class="form-select" name="notify_horizontal_position">
+                            <option value="left" <?= $config['notify_horizontal_position'] == 'left' ? 'selected' : '' ?>><?= lang('Config.left') ?></option>
+                            <option value="center" <?= $config['notify_horizontal_position'] == 'center' ? 'selected' : '' ?>><?= lang('Config.center') ?></option>
+                            <option value="right" <?= $config['notify_horizontal_position'] == 'right' ? 'selected' : '' ?>><?= lang('Config.right') ?></option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="col-12 col-lg-6">
+            <label for="config_menu_position" class="form-label">Configuration Menu Position</label>
+            <div class="input-group mb-3">
+                <span class="input-group-text" id="config-menu-position-icon"><i class="bi bi-distribute-horizontal"></i></span>
+                <select class="form-select" id="config_menu_position" name="config_menu_position" aria-describedby="config-menu-position-icon">
+                    <option value="start" <?= $config['config_menu_position'] == 'start' ? 'selected' : '' ?>>Start</option>
+                    <option value="end" <?= $config['config_menu_position'] == 'end' ? 'selected' : '' ?>>End</option>
+                </select>
+            </div>
+        </div>
+    </div>
+
+    <div class="form-check form-switch mb-3">
+        <input class="form-check-input" type="checkbox" role="switch" id="responsive_design" name="responsive_design" value="responsive_design" <?= $config['responsive_design'] == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="responsive_design">Responsive Design <?= $beta; ?></label>
+    </div>
+
+    <div class="d-flex justify-content-end">
+        <button type="submit" class="btn btn-primary" name="submit_appearance"><?= lang('Common.submit'); ?></button>
+    </div>
+
+<?= form_close() ?>
+
+<script type="application/javascript">
+    // Validation and submit handling
+    $(document).ready(function() {
+        $('#appearance_config_form').validate($.extend(form_support.handler, {
+            submitHandler: function(form) {
+                $(form).ajaxSubmit({
+                    success: function(response) {
+                        $.notify({
+                            icon: 'bi bi-bell-fill',
+                            message: response.message + '&nbsp;<em>Click to refresh.</em>',
+                            url: 'javascript:window.location.reload();',
+                            target: '_self'
+                        }, {
+                            type: response.success ? 'success' : 'danger'
+                        })
+                    },
+                    dataType: 'json'
+                });
+            },
+
+            errorLabelContainer: '.appearance_error_message_box'
+        }));
+    });
+</script>

app/Views/configs/barcode_config.php

@@ -6,251 +6,194 @@
  */
 ?>
 
-<?= form_open('config/saveBarcode/', ['id' => 'barcode_config_form', 'class' => 'form-horizontal']) ?>
-    <div id="config_wrapper">
-        <fieldset id="config_info">
+<?= form_open('config/saveBarcode/', ['id' => 'barcode_config_form']) ?>
 
-            <div id="required_fields_message"><?= lang('Common.fields_required_message') ?></div>
-            <ul id="barcode_error_message_box" class="error_message_box"></ul>
+    <?php
+    $title_info['config_title'] = lang('Config.barcode_configuration');
+    echo view('configs/config_header', $title_info);
+    ?>
 
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.barcode_type'), 'barcode_type', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_dropdown(
-                        'barcode_type',
-                        $support_barcode,
-                        $config['barcode_type'],
-                        'class="form-control input-sm"'
-                    ) ?>
-                </div>
+    <ul id="error_message_box" class="barcode_error_message_box alert alert-warning d-none"></ul>
+
+    <div class="row">
+        <div class="col-12 col-lg-6">
+            <label for="barcode_type" class="form-label"><?= lang('Config.barcode_type'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-braces"></i></span>
+                <select class="form-select" name="barcode_type" id="barcode_type">
+                    <?php foreach ($support_barcode as $key => $value): ?>
+                        <option value="<?= $key ?>" <?= $config['barcode_type'] == $key ? 'selected' : '' ?>><?= $value ?></option>
+                    <?php endforeach; ?>
+                </select>
             </div>
+        </div>
 
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.barcode_width'), 'barcode_width', ['class' => 'control-label col-xs-2 required']) ?>
-                <div class="col-xs-2">
-                    <?= form_input([
-                        'step'  => '5',
-                        'max'   => '350',
-                        'min'   => '60',
-                        'type'  => 'number',
-                        'name'  => 'barcode_width',
-                        'id'    => 'barcode_width',
-                        'class' => 'form-control input-sm required',
-                        'value' => $config['barcode_width']
-                    ]) ?>
-                </div>
+        <div class="col-6 col-lg-3">
+            <label for="barcode_width" class="form-label"><?= lang('Config.barcode_width'); ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-arrows"></i></span>
+                <input type="number" class="form-control" step="5" max="350" min="60" name="barcode_width" id="barcode_width" value="<?= $config['barcode_width'] ?>" required>
+                <span class="input-group-text">px</span>
             </div>
+        </div>
 
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.barcode_height'), 'barcode_height', ['class' => 'control-label col-xs-2 required']) ?>
-                <div class="col-xs-2">
-                    <?= form_input([
-                        'type'  => 'number',
-                        'min'   => 10,
-                        'max'   => 120,
-                        'name'  => 'barcode_height',
-                        'id'    => 'barcode_height',
-                        'class' => 'form-control input-sm required',
-                        'value' => $config['barcode_height']
-                    ]) ?>
-                </div>
+        <div class="col-6 col-lg-3">
+            <label for="barcode_height" class="form-label"><?= lang('Config.barcode_height'); ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-arrows-vertical"></i></span>
+                <input type="number" class="form-control" min="10" max="120" name="barcode_height" id="barcode_height" value="<?= $config['barcode_height'] ?>" required>
+                <span class="input-group-text">px</span>
             </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.barcode_font'), 'barcode_font', ['class' => 'control-label col-xs-2 required']) ?>
-                <div class="col-sm-2">
-                    <?= form_dropdown(
-                        'barcode_font',
-                        $barcode_fonts,
-                        $config['barcode_font'],
-                        'class="form-control input-sm" required'
-                    ) ?>
-                </div>
-                <div class="col-sm-2">
-                    <?= form_input([
-                        'type'  => 'number',
-                        'min'   => '1',
-                        'max'   => '30',
-                        'name'  => 'barcode_font_size',
-                        'id'    => 'barcode_font_size',
-                        'class' => 'form-control input-sm required',
-                        'value' => $config['barcode_font_size']
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.allow_duplicate_barcodes'), 'allow_duplicate_barcodes', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-1">
-                    <?= form_checkbox([
-                        'name'    => 'allow_duplicate_barcodes',
-                        'id'      => 'allow_duplicate_barcodes',
-                        'value'   => 'allow_duplicate_barcodes',
-                        'checked' => $config['allow_duplicate_barcodes'] == 1
-                    ]) ?>
-                    &nbsp;
-                    <label class="control-label">
-                        <span class="glyphicon glyphicon-warning-sign" data-toggle="tooltip" data-placement="right" title="<?= lang('Config.barcode_tooltip') ?>"></span>
-                    </label>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.barcode_content'), 'barcode_content', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-8">
-                    <label class="radio-inline">
-                        <?= form_radio([
-                            'name'    => 'barcode_content',
-                            'value'   => 'id',
-                            'checked' => $config['barcode_content'] == 'id'
-                        ]) ?>
-                        <?= lang('Config.barcode_id') ?>
-                    </label>
-                    <label class="radio-inline">
-                        <?= form_radio([
-                            'name'    => 'barcode_content',
-                            'value'   => 'number',
-                            'checked' => $config['barcode_content'] == 'number'
-                        ]) ?>
-                        <?= lang('Config.barcode_number') ?>
-                    </label>
-                    &nbsp;
-                    &nbsp;
-                    <label class="checkbox-inline">
-                        <?= form_checkbox([
-                            'name'    => 'barcode_generate_if_empty',
-                            'value'   => 'barcode_generate_if_empty',
-                            'checked' => $config['barcode_generate_if_empty'] == 1
-                        ]) ?>
-                        <?= lang('Config.barcode_generate_if_empty') ?>
-                    </label>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.barcode_formats'), 'barcode_formats', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-4">
-                    <?php
-                    $barcode_formats = json_decode(config('OSPOS')->settings['barcode_formats']);
-                    echo form_dropdown([
-                        'name'      => 'barcode_formats[]',
-                        'id'        => 'barcode_formats',
-                        'options'   => !empty($barcode_formats) ? array_combine($barcode_formats, $barcode_formats) : [],
-                        'multiple'  => 'multiple',
-                        'data-role' => 'tagsinput'
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.barcode_layout'), 'barcode_layout', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-sm-10">
-                    <div class="form-group form-group-sm row">
-                        <label class="control-label col-sm-1"><?= lang('Config.barcode_first_row') . ' ' ?></label>
-                        <div class="col-sm-2">
-                            <?= form_dropdown(
-                                'barcode_first_row',
-                                [
-                                    'not_show'     => lang('Config.none'),
-                                    'name'         => lang('Items.name'),
-                                    'category'     => lang('Items.category'),
-                                    'cost_price'   => lang('Items.cost_price'),
-                                    'unit_price'   => lang('Items.unit_price'),
-                                    'company_name' => lang('Suppliers.company_name')
-                                ],
-                                $config['barcode_first_row'],
-                                ['class' => 'form-control input-sm']
-                            ); ?>
-                        </div>
-                        <label class="control-label col-sm-1"><?= lang('Config.barcode_second_row') . ' ' ?></label>
-                        <div class="col-sm-2">
-                            <?= form_dropdown(
-                                'barcode_second_row',
-                                [
-                                    'not_show'     => lang('Config.none'),
-                                    'name'         => lang('Items.name'),
-                                    'category'     => lang('Items.category'),
-                                    'cost_price'   => lang('Items.cost_price'),
-                                    'unit_price'   => lang('Items.unit_price'),
-                                    'item_code'    => lang('Items.item_number'),
-                                    'company_name' => lang('Suppliers.company_name')
-                                ],
-                                $config['barcode_second_row'],
-                                ['class' => 'form-control input-sm']
-                            ) ?>
-                        </div>
-                        <label class="control-label col-sm-1"><?= lang('Config.barcode_third_row') . ' ' ?></label>
-                        <div class="col-sm-2">
-                            <?= form_dropdown(
-                                'barcode_third_row',
-                                [
-                                    'not_show'     => lang('Config.none'),
-                                    'name'         => lang('Items.name'),
-                                    'category'     => lang('Items.category'),
-                                    'cost_price'   => lang('Items.cost_price'),
-                                    'unit_price'   => lang('Items.unit_price'),
-                                    'item_code'    => lang('Items.item_number'),
-                                    'company_name' => lang('Suppliers.company_name')
-                                ],
-                                $config['barcode_third_row'],
-                                ['class' => 'form-control input-sm']
-                            ) ?>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.barcode_number_in_row'), 'barcode_num_in_row', ['class' => 'control-label col-xs-2 required']) ?>
-                <div class="col-xs-2">
-                    <?= form_input([
-                        'name'  => 'barcode_num_in_row',
-                        'id'    => 'barcode_num_in_row',
-                        'class' => 'form-control input-sm required',
-                        'value' => $config['barcode_num_in_row']
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.barcode_page_width'), 'barcode_page_width', ['class' => 'control-label col-xs-2 required']) ?>
-                <div class="col-sm-2">
-                    <div class="input-group">
-                        <?= form_input([
-                            'name'  => 'barcode_page_width',
-                            'id'    => 'barcode_page_width',
-                            'class' => 'form-control input-sm required',
-                            'value' => $config['barcode_page_width']
-                        ]) ?>
-                        <span class="input-group-addon input-sm">%</span>
-                    </div>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.barcode_page_cellspacing'), 'barcode_page_cellspacing', ['class' => 'control-label col-xs-2 required']) ?>
-                <div class="col-sm-2">
-                    <div class="input-group">
-                        <?= form_input([
-                            'name'  => 'barcode_page_cellspacing',
-                            'id'    => 'barcode_page_cellspacing',
-                            'class' => 'form-control input-sm required',
-                            'value' => $config['barcode_page_cellspacing']
-                        ]) ?>
-                        <span class="input-group-addon input-sm">px</span>
-                    </div>
-                </div>
-            </div>
-
-            <?= form_submit([
-                'name'  => 'submit_barcode',
-                'id'    => 'submit_barcode',
-                'value' => lang('Common.submit'),
-                'class' => 'btn btn-primary btn-sm pull-right'
-            ]) ?>
-
-        </fieldset>
+        </div>
     </div>
+
+    <div class="row">
+        <div class="col-6 col-lg-3">
+            <label for="barcode_font" class="form-label"><?= lang('Config.barcode_font'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-fonts"></i></span>
+                <select class="form-select" id="barcode_font" name="barcode_font" required>
+                    <?php foreach ($barcode_fonts as $key => $value): ?>
+                        <option value="<?= $key ?>" <?= $config['barcode_font'] == $key ? 'selected' : '' ?>><?= $value ?></option>
+                    <?php endforeach; ?>
+                </select>
+            </div>
+        </div>
+
+        <div class="col-6 col-lg-3">
+            <label for="barcode_font_size" class="form-label">Font Size<sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-arrows-angle-expand"></i></span>
+                <input type="number" class="form-control" min="1" max="30" name="barcode_font_size" id="barcode_font_size" value="<?= $config['barcode_font_size'] ?>" required>
+                <span class="input-group-text">px</span>
+            </div>
+        </div>
+    </div>
+
+    <div class="form-check form-switch mb-3">
+        <input class="form-check-input" type="checkbox" role="switch" id="allow_duplicate_barcodes" name="allow_duplicate_barcodes" value="allow_duplicate_barcodes" <?= $config['allow_duplicate_barcodes'] == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="allow_duplicate_barcodes"><?= lang('Config.allow_duplicate_barcodes'); ?></label>
+        <div class="form-text"><i class="bi bi-info-square pe-1"></i><?= lang('Config.barcode_tooltip') ?></div>
+    </div>
+
+    <label for="barcode_content" class="form-label"><?= lang('Config.barcode_content'); ?></label>
+    <div class="row mb-3">
+        <div class="col-12">
+            <div class="form-check form-check-inline">
+                <input class="form-check-input" type="radio" name="barcode_content" id="barcode_content_id" value="id" <?= $config['barcode_content'] == 'id' ? 'checked' : '' ?>>
+                <label class="form-check-label" for="barcode_content_id"><?= lang('Config.barcode_id') ?></label>
+            </div>
+
+            <div class="form-check form-check-inline">
+                <input class="form-check-input" type="radio" name="barcode_content" id="barcode_content_number" value="number" <?= $config['barcode_content'] == 'number' ? 'checked' : '' ?>>
+                <label class="form-check-label" for="barcode_content_number"><?= lang('Config.barcode_number') ?></label>
+            </div>
+
+            <div class="form-check form-check-inline form-switch">
+                <input class="form-check-input" type="checkbox" role="switch" id="barcode_generate_if_empty" name="barcode_generate_if_empty" value="barcode_generate_if_empty" <?= $config['barcode_generate_if_empty'] == 1 ? 'checked' : '' ?>>
+                <label class="form-check-label" for="barcode_generate_if_empty"><?= lang('Config.barcode_generate_if_empty'); ?></label>
+            </div>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-12 col-lg-6">
+            <label for="barcode_formats" class="form-label"><?= lang('Config.barcode_formats'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-code-square"></i></span>
+                <!-- <?php
+                $barcode_formats = json_decode(config('OSPOS')->settings['barcode_formats']);
+                $options = !empty($barcode_formats) ? array_combine($barcode_formats, $barcode_formats) : [];
+                ?>
+                <select class="form-select" id="barcode_formats" name="barcode_formats[]" data-role="tagsinput" multiple>
+                    <?php foreach ($options as $value): ?>
+                        <option value="<?= $value ?>" <?= in_array($value, $barcode_formats) ? 'selected' : '' ?>><?= $value ?></option>
+                    <?php endforeach; ?>
+                </select> -->
+                <input type="text" class="form-control" disabled>
+            </div>
+        </div>
+    </div>
+
+    <div class="row">
+        <label for="barcode_layout" class="form-label"><?= lang('Config.barcode_layout'); ?></label>
+        <div class="col-6 col-lg-3">
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-1-square"></i></span>
+                <select name="barcode_first_row" class="form-select">
+                    <option value="not_show" <?= $config['barcode_first_row'] == 'not_show' ? 'selected' : '' ?>><?= lang('Config.none') ?></option>
+                    <option value="name" <?= $config['barcode_first_row'] == 'name' ? 'selected' : '' ?>><?= lang('Items.name') ?></option>
+                    <option value="category" <?= $config['barcode_first_row'] == 'category' ? 'selected' : '' ?>><?= lang('Items.category') ?></option>
+                    <option value="cost_price" <?= $config['barcode_first_row'] == 'cost_price' ? 'selected' : '' ?>><?= lang('Items.cost_price') ?></option>
+                    <option value="unit_price" <?= $config['barcode_first_row'] == 'unit_price' ? 'selected' : '' ?>><?= lang('Items.unit_price') ?></option>
+                    <option value="company_name" <?= $config['barcode_first_row'] == 'company_name' ? 'selected' : '' ?>><?= lang('Suppliers.company_name') ?></option>
+                </select>
+            </div>
+        </div>
+
+        <div class="col-6 col-lg-3">
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-2-square"></i></span>
+                <select name="barcode_second_row" class="form-select">
+                    <option value="not_show" <?= $config['barcode_second_row'] == 'not_show' ? 'selected' : '' ?>><?= lang('Config.none') ?></option>
+                    <option value="name" <?= $config['barcode_second_row'] == 'name' ? 'selected' : '' ?>><?= lang('Items.name') ?></option>
+                    <option value="category" <?= $config['barcode_second_row'] == 'category' ? 'selected' : '' ?>><?= lang('Items.category') ?></option>
+                    <option value="cost_price" <?= $config['barcode_second_row'] == 'cost_price' ? 'selected' : '' ?>><?= lang('Items.cost_price') ?></option>
+                    <option value="unit_price" <?= $config['barcode_second_row'] == 'unit_price' ? 'selected' : '' ?>><?= lang('Items.unit_price') ?></option>
+                    <option value="item_code" <?= $config['barcode_second_row'] == 'item_code' ? 'selected' : '' ?>><?= lang('Items.item_number') ?></option>
+                    <option value="company_name" <?= $config['barcode_second_row'] == 'company_name' ? 'selected' : '' ?>><?= lang('Suppliers.company_name') ?></option>
+                </select>
+            </div>
+        </div>
+
+        <div class="col-6 col-lg-3">
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-3-square"></i></span>
+                <select name="barcode_third_row" class="form-select">
+                    <option value="not_show" <?= $config['barcode_third_row'] == 'not_show' ? 'selected' : '' ?>><?= lang('Config.none') ?></option>
+                    <option value="name" <?= $config['barcode_third_row'] == 'name' ? 'selected' : '' ?>><?= lang('Items.name') ?></option>
+                    <option value="category" <?= $config['barcode_third_row'] == 'category' ? 'selected' : '' ?>><?= lang('Items.category') ?></option>
+                    <option value="cost_price" <?= $config['barcode_third_row'] == 'cost_price' ? 'selected' : '' ?>><?= lang('Items.cost_price') ?></option>
+                    <option value="unit_price" <?= $config['barcode_third_row'] == 'unit_price' ? 'selected' : '' ?>><?= lang('Items.unit_price') ?></option>
+                    <option value="item_code" <?= $config['barcode_third_row'] == 'item_code' ? 'selected' : '' ?>><?= lang('Items.item_number') ?></option>
+                    <option value="company_name" <?= $config['barcode_third_row'] == 'company_name' ? 'selected' : '' ?>><?= lang('Suppliers.company_name') ?></option>
+                </select>
+            </div>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-6 col-lg-3">
+            <label for="barcode_num_in_row" class="form-label"><?= lang('Config.barcode_number_in_row'); ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-123"></i></span>
+                <input type="number" name="barcode_num_in_row" id="barcode_num_in_row" class="form-control" value="<?= $config['barcode_num_in_row'] ?>" required>
+            </div>
+        </div>
+
+        <div class="col-6 col-lg-3">
+            <label for="barcode_page_width" class="form-label"><?= lang('Config.barcode_page_width'); ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-arrows"></i></span>
+                <input type="number" min="0" max="100" name="barcode_page_width" id="barcode_page_width" class="form-control" value="<?= $config['barcode_page_width'] ?>" required>
+                <span class="input-group-text"><i class="bi bi-percent"></i></span>
+            </div>
+        </div>
+
+        <div class="col-6 col-lg-3">
+            <label for="barcode_page_cellspacing" class="form-label"><?= lang('Config.barcode_page_cellspacing'); ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-distribute-horizontal"></i></span>
+                <input type="number" name="barcode_page_cellspacing" id="barcode_page_cellspacing" class="form-control" value="<?= $config['barcode_page_cellspacing'] ?>" required>
+                <span class="input-group-text">px</span>
+            </div>
+        </div>
+    </div>
+
+    <div class="d-flex justify-content-end">
+        <button type="submit" class="btn btn-primary" name="submit_barcode"><?= lang('Common.submit'); ?></button>
+    </div>
+
 <?= form_close() ?>
 
 <script type="text/javascript">
@@ -258,7 +201,7 @@
     $(document).ready(function() {
         $('#barcode_config_form').validate($.extend(form_support.handler, {
 
-            errorLabelContainer: "#barcode_error_message_box",
+            errorLabelContainer: ".barcode_error_message_box",
 
             rules: {
                 barcode_width: {

app/Views/configs/config_header.php

@@ -0,0 +1,5 @@
+<div class="d-flex">
+    <h4 class="flex-grow-1 fw-bold"><?= $config_title; ?></h4>
+    <h5 class="link-secondary d-print-none" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Learn more in our docs"><i class="bi bi-journal-arrow-up"></i></h5>
+</div>
+<hr class="mt-0 d-print-none">

app/Views/configs/email_config.php

@@ -4,136 +4,85 @@
  */
 ?>
 
-<?= form_open('config/saveEmail/', ['id' => 'email_config_form', 'enctype' => 'multipart/form-data', 'class' => 'form-horizontal']) ?>
-    <div id="config_wrapper">
-        <fieldset id="config_info">
+<?= form_open('config/saveEmail/', ['id' => 'email_config_form', 'enctype' => 'multipart/form-data']) ?>
 
-            <div id="required_fields_message"><?= lang('Common.fields_required_message') ?></div>
-            <ul id="email_error_message_box" class="error_message_box"></ul>
+    <?php
+    $title_info['config_title'] = lang('Config.email_configuration');
+    echo view('configs/config_header', $title_info);
+    ?>
 
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.email_protocol'), 'protocol', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_dropdown(
-                        'protocol',
-                        [
-                            'mail'     => 'mail',
-                            'sendmail' => 'sendmail',
-                            'smtp'     => 'smtp'
-                        ],
-                        $config['protocol'],
-                        'class="form-control input-sm" id="protocol"'
-                    ) ?>
-                </div>
+    <ul id="error_message_box" class="email_error_message_box alert alert-warning d-none"></ul>
+
+    <div class="row">
+        <div class="col-12 col-lg-6">
+            <label for="protocol" class="form-label"><?= lang('Config.email_protocol'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-mailbox"></i></span>
+                <?= form_dropdown('protocol', array('mail' => 'Mail', 'sendmail' => 'Sendmail', 'smtp' => 'SMTP'), $config['protocol'], array('class' => 'form-select', 'id' => 'protocol')); ?>
             </div>
+        </div>
 
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.email_mailpath'), 'mailpath', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-4">
-                    <?= form_input([
-                        'name'  => 'mailpath',
-                        'id'    => 'mailpath',
-                        'class' => 'form-control input-sm',
-                        'value' => $config['mailpath']
-                    ]) ?>
-                </div>
+        <div class="col-12 col-lg-6">
+            <label for="mailpath" class="form-label"><?= lang('Config.email_mailpath'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-braces"></i></span>
+                <input type="text" name="mailpath" class="form-control" id="mailpath" value="<?= $config['mailpath']; ?>">
             </div>
+        </div>
 
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.email_smtp_host'), 'smtp_host', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_input([
-                        'name'  => 'smtp_host',
-                        'id'    => 'smtp_host',
-                        'class' => 'form-control input-sm',
-                        'value' => $config['smtp_host']
-                    ]) ?>
-                </div>
+        <div class="col-12 col-lg-6">
+            <label for="smtp_host" class="form-label"><?= lang('Config.email_smtp_host'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-database"></i></span>
+                <input type="text" name="smtp_host" class="form-control" id="smtp_host" value="<?= $config['smtp_host']; ?>">
             </div>
+        </div>
 
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.email_smtp_port'), 'smtp_port', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_input([
-                        'name'  => 'smtp_port',
-                        'id'    => 'smtp_port',
-                        'class' => 'form-control input-sm',
-                        'value' => $config['smtp_port']
-                    ]) ?>
-                </div>
+        <div class="col-12 col-lg-6">
+            <label for="smtp_port" class="form-label"><?= lang('Config.email_smtp_port'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-door-open"></i></span>
+                <input type="number" name="smtp_port" class="form-control" id="smtp_port" value="<?= $config['smtp_port']; ?>">
             </div>
+        </div>
 
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.email_smtp_crypto'), 'smtp_crypto', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_dropdown(
-                        'smtp_crypto',
-                        [
-                            ''    => 'None',
-                            'tls' => 'TLS',
-                            'ssl' => 'SSL'
-                        ],
-                        $config['smtp_crypto'],
-                        'class="form-control input-sm" id="smtp_crypto"'
-                    ) ?>
-                </div>
+        <div class="col-12 col-lg-6">
+            <label for="smtp_crypto" class="form-label"><?= lang('Config.email_smtp_crypto'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-shield-lock"></i></span>
+                <?= form_dropdown('smtp_crypto', array('' => 'None', 'tls' => 'TLS', 'ssl' => 'SSL'), $config['smtp_crypto'], array('class' => 'form-select', 'id' => 'smtp_crypto')); ?>
             </div>
+        </div>
 
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.email_smtp_timeout'), 'smtp_timeout', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_input([
-                        'name'  => 'smtp_timeout',
-                        'id'    => 'smtp_timeout',
-                        'class' => 'form-control input-sm',
-                        'value' => $config['smtp_timeout']
-                    ]) ?>
-                </div>
+        <div class="col-12 col-lg-6">
+            <label for="smtp_timeout" class="form-label"><?= lang('Config.email_smtp_timeout'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-stopwatch"></i></span>
+                <input type="number" name="smtp_timeout" class="form-control" id="smtp_timeout" value="<?= $config['smtp_timeout']; ?>">
             </div>
+        </div>
 
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.email_smtp_user'), 'smtp_user', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-4">
-                    <div class="input-group">
-                        <span class="input-group-addon input-sm">
-                            <span class="glyphicon glyphicon-user"></span>
-                        </span>
-                        <?= form_input([
-                            'name'  => 'smtp_user',
-                            'id'    => 'smtp_user',
-                            'class' => 'form-control input-sm',
-                            'value' => $config['smtp_user']
-                        ]) ?>
-                    </div>
-                </div>
+        <div class="col-12 col-lg-6">
+            <label for="smtp_user" class="form-label"><?= lang('Config.email_smtp_user'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-person"></i></span>
+                <input type="text" name="smtp_user" class="form-control" id="smtp_user" value="<?= $config['smtp_user']; ?>">
             </div>
+        </div>
 
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.email_smtp_pass'), 'smtp_pass', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-4">
-                    <div class="input-group">
-                        <span class="input-group-addon input-sm">
-                            <span class="glyphicon glyphicon-asterisk"></span>
-                        </span>
-                        <?= form_password([
-                            'name'  => 'smtp_pass',
-                            'id'    => 'smtp_pass',
-                            'class' => 'form-control input-sm',
-                            'value' => $config['smtp_pass']
-                        ]) ?>
-                    </div>
-                </div>
+        <div class="col-12 col-lg-6">
+            <label for="smtp_pass" class="form-label"><?= lang('Config.email_smtp_pass'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-lock"></i></span>
+                <input type="password" name="smtp_pass" class="form-control" id="smtp_pass" value="<?= $config['smtp_pass']; ?>">
             </div>
-
-            <?= form_submit([
-                'name'  => 'submit_email',
-                'id'    => 'submit_email',
-                'value' => lang('Common.submit'),
-                'class' => 'btn btn-primary btn-sm pull-right'
-            ]) ?>
-
-        </fieldset>
+        </div>
     </div>
+
+    <div class="d-flex justify-content-end">
+        <button type="submit" class="btn btn-primary" name="submit_email"><?= lang('Common.submit'); ?></button>
+    </div>
+
 <?= form_close() ?>
 
 <script type="text/javascript">
@@ -162,6 +111,7 @@
                     },
                     success: function(response) {
                         $.notify({
+                            icon: 'bi bi-bell-fill',
                             message: response.message
                         }, {
                             type: response.success ? 'success' : 'danger'
@@ -173,7 +123,7 @@
                 });
             },
 
-            errorLabelContainer: '#email_error_message_box'
+            errorLabelContainer: '.email_error_message_box'
         }));
     });
 </script>

app/Views/configs/general_config.php

@@ -9,459 +9,209 @@
  */
 ?>
 
-<?= form_open('config/saveGeneral/', ['id' => 'general_config_form', 'enctype' => 'multipart/form-data', 'class' => 'form-horizontal']) ?>
-    <div id="config_wrapper">
-        <fieldset id="config_info">
+<?= form_open('config/saveGeneral/', ['id' => 'general_config_form', 'enctype' => 'multipart/form-data']) ?>
 
-            <div id="required_fields_message"><?= lang('Common.fields_required_message') ?></div>
-            <ul id="general_error_message_box" class="error_message_box"></ul>
+    <?php
+    $title_info['config_title'] = lang('Config.general_configuration');
+    echo view('configs/config_header', $title_info);
+    ?>
 
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.theme'), 'theme', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-sm-10">
-                    <div class="form-group form-group-sm row">
-                        <div class="col-sm-3">
-                            <?= form_dropdown(
-                                'theme',
-                                $themes,
-                                $config['theme'],
-                                'class="form-control input-sm" id="theme-change"'
-                            ) ?>
-                        </div>
-                        <div class="col-sm-7">
-                            <a href="<?= 'https://bootswatch.com/3/' . ('bootstrap' == ($config['theme']) ? 'default' : esc($config['theme'])) ?>" target="_blank" rel=”noopener”>
-                                <span><?= lang('Config.theme_preview') . ' ' . ucfirst(esc($config['theme'])) . ' ' ?></span>
-                                <span class="glyphicon glyphicon-new-window"></span>
-                            </a>
-                        </div>
-                    </div>
-                </div>
+    <ul id="error_message_box" class="general_error_message_box alert alert-warning d-none"></ul>
+
+    <div class="row">
+        <div class="col-12 col-sm-6 col-xxl-3">
+            <label for="default_sales_discount" class="form-label"><?= lang('Config.default_sales_discount') ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-cart-dash"></i></span>
+                <input class="form-control" type="number" min="0" max="100" name="default_sales_discount" id="default_sales_discount" value="<?= $config['default_sales_discount'] ?>" required>
+                <input type="radio" class="btn-check" name="default_sales_discount_type" id="dsd_type_1" value="1" <?= $config['default_sales_discount_type'] == 1 ? 'checked' : '' ?>>
+                <label class="btn btn-outline-primary fw-semibold" for="dsd_type_1"><?= $config['currency_symbol'] ?></label>
+                <input type="radio" class="btn-check" name="default_sales_discount_type" id="dsd_type_0" value="0" <?= $config['default_sales_discount_type'] == 0 ? 'checked' : '' ?>>
+                <label class="btn btn-outline-primary fw-semibold" for="dsd_type_0">%</label>
             </div>
+        </div>
 
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.login_form'), 'login_form', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_dropdown(
-                        'login_form',
-                        [
-                            'floating_labels' => lang('Config.floating_labels'),
-                            'input_groups'    => lang('Config.input_groups')
-                        ],
-                        $config['login_form'],
-                        'class="form-control input-sm"'
-                    ) ?>
-                </div>
+        <div class="col-12 col-sm-6 col-xxl-3">
+            <label for="default_receivings_discount" class="form-label"><?= lang('Config.default_receivings_discount') ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-bag-dash"></i></span>
+                <input class="form-control" type="number" min="0" max="100" name="default_receivings_discount" id="default_receivings_discount" value="<?= $config['default_receivings_discount'] ?>" required>
+                <input type="radio" class="btn-check" name="default_receivings_discount_type" id="drd_type_1" value="1" <?= $config['default_receivings_discount_type'] == 1 ? 'checked' : '' ?>>
+                <label class="btn btn-outline-primary fw-semibold" for="drd_type_1"><?= $config['currency_symbol'] ?></label>
+                <input type="radio" class="btn-check" name="default_receivings_discount_type" id="drd_type_0" value="0" <?= $config['default_receivings_discount_type'] == 0 ? 'checked' : '' ?>>
+                <label class="btn btn-outline-primary fw-semibold" for="drd_type_0">%</label>
             </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.default_sales_discount'), 'default_sales_discount', ['class' => 'control-label col-xs-2 required']) ?>
-                <div class="col-xs-2">
-                    <div class="input-group">
-                        <?= form_input([
-                            'name'  => 'default_sales_discount',
-                            'id'    => 'default_sales_discount',
-                            'class' => 'form-control input-sm required',
-                            'type'  => 'number',
-                            'min'   => 0,
-                            'max'   => 100,
-                            'value' => $config['default_sales_discount']
-                        ]) ?>
-                        <span class="input-group-btn">
-                            <?= form_checkbox([
-                                'id'           => 'default_sales_discount_type',
-                                'name'         => 'default_sales_discount_type',
-                                'value'        => 1,
-                                'data-toggle'  => 'toggle',
-                                'data-size'    => 'normal',
-                                'data-onstyle' => 'success',
-                                'data-on'      => '<b>' . $config['currency_symbol'] . '</b>',
-                                'data-off'     => '<b>%</b>',
-                                'checked'      => $config['default_sales_discount_type'] == 1
-                            ]) ?>
-                        </span>
-                    </div>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.default_receivings_discount'), 'default_receivings_discount', ['class' => 'control-label col-xs-2 required']) ?>
-                <div class="col-xs-2">
-                    <div class="input-group">
-                        <?= form_input([
-                            'name'  => 'default_receivings_discount',
-                            'id'    => 'default_receivings_discount',
-                            'class' => 'form-control input-sm required',
-                            'type'  => 'number',
-                            'min'   => 0,
-                            'max'   => 100,
-                            'value' => $config['default_receivings_discount']
-                        ]) ?>
-                        <span class="input-group-btn">
-                            <?= form_checkbox([
-                                'id'           => 'default_receivings_discount_type',
-                                'name'         => 'default_receivings_discount_type',
-                                'value'        => 1,
-                                'data-toggle'  => 'toggle',
-                                'data-size'    => 'normal',
-                                'data-onstyle' => 'success',
-                                'data-on'      => '<b>' . $config['currency_symbol'] . '</b>',
-                                'data-off'     => '<b>%</b>',
-                                'checked'      => $config['default_receivings_discount_type'] == 1
-                            ]) ?>
-                        </span>
-                    </div>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.enforce_privacy'), 'enforce_privacy', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-1">
-                    <?= form_checkbox([
-                        'name'    => 'enforce_privacy',
-                        'id'      => 'enforce_privacy',
-                        'value'   => 'enforce_privacy',
-                        'checked' => $config['enforce_privacy'] == 1
-                    ]) ?>
-                    &nbsp;
-                    <label class="control-label">
-                        <span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-placement="right" title="<?= lang('Config.enforce_privacy_tooltip') ?>"></span>
-                    </label>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.receiving_calculate_average_price'), 'receiving_calculate_average_price', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-1">
-                    <?= form_checkbox([
-                        'name'    => 'receiving_calculate_average_price',
-                        'id'      => 'receiving_calculate_average_price',
-                        'value'   => 'receiving_calculate_average_price',
-                        'checked' => $config['receiving_calculate_average_price'] == 1
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.lines_per_page'), 'lines_per_page', ['class' => 'control-label col-xs-2 required']) ?>
-                <div class="col-xs-2">
-                    <?= form_input([
-                        'name'  => 'lines_per_page',
-                        'id'    => 'lines_per_page',
-                        'class' => 'form-control input-sm required',
-                        'type'  => 'number',
-                        'min'   => 10,
-                        'max'   => 1000,
-                        'value' => $config['lines_per_page']
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.notify_alignment'), 'notify_horizontal_position', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-sm-10">
-                    <div class="form-group form-group-sm row">
-                        <div class="col-sm-2">
-                            <?= form_dropdown(
-                                'notify_vertical_position',
-                                [
-                                    'top'    => lang('Config.top'),
-                                    'bottom' => lang('Config.bottom')
-                                ],
-                                $config['notify_vertical_position'],
-                                'class="form-control input-sm"'
-                            ) ?>
-                        </div>
-                        <div class="col-sm-2">
-                            <?= form_dropdown(
-                                'notify_horizontal_position',
-                                [
-                                    'left'   => lang('Config.left'),
-                                    'center' => lang('Config.center'),
-                                    'right'  => lang('Config.right')
-                                ],
-                                $config['notify_horizontal_position'],
-                                'class="form-control input-sm"'
-                            ) ?>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.image_restrictions'), 'image_restrictions', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-sm-10">
-                    <div class="form-group form-group-sm row">
-                        <div class="col-sm-2">
-                            <div class="input-group">
-                                <span class="input-group-addon input-sm">
-                                    <span class="glyphicon glyphicon-resize-horizontal"></span>
-                                </span>
-                                <?= form_input([
-                                    'name'           => 'image_max_width',
-                                    'id'             => 'image_max_width',
-                                    'class'          => 'form-control input-sm required',
-                                    'type'           => 'number',
-                                    'min'            => 128,
-                                    'max'            => 3840,
-                                    'value'          => $config['image_max_width'],
-                                    'data-toggle'    => 'tooltip',
-                                    'data-placement' => 'top',
-                                    'title'          => lang('Config.image_max_width_tooltip')
-                                ]) ?>
-                            </div>
-                        </div>
-                        <div class="col-sm-2">
-                            <div class="input-group">
-                                <span class="input-group-addon input-sm">
-                                    <span class="glyphicon glyphicon-resize-vertical"></span>
-                                </span>
-                                <?= form_input([
-                                    'name'           => 'image_max_height',
-                                    'id'             => 'image_max_height',
-                                    'class'          => 'form-control input-sm required',
-                                    'type'           => 'number',
-                                    'min'            => 128,
-                                    'max'            => 3840,
-                                    'value'          => $config['image_max_height'],
-                                    'data-toggle'    => 'tooltip',
-                                    'data-placement' => 'top',
-                                    'title'          => lang('Config.image_max_height_tooltip')
-                                ]) ?>
-                            </div>
-                        </div>
-                        <div class="col-sm-2">
-                            <div class="input-group">
-                                <span class="input-group-addon input-sm">
-                                    <span class="glyphicon glyphicon-hdd"></span>
-                                </span>
-                                <?= form_input([
-                                    'name'           => 'image_max_size',
-                                    'id'             => 'image_max_size',
-                                    'class'          => 'form-control input-sm required',
-                                    'type'           => 'number',
-                                    'min'            => 128,
-                                    'max'            => 2048,
-                                    'value'          => $config['image_max_size'],
-                                    'data-toggle'    => 'tooltip',
-                                    'data-placement' => 'top',
-                                    'title'          => lang('Config.image_max_size_tooltip')
-                                ]) ?>
-                            </div>
-                        </div>
-                        <div class="col-sm-4">
-                            <div class="input-group">
-                                <span class="input-group-addon input-sm"><?= lang('Config.image_allowed_file_types') ?></span>
-                                <?= form_multiselect([
-                                    'name'                      => 'image_allowed_types[]',
-                                    'options'                   => $image_allowed_types,
-                                    'selected'                  => $selected_image_allowed_types,
-                                    'id'                        => 'image_allowed_types',
-                                    'class'                     => 'selectpicker show-menu-arrow',
-                                    'data-none-selected-text'   => lang('Common.none_selected_text'),
-                                    'data-selected-text-format' => 'count > 1',
-                                    'data-style'                => 'btn-default btn-sm',
-                                    'data-width'                => '100%'
-                                ]) ?>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.gcaptcha_enable'), 'gcaptcha_enable', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-1">
-                    <?= form_checkbox([
-                        'name'    => 'gcaptcha_enable',
-                        'id'      => 'gcaptcha_enable',
-                        'value'   => 'gcaptcha_enable',
-                        'checked' => $config['gcaptcha_enable'] == 1
-                    ]) ?>
-                    <label class="control-label">
-                        <a href="https://www.google.com/recaptcha/admin" target="_blank">
-                            <span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-placement="right" title="<?= lang('Config.gcaptcha_tooltip') ?>"></span>
-                        </a>
-                    </label>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.gcaptcha_site_key'), 'config_gcaptcha_site_key', ['class' => 'required control-label col-xs-2', 'id' => 'config_gcaptcha_site_key']) ?>
-                <div class="col-xs-4">
-                    <?= form_input([
-                        'name'  => 'gcaptcha_site_key',
-                        'id'    => 'gcaptcha_site_key',
-                        'class' => 'form-control input-sm required',
-                        'value' => $config['gcaptcha_site_key']
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.gcaptcha_secret_key'), 'config_gcaptcha_secret_key', ['class' => 'required control-label col-xs-2', 'id' => 'config_gcaptcha_secret_key']) ?>
-                <div class="col-xs-4">
-                    <?= form_input([
-                        'name'  => 'gcaptcha_secret_key',
-                        'id'    => 'gcaptcha_secret_key',
-                        'class' => 'form-control input-sm required',
-                        'value' => $config['gcaptcha_secret_key']
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.suggestions_layout'), 'suggestions_layout', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-sm-10">
-                    <div class="form-group form-group-sm row">
-                        <div class="col-sm-3">
-                            <div class="input-group">
-                                <span class="input-group-addon input-sm"><?= lang('Config.suggestions_first_column') ?></span>
-                                <?= form_dropdown(
-                                    'suggestions_first_column',
-                                    [
-                                        'name'        => lang('Items.name'),
-                                        'item_number' => lang('Items.number_information'),
-                                        'unit_price'  => lang('Items.unit_price'),
-                                        'cost_price'  => lang('Items.cost_price')
-                                    ],
-                                    $config['suggestions_first_column'],
-                                    'class="form-control input-sm"'
-                                ) ?>
-                            </div>
-                        </div>
-                        <div class="col-sm-3">
-                            <div class="input-group">
-                                <span class="input-group-addon input-sm"><?= lang('Config.suggestions_second_column') ?></span>
-                                <?= form_dropdown(
-                                    'suggestions_second_column',
-                                    [
-                                        ''            => lang('Config.none'),
-                                        'name'        => lang('Items.name'),
-                                        'item_number' => lang('Items.number_information'),
-                                        'unit_price'  => lang('Items.unit_price'),
-                                        'cost_price'  => lang('Items.cost_price')
-                                    ],
-                                    $config['suggestions_second_column'],
-                                    'class="form-control input-sm"'
-                                ) ?>
-                            </div>
-                        </div>
-                        <div class="col-sm-3">
-                            <div class="input-group">
-                                <span class="input-group-addon input-sm"><?= lang('Config.suggestions_third_column') ?></span>
-                                <?= form_dropdown(
-                                    'suggestions_third_column',
-                                    [
-                                        ''            => lang('Config.none'),
-                                        'name'        => lang('Items.name'),
-                                        'item_number' => lang('Items.number_information'),
-                                        'unit_price'  => lang('Items.unit_price'),
-                                        'cost_price'  => lang('Items.cost_price')
-                                    ],
-                                    $config['suggestions_third_column'],
-                                    'class="form-control input-sm"'
-                                ) ?>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.giftcard_number'), 'giftcard_number', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-8">
-                    <label class="radio-inline">
-                        <?= form_radio([
-                            'name'    => 'giftcard_number',
-                            'value'   => 'series',
-                            'checked' => $config['giftcard_number'] == 'series'
-                        ]) ?>
-                        <?= lang('Config.giftcard_series') ?>
-                    </label>
-                    <label class="radio-inline">
-                        <?= form_radio([
-                            'name'    => 'giftcard_number',
-                            'value'   => 'random',
-                            'checked' => $config['giftcard_number'] == 'random'
-                        ]) ?>
-                        <?= lang('Config.giftcard_random') ?>
-                    </label>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.derive_sale_quantity'), 'derive_sale_quantity', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-1">
-                    <?= form_checkbox([
-                        'name'    => 'derive_sale_quantity',
-                        'id'      => 'derive_sale_quantity',
-                        'value'   => 'derive_sale_quantity',
-                        'checked' => $config['derive_sale_quantity'] == 1
-                    ]) ?>
-                    &nbsp;
-                    <label class="control-label">
-                        <span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-placement="right" title="<?= lang('Config.derive_sale_quantity_tooltip') ?>"></span>
-                    </label>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.show_office_group'), 'show_office_group', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-1">
-                    <?= form_checkbox([
-                        'name'    => 'show_office_group',
-                        'id'      => 'show_office_group',
-                        'value'   => 'show_office_group',
-                        'checked' => $show_office_group > 0
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.multi_pack_enabled'), 'multi_pack_enabled', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-1">
-                    <?= form_checkbox([
-                        'name'    => 'multi_pack_enabled',
-                        'id'      => 'multi_pack_enabled',
-                        'value'   => 'multi_pack_enabled',
-                        'checked' => $config['multi_pack_enabled'] == 1
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.include_hsn'), 'include_hsn', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-1">
-                    <?= form_checkbox([
-                        'name'    => 'include_hsn',
-                        'id'      => 'include_hsn',
-                        'value'   => 'include_hsn',
-                        'checked' => $config['include_hsn'] == 1
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.category_dropdown'), 'category_dropdown', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-1">
-                    <?= form_checkbox([
-                        'name'    => 'category_dropdown',
-                        'id'      => 'category_dropdown',
-                        'value'   => 'category_dropdown',
-                        'checked' => $config['category_dropdown'] == 1
-                    ]) ?>
-                </div>
-            </div>
-
-            <?= form_submit([
-                'name'  => 'submit_general',
-                'id'    => 'submit_general',
-                'value' => lang('Common.submit'),
-                'class' => 'btn btn-primary btn-sm pull-right'
-            ]) ?>
-
-        </fieldset>
+        </div>
     </div>
+
+    <div class="row">
+        <div class="col-12 col-sm-6 col-xxl-3">
+            <label for="lines_per_page" class="form-label"><?= lang('Config.lines_per_page'); ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-list"></i></span>
+                <input type="number" min="10" max="1000" name="lines_per_page" class="form-control" id="lines_per_page" value="<?= $config['lines_per_page']; ?>" required>
+            </div>
+        </div>
+    </div>
+
+    <div class="form-check form-switch mb-3">
+        <input class="form-check-input" type="checkbox" role="switch" id="enforce_privacy" name="enforce_privacy" <?= $config['enforce_privacy'] == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="enforce_privacy"><?= lang('Config.enforce_privacy'); ?></label>
+        <div class="form-text"><i class="bi bi-info-square pe-1"></i><?= lang('Config.enforce_privacy_tooltip') ?></div>
+    </div>
+
+    <div class="form-check form-switch mb-3">
+        <input class="form-check-input" type="checkbox" role="switch" id="receiving_calculate_average_price" name="receiving_calculate_average_price" <?= $config['receiving_calculate_average_price'] == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="receiving_calculate_average_price"><?= lang('Config.receiving_calculate_average_price'); ?></label>
+    </div>
+
+    <div class="row">
+        <label class="form-label"><?= lang('Config.image_restrictions'); ?></label>
+        <div class="col-12 col-sm-6 col-xl-3">
+            <div class="input-group mb-3" data-bs-toggle="tooltip" title="<?= lang('Config.image_max_width_tooltip'); ?>">
+                <span class="input-group-text"><i class="bi bi-arrows"></i></span>
+                <input type="number" min="128" max="3840" name="image_max_width" id="image_max_width" class="form-control" value="<?= $config['image_max_width']; ?>" required>
+                <span class="input-group-text">px</span>
+            </div>
+        </div>
+
+        <div class="col-12 col-sm-6 col-xl-3">
+            <div class="input-group mb-3" data-bs-toggle="tooltip" title="<?= lang('Config.image_max_height_tooltip'); ?>">
+                <span class="input-group-text"><i class="bi bi-arrows-vertical"></i></span>
+                <input type="number" min="128" max="3840" name="image_max_height" id="image_max_height" class="form-control" value="<?= $config['image_max_height']; ?>" required>
+                <span class="input-group-text">px</span>
+            </div>
+        </div>
+
+        <div class="col-12 col-sm-6 col-xl-3">
+            <div class="input-group mb-3" data-bs-toggle="tooltip" title="<?= lang('Config.image_max_size_tooltip'); ?>">
+                <span class="input-group-text"><i class="bi bi-hdd"></i></span>
+                <input type="number" min="128" max="2048" name="image_max_size" id="image_max_size" class="form-control" value="<?= $config['image_max_size']; ?>" required>
+                <span class="input-group-text">kb</span>
+            </div>
+        </div>
+
+        <div class="col-12 col-sm-6 col-xl-3">
+            <div class="input-group mb-3" data-bs-toggle="tooltip" title="<?= lang('Config.image_allowed_file_types'); ?>">
+                <span class="input-group-text"><i class="bi bi-images"></i></span>
+                <select name="image_allowed_types[]" id="image_allowed_types" class="form-select" multiple placeholder="<?= lang('Config.image_allowed_file_types'); ?>" required>
+                    <?php foreach($image_allowed_types as $type): ?>
+                    <option value="<?= $type; ?>" <?= in_array($type, $selected_image_allowed_types) ? 'selected' : ''; ?>>
+                        <?= $type; ?>
+                    </option>
+                    <?php endforeach; ?>
+                </select>
+            </div>
+        </div>
+    </div>
+
+    <div class="form-check form-switch mb-3">
+        <input class="form-check-input" type="checkbox" name="gcaptcha_enable" id="gcaptcha_enable" value="gcaptcha_enable" <?= $config['gcaptcha_enable'] == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="gcaptcha_enable"><?= lang('Config.gcaptcha_enable') ?></label>
+        <a class="d-inline-block" href="https://google.com/recaptcha/admin" target="_blank" rel="noopener"><i class="bi bi-link-45deg link-secondary"></i></a>
+        <div class="form-text"><i class="bi bi-info-square pe-1"></i><?= lang('Config.gcaptcha_tooltip') ?></div>
+    </div>
+
+    <div class="row mb-3">
+        <div class="col-12 col-lg-6">
+            <label for="gcaptcha_site_key" class="form-label"><?= lang('Config.gcaptcha_site_key') ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-key"></i></span>
+                <input type="text" class="form-control" name="gcaptcha_site_key" id="gcaptcha_site_key" required>
+            </div>
+        </div>
+        <div class="col-12 col-lg-6">
+            <label for="gcaptcha_secret_key" class="form-label"><?= lang('Config.gcaptcha_secret_key') ?></label>
+            <div class="input-group">
+                <span class="input-group-text"><i class="bi bi-stars"></i></span>
+                <input type="text" class="form-control" name="gcaptcha_secret_key" id="gcaptcha_secret_key" required>
+            </div>
+        </div>
+    </div>
+
+    <div class="row" id="suggestions_layout">
+        <label for="suggestions_layout" class="form-label"><?= lang('Config.suggestions_layout'); ?></label>
+        <div class="col-12 col-sm-6 col-xl-4 col-xxl-3 mb-3">
+            <div class="input-group">
+                <span class="input-group-text"><i class="bi bi-layout-three-columns"></i>&nbsp;1.</span>
+                <select class="form-select" name="suggestions_first_column">
+                    <option value="name" <?= $config['suggestions_first_column'] == 'name' ? 'selected' : '' ?>><?= lang('Items.name') ?></option>
+                    <option value="item_number" <?= $config['suggestions_first_column'] == 'item_number' ? 'selected' : '' ?>><?= lang('Items.number_information') ?></option>
+                    <option value="unit_price" <?= $config['suggestions_first_column'] == 'unit_price' ? 'selected' : '' ?>><?= lang('Items.unit_price') ?></option>
+                    <option value="cost_price" <?= $config['suggestions_first_column'] == 'cost_price' ? 'selected' : '' ?>><?= lang('Items.cost_price') ?></option>
+                </select>
+            </div>
+        </div>
+
+        <div class="col-12 col-sm-6 col-xl-4 col-xxl-3 mb-3">
+            <div class="input-group">
+                <span class="input-group-text"><i class="bi bi-layout-three-columns"></i>&nbsp;2.</span>
+                <select class="form-select" name="suggestions_second_column">
+                    <option value="" <?= $config['suggestions_second_column'] == null ? 'selected' : '' ?>><?= lang('Config.none') ?></option>
+                    <option value="name" <?= $config['suggestions_second_column'] == 'name' ? 'selected' : '' ?>><?= lang('Items.name') ?></option>
+                    <option value="item_number" <?= $config['suggestions_second_column'] == 'item_number' ? 'selected' : '' ?>><?= lang('Items.number_information') ?></option>
+                    <option value="unit_price" <?= $config['suggestions_second_column'] == 'unit_price' ? 'selected' : '' ?>><?= lang('Items.unit_price') ?></option>
+                    <option value="cost_price" <?= $config['suggestions_second_column'] == 'cost_price' ? 'selected' : '' ?>><?= lang('Items.cost_price') ?></option>
+                </select>
+            </div>
+        </div>
+
+        <div class="col-12 col-sm-6 col-xl-4 col-xxl-3 mb-3">
+            <div class="input-group">
+                <span class="input-group-text"><i class="bi bi-layout-three-columns"></i>&nbsp;3.</span>
+                <select class="form-select" name="suggestions_third_column">
+                    <option value="" <?= $config['suggestions_third_column'] == null ? 'selected' : '' ?>><?= lang('Config.none') ?></option>
+                    <option value="name" <?= $config['suggestions_third_column'] == 'name' ? 'selected' : '' ?>><?= lang('Items.name') ?></option>
+                    <option value="item_number" <?= $config['suggestions_third_column'] == 'item_number' ? 'selected' : '' ?>><?= lang('Items.number_information') ?></option>
+                    <option value="unit_price" <?= $config['suggestions_third_column'] == 'unit_price' ? 'selected' : '' ?>><?= lang('Items.unit_price') ?></option>
+                    <option value="cost_price" <?= $config['suggestions_third_column'] == 'cost_price' ? 'selected' : '' ?>><?= lang('Items.cost_price') ?></option>
+                </select>
+            </div>
+        </div>
+    </div>
+
+    <label for="giftcard_number" class="form-label"><?= lang('Config.giftcard_number'); ?></label>
+    <div class="mb-3">
+        <div class="form-check form-check-inline">
+            <input class="form-check-input" type="radio" name="giftcard_number" id="giftcard_series" value="series" <?= $config['giftcard_number'] == 'series' ? 'checked' : '' ?>>
+            <label class="form-check-label" for="giftcard_series"><?= lang('Config.giftcard_series') ?></label>
+        </div>
+        <div class="form-check form-check-inline">
+            <input class="form-check-input" type="radio" name="giftcard_number" id="giftcard_random" value="random" <?= $config['giftcard_number'] == 'random' ? 'checked' : '' ?>>
+            <label class="form-check-label" for="giftcard_random"><?= lang('Config.giftcard_random') ?></label>
+        </div>
+    </div>
+
+    <div class="form-check form-switch mb-3">
+        <input class="form-check-input" type="checkbox" role="switch" id="derive_sale_quantity" name="derive_sale_quantity" value="derive_sale_quantity" <?= $config['derive_sale_quantity'] == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="derive_sale_quantity"><?= lang('Config.derive_sale_quantity'); ?></label>
+        <div class="form-text"><i class="bi bi-info-square pe-1"></i><?= lang('Config.derive_sale_quantity_tooltip') ?></div>
+    </div>
+
+    <div class="form-check form-switch mb-3">
+        <input class="form-check-input" type="checkbox" role="switch" id="show_office_group" name="show_office_group" value="show_office_group" <?= $show_office_group > 0 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="show_office_group"><?= lang('Config.show_office_group'); ?></label>
+    </div>
+
+    <div class="form-check form-switch mb-3">
+        <input class="form-check-input" type="checkbox" role="switch" id="multi_pack_enabled" name="multi_pack_enabled" value="multi_pack_enabled" <?= $config['multi_pack_enabled'] == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="multi_pack_enabled"><?= lang('Config.multi_pack_enabled'); ?></label>
+    </div>
+
+    <div class="form-check form-switch mb-3">
+        <input class="form-check-input" type="checkbox" role="switch" id="include_hsn" name="include_hsn" value="include_hsn" <?= $config['include_hsn'] == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="include_hsn"><?= lang('Config.include_hsn'); ?></label>
+    </div>
+
+    <div class="form-check form-switch mb-3">
+        <input class="form-check-input" type="checkbox" role="switch" id="category_dropdown" name="category_dropdown" value="category_dropdown" <?= $config['category_dropdown'] == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="category_dropdown"><?= lang('Config.category_dropdown'); ?></label>
+    </div>
+
+    <div class="d-flex justify-content-end">
+        <button type="submit" class="btn btn-primary" name="submit_general"><?= lang('Common.submit'); ?></button>
+    </div>
+
 <?= form_close() ?>
 
 <script type="text/javascript">
@@ -484,7 +234,7 @@
 
         $('#general_config_form').validate($.extend(form_support.handler, {
 
-            errorLabelContainer: "#general_error_message_box",
+            errorLabelContainer: ".general_error_message_box",
 
             rules: {
                 lines_per_page: {
@@ -528,6 +278,7 @@
                     },
                     success: function(response) {
                         $.notify({
+                            icon: 'bi bi-bell-fill',
                             message: response.message
                         }, {
                             type: response.success ? 'success' : 'danger'

app/Views/configs/info_config.php

@@ -6,152 +6,110 @@
  */
 ?>
 
-<?= form_open('config/saveInfo/', ['id' => 'info_config_form', 'enctype' => 'multipart/form-data', 'class' => 'form-horizontal']) ?>
-    <div id="config_wrapper">
-        <fieldset id="config_info">
+<?= form_open('config/saveInfo/', ['id' => 'info_config_form', 'enctype' => 'multipart/form-data', 'class' => 'needs-validation']) ?> <!-- TODO-BS5 add is-invalid and invalid-feeback from BS5 to boxes -->
 
-            <div id="required_fields_message"><?= lang('Common.fields_required_message') ?></div>
-            <ul id="info_error_message_box" class="error_message_box"></ul>
+    <?php
+    $title_info['config_title'] = lang('Config.info_configuration');
+    echo view('configs/config_header', $title_info);
+    ?>
 
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.company'), 'company', ['class' => 'control-label col-xs-2 required']) ?>
-                <div class="col-xs-6">
-                    <div class="input-group">
-                        <span class="input-group-addon input-sm">
-                            <span class="glyphicon glyphicon-home"></span>
-                        </span>
-                        <?= form_input([
-                            'name'  => 'company',
-                            'id'    => 'company',
-                            'class' => 'form-control input-sm required',
-                            'value' => $config['company']
-                        ]) ?>
-                    </div>
-                </div>
+    <ul id="error_message_box" class="info_error_message_box alert alert-warning d-none"></ul>
+
+    <div class="row">
+        <div class="col-12 col-lg-6">
+            <label for="info-company" class="form-label"><?= lang('Config.company'); ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-shop-window"></i></span>
+                <input type="text" class="form-control" name="company" id="info-company" value="<?= $config['company']; ?>" required> <!-- TODO-BS5 invalid-feedback makes input borders not rounded? -->
+                <div class="invalid-feedback"><?= lang('Config.company_required') ?></div>
             </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.company_logo'), 'company_logo', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-6">
-                    <div class="fileinput <?= $logo_exists ? 'fileinput-exists' : 'fileinput-new' ?>" data-provides="fileinput">
-                        <div class="fileinput-new thumbnail" style="width: 200px; height: 200px;"></div>
-                        <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 200px;">
-                            <img data-src="holder.js/100%x100%" alt="<?= esc(lang('Config.company_logo')) ?>" src="<?= $logo_src ?>" style="max-height: 100%; max-width: 100%;">
-                        </div>
-                        <div>
-                            <span class="btn btn-default btn-sm btn-file">
-                                <span class="fileinput-new"><?= lang('Config.company_select_image') ?></span>
-                                <span class="fileinput-exists"><?= lang('Config.company_change_image') ?></span>
-                                <input type="file" name="company_logo">
-                            </span>
-                            <a href="#" class="btn btn-default btn-sm fileinput-exists" data-dismiss="fileinput"><?= lang('Config.company_remove_image') ?></a>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.address'), 'address', ['class' => 'control-label col-xs-2 required']) ?>
-                <div class="col-xs-6">
-                    <?= form_textarea([
-                        'name'  => 'address',
-                        'id'    => 'address',
-                        'class' => 'form-control input-sm required',
-                        'value' => $config['address']
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.website'), 'website', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-6">
-                    <div class="input-group">
-                        <span class="input-group-addon input-sm">
-                            <span class="glyphicon glyphicon-globe"></span>
-                        </span>
-                        <?= form_input([
-                            'name'  => 'website',
-                            'id'    => 'website',
-                            'class' => 'form-control input-sm',
-                            'value' => $config['website']
-                        ]) ?>
-                    </div>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Common.email'), 'email', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-6">
-                    <div class="input-group">
-                        <span class="input-group-addon input-sm">
-                            <span class="glyphicon glyphicon-envelope"></span>
-                        </span>
-                        <?= form_input([
-                            'name'  => 'email',
-                            'id'    => 'email',
-                            'type'  => 'email',
-                            'class' => 'form-control input-sm',
-                            'value' => $config['email']
-                        ]) ?>
-                    </div>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.phone'), 'phone', ['class' => 'control-label col-xs-2 required']) ?>
-                <div class="col-xs-6">
-                    <div class="input-group">
-                        <span class="input-group-addon input-sm">
-                            <span class="glyphicon glyphicon-phone-alt"></span>
-                        </span>
-                        <?= form_input([
-                            'name'  => 'phone',
-                            'id'    => 'phone',
-                            'class' => 'form-control input-sm required',
-                            'value' => $config['phone']
-                        ]) ?>
-                    </div>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.fax'), 'fax', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-6">
-                    <div class="input-group">
-                        <span class="input-group-addon input-sm">
-                            <span class="glyphicon glyphicon-phone-alt"></span>
-                        </span>
-                        <?= form_input([
-                            'name'  => 'fax',
-                            'id'    => 'fax',
-                            'class' => 'form-control input-sm',
-                            'value' => $config['fax']
-                        ]) ?>
-                    </div>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Common.return_policy'), 'return_policy', ['class' => 'control-label col-xs-2 required']) ?>
-                <div class="col-xs-6">
-                    <?= form_textarea([
-                        'name'  => 'return_policy',
-                        'id'    => 'return_policy',
-                        'class' => 'form-control input-sm required',
-                        'value' => $config['return_policy']
-                    ]) ?>
-                </div>
-            </div>
-
-            <?= form_submit([
-                'name'  => 'submit_info',
-                'id'    => 'submit_info',
-                'value' => lang('Common.submit'),
-                'class' => 'btn btn-primary btn-sm pull-right'
-            ]) ?>
-
-        </fieldset>
+        </div>
     </div>
+
+    <div class="row mb-3">
+        <label for="info-company_logo" class="form-label"><?= lang('Config.company_logo'); ?></label>
+        <div class="col-12 col-lg-6">
+            <div id="info-company_logo" class="w-100 fileinput <?= $logo_exists ? 'fileinput-exists' : 'fileinput-new'; ?>" data-provides="fileinput">
+                <div class="input-group mb-3" aria-describedby="company-logo-desc">
+                    <span class="input-group-text"><i class="bi bi-image"></i></span>
+                    <div class="fileinput-new form-control rounded-end mb-0" style="height: 200px; cursor: default;"></div>
+                    <div class="fileinput-exists fileinput-preview img-thumbnail form-control rounded-end mb-0 bg-light mh-100" style="height: 200px; cursor: default; background-size: 40px 40px; background-position: 0 0, 20px 20px; background-image: linear-gradient(45deg, white 25%, transparent 25%, transparent 75%, white 75%, white), linear-gradient(45deg, white 25%, transparent 25%, transparent 75%, white 75%, white);">
+                        <img class="mh-100 mw-100" data-src="holder.js/100%x100%" alt="<?= esc(lang('Config.company_logo')) ?>" src="<?= $logo_src ?>">
+                    </div>
+                </div>
+                <div type="button" class="btn btn-secondary btn-file me-2">
+                    <span class="fileinput-new"><i class="bi bi-hand-index me-2"></i><?= lang('Config.company_select_image') ?></span>
+                    <span class="fileinput-exists"><i class="bi bi-images me-2"></i><?= lang('Config.company_change_image') ?></span>
+                    <input type="file" name="company_logo">
+                </div>
+                <a type="button" class="btn btn-outline-secondary fileinput-exists" data-dismiss="fileinput">
+                    <i class="bi bi-eraser me-2"></i><?= lang('Config.company_remove_image') ?>
+                </a>
+            </div>
+        </div>
+        <div class="col-12 col-lg-6 form-text d-none d-lg-block" id="company-logo-desc">
+            <ul class="list-unstyled">
+                <li>&raquo; Supported file formats; gif, png, jpg</li> <!-- TODO-BS5 add to translations -->
+                <li>&raquo; Max upload size of 100kb</li> <!-- TODO-BS5 add to translations -->
+                <li>&raquo; Max dimensions of 200x200px</li> <!-- TODO-BS5 add to translations -->
+            </ul>
+        </div>
+    </div>
+
+    <label for="info-address" class="form-label"><?= lang('Config.address'); ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text"><i class="bi bi-house"></i></span>
+        <textarea class="form-control" name="address" id="info-address" rows="10" required><?= $config['address']; ?></textarea>
+        <div class="invalid-feedback"><?= lang('Config.address_required') ?></div>
+    </div>
+
+    <div class="row">
+        <div class="col-12 col-lg-6">
+            <label for="info-website" class="form-label"><?= lang('Config.website'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-globe"></i></span>
+                <input class="form-control" name="website" id="info-website" value="<?= $config['website']; ?>">
+            </div>
+        </div>
+
+        <div class="col-12 col-lg-6">
+            <label for="info-email" class="form-label"><?= lang('Config.email'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-at"></i></span>
+                <input type="email" class="form-control" name="email" id="info-email" value="<?= $config['email']; ?>">
+                <div class="invalid-feedback"><?= lang('Common.email_invalid_format') ?></div>
+            </div>
+        </div>
+
+        <div class="col-12 col-lg-6">
+            <label for="info-phone" class="form-label"><?= lang('Config.phone'); ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-telephone"></i></span>
+                <input type="tel" class="form-control" name="phone" id="info-phone" value="<?= $config['phone']; ?>" required>
+                <div class="invalid-feedback"><?= lang('Config.phone_required') ?></div>
+            </div>
+        </div>
+
+        <div class="col-12 col-lg-6">
+            <label for="info-fax" class="form-label"><?= lang('Config.fax'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-printer"></i></span>
+                <input type="tel" class="form-control" name="fax" id="info-fax" value="<?= $config['fax']; ?>">
+            </div>
+        </div>
+    </div>
+
+    <label for="info-return_policy" class="form-label"><?= lang('Common.return_policy'); ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text"><i class="bi bi-box-arrow-in-down-left"></i></span>
+        <textarea class="form-control" name="return_policy" id="info-return_policy" rows="10" required><?= $config['return_policy']; ?></textarea>
+        <div class="invalid-feedback"><?= lang('Config.return_policy_required') ?></div>
+    </div>
+
+    <div class="d-flex justify-content-end">
+        <button type="submit" class="btn btn-primary" name="submit_info"><?= lang('Common.submit'); ?></button>
+    </div>
+
 <?= form_close() ?>
 
 <script type="text/javascript">
@@ -167,7 +125,7 @@
 
         $('#info_config_form').validate($.extend(form_support.handler, {
 
-            errorLabelContainer: "#info_error_message_box",
+            errorLabelContainer: ".info_error_message_box",
 
             rules: {
                 company: "required",

app/Views/configs/integrations_config.php

@@ -5,64 +5,55 @@
  */
 ?>
 
-<?= form_open('config/saveMailchimp/', ['id' => 'mailchimp_config_form', 'enctype' => 'multipart/form-data', 'class' => 'form-horizontal']) ?>
-    <div id="config_wrapper">
-        <fieldset id="config_info">
+<?= form_open('config/saveMailchimp/', ['id' => 'mailchimp_config_form', 'enctype' => 'multipart/form-data']) ?>
 
-            <div id="required_fields_message"><?= lang('Common.fields_required_message') ?></div>
-            <div id="integrations_header"><?= lang('Config.mailchimp_configuration') ?></div>
-            <ul id="mailchimp_error_message_box" class="error_message_box"></ul>
+    <?php
+    $title_info['config_title'] = lang('Config.integrations_configuration');
+    echo view('configs/config_header', $title_info);
+    ?>
 
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.mailchimp_api_key'), 'mailchimp_api_key', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-4">
-                    <div class="input-group">
-                        <span class="input-group-addon input-sm">
-                            <span class="glyphicon glyphicon-cloud"></span>
-                        </span>
-                        <?= form_input([
-                            'name'  => 'mailchimp_api_key',
-                            'id'    => 'mailchimp_api_key',
-                            'class' => 'form-control input-sm',
-                            'value' => $mailchimp['api_key']
-                        ]) ?>
-                    </div>
-                </div>
-                <div class="col-xs-1">
-                    <label class="control-label">
-                        <a href="https://eepurl.com/b9a05b" target="_blank">
-                            <span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-placement="right" title="<?= lang('Config.mailchimp_tooltip') ?>"></span>
-                        </a>
-                    </label>
-                </div>
+    <legend class="fs-5"><?= lang('Config.mailchimp_configuration') ?></legend>
+    <ul id="error_message_box" class="mailchimp_error_message_box alert alert-warning d-none"></ul>
+
+    <div class="row">
+        <div class="col-12 col-lg-6">
+            <label for="mailchimp_api_key" class="form-label">
+                <?= lang('Config.mailchimp_api_key'); ?>
+                <!--<a href="https://eepurl.com/dyijVH" target="_blank" rel="noopener">
+                    <i class="bi bi-info-circle-fill text-secondary" data-bs-toggle="tooltip" title="<?= lang('Config.mailchimp_tooltip'); ?>"></i>
+                </a>-->
+            </label>
+            <div class="input-group">
+                <span class="input-group-text" id="mailchimp-api-key-icon"><i class="bi bi-key"></i></span>
+                <input type="text" class="form-control" name="mailchimp_api_key" id="mailchimp_api_key" aria-describedby="mailchimp-api-key-icon" value="<?= $mailchimp['api_key']; ?>">
             </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.mailchimp_lists'), 'mailchimp_list_id', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-4">
-                    <div class="input-group">
-                        <span class="input-group-addon input-sm">
-                            <span class="glyphicon glyphicon-user"></span>
-                        </span>
-                        <?= form_dropdown(
-                            'mailchimp_list_id',
-                            $mailchimp['lists'],
-                            $mailchimp['list_id'],
-                            'id="mailchimp_list_id" class="form-control input-sm"'
-                        ) ?>
-                    </div>
-                </div>
+            <div class="form-text mb-3">
+                <a class="link-secondary" href="https://eepurl.com/dyijVH" target="_blank" rel="noopener">
+                    <i class="bi bi-info-square pe-1"></i><?= lang('Config.mailchimp_tooltip') ?>
+                </a>
             </div>
+        </div>
 
-            <?= form_submit([
-                'name'  => 'submit_mailchimp',
-                'id'    => 'submit_mailchimp',
-                'value' => lang('Common.submit'),
-                'class' => 'btn btn-primary btn-sm pull-right'
-            ]) ?>
-
-        </fieldset>
+        <div class="col-12 col-lg-6">
+            <label for="mailchimp_list_id" class="form-label"><?= lang('Config.mailchimp_lists'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text" id="mailchimp-lists-icon"><i class="bi bi-list-stars"></i></span>
+                <select class="form-select" id="mailchimp_list_id" aria-describedby="mailchimp-lists-icon" <?= $mailchimp['api_key'] == null ? 'disabled' : '' ?>>
+                    <option>Choose...</option>
+                    <?php foreach($mailchimp['lists'] as $value => $display_text): ?>
+                        <option value="<?= $value; ?>" <?= $value == $mailchimp['list_id'] ? 'selected' : ''; ?>>
+                            <?= $display_text; ?>
+                        </option>
+                    <?php endforeach; ?>
+                </select>
+            </div>
+        </div>
     </div>
+
+    <div class="d-flex justify-content-end">
+        <button type="submit" class="btn btn-primary" name="sumbit_mailchimp"><?= lang('Common.submit'); ?></button>
+    </div>
+
 <?= form_close() ?>
 
 <script type="text/javascript">
@@ -74,6 +65,7 @@
                 },
                 function(response) {
                     $.notify({
+                        icon: 'bi bi-bell-fill',
                         message: response.message
                     }, {
                         type: response.success ? 'success' : 'danger'
@@ -102,7 +94,7 @@
                 });
             },
 
-            errorLabelContainer: '#mailchimp_error_message_box'
+            errorLabelContainer: '.mailchimp_error_message_box'
         }));
     });
 </script>

app/Views/configs/invoice_config.php

@@ -6,193 +6,135 @@
  */
 ?>
 
-<?= form_open('config/saveInvoice/', ['id' => 'invoice_config_form', 'class' => 'form-horizontal']) ?>
-    <div id="config_wrapper">
-        <fieldset id="config_info">
+<?= form_open('config/saveInvoice/', ['id' => 'invoice_config_form']) ?>
 
-            <div id="required_fields_message"><?= lang('Common.fields_required_message') ?></div>
-            <ul id="invoice_error_message_box" class="error_message_box"></ul>
+    <?php
+    $title_info['config_title'] = lang('Config.invoice_configuration');
+    echo view('configs/config_header', $title_info);
+    ?>
 
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.invoice_enable'), 'invoice_enable', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-1">
-                    <?= form_checkbox([
-                        'name'    => 'invoice_enable',
-                        'value'   => 'invoice_enable',
-                        'id'      => 'invoice_enable',
-                        'checked' => $config['invoice_enable'] == 1
-                    ]) ?>
-                </div>
-            </div>
+    <ul id="error_message_box" class="invoice_error_message_box alert alert-warning d-none"></ul>
 
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.invoice_type'), 'invoice_type', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-3">
-                    <?= form_dropdown(
-                        'invoice_type',
-                        $invoice_type_options,
-                        $config['invoice_type'],
-                        'class="form-control input-sm"'
-                    ) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.recv_invoice_format'), 'recv_invoice_format', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_input([
-                        'name'  => 'recv_invoice_format',
-                        'id'    => 'recv_invoice_format',
-                        'class' => 'form-control input-sm',
-                        'value' => $config['recv_invoice_format']
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.invoice_default_comments'), 'invoice_default_comments', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-5">
-                    <?= form_textarea([
-                        'name'  => 'invoice_default_comments',
-                        'id'    => 'invoice_default_comments',
-                        'class' => 'form-control input-sm',
-                        'value' => $config['invoice_default_comments']
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.invoice_email_message'), 'invoice_email_message', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-5">
-                    <?= form_textarea([
-                        'name'  => 'invoice_email_message',
-                        'id'    => 'invoice_email_message',
-                        'class' => 'form-control input-sm',
-                        'value' => $config['invoice_email_message']
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.line_sequence'), 'line_sequence', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_dropdown(
-                        'line_sequence',
-                        $line_sequence_options,
-                        $config['line_sequence'],
-                        'class="form-control input-sm"'
-                    ) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.sales_invoice_format'), 'sales_invoice_format', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_input([
-                        'name'  => 'sales_invoice_format',
-                        'id'    => 'sales_invoice_format',
-                        'class' => 'form-control input-sm',
-                        'value' => $config['sales_invoice_format']
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.last_used_invoice_number'), 'last_used_invoice_number', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_input([
-                        'type'  => 'number',
-                        'name'  => 'last_used_invoice_number',
-                        'id'    => 'last_used_invoice_number',
-                        'class' => 'form-control input-sm required',
-                        'value' => $config['last_used_invoice_number']
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.sales_quote_format'), 'sales_quote_format', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_input([
-                        'name'  => 'sales_quote_format',
-                        'id'    => 'sales_quote_format',
-                        'class' => 'form-control input-sm',
-                        'value' => $config['sales_quote_format']
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.last_used_quote_number'), 'last_used_quote_number', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_input([
-                        'type'  => 'number',
-                        'name'  => 'last_used_quote_number',
-                        'id'    => 'last_used_quote_number',
-                        'class' => 'form-control input-sm required',
-                        'value' => $config['last_used_quote_number']
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.quote_default_comments'), 'quote_default_comments', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-5">
-                    <?= form_textarea([
-                        'name'  => 'quote_default_comments',
-                        'id'    => 'quote_default_comments',
-                        'class' => 'form-control input-sm',
-                        'value' => $config['quote_default_comments']
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.work_order_enable'), 'work_order_enable', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-1">
-                    <?= form_checkbox([
-                        'name'    => 'work_order_enable',
-                        'value'   => 'work_order_enable',
-                        'id'      => 'work_order_enable',
-                        'checked' => $config['work_order_enable'] == 1
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.work_order_format'), 'work_order_format', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_input([
-                        'name'  => 'work_order_format',
-                        'id'    => 'work_order_format',
-                        'class' => 'form-control input-sm',
-                        'value' => $config['work_order_format']
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.last_used_work_order_number'), 'last_used_work_order_number', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_input([
-                        'type'  => 'number',
-                        'name'  => 'last_used_work_order_number',
-                        'id'    => 'last_used_work_order_number',
-                        'class' => 'form-control input-sm required',
-                        'value' => $config['last_used_work_order_number']
-                    ]) ?>
-                </div>
-            </div>
-
-            <?= form_submit([
-                'name'  => 'submit_invoice',
-                'id'    => 'submit_invoice',
-                'value' => lang('Common.submit'),
-                'class' => 'btn btn-primary btn-sm pull-right'
-            ]) ?>
-
-        </fieldset>
+    <div class="form-check form-switch mb-3">
+        <input class="form-check-input" type="checkbox" role="switch" id="invoice_enable" name="invoice_enable" value="invoice_enable" <?= $config['invoice_enable'] == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="invoice_enable"><?= lang('Config.invoice_enable'); ?></label>
     </div>
+
+    <div class="row">
+        <div class="col-12 col-lg-6">
+            <label for="invoice_type" class="form-label"><?= lang('Config.invoice_type'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-file-code"></i></span>
+                <select class="form-select" name="invoice_type">
+                    <?php foreach ($invoice_type_options as $key => $value): ?>
+                        <option value="<?= $key ?>" <?= $key == $config['invoice_type'] ? 'selected' : '' ?>><?= $value ?></option>
+                    <?php endforeach; ?>
+                </select>
+            </div>
+        </div>
+
+        <div class="col-12 col-lg-6">
+            <label for="recv_invoice_format" class="form-label"><?= lang('Config.recv_invoice_format'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-braces"></i></span>
+                <input type="text" class="form-control" name="recv_invoice_format" id="recv_invoice_format" value="<?= $config['recv_invoice_format']; ?>">
+            </div>
+        </div>
+    </div>
+
+    <label for="invoice_default_comments" class="form-label"><?= lang('Config.invoice_default_comments'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text"><i class="bi bi-file-text"></i></span>
+        <textarea class="form-control" name="invoice_default_comments" id="invoice_default_comments" rows="10" required><?= $config['invoice_default_comments']; ?></textarea>
+    </div>
+
+    <label for="invoice_email_message" class="form-label"><?= lang('Config.invoice_email_message'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text"><i class="bi bi-envelope-paper"></i></span>
+        <textarea class="form-control" name="invoice_email_message" id="invoice_email_message" rows="10" required><?= $config['invoice_email_message']; ?></textarea>
+    </div>
+
+    <div class="row">
+        <div class="col-12 col-lg-6">
+            <label for="line_sequence" class="form-label"><?= lang('Config.line_sequence'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-list-ol"></i></span>
+                <select class="form-select" name="line_sequence">
+                <?php foreach ($line_sequence_options as $key => $value): ?>
+                    <option value="<?= $key ?>" <?= $key == $config['line_sequence'] ? 'selected' : '' ?>><?= $value ?></option>
+                <?php endforeach; ?>
+            </select>
+            </div>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-12 col-lg-6">
+            <label for="sales_invoice_format" class="form-label"><?= lang('Config.sales_invoice_format'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-braces"></i></span>
+                <input type="text" class="form-control" name="sales_invoice_format" id="sales_invoice_format" value="<?= $config['sales_invoice_format']; ?>">
+            </div>
+        </div>
+
+        <div class="col-12 col-lg-6">
+            <label for="last_used_invoice_number" class="form-label"><?= lang('Config.last_used_invoice_number'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-123"></i></span>
+                <input type="number" class="form-control" name="last_used_invoice_number" id="last_used_invoice_number" value="<?= $config['last_used_invoice_number']; ?>">
+            </div>
+        </div>
+
+        <div class="col-12 col-lg-6">
+            <label for="sales_quote_format" class="form-label"><?= lang('Config.sales_quote_format'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-braces"></i></span>
+                <input type="text" class="form-control" name="sales_quote_format" id="sales_quote_format" value="<?= $config['sales_quote_format']; ?>">
+            </div>
+        </div>
+
+        <div class="col-12 col-lg-6">
+            <label for="last_used_quote_number" class="form-label"><?= lang('Config.last_used_quote_number'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-123"></i></span>
+                <input type="number" class="form-control" name="last_used_quote_number" id="last_used_quote_number" value="<?= $config['last_used_quote_number']; ?>">
+            </div>
+        </div>
+    </div>
+
+    <label for="quote_default_comments" class="form-label"><?= lang('Config.quote_default_comments'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text"><i class="bi bi-file-text"></i></span>
+        <textarea class="form-control" name="quote_default_comments" id="quote_default_comments" rows="10" required><?= $config['quote_default_comments']; ?></textarea>
+    </div>
+
+    <div class="form-check form-switch mb-3">
+        <input class="form-check-input" type="checkbox" role="switch" id="work_order_enable" name="work_order_enable" value="work_order_enable" <?= $config['work_order_enable'] == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="work_order_enable"><?= lang('Config.work_order_enable'); ?></label>
+    </div>
+
+    <div class="row">
+        <div class="col-12 col-lg-6">
+            <label for="work_order_format" class="form-label"><?= lang('Config.work_order_format'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-braces"></i></span>
+                <input type="text" class="form-control" name="work_order_format" id="work_order_format" value="<?= $config['work_order_format']; ?>">
+            </div>
+        </div>
+
+        <div class="col-12 col-lg-6">
+            <label for="last_used_work_order_number" class="form-label"><?= lang('Config.last_used_work_order_number'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-123"></i></span>
+                <input type="number" class="form-control" name="last_used_work_order_number" id="last_used_work_order_number" value="<?= $config['last_used_work_order_number']; ?>">
+            </div>
+        </div>
+    </div>
+
+    <div class="d-flex justify-content-end">
+        <button type="submit" class="btn btn-primary" name="submit_invoice"><?= lang('Common.submit'); ?></button>
+    </div>
+
 <?= form_close() ?>
 
 <script type="text/javascript">
@@ -225,7 +167,7 @@
 
         $("#invoice_config_form").validate($.extend(form_support.handler, {
 
-            errorLabelContainer: "#invoice_error_message_box",
+            errorLabelContainer: ".invoice_error_message_box",
 
             submitHandler: function(form) {
                 $(form).ajaxSubmit({
@@ -235,6 +177,7 @@
                     },
                     success: function(response) {
                         $.notify({
+                            icon: 'bi bi-bell-fill',
                             message: response.message
                         }, {
                             type: response.success ? 'success' : 'danger'

app/Views/configs/license_config.php

@@ -4,29 +4,25 @@
  */
 ?>
 
-<?= form_open('', ['id' => 'license_config_form', 'enctype' => 'multipart/form-data', 'class' => 'form-horizontal']) ?>
-    <div id="config_wrapper">
-        <fieldset>
+<?= form_open('', ['id' => 'license_config_form', 'enctype' => 'multipart/form-data']) ?>
 
-            <?php
-            $counter = 0;
-            foreach ($licenses as $license) {
-            ?>
-                <div class="form-group form-group-sm">
-                    <?= form_label($license['title'], 'license', ['class' => 'control-label col-xs-3']) ?>
-                    <div class="col-xs-6">
-                        <?= form_textarea([
-                            'name'     => 'license',
-                            'id'       => 'license_' . $counter++,    // TODO: String Interpolation
-                            'class'    => 'form-control font-monospace',
-                            'rows'     => '14',
-                            'readonly' => '',
-                            'value'    => $license['text']
-                        ]) ?>
-                    </div>
-                </div>
-            <?php } ?>
+    <?php
+    $title_info['config_title'] = lang('Config.license_configuration');
+    echo view('configs/config_header', $title_info);
+    ?>
+
+    <?php
+    $license_i = 0;
+    foreach ($licenses as $license) {
+    ?>
+
+        <div class="mb-3 mx-3 mx-lg-0">
+            <label for="license_<?= $license_i; ?>" class="form-label"><?= $license['title']; ?></label>
+            <textarea name="license" rows="10" id="license_<?= $license_i; ?>" class="form-control font-monospace" style="font-size: .875rem;" readonly><?= $license['text']; ?></textarea>
+        </div>
+
+    <?php
+    $license_i++; // Increment counter
+    } ?>
 
-        </fieldset>
-    </div>
 <?= form_close() ?>

app/Views/configs/locale_config.php

@@ -5,285 +5,245 @@
  * @var string $controller_name
  * @var array $config
  */
+
+ $beta = '<sup><span class="badge bg-secondary">BETA</span></sup>';
 ?>
 
-<?= form_open('config/saveLocale/', ['id' => 'locale_config_form', 'class' => 'form-horizontal']) ?>
-    <div id="config_wrapper">
-        <fieldset id="config_info">
+<?= form_open('config/saveLocale/', ['id' => 'locale_config_form']) ?>
 
-            <div id="required_fields_message"><?= lang('Common.fields_required_message') ?></div>
-            <ul id="locale_error_message_box" class="error_message_box"></ul>
+    <?php
+    $title_info['config_title'] = lang('Config.locale_configuration');
+    echo view('configs/config_header', $title_info);
+    ?>
 
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.number_locale'), 'number_locale', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-1">
-                    <?= form_input([
-                        'name'  => 'number_locale',
-                        'id'    => 'number_locale',
-                        'class' => 'form-control input-sm',
-                        'value' => $config['number_locale']
-                    ]) ?>
-                    <?= form_hidden(['name' => 'save_number_locale', 'value' => $config['number_locale']]) ?>
-                </div>
-                <div class="col-xs-2">
-                    <label class="control-label">
-                        <a href="https://github.com/opensourcepos/opensourcepos/wiki/Localisation-support" target="_blank">
-                            <span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-placement="right" title="<?= lang('Config.number_locale_tooltip') ?>"></span>
-                        </a>
-                        <span id="number_locale_example">
-                            &nbsp;&nbsp;<?= to_currency(1234567890.12300) ?>
-                        </span>
-                    </label>
-                </div>
+    <ul id="error_message_box" class="locale_error_message_box alert alert-warning d-none"></ul>
+
+    <div class="row">
+        <div class="col-12 col-sm-6 col-xxl-3">
+            <label for="number_locale" class="form-label"><?= lang('Config.number_locale') ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-globe-americas"></i></span>
+                <input type="text" class="form-control" name="number_locale" id="number_locale" value="<?= $config['number_locale'] ?>">
             </div>
+        </div>
 
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.thousands_separator'), 'thousands_separator', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_checkbox([
-                        'name'    => 'thousands_separator',
-                        'id'      => 'thousands_separator',
-                        'value'   => 'thousands_separator',
-                        'checked' => $config['thousands_separator'] == 1
-                    ]) ?>
-                </div>
+        <div class="col-12 col-sm-6 col-xxl-3">
+            <label for="number_locale_example" class="form-label">Localization Example</label>
+            <div class="mb-3" id="number_locale_example">
+                <?= to_currency(1234567890.12300) ?>&nbsp;
+                <a href="https://github.com/opensourcepos/opensourcepos/wiki/Localisation-support" target="_blank" rel="noopener">
+                    <i class="bi bi-link-45deg link-secondary" data-bs-toggle="tooltip" title="<?= lang('Config.number_locale_tooltip'); ?>"></i>
+                </a>
             </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.currency_symbol'), 'currency_symbol', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-1">
-                    <?= form_input([
-                        'name'  => 'currency_symbol',
-                        'id'    => 'currency_symbol',
-                        'class' => 'form-control input-sm number_locale',
-                        'value' => $config['currency_symbol']
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.currency_code'), 'currency_code', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-1">
-                    <?= form_input([
-                        'name'  => 'currency_code',
-                        'id'    => 'currency_code',
-                        'class' => 'form-control input-sm number_locale',
-                        'value' => $currency_code
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.currency_decimals'), 'currency_decimals', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_dropdown(
-                        'currency_decimals',
-                        [
-                            '0' => '0',
-                            '1' => '1',
-                            '2' => '2'
-                        ],
-                        $config['currency_decimals'],
-                        ['class' => 'form-control input-sm']
-                    ) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.tax_decimals'), 'tax_decimals', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_dropdown(
-                        'tax_decimals',
-                        [
-                            '0' => '0',
-                            '1' => '1',
-                            '2' => '2',
-                            '3' => '3',
-                            '4' => '4'
-                        ],
-                        $config['tax_decimals'],
-                        ['class' => 'form-control input-sm']
-                    ) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.quantity_decimals'), 'quantity_decimals', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_dropdown(
-                        'quantity_decimals',
-                        [
-                            '0' => '0',
-                            '1' => '1',
-                            '2' => '2',
-                            '3' => '3'
-                        ],
-                        $config['quantity_decimals'],
-                        ['class' => 'form-control input-sm']
-                    ) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.cash_decimals'), 'cash_decimals', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_dropdown(
-                        'cash_decimals',
-                        [
-                            '-1' => '-1',
-                            '0'  => '0',
-                            '1'  => '1',
-                            '2'  => '2'
-                        ],
-                        $config['cash_decimals'],
-                        ['class' => 'form-control input-sm']
-                    ) ?>
-                </div>
-                <div class="col-xs-1">
-                    <label class="control-label">
-                        <span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-placement="right" title="<?= lang('Config.cash_decimals_tooltip') ?>"></span>
-                    </label>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.cash_rounding'), 'cash_rounding_code', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_dropdown(
-                        'cash_rounding_code',
-                        $rounding_options,
-                        $config['cash_rounding_code'],
-                        'class="form-control input-sm"'
-                    ) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.payment_options_order'), 'payment_options_order', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-4">
-                    <?= form_dropdown(
-                        'payment_options_order',
-                        [
-                            'cashdebitcredit' => lang('Sales.cash') . ' / ' . lang('Sales.debit') . ' / ' . lang('Sales.credit'),
-                            'debitcreditcash' => lang('Sales.debit') . ' / ' . lang('Sales.credit') . ' / ' . lang('Sales.cash'),
-                            'debitcashcredit' => lang('Sales.debit') . ' / ' . lang('Sales.cash') . ' / ' . lang('Sales.credit'),
-                            'creditdebitcash' => lang('Sales.credit') . ' / ' . lang('Sales.debit') . ' / ' . lang('Sales.cash'),
-                            'creditcashdebit' => lang('Sales.credit') . ' / ' . lang('Sales.cash') . ' / ' . lang('Sales.debit')
-                        ],
-                        $config['payment_options_order'],
-                        'class="form-control input-sm"'
-                    ) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.country_codes'), 'country_codes', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-1">
-                    <?= form_input([
-                        'name'  => 'country_codes',
-                        'class' => 'form-control input-sm',
-                        'value' => $config['country_codes']
-                    ]) ?>
-                </div>
-                <div class="col-xs-1">
-                    <label class="control-label">
-                        <a href="https://wiki.openstreetmap.org/wiki/Nominatim/Country_Codes" target="_blank">
-                            <span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-placement="right" title="<?= lang('Config.country_codes_tooltip'); ?>"></span>
-                        </a>
-                    </label>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.language'), 'language', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-4">
-                    <?= form_dropdown(
-                        'language',
-                        get_languages(),
-                        current_language_code(true) . ':' . current_language(true),
-                        ['class' => 'form-control input-sm']
-                    ) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.timezone'), 'timezone', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-4">
-                    <?= form_dropdown(
-                        'timezone',
-                        get_timezones(),
-                        $config['timezone'] ? $config['timezone'] : date_default_timezone_get(),
-                        ['class' => 'form-control input-sm']
-                    ) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.datetimeformat'), 'datetimeformat', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-sm-2">
-                    <?= form_dropdown(
-                        'dateformat',
-                        get_dateformats(),
-                        $config['dateformat'],
-                        ['class' => 'form-control input-sm']
-                    ) ?>
-                </div>
-                <div class="col-sm-2">
-                    <?= form_dropdown(
-                        'timeformat',
-                        get_timeformats(),
-                        $config['timeformat'],
-                        ['class' => 'form-control input-sm']
-                    ) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.date_or_time_format'), 'date_or_time_format', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_checkbox([
-                        'name'    => 'date_or_time_format',
-                        'id'      => 'date_or_time_format',
-                        'value'   => 'date_or_time_format',
-                        'checked' => $config['date_or_time_format'] == 1
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.financial_year'), 'financial_year', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_dropdown(
-                        'financial_year',
-                        [
-                            '1'  => lang('Config.financial_year_jan'),
-                            '2'  => lang('Config.financial_year_feb'),
-                            '3'  => lang('Config.financial_year_mar'),
-                            '4'  => lang('Config.financial_year_apr'),
-                            '5'  => lang('Config.financial_year_may'),
-                            '6'  => lang('Config.financial_year_jun'),
-                            '7'  => lang('Config.financial_year_jul'),
-                            '8'  => lang('Config.financial_year_aug'),
-                            '9'  => lang('Config.financial_year_sep'),
-                            '10' => lang('Config.financial_year_oct'),
-                            '11' => lang('Config.financial_year_nov'),
-                            '12' => lang('Config.financial_year_dec')
-                        ],
-                        $config['financial_year'],
-                        ['class' => 'form-control input-sm']
-                    ) ?>
-                </div>
-            </div>
-
-            <?= form_submit([
-                'name'  => 'submit_locale',
-                'id'    => 'submit_locale',
-                'value' => lang('Common.submit'),
-                'class' => 'btn btn-primary btn-sm pull-right'
-            ]) ?>
-
-        </fieldset>
+        </div>
     </div>
+
+    <div class="form-check form-switch mb-3">
+        <input class="form-check-input" type="checkbox" role="switch" id="thousands_separator" name="thousands_separator" value="thousands_separator" <?= $config['thousands_separator'] == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="thousands_separator"><?= lang('Config.thousands_separator'); ?></label>
+    </div>
+
+    <div class="row">
+        <div class="col-12 col-sm-6 col-xxl-3">
+            <label for="currency_symbol" class="form-label"><?= lang('Config.currency_symbol') ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-currency-exchange"></i></span>
+                <input type="text" class="form-control" name="currency_symbol" id="currency_symbol" value="<?= $config['currency_symbol'] ?>">
+            </div>
+        </div>
+
+        <div class="col-12 col-sm-6 col-xxl-3">
+            <label for="currency_code" class="form-label"><?= lang('Config.currency_code') ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-cash"></i></span>
+                <input type="text" class="form-control" name="currency_code" id="currency_code" value="<?= $currency_code ?>">
+            </div>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-12 col-sm-6 col-xxl-3">
+            <label for="currency_decimals" class="form-label"><?= lang('Config.currency_decimals') ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-coin"></i></span>
+                <select class="form-select" name="currency_decimals" id="currency_decimals">
+                    <option value="0" <?= $config['currency_decimals'] == '0' ? 'selected' : '' ?>>0</option>
+                    <option value="1" <?= $config['currency_decimals'] == '1' ? 'selected' : '' ?>>1</option>
+                    <option value="2" <?= $config['currency_decimals'] == '2' ? 'selected' : '' ?>>2</option>
+                </select>
+            </div>
+        </div>
+
+        <div class="col-12 col-sm-6 col-xxl-3">
+            <label for="tax_decimals" class="form-label"><?= lang('Config.tax_decimals') ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-archive"></i></span>
+                <select class="form-select" name="tax_decimals" id="tax_decimals">
+                    <option value="0" <?= $config['tax_decimals'] == '0' ? 'selected' : '' ?>>0</option>
+                    <option value="1" <?= $config['tax_decimals'] == '1' ? 'selected' : '' ?>>1</option>
+                    <option value="2" <?= $config['tax_decimals'] == '2' ? 'selected' : '' ?>>2</option>
+                    <option value="3" <?= $config['tax_decimals'] == '3' ? 'selected' : '' ?>>3</option>
+                    <option value="4" <?= $config['tax_decimals'] == '4' ? 'selected' : '' ?>>4</option>
+                </select>
+            </div>
+        </div>
+
+        <div class="col-12 col-sm-6 col-xxl-3">
+            <label for="quantity_decimals" class="form-label"><?= lang('Config.quantity_decimals') ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-123"></i></span>
+                <select class="form-select" name="quantity_decimals" id="quantity_decimals">
+                    <option value="0" <?= $config['quantity_decimals'] == '0' ? 'selected' : '' ?>>0</option>
+                    <option value="1" <?= $config['quantity_decimals'] == '1' ? 'selected' : '' ?>>1</option>
+                    <option value="2" <?= $config['quantity_decimals'] == '2' ? 'selected' : '' ?>>2</option>
+                    <option value="3" <?= $config['quantity_decimals'] == '3' ? 'selected' : '' ?>>3</option>
+                </select>
+            </div>
+        </div>
+
+        <div class="col-12 col-sm-6 col-xxl-3">
+            <label for="cash_decimals" class="form-label"><?= lang('Config.cash_decimals') ?>
+                <i class="bi bi-info-circle-fill text-secondary" data-bs-toggle="tooltip" title="<?= lang('Config.cash_decimals_tooltip'); ?>"></i>
+            </label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-cash-coin"></i></span>
+                <select class="form-select" name="cash_decimals" id="cash_decimals">
+                    <option value="0" <?= $config['cash_decimals'] == '0' ? 'selected' : '' ?>>0</option>
+                    <option value="1" <?= $config['cash_decimals'] == '1' ? 'selected' : '' ?>>1</option>
+                    <option value="2" <?= $config['cash_decimals'] == '2' ? 'selected' : '' ?>>2</option>
+                </select>
+            </div>
+        </div>
+
+        <div class="col-12 col-sm-6 col-xxl-3">
+            <label for="cash_rounding_code" class="form-label"><?= lang('Config.cash_rounding') ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-arrow-repeat"></i></span>
+                <select class="form-select" name="cash_rounding_code" id="cash_rounding_code">
+                    <?php foreach ($rounding_options as $code => $label): ?>
+                        <option value="<?= $code ?>" <?= $config['cash_rounding_code'] == $code ? 'selected' : '' ?>><?= $label ?></option>
+                    <?php endforeach; ?>
+                </select>
+            </div>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-12 col-lg-6">
+            <label for="payment_options_order" class="form-label"><?= lang('Config.payment_options_order') ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-credit-card"></i></span>
+                <select class="form-select" name="payment_options_order" id="payment_options_order">
+                    <option value="cashdebitcredit" <?= $config['payment_options_order'] == 'cashdebitcredit' ? 'selected' : '' ?>><?= lang('Sales.cash') ?> / <?= lang('Sales.debit') ?> / <?= lang('Sales.credit') ?></option>
+                    <option value="debitcreditcash" <?= $config['payment_options_order'] == 'debitcreditcash' ? 'selected' : '' ?>><?= lang('Sales.debit') ?> / <?= lang('Sales.credit') ?> / <?= lang('Sales.cash') ?></option>
+                    <option value="debitcashcredit" <?= $config['payment_options_order'] == 'debitcashcredit' ? 'selected' : '' ?>><?= lang('Sales.debit') ?> / <?= lang('Sales.cash') ?> / <?= lang('Sales.credit') ?></option>
+                    <option value="creditdebitcash" <?= $config['payment_options_order'] == 'creditdebitcash' ? 'selected' : '' ?>><?= lang('Sales.credit') ?> / <?= lang('Sales.debit') ?> / <?= lang('Sales.cash') ?></option>
+                    <option value="creditcashdebit" <?= $config['payment_options_order'] == 'creditcashdebit' ? 'selected' : '' ?>><?= lang('Sales.credit') ?> / <?= lang('Sales.cash') ?> / <?= lang('Sales.debit') ?></option>
+                </select>
+            </div>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-12 col-lg-6">
+            <label for="country_codes" class="form-label">
+                <?= lang('Config.country_codes') ?>
+                <a href="https://wiki.openstreetmap.org/wiki/Nominatim/Country_Codes" target="_blank" rel="noopener">
+                    <i class="bi bi-link-45deg text-secondary" data-bs-toggle="tooltip" title="<?= lang('Config.country_codes_tooltip'); ?>"></i>
+                </a>
+            </label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-code"></i></span>
+                <input type="text" class="form-control" name="country_codes" id="country_codes" value="<?= $config['country_codes'] ?>">
+            </div>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-12 col-lg-6">
+            <label for="language" class="form-label"><?= lang('Config.language') ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-translate"></i></span>
+                <select class="form-select" name="language" id="language">
+                    <?php foreach (get_languages() as $value => $label): ?>
+                        <option value="<?= esc($value) ?>" <?= $value === current_language_code(true) . ':' . current_language(true) ? 'selected' : '' ?>><?= esc($label) ?></option>
+                    <?php endforeach; ?>
+                </select>
+            </div>
+        </div>
+    </div>
+
+    <div class="form-check form-switch mb-3">
+        <input class="form-check-input" type="checkbox" role="switch" id="rtl_language" name="rtl_language" value="rtl_language" <?= $config['rtl_language'] == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="rtl_language">RTL Language <?= $beta; ?></label>
+    </div>
+
+    <div class="row">
+        <div class="col-12 col-lg-6">
+            <label for="timezone" class="form-label"><?= lang('Config.timezone') ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-clock"></i></span>
+                <?= form_dropdown(
+                    'timezone',
+                    get_timezones(),
+                    $config['timezone'] ? $config['timezone'] : date_default_timezone_get(),
+                    ['class' => 'form-select']
+                ) ?>
+            </div>
+        </div>
+
+        <div class="col-12 col-lg-6">
+            <label for="datetimeformat" class="form-label"><?= lang('Config.datetimeformat') ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-calendar2"></i></span>
+                <?= form_dropdown(
+                    'dateformat',
+                    get_dateformats(),
+                    $config['dateformat'],
+                    ['class' => 'form-select']
+                ) ?>
+                <?= form_dropdown(
+                    'timeformat',
+                    get_timeformats(),
+                    $config['timeformat'],
+                    ['class' => 'form-select']
+                ) ?>
+            </div>
+        </div>
+    </div>
+
+    <div class="form-check form-switch mb-3">
+        <input class="form-check-input" type="checkbox" role="switch" id="date_or_time_format" name="date_or_time_format" value="date_or_time_format" <?= $config['date_or_time_format'] == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="date_or_time_format"><?= lang('Config.date_or_time_format'); ?></label>
+    </div>
+
+    <div class="row">
+        <div class="col-12 col-lg-6">
+            <label for="financial_year" class="form-label"><?= lang('Config.financial_year') ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-calendar2-month"></i></span>
+                <select class="form-select" name="financial_year" id="financial_year">
+                    <option value="1" <?= ($config['financial_year'] == '1' ? 'selected' : ''); ?>><?= lang('Config.financial_year_jan'); ?></option>
+                    <option value="2" <?= ($config['financial_year'] == '2' ? 'selected' : ''); ?>><?= lang('Config.financial_year_feb'); ?></option>
+                    <option value="3" <?= ($config['financial_year'] == '3' ? 'selected' : ''); ?>><?= lang('Config.financial_year_mar'); ?></option>
+                    <option value="4" <?= ($config['financial_year'] == '4' ? 'selected' : ''); ?>><?= lang('Config.financial_year_apr'); ?></option>
+                    <option value="5" <?= ($config['financial_year'] == '5' ? 'selected' : ''); ?>><?= lang('Config.financial_year_may'); ?></option>
+                    <option value="6" <?= ($config['financial_year'] == '6' ? 'selected' : ''); ?>><?= lang('Config.financial_year_jun'); ?></option>
+                    <option value="7" <?= ($config['financial_year'] == '7' ? 'selected' : ''); ?>><?= lang('Config.financial_year_jul'); ?></option>
+                    <option value="8" <?= ($config['financial_year'] == '8' ? 'selected' : ''); ?>><?= lang('Config.financial_year_aug'); ?></option>
+                    <option value="9" <?= ($config['financial_year'] == '9' ? 'selected' : ''); ?>><?= lang('Config.financial_year_sep'); ?></option>
+                    <option value="10" <?= ($config['financial_year'] == '10' ? 'selected' : ''); ?>><?= lang('Config.financial_year_oct'); ?></option>
+                    <option value="11" <?= ($config['financial_year'] == '11' ? 'selected' : ''); ?>><?= lang('Config.financial_year_nov'); ?></option>
+                    <option value="12" <?= ($config['financial_year'] == '12' ? 'selected' : ''); ?>><?= lang('Config.financial_year_dec'); ?></option>
+                </select>
+            </div>
+        </div>
+    </div>
+
+    <div class="d-flex justify-content-end">
+        <button type="submit" class="btn btn-primary" name="submit_locale"><?= lang('Common.submit'); ?></button>
+    </div>
+
 <?= form_close() ?>
 
 <script type="text/javascript">
@@ -354,7 +314,7 @@
                 }
             },
 
-            errorLabelContainer: '#locale_error_message_box'
+            errorLabelContainer: '.locale_error_message_box'
         }));
     });
 </script>

app/Views/configs/manage.php

@@ -1,79 +1,66 @@
+<?php
+$tabs = [
+    ['id' => 'info',         'icon' => 'bi-shop',                'label' => lang('Config.info'),         'title' => lang('Config.info_configuration')],
+    ['id' => 'general',      'icon' => 'bi-sliders',             'label' => lang('Config.general'),      'title' => lang('Config.general_configuration')],
+    ['id' => 'appearance',   'icon' => 'bi-eye',                 'label' => 'Appearance',                'title' => 'Appearance Configuration'],
+    ['id' => 'locale',       'icon' => 'bi-translate',           'label' => lang('Config.locale'),       'title' => lang('Config.locale_configuration')],
+    ['id' => 'tax',          'icon' => 'bi-piggy-bank',          'label' => lang('Config.tax'),          'title' => lang('Config.tax_configuration')],
+    ['id' => 'barcode',      'icon' => 'bi-upc-scan',            'label' => lang('Config.barcode'),      'title' => lang('Config.barcode_configuration')],
+    ['id' => 'stock',        'icon' => 'bi-truck',               'label' => lang('Config.location'),     'title' => lang('Config.location_configuration')],
+    ['id' => 'receipt',      'icon' => 'bi-receipt',             'label' => lang('Config.receipt'),      'title' => lang('Config.receipt_configuration')],
+    ['id' => 'invoice',      'icon' => 'bi-file-text',           'label' => lang('Config.invoice'),      'title' => lang('Config.invoice_configuration')],
+    ['id' => 'shortcuts',    'icon' => 'bi-shift',               'label' => lang('Config.shortcuts'),    'title' => lang('Config.shortcuts_configuration')],
+    ['id' => 'reward',       'icon' => 'bi-trophy',              'label' => lang('Config.reward'),       'title' => lang('Config.reward_configuration')],
+    ['id' => 'table',        'icon' => 'bi-cup-straw',           'label' => lang('Config.table'),        'title' => lang('Config.table_configuration')],
+    ['id' => 'email',        'icon' => 'bi-envelope',            'label' => lang('Config.email'),        'title' => lang('Config.email_configuration')],
+    ['id' => 'message',      'icon' => 'bi-chat',                'label' => lang('Config.message'),      'title' => lang('Config.message_configuration')],
+    ['id' => 'integrations', 'icon' => 'bi-gear-wide-connected', 'label' => lang('Config.integrations'), 'title' => lang('Config.integrations_configuration')],
+    ['id' => 'system',       'icon' => 'bi-info-circle',         'label' => lang('Config.system_info'),  'title' => lang('Config.system_info'), 'view' => 'configs/system_info'],
+    ['id' => 'license',      'icon' => 'bi-journal-check',       'label' => lang('Config.license'),      'title' => lang('Config.license_configuration')],
+];
+?>
 <?= view('partial/header') ?>
 
-<script type="text/javascript">
-    dialog_support.init("a.modal-dlg");
-</script>
+<script type="text/javascript" src="resources/clipboard/clipboard.min.js"></script>
 
-<ul class="nav nav-tabs" data-tabs="tabs">
-    <li class="active" role="presentation">
-        <a data-toggle="tab" href="#info_tab" title="<?= lang('Config.info_configuration') ?>"><?= lang('Config.info') ?></a>
-    </li>
-    <li role="presentation">
-        <a data-toggle="tab" href="#general_tab" title="<?= lang('Config.general_configuration') ?>"><?= lang('Config.general') ?></a>
-    </li>
-    <li role="presentation">
-        <a data-toggle="tab" href="#tax_tab" title="<?= lang('Config.tax_configuration') ?>"><?= lang('Config.tax') ?></a>
-    </li>
-    <li role="presentation">
-        <a data-toggle="tab" href="#locale_tab" title="<?= lang('Config.locale_configuration') ?>"><?= lang('Config.locale') ?></a>
-    </li>
-    <li role="presentation">
-        <a data-toggle="tab" href="#barcode_tab" title="<?= lang('Config.barcode_configuration') ?>"><?= lang('Config.barcode') ?></a>
-    </li>
-    <li role="presentation">
-        <a data-toggle="tab" href="#stock_tab" title="<?= lang('Config.location_configuration') ?>"><?= lang('Config.location') ?></a>
-    </li>
-    <li role="presentation">
-        <a data-toggle="tab" href="#receipt_tab" title="<?= lang('Config.receipt_configuration') ?>"><?= lang('Config.receipt') ?></a>
-    </li>
-    <li role="presentation">
-        <a data-toggle="tab" href="#invoice_tab" title="<?= lang('Config.invoice_configuration') ?>"><?= lang('Config.invoice') ?></a>
-    </li>
-    <li role="presentation">
-        <a data-toggle="tab" href="#reward_tab" title="<?= lang('Config.reward_configuration') ?>"><?= lang('Config.reward') ?></a>
-    </li>
-    <li role="presentation">
-        <a data-toggle="tab" href="#table_tab" title="<?= lang('Config.table_configuration') ?>"><?= lang('Config.table') ?></a>
-    </li>
-    <li role="presentation">
-        <a data-toggle="tab" href="#system_tab" title="<?= lang('Config.system_conf') ?>"><?= lang('Config.system_conf') ?></a>
-    </li>
-</ul>
+<div class="row">
+    <div class="col-lg-3 <?= $config['config_menu_position'] == 'start' ? '' : 'order-lg-2' ?>">
+        <div class="list-group d-none d-lg-block" role="tablist">
+            <?php foreach ($tabs as $i => $tab): ?>
+                <button type="button" class="list-group-item list-group-item-action text-truncate <?= $i === 0 ? 'active' : '' ?>" id="<?= $tab['id'] ?>-tab" data-bs-toggle="tab" data-bs-target="#<?= $tab['id'] ?>" role="tab" title="<?= $tab['title'] ?>">
+                    <i class="bi <?= $tab['icon'] ?> me-2"></i><?= $tab['label'] ?>
+                </button>
+            <?php endforeach ?>
+        </div>
 
-<div class="tab-content">
-    <div class="tab-pane fade in active" id="info_tab">
-        <?= view('configs/info_config') ?>
+        <div class="nav dropdown d-lg-none mb-3">
+            <button type="button" class="btn btn-primary w-100 dropdown-toggle text-truncate" id="configs-dropdown" data-bs-toggle="dropdown" aria-expanded="false">
+                <?= lang('Config.info') ?>
+            </button>
+            <ul class="dropdown-menu w-100" aria-labelledby="configs-dropdown">
+                <?php foreach ($tabs as $i => $tab): ?>
+                    <li>
+                        <a class="dropdown-item py-2 text-truncate <?= $i === 0 ? 'active' : '' ?>" data-bs-toggle="tab" data-bs-target="#<?= $tab['id'] ?>" role="tab" title="<?= $tab['title'] ?>">
+                            <i class="bi <?= $tab['icon'] ?> me-2"></i><?= $tab['label'] ?>
+                        </a>
+                    </li>
+                <?php endforeach ?>
+            </ul>
+        </div>
     </div>
-    <div class="tab-pane" id="general_tab">
-        <?= view('configs/general_config') ?>
-    </div>
-    <div class="tab-pane" id="tax_tab">
-        <?= view('configs/tax_config') ?>
-    </div>
-    <div class="tab-pane" id="locale_tab">
-        <?= view('configs/locale_config') ?>
-    </div>
-    <div class="tab-pane" id="barcode_tab">
-        <?= view('configs/barcode_config') ?>
-    </div>
-    <div class="tab-pane" id="stock_tab">
-        <?= view('configs/stock_config') ?>
-    </div>
-    <div class="tab-pane" id="receipt_tab">
-        <?= view('configs/receipt_config') ?>
-    </div>
-    <div class="tab-pane" id="invoice_tab">
-        <?= view('configs/invoice_config') ?>
-    </div>
-    <div class="tab-pane" id="reward_tab">
-        <?= view('configs/reward_config') ?>
-    </div>
-    <div class="tab-pane" id="table_tab">
-        <?= view('configs/table_config') ?>
-    </div>
-    <div class="tab-pane" id="system_tab">
-        <?= view('configs/system_config') ?>
+
+    <div class="col-lg-9 order-lg-1">
+        <div class="tab-content">
+            <?php foreach ($tabs as $i => $tab): ?>
+                <div class="tab-pane <?= $i === 0 ? 'active' : '' ?>" id="<?= $tab['id'] ?>" role="tabpanel" aria-labelledby="<?= $tab['id'] ?>-tab">
+                    <?= view($tab['view'] ?? 'configs/' . $tab['id'] . '_config') ?>
+                </div>
+            <?php endforeach ?>
+        </div>
     </div>
 </div>
 
+<script type="text/javascript" src="js/bs-tab_anchor_linking.js"></script>
+<script type="text/javascript" src="js/bs-validation.js"></script>
+
 <?= view('partial/footer') ?>

app/Views/configs/message_config.php

@@ -4,86 +4,51 @@
  */
 ?>
 
-<?= form_open('config/saveMessage/', ['id' => 'message_config_form', 'enctype' => 'multipart/form-data', 'class' => 'form-horizontal']) ?>
-    <div id="config_wrapper">
-        <fieldset id="config_info">
+<?= form_open('config/saveMessage/', ['id' => 'message_config_form', 'enctype' => 'multipart/form-data']) ?>
 
-            <div id="required_fields_message"><?= lang('Common.fields_required_message') ?></div>
-            <ul id="message_error_message_box" class="error_message_box"></ul>
+    <?php
+    $title_info['config_title'] = lang('Config.message_configuration');
+    echo view('configs/config_header', $title_info);
+    ?>
 
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.msg_uid'), 'msg_uid', ['class' => 'control-label col-xs-2 required']) ?>
-                <div class="col-xs-4">
-                    <div class="input-group">
-                        <span class="input-group-addon input-sm">
-                            <span class="glyphicon glyphicon-user"></span>
-                        </span>
-                        <?= form_input([
-                            'name'  => 'msg_uid',
-                            'id'    => 'msg_uid',
-                            'class' => 'form-control input-sm required',
-                            'value' => $config['msg_uid']
-                        ]) ?>
-                    </div>
-                </div>
+    <ul id="error_message_box" class="message_error_message_box alert alert-warning d-none"></ul>
+
+    <div class="row">
+        <div class="col-12 col-lg-6 mb-3">
+            <label for="msg_uid" class="form-label"><?= lang('Config.msg_uid'); ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+            <div class="input-group">
+                <span class="input-group-text" id="msg_uid-icon"><i class="bi bi-person"></i></span>
+                <input type="text" class="form-control" name="msg_uid" id="msg_uid" aria-describedby="msg_uid-icon" required value="<?= $config['msg_uid']; ?>">
             </div>
+        </div>
 
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.msg_pwd'), 'msg_pwd', ['class' => 'control-label col-xs-2 required']) ?>
-                <div class="col-xs-4">
-                    <div class="input-group">
-                        <span class="input-group-addon input-sm">
-                            <span class="glyphicon glyphicon-lock"></span>
-                        </span>
-                        <?= form_password([
-                            'name'  => 'msg_pwd',
-                            'id'    => 'msg_pwd',
-                            'class' => 'form-control input-sm required',
-                            'value' => $config['msg_pwd']
-                        ]) ?>
-                    </div>
-                </div>
+        <div class="col-12 col-lg-6 mb-3">
+            <label for="msg_pwd" class="form-label"><?= lang('Config.msg_pwd'); ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+            <div class="input-group">
+                <span class="input-group-text" id="msg_pwd-icon"><i class="bi bi-lock"></i></span>
+                <input type="password" class="form-control" name="msg_pwd" id="msg_pwd" aria-describedby="msg_pwd-icon" required value="<?= $config['msg_pwd']; ?>">
             </div>
+        </div>
 
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.msg_src'), 'msg_src', ['class' => 'control-label col-xs-2 required']) ?>
-                <div class="col-xs-4">
-                    <div class="input-group">
-                        <span class="input-group-addon input-sm">
-                            <span class="glyphicon glyphicon-bullhorn"></span>
-                        </span>
-                        <?= form_input([
-                            'name'  => 'msg_src',
-                            'id'    => 'msg_src',
-                            'class' => 'form-control input-sm required',
-                            'value' => $config['msg_src'] == null ? $config['company'] : $config['msg_src']
-                        ]) ?>
-                    </div>
-                </div>
+        <div class="col-12 col-lg-6 mb-3">
+            <label for="msg_src" class="form-label"><?= lang('Config.msg_src'); ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+            <div class="input-group">
+                <span class="input-group-text" id="msg_src-icon"><i class="bi bi-megaphone"></i></span>
+                <input type="text" class="form-control" name="msg_src" id="msg_src" aria-describedby="msg_src-icon" required value="<?= $config['msg_src'] == null ? $config['company'] : $config['msg_src']; ?>">
             </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.msg_msg'), 'msg_msg', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-4">
-                    <?= form_textarea([
-                        'name'        => 'msg_msg',
-                        'id'          => 'msg_msg',
-                        'class'       => 'form-control input-sm',
-                        'value'       => $config['msg_msg'],
-                        'placeholder' => lang('Config.msg_msg_placeholder')
-                    ]) ?>
-                </div>
-            </div>
-
-            <?= form_submit([
-                'name'  => 'submit_message',
-                'id'    => 'submit_message',
-                'value' => lang('Common.submit'),
-                'class' => 'btn btn-primary btn-sm pull-right'
-            ]) ?>
-
-        </fieldset>
+        </div>
     </div>
+
+    <label for="msg_msg" class="form-label"><?= lang('Config.msg_msg'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text"><i class="bi bi-chat-quote"></i></span>
+        <textarea class="form-control" name="msg_msg" id="msg_msg" rows="10" placeholder="<?= lang('Config.msg_msg_placeholder'); ?>"><?= esc($config['msg_msg']); ?></textarea>
+    </div>
+
+    <div class="d-flex justify-content-end">
+        <button type="submit" class="btn btn-primary" name="submit_message"><?= lang('Common.submit'); ?></button>
+    </div>
+
 <?= form_close() ?>
 
 <script type="text/javascript">
@@ -91,7 +56,7 @@
     $(document).ready(function() {
         $('#message_config_form').validate($.extend(form_support.handler, {
 
-            errorLabelContainer: "#message_error_message_box",
+            errorLabelContainer: ".message_error_message_box",
 
             rules: {
                 msg_uid: "required",

app/Views/configs/receipt_config.php

@@ -4,334 +4,199 @@
  */
 ?>
 
-<?= form_open('config/saveReceipt/', ['id' => 'receipt_config_form', 'class' => 'form-horizontal']) ?>
-    <div id="config_wrapper">
-        <fieldset id="config_info">
+<?= form_open('config/saveReceipt/', ['id' => 'receipt_config_form']) ?>
 
-            <div id="required_fields_message"><?= lang('Common.fields_required_message') ?></div>
-            <ul id="receipt_error_message_box" class="error_message_box"></ul>
+    <?php
+    $title_info['config_title'] = lang('Config.receipt_configuration');
+    echo view('configs/config_header', $title_info);
+    ?>
 
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.receipt_template'), 'receipt_template', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_dropdown(
-                        'receipt_template',
-                        [
-                            'receipt_default' => lang('Config.receipt_default'),
-                            'receipt_short'   => lang('Config.receipt_short')
-                        ],
-                        $config['receipt_template'],
-                        'class="form-control input-sm"'
-                    ) ?>
-                </div>
+    <ul id="error_message_box" class="receipt_error_message_box alert alert-warning d-none"></ul>
+
+    <div class="row">
+        <div class="col-12 col-lg-6">
+            <label for="receipt_template" class="form-label"><?= lang('Config.receipt_template'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-file-code"></i></span>
+                <select class="form-select" name="receipt_template">
+                    <option value="receipt_default" <?= $config['receipt_template'] == 'receipt_default' ? 'selected' : '' ?>><?= lang('Config.receipt_default') ?></option>
+                    <option value="receipt_short" <?= $config['receipt_template'] == 'receipt_short' ? 'selected' : '' ?>><?= lang('Config.receipt_short') ?></option>
+                </select>
             </div>
+        </div>
 
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.receipt_font_size'), 'receipt_font_size', ['class' => 'control-label col-xs-2 required']) ?>
-                <div class="col-xs-2">
-                    <div class="input-group">
-                        <?= form_input([
-                            'type'  => 'number',
-                            'min'   => '0',
-                            'max'   => '20',
-                            'name'  => 'receipt_font_size',
-                            'id'    => 'receipt_font_size',
-                            'class' => 'form-control input-sm required',
-                            'value' => $config['receipt_font_size']
-                        ]) ?>
-                        <span class="input-group-addon input-sm">px</span>
-                    </div>
-                </div>
+        <div class="col-6 col-lg-3">
+            <label for="receipt_font_size" class="form-label"><?= lang('Config.receipt_font_size'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-arrows-angle-expand"></i></span>
+                <input type="number" class="form-control" name="receipt_font_size" id="receipt_font_size" value="<?= $config['receipt_font_size']; ?>">
+                <span class="input-group-text">px</span>
             </div>
+        </div>
 
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.print_delay_autoreturn'), 'print_delay_autoreturn', ['class' => 'control-label col-xs-2 required']) ?>
-                <div class="col-xs-2">
-                    <div class="input-group">
-                        <?= form_input([
-                            'type'  => 'number',
-                            'min'   => '0',
-                            'max'   => '30',
-                            'name'  => 'print_delay_autoreturn',
-                            'id'    => 'print_delay_autoreturn',
-                            'class' => 'form-control input-sm required',
-                            'value' => $config['print_delay_autoreturn']
-                        ]) ?>
-                        <span class="input-group-addon input-sm">s</span>
-                    </div>
-                </div>
+        <div class="col-6 col-lg-3">
+            <label for="print_delay_autoreturn" class="form-label"><?= lang('Config.print_delay_autoreturn'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-stopwatch"></i></span>
+                <input type="number" class="form-control" name="print_delay_autoreturn" id="print_delay_autoreturn" value="<?= $config['print_delay_autoreturn']; ?>">
+                <span class="input-group-text">s</span>
             </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.email_receipt_check_behaviour'), 'email_receipt_check_behaviour', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-8">
-                    <label class="radio-inline">
-                        <?= form_radio([
-                            'name'    => 'email_receipt_check_behaviour',
-                            'value'   => 'always',
-                            'checked' => $config['email_receipt_check_behaviour'] == 'always'
-                        ]) ?>
-                        <?= lang('Config.email_receipt_check_behaviour_always') ?>
-                    </label>
-                    <label class="radio-inline">
-                        <?= form_radio([
-                            'name'    => 'email_receipt_check_behaviour',
-                            'value'   => 'never',
-                            'checked' => $config['email_receipt_check_behaviour'] == 'never'
-                        ]) ?>
-                        <?= lang('Config.email_receipt_check_behaviour_never') ?>
-                    </label>
-                    <label class="radio-inline">
-                        <?= form_radio([
-                            'name'    => 'email_receipt_check_behaviour',
-                            'value'   => 'last',
-                            'checked' => $config['email_receipt_check_behaviour'] == 'last'
-                        ]) ?>
-                        <?= lang('Config.email_receipt_check_behaviour_last') ?>
-                    </label>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.print_receipt_check_behaviour'), 'print_receipt_check_behaviour', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-8">
-                    <label class="radio-inline">
-                        <?= form_radio([
-                            'name'    => 'print_receipt_check_behaviour',
-                            'value'   => 'always',
-                            'checked' => $config['print_receipt_check_behaviour'] == 'always'
-                        ]) ?>
-                        <?= lang('Config.print_receipt_check_behaviour_always') ?>
-                    </label>
-                    <label class="radio-inline">
-                        <?= form_radio([
-                            'name'    => 'print_receipt_check_behaviour',
-                            'value'   => 'never',
-                            'checked' => $config['print_receipt_check_behaviour'] == 'never'
-                        ]) ?>
-                        <?= lang('Config.print_receipt_check_behaviour_never') ?>
-                    </label>
-                    <label class="radio-inline">
-                        <?= form_radio([
-                            'name'    => 'print_receipt_check_behaviour',
-                            'value'   => 'last',
-                            'checked' => $config['print_receipt_check_behaviour'] == 'last'
-                        ]) ?>
-                        <?= lang('Config.print_receipt_check_behaviour_last') ?>
-                    </label>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.receipt_show_company_name'), 'receipt_show_company_name', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-1">
-                    <?= form_checkbox([
-                        'name'    => 'receipt_show_company_name',
-                        'value'   => 'receipt_show_company_name',
-                        'id'      => 'receipt_show_company_name',
-                        'checked' => $config['receipt_show_company_name'] == 1
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.receipt_show_taxes'), 'receipt_show_taxes', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-1">
-                    <?= form_checkbox([
-                        'name'    => 'receipt_show_taxes',
-                        'value'   => 'receipt_show_taxes',
-                        'id'      => 'receipt_show_taxes',
-                        'checked' => $config['receipt_show_taxes'] == 1
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.receipt_show_tax_ind'), 'receipt_show_tax_ind', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-1">
-                    <?= form_checkbox([
-                        'name'    => 'receipt_show_tax_ind',
-                        'value'   => 'receipt_show_tax_ind',
-                        'id'      => 'receipt_show_tax_ind',
-                        'checked' => $config['receipt_show_tax_ind'] == 1
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.receipt_show_total_discount'), 'receipt_show_total_discount', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-1">
-                    <?= form_checkbox([
-                        'name'    => 'receipt_show_total_discount',
-                        'value'   => 'receipt_show_total_discount',
-                        'id'      => 'receipt_show_total_discount',
-                        'checked' => $config['receipt_show_total_discount'] == 1
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.receipt_show_description'), 'receipt_show_description', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-1">
-                    <?= form_checkbox([
-                        'name'    => 'receipt_show_description',
-                        'value'   => 'receipt_show_description',
-                        'id'      => 'receipt_show_description',
-                        'checked' => $config['receipt_show_description'] == 1
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.receipt_show_serialnumber'), 'receipt_show_serialnumber', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-1">
-                    <?= form_checkbox([
-                        'name'    => 'receipt_show_serialnumber',
-                        'value'   => 'receipt_show_serialnumber',
-                        'id'      => 'receipt_show_serialnumber',
-                        'checked' => $config['receipt_show_serialnumber'] == 1
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.print_silently'), 'print_silently', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-1">
-                    <?= form_checkbox([
-                        'name'    => 'print_silently',
-                        'id'      => 'print_silently',
-                        'value'   => 'print_silently',
-                        'checked' => $config['print_silently'] == 1
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.print_header'), 'print_header', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-1">
-                    <?= form_checkbox([
-                        'name'    => 'print_header',
-                        'id'      => 'print_header',
-                        'value'   => 'print_header',
-                        'checked' => $config['print_header'] == 1
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.print_footer'), 'print_footer', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-1">
-                    <?= form_checkbox([
-                        'name'    => 'print_footer',
-                        'id'      => 'print_footer',
-                        'value'   => 'print_footer',
-                        'checked' => $config['print_footer'] == 1
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.receipt_printer'), 'config_receipt_printer', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_dropdown('receipt_printer', [], ' ', 'id="receipt_printer" class="form-control"') ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.invoice_printer'), 'config_invoice_printer', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_dropdown('invoice_printer', [], ' ', 'id="invoice_printer" class="form-control"') ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.takings_printer'), 'config_takings_printer', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_dropdown('takings_printer', [], ' ', 'id="takings_printer" class="form-control"') ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.print_top_margin'), 'print_top_margin', ['class' => 'control-label col-xs-2 required']) ?>
-                <div class="col-xs-2">
-                    <div class="input-group">
-                        <?= form_input([
-                            'type'  => 'number',
-                            'min'   => '0',
-                            'max'   => '20',
-                            'name'  => 'print_top_margin',
-                            'id'    => 'print_top_margin',
-                            'class' => 'form-control input-sm required',
-                            'value' => $config['print_top_margin']
-                        ]) ?>
-                        <span class="input-group-addon input-sm">px</span>
-                    </div>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.print_left_margin'), 'print_left_margin', ['class' => 'control-label col-xs-2 required']) ?>
-                <div class="col-xs-2">
-                    <div class="input-group">
-                        <?= form_input([
-                            'type'  => 'number',
-                            'min'   => '0',
-                            'max'   => '20',
-                            'name'  => 'print_left_margin',
-                            'id'    => 'print_left_margin',
-                            'class' => 'form-control input-sm required',
-                            'value' => $config['print_left_margin']
-                        ]) ?>
-                        <span class="input-group-addon input-sm">px</span>
-                    </div>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.print_bottom_margin'), 'print_bottom_margin', ['class' => 'control-label col-xs-2 required']) ?>
-                <div class="col-xs-2">
-                    <div class="input-group">
-                        <?= form_input([
-                            'type'  => 'number',
-                            'min'   => '0',
-                            'max'   => '20',
-                            'name'  => 'print_bottom_margin',
-                            'id'    => 'print_bottom_margin',
-                            'class' => 'form-control input-sm required',
-                            'value' => $config['print_bottom_margin']
-                        ]) ?>
-                        <span class="input-group-addon input-sm">px</span>
-                    </div>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.print_right_margin'), 'print_right_margin', ['class' => 'control-label col-xs-2 required']) ?>
-                <div class="col-xs-2">
-                    <div class="input-group">
-                        <?= form_input([
-                            'type'  => 'number',
-                            'min'   => '0',
-                            'max'   => '20',
-                            'name'  => 'print_right_margin',
-                            'id'    => 'print_right_margin',
-                            'class' => 'form-control input-sm required',
-                            'value' => $config['print_right_margin']
-                        ]) ?>
-                        <span class="input-group-addon input-sm">px</span>
-                    </div>
-                </div>
-            </div>
-
-            <?= form_submit([
-                'name'  => 'submit_receipt',
-                'id'    => 'submit_receipt',
-                'value' => lang('Common.submit'),
-                'class' => 'btn btn-primary btn-sm pull-right'
-            ]) ?>
-
-        </fieldset>
+        </div>
     </div>
+
+    <label for="email_receipt_check_behaviour" class="form-label"><?= lang('Config.email_receipt_check_behaviour'); ?></label>
+    <div class="row mb-3">
+        <div class="col-12">
+            <div class="form-check form-check-inline">
+                <input class="form-check-input" type="radio" name="email_receipt_check_behaviour" id="email_receipt_check_behaviour_always" value="always" <?= $config['email_receipt_check_behaviour'] == 'always' ? 'checked' : '' ?>>
+                <label class="form-check-label" for="email_receipt_check_behaviour_always"><?= lang('Config.email_receipt_check_behaviour_always') ?></label>
+            </div>
+
+            <div class="form-check form-check-inline">
+                <input class="form-check-input" type="radio" name="email_receipt_check_behaviour" id="email_receipt_check_behaviour_never" value="never" <?= $config['email_receipt_check_behaviour'] == 'never' ? 'checked' : '' ?>>
+                <label class="form-check-label" for="email_receipt_check_behaviour_never"><?= lang('Config.email_receipt_check_behaviour_never') ?></label>
+            </div>
+
+            <div class="form-check form-check-inline">
+                <input class="form-check-input" type="radio" name="email_receipt_check_behaviour" id="email_receipt_check_behaviour_last" value="last" <?= $config['email_receipt_check_behaviour'] == 'last' ? 'checked' : '' ?>>
+                <label class="form-check-label" for="email_receipt_check_behaviour_last"><?= lang('Config.email_receipt_check_behaviour_last') ?></label>
+            </div>
+        </div>
+    </div>
+
+    <label for="print_receipt_check_behaviour" class="form-label"><?= lang('Config.print_receipt_check_behaviour'); ?></label>
+    <div class="row mb-3">
+        <div class="col-12">
+            <div class="form-check form-check-inline">
+                <input class="form-check-input" type="radio" name="print_receipt_check_behaviour" id="print_receipt_check_behaviour_always" value="always" <?= $config['print_receipt_check_behaviour'] == 'always' ? 'checked' : '' ?>>
+                <label class="form-check-label" for="print_receipt_check_behaviour_always"><?= lang('Config.print_receipt_check_behaviour_always') ?></label>
+            </div>
+
+            <div class="form-check form-check-inline">
+                <input class="form-check-input" type="radio" name="print_receipt_check_behaviour" id="print_receipt_check_behaviour_never" value="never" <?= $config['print_receipt_check_behaviour'] == 'never' ? 'checked' : '' ?>>
+                <label class="form-check-label" for="print_receipt_check_behaviour_never"><?= lang('Config.print_receipt_check_behaviour_never') ?></label>
+            </div>
+
+            <div class="form-check form-check-inline">
+                <input class="form-check-input" type="radio" name="print_receipt_check_behaviour" id="print_receipt_check_behaviour_last" value="last" <?= $config['print_receipt_check_behaviour'] == 'last' ? 'checked' : '' ?>>
+                <label class="form-check-label" for="print_receipt_check_behaviour_last"><?= lang('Config.print_receipt_check_behaviour_last') ?></label>
+            </div>
+        </div>
+    </div>
+
+    <div class="form-check form-switch mb-3">
+        <input class="form-check-input" type="checkbox" role="switch" id="receipt_show_company_name" name="receipt_show_company_name" value="receipt_show_company_name" <?= $config['receipt_show_company_name'] == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="receipt_show_company_name"><?= lang('Config.receipt_show_company_name'); ?></label>
+    </div>
+
+    <div class="form-check form-switch mb-3">
+        <input class="form-check-input" type="checkbox" role="switch" id="receipt_show_taxes" name="receipt_show_taxes" value="receipt_show_taxes" <?= $config['receipt_show_taxes'] == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="receipt_show_taxes"><?= lang('Config.receipt_show_taxes'); ?></label>
+    </div>
+
+    <div class="form-check form-switch mb-3">
+        <input class="form-check-input" type="checkbox" role="switch" id="receipt_show_tax_ind" name="receipt_show_tax_ind" value="receipt_show_tax_ind" <?= $config['receipt_show_tax_ind'] == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="receipt_show_tax_ind"><?= lang('Config.receipt_show_tax_ind'); ?></label>
+    </div>
+
+    <div class="form-check form-switch mb-3">
+        <input class="form-check-input" type="checkbox" role="switch" id="receipt_show_total_discount" name="receipt_show_total_discount" value="receipt_show_total_discount" <?= $config['receipt_show_total_discount'] == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="receipt_show_total_discount"><?= lang('Config.receipt_show_total_discount'); ?></label>
+    </div>
+
+    <div class="form-check form-switch mb-3">
+        <input class="form-check-input" type="checkbox" role="switch" id="receipt_show_description" name="receipt_show_description" value="receipt_show_description" <?= $config['receipt_show_description'] == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="receipt_show_description"><?= lang('Config.receipt_show_description'); ?></label>
+    </div>
+
+    <div class="form-check form-switch mb-3">
+        <input class="form-check-input" type="checkbox" role="switch" id="receipt_show_serialnumber" name="receipt_show_serialnumber" value="receipt_show_serialnumber" <?= $config['receipt_show_serialnumber'] == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="receipt_show_serialnumber"><?= lang('Config.receipt_show_serialnumber'); ?></label>
+    </div>
+
+    <div class="form-check form-switch mb-3">
+        <input class="form-check-input" type="checkbox" role="switch" id="print_silently" name="print_silently" value="print_silently" <?= $config['print_silently'] == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="print_silently"><?= lang('Config.print_silently'); ?></label>
+    </div>
+
+    <div class="form-check form-switch mb-3">
+        <input class="form-check-input" type="checkbox" role="switch" id="print_header" name="print_header" value="print_header" <?= $config['print_header'] == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="print_header"><?= lang('Config.print_header'); ?></label>
+    </div>
+
+    <div class="form-check form-switch mb-3">
+        <input class="form-check-input" type="checkbox" role="switch" id="print_footer" name="print_footer" value="print_footer" <?= $config['print_footer'] == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="print_footer"><?= lang('Config.print_footer'); ?></label>
+    </div>
+
+    <div class="row">
+        <div class="col-12 col-lg-6">
+            <label for="receipt_printer" class="form-label"><?= lang('Config.receipt_printer'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-printer"></i></span>
+                <select class="form-select" name="receipt_printer" id="receipt_printer"></select>
+            </div>
+        </div>
+
+        <div class="col-12 col-lg-6">
+            <label for="invoice_printer" class="form-label"><?= lang('Config.invoice_printer'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-printer"></i></span>
+                <select class="form-select" name="invoice_printer" id="invoice_printer"></select>
+            </div>
+        </div>
+
+        <div class="col-12 col-lg-6">
+            <label for="takings_printer" class="form-label"><?= lang('Config.takings_printer'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-printer"></i></span>
+                <select class="form-select" name="takings_printer" id="takings_printer"></select>
+            </div>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-6 col-lg-3">
+            <label for="print_top_margin" class="form-label"><?= lang('Config.print_top_margin'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-arrow-bar-down"></i></span>
+                <input type="number" class="form-control" name="print_top_margin" id="print_top_margin" value="<?= $config['print_top_margin']; ?>">
+                <span class="input-group-text">px</span>
+            </div>
+        </div>
+
+        <div class="col-6 col-lg-3">
+            <label for="print_left_margin" class="form-label"><?= lang('Config.print_left_margin'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-arrow-bar-right"></i></span>
+                <input type="number" class="form-control" name="print_left_margin" id="print_left_margin" value="<?= $config['print_left_margin']; ?>">
+                <span class="input-group-text">px</span>
+            </div>
+        </div>
+
+        <div class="col-6 col-lg-3">
+            <label for="print_bottom_margin" class="form-label"><?= lang('Config.print_bottom_margin'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-arrow-bar-up"></i></span>
+                <input type="number" class="form-control" name="print_bottom_margin" id="print_bottom_margin" value="<?= $config['print_bottom_margin']; ?>">
+                <span class="input-group-text">px</span>
+            </div>
+        </div>
+
+        <div class="col-6 col-lg-3">
+            <label for="print_right_margin" class="form-label"><?= lang('Config.print_right_margin'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-arrow-bar-left"></i></span>
+                <input type="number" class="form-control" name="print_right_margin" id="print_right_margin" value="<?= $config['print_right_margin']; ?>">
+                <span class="input-group-text">px</span>
+            </div>
+        </div>
+    </div>
+
+    <div class="d-flex justify-content-end">
+        <button type="submit" class="btn btn-primary" name="submit_receipt"><?= lang('Common.submit'); ?></button>
+    </div>
+
 <?= form_close() ?>
 
 <script type="text/javascript">
@@ -370,6 +235,7 @@
                     },
                     success: function(response) {
                         $.notify({
+                            icon: 'bi bi-bell-fill',
                             message: response.message
                         }, {
                             type: response.success ? 'success' : 'danger'
@@ -379,7 +245,7 @@
                 });
             },
 
-            errorLabelContainer: "#receipt_error_message_box",
+            errorLabelContainer: ".receipt_error_message_box",
 
             rules: {
                 print_top_margin: {

app/Views/configs/reward_config.php

@@ -5,38 +5,28 @@
  */
 ?>
 
-<?= form_open('config/saveRewards/', ['id' => 'reward_config_form', 'class' => 'form-horizontal']) ?>
-    <div id="config_wrapper">
-        <fieldset id="config_info">
+<?= form_open('config/saveRewards/', ['id' => 'reward_config_form']) ?>
 
-            <div id="required_fields_message"><?= lang('Common.fields_required_message') ?></div>
-            <ul id="reward_error_message_box" class="error_message_box"></ul>
+    <?php
+    $title_info['config_title'] = lang('Config.reward_configuration');
+    echo view('configs/config_header', $title_info);
+    ?>
 
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.customer_reward_enable'), 'customer_reward_enable', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-1">
-                    <?= form_checkbox([
-                        'name'    => 'customer_reward_enable',
-                        'value'   => 'customer_reward_enable',
-                        'id'      => 'customer_reward_enable',
-                        'checked' => $config['customer_reward_enable'] == 1
-                    ]) ?>
-                </div>
-            </div>
+    <ul id="error_message_box" class="reward_error_message_box alert alert-warning d-none"></ul>
 
-            <div id="customer_rewards">
-                <?= view('partial/customer_rewards', ['customer_rewards' => $customer_rewards]) ?>
-            </div>
-
-            <?= form_submit([
-                'name'  => 'submit_reward',
-                'id'    => 'submit_reward',
-                'value' => lang('Common.submit'),
-                'class' => 'btn btn-primary btn-sm pull-right'
-            ]) ?>
-
-        </fieldset>
+    <div class="form-check form-switch mb-3">
+        <input class="form-check-input" type="checkbox" role="switch" id="customer_reward_enable" name="customer_reward_enable" value="customer_reward_enable" <?= $config['customer_reward_enable'] == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="customer_reward_enable"><?= lang('Config.customer_reward_enable'); ?></label>
     </div>
+
+    <div class="row" id="customer_rewards">
+        <?= view('partial/customer_rewards', ['customer_rewards' => $customer_rewards]) ?>
+    </div>
+
+    <div class="d-flex justify-content-end">
+        <button type="submit" class="btn btn-primary" name="submit_reward"><?= lang('Common.submit'); ?></button>
+    </div>
+
 <?= form_close() ?>
 
 <script type="text/javascript">
@@ -76,9 +66,9 @@
             var new_block = block.insertAfter($(this).parent());
             var new_block_id = 'customer_reward_' + ++id;
             var new_block_id_next = 'reward_points_' + id;
-            $(new_block).find('label').html("<?= lang('Config.customer_reward') ?> " + ++table_count).attr('for', new_block_id).attr('class', 'control-label col-xs-2');
-            $(new_block).find("input[id='" + previous_id + "']").attr('id', new_block_id).removeAttr('disabled').attr('name', new_block_id).attr('class', 'form-control input-sm').val('');
-            $(new_block).find("input[id='" + previous_id_next + "']").attr('id', new_block_id_next).removeAttr('disabled').attr('name', new_block_id_next).attr('class', 'form-control input-sm').val('');
+            $(new_block).find('label').html("<?= lang('Config.customer_reward') ?> " + ++table_count).attr('for', new_block_id).attr('class', 'control-label col-xs-2'); // TODO-BS5 change classes from bs3 to bs5
+            $(new_block).find("input[id='" + previous_id + "']").attr('id', new_block_id).removeAttr('disabled').attr('name', new_block_id).attr('class', 'form-control input-sm').val(''); // TODO-BS5 change classes from bs3 to bs5
+            $(new_block).find("input[id='" + previous_id_next + "']").attr('id', new_block_id_next).removeAttr('disabled').attr('name', new_block_id_next).attr('class', 'form-control input-sm').val(''); // TODO-BS5 change classes from bs3 to bs5
             hide_show_remove();
         };
 
@@ -119,6 +109,7 @@
                     },
                     success: function(response) {
                         $.notify({
+                            icon: 'bi bi-bell-fill',
                             message: response.message
                         }, {
                             type: response.success ? 'success' : 'danger'
@@ -129,7 +120,7 @@
                 });
             },
 
-            errorLabelContainer: "#reward_error_message_box",
+            errorLabelContainer: ".reward_error_message_box",
 
             rules: {
                 <?php

app/Views/configs/shortcuts_config.php

@@ -0,0 +1,79 @@
+<?php
+/**
+ * @var array $config
+ * @var array $keyboardShortcutOptions
+ * @var array $keyboardShortcuts
+ */
+
+$keyboardShortcuts ??= [];
+$keyboardShortcutOptions ??= [];
+$config ??= [];
+
+$shortcutLabels = [
+    'cancel'    => lang('Sales.key_cancel'),
+    'items'     => lang('Sales.key_item_search'),
+    'customers' => lang('Sales.key_customer_search'),
+    'suspend'   => lang('Sales.key_suspend'),
+    'suspended' => lang('Sales.key_suspended'),
+    'amount'    => lang('Sales.key_tendered'),
+    'payment'   => lang('Sales.key_payment'),
+    'complete'  => lang('Sales.key_finish_sale'),
+    'finish'    => lang('Sales.key_finish_quote'),
+    'help'      => lang('Sales.key_help_modal')
+];
+?>
+
+<?= form_open('config/saveShortcuts', ['id' => 'shortcuts_config_form']) ?>
+
+    <?php
+    $title_info['config_title'] = lang('Config.shortcuts_configuration');
+    echo view('configs/config_header', $title_info);
+    ?>
+
+    <ul id="error_message_box" class="shortcuts_error_message_box alert alert-warning d-none"></ul>
+
+    <div class="row">
+        <?php foreach ($shortcutLabels as $name => $label): ?>
+            <div class="col-12 col-lg-6">
+                <?= form_label($label, 'key_' . $name, ['class' => 'form-label']) ?>
+                <div class="input-group mb-3">
+                    <span class="input-group-text"><i class="bi bi-keyboard"></i></span>
+                    <?php $keyboardShortcutSelectedValue = $keyboardShortcuts[$name]['value'] ?? ''; ?>
+                    <?= form_dropdown('key_' . $name, $keyboardShortcutOptions, $keyboardShortcutSelectedValue, 'class="form-select"') ?>
+                </div>
+            </div>
+        <?php endforeach; ?>
+    </div>
+
+    <div class="d-flex justify-content-end">
+        <button type="submit" class="btn btn-primary" name="submit_shortcuts"><?= lang('Common.submit'); ?></button>
+    </div>
+
+<?= form_close() ?>
+
+<script type="text/javascript">
+    $('#shortcuts_config_form').validate($.extend(form_support.handler, {
+        submitHandler: function(form) {
+            $(form).ajaxSubmit({
+                success: function(response) {
+                    $.notify({
+                        message: response.message
+                    }, {
+                        type: response.success ? 'success' : 'danger'
+                    });
+                },
+                error: function(xhr) {
+                    const rawMessage = xhr.responseJSON?.message ?? xhr.responseText ?? <?= json_encode(lang('Config.shortcuts_save_error')) ?>;
+                    $.notify({
+                        message: DOMPurify.sanitize(rawMessage)
+                    }, {
+                        type: 'danger'
+                    });
+                },
+                dataType: 'json'
+            });
+        },
+
+        errorLabelContainer: '.shortcuts_error_message_box'
+    }));
+</script>

app/Views/configs/stock_config.php

@@ -4,26 +4,23 @@
  */
 ?>
 
-<?= form_open('config/saveLocations/', ['id' => 'location_config_form', 'class' => 'form-horizontal']) ?>
-    <div id="config_wrapper">
-        <fieldset id="config_info">
+<?= form_open('config/saveLocations/', ['id' => 'location_config_form']) ?>
 
-            <div id="required_fields_message"><?= lang('Common.fields_required_message') ?></div>
-            <ul id="stock_error_message_box" class="error_message_box"></ul>
+    <?php
+    $title_info['config_title'] = lang('Config.location_configuration');
+    echo view('configs/config_header', $title_info);
+    ?>
 
-            <div id="stock_locations">
-                <?= view('partial/stock_locations', ['stock_locations' => $stock_locations]) ?>
-            </div>
+    <ul id="error_message_box" class="stock_error_message_box alert alert-warning d-none"></ul>
 
-            <?= form_submit([
-                'name'  => 'submit_stock',
-                'id'    => 'submit_stock',
-                'value' => lang('Common.submit'),
-                'class' => 'btn btn-primary btn-sm pull-right'
-            ]) ?>
-
-        </fieldset>
+    <div id="stock_locations">
+        <?= view('partial/stock_locations', ['stock_locations' => $stock_locations]) ?>
     </div>
+
+    <div class="d-flex justify-content-end">
+        <button type="submit" class="btn btn-primary" name="submit_stock"><?= lang('Common.submit'); ?></button>
+    </div>
+
 <?= form_close() ?>
 
 <script type="text/javascript">
@@ -43,8 +40,8 @@
             var block = $(this).parent().clone(true);
             var new_block = block.insertAfter($(this).parent());
             var new_block_id = 'stock_location[]';
-            $(new_block).find('label').html("<?= lang('Config.stock_location') ?> " + ++location_count).attr('for', new_block_id).attr('class', 'control-label col-xs-2');
-            $(new_block).find('input').attr('id', new_block_id).removeAttr('disabled').attr('name', new_block_id).attr('class', 'form-control input-sm').val('');
+            $(new_block).find('label').html("<?= lang('Config.stock_location') ?> " + ++location_count).attr('for', new_block_id).attr('class', 'control-label col-xs-2'); // TODO-BS5 change classes from bs3 to bs5
+            $(new_block).find('input').attr('id', new_block_id).removeAttr('disabled').attr('name', new_block_id).attr('class', 'form-control input-sm').val(''); // TODO-BS5 change classes from bs3 to bs5
             hide_show_remove();
         };
 
@@ -79,6 +76,7 @@
                 $(form).ajaxSubmit({
                     success: function(response) {
                         $.notify({
+                            icon: 'bi bi-bell-fill',
                             message: response.message
                         }, {
                             type: response.success ? 'success' : 'danger'
@@ -89,7 +87,7 @@
                 });
             },
 
-            errorLabelContainer: "#stock_error_message_box",
+            errorLabelContainer: ".stock_error_message_box",
 
             rules: {
                 <?php

app/Views/configs/system_config.php

@@ -1,17 +0,0 @@
-<br>
-<div class="container-fluid">
-    <ul class="nav nav-tabs" id="myTabs" data-toggle="tab">
-        <li class="active"><a href="#system_tabs" data-toggle="tab" title="<?= lang('Config.system_conf') ?>"><?= lang('Config.system_conf') ?></a></li>
-        <li><a href="#email_tabs" data-toggle="tab" title="<?= lang('Config.email_configuration') ?>"><?= lang('Config.email') ?></a></li>
-        <li><a href="#message_tabs" data-toggle="tab" title="<?= lang('Config.message_configuration') ?>"><?= lang('Config.message') ?></a></li>
-        <li><a href="#integrations_tabs" data-toggle="tab" title="<?= lang('Config.integrations_configuration') ?>"><?= lang('Config.integrations') ?></a></li>
-        <li><a href="#license_tabs" data-toggle="tab" title="<?= lang('Config.license_configuration') ?>"><?= lang('Config.license') ?></a></li>
-    </ul>
-    <div class="tab-content">
-        <div class="tab-pane active" id="system_tabs"><?= view('configs/system_info') ?></div>
-        <div class="tab-pane" id="email_tabs"><?= view('configs/email_config') ?></div>
-        <div class="tab-pane" id="message_tabs"><?= view('configs/message_config') ?></div>
-        <div class="tab-pane" id="integrations_tabs"><?= view('configs/integrations_config') ?></div>
-        <div class="tab-pane" id="license_tabs"><br><?= view('configs/license_config') ?></div>
-    </div>
-</div>

app/Views/configs/system_info.php

@@ -6,48 +6,97 @@
 
 use Config\OSPOS;
 
+
+$logs = WRITEPATH . 'logs/';
+$uploads = FCPATH . 'uploads/';
+$images = FCPATH . 'uploads/item_pics/';
+$importCustomers = WRITEPATH . '/uploads/importCustomers.csv';    //TODO: This variable does not follow naming conventions for the project.
+$bullet = '»' . ' ';
+$divider = ' ·' . ' ';
+$enabled = '<span class="text-success">&#10003; Enabled</span>';
+$disabled = '<span class="text-danger">&#10007; Disabled</span>';
+$writable = '<span class="text-success">&#10003; Writable</span>';
+$notwritable = '<span class="text-danger">&#10007; Not Writable</span>';
+$readable = '<span class="text-success">&#10003; Readable</span>';
+$notreadable = '<span class="text-danger">&#10007; Not Readable</span>';
+$permissions_check = '<span class="text-success">&#10003; Security Check Passed</span>';
+$permissions_fail = '<span class="text-danger">&#10007; Vulnerable or Incorrect Permissions</span>';
 ?>
 
-<style>
-    a:hover {
-        cursor: pointer;
-    }
+<?php
+$title_info['config_title'] = lang('Config.system_info');
+echo view('configs/config_header', $title_info);
+?>
 
-    hidden {
-        visibility: hidden;
-    }
-</style>
+<div class="mb-3"><?= lang('Config.server_notice'); ?></div>
 
-<script type="text/javascript" src="js/clipboard.min.js"></script>
+<form id="copy-issue">
 
-<div id="config_wrapper" class="col-sm-12">
-    <?= lang('Config.server_notice') ?>
-    <div class="container">
-        <div class="row">
-            <div class="col-sm-2" style="text-align: left;"><br>
-                <p style="min-height: 14.7em; font-weight: bold;">General Info</p>
-                <p style="min-height: 10.5em; font-weight: bold;">User Setup</p><br>
-                <p style="font-weight: bold;">Permissions</p>
+    <?php
+    if (!((substr(decoct(fileperms($logs)), -4) == 750)
+        && (substr(decoct(fileperms($uploads)), -4) == 750)
+        && (substr(decoct(fileperms($images)), -4) == 750)
+        && ((substr(decoct(fileperms($importCustomers)), -4) == 640)
+        || (substr(decoct(fileperms($importCustomers)), -4) == 660)))) {
+            echo '<div class="card border-danger-subtle mb-4">
+            <div class="card-header bg-danger-subtle border-danger-subtle fw-bold"><i class="bi bi-exclamation-circle"></i> ' . lang('Config.security_issue') . '</div>
+                <div class="card-body">
+                    <p class="card-text">' . lang('Config.perm_risk') . '</p>
+                    <ul class="list-unstyled mb-0">';
+        }
+        if (substr(decoct(fileperms($logs)), -4) != 750) {
+            echo '<li class="card-text">' . $bullet . '<code>writable/logs</code> ' . lang('Config.is_writable') . '</li>';
+        }
+
+        if (substr(decoct(fileperms($uploads)), -4) != 750) {
+            echo '<li class="card-text">' . $bullet . '<code>public/uploads</code> ' . lang('Config.is_writable') . '</li>';
+        }
+
+        if (substr(decoct(fileperms($images)), -4) != 750) {
+            echo '<li class="card-text">' . $bullet . '<code>public/uploads/item_pics</code> ' . lang('Config.is_writable') . '</li>';
+        }
+
+        if (!((substr(decoct(fileperms($importCustomers)), -4) == 640)
+            || (substr(decoct(fileperms($importCustomers)), -4) == 660))) {
+            echo '<li class="card-text">' . $bullet . '<code>importCustomers.csv</code> ' . lang('Config.is_readable') . '</li>';
+        }
+        echo '</div></div>';
+    ?>
+
+    <div class="row mb-3">
+        <label for="general-info" class="col-12 col-lg-2 form-label fw-bold">General Info</label>
+        <div class="col-12 col-lg-10" id="general-info">
+            <?= lang('Config.ospos_info') . ':&nbsp;' . esc(config('App')->application_version) . '&nbsp;-&nbsp;' . esc(substr(config(OSPOS::class)->commit_sha1, 0, 6)); ?><br>
+            <div>Language Code: <?= current_language_code(); ?></div><br>
+            <div id="time-error" class="row mb-3 d-none">
+                <div class="col-12 text-danger"><?= lang('Config.timezone_error'); ?></div>
+                <div class="col-6">
+                    <label for="timezone"><?= lang('Config.user_timezone'); ?></label>
+                    <div id="timezone"></div>
+                </div>
+                <div class="col-6">
+                    <label for="ostimezone"><?= lang('Config.os_timezone'); ?></label>
+                    <div id="ostimezone"><?= $config['timezone']; ?></div>
+                </div>
             </div>
-            <div class="col-sm-8" id="issuetemplate" style="text-align: left;"><br>
-                <?= lang('Config.ospos_info') . ':' ?>
-                <?= esc(config('App')->application_version) ?> - <?= esc(substr(config(OSPOS::class)->commit_sha1, 0, 6)) ?><br>
-                Language Code: <?= current_language_code() ?><br><br>
-                <div id="TimeError"></div>
-                Extensions & Modules:<br>
-                <?php
-                    echo "&#187; GD: ", extension_loaded('gd') ? '<span style="color: green;">Enabled &#x2713</span>' : '<span style="color: red;">Disabled &#x2717</span>', '<br>';
-                    echo "&#187; BC Math: ", extension_loaded('bcmath') ? '<span style="color: green;">Enabled &#x2713</span>' : '<span style="color: red;">Disabled &#x2717</span>', '<br>';
-                    echo "&#187; INTL: ", extension_loaded('intl') ? '<span style="color: green;">Enabled &#x2713</span>' : '<span style="color: red;">Disabled &#x2717</span>', '<br>';
-                    echo "&#187; OpenSSL: ", extension_loaded('openssl') ? '<span style="color: green;">Enabled &#x2713</span>' : '<span style="color: red;">Disabled &#x2717</span>', '<br>';
-                    echo "&#187; MBString: ", extension_loaded('mbstring') ? '<span style="color: green;">Enabled &#x2713</span>' : '<span style="color: red;">Disabled &#x2717</span>', '<br>';
-                    echo "&#187; Curl: ", extension_loaded('curl') ? '<span style="color: green;">Enabled &#x2713</span>' : '<span style="color: red;">Disabled &#x2717</span>', '<br>';
-                    echo "&#187; Json: ", extension_loaded('json') ? '<span style="color: green;">Enabled &#x2713</span>' : '<span style="color: red;">Disabled &#x2717</span>', '<br><br>';
-                    echo "&#187; Xml: ", extension_loaded('xml') ? '<span style="color: green;">Enabled &#x2713</span>' : '<span style="color: red;">Disabled &#x2717</span>', '<br><br>';
-                ?>
-                User Configuration:<br>
-                .Browser:
-                <?php
+            <span>Extensions & Modules:</span><br>
+            <ul class="list-unstyled">
+                <li><?= $bullet . 'GD: ', extension_loaded('gd') ? $enabled : $disabled; ?></li>
+                <li><?= $bullet . 'BC Math: ', extension_loaded('bcmath') ? $enabled : $disabled; ?></li>
+                <li><?= $bullet . 'INTL: ', extension_loaded('intl') ? $enabled : $disabled; ?></li>
+                <li><?= $bullet . 'OpenSSL: ', extension_loaded('openssl') ? $enabled : $disabled; ?></li>
+                <li><?= $bullet . 'MBString: ', extension_loaded('mbstring') ? $enabled : $disabled; ?></li>
+                <li><?= $bullet . 'Curl: ', extension_loaded('curl') ? $enabled : $disabled; ?></li>
+                <li><?= $bullet . 'Xml: ', extension_loaded('xml') ? $enabled : $disabled; ?></li>
+            </ul>
+        </div>
+    </div>
+
+    <div class="row mb-3">
+        <label for="user-setup" class="col-12 col-lg-2 form-label fw-bold">User Setup</label>
+        <div class="col-12 col-lg-10" id="user-setup">
+            <ul class="list-unstyled">
+            <?php
                 /**
                  * @param string $userAgent
                  * @return string
@@ -55,162 +104,169 @@ use Config\OSPOS;
                 function getBrowserNameAndVersion(string $userAgent): string
                 {
                     $browser = match (true) {
-                        strpos($userAgent, 'Opera')   !== false || strpos($userAgent, 'OPR/') !== false => 'Opera',
-                        strpos($userAgent, 'Edge')    !== false => 'Edge',
-                        strpos($userAgent, 'Chrome')  !== false => 'Chrome',
-                        strpos($userAgent, 'Safari')  !== false => 'Safari',
+                        strpos($userAgent, 'Opera') !== false || strpos($userAgent, 'OPR/') !== false => 'Opera',
+                        strpos($userAgent, 'Edge') !== false => 'Edge',
+                        strpos($userAgent, 'Chrome') !== false => 'Chrome',
+                        strpos($userAgent, 'Safari') !== false => 'Safari',
                         strpos($userAgent, 'Firefox') !== false => 'Firefox',
-                        strpos($userAgent, 'MSIE')    !== false || strpos($userAgent, 'Trident/7') !== false => 'Internet Explorer',
-                        default                       => 'Other',
+                        strpos($userAgent, 'MSIE') !== false || strpos($userAgent, 'Trident/7') !== false => 'Internet Explorer',
+                        default => 'Other',
                     };
 
                     $version = match ($browser) {
-                        'Opera'             => preg_match('/(Opera|OPR)\/([0-9.]+)/', $userAgent, $matches) ? $matches[2] : '',
-                        'Edge'              => preg_match('/Edge\/([0-9.]+)/', $userAgent, $matches) ? $matches[1] : '',
-                        'Chrome'            => preg_match('/Chrome\/([0-9.]+)/', $userAgent, $matches) ? $matches[1] : '',
-                        'Safari'            => preg_match('/Version\/([0-9.]+)/', $userAgent, $matches) ? $matches[1] : '',
-                        'Firefox'           => preg_match('/Firefox\/([0-9.]+)/', $userAgent, $matches) ? $matches[1] : '',
+                        'Opera' => preg_match('/(Opera|OPR)\/([0-9.]+)/', $userAgent, $matches) ? $matches[2] : '',
+                        'Edge' => preg_match('/Edge\/([0-9.]+)/', $userAgent, $matches) ? $matches[1] : '',
+                        'Chrome' => preg_match('/Chrome\/([0-9.]+)/', $userAgent, $matches) ? $matches[1] : '',
+                        'Safari' => preg_match('/Version\/([0-9.]+)/', $userAgent, $matches) ? $matches[1] : '',
+                        'Firefox' => preg_match('/Firefox\/([0-9.]+)/', $userAgent, $matches) ? $matches[1] : '',
                         'Internet Explorer' => preg_match('/(MSIE|rv:)([0-9.]+)/', $userAgent, $matches) ? $matches[2] : '',
-                        default             => '',
+                        default => '',
                     };
 
                     return $browser . ($version ? ' ' . $version : '');
                 }
-                echo esc(getBrowserNameAndVersion($_SERVER['HTTP_USER_AGENT']));
-                ?><br>
-                Server Software: <?= esc($_SERVER['SERVER_SOFTWARE']) ?><br>
-                PHP Version: <?= PHP_VERSION ?><br>
-                DB Version: <?= esc($dbVersion) ?><br>
-                Server Port: <?= esc($_SERVER['SERVER_PORT']) ?><br>
-                OS: <?= php_uname('s') . ' ' . php_uname('r') ?><br><br>
-                <br><br>
-
-                File Permissions:<br>
-                &#187; [writable/logs:]
-                <?php $logs = WRITEPATH . 'logs/';
-                $uploads = FCPATH. 'uploads/';
-                $images = FCPATH. 'uploads/item_pics/';
-                $importCustomers = WRITEPATH . '/uploads/importCustomers.csv';    // TODO: This variable does not follow naming conventions for the project.
-
-                if (is_writable($logs)) {
-                    echo ' -  ' . substr(sprintf("%o", fileperms($logs)), -4) . ' |  ' . '<span style="color: green;">  Writable &#x2713 </span>';
-                } else {
-                    echo ' -  ' . substr(sprintf("%o", fileperms($logs)), -4) . ' |  ' . '<span style="color: red;">    Not Writable &#x2717 </span>';
-                }
-
-                clearstatcache();
-                if (is_writable($logs) && substr(decoct(fileperms($logs)), -4) != 750) {
-                    echo ' | <span style="color: red;">Vulnerable or Incorrect Permissions &#x2717</span>';
-                } else {
-                    echo ' | <span style="color: green;">Security Check Passed &#x2713</span>';
-                }
-                clearstatcache();
-                ?>
-                <br>
-                &#187; [public/uploads:]
-                <?php
-                if (is_writable($uploads)) {
-                    echo ' -  ' . substr(sprintf("%o", fileperms($uploads)), -4) . ' |  ' . '<span style="color: green;">     Writable &#x2713 </span>';
-                } else {
-                    echo ' -  ' . substr(sprintf("%o", fileperms($uploads)), -4) . ' |  ' . '<span style="color: red;"> Not Writable &#x2717 </span>';
-                }
-
-                clearstatcache();
-
-                if (is_writable($uploads) && substr(decoct(fileperms($uploads)), -4) != 750) {
-                    echo ' | <span style="color: red;">Vulnerable or Incorrect Permissions &#x2717</span>';
-                } else {
-                    echo ' |  <span style="color: green;">Security Check Passed &#x2713 </span>';
-                }
-
-                clearstatcache();
-                ?>
-                <br>
-                &#187; [public/uploads/item_pics:]
-                <?php
-                if (is_writable($images)) {
-                    echo ' -  ' . substr(sprintf("%o", fileperms($images)), -4) . ' |     ' . '<span style="color: green;"> Writable &#x2713 </span>';
-                } else {
-                    echo ' -  ' . substr(sprintf("%o", fileperms($images)), -4) . ' |     ' . '<span style="color: red;"> Not Writable &#x2717 </span>';
-                }
-
-                clearstatcache();
-
-                if (substr(decoct(fileperms($images)), -4) != 750) {
-                    echo ' | <span style="color: red;">Vulnerable or Incorrect Permissions &#x2717</span>';
-                } else {
-                    echo ' | <span style="color: green;">Security Check Passed &#x2713 </span>';
-                }
-
-                clearstatcache();
-                ?>
-                <br>
-                &#187; [importCustomers.csv:]
-                <?php
-                if (is_readable($importCustomers)) {
-                    echo ' -  ' . substr(sprintf("%o", fileperms($importCustomers)), -4) . ' |  ' . '<span style="color: green;">     Readable &#x2713 </span>';
-                } else {
-                    echo ' -  ' . substr(sprintf("%o", fileperms($importCustomers)), -4) . ' |  ' . '<span style="color: red;"> Not Readable &#x2717 </span>';
-                }
-                clearstatcache();
-
-                if (!((substr(decoct(fileperms($importCustomers)), -4) == 640) || (substr(decoct(fileperms($importCustomers)), -4) == 660))) {
-                    echo ' | <span style="color: red;">Vulnerable or Incorrect Permissions &#x2717</span>';
-                } else {
-                    echo ' | <span style="color: green;">Security Check Passed &#x2713 </span>';
-                }
-                clearstatcache();
-                ?>
-                <br>
-                <?php
-                if (!((substr(decoct(fileperms($logs)), -4) == 750)
-                    && (substr(decoct(fileperms($uploads)), -4) == 750)
-                    && (substr(decoct(fileperms($images)), -4) == 750)
-                    && ((substr(decoct(fileperms($importCustomers)), -4) == 640)
-                        || (substr(decoct(fileperms($importCustomers)), -4) == 660)))) {
-                    echo '<br><span style="color: red;"><strong>' . lang('Config.security_issue') . '</strong> <br>' . lang('Config.perm_risk') . '</span><br>';
-                } else {
-                    echo '<br><span style="color: green;">' . lang('Config.no_risk') . '</strong> <br> </span>';
-                }
-
-                if (substr(decoct(fileperms($logs)), -4) != 750) {
-                    echo '<br><span style="color: red;"> &#187; [writable/logs:] ' . lang('Config.is_writable') . '</span>';
-                }
-
-                if (substr(decoct(fileperms($uploads)), -4) != 750) {
-                    echo '<br><span style="color: red;"> &#187; [writable/uploads:] ' . lang('Config.is_writable') . '</span>';
-                }
-
-                if (substr(decoct(fileperms($images)), -4) != 750) {
-                    echo '<br><span style="color: red;"> &#187; [writable/uploads/item_pics:] ' . lang('Config.is_writable') . '</span>';
-                }
-
-                if (!((substr(decoct(fileperms($importCustomers)), -4) == 640)
-                    || (substr(decoct(fileperms($importCustomers)), -4) == 660))) {
-                    echo '<br><span style="color: red;"> &#187; [importCustomers.csv:] ' . lang('Config.is_readable') . '</span>';
-                }
-                ?>
-            </div>
+            ?>
+                <li><?= $bullet . 'Browser: ' . esc(getBrowserNameAndVersion($_SERVER['HTTP_USER_AGENT'])); ?></li>
+                <li><?= $bullet . 'Server Software: ' . esc($_SERVER['SERVER_SOFTWARE']); ?></li>
+                <li><?= $bullet . 'PHP Version: ' . PHP_VERSION; ?></li>
+                <li><?= $bullet . 'DB Version: ' . esc($dbVersion); ?></li>
+                <li><?= $bullet . 'Server Port: ' . esc($_SERVER['SERVER_PORT']); ?></li>
+                <li><?= $bullet . 'OS: ' . php_uname('s') . ' ' . php_uname('r'); ?></li>
+            </ul>
         </div>
     </div>
+
+    <div class="row mb-3">
+        <label for="permissions" class="col-12 col-lg-2 form-label fw-bold">Permissions</label>
+        <div class="col-12 col-lg-10" id="permissions">
+            <ul class="list-unstyled">
+                <li>
+                    <?= $bullet; ?><code>writable/logs</code>
+                    <?php
+                    if (is_writable($logs)) {
+                        echo substr(sprintf("%o", fileperms($logs)), -4) . $divider . $writable;
+                    } else {
+                        echo substr(sprintf("%o", fileperms($logs)), -4) . $divider . $notwritable;
+
+                    }
+                    clearstatcache();
+
+                    echo $divider;
+
+                    if (is_writable($logs) && substr(decoct(fileperms($logs)), -4) != 750) {
+                        echo $permissions_fail;
+                    } else {
+                        echo $permissions_check;
+                    }
+                    clearstatcache();
+                    ?>
+                </li>
+                <li>
+                    <?= $bullet; ?><code>public/uploads</code>
+                    <?php
+                    if(is_writable($uploads)) {
+                        echo substr(sprintf("%o",fileperms($uploads)),-4) . $divider . $writable;
+                    } else {
+                        echo substr(sprintf("%o",fileperms($uploads)),-4) . $divider . $notwritable;
+                    }
+                    clearstatcache();
+
+                    echo $divider;
+
+                    if(is_writable($uploads) && substr(decoct(fileperms($uploads)), -4) != 750  ) {
+                        echo $permissions_fail;
+                    } else {
+                        echo $permissions_check;
+                    }
+                    clearstatcache();
+                    ?>
+                </li>
+                <li>
+                    <?= $bullet; ?><code>public/uploads/item_pics</code>
+                    <?php
+                    if (is_writable($images)) {
+                        echo substr(sprintf("%o", fileperms($images)), -4) . $divider . $writable;
+                    } else {
+                        echo substr(sprintf("%o", fileperms($images)), -4) . $divider . $notwritable;
+                    }
+                    clearstatcache();
+
+                    echo $divider;
+
+                    if (substr(decoct(fileperms($images)), -4) != 750) {
+                        echo $permissions_fail;
+                    } else {
+                        echo $permissions_check;
+                    }
+                    clearstatcache();
+
+                    ?>
+                </li>
+                <li>
+                    <?= $bullet; ?><code>importCustomers.csv</code>
+                    <?php
+                    if (is_readable($importCustomers)) {
+                        echo substr(sprintf("%o", fileperms($importCustomers)), -4) . $divider . $readable;
+                    } else {
+                        echo substr(sprintf("%o", fileperms($importCustomers)), -4) . $divider . $notreadable;
+                    }
+                    clearstatcache();
+
+                    echo $divider;
+
+                    if (!((substr(decoct(fileperms($importCustomers)), -4) == 640) || (substr(decoct(fileperms($importCustomers)), -4) == 660))) {
+                        echo $permissions_fail;
+                    } else {
+                        echo $permissions_check;
+                    }
+                    clearstatcache();
+
+                    ?>
+                </li>
+            </ul>
+            <?php
+            if (((substr(decoct(fileperms($logs)), -4) == 750) && (substr(decoct(fileperms($uploads)), -4) == 750) && (substr(decoct(fileperms($images)), -4) == 750) && ((substr(decoct(fileperms($importCustomers)), -4) == 640) || (substr(decoct(fileperms($importCustomers)), -4) == 660)))) {
+                echo '<span class="text-success">' . lang('Config.no_risk') . '</span>';
+            }
+            ?>
+        </div>
+    </div>
+</form>
+
+<div class="d-flex justify-content-center gap-3">
+    <button type="button" class="copy btn btn-secondary" data-clipboard-target="#copy-issue"><i class="bi bi-clipboard-plus"></i> Copy Info</button> <!-- TODO-BS5 add to translations -->
+    <a class="btn btn-secondary" href="https://github.com/opensourcepos/opensourcepos/issues/new" target="_blank" rel="noopener"><i class="bi bi-flag"></i> <?= lang('Config.report_an_issue') ?></a>
 </div>
 
-<div style="text-align: center;">
-    <a class="copy" data-clipboard-action="copy" data-clipboard-target="#issuetemplate">Copy Info</a> | <a href="https://github.com/opensourcepos/opensourcepos/issues/new" target="_blank"> <?= lang('Config.report_an_issue') ?></a>
-    <script type="text/javascript">
-        var clipboard = new ClipboardJS('.copy');
+<script type="text/javascript">
+    var clipboard = new ClipboardJS('.copy');
 
-        clipboard.on('success', function(e) {
-            document.getSelection().removeAllRanges();
+    clipboard.on('success', function(e) {
+        document.getSelection().removeAllRanges();
+        $.notify({
+            icon: 'bi bi-clipboard-check-fill',
+            message: 'System info successfully copied.'
+        }, {
+            type: 'success'
         });
+    });
 
-        $(function() {
-            $('#timezone').clone().appendTo('#timezoneE');
+    clipboard.on('error', function(e) {
+        $.notify({
+            icon: 'bi bi-clipboard-x-fill',
+            message: 'Something went wrong while copying.'
+        }, {
+            type: 'danger'
         });
+    });
 
-        if ($('#timezone').html() !== $('#ostimezone').html()) {
-            document.getElementById("timezone").innerText = Intl.DateTimeFormat().resolvedOptions().timeZone;
-            document.getElementById("TimeError").innerHTML = '<span style="color: red;"><?= lang('Config.timezone_error') ?></span><br><br><?= lang('Config.user_timezone') ?><div id="timezoneE" style="font-weight:600;"></div><br><?= lang('Config.os_timezone') ?><div id="ostimezoneE" style="font-weight:600;"><?= esc($config['timezone']) ?></div><br>';
-        }
-    </script>
-</div>
+    document.getElementById("timezone").innerText = Intl.DateTimeFormat().resolvedOptions().timeZone;
+
+    $(function() {
+        $('#timezone').clone().appendTo('#timezoneE');
+    });
+
+    if ($('#timezone').html() !== $('#ostimezone').html()) {
+        $('#time-error').removeClass('d-none');
+    };
+</script>

app/Views/configs/table_config.php

@@ -5,38 +5,28 @@
  */
 ?>
 
-<?= form_open('config/saveTables/', ['id' => 'table_config_form', 'class' => 'form-horizontal']) ?>
-    <div id="config_wrapper">
-        <fieldset id="config_info">
+<?= form_open('config/saveTables/', ['id' => 'table_config_form']) ?>
 
-            <div id="required_fields_message"><?= lang('Common.fields_required_message') ?></div>
-            <ul id="table_error_message_box" class="error_message_box"></ul>
+    <?php
+    $title_info['config_title'] = lang('Config.table_configuration');
+    echo view('configs/config_header', $title_info);
+    ?>
 
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.dinner_table_enable'), 'dinner_table_enable', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-1">
-                    <?= form_checkbox([
-                        'name'    => 'dinner_table_enable',
-                        'value'   => 'dinner_table_enable',
-                        'id'      => 'dinner_table_enable',
-                        'checked' => $config['dinner_table_enable'] == 1
-                    ]) ?>
-                </div>
-            </div>
+    <ul id="error_message_box" class="table_error_message_box alert alert-warning d-none"></ul>
 
-            <div id="dinner_tables">
-                <?= view('partial/dinner_tables', ['dinner_tables' => $dinner_tables]) ?>
-            </div>
-
-            <?= form_submit([
-                'name'  => 'submit_table',
-                'id'    => 'submit_table',
-                'value' => lang('Common.submit'),
-                'class' => 'btn btn-primary btn-sm pull-right'
-            ]) ?>
-
-        </fieldset>
+    <div class="form-check form-switch mb-3">
+        <input class="form-check-input" type="checkbox" role="switch" id="dinner_table_enable" name="dinner_table_enable" value="dinner_table_enable" <?= $config['dinner_table_enable'] == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="dinner_table_enable"><?= lang('Config.dinner_table_enable'); ?></label>
     </div>
+
+    <div class="row" id="dinner_tables">
+        <?= view('partial/dinner_tables', ['dinner_tables' => $dinner_tables]) ?>
+    </div>
+
+    <div class="d-flex justify-content-end">
+        <button type="submit" class="btn btn-primary" name="submit_table"><?= lang('Common.submit'); ?></button>
+    </div>
+
 <?= form_close() ?>
 
 <script type="text/javascript">
@@ -72,8 +62,8 @@
             var block = $(this).parent().clone(true);
             var new_block = block.insertAfter($(this).parent());
             var new_block_id = 'dinner_table_' + ++id;
-            $(new_block).find('label').html("<?= lang('Config.dinner_table') ?> " + ++table_count).attr('for', new_block_id).attr('class', 'control-label col-xs-2');
-            $(new_block).find('input').attr('id', new_block_id).removeAttr('disabled').attr('name', new_block_id).attr('class', 'form-control input-sm').val('');
+            $(new_block).find('label').html("<?= lang('Config.dinner_table') ?> " + ++table_count).attr('for', new_block_id).attr('class', 'control-label col-xs-2'); // TODO-BS5 change classes from bs3 to bs5
+            $(new_block).find('input').attr('id', new_block_id).removeAttr('disabled').attr('name', new_block_id).attr('class', 'form-control input-sm').val(''); // TODO-BS5 change classes from bs3 to bs5
             hide_show_remove();
         };
 
@@ -114,6 +104,7 @@
                     },
                     success: function(response) {
                         $.notify({
+                            icon: 'bi bi-bell-fill',
                             message: response.message
                         }, {
                             type: response.success ? 'success' : 'danger'

app/Views/configs/tax_config.php

@@ -8,136 +8,99 @@
  */
 ?>
 
-<?= form_open('config/saveTax/', ['id' => 'tax_config_form', 'class' => 'form-horizontal']) ?>
-    <div id="config_wrapper">
-        <fieldset id="config_info">
+<?= form_open('config/saveTax/', ['id' => 'tax_config_form']) ?>
 
-            <div id="required_fields_message"><?= lang('Common.fields_required_message') ?></div>
-            <ul id="tax_error_message_box" class="error_message_box"></ul>
+    <?php
+    $title_info['config_title'] = lang('Config.tax_configuration');
+    echo view('configs/config_header', $title_info);
+    ?>
 
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.tax_id'), 'tax_id', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_input([
-                        'name'  => 'tax_id',
-                        'id'    => 'tax_id',
-                        'class' => 'form-control input-sm',
-                        'value' => $config['tax_id']
-                    ]) ?>
-                </div>
+    <ul id="error_message_box" class="tax_error_message_box alert alert-warning d-none"></ul>
+
+    <div class="row">
+        <div class="col-12 col-lg-6">
+            <label for="tax_id" class="form-label"><?= lang('Config.tax_id'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-bank"></i></span>
+                <input type="text" name="tax_id" class="form-control" id="tax_id" value="<?= $config['tax_id']; ?>">
             </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.tax_included'), 'tax_included', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_checkbox([
-                        'name'    => 'tax_included',
-                        'id'      => 'tax_included',
-                        'value'   => 'tax_included',
-                        'checked' => $config['tax_included'] == 1
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.default_tax_rate_1'), 'default_tax_1_rate', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_input([
-                        'name'  => 'default_tax_1_name',
-                        'id'    => 'default_tax_1_name',
-                        'class' => 'form-control input-sm',
-                        'value' => $config['default_tax_1_name'] !== false ? $config['default_tax_1_name'] : lang('Items.sales_tax_1')
-                    ]) ?>
-                </div>
-                <div class="col-xs-1 input-group">
-                    <?= form_input([
-                        'name'  => 'default_tax_1_rate',
-                        'id'    => 'default_tax_1_rate',
-                        'class' => 'form-control input-sm',
-                        'value' => to_tax_decimals($config['default_tax_1_rate'])
-                    ]) ?>
-                    <span class="input-group-addon input-sm">%</span>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.default_tax_rate_2'), 'default_tax_2_rate', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_input([
-                        'name'  => 'default_tax_2_name',
-                        'id'    => 'default_tax_2_name',
-                        'class' => 'form-control input-sm',
-                        'value' => $config['default_tax_2_name'] !== false ? $config['default_tax_2_name'] : lang('Items.sales_tax_2')
-                    ]) ?>
-                </div>
-                <div class="col-xs-1 input-group">
-                    <?= form_input([
-                        'name'  => 'default_tax_2_rate',
-                        'id'    => 'default_tax_2_rate',
-                        'class' => 'form-control input-sm',
-                        'value' => to_tax_decimals($config['default_tax_2_rate'])
-                    ]) ?>
-                    <span class="input-group-addon input-sm">%</span>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.use_destination_based_tax'), 'use_destination_based_tax', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_checkbox([
-                        'name'    => 'use_destination_based_tax',
-                        'id'      => 'use_destination_based_tax',
-                        'value'   => 'use_destination_based_tax',
-                        'checked' => $config['use_destination_based_tax'] == 1
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.default_tax_code'), 'default_tax_code', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_dropdown(
-                        'default_tax_code',
-                        $tax_code_options,
-                        $config['default_tax_code'],
-                        'class="form-control input-sm"'
-                    ) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.default_tax_category'), 'default_tax_category', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_dropdown(
-                        'default_tax_category',
-                        $tax_category_options,
-                        $config['default_tax_category'],
-                        'class="form-control input-sm"'
-                    ) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.default_tax_jurisdiction'), 'default_tax_jurisdiction', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_dropdown(
-                        'default_tax_jurisdiction',
-                        $tax_jurisdiction_options,
-                        $config['default_tax_jurisdiction'],
-                        'class="form-control input-sm"'
-                    ) ?>
-                </div>
-            </div>
-
-            <?= form_submit([
-                'name'  => 'submit_tax',
-                'id'    => 'submit_tax',
-                'value' => lang('Common.submit'),
-                'class' => 'btn btn-primary btn-sm pull-right'
-            ]) ?>
-
-        </fieldset>
+        </div>
     </div>
+
+    <div class="form-check form-switch mb-3">
+        <input class="form-check-input" type="checkbox" role="switch" id="tax_included" name="tax_included" <?= $config['tax_included'] == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="tax_included"><?= lang('Config.tax_included'); ?></label>
+    </div>
+
+    <div class="row">
+        <div class="col-12 col-lg-6">
+            <label for="default_tax_1_rate" class="form-label"><?= lang('Config.default_tax_rate_1') ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-1-square"></i></span>
+                <input type="text" class="form-control w-25" id="default_tax_1_name" name="default_tax_1_name" value="<?= $config['default_tax_1_name'] !== false ? $config['default_tax_1_name'] : lang('Items.sales_tax_1') ?>">
+                <input type="number" step="any" min="0" max="100" class="form-control" id="default_tax_1_rate" name="default_tax_1_rate" value="<?= to_tax_decimals($config['default_tax_1_rate']) ?>">
+                <span class="input-group-text"><i class="bi bi-percent"></i></span>
+            </div>
+        </div>
+
+        <div class="col-12 col-lg-6">
+            <label for="default_tax_2_rate" class="form-label"><?= lang('Config.default_tax_rate_2') ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-2-square"></i></span>
+                <input type="text" class="form-control w-25" id="default_tax_2_name" name="default_tax_2_name" value="<?= $config['default_tax_2_name'] !== false ? $config['default_tax_2_name'] : lang('Items.sales_tax_2') ?>">
+                <input type="number" step="any" min="0" max="100" class="form-control" id="default_tax_2_rate" name="default_tax_2_rate" value="<?= to_tax_decimals($config['default_tax_2_rate']) ?>">
+                <span class="input-group-text"><i class="bi bi-percent"></i></span>
+            </div>
+        </div>
+    </div>
+
+    <div class="form-check form-switch mb-3">
+        <input class="form-check-input" type="checkbox" role="switch" id="use_destination_based_tax" name="use_destination_based_tax" value="use_destination_based_tax" <?= $config['use_destination_based_tax'] == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="use_destination_based_tax"><?= lang('Config.use_destination_based_tax'); ?></label>
+    </div>
+
+    <div class="row">
+        <div class="col-12 col-lg-6">
+            <label for="default_tax_code" class="form-label"><?= lang('Config.default_tax_code'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-code"></i></span>
+                <select class="form-select" name="default_tax_code" id="default_tax_code">
+                    <?php foreach ($tax_code_options as $key => $value): ?>
+                        <option value="<?= $key ?>" <?= $config['default_tax_code'] == $key ? 'selected' : '' ?>><?= $value ?></option>
+                    <?php endforeach; ?>
+                </select>
+            </div>
+        </div>
+
+        <div class="col-12 col-lg-6">
+            <label for="default_tax_category" class="form-label"><?= lang('Config.default_tax_category'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-bookmark"></i></span>
+                <select class="form-select" name="default_tax_category" id="default_tax_category">
+                    <?php foreach ($tax_category_options as $key => $value): ?>
+                        <option value="<?= $key ?>" <?= $config['default_tax_category'] == $key ? 'selected' : '' ?>><?= $value ?></option>
+                    <?php endforeach; ?>
+                </select>
+            </div>
+        </div>
+
+        <div class="col-12 col-lg-6">
+            <label for="default_tax_jurisdiction" class="form-label"><?= lang('Config.default_tax_jurisdiction'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-globe"></i></span>
+                <select class="form-select" name="default_tax_jurisdiction" id="default_tax_jurisdiction">
+                    <?php foreach ($tax_jurisdiction_options as $key => $value): ?>
+                        <option value="<?= $key ?>" <?= $config['default_tax_jurisdiction'] == $key ? 'selected' : '' ?>><?= $value ?></option>
+                    <?php endforeach; ?>
+                </select>
+            </div>
+        </div>
+    </div>
+
+    <div class="d-flex justify-content-end">
+        <button type="submit" class="btn btn-primary" name="submit_tax"><?= lang('Common.submit'); ?></button>
+    </div>
+
 <?= form_close() ?>
 
 <script type="text/javascript">
@@ -168,6 +131,7 @@
                     },
                     success: function(response) {
                         $.notify({
+                            icon: 'bi bi-bell-fill',
                             message: response.message
                         }, {
                             type: response.success ? 'success' : 'danger'

app/Views/customers/form.php

@@ -11,433 +11,239 @@
  */
 ?>
 
-<div id="required_fields_message"><?= lang('Common.fields_required_message') ?></div>
-<ul id="error_message_box" class="error_message_box"></ul>
+<?= form_open("$controller_name/save/$person_info->person_id", ['id' => 'customer_form']) ?>
 
-<?= form_open("$controller_name/save/$person_info->person_id", ['id' => 'customer_form', 'class' => 'form-horizontal']) ?>
+    <?php if (!empty($stats) || (!empty($mailchimp_info) && !empty($mailchimp_activity))) { ?>
+        <ul class="nav nav-pills nav-justified mb-3" role="tablist">
+            <li class="nav-item" role="presentation">
+                <button type="button" class="nav-link active" data-bs-toggle="pill" data-bs-target="#customer_basic_info" role="tab"><?= lang('Customers.basic_information') ?></button>
+            </li>
+            <?php if (!empty($stats)) { ?>
+                <li class="nav-item" role="presentation">
+                    <button type="button" class="nav-link" data-bs-toggle="pill" data-bs-target="#customer_stats_info" role="tab"><?= lang('Customers.stats_info') ?></button>
+                </li>
+            <?php } ?>
+            <?php if (!empty($mailchimp_info) && !empty($mailchimp_activity)) { ?>
+                <li class="nav-item" role="presentation">
+                    <button type="button" class="nav-link" data-bs-toggle="pill" data-bs-target="#customer_mailchimp_info" role="tab"><?= lang('Customers.mailchimp_info') ?></button>
+                </li>
+            <?php } ?>
+        </ul>
+    <?php } ?>
 
-    <ul class="nav nav-tabs nav-justified" data-tabs="tabs">
-        <li class="active" role="presentation">
-            <a data-toggle="tab" href="#customer_basic_info"><?= lang('Customers.basic_information') ?></a>
-        </li>
-        <?php if (!empty($stats)) { ?>
-            <li role="presentation">
-                <a data-toggle="tab" href="#customer_stats_info"><?= lang('Customers.stats_info') ?></a>
-            </li>
-        <?php } ?>
-        <?php if (!empty($mailchimp_info) && !empty($mailchimp_activity)) { ?>
-            <li role="presentation">
-                <a data-toggle="tab" href="#customer_mailchimp_info"><?= lang('Customers.mailchimp_info') ?></a>
-            </li>
-        <?php } ?>
-    </ul>
+    <ul id="error_message_box" class="alert alert-warning d-none"></ul>
 
     <div class="tab-content">
-        <div class="tab-pane fade in active" id="customer_basic_info">
-            <fieldset>
-                <div class="form-group form-group-sm">
-                    <?= form_label(lang('Customers.consent'), 'consent', ['class' => 'required control-label col-xs-3']) ?>
-                    <div class="col-xs-1">
-                        <?= form_checkbox('consent', 1, $person_info->consent == '' ? !$config['enforce_privacy'] : (bool)$person_info->consent) ?>
-                    </div>
+        <div class="tab-pane show active" id="customer_basic_info" role="tabpanel" tabindex="0">
+            <div class="form-check mb-3">
+                <input class="form-check-input" type="checkbox" name="consent" id="consent" value="1" required <?php $checked = ($person_info->consent == '' ? !$config['enforce_privacy'] : (bool)$person_info->consent); if ($checked) { echo 'checked';} ?>>
+                <label class="form-check-label" for="consent"><?= lang('Customers.consent') ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+            </div>
+
+            <?= view('people/form_basic_info') ?>
+
+            <label for="discount_type" class="form-label"><?= lang('Customers.discount_type') ?></label>
+            <div class="mb-3">
+                <div class="form-check form-check-inline">
+                    <input class="form-check-input" type="radio" name="discount_type" id="discount_type_percent" value="0" <?php if ($person_info->discount_type == PERCENT) echo 'checked'; ?>>
+                    <label class="form-check-label" for="discount_type_percent"><?= lang('Customers.discount_percent') ?></label>
+                </div>
+                <div class="form-check form-check-inline">
+                    <input class="form-check-input" type="radio" name="discount_type" id="discount_type_fixed" value="1" <?php if ($person_info->discount_type == FIXED) echo 'checked'; ?>>
+                    <label class="form-check-label" for="discount_type_fixed"><?= lang('Customers.discount_fixed') ?></label>
+                </div>
+            </div>
+
+            <label for="discount" class="form-label"><?= lang('Customers.discount'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text" id="discount-icon"><i class="bi bi-patch-minus"></i></span>
+                <input type="number" step="any" class="form-control" name="discount" id="discount" aria-describedby="discount-icon" value="<?= $person_info->discount_type === FIXED ? to_currency_no_money($person_info->discount) : to_decimals($person_info->discount)?>">
+            </div>
+
+            <label for="company_name" class="form-label"><?= lang('Customers.company_name'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text" id="company_name-icon"><i class="bi bi-building"></i></span>
+                <input type="text" class="form-control" name="company_name" id="company_name" aria-describedby="company_name-icon" value="<?= $person_info->company_name ?>">
+            </div>
+
+            <label for="account_number" class="form-label"><?= lang('Customers.account_number'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text" id="account_number-icon"><i class="bi bi-hash"></i></span>
+                <input type="text" class="form-control" name="account_number" id="account_number" aria-describedby="account_number-icon" value="<?= $person_info->account_number ?>">
+            </div>
+
+            <label for="tax_id" class="form-label"><?= lang('Customers.tax_id'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text" id="tax_id-icon"><i class="bi bi-bank"></i></span>
+                <input type="text" class="form-control" name="tax_id" id="tax_id" aria-describedby="tax_id-icon" value="<?= $person_info->tax_id ?>">
+            </div>
+
+            <?php if ($config['customer_reward_enable']): ?>
+                <label for="rewards" class="form-label"><?= lang('Customers.rewards_package'); ?></label>
+                <div class="input-group mb-3">
+                    <span class="input-group-text"><i class="bi bi-trophy"></i></span>
+                    <select class="form-select" name="package_id">
+                        <?php foreach ($packages as $id => $label): ?>
+                            <option value="<?= $id ?>" <?= $id == $selected_package ? 'selected' : '' ?>><?= $label ?></option>
+                        <?php endforeach; ?>
+                    </select>
                 </div>
 
-                <?= view('people/form_basic_info') ?>
-
-                <div class="form-group form-group-sm">
-                    <?= form_label(lang('Customers.discount_type'), 'discount_type', ['class' => 'control-label col-xs-3']) ?>
-                    <div class="col-xs-8">
-                        <label class="radio-inline">
-                            <?= form_radio([
-                                'name'    => 'discount_type',
-                                'type'    => 'radio',
-                                'id'      => 'discount_type',
-                                'value'   => 0,
-                                'checked' => $person_info->discount_type == PERCENT
-                            ]) ?> <?= lang('Customers.discount_percent') ?>
-                        </label>
-                        <label class="radio-inline">
-                            <?= form_radio([
-                                'name'    => 'discount_type',
-                                'type'    => 'radio',
-                                'id'      => 'discount_type',
-                                'value'   => 1,
-                                'checked' => $person_info->discount_type == FIXED
-                            ]) ?> <?= lang('Customers.discount_fixed') ?>
-                        </label>
-                    </div>
+                <label for="available_points" class="form-label"><?= lang('Customers.available_points'); ?></label>
+                <div class="input-group mb-3">
+                    <span class="input-group-text" id="available_points-icon"><i class="bi bi-hand-thumbs-up"></i></span>
+                    <input type="text" class="form-control" name="available_points" id="available_points" aria-describedby="available_points-icon" value="<?= $person_info->points ?>" disabled readonly>
                 </div>
+            <?php endif; ?>
 
-                <div class="form-group form-group-sm">
-                    <?= form_label(lang('Customers.discount'), 'discount', ['class' => 'control-label col-xs-3']) ?>
-                    <div class="col-xs-3">
-                        <div class="input-group input-group-sm">
-                            <?= form_input([
-                                'name'    => 'discount',
-                                'id'      => 'discount',
-                                'class'   => 'form-control input-sm',
-                                'onClick' => 'this.select();',
-                                'value'   => $person_info->discount_type === FIXED ? to_currency_no_money($person_info->discount) : to_decimals($person_info->discount)
-                            ]) ?>
-                        </div>
-                    </div>
+            <div class="form-check mb-3">
+                <input class="form-check-input" type="checkbox" name="taxable" id="taxable" value="1" <?php if ($person_info->taxable == 1) echo 'checked'; ?>>
+                <label class="form-check-label" for="taxable"><?= lang('Customers.taxable') ?></label>
+            </div>
+
+            <?php if ($use_destination_based_tax): ?>
+                <label for="sales_tax_code_name" class="form-label"><?= lang('Customers.tax_code'); ?></label>
+                <div class="input-group mb-3">
+                    <span class="input-group-text" id="sales_tax_code_name-icon"><i class="bi bi-bank"></i></span>
+                    <input type="hidden" name="sales_tax_code_id" value="<?= $person_info->sales_tax_code_id ?>">
+                    <input type="text" class="form-control" name="sales_tax_code_name" id="sales_tax_code_name" aria-describedby="sales_tax_code_name-icon" size="50" value="<?= $sales_tax_code_label ?>">
                 </div>
+            <?php endif; ?>
 
-                <div class="form-group form-group-sm">
-                    <?= form_label(lang('Customers.company_name'), 'customer_company_name', ['class' => 'control-label col-xs-3']) ?>
-                    <div class="col-xs-8">
-                        <?= form_input([
-                            'name'  => 'company_name',
-                            'id'    => 'customer_company_name',
-                            'class' => 'form-control input-sm',
-                            'value' => $person_info->company_name
-                        ]) ?>
-                    </div>
-                </div>
+            <label for="datetime" class="form-label"><?= lang('Customers.date'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text" id="datetime-icon"><i class="bi bi-calendar2"></i></span>
+                <input type="hidden" name="date" id="datetime" aria-describedby="datetime-icon" value="<?= to_datetime(strtotime($person_info->date)) ?>">
+                <input type="text" class="form-control" value="<?= to_datetime(strtotime($person_info->date)) ?>" disabled readonly>
+            </div>
 
-                <div class="form-group form-group-sm">
-                    <?= form_label(lang('Customers.account_number'), 'account_number', ['class' => 'control-label col-xs-3']) ?>
-                    <div class="col-xs-4">
-                        <?= form_input([
-                            'name'  => 'account_number',
-                            'id'    => 'account_number',
-                            'class' => 'form-control input-sm',
-                            'value' => $person_info->account_number
-                        ]) ?>
-                    </div>
-                </div>
-
-                <div class="form-group form-group-sm">
-                    <?= form_label(lang('Customers.tax_id'), 'tax_id', ['class' => 'control-label col-xs-3']) ?>
-                    <div class="col-xs-4">
-                        <?= form_input([
-                            'name'  => 'tax_id',
-                            'id'    => 'tax_id',
-                            'class' => 'form-control input-sm',
-                            'value' => $person_info->tax_id
-                        ]) ?>
-                    </div>
-                </div>
-
-                <?php if ($config['customer_reward_enable']): ?>
-                    <div class="form-group form-group-sm">
-                        <?= form_label(lang('Customers.rewards_package'), 'rewards', ['class' => 'control-label col-xs-3']) ?>
-                        <div class="col-xs-8">
-                            <?= form_dropdown(
-                                'package_id',
-                                $packages,
-                                $selected_package,
-                                'class="form-control input-sm"'
-                            ) ?>
-                        </div>
-                    </div>
-
-                    <div class="form-group form-group-sm">
-                        <?= form_label(lang('Customers.available_points'), 'available_points', ['class' => 'control-label col-xs-3']) ?>
-                        <div class="col-xs-4">
-                            <?= form_input([
-                                'name'     => 'available_points',
-                                'id'       => 'available_points',
-                                'class'    => 'form-control input-sm',
-                                'value'    => $person_info->points,
-                                'disabled' => ''
-                            ]) ?>
-                        </div>
-                    </div>
-                <?php endif; ?>
-
-                <div class="form-group form-group-sm">
-                    <?= form_label(lang('Customers.taxable'), 'taxable', ['class' => 'control-label col-xs-3']) ?>
-                    <div class="col-xs-1">
-                        <?= form_checkbox('taxable', 1, $person_info->taxable == 1) ?>
-                    </div>
-                </div>
-
-                <?php if ($use_destination_based_tax) { ?>
-                    <div class="form-group form-group-sm">
-                        <?= form_label(lang('Customers.tax_code'), 'sales_tax_code_name', ['class' => 'control-label col-xs-3']) ?>
-                        <div class="col-xs-8">
-                            <div class="input-group input-group-sm">
-                                <?= form_input([
-                                    'name'  => 'sales_tax_code_name',
-                                    'id'    => 'sales_tax_code_name',
-                                    'class' => 'form-control input-sm',
-                                    'size'  => '50',
-                                    'value' => $sales_tax_code_label
-                                ]) ?>
-                                <?= form_hidden('sales_tax_code_id', $person_info->sales_tax_code_id) ?>
-                            </div>
-                        </div>
-                    </div>
-                <?php } ?>
-
-                <div class="form-group form-group-sm">
-                    <?= form_label(lang('Customers.date'), 'date', ['class' => 'control-label col-xs-3']) ?>
-                    <div class="col-xs-8">
-                        <div class="input-group">
-                            <span class="input-group-addon input-sm"><span class="glyphicon glyphicon-calendar"></span></span>
-                            <?= form_input([
-                                'name'     => 'date',
-                                'id'       => 'datetime',
-                                'class'    => 'form-control input-sm',
-                                'value'    => to_datetime(strtotime($person_info->date)),
-                                'readonly' => 'true'
-                            ]) ?>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="form-group form-group-sm">
-                    <?= form_label(lang('Customers.employee'), 'employee', ['class' => 'control-label col-xs-3']) ?>
-                    <div class="col-xs-8">
-                        <?= form_input([
-                            'name'     => 'employee',
-                            'id'       => 'employee',
-                            'class'    => 'form-control input-sm',
-                            'value'    => $employee,
-                            'readonly' => 'true'
-                        ]) ?>
-                    </div>
-                </div>
-
-                <?= form_hidden('employee_id', $person_info->employee_id) ?>
-            </fieldset>
+            <label for="employee" class="form-label"><?= lang('Customers.employee'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text" id="employee-icon"><i class="bi bi-person"></i></span>
+                <input type="hidden" name="employee_id" value="<?= $person_info->employee_id ?>">
+                <input type="text" class="form-control" name="employee" id="employee" aria-describedby="employee-icon" value="<?= $employee ?>" disabled readonly>
+            </div>
         </div>
 
         <?php if (!empty($stats)) { ?>
-            <br>
-            <div class="tab-pane" id="customer_stats_info">
-                <fieldset>
-                    <div class="form-group form-group-sm">
-                        <?= form_label(lang('Customers.total'), 'total', ['class' => 'control-label col-xs-5']) ?>
-                        <div class="col-xs-4">
-                            <div class="input-group input-group-sm">
-                                <?php if (!is_right_side_currency_symbol()): ?>
-                                    <span class="input-group-addon input-sm"><b><?= esc($config['currency_symbol']) ?></b></span>
-                                <?php endif; ?>
-                                <?= form_input([
-                                    'name'     => 'total',
-                                    'id'       => 'total',
-                                    'class'    => 'form-control input-sm',
-                                    'value'    => to_currency_no_money($stats->total),
-                                    'disabled' => ''
-                                ]) ?>
-                                <?php if (is_right_side_currency_symbol()): ?>
-                                    <span class="input-group-addon input-sm"><b><?= esc($config['currency_symbol']) ?></b></span>
-                                <?php endif; ?>
-                            </div>
-                        </div>
-                    </div>
+            <div class="tab-pane" id="customer_stats_info" role="tabpanel" tabindex="0">
+                <label for="total" class="form-label"><?= lang('Customers.total'); ?></label>
+                <div class="input-group mb-3">
+                    <?php if (!is_right_side_currency_symbol()): ?>
+                        <span class="input-group-text" id="total-icon"><?= esc($config['currency_symbol']) ?></span>
+                    <?php endif; ?>
+                    <input type="text" class="form-control" name="total" id="total" aria-describedby="total-icon" value="<?= to_currency_no_money($stats->total) ?>" disabled readonly>
+                    <?php if (is_right_side_currency_symbol()): ?>
+                        <span class="input-group-text" id="total-icon"><?= esc($config['currency_symbol']) ?></span>
+                    <?php endif; ?>
+                </div>
 
-                    <div class="form-group form-group-sm">
-                        <?= form_label(lang('Customers.max'), 'max', ['class' => 'control-label col-xs-5']) ?>
-                        <div class="col-xs-4">
-                            <div class="input-group input-group-sm">
-                                <?php if (!is_right_side_currency_symbol()): ?>
-                                    <span class="input-group-addon input-sm"><b><?= esc($config['currency_symbol']) ?></b></span>
-                                <?php endif; ?>
-                                <?= form_input([
-                                    'name'     => 'max',
-                                    'id'       => 'max',
-                                    'class'    => 'form-control input-sm',
-                                    'value'    => to_currency_no_money($stats->max),
-                                    'disabled' => ''
-                                ]) ?>
-                                <?php if (is_right_side_currency_symbol()): ?>
-                                    <span class="input-group-addon input-sm"><b><?= esc($config['currency_symbol']) ?></b></span>
-                                <?php endif; ?>
-                            </div>
-                        </div>
-                    </div>
+                <label for="max" class="form-label"><?= lang('Customers.max'); ?></label>
+                <div class="input-group mb-3">
+                    <?php if (!is_right_side_currency_symbol()): ?>
+                        <span class="input-group-text" id="max-icon"><?= esc($config['currency_symbol']) ?></span>
+                    <?php endif; ?>
+                    <input type="text" class="form-control" name="max" id="max" aria-describedby="max-icon" value="<?= to_currency_no_money($stats->max) ?>" disabled readonly>
+                    <?php if (is_right_side_currency_symbol()): ?>
+                        <span class="input-group-text" id="max-icon"><?= esc($config['currency_symbol']) ?></span>
+                    <?php endif; ?>
+                </div>
 
-                    <div class="form-group form-group-sm">
-                        <?= form_label(lang('Customers.min'), 'min', ['class' => 'control-label col-xs-5']) ?>
-                        <div class="col-xs-4">
-                            <div class="input-group input-group-sm">
-                                <?php if (!is_right_side_currency_symbol()): ?>
-                                    <span class="input-group-addon input-sm"><b><?= esc($config['currency_symbol']) ?></b></span>
-                                <?php endif; ?>
-                                <?= form_input([
-                                    'name'     => 'min',
-                                    'id'       => 'min',
-                                    'class'    => 'form-control input-sm',
-                                    'value'    => to_currency_no_money($stats->min),
-                                    'disabled' => ''
-                                ]) ?>
-                                <?php if (is_right_side_currency_symbol()): ?>
-                                    <span class="input-group-addon input-sm"><b><?= esc($config['currency_symbol']) ?></b></span>
-                                <?php endif; ?>
-                            </div>
-                        </div>
-                    </div>
+                <label for="min" class="form-label"><?= lang('Customers.min'); ?></label>
+                <div class="input-group mb-3">
+                    <?php if (!is_right_side_currency_symbol()): ?>
+                        <span class="input-group-text" id="min-icon"><?= esc($config['currency_symbol']) ?></span>
+                    <?php endif; ?>
+                    <input type="text" class="form-control" name="min" id="min" aria-describedby="min-icon" value="<?= to_currency_no_money($stats->min) ?>" disabled readonly>
+                    <?php if (is_right_side_currency_symbol()): ?>
+                        <span class="input-group-text" id="min-icon"><?= esc($config['currency_symbol']) ?></span>
+                    <?php endif; ?>
+                </div>
 
-                    <div class="form-group form-group-sm">
-                        <?= form_label(lang('Customers.average'), 'average', ['class' => 'control-label col-xs-5']) ?>
-                        <div class="col-xs-4">
-                            <div class="input-group input-group-sm">
-                                <?php if (!is_right_side_currency_symbol()): ?>
-                                    <span class="input-group-addon input-sm"><b><?= esc($config['currency_symbol']) ?></b></span>
-                                <?php endif; ?>
-                                <?= form_input([
-                                    'name'     => 'average',
-                                    'id'       => 'average',
-                                    'class'    => 'form-control input-sm',
-                                    'value'    => to_currency_no_money($stats->average),
-                                    'disabled' => ''
-                                ]) ?>
-                                <?php if (is_right_side_currency_symbol()): ?>
-                                    <span class="input-group-addon input-sm"><b><?= esc($config['currency_symbol']) ?></b></span>
-                                <?php endif; ?>
-                            </div>
-                        </div>
-                    </div>
+                <label for="average" class="form-label"><?= lang('Customers.average'); ?></label>
+                <div class="input-group mb-3">
+                    <?php if (!is_right_side_currency_symbol()): ?>
+                        <span class="input-group-text" id="average-icon"><?= esc($config['currency_symbol']) ?></span>
+                    <?php endif; ?>
+                    <input type="text" class="form-control" name="average" id="average" aria-describedby="average-icon" value="<?= to_currency_no_money($stats->average) ?>" disabled readonly>
+                    <?php if (is_right_side_currency_symbol()): ?>
+                        <span class="input-group-text" id="average-icon"><?= esc($config['currency_symbol']) ?></span>
+                    <?php endif; ?>
+                </div>
 
-                    <div class="form-group form-group-sm">
-                        <?= form_label(lang('Customers.quantity'), 'quantity', ['class' => 'control-label col-xs-5']) ?>
-                        <div class="col-xs-4">
-                            <div class="input-group input-group-sm">
-                                <span class="input-group-addon input-sm"><b><?= '>' ?></b></span>
-                                <?= form_input([
-                                    'name'     => 'quantity',
-                                    'id'       => 'quantity',
-                                    'class'    => 'form-control input-sm',
-                                    'value'    => to_quantity_decimals($stats->quantity),
-                                    'disabled' => ''
-                                ]) ?>
-                            </div>
-                        </div>
-                    </div>
+                <label for="quantity" class="form-label"><?= lang('Customers.quantity'); ?></label>
+                <div class="input-group mb-3">
+                    <span class="input-group-text" id="quantity-icon"><i class="bi bi-123"></i></span>
+                    <input type="text" class="form-control" name="quantity" id="quantity" aria-describedby="quantity-icon" value="<?= to_quantity_decimals($stats->quantity) ?>" disabled readonly>
+                </div>
 
-                    <div class="form-group form-group-sm">
-                        <?= form_label(lang('Customers.avg_discount'), 'avg_discount', ['class' => 'control-label col-xs-5']) ?>
-                        <div class="col-xs-4">
-                            <div class="input-group input-group-sm">
-                                <?= form_input([
-                                    'name'     => 'avg_discount',
-                                    'id'       => 'avg_discount',
-                                    'class'    => 'form-control input-sm',
-                                    'value'    => to_decimals($stats->avg_discount),
-                                    'disabled' => ''
-                                ]) ?>
-                                <span class="input-group-addon input-sm"><b>%</b></span>
-                            </div>
-                        </div>
-                    </div>
-                </fieldset>
+                <label for="avg_discount" class="form-label"><?= lang('Customers.avg_discount'); ?></label>
+                <div class="input-group mb-3">
+                    <span class="input-group-text" id="avg_discount-icon"><i class="bi bi-percent"></i></span>
+                    <input type="text" class="form-control" name="avg_discount" id="avg_discount" aria-describedby="avg_discount-icon" value="<?= to_decimals($stats->avg_discount) ?>" disabled readonly>
+                </div>
             </div>
         <?php } ?>
 
         <?php if (!empty($mailchimp_info) && !empty($mailchimp_activity)) { ?>
-            <div class="tab-pane" id="customer_mailchimp_info">
-                <fieldset>
-                    <div class="form-group form-group-sm">
-                        <?= form_label(lang('Customers.mailchimp_status'), 'mailchimp_status', ['class' => 'control-label col-xs-3']) ?>
-                        <div class="col-xs-4">
-                            <?= form_dropdown(
-                                'mailchimp_status',
-                                [
-                                    'subscribed'   => 'subscribed',
-                                    'unsubscribed' => 'unsubscribed',
-                                    'cleaned'      => 'cleaned',
-                                    'pending'      => 'pending'
-                                ],
-                                $mailchimp_info['status'],
-                                ['id' => 'mailchimp_status', 'class' => 'form-control input-sm']
-                            ) ?>
-                        </div>
-                    </div>
+            <div class="tab-pane" id="customer_mailchimp_info" role="tabpanel" tabindex="0">
+                <label for="mailchimp_status" class="form-label"><?= lang('Customers.mailchimp_status'); ?></label>
+                <div class="input-group mb-3">
+                    <span class="input-group-text"><i class="bi bi-envelope-check"></i></span>
+                    <select class="form-select" name="mailchimp_status" id="mailchimp_status">
+                        <option value="subscribed" <?= $mailchimp_info['status'] === 'subscribed' ? 'selected' : '' ?>>Subscribed</option>
+                        <option value="unsubscribed" <?= $mailchimp_info['status'] === 'unsubscribed' ? 'selected' : '' ?>>Unsubscribed</option>
+                        <option value="cleaned" <?= $mailchimp_info['status'] === 'cleaned' ? 'selected' : '' ?>>Cleaned</option>
+                        <option value="pending" <?= $mailchimp_info['status'] === 'pending' ? 'selected' : '' ?>>Pending</option>
+                    </select>
+                </div>
 
-                    <div class="form-group form-group-sm">
-                        <?= form_label(lang('Customers.mailchimp_vip'), 'mailchimp_vip', ['class' => 'control-label col-xs-3']) ?>
-                        <div class="col-xs-1">
-                            <?= form_checkbox('mailchimp_vip', 1, $mailchimp_info['vip'] == 1) ?>
-                        </div>
-                    </div>
+                <div class="form-check mb-3">
+                    <input class="form-check-input" type="checkbox" name="mailchimp_vip" id="mailchimp_vip" value="1" <?= $mailchimp_info['vip'] == 1 ? 'checked' : '' ?>>
+                    <label class="form-check-label" for="mailchimp_vip"><?= lang('Customers.mailchimp_vip') ?></label>
+                </div>
 
-                    <div class="form-group form-group-sm">
-                        <?= form_label(lang('Customers.mailchimp_member_rating'), 'mailchimp_member_rating', ['class' => 'control-label col-xs-3']) ?>
-                        <div class="col-xs-4">
-                            <?= form_input([
-                                'name'     => 'mailchimp_member_rating',
-                                'class'    => 'form-control input-sm',
-                                'value'    => $mailchimp_info['member_rating'],
-                                'disabled' => ''
-                            ]) ?>
-                        </div>
-                    </div>
+                <label for="mailchimp_member_rating" class="form-label"><?= lang('Customers.mailchimp_member_rating'); ?></label>
+                <div class="input-group mb-3">
+                    <span class="input-group-text" id="mailchimp_member_rating-icon"><i class="bi bi-hand-thumbs-up"></i></span>
+                    <input type="text" class="form-control" name="mailchimp_member_rating" id="mailchimp_member_rating" aria-describedby="mailchimp_member_rating-icon" value="<?= $mailchimp_info['member_rating'] ?>" disabled readonly>
+                </div>
 
-                    <div class="form-group form-group-sm">
-                        <?= form_label(lang('Customers.mailchimp_activity_total'), 'mailchimp_activity_total', ['class' => 'control-label col-xs-3']) ?>
-                        <div class="col-xs-4">
-                            <?= form_input([
-                                'name'     => 'mailchimp_activity_total',
-                                'class'    => 'form-control input-sm',
-                                'value'    => $mailchimp_activity['total'],
-                                'disabled' => ''
-                            ]) ?>
-                        </div>
-                    </div>
+                <label for="mailchimp_activity_total" class="form-label"><?= lang('Customers.mailchimp_activity_total'); ?></label>
+                <div class="input-group mb-3">
+                    <span class="input-group-text" id="mailchimp_activity_total-icon"><i class="bi bi-envelope-arrow-up"></i></span>
+                    <input type="text" class="form-control" name="mailchimp_activity_total" id="mailchimp_activity_total" aria-describedby="mailchimp_activity_total-icon" value="<?= $mailchimp_activity['total'] ?>" disabled readonly>
+                </div>
 
-                    <div class="form-group form-group-sm">
-                        <?= form_label(lang('Customers.mailchimp_activity_lastopen'), 'mailchimp_activity_lastopen', ['class' => 'control-label col-xs-3']) ?>
-                        <div class="col-xs-4">
-                            <?= form_input([
-                                'name'     => 'mailchimp_activity_lastopen',
-                                'class'    => 'form-control input-sm',
-                                'value'    => $mailchimp_activity['lastopen'],
-                                'disabled' => ''
-                            ]) ?>
-                        </div>
-                    </div>
+                <label for="mailchimp_activity_lastopen" class="form-label"><?= lang('Customers.mailchimp_activity_lastopen'); ?></label>
+                <div class="input-group mb-3">
+                    <span class="input-group-text" id="mailchimp_activity_lastopen-icon"><i class="bi bi-calendar2-check"></i></span>
+                    <input type="text" class="form-control" name="mailchimp_activity_lastopen" id="mailchimp_activity_lastopen" aria-describedby="mailchimp_activity_lastopen-icon" value="<?= $mailchimp_activity['lastopen'] ?>" disabled readonly>
+                </div>
 
-                    <div class="form-group form-group-sm">
-                        <?= form_label(lang('Customers.mailchimp_activity_open'), 'mailchimp_activity_open', ['class' => 'control-label col-xs-3']) ?>
-                        <div class="col-xs-4">
-                            <?= form_input([
-                                'name'     => 'mailchimp_activity_open',
-                                'class'    => 'form-control input-sm',
-                                'value'    => $mailchimp_activity['open'],
-                                'disabled' => ''
-                            ]) ?>
-                        </div>
-                    </div>
+                <label for="mailchimp_activity_open" class="form-label"><?= lang('Customers.mailchimp_activity_open'); ?></label>
+                <div class="input-group mb-3">
+                    <span class="input-group-text" id="mailchimp_activity_open-icon"><i class="bi bi-envelope-open"></i></span>
+                    <input type="text" class="form-control" name="mailchimp_activity_open" id="mailchimp_activity_open" aria-describedby="mailchimp_activity_open-icon" value="<?= $mailchimp_activity['open'] ?>" disabled readonly>
+                </div>
 
-                    <div class="form-group form-group-sm">
-                        <?= form_label(lang('Customers.mailchimp_activity_click'), 'mailchimp_activity_click', ['class' => 'control-label col-xs-3']) ?>
-                        <div class="col-xs-4">
-                            <?= form_input([
-                                'name'     => 'mailchimp_activity_click',
-                                'class'    => 'form-control input-sm',
-                                'value'    => $mailchimp_activity['click'],
-                                'disabled' => ''
-                            ]) ?>
-                        </div>
-                    </div>
+                <label for="mailchimp_activity_click" class="form-label"><?= lang('Customers.mailchimp_activity_click'); ?></label>
+                <div class="input-group mb-3">
+                    <span class="input-group-text" id="mailchimp_activity_click-icon"><i class="bi bi-hand-index"></i></span>
+                    <input type="text" class="form-control" name="mailchimp_activity_click" id="mailchimp_activity_click" aria-describedby="mailchimp_activity_click-icon" value="<?= $mailchimp_activity['click'] ?>" disabled readonly>
+                </div>
 
-                    <div class="form-group form-group-sm">
-                        <?= form_label(lang('Customers.mailchimp_activity_unopen'), 'mailchimp_activity_unopen', ['class' => 'control-label col-xs-3']) ?>
-                        <div class="col-xs-4">
-                            <?= form_input([
-                                'name'     => 'mailchimp_activity_unopen',
-                                'class'    => 'form-control input-sm',
-                                'value'    => $mailchimp_activity['unopen'],
-                                'disabled' => ''
-                            ]) ?>
-                        </div>
-                    </div>
+                <label for="mailchimp_activity_unopen" class="form-label"><?= lang('Customers.mailchimp_activity_unopen'); ?></label>
+                <div class="input-group mb-3">
+                    <span class="input-group-text" id="mailchimp_activity_unopen-icon"><i class="bi bi-envelope-slash"></i></span>
+                    <input type="text" class="form-control" name="mailchimp_activity_unopen" id="mailchimp_activity_unopen" aria-describedby="mailchimp_activity_unopen-icon" value="<?= $mailchimp_activity['unopen'] ?>" disabled readonly>
+                </div>
 
-                    <div class="form-group form-group-sm">
-                        <?= form_label(lang('Customers.mailchimp_email_client'), 'mailchimp_email_client', ['class' => 'control-label col-xs-3']) ?>
-                        <div class="col-xs-4">
-                            <?= form_input([
-                                'name'     => 'mailchimp_email_client',
-                                'class'    => 'form-control input-sm',
-                                'value'    => $mailchimp_info['email_client'],
-                                'disabled' => ''
-                            ]) ?>
-                        </div>
-                    </div>
-                </fieldset>
+                <label for="mailchimp_email_client" class="form-label"><?= lang('Customers.mailchimp_email_client'); ?></label>
+                <div class="input-group mb-3">
+                    <span class="input-group-text" id="mailchimp_email_client-icon"><i class="bi bi-inbox"></i></span>
+                    <input type="text" class="form-control" name="mailchimp_email_client" id="mailchimp_email_client" aria-describedby="mailchimp_email_client-icon" value="<?= $mailchimp_info['email_client'] ?>" disabled readonly>
+                </div>
             </div>
         <?php } ?>
     </div>

app/Views/customers/form_csv_import.php

@@ -1,27 +1,22 @@
-<ul id="error_message_box" class="error_message_box"></ul>
+<?= form_open_multipart('customers/importCsvFile/', ['id' => 'csv_form']) ?>
 
-<?= form_open_multipart('customers/importCsvFile/', ['id' => 'csv_form', 'class' => 'form-horizontal']) ?>
-    <fieldset id="item_basic_info">
+    <ul id="error_message_box" class="alert alert-warning d-none"></ul>
 
-        <div class="form-group form-group-sm">
-            <div class="col-xs-12">
-                <a href="<?= esc('customers/csv') ?>"><?= lang('Common.download_import_template') ?></a>
-            </div>
+    <a type="button" class="btn btn-secondary mb-3" href="<?= esc('customers/csv') ?>"><?= lang('Common.download_import_template') ?></a>
+
+    <div class="fileinput fileinput-new input-group mb-3" data-provides="fileinput">
+        <span class="input-group-text"><i class="bi bi-filetype-csv"></i></span>
+        <div class="form-control" data-trigger="fileinput">
+            <span class="fileinput-filename"></span>
         </div>
+        <span class="input-group-text fileinput-exists" data-dismiss="fileinput" style="cursor: pointer;"><?= lang('Common.import_remove_file') ?></span>
+        <span class="input-group-text btn-file">
+            <span class="fileinput-new"><?= lang('Common.import_select_file') ?></span>
+            <span class="fileinput-exists"><?= lang('Common.import_change_file') ?></span>
+            <input type="file" id="file_path" name="file_path" accept=".csv">
+        </span>
+    </div>
 
-        <div class="form-group form-group-sm">
-            <div class="col-xs-12">
-                <div class="fileinput fileinput-new input-group" data-provides="fileinput">
-                    <div class="form-control" data-trigger="fileinput"><i class="glyphicon glyphicon-file fileinput-exists"></i><span class="fileinput-filename"></span></div>
-                    <span class="input-group-addon input-sm btn btn-default btn-file">
-                        <span class="fileinput-new"><?= lang('Common.import_select_file') ?></span><span class="fileinput-exists"><?= lang('Common.import_change_file') ?></span><input type="file" id="file_path" name="file_path" accept=".csv">
-                    </span>
-                    <a href="#" class="input-group-addon input-sm btn btn-default fileinput-exists" data-dismiss="fileinput"><?= lang('Common.import_remove_file') ?></a>
-                </div>
-            </div>
-        </div>
-
-    </fieldset>
 <?= form_close() ?>
 
 <script type="text/javascript">

app/Views/employees/form.php

@@ -8,152 +8,125 @@
  */
 ?>
 
-<div id="required_fields_message"><?= lang('Common.fields_required_message') ?></div>
-<ul id="error_message_box" class="error_message_box"></ul>
+<?= form_open("$controller_name/save/$person_info->person_id", ['id' => 'employee_form']) ?>
 
-<?= form_open("$controller_name/save/$person_info->person_id", ['id' => 'employee_form', 'class' => 'form-horizontal']) ?>
-
-    <ul class="nav nav-tabs nav-justified" data-tabs="tabs">
-        <li class="active" role="presentation">
-            <a data-toggle="tab" href="#employee_basic_info"><?= lang('Employees.basic_information') ?></a>
+    <ul class="nav nav-pills nav-justified mb-3" role="tablist">
+        <li class="nav-item" role="presentation">
+            <button type="button" class="nav-link active" data-bs-toggle="pill" data-bs-target="#employee_basic_info" role="tab"><?= lang('Employees.basic_information') ?></button>
         </li>
-        <li role="presentation">
-            <a data-toggle="tab" href="#employee_login_info"><?= lang('Employees.login_info') ?></a>
+        <li class="nav-item" role="presentation">
+            <button type="button" class="nav-link" data-bs-toggle="pill" data-bs-target="#employee_login_info" role="tab"><?= lang('Employees.login_info') ?></button>
         </li>
-        <li role="presentation">
-            <a data-toggle="tab" href="#employee_permission_info"><?= lang('Employees.permission_info') ?></a>
+        <li class="nav-item" role="presentation">
+            <button type="button" class="nav-link" data-bs-toggle="pill" data-bs-target="#employee_permission_info" role="tab"><?= lang('Employees.permission_info') ?></button>
         </li>
     </ul>
 
+    <ul id="error_message_box" class="alert alert-warning d-none"></ul>
+
     <div class="tab-content">
-        <div class="tab-pane fade in active" id="employee_basic_info">
-            <fieldset>
-                <?= view('people/form_basic_info') ?>
-            </fieldset>
+        <div class="tab-pane show active" id="employee_basic_info" role="tabpanel" tabindex="0">
+            <?= view('people/form_basic_info') ?>
         </div>
 
-        <div class="tab-pane" id="employee_login_info">
-            <fieldset>
-                <div class="form-group form-group-sm">
-                    <?= form_label(lang('Employees.username'), 'username', ['class' => 'required control-label col-xs-3']) ?>
-                    <div class="col-xs-8">
-                        <div class="input-group">
-                            <span class="input-group-addon input-sm"><span class="glyphicon glyphicon-user"></span></span>
-                            <?= form_input([
-                                'name'  => 'username',
-                                'id'    => 'username',
-                                'class' => 'form-control input-sm',
-                                'value' => $person_info->username
-                            ]) ?>
-                        </div>
-                    </div>
-                </div>
+        <div class="tab-pane" id="employee_login_info" role="tabpanel" tabindex="0">
+            <label for="username" class="form-label"><?= lang('Employees.username'); ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text" id="username-icon"><i class="bi bi-person"></i></span>
+                <input type="text" class="form-control" name="username" id="username" aria-describedby="username-icon" value="<?= $person_info->username; ?>" required>
+            </div>
 
-                <?php $password_label_attributes = $person_info->person_id == "" ? ['class' => 'required'] : []; ?>
+            <?php $password_label_attributes = $person_info->person_id == "" ? ['class' => 'required'] : []; ?>
+            <label for="password" class="form-label"><?= lang('Employees.password'); ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text" id="password-icon"><i class="bi bi-lock"></i></span>
+                <input type="password" class="form-control" name="password" id="password" aria-describedby="password-icon" required>
+            </div>
 
-                <div class="form-group form-group-sm">
-                    <?= form_label(lang('Employees.password'), 'password', array_merge($password_label_attributes, ['class' => 'control-label col-xs-3'])) ?>
-                    <div class="col-xs-8">
-                        <div class="input-group">
-                            <span class="input-group-addon input-sm"><span class="glyphicon glyphicon-lock"></span></span>
-                            <?= form_password([
-                                'name'  => 'password',
-                                'id'    => 'password',
-                                'class' => 'form-control input-sm'
-                            ]) ?>
-                        </div>
-                    </div>
-                </div>
+            <label for="repeat_password" class="form-label"><?= lang('Employees.repeat_password'); ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text" id="repeat_password-icon"><i class="bi bi-lock"></i></span>
+                <input type="password" class="form-control" name="repeat_password" id="repeat_password" aria-describedby="repeat_password-icon" required>
+            </div>
 
-                <div class="form-group form-group-sm">
-                    <?= form_label(lang('Employees.repeat_password'), 'repeat_password', array_merge($password_label_attributes, ['class' => 'control-label col-xs-3'])) ?>
-                    <div class="col-xs-8">
-                        <div class="input-group">
-                            <span class="input-group-addon input-sm"><span class="glyphicon glyphicon-lock"></span></span>
-                            <?= form_password([
-                                'name'  => 'repeat_password',
-                                'id'    => 'repeat_password',
-                                'class' => 'form-control input-sm'
-                            ]) ?>
-                        </div>
-                    </div>
-                </div>
+            <label for="language" class="form-label"><?= lang('Employees.language'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text" id="language-icon"><i class="bi bi-globe"></i></span>
+                <?php
+                $languages = get_languages();
+                $languages[':'] = lang('Employees.system_language');
+                $language_code = current_language_code();
+                $language = current_language();
 
-                <div class="form-group form-group-sm">
-                    <?= form_label(lang('Employees.language'), 'language', ['class' => 'control-label col-xs-3']) ?>
-                    <div class="col-xs-8">
-                        <div class="input-group">
-                            <?php
-                            $languages = get_languages();
-                            $languages[':'] = lang('Employees.system_language');
-                            $language_code = current_language_code();
-                            $language = current_language();
+                // If No language is set then it will display "System Language"
+                if ($language_code === current_language_code(true)) {
+                    $language_code = '';
+                    $language = '';
+                }
 
-                            // If No language is set then it will display "System Language"
-                            if ($language_code === current_language_code(true)) {
-                                $language_code = '';
-                                $language = '';
-                            }
-
-                            echo form_dropdown(
-                                'language',
-                                $languages,
-                                "$language_code:$language",
-                                ['class' => 'form-control input-sm']
-                            );
-                            ?>
-                        </div>
-                    </div>
-                </div>
-            </fieldset>
+                echo form_dropdown(
+                    'language',
+                    $languages,
+                    "$language_code:$language",
+                    ['class' => 'form-select']
+                );
+                ?>
+            </div>
         </div>
 
-        <div class="tab-pane" id="employee_permission_info">
-            <fieldset>
-                <p><?= lang('Employees.permission_desc') ?></p>
+        <div class="tab-pane" id="employee_permission_info" role="tabpanel" tabindex="0">
+            <div class="mb-3"><?= lang('Employees.permission_desc') ?></div>
+            <ul class="list-unstyled" id="permission_list">
+                <?php foreach ($all_modules as $module): ?>
+                    <li class="form-check">
+                        <input class="form-check-input module" type="checkbox" value="<?= $module->module_id ?>" name="grant_<?= $module->module_id ?>" id="grant_<?= $module->module_id ?>" <?= $module->grant == 1 ? 'checked' : '' ?>>
+                        <label class="form-check-label" for="grant_<?= $module->module_id ?>">
+                            <select class="form-select form-select-sm d-inline-block w-auto me-1 module" name="menu_group_<?= $module->module_id ?>">
+                                <option value="home" <?= $module->menu_group == 'home' ? 'selected' : '' ?>>
+                                    <?= lang('Module.home') ?>
+                                </option>
+                                <option value="office" <?= $module->menu_group == 'office' ? 'selected' : '' ?>>
+                                    <?= lang('Module.office') ?>
+                                </option>
+                                <option value="both" <?= $module->menu_group == 'both' ? 'selected' : '' ?>>
+                                    <?= lang('Module.both') ?>
+                                </option>
+                            </select>
+                            <span><?= lang("Module.$module->module_id") ?>:</span>
+                            <span class="fw-light fst-italic"><?= lang("Module.$module->module_id" . '_desc') ?></span>
+                        </label>
 
-                <ul id="permission_list">
-                    <?php foreach ($all_modules as $module) { ?>
-                        <li>
-                            <?= form_checkbox("grant_$module->module_id", $module->module_id, $module->grant == 1, 'class="module"') ?>
-                            <?= form_dropdown(
-                                "menu_group_$module->module_id",
-                                [
-                                    'home'   => lang('Module.home'),
-                                    'office' => lang('Module.office'),
-                                    'both'   => lang('Module.both')
-                                ],
-                                $module->menu_group,
-                                'class="module"'
-                            ) ?>
-
-                            <span class="medium"><?= lang("Module.$module->module_id") ?>:</span>
-                            <span class="small"><?= lang("Module.$module->module_id" . '_desc') ?></span>
+                        <?php foreach ($all_subpermissions as $permission): ?>
                             <?php
-                            foreach ($all_subpermissions as $permission) {
                                 $exploded_permission = explode('_', $permission->permission_id, 2);
-                                if ($permission->module_id == $module->module_id) {
-                                    $lang_key = $module->module_id . '.' . $exploded_permission[1];
-                                    $lang_line = lang(ucfirst($lang_key));
-                                    $lang_line = (lang(ucfirst($lang_key)) == $lang_line) ? ucwords(str_replace("_", " ", $exploded_permission[1])) : $lang_line;
-                                    if (!empty($lang_line)) {
-                            ?>
-                                        <ul>
-                                            <li>
-                                                <?= form_checkbox("grant_$permission->permission_id", $permission->permission_id, $permission->grant == 1) ?>
-                                                <?= form_hidden("menu_group_$permission->permission_id", "--") ?>
-                                                <span class="medium"><?= esc($lang_line) ?></span>
-                                            </li>
-                                        </ul>
-                            <?php
-                                    }
+
+                                if ($permission->module_id != $module->module_id) {
+                                    continue;
+                                }
+
+                                $lang_key = $module->module_id . '.' . $exploded_permission[1];
+                                $lang_line = lang(ucfirst($lang_key));
+
+                                // Fallback if language line doesn't exist
+                                if ($lang_line === lang(ucfirst($lang_key))) {
+                                    $lang_line = ucwords(str_replace("_", " ", $exploded_permission[1]));
+                                }
+
+                                if (empty($lang_line)) {
+                                    continue;
                                 }
-                            }
                             ?>
-                        </li>
-                    <?php } ?>
-                </ul>
-            </fieldset>
+                            <ul class="list-unstyled">
+                                <li class="form-check">
+                                    <input class="form-check-input module" type="checkbox" value="<?= $permission->permission_id ?>" name="grant_<?= $permission->permission_id ?>" id="grant_<?= $permission->permission_id ?>" <?= $permission->grant == 1 ? 'checked' : '' ?>>
+                                    <input type="hidden" name="menu_group_<?= $permission->permission_id ?>" value="--">
+                                    <label class="form-check-label" for="grant_<?= $permission->permission_id ?>"><?= esc($lang_line) ?></label>
+                                </li>
+                            </ul>
+                        <?php endforeach; ?>
+                    </li>
+                <?php endforeach; ?>
+            </ul>
         </div>
     </div>
 

app/Views/errors/html/debug.css

@@ -101,9 +101,11 @@ p.lead {
 }
 
 .tabs {
-    list-style: none inside none;
+    list-style: none;
+    list-style-position: inside;
+    margin: 0;
     padding: 0;
-    margin: 0 0 -1px;
+    margin-bottom: -1px;
 }
 .tabs li {
     display: inline;

app/Views/expenses/form.php

@@ -24,7 +24,7 @@
             <?= form_label(lang('Expenses.date'), 'date', ['class' => 'required control-label col-xs-3']) ?>
             <div class="col-xs-6">
                 <div class="input-group">
-                    <span class="input-group-addon input-sm"><span class="glyphicon glyphicon-calendar"></span></span>
+                    <span class="input-group-addon input-sm"><i class="bi bi-calendar2"></i></span>
                     <?= form_input([
                         'name'     => 'date',
                         'class'    => 'form-control input-sm datetime',
@@ -52,7 +52,7 @@
             </div>
             <div class="col-xs-2">
                 <a id="remove_supplier_button" class="btn btn-danger btn-sm" title="Remove Supplier">
-                    <span class="glyphicon glyphicon-remove"></span>
+                    <i class="bi bi-x-circle"></i>
                 </a>
             </div>
         </div>

app/Views/expenses/manage.php

@@ -12,6 +12,11 @@
 
 <?= view('partial/header') ?>
 
+<?php
+$title_info['config_title'] = 'Expenses';
+echo view('configs/config_header', $title_info);
+?>
+
 <script type="text/javascript">
     $(document).ready(function() {
         // Load the preset datarange picker
@@ -54,29 +59,36 @@
 
 <?= view('partial/print_receipt', ['print_after_sale' => false, 'selected_printer' => 'takings_printer']) ?>
 
-<div id="title_bar" class="print_hide btn-toolbar">
-    <button onclick="printdoc()" class="btn btn-info btn-sm pull-right">
-        <span class="glyphicon glyphicon-print">&nbsp;</span><?= lang('Common.print') ?>
+<div id="title_bar" class="d-flex gap-2 justify-content-end d-print-none">
+    <button type="button" class="btn btn-primary modal-launch" data-btn-submit="<?= lang('Common.submit') ?>" data-href="<?= "$controller_name/view" ?>" title="<?= lang(ucfirst($controller_name) . ".new") ?>">
+        <i class="bi bi-journal-check me-2"></i><?= lang(esc(ucfirst($controller_name)) . '.new')    // TODO: String Interpolation ?>
     </button>
-    <button class="btn btn-info btn-sm pull-right modal-dlg" data-btn-submit="<?= lang('Common.submit') ?>" data-href="<?= "$controller_name/view" ?>" title="<?= lang(ucfirst($controller_name) . '.new') ?>">
-        <span class="glyphicon glyphicon-tags">&nbsp;</span><?= lang(ucfirst($controller_name) . '.new') ?>
+    <button type="button" class="btn btn-primary" onclick="window.print()" title="<?= lang('Common.print') ?>">
+        <i class="bi bi-printer me-2"></i><?= lang('Common.print') ?>
     </button>
 </div>
 
 <div id="toolbar">
-    <div class="pull-left form-inline" role="toolbar">
-        <button id="delete" class="btn btn-default btn-sm print_hide">
-            <span class="glyphicon glyphicon-trash">&nbsp;</span><?= lang('Common.delete') ?>
+    <div class="d-flex gap-2">
+        <button type="button" id="delete" class="btn btn-secondary d-print-none">
+            <i class="bi bi-trash"></i><span class="d-none d-sm-inline ms-2"><?= lang('Common.delete') ?></span>
         </button>
-        <?= form_input(['name' => 'daterangepicker', 'class' => 'form-control input-sm', 'id' => 'daterangepicker']) ?>
-        <?= form_multiselect('filters[]', esc($filters), $selected_filters ?? [], [
-            'id'                        => 'filters',
-            'data-none-selected-text'   => lang('Common.none_selected_text'),
-            'class'                     => 'selectpicker show-menu-arrow',
-            'data-selected-text-format' => 'count > 1',
-            'data-style'                => 'btn-default btn-sm',
-            'data-width'                => 'fit'
-        ]) ?>
+
+        <div class="input-group w-auto">
+            <span class="input-group-text" id="daterangepicker-icon"><i class="bi bi-calendar2-range"></i></span>
+            <input type="text" class="form-select" name="daterangepicker" id="daterangepicker" aria-describedby="daterangepicker-icon">
+        </div>
+
+        <div class="input-group w-auto">
+            <span class="input-group-text" id="filters-icon"><i class="bi bi-funnel"></i></span>
+            <select class="form-select" name="filters[]" id="filters" aria-describedby="filters-icon" multiple>
+                <?php foreach (esc($filters) as $value => $label) { ?>
+                    <option value="<?= $value ?>" <?= in_array($value, $selected_filters ?? []) ? 'selected' : '' ?>>
+                        <?= $label ?>
+                    </option>
+                <?php } ?>
+            </select>
+        </div>
     </div>
 </div>
 
@@ -87,3 +99,15 @@
 <div id="payment_summary"></div>
 
 <?= view('partial/footer') ?>
+
+<script type="text/javascript">
+    new TomSelect('#filters', {
+        plugins: ['checkbox_options', 'remove_button'],
+        placeholder: '<?= lang('Common.none_selected_text') ?>',
+        hidePlaceholder: true,
+        closeAfterSelect: false,
+        onChange: function() {
+            $('#table').bootstrapTable('refresh');
+        }
+    });
+</script>

app/Views/expenses_categories/form.php

@@ -5,37 +5,22 @@
  */
 ?>
 
-<div id="required_fields_message"><?= lang('Common.fields_required_message') ?></div>
-<ul id="error_message_box" class="error_message_box"></ul>
+<?= form_open("expenses_categories/save/$category_info->expense_category_id", ['id' => 'expense_category_edit_form']) ?>
 
-<?= form_open("expenses_categories/save/$category_info->expense_category_id", ['id' => 'expense_category_edit_form', 'class' => 'form-horizontal']) ?>
-    <fieldset id="expenses_categories">
+    <ul id="error_message_box" class="alert alert-warning d-none"></ul>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Expenses_categories.name'), 'category_name', ['class' => 'required control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <?= form_input([
-                    'name'  => 'category_name',
-                    'id'    => 'category_name',
-                    'class' => 'form-control input-sm',
-                    'value' => $category_info->category_name
-                ]) ?>
-            </div>
-        </div>
+    <label for="category_name" class="form-label"><?= lang('Expenses_categories.name'); ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="category_name-icon"><i class="bi bi-bookmark"></i></span>
+        <input type="text" class="form-control" name="category_name" id="category_name" aria-describedby="category_name-icon" value="<?= $category_info->category_name; ?>" required>
+    </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Expenses_categories.description'), 'category_description', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <?= form_textarea([
-                    'name'  => 'category_description',
-                    'id'    => 'category_description',
-                    'class' => 'form-control input-sm',
-                    'value' => $category_info->category_description
-                ]) ?>
-            </div>
-        </div>
+    <label for="category_description" class="form-label"><?= lang('Expenses_categories.description'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="category_description-icon"><i class="bi bi-card-text"></i></span>
+        <textarea class="form-control" name="category_description" id="category_description" rows="10" aria-describedby="category_description-icon"><?= $category_info->category_description ?></textarea>
+    </div>
 
-    </fieldset>
 <?= form_close() ?>
 
 <script type="text/javascript">

app/Views/expenses_categories/manage.php

@@ -8,6 +8,11 @@
 
 <?= view('partial/header') ?>
 
+<?php
+$title_info['config_title'] = 'Expenses Categories';
+echo view('configs/config_header', $title_info);
+?>
+
 <script type="text/javascript">
     $(document).ready(function() {
         <?= view('partial/bootstrap_tables_locale') ?>
@@ -27,16 +32,16 @@
     });
 </script>
 
-<div id="title_bar" class="btn-toolbar">
-    <button class="btn btn-info btn-sm pull-right modal-dlg" data-btn-submit="<?= lang('Common.submit') ?>" data-href="<?= esc("$controller_name/view") ?>" title="<?= lang(ucfirst($controller_name) . '.new') ?>">
-        <span class="glyphicon glyphicon-list">&nbsp;</span><?= lang(ucfirst($controller_name) . '.new') ?>
+<div class="d-flex gap-2 justify-content-end">
+    <button type="button" class="btn btn-primary modal-launch" data-btn-submit="<?= lang('Common.submit') ?>" data-href="<?= esc("$controller_name/view") ?>" title="<?= lang(ucfirst($controller_name) . '.new') ?>">
+        <i class="bi bi-bookmark-plus me-2"></i><?= lang(ucfirst($controller_name) . '.new') ?>
     </button>
 </div>
 
 <div id="toolbar">
-    <div class="pull-left form-inline" role="toolbar">
-        <button id="delete" class="btn btn-default btn-sm print_hide">
-            <span class="glyphicon glyphicon-trash">&nbsp;</span><?= lang('Common.delete') ?>
+    <div class="d-flex gap-2">
+        <button type="button" class="btn btn-secondary" id="delete">
+            <i class="bi bi-trash"></i><span class="d-none d-sm-inline ms-2"><?= lang('Common.delete') ?></span>
         </button>
     </div>
 </div>

app/Views/giftcards/form.php

@@ -10,65 +10,42 @@
  */
 ?>
 
-<div id="required_fields_message"><?= lang('Common.fields_required_message') ?></div>
-<ul id="error_message_box" class="error_message_box"></ul>
+<?= form_open("giftcards/save/$giftcard_id", ['id' => 'giftcard_form']) ?>
 
-<?= form_open("giftcards/save/$giftcard_id", ['id' => 'giftcard_form', 'class' => 'form-horizontal']) ?>
-    <fieldset id="giftcard_basic_info">
+    <ul id="error_message_box" class="alert alert-warning d-none"></ul>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Giftcards.person_id'), 'person_name', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <?= form_input([
-                    'name'  => 'person_name',
-                    'id'    => 'person_name',
-                    'class' => 'form-control input-sm',
-                    'value' => $selected_person_name
-                ]) ?>
-                <?= form_hidden('person_id', (string)$selected_person_id) ?>
-            </div>
-        </div>
+    <label for="person_name" class="form-label"><?= lang('Giftcards.person_id'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="person_name-icon"><i class="bi bi-person"></i></span>
+        <input type="hidden" name="person_id" value="<?= (string)$selected_person_id ?>">
+        <input type="text" class="form-control" name="person_name" id="person_name" aria-describedby="person_name-icon" value="<?= $selected_person_name ?>">
+    </div>
 
-        <?php
-        $class = '';
-        if ($config['giftcard_number'] == 'series') {
-            $class = ' required';
-        }
-        ?>
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Giftcards.giftcard_number'), 'giftcard_number', ['class' => "control-label col-xs-3$class"]) ?>
-            <div class="col-xs-4">
-                <?= form_input([
-                    'name'  => 'giftcard_number',
-                    'id'    => 'giftcard_number',
-                    'class' => 'form-control input-sm',
-                    'value' => $giftcard_number
-                ]) ?>
-            </div>
-        </div>
+    <?php
+    $class = '';
+    $label = '';
+    if ($config['giftcard_number'] == 'series') {
+        $class = 'required';
+        $label = '<sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup>';
+    }
+    ?>
+    <label for="giftcard_number" class="form-label"><?= lang('Giftcards.giftcard_number'); ?><?= $label ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="giftcard_number-icon"><i class="bi bi-gift"></i></span>
+        <input type="text" class="form-control" name="giftcard_number" id="giftcard_number" aria-describedby="giftcard_number-icon" value="<?= $giftcard_number ?>" <?= $class ?>>
+    </div>
 
+    <label for="giftcard_amount" class="form-label"><?= lang('Giftcards.card_value') ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+    <div class="input-group mb-3">
+        <?php if (!is_right_side_currency_symbol()): ?>
+            <span class="input-group-text" id="giftcard_amount-icon"><?= esc($config['currency_symbol']) ?></span>
+        <?php endif; ?>
+        <input type="number" class="form-control" name="giftcard_amount" id="giftcard_amount" aria-describedby="giftcard_amount-icon" value="<?= number_format((float)$giftcard_value, 2, '.', '') ?>" required>
+        <?php if (is_right_side_currency_symbol()): ?>
+            <span class="input-group-text" id="giftcard_amount-icon"><?= esc($config['currency_symbol']) ?></span>
+        <?php endif; ?>
+    </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Giftcards.card_value'), 'giftcard_amount', ['class' => 'required control-label col-xs-3']) ?>
-            <div class="col-xs-4">
-                <div class="input-group input-group-sm">
-                    <?php if (!is_right_side_currency_symbol()): ?>
-                        <span class="input-group-addon input-sm"><?= esc($config['currency_symbol']) ?></span>
-                    <?php endif; ?>
-                    <?= form_input([
-                        'name'  => 'giftcard_amount',
-                        'id'    => 'giftcard_amount',
-                        'class' => 'form-control input-sm',
-                        'value' => to_currency_no_money($giftcard_value)
-                    ]) ?>
-                    <?php if (is_right_side_currency_symbol()): ?>
-                        <span class="input-group-addon input-sm"><b><?= esc($config['currency_symbol']) ?></span>
-                    <?php endif; ?>
-                </div>
-            </div>
-        </div>
-
-    </fieldset>
 <?= form_close() ?>
 
 <script type="text/javascript">

app/Views/giftcards/manage.php

@@ -8,6 +8,11 @@
 
 <?= view('partial/header') ?>
 
+<?php
+$title_info['config_title'] = 'Gift Cards';
+echo view('configs/config_header', $title_info);
+?>
+
 <script type="text/javascript">
     $(document).ready(function() {
         <?= view('partial/bootstrap_tables_locale') ?>
@@ -20,16 +25,16 @@
     });
 </script>
 
-<div id="title_bar" class="btn-toolbar">
-    <button class="btn btn-info btn-sm pull-right modal-dlg" data-btn-submit="<?= lang('Common.submit') ?>" data-href="<?= esc("$controller_name/view") ?>" title="<?= lang(ucfirst($controller_name) . '.new') ?>">
-        <span class="glyphicon glyphicon-heart">&nbsp;</span><?= lang(ucfirst($controller_name) . '.new') ?>
+<div class="d-flex gap-2 justify-content-end">
+    <button type="button" class="btn btn-primary modal-launch" data-btn-submit="<?= lang('Common.submit') ?>" data-href="<?= esc("$controller_name/view") ?>" title="<?= lang(ucfirst($controller_name) . '.new') ?>">
+        <i class="bi bi-gift me-2"></i><?= lang(ucfirst($controller_name) .'.new') ?>
     </button>
 </div>
 
 <div id="toolbar">
-    <div class="pull-left btn-toolbar">
-        <button id="delete" class="btn btn-default btn-sm">
-            <span class="glyphicon glyphicon-trash">&nbsp;</span><?= lang('Common.delete') ?>
+    <div class="d-flex gap-2">
+        <button type="button" class="btn btn-secondary">
+            <i class="bi bi-trash"></i><span class="d-none d-sm-inline ms-2"><?= lang('Common.delete') ?></span>
         </button>
     </div>
 </div>

app/Views/home/form_change_password.php

@@ -1,130 +0,0 @@
-<?php
-/**
- * @var object $person_info
- */
-?>
-
-<div id="required_fields_message"><?= lang('Common.fields_required_message') ?></div>
-<ul id="error_message_box" class="error_message_box"></ul>
-
-<?= form_open("home/save/$person_info->person_id", ['id' => 'employee_form', 'class' => 'form-horizontal']) ?>
-    <div class="tab-content">
-        <div class="tab-pane fade in active" id="employee_login_info">
-            <fieldset>
-
-                <div class="form-group form-group-sm">
-                    <?= form_label(lang('Employees.username'), 'username', ['class' => 'required control-label col-xs-3']) ?>
-                    <div class="col-xs-8">
-                        <div class="input-group">
-                            <span class="input-group-addon input-sm"><span class="glyphicon glyphicon-user"></span></span>
-                            <?= form_input([
-                                'name'     => 'username',
-                                'id'       => 'username',
-                                'class'    => 'form-control input-sm',
-                                'value'    => $person_info->username,
-                                'readonly' => 'true'
-                            ]) ?>
-                        </div>
-                    </div>
-                </div>
-
-                <?php $password_label_attributes = $person_info->person_id == "" ? ['class' => 'required'] : []; ?>
-
-                <div class="form-group form-group-sm">
-                    <?= form_label(lang('Employees.current_password'), 'current_password', array_merge($password_label_attributes, ['class' => 'control-label col-xs-3'])) ?>
-                    <div class="col-xs-8">
-                        <div class="input-group">
-                            <span class="input-group-addon input-sm"><span class="glyphicon glyphicon-lock"></span></span>
-                            <?= form_password([
-                                'name'  => 'current_password',
-                                'id'    => 'current_password',
-                                'class' => 'form-control input-sm'
-                            ]) ?>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="form-group form-group-sm">
-                    <?= form_label(lang('Employees.password'), 'password', array_merge($password_label_attributes, ['class' => 'control-label col-xs-3'])) ?>
-                    <div class="col-xs-8">
-                        <div class="input-group">
-                            <span class="input-group-addon input-sm"><span class="glyphicon glyphicon-lock"></span></span>
-                            <?= form_password([
-                                'name'  => 'password',
-                                'id'    => 'password',
-                                'class' => 'form-control input-sm'
-                            ]) ?>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="form-group form-group-sm">
-                    <?= form_label(lang('Employees.repeat_password'), 'repeat_password', array_merge($password_label_attributes, ['class' => 'control-label col-xs-3'])) ?>
-                    <div class="col-xs-8">
-                        <div class="input-group">
-                            <span class="input-group-addon input-sm"><span class="glyphicon glyphicon-lock"></span></span>
-                            <?= form_password([
-                                'name'  => 'repeat_password',
-                                'id'    => 'repeat_password',
-                                'class' => 'form-control input-sm'
-                            ]) ?>
-                        </div>
-                    </div>
-                </div>
-
-            </fieldset>
-        </div>
-    </div>
-<?= form_close() ?>
-
-<script type="text/javascript">
-    // Validation and submit handling
-    $(document).ready(function() {
-        $.validator.setDefaults({
-            ignore: []
-        });
-
-        $.validator.addMethod("notEqualTo", function(value, element, param) {
-            return this.optional(element) || value != $(param).val();
-        }, '<?= lang('Employees.password_not_must_match') ?>');
-
-        $('#employee_form').validate($.extend({
-            submitHandler: function(form) {
-                $(form).ajaxSubmit({
-                    success: function(response) {
-                        dialog_support.hide();
-                        $.notify(response.message, {
-                            type: response.success ? 'success' : 'danger'
-                        });
-                    },
-                    dataType: 'json'
-                });
-            },
-
-            rules: {
-                current_password: {
-                    required: true,
-                    minlength: 8
-                },
-                password: {
-                    required: true,
-                    minlength: 8,
-                    notEqualTo: "#current_password"
-                },
-                repeat_password: {
-                    equalTo: "#password"
-                }
-            },
-
-            messages: {
-                password: {
-                    required: "<?= lang('Employees.password_required') ?>",
-                    minlength: "<?= lang('Employees.password_minlength') ?>"
-                },
-                repeat_password: {
-                    equalTo: "<?= lang('Employees.password_must_match') ?>"
-                }
-            }
-        }, form_support.error));
-    });
-</script>

app/Views/home/home.php

@@ -6,19 +6,6 @@
 
 <?= view('partial/header') ?>
 
-<script type="text/javascript">
-    dialog_support.init("a.modal-dlg");
-</script>
-
-<h3 class="text-center"><?= lang('Common.welcome_message') ?></h3>
-
-<div id="home_module_list">
-    <?php foreach($allowed_modules as $module) { ?>
-        <div class="module_item" title="<?= lang("Module.$module->module_id" . '_desc') ?>">
-            <a href="<?= base_url($module->module_id) ?>"><img src="<?= base_url("images/menubar/$module->module_id.svg") ?>" style="border-width: 0; height: 64px; max-width: 64px;" alt="Menubar Image"></a>
-            <a href="<?= base_url($module->module_id) ?>"><?= lang("Module.$module->module_id") ?></a>
-        </div>
-    <?php } ?>
-</div>
+<?= view('home/modules') ?>
 
 <?= view('partial/footer') ?>

app/Views/home/modules.php

@@ -0,0 +1,16 @@
+<h3 class="text-center pb-3 d-none d-lg-block"><?= lang('Common.welcome_message') ?></h3>
+
+<section class="container-fluid d-flex flex-wrap justify-content-center gap-3 p-0 py-1 py-lg-0">
+    <?php foreach ($allowed_modules as $module) { ?>
+        <div class="border border-primary rounded shadow-sm bg-primary-subtle text-center d-block" title="<?= lang("Module.$module->module_id" . '_desc') ?>">
+            <a href="<?= base_url($module->module_id) ?>">
+                <img class="d-block mx-auto p-2" src="<?= base_url("images/menubar/$module->module_id.svg") ?>" alt="Menubar Image"> <!-- TODO-BS5 alt text translatable -->
+            </a>
+            <a href="<?= base_url($module->module_id) ?>">
+                <div class="tile-text rounded-bottom d-block bg-primary text-light fw-bold p-2">
+                    <span><?= lang("Module.$module->module_id") ?></span>
+                </div>
+            </a>
+        </div>
+    <?php } ?>
+</section>

app/Views/home/office.php

@@ -6,19 +6,6 @@
 
 <?= view('partial/header') ?>
 
-<script type="text/javascript">
-    dialog_support.init("a.modal-dlg");
-</script>
-
-<h3 class="text-center"><?= lang('Common.welcome_message') ?></h3>
-
-<div id="office_module_list">
-    <?php foreach ($allowed_modules as $module) { ?>
-        <div class="module_item" title="<?= lang("Module.$module->module_id" . '_desc') ?>">
-            <a href="<?= base_url($module->module_id) ?>"><img src="<?= base_url("images/menubar/$module->module_id.svg") ?>" style="border-width: 0; height: 64px; max-width: 64px;" alt="Menubar Image"></a>
-            <a href="<?= base_url($module->module_id) ?>"><?= lang("Module.$module->module_id") ?></a>
-        </div>
-    <?php } ?>
-</div>
+<?= view('home/modules') ?>
 
 <?= view('partial/footer') ?>

app/Views/home/profile.php

@@ -0,0 +1,137 @@
+<?php
+$email = $user_info->email;
+$size = 96;
+$default = 'https://ui-avatars.com/api/?name=' . $user_info->first_name . '+' . $user_info->last_name . '&format=svg&size=' . $size;
+$grav_url = 'https://www.gravatar.com/avatar/' . md5(strtolower(trim($email))) . '?d=' . urlencode($default) . '&s=' . $size;
+?>
+
+<div class="modal fade" id="profile-modal" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <ul class="nav nav-pills nav-justified w-100 me-1 gap-1">
+                    <li class="nav-item">
+                        <button type="button" id="modal-button-profile" onclick="modalSwitchProfile()" class="nav-link active">Profile</button>
+                    </li>
+                    <li class="nav-item" title="<?= lang('Employees.change_password'); ?>">
+                        <button type="button" id="modal-button-password" onclick="modalSwitchPassword()" class="nav-link"><?= lang('Employees.change_password'); ?></button>
+                    </li>
+                </ul>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body text-start">
+                <div id="modal-profile">
+                    <div class="container">
+                        <table>
+                            <tbody>
+                                <tr>
+                                    <td class="pe-2"><img class="img-thumbnail rounded-circle" src="<?= $default; ?>" style="height: 48px;"></td>
+                                    <td class="align-middle"><h5><?= $user_info->first_name . '&nbsp;' . $user_info->last_name; ?></h5></td>
+                                </tr>
+                            </tbody>
+                        </table>
+                        <br>
+                        <table>
+                            <tbody>
+                                <tr>
+                                    <td class="pe-3">Username</td>
+                                    <td><?= $user_info->username; ?></td>
+                                </tr>
+                                <tr>
+                                    <td class="pe-3"><?= lang('Common.id'); ?></td>
+                                    <td><?= $user_info->person_id; ?></td>
+                                </tr>
+                                <tr>
+                                    <td class="pe-3"><?= lang('Common.email'); ?></td>
+                                    <td><?= $user_info->email; ?></td>
+                                </tr>
+                                <tr>
+                                    <td class="pe-3"><?= lang('Common.phone_number'); ?></td>
+                                    <td><?= $user_info->phone_number; ?></td>
+                                </tr>
+                                <tr>
+                                    <td class="pe-3"><?= lang('Common.gender'); ?></td>
+                                    <td><?= $user_info->gender; ?></td>
+                                </tr>
+                                <tr>
+                                    <td class="pe-3"><?= lang('Common.address_1'); ?></td>
+                                    <td><?= $user_info->address_1; ?></td>
+                                </tr>
+                                <tr>
+                                    <td class="pe-3"><?= lang('Common.address_2'); ?></td>
+                                    <td><?= $user_info->address_2; ?></td>
+                                </tr>
+                                <tr>
+                                    <td class="pe-3"><?= lang('Common.city'); ?></td>
+                                    <td><?= $user_info->city; ?></td>
+                                </tr>
+                                <tr>
+                                    <td class="pe-3"><?= lang('Common.state'); ?></td>
+                                    <td><?= $user_info->state; ?></td>
+                                </tr>
+                                <tr>
+                                    <td class="pe-3"><?= lang('Common.zip'); ?></td>
+                                    <td><?= $user_info->zip; ?></td>
+                                </tr>
+                                <tr>
+                                    <td class="pe-3"><?= lang('Common.country'); ?></td>
+                                    <td><?= $user_info->country; ?></td>
+                                </tr>
+                                <tr>
+                                    <td class="pe-3"><?= lang('Common.comments'); ?></td>
+                                    <td><?= $user_info->comments; ?></td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+
+                <div id="modal-password" class="d-none was-validated" novalidate>
+
+                    <div class="input-group mb-3">
+                        <span class="input-group-text"><i class="bi bi-person"></i></span>
+                        <div class="form-floating">
+                            <input name="username" id="input-username" type="text" class="form-control" placeholder="<?= lang('Login.username'); ?>" value="<?= $user_info->username; ?>" disabled>
+                            <label for="input-username"><?= lang('Login.username'); ?></label>
+                        </div>
+                    </div>
+                    <div class="input-group mb-3">
+                        <span class="input-group-text"><i class="bi bi-lock"></i></span>
+                        <div class="form-floating is-invalid">
+                            <input name="password-current" id="input-password-current" type="password" class="form-control" placeholder="Current Password" required>
+                            <label for="input-password-current">Current Password</label>
+                        </div>
+                        <div class="invalid-feedback">Please fill in your current password.</div>
+                    </div>
+                    <div class="form-text">Must be 8-20 characters long</div>
+                    <div class="input-group mb-3">
+                        <span class="input-group-text"><i class="bi bi-lock"></i></span>
+                        <div class="form-floating is-invalid">
+                            <input name="password-new" id="input-password-new" type="password" class="form-control" placeholder="New Password" required>
+                            <label for="input-password-new">New Password</label>
+                        </div>
+                        <div class="invalid-feedback">Please fill in a new password.</div>
+                    </div>
+                    <div class="input-group mb-3">
+                        <span class="input-group-text"><i class="bi bi-lock"></i></span>
+                        <div class="form-floating is-invalid">
+                            <input name="password-repeat" id="input-password-repeat" type="password" class="form-control" placeholder="Repeat Password" required>
+                            <label for="input-password-repeat">Repeat Password</label>
+                        </div>
+                        <div class="invalid-feedback">Please repeat the new password.</div>
+                    </div>
+
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+                <a type="button" id="modal-button-logout" class="btn btn-danger" href="home/logout">
+                    <i class="bi bi-power me-2"></i><?= lang('Login.logout'); ?>
+                </a>
+                <button type="button" id="modal-button-save" class="btn btn-primary d-none">
+                    <i class="bi bi-floppy me-2"></i>Save
+                </button>
+            </div>
+        </div>
+    </div>
+</div>

app/Views/item_kits/form.php

@@ -8,200 +8,114 @@
  */
 ?>
 
-<div id="required_fields_message"><?= lang('Common.fields_required_message') ?></div>
-<ul id="error_message_box" class="error_message_box"></ul>
+<?= form_open("item_kits/save/$item_kit_info->item_kit_id", ['id' => 'item_kit_form']) ?>
 
-<?= form_open("item_kits/save/$item_kit_info->item_kit_id", ['id' => 'item_kit_form', 'class' => 'form-horizontal']) ?>
-    <fieldset id="item_kit_basic_info">
+    <ul id="error_message_box" class="alert alert-warning d-none"></ul>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Item_kits.item_kit_number'), 'item_kit_number', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <div class="input-group">
-                    <span class="input-group-addon input-sm"><span class="glyphicon glyphicon-barcode"></span></span>
-                    <?= form_input([
-                        'name'  => 'item_kit_number',
-                        'id'    => 'item_kit_number',
-                        'class' => 'form-control input-sm',
-                        'value' => $item_kit_info->item_kit_number
-                    ]) ?>
-                </div>
-            </div>
+    <label for="item_kit_number" class="form-label"><?= lang('Item_kits.item_kit_number'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="item_kit_number-icon"><i class="bi bi-upc-scan"></i></span>
+        <input type="text" class="form-control" name="item_kit_number" id="item_kit_number" aria-describedby="item_kit_number-icon" value="<?= $item_kit_info->item_kit_number ?>">
+    </div>
+
+    <label for="name" class="form-label"><?= lang('Item_kits.name'); ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="name-icon"><i class="bi bi-tags"></i></span>
+        <input type="text" class="form-control" name="name" id="name" aria-describedby="name-icon" value="<?= $item_kit_info->name ?>" required>
+    </div>
+
+    <label for="item_name" class="form-label"><?= lang('Item_kits.find_kit_item'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="item_name-icon"><i class="bi bi-tag"></i></span>
+        <input type="hidden" name="kit_item_id" value="<?= (string)$selected_kit_item_id ?>">
+        <input type="text" class="form-control" name="item_name" id="item_name" aria-describedby="item_name-icon" value="<?= $selected_kit_item ?>">
+    </div>
+
+    <label for="kit_discount_type" class="form-label"><?= lang('Item_kits.discount_type') ?></label>
+    <div class="mb-3">
+        <div class="form-check form-check-inline">
+            <input class="form-check-input" type="radio" name="kit_discount_type" id="kit_discount_type_percent" value="0" <?= $item_kit_info->kit_discount_type == PERCENT ? 'checked' : '' ?>>
+            <label class="form-check-label" for="kit_discount_type_percent"><?= lang('Item_kits.discount_percent') ?></label>
         </div>
-
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Item_kits.name'), 'name', ['class' => 'required control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <?= form_input([
-                    'name'  => 'name',
-                    'id'    => 'name',
-                    'class' => 'form-control input-sm',
-                    'value' => $item_kit_info->name
-                ]) ?>
-            </div>
+        <div class="form-check form-check-inline">
+            <input class="form-check-input" type="radio" name="kit_discount_type" id="kit_discount_type_fixed" value="1" <?= $item_kit_info->kit_discount_type == FIXED ? 'checked' : '' ?>>
+            <label class="form-check-label" for="kit_discount_type_fixed"><?= lang('Item_kits.discount_fixed') ?></label>
         </div>
+    </div>
 
-        <div class="form-group  form-group-sm">
-            <?= form_label(lang('Item_kits.find_kit_item'), 'item_name', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <div class="input-group input-group-sm">
-                    <?= form_input([
-                        'name'  => 'item_name',
-                        'id'    => 'item_name',
-                        'class' => 'form-control input-sm',
-                        'size'  => '50',
-                        'value' => $selected_kit_item
-                    ]) ?>
-                    <?= form_hidden('kit_item_id', (string)$selected_kit_item_id) ?>
+    <label for="kit_discount" class="form-label"><?= lang('Item_kits.discount'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="kit_discount-icon"><i class="bi bi-patch-minus"></i></span>
+        <input type="number" step="any" class="form-control" name="kit_discount" id="kit_discount" aria-describedby="kit_discount-icon" value="<?= $item_kit_info->kit_discount_type === FIXED ? to_currency_no_money($item_kit_info->kit_discount) : to_decimals($item_kit_info->kit_discount) ?>">
+    </div>
 
-                </div>
-            </div>
+    <label for="price_option" class="form-label"><?= lang('Item_kits.price_option') ?> <?= !empty($basic_version) ? '<sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup>' : '' ?></label>
+    <div class="mb-3">
+        <div class="form-check form-check-inline">
+            <input class="form-check-input" type="radio" name="price_option" id="price_option_kit_and_components" value="0" <?= $item_kit_info->price_option == PRICE_ALL ? 'checked' : '' ?> <?= !empty($basic_version) ? 'required' : '' ?>>
+            <label class="form-check-label" for="price_option_kit_and_components"><?= lang('Item_kits.kit_and_components') ?></label>
         </div>
-
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Item_kits.discount_type'), 'kit_discount_type', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <label class="radio-inline">
-                    <?= form_radio([
-                        'name'    => 'kit_discount_type',
-                        'type'    => 'radio',
-                        'value'   => 0,
-                        'checked' => $item_kit_info->kit_discount_type == PERCENT
-                    ]) ?> <?= lang('Item_kits.discount_percent') ?>
-                </label>
-                <label class="radio-inline">
-                    <?= form_radio([
-                        'name'    => 'kit_discount_type',
-                        'type'    => 'radio',
-                        'value'   => 1,
-                        'checked' => $item_kit_info->kit_discount_type == FIXED
-                    ]) ?> <?= lang('Item_kits.discount_fixed') ?>
-                </label>
-            </div>
+        <div class="form-check form-check-inline">
+            <input class="form-check-input" type="radio" name="price_option" id="price_option_kit_only" value="1" <?= $item_kit_info->price_option == PRICE_KIT ? 'checked' : '' ?> <?= !empty($basic_version) ? 'required' : '' ?>>
+            <label class="form-check-label" for="price_option_kit_only"><?= lang('Item_kits.kit_only') ?></label>
         </div>
-
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Item_kits.discount'), 'kit_discount', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-3">
-                <div class="input-group input-group-sm">
-                    <?= form_input([
-                        'name'      => 'kit_discount',
-                        'size'      => '5',
-                        'maxlength' => '5',
-                        'id'        => 'kit_discount',
-                        'class'     => 'form-control input-sm',
-                        'value'     => $item_kit_info->kit_discount_type === FIXED ? to_currency_no_money($item_kit_info->kit_discount) : to_decimals($item_kit_info->kit_discount)
-                    ]) ?>
-                </div>
-            </div>
+        <div class="form-check form-check-inline">
+            <input class="form-check-input" type="radio" name="price_option" id="price_option_kit_and_stock" value="2" <?= $item_kit_info->price_option == PRICE_KIT_ITEMS ? 'checked' : '' ?> <?= !empty($basic_version) ? 'required' : '' ?>>
+            <label class="form-check-label" for="price_option_kit_and_stock"><?= lang('Item_kits.kit_and_stock') ?></label>
         </div>
+    </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Item_kits.price_option'), 'price_option', !empty($basic_version) ? ['class' => 'required control-label col-xs-3'] : ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <label class="radio-inline">
-                    <?= form_radio([
-                        'name'    => 'price_option',
-                        'type'    => 'radio',
-                        'value'   => 0,
-                        'checked' => $item_kit_info->price_option == PRICE_ALL
-                    ]) ?> <?= lang('Item_kits.kit_and_components') ?>
-                </label>
-                <label class="radio-inline">
-                    <?= form_radio([
-                        'name'    => 'price_option',
-                        'type'    => 'radio',
-                        'value'   => 1,
-                        'checked' => $item_kit_info->price_option == PRICE_KIT
-                    ]) ?> <?= lang('Item_kits.kit_only') ?>
-                </label>
-                <label class="radio-inline">
-                    <?= form_radio([
-                        'name'    => 'price_option',
-                        'type'    => 'radio',
-                        'value'   => 2,
-                        'checked' => $item_kit_info->price_option == PRICE_KIT_ITEMS    // TODO: === for all of these?
-                    ]) ?> <?= lang('Item_kits.kit_and_stock') ?>
-                </label>
-            </div>
+    <label for="print_option" class="form-label"><?= lang('Item_kits.print_option') ?> <?= !empty($basic_version) ? '<sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup>' : '' ?></label>
+    <div class="mb-3">
+        <div class="form-check form-check-inline">
+            <input class="form-check-input" type="radio" name="print_option" id="print_option_all" value="0" <?= $item_kit_info->print_option == PRINT_ALL ? 'checked' : '' ?> <?= !empty($basic_version) ? 'required' : '' ?>>
+            <label class="form-check-label" for="print_option_all"><?= lang('Item_kits.all') ?></label>
         </div>
-
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Item_kits.print_option'), 'print_option', !empty($basic_version) ? ['class' => 'required control-label col-xs-3'] : ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <label class="radio-inline">
-                    <?= form_radio([
-                        'name'    => 'print_option',
-                        'type'    => 'radio',
-                        'value'   => 0,
-                        'checked' => $item_kit_info->print_option == PRINT_ALL
-                    ]) ?> <?= lang('Item_kits.all') ?>
-                </label>
-                <label class="radio-inline">
-                    <?= form_radio([
-                        'name'    => 'print_option',
-                        'type'    => 'radio',
-                        'value'   => 1,
-                        'checked' => $item_kit_info->print_option == PRINT_PRICED
-                    ]) ?> <?= lang('Item_kits.priced_only') ?>
-                </label>
-                <label class="radio-inline">
-                    <?= form_radio([
-                        'name'    => 'print_option',
-                        'type'    => 'radio',
-                        'value'   => 2,
-                        'checked' => $item_kit_info->print_option == PRINT_KIT
-                    ]) ?> <?= lang('Item_kits.kit_only') ?>
-                </label>
-            </div>
+        <div class="form-check form-check-inline">
+            <input class="form-check-input" type="radio" name="print_option" id="print_option_priced_only" value="1" <?= $item_kit_info->print_option == PRINT_PRICED ? 'checked' : '' ?> <?= !empty($basic_version) ? 'required' : '' ?>>
+            <label class="form-check-label" for="print_option_priced_only"><?= lang('Item_kits.priced_only') ?></label>
         </div>
-
-
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Item_kits.description'), 'description', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <?= form_textarea([
-                    'name'  => 'description',
-                    'id'    => 'description',
-                    'class' => 'form-control input-sm',
-                    'value' => $item_kit_info->description
-                ]) ?>
-            </div>
+        <div class="form-check form-check-inline">
+            <input class="form-check-input" type="radio" name="print_option" id="print_option_kit_only" value="2" <?= $item_kit_info->print_option == PRINT_KIT ? 'checked' : '' ?> <?= !empty($basic_version) ? 'required' : '' ?>>
+            <label class="form-check-label" for="print_option_kit_only"><?= lang('Item_kits.kit_only') ?></label>
         </div>
+    </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Item_kits.add_item'), 'item', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <?= form_input([
-                    'name'  => 'item',
-                    'id'    => 'item',
-                    'class' => 'form-control input-sm'
-                ]) ?>
-            </div>
-        </div>
+    <label for="description" class="form-label"><?= lang('Item_kits.description'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text"><i class="bi bi-chat"></i></span>
+        <textarea class="form-control" name="description" id="description" rows="6"><?= $item_kit_info->description ?></textarea>
+    </div>
 
-        <table id="item_kit_items" class="table table-striped table-hover">
-            <thead>
+    <label for="item" class="form-label"><?= lang('Item_kits.add_item'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="item-icon"><i class="bi bi-tag"></i></span>
+        <input type="text" class="form-control" name="item" id="item" aria-describedby="item-icon">
+    </div>
+
+    <div class="table-responsive">
+        <table class="table table-sm table-hover align-middle text-nowrap" id="item_kit_items">
+            <thead class="table-secondary">
                 <tr>
-                    <th style="width: 10%;"><?= lang('Common.delete') ?></th>
-                    <th style="width: 10%;"><?= lang('Item_kits.sequence') ?></th>
-                    <th style="width: 60%;"><?= lang('Item_kits.item') ?></th>
-                    <th style="width: 20%;"><?= lang('Item_kits.quantity') ?></th>
+                    <th scope="col"><?= lang('Common.delete') ?></th>
+                    <th scope="col"><?= lang('Item_kits.sequence') ?></th>
+                    <th scope="col"><?= lang('Item_kits.item') ?></th>
+                    <th scope="col"><?= lang('Item_kits.quantity') ?></th>
                 </tr>
             </thead>
             <tbody>
-                <?php foreach ($item_kit_items as $item_kit_item) { ?>
+                <?php foreach ($item_kit_items as $item_kit_item): ?>
                     <tr>
-                        <td><a href="#" onclick="return delete_item_kit_row(this);"><span class="glyphicon glyphicon-trash"></span></a></td>
-                        <td><input class="quantity form-control input-sm" id="item_seq_<?= $item_kit_item['item_id'] ?>" name="item_kit_seq[<?= $item_kit_item['item_id'] ?>]" value="<?= parse_decimals($item_kit_item['kit_sequence'], 0) ?>"></td>
+                        <td class="text-center"><a class="text-danger" href="#" onclick="return delete_item_kit_row(this);"><i class="bi bi-trash"></i></a></td>
+                        <td class="text-center"><input class="quantity form-control" id="item_seq_<?= $item_kit_item['item_id'] ?>" name="item_kit_seq[<?= $item_kit_item['item_id'] ?>]" value="<?= parse_decimals($item_kit_item['kit_sequence'], 0) ?>"></td>
                         <td><?= esc($item_kit_item['name']) ?></td>
-                        <td><input class="quantity form-control input-sm" id="item_qty_<?= $item_kit_item['item_id'] ?>" name="item_kit_qty[<?= $item_kit_item['item_id'] ?>]" value="<?= to_quantity_decimals($item_kit_item['quantity']) ?>"></td>
+                        <td class="text-center"><input class="quantity form-control" id="item_qty_<?= $item_kit_item['item_id'] ?>" name="item_kit_qty[<?= $item_kit_item['item_id'] ?>]" value="<?= to_quantity_decimals($item_kit_item['quantity']) ?>"></td>
                     </tr>
-                <?php } ?>
+                <?php endforeach; ?>
             </tbody>
         </table>
+    </div>
 
-    </fieldset>
 <?= form_close() ?>
 
 <script type="text/javascript">
@@ -218,10 +132,10 @@
                     $('#item_kit_item_' + ui.item.value).val(parseFloat($('#item_kit_item_' + ui.item.value).val()) + 1);
                 } else {
                     $('#item_kit_items').append('<tr>' +
-                        '<td><a href="#" onclick="return delete_item_kit_row(this);"><span class="glyphicon glyphicon-trash"></span></a></td>' +
-                        '<td><input class="quantity form-control input-sm" id="item_seq_' + ui.item.value + '" name="item_kit_seq[' + ui.item.value + ']" value="0"></td>' +
+                        '<td class="text-center"><a class="text-danger" href="#" onclick="return delete_item_kit_row(this);"><i class="bi bi-trash"></i></a></td>' +
+                        '<td class="text-center"><input class="quantity form-control" id="item_seq_' + ui.item.value + '" name="item_kit_seq[' + ui.item.value + ']" value="0"></td>' +
                         '<td>' + DOMPurify.sanitize(ui.item.label) + '</td>' +
-                        '<td><input class="quantity form-control input-sm" id="item_qty_' + ui.item.value + '" name="item_kit_qty[' + ui.item.value + ']" value="1"></td>' +
+                        '<td class="text-center"><input class="quantity form-control" id="item_qty_' + ui.item.value + '" name="item_kit_qty[' + ui.item.value + ']" value="1"></td>' +
                         '</tr>');
                 }
                 $('#item').val('');

app/Views/item_kits/manage.php

@@ -8,6 +8,11 @@
 
 <?= view('partial/header') ?>
 
+<?php
+$title_info['config_title'] = 'Item Kits';
+echo view('configs/config_header', $title_info);
+?>
+
 <script type="text/javascript">
     $(document).ready(function() {
         <?= view('partial/bootstrap_tables_locale') ?>
@@ -28,20 +33,19 @@
     });
 </script>
 
-<div id="title_bar" class="btn-toolbar">
-    <button class="btn btn-info btn-sm pull-right modal-dlg" data-btn-submit="<?= lang('Common.submit') ?>" data-href="<?= esc("$controller_name/view") ?>" title="<?= lang(ucfirst($controller_name) . '.new') ?>">
-        <span class="glyphicon glyphicon-tags">&nbsp;</span><?= lang(ucfirst($controller_name) . '.new') ?>
+<div class="d-flex gap-2 justify-content-end">
+    <button type="button" class="btn btn-primary modal-launch" data-btn-submit="<?= lang('Common.submit') ?>" data-href="<?= esc("$controller_name/view") ?>" title="<?= lang(ucfirst($controller_name) . '.new') ?>">
+        <i class="bi bi-tags me-2"></i><?= lang(ucfirst($controller_name) . '.new') ?>
     </button>
 </div>
 
 <div id="toolbar">
-    <div class="pull-left btn-toolbar">
-        <button id="delete" class="btn btn-default btn-sm">
-            <span class="glyphicon glyphicon-trash">&nbsp;</span><?= lang('Common.delete') ?>
+    <div class="d-flex gap-2">
+        <button type="button" class="btn btn-secondary" id="delete">
+            <i class="bi bi-trash"></i><span class="d-none d-sm-inline ms-2"><?= lang('Common.delete') ?></span>
         </button>
-
-        <button id="generate_barcodes" class="btn btn-default btn-sm" data-href="<?= esc("$controller_name/generateBarcodes") ?>">
-            <span class="glyphicon glyphicon-barcode">&nbsp;</span><?= lang('Items.generate_barcodes') ?>
+        <button type="button" class="btn btn-secondary" id="generate_barcodes" data-href="<?= esc("$controller_name/generateBarcodes") ?>" title="<?= lang('Items.generate_barcodes') ?>">
+            <i class="bi bi-upc-scan"></i><span class="d-none d-sm-inline ms-2"><?= lang('Items.generate_barcodes') ?></span>
         </button>
     </div>
 </div>

app/Views/items/form.php

@@ -25,430 +25,226 @@
  */
 ?>
 
-<div id="required_fields_message"><?= lang('Common.fields_required_message') ?></div>
-<ul id="error_message_box" class="error_message_box"></ul>
+<?= form_open("items/save/$item_info->item_id", ['id' => 'item_form', 'enctype' => 'multipart/form-data']) ?>
 
-<?= form_open("items/save/$item_info->item_id", ['id' => 'item_form', 'enctype' => 'multipart/form-data', 'class' => 'form-horizontal']) ?>
-    <fieldset id="item_basic_info">
+    <ul id="error_message_box" class="alert alert-warning d-none"></ul>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.item_number'), 'item_number', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <div class="input-group">
-                    <span class="input-group-addon input-sm"><span class="glyphicon glyphicon-barcode"></span></span>
-                    <?= form_input([
-                        'name'  => 'item_number',
-                        'id'    => 'item_number',
-                        'class' => 'form-control input-sm',
-                        'value' => $item_info->item_number
-                    ]) ?>
-                </div>
-            </div>
-        </div>
+    <label for="item_number" class="form-label"><?= lang('Items.item_number'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="item_number-icon"><i class="bi bi-upc-scan"></i></span>
+        <input type="text" class="form-control" name="item_number" id="item_number" aria-describedby="item_number-icon" value="<?= $item_info->item_number ?>">
+    </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.name'), 'name', ['class' => 'required control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <?= form_input([
-                    'name'  => 'name',
-                    'id'    => 'name',
-                    'class' => 'form-control input-sm',
-                    'value' => $item_info->name
-                ]) ?>
-            </div>
-        </div>
+    <label for="name" class="form-label"><?= lang('Items.name'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="name-icon"><i class="bi bi-tag"></i></span>
+        <input type="text" class="form-control" name="name" id="name" aria-describedby="name-icon" value="<?= $item_info->name ?>">
+    </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.category'), 'category', ['class' => 'required control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <div class="input-group">
-                    <span class="input-group-addon input-sm"><span class="glyphicon glyphicon-tag"></span></span>
-                    <?php
-                    if ($config['category_dropdown']) {
-                        echo form_dropdown('category', $categories, $selected_category, ['class' => 'form-control']);
-                    } else {
-                        echo form_input([
-                            'name'  => 'category',
-                            'id'    => 'category',
-                            'class' => 'form-control input-sm',
-                            'value' => $item_info->category
-                        ]);
-                    }
-                    ?>
-                </div>
-            </div>
-        </div>
-
-        <div id="attributes">
-            <script type="text/javascript">
-                $('#attributes').load('<?= "items/attributes/$item_info->item_id" ?>');
-            </script>
-        </div>
-
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.stock_type'), 'stock_type', !empty($basic_version) ? ['class' => 'required control-label col-xs-3'] : ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <label class="radio-inline">
-                    <?= form_radio([
-                        'name'    => 'stock_type',
-                        'type'    => 'radio',
-                        'id'      => 'stock_type',
-                        'value'   => 0,
-                        'checked' => $item_info->stock_type == HAS_STOCK
-                    ]) ?> <?= lang('Items.stock') ?>
-                </label>
-                <label class="radio-inline">
-                    <?= form_radio([
-                        'name'    => 'stock_type',
-                        'type'    => 'radio',
-                        'id'      => 'stock_type',
-                        'value'   => 1,
-                        'checked' => $item_info->stock_type == HAS_NO_STOCK
-                    ]) ?><?= lang('Items.nonstock') ?>
-                </label>
-            </div>
-        </div>
-
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.type'), 'item_type', !empty($basic_version) ? ['class' => 'required control-label col-xs-3'] : ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <label class="radio-inline">
-                    <?php
-                    $radio_button = [
-                        'name'    => 'item_type',
-                        'type'    => 'radio',
-                        'id'      => 'item_type',
-                        'value'   => 0,
-                        'checked' => $item_info->item_type == ITEM
-                    ];
-
-                    if ($standard_item_locked) {
-                        $radio_button['disabled'] = true;
-                    }
-                    echo form_radio($radio_button) ?> <?= lang('Items.standard') ?>
-                </label>
-                <label class="radio-inline">
-                    <?php
-                    $radio_button = [
-                        'name'    => 'item_type',
-                        'type'    => 'radio',
-                        'id'      => 'item_type',
-                        'value'   => 1,
-                        'checked' => $item_info->item_type == ITEM_KIT
-                    ];
-
-                    if ($item_kit_disabled) {
-                        $radio_button['disabled'] = true;
-                    }
-                    echo form_radio($radio_button) ?> <?= lang('Items.kit') ?>
-                </label>
-                <?php if ($config['derive_sale_quantity'] == '1') { ?>
-                    <label class="radio-inline">
-                        <?= form_radio([
-                            'name'    => 'item_type',
-                            'type'    => 'radio',
-                            'id'      => 'item_type',
-                            'value'   => 2,
-                            'checked' => $item_info->item_type == ITEM_AMOUNT_ENTRY
-                        ]) ?><?= lang('Items.amount_entry') ?>
-                    </label>
+    <label for="category" class="form-label"><?= lang('Items.category'); ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="category-icon"><i class="bi bi-bookmark"></i></span>
+        <?php if ($config['category_dropdown']) { ?>
+            <select class="form-select" name="category" id="category" required>
+                <?php foreach ($categories as $key => $value) { ?>
+                    <option value="<?= $key ?>" <?= $selected_category == $key ? 'selected' : '' ?>><?= $value ?></option>
                 <?php } ?>
-                <?php if ($allow_temp_item == 1) { ?>
-                    <label class="radio-inline">
-                        <?= form_radio([
-                            'name'    => 'item_type',
-                            'type'    => 'radio',
-                            'id'      => 'item_type',
-                            'value'   => 3,
-                            'checked' => $item_info->item_type == ITEM_TEMP
-                        ]) ?> <?= lang('Items.temp') ?>
-                    </label>
-                <?php } ?>
-            </div>
+            </select>
+        <?php } else { ?>
+            <input type="text" class="form-control" name="category" id="category" aria-describedby="category-icon" value="<?= $item_info->category ?>" required>
+        <?php } ?>
+    </div>
+
+    <div id="attributes">
+        <script type="text/javascript">
+            $('#attributes').load('<?= "items/attributes/$item_info->item_id" ?>');
+        </script>
+    </div>
+
+    <label for="stock_type" class="form-label"><?= lang('Items.stock_type') ?><?= !empty($basic_version) ? '<sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup>' : '' ?></label>
+    <div class="mb-3">
+        <div class="form-check form-check-inline">
+            <input class="form-check-input" type="radio" name="stock_type" id="stock_type_stock" value="0" <?= $item_info->stock_type == HAS_STOCK ? 'checked' : '' ?> <?= !empty($basic_version) ? 'required' : '' ?>>
+            <label class="form-check-label" for="stock_type_stock"><?= lang('Items.stock') ?></label>
         </div>
-
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.supplier'), 'supplier', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <?= form_dropdown('supplier_id', $suppliers, $selected_supplier, ['class' => 'form-control']) ?>
-            </div>
+        <div class="form-check form-check-inline">
+            <input class="form-check-input" type="radio" name="stock_type" id="stock_type_nonstock" value="1" <?= $item_info->stock_type == HAS_NO_STOCK ? 'checked' : '' ?> <?= !empty($basic_version) ? 'required' : '' ?>>
+            <label class="form-check-label" for="stock_type_nonstock"><?= lang('Items.nonstock') ?></label>
         </div>
+    </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.cost_price'), 'cost_price', ['class' => 'required control-label col-xs-3']) ?>
-            <div class="col-xs-4">
-                <div class="input-group input-group-sm">
-                    <?php if (!is_right_side_currency_symbol()): ?>
-                        <span class="input-group-addon input-sm"><b><?= esc($config['currency_symbol']) ?></b></span>
-                    <?php endif; ?>
-                    <?= form_input([
-                        'name'    => 'cost_price',
-                        'id'      => 'cost_price',
-                        'class'   => 'form-control input-sm',
-                        'onClick' => 'this.select();',
-                        'value'   => to_currency_no_money($item_info->cost_price)
-                    ]) ?>
-                    <?php if (is_right_side_currency_symbol()): ?>
-                        <span class="input-group-addon input-sm"><b><?= esc($config['currency_symbol']) ?></b></span>
-                    <?php endif; ?>
-                </div>
-            </div>
+    <label for="item_type" class="form-label"><?= lang('Items.type') ?><?= !empty($basic_version) ? '<sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup>' : '' ?></label>
+    <div class="mb-3">
+        <div class="form-check form-check-inline">
+            <input class="form-check-input" type="radio" name="item_type" id="item_type_standard" value="0" <?= $item_info->item_type == ITEM ? 'checked' : '' ?> <?= $standard_item_locked ? 'disabled readonly' : '' ?> <?= !empty($basic_version) ? 'required' : '' ?>>
+            <label class="form-check-label" for="item_type_standard"><?= lang('Items.standard') ?></label>
         </div>
-
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.unit_price'), 'unit_price', ['class' => 'required control-label col-xs-3']) ?>
-            <div class="col-xs-4">
-                <div class="input-group input-group-sm">
-                    <?php if (!is_right_side_currency_symbol()): ?>
-                        <span class="input-group-addon input-sm"><b><?= esc($config['currency_symbol']) ?></b></span>
-                    <?php endif; ?>
-                    <?= form_input([
-                        'name'    => 'unit_price',
-                        'id'      => 'unit_price',
-                        'class'   => 'form-control input-sm',
-                        'onClick' => 'this.select();',
-                        'value'   => to_currency_no_money($item_info->unit_price)
-                    ]) ?>
-                    <?php if (is_right_side_currency_symbol()): ?>
-                        <span class="input-group-addon input-sm"><b><?= esc($config['currency_symbol']) ?></b></span>
-                    <?php endif; ?>
-                </div>
-            </div>
+        <div class="form-check form-check-inline">
+            <input class="form-check-input" type="radio" name="item_type" id="item_type_kit" value="1" <?= $item_info->item_type == ITEM_KIT ? 'checked' : '' ?> <?= $item_kit_disabled ? 'disabled readonly' : '' ?> <?= !empty($basic_version) ? 'required' : '' ?>>
+            <label class="form-check-label" for="item_type_kit"><?= lang('Items.kit') ?></label>
         </div>
-
-        <?php if (!$use_destination_based_tax) { ?>
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Items.tax_1'), 'tax_percent_1', ['class' => 'control-label col-xs-3']) ?>
-                <div class="col-xs-4">
-                    <?= form_input([
-                        'name'  => 'tax_names[]',
-                        'id'    => 'tax_name_1',
-                        'class' => 'form-control input-sm',
-                        'value' => $item_tax_info[0]['name'] ?? $config['default_tax_1_name']
-                    ]) ?>
-                </div>
-                <div class="col-xs-4">
-                    <div class="input-group input-group-sm">
-                        <?= form_input([
-                            'name'  => 'tax_percents[]',
-                            'id'    => 'tax_percent_name_1',
-                            'class' => 'form-control input-sm',
-                            'value' => isset($item_tax_info[0]['percent']) ? to_tax_decimals($item_tax_info[0]['percent']) : to_tax_decimals($default_tax_1_rate)
-                        ]) ?>
-                        <span class="input-group-addon input-sm"><b>%</b></span>
-                    </div>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Items.tax_2'), 'tax_percent_2', ['class' => 'control-label col-xs-3']) ?>
-                <div class="col-xs-4">
-                    <?= form_input([
-                        'name'  => 'tax_names[]',
-                        'id'    => 'tax_name_2',
-                        'class' => 'form-control input-sm',
-                        'value' => $item_tax_info[1]['name'] ?? $config['default_tax_2_name']
-                    ]) ?>
-                </div>
-                <div class="col-xs-4">
-                    <div class="input-group input-group-sm">
-                        <?= form_input([
-                            'name'  => 'tax_percents[]',
-                            'class' => 'form-control input-sm',
-                            'id'    => 'tax_percent_name_2',
-                            'value' => isset($item_tax_info[1]['percent']) ? to_tax_decimals($item_tax_info[1]['percent']) : to_tax_decimals($default_tax_2_rate)
-                        ]) ?>
-                        <span class="input-group-addon input-sm"><b>%</b></span>
-                    </div>
-                </div>
+        <?php if ($config['derive_sale_quantity'] == '1') { ?>
+            <div class="form-check form-check-inline">
+                <input class="form-check-input" type="radio" name="item_type" id="item_type_amount_entry" value="2" <?= $item_info->item_type == ITEM_AMOUNT_ENTRY ? 'checked' : '' ?> <?= !empty($basic_version) ? 'required' : '' ?>>
+                <label class="form-check-label" for="item_type_amount_entry"><?= lang('Items.amount_entry') ?></label>
             </div>
         <?php } ?>
-
-        <?php if ($use_destination_based_tax): ?>
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Taxes.tax_category'), 'tax_category', ['class' => 'control-label col-xs-3']) ?>
-                <div class="col-xs-8">
-                    <div class="input-group input-group-sm">
-                        <?= form_input([
-                            'name'  => 'tax_category',
-                            'id'    => 'tax_category',
-                            'class' => 'form-control input-sm',
-                            'size'  => '50',
-                            'value' => $tax_category
-                        ]) ?>
-                        <?= form_hidden('tax_category_id', $tax_category_id) ?>
-                    </div>
-                </div>
+        <?php if ($allow_temp_item == 1) { ?>
+            <div class="form-check form-check-inline">
+                <input class="form-check-input" type="radio" name="item_type" id="item_type_temp" value="3" <?= $item_info->item_type == ITEM_TEMP ? 'checked' : '' ?> <?= !empty($basic_version) ? 'required' : '' ?>>
+                <label class="form-check-label" for="item_type_temp"><?= lang('Items.temp') ?></label>
             </div>
+        <?php } ?>
+    </div>
+
+    <label for="supplier_id" class="form-label"><?= lang('Items.supplier'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text"><i class="bi bi-truck"></i></span>
+        <select class="form-select" name="supplier_id" id="supplier_id">
+            <?php foreach ($suppliers as $key => $value) { ?>
+                <option value="<?= $key ?>" <?= $selected_supplier == $key ? 'selected' : '' ?>><?= $value ?></option>
+            <?php } ?>
+        </select>
+    </div>
+
+    <label for="cost_price" class="form-label"><?= lang('Items.cost_price') ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+    <div class="input-group mb-3">
+        <?php if (!is_right_side_currency_symbol()): ?>
+            <span class="input-group-text" id="cost_price-icon"><?= esc($config['currency_symbol']) ?></span>
         <?php endif; ?>
-
-        <?php if ($include_hsn): ?>
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Items.hsn_code'), 'category', ['class' => 'control-label col-xs-3']) ?>
-                <div class="col-xs-8">
-                    <div class="input-group">
-                        <?= form_input([
-                            'name'  => 'hsn_code',
-                            'id'    => 'hsn_code',
-                            'class' => 'form-control input-sm',
-                            'value' => $hsn_code
-                        ]) ?>
-                    </div>
-                </div>
-            </div>
+        <input type="number" step="any" class="form-control" name="cost_price" id="cost_price" aria-describedby="cost_price-icon" value="<?= to_currency_no_money($item_info->cost_price) ?>" required>
+        <?php if (is_right_side_currency_symbol()): ?>
+            <span class="input-group-text" id="cost_price-icon"><?= esc($config['currency_symbol']) ?></span>
         <?php endif; ?>
+    </div>
 
-        <?php foreach ($stock_locations as $key => $location_detail) { ?>
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Items.quantity') . ' ' . $location_detail['location_name'], "quantity_$key", ['class' => 'required control-label col-xs-3']) ?>
-                <div class="col-xs-4">
-                    <?= form_input([
-                        'name'    => "quantity_$key",
-                        'id'      => "quantity_$key",
-                        'class'   => 'required quantity form-control',
-                        'onClick' => 'this.select();',
-                        'value'   => isset($item_info->item_id) ? to_quantity_decimals($location_detail['quantity']) : to_quantity_decimals(0)
-                    ]) ?>
-                </div>
-            </div>
-        <?php } ?>
+    <label for="unit_price" class="form-label"><?= lang('Items.unit_price') ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+    <div class="input-group mb-3">
+        <?php if (!is_right_side_currency_symbol()): ?>
+            <span class="input-group-text" id="unit_price-icon"><?= esc($config['currency_symbol']) ?></span>
+        <?php endif; ?>
+        <input type="number" step="any" class="form-control" name="unit_price" id="unit_price" aria-describedby="unit_price-icon" value="<?= to_currency_no_money($item_info->unit_price) ?>" required>
+        <?php if (is_right_side_currency_symbol()): ?>
+            <span class="input-group-text" id="unit_price-icon"><?= esc($config['currency_symbol']) ?></span>
+        <?php endif; ?>
+    </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.receiving_quantity'), 'receiving_quantity', ['class' => 'required control-label col-xs-3']) ?>
-            <div class="col-xs-4">
-                <?= form_input([
-                    'name'    => 'receiving_quantity',
-                    'id'      => 'receiving_quantity',
-                    'class'   => 'required form-control input-sm',
-                    'onClick' => 'this.select();',
-                    'value'   => isset($item_info->item_id) ? to_quantity_decimals($item_info->receiving_quantity) : to_quantity_decimals(0)
-                ]) ?>
-            </div>
+    <?php if (!$use_destination_based_tax): ?>
+        <label for="tax_name_1" class="form-label"><?= lang('Items.tax_1') ?></label>
+        <div class="input-group mb-3">
+            <span class="input-group-text" id="tax_name_1-icon"><i class="bi bi-piggy-bank"></i></span>
+            <input type="text" class="form-control w-25" name="tax_names[]" id="tax_name_1" aria-describedby="tax_name_1-icon" value="<?= $item_tax_info[0]['name'] ?? $config['default_tax_1_name'] ?>">
+            <input type="number" step="any" min="0" max="100" class="form-control" name="tax_percents[]" id="tax_percent_name_1" aria-describedby="tax_percent_name_1-icon" value="<?= isset($item_tax_info[0]['percent']) ? to_tax_decimals($item_tax_info[0]['percent']) : to_tax_decimals($default_tax_1_rate) ?>">
+            <span class="input-group-text" id="tax_percent_name_1-icon"><i class="bi bi-percent"></i></span>
         </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.reorder_level'), 'reorder_level', ['class' => 'required control-label col-xs-3']) ?>
-            <div class="col-xs-4">
-                <?= form_input([
-                    'name'    => 'reorder_level',
-                    'id'      => 'reorder_level',
-                    'class'   => 'form-control input-sm',
-                    'onClick' => 'this.select();',
-                    'value'   => isset($item_info->item_id) ? to_quantity_decimals($item_info->reorder_level) : to_quantity_decimals(0)
-                ]) ?>
+        <label for="tax_name_2" class="form-label"><?= lang('Items.tax_2') ?></label>
+        <div class="input-group mb-3">
+            <span class="input-group-text" id="tax_name_2-icon"><i class="bi bi-piggy-bank"></i></span>
+            <input type="text" class="form-control w-25" name="tax_names[]" id="tax_name_2" aria-describedby="tax_name_2-icon" value="<?= $item_tax_info[1]['name'] ?? $config['default_tax_2_name'] ?>">
+            <input type="number" step="any" min="0" max="100" class="form-control" name="tax_percents[]" id="tax_percent_name_2" aria-describedby="tax_percent_name_2-icon" value="<?= isset($item_tax_info[1]['percent']) ? to_tax_decimals($item_tax_info[1]['percent']) : to_tax_decimals($default_tax_2_rate) ?>">
+            <span class="input-group-text" id="tax_percent_name_2-icon"><i class="bi bi-percent"></i></span>
+        </div>
+    <?php endif; ?>
+
+    <?php if ($use_destination_based_tax): ?>
+        <label for="tax_category" class="form-label"><?= lang('Taxes.tax_category') ?></label>
+        <div class="input-group mb-3">
+            <span class="input-group-text" id="tax_category-icon"><i class="bi bi-piggy-bank"></i></span>
+            <input type="hidden" name="tax_category_id" id="tax_category_id" value="<?= $tax_category_id ?>">
+            <input type="text" class="form-control" name="tax_category" id="tax_category" aria-describedby="tax_category-icon" value="<?= $tax_category ?>">
+        </div>
+    <?php endif; ?>
+
+    <?php if ($include_hsn): ?>
+        <label for="hsn_code" class="form-label"><?= lang('Items.hsn_code'); ?></label>
+        <div class="input-group mb-3">
+            <span class="input-group-text" id="hsn_code-icon"><i class="bi bi-123"></i></span>
+            <input type="text" class="form-control" name="hsn_code" id="hsn_code" aria-describedby="hsn_code-icon" value="<?= $hsn_code ?>">
+        </div>
+    <?php endif; ?>
+
+    <?php foreach ($stock_locations as $key => $location_detail): ?>
+        <label for="quantity_<?= $key ?>" class="form-label"><?= lang('Items.quantity') . ' ' . $location_detail['location_name'] ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+        <div class="input-group mb-3">
+            <span class="input-group-text" id="quantity_<?= $key ?>-icon"><i class="bi bi-boxes"></i></span>
+            <input type="text" class="form-control" name="quantity_<?= $key ?>" id="quantity_<?= $key ?>" aria-describedby="quantity_<?= $key ?>-icon" value="<?= isset($item_info->item_id) ? to_quantity_decimals($location_detail['quantity']) : to_quantity_decimals(0) ?>" required>
+        </div>
+    <?php endforeach; ?>
+
+    <label for="receiving_quantity" class="form-label"><?= lang('Items.receiving_quantity') ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="receiving_quantity-icon"><i class="bi bi-truck"></i></span>
+        <input type="text" class="form-control" name="receiving_quantity" id="receiving_quantity" aria-describedby="receiving_quantity-icon" value="<?= isset($item_info->item_id) ? to_quantity_decimals($item_info->receiving_quantity) : to_quantity_decimals(0) ?>">
+    </div>
+
+    <label for="reorder_level" class="form-label"><?= lang('Items.reorder_level') ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="reorder_level-icon"><i class="bi bi-list-ol"></i></span>
+        <input type="text" class="form-control" name="reorder_level" id="reorder_level" aria-describedby="reorder_level-icon" value="<?= isset($item_info->item_id) ? to_quantity_decimals($item_info->reorder_level) : to_quantity_decimals(0) ?>">
+    </div>
+
+    <label for="description" class="form-label"><?= lang('Items.description'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text"><i class="bi bi-chat"></i></span>
+        <textarea class="form-control" name="description" id="description" rows="6"><?= $item_info->description ?></textarea>
+    </div>
+
+    <label for="items_image" class="form-label"><?= lang('Items.image'); ?></label>
+    <div id="items_image" class="w-100 fileinput <?= $logo_exists ? 'fileinput-exists' : 'fileinput-new'; ?>" data-provides="fileinput">
+        <div class="input-group mb-3" aria-describedby="company-logo-desc">
+            <span class="input-group-text"><i class="bi bi-image"></i></span>
+            <div class="fileinput-new form-control rounded-end mb-0" style="height: 200px; cursor: default;"></div>
+            <div class="fileinput-exists fileinput-preview img-thumbnail form-control rounded-end mb-0 bg-light mh-100" style="height: 200px; cursor: default; background-size: 40px 40px; background-position: 0 0, 20px 20px; background-image: linear-gradient(45deg, white 25%, transparent 25%, transparent 75%, white 75%, white), linear-gradient(45deg, white 25%, transparent 25%, transparent 75%, white 75%, white);">
+                <img class="mh-100 mw-100" data-src="holder.js/100%x100%" alt="<?= esc(lang('Config.company_logo')) ?>" src="<?= $image_path ?>">
             </div>
         </div>
+        <div type="button" class="btn btn-secondary btn-file me-2">
+            <span class="fileinput-new"><i class="bi bi-hand-index me-2"></i><?= lang('Items.select_image') ?></span>
+            <span class="fileinput-exists"><i class="bi bi-images me-2"></i><?= lang('Items.change_image') ?></span>
+            <input type="file" name="items_image" accept="image/*">
+        </div>
+        <a type="button" class="btn btn-outline-secondary fileinput-exists" data-dismiss="fileinput">
+            <i class="bi bi-eraser me-2"></i><?= lang('Items.remove_image') ?>
+        </a>
+    </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.description'), 'description', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <?= form_textarea([
-                    'name'  => 'description',
-                    'id'    => 'description',
-                    'class' => 'form-control input-sm',
-                    'value' => $item_info->description
-                ]) ?>
-            </div>
+    <div class="form-check mb-3">
+        <input class="form-check-input" type="checkbox" name="allow_alt_description" id="allow_alt_description" value="1" <?= $item_info->allow_alt_description == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="allow_alt_description"><?= lang('Items.allow_alt_description') ?></label>
+    </div>
+
+    <div class="form-check mb-3">
+        <input class="form-check-input" type="checkbox" name="is_serialized" id="is_serialized" value="1" <?= $item_info->is_serialized == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="is_serialized"><?= lang('Items.is_serialized') ?></label>
+    </div>
+
+    <?php if ($config['multi_pack_enabled'] == '1'): ?>
+        <label for="qty_per_pack" class="form-label"><?= lang('Items.qty_per_pack') ?></label>
+        <div class="input-group mb-3">
+            <span class="input-group-text" id="qty_per_pack-icon"><i class="bi bi-123"></i></span>
+            <input type="text" class="form-control" name="qty_per_pack" id="qty_per_pack" aria-describedby="qty_per_pack-icon" value="<?= isset($item_info->item_id) ? to_quantity_decimals($item_info->qty_per_pack) : to_quantity_decimals(0) ?>">
         </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.image'), 'items_image', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <div class="fileinput <?= $logo_exists ? 'fileinput-exists' : 'fileinput-new' ?>" data-provides="fileinput">
-                    <div class="fileinput-new thumbnail" style="width: 100px; height: 100px;"></div>
-                    <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 100px; max-height: 100px;">
-                        <img data-src="holder.js/100%x100%" alt="<?= lang('Items.image') ?>"
-                            src="<?= $image_path ?>"
-                            style="max-height: 100%; max-width: 100%;">
-                    </div>
-                    <div>
-                        <span class="btn btn-default btn-sm btn-file">
-                            <span class="fileinput-new"><?= lang('Items.select_image') ?></span>
-                            <span class="fileinput-exists"><?= lang('Items.change_image') ?></span>
-                            <input type="file" name="items_image" accept="image/*">
-                        </span>
-                        <a href="#" class="btn btn-default btn-sm fileinput-exists" data-dismiss="fileinput"><?= lang('Items.remove_image') ?></a>
-                    </div>
-                </div>
-            </div>
+        <label for="pack_name" class="form-label"><?= lang('Items.pack_name') ?></label>
+        <div class="input-group mb-3">
+            <span class="input-group-text" id="pack_name-icon"><i class="bi bi-box2-heart"></i></span>
+            <input type="text" class="form-control" name="pack_name" id="pack_name" aria-describedby="pack_name-icon" value="<?= $item_info->pack_name ?>">
         </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.allow_alt_description'), 'allow_alt_description', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-1">
-                <?= form_checkbox([
-                    'name'    => 'allow_alt_description',
-                    'id'      => 'allow_alt_description',
-                    'value'   => 1,
-                    'checked' => $item_info->allow_alt_description == 1
-                ]) ?>
-            </div>
+        <label for="low_sell_item_name" class="form-label"><?= lang('Items.low_sell_item') ?></label>
+        <div class="input-group mb-3">
+            <span class="input-group-text" id="pack_name-icon"><i class="bi bi-thermometer-low"></i></span>
+            <input type="hidden" name="low_sell_item_id" value="<?= $selected_low_sell_item_id ?>">
+            <input type="text" class="form-control" name="low_sell_item_name" id="low_sell_item_name" aria-describedby="low_sell_item_name-icon" value="<?= $selected_low_sell_item ?>">
         </div>
+    <?php endif; ?>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.is_serialized'), 'is_serialized', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-1">
-                <?= form_checkbox([
-                    'name'    => 'is_serialized',
-                    'id'      => 'is_serialized',
-                    'value'   => 1,
-                    'checked' => $item_info->is_serialized == 1
-                ]) ?>
-            </div>
-        </div>
+    <div class="form-check mb-3">
+        <input class="form-check-input" type="checkbox" name="is_deleted" id="is_deleted" value="1" <?= $item_info->deleted == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="is_deleted"><?= lang('Items.is_deleted') ?></label>
+    </div>
 
-        <?php if ($config['multi_pack_enabled'] == '1') { ?>
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Items.qty_per_pack'), 'qty_per_pack', ['class' => 'control-label col-xs-3']) ?>
-                <div class="col-xs-4">
-                    <?= form_input([
-                        'name'  => 'qty_per_pack',
-                        'id'    => 'qty_per_pack',
-                        'class' => 'form-control input-sm',
-                        'value' => isset($item_info->item_id) ? to_quantity_decimals($item_info->qty_per_pack) : to_quantity_decimals(0)
-                    ]) ?>
-                </div>
-            </div>
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Items.pack_name'), 'name', ['class' => 'control-label col-xs-3']) ?>
-                <div class="col-xs-8">
-                    <?= form_input([
-                        'name'  => 'pack_name',
-                        'id'    => 'pack_name',
-                        'class' => 'form-control input-sm',
-                        'value' => $item_info->pack_name
-                    ]) ?>
-                </div>
-            </div>
-            <div class="form-group  form-group-sm">
-                <?= form_label(lang('Items.low_sell_item'), 'low_sell_item_name', ['class' => 'control-label col-xs-3']) ?>
-                <div class="col-xs-8">
-                    <div class="input-group input-group-sm">
-                        <?= form_input([
-                            'name'  => 'low_sell_item_name',
-                            'id'    => 'low_sell_item_name',
-                            'class' => 'form-control input-sm',
-                            'value' => $selected_low_sell_item
-                        ]) ?>
-                        <?= form_hidden('low_sell_item_id', $selected_low_sell_item_id) ?>
-                    </div>
-                </div>
-            </div>
-        <?php } ?>
-
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.is_deleted'), 'is_deleted', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-1">
-                <?= form_checkbox([
-                    'name'    => 'is_deleted',
-                    'id'      => 'is_deleted',
-                    'value'   => 1,
-                    'checked' => $item_info->deleted == 1
-                ]) ?>
-            </div>
-        </div>
-
-    </fieldset>
 <?= form_close() ?>
 
 <script type="text/javascript">

app/Views/items/form_bulk.php

@@ -8,165 +8,104 @@
  */
 ?>
 
-<div id="required_fields_message"><?= lang('Items.edit_fields_you_want_to_update') ?></div>
-<ul id="error_message_box" class="error_message_box"></ul>
+<?= form_open('items/bulkUpdate/', ['id' => 'item_form']) ?>
 
-<?= form_open('items/bulkUpdate/', ['id' => 'item_form', 'class' => 'form-horizontal']) ?>
-    <fieldset id="bulk_item_basic_info">
+    <div class="mb-3"><?= lang('Items.edit_fields_you_want_to_update') ?></div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.name'), 'name', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <?= form_input([
-                    'name'  => 'name',
-                    'id'    => 'name',
-                    'class' => 'form-control input-sm'
-                ]) ?>
-            </div>
-        </div>
+    <ul id="error_message_box" class="alert alert-warning d-none"></ul>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.category'), 'category', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <div class="input-group">
-                    <span class="input-group-addon input-sm"><span class="glyphicon glyphicon-tag"></span></span>
-                    <?= form_input([
-                        'name'  => 'category',
-                        'id'    => 'category',
-                        'class' => 'form-control input-sm'
-                    ]) ?>
-                </div>
-            </div>
-        </div>
+    <label for="name" class="form-label"><?= lang('Items.name') ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="name-icon"><i class="bi bi-tag"></i></span>
+        <input type="text" class="form-control" name="name" id="name" aria-describedby="name-icon">
+    </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.supplier'), 'supplier', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <?= form_dropdown('supplier_id', $suppliers, '', ['class' => 'form-control']) ?>
-            </div>
-        </div>
+    <label for="category" class="form-label"><?= lang('Items.category') ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="category-icon"><i class="bi bi-bookmark"></i></span>
+        <input type="text" class="form-control" name="category" id="category" aria-describedby="category-icon">
+    </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.cost_price'), 'cost_price', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-4">
-                <div class="input-group input-group-sm">
-                    <?php if (!is_right_side_currency_symbol()): ?>
-                        <span class="input-group-addon input-sm"><b><?= esc($config['currency_symbol']) ?></b></span>
-                    <?php endif; ?>
-                    <?= form_input([
-                        'name'  => 'cost_price',
-                        'id'    => 'cost_price',
-                        'class' => 'form-control input-sm'
-                    ]) ?>
-                    <?php if (is_right_side_currency_symbol()): ?>
-                        <span class="input-group-addon input-sm"><b><?= esc($config['currency_symbol']) ?></b></span>
-                    <?php endif; ?>
-                </div>
-            </div>
-        </div>
+    <label for="supplier" class="form-label"><?= lang('Items.supplier'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text"><i class="bi bi-truck"></i></span>
+        <select class="form-select" name="supplier_id" id="supplier">
+            <?php foreach ($suppliers as $value => $label): ?>
+                <option value="<?= $value ?>"><?= $label ?></option>
+            <?php endforeach; ?>
+        </select>
+    </div>
 
-        <div class="form-group form-group">
-            <?= form_label(lang('Items.unit_price'), 'unit_price', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-4">
-                <div class="input-group input-group-sm">
-                    <?php if (!is_right_side_currency_symbol()): ?>
-                        <span class="input-group-addon input-sm"><b><?= esc($config['currency_symbol']) ?></b></span>
-                    <?php endif; ?>
-                    <?= form_input([
-                        'name'  => 'unit_price',
-                        'id'    => 'unit_price',
-                        'class' => 'form-control input-sm'
-                    ]) ?>
-                    <?php if (is_right_side_currency_symbol()): ?>
-                        <span class="input-group-addon input-sm"><b><?= esc($config['currency_symbol']) ?></b></span>
-                    <?php endif; ?>
-                </div>
-            </div>
-        </div>
+    <label for="cost_price" class="form-label"><?= lang('Items.cost_price') ?></label>
+    <div class="input-group mb-3">
+        <?php if (!is_right_side_currency_symbol()): ?>
+            <span class="input-group-text" id="cost_price-icon"><?= esc($config['currency_symbol']) ?></span>
+        <?php endif; ?>
+        <input type="number" step="any" class="form-control" name="cost_price" id="cost_price" aria-describedby="cost_price-icon">
+        <?php if (is_right_side_currency_symbol()): ?>
+            <span class="input-group-text" id="cost_price-icon"><?= esc($config['currency_symbol']) ?></span>
+        <?php endif; ?>
+    </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.tax_1'), 'tax_percent_1', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-4">
-                <?= form_input([
-                    'name'  => 'tax_names[]',
-                    'id'    => 'tax_name_1',
-                    'class' => 'form-control input-sm',
-                    'value' => $config['default_tax_1_name']
-                ]) ?>
-            </div>
-            <div class="col-xs-4">
-                <div class="input-group input-group-sm">
-                    <?= form_input([
-                        'name'  => 'tax_percents[]',
-                        'id'    => 'tax_percent_name_1',
-                        'class' => 'form-control input-sm',
-                        'value' => to_tax_decimals($config['default_tax_1_rate'])
-                    ]) ?>
-                    <span class="input-group input-group-addon"><b>%</b></span>
-                </div>
-            </div>
-        </div>
+    <label for="unit_price" class="form-label"><?= lang('Items.unit_price') ?></label>
+    <div class="input-group mb-3">
+        <?php if (!is_right_side_currency_symbol()): ?>
+            <span class="input-group-text" id="unit_price-icon"><?= esc($config['currency_symbol']) ?></span>
+        <?php endif; ?>
+        <input type="number" step="any" class="form-control" name="unit_price" id="unit_price" aria-describedby="unit_price-icon">
+        <?php if (is_right_side_currency_symbol()): ?>
+            <span class="input-group-text" id="unit_price-icon"><?= esc($config['currency_symbol']) ?></span>
+        <?php endif; ?>
+    </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.tax_2'), 'tax_percent_2', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-4">
-                <?= form_input([
-                    'name'  => 'tax_names[]',
-                    'id'    => 'tax_name_2',
-                    'class' => 'form-control input-sm',
-                    'value' => $config['default_tax_2_name']
-                ]) ?>
-            </div>
-            <div class="col-xs-4">
-                <div class="input-group input-group-sm">
-                    <?= form_input([
-                        'name'  => 'tax_percents[]',
-                        'id'    => 'tax_percent_name_2',
-                        'class' => 'form-control input-sm',
-                        'value' => to_tax_decimals($config['default_tax_2_rate'])
-                    ]) ?>
-                    <span class="input-group input-group-addon"><b>%</b></span>
-                </div>
-            </div>
-        </div>
+    <label for="tax_name_1" class="form-label"><?= lang('Items.tax_1') ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="tax_name_1-icon"><i class="bi bi-piggy-bank"></i></span>
+        <input type="text" class="form-control w-25" name="tax_names[]" id="tax_name_1" aria-describedby="tax_name_1-icon" value="<?= $config['default_tax_1_name'] ?>">
+        <input type="number" step="any" min="0" max="100" class="form-control" name="tax_percents[]" id="tax_percent_name_1" aria-describedby="tax_percent_name_1-icon" value="<?= to_tax_decimals($config['default_tax_1_rate']) ?>">
+        <span class="input-group-text" id="tax_percent_name_1-icon"><i class="bi bi-percent"></i></span>
+    </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.reorder_level'), 'reorder_level', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-4">
-                <?= form_input([
-                    'name'  => 'reorder_level',
-                    'id'    => 'reorder_level',
-                    'class' => 'form-control input-sm'
-                ]) ?>
-            </div>
-        </div>
+    <label for="tax_name_2" class="form-label"><?= lang('Items.tax_2') ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="tax_name_2-icon"><i class="bi bi-piggy-bank"></i></span>
+        <input type="text" class="form-control w-25" name="tax_names[]" id="tax_name_2" aria-describedby="tax_name_2-icon" value="<?= $config['default_tax_2_name'] ?>">
+        <input type="number" step="any" min="0" max="100" class="form-control" name="tax_percents[]" id="tax_percent_name_2" aria-describedby="tax_percent_name_2-icon" value="<?= to_tax_decimals($config['default_tax_2_rate']) ?>">
+        <span class="input-group-text" id="tax_percent_name_2-icon"><i class="bi bi-percent"></i></span>
+    </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.description'), 'description', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <?= form_textarea([
-                    'name'  => 'description',
-                    'id'    => 'description',
-                    'class' => 'form-control input-sm'
-                ]) ?>
-            </div>
-        </div>
+    <label for="reorder_level" class="form-label"><?= lang('Items.reorder_level') ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="reorder_level-icon"><i class="bi bi-list-ol"></i></span>
+        <input type="text" class="form-control" name="reorder_level" id="reorder_level" aria-describedby="reorder_level-icon">
+    </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.allow_alt_description'), 'allow_alt_description', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <?= form_dropdown('allow_alt_description', $allow_alt_description_choices, '', ['class' => 'form-control']) ?>
-            </div>
-        </div>
+    <label for="description" class="form-label"><?= lang('Items.description'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text"><i class="bi bi-chat"></i></span>
+        <textarea class="form-control" name="description" id="description" rows="6"></textarea>
+    </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.is_serialized'), 'is_serialized', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <?= form_dropdown('is_serialized', $serialization_choices, '', ['class' => 'form-control']) ?>
-            </div>
-        </div>
+    <label for="allow_alt_description" class="form-label"><?= lang('Items.allow_alt_description'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text"><i class="bi bi-input-cursor-text"></i></span>
+        <select class="form-select" name="allow_alt_description" id="allow_alt_description">
+            <?php foreach ($allow_alt_description_choices as $value => $label): ?>
+                <option value="<?= $value ?>"><?= $label ?></option>
+            <?php endforeach; ?>
+        </select>
+    </div>
+
+    <label for="is_serialized" class="form-label"><?= lang('Items.is_serialized'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text"><i class="bi bi-123"></i></span>
+        <select class="form-select" name="is_serialized" id="is_serialized">
+            <?php foreach ($serialization_choices as $value => $label): ?>
+                <option value="<?= $value ?>"><?= $label ?></option>
+            <?php endforeach; ?>
+        </select>
+    </div>
 
-    </fieldset>
 <?= form_close() ?>
 
 <script type="text/javascript">