From fa82944ecb4cf5a1faac1a96f07889d36941a26e Mon Sep 17 00:00:00 2001
From: Richard Ward <JohnDoe6345789@gmail.com>
Date: Tue, 30 Dec 2025 18:33:23 +0000
Subject: [PATCH] code: nextjs,frontends,tsx (7 files)

---
 .../pagination/PaginationContent.tsx          |  13 +-
 .../pagination/PaginationEllipsis.tsx         |  13 +-
 .../navigation/pagination/PaginationLink.tsx  |  21 +--
 .../navigation/pagination/PaginationRoot.tsx  |   8 +-
 .../pagination/SimplePagination.tsx           |  40 ++----
 .../navigation/pagination/TablePagination.tsx |  58 ++++----
 .../pagination/pagination.module.scss         | 128 ++++++++++++++++++
 7 files changed, 181 insertions(+), 100 deletions(-)
 create mode 100644 frontends/nextjs/src/components/ui/organisms/navigation/pagination/pagination.module.scss

diff --git a/frontends/nextjs/src/components/ui/organisms/navigation/pagination/PaginationContent.tsx b/frontends/nextjs/src/components/ui/organisms/navigation/pagination/PaginationContent.tsx
index 0475d80be..60e54ca61 100644
--- a/frontends/nextjs/src/components/ui/organisms/navigation/pagination/PaginationContent.tsx
+++ b/frontends/nextjs/src/components/ui/organisms/navigation/pagination/PaginationContent.tsx
@@ -1,8 +1,10 @@
 'use client'
 
-import { Box } from '@mui/material'
+import { Box } from '@/fakemui'
 import { forwardRef, ReactNode } from 'react'
 
+import styles from './pagination.module.scss'
+
 interface PaginationContentProps {
   children: ReactNode
 }
@@ -17,14 +19,7 @@ const PaginationContent = forwardRef<HTMLUListElement, PaginationContentProps>(
       <Box
         ref={ref}
         component="ul"
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: 0.5,
-          listStyle: 'none',
-          p: 0,
-          m: 0,
-        }}
+        className={styles.paginationContent}
         {...props}
       >
         {children}
diff --git a/frontends/nextjs/src/components/ui/organisms/navigation/pagination/PaginationEllipsis.tsx b/frontends/nextjs/src/components/ui/organisms/navigation/pagination/PaginationEllipsis.tsx
index 7f0190a8b..763d2a5e9 100644
--- a/frontends/nextjs/src/components/ui/organisms/navigation/pagination/PaginationEllipsis.tsx
+++ b/frontends/nextjs/src/components/ui/organisms/navigation/pagination/PaginationEllipsis.tsx
@@ -1,21 +1,16 @@
 'use client'
 
-import { Box } from '@mui/material'
+import { Box } from '@/fakemui'
 import { forwardRef } from 'react'
 
+import styles from './pagination.module.scss'
+
 const PaginationEllipsis = forwardRef<HTMLSpanElement, Record<string, never>>((props, ref) => {
   return (
     <Box
       ref={ref}
       component="span"
-      sx={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        width: 36,
-        height: 36,
-        color: 'text.secondary',
-      }}
+      className={styles.paginationEllipsis}
       {...props}
     >
       ...
diff --git a/frontends/nextjs/src/components/ui/organisms/navigation/pagination/PaginationLink.tsx b/frontends/nextjs/src/components/ui/organisms/navigation/pagination/PaginationLink.tsx
index 1454c4344..4b154f8bd 100644
--- a/frontends/nextjs/src/components/ui/organisms/navigation/pagination/PaginationLink.tsx
+++ b/frontends/nextjs/src/components/ui/organisms/navigation/pagination/PaginationLink.tsx
@@ -1,29 +1,22 @@
 'use client'
 
-import { IconButton } from '@mui/material'
+import { IconButton } from '@/fakemui'
 import { forwardRef } from 'react'
 
-import { type PaginationLinkProps, paginationSizeMap } from './paginationTypes'
+import styles from './pagination.module.scss'
+import { type PaginationLinkProps } from './paginationTypes'
 
 const PaginationLink = forwardRef<HTMLButtonElement, PaginationLinkProps>(
   ({ children, onClick, isActive = false, disabled = false, size = 'medium', ...props }, ref) => {
+    const sizeClass = size === 'small' ? styles.paginationLinkSmall : size === 'large' ? styles.paginationLinkLarge : ''
+    const activeClass = isActive ? styles.paginationLinkActive : ''
+    
     return (
       <IconButton
         ref={ref}
         onClick={onClick}
         disabled={disabled}
-        sx={{
-          ...paginationSizeMap[size],
-          borderRadius: 1,
-          bgcolor: isActive ? 'primary.main' : 'transparent',
-          color: isActive ? 'primary.contrastText' : 'text.primary',
-          '&:hover': {
-            bgcolor: isActive ? 'primary.dark' : 'action.hover',
-          },
-          '&.Mui-disabled': {
-            opacity: 0.5,
-          },
-        }}
+        className={`${styles.paginationLink} ${sizeClass} ${activeClass}`}
         {...props}
       >
         {children}
diff --git a/frontends/nextjs/src/components/ui/organisms/navigation/pagination/PaginationRoot.tsx b/frontends/nextjs/src/components/ui/organisms/navigation/pagination/PaginationRoot.tsx
index d3f35e4e2..2113bfe79 100644
--- a/frontends/nextjs/src/components/ui/organisms/navigation/pagination/PaginationRoot.tsx
+++ b/frontends/nextjs/src/components/ui/organisms/navigation/pagination/PaginationRoot.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { Pagination as MuiPagination } from '@mui/material'
+import { Pagination as FakeMuiPagination } from '@/fakemui'
 import { forwardRef } from 'react'
 
 interface PaginationProps {
@@ -38,11 +38,11 @@ const Pagination = forwardRef<HTMLElement, PaginationProps>(
     ref
   ) => {
     return (
-      <MuiPagination
-        ref={ref}
+      <FakeMuiPagination
+        ref={ref as React.Ref<HTMLElement>}
         count={count}
         page={page}
-        onChange={(_, newPage) => onChange(newPage)}
+        onChange={onChange}
         siblingCount={siblingCount}
         boundaryCount={boundaryCount}
         showFirstButton={showFirstButton}
diff --git a/frontends/nextjs/src/components/ui/organisms/navigation/pagination/SimplePagination.tsx b/frontends/nextjs/src/components/ui/organisms/navigation/pagination/SimplePagination.tsx
index be3de74bd..7e7598d62 100644
--- a/frontends/nextjs/src/components/ui/organisms/navigation/pagination/SimplePagination.tsx
+++ b/frontends/nextjs/src/components/ui/organisms/navigation/pagination/SimplePagination.tsx
@@ -1,8 +1,9 @@
 'use client'
 
-import { Box, IconButton, Typography } from '@mui/material'
+import { Box, IconButton, Typography } from '@/fakemui'
 import { forwardRef } from 'react'
 
+import styles from './pagination.module.scss'
 import { NextIcon, PreviousIcon } from './paginationIcons'
 
 interface SimplePaginationProps {
@@ -32,50 +33,27 @@ const SimplePagination = forwardRef<HTMLDivElement, SimplePaginationProps>(
     return (
       <Box
         ref={ref}
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          gap: 2,
-        }}
+        className={styles.simplePagination}
         {...props}
       >
         <IconButton
           onClick={onPrevious}
           disabled={disabled || !hasPrevious}
-          size="small"
-          sx={{
-            border: 1,
-            borderColor: 'divider',
-            borderRadius: 1,
-            px: 2,
-            py: 1,
-            '&:hover': {
-              bgcolor: 'action.hover',
-            },
-          }}
+          sm
+          className={styles.simplePaginationButton}
         >
           <PreviousIcon />
-          <Typography variant="body2" sx={{ ml: 0.5 }}>
+          <Typography variant="body2" className={styles.simplePaginationLabel}>
             {previousLabel}
           </Typography>
         </IconButton>
         <IconButton
           onClick={onNext}
           disabled={disabled || !hasNext}
-          size="small"
-          sx={{
-            border: 1,
-            borderColor: 'divider',
-            borderRadius: 1,
-            px: 2,
-            py: 1,
-            '&:hover': {
-              bgcolor: 'action.hover',
-            },
-          }}
+          sm
+          className={styles.simplePaginationButton}
         >
-          <Typography variant="body2" sx={{ mr: 0.5 }}>
+          <Typography variant="body2" className={styles.simplePaginationLabel}>
             {nextLabel}
           </Typography>
           <NextIcon />
diff --git a/frontends/nextjs/src/components/ui/organisms/navigation/pagination/TablePagination.tsx b/frontends/nextjs/src/components/ui/organisms/navigation/pagination/TablePagination.tsx
index c9c5bc238..dbcd44fa5 100644
--- a/frontends/nextjs/src/components/ui/organisms/navigation/pagination/TablePagination.tsx
+++ b/frontends/nextjs/src/components/ui/organisms/navigation/pagination/TablePagination.tsx
@@ -1,17 +1,10 @@
 'use client'
 
+import { Box, FormControl, IconButton, Select, Typography } from '@/fakemui'
 import { FirstPage as FirstPageIcon, LastPage as LastPageIcon } from '@/fakemui/icons'
-import {
-  Box,
-  FormControl,
-  IconButton,
-  MenuItem,
-  Select,
-  SelectChangeEvent,
-  Typography,
-} from '@mui/material'
-import { forwardRef } from 'react'
+import { forwardRef, ChangeEvent } from 'react'
 
+import styles from './pagination.module.scss'
 import { NextIcon, PreviousIcon } from './paginationIcons'
 
 interface TablePaginationProps {
@@ -44,57 +37,56 @@ const TablePagination = forwardRef<HTMLDivElement, TablePaginationProps>(
     const startItem = (page - 1) * pageSize + 1
     const endItem = Math.min(page * pageSize, count)
 
-    const handlePageSizeChange = (event: SelectChangeEvent<number>) => {
+    const handlePageSizeChange = (event: ChangeEvent<HTMLSelectElement>) => {
       onPageSizeChange(Number(event.target.value))
     }
 
     return (
       <Box
         ref={ref}
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          flexWrap: 'wrap',
-          gap: 2,
-          py: 1,
-        }}
+        className={styles.tablePagination}
         {...props}
       >
-        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-          <Typography variant="body2" color="text.secondary">
+        <Box className={styles.tablePaginationRowsPerPage}>
+          <Typography variant="body2" className={styles.tablePaginationLabel}>
             Rows per page:
           </Typography>
-          <FormControl size="small" disabled={disabled}>
-            <Select value={pageSize} onChange={handlePageSizeChange} sx={{ minWidth: 70 }}>
+          <FormControl sm>
+            <Select
+              value={pageSize}
+              onChange={handlePageSizeChange}
+              disabled={disabled}
+              sm
+              className={styles.tablePaginationSelect}
+            >
               {pageSizeOptions.map(option => (
-                <MenuItem key={option} value={option}>
+                <option key={option} value={option}>
                   {option}
-                </MenuItem>
+                </option>
               ))}
             </Select>
           </FormControl>
         </Box>
 
-        <Typography variant="body2" color="text.secondary">
+        <Typography variant="body2" className={styles.tablePaginationLabel}>
           {count === 0 ? '0' : `${startItem}-${endItem}`} of {count}
         </Typography>
 
-        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+        <Box className={styles.tablePaginationActions}>
           {showFirstLastButtons && (
             <IconButton
               onClick={() => onPageChange(1)}
               disabled={disabled || page === 1}
-              size="small"
+              sm
               aria-label="Go to first page"
             >
-              <FirstPageIcon fontSize="small" />
+              <FirstPageIcon size={16} />
             </IconButton>
           )}
           <IconButton
             onClick={() => onPageChange(page - 1)}
             disabled={disabled || page === 1}
-            size="small"
+            sm
             aria-label="Go to previous page"
           >
             <PreviousIcon />
@@ -102,7 +94,7 @@ const TablePagination = forwardRef<HTMLDivElement, TablePaginationProps>(
           <IconButton
             onClick={() => onPageChange(page + 1)}
             disabled={disabled || page === totalPages}
-            size="small"
+            sm
             aria-label="Go to next page"
           >
             <NextIcon />
@@ -111,10 +103,10 @@ const TablePagination = forwardRef<HTMLDivElement, TablePaginationProps>(
             <IconButton
               onClick={() => onPageChange(totalPages)}
               disabled={disabled || page === totalPages}
-              size="small"
+              sm
               aria-label="Go to last page"
             >
-              <LastPageIcon fontSize="small" />
+              <LastPageIcon size={16} />
             </IconButton>
           )}
         </Box>
diff --git a/frontends/nextjs/src/components/ui/organisms/navigation/pagination/pagination.module.scss b/frontends/nextjs/src/components/ui/organisms/navigation/pagination/pagination.module.scss
new file mode 100644
index 000000000..39bfa00f9
--- /dev/null
+++ b/frontends/nextjs/src/components/ui/organisms/navigation/pagination/pagination.module.scss
@@ -0,0 +1,128 @@
+// Pagination component styles
+// Migrated from @mui/material sx props to SCSS modules
+
+// PaginationContent
+.paginationContent {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+// PaginationEllipsis
+.paginationEllipsis {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  color: var(--text-secondary, #666);
+}
+
+// PaginationLink
+.paginationLink {
+  min-width: 36px;
+  height: 36px;
+  border-radius: 4px;
+  background-color: transparent;
+  color: var(--text-primary, #333);
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s ease, color 0.2s ease;
+
+  &:hover:not(:disabled) {
+    background-color: var(--action-hover, rgba(0, 0, 0, 0.04));
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+.paginationLinkSmall {
+  min-width: 28px;
+  height: 28px;
+}
+
+.paginationLinkLarge {
+  min-width: 44px;
+  height: 44px;
+}
+
+.paginationLinkActive {
+  background-color: var(--primary-main, #1976d2);
+  color: var(--primary-contrast-text, #fff);
+
+  &:hover:not(:disabled) {
+    background-color: var(--primary-dark, #1565c0);
+  }
+}
+
+// SimplePagination
+.simplePagination {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.simplePaginationButton {
+  border: 1px solid var(--divider, rgba(0, 0, 0, 0.12));
+  border-radius: 4px;
+  padding: 0.5rem 1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  background-color: transparent;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+
+  &:hover:not(:disabled) {
+    background-color: var(--action-hover, rgba(0, 0, 0, 0.04));
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+.simplePaginationLabel {
+  margin: 0 0.25rem;
+}
+
+// TablePagination
+.tablePagination {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 1rem;
+  padding: 0.5rem 0;
+}
+
+.tablePaginationRowsPerPage {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.tablePaginationLabel {
+  color: var(--text-secondary, #666);
+}
+
+.tablePaginationSelect {
+  min-width: 70px;
+}
+
+.tablePaginationActions {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}