Design changes

.env

@@ -0,0 +1,3 @@
+#This file current does nothing, but is here for future use.
+URL=http://caddy.example.com
+CADDY_API=http://192.168.1.69:2019

.gitignore

@@ -20,6 +20,8 @@ package-lock.json
 .DS_Store
 *.pem
 
+.env
+
 # debug
 npm-debug.log*
 yarn-debug.log*

app/page.tsx

@@ -1,6 +1,3 @@
-"use client"
-
-
 import { useRoutes } from '@/lib/clientActions';
 import Image from 'next/image';
 import Loading from '@/components/Loading';
@@ -9,25 +6,20 @@ import { useState } from 'react';
 import { RouteDialog } from '@/components/RouteDialog';
 import Header from '@/components/Header';
 import RouteCards from '@/components/RouteCards';
+import { SWRConfig } from 'swr';
 
 
 export default function Home() {
 
-  const { data: routes, error, isLoading } = useRoutes();
-  let routesMap: Route[] = routes as Route[];
-
-  if (error) return <Error />
-  if (isLoading) return <Loading />
-
   return (
     <main>
-      
+
       <div>
-        <Header routes={routesMap} />
+        <Header />
       </div>
 
-      <div className='grid grid-flow-row-dense md:grid-cols-6 sm:grid-cols-2 p-2'>
+      <div className='flex flex-grid p-2 flex-wrap justify-center gap-2'>
-        <RouteCards routes={routesMap} />
+        <RouteCards />
       </div>
     </main>
   )

components/Error.tsx

@@ -11,15 +11,17 @@ export default function Error() {
 
     return (
         <div className='flex justify-center'>
-            <Card>
+            <div className="flex justify-center items-center min-h-screen h-[90vh]">
-                <CardHeader>
+                <Card>
-                    <CardTitle>Error</CardTitle>
+                    <CardHeader>
-                    <CardDescription>There was an error fetching your data</CardDescription>
+                        <CardTitle>Error</CardTitle>
-                </CardHeader>
+                        <CardDescription>There was an error fetching your data</CardDescription>
-                <CardFooter className="flex justify-center">
+                    </CardHeader>
-                    <Button onClick={handleRefresh}>Retry</Button>
+                    <CardFooter className="flex justify-center">
-                </CardFooter>
+                        <Button onClick={handleRefresh}>Retry</Button>
-            </Card>
+                    </CardFooter>
+                </Card>
+            </div>
         </div>
     )
 }

components/Header.tsx

@@ -0,0 +1,68 @@
+"use client"
+
+import { CardTitle, Card, CardDescription, CardHeader, CardContent, CardFooter } from '@/components/ui/card';
+import RouteCards from '@/components/RouteCards';
+import { Button } from '@/components/ui/button';
+import { useState } from 'react';
+import { useRoutes } from '@/lib/clientActions';
+import Error from './Error';
+import Loading from './Loading';
+import { RouteDialog } from './RouteDialog';
+
+export default function Header() {
+    
+    const { data: routes, error, isLoading } = useRoutes();
+    let routesMap: Route[] = routes as Route[];
+
+    const [route, setRoute] = useState<Route>();
+    const [open, setOpen] = useState(false);
+
+    return (
+        <>
+            {route && <RouteDialog open={open} onOpenChange={setOpen} route={route} routesMap={routesMap} />}
+
+            <div className='flex items-center justify-center py-6'>
+                <Card className='flex'>
+                    <CardHeader>
+                        <CardTitle>Active Routes</CardTitle>
+                        <CardDescription>Amount of configured routes</CardDescription>
+                    </CardHeader>
+                    <CardContent className='flex items-center'>
+                        <div>
+                            <p className='text-xl font-semibold translate-y-2'>{routesMap?.length}</p>
+                        </div>
+                    </CardContent>
+                    <CardFooter>
+                        <Button onClick={() => {
+                            setRoute({
+                                "handle": [
+                                    {
+                                        "handler": "subroute",
+                                        "routes": [
+                                            {
+                                                "handle": [
+                                                    {
+                                                        "handler": "reverse_proxy",
+                                                        "upstreams": []
+                                                    }
+                                                ]
+                                            }
+                                        ]
+                                    }
+                                ],
+                                "match": [
+                                    {
+                                        "host": []
+                                    }
+                                ],
+                                "terminal": true
+                            })
+                            setOpen(true);
+                        }} className='translate-y-2.5'>Create</Button>
+                    </CardFooter>
+                </Card>
+            </div>
+
+        </>
+    )
+}

components/Loading.tsx

@@ -3,8 +3,10 @@ import Image from "next/image";
 export default function Loading() {
     return (
         <div className='flex justify-center'>
-            <Image src="/loading.svg" alt="Loading" width={25} height={25} />
+            <div className="flex items-center min-h-screen h-[90vh]">
-            <p className='p-2'>Loading</p>
+                <Image src="/loading.svg" alt="Loading" width={25} height={25} />
+                <p className='p-2'>Loading</p>
+            </div>
         </div>
     )
 }

components/RouteCards.tsx

@@ -2,18 +2,24 @@
 
 import { Button } from '@/components/ui/button';
 import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "./ui/card";
-import { getHosts, getRouteUpstreams } from '@/lib/utils';
+import { getHandler, getHosts, getRouteUpstreams } from '@/lib/utils';
 import { toast } from './ui/use-toast';
 import React, { useState } from 'react';
 import useSWRMutation from 'swr/mutation';
-import { deleteRoute } from '@/lib/clientActions';
+import { deleteRoute, useRoutes } from '@/lib/clientActions';
 import { RouteDialog } from './RouteDialog';
+import Error from './Error';
+import Loading from './Loading';
 
-export default function RouteCards({ routes }: { routes: Route[] }) {
+export default function RouteCards() {
+
+    const { data: routes, error, isLoading } = useRoutes();
+    let routesMap: Route[] = routes as Route[];
 
     const [route, setRoute] = useState<Route>();
     const [open, setOpen] = useState(false);
 
+
     const { trigger: handleDelete } = useSWRMutation("/api/caddy/routes", deleteRoute, {
         onError: () => {
             return toast({
@@ -36,29 +42,44 @@ export default function RouteCards({ routes }: { routes: Route[] }) {
         setRoute(route);
     }
 
+
+    if (error) return <Error />
+    if (isLoading) return <Loading />
+
+
     return (
         <>
-            {route && <RouteDialog open={open} onOpenChange={setOpen} route={route} routesMap={routes} />}
+            {route && <RouteDialog open={open} onOpenChange={setOpen} route={route} routesMap={routesMap} />}
             {
-                routes.map((route, index) => (
+                routesMap.map((route, index) => (
-                    <div key={index} className='p-2'>
+                    <div key={index}>
-                        <Card key={index} className='w-[15vw]'>
+                        <Card key={index}>
                             <CardHeader>
                                 <CardTitle>{getHosts(route)!.values().next().value}</CardTitle>
                                 {getHosts(route)!.map((route => <CardDescription key={route}>{route}</ CardDescription>))}
                                 <CardDescription></CardDescription>
                             </CardHeader>
                             <CardContent>
-                                <p className="text-sm font-medium leading-none">
+                                <div className='flex flex-grid gap-6 items-center justify-center'>
-                                    Tunneling to
+                                    <div>
-                                </p>
+                                        <p className='text-sm font-mdeium leading-none'>
-                                <p className="text-sm text-muted-foreground">{getRouteUpstreams(route)?.map((upstream => upstream.dial))}</p>
+                                            Type
+                                        </p>
+                                        <p className='text-sm text-muted-foreground'>{getHandler(route)}</p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm font-medium leading-none">
+                                            Tunneling to
+                                        </p>
+                                        <p className="text-sm text-muted-foreground">{getRouteUpstreams(route)?.map((upstream => upstream.dial))}</p>
+                                    </div>
+                                </div>
                             </CardContent>
                             <CardFooter className="flex justify-between">
-                                <Button onClick={() => { 
+                                <Button onClick={() => {
                                     editRoute(route)
                                     setOpen(true)
-                                 }}>Edit</Button>
+                                }}>Edit</Button>
                                 <Button variant="destructive" onClick={() => { handleDelete(route) }}>Delete</Button>
                             </CardFooter>
                         </Card>