respo mob
This commit is contained in:
parent
2eaa1ed3e1
commit
4f238f4a6f
|
|
@ -267,7 +267,7 @@ const ProcessStepOne = () => {
|
|||
}
|
||||
|
||||
} else {
|
||||
if(!accountId || !transactionId) return;
|
||||
if (!accountId || !transactionId) return;
|
||||
dispatch(addRecipientAsync({ recipientsData: recipientsDataTemp, accountId, transactionId }));
|
||||
}
|
||||
dispatch(showLoader("Processing Message..."));
|
||||
|
|
@ -345,50 +345,60 @@ const ProcessStepOne = () => {
|
|||
<div className={`relative w-full h-screen bg-[var(--mainViewBg)] ${globalLoader.isLoading ? 'pointer-events-none overflow-hidden' : ''}`}>
|
||||
|
||||
{/* Top Navigation - Fixed */}
|
||||
<div className='fixed top-0 left-0 right-0 w-full flex items-center justify-between bg-white shadow z-50 px-4 py-3'>
|
||||
<div className='flex items-center gap-2'>
|
||||
<IoMdClose
|
||||
onClick={handleClose}
|
||||
className='text-2xl text-slate-500 cursor-pointer hover:text-[var(--primary)] transition'
|
||||
/>
|
||||
<p className="text-base font-normal text-gray-700 border-l pl-4 relative">
|
||||
{transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES ?
|
||||
<>
|
||||
<input
|
||||
value={templateName}
|
||||
onChange={handleChange}
|
||||
className="w-full px-4 py-1.5 border-2 border-dashed rounded-md text-sm focus:outline-none transition border-gray-300 focus:ring-2 focus:border-dashed focus:ring-[var(--primary)]"
|
||||
/>
|
||||
{!isTyping && (
|
||||
<RiPencilFill className="absolute top-2.5 right-2 text-[17px]" />
|
||||
)}
|
||||
</> :
|
||||
"Add Recipient and Message"
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
<div className='fixed top-0 left-0 right-0 w-full bg-white shadow z-50 px-4 py-1.5 lg:py-3'>
|
||||
<div className='flex flex-col sm:flex-row sm:items-center sm:justify-between gap-1 flex-wrap'>
|
||||
|
||||
<div
|
||||
id="add-tags-btn-step-one"
|
||||
className='flex items-center gap-3'>
|
||||
{/* Left Section */}
|
||||
<div className='flex sm:flex-row items-start sm:items-center gap-2 sm:gap-4 w-full sm:w-auto'>
|
||||
|
||||
{transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES && <button
|
||||
onClick={() => handleNextClick(true)}
|
||||
className="text-sm px-4 py-2 rounded bg-[var(--primary)] text-white shadow hover:bg-[var(--primaryLight2)] transition cursor-pointer"
|
||||
>
|
||||
Save & Close
|
||||
</button>}
|
||||
<IoMdClose
|
||||
onClick={handleClose}
|
||||
className='text-2xl text-slate-500 cursor-pointer hover:text-[var(--primary)] transition self-start sm:self-auto'
|
||||
/>
|
||||
|
||||
<button
|
||||
onClick={() => handleNextClick(false)}
|
||||
className="text-sm px-4 py-2 rounded bg-[var(--primary)] text-white shadow hover:bg-[var(--primaryLight2)] transition cursor-pointer"
|
||||
>
|
||||
{signType === SignTypeEnum.selfSign ? "Sign" : "Next"}
|
||||
</button>
|
||||
<p className="text-base font-normal text-gray-700 border-l pl-4 relative w-full sm:w-auto">
|
||||
{transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES ? (
|
||||
<>
|
||||
<input
|
||||
value={templateName}
|
||||
onChange={handleChange}
|
||||
className="w-full sm:w-[250px] px-4 py-1.5 border-2 border-dashed rounded-md text-sm focus:outline-none transition border-gray-300 focus:ring-2 focus:border-dashed focus:ring-[var(--primary)]"
|
||||
/>
|
||||
{!isTyping && (
|
||||
<RiPencilFill className="absolute top-2.5 right-2 text-[17px]" />
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
"Add Recipient and Message"
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Right Section */}
|
||||
<div
|
||||
id="add-tags-btn-step-one"
|
||||
className='flex sm:flex-row items-stretch sm:items-center gap-2 sm:gap-3 w-full sm:w-auto '>
|
||||
|
||||
{transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES && (
|
||||
<button
|
||||
onClick={() => handleNextClick(true)}
|
||||
className="text-sm w-full sm:w-auto px-4 py-2 rounded bg-[var(--primary)] text-white shadow hover:bg-[var(--primaryLight2)] transition cursor-pointer"
|
||||
>
|
||||
Save & Close
|
||||
</button>
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={() => handleNextClick(false)}
|
||||
className="text-sm w-full sm:w-auto px-4 py-2 rounded bg-[var(--primary)] text-white shadow hover:bg-[var(--primaryLight2)] transition cursor-pointer"
|
||||
>
|
||||
{signType === SignTypeEnum.selfSign ? "Sign" : "Next"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Main Content - Scrollable */}
|
||||
<div className="h-screen pt-[80px] overflow-y-auto no-scrollbar">
|
||||
<div className="max-w-4xl rounded-xl shadow-md mx-auto px-6 pb-10 bg-[var(--documentUploadBg)] mb-5">
|
||||
|
|
|
|||
|
|
@ -363,27 +363,26 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
|
|||
|
||||
|
||||
|
||||
return (
|
||||
return (
|
||||
<div ref={containerRef}>
|
||||
<form
|
||||
ref={formRef}
|
||||
onSubmit={handleRecipientAdd}
|
||||
id="add-recipient-step-one"
|
||||
className="w-full bg-white border border-gray-200 rounded-lg shadow-sm px-6 py-4 space-y-3 relative"
|
||||
className="w-full bg-white border border-gray-200 rounded-lg shadow-sm px-3 sm:px-4 lg:px-6 py-3 sm:py-4 space-y-3 sm:space-y-4 relative"
|
||||
>
|
||||
{transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES && (
|
||||
<div className="space-y-1">
|
||||
{/* Top Row: Role Input + Settings */}
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="space-y-2 sm:space-y-3">
|
||||
{/* Role Name and Permissions Section - Responsive Layout */}
|
||||
<div className="flex flex-col lg:flex-row lg:justify-between lg:items-start gap-3 lg:gap-4">
|
||||
{/* Role Name Input */}
|
||||
{/* Role Name Input */}
|
||||
<div className="w-64">
|
||||
<div className="w-full lg:w-64 xl:w-80">
|
||||
<input
|
||||
type="text"
|
||||
value={recipient.roleName}
|
||||
placeholder="Role name"
|
||||
className={`w-full px-3 py-2 border rounded-md text-sm focus:outline-none transition
|
||||
${errors.roleName ? 'border-red-500 ring-2 ring-red-300' : 'border-gray-300 focus:ring-2 focus:ring-[var(--primary)]'}`}
|
||||
${errors.roleName ? 'border-red-500 ring-2 ring-red-300' : 'border-gray-300 focus:ring-2 focus:ring-[var(--primary)]'}`}
|
||||
onChange={(e) => {
|
||||
setRecipients({ ...recipient, roleName: e.target.value });
|
||||
setErrors(prev => ({ ...prev, roleName: false }));
|
||||
|
|
@ -394,95 +393,76 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
|
|||
)}
|
||||
</div>
|
||||
|
||||
{/* Permissions Section */}
|
||||
<div className="flex items-center justify-start lg:justify-end">
|
||||
<div className="flex sm:flex-row items-start sm:items-center gap-2 sm:gap-3">
|
||||
{/* Edit Permission */}
|
||||
<div className="relative group">
|
||||
<label className="flex items-center gap-1 text-xs sm:text-sm text-gray-700">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={recipient.allowSenderToEdit}
|
||||
onChange={(e) =>
|
||||
setRecipients({ ...recipient, allowSenderToEdit: e.target.checked })
|
||||
}
|
||||
onFocus={() => setOpenContactModal(true)}
|
||||
onBlur={handleContactModalBlur}
|
||||
className='accent-blue-500 w-3 h-3 sm:w-4 sm:h-4'
|
||||
/>
|
||||
<span className="whitespace-nowrap">Allow Edit</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* Settings + Permissions */}
|
||||
<div className="flex items-center">
|
||||
<div className="flex justify-between w-full">
|
||||
{/* Permission Status Text - Always Visible */}
|
||||
|
||||
{/* Permission Controls - Always Visible */}
|
||||
<div className="max-w-80 opacity-100 overflow-visible">
|
||||
<div className="flex items-center space-x-3 pr-1.5">
|
||||
{/* Edit Permission */}
|
||||
<div className="relative group">
|
||||
<label className="flex items-center gap-1 text-sm text-gray-700">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={recipient.allowSenderToEdit}
|
||||
onChange={(e) =>
|
||||
setRecipients({ ...recipient, allowSenderToEdit: e.target.checked })
|
||||
}
|
||||
onFocus={() => setOpenContactModal(true)}
|
||||
onBlur={handleContactModalBlur}
|
||||
className='accent-blue-500'
|
||||
/>
|
||||
Allow Edit
|
||||
</label>
|
||||
{/* Tooltip */}
|
||||
|
||||
</div>
|
||||
|
||||
{/* Delete Permission */}
|
||||
<div className="relative group">
|
||||
<label className="flex items-center gap-1 text-sm text-gray-700">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={recipient.allowSenderToDelete}
|
||||
onChange={(e) =>
|
||||
setRecipients({ ...recipient, allowSenderToDelete: e.target.checked })
|
||||
}
|
||||
onFocus={() => setOpenContactModal(true)}
|
||||
onBlur={handleContactModalBlur}
|
||||
className="accent-red-500"
|
||||
/>
|
||||
Allow Delete
|
||||
</label>
|
||||
{/* Tooltip */}
|
||||
{/* <div className="absolute bottom-0 -translate-y-full left-1/2 transform -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-20">
|
||||
<div className="bg-gray-800 text-white text-xs rounded-lg py-2 px-3 whitespace-nowrap">
|
||||
Delete Permission
|
||||
<div className="absolute bottom-[-5px] left-1/2 transform -translate-x-1/2 border-4 border-transparent border-b-gray-800"></div>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
{/* Delete Permission */}
|
||||
<div className="relative group">
|
||||
<label className="flex items-center gap-1 text-xs sm:text-sm text-gray-700">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={recipient.allowSenderToDelete}
|
||||
onChange={(e) =>
|
||||
setRecipients({ ...recipient, allowSenderToDelete: e.target.checked })
|
||||
}
|
||||
onFocus={() => setOpenContactModal(true)}
|
||||
onBlur={handleContactModalBlur}
|
||||
className="accent-red-500 w-3 h-3 sm:w-4 sm:h-4"
|
||||
/>
|
||||
<span className="whitespace-nowrap">Allow Delete</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Name Inputs */}
|
||||
<div className="grid grid-cols-12 gap-4 mt-3">
|
||||
<div className="col-span-4">
|
||||
{/* Name and Email Inputs - Responsive Grid */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4 mt-3">
|
||||
{/* First Name */}
|
||||
<div className="w-full">
|
||||
<input
|
||||
type="text"
|
||||
onFocus={() => handleFocus("firstName")}
|
||||
onBlur={handleContactModalBlur}
|
||||
value={recipient.firstName}
|
||||
placeholder="First Name"
|
||||
className={`w-full px-4 py-2 border rounded-md text-sm focus:outline-none transition
|
||||
${errors.firstName ? 'border-red-500 ring-2 ring-red-300' : 'border-gray-300 focus:ring-2 focus:ring-[var(--primary)]'}`}
|
||||
className={`w-full px-3 sm:px-4 py-2 border rounded-md text-sm focus:outline-none transition
|
||||
${errors.firstName ? 'border-red-500 ring-2 ring-red-300' : 'border-gray-300 focus:ring-2 focus:ring-[var(--primary)]'}`}
|
||||
onChange={(e) => {
|
||||
setRecipients({ ...recipient, firstName: e.target.value });
|
||||
// setErrors((prev) => ({ ...prev, firstName: false }));
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
{/* {errors.firstName && (
|
||||
<p className="text-red-500 text-xs mt-1">First Name is required</p>
|
||||
)} */}
|
||||
<div className="col-span-4">
|
||||
|
||||
{/* Last Name */}
|
||||
<div className="w-full">
|
||||
<input
|
||||
type="text"
|
||||
onFocus={() => handleFocus("lastName")}
|
||||
onBlur={handleContactModalBlur}
|
||||
value={recipient.lastName}
|
||||
placeholder="Last Name"
|
||||
className={` w-full px-4 py-2 border rounded-md text-sm focus:outline-none transition
|
||||
${errors.lastName ? 'border-red-500 ring-2 ring-red-300' : 'border-gray-300 focus:ring-2 focus:ring-[var(--primary)]'}`}
|
||||
className={`w-full px-3 sm:px-4 py-2 border rounded-md text-sm focus:outline-none transition
|
||||
${errors.lastName ? 'border-red-500 ring-2 ring-red-300' : 'border-gray-300 focus:ring-2 focus:ring-[var(--primary)]'}`}
|
||||
onChange={(e) => {
|
||||
setRecipients({ ...recipient, lastName: e.target.value });
|
||||
setErrors((prev) => ({ ...prev, lastName: false }));
|
||||
|
|
@ -492,15 +472,17 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
|
|||
<p className="text-red-500 text-xs mt-1">Last Name is required</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-span-4">
|
||||
|
||||
{/* Email - Full width on small screens, shares row on larger */}
|
||||
<div className="w-full sm:col-span-2 lg:col-span-1">
|
||||
<input
|
||||
type="email"
|
||||
onFocus={() => handleFocus("email")}
|
||||
onBlur={handleContactModalBlur}
|
||||
value={recipient.email}
|
||||
placeholder="Recipient Email"
|
||||
className={`w-full px-4 py-2 border rounded-md text-sm focus:outline-none transition
|
||||
${errors.email ? 'border-red-500 ring-2 ring-red-300' : 'border-gray-300 focus:ring-2 focus:ring-[var(--primary)]'}`}
|
||||
className={`w-full px-3 sm:px-4 py-2 border rounded-md text-sm focus:outline-none transition
|
||||
${errors.email ? 'border-red-500 ring-2 ring-red-300' : 'border-gray-300 focus:ring-2 focus:ring-[var(--primary)]'}`}
|
||||
onChange={(e) => {
|
||||
setRecipients({ ...recipient, email: e.target.value });
|
||||
setErrors((prev) => ({ ...prev, email: false }));
|
||||
|
|
@ -512,33 +494,35 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{/* Host Fields for In-Person Signers */}
|
||||
{recipient.type === recipientType.INPERSONSIGNER && (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
|
||||
<input
|
||||
required={transactionTemplateToggle !== TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES}
|
||||
type="text"
|
||||
onFocus={() => setOpenContactModal(true)}
|
||||
onBlur={handleContactModalBlur}
|
||||
value={recipient.hostName}
|
||||
placeholder="Host Name"
|
||||
className="w-full px-3 sm:px-4 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-[var(--primary)] transition"
|
||||
onChange={(e) => setRecipients({ ...recipient, hostName: e.target.value })}
|
||||
/>
|
||||
<input
|
||||
required={transactionTemplateToggle !== TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES}
|
||||
type="email"
|
||||
onFocus={() => setOpenContactModal(true)}
|
||||
onBlur={handleContactModalBlur}
|
||||
value={recipient.hostEmail}
|
||||
placeholder="Host Email"
|
||||
className="w-full px-3 sm:px-4 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-[var(--primary)] transition"
|
||||
onChange={(e) => setRecipients({ ...recipient, hostEmail: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{recipient.type === recipientType.INPERSONSIGNER && <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<input
|
||||
required={transactionTemplateToggle !== TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES}
|
||||
type="text"
|
||||
onFocus={() => setOpenContactModal(true)}
|
||||
onBlur={handleContactModalBlur}
|
||||
value={recipient.hostName}
|
||||
placeholder="Host Name"
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-[var(--primary)] transition"
|
||||
onChange={(e) => setRecipients({ ...recipient, hostName: e.target.value })}
|
||||
/>
|
||||
<input
|
||||
required={transactionTemplateToggle !== TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES}
|
||||
type="email"
|
||||
onFocus={() => setOpenContactModal(true)}
|
||||
onBlur={handleContactModalBlur}
|
||||
value={recipient.hostEmail}
|
||||
placeholder="Host Email"
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-[var(--primary)] transition"
|
||||
onChange={(e) => setRecipients({ ...recipient, hostEmail: e.target.value })}
|
||||
/>
|
||||
</div>}
|
||||
|
||||
{/* Contact Modal */}
|
||||
{/* Contact Modal - Responsive Positioning */}
|
||||
{openContactModal && contactData.contacts.length > 0 && (
|
||||
<div className="absolute z-50 mt-1 w-2/3 max-h-[50vh] bg-white shadow-lg rounded-md p-3 border border-gray-100 overflow-y-auto no-scrollbar">
|
||||
<div className="absolute z-50 mt-1 w-full sm:w-2/3 lg:w-1/2 xl:w-2/3 max-h-[40vh] sm:max-h-[50vh] bg-white shadow-lg rounded-md p-2 sm:p-3 border border-gray-100 overflow-y-auto no-scrollbar">
|
||||
<ContactModal
|
||||
contactData={contactData}
|
||||
inpFirstName={recipient.firstName}
|
||||
|
|
@ -553,36 +537,41 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
|
|||
</div>
|
||||
)}
|
||||
|
||||
|
||||
|
||||
{/* Signing options + Add button in one line */}
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||
<div className="flex flex-wrap gap-6">
|
||||
{/* Signing Options and Add Button - Responsive Layout */}
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-4">
|
||||
{/* Recipient Type Radio Options */}
|
||||
<div className="flex flex-col sm:flex-row sm:flex-wrap gap-2 sm:gap-4 lg:gap-6">
|
||||
{[
|
||||
{ label: "Signer", value: recipientType.SIGNER },
|
||||
{ label: "In Person Signer", value: recipientType.INPERSONSIGNER },
|
||||
{ label: "CC", value: recipientType.CC },
|
||||
].map((option) => (
|
||||
<label key={option.value} className="flex items-center gap-2 text-gray-700 text-sm cursor-pointer">
|
||||
<label key={option.value} className="flex items-center gap-2 text-gray-700 text-xs sm:text-sm cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
name="recipient-type"
|
||||
value={option.value}
|
||||
checked={recipient.type === option.value}
|
||||
onClick={(e) => setRecipients({ ...recipient, type: e.target.value })}
|
||||
className="accent-[var(--primary)] cursor-pointer"
|
||||
className="accent-[var(--primary)] cursor-pointer w-3 h-3 sm:w-4 sm:h-4"
|
||||
/>
|
||||
{option.label}
|
||||
<span className="whitespace-nowrap">{option.label}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{!showCard && <button
|
||||
type="submit"
|
||||
className="inline-flex items-center gap-2 bg-[var(--primary)] hover:bg-[var(--primaryLight2)] text-white text-sm font-semibold px-5 py-2 rounded-md transition"
|
||||
>
|
||||
<FaPlus size={14} /> {editCase === "Edit" ? "Edit Recipient" : "Add Recipient"}
|
||||
</button>}
|
||||
{/* Add/Edit Button */}
|
||||
{!showCard && (
|
||||
<button
|
||||
type="submit"
|
||||
className="inline-flex items-center justify-center gap-2 bg-[var(--primary)] hover:bg-[var(--primaryLight2)] text-white text-xs sm:text-sm font-semibold px-4 sm:px-5 py-2 rounded-md transition w-full sm:w-auto min-w-fit"
|
||||
>
|
||||
<FaPlus size={12} className="sm:w-3.5 sm:h-3.5" />
|
||||
<span className="whitespace-nowrap">
|
||||
{editCase === "Edit" ? "Edit Recipient" : "Add Recipient"}
|
||||
</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -121,7 +121,7 @@ const RecipientCards = ({
|
|||
return currentValue && currentValue.toString().trim() !== "";
|
||||
};
|
||||
|
||||
const renderEditableField = (
|
||||
const renderEditableField = (
|
||||
recipient: any,
|
||||
fieldName: string,
|
||||
placeholder: string,
|
||||
|
|
@ -134,7 +134,7 @@ const RecipientCards = ({
|
|||
const editable = isEditable(recipient);
|
||||
|
||||
return (
|
||||
<div className="relative inline-block mx-3">
|
||||
<div className="relative inline-block w-full sm:mx-1 lg:mx-3">
|
||||
<input
|
||||
type={type}
|
||||
value={currentValue || ""}
|
||||
|
|
@ -148,7 +148,7 @@ const RecipientCards = ({
|
|||
}
|
||||
}}
|
||||
disabled={!editable}
|
||||
className={`w-full px-4 py-2 font-normal border focus:outline-none focus:ring-2 focus:ring-[var(--primary)] transition ${error ? "border-red-500 placeholder-red-500 text-xs" : "border-gray-300"} rounded-lg text-sm ${className} ${!editable ? "bg-gray-100 cursor-not-allowed" : ""}`}
|
||||
className={`w-full px-2 sm:px-3 lg:px-4 py-1.5 sm:py-2 font-normal border focus:outline-none focus:ring-2 focus:ring-[var(--primary)] transition ${error ? "border-red-500 placeholder-red-500 text-xs" : "border-gray-300"} rounded-lg text-xs sm:text-sm ${className} ${!editable ? "bg-gray-100 cursor-not-allowed" : ""}`}
|
||||
title={editable ? "Edit field" : "Editing disabled"}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -215,17 +215,17 @@ const RecipientCards = ({
|
|||
setEditingField(null);
|
||||
};
|
||||
|
||||
return (
|
||||
return (
|
||||
<div className="w-full bg-white rounded-md shadow-sm border border-gray-200">
|
||||
{recipients.length > 0 ? (
|
||||
<>
|
||||
{recipients.length > 1 && (
|
||||
<div className="flex items-center justify-between px-4 py-2 border-b border-gray-300">
|
||||
<div className="flex sm:flex-row sm:items-center justify-between px-3 sm:px-4 py-2 border-b border-gray-300 gap-2">
|
||||
<h3 className="text-sm font-semibold text-gray-700">
|
||||
Recipients ({recipients.length})
|
||||
</h3>
|
||||
<label
|
||||
className="flex items-center gap-2 cursor-pointer select-none"
|
||||
className="flex items-center gap-2 cursor-pointer select-none justify-center sm:justify-end"
|
||||
onClick={() => setSigningOrderModal({ ...signingOrderModal, open: true })}
|
||||
>
|
||||
<span className="text-xs font-medium text-gray-600">Signing Order</span>
|
||||
|
|
@ -238,14 +238,16 @@ const RecipientCards = ({
|
|||
{recipients.map((recipient, idx) => (
|
||||
<div
|
||||
key={recipient.email + idx}
|
||||
className={`flex items-center justify-between px-2 py-3 hover:bg-gray-50 transition-colors ${(recipient.uuid || recipient.id) === editRecipientCurrentEmail
|
||||
className={`flex flex-col lg:flex-row lg:items-center justify-between px-2 sm:px-3 lg:px-2 py-3 hover:bg-gray-50 transition-colors gap-3 lg:gap-0 ${(recipient.uuid || recipient.id) === editRecipientCurrentEmail
|
||||
? "bg-neutral-100 opacity-40"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-3 min-w-0">
|
||||
{/* Main Content Section */}
|
||||
<div className="flex items-start sm:items-center gap-2 sm:gap-3 min-w-0 flex-1">
|
||||
{/* Order Number */}
|
||||
{recipients.length > 1 ? (
|
||||
<div className="relative">
|
||||
<div className="relative flex-shrink-0">
|
||||
<input
|
||||
type="number"
|
||||
value={recipient.routingOrder || 1}
|
||||
|
|
@ -256,7 +258,7 @@ const RecipientCards = ({
|
|||
Number(e.target.value)
|
||||
)
|
||||
}
|
||||
className="w-10 h-6 text-center rounded text-sm text-gray-600 focus:outline-none focus:ring-[var(--primary)] border border-dashed border-gray-400 bg-slate-100"
|
||||
className="w-8 sm:w-10 h-6 text-center rounded text-sm text-gray-600 focus:outline-none focus:ring-[var(--primary)] border border-dashed border-gray-400 bg-slate-100"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
|
|
@ -271,25 +273,30 @@ const RecipientCards = ({
|
|||
Number(e.target.value)
|
||||
)
|
||||
}
|
||||
className="w-8 text-center rounded text-sm text-gray-700 border-none focus:outline-none focus:ring-[var(--primary)]"
|
||||
className="w-6 sm:w-8 text-center rounded text-sm text-gray-700 border-none focus:outline-none focus:ring-[var(--primary)] flex-shrink-0"
|
||||
/>
|
||||
)}
|
||||
<div className="flex-shrink-0 w-8 h-8 rounded-full bg-[var(--primary)] text-white flex items-center justify-center font-semibold text-xs select-none">
|
||||
|
||||
{/* Avatar */}
|
||||
<div className="flex-shrink-0 w-7 h-7 sm:w-8 sm:h-8 rounded-full bg-[var(--primary)] text-white flex items-center justify-center font-semibold text-xs select-none">
|
||||
{getInitials(`${recipient.firstName} ${recipient.lastName || ""}`)}
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<div className="grid grid-cols-12 gap-2 mb-2">
|
||||
<div className="col-span-6">
|
||||
|
||||
{/* Form Fields Section */}
|
||||
<div className="min-w-0 flex-1">
|
||||
{/* Role Name and Permissions Row */}
|
||||
<div className="flex flex-col lg:flex-row lg:items-center gap-2 mb-2">
|
||||
<div className="flex-1 lg:w-1/2">
|
||||
<p className="font-semibold text-gray-800 text-xs">
|
||||
{renderEditableField(recipient, "roleName", "Role name")}
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-span-6 flex items-center justify-end ">
|
||||
{transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES && (
|
||||
<div className="flex items-center gap-4">
|
||||
{/* <span className="text-sm text-gray-600">Permissions granted:</span> */}
|
||||
|
||||
<label className="flex items-center gap-1 text-sm text-gray-700">
|
||||
{/* Permissions - Mobile: Below role, Desktop: Right side */}
|
||||
<div className="lg:w-1/2 lg:flex lg:items-center lg:justify-end">
|
||||
{transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES && (
|
||||
<div className="flex ps-2.5 sm:flex-row items-start sm:items-center gap-2 sm:gap-4">
|
||||
<label className="flex items-center gap-1 text-xs sm:text-sm text-gray-700">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={recipient.allowSenderToEdit}
|
||||
|
|
@ -302,12 +309,12 @@ const RecipientCards = ({
|
|||
})
|
||||
)
|
||||
}
|
||||
className="accent-blue-500"
|
||||
className="accent-blue-500 w-3 h-3 sm:w-4 sm:h-4"
|
||||
/>
|
||||
Allow Edit
|
||||
<span className="whitespace-nowrap">Allow Edit</span>
|
||||
</label>
|
||||
|
||||
<label className="flex items-center gap-1 text-sm text-gray-700">
|
||||
<label className="flex items-center gap-1 text-xs sm:text-sm text-gray-700">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={recipient.allowSenderToDelete}
|
||||
|
|
@ -320,35 +327,59 @@ const RecipientCards = ({
|
|||
})
|
||||
)
|
||||
}
|
||||
className="accent-red-500"
|
||||
className="accent-red-500 w-3 h-3 sm:w-4 sm:h-4"
|
||||
/>
|
||||
Allow Delete
|
||||
<span className="whitespace-nowrap">Allow Delete</span>
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-12 gap-2 mb-2">
|
||||
<div className="col-span-12">
|
||||
<p className="font-semibold text-gray-800 text-xs flex items-center gap-1">
|
||||
{renderEditableField(recipient, "firstName", "First Name")}
|
||||
{renderEditableField(recipient, "lastName", "Last Name")}
|
||||
{renderEditableField(recipient, "email", "Recipient Email", "", "email")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{recipient.type === recipientType.INPERSONSIGNER && (
|
||||
<div className="grid grid-cols-12 gap-2">
|
||||
<div className="col-span-12">
|
||||
<p className="font-semibold text-gray-800 text-xs flex items-center gap-1">
|
||||
{renderEditableField(recipient, "hostName", "Host Name")}
|
||||
{renderEditableField(recipient, "hostEmail", "Host Email", "", "email")}
|
||||
{/* Name and Email Fields */}
|
||||
<div className="mb-2">
|
||||
{/* Mobile: Stack vertically, Tablet+: Side by side */}
|
||||
<div className="flex flex-col sm:flex-row gap-1 sm:gap-2">
|
||||
<div className="flex flex-col sm:flex-row gap-1 sm:gap-2 sm:flex-1">
|
||||
<div className="w-full sm:w-1/2">
|
||||
<p className="font-semibold text-gray-800 text-xs">
|
||||
{renderEditableField(recipient, "firstName", "First Name")}
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-full sm:w-1/2">
|
||||
<p className="font-semibold text-gray-800 text-xs">
|
||||
{renderEditableField(recipient, "lastName", "Last Name")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full sm:flex-1">
|
||||
<p className="font-semibold text-gray-800 text-xs">
|
||||
{renderEditableField(recipient, "email", "Recipient Email", "", "email")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Host Fields (for In-Person Signers) */}
|
||||
{recipient.type === recipientType.INPERSONSIGNER && (
|
||||
<div className="mb-2">
|
||||
<div className="flex flex-col sm:flex-row gap-1 sm:gap-2">
|
||||
<div className="w-full sm:w-1/2">
|
||||
<p className="font-semibold text-gray-800 text-xs">
|
||||
{renderEditableField(recipient, "hostName", "Host Name")}
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-full sm:w-1/2">
|
||||
<p className="font-semibold text-gray-800 text-xs">
|
||||
{renderEditableField(recipient, "hostEmail", "Host Email", "", "email")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center gap-2 my-1.5 mx-2">
|
||||
|
||||
{/* Recipient Type Radio Buttons */}
|
||||
<div className="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-2 my-1.5 mx-1 sm:mx-2">
|
||||
<label className="flex items-center gap-1">
|
||||
<input
|
||||
type="radio"
|
||||
|
|
@ -360,7 +391,7 @@ const RecipientCards = ({
|
|||
className="accent-[var(--primary)] w-3 h-3"
|
||||
disabled={!isEditable(recipient)}
|
||||
/>
|
||||
<span className="text-sm">Signer</span>
|
||||
<span className="text-xs sm:text-sm">Signer</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-1">
|
||||
<input
|
||||
|
|
@ -373,7 +404,7 @@ const RecipientCards = ({
|
|||
className="accent-[var(--primary)] w-3 h-3"
|
||||
disabled={!isEditable(recipient)}
|
||||
/>
|
||||
<span className="text-sm">In Person Signer</span>
|
||||
<span className="text-xs sm:text-sm whitespace-nowrap">In Person Signer</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-1">
|
||||
<input
|
||||
|
|
@ -386,14 +417,15 @@ const RecipientCards = ({
|
|||
className="accent-[var(--primary)] w-3 h-3"
|
||||
disabled={!isEditable(recipient)}
|
||||
/>
|
||||
<span className="text-sm">CC</span>
|
||||
<span className="text-xs sm:text-sm">CC</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
{signType !== "self-sign" && (
|
||||
<div className="flex justify-end gap-2 items-center">
|
||||
<div className="flex justify-end lg:justify-center gap-2 items-center lg:ml-2">
|
||||
<button
|
||||
type="button"
|
||||
title="Remove recipient"
|
||||
|
|
@ -404,9 +436,9 @@ const RecipientCards = ({
|
|||
? false
|
||||
: !recipient.newOne && !recipient.allowSenderToDelete
|
||||
}
|
||||
className="text-gray-400 hover:text-red-600 transition-colors cursor-pointer disabled:opacity-50"
|
||||
className="text-gray-400 hover:text-red-600 transition-colors cursor-pointer disabled:opacity-50 p-1"
|
||||
>
|
||||
<ImBin size={16} />
|
||||
<ImBin size={14} className="sm:w-4 sm:h-4" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -415,24 +447,27 @@ const RecipientCards = ({
|
|||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="p-6 text-center text-gray-500 font-medium text-sm">
|
||||
<div className="p-4 sm:p-6 text-center text-gray-500 font-medium text-sm">
|
||||
No Recipients Added
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Responsive Modal */}
|
||||
{signingOrderModal.open && (
|
||||
<div className="fixed top-0 left-0 inset-0 z-50 bg-black/50 backdrop-blur-sm flex justify-center items-center">
|
||||
<div className="flex-col relative justify-center items-center max-w-[80%] max-h-[60vh] h-full overflow-auto">
|
||||
<div className="p-2 rounded-t-lg text-white flex justify-between items-center bg-[var(--primary)]">
|
||||
<p className="font-semibold">Signing Order</p>
|
||||
<div className="fixed top-0 left-0 inset-0 z-50 bg-black/50 backdrop-blur-sm flex justify-center items-center p-4">
|
||||
<div className="flex-col relative justify-center items-center w-full max-w-xs sm:max-w-md md:max-w-lg lg:max-w-2xl xl:max-w-4xl max-h-[80vh] sm:max-h-[70vh] lg:max-h-[60vh] h-full overflow-auto">
|
||||
<div className="p-3 sm:p-4 rounded-t-lg text-white flex justify-between items-center bg-[var(--primary)]">
|
||||
<p className="font-semibold text-sm sm:text-base">Signing Order</p>
|
||||
<div
|
||||
onClick={() => setSigningOrderModal({ ...signingOrderModal, open: false })}
|
||||
className="text-xl cursor-pointer hover:text-gray-200 transition-all"
|
||||
className="text-xl sm:text-2xl cursor-pointer hover:text-gray-200 transition-all p-1"
|
||||
>
|
||||
<IoCloseOutline />
|
||||
</div>
|
||||
</div>
|
||||
<SigningOrderDiagram signers={recipients} />
|
||||
<div className="bg-white rounded-b-lg">
|
||||
<SigningOrderDiagram signers={recipients} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -90,15 +90,26 @@ const SelectedDocuments = ({ transactionTemplateToggle }) => {
|
|||
|
||||
// Get proper Tailwind class names for upload card span
|
||||
const getUploadCardSpanClass = () => {
|
||||
switch (docCount) {
|
||||
case 0: return 'col-span-5'; // Full width when no docs
|
||||
case 1: return 'col-span-4'; // 4 cols for upload, 1 for doc
|
||||
case 2: return 'col-span-3'; // 3 cols for upload, 2 for docs
|
||||
case 3: return 'col-span-2'; // 2 cols for upload, 3 for docs
|
||||
case 4: return 'col-span-1'; // 1 col for upload, 4 for docs
|
||||
default: return 'col-span-1'; // 1 col for upload, rest for docs
|
||||
}
|
||||
};
|
||||
if (docCount === 0) {
|
||||
// Upload card takes all columns only when no docs
|
||||
return "col-span-1 sm:col-span-2 md:col-span-3 lg:col-span-4 xl:col-span-5";
|
||||
}
|
||||
|
||||
switch (docCount) {
|
||||
case 1:
|
||||
return "col-span-1 sm:col-span-1 md:col-span-2 lg:col-span-3 xl:col-span-4";
|
||||
case 2:
|
||||
return "col-span-1 sm:col-span-1 md:col-span-1 lg:col-span-2 xl:col-span-3";
|
||||
case 3:
|
||||
return "col-span-1 sm:col-span-1 md:col-span-1 lg:col-span-1 xl:col-span-2";
|
||||
case 4:
|
||||
return "col-span-1"; // balanced
|
||||
default:
|
||||
return "col-span-1";
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
// Calculate how many documents should be in the first row
|
||||
const getFirstRowDocCount = () => {
|
||||
|
|
@ -113,150 +124,153 @@ const SelectedDocuments = ({ transactionTemplateToggle }) => {
|
|||
return (
|
||||
<>
|
||||
{/* Upload Card First */}
|
||||
<div className='space-y-3'>
|
||||
<div id='upload-doc-step-one' className="grid grid-cols-5 gap-2">
|
||||
{/* Upload Document Card - Always First */}
|
||||
<div className="space-y-3">
|
||||
<div
|
||||
onClick={() => setModalOpen(true)}
|
||||
className={`${getUploadCardSpanClass()} cursor-pointer h-[170px] flex flex-col items-center justify-center border-2 border-dashed border-gray-300 rounded-xl bg-white hover:bg-gray-50 transition shadow-sm hover:shadow-md`}
|
||||
id="upload-doc-step-one"
|
||||
className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-5 gap-2"
|
||||
>
|
||||
<FaPlus className="text-[var(--primary)] text-3xl mb-2" />
|
||||
<p className="text-sm text-gray-600 text-center px-2">Upload Document</p>
|
||||
{/* Upload Document Card */}
|
||||
<div
|
||||
onClick={() => setModalOpen(true)}
|
||||
className={`${getUploadCardSpanClass()} cursor-pointer h-[170px] flex flex-col items-center justify-center border-2 border-dashed border-gray-300 rounded-xl bg-white hover:bg-gray-50 transition shadow-sm hover:shadow-md`}
|
||||
>
|
||||
<FaPlus className="text-[var(--primary)] text-3xl mb-2" />
|
||||
<p className="text-sm text-gray-600 text-center px-2">Upload Document</p>
|
||||
</div>
|
||||
|
||||
{/* First Row Documents */}
|
||||
<ReactSortable
|
||||
className="contents"
|
||||
list={documents.slice(0, firstRowDocCount).map((doc) => ({ ...doc }))}
|
||||
setList={(newState) => {
|
||||
const updatedDocs = [...newState, ...documents.slice(firstRowDocCount)];
|
||||
dispatch(setDocuments(updatedDocs));
|
||||
}}
|
||||
handle=".drag-handle"
|
||||
animation={200}
|
||||
ghostClass="sortable-ghost"
|
||||
disabled={false}
|
||||
>
|
||||
{documents.slice(0, firstRowDocCount).map((doc) => (
|
||||
<div key={doc.id} className="col-span-1 mx-auto">
|
||||
<DocumentCard
|
||||
id={doc.id}
|
||||
name={doc.name}
|
||||
isCompleted={
|
||||
"isCompleted" in doc ||
|
||||
("status" in doc && doc.status === "UPLOADED")
|
||||
? true
|
||||
: false
|
||||
}
|
||||
transactionTemplateToggle={transactionTemplateToggle}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</ReactSortable>
|
||||
</div>
|
||||
|
||||
{/* First Row Documents */}
|
||||
<ReactSortable
|
||||
className="contents" // Use 'contents' to make children participate in parent grid
|
||||
list={documents.slice(0, firstRowDocCount).map(doc => ({ ...doc }))}
|
||||
setList={(newState) => {
|
||||
const updatedDocs = [
|
||||
...newState,
|
||||
...documents.slice(firstRowDocCount)
|
||||
];
|
||||
dispatch(setDocuments(updatedDocs));
|
||||
}}
|
||||
handle=".drag-handle"
|
||||
animation={200}
|
||||
ghostClass="sortable-ghost"
|
||||
disabled={false}
|
||||
>
|
||||
{documents.slice(0, firstRowDocCount).map((doc) => (
|
||||
<div key={doc.id} className="col-span-1">
|
||||
<DocumentCard
|
||||
id={doc.id}
|
||||
name={doc.name}
|
||||
isCompleted={
|
||||
("isCompleted" in doc || ("status" in doc && doc.status === "UPLOADED"))
|
||||
? true
|
||||
: false
|
||||
}
|
||||
transactionTemplateToggle={transactionTemplateToggle}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</ReactSortable>
|
||||
</div>
|
||||
{/* Additional Rows */}
|
||||
{remainingDocs > 0 && (
|
||||
<ReactSortable
|
||||
className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-5 gap-2"
|
||||
list={documents.slice(firstRowDocCount).map((doc) => ({ ...doc }))}
|
||||
setList={(newState) => {
|
||||
const updatedDocs = [
|
||||
...documents.slice(0, firstRowDocCount),
|
||||
...newState,
|
||||
];
|
||||
dispatch(setDocuments(updatedDocs));
|
||||
}}
|
||||
handle=".drag-handle"
|
||||
animation={200}
|
||||
ghostClass="sortable-ghost"
|
||||
disabled={false}
|
||||
>
|
||||
{documents.slice(firstRowDocCount).map((doc) => (
|
||||
<div key={doc.id} className="col-span-1 mx-auto">
|
||||
<DocumentCard
|
||||
id={doc.id}
|
||||
name={doc.name}
|
||||
isCompleted={
|
||||
"isCompleted" in doc ||
|
||||
("status" in doc && doc.status === "UPLOADED")
|
||||
? true
|
||||
: false
|
||||
}
|
||||
transactionTemplateToggle={transactionTemplateToggle}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</ReactSortable>
|
||||
)}
|
||||
|
||||
{/* Additional Rows - Remaining Documents (5th, 6th, 7th, etc.) */}
|
||||
{remainingDocs > 0 && (
|
||||
<ReactSortable
|
||||
className="grid grid-cols-5 gap-2"
|
||||
list={documents.slice(firstRowDocCount).map(doc => ({ ...doc }))}
|
||||
setList={(newState) => {
|
||||
const updatedDocs = [
|
||||
...documents.slice(0, firstRowDocCount),
|
||||
...newState
|
||||
];
|
||||
dispatch(setDocuments(updatedDocs));
|
||||
}}
|
||||
handle=".drag-handle"
|
||||
animation={200}
|
||||
ghostClass="sortable-ghost"
|
||||
disabled={false}
|
||||
>
|
||||
{documents.slice(firstRowDocCount).map((doc) => (
|
||||
<div key={doc.id} className="col-span-1">
|
||||
<DocumentCard
|
||||
id={doc.id}
|
||||
name={doc.name}
|
||||
isCompleted={
|
||||
("isCompleted" in doc || ("status" in doc && doc.status === "UPLOADED"))
|
||||
? true
|
||||
: false
|
||||
}
|
||||
transactionTemplateToggle={transactionTemplateToggle}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</ReactSortable>
|
||||
)}
|
||||
{/* Modal */}
|
||||
{isModalOpen && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-100/60 backdrop-blur-sm px-2 sm:px-4">
|
||||
<div className="bg-white w-full h-full sm:max-w-5xl sm:h-[500px] rounded-xl shadow-lg flex flex-col sm:flex-row overflow-hidden relative">
|
||||
{/* Close Button */}
|
||||
<button
|
||||
className="absolute top-2 right-2 text-gray-500 hover:text-red-500 transition text-xl bg-white rounded-full p-2"
|
||||
onClick={() => setModalOpen(false)}
|
||||
>
|
||||
<IoMdClose />
|
||||
</button>
|
||||
|
||||
|
||||
{/* Modal */}
|
||||
{isModalOpen && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-100/60 backdrop-blur-sm px-4">
|
||||
<div className="bg-white w-full max-w-5xl h-[500px] rounded-xl shadow-lg flex overflow-hidden relative">
|
||||
{/* Close Button */}
|
||||
<button
|
||||
className="absolute top-2 right-2 text-gray-500 hover:text-red-500 transition text-xl bg-white rounded-full p-2"
|
||||
onClick={() => setModalOpen(false)}
|
||||
>
|
||||
<IoMdClose />
|
||||
</button>
|
||||
|
||||
{/* Sidebar Tabs */}
|
||||
<div className="w-1/4 bg-gray-100 p-4 flex flex-col gap-2 border-r border-gray-200">
|
||||
{tabs.map(tab => (
|
||||
<button
|
||||
key={tab.name}
|
||||
className={`flex items-center gap-2 p-3 rounded-md text-sm font-medium transition ${activeTab === tab.name
|
||||
? 'bg-white shadow text-[var(--primary)]'
|
||||
: 'hover:bg-gray-200 text-gray-600'
|
||||
}`}
|
||||
onClick={() => setActiveTab(tab.name)}
|
||||
>
|
||||
{tab.icon} {tab.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Modal Content */}
|
||||
<div className="w-3/4 p-6 overflow-y-auto">
|
||||
{activeTab === 'Upload' && (
|
||||
<div
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
onDragOver={(e) => e.preventDefault()}
|
||||
onDrop={handleDrop}
|
||||
className="flex flex-col items-center justify-center h-full border-2 border-dashed border-gray-300 rounded-xl p-6 text-center cursor-pointer hover:bg-gray-50"
|
||||
>
|
||||
<FaCloudUploadAlt className="text-5xl text-[var(--primary)] mb-4" />
|
||||
<p className="text-sm text-gray-500 mb-2">Drag & drop files here or</p>
|
||||
<button className="px-5 py-2 text-sm bg-[var(--primary)] text-white rounded-md hover:scale-103 cursor-pointer transition-all">
|
||||
Browse Files
|
||||
{/* Sidebar Tabs */}
|
||||
<div className="w-full sm:w-1/4 bg-gray-100 p-4 flex flex-row sm:flex-col gap-2 border-b sm:border-b-0 sm:border-r border-gray-200 overflow-x-auto sm:overflow-hidden">
|
||||
{tabs.map((tab) => (
|
||||
<button
|
||||
key={tab.name}
|
||||
className={`flex items-center gap-2 p-3 rounded-md text-sm font-medium transition whitespace-nowrap ${activeTab === tab.name
|
||||
? "bg-white shadow text-[var(--primary)]"
|
||||
: "hover:bg-gray-200 text-gray-600"
|
||||
}`}
|
||||
onClick={() => setActiveTab(tab.name)}
|
||||
>
|
||||
{tab.icon} {tab.name}
|
||||
</button>
|
||||
<input
|
||||
type="file"
|
||||
ref={fileInputRef}
|
||||
className="hidden"
|
||||
onChange={handleFileChange}
|
||||
accept=".pdf,.doc,.docx,.jpg,.png,.jpeg,.txt"
|
||||
multiple
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{activeTab !== 'Upload' && (
|
||||
<div className="flex items-center justify-center h-full text-gray-400 text-sm">
|
||||
<p>{activeTab} integration coming soon...</p>
|
||||
</div>
|
||||
)}
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Modal Content */}
|
||||
<div className="w-full sm:w-3/4 p-4 sm:p-6 overflow-y-auto">
|
||||
{activeTab === "Upload" && (
|
||||
<div
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
onDragOver={(e) => e.preventDefault()}
|
||||
onDrop={handleDrop}
|
||||
className="flex flex-col items-center justify-center h-full border-2 border-dashed border-gray-300 rounded-xl p-6 text-center cursor-pointer hover:bg-gray-50"
|
||||
>
|
||||
<FaCloudUploadAlt className="text-5xl text-[var(--primary)] mb-4" />
|
||||
<p className="text-sm text-gray-500 mb-2">
|
||||
Drag & drop files here or
|
||||
</p>
|
||||
<button className="px-5 py-2 text-sm bg-[var(--primary)] text-white rounded-md hover:scale-103 cursor-pointer transition-all">
|
||||
Browse Files
|
||||
</button>
|
||||
<input
|
||||
type="file"
|
||||
ref={fileInputRef}
|
||||
className="hidden"
|
||||
onChange={handleFileChange}
|
||||
accept=".pdf,.doc,.docx,.jpg,.png,.jpeg,.txt"
|
||||
multiple
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{activeTab !== "Upload" && (
|
||||
<div className="flex items-center justify-center h-full text-gray-400 text-sm">
|
||||
<p>{activeTab} integration coming soon...</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue