diff --git a/.cursor/worktrees.json b/.cursor/worktrees.json
new file mode 100644
index 0000000..77e9744
--- /dev/null
+++ b/.cursor/worktrees.json
@@ -0,0 +1,5 @@
+{
+  "setup-worktree": [
+    "npm install"
+  ]
+}
diff --git a/src/app/api/air-quality/route.ts b/src/app/api/air-quality/route.ts
index 8a2dabf..66a6e46 100644
--- a/src/app/api/air-quality/route.ts
+++ b/src/app/api/air-quality/route.ts
@@ -15,6 +15,7 @@ import { prisma } from "@/lib/prisma";
 import { airQualitySchema } from "@/lib/validations";
 import { validateRequest } from "@/lib/validation-helpers";
 import { loggerHelpers } from "@/lib/logger";
+import { parsePagination, createPaginatedResponse } from "@/lib/pagination";
 
 export async function POST(request: NextRequest) {
   try {
@@ -91,25 +92,20 @@ export async function GET(request: NextRequest) {
       return NextResponse.json({ error: "Non autorisé" }, { status: 401 });
     }
 
-    const { searchParams } = new URL(request.url);
-    const limit = parseInt(searchParams.get("limit") || "100");
-    const offset = parseInt(searchParams.get("offset") || "0");
+    const { page, limit, skip, take } = parsePagination(request);
 
     const [airQuality, total] = await Promise.all([
       prisma.airQuality.findMany({
-        take: limit,
-        skip: offset,
+        take,
+        skip,
         orderBy: { date: "desc" },
       }),
       prisma.airQuality.count(),
     ]);
 
-    return NextResponse.json({
-      data: airQuality,
-      total,
-      limit,
-      offset,
-    });
+    return NextResponse.json(
+      createPaginatedResponse(airQuality, total, page, limit)
+    );
   } catch (error) {
     console.error("Error fetching air quality data:", error);
     return NextResponse.json(
diff --git a/src/app/api/climate-data/route.ts b/src/app/api/climate-data/route.ts
index 0c0d76c..cc94d83 100644
--- a/src/app/api/climate-data/route.ts
+++ b/src/app/api/climate-data/route.ts
@@ -15,6 +15,7 @@ import { prisma } from "@/lib/prisma";
 import { climateDataSchema } from "@/lib/validations";
 import { validateRequest } from "@/lib/validation-helpers";
 import { loggerHelpers } from "@/lib/logger";
+import { parsePagination, createPaginatedResponse } from "@/lib/pagination";
 
 export async function POST(request: NextRequest) {
   try {
@@ -97,8 +98,7 @@ export async function GET(request: NextRequest) {
 
     const { searchParams } = new URL(request.url);
     const stationId = searchParams.get("stationId");
-    const limit = parseInt(searchParams.get("limit") || "100");
-    const offset = parseInt(searchParams.get("offset") || "0");
+    const { page, limit, skip, take } = parsePagination(request);
 
     const where: any = {};
     if (stationId) {
@@ -108,24 +108,22 @@ export async function GET(request: NextRequest) {
     const [climateData, total] = await Promise.all([
       prisma.climateData.findMany({
         where,
-        take: limit,
-        skip: offset,
+        take,
+        skip,
         orderBy: { date: "desc" },
       }),
       prisma.climateData.count({ where }),
     ]);
 
     // Cache for 5 minutes
-    return NextResponse.json({
-      data: climateData,
-      total,
-      limit,
-      offset,
-    }, {
-      headers: {
-        'Cache-Control': 'public, s-maxage=300, stale-while-revalidate=600',
-      },
-    });
+    return NextResponse.json(
+      createPaginatedResponse(climateData, total, page, limit),
+      {
+        headers: {
+          'Cache-Control': 'public, s-maxage=300, stale-while-revalidate=600',
+        },
+      }
+    );
   } catch (error) {
     console.error("Error fetching climate data:", error);
     return NextResponse.json(
diff --git a/src/app/api/employees/route.ts b/src/app/api/employees/route.ts
index ceaa354..e8066d1 100644
--- a/src/app/api/employees/route.ts
+++ b/src/app/api/employees/route.ts
@@ -15,6 +15,7 @@ import { prisma } from "@/lib/prisma";
 import { employeeSchema } from "@/lib/validations";
 import { validateRequest } from "@/lib/validation-helpers";
 import { loggerHelpers } from "@/lib/logger";
+import { parsePagination, createPaginatedResponse } from "@/lib/pagination";
 
 export async function POST(request: NextRequest) {
   try {
@@ -85,26 +86,36 @@ export async function GET(request: NextRequest) {
       return NextResponse.json({ error: "Non autorisé" }, { status: 401 });
     }
 
-    const employees = await prisma.employee.findMany({
-      include: {
-        user: {
-          select: {
-            firstName: true,
-            lastName: true,
-            email: true,
-            role: true,
+    const { page, limit, skip, take } = parsePagination(request);
+
+    const [employees, total] = await Promise.all([
+      prisma.employee.findMany({
+        include: {
+          user: {
+            select: {
+              firstName: true,
+              lastName: true,
+              email: true,
+              role: true,
+            },
           },
         },
-      },
-      orderBy: { createdAt: "desc" },
-    });
+        orderBy: { createdAt: "desc" },
+        take,
+        skip,
+      }),
+      prisma.employee.count(),
+    ]);
 
     // Cache for 5 minutes
-    return NextResponse.json(employees, {
-      headers: {
-        'Cache-Control': 'public, s-maxage=300, stale-while-revalidate=600',
-      },
-    });
+    return NextResponse.json(
+      createPaginatedResponse(employees, total, page, limit),
+      {
+        headers: {
+          'Cache-Control': 'public, s-maxage=300, stale-while-revalidate=600',
+        },
+      }
+    );
   } catch (error) {
     loggerHelpers.apiError(error as Error, {
       route: "/api/employees",
diff --git a/src/app/api/water-quality/route.ts b/src/app/api/water-quality/route.ts
index dc53265..47ea4bf 100644
--- a/src/app/api/water-quality/route.ts
+++ b/src/app/api/water-quality/route.ts
@@ -15,6 +15,7 @@ import { prisma } from "@/lib/prisma";
 import { waterQualitySchema } from "@/lib/validations";
 import { validateRequest } from "@/lib/validation-helpers";
 import { loggerHelpers } from "@/lib/logger";
+import { parsePagination, createPaginatedResponse } from "@/lib/pagination";
 
 export async function POST(request: NextRequest) {
   try {
@@ -95,8 +96,7 @@ export async function GET(request: NextRequest) {
 
     const { searchParams } = new URL(request.url);
     const type = searchParams.get("type");
-    const limit = parseInt(searchParams.get("limit") || "100");
-    const offset = parseInt(searchParams.get("offset") || "0");
+    const { page, limit, skip, take } = parsePagination(request);
 
     const where: any = {};
     if (type) {
@@ -106,24 +106,22 @@ export async function GET(request: NextRequest) {
     const [waterQuality, total] = await Promise.all([
       prisma.waterQuality.findMany({
         where,
-        take: limit,
-        skip: offset,
+        take,
+        skip,
         orderBy: { date: "desc" },
       }),
       prisma.waterQuality.count({ where }),
     ]);
 
     // Cache for 5 minutes
-    return NextResponse.json({
-      data: waterQuality,
-      total,
-      limit,
-      offset,
-    }, {
-      headers: {
-        'Cache-Control': 'public, s-maxage=300, stale-while-revalidate=600',
-      },
-    });
+    return NextResponse.json(
+      createPaginatedResponse(waterQuality, total, page, limit),
+      {
+        headers: {
+          'Cache-Control': 'public, s-maxage=300, stale-while-revalidate=600',
+        },
+      }
+    );
   } catch (error) {
     console.error("Error fetching water quality data:", error);
     return NextResponse.json(
diff --git a/src/app/dashboard/documents/client-page.tsx b/src/app/dashboard/documents/client-page.tsx
new file mode 100644
index 0000000..c7a250f
--- /dev/null
+++ b/src/app/dashboard/documents/client-page.tsx
@@ -0,0 +1,233 @@
+/**
+ * @file client-page.tsx
+ * @description src/app/dashboard/documents/client-page.tsx
+ * @author 1
+ * @created 2026-01-06
+ * @updated 2026-01-06
+ * @updates 1
+ * @lines 220
+ * @size 7.5 KB
+ */
+"use client";
+
+import { useState, useEffect } from "react";
+import { Card } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { EmptyState } from "@/components/ui/empty-state";
+import { ExportButtons } from "@/components/export/export-buttons";
+import { Pagination } from "@/components/ui/pagination";
+import Link from "next/link";
+import { Plus, FileText, Download } from "lucide-react";
+import { formatDate } from "@/lib/utils";
+
+const typeLabels: Record<string, string> = {
+  RAPPORT_SCIENTIFIQUE: "Rapport Scientifique",
+  RAPPORT_ADMINISTRATIF: "Rapport Administratif",
+  DONNEE_BRUTE: "Donnée Brute",
+  PUBLICATION: "Publication",
+  AUTRE: "Autre",
+};
+
+interface Document {
+  id: string;
+  title: string;
+  type: string;
+  version: number;
+  createdAt: string;
+  author: {
+    firstName: string;
+    lastName: string;
+  };
+  mission: {
+    title: string;
+  } | null;
+  fileUrl: string;
+}
+
+export default function DocumentsPageClient() {
+  const [documents, setDocuments] = useState<Document[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(25);
+  const [totalItems, setTotalItems] = useState(0);
+
+  useEffect(() => {
+    async function fetchData() {
+      setLoading(true);
+      try {
+        const response = await fetch(`/api/documents?page=${currentPage}&limit=${pageSize}`);
+        if (response.ok) {
+          const data = await response.json();
+          setDocuments(data.data || []);
+          setTotalItems(data.meta?.total || 0);
+        }
+      } catch (error) {
+        console.error("Error fetching documents:", error);
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchData();
+  }, [currentPage, pageSize]);
+
+  const totalPages = Math.ceil(totalItems / pageSize);
+
+  if (loading) {
+    return (
+      <div className="space-y-8">
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100 tracking-tight">
+              Gestion Documentaire
+            </h1>
+            <p className="text-base text-gray-600 dark:text-gray-400 mt-1.5">
+              Rapports, données et publications
+            </p>
+          </div>
+        </div>
+        <Card variant="elevated" className="p-8">
+          <div className="text-center text-gray-500">Chargement...</div>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-8">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100 tracking-tight">
+            Gestion Documentaire
+          </h1>
+          <p className="text-base text-gray-600 dark:text-gray-400 mt-1.5">
+            Rapports, données et publications
+          </p>
+        </div>
+        <div className="flex items-center gap-3">
+          <ExportButtons type="documents" showLabels={false} />
+          <Link href="/dashboard/documents/new">
+            <Button>
+              <Plus className="w-4 h-4 mr-2" />
+              Nouveau document
+            </Button>
+          </Link>
+        </div>
+      </div>
+
+      <Card variant="elevated" className="overflow-hidden">
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead className="bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800">
+              <tr>
+                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
+                  Titre
+                </th>
+                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
+                  Type
+                </th>
+                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
+                  Auteur
+                </th>
+                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
+                  Mission
+                </th>
+                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
+                  Version
+                </th>
+                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
+                  Date
+                </th>
+                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
+                  Actions
+                </th>
+              </tr>
+            </thead>
+            <tbody className="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800">
+              {documents.length === 0 ? (
+                <tr>
+                  <td colSpan={7} className="px-6 py-12">
+                    <EmptyState
+                      icon={FileText}
+                      title="Aucun document"
+                      description="Commencez par ajouter un nouveau document."
+                      action={
+                        <Link href="/dashboard/documents/new">
+                          <Button>
+                            <Plus className="w-4 h-4 mr-2" />
+                            Ajouter un document
+                          </Button>
+                        </Link>
+                      }
+                    />
+                  </td>
+                </tr>
+              ) : (
+                documents.map((doc) => (
+                  <tr key={doc.id} className="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors duration-150">
+                    <td className="px-6 py-4">
+                      <div className="flex items-center gap-2">
+                        <FileText className="w-4 h-4 text-gray-500 dark:text-gray-400 flex-shrink-0" />
+                        <div className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+                          {doc.title}
+                        </div>
+                      </div>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <Badge variant="info" size="sm">
+                        {typeLabels[doc.type] || doc.type}
+                      </Badge>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <div className="text-sm text-gray-900 dark:text-gray-100">
+                        {doc.author.firstName} {doc.author.lastName}
+                      </div>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <div className="text-sm text-gray-600 dark:text-gray-400">
+                        {doc.mission?.title || "N/A"}
+                      </div>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <div className="text-sm font-medium text-gray-900 dark:text-gray-100">v{doc.version}</div>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <div className="text-sm text-gray-600 dark:text-gray-400">
+                        {formatDate(doc.createdAt)}
+                      </div>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
+                      <div className="flex items-center gap-2">
+                        <Link href={doc.fileUrl} target="_blank">
+                          <Button variant="ghost" size="sm" title="Télécharger">
+                            <Download className="w-4 h-4" />
+                          </Button>
+                        </Link>
+                        <Link href={`/dashboard/documents/${doc.id}`}>
+                          <Button variant="ghost" size="sm">
+                            Voir
+                          </Button>
+                        </Link>
+                      </div>
+                    </td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+        {totalPages > 1 && (
+          <Pagination
+            currentPage={currentPage}
+            totalPages={totalPages}
+            onPageChange={setCurrentPage}
+            pageSize={pageSize}
+            totalItems={totalItems}
+            onPageSizeChange={setPageSize}
+          />
+        )}
+      </Card>
+    </div>
+  );
+}
+
diff --git a/src/app/dashboard/documents/page.tsx b/src/app/dashboard/documents/page.tsx
index 19a8443..aafb034 100644
--- a/src/app/dashboard/documents/page.tsx
+++ b/src/app/dashboard/documents/page.tsx
@@ -3,172 +3,13 @@
  * @description src/app/dashboard/documents/page.tsx
  * @author 1
  * @created 2026-01-01
- * @updated 2026-01-04
- * @updates 3
- * @lines 175
- * @size 6.79 KB
+ * @updated 2026-01-06
+ * @updates 4
+ * @lines 5
+ * @size 0.20 KB
  */
-import { prisma } from "@/lib/prisma";
-import { Card } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { EmptyState } from "@/components/ui/empty-state";
-import Link from "next/link";
-import { Plus, FileText, Download } from "lucide-react";
-import { formatDate } from "@/lib/utils";
+import DocumentsPageClient from "./client-page";
 
-const typeLabels: Record<string, string> = {
-  RAPPORT_SCIENTIFIQUE: "Rapport Scientifique",
-  RAPPORT_ADMINISTRATIF: "Rapport Administratif",
-  DONNEE_BRUTE: "Donnée Brute",
-  PUBLICATION: "Publication",
-  AUTRE: "Autre",
-};
-
-// Force dynamic rendering to avoid build-time database queries
-export const dynamic = 'force-dynamic';
-export const revalidate = 0;
-
-export default async function DocumentsPage() {
-  const documents = await prisma.document.findMany({
-    include: {
-      author: {
-        select: {
-          firstName: true,
-          lastName: true,
-        },
-      },
-      mission: {
-        select: {
-          title: true,
-        },
-      },
-    },
-    orderBy: { createdAt: "desc" },
-  });
-
-  return (
-    <div className="space-y-8">
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100 tracking-tight">
-            Gestion Documentaire
-          </h1>
-          <p className="text-base text-gray-600 dark:text-gray-400 mt-1.5">
-            Rapports, données et publications
-          </p>
-        </div>
-        <Link href="/dashboard/documents/new">
-          <Button>
-            <Plus className="w-4 h-4 mr-2" />
-            Nouveau document
-          </Button>
-        </Link>
-      </div>
-
-      <Card variant="elevated" className="overflow-hidden">
-        <div className="overflow-x-auto">
-          <table className="w-full">
-            <thead className="bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800">
-              <tr>
-                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
-                  Titre
-                </th>
-                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
-                  Type
-                </th>
-                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
-                  Auteur
-                </th>
-                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
-                  Mission
-                </th>
-                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
-                  Version
-                </th>
-                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
-                  Date
-                </th>
-                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
-                  Actions
-                </th>
-              </tr>
-            </thead>
-            <tbody className="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800">
-              {documents.length === 0 ? (
-                <tr>
-                  <td colSpan={7} className="px-6 py-12">
-                    <EmptyState
-                      icon={FileText}
-                      title="Aucun document"
-                      description="Commencez par ajouter un nouveau document."
-                      action={
-                        <Link href="/dashboard/documents/new">
-                          <Button>
-                            <Plus className="w-4 h-4 mr-2" />
-                            Ajouter un document
-                          </Button>
-                        </Link>
-                      }
-                    />
-                  </td>
-                </tr>
-              ) : (
-                documents.map((doc) => (
-                  <tr key={doc.id} className="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors duration-150">
-                    <td className="px-6 py-4">
-                      <div className="flex items-center gap-2">
-                        <FileText className="w-4 h-4 text-gray-500 dark:text-gray-400 flex-shrink-0" />
-                        <div className="text-sm font-semibold text-gray-900 dark:text-gray-100">
-                          {doc.title}
-                        </div>
-                      </div>
-                    </td>
-                    <td className="px-6 py-4 whitespace-nowrap">
-                      <Badge variant="info" size="sm">
-                        {typeLabels[doc.type] || doc.type}
-                      </Badge>
-                    </td>
-                    <td className="px-6 py-4 whitespace-nowrap">
-                      <div className="text-sm text-gray-900 dark:text-gray-100">
-                        {doc.author.firstName} {doc.author.lastName}
-                      </div>
-                    </td>
-                    <td className="px-6 py-4 whitespace-nowrap">
-                      <div className="text-sm text-gray-600 dark:text-gray-400">
-                        {doc.mission?.title || "N/A"}
-                      </div>
-                    </td>
-                    <td className="px-6 py-4 whitespace-nowrap">
-                      <div className="text-sm font-medium text-gray-900 dark:text-gray-100">v{doc.version}</div>
-                    </td>
-                    <td className="px-6 py-4 whitespace-nowrap">
-                      <div className="text-sm text-gray-600 dark:text-gray-400">
-                        {formatDate(doc.createdAt)}
-                      </div>
-                    </td>
-                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
-                      <div className="flex items-center gap-2">
-                        <Link href={doc.fileUrl} target="_blank">
-                          <Button variant="ghost" size="sm" title="Télécharger">
-                            <Download className="w-4 h-4" />
-                          </Button>
-                        </Link>
-                        <Link href={`/dashboard/documents/${doc.id}`}>
-                          <Button variant="ghost" size="sm">
-                            Voir
-                          </Button>
-                        </Link>
-                      </div>
-                    </td>
-                  </tr>
-                ))
-              )}
-            </tbody>
-          </table>
-        </div>
-      </Card>
-    </div>
-  );
+export default function DocumentsPage() {
+  return <DocumentsPageClient />;
 }
-
diff --git a/src/app/dashboard/environment/climate/client-page.tsx b/src/app/dashboard/environment/climate/client-page.tsx
new file mode 100644
index 0000000..9ce067d
--- /dev/null
+++ b/src/app/dashboard/environment/climate/client-page.tsx
@@ -0,0 +1,212 @@
+/**
+ * @file client-page.tsx
+ * @description src/app/dashboard/environment/climate/client-page.tsx
+ * @author 1
+ * @created 2026-01-06
+ * @updated 2026-01-06
+ * @updates 1
+ * @lines 200
+ * @size 7.0 KB
+ */
+"use client";
+
+import { useState, useEffect } from "react";
+import { Card } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { EmptyState } from "@/components/ui/empty-state";
+import { ExportButtons } from "@/components/export/export-buttons";
+import { Pagination } from "@/components/ui/pagination";
+import Link from "next/link";
+import { Plus, Thermometer } from "lucide-react";
+import { formatDate } from "@/lib/utils";
+
+interface ClimateData {
+  id: string;
+  stationId: string | null;
+  location: string;
+  latitude: number | null;
+  longitude: number | null;
+  date: string;
+  temperature: number | null;
+  humidity: number | null;
+  windSpeed: number | null;
+  windDirection: number | null;
+  precipitation: number | null;
+}
+
+export default function ClimateDataPageClient() {
+  const [climateData, setClimateData] = useState<ClimateData[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(25);
+  const [totalItems, setTotalItems] = useState(0);
+
+  useEffect(() => {
+    async function fetchData() {
+      setLoading(true);
+      try {
+        const response = await fetch(`/api/climate-data?page=${currentPage}&limit=${pageSize}`);
+        if (response.ok) {
+          const data = await response.json();
+          setClimateData(data.data || []);
+          setTotalItems(data.meta?.total || 0);
+        }
+      } catch (error) {
+        console.error("Error fetching climate data:", error);
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchData();
+  }, [currentPage, pageSize]);
+
+  const totalPages = Math.ceil(totalItems / pageSize);
+
+  if (loading) {
+    return (
+      <div className="space-y-8">
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100 tracking-tight">
+              Données Climatiques
+            </h1>
+            <p className="text-base text-gray-600 dark:text-gray-400 mt-1.5">
+              Liste des mesures climatiques
+            </p>
+          </div>
+        </div>
+        <Card variant="elevated" className="p-8">
+          <div className="text-center text-gray-500">Chargement...</div>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-8">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100 tracking-tight">
+            Données Climatiques
+          </h1>
+          <p className="text-base text-gray-600 dark:text-gray-400 mt-1.5">
+            Liste des mesures climatiques
+          </p>
+        </div>
+        <div className="flex items-center gap-3">
+          <ExportButtons type="documents" showLabels={false} />
+          <Link href="/dashboard/environment/climate/new">
+            <Button>
+              <Plus className="w-4 h-4 mr-2" />
+              Nouvelle mesure
+            </Button>
+          </Link>
+        </div>
+      </div>
+
+      <Card variant="elevated" className="overflow-hidden">
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead className="bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800">
+              <tr>
+                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
+                  Station
+                </th>
+                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
+                  Localisation
+                </th>
+                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
+                  Date
+                </th>
+                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
+                  Température
+                </th>
+                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
+                  Humidité
+                </th>
+                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
+                  Vent
+                </th>
+                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
+                  Précipitations
+                </th>
+              </tr>
+            </thead>
+            <tbody className="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800">
+              {climateData.length === 0 ? (
+                <tr>
+                  <td colSpan={7} className="px-6 py-12">
+                    <EmptyState
+                      icon={Thermometer}
+                      title="Aucune mesure climatique enregistrée"
+                      description="Commencez par ajouter une nouvelle mesure climatique."
+                      action={
+                        <Link href="/dashboard/environment/climate/new">
+                          <Button>
+                            <Plus className="w-4 h-4 mr-2" />
+                            Ajouter une mesure
+                          </Button>
+                        </Link>
+                      }
+                    />
+                  </td>
+                </tr>
+              ) : (
+                climateData.map((climate) => (
+                  <tr key={climate.id} className="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors duration-150">
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <div className="flex items-center">
+                        <Thermometer className="w-5 h-5 text-purple-600 dark:text-purple-400 mr-2 flex-shrink-0" />
+                        <span className="text-sm text-gray-900 dark:text-gray-100">
+                          {climate.stationId || "-"}
+                        </span>
+                      </div>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <div className="text-sm text-gray-900 dark:text-gray-100">
+                        {climate.location}
+                      </div>
+                      {climate.latitude && climate.longitude && (
+                        <div className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
+                          {climate.latitude.toFixed(4)}, {climate.longitude.toFixed(4)}
+                        </div>
+                      )}
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
+                      {formatDate(climate.date)}
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
+                      {climate.temperature ? `${climate.temperature}°C` : "-"}
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
+                      {climate.humidity ? `${climate.humidity}%` : "-"}
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
+                      {climate.windSpeed
+                        ? `${climate.windSpeed} m/s${climate.windDirection ? ` (${climate.windDirection}°)` : ""}`
+                        : "-"}
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
+                      {climate.precipitation ? `${climate.precipitation} mm` : "-"}
+                    </td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+        {totalPages > 1 && (
+          <Pagination
+            currentPage={currentPage}
+            totalPages={totalPages}
+            onPageChange={setCurrentPage}
+            pageSize={pageSize}
+            totalItems={totalItems}
+            onPageSizeChange={setPageSize}
+          />
+        )}
+      </Card>
+    </div>
+  );
+}
+
diff --git a/src/app/dashboard/environment/climate/page.tsx b/src/app/dashboard/environment/climate/page.tsx
index 46c93bf..bbebacd 100644
--- a/src/app/dashboard/environment/climate/page.tsx
+++ b/src/app/dashboard/environment/climate/page.tsx
@@ -8,136 +8,9 @@
  * @lines 144
  * @size 6.19 KB
  */
-import { prisma } from "@/lib/prisma";
-import { Card } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { EmptyState } from "@/components/ui/empty-state";
-import Link from "next/link";
-import { Plus, Thermometer } from "lucide-react";
-import { formatDate } from "@/lib/utils";
+import ClimateDataPageClient from "./client-page";
 
-// Force dynamic rendering to avoid build-time database queries
-export const dynamic = 'force-dynamic';
-export const revalidate = 0;
-
-export default async function ClimateDataPage() {
-  const climateData = await prisma.climateData.findMany({
-    orderBy: { date: "desc" },
-    take: 100,
-  });
-
-  return (
-    <div className="space-y-8">
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100 tracking-tight">
-            Données Climatiques
-          </h1>
-          <p className="text-base text-gray-600 dark:text-gray-400 mt-1.5">
-            Liste des mesures climatiques
-          </p>
-        </div>
-        <Link href="/dashboard/environment/climate/new">
-          <Button>
-            <Plus className="w-4 h-4 mr-2" />
-            Nouvelle mesure
-          </Button>
-        </Link>
-      </div>
-
-      <Card variant="elevated" className="overflow-hidden">
-        <div className="overflow-x-auto">
-          <table className="w-full">
-            <thead className="bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800">
-              <tr>
-                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
-                  Station
-                </th>
-                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
-                  Localisation
-                </th>
-                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
-                  Date
-                </th>
-                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
-                  Température
-                </th>
-                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
-                  Humidité
-                </th>
-                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
-                  Vent
-                </th>
-                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
-                  Précipitations
-                </th>
-              </tr>
-            </thead>
-            <tbody className="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800">
-              {climateData.length === 0 ? (
-                <tr>
-                  <td colSpan={7} className="px-6 py-12">
-                    <EmptyState
-                      icon={Thermometer}
-                      title="Aucune mesure climatique enregistrée"
-                      description="Commencez par ajouter une nouvelle mesure climatique."
-                      action={
-                        <Link href="/dashboard/environment/climate/new">
-                          <Button>
-                            <Plus className="w-4 h-4 mr-2" />
-                            Ajouter une mesure
-                          </Button>
-                        </Link>
-                      }
-                    />
-                  </td>
-                </tr>
-              ) : (
-                climateData.map((climate) => (
-                  <tr key={climate.id} className="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors duration-150">
-                    <td className="px-6 py-4 whitespace-nowrap">
-                      <div className="flex items-center">
-                        <Thermometer className="w-5 h-5 text-purple-600 dark:text-purple-400 mr-2 flex-shrink-0" />
-                        <span className="text-sm text-gray-900 dark:text-gray-100">
-                          {climate.stationId || "-"}
-                        </span>
-                      </div>
-                    </td>
-                    <td className="px-6 py-4 whitespace-nowrap">
-                      <div className="text-sm text-gray-900 dark:text-gray-100">
-                        {climate.location}
-                      </div>
-                      {climate.latitude && climate.longitude && (
-                        <div className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
-                          {climate.latitude.toFixed(4)}, {climate.longitude.toFixed(4)}
-                        </div>
-                      )}
-                    </td>
-                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
-                      {formatDate(climate.date)}
-                    </td>
-                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
-                      {climate.temperature ? `${climate.temperature}°C` : "-"}
-                    </td>
-                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
-                      {climate.humidity ? `${climate.humidity}%` : "-"}
-                    </td>
-                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
-                      {climate.windSpeed
-                        ? `${climate.windSpeed} m/s${climate.windDirection ? ` (${climate.windDirection}°)` : ""}`
-                        : "-"}
-                    </td>
-                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
-                      {climate.precipitation ? `${climate.precipitation} mm` : "-"}
-                    </td>
-                  </tr>
-                ))
-              )}
-            </tbody>
-          </table>
-        </div>
-      </Card>
-    </div>
-  );
+export default function ClimateDataPage() {
+  return <ClimateDataPageClient />;
 }
 
diff --git a/src/app/dashboard/environment/page.tsx b/src/app/dashboard/environment/page.tsx
index 06e2f5a..964a915 100644
--- a/src/app/dashboard/environment/page.tsx
+++ b/src/app/dashboard/environment/page.tsx
@@ -21,9 +21,9 @@ const waterTypeLabels: Record<string, string> = {
   BARRAGE: "Barrage",
 };
 
-// Force dynamic rendering to avoid build-time database queries
+// HTTP caching for environment page - revalidate every 60 seconds
 export const dynamic = 'force-dynamic';
-export const revalidate = 0;
+export const revalidate = 60;
 
 export default async function EnvironmentPage() {
   const [waterQuality, airQuality, climateData, sensorData, counts] = await Promise.all([
diff --git a/src/app/dashboard/publications/client-page.tsx b/src/app/dashboard/publications/client-page.tsx
new file mode 100644
index 0000000..16fe6fd
--- /dev/null
+++ b/src/app/dashboard/publications/client-page.tsx
@@ -0,0 +1,261 @@
+/**
+ * @file client-page.tsx
+ * @description src/app/dashboard/publications/client-page.tsx
+ * @author 1
+ * @created 2026-01-06
+ * @updated 2026-01-06
+ * @updates 1
+ * @lines 240
+ * @size 8.5 KB
+ */
+"use client";
+
+import { useState, useEffect } from "react";
+import { Card } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { EmptyState } from "@/components/ui/empty-state";
+import { ExportButtons } from "@/components/export/export-buttons";
+import { Pagination } from "@/components/ui/pagination";
+import Link from "next/link";
+import { Plus, BookOpen, FileDown } from "lucide-react";
+
+interface Publication {
+  id: string;
+  title: string;
+  year: number;
+  type: string;
+  isPublished: boolean;
+  _count: {
+    chapters: number;
+  };
+}
+
+export default function PublicationsPageClient() {
+  const [publications, setPublications] = useState<Publication[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(25);
+  const [totalItems, setTotalItems] = useState(0);
+
+  useEffect(() => {
+    async function fetchData() {
+      setLoading(true);
+      try {
+        const response = await fetch(`/api/publications?page=${currentPage}&limit=${pageSize}`);
+        if (response.ok) {
+          const data = await response.json();
+          setPublications(data.data || []);
+          setTotalItems(data.meta?.total || 0);
+        }
+      } catch (error) {
+        console.error("Error fetching publications:", error);
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchData();
+  }, [currentPage, pageSize]);
+
+  const totalPages = Math.ceil(totalItems / pageSize);
+  const publishedCount = publications.filter((p) => p.isPublished).length;
+  const draftCount = publications.filter((p) => !p.isPublished).length;
+
+  if (loading) {
+    return (
+      <div className="space-y-8">
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100 tracking-tight">
+              Édition & Publication
+            </h1>
+            <p className="text-base text-gray-600 dark:text-gray-400 mt-1.5">
+              Livre annuel et publications scientifiques
+            </p>
+          </div>
+        </div>
+        <Card variant="elevated" className="p-8">
+          <div className="text-center text-gray-500">Chargement...</div>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-8">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100 tracking-tight">
+            Édition & Publication
+          </h1>
+          <p className="text-base text-gray-600 dark:text-gray-400 mt-1.5">
+            Livre annuel et publications scientifiques
+          </p>
+        </div>
+        <div className="flex items-center gap-3">
+          <ExportButtons type="publications" showLabels={false} />
+          <Link href="/dashboard/publications/new">
+            <Button>
+              <Plus className="w-4 h-4 mr-2" />
+              Nouvelle publication
+            </Button>
+          </Link>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <Card className="p-6 hover:shadow-md transition-shadow duration-200" variant="elevated">
+          <div className="flex items-start justify-between">
+            <div className="flex-1 min-w-0">
+              <p className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">
+                Total publications
+              </p>
+              <p className="text-3xl font-bold text-gray-900 dark:text-gray-100 tracking-tight">
+                {totalItems}
+              </p>
+            </div>
+            <div className="bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 p-3 rounded-xl flex-shrink-0 ml-4 shadow-sm">
+              <BookOpen className="w-6 h-6" />
+            </div>
+          </div>
+        </Card>
+
+        <Card className="p-6 hover:shadow-md transition-shadow duration-200" variant="elevated">
+          <div className="flex items-start justify-between">
+            <div className="flex-1 min-w-0">
+              <p className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">
+                Publiées
+              </p>
+              <p className="text-3xl font-bold text-gray-900 dark:text-gray-100 tracking-tight">
+                {publishedCount}
+              </p>
+            </div>
+            <div className="bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400 p-3 rounded-xl flex-shrink-0 ml-4 shadow-sm">
+              <BookOpen className="w-6 h-6" />
+            </div>
+          </div>
+        </Card>
+
+        <Card className="p-6 hover:shadow-md transition-shadow duration-200" variant="elevated">
+          <div className="flex items-start justify-between">
+            <div className="flex-1 min-w-0">
+              <p className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">
+                En préparation
+              </p>
+              <p className="text-3xl font-bold text-gray-900 dark:text-gray-100 tracking-tight">
+                {draftCount}
+              </p>
+            </div>
+            <div className="bg-yellow-100 dark:bg-yellow-900/30 text-yellow-600 dark:text-yellow-400 p-3 rounded-xl flex-shrink-0 ml-4 shadow-sm">
+              <BookOpen className="w-6 h-6" />
+            </div>
+          </div>
+        </Card>
+      </div>
+
+      <Card variant="elevated" className="overflow-hidden">
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead className="bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800">
+              <tr>
+                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
+                  Titre
+                </th>
+                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
+                  Année
+                </th>
+                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
+                  Type
+                </th>
+                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
+                  Chapitres
+                </th>
+                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
+                  Statut
+                </th>
+                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
+                  Actions
+                </th>
+              </tr>
+            </thead>
+            <tbody className="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800">
+              {publications.length === 0 ? (
+                <tr>
+                  <td colSpan={6} className="px-6 py-12">
+                    <EmptyState
+                      icon={BookOpen}
+                      title="Aucune publication"
+                      description="Commencez par créer une nouvelle publication."
+                      action={
+                        <Link href="/dashboard/publications/new">
+                          <Button>
+                            <Plus className="w-4 h-4 mr-2" />
+                            Créer une publication
+                          </Button>
+                        </Link>
+                      }
+                    />
+                  </td>
+                </tr>
+              ) : (
+                publications.map((pub) => (
+                  <tr key={pub.id} className="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors duration-150">
+                    <td className="px-6 py-4">
+                      <div className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+                        {pub.title}
+                      </div>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <div className="text-sm text-gray-900 dark:text-gray-100">{pub.year}</div>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <div className="text-sm text-gray-900 dark:text-gray-100">{pub.type}</div>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <div className="text-sm text-gray-900 dark:text-gray-100">
+                        {pub._count.chapters} chapitre(s)
+                      </div>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <Badge
+                        variant={pub.isPublished ? "success" : "warning"}
+                        size="sm"
+                      >
+                        {pub.isPublished ? "Publié" : "En préparation"}
+                      </Badge>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
+                      <div className="flex items-center gap-2">
+                        <Link href={`/dashboard/publications/${pub.id}`}>
+                          <Button variant="ghost" size="sm">
+                            Voir
+                          </Button>
+                        </Link>
+                        {pub.isPublished && (
+                          <Button variant="ghost" size="sm" title="Télécharger PDF">
+                            <FileDown className="w-4 h-4" />
+                          </Button>
+                        )}
+                      </div>
+                    </td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+        {totalPages > 1 && (
+          <Pagination
+            currentPage={currentPage}
+            totalPages={totalPages}
+            onPageChange={setCurrentPage}
+            pageSize={pageSize}
+            totalItems={totalItems}
+            onPageSizeChange={setPageSize}
+          />
+        )}
+      </Card>
+    </div>
+  );
+}
+
diff --git a/src/app/dashboard/publications/page.tsx b/src/app/dashboard/publications/page.tsx
index 1b142f9..27041d6 100644
--- a/src/app/dashboard/publications/page.tsx
+++ b/src/app/dashboard/publications/page.tsx
@@ -3,198 +3,13 @@
  * @description src/app/dashboard/publications/page.tsx
  * @author 1
  * @created 2026-01-01
- * @updated 2026-01-04
- * @updates 3
- * @lines 201
- * @size 8.24 KB
+ * @updated 2026-01-06
+ * @updates 4
+ * @lines 5
+ * @size 0.20 KB
  */
-import { prisma } from "@/lib/prisma";
-import { Card } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { EmptyState } from "@/components/ui/empty-state";
-import Link from "next/link";
-import { Plus, BookOpen, FileDown } from "lucide-react";
-import { formatDate } from "@/lib/utils";
+import PublicationsPageClient from "./client-page";
 
-// Force dynamic rendering to avoid build-time database queries
-export const dynamic = 'force-dynamic';
-export const revalidate = 0;
-
-export default async function PublicationsPage() {
-  const publications = await prisma.publication.findMany({
-    include: {
-      _count: {
-        select: {
-          chapters: true,
-        },
-      },
-    },
-    orderBy: { year: "desc" },
-  });
-
-  return (
-    <div className="space-y-8">
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100 tracking-tight">
-            Édition & Publication
-          </h1>
-          <p className="text-base text-gray-600 dark:text-gray-400 mt-1.5">
-            Livre annuel et publications scientifiques
-          </p>
-        </div>
-        <Link href="/dashboard/publications/new">
-          <Button>
-            <Plus className="w-4 h-4 mr-2" />
-            Nouvelle publication
-          </Button>
-        </Link>
-      </div>
-
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-        <Card className="p-6 hover:shadow-md transition-shadow duration-200" variant="elevated">
-          <div className="flex items-start justify-between">
-            <div className="flex-1 min-w-0">
-              <p className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">
-                Total publications
-              </p>
-              <p className="text-3xl font-bold text-gray-900 dark:text-gray-100 tracking-tight">
-                {publications.length}
-              </p>
-            </div>
-            <div className="bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 p-3 rounded-xl flex-shrink-0 ml-4 shadow-sm">
-              <BookOpen className="w-6 h-6" />
-            </div>
-          </div>
-        </Card>
-
-        <Card className="p-6 hover:shadow-md transition-shadow duration-200" variant="elevated">
-          <div className="flex items-start justify-between">
-            <div className="flex-1 min-w-0">
-              <p className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">
-                Publiées
-              </p>
-              <p className="text-3xl font-bold text-gray-900 dark:text-gray-100 tracking-tight">
-                {publications.filter((p) => p.isPublished).length}
-              </p>
-            </div>
-            <div className="bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400 p-3 rounded-xl flex-shrink-0 ml-4 shadow-sm">
-              <BookOpen className="w-6 h-6" />
-            </div>
-          </div>
-        </Card>
-
-        <Card className="p-6 hover:shadow-md transition-shadow duration-200" variant="elevated">
-          <div className="flex items-start justify-between">
-            <div className="flex-1 min-w-0">
-              <p className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">
-                En préparation
-              </p>
-              <p className="text-3xl font-bold text-gray-900 dark:text-gray-100 tracking-tight">
-                {publications.filter((p) => !p.isPublished).length}
-              </p>
-            </div>
-            <div className="bg-yellow-100 dark:bg-yellow-900/30 text-yellow-600 dark:text-yellow-400 p-3 rounded-xl flex-shrink-0 ml-4 shadow-sm">
-              <BookOpen className="w-6 h-6" />
-            </div>
-          </div>
-        </Card>
-      </div>
-
-      <Card variant="elevated" className="overflow-hidden">
-        <div className="overflow-x-auto">
-          <table className="w-full">
-            <thead className="bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800">
-              <tr>
-                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
-                  Titre
-                </th>
-                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
-                  Année
-                </th>
-                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
-                  Type
-                </th>
-                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
-                  Chapitres
-                </th>
-                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
-                  Statut
-                </th>
-                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
-                  Actions
-                </th>
-              </tr>
-            </thead>
-            <tbody className="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800">
-              {publications.length === 0 ? (
-                <tr>
-                  <td colSpan={6} className="px-6 py-12">
-                    <EmptyState
-                      icon={BookOpen}
-                      title="Aucune publication"
-                      description="Commencez par créer une nouvelle publication."
-                      action={
-                        <Link href="/dashboard/publications/new">
-                          <Button>
-                            <Plus className="w-4 h-4 mr-2" />
-                            Créer une publication
-                          </Button>
-                        </Link>
-                      }
-                    />
-                  </td>
-                </tr>
-              ) : (
-                publications.map((pub) => (
-                  <tr key={pub.id} className="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors duration-150">
-                    <td className="px-6 py-4">
-                      <div className="text-sm font-semibold text-gray-900 dark:text-gray-100">
-                        {pub.title}
-                      </div>
-                    </td>
-                    <td className="px-6 py-4 whitespace-nowrap">
-                      <div className="text-sm text-gray-900 dark:text-gray-100">{pub.year}</div>
-                    </td>
-                    <td className="px-6 py-4 whitespace-nowrap">
-                      <div className="text-sm text-gray-900 dark:text-gray-100">{pub.type}</div>
-                    </td>
-                    <td className="px-6 py-4 whitespace-nowrap">
-                      <div className="text-sm text-gray-900 dark:text-gray-100">
-                        {pub._count.chapters} chapitre(s)
-                      </div>
-                    </td>
-                    <td className="px-6 py-4 whitespace-nowrap">
-                      <Badge
-                        variant={pub.isPublished ? "success" : "warning"}
-                        size="sm"
-                      >
-                        {pub.isPublished ? "Publié" : "En préparation"}
-                      </Badge>
-                    </td>
-                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
-                      <div className="flex items-center gap-2">
-                        <Link href={`/dashboard/publications/${pub.id}`}>
-                          <Button variant="ghost" size="sm">
-                            Voir
-                          </Button>
-                        </Link>
-                        {pub.isPublished && (
-                          <Button variant="ghost" size="sm" title="Télécharger PDF">
-                            <FileDown className="w-4 h-4" />
-                          </Button>
-                        )}
-                      </div>
-                    </td>
-                  </tr>
-                ))
-              )}
-            </tbody>
-          </table>
-        </div>
-      </Card>
-    </div>
-  );
+export default function PublicationsPage() {
+  return <PublicationsPageClient />;
 }
-
diff --git a/src/app/dashboard/rh/employees/client-page.tsx b/src/app/dashboard/rh/employees/client-page.tsx
new file mode 100644
index 0000000..06ba6e8
--- /dev/null
+++ b/src/app/dashboard/rh/employees/client-page.tsx
@@ -0,0 +1,239 @@
+/**
+ * @file client-page.tsx
+ * @description src/app/dashboard/rh/employees/client-page.tsx
+ * @author 1
+ * @created 2026-01-06
+ * @updated 2026-01-06
+ * @updates 1
+ * @lines 220
+ * @size 7.5 KB
+ */
+"use client";
+
+import { useState, useEffect } from "react";
+import { Card } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { EmptyState } from "@/components/ui/empty-state";
+import { ExportButtons } from "@/components/export/export-buttons";
+import { Pagination } from "@/components/ui/pagination";
+import Link from "next/link";
+import { Plus, Edit, Eye, Users } from "lucide-react";
+import { formatDate, formatCurrency } from "@/lib/utils";
+
+interface Employee {
+  id: string;
+  employeeNumber: string;
+  contractType: string;
+  contractEnd: string | null;
+  baseSalary: number;
+  hireDate: string;
+  isActive: boolean;
+  user: {
+    firstName: string;
+    lastName: string;
+    email: string;
+    role: string;
+  } | null;
+}
+
+export default function EmployeesPageClient() {
+  const [employees, setEmployees] = useState<Employee[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(25);
+  const [totalItems, setTotalItems] = useState(0);
+
+  useEffect(() => {
+    async function fetchData() {
+      setLoading(true);
+      try {
+        const response = await fetch(`/api/employees?page=${currentPage}&limit=${pageSize}`);
+        if (response.ok) {
+          const data = await response.json();
+          setEmployees(data.data || []);
+          setTotalItems(data.meta?.total || 0);
+        }
+      } catch (error) {
+        console.error("Error fetching employees:", error);
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchData();
+  }, [currentPage, pageSize]);
+
+  const totalPages = Math.ceil(totalItems / pageSize);
+
+  if (loading) {
+    return (
+      <div className="space-y-8">
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100 tracking-tight">
+              Employés
+            </h1>
+            <p className="text-base text-gray-600 dark:text-gray-400 mt-1.5">
+              Liste complète des employés
+            </p>
+          </div>
+        </div>
+        <Card variant="elevated" className="p-8">
+          <div className="text-center text-gray-500">Chargement...</div>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-8">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100 tracking-tight">
+            Employés
+          </h1>
+          <p className="text-base text-gray-600 dark:text-gray-400 mt-1.5">
+            Liste complète des employés
+          </p>
+        </div>
+        <div className="flex items-center gap-3">
+          <ExportButtons type="employees" showLabels={false} />
+          <Link href="/dashboard/rh/employees/new">
+            <Button>
+              <Plus className="w-4 h-4 mr-2" />
+              Nouvel employé
+            </Button>
+          </Link>
+        </div>
+      </div>
+
+      <Card variant="elevated" className="overflow-hidden">
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead className="bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800">
+              <tr>
+                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
+                  Nom
+                </th>
+                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
+                  Numéro
+                </th>
+                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
+                  Contrat
+                </th>
+                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
+                  Salaire de base
+                </th>
+                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
+                  Date d&apos;embauche
+                </th>
+                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
+                  Statut
+                </th>
+                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
+                  Actions
+                </th>
+              </tr>
+            </thead>
+            <tbody className="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800">
+              {employees.length === 0 ? (
+                <tr>
+                  <td colSpan={7} className="px-6 py-12">
+                    <EmptyState
+                      icon={Users}
+                      title="Aucun employé"
+                      description="Commencez par créer un nouvel employé."
+                      action={
+                        <Link href="/dashboard/rh/employees/new">
+                          <Button>
+                            <Plus className="w-4 h-4 mr-2" />
+                            Créer un employé
+                          </Button>
+                        </Link>
+                      }
+                    />
+                  </td>
+                </tr>
+              ) : (
+                employees.map((employee) => (
+                  <tr key={employee.id} className="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors duration-150">
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <div className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+                        {employee.user
+                          ? `${employee.user.firstName} ${employee.user.lastName}`
+                          : `Employé #${employee.employeeNumber}`}
+                      </div>
+                      {employee.user && (
+                        <div className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
+                          {employee.user.email}
+                        </div>
+                      )}
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <div className="text-sm text-gray-900 dark:text-gray-100">
+                        {employee.employeeNumber}
+                      </div>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <div className="text-sm text-gray-900 dark:text-gray-100">
+                        {employee.contractType}
+                      </div>
+                      {employee.contractEnd && (
+                        <div className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
+                          Jusqu&apos;au {formatDate(employee.contractEnd)}
+                        </div>
+                      )}
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <div className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                        {formatCurrency(Number(employee.baseSalary))}
+                      </div>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <div className="text-sm text-gray-900 dark:text-gray-100">
+                        {formatDate(employee.hireDate)}
+                      </div>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <Badge
+                        variant={employee.isActive ? "success" : "error"}
+                        size="sm"
+                      >
+                        {employee.isActive ? "Actif" : "Inactif"}
+                      </Badge>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
+                      <div className="flex items-center gap-2">
+                        <Link href={`/dashboard/rh/employees/${employee.id}`}>
+                          <Button variant="ghost" size="sm" title="Voir">
+                            <Eye className="w-4 h-4" />
+                          </Button>
+                        </Link>
+                        <Link href={`/dashboard/rh/employees/${employee.id}/edit`}>
+                          <Button variant="ghost" size="sm" title="Modifier">
+                            <Edit className="w-4 h-4" />
+                          </Button>
+                        </Link>
+                      </div>
+                    </td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+        {totalPages > 1 && (
+          <Pagination
+            currentPage={currentPage}
+            totalPages={totalPages}
+            onPageChange={setCurrentPage}
+            pageSize={pageSize}
+            totalItems={totalItems}
+            onPageSizeChange={setPageSize}
+          />
+        )}
+      </Card>
+    </div>
+  );
+}
+
diff --git a/src/app/dashboard/rh/employees/page.tsx b/src/app/dashboard/rh/employees/page.tsx
index 1d372ba..81236cc 100644
--- a/src/app/dashboard/rh/employees/page.tsx
+++ b/src/app/dashboard/rh/employees/page.tsx
@@ -8,170 +8,9 @@
  * @lines 178
  * @size 7.25 KB
  */
-import { prisma } from "@/lib/prisma";
-import { Card } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { EmptyState } from "@/components/ui/empty-state";
-import Link from "next/link";
-import { Plus, Edit, Eye, Users } from "lucide-react";
-import { formatDate, formatCurrency } from "@/lib/utils";
+import EmployeesPageClient from "./client-page";
 
-// Force dynamic rendering to avoid build-time database queries
-export const dynamic = 'force-dynamic';
-export const revalidate = 0;
-
-export default async function EmployeesPage() {
-  const employees = await prisma.employee.findMany({
-    include: {
-      user: {
-        select: {
-          firstName: true,
-          lastName: true,
-          email: true,
-          role: true,
-        },
-      },
-    },
-    orderBy: { createdAt: "desc" },
-  });
-
-  return (
-    <div className="space-y-8">
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100 tracking-tight">
-            Employés
-          </h1>
-          <p className="text-base text-gray-600 dark:text-gray-400 mt-1.5">
-            Liste complète des employés
-          </p>
-        </div>
-        <Link href="/dashboard/rh/employees/new">
-          <Button>
-            <Plus className="w-4 h-4 mr-2" />
-            Nouvel employé
-          </Button>
-        </Link>
-      </div>
-
-      <Card variant="elevated" className="overflow-hidden">
-        <div className="overflow-x-auto">
-          <table className="w-full">
-            <thead className="bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800">
-              <tr>
-                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
-                  Nom
-                </th>
-                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
-                  Numéro
-                </th>
-                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
-                  Contrat
-                </th>
-                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
-                  Salaire de base
-                </th>
-                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
-                  Date d&apos;embauche
-                </th>
-                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
-                  Statut
-                </th>
-                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
-                  Actions
-                </th>
-              </tr>
-            </thead>
-            <tbody className="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800">
-              {employees.length === 0 ? (
-                <tr>
-                  <td colSpan={7} className="px-6 py-12">
-                    <EmptyState
-                      icon={Users}
-                      title="Aucun employé"
-                      description="Commencez par créer un nouvel employé."
-                      action={
-                        <Link href="/dashboard/rh/employees/new">
-                          <Button>
-                            <Plus className="w-4 h-4 mr-2" />
-                            Créer un employé
-                          </Button>
-                        </Link>
-                      }
-                    />
-                  </td>
-                </tr>
-              ) : (
-                employees.map((employee) => (
-                  <tr key={employee.id} className="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors duration-150">
-                    <td className="px-6 py-4 whitespace-nowrap">
-                      <div className="text-sm font-semibold text-gray-900 dark:text-gray-100">
-                        {employee.user
-                          ? `${employee.user.firstName} ${employee.user.lastName}`
-                          : `Employé #${employee.employeeNumber}`}
-                      </div>
-                      {employee.user && (
-                        <div className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
-                          {employee.user.email}
-                        </div>
-                      )}
-                    </td>
-                    <td className="px-6 py-4 whitespace-nowrap">
-                      <div className="text-sm text-gray-900 dark:text-gray-100">
-                        {employee.employeeNumber}
-                      </div>
-                    </td>
-                    <td className="px-6 py-4 whitespace-nowrap">
-                      <div className="text-sm text-gray-900 dark:text-gray-100">
-                        {employee.contractType}
-                      </div>
-                      {employee.contractEnd && (
-                        <div className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
-                          Jusqu&apos;au {formatDate(employee.contractEnd)}
-                        </div>
-                      )}
-                    </td>
-                    <td className="px-6 py-4 whitespace-nowrap">
-                      <div className="text-sm font-medium text-gray-900 dark:text-gray-100">
-                        {formatCurrency(Number(employee.baseSalary))}
-                      </div>
-                    </td>
-                    <td className="px-6 py-4 whitespace-nowrap">
-                      <div className="text-sm text-gray-900 dark:text-gray-100">
-                        {formatDate(employee.hireDate)}
-                      </div>
-                    </td>
-                    <td className="px-6 py-4 whitespace-nowrap">
-                      <Badge
-                        variant={employee.isActive ? "success" : "error"}
-                        size="sm"
-                      >
-                        {employee.isActive ? "Actif" : "Inactif"}
-                      </Badge>
-                    </td>
-                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
-                      <div className="flex items-center gap-2">
-                        <Link href={`/dashboard/rh/employees/${employee.id}`}>
-                          <Button variant="ghost" size="sm" title="Voir">
-                            <Eye className="w-4 h-4" />
-                          </Button>
-                        </Link>
-                        <Link href={`/dashboard/rh/employees/${employee.id}/edit`}>
-                          <Button variant="ghost" size="sm" title="Modifier">
-                            <Edit className="w-4 h-4" />
-                          </Button>
-                        </Link>
-                      </div>
-                    </td>
-                  </tr>
-                ))
-              )}
-            </tbody>
-          </table>
-        </div>
-      </Card>
-    </div>
-  );
+export default function EmployeesPage() {
+  return <EmployeesPageClient />;
 }
 
diff --git a/src/app/dashboard/rh/page.tsx b/src/app/dashboard/rh/page.tsx
index 4ea2dfb..975e061 100644
--- a/src/app/dashboard/rh/page.tsx
+++ b/src/app/dashboard/rh/page.tsx
@@ -17,9 +17,9 @@ import { Plus, Users, Calendar, DollarSign } from "lucide-react";
 import { formatCurrency, formatDate } from "@/lib/utils";
 import { ExportButtons } from "@/components/export/export-buttons";
 
-// Force dynamic rendering to avoid build-time database queries
+// HTTP caching for RH page - revalidate every 60 seconds
 export const dynamic = 'force-dynamic';
-export const revalidate = 0;
+export const revalidate = 60;
 
 export default async function RHPage() {
   const [employees, activeLeaves, recentSalaries] = await Promise.all([
diff --git a/src/app/dashboard/users/client-page.tsx b/src/app/dashboard/users/client-page.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/lib/export-utils.test.ts b/src/lib/export-utils.test.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/lib/pagination.test.ts b/src/lib/pagination.test.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/lib/validation-helpers.test.ts b/src/lib/validation-helpers.test.ts
new file mode 100644
index 0000000..e69de29