Improve projects UX, settings layout, uppercase names, per-page selector, and fix round deletion

- Fix round deletion FK constraint: add onDelete Cascade on Evaluation.form and SetNull on ProjectFile.round
- Add configurable per-page selector (10/20/50/100) to Pagination component, wired in projects page with URL sync
- Add display_project_names_uppercase setting in admin defaults, applied to project titles across desktop/mobile views
- Redesign admin settings page: vertical sidebar nav on desktop with grouped sections, horizontal scrollable tabs on mobile
- Polish projects page: responsive header with total count, search clear button with result count, status stats bar, submission date column, country display, mobile card file count

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

prisma/schema.prisma

@@ -628,7 +628,7 @@ model ProjectFile {
 
   // Relations
   project     Project          @relation(fields: [projectId], references: [id], onDelete: Cascade)
-  round       Round?           @relation(fields: [roundId], references: [id])
+  round       Round?           @relation(fields: [roundId], references: [id], onDelete: SetNull)
   requirement FileRequirement? @relation(fields: [requirementId], references: [id], onDelete: SetNull)
   replacedBy  ProjectFile?     @relation("FileVersions", fields: [replacedById], references: [id], onDelete: SetNull)
   replacements ProjectFile[]   @relation("FileVersions")
@@ -706,7 +706,7 @@ model Evaluation {
 
   // Relations
   assignment Assignment     @relation(fields: [assignmentId], references: [id], onDelete: Cascade)
-  form       EvaluationForm @relation(fields: [formId], references: [id])
+  form       EvaluationForm @relation(fields: [formId], references: [id], onDelete: Cascade)
 
   @@index([status])
   @@index([submittedAt])

src/app/(admin)/admin/projects/page.tsx

@@ -104,7 +104,7 @@ const statusColors: Record<
 
 function parseFiltersFromParams(
   searchParams: URLSearchParams
-): ProjectFilters & { page: number } {
+): ProjectFilters & { page: number; perPage: number } {
   return {
     search: searchParams.get('q') || '',
     statuses: searchParams.get('status')
@@ -133,11 +133,12 @@ function parseFiltersFromParams(
           ? false
           : undefined,
     page: parseInt(searchParams.get('page') || '1', 10),
+    perPage: parseInt(searchParams.get('pp') || '20', 10),
   }
 }
 
 function filtersToParams(
-  filters: ProjectFilters & { page: number }
+  filters: ProjectFilters & { page: number; perPage: number }
 ): URLSearchParams {
   const params = new URLSearchParams()
   if (filters.search) params.set('q', filters.search)
@@ -155,11 +156,10 @@ function filtersToParams(
   if (filters.hasAssignments !== undefined)
     params.set('hasAssign', String(filters.hasAssignments))
   if (filters.page > 1) params.set('page', String(filters.page))
+  if (filters.perPage !== 20) params.set('pp', String(filters.perPage))
   return params
 }
 
-const PER_PAGE = 20
-
 export default function ProjectsPage() {
 
   const pathname = usePathname()
@@ -178,8 +178,17 @@ export default function ProjectsPage() {
     hasAssignments: parsed.hasAssignments,
   })
   const [page, setPage] = useState(parsed.page)
+  const [perPage, setPerPage] = useState(parsed.perPage || 20)
   const [searchInput, setSearchInput] = useState(parsed.search)
 
+  // Fetch display settings
+  const { data: displaySettings } = trpc.settings.getMultiple.useQuery({
+    keys: ['display_project_names_uppercase'],
+  })
+  const uppercaseNames = displaySettings?.find(
+    (s: { key: string; value: string }) => s.key === 'display_project_names_uppercase'
+  )?.value !== 'false'
+
   // Debounced search
   useEffect(() => {
     const timer = setTimeout(() => {
@@ -193,8 +202,8 @@ export default function ProjectsPage() {
 
   // Sync URL
   const syncUrl = useCallback(
-    (f: ProjectFilters, p: number) => {
-      const params = filtersToParams({ ...f, page: p })
+    (f: ProjectFilters, p: number, pp: number) => {
+      const params = filtersToParams({ ...f, page: p, perPage: pp })
       const qs = params.toString()
       window.history.replaceState(null, '', qs ? `${pathname}?${qs}` : pathname)
     },
@@ -202,8 +211,13 @@ export default function ProjectsPage() {
   )
 
   useEffect(() => {
-    syncUrl(filters, page)
-  }, [filters, page, syncUrl])
+    syncUrl(filters, page, perPage)
+  }, [filters, page, perPage, syncUrl])
+
+  const handlePerPageChange = (newPerPage: number) => {
+    setPerPage(newPerPage)
+    setPage(1)
+  }
 
   // Reset page when filters change
   const handleFiltersChange = (newFilters: ProjectFilters) => {
@@ -248,7 +262,7 @@ export default function ProjectsPage() {
     hasFiles: filters.hasFiles,
     hasAssignments: filters.hasAssignments,
     page,
-    perPage: PER_PAGE,
+    perPage,
   }
 
   const utils = trpc.useUtils()
@@ -459,14 +473,14 @@ export default function ProjectsPage() {
   return (
     <div className="space-y-6">
       {/* Header */}
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
         <div>
           <h1 className="text-2xl font-semibold tracking-tight">Projects</h1>
           <p className="text-muted-foreground">
-            Manage submitted projects across all rounds
+            {data ? `${data.total} projects across all rounds` : 'Manage submitted projects across all rounds'}
           </p>
         </div>
-        <div className="flex gap-2">
+        <div className="flex flex-wrap gap-2">
           <Button variant="outline" asChild>
             <Link href="/admin/projects/pool">
               <Layers className="mr-2 h-4 w-4" />
@@ -493,14 +507,30 @@ export default function ProjectsPage() {
       </div>
 
       {/* Search */}
-      <div className="relative">
-        <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-        <Input
-          value={searchInput}
-          onChange={(e) => setSearchInput(e.target.value)}
-          placeholder="Search projects by title, team, or description..."
-          className="pl-10"
-        />
+      <div className="space-y-1">
+        <div className="relative">
+          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            value={searchInput}
+            onChange={(e) => setSearchInput(e.target.value)}
+            placeholder="Search projects by title, team, or description..."
+            className="pl-10 pr-10"
+          />
+          {searchInput && (
+            <button
+              type="button"
+              onClick={() => setSearchInput('')}
+              className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+            >
+              <X className="h-4 w-4" />
+            </button>
+          )}
+        </div>
+        {filters.search && data && (
+          <p className="text-xs text-muted-foreground pl-1">
+            {data.total} result{data.total !== 1 ? 's' : ''} for &ldquo;{filters.search}&rdquo;
+          </p>
+        )}
       </div>
 
       {/* Filters */}
@@ -510,6 +540,37 @@ export default function ProjectsPage() {
         onChange={handleFiltersChange}
       />
 
+      {/* Stats Summary */}
+      {data && data.projects.length > 0 && (
+        <div className="flex flex-wrap items-center gap-2 text-sm">
+          {Object.entries(
+            data.projects.reduce<Record<string, number>>((acc, p) => {
+              const s = p.status ?? 'SUBMITTED'
+              acc[s] = (acc[s] || 0) + 1
+              return acc
+            }, {})
+          )
+            .sort(([a], [b]) => {
+              const order = ['SUBMITTED', 'ELIGIBLE', 'ASSIGNED', 'SEMIFINALIST', 'FINALIST', 'WINNER', 'REJECTED', 'WITHDRAWN']
+              return order.indexOf(a) - order.indexOf(b)
+            })
+            .map(([status, count]) => (
+              <Badge
+                key={status}
+                variant={statusColors[status] || 'secondary'}
+                className="text-xs font-normal"
+              >
+                {count} {status.charAt(0) + status.slice(1).toLowerCase().replace('_', ' ')}
+              </Badge>
+            ))}
+          {data.total > data.projects.length && (
+            <span className="text-xs text-muted-foreground ml-1">
+              (page {data.page} of {data.totalPages})
+            </span>
+          )}
+        </div>
+      )}
+
       {/* Content */}
       {isLoading ? (
         <Card>
@@ -576,10 +637,11 @@ export default function ProjectsPage() {
                       />
                     </TableHead>
                   )}
-                  <TableHead>Project</TableHead>
+                  <TableHead className="min-w-[280px]">Project</TableHead>
                   <TableHead>Round</TableHead>
                   <TableHead>Files</TableHead>
                   <TableHead>Assignments</TableHead>
+                  <TableHead>Submitted</TableHead>
                   <TableHead>Status</TableHead>
                   <TableHead className="text-right">Actions</TableHead>
                 </TableRow>
@@ -613,11 +675,14 @@ export default function ProjectsPage() {
                           fallback="initials"
                         />
                         <div>
-                          <p className="font-medium hover:text-primary">
+                          <p className={`font-medium hover:text-primary ${uppercaseNames ? 'uppercase' : ''}`}>
                             {truncate(project.title, 40)}
                           </p>
                           <p className="text-sm text-muted-foreground">
                             {project.teamName}
+                            {project.country && (
+                              <span className="text-xs text-muted-foreground/70"> · {project.country}</span>
+                            )}
                           </p>
                         </div>
                       </Link>
@@ -650,6 +715,11 @@ export default function ProjectsPage() {
                         {project._count.assignments}
                       </div>
                     </TableCell>
+                    <TableCell className="text-sm text-muted-foreground">
+                      {project.createdAt
+                        ? new Date(project.createdAt).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' })
+                        : '-'}
+                    </TableCell>
                     <TableCell>
                       <StatusBadge status={project.status ?? 'SUBMITTED'} />
                     </TableCell>
@@ -733,7 +803,7 @@ export default function ProjectsPage() {
                       />
                       <div className="flex-1 min-w-0">
                         <div className="flex items-start justify-between gap-2">
-                          <CardTitle className="text-base line-clamp-2">
+                          <CardTitle className={`text-base line-clamp-2 ${uppercaseNames ? 'uppercase' : ''}`}>
                             {project.title}
                           </CardTitle>
                           <StatusBadge
@@ -761,6 +831,16 @@ export default function ProjectsPage() {
                       <span className="text-muted-foreground">Assignments</span>
                       <span>{project._count.assignments} jurors</span>
                     </div>
+                    <div className="flex items-center justify-between text-sm">
+                      <span className="text-muted-foreground">Files</span>
+                      <span>{project._count?.files ?? 0}</span>
+                    </div>
+                    {project.createdAt && (
+                      <div className="flex items-center justify-between text-sm">
+                        <span className="text-muted-foreground">Submitted</span>
+                        <span>{new Date(project.createdAt).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' })}</span>
+                      </div>
+                    )}
                   </CardContent>
                 </Card>
               </Link>
@@ -773,8 +853,9 @@ export default function ProjectsPage() {
             page={data.page}
             totalPages={data.totalPages}
             total={data.total}
-            perPage={PER_PAGE}
+            perPage={perPage}
             onPageChange={setPage}
+            onPerPageChange={handlePerPageChange}
           />
         </>
       ) : null}

src/components/settings/defaults-settings-form.tsx

@@ -8,6 +8,7 @@ import { Loader2, Settings } from 'lucide-react'
 import { trpc } from '@/lib/trpc/client'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
+import { Switch } from '@/components/ui/switch'
 import {
   Form,
   FormControl,
@@ -41,6 +42,7 @@ const formSchema = z.object({
   default_timezone: z.string().min(1, 'Timezone is required'),
   default_page_size: z.string().regex(/^\d+$/, 'Must be a number'),
   autosave_interval_seconds: z.string().regex(/^\d+$/, 'Must be a number'),
+  display_project_names_uppercase: z.string().optional(),
 })
 
 type FormValues = z.infer<typeof formSchema>
@@ -50,6 +52,7 @@ interface DefaultsSettingsFormProps {
     default_timezone?: string
     default_page_size?: string
     autosave_interval_seconds?: string
+    display_project_names_uppercase?: string
   }
 }
 
@@ -62,6 +65,7 @@ export function DefaultsSettingsForm({ settings }: DefaultsSettingsFormProps) {
       default_timezone: settings.default_timezone || 'Europe/Monaco',
       default_page_size: settings.default_page_size || '20',
       autosave_interval_seconds: settings.autosave_interval_seconds || '30',
+      display_project_names_uppercase: settings.display_project_names_uppercase || 'true',
     },
   })
 
@@ -81,6 +85,7 @@ export function DefaultsSettingsForm({ settings }: DefaultsSettingsFormProps) {
         { key: 'default_timezone', value: data.default_timezone },
         { key: 'default_page_size', value: data.default_page_size },
         { key: 'autosave_interval_seconds', value: data.autosave_interval_seconds },
+        { key: 'display_project_names_uppercase', value: data.display_project_names_uppercase || 'true' },
       ],
     })
   }
@@ -162,6 +167,29 @@ export function DefaultsSettingsForm({ settings }: DefaultsSettingsFormProps) {
           )}
         />
 
+        <FormField
+          control={form.control}
+          name="display_project_names_uppercase"
+          render={({ field }) => (
+            <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
+              <div className="space-y-0.5">
+                <FormLabel className="text-base">
+                  Display Project Names in Uppercase
+                </FormLabel>
+                <FormDescription>
+                  Show all project names in uppercase across the platform for a cleaner presentation
+                </FormDescription>
+              </div>
+              <FormControl>
+                <Switch
+                  checked={field.value === 'true'}
+                  onCheckedChange={(checked) => field.onChange(String(checked))}
+                />
+              </FormControl>
+            </FormItem>
+          )}
+        />
+
         <Button type="submit" disabled={updateSettings.isPending}>
           {updateSettings.isPending ? (
             <>

src/components/settings/settings-content.tsx

@@ -116,6 +116,7 @@ export function SettingsContent({ initialSettings }: SettingsContentProps) {
     'default_timezone',
     'default_page_size',
     'autosave_interval_seconds',
+    'display_project_names_uppercase',
   ])
 
   const digestSettings = getSettingsByKeys([
@@ -152,58 +153,142 @@ export function SettingsContent({ initialSettings }: SettingsContentProps) {
 
   return (
     <>
-    <Tabs defaultValue="ai" className="space-y-6">
-      <TabsList className="flex flex-wrap h-auto gap-1">
-        <TabsTrigger value="ai" className="gap-2">
-          <Bot className="h-4 w-4" />
-          <span className="hidden sm:inline">AI</span>
-        </TabsTrigger>
-        <TabsTrigger value="tags" className="gap-2">
-          <Tags className="h-4 w-4" />
-          <span className="hidden sm:inline">Tags</span>
-        </TabsTrigger>
-        <TabsTrigger value="branding" className="gap-2">
-          <Palette className="h-4 w-4" />
-          <span className="hidden sm:inline">Branding</span>
-        </TabsTrigger>
-        <TabsTrigger value="email" className="gap-2">
-          <Mail className="h-4 w-4" />
-          <span className="hidden sm:inline">Email</span>
-        </TabsTrigger>
-        <TabsTrigger value="notifications" className="gap-2">
-          <Bell className="h-4 w-4" />
-          <span className="hidden sm:inline">Notifications</span>
-        </TabsTrigger>
-        <TabsTrigger value="storage" className="gap-2">
-          <HardDrive className="h-4 w-4" />
-          <span className="hidden sm:inline">Storage</span>
-        </TabsTrigger>
-        <TabsTrigger value="security" className="gap-2">
-          <Shield className="h-4 w-4" />
-          <span className="hidden sm:inline">Security</span>
-        </TabsTrigger>
-        <TabsTrigger value="defaults" className="gap-2">
+    <Tabs defaultValue="defaults" className="space-y-6">
+      {/* Mobile: horizontal scrollable tabs */}
+      <TabsList className="flex h-auto gap-1 overflow-x-auto whitespace-nowrap lg:hidden">
+        <TabsTrigger value="defaults" className="gap-2 shrink-0">
           <SettingsIcon className="h-4 w-4" />
-          <span className="hidden sm:inline">Defaults</span>
+          Defaults
         </TabsTrigger>
-        <TabsTrigger value="digest" className="gap-2">
-          <Newspaper className="h-4 w-4" />
-          <span className="hidden sm:inline">Digest</span>
+        <TabsTrigger value="branding" className="gap-2 shrink-0">
+          <Palette className="h-4 w-4" />
+          Branding
         </TabsTrigger>
-        <TabsTrigger value="analytics" className="gap-2">
-          <BarChart3 className="h-4 w-4" />
-          <span className="hidden sm:inline">Analytics</span>
-        </TabsTrigger>
-        <TabsTrigger value="audit" className="gap-2">
-          <ShieldAlert className="h-4 w-4" />
-          <span className="hidden sm:inline">Audit</span>
-        </TabsTrigger>
-        <TabsTrigger value="localization" className="gap-2">
+        <TabsTrigger value="localization" className="gap-2 shrink-0">
           <Globe className="h-4 w-4" />
-          <span className="hidden sm:inline">Locale</span>
+          Locale
+        </TabsTrigger>
+        <TabsTrigger value="email" className="gap-2 shrink-0">
+          <Mail className="h-4 w-4" />
+          Email
+        </TabsTrigger>
+        <TabsTrigger value="notifications" className="gap-2 shrink-0">
+          <Bell className="h-4 w-4" />
+          Notif.
+        </TabsTrigger>
+        <TabsTrigger value="digest" className="gap-2 shrink-0">
+          <Newspaper className="h-4 w-4" />
+          Digest
+        </TabsTrigger>
+        <TabsTrigger value="security" className="gap-2 shrink-0">
+          <Shield className="h-4 w-4" />
+          Security
+        </TabsTrigger>
+        <TabsTrigger value="audit" className="gap-2 shrink-0">
+          <ShieldAlert className="h-4 w-4" />
+          Audit
+        </TabsTrigger>
+        <TabsTrigger value="ai" className="gap-2 shrink-0">
+          <Bot className="h-4 w-4" />
+          AI
+        </TabsTrigger>
+        <TabsTrigger value="tags" className="gap-2 shrink-0">
+          <Tags className="h-4 w-4" />
+          Tags
+        </TabsTrigger>
+        <TabsTrigger value="analytics" className="gap-2 shrink-0">
+          <BarChart3 className="h-4 w-4" />
+          Analytics
+        </TabsTrigger>
+        <TabsTrigger value="storage" className="gap-2 shrink-0">
+          <HardDrive className="h-4 w-4" />
+          Storage
         </TabsTrigger>
       </TabsList>
 
+      <div className="lg:flex lg:gap-8">
+      {/* Desktop: sidebar navigation */}
+      <div className="hidden lg:block lg:w-56 lg:shrink-0">
+        <nav className="space-y-6">
+          <div>
+            <p className="mb-2 px-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground">General</p>
+            <TabsList className="flex flex-col items-stretch h-auto w-full bg-transparent p-0 gap-0.5">
+              <TabsTrigger value="defaults" className="justify-start gap-2 w-full px-3 py-2 h-auto data-[state=active]:bg-muted">
+                <SettingsIcon className="h-4 w-4" />
+                Defaults
+              </TabsTrigger>
+              <TabsTrigger value="branding" className="justify-start gap-2 w-full px-3 py-2 h-auto data-[state=active]:bg-muted">
+                <Palette className="h-4 w-4" />
+                Branding
+              </TabsTrigger>
+              <TabsTrigger value="localization" className="justify-start gap-2 w-full px-3 py-2 h-auto data-[state=active]:bg-muted">
+                <Globe className="h-4 w-4" />
+                Locale
+              </TabsTrigger>
+            </TabsList>
+          </div>
+          <div>
+            <p className="mb-2 px-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground">Communication</p>
+            <TabsList className="flex flex-col items-stretch h-auto w-full bg-transparent p-0 gap-0.5">
+              <TabsTrigger value="email" className="justify-start gap-2 w-full px-3 py-2 h-auto data-[state=active]:bg-muted">
+                <Mail className="h-4 w-4" />
+                Email
+              </TabsTrigger>
+              <TabsTrigger value="notifications" className="justify-start gap-2 w-full px-3 py-2 h-auto data-[state=active]:bg-muted">
+                <Bell className="h-4 w-4" />
+                Notifications
+              </TabsTrigger>
+              <TabsTrigger value="digest" className="justify-start gap-2 w-full px-3 py-2 h-auto data-[state=active]:bg-muted">
+                <Newspaper className="h-4 w-4" />
+                Digest
+              </TabsTrigger>
+            </TabsList>
+          </div>
+          <div>
+            <p className="mb-2 px-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground">Security</p>
+            <TabsList className="flex flex-col items-stretch h-auto w-full bg-transparent p-0 gap-0.5">
+              <TabsTrigger value="security" className="justify-start gap-2 w-full px-3 py-2 h-auto data-[state=active]:bg-muted">
+                <Shield className="h-4 w-4" />
+                Security
+              </TabsTrigger>
+              <TabsTrigger value="audit" className="justify-start gap-2 w-full px-3 py-2 h-auto data-[state=active]:bg-muted">
+                <ShieldAlert className="h-4 w-4" />
+                Audit
+              </TabsTrigger>
+            </TabsList>
+          </div>
+          <div>
+            <p className="mb-2 px-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground">Features</p>
+            <TabsList className="flex flex-col items-stretch h-auto w-full bg-transparent p-0 gap-0.5">
+              <TabsTrigger value="ai" className="justify-start gap-2 w-full px-3 py-2 h-auto data-[state=active]:bg-muted">
+                <Bot className="h-4 w-4" />
+                AI
+              </TabsTrigger>
+              <TabsTrigger value="tags" className="justify-start gap-2 w-full px-3 py-2 h-auto data-[state=active]:bg-muted">
+                <Tags className="h-4 w-4" />
+                Tags
+              </TabsTrigger>
+              <TabsTrigger value="analytics" className="justify-start gap-2 w-full px-3 py-2 h-auto data-[state=active]:bg-muted">
+                <BarChart3 className="h-4 w-4" />
+                Analytics
+              </TabsTrigger>
+            </TabsList>
+          </div>
+          <div>
+            <p className="mb-2 px-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground">Infrastructure</p>
+            <TabsList className="flex flex-col items-stretch h-auto w-full bg-transparent p-0 gap-0.5">
+              <TabsTrigger value="storage" className="justify-start gap-2 w-full px-3 py-2 h-auto data-[state=active]:bg-muted">
+                <HardDrive className="h-4 w-4" />
+                Storage
+              </TabsTrigger>
+            </TabsList>
+          </div>
+        </nav>
+      </div>
+
+      {/* Content area */}
+      <div className="flex-1 min-w-0">
+
       <TabsContent value="ai" className="space-y-6">
         <Card>
           <CardHeader>
@@ -390,6 +475,8 @@ export function SettingsContent({ initialSettings }: SettingsContentProps) {
           </CardContent>
         </Card>
       </TabsContent>
+      </div>{/* end content area */}
+      </div>{/* end lg:flex */}
     </Tabs>
 
     {/* Quick Links to sub-pages */}

src/components/shared/pagination.tsx

@@ -1,6 +1,13 @@
 'use client'
 
 import { Button } from '@/components/ui/button'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
 import { ChevronLeft, ChevronRight } from 'lucide-react'
 
 interface PaginationProps {
@@ -9,6 +16,7 @@ interface PaginationProps {
   total: number
   perPage: number
   onPageChange: (page: number) => void
+  onPerPageChange?: (perPage: number) => void
 }
 
 export function Pagination({
@@ -17,40 +25,62 @@ export function Pagination({
   total,
   perPage,
   onPageChange,
+  onPerPageChange,
 }: PaginationProps) {
-  if (totalPages <= 1) return null
+  if (totalPages <= 1 && !onPerPageChange) return null
 
   const from = (page - 1) * perPage + 1
   const to = Math.min(page * perPage, total)
 
   return (
     <div className="flex items-center justify-between">
-      <p className="text-sm text-muted-foreground">
-        Showing {from} to {to} of {total} results
-      </p>
-      <div className="flex items-center gap-2">
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={() => onPageChange(page - 1)}
-          disabled={page === 1}
-        >
-          <ChevronLeft className="h-4 w-4" />
-          Previous
-        </Button>
-        <span className="text-sm">
-          Page {page} of {totalPages}
-        </span>
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={() => onPageChange(page + 1)}
-          disabled={page >= totalPages}
-        >
-          Next
-          <ChevronRight className="h-4 w-4" />
-        </Button>
+      <div className="flex items-center gap-3">
+        <p className="text-sm text-muted-foreground">
+          Showing {from} to {to} of {total} results
+        </p>
+        {onPerPageChange && (
+          <Select
+            value={String(perPage)}
+            onValueChange={(v) => onPerPageChange(Number(v))}
+          >
+            <SelectTrigger className="h-8 w-[70px]">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {[10, 20, 50, 100].map((n) => (
+                <SelectItem key={n} value={String(n)}>
+                  {n}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        )}
       </div>
+      {totalPages > 1 && (
+        <div className="flex items-center gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => onPageChange(page - 1)}
+            disabled={page === 1}
+          >
+            <ChevronLeft className="h-4 w-4" />
+            Previous
+          </Button>
+          <span className="text-sm">
+            Page {page} of {totalPages}
+          </span>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => onPageChange(page + 1)}
+            disabled={page >= totalPages}
+          >
+            Next
+            <ChevronRight className="h-4 w-4" />
+          </Button>
+        </div>
+      )}
     </div>
   )
 }