FloatBackOfffice/application/views/member/extra/activities/activity.php

<div class="row trips_containers">
    <div class="col-lg-4">
        <div class="summary-wrapper">
            <div class="sw-header">
                <p class="text-center"><strong>Activity</strong></p>
                <span class="currency">$</span>
                <span class="total-amount"><?=number_format($trip_report['total_amount'], 2)?></span>
                <p class="description">
                    <?php
                        $checkDateRangeExist = ( isset( $start_date ) and !empty( $start_date ) ) and ( isset( $end_date ) and !empty( $end_date ) );
                        if ( $checkDateRangeExist ) {
                            printf( 'Total money spent from %s to %s', $start_date, $end_date );
                        } else {
                            printf( 'Total money spent last %s days', $trip_report['data']['days'] );
                        }
                    ?>
                </p>
            </div>
            <div class="sw-content">
                <?php foreach($trip_report['report'] as $category) { ?>
                    <div class="item-summary <?php echo count($category['items']) > 0 ? 'active' : '' ?>" data-type="<?php echo $category['type'] ?>">
                        <div class="category"><?=$category['type']?></div>
                        <div class="amount">
                            <p class="currency">$</p>
                            <p class="category-total"><?=number_format($category['spent'], 2)?></p>
                            <p class="right-icon"><svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-arrow-right-circle" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                                <path fill-rule="evenodd" d="M7.646 11.354a.5.5 0 0 1 0-.708L10.293 8 7.646 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0z"/>
                                <path fill-rule="evenodd" d="M4.5 8a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5z"/>
                            </svg></p>
                        </div>
                    </div>
                <?php } ?>
            </div>
        </div>
    </div>
    <div class="col-lg-8">
        <p class="transport-category"></p>
        <div class="details-wrapper">
        <table id="transportDetails" style="background-color:aliceblue" class="table table-striped table-hover table-bordered table-condensed">
            <thead class="bg-indigo">
                <tr>
                    <th>Data Source</th>
                    <th>ID</th>
                    <th>Import ID</th>
                    <th>Member ID</th>
                    <th>Amount</th>
                    <th>Currency</th>
                    <th>Description</th>
                    <th>Time</th>
                    <th>Category</th>
                    <th>Provider Category</th>
                    <th>Merchant Name</th>
                </tr>
            </thead>
            <tbody>
                
            </tbody>
        </table>
        </div>
    </div>
</div>

<script type="text/javascript">
    const tripData = JSON.parse('<?php echo json_encode($trip_report) ?>');
    const memberID = (tripData.data || {}).member_id || '';
    $(document).ready(function() {
        $('.item-summary.active').on('click', function(e) {
            const transportType = $(this).data('type');
            const transportData = tripData.report.find(item => item.type === transportType) || {items: []};
            const transportItems = parseTransportDetails(transportData.items);
            const transportItemsHtml = transportItems.map(item => {
                return gernerateDetail(item);
            }).join(' ');

            $('.transport-category').text(transportType);
            $('#transportDetails tbody').html(transportItemsHtml);
        });

        // find and get first category which has data for display on table
        let firstData = null;
        for(let i = 0; i < tripData.report.length; i++) {
            const item = tripData.report[i];
            if (!item || !item.items || !item.items.length) {
                continue;
            }

            firstData = item;
            break;
        }

        if (firstData) {
            const transportItems = parseTransportDetails(firstData.items);
            const transportItemsHtml = transportItems.map(item => {
                return gernerateDetail(item);
            }).join(' ');

            $('.transport-category').text(firstData.type || '');
            $('#transportDetails tbody').html(transportItemsHtml);
        }
        // End find and get first data
    });

    function parseTransportDetails($data) {
        return $data.map(item => {
            return Object.assign({}, item, {
                currency: formatCurrency(item.currency),
            });
        })
    }

    function formatCurrency(currency) {
        return currency.replace(/[0-9]/g, '');
    }

    function gernerateDetail(data) {
        let data_source = '';
        if(data.hasOwnProperty('import_id') && data.import_id){
            data_source = 'Bank';
        }else if(data.hasOwnProperty('trackedemail_item_id') &&  data.trackedemail_item_id){
            data_source = 'Email';
        }
        return `
            <tr>
                <td>${data_source}</td>
                <td>${data.id || ''}</td>
                <td>${data.import_id || ''}</td>
                <td>${data.member_id || memberID || ''}</td>
                <td>${data.cost || ''}</td>
                <td>${data.currency || ''}</td>
                <td>${data.description || ''}</td>
                <td>${data.travel_date || ''}</td>
                <td>${data.category || ''}</td>
                <td>${data.provider_category || ''}</td>
                <td>${data.transport_provider_name || ''}</td>
            </tr>
        `;
    }
</script>