"use client"; import { useState } from "react"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Checkbox } from "@/components/ui/checkbox"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import { Upload, AlertCircle, CheckCircle2 } from "lucide-react"; import { toast } from "sonner"; /** * Design Philosophy: Professional & Clean * - Minimalist layout with clear visual hierarchy * - Conditional rendering based on checkbox state * - File upload with visual feedback * - Form validation and error handling */ interface FormData { firstName: string; lastName: string; email: string; mobileNumber: string; propertyAddress: string; numberOfUnits: string; intent: string; rentRoll: File | null; trailingMonthsFile: File | null; noTrailingMonths: boolean; } export default function Home() { const [formData, setFormData] = useState({ firstName: "", lastName: "", email: "", mobileNumber: "", propertyAddress: "", numberOfUnits: "", intent: "", rentRoll: null, trailingMonthsFile: null, noTrailingMonths: false, }); const [uploadedFiles, setUploadedFiles] = useState({ rentRoll: false, trailingMonths: false, }); const handleInputChange = (e: React.ChangeEvent) => { const { name, value } = e.target; setFormData((prev) => ({ ...prev, [name]: value, })); }; const handleSelectChange = (value: string) => { setFormData((prev) => ({ ...prev, intent: value, })); }; const handleCheckboxChange = (checked: boolean) => { setFormData((prev) => ({ ...prev, noTrailingMonths: checked, trailingMonthsFile: null, // Clear file if checkbox is checked })); setUploadedFiles((prev) => ({ ...prev, trailingMonths: false, })); }; const handleFileChange = ( e: React.ChangeEvent, fileType: "rentRoll" | "trailingMonths" ) => { const file = e.target.files?.[0]; if (file) { // Validate file type (PDF, Excel, etc.) const allowedTypes = [ "application/pdf", "application/vnd.ms-excel", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", ]; if (!allowedTypes.includes(file.type)) { toast.error("Please upload a PDF or Excel file"); return; } // Validate file size (max 10MB) if (file.size > 10 * 1024 * 1024) { toast.error("File size must be less than 10MB"); return; } setFormData((prev) => ({ ...prev, [fileType === "rentRoll" ? "rentRoll" : "trailingMonthsFile"]: file, })); setUploadedFiles((prev) => ({ ...prev, [fileType]: true, })); toast.success(`${file.name} uploaded successfully`); } }; const validateForm = () => { if (!formData.firstName.trim()) { toast.error("First name is required"); return false; } if (!formData.lastName.trim()) { toast.error("Last name is required"); return false; } if (!formData.email.trim()) { toast.error("Email is required"); return false; } if (!formData.mobileNumber.trim()) { toast.error("Mobile number is required"); return false; } if (!formData.propertyAddress.trim()) { toast.error("Property address is required"); return false; } if (!formData.numberOfUnits.trim()) { toast.error("Number of units is required"); return false; } if (!formData.intent) { toast.error("Please select an intent"); return false; } if (!uploadedFiles.rentRoll) { toast.error("Rent roll is required"); return false; } if (!formData.noTrailingMonths && !uploadedFiles.trailingMonths) { toast.error("Please upload trailing 12 months or check 'I don't have this yet'"); return false; } return true; }; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); if (!validateForm()) { return; } // Here you would typically send the form data to your backend console.log("Form submitted:", formData); toast.success("Form submitted successfully!"); // Reset form setFormData({ firstName: "", lastName: "", email: "", mobileNumber: "", propertyAddress: "", numberOfUnits: "", intent: "", rentRoll: null, trailingMonthsFile: null, noTrailingMonths: false, }); setUploadedFiles({ rentRoll: false, trailingMonths: false, }); }; return (

{/* Header */}

Value Range Intake

Apartments

{/* Form Card */} Property Information Please provide your property details and upload required documents

{/* Personal Information Section */}

Personal Information

First Name *

Last Name *

Email *

Mobile Number *

{/* Property Information Section */}

Property Information

Property Address *

Number of Units *

Intent *

{/* Document Upload Section */}

Document Upload

{/* Rent Roll Upload */}

Rent Roll *

handleFileChange(e, "rentRoll")} className="hidden" />

{uploadedFiles.rentRoll ? formData.rentRoll?.name : "Click to upload or drag and drop"}

{uploadedFiles.rentRoll && (

File uploaded successfully

)}

{/* Trailing 12 Months Upload with Conditional Checkbox */}

Trailing 12 Months * {/* Checkbox Option */}

I don't have this yet

{/* File Upload - Only show if checkbox is NOT checked */} {!formData.noTrailingMonths && (

handleFileChange(e, "trailingMonths")} className="hidden" />

{uploadedFiles.trailingMonths ? formData.trailingMonthsFile?.name : "Click to upload or drag and drop"}

{uploadedFiles.trailingMonths && (

File uploaded successfully

)}

)} {/* Info message when checkbox is checked */} {formData.noTrailingMonths && (

You can provide this document later if needed

)}

{/* Submit Button */}

{/* Footer Note */}

* Required fields

); }

NOI Navigator™

Get Started

Download the NOI Leak Audit

Request a 15-Minute NOI Diagnostic

Ready to find your NOI leaks?

NOI Navigator

Shafiq Hirani · Real Estate Advisor · RE/MAX Commercial