95 lines
3.9 KiB
TypeScript
95 lines
3.9 KiB
TypeScript
import React from 'react';
|
|
import { useSelector } from 'react-redux';
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
|
|
import { Mail, Edit2, Trash2, Calendar } from 'lucide-react';
|
|
import { RootState } from '@/store';
|
|
import { formatDateTime } from '@/components/ui/utils';
|
|
|
|
interface EmailTemplatesProps {
|
|
onEditTemplate: (template: any) => void;
|
|
onDeleteTemplate: (id: string) => void;
|
|
}
|
|
|
|
export const EmailTemplates: React.FC<EmailTemplatesProps> = ({
|
|
onEditTemplate,
|
|
onDeleteTemplate
|
|
}) => {
|
|
const { emailTemplates } = useSelector((state: RootState) => state.master);
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<div>
|
|
<CardTitle>Email & Letter Templates</CardTitle>
|
|
<CardDescription>
|
|
Templates and trigger codes come from system seed data. Edit wording and layout here; new triggers are not added from this screen.
|
|
</CardDescription>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Template Name</TableHead>
|
|
<TableHead>Subject</TableHead>
|
|
<TableHead>Trigger Code</TableHead>
|
|
<TableHead>Modified Date</TableHead>
|
|
<TableHead className="text-right">Actions</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{emailTemplates.map((template) => (
|
|
<TableRow key={template.id}>
|
|
<TableCell>
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-8 h-8 bg-amber-50 rounded-lg flex items-center justify-center">
|
|
<Mail className="w-4 h-4 text-amber-600" />
|
|
</div>
|
|
<span className="font-medium text-slate-900">{template.name || template.templateCode}</span>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="text-slate-600 max-w-xs truncate">{template.subject}</TableCell>
|
|
<TableCell>
|
|
<Badge variant="outline" className="bg-slate-50 text-[10px] font-mono">
|
|
{template.templateCode || '-'}
|
|
</Badge>
|
|
</TableCell>
|
|
<TableCell className="text-slate-500 text-sm">
|
|
<div className="flex items-center gap-1.5">
|
|
<Calendar className="w-3.5 h-3.5" />
|
|
{template.updatedAt ? formatDateTime(template.updatedAt) : '-'}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="text-right">
|
|
<div className="flex gap-2 justify-end">
|
|
<Button variant="ghost" size="sm" onClick={() => onEditTemplate(template)}>
|
|
<Edit2 className="w-4 h-4" />
|
|
</Button>
|
|
<Button variant="ghost" size="sm" onClick={() => onDeleteTemplate(template.id)} className="text-red-500 hover:text-red-600 hover:bg-red-50">
|
|
<Trash2 className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
{emailTemplates.length === 0 && (
|
|
<TableRow>
|
|
<TableCell colSpan={5} className="text-center py-12">
|
|
<div className="flex flex-col items-center gap-2">
|
|
<Mail className="w-8 h-8 text-slate-200" />
|
|
<p className="text-slate-400 text-sm">No templates configured yet</p>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|
|
|