opensourcepos/app/Views/items/manage.php

<?php
/**
 * @var string $controller_name
 * @var string $table_headers
 * @var array $filters
 * @var array $stock_locations
 * @var int $stock_location
 * @var array $config
 * @var string|null $start_date
 * @var string|null $end_date
 * @var array $selected_filters
 */

use App\Models\Employee;
?>

<?= view('partial/header') ?>

<?php
$title_info['config_title'] = 'Items';
echo view('configs/config_header', $title_info);
?>

<script type="text/javascript">
    $(document).ready(function() {
        $('#generate_barcodes').click(function() {
            window.open(
                'index.php/items/generateBarcodes/' + table_support.selected_ids().join(':'),
                '_blank'
            );
        });

        // Load the preset daterange picker
        <?= view('partial/daterangepicker') ?>
        // Set the beginning of time as starting date
        $('#daterangepicker').data('daterangepicker').setStartDate("<?= date($config['dateformat'], mktime(0, 0, 0, 01, 01, 2010)) ?>");
        // Update the hidden inputs with the selected dates before submitting the search data
        var start_date = "<?= date('Y-m-d', mktime(0, 0, 0, 01, 01, 2010)) ?>";

        // Override dates from server if provided
        <?php if (isset($start_date) && $start_date): ?>
        start_date = "<?= esc($start_date) ?>";
        <?php endif; ?>
        <?php if (isset($end_date) && $end_date): ?>
        end_date = "<?= esc($end_date) ?>";
        <?php endif; ?>

        <?php
        echo view('partial/bootstrap_tables_locale');
        $employee = model(Employee::class);
        ?>

        table_support.init({
            employee_id: <?= $employee->get_logged_in_employee_info()->person_id ?>,
            resource: '<?= esc($controller_name) ?>',
            headers: <?= $table_headers ?>,
            pageSize: <?= $config['lines_per_page'] ?>,
            uniqueId: 'items.item_id',
            queryParams: function() {
                return $.extend(arguments[0], {
                    "start_date": start_date,
                    "end_date": end_date,
                    "stock_location": $("#stock_location").val(),
                    "filters": $("#filters").val()
                });
            },
            onLoadSuccess: function(response) {
                $('a.rollover').imgPreview({
                    imgCSS: {
                        width: 200
                    },
                    distanceFromCursor: {
                        top: 10,
                        left: -210
                    }
                })
            }
        });
    });
</script>

<?= view('partial/table_filter_persistence', ['additional_params' => ['stock_location']]) ?>

<div class="d-flex gap-2 justify-content-end">
    <button type="button" class="btn btn-primary modal-launch" data-btn-new="<?= lang('Common.new') ?>" data-btn-submit="<?= lang('Common.submit') ?>" data-href="<?= "$controller_name/view" ?>" title="<?= lang(ucfirst($controller_name) . '.new') ?>">
        <i class="bi bi-tag me-2"></i><?= lang(ucfirst($controller_name) . '.new') ?>
    </button>
    <button type="button" class="btn btn-primary modal-launch" data-btn-submit="<?= lang('Common.submit') ?>" data-href="<?= "$controller_name/csvImport" ?>" title="<?= lang('Items.import_items_csv') ?>">
        <i class="bi bi-file-earmark-arrow-down me-2"></i><?= lang('Common.import_csv') ?>
    </button>
</div>

<div id="toolbar">
    <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-md-inline ms-2"><?= lang('Common.delete') ?></span>
        </button>

        <button type="button" class="btn btn-secondary modal-launch d-print-none" id="bulk_edit" data-btn-submit="<?= lang('Common.submit') ?>" data-href="<?= "items/bulkEdit" ?>" title="<?= lang('Items.edit_multiple_items') ?>">
            <i class="bi bi-pencil-square"></i><span class="d-none d-md-inline ms-2"><?= lang('Items.bulk_edit') ?></span>
        </button>

        <button type="button" class="btn btn-secondary d-print-none" id="generate_barcodes" data-href="<?= "$controller_name/generateBarcodes" ?>" title="<?= lang('Items.generate_barcodes') ?>">
            <i class="bi bi-upc-scan"></i><span class="d-none d-md-inline ms-2"><?= lang('Items.generate_barcodes') ?></span>
        </button>

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

        <?php if (count($stock_locations) > 1): ?>
            <div class="input-group w-auto">
                <span class="input-group-text" id="stock_location-icon"><i class="bi bi-boxes"></i></span>
                <select class="form-select" name="stock_location" id="stock_location" aria-describedby="stock_location-icon" multiple>
                    <?php foreach ($stock_locations as $value => $label): ?>
                        <option value="<?= $value ?>" <?= $value == $stock_location ? 'selected' : '' ?>>
                            <?= $label ?>
                        </option>
                    <?php endforeach; ?>
                </select>
            </div>
        <?php endif; ?>
    </div>
</div>

<div id="table_holder">
    <table id="table"></table>
</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');
        }
    });

    new TomSelect('#stock_location', {
        plugins: ['checkbox_options', 'remove_button'],
        placeholder: '<?= lang('Common.none_selected_text') ?>',
        hidePlaceholder: true,
        closeAfterSelect: false,
        onChange: function() {
            $('#table').bootstrapTable('refresh');
        }
    });
</script>