ui phase 7

client/src/components/common/Pager/Pager.test.tsx

@@ -0,0 +1,35 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ThemeProvider } from '../../../theme';
+
+jest.mock('next-intl', () => ({
+  useTranslations: () => (key: string, values?: Record<string, unknown>) =>
+    values ? `${key}:${JSON.stringify(values)}` : key,
+  useLocale: () => 'en',
+}));
+
+import Pager from './Pager';
+
+describe('<Pager/>', () => {
+  const wrap = (ui: React.ReactNode) => render(<ThemeProvider>{ui}</ThemeProvider>);
+
+  it('renders nothing for a single page', () => {
+    const { container } = wrap(<Pager page={1} pageCount={1} onPrev={jest.fn()} onNext={jest.fn()} />);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('disables prev on the first page and next on the last', () => {
+    wrap(<Pager page={1} pageCount={3} onPrev={jest.fn()} onNext={jest.fn()} />);
+    expect(screen.getByText('page_prev')).toBeDisabled();
+    expect(screen.getByText('page_next')).not.toBeDisabled();
+  });
+
+  it('fires onPrev/onNext', () => {
+    const onPrev = jest.fn();
+    const onNext = jest.fn();
+    wrap(<Pager page={2} pageCount={3} onPrev={onPrev} onNext={onNext} />);
+    fireEvent.click(screen.getByText('page_prev'));
+    fireEvent.click(screen.getByText('page_next'));
+    expect(onPrev).toHaveBeenCalledTimes(1);
+    expect(onNext).toHaveBeenCalledTimes(1);
+  });
+});

client/src/components/common/Pager/Pager.tsx

@@ -0,0 +1,43 @@
+'use client';
+import { FunctionComponent } from 'react';
+import { useLocale, useTranslations } from 'next-intl';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import AppButton from '../AppButton';
+import { formatNumber } from '@/utils';
+
+export interface PagerProps {
+  page: number;
+  pageCount: number;
+  onPrev: () => void;
+  onNext: () => void;
+}
+
+/**
+ * The shared prev/next pager for a paginated list — locale-digit "page X of Y", disabled at either edge,
+ * renders nothing for a single page. Replaces the near-identical inline pagers hand-rolled per list
+ * screen (earnings, payout history, the nurse inbox tabs).
+ * @component Pager
+ */
+const Pager: FunctionComponent<PagerProps> = ({ page, pageCount, onPrev, onNext }) => {
+  const t = useTranslations('common');
+  const locale = useLocale();
+  if (pageCount <= 1) return null;
+  const fmt = (n: number) => formatNumber(n, locale);
+
+  return (
+    <Stack direction="row" sx={{ gap: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <AppButton variant="text" color="primary" onClick={onPrev} disabled={page <= 1}>
+        {t('page_prev')}
+      </AppButton>
+      <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+        {t('page_indicator', { page: fmt(page), total: fmt(pageCount) })}
+      </Typography>
+      <AppButton variant="text" color="primary" onClick={onNext} disabled={page >= pageCount}>
+        {t('page_next')}
+      </AppButton>
+    </Stack>
+  );
+};
+
+export default Pager;

client/src/components/common/Pager/index.tsx

@@ -0,0 +1,4 @@
+import Pager from './Pager';
+
+export default Pager;
+export type { PagerProps } from './Pager';

client/src/components/common/index.tsx

@@ -19,6 +19,7 @@ import JalaliDateField from './JalaliDateField';
 import JalaliDateIntentPicker from './JalaliDateIntentPicker';
 import LocaleSwitcher from './LocaleSwitcher';
 import StickyActionBar from './StickyActionBar';
+import Pager from './Pager';
 
 export {
   ErrorBoundary,
@@ -42,6 +43,7 @@ export {
   JalaliDateIntentPicker,
   LocaleSwitcher,
   StickyActionBar,
+  Pager,
 };
 export type { EmptyStateProps } from './EmptyState';
 export type { ErrorStateProps } from './ErrorState';
@@ -56,3 +58,4 @@ export type { JalaliDatePickerProps } from './JalaliDatePicker';
 export type { JalaliDateFieldProps } from './JalaliDateField';
 export type { JalaliDateIntentPickerProps } from './JalaliDateIntentPicker';
 export type { StickyActionBarProps } from './StickyActionBar';
+export type { PagerProps } from './Pager';