import AdminLayout from '@/Layouts/AdminLayout'; import { Head, Link, router } from '@inertiajs/react'; import { FileText, ExternalLink, Edit, Trash2, MapPin, Tag, CheckCircle2, Circle, ChevronLeft, ChevronRight } from 'lucide-react'; interface CaseStudy { id: number; title: string; tag: string | null; location: string | null; slug: string; is_active: boolean; media?: { url: string; }; } interface PaginationLink { url: string | null; label: string; active: boolean; } interface Props { caseStudies: { data: CaseStudy[]; total: number; links: PaginationLink[]; current_page: number; last_page: number; prev_page_url: string | null; next_page_url: string | null; }; } export default function Index({ caseStudies }: Props) { const deleteCase = (id: number) => { if (confirm('Delete this case study?')) { router.delete(route('admin.case-studies.destroy', id)); } }; const caseStudyList = caseStudies.data || []; return ( {/* Header */}

Case Studies

Manage your portfolio and results.

New Case Study
{/* Mobile View: Cards */}
{caseStudyList.length > 0 ? caseStudyList.map((c) => (
{c.media?.url ? ( ) : ( )}

{c.title}

{c.tag || 'Case Study'}
{c.is_active ? ( ) : ( )}
{c.location || 'Remote'}
Edit
)) : (
No case studies found.
)}
{/* Desktop View: Table */}
{['Case Study', 'Status', 'Location', 'Tag', ''].map((h, i) => ( ))} {caseStudyList.length > 0 ? caseStudyList.map((c) => ( router.get(route('admin.case-studies.edit', c.id))} className="border-b border-[#F0EDE8] last:border-0 hover:bg-[#FAFAF8] transition-colors group cursor-pointer" > )) : ( )}
{h}
{c.media?.url ? ( ) : (
)}

{c.title}
{c.is_active ? ( <> Active ) : ( <> Draft )}
{c.location || '—'}
{c.tag || '—'}
e.stopPropagation()}>
No case studies yet. Build your portfolio.
{/* Pagination */} {caseStudies.last_page > 1 && (

Showing page {caseStudies.current_page} of {caseStudies.last_page}

{caseStudies.links.map((link, i) => { const isPrev = i === 0; const isNext = i === caseStudies.links.length - 1; if (isPrev) { return ( ); } if (isNext) { return ( ); } const isCurrent = link.active; const pageNum = parseInt(link.label); const isNear = Math.abs(pageNum - caseStudies.current_page) <= 1; const isEdge = pageNum === 1 || pageNum === caseStudies.last_page; if (isCurrent || isNear || isEdge) { return ( ); } if (pageNum === caseStudies.current_page - 2 || pageNum === caseStudies.current_page + 2) { return ...; } return null; })}
)} ); }