feat: add multi-user support and role-based access control #31

web/src/features/accounts/components/data-table-pagination.tsx

@@ -32,51 +32,66 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select'
+import { useTranslation } from 'react-i18next'
 
 interface DataTablePaginationProps<TData> {
   table: Table<TData>
-  showSelected?: boolean,
+  showSelected?: boolean
   showPageSizeSelector?: boolean
 }
 
 export function DataTablePagination<TData>({
   table,
-  showSelected = true,
+  showSelected = false,
   showPageSizeSelector = true
 }: DataTablePaginationProps<TData>) {
+  const { t } = useTranslation()
+
   return (
     <div className='flex items-center justify-between overflow-auto px-2'>
-      {showSelected && <div className='hidden flex-1 text-sm text-muted-foreground sm:block'>
-        {table.getFilteredSelectedRowModel().rows.length} of{' '}
-        {table.getFilteredRowModel().rows.length} row(s) selected.
-      </div>}
-      {!showPageSizeSelector && <div className='hidden flex-1 text-sm text-muted-foreground sm:block'>
-        10 rows per page.
-      </div>}
+      {showSelected && (
+        <div className='hidden flex-1 text-sm text-muted-foreground sm:block'>
+          {t('table.pagination.selected', {
+            selected: table.getFilteredSelectedRowModel().rows.length,
+            total: table.getFilteredRowModel().rows.length,
+          })}
+        </div>
+      )}
+      {!showPageSizeSelector && (
+        <div className='hidden flex-1 text-sm text-muted-foreground sm:block'>
+          {t('table.pagination.fixed_page_size', { size: 10 })}
+        </div>
+      )}
       <div className='flex items-center sm:space-x-6 lg:space-x-8 ml-auto'>
-        {showPageSizeSelector && <div className='flex items-center space-x-2'>
-          <p className='hidden text-sm font-medium sm:block'>Rows per page</p>
-          <Select
-            value={`${table.getState().pagination.pageSize}`}
-            onValueChange={(value) => {
-              table.setPageSize(Number(value))
-            }}
-          >
-            <SelectTrigger className='h-8 w-[70px]'>
-              <SelectValue placeholder={table.getState().pagination.pageSize} />
-            </SelectTrigger>
-            <SelectContent side='top'>
-              {[10, 20, 30, 40, 50].map((pageSize) => (
-                <SelectItem key={pageSize} value={`${pageSize}`}>
-                  {pageSize}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>}
-        <div className='flex w-[100px] items-center justify-center text-sm font-medium'>
-          Page {table.getState().pagination.pageIndex + 1} of{' '}
-          {table.getPageCount()}
+        {showPageSizeSelector && (
+          <div className='flex items-center space-x-2'>
+            <p className='hidden text-sm font-medium sm:block'>
+              {t('table.pagination.rows_per_page')}
+            </p>
+            <Select
+              value={`${table.getState().pagination.pageSize}`}
+              onValueChange={(value) => {
+                table.setPageSize(Number(value))
+              }}
+            >
+              <SelectTrigger className='h-8 w-[70px]'>
+                <SelectValue placeholder={table.getState().pagination.pageSize} />
+              </SelectTrigger>
+              <SelectContent side='top'>
+                {[10, 20, 30, 40, 50].map((pageSize) => (
+                  <SelectItem key={pageSize} value={`${pageSize}`}>
+                    {pageSize}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        )}
+        <div className='flex w-[130px] items-center justify-center text-sm font-medium'>
+          {t('table.pagination.page_info', {
+            page: table.getState().pagination.pageIndex + 1,
+            total: table.getPageCount(),
+          })}
         </div>
         <div className='flex items-center space-x-2'>
           <Button
@@ -85,7 +100,7 @@ export function DataTablePagination<TData>({
             onClick={() => table.setPageIndex(0)}
             disabled={!table.getCanPreviousPage()}
           >
-            <span className='sr-only'>Go to first page</span>
+            <span className='sr-only'>{t('table.pagination.first')}</span>
             <DoubleArrowLeftIcon className='h-4 w-4' />
           </Button>
           <Button
@@ -94,7 +109,7 @@ export function DataTablePagination<TData>({
             onClick={() => table.previousPage()}
             disabled={!table.getCanPreviousPage()}
           >
-            <span className='sr-only'>Go to previous page</span>
+            <span className='sr-only'>{t('table.pagination.previous')}</span>
             <ChevronLeftIcon className='h-4 w-4' />
           </Button>
           <Button
@@ -103,7 +118,7 @@ export function DataTablePagination<TData>({
             onClick={() => table.nextPage()}
             disabled={!table.getCanNextPage()}
           >
-            <span className='sr-only'>Go to next page</span>
+            <span className='sr-only'>{t('table.pagination.next')}</span>
             <ChevronRightIcon className='h-4 w-4' />
           </Button>
           <Button
@@ -112,7 +127,7 @@ export function DataTablePagination<TData>({
             onClick={() => table.setPageIndex(table.getPageCount() - 1)}
             disabled={!table.getCanNextPage()}
           >
-            <span className='sr-only'>Go to last page</span>
+            <span className='sr-only'>{t('table.pagination.last')}</span>
             <DoubleArrowRightIcon className='h-4 w-4' />
           </Button>
         </div>