From ee69817b7ad9adfda42568bcbe8aacaf2c606e23 Mon Sep 17 00:00:00 2001
From: meglerhagen <Christer.hagen@gmail.com>
Date: Thu, 27 Jun 2024 08:53:31 +0200
Subject: [PATCH] two tables done in new kontrat

---
 apps/www/src/actions/get-tenant-details.ts    |  18 +-
 .../(tenant)/tenant/[id]/contract/page.tsx    |   2 -
 .../_components/BuildingFormContract.tsx      | 245 +++++++++++++++
 .../_components/ReusableFormTemplate.tsx      | 295 ++++++++++++++++++
 .../tenant/[id]/contract2/building/page.tsx   |  58 ++++
 .../(tenant)/tenant/[id]/contract2/layout.tsx |  65 ++++
 .../(tenant)/tenant/[id]/contract2/page.tsx   |  51 +++
 .../tenant/_components/TenantDetailsForm.tsx  | 197 ++++++++++++
 .../tenant/[id]/contract2/tenant/page.tsx     |  56 ++++
 .../src/app/(tenant)/tenant/[id]/layout.tsx   |   5 +
 10 files changed, 988 insertions(+), 4 deletions(-)
 create mode 100644 apps/www/src/app/(tenant)/tenant/[id]/contract2/building/_components/BuildingFormContract.tsx
 create mode 100644 apps/www/src/app/(tenant)/tenant/[id]/contract2/building/_components/ReusableFormTemplate.tsx
 create mode 100644 apps/www/src/app/(tenant)/tenant/[id]/contract2/building/page.tsx
 create mode 100644 apps/www/src/app/(tenant)/tenant/[id]/contract2/layout.tsx
 create mode 100644 apps/www/src/app/(tenant)/tenant/[id]/contract2/page.tsx
 create mode 100644 apps/www/src/app/(tenant)/tenant/[id]/contract2/tenant/_components/TenantDetailsForm.tsx
 create mode 100644 apps/www/src/app/(tenant)/tenant/[id]/contract2/tenant/page.tsx

diff --git a/apps/www/src/actions/get-tenant-details.ts b/apps/www/src/actions/get-tenant-details.ts
index f983dcb..03f6455 100644
--- a/apps/www/src/actions/get-tenant-details.ts
+++ b/apps/www/src/actions/get-tenant-details.ts
@@ -3,7 +3,7 @@
 import { prisma } from "@/lib/db"
 import { getCurrentUser } from "@/lib/session"
 
-export async function getTenantDetails(tenantId: number) {
+export async function getTenantDetails(tenantId) {
   const user = await getCurrentUser()
   const userId = user?.id
 
@@ -71,7 +71,21 @@ export async function getTenantDetails(tenantId: number) {
       return null
     }
 
-    return tenant
+    // Fetch available floors and office spaces
+    const floors = await prisma.floor.findMany({
+      where: {
+        buildingId: building.id,
+      },
+      include: {
+        officeSpaces: {
+          where: {
+            isRented: false,
+          },
+        },
+      },
+    })
+
+    return { ...tenant, floors }
   } catch (error) {
     console.error("Error fetching tenant details:", error)
     return null
diff --git a/apps/www/src/app/(tenant)/tenant/[id]/contract/page.tsx b/apps/www/src/app/(tenant)/tenant/[id]/contract/page.tsx
index 8b9249d..870b7c9 100644
--- a/apps/www/src/app/(tenant)/tenant/[id]/contract/page.tsx
+++ b/apps/www/src/app/(tenant)/tenant/[id]/contract/page.tsx
@@ -4,8 +4,6 @@ import { getTenantDetails } from "@/actions/get-tenant-details"
 import { DashboardHeader } from "@/components/dashboard/header"
 import { DashboardShell } from "@/components/dashboard/shell"
 import { generateContractContent } from "@/components/editor/contractTemplate"
-import Editor from "@/components/editor/editor"
-import { initialContent } from "@/components/editor/initialContent"
 import TenantEditor from "@/components/editor/TenantEditor"
 import { EmptyPlaceholder } from "@/components/shared/empty-placeholder"
 
diff --git a/apps/www/src/app/(tenant)/tenant/[id]/contract2/building/_components/BuildingFormContract.tsx b/apps/www/src/app/(tenant)/tenant/[id]/contract2/building/_components/BuildingFormContract.tsx
new file mode 100644
index 0000000..e4ee0a1
--- /dev/null
+++ b/apps/www/src/app/(tenant)/tenant/[id]/contract2/building/_components/BuildingFormContract.tsx
@@ -0,0 +1,245 @@
+"use client"
+
+import { useState } from "react"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { toast } from "sonner"
+import { z } from "zod"
+
+import { Button } from "@dingify/ui/components/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@dingify/ui/components/card"
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@dingify/ui/components/form"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@dingify/ui/components/select"
+
+// Define the validation schema
+const IssueSchema = z.object({
+  building: z.string().min(1, "Bygning er påkrevd"),
+  property: z.string().min(1, "Eiendom er påkrevd"),
+  floor: z.string().min(1, "Etasje er påkrevd"),
+  officeSpace: z.string().min(1, "Kontorlokale er påkrevd"),
+})
+
+export function BuildingFormContract({ tenantDetails }) {
+  const [isLoading, setIsLoading] = useState(false)
+  const [selectedFloor, setSelectedFloor] = useState(
+    tenantDetails?.floor?.id?.toString() || "",
+  )
+
+  const form = useForm({
+    resolver: zodResolver(IssueSchema),
+    defaultValues: {
+      building: tenantDetails?.building?.id.toString() || "",
+      property: tenantDetails?.property?.id.toString() || "",
+      floor: tenantDetails?.floor?.id?.toString() || "",
+      officeSpace: tenantDetails?.officeSpace?.id?.toString() || "",
+    },
+  })
+
+  const onSubmit = async (data) => {
+    setIsLoading(true)
+
+    try {
+      const result = await submitIssue(data)
+
+      if (!result.success) {
+        throw new Error(result.error || "Failed to submit issue.")
+      }
+
+      toast.success("Informasjonen er nå lagret")
+      form.reset()
+    } catch (error) {
+      toast.error(error.message)
+      console.error(error)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  // Get office spaces for the selected floor
+  const officeSpaces = selectedFloor
+    ? tenantDetails.floors.find(
+        (floor) => floor.id.toString() === selectedFloor,
+      )?.officeSpaces || []
+    : []
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Lokaler</CardTitle>
+        <CardDescription>Hvordan lokale skal leies ut?</CardDescription>
+      </CardHeader>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+          <CardContent className="grid gap-6">
+            <div className="grid grid-cols-2 gap-4">
+              <FormField
+                control={form.control}
+                name="property"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Eiendom</FormLabel>
+                    <FormControl>
+                      <Select
+                        onValueChange={field.onChange}
+                        defaultValue={field.value}
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select property" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem
+                            value={tenantDetails.property.id.toString()}
+                          >
+                            {tenantDetails.property.name}
+                          </SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="building"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Byggning</FormLabel>
+                    <FormControl>
+                      <Select
+                        onValueChange={field.onChange}
+                        defaultValue={field.value}
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select building" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem
+                            value={tenantDetails.building.id.toString()}
+                          >
+                            {tenantDetails.building.name}
+                          </SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="floor"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Etasje</FormLabel>
+                    <FormControl>
+                      <Select
+                        onValueChange={(value) => {
+                          field.onChange(value)
+                          setSelectedFloor(value)
+                        }}
+                        defaultValue={field.value}
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Velg Etasje" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {tenantDetails.floors.length > 0 ? (
+                            tenantDetails.floors.map((floor) => (
+                              <SelectItem
+                                key={floor.id}
+                                value={floor.id.toString()}
+                              >
+                                {`Etasje ${floor.number}`}
+                              </SelectItem>
+                            ))
+                          ) : (
+                            <SelectItem disabled value="no-floors">
+                              Du må legge til etasjer
+                            </SelectItem>
+                          )}
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="officeSpace"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Kontorlokale</FormLabel>
+                    <FormControl>
+                      <Select
+                        onValueChange={field.onChange}
+                        defaultValue={field.value}
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Velg kontor" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {officeSpaces.length > 0 ? (
+                            officeSpaces.map((officeSpace) => (
+                              <SelectItem
+                                key={officeSpace.id}
+                                value={officeSpace.id.toString()}
+                              >
+                                {officeSpace.name}
+                              </SelectItem>
+                            ))
+                          ) : (
+                            <SelectItem disabled value="no-office-spaces">
+                              Du har ingen kontorlokale til etasjen
+                            </SelectItem>
+                          )}
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+          </CardContent>
+          <CardFooter className="justify-between space-x-2">
+            <Button type="submit" disabled={isLoading}>
+              {isLoading ? "Lagrer..." : "Lagre"}
+            </Button>
+          </CardFooter>
+        </form>
+      </Form>
+    </Card>
+  )
+}
+
+// Dummy function to simulate form submission
+async function submitIssue(data) {
+  // Simulate a delay
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve({ success: true })
+    }, 1000)
+  })
+}
diff --git a/apps/www/src/app/(tenant)/tenant/[id]/contract2/building/_components/ReusableFormTemplate.tsx b/apps/www/src/app/(tenant)/tenant/[id]/contract2/building/_components/ReusableFormTemplate.tsx
new file mode 100644
index 0000000..4c6ce5c
--- /dev/null
+++ b/apps/www/src/app/(tenant)/tenant/[id]/contract2/building/_components/ReusableFormTemplate.tsx
@@ -0,0 +1,295 @@
+"use client"
+
+import { useState } from "react"
+import Link from "next/link"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { CalendarIcon } from "@radix-ui/react-icons"
+import { format } from "date-fns"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+import { Button } from "@dingify/ui/components/button"
+import { Calendar } from "@dingify/ui/components/calendar"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@dingify/ui/components/card"
+import { Checkbox } from "@dingify/ui/components/checkbox"
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@dingify/ui/components/form"
+import { Input } from "@dingify/ui/components/input"
+import { Label } from "@dingify/ui/components/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@dingify/ui/components/popover"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@dingify/ui/components/select"
+import { Switch } from "@dingify/ui/components/switch"
+import { Textarea } from "@dingify/ui/components/textarea"
+import { toast } from "@dingify/ui/components/use-toast"
+
+import { cn } from "@/lib/utils"
+
+// Define the validation schema
+const FormSchema = z.object({
+  area: z.string().min(1, "Area is required"),
+  securityLevel: z.string().min(1, "Security Level is required"),
+  subject: z.string().min(1, "Subject is required"),
+  description: z.string().min(1, "Description is required"),
+  marketing_emails: z.boolean().default(false).optional(),
+  security_emails: z.boolean(),
+  mobile: z.boolean().default(false).optional(),
+  dob: z.date({
+    required_error: "A date of birth is required.",
+  }),
+})
+
+export function ReusableFormTemplate() {
+  const [isLoading, setIsLoading] = useState(false)
+
+  const form = useForm({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      area: "",
+      securityLevel: "",
+      subject: "",
+      description: "",
+      marketing_emails: false,
+      security_emails: true,
+      mobile: true,
+    },
+  })
+
+  const onSubmit = async (data) => {
+    setIsLoading(true)
+
+    try {
+      // Simulate form submission
+      const result = await submitForm(data)
+
+      if (!result.success) {
+        throw new Error(result.error || "Failed to submit form.")
+      }
+
+      toast.success(`Form submitted successfully`)
+      form.reset()
+    } catch (error) {
+      toast.error(error.message)
+      console.error(error)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Reusable Form Template</CardTitle>
+        <CardDescription>
+          This form includes various input types for comprehensive data
+          collection.
+        </CardDescription>
+      </CardHeader>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+          <CardContent className="grid gap-6">
+            <div className="grid grid-cols-2 gap-4">
+              <FormField
+                control={form.control}
+                name="area"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Area</FormLabel>
+                    <FormControl>
+                      <Select
+                        onValueChange={field.onChange}
+                        defaultValue={field.value}
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="team">Team</SelectItem>
+                          <SelectItem value="billing">Billing</SelectItem>
+                          <SelectItem value="account">Account</SelectItem>
+                          <SelectItem value="deployments">
+                            Deployments
+                          </SelectItem>
+                          <SelectItem value="support">Support</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="securityLevel"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Security Level</FormLabel>
+                    <FormControl>
+                      <Select
+                        onValueChange={field.onChange}
+                        defaultValue={field.value}
+                      >
+                        <SelectTrigger className="line-clamp-1 w-[160px] truncate">
+                          <SelectValue placeholder="Select level" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="1">
+                            Severity 1 (Highest)
+                          </SelectItem>
+                          <SelectItem value="2">Severity 2</SelectItem>
+                          <SelectItem value="3">Severity 3</SelectItem>
+                          <SelectItem value="4">Severity 4 (Lowest)</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+            <FormField
+              control={form.control}
+              name="subject"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Subject</FormLabel>
+                  <FormControl>
+                    <Input placeholder="I need help with..." {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="description"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Description</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      placeholder="Please include all information relevant to your issue."
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <div>
+              <h3 className="mb-4 text-lg font-medium">Email Notifications</h3>
+              <div className="space-y-4">
+                <FormField
+                  control={form.control}
+                  name="marketing_emails"
+                  render={({ field }) => (
+                    <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+                      <div className="space-y-0.5">
+                        <FormLabel>Marketing emails</FormLabel>
+                        <FormDescription>
+                          Receive emails about new products, features, and more.
+                        </FormDescription>
+                      </div>
+                      <FormControl>
+                        <Switch
+                          checked={field.value}
+                          onCheckedChange={field.onChange}
+                        />
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="security_emails"
+                  render={({ field }) => (
+                    <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+                      <div className="space-y-0.5">
+                        <FormLabel>Security emails</FormLabel>
+                        <FormDescription>
+                          Receive emails about your account security.
+                        </FormDescription>
+                      </div>
+                      <FormControl>
+                        <Switch
+                          checked={field.value}
+                          onCheckedChange={field.onChange}
+                          disabled
+                          aria-readonly
+                        />
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+              </div>
+            </div>
+            <FormField
+              control={form.control}
+              name="mobile"
+              render={({ field }) => (
+                <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4 shadow">
+                  <FormControl>
+                    <Checkbox
+                      checked={field.value}
+                      onCheckedChange={field.onChange}
+                    />
+                  </FormControl>
+                  <div className="space-y-1 leading-none">
+                    <FormLabel>
+                      Use different settings for my mobile devices
+                    </FormLabel>
+                    <FormDescription>
+                      You can manage your mobile notifications in the{" "}
+                      <Link href="/examples/forms">mobile settings</Link> page.
+                    </FormDescription>
+                  </div>
+                </FormItem>
+              )}
+            />
+          </CardContent>
+          <CardFooter className="justify-between space-x-2">
+            <Button variant="ghost" type="reset">
+              Cancel
+            </Button>
+            <Button type="submit" disabled={isLoading}>
+              {isLoading ? "Submitting..." : "Submit"}
+            </Button>
+          </CardFooter>
+        </form>
+      </Form>
+    </Card>
+  )
+}
+
+// Dummy function to simulate form submission
+async function submitForm(data) {
+  // Simulate a delay
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve({ success: true })
+    }, 1000)
+  })
+}
diff --git a/apps/www/src/app/(tenant)/tenant/[id]/contract2/building/page.tsx b/apps/www/src/app/(tenant)/tenant/[id]/contract2/building/page.tsx
new file mode 100644
index 0000000..d5fb912
--- /dev/null
+++ b/apps/www/src/app/(tenant)/tenant/[id]/contract2/building/page.tsx
@@ -0,0 +1,58 @@
+import React, { useState } from "react"
+import { getTenantDetails } from "@/actions/get-tenant-details"
+
+import { Card } from "@dingify/ui/components/card"
+
+import { DashboardHeader } from "@/components/dashboard/header"
+import { DashboardShell } from "@/components/dashboard/shell"
+import { generateContractContent } from "@/components/editor/contractTemplate"
+import Editor from "@/components/editor/editor"
+import { initialContent } from "@/components/editor/initialContent"
+import TenantEditor from "@/components/editor/TenantEditor"
+import { EmptyPlaceholder } from "@/components/shared/empty-placeholder"
+
+import { BuildingFormContract } from "./_components/BuildingFormContract"
+import { ReusableFormTemplate } from "./_components/ReusableFormTemplate"
+
+export default async function Home({ params }: { params: { id: string } }) {
+  const tenantId = parseInt(params.id)
+
+  try {
+    const tenantDetails = await getTenantDetails(tenantId)
+
+    if (tenantDetails?.name && parseInt(tenantDetails.name) > 0) {
+      return (
+        <DashboardShell>
+          <DashboardHeader
+            heading="Byggninger"
+            text="Hvordan byggning skal leietakeren inn i?"
+          />
+          <EmptyPlaceholder>
+            <EmptyPlaceholder.Icon name="help" />
+            <EmptyPlaceholder.Title>Du mangler følgende</EmptyPlaceholder.Title>
+            <EmptyPlaceholder.Description>
+              Placeholder
+            </EmptyPlaceholder.Description>
+          </EmptyPlaceholder>
+        </DashboardShell>
+      )
+    }
+
+    return (
+      <DashboardShell>
+        <DashboardHeader
+          heading="Byggninger"
+          text="Hvordan byggning skal leietakeren inn i?"
+        />
+        <BuildingFormContract tenantDetails={tenantDetails} />
+        {/* <ReusableFormTemplate /> */}
+      </DashboardShell>
+    )
+  } catch (error) {
+    return (
+      <DashboardShell>
+        <DashboardHeader heading="Error" text={error.message} />
+      </DashboardShell>
+    )
+  }
+}
diff --git a/apps/www/src/app/(tenant)/tenant/[id]/contract2/layout.tsx b/apps/www/src/app/(tenant)/tenant/[id]/contract2/layout.tsx
new file mode 100644
index 0000000..641d046
--- /dev/null
+++ b/apps/www/src/app/(tenant)/tenant/[id]/contract2/layout.tsx
@@ -0,0 +1,65 @@
+import type { SidebarNavItem } from "@/types"
+import { notFound } from "next/navigation"
+
+import { getCurrentUser } from "@/lib/session"
+import { DashboardNav } from "@/components/layout/nav"
+
+interface DashboardLayoutProps {
+  children?: React.ReactNode
+  params: { id: string }
+}
+
+export default async function DashboardLayout({
+  children,
+  params,
+}: DashboardLayoutProps) {
+  const user = await getCurrentUser()
+
+  if (!user) {
+    return notFound()
+  }
+
+  const sidebarNavItems: SidebarNavItem[] = [
+    {
+      title: "Eiendom",
+      href: `/tenant/${params.id}/contract2/building`,
+      icon: "home",
+    },
+    {
+      title: "Leietaker",
+      href: `/tenant/${params.id}/contract2/tenant`,
+      icon: "building",
+    },
+    {
+      title: "Utleie",
+      href: `/tenant/${params.id}/contactperson`,
+      icon: "user",
+    },
+    {
+      title: "Økonomi",
+      href: `/tenant/${params.id}/finance`,
+      icon: "piechart",
+    },
+    {
+      title: "Vilkår",
+      href: `/tenant/${params.id}/contract`,
+      icon: "filetext",
+    },
+    {
+      title: "Faktura",
+      href: `/tenant/${params.id}/invoice`,
+      icon: "billing",
+    },
+  ]
+
+  return (
+    <div className="grid flex-1 gap-12 md:grid-cols-[200px_1fr]">
+      <aside className="hidden w-[200px] flex-col md:flex">
+        <DashboardNav items={sidebarNavItems} />
+      </aside>
+      <div className="flex w-full flex-1 flex-col overflow-hidden">
+        {children}
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/src/app/(tenant)/tenant/[id]/contract2/page.tsx b/apps/www/src/app/(tenant)/tenant/[id]/contract2/page.tsx
new file mode 100644
index 0000000..a25a11a
--- /dev/null
+++ b/apps/www/src/app/(tenant)/tenant/[id]/contract2/page.tsx
@@ -0,0 +1,51 @@
+import React, { useState } from "react"
+import { getTenantDetails } from "@/actions/get-tenant-details"
+
+import { DashboardHeader } from "@/components/dashboard/header"
+import { DashboardShell } from "@/components/dashboard/shell"
+import { generateContractContent } from "@/components/editor/contractTemplate"
+import Editor from "@/components/editor/editor"
+import { initialContent } from "@/components/editor/initialContent"
+import TenantEditor from "@/components/editor/TenantEditor"
+import { EmptyPlaceholder } from "@/components/shared/empty-placeholder"
+
+export default async function Home({ params }: { params: { id: string } }) {
+  const tenantId = parseInt(params.id)
+
+  try {
+    const tenantDetails = await getTenantDetails(tenantId)
+
+    if (tenantDetails?.name && parseInt(tenantDetails.name) > 0) {
+      return (
+        <DashboardShell>
+          <DashboardHeader
+            heading="Kontrakter"
+            text="Du må fikse følgende før du kan lage kontrakt."
+          />
+          <EmptyPlaceholder>
+            <EmptyPlaceholder.Icon name="help" />
+            <EmptyPlaceholder.Title>Du mangler følgende</EmptyPlaceholder.Title>
+            <EmptyPlaceholder.Description>
+              Placeholder
+            </EmptyPlaceholder.Description>
+          </EmptyPlaceholder>
+        </DashboardShell>
+      )
+    }
+
+    return (
+      <DashboardShell>
+        <DashboardHeader
+          heading="Kontrakter"
+          text="Skriv kontrakt for din leietaker."
+        />
+      </DashboardShell>
+    )
+  } catch (error) {
+    return (
+      <DashboardShell>
+        <DashboardHeader heading="Error" text={error.message} />
+      </DashboardShell>
+    )
+  }
+}
diff --git a/apps/www/src/app/(tenant)/tenant/[id]/contract2/tenant/_components/TenantDetailsForm.tsx b/apps/www/src/app/(tenant)/tenant/[id]/contract2/tenant/_components/TenantDetailsForm.tsx
new file mode 100644
index 0000000..2a64f84
--- /dev/null
+++ b/apps/www/src/app/(tenant)/tenant/[id]/contract2/tenant/_components/TenantDetailsForm.tsx
@@ -0,0 +1,197 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { toast } from "sonner"
+import { z } from "zod"
+
+import { Button } from "@dingify/ui/components/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@dingify/ui/components/card"
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@dingify/ui/components/form"
+import { Input } from "@dingify/ui/components/input"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@dingify/ui/components/select"
+
+// Definer valideringsskjemaet
+const ContactSchema = z.object({
+  contactId: z.string().min(1, "Kontakt er påkrevd"),
+  name: z.string().min(1, "Navn er påkrevd"),
+  email: z.string().min(1, "E-post er påkrevd").email("Ugyldig e-postadresse"),
+  phone: z.string().min(1, "Telefon er påkrevd"),
+})
+
+export function TenantDetailsForm({ tenantDetails }) {
+  const [isLoading, setIsLoading] = useState(false)
+  const [selectedContact, setSelectedContact] = useState(null)
+
+  const form = useForm({
+    resolver: zodResolver(ContactSchema),
+    defaultValues: {
+      contactId: "",
+      name: "",
+      email: "",
+      phone: "",
+    },
+  })
+
+  useEffect(() => {
+    if (selectedContact) {
+      form.setValue("name", selectedContact.name)
+      form.setValue("email", selectedContact.email)
+      form.setValue("phone", selectedContact.phone)
+    }
+  }, [selectedContact, form.setValue])
+
+  const onSubmit = async (data) => {
+    setIsLoading(true)
+
+    try {
+      const result = await submitContactInfo(data)
+
+      if (!result.success) {
+        throw new Error(
+          result.error || "Kunne ikke sende inn kontaktinformasjon.",
+        )
+      }
+
+      toast.success("Kontaktinformasjon oppdatert")
+    } catch (error) {
+      toast.error(error.message)
+      console.error(error)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleContactChange = (value) => {
+    const contact = tenantDetails.contacts.find(
+      (contact) => contact.id.toString() === value,
+    )
+    setSelectedContact(contact)
+    form.setValue("contactId", value)
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Leietakerdetaljer</CardTitle>
+        <CardDescription>
+          Vis og oppdater kontaktinformasjon for leietakeren.
+        </CardDescription>
+      </CardHeader>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+          <CardContent className="grid gap-6">
+            <FormField
+              control={form.control}
+              name="contactId"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Kontakt</FormLabel>
+                  <FormControl>
+                    <Select
+                      onValueChange={(value) => {
+                        field.onChange(value)
+                        handleContactChange(value)
+                      }}
+                      defaultValue={field.value}
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Velg kontakt" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {tenantDetails.contacts.map((contact) => (
+                          <SelectItem
+                            key={contact.id}
+                            value={contact.id.toString()}
+                          >
+                            {contact.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Navn</FormLabel>
+                  <FormControl>
+                    <Input placeholder="Kontaktens navn" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="email"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>E-post</FormLabel>
+                  <FormControl>
+                    <Input placeholder="Kontaktens e-post" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="phone"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Telefon</FormLabel>
+                  <FormControl>
+                    <Input placeholder="Kontaktens telefonnummer" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </CardContent>
+          <CardFooter className="justify-between space-x-2">
+            <Button type="submit" disabled={isLoading}>
+              {isLoading ? "Lagrer..." : "Lagre"}
+            </Button>
+          </CardFooter>
+        </form>
+      </Form>
+    </Card>
+  )
+}
+
+// Dummy function to simulate form submission
+async function submitContactInfo(data) {
+  // Simuler en forsinkelse
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve({ success: true })
+    }, 1000)
+  })
+}
diff --git a/apps/www/src/app/(tenant)/tenant/[id]/contract2/tenant/page.tsx b/apps/www/src/app/(tenant)/tenant/[id]/contract2/tenant/page.tsx
new file mode 100644
index 0000000..8b98251
--- /dev/null
+++ b/apps/www/src/app/(tenant)/tenant/[id]/contract2/tenant/page.tsx
@@ -0,0 +1,56 @@
+import React, { useState } from "react"
+import { getTenantDetails } from "@/actions/get-tenant-details"
+
+import { Card } from "@dingify/ui/components/card"
+
+import { DashboardHeader } from "@/components/dashboard/header"
+import { DashboardShell } from "@/components/dashboard/shell"
+import { generateContractContent } from "@/components/editor/contractTemplate"
+import Editor from "@/components/editor/editor"
+import { initialContent } from "@/components/editor/initialContent"
+import TenantEditor from "@/components/editor/TenantEditor"
+import { EmptyPlaceholder } from "@/components/shared/empty-placeholder"
+
+import { TenantDetailsForm } from "./_components/TenantDetailsForm"
+
+export default async function Home({ params }: { params: { id: string } }) {
+  const tenantId = parseInt(params.id)
+
+  try {
+    const tenantDetails = await getTenantDetails(tenantId)
+
+    if (tenantDetails?.name && parseInt(tenantDetails.name) > 0) {
+      return (
+        <DashboardShell>
+          <DashboardHeader
+            heading="Byggninger"
+            text="Hvordan byggning skal leietakeren inn i?"
+          />
+          <EmptyPlaceholder>
+            <EmptyPlaceholder.Icon name="help" />
+            <EmptyPlaceholder.Title>Du mangler følgende</EmptyPlaceholder.Title>
+            <EmptyPlaceholder.Description>
+              Placeholder
+            </EmptyPlaceholder.Description>
+          </EmptyPlaceholder>
+        </DashboardShell>
+      )
+    }
+
+    return (
+      <DashboardShell>
+        <DashboardHeader
+          heading="Byggninger"
+          text="Hvordan byggning skal leietakeren inn i?"
+        />
+        <TenantDetailsForm tenantDetails={tenantDetails} />
+      </DashboardShell>
+    )
+  } catch (error) {
+    return (
+      <DashboardShell>
+        <DashboardHeader heading="Error" text={error.message} />
+      </DashboardShell>
+    )
+  }
+}
diff --git a/apps/www/src/app/(tenant)/tenant/[id]/layout.tsx b/apps/www/src/app/(tenant)/tenant/[id]/layout.tsx
index 0383190..47dda04 100644
--- a/apps/www/src/app/(tenant)/tenant/[id]/layout.tsx
+++ b/apps/www/src/app/(tenant)/tenant/[id]/layout.tsx
@@ -45,6 +45,11 @@ export default async function DashboardLayout({
       href: `/tenant/${params.id}/contract`,
       icon: "filetext",
     },
+    {
+      title: "Kontrakt v2",
+      href: `/tenant/${params.id}/contract2`,
+      icon: "filetext",
+    },
     {
       title: "Faktura",
       href: `/tenant/${params.id}/invoice`,