Improve patrol planning by showing assigned guards and scrolling to sequences

Add functionality to display assigned guards for patrol routes and scroll to patrol sequences section.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: e0b5b11c-5b75-4389-8ea9-5f3cd9332f88
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/6d543d2c-20b9-4ea6-93fe-70fe9b1d9f80/e0b5b11c-5b75-4389-8ea9-5f3cd9332f88/Z8fg4as

client/src/pages/planning-mobile.tsx

@@ -108,6 +108,9 @@ export default function PlanningMobile() {
     selectedDuplicateGuardId: "",
   });
 
+  // Ref per scroll alla sezione sequenze pattuglia
+  const patrolSequencesRef = useRef<HTMLDivElement>(null);
+
   // Query siti mobile per location
   const { data: mobileSites, isLoading: sitesLoading } = useQuery<MobileSite[]>({
     queryKey: ["/api/planning-mobile/sites", selectedLocation],
@@ -254,6 +257,34 @@ export default function PlanningMobile() {
     }
   };
 
+  // Funzione per trovare la guardia assegnata a un sito
+  const findAssignedGuard = (siteId: string) => {
+    if (!existingPatrolRoutes) return null;
+    
+    for (const route of existingPatrolRoutes) {
+      const hasStop = route.stops?.some((stop: any) => stop.siteId === siteId);
+      if (hasStop) {
+        const guard = availableGuards?.find(g => g.id === route.guardId);
+        return guard || null;
+      }
+    }
+    return null;
+  };
+
+  // Funzione per fare scroll alla sezione sequenze pattuglia
+  const handleScrollToPatrolSequences = () => {
+    if (patrolSequencesRef.current) {
+      patrolSequencesRef.current.scrollIntoView({
+        behavior: 'smooth',
+        block: 'start',
+      });
+      toast({
+        title: "Sequenza visualizzata",
+        description: "Scorri la lista delle sequenze pattuglia",
+      });
+    }
+  };
+
   // Funzione per assegnare guardia a un sito
   const handleAssignGuard = (site: MobileSite) => {
     if (!selectedGuard) {
@@ -669,6 +700,7 @@ export default function PlanningMobile() {
               mobileSites.map((site) => {
                 const isInRoute = patrolRoute.some(s => s.id === site.id);
                 const routeIndex = patrolRoute.findIndex(s => s.id === site.id);
+                const assignedGuard = findAssignedGuard(site.id);
                 
                 return (
                   <div
@@ -700,15 +732,22 @@ export default function PlanningMobile() {
                         )}
                       </div>
                     )}
-                    <div className="flex gap-2 pt-2">
+                    <div className="flex gap-2 pt-2 items-center">
-                      <Button 
+                      {assignedGuard ? (
-                        size="sm" 
+                        <Button 
-                        variant="default" 
+                          size="sm" 
-                        onClick={() => handleAssignGuard(site)}
+                          variant="default" 
-                        data-testid={`button-assign-${site.id}`}
+                          onClick={handleScrollToPatrolSequences}
-                      >
+                          data-testid={`button-assigned-${site.id}`}
-                        Assegna Guardia
+                        >
-                      </Button>
+                          <User className="h-4 w-4 mr-2" />
+                          Assegnato a {assignedGuard.firstName} {assignedGuard.lastName}
+                        </Button>
+                      ) : (
+                        <span className="text-sm text-muted-foreground" data-testid={`text-not-assigned-${site.id}`}>
+                          Non assegnato
+                        </span>
+                      )}
                       <Button 
                         size="sm" 
                         variant="outline" 
@@ -788,7 +827,7 @@ export default function PlanningMobile() {
       </Card>
 
       {/* Sequenze Pattuglia del Giorno */}
-      <Card>
+      <Card ref={patrolSequencesRef}>
         <CardHeader>
           <CardTitle className="flex items-center gap-2">
             <ListOrdered className="h-5 w-5" />