created initial api call to database to get portfolios

src/app/components/home/Card.tsx

@@ -1,8 +1,7 @@
-import { PortfolioStage } from "@/types/portfolio";
-import Link from "next/link";
-import React, { use } from "react";
+import React from "react";
 import StatusBadge from "@/app/components/StatusBadge";
 import { useRouter } from "next/navigation";
+import { PortfolioStatus } from "@/app/db/schema/portfolio";
 
 const styles = {
   wrapper:
@@ -15,11 +14,11 @@ const styles = {
 };
 
 interface CardProps {
-  id: string;
+  id: number;
   title: string;
   image: string;
-  budget: string;
-  status: PortfolioStage;
+  budget: number | null;
+  status: (typeof PortfolioStatus)[number];
 }
 
 const Card = ({ id, title, image, budget, status }: CardProps) => {

src/app/components/home/CardTiles.tsx

@@ -2,14 +2,9 @@
 
 import Card from "./Card";
 import AddNewCard from "./AddNewCard";
-import type { PortfolioStage } from "@/types/portfolio";
+import type { Portfolio } from "@/app/db/schema/portfolio";
 
-type PortfoliosType = Array<{
-  id: string;
-  title: string;
-  budget: string;
-  status: PortfolioStage;
-}>;
+type PortfoliosType = Array<Portfolio>;
 
 export default function CardTiles({
   Portfolios,
@@ -26,7 +21,7 @@ export default function CardTiles({
             <Card
               key={portfolio.id}
               id={portfolio.id}
-              title={portfolio.title}
+              title={portfolio.name}
               image={`house-icon-${image_idx}.svg`}
               budget={portfolio.budget}
               status={portfolio.status}

src/app/db/db.ts

@@ -1,8 +1,9 @@
 // db.ts
 import { drizzle } from "drizzle-orm/node-postgres";
 import { Pool } from "pg";
+import * as schema from "@/app/db/schema/portfolio";
 
-const pool = new Pool({
+export const pool = new Pool({
   host: process.env.DB_HOST,
   port: Number(process.env.DB_PORT),
   user: process.env.DB_USERNAME,
@@ -10,4 +11,4 @@ const pool = new Pool({
   database: process.env.DB_NAME,
 });
 
-export const db = drizzle(pool);
+export const db = drizzle(pool, { schema });

src/app/home/page.tsx

@@ -1,76 +1,15 @@
 import CardTiles from "../components/home/CardTiles";
-import type { PortfolioStage } from "@/types/portfolio";
+import getPortfolios from "./utils";
 
 const Home = async () => {
-  const Portfolios = [
-    {
-      id: "d290f1ee-6c54-4b01-90e6-d701748f0851",
-      title: "Manchester Home Col. 2023",
-      budget: "£500k",
-      status: "scoping" as PortfolioStage,
-    },
-    {
-      id: "d290f1ee-6c54-4b01-90e6-d701748f0852",
-      title: "Birmingham 2024 Ensemble",
-      budget: "£150k",
-      status: "assessment" as PortfolioStage,
-    },
-    {
-      id: "d290f1ee-6c54-4b01-90e6-d701748f0853",
-      title: "London Property Array 2025",
-      budget: "£1m",
-      status: "tendering" as PortfolioStage,
-    },
-    {
-      id: "d290f1ee-6c54-4b01-90e6-d701748f0854",
-      title: "Liverpool Estate Collection 2023",
-      budget: "£2m",
-      status: "tendering" as PortfolioStage,
-    },
-    {
-      id: "d290f1ee-6c54-4b01-90e6-d701748f0855",
-      title: "Leeds Abode Portfolio 2024",
-      budget: "250000",
-      status: "project underway" as PortfolioStage,
-    },
-    {
-      id: "d290f1ee-6c54-4b01-90e6-d701748f0856",
-      title: "Newcastle Project 2025",
-      budget: "£410k",
-      status: "completion; status 'on track'" as PortfolioStage,
-    },
-    {
-      id: "d290f1ee-6c54-4b01-90e6-d701748f0857",
-      title: "Sheffield Selection 2023",
-      budget: "£233k",
-      status: "completion; status 'delayed'" as PortfolioStage,
-    },
-    {
-      id: "d290f1ee-6c54-4b01-90e6-d701748f0858",
-      title: "Bristol Hearth Assemblage 2024",
-      budget: "£670k",
-      status: "completion; status 'at risk'" as PortfolioStage,
-    },
-    {
-      id: "d290f1ee-6c54-4b01-90e6-d701748f0859",
-      title: "Nottingham col. 2025",
-      budget: "£240k",
-      status: "completion; status 'completed'" as PortfolioStage,
-    },
-    {
-      id: "d290f1ee-6c54-4b01-90e6-d701748f0860",
-      title: "Cardiff Homestead Set 2023",
-      budget: "93k",
-      status: "needs review" as PortfolioStage,
-    },
-  ];
+  const portfolios = await getPortfolios(2);
 
   return (
     <>
       <div className="flex justify-center">
         <h1 className="text-3xl font-bold mt-3 mb-5"> Your Portfolios </h1>
       </div>
-      <CardTiles Portfolios={Portfolios} />
+      <CardTiles Portfolios={portfolios} />
     </>
   );
 };

src/types/portfolio.ts

@@ -1,12 +0,0 @@
-type PortfolioStage =
-  | "scoping"
-  | "assessment"
-  | "tendering"
-  | "project underway"
-  | "completion; status 'on track'"
-  | "completion; status 'delayed'"
-  | "completion; status 'at risk'"
-  | "completion; status 'completed'"
-  | "needs review";
-
-export type { PortfolioStage };