admin/estimation-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

could not find the template to update.... create a beautofull template b

Browse Source
This commit is contained in:
Leon Serfaty G
2025-07-18 03:24:03 +00:00
parent ae7c8c4880
commit dfcccad1d7
3 changed files with 94 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/admin/settings/email-templates/page.tsx
+34 -22
View File
@@ -9,6 +9,7 @@ import { getEmailTemplate, updateEmailTemplate } from '@/lib/actions/email';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { Label } from '@/components/ui/label';
import { Skeleton } from '@/components/ui/skeleton';
type EmailTemplate = {
subject: string;
@@ -16,26 +17,29 @@ type EmailTemplate = {
};
function EmailPreview({ template }: { template: EmailTemplate }) {
const previewBody = template.body.replace(
'[EstimateDetails]',
`<div class="my-6 space-y-4 rounded-lg border bg-background p-4">
<div>
<h3 class="font-semibold">Custom Development Estimate</h3>
<p class="text-2xl font-bold">[Custom Hours]+ hours</p>
</div>
<div>
<h3 class="font-semibold">Ready-Made Tools Estimate</h3>
<p class="text-2xl font-bold">[Ready-Made Hours]+ hours</p>
</div>
</div>`
).replace('[User Name]', 'Valued Customer').replace(/\n/g, '<br />');
const estimateDetailsHtml = `
<div style="margin: 20px 0; border: 1px solid #eaeaea; border-radius: 5px; background-color: #fafafa;">
<div style="padding: 15px; border-bottom: 1px solid #eaeaea;">
<h3 style="margin: 0; font-size: 16px; color: #333;">Custom Development Estimate</h3>
<p style="margin: 5px 0 0; font-size: 24px; font-weight: bold; color: #4A90E2;">[Custom Hours]+ hours</p>
</div>
<div style="padding: 15px;">
<h3 style="margin: 0; font-size: 16px; color: #333;">Ready-Made Tools Estimate</h3>
<p style="margin: 5px 0 0; font-size: 24px; font-weight: bold; color: #4A90E2;">[Ready-Made Hours]+ hours</p>
</div>
</div>`;
const previewBody = template.body
.replace('[EstimateDetails]', estimateDetailsHtml)
.replace('[User Name]', 'Valued Customer');
return (
<div className="w-full rounded-lg border bg-muted p-6">
<div className="font-sans text-sm text-foreground">
<h2 className="text-xl font-bold">{template.subject}</h2>
<div className="mt-4" dangerouslySetInnerHTML={{ __html: previewBody }} />
</div>
<iframe
srcDoc={previewBody}
className="w-full h-[600px] border-none"
title="Email Preview"
/>
</div>
);
}
@@ -56,7 +60,12 @@ export default function EmailTemplatesPage() {
setTemplate(fetchedTemplate);
setOriginalTemplate(fetchedTemplate);
} else {
throw new Error('Could not find email template.');
toast({
variant: 'destructive',
title: 'Template Not Found',
description: 'No email template found in the database. You can create one by saving a new template.',
});
setIsEditing(true); // Default to editing if no template exists
}
} catch (error: any) {
toast({
@@ -117,7 +126,7 @@ export default function EmailTemplatesPage() {
<Button variant="outline" onClick={() => setIsEditing(true)}>Edit Template</Button>
) : (
<div className="flex gap-2">
<Button variant="outline" onClick={handleCancel}>Cancel</Button>
{originalTemplate.subject && <Button variant="outline" onClick={handleCancel}>Cancel</Button>}
<Button onClick={handleSave}>Save Changes</Button>
</div>
)}
@@ -125,7 +134,10 @@ export default function EmailTemplatesPage() {
</CardHeader>
<CardContent>
{isLoading ? (
<p>Loading template...</p>
<div className="space-y-4">
<Skeleton className="h-8 w-1/3" />
<Skeleton className="h-[600px] w-full" />
</div>
) : isEditing ? (
<div className="space-y-4">
<div className="space-y-2">
@@ -142,10 +154,10 @@ export default function EmailTemplatesPage() {
id="body"
value={template.body}
onChange={(e) => setTemplate({ ...template, body: e.target.value })}
className="h-64 font-mono"
className="h-96 font-mono"
/>
<p className="text-xs text-muted-foreground">
Use placeholders like [User Name] and [EstimateDetails]. They will be replaced with actual values.
Use placeholders like [User Name] and [EstimateDetails]. They will be replaced with actual values. HTML is supported.
</p>
</div>
</div>