feat: Implement agent profile editing page with new form components, icons, and dashboard integration.
This commit is contained in:
pradeepkumar
6
public/assets/icons/areas-icon.svg
Normal file
6
public/assets/icons/areas-icon.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M1.66667 7.5H18.3333" stroke="#00293D" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M5 13.75H6.66667" stroke="#00293D" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M8.75 13.75H12.0833" stroke="#00293D" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M5.36667 2.5H14.625C17.5917 2.5 18.3333 3.23333 18.3333 6.15833V13.8417C18.3333 16.7667 17.5917 17.5 14.6333 17.5H5.36667C2.40833 17.5 1.66667 16.7667 1.66667 13.8417V6.15833C1.66667 3.23333 2.40833 2.5 5.36667 2.5Z" stroke="#00293D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 834 B |
3
public/assets/icons/attachment-icon.svg
Normal file
3
public/assets/icons/attachment-icon.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<path d="M8.38 7.62L7.17333 8.82667C6.59333 9.40667 6.59333 10.36 7.17333 10.94C7.75333 11.52 8.70667 11.52 9.28667 10.94L11.0467 9.18C12.2067 8.02 12.2067 6.12667 11.0467 4.96C9.88667 3.8 7.99333 3.8 6.82667 4.96L4.90667 6.88C3.90667 7.88 3.90667 9.50667 4.90667 10.5067" stroke="#00293D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 463 B |
6
public/assets/icons/bio-icon.svg
Normal file
6
public/assets/icons/bio-icon.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M18.3333 9.16667V12.5C18.3333 16.6667 16.6667 18.3333 12.5 18.3333H7.5C3.33333 18.3333 1.66667 16.6667 1.66667 12.5V7.5C1.66667 3.33333 3.33333 1.66667 7.5 1.66667H10.8333" stroke="#00293D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M18.3333 9.16667H15C12.5 9.16667 11.6667 8.33333 11.6667 5.83333V2.5L18.3333 9.16667Z" stroke="#00293D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M5.83333 10.8333H10.8333" stroke="#00293D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M5.83333 14.1667H8.33333" stroke="#00293D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 799 B |
6
public/assets/icons/business-icon.svg
Normal file
6
public/assets/icons/business-icon.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M5.83333 18.3333H14.1667C16.6667 18.3333 17.0833 17.2917 17.225 16.0167L17.8083 9.35C17.9917 7.79167 17.5333 6.66667 15 6.66667H5C2.46667 6.66667 2.00833 7.79167 2.19167 9.35L2.775 16.0167C2.91667 17.2917 3.33333 18.3333 5.83333 18.3333Z" stroke="#00293D" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M5.83333 6.66667V5.75C5.83333 3.80833 5.83333 2.5 9.16667 2.5H10.8333C14.1667 2.5 14.1667 3.80833 14.1667 5.75V6.66667" stroke="#00293D" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10 14.1667V10.8333" stroke="#00293D" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M11.6667 12.5H8.33333" stroke="#00293D" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 982 B |
4
public/assets/icons/certification-icon.svg
Normal file
4
public/assets/icons/certification-icon.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M8.95 1.85001L5.4 3.65834C4.375 4.18334 3.54167 5.51668 3.54167 6.66668V12.4C3.54167 13.5083 4.275 14.9333 5.16667 15.55L8.25 17.75C9.55833 18.6833 11.4583 18.6833 12.7667 17.75L15.85 15.55C16.7417 14.9333 17.475 13.5083 17.475 12.4V6.66668C17.475 5.50834 16.6417 4.17501 15.6167 3.65001L12.0667 1.84168C11.0833 1.30834 9.46667 1.30834 8.95 1.85001Z" stroke="#00293D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M7.5 9.91667L8.91667 11.3333L12.5 7.75" stroke="#00293D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 686 B |
4
public/assets/icons/contact-icon.svg
Normal file
4
public/assets/icons/contact-icon.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M14.1667 17.5H5.83333C3.33333 17.5 1.66667 16.25 1.66667 13.3333V6.66667C1.66667 3.75 3.33333 2.5 5.83333 2.5H14.1667C16.6667 2.5 18.3333 3.75 18.3333 6.66667V13.3333C18.3333 16.25 16.6667 17.5 14.1667 17.5Z" stroke="#00293D" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M14.1667 7.08333L11.5583 9.16667C10.7 9.85 9.29167 9.85 8.43333 9.16667L5.83333 7.08333" stroke="#00293D" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 639 B |
6
public/assets/icons/contract-icon.svg
Normal file
6
public/assets/icons/contract-icon.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M17.5 5.83333V14.1667C17.5 16.6667 16.25 18.3333 13.3333 18.3333H6.66667C3.75 18.3333 2.5 16.6667 2.5 14.1667V5.83333C2.5 3.33333 3.75 1.66667 6.66667 1.66667H13.3333C16.25 1.66667 17.5 3.33333 17.5 5.83333Z" stroke="#00293D" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M12.0833 3.75V5.41667C12.0833 6.33333 12.8333 7.08333 13.75 7.08333H15.4167" stroke="#00293D" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M6.66667 10.8333H10" stroke="#00293D" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M6.66667 14.1667H13.3333" stroke="#00293D" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 912 B |
4
public/assets/icons/document-icon.svg
Normal file
4
public/assets/icons/document-icon.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M18.3333 8.33333V12.5C18.3333 16.6667 16.6667 18.3333 12.5 18.3333H7.5C3.33333 18.3333 1.66667 16.6667 1.66667 12.5V7.5C1.66667 3.33333 3.33333 1.66667 7.5 1.66667H11.6667" stroke="#00293D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M18.3333 8.33333H15C12.5 8.33333 11.6667 7.5 11.6667 5V1.66667L18.3333 8.33333Z" stroke="#00293D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 549 B |
9
public/assets/icons/expertise-icon.svg
Normal file
9
public/assets/icons/expertise-icon.svg
Normal file
@@ -0,0 +1,9 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M10 12.5L8.33333 10.8333L10 9.16667L11.6667 10.8333L10 12.5Z" stroke="#00293D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M5 7.5L3.33333 5.83333L5 4.16667L6.66667 5.83333L5 7.5Z" stroke="#00293D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M15 7.5L13.3333 5.83333L15 4.16667L16.6667 5.83333L15 7.5Z" stroke="#00293D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10 17.5L8.33333 15.8333L10 14.1667L11.6667 15.8333L10 17.5Z" stroke="#00293D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M6.66667 5.83333L8.33333 10.8333" stroke="#00293D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M13.3333 5.83333L11.6667 10.8333" stroke="#00293D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10 12.5V14.1667" stroke="#00293D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
4
public/assets/icons/hobbies-icon.svg
Normal file
4
public/assets/icons/hobbies-icon.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M10 18.3333C14.6024 18.3333 18.3333 14.6024 18.3333 10C18.3333 5.39763 14.6024 1.66667 10 1.66667C5.39763 1.66667 1.66667 5.39763 1.66667 10C1.66667 14.6024 5.39763 18.3333 10 18.3333Z" stroke="#00293D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M6.45833 10.5917L8.50833 12.6417C8.89167 13.025 9.50833 13.025 9.89167 12.6417L13.5417 9" stroke="#00293D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 571 B |
5
public/assets/icons/price-icon.svg
Normal file
5
public/assets/icons/price-icon.svg
Normal file
@@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M7.22499 11.9417C7.22499 13.0167 8.04166 13.8833 9.05833 13.8833H11.175C12.0583 13.8833 12.775 13.125 12.775 12.1917C12.775 11.175 12.325 10.8167 11.6583 10.5833L8.34999 9.41667C7.68333 9.18333 7.23333 8.825 7.23333 7.80833C7.23333 6.875 7.94999 6.11667 8.83333 6.11667H10.95C11.9667 6.11667 12.7833 6.98333 12.7833 8.05833" stroke="#00293D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10 5V15" stroke="#00293D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10 18.3333C14.6024 18.3333 18.3333 14.6024 18.3333 10C18.3333 5.39763 14.6024 1.66667 10 1.66667C5.39763 1.66667 1.66667 5.39763 1.66667 10C1.66667 14.6024 5.39763 18.3333 10 18.3333Z" stroke="#00293D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 912 B |
7
public/assets/icons/professional-icon.svg
Normal file
7
public/assets/icons/professional-icon.svg
Normal file
@@ -0,0 +1,7 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M6.66667 18.3333H13.3333C16.6833 18.3333 17.2833 16.9917 17.4583 15.3583L18.0833 8.69167C18.3083 6.65833 17.725 5 14.1667 5H5.83333C2.275 5 1.69167 6.65833 1.91667 8.69167L2.54167 15.3583C2.71667 16.9917 3.31667 18.3333 6.66667 18.3333Z" stroke="#00293D" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M6.66667 5V4.33333C6.66667 2.85833 6.66667 1.66667 9.33333 1.66667H10.6667C13.3333 1.66667 13.3333 2.85833 13.3333 4.33333V5" stroke="#00293D" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M11.6667 10.8333V11.6667C11.6667 11.675 11.6667 11.675 11.6667 11.6833C11.6667 12.5917 11.6583 13.3333 10 13.3333C8.35 13.3333 8.33333 12.6 8.33333 11.6917V10.8333C8.33333 10 8.33333 10 9.16667 10H10.8333C11.6667 10 11.6667 10 11.6667 10.8333Z" stroke="#00293D" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M18.0417 9.16667C16.1167 10.5667 13.9167 11.4 11.6667 11.6833" stroke="#00293D" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M2.18333 9.39166C4.05833 10.6583 6.175 11.4167 8.33333 11.6917" stroke="#00293D" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
6
public/assets/icons/specialization-icon.svg
Normal file
6
public/assets/icons/specialization-icon.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M7.63333 9.05833L9.99999 10.4667L12.35 9.06667" stroke="#00293D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10 12.8083V10.4583" stroke="#00293D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M8.95833 7.21667L7.79167 7.86667C7.15 8.225 6.625 9.13333 6.625 9.875V11.7833C6.625 12.525 7.14167 13.4333 7.79167 13.7917L8.95833 14.45C9.56667 14.7917 10.5417 14.7917 11.15 14.45L12.3167 13.7917C12.9583 13.4333 13.4833 12.525 13.4833 11.7833V9.86667C13.4833 9.125 12.9667 8.21667 12.3167 7.85833L11.15 7.20833C10.5333 6.86667 9.56667 6.86667 8.95833 7.21667Z" stroke="#00293D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M18.3333 12.5V7.5C18.3333 3.33333 16.6667 1.66667 12.5 1.66667H7.5C3.33333 1.66667 1.66667 3.33333 1.66667 7.5V12.5C1.66667 16.6667 3.33333 18.3333 7.5 18.3333H12.5C16.6667 18.3333 18.3333 16.6667 18.3333 12.5Z" stroke="#00293D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
6
public/assets/icons/upload-icon.svg
Normal file
6
public/assets/icons/upload-icon.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M7.5 14.1667V9.16667L5.83333 10.8333" stroke="#00293D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M7.5 9.16667L9.16667 10.8333" stroke="#00293D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M18.3333 8.33333V12.5C18.3333 16.6667 16.6667 18.3333 12.5 18.3333H7.5C3.33333 18.3333 1.66667 16.6667 1.66667 12.5V7.5C1.66667 3.33333 3.33333 1.66667 7.5 1.66667H11.6667" stroke="#00293D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M18.3333 8.33333H15C12.5 8.33333 11.6667 7.5 11.6667 5V1.66667L18.3333 8.33333Z" stroke="#00293D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 809 B |
4
public/assets/icons/user-icon.svg
Normal file
4
public/assets/icons/user-icon.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M10 10C12.0711 10 13.75 8.32107 13.75 6.25C13.75 4.17893 12.0711 2.5 10 2.5C7.92893 2.5 6.25 4.17893 6.25 6.25C6.25 8.32107 7.92893 10 10 10Z" stroke="#00293D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M17.5 17.5C17.5 14.7386 14.1421 12.5 10 12.5C5.85786 12.5 2.5 14.7386 2.5 17.5" stroke="#00293D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 518 B |
@@ -87,6 +87,7 @@ export function ProfileHeader({
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="relative overflow-visible">
|
||||
<Button
|
||||
variant="action"
|
||||
size="sm"
|
||||
@@ -101,6 +102,9 @@ export function ProfileHeader({
|
||||
>
|
||||
Message
|
||||
</Button>
|
||||
<span className="absolute -top-2 -right-2 w-3 h-3 bg-red-500 rounded-full border-2 border-white z-10"></span>
|
||||
</div>
|
||||
<div className="relative overflow-visible">
|
||||
<Button
|
||||
variant="action"
|
||||
size="sm"
|
||||
@@ -115,6 +119,8 @@ export function ProfileHeader({
|
||||
>
|
||||
Requests
|
||||
</Button>
|
||||
<span className="absolute -top-2 -right-2 w-3 h-3 bg-red-500 rounded-full border-2 border-white z-10"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
|
||||
import { useSession } from 'next-auth/react';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
|
||||
// Import components from component folder
|
||||
import {
|
||||
@@ -103,14 +104,17 @@ export default function AgentDashboard() {
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/50 via-black/20 to-transparent pointer-events-none" />
|
||||
</div>
|
||||
{/* Edit Icon - Top Right Outside */}
|
||||
<button className="absolute -top-3 -right-3 w-9 h-9 bg-white rounded-[10px] shadow-md flex items-center justify-center hover:bg-gray-50 transition-colors">
|
||||
<Link
|
||||
href="/agent/edit"
|
||||
className="absolute -top-3 -right-3 w-9 h-9 bg-white rounded-[10px] shadow-md flex items-center justify-center hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<Image
|
||||
src="/assets/icons/edit-icon.svg"
|
||||
alt="Edit profile"
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Status Buttons */}
|
||||
|
||||
86
src/app/(agent)/agent/edit/components/FileUpload.tsx
Normal file
86
src/app/(agent)/agent/edit/components/FileUpload.tsx
Normal file
@@ -0,0 +1,86 @@
|
||||
'use client';
|
||||
|
||||
import Image from 'next/image';
|
||||
import { useRef } from 'react';
|
||||
|
||||
interface FileUploadProps {
|
||||
onFileSelect: (files: FileList) => void;
|
||||
acceptedTypes?: string;
|
||||
maxSize?: string;
|
||||
}
|
||||
|
||||
export function FileUpload({ onFileSelect, acceptedTypes = '.pdf,.doc,.docx,.jpg,.png', maxSize = '5MB' }: FileUploadProps) {
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const handleClick = () => {
|
||||
fileInputRef.current?.click();
|
||||
};
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (e.target.files && e.target.files.length > 0) {
|
||||
onFileSelect(e.target.files);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDrop = (e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
|
||||
onFileSelect(e.dataTransfer.files);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDragOver = (e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
onClick={handleClick}
|
||||
onDrop={handleDrop}
|
||||
onDragOver={handleDragOver}
|
||||
className="border-2 border-dashed border-[#00293D]/20 rounded-[10px] p-6 text-center cursor-pointer hover:border-[#E58625]/50 transition-colors"
|
||||
>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept={acceptedTypes}
|
||||
onChange={handleChange}
|
||||
className="hidden"
|
||||
multiple
|
||||
/>
|
||||
<p className="text-[14px] font-serif text-[#00293D]/70 mb-2">
|
||||
Drag and drop files here or click to upload files to provide documentation or verification for licensing credentials.
|
||||
</p>
|
||||
<p className="text-[12px] font-serif text-[#00293D]/50">
|
||||
{acceptedTypes.split(',').join(', ')} and more are accepted
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
className="mt-4 px-6 py-2 bg-[#E58625] text-white text-[14px] font-semibold font-serif rounded-full hover:bg-[#E58625]/90 transition-colors"
|
||||
>
|
||||
Upload
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface AttachedFileProps {
|
||||
fileName: string;
|
||||
onRemove: () => void;
|
||||
}
|
||||
|
||||
export function AttachedFile({ fileName, onRemove }: AttachedFileProps) {
|
||||
return (
|
||||
<div className="flex items-center justify-between p-3 bg-gray-50 rounded-[10px]">
|
||||
<div className="flex items-center gap-2">
|
||||
<Image src="/assets/icons/document-icon.svg" alt="Document" width={20} height={20} />
|
||||
<span className="text-[14px] font-serif text-[#00293D]">{fileName}</span>
|
||||
</div>
|
||||
<button onClick={onRemove} className="text-[#00293D]/50 hover:text-red-500 transition-colors">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 4L4 12M4 4L12 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
21
src/app/(agent)/agent/edit/components/FormCheckbox.tsx
Normal file
21
src/app/(agent)/agent/edit/components/FormCheckbox.tsx
Normal file
@@ -0,0 +1,21 @@
|
||||
'use client';
|
||||
|
||||
interface FormCheckboxProps {
|
||||
label: string;
|
||||
checked: boolean;
|
||||
onChange: (checked: boolean) => void;
|
||||
}
|
||||
|
||||
export function FormCheckbox({ label, checked, onChange }: FormCheckboxProps) {
|
||||
return (
|
||||
<label className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={checked}
|
||||
onChange={(e) => onChange(e.target.checked)}
|
||||
className="w-4 h-4 rounded border-[#00293D]/30 text-[#E58625] focus:ring-[#E58625] focus:ring-offset-0 accent-[#E58625]"
|
||||
/>
|
||||
<span className="text-[14px] font-serif text-[#00293D]">{label}</span>
|
||||
</label>
|
||||
);
|
||||
}
|
||||
28
src/app/(agent)/agent/edit/components/FormInput.tsx
Normal file
28
src/app/(agent)/agent/edit/components/FormInput.tsx
Normal file
@@ -0,0 +1,28 @@
|
||||
'use client';
|
||||
|
||||
interface FormInputProps {
|
||||
label: string;
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
placeholder?: string;
|
||||
type?: string;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
export function FormInput({ label, value, onChange, placeholder, type = 'text', disabled }: FormInputProps) {
|
||||
return (
|
||||
<div className="flex-1">
|
||||
<label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-1">
|
||||
{label}
|
||||
</label>
|
||||
<input
|
||||
type={type}
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
placeholder={placeholder}
|
||||
disabled={disabled}
|
||||
className="w-full px-4 py-3 border border-[#00293D]/20 rounded-[10px] text-[14px] font-serif text-[#00293D] placeholder:text-[#00293D]/40 focus:outline-none focus:border-[#E58625] disabled:bg-gray-50 disabled:text-[#00293D]/50"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
34
src/app/(agent)/agent/edit/components/FormSection.tsx
Normal file
34
src/app/(agent)/agent/edit/components/FormSection.tsx
Normal file
@@ -0,0 +1,34 @@
|
||||
'use client';
|
||||
|
||||
import Image from 'next/image';
|
||||
|
||||
interface FormSectionProps {
|
||||
id: string;
|
||||
icon: string;
|
||||
title: string;
|
||||
children: React.ReactNode;
|
||||
onEdit?: () => void;
|
||||
showEdit?: boolean;
|
||||
}
|
||||
|
||||
export function FormSection({ id, icon, title, children, onEdit, showEdit }: FormSectionProps) {
|
||||
return (
|
||||
<div id={id} className="scroll-mt-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Image src={icon} alt={title} width={20} height={20} />
|
||||
<h3 className="text-[16px] font-bold text-[#00293D] font-fractul">{title}</h3>
|
||||
</div>
|
||||
{showEdit && onEdit && (
|
||||
<button
|
||||
onClick={onEdit}
|
||||
className="flex items-center gap-1 text-[#E58625] text-[12px] font-medium font-serif hover:underline"
|
||||
>
|
||||
<span>+ Edit</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
41
src/app/(agent)/agent/edit/components/FormSelect.tsx
Normal file
41
src/app/(agent)/agent/edit/components/FormSelect.tsx
Normal file
@@ -0,0 +1,41 @@
|
||||
'use client';
|
||||
|
||||
interface FormSelectProps {
|
||||
label: string;
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
options: { value: string; label: string }[];
|
||||
placeholder?: string;
|
||||
}
|
||||
|
||||
export function FormSelect({ label, value, onChange, options, placeholder }: FormSelectProps) {
|
||||
return (
|
||||
<div className="flex-1">
|
||||
<label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-1">
|
||||
{label}
|
||||
</label>
|
||||
<select
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
className="w-full px-4 py-3 border border-[#00293D]/20 rounded-[10px] text-[14px] font-serif text-[#00293D] focus:outline-none focus:border-[#E58625] bg-white appearance-none cursor-pointer"
|
||||
style={{
|
||||
backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2300293D'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E")`,
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundPosition: 'right 12px center',
|
||||
backgroundSize: '16px',
|
||||
}}
|
||||
>
|
||||
{placeholder && (
|
||||
<option value="" disabled>
|
||||
{placeholder}
|
||||
</option>
|
||||
)}
|
||||
{options.map((option) => (
|
||||
<option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
35
src/app/(agent)/agent/edit/components/FormTextarea.tsx
Normal file
35
src/app/(agent)/agent/edit/components/FormTextarea.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
'use client';
|
||||
|
||||
interface FormTextareaProps {
|
||||
label?: string;
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
placeholder?: string;
|
||||
rows?: number;
|
||||
maxLength?: number;
|
||||
}
|
||||
|
||||
export function FormTextarea({ label, value, onChange, placeholder, rows = 4, maxLength }: FormTextareaProps) {
|
||||
return (
|
||||
<div className="flex-1">
|
||||
{label && (
|
||||
<label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-1">
|
||||
{label}
|
||||
</label>
|
||||
)}
|
||||
<textarea
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
placeholder={placeholder}
|
||||
rows={rows}
|
||||
maxLength={maxLength}
|
||||
className="w-full px-4 py-3 border border-[#00293D]/20 rounded-[10px] text-[14px] font-serif text-[#00293D] placeholder:text-[#00293D]/40 focus:outline-none focus:border-[#E58625] resize-none"
|
||||
/>
|
||||
{maxLength && (
|
||||
<p className="text-right text-[12px] text-[#00293D]/50 font-serif mt-1">
|
||||
{value.length}/{maxLength}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
54
src/app/(agent)/agent/edit/components/QuickLinks.tsx
Normal file
54
src/app/(agent)/agent/edit/components/QuickLinks.tsx
Normal file
@@ -0,0 +1,54 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
|
||||
const links = [
|
||||
{ id: 'basic-info', label: 'Basic Information' },
|
||||
{ id: 'contact-info', label: 'Contact Information' },
|
||||
{ id: 'professional-types', label: 'Professional Types' },
|
||||
{ id: 'upload-documents', label: 'Upload Documents' },
|
||||
{ id: 'licensing-areas', label: 'Licensing & Areas' },
|
||||
{ id: 'biography', label: 'Biography' },
|
||||
{ id: 'expertise', label: 'Expertise' },
|
||||
{ id: 'years-business', label: 'Years In Business' },
|
||||
{ id: 'areas-expertise-years', label: 'Areas in expertise & Years' },
|
||||
{ id: 'contracts-closed', label: 'Contracts Closed' },
|
||||
{ id: 'price-point', label: 'Price Point' },
|
||||
{ id: 'specialization', label: 'Specialization' },
|
||||
{ id: 'hobbies', label: 'Hobbies' },
|
||||
{ id: 'certifications', label: 'Certifications' },
|
||||
{ id: 'availability', label: 'Availability' },
|
||||
];
|
||||
|
||||
export function QuickLinks() {
|
||||
const [activeLink, setActiveLink] = useState('basic-info');
|
||||
|
||||
const scrollToSection = (id: string) => {
|
||||
setActiveLink(id);
|
||||
const element = document.getElementById(id);
|
||||
if (element) {
|
||||
element.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-white rounded-[20px] p-6">
|
||||
<h3 className="text-[16px] font-bold text-[#00293D] font-fractul mb-4">Quick Links</h3>
|
||||
<nav className="space-y-1">
|
||||
{links.map((link) => (
|
||||
<button
|
||||
key={link.id}
|
||||
onClick={() => scrollToSection(link.id)}
|
||||
className={`block w-full text-left px-3 py-2 rounded-lg text-[14px] font-serif transition-colors ${
|
||||
activeLink === link.id
|
||||
? 'text-[#E58625] font-semibold bg-[#E58625]/5'
|
||||
: 'text-[#00293D] hover:bg-gray-50'
|
||||
}`}
|
||||
>
|
||||
{link.label}
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
58
src/app/(agent)/agent/edit/components/TagInput.tsx
Normal file
58
src/app/(agent)/agent/edit/components/TagInput.tsx
Normal file
@@ -0,0 +1,58 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
|
||||
interface TagInputProps {
|
||||
tags: string[];
|
||||
onChange: (tags: string[]) => void;
|
||||
placeholder?: string;
|
||||
}
|
||||
|
||||
export function TagInput({ tags, onChange, placeholder = 'Add tag...' }: TagInputProps) {
|
||||
const [inputValue, setInputValue] = useState('');
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
if (e.key === 'Enter' && inputValue.trim()) {
|
||||
e.preventDefault();
|
||||
if (!tags.includes(inputValue.trim())) {
|
||||
onChange([...tags, inputValue.trim()]);
|
||||
}
|
||||
setInputValue('');
|
||||
}
|
||||
};
|
||||
|
||||
const removeTag = (tagToRemove: string) => {
|
||||
onChange(tags.filter((tag) => tag !== tagToRemove));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="border border-[#00293D]/20 rounded-[10px] p-3">
|
||||
<div className="flex flex-wrap gap-2 mb-2">
|
||||
{tags.map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="inline-flex items-center gap-1 px-3 py-1 bg-[#00293D]/5 rounded-full text-[14px] font-serif text-[#00293D]"
|
||||
>
|
||||
{tag}
|
||||
<button
|
||||
onClick={() => removeTag(tag)}
|
||||
className="text-[#00293D]/50 hover:text-[#00293D] ml-1"
|
||||
>
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9 3L3 9M3 3L9 9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
value={inputValue}
|
||||
onChange={(e) => setInputValue(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder={placeholder}
|
||||
className="w-full text-[14px] font-serif text-[#00293D] placeholder:text-[#00293D]/40 focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
8
src/app/(agent)/agent/edit/components/index.ts
Normal file
8
src/app/(agent)/agent/edit/components/index.ts
Normal file
@@ -0,0 +1,8 @@
|
||||
export { QuickLinks } from './QuickLinks';
|
||||
export { FormSection } from './FormSection';
|
||||
export { FormInput } from './FormInput';
|
||||
export { FormCheckbox } from './FormCheckbox';
|
||||
export { FormTextarea } from './FormTextarea';
|
||||
export { FormSelect } from './FormSelect';
|
||||
export { FileUpload, AttachedFile } from './FileUpload';
|
||||
export { TagInput } from './TagInput';
|
||||
631
src/app/(agent)/agent/edit/page.tsx
Normal file
631
src/app/(agent)/agent/edit/page.tsx
Normal file
@@ -0,0 +1,631 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import Image from 'next/image';
|
||||
import {
|
||||
QuickLinks,
|
||||
FormSection,
|
||||
FormInput,
|
||||
FormCheckbox,
|
||||
FormTextarea,
|
||||
FormSelect,
|
||||
FileUpload,
|
||||
AttachedFile,
|
||||
TagInput,
|
||||
} from './components';
|
||||
|
||||
// Initial form data - in production this would come from API
|
||||
const initialFormData = {
|
||||
firstName: 'Brian',
|
||||
lastName: 'Neeland',
|
||||
email: 'brian@requestnetwork.com',
|
||||
phone: '+9195003837493',
|
||||
professionalTypes: {
|
||||
firstTime: true,
|
||||
solo: false,
|
||||
team: false,
|
||||
},
|
||||
attachedDocuments: ['Brian_Photo_1_Blue_Coat.pdf'],
|
||||
state: 'Colorado',
|
||||
licensedAreas: ['Colorado Springs', 'Monument'],
|
||||
expertiseYears: [
|
||||
{ area: 'Colorado', years: '10 yrs' },
|
||||
{ area: 'Falcon', years: '10 yrs' },
|
||||
],
|
||||
biography: "Brian brings eight years of hands-on experience helping clients confidently buy, sell, and invest in real estate. He combines strong analytical skills with deep market knowledge to identify the right opportunities and guide clients through every step of the process. With a data-driven approach and clear communication, Brian ensures smooth transactions and informed decisions tailored to each client's goals.",
|
||||
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.",
|
||||
expertise: ['Buyers', 'Sellers', 'Divorce', 'Luxury', 'Retirement', 'Historical', 'Condo', 'Rural'],
|
||||
yearsInBusiness: {
|
||||
totalYears: '10 Years',
|
||||
totalTransactions: '100+',
|
||||
},
|
||||
contractsClosed: {
|
||||
lessThan10: false,
|
||||
between10And25: false,
|
||||
between26And50: true,
|
||||
between51And75: false,
|
||||
moreThan75: false,
|
||||
},
|
||||
pricePoint: {
|
||||
under100k: false,
|
||||
between100kAnd200k: false,
|
||||
between200kAnd400k: true,
|
||||
between400kAnd600k: true,
|
||||
between600kAnd800k: false,
|
||||
between800kAnd1m: false,
|
||||
above1m: false,
|
||||
},
|
||||
specialization: {
|
||||
clientLocalization: {
|
||||
local: true,
|
||||
national: false,
|
||||
international: false,
|
||||
},
|
||||
clientTypeWorkedWith: {
|
||||
firstTimeBuyer: true,
|
||||
firstTimeSeller: false,
|
||||
},
|
||||
propertyType: {
|
||||
sfr: true,
|
||||
condo: false,
|
||||
luxury: false,
|
||||
townhome: false,
|
||||
commercial: false,
|
||||
},
|
||||
transactionType: {
|
||||
relocation: true,
|
||||
probate: false,
|
||||
taxLien: false,
|
||||
traditional: false,
|
||||
newConstruction: false,
|
||||
},
|
||||
loanType: {
|
||||
conventional: true,
|
||||
fha: false,
|
||||
va: false,
|
||||
usda: false,
|
||||
reverse: false,
|
||||
},
|
||||
lifestyleSpecialties: {
|
||||
boating: true,
|
||||
horses: false,
|
||||
rv: false,
|
||||
automotive: false,
|
||||
aviation: false,
|
||||
},
|
||||
},
|
||||
hobbies: ['Boating', 'Horses'],
|
||||
certifications: [
|
||||
{ name: 'Certified Residential Specialist (CRS)', org: 'Residential Real Estate Council' },
|
||||
],
|
||||
availability: {
|
||||
type: 'Full Time Weekend',
|
||||
workFrom: 'Work from Method',
|
||||
},
|
||||
};
|
||||
|
||||
export default function EditProfilePage() {
|
||||
const router = useRouter();
|
||||
const [formData, setFormData] = useState(initialFormData);
|
||||
|
||||
const handleCancel = () => {
|
||||
router.push('/agent/dashboard');
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
// In production, this would save to API
|
||||
console.log('Saving form data:', formData);
|
||||
router.push('/agent/dashboard');
|
||||
};
|
||||
|
||||
const updateField = (field: string, value: any) => {
|
||||
setFormData((prev) => ({ ...prev, [field]: value }));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex gap-6">
|
||||
{/* Left Sidebar - Quick Links */}
|
||||
<div className="w-[220px] flex-shrink-0 hidden lg:block">
|
||||
<div className="sticky top-6">
|
||||
<QuickLinks />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="flex-1 space-y-6">
|
||||
{/* Basic Information */}
|
||||
<div className="bg-white rounded-[20px] p-6">
|
||||
<FormSection id="basic-info" icon="/assets/icons/user-icon.svg" title="Basic Information">
|
||||
<div className="flex flex-col md:flex-row gap-4">
|
||||
<FormInput
|
||||
label="First Name"
|
||||
value={formData.firstName}
|
||||
onChange={(value) => updateField('firstName', value)}
|
||||
placeholder="Enter first name"
|
||||
/>
|
||||
<FormInput
|
||||
label="Last Name"
|
||||
value={formData.lastName}
|
||||
onChange={(value) => updateField('lastName', value)}
|
||||
placeholder="Enter last name"
|
||||
/>
|
||||
</div>
|
||||
</FormSection>
|
||||
</div>
|
||||
|
||||
{/* Contact Information */}
|
||||
<div className="bg-white rounded-[20px] p-6">
|
||||
<FormSection id="contact-info" icon="/assets/icons/contact-icon.svg" title="Contact Information">
|
||||
<div className="flex flex-col md:flex-row gap-4">
|
||||
<FormInput
|
||||
label="Email Address"
|
||||
value={formData.email}
|
||||
onChange={(value) => updateField('email', value)}
|
||||
placeholder="Enter email"
|
||||
type="email"
|
||||
/>
|
||||
<FormInput
|
||||
label="Phone Number"
|
||||
value={formData.phone}
|
||||
onChange={(value) => updateField('phone', value)}
|
||||
placeholder="Enter phone"
|
||||
type="tel"
|
||||
/>
|
||||
</div>
|
||||
</FormSection>
|
||||
</div>
|
||||
|
||||
{/* Professional Types */}
|
||||
<div className="bg-white rounded-[20px] p-6">
|
||||
<FormSection id="professional-types" icon="/assets/icons/professional-icon.svg" title="Professional Types">
|
||||
<div className="flex flex-wrap gap-6">
|
||||
<FormCheckbox
|
||||
label="First Time"
|
||||
checked={formData.professionalTypes.firstTime}
|
||||
onChange={(checked) =>
|
||||
updateField('professionalTypes', { ...formData.professionalTypes, firstTime: checked })
|
||||
}
|
||||
/>
|
||||
<FormCheckbox
|
||||
label="Solo"
|
||||
checked={formData.professionalTypes.solo}
|
||||
onChange={(checked) =>
|
||||
updateField('professionalTypes', { ...formData.professionalTypes, solo: checked })
|
||||
}
|
||||
/>
|
||||
<FormCheckbox
|
||||
label="Team"
|
||||
checked={formData.professionalTypes.team}
|
||||
onChange={(checked) =>
|
||||
updateField('professionalTypes', { ...formData.professionalTypes, team: checked })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</FormSection>
|
||||
</div>
|
||||
|
||||
{/* Upload Documents */}
|
||||
<div className="bg-white rounded-[20px] p-6">
|
||||
<FormSection id="upload-documents" icon="/assets/icons/upload-icon.svg" title="Upload Documents">
|
||||
<FileUpload onFileSelect={(files) => console.log('Files selected:', files)} />
|
||||
|
||||
{/* Attached Documents */}
|
||||
{formData.attachedDocuments.length > 0 && (
|
||||
<div className="mt-6">
|
||||
<h4 className="text-[14px] font-semibold text-[#00293D] font-fractul mb-3 flex items-center gap-2">
|
||||
<Image src="/assets/icons/attachment-icon.svg" alt="Attached" width={16} height={16} />
|
||||
Attached Documents
|
||||
</h4>
|
||||
<div className="space-y-2">
|
||||
{formData.attachedDocuments.map((doc, idx) => (
|
||||
<AttachedFile
|
||||
key={idx}
|
||||
fileName={doc}
|
||||
onRemove={() => {
|
||||
const newDocs = [...formData.attachedDocuments];
|
||||
newDocs.splice(idx, 1);
|
||||
updateField('attachedDocuments', newDocs);
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</FormSection>
|
||||
</div>
|
||||
|
||||
{/* Licensing & Areas */}
|
||||
<div className="bg-white rounded-[20px] p-6">
|
||||
<FormSection id="licensing-areas" icon="/assets/icons/location-icon.svg" title="Licensing & Areas">
|
||||
<div className="space-y-4">
|
||||
<FormSelect
|
||||
label="State Licensed"
|
||||
value={formData.state}
|
||||
onChange={(value) => updateField('state', value)}
|
||||
options={[
|
||||
{ value: 'Colorado', label: 'Colorado' },
|
||||
{ value: 'Texas', label: 'Texas' },
|
||||
{ value: 'California', label: 'California' },
|
||||
]}
|
||||
/>
|
||||
|
||||
<div>
|
||||
<label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2">
|
||||
Licensed Areas
|
||||
</label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{formData.licensedAreas.map((area) => (
|
||||
<span
|
||||
key={area}
|
||||
className="inline-flex items-center px-3 h-[28px] rounded-[15px] text-[14px] font-medium font-serif border-[0.7px] border-[#00293d] text-[#00293d]"
|
||||
>
|
||||
{area}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<label className="text-[12px] font-medium text-[#00293D]/70 font-serif">
|
||||
Expertise Years
|
||||
</label>
|
||||
<button className="text-[#E58625] text-[12px] font-medium font-serif">+ Edit</button>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{formData.expertiseYears.map((item, idx) => (
|
||||
<span
|
||||
key={idx}
|
||||
className="inline-flex items-center px-3 h-[28px] rounded-[15px] text-[14px] font-medium font-serif border-[0.7px] border-[#00293d] text-[#00293d]"
|
||||
>
|
||||
{item.area} - {item.years}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</FormSection>
|
||||
</div>
|
||||
|
||||
{/* Biography */}
|
||||
<div className="bg-white rounded-[20px] p-6">
|
||||
<FormSection id="biography" icon="/assets/icons/bio-icon.svg" title="Biography">
|
||||
<div className="space-y-4">
|
||||
<FormTextarea
|
||||
value={formData.biography}
|
||||
onChange={(value) => updateField('biography', value)}
|
||||
placeholder="Write your biography..."
|
||||
rows={5}
|
||||
maxLength={500}
|
||||
/>
|
||||
<FormTextarea
|
||||
label="Write a few sentences that explain yourself and also a good memorable thought."
|
||||
value={formData.testimonialHighlight}
|
||||
onChange={(value) => updateField('testimonialHighlight', value)}
|
||||
placeholder="Write your memorable experience..."
|
||||
rows={3}
|
||||
maxLength={250}
|
||||
/>
|
||||
</div>
|
||||
</FormSection>
|
||||
</div>
|
||||
|
||||
{/* Expertise */}
|
||||
<div className="bg-white rounded-[20px] p-6">
|
||||
<FormSection id="expertise" icon="/assets/icons/expertise-icon.svg" title="Expertise">
|
||||
<TagInput
|
||||
tags={formData.expertise}
|
||||
onChange={(tags) => updateField('expertise', tags)}
|
||||
placeholder="Add expertise..."
|
||||
/>
|
||||
</FormSection>
|
||||
</div>
|
||||
|
||||
{/* Years In Business */}
|
||||
<div className="bg-white rounded-[20px] p-6">
|
||||
<FormSection id="years-business" icon="/assets/icons/business-icon.svg" title="Years In Business">
|
||||
<div className="flex flex-col md:flex-row gap-4">
|
||||
<FormInput
|
||||
label="Total Years"
|
||||
value={formData.yearsInBusiness.totalYears}
|
||||
onChange={(value) =>
|
||||
updateField('yearsInBusiness', { ...formData.yearsInBusiness, totalYears: value })
|
||||
}
|
||||
/>
|
||||
<FormInput
|
||||
label="Total Transactions"
|
||||
value={formData.yearsInBusiness.totalTransactions}
|
||||
onChange={(value) =>
|
||||
updateField('yearsInBusiness', { ...formData.yearsInBusiness, totalTransactions: value })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</FormSection>
|
||||
</div>
|
||||
|
||||
{/* Areas in expertise & Years */}
|
||||
<div className="bg-white rounded-[20px] p-6">
|
||||
<FormSection
|
||||
id="areas-expertise-years"
|
||||
icon="/assets/icons/areas-icon.svg"
|
||||
title="Areas in expertise & Years"
|
||||
showEdit
|
||||
onEdit={() => console.log('Edit areas')}
|
||||
>
|
||||
<div className="flex flex-col md:flex-row gap-4">
|
||||
<FormSelect
|
||||
label="Select State"
|
||||
value={formData.state}
|
||||
onChange={(value) => updateField('state', value)}
|
||||
options={[
|
||||
{ value: 'Colorado', label: 'Colorado' },
|
||||
{ value: 'Texas', label: 'Texas' },
|
||||
]}
|
||||
/>
|
||||
<FormSelect
|
||||
label="Select Years"
|
||||
value="10"
|
||||
onChange={() => {}}
|
||||
options={[
|
||||
{ value: '5', label: '5 Years' },
|
||||
{ value: '10', label: '10 Years' },
|
||||
{ value: '15', label: '15 Years' },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</FormSection>
|
||||
</div>
|
||||
|
||||
{/* Contracts Closed */}
|
||||
<div className="bg-white rounded-[20px] p-6">
|
||||
<FormSection id="contracts-closed" icon="/assets/icons/contract-icon.svg" title="Contracts Closed">
|
||||
<div className="space-y-3">
|
||||
<FormCheckbox
|
||||
label="< 10"
|
||||
checked={formData.contractsClosed.lessThan10}
|
||||
onChange={(checked) =>
|
||||
updateField('contractsClosed', { ...formData.contractsClosed, lessThan10: checked })
|
||||
}
|
||||
/>
|
||||
<FormCheckbox
|
||||
label="10 to 25"
|
||||
checked={formData.contractsClosed.between10And25}
|
||||
onChange={(checked) =>
|
||||
updateField('contractsClosed', { ...formData.contractsClosed, between10And25: checked })
|
||||
}
|
||||
/>
|
||||
<FormCheckbox
|
||||
label="26 to 50"
|
||||
checked={formData.contractsClosed.between26And50}
|
||||
onChange={(checked) =>
|
||||
updateField('contractsClosed', { ...formData.contractsClosed, between26And50: checked })
|
||||
}
|
||||
/>
|
||||
<FormCheckbox
|
||||
label="51 to 75"
|
||||
checked={formData.contractsClosed.between51And75}
|
||||
onChange={(checked) =>
|
||||
updateField('contractsClosed', { ...formData.contractsClosed, between51And75: checked })
|
||||
}
|
||||
/>
|
||||
<FormCheckbox
|
||||
label="75+"
|
||||
checked={formData.contractsClosed.moreThan75}
|
||||
onChange={(checked) =>
|
||||
updateField('contractsClosed', { ...formData.contractsClosed, moreThan75: checked })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</FormSection>
|
||||
</div>
|
||||
|
||||
{/* Price Point */}
|
||||
<div className="bg-white rounded-[20px] p-6">
|
||||
<FormSection id="price-point" icon="/assets/icons/price-icon.svg" title="Price Point">
|
||||
<div className="space-y-3">
|
||||
<FormCheckbox
|
||||
label="Under $100K"
|
||||
checked={formData.pricePoint.under100k}
|
||||
onChange={(checked) =>
|
||||
updateField('pricePoint', { ...formData.pricePoint, under100k: checked })
|
||||
}
|
||||
/>
|
||||
<FormCheckbox
|
||||
label="$100K – $200K"
|
||||
checked={formData.pricePoint.between100kAnd200k}
|
||||
onChange={(checked) =>
|
||||
updateField('pricePoint', { ...formData.pricePoint, between100kAnd200k: checked })
|
||||
}
|
||||
/>
|
||||
<FormCheckbox
|
||||
label="$200K – $400K"
|
||||
checked={formData.pricePoint.between200kAnd400k}
|
||||
onChange={(checked) =>
|
||||
updateField('pricePoint', { ...formData.pricePoint, between200kAnd400k: checked })
|
||||
}
|
||||
/>
|
||||
<FormCheckbox
|
||||
label="$400K – $600K"
|
||||
checked={formData.pricePoint.between400kAnd600k}
|
||||
onChange={(checked) =>
|
||||
updateField('pricePoint', { ...formData.pricePoint, between400kAnd600k: checked })
|
||||
}
|
||||
/>
|
||||
<FormCheckbox
|
||||
label="$600K – $800K"
|
||||
checked={formData.pricePoint.between600kAnd800k}
|
||||
onChange={(checked) =>
|
||||
updateField('pricePoint', { ...formData.pricePoint, between600kAnd800k: checked })
|
||||
}
|
||||
/>
|
||||
<FormCheckbox
|
||||
label="$800K – $1M"
|
||||
checked={formData.pricePoint.between800kAnd1m}
|
||||
onChange={(checked) =>
|
||||
updateField('pricePoint', { ...formData.pricePoint, between800kAnd1m: checked })
|
||||
}
|
||||
/>
|
||||
<FormCheckbox
|
||||
label="$1M and above"
|
||||
checked={formData.pricePoint.above1m}
|
||||
onChange={(checked) =>
|
||||
updateField('pricePoint', { ...formData.pricePoint, above1m: checked })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</FormSection>
|
||||
</div>
|
||||
|
||||
{/* Specialization */}
|
||||
<div className="bg-white rounded-[20px] p-6">
|
||||
<FormSection id="specialization" icon="/assets/icons/specialization-icon.svg" title="Specialization">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{/* Client Localization */}
|
||||
<div>
|
||||
<h4 className="text-[14px] font-semibold text-[#00293D] font-fractul mb-3">Client Localization</h4>
|
||||
<div className="space-y-2">
|
||||
<FormCheckbox label="Local" checked={formData.specialization.clientLocalization.local} onChange={() => {}} />
|
||||
<FormCheckbox label="National" checked={formData.specialization.clientLocalization.national} onChange={() => {}} />
|
||||
<FormCheckbox label="International" checked={formData.specialization.clientLocalization.international} onChange={() => {}} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Client Type Worked With */}
|
||||
<div>
|
||||
<h4 className="text-[14px] font-semibold text-[#00293D] font-fractul mb-3">Client Type Worked With</h4>
|
||||
<div className="space-y-2">
|
||||
<FormCheckbox label="First Time Buyer" checked={formData.specialization.clientTypeWorkedWith.firstTimeBuyer} onChange={() => {}} />
|
||||
<FormCheckbox label="First Time Seller" checked={formData.specialization.clientTypeWorkedWith.firstTimeSeller} onChange={() => {}} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Property Type */}
|
||||
<div>
|
||||
<h4 className="text-[14px] font-semibold text-[#00293D] font-fractul mb-3">Property Type</h4>
|
||||
<div className="space-y-2">
|
||||
<FormCheckbox label="SFR" checked={formData.specialization.propertyType.sfr} onChange={() => {}} />
|
||||
<FormCheckbox label="Condo" checked={formData.specialization.propertyType.condo} onChange={() => {}} />
|
||||
<FormCheckbox label="Luxury" checked={formData.specialization.propertyType.luxury} onChange={() => {}} />
|
||||
<FormCheckbox label="Townhome" checked={formData.specialization.propertyType.townhome} onChange={() => {}} />
|
||||
<FormCheckbox label="Commercial" checked={formData.specialization.propertyType.commercial} onChange={() => {}} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Transaction Type */}
|
||||
<div>
|
||||
<h4 className="text-[14px] font-semibold text-[#00293D] font-fractul mb-3">Transaction Type</h4>
|
||||
<div className="space-y-2">
|
||||
<FormCheckbox label="Relocation" checked={formData.specialization.transactionType.relocation} onChange={() => {}} />
|
||||
<FormCheckbox label="Probate" checked={formData.specialization.transactionType.probate} onChange={() => {}} />
|
||||
<FormCheckbox label="Tax Lien" checked={formData.specialization.transactionType.taxLien} onChange={() => {}} />
|
||||
<FormCheckbox label="Traditional" checked={formData.specialization.transactionType.traditional} onChange={() => {}} />
|
||||
<FormCheckbox label="New Construction" checked={formData.specialization.transactionType.newConstruction} onChange={() => {}} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Loan Type */}
|
||||
<div>
|
||||
<h4 className="text-[14px] font-semibold text-[#00293D] font-fractul mb-3">Loan Type</h4>
|
||||
<div className="space-y-2">
|
||||
<FormCheckbox label="Conventional" checked={formData.specialization.loanType.conventional} onChange={() => {}} />
|
||||
<FormCheckbox label="FHA" checked={formData.specialization.loanType.fha} onChange={() => {}} />
|
||||
<FormCheckbox label="VA" checked={formData.specialization.loanType.va} onChange={() => {}} />
|
||||
<FormCheckbox label="USDA" checked={formData.specialization.loanType.usda} onChange={() => {}} />
|
||||
<FormCheckbox label="Reverse" checked={formData.specialization.loanType.reverse} onChange={() => {}} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Lifestyle Specialties */}
|
||||
<div>
|
||||
<h4 className="text-[14px] font-semibold text-[#00293D] font-fractul mb-3">Lifestyle Specialties</h4>
|
||||
<div className="space-y-2">
|
||||
<FormCheckbox label="Boating" checked={formData.specialization.lifestyleSpecialties.boating} onChange={() => {}} />
|
||||
<FormCheckbox label="Horses" checked={formData.specialization.lifestyleSpecialties.horses} onChange={() => {}} />
|
||||
<FormCheckbox label="RV" checked={formData.specialization.lifestyleSpecialties.rv} onChange={() => {}} />
|
||||
<FormCheckbox label="Automotive" checked={formData.specialization.lifestyleSpecialties.automotive} onChange={() => {}} />
|
||||
<FormCheckbox label="Aviation" checked={formData.specialization.lifestyleSpecialties.aviation} onChange={() => {}} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</FormSection>
|
||||
</div>
|
||||
|
||||
{/* Special Interests & Hobbies */}
|
||||
<div className="bg-white rounded-[20px] p-6">
|
||||
<FormSection id="hobbies" icon="/assets/icons/hobbies-icon.svg" title="Special Interests & Hobbies">
|
||||
<TagInput
|
||||
tags={formData.hobbies}
|
||||
onChange={(tags) => updateField('hobbies', tags)}
|
||||
placeholder="Add hobby..."
|
||||
/>
|
||||
</FormSection>
|
||||
</div>
|
||||
|
||||
{/* Certifications */}
|
||||
<div className="bg-white rounded-[20px] p-6">
|
||||
<FormSection id="certifications" icon="/assets/icons/certification-icon.svg" title="Professional Info">
|
||||
<p className="text-[12px] font-medium text-[#00293D]/70 font-serif mb-3">Certifications / Designations</p>
|
||||
<div className="space-y-2">
|
||||
{formData.certifications.map((cert, idx) => (
|
||||
<div key={idx} className="p-3 bg-gray-50 rounded-[10px]">
|
||||
<p className="text-[14px] font-semibold text-[#00293D] font-serif">{cert.name}</p>
|
||||
<p className="text-[12px] text-[#00293D]/70 font-serif">{cert.org}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</FormSection>
|
||||
</div>
|
||||
|
||||
{/* Availability */}
|
||||
<div className="bg-white rounded-[20px] p-6">
|
||||
<FormSection id="availability" icon="/assets/icons/availability-clock-icon.svg" title="Availability">
|
||||
<div className="flex flex-col md:flex-row gap-4">
|
||||
<FormSelect
|
||||
label="Availability"
|
||||
value={formData.availability.type}
|
||||
onChange={(value) =>
|
||||
updateField('availability', { ...formData.availability, type: value })
|
||||
}
|
||||
options={[
|
||||
{ value: 'Full Time Weekend', label: 'Full Time Weekend' },
|
||||
{ value: 'Part Time', label: 'Part Time' },
|
||||
{ value: 'Weekdays Only', label: 'Weekdays Only' },
|
||||
]}
|
||||
/>
|
||||
<FormSelect
|
||||
label="Work From Method"
|
||||
value={formData.availability.workFrom}
|
||||
onChange={(value) =>
|
||||
updateField('availability', { ...formData.availability, workFrom: value })
|
||||
}
|
||||
options={[
|
||||
{ value: 'Work from Method', label: 'Work from Method' },
|
||||
{ value: 'Remote', label: 'Remote' },
|
||||
{ value: 'In Office', label: 'In Office' },
|
||||
{ value: 'Hybrid', label: 'Hybrid' },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</FormSection>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex justify-end gap-4 pb-6">
|
||||
<button
|
||||
onClick={handleCancel}
|
||||
className="px-8 py-3 border border-[#00293D]/20 rounded-full text-[14px] font-semibold font-serif text-[#00293D] hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
className="px-8 py-3 bg-[#E58625] rounded-full text-[14px] font-semibold font-serif text-white hover:bg-[#E58625]/90 transition-colors"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user