BhawanSingh
/
SME-Web
2
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

loaderUI

This commit is contained in:
JaiPandey425 2025-07-30 14:15:44 +05:30
parent bdad718c92
commit 7cbd74fc14
4 changed files with 106 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

152
src/components/contacts/Contacts.tsx
View File

@ -83,11 +83,11 @@ const Contacts = () => {
const handleContactSubmit = async (data: ContactData, type: "") => { const handleContactSubmit = async (data: ContactData, type: "") => {
try { try {
let res ; let res;
setCreateAndInviteLoader(true); setCreateAndInviteLoader(true);
if (type === 'Edit') { if (type === 'Edit') {
res = await api.put(`/api/accounts/${activeAccountId}/contacts`, [data]) res = await api.put(`/api/accounts/${activeAccountId}/contacts`, [data])
}else{ } else {
res = await api.post(`/api/accounts/${activeAccountId}/contacts`, [data]); res = await api.post(`/api/accounts/${activeAccountId}/contacts`, [data]);
} }
if (res.status === 200) { if (res.status === 200) {
@ -115,82 +115,84 @@ const Contacts = () => {
return ( return (
<> <>
<div className='flex justify-end my-2 cursor-pointer'> <div className='px-1.5'>
<div <div className='flex justify-end my-2 cursor-pointer'>
onClick={() => setShowModal((prev) => !prev)} <div
className="flex items-center gap-2 bg-[var(--primary)] px-3 py-1.5 rounded-sm hover:opacity-90 "> onClick={() => setShowModal((prev) => !prev)}
<IoMdAdd className="text-white" /> className="flex items-center gap-2 bg-[var(--primary)] px-3 py-1.5 rounded-sm hover:opacity-90 ">
<button <IoMdAdd className="text-white" />
className="text-white rounded text-sm hover:opacity-90 cursor-pointer"> <button
Add Contact className="text-white rounded text-sm hover:opacity-90 cursor-pointer">
</button> Add Contact
</button>
</div>
</div> </div>
</div> <div className="overflow-y-auto max-h-[79vh] border border-gray-200 rounded shadow-sm no-scrollbar">
<div className="overflow-y-auto max-h-[79vh] border border-gray-200 rounded shadow-sm no-scrollbar"> <table className="min-w-full text-sm bg-white">
<table className="min-w-full text-sm bg-white"> <thead className="bg-gray-100 text-gray-700 uppercase text-xs tracking-wider sticky top-0 z-10">
<thead className="bg-gray-100 text-gray-700 uppercase text-xs tracking-wider sticky top-0 z-10">
<tr>
<th className="px-4 py-3 text-left">First Name</th>
<th className="px-4 py-3 text-left">Last Name</th>
<th className="px-4 py-3 text-left">Email</th>
<th className="px-4 py-3 text-center">Actions</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-200">
{loading ? (
<tr> <tr>
<td colSpan="4" className="text-center py-4">Loading...</td> <th className="px-4 py-3 text-left">First Name</th>
<th className="px-4 py-3 text-left">Last Name</th>
<th className="px-4 py-3 text-left">Email</th>
<th className="px-4 py-3 text-center">Actions</th>
</tr> </tr>
) : contacts.length === 0 ? ( </thead>
<tr> <tbody className="divide-y divide-gray-200">
<td colSpan="4" className="text-center py-4">No contacts found.</td> {loading ? (
</tr> <tr>
) : ( <td colSpan="4" className="text-center py-4">Loading...</td>
contacts.map((contact) => (
<tr key={contact.id} className="hover:bg-gray-50">
<td className="px-4 py-3">{contact.firstName}</td>
<td className="px-4 py-3">{contact.lastName}</td>
<td className="px-4 py-3">{contact.email}</td>
<td className="px-4 py-3 text-center">
<div
className="relative inline-block"
tabIndex={0}
onBlur={handleBlur}
>
<button
className="text-gray-600 hover:text-black p-1 focus:outline-none"
onClick={() => toggleMenu(contact.id)}
>
<FaEllipsisV />
</button>
{openMenuId === contact.id && (
<div className="absolute top-full right-0 mt-1 bg-white border border-gray-200 rounded shadow-lg z-20 min-w-[100px]">
<button
onMouseDown={() => handleEdit(contact.id)}
className="block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 text-blue-600"
>
Edit
</button>
<button
onMouseDown={() => handleDelete(contact.id)}
className="block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 text-red-600"
>
Delete
</button>
</div>
)}
</div>
</td>
</tr> </tr>
)) ) : contacts.length === 0 ? (
)} <tr>
</tbody> <td colSpan="4" className="text-center py-4">No contacts found.</td>
</table> </tr>
{showModal && ) : (
<ContactFormModal onSubmit={handleContactSubmit} contacts.map((contact) => (
loading={createAndInviteLoader} setShowModal={setShowModal} actionStatus={actionStatus} editJsonData={editJsonData} /> <tr key={contact.id} className="hover:bg-gray-50">
} <td className="px-4 py-3">{contact.firstName}</td>
<td className="px-4 py-3">{contact.lastName}</td>
<td className="px-4 py-3">{contact.email}</td>
<td className="px-4 py-3 text-center">
<div
className="relative inline-block"
tabIndex={0}
onBlur={handleBlur}
>
<button
className="text-gray-600 hover:text-black p-1 focus:outline-none"
onClick={() => toggleMenu(contact.id)}
>
<FaEllipsisV />
</button>
{openMenuId === contact.id && (
<div className="absolute top-full right-0 mt-1 bg-white border border-gray-200 rounded shadow-lg z-20 min-w-[100px]">
<button
onMouseDown={() => handleEdit(contact.id)}
className="block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 text-blue-600"
>
Edit
</button>
<button
onMouseDown={() => handleDelete(contact.id)}
className="block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 text-red-600"
>
Delete
</button>
</div>
)}
</div>
</td>
</tr>
))
)}
</tbody>
</table>
{showModal &&
<ContactFormModal onSubmit={handleContactSubmit}
loading={createAndInviteLoader} setShowModal={setShowModal} actionStatus={actionStatus} editJsonData={editJsonData} />
}
</div>
</div> </div>
</> </>
); );

1
src/components/dashboard/Loader.tsx
View File

@ -1,4 +1,3 @@
import React from 'react'
import { LuSignature } from "react-icons/lu"; import { LuSignature } from "react-icons/lu";
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import { RootState } from '../../store/store'; import { RootState } from '../../store/store';

22
src/components/templates/Templates.tsx
View File

@ -136,7 +136,15 @@ const Templates = () => {
</tr> </tr>
</thead> </thead>
{templates.length > 0 ? ( {loading ? (
<tbody>
<tr>
<td colSpan="6" className="relative h-100">
<LoaderUi />
</td>
</tr>
</tbody>
) : templates.length > 0 ? (
<tbody className="divide-y divide-gray-200"> <tbody className="divide-y divide-gray-200">
{templates.map((item, index) => { {templates.map((item, index) => {
return ( return (
@ -200,18 +208,12 @@ const Templates = () => {
) : ( ) : (
<tbody> <tbody>
<tr> <tr>
<td colSpan="5"> <td colSpan="6" className="text-center py-10 text-gray-500">
<div className="relative flex justify-center items-center h-100 w-full"> No templates found.
{/* Pulsing background div */}
<div className="absolute inset-0 bg-gradient-to-r from-gray-200 to-white animate-pulse"></div>
{/* Loader stays on top, no animation */}
<LoaderUi classStyle="relative h-16 w-16" />
</div>
</td> </td>
</tr> </tr>
</tbody> </tbody>
)} )}
</table> </table>
</div> </div>

31
src/helper/LoaderUi.tsx
View File

@ -1,19 +1,22 @@
import { LuSignature } from "react-icons/lu";
interface StyleProps { interface StyleProps {
classStyle : string classStyle?: string;
} }
const LoaderUi = ({ classStyle }:StyleProps) => { const LoaderUi = ({ classStyle = '' }: StyleProps) => {
return ( return (
<div className={classStyle}> <div className={`absolute inset-0 flex items-center justify-center z-50 ${classStyle}`}>
<svg viewBox="0 0 240 240" height="240" width="240" className="pl"> {/* Overlay */}
<circle strokeLinecap="round" strokeDashoffset="-330" strokeDasharray="0 660" strokeWidth="20" stroke="#000" fill="none" r="105" cy="120" cx="120" className="pl__ring pl__ring--a"></circle> <div className="absolute inset-0 bg-black/30 opacity-60"></div>
<circle strokeLinecap="round" strokeDashoffset="-110" strokeDasharray="0 220" strokeWidth="20" stroke="#000" fill="none" r="35" cy="120" cx="120" className="pl__ring pl__ring--b"></circle>
<circle strokeLinecap="round" strokeDasharray="0 440" strokeWidth="20" stroke="#000" fill="none" r="70" cy="120" cx="85" className="pl__ring pl__ring--c"></circle>
<circle strokeLinecap="round" strokeDasharray="0 440" strokeWidth="20" stroke="#000" fill="none" r="70" cy="120" cx="155" className="pl__ring pl__ring--d"></circle>
</svg>
</div>
)
}
export default LoaderUi {/* Loader box */}
<div className="relative z-10 bg-[var(--loaderBg)] flex flex-col justify-center items-center gap-2 px-16 py-8 rounded-md shadow-lg">
<LuSignature className="text-4xl font-bold animate-text" />
<p>Loading...!</p>
</div>
</div>
);
};
export default LoaderUi;