From 4a4c4ccad0616bfceafe919d757ceee85defc246 Mon Sep 17 00:00:00 2001 From: Yoga Pangestu Date: Sat, 1 Aug 2026 12:11:36 +0700 Subject: [PATCH] Refactor table column headers to remove sorting functionality - Removed sorting buttons and associated logic from various table columns across payroll, employee, leave request, category, customer, product, supplier, and role management pages. - Simplified header definitions to use static text instead of buttons for sorting. - Cleaned up unused sort state management in related index components. --- resources/js/components/data-table.tsx | 21 ------- .../admin/finance/cash-account/columns.tsx | 28 +-------- .../admin/finance/cash-account/index.tsx | 37 +----------- .../cash-account/transaction-columns.tsx | 41 ++----------- .../finance/employee-advance/columns.tsx | 47 ++------------- .../admin/finance/employee-advance/index.tsx | 32 +--------- .../pages/admin/finance/expense/columns.tsx | 28 +-------- .../js/pages/admin/finance/expense/index.tsx | 32 +--------- .../admin/finance/payroll-period/columns.tsx | 54 ++--------------- .../admin/finance/payroll-period/index.tsx | 32 +--------- .../finance/payroll-period/show-columns.tsx | 60 ++----------------- .../js/pages/admin/hr/employee/columns.tsx | 41 ++----------- .../js/pages/admin/hr/employee/index.tsx | 37 +----------- .../pages/admin/hr/leave-request/columns.tsx | 47 ++------------- .../js/pages/admin/hr/leave-request/index.tsx | 37 +----------- .../pages/admin/master/category/columns.tsx | 15 +---- .../js/pages/admin/master/category/index.tsx | 34 +---------- .../pages/admin/master/customer/columns.tsx | 41 ++----------- .../js/pages/admin/master/customer/index.tsx | 35 +---------- .../js/pages/admin/master/product/columns.tsx | 28 +-------- .../js/pages/admin/master/product/index.tsx | 33 +--------- .../pages/admin/master/supplier/columns.tsx | 41 ++----------- .../js/pages/admin/master/supplier/index.tsx | 35 +---------- resources/js/pages/admin/roles/columns.tsx | 15 +---- resources/js/pages/admin/roles/index.tsx | 32 +--------- 25 files changed, 69 insertions(+), 814 deletions(-) diff --git a/resources/js/components/data-table.tsx b/resources/js/components/data-table.tsx index f2b7e2b..255f320 100644 --- a/resources/js/components/data-table.tsx +++ b/resources/js/components/data-table.tsx @@ -54,11 +54,6 @@ export interface PaginationState { total: number; } -export interface SortState { - column: string; - direction: 'asc' | 'desc'; -} - interface DataTableProps { columns: ColumnDef[]; data: TData[]; @@ -74,8 +69,6 @@ interface DataTableProps { onPageChange?: (page: number) => void; onPerPageChange?: (perPage: number) => void; onSearchChange?: (search: string) => void; - onSortChange?: (column: string, direction: 'asc' | 'desc') => void; - currentSort?: SortState; searchValue?: string; } @@ -167,8 +160,6 @@ export function DataTable({ onPageChange, onPerPageChange, onSearchChange, - onSortChange, - currentSort, searchValue, }: DataTableProps) { const [expanded, setExpanded] = React.useState(() => { @@ -265,18 +256,6 @@ export function DataTable({ } } - function handleSort(columnId: string) { - if (!onSortChange) { - return; - } - - const newDirection = - currentSort?.column === columnId && currentSort?.direction === 'asc' - ? 'desc' - : 'asc'; - onSortChange(columnId, newDirection); - } - const totalPages = pagination?.last_page ?? 1; const currentPage = pagination?.current_page ?? 1; diff --git a/resources/js/pages/admin/finance/cash-account/columns.tsx b/resources/js/pages/admin/finance/cash-account/columns.tsx index e68513a..8d878d5 100644 --- a/resources/js/pages/admin/finance/cash-account/columns.tsx +++ b/resources/js/pages/admin/finance/cash-account/columns.tsx @@ -1,5 +1,5 @@ import type { ColumnDef } from '@tanstack/react-table'; -import { ArrowUpDown, Pencil, Trash2 } from 'lucide-react'; +import { Pencil, Trash2 } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { Tooltip, @@ -39,18 +39,7 @@ export function createCashAccountColumns( }, { accessorKey: 'name', - header: ({ column }) => ( - - ), + header: () => Nama, cell: ({ row }) => ( {row.getValue('name') as string} @@ -59,18 +48,7 @@ export function createCashAccountColumns( }, { accessorKey: 'balance', - header: ({ column }) => ( - - ), + header: () => Saldo, cell: ({ row }) => ( {formatCurrency(row.getValue('balance') as number)} diff --git a/resources/js/pages/admin/finance/cash-account/index.tsx b/resources/js/pages/admin/finance/cash-account/index.tsx index 6905755..d89f290 100644 --- a/resources/js/pages/admin/finance/cash-account/index.tsx +++ b/resources/js/pages/admin/finance/cash-account/index.tsx @@ -9,7 +9,7 @@ import { import { useCallback, useState } from 'react'; import { ConfirmDialog } from '@/components/confirm-dialog'; import { DataTable } from '@/components/data-table'; -import type { PaginationState, SortState } from '@/components/data-table'; +import type { PaginationState } from '@/components/data-table'; import { FileUpload } from '@/components/file-upload'; import InputError from '@/components/input-error'; import { RupiahInput } from '@/components/rupiah-input'; @@ -106,11 +106,6 @@ export default function CashAccountIndex({ } | null>(null); const [search, setSearch] = useState(''); - const [sort, setSort] = useState({ - column: 'created_at', - direction: 'desc', - }); - const pagination: PaginationState = { current_page: transactions.current_page, last_page: transactions.last_page, @@ -136,8 +131,6 @@ export default function CashAccountIndex({ page: 1, per_page: pagination.per_page, search, - sort: sort.column, - direction: sort.direction, }, { preserveState: true, replace: true }, ); @@ -150,8 +143,6 @@ export default function CashAccountIndex({ page: 1, per_page: pagination.per_page, search, - sort: sort.column, - direction: sort.direction, }, { preserveState: true, replace: true }, ); @@ -176,8 +167,6 @@ export default function CashAccountIndex({ page, per_page: pagination.per_page, search, - sort: sort.column, - direction: sort.direction, }, { preserveState: true, replace: true }, ); @@ -191,8 +180,6 @@ export default function CashAccountIndex({ page: 1, per_page: perPage, search, - sort: sort.column, - direction: sort.direction, }, { preserveState: true, replace: true }, ); @@ -208,31 +195,13 @@ export default function CashAccountIndex({ page: 1, per_page: pagination.per_page, search: value, - sort: sort.column, - direction: sort.direction, }, { preserveState: true, replace: true }, ); }, - [pagination.per_page, sort, filters], + [pagination.per_page, filters], ); - function handleSortChange(column: string, direction: 'asc' | 'desc') { - setSort({ column, direction }); - router.get( - cashAccountIndex(), - { - ...filters, - page: 1, - per_page: pagination.per_page, - search, - sort: column, - direction, - }, - { preserveState: true, replace: true }, - ); - } - const columns = createTransactionColumns({ handleEdit: (transaction) => { setEditing(transaction); @@ -357,8 +326,6 @@ export default function CashAccountIndex({ onPageChange={handlePageChange} onPerPageChange={handlePerPageChange} onSearchChange={handleSearchChange} - onSortChange={handleSortChange} - currentSort={sort} searchValue={search} toolbar={filterToolbar} /> diff --git a/resources/js/pages/admin/finance/cash-account/transaction-columns.tsx b/resources/js/pages/admin/finance/cash-account/transaction-columns.tsx index f473b80..8591151 100644 --- a/resources/js/pages/admin/finance/cash-account/transaction-columns.tsx +++ b/resources/js/pages/admin/finance/cash-account/transaction-columns.tsx @@ -8,7 +8,7 @@ import { } from '@/components/ui/tooltip'; import { formatCurrency } from '@/lib/utils'; import type { ColumnDef } from '@tanstack/react-table'; -import { ArrowUpDown, Pencil, Trash2 } from 'lucide-react'; +import { Pencil, Trash2 } from 'lucide-react'; import { useState } from 'react'; export type CashTransaction = { @@ -118,18 +118,7 @@ export function createTransactionColumns( }, { accessorKey: 'created_at', - header: ({ column }) => ( - - ), + header: () => Tanggal, cell: ({ row }) => ( {formatDate(row.getValue('created_at') as string)} ), @@ -156,18 +145,7 @@ export function createTransactionColumns( }, { accessorKey: 'amount', - header: ({ column }) => ( - - ), + header: () => Jumlah, cell: ({ row }) => { const transaction = row.original; const isDeposit = transaction.type === 'deposit'; @@ -188,18 +166,7 @@ export function createTransactionColumns( }, { accessorKey: 'balance_after', - header: ({ column }) => ( - - ), + header: () => Saldo Setelah, cell: ({ row }) => ( {formatCurrency(row.getValue('balance_after') as number)} diff --git a/resources/js/pages/admin/finance/employee-advance/columns.tsx b/resources/js/pages/admin/finance/employee-advance/columns.tsx index f2f214d..a0c015e 100644 --- a/resources/js/pages/admin/finance/employee-advance/columns.tsx +++ b/resources/js/pages/admin/finance/employee-advance/columns.tsx @@ -1,11 +1,5 @@ import type { ColumnDef } from '@tanstack/react-table'; -import { - ArrowUpDown, - CheckCircle, - CircleDollarSign, - Pencil, - Trash2, -} from 'lucide-react'; +import { CheckCircle, CircleDollarSign, Pencil, Trash2 } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { Badge } from '@/components/ui/badge'; import { @@ -119,18 +113,7 @@ export function createEmployeeAdvanceColumns( }, { accessorKey: 'created_at', - header: ({ column }) => ( - - ), + header: () => Tanggal, cell: ({ row }) => ( {formatDate(row.getValue('created_at') as string)} ), @@ -150,18 +133,7 @@ export function createEmployeeAdvanceColumns( }, { accessorKey: 'amount', - header: ({ column }) => ( - - ), + header: () => Jumlah, cell: ({ row }) => ( - {formatCurrency(row.getValue('amount') as number)} @@ -179,18 +151,7 @@ export function createEmployeeAdvanceColumns( }, { accessorKey: 'due_date', - header: ({ column }) => ( - - ), + header: () => Jatuh Tempo, cell: ({ row }) => ( {formatShortDate(row.getValue('due_date') as string)} diff --git a/resources/js/pages/admin/finance/employee-advance/index.tsx b/resources/js/pages/admin/finance/employee-advance/index.tsx index 7ed7591..706c7d5 100644 --- a/resources/js/pages/admin/finance/employee-advance/index.tsx +++ b/resources/js/pages/admin/finance/employee-advance/index.tsx @@ -3,7 +3,7 @@ import { Plus } from 'lucide-react'; import { useCallback, useEffect, useState } from 'react'; import { ConfirmDialog } from '@/components/confirm-dialog'; import { DataTable } from '@/components/data-table'; -import type { PaginationState, SortState } from '@/components/data-table'; +import type { PaginationState } from '@/components/data-table'; import { DatePicker } from '@/components/date-picker'; import InputError from '@/components/input-error'; import { RupiahInput } from '@/components/rupiah-input'; @@ -49,11 +49,6 @@ export default function EmployeeAdvanceIndex({ employeeAdvances }: Props) { undefined, ); const [search, setSearch] = useState(''); - const [sort, setSort] = useState({ - column: 'created_at', - direction: 'desc', - }); - const pagination: PaginationState = { current_page: employeeAdvances.current_page, last_page: employeeAdvances.last_page, @@ -114,8 +109,6 @@ export default function EmployeeAdvanceIndex({ employeeAdvances }: Props) { page, per_page: pagination.per_page, search, - sort: sort.column, - direction: sort.direction, }, { preserveState: true, replace: true }, ); @@ -128,8 +121,6 @@ export default function EmployeeAdvanceIndex({ employeeAdvances }: Props) { page: 1, per_page: perPage, search, - sort: sort.column, - direction: sort.direction, }, { preserveState: true, replace: true }, ); @@ -144,30 +135,13 @@ export default function EmployeeAdvanceIndex({ employeeAdvances }: Props) { page: 1, per_page: pagination.per_page, search: value, - sort: sort.column, - direction: sort.direction, }, { preserveState: true, replace: true }, ); }, - [pagination.per_page, sort], + [pagination.per_page], ); - function handleSortChange(column: string, direction: 'asc' | 'desc') { - setSort({ column, direction }); - router.get( - employeeAdvanceIndex.url(), - { - page: 1, - per_page: pagination.per_page, - search, - sort: column, - direction, - }, - { preserveState: true, replace: true }, - ); - } - const columns = createEmployeeAdvanceColumns({ handleEdit: (employeeAdvance) => setEditing(employeeAdvance), handleDeleteClick: (employeeAdvance) => setDeleting(employeeAdvance), @@ -323,8 +297,6 @@ export default function EmployeeAdvanceIndex({ employeeAdvances }: Props) { onPageChange={handlePageChange} onPerPageChange={handlePerPageChange} onSearchChange={handleSearchChange} - onSortChange={handleSortChange} - currentSort={sort} searchValue={search} /> diff --git a/resources/js/pages/admin/finance/expense/columns.tsx b/resources/js/pages/admin/finance/expense/columns.tsx index f9be2ed..53e0917 100644 --- a/resources/js/pages/admin/finance/expense/columns.tsx +++ b/resources/js/pages/admin/finance/expense/columns.tsx @@ -8,7 +8,7 @@ import { } from '@/components/ui/tooltip'; import { formatCurrency } from '@/lib/utils'; import type { ColumnDef } from '@tanstack/react-table'; -import { ArrowUpDown, Pencil, Trash2 } from 'lucide-react'; +import { Pencil, Trash2 } from 'lucide-react'; import { useState } from 'react'; export type Expense = { @@ -91,18 +91,7 @@ export function createExpenseColumns( }, { accessorKey: 'created_at', - header: ({ column }) => ( - - ), + header: () => Tanggal, cell: ({ row }) => ( {formatDate(row.getValue('created_at') as string)} ), @@ -136,18 +125,7 @@ export function createExpenseColumns( }, { accessorKey: 'amount', - header: ({ column }) => ( - - ), + header: () => Jumlah, cell: ({ row }) => ( - {formatCurrency(row.getValue('amount') as number)} diff --git a/resources/js/pages/admin/finance/expense/index.tsx b/resources/js/pages/admin/finance/expense/index.tsx index 2095da0..61796cc 100644 --- a/resources/js/pages/admin/finance/expense/index.tsx +++ b/resources/js/pages/admin/finance/expense/index.tsx @@ -2,7 +2,7 @@ import { Form, Head, router } from '@inertiajs/react'; import { Plus } from 'lucide-react'; import { useCallback, useState } from 'react'; import { ConfirmDialog } from '@/components/confirm-dialog'; -import type { PaginationState, SortState } from '@/components/data-table'; +import type { PaginationState } from '@/components/data-table'; import { DataTable } from '@/components/data-table'; import { FileUpload } from '@/components/file-upload'; import InputError from '@/components/input-error'; @@ -55,11 +55,6 @@ export default function ExpenseIndex({ expenses }: Props) { type: string; } | null>(null); const [search, setSearch] = useState(''); - const [sort, setSort] = useState({ - column: 'created_at', - direction: 'desc', - }); - const pagination: PaginationState = { current_page: expenses.current_page, last_page: expenses.last_page, @@ -74,8 +69,6 @@ export default function ExpenseIndex({ expenses }: Props) { page, per_page: pagination.per_page, search, - sort: sort.column, - direction: sort.direction, }, { preserveState: true, replace: true }, ); @@ -88,8 +81,6 @@ export default function ExpenseIndex({ expenses }: Props) { page: 1, per_page: perPage, search, - sort: sort.column, - direction: sort.direction, }, { preserveState: true, replace: true }, ); @@ -104,30 +95,13 @@ export default function ExpenseIndex({ expenses }: Props) { page: 1, per_page: pagination.per_page, search: value, - sort: sort.column, - direction: sort.direction, }, { preserveState: true, replace: true }, ); }, - [pagination.per_page, sort], + [pagination.per_page], ); - function handleSortChange(column: string, direction: 'asc' | 'desc') { - setSort({ column, direction }); - router.get( - expenseIndex.url(), - { - page: 1, - per_page: pagination.per_page, - search, - sort: column, - direction, - }, - { preserveState: true, replace: true }, - ); - } - function handleDelete() { if (!deleting) { return; @@ -322,8 +296,6 @@ export default function ExpenseIndex({ expenses }: Props) { onPageChange={handlePageChange} onPerPageChange={handlePerPageChange} onSearchChange={handleSearchChange} - onSortChange={handleSortChange} - currentSort={sort} searchValue={search} /> diff --git a/resources/js/pages/admin/finance/payroll-period/columns.tsx b/resources/js/pages/admin/finance/payroll-period/columns.tsx index d584529..20b832b 100644 --- a/resources/js/pages/admin/finance/payroll-period/columns.tsx +++ b/resources/js/pages/admin/finance/payroll-period/columns.tsx @@ -1,5 +1,5 @@ import type { ColumnDef } from '@tanstack/react-table'; -import { ArrowUpDown, Eye, Lock, Unlock } from 'lucide-react'; +import { Eye, Lock, Unlock } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { Badge } from '@/components/ui/badge'; import { @@ -92,18 +92,7 @@ export function createPayrollPeriodColumns( }, { accessorKey: 'year', - header: ({ column }) => ( - - ), + header: () => Periode, cell: ({ row }) => ( {formatPeriod(row.original)} @@ -121,18 +110,7 @@ export function createPayrollPeriodColumns( }, { accessorKey: 'payrolls_sum_total_amount', - header: ({ column }) => ( - - ), + header: () => Total Gaji, cell: ({ row }) => ( {formatCurrency( @@ -144,18 +122,7 @@ export function createPayrollPeriodColumns( }, { accessorKey: 'payrolls_sum_bonus_amount', - header: ({ column }) => ( - - ), + header: () => Bonus, cell: ({ row }) => { const value = (row.getValue('payrolls_sum_bonus_amount') as number) ?? 0; @@ -176,18 +143,7 @@ export function createPayrollPeriodColumns( }, { accessorKey: 'payrolls_sum_deduction_amount', - header: ({ column }) => ( - - ), + header: () => Potongan, cell: ({ row }) => { const value = (row.getValue('payrolls_sum_deduction_amount') as number) ?? diff --git a/resources/js/pages/admin/finance/payroll-period/index.tsx b/resources/js/pages/admin/finance/payroll-period/index.tsx index 223bf9b..d0a962c 100644 --- a/resources/js/pages/admin/finance/payroll-period/index.tsx +++ b/resources/js/pages/admin/finance/payroll-period/index.tsx @@ -1,7 +1,7 @@ import { Head, router } from '@inertiajs/react'; import { useCallback, useState } from 'react'; import { ConfirmDialog } from '@/components/confirm-dialog'; -import type { PaginationState, SortState } from '@/components/data-table'; +import type { PaginationState } from '@/components/data-table'; import { DataTable } from '@/components/data-table'; import { Button } from '@/components/ui/button'; import { @@ -47,11 +47,6 @@ export default function PayrollPeriodIndex({ payrollPeriods }: Props) { const [closing, setClosing] = useState(null); const [reopening, setReopening] = useState(null); const [search, setSearch] = useState(''); - const [sort, setSort] = useState({ - column: 'created_at', - direction: 'desc', - }); - const pagination: PaginationState = { current_page: payrollPeriods.current_page, last_page: payrollPeriods.last_page, @@ -94,8 +89,6 @@ export default function PayrollPeriodIndex({ payrollPeriods }: Props) { page, per_page: pagination.per_page, search, - sort: sort.column, - direction: sort.direction, }, { preserveState: true, replace: true }, ); @@ -108,8 +101,6 @@ export default function PayrollPeriodIndex({ payrollPeriods }: Props) { page: 1, per_page: perPage, search, - sort: sort.column, - direction: sort.direction, }, { preserveState: true, replace: true }, ); @@ -124,30 +115,13 @@ export default function PayrollPeriodIndex({ payrollPeriods }: Props) { page: 1, per_page: pagination.per_page, search: value, - sort: sort.column, - direction: sort.direction, }, { preserveState: true, replace: true }, ); }, - [pagination.per_page, sort], + [pagination.per_page], ); - function handleSortChange(column: string, direction: 'asc' | 'desc') { - setSort({ column, direction }); - router.get( - payrollPeriodsIndex(), - { - page: 1, - per_page: pagination.per_page, - search, - sort: column, - direction, - }, - { preserveState: true, replace: true }, - ); - } - const columns = createPayrollPeriodColumns({ showUrl: (id) => payrollPeriodShow(id).url, handleClose: (period) => setClosing(period), @@ -177,8 +151,6 @@ export default function PayrollPeriodIndex({ payrollPeriods }: Props) { onPageChange={handlePageChange} onPerPageChange={handlePerPageChange} onSearchChange={handleSearchChange} - onSortChange={handleSortChange} - currentSort={sort} searchValue={search} /> diff --git a/resources/js/pages/admin/finance/payroll-period/show-columns.tsx b/resources/js/pages/admin/finance/payroll-period/show-columns.tsx index f8eda24..2cf34d8 100644 --- a/resources/js/pages/admin/finance/payroll-period/show-columns.tsx +++ b/resources/js/pages/admin/finance/payroll-period/show-columns.tsx @@ -1,11 +1,5 @@ import type { ColumnDef } from '@tanstack/react-table'; -import { - ArrowUpDown, - CircleDollarSign, - Pencil, - Trash2, - XCircle, -} from 'lucide-react'; +import { CircleDollarSign, Pencil, Trash2, XCircle } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { Badge } from '@/components/ui/badge'; import { @@ -114,18 +108,7 @@ export function createPayrollColumns( }, { accessorKey: 'base_salary', - header: ({ column }) => ( - - ), + header: () => Gaji Pokok, cell: ({ row }) => ( {formatCurrency(row.getValue('base_salary') as number)} @@ -134,18 +117,7 @@ export function createPayrollColumns( }, { accessorKey: 'bonus_amount', - header: ({ column }) => ( - - ), + header: () => Bonus, cell: ({ row }) => { const value = row.getValue('bonus_amount') as number; @@ -163,18 +135,7 @@ export function createPayrollColumns( }, { accessorKey: 'deduction_amount', - header: ({ column }) => ( - - ), + header: () => Potongan, cell: ({ row }) => { const value = row.getValue('deduction_amount') as number; @@ -190,18 +151,7 @@ export function createPayrollColumns( }, { accessorKey: 'total_amount', - header: ({ column }) => ( - - ), + header: () => Total, cell: ({ row }) => ( {formatCurrency(row.getValue('total_amount') as number)} diff --git a/resources/js/pages/admin/hr/employee/columns.tsx b/resources/js/pages/admin/hr/employee/columns.tsx index e968e5d..e3e81fb 100644 --- a/resources/js/pages/admin/hr/employee/columns.tsx +++ b/resources/js/pages/admin/hr/employee/columns.tsx @@ -1,6 +1,6 @@ import type { ColumnDef } from '@tanstack/react-table'; import { router } from '@inertiajs/react'; -import { ArrowUpDown, KeyRound, Pencil, Trash2 } from 'lucide-react'; +import { KeyRound, Pencil, Trash2 } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { Switch } from '@/components/ui/switch'; import { @@ -78,18 +78,7 @@ export function createEmployeeColumns( { accessorKey: 'user_profile.full_name', id: 'full_name', - header: ({ column }) => ( - - ), + header: () => Nama, cell: ({ row }) => { const employee = row.original; @@ -107,18 +96,7 @@ export function createEmployeeColumns( }, { accessorKey: 'username', - header: ({ column }) => ( - - ), + header: () => Username, cell: ({ row }) => ( {row.getValue('username') as string} @@ -140,18 +118,7 @@ export function createEmployeeColumns( { accessorKey: 'employee.employment_status', id: 'employment_status', - header: ({ column }) => ( - - ), + header: () => Status, cell: ({ row }) => { const employee = row.original; diff --git a/resources/js/pages/admin/hr/employee/index.tsx b/resources/js/pages/admin/hr/employee/index.tsx index d1d7d67..7be8299 100644 --- a/resources/js/pages/admin/hr/employee/index.tsx +++ b/resources/js/pages/admin/hr/employee/index.tsx @@ -3,7 +3,7 @@ import { Filter, Plus, X } from 'lucide-react'; import { useCallback, useState } from 'react'; import { ConfirmDialog } from '@/components/confirm-dialog'; import { DataTable } from '@/components/data-table'; -import type { PaginationState, SortState } from '@/components/data-table'; +import type { PaginationState } from '@/components/data-table'; import { Button } from '@/components/ui/button'; import { Popover, @@ -49,11 +49,6 @@ export default function EmployeeIndex({ employees, filters }: Props) { useState(null); const [filterOpen, setFilterOpen] = useState(false); const [search, setSearch] = useState(''); - const [sort, setSort] = useState({ - column: 'created_at', - direction: 'desc', - }); - const pagination: PaginationState = { current_page: employees.current_page, last_page: employees.last_page, @@ -79,8 +74,6 @@ export default function EmployeeIndex({ employees, filters }: Props) { page: 1, per_page: pagination.per_page, search, - sort: sort.column, - direction: sort.direction, }, { preserveState: true, replace: true }, ); @@ -93,8 +86,6 @@ export default function EmployeeIndex({ employees, filters }: Props) { page: 1, per_page: pagination.per_page, search, - sort: sort.column, - direction: sort.direction, }, { preserveState: true, replace: true }, ); @@ -109,8 +100,6 @@ export default function EmployeeIndex({ employees, filters }: Props) { page, per_page: pagination.per_page, search, - sort: sort.column, - direction: sort.direction, }, { preserveState: true, replace: true }, ); @@ -124,8 +113,6 @@ export default function EmployeeIndex({ employees, filters }: Props) { page: 1, per_page: perPage, search, - sort: sort.column, - direction: sort.direction, }, { preserveState: true, replace: true }, ); @@ -141,31 +128,13 @@ export default function EmployeeIndex({ employees, filters }: Props) { page: 1, per_page: pagination.per_page, search: value, - sort: sort.column, - direction: sort.direction, }, { preserveState: true, replace: true }, ); }, - [pagination.per_page, sort, filters], + [pagination.per_page, filters], ); - function handleSortChange(column: string, direction: 'asc' | 'desc') { - setSort({ column, direction }); - router.get( - employeeIndex.url(), - { - ...filters, - page: 1, - per_page: pagination.per_page, - search, - sort: column, - direction, - }, - { preserveState: true, replace: true }, - ); - } - function handleDelete() { if (!deleting) { return; @@ -340,8 +309,6 @@ export default function EmployeeIndex({ employees, filters }: Props) { onPageChange={handlePageChange} onPerPageChange={handlePerPageChange} onSearchChange={handleSearchChange} - onSortChange={handleSortChange} - currentSort={sort} searchValue={search} toolbar={filterToolbar} /> diff --git a/resources/js/pages/admin/hr/leave-request/columns.tsx b/resources/js/pages/admin/hr/leave-request/columns.tsx index 03d27d3..718b3ab 100644 --- a/resources/js/pages/admin/hr/leave-request/columns.tsx +++ b/resources/js/pages/admin/hr/leave-request/columns.tsx @@ -7,13 +7,7 @@ import { TooltipTrigger, } from '@/components/ui/tooltip'; import type { ColumnDef } from '@tanstack/react-table'; -import { - ArrowUpDown, - CheckCircle, - Pencil, - Trash2, - XCircle, -} from 'lucide-react'; +import { CheckCircle, Pencil, Trash2, XCircle } from 'lucide-react'; export type LeaveRequest = { id: number; @@ -110,18 +104,7 @@ export function createLeaveRequestColumns( }, { accessorKey: 'start_date', - header: ({ column }) => ( - - ), + header: () => Tanggal Mulai, cell: ({ row }) => ( {formatShortDate(row.getValue('start_date') as string)} @@ -130,18 +113,7 @@ export function createLeaveRequestColumns( }, { accessorKey: 'end_date', - header: ({ column }) => ( - - ), + header: () => Tanggal Selesai, cell: ({ row }) => ( {formatShortDate(row.getValue('end_date') as string)} @@ -150,18 +122,7 @@ export function createLeaveRequestColumns( }, { accessorKey: 'total_days', - header: ({ column }) => ( - - ), + header: () => Hari, cell: ({ row }) => ( {row.getValue('total_days') as number} hari diff --git a/resources/js/pages/admin/hr/leave-request/index.tsx b/resources/js/pages/admin/hr/leave-request/index.tsx index 61daca2..1abc6b2 100644 --- a/resources/js/pages/admin/hr/leave-request/index.tsx +++ b/resources/js/pages/admin/hr/leave-request/index.tsx @@ -3,7 +3,7 @@ import { Filter, Plus, X } from 'lucide-react'; import { useCallback, useEffect, useState } from 'react'; import { ConfirmDialog } from '@/components/confirm-dialog'; import { DataTable } from '@/components/data-table'; -import type { PaginationState, SortState } from '@/components/data-table'; +import type { PaginationState } from '@/components/data-table'; import { DatePicker } from '@/components/date-picker'; import InputError from '@/components/input-error'; import { Button } from '@/components/ui/button'; @@ -67,11 +67,6 @@ export default function LeaveRequestIndex({ leaveRequests, filters }: Props) { ); const [filterOpen, setFilterOpen] = useState(false); const [search, setSearch] = useState(''); - const [sort, setSort] = useState({ - column: 'created_at', - direction: 'desc', - }); - const pagination: PaginationState = { current_page: leaveRequests.current_page, last_page: leaveRequests.last_page, @@ -107,8 +102,6 @@ export default function LeaveRequestIndex({ leaveRequests, filters }: Props) { page: 1, per_page: pagination.per_page, search, - sort: sort.column, - direction: sort.direction, }, { preserveState: true, replace: true }, ); @@ -121,8 +114,6 @@ export default function LeaveRequestIndex({ leaveRequests, filters }: Props) { page: 1, per_page: pagination.per_page, search, - sort: sort.column, - direction: sort.direction, }, { preserveState: true, replace: true }, ); @@ -175,8 +166,6 @@ export default function LeaveRequestIndex({ leaveRequests, filters }: Props) { page, per_page: pagination.per_page, search, - sort: sort.column, - direction: sort.direction, }, { preserveState: true, replace: true }, ); @@ -190,8 +179,6 @@ export default function LeaveRequestIndex({ leaveRequests, filters }: Props) { page: 1, per_page: perPage, search, - sort: sort.column, - direction: sort.direction, }, { preserveState: true, replace: true }, ); @@ -207,31 +194,13 @@ export default function LeaveRequestIndex({ leaveRequests, filters }: Props) { page: 1, per_page: pagination.per_page, search: value, - sort: sort.column, - direction: sort.direction, }, { preserveState: true, replace: true }, ); }, - [pagination.per_page, sort, filters], + [pagination.per_page, filters], ); - function handleSortChange(column: string, direction: 'asc' | 'desc') { - setSort({ column, direction }); - router.get( - leaveRequestIndex(), - { - ...filters, - page: 1, - per_page: pagination.per_page, - search, - sort: column, - direction, - }, - { preserveState: true, replace: true }, - ); - } - const columns = createLeaveRequestColumns({ handleEdit: (leaveRequest) => setEditing(leaveRequest), handleDeleteClick: (leaveRequest) => setDeleting(leaveRequest), @@ -454,8 +423,6 @@ export default function LeaveRequestIndex({ leaveRequests, filters }: Props) { onPageChange={handlePageChange} onPerPageChange={handlePerPageChange} onSearchChange={handleSearchChange} - onSortChange={handleSortChange} - currentSort={sort} searchValue={search} toolbar={filterToolbar} /> diff --git a/resources/js/pages/admin/master/category/columns.tsx b/resources/js/pages/admin/master/category/columns.tsx index 01457ae..8c68c65 100644 --- a/resources/js/pages/admin/master/category/columns.tsx +++ b/resources/js/pages/admin/master/category/columns.tsx @@ -1,5 +1,5 @@ import type { ColumnDef } from '@tanstack/react-table'; -import { ArrowUpDown, Pencil, Trash2 } from 'lucide-react'; +import { Pencil, Trash2 } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { Tooltip, @@ -37,18 +37,7 @@ export function createCategoryColumns( }, { accessorKey: 'name', - header: ({ column }) => ( - - ), + header: () => Nama, cell: ({ row }) => ( {row.getValue('name') as string} diff --git a/resources/js/pages/admin/master/category/index.tsx b/resources/js/pages/admin/master/category/index.tsx index 60e533f..d36db87 100644 --- a/resources/js/pages/admin/master/category/index.tsx +++ b/resources/js/pages/admin/master/category/index.tsx @@ -3,7 +3,7 @@ import { Plus } from 'lucide-react'; import { useCallback, useState } from 'react'; import { ConfirmDialog } from '@/components/confirm-dialog'; import { DataTable } from '@/components/data-table'; -import type { PaginationState, SortState } from '@/components/data-table'; +import type { PaginationState } from '@/components/data-table'; import InputError from '@/components/input-error'; import { Button } from '@/components/ui/button'; import { @@ -40,10 +40,6 @@ export default function CategoryIndex({ categories, highlight }: Props) { const [editing, setEditing] = useState(null); const [deleting, setDeleting] = useState(null); const [search, setSearch] = useState(''); - const [sort, setSort] = useState({ - column: 'created_at', - direction: 'desc', - }); const pagination: PaginationState = { current_page: categories.current_page, @@ -59,8 +55,6 @@ export default function CategoryIndex({ categories, highlight }: Props) { page, per_page: pagination.per_page, search, - sort: sort.column, - direction: sort.direction, }, { preserveState: true, @@ -76,8 +70,6 @@ export default function CategoryIndex({ categories, highlight }: Props) { page: 1, per_page: perPage, search, - sort: sort.column, - direction: sort.direction, }, { preserveState: true, @@ -95,8 +87,6 @@ export default function CategoryIndex({ categories, highlight }: Props) { page: 1, per_page: pagination.per_page, search: value, - sort: sort.column, - direction: sort.direction, }, { preserveState: true, @@ -104,27 +94,9 @@ export default function CategoryIndex({ categories, highlight }: Props) { }, ); }, - [pagination.per_page, sort], + [pagination.per_page], ); - function handleSortChange(column: string, direction: 'asc' | 'desc') { - setSort({ column, direction }); - router.get( - categoryIndex.url(), - { - page: 1, - per_page: pagination.per_page, - search, - sort: column, - direction, - }, - { - preserveState: true, - replace: true, - }, - ); - } - function handleDelete() { if (!deleting) { return; @@ -250,8 +222,6 @@ export default function CategoryIndex({ categories, highlight }: Props) { onPageChange={handlePageChange} onPerPageChange={handlePerPageChange} onSearchChange={handleSearchChange} - onSortChange={handleSortChange} - currentSort={sort} searchValue={search} /> diff --git a/resources/js/pages/admin/master/customer/columns.tsx b/resources/js/pages/admin/master/customer/columns.tsx index 332a700..3dc2a1c 100644 --- a/resources/js/pages/admin/master/customer/columns.tsx +++ b/resources/js/pages/admin/master/customer/columns.tsx @@ -1,5 +1,5 @@ import type { ColumnDef } from '@tanstack/react-table'; -import { ArrowUpDown, Pencil, Trash2 } from 'lucide-react'; +import { Pencil, Trash2 } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { Tooltip, @@ -39,18 +39,7 @@ export function createCustomerColumns( }, { accessorKey: 'name', - header: ({ column }) => ( - - ), + header: () => Nama, cell: ({ row }) => ( {row.getValue('name') as string} @@ -59,36 +48,14 @@ export function createCustomerColumns( }, { accessorKey: 'phone_number', - header: ({ column }) => ( - - ), + header: () => No. Telepon, cell: ({ row }) => ( {(row.getValue('phone_number') as string) ?? '-'} ), }, { accessorKey: 'address', - header: ({ column }) => ( - - ), + header: () => Alamat, cell: ({ row }) => ( {(row.getValue('address') as string) ?? '-'} diff --git a/resources/js/pages/admin/master/customer/index.tsx b/resources/js/pages/admin/master/customer/index.tsx index 2b2a1b7..2ecef0f 100644 --- a/resources/js/pages/admin/master/customer/index.tsx +++ b/resources/js/pages/admin/master/customer/index.tsx @@ -3,7 +3,7 @@ import { Plus } from 'lucide-react'; import { useCallback, useState } from 'react'; import { ConfirmDialog } from '@/components/confirm-dialog'; import { DataTable } from '@/components/data-table'; -import type { PaginationState, SortState } from '@/components/data-table'; +import type { PaginationState } from '@/components/data-table'; import InputError from '@/components/input-error'; import { PhoneNumberInput } from '@/components/phone-number-input'; import { Button } from '@/components/ui/button'; @@ -40,11 +40,6 @@ export default function CustomerIndex({ customers }: Props) { const [editing, setEditing] = useState(null); const [deleting, setDeleting] = useState(null); const [search, setSearch] = useState(''); - const [sort, setSort] = useState({ - column: 'created_at', - direction: 'desc', - }); - const pagination: PaginationState = { current_page: customers.current_page, last_page: customers.last_page, @@ -59,8 +54,6 @@ export default function CustomerIndex({ customers }: Props) { page, per_page: pagination.per_page, search, - sort: sort.column, - direction: sort.direction, }, { preserveState: true, @@ -76,8 +69,6 @@ export default function CustomerIndex({ customers }: Props) { page: 1, per_page: perPage, search, - sort: sort.column, - direction: sort.direction, }, { preserveState: true, @@ -95,8 +86,6 @@ export default function CustomerIndex({ customers }: Props) { page: 1, per_page: pagination.per_page, search: value, - sort: sort.column, - direction: sort.direction, }, { preserveState: true, @@ -104,27 +93,9 @@ export default function CustomerIndex({ customers }: Props) { }, ); }, - [pagination.per_page, sort], + [pagination.per_page], ); - function handleSortChange(column: string, direction: 'asc' | 'desc') { - setSort({ column, direction }); - router.get( - customerIndex.url(), - { - page: 1, - per_page: pagination.per_page, - search, - sort: column, - direction, - }, - { - preserveState: true, - replace: true, - }, - ); - } - function handleDelete() { if (!deleting) { return; @@ -254,8 +225,6 @@ export default function CustomerIndex({ customers }: Props) { onPageChange={handlePageChange} onPerPageChange={handlePerPageChange} onSearchChange={handleSearchChange} - onSortChange={handleSortChange} - currentSort={sort} searchValue={search} /> diff --git a/resources/js/pages/admin/master/product/columns.tsx b/resources/js/pages/admin/master/product/columns.tsx index d3898cf..019cbd8 100644 --- a/resources/js/pages/admin/master/product/columns.tsx +++ b/resources/js/pages/admin/master/product/columns.tsx @@ -1,6 +1,6 @@ import type { ColumnDef } from '@tanstack/react-table'; import { router } from '@inertiajs/react'; -import { ArrowUpDown, ChevronRight, Pencil, Trash2 } from 'lucide-react'; +import { ChevronRight, Pencil, Trash2 } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { Switch } from '@/components/ui/switch'; import { @@ -145,18 +145,7 @@ export function createProductColumns( }, { accessorKey: 'name', - header: ({ column }) => ( - - ), + header: () => Nama Produk, cell: ({ row }) => { const product = row.original; @@ -317,18 +306,7 @@ export function createProductColumns( }, { accessorKey: 'status', - header: ({ column }) => ( - - ), + header: () => Status, cell: ({ row }) => { const product = row.original; const isToggleable = diff --git a/resources/js/pages/admin/master/product/index.tsx b/resources/js/pages/admin/master/product/index.tsx index e3b2579..b1a7fda 100644 --- a/resources/js/pages/admin/master/product/index.tsx +++ b/resources/js/pages/admin/master/product/index.tsx @@ -3,7 +3,7 @@ import type { Row } from '@tanstack/react-table'; import { Filter, Plus, X } from 'lucide-react'; import { useCallback, useMemo, useState } from 'react'; import { ConfirmDialog } from '@/components/confirm-dialog'; -import type { PaginationState, SortState } from '@/components/data-table'; +import type { PaginationState } from '@/components/data-table'; import { DataTable } from '@/components/data-table'; import { ImagePreviewModal } from '@/components/image-preview-modal'; import { Button } from '@/components/ui/button'; @@ -189,11 +189,6 @@ export default function ProductIndex({ products, filters }: Props) { const [deleting, setDeleting] = useState(null); const [filterOpen, setFilterOpen] = useState(false); const [search, setSearch] = useState(''); - const [sort, setSort] = useState({ - column: 'created_at', - direction: 'desc', - }); - const hasActiveFilters = filters.status || filters.name; const pagination: PaginationState = { @@ -243,8 +238,6 @@ export default function ProductIndex({ products, filters }: Props) { page, per_page: pagination.per_page, search, - sort: sort.column, - direction: sort.direction, ...filters, }, { preserveState: true, replace: true }, @@ -258,8 +251,6 @@ export default function ProductIndex({ products, filters }: Props) { page: 1, per_page: perPage, search, - sort: sort.column, - direction: sort.direction, ...filters, }, { preserveState: true, replace: true }, @@ -275,32 +266,14 @@ export default function ProductIndex({ products, filters }: Props) { page: 1, per_page: pagination.per_page, search: value, - sort: sort.column, - direction: sort.direction, ...filters, }, { preserveState: true, replace: true }, ); }, - [pagination.per_page, sort, filters], + [pagination.per_page, filters], ); - function handleSortChange(column: string, direction: 'asc' | 'desc') { - setSort({ column, direction }); - router.get( - productIndex.url(), - { - page: 1, - per_page: pagination.per_page, - search, - sort: column, - direction, - ...filters, - }, - { preserveState: true, replace: true }, - ); - } - function handleDelete() { if (!deleting) { return; @@ -437,8 +410,6 @@ export default function ProductIndex({ products, filters }: Props) { onPageChange={handlePageChange} onPerPageChange={handlePerPageChange} onSearchChange={handleSearchChange} - onSortChange={handleSortChange} - currentSort={sort} searchValue={search} renderSubRow={(row, searchValue) => ( diff --git a/resources/js/pages/admin/master/supplier/columns.tsx b/resources/js/pages/admin/master/supplier/columns.tsx index f6b4db8..ae9c051 100644 --- a/resources/js/pages/admin/master/supplier/columns.tsx +++ b/resources/js/pages/admin/master/supplier/columns.tsx @@ -1,5 +1,5 @@ import type { ColumnDef } from '@tanstack/react-table'; -import { ArrowUpDown, Pencil, Trash2 } from 'lucide-react'; +import { Pencil, Trash2 } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { Tooltip, @@ -39,18 +39,7 @@ export function createSupplierColumns( }, { accessorKey: 'name', - header: ({ column }) => ( - - ), + header: () => Nama, cell: ({ row }) => ( {row.getValue('name') as string} @@ -59,36 +48,14 @@ export function createSupplierColumns( }, { accessorKey: 'phone_number', - header: ({ column }) => ( - - ), + header: () => No. Telepon, cell: ({ row }) => ( {(row.getValue('phone_number') as string) ?? '-'} ), }, { accessorKey: 'address', - header: ({ column }) => ( - - ), + header: () => Alamat, cell: ({ row }) => ( {(row.getValue('address') as string) ?? '-'} diff --git a/resources/js/pages/admin/master/supplier/index.tsx b/resources/js/pages/admin/master/supplier/index.tsx index 18b796f..e81de27 100644 --- a/resources/js/pages/admin/master/supplier/index.tsx +++ b/resources/js/pages/admin/master/supplier/index.tsx @@ -3,7 +3,7 @@ import { Plus } from 'lucide-react'; import { useCallback, useState } from 'react'; import { ConfirmDialog } from '@/components/confirm-dialog'; import { DataTable } from '@/components/data-table'; -import type { PaginationState, SortState } from '@/components/data-table'; +import type { PaginationState } from '@/components/data-table'; import InputError from '@/components/input-error'; import { PhoneNumberInput } from '@/components/phone-number-input'; import { Button } from '@/components/ui/button'; @@ -40,11 +40,6 @@ export default function SupplierIndex({ suppliers }: Props) { const [editing, setEditing] = useState(null); const [deleting, setDeleting] = useState(null); const [search, setSearch] = useState(''); - const [sort, setSort] = useState({ - column: 'created_at', - direction: 'desc', - }); - const pagination: PaginationState = { current_page: suppliers.current_page, last_page: suppliers.last_page, @@ -59,8 +54,6 @@ export default function SupplierIndex({ suppliers }: Props) { page, per_page: pagination.per_page, search, - sort: sort.column, - direction: sort.direction, }, { preserveState: true, @@ -76,8 +69,6 @@ export default function SupplierIndex({ suppliers }: Props) { page: 1, per_page: perPage, search, - sort: sort.column, - direction: sort.direction, }, { preserveState: true, @@ -95,8 +86,6 @@ export default function SupplierIndex({ suppliers }: Props) { page: 1, per_page: pagination.per_page, search: value, - sort: sort.column, - direction: sort.direction, }, { preserveState: true, @@ -104,27 +93,9 @@ export default function SupplierIndex({ suppliers }: Props) { }, ); }, - [pagination.per_page, sort], + [pagination.per_page], ); - function handleSortChange(column: string, direction: 'asc' | 'desc') { - setSort({ column, direction }); - router.get( - supplierIndex.url(), - { - page: 1, - per_page: pagination.per_page, - search, - sort: column, - direction, - }, - { - preserveState: true, - replace: true, - }, - ); - } - function handleDelete() { if (!deleting) { return; @@ -254,8 +225,6 @@ export default function SupplierIndex({ suppliers }: Props) { onPageChange={handlePageChange} onPerPageChange={handlePerPageChange} onSearchChange={handleSearchChange} - onSortChange={handleSortChange} - currentSort={sort} searchValue={search} /> diff --git a/resources/js/pages/admin/roles/columns.tsx b/resources/js/pages/admin/roles/columns.tsx index 1f0c170..4d6e9ed 100644 --- a/resources/js/pages/admin/roles/columns.tsx +++ b/resources/js/pages/admin/roles/columns.tsx @@ -1,5 +1,5 @@ import type { ColumnDef } from '@tanstack/react-table'; -import { ArrowUpDown, Pencil, Trash2 } from 'lucide-react'; +import { Pencil, Trash2 } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { Tooltip, @@ -38,18 +38,7 @@ export function createRoleColumns( }, { accessorKey: 'name', - header: ({ column }) => ( - - ), + header: () => Nama Role, cell: ({ row }) => ( {row.getValue('name') as string} diff --git a/resources/js/pages/admin/roles/index.tsx b/resources/js/pages/admin/roles/index.tsx index da5663f..3776019 100644 --- a/resources/js/pages/admin/roles/index.tsx +++ b/resources/js/pages/admin/roles/index.tsx @@ -3,7 +3,7 @@ import { Plus } from 'lucide-react'; import { useCallback, useState } from 'react'; import { ConfirmDialog } from '@/components/confirm-dialog'; import { DataTable } from '@/components/data-table'; -import type { PaginationState, SortState } from '@/components/data-table'; +import type { PaginationState } from '@/components/data-table'; import { Button } from '@/components/ui/button'; import { index as rolesIndex, @@ -27,11 +27,6 @@ type Props = { export default function RoleIndex({ roles }: Props) { const [deleting, setDeleting] = useState(null); const [search, setSearch] = useState(''); - const [sort, setSort] = useState({ - column: 'created_at', - direction: 'desc', - }); - const pagination: PaginationState = { current_page: roles.current_page, last_page: roles.last_page, @@ -46,8 +41,6 @@ export default function RoleIndex({ roles }: Props) { page, per_page: pagination.per_page, search, - sort: sort.column, - direction: sort.direction, }, { preserveState: true, replace: true }, ); @@ -60,8 +53,6 @@ export default function RoleIndex({ roles }: Props) { page: 1, per_page: perPage, search, - sort: sort.column, - direction: sort.direction, }, { preserveState: true, replace: true }, ); @@ -76,30 +67,13 @@ export default function RoleIndex({ roles }: Props) { page: 1, per_page: pagination.per_page, search: value, - sort: sort.column, - direction: sort.direction, }, { preserveState: true, replace: true }, ); }, - [pagination.per_page, sort], + [pagination.per_page], ); - function handleSortChange(column: string, direction: 'asc' | 'desc') { - setSort({ column, direction }); - router.get( - rolesIndex.url(), - { - page: 1, - per_page: pagination.per_page, - search, - sort: column, - direction, - }, - { preserveState: true, replace: true }, - ); - } - function handleDelete() { if (!deleting) { return; @@ -146,8 +120,6 @@ export default function RoleIndex({ roles }: Props) { onPageChange={handlePageChange} onPerPageChange={handlePerPageChange} onSearchChange={handleSearchChange} - onSortChange={handleSortChange} - currentSort={sort} searchValue={search} />