Skip to content

Commit 8977ea5

Browse files
lovable-dev[bot]lovable-dev[bot]
committed
Add pagination to admin tables
Extend pagination logic to AdminCandidates, AdminCompanies, and AdminJobs to show limited page numbers and allow navigating through candidate, company, and job tables similar to AdminApplications. Ensure names, companies, and active positions are paginated with consistent controls. X-Lovable-Edit-ID: edt-b3dd8336-40d2-49d2-af69-a7821034c0ea
2 parents fc021ec + e85d8e4 commit 8977ea5

3 files changed

Lines changed: 210 additions & 6 deletions

File tree

‎src/pages/AdminCandidates.tsx‎

Lines changed: 70 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { Input } from "@/components/ui/input";
1111
import { Label } from "@/components/ui/label";
1212
import { Textarea } from "@/components/ui/textarea";
1313
import { toast } from "@/hooks/use-toast";
14-
import { ArrowLeft, Edit, Trash2, FileText } from "lucide-react";
14+
import { ArrowLeft, Edit, Trash2, FileText, ChevronLeft, ChevronRight } from "lucide-react";
1515

1616
interface Candidate {
1717
id: string;
@@ -38,6 +38,8 @@ export default function AdminCandidates() {
3838
const [candidates, setCandidates] = useState<Candidate[]>([]);
3939
const [editingCandidate, setEditingCandidate] = useState<Candidate | null>(null);
4040
const [deletingId, setDeletingId] = useState<string | null>(null);
41+
const [currentPage, setCurrentPage] = useState(1);
42+
const itemsPerPage = 10;
4143
const [editForm, setEditForm] = useState({
4244
linkedin_url: "",
4345
about_me: "",
@@ -150,6 +152,39 @@ export default function AdminCandidates() {
150152
}
151153
};
152154

155+
const totalPages = Math.ceil(candidates.length / itemsPerPage);
156+
const startIndex = (currentPage - 1) * itemsPerPage;
157+
const endIndex = startIndex + itemsPerPage;
158+
const currentCandidates = candidates.slice(startIndex, endIndex);
159+
160+
const goToPage = (page: number) => {
161+
setCurrentPage(Math.max(1, Math.min(page, totalPages)));
162+
};
163+
164+
const getPageNumbers = () => {
165+
const maxVisible = 5;
166+
const pages: number[] = [];
167+
168+
if (totalPages <= maxVisible) {
169+
for (let i = 1; i <= totalPages; i++) {
170+
pages.push(i);
171+
}
172+
} else {
173+
let startPage = Math.max(1, currentPage - 2);
174+
let endPage = Math.min(totalPages, startPage + maxVisible - 1);
175+
176+
if (endPage - startPage < maxVisible - 1) {
177+
startPage = Math.max(1, endPage - maxVisible + 1);
178+
}
179+
180+
for (let i = startPage; i <= endPage; i++) {
181+
pages.push(i);
182+
}
183+
}
184+
185+
return pages;
186+
};
187+
153188
if (loading) {
154189
return (
155190
<div className="min-h-screen flex items-center justify-center">
@@ -192,7 +227,7 @@ export default function AdminCandidates() {
192227
</TableRow>
193228
</TableHeader>
194229
<TableBody>
195-
{candidates.map((candidate) => (
230+
{currentCandidates.map((candidate) => (
196231
<TableRow key={candidate.id}>
197232
<TableCell className="font-medium">{candidate.full_name}</TableCell>
198233
<TableCell>{candidate.email}</TableCell>
@@ -230,6 +265,39 @@ export default function AdminCandidates() {
230265
))}
231266
</TableBody>
232267
</Table>
268+
269+
{totalPages > 1 && (
270+
<div className="flex items-center justify-center gap-2 mt-4">
271+
<Button
272+
variant="outline"
273+
size="sm"
274+
onClick={() => goToPage(currentPage - 1)}
275+
disabled={currentPage === 1}
276+
>
277+
<ChevronLeft className="h-4 w-4" />
278+
</Button>
279+
280+
{getPageNumbers().map((page) => (
281+
<Button
282+
key={page}
283+
variant={currentPage === page ? "default" : "outline"}
284+
size="sm"
285+
onClick={() => goToPage(page)}
286+
>
287+
{page}
288+
</Button>
289+
))}
290+
291+
<Button
292+
variant="outline"
293+
size="sm"
294+
onClick={() => goToPage(currentPage + 1)}
295+
disabled={currentPage === totalPages}
296+
>
297+
<ChevronRight className="h-4 w-4" />
298+
</Button>
299+
</div>
300+
)}
233301
</CardContent>
234302
</Card>
235303

‎src/pages/AdminCompanies.tsx‎

Lines changed: 70 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { Input } from "@/components/ui/input";
1111
import { Label } from "@/components/ui/label";
1212
import { Textarea } from "@/components/ui/textarea";
1313
import { toast } from "@/hooks/use-toast";
14-
import { ArrowLeft, Edit, Trash2 } from "lucide-react";
14+
import { ArrowLeft, Edit, Trash2, ChevronLeft, ChevronRight } from "lucide-react";
1515

1616
interface Company {
1717
id: string;
@@ -36,6 +36,8 @@ export default function AdminCompanies() {
3636
const [companies, setCompanies] = useState<Company[]>([]);
3737
const [editingCompany, setEditingCompany] = useState<Company | null>(null);
3838
const [deletingId, setDeletingId] = useState<string | null>(null);
39+
const [currentPage, setCurrentPage] = useState(1);
40+
const itemsPerPage = 10;
3941
const [editForm, setEditForm] = useState({
4042
fantasy_name: "",
4143
cnpj: "",
@@ -146,6 +148,39 @@ export default function AdminCompanies() {
146148
}
147149
};
148150

151+
const totalPages = Math.ceil(companies.length / itemsPerPage);
152+
const startIndex = (currentPage - 1) * itemsPerPage;
153+
const endIndex = startIndex + itemsPerPage;
154+
const currentCompanies = companies.slice(startIndex, endIndex);
155+
156+
const goToPage = (page: number) => {
157+
setCurrentPage(Math.max(1, Math.min(page, totalPages)));
158+
};
159+
160+
const getPageNumbers = () => {
161+
const maxVisible = 5;
162+
const pages: number[] = [];
163+
164+
if (totalPages <= maxVisible) {
165+
for (let i = 1; i <= totalPages; i++) {
166+
pages.push(i);
167+
}
168+
} else {
169+
let startPage = Math.max(1, currentPage - 2);
170+
let endPage = Math.min(totalPages, startPage + maxVisible - 1);
171+
172+
if (endPage - startPage < maxVisible - 1) {
173+
startPage = Math.max(1, endPage - maxVisible + 1);
174+
}
175+
176+
for (let i = startPage; i <= endPage; i++) {
177+
pages.push(i);
178+
}
179+
}
180+
181+
return pages;
182+
};
183+
149184
if (loading) {
150185
return (
151186
<div className="min-h-screen flex items-center justify-center">
@@ -188,7 +223,7 @@ export default function AdminCompanies() {
188223
</TableRow>
189224
</TableHeader>
190225
<TableBody>
191-
{companies.map((company) => (
226+
{currentCompanies.map((company) => (
192227
<TableRow key={company.id}>
193228
<TableCell className="font-medium">{company.fantasy_name}</TableCell>
194229
<TableCell>{company.cnpj}</TableCell>
@@ -226,6 +261,39 @@ export default function AdminCompanies() {
226261
))}
227262
</TableBody>
228263
</Table>
264+
265+
{totalPages > 1 && (
266+
<div className="flex items-center justify-center gap-2 mt-4">
267+
<Button
268+
variant="outline"
269+
size="sm"
270+
onClick={() => goToPage(currentPage - 1)}
271+
disabled={currentPage === 1}
272+
>
273+
<ChevronLeft className="h-4 w-4" />
274+
</Button>
275+
276+
{getPageNumbers().map((page) => (
277+
<Button
278+
key={page}
279+
variant={currentPage === page ? "default" : "outline"}
280+
size="sm"
281+
onClick={() => goToPage(page)}
282+
>
283+
{page}
284+
</Button>
285+
))}
286+
287+
<Button
288+
variant="outline"
289+
size="sm"
290+
onClick={() => goToPage(currentPage + 1)}
291+
disabled={currentPage === totalPages}
292+
>
293+
<ChevronRight className="h-4 w-4" />
294+
</Button>
295+
</div>
296+
)}
229297
</CardContent>
230298
</Card>
231299

‎src/pages/AdminJobs.tsx‎

Lines changed: 70 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { Input } from "@/components/ui/input";
1111
import { Label } from "@/components/ui/label";
1212
import { Textarea } from "@/components/ui/textarea";
1313
import { toast } from "@/hooks/use-toast";
14-
import { ArrowLeft, Edit, Trash2 } from "lucide-react";
14+
import { ArrowLeft, Edit, Trash2, ChevronLeft, ChevronRight } from "lucide-react";
1515

1616
interface Job {
1717
id: string;
@@ -37,6 +37,8 @@ export default function AdminJobs() {
3737
const [companies, setCompanies] = useState<Record<string, string>>({});
3838
const [editingJob, setEditingJob] = useState<Job | null>(null);
3939
const [deletingId, setDeletingId] = useState<string | null>(null);
40+
const [currentPage, setCurrentPage] = useState(1);
41+
const itemsPerPage = 10;
4042
const [editForm, setEditForm] = useState({
4143
title: "",
4244
description: "",
@@ -152,6 +154,39 @@ export default function AdminJobs() {
152154
}
153155
};
154156

157+
const totalPages = Math.ceil(jobs.length / itemsPerPage);
158+
const startIndex = (currentPage - 1) * itemsPerPage;
159+
const endIndex = startIndex + itemsPerPage;
160+
const currentJobs = jobs.slice(startIndex, endIndex);
161+
162+
const goToPage = (page: number) => {
163+
setCurrentPage(Math.max(1, Math.min(page, totalPages)));
164+
};
165+
166+
const getPageNumbers = () => {
167+
const maxVisible = 5;
168+
const pages: number[] = [];
169+
170+
if (totalPages <= maxVisible) {
171+
for (let i = 1; i <= totalPages; i++) {
172+
pages.push(i);
173+
}
174+
} else {
175+
let startPage = Math.max(1, currentPage - 2);
176+
let endPage = Math.min(totalPages, startPage + maxVisible - 1);
177+
178+
if (endPage - startPage < maxVisible - 1) {
179+
startPage = Math.max(1, endPage - maxVisible + 1);
180+
}
181+
182+
for (let i = startPage; i <= endPage; i++) {
183+
pages.push(i);
184+
}
185+
}
186+
187+
return pages;
188+
};
189+
155190
if (loading) {
156191
return (
157192
<div className="min-h-screen flex items-center justify-center">
@@ -194,7 +229,7 @@ export default function AdminJobs() {
194229
</TableRow>
195230
</TableHeader>
196231
<TableBody>
197-
{jobs.map((job) => (
232+
{currentJobs.map((job) => (
198233
<TableRow key={job.id}>
199234
<TableCell className="font-medium">{job.title}</TableCell>
200235
<TableCell>{companies[job.company_id] || "N/A"}</TableCell>
@@ -226,6 +261,39 @@ export default function AdminJobs() {
226261
))}
227262
</TableBody>
228263
</Table>
264+
265+
{totalPages > 1 && (
266+
<div className="flex items-center justify-center gap-2 mt-4">
267+
<Button
268+
variant="outline"
269+
size="sm"
270+
onClick={() => goToPage(currentPage - 1)}
271+
disabled={currentPage === 1}
272+
>
273+
<ChevronLeft className="h-4 w-4" />
274+
</Button>
275+
276+
{getPageNumbers().map((page) => (
277+
<Button
278+
key={page}
279+
variant={currentPage === page ? "default" : "outline"}
280+
size="sm"
281+
onClick={() => goToPage(page)}
282+
>
283+
{page}
284+
</Button>
285+
))}
286+
287+
<Button
288+
variant="outline"
289+
size="sm"
290+
onClick={() => goToPage(currentPage + 1)}
291+
disabled={currentPage === totalPages}
292+
>
293+
<ChevronRight className="h-4 w-4" />
294+
</Button>
295+
</div>
296+
)}
229297
</CardContent>
230298
</Card>
231299

0 commit comments

Comments
 (0)