working on agents.

app/(customer)/dashboard/agents/[agentId]/page.tsx

@@ -13,18 +13,11 @@ import Link from "next/link";
 
 export default async function RoutePage(props: PageParams<{ agentId: string }>) {
 
-    // const agent = await prisma.agent.findUnique({
-    //     where: {
-    //         id: props.params.agentId,
-    //     },
-    // })
-
-    const agent = {
-        "id": props.params.agentId,
-        "name": "Agent 1",
-        "description": "My beautiful project!",
-        "lastContact": null,
-    }
+    const agent = await prisma.agent.findUnique({
+        where: {
+            id: props.params.agentId,
+        },
+    })
 
     const backups = [
         {'id': 'backup-1', 'createdAt': '2023-11-27T11:26:54.870914Z', 'status': 'pending'},
@@ -127,7 +120,7 @@ export default async function RoutePage(props: PageParams<{ agentId: string }>)
 
                     <TabsList className="grid w-full grid-cols-2">
                         <TabsTrigger value="backup">Backup</TabsTrigger>
-                        <TabsTrigger value="restore">Backup</TabsTrigger>
+                        <TabsTrigger value="restore">Restoration</TabsTrigger>
                     </TabsList>
 
                     <TabsContent className="h-full justify-between" value="backup">

app/(customer)/dashboard/agents/new/page.tsx

@@ -1,5 +1,5 @@
 import {PageParams} from "@/types/next";
-import {Page, PageContent, PageDescription, PageHeader, PageTitle} from "@/features/layout/page";
+import {Page, PageContent, PageHeader, PageTitle} from "@/features/layout/page";
 import {AgentForm} from "@/components/wrappers/Agent/AgentForm/AgentForm";
 
 

app/(customer)/dashboard/agents/page.tsx

@@ -8,20 +8,7 @@ import {Page, PageActions, PageContent, PageHeader, PageTitle} from "@/features/
 
 export default async function RoutePage(props: PageParams<{}>) {
 
-    // const agents = await prisma.agent.findMany({})
-
-    const agents = [
-        {"id": "467911b6-1234-4321-8765-111111111111", "name": "My Agent 1", "lastContact": "null"},
-        {"id": "15f03a2a-f81e-4339-bb3d-222222222222", "name": "My Agent 2", "lastContact": "null"},
-        {"id": "2e9b6e1a-5678-9012-3456-333333333333", "name": "My Agent 3", "lastContact": "null"},
-        {"id": "8c637541-1111-2222-3333-444444444444", "name": "My Agent 4", "lastContact": "null"},
-        {"id": "9e02f789-5555-6666-7777-555555555555", "name": "My Agent 5", "lastContact": "null"},
-        {"id": "1a2b3c4d-8888-9999-0000-666666666666", "name": "My Agent 6", "lastContact": "null"},
-        {"id": "7d8e9f0g-3333-4444-5555-777777777777", "name": "My Agent 7", "lastContact": "null"},
-        {"id": "3f4g5h6j-9999-0000-1111-888888888888", "name": "My Agent 8", "lastContact": "null"},
-        {"id": "5c6d7e8f-2222-3333-4444-999999999999", "name": "My Agent 9", "lastContact": "null"},
-        {"id": "9a0b1c2d-6666-7777-8888-000000000000", "name": "My Agent 10", "lastContact": "null"}
-    ]
+    const agents = await prisma.agent.findMany({})
 
     return (
         <Page>

app/(customer)/dashboard/settings/page.tsx

@@ -1,15 +1,19 @@
 import {PageParams} from "@/types/next";
+import {Page, PageContent, PageHeader, PageTitle} from "@/features/layout/page";
+
 
 export default async function RoutePage(props: PageParams<{}>) {
 
     return (
-        <div className="flex flex-1 flex-col gap-4 p-4">
-            <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-                <div className="aspect-video rounded-xl bg-muted/50"/>
-                <div className="aspect-video rounded-xl bg-muted/50"/>
-                <div className="aspect-video rounded-xl bg-muted/50"/>
-            </div>
-            <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min"/>
-        </div>
+        <Page>
+            <PageHeader>
+                <PageTitle>
+                    Settings
+                </PageTitle>
+            </PageHeader>
+            <PageContent>
+                content
+            </PageContent>
+        </Page>
     )
 }

src/components/wrappers/Agent/AgentCard/AgentCard.tsx

@@ -2,23 +2,32 @@
 
 import {Card, CardContent, CardHeader} from "@/components/ui/card";
 import Link from "next/link";
+import {ValueIcon} from "@radix-ui/react-icons";
+import {Circle} from "lucide-react";
+import {ConnectionCircle} from "@/components/wrappers/connection-circle";
 
 export type agentCardProps = {
-    id: string;
-    name: string;
-    lastContact: string;
+    data: any
 }
 
 export const AgentCard = (props: agentCardProps) => {
 
-    const {id, name, lastContact} = props;
+    const {data: agent} = props;
 
     return (
-        <Link href={`/dashboard/agents/${id}`}>
-            <Card>
-                <CardHeader>{name}</CardHeader>
-                <CardContent>Agent's Description</CardContent>
+        <Link href={`/dashboard/agents/${agent.id}`}>
+            <Card className="flex flex-row justify-between">
+                <div className="">
+                    <CardHeader>{agent.name}</CardHeader>
+                    <CardContent>
+                        Last contact : {agent.lastContact?.toDateString() ?? "Never connected"}
+                    </CardContent>
+                </div>
+                <div className="mt-3 mr-3">
+                    <ConnectionCircle date={agent.lastContact}/>
+                </div>
             </Card>
+
         </Link>
     )
 }

src/components/wrappers/Agent/AgentForm/AgentForm.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
+import {Card, CardContent} from "@/components/ui/card";
 import {
     FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useZodForm
 } from "@/components/ui/form";
@@ -62,22 +62,22 @@ export const AgentForm = (props: agentFormProps) => {
                               await mutation.mutateAsync(values);
                           }}
                     >
-                                <FormField
-                                    control={form.control}
-                                    name="name"
-                                    defaultValue=""
-                                    render={({field}) => (
-                                        <FormItem>
-                                            <FormLabel>Name</FormLabel>
-                                            <FormControl>
-                                                <Input
-                                                    placeholder={"Project 1"} {...field} />
-                                            </FormControl>
-                                            <FormDescription>{"Your agent project name"}</FormDescription>
-                                            <FormMessage/>
-                                        </FormItem>
-                                    )}
-                                />
+                        <FormField
+                            control={form.control}
+                            name="name"
+                            defaultValue=""
+                            render={({field}) => (
+                                <FormItem>
+                                    <FormLabel>Name</FormLabel>
+                                    <FormControl>
+                                        <Input
+                                            placeholder={"Project 1"} {...field} />
+                                    </FormControl>
+                                    <FormDescription>{"Your agent project name"}</FormDescription>
+                                    <FormMessage/>
+                                </FormItem>
+                            )}
+                        />
                         <FormField
                             control={form.control}
                             defaultValue=""
@@ -90,10 +90,10 @@ export const AgentForm = (props: agentFormProps) => {
                                         <Input
                                             value={field.value ?? ""}
                                             placeholder={"agent-5-project-1"} {...field}
-                                               onChange={(e) => {
-                                                   const value = e.target.value.replaceAll(" ", "-").toLowerCase()
-                                                   field.onChange(value)
-                                               }}
+                                            onChange={(e) => {
+                                                const value = e.target.value.replaceAll(" ", "-").toLowerCase()
+                                                field.onChange(value)
+                                            }}
                                         />
                                     </FormControl>
                                     <FormDescription>{'The slug is used in the url of the agent'}</FormDescription>

src/components/wrappers/cards-with-pagination.tsx

@@ -45,7 +45,7 @@ export const CardsWithPagination = (props: cardsWithPaginationProps) => {
         <div className={cn("flex flex-col h-full justify-between", className)}>
             <div className={cn(`grid h-max auto-rows-min gap-4 md:grid-cols-${numberOfColumns}`)}>
                 {currentCards.map((card, key) => (
-                    <CardItem key={key} {...card}/>
+                    <CardItem key={key} data={card}/>
                 ))}
             </div>
             <PaginationNavigation

src/components/wrappers/connection-circle.tsx

@@ -0,0 +1,25 @@
+import {cn} from "@/lib/utils";
+
+export type connectionCircleProps = {
+    date: Date
+}
+
+
+export const ConnectionCircle = ({date}: connectionCircleProps) => {
+
+    let style = "";
+
+    const interval = new Date().getTime() - new Date(date).getTime()
+
+    if (interval < 10000) {
+        style = "bg-green-400 border-green-600"
+    } else if (1000 <= interval && interval <= 20000) {
+        style = "bg-orange-400 border-orange-600"
+    } else {
+        style = "bg-red-400 border-red-600"
+    }
+
+    return (
+        <div color="red" className={cn("w-5 h-5 rounded-3xl border-4", style)}/>
+    )
+}

src/components/wrappers/dialog.tsx

@@ -0,0 +1,44 @@
+"use client"
+
+import {Button} from "@/components/ui/button"
+import {
+    Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle
+} from "@/components/ui/dialog"
+import {Input} from "@/components/ui/input"
+import {Label} from "@/components/ui/label"
+
+
+export type agentRegistrationDialogProps = {
+    open: boolean,
+    setOpen: (open: boolean) => void,
+}
+
+
+export const AgentRegistrationDialog = (props: agentRegistrationDialogProps) => {
+
+    const {open, setOpen} = props;
+
+    return (
+        <Dialog open={open} onOpenChange={setOpen}>
+
+            <DialogContent className="sm:max-w-[425px]">
+
+                <DialogHeader>
+                    <DialogTitle>New agent registered!</DialogTitle>
+                </DialogHeader>
+
+                <div className="grid gap-4 py-4">
+                    <div className="grid grid-cols-4 items-center gap-4">
+                        <Label htmlFor="name" className="text-right">
+                            EDGE KEY
+                        </Label>
+                        <Input id="name" value="Pedro Duarte" readOnly className="col-span-3"/>
+                    </div>
+                </div>
+                <DialogFooter>
+                    <Button type="submit">Close</Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    )
+}

src/features/backup/columns.tsx

@@ -10,7 +10,8 @@ import {
     DropdownMenuTrigger
 } from "@/components/ui/dropdown-menu";
 import {Button} from "@/components/ui/button";
-import {MoreHorizontal} from "lucide-react";
+import {Download, MoreHorizontal, Trash2} from "lucide-react";
+import {ReloadIcon} from "@radix-ui/react-icons";
 
 export type Backup = {
     id: string
@@ -52,14 +53,24 @@ export const backupColumns: ColumnDef<Backup>[] = [
                     </DropdownMenuTrigger>
                     <DropdownMenuContent align="end">
                         <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                        <DropdownMenuItem
-                            onClick={() => navigator.clipboard.writeText(payment.id)}
-                        >
-                            Copy payment ID
+
+                        <DropdownMenuItem onClick={() => {
+                        }}>
+                            <ReloadIcon/> Restore
                         </DropdownMenuItem>
+
+                        <DropdownMenuItem onClick={() => {
+                        }}>
+                            <Download/> Download
+                        </DropdownMenuItem>
+
                         <DropdownMenuSeparator/>
-                        <DropdownMenuItem>View customer</DropdownMenuItem>
-                        <DropdownMenuItem>View payment details</DropdownMenuItem>
+
+                        <DropdownMenuItem className="text-red-600" onClick={() => {
+                        }}>
+                            <Trash2/> Delete
+                        </DropdownMenuItem>
+
                     </DropdownMenuContent>
                 </DropdownMenu>
             )

src/features/restore/columns.tsx

@@ -10,7 +10,8 @@ import {
     DropdownMenuTrigger
 } from "@/components/ui/dropdown-menu";
 import {Button} from "@/components/ui/button";
-import {MoreHorizontal} from "lucide-react";
+import {Download, MoreHorizontal, Trash2} from "lucide-react";
+import {ReloadIcon} from "@radix-ui/react-icons";
 
 export type Restore = {
     id: string
@@ -52,14 +53,13 @@ export const restoreColumns: ColumnDef<Restore>[] = [
                     </DropdownMenuTrigger>
                     <DropdownMenuContent align="end">
                         <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                        <DropdownMenuItem
-                            onClick={() => navigator.clipboard.writeText(payment.id)}
-                        >
-                            Copy payment ID
+
+                        <DropdownMenuItem onClick={() => {
+                        }}>
+                            <ReloadIcon/> Rerun
                         </DropdownMenuItem>
-                        <DropdownMenuSeparator/>
-                        <DropdownMenuItem>View customer</DropdownMenuItem>
-                        <DropdownMenuItem>View payment details</DropdownMenuItem>
+
+
                     </DropdownMenuContent>
                 </DropdownMenu>
             )