From fd6436e3894ec524b7fb56c086724f107a4a56f5 Mon Sep 17 00:00:00 2001 From: Yashwin Date: Tue, 19 May 2026 18:28:01 +0530 Subject: [PATCH] refactor: modernize UI components by stripping default container styles and standardizing layout elements across application pages --- src/components/shared/CodeBadge.tsx | 2 +- src/components/shared/DataTable.tsx | 45 +- .../shared/DeleteConfirmationModal.tsx | 6 +- src/components/shared/DepartmentModals.tsx | 138 +- src/components/shared/DesignationModals.tsx | 6 +- src/components/shared/EditRoleModal.tsx | 2 +- src/components/shared/EditUserModal.tsx | 2 +- src/components/shared/FailedEmailsTable.tsx | 202 ++- src/components/shared/FileShareModal.tsx | 2 +- src/components/shared/FileUploadModal.tsx | 6 +- .../shared/FileVersionUploadModal.tsx | 2 +- src/components/shared/FormField.tsx | 2 +- src/components/shared/FormSelect.tsx | 2 +- src/components/shared/FormTagInput.tsx | 2 +- src/components/shared/FormTextArea.tsx | 2 +- src/components/shared/GradientStatCard.tsx | 44 +- src/components/shared/Modal.tsx | 12 +- src/components/shared/NewRoleModal.tsx | 2 +- src/components/shared/NewUserModal.tsx | 2 +- src/components/shared/PageHeader.tsx | 2 +- src/components/shared/PaginatedSelect.tsx | 2 +- src/components/shared/Pagination.tsx | 14 +- src/components/shared/PrimaryButton.tsx | 59 +- src/components/shared/SecondaryButton.tsx | 51 +- src/components/shared/SupplierModal.tsx | 4 +- src/components/shared/SuppliersTable.tsx | 10 +- src/components/shared/ViewAuditLogModal.tsx | 2 +- src/components/shared/ViewRoleModal.tsx | 4 +- src/components/shared/ViewUserModal.tsx | 2 +- .../shared/WorkflowDefinitionModal.tsx | 6 +- .../shared/WorkflowDefinitionViewModal.tsx | 4 +- .../shared/WorkflowDefinitionsTable.tsx | 751 +++++----- src/components/shared/index.ts | 2 +- .../superadmin/ApikeyReissueModal.tsx | 2 +- .../superadmin/DepartmentListView.tsx | 2 +- .../superadmin/DepartmentTreeView.tsx | 2 +- .../superadmin/DepartmentsTable.tsx | 18 +- .../superadmin/DesignationsTable.tsx | 548 +++---- src/components/superadmin/EditModuleModal.tsx | 2 +- src/components/superadmin/NewModuleModal.tsx | 2 +- src/components/superadmin/NewTenantModal.tsx | 2 +- src/components/superadmin/RolesTable.tsx | 36 +- src/components/superadmin/UsersTable.tsx | 1332 +++++++++-------- src/components/superadmin/ViewModuleModal.tsx | 2 +- src/components/superadmin/ViewTenantModal.tsx | 2 +- .../superadmin/WebhookSyncModal.tsx | 2 +- .../tenant/PromptTestCaseResultModal.tsx | 2 +- src/components/tenant/PromptVersionsModal.tsx | 26 +- src/components/tenant/ViewAIProviderModal.tsx | 34 +- .../superadmin/AuditLogResourceTypes.tsx | 76 +- src/pages/superadmin/FailedEmails.tsx | 8 +- src/pages/superadmin/Modules.tsx | 12 +- src/pages/superadmin/NotificationMaster.tsx | 26 +- .../superadmin/NotificationTemplateMaster.tsx | 29 +- src/pages/superadmin/SmtpConfig.tsx | 131 +- src/pages/superadmin/Tenants.tsx | 14 +- src/pages/tenant/AuditLogs.tsx | 4 +- src/pages/tenant/CompletionHistory.tsx | 10 +- src/pages/tenant/CreateDocument.tsx | 923 +++++++----- src/pages/tenant/Dashboard.tsx | 6 +- src/pages/tenant/Departments.tsx | 20 +- src/pages/tenant/Designations.tsx | 31 +- src/pages/tenant/DocumentCategories.tsx | 69 +- src/pages/tenant/Documents.tsx | 267 ++-- src/pages/tenant/FailedEmails.tsx | 8 +- src/pages/tenant/FilesList.tsx | 4 +- src/pages/tenant/Modules.tsx | 10 +- src/pages/tenant/NotificationTemplates.tsx | 10 +- src/pages/tenant/PromptManagement.tsx | 22 +- src/pages/tenant/PromptTestCases.tsx | 67 +- src/pages/tenant/Suppliers.tsx | 4 +- src/pages/tenant/Tasks.tsx | 158 +- src/pages/tenant/TenantAIProviders.tsx | 100 +- src/pages/tenant/Users.tsx | 24 +- src/pages/tenant/ViewDocument.tsx | 4 +- src/pages/tenant/WorkflowDefination.tsx | 37 +- 76 files changed, 2946 insertions(+), 2536 deletions(-) diff --git a/src/components/shared/CodeBadge.tsx b/src/components/shared/CodeBadge.tsx index a23347e..fdd2a73 100644 --- a/src/components/shared/CodeBadge.tsx +++ b/src/components/shared/CodeBadge.tsx @@ -9,7 +9,7 @@ export default function CodeBadge({ label, className }: CodeBadgeProps) { return ( diff --git a/src/components/shared/DataTable.tsx b/src/components/shared/DataTable.tsx index d00c6e9..8d16675 100644 --- a/src/components/shared/DataTable.tsx +++ b/src/components/shared/DataTable.tsx @@ -8,6 +8,8 @@ export interface Column { render?: (item: T) => ReactNode; align?: "left" | "right" | "center"; mobileLabel?: string; + width?: string; + className?: string; } interface DataTableProps { @@ -76,9 +78,10 @@ export const DataTable = ({ {/* Desktop Table Empty State */}
- +
- + {/* */} + {canExpand && showExpandColumn && ( @@ -129,12 +137,14 @@ export const DataTable = ({ {/* Desktop Table */}
-
({ ? "text-center" : "text-left"; return ( + // {column.label}
+
- + {/* */} + {canExpand && showExpandColumn && ( @@ -163,11 +178,14 @@ export const DataTable = ({ return ( onRowClick(item) : undefined} > {canExpand && showExpandColumn && ( - {canExpand && expanded && ( - +
)} @@ -146,9 +156,14 @@ export const DataTable = ({ ? "text-center" : "text-left"; return ( + // {column.label}
+ {column.render ? column.render(item) @@ -203,7 +226,7 @@ export const DataTable = ({ })}
{renderExpandedRow(item)} diff --git a/src/components/shared/DeleteConfirmationModal.tsx b/src/components/shared/DeleteConfirmationModal.tsx index 1a72e61..a44528f 100644 --- a/src/components/shared/DeleteConfirmationModal.tsx +++ b/src/components/shared/DeleteConfirmationModal.tsx @@ -73,7 +73,7 @@ export const DeleteConfirmationModal = ({ className="bg-white rounded-xl shadow-[0px_20px_25px_-5px_rgba(0,0,0,0.1),0px_10px_10px_-5px_rgba(0,0,0,0.04)] w-full max-w-[400px] z-[301]" > {/* Modal Header */} -
+
@@ -94,7 +94,7 @@ export const DeleteConfirmationModal = ({
{/* Modal Body */} -
+

{message} {itemName && ( @@ -106,7 +106,7 @@ export const DeleteConfirmationModal = ({

{/* Modal Footer */} -
+
-
- - -
+ {/*
*/} + + + {/*
*/} {/* -
- setValue("parent_id", value || null)} - onLoadOptions={loadDepartments} - error={errors.parent_id?.message} - /> - -
+ {/*
*/} + setValue("parent_id", value || null)} + onLoadOptions={loadDepartments} + error={errors.parent_id?.message} + /> + + {/*
*/} {/* -
- - -
+ {/*
*/} + + + {/*
*/} {/* -
- setValue("parent_id", value || null)} - onLoadOptions={loadDepartments} - error={errors.parent_id?.message} - /> - -
+ {/*
*/} + setValue("parent_id", value || null)} + onLoadOptions={loadDepartments} + error={errors.parent_id?.message} + /> + + {/*
*/} Close} > {department && ( -
+

Basic Information diff --git a/src/components/shared/DesignationModals.tsx b/src/components/shared/DesignationModals.tsx index 7797e98..5f592e4 100644 --- a/src/components/shared/DesignationModals.tsx +++ b/src/components/shared/DesignationModals.tsx @@ -95,7 +95,7 @@ export const NewDesignationModal = ({ >
Close} > {designation && ( -
+

Basic Information diff --git a/src/components/shared/EditRoleModal.tsx b/src/components/shared/EditRoleModal.tsx index 53e93de..e185a1b 100644 --- a/src/components/shared/EditRoleModal.tsx +++ b/src/components/shared/EditRoleModal.tsx @@ -465,7 +465,7 @@ export const EditRoleModal = ({ {!isLoadingRole && ( {/* Role Name and Role Code Row */}
diff --git a/src/components/shared/EditUserModal.tsx b/src/components/shared/EditUserModal.tsx index 46d0667..0e9bcc2 100644 --- a/src/components/shared/EditUserModal.tsx +++ b/src/components/shared/EditUserModal.tsx @@ -546,7 +546,7 @@ export const EditUserModal = ({ } > - + {isLoadingUser && (
diff --git a/src/components/shared/FailedEmailsTable.tsx b/src/components/shared/FailedEmailsTable.tsx index 8dcc3b8..769e27c 100644 --- a/src/components/shared/FailedEmailsTable.tsx +++ b/src/components/shared/FailedEmailsTable.tsx @@ -1,17 +1,24 @@ -import React, { useState, useEffect } from 'react'; -import { failedEmailsService, type FailedEmail } from '../../services/failed-emails-service'; -import { DataTable, type Column } from './DataTable'; -import { Modal } from './Modal'; -import { Button } from '@/components/ui/button'; -import { StatusBadge } from './StatusBadge'; -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'; +import React, { useState, useEffect } from "react"; +import { + failedEmailsService, + type FailedEmail, +} from "../../services/failed-emails-service"; +import { DataTable, type Column } from "./DataTable"; +import { Modal } from "./Modal"; +// import { Button } from "@/components/ui/button"; +import { StatusBadge } from "./StatusBadge"; +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 = () => { +interface FailedEmailsTableProps { + onRegisterResendAll?: (node: React.ReactNode) => void; +} + +export const FailedEmailsTable: React.FC = ({ onRegisterResendAll }) => { const [emails, setEmails] = useState([]); const [loading, setLoading] = useState(true); const [total, setTotal] = useState(0); @@ -28,7 +35,10 @@ export const FailedEmailsTable: React.FC = () => { setLoading(true); try { const offset = (page - 1) * currentLimit; - const res = await failedEmailsService.getFailedEmails(currentLimit, offset); + const res = await failedEmailsService.getFailedEmails( + currentLimit, + offset, + ); setEmails(res.data || []); setTotal(res.total || 0); setCurrentPage(page); @@ -49,10 +59,10 @@ export const FailedEmailsTable: React.FC = () => { setResendingId(id); try { await failedEmailsService.resendEmail(id); - toast.success('Email resent successfully.'); + toast.success("Email resent successfully."); fetchEmails(currentPage); } catch (error: any) { - toast.error('Failed to resend email', { description: error.message }); + toast.error("Failed to resend email", { description: error.message }); } finally { setResendingId(null); } @@ -65,19 +75,49 @@ export const FailedEmailsTable: React.FC = () => { toast.success(res.message); fetchEmails(currentPage); } catch (error: any) { - toast.error('Failed to resend all emails', { description: error.message }); + toast.error("Failed to resend all emails", { + description: error.message, + }); } finally { setIsResendingAll(false); } }; + useEffect(() => { + if (onRegisterResendAll) { + onRegisterResendAll( + e.status === "failed").length === 0 + } + > + {isResendingAll ? ( + <> + + Resending... + + ) : ( + "Resend All Failed" + )} + + ); + } + return () => { + if (onRegisterResendAll) { + onRegisterResendAll(null); + } + }; + }, [isResendingAll, emails, onRegisterResendAll]); + const handleDelete = async (id: string) => { try { await failedEmailsService.deleteEmail(id); - toast.success('Email deleted successfully.'); + toast.success("Email deleted successfully."); fetchEmails(currentPage); } catch (error: any) { - toast.error('Failed to delete email', { description: error.message }); + toast.error("Failed to delete email", { description: error.message }); } }; @@ -88,81 +128,91 @@ export const FailedEmailsTable: React.FC = () => { const columns: Column[] = [ { - label: 'Date', - key: 'created_at', - render: (record: FailedEmail) => format(new Date(record.created_at), 'yyyy-MM-dd HH:mm:ss') + label: "Date", + key: "created_at", + render: (record: FailedEmail) => + format(new Date(record.created_at), "yyyy-MM-dd HH:mm:ss"), }, { - label: 'To', - key: 'to_email', - render: (record: FailedEmail) => record.to_email + label: "To", + key: "to_email", + render: (record: FailedEmail) => record.to_email, }, { - label: 'Subject', - key: 'subject', - render: (record: FailedEmail) => record.subject + label: "Subject", + key: "subject", + render: (record: FailedEmail) => record.subject, }, { - label: 'Status', - key: 'status', + label: "Status", + key: "status", render: (record: FailedEmail) => ( - + {record.status} - ) + ), }, { - label: 'Actions', - key: 'actions', - align: 'right', + label: "Actions", + key: "actions", + align: "right", render: (record: FailedEmail) => (
showEmailDetails(record), - icon: + icon: , }, - ...(record.status === 'failed' + ...(record.status === "failed" ? [ { - label: resendingId === record.id ? 'Resending...' : 'Resend Email', + label: + resendingId === record.id + ? "Resending..." + : "Resend Email", onClick: () => handleResend(record.id), - icon: resendingId === record.id ? ( - - ) : ( - - ) - } + icon: + resendingId === record.id ? ( + + ) : ( + + ), + }, ] : []), { - label: 'Delete Email', + label: "Delete Email", onClick: () => handleDelete(record.id), icon: , - variant: 'danger' - } + variant: "danger", + }, ]} />
- ) - } + ), + }, ]; return ( -
+
{/* Toolbar / Actions Header */} -
-
- - e.status === 'failed').length === 0} + {!onRegisterResendAll && ( +
+ {/*
*/} + {/* */} + e.status === "failed").length === 0 + } > {isResendingAll ? ( <> @@ -170,11 +220,12 @@ export const FailedEmailsTable: React.FC = () => { Resending... ) : ( - 'Resend All Failed' + "Resend All Failed" )} + {/*
*/}
-
+ )} {/* Table Section */} { emptyMessage="No failed emails found" error={error} /> - + {/* Pagination Footer */} {total > limit && (
@@ -211,17 +262,28 @@ export const FailedEmailsTable: React.FC = () => { maxWidth="xl" > {selectedEmail && ( -
+
-

To: {selectedEmail.to_email}

-

Subject: {selectedEmail.subject}

-

Error Message: {selectedEmail.error_message}

+

+ To:{" "} + {selectedEmail.to_email} +

+

+ Subject:{" "} + {selectedEmail.subject} +

+

+ Error Message:{" "} + + {selectedEmail.error_message} + +

Body: -
diff --git a/src/components/shared/FileShareModal.tsx b/src/components/shared/FileShareModal.tsx index ff3fbb0..4621e36 100644 --- a/src/components/shared/FileShareModal.tsx +++ b/src/components/shared/FileShareModal.tsx @@ -113,7 +113,7 @@ export const FileShareModal: React.FC = ({ maxWidth="md" preventCloseOnClickOutside={showRevokeConfirm} > -
+
{!shareData ? ( <> {/* Expiry */} diff --git a/src/components/shared/FileUploadModal.tsx b/src/components/shared/FileUploadModal.tsx index dd578ca..88c93d5 100644 --- a/src/components/shared/FileUploadModal.tsx +++ b/src/components/shared/FileUploadModal.tsx @@ -449,10 +449,10 @@ export const FileUploadModal = ({ maxWidth="md" footer={footer} > -
+
{/* Drop Zone */} -
-

Attach Files *

+
+

Attach Files *

{fileEntries.length === 0 ? (
{ e.preventDefault(); setIsDragging(true); }} diff --git a/src/components/shared/FileVersionUploadModal.tsx b/src/components/shared/FileVersionUploadModal.tsx index 74abf6d..8554520 100644 --- a/src/components/shared/FileVersionUploadModal.tsx +++ b/src/components/shared/FileVersionUploadModal.tsx @@ -169,7 +169,7 @@ export const FileVersionUploadModal = ({ } > -
+

Select New File *

(false); return ( -
+