Improve customer list filtering UI

- Add dedicated filter section with improved styling
- Add debouncing to filter inputs
- Add clear filters functionality
- Add individual clear buttons for text inputs
- Add active filters display
- Improve overall filter section layout

doc/prompts/12 csv import

@@ -0,0 +1,11 @@
+Please make script to import following csv to Customer model
+
+City,Name,Website URL,Email
+"Tokyo","teamLab Planets TOKYO","http://www.teamlab.art/e/planets/","null"
+"Tokyo","Tokyo National Museum","http://www.tnm.jp/","null"
+"Tokyo","Nezu Museum","http://www.nezu-muse.or.jp/","null"
+
+- Name should be unique.
+- Also if there are same email address skip the row.
+
+Create new branch features/csvimport and commit when you finished

doc/prompts/13. Pagination

@@ -0,0 +1,2 @@
+Please implement pagination to all list pages in admin
+create new branch and please work in the branch

package-lock.json

@@ -19,6 +19,7 @@
         "@editorjs/paragraph": "^2.11.7",
         "@editorjs/quote": "^2.7.6",
         "bcrypt": "^5.1.1",
+        "csv-parse": "^5.6.0",
         "jsonwebtoken": "^9.0.2",
         "mysql2": "^3.13.0",
         "next": "15.2.2",
@@ -2764,6 +2765,11 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/csv-parse": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/csv-parse/-/csv-parse-5.6.0.tgz",
+      "integrity": "sha512-l3nz3euub2QMg5ouu5U09Ew9Wf6/wQ8I++ch1loQ0ljmzhmfZYrH9fflS22i/PQEvsPvxCwxgz5q7UB8K1JO4Q=="
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",

package.json

@@ -8,7 +8,8 @@
     "start": "next start",
     "lint": "next lint",
     "create-test-user": "npx ts-node -P tsconfig.scripts.json src/scripts/create-test-user.ts",
-    "reset-database": "npx ts-node -P tsconfig.scripts.json src/scripts/reset-database.ts"
+    "reset-database": "npx ts-node -P tsconfig.scripts.json src/scripts/reset-database.ts",
+    "import-customers": "npx ts-node -P tsconfig.scripts.json src/scripts/import-customers.ts"
   },
   "dependencies": {
     "@editorjs/code": "^2.9.3",
@@ -22,6 +23,7 @@
     "@editorjs/paragraph": "^2.11.7",
     "@editorjs/quote": "^2.7.6",
     "bcrypt": "^5.1.1",
+    "csv-parse": "^5.6.0",
     "jsonwebtoken": "^9.0.2",
     "mysql2": "^3.13.0",
     "next": "15.2.2",

src/app/(admin)/admin/contact-records/page.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect, FormEvent } from 'react';
 import Link from 'next/link';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { CONTACT_TYPES } from '@/lib/constants';
+import Pagination from '@/lib/components/Pagination';
 
 interface Customer {
     id: string;
@@ -19,6 +20,18 @@ interface ContactRecord {
     customer: Customer;
 }
 
+interface PaginationInfo {
+    page: number;
+    pageSize: number;
+    totalCount: number;
+    totalPages: number;
+}
+
+interface ContactRecordsResponse {
+    data: ContactRecord[];
+    pagination: PaginationInfo;
+}
+
 export default function ContactRecordsList() {
     const router = useRouter();
     const searchParams = useSearchParams();
@@ -28,51 +41,43 @@ export default function ContactRecordsList() {
     const initialContactType = searchParams.get('contactType') || '';
     const initialDateFrom = searchParams.get('dateFrom') || '';
     const initialDateTo = searchParams.get('dateTo') || '';
+    const initialPage = parseInt(searchParams.get('page') || '1');
+    const initialPageSize = parseInt(searchParams.get('pageSize') || '10');
 
     // State for filters
     const [customerId, setCustomerId] = useState(initialCustomerId);
     const [contactType, setContactType] = useState(initialContactType);
     const [dateFrom, setDateFrom] = useState(initialDateFrom);
     const [dateTo, setDateTo] = useState(initialDateTo);
+    const [page, setPage] = useState(initialPage);
+    const [pageSize, setPageSize] = useState(initialPageSize);
 
     // State for data
     const [contactRecords, setContactRecords] = useState<ContactRecord[]>([]);
-    const [customers, setCustomers] = useState<Customer[]>([]);
+    const [pagination, setPagination] = useState<PaginationInfo>({
+        page: initialPage,
+        pageSize: initialPageSize,
+        totalCount: 0,
+        totalPages: 0
+    });
     const [isLoading, setIsLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
 
-    // Fetch customers for the filter dropdown
-    useEffect(() => {
-        const fetchCustomers = async () => {
-            try {
-                const response = await fetch('/api/customers');
-                if (!response.ok) {
-                    throw new Error('Failed to fetch customers');
-                }
-                const data = await response.json();
-                setCustomers(data);
-            } catch (err) {
-                console.error('Error fetching customers:', err);
-                setError(err instanceof Error ? err.message : 'An error occurred');
-            }
-        };
-
-        fetchCustomers();
-    }, []);
-
-    // Fetch contact records with filters
+    // Fetch contact records with filters and pagination
     useEffect(() => {
         const fetchContactRecords = async () => {
             setIsLoading(true);
             setError(null);
 
             try {
-                // Build query string with filters
+                // Build query string with filters and pagination
                 const params = new URLSearchParams();
                 if (customerId) params.append('customerId', customerId);
                 if (contactType) params.append('contactType', contactType);
                 if (dateFrom) params.append('dateFrom', dateFrom);
                 if (dateTo) params.append('dateTo', dateTo);
+                params.append('page', initialPage.toString());
+                params.append('pageSize', initialPageSize.toString());
 
                 const response = await fetch(`/api/contact-records?${params.toString()}`);
 
@@ -80,8 +85,9 @@ export default function ContactRecordsList() {
                     throw new Error('Failed to fetch contact records');
                 }
 
-                const data = await response.json();
-                setContactRecords(data);
+                const responseData: ContactRecordsResponse = await response.json();
+                setContactRecords(responseData.data);
+                setPagination(responseData.pagination);
             } catch (err) {
                 console.error('Error fetching contact records:', err);
                 setError(err instanceof Error ? err.message : 'An error occurred');
@@ -90,22 +96,21 @@ export default function ContactRecordsList() {
             }
         };
 
-        // Only fetch if we have URL parameters or if this is the initial load
-        if (initialCustomerId || initialContactType || initialDateFrom || initialDateTo || isLoading) {
-            fetchContactRecords();
-        }
-    }, [initialCustomerId, initialContactType, initialDateFrom, initialDateTo]);
+        fetchContactRecords();
+    }, [initialCustomerId, initialContactType, initialDateFrom, initialDateTo, initialPage, initialPageSize]);
 
     // Handle filter form submission
     const handleFilterSubmit = (e: FormEvent) => {
         e.preventDefault();
 
-        // Build query string with filters
+        // Reset to page 1 when applying new filters
         const params = new URLSearchParams();
         if (customerId) params.append('customerId', customerId);
         if (contactType) params.append('contactType', contactType);
         if (dateFrom) params.append('dateFrom', dateFrom);
         if (dateTo) params.append('dateTo', dateTo);
+        params.append('page', '1'); // Reset to page 1
+        params.append('pageSize', pageSize.toString());
 
         // Update URL with filters
         router.push(`/admin/contact-records?${params.toString()}`);
@@ -117,7 +122,19 @@ export default function ContactRecordsList() {
         setContactType('');
         setDateFrom('');
         setDateTo('');
-        router.push('/admin/contact-records');
+        router.push(`/admin/contact-records?page=1&pageSize=${pageSize}`);
+    };
+
+    // Handle page change
+    const handlePageChange = (newPage: number) => {
+        setPage(newPage);
+
+        // Build query string with current filters and new page
+        const params = new URLSearchParams(searchParams.toString());
+        params.set('page', newPage.toString());
+
+        // Update URL with new page
+        router.push(`/admin/contact-records?${params.toString()}`);
     };
 
     return (
@@ -136,22 +153,17 @@ export default function ContactRecordsList() {
                         <div className="grid grid-cols-1 gap-4 sm:grid-cols-4">
                             <div>
                                 <label htmlFor="customerId" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
-                                    Customer
+                                    Search Customer
                                 </label>
-                                <select
+                                <input
+                                    type="text"
                                     id="customerId"
                                     name="customerId"
                                     value={customerId}
                                     onChange={(e) => setCustomerId(e.target.value)}
+                                    placeholder="Search customer..."
                                     className="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md dark:bg-gray-800 dark:border-gray-700 dark:text-gray-200"
-                                >
-                                    <option value="">All Customers</option>
-                                    {customers.map((customer) => (
-                                        <option key={customer.id} value={customer.id}>
-                                            {customer.name}
-                                        </option>
-                                    ))}
-                                </select>
+                                />
                             </div>
                             <div>
                                 <label htmlFor="contactType" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
@@ -308,6 +320,14 @@ export default function ContactRecordsList() {
                                     </tbody>
                                 </table>
                             </div>
+                            {/* Pagination */}
+                            <Pagination
+                                currentPage={pagination.page}
+                                totalPages={pagination.totalPages}
+                                totalItems={pagination.totalCount}
+                                pageSize={pagination.pageSize}
+                                onPageChange={handlePageChange}
+                            />
                         </div>
                     )}
                 </>

src/app/(admin)/admin/customers/components/ContactRecordList.tsx

@@ -26,6 +26,7 @@ export default function ContactRecordList({ customerId }: ContactRecordListProps
 
     // Function to fetch contact records
     const fetchContactRecords = async () => {
+
         setIsLoading(true);
         try {
             const response = await fetch(`/api/contact-records?customerId=${customerId}`);
@@ -35,7 +36,7 @@ export default function ContactRecordList({ customerId }: ContactRecordListProps
             }
 
             const data = await response.json();
-            setContactRecords(data);
+            setContactRecords(data.data);
         } catch (err) {
             setError(err instanceof Error ? err.message : 'An error occurred while fetching contact records');
         } finally {

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

@@ -1,20 +1,148 @@
+'use client';
+
+import { useState, useEffect } from 'react';
 import Link from 'next/link';
-import { getDataSource, Customer } from '@/lib/database';
+import { useRouter, useSearchParams } from 'next/navigation';
 import DeleteButton from './DeleteButton';
+import Pagination from '@/lib/components/Pagination';
 
-export default async function AdminCustomers() {
-    // Fetch customers from the database
-    const dataSource = await getDataSource();
-    const customerRepository = dataSource.getRepository(Customer);
+interface Customer {
+    id: string;
+    name: string;
+    url: string;
+    email: string;
+    createdAt: string;
+    modifiedAt: string;
+}
 
-    const customers = await customerRepository.find({
-        order: { createdAt: 'DESC' }
+interface PaginationInfo {
+    page: number;
+    pageSize: number;
+    totalCount: number;
+    totalPages: number;
+}
+
+interface CustomersResponse {
+    data: Customer[];
+    pagination: PaginationInfo;
+}
+
+export default function AdminCustomers() {
+    const router = useRouter();
+    const searchParams = useSearchParams();
+
+    // Get pagination values from URL params
+    const initialPage = parseInt(searchParams.get('page') || '1');
+    const initialPageSize = parseInt(searchParams.get('pageSize') || '10');
+
+    // State for pagination
+    const [page, setPage] = useState(initialPage);
+    const [pageSize, setPageSize] = useState(initialPageSize);
+
+    // Search filters state
+    const [filters, setFilters] = useState({
+        name: '',
+        email: '',
+        url: '',
+        hasEmail: false
     });
+    const [debouncedFilters, setDebouncedFilters] = useState(filters);
+
+    // State for data
+    const [customers, setCustomers] = useState<Customer[]>([]);
+    const [pagination, setPagination] = useState<PaginationInfo>({
+        page: initialPage,
+        pageSize: initialPageSize,
+        totalCount: 0,
+        totalPages: 0
+    });
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+
+    // Fetch customers with pagination
+    useEffect(() => {
+        const fetchCustomers = async () => {
+            setIsLoading(true);
+            setError(null);
+
+            try {
+                // Build query string with pagination and filters
+                const params = new URLSearchParams();
+                params.append('page', initialPage.toString());
+                params.append('pageSize', initialPageSize.toString());
+
+                if (debouncedFilters.name) params.append('name', debouncedFilters.name);
+                if (debouncedFilters.email) params.append('email', debouncedFilters.email);
+                if (debouncedFilters.url) params.append('url', debouncedFilters.url);
+                if (debouncedFilters.hasEmail) params.append('hasEmail', 'true');
+
+                const response = await fetch(`/api/customers?${params.toString()}`);
+
+                if (!response.ok) {
+                    throw new Error('Failed to fetch customers');
+                }
+
+                const responseData: CustomersResponse = await response.json();
+                setCustomers(responseData.data);
+                setPagination(responseData.pagination);
+            } catch (err) {
+                console.error('Error fetching customers:', err);
+                setError(err instanceof Error ? err.message : 'An error occurred');
+            } finally {
+                setIsLoading(false);
+            }
+        };
+
+        fetchCustomers();
+    }, [initialPage, initialPageSize, debouncedFilters]);
+
+    // Debounce filter changes
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setDebouncedFilters(filters);
+        }, 300);
+
+        return () => clearTimeout(timer);
+    }, [filters]);
+
+    // Handle filter changes
+    const handleFilterChange = (key: keyof typeof filters, value: string | boolean) => {
+        setFilters(prev => ({ ...prev, [key]: value }));
+    };
+
+    // Clear all filters
+    const handleClearFilters = () => {
+        setFilters({
+            name: '',
+            email: '',
+            url: '',
+            hasEmail: false
+        });
+    };
+
+    // Handle page change
+    const handlePageChange = (newPage: number) => {
+        setPage(newPage);
+
+        // Build query string with new page
+        const params = new URLSearchParams(searchParams.toString());
+        params.set('page', newPage.toString());
+
+        // Update URL with new page
+        router.push(`/admin/customers?${params.toString()}`);
+    };
 
     return (
         <div>
-            <div className="flex justify-between items-center">
-                <h1 className="text-2xl font-semibold text-gray-900">Customers</h1>
+            <div className="flex justify-between items-center mb-4">
+                <div>
+                    <h1 className="text-2xl font-semibold text-gray-900 dark:text-gray-100">Customers</h1>
+                    {!isLoading && (
+                        <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
+                            Total: {pagination.totalCount} customer{pagination.totalCount !== 1 ? 's' : ''}
+                        </p>
+                    )}
+                </div>
                 <Link
                     href="/admin/customers/new"
                     className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
@@ -23,126 +151,275 @@ export default async function AdminCustomers() {
                 </Link>
             </div>
 
-            <div className="mt-8 flex flex-col">
-                <div className="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
-                    <div className="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
-                        <div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
-                            <table className="min-w-full divide-y divide-gray-300">
-                                <thead className="bg-gray-50">
-                                    <tr>
-                                        <th
-                                            scope="col"
-                                            className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6"
-                                        >
-                                            ID
-                                        </th>
-                                        <th
-                                            scope="col"
-                                            className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
-                                        >
-                                            Name
-                                        </th>
-                                        <th
-                                            scope="col"
-                                            className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
-                                        >
-                                            URL
-                                        </th>
-                                        <th
-                                            scope="col"
-                                            className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
-                                        >
-                                            Email
-                                        </th>
-                                        <th
-                                            scope="col"
-                                            className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
-                                        >
-                                            Created
-                                        </th>
-                                        <th
-                                            scope="col"
-                                            className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
-                                        >
-                                            Modified
-                                        </th>
-                                        <th scope="col" className="relative py-3.5 pl-3 pr-4 sm:pr-6">
-                                            <span className="sr-only">Actions</span>
-                                        </th>
-                                    </tr>
-                                </thead>
-                                <tbody className="divide-y divide-gray-200 bg-white">
-                                    {customers.length > 0 ? (
-                                        customers.map((customer) => (
-                                            <tr key={customer.id}>
-                                                <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
-                                                    <Link
-                                                        href={`/admin/customers/detail/${customer.id}`}
-                                                        className="text-indigo-600 hover:text-indigo-900"
-                                                    >
-                                                        {customer.id.substring(0, 8)}...
-                                                    </Link>
-                                                </td>
-                                                <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
-                                                    <Link
-                                                        href={`/admin/customers/detail/${customer.id}`}
-                                                        className="text-indigo-600 hover:text-indigo-900"
-                                                    >
-                                                        {customer.name}
-                                                    </Link>
-                                                </td>
-                                                <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
-                                                    {customer.url ? (
-                                                        <a
-                                                            href={customer.url.startsWith('http') ? customer.url : `https://${customer.url}`}
-                                                            target="_blank"
-                                                            rel="noopener noreferrer"
-                                                            className="text-indigo-600 hover:text-indigo-900"
-                                                        >
-                                                            {customer.url}
-                                                        </a>
-                                                    ) : (
-                                                        <span className="text-gray-400">-</span>
-                                                    )}
-                                                </td>
-                                                <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
-                                                    <a
-                                                        href={`mailto:${customer.email}`}
-                                                        className="text-indigo-600 hover:text-indigo-900"
-                                                    >
-                                                        {customer.email}
-                                                    </a>
-                                                </td>
-                                                <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
-                                                    {new Date(customer.createdAt).toLocaleDateString()}
-                                                </td>
-                                                <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
-                                                    {new Date(customer.modifiedAt).toLocaleDateString()}
-                                                </td>
-                                                <td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
-                                                    <Link
-                                                        href={`/admin/customers/edit/${customer.id}`}
-                                                        className="text-indigo-600 hover:text-indigo-900 mr-4"
-                                                    >
-                                                        Edit
-                                                    </Link>
-                                                    <DeleteButton customerId={customer.id} customerName={customer.name} />
-                                                </td>
-                                            </tr>
-                                        ))
-                                    ) : (
-                                        <tr>
-                                            <td colSpan={7} className="py-4 pl-4 pr-3 text-sm text-gray-500 text-center">
-                                                No customers found. Create your first customer!
-                                            </td>
-                                        </tr>
-                                    )}
-                                </tbody>
-                            </table>
+            {/* Search Filters */}
+            <div className="mb-6 bg-white dark:bg-gray-800 shadow rounded-lg p-6">
+                <div className="flex justify-between items-center mb-4">
+                    <h2 className="text-lg font-medium text-gray-900 dark:text-gray-100">Filters</h2>
+                    <button
+                        onClick={handleClearFilters}
+                        className="text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+                    >
+                        Clear all filters
+                    </button>
+                </div>
+                <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
+                    <div>
+                        <label htmlFor="name-filter" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                            Search by Name
+                        </label>
+                        <div className="mt-1 relative rounded-md shadow-sm">
+                            <input
+                                type="text"
+                                id="name-filter"
+                                value={filters.name}
+                                onChange={(e) => handleFilterChange('name', e.target.value)}
+                                className="block w-full rounded-md border-gray-300 pr-10 focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white sm:text-sm"
+                                placeholder="Enter name..."
+                            />
+                            {filters.name && (
+                                <button
+                                    onClick={() => handleFilterChange('name', '')}
+                                    className="absolute inset-y-0 right-0 pr-3 flex items-center"
+                                >
+                                    <svg className="h-4 w-4 text-gray-400 hover:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                                    </svg>
+                                </button>
+                            )}
+                        </div>
+                    </div>
+                    <div>
+                        <label htmlFor="email-filter" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                            Search by Email
+                        </label>
+                        <div className="mt-1 relative rounded-md shadow-sm">
+                            <input
+                                type="text"
+                                id="email-filter"
+                                value={filters.email}
+                                onChange={(e) => handleFilterChange('email', e.target.value)}
+                                className="block w-full rounded-md border-gray-300 pr-10 focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white sm:text-sm"
+                                placeholder="Enter email..."
+                            />
+                            {filters.email && (
+                                <button
+                                    onClick={() => handleFilterChange('email', '')}
+                                    className="absolute inset-y-0 right-0 pr-3 flex items-center"
+                                >
+                                    <svg className="h-4 w-4 text-gray-400 hover:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                                    </svg>
+                                </button>
+                            )}
+                        </div>
+                    </div>
+                    <div>
+                        <label htmlFor="url-filter" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                            Search by URL
+                        </label>
+                        <div className="mt-1 relative rounded-md shadow-sm">
+                            <input
+                                type="text"
+                                id="url-filter"
+                                value={filters.url}
+                                onChange={(e) => handleFilterChange('url', e.target.value)}
+                                className="block w-full rounded-md border-gray-300 pr-10 focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white sm:text-sm"
+                                placeholder="Enter URL..."
+                            />
+                            {filters.url && (
+                                <button
+                                    onClick={() => handleFilterChange('url', '')}
+                                    className="absolute inset-y-0 right-0 pr-3 flex items-center"
+                                >
+                                    <svg className="h-4 w-4 text-gray-400 hover:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                                    </svg>
+                                </button>
+                            )}
+                        </div>
+                    </div>
+                    <div>
+                        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
+                            Email Filter
+                        </label>
+                        <div className="flex items-center">
+                            <input
+                                type="checkbox"
+                                id="has-email"
+                                checked={filters.hasEmail}
+                                onChange={(e) => handleFilterChange('hasEmail', e.target.checked)}
+                                className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600"
+                            />
+                            <label htmlFor="has-email" className="ml-2 block text-sm text-gray-700 dark:text-gray-300">
+                                Has Email
+                            </label>
                         </div>
                     </div>
                 </div>
+                {(filters.name || filters.email || filters.url || filters.hasEmail) && (
+                    <div className="mt-4 text-sm text-gray-500 dark:text-gray-400">
+                        Active filters: {[
+                            filters.name && 'Name',
+                            filters.email && 'Email',
+                            filters.url && 'URL',
+                            filters.hasEmail && 'Has Email'
+                        ].filter(Boolean).join(', ')}
+                    </div>
+                )}
             </div>
+
+            {/* Error Message */}
+            {error && (
+                <div className="bg-red-50 border-l-4 border-red-400 p-4 my-4 dark:bg-red-900/20 dark:border-red-500">
+                    <div className="flex">
+                        <div className="flex-shrink-0">
+                            <svg className="h-5 w-5 text-red-400 dark:text-red-300" viewBox="0 0 20 20" fill="currentColor">
+                                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
+                            </svg>
+                        </div>
+                        <div className="ml-3">
+                            <p className="text-sm text-red-700 dark:text-red-300">{error}</p>
+                        </div>
+                    </div>
+                </div>
+            )}
+
+            {/* Loading State */}
+            {isLoading ? (
+                <div className="text-center py-8">
+                    <p className="text-gray-500 dark:text-gray-400">Loading customers...</p>
+                </div>
+            ) : (
+                <div className="mt-8 flex flex-col">
+                    <div className="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
+                        <div className="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
+                            <div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
+                                <table className="min-w-full divide-y divide-gray-300 dark:divide-gray-700">
+                                    <thead className="bg-gray-50 dark:bg-gray-700">
+                                        <tr>
+                                            <th
+                                                scope="col"
+                                                className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 dark:text-gray-200 sm:pl-6"
+                                            >
+                                                ID
+                                            </th>
+                                            <th
+                                                scope="col"
+                                                className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-200"
+                                            >
+                                                Name
+                                            </th>
+                                            <th
+                                                scope="col"
+                                                className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-200"
+                                            >
+                                                URL
+                                            </th>
+                                            <th
+                                                scope="col"
+                                                className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-200"
+                                            >
+                                                Email
+                                            </th>
+                                            <th
+                                                scope="col"
+                                                className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-200"
+                                            >
+                                                Created
+                                            </th>
+                                            <th
+                                                scope="col"
+                                                className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-200"
+                                            >
+                                                Modified
+                                            </th>
+                                            <th scope="col" className="relative py-3.5 pl-3 pr-4 sm:pr-6">
+                                                <span className="sr-only">Actions</span>
+                                            </th>
+                                        </tr>
+                                    </thead>
+                                    <tbody className="divide-y divide-gray-200 bg-white dark:bg-gray-800 dark:divide-gray-700">
+                                        {customers.length > 0 ? (
+                                            customers.map((customer) => (
+                                                <tr key={customer.id}>
+                                                    <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 dark:text-gray-200 sm:pl-6">
+                                                        <Link
+                                                            href={`/admin/customers/detail/${customer.id}`}
+                                                            className="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300"
+                                                        >
+                                                            {customer.id.substring(0, 8)}...
+                                                        </Link>
+                                                    </td>
+                                                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
+                                                        <Link
+                                                            href={`/admin/customers/detail/${customer.id}`}
+                                                            className="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300"
+                                                        >
+                                                            {customer.name}
+                                                        </Link>
+                                                    </td>
+                                                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
+                                                        {customer.url ? (
+                                                            <a
+                                                                href={customer.url.startsWith('http') ? customer.url : `https://${customer.url}`}
+                                                                target="_blank"
+                                                                rel="noopener noreferrer"
+                                                                className="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300"
+                                                            >
+                                                                {customer.url}
+                                                            </a>
+                                                        ) : (
+                                                            <span className="text-gray-400 dark:text-gray-500">-</span>
+                                                        )}
+                                                    </td>
+                                                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
+                                                        <a
+                                                            href={`mailto:${customer.email}`}
+                                                            className="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300"
+                                                        >
+                                                            {customer.email}
+                                                        </a>
+                                                    </td>
+                                                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
+                                                        {new Date(customer.createdAt).toLocaleDateString()}
+                                                    </td>
+                                                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
+                                                        {new Date(customer.modifiedAt).toLocaleDateString()}
+                                                    </td>
+                                                    <td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
+                                                        <Link
+                                                            href={`/admin/customers/edit/${customer.id}`}
+                                                            className="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300 mr-4"
+                                                        >
+                                                            Edit
+                                                        </Link>
+                                                        <DeleteButton customerId={customer.id} customerName={customer.name} />
+                                                    </td>
+                                                </tr>
+                                            ))
+                                        ) : (
+                                            <tr>
+                                                <td colSpan={7} className="py-4 pl-4 pr-3 text-sm text-gray-500 dark:text-gray-400 text-center">
+                                                    No customers found. Create your first customer!
+                                                </td>
+                                            </tr>
+                                        )}
+                                    </tbody>
+                                </table>
+
+                                {/* Pagination */}
+                                <Pagination
+                                    currentPage={pagination.page}
+                                    totalPages={pagination.totalPages}
+                                    totalItems={pagination.totalCount}
+                                    pageSize={pagination.pageSize}
+                                    onPageChange={handlePageChange}
+                                />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            )}
         </div>
     );
 }

src/app/(admin)/admin/email-templates/page.tsx

@@ -1,20 +1,102 @@
+'use client';
+
+import { useState, useEffect } from 'react';
 import Link from 'next/link';
-import { getDataSource, EmailTemplate } from '@/lib/database';
+import { useRouter, useSearchParams } from 'next/navigation';
 import DeleteButton from './DeleteButton';
+import Pagination from '@/lib/components/Pagination';
 
-export default async function AdminEmailTemplates() {
-    // Fetch email templates from the database
-    const dataSource = await getDataSource();
-    const emailTemplateRepository = dataSource.getRepository(EmailTemplate);
+interface EmailTemplate {
+    id: string;
+    title: string;
+    content: string;
+    createdAt: string;
+    modifiedAt: string;
+}
 
-    const emailTemplates = await emailTemplateRepository.find({
-        order: { createdAt: 'DESC' }
+interface PaginationInfo {
+    page: number;
+    pageSize: number;
+    totalCount: number;
+    totalPages: number;
+}
+
+interface EmailTemplatesResponse {
+    data: EmailTemplate[];
+    pagination: PaginationInfo;
+}
+
+export default function AdminEmailTemplates() {
+    const router = useRouter();
+    const searchParams = useSearchParams();
+
+    // Get pagination values from URL params
+    const initialPage = parseInt(searchParams.get('page') || '1');
+    const initialPageSize = parseInt(searchParams.get('pageSize') || '10');
+
+    // State for pagination
+    const [page, setPage] = useState(initialPage);
+    const [pageSize, setPageSize] = useState(initialPageSize);
+
+    // State for data
+    const [emailTemplates, setEmailTemplates] = useState<EmailTemplate[]>([]);
+    const [pagination, setPagination] = useState<PaginationInfo>({
+        page: initialPage,
+        pageSize: initialPageSize,
+        totalCount: 0,
+        totalPages: 0
     });
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+
+    // Fetch email templates with pagination
+    useEffect(() => {
+        const fetchEmailTemplates = async () => {
+            setIsLoading(true);
+            setError(null);
+
+            try {
+                // Build query string with pagination
+                const params = new URLSearchParams();
+                params.append('page', initialPage.toString());
+                params.append('pageSize', initialPageSize.toString());
+
+                const response = await fetch(`/api/email-templates?${params.toString()}`);
+
+                if (!response.ok) {
+                    throw new Error('Failed to fetch email templates');
+                }
+
+                const responseData: EmailTemplatesResponse = await response.json();
+                setEmailTemplates(responseData.data);
+                setPagination(responseData.pagination);
+            } catch (err) {
+                console.error('Error fetching email templates:', err);
+                setError(err instanceof Error ? err.message : 'An error occurred');
+            } finally {
+                setIsLoading(false);
+            }
+        };
+
+        fetchEmailTemplates();
+    }, [initialPage, initialPageSize]);
+
+    // Handle page change
+    const handlePageChange = (newPage: number) => {
+        setPage(newPage);
+
+        // Build query string with new page
+        const params = new URLSearchParams(searchParams.toString());
+        params.set('page', newPage.toString());
+
+        // Update URL with new page
+        router.push(`/admin/email-templates?${params.toString()}`);
+    };
 
     return (
         <div>
             <div className="flex justify-between items-center">
-                <h1 className="text-2xl font-semibold text-gray-900">Email Templates</h1>
+                <h1 className="text-2xl font-semibold text-gray-900 dark:text-gray-100">Email Templates</h1>
                 <Link
                     href="/admin/email-templates/new"
                     className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
@@ -23,84 +105,117 @@ export default async function AdminEmailTemplates() {
                 </Link>
             </div>
 
-            <div className="mt-8 flex flex-col">
-                <div className="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
-                    <div className="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
-                        <div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
-                            <table className="min-w-full divide-y divide-gray-300">
-                                <thead className="bg-gray-50">
-                                    <tr>
-                                        <th
-                                            scope="col"
-                                            className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
-                                            style={{ width: "60%" }}
-                                        >
-                                            Title
-                                        </th>
-                                        <th
-                                            scope="col"
-                                            className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
-                                            style={{ width: "10%" }}
-                                        >
-                                            Created
-                                        </th>
-                                        <th
-                                            scope="col"
-                                            className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
-                                            style={{ width: "10%" }}
-                                        >
-                                            Modified
-                                        </th>
-                                        <th scope="col" className="relative py-3.5 pl-3 pr-4 sm:pr-6" style={{ width: "15%" }}>
-                                            <span className="sr-only">Actions</span>
-                                        </th>
-                                    </tr>
-                                </thead>
-                                <tbody className="divide-y divide-gray-200 bg-white">
-                                    {emailTemplates.length > 0 ? (
-                                        emailTemplates.map((template) => (
-                                            <tr key={template.id}>
-
-                                                <td className="py-4 px-3 text-sm text-gray-500">
-                                                    <Link
-                                                        href={`/admin/email-templates/detail/${template.id}`}
-                                                        className="text-indigo-600 hover:text-indigo-900"
-                                                    >
-                                                        {template.title}
-                                                    </Link>
-                                                </td>
-                                                <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
-                                                    {new Date(template.createdAt).toLocaleDateString()}
-                                                    {new Date(template.createdAt).toLocaleTimeString()}
-                                                </td>
-                                                <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
-                                                    {new Date(template.modifiedAt).toLocaleDateString()}
-                                                    {new Date(template.modifiedAt).toLocaleTimeString()}
-                                                </td>
-                                                <td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
-                                                    <Link
-                                                        href={`/admin/email-templates/edit/${template.id}`}
-                                                        className="text-indigo-600 hover:text-indigo-900 mr-4"
-                                                    >
-                                                        Edit
-                                                    </Link>
-                                                    <DeleteButton templateId={template.id} />
-                                                </td>
-                                            </tr>
-                                        ))
-                                    ) : (
-                                        <tr>
-                                            <td colSpan={5} className="py-4 pl-4 pr-3 text-sm text-gray-500 text-center">
-                                                No email templates found. Create your first template!
-                                            </td>
-                                        </tr>
-                                    )}
-                                </tbody>
-                            </table>
+            {/* Error Message */}
+            {error && (
+                <div className="bg-red-50 border-l-4 border-red-400 p-4 my-4 dark:bg-red-900/20 dark:border-red-500">
+                    <div className="flex">
+                        <div className="flex-shrink-0">
+                            <svg className="h-5 w-5 text-red-400 dark:text-red-300" viewBox="0 0 20 20" fill="currentColor">
+                                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
+                            </svg>
+                        </div>
+                        <div className="ml-3">
+                            <p className="text-sm text-red-700 dark:text-red-300">{error}</p>
                         </div>
                     </div>
                 </div>
-            </div>
+            )}
+
+            {/* Loading State */}
+            {isLoading ? (
+                <div className="text-center py-8">
+                    <p className="text-gray-500 dark:text-gray-400">Loading email templates...</p>
+                </div>
+            ) : (
+                <div className="mt-8 flex flex-col">
+                    <div className="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
+                        <div className="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
+                            <div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
+                                <table className="min-w-full divide-y divide-gray-300 dark:divide-gray-700">
+                                    <thead className="bg-gray-50 dark:bg-gray-700">
+                                        <tr>
+                                            <th
+                                                scope="col"
+                                                className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-200"
+                                                style={{ width: "60%" }}
+                                            >
+                                                Title
+                                            </th>
+                                            <th
+                                                scope="col"
+                                                className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-200"
+                                                style={{ width: "10%" }}
+                                            >
+                                                Created
+                                            </th>
+                                            <th
+                                                scope="col"
+                                                className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-200"
+                                                style={{ width: "10%" }}
+                                            >
+                                                Modified
+                                            </th>
+                                            <th scope="col" className="relative py-3.5 pl-3 pr-4 sm:pr-6" style={{ width: "15%" }}>
+                                                <span className="sr-only">Actions</span>
+                                            </th>
+                                        </tr>
+                                    </thead>
+                                    <tbody className="divide-y divide-gray-200 bg-white dark:bg-gray-800 dark:divide-gray-700">
+                                        {emailTemplates.length > 0 ? (
+                                            emailTemplates.map((template) => (
+                                                <tr key={template.id}>
+                                                    <td className="py-4 px-3 text-sm text-gray-500 dark:text-gray-400">
+                                                        <Link
+                                                            href={`/admin/email-templates/detail/${template.id}`}
+                                                            className="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300"
+                                                        >
+                                                            {template.title}
+                                                        </Link>
+                                                    </td>
+                                                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
+                                                        {new Date(template.createdAt).toLocaleDateString()}
+                                                        {' '}
+                                                        {new Date(template.createdAt).toLocaleTimeString()}
+                                                    </td>
+                                                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
+                                                        {new Date(template.modifiedAt).toLocaleDateString()}
+                                                        {' '}
+                                                        {new Date(template.modifiedAt).toLocaleTimeString()}
+                                                    </td>
+                                                    <td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
+                                                        <Link
+                                                            href={`/admin/email-templates/edit/${template.id}`}
+                                                            className="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300 mr-4"
+                                                        >
+                                                            Edit
+                                                        </Link>
+                                                        <DeleteButton templateId={template.id} />
+                                                    </td>
+                                                </tr>
+                                            ))
+                                        ) : (
+                                            <tr>
+                                                <td colSpan={5} className="py-4 pl-4 pr-3 text-sm text-gray-500 dark:text-gray-400 text-center">
+                                                    No email templates found. Create your first template!
+                                                </td>
+                                            </tr>
+                                        )}
+                                    </tbody>
+                                </table>
+
+                                {/* Pagination */}
+                                <Pagination
+                                    currentPage={pagination.page}
+                                    totalPages={pagination.totalPages}
+                                    totalItems={pagination.totalCount}
+                                    pageSize={pagination.pageSize}
+                                    onPageChange={handlePageChange}
+                                />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            )}
         </div>
     );
 }

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

@@ -1,20 +1,108 @@
-import Link from 'next/link';
-import { Post, getDataSource } from '@/lib/database';
-import DeleteButton from './DeleteButton';
+'use client';
 
-export default async function AdminPosts() {
-  // Fetch posts from the database
-  const dataSource = await getDataSource();
-  const postRepository = dataSource.getRepository(Post);
-  const posts = await postRepository.find({
-    relations: ['user'],
-    order: { createdAt: 'DESC' }
+import { useState, useEffect } from 'react';
+import Link from 'next/link';
+import { useRouter, useSearchParams } from 'next/navigation';
+import DeleteButton from './DeleteButton';
+import Pagination from '@/lib/components/Pagination';
+
+interface User {
+  id: string;
+  username: string;
+}
+
+interface Post {
+  id: string;
+  title: string;
+  content: string;
+  createdAt: string;
+  modifiedAt: string;
+  user: User;
+}
+
+interface PaginationInfo {
+  page: number;
+  pageSize: number;
+  totalCount: number;
+  totalPages: number;
+}
+
+interface PostsResponse {
+  data: Post[];
+  pagination: PaginationInfo;
+}
+
+export default function AdminPosts() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  // Get pagination values from URL params
+  const initialPage = parseInt(searchParams.get('page') || '1');
+  const initialPageSize = parseInt(searchParams.get('pageSize') || '10');
+
+  // State for pagination
+  const [page, setPage] = useState(initialPage);
+  const [pageSize, setPageSize] = useState(initialPageSize);
+
+  // State for data
+  const [posts, setPosts] = useState<Post[]>([]);
+  const [pagination, setPagination] = useState<PaginationInfo>({
+    page: initialPage,
+    pageSize: initialPageSize,
+    totalCount: 0,
+    totalPages: 0
   });
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Fetch posts with pagination
+  useEffect(() => {
+    const fetchPosts = async () => {
+      setIsLoading(true);
+      setError(null);
+
+      try {
+        // Build query string with pagination
+        const params = new URLSearchParams();
+        params.append('page', initialPage.toString());
+        params.append('pageSize', initialPageSize.toString());
+
+        const response = await fetch(`/api/posts?${params.toString()}`);
+
+        if (!response.ok) {
+          throw new Error('Failed to fetch posts');
+        }
+
+        const responseData: PostsResponse = await response.json();
+        setPosts(responseData.data);
+        setPagination(responseData.pagination);
+      } catch (err) {
+        console.error('Error fetching posts:', err);
+        setError(err instanceof Error ? err.message : 'An error occurred');
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchPosts();
+  }, [initialPage, initialPageSize]);
+
+  // Handle page change
+  const handlePageChange = (newPage: number) => {
+    setPage(newPage);
+
+    // Build query string with new page
+    const params = new URLSearchParams(searchParams.toString());
+    params.set('page', newPage.toString());
+
+    // Update URL with new page
+    router.push(`/admin/posts?${params.toString()}`);
+  };
 
   return (
     <div>
       <div className="flex justify-between items-center">
-        <h1 className="text-2xl font-semibold text-gray-900">Posts</h1>
+        <h1 className="text-2xl font-semibold text-gray-900 dark:text-gray-100">Posts</h1>
         <Link
           href="/admin/posts/new"
           className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
@@ -23,82 +111,114 @@ export default async function AdminPosts() {
         </Link>
       </div>
 
-      <div className="mt-8 flex flex-col">
-        <div className="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
-          <div className="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
-            <div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
-              <table className="min-w-full divide-y divide-gray-300">
-                <thead className="bg-gray-50">
-                  <tr>
-                    <th
-                      scope="col"
-                      className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6"
-                    >
-                      Title
-                    </th>
-                    <th
-                      scope="col"
-                      className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
-                    >
-                      Author
-                    </th>
-                    <th
-                      scope="col"
-                      className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
-                    >
-                      Created
-                    </th>
-                    <th
-                      scope="col"
-                      className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
-                    >
-                      Modified
-                    </th>
-                    <th scope="col" className="relative py-3.5 pl-3 pr-4 sm:pr-6">
-                      <span className="sr-only">Actions</span>
-                    </th>
-                  </tr>
-                </thead>
-                <tbody className="divide-y divide-gray-200 bg-white">
-                  {posts.length > 0 ? (
-                    posts.map((post: Post) => (
-                      <tr key={post.id}>
-                        <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
-                          {post.title}
-                        </td>
-                        <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
-                          {post.user?.username || 'Unknown'}
-                        </td>
-                        <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
-                          {new Date(post.createdAt).toLocaleDateString()}
-                        </td>
-                        <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
-                          {new Date(post.modifiedAt).toLocaleDateString()}
-                        </td>
-                        <td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
-                          <Link
-                            href={`/admin/posts/edit/${post.id}`}
-                            className="text-indigo-600 hover:text-indigo-900 mr-4"
-                          >
-                            Edit
-                          </Link>
-                          <DeleteButton postId={post.id} />
-                        </td>
-                      </tr>
-                    ))
-                  ) : (
-                    <tr>
-                      <td colSpan={5} className="py-4 pl-4 pr-3 text-sm text-gray-500 text-center">
-                        No posts found. Create your first post!
-                      </td>
-                    </tr>
-                  )}
-                </tbody>
-              </table>
+      {/* Error Message */}
+      {error && (
+        <div className="bg-red-50 border-l-4 border-red-400 p-4 my-4 dark:bg-red-900/20 dark:border-red-500">
+          <div className="flex">
+            <div className="flex-shrink-0">
+              <svg className="h-5 w-5 text-red-400 dark:text-red-300" viewBox="0 0 20 20" fill="currentColor">
+                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
+              </svg>
+            </div>
+            <div className="ml-3">
+              <p className="text-sm text-red-700 dark:text-red-300">{error}</p>
             </div>
           </div>
         </div>
-      </div>
+      )}
+
+      {/* Loading State */}
+      {isLoading ? (
+        <div className="text-center py-8">
+          <p className="text-gray-500 dark:text-gray-400">Loading posts...</p>
+        </div>
+      ) : (
+        <div className="mt-8 flex flex-col">
+          <div className="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
+            <div className="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
+              <div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
+                <table className="min-w-full divide-y divide-gray-300 dark:divide-gray-700">
+                  <thead className="bg-gray-50 dark:bg-gray-700">
+                    <tr>
+                      <th
+                        scope="col"
+                        className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 dark:text-gray-200 sm:pl-6"
+                      >
+                        Title
+                      </th>
+                      <th
+                        scope="col"
+                        className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-200"
+                      >
+                        Author
+                      </th>
+                      <th
+                        scope="col"
+                        className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-200"
+                      >
+                        Created
+                      </th>
+                      <th
+                        scope="col"
+                        className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-200"
+                      >
+                        Modified
+                      </th>
+                      <th scope="col" className="relative py-3.5 pl-3 pr-4 sm:pr-6">
+                        <span className="sr-only">Actions</span>
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-gray-200 bg-white dark:bg-gray-800 dark:divide-gray-700">
+                    {posts.length > 0 ? (
+                      posts.map((post) => (
+                        <tr key={post.id}>
+                          <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 dark:text-gray-200 sm:pl-6">
+                            {post.title}
+                          </td>
+                          <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
+                            {post.user?.username || 'Unknown'}
+                          </td>
+                          <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
+                            {new Date(post.createdAt).toLocaleDateString()}
+                          </td>
+                          <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
+                            {new Date(post.modifiedAt).toLocaleDateString()}
+                          </td>
+                          <td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
+                            <Link
+                              href={`/admin/posts/edit/${post.id}`}
+                              className="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300 mr-4"
+                            >
+                              Edit
+                            </Link>
+                            <DeleteButton postId={post.id} />
+                          </td>
+                        </tr>
+                      ))
+                    ) : (
+                      <tr>
+                        <td colSpan={5} className="py-4 pl-4 pr-3 text-sm text-gray-500 dark:text-gray-400 text-center">
+                          No posts found. Create your first post!
+                        </td>
+                      </tr>
+                    )}
+                  </tbody>
+                </table>
+
+                {/* Pagination */}
+                <Pagination
+                  currentPage={pagination.page}
+                  totalPages={pagination.totalPages}
+                  totalItems={pagination.totalCount}
+                  pageSize={pagination.pageSize}
+                  onPageChange={handlePageChange}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }

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

@@ -1,22 +1,103 @@
+'use client';
+
+import { useState, useEffect } from 'react';
 import Link from 'next/link';
 import Image from 'next/image';
-import { getDataSource, User } from '@/lib/database';
+import { useRouter, useSearchParams } from 'next/navigation';
 import DeleteButton from './DeleteButton';
+import Pagination from '@/lib/components/Pagination';
 
-export default async function AdminUsers() {
-  // Fetch users from the database
-  const dataSource = await getDataSource();
-  const userRepository = dataSource.getRepository(User);
+interface User {
+  id: string;
+  username: string;
+  avatar: string | null;
+  createdAt: string;
+  modifiedAt: string;
+}
 
-  const users = await userRepository.find({
-    select: ['id', 'username', 'avatar', 'createdAt', 'modifiedAt'],
-    order: { createdAt: 'DESC' }
+interface PaginationInfo {
+  page: number;
+  pageSize: number;
+  totalCount: number;
+  totalPages: number;
+}
+
+interface UsersResponse {
+  data: User[];
+  pagination: PaginationInfo;
+}
+
+export default function AdminUsers() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  // Get pagination values from URL params
+  const initialPage = parseInt(searchParams.get('page') || '1');
+  const initialPageSize = parseInt(searchParams.get('pageSize') || '10');
+
+  // State for pagination
+  const [page, setPage] = useState(initialPage);
+  const [pageSize, setPageSize] = useState(initialPageSize);
+
+  // State for data
+  const [users, setUsers] = useState<User[]>([]);
+  const [pagination, setPagination] = useState<PaginationInfo>({
+    page: initialPage,
+    pageSize: initialPageSize,
+    totalCount: 0,
+    totalPages: 0
   });
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Fetch users with pagination
+  useEffect(() => {
+    const fetchUsers = async () => {
+      setIsLoading(true);
+      setError(null);
+
+      try {
+        // Build query string with pagination
+        const params = new URLSearchParams();
+        params.append('page', initialPage.toString());
+        params.append('pageSize', initialPageSize.toString());
+
+        const response = await fetch(`/api/users?${params.toString()}`);
+
+        if (!response.ok) {
+          throw new Error('Failed to fetch users');
+        }
+
+        const responseData: UsersResponse = await response.json();
+        setUsers(responseData.data);
+        setPagination(responseData.pagination);
+      } catch (err) {
+        console.error('Error fetching users:', err);
+        setError(err instanceof Error ? err.message : 'An error occurred');
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchUsers();
+  }, [initialPage, initialPageSize]);
+
+  // Handle page change
+  const handlePageChange = (newPage: number) => {
+    setPage(newPage);
+
+    // Build query string with new page
+    const params = new URLSearchParams(searchParams.toString());
+    params.set('page', newPage.toString());
+
+    // Update URL with new page
+    router.push(`/admin/users?${params.toString()}`);
+  };
 
   return (
     <div>
       <div className="flex justify-between items-center">
-        <h1 className="text-2xl font-semibold text-gray-900">Users</h1>
+        <h1 className="text-2xl font-semibold text-gray-900 dark:text-gray-100">Users</h1>
         <Link
           href="/admin/users/new"
           className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
@@ -25,94 +106,126 @@ export default async function AdminUsers() {
         </Link>
       </div>
 
-      <div className="mt-8 flex flex-col">
-        <div className="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
-          <div className="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
-            <div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
-              <table className="min-w-full divide-y divide-gray-300">
-                <thead className="bg-gray-50">
-                  <tr>
-                    <th
-                      scope="col"
-                      className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6"
-                    >
-                      Username
-                    </th>
-                    <th
-                      scope="col"
-                      className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
-                    >
-                      Avatar
-                    </th>
-                    <th
-                      scope="col"
-                      className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
-                    >
-                      Created
-                    </th>
-                    <th
-                      scope="col"
-                      className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
-                    >
-                      Modified
-                    </th>
-                    <th scope="col" className="relative py-3.5 pl-3 pr-4 sm:pr-6">
-                      <span className="sr-only">Actions</span>
-                    </th>
-                  </tr>
-                </thead>
-                <tbody className="divide-y divide-gray-200 bg-white">
-                  {users.length > 0 ? (
-                    users.map((user) => (
-                      <tr key={user.id}>
-                        <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
-                          {user.username}
-                        </td>
-                        <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
-                          {user.avatar ? (
-                            <Image
-                              src={user.avatar}
-                              alt={user.username}
-                              width={40}
-                              height={40}
-                              className="rounded-full"
-                            />
-                          ) : (
-                            <div className="h-10 w-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-500">
-                              {user.username.charAt(0).toUpperCase()}
-                            </div>
-                          )}
-                        </td>
-                        <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
-                          {new Date(user.createdAt).toLocaleDateString()}
-                        </td>
-                        <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
-                          {new Date(user.modifiedAt).toLocaleDateString()}
-                        </td>
-                        <td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
-                          <Link
-                            href={`/admin/users/edit/${user.id}`}
-                            className="text-indigo-600 hover:text-indigo-900 mr-4"
-                          >
-                            Edit
-                          </Link>
-                          <DeleteButton userId={user.id} username={user.username} />
-                        </td>
-                      </tr>
-                    ))
-                  ) : (
-                    <tr>
-                      <td colSpan={5} className="py-4 pl-4 pr-3 text-sm text-gray-500 text-center">
-                        No users found. Create your first user!
-                      </td>
-                    </tr>
-                  )}
-                </tbody>
-              </table>
+      {/* Error Message */}
+      {error && (
+        <div className="bg-red-50 border-l-4 border-red-400 p-4 my-4 dark:bg-red-900/20 dark:border-red-500">
+          <div className="flex">
+            <div className="flex-shrink-0">
+              <svg className="h-5 w-5 text-red-400 dark:text-red-300" viewBox="0 0 20 20" fill="currentColor">
+                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
+              </svg>
+            </div>
+            <div className="ml-3">
+              <p className="text-sm text-red-700 dark:text-red-300">{error}</p>
             </div>
           </div>
         </div>
-      </div>
+      )}
+
+      {/* Loading State */}
+      {isLoading ? (
+        <div className="text-center py-8">
+          <p className="text-gray-500 dark:text-gray-400">Loading users...</p>
+        </div>
+      ) : (
+        <div className="mt-8 flex flex-col">
+          <div className="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
+            <div className="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
+              <div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
+                <table className="min-w-full divide-y divide-gray-300 dark:divide-gray-700">
+                  <thead className="bg-gray-50 dark:bg-gray-700">
+                    <tr>
+                      <th
+                        scope="col"
+                        className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 dark:text-gray-200 sm:pl-6"
+                      >
+                        Username
+                      </th>
+                      <th
+                        scope="col"
+                        className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-200"
+                      >
+                        Avatar
+                      </th>
+                      <th
+                        scope="col"
+                        className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-200"
+                      >
+                        Created
+                      </th>
+                      <th
+                        scope="col"
+                        className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-200"
+                      >
+                        Modified
+                      </th>
+                      <th scope="col" className="relative py-3.5 pl-3 pr-4 sm:pr-6">
+                        <span className="sr-only">Actions</span>
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-gray-200 bg-white dark:bg-gray-800 dark:divide-gray-700">
+                    {users.length > 0 ? (
+                      users.map((user) => (
+                        <tr key={user.id}>
+                          <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 dark:text-gray-200 sm:pl-6">
+                            {user.username}
+                          </td>
+                          <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
+                            {user.avatar ? (
+                              <Image
+                                src={user.avatar}
+                                alt={user.username}
+                                width={40}
+                                height={40}
+                                className="rounded-full"
+                              />
+                            ) : (
+                              <div className="h-10 w-10 rounded-full bg-gray-200 dark:bg-gray-600 flex items-center justify-center text-gray-500 dark:text-gray-300">
+                                {user.username.charAt(0).toUpperCase()}
+                              </div>
+                            )}
+                          </td>
+                          <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
+                            {new Date(user.createdAt).toLocaleDateString()}
+                          </td>
+                          <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
+                            {new Date(user.modifiedAt).toLocaleDateString()}
+                          </td>
+                          <td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
+                            <Link
+                              href={`/admin/users/edit/${user.id}`}
+                              className="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300 mr-4"
+                            >
+                              Edit
+                            </Link>
+                            <DeleteButton userId={user.id} username={user.username} />
+                          </td>
+                        </tr>
+                      ))
+                    ) : (
+                      <tr>
+                        <td colSpan={5} className="py-4 pl-4 pr-3 text-sm text-gray-500 dark:text-gray-400 text-center">
+                          No users found. Create your first user!
+                        </td>
+                      </tr>
+                    )}
+                  </tbody>
+                </table>
+
+                {/* Pagination */}
+                <Pagination
+                  currentPage={pagination.page}
+                  totalPages={pagination.totalPages}
+                  totalItems={pagination.totalCount}
+                  pageSize={pagination.pageSize}
+                  onPageChange={handlePageChange}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }

src/app/api/contact-records/route.ts

@@ -7,6 +7,7 @@ export async function GET(request: NextRequest) {
         const dataSource = await getDataSource();
         const contactRecordRepository = dataSource.getRepository(ContactRecord);
 
+
         // Get query parameters
         const url = new URL(request.url);
         const customerId = url.searchParams.get('customerId');
@@ -14,49 +15,63 @@ export async function GET(request: NextRequest) {
         const dateFrom = url.searchParams.get('dateFrom');
         const dateTo = url.searchParams.get('dateTo');
 
+        // Pagination parameters
+        const page = parseInt(url.searchParams.get('page') || '1');
+        const pageSize = parseInt(url.searchParams.get('pageSize') || '10');
+        const skip = (page - 1) * pageSize;
+
         // Build query
-        const queryOptions: any = {
-            order: { createdAt: 'DESC' },
-            relations: ['customer']
-        };
+        let queryBuilder = contactRecordRepository.createQueryBuilder('contactRecord')
+            .leftJoinAndSelect('contactRecord.customer', 'customer')
+            .orderBy('contactRecord.createdAt', 'DESC');
 
-        // Build where clause
-        let whereClause: any = {};
-
-        // Filter by customer if customerId is provided
+        // Apply filters
         if (customerId) {
-            whereClause.customerId = customerId;
+            queryBuilder = queryBuilder.andWhere('contactRecord.customerId = :customerId', { customerId });
         }
 
-        // Filter by contact type if provided
         if (contactType) {
-            whereClause.contactType = contactType;
+            queryBuilder = queryBuilder.andWhere('contactRecord.contactType = :contactType', { contactType });
         }
 
-        // Filter by date range if provided
-        if (dateFrom || dateTo) {
-            whereClause.createdAt = {};
+        if (dateFrom) {
+            queryBuilder = queryBuilder.andWhere('contactRecord.createdAt >= :dateFrom', {
+                dateFrom: new Date(dateFrom)
+            });
+        }
 
-            if (dateFrom) {
-                whereClause.createdAt.gte = new Date(dateFrom);
+        if (dateTo) {
+            // Set the date to the end of the day for inclusive filtering
+            const endDate = new Date(dateTo);
+            endDate.setHours(23, 59, 59, 999);
+            queryBuilder = queryBuilder.andWhere('contactRecord.createdAt <= :dateTo', {
+                dateTo: endDate
+            });
+        }
+
+        // Get total count for pagination
+        const totalCount = await queryBuilder.getCount();
+
+        // Apply pagination
+        queryBuilder = queryBuilder
+            .skip(skip)
+            .take(pageSize);
+
+        // Execute query
+        const contactRecords = await queryBuilder.getMany();
+
+        // Calculate total pages
+        const totalPages = Math.ceil(totalCount / pageSize);
+
+        return NextResponse.json({
+            data: contactRecords,
+            pagination: {
+                page,
+                pageSize,
+                totalCount,
+                totalPages
             }
-
-            if (dateTo) {
-                // Set the date to the end of the day for inclusive filtering
-                const endDate = new Date(dateTo);
-                endDate.setHours(23, 59, 59, 999);
-                whereClause.createdAt.lte = endDate;
-            }
-        }
-
-        // Add where clause to query options if not empty
-        if (Object.keys(whereClause).length > 0) {
-            queryOptions.where = whereClause;
-        }
-
-        const contactRecords = await contactRecordRepository.find(queryOptions);
-
-        return NextResponse.json(contactRecords);
+        });
     } catch (error) {
         console.error('Error fetching contact records:', error);
         return NextResponse.json(

src/app/api/customers/route.ts

@@ -7,11 +7,63 @@ export async function GET(request: NextRequest) {
         const dataSource = await getDataSource();
         const customerRepository = dataSource.getRepository(Customer);
 
-        const customers = await customerRepository.find({
-            order: { createdAt: 'DESC' }
-        });
+        // Get query parameters
+        const url = new URL(request.url);
 
-        return NextResponse.json(customers);
+        // Pagination parameters
+        const page = parseInt(url.searchParams.get('page') || '1');
+        const pageSize = parseInt(url.searchParams.get('pageSize') || '10');
+        const skip = (page - 1) * pageSize;
+
+        // Get filter parameters
+        const nameFilter = url.searchParams.get('name');
+        const emailFilter = url.searchParams.get('email');
+        const urlFilter = url.searchParams.get('url');
+        const hasEmailFilter = url.searchParams.get('hasEmail');
+
+        // Build query
+        let queryBuilder = customerRepository.createQueryBuilder('customer');
+
+        // Apply filters
+        if (nameFilter) {
+            queryBuilder = queryBuilder.andWhere('LOWER(customer.name) LIKE LOWER(:name)', { name: `%${nameFilter}%` });
+        }
+        if (emailFilter) {
+            queryBuilder = queryBuilder.andWhere('LOWER(customer.email) LIKE LOWER(:email)', { email: `%${emailFilter}%` });
+        }
+        if (urlFilter) {
+            queryBuilder = queryBuilder.andWhere('LOWER(customer.url) LIKE LOWER(:url)', { url: `%${urlFilter}%` });
+        }
+        if (hasEmailFilter === 'true') {
+            queryBuilder = queryBuilder.andWhere('customer.email IS NOT NULL AND customer.email != :emptyString', { emptyString: '' });
+        }
+
+        // Add ordering
+        queryBuilder = queryBuilder.orderBy('customer.createdAt', 'DESC');
+
+        // Get total count for pagination
+        const totalCount = await queryBuilder.getCount();
+
+        // Apply pagination
+        queryBuilder = queryBuilder
+            .skip(skip)
+            .take(pageSize);
+
+        // Execute query
+        const customers = await queryBuilder.getMany();
+
+        // Calculate total pages
+        const totalPages = Math.ceil(totalCount / pageSize);
+
+        return NextResponse.json({
+            data: customers,
+            pagination: {
+                page,
+                pageSize,
+                totalCount,
+                totalPages
+            }
+        });
     } catch (error) {
         console.error('Error fetching customers:', error);
         return NextResponse.json(

src/app/api/email-templates/route.ts

@@ -7,11 +7,41 @@ export async function GET(request: NextRequest) {
         const dataSource = await getDataSource();
         const emailTemplateRepository = dataSource.getRepository(EmailTemplate);
 
-        const emailTemplates = await emailTemplateRepository.find({
-            order: { createdAt: 'DESC' }
-        });
+        // Get query parameters
+        const url = new URL(request.url);
 
-        return NextResponse.json(emailTemplates);
+        // Pagination parameters
+        const page = parseInt(url.searchParams.get('page') || '1');
+        const pageSize = parseInt(url.searchParams.get('pageSize') || '10');
+        const skip = (page - 1) * pageSize;
+
+        // Build query
+        let queryBuilder = emailTemplateRepository.createQueryBuilder('emailTemplate')
+            .orderBy('emailTemplate.createdAt', 'DESC');
+
+        // Get total count for pagination
+        const totalCount = await queryBuilder.getCount();
+
+        // Apply pagination
+        queryBuilder = queryBuilder
+            .skip(skip)
+            .take(pageSize);
+
+        // Execute query
+        const emailTemplates = await queryBuilder.getMany();
+
+        // Calculate total pages
+        const totalPages = Math.ceil(totalCount / pageSize);
+
+        return NextResponse.json({
+            data: emailTemplates,
+            pagination: {
+                page,
+                pageSize,
+                totalCount,
+                totalPages
+            }
+        });
     } catch (error) {
         console.error('Error fetching email templates:', error);
         return NextResponse.json(

src/app/api/posts/route.ts

@@ -11,8 +11,13 @@ export async function GET(request: NextRequest) {
         const url = new URL(request.url);
         const parentId = url.searchParams.get('parentId');
 
+        // Pagination parameters
+        const page = parseInt(url.searchParams.get('page') || '1');
+        const pageSize = parseInt(url.searchParams.get('pageSize') || '10');
+        const skip = (page - 1) * pageSize;
+
         // Build query
-        let query = postRepository.createQueryBuilder('post')
+        let queryBuilder = postRepository.createQueryBuilder('post')
             .leftJoinAndSelect('post.user', 'user')
             .leftJoinAndSelect('post.parent', 'parent')
             .orderBy('post.createdAt', 'DESC');
@@ -21,16 +26,36 @@ export async function GET(request: NextRequest) {
         if (parentId) {
             if (parentId === 'null') {
                 // Get root posts (no parent)
-                query = query.where('post.parentId IS NULL');
+                queryBuilder = queryBuilder.where('post.parentId IS NULL');
             } else {
                 // Get children of specific parent
-                query = query.where('post.parentId = :parentId', { parentId });
+                queryBuilder = queryBuilder.where('post.parentId = :parentId', { parentId });
             }
         }
 
-        const posts = await query.getMany();
+        // Get total count for pagination
+        const totalCount = await queryBuilder.getCount();
 
-        return NextResponse.json(posts);
+        // Apply pagination
+        queryBuilder = queryBuilder
+            .skip(skip)
+            .take(pageSize);
+
+        // Execute query
+        const posts = await queryBuilder.getMany();
+
+        // Calculate total pages
+        const totalPages = Math.ceil(totalCount / pageSize);
+
+        return NextResponse.json({
+            data: posts,
+            pagination: {
+                page,
+                pageSize,
+                totalCount,
+                totalPages
+            }
+        });
     } catch (error) {
         console.error('Error fetching posts:', error);
         return NextResponse.json(

src/app/api/users/route.ts

@@ -9,12 +9,42 @@ export async function GET(request: NextRequest) {
     const dataSource = await getDataSource();
     const userRepository = dataSource.getRepository(User);
 
-    const users = await userRepository.find({
-      select: ['id', 'username', 'avatar', 'createdAt', 'modifiedAt'],
-      order: { createdAt: 'DESC' }
-    });
+    // Get query parameters
+    const url = new URL(request.url);
 
-    return NextResponse.json(users);
+    // Pagination parameters
+    const page = parseInt(url.searchParams.get('page') || '1');
+    const pageSize = parseInt(url.searchParams.get('pageSize') || '10');
+    const skip = (page - 1) * pageSize;
+
+    // Build query
+    let queryBuilder = userRepository.createQueryBuilder('user')
+      .select(['user.id', 'user.username', 'user.avatar', 'user.createdAt', 'user.modifiedAt'])
+      .orderBy('user.createdAt', 'DESC');
+
+    // Get total count for pagination
+    const totalCount = await queryBuilder.getCount();
+
+    // Apply pagination
+    queryBuilder = queryBuilder
+      .skip(skip)
+      .take(pageSize);
+
+    // Execute query
+    const users = await queryBuilder.getMany();
+
+    // Calculate total pages
+    const totalPages = Math.ceil(totalCount / pageSize);
+
+    return NextResponse.json({
+      data: users,
+      pagination: {
+        page,
+        pageSize,
+        totalCount,
+        totalPages
+      }
+    });
   } catch (error) {
     console.error('Error fetching users:', error);
     return NextResponse.json(

src/lib/components/Pagination/index.tsx

@@ -0,0 +1,143 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+
+interface PaginationProps {
+    currentPage: number;
+    totalPages: number;
+    totalItems: number;
+    pageSize: number;
+    onPageChange?: (page: number) => void;
+}
+
+export default function Pagination({
+    currentPage,
+    totalPages,
+    totalItems,
+    pageSize,
+    onPageChange
+}: PaginationProps) {
+    const router = useRouter();
+    const searchParams = useSearchParams();
+
+    // Calculate the range of items being displayed
+    const startItem = (currentPage - 1) * pageSize + 1;
+    const endItem = Math.min(currentPage * pageSize, totalItems);
+
+    // Generate page numbers to display
+    const getPageNumbers = () => {
+        const pages = [];
+        const maxPagesToShow = 5; // Show at most 5 page numbers
+
+        let startPage = Math.max(1, currentPage - Math.floor(maxPagesToShow / 2));
+        let endPage = startPage + maxPagesToShow - 1;
+
+        if (endPage > totalPages) {
+            endPage = totalPages;
+            startPage = Math.max(1, endPage - maxPagesToShow + 1);
+        }
+
+        for (let i = startPage; i <= endPage; i++) {
+            pages.push(i);
+        }
+
+        return pages;
+    };
+
+    // Handle page change
+    const handlePageChange = (page: number) => {
+        if (page < 1 || page > totalPages) return;
+
+        if (onPageChange) {
+            onPageChange(page);
+        } else {
+            // Update URL with new page parameter
+            const params = new URLSearchParams(searchParams.toString());
+            params.set('page', page.toString());
+            router.push(`?${params.toString()}`);
+        }
+    };
+
+    if (totalPages <= 1) return null;
+
+    return (
+        <div className="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6 dark:bg-gray-800 dark:border-gray-700">
+            <div className="flex flex-1 justify-between sm:hidden">
+                <button
+                    onClick={() => handlePageChange(currentPage - 1)}
+                    disabled={currentPage === 1}
+                    className={`relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 ${currentPage === 1
+                            ? 'opacity-50 cursor-not-allowed'
+                            : 'hover:bg-gray-50 dark:hover:bg-gray-600'
+                        }`}
+                >
+                    Previous
+                </button>
+                <button
+                    onClick={() => handlePageChange(currentPage + 1)}
+                    disabled={currentPage === totalPages}
+                    className={`relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 ${currentPage === totalPages
+                            ? 'opacity-50 cursor-not-allowed'
+                            : 'hover:bg-gray-50 dark:hover:bg-gray-600'
+                        }`}
+                >
+                    Next
+                </button>
+            </div>
+            <div className="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
+                <div>
+                    <p className="text-sm text-gray-700 dark:text-gray-300">
+                        Showing <span className="font-medium">{startItem}</span> to{' '}
+                        <span className="font-medium">{endItem}</span> of{' '}
+                        <span className="font-medium">{totalItems}</span> results
+                    </p>
+                </div>
+                <div>
+                    <nav className="isolate inline-flex -space-x-px rounded-md shadow-sm" aria-label="Pagination">
+                        <button
+                            onClick={() => handlePageChange(currentPage - 1)}
+                            disabled={currentPage === 1}
+                            className={`relative inline-flex items-center rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 dark:ring-gray-600 ${currentPage === 1
+                                    ? 'opacity-50 cursor-not-allowed'
+                                    : 'hover:bg-gray-50 dark:hover:bg-gray-700 focus:z-20 focus:outline-offset-0'
+                                }`}
+                        >
+                            <span className="sr-only">Previous</span>
+                            <svg className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                                <path fillRule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clipRule="evenodd" />
+                            </svg>
+                        </button>
+
+                        {getPageNumbers().map((page) => (
+                            <button
+                                key={page}
+                                onClick={() => handlePageChange(page)}
+                                aria-current={page === currentPage ? 'page' : undefined}
+                                className={`relative inline-flex items-center px-4 py-2 text-sm font-semibold ${page === currentPage
+                                        ? 'z-10 bg-indigo-600 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'
+                                        : 'text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0 dark:text-gray-200 dark:ring-gray-600 dark:hover:bg-gray-700'
+                                    }`}
+                            >
+                                {page}
+                            </button>
+                        ))}
+
+                        <button
+                            onClick={() => handlePageChange(currentPage + 1)}
+                            disabled={currentPage === totalPages}
+                            className={`relative inline-flex items-center rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 dark:ring-gray-600 ${currentPage === totalPages
+                                    ? 'opacity-50 cursor-not-allowed'
+                                    : 'hover:bg-gray-50 dark:hover:bg-gray-700 focus:z-20 focus:outline-offset-0'
+                                }`}
+                        >
+                            <span className="sr-only">Next</span>
+                            <svg className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                                <path fillRule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clipRule="evenodd" />
+                            </svg>
+                        </button>
+                    </nav>
+                </div>
+            </div>
+        </div>
+    );
+}

src/scripts/import-customers.ts

@@ -0,0 +1,108 @@
+import 'reflect-metadata';
+import fs from 'fs';
+import path from 'path';
+import { parse } from 'csv-parse/sync';
+import { getDataSource } from '../lib/database';
+import { Customer } from '../lib/database/entities/Customer';
+
+interface CustomerCSVRow {
+    City: string;
+    Name: string;
+    'Website URL': string;
+    Email: string;
+}
+
+async function importCustomers(csvFilePath: string): Promise<void> {
+    try {
+        // Initialize database connection
+        const dataSource = await getDataSource();
+        const customerRepository = dataSource.getRepository(Customer);
+
+        // Read and parse CSV file
+        const fileContent = fs.readFileSync(csvFilePath, 'utf-8');
+        const records = parse(fileContent, {
+            columns: true,
+            skip_empty_lines: true,
+            trim: true,
+        }) as CustomerCSVRow[];
+
+        console.log(`Found ${records.length} records in CSV file`);
+
+        // Track processed emails to skip duplicates
+        const processedEmails = new Set<string>();
+        // Track existing names to ensure uniqueness
+        const existingNames = new Set<string>(
+            (await customerRepository.find()).map(customer => customer.name)
+        );
+
+        let importedCount = 0;
+        let skippedDuplicateEmail = 0;
+        let skippedDuplicateName = 0;
+
+        for (const record of records) {
+            const email = record.Email === 'null' ? '' : record.Email;
+            const name = record.Name;
+
+            // Skip if email is already processed (not empty and already seen)
+            if (email && processedEmails.has(email)) {
+                console.log(`Skipping record with duplicate email: ${email}`);
+                skippedDuplicateEmail++;
+                continue;
+            }
+
+            // Skip if name already exists in database
+            if (existingNames.has(name)) {
+                console.log(`Skipping record with duplicate name: ${name}`);
+                skippedDuplicateName++;
+                continue;
+            }
+
+            // Add to processed sets
+            if (email) {
+                processedEmails.add(email);
+            }
+            existingNames.add(name);
+
+            // Create new customer
+            const customer = new Customer();
+            customer.name = name;
+            customer.url = record['Website URL'] === 'null' ? '' : record['Website URL'];
+            customer.email = email;
+
+            // Save to database
+            await customerRepository.save(customer);
+            importedCount++;
+
+            console.log(`Imported customer: ${name}`);
+        }
+
+        console.log('Import summary:');
+        console.log(`- Total records in CSV: ${records.length}`);
+        console.log(`- Successfully imported: ${importedCount}`);
+        console.log(`- Skipped (duplicate email): ${skippedDuplicateEmail}`);
+        console.log(`- Skipped (duplicate name): ${skippedDuplicateName}`);
+
+    } catch (error) {
+        console.error('Error importing customers:', error);
+        throw error;
+    }
+}
+
+// Check if file path is provided as command line argument
+const csvFilePath = process.argv[2];
+if (!csvFilePath) {
+    console.error('Please provide the path to the CSV file as a command line argument');
+    console.error('Example: npm run import-customers -- ./data/customers.csv');
+    process.exit(1);
+}
+
+// Run the import function
+importCustomers(csvFilePath)
+    .then(() => {
+        console.log('Import completed successfully');
+        process.exit(0);
+    })
+    .catch((error) => {
+        console.error('Import failed:', error);
+        process.exit(1);
+    });