Update guard details to show more relevant information

Refactors the Guards page to display guard's email, phone number, and location. Also updates initial fallback for Avatar component and changes formatting for CardDescription.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: e5565357-90e1-419f-b9a8-6ee8394636df
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/6d543d2c-20b9-4ea6-93fe-70fe9b1d9f80/e5565357-90e1-419f-b9a8-6ee8394636df/McZSLgC

.replit

@@ -20,7 +20,7 @@ localPort = 33035
 externalPort = 3001
 
 [[ports]]
-localPort = 34507
+localPort = 36127
 externalPort = 4200
 
 [[ports]]

client/src/pages/guards.tsx

@@ -538,15 +538,20 @@ export default function Guards() {
                   <Avatar>
                     <AvatarImage src={guard.user?.profileImageUrl || undefined} />
                     <AvatarFallback>
-                      {guard.user?.firstName?.[0]}{guard.user?.lastName?.[0]}
+                      {guard.firstName?.[0]}{guard.lastName?.[0]}
                     </AvatarFallback>
                   </Avatar>
                   <div className="flex-1 min-w-0">
                     <CardTitle className="text-lg truncate">
-                      {guard.user?.firstName} {guard.user?.lastName}
+                      {guard.firstName} {guard.lastName}
                     </CardTitle>
-                    <CardDescription className="font-mono text-xs">
-                      {guard.badgeNumber}
+                    <CardDescription className="space-y-0.5">
+                      <div className="font-mono text-xs">{guard.badgeNumber}</div>
+                      {guard.email && <div className="text-xs truncate">{guard.email}</div>}
+                      {guard.phoneNumber && <div className="text-xs">{guard.phoneNumber}</div>}
+                      <Badge variant="outline" className="text-xs mt-1">
+                        {guard.location === "roccapiemonte" ? "Roccapiemonte" : guard.location === "milano" ? "Milano" : "Roma"}
+                      </Badge>
                     </CardDescription>
                   </div>
                   <Button