added modal to allow frontend to be ready

src/app/portfolio/[slug]/components/BookSurveyModal.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/app/shadcn_components/ui/dialog";
+import { Button } from "@/app/shadcn_components/ui/button";
+import { Input } from "@/app/shadcn_components/ui/input";
+import { Label } from "@/app/shadcn_components/ui/label";
+import { useState, useEffect } from "react";
+
+interface BookSurveyModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export default function BookSurveyModal({ open, onOpenChange }: BookSurveyModalProps) {
+  const [formData, setFormData] = useState({
+    deal_name: "",
+  });
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    console.log("Form submitted:", formData);
+    onOpenChange(false); // ✅ close on submit
+  };
+
+  // ✅ Reset form whenever modal closes
+  useEffect(() => {
+    if (!open) {
+      setFormData({ deal_name: ""});
+    }
+  }, [open]);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Book a Survey</DialogTitle>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <Label htmlFor="name">Name</Label>
+            <Input
+              id="name"
+              name="name"
+              value={formData.deal_name}
+              onChange={handleChange}
+              placeholder="Enter your name"
+              required
+            />
+          </div>
+
+          <DialogFooter>
+            <Button type="submit" className="w-full">
+              Submit
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+
+// TODO:
+// 1) When I press the submit button
+//      * Call to Next JS backend to upload a deal in hubspot CRM
+//      * update information in Db
+// 2) Show khalim weird dialog button when closing dialog
+// 3) Make it functional per individual deal instead of just one
+// Push to production after MR with Khalim

src/app/portfolio/[slug]/components/propertyTableColumns.tsx

@@ -21,6 +21,9 @@ import {
   PropertyToRecommendation,
   PropertyWithRelations,
 } from "@/app/db/schema/property";
+import BookSurveyModal from "./BookSurveyModal";
+import { useState } from "react";
+
 
 interface DataTableColumnHeaderProps<TData, TValue>
   extends React.HTMLAttributes<HTMLDivElement> {
@@ -40,11 +43,13 @@ const EpcLetterBubble = ({ letter }: { letter: string }) => {
   );
 };
 
+
 export function DataTableFilterHeader<TData, TValue>({
   column,
   title,
   className,
 }: DataTableColumnHeaderProps<TData, TValue>) {
+
   if (!column.getCanSort()) {
     return <div className={cn(className)}>{title}</div>;
   }
@@ -212,6 +217,7 @@ export const columns: ColumnDef<PropertyWithRelations>[] = [
   {
     id: "actions",
     cell: ({ row }) => {
+      const [openModal, setOpenModal] = useState(false);
       const property = row.original;
       const propertyId = property.id;
       const portfolioId = property.portfolioId;
@@ -236,7 +242,7 @@ export const columns: ColumnDef<PropertyWithRelations>[] = [
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
               <DropdownMenuLabel>Actions</DropdownMenuLabel>
-              <DropdownMenuItem onClick={()=> console.log("hello junte")}>
+              <DropdownMenuItem onClick={()=> setOpenModal(true)}>
                 Book a survey
               </DropdownMenuItem>
               <DropdownMenuItem
@@ -257,6 +263,10 @@ export const columns: ColumnDef<PropertyWithRelations>[] = [
               </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>
+          {/* ✅ Render modal outside dropdown context */}
+          {openModal && (
+            <BookSurveyModal open={openModal} onOpenChange={setOpenModal} />
+          )}
         </div>
       );
     },