@crmy/web 0.5.1

package/src/components/crm/PaginationBar.tsx

@@ -0,0 +1,111 @@
+// Copyright 2026 CRMy Contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+const PAGE_SIZE_OPTIONS = [25, 50, 100];
+
+function pageNumbers(current: number, total: number): (number | '...')[] {
+  if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
+  const pages: (number | '...')[] = [1];
+  if (current > 3) pages.push('...');
+  for (let i = Math.max(2, current - 1); i <= Math.min(total - 1, current + 1); i++) {
+    pages.push(i);
+  }
+  if (current < total - 2) pages.push('...');
+  pages.push(total);
+  return pages;
+}
+
+export interface PaginationBarProps {
+  page: number;
+  pageSize: number;
+  total: number;
+  onPageChange: (page: number) => void;
+  onPageSizeChange?: (size: number) => void;
+  className?: string;
+}
+
+export function PaginationBar({ page, pageSize, total, onPageChange, onPageSizeChange, className }: PaginationBarProps) {
+  if (total <= pageSize) return null;
+
+  const totalPages = Math.ceil(total / pageSize);
+  const start = (page - 1) * pageSize + 1;
+  const end = Math.min(page * pageSize, total);
+  const pages = pageNumbers(page, totalPages);
+
+  return (
+    <div className={cn('flex flex-wrap items-center justify-between gap-3 pt-3 pb-1', className)}>
+      {/* Count */}
+      <span className="text-xs text-muted-foreground whitespace-nowrap">
+        Showing {start}–{end} of {total}
+      </span>
+
+      {/* Page buttons */}
+      <div className="flex items-center gap-0.5">
+        <button
+          onClick={() => onPageChange(page - 1)}
+          disabled={page === 1}
+          className="p-1.5 rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
+          aria-label="Previous page"
+        >
+          <ChevronLeft className="w-4 h-4" />
+        </button>
+
+        {pages.map((p, i) =>
+          p === '...' ? (
+            <span key={`ellipsis-${i}`} className="w-8 text-center text-xs text-muted-foreground select-none">
+              …
+            </span>
+          ) : (
+            <button
+              key={p}
+              onClick={() => onPageChange(p as number)}
+              className={cn(
+                'w-8 h-8 rounded-lg text-xs font-semibold transition-colors',
+                page === p
+                  ? 'bg-primary text-primary-foreground'
+                  : 'text-muted-foreground hover:text-foreground hover:bg-muted',
+              )}
+            >
+              {p}
+            </button>
+          ),
+        )}
+
+        <button
+          onClick={() => onPageChange(page + 1)}
+          disabled={page === totalPages}
+          className="p-1.5 rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
+          aria-label="Next page"
+        >
+          <ChevronRight className="w-4 h-4" />
+        </button>
+      </div>
+
+      {/* Page size */}
+      {onPageSizeChange && (
+        <div className="flex items-center gap-1.5">
+          <span className="text-xs text-muted-foreground">Per page:</span>
+          <div className="flex items-center gap-0.5 bg-muted rounded-lg p-0.5">
+            {PAGE_SIZE_OPTIONS.map(size => (
+              <button
+                key={size}
+                onClick={() => { onPageSizeChange(size); onPageChange(1); }}
+                className={cn(
+                  'px-2 py-1 rounded-md text-xs font-medium transition-colors',
+                  pageSize === size
+                    ? 'bg-card text-foreground shadow-sm'
+                    : 'text-muted-foreground hover:text-foreground',
+                )}
+              >
+                {size}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}