yashwin/Qassure-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: update FailedEmails layout with headers and enhance table actions using dropdowns

Browse Source
This commit is contained in:
Yashwin 2026-05-18 12:06:32 +05:30
parent 6952a7c6f3
commit 793fa23c1b
5 changed files with 90 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
src/components/shared/FailedEmailsTable.tsx
View File

@ -1,6 +1,6 @@
import React, { useState, useEffect } from 'react';
import { failedEmailsService, type FailedEmail } from '../../services/failed-emails-service';
import { DataTable } from './DataTable';
import { DataTable, type Column } from './DataTable';
import { Modal } from './Modal';
import { Button } from '@/components/ui/button';
import { StatusBadge } from './StatusBadge';
@ -8,6 +8,8 @@ import { Eye, RefreshCw, Trash2, Loader2 } from 'lucide-react';
import { format } from 'date-fns';
import { toast } from 'sonner';
import { Pagination } from './Pagination';
import { ActionDropdown } from './ActionDropdown';
import { PrimaryButton } from './PrimaryButton';
export const FailedEmailsTable: React.FC = () => {
const [emails, setEmails] = useState<FailedEmail[]>([]);
@ -84,7 +86,7 @@ export const FailedEmailsTable: React.FC = () => {
setIsModalVisible(true);
};
const columns = [
const columns: Column<FailedEmail>[] = [
{
label: 'Date',
key: 'created_at',
@ -112,80 +114,81 @@ export const FailedEmailsTable: React.FC = () => {
{
label: 'Actions',
key: 'actions',
align: 'right',
render: (record: FailedEmail) => (
<div className="flex items-center gap-2">
<Button
variant="ghost"
size="icon"
onClick={() => showEmailDetails(record)}
title="View Details"
>
<Eye className="w-4 h-4" />
</Button>
{record.status === 'failed' && (
<Button
variant="outline"
size="icon"
onClick={() => handleResend(record.id)}
title="Resend Email"
disabled={resendingId === record.id}
>
{resendingId === record.id ? (
<Loader2 className="w-4 h-4 animate-spin" />
) : (
<RefreshCw className="w-4 h-4" />
)}
</Button>
)}
<Button
variant="destructive"
size="icon"
onClick={() => handleDelete(record.id)}
title="Delete Email"
>
<Trash2 className="w-4 h-4" />
</Button>
<div className="flex justify-end">
<ActionDropdown
actions={[
{
label: 'View Details',
onClick: () => showEmailDetails(record),
icon: <Eye className="w-3.5 h-3.5 text-gray-500" />
},
...(record.status === 'failed'
? [
{
label: resendingId === record.id ? 'Resending...' : 'Resend Email',
onClick: () => handleResend(record.id),
icon: resendingId === record.id ? (
<Loader2 className="w-3.5 h-3.5 animate-spin text-blue-600" />
) : (
<RefreshCw className="w-3.5 h-3.5 text-gray-500" />
)
}
]
: []),
{
label: 'Delete Email',
onClick: () => handleDelete(record.id),
icon: <Trash2 className="w-3.5 h-3.5 text-red-600" />,
variant: 'danger'
}
]}
/>
</div>
)
}
];
return (
<div className="p-4 sm:p-6 lg:p-8 bg-white min-h-[calc(100vh-64px)] overflow-hidden">
<div className="mb-6 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
<h2 className="text-xl font-bold text-[#0f1724]">Failed Emails Log</h2>
<div className="flex items-center gap-2">
<Button variant="outline" onClick={() => fetchEmails(currentPage)}>
<RefreshCw className="mr-2 w-4 h-4" />
<div className="bg-white border border-[rgba(0,0,0,0.08)] rounded-lg shadow-[0px_4px_24px_0px_rgba(0,0,0,0.02)] overflow-hidden">
{/* Toolbar / Actions Header */}
<div className="border-b border-[rgba(0,0,0,0.08)] px-4 md:px-5 py-3 flex flex-col sm:flex-row justify-end items-center gap-3">
<div className="flex items-center gap-2 w-full sm:w-auto justify-end">
<Button variant="outline" size="sm" onClick={() => fetchEmails(currentPage)}>
<RefreshCw className="mr-2 w-3.5 h-3.5" />
Refresh
</Button>
<Button
<PrimaryButton
size="small"
onClick={handleResendAll}
disabled={isResendingAll || emails.filter(e => e.status === 'failed').length === 0}
>
{isResendingAll ? (
<>
<Loader2 className="mr-2 w-4 h-4 animate-spin" />
<Loader2 className="mr-2 w-3.5 h-3.5 animate-spin" />
Resending...
</>
) : (
'Resend All Failed'
)}
</Button>
</PrimaryButton>
</div>
</div>
<div className="border border-[rgba(0,0,0,0.08)] bg-white rounded-lg shadow-sm">
<DataTable
columns={columns}
data={emails}
keyExtractor={(item) => item.id}
isLoading={loading}
emptyMessage="No failed emails found"
error={error}
/>
{total > limit && (
{/* Table Section */}
<DataTable
columns={columns}
data={emails}
keyExtractor={(item) => item.id}
isLoading={loading}
emptyMessage="No failed emails found"
error={error}
/>
{/* Pagination Footer */}
{total > limit && (
<div className="border-t border-[rgba(0,0,0,0.08)] px-4 md:px-5 py-3">
<Pagination
currentPage={currentPage}
totalPages={Math.ceil(total / limit)}
@ -197,9 +200,10 @@ export const FailedEmailsTable: React.FC = () => {
fetchEmails(1, newLimit);
}}
/>
)}
</div>
</div>
)}
{/* Modal Details */}
<Modal
title="Email Details"
isOpen={isModalVisible}
@ -209,12 +213,12 @@ export const FailedEmailsTable: React.FC = () => {
{selectedEmail && (
<div className="p-5">
<div className="grid grid-cols-1 gap-2 mb-4">
<p><strong className="text-[#0e1b2a]">To:</strong> <span className="text-[#6b7280]">{selectedEmail.to_email}</span></p>
<p><strong className="text-[#0e1b2a]">Subject:</strong> <span className="text-[#6b7280]">{selectedEmail.subject}</span></p>
<p><strong className="text-[#0e1b2a]">Error Message:</strong> <span className="text-[#ef4444]">{selectedEmail.error_message}</span></p>
<p><strong className="text-[#0f1724]">To:</strong> <span className="text-[#6b7280]">{selectedEmail.to_email}</span></p>
<p><strong className="text-[#0f1724]">Subject:</strong> <span className="text-[#6b7280]">{selectedEmail.subject}</span></p>
<p><strong className="text-[#0f1724]">Error Message:</strong> <span className="text-[#ef4444]">{selectedEmail.error_message}</span></p>
</div>
<div className="mt-4">
<strong className="text-[#0e1b2a] mb-2 block">Body:</strong>
<strong className="text-[#0f1724] mb-2 block">Body:</strong>
<div
className="border border-[rgba(0,0,0,0.08)] rounded p-4 mt-2 max-h-[400px] overflow-auto bg-gray-50 text-sm"
dangerouslySetInnerHTML={{ __html: selectedEmail.body }}

8
src/components/shared/NotificationBell.tsx
View File

@ -180,9 +180,9 @@ export const NotificationBell = () => {
</button>
{isOpen && (
<div className="absolute right-0 mt-3 w-[400px] max-w-[90vw] bg-white border border-gray-200 rounded-xl shadow-lg z-[100] flex flex-col overflow-hidden animate-in fade-in slide-in-from-top-2 duration-200">
<div className="absolute right-0 mt-3 w-[320px] sm:w-[380px] md:w-[400px] max-w-[95vw] max-h-[80vh] md:max-h-[60vh] lg:max-h-[500px] bg-white border border-gray-200 rounded-xl shadow-lg z-[100] flex flex-col overflow-hidden animate-in fade-in slide-in-from-top-2 duration-200">
{/* Header */}
<div className="px-4 py-3 border-b border-gray-100 flex items-center justify-between bg-gray-50/50">
<div className="flex-shrink-0 px-4 py-3 border-b border-gray-100 flex items-center justify-between bg-gray-50/50">
<h3 className="text-sm font-semibold text-gray-900">
Notifications
</h3>
@ -206,7 +206,7 @@ export const NotificationBell = () => {
</div>
{/* List */}
<div className="flex-1 overflow-y-auto max-h-[480px]">
<div className="flex-1 overflow-y-auto">
{notifications.length === 0 ? (
<div className="py-12 px-4 flex flex-col items-center justify-center text-center">
<div className="w-12 h-12 bg-gray-50 rounded-full flex items-center justify-center mb-3">
@ -296,7 +296,7 @@ export const NotificationBell = () => {
</div>
{/* Footer */}
<div className="px-4 py-2 bg-gray-50 border-t border-gray-100 flex items-center justify-between">
<div className="flex-shrink-0 px-4 py-2 bg-gray-50 border-t border-gray-100 flex items-center justify-between">
<button
onClick={() => {
const isSuperAdmin = roles.includes("super_admin");

12
src/components/shared/PageHeader.tsx
View File

@ -17,12 +17,12 @@ interface PageHeaderProps {
}
const defaultTabs: TabItem[] = [
{ label: 'Overview', path: '/dashboard' },
{ label: 'Tenants', path: '/tenants' },
// { label: 'Users', path: '/users' },
// { label: 'Roles', path: '/roles' },
{ label: 'Modules', path: '/modules' },
{ label: 'Audit Logs', path: '/audit-logs' },
// { label: 'Overview', path: '/dashboard' },
// { label: 'Tenants', path: '/tenants' },
// // { label: 'Users', path: '/users' },
// // { label: 'Roles', path: '/roles' },
// { label: 'Modules', path: '/modules' },
// { label: 'Audit Logs', path: '/audit-logs' },
];
export const PageHeader = ({

12
src/pages/superadmin/FailedEmails.tsx
View File

@ -3,10 +3,14 @@ import { Layout } from "@/components/layout/Layout";
export default function FailedEmails() {
return (
<Layout currentPage="Failed Emails">
<div className="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
<FailedEmailsTable />
</div>
<Layout
currentPage="Failed Emails"
pageHeader={{
title: "Platform Failed Emails",
description: "Global monitoring of all failed system email dispatches and automatic/manual retry logs across all tenants."
}}
>
<FailedEmailsTable />
</Layout>
);
}

12
src/pages/tenant/FailedEmails.tsx
View File

@ -3,10 +3,14 @@ import { Layout } from "@/components/layout/Layout";
export default function FailedEmails() {
return (
<Layout currentPage="Failed Emails">
<div className="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
<FailedEmailsTable />
</div>
<Layout
currentPage="Failed Emails"
pageHeader={{
title: "Failed Emails Log",
description: "View and resend failed system email dispatches and transaction logs for this tenant."
}}
>
<FailedEmailsTable />
</Layout>
);
}