Migrate infer deal tab to new deal page

app/(protected)/infer/InferDealComponent.tsx

@@ -72,7 +72,7 @@ export const InferNewDealComponent = () => {
           Note:- Double check the output given by AI and save it accordingly
         </span>
       </div>
-      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-8 lg:gap-12">
+      <div className="space-y-8">
         <div>
           <Form {...form}>
             <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
@@ -102,19 +102,21 @@ export const InferNewDealComponent = () => {
             </form>
           </Form>
         </div>
-        <div>
+
+        <div className="space-y-4">
           <h2>Inferred Deal using ChatGPT</h2>
-          <div className="text-wrap">
+          <div className="text-wrap rounded-md border p-4 min-h-32">
             <pre
               style={{
                 whiteSpace: "pre-wrap",
                 wordWrap: "break-word",
                 overflowX: "hidden",
-                fontSize: "0.875rem", // Reduces the font size (14px)
+                fontSize: "0.875rem",
                 lineHeight: "1.2",
+                minHeight: "8rem",
               }}
             >
-              {generation}
+              {generation || "No deal generated yet."}
             </pre>
           </div>
           <div className="mt-4 flex items-center justify-between md:mt-6">
@@ -160,11 +162,9 @@ export const InferNewDealComponent = () => {
               <Save className="mr-2 size-4" />{" "}
               {saveDealPending ? "Saving..." : "Save Deal"}
             </Button>
-
-            {/* <EditInferDealDialog /> */}
           </div>
         </div>
       </div>
     </section>
   );
-};
+};

app/(protected)/new-deal/page.tsx

@@ -6,6 +6,7 @@ import { Button } from "@/components/ui/button";
 import CreateNewDealForm from "@/components/forms/new-deal-form";
 import { Metadata } from "next";
 import { BulkImportDialog } from "@/components/Dialogs/bulk-import-dialog";
+import { InferDealDialog } from "@/components/Dialogs/infer-deal-dialog";
 
 export const metadata: Metadata = {
   title: "Add New Deal",
@@ -55,11 +56,7 @@ const NewDealPage = async () => {
                 accordingly
               </p>
               <div className="flex justify-center">
-                <Button className="w-full" asChild>
-                  <Link href="/infer">
-                    <Bot className="mr-2 h-4 w-4" /> Infer Deal
-                  </Link>
-                </Button>
+              <InferDealDialog />
               </div>
             </div>
           </div>

components/Dialogs/infer-deal-dialog.tsx

@@ -0,0 +1,22 @@
+import { Dialog, DialogContent, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Bot } from "lucide-react";
+import { InferNewDealComponent } from "../../app/(protected)/infer/InferDealComponent";
+
+export const InferDealDialog = () => {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button className="w-full">
+          <Bot className="mr-2 h-4 w-4" /> Infer Deal
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="max-w-5xl h-[90vh] max-h-[800px] overflow-hidden flex flex-col">
+        <DialogTitle>Infer Deal</DialogTitle>
+        <div className="flex-1 overflow-y-auto pr-2">
+          <InferNewDealComponent />
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};

components/Header.tsx

@@ -42,7 +42,7 @@ export const NavLinks: NavLinkType = [
   { navlink: "/new-deal", navlabel: "New", icon: FiPlus },
   { navlink: "/raw-deals", navlabel: "Raw", icon: FiList },
   { navlink: "/published-deals", navlabel: "Published", icon: FiCheckSquare },
-  { navlink: "/infer", navlabel: "Infer", icon: FiSearch },
+  // { navlink: "/infer", navlabel: "Infer", icon: FiSearch },
 ];
 
 const Header = ({ className, session }: HeaderProps) => {