feat: Implement a new testimonial submission page and service, and update related profile and settings components.

src/app/(agent)/agent/dashboard/page.tsx

@@ -18,35 +18,12 @@ import {
 import { agentsService, AgentProfile, FieldValueResponse } from '@/services/agents.service';
 import { connectionRequestsService } from '@/services/connection-requests.service';
 import { uploadService } from '@/services/upload.service';
+import { testimonialsService, Testimonial } from '@/services/testimonials.service';
 import { mapFieldValuesToExperience, mapFieldValuesToProfileCard, mapFieldValuesToAvailability, mapFieldValuesToSpecializationFields, mapFieldValuesToContactInfo, ExperienceData, ProfileCardData, AvailabilityData, SpecializationFieldsData, ContactInfoData } from '@/utils/profileDataMapper';
 
 // Mock data for sections not yet available from API
 const mockData = {
   preferredWorkEnvironment: 'Preferred work environment includes on-site property visits, in-depth market research, client consultations, property tours, and active involvement in negotiations to ensure the best outcomes',
-  testimonialHighlight: "The most amazing experience I've had as a real estate professional is helping a family secure their dream home and seeing their happiness when they received the keys.",
-  testimonials: [
-    {
-      id: 1,
-      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean commodo ligula eget dolor. Sed dignissim, nisl eget tincidunt vulputate, lacus justo bibendum ipsum, vitae tempus risus lorem at nunc. Integer sed arcu vitae risus feugiat vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.',
-      author: 'Kenedy Kenney',
-      role: 'Chief Operations Officer',
-      rating: 5,
-    },
-    {
-      id: 2,
-      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean commodo ligula eget dolor. Sed dignissim, nisl eget tincidunt vulputate, lacus justo bibendum ipsum, vitae tempus risus lorem at nunc. Integer sed arcu vitae risus feugiat vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.',
-      author: 'Kenedy Kenney',
-      role: 'Chief Operations Officer',
-      rating: 5,
-    },
-    {
-      id: 3,
-      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean commodo ligula eget dolor. Sed dignissim, nisl eget tincidunt vulputate, lacus justo bibendum ipsum, vitae tempus risus lorem at nunc. Integer sed arcu vitae risus feugiat vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.',
-      author: 'Kenedy Kenney',
-      role: 'Chief Operations Officer',
-      rating: 5,
-    },
-  ],
 };
 
 // Default experience data when no field values are available
@@ -101,6 +78,7 @@ export default function AgentDashboard() {
   const [isAvailable, setIsAvailable] = useState(true);
   const [isTogglingAvailability, setIsTogglingAvailability] = useState(false);
   const [pendingRequestCount, setPendingRequestCount] = useState(0);
+  const [testimonials, setTestimonials] = useState<{ id: string; text: string; author: string; role: string; rating: number }[]>([]);
 
   const defaultImage = '/assets/demo_images/8f017153a7b4a239a4f0691234ef97dd55092282.jpg';
 
@@ -118,11 +96,12 @@ export default function AgentDashboard() {
         setLoading(true);
         setError(null);
 
-        // Fetch profile, field values, and pending request count in parallel
-        const [profile, fieldValuesResponse, requestCounts] = await Promise.all([
+        // Fetch profile, field values, pending request count, and testimonials in parallel
+        const [profile, fieldValuesResponse, requestCounts, testimonialsData] = await Promise.all([
           agentsService.getMyProfile(),
           agentsService.getFieldValues(),
           connectionRequestsService.getRequestCounts().catch(() => null),
+          testimonialsService.getMyTestimonials('latest').catch(() => [] as Testimonial[]),
         ]);
 
         setAgentProfile(profile);
@@ -132,6 +111,17 @@ export default function AgentDashboard() {
           setPendingRequestCount(requestCounts.pending);
         }
 
+        // Map testimonials for TestimonialsSection (latest 3)
+        setTestimonials(
+          testimonialsData.slice(0, 3).map((t) => ({
+            id: t.id,
+            text: t.text,
+            author: t.authorName,
+            role: t.authorRole,
+            rating: t.rating,
+          }))
+        );
+
         // Map field values to experience data structure
         const mappedExperience = mapFieldValuesToExperience(fieldValuesResponse.fieldValues);
         setExperienceData(mappedExperience);
@@ -404,25 +394,27 @@ export default function AgentDashboard() {
               }
               content={<p className="font-serif font-semibold text-[14px] leading-[19px] text-[#00293D]">{mockData.preferredWorkEnvironment}</p>}
             />
-            <InfoCard
-              title=""
-              icon={
-                <Image
-                  src="/assets/icons/testimonial-star-icon.svg"
-                  alt="Testimonial"
-                  width={28}
-                  height={28}
-                />
-              }
-              content={<p className="text-[14px] font-semibold font-serif leading-[19px] text-center text-[#00293D]">&ldquo;{mockData.testimonialHighlight}&rdquo;</p>}
-            />
+            {testimonials.length > 0 && (
+              <InfoCard
+                title=""
+                icon={
+                  <Image
+                    src="/assets/icons/testimonial-star-icon.svg"
+                    alt="Testimonial"
+                    width={28}
+                    height={28}
+                  />
+                }
+                content={<p className="text-[14px] font-semibold font-serif leading-[19px] text-center text-[#00293D]">&ldquo;{testimonials[0].text.length > 150 ? testimonials[0].text.substring(0, 150) + '...' : testimonials[0].text}&rdquo;</p>}
+              />
+            )}
           </div>
 
           {/* Specialization Section */}
           <SpecializationSection fieldsData={specializationFieldsData} />
 
           {/* Testimonials Section */}
-          <TestimonialsSection testimonials={mockData.testimonials} />
+          <TestimonialsSection testimonials={testimonials} />
         </div>
       </div>
 

src/app/(user)/user/profile/[id]/page.tsx

@@ -19,35 +19,12 @@ import { ConnectRequestModal } from '@/components/modals';
 import { agentsService, AgentProfile, FieldValueResponse } from '@/services/agents.service';
 import { connectionRequestsService, ConnectionStatus } from '@/services/connection-requests.service';
 import { uploadService } from '@/services/upload.service';
+import { testimonialsService, Testimonial } from '@/services/testimonials.service';
 import { mapFieldValuesToExperience, mapFieldValuesToSpecializationFields, mapFieldValuesToProfileCard, mapFieldValuesToContactInfo, mapFieldValuesToAvailability, ExperienceData, SpecializationFieldsData, ProfileCardData, ContactInfoData, AvailabilityData } from '@/utils/profileDataMapper';
 
 // Mock data for sections not yet available from API
 const mockData = {
   preferredWorkEnvironment: 'Preferred work environment includes on-site property visits, in-depth market research, client consultations, property tours, and active involvement in negotiations to ensure the best outcomes',
-  testimonialHighlight: "The most amazing experience I've had as a real estate professional is helping a family secure their dream home and seeing their happiness when they received the keys.",
-  testimonials: [
-    {
-      id: 1,
-      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean commodo ligula eget dolor. Sed dignissim, nisl eget tincidunt vulputate, lacus justo bibendum ipsum, vitae tempus risus lorem at nunc. Integer sed arcu vitae risus feugiat vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.',
-      author: 'Kenedy Kenney',
-      role: 'Chief Operations Officer',
-      rating: 5,
-    },
-    {
-      id: 2,
-      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean commodo ligula eget dolor. Sed dignissim, nisl eget tincidunt vulputate, lacus justo bibendum ipsum, vitae tempus risus lorem at nunc. Integer sed arcu vitae risus feugiat vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.',
-      author: 'Kenedy Kenney',
-      role: 'Chief Operations Officer',
-      rating: 5,
-    },
-    {
-      id: 3,
-      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean commodo ligula eget dolor. Sed dignissim, nisl eget tincidunt vulputate, lacus justo bibendum ipsum, vitae tempus risus lorem at nunc. Integer sed arcu vitae risus feugiat vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.',
-      author: 'Kenedy Kenney',
-      role: 'Chief Operations Officer',
-      rating: 5,
-    },
-  ],
 };
 
 // Default experience data when no field values are available
@@ -102,6 +79,8 @@ export default function AgentProfileView() {
   const [imageError, setImageError] = useState(false);
   const [avatarUrl, setAvatarUrl] = useState<string | null>(null);
 
+  const [testimonials, setTestimonials] = useState<{ id: string; text: string; author: string; role: string; rating: number }[]>([]);
+
   // Connect modal state
   const [showConnectModal, setShowConnectModal] = useState(false);
   const [connectionStatus, setConnectionStatus] = useState<ConnectionStatus | null>(null);
@@ -125,10 +104,11 @@ export default function AgentProfileView() {
         setLoading(true);
         setError(null);
 
-        // Fetch profile and field values in parallel
-        const [profile, fieldValuesResponse] = await Promise.all([
+        // Fetch profile, field values, and testimonials in parallel
+        const [profile, fieldValuesResponse, testimonialsData] = await Promise.all([
           agentsService.getAgentById(id),
           agentsService.getFieldValuesByAgentId(id),
+          testimonialsService.getAgentTestimonials(id).catch(() => [] as Testimonial[]),
         ]);
 
         setAgentProfile(profile);
@@ -154,6 +134,17 @@ export default function AgentProfileView() {
         const mappedAvailability = mapFieldValuesToAvailability(fieldValuesResponse.fieldValues);
         setAvailabilityData(mappedAvailability);
 
+        // Map testimonials for TestimonialsSection
+        setTestimonials(
+          testimonialsData.map((t) => ({
+            id: t.id,
+            text: t.text,
+            author: t.authorName,
+            role: t.authorRole,
+            rating: t.rating,
+          }))
+        );
+
         // If avatar is an S3 key, fetch presigned URL
         if (profile.avatar && isS3Key(profile.avatar)) {
           try {
@@ -399,25 +390,27 @@ export default function AgentProfileView() {
               }
               content={<p className="font-serif font-semibold text-[14px] leading-[19px] text-[#00293D]">{mockData.preferredWorkEnvironment}</p>}
             />
-            <InfoCard
-              title=""
-              icon={
-                <Image
-                  src="/assets/icons/testimonial-star-icon.svg"
-                  alt="Testimonial"
-                  width={28}
-                  height={28}
-                />
-              }
-              content={<p className="text-[14px] font-semibold font-serif leading-[19px] text-center text-[#00293D]">&ldquo;{mockData.testimonialHighlight}&rdquo;</p>}
-            />
+            {testimonials.length > 0 && (
+              <InfoCard
+                title=""
+                icon={
+                  <Image
+                    src="/assets/icons/testimonial-star-icon.svg"
+                    alt="Testimonial"
+                    width={28}
+                    height={28}
+                  />
+                }
+                content={<p className="text-[14px] font-semibold font-serif leading-[19px] text-center text-[#00293D]">&ldquo;{testimonials[0].text.length > 150 ? testimonials[0].text.substring(0, 150) + '...' : testimonials[0].text}&rdquo;</p>}
+              />
+            )}
           </div>
 
           {/* Specialization Section */}
           <SpecializationSection fieldsData={specializationFieldsData} />
 
           {/* Testimonials Section */}
-          <TestimonialsSection testimonials={mockData.testimonials} />
+          <TestimonialsSection testimonials={testimonials} />
         </div>
       </div>
 

src/app/testimonials/[token]/page.tsx

@@ -0,0 +1,222 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useParams } from 'next/navigation';
+import Image from 'next/image';
+import { testimonialsService, AgentByTokenResponse } from '@/services/testimonials.service';
+
+const ROLE_OPTIONS = ['Home Buyer', 'Home Seller', 'Investor', 'Renter', 'Landlord', 'Other'];
+
+export default function SubmitTestimonialPage() {
+  const params = useParams();
+  const token = params.token as string;
+
+  const [agent, setAgent] = useState<AgentByTokenResponse | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [invalidToken, setInvalidToken] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+
+  const [rating, setRating] = useState(0);
+  const [text, setText] = useState('');
+  const [authorName, setAuthorName] = useState('');
+  const [authorRole, setAuthorRole] = useState('');
+  const [errors, setErrors] = useState<Record<string, string>>({});
+
+  useEffect(() => {
+    const fetchAgent = async () => {
+      try {
+        const agentData = await testimonialsService.getAgentByToken(token);
+        setAgent(agentData);
+      } catch {
+        setInvalidToken(true);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchAgent();
+  }, [token]);
+
+  const validate = () => {
+    const newErrors: Record<string, string> = {};
+    if (rating === 0) newErrors.rating = 'Please select a rating';
+    if (!text.trim()) newErrors.text = 'Please write your testimonial';
+    if (!authorName.trim()) newErrors.authorName = 'Please enter your name';
+    if (!authorRole) newErrors.authorRole = 'Please select your role';
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!validate()) return;
+
+    try {
+      setSubmitting(true);
+      await testimonialsService.submitTestimonial(token, {
+        rating,
+        text: text.trim(),
+        authorName: authorName.trim(),
+        authorRole,
+      });
+      setSubmitted(true);
+    } catch (err) {
+      console.error('Failed to submit testimonial:', err);
+      setErrors({ submit: 'Failed to submit. Please try again.' });
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-[#f5f5f5] flex items-center justify-center">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#E58625]"></div>
+      </div>
+    );
+  }
+
+  if (invalidToken) {
+    return (
+      <div className="min-h-screen bg-[#f5f5f5] flex items-center justify-center px-4">
+        <div className="bg-white rounded-[20px] p-8 max-w-md text-center shadow-[0px_10px_20px_rgba(217,217,217,0.5)]">
+          <div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
+            <Image src="/assets/icons/caution-icon.svg" alt="Error" width={24} height={24} />
+          </div>
+          <h2 className="text-[20px] font-bold font-fractul text-[#00293D] mb-2">Invalid Link</h2>
+          <p className="text-[14px] font-serif text-[#00293D]/70">
+            This testimonial link is invalid or has expired. Please contact the agent for a new link.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  if (submitted) {
+    return (
+      <div className="min-h-screen bg-[#f5f5f5] flex items-center justify-center px-4">
+        <div className="bg-white rounded-[20px] p-8 max-w-md text-center shadow-[0px_10px_20px_rgba(217,217,217,0.5)]">
+          <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
+            <Image src="/assets/icons/verified-icon.svg" alt="Success" width={24} height={24} />
+          </div>
+          <h2 className="text-[20px] font-bold font-fractul text-[#00293D] mb-2">Thank You!</h2>
+          <p className="text-[14px] font-serif text-[#00293D]/70">
+            Your testimonial has been submitted successfully.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  const agentName = [agent?.firstName, agent?.lastName].filter(Boolean).join(' ') || 'Agent';
+
+  return (
+    <div className="min-h-screen bg-[#f5f5f5] py-8 px-4">
+      <div className="max-w-lg mx-auto">
+        {/* Agent Info */}
+        <div className="bg-white rounded-[20px] p-6 mb-6 text-center shadow-[0px_10px_20px_rgba(217,217,217,0.5)]">
+          <h1 className="text-[24px] font-bold font-fractul text-[#00293D] mb-2">
+            Leave a Testimonial
+          </h1>
+          <p className="text-[14px] font-serif text-[#00293D]/70">
+            for <span className="font-bold">{agentName}</span>
+            {agent?.agentType?.name && <span> · {agent.agentType.name}</span>}
+          </p>
+        </div>
+
+        {/* Form */}
+        <form onSubmit={handleSubmit} className="bg-white rounded-[20px] p-6 shadow-[0px_10px_20px_rgba(217,217,217,0.5)]">
+          {/* Star Rating */}
+          <div className="mb-6">
+            <label className="block font-fractul font-bold text-[14px] text-[#00293D] mb-3">
+              Rating *
+            </label>
+            <div className="flex gap-2">
+              {[1, 2, 3, 4, 5].map((star) => (
+                <button
+                  key={star}
+                  type="button"
+                  onClick={() => setRating(star)}
+                  className="transition-transform hover:scale-110"
+                >
+                  <Image
+                    src={star <= rating ? '/assets/icons/star-filled-icon.svg' : '/assets/icons/star-empty-icon.svg'}
+                    alt={`${star} star`}
+                    width={32}
+                    height={32}
+                  />
+                </button>
+              ))}
+            </div>
+            {errors.rating && <p className="text-red-500 text-[12px] mt-1">{errors.rating}</p>}
+          </div>
+
+          {/* Testimonial Text */}
+          <div className="mb-6">
+            <label className="block font-fractul font-bold text-[14px] text-[#00293D] mb-2">
+              Your Testimonial *
+            </label>
+            <textarea
+              value={text}
+              onChange={(e) => setText(e.target.value)}
+              placeholder="Share your experience working with this agent..."
+              rows={5}
+              maxLength={2000}
+              className="w-full border border-[#00293D]/10 rounded-[10px] p-4 font-serif text-[14px] text-[#00293D] placeholder:text-[#00293D]/30 resize-none focus:outline-none focus:border-[#E58625]"
+            />
+            {errors.text && <p className="text-red-500 text-[12px] mt-1">{errors.text}</p>}
+          </div>
+
+          {/* Author Name */}
+          <div className="mb-6">
+            <label className="block font-fractul font-bold text-[14px] text-[#00293D] mb-2">
+              Your Name *
+            </label>
+            <input
+              type="text"
+              value={authorName}
+              onChange={(e) => setAuthorName(e.target.value)}
+              placeholder="Enter your name"
+              maxLength={100}
+              className="w-full border border-[#00293D]/10 rounded-[10px] p-4 font-serif text-[14px] text-[#00293D] placeholder:text-[#00293D]/30 focus:outline-none focus:border-[#E58625]"
+            />
+            {errors.authorName && <p className="text-red-500 text-[12px] mt-1">{errors.authorName}</p>}
+          </div>
+
+          {/* Author Role */}
+          <div className="mb-8">
+            <label className="block font-fractul font-bold text-[14px] text-[#00293D] mb-2">
+              Your Role *
+            </label>
+            <select
+              value={authorRole}
+              onChange={(e) => setAuthorRole(e.target.value)}
+              className="w-full border border-[#00293D]/10 rounded-[10px] p-4 font-serif text-[14px] text-[#00293D] focus:outline-none focus:border-[#E58625] bg-white"
+            >
+              <option value="">Select your role</option>
+              {ROLE_OPTIONS.map((role) => (
+                <option key={role} value={role}>{role}</option>
+              ))}
+            </select>
+            {errors.authorRole && <p className="text-red-500 text-[12px] mt-1">{errors.authorRole}</p>}
+          </div>
+
+          {/* Error message */}
+          {errors.submit && (
+            <p className="text-red-500 text-[14px] text-center mb-4">{errors.submit}</p>
+          )}
+
+          {/* Submit Button */}
+          <button
+            type="submit"
+            disabled={submitting}
+            className="w-full bg-[#e58625] text-white font-fractul font-bold text-[16px] py-4 rounded-[15px] hover:bg-[#d47920] transition-colors disabled:opacity-50"
+          >
+            {submitting ? 'Submitting...' : 'Submit Testimonial'}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}