feat: Implement invoice creation functionality and integrate DataTables for invoice listing with dynamic column rendering.

resources/views/administrator/components/data-table.blade.php

@@ -1,14 +1,21 @@
 @php
-  $dtColumns = collect($columns)->map(function ($c) {
+  $dtColumns = collect($columns)->map(function ($c, $index) {
       return [
           'data' => $c['key'],
           'name' => $c['key'],
           'orderable' => $c['orderable'] ?? true,
           'searchable' => $c['searchable'] ?? true,
+          'visible' => $c['visible'] ?? true,
       ];
   })->values();
 @endphp
 
+<div class="d-flex justify-content-end align-items-center mb-3">
+  <button class="btn btn-outline-secondary btn-sm" type="button" data-bs-toggle="offcanvas" data-bs-target="#{{ $id }}-column-offcanvas">
+    <i class="ti ti-columns"></i> Columns
+  </button>
+</div>
+
 <div class="table-responsive">
   <table id="{{ $id }}" class="table table-striped w-100">
     <thead>
@@ -21,15 +28,41 @@
   </table>
 </div>
 
+<div class="offcanvas offcanvas-end" tabindex="-1" id="{{ $id }}-column-offcanvas">
+  <div class="offcanvas-header">
+    <h5 class="offcanvas-title">Column Visibility</h5>
+    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
+  </div>
+  <div class="offcanvas-body">
+    @foreach($columns as $index => $col)
+      @if((!isset($col['visibility']) || $col['visibility'] !== false) && $col['key'] !== 'checkbox')
+        <div class="form-check form-switch mb-2">
+          <input type="checkbox" class="form-check-input column-toggle" 
+                 data-column-index="{{ $index }}" 
+                 id="{{ $id }}-col-{{ $index }}"
+                 {{ !isset($col['visible']) || $col['visible'] !== false ? 'checked' : '' }}>
+          <label class="form-check-label" for="{{ $id }}-col-{{ $index }}">{!! $col['label'] !!}</label>
+        </div>
+      @endif
+    @endforeach
+  </div>
+</div>
+
 @push('custom-scripts')
 <script>
 document.addEventListener('DOMContentLoaded', function () {
-  $('#{{ $id }}').DataTable({
+  var table = $('#{{ $id }}').DataTable({
     processing: true,
     serverSide: true,
     ajax: '{{ $ajax }}',
     columns: @json($dtColumns),
   });
+
+  $('#{{ $id }}-column-offcanvas').on('change', '.column-toggle', function () {
+    var columnIdx = $(this).data('column-index');
+    var column = table.column(columnIdx);
+    column.visible($(this).is(':checked'));
+  });
 });
 </script>
 @endpush