Dashboard final version, TODO: update main sidebar menu

resources/js/Components/DataTable/DataTableNew.vue

@@ -690,6 +690,11 @@ function exportToXLSX(data) {
           :from="from"
           :to="to"
           :total="total"
+          :current-page="meta.current_page"
+          :last-page="meta.last_page"
+          :per-page="meta.per_page"
+          :page-param="pageParamName"
+          :per-page-param="'per_page'"<!-- legacy component may not have custom per-page name prop -->
         />
       </template>
 

resources/js/Components/DataTable/DataTableNew2.vue

@@ -275,10 +275,10 @@ const pagination = computed(() => {
     const urlParams = new URLSearchParams(window.location.search);
     const perPageParam = props.perPageParamName || "per_page";
     const urlPerPage = urlParams.get(perPageParam);
-    const pageSize = urlPerPage 
-      ? Number(urlPerPage) 
-      : (props.meta?.per_page ?? props.pageSize);
-    
+    const pageSize = urlPerPage
+      ? Number(urlPerPage)
+      : props.meta?.per_page ?? props.pageSize;
+
     return {
       pageIndex: (props.meta?.current_page ?? 1) - 1,
       pageSize: pageSize,
@@ -470,7 +470,7 @@ function keyOf(row) {
       :per-page="pagination.pageSize"
       :page-size-options="pageSizeOptions"
       @update:per-page="(value) => table.setPageSize(value)"
-      class="px-4 py-2 border-t"
+      class="p-2 border-t"
     >
       <template #filters="slotProps">
         <slot name="toolbar-filters" v-bind="slotProps" />
@@ -492,13 +492,14 @@ function keyOf(row) {
               v-for="header in headerGroup.headers"
               :key="header.id"
               :class="[
-                'py-4',
+                'p-3',
                 header.column.columnDef.meta?.class,
                 header.column.columnDef.meta?.align === 'right'
                   ? 'text-right'
                   : header.column.columnDef.meta?.align === 'center'
                   ? 'text-center'
                   : 'text-left',
+                'bg-muted/50',
               ]"
             >
               <FlexRender
@@ -557,6 +558,7 @@ function keyOf(row) {
                     : cell.column.columnDef.meta?.align === 'center'
                     ? 'text-center'
                     : 'text-left',
+                  'p-3',
                 ]"
               >
                 <!-- Use slot if provided -->
@@ -581,7 +583,7 @@ function keyOf(row) {
     </div>
 
     <!-- Pagination -->
-    <div v-if="showPagination">
+    <div v-if="showPagination" class="border-t border-gray-200 p-4">
       <!-- Server-side pagination -->
       <template v-if="isServerSide && meta?.links">
         <Pagination
@@ -589,6 +591,11 @@ function keyOf(row) {
           :from="meta.from"
           :to="meta.to"
           :total="meta.total"
+          :current-page="meta.current_page"
+          :last-page="meta.last_page"
+          :per-page="meta.per_page"
+          :page-param="pageParamName"
+          :per-page-param="perPageParamName"
         />
       </template>