feat: add logs page with filtering and data table

- Implemented a new logs page with filters for level, source, and date range.
- Added a data table to display logs with pagination and sorting capabilities.
- Created backend functionality to fetch logs data based on filters.
- Introduced a new Logs class for handling log data operations.
- Added a new database migration for the logs table.
- Enhanced UI with custom checkbox styles for better user experience.
- Updated navigation to include a link to the logs page.

templates/campaigns/main_view.php

@@ -44,7 +44,7 @@
     <table class="table" id="products">
       <thead>
         <tr>
-          <th style="width: 30px; text-align: center;"><input type="checkbox" id="select_all_history"></th>
+          <th style="width: 30px; text-align: center;" data-orderable="false" data-dt-order="disable"><input type="checkbox" id="select_all_history"></th>
           <th>Data</th>
           <th>ROAS (30 dni)</th>
           <th>ROAS (all time)</th>
@@ -61,11 +61,80 @@
   </div>
 </div>
 
+<style type="text/css">
+.campaigns-page input.ads-pretty-checkbox {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  border: 1.5px solid #B8C5D6;
+  border-radius: 4px;
+  background: #FFFFFF;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s ease;
+  position: relative;
+  vertical-align: middle;
+}
+
+.campaigns-page input.ads-pretty-checkbox:hover {
+  border-color: #6690F4;
+  box-shadow: 0 0 0 3px rgba(102, 144, 244, 0.16);
+}
+
+.campaigns-page input.ads-pretty-checkbox:checked {
+  background: #6690F4;
+  border-color: #6690F4;
+}
+
+.campaigns-page input.ads-pretty-checkbox:checked::after {
+  content: '';
+  width: 8px;
+  height: 4px;
+  border: 2px solid #FFFFFF;
+  border-top: 0;
+  border-right: 0;
+  transform: rotate(-45deg) translate(1px, -1px);
+}
+
+.campaigns-page input.ads-pretty-checkbox:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(102, 144, 244, 0.26);
+}
+
+.campaigns-page #products thead th:first-child {
+  text-align: center;
+}
+</style>
+
 <script type="text/javascript">
 var STORAGE_CLIENT_KEY = 'campaigns.last_client_id';
 var STORAGE_CAMPAIGN_KEY = 'campaigns.last_campaign_id';
 var restore_campaign_after_client_load = '';
 
+if ( typeof $.fn.adsPrettyCheckbox === 'undefined' )
+{
+  $.fn.adsPrettyCheckbox = function()
+  {
+    return this.each( function()
+    {
+      var input = $( this );
+      if ( !input.is( 'input[type="checkbox"]' ) )
+        return;
+
+      input.addClass( 'ads-pretty-checkbox' );
+    });
+  };
+}
+
+function initPrettyCheckboxes( context )
+{
+  var root = context ? $( context ) : $( document );
+  root.find( 'input[type="checkbox"]' ).adsPrettyCheckbox();
+}
+
 function storage_set( key, value )
 {
   try
@@ -105,6 +174,7 @@ function rebuildCampaignDropdown()
     menu.append( item );
   });
 
+  initPrettyCheckboxes( menu );
   updateCheckboxState();
   updateDropdownDisplay();
 }
@@ -235,6 +305,8 @@ function reloadChart()
 
 $( function()
 {
+  initPrettyCheckboxes( '.campaigns-page' );
+
   $( 'body' ).on( 'click', '#campaign_dropdown_trigger', function( e )
   {
     e.stopPropagation();
@@ -494,14 +566,14 @@ $( function()
         pageLength: 15,
         columns: [
           { width: '30px', orderable: false, className: 'dt-center', searchable: false },
-          { width: '130px', name: 'date', orderable: false, className: "nowrap" },
-          { width: '120px', name: 'roas30', orderable: false, className: "dt-type-numeric" },
-          { width: '120px', name: 'roas_all_time', orderable: false, className: "dt-type-numeric" },
-          { width: '180px', name: 'conversion_value', orderable: false, className: "dt-type-numeric" },
-          { width: '140px', name: 'spend30', orderable: false, className: "dt-type-numeric" },
-          { width: 'auto', name: 'comment', orderable: false },
-          { width: 'auto', name: 'bidding_strategy', orderable: false },
-          { width: '100px', name: 'budget', orderable: false, className: "dt-type-numeric" },
+          { width: '130px', name: 'date', orderable: true, className: "nowrap" },
+          { width: '120px', name: 'roas30', orderable: true, className: "dt-type-numeric" },
+          { width: '120px', name: 'roas_all_time', orderable: true, className: "dt-type-numeric" },
+          { width: '180px', name: 'conversion_value', orderable: true, className: "dt-type-numeric" },
+          { width: '140px', name: 'spend30', orderable: true, className: "dt-type-numeric" },
+          { width: 'auto', name: 'comment', orderable: true },
+          { width: 'auto', name: 'bidding_strategy', orderable: true },
+          { width: '100px', name: 'budget', orderable: true, className: "dt-type-numeric" },
           { width: '60px', name: 'actions', orderable: false, className: "dt-center" }
         ],
         language: {
@@ -554,6 +626,7 @@ $( function()
 
   $( 'body' ).on( 'draw.dt', '#products', function()
   {
+    initPrettyCheckboxes( '#products' );
     $( '#select_all_history' ).prop( 'checked', false );
     updateHistoryBulkActions();
   });