refactor: remove 'No' column from various finance and HR tables to streamline data presentation

resources/js/components/data-table.tsx

@@ -189,20 +189,42 @@ export function DataTable<TData, TValue>({
         300,
     );
 
-    const visibleColumns = isSortable
+    const totalPages = pagination?.last_page ?? 1;
-        ? [
+    const currentPage = pagination?.current_page ?? 1;
-              {
+
-                  id: 'drag',
+    const visibleColumns = [
-                  header: '',
+        {
-                  cell: () => <DragHandleTrigger />,
+            id: 'no',
-                  meta: {
+            header: () => <span className="block text-center">No</span>,
-                      className: 'w-[40px]',
+            cell: ({ row }) => (
-                      headerClassName: 'w-[40px]',
+                <span className="block text-center">
-                  },
+                    {isServerMode
-              } as ColumnDef<TData, TValue>,
+                        ? (currentPage - 1) * (pagination?.per_page ?? 25) +
-              ...columns,
+                          row.index +
-          ]
+                          1
-        : columns;
+                        : row.index + 1}
+                </span>
+            ),
+            meta: {
+                className: 'w-[50px] text-center',
+                headerClassName: 'w-[50px] text-center',
+            },
+        } as ColumnDef<TData, TValue>,
+        ...(isSortable
+            ? [
+                  {
+                      id: 'drag',
+                      header: '',
+                      cell: () => <DragHandleTrigger />,
+                      meta: {
+                          className: 'w-[40px]',
+                          headerClassName: 'w-[40px]',
+                      },
+                  } as ColumnDef<TData, TValue>,
+              ]
+            : []),
+        ...columns,
+    ];
 
     const sensors = useSensors(
         useSensor(PointerSensor, {
@@ -256,9 +278,6 @@ export function DataTable<TData, TValue>({
         }
     }
 
-    const totalPages = pagination?.last_page ?? 1;
-    const currentPage = pagination?.current_page ?? 1;
-
     return (
         <>
             {(searchKey || toolbar || isServerMode) && (

resources/js/pages/admin/finance/cash-account/columns.tsx

@@ -26,17 +26,6 @@ export function createCashAccountColumns(
     const { handleEdit, handleDeleteClick } = params;
 
     return [
-        {
-            id: 'no',
-            header: () => <span className="block text-center">No</span>,
-            cell: ({ row }) => (
-                <span className="block text-center">{row.index + 1}</span>
-            ),
-            meta: {
-                className: 'w-[50px] text-center',
-                headerClassName: 'w-[50px] text-center',
-            },
-        },
         {
             accessorKey: 'name',
             header: () => <span>Nama</span>,

resources/js/pages/admin/finance/cash-account/transaction-columns.tsx

@@ -105,17 +105,6 @@ export function createTransactionColumns(
     const { handleEdit, handleDeleteClick } = params;
 
     return [
-        {
-            id: 'no',
-            header: () => <span className="block text-center">No</span>,
-            cell: ({ row }) => (
-                <span className="block text-center">{row.index + 1}</span>
-            ),
-            meta: {
-                className: 'w-[50px] text-center',
-                headerClassName: 'w-[50px] text-center',
-            },
-        },
         {
             accessorKey: 'created_at',
             header: () => <span>Tanggal</span>,

resources/js/pages/admin/finance/employee-advance/columns.tsx

@@ -100,17 +100,6 @@ export function createEmployeeAdvanceColumns(
     const { handleEdit, handleDeleteClick, handleApprove, handlePay } = params;
 
     return [
-        {
-            id: 'no',
-            header: () => <span className="block text-center">No</span>,
-            cell: ({ row }) => (
-                <span className="block text-center">{row.index + 1}</span>
-            ),
-            meta: {
-                className: 'w-[50px] text-center',
-                headerClassName: 'w-[50px] text-center',
-            },
-        },
         {
             accessorKey: 'created_at',
             header: () => <span>Tanggal</span>,

resources/js/pages/admin/finance/expense/columns.tsx

@@ -78,17 +78,6 @@ export function createExpenseColumns(
     const { handleEdit, handleDeleteClick } = params;
 
     return [
-        {
-            id: 'no',
-            header: () => <span className="block text-center">No</span>,
-            cell: ({ row }) => (
-                <span className="block text-center">{row.index + 1}</span>
-            ),
-            meta: {
-                className: 'w-[50px] text-center',
-                headerClassName: 'w-[50px] text-center',
-            },
-        },
         {
             accessorKey: 'created_at',
             header: () => <span>Tanggal</span>,

resources/js/pages/admin/finance/payroll-period/columns.tsx

@@ -79,17 +79,6 @@ export function createPayrollPeriodColumns(
     const { showUrl, handleClose, handleReopen } = params;
 
     return [
-        {
-            id: 'no',
-            header: () => <span className="block text-center">No</span>,
-            cell: ({ row }) => (
-                <span className="block text-center">{row.index + 1}</span>
-            ),
-            meta: {
-                className: 'w-[50px] text-center',
-                headerClassName: 'w-[50px] text-center',
-            },
-        },
         {
             accessorKey: 'year',
             header: () => <span>Periode</span>,

resources/js/pages/admin/finance/payroll-period/show-columns.tsx

@@ -82,17 +82,6 @@ export function createPayrollColumns(
     } = params;
 
     return [
-        {
-            id: 'no',
-            header: () => <span className="block text-center">No</span>,
-            cell: ({ row }) => (
-                <span className="block text-center">{row.index + 1}</span>
-            ),
-            meta: {
-                className: 'w-[50px] text-center',
-                headerClassName: 'w-[50px] text-center',
-            },
-        },
         {
             id: 'employee_name',
             header: () => <span>Nama Karyawan</span>,

resources/js/pages/admin/hr/employee/columns.tsx

@@ -64,17 +64,6 @@ export function createEmployeeColumns(
     } = params;
 
     return [
-        {
-            id: 'no',
-            header: () => <span className="block text-center">No</span>,
-            cell: ({ row }) => (
-                <span className="block text-center">{row.index + 1}</span>
-            ),
-            meta: {
-                className: 'w-[50px] text-center',
-                headerClassName: 'w-[50px] text-center',
-            },
-        },
         {
             accessorKey: 'user_profile.full_name',
             id: 'full_name',

resources/js/pages/admin/hr/leave-request/columns.tsx

@@ -78,17 +78,6 @@ export function createLeaveRequestColumns(
         params;
 
     return [
-        {
-            id: 'no',
-            header: () => <span className="block text-center">No</span>,
-            cell: ({ row }) => (
-                <span className="block text-center">{row.index + 1}</span>
-            ),
-            meta: {
-                className: 'w-[50px] text-center',
-                headerClassName: 'w-[50px] text-center',
-            },
-        },
         {
             id: 'employee_name',
             header: () => <span>Oleh</span>,

resources/js/pages/admin/master/category/columns.tsx

@@ -24,17 +24,6 @@ export function createCategoryColumns(
     const { handleEdit, handleDeleteClick } = params;
 
     return [
-        {
-            id: 'no',
-            header: () => <span className="block text-center">No</span>,
-            cell: ({ row }) => (
-                <span className="block text-center">{row.index + 1}</span>
-            ),
-            meta: {
-                className: 'w-[50px] text-center',
-                headerClassName: 'w-[50px] text-center',
-            },
-        },
         {
             accessorKey: 'name',
             header: () => <span>Nama</span>,

resources/js/pages/admin/master/customer/columns.tsx

@@ -26,17 +26,6 @@ export function createCustomerColumns(
     const { handleEdit, handleDeleteClick } = params;
 
     return [
-        {
-            id: 'no',
-            header: () => <span className="block text-center">No</span>,
-            cell: ({ row }) => (
-                <span className="block text-center">{row.index + 1}</span>
-            ),
-            meta: {
-                className: 'w-[50px] text-center',
-                headerClassName: 'w-[50px] text-center',
-            },
-        },
         {
             accessorKey: 'name',
             header: () => <span>Nama</span>,

resources/js/pages/admin/master/product/columns.tsx

@@ -143,17 +143,6 @@ export function createProductColumns(
                 headerClassName: 'hidden',
             },
         },
-        {
-            id: 'no',
-            header: () => <span className="block text-center">No</span>,
-            cell: ({ row }) => (
-                <span className="block text-center">{row.index + 1}</span>
-            ),
-            meta: {
-                className: 'w-[50px] text-center',
-                headerClassName: 'w-[50px] text-center',
-            },
-        },
         {
             accessorKey: 'name',
             header: () => <span>Nama Produk</span>,

resources/js/pages/admin/master/supplier/columns.tsx

@@ -26,17 +26,6 @@ export function createSupplierColumns(
     const { handleEdit, handleDeleteClick } = params;
 
     return [
-        {
-            id: 'no',
-            header: () => <span className="block text-center">No</span>,
-            cell: ({ row }) => (
-                <span className="block text-center">{row.index + 1}</span>
-            ),
-            meta: {
-                className: 'w-[50px] text-center',
-                headerClassName: 'w-[50px] text-center',
-            },
-        },
         {
             accessorKey: 'name',
             header: () => <span>Nama</span>,

resources/js/pages/admin/roles/columns.tsx

@@ -25,17 +25,6 @@ export function createRoleColumns(
     const { handleEdit, handleDeleteClick } = params;
 
     return [
-        {
-            id: 'no',
-            header: () => <span className="block text-center">No</span>,
-            cell: ({ row }) => (
-                <span className="block text-center">{row.index + 1}</span>
-            ),
-            meta: {
-                className: 'w-[50px] text-center',
-                headerClassName: 'w-[50px] text-center',
-            },
-        },
         {
             accessorKey: 'name',
             header: () => <span>Nama Role</span>,