Bootstrap 5 WIP

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

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> · 

SECURITY.md

@@ -5,9 +5,8 @@
   - [Supported Versions](#supported-versions)
   - [Security Advisories](#security-advisories)
   - [Reporting a Vulnerability](#reporting-a-vulnerability)
-  - [Disclosure Process](#disclosure-process)
 
-<!-- END doctoc generated TOC please keep comment here to allow update -->
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
 # Security Policy
 
@@ -22,116 +21,26 @@ We release patches for security vulnerabilities.
 
 ## Security Advisories
 
-For a complete list of published and draft security advisories with CVE details, see our [GitHub Security Advisories page](https://github.com/opensourcepos/opensourcepos/security/advisories).
+The following security vulnerabilities have been published:
+
+### High Severity
+
+| CVE | Vulnerability | CVSS | Published | Fixed In | Credit |
+|-----|--------------|------|-----------|----------|--------|
+| [CVE-2025-68434](https://github.com/opensourcepos/opensourcepos/security/advisories/GHSA-wjm4-hfwg-5w5r) | CSRF leading to Admin Creation | 8.8 | 2025-12-17 | 3.4.2 | @Nixon-H, @jekkos |
+| [CVE-2025-68147](https://github.com/opensourcepos/opensourcepos/security/advisories/GHSA-xgr7-7pvw-fpmh) | Stored XSS in Return Policy | 8.1 | 2025-12-17 | 3.4.2 | @Nixon-H, @jekkos |
+| [CVE-2025-66924](https://github.com/opensourcepos/opensourcepos/security/advisories/GHSA-gv8j-f6gq-g59m) | Stored XSS in Item Kits | 7.2 | 2026-03-04 | 3.4.2 | @hungnqdz, @omkaryepre |
+
+### Medium Severity
+
+| CVE | Vulnerability | CVSS | Published | Fixed In | Credit |
+|-----|--------------|------|-----------|----------|--------|
+| [CVE-2025-68658](https://github.com/opensourcepos/opensourcepos/security/advisories/GHSA-32r8-8r9r-9chw) | Stored XSS in Company Name | 4.3 | 2026-01-13 | 3.4.2 | @hungnqdz |
+
+For a complete list including draft advisories, see our [GitHub Security Advisories page](https://github.com/opensourcepos/opensourcepos/security/advisories).
 
 ## Reporting a Vulnerability
 
-**Option 1: GitHub Security Advisory (Preferred)**
+Please report (suspected) security vulnerabilities to **[jeroen@steganos.dev](mailto:jeroen@steganos.dev)**. 
 
-1. Create a draft security advisory directly on GitHub:
-   - Go to https://github.com/opensourcepos/opensourcepos/security/advisories
-   - Click "New draft security advisory"
-   - Fill in the vulnerability details using our [template below](#vulnerability-template)
-   - Submit as **draft** (not published)
-
-2. Notify us for triage:
-   - Send an email to **[jeroen@steganos.dev](mailto:jeroen@steganos.dev)** with:
-     - Subject: `[GHSA] Brief description of vulnerability`
-     - Link to the draft advisory
-     - Brief summary
-
-**Option 2: Email Report**
-
-Send vulnerability details to **[jeroen@steganos.dev](mailto:jeroen@steganos.dev)**.
-
-You will receive a response within 48 hours. Confirmed vulnerabilities will be patched within a few days depending on complexity.
-
-## Disclosure Process
-
-### Timeline
-
-| Step | Timeline | Action |
-|------|----------|--------|
-| 1. Report received | Day 0 | We acknowledge within 48 hours |
-| 2. Triage & confirmation | Day 1-3 | We validate the vulnerability |
-| 3. Fix development | Day 3-7 | We develop and test the fix |
-| 4. Patch release | Day 7-10 | We release a security patch |
-| 5. CVE request | Day 7-14 | We request CVE from GitHub (if applicable) |
-| 6. Advisory published | Day 14 | We publish the advisory with credit |
-| 7. Public disclosure | Day 14+ | Full disclosure after patch release |
-
-### CVE Process
-
-**We request CVE identifiers through GitHub's security advisory system.** This is the preferred and easiest method:
-
-1. After we confirm and fix the vulnerability, we'll request a CVE through GitHub
-2. GitHub coordinates with MITRE on our behalf
-3. The CVE is automatically linked to the advisory
-4. You'll be credited as the reporter in the published advisory
-
-**Already have a CVE?** If you've already obtained a CVE from another source (e.g., VulDB, CVE.MITRE.ORG), please include it in your report or advisory. We'll update our advisory to reference the existing CVE.
-
-### No Bug Bounty Program
-
-**Important:** Open Source Point of Sale does not offer a bug bounty program.
-
-- All security research and vulnerability triage is done on a **voluntary basis** in our free time
-- We do not offer monetary rewards for vulnerability reports
-- We do credit reporters in published advisories (unless anonymity is requested)
-- We greatly appreciate the security research community's efforts to help improve project security
-
-### Security Best Practices for Researchers
-
-- **Do not** access, modify, or delete data that doesn't belong to you
-- **Do not** perform denial of service attacks
-- **Do not** publicly disclose vulnerabilities before we've had time to fix them
-- **Do** provide sufficient information to reproduce the vulnerability
-- **Do** allow us reasonable time to fix before public disclosure
-- **Do** report through official channels (GitHub advisories or email)
-
-### Vulnerability Template
-
-When creating a draft advisory, please include:
-
-```
-## Summary
-[Brief description of the vulnerability]
-
-## Impact
-- **Confidentiality:** [High/Medium/Low - what data can be exposed]
-- **Integrity:** [High/Medium/Low - what can be modified]
-- **Availability:** [High/Medium/Low - service disruption potential]
-- **Privilege Required:** [None/Low/High - authentication level needed]
-- **CVSS v3.1:** [Score] ([Vector string])
-
-## Details
-[Technical details about the vulnerability]
-
-**Affected Code:**
-```php
-// Path to affected file and vulnerable code
-```
-
-**Attack Vector:**
-[How an attacker can exploit this]
-
-## Proof of Concept
-```bash
-# Steps to reproduce
-```
-
-## Patch
-[Suggested fix or approach]
-
-## Affected Versions
-- OpenSourcePOS X.Y.Z and earlier
-
-## Credit
-[Your GitHub username or preferred name]
-```
-
----
-
-**Thank you to all security researchers who have contributed to making Open Source Point of Sale more secure.** Your voluntary efforts help protect thousands of users worldwide and contribute to a safer, more trustworthy free and open-source software ecosystem. We deeply appreciate your responsible disclosure and the time you invest in improving our project.
-
-If you've reported a vulnerability and would like to discuss CVE coordination or have questions about the process, please reach out to us at [jeroen@steganos.dev](mailto:jeroen@steganos.dev).
+You will receive a response from us within 48 hours. If the issue is confirmed, we will release a patch as soon as possible depending on complexity but historically within a few days.

app/Controllers/Attributes.php

@@ -246,7 +246,7 @@ class Attributes extends Secure_Controller
         $data['definition_group'][''] = lang('Common.none_selected_text');
         $data['definition_info'] = $info;
 
-        $show_all = Attribute::SHOW_IN_ITEMS | Attribute::SHOW_IN_RECEIVINGS | Attribute::SHOW_IN_SALES | Attribute::SHOW_IN_SEARCH;
+        $show_all = Attribute::SHOW_IN_ITEMS | Attribute::SHOW_IN_RECEIVINGS | Attribute::SHOW_IN_SALES;
         $data['definition_flags'] = $this->get_attributes($show_all);
         $selected_flags = $info->definition_flags === '' ? $show_all : $info->definition_flags;
         $data['selected_definition_flags'] = $this->get_attributes($selected_flags);

app/Controllers/Config.php

@@ -371,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,
@@ -380,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),
@@ -425,6 +421,26 @@ class Config extends Secure_Controller
         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')]);
+    }
+
     /**
      * Checks a number against the currently selected locale. Used in app/Views/configs/locale_config.php
      *
@@ -481,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'),
@@ -924,9 +941,7 @@ class Config extends Secure_Controller
     public function postSaveReceipt(): ResponseInterface
     {
         $batch_save_data = [
-            'receipt_template'              => Sale_lib::isValidReceiptTemplate($this->request->getPost('receipt_template'))
-                ? $this->request->getPost('receipt_template')
-                : 'receipt_default',
+            'receipt_template'              => $this->request->getPost('receipt_template'),
             'receipt_font_size'             => $this->request->getPost('receipt_font_size', FILTER_SANITIZE_NUMBER_INT),
             'print_delay_autoreturn'        => $this->request->getPost('print_delay_autoreturn', FILTER_SANITIZE_NUMBER_INT),
             'email_receipt_check_behaviour' => $this->request->getPost('email_receipt_check_behaviour'),

app/Controllers/Items.php

@@ -105,14 +105,13 @@ class Items extends Secure_Controller
         $search = $this->request->getGet('search', FILTER_SANITIZE_FULL_SPECIAL_CHARS);
         $limit = $this->request->getGet('limit', FILTER_SANITIZE_NUMBER_INT);
         $offset = $this->request->getGet('offset', FILTER_SANITIZE_NUMBER_INT);
-
-        $definition_names = $this->attribute->get_definitions_by_flags(Attribute::SHOW_IN_ITEMS);
-
-        $sort = $this->sanitizeSortColumn(item_sort_columns(), $this->request->getGet('sort', FILTER_SANITIZE_FULL_SPECIAL_CHARS), 'items.item_id');
+        $sort = $this->sanitizeSortColumn(item_headers(), $this->request->getGet('sort', FILTER_SANITIZE_FULL_SPECIAL_CHARS), 'item_id');
         $order = $this->request->getGet('order', FILTER_SANITIZE_FULL_SPECIAL_CHARS);
 
         $this->item_lib->set_item_location($this->request->getGet('stock_location'));
 
+        $definition_names = $this->attribute->get_definitions_by_flags(Attribute::SHOW_IN_ITEMS);
+
         $filters = [
             'start_date'        => $this->request->getGet('start_date'),
             'end_date'          => $this->request->getGet('end_date'),
@@ -130,13 +129,6 @@ class Items extends Secure_Controller
         // Check if any filter is set in the multiselect dropdown
         $request_filters = array_fill_keys($this->request->getGet('filters', FILTER_SANITIZE_FULL_SPECIAL_CHARS) ?? [], true);
         $filters = array_merge($filters, $request_filters);
-
-        // When search_custom is enabled, include attributes that are searchable but may not be visible in table
-        if (!empty($filters['search_custom'])) {
-            $searchable_definitions = $this->attribute->get_definitions_by_flags(Attribute::SHOW_IN_ITEMS | Attribute::SHOW_IN_SEARCH);
-            $filters['definition_ids'] = array_keys($searchable_definitions);
-        }
-
         $items = $this->item->search($search, $filters, $limit, $offset, $sort, $order);
         $total_rows = $this->item->get_found_rows($search, $filters);
         $data_rows = [];
@@ -162,23 +154,8 @@ class Items extends Secure_Controller
     {
         helper('file');
 
-        // Security: Sanitize filename to prevent path traversal
-        // Use basename() to strip directory components and prevent '../' attacks
-        $pic_filename = basename(rawurldecode($pic_filename));
-        $file_extension = strtolower(pathinfo($pic_filename, PATHINFO_EXTENSION));
-
-        // Validate file extension against system-configured allowed image types
-        // Handle both legacy pipe-separated and current comma-separated formats
-        // Fallback to types that GD library can process for thumbnail generation
-        $allowed_types = $this->config['image_allowed_types'] ?? 'jpg,jpeg,gif,png,webp,bmp,tif,tiff';
-        $allowed_extensions = strpos($allowed_types, '|') !== false
-            ? explode('|', $allowed_types)
-            : explode(',', $allowed_types);
-
-        if (!in_array($file_extension, $allowed_extensions, true)) {
-            return $this->response->setStatusCode(400)->setBody('Invalid file type');
-        }
-
+        $pic_filename = rawurldecode($pic_filename);
+        $file_extension = pathinfo($pic_filename, PATHINFO_EXTENSION);
         $images = glob("./uploads/item_pics/$pic_filename");
         $base_path = './uploads/item_pics/' . pathinfo($pic_filename, PATHINFO_FILENAME);
 

app/Controllers/Reports.php

@@ -1246,15 +1246,13 @@ class Reports extends Secure_Controller
     public function get_payment_type(): array
     {
         return [
-            'all'           => lang('Common.none_selected_text'),
-            'cash'          => lang('Sales.cash'),
-            'due'           => lang('Sales.due'),
-            'check'         => lang('Sales.check'),
-            'credit'        => lang('Sales.credit'),
-            'debit'         => lang('Sales.debit'),
-            'bank_transfer' => lang('Sales.bank_transfer'),
-            'wallet'        => lang('Sales.wallet'),
-            'invoices'      => lang('Sales.invoice')
+            'all'      => lang('Common.none_selected_text'),
+            'cash'     => lang('Sales.cash'),
+            'due'      => lang('Sales.due'),
+            'check'    => lang('Sales.check'),
+            'credit'   => lang('Sales.credit'),
+            'debit'    => lang('Sales.debit'),
+            'invoices' => lang('Sales.invoice')
         ];
     }
 
@@ -1310,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')
@@ -1437,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')
@@ -1569,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')
@@ -1657,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')
@@ -1833,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')
@@ -1913,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')
@@ -1973,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

@@ -93,8 +93,6 @@ class Sales extends Secure_Controller
                 'only_check'        => lang('Sales.check_filter'),
                 'only_creditcard'   => lang('Sales.credit_filter'),
                 'only_debit'        => lang('Sales.debit'),
-                'only_bank_transfer'=> lang('Sales.bank_transfer'),
-                'only_wallet'       => lang('Sales.wallet'),
                 'only_invoices'     => lang('Sales.invoice_filter'),
                 'selected_customer' => lang('Sales.selected_customer')
             ];
@@ -158,8 +156,6 @@ class Sales extends Secure_Controller
             'selected_customer' => false,
             'only_creditcard'   => false,
             'only_debit'        => false,
-            'only_bank_transfer'=> false,
-            'only_wallet'       => false,
             'only_invoices'     => $this->config['invoice_enable'] && $this->request->getGet('only_invoices', FILTER_SANITIZE_NUMBER_INT),
             'is_valid_receipt'  => $this->sale->is_valid_receipt($search)
         ];
@@ -908,14 +904,6 @@ class Sales extends Secure_Controller
                 return $this->_reload($data);
             } else {
                 $data['barcode'] = $this->barcode_lib->generate_receipt_barcode($data['sale_id']);
-
-                // Validate receipt template to prevent path traversal
-                $receipt_template = $this->config['receipt_template'] ?? '';
-                if (!Sale_lib::isValidReceiptTemplate($receipt_template)) {
-                    $receipt_template = 'receipt_default';
-                }
-                $data['receipt_template_view'] = $receipt_template;
-
                 $this->sale_lib->clear_all();
                 return view('sales/receipt', $data);
             }
@@ -1171,13 +1159,6 @@ class Sales extends Secure_Controller
         }
         $data['invoice_view'] = $invoice_type;
 
-        // Validate receipt template to prevent path traversal
-        $receipt_template = $this->config['receipt_template'] ?? '';
-        if (!Sale_lib::isValidReceiptTemplate($receipt_template)) {
-            $receipt_template = 'receipt_default';
-        }
-        $data['receipt_template_view'] = $receipt_template;
-
         return $data;
     }
 

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

@@ -272,9 +272,6 @@ function get_payment_options(): array
         $payments[lang('Sales.upi')] = lang('Sales.upi');
     }
 
-    $payments[lang('Sales.bank_transfer')] = lang('Sales.bank_transfer');
-    $payments[lang('Sales.wallet')]        = lang('Sales.wallet');
-
     return $payments;
 }
 

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")
             ]
@@ -402,25 +402,6 @@ function item_headers(): array
     ];
 }
 
-/**
- * Get all sortable column keys for items table, including dynamic attribute columns.
- *
- * @return array Array of column headers in format expected by sanitizeSortColumn
- */
-function item_sort_columns(): array
-{
-    $attribute = model(Attribute::class);
-    $definitionIds = array_keys($attribute->get_definitions_by_flags($attribute::SHOW_IN_ITEMS));
-
-    $headers = item_headers();
-
-    foreach ($definitionIds as $definitionId) {
-        $headers[] = [(string) $definitionId => ''];
-    }
-
-    return $headers;
-}
-
 /**
  * Get the header for the items tabular view
  */
@@ -441,7 +422,7 @@ function get_items_manage_table_headers(): string
     $headers[] = ['item_pic' => lang('Items.image'), 'sortable' => false];
 
     foreach ($definitionsWithTypes as $definition_id => $definitionInfo) {
-        $headers[] = [$definition_id => $definitionInfo['name'], 'sortable' => true];
+        $headers[] = [$definition_id => $definitionInfo['name'], 'sortable' => false];
     }
 
     $headers[] = ['inventory' => '', 'escape' => false];
@@ -517,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")
             ]
@@ -580,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")
             ]
@@ -626,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")
             ]
@@ -734,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")
             ]
@@ -774,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")
             ]
@@ -828,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")
             ]
@@ -923,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/ar-EG/Attributes.php

@@ -30,7 +30,5 @@ return [
     "show_in_receivings_visibility"    => "استلام البضائع",
     "show_in_sales"                    => "اظهار خلال البيع",
     "show_in_sales_visibility"         => "البيع",
-    "show_in_search"                   => "Show in search",
-    "show_in_search_visibility"        => "Search",
     "update"                           => "تحديث الميزات",
 ];

app/Language/ar-LB/Attributes.php

@@ -30,7 +30,5 @@ return [
     "show_in_receivings_visibility"    => "استلام البضائع",
     "show_in_sales"                    => "اظهار خلال البيع",
     "show_in_sales_visibility"         => "البيع",
-    "show_in_search"                   => "Show in search",
-    "show_in_search_visibility"        => "Search",
     "update"                           => "تحديث الميزات",
 ];

app/Language/az/Attributes.php

@@ -30,7 +30,5 @@ return [
     "show_in_receivings_visibility"    => "Alınanlar",
     "show_in_sales"                    => "Satışda göstərin",
     "show_in_sales_visibility"         => "Satışlar",
-    "show_in_search"                   => "Show in search",
-    "show_in_search_visibility"        => "Search",
     "update"                           => "Atributları yenilə",
 ];

app/Language/bg/Attributes.php

@@ -30,7 +30,5 @@ return [
     "show_in_receivings_visibility"    => "",
     "show_in_sales"                    => "",
     "show_in_sales_visibility"         => "",
-    "show_in_search"                   => "Show in search",
-    "show_in_search_visibility"        => "Search",
     "update"                           => "",
 ];

app/Language/bs/Attributes.php

@@ -30,7 +30,5 @@ return [
     "show_in_receivings_visibility"    => "Ulazi",
     "show_in_sales"                    => "Prikaži u prodaji",
     "show_in_sales_visibility"         => "Prodaja",
-    "show_in_search"                   => "Show in search",
-    "show_in_search_visibility"        => "Search",
     "update"                           => "Ažuriraj atribut",
 ];

app/Language/ckb/Attributes.php

@@ -30,7 +30,5 @@ return [
     "show_in_receivings_visibility"    => "بەدەستگەیشتووکان",
     "show_in_sales"                    => "لە فرۆشتندا نیشانی بدە",
     "show_in_sales_visibility"         => "فرۆشتن",
-    "show_in_search"                   => "Show in search",
-    "show_in_search_visibility"        => "Search",
     "update"                           => "تایبەتمەندی نوێ بکەرەوە",
 ];

app/Language/cs/Attributes.php

@@ -30,7 +30,5 @@ return [
     "show_in_receivings_visibility"    => "",
     "show_in_sales"                    => "",
     "show_in_sales_visibility"         => "",
-    "show_in_search"                   => "Show in search",
-    "show_in_search_visibility"        => "Search",
     "update"                           => "",
 ];

app/Language/da/Attributes.php

@@ -30,7 +30,5 @@ return [
     "show_in_receivings_visibility"    => "Modtagelser",
     "show_in_sales"                    => "Vis i salg",
     "show_in_sales_visibility"         => "Salg",
-    "show_in_search"                   => "Show in search",
-    "show_in_search_visibility"        => "Search",
     "update"                           => "Opdater egenskab",
 ];

app/Language/de-CH/Attributes.php

@@ -30,7 +30,5 @@ return [
     "show_in_receivings_visibility"    => "",
     "show_in_sales"                    => "",
     "show_in_sales_visibility"         => "",
-    "show_in_search"                   => "Show in search",
-    "show_in_search_visibility"        => "Search",
     "update"                           => "",
 ];

app/Language/de-DE/Attributes.php

@@ -30,7 +30,5 @@ return [
     "show_in_receivings_visibility"    => "Eingänge",
     "show_in_sales"                    => "In Verkäufen anzeigen",
     "show_in_sales_visibility"         => "Verkauf",
-    "show_in_search"                   => "In Suche anzeigen",
-    "show_in_search_visibility"        => "Suche",
     "update"                           => "Attribut aktualisieren",
 ];

app/Language/el/Attributes.php

@@ -30,7 +30,5 @@ return [
     "show_in_receivings_visibility"    => "",
     "show_in_sales"                    => "",
     "show_in_sales_visibility"         => "",
-    "show_in_search"                   => "Show in search",
-    "show_in_search_visibility"        => "Search",
     "update"                           => "",
 ];

app/Language/en-GB/Attributes.php

@@ -30,7 +30,5 @@ return [
     "show_in_receivings_visibility"    => "Receivings",
     "show_in_sales"                    => "Show in sales",
     "show_in_sales_visibility"         => "Sales",
-    "show_in_search"                   => "Show in search",
-    "show_in_search_visibility"        => "Search",
     "update"                           => "Update Attribute",
 ];

app/Language/en-GB/Sales.php

@@ -9,7 +9,6 @@ return [
     "amount_due"                       => "Amount Due",
     "amount_tendered"                  => "Amount Tendered",
     "authorized_signature"             => "Authorised Signature",
-    "bank_transfer"                    => "Bank Transfer",
     "cancel_sale"                      => "Cancel",
     "cash"                             => "Cash",
     "cash_1"                           => "",
@@ -224,7 +223,6 @@ return [
     "update"                           => "Update",
     "upi"                              => "UPI",
     "visa"                             => "",
-    "wallet"                           => "Wallet",
     "wholesale"                        => "",
     "work_order"                       => "Work Order",
     "work_order_number"                => "Work Order Number",

app/Language/en/Attributes.php

@@ -30,7 +30,5 @@ return [
     "show_in_receivings_visibility"    => "Receivings",
     "show_in_sales"                    => "Show in sales",
     "show_in_sales_visibility"         => "Sales",
-    "show_in_search"                   => "Show in search",
-    "show_in_search_visibility"        => "Search",
     "update"                           => "Update Attribute",
 ];

app/Language/en/Sales.php

@@ -9,7 +9,6 @@ return [
     "amount_due"                       => "Amount Due",
     "amount_tendered"                  => "Amount Tendered",
     "authorized_signature"             => "Authorized Signature",
-    "bank_transfer"                    => "Bank Transfer",
     "cancel_sale"                      => "Cancel",
     "cash"                             => "Cash",
     "cash_1"                           => "",
@@ -224,7 +223,6 @@ return [
     "update"                           => "Update",
     "upi"                              => "UPI",
     "visa"                             => "",
-    "wallet"                           => "Wallet",
     "wholesale"                        => "",
     "work_order"                       => "Work Order",
     "work_order_number"                => "Work Order Number",

app/Language/es-ES/Attributes.php

@@ -30,7 +30,5 @@ return [
     "show_in_receivings_visibility"    => "Recibos",
     "show_in_sales"                    => "Mostrar en ventas",
     "show_in_sales_visibility"         => "Ventas",
-    "show_in_search"                   => "Mostrar en búsqueda",
-    "show_in_search_visibility"        => "Búsqueda",
     "update"                           => "Actualizar Atributo",
 ];

app/Language/es-ES/Sales.php

@@ -9,7 +9,6 @@ return [
     "amount_due"                       => "Monto Adeudado",
     "amount_tendered"                  => "Cantidad Recibida",
     "authorized_signature"             => "Firma Autorizada",
-    "bank_transfer"                    => "Transferencia Bancaria",
     "cancel_sale"                      => "Cancelar Venta",
     "cash"                             => "Efectivo",
     "cash_1"                           => "1",
@@ -223,7 +222,6 @@ return [
     "update"                           => "Editar",
     "upi"                              => "PIN UPI",
     "visa"                             => "Tarjeta Visa",
-    "wallet"                           => "Monedero",
     "wholesale"                        => "Precio al por mayor",
     "work_order"                       => "Orden trabajo",
     "work_order_number"                => "Numero Orden Trabajo",

app/Language/es-MX/Attributes.php

@@ -30,7 +30,5 @@ return [
     "show_in_receivings_visibility"    => "Recepciones",
     "show_in_sales"                    => "Mostrar en Ventas",
     "show_in_sales_visibility"         => "Ventas",
-    "show_in_search"                   => "Show in search",
-    "show_in_search_visibility"        => "Search",
     "update"                           => "Actualizar atributo",
 ];

app/Language/es-MX/Sales.php

@@ -9,7 +9,6 @@ return [
     "amount_due"                       => "Monto de adeudo",
     "amount_tendered"                  => "Cantidad Recibida",
     "authorized_signature"             => "Firma Autorizada",
-    "bank_transfer"                    => "Transferencia Bancaria",
     "cancel_sale"                      => "Cancelar",
     "cash"                             => "Efectivo",
     "cash_1"                           => "",
@@ -223,7 +222,6 @@ return [
     "update"                           => "Actualizar",
     "upi"                              => "UPI",
     "visa"                             => "",
-    "wallet"                           => "Monedero",
     "wholesale"                        => "",
     "work_order"                       => "Orden de trabajo",
     "work_order_number"                => "Número de orden de trabajo",

app/Language/fa/Attributes.php

@@ -30,7 +30,5 @@ return [
     "show_in_receivings_visibility"    => "دریافت",
     "show_in_sales"                    => "نمایش در فروش",
     "show_in_sales_visibility"         => "حراجی",
-    "show_in_search"                   => "Show in search",
-    "show_in_search_visibility"        => "Search",
     "update"                           => "به روز کردن ویژگی",
 ];

app/Language/fr/Attributes.php

@@ -30,7 +30,5 @@ return [
     "show_in_receivings_visibility"    => "Réceptions",
     "show_in_sales"                    => "Afficher dans les ventes",
     "show_in_sales_visibility"         => "Ventes",
-    "show_in_search"                   => "Afficher dans la recherche",
-    "show_in_search_visibility"        => "Recherche",
     "update"                           => "Mettre à jour l'attribut",
 ];

app/Language/fr/Sales.php

@@ -9,7 +9,6 @@ return [
     "amount_due"                       => "Montant à Payer",
     "amount_tendered"                  => "Montant Présenté",
     "authorized_signature"             => "Signature autorisée",
-    "bank_transfer"                    => "Virement Bancaire",
     "cancel_sale"                      => "Annuler la Vente",
     "cash"                             => "Espèce",
     "cash_1"                           => "",
@@ -223,7 +222,6 @@ return [
     "update"                           => "Éditer",
     "upi"                              => "UPI",
     "visa"                             => "",
-    "wallet"                           => "Portefeuille",
     "wholesale"                        => "",
     "work_order"                       => "Commande de travail",
     "work_order_number"                => "Numéro de commande",

app/Language/he/Attributes.php

@@ -30,7 +30,5 @@ return [
     "show_in_receivings_visibility"    => "קבלת סחורה",
     "show_in_sales"                    => "הצג במכירות",
     "show_in_sales_visibility"         => "מכירות",
-    "show_in_search"                   => "Show in search",
-    "show_in_search_visibility"        => "Search",
     "update"                           => "עדכן מאפיין",
 ];

app/Language/hr-HR/Attributes.php

@@ -30,7 +30,5 @@ return [
     "show_in_receivings_visibility"    => "",
     "show_in_sales"                    => "",
     "show_in_sales_visibility"         => "",
-    "show_in_search"                   => "Show in search",
-    "show_in_search_visibility"        => "Search",
     "update"                           => "",
 ];

app/Language/hu/Attributes.php

@@ -30,7 +30,5 @@ return [
     "show_in_receivings_visibility"    => "Áruátvételek",
     "show_in_sales"                    => "Megjelenítés az értékesítésekben",
     "show_in_sales_visibility"         => "Értékesítések",
-    "show_in_search"                   => "Show in search",
-    "show_in_search_visibility"        => "Search",
     "update"                           => "Tulajdonság frissítése",
 ];

app/Language/hy/Attributes.php

@@ -30,7 +30,5 @@ return [
     "show_in_receivings_visibility"    => "Receivings",
     "show_in_sales"                    => "Show in sales",
     "show_in_sales_visibility"         => "Sales",
-    "show_in_search"                   => "Show in search",
-    "show_in_search_visibility"        => "Search",
     "update"                           => "Update Attribute",
 ];

app/Language/id/Attributes.php

@@ -30,7 +30,5 @@ return [
     "show_in_receivings_visibility"    => "Penerimaan",
     "show_in_sales"                    => "Tampilkan dalam penjualan",
     "show_in_sales_visibility"         => "Penjualan",
-    "show_in_search"                   => "Show in search",
-    "show_in_search_visibility"        => "Search",
     "update"                           => "Perbarui Atribut",
 ];

app/Language/it/Attributes.php

@@ -30,7 +30,5 @@ return [
     "show_in_receivings_visibility"    => "Ricezione",
     "show_in_sales"                    => "Visualizza in vendite",
     "show_in_sales_visibility"         => "Vendite",
-    "show_in_search"                   => "Visualizza nella ricerca",
-    "show_in_search_visibility"        => "Ricerca",
     "update"                           => "Aggiorna attributo",
 ];

app/Language/km/Attributes.php

@@ -30,7 +30,5 @@ return [
     "show_in_receivings_visibility"    => "",
     "show_in_sales"                    => "",
     "show_in_sales_visibility"         => "",
-    "show_in_search"                   => "Show in search",
-    "show_in_search_visibility"        => "Search",
     "update"                           => "",
 ];

app/Language/lo/Attributes.php

@@ -30,7 +30,5 @@ return [
     "show_in_receivings_visibility"    => "",
     "show_in_sales"                    => "",
     "show_in_sales_visibility"         => "",
-    "show_in_search"                   => "Show in search",
-    "show_in_search_visibility"        => "Search",
     "update"                           => "",
 ];

app/Language/ml/Attributes.php

@@ -30,7 +30,5 @@ return [
     "show_in_receivings_visibility"    => "Receivings",
     "show_in_sales"                    => "Show in sales",
     "show_in_sales_visibility"         => "Sales",
-    "show_in_search"                   => "Show in search",
-    "show_in_search_visibility"        => "Search",
     "update"                           => "Update Attribute",
 ];

app/Language/nb/Attributes.php

@@ -30,7 +30,5 @@ return [
     "show_in_receivings_visibility"    => "Receivings",
     "show_in_sales"                    => "Show in sales",
     "show_in_sales_visibility"         => "Sales",
-    "show_in_search"                   => "Show in search",
-    "show_in_search_visibility"        => "Search",
     "update"                           => "Update Attribute",
 ];

app/Language/nl-BE/Attributes.php

@@ -30,7 +30,5 @@ return [
     "show_in_receivings_visibility"    => "Orders",
     "show_in_sales"                    => "Toon in verkoop",
     "show_in_sales_visibility"         => "Verkoop",
-    "show_in_search"                   => "Show in search",
-    "show_in_search_visibility"        => "Search",
     "update"                           => "Wijzig Attribuut",
 ];

app/Language/nl-NL/Attributes.php

@@ -30,7 +30,5 @@ return [
     "show_in_receivings_visibility"    => "Leveringen",
     "show_in_sales"                    => "Weergeven in verkopen",
     "show_in_sales_visibility"         => "Verkopen",
-    "show_in_search"                   => "Show in search",
-    "show_in_search_visibility"        => "Search",
     "update"                           => "Kenmerk bijwerken",
 ];

app/Language/pl/Attributes.php

@@ -30,7 +30,5 @@ return [
     "show_in_receivings_visibility"    => "Dostawy",
     "show_in_sales"                    => "Pokaż w sprzedażach",
     "show_in_sales_visibility"         => "Sprzedaże",
-    "show_in_search"                   => "Show in search",
-    "show_in_search_visibility"        => "Search",
     "update"                           => "Zaktualizuj atrybut",
 ];

app/Language/pt-BR/Attributes.php

@@ -30,7 +30,5 @@ return [
     "show_in_receivings_visibility"    => "Recebimentos",
     "show_in_sales"                    => "Mostrar em vendas",
     "show_in_sales_visibility"         => "Vendas",
-    "show_in_search"                   => "Show in search",
-    "show_in_search_visibility"        => "Search",
     "update"                           => "Atualizar atributo",
 ];

app/Language/ro/Attributes.php

@@ -30,7 +30,5 @@ return [
     "show_in_receivings_visibility"    => "Receptii",
     "show_in_sales"                    => "Arata in vanzari",
     "show_in_sales_visibility"         => "Vanzari",
-    "show_in_search"                   => "Show in search",
-    "show_in_search_visibility"        => "Search",
     "update"                           => "Actualizare Atribut",
 ];

app/Language/ru/Attributes.php

@@ -30,7 +30,5 @@ return [
     "show_in_receivings_visibility"    => "Закупки",
     "show_in_sales"                    => "Показать в продажах",
     "show_in_sales_visibility"         => "Продажи",
-    "show_in_search"                   => "Show in search",
-    "show_in_search_visibility"        => "Search",
     "update"                           => "Обновить атрибут",
 ];

app/Language/sv/Attributes.php

@@ -30,7 +30,5 @@ return [
     "show_in_receivings_visibility"    => "Inleveranser",
     "show_in_sales"                    => "Visa i försäljning",
     "show_in_sales_visibility"         => "Försäljning",
-    "show_in_search"                   => "Show in search",
-    "show_in_search_visibility"        => "Search",
     "update"                           => "Uppdatera attribut",
 ];

app/Language/sw-KE/Attributes.php

@@ -30,7 +30,5 @@ return [
     "show_in_receivings_visibility"    => "Manunuzi",
     "show_in_sales"                    => "Onyesha kwenye Mauzo",
     "show_in_sales_visibility"         => "Mauzo",
-    "show_in_search"                   => "Show in search",
-    "show_in_search_visibility"        => "Search",
     "update"                           => "Sasisha Sifa",
 ];

app/Language/sw-TZ/Attributes.php

@@ -30,7 +30,5 @@ return [
     "show_in_receivings_visibility"    => "Manunuzi",
     "show_in_sales"                    => "Onyesha kwenye Mauzo",
     "show_in_sales_visibility"         => "Mauzo",
-    "show_in_search"                   => "Show in search",
-    "show_in_search_visibility"        => "Search",
     "update"                           => "Sasisha Sifa",
 ];

app/Language/ta/Attributes.php

@@ -30,7 +30,5 @@ return [
     "show_in_receivings_visibility"    => "Receivings",
     "show_in_sales"                    => "Show in sales",
     "show_in_sales_visibility"         => "Sales",
-    "show_in_search"                   => "Show in search",
-    "show_in_search_visibility"        => "Search",
     "update"                           => "Update Attribute",
 ];

app/Language/th/Attributes.php

@@ -30,7 +30,5 @@ return [
     "show_in_receivings_visibility"    => "สินค้าขาเข้า",
     "show_in_sales"                    => "แสดงใน การขาย",
     "show_in_sales_visibility"         => "การขาย",
-    "show_in_search"                   => "Show in search",
-    "show_in_search_visibility"        => "Search",
     "update"                           => "ปรับปรุงแอตทริบิวต์",
 ];

app/Language/tl/Attributes.php

@@ -30,7 +30,5 @@ return [
     "show_in_receivings_visibility"    => "Receivings",
     "show_in_sales"                    => "Show in sales",
     "show_in_sales_visibility"         => "Sales",
-    "show_in_search"                   => "Show in search",
-    "show_in_search_visibility"        => "Search",
     "update"                           => "Update Attribute",
 ];

app/Language/tr/Attributes.php

@@ -30,7 +30,5 @@ return [
     "show_in_receivings_visibility"    => "Alacaklar",
     "show_in_sales"                    => "Satışlarda göster",
     "show_in_sales_visibility"         => "Satışlar",
-    "show_in_search"                   => "Show in search",
-    "show_in_search_visibility"        => "Search",
     "update"                           => "Nitelik Güncelle",
 ];

app/Language/uk/Attributes.php

@@ -30,7 +30,5 @@ return [
     "show_in_receivings_visibility"    => "Надходження",
     "show_in_sales"                    => "Показати в продажах",
     "show_in_sales_visibility"         => "Продажі",
-    "show_in_search"                   => "Show in search",
-    "show_in_search_visibility"        => "Search",
     "update"                           => "Оновити атрибут",
 ];

app/Language/ur/Attributes.php

@@ -30,7 +30,5 @@ return [
     "show_in_receivings_visibility"    => "Receivings",
     "show_in_sales"                    => "Show in sales",
     "show_in_sales_visibility"         => "Sales",
-    "show_in_search"                   => "Show in search",
-    "show_in_search_visibility"        => "Search",
     "update"                           => "Update Attribute",
 ];

app/Language/vi/Attributes.php

@@ -30,7 +30,5 @@ return [
     "show_in_receivings_visibility"    => "Nhập hàng",
     "show_in_sales"                    => "Hiển thị trong bán hàng",
     "show_in_sales_visibility"         => "Bán hàng",
-    "show_in_search"                   => "Show in search",
-    "show_in_search_visibility"        => "Search",
     "update"                           => "Cập nhật thuộc tính",
 ];

app/Language/zh-Hans/Attributes.php

@@ -30,7 +30,5 @@ return [
     "show_in_receivings_visibility"    => "收据",
     "show_in_sales"                    => "在销售中显示",
     "show_in_sales_visibility"         => "销售",
-    "show_in_search"                   => "Show in search",
-    "show_in_search_visibility"        => "Search",
     "update"                           => "更新属性",
 ];

app/Language/zh-Hant/Attributes.php

@@ -30,7 +30,5 @@ return [
     "show_in_receivings_visibility"    => "收貨",
     "show_in_sales"                    => "在銷售中顯示",
     "show_in_sales_visibility"         => "銷售",
-    "show_in_search"                   => "Show in search",
-    "show_in_search_visibility"        => "Search",
     "update"                           => "更新屬性",
 ];

app/Libraries/Sale_lib.php

@@ -108,11 +108,6 @@ class Sale_lib
         'custom_tax_invoice'
     ];
 
-    private const ALLOWED_RECEIPT_TEMPLATES = [
-        'receipt_default',
-        'receipt_short'
-    ];
-
     public function get_invoice_type_options(): array
     {
         $invoice_types = [];
@@ -166,11 +161,6 @@ class Sale_lib
         return in_array($invoice_type, self::ALLOWED_INVOICE_TYPES, true);
     }
 
-    public static function isValidReceiptTemplate(string $receipt_template): bool
-    {
-        return in_array($receipt_template, self::ALLOWED_RECEIPT_TEMPLATES, true);
-    }
-
     /**
      * @return array
      */

app/Models/Attribute.php

@@ -38,10 +38,9 @@ class Attribute extends Model
         'attribute_decimal'
     ];
 
-    public const SHOW_IN_ITEMS = 1;
+    public const SHOW_IN_ITEMS = 1;    // TODO: These need to be moved to constants.php
     public const SHOW_IN_SALES = 2;
     public const SHOW_IN_RECEIVINGS = 4;
-    public const SHOW_IN_SEARCH = 8;
     public function deleteDropdownAttributeValue(string $attribute_value, int $definition_id): bool
     {
         $attribute_id = $this->getAttributeIdByValue($attribute_value);

app/Models/Item.php

@@ -31,7 +31,6 @@ class Item extends Model
         'allow_alt_description',
         'is_serialized'
     ];
-
     protected $table = 'items';
     protected $primaryKey = 'item_id';
     protected $useAutoIncrement = true;
@@ -59,6 +58,7 @@ class Item extends Model
         'hsn_code'
     ];
 
+
     /**
      * Determines if a given item_id is an item
      */
@@ -132,186 +132,32 @@ class Item extends Model
         return $this->search($search, $filters, 0, 0, 'items.name', 'asc', true);
     }
 
-    /**
-     * Parse search string for attribute-specific queries
-     * Supports syntax like "color: blue size: large" or "color:blue AND size:large"
-     *
-     * @param string $search The raw search string
-     * @return array{terms: array, attributes: array} Parsed terms and attribute queries
-     */
-    public function parseAttributeSearch(string $search): array
-    {
-        $result = [
-            'terms'    => [],
-            'attributes' => []
-        ];
-
-        if ($search === '') {
-            return $result;
-        }
-
-        $pattern = '/([[:alpha:]][[:alnum:] _-]*?)\s*:\s*([^\s,]+)(?:\s+(?:AND|OR)\s+)?/iu';
-        $remaining = preg_replace($pattern, '', $search);
-
-        if (preg_match_all($pattern, $search, $matches, PREG_SET_ORDER)) {
-            foreach ($matches as $match) {
-                $attrName = strtolower(trim($match[1]));
-                $attrValue = trim($match[2]);
-                $result['attributes'][$attrName][] = $attrValue;
-            }
-        }
-
-        $remaining = trim(preg_replace('/\s+/', ' ', $remaining));
-        if ($remaining !== '') {
-            $result['terms'][] = $remaining;
-        }
-
-        return $result;
-    }
-
-    /**
-     * Search for items by attribute values
-     * Returns an array of item_ids matching the attribute search criteria
-     *
-     * @param string $search Search term
-     * @param array $definitionIds Attribute definition IDs to search within
-     * @param bool $matchDeleted Whether to match items where deleted flag equals this value
-     * @param string $logic 'AND' or 'OR' for multiple attribute matching
-     * @return array Array of matching item_ids
-     */
-    public function searchByAttributes(string $search, array $definitionIds, bool $matchDeleted = false, string $logic = 'OR'): array
-    {
-        if ($definitionIds === [] || $search === '') {
-            return [];
-        }
-
-        $parsed = $this->parseAttributeSearch($search);
-        $matchingItemIds = [];
-
-        if (!empty($parsed['attributes'])) {
-            $attribute = model(Attribute::class);
-            $allDefinitions = $attribute->get_definitions_by_flags(Attribute::SHOW_IN_ITEMS | Attribute::SHOW_IN_SEARCH, true);
-            $definitionNameToId = [];
-
-            foreach ($allDefinitions as $id => $defInfo) {
-                $name = is_array($defInfo) ? $defInfo['name'] : $defInfo;
-                $definitionNameToId[strtolower($name)] = (int) $id;
-            }
-
-            foreach ($parsed['attributes'] as $attrName => $values) {
-                if (!isset($definitionNameToId[$attrName])) {
-                    continue;
-                }
-
-                $definitionId = $definitionNameToId[$attrName];
-
-                // Skip if this attribute is not in the caller-provided definitionIds filter
-                if (!in_array($definitionId, $definitionIds, true)) {
-                    continue;
-                }
-
-                foreach ($values as $value) {
-                    $builder = $this->db->table('attribute_links');
-                    $builder->select('DISTINCT attribute_links.item_id');
-                    $builder->join('attribute_values', 'attribute_values.attribute_id = attribute_links.attribute_id');
-                    $builder->join('items', 'items.item_id = attribute_links.item_id');
-                    $builder->groupStart();
-                    $builder->like('attribute_values.attribute_value', $value);
-                    $builder->orWhere('attribute_values.attribute_decimal', $value);
-                    $builder->orWhere('attribute_values.attribute_date', $value);
-                    $builder->groupEnd();
-                    $builder->where('attribute_links.definition_id', $definitionId);
-                    $builder->where('attribute_links.sale_id', null);
-                    $builder->where('attribute_links.receiving_id', null);
-                    $builder->where('items.deleted', $matchDeleted);
-
-                    $foundIds = array_column($builder->get()->getResultArray(), 'item_id');
-
-                    if ($logic === 'AND') {
-                        if (empty($matchingItemIds)) {
-                            $matchingItemIds = $foundIds;
-                        } else {
-                            $matchingItemIds = array_intersect($matchingItemIds, $foundIds);
-                        }
-                    } else {
-                        $matchingItemIds = array_unique(array_merge($matchingItemIds, $foundIds));
-                    }
-                }
-            }
-        }
-
-        if (!empty($parsed['terms'])) {
-            $term = implode(' ', $parsed['terms']);
-            $termIds = $this->searchByAttributeValue($term, $definitionIds, $matchDeleted);
-
-            if (empty($matchingItemIds)) {
-                return $termIds;
-            }
-
-            return $logic === 'AND'
-                ? array_values(array_intersect($matchingItemIds, $termIds))
-                : array_values(array_unique(array_merge($matchingItemIds, $termIds)));
-        }
-
-        return $matchingItemIds;
-    }
-
-    /**
-     * Search for items by a single attribute value
-     *
-     * @param string $search Search term
-     * @param array $definitionIds Attribute definition IDs to search within
-     * @param bool $matchDeleted Whether to match items where deleted flag equals this value
-     * @return array Array of matching item_ids
-     */
-    private function searchByAttributeValue(string $search, array $definitionIds, bool $matchDeleted = false): array
-    {
-        $builder = $this->db->table('attribute_links');
-        $builder->select('DISTINCT attribute_links.item_id');
-        $builder->join('attribute_values', 'attribute_values.attribute_id = attribute_links.attribute_id');
-        $builder->join('items', 'items.item_id = attribute_links.item_id');
-        $builder->groupStart();
-        $builder->like('attribute_values.attribute_value', $search);
-        $builder->orWhere('attribute_values.attribute_decimal', $search);
-        $builder->orWhere('attribute_values.attribute_date', $search);
-        $builder->groupEnd();
-        $builder->whereIn('attribute_links.definition_id', $definitionIds);
-        $builder->where('attribute_links.sale_id', null);
-        $builder->where('attribute_links.receiving_id', null);
-        $builder->where('items.deleted', $matchDeleted);
-
-        return array_column($builder->get()->getResultArray(), 'item_id');
-    }
-
-    /**
-     * Get attribute definition ID from column name for sorting
-     *
-     * @param string $sortColumn The sort column name
-     * @return int|null The definition ID or null if not an attribute column
-     */
-    private function getAttributeSortDefinitionId(string $sortColumn): ?int
-    {
-        if (!ctype_digit($sortColumn)) {
-            return null;
-        }
-
-        return (int) $sortColumn;
-    }
-
     /**
      * Perform a search on items
      */
     public function search(string $search, array $filters, ?int $rows = 0, ?int $limit_from = 0, ?string $sort = 'items.name', ?string $order = 'asc', ?bool $count_only = false)
     {
-        $rows = $rows ?? 0;
-        $limit_from = $limit_from ?? 0;
-        $sort = $sort ?? 'items.name';
-        $order = $order ?? 'asc';
-        $count_only = $count_only ?? false;
+        // Set default values
+        if ($rows == null) {
+            $rows = 0;
+        }
+        if ($limit_from == null) {
+            $limit_from = 0;
+        }
+        if ($sort == null) {
+            $sort = 'items.name';
+        }
+        if ($order == null) {
+            $order = 'asc';
+        }
+        if ($count_only == null) {
+            $count_only = false;
+        }
 
         $config = config(OSPOS::class)->settings;
-        $builder = $this->db->table('items AS items');
+        $builder = $this->db->table('items AS items');    // TODO: I'm not sure if it's needed to write items AS items... I think you can just get away with items
 
+        // get_found_rows case
         if ($count_only) {
             $builder->select('COUNT(DISTINCT items.item_id) AS count');
         } else {
@@ -366,33 +212,13 @@ class Item extends Model
             : 'trans_date BETWEEN ' . $this->db->escape(rawurldecode($filters['start_date'])) . ' AND ' . $this->db->escape(rawurldecode($filters['end_date']));
         $builder->where($where);
 
-        $attributesEnabled = count($filters['definition_ids']) > 0;
-        $matchingItemIds = [];
+        $attributes_enabled = count($filters['definition_ids']) > 0;
 
-        if ($search !== '' && $attributesEnabled && $filters['search_custom']) {
-            $matchingItemIds = $this->searchByAttributes($search, $filters['definition_ids'], $filters['is_deleted']);
-        }
-
-        if ($search !== '') {
-            if ($attributesEnabled && $filters['search_custom']) {
-                if (empty($matchingItemIds)) {
-                    $builder->groupStart();
-                    $builder->like('name', $search);
-                    $builder->orLike('item_number', $search);
-                    $builder->orLike('items.item_id', $search);
-                    $builder->orLike('company_name', $search);
-                    $builder->orLike('items.category', $search);
-                    $builder->groupEnd();
-                } else {
-                    $builder->groupStart();
-                    $builder->whereIn('items.item_id', $matchingItemIds);
-                    $builder->orLike('name', $search);
-                    $builder->orLike('item_number', $search);
-                    $builder->orLike('items.item_id', $search);
-                    $builder->orLike('company_name', $search);
-                    $builder->orLike('items.category', $search);
-                    $builder->groupEnd();
-                }
+        if (!empty($search)) {
+            if ($attributes_enabled && $filters['search_custom']) {
+                $builder->havingLike('attribute_values', $search);
+                $builder->orHavingLike('attribute_dtvalues', $search);
+                $builder->orHavingLike('attribute_dvalues', $search);
             } else {
                 $builder->groupStart();
                 $builder->like('name', $search);
@@ -404,43 +230,16 @@ class Item extends Model
             }
         }
 
-        if ($attributesEnabled && !$count_only) {
+        if ($attributes_enabled) {
             $format = $this->db->escape(dateformat_mysql());
             $this->db->simpleQuery('SET SESSION group_concat_max_len=49152');
             $builder->select('GROUP_CONCAT(DISTINCT CONCAT_WS(\'_\', definition_id, attribute_value) ORDER BY definition_id SEPARATOR \'|\') AS attribute_values');
             $builder->select("GROUP_CONCAT(DISTINCT CONCAT_WS('_', definition_id, DATE_FORMAT(attribute_date, $format)) SEPARATOR '|') AS attribute_dtvalues");
             $builder->select('GROUP_CONCAT(DISTINCT CONCAT_WS(\'_\', definition_id, attribute_decimal) SEPARATOR \'|\') AS attribute_dvalues');
-            $sanitizedIds = array_map('intval', $filters['definition_ids']);
-            $builder->join('attribute_links', 'attribute_links.item_id = items.item_id AND attribute_links.receiving_id IS NULL AND attribute_links.sale_id IS NULL AND definition_id IN (' . implode(',', $sanitizedIds) . ')', 'left');
+            $builder->join('attribute_links', 'attribute_links.item_id = items.item_id AND attribute_links.receiving_id IS NULL AND attribute_links.sale_id IS NULL AND definition_id IN (' . implode(',', $filters['definition_ids']) . ')', 'left');
             $builder->join('attribute_values', 'attribute_values.attribute_id = attribute_links.attribute_id', 'left');
         }
 
-        // Handle attribute column sorting
-        $sortDefinitionId = $this->getAttributeSortDefinitionId($sort);
-        if ($sortDefinitionId !== null && $attributesEnabled && !$count_only) {
-            $sortAlias = "sort_attr_{$sortDefinitionId}";
-            $builder->join("attribute_links AS {$sortAlias}", "{$sortAlias}.item_id = items.item_id AND {$sortAlias}.definition_id = {$sortDefinitionId} AND {$sortAlias}.sale_id IS NULL AND {$sortAlias}.receiving_id IS NULL", 'left');
-            $builder->join("attribute_values AS {$sortAlias}_val", "{$sortAlias}_val.attribute_id = {$sortAlias}.attribute_id", 'left');
-            
-            // Determine the correct column to sort by based on attribute type
-            $attribute = model(Attribute::class);
-            $definitionInfo = $attribute->get_definitions_by_flags(Attribute::SHOW_IN_ITEMS, true);
-            $sortColumn = "{$sortAlias}_val.attribute_value"; // default to text
-            
-            if (isset($definitionInfo[$sortDefinitionId])) {
-                $defType = is_array($definitionInfo[$sortDefinitionId]) ? ($definitionInfo[$sortDefinitionId]['type'] ?? TEXT) : TEXT;
-                if ($defType === DECIMAL) {
-                    $sortColumn = "{$sortAlias}_val.attribute_decimal";
-                } elseif ($defType === DATE) {
-                    $sortColumn = "{$sortAlias}_val.attribute_date";
-                }
-            }
-            
-            $builder->orderBy($sortColumn, $order);
-        } else {
-            $builder->orderBy($sort, $order);
-        }
-
         $builder->where('items.deleted', $filters['is_deleted']);
 
         if ($filters['empty_upc']) {
@@ -462,12 +261,17 @@ class Item extends Model
             $builder->whereIn('items.item_type', $non_temp);
         }
 
+        // get_found_rows case
         if ($count_only) {
             return $builder->get()->getRow()->count;
         }
 
+        // Avoid duplicated entries with same name because of inventory reporting multiple changes on the same item in the same date range
         $builder->groupBy('items.item_id');
 
+        // Order by name of item by default
+        $builder->orderBy($sort, $order);
+
         if ($rows > 0) {
             $builder->limit($rows, $limit_from);
         }

app/Models/Receiving.php

@@ -294,9 +294,7 @@ class Receiving extends Model
             lang('Sales.check') => lang('Sales.check'),
             lang('Sales.debit') => lang('Sales.debit'),
             lang('Sales.credit') => lang('Sales.credit'),
-            lang('Sales.due') => lang('Sales.due'),
-            lang('Sales.bank_transfer') => lang('Sales.bank_transfer'),
-            lang('Sales.wallet') => lang('Sales.wallet')
+            lang('Sales.due') => lang('Sales.due')
         ];
     }
 

app/Models/Reports/Summary_sales_taxes.php

@@ -33,16 +33,14 @@ class Summary_sales_taxes extends Summary_report
      * @param object $builder
      * @return void
      */
-    protected function _where(array $inputs, object &$builder): void
+    protected function _where(array $inputs, object &$builder): void    // TODO: hungarian notation
     {
         $builder->where('sales.sale_status', COMPLETED);
 
-        if (empty($this->config['date_or_time_format'])) {
-            $builder->where('DATE(sales.sale_time) >=', $inputs['start_date']);
-            $builder->where('DATE(sales.sale_time) <=', $inputs['end_date']);
+        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 >=', $inputs['start_date']);
-            $builder->where('sales.sale_time <=', $inputs['end_date']);
+            $builder->where('sales.sale_time BETWEEN ' . $this->db->escape(rawurldecode($inputs['start_date'])) . ' AND ' . $this->db->escape(rawurldecode($inputs['end_date'])));
         }
     }
 
@@ -55,11 +53,9 @@ class Summary_sales_taxes extends Summary_report
         $builder = $this->db->table('sales_taxes');
 
         if (empty($this->config['date_or_time_format'])) {
-            $builder->where('DATE(sale_time) >=', $inputs['start_date']);
-            $builder->where('DATE(sale_time) <=', $inputs['end_date']);
+            $builder->where('DATE(sale_time) BETWEEN ' . $inputs['start_date'] . ' AND ' . $inputs['end_date']);
         } else {
-            $builder->where('sale_time >=', $inputs['start_date']);
-            $builder->where('sale_time <=', $inputs['end_date']);
+            $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');

app/Models/Sale.php

@@ -277,14 +277,6 @@ class Sale extends Model
             $builder->like('payment_type', lang('Sales.debit'));
         }
 
-        if ($filters['only_bank_transfer']) {
-            $builder->like('payment_type', lang('Sales.bank_transfer'));
-        }
-
-        if ($filters['only_wallet']) {
-            $builder->like('payment_type', lang('Sales.wallet'));
-        }
-
         $builder->groupBy('payment_type');
 
         $payments = $builder->get()->getResultArray();
@@ -1517,13 +1509,5 @@ class Sale extends Model
         if ($filters['only_check']) {
             $builder->like('payments.payment_type', lang('Sales.check'));
         }
-
-        if ($filters['only_bank_transfer']) {
-            $builder->like('payments.payment_type', lang('Sales.bank_transfer'));
-        }
-
-        if ($filters['only_wallet']) {
-            $builder->like('payments.payment_type', lang('Sales.wallet'));
-        }
     }
 }

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/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,256 +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([
-                        'type'  => 'number',
-                        '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([
-                            'type'  => 'number',
-                            'min'   => '0',
-                            'max'   => '100',
-                            '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([
-                            'type'  => 'number',
-                            '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">
@@ -263,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,138 +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([
-                        'type'  => 'number',
-                        '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([
-                        'type'  => 'number',
-                        '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">
@@ -164,6 +111,7 @@
                     },
                     success: function(response) {
                         $.notify({
+                            icon: 'bi bi-bell-fill',
                             message: response.message
                         }, {
                             type: response.success ? 'success' : 'danger'
@@ -175,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,154 +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([
-                            'type'  => 'tel',
-                            '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([
-                            'type'  => 'tel',
-                            '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">
@@ -169,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,85 +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="#shortcuts_tab" title="<?= lang('Config.shortcuts_configuration') ?>"><?= lang('Config.shortcuts') ?></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="shortcuts_tab">
-        <?= view('configs/shortcuts_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

@@ -23,41 +23,32 @@ $shortcutLabels = [
 ];
 ?>
 
-<?= form_open('config/saveShortcuts', ['id' => 'shortcuts_config_form', 'class' => 'form-horizontal']) ?>
-    <div id="config_wrapper">
-        <div class="row">
-            <fieldset id="config_info">
-                <div class="col-md-8">
-                    <div id="required_fields_message"><?= esc(lang('Common.fields_required_message')) ?></div>
-                    <ul id="shortcuts_error_message_box" class="error_message_box"></ul>
+<?= form_open('config/saveShortcuts', ['id' => 'shortcuts_config_form']) ?>
 
-                    <?php foreach ($shortcutLabels as $name => $label): ?>
-                        <div class="form-group form-group-sm">
-                            <?= form_label($label, 'key_' . $name, ['class' => 'control-label col-xs-3']) ?>
-                            <div class="col-xs-4">
-                                <?php $keyboardShortcutSelectedValue = $keyboardShortcuts[$name]['value'] ?? ''; ?>
-                                <?= form_dropdown(
-                                    'key_' . $name,
-                                    $keyboardShortcutOptions,
-                                    $keyboardShortcutSelectedValue,
-                                    'class="form-control input-sm"'
-                                ) ?>
-                            </div>
-                        </div>
-                    <?php endforeach; ?>
+    <?php
+    $title_info['config_title'] = lang('Config.shortcuts_configuration');
+    echo view('configs/config_header', $title_info);
+    ?>
 
-                    <div class="col-xs-12 clearfix">
-                        <?= form_submit([
-                            'name'  => 'submit_shortcuts',
-                            'id'    => 'submit_shortcuts',
-                            'value' => lang('Common.submit'),
-                            'class' => 'btn btn-primary btn-sm pull-right'
-                        ]) ?>
-                    </div>
+    <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>
-            </fieldset>
-        </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">
@@ -83,6 +74,6 @@ $shortcutLabels = [
             });
         },
 
-        errorLabelContainer: '#shortcuts_error_message_box'
+        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: 17.7em; font-weight: bold;">General Info</p>
-                <p style="min-height: 12.2em; 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>';
-                    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,144 +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([
-                        'type'  => 'number',
-                        'step'  => 'any',
-                        'min'   => '0',
-                        'max'   => '100',
-                        '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([
-                        'type'  => 'number',
-                        'step'  => 'any',
-                        'min'   => '0',
-                        'max'   => '100',
-                        '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">
@@ -176,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/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">