Merge pull request #13 from Codehagen/updateinfocard

Update UI Infocard

apps/www/src/app/(property)/property/[id]/page.tsx

@@ -1,6 +1,16 @@
 import Link from "next/link";
 import { getPropertyDetails } from "@/actions/get-property-details";
 
+import { Badge } from "@dingify/ui/components/badge";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@dingify/ui/components/card";
+
 import { AddBuildingSheet } from "@/components/buttons/AddBuildingSheet";
 import { DashboardHeader } from "@/components/dashboard/header";
 import { DashboardShell } from "@/components/dashboard/shell";
@@ -50,28 +60,61 @@ export default async function PropertyPage({
           {propertyDetails.buildings.length === 0 ? (
             <EmptyPlaceholder>
               <EmptyPlaceholder.Icon name="building" />
-              <EmptyPlaceholder.Title>
-                Ingen bygg
-              </EmptyPlaceholder.Title>
+              <EmptyPlaceholder.Title>Ingen bygg</EmptyPlaceholder.Title>
               <EmptyPlaceholder.Description>
                 Legg til bygninger som er tilknyttet eiendommen.
               </EmptyPlaceholder.Description>
               <AddBuildingSheet propertyId={propertyId} />
             </EmptyPlaceholder>
           ) : (
-            <div>
-              <h4>Buildings:</h4>
-              <ul>
-                {propertyDetails.buildings.map((building) => (
-                  <li key={building.id}>
-                    <Link
-                      href={`/property/${propertyId}/building/${building.id}`}
-                    >
-                      {building.name}
-                    </Link>
-                  </li>
-                ))}
-              </ul>
+            <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+              {propertyDetails.buildings.map((building) => (
+                <Card key={building.id} className="overflow-hidden">
+                  <CardHeader className="flex flex-row items-start bg-muted/50">
+                    <div className="grid gap-0.5">
+                      <CardTitle className="group flex items-center gap-2 text-lg">
+                        <Link
+                          href={`/property/${propertyId}/building/${building.id}`}
+                        >
+                          {building.name}
+                        </Link>
+                      </CardTitle>
+                    </div>
+                  </CardHeader>
+                  <CardContent className="p-6 text-sm">
+                    <div className="grid gap-3">
+                      <div className="font-semibold">Detaljer</div>
+                      <ul className="grid gap-3">
+                        <li className="flex items-center justify-between">
+                          <span className="text-muted-foreground">Navn</span>
+                          <span>{building.name}</span>
+                        </li>
+                        <li className="flex items-center justify-between">
+                          <span className="text-muted-foreground">Adresse</span>
+                          <span>{building.address || "Ingen adresse"}</span>
+                        </li>
+                        <li className="flex items-center justify-between">
+                          <span className="text-muted-foreground">
+                            Type bygg
+                          </span>
+                          <span>{building.gnr || "Ingen type"}</span>
+                        </li>
+                        <li className="flex items-center justify-between">
+                          <span className="text-muted-foreground">
+                            Størrelse
+                          </span>
+                          <span>{building.bnr || "Ingen størrelse"} kvm</span>
+                        </li>
+                      </ul>
+                    </div>
+                  </CardContent>
+                  <CardFooter className="flex flex-row items-center border-t bg-muted/50 px-6 py-3">
+                    <div className="text-xs text-muted-foreground">
+                      {/* Footer content if needed */}
+                    </div>
+                  </CardFooter>
+                </Card>
+              ))}
             </div>
           )}
         </div>

apps/www/src/app/(property)/property/page.tsx

@@ -57,6 +57,8 @@ export default async function PropertyPage() {
     );
   }
 
+  //TODO - Make function to fetch properties somewhere else
+  //TODO Make types for properties
   // Fetch properties associated with the user's workspace
   const properties: any = await prisma.property.findMany({
     where: {
@@ -66,6 +68,37 @@ export default async function PropertyPage() {
       id: true,
       name: true,
       createdAt: true,
+      buildings: {
+        select: {
+          id: true,
+          name: true,
+          address: true,
+          floors: {
+            select: {
+              maxTotalKvm: true,
+            },
+          },
+        },
+      },
+      tenants: {
+        select: {
+          id: true,
+          name: true,
+        },
+      },
+      contracts: {
+        select: {
+          id: true,
+          startDate: true,
+          endDate: true,
+        },
+      },
+      analysis: {
+        select: {
+          id: true,
+          // Add fields related to financial analysis
+        },
+      },
     },
     orderBy: {
       createdAt: "desc",
@@ -90,7 +123,11 @@ export default async function PropertyPage() {
             <AddPropertyButton />
           </EmptyPlaceholder>
         ) : (
-          <DataTable type="property" columns={PropertyColumns} data={properties} />
+          <DataTable
+            type="property"
+            columns={PropertyColumns}
+            data={properties}
+          />
         )}
       </div>
     </DashboardShell>

apps/www/src/components/buttons/AddBuildingSheet.tsx

@@ -84,7 +84,7 @@ export function AddBuildingSheet({ propertyId }) {
   return (
     <Sheet>
       <SheetTrigger asChild>
-        <Button variant="outline">Add New Building</Button>
+        <Button variant="outline">Legg til ny byggning</Button>
       </SheetTrigger>
       <SheetContent>
         <SheetHeader>

apps/www/src/components/command-window.tsx

@@ -1,34 +1,54 @@
-"use client"
+"use client";
 
-import { CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@dingify/ui/components/command"
-import Link from "next/link"
-import { useEffect, useState } from "react"
+import { useEffect, useState } from "react";
+import Link from "next/link";
+
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@dingify/ui/components/command";
 
 export default function GlobalSearch() {
-    const [open, setOpen] = useState(false)
-
-    useEffect(() => {
-      const down = (e: KeyboardEvent) => {
-        if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
-          e.preventDefault()
-          setOpen((open) => !open)
-        }
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        setOpen((open) => !open);
       }
-      document.addEventListener("keydown", down)
-      return () => document.removeEventListener("keydown", down)
-    }, [])
-
-    return (
-      <CommandDialog open={open} onOpenChange={setOpen}>
-        <CommandInput placeholder="Type a command or search..." />
-        <CommandList>
-          <CommandEmpty>No results found.</CommandEmpty>
-          <CommandGroup heading="Suggestions">
-            <CommandItem><Link className="w-full" href="/property">Eiendommer</Link></CommandItem>
-            <CommandItem><Link className="w-full" href="/tenant">Leietakere</Link></CommandItem>
-            <CommandItem><Link className="w-full" href="/analytics">Analyser</Link></CommandItem>
-          </CommandGroup>
-        </CommandList>
-      </CommandDialog>
-    )
-}
+    };
+    document.addEventListener("keydown", down);
+    return () => document.removeEventListener("keydown", down);
+  }, []);
+
+  return (
+    <CommandDialog open={open} onOpenChange={setOpen}>
+      <CommandInput placeholder="Skriv hva du søker etter..." />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        <CommandGroup heading="Suggestions">
+          <CommandItem>
+            <Link className="w-full" href="/property">
+              Eiendommer
+            </Link>
+          </CommandItem>
+          <CommandItem>
+            <Link className="w-full" href="/tenant">
+              Leietakere
+            </Link>
+          </CommandItem>
+          <CommandItem>
+            <Link className="w-full" href="/analytics">
+              Analyser
+            </Link>
+          </CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </CommandDialog>
+  );
+}