fix customer record

doc/prompts/11. EmailTemplate CRUD

@@ -0,0 +1,5 @@
+Please add model EmailTemplate and make CRUD UI in admin console.
+ModelName: EmailTamplate
+id, content, modifiedAt, createdAt
+
+create branch features/emailtemplate first and commit changes in the end

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]);
+    }, [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,103 @@
+'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);
+
+    // 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
+                const params = new URLSearchParams();
+                params.append('page', initialPage.toString());
+                params.append('pageSize', initialPageSize.toString());
+
+                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]);
+
+    // 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>
+                <h1 className="text-2xl font-semibold text-gray-900 dark:text-gray-100">Customers</h1>
                 <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,46 +106,68 @@ export default async function AdminCustomers() {
                 </Link>
             </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">
-                                <thead className="bg-gray-50">
+                                <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 sm:pl-6"
+                                                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"
+                                                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"
+                                                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"
+                                                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"
+                                                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"
+                                                className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-200"
                                             >
                                                 Modified
                                             </th>
@@ -71,58 +176,58 @@ export default async function AdminCustomers() {
                                             </th>
                                         </tr>
                                     </thead>
-                                <tbody className="divide-y divide-gray-200 bg-white">
+                                    <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 sm:pl-6">
+                                                    <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"
+                                                            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">
+                                                    <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"
+                                                            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">
+                                                    <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"
+                                                                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">-</span>
+                                                            <span className="text-gray-400 dark:text-gray-500">-</span>
                                                         )}
                                                     </td>
-                                                <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                                    <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"
+                                                            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">
+                                                    <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">
+                                                    <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 mr-4"
+                                                            className="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300 mr-4"
                                                         >
                                                             Edit
                                                         </Link>
@@ -132,17 +237,27 @@ export default async function AdminCustomers() {
                                             ))
                                         ) : (
                                             <tr>
-                                            <td colSpan={7} className="py-4 pl-4 pr-3 text-sm text-gray-500 text-center">
+                                                <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/DeleteButton.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+
+interface DeleteButtonProps {
+    templateId: string;
+}
+
+export default function DeleteButton({ templateId }: DeleteButtonProps) {
+    const router = useRouter();
+    const [isDeleting, setIsDeleting] = useState(false);
+    const [showConfirm, setShowConfirm] = useState(false);
+
+    const handleDelete = async () => {
+        if (isDeleting) return;
+
+        setIsDeleting(true);
+        try {
+            const response = await fetch(`/api/email-templates/${templateId}`, {
+                method: 'DELETE',
+            });
+
+            if (!response.ok) {
+                throw new Error('Failed to delete email template');
+            }
+
+            // Refresh the page to show updated list
+            router.refresh();
+        } catch (error) {
+            console.error('Error deleting email template:', error);
+            alert('Failed to delete email template');
+        } finally {
+            setIsDeleting(false);
+            setShowConfirm(false);
+        }
+    };
+
+    return (
+        <>
+            {showConfirm ? (
+                <span className="inline-flex items-center">
+                    <button
+                        onClick={handleDelete}
+                        className="text-red-600 hover:text-red-900 mr-2"
+                        disabled={isDeleting}
+                    >
+                        {isDeleting ? 'Deleting...' : 'Confirm'}
+                    </button>
+                    <button
+                        onClick={() => setShowConfirm(false)}
+                        className="text-gray-600 hover:text-gray-900"
+                        disabled={isDeleting}
+                    >
+                        Cancel
+                    </button>
+                </span>
+            ) : (
+                <button
+                    onClick={() => setShowConfirm(true)}
+                    className="text-red-600 hover:text-red-900"
+                >
+                    Delete
+                </button>
+            )}
+        </>
+    );
+}

src/app/(admin)/admin/email-templates/components/EditEmailTemplate.tsx

@@ -0,0 +1,188 @@
+'use client';
+
+import { useState, useEffect, FormEvent, ChangeEvent } from 'react';
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+
+interface EmailTemplate {
+    id: string;
+    title: string;
+    content: string;
+    createdAt: string;
+    modifiedAt: string;
+}
+
+interface EditEmailTemplateProps {
+    id?: string; // Optional for new template
+}
+
+export default function EditEmailTemplate({ id }: EditEmailTemplateProps) {
+    const router = useRouter();
+    const [formData, setFormData] = useState({
+        title: '',
+        content: '',
+    });
+    const [isLoading, setIsLoading] = useState(!!id); // Only loading if editing
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    // Fetch email template data if editing
+    useEffect(() => {
+        const fetchEmailTemplate = async () => {
+            if (!id) {
+                setIsLoading(false);
+                return;
+            }
+
+            try {
+                const response = await fetch(`/api/email-templates/${id}`);
+
+                if (!response.ok) {
+                    throw new Error('Failed to fetch email template');
+                }
+
+                const template: EmailTemplate = await response.json();
+
+                setFormData({
+                    title: template.title,
+                    content: template.content,
+                });
+
+                setIsLoading(false);
+            } catch (err) {
+                setError('Failed to load email template data');
+                setIsLoading(false);
+            }
+        };
+
+        fetchEmailTemplate();
+    }, [id]);
+
+    const handleChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+        const { name, value } = e.target;
+        setFormData((prev) => ({ ...prev, [name]: value }));
+    };
+
+    const handleSubmit = async (e: FormEvent) => {
+        e.preventDefault();
+        setIsSubmitting(true);
+        setError(null);
+
+        try {
+            // Validate form
+            if (!formData.title || !formData.content) {
+                throw new Error('Title and content are required');
+            }
+
+            // Determine if creating or updating
+            const url = id ? `/api/email-templates/${id}` : '/api/email-templates';
+            const method = id ? 'PUT' : 'POST';
+
+            // Submit the form
+            const response = await fetch(url, {
+                method,
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(formData),
+            });
+
+            if (!response.ok) {
+                const data = await response.json();
+                throw new Error(data.error || `Failed to ${id ? 'update' : 'create'} email template`);
+            }
+
+            // Redirect to email templates list on success
+            router.push('/admin/email-templates');
+            router.refresh();
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'An error occurred');
+            setIsSubmitting(false);
+        }
+    };
+
+    if (isLoading) {
+        return <div className="text-center py-10">Loading...</div>;
+    }
+
+    return (
+        <div>
+            <div className="flex justify-between items-center mb-6">
+                <h1 className="text-2xl font-semibold text-gray-900">
+                    {id ? 'Edit Email Template' : 'Add New Email Template'}
+                </h1>
+                <Link
+                    href="/admin/email-templates"
+                    className="text-indigo-600 hover:text-indigo-900"
+                >
+                    Back to Email Templates
+                </Link>
+            </div>
+
+            {error && (
+                <div className="bg-red-50 border-l-4 border-red-400 p-4 mb-6">
+                    <div className="flex">
+                        <div className="flex-shrink-0">
+                            <svg className="h-5 w-5 text-red-400" 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">{error}</p>
+                        </div>
+                    </div>
+                </div>
+            )}
+
+            <form onSubmit={handleSubmit} className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
+                <div className="mb-4">
+                    <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="title">
+                        Title
+                    </label>
+                    <input
+                        className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+                        id="title"
+                        type="text"
+                        name="title"
+                        value={formData.title}
+                        onChange={handleChange}
+                        placeholder="Email template title"
+                        required
+                    />
+                </div>
+
+                <div className="mb-6">
+                    <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="content">
+                        Content
+                    </label>
+                    <textarea
+                        className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+                        id="content"
+                        name="content"
+                        value={formData.content}
+                        onChange={handleChange}
+                        placeholder="Email template content"
+                        rows={10}
+                        required
+                    />
+                </div>
+
+                <div className="flex items-center justify-between">
+                    <button
+                        className="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline disabled:opacity-50"
+                        type="submit"
+                        disabled={isSubmitting}
+                    >
+                        {isSubmitting ? (id ? 'Updating...' : 'Creating...') : (id ? 'Update Template' : 'Create Template')}
+                    </button>
+                    <Link
+                        href="/admin/email-templates"
+                        className="inline-block align-baseline font-bold text-sm text-indigo-600 hover:text-indigo-800"
+                    >
+                        Cancel
+                    </Link>
+                </div>
+            </form>
+        </div>
+    );
+}

src/app/(admin)/admin/email-templates/detail/[id]/page.tsx

@@ -0,0 +1,102 @@
+import Link from 'next/link';
+import { getDataSource, EmailTemplate } from '@/lib/database';
+
+export default async function EmailTemplateDetailPage(props: { params: Promise<{ id: string }> }) {
+    const { id } = await props.params;
+
+    // Fetch email template from the database
+    const dataSource = await getDataSource();
+    const emailTemplateRepository = dataSource.getRepository(EmailTemplate);
+
+    const emailTemplate = await emailTemplateRepository.findOne({
+        where: { id }
+    });
+
+    if (!emailTemplate) {
+        return (
+            <div>
+                <div className="flex justify-between items-center mb-6">
+                    <h1 className="text-2xl font-semibold text-gray-900">Email Template Not Found</h1>
+                    <Link
+                        href="/admin/email-templates"
+                        className="text-indigo-600 hover:text-indigo-900"
+                    >
+                        Back to Email Templates
+                    </Link>
+                </div>
+                <div className="bg-red-50 border-l-4 border-red-400 p-4">
+                    <div className="flex">
+                        <div className="flex-shrink-0">
+                            <svg className="h-5 w-5 text-red-400" 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">The requested email template could not be found.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div>
+            <div className="flex justify-between items-center mb-6">
+                <h1 className="text-2xl font-semibold text-gray-900">Email Template Details</h1>
+                <div className="flex space-x-4">
+                    <Link
+                        href={`/admin/email-templates/edit/${emailTemplate.id}`}
+                        className="text-indigo-600 hover:text-indigo-900"
+                    >
+                        Edit
+                    </Link>
+                    <Link
+                        href="/admin/email-templates"
+                        className="text-indigo-600 hover:text-indigo-900"
+                    >
+                        Back to Email Templates
+                    </Link>
+                </div>
+            </div>
+
+            <div className="bg-white shadow overflow-hidden sm:rounded-lg">
+                <div className="px-4 py-5 sm:px-6">
+                    <h3 className="text-lg leading-6 font-medium text-gray-900">Template Information</h3>
+                </div>
+                <div className="border-t border-gray-200">
+                    <dl>
+                        <div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                            <dt className="text-sm font-medium text-gray-500">ID</dt>
+                            <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">{emailTemplate.id}</dd>
+                        </div>
+                        <div className="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                            <dt className="text-sm font-medium text-gray-500">Created At</dt>
+                            <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+                                {new Date(emailTemplate.createdAt).toLocaleString()}
+                            </dd>
+                        </div>
+                        <div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                            <dt className="text-sm font-medium text-gray-500">Modified At</dt>
+                            <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+                                {new Date(emailTemplate.modifiedAt).toLocaleString()}
+                            </dd>
+                        </div>
+                        <div className="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                            <dt className="text-sm font-medium text-gray-500">Title</dt>
+                            <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+                                {emailTemplate.title}
+                            </dd>
+                        </div>
+                        <div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                            <dt className="text-sm font-medium text-gray-500">Content</dt>
+                            <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 whitespace-pre-wrap">
+                                {emailTemplate.content}
+                            </dd>
+                        </div>
+                    </dl>
+                </div>
+            </div>
+        </div>
+    );
+}

src/app/(admin)/admin/email-templates/edit/[id]/page.tsx

@@ -0,0 +1,6 @@
+import EditEmailTemplate from '../../components/EditEmailTemplate';
+
+export default async function EditEmailTemplatePage(props: { params: Promise<{ id: string }> }) {
+    const { id } = await props.params;
+    return <EditEmailTemplate id={id} />;
+}

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

@@ -0,0 +1,5 @@
+import EditEmailTemplate from '../components/EditEmailTemplate';
+
+export default function NewEmailTemplatePage() {
+    return <EditEmailTemplate />;
+}

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

@@ -0,0 +1,221 @@
+'use client';
+
+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 EmailTemplate {
+    id: string;
+    title: string;
+    content: string;
+    createdAt: string;
+    modifiedAt: string;
+}
+
+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 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"
+                >
+                    Add New Template
+                </Link>
+            </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 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/layout.tsx

@@ -112,6 +112,12 @@ export default function RootLayout({
                       >
                         Contact Records
                       </Link>
+                      <Link
+                        href="/admin/email-templates"
+                        className="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
+                      >
+                        Email Templates
+                      </Link>
                     </div>
                   </div>
                   <div className="hidden sm:ml-6 sm:flex sm:items-center">

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,34 +111,56 @@ export default async function AdminPosts() {
         </Link>
       </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 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">
-                <thead className="bg-gray-50">
+                <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 sm:pl-6"
+                        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"
+                        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"
+                        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"
+                        className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-200"
                       >
                         Modified
                       </th>
@@ -59,26 +169,26 @@ export default async function AdminPosts() {
                       </th>
                     </tr>
                   </thead>
-                <tbody className="divide-y divide-gray-200 bg-white">
+                  <tbody className="divide-y divide-gray-200 bg-white dark:bg-gray-800 dark:divide-gray-700">
                     {posts.length > 0 ? (
-                    posts.map((post: Post) => (
+                      posts.map((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">
+                          <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">
+                          <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">
+                          <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">
+                          <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 mr-4"
+                              className="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300 mr-4"
                             >
                               Edit
                             </Link>
@@ -88,17 +198,27 @@ export default async function AdminPosts() {
                       ))
                     ) : (
                       <tr>
-                      <td colSpan={5} className="py-4 pl-4 pr-3 text-sm text-gray-500 text-center">
+                        <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,34 +106,56 @@ export default async function AdminUsers() {
         </Link>
       </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 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">
-                <thead className="bg-gray-50">
+                <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 sm:pl-6"
+                        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"
+                        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"
+                        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"
+                        className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-200"
                       >
                         Modified
                       </th>
@@ -61,14 +164,14 @@ export default async function AdminUsers() {
                       </th>
                     </tr>
                   </thead>
-                <tbody className="divide-y divide-gray-200 bg-white">
+                  <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 sm:pl-6">
+                          <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">
+                          <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
                             {user.avatar ? (
                               <Image
                                 src={user.avatar}
@@ -78,21 +181,21 @@ export default async function AdminUsers() {
                                 className="rounded-full"
                               />
                             ) : (
-                            <div className="h-10 w-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-500">
+                              <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">
+                          <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">
+                          <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 mr-4"
+                              className="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300 mr-4"
                             >
                               Edit
                             </Link>
@@ -102,17 +205,27 @@ export default async function AdminUsers() {
                       ))
                     ) : (
                       <tr>
-                      <td colSpan={5} className="py-4 pl-4 pr-3 text-sm text-gray-500 text-center">
+                        <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) {
-                whereClause.createdAt.gte = new Date(dateFrom);
+            queryBuilder = queryBuilder.andWhere('contactRecord.createdAt >= :dateFrom', {
+                dateFrom: 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);
-                whereClause.createdAt.lte = endDate;
-            }
+            queryBuilder = queryBuilder.andWhere('contactRecord.createdAt <= :dateTo', {
+                dateTo: endDate
+            });
         }
 
-        // Add where clause to query options if not empty
-        if (Object.keys(whereClause).length > 0) {
-            queryOptions.where = whereClause;
+        // 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
             }
-
-        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,41 @@ 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;
+
+        // Build query
+        let queryBuilder = customerRepository.createQueryBuilder('customer')
+            .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/[id]/route.ts

@@ -0,0 +1,118 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { getDataSource, EmailTemplate } from '@/lib/database';
+
+// GET /api/email-templates/[id] - Get a specific email template
+export async function GET(
+    request: NextRequest,
+    props: { params: Promise<{ id: string }> }
+) {
+    try {
+        const { id } = await props.params;
+        const dataSource = await getDataSource();
+        const emailTemplateRepository = dataSource.getRepository(EmailTemplate);
+
+        const emailTemplate = await emailTemplateRepository.findOne({
+            where: { id: id }
+        });
+
+        if (!emailTemplate) {
+            return NextResponse.json(
+                { error: 'Email template not found' },
+                { status: 404 }
+            );
+        }
+
+        return NextResponse.json(emailTemplate);
+    } catch (error) {
+        console.error('Error fetching email template:', error);
+        return NextResponse.json(
+            { error: 'Failed to fetch email template' },
+            { status: 500 }
+        );
+    }
+}
+
+// PUT /api/email-templates/[id] - Update an email template
+export async function PUT(
+    request: NextRequest,
+    props: { params: Promise<{ id: string }> }
+) {
+    try {
+        const { id } = await props.params;
+        const dataSource = await getDataSource();
+        const emailTemplateRepository = dataSource.getRepository(EmailTemplate);
+
+        // Find the email template to update
+        const emailTemplate = await emailTemplateRepository.findOne({
+            where: { id: id }
+        });
+
+        if (!emailTemplate) {
+            return NextResponse.json(
+                { error: 'Email template not found' },
+                { status: 404 }
+            );
+        }
+
+        const data = await request.json();
+        const { title, content } = data;
+
+        // Validate required fields
+        if (!title || !content) {
+            return NextResponse.json(
+                { error: 'Title and content are required' },
+                { status: 400 }
+            );
+        }
+
+        // Update email template fields
+        emailTemplate.title = title;
+        emailTemplate.content = content;
+
+        // Save the updated email template
+        const updatedEmailTemplate = await emailTemplateRepository.save(emailTemplate);
+
+        return NextResponse.json(updatedEmailTemplate);
+    } catch (error) {
+        console.error('Error updating email template:', error);
+        return NextResponse.json(
+            { error: 'Failed to update email template' },
+            { status: 500 }
+        );
+    }
+}
+
+// DELETE /api/email-templates/[id] - Delete an email template
+export async function DELETE(
+    request: NextRequest,
+    props: { params: Promise<{ id: string }> }
+) {
+    try {
+        const { id } = await props.params;
+        const dataSource = await getDataSource();
+        const emailTemplateRepository = dataSource.getRepository(EmailTemplate);
+
+        // Find the email template to delete
+        const emailTemplate = await emailTemplateRepository.findOne({
+            where: { id: id }
+        });
+
+        if (!emailTemplate) {
+            return NextResponse.json(
+                { error: 'Email template not found' },
+                { status: 404 }
+            );
+        }
+
+        // Delete the email template
+        await emailTemplateRepository.remove(emailTemplate);
+
+        return NextResponse.json({ success: true });
+    } catch (error) {
+        console.error('Error deleting email template:', error);
+        return NextResponse.json(
+            { error: 'Failed to delete email template' },
+            { status: 500 }
+        );
+    }
+}

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

@@ -0,0 +1,86 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { getDataSource, EmailTemplate } from '@/lib/database';
+
+// GET /api/email-templates - Get all email templates
+export async function GET(request: NextRequest) {
+    try {
+        const dataSource = await getDataSource();
+        const emailTemplateRepository = dataSource.getRepository(EmailTemplate);
+
+        // Get query parameters
+        const url = new URL(request.url);
+
+        // 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(
+            { error: 'Failed to fetch email templates' },
+            { status: 500 }
+        );
+    }
+}
+
+// POST /api/email-templates - Create a new email template
+export async function POST(request: NextRequest) {
+    try {
+        const dataSource = await getDataSource();
+        const emailTemplateRepository = dataSource.getRepository(EmailTemplate);
+
+        const data = await request.json();
+        const { title, content } = data;
+
+        // Validate required fields
+        if (!title || !content) {
+            return NextResponse.json(
+                { error: 'Title and content are required' },
+                { status: 400 }
+            );
+        }
+
+        // Create and save the new email template
+        const emailTemplate = new EmailTemplate();
+        emailTemplate.title = title;
+        emailTemplate.content = content;
+
+        const savedEmailTemplate = await emailTemplateRepository.save(emailTemplate);
+
+        return NextResponse.json(savedEmailTemplate, { status: 201 });
+    } catch (error) {
+        console.error('Error creating email template:', error);
+        return NextResponse.json(
+            { error: 'Failed to create email template' },
+            { status: 500 }
+        );
+    }
+}

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/lib/database/config.ts

@@ -3,13 +3,14 @@ import { User } from './entities/User';
 import { Post } from './entities/Post';
 import { Customer } from './entities/Customer';
 import { ContactRecord } from './entities/ContactRecord';
+import { EmailTemplate } from './entities/EmailTemplate';
 import path from 'path';
 
 // Default configuration for SQLite (development/testing)
 const sqliteConfig: DataSourceOptions = {
   type: 'sqlite',
   database: path.join(process.cwd(), 'data', 'database.sqlite'),
-  entities: [User, Post, Customer, ContactRecord],
+  entities: [User, Post, Customer, ContactRecord, EmailTemplate],
   synchronize: true, // Set to false in production
   logging: process.env.NODE_ENV === 'development',
 };
@@ -22,7 +23,7 @@ const mysqlConfig: DataSourceOptions = {
   username: process.env.DB_USERNAME || 'root',
   password: process.env.DB_PASSWORD || '',
   database: process.env.DB_DATABASE || 'kantancms',
-  entities: [User, Post, Customer, ContactRecord],
+  entities: [User, Post, Customer, ContactRecord, EmailTemplate],
   synchronize: false, // Always false in production
   logging: process.env.NODE_ENV === 'development',
 };
@@ -35,7 +36,7 @@ const postgresConfig: DataSourceOptions = {
   username: process.env.DB_USERNAME || 'postgres',
   password: process.env.DB_PASSWORD || '',
   database: process.env.DB_DATABASE || 'kantancms',
-  entities: [User, Post, Customer, ContactRecord],
+  entities: [User, Post, Customer, ContactRecord, EmailTemplate],
   synchronize: false, // Always false in production
   logging: process.env.NODE_ENV === 'development',
 };

src/lib/database/entities/EmailTemplate.ts

@@ -0,0 +1,19 @@
+import { Entity, PrimaryGeneratedColumn, Column, CreateDateColumn, UpdateDateColumn } from 'typeorm';
+
+@Entity('email_templates')
+export class EmailTemplate {
+    @PrimaryGeneratedColumn('uuid')
+    id: string;
+
+    @Column()
+    title: string;
+
+    @Column('text')
+    content: string;
+
+    @CreateDateColumn()
+    createdAt: Date;
+
+    @UpdateDateColumn()
+    modifiedAt: Date;
+}

src/lib/database/index.ts

@@ -36,3 +36,4 @@ export * from './entities/User';
 export * from './entities/Post';
 export * from './entities/Customer';
 export * from './entities/ContactRecord';
+export * from './entities/EmailTemplate';

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);
+    });