diff --git a/src/app/(agent)/agent/dashboard/component/ExperienceSection.tsx b/src/app/(agent)/agent/dashboard/component/ExperienceSection.tsx new file mode 100644 index 0000000..e66c653 --- /dev/null +++ b/src/app/(agent)/agent/dashboard/component/ExperienceSection.tsx @@ -0,0 +1,88 @@ +'use client'; + +import { Tag } from './Tag'; + +interface ExperienceData { + years: string; + contracts: string; + licensingAreas: string[]; + expertiseYears: { area: string; years: string }[]; + certifications: { name: string; org: string }[]; +} + +interface ExperienceSectionProps { + experience: ExperienceData; +} + +export function ExperienceSection({ experience }: ExperienceSectionProps) { + return ( +
+

Experience

+
+ {/* Left Column */} +
+
+

Years in Experience

+
    +
  • {experience.years}
    • +
+
+
+

Number of contract coised

+
    +
  • {experience.contracts}
    • +
+
+
+

Licensing & Areas

+
+ {experience.licensingAreas.slice(0, 5).map((area, idx) => ( + + {area} + + ))} + {experience.licensingAreas.length > 5 && ( + + +{experience.licensingAreas.length - 5} More + + )} +
+
+
+ + {/* Divider */} +
+ + {/* Right Column */} +
+
+

Areas in expertise & Years

+
+ {experience.expertiseYears.slice(0, 3).map((item, idx) => ( + + {item.area} – {item.years} + + ))} + {experience.expertiseYears.length > 3 && ( + + +{experience.expertiseYears.length - 3}More + + )} +
+
+
+

Certifications

+
    + {experience.certifications.map((cert, idx) => ( +
  • + • {cert.name} +

    {cert.org}

    +
    • + ))} +
+
+
+
+
+ ); +} diff --git a/src/app/(agent)/agent/dashboard/component/InfoCard.tsx b/src/app/(agent)/agent/dashboard/component/InfoCard.tsx new file mode 100644 index 0000000..7c5073e --- /dev/null +++ b/src/app/(agent)/agent/dashboard/component/InfoCard.tsx @@ -0,0 +1,17 @@ +'use client'; + +interface InfoCardProps { + title: string; + content: React.ReactNode; + icon: React.ReactNode; +} + +export function InfoCard({ title, content, icon }: InfoCardProps) { + return ( +
+
{icon}
+ {title &&

{title}

} +
{content}
+
+ ); +} diff --git a/src/app/(agent)/agent/dashboard/component/ProfileHeader.tsx b/src/app/(agent)/agent/dashboard/component/ProfileHeader.tsx new file mode 100644 index 0000000..911cdee --- /dev/null +++ b/src/app/(agent)/agent/dashboard/component/ProfileHeader.tsx @@ -0,0 +1,135 @@ +'use client'; + +import Image from 'next/image'; +import { Button } from '@/components/ui/Button'; +import { Tag } from './Tag'; + +interface ProfileHeaderProps { + name: string; + isVerified: boolean; + title: string; + location: string; + memberSince: string; + bio: string; + expertise: string[]; +} + +export function ProfileHeader({ + name, + isVerified, + title, + location, + memberSince, + bio, + expertise, +}: ProfileHeaderProps) { + const [firstName, lastName] = name.split(' '); + + return ( +
+ {/* Name and Actions Row */} +
+
+ {/* Name and Verification */} +
+

+ {firstName}{' '} + {lastName} +

+ {isVerified && ( + <> + Verified + + (Verified Expert) + + + )} + +
+ + {/* Title */} +

{title}

+ + {/* Location and Member Since */} +
+ + Location + {location} + + + Calendar + Member Since {memberSince} + +
+
+ + {/* Action Buttons */} +
+ + +
+
+ + {/* Bio */} +

{bio}

+ + {/* Expertise Tags */} +
+

Expertise:

+
+ {expertise.map((tag, idx) => ( + {tag} + ))} +
+
+
+ ); +} diff --git a/src/app/(agent)/agent/dashboard/component/ProfileSidebar.tsx b/src/app/(agent)/agent/dashboard/component/ProfileSidebar.tsx new file mode 100644 index 0000000..5d19d0c --- /dev/null +++ b/src/app/(agent)/agent/dashboard/component/ProfileSidebar.tsx @@ -0,0 +1,79 @@ +'use client'; + +import Image from 'next/image'; + +interface ProfileSidebarProps { + profileImage: string; + email: string; + phone: string; +} + +export function ProfileSidebar({ profileImage, email, phone }: ProfileSidebarProps) { + return ( +
+ {/* Profile Image */} +
+
+ Profile +
+ {/* Edit Icon - Top Right Outside */} + +
+ + {/* Status Buttons */} +
+
+
+ + Available. +
+ +
+
+
+ + Unavailable. +
+ +
+
+ + {/* Contact Info */} +
+
+ Email: + {email} +
+
+ Ph.No: + {phone} + +
+
+
+ ); +} diff --git a/src/app/(agent)/agent/dashboard/component/SpecializationCard.tsx b/src/app/(agent)/agent/dashboard/component/SpecializationCard.tsx new file mode 100644 index 0000000..6c4e706 --- /dev/null +++ b/src/app/(agent)/agent/dashboard/component/SpecializationCard.tsx @@ -0,0 +1,34 @@ +'use client'; + +import Image from 'next/image'; + +interface SpecializationCardProps { + title: string; + items: string[]; + icon: React.ReactNode; +} + +export function SpecializationCard({ title, items, icon }: SpecializationCardProps) { + return ( +
+
{icon}
+

{title}

+
+ {items.map((item, idx) => ( +

+ {item} +

+ ))} +
+ +
+ ); +} diff --git a/src/app/(agent)/agent/dashboard/component/StarRating.tsx b/src/app/(agent)/agent/dashboard/component/StarRating.tsx new file mode 100644 index 0000000..6617645 --- /dev/null +++ b/src/app/(agent)/agent/dashboard/component/StarRating.tsx @@ -0,0 +1,23 @@ +'use client'; + +import Image from 'next/image'; + +interface StarRatingProps { + rating: number; +} + +export function StarRating({ rating }: StarRatingProps) { + return ( +
+ {[1, 2, 3, 4, 5].map((star) => ( + {star + ))} +
+ ); +} diff --git a/src/app/(agent)/agent/dashboard/component/Tag.tsx b/src/app/(agent)/agent/dashboard/component/Tag.tsx new file mode 100644 index 0000000..de1ea9d --- /dev/null +++ b/src/app/(agent)/agent/dashboard/component/Tag.tsx @@ -0,0 +1,22 @@ +'use client'; + +interface TagProps { + children: React.ReactNode; + variant?: 'default' | 'light' | 'orange'; +} + +export function Tag({ children, variant = 'default' }: TagProps) { + return ( + + {children} + + ); +} diff --git a/src/app/(agent)/agent/dashboard/component/TestimonialCard.tsx b/src/app/(agent)/agent/dashboard/component/TestimonialCard.tsx new file mode 100644 index 0000000..1bb3b47 --- /dev/null +++ b/src/app/(agent)/agent/dashboard/component/TestimonialCard.tsx @@ -0,0 +1,40 @@ +'use client'; + +import Image from 'next/image'; +import { StarRating } from './StarRating'; + +interface TestimonialCardProps { + text: string; + author: string; + role: string; + rating: number; +} + +export function TestimonialCard({ text, author, role, rating }: TestimonialCardProps) { + return ( +
+
+
+ “ +
+

I have been working with Lorem .

+
+

{text}

+
+
+ User +
+
+ +

{author}

+

{role}

+
+
+
+ ); +} diff --git a/src/app/(agent)/agent/dashboard/component/index.ts b/src/app/(agent)/agent/dashboard/component/index.ts new file mode 100644 index 0000000..94c0076 --- /dev/null +++ b/src/app/(agent)/agent/dashboard/component/index.ts @@ -0,0 +1,9 @@ +// Dashboard Components +export { StarRating } from './StarRating'; +export { Tag } from './Tag'; +export { InfoCard } from './InfoCard'; +export { SpecializationCard } from './SpecializationCard'; +export { ProfileSidebar } from './ProfileSidebar'; +export { ProfileHeader } from './ProfileHeader'; +export { ExperienceSection } from './ExperienceSection'; +export { TestimonialCard } from './TestimonialCard'; diff --git a/src/app/(agent)/agent/dashboard/page.tsx b/src/app/(agent)/agent/dashboard/page.tsx index 435c9bb..9e59476 100644 --- a/src/app/(agent)/agent/dashboard/page.tsx +++ b/src/app/(agent)/agent/dashboard/page.tsx @@ -2,8 +2,18 @@ import { useSession } from 'next-auth/react'; import Image from 'next/image'; -import { useState } from 'react'; -import { Button } from '@/components/ui/Button'; + +// Import components from component folder +import { + StarRating, + Tag, + InfoCard, + SpecializationCard, + ProfileSidebar, + ProfileHeader, + ExperienceSection, + TestimonialCard, +} from './component'; // Mock agent data - in production, this would come from API const agentData = { @@ -16,7 +26,7 @@ const agentData = { expertise: ['Buyers', 'Sellers', 'Divorce', 'Luxury', 'Retirement', 'Historical', 'condo', 'Rural', 'FHA', 'Conventional', 'USDA', 'Retirement'], email: 'brian@gmail.com', phone: '+91*******7493', - profileImage: '/assets/agent-placeholder.jpg', + profileImage: '/assets/demo_images/8f017153a7b4a239a4f0691234ef97dd55092282.jpg', experience: { years: '10+ years', contracts: '10+ Contracts', @@ -70,92 +80,6 @@ const agentData = { ], }; -// Star Rating Component -function StarRating({ rating }: { rating: number }) { - return ( -
- {[1, 2, 3, 4, 5].map((star) => ( - {star - ))} -
- ); -} - -// Tag Component -function Tag({ children, variant = 'default' }: { children: React.ReactNode; variant?: 'default' | 'light' | 'orange' }) { - return ( - - {children} - - ); -} - -// Specialization Card Component -function SpecializationCard({ - title, - items, - icon, -}: { - title: string; - items: string[]; - icon: React.ReactNode; -}) { - return ( -
-
{icon}
-

{title}

-
- {items.map((item, idx) => ( -

- {item} -

- ))} -
- -
- ); -} - -// Info Card Component -function InfoCard({ - title, - content, - icon, -}: { - title: string; - content: React.ReactNode; - icon: React.ReactNode; -}) { - return ( -
-
{icon}
- {title &&

{title}

} -
{content}
-
- ); -} - export default function AgentDashboard() { const { data: session } = useSession(); @@ -164,249 +88,28 @@ export default function AgentDashboard() { {/* Main Profile Section with Left Sidebar */}
{/* Left Sidebar - Status & Contact */} -
- {/* Profile Image */} -
- {/* Profile Image */} -
- Profile -
- {/* Edit Icon - Top Right Outside */} - -
- - {/* Status Buttons */} -
-
-
- - Available. -
- -
-
-
- - Unavailable. -
- -
-
- - {/* Contact Info */} -
-
- Email: - *****brian@gmail.com -
-
- Ph.No: - {agentData.phone} - -
-
-
+ {/* Right Content - Profile Info */}
- {/* Profile Header Card */} -
- {/* Name and Actions Row */} -
-
- {/* Name and Verification */} -
-

- {agentData.name.split(' ')[0]}{' '} - {agentData.name.split(' ')[1]} -

- {agentData.isVerified && ( - <> - Verified - - (Verified Expert) - - - )} - -
- - {/* Title */} -

{agentData.title}

- - {/* Location and Member Since */} -
- - Location - {agentData.location} - - - Calendar - Member Since {agentData.memberSince} - -
-
- - {/* Action Buttons */} -
- - -
-
- - {/* Bio */} -

{agentData.bio}

- - {/* Expertise Tags */} -
-

Expertise:

-
- {agentData.expertise.map((tag, idx) => ( - {tag} - ))} -
-
-
+
{/* Experience Section */} -
-

Experience

-
- {/* Left Column */} -
-
-

Years in Experience

-
    -
  • {agentData.experience.years}
    • -
-
-
-

Number of contract coised

-
    -
  • {agentData.experience.contracts}
    • -
-
-
-

Licensing & Areas

-
- {agentData.experience.licensingAreas.slice(0, 5).map((area, idx) => ( - - {area} - - ))} - {agentData.experience.licensingAreas.length > 5 && ( - +{agentData.experience.licensingAreas.length - 5} More - )} -
-
-
- - {/* Divider */} -
- - {/* Right Column */} -
-
-

Areas in expertise & Years

-
- {agentData.experience.expertiseYears.slice(0, 3).map((item, idx) => ( - - {item.area} – {item.years} - - ))} - {agentData.experience.expertiseYears.length > 3 && ( - +{agentData.experience.expertiseYears.length - 3}More - )} -
-
-
-

Certifications

-
    - {agentData.experience.certifications.map((cert, idx) => ( -
  • - • {cert.name} -

    {cert.org}

    -
    • - ))} -
-
-
-
-
+ {/* Info Cards Section */}
@@ -537,30 +240,13 @@ export default function AgentDashboard() {

{agentData.testimonials.map((testimonial) => ( -
-
-
- “ -
-

I have been working with Lorem .

-
-

{testimonial.text}

-
-
- User -
-
- -

{testimonial.author}

-

{testimonial.role}

-
-
-
+ ))}
diff --git a/src/app/globals.css b/src/app/globals.css index ae045f9..c0a97fd 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -38,6 +38,7 @@ --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); --font-serif: var(--font-source-serif-4); + --font-fractul: var(--font-fractul); } /* Disable dark mode for consistent branding */ diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 493aeb1..8f0ec3c 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,5 +1,5 @@ import type { Metadata } from "next"; -import { Geist, Geist_Mono, Source_Serif_4 } from "next/font/google"; +import { Geist, Geist_Mono, Source_Serif_4, Nunito_Sans } from "next/font/google"; import { SessionProvider } from "@/components/providers/session-provider"; import "./globals.css"; @@ -19,6 +19,13 @@ const sourceSerif4 = Source_Serif_4({ weight: ["400", "500", "600", "700"], }); +// Using Nunito Sans as a close alternative to Fractul (similar geometric sans-serif style) +const nunitoSans = Nunito_Sans({ + variable: "--font-fractul", + subsets: ["latin"], + weight: ["400", "500", "600", "700", "800"], +}); + export const metadata: Metadata = { title: "Real Estate Platform", description: "Find your dream property with trusted agents", @@ -32,7 +39,7 @@ export default function RootLayout({ return ( {children}