import { useState } from 'react'
import { Head, router } from '@inertiajs/react'
import { PageTemplate } from '@/components/page-template'
import { Button } from '@/components/ui/button'
import { Pagination } from '@/components/ui/pagination'
import { SearchAndFilterBar } from '@/components/ui/search-and-filter-bar'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
import { Search, Eye } from 'lucide-react'
import { useTranslation } from 'react-i18next'
interface EmailTemplate {
id: number
name: string
from: string
created_at: string
email_template_langs: Array<{
id: number
lang: string
subject: string
}>
}
interface Props {
templates: {
data: EmailTemplate[]
from: number
to: number
total: number
links: Array<{
url: string | null
label: string
active: boolean
}>
}
filters: {
search?: string
sort_field?: string
sort_direction?: string
per_page?: number
}
}
export default function EmailTemplatesIndex({ templates, filters: pageFilters = {} }: Props) {
const { t } = useTranslation()
const [searchTerm, setSearchTerm] = useState(pageFilters.search || '')
const handleAction = (action: string, item: EmailTemplate) => {
if (action === 'view') {
router.get(route('email-templates.show', item.id))
}
}
const handleSearch = (e: React.FormEvent) => {
e.preventDefault()
applyFilters()
}
const applyFilters = () => {
router.get(route('email-templates.index'), {
page: 1,
search: searchTerm || undefined,
per_page: pageFilters.per_page
}, { preserveState: true, preserveScroll: true })
}
const handleSort = (field: string) => {
const direction = pageFilters.sort_field === field && pageFilters.sort_direction === 'asc' ? 'desc' : 'asc'
router.get(route('email-templates.index'), {
sort_field: field,
sort_direction: direction,
page: 1,
search: searchTerm || undefined,
per_page: pageFilters.per_page
}, { preserveState: true, preserveScroll: true })
}
const breadcrumbs = [
{ title: t('Dashboard'), href: route('dashboard') },
{ title: t('Email Templates') }
]
const columns = [
{
key: 'name',
label: t('Name'),
sortable: true
}
]
return (
{/* Search section */}
{}}
hasActiveFilters={() => false}
activeFilterCount={() => 0}
onResetFilters={() => {}}
currentPerPage={pageFilters.per_page?.toString() || "10"}
onPerPageChange={(value) => {
router.get(route('email-templates.index'), {
page: 1,
per_page: parseInt(value),
search: searchTerm || undefined
}, { preserveState: true, preserveScroll: true })
}}
/>
{/* Content section */}
{columns.map((column) => (
| column.sortable && handleSort(column.key)}
>
{column.label}
{column.sortable && (
{pageFilters.sort_field === column.key ? (
pageFilters.sort_direction === 'asc' ? '↑' : '↓'
) : ''}
)}
|
))}
{t("Actions")}
|
{templates?.data?.map((template: EmailTemplate) => (
|
{template.name}
|
{t('View')}
|
))}
{(!templates?.data || templates.data.length === 0) && (
|
{t("No email templates found")}
|
)}
{/* Pagination section */}
router.get(url)}
/>
)
}