working on agents.

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>
             )