feat: 實作使用者管理與公共事業費分頁標準化

resources/js/Components/shared/Pagination.tsx

@@ -25,6 +25,25 @@ export default function Pagination({ links, className }: PaginationProps) {
 
                 const isPrevious = label === "Previous";
                 const isNext = label === "Next";
+                const activeIndex = links.findIndex(l => l.active);
+
+                // Tablet/Mobile visibility logic (< md):
+                // Show: Previous, Next, Active, and up to 2 neighbors (Total ~5 numeric pages)
+                // Hide others on small screens (hidden md:flex)
+                // User requested: "small than 800... display 5 pages"
+                const isVisibleOnTablet =
+                    isPrevious ||
+                    isNext ||
+                    link.active ||
+                    key === activeIndex - 1 ||
+                    key === activeIndex + 1 ||
+                    key === activeIndex - 2 ||
+                    key === activeIndex + 2;
+
+                const baseClasses = cn(
+                    isVisibleOnTablet ? "flex" : "hidden md:flex",
+                    "h-9 items-center justify-center rounded-md border px-3 text-sm"
+                );
 
                 // 如果是 Previous/Next 但沒有 URL，則不渲染（或者渲染為 disabled）
                 if ((isPrevious || isNext) && !link.url) {
@@ -32,7 +51,8 @@ export default function Pagination({ links, className }: PaginationProps) {
                         <div
                             key={key}
                             className={cn(
-                                "flex h-9 items-center justify-center rounded-md border border-input bg-transparent px-3 text-sm text-muted-foreground opacity-50 cursor-not-allowed",
+                                baseClasses,
+                                "border-input bg-transparent text-muted-foreground opacity-50 cursor-not-allowed",
                                 isPrevious || isNext ? "px-2" : ""
                             )}
                         >
@@ -49,7 +69,8 @@ export default function Pagination({ links, className }: PaginationProps) {
                         href={link.url}
                         preserveScroll
                         className={cn(
-                            "flex h-9 items-center justify-center rounded-md border px-3 text-sm transition-colors hover:bg-accent hover:text-accent-foreground",
+                            baseClasses,
+                            "transition-colors hover:bg-accent hover:text-accent-foreground",
                             link.active
                                 ? "border-primary bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground"
                                 : "border-input bg-transparent text-foreground",
@@ -63,7 +84,10 @@ export default function Pagination({ links, className }: PaginationProps) {
                 ) : (
                     <div
                         key={key}
-                        className="flex h-9 items-center justify-center rounded-md border border-input bg-transparent px-3 text-sm text-foreground"
+                        className={cn(
+                            baseClasses,
+                            "border-input bg-transparent text-foreground"
+                        )}
                     >
                         <span dangerouslySetInnerHTML={{ __html: link.label }} />
                     </div>