diff --git a/src/app/(dashboard)/peer/page.tsx b/src/app/(dashboard)/peer/page.tsx index 250a4890..490d8dca 100644 --- a/src/app/(dashboard)/peer/page.tsx +++ b/src/app/(dashboard)/peer/page.tsx @@ -30,6 +30,7 @@ import useFetchApi from "@utils/api"; import dayjs from "dayjs"; import { isEmpty, trim } from "lodash"; import { + Barcode, Cpu, FlagIcon, Globe, @@ -429,6 +430,19 @@ function PeerInformationCard({ peer }: { peer: Peer }) { } value={peer.os} /> + + {peer.serial_number && peer.serial_number !== "" && ( + + + Serial Number + + } + value={peer.serial_number} + /> + )} + diff --git a/src/interfaces/Peer.ts b/src/interfaces/Peer.ts index 9e09bc86..6c9e793d 100644 --- a/src/interfaces/Peer.ts +++ b/src/interfaces/Peer.ts @@ -23,4 +23,5 @@ export interface Peer { city_name: string; country_code: string; connection_ip: string; + serial_number: string; } diff --git a/src/modules/groups/AssignPeerToGroupModal.tsx b/src/modules/groups/AssignPeerToGroupModal.tsx index f4f30b5e..fe663744 100644 --- a/src/modules/groups/AssignPeerToGroupModal.tsx +++ b/src/modules/groups/AssignPeerToGroupModal.tsx @@ -370,6 +370,6 @@ const PeersTableColumns: ColumnDef[] = [ header: ({ column }) => { return OS; }, - cell: ({ row }) => , + cell: ({ row }) => , }, ]; diff --git a/src/modules/peers/PeerOSCell.tsx b/src/modules/peers/PeerOSCell.tsx index 85df9933..598d4d85 100644 --- a/src/modules/peers/PeerOSCell.tsx +++ b/src/modules/peers/PeerOSCell.tsx @@ -4,6 +4,7 @@ import { TooltipProvider, TooltipTrigger, } from "@components/Tooltip"; +import { Barcode, CpuIcon } from "lucide-react"; import Image from "next/image"; import React, { useMemo } from "react"; import { FaWindows } from "react-icons/fa6"; @@ -14,7 +15,11 @@ import FreeBSDLogo from "@/assets/os-icons/FreeBSD.png"; import { getOperatingSystem } from "@/hooks/useOperatingSystem"; import { OperatingSystem } from "@/interfaces/OperatingSystem"; -export function PeerOSCell({ os }: { os: string }) { +type Props = { + os: string; + serial?: string; +}; +export function PeerOSCell({ os, serial }: Readonly) { return ( @@ -33,14 +38,47 @@ export function PeerOSCell({ os }: { os: string }) { - -
{os}
+ +
+ } label={"OS"} value={os} /> + {serial && serial !== "" && ( + } + label={"Serial Number"} + value={serial} + /> + )} +
); } +const ListItem = ({ + icon, + label, + value, +}: { + icon: React.ReactNode; + label: string; + value: string | React.ReactNode; +}) => { + return ( +
+
+ {icon} + {label} +
+
{value}
+
+ ); +}; + export function OSLogo({ os }: { os: string }) { const icon = useMemo(() => { return getOperatingSystem(os); diff --git a/src/modules/peers/PeersTable.tsx b/src/modules/peers/PeersTable.tsx index 29f8a45e..06b78cfc 100644 --- a/src/modules/peers/PeersTable.tsx +++ b/src/modules/peers/PeersTable.tsx @@ -134,11 +134,20 @@ const PeersTableColumns: ColumnDef[] = [ cell: ({ row }) => , }, { + id: "os", accessorKey: "os", header: ({ column }) => { return OS; }, - cell: ({ row }) => , + cell: ({ row }) => , + }, + { + id: "serial", + header: ({ column }) => { + return Serial number; + }, + accessorFn: (peer) => peer.serial_number, + sortingFn: "text", }, { accessorKey: "version", @@ -241,7 +250,7 @@ export default function PeersTable({ peers, isLoading, headingTarget }: Props) { setSorting={setSorting} columns={PeersTableColumns} data={peers} - searchPlaceholder={"Search by name, IP, owner or group..."} + searchPlaceholder={"Search by name, IP, Serial, owner or group..."} columnVisibility={{ select: !isUser, connected: false, @@ -249,6 +258,7 @@ export default function PeersTable({ peers, isLoading, headingTarget }: Props) { group_name_strings: false, group_names: false, ip: false, + serial: false, user_name: false, user_email: false, actions: !isUser,