From 5fc28117d2df71cb0ba107341d79e20da64037df Mon Sep 17 00:00:00 2001 From: pradeepkumar Date: Sun, 18 Jan 2026 21:21:17 +0530 Subject: [PATCH] feat: Implement agent profile editing page with new form components, icons, and dashboard integration. --- public/assets/icons/areas-icon.svg | 6 + public/assets/icons/attachment-icon.svg | 3 + public/assets/icons/bio-icon.svg | 6 + public/assets/icons/business-icon.svg | 6 + public/assets/icons/certification-icon.svg | 4 + public/assets/icons/contact-icon.svg | 4 + public/assets/icons/contract-icon.svg | 6 + public/assets/icons/document-icon.svg | 4 + public/assets/icons/expertise-icon.svg | 9 + public/assets/icons/hobbies-icon.svg | 4 + public/assets/icons/price-icon.svg | 5 + public/assets/icons/professional-icon.svg | 7 + public/assets/icons/specialization-icon.svg | 6 + public/assets/icons/upload-icon.svg | 6 + public/assets/icons/user-icon.svg | 4 + .../dashboard/component/ProfileHeader.tsx | 62 +- src/app/(agent)/agent/dashboard/page.tsx | 8 +- .../agent/edit/components/FileUpload.tsx | 86 +++ .../agent/edit/components/FormCheckbox.tsx | 21 + .../agent/edit/components/FormInput.tsx | 28 + .../agent/edit/components/FormSection.tsx | 34 + .../agent/edit/components/FormSelect.tsx | 41 ++ .../agent/edit/components/FormTextarea.tsx | 35 + .../agent/edit/components/QuickLinks.tsx | 54 ++ .../agent/edit/components/TagInput.tsx | 58 ++ .../(agent)/agent/edit/components/index.ts | 8 + src/app/(agent)/agent/edit/page.tsx | 631 ++++++++++++++++++ 27 files changed, 1116 insertions(+), 30 deletions(-) create mode 100644 public/assets/icons/areas-icon.svg create mode 100644 public/assets/icons/attachment-icon.svg create mode 100644 public/assets/icons/bio-icon.svg create mode 100644 public/assets/icons/business-icon.svg create mode 100644 public/assets/icons/certification-icon.svg create mode 100644 public/assets/icons/contact-icon.svg create mode 100644 public/assets/icons/contract-icon.svg create mode 100644 public/assets/icons/document-icon.svg create mode 100644 public/assets/icons/expertise-icon.svg create mode 100644 public/assets/icons/hobbies-icon.svg create mode 100644 public/assets/icons/price-icon.svg create mode 100644 public/assets/icons/professional-icon.svg create mode 100644 public/assets/icons/specialization-icon.svg create mode 100644 public/assets/icons/upload-icon.svg create mode 100644 public/assets/icons/user-icon.svg create mode 100644 src/app/(agent)/agent/edit/components/FileUpload.tsx create mode 100644 src/app/(agent)/agent/edit/components/FormCheckbox.tsx create mode 100644 src/app/(agent)/agent/edit/components/FormInput.tsx create mode 100644 src/app/(agent)/agent/edit/components/FormSection.tsx create mode 100644 src/app/(agent)/agent/edit/components/FormSelect.tsx create mode 100644 src/app/(agent)/agent/edit/components/FormTextarea.tsx create mode 100644 src/app/(agent)/agent/edit/components/QuickLinks.tsx create mode 100644 src/app/(agent)/agent/edit/components/TagInput.tsx create mode 100644 src/app/(agent)/agent/edit/components/index.ts create mode 100644 src/app/(agent)/agent/edit/page.tsx diff --git a/public/assets/icons/areas-icon.svg b/public/assets/icons/areas-icon.svg new file mode 100644 index 0000000..697ca76 --- /dev/null +++ b/public/assets/icons/areas-icon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/assets/icons/attachment-icon.svg b/public/assets/icons/attachment-icon.svg new file mode 100644 index 0000000..3caccd6 --- /dev/null +++ b/public/assets/icons/attachment-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/icons/bio-icon.svg b/public/assets/icons/bio-icon.svg new file mode 100644 index 0000000..1bae899 --- /dev/null +++ b/public/assets/icons/bio-icon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/assets/icons/business-icon.svg b/public/assets/icons/business-icon.svg new file mode 100644 index 0000000..68ed022 --- /dev/null +++ b/public/assets/icons/business-icon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/assets/icons/certification-icon.svg b/public/assets/icons/certification-icon.svg new file mode 100644 index 0000000..a0a7c5f --- /dev/null +++ b/public/assets/icons/certification-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/assets/icons/contact-icon.svg b/public/assets/icons/contact-icon.svg new file mode 100644 index 0000000..f338488 --- /dev/null +++ b/public/assets/icons/contact-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/assets/icons/contract-icon.svg b/public/assets/icons/contract-icon.svg new file mode 100644 index 0000000..7a257ff --- /dev/null +++ b/public/assets/icons/contract-icon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/assets/icons/document-icon.svg b/public/assets/icons/document-icon.svg new file mode 100644 index 0000000..68c5739 --- /dev/null +++ b/public/assets/icons/document-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/assets/icons/expertise-icon.svg b/public/assets/icons/expertise-icon.svg new file mode 100644 index 0000000..db81f42 --- /dev/null +++ b/public/assets/icons/expertise-icon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/assets/icons/hobbies-icon.svg b/public/assets/icons/hobbies-icon.svg new file mode 100644 index 0000000..22a281f --- /dev/null +++ b/public/assets/icons/hobbies-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/assets/icons/price-icon.svg b/public/assets/icons/price-icon.svg new file mode 100644 index 0000000..4ca2c39 --- /dev/null +++ b/public/assets/icons/price-icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/assets/icons/professional-icon.svg b/public/assets/icons/professional-icon.svg new file mode 100644 index 0000000..f7df5bc --- /dev/null +++ b/public/assets/icons/professional-icon.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/assets/icons/specialization-icon.svg b/public/assets/icons/specialization-icon.svg new file mode 100644 index 0000000..7fc4364 --- /dev/null +++ b/public/assets/icons/specialization-icon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/assets/icons/upload-icon.svg b/public/assets/icons/upload-icon.svg new file mode 100644 index 0000000..cb37477 --- /dev/null +++ b/public/assets/icons/upload-icon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/assets/icons/user-icon.svg b/public/assets/icons/user-icon.svg new file mode 100644 index 0000000..c448329 --- /dev/null +++ b/public/assets/icons/user-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/app/(agent)/agent/dashboard/component/ProfileHeader.tsx b/src/app/(agent)/agent/dashboard/component/ProfileHeader.tsx index 311573e..03efdab 100644 --- a/src/app/(agent)/agent/dashboard/component/ProfileHeader.tsx +++ b/src/app/(agent)/agent/dashboard/component/ProfileHeader.tsx @@ -87,34 +87,40 @@ export function ProfileHeader({ {/* Action Buttons */}
- - +
+ + +
+
+ + +
diff --git a/src/app/(agent)/agent/dashboard/page.tsx b/src/app/(agent)/agent/dashboard/page.tsx index 0ec6fbc..fa4a21a 100644 --- a/src/app/(agent)/agent/dashboard/page.tsx +++ b/src/app/(agent)/agent/dashboard/page.tsx @@ -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() {
{/* Edit Icon - Top Right Outside */} - + {/* Status Buttons */} diff --git a/src/app/(agent)/agent/edit/components/FileUpload.tsx b/src/app/(agent)/agent/edit/components/FileUpload.tsx new file mode 100644 index 0000000..25c3016 --- /dev/null +++ b/src/app/(agent)/agent/edit/components/FileUpload.tsx @@ -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(null); + + const handleClick = () => { + fileInputRef.current?.click(); + }; + + const handleChange = (e: React.ChangeEvent) => { + 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 ( +
+ +

+ Drag and drop files here or click to upload files to provide documentation or verification for licensing credentials. +

+

+ {acceptedTypes.split(',').join(', ')} and more are accepted +

+ +
+ ); +} + +interface AttachedFileProps { + fileName: string; + onRemove: () => void; +} + +export function AttachedFile({ fileName, onRemove }: AttachedFileProps) { + return ( +
+
+ Document + {fileName} +
+ +
+ ); +} diff --git a/src/app/(agent)/agent/edit/components/FormCheckbox.tsx b/src/app/(agent)/agent/edit/components/FormCheckbox.tsx new file mode 100644 index 0000000..2cc1efa --- /dev/null +++ b/src/app/(agent)/agent/edit/components/FormCheckbox.tsx @@ -0,0 +1,21 @@ +'use client'; + +interface FormCheckboxProps { + label: string; + checked: boolean; + onChange: (checked: boolean) => void; +} + +export function FormCheckbox({ label, checked, onChange }: FormCheckboxProps) { + return ( + + ); +} diff --git a/src/app/(agent)/agent/edit/components/FormInput.tsx b/src/app/(agent)/agent/edit/components/FormInput.tsx new file mode 100644 index 0000000..aac1fdf --- /dev/null +++ b/src/app/(agent)/agent/edit/components/FormInput.tsx @@ -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 ( +
+ + 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" + /> +
+ ); +} diff --git a/src/app/(agent)/agent/edit/components/FormSection.tsx b/src/app/(agent)/agent/edit/components/FormSection.tsx new file mode 100644 index 0000000..28986e3 --- /dev/null +++ b/src/app/(agent)/agent/edit/components/FormSection.tsx @@ -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 ( +
+
+
+ {title} +

{title}

+
+ {showEdit && onEdit && ( + + )} +
+ {children} +
+ ); +} diff --git a/src/app/(agent)/agent/edit/components/FormSelect.tsx b/src/app/(agent)/agent/edit/components/FormSelect.tsx new file mode 100644 index 0000000..26c99e1 --- /dev/null +++ b/src/app/(agent)/agent/edit/components/FormSelect.tsx @@ -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 ( +
+ + +
+ ); +} diff --git a/src/app/(agent)/agent/edit/components/FormTextarea.tsx b/src/app/(agent)/agent/edit/components/FormTextarea.tsx new file mode 100644 index 0000000..e335713 --- /dev/null +++ b/src/app/(agent)/agent/edit/components/FormTextarea.tsx @@ -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 ( +
+ {label && ( + + )} +