diff --git a/DataTables/CardboardOdnerDataTable.php b/DataTables/CardboardOdnerDataTable.php
new file mode 100644
index 0000000..d69e5c7
--- /dev/null
+++ b/DataTables/CardboardOdnerDataTable.php
@@ -0,0 +1,125 @@
+<?php
+
+    namespace Modules\Cetaklabel\DataTables;
+
+    use Illuminate\Database\Eloquent\Builder as QueryBuilder;
+    use Modules\Cetaklabel\Entities\Document;
+    use Modules\Cetaklabel\Entities\DocumentDetail;
+    use Yajra\DataTables\EloquentDataTable;
+    use Yajra\DataTables\Html\Builder as HtmlBuilder;
+    use Yajra\DataTables\Html\Column;
+    use Yajra\DataTables\Services\DataTable;
+
+    class CardboardOdnerDataTable extends DataTable
+    {
+        /**
+         * Build the DataTable class.
+         *
+         * @param QueryBuilder $query Results from query() method.
+         */
+        public function dataTable(QueryBuilder $query)
+        : EloquentDataTable
+        {
+            $query = $query->with(['directorat', 'sub_directorat', 'job', 'job.sub_job', 'job.sub_job.sub_sub_job']);
+
+            return (new EloquentDataTable($query))
+                ->filter(function ($query) {
+                    if (request()->has('search')) {
+                        $search = request()->get('search');
+                    }
+                })
+                ->addColumn('jumlah_halaman', function($model){
+                    $jumlah_halaman = DocumentDetail::where('document_id', $model->id)->sum('jumlah_halaman');
+
+                    return $jumlah_halaman;
+                })
+                ->addColumn('directorat', function ($model) {
+                    return $model->directorat->kode . ' - ' . $model->directorat->name;
+                })
+                ->addColumn('sub_directorat', function ($model) {
+                    return $model->sub_directorat->kode . ' - ' . $model->sub_directorat->name;
+                })
+                ->addColumn('job', function ($model) {
+                    return $model->job->kode . ' - ' . $model->job->name;
+                })
+                ->addColumn('sub_job', function ($model) {
+                    return $model->sub_job->kode . ' - ' . $model->sub_job->name;
+                })
+                ->addColumn('sub_sub_job', function ($model) {
+                    return $model->sub_sub_job->kode . ' - ' . $model->sub_sub_job->name;
+                })
+                ->addIndexColumn()
+                ->addColumn('checkbox', function ($item) {
+                    return '<div class="form-check form-check-sm form-check-custom form-check-solid">
+                                    <input class="form-check-input" name="checkbox[]" type="checkbox" value="' . $item->id . '" />
+                                </div>';
+                })
+                ->addColumn('action', 'cetaklabel::app.cardboard-detail._action')
+                ->rawColumns(['checkbox', 'action'])
+                ->setRowId('id');
+        }
+
+        /**
+         * Get the query source of dataTable.
+         */
+        public function query(Document $model)
+        : QueryBuilder
+        {
+            return $model->newQuery();
+        }
+
+        /**
+         * Optional method if you want to use the html builder.
+         */
+        public function html()
+        : HtmlBuilder
+        {
+            return $this->builder()
+                ->setTableId('cardboard-odner-table')
+                ->columns($this->getColumns())
+                ->minifiedAjax()
+                ->stateSave(false)
+                ->responsive()
+                ->autoWidth(true)
+                ->orderBy(1)
+                ->parameters([
+                    'scrollX'      => false,
+                    'drawCallback' => 'function() { KTMenu.createInstances(); }',
+                ])
+                ->addTableClass('align-middle table-row-dashed fs-6 gy-5');
+        }
+
+        /**
+         * Get the dataTable columns definition.
+         */
+        public function getColumns()
+        : array
+        {
+            return [
+                Column::make('checkbox')->title('')->orderable(false)->searchable(false)->printable(false)->exportable(false)->width(10),
+                Column::make('DT_RowIndex')->title('No')->orderable(false)->searchable(false),
+                Column::make('kode_odner')->title('Kode Odner'),
+                Column::make('directorat')->title('Direktorat'),
+                Column::make('sub_directorat')->title('Sub Direktorat'),
+                Column::make('job')->title('Jenis Pekerjaan'),
+                Column::make('sub_job')->title('Sub Jenis Pekerjaan'),
+                Column::make('sub_sub_job')->title('Sub Sub Jenis Pekerjaan'),
+                Column::make('jumlah_halaman')->title('Jumlah Halaman'),
+                Column::make('sequence_odner')->title('Sequence'),
+                Column::computed('action')
+                    ->exportable(false)
+                    ->printable(false)
+                    ->width(60)
+                    ->addClass('text-center'),
+            ];
+        }
+
+        /**
+         * Get the filename for export.
+         */
+        protected function filename()
+        : string
+        {
+            return 'Cardboard_' . date('YmdHis');
+        }
+    }
diff --git a/Resources/views/app/cardboard-detail/_list.blade.php b/Resources/views/app/cardboard-detail/_list.blade.php
new file mode 100644
index 0000000..8b75172
--- /dev/null
+++ b/Resources/views/app/cardboard-detail/_list.blade.php
@@ -0,0 +1,98 @@
+<!--begin::Table-->
+{{ $dataTable->table() }}
+<!--end::Table-->
+
+{{-- Inject Scripts --}}
+@section('scripts')
+    {{ $dataTable->scripts() }}
+@endsection
+
+@push('customscript')
+    @php
+        $route = explode('.', Route::currentRouteName());
+    @endphp
+
+    <script>
+        $("#searchbox").on("keyup search input paste cut", function () {
+            LaravelDataTables["cardboard-odner-table"].search(this.value).draw();
+        });
+
+        $(function () {
+            const documentTitle = '{{ ucfirst($route[0]) }} Report';
+            var buttons = new $.fn.dataTable.Buttons(LaravelDataTables["cardboard-odner-table"], {
+                buttons: [
+                    {
+                        extend: 'copyHtml5',
+                        title: documentTitle
+                    },
+                    {
+                        extend: 'excelHtml5',
+                        title: documentTitle
+                    },
+                    {
+                        extend: 'csvHtml5',
+                        title: documentTitle
+                    },
+                    {
+                        extend: 'pdfHtml5',
+                        title: documentTitle
+                    },
+                    {
+                        extend: 'print',
+                        title: documentTitle
+                    }
+                ]
+            }).container().appendTo($('#kt_datatable_example_buttons'));
+
+            // Hook dropdown menu click event to datatable export buttons
+            const exportButtons = document.querySelectorAll('#kt_datatable_example_export_menu [data-kt-export]');
+            exportButtons.forEach(exportButton => {
+                exportButton.addEventListener('click', e => {
+                    e.preventDefault();
+                    console.log(e.target.getAttribute('data-kt-export'));
+                    // Get clicked export value
+                    const exportValue = e.target.getAttribute('data-kt-export');
+                    const target = document.querySelector('.dt-buttons .buttons-' + exportValue);
+
+                    // Trigger click event on hidden datatable export buttons
+                    target.click();
+                });
+            });
+
+            LaravelDataTables["cardboard-odner-table"].on('click', '.delete', function (event) {
+                var form = $(this).closest("form");
+                event.preventDefault();
+                Swal.fire({
+                    title: 'Are you sure?',
+                    text: "You won't be able to revert this!",
+                    icon: 'warning',
+                    showCancelButton: true,
+                    confirmButtonColor: '#3085d6',
+                    cancelButtonColor: '#d33',
+                    confirmButtonText: 'Yes, delete it!'
+                }).then((result) => {
+                    if (result.isConfirmed) {
+                        $.ajax({
+                            type: "POST",
+                            url: form.attr('action'),
+                            data: form.serialize(), // serializes the form's elements.
+                            success: function (data) {
+                                toastr.success('{{ucfirst($route[0])}} has been deleted.', 'Success!', {timeOut: 5000});
+                                LaravelDataTables["{{$route[0]}}-table"].ajax.reload();
+                            }
+                        });
+
+                    }
+                })
+            })
+        })
+    </script>
+@endpush
+
+@section('styles')
+    <style>
+        .dataTables_filter {
+            display: none;
+        }
+    </style>
+@endsection
diff --git a/Resources/views/app/cardboard-detail/odner.blade.php b/Resources/views/app/cardboard-detail/odner.blade.php
new file mode 100644
index 0000000..f4faa4f
--- /dev/null
+++ b/Resources/views/app/cardboard-detail/odner.blade.php
@@ -0,0 +1,91 @@
+<x-default-layout>
+    <!--begin::Card-->
+    <div class="card card-xxl-stretch mb-5 mb-xl-8">
+        <!--begin::Card body-->
+        <div class="card-header border-0 pt-5">
+            <div class="card-title align-items-start flex-column">
+                <div class="d-flex align-items-center position-relative my-1">
+                    <!--begin::Svg Icon | path: icons/duotune/general/gen021.svg-->
+                    <span class="svg-icon svg-icon-1 position-absolute ms-6">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                            <rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546" height="2" rx="1"
+                                  transform="rotate(45 17.0365 15.1223)" fill="currentColor"></rect>
+                            <path
+                                d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z"
+                                fill="currentColor"></path>
+                        </svg>
+                    </span>
+                    <!--end::Svg Icon-->
+                    <input type="text" id="searchbox"
+                           class="form-control form-control-solid border border-gray-300 w-250px ps-15"
+                           placeholder="Search Cardboard">
+                </div>
+
+                <!--begin::Export buttons-->
+                <div id="kt_datatable_example_1_export" class="d-none"></div>
+                <!--end::Export buttons-->
+
+            </div>
+
+            <div class="card-toolbar">
+
+                <!--begin::Export dropdown-->
+                <button type="button" class="btn btn-light-primary" data-kt-menu-trigger="click"
+                        data-kt-menu-placement="bottom-end">
+                    <i class="ki-duotone ki-exit-down fs-2"><span class="path1"></span><span class="path2"></span></i>
+                    Export Report
+                </button>
+                <!--begin::Menu-->
+                <div id="kt_datatable_example_export_menu"
+                     class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-200px py-4"
+                     data-kt-menu="true">
+                    <!--begin::Menu item-->
+                    <div class="menu-item px-3">
+                        <a href="#" class="menu-link px-3" data-kt-export="copy">
+                            Copy to clipboard
+                        </a>
+                    </div>
+                    <!--end::Menu item-->
+                    <!--begin::Menu item-->
+                    <div class="menu-item px-3">
+                        <a href="#" class="menu-link px-3" data-kt-export="excel">
+                            Export as Excel
+                        </a>
+                    </div>
+                    <!--end::Menu item-->
+                    <!--begin::Menu item-->
+                    <div class="menu-item px-3">
+                        <a href="#" class="menu-link px-3" data-kt-export="csv">
+                            Export as CSV
+                        </a>
+                    </div>
+                    <!--end::Menu item-->
+                    <!--begin::Menu item-->
+                    <div class="menu-item px-3">
+                        <a href="#" class="menu-link px-3" data-kt-export="pdf">
+                            Export as PDF
+                        </a>
+                    </div>
+                    <!--end::Menu item-->
+                    <!--begin::Menu item-->
+                    <div class="menu-item px-3">
+                        <a href="#" class="menu-link px-3" data-kt-export="print">
+                            Print
+                        </a>
+                    </div>
+                    <!--end::Menu item-->
+                </div>
+
+                <!--begin::Hide default export buttons-->
+                <div id="kt_datatable_example_buttons" class="d-none"></div>
+                <!--end::Hide default export buttons-->
+
+            </div>
+        </div>
+        <div class="card-body pt-6">
+            @include('cetaklabel::app.cardboard-detail._list')
+        </div>
+        <!--end::Card body-->
+    </div>
+    <!--end::Card-->
+</x-default-layout>