Display Networks on Sites

app/api/sites/get_all/route.ts

@@ -30,6 +30,9 @@ export async function GET(request: NextRequest) {
                     mode: "insensitive",
                 },
             },
+            include: {
+                networks: true,
+            },
         });
         const total = await prisma.site.count({
             where: {

app/dashboard/sites/SitesPage.tsx

@@ -24,6 +24,7 @@ export default function SitesPage({ username, name }: SitesPageProps) {
         setItemPerPage,
         loadSites
     } = useSites();
+    console.log(sites);
 
     return (
         <Sidebar 

components/cards/Sites.tsx

@@ -5,7 +5,15 @@ interface SitesProps {
     id: string;
     name: string;
     description: string;
-    networks: string[];
+    networks: Network[];
+}
+
+interface Network {
+    id: number;
+    name: string;
+    ipv4Subnet?: string;
+    ipv6Subnet?: string;
+    gateway?: string;
 }
 
 export default function Sites({ id, name, description, networks }: SitesProps) {
@@ -16,7 +24,7 @@ export default function Sites({ id, name, description, networks }: SitesProps) {
                 <h2 className="card-title">{name}</h2>
                 <p>{description}</p>
                 { networks && networks.length > 0 && (
-                    <p>Networks: {networks.join(', ')}</p>
+                    <p>Networks: {networks.map((network) => network.name).join(", ")}</p>
                 )}
                 <div className="card-actions justify-end">
                     <button className="btn btn-secondary btn-sm btn-outline" onClick={() => router.push(`/dashboard/sites/${id}`)}>View</button>