From 040b41ed90a87958ec9dcf6e22c99a4b97b04809 Mon Sep 17 00:00:00 2001
From: BOHA <boha@boha.cz>
Date: Mon, 23 Mar 2026 13:59:49 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20pagination=20component=20=E2=80=94=20use?=
 =?UTF-8?q?=20correct=20CSS=20class=20names?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Component used admin-pagination-btn/pages/dots but CSS has
admin-pagination-page/controls/ellipsis. Fixed to match existing CSS.
Added record count display.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/admin/components/Pagination.tsx | 29 ++++++++++++++++++++++-------
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/admin/components/Pagination.tsx b/src/admin/components/Pagination.tsx
index 1ccbb65..5daf8e1 100644
--- a/src/admin/components/Pagination.tsx
+++ b/src/admin/components/Pagination.tsx
@@ -12,7 +12,7 @@ interface PaginationProps {
 export default function Pagination({ pagination, onPageChange, onPerPageChange }: PaginationProps) {
   if (!pagination || pagination.total_pages <= 1) return null
 
-  const { page, total_pages } = pagination
+  const { page, total_pages, total } = pagination
 
   const getPages = () => {
     const pages: (number | string)[] = []
@@ -29,20 +29,35 @@ export default function Pagination({ pagination, onPageChange, onPerPageChange }
 
   return (
     <div className="admin-pagination">
-      <div className="admin-pagination-pages">
-        <button disabled={page <= 1} onClick={() => onPageChange(page - 1)} className="admin-pagination-btn">
+      <div className="admin-pagination-info">
+        {total} záznamů
+      </div>
+      <div className="admin-pagination-controls">
+        <button
+          disabled={page <= 1}
+          onClick={() => onPageChange(page - 1)}
+          className="admin-pagination-page"
+        >
           <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M15 18l-6-6 6-6" /></svg>
         </button>
         {getPages().map((p, i) =>
           typeof p === 'string' ? (
-            <span key={`dots-${i}`} className="admin-pagination-dots">...</span>
+            <span key={`dots-${i}`} className="admin-pagination-ellipsis">...</span>
           ) : (
-            <button key={p} onClick={() => onPageChange(p)} className={`admin-pagination-btn ${p === page ? 'active' : ''}`}>
+            <button
+              key={p}
+              onClick={() => onPageChange(p)}
+              className={`admin-pagination-page ${p === page ? 'active' : ''}`}
+            >
               {p}
             </button>
           )
         )}
-        <button disabled={page >= total_pages} onClick={() => onPageChange(page + 1)} className="admin-pagination-btn">
+        <button
+          disabled={page >= total_pages}
+          onClick={() => onPageChange(page + 1)}
+          className="admin-pagination-page"
+        >
           <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M9 18l6-6-6-6" /></svg>
         </button>
       </div>
@@ -50,7 +65,7 @@ export default function Pagination({ pagination, onPageChange, onPerPageChange }
         <select
           value={pagination.per_page}
           onChange={e => onPerPageChange(Number(e.target.value))}
-          className="admin-form-select admin-pagination-select"
+          className="admin-pagination-select"
         >
           {[10, 25, 50, 100].map(n => (
             <option key={n} value={n}>{n} / stránka</option>