import React, { useState, useEffect } from 'react';
import { Card } from '@/components/ui/card';
const AgreementEmbed = ({ agreementId }) => {
const [agreementData, setAgreementData] = useState(null);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
const fetchAgreement = async () => {
setIsLoading(true);
setError(null);
try {
const response = await fetch(`/api/agreements/${agreementId}`);
if (!response.ok) {
throw new Error('Failed to fetch agreement');
}
const data = await response.json();
setAgreementData(data);
} catch (error) {
setError(error.message);
} finally {
setIsLoading(false);
}
};
fetchAgreement();
}, [agreementId]);
if (isLoading) {
return
Loading agreement...
;
}
if (error) {
return Error: {error}
;
}
// Destructure agreementData for easier access (adjust based on your API response)
const {
reference,
date,
clientName,
clientSignature,
fees,
paymentSchedule
} = agreementData;
return (
{/* Header Section */}
{/* Agreement Content */}
);
};
export default AgreementEmbed;Reference: {reference}
Date: {date}
Banking and Mortgage Consultancy Services Agreement
اتفاقية استشارات الخدمات المصرفية والرهن العقاري
{/* Parties Section (You can create a separate PartyDetails component) */}
{/* Footer */}
{/* ... */}
{/* Articles Section */}
{/* Article 1 (Create an Article component) */}
{/* Article 4 - Fees (You can make this an Article component as well) */}
{/* ...Arabic version */}
{/* Signature Section (Create a SignatureSection Component) */}
{/* ...Arabic version */}
Article 1: Appointment
The Client hereby employs the Consultant, who agrees to function as a consultant to the Client, to provide the consulting services specified in this Agreement.
المادة 1: التعيين
يوظف العميلُ بموجب هذه الاتفاقية المستشار، ويوافق المستشار على تقديم الخدمات الاستشارية والمحدَّدة في المادة الثانية من هذه الاتفاقية.
Article 4: Fees and Payment Structure
Total Fee: AED {fees}
Payment Schedule:
-
{paymentSchedule.map((item, index) => (
- {item} ))}
The Client
{clientName}
{/* You might want to display an actual signature image here */}Signature
Funds Marquee Banking Consultant LLC
Page 1 of 1
We use cookies, By using our website, you agree to use the cookies.