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 */}
Funds Marquee Logo

Reference: {reference}

Date: {date}

Banking and Mortgage Consultancy Services Agreement

اتفاقية استشارات الخدمات المصرفية والرهن العقاري

{/* Agreement Content */}
{/* Parties Section (You can create a separate PartyDetails component) */}
{/* ... */}
{/* Articles Section */}
{/* Article 1 (Create an Article component) */}

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 (You can make this an Article component as well) */}

Article 4: Fees and Payment Structure

Total Fee: AED {fees}

Payment Schedule:

    {paymentSchedule.map((item, index) => (
  • {item}
  • ))}
{/* ...Arabic version */}
{/* Signature Section (Create a SignatureSection Component) */}

The Client

{clientName}

{/* You might want to display an actual signature image here */}

Signature

{/* ...Arabic version */}
{/* Footer */}
Funds Marquee Banking Consultant LLC Page 1 of 1
); }; export default AgreementEmbed;

We use cookies, By using our website, you agree to use the cookies.