refactor(FE-316,317): Extract Uniformity table columns to constant

src/components/pages/uniformity/UniformityTable.tsx

@@ -3,7 +3,7 @@
 import React, { useCallback, useState, useEffect } from 'react';
 import useSWR from 'swr';
 import { Icon } from '@iconify/react';
-import { SortingState, CellContext } from '@tanstack/react-table';
+import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
 import { cn } from '@/lib/helper';
 import Button from '@/components/Button';
 import UniformityChart from '@/components/pages/uniformity/UniformityChart';
@@ -168,6 +168,142 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
     }
   };
 
+  // ===== TABLE COLUMNS DEFINITION =====
+  const uniformityColumns: ColumnDef<Uniformity>[] = [
+    {
+      id: 'select',
+      header: ({ table }) => {
+        const allRows = table.getRowModel().rows;
+        const selectableRows = allRows.filter((row) => {
+          const uniformity = row.original;
+          return !isUniformityLocked(uniformity);
+        });
+
+        const hasNoSelectableRows = selectableRows.length === 0;
+
+        const handleSelectAll = () => {
+          const isAllSelected = selectableRows.every((row) =>
+            row.getIsSelected()
+          );
+
+          selectableRows.forEach((row) => {
+            row.toggleSelected(!isAllSelected);
+          });
+        };
+
+        const isAllSelected =
+          selectableRows.length > 0 &&
+          selectableRows.every((row) => row.getIsSelected());
+
+        const isSomeSelected = selectableRows.some((row) =>
+          row.getIsSelected()
+        );
+
+        return (
+          <div className='w-full flex flex-row justify-center'>
+            <CheckboxInput
+              name='allRow'
+              checked={isAllSelected}
+              indeterminate={isSomeSelected && !isAllSelected}
+              onChange={handleSelectAll}
+              disabled={hasNoSelectableRows}
+            />
+          </div>
+        );
+      },
+      cell: ({ row }) => {
+        const uniformity = row.original;
+        const isDisabled = isUniformityLocked(uniformity);
+
+        return (
+          <div className={cn({ 'opacity-50': isDisabled })}>
+            <CheckboxInput
+              name='row'
+              checked={row.getIsSelected()}
+              indeterminate={row.getIsSomeSelected()}
+              onChange={row.getToggleSelectedHandler()}
+              disabled={isDisabled}
+            />
+          </div>
+        );
+      },
+    },
+    {
+      header: 'Lokasi',
+      cell: (props) => props.row.original.location.name || '-',
+    },
+    {
+      header: 'Flock',
+      cell: (props) => `Flock ${props.row.original.project_flock_kandang_id}`,
+    },
+    {
+      header: 'Kandang',
+      cell: (props) => props.row.original.kandang.name || '-',
+    },
+    {
+      header: 'Tanggal (Week)',
+      cell: (props) => `Week ${props.row.original.week}`,
+    },
+    {
+      header: 'Status',
+      cell: (props) => {
+        const status = props.row.original.status;
+        return (
+          <Badge variant='soft' color={getStatusColor(status)}>
+            {getStatusText(status)}
+          </Badge>
+        );
+      },
+    },
+    {
+      header: 'Uniformity',
+      cell: (props) => {
+        const uniformity = props.row.original.uniformity;
+        return <span>{uniformity}%</span>;
+      },
+    },
+    {
+      header: 'Aksi',
+      cell: (props: CellContext<Uniformity, unknown>) => {
+        const currentPageSize = props.table.getPaginationRowModel().rows.length;
+        const currentPageRows = props.table.getPaginationRowModel().flatRows;
+        const currentRowRelativeIndex =
+          currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
+
+        const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
+
+        const deleteClickHandler = () => {
+          setSelectedUniformity(props.row.original);
+          singleDeleteModal.openModal();
+        };
+
+        return (
+          <>
+            {currentPageSize > 2 && (
+              <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                <RowOptionsMenu
+                  type='dropdown'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowDropdownOptions>
+            )}
+
+            {currentPageSize <= 2 && (
+              <RowCollapseOptions>
+                <RowOptionsMenu
+                  type='collapse'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowCollapseOptions>
+            )}
+          </>
+        );
+      },
+    },
+  ];
+
   return (
     <>
       <section className='[&_button]:w-full [&_button]:sm:w-fit [&_button]:last:mt-2 [&_button]:last:sm:mt-0 sm:flex sm:justify-between grid grid-cols-1 sm:gap-0 gap-2'>
@@ -211,151 +347,7 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
       >
         <Table<Uniformity>
           data={isResponseSuccess(uniformities) ? uniformities?.data : []}
-          columns={[
-            {
-              id: 'select',
-              header: ({ table }) => {
-                const allRows = table.getRowModel().rows;
-                const selectableRows = allRows.filter((row) => {
-                  const uniformity = row.original;
-                  return !isUniformityLocked(uniformity);
-                });
-
-                const hasNoSelectableRows = selectableRows.length === 0;
-
-                const handleSelectAll = () => {
-                  const isAllSelected = selectableRows.every((row) =>
-                    row.getIsSelected()
-                  );
-
-                  selectableRows.forEach((row) => {
-                    row.toggleSelected(!isAllSelected);
-                  });
-                };
-
-                const isAllSelected =
-                  selectableRows.length > 0 &&
-                  selectableRows.every((row) => row.getIsSelected());
-
-                const isSomeSelected = selectableRows.some((row) =>
-                  row.getIsSelected()
-                );
-
-                return (
-                  <div className='w-full flex flex-row justify-center'>
-                    <CheckboxInput
-                      name='allRow'
-                      checked={isAllSelected}
-                      indeterminate={isSomeSelected && !isAllSelected}
-                      onChange={handleSelectAll}
-                      disabled={hasNoSelectableRows}
-                    />
-                  </div>
-                );
-              },
-              cell: ({ row }) => {
-                const uniformity = row.original;
-                const isDisabled = isUniformityLocked(uniformity);
-
-                return (
-                  <div className={cn({ 'opacity-50': isDisabled })}>
-                    <CheckboxInput
-                      name='row'
-                      checked={row.getIsSelected()}
-                      indeterminate={row.getIsSomeSelected()}
-                      onChange={row.getToggleSelectedHandler()}
-                      disabled={isDisabled}
-                    />
-                  </div>
-                );
-              },
-            },
-            {
-              header: '#',
-              cell: (props) =>
-                tableFilterState.pageSize * (tableFilterState.page - 1) +
-                props.row.index +
-                1,
-            },
-            {
-              header: 'Lokasi',
-              cell: (props) => props.row.original.location.name || '-',
-            },
-            {
-              header: 'Flock',
-              cell: (props) =>
-                `Flock ${props.row.original.project_flock_kandang_id}`,
-            },
-            {
-              header: 'Kandang',
-              cell: (props) => props.row.original.kandang.name || '-',
-            },
-            {
-              header: 'Tanggal (Week)',
-              cell: (props) => `Week ${props.row.original.week}`,
-            },
-            {
-              header: 'Status',
-              cell: (props) => {
-                const status = props.row.original.status;
-                return (
-                  <Badge variant='soft' color={getStatusColor(status)}>
-                    {getStatusText(status)}
-                  </Badge>
-                );
-              },
-            },
-            {
-              header: 'Uniformity',
-              cell: (props) => {
-                const uniformity = props.row.original.uniformity;
-                return <span>{uniformity}%</span>;
-              },
-            },
-            {
-              header: 'Aksi',
-              cell: (props: CellContext<Uniformity, unknown>) => {
-                const currentPageSize =
-                  props.table.getPaginationRowModel().rows.length;
-                const currentPageRows =
-                  props.table.getPaginationRowModel().flatRows;
-                const currentRowRelativeIndex =
-                  currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
-
-                const isLast2Rows =
-                  currentRowRelativeIndex > currentPageSize - 2;
-
-                const deleteClickHandler = () => {
-                  setSelectedUniformity(props.row.original);
-                  singleDeleteModal.openModal();
-                };
-
-                return (
-                  <>
-                    {currentPageSize > 2 && (
-                      <RowDropdownOptions isLast2Rows={isLast2Rows}>
-                        <RowOptionsMenu
-                          type='dropdown'
-                          props={props}
-                          deleteClickHandler={deleteClickHandler}
-                        />
-                      </RowDropdownOptions>
-                    )}
-
-                    {currentPageSize <= 2 && (
-                      <RowCollapseOptions>
-                        <RowOptionsMenu
-                          type='collapse'
-                          props={props}
-                          deleteClickHandler={deleteClickHandler}
-                        />
-                      </RowCollapseOptions>
-                    )}
-                  </>
-                );
-              },
-            },
-          ]}
+          columns={uniformityColumns}
           pageSize={tableFilterState.pageSize}
           page={isResponseSuccess(uniformities) ? uniformities?.meta?.page : 0}
           totalItems={