Sever icon and a few other stuff

src/app/dashboard/server.tsx

@@ -31,6 +31,7 @@ import {
   MemoryStick,
   Network,
   Pencil,
+  ServerIcon,
   Trash,
   Wifi,
 } from "lucide-react";
@@ -73,22 +74,29 @@ export default function ServerComponent({
     <>
       <ContextMenu>
         <ContextMenuTrigger>
-          <Card className="w-full transition-transform duration-500 hover:scale-102 hover:cursor-pointer">
+          <Card className="w-full transition-transform duration-500 hover:scale-102 hover:cursor-pointer !select-none">
             <CardHeader>
+              <div className="flex items-center gap-2">
+                <div className="bg-muted text-muted-foreground p-1.5 rounded-md">
+                  <ServerIcon className="w-4.5 h-4.5 text-current my-auto" />
+                </div>
+                <div>
                   <CardTitle>{server.name}</CardTitle>
                   <CardDescription className="flex justify-between">
-                <div className="flex gap-2">
-                  {server.status[0].toUpperCase() + server.status.slice(1)}{" "}
+                    <div className="flex gap-2 items-center flex-wrap">
+                      {server.status[0].toUpperCase() + server.status.slice(1)}
                       {" · "}
                       {server.ip}
                       {server.location && (
-                    <div className="flex items-center gap-0.5">
+                        <div className="flex items-center gap-1">
                           <MapPin size={14} />
                           {server.location}
                         </div>
                       )}
                     </div>
                   </CardDescription>
+                </div>
+              </div>
             </CardHeader>
             <CardContent className="w-full flex flex-col gap-3.5">
               <UsageBar

src/app/servers/Map.tsx

@@ -11,7 +11,14 @@ import {
   SheetTrigger,
 } from "@/components/ui/sheet";
 import ServerComponent, { UsageBar } from "../dashboard/server";
-import { Cpu, HardDrive, MapPin, MemoryStick, Network } from "lucide-react";
+import {
+  Cpu,
+  HardDrive,
+  MapPin,
+  MemoryStick,
+  Network,
+  ServerIcon,
+} from "lucide-react";
 
 export default function Map({ servers }: { servers: Server[] }) {
   const mapContainer = useRef<HTMLDivElement | null>(null);
@@ -71,9 +78,15 @@ export default function Map({ servers }: { servers: Server[] }) {
         {sheet && (
           <SheetContent>
             <SheetHeader>
+              <div className="flex items-center gap-2">
+                <div className="bg-muted text-muted-foreground p-1.5 rounded-md">
+                  <ServerIcon className="w-4.5 h-4.5 text-current my-auto" />
+                </div>
+                <div>
                   <SheetTitle>{sheet.name}</SheetTitle>
                   <SheetDescription className="flex gap-2">
-                {sheet.status[0].toUpperCase() + sheet.status.slice(1)} {" · "}
+                    {sheet.status[0].toUpperCase() + sheet.status.slice(1)}{" "}
+                    {" · "}
                     {sheet.ip}
                     {sheet.location && (
                       <span className="flex items-center gap-0.5">
@@ -82,6 +95,8 @@ export default function Map({ servers }: { servers: Server[] }) {
                       </span>
                     )}
                   </SheetDescription>
+                </div>
+              </div>
             </SheetHeader>
             <div className="px-4 gap-4 flex flex-col">
               <UsageBar

src/hooks/useSession.ts

@@ -22,6 +22,10 @@ export default function useSession() {
           toast.error(e.response.data.message);
           router.replace("/login");
         });
+    else {
+      toast.error("Invalid session");
+      router.replace("/login");
+    }
   }, []);
 
   return session;