wkadmin/the-tip-top-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: use shared Pagination component in admin pages

Browse Source 
- Replace inline pagination in TicketManagement with Pagination component
- Replace inline pagination in UserManagement with Pagination component
- Reduces duplication from 2.8% to 2.49%

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
soufiane 2025-12-01 20:59:50 +01:00
parent 6020dc7b93
commit c78b68ca4f
2 changed files with 14 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
components/admin/TicketManagement.tsx
View File

@ -3,7 +3,7 @@
import { useState, useEffect, useCallback } from 'react'; import { useState, useEffect, useCallback } from 'react';
import { adminService } from '@/services/admin.service'; import { adminService } from '@/services/admin.service';
import { Ticket } from '@/types'; import { Ticket } from '@/types';
import { StatusBadge } from '@/components/ui'; import { StatusBadge, Pagination } from '@/components/ui';
export default function TicketManagement() { export default function TicketManagement() {
const [tickets, setTickets] = useState<Ticket[]>([]); const [tickets, setTickets] = useState<Ticket[]>([]);
@ -312,25 +312,12 @@ export default function TicketManagement() {
</div> </div>
{/* Pagination */} {/* Pagination */}
<div className="flex justify-center gap-2 mt-4"> <Pagination
<button currentPage={page}
onClick={() => setPage((p) => Math.max(1, p - 1))} totalPages={totalPages}
disabled={page === 1} onPageChange={setPage}
className="px-4 py-2 border rounded disabled:opacity-50 disabled:cursor-not-allowed" showPageNumbers={false}
> />
Précédent
</button>
<span className="px-4 py-2">
Page {page} sur {totalPages}
</span>
<button
onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
disabled={page === totalPages}
className="px-4 py-2 border rounded disabled:opacity-50 disabled:cursor-not-allowed"
>
Suivant
</button>
</div>
{/* Modal détails ticket */} {/* Modal détails ticket */}

26
components/admin/UserManagement.tsx
View File

@ -4,6 +4,7 @@ import { useState, useEffect, useCallback, useMemo } from 'react';
import { useRouter } from 'next/navigation'; import { useRouter } from 'next/navigation';
import { adminService } from '@/services/admin.service'; import { adminService } from '@/services/admin.service';
import { User, CreateEmployeeData, UpdateUserData, PaginatedResponse } from '@/types'; import { User, CreateEmployeeData, UpdateUserData, PaginatedResponse } from '@/types';
import { Pagination } from '@/components/ui';
export default function UserManagement() { export default function UserManagement() {
const router = useRouter(); const router = useRouter();
@ -263,25 +264,12 @@ export default function UserManagement() {
</div> </div>
{/* Pagination */} {/* Pagination */}
<div className="flex justify-center gap-2 mt-4"> <Pagination
<button currentPage={page}
onClick={() => setPage((p) => Math.max(1, p - 1))} totalPages={totalPages}
disabled={page === 1} onPageChange={setPage}
className="px-4 py-2 border rounded disabled:opacity-50 disabled:cursor-not-allowed" showPageNumbers={false}
> />
Précédent
</button>
<span className="px-4 py-2">
Page {page} sur {totalPages}
</span>
<button
onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
disabled={page === totalPages}
className="px-4 py-2 border rounded disabled:opacity-50 disabled:cursor-not-allowed"
>
Suivant
</button>
</div>
{/* Modal créer employé */} {/* Modal créer employé */}
{isCreateEmployeeModalOpen && ( {isCreateEmployeeModalOpen && (